Dreamweaver est un éditeur WYSIWYG (what you see is what you get, ce que vous voyez est ce que vous obtenez) destiné à la conception, au codage et au développement de sites, de pages et d’applications Web. Quel que soit l’environnement de travail utilisé, Dreamweaver propose des outils qui vous aideront à créer des applications Web. Ce logiciel est édité par Macromedia.
Les fonctions d’édition visuelle de Dreamweaver vous permettent de créer rapidement des pages sans rédiger une seule ligne de code. Si vous préférez faire appel au codage manuel, Dreamweaver intègre également de nombreux outils et fonctions de codage. Avec Dreamweaver, vous pouvez créer des applications Web dynamiques reposant sur des bases de données à l’aide de langages serveur tels que ASP, ColdFusion, JSP et PHP.
Connaissances requises
Pour utiliser ce logiciel, vous devez connaître les bases du langage HTML ainsi que les contraintes liées à la création de documents sur Internet.
Fenêtre principale
Barres d’outils
Barres Insertion
contient des boutons permettant d’insérer divers types d’« objets », tels que des images, tableaux et calques dans un document. Chaque objet est une portion de code HTML vous permettant de définir des attributs lors de son insertion. Par exemple, vous pouvez insérer une image en cliquant sur l’icône Image dans la barre Insertion. Si vous le préférez, vous pouvez insérer les objets à partir du menu Insertion.
La barre d’outils du document
contient des boutons et des menus déroulants permettant d’accéder aux différents modes d’affichage de la fenêtre du document (tels que le mode Création ou le mode Code), de définir les différentes options d’affichage et d’effectuer certaines opérations courantes, telles que la prévisualisation dans un navigateur.
Inspecteur des propriétés
permet de visualiser et de modifier diverses propriétés de l’objet ou du texte sélectionné. Chaque objet contient des propriétés différentes. Par défaut, l’inspecteur de propriétés n’est pas développé dans la présentation de l’espace de travail Style Codeur.
Le sélecteur de balises
au bas de la fenêtre de document, affiche la hiérarchie des balises entourant la sélection courante en mode Création. Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec son contenu. Le sélecteur de balises n’est pas visible en mode Code ; il n’est donc pas visible par défaut dans l’espace de travail Style Codeur.
Les groupes de panneaux
sont des ensembles de panneaux associés regroupés sous un même titre. Pour développer un groupe de panneaux, cliquez sur la flèche d’agrandissement située à gauche du nom du groupe ; pour détacher un groupe de panneaux, faites glisser la poignée d’ancrage sur le côté gauche de la barre de titre du groupe.
Dreamweaver : Les palettes
Le panneau COMMUN contient les objets les plus couramment utilisés : images, tableaux, calques...
Certains paramètres des préférences générales affectent la palette des objets. Lors de l’insertion d’objets tels que des images, des tableaux, des scripts, et des éléments HEAD, une boîte de dialogue vous demande des informations supplémentaires. Vous pouvez supprimer l’affichage de cette boîte de dialogue en désactivant l’option Afficher la boîte de dialogue lors de l’insertion d’objets. Si cette option est désactivée lorsque vous insérez un objet, celui-ci aura des valeurs par défaut. Utilisez l’inspecteur de propriétés pour modifier les propriétés de l’objet après l’avoir inséré.
L’option des préférences de la palette d’objets vous permet d’afficher le contenu de la palette Objets sous forme de texte, d’icônes ou d’une combinaison de texte et d’icônes.
Hyperlien
Insère une balise de type <a> </a> qui correspond à un lien hypertexte. Vous pouvez créer des liens vers d’autres documents et fichiers et des liens vers des emplacements spécifiques dans un document unique en utilisant la balise <a href=...>.
Lien de messagerie
Insère un lien de type
mailto pour envoyer un message e-mail à l’adresse indiquée.
Ancre nommée
Place une ancre nommée à l’endroit que vous souhaitez. Une boîte de dialogue permet d’indiquer le nom de l’ancre. Un lien hypertexte de type #[
nom de l’ancre] vous emmène directement à l’endroit où l’ancre est placée.
Insérer un tableau
Place un tableau au point d’insertion, selon les caractéristiques que vous souhaitez :
Nombre de lignes, colonnes, largeur, bordure, marges intérieures des cellules, espacement entre les cellules.
Dessiner un calque
Crée un calque. Cliquez sur le bouton Calque, puis amenez le pointeur dans la fenêtre du document, et tracez à la souris le rectangle du calque à l’emplacement et au format désirés. Par défaut, Dreamweaver crée un calque défini par la balise DIV. Utilisez l’inspecteur de propriétés pour sélectionner une autre balise, ou modifiez la balise par défaut dans les préférences des calques.
Image
place une image au point d’insertion. Une boîte de dialogue vous permet d’indiquer un fichier image.
Espace réservé pour l’image
insère une image au niveau du point d’insertion. Une boîte de dialogue permet d’indiquer le nom et les dimensions de l’espace réservé.
Exemple :
HTMLFireworks
Cette fonction vous permet d’insérer dans un document du code HTML généré par Fireworks, intégrant des images, des découpes et du code JavaScript. Vous pouvez ainsi facilement créer des éléments de conception dans Fireworks et les insérer dans un document Dreamweaver existant.
Flash
Cette fonction vous permet d’insérer des éléments Flash dans votre document. Lorsque vous insérez une animation Flash, Dreamweaver utilise les deux balises object (définie par Internet Explorer pour les contrôles ActiveX) et embed (définie par Netscape Navigator) afin d’obtenir des résultats optimaux dans tous les navigateurs. Lorsque vous modifiez l’animation dans l’inspecteur de propriétés, Dreamweaver fait correspondre vos entrées aux paramètres appropriés pour les balises object et embed.
Image survolée
Une image survolée est une image qui, lorsqu’elle est visualisée dans un navigateur, change lorsque le pointeur vient se placer au-dessus d’elle. Une image survolée est en fait composée de deux images : l’image principale (affichée au chargement de la page) et l’image secondaire (qui apparaît lorsque le pointeur est placé au-dessus de l’image principale). Les deux images utilisées doivent avoir les mêmes dimensions ; si ce n’est pas le cas, Dreamweaver redimensionne automatiquement la seconde image en fonction de la taille de la première.
Barre de navigation
Une barre de navigation est composée d’une image ou d’une série d’images qui changent en fonction des actions de l’utilisateur. Les barres de navigation constituent souvent une méthode simple pour se déplacer entre des pages et des fichiers sur un site.
Barre horizontale
Les barres horizontales sont utiles pour organiser les informations. Sur une page, le texte et les objets peuvent être visuellement séparés par une ou plusieurs barres.
Date
Dreamweaver comporte un objet Date pratique qui insère la date actuelle dans le format de votre choix (avec ou sans heure), ainsi qu’une option pour mettre à jour cette date lorsque vous enregistrez le fichier.
Données tabulées
Insère un tableau au niveau du point d’insertion, contenant des données de tableau provenant d’un fichier texte délimité (par exemple, d’un fichier exporté depuis Microsoft Excel ou d’une base de données).
Commentaire
insère un commentaire dans le code HTML au niveau du point d’insertion. Si vous travaillez en mode Création, une boîte de dialogue s’affiche et vous invite à entrer un texte de commentaire.
Sélecteur de balise
Permet de choisir la balise à insérer à partir d’une arborescence de balises classées par catégories.
Dreamweaver : Palette Mise en forme
Le panneau MISE EN FORME vous offre différents moyens de mettre vos pages Web en forme.
En mode de Mise en forme, vous ne pouvez pas utiliser les outils Insérer un tableau et Dessiner un calque disponibles en mode Standard. Pour utiliser ces outils, vous devez d’abord basculer en mode Standard.
Insérer un tableau
Place un tableau au point d’insertion, selon les caractéristiques que vous souhaitez : Nombre de lignes, colonnes, largeur, bordure, marges intérieures des cellules, espacement entre les cellules.
Dessiner un calque
Crée un calque. Cliquez sur le bouton Calque, puis amenez le pointeur dans la fenêtre du document, et tracez à la souris le rectangle du calque à l’emplacement et au format désirés. Par défaut, Dreamweaver crée un calque défini par la balise DIV. Utilisez l’inspecteur de propriétés pour sélectionner une autre balise, ou modifiez la balise par défaut dans les préférences des calques.
Mode Standard
Une méthode courante pour créer une mise en page consiste à utiliser des tableaux HTML pour positionner les éléments. Cependant, il peut être difficile d’utiliser les tableaux pour les mises en page, car ils ont été créés à l’origine pour afficher des données tabulaires et non pour mettre en forme des pages Web.
Mode Mise en forme
Pour simplifier l’utilisation de tableaux pour la mise en forme, Dreamweaver met à votre disposition un mode de Mise en forme. En mode de Mise en forme, vous pouvez créer votre page en utilisant des tableaux comme structure sous-jacente, tout en évitant certains problèmes qui surgissent souvent pendant la création de pages fondée sur des tableaux à l’aide de méthodes traditionnelles. Par exemple, en mode de Mise en forme, vous pouvez facilement dessiner des cellules de Mise en forme, puis les déplacer à l’endroit souhaité. Vous pouvez également créer des mises en page à largeur fixe ou qui s’adaptent automatiquement à la largeur de la fenêtre du navigateur.
Vous avez aussi la possibilité d’agencer vos pages en utilisant les tableaux de manière traditionnelle ou des calques que vous convertissez en tableaux. Le mode de Mise en forme constitue cependant la méthode la plus facile pour organiser votre page.
Dessiner le tableau mise en forme
Vous permet de tracer des tableaux entiers en mode création dans la fenêtre de document.
Dessiner la cellule mise en forme
Vous permet de tracer des cellules de tableau individuelles en mode Création dans la fenêtre de document.
Dreamweaver : Palette Texte
Le panneau TEXTE insère des balises de mise en forme de texte et de paragraphe.
bien que certains boutons de l’onglet Texte ressemblent à des boutons de l’inspecteur de propriétés, ils ont des fonctions différentes. Les boutons de l’onglet Texte servent à insérer du code, mais n’indiquent pas l’état de la sélection courante ; en effet, si la sélection est un texte en gras, le bouton Gras s’affiche en surbrillance dans l’inspecteur de propriétés, mais pas dans l’onglet Texte.
Editeur de balises de police
Affiche l’éditeur pour la balise de la police, et permet de définir des attributs avant l’insertion de la balise.
Gras, Italique, Forte accentuation et Accentuer
Entourent la sélection de balises de mise en forme de texte HTML correspondantes.
Paragraphe, Citation de paragraphe et Texte pré-formaté
Entourent la sélection de balises de bloc HTML correspondantes.
En-tête 1, En-tête 2 et En-tête 3
Entourent la sélection de balises d’en-tête HTML correspondantes.
Liste simple, Liste numérotée et Elément de la liste
Entourent la sélection de balises de liste HTML correspondantes.
Liste des définitions, Terme de définition et Description de définition
Entourent la sélection de balises de liste de définitions HTML correspondantes.
Abréviation et Acronyme
Insèrent des balises permettant de spécifier le texte entier pour les abréviations et Acronymes, afin de faciliter la tâche des moteurs de recherche, lecteurs d’écran, etc...
Dreamweaver : Palette Tableaux
Le panneau TABLEAUX insère des balises associées aux tableaux.
Insérer un tableau
Place un tableau au point d’insertion, selon les caractéristiques que vous souhaitez : Nombre de lignes, colonnes, largeur, bordure, marges intérieures des cellules, espacement entre les cellules.
Balise Table
insèrent une paire de balises associées aux tableaux (table, tr, th, td, ou caption) au niveau du point d’insertion.
Ligne du tableau
insèrent une paire de balises associées aux tableaux (table, tr, th, td, ou caption) au niveau du point d’insertion.
En-tête du tableau
insèrent une paire de balises associées aux tableaux (table, tr, th, td, ou caption) au niveau du point d’insertion.
Données du tableau
insèrent une paire de balises associées aux tableaux (table, tr, th, td, ou caption) au niveau du point d’insertion.
Légende du tableau
insèrent une paire de balises associées aux tableaux (table, tr, th, td, ou caption) au niveau du point d’insertion.
Dreamweaver : Palette Cadres (Frames) Le panneau Cadres de la palette des objets contient des boutons qui permettent de créer des jeux de cadres suivant les présentations les plus courantes.
Les cadres permettent de diviser une fenêtre du navigateur en plusieurs zones, chacune d’entre elles pouvant afficher un document HTML distinct. En règle générale, un premier cadre affiche un document avec des commandes de navigation tandis qu’un autre cadre affiche un document avec le contenu principal.
Par exemple, une mise en forme avec des cadres peut contenir trois cadres : un cadre étroit qui contient la barre de navigation dans la partie latérale, un cadre en haut du document contenant le logo et le titre d’un site Web et un grand cadre avec le contenu principal qui occupe le reste de la page. Chacun de ces cadres affiche un document HTML distinct.
Cadre de gauche
Crée un jeu de cadres et ajoute un cadre étroit vide à droite du cadre actuel.
Cadre de droite
Crée un jeu de cadres et ajoute un cadre étroit vide à droite du cadre actuel.
Cadre supérieur
Crée un jeu de cadres et ajoute un cadre étroit vide au-dessus du cadre actuel.
Cadre inférieur
Crée un jeu de cadres et ajoute un cadre étroit vide en dessous du cadre actuel.
Cadre inférieur et imbriqué à gauche
insèrent chacun un jeu de cadres et ajoutent un étroit cadre vide à gauche ou à droite du cadre en cours, puis insèrent un autre cadre vide sous les deux cadres.
Cadre inférieur et imbriqué à droite
insèrent chacun un jeu de cadres et ajoutent un étroit cadre vide à gauche ou à droite du cadre en cours, puis insèrent un autre cadre vide sous les deux cadres.
Cadre à gauche et imbriqué en bas
insèrent chacun un jeu de cadres et ajoutent un étroit cadre vide sous le cadre en cours, puis insèrent un autre cadre vide à gauche ou à droite des deux cadres.
Cadre à droite et imbriqué en bas
insèrent chacun un jeu de cadres et ajoutent un étroit cadre vide sous le cadre en cours, puis insèrent un autre cadre vide à gauche ou à droite des deux cadres.
Cadre à gauche et imbriqué en haut
insèrent chacun un jeu de cadres et ajoutent un étroit cadre vide au-dessus du cadre en cours, puis insèrent un autre cadre vide à gauche ou à droite des deux cadres.
Cadre à droite et imbriqué en haut
insèrent chacun un jeu de cadres et ajoutent un étroit cadre vide au-dessus du cadre en cours, puis insèrent un autre cadre vide à gauche ou à droite des deux cadres.
Cadre supérieur et inférieur
insère un jeu de cadres, ajoute un cadre sous le cadre en cours et ajoute un autre cadre au-dessous des deux cadres.
Cadre supérieur et imbriqué à gauche
insèrent chacun un jeu de cadres et ajoutent un étroit cadre vide à gauche ou à droite du cadre en cours, puis insèrent un autre cadre vide sous les deux cadres.
Cadre supérieur et imbriqué à droite
insèrent chacun un jeu de cadres et ajoutent un étroit cadre vide à gauche ou à droite du cadre en cours, puis insèrent un autre cadre vide sous les deux cadres.
Dreamweaver : Palette Formulaires
Le panneau Formulaires contient des boutons permettant de créer des formulaires et leurs éléments.
Amenez le point d’insertion à l’intérieur d’un formulaire avant d’insérer un élément de formulaire ; les éléments de formulaires placés en-dehors des formulaires n’apparaîtront pas dans les navigateurs. Si vous tentez d’insérer un élément de formulaire hors d’un formulaire, une boîte de dialogue vous proposera d’ajouter une balise de formulaire autour de cet élément ; cliquez sur Oui pour créer un nouveau formulaire contenant cet élément, ou sur Non pour insérer l’élément sans formulaire.
Formulaire
Place un formulaire au point d’insertion. Les formulaires ne sont que la matérialisation du conteneur des éléments de formulaire ; le contour du formulaire n’est visible dans la fenêtre du document que si l’option Affichage > Eléments invisibles est activée.
Champ de texte
Place un champ texte au point d’insertion. Définissez le nom, la taille et la valeur initiale de ce champ dans l’inspecteur de propriétés.
Champ masqué
Place un champ caché au point d’insertion. Définissez le nom et la valeur initiale de ce champ dans l’inspecteur de propriétés.
Zone de texte
insère un champ pouvant contenir plusieurs lignes de texte au niveau du point d’insertion.
Case à cocher
insèrent les contrôles correspondants au niveau du point d’insertion. Définissez le nom, la valeur du bouton radio lorsqu’il est activé et l’état initial, à l’aide de l’inspecteur de propriétés.
Bouton radio
insèrent les contrôles correspondants au niveau du point d’insertion. Définissez le nom, la valeur du bouton radio lorsqu’il est activé et l’état initial, à l’aide de l’inspecteur de propriétés.
Groupe de Boutons radio
insère un groupe de boutons radio au niveau du point d’insertion.
Liste/Menu
insère une liste ou un menu déroulant au niveau du point d’insertion. Définissez le nom, le type et les valeurs de la liste dans l’inspecteur de propriétés.
Menu de reroutage
insère un menu déroulant contenant des URL au niveau du point d’insertion. La sélection d’une valeur dans ce menu renvoie l’utilisateur à l’URL correspondante. Définissez la liste des valeurs dans la boîte de dialogue qui s’affiche.
Champ image
insère un champ d’image au niveau du point d’insertion. Définissez le nom, la taille, le texte de remplacement et le fichier source dans l’inspecteur de propriétés.
Champ de fichier
insère un champ de chargement de fichier au niveau du point d’insertion. Définissez le nom, la taille et la valeur initiale dans l’inspecteur de propriétés.
Bouton
insère un bouton pourvu d’un nom (name) et d’une valeur (value) d’envoi (« submit ») par défaut au niveau du point d’insertion. Placez le point d’insertion à l’intérieur des limites d’un formulaire avant d’insérer un bouton ; les boutons en dehors des formulaires n’apparaissent pas dans tous les navigateurs. Utilisez l’inspecteur de propriétés pour définir le nom, l’étiquette et l’action.
Etiquette
fournit un moyen d’associer de manière structurée l’étiquette de texte d’un champ avec le champ.
Jeu de champs
est une balise de conteneur pour un groupe logique d’éléments de formulaire.
Dreamweaver : Palette Modèles
Le panneau Modèles de la barre Insertion permet d’enregistrer un document comme fichier modèle, et insère plusieurs types de régions dans un fichier modèle.
Un modèle Dreamweaver est un type de document spécifique qu’il est possible d’utiliser pour concevoir une mise en forme « verrouillée ». Le créateur du modèle élabore la mise en forme et définit les régions du modèle qui pourront être modifiées dans les documents créés à partir de ce modèle. Il contrôle ainsi les éléments de la page que les différents utilisateurs du modèle pourront modifier.
Créer un modèle
Permet d’enregistrer un modèle à partir d’un document réalisé.
Créer un modèle imbriqué
est un modèle dont la conception et les régions modifiables sont basées sur un autre modèle. Pour créer un modèle imbriqué, vous devez au préalable enregistrer le modèle de base ou le modèle original, puis créer un document à partir de ce modèle et enregistrer ce document comme modèle. Vous pouvez ensuite définir dans le nouveau modèle des régions modifiables supplémentaires au niveau des sections définies initialement comme modifiables dans le modèle de base.
Région modifiable
est une région non verrouillée dans un document basé sur un modèle. Ce type de section peut être modifié. Le créateur du modèle peut définir toute région du modèle comme modifiable. Pour être fonctionnel, un modèle doit contenir au moins une région modifiable. S’il n’en contient pas, les pages créées à partir du modèle ne pourront pas être modifiées.
Région facultative
est une section d’un modèle que le créateur définit comme facultative, c’est-à-dire une section contenant des éléments facultatifs tels que du texte ou des images, qui apparaîtront ou non dans les documents créés à partir du modèle. C’est généralement le responsable du contenu qui décide si l’élément en question est conservé ou non sur la page finale.
Région répétée
est une section du document qu’il est possible de reproduire. Par exemple, une ligne de tableau peut être définie comme ligne répétée. Lorsque vous définissez une ligne de tableau comme ligne répétée, vous permettez à l’utilisateur du modèle de créer une liste extensible, tout en l’empêchant de modifier la conception élaborée par le créateur du modèle. Les options de gestion des régions répétées permettent de donner aux utilisateurs d’un modèle la possibilité de reproduire une région ou de supprimer les exemplaires d’une région dans les documents créés à partir de ce modèle. Deux types de régions répétées peuvent être insérées dans un modèle : les régions répétées et les tableaux répétés.
Région facultative modifiable
permet à l’utilisateur du modèle de modifier le contenu de la région facultative. Par exemple, si la région facultative comprend une image ou du texte, l’utilisateur du modèle peut décider si le contenu doit s’afficher et peut y apporter des modifications si nécessaire. Les régions modifiables sont contrôlées par une instruction conditionnelle. Pour créer des paramètres de modèle et des expressions, utilisez la boîte de dialogue Région facultative ou tapez les paramètres et les instructions conditionnelles en mode Code.
Tableau répété
Utilisez cette fonction lorsque vous souhaitez définir une région répétée composée de régions modifiables sous forme de tableau. Vous pouvez définir des attributs de tableau et indiquer les cellules du tableau pouvant être modifiées.
Dreamweaver : Palette Caractères
Le panneau Caractères de la palette d’objets contient des caractères spéciaux.
Certains caractères spéciaux sont représentés en HTML par un nom ou par un numéro, qui est alors appelé entité. Le langage HTML prévoit des noms d’entités pour de nombreux caractères spéciaux, par exemple le symbole © (©) et le symbole ® (trademark, ®). Chaque entité est représentée à la fois par un nom HTML (par exemple — pour le tiret cadratin) et son équivalent numérique (—).
Saut de ligne
Place un saut de ligne au point d’insertion. Vous pouvez aussi appuyer sur la combinaison de touches Maj+Entrée (Windows) ou Maj+Retour (Macintosh) pour insérer un saut de ligne.
Espace insécable
insécable Place un espace insécable au point d’insertion. (Un espace insécable permet d’interdire un retour à la ligne entre deux mots).
Autres caractères
Insère le caractère sélectionné dans votre document.
Dreamweaver : Palette Medias
Le panneau Média contient des boutons permettant d’insérer des objets configurables spéciaux, tels que des plug-ins et des applets.
Flash
insère une animation Flash au niveau du point d’insertion, à l’aide des balises object et embed. Une boîte de dialogue s’affiche, que vous parcourez pour rechercher un fichier SWF. Les attributs codebase, class id et pluginspage ont été prédéfinis avec les valeurs appropriées à Macromedia Flash Player ; spécifiez d’autres attributs pour l’animation à l’aide de l’inspecteur de propriétés.
Bouton flash et Texte flash
insèrent des objets Flash au niveau du point d’insertion.
Shockwave
insère une animation Macromedia Shockwave au niveau du point d’insertion, à l’aide des balises object et embed. Les attributs codebase, class id et pluginspage ont été prédéfinis avec les valeurs appropriées à Shockwave. Une boîte de dialogue s’affiche, dans laquelle vous spécifiez un fichier source DCR pour l’animation.
Applet
insère une applet Java au niveau du point d’insertion (l’applet Java ne peut être exécutée que si vous affichez le document dans un navigateur). Une boîte de dialogue s’affiche, dans laquelle vous pouvez préciser le fichier contenant le code de l’applet ou cliquer sur Annuler pour laisser la source vide.
Paramètre
insère une balise pour transmettre des paramètres à une applet ou à un objet.
ActiveX
insère un contrôle ActiveX au niveau du point d’insertion. Spécifiez un fichier source et les autres propriétés du contrôle ActiveX dans l’inspecteur de propriétés.
Plug-in
utilise la balise embed pour insérer un fichier (au niveau du point d’insertion) nécessitant un plug-in Netscape Navigator pour la lecture. Une boîte de dialogue s’affiche, dans laquelle vous indiquez le fichier source.
Dreamweaver : Palette En-tête
Le panneau En-tête de la barre Insertion contient des objets pour l’ajout d’éléments dans la section d’en-tête (head) de vos documents.
Meta
insère une balise meta dans la section d’en-tête (head) du document. Une boîte de dialogue s’affiche, dans laquelle vous saisissez des données relatives aux attributs meta.
Mots-clés
insère une balise meta name="keywords" dans la section d’en-tête (head) du document. Une boîte de dialogue s’affiche, dans laquelle vous saisissez des mots-clés pour le document.
Description
insère une balise meta Description dans la section d’en-tête (head) du document. Une boîte de dialogue s’affiche pour vous permettre de saisir un texte décrivant le document.
Actualiser
insère une balise meta Actualiser dans la section d’en-tête (head) du document. Une boîte de dialogue s’affiche, dans laquelle vous saisissez le délai (en secondes) avant l’actualisation et indiquez s’il faut recharger la page en cours ou passer à une autre.
Insérer une base
insère une balise base dans la section d’en-tête (head) du document. Une boîte de dialogue s’affiche, dans laquelle vous saisissez une URL de base pour les liens du document.
Lien
insère une balise link dans la section d’en-tête (head) du document. Une boîte de dialogue s’affiche, dans laquelle vous saisissez des données relatives au lien. Notez qu’il ne s’agit pas d’un lien hypertexte ; la plupart du temps, il sert à spécifier une feuille de style externe.
Dreamweaver : Palette Script
Le panneau Script de la barre Insertion insère des éléments de script dans une page.
Script
insère un script au niveau du point d’insertion. Une boîte de dialogue s’affiche, dans laquelle vous choisissez le langage et saisissez le texte du script.
Noscript
insère une section noscript, permettant l’affichage du code HTML dans les navigateurs où l’option de script est désactivée.
Inclusion côté serveur
insère une inclusion côté serveur au niveau du point d’insertion. Une boîte de dialogue s’affiche, dans laquelle vous choisissez un fichier source à inclure.
Dreamweaver : Palette PHP
Le panneau PHP
Variables de formulaire
Afin de pouvoir afficher des données dans une page, les sites Web dynamiques doivent être associés à une source de contenu d’où ils peuvent extraire les données. Dans Dreamweaver, les sources de données correspondent à des bases de données, des variables de demande, des variables de serveur, des variables de formulaire ou des procédures stockées.
Variables d’URL
Lorsque vous utilisez des variables d’URL, la chaîne de la requête contient une ou plusieurs paires nom/valeur associées aux champs du formulaire. Ces paires nom/valeur sont annexées à l’URL.
Variables de session
stockent les informations pendant toute la durée de la session d’un utilisateur. Cette session commence lorsque l’utilisateur ouvre une page au sein de l’application. Elle se finit lorsque l’utilisateur n’ouvre plus de page dans l’application après un laps de temps donné ou lorsqu’il met explicitement fin à la session. Tant qu’elle existe, la session est spécifique à un utilisateur donné ; chaque utilisateur dispose donc d’une session qui lui est propre.
Variables cookie
Les variables cookie sont créées au niveau du code et permettent d’accéder aux informations contenues dans les cookies transmis au serveur par un navigateur.
Include
La fonction include inclus et évalue le fichier spécifié en argument.
< ?php include "fichier.php" ; ?>
Require
La commande require se remplace elle-même par le contenu du fichier spécifié.
Bloc de code
Insère un bloc de code php.
echo
Affiche une chaîne de caractères.
Commentaire
Insère un commentaire pour descrire le code php.
if / else
Permet l’exécution conditionnelle d’une partie de code. ELSE fonctionne après un IF et exécute les instructions correspondantes au cas oú l’expression du IF est FALSE.
Dreamweaver : Palette Applications
Le panneau Application de la barre Insertion insère des comportements de serveur dans une page.
Jeu d’enregistrements
Le jeu d’enregistrements proprement dit est un ensemble de données extrait d’une base de données spécifiée. Il peut se composer de l’intégralité d’une table de base de données ou bien d’un sous-ensemble de lignes et de colonnes d’une table. Les lignes et les colonnes sont récupérées au moyen d’une requête de base de données définie au niveau du jeu d’enregistrements. Les requêtes de base de données sont écrites en SQL (Structured Query Language), langage simple permettant de récupérer des informations d’une base de données, mais aussi d’ajouter des données à une base et d’en supprimer. Le générateur SQL fourni avec Dreamweaver permet de créer des requêtes simples sans maîtriser le langage SQL. Toutefois, si vous souhaitez créer des requêtes SQL complexes, vous devrez vous familiariser avec SQL et rédiger manuellement les instructions SQL que vous souhaitez utiliser dans Dreamweaver.
Région répétée
Les régions répétées sont des régions données d’un modèle qu’il est possible de reproduire en plusieurs exemplaires dans les documents basés sur ce modèle. Vous pouvez les utiliser pour contrôler la mise en forme des régions qui seront reproduites sur une page, et pour autoriser la reproduction de lignes, par exemple dans le cas d’une liste d’éléments.
Tableau dynamique
Texte dynamique
Vous pouvez substituer un texte dynamique à un texte existant ou le placer à un point d’insertion donné de la page.
Le texte dynamique adopte la mise en forme du texte initial ou du point d’insertion. Le contenu dynamique conserve ainsi le style de feuille de style en cascade (CSS, Cascading Style Sheet) du texte sélectionné qu’il remplace. Vous pouvez également ajouter ou modifier le format du texte d’un contenu dynamique à l’aide des outils de mise en forme de texte de Dreamweaver.
Barre de navigation du Jeu d’enregistrements
Vous pouvez créer en une seule opération une barre de navigation de jeu d’enregistrements à l’aide du comportement de serveur correspondant.
Etats de navigation du Jeu d’enregistrements
Cet objet crée une entrée de texte sur la page pour afficher l’état de l’enregistrement actif.
Formulaire d’insertion d’enregistrements
Vous pouvez insérer les éléments de base d’une page d’insertion en une seule opération à l’aide de l’objet dynamique Formulaire d’insertion d’enregistrement. Cet objet insère dans la page un formulaire HTML et un comportement de serveur Insérer l’enregistrement.
Vous avez également la possibilité d’insérer ces éléments séparément à l’aide des outils de formulaire et du panneau Comportements de serveur.
Formulaire de mise à jour des enregistrements
Vous pouvez insérer les deux derniers éléments d’une page de mise à jour en une seule opération à l’aide de l’objet dynamique Formulaire de mise à jour des enregistrements. Cet objet insère dans la page un formulaire HTML et un comportement de serveur Mettre à jour l’enregistrement.
Pour que vous puissiez utiliser l’objet dynamique, il faut que votre application Web soit capable d’identifier l’enregistrement à mettre à jour et que votre page de mise à jour soit en mesure de le récupérer.
Dreamweaver : Les calques
Dreamweaver vous permet de créer facilement des calques sur votre page et de les positionner avec précision.
Dessiner un calque
• Pour dessiner un calque, cliquez sur le bouton Dessiner un calque de la barre Insertion, puis faites glisser la souris dans le mode Création de la fenêtre de document.
• Pour insérer le code d’un calque à un endroit particulier du document, placez le curseur dans la fenêtre de document, puis choisissez Insertion > Calque.
• Lorsque les éléments invisibles sont affichés, un marqueur de calque apparaît dans le mode Création chaque fois que vous placez un calque sur la page. Si les marqueurs de calques ne sont pas visibles et que vous voulez les afficher, choisissez Affichage > Assistances visuelles > Eléments invisibles.
Dessiner plusieurs calques à la suite
• Cliquez sur le bouton Dessiner un calque de la barre Insertion.
• Dessinez les calques en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée tout en faisant glisser la souris.
• Vous pouvez continuer à tracer des calques tant que vous n’avez pas relâché les touches Ctrl ou Commande.
Convertir des calques en tableaux
Créez votre mise en forme à l’aide de calques, puis convertissez les calques en tableaux afin que votre mise en forme puisse s’afficher dans les navigateurs plus anciens.
• Choisissez Modifier > Convertir > Calques en tableau.
Dans la boîte de dialogue qui s’affiche, sélectionnez les options désirées.
Pour plus d’informations, voir Définition des options de la boîte de dialogue Convertir les calques en tableaux.
• Cliquez sur OK et vos calques sont convertis en un tableau.
Définition des options de la boîte de dialogue Convertir les tableaux en calques
Choisissez parmi les options suivantes :
• Afficher la grille et Aligner sur la grille permettent d’utiliser une grille qui vous aidera à positionner les calques.
• Empêcher le chevauchement des calques limite la position des calques lorsqu’ils sont créés, déplacés et redimensionnés, afin d’éviter tout chevauchement.
• Afficher la palette des calques affiche le panneau Calques.
• Cliquez sur OK.
Convertir des tableaux en calques
• Choisissez Modifier > Convertir > Tableaux en calques.
Dans la boîte de dialogue qui s’affiche, sélectionnez les options désirées.
• Cliquez sur OK.
(Les tableaux sont convertis en calques. Les cellules vides ne sont pas converties en calques, sauf si elles possèdent une couleur d’arrière-plan).
Propriétés de calque
• ID calque
permet d’indiquer un nom identifiant le calque dans le panneau Calques et le code JavaScript. Entrez un nom. Seuls les caractères alphanumériques sont acceptés.
• G (gauche) et S (haut)
indiquent la position de l’angle supérieur gauche du calque par rapport à l’angle supérieur gauche de la page, ou du calque parent s’il est imbriqué.
• L et H
spécifient la largeur et la hauteur du calque.
• Index Z
détermine l’index Z, ou ordre de superposition, du calque. Dans un navigateur, les calques portant les valeurs les plus élevées précèdent les calques portant les valeurs moins élevées. Les valeurs peuvent être positives ou négatives. Il est plus facile de modifier l’ordre de superposition des calques à l’aide du panneau Calques qu’en saisissant des valeurs d’index Z spécifiques.
• Visib.
indique si le calque est visible ou non au début.
- Aucune propriété de visibilité n’est définie par défaut.
Lorsque aucune visibilité n’est précisée, la plupart des navigateurs choisissent Hériter.
- Hériter (inherit) prend la propriété de visibilité de l’objet parent du calque.
- Visible affiche le contenu du calque, quelle que soit la valeur du parent.
- Masqué (hidden) dissimule le contenu du calque, quelle que soit la valeur du parent. Les calques masqués créés avec ilayer occupent le même espace que s’ils étaient visibles.
(Utilisez un langage de script, par exemple JavaScript, pour contrôler la propriété de visibilité et afficher le contenu des calques de façon dynamique).
• Image ar-pl
spécifie une image d’arrière-plan pour le calque. Cliquez sur l’icône du dossier à parcourir et sélectionnez le fichier d’une image.
• Couleur ar-pl
spécifie une couleur d’arrière-plan pour le calque. Laissez cette option vide pour spécifier un arrière-plan transparent.
• Balise
indique la balise HTML utilisée pour définir le calque.
• Débord. (div et span uniquement)
contrôle la manière dont les calques apparaissent dans les navigateurs lorsque le contenu dépasse la taille spécifiée du calque.
- Visible indique que le contenu supplémentaire apparaîtra dans le calque
- Masqué (hidden) signifie que le contenu supplémentaire ne sera pas affiché dans le navigateur.
- Défilement (scroll) indique que le navigateur devra ajouter des barres de défilement dans le calque, qu’elles soient nécessaires ou non.
- Auto entraîne l’affichage des barres de défilement du calque dans le navigateur uniquement lorsque cela est nécessaire.
• Gauche, Haut ou PageX, PageY (layer et ilayer)
Permet de positionner le calque par rapport à son parent ou à la page.
- Gauche, Haut place le calque par rapport au coin supérieur gauche de son parent.
- PageX, PageY place le calque à l’emplacement absolu relatif au coin supérieur gauche de la page, quelle que soit la position de son parent.
• Déroutage
définit la zone visible du calque. Indiquez les coordonnées gauche, haut, droite et bas pour définir un rectangle dans le champ des coordonnées du calque (en partant du coin supérieur gauche du calque). Le calque est « dérouté » afin que seul le rectangle spécifié soit visible.
• Src (later et ilayer uniquement)
Permet d’afficher un autre document HTML dans le calque. Cliquez sur l’icône du dossier à parcourir et sélectionnez le document.
Dreamweaver : Les cadres (Frames)
Les cadres permettent de diviser une fenêtre du navigateur en plusieurs zones, chacune d’entre elles pouvant afficher un document HTML distinct. En règle générale, un premier cadre affiche un document avec des commandes de navigation tandis qu’un autre cadre affiche un document avec le contenu principal.
Créer un jeu de cadres
• Pour créer des cadres, il faut modifier un document Dreamweaver existant, en le divisant en zones de documents supplémentaires. Il existe plusieurs méthodes pour créer un jeu de cadres : Vous pouvez le concevoir vous-même, ou choisir parmi plusieurs jeux de cadres prédéfinis.
• Dreamweaver propose des jeux de cadres prédéfinis qui vous permettent de sélectionner facilement le type de jeu de cadres que vous voulez créer .
Les propriétés du jeu de cadre
Servez-vous de l’inspecteur de propriétés du cadre pour donner un nom à celui-ci, et pour en définir les bordures et les marges. Pour voir toutes les propriétés de cadres énumérées ci-dessous, cliquez sur la flèche d’agrandissement, dans le coin inférieur droit de l’inspecteur des propriétés.
• Pour spécifier les propriétés d’un cadre :
1- Sélectionnez un cadre selon l’une des méthodes suivantes :
Cliquez sur un cadre dans l’inspecteur de cadres.
Cliquez dans un cadre tout en appuyant sur la touche Alt (Windows) ou sur la combinaison de touches Maj-Option (Macintosh) pour le sélectionner.
2- Choisissez Fenêtre > Propriétés pour ouvrir l’inspecteur de propriétés. Cliquez sur la flèche d’agrandissement dans le coin inférieur droit pour afficher toutes les propriétés.
3- Pour nommer le cadre, tapez son nom dans le champ Nom du cadre.
• Les options :
Src
détermine le document source du cadre. Indiquez un nom de fichier, ou cliquez sur l’icône du dossier pour trouver le fichier source et le sélectionner. Vous pouvez aussi ouvrir un fichier dans un cadre, en plaçant le curseur dans le cadre et en cliquant sur Fichier > Ouvrir dans un cadre.
Défiler
détermine si la barre de défilement apparaît lorsqu’il n’y a pas assez de place pour afficher tout le contenu du cadre courant. La valeur par défaut de la plupart des navigateurs est Auto.
Ne pas redimensionner
bloque la taille du cadre courant, et empêche l’utilisateur de déplacer la bordure du cadre et de le redimensionner. Il vous sera toujours possible de redimensionner le cadre dans la fenêtre du document, mais si cette option activée, un visiteur ne pourra pas redimensionner ce cadre dans son navigateur.
Bordures
contrôle la bordure du cadre courant. Les options sont Oui, Non et Par défaut. Ce choix a la priorité sur la configuration de bordures par défaut définie pour le jeu de cadres. La valeur par défaut de la plupart des navigateurs est Oui. Pour désactiver une bordure, tous les cadres adjacents doivent être paramétrés sur Non (ou paramétrés sur Par défaut, avec le jeu de cadres parent paramétré sur Non).
Couleur de bordure
définit une couleur de bordures pour toutes les bordures du cadre courant. Cette configuration annule la couleur de bordure définie par défaut pour le jeu de cadres.
Largeur de marge
Définit (en pixels) la largeur des marges droite et gauche (l’espace entre la bordure du cadre et le contenu).
Hauteur de marge
Définit (en pixels) la hauteur des marges supérieure et inférieure du cadre (l’espace entre la bordure du cadre et le contenu).
Les cibles de cadre
Le menu déroulant Cible, dans l’inspecteur de propriétés, permet de sélectionner le cadre dans lequel doit s’ouvrir un fichier. Vous pouvez décider que le fichier s’ouvrira dans une nouvelle fenêtre, remplacera le contenu courant du cadre dans lequel se trouve le lien, ou remplacera le contenu courant d’un autre cadre.
Le contenu désigné par un lien hypertexte peut remplacer le contenu courant du cadre dans lequel se trouve ce lien, ou apparaître dans une nouvelle fenêtre.
• Pour désigner un cadre cible :
1- Sélectionnez un texte ou un objet.
2- Dans le champ Lien de l’inspecteur de propriétés, procédez de l’une des manières suivantes :
Tapez le chemin d’accès du fichier désigné par le lien.
Cliquez sur l’icône de répertoire pour naviguer jusqu’à un fichier et le sélectionner.
Tirez l’icône Pointer vers un fichier pour sélectionner le fichier désigné par le lien.
Pour spécifier une ancre dans l’autre fichier, tapez un signe dièse (#) avant le nom de l’ancre.
3- Dans le menu déroulant Cible, indiquez le cadre cible dans lequel s’ouvrira le document lié.
_blank ouvre le document lié dans une nouvelle fenêtre du navigateur, en gardant telle quelle la fenêtre courante.
_parent ouvre le document lié dans le jeu de cadres parent du lien.
_self ouvre le document lié dans le même cadre, en remplaçant son contenu courant.
_top ouvre le document lié dans le jeu de cadres le plus important du document courant, en remplaçant tous les cadres et jeux de cadres actuels.
Si vous avez donné des noms à des cadres dans l’inspecteur de propriétés, ces noms apparaissent dans ce menu. Si vous cliquez sur l’un de ces noms, le document lié s’ouvrira dans ce cadre.
Enregistrement des cadres
Le jeu de cadres et ses cadres associés doivent avoir été enregistrés dans leurs fichiers respectifs pour que la page puisse être visualisée dans un navigateur. Vous pouvez enregistrer individuellement la page du jeu de cadres ou la page de chaque cadre, ou bien enregistrer tous les fichiers des cadres ouverts en même temps que le fichier du jeu de cadres.
Lorsque vous créez un document basé sur des cadres dans Dreamweaver, chaque nouveau document de cadre reçoit un nom de fichier provisoire, par exemple UntitledFrame_1 pour la page du jeu de cadres, Untitled-1, Untitled-2, etc. pour les pages des cadres.
Lorsque vous choisissez l’une des options d’enregistrement, la boîte de dialogue Enregistrer un fichier s’ouvre et affiche le nom provisoire du document. Comme chaque fichier est "sans titre," il peut vous être difficile de savoir quel est le fichier de cadre que vous êtes sur le point d’enregistrer. Regardez les lignes de sélection des cadres dans la fenêtre du document pour identifier le document en cours que vous allez enregistrer. La zone sélectionnée indique le cadre qui est actuellement référencé dans la boîte de dialogue d’enregistrement.
• Astuce :
Une fois que vos documents (frames) ont chacun un nom, vous pouvez les travailler individuellement en ouvrant la page HTML correspondante. Ainsi vous les enregistrez un par un.
Sinon il est possible de travailler sur le doc qui contient tous les cadres et d’enregistrer via :
"fichier —> enregistrer tout" dans la barre de menu (Tous les cadres seront enregistrés automatiquement).
Comptatibilité des cadres avec les navigateurs
Dreamweaver vous permet de spécifier le contenu à afficher dans les navigateurs anciens ou ne gérant pas les graphismes, et qui ne prennent pas en charge les cadres. Dreamweaver insère le contenu que vous indiquez dans le fichier du jeu de cadres, à l’aide d’une instruction similaire à la suivante :
<noframes><body bgcolor="#FFFFFF">
ceci est le contenu de la balise NOFRAMES, qui est affiché dans les navigateurs sans cadres.
</body></noframes>
Lorsqu’un navigateur ne prenant pas les cadres en charge ouvre le fichier du jeu de cadres, il n’affiche que le contenu indiqué dans la balise NOFRAMES.
• Pour définir le contenu de NOFRAMES
1- Choisissez Modifier > Jeu de cadres > Modifier le contenu sans cadres.
Dreamweaver efface la fenêtre de document, et les mots "Contenu sans cadre" apparaissent en haut de la zone de texte.
2- Pour créer le contenu de NOFRAMES, procédez d’une des façons suivantes :
Dans la fenêtre du document, tapez ou insérez le contenu.
Choisissez Fenêtre> Source HTML, et, à l’intérieur des balises <noframe> et </noframe>, tapez le contenu ou le code HTML désiré.
3- Cliquez à nouveau sur Modifier > Jeu de cadres > Modifier le contenu sans cadres pour revenir à l’affichage normal du document avec jeu de cadres.
Dreamweaver : Les styles
Les feuilles de style en cascade (CSS) regroupent des règles de mise en forme qui déterminent l’aspect du contenu d’une page Web. Les styles CSS vous permettent de gérer en souplesse l’aspect d’une page, tant en termes de précision de l’emplacement de la présentation qu’en termes de choix de polices et de styles de caractères spécifiques.
Par ailleurs, les styles CSS permettent de contrôler plusieurs propriétés qui ne peuvent pas être gérées via le langage HTML seul. Par exemple, vous pouvez attribuer des puces de liste personnalisées et spécifier différentes tailles et unités de police (pixels, points, etc.). En utilisant des styles CSS et en définissant des tailles de police en pixels, vous garantissez un traitement plus homogène de la présentation et de l’aspect de votre page dans différents navigateurs. Outre la mise en forme du texte, vous êtes à même de gérer le format et le positionnement des éléments blocs d’une page Web. Vous pouvez ainsi définir des marges et des bordures, habiller du texte avec du texte...
Créer une feuille de style
Créez une feuille de style CSS pour automatiser la mise en forme de balises HTML ou d’une plage de texte identifiée par un attribut CLASS.
• Comment faire ?
1- Choisissez Fenêtre > Styles CSS, et cliquez sur l’icône Nouveau style dans la palette Styles CSS.
2- Choisissez l’une des options de styles CSS suivantes :
Créer un style personnalisé (classe) crée un style qui peut être appliqué à l’aide de l’attribut CLASS à une plage de texte. Redéfinir la balise HTML redéfinit le formatage par défaut de la balise HTML spécifiée. Utiliser Sélecteur CSS définit le formatage d’une combinaison particulière de balises ou de toutes les balises qui contiennent un attribut ID spécifique.
3- Indiquez un nom, une balise ou un sélecteur pour le nouveau style. Les noms de style CSS personnalisés doivent commencer par un point. Si vous n’indiquez pas le point vous même, Dreamweaver l’insérera à votre place.
Pour redéfinir le style d’une balise HTML, indiquez le nom de cette balise ou choisissez-en une dans le menu contextuel.
Pour un sélecteur CSS, indiquez un critère valide pour les sélecteurs (par exemple TD H2 ou #monStyle), ou choisissez un sélecteur dans le menu contextuel.
4- Cliquez sur le nom d’une catégorie dans la liste qui apparaît à gauche de la boîte de dialogue, et choisissez les paramètres du nouveau style CSS dans le panneau de droite. Laissez les attributs vides s’ils ne sont pas importants pour ce style.
Les attributs qui ne sont pas affichés dans la fenêtre du document sont signalés par un astérisque (*) dans la boîte de dialogue Définition du style. Notez que certains des attributs de styles CSS que vous pouvez définir dans Dreamweaver ne s’affichent pas de la même manière dans Internet Explorer 4.0 et dans Netscape Navigator 4.0, et que quelques-uns ne sont encore pris en charge par aucun navigateur. Ainsi vous pouvez définir des styles perso via ces différentes boîte de dialogue :
"Panneau Type de la définition des styles"
"Panneau Arrière-plan de la définition des styles"
"Panneau Bloc de la définition des styles"
"Panneau Boîte de la définition des styles"
"Panneau Bordure de la définition des styles"
"Panneau Liste de la définition des styles"
"Panneau Positionnement de la définition des styles"
"Panneau Extensions de la définition des styles"
Lorsque vous créez un style personnalisé (une classe), il apparaît dans la palette de styles CSS et dans le sous-menu Texte > Styles CSS. Les styles de balises HTML et les styles de sélecteurs CSS n’apparaissent pas dans la palette Styles CSS, car ils ne peuvent pas être appliqués ; mais leur effet est automatiquement visible dans la fenêtre du document.
Créer ou lier une feuille de style externe
Une feuille de style CSS est un fichier texte externe à vos documents. Il contient toutes les indications de styles et de mises en forme. Si vous modifiez une feuille de style externe, les changements sont reflétés dans tous les documents liés à cette feuille de style CSS.
• Comment faire ?
1- Choisissez Fenêtre > Styles CSS, ou cliquez sur le bouton Styles CSS du Lanceur.
2- Dans la palette Styles CSS, cliquez sur l’icône Ouvrir feuille de style.
3- Dans la boîte de dialogue Modifier Feuille de style, cliquez sur le bouton Lien.
4- Dans la boîte de dialogue Ajouter une feuille de style externe, procédez de l’une des manières suivantes :
Cliquez sur le bouton Parcourir (Windows) ou Choisir (Macintosh) pour sélectionner une feuille de style externe, ou tapez son chemin d’accès dans la zone Fichier/URL.
Créez une nouvelle feuille de style CSS externe en indiquant un nouveau nom de fichier (un nom qui n’existe pas encore dans le répertoire indiqué). Ce nom de fichier doit avoir l’extension ".css".
5- Sélectionnez l’une des deux options Lien ou Importer pour indiquer et créer la balise qui sera utilisée pour associer la feuille de style externe au document, puis cliquez sur OK.
L’option Importer recopie les informations contenues dans la feuille de style CSS externe dans le document courant.
L’option Lien permet de lire et relayer ces informations sans les transférer dans le document.
Bien que Importer et Lien permettent d’appliquer tous les styles de la feuille de style CSS externe au document courant, Lien offre plus de possibilités et fonctionne dans la plupart des navigateurs.
Le nom de la feuille de style CSS externe apparaît avec son identificateur (lien ou importer) dans la liste des styles de la boîte de dialogue Modifier feuille de style. Suivez les étapes décrites ci-dessous pour créer ou modifier les styles définis dans une feuille de style CSS externe.
6- Dans la boîte de dialogue Modifier Feuille de style, sélectionnez le nom de la feuille de style externe, et cliquez sur Modifier. La boîte de dialogue Modifier feuille de style apparaît avec les paramètres de cette feuille de style.
7- Cliquez sur Nouveau pour définir des styles dans la feuille de style CSS externe.
8- Dans la boîte de dialogue Nouveau, définissez le nouveau style. Voir "Création d’une feuille de style CSS" .
9- Cliquez sur Enregistrer lorsque vous avez fini de définir des styles.
Modification d’une feuille de style externe
Lorsque vous modifiez une feuille de style CSS qui contrôle du texte dans votre document, vous reformatez instantanément tout ce texte. Vos modifications sont reflétées immédiat dans tous les documents liés à cette feuille de style.
• Comment faire ?
1- Ouvrez l’un des documents qui sont liés à la feuille de style CSS que vous désirez modifier.
2- Utilisez l’une des méthodes suivantes :
Choisissez Fenêtre > Styles CSS, ou cliquez sur le bouton Styles CSS du Lanceur. Dans la palette Styles CSS, cliquez sur l’icône Ouvrir feuille de style.
Choisissez Texte > Styles CSS > Modifier Feuille de style.
3- Dans la boîte de dialogue Modifier Feuille de style, sélectionnez le nom de la feuille de style externe, et cliquez sur Modifier.
Une seconde boîte de dialogue Modifier feuille de style apparaît, avec les paramètres de cette feuille de style externe.
4- Modifier les styles
5- Cliquez sur Enregistrer lorsque vous avez fini de modifier des styles.
Appliquer des styles
Les styles CSS personnalisés, ou classes, sont le seul type de style CSS qui peut être appliqué à n’importe quel texte dans votre document, quelles que soient les balises qui contrôlent ce texte. La palette Styles CSS affiche les noms de tous les styles disponibles.
Il ne faut pas confondre les styles CSS avec les options de mise en forme, par exemple Gras ou Variable, qui figurent dans le sous-menu Texte > Style ; ces options sont des attributs de formatage prédéfinis, qui correspondent à des balises HTML spécifiques.
Lorsque vous appliquez plusieurs styles CSS au même texte, il peut y avoir entre ces styles un conflit qui produira des résultats inattendus.
• Comment faire pour appliquer un style CSS personnalisé ?
1- Choisissez Fenêtre > Styles CSS.
2- Sélectionnez le texte auquel vous voulez appliquer un style CSS.
Placez le curseur dans un paragraphe pour appliquer le style au paragraphe entier.
Pour indiquer la balise précise à laquelle le style CSS doit être appliqué, sélectionnez cette balise à l’aide du sélecteur de balise, dans la partie inférieure gauche de la fenêtre du document. Vous pouvez également changer de balise sélectionnée à l’aide du menu déroulant Appliquer à de la palette Styles CSS.
Si vous sélectionnez une plage de texte au sein d’un même paragraphe, le style CSS n’affectera que cette sélection.
3- Dans la palette Styles CSS, cliquez sur le nom d’un style.Vous pouvez également appliquer un style CSS en sélectionnant le nom d’un style dans le sous-menu Texte > Styles CSS, ou encore en cliquant dans la sélection à l’aide du bouton droit (Windows) ou en cliquant tout en maintenant la touche Contrôle enfoncée (Macintosh), puis en choisissant le nom du style dans le sous-menu Styles CSS du menu contextuel qui apparaît alors. La balise qui contrôle la sélection en cours apparaît à côté de la commande Style personnalisé.
Dreamweaver : Les comportements
Les comportements Dreamweaver insèrent du code JavaScript dans des documents pour permettre aux utilisateurs d’interagir avec une page Web afin de la modifier ou d’effectuer certaines tâches. Un comportement est la combinaison d’un événement et d’une action déclenchée par cet événement. Dans le panneau Comportements, vous pouvez ajouter un comportement à une page en spécifiant une action, puis l’événement qui déclenche cette action.
Afficher le menu contextuel
Utilisez ce comportement pour créer ou modifier un menu contextuel Dreamweaver ou pour ouvrir et modifier un menu contextuel Fireworks inséré dans un document Dreamweaver.
Définissez les options dans la boîte de dialogue Afficher le menu contextuel pour créer un menu contextuel horizontal ou vertical. Vous pouvez faire appel à cette boîte de dialogue pour définir ou modifier la couleur, le texte et la position d’un menu contextuel.
Afficher / Masquer les calques
Cette action affiche, masque, ou rétablit la visibilité par défaut d’un ou plusieurs calques. Cette action permet d’afficher des informations en fonction des interactions de l’utilisateur avec la page. Par exemple, lorsque le curseur passe sur l’image d’une plante, vous pouvez afficher un calque comportant des détails sur le climat idéal de la plante, l’ensoleillement dont elle a besoin, sa taille adulte, etc.
L’action Afficher-masquer les calques sert également à créer un calque de préchargement, c’est-à-dire, un grand calque qui cachera d’abord le contenu de la page, puis disparaîtra à la fin du chargement de tous les éléments de la page.
[ Comment ça marche ]
Appel Javascript
L’action Appel JavaScript vous permet d’utiliser l’inspecteur de comportements pour déclencher l’exécution d’une fonction ou d’une ligne personnalisée de code JavaScript lorsqu’un événement se produit.
[ Comment ça marche ]
Atteindre l’URL
L’action Atteindre l’URL ouvre une nouvelle page dans la fenêtre en cours ou dans le cadre indiqué. Cette action est particulièrement utile pour modifier d’un seul clic le contenu d’un ou plusieurs cadres. Elle peut également être appelée au sein d’un scénario pour ouvrir une nouvelle page après un délai spécifié.
[ Comment ça marche ]
Changer la propriété
Utilisez cette action pour modifier la valeur de l’une des propriétés d’un objet (par exemple, la couleur d’arrière-plan d’un calque ou l’action d’un formulaire). C’est le navigateur cible choisi qui détermine si les propriétés sont modifiables ou non ; beaucoup plus de propriétés sont exposées à JavaScript dans Microsoft Internet Explorer (IE) 4.0 que dans IE 3.0 ou Netscape Navigator 3.0 ou 4.0. Par exemple, vous pouvez modifier de façon dynamique la couleur d’arrière-plan d’un calque.
[ Comment ça marche ]
Contrôler Shockwave ou Flash
Utilisez l’action Contrôler Shockwave ou Flash pour lire, arrêter ou rembobiner une animation Shockwave ou Flash, ou pour aller à une image précise dans cette animation.
[ Comment ça marche ]
Définir image barre de navigation
Utilisez l’action Définir image barre de navigation pour transformer une image en image de barre de navigation, ou pour modifier l’affichage et les actions des images d’une barre de navigation.
L’onglet Base de la boîte de dialogue Définir image barre de navigation permet de créer ou de modifier une ou plusieurs images d’une barre de navigation, de modifier l’URL cible des boutons de la barre de navigation, et de sélectionner une autre fenêtre pour l’affichage de cette URL cible.
L’onglet Avancé de la boîte de dialogue Définir image barre de navigation permet de modifier l’état d’autres images du document, en fonction de l’état du bouton actuellement sélectionné. Par défaut, lors d’un clic sur un élément d’une barre de navigation, tous les autres éléments de celle-ci sont automatiquement restaurés dans leur état "Image normale" ; l’onglet Avancé vous permet de définir un changement d’état pour une autre image lorsque l’image sélectionnée entre dans l’état "Image survolée" ou "Image cliquée".
[ Comment ça marche ]
Déplacement de calque
Cette action permet à l’utilisateur de déplacer un calque. Utilisez cette action pour créer des puzzles, des contrôles de déplacement et autres éléments mobiles de l’interface.
Vous pouvez spécifier la direction vers laquelle l’utilisateur peut faire glisser le calque (horizontalement, verticalement, ou dans toutes les directions), une cible vers laquelle l’utilisateur doit faire glisser le calque, si ce dernier doit être aimanté par la cible ou non lorsqu’il arrive à moins d’un certain nombre de pixels de la cible, l’action à déclencher lorsque le calque touche la cible...
Comme l’action Déplacement de calque doit être appelée avant que le calque puisse être déplacé par l’utilisateur, vérifiez bien que l’événement qui déclenche l’action se produit avant que l’utilisateur aie la possibilité de tenter de faire glisser le calque. Le mieux est d’associer cette action à l’objet BODY (à l’aide de l’événement onLoad), mais vous pouvez également l’associer à un lien remplissant la totalité du calque (par exemple un lien autour d’une image), à l’aide de l’événement onMouseOver.
[ Comment ça marche ]
Intervertir une image
L’ action Intervertir une image remplace une image par une autre, en modifiant l’attribut SRC de la balise IMG. Utilisez cette action pour créer des substitutions d’images (effets de survol) et autres effets sur des images (y compris la substitution de plusieurs images à la fois).
Comme seul l’attribut SRC est affecté par cette action, l’image de substitution doit en principe avoir les mêmes dimensions (hauteur et largeur) que l’original, afin de lui éviter des déformations.
[ Comment ça marche ]
Jouer le son
Utilisez cette action pour reproduire un son. Par exemple, vous pouvez mettre en place un effet sonore lorsque l’utilisateur passe au-dessus d’un lien, ou jouer une séquence musicale lorsque la page est en cours de chargement.
[ Comment ça marche ]
Masquer le menu contextuel
Utilisez les options de position pour définir l’emplacement de l’affichage du menu par rapport à l’image ou au lien de déclenchement. Vous pouvez également définir si le menu doit être masqué ou non lorsque l’utilisateur éloigne le pointeur du déclencheur.
Menu de reroutage
Lorsque vous créez un menu de reroutage à l’aide de la fonction Insertion > Objet de formulaire > Menu de reroutage, Dreamweaver crée un objet menu et lui associe le comportement approprié. En principe, il n’est pas nécessaire d’associer manuellement l’action Menu de reroutage à un objet. Dans l’inspecteur de comportements, double-cliquez sur une action Menu de reroutage existante pour modifier le cadre dans lequel s’ouvrira un fichier lié, ou pour ajouter ou modifier une invite de sélection au sein du menu .
[ Comment ça marche ]
Message contextuel
Cette action fait apparaître un message d’alerte JavaScript, avec le texte que vous avez spécifié. Comme les alertes JavaScript ne disposent que d’un seul bouton (OK), utilisez cette action pour informer l’utilisateur plutôt que pour lui proposer un choix.
Vous pouvez incorporer au texte des appels de fonction, propriétés, variables globales ou autres expressions valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades {}. Pour afficher une accolade, faites-la précéder d’une barre oblique inversée {.
Ouvrir une fenêtre de navigateur
Utilisez l’action Ouvrir une fenêtre du navigateur pour ouvrir une URL dans une nouvelle fenêtre. Vous pouvez spécifier les propriétés de la nouvelle fenêtre, dont sa taille, ses attributs (redimensionnable ou non, dispose d’une barre de menu ou non, etc.), ainsi que son nom.
Si vous ne spécifiez aucun attribut, elle s’ouvrira avec la taille et les attributs de la fenêtre à partir de laquelle elle a été lancée. Le choix de certains attributs désactive automatiquement tous ceux qui ne sont pas explicitement activés. Par exemple, si vous ne définissez pas d’attributs pour la fenêtre, elle peut ou non s’ouvrir en 640 x 480 pixels et disposer du menu et des barres d’outils suivantes : navigation, adresses et état. Si vous définissez explicitement une largeur de 640 et une hauteur de 480 pixels, sans autres spécifications, la fenêtre s’ouvrira en 640 x 480 pixels et n’aura pas de barre de navigation, d’adresse ou d’état, pas de menu, pas de poignées de redimensionnement, et pas de barres de défilement.
[ Comment ça marche ]
Précharger les images
Cette action place dans la mémoire cache du navigateur les images qui ne sont pas immédiatement affichées lors du chargement de la page (par exemple les images de substitution appelées par un scénario, un comportement ou une fonction en JavaScript). Cela évite à l’utilisateur d’attendre que ces images soient chargées, lorsqu’un événement déclenche leur apparition.
[ Comment ça marche ]
Scenario
• Lire et arrêter le scenario
Utilisez les actions Jouer le scénario et Arrêter le scénario pour permettre aux utilisateurs d’exécuter et d’arrêter un scénario en cliquant sur un lien ou un bouton ou pour démarrer et arrêter un scénario automatiquement lors du survol d’un objet (lien, image, etc.). L’action Jouer le scénario est automatiquement associée à la balise body avec l’événement onLoad lorsque vous sélectionnez l’option Lecture auto dans le panneau Scénarios.
[ Comment ça marche ]
• Atteindre l’image du scenario
Cette action amène la « tête de lecture » sur l’image indiquée. Vous pouvez l’utiliser dans le canal Comportements du panneau Scénarios pour reproduire en boucle certaines parties du scénario, pour créer un lien ou un bouton Rembobiner ou pour permettre à l’utilisateur de passer directement à d’autres parties de l’animation.
[ Comment ça marche ]
Texte
• Texte d’un champ texte
Cette action remplace le contenu d’un champ texte de formulaire par le contenu indiqué.
• Texte de la barre d’état
L’action Texte de la barre d’état affiche un message dans la barre d’état, dans la partie inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser cette action pour décrire la destination d’un lien dans la barre d’état, en remplacement de l’affichage de l’URL associée. Pour voir un exemple de message d’état, amenez la souris sur n’importe quel bouton de navigation dans les pages de l’aide de Dreamweaver.(*)
• Texte d’un cadre
L’action Texte d’un cadre vous permet de remplacer de façon dynamique le contenu et le formatage d’un cadre par le contenu indiqué. Ce contenu peut être n’importe quel texte valide en HTML. Cette action permet de modifier les informations de façon dynamique.
Bien que l’action Texte d’un cadre permette de remplacer le formatage d’un cadre, vous pouvez activer l’option Préserver Couleur d’arrière-plan pour conserver les attributs actuels pour l’arrière-plan de la page et la couleur du texte.(*)
- Pour créer un jeu de cadres :
Choisissez Modifier > Jeu de cadres > Fractionner le cadre à gauche, à droite, vers le haut ou vers le bas.
• Texte d’un calque
L’action Texte du calque remplace le contenu et le formatage d’un calque existant sur la page par le contenu indiqué. Ce contenu peut comporter n’importe quel code source valide en HTML.
L’action Texte du calque remplace le contenu et le formatage d’un calque existant par le contenu indiqué, mais conserve les attributs du calque, y compris la couleur. Vous pouvez formater le contenu en incorporant des balises HTML dans le champ Nouveau HTML de la boîte de dialogue Texte du calque.(*) [ Comment ça marche ]
(*)Vous pouvez incorporer au texte des appels de fonction, propriétés, variables globales ou autres expressions, pour peu qu’ils soient valides en JavaScript. Pour incorporer une expression JavaScript, placez-la entre des accolades {}. Pour afficher une accolade, faites-la précéder du caractère d’échappement, une barre oblique inversée {.
Valider le formulaire
Cette action teste le contenu des champs texte indiqués pour vérifier que l’utilisateur a tapé le type de données correct. Associez cette action à des champs individuels de formulaire à l’aide de l’événement onBlur pour valider ces champs au fur et à mesure que l’utilisateur remplit le formulaire. Vous pouvez aussi associer cette action au formulaire à l’aide de l’événement onSubmit, pour évaluer divers champs en même temps lorsque l’utilisateur clique sur le bouton d’envoi. Associez cette action au formulaire pour éviter de l’envoyer au serveur si l’un des champs contient des données non valides.
[ Comment ça marche ]
Vérifier le navigateur
Utilisez cette action pour aiguiller les visiteurs vers des pages différentes selon la marque et la version de leur navigateur. Par exemple, vous pouvez aiguiller les utilisateurs de Netscape Navigator 4.0 ou version ultérieure sur une page, les utilisateurs de Internet Explorer 4.0 ou version ultérieure sur une autre, et laisser sur la page en cours les utilisateurs d’un autre type de navigateur.
Il est utile d’associer ce comportement à la balise BODY d’une page qui est compatible avec presque tous les navigateurs (et qui n’utilise pas d’autre JavaScript) ; ainsi, les visiteurs de la page qui ont désactivé JavaScript verront toujours quelque chose.
Une autre option consiste à associer ce comportement à un lien nul (sans destination, balise A) pour que l’action détermine sur quelle page le lien renvoie, selon l’éditeur et la version du navigateur du visiteur.
[ Comment ça marche ]
Vérifier le Plug-in
Utilisez cette action pour envoyer les visiteurs sur des pages différentes selon que le plug-in spécifié est installé ou non. Par exemple, vous pouvez envoyer les utilisateurs sur une page s’ils disposent de Shockwave, et sur une autre dans le cas contraire.
Remarque : Il est impossible de détecter des plug-ins spécifiques dans Microsoft Internet Explorer (IE) à l’aide de JavaScript Toutefois, si vous sélectionnez les plug-ins Flash ou Director, le code VBScript approprié sera automatiquement ajouté à votre page pour les détecter dans IE sous Windows.
[ Comment ça marche ]
Dreamweaver : Historique
Le panneau Historique répertorie un nombre défini d’actions réalisées au sein du document actif depuis que vous l’avez créé ou ouvert (il n’affiche pas les actions réalisées dans d’autres cadres, d’autres fenêtres de document ou dans le panneau Site). Il vous permet d’annuler une ou plusieurs actions, de reproduire des actions et de créer de nouvelles commandes pour automatiser les tâches répétitives.
Lors de l’ouverture du panneau Historique, le curseur, ou index, pointe sur la dernière action que vous avez accomplie.
Utilisation du panneau Historique
• Le panneau Historique enregistre toutes les étapes de votre travail dans Dreamweaver. Vous pouvez utiliser le panneau Historique pour annuler plusieurs étapes simultanément.
• Pour ouvrir le panneau Historique :
Choisissez Fenêtre > Autres > Historique.
• Pour annuler la dernière action :
Déplacez le curseur du panneau Historique d’une étape vers le haut dans la liste. Cette opération a le même effet que lorsque vous cliquez sur Edition > Annuler. (L’étape annulée apparaît alors en grisé).
• Pour annuler plusieurs opérations à la fois, procédez de l’une des manières suivantes :
- Déplacez le curseur jusqu’à une étape de la liste.
- Cliquez à gauche d’une étape le long de la trajectoire du curseur ( le curseur se dirige automatiquement vers cette étape, annulant toutes celles qui sont sur son passage).
• Le panneau Historique permet également de reproduire des étapes déjà réalisées et d’automatiser des tâches en créant de nouvelles commandes.
Configurer le nombre d’étapes que le panneau Historique conserve et affiche
• Choisissez Edition > Préférences..., puis sélectionnez la catégorie Général dans la liste de gauche.
- Tapez un chiffre dans la zone Nombre maximal d’étapes de l’historique. A noter que plus ce chiffre est élevé, plus le panneau Historique utilisera de mémoire. Cela peut affecter les performances et ralentir votre système.
Automatisation des tâches
Pour recommencer une ou deux fois une série d’étapes, répétez-les directement depuis le panneau Historique, qui enregistre chaque étape de votre travail sur le document. Pour des informations de base sur le panneau Historique, voir A propos du panneau Historique. En revanche, pour automatiser une tâche fréquente, vous pouvez créer une nouvelle commande qui effectuera cette tâche automatiquement.
• Comment faire ?
1- Sélectionnez des étapes dans le panneau Historique, en utilisant l’une des méthodes suivantes :
Faites glisser la souris d’une étape à une autre (ne faites pas glisser le curseur ; faites simplement glisser de l’étiquette de texte d’une étape vers l’étiquette de texte d’une autre).
Sélectionnez la première étape, puis maintenez la touche Maj enfoncée tout en cliquant sur la dernière étape ou sélectionnez la dernière étape, puis maintenez la touche Maj enfoncée tout en cliquant sur la première.
2- Cliquez sur Reproduire.
Les étapes sont reproduites dans leur ordre chronologique et une nouvelle étape, libellée « Reproduire les étapes », apparaît dans le panneau Historique.
Dreamweaver : La bibliothèque
Comment bien organiser votre travail et être plus productif ? La bibliothèque est là pour ça !
Ajouter un élément à la bibliothèque
Lorsque vous ajoutez un élément de la bibliothèque à une page, le contenu réel est inséré dans le document avec une référence à l’élément d’origine. Une fois le contenu inséré, l’élément original n’a pas besoin d’être présent pour que le contenu soit affiché.
• Comment faire ?
1- Placez le curseur dans la fenêtre du document.
2- Choisissez Fenêtre > Bibliothèque, ou cliquez sur le bouton Bibliothèque du lanceur.
3- Faites glisser un élément de la palette de la bibliothèque vers la fenêtre du document, ou sélectionnez un élément et cliquez sur Ajouter à la page.
Pour insérer le contenu de l’élément sans en créer une autre instance dans le document, maintenez la touche Contrôle (Windows) ou Option (Macintosh) enfoncée pendant que vous faites glisser l’élément à partir de la palette de la bibliothèque.
Création d’un élément de bibliothèque
Pour créer un élément de bibliothèque, sélectionnez une zone de la section BODY d’un document, et demandez à Dreamweaver de convertir cette zone en élément de bibliothèque.
Les éléments de la bibliothèque peuvent inclure n’importe quel élément du corps (BODY), y compris du texte, des tableaux, des formulaires, des images, des appliquettes Java, des plug-ins et des éléments ActiveX. Dreamweaver ne stocke que la référence aux éléments liés, par exemple les images. Le fichier d’origine doit rester à l’emplacement spécifié pour que l’élément de la bibliothèque fonctionne correctement.
Les éléments de la bibliothèque peuvent aussi contenir des comportements, mais la modification de ces comportements doit respecter certaines conditions. Les éléments de bibliothèque ne peuvent pas contenir de scénarios ni de feuilles de style, car le code associé à ces éléments figure dans la section HEAD.
• Comment faire ?
1- Sélectionnez une partie d’un document que vous souhaitez enregistrer comme élément de la bibliothèque.
2- Choisissez Fenêtre > Bibliothèque pour ouvrir la palette de la bibliothèque,
- cliquez sur le bouton de menu contextuel dans la palette, puis sélectionnez Créer un élément de bibliothèque,
- cliquez sur l’icône Nouvel élément de la bibliothèque, dans le coin inférieur droit de la palette,
- choisissez Modifier > Bibliothèque > Ajouter un objet dans la bibliothèque.
3- Tapez un nom pour le nouvel élément de la bibliothèque.
Rendre un élément modifiable
Si vous avez inséré un élément de bibliothèque dans un document et que vous désirez modifier celui-ci uniquement sur cette page, vous devez briser le lien qui existe entre cet élément et la bibliothèque. Lorsqu’un élément de bibliothèque a été rendu modifiable, il ne peut plus être mis à jour à partir de la bibliothèque.
• Comment faire ?
1- Sélectionnez un élément de la bibliothèque dans le document courant.
2- Cliquez sur Détacher de l’original dans l’inspecteur de propriétés ; Choisissez Rendre modifiable dans le menu contextuel.
Dreamweaver : Les scenarios
Le terme Dynamic HTML, ou DHTML, se rapporte à la capacité de modifier les propriétés de style ou de positionnement d’éléments d’une page à l’aide d’un langage de script. Les scénarios emploient DHTML pour modifier, sur une échelle temporelle (ce qui explique la métaphore du scénario de film), les propriétés des calques et des images. Utilisez les scénarios pour créer des animations ne nécessitant pas de contrôles ActiveX, d’appliquette Java, ou de plug-ins.
Les scénarios créent une animation en modifiant, suivant une échelle temporelle, la position, la taille, la visibilité et / ou l’ordre de superposition d’un calque. Ils sont également utiles pour produire d’autres actions après le chargement de la page. Par exemple, les scénarios peuvent modifier le fichier source d’une image, et exécuter des comportements à un moment donné. Les fonctions des scénarios liées aux calques ne fonctionnent que dans des navigateurs de la version 4.0 ou ultérieure.
Créer un scenario
Tout d’abord, ouvrez l’inspecteur de code HTML pour afficher le code JavaScript généré par un scénario. Le code du scénario se trouve dans la fonction MM_initTimelines, à l’intérieur d’une balise SCRIPT dans la section HEAD du document.
Lorsque vous modifiez le code HTML d’un document qui contient des scénarios, veillez à ne pas déplacer, renommer ou supprimer des éléments auxquels le scénario fait référence.
• Comment faire ?
1- Sélectionnez un calque
2- Amenez le calque à sa position initiale au début de l’animation. Vérifiez que vous avez bien sélectionné le bon élément. Cliquez sur le symbole de calque, ou servez-vous de la palette de calques pour en sélectionner un.
3- Choisissez Modifier > Enregistrer le chemin du calque.
4- Déplacez le calque sur la page pour décrire son parcours.
5- Relâchez la souris à l’emplacement où l’animation doit s’arrêter. Dreamweaver ajoute une barre d’animation au scénario, avec le nombre nécessaire d’images-clés.
6 Dans l’inspecteur de scénario, cliquez sur le bouton Rembobiner, puis maintenez le bouton Lecture enfoncé pour visualiser votre animation.
Les actions pour controller les scenarios
Associez les actions de comportement suivantes à un lien, à un bouton ou à tout autre objet pour contrôler les scénarios. Pour créer des effets intéressants, vous pouvez placer les comportements contenant ces actions dans le canal de comportements. Par exemple, vous pouvez faire en sorte qu’un scénario s’arrête de lui-même.
Déplacement de calque
permet à l’utilisateur de déplacer un calque. Utilisez cette action pour créer des puzzles, des commandes de défilement et autres éléments mobiles de l’interface.
Afficher-Masquer les calques
affiche, masque, ou rétablit la visibilité par défaut d’un ou plusieurs calques. Cette action permet d’afficher des informations en fonction des interactions de l’utilisateur avec la page. Voir "Afficher-masquer les calques".
Lecture du scénario et Arrêter le scénario
permettent aux visiteurs de la page de lire et arrêter un scénario en cliquant sur un lien ou un bouton. Ces actions permettent aussi de démarrer et arrêter un scénario automatiquement lorsque l’utilisateur passe sur un lien, une image ou tout autre objet.
Atteindre une image du scénario
entraînera un saut du scénario à une image donnée. La case à cocher Boucle de l’inspecteur de scénario ajoute l’action "Atteindre une image du scénario" après la dernière image de l’animation, ce qui fera revenir celle-ci à la première image avant de redémarrer.
Dreamweaver : Les extensions
Une extension est un logiciel que vous intégrez à une application Macromedia pour en améliorer les fonctions. Macromedia propose différents types d’extensions. Par exemple, les extensions de Dreamweaver peuvent contenir du code HTML que vous pouvez ajouter au panneau Objet et dans le menu Insertion, des commandes JavaScript que vous pouvez ajouter au menu Commandes, de nouveaux comportements, inspecteurs de propriétés et panneaux flottants.
De nombreux partenaires de Macromedia et développeurs indépendants créent des comportements de serveur personnalisés pour répondre à des besoins précis en matière de développement de sites Web. Vous pouvez y accéder et les télécharger depuis le site Web de Macromedia Exchange pour Dreamweaver.
Où trouver des extensions ?
Pour rechercher les extensions de Dreamweaver les plus récentes, consultez le site Web de
Macromedia Exchange 
. Sur ce site, vous pouvez vous connecter et télécharger des extensions (un grand nombre d’entre elles sont gratuites), participer à des forums de discussion, visualiser les rapports et analyses des utilisateurs et installer et exploiter Extension Manager.
Vous devez installer Extension Manager avant de pouvoir télécharger des extensions .
Comment les installer ?
Une fois que vous avez télécharger une extension il faut l’installer : Le double-clic sur une extension entraîne son installation dans l’application avec laquelle elle est compatible et qui est en cours d’exécution.
Attention : Pour les extensions Dreamweaver MX, Dreamweaver et UltraDev, tenez compte des critères de compatibilité suivants :
- Les extensions Dreamweaver 4 sont compatibles avec Dreamweaver 4 et UltraDev 4.
- Les extensions UltraDev 4 sont compatibles avec UltraDev 4 uniquement.
- Les extensions Dreamweaver MX sont compatibles avec Dreamweaver MX.
Comment les gérer ?
Si vous avez installé un trop grand nombre d’extensions à l’aide de Extension Manager, vous pouvez choisir de n’en activer qu’un certain nombre et ce, afin d’optimiser les performances de l’application.
Dans Extension Manager, activez ou désactivez l’option Marche/Arrêt en regard d’une extension selon que vous souhaitez l’activer ou la désactiver, ou sélectionnez l’extension et appuyez sur la barre d’espace. Une coche dans la colonne Marche/Arrêt en regard de l’extension indique que cette dernière est activée. Lorsque vous désactivez une extension, celle-ci est restructurée pour un usage ultérieur et stockée dans un dossier au sein du dossier Configuration. Pour réactiver l’extension, il suffit d’activer l’option Marche/Arrêt en regard de l’extension correspondante dans Extension Manager.
