1.3 Prise en main de l’environnementDreamweaver met à votre disposition, pour vos réalisations, un nombreconsidérable d’outils, de commandes, etc. Il est donc primordial que voussoyez rapidement à l’aise avec ces différents éléments, et que vous sachiezles utiliser et les manipuler. Cette section présente l’ensemble de cesoutils.

La page de démarrageApparue lors de la version précédente, cette page propose un accès rapideaux différentes commandes associées au lancement du logiciel à savoir :ouvrir un fichier existant, créer un nouveau fichier, etc. Il suffit, pour yrecourir, de cliquer sur la commande voulue. Notez qu’elle s’afficheautomatiquement lors de l’ouverture de Dreamweaver et qu’elle nedisparaîtra pas tant que vous n’aurez pas opté pour votre choix.

m Fig. 1.5 : L’environnement de Dreamweaver

Prise en main de l’environnement

Dreamweaver 8 21

Les barresVous allez tout d’abord découvrir les différentes barres. Elles sont aunombre de six sous Windows, et de cinq sous Mac OS :

¶ La barre de titre (uniquement sous Windows) (voir page 22) ;

¶ La barre de menus (voir page 23) ;

¶ La barre d’état (voir page 26) ;

¶ La barre d’outils Standard (voir page 26).

¶ La barre d’outils Document (voir page 26);

¶ La barre d’outils Insertion (voir page 26).

La barre de titreSituée tout en haut de la fenêtre, elle est commune à toutes les applicationsfonctionnant sous Windows.

m Fig. 1.6 : La page de démarrage

Chapitre 1 Premiers pas dans Dreamweaver

22 Dreamweaver 8

Les boutons système permettent de gérer rapidement la fenêtre deDreamweaver :

¶ Un clic sur ce bouton ferme la fenêtre.

¶ Un clic sur ce bouton la réduit à l’état de bouton, dans la barre destâches.

¶ Un clic sur ce bouton l’affiche dans sa taille antérieure.

¶ Un clic sur ce bouton l’agrandit à sa taille maximale.

La barre de menusSous Windows, elle est placée sous la barre de titre. Sous Mac OS, elleapparaît tout en haut de la fenêtre. Elle contient les différents menus deDreamweaver.

Chaque menu contient une liste de commandes.

Pour dérouler un menu :

¶ Cliquez sur son nom.

¶ Sous Windows, appuyez sur la touche [Alt] ou [Opt], puis sur la lettre quiapparaît soulignée dans le menu. Par exemple, la combinaison detouches [Alt]+[A] ou [Opt]+[A] déroule le menu Affichage.

m Fig. 1.7 : Les commandes du menu Affıchage

Prise en main de l’environnement

Dreamweaver 8 23

Fermer un menu

Pour fermer un menu sans sélectionner de com-mande, cliquez hors de celui-ci.

Dans un menu, en regard de certaines commandes, apparaissent descombinaisons de touches (appelées "raccourcis clavier"). Vous pouvezexécuter ces commandes, sans utiliser la souris, en appuyant sur cestouches. Par exemple, la commande Sélectionner tout du menu Editionpeut être exécutée en appuyant sur les touches [Ctrl]+[A] ou [Cmd]+[A].

Une commande qui ouvre une boîte de dialogue est suivie de trois pointsde suspension. À partir de la boîte de dialogue, vous pouvez définir deschoix, des options… Par exemple, la commande Rechercher et rempla-cer ouvre la boîte de dialogue du même nom, à partir de laquelle vouspouvez indiquer le mot à rechercher et le mot de substitution, puis lancerla recherche.

De plus, toutes les commandes en regard desquelles apparaît une tête deflèche proposent un menu en cascade, qui propose une liste de choixsupplémentaires.

m Fig. 1.8 : La boîte de dialogue Rechercher et remplacer

Chapitre 1 Premiers pas dans Dreamweaver

24 Dreamweaver 8

Pour finir, nous allons passer en revue les différents menus proposés àpartir de cette barre, afin de décrire leurs fonctionnalités principales :

¶ Le menu Fichier est conçu pour la gestion des fichiers : ouvrir, fermer,enregistrer… Vous trouverez également des commandes pour importerou exporter un site, définir le navigateur d’aperçu, etc.

¶ Le menu Edition propose des commandes de sélection et de recher-che, de copier-coller, etc. Il permet par ailleurs d’accéder à la boîte dedialogue Préférences, à partir de laquelle vous pouvez personnaliserles différentes options du logiciel.

¶ Le menu Affichage permet de modifier la présentation de la page web,et d’afficher ou de masquer certains éléments de page et de l’environ-nement.

¶ Le menu Insertion est utilisé pour insérer des objets dans une page web.

¶ Le menu Modifier permet de modifier les propriétés d’un objetsélectionné, et de réaliser différentes opérations dans les bibliothèqueset dans les modèles.

¶ Le menu Texte contient les commandes pour mettre en forme le texte.

¶ Le menu Commandes offre des commandes de mise en forme du codeHTML et d’optimisation des images.

¶ Le menu Site permet de gérer les sites : ouvrir, fermer, modifier, etc.

¶ Le menu Fenêtre permet d’afficher et/ou de masquer les différentspanneaux, les outils et l’inspecteur de propriétés.

¶ Le menu Aide permet d’accéder à l’aide de Dreamweaver. Il contientégalement de liens vers le site de Macromedia, à partir duquel voustrouverez la réponse aux éventuels problèmes rencontrés, la paged’enregistrement en ligne et des éléments à télécharger.

La barre d’étatSituée dans la partie inférieure de la fenêtre de document, elle permetd’obtenir des informations telles que les dimensions de la fenêtre et lavitesse de connexion, et de sélectionner rapidement un paragraphe, uneimage, un formulaire, etc. Elle contient également le lanceur qui liste desicônes permettant d’accéder rapidement à certaines fonctions.

Prise en main de l’environnement

Dreamweaver 8 25

La barre d’outils DocumentPlacée juste au-dessus de la fenêtre de document, cette barre d’outilscontient des icônes et un menu déroulant qui permettent d’accéderrapidement aux différents modes d’affichage de la fenêtre de document, degérer les fichiers, de visualiser la page web dans un navigateur, d’afficherou de masquer des outils d’aide au positionnement (règles et grille), etc.

La barre d’outils StandardPlacée juste au-dessous de la barre d’outils Document ou au-dessus de lafenêtre de document elle n’est, par défaut, pas affichée. Cette barred’outils contient des icônes qui permettent d’accéder rapidement auxdifférentes commandes de gestion des pages web : ouvrir, nouveau,enregistrer ainsi que quelques icônes pour agir sur un élément sélec-tionné : copier, coller et couper. Les deux dernières icônes permettent,quant à elles, d’annuler ou de rétablir une action.

La barre d’outils InsertionNouveauté de la version 2004, elle remplace le panneau Insertion desversions précédentes. Placée juste au-dessous de la barre de menus, cettebarre d’outils contient des icônes et un menu déroulant qui permettentd’accéder rapidement aux différents types de fichiers, de créer des lienshypertextes, des liens de messagerie, des ancres nommées, des tableaux,des images, des dates, des commentaires, des modèles et d’activer lesélecteur de balise.

Déplacer une barre d’outilsComme nous venons de vous l’indiquer, les barres d’outils Document etStandard sont placées au-dessus de la fenêtre de document. Si cetemplacement ne vous convient pas, vous pouvez modifier ce paramètre.

1. Cliquez sur le double trait vertical placé à l’extrémité gauche de labarre d’outils que vous souhaitez déplacer.

Chapitre 1 Premiers pas dans Dreamweaver

26 Dreamweaver 8

2. Tout en maintenant le bouton de la souris appuyé, faites-le glisser àl’emplacement voulu. Lorsque vous relâchez la souris, la barred’outils est ancrée.

Repositionner une barre d’outilsPour remettre automatiquement une barre d’outils àson emplacement initial, double-cliquez sur sa barrede titre.

Afficher/masquer une barre d’outilsVous pouvez à volonté afficher ou masquer une barre d’outils.

1. Dans le menu Affichage, sélectionnez Barres d’outils.

2. Dans le menu en cascade, sélectionnez la barre d’outils que voussouhaitez afficher. Notez qu’une barre d’outils affichée a une coche enregard de son nom.

m Fig. 1.9 : Déplacement d’une barre d’outils

Prise en main de l’environnement

Dreamweaver 8 27

La fenêtre de documentLa fenêtre de document correspond à la zone centrale de couleur blanchequi apparaît dès lors que vous avez opté pour un choix dans la page dedémarrage. C’est à partir de celle-ci que vous allez créer et modifier vospages web.

Les groupes de panneauxLes différents groupes de panneaux apparaissent pour la plupart dans lapartie droite de la fenêtre, et sont au nombre de sept. Chaque groupecontient différents panneaux, accessibles à partir d’un onglet. Chaqueonglet donne accès à des commandes qui permettent de gérer le site,d’utiliser les actifs, de modifier le code HTML, d’insérer des balises, etc.Un panneau supplémentaire est placé sous les barres d’outils. Tout au longde cet ouvrage, vous verrez comment utiliser les différents panneaux dansles cas de figures adéquats. Pour l’instant, nous allons effectuer un brefsurvol de leurs fonctionnalités et des façons de les exploiter.

Les panneaux sont affichés en groupes, dont voici un bref descriptif :

¶ Le groupe de panneaux CSS contient le panneau Styles CSS (Casca-ding Style Sheets), qui permet de créer et gérer les feuilles de styles([Maj]+[F11]) et le panneau Calques, qui permet de créer des animationsde pages avec un scénario ([F2]).

¶ Le groupe de panneaux Inspecteur de balises (([Maj]+[F4])contient lepanneau Attributs qui permet de gérer les attributs HTML et lepanneau Comportements qui permet d’associer des comportements àdes éléments de la page.

¶ Le groupe de panneaux Fichiers contient le panneau Fichiers, quipermet d’accéder à la carte du site, d’afficher le site local et le sitedistant ([F8]), le panneau Actifs qui permet de créer, d’appliquer et de

m Fig. 1.10 : Les différents groupes de panneaux

Chapitre 1 Premiers pas dans Dreamweaver

28 Dreamweaver 8

gérer des modèles de pages ([F11]) et le panneau Fragments de code,qui stocke les fragments de code que vous avez créés et permet de lesinsérer à un autre emplacement ([Maj]+[F9]).

¶ Le groupe de panneaux Application contient le panneau Bases dedonnées qui permet de se connecter à des bases de données, de lesinspecter et de les insérer dans vos pages ([Ctrl]+[Maj]+[F10] ou[Cmd]+[Maj]+[F10]), le panneau Liaisons qui permet de définir lessources de contenu dynamique ([Ctrl]+[F10] ou [Cmd]+[F10]), le panneauComportements de serveur qui permet d’ajouter les comportements duserveur dans une page web ([Ctrl]+[F9] ou [Cmd]+[F9]), et enfin lepanneau Composants qui est utile pour insérer, créer et inspecter descodes de composant ([Ctrl]+[F7] ou [Cmd]+[F7]).

¶ Le panneau Propriétés (touche [Ctrl]+[F3] ou [Cmd]+[F3]) contientdifférentes icônes qui permettent de réaliser la mise en forme destextes, des images, des objets multimédias, etc.

¶ Le panneau Référence, qui liste les différents langages, les objetsJavaScrip et les styles CSS ([Maj]+[F1]).

Panneaux supplémentaires

Plusieurs autres panneaux sont proposés parDreamweaver (Historique, Résultats, etc.). Vous endécouvrirez les fonctions tout au long de cetouvrage. Sachez cependant que, pour les afficher,vous devez sélectionner Nom du panneau dans lemenu Fenêtre.

Notez que chaque panneau a son propre menu, qui liste les commandesqui lui sont propres. Pour dérouler ce menu :

¶ Affichez le panneau concerné au premier plan, en cliquant sur sononglet.

¶ Cliquez sur l’icône symbolisée par une liste à puces, et située à droitedans le panneau.

Prise en main de l’environnement

Dreamweaver 8 29

Utilisations des panneauxVoici maintenant comment utiliser les panneaux.

Pour afficher un panneau au premier plan :

¶ Dans le groupe de panneaux, cliquez sur l’onglet de celui que voussouhaitez afficher au premier plan.

¶ Ou, sélectionnez Nom du panneau dans le menu Fenêtre.

Pour afficher les panneaux Réponses, Insertion ou Propriétés, sélection-nez Nom du panneau dans le menu Fenêtre.

Pour fermer un groupe de panneaux, cliquez sur la tête de flèche tournéevers le bas, située à gauche de son nom.

Pour ouvrir un groupe de panneaux, cliquez sur la tête de flèche tournéevers la droite, située à gauche de son nom.

Pour masquer tous les groupes de panneaux, sélectionnez Masquer lespanneaux dans le menu Fenêtre.

Pour afficher tous les groupes de panneaux, sélectionnez Afficher lespanneaux dans le menu Fenêtre.

Toujours masquer les panneaux

Si vous souhaitez que les groupes de panneauxsoient toujours masqués, sélectionnez Préférences

dans le menu Edition. Dans le volet gauche, cliquezsur Général. Ensuite, dans le volet droit, activez lacase à cocher Afficher seulement la fenêtre du site audémarrage. Cliquez sur le bouton OK pour valider.

b Fig. 1.11 :Cliquez sur l’icône de droite

Chapitre 1 Premiers pas dans Dreamweaver

30 Dreamweaver 8