Sous Dreamweaver, la personnalisation des raccourcis est parfois délicate mais vous pouvez la forcer… dans tous les cas ! Par exemple si comme moi vous utilisez la touche Tab pour masquer/afficher vos palettes à la sauce Adobe et bien procédez comme suit : Dans le menu édition choisissez raccourcis clavier. Dans la liste de commandes prenez commandes de menu et repérez la ligne affichez les panneaux. Supprimez le raccourcis existant et cliquez dans le champ appuyer sur la touche. Si vous pressez la touche Tab directement ça ne fonctionne pas, pressez alors simultanément Ctrl+Tab (par exemple) puis sélectionnez Ctrl+ puis sur cette sélection effectuez un clic droit pour choisir couper puis cliquez sur le bouton changer, et c’est tout !
Nouveau panneau de Dreamweaver MX, les fragments de code (fenêtre / fragments de code), permettent d’enregistrer des petits morceaux couramment utilisés sous MX et ré-exploitable par cliquer déposer ! Pour ce faire créez un objet puis ouvrez le panneau idoine, sélectionnez l’objet concerné directement en création ou en code HTML puis dans la palette cliquez sur l’icône “Nouveau fragment de code” et nommez le fragment. Plus tard, et si nécessaire glissez ce dernier dans la page et voilà.
Vous voulez sur votre page d’accueil centrer le contenu de celle ci verticalement, de sorte que quelque soit la définition, le contenu est toujours au centre. C’est simple, dans un premier temps retirez les marges de votre page menu modifier / propriétés de la page puis mettez 0 dans les champs de marge. Créez un tableau d’une cellule et d’une colonne. Sélectionnez le tableau puis dans la palette de propriétés demandez un alignement horizontal de ce dernier. Précisez aussi une largeur et une hauteur de 100% dans la même palette. C’est tout ! Il suffit maintenant de placer vos éléments dans ce tableau. NB : Par défaut le contenu d’une cellule est centré dans celle ci de manière verticale, néanmoins précisez à cette dernière “centrer” plutôt que “par défaut”.
Un site vous plait pour sa mise en forme ? Sous IE allez dans le menu affichage / source. Repérer la ligne <link rel=”stylesheet” href=”xxx.css” type=”text/css”> sélectionnez xxx.css et réalisez un ctrl+c. Dans la barre d’adresse cliquez après l’adresse du site ajoutez un slash (/) puis faites ctrl+v. Appuyez sur Entrée, le fichier est téléchargé sur votre machine et ouvert dans votre éditeurs HTML par défaut ou éditeur de texte. Attention le fait de copier la feuille de style d’un autre site, si il ne constitue pas une infraction en soit ne doit pas être pour autant légitime aussi montrez vous courtois envers son auteur et informez le!!!
Dreamweaver n’offre pas la possibilité d’une liaison de feuille de style sur une sélection. Dommage la concurrence le fait. Néanmoins cela peut être résolu. En effet repérez dans le code HTML, entre les balises <head> et </head> le code suivant <link rel=”stylesheet” href=”xxx.css” type=”text/css”> ou xxx est le chemin vers votre feuille de style faite ensuite un Ctrl+c (copier). Puis dans la fenêtre des fichiers du site sélectionnez les pages dont le lien de feuille de style doit être modifié (utilisez la touche Ctrl avant de cliquer sur les fichiers s’ils sont non consécutifs). Toujours dans la même fenêtre allez dans le menu édition puis sur rechercher et remplacer (ctrl+F). Dans la rubrique rechercher dans choisissez fichiers sélectionnés, dans la rubrique rechercher choisissez code source et dans la zone de saisie faites le ctrl+v ! Dans la rubrique remplacer par faites là aussi un ctrl+v mais changez le nom et chemin de la feuille de style (remarquez que ce menu peut rester ouvert et vous pouvez continuer à travailler aussi ouvrez le fichier avec le code modifié, allez dans le HTML et copiez puis collez dans la rubrique remplacer par le nouveau chemin de votre feuille de style). Ok ça peu paraître barbare mais c’est le seul moyen dans Dreamweaver (et en plus ça va très vite !).
Imaginez : vous avez des modèles qui doivent avoir le même aspect mais des feuilles de styles différentes (c’est un exemple !). Aussi dans ce cas il serait souhaitable de dupliquer votre modèle de base or, et c’est étonnant, Dreamweaver ne le permet pas dans sa palette d’actifs à croire qu’en copiant GoLive ils aient fait une boulette (si, si). Par les menus c’est le même résultat. C’était sans compter sur votre capacité à contourner cela. En effet, via le menu site demandez les fichiers du site (F8 par défaut). Repérez le dossier Templates (il faut un modèle au moins dans votre site), cliquez sur votre modèle à copier puis faite Ctrl+C et dans la foulée Ctrl+V. Ne vous reste plus qu’à modifier le nom (attention à l’extension !) puis à éditer ce dernier pour modifier (toujours pour l’exemple) le lien vers la feuille de style.
La faute à Dreamweaver vos roll-over de lien ne fonctionnent qu’une seule fois ! En effet la couleur du lien visité est définitive si bien que l’internaute qui survole une nouvelle fois ce lien (alors qu’il l’a déjà cliqué) ne verra pas celui ci changer de couleur. Dommage ! Aussi pour résoudre ce problème il faut, après que vous ayez déjà défini les 3 types de sélecteurs CSS : a:link (couleur de liens), a:visited (liens visité) et a:hover (liens survolé). Il faut que a:visited et a:link aient les mêmes attributs pour commencer ! Puis éditez la feuille de style dans un éditeur (c’est impératif !) Faites en sorte que l’ordre soit le suivant : 1) a:link, 2)a:visited, 3)a:hover. Ainsi que le lien soit visité ou non la couleur ne change pas, et de plus l’effet de roll-over fonctionne dans tous les cas (sous IE).
Pour changer la couleur de bordure d’une image il faut sélectionner celle ci comme du texte : c’est à dire cliquer glisser sur elle, elle devient grisée (c’est important). Puis via la palette de propriétés utilisez le sélecteur de couleurs de caractère ou bien passez par le menu texte / couleur.
Facile de mettre en forme vos titres grâce au raccourci Ctrl. Placez vous dans le titre à mettre en forme et maintenez la touche sur nommée suivie du chiffre correspondant de votre clavier alpha. Par exemple pour un titre H3 tapez Ctrl+3.
Pour créer des liens menant vers le haut de page inutile de créer une ancre puis de faire pointer un lien vers celle ci ! Le plus rapide et pratique est de créer une lien nul c’est à dire qui ne mène nul part. Pour cela identifiez l’élément devant servir de lien vers le haut de page et dans le champs lien de la palette de propriétés indiquez le signe # (Ctrl+Alt+3 du clavier alpha, ou la touche AltGr+3 du même clavier)
Pour différentes raisons il est important de connaître et d’avoir près de soit une “photo du site” sous forme de carte. Pour en obtenir une il vous suffit de cliquer dans la zone de carte du site et dans le menu fichier vous trouverez enregistrer la carte du site ! Le tout au format BMP (PC) ou PNG mais on s’en moque puisque on peut changer cela facilement...dans le logiciel adapté (Photoshop ?)
Vous trouverez dan le répertoire Macromedia\Dreamweaver X\Configuration\Dictionaries un fichier portant le nom de Personnal.dat. Ouvrez ce dernier dans le bloc note par exemple. Il est vide ? Alors c’est que vous n’avez pas appuyer sur le bouton Ajouter à personnel de la boite Orthographe du menu Texte. En effet ce fichier que vous ne devez pas renommer pour qu’il puisse être mis à jour à l’aide du bouton Ajouter à personnel, référence vos entrées pour ne plus avoir à buter sur un mot. Libre à vous de le compléter manuellement dans la bloc note, ou bien d’attendre d’ajouter les entrées au fur et à mesure de vos corrections. Vous pouvez le transmettre à vos collègues et garder une sauvegarde près de vous.
Formater un tableau devient un jeu d’enfant avec l’assurance d’un code niquel (si, si !). Sélectionner votre tableau (Ctrl+A) et rendez vous dans le menu Commande / formater le tableau ! Et si les couleurs sont trop sucrées à votre goût, personnalisez les.
Pas le temps ou pas d’idées pour formater les couleur de vos contenu de page ? Rendez vous dans le menu Commande / définir la palette de couleur et choisissez un modèle dans la liste. Compatibilité absolue, c’est dans la balise body que les styles s’insèrent !!
Créer des animations sur les calques dans la palette de scénarios, peut s’avérer terrible en création d’images clés. Aussi exploitez la commande Modifier / scénario / enregistrer le chemin du calque et cliquez glissez ce dernier à main levée. Il ne vous reste plus qu’à supprimer les images clés en trop à l’aide du raccourci Maj+suppr pour aller plus vite. Bien sur tout est réalisable par le clic droit !
Sous Dreamweaver pour enserrer une ligne ou une colonne, vous passez par le menu Modifier / tableau / insérer une ligne, insérer une colonne. L’insertion à lieu avant l’endroit ou vous êtes situés (d’ou son nom). En revanche si vous voulez ajouter une ligne appuyer sur la touche Tab à partir de la dernière colonne de la dernière ligne. Peu pratique préférez la commande Modifier / tableau / insérer des lignes ou des colonnes et choisissez l’option retenue.
Lorsqu’un élément doit être copié puis collé rapidement (un champ par exemple). Déplacez cet élément en maintenant la touche Ctrl, un petit “+” apparaît à coté de votre curseur ! Lâchez la souris en premier à l’endroit souhaité et lâchez Ctrl. Voilà, c’est dupliqué et votre presse papier n’a pas été sollicitée !
Vous voulez connaître la tête des développeurs de Dreamweaver. Insérez une image dans une page. Dans la palette de propriétés et en maintenant la touche Ctrl, double cliquez sur la prévisualisation de l’image autant de fois que vous voulez voir …de tête.
Une commande efficace permet en plus de la vérification HTML d’esquiver d’énormes bourdes. Celle ci est accessible via le menu site / rapport ou des cases à cocher clairement intitulées vous permettrons d’effectuer vos dernières retouches.
Pour passer d’un mode à l’autre faites Ctrl+F6 pour mode mise en forme et Ctrl+Maj+F6 pour passer en mode normal. Notez que ceux ci sont modifiables via le menu édition / raccourcis clavier.
Copier / coller comme texte n’existe plus dans la version 4.0 elle est devenue copier coller tout cours. C’est d’autant plus surprenant que si vous annulez la commande s’appelle annuler / coller comme texte. Mais rien de grave. Copier HTML copie bien le code en revanche coller HTML permet de coller aussi du texte standard mais sans la mise en forme. On aurais préféré insertion de fichier ça évite les aller retour inutile.
Dreamweaver 4.0 est vraiment exceptionnel. Lors de la création d’un style, dans la catégorie type de la boite de dialogue on trouve en bas de celle ci des cases à cocher. Si vous cochez Aucune (décoration) Souligné est activée et inversement. Cependant pour l’une comme pour l’autre vous pouvez cocher puis décocher (la même option) sans que l’autre ne s’active en conséquence. Retenez que dans ce cas c’est souligné qui prévaut. Chez Macromédia on n’est pas à l’aise avec les boutons radio.
Corriger le code HTML sous Dreamweaver est très simple. Cependant il est important de limiter le nombre d’opérations. Hors les corrections HTML ne peuvent s’enregistrer dans la palette des historiques. Utiliser la fonction de nettoyage HTML propre à Dreamweaver (Commandes/nettoyer HTML) et dans la partie balises spécifiques insérez les balises à supprimer (sans chevrons) et séparez celles-ci par des virgules.
Pour modifier la source d’une image vous double cliquez dessus, et bien en maintenant la touche Ctrl et en faisant la même manip vous ouvrirez l’éditeur d’image défini dans les préférences de DreamWeaver
Les copier collez de texte sont intéressants mais gênant aussi. En effet les Ctrl+C et Ctrl+V copient aussi le code HTML et en production avec d’autres logiciels c’est fatal. Appuyer sur la touche Maj+Ctrl+C ou V permet de ne copier ou de coller uniquement le texte.
