TP : Cration de mon premier site WEB (version courte)

(daprs un document de J. MAILLET IUFM NICE)

0) Mise en place : Crer sur le bureau, un dossier premiersite, qui servira mettre toutes les informations du site WEB que nous allons crer. Aller sur le web et chercher une image (en Jpeg ou Gif) dun cube, la mettre dans le dossier premier site pour linstant. 1) Carte du site : Avant de commencer un site, il faut avoir lesprit la structure du site WEB que lon va crer. Pour commencer, faisons simple : On va crer un mini-site avec une page daccueil et una page sur le cube. Page daccueil CUBE 2) Cration du site : Ouvrir Dreamweaver 7 (ou autre version) puis cliquer sur Site -> grer les site ->Nouveau site, la fentre suivante apparat (suivant les versions de Dreamweaver, la fentre est diffrente) :

Figure 2 : Dfinition du site local .

5. Cliquez dans la zone de droite sur la catgorie Infos locales , puis remplissez comme dans la figure prcdente, les zones Nom du site ici il sappelle IUFM mais nommez-le par exemple mon premier site, puis indiquez le nom du dossier racine local en cliquant sur licne dossier valise jaune et en parcourant le disque dur : ici ce sera mon premier site que lon a cr sur le bureau. 6. Cliquez sur la case cocher Utiliser le cache 1() mise jour des liens , et terminez en cliquant sur OK. (cette case sappelle aussi Activer le cache) Dreamweaver peut aussi vous demander dans quel dossier seront les images, pour notre mini site , lui indiquer quelle seront dans la mme dossier Cliquez sur OK puis sur terminer. Suvant les versions de Dreamweaver, il apparat sur la partie droite le nom de notre site :
1

Le cache sert stocker certains fichiers afin d'optimiser le chargement de certaines pages.

(sous dreamweaver 7) 3) Cration de la page daccueil La carte du site tant ouverte comme sur la fentre prcdente, cliquez sur puis faire un clic droit , nouveau fichier, le nommer index.htm. Double cliquer sur le nom :

Il apparat une feuille blanche appele Index.htm. Pour dfinir cette page en tant que page daccueil, se placer dans la fentre des fichiers du site, puis il suffit dun clic droit sur son nom depuis la fentre de gestion de site, et de choisir loption Dfinir comme page daccueil .

Enregistrer votre page (fichier enregistrer). Tout le long du TP, il faudra penser enregistrer vos diffrentes pages (celles-ci ne doivent plus comporter d* dans la barre de titre).

4) Cration des pages Index dans les autres dossiers Vous voici maintenant lheureux propritaire dune page daccueil flambante neuve, certes vide, mais bien relle. Il ne reste plus maintenant qu la nourrir, avant daller plus loin, vous pouvez dores et dj crer de la mme manire les autres dossiers (Ici un seul !) et pages qui viendront pauler le contenu de votre futur site : Crer avec fichier nouveau dossier, 1 dossier : cube Vous devez obtenir dans votre carte de site :

5) Ajout dlments aux diffrentes pages : Pour ce faire, il faut garder prsent lesprit larchitecture de notre site. Globalement, toutes les pages de notre site doivent tre accessibles depuis la page daccueil. Pour commencer, il convient de donner un titre la page daccueil. Pour nommer une page : 1. Rduisez la fentre de gestion de site de faon voir lenvironnement de travail de Dreamweaver qui affiche notre page index.htm sans titre. 2. Faites un clic sur la page blanche pour lactiver, puis choisissez menu droulant modifier > proprits de la page. puis cliquer sur Titre/ codage

Dans la zone Titre : saisissez le titre de ce qui va safficher dans le navigateur qui consultera votre page daccueil (par exemple Bienvenue sur mon premier site ).

Vous pouvez galement choisir une couleur darrire plan. aller dans Aspects). Cliquez sur OK pour effectuer vos modifications, la fentre de document affiche maintenant ce que vous venez de saisir dans la barre de titre, vous pouvez galement le tester dans votre navigateur un choisissant le menu droulant Fichiers > aperu dans navigateur(ou F12). On va maintenant rajouter du texte sur la page daccueil : Cliquer sur la page. Ecrire sur la page en haut : LES POLYEDRES, le centrer (texte, aligner, centrer) puis lagrandir (texte, taille, 7) Ecrire une liste (texte, liste, liste simple) avec les mots CUBE, DODECAEDRE, etc

Sur l autre page, on va crire : Le cube, , puis un tableau avec les proprits de la figure dun ct et sa photo de lautre. Puis nous placerons une image (limage du polydre) et un texte. Compte tenu des mdiocres possibilits de mise en page du langage html, la solution la plus simple passe par lutilisation des tableaux. Nous avons donc besoin maintenant dun tableau. Les tableaux Les tableaux sont utiliss pour prsenter des donnes et contrler l'endroit o le texte et les images apparaissent sur la page-cran. Lorsque le tableau est cr, vous pouvez ajouter du contenu, modifier des cellules ,des proprits de lignes, de mme que fusionner et fractionner des cellules. Pour crer un tableau, vous devez procder comme il suit : 1. Rendez-vous dans le menu Insertion, et choisissez loption Tableau. 2. Aussitt une boite de dialogue vous permet den dfinir les attributs. Par exemple, 2 colonnes et 1 ligne. Sa largeur sera de 140 pixels (modifiable plus tard) et la bordure sera de 0.

Lignes et colonnes dterminent le nombre de lignes et de colonnes du tableau. Marge intrieure des cellules dtermine l'espace qu'il y a entre le contenu-cellule et son contour. Espacement des cellules dtermine l'espacement qu'il doit y avoir entre chaque cellule. Largeur dtermine la largeur du tableau exprime en pixels ou en pourcentage de la fentre du navigateur (cf. remarque). Largeur de la bordure dtermine la largeur de bordure du tableau. (0 pixels si pas de bordure) Vous pouvez agrandir le tableau a posteriori avec les flches. Maintenant que notre tableau de 2 x 1 est cr nous allons y placer un texte dans la colonne de droite et une image dans celle de gauche. Les images Dreamweaver, comme la plupart des navigateurs, peut afficher les images JPEG et GIF. Dreamweaver, Microsoft Internet Explorer 4.0 et plus rcent, ainsi que Netscape Navigator 4.04 et plus rcent prennent galement en charge les images PNG. En gnral JPEG est le format optimum pour les images photographiques ou tons continus, et GIF est prfrable pour les images en demi-tons, ou celles qui ont une surface importante de couleurs en aplat (couleurs unies). Le format PNG constitue un remplacement non brevet de GIF, incluant la prise en charge des images en niveaux de gris, de couleurs indexes ou de couleur relle. Remarque : Pour que les images apparaissent dans un document de Dreamweaver, les fichiers d'images doivent se trouver l'intrieur du site local dfini. Si vous choisissez un fichier externe, Dreamweaver vous demandera si vous voulez que le fichier soit copi dans un dossier l'intrieur du site local. Pour notre exemple on partira du principe que vous avez dj plac les images de votre site dans le dossier image de votre site web local (cf. page 6). Pour insrer une image : 1. Placez le curseur l o vous voulez que l'image apparaisse sur la page. 2. Choisissez Insertion, Image, ou cliquez sur le bouton Insrer une image dans le volet Commun de la palette Objet (le premier en forme darbre). 3. Une fentre de dialogue apparat, double-cliquez sur le dossier image. 4. Recherchez le fichier image qui vous intresse en cliquant sur son icne, puis sur Slectionner (figure suivante).

Limage est insre dans votre page, Recommencer la mme manipulation pour toutes les pages. 6) Cration de lien entre les pages On va avoir besoin de crer un lien entre ces diffrentes pages : De la page daccueil vers la page Cube De la page Cube vers la page daccueil Crons des liens entre la page daccueil et la page cube : Ouvrir la page daccueil 1. Slectionnez le texte (ou une image si on veut) dans la fentre : 2. Utilisez linspecteur de proprits prsents en bas de la page :

3. Cliquez sur l'icne de rpertoire pour naviguer jusqu'au fichier cube index et le slectionner. 4. Cliquez sur le bouton Slectionner. Remarque : Vous pouvez taper directement un chemin dans le champ Lien, mais ne le fates jamais. Pour crer un lien vers un document de votre site, entrez un chemin relatif au document. Pour faire en sorte que le document li s'affiche ailleurs que dans la fentre en cours, slectionnez un nom de cadre dans le menu droulant Cible et choisissez la cible rserve _blank qui chargera le document li dans une nouvelle fentre de navigateur. Le lien est maintenant affich dans la fentre du document vous pouvez tout moment tester son allure relle dans le navigateur en faisant un aperu (F12). Par dfaut un lien est format en bleu soulign : cube. Puis se placer sur la page Cube, crer un texte RETOUR VERS LA PAGE DACCUEIL et faire un lien vers la page daccueil. Appuyer sur la touche F12 pour faire un aperu dans un navigateur et tester les liens que vous venez de crer. Tester votre site et le mettre en ligne I. PAZE IUFM NICE

1. Tester le site Utilisez la fonction Vrifier liens pour rechercher les liens briss et les fichiers non rfrencs dans un fichier, un rpertoire, ou dans le site tout entier. Dream vrifie uniquement les liens et rfrences relatifs aux documents du site. Les liens externes sont lists, mais non vrifis. 1. Choisissez Fichier, Vrifier liens, Site entier. 2. La bote de dialogue affiche la liste des liens briss, des liens externes (ceux quil ne peut pas vrifier parce qu'ils renvoient des pages ne faisant pas partie du site) et des fichiers orphelins (fichiers auxquels aucun autre document ne renvoie). 3. Pour basculer entre Liens briss, Liens externes et Fichiers orphelins :menu droulant Afficher. 4. Pour enregistrer tout le rapport comme fichier texte, cliquez sur Enregistrer. Votre site fonctionne maintenant en local, vous allez pouvoir le transfrer. 2. Le mettre en ligne (initiation au File Transfert Protocol FTP) Pour placer votre ralisation sur le serveur Web, vous allez transfrer les fichiers et dossiers de lintgralit de votre site de votre disque dur sur celui de lhbergeur distant. Le navigateur ne sait pas raliser cette tche, il faut se tourner vers un outil dit de FTP ( File Transfert Protocol), Dreamweaver en possde un. Vous devez au pralable renseigner diffrentes rubriques. 1. Dans la fentre de gestion de site, cliquez sur Site, puis sur Dfinir des sites. 2. Slectionnez le vtre, puis cliquez sur le bouton Modifier. 3. Vous tes devant la fentre de dfinition de site qui comporte 4 catgories sur la gauche. Cliquez sur la seconde : Infos distantes. Son contenu apparat. 4. La zone Accs au serveur affiche pour linstant Aucun , vous allez la modifier dun clic de souris pour slectionner loption FTP. 5. Saisissez maintenant les informations qui vous ont t communiques par votre hebergeur Hte FTP : ,Rpertoire de lhte :, Nom dutilisateur : , Mot de passe : 6. Cliquez sur Enregistrer, ne cochez pas Utiliser le pare-feu . 7. Cliquez sur OK, puis sur Terminer, cest tout. Le transfert de fichier peut alors commencer. 8. Cliquez sur le bouton Connecter, qui va alors lancer lassistant de connexion Aprs quelques messages qui apparaissent, la connexion est tablie (le bouton Connecter est devenu Dconnecter en vert), et le cadre de gauche de la fentre de gestion de site, liste le contenu de votre disque distant. Dans le volet droit figure larborescence de votre disque dur. Comme il sagit dun espace disque quon vous attribue, vous allez immdiatement vous retrouver la racine de votre site. 9. Deux mthodes soffrent vous pour transfrer vos fichiers. La premire consiste slectionner le fichier transfrer puis cliquer sur le bouton Placer sur la petite flche oriente vers le haut. La seconde consiste tout simplement utiliser votre souris pour effectuer un Glisser-Dplacer du fichier vers le rpertoire de destination. Tout comme dans l'interface d'Explorer, vous pouvez slectionner plusieurs fichiers transfrer.

I. PAZE

IUFM NICE