Leçon 11 Réussir son site web avec HTML et CSS

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

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 paragraphe,
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"...

GAHI Said Réussir son site web avec XHTML et CSS leçon 11 – p.1/9
  page realisations.html

Enregistrez toutes les pages et observez le résultat dans un navigateur web.

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.

GAHI Said Réussir son site web avec XHTML et CSS leçon 11 – p.2/9
  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

Voici à quoi va ressembler notre site avec le CSS :

Définissez dans la feuille de style les propriétés suivantes :

GAHI Said Réussir son site web avec XHTML et CSS leçon 11 – p.3/9
  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

 mode d’affichage : en ligne
 arrière-plan : image separateur.png, répétée horizontalement, en-dessous

 bloc identifié logo

 mode d’affichage : en ligne
 flottant : gauche
 largeur : 280 pixels
 hauteur : 115 pixels
 arrière-plan : image logo.png, pas de répétition

 bloc identifié nav

 mode d’affichage : en ligne
 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

 mode d’affichage : en ligne
 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

GAHI Said Réussir son site web avec XHTML et CSS leçon 11 – p.4/9
  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

GAHI Said Réussir son site web avec XHTML et CSS leçon 11 – p.5/9
 
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
 mode d’affichage : en ligne
 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

 mode d’affichage : en ligne
 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

Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 – p.6/9
 
 paragraphes 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

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

 paragraphes 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

Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 – p.7/9
 

 bloc identifié realisations et bloc identifié slogan et bloc identifié liensutiles

 mode d’affichage : en ligne
 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

listes non ordonnées du bloc identifié liensutiles

 mode d’affichage : en ligne
 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

Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 – p.8/9
 

Mémento bref HTML 5/CSS 3

Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 11 – p.9/9