Prise en main rapide

Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un site dans Dreamweaver ; créer une nouvelle page en utilisant une mise en forme CSS ; enregistrer un document ; modifier le titre de la page et changer les titres du texte ; insérer du texte à partir d un document externe ; ajouter des images de premier plan et d arrière-plan ; créer, modifier et sélectionner des styles CSS ; afficher votre page en mode Affichage en direct ou dans un navigateur. Cette leçon vous prendra environ 1 heure et 15 minutes. Avant de commencer, assurez-vous d avoir copié les fichiers pour la Leçon 4 sur votre disque dur, comme indiqué dans la section Guide de démarrage, au début de ce livre. Si vous commencez par cette leçon, utilisez la méthode décrite dans la sous-section Démarrage instantané de la section Guide de démarrage. 55

Définir un site Dreamweaver Les leçons de ce livre se déroulent à l intérieur d un site Dreamweaver. Dans Dreamweaver, vous devez travailler avec un site local stocké dans un dossier de votre disque dur. Lorsque vous serez prêt à publier votre site (voir Leçon 17, Publier son site sur le Web), vous placerez vos fichiers terminés sur un site distant, stocké sur l ordinateur de votre hébergeur Internet. Les structures de dossiers et les fichiers des deux sites sont, à peu de choses près, équivalentes. Pour commencer, configurez votre site local. 1 Lancez Dreamweaver CS5 s il n est pas déjà ouvert. 2 Choisissez Site > Nouveau site pour afficher la boîte de dialogue Configuration de site. Si vous avez utilisé l une des précédentes versions de Dreamweaver, vous remarquerez que la boîte de dialogue Configuration de site a été reconçue et simplifiée. Les vues Simple et Avancé sont oubliées. À présent, pour créer un site web dans Dreamweaver CS5, vous n avez qu à le nommer et à sélectionner le dossier de site local. 56 LEÇON 4 Prise en main rapide

3 Dans le champ Nom du site, tapez DW-CIB. Les noms des sites sont généralement liés à un projet ou à un client spécifique et apparaissent dans le panneau Fichiers. 4 À côté du champ Dossier local du site, cliquez sur l icône en forme de dossier ( ). Lorsque la boîte de dialogue Choisissez le dossier racine apparaît, naviguez jusqu au dossier DW-CIB contenant les fichiers que vous avez copiés depuis le CD-ROM d accompagnement et cliquez sur Sélectionner/Choisir. Vous pourriez cliquer sur Enregistrer et commencer à travailler sur votre nouveau site web, mais nous allons ajouter quelques éléments d information intéressants. 5 Cliquez sur la flèche ( ) à côté de la catégorie Paramètres avancés pour révéler les onglets de cette section. Sélectionnez la catégorie Infos locales. Si ce n est pas nécessaire en soi, il est de bon usage pour la gestion des sites de stocker les types de fichiers différents dans des dossiers séparés. Par exemple, de nombreux sites web utilisent des dossiers individuels pour les images, les PDF, les vidéos, etc. Dreamweaver facilite cette tâche en incluant une option pour un dossier images par défaut. Par la suite, quand vous insérerez des images depuis d autres emplacements de votre ordinateur, Dreamweaver utilisera ce réglage pour déplacer automatiquement les fichiers dans la structure du site. 6 À côté du champ Dossier des images par défaut, cliquez sur l icône du dossier ( ). Lorsque la boîte de dialogue apparaît, naviguez jusqu au dossier DW-CIB > images contenant les fichiers que vous avez copié depuis le CD d accompagnement et cliquez sur Sélectionner/Choisir. Vous avez entré toutes les informations requises pour commencer votre nouveau site. Dans les leçons ultérieures, vous ajouterez d autres informations afin de pouvoir charger des fichiers sur votre site distant et de tester vos pages web dynamiques. 7 Dans la boîte de dialogue Configuration de site, cliquez sur Enregistrer. La définition d un site est une étape initiale cruciale pour démarrer n importe quel projet dans Dreamweaver. C est l emplacement du dossier racine du site qui détermine les chemins de liaison et permet à de nombreuses options de niveau site de Dreamweaver de fonctionner, comme les opérations de Rechercher et remplacer sur le site entier. ADOBE DREAMWEAVER CS5 CLASSROOM IN A BOOK 57

Utiliser l écran de bienvenue L écran de bienvenue permet un accès rapide aux pages récemment ouvertes, permet de créer divers types de pages et offre une connexion directe à plusieurs sujets d aide importants. Il apparaît lorsque vous lancez le programme pour la première fois ou lorsque aucun document n est ouvert. Utilisons-le pour découvrir plusieurs moyens d ouvrir un document. 1 Dans la colonne Créer de l écran de bienvenue, cliquez sur HTML pour ouvrir une nouvelle page vide. 2 Choisissez Fichier > Fermer. L écran de bienvenue réapparaît. 3 Dans la section Ouvrir un élément récent de l écran de bienvenue, cliquez sur le bouton Ouvrir. Dreamweaver vous permet de naviguer dans votre système pour retrouver des fichiers à ouvrir. Cliquez sur Annuler. L écran de bienvenue présente une liste des fichiers récemment utilisés. Ces fichiers sont visibles à la figure précédente, mais votre installation n affichera peut-être encore aucun fichier utilisé à ce stade. Le choix d un fichier dans cette liste est une sorte de raccourci de la commande Fichier > Ouvrir lorsque vous souhaitez éditer une page existante. Vous ferez plusieurs fois appel à l écran de bienvenue dans ce livre. Lorsque vous aurez terminé les leçons, il se peut cependant que vous ne souhaitiez plus l utiliser. 58 LEÇON 4 Prise en main rapide

Dans ce cas, désactivez-le en cochant l option Ne plus afficher dans le coin inférieur gauche de la fenêtre. Vous pourrez au besoin le réactiver dans la catégorie Général des préférences. Sélectionner une mise en forme CSS Dreamweaver CS5 propose seize mises en forme CSS. Dans cet exercice, vous allez en sélectionner une et la modifier. Les mises en forme CSS sont soigneusement testées pour être conformes aux standards du Web et fonctionner avec les principaux navigateurs sans nécessiter de modification. Des choix fréquents à une, deux ou trois colonnes sont proposés, soit à largeur fixe définie en pixels, soit à largeur relative définie en pourcentages. 1 Choisissez Fichier > Nouveau. 2 Dans la première colonne de la boîte de dialogue Nouveau document, cliquez sur Page vierge. 3 Dans la colonne Type, sélectionnez HTML. Dreamweaver permet de créer une grande variété de types de pages. Le HTML est le type le plus couramment utilisé pour les pages web standard. 4 Dans la colonne Mise en forme, sélectionnez l option 1 colonne fixe, centrée, entête et pied de page. L aperçu de cette mise en forme affiche un symbole de cadenas ( ) pour indiquer que la largeur est fixée à un nombre défini de pixels. D autres mises en forme affichent un symbole de ressort pour signaler que la largeur de la page s étend ou se contracte avec la fenêtre du navigateur. 5 Conservez tous les autres réglages par défaut et cliquez sur Créer. Votre nouvelle page apparaît dans Dreamweaver sous la forme d un document avec du texte de remplissage et des couleurs par défaut. Il s agit de la fenêtre de document où vous ajoutez votre propre contenu et personnalisez l apparence de la page. ADOBE DREAMWEAVER CS5 CLASSROOM IN A BOOK 59

Enregistrer une page Une fois que votre page est créée, il est judicieux de l enregistrer immédiatement. 1 Choisissez Fichier > Enregistrer. Vous pouvez aussi appuyer sur Ctrl+S/Cmd+S. 2 Lorsque la boîte de dialogue Enregistrer sous apparaît, naviguez jusqu au dossier DW-CIB. Dans le champ Nom du fichier, tapez greennstart.htm ou greenstart. html. Le choix de l extension.htm ou.html est affaire de préférence personnelle. Les deux fonctionnent parfaitement sur le Web. Veillez simplement à rester constant (dans ce livre, nous utiliserons.html). 3 Cliquez sur Enregistrer. Modifier le titre de la page Comme nous l avons vu à la Leçon 2, Les bases du HTML, le titre de la page web s affiche dans la barre de titre du navigateur. Les titres de pages sont l un des éléments clés utilisés par les moteurs de recherche pour indexer et classer les sites web. Il est important de toujours modifier le titre de page par défaut de Dreamweaver (Document sans nom), afin de le remplacer par un titre qui décrit votre page web spécifique. 1 Si nécessaire, choisissez Fichier > Ouvrir > greenstart.html. 2 Cliquez sur le bouton Création pour observer la page en mode Création. 3 Dans le champ Titre de la barre d outils Document, sélectionnez le texte par défaut (Document sans nom). 4 Tapez Get a green start with Meridien GreenStart et appuyez sur Entrée. Changer les titres Les mises en page CSS de Dreamweaver sont remplies de titres, de texte et de couleurs d exemple. Les titres et le texte aident à visualiser la page sous une apparence proche de celle qui sera la sienne lorsque votre contenu final y aura été inséré. Le remplacement du texte de remplissage est très simple. 1 Double-cliquez sur le texte de remplissage (Instructions) pour le sélectionner. Tapez It s Easy Being Green with GreenStart pour le remplacer. 60 LEÇON 4 Prise en main rapide

Vous avez remplacé le texte, mais le format <h1> est conservé. 2 Choisissez Fichier > Enregistrer. Insérer du texte Le texte de paragraphe est aussi facile à mettre à jour que celui des titres. En plus de la saisie manuelle, Dreamweaver propose un moteur robuste pour insérer du texte copié depuis d autres sources, dont les programmes de la suite Office de Microsoft. 1 Cliquez sur le bouton Création pour afficher la page en mode Création. 2 Choisissez Fenêtre > Fichiers pour afficher le panneau Fichiers s il n est pas déjà visible. 3 Affichez le dossier lesson04. Cliquez sur le triangle ( ) à gauche du nom de fichier pour révéler son contenu. Double-cliquez sur easygreen.rtf pour l ouvrir. Dreamweaver ne peut pas ouvrir de fichier RTF, mais votre ordinateur sélectionne une application compatible, comme Word, WordPad ou TextEdit pour l ouvrir tout de même. Note : Dreamweaver propose un certain nombre de méthodes pour sélectionner du texte qui fonctionnent de manière analogue aux logiciels de traitement de texte, par exemple en cliquant et faisant glisser le curseur pour passer du texte en surbrillance, en doublecliquant sur un mot ou en triple-cliquant pour sélectionner un paragraphe entier. ADOBE DREAMWEAVER CS5 CLASSROOM IN A BOOK 61

Note : Lorsque vous collez du texte dans Dreamweaver, le résultat peut changer selon le programme d origine. La plupart des caractéristiques de mises en forme relatives aux polices sont ignorées, mais l application du gras et des italiques peut être respectée. Par exemple, Word transmet le gras et l italique à Dreamweaver. WordPad et TextEdit ne le font pas. 4 Lorsque le fichier s ouvre, sélectionnez tout le texte et appuyez sur Ctrl+C/Cmd+C pour le copier dans le presse-papiers. Ne fermez pas l application qui affiche easygreen.rtf. Vous remarquerez que le texte est mis en forme avec la police Times New Roman, en retrait, en gras et en vert. 5 Dans Dreamweaver, positionnez le curseur sous le titre It s Easy Being Green with GreenStart, au début du premier élément de paragraphe ; cliquez et faites glisser le curseur jusqu à la fin du texte dans la zone de contenu (afin que tous les titres et paragraphes de remplacement soient sélectionnés), mais ne sélectionnez pas le texte dans le pied de page. 6 Appuyez sur Ctrl+V/Cmd+V pour coller le texte depuis le presse-papiers. Avant de passer à l étape suivante, il est important de comprendre ce qui vient de se produire. Vous avez probablement remarqué que le texte collé a remplacé la sélection et a été automatiquement mis en forme comme un élément de paragraphe <p>. Bien que le texte lui-même ait été transposé avec succès, les retraits de paragraphe ne l ont pas été, ni la mise en forme des polices. Mais, en plus d ignorer les polices et la couleur, Dreamweaver a manqué quelque chose de plus important : les sauts de paragraphe. 7 Placez votre curseur à la fin du troisième paragraphe ( only a click away). Cliquez sur le bouton Code. Observez l élément qui apparaît à la fin du paragraphe. Il s avère que Dreamweaver n a pas complètement ignoré les sauts de paragraphe, mais a inséré, au lieu des balises <p>, des éléments de saut de ligne <br />. Vous devez savoir que Dreamweaver traduit les sauts de paragraphe uniques copiés depuis d autres programmes en sauts de ligne. L astuce pour produire de véritables éléments <p> consiste à insérer des sauts supplémentaires entre chacun des paragraphes d origine. 8 Revenez à l application qui affiche easygreen.rtf. 9 Placez le curseur à la fin de chaque paragraphe et appuyez sur Entrée pour insérer un deuxième saut de paragraphe. 62 LEÇON 4 Prise en main rapide

Dans Word et d autres programmes, vous pouvez automatiser le processus d insertion des sauts supplémentaires pour les documents plus longs en utilisant la commande Rechercher et remplacer afin de remplacer les sauts de paragraphe uniques par deux sauts d affilée. 10 Sélectionnez et copiez le texte dans easygreen.rtf. 11 Repassez à Dreamweaver. Cliquez sur le bouton Création. 12 Sélectionnez le texte incorrectement formaté dans la zone de contenu principale. Appuyez sur Ctrl+V/Cmd+V pour coller le contenu du presse-papiers. La différence entre l ancien et le nouveau texte est patente. Le nouveau texte affiche clairement un espace supplémentaire entre chaque paragraphe. 13 Sélectionnez l un des paragraphes collés à l instant. Cliquez sur le bouton Code. Observez les éléments de code au début et à la fin de chaque paragraphe. Le texte collé est à présent correctement structuré avec des balises <p> </p>. 14 Placez le curseur dans la zone de pied de page. Sélectionnez le texte de remplissage et tapez Copyright 2010 Meridien GreenStart, All rights reserved pour le remplacer. Le texte est remplacé lorsque vous tapez. 15 Appuyez sur Ctrl+S/Cmd+S pour enregistrer. Insérer des images L insertion d images et de graphiques dans Dreamweaver est un vrai jeu d enfant. Lorsque l image est intégrée dans la page, ses propriétés, comme son alignement, peuvent être ajustées à l aide de l inspecteur Propriétés ou à partir des CSS. Dans cet exercice, vous allez remplacer l espace réservé pour l image par une image de bannière et insérer une image en ligne dans le contenu du site. 1 Si nécessaire, choisissez Fichier > Ouvrir les fichiers récents > greenstart.html et cliquez sur le bouton Création pour afficher la page en mode Création. 2 Sélectionnez l espace réservé pour l image dans la section d en-tête de la page. Bien que ses dimensions soient indiquées dans le cadre, notez sa largeur et sa hauteur dans l inspecteur Propriétés. Si celui-ci n est pas visible, choisissez Fenêtre > Propriétés. ADOBE DREAMWEAVER CS5 CLASSROOM IN A BOOK 63