Créer un site web simple Créer un site web simple
Avec Dreamweaver 2
Avec Dreamweaver 2
Idées et matériel nécessaires Idées et matériel né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émarrer Avant 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 site Plan du site
Pré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
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 pratiques Conseils 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 fichiers Formats 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 graphique pour le site ! charte graphique
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 d ’accueil Création de la page d ’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
Dreamweaver Dreamweaver
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électionner
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 site
Cliquer ici pour obtenir la carte
du site
Fermer alors la fenêtre pour retourner à la création de pages.
Propriétés de la page Proprié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 2 Travail 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, on a Dreamweaver est un éditeur WYSIWYG : en cliquant sur F12, on a accès au navigateur ; en actualisant par F5, on peut tester les effets accès au navigateur ; en actualisant par F5, on peut tester les effets
programmés !
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
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 tableau
Cliquer 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
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 électronique courrier é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
