Exploiter la palette Style CSS

Lors de la création de contenu, des visuels trop riches, ou des visuels qui ne seront générés que lors de la publication par le serveur, peuvent faire défaut aux contributeurs. Pour cela, Dreamweaver propose des feuilles de style à la conception.

Dreamweaver propose divers modes d'affichage et de rendu. Nous allons donc explorer les modes code / création, mais aussi les divers modes de rendu : écran / print / handheld, etc. Enfin, nous verrons les derniers modes apparus avec la CS4 : l'affichage en direct et le code en direct.

Parfois, nous recevons le contenu du site sous forme de document Word ou autre, qu'il faut nettoyer. S'il est vrai que Dreamweaver possède une commande Nettoyer Word HTML assez efficace, il reste néanmoins toujours toute une série de filtres et de nettoyages à appliquer. C'est là que les commandes enregistrées peuvent entrer en action.

Il s'agit là d'une vieille extension de Fireworks mais dont on ne se lasse jamais : la génération de documents image depuis un modèle Fireworks et un fichier XML. C'est tellement simple d'utilisation et si redoutable d'efficacité qu'on ne pouvait pas la représenter à nouveau.

Il existe plusieurs manières d'automatiser ou de reproduire certaines tâches dans Fireworks. Au cours de cette vidéo, nous allons les présenter et essayer de faire ressortir leurs mises en application dans les flux de production quotidiens.

L'éditeur de code de Dreamweaver propose une aide à l'écriture et permet d'accéder à divers éléments comme la Palettes de couleurs, les Styles en cours, la boîte Parcourir du système, etc. Ces aides sont complètement paramétrables et il est très facile d'intervenir.

Par défaut Dreamweaver contient les bibliothèques de plusieurs langages comme HTML, CSS, JavaScript, PHP, etc. Et de ce fait, l'outil Aide à l'écriture de l'éditeur de code nous est de grande utilité. Vous pouvez être amené à travailler sur un langage qui n'est pas natif et intégré à Dreamweaver : alors installons-le !

Les outils de la suite Adobe sont tous installés avec un Adobe Extensions Manager, qui comme son nom l'indique permet de gérer les extensions ajoutées à chaque produit. Nous allons parcourir son fonctionnement et son utilisation.

Cette incontournable extension permet de générer du faux texte pour Dreamweaver. Il faut avoir recours aux services de deux extensions, Lorem and More et Lorem Ipsum Generator.

Demandée depuis longtemps, cette extension permet de pouvoir uploader un fichier vers le serveur. Vous créez un site et vous demandez à votre visiteur de faire parvenir un document, CV, Dossier, Courrier, etc. Cette extension est faite pour vous.

Lors de travaux sur des interfaces graphiques, il est souvent nécessaire de réaliser des documents chartés présentant des pastilles colorées et de voir la valeur hexadécimale correspondante afin de pouvoir travailler en équipe sur ces valeurs. Draw swatches est une extension qui permet de faire ce travail pour nous.

Si vous devez gérer des sites Ordres et que la fabrication de thèmes personnalisés vous cause du souci, il existe une extension (en version d'évaluation de 15 jours) qui peut éventuellement vous être d'utilité.

Lors de travaux de préparation, nous avons souvent plusieurs versions d'un même document. Nous pouvons toujours les nommer en fonction. Mais qu'en-est il lorsque nous imprimons des épreuves ? L'extension Chrono est là pour nous aider à placer rapidement un Timestamp sur nos documents.

Incontournable extension pour Fireworks qui permet, comme son nom l'indique, de générer du faux texte. La documentation fournie est relativement complète, et l'intégration au sein de la CS4 est sans pareil.

Dreamweaver est un éditeur de code et de site assez complet. Toutefois, il est possible de pouvoir relayer certaines tâches à des éditeurs externes. Voyons un exemple pour ajouter un éditeur de CSS externe, sans quitter le flux de production de Dreamweaver.

Générer une barre de menu en CSS et depuis Fireworks, sans pour ainsi dire quitter le flux de production de Dreamweaver, est une tâche complètement intégrée au flux de travail entre ces deux logiciels. Nous allons le mettre en application.

Nous sommes souvent amenés à gérer des graphiques d'images réactifs au survol de la souris. Bien sûr, les CSS peuvent nous permettre de gérer cela, d'où une judicieuse utilisation d'image map dans Dreamweaver. Mais en fonction du temps qui vous est imparti ou du degré de précision dont vous avez besoin, il existe une alternative toute simple à partir de Fireworks.

Lorsque l'on prépare une maquette d'interface, nous pouvons utiliser du faux texte, et également de fausses images, qu'il sera très facile ensuite d'éditer et de compléter, voire même modifier avec Fireworks.

Fireworks permet de générer directement des éléments de bibliothèque Dreamweaver. Nous explorons ce fonctionnement depuis l'exportation d'un logo de pied de page contenant du HTML.

On a parfois besoin de transmettre un tableau Excel à des partenaires, le souci reste leur mise en forme ou leur présentation de rendu. Pas de souci, un simple copier-coller entre Excel et Dreamweaver suffit.

L'outil Rechercher / Remplacer de Dreamweaver est très complet et permet de pouvoir intervenir sur tout type de contexte, qu'il s'agisse de documents ouverts, ou du site entier, ou encore uniquement de documents sélectionnés. De plus, il est possible d'agir sur le contenu ou sur la source HTML, et ce de manière très précise.

Si la palette de Rechercher / Remplacer ne propose pas les options de recherche dont vous avez besoin, n'hésitez pas à utiliser les expressions régulières. C'est un peu abrupt au début, mais rapidement on se demande comment nous avons pu travailler sans elles auparavant !

Une option d'exportation parfois oubliée de Fireworks est la possibilité d'exporter certains aspects du document (pages, aspect, calques, etc.) comme des fichiers autonomes et distincts.

Si les comportements serveurs de Dreamweaver venaient à manquer de possibilités, ou que le code généré ne vous convenait pas, libre à vous de les réécrire ou d'en composer de nouveaux.

Depuis quelques versions de Dreamweaver, Adobe propose sa librairie JavaScript, Adobe Spry. Nous allons rapidement la mettre en application et voir avec quelle simplicité il est facile de la personnaliser.

Un petit bout de code qui va vous permettre d'explorer par vous-même l'envoi d'e-mails depuis le serveur. Qu'il s'agisse d'un envoi de contact ou d'une newsletter, le principe en reste le même.

Sans entrer dans la mise en place d'un backoffice complet qui prendrait en charge la mise en ligne, la gestion, la modification et la suppression d'images dans une base de données, nous allons explorer les mécaniques à mettre en place pour poster et lire des images sur une base de données, en utilisant PHP.

Lorsque vous commencez à récupérer des bouts de code réutilisables, utilisez la palette des fragments de code présente dans Dreamweaver. Cette palette va vous permettre par simple clic ou glisser-déposer de pouvoir exploiter au mieux l'ensemble des codes qui d'un coup seront organisés.

Avant de placer son site en ligne, un dernier doute sur une compatibilité navigateur. La fonction est là et surtout CSS Advisor.com qui lui est associé. Au travers de cette courte vidéo, nous explorerons leur fonctionnement.

En se basant sur les travaux de Eric Meyer, Tantek Celik et Andy Clarke, on s'aperçoit qu'il est toujours bon de réinitialiser les affichages par défaut de chaque navigateur. Au cours de cette vidéo, nous allons voir pourquoi il est bon d'avoir recours à une telle feuille de style.