Préparatifs

L'interface de DreamWeaver CS5

1. La Barre des Menus et juste en dessous la Barre de l'Application

2. La fenêtre du document. C'est la page HTML ouverte. Quand on lance DreamWeaver, il n'y a pas de document ouvert; il faut le créer.

3. La Palette Propriétés. Elle s'adapte à la sélection en cours sur la page et permet d'effectuer des réglages sur cette sélection. Ci-dessous, la palette affiche les propriétés de texte.

4. La Palette Fichiers. Essentielle, elle permet de gérer le contenu des sites sur lesquels on travaille. Elle affiche tous les fichiers et dossiers de chaque site et permet de les créer, de les modifier ou de les supprimer.

5. La Palette Styles CSS. Pour créer et modifier les feuilles de style qui vont permettre la mise en forme du contenu des pages.

6. La Palette Insertion. Permet de placer des éléments particuliers sur les pages, par exemple des images. Son contenu reprend à peu près le contenu du Menu Insertion.

 

Toutes les palettes sont accessibles par le Menu Fenêtre. Vous pouvez voir ci-dessous les palettes principales qui sont cochées. Ce sont celles que nous venons de décrire.

 

Personnaliser l'interface

Il est possible de déplacer et réorganiser les palettes à la souris par leur barre supérieure grise ou leurs onglets. Cette organisation s'appelle un Espace de travail. Il existe plusieurs espaces de travail disponibles. Par défaut, celui qui est actif se nomme "Designer". On peut enregistrer son propre espace de travail : Menu Fenêtre > Présentation de l'espace de travail > Nouvel espace de travail ou, au même endroit, choisir un des espaces prédéfinis.

Pour revenir à la disposition par défaut : Menu Fenêtre > Présentation de l'espace de travail > Réinitialiser Designer.

Les espaces de travail sont également accessibles dans la Barre de l'application, juste en dessous du Menu Affichage.

 

Créer et modifier un site

C'est la première étape nécessaire à toute création de site internet. Il faut définir un dossier qui recevra les fichiers du site et indiquer son chemin à Dreamweaver. Ce dossier s'appelle Dossier Racine Local.

1. Créez un dossier dans votre ordinateur. Ce sera le dossier racine local de votre site. Vous pouvez le nommer comme vous voulez (choisissez un nom explicite), mais tâchez de ne plus le déplacer.

2. Allez dans le Menu Site > Nouveau site. La fenêtre qui s'ouvre demande un nom (vous pouvez choisir ce que vous voulez, sans contrainte d'orthographe, comme nom du Site; ce n'est pas forcément le même que celui du dossier racine). Ce nom reste interne à Dreamweaver et permet d'identifier sur quel site vous allez travailler, parmi d'autres.

3. Cliquez sur le répertoire à droite de la zone de saisie "Dossier local du site". Naviguez jusqu'au dossier racine local que vous avez créé à l'étape 1 et choisissez-le. Attention, sous Windows, le dossier racine ne peut être choisi en tant que tel. Il faut aller au dossier le contenant et ajouter son nom .

Le dossier racine local du site

C'est donc le dossier qui contient tous les fichiers du site et seulement les fichiers du site.

Son chemin peut changer si on le déplace ou le renomme. C'est notamment le cas quand on veut travailler sur plusieurs ordinateurs sur le même site. Il faut alors copier l'intégralité du dossier racine local sur une clé puis le copier sur un autre ordinateur (ne travaillez pas sur un support externe, clé ou disque dur).

On peut alors reconstituer ce chemin à partir du Menu Site > Gérer les sites. Sélectionnez votre site dans la liste et cliquez sur Modifier… pour revenir à la Fenêtre de configuration du site.

Contraintes de noms

À l'intérieur du dossier racine local, doivent se trouver tous les fichiers du site et seulement eux : pages html, images, autres médias, scripts, etc.

Les noms donnés à ces éléments doivent respecter des règles strictes : pas d'espace ni de signe spécial (apostrophe, accent, point de toute sorte). Les tirets sont autorisés et même recommandés. Il est également recommandé d'écrire les noms en minuscules.

Les types de médias utilisables

Les pages consultables du site sont des fichiers au format HTML. De suffixe html ou htm.

Les médias utilisables sur le site sont au format GIF, JPEG ou PNG pour les images fixes, au format MOV ou MP3 pour la vidéo ou le son, au format SWF pour les animations flash, etc.

La palette Fichiers

Dès lors que le site est défini, c'est-à-dire le dossier racine local identifié, la Palette Fichiers montre son contenu. La Palette Fichiers permet de gérer ce contenu.

Pour créer une nouvelle page HTML ou un sous-dossier faites un clic droit sur le dossier racine dans la Palette Fichiers, ce qui affiche le Menu local ci-dessous. Choisissez Nouveau Fichier ou Nouveau Dossier.

Il faut alors le renommer. Cliquez sur le nom du fichier (ou du dossier) et modifiez-le. ATTENTION, pour un fichier, ne jamais supprimer le suffixe .html lorsque vous le renommez. Vous en perdriez le contenu au moment de son enregistrement.

Vous pouvez déplacer des fichiers ou dossiers, mettre des fichiers dans des sous-dossiers, simplement en les faisant glisser depuis la Palette Fichiers. Ne jamais faire la même chose directement dans les dossiers sur votre ordinateur, mais bien utiliser la Palette Fichiers pour faire cela.

Pour les effacer, sélectionnez un fichier ou un dosssier et appuyer sur la Touche Efface. Vous pouvez aussi faire un clic droit dessus puis Edition > Supprimer.

La Palette Fichiers comporte en haut à gauche un menu local qui liste les sites définis. Vous pouvez ainsi passer de l'un à l'autre et accéder à la commande Gérer les sites (voir ci-dessous)

Conception du site

Une page HTML n'a pas de dimensions. Elle commence en haut à gauche et n'a comme limite que les dimensions de l'écran. La plupart des sites aujourd'hui ont une dimension écran supérieure à 1024*768 pixels, et une grande majorité au moins égale à 1200*900.

En général, par rapport à une résolution écran donnée (voir Menu ð > Préférences Système > Moniteur sur Mac ou Panneau de config > Affichage sur PC) il faut enlever 20 pixels horizontalement et 200 pixels verticalement pour obtenir la zone maximum utile d'un site.