Créer un site web simple Avec Dreamweaver 2

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 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

avec un tableau, 2 liens externes et un retour vers la page d ’accueil 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 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

Quelques exemples de structures de sites Site « linéaire » : calqué sur la structure du livre-papier, il n ’autorise qu ’un parcours défini de consultation du site Site « hiérarchisé » : organisé à l ’image de l ’arborescence d ’un disque dur (dossiers, sous-dossiers, …) à partir d ’une page d ’accueil, il comporte souvent un sommaire et peut être accompagné d ’un « plan du site » Site « en étoile » : à partir d ’un « accueil » - rond point central, on se dirige rapidement vers les différentes parties du site, avec obligation de revenir vers l ’accueil pour changer de direction ! Site « tout hyperliens » : en théorie, on peut de chaque page du site accéder à toutes les autres. Liberté absolue de navigation, au risque de se « perdre » et de devoir consulter un « plan du site » qui doit être accessible à tout moment ! A choisir et adapter en fonction des objectifs et de la « cible » ; dans tous les cas, mieux vaut choisir la simplicité dans le fond et dans la forme !

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 Tous les documents (fichiers, images, …) doivent figurer dans le dossier réservé au site : penser à les y ranger ou les y copier ! 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 !

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 !

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 ( 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 MX  (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 Une page vierge s’affiche à l’ouverture du logiciel Barre Objets Peuvent s ’afficher par le menu « Fenêtre » 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 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.

Exemple : site « Cineva » Pour en arriver là : 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 Exemple : site « Cineva » http://cineva.free.fr

Enregistrement du site pour Dreamweaver Pour faire fonctionner le site, les liens qui y seront placés, il doit être le plus vite possible enregistré. Cliquer sur l’icône pour rechercher le dossier, et le sélectionner Ouvrir le menu Fichier => Nouveau site Donner un nom OK

Fermer alors la fenêtre pour retourner à la création de pages. 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 Créer la page 2 par le menu Fichier => Nouveau. Aller au menu Modifier => Propriétés de la page Terminer en cliquant sur « Appliquer » et OK 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

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 accès au navigateur ; en actualisant par F5, on peut 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 !

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 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, ...

Revenir à la page 2 (en cliquant ici) afin de préparer les liens. 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 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. Revenir à la page 2 (en cliquant ici) afin de préparer les liens.

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 (dans ce cas, choisir _blank dans le champ Cible pour ouvrir le lien dans une nouvelle page

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 Bordure, on supprime le cadre du tableau. OK pour le créer.

Dans la fenêtre, taper un nom (bas par exemple) La taille des cellules peut se modifier par Glissé sur les limites de cadres. Lien vers une information placée dans la même page : création d ’une ancre nommée. 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 !) 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)

Lien vers une adresse de courrier électronique Sélectionner l’endroit d’où se fera le lien (ce peut être aussi un gif animé de mail); éviter d’inscrire ici l’adresse elle-même : la laisser en « transparence » sous un texte ou un gif Taper dans le champ Lien : mailto: suivi de votre adresse E.Mail Xxxxxxx Une fenêtre courrier s’ ouvre, avec votre adresse déjà indiquée sur le ligne A Par F12 et F5, vérifier le lien

Touches de fonction F12 permet de voir la page dans le navigateur et d’ y faire « tourner » le site F5 permet  d ’ « actualiser » les modifications afin de les faire apparaître dans le navigateur F10 fait apparaître le code source HTML, dans lequel on peut inclure certains éléments (balises META, java scripts, …)

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 ... 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 !