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.
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.