Lancement de Dreamweaver - source url
Sans loi c'est la violence : le monopoly (pas très keynesien), les règles doivent
...... Sur les données personnelles arrivées à expiration, contre le spaming, non
...... Dès qu'on corrige quoi que ce soit on le parrafe, pas d'interligne, et on signe
...
part of the document
Comment sy retrouver avec Dreamweaver? Explications et exercices
Document préparé par Annie Brouard, chargée de cours à lUniversité de Sherbrooke. Notes de cours préparées dans le cadre du cours HST_762, Lhistoire et les TICS. http://www.pages.usherbrooke.ca/abrouard/hst762/
Lancement de Dreamweaver
Pour démarrer le logiciel, cliquez sur Démarrer -> Programmes -> Macromedia Dreamweaver -> Dreamweaver
Fermez les nombreuses petites fenêtres qui encombrent un peu votre écran.
Nommer la page et enregistrer le fichier
Dès que vous créez une nouvelle page, prenez toujours l'habitude d'attribuer un titre à la page et de l'enregistrer. Dreamweaver a besoin de connaître l'emplacement de votre page pour y associer des images ou d'autres pages. Si vous n'enregistrez pas votre page, vous recevrez des messages bizarres qui entraînent parfois la panique et plus tard, vos images sembleront disparaître.
Pour éviter les problèmes et les insomnies, enregistrez toujours vos nouvelles pages!!!
Donc, pour enregistrer, cliquez sur Fichier -> Enregistrer sous ... votre dossier www
Attention: un nom de fichier ne doit jamais comporter d'accent ou d'espace
Exemple 1: premiere_page.htm (ok) Exemple 2: première page.htm ( mauvais)
Assurez-vous d'utiliser l'explorateur pour placer le fichier dans votre nouvel espace de travail, Exemple, c:\www\hst762, comme ci-dessous :
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/enregistrer_page1.gif" \* MERGEFORMATINET
Seconde étape, donnons un titre à la page. Cliquer sur Modifier -> Propriétés de la page. Vous verrez la boîte de dialogue suivante :
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/titre_page1.gif" \* MERGEFORMATINET
Inscrivez Première page Web dans la case Titre.
Propriétés générales de la page
Cette boîte de dialogue permet aussi de définir les propriétés générales de la page. Comme il s'agit d'une première page, allons-y avec un peu de fantaisie.
Cliquez sur la petite boîte située à droite de Couleur d'arrière-plan. Une palette de couleurs apparaîtra :
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/couleur_page1.gif" \* MERGEFORMATINET
Cliquez sur une des couleurs, j'ai choisi un genre de beige.
Cliquez sur le bouton Appliquer. La couleur choisie sera appliquée au fond de la page.
Cliquez maintenant sur la petite boîte à côté de Couleur du texte.
Choisissez une couleur pour le texte.
Cliquer sur le bouton OK pour appliquer votre choix et pour fermer la boîte.
Ajouter du texte
Inscrivons d'abord un titre dans le corps de la page.
Tapez le titre suivant : Une première page Web Appuyez sur la touche Entrée
Tapez le texte suivant : Voici ma première page Web avec Dreamweaver. Ce logiciel est très facile à utiliser. Il fonctionne presque comme un traitement de texte. Appuyez sur la touche Entrée
Le concept de paragraphe
Très important!
Lorsque vous appuyez sur la touche Entrée, Dreamweaver sépare le tout de DEUX INTERLIGNES comme deux paragraphes. Vous pouvez ensuite attribuer facilement des propriétés différentes aux divers paragraphes.
Pour créer un retour à la ligne avec SIMPLE-INTERLIGNE, le truc est d'appuyer sur la combinaison de touches SHIFT et Entrée.
La fenêtre des propriétés
Pour changer les attributs d'un bloc de texte, il faut d'abord faire apparaître la fenêtre des propriétés.
Cliquez sur Fenêtre -> Propriétés
Les titres, sous-titres, etc.
Le html permet de définir 6 niveaux de titres et de sous-titres. Du point de vue structurel, il est préférable d'utiliser ces niveaux que de simplement mettre son texte en gras.
Le titre
Cliquez dans le premier paragraphe de votre texte, où vous avez inscrit Une première page Web.
Dans la boîte de propriétés, section Format, cliquez sur la flèche à côté du mot Paragraphe et sélectionnez En-tête 1 comme suit :
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/h1_page1.gif" \* MERGEFORMATINET
Votre premier paragraphe deviendra plus gros et sera en gras.
Tout comme sur un traitement de texte, vous pouvez centrer le texte en cliquant sur le bouton symbolisant le centrage du texte, soit le deuxième bouton à droite du I majuscules en italique.
Les parties de paragraphe
Par défaut, les propriétés s'appliquent à l'ensemble d'un paragraphe. Pour changer les propriétés d'une partie d'un paragraphe, il faut d'abord le sélectionner.
Sélectionnez le mot Web dans votre texte et cliquez sur le bouton B de la boîte des propriétés. Le mot sera dorénavant en gras.
Sélectionnez le mot Dreamweaver dans votre texte et cliquez sur le bouton I de la boîte de propriétés. Le mot sera dorénavant en italique.
La couleur d'un bloc de texte
Sélectionnez maintenant le titre de votre page. Cliquez sur le bouton de sélection de couleur de texte dans la boîte de propriété.
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/couleurtexte_page1.gif" \* MERGEFORMATINET
Sélectionnez une couleur, disons le rouge.
Insérer une image
Téléchargez l'image ci-dessous dans votre espace de travail (Exemple : www\images) :
Voici le lien Web pour trouver cette image :
http://www.pages.usherbrooke.ca/abrouard/hst762/semaine2/hst762_s2_p12.php
Sur votre page Web, placez le curseur sous votre deuxième paragraphe.
Pour insérer l'image sur la page, cliquez sur Insertion -> Image
L'image que vous venez de télécharger devrait se retrouver dans votre répertoire.
Double-cliquez sur le nom du fichier de l'image et l'image va se placer sur votre page.
Enregistrer la page
Enregistrez maintenant votre page en cliquant sur Fichier -> Enregistrer. Il est important denregistrer souvent lorsquon travaille sur un document.
Consulter votre page dans un fureteur
Cliquez sur Fichier -> Aperçu dans le navigateur et choisissez un navigateur dans la liste. Vous n'en avez probablement qu'un seul.
Votre fureteur sera lancé et votre page web y sera affichée. Le résultat ressemblera peut-être à ceci :
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/final_page1.jpg" \* MERGEFORMATINET
Maitriser le texte avec Dreamweaver
Objectif
L'objectif de cet exercice est de vous amener à maîtriser les différentes fonctions associées à la mise en forme du texte sur Dreamweaver. Lorsque vous aurez à créer des pages, vous pourrez aussi y revenir pour y découvrir divers trucs. Il n'y a donc aucune image, lien ou quoi que ce soit sauf du texte. Je vous fournis donc un texte que vous pourrez copier et coller pour le mettre en forme, ce qui vous évitera d'avoir à inventer un texte.
Préparation pour les deux logiciels
Ouvrez Dreamweaver
(Avec Dreamweaver: Assurez-vous que la boîte des propriétés est affichée. Sous le menu Fenêtre, l'option Propriétés devrait être cochée. Si elle ne l'est pas, sélectionnez cette option du menu.)
Créez un nouveau document html (Fichier -> Nouveau)
Prenez une bonne habitude, enregistrez votre page et donnez-lui un titre. Le nom du fichier sera vieux_carre.htm et le titre de la page sera Le Vieux Carré, un quartier créole de la Nouvelle-Orléans.
Notez que nous n'avons pas mis d'espace ou d'accent dans le nom du fichier. Veuillez respecter cette consigne pour tous vos fichiers à utiliser sur le Web. La conversion d'accents et d'espaces dans les noms de répertoires ou de fichiers demeure imprévisible.
Le texte que vous allez utiliser apparaîtra dans une fenêtre distincte en cliquant sur ce HYPERLINK "vieux_carre.txt"lien.
Sélectionnez et copiez le texte.
Raccourci : cliquez dans la fenêtre contenant le texte et enfoncez les touches Ctrl et A en même temps pour sélectionner le texte au complet. Cliquez sur Ctrl et C pour copier.
Collez le texte dans votre nouveau document Dreamweaver .
Gérer les blocs de texte
Les paragraphes
La notion de paragraphe est à la base du fonctionnement de Dreamweaver. Chaque fois que vous appuyez sur la touche Entrée, vous créez un nouveau paragraphe avec un double-interligne entre les deux alinéas (je sais que je me répète, mais ce concept est important).
Vous allez donc créer des paragraphes aux endroits suivants du texte :
après Vieux-Carré :
après Un quartier créole de la Nouvelle-Orléans
après Introduction
entre des orages soudains. et Au bout des ruelles
entre le passé créole et colonial de la ville. et Description de la ville
avant les mots Cartes et plans
après Cartes et plans
après les dates 1754, 1763, 1803 et les deux 1720
après le mot Activités
après les mots échanges culturels
Votre texte est maintenant séparé en paragraphes.
Les titres
Vous devez vous demander pourquoi j'ai créé un exercice qui semble tellement stupide. Oui, je lis dans vos pensées pendant que vous êtes à l'écran. ;-)
La plupart des gens utilisent très mal leur traitement de texte. Cet exercice, en plus de vous montrer plusieurs fonctions de Dreamweaver, vous montrera quelques trucs pour mieux structurer des textes en blocs bien définis. Ceci facilite grandement la lecture sur le Web où on retrouve encore de longs textes continus.
Le html offre six niveaux de titres. Le niveau 1 est utilisé pour le titre principal d'une page, le niveau 2 pour les sous-titres, les niveaux 3 et 4 pour des subdivisions encore plus petites. La taille des caractères diminue avec les niveaux. Un titre 4 est de la même grosseur que du texte normal mais est en gras. Les titres 5 et 6 sont plus petits que le texte normal et sont souvent utilisés dans les pieds de page et autres génériques.
sélectionnez le premier paragraphe Vieux-Carré :
dans la boîte de propriétés, la première option en haut et à gauche est Format.
cliquez sur le menu déroulant de cette option et sélectionnez En-tête 1 ou Titre 1
sélectionnez le second paragraphe Un quartier créole de la Nouvelle-Orléans
définissez ce paragraphe comme étant un En-tête 2 ou Titre 2
Le titre 1 d'une page Web reprend normalement le titre inscrit dans les propriétés de la page. Dans notre cas, le titre 1 et le titre 2 font partie du titre inscrit dans les propriétés lors de la préparation.
sélectionnez le mot Introduction
faites-en un En-tête 3 ou Titre 3
répétez l'opération avec les mots Cartes et plans et Activités
Les grandes divisions de votre texte sont maintenant définies. L'avantage d'utiliser les niveaux d'en-tête, tant avec un traitement de texte, c'est qu'il est plus facile d'extraire une table des matières. Les logiciels de traitement de texte vous permettent ainsi de générer automatiquement vos tables des matières par la suite.
Alignement du texte
Comme dans un traitement de texte, on peut aligner un bloc de texte à gauche, au centre ou à droite. Il est techniquement possible de justifier un paragraphe gauche/droite, mais tous les fureteurs ne prennent pas en charge cette fonction. Elle n'est donc pas disponible dans Dreamweaver.
cliquez sur votre titre 1, Le Vieux Carré.
en haut et à droite de la boîte de propriétés, vous verrez les mêmes 3 icônes qui sont utilisées sur les traitements de texte pour symboliser l'alignement du texte.
cliquez sur l'icône centrée
répétez l'opération avec le titre 2, Un quartier créole de la Nouvelle-Orléans
Une erreur courante chez les débutants est de jouer avec les alignements. On retrouve souvent de longs textes centrés ou alignés à droite. À moins d'écrire en juif ou en arabe, alignez seulement les colonnes de chiffres à droite. Évitez les alignements au centre sauf pour les titres. Il n'y a rien de pire pour les yeux que d'avoir à lire un texte dont la marge de gauche se déplace de ligne en ligne. D'accord il y a pire, comme lire un texte en jaune sur fond blanc!
Les sauts de ligne
Tout le monde se demande toujours comment créer un saut de ligne en évitant de créer un nouveau paragraphe. Comme d'habitude, il y a deux méthodes. Une fois qu'on a placé le curseur où on veut insérer un saut de ligne, on peut
Dans Dreamweaver
dans la barre de menu, cliquer Insertion -> Saut de ligne
OU
enfoncer les touches Majuscule et Entrée (pas la touche FixMaj mais la touche avec la grosse flèche qui pointe vers le haut soit Shift)
Allons-y en travaillant notre générique à la fin du texte. Vous allez insérer des sauts de ligne après chacun des mots suivants
après optimisé
après et plus
après fureteurs
après Service
Nous allons maintenant centrer ce générique. Sélectionnez le paragraphe au complet et centrez-le.
Les doubles-espaces
N'essayez pas d'aligner du texte en multipliant les espaces. Il existe des techniques plus efficaces et plus sûres pour arriver à cette fin.
À l'occasion, on peut avoir besoin d'insérer plus d'un espace. Pour y arriver, cliquez sur l'option de menu Insertion puis Espace insécable. Sur les versions plus récentes de Dreamweaver, il faut faire Insertion -> Caractères spéciaux -> Espace insécable.
Les listes
Les listes servent à séparer un bloc de texte pour faciliter l'énumération de points. Chaque item peut commencer par une puce (liste à puce) ou par un numéro (liste numérotée).
Les listes à puces
On peut facilement transformer une série de paragraphes en liste à puces.
sélectionnez l'ensemble des items des cartes et plans, de Les possessions françaises à Plan de la Nouvelle-Orléans, 1720.
dans la boîte de propriétés, vous verrez, sous le B, l'icône pour les listes à puces
cliquez sur cette icône
vous avez une liste à puces
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/listenvu.gif" \* MERGEFORMATINET
Les listes numérotées
On peut aussi créer une liste à mesure que l'on tape. Chaque retour à la ligne crée un nouvel item à la liste. Dans le cas d'une liste numérotée, chaque item est automatiquement numéroté sans que l'on ait à inscrire les numéros soi-même. Lorsqu'un item est déplacé, le tout est automatiquement renuméroté.
sélectionnez le texte de Transformations architecturales à échanges culturels
cliquez sur l'icône de liste numérotée (à côté de l'icône de la liste simple)
insérez un retour à la ligne après les mots suivants
architecturales
culture créole
votre communauté
échanges culturels
La liste s'est numérotée toute seule. Comme vous pouvez le constater à partir de ma propre liste ci-dessus, on peut créer une sous-liste. Pour qu'un item soit déplacé dans une sous-liste, vous n'avez qu'à le sélectionner et à cliquer sur l'icône située sous l'icône permettant l'alignement à droite, soit l'icône Retrait.
Les paragraphes en retrait
Lorsquon veut inclure des citations de plus de 3 lignes, elles doivent être mises dans un paragraphe distinct en retrait.
Il nous reste un énorme bloc de texte, soit la description de la ville par Charlevoix en 1722.
insérez un saut de ligne entre 1722. et Cette Ville
sélectionnez le paragraphe, de Description de la ville à riche Colonie.
cliquez sur l'icône Retrait du texte (icône située sous l'icône servant à centrer un paragraphe
ou cliquez sur l'option du menu Texte -> Retrait
répétez pour augmenter le retrait
pour réduire ou éliminer le retrait, cliquez sur l'icône Retrait négatif ou sur Texte -> Retrait négatif
: INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/retraitnvu.gif" \* MERGEFORMATINET
L'apparence des caractères
Les caractères et leurs attributs
Vous pouvez changer l'apparence, le style, la taille des caractères. On peut utiliser une famille de police pour les en-têtes et une famille pour les paragraphes.
Les caractères spéciaux
Dans Dreamweaver Dans le générique, vous voyez le mot Copyright écrit tout au long. cliquez sur l'option Fenêtre -> HTML du menu
cliquez dans la petite fenêtre qui apparaît pour que le fond passe du gris au blanc
effacer le mot copyright au bas du texte
tapez exactement ©
fermez la fenêtre en cliquant sur le x dans le coin supérieur droit
Vous avez un symbole de copyright ©. Cette technique est préférable au copier-coller à partir d'une autre page ou d'une table de caractère car elle vous assure que votre symbole sera lu par tous les types d'ordinateurs.
La police de caractère
Il existe deux grandes familles de police : avec serif et sans serif. On reconnaît la première par les petits traits (ou pattes) qui prolongent les extrémités des lettres. Les polices sans serif n'ont pas ces pattes. La police Times New Roman est une police serif alors que Arial est une police sans serif. De manière générale, l'imprimé se lit mieux en serif alors que le texte à l'écran se lit mieux en sans serif. Plus petit est le caractère, mieux il vaut le mettre en sans serif. Par défaut, vous voyez le texte créé en Times New Roman.
sélectionnez le générique du texte, de Site optimisé à L. Robichaud
dans la boîte de propriétés, vous verrez un menu Police par défaut
sélectionnez l'option Arial, Helvetica, sans serif dans Dreamweaver et Helvetica, Arial dans NVU
La taille des caractères
Vous avez paniqué en voyant votre texte devenir plus gros une fois que vous l'avez changé en Arial? Rien à craindre, nous allons réduire la taille.
si le générique est désélectionné, sélectionnez à nouveau le générique
trouvez la section Taille de la boîte de propriétés
faites défiler les options jusqu'à ce que vous voyez l'option -2
cliquez sur l'option -2
votre texte est plus petit
Il est préférable d'utiliser les options +1 à +6 et -1 à -6 que des tailles absolues (de 1 à 6). Les tailles relatives permettent à votre texte de s'adapter plus facilement.
Le gras, le souligné et l'italique
Pour mettre du texte en gras, il suffit de le sélectionner et de cliquer sur l'icône B de la boîte des propriétés ou de cliquer sur l'option Texte -> Style -> Gras du menu ou d'enfoncer les touches Ctrl et B.
sélectionnez le titre de la citation (Description de la ville....)
appliquez le gras
Le souligné est peu utilisé sur le Web pour éviter la confusion avec les liens hypertexte. Si vous devez absolument souligner,
sélectionnez le texte à souligner, nous sélectionnerons Traduction L. Robichaud
cliquez sur l'option de menu Texte -> Style -> Souligné
Souvent, les génériques sont en italique quoique le petit texte soit difficile à lire en italique. Mettons donc notre générique en italique. Tout comme pour le gras, il existe 3 méthodes : une icône dans la boîte de propriétés, une option dans le menu Texte -> Style et la combinaison de touches Ctrl + I
sélectionnez le générique au complet
appliquez l'italique
La couleur du texte
N'abusez pas de la couleur si vous voulez éviter que votre page ne ressemble à un char allégorique!!! On peut changer la couleur du texte pour l'ensemble de la page ou pour un passage de texte.
Nous allons changer la couleur du texte pour l'ensemble de la page.
cliquez sur Modifier -> Propriétés de la page
cliquez sur le carré à côté des mots Couleur du texte
choisissez le bleu mauve de la quatrième rangée, vers le milieu du bleu. Vous verrez le code #3333FF apparaître en bas, au centre de la palette de couleur
cliquez sur le bouton OK pour modifier la couleur de tout le texte
Nous allons maintenant mettre les titres d'une couleur plus foncée.
sélectionnez le titre Le Vieux Carré
dans la boîte de propriétés, cliquez sur le petit carré vide avec la petite flèche entre l'option Taille et l'icône B
choisissez la couleur portant le code #3300CC (4e rangée à partir du bas, à la limite entre le bleu et le mauve)
refaites le processus pour le sous-titre
Pour les autres sous-titres, nous allons prendre un raccourci.
cliquez sur le titre principal
vous verrez dans la boîte de propriétés le code de couleur #3300CC
copiez ce code
sélectionnez le mot Introduction
collez le code de couleur dans la boîte de propriétés
répétez pour Cartes et plans et pour Activités
: INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/fig1-7.jpg" \* MERGEFORMATINET
Si vous voulez changer la couleur d'un mot, vous sélectionnez le mot et vous utilisez le premier carreau de la boite de propriétés. INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/couleurnvu.gif" \* MERGEFORMATINET
La couleur du fond de l'écran
Vous devez toujours vous assurer de faciliter la vie de votre lecteur. Des lettres foncées sur un fond clair sont toujours préférables à un mélange illisible ou éblouissant. Le blanc n'a jamais fait mal à personne mais nous changerons la couleur à quelque chose de pâle.
cliquez sur Modifier -> Propriétés de la page
cliquez sur la boîte qui permet de changer la couleur d'arrière-plan
choisissez la couleur qui porte le code #FFFFCC (première rangée, entre le rose et le aqua)
Les codes de couleur
Sur le Web, les couleurs sont définies par l'addition des composantes de rouge, de vert et de bleu (en anglais red, green et blue, d'où l'acronyme RGB). Les valeurs varient de 0 pour aucune quantité de la couleur à 256 pour le maximum possible de cette couleur. On utilise la valeur hexadécimale (base 16), soit de 00 à FF pour chacune des trois couleurs. Chaque paire de caractères indique la quantité de chacune des couleurs que l'écran doit utiliser pour afficher la couleur finale. On obtient ainsi un code qui se situe entre 000000 pour le noir (aucune couleur) et FFFFFF pour le blanc (toutes les couleurs). Le dièse utilisé au début du code indique qu'il s'agit d'un code de couleur.
© HYPERLINK "mailto:annie.brouard@usherbrooke.ca" Annie Brouard, Université de Sherbrooke Date de création : Août 2006. Mise à jour : 2008-01-10
Le résultat de l'exercice
Le résultat
Votre page terminée devrait ressembler à ceci : INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/resultat_texte.jpg" \* MERGEFORMATINET
Les liens vers un autre site
Le lien hypertexte, l'élément de base d'un site
Sans lien hypertexte, un site Web n'est qu'une simple page perdue dans le désert. Ce sont les liens qui nous permettent de naviguer, de suivre un fil d'intérêt d'une page à l'autre, d'un site à l'autre. Les liens offrent une flexibilité impossible à atteindre sur un imprimé.
Nous verrons donc comment créer des liens vers un autre site, vers une autre page d'un même site et vers un point particulier d'une page. Pour ces exercices, nous allons utiliser notre bonne vieille page vieux_carre.htm.
Le lien vers un autre site Web
Ce type de lien est en fait le plus simple puisqu'on a simplement à indiquer l'URL complet vers lequel on veut diriger le lecteur.
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/dream.jpg" \* MERGEFORMATINET allez au bas de la pagevieux_carre.htm
sélectionnez les mots National Parks Service
pour créer un lien, vous pouvez
cliquer dans la zone Lien de la fenêtre des propriétés ou
cliquer sur l'icône de dossier entre la zone Lien et la zone Cible de la fenêtre de propriétés ou
appuyer sur la combinaison de touches Ctrl-L ou
utiliser l'option de menu Modifier > Hyperlien > Créer un lien
dans le premier cas, vous avez simplement à taper ou à copier l'URL suivant : http://www.nps.gov/ dans la zone Lien (le lien doit être tapé exactement pour être fonctionnel) et appuyez sur la touche Entrée
les trois autres méthodes affichent une boîte de dialogue sur laquelle nous reviendrons en détail dans la prochaine section. Pour l'instant, la zone pertinente est celle intitulée URL:
dans la zone URL, tapez ou collez le lien http://www.nps.gov/
cliquez sur le bouton Sélectionner
quelle que soit la méthode, les mots National Parks Service sont maintenant soulignés
Vérification des liens
Une fois qu'un lien est créé, vous pouvez voir son URL en cliquant sur un des mots du lien et en regardant dans la zone Lien de la boîte de propriétés.
Vous ne pouvez pas cliquer sur un lien à partir de Dreamweaver pour aller sur l'autre site. Dreamweaver est un éditeur et non un fureteur. Ouvrez la page avec Explorer ou Netscape ou Mozilla pour vérifier si vos liens fonctionnent.
Effacer un lien
Pour enlever le lien,
sélectionnez le texte auquel le lien est associé
cliquez sur Modifier > Hyperlien > Supprimer un lien
ou
effacez le lien dans la zone Lien de la boîte de propriétés lecteur.
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/logonvu.gif" \* MERGEFORMATINET allez au bas de la page vieux_carre.htm
sélectionnez les mots National Parks Service
pour créer un lien,
Allez dans Insertion Lien
Vous pouvez soit inscrire directement le lien ou sinon cliquez sur par parcourir pour sélectionner le document sur lequel vous souhaitez créer un lien
dans notre premier cas, vous avez simplement à taper ou à copier l'URL suivant : http://www.nps.gov/ dans la zone Lien (le lien doit être tapé exactement pour être fonctionnel) et appuyez sur la touche ok
quelle que soit la méthode, les mots National Parks Service sont maintenant un lien
© HYPERLINK "mailto:annie.brouard@usherbrooke.ca" Annie Brouard, Université de Sherbrooke Date de création : Août 2006. Mise à jour : 2008-01-10
Les liens vers une autre page d'un site
Créer une seconde page
Il est impossible de créer un lien vers une autre page de votre site si vous n'avez qu'une seule page. Il est donc nécessaire en ce moment de créer une seconde page.
cliquez sur Fichier > Nouveau ( ou Ctrl-N) pour créer une nouvelle page
donnez-lui immédiatement le titre Formes urbaines à la Nouvelle-Orléans
enregistrez le fichier sous le nom formes_urbaines.htm (assurez-vous qu'il est dans le même répertoire que vieux_carre.htm).
inscrivez le titre de niveau 1 suivant : Formes urbaines à la Nouvelle-Orléans
copiez et collez le texte suivant sur la nouvelle page :
C'est à la Nouvelle-Orléans qu'on retrouve le plus de traces tangibles de l'héritage français dans l'environnement urbain. Bienville y a appliqué les principes d'urbanisme qu'il avait pratiqués dans les deux versions de la Mobile. La fondation de la Nouvelle-Orléans germait déjà dans l'esprit de Bienville qui souhaitait avoir une ville sur le Mississippi. Dès 1718, Bienville envoie quelques immigrants à partir du Canada pour défricher le site et constuire des bâtiments temporaires, mais la planification et l'établissement de la ville date réellement de 1722. L'établissement du site de la Nouvelle-Orléans est compliqué par la construction dans un terrain bas et marécageux. Les marais ont posé des problèmes de santé pendant de nombreuses années et le fait que la ville soit située sous le niveau de la mer pose toujours des défis pour la construction. Aménagement urbain. Le point central de la ville est la place d'armes, le Jackson Square actuel. Du côté terrestre de la place, on retrouve l'église. Afin de donner encore plus d'impact à cet édifice, une rue additionnelle divisant les îlots situés derrière l'église créant un axe central. Sur la rive, de part et d'autre de la place, des quais sont construits. La ville suit un modèle linéaire, plus près de Montréal, où est né Jean-Baptiste Le Moyne de Bienville, que de Québec. La topographie est plus propice à un modèle linéaire car aucun obstacle ne vient limiter l'ouverture de rues ou la construction de maisons dans l'espace d'abord prévu pour la ville. Ce n'est qu'avec l'expansion de la ville au XIXe siècle que les formes urbaines vont épouser les courbes du Mississippi et remplir l'espace entre le fleuve et le lac Pontchartrain. Maison typique La maison typique de la Nouvelle-Orléans est adaptée aux grandes chaleurs et à l'humidité qui règnent dans la ville. De nos jours, la peinture est un élément sur lequel les propriétaires ne portent pas toujours une grande attention car l'humidité attaque rapidement les nouvelles couches de peinture. L'utilisation de cours intérieures permettait à l'origine de créer une zone où, dans un environnement verdoyant entours de murs élevés, la chaleur tendait à monter, créant un micro-climat plus frais. De nos jours, on y retrouve de plus un oasis de paix dans un environnement urbain bourdonnant d'activité. Compte tenu du taux de criminalité très élevé de la ville, les murs sont maintenant assortis de fils barbelés ou de tessons de bouteilles. Côté rue, la maison a normalement un balcon ou une galerie surplombant la rue. Cet élément architectural protège les piétons du soleil (et de la pluie) tout en agrémentant la façade. On apprend peu après notre arrivée que le balcon est uniquement appuyé à la façade de la maison alors que la galerie dispose aussi d'un appui directement sur le sol grâce à des colonnes normalement faites de fer forgé. La ville étant au niveau de la mer, il n'y a pas de sous-sol à la Nouvelle-Orléans. Certaines maisons sont même construites en laissant un espace de 30cm entre le sol et la base de la maison, question de laisser l'air circuler sous le plancher.
si nécessaire, refaites le découpage en paragraphes
appliquez un titre de niveau 2 à la ligne Aménagement urbain
appliquez un titre de niveau 2 à la ligne Maison typique
enregistrez le fichier à nouveau
Vous avez maintenant deux pages Web, vieux_carre.htm et formes_urbaines.htm et vous allez créer un lien de la première à la seconde.
Créer un lien vers une autre page du même site
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/dream.jpg" \* MERGEFORMATINET sur la page vieux_carre.htm, sélectionnez les mots ville de la Nouvelle-Orléans dans le premier paragraphe
cliquez sur l'icône de dossier à droite de la zone Lien de la fenêtre de propriétés
dans la boîte de dialogue qui apparaîtra à l'écran, double-cliquez sur le nom de fichier formes_urbaines.htm
la boîte se fermera et le lien sera créé
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/logonvu.gif" \* MERGEFORMATINET sur la page vieux_carre.htm, sélectionnez les mots ville de la Nouvelle-Orléans dans le premier paragraphe
cliquez sur Insertion option lien
dans la boîte de dialogue qui apparaîtra à l'écran, double-cliquez sur Parcourir et sélectionnez le nom de fichier formes_urbaines.htm
Cliquez sur ok.
Testez vos liens
Appuyez Fichier aperçu dans le navigateur pour ouvrir la page dans votre fureteur et cliquez sur les liens pour vous assurer qu'ils marchent.
© HYPERLINK "mailto:annie.brouard@usherbrooke.ca" Annie Brouard, Université de Sherbrooke Date de création : Août 2006. Mise à jour : 2008-01-10
L'image en tant que lien
Une image peut être un lien
Comme vous le savez, une image peut servir de lien. Le processus est très simple.
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/dream.jpg" \* MERGEFORMATINET cliquez sur l'image principale de la page vieux_carre.htm
dans la boîte de propriétés, cliquez sur l'icône de dossier à côté de la zone Lien
dans la zone URL, tapez ou collez le lien suivant : http://www.seeneworleans.net/history.htm
cliquez sur le bouton Sélectionner
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/logonvu.gif" \* MERGEFORMATINET cliquez sur l'image principale de la page vieux_carre.htm
dans la boîte de propriétés, cliquez sur l'icône Image
dans la zone URL dans l'onglet Lien, tapez ou collez le lien suivant : http://www.seeneworleans.net/history.htm
cliquez sur le bouton ok
Note : dans certains cas, vous ne voulez pas avoir une bordure autour de l'image. Vous pouvez alors inscrire 0 dans la zone Bordure.
© HYPERLINK "mailto:annie.brouard@usherbrooke.ca" Annie Brouard, Université de Sherbrooke Date de création : Août 2006. Mise à jour : 2008-01-10
Le lien vers une partie d'une page (ancre)
Comment ils font ça?
Vous avez vu plusieurs sites sur lesquels un lien mène à une section spécifique d'une page. Le processus est un peu plus complexe mais, en suivant les étapes, on peut y arriver.
1.Créer une ancre nommée
Une ancre quoi? Une ancre nommée est une balise qui permet d'établir un point d'ancrage sur une page vers laquelle on peut diriger directement le lecteur.
Nous allons créer un point d'ancrage sur la pagevieux_carre.htm et une sur la page formes_urbaines.htm
ouvrez la page vieux_carre.htm
assurez-vous de placer le curseur en haut de la page
pour être certain, appuyez sur la combinaison de touche Ctrl-Home
cliquez sur l'option de menu Insertion > Ancre nommée ou Ancre
une boîte de dialogue vous demandera d'inscrire le nom du point d'ancrage
inscrivez le mot haut
cliquez sur OK
un symbole d'ancre apparaît sur la page
enregistrez la page
Passons maintenant à la page formes_urbaines.htm
placez le curseur au début du sous-titre Aménagement urbain
cliquez sur l'option de menu Insertion > Ancre nommée ou Ancre
inscrivez le mot amenagement (sans accent) en tant que nom de l'ancre
cliquez sur OK
un symbole d'ancre apparaît sur la page
enregistrez la page
2. Créer le lien
À l'intérieur d'une même page, on crée un lien directement vers l'ancre. Lorsqu'on crée un lien vers une autre page, on crée un lien vers la seconde page en spécifiant le point d'ancrage à utiliser. Le dièse (#) est utilisé pour signaler au fureteur qu'on veut utiliser un point d'ancrage.
Nous allons créer un lien à partir de la flèche située au bas de la pagevieux_carre.htm vers le haut de la page.
cliquez sur la flèche que nous avons insérée au bas de la page
dans la zone Lien, tapez #haut
n'oubliez pas le dièse
enregistrez la page
ouvrir la page dans un fureteur
allez au bas de la page
cliquez sur la flèche
vous devriez remonter au haut de la page
Nous allons créer un lien à partir de la page vieux_carre.htm vers le sous-titre Aménagement urbain de la page formes_urbaines.htm
sélectionnez les mots «sans beaucoup d'ordre» de la citation de Charlevoix
cliquez sur Insertion > Lien ou sur l'icône de dossier située à droite de la zone Lien de la boîte de propriétés
cliquez une fois sur le nom de fichier formes_urbaines.htm
dans la zone URL où le nom vient d'apparaître (et non Fichier où le nom apparaît aussi), tapez, au bout du nom de fichier, #amenagement
cliquez sur le bouton Sélectionner
enregistrez le fichier
vérifiez si le lien fonctionne (n'oubliez pas de faire F12 avant)
En résumé, pour créer un lien vers un point spécifique d'un document, il faut d'abord créer un point d'ancrage à la cible visée puis créer un lien vers cette cible en utilisant le dièse (#) pour spécifier qu'on va utiliser un point d'ancrage. Il est essentiel que le point d'ancrage soit écrit de la même manière dans l'ancre elle-même et dans le lien. Il est préférable de ne pas utiliser d'accents ou d'espaces dans les ancres nommées.
© HYPERLINK "mailto:annie.brouard@usherbrooke.ca" Annie Brouard, Université de Sherbrooke Date de création : Août 2006. Mise à jour : 2008-01-10
Le lien de courrier électronique
Avantages et désavantages de tels liens
Il est très utile d'offrir un lien de messagerie électronique afin de permettre aux lecteurs et lectrices de communiquer avec vous. Le désavantage est que ces adresses sont utilisées par les robots des publi-posteurs pour créer des banques d'adresses servant à envoyer des pourriels. La solution proposée devrait permettre de contourner ces robots jusqu'à ce que quelqu'un leur ajoute des fonctions de recontournement.
NOTE : Les liens de messagerie électronique ne fonctionnent que si l'ordinateur de l'usager est configuré pour lancer le logiciel de messagerie à partir du fureteur.
Création d'un lien de messagerie électronique
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/dream.jpg" \* MERGEFORMATINET Note : la version 2 de Dreamweaver ne permet pas de créer de tels liens de manière automatique. Une fonction spécifique existe dans les versions 4 et MX. Nous verrons donc la «manière longue» de créer un tel lien.
placez le curseur à la fin de la pagevieux_carre.htm, soit au bout de la ligne Traduction L. Robichaud
faites un retour à la ligne
alignez le nouveau paragraphe à gauche
tapez Courriel : joseph.bleau*a*usherbrooke*point*ca (adresse anti-spam à corriger)
sélectionnez l'adresse
insérez un lien selon la procédure habituelle
dans la section URL, tapez mailto:joseph.bleau*a*usherbrooke*point*ca
l'expression «mailto:» annonce qu'il s'agit d'une adresse de courriel
le lien est fait
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/logonvu.gif" \* MERGEFORMATINET Lorsqu'une personne cliquera sur le lien, le logiciel de courrier électronique sera lancé et l'adresse sera inscrite dans la ligne To: ou À: du message. La personne n'aura qu'à corriger l'adresse.
placez le curseur à la fin de la pagevieux_carre.htm, soit au bout de la ligne Traduction L. Robichaud
faites un retour à la ligne
alignez le nouveau paragraphe à gauche
Allez dans insertion -À Lien
tapez dans la première entrée Courriel : joseph.bleau*a*usherbrooke*point*ca (adresse anti-spam à corriger)
Tapez l'adresse dans la deuxième boite et cochez la case La valeur ci-dessus est une adresse électronique.
l'expression «mailto:» annonce qu'il s'agit d'une adresse de courriel
le lien est fait
Lorsqu'une personne cliquera sur le lien, le logiciel de courrier électronique sera lancé et l'adresse sera inscrite dans la ligne To: ou À: du message. La personne n'aura qu'à corriger l'adresse.
Les résultats sont les suivants: HYPERLINK "vieux_carre2.html" \t "_blank"Vieux carré
HYPERLINK "formesurbaines.html" \t "_blank" Formes urbaines
© HYPERLINK "mailto:annie.brouard@usherbrooke.ca" Annie Brouard, Université de Sherbrooke Date de création : Août 2006. Mise à jour : 2008-01-10
Les tableaux
Sur le Web, les tableaux sont utilisés pour deux fonctions. D'une part, ils servent à présenter des données sous formes de tableaux (rangées et colonnes), soit leur fonction originale. D'autre part, les tableaux sont utilisés pour mieux contrôler la mise en page. À moins d'apprendre les feuilles de style (concept plus complexe), les tableaux permettent, d'une manière simple et rapide, de positionner des objets sur une page Web.
Dans les exercices qui suivent, vous allez créer un tableau de données, la forme la plus simple, puis vous utiliserez les tableaux pour adapter la mise en page du Vieux-Carré.
Ouvrez donc, dans Dreamweaver, les pages vieux_carre.htm et formes_urbaines.htm
Créer un tableau
Sur la page formes_urbaines.htm, allez au bas de la page et insérez un retour à la ligne.
pour créer un tableau, cliquez sur Insertion -> Tableau
la boîte de dialogue qui s'affiche permet de définir les caractéristiques générales du tableau, vous pourrez ajouter ou retrancher des colonnes ou des rangées plus tard
dans la zone Lignes, inscrivez 8, ce sera un tableau à 8 rangées
dans la zone Colonnes, inscrivez 2
dans la zone Largeur, inscrivez 80 et choisissez Pourcentage dans la liste adjacente
dans la zone Bordure, inscrivez 1
nous reviendrons aux autres zones plus tard
cliquez sur OK
votre tableau est créé et s'affiche sur la table
Un tableau statistique
dans la première cellule, en haut, à gauche, inscrivez le titre du tableau, soit Types de structures
plus tard, nous fusionnerons les deux cellules et nous centrerons le titre
dans la deuxième rangée, colonne de gauche, inscrire Catégorie, et dans la colonne de droite, inscrire Nombre
inscrire les données suivantes dans les rangées subséquentes, le nom est inscrit dans la colonne de gauche, le nombre dans la colonne de droite
maison 88
dépendance 27
cabane 21
édifice religieux 7
moulin 2
édifice civil ou militaire 1
Fusionner les cellules
Pour créer une seule cellule dans la première rangée,
cliquez dans la première cellule à gauche et glissez le curseur dans la cellule de droite
les deux cellules auront une bordure plus foncée
cliquez maintenant sur une des deux cellules avec le bouton droit de la souris et sélectionnez l'option INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/dream.jpg" \* MERGEFORMATINET Tableau -> Fusionner les cellules ou avec les cellules seront fusionnées
cliquez dans la cellule pour enlever la sélection
Centrer le texte
centrez le texte en cliquant sur le bouton permettant de centrer un texte dans la boîte d'outils
sélectionnez le texte et mettez le en gras
centrez les titres de la rangée suivante et mettez les en gras
Aligner les nombres à droite
cliquez dans la cellule où se trouve le nombre 88
gardez le bouton gauche de la cellule enfoncé et glissez la souris pour sélectionner toutes les rangées de nombres de cette colonne
cliquez sur le bouton permettant d'aligner le texte à droite
vos chiffres sont maintenant alignés à droite
Ajouter une rangée
cliquez dans la dernière rangée
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/dream.jpg" \* MERGEFORMATINET cliquez maintenant avec le bouton droit de la souris et sélectionnez l'option Tableau -> Insérer des lignes
cliquez sur l'option Lignes
inscrivez le nombre 1
cliquez sur l'option Au-dessous de la sélection
cliquez sur OK
Fusionnez les deux cellules de la dernière rangée
Collez la référence suivante : Source : «Les bâtiments de Montréal en 1685», Adhémar, banque de données sur le bâti, la propriété et la population de Montréal, 1642-1805. Montréal, Groupe de recherche sur Montréal - Centre Canadien d'Architecture, 1997-1999.[en ligne] http://cca.qc.ca/adhemar. Consulté le 8 octobre 2003.
Assurez-vous que cette source soit en taille -2 ou du moins plus petite que le reste du texte..
Enregistrez la page
© HYPERLINK "mailto:annie.brouard@usherbrooke.ca" Annie Brouard, Université de Sherbrooke Date de création : Août 2006. Mise à jour : 2008-01-10
Les tableaux et la mise en page
Nous utiliserons maintenant des tableaux pour améliorer la mise en page. Ouvrez la page vieux_carre.htm dans Dreamweaver ou NVU.
Créer le tableau
INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/dream.jpg" \* MERGEFORMATINET placez le curseur après le mot Introduction et insérez un retour à la ligne (Enter)
insérez un tableau de 2 rangées et de 2 colonnes, largeur 100%, bordure 1
inscrivez 5 dans la zone remplissage des cellules
inscrivez 5 dans la zone espacement des cellules
cliquez sur OK
La zone remplissage des cellules indique le nombre de pixels entre le contenu de la cellule le bord de la cellule. Dans ce cas-ci, il y aura une marge de 5 pixels autour du texte ou de l'image qui sera placé dans chacune des cellules.
La zone espacement des cellules indique le nombre de pixels qui sépare chacune des cellules. Les lignes de séparation entre les cellules mesurent donc 5 pixels. Plus cette valeur est grande, plus les barres de séparation seront larges. Il y a eu une brève mode de tableaux dont les bordures étaient très larges. Heureusement, cette mode fut brève.
Lorsque vous voulez faire un collage d'images, inscrivez 0 pour la bordure, l'espacement et le remplissage. Pour cacher les bordures de notre tableau,
cliquez à l'intérieur du tableau
cliquez sur Modifier -> Tableau -> Sélectionner le tableau (ou cliquez sur le bouton droit de la souris, puis Tableau -> Sélectionner le tableau
dans la boîte de propriétés, inscrire 0 pour les zones bordure, et 2 pour l'espacement et le remplissage
Les bordures disparaissent mais le contour du tableau demeure visible en pointillés.
Revoir la mise en page
sélectionnez les deux premiers paragraphes du texte, de Le Vieux Carré à de la ville
coupez le texte sélectionné
cliquez dans la cellule de gauche du tableau
collez ce texte dans la cellule de gauche du tableau
cliquez dans la cellule de droite du tableau
insérez un tableau de 2 rangées et de 1 colonne, espacement, remplissage et bordure à 0, largeur de 302 pixels (soit la largeur de la photo que vous allez y insérer)
cliquez sur la photo
changez l'alignement à droite
changez les valeurs pour la bordure, Espace V et Espace H à 0 ou pour NVU espacement à gauche à droite et haut et bas.
cliquez sur Édition -> Couper
cliquez dans la première rangée du tableau que vous avez inséré dans la cellule de droite.
cliquez sur Édition -> Coller
dans la cellule située sous la photo, inscrivez la légende suivante : Photo prise d'un balcon à la Nouvelle-Orléans
réduisez la taille de ce texte à -2 ou + petit
centrez ce texte
Le texte dans la cellule de gauche est centré verticalement. Vous pouvez changer cet alignement en cliquant dans cette cellule puis en choisissant une des options dans la zone Vert. Par défaut, le contenu d'une cellule est aligné au milieu. Vous pouvez essayer de l'aligner vers le haut en cliquant sur l'option haut.
En jouant avec la largeur des tableaux, il y a moyen d'en arriver à équilibrer l'espace utilisé. L'insertion de tableaux dans une cellule permet, par exemple, de placer plus facilement une légende sous une illustration.
Effacer une rangée ou une colonne
Vous constaterez qu'il y a une rangée vide dans le tableau extérieur que vous avez créé. Pour effacer une rangée ou une colonne,
cliquez dans une des cellules que vous voulez effacer avec le bouton droit de la souris
dans le menu qui s'affichera, cliquez sur Tableau > Supprimer la ligne ou Supprimer la colonne, selon ce que vous souhaitez effacer.
cette option est aussi disponible via le menu Modifier > Tableau > Supprimer la ligne (ou la colonne)
la ligne disparaîtra.
vous pouvez toujours revenir en arrière en appuyant sur les touches Ctrl-Z
Résultats des exercices : HYPERLINK "vieux_carre3.html"Vieux carré
HYPERLINK "formesurbaines2.html" Formes urbaines
Taille absolue, taille relative
Si vous spécifiez les dimensions de votre tableau de manière absolue, donc en pixels, vous aurez l'impression de pouvoir positionner vos textes et images de manière très précise. Regardez votre page sur un autre écran et vous risquez d'avoir toute une surprise.
L'utilisation de tailles relatives (pourcentage) permet à votre contenu de s'adapter à la taille de l'écran.
Lorsque vous préparez une mise en page pour l'impression, il est préférable d'utiliser une largeur absolue qui s'imprimera facilement, soit environ 580 pixels. La tendance actuelle, pour la mise en page axée sur l'écran, est d'utiliser une largeur de 760 pixels. Ces mises en page ne fonctionneront pas sur les ordinateurs de poche dont l'écran ne compte que 240 ou 320 pixels de large.
© HYPERLINK "mailto:annie.brouard@usherbrooke.ca" Annie Brouard, Université de Sherbrooke Date de création : Août 2006. Mise à jour : 2008-01-10
Organiser la structure de son site
Tout comme il faut planifier la structure d'un texte qu'on veut rédiger ou d'un cours qu'on veut donner, il faut planifier la structure d'un site qu'on veut réaliser..
La navigation
Vous pourriez mettre l'ensemble de votre essai sur une seule page web. Ce serait une très mauvaise utilisation des possibilités du web et un bon moyen d'avoir une très mauvaise note.
On peut subdiviser l'essai en plusieurs pages distinctes qu'on consulte de manière séquentielle : Accueil, Introduction, section 1, section 2, Conclusion, Bibliographie, etc. Ce serait là un cheminement purement linéaire. La grande majorité des livres sont organisés de cette manière. Ce n'est donc pas totalement à éliminer, mais on peut se forcer un peu plus.
Avec un peu de programmation, on pourrait créer une navigation aléatoire. À partir d'une page, un lien mènerait vers une autre page mais on ne sait pas laquelle avant d'y arriver. Si l'exercice offre un certain intérêt théorique, il est farfelu au niveau pratique.
Pour permettre une flexibilité maximale, il est préférable d'offrir un cheminement partiellement linéaire. Cette option offre la possibilité de suivre un cheminement séquentiel, question de pouvoir lire de manière traditionnelle ou de passer d'une section à l'autre selon les goûts ou les intérêts. Dois-je rappeler qu'il est beaucoup plus difficile de créer une structure non-linéaire conviviale qui ne mélange pas totalement les visiteurs que de créer une structure linéaire simple. Lisez un « Livre dont vous êtes le héros » et vous constaterez combien de préparation et d'organisation est nécessaire si on veut offrir de multiples cheminements tout en conservant un certain fil conducteur.
Le schéma de navigation permet de prévoir en général comment les internautes vont se déplacer dans votre site. (Il y a quand même des gens dont on ne peut absolument pas prévoir le cheminement. Vous en connaissez probablement aussi, observez les visiteurs dans un musée vous allez comprendre.)
Le schéma nous oblige à prendre certaines décisions, notamment en ce qui à trait aux noms des fichiers.
Le schéma devient notre aide-mémoire lorsqu'on prépare le site.
Sur un site d'envergure, le schéma peut être utilisé comme plan du site pour permettre aux gens de naviguer d'une manière plus structurée.
Dans quelques mois, lorsque vous voudrez modifier quelque chose, le schéma vous aidera à identifier rapidement les fichiers à modifier et l'impact des changements sur l'ensemble du site.
Structure du site de la Nouvelle-Orléans
J'ai choisi les modules TWHP en grande partie parce qu'ils offrent des recettes toutes faites pour la démarche (je suggère fortement de consulter le module destiné aux auteurs HYPERLINK "http://www.cr.nps.gov/nr/twhp/authors.htm" http://www.cr.nps.gov/nr/twhp/authors.htm si vous ne l'avez pas encore fait) et pour la structure du site.
Voici une schématisation de la navigation de ce site. INCLUDEPICTURE "http://www.pages.usherbrooke.ca/abrouard/hst762/images/struc_nlleorleans.gif" \* MERGEFORMATINET Il n'est pas nécessaire d'utiliser un logiciel de diagramme pour créer un schéma d'un site. J'ai préparé la structure de ce site avec un simple traitement de texte. On peut le décrire comme suit.
Navigation principales:
Accueil (index.htmL) Syllabus (pdf) Calendrier (calendrier.htm) Projet (projet.htm) Glossaire (glossaire.htm) Bibliographie (biblio.htm) Plan du site (plan.htm)
Cours:
Semaine x (+ fichiers)
Dossier éléments:
Images Documents Cartes Sons
Évidemment, un schéma de ce genre ne peut pas représenter tous les liens possibles. Il offre cependant un excellent outil de travail pour faire le suivi du développement d'un site. En fait, plus un site est gros, plus le travail de planification et de schématisation est important. il est alors nécessaire de faire une arborescence sous forme schématique.
© HYPERLINK "mailto:annie.brouard@usherbrooke.ca" Annie Brouard, Université de Sherbrooke Date de création : Août 2006. Mise à jour : 2008-01-10
Votre page d'accueil
La page d'accueil (en anglais home page) est la page par laquelle les lecteurs et lectrices entrent dans votre site.
Ce sera la première impression que les gens auront de votre site.
Je sais qu'on ne devrait pas juger un livre par sa couverture (traduction d'une expression anglaise équivalente à « l'habit ne fait pas le moine ») mais les gens sont très superficiels.
Aux visites subséquentes, les gens ne remarqueront presque plus votre page d'accueil, mais à la première visite, c'est la première chose qui frappe, qui incite à continuer la visite ou à aller ailleurs.
Habituellement, la partie la plus importante de la page d'accueil devrait être centrée, question d'attirer directement les yeux au lieu de les obliger à se diriger vers le côté ou le haut de l'écran.
Une page d'accueil efficace ne devrait pas dépasser un écran de hauteur. Rappelez-vous des statistiques : moins de 50% des internautes défileraient une page vers le bas et la proportion est encore plus faible pour la page d'accueil.
L'internaute doit pouvoir saisir le sujet d'un coup d'il et accéder aisément aux différentes sections.
Réfléchissez avec soin à cette page. Vous en ferez deux ou trois versions avant d'arriver à ce qui vous semblera le plus approprié.
En créant cette page, vous aurez aussi à réfléchir aux couleurs de votre site et à la navigation de base. Plus tôt vous commencerez, meilleur sera le résultat final.
N'oubliez pas que la page d'accueil est celle qui est vue par le plus de gens. C'est elle qui tente de convaincre les gens de rester sur votre site.
Qu'est-ce qui doit être sur la page d'accueil?
De nos jours, on trouve deux types de pages d'accueil. 1. Les pages d'accueil dites Page de garde ( splash page) le grand dictionnaire terminologique la définit comme suit: « Page écran affichant une image, un graphique ou un court texte avant d'amener l'internaute visiteur vers la page d'accueil proprement dite d'un site Web. Une page de garde peut comporter, par exemple, un logo, le nom de l'entreprise, la référence de l'auteur ou de l'éditeur, le choix d'une langue ainsi que des informations sur les droits d'auteur.» (Source: Grand dictionnaire terminologie: HYPERLINK "http://www.olf.gouv.qc.ca/ressources/bibliotheque/dictionnaires/Internet/fiches/8375745.html" \t "_blank" http://www.olf.gouv.qc.ca/ressources/bibliotheque/ dictionnaires/Internet/fiches/8375745.html
Cette page sert donc soit orienter le visiteur ou à l'impressionner au plan visuel. Du coup, elle demande un clic de plus, elle n'est pas donc recommandée. De plus, ce type de page bloque le référencement du site. J'irais jusqu'à dire que cet usage est à proscrire.
2. Une page d'accueil en soit se doit de présenter le site en son ensemble. Donner une idée des contenus, présenter l'auteur, expliquer la démarche de visite si nécessaire, donner les actualités, etc.
Ça dépend beaucoup de l'ampleur du site.
Sur un site multilingue, c'est ici qu'on donne l'option de poursuivre la visite en français, in English, etc. On reconnaît facilement un site américain car on y présente souvent ces options... en anglais.
Il faut évidemment donner un titre à son site, comme pour tout autre document. Un sous-titre peut aussi aider à saisir le sujet ou le point de vue de l'auteur.
Une image ou un montage d'images illustre notre propos et rend la page plus agréable. Rappel : le chargement doit être relativement rapide, donc les images doivent être légères.
Sur un site de grande envergure, on indique quelques options rapides (de 4 à 6) pour guider l'internaute vers la bonne section du site.
Sur un site plus humble, consacré à un seul sujet, on met normalement la table des matières directement sur la page d'accueil question d'éviter un clic inutile au lecteur..
La table des matières se présente sous forme de menu à gauche ou en haut de l'écran, comme une liste d'options, ou même intégrée en tant qu'image sensible sur le montage photo. Il est toutefois préférable d'offrir une table des matières sur laquelle retrouve du texte. Les tables des matières en image seulement ne sont pas accessibles aux non-voyants.
Il faut évidemment identifier qui a monté le site :
votre nom
la date
votre adresse de courrier électronique
pourquoi pas une notice de copyright puisque c'est votre création après tout : ©Votre nom, 2004 Tous droits réservés
Si vous ne pouvez pas trouver le © vous pouvez le copier à partir de cette page et le coller dans votre éditeur web.
Le nom de fichier pour une page d'accueil - son adresse
L'adresse d'une page d'accueil doit être la plus simple possible. Elle ne doit représenter que le domaine, c'est pourquoi on la nomme index.html car ainsi le serveur la détecte comme l'accueil. C'est une règle tacite et un formatage des serveurs.
Les serveurs offrent donc un nom implicite qui nous évite de taper quelques lettres. Pour Pages si vous nommez votre page d'accueil index.html et que cette page est placée directement dans votre répertoire , vous pourriez utiliser l'adresse suivante : http://pages.usherbrooke.ca/votrecode.
Le index.html est implicite, ou sous-entendu, en quelque sorte.
Sur certains serveurs, c'est le nom default.htm qui est sous-entendu. Vérifiez avec un technicien pour savoir quelle est la politique sur un serveur donné. Parfois, on permet index.html, index.htm, default.html et default.htm comme noms implicites.
En français, on enregistre souvent la page d'accueil sous le nom accueil.html. L'adresse que vous donneriez aux gens serait, par exemple : http://pages.usherbrooke.ca/votrecode/accueil.html L'URL est alors plus long. Je préfère utiliser la forme http://pages.usherbrooke.ca/votrecode (le index.html étant implicite) ce qui m'évite de taper quelques lettres.
Un répertoire si besoin est pour votre travail
Si vous avez plus d'un site dans votre répertoire sur le serveur, question de ne pas mélanger les fichiers, je vous suggère de créer un répertoire ou dossier spécifique à votre travail. Ce nom ne doit pas avoir d'espace, d'accent ou d'apostrophe. Il doit être aussi court que possible. Au lieu d'utiliser un espace, utilisez un trait souligné. Utilisez des minuscules seulement. Exemples de noms de répertoires : expo67, maison_des_patriotes, plaines_abraham, klondike, maison_felix_leclerc
© HYPERLINK "mailto:annie.brouard@usherbrooke.ca" Annie Brouard, Université de Sherbrooke Date de création : Août 2006. Mise à jour : 2008-01-10
