Création des boutons

L'interface de Fireworks

Lancer Fireworks. Son interface ressemble fortement à celle des autres produits de la famille MX 2004, avec bien évidement des spécificités propres aux fonctions de chaque produit.

03-FW-01-interface

Fireworks est un logiciel de dessin gérant à la fois les images bitmap (image en mode point comme les photos) et le « vectoriel bitmapé ». Pour plus d'information sur cette partie, voir le cours sur le traitement de l'image. Cette partie n'a pas pour but de vous apprendre à dessiner, mais uniquement à utiliser Fireworks pour la génération de boutons pour Dreamweaver.

Utiliser le menu « Fichier –ouvrir » et charger le fichier « dauphin-plat.png ». Ce fichier contient 4 calques : le texte et trois des états du bouton. L'avantage d'avoir des calques superposés permet de vérifier l'alignement des objets et évite le problème de taille entre les différents états du bouton.

03-FW-02-dauphin 03-FW-02-dauphin-calques

 Des boutons en relief

Devant chaque calque ainsi que devant chaque objet à l'intérieur d'un calque, il existe un œil indiquant si le calque (l'objet) est visible ou pas. Décocher la visibilité des calques : Texte, Au-dessus et Enfoncé.

Sélectionner le calque « Relevé », puis cliquer sur le dauphin.

03-FW-022-dauphin-releve 03-FW-021-calque-releve

Dans la boîte de dialogue « Propriétés », cliquer sur le « + » de Effets et sélectionner « Biseau et estampe – Biseau intérieur » et régler les paramètres comme indiqués.

03-FW-030-biseau

Le résultat devra être comme ci-contre :

03-FW-031-biseau-param 03-FW-032-biseau-dauphin

Recommencer sur les deux autres calques. Le calque Texte dispose d'un effet « Estampe rapportée » ressemblant à un gravage dans du savon. D'autres effets sont disponibles, en fonction du type de bouton que vous souhaitez réaliser. Si vous souhaitez appliquer une suite d'effets sur plusieurs objets, cliquer sur le « + », puis sur « Options – Enregistrer en tant que style... » pour le rendre disponible dans d'autres projets.

Le bouton symbole

03-FW-033-calque web2Si vous n'avez pas mis les dauphins en relief, chargez le fichier « dauphin-biseau.png »

03-FW-034-calque web-visibleSélectionner tous les objets par le menu « Sélection – Sélectionner tout (Ctrl+A) », puis utiliser le menu « Modification – Symbole – Convertir en symbole... (F8) ». Donnez lui le nom « dauphin » et le type « bouton », puis validez. Une découpe verte se place automatiquement sur le calque web, qu'il est possible de rendre invisible en décochant l'œil du calque ou en cliquant sur « Afficher / Masquer les découpes et les références ».

 

 

  03-FW-035-bouton-calque103-FW-035-bouton-dauphin1

La flèche (de type raccourci) en bas à gauche de l'image indique la présence d'un symbole. Double cliquer sur le bouton ou utiliser le menu « Modification – Symbole – Modifier le symbole ». Il existe 5 onglets pour le symbole dauphin. Il faut, au préalable, réorganiser les calques en renommant « Calque 1 » « Dauphin » et en créant un calque « Texte » contenant le texte. Ne laisser que le calque représentant le dauphin du haut, visible sur l'onglet « Relevé ».

Cliquer sur l'onglet « Au-dessus » qui est vide. Il est possible de dessiner le bouton directement ou d'importer un objet qui servira de bouton, mais il est préférable si les objets sont identiques ou si des repères sont à prendre entre les positions du bouton, de gérer des calques (ou des objets sur des claques) qu'il suffit d'activer. Pour utiliser cette technique avec notre dauphin, cliquer sur le bouton « Copier le graphisme Relevé », puis décocher la visibilité du dauphin du haut pour rendre celui du milieu visible. Recommencer l'opération sur l'onglet « Enfoncé » en demandant à « copier le graphisme Au-dessus » et ne laissant visible que le dauphin du bas (et le texte).

03-FW-036-bouton-dauphin2vide03-FW-037-bouton-dauphin-apercu

L'onglet « Au-dessus Enfoncé » n'est pas utilisé dans notre exemple et la zone active intègre bien une découpe qui couvre l'ensemble des dauphins. Cliquer sur « Terminé » pour revenir au « dauphin-biseau » et l'enregistrer sous « dauphin-bouton.png ».

Enlever la visibilité du « Calque Web » et cliquer sur l'onglet « Aperçu ». En vous déplaçant sur le dauphin, il ouvre sa gueule et si vous cliquez il se redresse. Sélectionner l'onglet « Original ».

La barre de navigation

03-FW-038-nouveauLe premier bouton étant réalisé, il est possible de générer la barre de navigation. Elle comprend cinq menus : Les îles, CNG et CIP, Nature, Historique et, bien évidement la possibilité de revenir à la page d'accueil (voir chapitre « Analyse du site »).

03-FW-039-bibliotheque
Chaque bouton mesure 150 x 52 pixels (soit 150 x 60 en arrondissant à l'entier supérieur). La barre de navigation devra donc faire 150 x 300 (5 x 60). Il est possible de la créer en agrandissant notre « dauphin-bouton », mais nous allons créer une nouvelle image par le menu « Fichier – Nouveau » en mettant 150 de Largeur et 300 de hauteur et en demandant une couleur de fond transparente. La résolution pour ce genre d'objet n'a pas d'importance même si, de prime abord, cela peut choquer les graphistes.

Sélectionner le jeu de panneaux « Assets » (en bas à gauche de l'écran) et cliquer sur l'onglet « Bibliothèque » ou utiliser le menu « Fenêtre – Bibliothèque (F11) »

En cliquant sur « Sans titre-1.png », la bibliothèque est vide alors qu'en cliquant sur le « dauphin-bouton » la bibliothèque contient un bouton nommé « dauphin ».

03-FW-039-ecran

Sélectionner le dauphin dans la bibliothèque et le déplacer sur le document « Sans titre-1.png ». Les deux bibliothèques contiennent maintenant un objet dauphin.

Cliquer sur « Sans titre-1.png », puis sur sa bibliothèque pour la sélectionner et déplacer quatre fois le bouton dauphin pour créer un total de cinq occurrences de l'objet. Le positionnement de l'occurrence est approximatif et sera modifié ensuite.

03-FW-03A-5boutons-desordre03-FW-03A-5boutons-ordre

Pour positionner exactement le menu, cliquer sur la « flèche noire » de la boîte à outils, cliquer sur le premier dauphin et utiliser la boîte de dialogue « Propriétés » pour modifier les coordonnées X et Y à (0,0). Pour les autres dauphins, utiliser les coordonnées (0,55) ; (0,110) ; (0,165) et (0,220).

Un espace de 3 pixels existe entre les dauphins. Il pourait être réduit à 0, mais attention aux problèmes de chevauchement des boutons. Utiliser le menu « Modifier – Document – Réduire le document (Ctrl+Alt+T)» pour supprimer l'espace après le dernier dauphin. Enregistrer le fichier en tant que « dauphin-barre-1.png » avant de continuer.

En cliquant avec la flèche noire de sélection sur le dauphin en haut de la barre de navigation, la boîte de dialogue « Propriétés » présente les informations suivantes.

03-FW-03B-prop-initial

Plusieurs modifications sont nécessaires pour rendre notre barre compatible avec une page Internet. Plutôt que « dauphin-barre-1_r1_c1 » qui correspond au nom de notre image associé à sa position en ligne (row1) et colonne (column1), il est préférable de lui donner un nom comme « Accueil ». Le texte « Accueil »dans le dauphin remplacera « Texte ». Pour le lien, il se fera sur la page d'accueil, soit index.html. La balise alternative contiendra un texte à afficher en info bulle ou pour ceux ayant désactivé l'affichage des images. La cible est utile si le site gère des frames, popup et autres choses qu'il est préférable d'éviter.

Le bouton reflète automatiquement les changements

03-FW-03B-prop-final

Faire de même pour les autres boutons :

Bouton  Nom  Texte  Lien  Alt
Dauphin 1 Accueil Accueil index.html Accueil des Glénan
Dauphin 2 Iles Les îles ile.htm Les îles de Glénan
Dauphin 3 CNG CNG et CIP CNG_CIP.htm Centre Nautique et de Plongée
Dauphin 4 Nature Nature nature.htm La nature aux Glénan
Dauphin 5 Historique Historique historique.htm Histoire et Légendes

03-FW-03C-menu-apercuPour les noms de fichier : il est impératif d'utiliser des noms de fichier sans accent et sans espace et, si possible, entièrement en minuscule. Il est impératif de bien noter le nom des fichiers appelés sous peine d'avoir un site non fonctionnel lors de la publication.

Génération du code

Les boutons de la barre de menu sont opérationnels, mais il faut maintenant générer les images et le code HTML permettant la gestion de ces boutons.

Il est possible d'enregistrer le fichier PNG dans le dossier du site, cela permet une mise à jour plus facile en cas de modification. Cependant le fait de mélanger au sein du site les fichiers de travail et le fichier du site, induit le risque que lors de la publication les fichiers de travail et le site soient publiés ensemble, ce qui allonge la durée de publication et encombre l'espace du site. Pour cette raison, à quelques exceptions, les fichiers de travail seront stockés dans un dossier à part, du type « Glénan média » par exemple.

Utiliser le menu « Fichier – Exporter... »

03-FW-03D-export

03-FW-03E-menu-htmlSélectionner la racine du dossier qui contiendra le site.

Donner un nom de fichier type « menu-dauphin ». Si vous n'indiquez pas l'extension (htm ou html) et que le nom du sous-dossier contenant les découpes est identique, le fichier html sera déplacé dans le sous-dossier alors qu'il est plus utile de le laisser dans le dossier racine.

Dans type, laisser « Document HTML et images » et dans HTML garder « Exporter le fichier HTML. Ne pas oublier d'« Exporter les découpes » et d'utiliser « parcourir » pour placer les images. Le dossier « images » est choisi par défaut mais, pour mieux valider le poids des menus, il est utile de placer les images du menu dans un dossier « menu » qu'il faut créer après avoir cliqué sur le bouton « Parcourir... ».

A la fin de la manipulation, la boîte de dialogue « Exporter » doit être comme celle ci-contre.

Un fichier « menu-dauphin.htm » a été créé, ainsi qu'un dossier « menu » contenant 20 images, dont 15 de dauphins (5 menus x 3 images/menu). 4 images sont des séparateurs entre les menus et le fichier « spacer.gif » sert à l'ossature du tableau contenant le menu.

L'ouverture du fichier « menu-dauphin.htm » dans un navigateur doit afficher quelque chose d'équivalent à la fenêtre ci-contre. Les dauphins sont actifs, mais les liens non fonctionnels car les pages n'existent pas.

De plus, les traits autour du dauphin ne sont pas nets.

Tous ces points vont être traités dans la suite du chapitre.

Pour en savoir plus sur les menus et sous-menus, voir le chapitre « Personnalisation – sous-menus ».

Génération du modèle

Menu-dauphin.html

Ouvrir Macromedia Dreamweaver. Le groupe de panneau contenant la fenêtre « Fichiers » est ouvert (sinon utiliser le menu « Fenêtre – Fichier (F8) » pour le faire apparaître. Vérifier que vous êtes effectivement dans le site « Glénan Dreamweaver » et sélectionner l'affichage local. Le dossier « menu » et la page « menu-dauphin.htm » doivent être visibles. Si vous double cliquez dessus, la page s'affiche et le tableau devient visible (traits pointillés entre les dauphins).

03-FW-03F-menu-DW

Si les pointillés ne sont pas visibles, il est possible de les activer en cliquant sur le bouton « Afficher les options – Assistances visuelles – Bordures de tableau ». D'autres paramètres sont également disponibles, ainsi que des grilles et règles qui permettent de positionner plus précisément des objets (principalement les calques).

04-model-01-ecran

Il existe un espace entre le bord du tableau et les bords haut et gauche de la page qui peuvent être gérés par le menu « Modifier – Propriétés de la page » en positionnant à 0 toutes les marges de l'onglet Aspect. Attention néanmoins, cette fonction gère un style CSS au sein de la page au lieu de modifier la balise .

Fermer la page « menu-dauphin.htm »sans l'enregistrer car elle sera utilisée en intégration dans une page de modèle.

La page vierge

Utiliser le menu « Fichier – Nouveau... » pour lequel de nombreuses catégories sont disponibles, avec un nombre variable d'objets par catégorie. Pour le site sur les Glénan, nous allons utiliser une page HTML. Cette page est vide ou du moins le semble (pour plus d'information, voir le chapitre : Structure d'une page Internet).

Il est possible d'utiliser des modèles de page utilisant ou non les CSS (feuille de style).

04-model-02-nouveau-doc

Logo Titre de la page 

 Menu

dauphin

Contenu de la page

Dans notre cas, pour des raisons pédagogiques, la page de base sera créée à partir d'une feuille vierge dans laquelle le menu des dauphins sera intégré. Ce menu intègre un tableau, élément fort utile pour la mise en page de pages Web. Chaque page comprendra aussi un titre, un contenu et un logo.

Le positionnement des différents éléments peut se représenter comme ci-contre.

La largeur de chaque page sera fonction de l'affichage de l'internaute. Si la page dans Dreamveaver n'est pas en pleine taille, il est possible de changer la taille d'affichage de la fenêtre pour obtenir un rendu de la vision de la page pour les internautes en fonction du paramétrage de leurs ordinateurs. Le plus courrant tend à être le 1024 x 768, même si bon nombre d'ordinateurs sont encore au 800 x 600. Si l'internaute regarde le site dans une fenêtre qui n'est pas en pleine page, les tailles d'affichage sont encore plus vastes.

04-model-03-taille-fenetre

Création du tableau

La largeur de la page pourra être fixe ou laissée fluctuante, en fonction de l'affichage de l'internaute. Dans le cas du site des Glénan la largeur sera fluctuante, donc à 100 % de la largeur de l'écran. Le « menu dauphin » a une largeur de 150 pixels (151 si on inclut le « spacer.gif » utilisé pour l'ossature gauche du tableau). Le logo qui se positionnera au-dessus du menu devra avoir une taille sensiblement égale à 150 pixels.

Concernant l'alignement des objets dans les cellules, tenir compte du « contenu de la page » qui peut être de taille très variable. Il est possible de retenir les choix suivants :

Alignement  horizontal  Vertical 
Cellule par défaut Gauche Milieu
Logo Centré Milieu
Menu dauphin Centré Haut
Titre de la page Centré Milieu
Contenu de la page Gauche Haut

04-model-04-tableau-bouton04-model-04-tableau-formatUtiliser le bouton tableau ou le menu « Insertion – Tableau (Ctrl+Alt+T »). Le tableau contient 2 lignes et 2 colonnes, ainsi qu'une largeur de tableau de 100%. Le tableau n'ayant pas besoin d'être visible, mettre la « largeur de bordure » à 0. Les autres paramètres n'ont pas besoin d'être modifiés.

Dans les propriétés du tableau, les paramètres s'affichent. L'espace entre les cellules n'est pas vide, mais prend sa valeur par défaut comme le montre l'espacement entre les pointillés représentant les cellules dans la page (ne pas confondre rien et 0). Des informations en vert s'affichent sur la page, mais ne seront invisibles dans le navigateur.

Pour plus d'information sur les tableaux, voir le paragraphe « Tableau » du chapitre « Contenu du site »

04-model-05-taille-tableau

04-model-06-selection-colonnePour donner une largeur de 150 pixels à la première colonne, il faut sélectionner la première colonne, soit en cliquant avec une flèche noire au-dessus de la première cellule de la colonne ou en cliquant sur le triangle vert en bas de la colonne et en choisissant « Sélectionner la colonne ». Mettre 150 dans la largeur (L) de la colonne et, éventuellement, changer l'alignement de la colonne.

Cliquer dans chaque cellule pour mettre l'alignement horizontal et vertical conforment aux informations décrites dans le tableau « alignement » précédent.

 

04-model-06-taille-colonne

Intégration du menu

04-model-07-insertion-menuCliquer dans la cellule en bas à gauche (2 ème ligne et 1 ère colonne) pour la sélectionner, puis cliquer sur le triangle à droite de l'icône image de l'onglet Commun (Fenêtre Insertion : Ctrl+F2). Dans la liste des images, choisir « HTML Fireworks », ou utiliser le menu « Insertion – Objets images - HTML Fireworks ».

La boîte de dialogue liée à la barre de navigation aurait permis de faire un menu mais pour un même résultat, cela aurait nécessité davantage de travail.

04-model-08-insertion-HTML

Sélectionner menu-dauphin.htm avec le bouton « Parcourir... » et cocher la case « Supprimer fichier après insertion ». Un message avertit qu'il est souhaitable de l'enregistrer pour que les noms de fichier soient correctement notés dans la page.

04-model-09-insertion-erreur

Le travail de création de page n'étant pas totalement finalisé, cette page sera nommée « attente.htm » et sera placée dans la racine du site (cliquer sur « OK » et mettre attente sans « Nom du Fichier »).

04-model-10-menu integre

Le menu apparaît et la page menu-dauphin.htm est remplacée par la page attente.htm

Ajouter « Titre de la page » dans la cellule supérieure droite et « Contenu de la page » dans la cellule inférieure droite.

Enregistrer la page (Ctrl+S) avant de faire des modifications pour finaliser le modèle.

Gestion de la feuille de style

Cette partie sur les styles permet uniquement de modifier le modèle de page. Pour plus d'information sur les feuilles de style CSS, voir le cours spécifique sur les styles.

La feuille de style CSS a pour but d'uniformiser la présentation des informations dans les différentes pages. Le style peut être affecté aux paragraphes ou dans la balise (voir le chapitre « Structure d'une page Internet » pour plus d'informations et mieux comprendre cette partie). Dans notre cas, il est préférable de créer un fichier externe contenant les styles et de faire appel à ce fichier depuis les différentes pages du site. Cette technique présente plusieurs avantages : factorisation de l'information d'où diminution globale du poids, ainsi que facilité de modification de la présentation. Cliquer sur le groupe de panneaux « Création » pour voir la fenêtre « Style CSS » qui ne contient aucun style.

04-model-12-nouveau-style04-model-11-menu CSSCliquer sur l'icône « Nouveau style CSS ». L'objectif est de changer le corps de la page pour en améliorer l'aspect. Choisir le type de sélecteur : Balise et dans la liste déroulante de Balise, sélectionner « body ». Laisser le bouton radio sur « Nouveau fichier feuille de style » et cliquer sur « OK ».

Donner « glenan » (sans accent) comme nom de fichier et valider pour enregistrer la feuille de style dans la racine du site.La boîte de dialogue « Définition du style CSS pour body dans glenan.css » apparaît et il suffit de modifier uniquement les attributs concernant spécifiquement la balise.

04-model-13-nouveau-style-body

Dans l'onglet « Type » choisir :

  • Police : Arial, Helvetica, sans-serif (le choix de police est fait sur la machine qui interprète la page, si celle-ci ne dispose pas de la police Arial, elle prendra de l'Helvetica (Mac OS souvent) et si les deux polices ne sont pas disponibles, elle utilisera une police sans-serif...
  • Couleur : blanche (#FFFFFF). Il est nécessaire de changer le fond car blanc sur blanc...

Dans l'onglet « Arrière-plan » sélectionner :

  • Couleur d'arrière-plan : bleu-vert (#339999).

Valider en cliquant sur « OK ». Les modifications sont apportées immédiatement sur la page

04-model-12-nouveau-styleCliquer sur l'icône « Nouveau style CSS », puis sélectionner le type de sélecteur : Balise. Choisir la balise h1 (head1 où Titre 1) et valider.

04-model-14-style-h1

Dans l'onglet « Type » choisir :

  • Taille : 24 pixels
  • Casse : majuscules
  • Couleur : jaune pale (#FFFFCC).

Dans l'onglet « Arrière-plan » sélectionner :

  • Couleur d'arrière-plan : bleu (#006699).

Dans l'onglet « Bloc » sélectionner :

  • Alignement du texte : centrer

Dans l'onglet « Boîte », dans le bloc remplissage, laisser cocher « idem pour tous » et sélectionner :

  • Haut : 10 pixels (pour la distance entre le texte et la bordure)

Dans l'onglet « Bordure », laisser cocher « idem pour tous » et sélectionner pour « haut » :

  • Style : crevassé
  • Largeur : moyen
  • Couleur : jaune pale (#FFFFCC)

Avec Ctrl+Clic sur une partie du « Titre de la page » sélectionner la cellule.

Dans la fenêtre Propriétés, choisir « En-tête 1 » dans la liste déroulante « Format ».

04-model-15-style-h1-application

Le résultat est visible ci-contre. Enregistrer le fichier.

04-model-16-page-styles

Enregistrement du modèle

Un modèle verrouille automatiquement le contenu de la page qui ne peut être modifié. Il faut donc créer dans la page des zones qui seront modifiables.

Le reste des informations de la page, comme le menu et d'autres informations récurrentes, seront préservées.

Sélectionner le « Titre de la page » avec Ctrl+Clic. Utiliser le menu « Insertion – Objet de modèle – Région modifiable (Ctrl+Alt+V) ». Le document est converti en modèle et nommer « Titre » cette région modifiable.

04-model-21-modele-conversion 04-model-19-region-modif

Sélectionner la cellule du contenu par Ctrl+Clic et la convertir en région modifiable avec le nom de « Contenu ».

Utiliser le menu « Fichier – Enregistrer comme modèle » et lui donner le nom de « PageTitre ».

04-model-17-model enregistrement

Une demande de mise à jour des liens est émise mais n'aboutit pas car il n'y a pas encore de page utilisant le modèle.

04-model-18-lien-MAJ 04-model-22-dossier-template

Un dossier « Templates » (modèles) est créé qui contient le fichier « PageTitre.dwt ».

Il faut remarquer au passage le fichier « glenan.css » (la feuille de style) dans la racine du site.

Le style crevassé de la bordure du titre de niveau 1 n'apparaît pas de façon flagrante dans le navigateur, alors qu'en demandant un affichage dans le navigateur par le menu « Fichier – Aperçu dans le navigateur – iexplore (F12) » ou autre, en fonction de votre configuration, permet de voir que la bordure est bien crevassée.

N'oubliez pas de regarder régulièrement votre site au moins dans Internet Explorer, pour vérifier si le résultat est conforme à vos attentes. Si possible regardez le dans un autre navigateur de type Netscape, Mozilla, Opera...

Les zones de modèles n'apparaissent pas dans le navigateur, mais le code est présent dans les pages.

Fermer le modèle

04-model-20-modele-dwt04-model-23--modele-IE

Création des pages de base

Dans la boîte de dialogue « Macromedia Dreamweaver MX 2004 », cliquer sur Plus dans la rubrique Créer ou utiliser le menu « Fichier – Nouveau... (Ctrl+N) ».

Sélectionner l'onglet « Modèles » pour voir les différents sites et les modèles associés.

Sélectionner le modèle « pagetitre » et cliquer sur le bouton « Créer ». Surtout ne décochez pas la case « Mettre la page à jour quand le modèle est modifié » afin de garder l'intérêt du modèle quand votre site comportera une vingtaine de pages.

04-model-24-nouveau-modele

Dans le « Titre de la page » du nouveau document mettre « Bienvenue aux Glénan ». Dans le titre du document (balise ) mettre le titre qui apparaîtra dans le navigateur et qui sera enregistré dans les favoris, signets ou autres, si l'internaute veut garder un lien vers votre site. Pour cette page d'accueil, mettre : « Les Glénan : formation à Dreamweaver » et valider.

04-model-25-title-page

Utiliser le menu « Fichier – Enregistrer » pour sauvegarder le fichier avec le nom « index.html ».

Pour créer les autres pages, vous avez deux solutions :

  • Utiliser la même procédure que précédemment.
  • A partir d'un fichier utilisant le modèle, modifier le « Titre de la page », la balise « Titre », puis le menu « Ficher – Enregistrer sous... » en changeant le nom du fichier.

Utiliser les indications du tableau ci-dessous pour la génération des nouvelles pages.

Titre de la page Balise Titre  Nom du fichier 
Les îles des Glénan Les îles de Glénan ile.htm
CNG et CIP Voile et Plongée aux Glénan CNG_CIP.htm
La nature La nature aux Glénan nature.htm
Historique Histoires et Légendes aux Glénan historique.htm

Pour visualiser le site dans le navigateur, utiliser la touche (F12). Il est maintenant possible de se déplacer dans la structure du site. Le contenu est encore inexistant, mais le site fonctionne.

04-model-26-fichiers04-model-27-pages-model

Structure d'une page Internet

Cette partie du guide vous informe sur la façon dont sont structurées des pages Internet et vous donne une approche de langage HTML (HyperText Markup Language). Si le côté technique ne vous intéresse pas, passez cette partie. Si vous souhaitez approfondir vos connaissances sur le sujet, reportez-vous au cours sur le HTML.

Le HTML est un langage de balise permettant de décrire le formatage des informations contenues dans une page. Les balises sont mises entre les symboles < et > pour éviter de les confondre avec le contenu lui-même. Sauf exception, chaque balise contient aussi une balise de fin, pour indiquer les bornes du formatage.

Exemple : l'Archipel des <B>Gl&eacute;nan</B> en face de Fouesnant.

Résultat : l'Archipel des Glénan en face de Fouesnant.

La balise <B> (ou la balise <strong>) indique que le texte suivant la balise sera mis en gras jusqu'à la balise de fin <B>. Les caractères accentués sont stockés sous la forme &LettreAccent; comme le montre le é de Glénan qui est stocké sous la forme é signalant un e accent aigue.

Une page html doit toujours contenir des balises minima indiquant le début du code html, l'entête et le corps du code.

Elle est notée sous la forme :

 <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    </BODY>
</HTML> 

L'intérieur de la balise d'en-tête (<head>) sert à mettre les méta balises (voir le chapitre sur les Meta Tags), les scripts et autres codes qui ne seront pas directement visibles dans la page.

Dans le corps (<body>) se trouve le contenu de la page proprement dit.

04-model-28-code-creationDreamweaver permet de travailler suivant trois modes d'affichage : contenu de la page (Création), code de la page (Code) ou un mode mixte (Fractionner). Si vous continuez à réaliser des sites, ce mode d'affichage sera souvent le plus pratique car il permet d'utiliser l'un ou l'autre mode en fonction de la facilité d'usage de chaque présentation. Ce type d'affichage est suffisamment intéressant pour que Microsoft FrontPage l'ai intégré dans sa version 2003.

Le fait de sélectionner « stori » dans le code ou dans la partie création sélectionne aussi dans l'autre mode. En cas de modification dans le code, il faut cliquer dans la fenêtre de création pour voir les modifications s'appliquer ou utiliser la touche (F5).

04-model-28-code-fractionner

Le texte sera tapé en mode Création et le gras, ainsi que toute autre mise en forme, seront gérés par les boutons des barres d'outils ou les menus, ce qui est plus pratique pour les personnes connaissant un traitement de texte.

L'accès au code HTML est souvent effectué quand le résultat n'est pas celui souhaité ou pour réaliser des fonctions non prises en compte par boutons ou menus.

Le code généré pour la page contient environ 120 lignes qu'il est difficle à appréhender pour un novice. Les parties en gris (très nombreuses) correspondent au code lié au modèle et qu'il ne faut pas modifier dans une page, mais uniquement en chargeant le modèle. Ne vous inquiétez pas, Macromedia a prévu ce cas de figure et il ne se passe rien si vous essayer de supprimer une partie grise du code.

En enlevant certaines parties grises et en synthétisant d'autres, on peut réduire le code de la page historique.htm à :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
Début du HTML et début de l’entête du document
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Histoires et l&eacute;gendes aux Gl&eacute;nan</title>
    « Le titre de la page qui s’affiche dans le navigateur »
    <script language="JavaScript" type="text/JavaScript">
    Scripts permettant de charger les images et de gérer le roll-over des Dauphins dans les menus
    </script>
    <link href="/glenan.css" rel="stylesheet" type="text/css">
    Chargement de la feuille de style associé à la page
</head>
Fin de l’entête
<body onLoad=" script de chargement des images du roll-over ">
Début du corps du document
    <table width="100%" border="0">
    Tableau de 2 lignes et 2 colonnes
        <tr align="center" valign="middle">
        Première ligne centrée verticalement et horizontalement
            <td width="150">&nbsp;</td>
            Première cellule de la première ligne d’une largeur de 150 px avec une espace insécable &nbsp;
            <td>
            Début de la deuxième cellule de la première ligne
            <h1>Historique</h1>
            En-tête 1
            </td>
            fin de la deuxième cellule de la première ligne
        </tr>
        fin de la première ligne
        <tr>
        Deuxième ligne
            <td width="150" align="center" valign="top">
            Début de la première cellule de la deuxième ligne
                <table>
                Tableau contenant le menu des dauphins
                <table>
            </td>
            Fin de la première cellule de la deuxième ligne
            <td align="left" valign="top>
            Début de la deuxième cellule de la deuxième ligne
            <p>Contenu de la page</p>
            Paragraphe dans la cellule
            </td>
        </tr>
        Fin de la deuxième cellule et fin de la deuxième ligne
    </table>
    </body>
<html>
fin du tableau, du corps du document et du code HTML

 Un rudiment de cours HTML (toujours en bleu foncé et en rouge pour les commentaires) est dispensé tout au long du site pour connaître un minimum sur la structure du langage.

­