Mise en page : cadres, calques ou tableaux

1. Mise en page utilisant des calques

Une fois terminé ce travail de conception, on peut commencer à créer la page en dessinant les divers cadres. Dans Dreamweaver, on les appelle des "calques".

Il y a deux manières de créer ces calques.

On peut se demander pourquoi utiliser la première méthode, en général plus longue. C'est que l'écran de Dreamweaver, même en utilisant une bonne résolution, est vite encombré par toutes les fenêtres que l'on est amené à ouvrir. On peut donc préférer un confort visuel, quitte à augmenter la durée de certaines opérations.

On peut déplacer les calques à la souris, ou donner la position en utilisant la fenêtre "Propriétés" (celle-ci sert vraiment très souvent : il faut la laisser en permanence ouverte). Voici l'allure de cette fenêtre quand un calque est sélectionné :

On reviendra plus tard sur les diverses zones de cette fenêtre.

Une autre façon, simple et rapide, de positionner et dimensionner les cadres, consiste à utiliser la grille, un outil que l'on trouve en général dans tous les logiciels de PAO.

Dreamweaver propose une grille pour faciliter le positionnement et le dimensionnement des calques.

Pour mettre en place cette grille, utiliser la commande Affichage/Grille/Paramètres... Une boîte de dialogue apparaît alors :

On a choisi ici d'afficher la grille sous forme de lignes séparées par 25 pixels (c'est l'écartement minimal), de couleur bleu pâle. Par ailleurs, on a activé l'option "Alignement" : grâce à cela, les calques se positionnent toujours sur la ligne de la grille la plus proche (ceci fonctionne à la fois au positionnement et au dimensionnement).

Il reste possible de déplacer les calques, par exemple pour des alignements fins. Quand un calque est sélectionné, on peut le déplacer pixel par pixel en utilisant les touches fléchées du clavier, intervalle de grille par intervalle de grille en utilisant MAJ + touche fléchée. On peut par ailleurs faire la même chose en utilisant la fenêtre "Propriétés" :

Le nombre 158 indique la position horizontale du coin supérieur gauche du calque, 186 sa position verticale (à partir du haut de l'écran), 650 sa largeur et 550 sa hauteur (toutes ces mesures sont en pixels : 158px, ...).

2. Mise en page utilisant des tableaux

Par exemple pour des raisons de compatibilité avec des navigateurs plus anciens, on peut souhaiter ne pas utiliser de calques pour la mise en page. L'emploi des tableaux permet d'obtenir exactement les mêmes caractéristiques graphiques, grâce à une fonction de conversion très pratique de Dreamweaver.

Il y a deux grands types de raison qui peuvent rendre incompatible un site (ou simplement un fichier) avec les versions 3.0 des navigateurs:

Dans la plupart des cas, les problèmes peuvent être résolus simplement, en utilisant l'outil de conversion fourni avec Dreamweaver.

Pour utiliser cet outil, on active la commande menu Fichier/Convertir... Cette commande permet de modifier le fichier en transformant les calques en tableaux et les styles CSS en styles HTML (ou du moins la plupart d'entre eux).

Lorsque l'on n'a pas utilisé de style CSS, la transformation des calques en tableaux peut aussi se faire avec Modifier/Mode de mise en forme... La nouvelle page est en général une copie fidèle de la page de départ, quoique le code html puisse être sensiblement plus lourd si la disposition des calques au départ oblige à créer un tableau très complexe.

Vous avez pu voir à la page précédente que Dreamweaver peut être remarquablement précis dans la transformation des calques en tableaux. Pour cela, il faut respecter quelques conditions.

Remarque :

Pour tester la compatibilité d'un fichier du site avec une version donnée d'un navigateur, Dreamweaver fournit un outil spécifique.

En activant la commande de menu Fichier/Verifier navigateurs cibles... on choisit une boîte de dialogue qui permet de choisir un navigateur et de lancer un test.

On obtient alors une page de diagnostic. Cette page peut cependant ne pas être très claire pour un débutant...

3. Mise en page utilisant des cadres

La page suivante fournit un exemple, sinon de mise en page à proprement parler, du moins de navigation interne à une page facilitée par l'emploi d'un jeu de cadres : un cadre à gauche pour la table des matières, un à droite pour le contenu proprement dit.

 

Nous décrivons dans la page suivante :

Formatage du texte et des images

comment insérer du texte et des images en mode Wysiwyg grâce à Dreamweaver. Sans prétendre à l'exhaustivité, nous verrons que la plupart des possibilités de formatage offertes par les traitements de texte classiques sont disponibles, avec une simplicité d'emploi comparable.