Carrefour de l information Université de Sherbrooke. Dreamweaver MX 2004 Deuxième partie Savoir améliorer ses sites Web

Transcription

1 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

2 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

3 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.

4 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.

5 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.

6 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).

7 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.

8 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.

9 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.

10 8 Créer un formulaire L a jout 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:votreadresse@x.com 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.

11 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.

12 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. 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 : Insérer un fichier Flash 1. Activer le menu Commun de la barre Insérer, puis cliquer sur le bouton Choisir ensuite Flash. Support.

13 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.

14 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? En achetant de petits programmes qui contiennent un certain nombre d applets et une interface de configuration de ces applets. En allant télécharger gratuitement des applets sur des sites qui en proposent. 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.

15 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).

16 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 :