Le site

Pour une bonne lisibilité du site, il est bon de l'organiser.

Pour un petit site statique on trouvera un fichier index.html comme page d'accueil et deux dossiers : pages et images. On peut créer dans ces dossiers autant de sous dossiers qu'il est nécessaire pour s'y retrouver. Cette structure peut se répéter de manière fractale.

DreamWeaver propose de gérer lui-même le site : Fichier>ouvrir site>définir les sites>nouveau.

Pour prendre de bonnes habitudes :

Ouvrir une page du site à partir de la carte du site.

Toute manipulation (création, déplacement, suppression, renommer) sur les fichiers se fait dans la carte du site.

Vérifier les liens régulièrement : Fichier>Vérifier liens>Site entier.

Vérifier le rendu dans un (ou plusieurs différents) navigateur(s) à chaque changement.

Remarque :

Il existe des normes sur internet, le W3C en a la charge. Les navigateurs ne les respectent pas toujours. Le navigateur se rapprochant le plus des normes hormis Amaya sont Mozilla, firefox, Netscape, Internet-Exploreur est loin des standards, bien que son créateur soit membre du W3C.

DreamWeaver génère des pages html qui sont proches du standard W3C.

Le texte

En général on retrouve les fonctionnalités basiques d'un traitement de texte, dont le formatage.

Voir Aide (F1) index>texte.

Formatage du texte dans l'inspecteur des propriétés

un formatage est appliqué à un paragraphe (entre deux validations de la touche entrée)
alignement gauche, droite, centré, il n'y a pas de justifié

retrait du texte avec les tabulations (plusieurs espaces ne sont pas acceptés).

Les tableaux

Utilisés (en plus) pour gérer la mise en page des documents

Voir Aide (F1) index>tableau.

Insertion>Tableaux, définir le nombre de lignes et de colonnes souhaités.

largeur : par rapport à la page écran (elle se re-dimensionne automatiquement)

bordure (mettre 0 si non)

remplissage des cellules : en pixels ou en pourcentage

espacement : distance entre deux cellules.

Sélectionner le tableau entier (le curseur est une double croix, en général c'est plus facile dans les angles).

Dans l'inspecteur des propriétés on retrouve les paramètres déjà fixés plus d'autres

positionnement du tableau dans la page : Aligner, Espace V et Espace H

couleur des bordures

arrière plan du tableau.

Se positionner dans une cellule, l'inspecteur des propriétés s'adapte au contexte

paramétrer comme pour le tableau (les dimensions en pixels (px) sont absolues, alors que celles en % sont relatives).

On peut imbriquer un tableau dans une cellule d'un tableau existant

se positionner dans la cellule et insérer un tableau.

Les calques

Les calques sont utilisés pour positionner les éléments avec précision (?) dans la fenêtre du navigateur. Ils peuvent contenir du texte, des images et même d'autres calques.
Attention les navigateurs ne les gèrent pas de la même manière, il faudra tester les effets sur des navigateurs de marques et de générations différentes.

Voir Aide (F1) index>calques.

Insertion>calques, un cadre de calque est inséré dans le document, le dimensionner, le positionner au bon endroit et insérer du contenu.

Paramétrer le calque dans la fenêtre de propriétés,

accepter ou refuser le chevauchement

donner un nom significatif aux calques

ordonner le positionnement des calques (cote Z)

rendre visible ou non le calque

Un œil ouvert signifie que le calque est visible.

Un œil fermé signifie que le calque est invisible.

S'il n'y a pas d'icône en forme d'œil, le calque hérite de la visibilité de son parent. Pour les calques non imbriqués, le parent est le corps du document, lequel est toujours visible.

Enregistrer le document.

Visualiser cette page dans un navigateur.

Les chemins

Notions indispensables pour gérer correctement l'ensemble du site.
Il en existe trois types pour référencer une page.

Voir Aide (F1) index>chemins.

Chemin absolu : http://www.mon_site_web/index.html

C'est le chemin complet jusqu'à la racine du serveur y compris son protocole (http://).

Attention lors du déplacement du fichier, le lien est brisé.

A utiliser lorsque le fichier à lier est en dehors du site (lien vers un fichier d'un autre site ou lien vers une boite aux lettres).

Chemin relatif à la racine du site : /pages/fichier1.html.

La page fichier1.html se trouve dans le répertoire pages situé à la racine du site.

C'est en général la meilleure manière de lier les fichiers, ils peuvent êtres déplacés les liens seront actualisés.

Chemin relatif au document : ../pages/fichier1.html

La page de fichier1.html se trouve dans le répertoire pages situé au -dessus du répertoire courant.

Utilisé pour lier les pages qui seront toujours placées dans le même répertoire que le document courant.

Il faut enregistrer le document dès sa création pour pouvoir créer des liens relatifs.

Lien vers une page html

Voir Aide (F1) index>liens.

Sélectionner le texte/image qui servira à déclencher l'appel vers une nouvelle page.

Dans l'inspecteur des propriétés :

Dans le champs lien, sélectionner la page cible.

Renseigner l'option cible : deux cas avec ou sans cadre

sans cadre :

_blank, charge la page dans une nouvelle fenêtre du navigateur

_self, charge la page dans la même fenêtre du navigateur (option par défaut)

avec cadre : voir Aide (F1) index>ciblage des liens.

Enregistrer le document.

Lien vers une adresse mail

Voir Aide (F1) index>liens e-mail.

Sélectionner le texte/image qui servira de déclencheur du client de messagerie.

Dans l'inspecteur des propriétés :

Dans le champs lien taper : mailto:<adresse mail du destinataire>.

Enregistrer le document.

Les ancres

Une ancre sert à établir un lien entre deux éléments d'un document (en général sur la même page)

Voir Aide (F1) index>ancres nommées.

Insérer une ancre nommée à l'endroit cible.

Se positionner à l'endroit source et dans l'inspecteur des propriétés lier à l'ancre :

dans lien écrire #<nom de la page/nom de l'ancre>.

Enregistrer le document.

Les images

Une image est un élément indispensable à la lecture agréable d'une page web.
Les images doivent êtres travaillées (dans un logiciel spécialisé) avant l'insertion.

Voir Aide (F1) index>images.

Les formats d'images supportés sont gif, jpeg et png

gif : format propriétaire (à éviter)

jpeg : bon rapport qualité/poids de l'image, format destructif, pas d'animation, pas de transparence

png : un peu plus lourd que jpeg, supporte l'animation et la transparence, n'est accepté que par les navigateurs récents.

Insérer image.

Dans l'inspecteur des propriétés :

Positionnement de cette image

mêmes attributs que le texte : gauche, centré, droite

pour une plus grande maîtrise du positionnement, il faut utiliser des tableaux et insérer les images dans les cellules.

Insérer les images de la taille voulue,

ne pas redimensionner l'image par l'inspecteur des propriétés sauf pour de petits ajustements.

Inversion d'images

Lorsque la souris passe sur une image, celle-ci se modifie.

Voir Aide (F1) index>images>intervertir.

Prévoir deux images (par exemple : de couleurs différentes) de taille identique.

Sélectionner l'image de base (celle qui sera par défaut).

Ouvrir la fenêtre de comportement.

Ajouter le comportement intervertir l'image et sélectionner la nouvelle image.

Valider et enregistrer la page.

Pré-chargement des images

Lorsque l'image est lourde, il est intéressant de la pré -charger.

Voir Aide (F1) index>images>pré-charger.

Sélectionner l'image.

Ouvrir la fenêtre de comportement.

Ajouter le comportement pré-charger les images et sélectionner l'image.

Valider et enregistrer la page.

Carte d'une image

Création d'image(s) interactive(s).

Voir Aide (F1) index>images>cartes graphiques.

Sélectionner une image.

Dans l'inspecteur des propriétés, ouvrir la carte de l'image.

Créer un point chaud à l'aide de la boite à outil.

Sélectionner le lien, la cible et un éventuel commentaire.

Valider et enregistrer la page.

Création d'un RollOver

Lors d'une action (de la souris ou du clavier), un élément (texte, dessin, image, ...) de la page est modifié (apparition, disparition, changement de casse, de couleur, de forme, ...).

Voir Aide (F1) index>calques>modifier la visibilité avec des comportements.

Insérer un calque, le positionner et le dimensionner.

Remplir le calque par du texte et/ou des images.

Lier le calque à l'image ou le texte réactif (mettre un # comme lien).

Sélectionner l'image (ou le texte) réactif.

Ouvrir la fenêtre de comportement.

Sélectionner Afficher/Masquer les calques.

Sélectionner le calque et l'action à effectuer.

Dans la fenêtre de comportement sélectionner le comportement de la souris pour cette action.

Recommencer autant de fois que nécessaire.

Afficher la fenêtre des calques.

Sélectionner le calque et choisir l'aspect par défaut (visible ou non visible).

Enregistrer la page.

Visualiser cette page dans un navigateur.

Création d'une feuille de style

Fichier contenant la mise en forme de l'ensemble du site. C'est le seul fichier à modifier pour modifier l'apparence du site.

Voir Aide (F1) index>feuilles de style.

Créer (pas avec DW) dans le répertoire pages un fichier vide avec extension css (ex: s_page.css).

Dans DW afficher la fenêtre des styles.

Lier la feuille de style à la page en construction.

Sélectionner cette feuille de style et modifier les différentes balises.

Remarque :

Avec un peu d'habitude, il est plus rapide de générer la feuille de style à l'aide d'un logiciel spécialisé comme : Topstyle light.

Création de boutons avec une feuille de style

Il s'agit de créer facilement des boutons a deux états (survolé ou non), ayant le même aspect sur tout le site et dont le contenu est paramétrable.

Remplir convenablement la feuille de style avec les styles des boutons .

Lier la feuille de style au document en cours (si ce n'est déjà fait ...).

Créer le texte du bouton.

Sélectionner le texte du bouton.

les points 4 et 5 sont à faire dans l'ordre

Lier la page cible au texte du bouton (vérifier que le style est appliqué à <a> dans la fenêtre style).

Affecter le style « bouton » à ce texte (vérifier que le style est affecté à <a> (bouton) dans la fenêtre style).

Enregistrer la page.

Visualiser la page.

Création d'un modèle

Voir aide (F1), index>modèles.

Ouvrir une page vierge, puis Fenêtre>Modèles onglet Modèles et donner un nom à ce fichier modèle qui s'enregistrera directement dans le dossier « Template » qui sera créé à cette occasion.

Construire, en utilisant des tableaux, la page qui servira de modèle.
Il y aura dans ce document des zones qui resteront fixes (toujours les mêmes dans tous les documents) et d'autres qui seront modifiables (informations temporelles).

Par défaut, si la zone n'est pas déclarée modifiable, alors elle ne l'est pas.

Mettre le curseur dans une zone qui doit être modifiable, puis menu Modifier>Modèles>Nouvelle région modifiable... donner un nom à cette zone. Le nom apparaît dans cette zone entre accolades.

Recommencer autant de fois que nécessaire, une portion de texte peut aussi être modifiable.
En cas d'erreur, sélectionner la zone et la rendre non-modifiable.

enregistrer le modèle.

Tester ce modèle en ouvrant une page à partir du modèle. Menu Fichier>Nouveau à partir d'un modèle... et sélectionner le bon modèle.

Utilisation d'un modèle

Voir aide (F1), index>modèles.

Dans le gestionnaire de site de DW, menu Fichier/Nouvelle à partir d'un modèle..., sélectionner le modèle qui convient.

Le modèle se charge et seules les zones non jaunes sont modifiables, remplir ces zones.

Enregistrer le fichier au « bon endroit » avec le bon nom et la bonne extension ...

Visualiser dans le navigateur.

Création d'une animation

Une image se substitue à une autre en boucle.

Voir Aide (F1) index>inspecteur de scénarios.

Insérer la première image.

Sélectionner cette image.

Ouvrir l'inspecteur de scénarios (fenêtres>scénarios, ou F9).

Clique droit dans l'inspecteur de scénarios et ajouter un objet.

L'image étant toujours sélectionnée, recommencer pour ajouter un autre objet.

Dans l'inspecteur des propriétés, modifier la source de la deuxième image.

Cocher lecture automatique et boucle.

Régler le séquencement de l'animation (faire des essais ...).

Pré visualiser l'animation en laissant enfoncé le bouton de lecture.

Enregistrer la page.

Visualiser cette page dans un navigateur.

Création d'une animation de scénario

Les scénaris créent une animation en modifiant la position, la taille, la visibilité, et l'ordre de superposition des calques. Ils peuvent également modifier les fichiers source des images.
Les scénarios ne peuvent déplacer que des calques.
Pour déplacer des images ou du texte, créer un calque et insérez des images, du texte.

Voir Aide (F1) index>Ajout d'inter-activité et d'animation>Création d'une animation de scénario.

Créer un calque et placez-le à l'emplacement où il devrait se trouver au démarrage de l'animation.

Ouvrir l'inspecteur de scénarios (fenêtres>scénarios, ou F9).

Sélectionnez le calque ou l'image à animer.

Choisissez Modifier>Ajouter objet à un scénario, ou faites glisser l'objet sélectionné dans l'inspecteur de scénarios.
Une barre apparaît dans un canal du scénario. Le nom du calque ou de l'image y est affiché.
Si vous travaillez avec une image, la seule propriété modifiable est son fichier source dans l'inspecteur de propriétés. Les étapes suivantes ne s'appliquent pas.

Cliquez sur l'indicateur d'image-clé à la fin de la barre.

Déplacez le calque vers l'emplacement où il devrait se trouver à la fin de l'animation.
Pour que le calque se déplace en courbe, sélectionner sa barre d'animation, et appuyer sur la touche en cliquant pour ajouter une image-clé à la position du curseur.
Tout en maintenant la touche enfoncée, sélectionner le calque et modifier sa trajectoire comme voulue.
Répéter cette étape pour définir des images-clés supplémentaires et modifier les trajectoires.

Maintenir le bouton Lecture enfoncé pour avoir un aperçu de l'animation sur la page.

Répéter la procédure pour ajouter des calques et des images supplémentaires au scénario et pour créer une animation plus complexe.

Enregistrer la page.

Gestion du site

Si la mise à jour du site se fait à l'aide de Dreamweaver, alors la cohérence des liens est assurée directement par le logiciel.

Voir Aide (F1) index>gestion de site.

Paramétrage des caractéristiques du site ftp dans Edition>Préférences ....

Utilisez la fenêtre Site pour toutes les opérations de maintenance des fichiers (création de nouveaux documents HTML, déplacement de fichiers, création de répertoires et suppression d'éléments).

Utilisez la fenêtre Site pour le transfert des fichiers entre le site local et le site distant.
Par défaut, le site distant (ou carte du site) apparaît dans le volet de gauche et le site local dans le volet de droite.
Pour ouvrir la fenêtre Site, choisissez Fenêtre>Fichiers de site, puis sélectionnez l'une des options suivantes :

Connecter (uniquement disponible avec le paramètre FTP) Se connecte ou se déconnecte du site distant.

Acquérir Copie les fichiers sélectionnés du site distant vers le site local.

Placer Copie les fichiers sélectionnés du site local vers le site distant sans en changer le statut d'archivage/extraction.

http://www.w3.org/Consortium/Points/w3c7.fr.htm

Extrait de la feuille de style concernant les boutons, il faut respecter l'ordre ...

a.bouton:link {
width: auto;
height: auto;
background-color: #ffecd2;
color: #9c0000;
font: normal small "Comic Sans MS";
text-decoration: none;
text-align: center;
vertical-align: middle;
padding: 1px 1px 1px 1px;
border-color: #209bb8 #339966 #339966 #209bb8;
border-style: solid double double solid;
border-width: medium thick thick medium;
}

a.bouton:visited {
width: auto;
height: auto;
background-color: #ffecd2;
color: #9c0000;
font: normal small "Comic Sans MS";
text-decoration: none;
text-align: center;
vertical-align: middle;
padding: 1px 1px 1px 1px;
border-color: #209bb8 #339966 #339966 #209bb8;
border-style: solid double double solid;
border-width: medium thick thick medium;
}

a.bouton:hover{
width: auto;
height: auto;
color: #9c0000;
font: normal small "Comic Sans MS";
text-decoration: none;
text-align: center;
vertical-align: middle;
padding: 1px 1px 1px 1px;
background: #FFDDAE;
border-color: #339966 #209bb8 #209bb8 #339966;
border-style: double solid solid double;
border-width: thick medium medium thick;
}

.bouton {
padding: 3px;
}

Aide pour DREAMWEAVER 2

Stage collège décembre 2003	page 8 sur 9	abel.segouat@ac-poitiers.fr
mise à jour 17/03/04

2003-09-07T17:38:01