Front page 2002 - Université de Sherbrooke

Carrefour de l’information
Université de Sherbrooke
Dreamweaver MX 2004
Deuxième partie
Savoir améliorer ses sites Web
Par :
Josée Martin (hiver 2005)
Édition revue et augmentée par :
Marc-André Dulude (automne 2005)
Geneviève Khayat (hiver 2006)
Johanie Deschênes (hiver 2007)
Sherbrooke
Hiver 2006
Table des matières
Utiliser des modèles ...........................................................................................1
Créer un nouveau modèle ..............................................................................1
Créer un nouveau modèle à partir d’un document vierge ...........................1
Transformer un document existant en modèle.............................................1
Insérer une région modifiable ........................................................................2
Créer une nouvelle page à partir d’un modèle..............................................3
Appliquer un modèle à un document existant..............................................3
Utiliser les feuilles de style ................................................................................4
Créer une feuille de style interne ...................................................................4
Appliquer un style ...........................................................................................5
Créer un lien vers une feuille de style externe .............................................7
Créer un formulaire.............................................................................................8
Champ de texte................................................................................................8
Indications .......................................................................................................8
Bouton..............................................................................................................8
Insérer un son .....................................................................................................9
Insérer un fichier Flash ....................................................................................10
Insérer un applet JAVA ....................................................................................12
Comment se procurer des applets? ............................................................12
Comment les utiliser dans une page Web? ................................................12
Comment insérer un applet?........................................................................13
— Macromedia Dreamweaver MX 2004 — 1
Utiliser des modèles
Afin de créer votre site Web, vous pouvez utiliser des modèles. Les modèles vous
permettent d’appliquer la même apparence à toutes les nouvelles pages que vous créez et
de modifier plusieurs pages simultanément. Tout document créé à partir d'un modèle
reste associé à ce modèle (sauf si vous décidez de détacher le document ultérieurement).
Lorsque vous modifiez un modèle, la conception de tous les documents créés à partir de
ce modèle est immédiatement mise à jour.
Créer un nouveau modèle
Vous pouvez créer un modèle à partir d'un document existant ou bien à partir d'un
nouveau document vierge.
Créer un nouveau modèle à partir d’un document vierge
1. Cliquez sur Fichier / Nouveau.
2. Une fenêtre de création d'un nouveau document s'affiche. Dans la section
Catégorie, choisissez Page de base. Ensuite, dans la section Page de base,
sélectionnez Modèle HTML, puis cliquez sur Créer.
Transformer un document existant en modèle
1. Ouvrez le document, puis cliquez sur Fichier / Enregistrer comme modèle.
2. La boîte de dialogue Enregistrer comme modèle s'affiche.
3. Dans le menu déroulant Site, sélectionnez le site dans lequel vous souhaitez
enregistrer le modèle, puis tapez un nom unique pour le modèle dans la zone de
texte Enregistrer sous.
4. Cliquez ensuite sur Enregistrer.
Dreamweaver enregistre alors le fichier de modèle dans le dossier Templates de votre
dossier racine local avec l'extension .dwt. Si ce dossier n'existe pas, Dreamweaver le crée
automatiquement au moment de l'enregistrement du nouveau modèle. Le nouveau modèle
sera ajouté au panneau Actifs.
— Macromedia Dreamweaver MX 2004 — 2
Note
Lorsque vous enregistrez un document comme modèle, Dreamweaver verrouille
automatiquement la plupart des régions. 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.
Notez également que, lors de la création d’un modèle, vous pouvez apporter des
modifications aux régions modifiables et aux régions verrouillées. En revanche, dans le
cas d’un document créé à partir d’un modèle, seules les régions modifiables peuvent subir
des modifications : les régions verrouillées ne peuvent pas être modifiées.
Insérer une région modifiable
1. Sélectionnez le texte ou le contenu que vous souhaitez définir comme région
modifiable ou placez le point d'insertion à l'endroit où vous voulez insérer une
région modifiable.
2. Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton
Modèles, puis choisissez Région modifiable.
3. Dans la boîte de dialogue Nouvelle région modifiable, tapez un nom unique pour
votre région modifiable, et ce, sans caractères spéciaux. Notez également que
vous devez utiliser un nom différent pour chacune des régions modifiables dans
un modèle donné.
4. Cliquez ensuite sur Ok.
Vous pourrez alors apercevoir la région modifiable dans votre page. Cette dernière est
entourée d'un cadre rectangulaire dans le modèle. Dans le coin supérieur gauche de la
région, un onglet indique le nom de la région. Si vous insérez une région modifiable vide
dans le document, son nom s'affiche également dans le cadre qui la délimite.
— Macromedia Dreamweaver MX 2004 — 3
Créer une nouvelle page à partir d’un modèle
Pour créer une nouvelle page à partir d'un modèle, vous devez :
1. Dans le panneau Actifs (Fichiers / Actifs), choisir la catégorie Modèles sur le côté
gauche du panneau;
2. Sélectionner ensuite le modèle, puis enfoncer le clic droit de la souris;
3. Dans le menu contextuel, choisir Nouveau à partir d'un modèle.
Appliquer un modèle à un document existant
1. Ouvrez le document auquel vous souhaitez appliquer le modèle.
2. Dans le panneau Actifs (Fichiers / Actifs), choisissez la catégorie Modèles sur le
côté gauche du panneau.
3. Ensuite, faites glisser le modèle que vous souhaitez appliquer du panneau Actifs
dans la fenêtre de document ou sélectionnez le modèle que vous souhaitez
appliquer, puis cliquez sur le bouton Appliquer, situé juste en bas du panneau
Actifs.
— Macromedia Dreamweaver MX 2004 — 4
Utiliser les feuilles de style
Avec Dreamweaver, vous pouvez modifier rapidement l’apparence de vos pages à l’aide
des feuilles de style. En effet, les feuilles de style ressemblent étrangement à des modèles
et elles vous seront d’une aide précieuse afin de mettre en forme divers éléments de vos
pages tels que des tableaux, du texte ou des calques. Parfois, il arrive que les feuilles de
style portent le nom de « feuilles de style en cascade » ou CSS (Cascading Style Sheets).
Créer une feuille de style interne
Les feuilles de style internes sont enregistrées dans une page Web et elles peuvent être
appliquées uniquement à la page dans laquelle elles sont incorporées.
Pour créer une feuille de style interne :
1. Dans l’onglet Styles CSS du panneau Création, cliquez sur le bouton Nouveau
style CSS.
2. La boîte de dialogue Nouveau style CSS apparaît. Attribuez ensuite un nom à
votre nouveau style (sans caractère ni symbole spécial).
— Macromedia Dreamweaver MX 2004 — 5
3. Sous Définir dans, assurez-vous que Seulement ce document est coché et cliquez
sur Ok.
4. La boîte de dialogue Définition de style apparaît. Elle vous permet alors de régler
vos paramètres.
5. Afin de visualiser les définitions du style que vous venez de créer, vous n’avez
qu’à double-cliquer sur le style dans le panneau Styles CSS. Le panneau Règle
s’affiche ensuite et vous pouvez apercevoir les définitions du style.
Appliquer un style
Pour appliquer le style que vous venez de créer, tapez un mot sur la page. Ensuite, dans
l’Inspecteur de propriétés, déroulez la liste Style et choisissez un style.
— Macromedia Dreamweaver MX 2004 — 6
Créer une feuille de style externe
Les feuilles de style externes sont stockées dans des fichiers spécifiques, ce qui vous
permet de l’appliquer à différentes pages.
Pour créer une feuille de style externe :
1. Dans l’onglet Styles CSS, cliquez sur le bouton Nouveau style CSS.
2. La boîte de dialogue Nouveau style CSS apparaît. Attribuez ensuite un nom à
votre nouveau style (sans caractère ni symbole spécial).
3. Sous Définir dans, choisissez Nouveau fichier feuille de style et cliquez sur Ok.
4. La boîte de dialogue Enregistrer le fichier feuille de style sous s’affiche.
Choisissez l’endroit où vous désirez enregistrer votre style (il est important que
votre site local soit défini préalablement et que vous enregistriez votre feuille de
style dans ce dossier local afin qu’il fonctionne correctement). Attribuez ensuite
un nom à votre style. Cliquez sur Ok.
5. La boîte de dialogue Définition de style apparaît. Elle vous permet alors de régler
vos paramètres.
6. Lorsque votre style est défini, il s’affiche ensuite dans les panneaux Création,
Règle et Fichiers.
— Macromedia Dreamweaver MX 2004 — 7
Créer un lien vers une feuille de style externe
Pour attacher une feuille de style externe à un site :
1. Dans l’onglet Styles CSS, cliquez sur le bouton Attacher une feuille de style.
2. La boîte de dialogue Attacher une feuille de style externe s’affiche. Pour l’option
Ajouter sous, sélectionnez Lien.
3. Pour rechercher la feuille de style que vous désirez lier, cliquez sur Parcourir.
— Macromedia Dreamweaver MX 2004 — 8
Créer un formulaire
L’ajout d’un formulaire sert, entre autres, à créer des sondages ou de permettre à
l’internaute de vous écrire directement par le biais de votre site Internet.
Pour ce faire, allez dans Insertion / Formulaire / Formulaire. Il se crée alors une boîte
pointillée rouge dans laquelle vous devrez entrer un champ de texte en passant par le
même menu. Dans la fenêtre des propriétés, nommez votre formulaire et dans la section
Action, entrez le code mailto:[email protected] qui indique où envoyer les
informations.
Champ de texte
Sélectionnez la petite case (le champ de texte) qui vient d’apparaître dans le formulaire.
Dans la fenêtre des propriétés, nommez votre champ de texte et entrez les valeurs
voulues.
Val. init. : Indique la valeur par défaut qui s’affichera à l’ouverture de la page.
Larg. de caract. : Indique la largeur de la boîte en nombre de caractères.
Nb max. de caract. : Indique le nombre maximal de caractères que l’internaute peut
entrer. (Pour éviter que quelqu’un vous écrive un texte de dix pages lorsqu’il ne doit
écrire qu’un mot.)
Indications
Vous devez écrire dans le formulaire, avant ou après le champ de texte, une phrase
d’indication pour l’internaute. Par exemple :
Bouton
C’est bien beau de créer un formulaire, mais il sera inutile sans le bouton d’envoi. Pour
l’insérer dans le formulaire, passez par Insertion / Formulaire / Bouton. Dans la fenêtre
des propriétés, dans la section Étiquette, inscrivez ce qui doit apparaître sur le bouton
(Soumettre, Envoyer, Rechercher,Go…). Dans Action, cochez Envoyer le formulaire.
— Macromedia Dreamweaver MX 2004 — 9
Vous pouvez aussi créer un bouton Réinitialiser. Il faudra alors cocher l’action Rétablir
le formulaire.
Insérer un son
Afin d’agrémenter votre site Web, vous pouvez insérer une musique d’arrière-plan. Pour
ce faire :
1. Dans le menu Commun de la barre Insérer, cliquez sur le bouton Support, puis sur
Plug-in.
2. Dans la boîte de dialogue Sélectionner un fichier, sélectionnez votre fichier son.
— Macromedia Dreamweaver MX 2004 — 10
Note
Vous pouvez en tout temps modifier les propriétés de votre fichier en mode Code ou en
passant par l’Inspecteur de propriétés. Les options intéressantes à modifier dans le code
sont loop, hidden et autostart.
Insérer un fichier Flash
Dans la suite Macromedia, vous pouvez y retrouver le logiciel Flash, qui vous permet de
créer des animations.
Afin d’insérer un fichier Flash, vous devez :
1. Activer le menu Commun de la barre Insérer, puis cliquer sur le bouton Support.
Choisir ensuite Flash.
— Macromedia Dreamweaver MX 2004 — 11
2. La boîte de dialogue Sélectionner un fichier apparaît. Cliquer ensuite sur le fichier
Flash désiré, puis sur OK.
3. Pour exécuter votre animation, une fois qu’elle a été insérée dans votre page Web,
cliquer sur le fichier Flash (assurez-vous d’être en mode Création). Ensuite, dans
l’Inspecteur des propriétés, cliquer sur Lire. Pour modifier l’affichage et la
lecture du fichier, cliquer sur Paramètres.
Note
Veuillez noter que pour insérer une animation Flash, le fichier doit avoir l’extension
.SWF. En effet, le fichier .SWF est une version compressée du fichier .FLA, qui est en
fait le fichier source d’un projet Flash. Il ne peut qu’être ouvert que dans Flash.
— Macromedia Dreamweaver MX 2004 — 12
Insérer un applet JAVA
Les applets JAVA sont de petites applications entièrement autonomes et compilées que
l’on peut insérer dans n’importe quel site, à condition d’avoir le fichier .class nécessaire à
leur bon fonctionnement.
Ce qu’il y a de bien avec les applets JAVA, c’est que vous n’avez pas besoin de savoir
programmer pour les utiliser. Également, ces applications sont assez légères en terme de
poids de fichier. Par contre, elles s’alourdissent facilement par les nombreuses images
qu’on leur associe.
On peut retrouver une multitude d’applets sur Internet pour autant de fonctions, mais les
deux utilisations les plus fréquentes dans une page Web sont les effets graphiques et les
menus.
Comment se procurer des applets?
1. En achetant de petits programmes qui contiennent un certain nombre d’applets et
une interface de configuration de ces applets.
2. En allant télécharger gratuitement des applets sur des sites qui en proposent.
3. En prenant directement des applets dans certains sites n’ayant pas de fichier
index.html dans leur répertoire.
Comment les utiliser dans une page Web?
Téléchargez le fichier .class, le petit programme qui sert à l’exécution, dans le répertoire
où se trouvent toutes les pages de votre site Web. Lorsque vous mettrez votre site en
ligne, n’oubliez pas de le télécharger sur le serveur!
Le texte appelant et paramétrant l’applet commence toujours par la balise ouvrante
<APPLET> et se termine par la balise fermante </APPLET>.
Le contenu de chaque applet peut varier en fonction de sa complexité, du nombre
d'images qu'il utilise, s'il comporte des liens hypertextes ou des paramètres permettant le
réglage de la vitesse. En plus des balises, on retrouvera toujours certains éléments comme
la largeur (width), la hauteur (height) et les noms des fichiers utilisés. Vous pouvez
visualiser et configurer ces codes en passant en mode Code.
— Macromedia Dreamweaver MX 2004 — 13
Comment insérer un applet?
1. Dans la fenêtre de document, placez le point d’insertion à l’endroit où vous
souhaitez insérer l’applet.
2. Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche de défilement
du bouton Support et sélectionnez l’icône Applet.
3. Dans la boîte de dialogue Sélectionner un fichier, sélectionnez votre fichier qui
contient votre applet JAVA (votre fichier .class).
— Macromedia Dreamweaver MX 2004 — 14
4. Copiez le code de configuration de l’applet dans le code HTML de votre page
Web. Ce code est habituellement fourni sur la page d’où provient l’applet.
5. Vous pouvez ensuite paramétrer chaque élément de l’applet en cliquant sur
Paramètres dans l’Inspecteur de Propriétés ou tout simplement en modifiant les
codes de l’applet directement dans la vue Codes.
Voici quelques liens pour vous procurer gratuitement des applets JAVA :
http://javaboutique.internet.com/MShow/
http://anfyteam.com/anj/index.html
http://www.scriptzone-fr.com/index.php3
http://www.groovyjava.com/
— Macromedia Dreamweaver MX 2004 —