Aide pour DREAMEAVER 2

Le site

Pour une bonne lisibilité du site, il est bon de l'organiser.
Pour un petit site static 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.

• ouvrir une page du site à partir de la carte du site
• toute manipulation (création, déplacement, suppression, renommage) sur les fichiers se fait dans la carte du site
• vérifier les liens régulièrement : Fichier>Vérifier liens>Site entier.

Le texte

1. Voir Aide (F1) index>texte
2. Formatage du texte dans l'inspecteur des propriétés
   • un formatage est appliqué à un paragraphe (entre deux validationsde 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

1. Voir Aide (F1) index>tableau
2. Insertion>Tableaux , définir le nombre de lignes et de colonnes souhaités.
• largeur : par rapport à la page écran (elle se redimensionne automatiquement)
• bordure (mettre 0 si non)
• remplissage des cellules : en pixels ou en pourcentage
• espacement : distance entre deux cellules
3. Sélectionner le tableau entier (le curseur est une double croix, en généralc'est plus facile dans les angles)
4. 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
5. 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) sontabsolues, alors que celles en % sont relatives)
6. On peut imbriquer un tableau dans une cellule d'un tableau existant
   • se positionner dans la cellule et insérer un tableau

Les calques

1. Voir Aide (F1) index>calques
2. Insertion>calques, un cadre de calque est inséré dans le document,le dimensionner, le positionner au bon endroit et insérer du contenu.
3. Paramétrer le calque dans la fenêtre de propriétés,

   Voici un calque avec du texte et une (image).

   Sans grand intérêt ...

   à part inclure une fenêtre déroulante dans une page ...

   mais plus interessant, cette fenêtre peut s'ouvrir à partir d'une action particulière (voir le RollOver )

   • 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.
4. Enregistrer le document.
5. Visualiser cette page dans un navigateur.

Les chemins

1. Voir Aide (F1) index>chemins
2. Chemin absolu : http://www.mon_site_web/ index.html
   • c'est le chemin complet jusqu'à la racine du serveur y compris sonprotocole (http://)
   • attention lors du déplacement du fichier, le lien est brisé
   • à 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).
3. 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.
4. 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és dansle même répertoire que le document courant.

Lien vers une page html

1. Voir Aide (F1) index>liens
2. Sélectionner le texte/image qui servira à déclencher l'appelvers une nouvelle page
3. Dans l'inspecteur des propriétés :
4. Dans le champs lien, sélectionner la page cible
5. 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
6. Enregistrer le document

Lien vers une adresse mail

1. Ne sera actif que si un logiciel client de messagerie est configuré
2. Voir Aide (F1) index>liens e-mail
3. Sélectionner le texte/image qui servira de déclencheur au clientde messagerie
4. Dans l'inspecteur des propriétés :
   • dans le champs lien taper : mailto:<adresse mail du destinataire>
   • enregistrer le document
5. Exemple : auteur

Les ancres

1. Voir Aide (F1) index>ancres nommées
2. Insérer une ancre nommée à l'endroit cible
3. 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>
4. Enregistrer le document
5. Exemple : haut de page ou bas de page

Les images

1. Voir Aide (F1) index>images
2. 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, pasd'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
3. Dans l'inspecteur des propriétés : Insérer image
   
   • Positionnement de cette image
     • mêmes attributs que le texte : gauche, centré, droite
     • pour une plus grande maîtrise du positionnement, il faut utiliserdes 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éssauf pour de petits ajustements

Inversion d'images

1. Voir Aide (F1) index>images>intervertir
2. Prévoir deux images (par exemple : de couleurs différentes), maisde taille identique
3. Sélectionner l'image de base (celle qui sera par défaut)
4. Ouvrir la fenêtre de comportement
5. Ajouter le comportement intervertir l'image et sélectionner la nouvelleimage
6. Dans la fenêtre de comportement, définir l'action qui intervertiral'image
7. Valider et enregistrer la page
8. Exemple :

Pré-chargement des images

1. Voir Aide (F1) index>images>précharger
2. Sélectionner l'image
3. Ouvrir la fenêtre de comportement
4. Ajouter le comportement précharger les images et sélectionnerl'image
5. Valider et enregistrer la page

Carte d'une image

1. Voir Aide (F1) index>images>cartes graphiques
2. Sélectionner une image
3. Dans l'inspecteur des propriétés, ouvrir la carte de l'image
4. Créer un point chaud à l'aide de la boite à outil
5. Sélectionner le lien, la cible et un éventuel commentaire
6. Valider et enregistrer la page

Création d'un RollOver

1. Voir Aide (F1) index>calques>modifier la visibilité avec des comportements
2. Insérer un calque, le positionner et le dimensionner
3. Remplir le calque par du texte et/ou des images
4. Lier le calque à l'image ou au texte réactif
   • sélectionner l'image ou le texte réactif
   • mettre un # comme lien
5. Sélectionner l'image ou le texte réactif
6. Ouvrir la fenêtre de comportement
   • ajouter un comportement (touche +)
   • sélectionner Afficher-masquer les calques
   • sélectionner le calque et l'action à effectuer, puis valider
   • dans la fenêtre de comportement sélectionner le comportementde la souris pour cette action
7. Recommencer autant de fois que nécessaire
8. Afficher la fenêtre des calques
9. Sélectionner le calque et choisir l'aspect par défaut (visibleou non visible)
10. Enregistrer la page
11. Visualiser cette page dans un navigateur
12. Si nécessaire repositionner le calque après visualisation.
13. Exemple
    

Création d'une feuille de style

1. Voir Aide (F1) index>feuilles de style
2. Créer (pas avec DW) dans le répertoire pages un fichier vide avecextension css (ex: s_page.css)
3. Dans DW afficher la fenêtre des styles
4. Lier la feuille de style à la page en construction
5. Sélectionner cette feuille de style et modifier les différentes balises

Lier une feuille de style à une page

1. Voir Aide (F1) index>feuilles de style
2. Créer avec DW dans le répertoire pages un fichier vide avec extensionhtm (ex: ma_page.htm)
3. Dans DW afficher la fenêtre des styles
4. Lier la feuille de style à la page en construction
5. Sélectionner cette feuille de style et modifier les différentesbalises

Création d'une animation

1. Voir Aide (F1) index>inspecteur de scénarios
2. Insérer la première image
3. Sélectionner cette image
4. Ouvrir l'inspecteur de scénarios ( fenêtres>scénarios , ou F9 )
5. Clique droit dans l'inspecteur de scénarios et ajouter un objet
6. L'image étant toujours sélectionnée, recommencer pour ajouterun autre objet
7. Dans l'inspecteur des propriétés, modifier la source de la deuxième image
8. Cocher lecture automatique et boucle
9. Régler le séquencement de l'animation (faire des essais ...)
10. Pré visualiser l'animation en laissant enfoncé le bouton de lecture
11. Enregistrer la page
12. Visualiser cette page dans un navigateur

Création d'une animation de scénario

1. Voir Aide (F1) index>Ajout d'interactivité et d'animation>Création d'une animation de scénario
2. Créer un calque et placez-le à l'emplacement où il devraitse trouver au démarrage de l'animation.
3. Ouvrir l'inspecteur de scénarios ( fenêtres>scénarios , ou F9 )
4. Sélectionnez le calque ou l'image à animer.
5. 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.
6. Cliquez sur l'indicateur d'image-clé à la fin de la barre.
7. Déplacez le calque vers l'emplacement où il devrait se trouverà la fin de l'animation.
8. Pour que le calque se déplace en courbe, sélectionner sa barred'animation, et appuyer sur la touche Contrôle en cliquant pour ajouter une image-clé à la position du curseur.
   Tout en maintenant la touche Contrôle 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.
9. Maintenir le bouton Lecture enfoncé pour avoir un aperçu de l'animation sur la page.
10. Répéter la procédure pour ajouter des calques et des images supplémentaires au scénario et pour créer une animation pluscomplexe.
11. Enregistrer la page

Gestion du site

1. Voir Aide (F1) index>gestion de site
2. Paramétrage des caractéristiques du site ftp dans Edition>Préférences ...
3. Utilisez la fenêtre Site pour toutes les opérations de maintenance des fichiers (création de nouveaux documents HTML, déplacement defichiers, création de répertoires et suppression d'éléments)
4. Utilisez la fenêtre Site pour le transfert des fichiers entre le sitelocal 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.

Création de boutons avec une feuille de style

1. Remplir convenablement la feuille de style avec les styles des boutons
2. Lier la feuille de style au document en cours
3. Créer le texte du bouton
4. Sélectionner le texte du bouton
5. Lier la page cible au texte du bouton
6. Affecter le style « bouton » à ce texte
7. Enregistrer la page.