Créer un site web Créer un site web simplesimple

Avec Dreamweaver 2Avec Dreamweaver 2

Idées et matériel Idées et matériel nécessairesnécessaires

• Une réflexion et des réponses à des questions préliminaires

• 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 réponses précises aux questions :

• Pourquoi faire un site web ?• Pour qui (Quelle « cible ») ?• Que contiendra-t-il ?• Comment va-t-on travailler (avec

qui, avec quelles compétences, sur quel matériel, avec quelles possibilités de temps, pour avoir fini à quelle date, ...) ?

Connaissances de base• Savoir rédiger un texte, le mettre

en forme• Savoir insérer une image, faire un

tableau• Savoir scanner et rapidement

« travailler » une image• Savoir créer un dossier, y

enregistrer un fichier, le retrouver, le ré-ouvrir

Avant de démarrerAvant de démarrer

3 précautions :

• Etablir sur papier un plan du site

• Créer un dossier pour le site

• Avoir réfléchi aux problèmes de droits

Plan du sitePlan du sitePrévoir sur papier le contenu et la

présentation des pages, l’emplacement des images, les liens ...

Exemple d ’organisation d’un site simple :

Page d ’accueil

Page 2

contenant 1 texte, 2 images,

un lien vers la page 4 et un retour vers la page d’accueil

Page 3

avec un tableau, 2 liens externes et un retour vers la page d’accueil

Page 4

comportant sur une image un lien vers la page 2, et un

retour vers la page d’accueil

Préparation du dossier

« Mon site »• Créer sur le disque dur un nouveau dossier, qui contiendra tous les éléments constitutifs du site

• Y créer un sous-dossier « images » pour y placer

tous les documents iconographiques (fonds, boutons, gifs, photos, …)

• Placer éventuellement dans le dossier les fichiers .htm déjà existants (enregistrés à partir de Word )

Conseils pratiquesConseils pratiques

• Ne donner aucun nom de dossier, de fichier ou d’image excédant 8 caractères (extension non comprise)

• Ne pas utiliser d’espaces, de majuscules, de signes de ponctuation dans le nom des fichiers

Ceci afin de faciliter la navigation (liens) et l’intégration é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 n’aboutiront pas !

• Tous les documents (fichiers, images, …) doivent figurer dans le dossier réservé au site : penser à les y ranger ou les y copier !

Formats de fichiersFormats de fichiers

Les pages elles-mêmes : elles sont au format HTML ; on peut : Les créer directement dans Dreamweaver (Menu “ Fichier ” => Nouveau ; la nommer tout de suite par le menu “ Modifier ” => Propriétés de la page)  Les enregistrer à partir de Word (dans le cas de l'utilisation d'un document préexistant) : 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 interprétées par les différents 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 n’est pas utile, même si cela est souhaitable, de connaître le langage HTML pour bâtir des pages web : certains logiciels, tels Dreamweaver, le font pour vous de manière « transparente », sans que vous le voyiez !

Choix esthétiques : il est important de définir une harmonie de couleurs (fonds, textes, liens), de boutons, d’images et gifs animés, un

nombre réduit de polices (parmi les plus courantes afin que tous les postes les reconnaissent). Il faut donc définir une charte graphiquecharte graphique

pour le site !

Les images : elles n'ont pas besoin d'une définition très 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, prévisualiser ses pages dans MIE et dans Netscape pour éviter certaines mauvaises surprises (affichage fixe ou animation ne se produisant qu’une 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 enregistrées en mode RVB (couleurs indexées) afin d’être 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 vidéo : dont l’affichage nécessite la présence d’un “ plug-un ” externe à installer sur son disque dur :

Fichiers Microsoft Vidéo (.avi), pouvant utiliser le contrôle ActiveX Active Movie

Fichiers MPEG (.mpg ou .mpeg)

Fichiers QuickTime (.mov)

Fichiers Shockwave (.dcr)

Installer Dreamweaver 2

• Ce logiciel de création de site, actuellement proposé dans la version 4  (payante) est utilisable gratuitement dans sa version 2 ; il suffit de se le procurer et de l’installer sur son disque dur.

• Une icône sur le bureau (raccourci), et une en barre des tâches seront utiles pour travailler « confortablement » !

• Un programme de téléchargement (FTPExpert, Cute FTP) sera nécessaire pour « monter » le site terminé sur le web, et ensuite l ’actualiser

Création de la page Création de la page d ’accueild ’accueil

Une page vierge

s’affiche à l’ouverture du

logiciel

Il est préférable

d’afficher la page en « grande

fenêtre » et d’avoir

toujours à l ’écran les 2

barres d ’outils indiquées

Peuvent s’afficher par le menu « Fenêtre »

Barre Objets

Barre Propriétés

Construction de la page d ’accueil

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

• Ouvrir le menu Modifier => Jeu de cadres => Fractionner le cadre vers le haut. Par glisser - déposer (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 différent : 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 entière 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

Pour en arriver làPour en arriver là ::

Exemple : site « Communimage »

http://multimania.com/communimage/index.htm

Enregistrement du site pour Enregistrement du site pour DreamweaverDreamweaver

Pour faire fonctionner le site, les liens qui y seront placés, il doit être le plus vite possible enregistré.

Ouvrir le menu Fichier => Nouveau site

Donner un nom

Cliquer sur  ’icône

pour rechercher le dossier,

et le sélectionne

r

OK

Cliquer sur Créer dans la proposition qui s’ouvre ensuite ; apparaît alors la fenêtre suivante :

Se positionner avec la souris sur le fichier « index »

=> bouton droit => Définir comme page

d’accueil ; cela permettra d ’obtenir la carte du siteCliquer ici pour obtenir la carte du

site

Fermer alors la fenêtre pour retourner à la création de pages.

Propriétés de la pagePropriétés de la page• Créer la page 2 par le menu Fichier => Nouveau.

• Aller au menu Modifier => Propriétés de la page

Donner un titre

Définir les choix

d ’arrière-plan (image ou couleur)

Déterminer les couleurs

de texte, liens, … selon

une charte graphique

Terminer en cliquant sur « Appliquer 

» et OK

Travail sur la page 2Travail sur la page 2

Texte sélectionné

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, Dreamweaver est un éditeur WYSIWYG : en cliquant sur F12, on a accès au navigateur ; en actualisant par F5, on peut on a accès au navigateur ; en actualisant par F5, on peut

tester les effets programmés !tester les effets programmés !

Cliquer sur le menu Insertion => Image

S’ouvre alors cette fenêtre de dialogue ; de « Mon

site », cliquer sur le sous-dossier Image, dans lequel on aura placé une image ;

cliquer pour en voir l’aperçu, et ensuite

sur Sélectionner : elle sera placée sur la page !

Enregistrer la page (Fichier =>

Enregistrer sous => Mon site => la

nommer page2

L ’image est apparue ; on peut par les

pognées en modifier la taille. Aller à la ligne, taper « Vers page 4 »,

modifier les paramètres de ce texte : police, taille, couleur

en cliquant ici pur choisir dans la

palette, ...

Insérer un

bouton (placé dans le sous-

dossier Images) comme il a été

fait pour

l’image pour

préparer le retour vers la page

d’accueil

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 => Propriétés de la page

Revenir à la page 2 (en

cliquant ici) afin de

préparer les liens.

Si les pages ne sont pas refermées, on pourra passer de l ’une à l’autre en cliquant sur leur nom en ouvrant le menu Fenêtre.

Sélectionner le texte, cliquer sur l ’icône dossier

S ’ouvre le contenu du dossier ; cliquer sur le fichier

correspondant à la page, puis sur

Sélectionner

Le lien vient s’inscrire dans la fenêtre correspondante ; on

aurait pu directement y taper le nom du fichier. C ’est là que l’on tapera l’URL d ’un site vers lequel on voudra

faire un lien

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

créé.

Sélectionner l’image du bouton, et taper dans la fenêtre Lien le nom de la

page d’accueil (index.htm). Touche Entrée (clavier) pour

enregistrer.Revenir à la page 3 pour créer le

tableauCliquer ici pour faire

apparaître la fenêtre de dialogue.

Choisir le nombre de lignes et de colonnes ; pour un tableau

qui prendra automatiquement la largeur de l’écran, choisir 100 et pourcentage. En tapant 0 dans Bordure, on supprime le cadre du tableau. OK pour le créer.

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

Lien vers une Lien vers une information placée information placée

dans la même page : dans la même page : création d ’une ancre création d ’une ancre

nommée.nommée.Sélectionner le texte vers lequel on veut créer un

lien ; ouvrir le menu Insertion => Ancre

nommée.

Dans la fenêtre, taper un nom (bas par exemple)

Sélectionner l ’endroit d ’où

partira le lien ; dans la fenêtre de lien, taper le nom de

l’ancre précédé du signe #

Aller vérifier 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 Lien vers une adresse de courrier électroniquecourrier électronique

Sélectionner l’endroit 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

Xxxxxxx

Par F12 et F5, vérifier le lien

Une fenêtre courrier s’ ouvre, avec votre

adresse déjà indiquée sur le ligne A

Pour aller plus loin ...Pour aller plus loin ...• Le site de Luc Van Lancker, présentant un didacticiel pour Dreamweaver 2 :

http://www.ccim.be/ccim328/html/dreamweaver/dream.html

• Le même auteur propose une découverte pour débutants 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 québécois pour monter son site :

http://www.seminaire-sherbrooke.qc.ca/pays/frameset1.html

• Liens utiles pour créer sons site à partir de l ’adresse :

http://www.thefreesite.com

Et encore ...Et encore ...• Fabrication de titres animés sur le site :

http://www.mediabuilder.com/

• Pages pour mieux connaître et utiliser les images :

http://nte-serveur.univ-lyon1.fr/nte/html1/typefic.htm

de cette page présentant 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 diffère peu de la 2, et la quasi-totalité des informations de ce livre sont valables pour Dreamweaver 2 !