docOrganiser une page web en blocs
download 
Plainte Transcription
Organiser une page web en blocs
Organiser une page web en blocs
L’utilisation conjointe de la balise <div> et de CSS permet de définir l’organisation géographique
d’une page web en différents blocs.
Du côté HTML, un bloc est défini par une balise <div> que l’on peut nommer à l’aide de l’attribut
id ou class :
• <div id= "nom"> si la balise n’est utilisée qu’une fois dans le fichier,
ou
• <div class= "nom"> si la balise est utilisée plusieurs fois dans le fichier.
Le nommage des balises <div> permet de définir différents blocs grâce aux propriétés CSS. Pour une
balise nommée par l’attribut id, on défini les propriétés CSS de la façon suivante :
#nom {
propriete1: valeur1 ;
propriete2 : valeur2 ;
…
}
Pour une balise nommée par l’attribut class, on défini les propriétés CSS de la façon suivante :
.nom {
propriete1: valeur1 ;
propriete2 : valeur2 ;
…
}
Pour illustrer ces notions délicates nous allons considérer un exemple classique d’organisation
géographique d’une page. Le but est d’obtenir le résultat ci-dessous :
L’organisation de cette page est la suivante :
• une barre de titre (en jaune)
• un menu (en vert)
• un contenu (en blanc)
• un pied de page (en rouge)
Dans le code HTML, ces différents blocs sont définis par autant de balises <div> différentiées par
leurs noms (attribut id ou class). Leurs propriétés (taille, position etc …) sont définies par des
propriétés CSS. Dans cet exemple, nous nommerons les balises <div> par l’attribut id.
Créez une nouvelle page html liée à une nouvelle feuille CSS (voir polycopHTMLCSS.doc).
N’oubliez pas la structure de base (balises <html>, <head> et <body>) ni la balise <link>
pour lier la feuille CSS à la page HTML.
Dans la feuille CSS, commençons par définir un bloc qui contiendra tous les autres, que nous
nommons conteneur. Dans cet exemple, il s’agit uniquement de définir la largeur de notre page
web (vous pourrez éventuellement le raffiner par la suite). Nous fixons cette largeur à 1200 pixels par
la déclaration CSS suivante :
#conteneur {
width:1200px;
}
Dans la page HTML, nous « activons » ce bloc par la balise <div> :
<div id="conteneur">
</div>
Tout le code compris dans ce bloc conteneur (entre <div> et </div>) sera formaté pour être
contenu dans une largeur de page de 1200 pixels. C’est dans ce bloc que nous placerons tous les
prochains éléments (barre de titre, menu, pied de page, et contenu). Les dimensions exprimées ici en
pixels peuvent également l’être en centimètre ou en pourcentage de la taille de l’écran (voir
proprietecss.doc).
Nous définissons la barre de titre, que nous nommons barre_titre, dans la feuille CSS par la
déclaration suivante :
#barre_titre {
background-color:yellow
text-align:center
border-style:solid;
border-width:4px;
}
Par cette déclaration, nous définissons un bloc de couleur jaune, dont le texte est centré, avec une
bordure de 4 pixels de type solid.
Dans la page HTML, nous plaçons ce bloc barre_titre à l’intérieur du précédent bloc
conteneur. Le code devient :
<div id="conteneur">
<div id="barre_titre">
</div>
</div>
Dans ce bloc barre_titre, écrivez le titre de votre page (utilisez la balise <h1>, comme pour tout
titre de page). Observez le résultat dans un navigateur.
La barre de menu est déclarée dans la feuille CSS par la déclaration suivante :
#menu {
width:170px;
height:400px;
background-color:green;
float:left;
}
Le menu correspond à un bloc de 170 pixels de largeur par 400 pixels de hauteur, de couleur vert.
La propriété float force le bloc menu à se placer à gauche du bloc qui le contient, dans notre
exemple : conteneur. Cette propriété force les blocs qui suivront menu dans le flux HTML à se
positionner à sa suite dans la limite du conteneur, dans notre exemple une largeur de 1200 pixels.
La page HTML intégrant le bloc de menu devient :
<div id="conteneur">
<div id="barre_titre">
</div>
<div id="menu">
</div>
</div>
Dans la page HTML, insérez le menu de votre page web dans le bloc menu. Un menu utilise
généralement les balises <ul> (liste non numérotée) et <a> (lien hypertexte).
Le bloc suivant menu étant automatiquement placé à sa suite par la propriété float, le bloc
contenant le contenu de la page (le bloc blanc sur la figure) est simplement défini par la déclaration
CSS suivante :
#contenu {
text-align:justify;
}
Le texte sera donc justifié dans ce bloc.
Insérez dans la page HTML la balise <div> correspondante à la suite du bloc menu. Insérez un
paragraphe de texte dans le bloc contenu (balise <p>). Observez le résultat.
Il ne reste plus qu’à définir le pied de page par la déclaration CSS suivante :
#pied_de_page{
text-align: center;
clear:left;
background-color:red;
}
Le texte du pied de page sera centré sur un fond rouge. La propriété clear annule la contrainte
imposée par la propriété float du bloc menu en le plaçant en dessous de celui-ci. Sans la propriété
clear, le pied de page se serait placé à la suite de menu, comme l’avait été contenu.
Insérez dans le code HTML le bloc pied de page à la suite du bloc contenu et insérez du texte (par
exemple votre nom et la date). Observez le résultat. Observez la différence sans la propriété clear
dans la déclaration du bloc pied_de_page.
