Voici une liste d’extensions pratiques et indispensables pour Dreamweaver MX et MX 2004. Elles vous permettent soit d’optimiser votre temps de travail (XHTML, Relativity ou Layer-to-style) soit de trouver des astuces comme Lorem Ipsum pour combler vos blancs quand vous commencez à contruire votre site ou Popup Link pour faire une popup fullscreen ou contrer certaines configurations de navigateur…

Lorem Ipsum

Editeur : technocurve, gratuite, chargement

A quoi ça sert ? Tout simplement à générer un texte qui contient tous les caractères possibles pour meubler vos pages en attendant votre texte final.
Où la trouver dans DMX ? Une fois installée, vous la trouverez dans Insertion > technocurve ou dans la palette Insertion, onglet Commun représentée par cette icône : .

Le menu déroulant indique le nombre de paragraphes que vous pouvez générer, choisissez et validez par OK.

Histoire : Lorem ipsum est un texte en latin, cohérent mais sans réelle signification, tiré du livre De Finibus Bonorum et Malorum (Liber Primus, 32) de Marcus Tullius Cicero (alias Cicéron) datant de 45 av. J.-C. Il a été utilisé dans l’imprimerie au XVIème siècle puis peu à peu abandonné pour revenir avec Internet.

Netscape and Opera resize fix

Editeur : dazdezines, gratuite, chargement

A quoi ça sert ? A corriger un bug de Netscape et Opera concernant les calques positionnés de manière absolue et donc à rafraichir votre page lorsque vous la redimensionnez.
Où la trouver dans DMX ? Une fois installée, vous la trouverez dans Commandes > dazdezines.

Validez en cliquant sur Apply. L’extension génère le code javascript nécessaire. Un exemple ici : redimensionnez votre navigateur pour voir {mospagebreak}

XHTML v1.5.1

Editeur : Jason DALGARNO, gratuite, chargement ici

A quoi ça sert ? Cette extension sert essentiellement à vérifier le code XHTML et à corriger les erreurs pour une bonne validation.

• ajouter les fermetures de balise
• fermer les balises vides
• ajouter (ou remplacer) le DTD, les attributs du xmlns et la déclaration du XML
• placement ou changement des quotes des attributs, de simple à double
• copier des attributs name vers des attributs id
• ajouter l’attribut type et supprimer les attributs de langage des <script>
• convertir les entités invalides (par exemple : rectifie les caractères spéciaux mal codés)
• traducteur pour empêcher DMX de perturber les déclarations <?xml?>
• placer l’attribut alt= »" lorsque les images ne sont pas commentées
• remplir les cellules vides des tableaux
• faire fonctionner la commande « sitewide » (site complet)
• changer les liens nuls de # en JavaScript;.

Où la trouver dans DMX ? Vous la trouverez dans les commandes : Commandes > XHTML Configuration et Commandes > XHTML

Doctype : vous avez 4 choix (1.0 transitional, 1.0 strict, 1.1, basic ou « leave as is » c’est à dire 1.0 transitional qui est appliqué par défaut).

Other doctype : Laisser ce champ blanc excepté si vous souhaitez utiliser un autre doctype que ceux qui sont proposés plus haut. Si vous indiquez un autre doctype, il sera automatiquement sélectionné.

XML encoding : Indiquer l’encodage que vous souhaitez (iso-8859-1 ou utf-8, par exemple), le code ajouté sera du format <?xml version= »1.0″ encoding= »… »?>. AVERTISSEMENT : Mettre la version XML fait basculer IE 6 dans le modèle de boîte Microsoft, en dépit de la DTD XHTML…

Backup folder : Indiquer le dossier de sauvegarde des fichiers modifiers -> file:/// chemin_vers_votre_dossier_de_backup. Exemple -> file:///C|/WINNT/Temp/

Fil empty table cells : Indiquer le code à mettre dans les cellules de tableaux vides. Par défaut « &nbsp; » mais vous pouvez aussi indiquer le code source vers une image…

Close unclosed tags : Indiquer les balises à fermer obligatoirement, par défaut : td th tr p li body head html option dd dt.

Reverse entities : DMX utilise un jeu de caractères qui peut poser des soucis suivant le langage employé par vos pages. Vous pouvez donc ici choisir un jeu de caractères :

• None: le jeu est inchangé.
• iso-8859-1: remplacement du jeu de caractères présent par un jeu en iso-8859-1 (encodage pour la plupart des langues européennes de l’Ouest).
• utf-8: remplacement du jeu de caractères par un jeu en utf-8 (encodage pour tout unicode, on peut donc dire pratiquemment toutes les langues).

Copy name to id : Si les balises a, applet, form, frame, iframe, img, map ont leur attribut « name » complété, l’extension copiera les données dans les attributs « id » correspondant (si l’id est déjà nommé, le texte sera remplacé). Si, pour vos styles, vous avez employé des « id » dans d’autres balises, ils ne seront pas supprimés.

Set script type : Enlever l’attribut  » language= »javascript * «  » des scripts javascript et ajouter l’attribut « type= »text/javascript »".

Quote attributes : Mettre des quotes aux attributs qui n’en ont pas.

Set null alt text : L’extension place l’attribut « alt » pour toutes les images qui n’en ont pas, pour faciliter l’accessibilité.

Fix entities : Convertir des jeux de caractères comme 128-159 dans leur équivalent unicode (&#153; devient &#8482;).

Run on save : Conserver la configuration XHTML que vous venez de définir et l’appliquer automatiquement à toutes les pages que vous allez enregistrer ensuite.

Check UTF-8 : si le charset choisi est en utf-8, le contenu de la page est vérifié afin de déceler les éventuelles erreurs ou oublis (utile pour Dreamweaver 4, pour MX, c’est bon).

Site root : Indiquer le chemin du site comme tel : file:/// url ou dossier. Par défaut, chemin du site à l’installation de l’extension.

Files regex : Vérifie les nom de fichiers. Par défaut, .+.html?$
Exemple -> .html$ montre un fichier avec une extension en .html.

Excluded sites : Comprendre la liste des dossiers du site pour lesquels vous ne souhaitez pas que l’extension soit appliquée quand vous avez coché l’option Run on save (voir plus haut) ou sélectionné la fonction sitewide (site complet).

Save settings : Sauvegarder la configuration et fermer la fenêtre.
Cancel : Abandonner.
Get latest version : Chercher la dernière version de l’extension (ne se fait plus, car le développement de l’extension a été abandonné).
Help : Aide.
Defaults : Remettre en service les paramètres par défaut de l’extension.
Sitewide : Commande pour activer l’activité de l’extension sur tous les fichiers du site défini.

Une fois configurée, pour l’appliquer à une page, il vous suffit de cliquer sur Commandes > XHTML et ça fonctionne.{mospagebreak}

Relativity V1.5.1

Editeur : Jason DALGARNO, gratuite, chargement ici

A quoi ça sert ? Cette extension est une commande qui modifie la relation des liens par rapport au document dans lequel il figure.
Les boutons Document relative, Root relative et Absolute s’appliquent au document en cours. Les autres boutons s’appliquent au site entier.
Les balises concernées sont :

Balises et attributs concernés

Balises	Attributs
a	href
applet	codebase
area	href
blockquote	cite
body	background
del	cite
frame	longdesc
frame	src
head	profile
iframe	longdesc
iframe	src
img	longdesc
img	src
img	usemap
ins	cite
link	href
object	classid
object	codebase
object	data
object	usemap
q	cite
script	src

Source : aide de relativity v1.5.1

Où la trouver dans DMX ? Vous la trouverez dans les commandes : Commandes > Change link relativity

Site URL : ne rien indiquer, l’extension gère

Files (regex) : vérifie l’extension du fichier, ne pas y toucher.

Document relative : le chemin du lien est relatif au document lui-même. Exemple :

Prenons le site de FXP chez Mimi. Faisons un lien dans le fichier relativity.html vers :

• le fichier dazdezines.html du même dossier :
  <a href= »dazdezines.html »>mon lien</a>
• une image du dossier images du dossier tuto_basique :
  <a href= »images/ecran001.png »>mon lien</a>
• le fichier index.html à la racine du site :
  <a href= »../index.html »>mon lien</a>
• le fichier index.html du dossier tutocalque :
  <a href= »../tutocalque/index.html »>mon lien</a>
• une image du dossier images du dossier tutocalque :
  <a href= »../tutocalque/images/ecran002.png »>mon lien</a>

Root relative : le chemin du lien est relatif à la racine du site.
Faisons un lien dans le fichier relativity.html vers :

• le fichier index.html du dossier tutocalque : <a href= »/tutocalque/index.html »>mon lien</a>
• le fichier dazdezines.html du même dossier : <a href= »/tuto_basique/dazdezines.html »>mon lien</a>

Absolute (http://…) : le chemin est une url complète (sans le / à la fin !!!), il commence donc à la racine du serveur. Pour notre exemple, cela donnerait :

• le fichier index.html du dossier tutocalque :
  <a href= »/flashxpress/tutocalque/index.html »>mon lien</a>
• le fichier dazdezines.html du même dossier :
  <a href= »/flashxpress/tuto_basique/dazdezines.html »>mon lien</a>
• le fichier dazdezines.html du même dossier en distant :
  <a href= »http://www.flashxpress.net/tuto_basique/dazdezines.html »>mon lien</a>

Sitewide – document relative : Commande qui applique un chemin relatif au document à tous les liens du site.

Sitewide – root relative : Commande qui applique un chemin relatif à la racine du site à tous les liens du site.

Get latest version : Charger la dernière version.

Cancel : Abandonner.

Help : Aide.

{mospagebreak }

Layer-to-style

Editeur : yaromat, gratuite, chargement

A quoi ça sert ? A déplacer le code CSS, qui se trouve dans les propriétés de vos calques lorsque vous les insérez, dans le <head> de votre page via la balise <style>.
Où la trouver dans DMX ? Une fois installée, vous la trouverez dans Commandes >Layer2style.

Do it for all Layers : Le fait de cocher cette option indique que l’extension va s’appliquer à tous les calques figurant dans la page.
Affected Layers : tous les calques de votre page apparaissent. Si vous n’avez pas coché la première option, vous pouvez sélectionner ici le calque qui sera concerné.
Moving direction :

• Layer to style : les propriétés CSS des calques seront exportées dans l’entête de votre page, dans les balises <style>.
• Style to layer : les propriétés CSS figurant entre les balises <style> vont être dispatchées dans la page dans les balises auxquelles elles s’appliquent.

Un p’tit exemple : j’insère deux calques dans une page, je leur attribue quelques propriétés dans le panneau Propriétés et cela donne ceci dans le code :

<html>
<head>
<title>Layer to style</title>
<script language= »JavaScript » type= »text/JavaScript »>
<!–
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName== »Netscape »)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//–>
</script>
</head>
<body>
<div id= »calque1″ style= »position:absolute; width:200px; height:115px; z-index:1; background-color:#0099FF;
layer-background-color:#0099FF; border:1px none #000000; overflow:scroll »>lololololo
</div>
<div id= »calque2″ style= »position:absolute; width:200px; height:115px; z-index:2; left:399px; top:127px;
background-color:#FF3300; layer-background-color:#FF3300; border:1px none #000000″>lalalalala</div>
</body>
</html>

J’applique l’extension Layer to style en sélectionnant Layer-to-style, j’obtiens ceci :

<html>
<head>
<title>Layer to style</title>
<script language= »JavaScript » type= »text/JavaScript »>
<!–
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName== »Netscape »)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//–>
</script>
<style>
<!–
#calque1{position:absolute; width:200px; height:115px; z-index:1; background-color:#0099FF;
layer-background-color:#0099FF; border:1px none #000000; overflow:scroll;}
#calque2{position:absolute; width:200px; height:115px; z-index:2; left:399px; top:127px;
background-color:#FF3300; layer-background-color:#FF3300; border:1px none #000000;}
–>
</style>
</head>
<body>
<div id= »calque1″>lololololo</div>
<div id= »calque2″>lalalalala</div>
</body>
</html>

Et voilà, à vous maintenant voici un exemple de son utilisation.

{mospagebreak }

Popup link

Editeur : flevooware, gratuite, chargement

A quoi ça sert ? À créer une popup entièrement configurable. A partir d’un lien, elle ajoute du code javascript qui permet soit l’ouverture d’une popup soit l’ouverture dans une autre page si l’utilisateur a demandé le blocage des popup.
Où la trouver dans DMX ? Une fois installée, vous la trouverez dans le panneau lnspecteur de balises> Comportements.

Général :

• indiquer l’id de la popup (sans espace, ni caractères spéciaux…)
• Move window to top when re-actived : focus

URL to display : paramétrer l’url de la popup :

• Current link : lien de la page courante.
• URL : taper l’url de la page à afficher dans la popup ou aller chercher la page du site avec le bouton « browse ».

Window size : déterminer la taille de la popup (longueur et largeur) et l’unité (pixel ou pourcentage).

Window Position On Screen : définir le placement de la popup sur l’écran. Par défaut, elle est centrée. Pour les 4 extrêmités (top, right, bottom, left) , vous pouvez définir la distance en pixels par rapport au bord de la page. Faites bien vos calculs

Window attributes : paramétrer les attributs de la popup.

• Navigation Toolbar : afficher la barre de navigation (précédent, suivant, etc.) .
• Location Toolbar : afficher la barre d’adresse.
• Status Bar : afficher la barre de statut de la page.
• Menu Bar : afficher les menus (fichier, éditio, etc.).
• Scrollbars as Needed : afficher des scrollbars en cas de besoin.
• Resize Handles : donner la possibilité de rédimensionner la popup.