Vous êtes ici: Accueil / Informatique / Site Web / Dreamweaver 8 / Division (DIV)

Division (Div)

Une division (DIV) est une balise un peu particulière. Elle entoure un contenu. On peut dire que c'est une boite, une page dans une page. A chaque DIV est associée à une identification (Id) La position de DIV ce fait par le paramétrage de l'Id dans CSS.

Présentation

Prenons par exemple une DIV dont l'identification (Id) est contenu (représenté dans le CSS par #contenu{...;}).
Dans le code HTML ceci se présente sous la forme

<DIV Id:"contenu"> .... blablabla ... </DIV>  

Vous pouvez ajouter des DIV en cascade ou l'un après l'autre des DIV.

Insérer une DIV

Votre page est vierge de contenu et sans paramétrage. Elle est donc blanche.

Dans la barre de menu, vous sélectionnez Mise en forme. Le deuxième icône en partant de la gauche vous propose d'insérer une balise DIV.

menucom

Prenons la valeur par défaut (Insérer: Au point d'insertion)

Saisir le nom identifiant de votre ID (ici dans notre exemple ID: Essais ) puis valider sur OK

fendiv

Une fois fait, vous allez dans propriétés et vous pouvez vérifier si le nom identifiant correspond bien à Essais.

propdiv

Et voila, Vous avez créez une DIV avec pour identifiant (Id) Essais

Si vous voulez créez des DIV en cascade il est plus facile d'afficher votre page en mode Code et de placer le curseur à l'intérieur de la balise DIV . Ceci évite des erreurs de placement. En mode création le DIV créée peut-être invisible si son contenu est vide.

Comportement

Quand vous créez une page, il faut absolument sectoriser vos DIV. Nous allons donc structurer la page en différents blocs.

Qui fait quoi et où.

Exemple:

pagemode

soit en code html

 

<DIV id:"entete">...</DIV>
<DIV id:"conteneur">...
<DIV id:"navigateur">...</DIV>...
<DIV id:"contenu ">...</DIV>...
</DIV> <DIV id:"pied">...</DIV>

 

En effet, quand vous paramétrez ensuite les identifiants (Id) la position dépend de son environnement. Le DIV se trouvant dans #contenu ne peut pas sortir de cette boite. Sauf si vous êtes en mode calque donc en position absolue (les calques).