E-LEARNING - Formation 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>