Dans la deuxième partie de ce tutoriel, vous apprendrez à configurer une page web pour ajouter du texte et le mettre en forme, à saisir du contenu directement en mode En direct et à copier celui d'un document existant.
5496-create-first-website_1408x792

Remarque :

Les téléchargements incluent l'ensemble des Bibliothèques Creative Cloud et des fichiers de projet pour ce tutoriel. Vous pouvez poursuivre avec le fichier de démarrage de la première partie ou accéder au dossier approprié et utiliser le fichier correspondant à chaque section.

Introduction

Bienvenue dans la deuxième partie de ce tutoriel sur l'élaboration d'un site web simple en responsive design dans Dreamweaver CC 2015. Dans la première partie, vous avez configuré un site et créé deux pages web qui, pour l'instant, ne comportent qu'un titre. Dans cette partie, vous allez ajouter le texte de la page d'accueil du site, qui correspond au fichier index.html. Vous saisirez tout d'abord du texte dans le mode de modification de la fenêtre En direct, puis vous copierez et collerez du contenu mis en forme à partir de Microsoft Word. Si vous n'avez pas accès à Word, vous pourrez coller le contenu d'un fichier RTF et procéder à quelques ajustements mineurs.

Si vous êtes graphiste, vous vous demandez peut-être pourquoi nous ne commençons pas par définir l'aspect visuel de la page. La réponse est simple : le design est certes important, mais il n'a aucune influence sur les moteurs de recherche. Ces derniers examinent uniquement le texte, qui doit être pertinent et inclure des en-têtes informatifs ainsi que des liens fonctionnels.

Création d'un conteneur pour la page web et ajout d'une feuille de style

Avant d'ajouter du texte, il est recommandé de créer un conteneur pour la page entière. Vous pourrez ainsi centrer le contenu de la page sur les écrans de résolution élevée. Dans le même temps, vous allez lier une feuille de style externe à la page.

  1. Dans le site Bayside Responsive, ouvrez le fichier index.html, c'est-à-dire la page web que vous avez créée dans la première partie. Le cas échéant, fermez la page sights.html. Pour le moment, vous allez vous concentrer sur le fichier index.html, c'est-à-dire la page d'accueil du site.

Remarque : il est courant de nommer la page d'accueil d'un site index.html. En effet, la plupart des serveurs web assimilent le fichier index.html ou index.htm à la page par défaut d'un répertoire (dossier). Cette page s'affiche automatiquement lorsqu'aucun nom de fichier n'est ajouté à la fin de l'URL.

  1. S'il n'est pas déjà activé, passez en mode Fractionner en cliquant sur le bouton correspondant en haut à gauche de la fenêtre Document (voir Figure 1).
fig01
Figure 1. Le mode Fractionner permet d'inspecter le code sous-jacent.
  1. Cliquez dans la fenêtre du mode En direct pour accéder au corps de la page.

  2. Ouvrez le panneau Insertion en cliquant sur l'onglet correspondant dans le groupe de panneaux à droite de l'écran. Vérifiez que la catégorie HTML est sélectionnée dans le menu déroulant en haut à gauche du panneau (voir Figure 2).
fig02
Figure 2. Sélectionnez la catégorie HTML dans le panneau Insertion.

    Cette catégorie contient des options permettant d'insérer les éléments HTML les plus courants dans une page web.

  1. Cliquez sur Div (le premier élément en partant du haut). Un élément HTML accompagné d'un texte de substitution apparaît alors entre les balises du code HTML sous-jacent. Dans le mode En direct, le texte de substitution est entouré d'une bordure bleu clair. Cette dernière comporte un onglet indiquant le nom de l'élément HTML (voir Figure 3). Il s'agit de l'onglet d'affichage des éléments.
fig03
Figure 3. En mode En direct, l'élément <div> est identifié dans l'onglet d'affichage des éléments.
  1. L'élément <div> est un conteneur générique pouvant être mis en forme avec des styles CSS. Pour l'identifier, vous devez lui attribuer un ID. Étant donné que cet élément div englobera tout le contenu de la page, nous allons le nommer wrapper (« wrap » signifiant « envelopper » ou « englober »).

  2. Cliquez sur le signe + dans l'affichage des éléments. Un champ permettant d'ajouter une classe ou un ID à l'élément s'affiche. Saisissez #wrapper, puis appuyez sur la touche Tab ou Entrée/Retour pour appliquer le changement.

  3. Une fenêtre contextuelle en regard de l'affichage des éléments vous invite à sélectionner une source pour la règle de style de l'ID que vous venez de créer. Ouvrez le menu déroulant, puis sélectionnez Créer un nouveau fichier CSS (voir Figure 4).
fig04
Figure 4. Lors de l'ajout d'une classe ou d'un ID à un élément, Dreamweaver demande de spécifier l'emplacement de la règle de style.
  1. La boîte de dialogue Créer un nouveau fichier CSS s'affiche. Cliquez sur le bouton Parcourir à droite du champ Fichier/URL pour afficher la boîte de dialogue Enregistrer le fichier feuille de style sous.

  2. Créez un dossier nommé styles à la racine du site bayside, puis double-cliquez sur ce dossier.

  3. Dans le champ Nom du fichier, saisissez responsive.css, puis cliquez sur Enregistrer. Cliquez sur OK pour fermer la première boîte de dialogue . Si la fenêtre contextuelle de la Figure 4 est toujours affichée, cliquez en dehors pour la fermer.

  4. En mode Code, la balise <div> ouvrante possède à présent l'attribut id suivant :

    <div id="wrapper">Placez ici le contenu de la nouvelle balise div</div>

    L'attribut id dans le code HTML sous-jacent ne commence pas par un symbole dièse. L'interface graphique de Dreamweaver utilise la syntaxe CSS pour différencier les ID des classes. Dans CSS, un sélecteur ID commence par un dièse, alors qu'une classe commence par un point.

  5. Une nouvelle barre d'outils s'affiche en haut de la fenêtre Document, entre l'onglet indiquant le nom du fichier et le bouton Fractionner (voir Figure 5). Il s'agit de la barre d'outils des fichiers associés. Elle répertorie tous les fichiers liés à la page web active.
fig05
Figure 5. Les fichiers associés sont répertoriés sous l'onglet indiquant le nom du fichier.

Cliquez sur responsive.css dans la barre d'outils des fichiers associés. Dans la fenêtre Document, le mode Code affiche désormais le code de la feuille de style que vous venez de créer. Les lignes 2 et 3 contiennent une règle de style vide pour l'ID wrapper (voir Figure 6).

fig06
Figure 6. La barre d'outils des fichiers associés permet d'accéder à la feuille de style liée.

    Le sélecteur dans la feuille de style commence par un dièse, ce qui indique qu'il mettra en forme un élément possédant le même ID. Vous ajouterez les définitions de style pour l'élément <div> wrapper dans la quatrième partie de ce tutoriel, lorsque vous commencerez à mettre en forme le site.

  1. Cliquez sur Code source dans la barre d'outils des fichiers associés pour revenir au code HTML du fichier index.html.

  2. Examinez le code de la ligne 6. La feuille de style est liée à la page active de la façon suivante :

    <link href="styles/responsive.css" rel="stylesheet" type="text/css">

  3. Les deux noms de fichier sont suivis d'un astérisque, ce qui signifie qu'ils ont fait l'objet de modifications non enregistrées. Sélectionnez Fichier > Enregistrer tous les fichiers associés.

  4. Ouvrez le panneau Fichiers, puis développez le dossier styles pour vérifier qu'il contient bien la feuille responsive.css que vous venez de créer (voir Figure 7).
fig07
Figure 7. Vérifiez que la feuille de style a été créée dans le dossier approprié.

Il existe une autre méthode pour joindre une feuille de style à une page web. Vous apprendrez un peu plus tard à effectuer cette opération via CSS Designer, le panneau principal de Dreamweaver pour la mise en forme des pages web. 

Ajout de texte en mode En direct

Le mode En direct de Dreamweaver utilise le framework CEF (Chromium Embedded Framework), ce qui lui permet d'exécuter un véritable navigateur dans la fenêtre Document. Ce mode comporte également une surface modifiable dans laquelle vous pouvez réagencer le contenu ou en ajouter. Comme vous le verrez un peu plus tard, vous pouvez ajouter du texte et des images par simple glisser-déposer dans le mode En direct. En revanche, il ne s'agit pas d'un outil de mise en page graphique : vous ne pouvez pas utiliser ce mode pour redimensionner et repositionner les éléments en déplaçant leurs bordures. La disposition et le positionnement sont contrôlés par la syntaxe CSS.

La page paraîtra moins insipide dès que vous ajouterez des styles à la quatrième partie du tutoriel. En attendant, vous allez commencer par ajouter du texte en le saisissant directement dans le mode En direct.

  1. Vérifiez que le bouton Code source est sélectionné dans la barre d'outils des fichiers associés, puis cliquez sur le texte de substitution dans le mode En direct. Le point d'insertion (une barre verticale) doit s'afficher dans le texte en mode Code.

  2. Dans l'inspecteur Propriétés, cliquez sur le menu déroulant Format, puis sélectionnez En-tête 1 (voir Figure 8). Si vous ne voyez pas le menu Format, cliquez sur le bouton HTML en haut à gauche de l'inspecteur Propriétés.
fig08
Figure 8. Convertissez le texte de substitution en en-tête de niveau supérieur.
  1. Dans le mode En direct, le texte de substitution apparaît en grands caractères et en gras, et l'affichage des éléments indique qu'il s'agit d'un élément <h1>, c'est-à-dire un en-tête de niveau supérieur.

  2. Dans le code sous-jacent, Dreamweaver a placé le texte de substitution à l'intérieur d'une paire de balises <h1> imbriquées dans l'élément <div> wrapper (voir Figure 9).

fig09
Figure 9. Le texte de substitution a été converti en élément <h1>.
  1. Vérifiez que l'en-tête <h1> est toujours sélectionné, puis double-cliquez sur le texte dans le mode En direct pour passer en mode de modification. La bordure bleue devient orange, et la fenêtre de code est grisée.

  2. Sélectionnez tout le texte de substitution, puis saisissez « Bayside Beat ». Cliquez en dehors du cadre orange pour quitter le mode de modification. Dans le mode Code, le texte placé entre les balises <h1> doit être identique à celui que vous venez de saisir.

  3. Faites attention lorsque vous remplacez tout le texte de substitution en mode de modification, car Dreamweaver pourrait ajouter la chaîne &nbsp; juste après la balise HTML ouvrante ou avant la balise fermante. Cette entité de caractère HTML correspond à un espace insécable. Dreamweaver l'ajoute, car les balises ouvrante et fermante doivent englober du contenu. Si vous voyez la chaîne &nbsp;, passez en mode Code, puis supprimez-la manuellement. La présence d'une entité de caractère d'espace insécable dans le code sous-jacent peut provoquer des problèmes de mise en page. Il est donc recommandé de garder un œil sur le balisage sous-jacent, même si vous ne souhaitez pas rédiger le code manuellement.

  4. Vous allez maintenant ajouter une liste à puces que vous convertirez ultérieurement en menu de navigation. En langage HTML, les listes à puces sont des listes non numérotées entourées de balises <ul>. Pour créer ce type de liste en mode En direct, vous devez d'abord créer un paragraphe.

  5. Vérifiez que l'en-tête <h1> est toujours sélectionné dans le mode En direct, puis dans la catégorie HTML du panneau Insertion, sélectionnez Paragraphe (le troisième élément en partant du haut).

  6. L'assistant de position (voir Figure 10) s'affiche. Il vous permet de choisir l'emplacement du nouvel élément. Le paragraphe devant être placé après l'en-tête, cliquez sur Après.
fig10
Figure 10. L'assistant de position vous aide à insérer le nouvel élément avec précision.
  1. Dreamweaver insère le nouveau paragraphe et le texte de substitution qui l'accompagne juste après l'en-tête principal.

  2. Vérifiez que le paragraphe est toujours sélectionné dans le mode En direct, puis convertissez-le en liste à puces en cliquant sur l'icône Liste simple dans l'inspecteur Propriétés (voir Figure 11).
fig11
Figure 11. Convertissez le paragraphe en liste à puces.
  1. Vérifiez que l'apparence de votre page est identique à celle illustrée en Figure 12. Dans le mode En direct, le texte de substitution est précédé d'une puce, et l'affichage des éléments signale qu'un élément <li> (list item, élément de liste) est sélectionné. Dans le code HTML sous-jacent, l'élément <li> unique est imbriqué dans une paire de balises <ul>.
fig12
Figure 12. Le paragraphe a été converti en liste non numérotée à un élément unique.
  1. Vérifiez que l'élément de la liste est toujours sélectionné dans le mode En direct, puis double-cliquez sur le texte de substitution pour passer en mode de modification. Sélectionnez tout le texte, puis remplacez-le par Home.

  2. Toujours en mode de modification, appuyez sur Entrée/Retour, puis saisissez Sights.

  3. Répétez trois fois l'opération pour ajouter les lignes Dining, Events et Lodging dans la liste à puces.

  4. Cliquez en dehors du cadre orange pour quitter le mode de modification. Votre page doit à présent être identique à celle illustrée en Figure 13.
fig13
Figure 13. La liste à puces sera convertie ultérieurement en menu de navigation.
  1. Enregistrez le fichier index.html.

Ajout de texte depuis Microsoft Word par copier-coller

Dreamweaver est un environnement de développement web, et non un programme de traitement de texte. La saisie d'une grande quantité de texte en mode En direct peut se révéler fastidieuse. En revanche, Dreamweaver peut convertir un document Microsoft Word dans un format HTML valide, tout en préservant les en-têtes, les paragraphes, les listes à puces et les listes numérotées, ainsi que les styles gras et italique.

La technique que vous allez appliquer est différente de l'enregistrement d'un document au format HTML dans Microsoft Word. Word ajoute une grande quantité de code propriétaire au HTML qu'il génère, mais Dreamweaver supprime tout ce qui est inutile lorsque vous copiez-collez du texte provenant d'un document Word. Vous obtenez ainsi une syntaxe HTML « propre ».

Pour ceux qui ne disposeraient pas de Microsoft Word, les fichiers d'exemple contiennent également le texte au format RTF. Des instructions d'utilisation des fichiers RTF sont fournies après cette section. Il est déconseillé d'utiliser Open Office ou Libre Office à la place de Word. Le collage de texte provenant d'un document au format OpenDocument ajoute du code superflu et difficile à supprimer.

  1. Dans le panneau Fichiers, développez le dossier content, puis double-cliquez sur le fichier index.docx pour l'ouvrir dans Microsoft Word.

  2. Sélectionnez tout le texte jusqu'à la fin de la mention de copyright, puis copiez-le dans le Presse-papiers.

  3. Dans Dreamweaver, vérifiez que la totalité de la liste non numérotée est sélectionnée dans le mode En direct. Pour cela, cliquez n'importe où dans la liste, puis sur ul dans le sélecteur de balises situé au bas de la fenêtre Document (voir Figure 14).
fig14
Figure 14. Le sélecteur de balises affiche l'emplacement de la sélection active dans la structure HTML.
  1. Sélectionnez Édition > Collage spécial ou utilisez le raccourci clavier Ctrl + Maj + V (Windows) ou Cmd + Maj + V (Mac OS). La boîte de dialogue Collage spécial s'affiche (voir Figure 15).
fig15
Figure 15. La boîte de dialogue Collage spécial permet de définir les éléments que doit copier Dreamweaver à partir de documents externes.
  1. Sélectionnez le troisième bouton radio, Texte structuré avec formatage de base (gras, italique), et vérifiez que la case à cocher Nettoyage des espaces inter-paragraphes dans Word est activée. Cliquez ensuite sur OK.

  2. Dreamweaver colle le texte après l'élément sélectionné (la liste non numérotée) et met en forme les paragraphes et en-têtes à l'aide des balises HTML appropriées.

Remarque : même si vous souhaitez conserver les couleurs et polices d'origine, il est fortement déconseillé d'utiliser l'option de formatage complet (le quatrième bouton radio). En effet, celle-ci entraînant la copie d'une quantité considérable de code propriétaire Microsoft dans la page HTML, il devient dès lors très compliqué de la mettre en forme avec CSS.

  1. Sélectionnez le paragraphe qui commence par « Bayside Beat keeps you (...) », en cliquant dans le texte en mode En direct. L'affichage des éléments indique qu'il s'agit d'un élément <p> (un paragraphe). Dans le mode Code, le texte est entouré d'une paire de balises <p>.

  2. Si après avoir collé le texte, l'affichage des éléments n'apparaît pas et aucune balise n'est présente dans le code sous-jacent, cela signifie que vous étiez en mode Code lorsque vous avez collé le texte issu du document Word. Dans ce cas, annulez l'opération en appuyant sur Ctrl + Z (Windows) ou Cmd + Z (Mac OS). Sélectionnez ensuite la liste non numérotée dans le mode En direct avant de coller le texte.

  3. Sélectionnez le premier en-tête, Ride the Cable Cars, en cliquant dans le texte. L'affichage des éléments indique qu'il s'agit d'un élément <h2> (en-tête de deuxième niveau). Dans le code sous-jacent, le texte est entouré de balises <h2> (voir Figure 16).
fig16
Figure 16. L'en-tête a été automatiquement mis en forme lors du collage depuis Word.

    Dans Word, le style Titre 2 était appliqué à l'en-tête, c'est pourquoi Dreamweaver a automatiquement appliqué la balise HTML équivalente.

  1. Cliquez dans le texte de la mention de copyright. Ce contenu doit correspondre au dernier paragraphe sur la page, et l'affichage des éléments doit indiquer qu'il s'agit d'un paragraphe, comme illustré en Figure 17.
fig17
Figure 17. L'affichage des éléments confirme que la mention de copyright est un paragraphe.
  1. Si l'affichage des éléments n'apparaît pas, ajustez la mise en forme en sélectionnant le texte de la mention de copyright dans le mode Code. Cliquez ensuite sur le menu déroulant Format dans l'inspecteur Propriétés, puis sélectionnez Paragraphe (voir Figure 18).
fig18
Figure 18. Il vous faudra peut-être convertir la dernière ligne de texte en paragraphe.

Cette opération peut s'avérer nécessaire, car Dreamweaver utilise le saut de ligne à la fin des paragraphes, titres et autres éléments de texte dans Word pour déterminer le type de balise HTML à utiliser. Lorsque vous sélectionnez du texte dans un document Word, votre sélection doit inclure la fin de la ligne. En général, un espace est présent après le dernier élément de texte, comme illustré en Figure 19.

fig19
Figure 19. Vous devez inclure l'espace en fin de ligne lorsque vous copiez du texte dans Microsoft Word.
  1. Enregistrez le fichier index.html.

Comme vous pouvez le constater, cette méthode est bien plus rapide que la saisie de texte en mode En direct. Dreamweaver mémorise les paramètres sélectionnés dans la boîte de dialogue Collage spécial. Par la suite, vous pourrez donc coller du contenu directement dans le mode En direct via le raccourci clavier Ctrl + V (Windows) ou Cmd + V (Mac OS). Avant de coller du texte dans le mode En direct, assurez-vous de sélectionner l'élément situé juste avant le nouveau contenu.

Si vous examinez le code HTML sous-jacent, vous remarquerez plusieurs instances de &rsquo;. Le texte du document Word utilise des apostrophes courbes que Dreamweaver a converties en entités de caractère HTML correspondant à des apostrophes droites.

Même si vous avez collé le texte à partir de Microsoft Word, il est recommandé de lire la section suivante, car elle explique comment utiliser l'affichage des éléments pour modifier la mise en forme d'un élément de texte.

Utilisation de l'inspecteur Propriétés rapide pour la mise en forme des éléments de texte

Si vous ne disposez ni de Microsoft Word, ni de Word Viewer, vous devrez copier et coller le texte à partir d'un fichier RTF, puis mettre en forme les en-têtes, car tout le contenu apparaîtra sous forme de paragraphes.

  1. Dans le panneau Fichiers, développez le dossier content, puis cliquez avec le bouton droit sur le fichier index.rtf. Sélectionnez Ouvrir avec > Parcourir dans le menu contextuel, puis choisissez un éditeur de texte approprié, par exemple TextEdit.

  2. Le texte est identique à celui du fichier index.docx, mais avec une ligne vierge supplémentaire après chaque paragraphe et titre. Ces lignes permettront à Dreamweaver de mettre en forme le texte sous forme de paragraphes.

  3. Sélectionnez tout le texte depuis le début du fichier jusqu'à la ligne suivant la mention de copyright, puis copiez-le dans le Presse-papiers.

  4. Dans Dreamweaver, vérifiez que la liste non numérotée est sélectionnée dans le mode En direct. Si avez des doutes concernant la marche à suivre, reportez-vous à l'étape 3 et à la Figure 14.

  5. Sélectionnez Édition > Collage spécial ou utilisez le raccourci clavier Ctrl + Maj + V (Windows) ou Cmd + Maj + V (Mac OS). La boîte de dialogue Collage spécial s'affiche. Comme le montre la Figure 20, les deux derniers boutons radio et la deuxième case à cocher sont grisés, car le texte à coller ne provient pas de Microsoft Word.
fig20
Figure 20. Certaines options sont grisées lorsque le texte à coller ne provient pas de Microsoft Word.

    Vérifiez que le deuxième bouton radio, Texte structuré (paragraphes, listes, tableaux, etc.) est bien sélectionné. Désactivez la case Conserver les sauts de ligne. Cliquez sur OK pour que le texte soit collé sous forme de paragraphes.

  1. Lors du collage du texte d'un fichier RTF, Dreamweaver ne reconnaît pas les en-têtes. Cliquez dans le paragraphe « Riding the Cable Cars ».

  2. Cliquez sur l'icône de sandwich à gauche de l'affichage des éléments pour accéder à l'inspecteur Propriétés rapide. Ouvrez sur le menu déroulant Format, puis sélectionnez h2 (voir Figure 21). Le paragraphe est converti en en-tête de deuxième niveau.

 

fig21
Figure 21. Vous pouvez mettre en forme des éléments de texte dans le mode En direct à l'aide de l'inspecteur Propriétés rapide.
  1. Répétez l'opération pour le deuxième titre, Cable Car Tips.

  2. Sélectionnez la mention de copyright au bas de la page pour vérifier qu'elle a bien été mise en forme en tant que paragraphe. Si nécessaire, ajustez la mise en forme en vous reportant à l'étape 9 de la section précédente.

Les opérations de copie et de collage de texte provenant d'un fichier RTF sont donc assez simples. Les points essentiels à retenir sont les suivants :

  • Les paragraphes et titres doivent être séparés par deux lignes vierges.

  • Vous devez copier la ligne vierge suivant le dernier paragraphe.

  • Vous devez toujours choisir Édition > Collage spécial ou utiliser le raccourci clavier Ctrl + Maj + V (Windows) ou Cmd + Maj + V (Mac OS), et désactiver la case Conserver les sauts de ligne. En effet, bien que Dreamweaver mémorise vos paramètres, l'utilisation du raccourci clavier Ctrl + V ou Cmd + V pour coller du texte d'un fichier RTF ajoute des sauts de ligne supplémentaires dans le code HTML.

  • Cliquez sur l'icône de sandwich dans l'affichage des éléments pour accéder à l'inspecteur Propriétés rapide et convertir les paragraphes en en-têtes HTML.

Pour aller plus loin

La page d'accueil du site Bayside Beat contient à présent du texte, mais elle est encore très insipide. Si vous la chargez dans un navigateur, vous constaterez que les paragraphes occupent toute la largeur de l'aire d'affichage. Vous pourrez contrôler l'affichage en utilisant CSS, mais vous devrez aussi ajouter d'autres éléments HTML pour diviser la page en groupes logiques pour la mise en forme. Vous verrez tout cela dans la suite du tutoriel, Partie 3 : ajout d'éléments structurels et de liens.

04/17/2018

Contributeurs : David PowersTom Alex Buch

Cette page vous a-t-elle été utile ?