====== Premier site en CSS ====== =====Présentation===== ====But==== Mettre en forme notre site pour le rendre plus agréable à regarder. Si le HTML décrit le contenu, le [[CSS]] décrit la mise en forme. ==== Connaissances de base ==== Revoir le cours sur le [[clubinfo:CSS]] ==== Activité ==== {{ :clubinfo:site_v2.jpg?200|}} Pour mettre en forme nous allons : * Diminuer la largeur de la page HTML (comme sur ce wiki) et mettre une couleur de fond pour la balise * Améliorer la présentation du menu de la page d'accueil

* Améliorer la présentation des titres de page
* Faire gérer par la feuille de style l'image du pont * Rendre plus évidents les lieux et les type< class='xx'> =====Déroulement===== ====Modification des pages HTML existantes==== Ajouter la(es) balise(s) permettant d'insérer la feuille de style dans l'entête de toutes les pages. La feuille de style s'appellera "style1.css". ====Nouvelles mise en forme utiles==== Chaque balise se positionne dans une boîte rectangulaire dont on peut fixer les dimensions, les espaces autours (margin, padding), le fond (background) et la bordure (border). Les boîtes de succèdent normalement les une sous les autres. * **width: 50%; height: 20px;** fixe les dimensions en pourcentage de la page ou en pixels. * **float: left;** modifie l'ordre de succession en plaçant la boite courante à gauche (droite) de la précédente * **text** modifie les propriétés d'affichage du texte contenu dans la boîte (font->caractère ; text->paragraphe). ====Les styles par balises==== Traiter les demandes (plus ou moins explicites à votre goût) et pourquoi pas en ajouter d'autres. * body : toutes pages, couleur de fond et marges à droite et gauche. * h1 : toutes pages, couleur de fond, couleur de police et choix police. * ul (la liste) : page index, marges supplémentaires et bordures. * li (ligne de la liste) : police et couleur. * p.type, p.lieu : mettre en évidence (différentier les 2 informations). * p.description : justifier le texte, police. * img : limiter la taille à 400 pixels et placer à gauche de la description * cite : rendre discret =====Exemple===== {{:cours:cp.png?20 |}}++++Coup de pouce | ==== Ajouter la feuille de style ==== ===== Code de la feuille de style ===== body { margin-left: 100px; margin-right: 100px; background-color: silver; } ul { margin-left: 100px; margin-right: 100px; border: 1px solid black; } li { font-size: 18px; font-weight: bold; color: yellow; } hr { float: none; } h1 { font: bold 24pt "Arial", sans-serif; color: navy; background-color: white; } p.description { text-align: justify; } img.grandeimg { width: 400px; float: left; margin-right: 20px; } p.type { color: navy; width: 400px; margin: 0px; margin-right: 20px; } P.lieu { color: green; float: right; margin: 0px; } cite { font-size: 10pt; color: white; } {{:clubinfo:1er_sitev1-2.zip |Le 1er site (avec CSS)}} en fichier ZIP à télécharger ++++ =====Améliorations===== Il n'y a que des avantages à utiliser les feuilles CSS pour la mise en forme. Il existe une séparation complète entre le contenu et celle-ci. De plus, il est possible de définir différentes mises en forme adaptées aux différents médias. Nous allons optimiser notre travail en ajoutant des [[améliorations sur le contenu HTML et CSS]] avant de passer à de nouveaux langages utiles sur le web. En effet, pour notre site, il est toujours nécessaire de créer une nouvelle page complète par pont ajouté et de modifier le menu. Nous pouvons améliorer cela après avoir découvert : * le [[clubinfo:PHP]] pour automatiser et personnaliser la création de page ou la gestion des données. * les [[clubinfo:formulaires|formulaires HTML]] pour modifier les données de notre site * la [[création de la base de données]] pour notre [[premier site SQL]].