Leçon 11 v2 Réussir son site web avec XHTML et CSS TD de révision : le design d un site web 1. La structure générale... 2 2. Primo, le XHTML... 3 Découpage des pages en blocks... 3 Création du modèle de page HTML (contenu commun)... 4 Création des autres pages HTML... 5 Création du contenu de chaque page... 5 3. Secundo, le CSS... 8 Dans cette leçon, nous allons créer le site web (4 pages) de l agence graphique Studio Coquelicot. index.html savoir-faire.html realisations.html contact.html Téléchargez depuis le site www.infonice.org le cours et les ressources de la leçon 11 [v2]. Décompressez le dossier zippé, ce dernier contient les ressources nécessaires et un dossier site-coquelicot qui contiendra le site que vous allez créer. Structure du dossier site-coquelicot site-coquelicot contact index realisations savoir-faire style images bandeau.jpg client01.jpg coquelicot1.jpg fond_jaune.png Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.1/12
1. La structure générale Le choix de la structure est important et c'est en effet une question récurrente parfaitement légitime tant CSS nous permet d'aborder un même problème sous de nombreux angles. Bien souvent, on structure sa page web à l'aide de blocks <div>, la fameuse balise universelle de type "block". Découpage du site sous forme de blocks : Comme nous l avons vu, une page web c'est une combinaison de 2 fichiers : Un fichier XHTML (.html) : c'est dans ce fichier que se trouve le contenu de la page (le texte). Ce fichier est constitué de balises qui servent à indiquer si tel texte est un, un texte important, une citation, un titre, etc. Un fichier CSS (.css) : c'est le fichier qui permet de créer la présentation de nos pages web. C'est lui qui indique qu'un texte est en rouge, qu'il est centré, dans la police "Arial"... Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.2/12
2. Primo, le XHTML Nous allons commencer par créer la page MODELE.html qui contiendra tout ce qui est commun à chacune des pages et qui servira ainsi de modèle pour toutes les autres. Pour commencer, le code de base d'une page XHTML Ouvrez le logiciel Notepad++. Créez une nouvelle page, collez-y le code de base d une page HTML puis choisissez le langage HTML. Dans l en-tête de la page, précisez le titre studio coquelicot. Découpage des pages en blocks Nous allons mettre en place le découpage commun aux 4 pages de ce site, avec les blocs : page, header, logo, nav, banniere_image, banniere_description, section1, contenu, sidebar, section2, realisations, slogan, liensutiles, footer Comme vous le savez, la partie visible du site se situe entre les balises <body></body> Enregistrez la page dans le dossier site-coquelicot en la nommant MODELE.html Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.3/12
Création du modèle de page HTML (contenu commun) Contenu du bloc nav Contenu du bloc banniere_description Créez une liste non ordonnée avec les items suivants : Item1 : Accueil, lien pointant vers accueil.html Item2 : Savoir-faire, lien pointant vers savoir-faire.html Item3 : Réalisations, lien pointant vers realisations.html Item4 : Contact, lien pointant vers contact.html image flecheblanchedroite.png lien pointant vers contact.html avec la class bouton_rouge Contenu du bloc sidebar Titre de niveau 1 : Graphic design Dans une div, image bulle.png avec l id fleche_bulle Dans une div avec la class centrage, image coquelicot1.jpg Titre de niveau 3 : Studio coquelicot Paragraphe avec sauts de ligne Dans une div avec la class centrage, images facebook.png, twitter.png, vimeo.png, flickr.png, rss.png Contenu du bloc realisations Titre de niveau 1 : Dernières réalisations Dans une div avec la class centrage, images realisation1.jpg, realisation2.jpg, realisation3.jpg Contenu du bloc slogan Contenu du bloc liensutiles Titre de niveau 1 : Coquelicot Studio Paragraphe : Une rencontre éthique Titre de niveau 1 : Liens utiles Créez une liste non ordonnée avec les items suivants : Item1 : W3C Validator, lien pointant vers le site validator.w3.org Item2 : Unice, lien pointant vers le site www.unice.fr Item3 : Infonice, lien pointant vers le site www.infonice.org Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.4/12
Création des autres pages HTML Enregistrez la page MODELE.html Vérifiez dans un navigateur si la page créée ressemble bien à l illustration ci-contre. Vous allez maintenant créer à partir de la page MODELE.html les 4 pages HTML du site : Depuis la page MODELE.html faites enregistrer sous en la nommant index.html puis encore enregistrer sous en la nommant savoir-faire.html puis encore enregistrer sous en la nommant realisations.html puis encore enregistrer sous en la nommant contact.html Création du contenu de chaque page Vous allez maintenant réaliser le contenu de chacune des pages du site à l aide des textes que vous trouverez dans le dossier textes et des indications suivantes : page index.html Titre de niveau 1 Titre de niveau 1 Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.5/12
formulaire page savoir-faire.html Titre de niveau 1 Titre de niveau 2 Liste non ordonnée Titre de niveau 2 3 s page contact.html Titre de niveau 1 Groupe de boutons radio civilite avec pour valeurs Mademoiselle, Madame et Monsieur nom prenom Tableau de 2 colonnes adresse email message Données du formulaire : Formulaire : Méthode : POST - Envoi des données vers la page traitement.php Groupe de champs Vos coordonnées - Groupe de boutons radio civilite - Tableau de 520 pixels de large (1 ère colonne 150, 2 ème colonne 370). Groupe de champs Votre message - Tableau de 520 pixels de large (1 ère colonne 150, 2 ème colonne 370). Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.6/12
page realisations.html Titre de niveau 1 Titre de niveau 4 Image client01.jpg Lien vers www.arjowiggins.com Titre de niveau 4 Image client02.jpg Lien vers www.snpi-fr.org Titre de niveau 4 Image client03.jpg Lien vers www.evidencebasedco mmunication.com Enregistrez toutes les pages et observez le résultat dans un navigateur web. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.7/12
3. Secundo, le CSS Nous attaquons maintenant la partie CSS en utilisant le CSS3. C'est une partie très importante, car chaque ligne de code modifie le design du site web. Ouvrez le logiciel Notepad++. Créez une nouvelle page puis choisissez le langage CSS. Enregistrez cette feuille de style dans le dossier site-coquelicot en la nommant style.css Revenez sur les pages index.html, realisations.html, savoir-faire.html et contact.html pour rajouter dans l en-tête de chacune d elles le code nécessaire pour les relier à la feuille de style style.css Rappel : <link rel="stylesheet" type="text/css" title="titre" href="fichier.css" /> Voici à quoi va ressembler notre site avec le CSS : Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.8/12
Définissez dans la feuille de style les propriétés suivantes : corps de la page arrière-plan : image fond_jaune.png famille de polices : Trebuchet MS, Arial, sans empattement par défaut couleur : #181818 bloc identifié page largeur : 900 pixels marges extérieures : automatiques (permet de centrer la page) bloc identifié header arrière-plan : image separateur.png, répétée horizontalement, en-dessous bloc identifié logo flottant : gauche largeur : 280 pixels hauteur : 115 pixels arrière-plan : image logo.png, pas de répétition bloc identifié nav largeur : 620 pixels alignement du texte : à droite transformation du texte : Majuscules marge extérieure du haut : 30 pixels les listes non ordonnées du bloc identifié nav style de liste : aucun les items du bloc identifié nav marge extérieure de droite : 15 pixels les liens du bloc identifié nav taille de police : 1,3 fois la taille normale couleur : #181818 décoration du texte : aucune les liens du bloc identifié nav au survol de la souris couleur : #d80500 bordure du dessous : trait continu, épaisseur 10 pixels, couleur #d80500 bloc identifié banniere_image marges extérieures : haut 15 pixels, droite 0, bas 25 pixels, gauche 0 hauteur : 219 pixels arrière-plan : image bandeau.jpg, pas de répétition position : relative rayon de bordure : 10 pixels ombre de la boite : décalage horizontal 0 pixel, décalage vertical 4 pixels, force du dégradé 4 pixels, couleur #1c1a19 Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.9/12
bloc identifié banniere_description position : absolue position par rapport au bas : 0 largeur : 99,5% hauteur : 33 pixels marges intérieures : haut 15 pixels, droite 0, bas 0, gauche 4 pixels couleur : blanc taille de police : 0,8 fois la taille normale arrière-plan : couleur RGB 24,24,24 /* pour les anciens navigateurs */ arrière-plan : couleur RGBa 24,24,24,0.8 rayon de bordure : haut-gauche 0, haut-droite 0, bas-droite 5 pixels, bas-gauche 5 pixels classe bouton_rouge hauteur : 25 pixels position : absolue position par rapport à droite : 5 pixels position par rapport au bas : 5 pixels arrière-plan : image fond_degraderouge.png, répétée horizontalement bordure : trait continu, épaisseur 1 pixel, couleur #760001 taille de police : 1,2 fois la taille normale alignement du texte : centré couleur : blanc décoration du texte : aucune marges intérieures : haut 3 pixels, droite 8 pixels, bas 0, gauche 8 pixels rayon de bordure : 5 pixels bloc identifié contenu et bloc identifié sidebar alignement vertical : top alignement du texte : justifié bloc identifié contenu largeur : 625 pixels marge extérieure de droite : 15 pixels titres de niveau 1 du bloc identifié contenu hauteur : 47 pixels arrière-plan : image ico_epingle.png, pas de répétition, à gauche marge intérieure de gauche : 50 pixels s du bloc identifié contenu taille de police : 0,8 fois la taille normale liens du bloc identifié contenu taille de police : 0,8 fois la taille normale couleurs : #d80500 décoration du texte : aucune Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.10/12
images du bloc identifié contenu rayon de bordure : 5 pixels ombre de la boite : décalage horizontal 0 pixel, décalage vertical 2 pixels, force du dégradé 5 pixels, couleur #1c1a19 bloc identifié sidebar position : relative hauteur : 235 pixels arrière-plan : couleur #706b64 marges intérieures : 10 pixels couleur : blanc taille de police : 1,9 fois la taille normale rayon de bordure : 5 pixels ombre de la boite : décalage horizontal 0 pixel, décalage vertical 2 pixels, force du dégradé 5 pixels, couleur #1c1a19 identifiant fleche_bulle position : absolue position par rapport au haut : 100 pixels position par rapport à gauche : -12 pixels classe centrage alignement du texte : à gauche bloc identifié section2 arrière-plan : image ico_top.png pas de répétition en haut au centre, image separateur.png répétée horizontalement en haut, image ombre.png répétée horizontalement en haut s et listes non ordonnées du bloc identifié section2 taille de police : 0,8 fois la taille normale titres de niveau 1 du bloc identifié section2 taille de police : 1,1 fois la taille normale bloc identifié realisations et bloc identifié slogan et bloc identifié liensutiles alignement vertical : top alignement du texte : centré bloc identifié realisations et bloc identifié liensutiles largeur : 40% bloc identifié slogan largeur : 18% images du bloc identifié realisations bordure : trait continu, épaisseur 1 pixel, couleur #181818 marge extérieure de droite : 2 pixels Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.11/12
listes non ordonnées du bloc identifié liensutiles alignement vertical : top marge extérieure du haut : 0 style de liste : image ico_liensexterne.png marge intérieure de gauche : 2 pixels alignement du texte : à gauche liens du bloc identifié liensutiles décoration de texte : aucune couleur : #760001 bloc identifié footer hauteur : 90 pixels arrière-plan : image footer.jpg, pas de répétition position : relative rayon de bordure : 5 pixels ombre de la boite : décalage horizontal 0 pixel, décalage vertical 4 pixels, force du dégradé 4 pixels, couleur #1c1a19 Mémento bref HTML 5/CSS 3 Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 p.12/12