Ajout d'éléments structurels et de liens

Bienvenue dans la troisième partie de ce tutoriel sur l'élaboration d'un site web simple en responsive design dans Dreamweaver CC 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.

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 <div> 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+/ (Mac OS). Ce panneau doit être similaire à celui présenté en Figure 2.

Certains des éléments du panneau DOM peuvent être réduits. Vous pouvez les développer en cliquant sur le triangle situé à gauche de l'élément. Les éléments imbriqués dans un autre élément sont indentés à droite. Par exemple, l'élément h1 est imbriqué dans la balise div avec l'ID wrapper, et les éléments li sont imbriqués dans l'élément ul.

Les éléments imbriqués dans un autre élément sont appelés des éléments enfants ou des enfants. L'élément extérieur est appelé le parent. Les éléments situés sur le même niveau sont appelés des frères. Le panneau DOM affiche donc la structure de la page comme un arbre généalogique. Pour continuer avec cette analogie, les éléments imbriqués sont appelés des descendants des éléments extérieurs, qui sont eux-mêmes parfois appelés des ancêtres.

2. 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 CC 2015.2. Les instructions fournies dans cette section ne s'appliquent pas aux versions plus anciennes du logiciel.

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

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



Laissez le champ modifiable de droite vide. C'est ici que vous pouvez spécifier un ID ou une classe pour l'élément. Vous n'avez pas besoin de le faire pour le moment.

Appuyez deux fois sur la touche Entrée/Retour pour confirmer la modification. Les éléments sélectionnés sont maintenant imbriqués dans un élément <header>.

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

6. Sélectionnez Entourer de balises et saisissez nav dans le champ de gauche. Laissez le champ de droite vide.
   
   
7. 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é.
   
   
8. 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 <div> avec l’ID hero.



Cette fois-ci, Dreamweaver ne crée pas automatiquement de sélecteur dans la feuille de style pour l'ID. Ce n'est que lorsque vous utilisez l'affichage des éléments pour attribuer un ID ou une classe à un élément qu'un sélecteur est automatiquement créé.

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



Enveloppez ensuite l'élément h2 suivant et les deux paragraphes qui suivent dans un élément en saisissant aside dans le champ de gauche.

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

Lorsque vous avez terminé, le panneau DOM doit se présenter comme celui illustré en Figure 6 (le contenu de la balise ul a été réduit).

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

12. 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 <div> avec l’ID hero entre les éléments <header> et <main>. 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 <header>, <nav>, <main>, <aside> et <footer> n'ont pas de styles inhérents. Ce ne sont que des éléments de regroupement. Toutefois, leurs noms décrivent les rôles qu'ils jouent sur la page.

Les liens — ou hyperliens, pour les appeler correctement — 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).

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

Sélectionnez le fichier index.html à la racine du site Bayside (en cas de doute, cliquez sur le bouton Racine du site), puis cliquez sur OK (Windows) ou Ouvrir (Mac OS). Cliquez ensuite en dehors du cadre orange pour quitter le mode de modification. Le mot Home est maintenant bleu et souligné, ce qui indique qu'il s'agit d'un lien.

S'il peut sembler superflu d'utiliser la boîte de dialogue Sélectionner un fichier plutôt que de saisir directement le nom du fichier, cette technique garantit que le chemin vers le fichier cible est correctement orthographié et formaté.

4. Répétez l'étape précédente pour la puce Sights, et créez un lien vers la page sights.html.
   
   
5. Il n'y a pas de page pour les trois puces restantes. Saisissez # dans le champ de lien pour créer des liens fictifs.
   
   
6. 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/.
   
   
7. 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.

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 (Mac OS) 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).

3. Ouvrez le fichier sights.html dans la fenêtre Document en double-cliquant sur son nom dans le panneau Fichiers.
   
   
4. 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.

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



Cliquez dans le champ de droite, saisissez #wrapper et appuyez sur la touche Entrée/Retour pour valider la modification.

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

Maintenant que la structure HTML est en place, vous pouvez ajouter le contenu principal de la deuxième page. Les éléments <main> et <aside> contiennent du texte de substitution. Pour vous assurer que le contenu d'un fichier externe est collé à l'emplacement approprié, vous devez d'abord formater le texte de substitution.

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

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

Cette étape est nécessaire, car le contenu collé à partir d'un fichier externe est ajouté après la sélection active au même niveau de la hiérarchie HTML.

Le paragraphe étant sélectionné en mode En direct, collez le texte copié dans le document externe ; choisissez l'option Collage spécial si vous collez du contenu au format RTF, puis utilisez l'inspecteur Propriétés rapide pour convertir le premier paragraphe en titre.

4. Une fois le nouveau contenu ajouté, sélectionnez le paragraphe du texte de substitution et supprimez-le.
   
   
5. 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.
   
   
6. 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.

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 dans la Partie 4 : changement de police et création de styles basiques.