Astuces - Dreamweaver MX 2004
Redirection automatique vers une URL
Lorsqu’un Internaute arrive sur votre page d’accueil par exemple, vous pouvez le rediriger directement ou après quelques secondes vers une autre URL de votre choix. Cela peut être utile dans le cas où vous changez votre site d’adresse. Pour cela :
1 Uilisez la commande « Refresh » de la palette HTML.
2 Une fenêtre s’ouvre et vous pouvez définir le délai (en secondes) après lequel la redirection prendra effet. Insérez ensuite l’URL de redirection et cliquez sur OK.
NOTE : Cette fonction permet également d’actualiser la page en cours d’utilisation.
Attacher les feuilles de styles CSS pour des mises en page uniformes
Pour utiliser idéalement les styles CSS dans Dreamweaver, vous avez la possibilité de créer un lien vers un fichier qui inclut tous les styles que vous aurez défini à l’intérieur.
1 Il faut dans un premier temps ouvrir une nouvelle page, Fichier > Nouveau > Page de base (Catégorie) > CSS (Page de base)
2 créez les styles que vous voulez via la palette Styles CSS de DW :
fenêtre —> styles CSS (voir section Feuilles de styles dans le tutorial Dreamweaver pour l’utilisation) ou en les inscrivant manuellement.
3 Ensuite, vous n’avez plus qu’à enregistrer votre fichier avec l’extension .css
4 Ouvrez une page de votre site et sélectionnez Texte > styles CSS > Gérer les styles...
5 Une fenêtre s’ouvre. Cliquez sur « Joindre… » et allez chercher le fichier .css créé précédemment via le bouton « Parcourir ».
6 Cliquez sur « OK » puis sur « Terminé » et le tour est joué !
Vos styles apparaissent dans la fenêtre Styles CSS de DW et vous n’avez plus qu’à les utiliser comme bon vous semble.
Un style unique sur vos liens
Il est possible de donner une fonction à tous les liens hypertexte de votre document HTML afin qu’ils changent de couleur ou qu’ils apparaissent avec ou sans soulignement. Il vous suffit d’insérer ce code exemple entre les balises <HEAD> </HEAD> et de modifier la couleur ou le style.
• Exemple de code où le lien change de couleur et se souligne au passage de la souris (à copier dans <HEAD> </HEAD>) :
<style type="text/css">
< !—
a:link
text-decoration : none ;
color : #0066CC ;
a:visited
text-decoration : none ;
color : #0066CC ;
a:hover
text-decoration : underline ;
color : #999999 ;
a:active
text-decoration : none ;
color : #FF0000 ;
—>
</style>
Intégrer des comportements sur du texte
Pour utiliser des comportements sur du texte, il faut le rendre actif. C’est-à-dire qu’il devra être reconnu par Dreamweaver comme un lien hypertexte. Pour cela, il faut sélectionner votre texte (uniquement celui que vous voulez rendre actif) puis insérer « javascript : ; » dans le champ lien des propriétés. Le texte pourra dès lors recevoir des comportements comme « ouvrir une fenêtre du navigateur » ou « Appel Javascript ».
Créer un lien pour mettre un site dans les favoris
Placez ce code entre les balises <HEAD> </HEAD> :
<SCRIPT language="JavaScript">
var bookmarkurl="http://www.webyo.net"
var bookmarktitle="Webyo.[net] – Aide les Webmasters"
function addbookmark()
window.external.AddFavorite(bookmarkurl,bookmarktitle)
</script>
Ensuite, Placez ce code entre les balises <BODY> </BODY> :
<a href= "javascript : ;" onclick="addbookmark()">Ajouter ce site à mes favoris favoris</a>
Créer un icône « favoris » qui présente votre site (IE5 et >)
Télécharger un logiciel tel que « IconForge » capable de sauvegarder des images avec l’extension .ico. Ensuite, vous devez créer une image de 256 couleurs et 16x16 pixels. Donnez lui le nom « favicon.ico » et transférez cette image à la racine de votre site.
Pour finir, insérez le code suivant entre les balises <HEAD> </HEAD> :
<LINK REL="SHORTCUT ICON" href="favicon.ico">
Plus d’infos sur le site Favicon.com
Pour obtenir de l’aide, vous pouvez vous connecter à l’adresse suivante :
- http://www.macromedia.com/support/dreamweaver
Inspecteur de code
Ouvrir l’inspecteur de code en pressant la touche F10.
Apercu dans le navigateur
En mode « création », visionner votre page dans le navigateur défini par défaut en pressant la touche F12.
Atteindre une ligne de code
En mode « Code », appuyez sur Ctrl+G et entrez le numéro de la ligne de code que vous voulez atteindre.
Saut de ligne
Insérez un saut de ligne <br> en appuyant sur shift+Enter.
Espace insécable
Appuyez sur Ctrl+Shift+Espace pour insérer autant d’espace insécable ( ) que vous le souhaitez entre deux mots par exemple.
Taille de la police du code
Pour augmenter la taille de la police du code de l’inspecteur de code, Edition > Préférences > Polices > Mode Code > Taille (9 pt par défaut).
Convertir un fichier HTML en XHTML
Pour convertir un fichier .html en .xhtml, Fichier > Convertir > XHTML
Taille et temps de chargement d’un document
Vous pouvez connaître le poids et le temps de chargement de vos fichiers via la barre d’état de Dreamweaver :
Le temps de chargement varie en fonction de la vitesse de connexion prédéfinie dans Edition > Préférences > Barre d’état
Paramétrez la vitesse de connexion selon vos besoins.
Des puces originales dans vos mises en page
Insérez différents types de puces dans vos textes :
| Type de Puces |
Code HTML |
Exemple |
| Rond (par défaut) |
<ul><li>Liste 1</li></ul> |
 Liste 1 |
| Carré |
<ul type="square"><li>Liste 1</li></ul> |
 Liste 1 |
| Cercle |
<ul type="circle"><li>Liste 1</li></ul> |
 Liste 1 |
| Nombre |
<ol><li>Liste 1</li></ol> |
1. Liste 1 |
| Lower Roman |
<ol type="i"><li>Liste 1</li></ol> |
i. Liste 1 |
| Upper Roman |
<ol type="I"><li>Liste 1</li></ol> |
I. Liste 1 |
| Lower Alpha |
<ol type="a"><li>Liste 1</li></ol> |
a. Liste 1 |
| Upper Alpha |
<ol type="A"><li>Liste 1</li></ol> |
A. Liste 1 |
| Type de Puces |
Code CSS |
Exemple |
| Rond (par défaut) |
.puce list-style-type : disc ; |
Liste 1 |
| Carré |
.puce list-style-type : square ; |
Liste 1 |
| Cercle |
.puce list-style-type : circle ; |
Liste 1 |
| Nombre |
.puce list-style-type : decimal ; |
1. Liste 1 |
| Lower Roman |
.puce list-style-type : lower-roman ; |
i. Liste 1 |
| Upper Roman |
.puce list-style-type : upper-roman ; |
I. Liste 1 |
| Lower Alpha |
.puce list-style-type : lower-alpha ; |
a. Liste 1 |
| Upper Alpha |
.puce list-style-type : upper-alpha ; |
A. Liste 1 |
| Image Bullet |
.puce list-style-image : url(images/arrow.gif) ; |
Liste 1 |
Assistance visuelle de la largeur d’un tableau
En sélectionnant un tableau, Dreamweaver MX 2004 propose une aide visuelle qui informe entre autres sur la largeur du tableau. Pour supprimer cette aide, cliquez sur le menu Affichage > Assistances visuelles > Masquer tout (ou décochez les options dont vous n’avez plus besoin).
Centrer le contenu d’une page de manière horizontale et verticale
Ouvrez un nouveau document, Fichier > Nouveau > HTML
Ensuite, allez dans les propriétés de la page et indiquez 0 dans les marges. Créez un tableau de 1 ligne et 1 colonne et après l’avoir sélectionné affectez lui les valeurs suivantes dans l’inspecteur de propriétés : Largeur > 100%, Hauteur > 100%, Aligner > centrer.
Cliquez à l’intérieur du tableau et sélectionnez l’option Horz sur centrer.
Pour finir, insérez le contenu de votre page dans ce tableau et tout sera centré à la fois verticalement et horizontalement.
Voir les photos des développeurs de Dreamweaver MX 2004
Insérez une image quelconque dans un document HTML. Sélectionnez cette image, appuyez sur la touche Ctrl puis dans l’inspecteur de propriétés, cliquez en même temps sur la vignette en haut à gauche qui représente votre image.
Corriger les erreurs de vos pages
Pour vérifier que vos pages ne contiennent pas de grosses erreurs, effectuez un rapport de votre site. Sélectionnez Site > Rapports… et cochez les options que vous souhaitez inclure dans votre rapport.
Passer du mode Standard au mode Mise en forme
Appuyez simplement sur les touches Ctrl+F6.
