Création d'une division aP dans Adobe CS5 Dreamweaver - dummies

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver utilise des conteneurs virtuels positionnés CSS, ou des boîtes, créés par le tag DIV pour positionner librement le contenu sur une page. La balise DIV est une balise de base utilisée pour créer des zones de contenu sur votre page. Chaque balise DIV peut être associée à un style d'identifiant unique pour contrôler sa position, son apparence et sa taille.

Le processus de placement du contenu nécessite souvent deux étapes: la création du tag DIV puis la création du style correspondant. L'outil AP Div vous permet de dessiner librement des boîtes sur la page et de placer du contenu à l'intérieur.

AP Div est l'abréviation de DIV positionné en absolu; un élément avec une position absolue est fixé à un emplacement spécifique sur la page. Lorsque vous dessinez une division AP, sa position est généralement définie à l'aide des propriétés CSS supérieure et gauche, avec le coin supérieur gauche de la page comme point de référence.

CSS traite chaque élément d'une page comme une boîte contenant du contenu; appelé modèle CSS Box. Bien que CSS puisse considérer une boîte comme contenant la plupart des éléments d'une page (comme une table ou une liste), les balises DIV sont généralement utilisées pour créer des boîtes virtuelles que vous pouvez utiliser pour positionner du texte, des images et même autres cases

Chaque boîte peut avoir sa propre largeur, hauteur, position (via les propriétés haut et gauche), la bordure, les marges et le remplissage; chacun est défini en utilisant des règles CSS.

1. Dans le panneau Insertion, sélectionnez la catégorie Mise en page.

2. Sélectionnez l'outil Draw AP Div.

   Le curseur apparaît comme une croix lorsque vous le déplacez sur la page.

3. Cliquez n'importe où sur la page et faites glisser pour dessiner une nouvelle division AP; relâchez le bouton de la souris.

   

   Cliquez et faites glisser la page avec l'outil Draw AP Div pour créer une boîte.

4. Déplacez le pointeur de la souris sur le bord de la boîte jusqu'à ce qu'il se transforme en main; cliquez une fois et les poignées apparaissent de tous les côtés.

5. Cliquez et faites glisser l'une de ces poignées pour redimensionner la boîte verticalement ou horizontalement.

6. Pour déplacer la boîte, cliquez dessus et faites-la glisser sur l'onglet situé sur son bord supérieur gauche et placez la boîte à l'endroit souhaité sur la page.

   Jetez un coup d'œil à l'inspecteur des propriétés, et vous verrez le nom ainsi que de nombreuses propriétés DIV listées.

7. Si le panneau Styles CSS n'est pas ouvert, choisissez Fenêtre → Styles CSS pour l'ouvrir; sous le panneau Tous, cliquez à gauche de la feuille de style () pour le développer.

   Vous voyez un nouveau style d'ID # apDiv1 attaché à la nouvelle division AP que vous avez créée. Pour chaque nouvelle DIV créée, Dreamweaver assigne apDiv avec un nombre correspondant dans l'ordre de création.

8. Cliquez dans la nouvelle zone pour taper, coller ou insérer un nouveau contenu.

Lorsque vous dessinez une division AP sur la page, Dreamweaver insère une balise pour créer la zone et crée un sélecteur d'ID qui stocke la position, la largeur, la hauteur et d'autres propriétés DIV. Après avoir créé une division AP, vous pouvez taper, coller ou insérer du contenu directement à l'intérieur. Vous pouvez également affecter une règle de classe à n'importe quelle DIV à partir de l'inspecteur des propriétés.

Chaque division AP que vous dessinez est automatiquement répertoriée dans le panneau Éléments AP (choisissez Fenêtre → Éléments AP pour les afficher.) Le panneau Éléments AP peut vous aider à sélectionner, masquer et afficher les divisions AP sur la page. le panneau Éléments AP pour sélectionner, masquer et réorganiser les divisions AP dans votre page.