Editer un site Web avec Dreamweaver

Fiches technique pour formation à
l'Institut français d'Istanbul
l'Institut français de Valence

Réalisation
:
Guillaume Garçon

ÉTAPE 2 - Enregistrer le modèle crée pour le reproduire pour le site entier


La première étape a permis de réaliser une première maquette en insérant un arrière plan, des tableaux, du texte, des images.

Exemple de la maquette " Quizz Animo " :

1er arrière plan de couleur orange (obtenue avec la pipette sur le fond de l'image logo)
2eme arrière plan (cahier petit carreaux) pour le texte des élèves
3eme arrière plan (couleur rouge) pour les deux index

Tableau de 3 lignes et 5 colonnes :
- 2 colonnes pour les bordures de l'écran
- 2 colonnes index
- 1 colonne centrale pour le titre, pour le texte (fractionnée en 2 pour ne pas saisir du texte sur les spirales du cahier, et pour les coordonnées e-mail (fractionnée en 2 pour l'insertion de l'icône et du texte mail)

Saisie du texte (titre, index, coordonnées mail) et mise en forme (texte blanc sur fond rouge…)

Insertion d'images (logo, icône mail)

Maquette Quizz Animo

Aperçu dans Dreamweaver



Cette page va être enregistrée comme modèle (ou Templates) afin de pouvoir la réutiliser pour toutes les autres pages du site.
Toute modification ultérieure de ce modèle sera automatiquement reportée sur toutes les pages du site.

1. Fichier > Enregistrer comme modèle
2. Donner un nom à la page modèle
3. Sélectionner les régions modifiables de la page modèle : pour l'exemple ci dessus, il s'agit de la cellule au centre, les autres cellules resteront ainsi vérouillées
4. Modifier > Modèles> Nouvelle région modifiable
5. Donner un titre a la région modifiable
6. Enregistrer le modèle



Créer un dossier par rubrique du site,
et un sous-dossier pour chaque page
(qui contiendra toutes les images de la page)

Ne pas oublier de donner des nouveaux titres aux pages Modifier > propriété de la page

Exemple de l'arborescence de Quizz Animo :


Dossiers dans le site racine

 


Créer des dossiers pour chaque rubrique dans le dossier racine (c:/site animo)

Dans l'explorateur Windows :
Clic droit > Nouveau > Dossier

Le site quizz animo est un abécédaire, les pages de chaque animaux sont regroupées par lettre.

Dans chaque dossier, créer des sous-dossiers pour chaque page animal
Remarque : Tous les noms de dossiers n'excèdent pas 8 caractères


Sous-dossiers du dossier "c"


7. Reproduire le modèle pour chaque page du site Fichier > Nouveau à partir d'un modèle.
Sélectionner la page modèle. Seules les régions modifiables sont accessibles

8. Enregistrer sous … Sélectionner le dossier et le sous dossier d'enregistrement.

Donner un titre à la page
Modifier > propriété de la page


Exemple de la carte du site Quizz Animo :




La carte du site est un outil pratique pour :


- se rendre compte de la structure d'un site
- retrouver rapidement une page du site
- visualiser le poids (en Kilo-octets) de chaque objet
- transférer le site sur un hébergeur
- modifier les liens du site


Observer :

- la racine du site C:/siteanimo, on retrouve la page index et ses fichiers images
- l'arborescence du site : dossiers alphabétiques et sous-dossiers pageanimaux
- le dossier Tempates avec la page modele modanimo



 

 


Etape 1
Etape 3
 
 
   
Contacter l'animateur: Guillaume Garçon
g.garcon@caramail.com