Mise en forme CSS avec Dreamweaver
6.1 La balise DIV
La balise Div est communément appelé Calque. Elle est utilisée pour mettre en forme (Un site web complet, ou des éléments texte, images ...)
Pour insérer une balise DIV dans votre page
1. Cliquer dans l'onglet Mise en forme puis cliquez sur l'icône 3
Onglet Mise en forme
2. Cette boîte de dialogue apparaît
Insérer
Permet de choisir où insérer la balise, plusieurs choix sont possibles
- Au point d'insertion
- Avant la balise
- Aprés le début de la balise
- Avant la fin de la balise
- Aprés la balise
Classe
Permet d'associer le calque à une classe de style CSS
ID
Un ID permet de positionner un élément (div, table ...), il est utilisé pour faire de la mise en page de site web, chaque élément est unique et ne peut être utilisé qu'une fois par page
Nouveau style CSS
Permet de créer un nouveau style CSS pour associer à une balise div
La balise DIV avec une classe
Vous allez mettre en forme votre calque avec une class CSS
Si vous ne l'avez pas encore fait, lisez la rubrique sur les styles CSS
Exemple
Texte avec une classe
CODE HTML
<div class="Dreamweaver">Texte avec une classe</div>
CODE CSS
/* CSS Document */
/*
Ce code est dans ma feuille de style liee */
.Dreamweaver {
color: #FFFFFF;
background-color: #809723;
border: 1px solid #000000;
padding: 2px;
}
La balise DIV avec un ID
Par exemple, les pages que vous consultez sur ce site sont developpées avec des balises Div et des ID pour la mise en page
Pour positionner la banniére en haut de cette page, l' image est contenue dans un ID nommé haut
Cette méthode permet de positionner les différents éléments contenu dans votre site
Exemple: le haut, le contenu et le bas
Code CSS
#haut {
width: 800px;
margin-right: auto;
margin-left: auto;
vertical-align: top;
height: 182px;
}
Chaque ID doit être unique dans une page
Vous remarquerez que nous l'écrivons avec un # devant
6.2 Tracer la balise DIV
En traçant le calque, vous allez définir des positions absolues pour la balise DIV, vous retrouverez ces éléments dans votre CSS qui va être automatiquement insérer dans votre page dans la balise HEAD
1. Cliquer sur l'icône dans l'onglet Mise en forme 4
Onglet Mise en forme
2. Votre curseur change de forme
3. Dessiner la forme à l'endroit ou vous souhaitez l'insérer
Pour y insérer du texte, positionnez votre curseur dans la balise DIV que vous venez de tracer
Exemple
CODE HTML
<div align="center" class="Texte_access" id="apDiv1">Tracer la balise DIV</div>
CODE CSS
.Style1 {color: #666666}
#apDiv1 {
position:absolute;
left:407px;
top:1079px;
width:57px;
height:15px;
z-index:1;
}
-->
</style>
Pour la mise en forme de site avec des balises DIV, référez vous au modul
e 2 
