1 . Préambule (structure d’une page Web)

1.1 Attention

Quand vous sauvegarderez vos pages, vos images et vos animations, n’utilisez jamais de lettres majuscules ni d’accents, internet risque de ne pas le supporter !

1.2 Contenu

Une page web peut contenir :

· Du texte

· Des images fixes

· Des images animées

· Du son

1.3 Extension

Son « extension est « .htm » ou « .html » (pour Word c’est « .doc »)

1.4 Structure physique

Attention si une image contient du texte et 3 images (img1.jpg ; img2.jpg et img3.jpg par exemple), la « page » est constituée de 4 fichiers informatiques :

· page.htm : La « carcasse » qui contient aussi le texte

· img1.jpg (première image)

· img2.jpg (deuxième image)

· img3.jpg (troisième image)

Remarques :

· Si on ne livre que « page.htm », les images n’apparaîtront pas (cadre vide)

· Le même travail fait avec word ne créera qu’un seul fichier qui « contiendra » les images

1.5 Logiciels de création de pages Web

1.5.1 Pour travailler et créer les images :

· Paint shop pro

· Fireworks

· Photoshop

1.5.2 Pour les animations

· Flash

1.5.3 Pour rédiger et ”chaîner les pages :

· Dreamweaver

· Frontpage

Remarque : ce qui suit est axé sur la version 3 de Dreamweaver. La version 4 est très proche en termes d’ergonomie, vous ne serez pas dépaysés

2 . Présentation de l’interface de Dreamweaver :

· L’interface du logiciel est complexe, il faudra un minimum de pratique pour en appréhender les principales fonctionnalités.

· Palettes et boites de fonction s’affichent (ou se cachent) depuis le menu [Fenêtre]

3 . Gestion d’un site existant :

3.1 Avec l’explorateur Windows :

3.1.1 Créer dossier (répertoire) c:\site1

3.1.2 Y copier les fichiers existants

3.2 Avec Dreamweaver :

3.2.1 Créer un nouveau site [Site – nouveau site]

3.2.2 Renseigner les zones de saisie et cocher « cache » et valider

3.2.3 Créer la vision « arborescente » en cliquant sur le bouton adéquat

3.2.4 Tester les commandes du menu [Sites] ; Editer une page html (en cliquant 2 fois sur son nom)

Vous vous retrouvez dans l’environnement d’édition de Dreamweaver

3.2.5 Renommer un fichier

Dreamweaver, vous demande d’actualiser le code des pages liées, acceptez bien entendu

3.2.6 Déplacer un fichier

Par exemple, créez un répertoire « images » et déplacez y les images !

Dreamweaver, vous demande d’actualiser le code des pages liées, acceptez bien entendu

4 . Créer nouveau site [Menu Site – Nouveau site]

4.1 Définir les paramètres généraux du site

4.1.1 Choisir nom

4.1.2 Choisir répertoire racine

4.1.3 Cocher la case « utiliser cache... »

4.2 Paramétrage de l’éditeur graphique par défaut :

Aller au menu [Edition – préférences - éditeurs externes] et déclarez PSP6 comme éditeur principal des « .gif » et « .jpg »

4.3 Création de la première page

[Fichier – nouveau], une page « untitled.htm » est crée, renommez la « accueil.htm »

Paramètres généraux de la page (clic droit sur la page/propriété de la page), renseignez ici :

4.3.1 Paramètres généraux de la page

4.3.1.1 un titre explicite pour la page

4.3.1.1.1 un fond de page

4.3.1.1.2 couleur

4.3.1.2 motif (fichier graphique)

4.3.1.3 couleur texte

4.3.1.4 couleurs liens

4.3.1.5 marges

4.4 création d’un jeu de cadres (opération périlleuse..)

4.4.1 menu [Insertion – cadres – haut] (par exemple)

Les cadres sont créés, la page accueil se retrouve dans le cadre du bas, dans le cadre haut (pour vous repérer) écrivez « barre », dans le cadre du bas « accueil »

4.4.2 cliquez sur [Enregistrez tout] , il faut successivement enregistrer :

· le jeux de cadre (sa bordure devient épaisse) sous le nom de « index.htm »

· le cadre du haut (sa bordure devient épaisse) sous le nom de « barre_som.htm » par exemple

· le cadre du bas (accueil.htm) s’enregistre tout seul (il avait déjà un nom : accueil.htm)

4.5 Les premiers liens

4.5.1 Création de pages d’essai

Vous avez fabriqué une page « accueil.htm », faites en 2 ou trois copies [enregistrer sous] sommaire.htm, pedagogie.htm, liens.htm par exemple) sur chaque marquez un mot pour la repérer (sommaire, pédagogie, etc..)

4.5.2 Départ des balises hypertexte dans la barre du haut,

Insérer un tableau (1 ligne, 4 ou 5colonnes) qui contient les mots qui appelleront les pages (accueil, sommaire, etc..)

Un clic droit sur le mot accueil (sélectionné) fait apparaître la palette ci dessous :

Vous devez renseigner les cases :

· lien

· police

· taille

· cible (main frame)

Le mot « accueil » se retrouve en couleur et est souligné, le lien est crée

4.6 Liens depuis une image

Une image, ou une zone d’image, peut être définie comme départ d’un lien

4.6.1 Il faut d’abord insérer l’image et la sélectionner,

La palette ci dessous apparaît, remarquez dans le bas (à gauche) les outils pour définir des zones « sensibles » de l’image. Il faut renseigner les boites de saisie,

4.6.1.1 Lien (vers lequel on pointe)

4.6.1.2 Espace V et H (éventuellement,insère de l’espace autour de l’image) et pourquoi pas L et H (si l’on souhaite modifier la taille originale (déconseillé, travailler sur les dimensions de l’image originale...)

4.6.1.3 Cible : il s’agit de la fenêtre dans laquelle s’affichera la page ( _top = plein écran)

4.6.1.4 Bordure..

4.6.1.5 Sec (un texte qui s’affiche si la souris survole le lien)

5 . Tableaux

Ils sont indispensables pour effectuer des mises en page stables.

Attention deux palettes de réglage :

5.1 Palette tableau (si tout le tableau est sélectionné :

Bien noter qu’il y a deux philosophies :

· Travailler en pourcentage (le tableau s’adapte aux caractéristiques de l’affichage)

· Travailler en pixels (Les dimensions du tableau sont fixes)

5.2 Palette Cellules (si une partie du tableau est sélectionné)

6 . Effets spéciaux :

6.1 Images survolées (inversées, roll-over...)

Il s’agit d’images qui changent quand la souris les survolent

Bien réaliser cet effet avec des images de dimension égales

Deux façons de procéder :

6.1.1 Menu [Insérer-Image survolée] (ou inversée)

A utiliser dans le cas où aucune image n’est présente à l’écran

6.1.2 Comportements (intervertir une image)

A utiliser dans le cas où une image est déjà à l’écran

· Sélectionner l’image

· Dans la palette comportements, appuyer sur le bouton + et choisir [Intervertir une image], le nom de l’image alternative est requis, cochez aussi [Pré-charger les images]

6.2 Comportements, Calques et scénarios

6.2.1.1 Comportements

Il s’agit d’actions diverses déclenchées par une action sur un objet (souris, clavier...)

Dans cet exemple :

· Inversion d’images quand la souris passe dessus et sort.

· Joue un son si on clique sur l’image

· Affiche un message à l’arrêt du Click

6.2.1.2 Calques :

Dreamweaver autorise la création de calque(s) sur une page Web

On peut ajouter un calque à un scénario (pour l’animer)

Conseil : ici le calque s’appelle « layer1 » ; si vous avez plusieurs calques renommez les avec des noms significatifs

6.2.1.3 Scénarios

Essentiellement déplacements de calques contenant des images sur une page

Le calque1 a été ajouté au scénario, l’image 1 correspond à sa position initiale et l’image 15 à sa position finale (un peu comme une animation flash)

Notez que sont cochées les cases « lecture auto » et « boucle »

L’exécution d’un scénario peut aussi être déclenchée par un comportement sur un autre objet (souris qui passe sur une image par exemple)

6.3 Insertion d’animations Flash (au format swf)

Si vous avez au préalable créé des animations au format Shockwave flash, (avec Macromédia Flash ou avec Swich) il suffit des les insérer dans la page avec le menu [Insertion – Médias – Flash]

Vous pouvez très bien intégrer une animation flash à côté d’un texte ou d’une image (utilisez des tableaux)

Procédez aux réglages (boucle, démarrage auto ou grâce à un comportement)

Astuce :

Une animation flash n’accepte pas d’être transparente sauf si vous ajoutez à la main dans le code :

<param name="WMODE" value="Transparent">

6.4 Mise en ligne des pages terminées

Cette procédure dispense de l’utilisation d’un logiciel FTP dédié (genre Cute-FTP, FTP Expert...)

6.4.1 Paramétrer l’accès FTP d’après les qui vous ont été fournies par votre fournisseur d’accès [Site- Définir le site – Modifier – Infos du serveur Web]

L’exemple ci-dessus est valable pour un hébergement chez Wanadoo, mais il faut au préalable créer son espace perso chez le fournisseur...

6.4.2 Cliquez sur connecter et travaillez par glisser déplacer entre les deux fenêtres (la locale et la distante)

6.5 Extensions de Dreamweaver

On trouve sur internet un gestionnaire d’extensions pour Dreamweaver 3
(Dreamweaver 4 est livré avec… [Commandes-Gérer les extensions]), et on trouve aussi une foule d’extensions gratuites sur le web, la procédure est simple :

6.5.1 Installer de gestionnaire

6.5.2 Décomprimer les extensions

6.5.3 Les installer avec le gestionnaire

6.6 Documentation gratuite

Des « tutoriels » complets sur Flash, Dreamweaver et Paint shop Pro au format pdf sont disponibles sur internet à l’adresse ci dessous :

http://kevinpage.ifrance.com/kevinpage/tutoriel/tutoriel.htm

6.7 Annexes :

6.7.1 Balises « méta »

· Balise pour des mots clés du site (pour moteurs de recherche)

<meta name="keywords" content="Collège,college,magalas,Magalas,Hérault">

· Balise pour description du site (pour moteurs de recherche)

<meta name="description" content="Site Web du Collège de Magalas dans l'Hérault, près de Béziers">

· Balise pour passage automatique à la page suivante :

<meta http-equiv="refresh" content="8;url=travaux13.htm">

[cette balise fait passer à la page « travaux13.htm » au bout de 8 secondes]

6.7.2 Code HTML Barre navigation

Code pour remonter dans l’historique (sur le mot « Retour »)

<a HREF="#" onclick="history.back()">Retour</a>

Remarque

Une extension de Dreamweaver vous dispense de taper ce code (« Previous page link »)

6.7.3 Sites web recommandés

Dans www.Google.fr tapez par exemple : Extensions pour dreamweaver..

Extensions, liens, aide	http://www.webyo.net/dream/content1.html
Site de référence (dream, flash…)	http://www.flashxpress.net/
Tutoriels, exemples	http://www.cyberformateur.com/support/dream/index.htm
Une foule de liens sur dream, flash..	http://www.net-assistance.fr/ressource.htm
Extensions à télécharger	http://www.dreamweaver-extensions.com/