créer un site web simple avec dreamweaver 2. idées et matériel nécessaires une réflexion et des...
TRANSCRIPT
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 !