ARTICLE DU TUTORIEL

Avancé

60 min

Ajout d'éléments structurels et de liens

Dans la troisième partie de ce tutoriel, vous apprendrez à finaliser la structure de la page avec les balises HTML appropriées pour la future mise en forme, et à ajouter des liens vers la deuxième page et des sites web externes.

Introduction

Bienvenue dans la troisième partie de ce tutoriel sur l'élaboration d'un site web simple en responsive design dans Dreamweaver 2015. Dans cette partie, vous allez ajouter des éléments structurels HTML5 à la page pour préparer la mise en forme des différentes parties. Vous ajouterez également des liens vers la deuxième page et des sites web externes. Enfin, vous incorporerez du contenu sur la deuxième page, qui est actuellement vide.

Remarque : Internet Explorer 8 et d'autres anciens navigateurs ne reconnaissant pas les éléments HTML5, le projet finalisé ne s'affichera pas correctement dans ces systèmes. La décision de ne pas gérer les anciens navigateurs a été prise pour éviter de compliquer inutilement ce tutoriel. Si vous devez prendre en charge d'anciens navigateurs, demandez conseil sur le forum d'assistance Dreamweaver .

Ajout d'éléments structurels via le panneau DOM

Bien que l'ensemble du contenu ait été inséré et mis en forme, vous devez ajouter plusieurs autres balises HTML pour donner une structure logique à la page d'accueil. Ces balises serviront de conteneurs pour les différentes parties de la page, ce qui vous permettra de les mettre en forme séparément.

La Figure 1 montre comment la page sera structurée. L'en-tête et le pied de page s'étendront systématiquement sur toute la largeur de l'élément

wrapper. Sur les résolutions d'écran élevées, la plupart du contenu de la page s'affichera sur deux colonnes. Toutefois, sur les petits écrans, le contenu de la colonne de droite passera sous celui de la colonne de gauche.

Vous utiliserez le panneau DOM pour ajouter cette structure à la page. DOM est l'acronyme de Document Object Model (modèle d'objet de document). Il s'agit en quelque sorte d'une feuille de route permettant au navigateur d'identifier les différentes parties de la page. Si vous débutez dans le développement web ou si vous n'avez jamais exploré le code HTML de manière approfondie, le panneau DOM pourra vous sembler complexe de prime abord. Toutefois, il s'agit d'un outil très efficace pour examiner et contrôler la structure d'une page web.

  1. Le fichier index.html étant ouvert dans la fenêtre Document, examinez le panneau DOM. Par défaut, il occupe la moitié inférieure du groupe de panneaux dans la partie droite de l'espace de travail Création. Si nécessaire, cliquez sur l'onglet DOM pour le faire passer au premier plan. Vous pouvez également l'ouvrir en choisissant Fenêtre > DOM ou en utilisant le raccourci clavier Ctrl+/ (Windows) ou Cmd+/ (macOS). Ce panneau doit être similaire à celui présenté en Figure 2.

  1. Dans le panneau DOM, sélectionnez l'élément h1 . Maintenez ensuite la touche Maj. enfoncée pour sélectionner également l'élément ul . Les éléments sélectionnés doivent être mis en évidence en bleu vif. Si l'élément ul est développé, les éléments li imbriqués doivent également être mis en évidence dans un bleu plus clair (voir Figure 3). Cela indique que l'étape suivante affectera les éléments li enfants et l'élément ul parent.

Remarque : la possibilité de sélectionner plusieurs éléments dans le panneau DOM est une nouveauté de Dreamweaver 2015.2. Les instructions fournies dans cette section ne s’appliquent pas aux versions plus anciennes de l’application.

  1. Cliquez sur le signe plus (+) à gauche de l'élément ul , et sélectionnez Entourer de balises, comme illustré en Figure 4.

  1. Une paire de champs modifiables s'ouvre au-dessus de l'élément h1 . La balise suggérée par défaut est div . Remplacez-la en saisissant header dans le champ de gauche. Dès le début de la saisie, des indicateurs de code apparaissent. Vous pouvez sélectionner « header » à l'aide des touches fléchées ou de la souris.

  2. Sélectionnez l'élément ul dans le panneau DOM et cliquez sur le signe plus (+) à gauche. Cette fois-ci, d'autres options vous sont proposées (voir Figure 5), car un seul élément (et ses enfants) a été sélectionné.

  1. Sélectionnez Entourer de balises et saisissez nav dans le champ de gauche. Laissez le champ de droite vide.

  2. Sélectionnez l'élément p qui se trouve juste après l'élément ul . Vous pouvez vérifier que vous avez sélectionné l'élément correct en regardant la fenêtre du mode En direct ou Code. Le paragraphe qui commence par « Bayside Beat keeps… » doit être sélectionné.

  3. Cliquez sur le signe plus (+) et sélectionnez Entourer de balises. Acceptez la balise div comme valeur suggérée dans le champ de gauche, puis saisissez #hero dans le champ de droite pour envelopper le paragraphe dans une balise

    avec l’ID hero.

  4. En suivant la même technique, enveloppez le premier élément h2 et les trois éléments p suivants dans un élément HTML en saisissant main dans le champ de gauche.

  5. Enfin, enveloppez le dernier paragraphe dans un élément en saisissant footer dans le champ de gauche.

  1. Vérifiez que votre structure est correcte en utilisant les triangles pour développer les éléments imbriqués. Le panneau DOM doit maintenant ressembler à celui illustré en Figure 7.

  1. Enregistrez le fichier index.html.

La structure du panneau DOM correspond maintenant au modèle illustré en Figure 1 au début de cette section, avec toutefois un ajout, à savoir une balise

avec l’ID hero entre les éléments
et
. Cette nouvelle balise sera uniquement utilisée sur la première page pour accueillir une grande image d'en-tête du Golden Gate Bridge ainsi qu'un paragraphe succint.

Bien que cette structure HTML puisse sembler peu attrayante, il est essentiel d'établir une base solide pour la mise en forme d'une page. En vous assurant que les éléments sont correctement imbriqués dans les éléments parents, vous pourrez vous appuyer sur un groupe cohérent pour mettre en forme chaque partie de la page.

Les éléments

,

Création de liens

Les liens, ou hyperliens plus exactement, contribuent à rendre les pages web dynamiques. Vous pouvez établir des liens avec différentes parties d'un même site web ou d'autres sites. Dans cette section, vous allez convertir la liste à puces en liens internes et ajouter des liens externes dans le contenu principal.

  1. Sélectionnez la première puce (Home) et double-cliquez sur le texte pour passer en mode de modification.

  2. Lorsque vous sélectionnez du texte en mode de modification, trois petites icônes apparaissent en haut à gauche du texte. Vérifiez que le mot complet est sélectionné, puis cliquez sur l'icône de lien pour accéder au champ permettant de saisir un lien (voir Figure 8).

  1. Bien que vous puissiez saisir le lien directement dans le champ, il est recommandé de cliquer sur l'icône de dossier à droite pour ouvrir la boîte de dialogue Sélectionner un fichier.

  2. Répétez l'étape précédente pour la puce Sights, et créez un lien vers la page sights.html.

  3. Il n'y a pas de page pour les trois puces restantes. Saisissez # dans le champ de lien pour créer des liens fictifs.

  4. Double-cliquez sur le premier paragraphe après « Riding the Cable Cars » et sélectionnez « Fisherman's Wharf ». Vous allez créer un lien vers un site web externe. Dans le champ de lien, saisissez l'URL complète suivante : http://www.fishermanswharf.org/ .

  5. Créez des liens externes dans le premier paragraphe après « Cable Car Trips » pour « Muni Passport » et « BART subway system ». Vous trouverez les URL dans les fichiers index.docx et index.rtf qui se trouvent dans le dossier content des fichiers d'exemple.

Une erreur courante lors de la création d'un lien vers un site externe est d'omettre http:// ou https:// au début de l'URL. Le cas échéant, le navigateur traite le lien comme un lien interne et recherche la page dans votre propre site. Le moyen le plus fiable de créer un lien externe est de copier l'URL dans la barre d'adresse d'un navigateur et de la coller dans le champ de lien de Dreamweaver.

Copie et ajout d'éléments dans la deuxième page à partir du panneau DOM

Maintenant que le texte et les liens ont été ajoutés dans la première page, vous allez pouvoir travailler sur la deuxième page. Le panneau DOM simplifie la copie des éléments communs et la création de la structure de la page.

  1. Enregistrez le fichier index.html, si ce n'est pas déjà fait, puis maintenez la touche Ctrl (Windows) ou Cmd (macOS) enfoncée et sélectionnez les éléments header et footer dans le panneau DOM. Les éléments imbriqués dans les balises header et footer sont automatiquement sélectionnés. Assurez-vous toutefois qu'aucun autre élément ne l'est.

  2. Cliquez avec le bouton droit sur l'un des éléments sélectionnés, et choisissez Copier dans le menu contextuel (voir Figure 9).

  1. Ouvrez le fichier sights.html dans la fenêtre Document en double-cliquant sur son nom dans le panneau Fichiers.

  2. Avec sights.html comme document actif, cliquez sur body avec le bouton droit et sélectionnez Coller en tant qu'enfant (voir Figure 10). Les éléments copiés sont alors imbriqués dans la balise de la deuxième page.

  1. Sélectionnez les éléments header et footer (mais pas l'élément body), cliquez sur le signe plus (+), puis sélectionnez Entourer de balises. Les éléments sélectionnés sont alors enveloppés dans une balise div , et deux champs modifiables s'ouvrent dans le panneau DOM.

  2. Sélectionnez header, cliquez sur le signe plus (+) et sélectionnez Insérer après. Dans le champ de gauche, remplacez div par main et appuyez deux fois sur la touche Entrée/Retour pour valider la modification.

  3. Sélectionnez l'élément main que vous venez d'insérer, cliquez sur le signe plus (+) et sélectionnez Insérer après. Remplacez le nom de l'élément par aside .

La structure HTML de la deuxième page est maintenant terminée.

Ajout du contenu principal dans les éléments vides

Maintenant que la structure HTML est en place, vous pouvez ajouter le contenu principal de la deuxième page. Les éléments

et

  1. En mode En direct, cliquez dans le texte de substitution de l'élément, puis sélectionnez Paragraphe dans le menu Format de l'inspecteur Propriétés (voir Figure 11).

  1. Ouvrez le fichier sights.docx dans le dossier content. Utilisez le fichier sights.rtf si vous n'avez pas accès à Microsoft Word, puis copiez le premier titre et les six paragraphes suivants dans le Presse-papiers.

  2. Revenez dans Dreamweaver. Vérifiez que le paragraphe formaté à l'étape 1 est toujours sélectionné. L'affichage des éléments doit indiquer p , et non main (voir Figure 12).

  1. Une fois le nouveau contenu ajouté, sélectionnez le paragraphe du texte de substitution et supprimez-le.

  2. En suivant la même technique, copiez et collez le texte restant du fichier sights.docx ou sights.rtf (de « Tourist Information » à « on a Segway ») dans l'élément. Si vous utilisez la version RTF, formatez « Tourist Information » et « Sightseeing Tours » comme des titres.

  3. Enregistrez le fichier sights.html.

Le formatage du texte de substitution et sa suppression sont nécessaires, car Dreamweaver colle le contenu d'un fichier externe en tant que frères de l'élément sélectionné. Si vous ne le faites pas, les titres et paragraphes seront collés après l'élément en question au lieu d'être imbriqués à l'intérieur. Dreamweaver affiche l'assistant de position uniquement lorsque vous utilisez le panneau ou le menu Insertion.

Ajout de liens dans la deuxième page

Pour finaliser le contenu du fichier sights.html, vous devez créer quelques liens dans le texte. Vous allez utiliser les URL fournies dans les fichiers sights.docx et sights.rtf pour créer des liens vers des sites externes. Pour mieux comprendre, examinez le fichier sights.html du dossier part3.

Félicitations si vous avez tenu bon jusqu'ici ! Vous avez maintenant deux pages parfaitement fonctionnelles d'un site web. Elles ne sont certes pas très attrayantes, mais elles vont commencer à prendre forme.


Contributeurs

David Powers

22 juillet 2022

Essayez ces tutoriels avec Dreamweaver

Créez des pages web modernes en responsive design.