e-learning Dreamweaver Initiation

2.3 Mise en forme à l'aide calque

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 module 2

1-Se familiariser avec l'interface

1.1 Organisation de l'espace de travail
1.2 La barre d'outils Insertion
1.3 La gestion de sites avec Dreamweaver

2- Création de contenu texte

2.11 Le texte, les polices, le formatage
2.12 Les paragraphes
2.13 Les entêtes
2.14 Les puces, les listes numérotées
2.15 Les sauts de ligne, les espaces insécables, les caractères spéciaux

3- Insertion d’images

3.1 Généralités et utilisation
3.2 Insérer une image
3.3 Les images de fond
3.4 Les images survolées

4- Les hyperliens

4.1 Lien sur du texte
4.2 Lien sur une image
4.3 Lien de messagerie
4.4 Les ancres nommées
4.5 Les attributs

5- Mise en page à l’aide des tableaux

5.1 Création de pages simples en tableaux
5.2 Gestion de page web avec des tableaux

6- Mise en page à l'aide de calques

6.1 La balise DIV
6.2 Tracer la balise DIV

7- Mise en forme à l'aide de CSS

7.1 Création de feuilles de style
7.2 Créer, modifier, supprimer une règle de CSS
7.3 Appliquer une règle de style CSS à une balise

8- Insertion de médias Flash

8.1 Animation Flash
8.2 Boutons Flash
8.3 Texte Flash
8.4 Video Flash

9 - Créer un menu de navigation

9.1 Menu statique
9.2 Menu Spry

10- La balise HEAD

10.1 Les balises Meta
10.2 Les tags utiles pour le référencement

11- Transférer vos données

11.1 Paramètrage dans Dreamweaver
11.2 Transfert de données par FTP via Dreamweaver