Création de SITE Web

__ Part I __

Version 3.101er février 2010

1

Table des matières

PRÉLIMINAIRESA. Demande d’un hébergement chez Free.B. Activation de cet hébergement.C. Paramétrage de Dreamweaver pour votre Site.D. Simple page pour tester l’hébergement de votre site.

CREATION DE SITE 1. Introduction

1.1. Qu’est-ce qu’un site Web ?1.2. Le HTML.

2. La création d’une page d’accueil personnelle2.1. L’objectif du premier exercice 2.2. La planification de la page2.3. Les éléments qui accompagnent ce support.

3. La documentation de Dreamweaver3.1. L’utilisation de l’aide de Dreamweaver3.2. Le menu Aide de Dreamweaver

4. L’interface de Dreamweaver4.1. Exploration des composantes du logiciel (première partie)

5. Les étapes préliminaires5.1. La création du site local5.2. La création de la page d’accueil5.3. La fenêtre Site

6. L’édition de la page d’accueil6.1. Les tableaux et les cellules de mise en forme 6.2. Les images6.3. Les propriétés de la page6.4. Les liens

7. L’édition de la deuxième page7.1. La création de la deuxième page et l’insertion d’un lien7.2. L’aperçu dans un navigateur 7.3. La publication7.4. Procédure à suivre pour configurer votre site

Enregistrer les fichiers sur le site distant

2

PréliminairesA - Demande d’un hébergement chez Free

Novembre 2008Pour créer un hébergement pour votre site (et une boite aux lettres gratuites), nous allons utiliser ce que propose le prestataire Free.

Attention, les sites sont en perpétuelle évolution, les explications qui suivent ne sont pas à prendre à la lettre, il vous faudra les adapter en fonction des nouvelles présentations du portail de Free.

Lancer votre navigateur (en cliquant sur la lettre e bleu de Internet Explorer) Taper l’adresse (URL) de free : free.fr Sur le site cliquer sur les boutons Bas Débit puis Accès gratuit (Cf Illustration)

Compléter les informations demandées.

Titre, Nom, prénom,Adresse, Code Postal, Ville, Téléphone, etc….

Les éléments où il n’y à pas d’* sont facultatifs.

Cliquez sur Passer à Etape 2

Votre Login prendra la forme de :nom.prénom

vous pouvez en changer ….Votre adresse de couriel prendra la forme de  : nom.prénom.@free.fr

(Rappel : la lettre @ s’obtient en appuyant sur la touche AltGr et la touche 0 en même temps)

3

Exemple : marcel.tartempion@free.frCliquez sur Etape 3

Cocher la case : Information de configuration… Kit de connexion complet (si Internet n’est pas installé)√ Information de configuration uniquement (pour Internet déjà installé)Cliquez sur Etape 4

Cliquez sur Inscription pour la Validation.Votre boite aux lettres est crée ; vous aller recevoir de free.fr par courrier dans les prochains jours, sa validation et surtout vos mots de passe. En cas de non utilisation de votre boite aux lettres elle sera détruite au bout de quelques semaines.

B/ ACTIVATION DE L’HEBERGEMENT FREE POUR GERER SON SITE PERSOAprès réception d’un courrier de Free.fr vous devez avoir les info suivantes :free Perso :

Identifiant : marcel.tartempionMot de Passe : xxxxxxx (lettres en minuscules)Identif mess : marcel.tartempion@free.frPass messa : xxxxxxxURL : http://marcel.tartempion.free.frRép FTP : ftpperso.free.fr

Après avoir créer un compte chez free.fr il faut passer par support.free.fr pour activer les pages perso.

Pour cela :Identifiez vous par le bouton : Abonnés , Identifiez vous

Prendre les réponses par défaut ; faire les quatres ou cinq étapes en cliqnaut sur Attention : L’activation de votre site peut prendre plusieurs jours.Terminé ….

4

C/ PARAMÉTRAGE DE DREAM POUR VOTRE SITE.A présent, vous pourrez régler votre logiciel FTP (Ici Dreamweaver) avec les informations ci-dessus.Créer dans mes documents / mes sites web (ou dans votre dossier personnel sur le serveur) un répertoire pour votre site avec le nom : « Site de Tartempion » (par exemple ! Bien sur il faut mettre votre nom à la place de « Tartempion » !).Démarrer Dreamweaver.Faire Site, Gérer les Sites. Cliquer sur le Bouton Nouveau, Site. Une boite de dialogue s’ouvre.

Entrer les infos suivantes :

Nom du Site :Le Site de Tartempion

Dossier Local :Site de Tartempion (évidemment, il y a votre nom à la place de « tartempion »)

(Pour le choisir, utiliser le bouton parcourir)Adresse http:// :

http://jean.tartempion.free.fr

Les paramètres de connexion à votre site Web sur le serveur d’hébergement sont situés dans la catégorie Infos Distantes. Sélectionner la catégorie Infos Distantes Entrer les infos suivantes :

Comme mode d’accèsprendre FTP

Indiquer le nom du serveur FTP sur lequel sera hébergé votre site. Ici :

ftpperso.free.fr

Indiquer le nom d’utilisateur et le mot de passe :

marcel.tartempionxxxxxxx

Dans le paramétrage cocher la coche pour mettre le FTP en mode passif

Faites un test en utilisant le bouton Tester (à gauche du Nom d’utilisateur).

Valider par Ok.

5

6

D/ SIMPLE PAGE POUR TESTER L’HEBERGEMENT DE VOTRE SITE.Sous Dreamweaver, créer une page avec Fichier, Nouveau, Page de base Créer.Par défaut cette page se nomme : «Untitled-1».Dans la zone de travail saisissez un texte quelconque (par exemple « Coucou !)

Faire Fichier, Enregistrer, taper le nom de la page principale : index.htm.Note : sur un site Web, la page de départ se nomme toujours index.htm.

Cliquer sur le bouton Connecter à l’hôte distantSi tout ce passe bien les deux prises bleues sont connectées.

Cliquer sur le bouton Développer réduire pour avoir les contenus du site local et du site distant sur une même page..

Sélectionner le fichier index.htm et cliquer sur la flèche bleue orientée vers le haut (Clic sur Ok pour la question : inclure les fichiers dépendants).

Pour fermer cette fenêtre cliquer à nouveau sur le bouton Développer réduire.Réduire la fenêtre de Dreamweaver.Lancer Internet explorer.Aller sur votre site (son URL doit ressembler à : http://marcel.tartempion.free.fr) pour vérifier si votre page a été bien publiée.

Si vous retrouvez votre page, tout va bien, votre installation fonctionne vous pouvez commencer.

7

DREAMWEAVER1. IntroductionCe cours vise à vous initier à la création de sites Web. Vous aurez donc à créer vous-même un site contenant du texte, des images, des dessins vectoriels ou des photos matricielles (bitmap en anglais). Pour ce faire, vous aurez recours au logiciel le plus utilisé chez les professionnels : Dreamweaver de Macromedia.

Le but du cours n’est pas de connaître à fond le logiciel, ce qui nécessiterait des centaines d’heures d’études et d’exercices, le but est de vous donner les rudiments de base de la création de sites Web et de vous rendre autonome dans l’utilisation du logiciel par le biais de son aide en ligne.

1.1. Qu’est-ce qu’un site Web ? Les adresses Internet sont dites URL (Universal Remote Locator). Une adresse Internet est un chemin d’accès à travers le réseau Internet qui nous mène vers des pages affichables. Ces pages sont accessibles à partir du réseau que l’on appelle le World Wide Web, ou simplement « la toile ». Sa structure est totalement décentralisée, c’est-à-dire que plusieurs trajets sont possibles à partir d’un point donné pour se rendre à un autre point.

Il y a l’ordinateur client, qui demande à voir ou à recevoir les fichiers, puis il y a l’ordinateur hôte, celui sur lequel les informations voulues se trouvent. On l’appelle le serveur Web. On dite qu’il héberge des Sites Web.

Pour accéder aux données, les navigateurs Internet doivent analyser ces adresses, la plupart du temps selon le protocole HTTP (HyperText Transfer Protocol).

Un site Web doit plutôt viser à être agréable, dans l’optique d’informer le visiteur de son contenu, à l’intéresser à aller plus loin dans le document. L’objectif est de le faire revenir.

1.2. Le HTMLLe HTML (HyperText Makup Langage) est un langage interprété, c’est à dire qu’il est lu en continu par un autre logiciel, votre navigateur en l’occurrence. Ce langage est constitué de balises et d’ancrages permettant au navigateur de comprendre quoi mettre dans la page qu’il affiche ainsi que l’endroit où les éléments doivent être affichés.

L’hypertexte est une méthode de présentation adaptée aux documents informatiques, où le lecteur peut agir, en cliquant par exemple, sur certains mots du texte pour déclencher l’affichage d’informations supplémentaires relatives au mot sélectionné. La relation entre le mot sélectionné et l’information supplémentaire s’appelle un lien. Les liens fonctionnent d’un ordinateur hôte à un autre par le réseau grâce au protocole de communication HTTP.

A la version HTML a succédé une extension le XHTML (et suivant) le nouveau standard duWeb. Le World Wide Web Consortium est l’organisme qui établi les normes de ces langages

8

2. La création d’une page d’accueil personnelle2.1. L’objectif du premier exercice

Présentation d’une page personnelle accompagnée d’une deuxième page.

Ces deux premières pages sont un exemple de ce que vous devrez faire comme premier exercice. On trouve dans ces deux pages les éléments de base d’une page Web :

Placement de texte et de Tableau Insertion d’image Une mise en forme (image à droite, titre en gras, etc.) Choix des couleurs (couleur du fond et couleur du texte) Placement d’une adresse de courriel Un lien vers une autre page.

L’objectif du premier exercice est donc de créer votre propre page d’accueil personnelle, ainsi qu’une page supplémentaire.

9

2.2. La planification de la pageAvant de commencer, il est important d’accorder une attention particulière à la planification de la page. Dans un logiciel d’intégration comme Dreamweaver, on ne peut pas créer les éléments nécessaires à l’élaboration d’un site, et la plupart du travail de création se fait à l’extérieur de Dreamweaver.

Voici tout de même une approche de planification simplifiée pour votre première page :

Le texte de présentationIdéalement la saisie se fera dans un logiciel de traitement de texte – ce qui pourrait nous aider à ne pas faire de fautes. On peut aussi pour un travail relativement simple, saisir directement le texte dans Dreamweaver.

L’imageLe format de l’image devrait être GIF (Graphic Interchange Format), JPEG (Joint Photographic Experts Group) ou bien PNG (Portable Network Graphics Format).

La taille importe peu, pour cet exercice, votre image devrait être inférieure à 500 pixels par 300 pixels, à une résolution de 72 points par pouce.

Surveillez le poids de votre image. Au-delà de 100 Ko (kilo-octets) cela devient plus long à télécharger pour les connexions de modems traditionnels.

Une fois terminée, vous placerez cette image dans le dossier image de votre site local.

La mise en formePrévoir la mise en forme est un exercice simple, qui permet de gagner du temps. On prend une feuille et on invente la maquette de la page que l’on voudrait obtenir.

Dans votre premier exercice, vous aurez à créer une grille dans laquelle vous devrez intégrer votre image et vos textes.

C’est un petit exercice qui peut s’avérer anodin, mais pour la planification d’un site plus complet, cela devient essentiel.

2.3. Les éléments qui accompagnent ce support.Toutes les images et certains textes (les plus courts sont à taper directement) nécessaires à la réalisation des pages Web présentées dans ce support se trouve dans les répertoires :

\CD Stage Site 2007\ textes et images pour le site du support Dream\images\CD Stage Site 2007\ textes et images pour le site du support Dream\textes

etc.

Vous pouvez évidemment les remplacer par des textes de votre choix et des images prises sur le Web

10

La documentation de Dreamweaver2.4. L’utilisation de l’aide de Dreamweaver

Nous accédons à cet aide en ligne directement à partir de Dreamweaver.

1. Démarrez Dreamweaver. 2. Cliquez sur le menu Aide, à droite

dans la barre des menus 3. Sélectionnez Utilisation de

Dreamweaver (Raccourci F1) dans le menu déroulant.

2.5. Le menu Aide de DreamweaverL’aide de Dreamweaver offre trois modes de navigations dans l’utilisation de Dreamweaver :1. Le sommaire (mode de base)2. L’index (mode par ordre alphabétique)3. La recherche (mode avancé)4 Les Favoris.

Le sommaireLe sommaire vous offre le contenu de l’aide par section. Chaque section contient plusieurs rubriques. En cliquant sur un titre de section dans le sommaire (en gras), les titres de rubriques apparaîtront juste en dessous, légèrement en retrait, ou en caractères maigres pour les sous rubriques. C’est seulement lorsque que l’on clique sur la rubrique désirée que l’aide affiche les explications dans la partie droite de la page (le cadre de droite).L’aide est construite de manière à n’afficher que le contenu d’une rubrique à la fois, et jamais une section au complet.

Essayez de traiter l’exemple suivant :Procédure à suivre pour accéder à la section Insertion de tableau et ajout de contenu.

4. Si ce n’est pas déjà fait, Activez l’aide (touche F1)5. Choisissez le mode Sommaire dans le cadre de gauche6. Trouvez et cliquez sur la section Mise en Forme de pages7. Trouvez Présentation de contenu à l’aide de tableau8. Puis, Insertion de tableau et ajout de contenu.9. Quitter l’aide.

L’indexL’index vous permet de faire des recherches structurées autour de mots-clés, classés par ordre alphabétique. Ce mode correspond à l’index de tout bon ouvrage de référence, comme dans un livre, où il se situe à la fin.

La rechercheLe mode recherche est un moteur de recherche avancé pour la consultation du document Utilisation de Dreamweaver. Il est utile aux initiés.

Les favoris.Les favoris vous permettent de garder les pages de la documentation sur lesquelles vous aimeriez revenir.

11

3. L’interface de Dreamweaver3.1. Exploration des éléments de base de Dreamweaver

Pour nous initier au logiciel, nous allons commencer par en explorer les éléments de base. Dans l’aide voir la section Sommaire > Notions bases de Dreamweaver > À propos de l’espace de travail > Présentation de l’espace de travail

Cette Interface comprend donc : La fenêtre du document La barre d’outils du document : La barre d’outils de la fenêtre

du document comporte les éléments d’affichage de la fenêtre du document. La barre d’état du document (et le sélecteur de balises) L’inspecteur de propriétés : (avec Fenêtre, Propriétés) Cette

fenêtre est contextuelle, c’est-à-dire que le contenu change selon les éléments qui sont sélectionnés dans votre page. N’oubliez pas d’abaisser la portion Option de cette fenêtre en cliquant sur le petit triangle dans le coin inférieur droit de la fenêtre. Cette section referme les options des éléments, s’il y a lieu. Il n’y parfois aucunes options. C’est à partir de cette fenêtre que ce fera la majorité des manipulations sur le contenu de votre page.

La barre à Insérer présentée de préférence sous forme d’onglets (insertion, commun, mise en forme…).

Le Groupe de panneaux : Ces fenêtres changent en fonction des panneaux qui y sont sélectionnés.

12

4. Les étapes préliminaires4.1. La création du site local

L’organisation du dossier du site local et des documents qu’il contiendra est très importante, car tout votre site en dépend. En effet, les liens créés entre chacune des pages, ainsi qu’avec les images, correspondent à des chemins d’accès hiérarchisés ou des adresses.

Le HTML, et par extension Dreamweaver, utilisent ces chemins d’accès pour accéder aux éléments d’une page et pour créer des liens hypertextes. Les images insérées dans une page sont en fait liées à cette page par le chemin d’accès, et le HTML ne fait que les « appeler » pour qu’elles s’affichent.

Attention : Si vous devez changer l’emplacement ou le nom d’un fichier, vous devrez le faire à partir de Dreamweaver (grâce à la fenêtre Site) et non pas à partir du système d’exploitation (Windows ou Mac OS).

Ainsi, lors de la modification d’un fichier HTML, Dreamweaver pourra mettre à jour automatiquement les hyperliens qui se trouve dans le document.

La création du dossier du site localLe dossier du site local est un dossier dans lequel seront enregistrés sur le disque de votre ordinateur tous les fichiers qui composeront le site local.

10.Ce dossier a déjà été créé dans \Mes Documents\Mes Sites Web et il porte un nom du style : Site de Tartempion

Si ce n’est pas le cas, Créer le !A l’intérieur de celui-ci, on doit avoir deux dossiers : \images et \textes \Images stockera toutes les images pour les isoler des autres fichiers. Nous allons les récupérer à partir du disque du serveur : \\Serveur\public (Z:).11.Sortir de Dreamweaver et dans l’environnement Windows, copier dans

votre dossier \images du dossier contenant le site, le contenu du dossier :\CD Stage Site 2008\ textes et images pour le site du support Dream\images

12.De même dans l’environnement Windows, copier dans votre dossier \Textes du dossier contenant le site, le contenu du dossier :\CD Stage Site 2008\ textes et images pour le site du support Dream\textes

4.2. La création de la page d’accueilAvant de continuer, il nous faut créer et définir la page d’accueil du site sur lequel nous allons travailler. Dreamweaver pourra ainsi gérer tous les liens à partir de cet index, qui se trouve dans le dossier du site local et créer la carte du site.

Nous avons précédemment créer un premier jet de cette page – elle se nomme index.htmActuellement elle ne contient qu’un texte court (le mot « coucou »).

13.Revenir dans Dreamweaver. Ouvrir la page index.htm.14.Sélectionner tout ce texte (Ctrl + A) et supprimez le.15.Faites une sauvegarde de votre page par Fichier, Enregistrer.

13

Remarque au sujet des caractères spéciauxLes caractères spéciaux, c’est-à-dire les lettres avec des accents ( à, é, ù, etc.), les symboles ( : / @ \ ), ainsi que les espaces, ne sont pas compris par les navigateurs et ne doivent pas être utilisés pour nommer les fichiers. Attention aux caractères en majuscules qui peuvent aussi parfois poser problème avec certains navigateurs.

4.3. La fenêtre Site

16.Si le panneau Fichiers n’est pas activé, l’ouvrir avec le raccourci F8.

Pour voir la carte du site, cliquez sur Affichage de la Carte du site dans le menu déroulant dans le coin supérieur droit de la fenêtre.

Par le même menu on peut avoir accès à l’affichage distant, ou l’affichage local.Il est préférable de rester avec :

Affichage local.

La fenêtre Site vous permet de gérer votre site dans son ensemble. C’est à partir de cette fenêtre que vous devez effectuer les changements de nom ou les déplacements de vos fichiers, lorsque c’est nécessaire.

C’est aussi à partir de cette fenêtre que vous pouvez obtenir un aperçu des liens entre vos documents. La carte du site vous permet de visualiser l’ensemble des documents de votre site et leur disposition logique, c’est-à-dire l’arborescence.

5. L’édition de la page d’accueil5.1. Les tableaux et les cellules de mise en forme

Dans ce premier exercice, vous découvrirez les éléments de base nécessaires à la création de pages Web. Vous devez créer votre propre page personnelle en suivant l’exemple de la page que vous avez vu précédemment.

17.Taper le texte suivant dans la première partie de la page index.htm :

Chef de Projet communication externe et interneSpécialisée dans les médias, l'intranet et l'innovation14 ans d'expérience nationale et régionale

18.Sélectionner le texte.19.Dans l’inspecteur de propriétés mettre le texte est en Arial, 24 pts, Bold de

couleur Rouge (FF0000).

14

Utilisation d’un tableau

En se basant sur les tableaux HTML, la mise en forme vous permet de placer vos images et vos textes comme vous le désirez.Tout d’abord, prenez connaissance des textes dans l’Aide pour vous familiariser avec le concept de mise en forme :Faire F1, Puis Sommaire > Mise en forme des Pages > Présentation de contenu à l’aide de tableaux > Insertion d’éléments de tableaux.

Création du Tableau

20.Cliquer sur le bouton Tableau à l’extrême gauche de La barre à Insérer (avec l’onglet Mise en Forme activée).

21.Créer un tableau de 1 ligne et 2 colonne de 700 pixels de large.

Remarquer l’ajout automatique d’un tableau de mise en forme de la taille de votre page.Nous y placerons l’image et les textes.

La cellule s’ajustera automatiquement si le contenu occupe plus de place que celle-ci.

Consulter l’aide à l’ Utilisation de Dreamweaver si vous avez de la difficulté à déplacer ou à redimensionner les cellules.

22.Dans la cellule de gauche du tableau saisir le texte suivant :

ISABELLE TARTEMPION06 09 11 02 1004 42 59 78 23

15, rue Jacques de la Roques13650 MEYRARGUES

37 ans, nées à Strasbourg

23.Dans l’inspecteur de propriétés mettre le nom / prénom en Arial, 24 pts, Bold de couleur Bleu (33CC00). Le reste est 16 pts. Tout est en bleu sauf l’adresse qui est en noir.

.

15

5.2. Les images

24.Toujours dans le mode de mise en forme, sélectionnez la cellule dans laquelle vous désirez insérer votre image (celle de droite).

25.Dans la barre des menus, faire Insertion, une image. 26.Dans la boîte de dialogue, sélectionner l’image Photo 01 avec Texte.jpg

dans le répertoire image de votre site..27.Choisir relatif à Document.28.Valider par Ok.

L’image apparaît dans la cellule. Vous pouvez redimensionner la cellule si elle est plus grande que l’image.Observez aussi les changements de contenu dans l’inspecteur de propriétés lorsque que vous cliquez sur les différents éléments qui se trouvent maintenant sur votre page.Attention : L’image ne se trouve pas dans la page HTML. Elle y est appelée, d’où l’importance de garder les chemins d’accès (ou adresses) intactes dans le système d’exploitation.

Note.Pour déplacer un tableau se positionner dans le coin haut gauche à l’intérieur du tableau. Il apparaît un icône de tableau. On peut le déplacer en faisant glisser cet icône. De manière générale toutes les méthodes de sélection acquises pour Word, fonctionnent….

16

Et pour vous le prouver :

29.Sélectionner l’image pour ensuite aller voir dans le code HTML.30.Cliquer sur le bouton fractionner.31.Dans la partie supérieure de la fenêtre (la portion Code) vous pouvez voir

la ligne correspondante à votre image qui est sélectionnée également.

Comme vous pouvez le constater, l’attribut image (<img src=»images/ .) correspond en fait à l’endroit où le fichier image se trouve dans le dossier de votre site local, normalement dans le dossier images. La balise HTML src signifie en fait «source». On peut aussi y lire la hauteur et la largeur de votre image.

Même si vous n’utiliserez pas le mode Code dans cet abrégé, n’hésitez pas à observer les correspondances entre vos sélections dans le mode Création et les lignes de code. Plus tard, vous vous rendrez peut-être compte que c’est de cette manière que vous avez fini par comprendre le HTML !

32.Revenir en mode Création (troisième bouton Création de barre en dessous de l’onglet index.htm)

17

5.3. Les propriétés de la page

Pour accéder à la fenêtre Propriétés de la page, procédez comme suit :

33.Veuillez à ce que rien de particulier ne soit sélectionné.34.Cliquez sur le bouton Propriétés de la page qui se trouve dans

l’inspecteur de propriété

Pour obtenir plus de détails sur cette fenêtre, l’option Aide au bas de la fenêtre vous mènera directement à cette page de l’aide.

Nous n’utiliserons pas tous les paramètres de la fenêtre Propriétés de la page dans cet abrégé. Le Titre/codage, le tracé de l’image, etc. sont des fonctions plus avancées. Nous allons nous concentrer plutôt sur les couleurs.

35.Avec la catégorie Aspect toujours activée, cliquer sur le carré situé à droite de la rubrique Couleur d’arrière-plan.

36.Sélectionner une couleur bleu pale avec le pointeur dans la palette.37.Valider.38.Revenir en arrière avec Ctrl + Z pour retrouver un fond Blanc.

En quittant la fenêtre Propriété de la page, on obtient le changement de couleur d’arrière-plan. La procédure est exactement la même pour modifier la couleur du texte et des liens.

18

En plus d’avoir la possibilité de choisir une couleur pour le texte, vous pouvez définir les couleurs pour les différents états des liens (non visités, visités ou actifs). Ces couleurs sont appliquées par défaut. C’est-à-dire que si vous ne spécifiez aucune couleur de texte par l’entremise de l’inspecteur de propriétés, la couleur par défaut choisie dans la fenêtre

5.4. Les liensDans cette partie, nous allons commencer par introduire un lien actif de courriel dans votre page. Un courriel actif (ou lien de messagerie électronique) à pour effet de faire démarrer l’application de courriel pour laquelle l’ordinateur de l’usagé est configuré, puis d’ouvrir un nouveau message vierge dans lequel votre adresse sera inscrite comme destinataire. L’inconvénient c’est qu’il faut qu’une application de courriel se trouve sur l’ordinateur, sinon le lien actif n’aura aucun effet.

L’insertion d’un courrielVous pouvez faire en sorte que quelques mot ou une phrase contiennent votre adresse courriel active. Cela pourrait être votre adresse comme telle. Cela peut aussi être une image. Dans le cas d’une image, il est recommandé d’utiliser de petites images faisant référence au courriel pour ne pas porter à confusion.

L’insertion d’un lien de courriel dans un texte

39.Dans votre document, positionner votre curseur sous le tableau. 40.Centrer votre curseur.41.Faire Insertion, Lien de Messagerie. 42.Dans la boîte de dialogue, tapez le texte qui contiendra votre adresse (un

texte du genre : « Écrivez-moi! »)43. Inscrivez votre adresse de courriel Courrier électronique

(du genre : monprenom.monnom@free.fr)44.Validez par OK.

Le texte apparaît en bleu et il est souligné ce qui indique la présence d’un lien.

6. L’édition de la deuxième pagePour créer un lien vers une autre page, celle-ci doit préalablement exister. Nous allons donc la créer.

6.1. La création de la deuxième page et l’insertion d’un lien

45.Créer une nouvelle page (deuxiemepage.htm) avec :Fichier Nouveau, Page de base, créer

46.Enregistrer saisie du nom de la page : deuxiemepage.htm (sans accent !)47.Sans quitter Dreamweaver, réduire sa fenêtre.48.Aller dans le dossier /Textes qui se trouve dans le dossier de votre site.49.Ouvrir votre fichier texte : deuxiemepage.doc50.Tout sélectionner / Copier (Ctrl + A / Ctrl + C).51. Quitter Word. Revenir dans DreamWeaver.52.Dans Dreamweaver, insérez votre curseur dans la page devant contenir

votre texte. Coller le texte (Touche Ctrl + V).

19

Le texte s’insère dans la page désirée.

53.Mettre les titres en bleus et en 24 pts, Arial.54.Mettre les textes en noir et 12 pts – les mots clefs sont en bleus.55.Observez les propriétés du texte dans l’inspecteur de propriétés.

L’insertion d’un lien

56.Sélectionner votre page d’accueil index.htm dans le panneau à droite en double-cliquant dessus.

57.Taper dans la première page le texte « informations supplémentaires » sous le tableau avant le lien vers le courriel.

58.Sélectionner ce texte.59.Dans l’inspecteur de propriétés utiliser la cible pour la

glisser sur la page « deuxiemepage.htm » (une flèche apparaît !)

Voilà ! C’est fait !

20

Note.Ne vous inquiétez pas si dans le Panneau Fichiers, Dreamweaver ne remets pas systématiquement l’arborescence des fichiers à jour. Vous pouvez utiliser pour cela le bouton actualiser

Mais parfois cela n’est pas suffisant !Il faut alors enregistrer la page en cours, quitter Dreamweaver et Redémarrer !

60.Placez votre curseur dans le lien que vous venez de créer, pour vérifier que le lien s’affiche dans le champ Lien de l’Inspecteur de propriétés.

61.Afficher la deuxième page.62.Sélectionner le mot « coordonnées ».63.Définir un lien entre ce mot et la première page : index.htm.

6.2. L’aperçu dans un navigateurRegardons de quoi votre page à l’air et comment elle réagit dans l’environnement d’un navigateur. Habituellement vous avez le choix entre Netscape ou Explorer. Idéalement les deux. Certains éléments HTML ne sont pas affichés de la même manière d’un navigateur à l’autre. Il est alors intéressant de faire des comparaisons. De toutes façons, vous pouvez maintenant visualiser votre page et la voir comment elle pourra être vue sur le Web.

Pour visualiser une page Web à partir d’un navigateur

64.Appuyez sur la touche F12 pour utiliser le navigateur principal

C’est de cette manière que vous pourrez voir si votre page ou votre site Web fonctionne bien, si tous les liens et les images survolées fonctionnent correctement. Mais il n’est pas inutile d’aller consulter votre site par Internet Explorer à partir d’un autre site ! Attention, souvent vous serez obliger d’actualiser l’affichage dans votre navigateur en appuyant sur la touche F5, sinon les modifications sembleront ne pas être prises en compte.Vous pouvez maintenant retravailler tous les aspects de vos deux pages.

6.3. La publicationUne fois votre compte actif, vous avez pris note des informations qui vous sont données, c’est à dire le nom d’utilisateur, le mot de passe, le nom du site FTP ou adresse FTP, l’URL de votre site (ou adresse HTTP), etc.

6.4. Procédure à suivre pour configurer votre siteNormalement ce travail a été fait pour la page de texte « coucou » dans les préliminaires.

21

6.5. Enregistrer les fichiers sur le site distantReportez vous pour les détails au début de ce cours dans les préliminaires.

Placer un fichier

65.Cliquer sur le bouton Connecter à l’hôte distant Si tout ce passe bien les deux prises bleues sont connectées.

66.Cliquer sur le bouton Développer réduire pour avoir les contenus du site local et du site distant sur une même page..

67.Sélectionner le fichier index.htm et cliquer sur la flèche bleue orientée vers le haut (Clic sur Ok pour la question : inclure les fichiers dépendants).

68.Cliquer sur le dossier racine de votre site local (ici Site- Mon site) avec le bouton de droite.

69.Prendre synchroniser dans le menu contextuel.

70.Quand le transfert est terminé, pour fermer cette fenêtre cliquer à nouveau sur le bouton Développer réduire.

71.Réduire la fenêtre de Dreamweaver.

72.Lancer Internet explorer73.Aller sur le site distant pour pouvoir vérifier votre travail

74.S’il y a lieu, actualiser la page avec la touche F5.

22