ATELIERS - Dreamweaver / Astuces en vrac
Sommaire

Afficher la grille

Si vous souhaitez que vos calques et vos tableaux soient placés très précisément dans Dreamweaver, utilisez la grille.

Pour cela :
Choisissez Affichage > Grille > Afficher

Si les options par défaut de cette grille ne vous conviennent pas, vous pouvez très bien les personnaliser :
Choisissez Affichage > Grille > Paramètres
Entrez la valeur du pas que vous désirez pour la grille dans le champ Espacement
Sélectionnez la couleur de la grille

Attention, une couleur trop vive peut prêter à confusion lors de la mise en page.

Choisissez si vous préférez afficher la grille en ligne ou en points.
Cliquez sur Appliquer, vos paramètres sont pris en compte.


Figure 1 : Les paramètres de la grille


Ajouter des espaces insécables
Lorsque vous souhaitez insérer plus d'un espace à la suite dans Dreamweaver, celui-ci ne réagit pas.
Et pour case, comme le HTML classique, Dreamweaver interprète une suite d'espace normaux comme un seul et ne prend même pas la peine de les faire apparaître dans le code de sa page.
Seule solution, utiliser les espaces insécables.

Ouvrez le palette Objets de Dreamweaver.
Passez cette palette sur la catégorie Invisible à l'aide du menu présent en haut à gauche.


Figure 1 : La palette Objets en mode Invisible

Cliquez autant de fois que nécessaire sur le bouton Insérer un espace insécable.
Dreamweaver insère alors autant d'espaces que vous le souhaitez sur la page.
Cela se traduit dans le code HTML par le caractère spécial  .


Insérer des fichiers externes
Vous utilisez le même texte sur différentes pages de votre site ?
Et si ce texte devenait obsolète, que feriez-vous ?
Modifier toutes les pages ?
Allons, il existe beaucoup plus simple, faîtes appel aux Server-Side Includes, SSI pour les intimes.

Créez le texte que vous souhaitez sur plusieurs pages et sauvegardez le sous forme de fichier texte à l'aide du bloc-note.
Si vous souhaitez que ce texte ait une mise en page particulière, rien ne vous empêche d'utiliser des balises HTML et autres fioritures.

Dans Dreamweaver, placez le point d'insertion à l'endroit de la page où vous souhaitez insérer votre texte.
Sélectionnez le bouton Insérer SSI dans la palette d'objets


Figure 1 : l'icône Insérer SSI

Sélectionnez votre fichier texte pour l'insérer dans votre page.
Voilà, votre texte est inséré dans la page.
A chaque fois que vous souhaiterez y apporter une modification, ils vous suffira de changer le fichier d'origine.
La mise à jour sera répercutée dans l'ensemble des pages du site.


Insérez un tableau Excel
Vous connaissez les méthodes pour créer des tableaux dans Dreamweaver, mais vous maîtrisez définitivement mieux Excel.
Ne vous inquiétez pas, tout est prévu :

Créez votre tableau de données dans Excel et enregistrez-le au format .csv.
Dans Dreamweaver, sélectionnez l'objet Insérer des données tabulaires.
Une boîte de dialogue s'ouvre vous demandant les caractéristiques de votre tableau.


Figure 1 : L'insertion de données tabulées dans Dreamweaver.

Entrez le nom de votre fichier .csv dans le champ Fichier de données
Choisissez le point-virgule comme délimiteur.
Réglez les autres options de formatage suivant la mise en page que vous souhaitez dans votre tableau.

Une fois la boîte de dialogue validée, un tableau est créé dans votre page.
Il contient toutes les données que vous avez définie dans Excel.


La date de dernière mise à jour
Pour montrer que votre site est régulièrement mis à jour, vous pouvez insérer sur vos page la date de cette dernière mise à jour à l'aide de Dreamweaver.

Cliquez sur le bouton Insérer date de la palette Objets.
La boîte de dialogue Insérer date s'ouvre alors.


Figure 1 : Précisez le format de la date

Choisissez les différentes options d'affichage de cette date.
Vous pouvez afficher le jour, la date dans un format américain ou européen ainsi que l'heure.
Cochez la case Mette à jour automatiquement lors de l'enregistrement.
Dreamweaver se chargera alors lui même de mettre à jour cette date quand vous sauvegarderez votre page.


Mise en page facile
Dreamweaver possède un outil simple pour vous faciliter la mise ne page.
Créez votre page à partir de calques, il la rendra automatiquement compatible avec les navigateurs les plus anciens en convertissant ces calques en tableaux.

Démonstration :
Créez un nouveau document dans Dreamweaver.
Choisissez Fenêtre > Calque pour afficher la palette des calques et cochez la case Empêcher le chevauchement de cette palette.
Tracez l'ensemble de vos calques sur la page à l'aide de l'outil Calque.

Vous pouvez remplir ces calque à votre guise, comme si vous montiez la maquette réelle de votre site.

Choisissez Fichier > Convertir > Compatible navigateurs 3.0.
Une boîte de dialogue s'ouvre vous demandant les conversion à effectuer.
Cochez la case Calques en tableau et validez ce choix.

Dreamweaver vous présente alors la résultat final dans une nouvelle fenêtre.
Vous n'avez plus qu'à corriger les décalages éventuels (aucune mise en page n'est parfaite) et sauvegarder le document. Simple non ?


Nettoyer une page HTML Word
Beaucoup de concepteurs de cites réalisent encore leurs pages avec Word.
Malheureusement, celui-ci intégre dans ses pages un certains de balises propriétaires, inutiles à la page.
Heureusement, Dreamweaver possède une commande spéciale pour nettoyer ce type de page :

Ouvrez la page HTML incriminée.
Choisissez Commande > Nettoyer HTML Word.
La boîte de dialogue Nettoyage du HTML Word s'affiche.
Dreamweaver se règle automatiquement sur la version de Word qui a servi à réaliser le code.


Figure 1 : Les options à choisir pour nettoyer votre page

Choisissez les différentes options de nettoyage.

Pensez surtout à cocher les cases Supprimer les marqueurs spécifiques à Word et Nettoyer CSS.
Ce sont les deux options qui permettent réellement optimiser votre page Web.
A la fin de la manipulation, Dreamweaver affiche un rapport vous précisant les opérations qu'il a effectuées sur la page.
Il n'est pas rare de réduire le fichier de moitié grâce à cette manipulation.


Synchroniser votre site
Vous venez d'effectuer des modifications importantes sur votre site ?
Assurez-vous de n'oublier aucun fichier lors de la mise à jour de celui-ci.
Dreamweaver possède une fonction simple pour cela : la synchronisation.

Choisissez Fenêtre > Fichiers du site pour afficher la fenêtre de gestion de votre site.
Si aucun profil n'est défini pour votre site, c'est le moment de le faire.
Choisissez Site > Synchroniser.
Une boîte de dialogue s'ouvre alors vous demandant le type de synchronisation que vous souhaitez effectuer.
Sélectionnez Placer les fichiers les plus récents sur l'hôte distant comme type de synchronisation et validez.

Après un temps de travail, Dreamweaver affiche une boîte de dialogue reprenant l'ensemble des fichiers à mettre à jour.
Si vous souhaitez que certains fichiers soient oubliés, décochez la case qui leur correspond.
Cliquez sur le bouton OK pour mettre à jour l'ensemble de votre site.


Vérifier tous les liens d'un site
Dreamweaver possède des possibilités de gestion de site assez impressionnantes.
Il permet par exemple de vérifier l'ensemble des liens d'un site en quelques instants !

Choisissez Fenêtre > Fichiers du site pour ouvrir la fenêtre de gestion de sites de Dreamweaver.
Si vous n'avez pas encore défini de profil pour votre site, c'est le moment de le faire en choisissant :
Site > Nouveau site et en renseignant l'ensemble de la boîte de dialogue.

Choisissez Site > Vérifier tous les liens du site et patientez quelques instants suivant la taille du site que vous vérifiez.

La liste des liens brisés apparaît alors dans une nouvelle boîte de dialogue.
Il vous est également possible de consultez la liste des liens extérieurs au site ou la liste des fichiers orphelins
(vers lesquels ne pointe aucun lien).
Pour accéder à un lien ou à une page en particulier, double-cliquez simplement sur son nom dans la liste.


Figure 1 : la liste des liens brisés d'un site.


Objets à insérer dans la palette objet
Dreamweaver permet l'insertion de nouveaux objets mais où les trouver ?

1) Il existe plus d'une trentaine d'objets supplémentaires sur le CD ROM de Dreamweaver (dossier Goodies).
Parmi eux : les objets Quicktimes et Real.

2) Vous pouvez aussi en téléchargez à partir du net aux adresses suivantes :
http://www.macromedia.com/software/dreamweaver/download/extensions/
http://www.idest.com/dreamweaver/objects-fr.htm
http://people.netscape.com/andreww/dreamweaver/actions.html


Enlever le soulignement des liens
Dreamweaver permet à l'aide de de feuille de style de retirer facilement le soulignement des liens hypertextes.
Cette option n'apparaîtra que sur les navigateurs version 4 ou +.

Pour se faire nous allons redéfinir le style de la balise <A> dans la page HTML (feuille de style interne):
Choisissez Fenêtre>Styles
Dans la palette Styles, cliquez sur Feuille de style
Dans la boîte de dialogue Editer Feuille de Style, cliquez sur Nouvelle
Choisissez Rédéfinir la balise HTML, puis selectionnez <a> dans le menu déroulant (ou entrez "a" dans le menu déroulant"), enfin cliquez sur OK

Dans la boîte de dialogue suivante, chochez la case Décoration : aucune.
Cliquez sur Ok
Visualisez le résultat dans Dreamweaver.



Conception - Réalisation - 2002
©NonoWebSite tous droits réservés