Formations

Feuille de style

La feuille de style glenan.css permet de créer des styles qui peuvent être facilement modifiés pour obtenir un formatage identique dans toutes les pages d'un site. Attention néanmoins à la feuille de style externe car les styles mis dans l'entête d'un document sont prioritaires. Par exemple : en modifiant les propriétés d'une page et en prenant d'autres couleurs d'avant et d'arrière plan, Dreamweaver MX 2004 génère un style CSS dans l'entête qu'il sera impossible de changer en modifiant la feuille de style glenan.css. Si le style est apporté sur la balise elle-même, il est prioritaire sur le style de l'entête de document et, bien évidemment, par rapport à la feuille de style externe.

Gestion des Styles

Jusqu'à présent, deux styles HTML ont été créés dans la feuille de style : BODY et H1.

La feuille de style se trouve dans le groupe de panneaux « Création » et est aussi accessible par le menu « Fenêtre – Styles CSS (Maj+F11) »

Le début du style est disponible directement dans la fenêtre.

Le style complet est visible en double-cliquant sur la feuille de style dans la fenêtre « Fichiers ». Les styles ne sont donc que du texte qu'il est possible de modifier directement (pour plus d'informations sur ce point, voir le support de cours sur la feuille de style). Même si certaines fonctionnalités offertes par la feuille de style ne sont pas disponibles dans Dreamweaver, l'utilisation de la feuille de style se fera en utilisant les aides disponibles.

Pour modifier un style, dans l'onglet « Style CSS », faire un clic droit « Modifier... » pour changer les paramètres du style, comme lors de la création.

L'inspecteur de balise (F9) disponible par le menu « Fenêtre » permet de modifier les styles en ayant néanmoins accès aux attributs disponibles. Plus facile d'accès, il est cependant plus ardu en compréhension pour les néophytes.

Style HTML

Il est tout à fait possible de définir toutes les balises HTML utilisées dans une page et même les imbrications de balises. Le style H2, même s'il est présent sur certaines pages (Le narcisse, autres îles...) est utilisé sans modification aucune.

Ouvrir la page nacisse.htm et dans la fenêtre « Styles CSS (Maj+F11) » cliquer sur l'icône « Nouveau style CSS ». Sélectionner le type de sélecteur « Balise » et, dans la liste déroulante, définir la balise « h2 ». Définir la taille à 18 pixels et valider. Comme pour les feuilles de style des traitements de texte, la modification est immédiate pour l'ensemble du document.

Les puces présentent sur la page du narcisse sont classiques et pourraient être remplacées par quelque chose de plus adapté avec le thème des Glénan, comme une coquille de la baie de La Forêt.

En regardant le code dans le mode fractionné, la baliseapparaît en début de ligne, indiquant un élément de la liste.

Créer un nouveau style et sélectionner la balise <LI>. Plusieurs solutions sont possibles, comme de mettre une image en arrière plan, mais il est plus logique d'utiliser la catégorie Liste et de parcourir les dossiers à la recherche du GIF animé liste_li.gif et de valider. Une coquille remplace la puce de base.

En creusant un peu vous vous apercevrez peut-être qu'en mettant un retrait de niveau supérieur, c'est toujours le coquillage qui est présent et en mettant une liste numérotée, au lieu de chiffres, c'est la coquille qui apparaît.

Le code HTML commence par <UL> pour des puces et <OL> quand elles sont numérotées. A l'intérieur de ces balises, chaque ligne est notifiée par <LI>. Les listes peuvent être imbriquées les unes dans les autres pour faire des sous listes.

 <ul>
<li><a href="#unique">Une esp&egrave;ce unique au monde</a></li>
<li><a href="#reserve">La plus petite r&eacute;serve naturelle de France</a> </li>
…
</ul> 

D'un point de vue représentation CSS, le code est noté par la succession des balises html, ce qui permet de peaufiner la mise en forme du document. Cela donne UL LI pour une liste à puces et UL LI LI pour une liste à puces de niveau.

Pour modifier les puces de 2 ème niveau, créer un nouveau style. Dans Sélecteur, mettre « li li » et cocher avancé comme type de sélecteur. Dans la catégorie liste, mettre l'image liste_lili.gif.

Pour terminer il serait souhaitable d'ouvrir la feuille de style et de rajouter « ul » devant les balises de ligne pour avoir « ul li » et « ul li li » permettant de disposer de listes numérotées.

Styles avancés

Les liens hypertextes sont toujours en bleu vidéo sur fond bleu-vert, ce qui n'est pas d'un contraste excellent.

La lisibilité peut être améliorée par la feuille de style. Ajouter un style. Choisir le type de sélecteur Avancé et dans la liste de sélecteurs apparaissent 4 types possibles sur la balise <A>:

• a:Link est utilisé pour identifier un lien.
• a:visited indique un lien déjà visité.
• a:hover est l'état lors du passage de la souris sur le lien.
• a:active quand l'internaute clique sur le lien.

Chaque sélecteur va être utilisé et modifié uniquement pour la catégorie « type » :

Le souligné disparaît lors du passage de la souris car la décoration est « aucune ». Lors du clic, le lien passe en gras ce qui peut avoir des répercussions importantes sur la mise en forme du texte.

Si vous avez mis le texte relatif à l'ancre (signet) à l'intérieur de la balise, il passe en jaune car l'ancre est une balise <A>. Du fait que la balise est une entête (<H2>) cela pourrait prêter à confusion, mais les navigateurs n'interprètent pas de la même façon les différentes balises.

Dans l'exemple ci-dessous, Mozilla Firefox met les liens en visité uniquement si l'internaute à effectivement utilisé le lien, alors que Microsoft Internet Explorer indique qu'ils sont déjà visités dès le chargement de la page. La logique de Microsoft étant que chaque signet de la page est déjà visité, car chargé dans le navigateur au chargement de la page. Les ancres (signets) n'intègrent pas le style a:link contrairement à ce que montre la copie d'écran de Dramweaver.

La phase de test, dans différents navigateurs, s'avère donc indispensable pour valider le résultat obtenu par rapport à celui escompté.

Styles et Classes

La page sur le Narcisse est une « sous-page » du thème « Nature ». Pour aider l'internaute à se situer, il serait utile de laisser « nature » dans le titre de niveau 1 et de mettre un sous-titre en-dessous avec le nom de la page « Le Narcisse ».

Remplacer « Le Narcisse » par « La Nature ». Insérer une ligne devant le nom scientifique du Narcisse et taper « Le Narcisse ». Ajouter un style de type de sélecteur « Classe » et de nom « .SousPage ». Ne pas oublier le point (.) devant le nom et ne pas mettre de séparateur (- ou _) entre les mots, car certains navigateurs ne peuvent les interpréter et le style est tout simplement omis.

Mettre le paramétrage suivant :

Pour appliquer le style à un paragraphe : dans la fenêtre « Propriétés » utiliser la liste déroulante du style et sélectionner le style adéquat. « Aucun » est toujours disponible pour enlever tout style à une balise.

Effectuer de nouveau la procédure sur l'ensemble des pages de même niveau.

En HTML, pour mette le paragraphe dans le StyleVoulu , il suffit d'ajouter class="StyleVoulu" comme attribut de la balise.

#FFFFCC

Dans le cas d'une sélection sur une partie de la balise, une balise <SPAN> est créée. Si le style doit s'étendre sur plusieurs balises, il faut insérer une balise <DIV>.

Sur la page population, le tableau n'est pas très esthétique. En jouant avec la balise d'entête de tableau, il est possible de modifier le formatage du tableau, mais comme celui-ci est utilisé à différents endroits dans la page, l'application d'un style HTML sur pourrait donner des résultats surprenants aussi Il est préférable de créer un style .TableauTitre et .TableauContenu en utilisant les paramètres suivants :

Détail de la feuille de style

La feuille de style glenan.css doit être sensiblement équivalente aux détails ci-dessous :

body {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #339999;
}
h1 {
font-size: 24px;
text-transform: uppercase;
color: #FFFFCC;
background-color: #006699;
border: medium groove #FFFFCC;
padding: 10px;
text-align: center;
}
h2 {
font-size: 18px;
}
ul li {
list-style-image: url(images_vignettes/liste_li.gif);
}
ul li li {
list-style-image: url(images_vignettes/liste_lili.gif);
}
a:link {
color: #FFFFCC;
}
a:visited {
color: #CCFFFF;
}
a:hover {
text-decoration: none;
}
a:active {
font-weight: bold;
}
.SousPage {
font-size: 18px;
color: #FFFFCC;
background-color: #006699;
border: thin dotted #FFFFCC;
text-align: center;
padding: 5px;
}
.TableauTitre {
font-weight: bold;
background-color: #006699;
border: 1px solid #FFFFFF;
padding-right: 10px;
padding-left: 10px;
}
.TableauContenu {
color: #006699;
background-color: #FFFFFF;
text-align: right;
border: 1px solid #006699;
padding: 0px 10px;
} 

Appliquer les styles aux endroits adéquats.

Modèles de page

Gégé, le Goéland des Glénan

Avant de modifier le modèle, il faut générer le logo au-dessus des dauphins en partant d'une image de goéland. Dans Fireworks, ouvrir le fichier goeland.png. Un damier blanc et gris indique que le fond est transparent. Pour rajouter du texte sous forme d'image il faut, dans un premier temps, augmenter l'espace au-dessus de l'image.

Utiliser le menu « Modification – Document – Taille du document... ». Actuellement le goéland est dans une image de 132 pixels de hauteur. Cliquer sur le point d'encrage bas pour augmenter l'espace de l'image vers le haut et mettre une taille finale de 300 pixels. Cette taille est trop grande, mais elle sera réduite à sa juste taille ultérieurement.

Utiliser le menu « Modification – Document – Couleur de fond... » et choisir #339999 comme couleur de fond personnalisée.

Avec l'outil texte, taper le texte « L'archipel des Glénan » avec une police Arial ou Helvetica de taille 36 et le paragraphe centré.

En cliquant sur l'outil rectangle, sélectionner l'outil Ellipse et faire une ellipse qui englobe le goéland. Pour faciliter le positionnement, mettre le fond de l'ellipse sans couleur et le contour en blanc.

Sélectionner l'ellipse et, avec l'outil cutter, couper un segment de l'ovale dans la partie inférieure et de façon symétrique. Enlever la sélection et cliquer sur la partie inférieure de l'ellipse pour la supprimer (si vous connaissez l'outil plume, vous pouvez l'utiliser pour réaliser une courbe). Sélectionner le texte et le bout d'ellipse et utiliser le menu « Texte – Attacher au trajet » pour que le texte se place sur la courbe. Si une partie du texte est à gauche en dehors de l'image, mettre « centrer » dans propriété. Cliquer sur le « + » de Effets dans la fenêtre Propriété et mettre une ombre portée sur le texte pour le faire ressortir. Pour réduire l'image utiliser le menu « Modification – Document – Réduire le document »

Le goéland est trop grand et il faut le réduire à la même taille que les dauphins. Utiliser le menu « Modification – Document – Taille de l'image... ». Mettre 150 en largeur et valider.

Exporter l'image, au format GIF adaptative en 32 couleurs avec une transparence d'index, directement dans le dossier images du site.

Modification du modèle

Pour l'instant, le modèle généré n'a été utilisé que pour créer de nouvelles pages. Le résultat aurait été sensiblement équivalent en utilisant le fichier attente.htm.

Il est à noter que dans toutes les pages utilisant le modèle, seules les régions définies comme modifiables peuvent l'être. Il est impossible de modifier le menu des dauphins directement depuis une page car le menu se trouve dans le modèle qui n'est pas dans une région modifiable.

Ouvrir le fichier PageTitre.dwt.

Dans la cellule supérieure gauche, utiliser le menu « Insertion – Image » et chercher le fichier goeland.gif créé précédemment. Pour faciliter la création du sous-modèle, il est préférable de sélectionner la première colonne en cliquant sur la partie haute de la première cellule et d'utiliser le menu « Modification – Tableau – Fusionner les cellules ». Ne pas oublier de mettre un alignement vertical en haut pour la cellule fusionnée, sinon le goeland et le menu seront au milieu de la cellule, ce qui serait dommageable pour des pages comme : St, Nicolas, autres îles, légende...

En apparence il ne semble pas y avoir de grandes différences, mais cela permettra d'agrandir la cellule contenant le titre pour ajouter le sous-titre, sans faire descendre le « menu dauphin ».

Utiliser le menu « Fichier – Enregistrer » pour sauvegarder le modèle. Une boîte de dialogue apparaît pour valider la mise à jour des documents dépendant du modèle. Cliquer sur le bouton « Mettre à jour » et, après traitement, une boîte de dialogue récapitulative indique le résultat du traitement.

Vérifier le résultat dans un navigateur.

Sous modèle

Le site tel qu'il est dans sa configuration actuelle est suffisant, surtout depuis l'apparition du style SousPage qui permet d'identifier les pages parentes. Une autre solution consiste à utiliser des sous modèles de page.

Dans le site sur les Glénan, trois thèmes sont développés : les îles, la nature et l'historique. Trois sous-modèles de page vont être créés.

Ouvrir une nouvelle page utilisant le modèle PageTitre.dwt et l'enregistrer en tant que modèle « PageNature ».

Se positionner à la fin du « Titre de la page » et appuyer sur « Entrée ». Un nouveau paragraphe vierge est créé. Taper « Sous titre de la page » et lui appliquer le style « SousPage ». Sélectionner ce paragraphe et, en utilisant le bouton « modèle », créer une région modifiable en lui donnant le nom de « SousTitre ». Mettre « La Nature » dans le titre.

Fermer le modèle et enregistrer. Faire de même pour créer les modèles PageIle et PageHistorique.

Pour appliquer un modèle à une page, il faut ouvrir la page et par le menu « Modifier – Modèles – Appliquer le modèle à la page... » sélectionner le modèle à appliquer.

Avec la page relative au narcisse, il faut appliquer le modèle Nature. Dans la page initiale, un titre n'existe plus dans le modèle Nature et aussi des choix sont nécessaires pour rendre cohérent le transfert. Si des modifications n'avaient pas été apportées au document lors de la création des styles, il aurait été possible de transférer le contenu du « titre de la page » vers la région SousTitre.

Si les régions des modèles ont des noms identiques, la modification se fait sans encombre.

Il ne reste plus qu'à modifier les paragraphes en supprimant le deuxième style « sousPage » pour rendre conforme le document à la navigation souhaitée. Si la page est transférée dans une autre arborescence, il suffit de lui appliquer un autre modèle pour voir le titre changer.

Gestion des modèles

Dans le site, il y a un modèle « PageTitre » et trois sous-modèles : PageNature, PageIle et PageHistorique. Les sous modèles utilisent des zones du modèle (menu...) et le « Titre de la Page » du modèle qui deviennent invariants dans le sous modèle.

Le fait d'apporter une modification sur une partie invariante du modèle de départ (PageTitre) entraîne une modification en cascade dans les pages dépendantes du modèle PageTitre, comme la page d'accueil, la page CNG_CIP... mais aussi dans les sous modèles et de fait dans les pages dépendantes des différents sous modèles.

Ouvrir le modèle PageIle.dwt dans le dossier « Template » et remplacer le Titre « Les îles » par « Les îles de Glénan » puis enregistrer. Les sept pages dépendantes du modèle PageIle sont modifiées.

Ouvrir le modèle Page Titre. Se positionner à la fin du tableau et ajouter un paragraphe vide. Une fois positionné sous le tableau, utiliser le menu « Insertion – HTML – Barre horizontale » pour ajouter une balisequi, par défaut, fait une séparation entre le haut contenant la navigation ainsi que le contenu de la page et le dessous dans lequel il est souhaitable de mettre des parties invariantes qui seront redondantes dans toutes les pages. Se positionner en dessous de la balise de séparation, centrer le paragraphe et taper le texte :

© - LÉOST Informatique
Retrouver ce site sur http://glenan.fr
Pour toutes remarques, écrire au Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

Le copyright est obtenu par le menu « Insertion – HTML – Caractères spéciaux – Copyright ». Ne pas oublier de mettre un saut de ligne forcé entre les lignes (Shift+Entrée). Au lieu de taper webmaster, sélectionner la petite enveloppe dans la barre d'outil « Commun » et mettre le texte webmaster et l'adresse électronique : Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. et valider. Enregistrer le modèle pour voir la modification des 3 modèles dépendants et les 17 pages dépendantes des modèles. Fermer et regarder le site.

Le résultat est visible ici.

Menus et Sous-Menu

Certaines pages du site sont toujours indisponibles en accès par le menu dauphin et pour certaines totalement inaccessibles. Il est possible de mettre une table des matières, accessible depuis la partie invariante des modèles, mais il est préférable de prévoir un accès plus convivial.

Les calques

Les calques de Dreamweaver peuvent servir à gérer des menus mais, plutôt que de le faire manuellement, il est préférable de laisser Macromedia gérer le code. Le fichier mm_menu.js qui va être inclus dans le site contient 766 lignes de code. Même si plusieurs lignes ne contiennent pas ou peu de caractères, la compréhension n'en est pas évidente de prime abord.

Pour appréhender la notion de calque nous allons ajouter un commentaire textuel sur Gégé le goéland et sur les menus dauphin pour indiquer à l'utilisateur ce qu'il peut réaliser. Il est possible d'ajouter également des informations à coté des îles de la carte des glénan. Cependant si vous devez mettre des calques dans une page utilisant un modèle, il faut impérativement gérer les calques avant l'intégration du modèle, quitte à faire les modifications de positionnement des calques ultérieurement ou à introduire les calques directement dans le code. Attention à l'introduction manuelle du calque, car la fonction MM_reloadPage n'est pas incluse dans le code de la page. Elle permet de recharger la page après un redimensionnement de la fenêtre du navigateur Netscape 4 pour éviter que tous les calques partent au « fer à gauche ».

Si l'affichage de votre écran ne permet pas de visualiser suffisamment d'informations à droite de la carte (affichage 800 x 600 par exemple), il est possible de réduire les groupes de panneaux en cliquant sur le triangle orienté vers la droite, à gauche du groupe de panneaux. Cet affichage est réversible en cliquant sur le triangle orienté dans l'autre sens. La touche <F4> permet de masquer tous les panneaux, barres d'outils... pour ne laisser que les fenêtres des fichiers ouverts.

L'outil calque de la barre d'outil « Mise en forme » est disponible aussi par le menu « Insertion – Objet de mise en forme – Calque ».

Cliquer sur l'outil « Calque » et se déplacer sur la page modèle PageTitre. Le curseur devient une croix. Cliquer à l'endroit où doit se positionner un des coins du calque, puis faire un cliquer-déplacer jusqu'au coin opposé. Une forme avec 8 poignées apparaît. Les poignées permettent de redimensionner dans une ou deux dimensions suivant le choix : coin ou milieu. Le carré blanc au dessus du coin supérieur gauche permet de déplacer le calque pour le positionner à l'endroit souhaité.

Chaque calque est positionné par défaut juste après la balise <BODY> et une icône symbolise chaque calque.

L'affichage de cette symbolique dans la page entraîne une distorsion de la vue par rapport à l'interprétation du navigateur. Le menu « Affichage – Assistance visuelle – Masquer tout (Ctrl+Maj+I) » permet d'avoir une vision plus réelle de l'affichage.

Le calque, dans Dreamweaver, utilise la balise <DIV>. Même si d'autres balises permettent d'obtenir quelque chose d'avoisinant avec certains navigateurs, cette balise donne des résultats proches dans les différents navigateurs. La différence par rapport à l'utilisation faite avec la feuille de style réside dans le positionnement du calque par rapport au coin supérieur gauche de la fenêtre. Dans le cas de ce calque, mettre un positionnement à (170 : 20). Pour la taille du calque mettre (160 ; 60) et surtout ne pas oublier de mettre pour mesure le pixel (px) sinon le calque se positionne n'importe comment dans le navigateur. L'ID du calque est « goeland » pour y faire référence plus facilement qu'avec « Layer1 », surtout si le nombre de calques est important.

Cliquer à l'intérieur du calque et taper le texte « Cliquer sur le goéland pour accéder au site glenan.fr ». Sauvegarder, mettre à jour les pages et modèles dépendants, puis regarder le résultat.

Le texte du calque est visible en superposition par rapport à l'entête de niveau1. Rendre le calque opaque en utilisant un style. Il est plus facile de partir d'un style comme celui de sous-page en faisant un clic droit pour le dupliquer. Nommer le style « .calque » et supprimer la taille de la police. Dans les propriétés du calque, renseigner « calque » dans Classe et dans Visib. (Visibilité) mettre hidden (caché) à la place de defaut.

Il disparaît après un clic en dehors du calque. Il ne reste que l'icône représentant le calque (sous réserve d'avoir une assistance visuelle active), mais les informations sur le tableau de départ empêchent de cliquer dessus pour afficher le calque. Cliquer sur un dauphin pour provoquer un changement de tableau, puis sur l'icône « Calque » pour afficher le calque.

Ajouter un comportement au passage sur le goéland pour permettre l'affichage du calque.

Cliquer sur Gégé le goéland des Glénan et utiliser le menu « Fenêtre – comportement (Maj+F3) » puis cliquer sur le « + » pour rajouter un comportement. Sélectionner « Afficher-Masquer les calques ». Cliquer sur le bouton « Afficher » et valider. L'événement du comportement est onLoad (chargement de la page), mais il est préférable de mettre onMouseOver (quand la souris passe sur l'image). Il faut mettre aussi le comportement « masquer le calque » avec un événement onMouseOut (quand la souris sort de l'image). Valider, enregistrer, mettre à jour et tester le résultat. Pour que le calque soit réaliste il ne faut pas oublier, dans les propriétés de l'image, de remplacer le lien « javascript:; » par « http://www.glenan.fr » et dans cible, mettre « _blank » (nouvelle fenêtre).

Créer un autre calque ayant les mêmes caractéristiques, mais avec comme ID « dauphin » et comme contenu « Cliquer sur les dauphins pour voir la page du site ». Il y a déjà des comportements sur les dauphins, mais il est possible d'en rajouter d'autres. Quand la souris passe sur le menu (onMouseOver), il faut afficher le calque « dauphin » et masquer le calque « goeland » (on ne sait jamais) et onMouseOut, masquer le calque « dauphin ». Valider et regarder le résultat. Lors du passage de la souris entre 2 dauphins il y a une saccade : il faudrait donc mettre un délai onMouseOut pour éviter cela.

Création des sous menus

Ouvrir Fireworks et charger dauphin-barre-1.png ou le fichier menu des dauphins que vous avez généré au chapitre création des boutons du modèle de page.

Cliquer sur le dauphin « Les îles » puis utiliser le menu « Modification – Menu contextuel – Ajouter menu contextuel... ». Dans l'onglet Contenu mettre les informations du tableau ci-contre. Dans l'onglet aspect, mettre :

Cellule HTML

Menu vertical

Police : verdana, Arial, Helvetica, sans-serif

Taille : 14

Alignement à gauche

Etat relevé : texte #FFFFFF ; cellule #006699

Etat au-dessus : texte #FFFFCC ; cellule #339999

Dans l'onglet Avancé, laisser les paramètres par défaut et dans le dernier onglet, mettre la position avec les chiffres suivants : soit X = 145 et Y = 40 pour donner l'impression du dauphin qui régurgite le sous-menu.

Recommencer l'opération avec le dauphin nature et le dauphin historique en vous aidant de l'arborescence du site.

Utiliser le menu « Fichier – Exporter... ». Les paramètres restent identiques à ceux de la première exportation. Il suffit de valider (ou de reprendre les paramètres du passage « génération du code »).

Intégration du sous-menu

Ouvrir le modèle PageTitre du dossier Template avec Dreamweaver. Le nouveau menu vient remplacer : cliquer sur une image de dauphin et, dans la barre d'état de la page, sélectionner la balise <TABLE> la plus à droite qui contient l'ensemble du tableau contenant le « menu dauphin ».

Appuyer sur la touche « Suppr » pour effacer le menu. Attention : le curseur, après la suppression, à tendance à se repositionner au niveau des calques, juste après la balise . Il faut donc se repositionner sous le goéland. Pour cela cliquer sur le goéland, appuyer sur la flèche à droite pour vous positionner juste après l'image et faites un saut de ligne. La balise <p> (paragraphe) générée sera enlevée ultérieurement. Si vous ne maîtrisez pas le langage HTML, il est toujours préférable d'avoir à supprimer une balise plutôt que d'en ajouter une.

Utiliser le menu « Insertion – Objets image – HTML Fireworks ». Cliquer sur parcourir, remonter dans le dossier parents et sélectionner le fichier menu-dauphin.htm puis valider.

Supprimer la marque de paragraphe, mais en prenant soin de ne pas supprimer le script javascript qui permet le chargement du menu. Valider le changement et la répercussion sur les sous modèles et les pages. Du fait du changement de menu dauphin, le script relatif à l'affichage du calque « dauphin » ne fonctionne plus. Vous pouvez éventuellement le remettre sur la page, en sachant que les 2 calques ne sont pas supprimés, mais uniquement le comportement sur les boutons dauphins.

Valider le tout et regarder le site.

Le site est publiable.