Crer un site web simple

Avec Dreamweaver 2

Ides et matriel ncessaires

Une rflexion et des rponses des questions prliminaires
Quelques connaissances basiques de mise en page dans un traitement de textes Le logiciel Dreamweaver 2 install sur son poste Un peu de rigueur et d imagination ...

Des rponses prcises aux questions :

Pourquoi faire un site web ? Pour qui (Quelle cible ) ? Que contiendra-t-il ? Comment va-t-on travailler (avec qui, avec quelles comptences, sur quel matriel, avec quelles possibilits de temps, pour avoir fini quelle date, ...) ?

Connaissances de base
Savoir rdiger un texte, le mettre en forme Savoir insrer une image, faire un tableau Savoir scanner et rapidement travailler une image Savoir crer un dossier, y enregistrer un fichier, le retrouver, le r-ouvrir

Avant de dmarrer
3 prcautions : Etablir sur papier un plan du site Crer un dossier pour le site Avoir rflchi aux problmes de droits

Plan du site
Prvoir sur papier le contenu et la prsentation des pages, lemplacement des images, les liens ...
Exemple d organisation dun site simple :
Page d accueil

Page 2
contenant 1 texte, 2 images, un lien vers la page 4 et un retour vers la page daccueil

Page 3
avec un tableau, 2 liens externes et un retour vers la page daccueil

Page 4
comportant sur une image un lien vers la page 2, et un retour vers la page daccueil

Prparation du dossier

Mon site

Crer sur le disque dur un nouveau dossier, qui contiendra tous les lments constitutifs du site Y crer un sous-dossier images pour y placer tous les documents iconographiques (fonds, boutons, gifs, photos, )

Placer ventuellement dans le dossier les fichiers .htm dj existants (enregistrs partir de Word )

Conseils pratiques
Tous les documents (fichiers, images, ) doivent figurer dans le dossier rserv au site : penser les y ranger ou les y copier !

Ne donner aucun nom de dossier, de fichier ou dimage excdant

8 caractres (extension non comprise) Ne pas utiliser despaces, de majuscules, de signes de ponctuation dans le nom des fichiers

Ceci afin de faciliter la navigation (liens) et lintgration ventuelle du site sur un serveur institutionnel (CRDP par exemple)
Autre remarque : Dans les textes, viter les soulignements qui pourraient tre pris pour les liens actifs qui naboutiront pas !

Formats de fichiers
Les pages elles-mmes : elles sont au format HTML ; on peut :
Les crer directement dans Dreamweaver (Menu
Fichier => Nouveau ; la nommer tout de suite par le menu Modifier => Proprits de la page)

Les enregistrer partir de Word (dans le cas de l'utilisation

d'un document prexistant) : dans ce cas, ouvrir le fichier dans Word, aller dans le menu Fichier , cliquer sur Enregistrer au format HTML (Word 97) ou Enregistrer en tant que page web sur Word 2000, et l'enregistrer dans le dossier cr pour notre site.

Chaque page web est crite dans un langage particulier appell le HTML
"Hypertext Generalized Markup Language".

Ce langage est bas sur des balises (ou tags), qui contiennent des instructions, lesquelles sont interprtes par les diffrents navigateurs et apparaissent sur votre cran. Il s'agit donc d'un langage de mise en forme du texte. Le code HTML d'une page est appel le "code source". Il nest pas utile, mme si cela est souhaitable, de connatre le langage HTML pour btir des pages web : certains logiciels, tels Dreamweaver, le font pour vous de manire transparente , sans que vous le voyiez !

Choix esthtiques : il est important de dfinir une harmonie de couleurs (fonds, textes, liens), de boutons, dimages et gifs anims, un nombre rduit de polices (parmi les plus courantes afin que tous les postes les reconnaissent). Il faut donc dfinir une charte graphique pour le site !

Les images : elles n'ont pas besoin d'une dfinition trs fine, mais par contre devront se "charger" le plus rapidement possible. Il est donc conseill d'utiliser Le format GIF (.gif), format de 8 bits pouvant afficher un
choix limit de couleurs (256) : pratique pour les dessins et petites animations. Attention : pour les animations, prvisualiser ses pages dans MIE et dans Netscape pour viter certaines mauvaises surprises (affichage fixe ou animation ne se produisant quune seule fois)

Le format JPEG ou ProJPEG (.jpeg ou .jpg) pour

les photographies et images utilisant une plus large palette de couleurs ; les images JPEG doivent tre enregistres en mode RVB (couleurs indexes) afin dtre prises en charge par les navigateurs.

Le son : On peut associer une page un fichier MIDI (.mid), lourd

seulement de quelques kilo-octets ou dizaines de Ko

La vido : dont laffichage ncessite la prsence dun plug-un

externe installer sur son disque dur :

Fichiers Microsoft Vido (.avi), pouvant utiliser le contrle ActiveX Active Movie
Fichiers MPEG (.mpg ou .mpeg)

Fichiers QuickTime (.mov)

Fichiers Shockwave (.dcr)

Installer Dreamweaver 2
Ce logiciel de cration de site, actuellement propos dans la version 4 (payante) est utilisable gratuitement dans sa version 2 ; il suffit de se le procurer et de linstaller sur son disque dur. Une icne sur le bureau (raccourci), et une en barre des tches seront utiles pour travailler confortablement ! Un programme de tlchargement (FTPExpert, Cute FTP) sera ncessaire pour monter le site termin sur le web, et ensuite l actualiser

Cration de la page d accueil

Une page vierge saffiche louverture du logiciel

Barre Objets

Il est prfrable dafficher la page en grande fentre et davoir toujours l cran les 2 barres d outils indiques

Peuvent safficher par le menu Fentre

Barre Proprits

Construction de la page d accueil

On peut par exemple y placer 3 cadres, pour le titre, le sommaire et le contenu de laccueil.

Pour en arriver l :
Ouvrir le menu Modifier => Jeu de cadres => Fractionner le cadre vers le haut. Par glisser - dposer (bouton gauche souris enfonc), remonter la ligne horizontale

Cliquer dans la partie du bas ; ouvrir le menu Modifier => Jeu de cadres => Fractionner le cadre gauche ; tirer gauche la ligne verticale obtenue
On a cr ainsi 3 zones, qu il faut enregistrer chacune sous un nom diffrent : cliquer dans une zone => menu fichier => enregistrer sous => ouvrir le dossier Mon site => enregistrer sous le nom choisi (titre par exemple). Recommencer pour les 2 autres zones. Il faut ensuite enregistrer la page entire pour en faire la page d accueil : par le menu Fichier, cliquer sur Enregistrer le jeu de cadres sous => s ouvre le dossier du site o on enregistre sous le nom d index Exemple : site Communimage http://multimania.com/communimage/index.htm

Enregistrement du site pour Dreamweaver

Pour faire fonctionner le site, les liens qui y seront placs, il doit tre le plus vite possible enregistr. Ouvrir le menu Fichier => Nouveau site
Donner un nom Cliquer sur icne pour rechercher le dossier, et le

slectionner

OK

Cliquer sur Crer dans la proposition qui souvre ensuite ; apparat alors la fentre suivante :

Se positionner avec la souris sur le fichier index => Cliquer ici pour obtenir la carte du site

bouton droit => Dfinir comme page daccueil ; cela permettra d obtenir la carte du site

Fermer alors la fentre pour retourner la cration de pages.

Proprits de la page
Crer la page 2 par le menu Fichier => Nouveau.

Aller au menu Modifier => Proprits de la page

Donner un titre

Terminer en cliquant sur Appliquer et OK

Dfinir les choix d arrireplan (image ou couleur)

Dterminer les couleurs de texte, liens, selon une charte graphique

Travail sur la page 2

Texte slectionn

Choix de la police, de la taille, de la mise en forme (ici, gras et centr)

Dreamweaver est un diteur WYSIWYG : en cliquant sur F12, on a accs au navigateur ; en actualisant par F5, on peut tester les effets programms !

Cliquer sur le menu Insertion => Image

Souvre alors cette fentre de dialogue ; de Mon site , cliquer sur le sous-dossier Image, dans lequel on aura plac une image ; cliquer pour en voir laperu, et ensuite sur Slectionner : elle sera place sur la page !

Enregistrer la page (Fichier => Enregistrer sous => Mon site => la nommer page2

L image est apparue ; on peut par les pognes en modifier la taille. Aller la ligne, taper Vers page 4 , modifier les paramtres de ce texte : police, taille, couleur en cliquant ici pur choisir dans la palette, ...

Insrer un bouton (plac dans le sousdossier Images) comme il a t fait pour limage pour prparer le retour vers la page daccueil

Ouvrir 2 nouvelles pages (menu Fichier => Nouveau), et les enregistrer dans le dossier Mon site sous les noms de page3 et page4. Leur donner un nom par Modifier => Proprits de la page Si les pages ne sont pas refermes, on pourra passer de l une lautre en cliquant sur leur nom en ouvrant le menu Fentre.

Revenir la page 2 (en cliquant ici) afin de prparer les liens.

Slectionner le texte, cliquer sur l icne dossier

S ouvre le contenu du dossier ; cliquer sur le fichier correspondant la page, puis sur Slectionner

Le lien vient sinscrire dans la fentre correspondante ; on aurait pu directement y taper le nom du fichier. C est l que lon tapera lURL d un site vers lequel on voudra faire un lien

Le texte a chang de couleur et est soulign ; le lien est cr.

Slectionner limage du bouton, et taper dans la fentre Lien le nom de la page daccueil (index.htm). Touche Entre (clavier) pour enregistrer. Revenir la page 3 pour crer le tableau Cliquer ici pour faire apparatre la fentre de dialogue.
Choisir le nombre de lignes et de colonnes ; pour un tableau qui prendra automatiquement la largeur de lcran, choisir 100 et pourcentage. En tapant 0 dans Bordure, on supprime le cadre du tableau. OK pour le crer.

La taille des cellules peut se modifier par Gliss sur les limites de cadres.

Lien vers une information place dans la mme page : cration d une ancre nomme.
Slectionner le texte vers lequel on veut crer un lien ; ouvrir le menu Insertion => Ancre nomme. Dans la fentre, taper un nom (bas par exemple)

Slectionner l endroit d o partira le lien ; dans la fentre de lien, taper le nom de lancre prcd du signe #
Aller vrifier par F12 et F5 que cela fonctionne

(il faut pour cela qu il y ait vraiment un texte assez long entre les 2 parties de la page !)

Lien vers une adresse de courrier lectronique

Slectionner lendroit d o se fera le lien (ce peut tre aussi un gif anim de mail) Taper dans le champ Lien : mailto: suivi de votre adresse E.Mail

Par F12 et F5, vrifier le lien

Xxxxxxx

Une fentre courrier s ouvre, avec votre adresse dj indique sur le ligne A

Pour aller plus loin ...

Le site de Luc Van Lancker, prsentant un didacticiel pour Dreamweaver 2 :

http://www.ccim.be/ccim328/html/dreamweaver/dream.html
Le mme auteur propose une dcouverte pour dbutants du langage HTML :

http://www.ccim.be/ccim328/html
Un tutoriel complet pour Dreamweaver l adresse : http://www.info-3000.com/dreamweaver/index.htm Des outils et tutoriels qubcois pour monter son site :

http://www.seminaire-sherbrooke.qc.ca/pays/frameset1.html
Liens utiles pour crer sons site partir de l adresse : http://www.thefreesite.com

Et encore ...
Fabrication de titres anims sur le site : http://www.mediabuilder.com/ Pages pour mieux connatre et utiliser les images : http://nte-serveur.univ-lyon1.fr/nte/html1/typefic.htm

de cette page prsentant les formats, avancer en cliquant en bas droite sur suite du cours
En librairie : Poche VISUEL Dreamweaver 3 Editions First Interactive, 231 pages, 69 francs
La version 3 diffre peu de la 2, et la quasi-totalit des informations de ce livre sont valables pour Dreamweaver 2 !