- By: Philippe LÉOST
- In: Dreamweaver
Aucun accent, ni d'espace dans les noms de fichiers d'un site.
La page d'accueil d'un site est très souvent index.html
Publier et tester le site avant le référencement
- By: Philippe LÉOST
- In: Dreamweaver
L'hébergeur
Le choix de l'hébergeur est important. Il permet :
La mise en ligne du site
L'acquisition d'un nom de domaine
La création d'adresses de courrier électronique spécifique
Les statistiques de visite du site...
Globalement, il est possible de choisir 3 types d'hébergement.
Votre fournisseur d'accès à Internet (FAI) propose un hébergement gratuit dans la majorité des cas.
Un hébergeur gratuit (si vous n'avez pas de FAI ou si vous avez plusieurs sites) de type multimania.com ou autre. Souvent les sites gratuits imposent de la publicité.
Le choix d'un fournisseur payant évite la pub et propose, plus ou moins, des services.
Meta Tag
Afin de permettre un meilleur référencement de votre site, modifier les Meta Tag de votre page.
Prendre la page index.html et utiliser le menu « Insertion – HTML – Balises d'en-tête», puis respectivement « mots-clés » et « description ».
Attention à ne pas oublier la balise « Titre » (title) par le menu « Modifier – Propriété de la page » dans la catégorie « Titre – codage ». Il a plusieurs utilités :
- Permet l'ajout dans les favoris de l'internaute. Si le nom est « page d'accueil » ou « Document sans nom », cela est moins utile...
- Utiliser par certains moteurs pour le référencement (type Google...)
- Texte apparaissant dans certains moteurs pour nommer le site.
Utiliser l'icône Fractionner ou Code et se positionner après la fin de la balise <TITLE>, sinon les balises peuvent être incluses dans la page à l'endroit du curseur.
Pour la balise description mettre une phrase de description de votre site. Pour le site actuel cela peut être : Créer un site avec Macromedia Dreamweaver et Fireworks sur Glénan Formation.
Pour la balise keywords taper tous les mots clés décrivant le site pour le référencement. Pour le site actuel cela peut être : formation, informatique, multimédia, création, site, Internet, macromedia, fireworks, dreamweaver, studio, MX, glénan, léost, fouesnant, saint-nicolas, penfret, cigogne, drenec, bananec, loc'h, moutons, brunec, brilimec, goéland, cip, narcisse, Finistère, Bretagne, France.
Valider et recommencer l'opération sur les différentes pages du site. Il est aussi possible d'utiliser l'icône Fractionner ou Code pour effectuer des copier coller sur les différentes pages. Si le travail de réflexion des mots-clés a été réalisé en amont, il est possible de l'intégrer directement dans le modèle avant génération des pages. Sinon le puissant menu « Edition – Rechercher et remplacer... » permet de procéder à cette opération sur l'ensemble du site.
Publier
Si les paramètres de publication en FTP n'ont pas été renseignés dans la partie « Site Dreamweaver », faites-le maintenant.
Cliquer sur l'icône développer- réduire de l'onglet Fichier pour basculer dans un mode permettant de visualiser simultanément les fichiers locaux et ceux du site distant.
Si une seule personne utilise la mise à jour du site il est préférable d'utiliser les icônes Acquérir et Placer pour envoyer le site sur Internet ou pour le récupérer.
Dans le cas d'un travail collaboratif avec Dreamweaver ou d'autres logiciels tel que Contribute, il est préférable d'utiliser les boutons Extraire et Archiver. Si cette fonction n'est pas activée, une boîte de dialogue le signale et demande d'activer la fonction.
Cliquer sur la racine du site local, puis sur « Placer » pour mettre le site sur Internet. Pour un site comme celui-ci, dont le poids total est inférieur à 1 Mo, compter environ 5 à 7 minutes de publication avec une ligne téléphonique classique. Le placement d'un site complet pouvant être long, le système vous demande confirmation.
Une boîte de dialogue affiche le transfert des fichiers au fur et à mesure de la publication.
Ultérieurement il est inutile de publier l'intégralité du site, mais uniquement une partie. Pour cela sélectionner les fichiers ou les dossiers devant être publiés. Si des pages web intégrent d'autres éléments (images...), un message vous demande s'il faut transférer les objets liés. Si vous n'êtes pas certain des éléments inclus dans une page ainsi que des modifications que vous avez faites, il est préférable de répondre « Oui ».
Tester le site
Se connecter sur le site et vérifier qu'il fonctionne correctement, que toutes les pages ainsi que les images s'affichent et que les liens sont effectifs. Tester également les liens de messagerie électronique...
Ces tests peuvent se faire sur Internet Explorer, Nets cape, Opéra... sous PC, Mac et station Unix.
Le test des différentes versions de navigateur est possible avec Nets cape car plusieurs versions peuvent cohabiter, mais cela est impossible avec MSIE (à moins d'être un as de la partition ou de disposer d'autant d'UC).
Tester au minimum sur PC avec Internet Explorer et également avec Nets cape sur PC qui sont les environnements les plus courants. Si vous connaissez une personne ayant un Mac, demandez-lui de tester votre site. Attention Mac OS X diffère fondamentalement des versions antérieures du fait de son noyau et tous les Macintosh n'ont pas encore effectué la migration.
En fonction des résultats des tests, faire les modifications sur le site. Recommencer la publication et tester de nouveau les modifications. Quand tout est OK, passer au référencement.
Référencer son site
Comment référencer
Pour référencer un site il faut se connecter sur les différents moteurs de recherche et chercher l'assemblage d'un des verbes : référencer, ajouter, add, soumettre, submit... avec un des mots suivants : page, URL, site...
Il existe globalement 2 catégories référençables sans bourse déliée :
ceux dont le référencement est direct.
ceux qui demande de sélectionner une catégorie au préalable.
Le lien pour le référencement est souvent changeant (y compris l'adresse de la page de référencement). Elle peut être en haut, en bas, à droite ou sur la gauche de la page d'accueil, ou encore sur une autre page...
Attention : les outils de référencement évoluant rapidement, c'est davantage la méthode qu'il faut appréhender.
Sur http://fr.altavista.com/ cliquer sur le lien « soumettre un site ». Cliquer sur « Basic Submit » sauf si vous avez un abonnement.
Dans ce cas (comme dans d'autres), il vous faut taper un code représenté par une image (non sensible à la casse) pour être certain que vous n'êtes pas sur un robot de référencement...
Taper ensuite l'URL à ajouter et l'adresse de contact.
Sur http://fr.yahoo.com/ dans un premier temps choisir la catégorie principale dans laquelle sera le site : Accueil > Exploration géographique > Pays > France > Régions > Bretagne. Sélectionner le lien « Proposer un site ».
Il existe au minimum 2 types de soumission (gratuit et payant). Renseigner tous les champs obligatoires (suivis d'un astérisque) et valider.
Compter au minimum 2 à 6 mois pour que votre site soit référencé.
Avec l'arrivée de nouveaux internautes totalement néophytes, n'oubliez pas les moteurs spécifiques au FAI.
Autres moyens de promotion
En plus des moyens papier (papier à entête, carte de visite...) ou équivalent (signature de mail...), il est possible de promouvoir son site grâce à de nombreuses astuces.
Chaque façon ayant son public, ses spécificités, ses avantages et ses contraintes.
Il est possible de citer, entre autres : les webrings, l'achat de nom, l'échange de liens, les bannières, les newsletters, les newsgroups, la publicité traditionnelle...
Petite liste de moteurs
CA | Sympatico-lycos | |
CA | Toile du Quebec | |
CH | Carrefour | |
FR | AdmiNet | |
FR | AltaVista FR | |
FR | Breizhoo | |
FR | C’est Trouvé | |
FR | Ecila | |
FR | ESpotting | |
FR | Eurêka | |
FR | EuroSeek | |
FR | ExaLead | |
FR | Excite | |
FR | Francité | |
FR | ||
FR | Hoot Bot | |
FR | Indexa | |
FR | Infoseek | |
FR | Lokace | |
FR | Lycos | |
FR | MSN | |
FR | Nets cape | |
FR | Nomade | |
FR | Overture | |
FR | Qui Quoi Où | |
FR | Snap | |
FR | Spray | |
FR | Voila | |
FR | WoOep | |
FR | Yahoo | |
US | Altavista | |
US | AOL search | |
US | Direct Hit | |
US | Dog Pile | |
US | Fast Search | |
US | Go | |
US | GoTo | |
US | LookSmart | |
US | Mamma | |
US | Meta Crawler | |
US | MSN | |
US | NBCi | |
US | Nets cape Netcenter | |
US | Northen Light | |
US | Open Directory project | |
US | Profusion | |
US | Teoma | |
US | WebCrawler | |
US | WiseNut | |
US | Yahoo |
Le résultat est disponible en cliquant ici.
- By: Philippe LÉOST
- In: Dreamweaver
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èce unique au monde</a></li> <li><a href="#reserve">La plus petite ré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 » :
Sélecteur | Type | Valeur |
a :link | Couleur | #FFFFCC (jaune pale) |
a:visited | Couleur | #CCFFFF (bleu pale) |
a:hover | Décoration | Aucune |
a:active | Epaisseur | Gras |
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 :
Catégorie | Type | Valeur |
Type | Taille | 18 pixels |
Type | Couleur | #FFFFCC (jaune pale) |
Arrière-plan | Couleur d'arrière-plan | #006699 (bleu) |
Bloc | Alignement du texte | centrer |
Boîte | Remplissage (Idem pour tous) | 5 pixels |
Bordure | Style (Idem pour tous) | Pointillé |
Bordure | Largeur (Idem pour tous) | Fin |
Bordure | Couleur (Idem pour tous) | #FFFFCC |
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 :
Catégorie | Type | Valeur .TableauTitre | Valeur .TableauContenu |
Type | Epaisseur | gras | |
Type | Couleur | #006699 (bleu) | |
Arrière-plan | Couleur d'arrière-plan | #006699 (bleu) | #FFFFFF (blanc) |
Bloc | Alignement du texte | droite | |
Boîte | Remplissage (droite et gauche) | 10 pixels | 10 pixels |
Bordure | Style (Idem pour tous) | Solide | solide |
Bordure | Largeur (Idem pour tous) | 1 pixel | 1 pixel |
Bordure | Couleur (Idem pour tous) | #006699 (bleu) | #FFFFFF (blanc) |
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 :
Texte | Lien |
Saint Nicolas | st-nicolas.htm |
Penfret | penfret.htm |
Le Loc'h | loch.htm |
Fort Cigogne | cigogne.htm |
Drenec | drenec.htm |
Les Moutons | moutons.htm |
Autres îles | autres_iles.htm |
Brunec | autres_iles.htm#brunec |
Quigninec | autres_iles.htm#quignenec |
Brilimec | autres_iles.htm#brilimec |
Guéotec | autres_iles.htm#gueotec |
Guiriden | autres_iles.htm#guiriden |
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.
- By: Philippe LÉOST
- In: Dreamweaver
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.
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.
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.
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.
Le résultat devra être comme ci-contre :
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
Si vous n'avez pas mis les dauphins en relief, chargez le fichier « dauphin-biseau.png »
Sé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 ».
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).
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
Le 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 »).
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 ».
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.
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.
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
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 |
Pour 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... »
Sé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).
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).
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).
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.
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 |
Utiliser 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 »
Pour 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.
Intégration du menu
Cliquer 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.
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.
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 »).
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.
Cliquer 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.
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
Cliquer 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.
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 ».
Le résultat est visible ci-contre. Enregistrer le fichier.
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.
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 ».
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.
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
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.
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.
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.
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é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.
Dreamweaver 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).
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égendes aux Glé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"> </td>
Première cellule de la première ligne d’une largeur de 150 px avec une espace insécable
<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.
- By: Philippe LÉOST
- In: Dreamweaver
- By: Philippe LÉOST
- In: Dreamweaver
L'interface de Dreamweaver
Lors du premier démarrage de Dreamweaver, choisir entre « Designer » et « Codeur ». A moins d'être programmeur le choix de « Designer » (choix par défaut) est préférable.
Au bout de quelques instants, l'interface de Dreamweaver apparaît. Aucun élément récent n'est disponible, mais 3 autres menus sont proposés : Créer, Créer à partir d'exemples et Supplément.
Dreamweaver Exchange vous permet de télécharger de très nombreux composants (gratuits ou payants) qui facilitent certaines étapes de la conception de site. Utiliser « Exchange search » pour trouver l'add-on de dreamweaver qui vous manque. Le didacticiel n'utilise que la version standard de dreamweaver.
Un dossier pour le site
En tout premier lieu dans la création d'un site, et quel que soit le logiciel, vous devez créer un dossier qui contiendra l'ensemble de vos données : pages Internet (HTML) et médias (images, sons...).
Il est impératif que l'ensemble de votre site soit dans le dossier (ou accessible sur un site Internet).
Si vous avez une page ou un média en-dehors du dossier, vous le visualiserez correctement en local. Cependant, après le transfert chez l'hébergeur, vous ne pourrez plus accéder à la page ou au média et vous obtiendrez un message d'erreur.
Site Dreamweaver
Sur la fenêtre de démarrage de Dreamweaver, cliquez sur « Site Dreamweaver... ». Si cette fenêtre n'est plus disponible, utiliser le menu « Site – Gérer les sites... » et cliquer sur « Nouveau - site... ».
Donner un nom à votre site « Glénan Dreamweaver » et cliquer sur suivant. Le choix « Non, je ne veux pas utiliser de technologie serveur. » est sélectionné par défaut et c'est le seul choix traité dans ce support. Cliquer sur « suivant ». Excepté pour les intranets (et encore) et d'autres cas (utilisation de Contribute...) il est préférable de laisser « modifier les copies locales sur ma machine, puis télécharger vers le serveur lorsque je suis prêt (recommandé) » et sélectionner le dossier où vont se trouver tous les éléments de votre site et cliquer sur « suivant ». Dans la partie « Partage de fichiers, sélectionner « FTP » ou « aucun » si vous n'avez pas encore pris de disposition pour l'hébergement.
L'hébergeur de votre site vous fournit des paramètres qui permettront la publication du site.
- L'adresse FTP (chez wanadoo : ftp://perso-ftp.wanadoo.fr...).
- Le login de connexion de votre site (chez wanadoo : votre identifiant de courrier électronique principal).
- Un mot de passe associé au login (chez wanadoo : votre mot de passe de messagerie).
- Un dossier de publication (non utile chez wanadoo) qui est souvent : www ; public_html...
Saisir la destination de publication en y introduisant éventuellement le répertoire distant. Taper le login et le mot de passe. Avant de cliquer sur suivant, cliquer sur « Tester la connexion » pour valider les paramètres de connexion.
Choisir « Non, ne pas activer l'archivage et l'extraction. », puis sur « suivant » et « Terminé »
Pour modifier les paramètres ultérieurement, utiliser le menu « Site - Gérer les sites... - Modifier... » et utiliser « Suivant » et « Précédent » pour modifier les paramètres ou utiliser l'onglet « Avancé ».
- By: Philippe LÉOST
- In: Dreamweaver
Ce cours a pour but d’apporter une aide aux personnes ayant déjà suivi une formation (entreprises, étudiants…) pour retrouver facilement leurs repères. Si vous n’avez jamais suivi de formation et que le sujet vous intéresse, vous pouvez me contacter : en tant qu’organisme de formation agréé, une convention de formation peut être établie ce qui vous permet une prise en charge par votre FAF (Fond d’Aide à la Formation).
Les parties théoriques sont omises pour ne garder que la partie ludique de la création de site.
Néanmoins, si vous souhaitez réaliser un site, vous y arriverez rapidement à partir d’un exemple sur les Glénan. Certaines techniques, même si elles ne sont pas utilisées conjointement, permettent d’aborder des techniques différentes. En suivant ce didacticiel, vous augmenterez votre connaissance des îles de Glénan à défaut de parfaire votre maîtrise de Dreamweaver et de Fireworks.
Commencer la formation |