Acheter

Style CSS à la conception

de : Optimisation de Dreamweaver et Fireworks CS4

Style CSS à la conception Optimisation de Dreamweaver et Fireworks CS4
Tableau Excel Optimisation de Dreamweaver et Fireworks CS4
Feuille CSS de réinitialisation Optimisation de Dreamweaver et Fireworks CS4

À propos de cette vidéo

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.

Un extrait de : Optimisation de Dreamweaver et Fireworks CS4

Le but de cette formation vidéo est avant tout d’aborder divers points que l’on ne trouve pas systématiquement dans l’aide en ligne ou dans les formations d’introduction à Dreamweaver ou à Fireworks. Le formateur Birnou Sébarte vous donnera les outils qui vous permettront d’exécuter vos tâches plus facilement et rapidement. En un mot, cette formation vidéo est un condensé de trucs et astuces inédits, rarement abordés.

EUR 29,95

Acheter

Formations similaires

Nous allons aborder au cours de ces vidéos quelques pratiques d'utilisation au niveau de l'interface de Dreamweaver.

Interface
- La palette des CSS a évolué en même temps que l'interface de Dreamweaver. L'idée de cette vidéo n'est pas de reprendre une à une les fonctionnalités de cette palette, mais de se concentrer sur certains des points qui ne sont pas souvent mis en avant.
  
  Exploiter la palette Style CSS
  
  06:07
- 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.
  
  Style CSS à la conception
  
  03:16
- 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.
  
  Mode d'affichage
  
  05:07
Nous verrons au cours de ces étapes comment tirer parti de diverses fonctionnalités d'automatisation présentes dans Dreamweaver comme dans Fireworks.

Automatisation
- 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.
  
  Commande enregistrée
  
  04:53
- 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.
  
  Générateur d'images Fireworks utilisant XML
  
  11:49
- 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.
  
  Rechercher, Script, Traitement par lot
  
  09:50
Il est possible, soit de manière native, soit par l'ajout d'extensions gratuites, d'étendre ou d'améliorer les fonctionnalités déjà riches de Dreamweaver ou de Fireworks.

Fonctionnalités diverses
- 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.
  
  Editeur de Balises
  
  03:41
- 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 !
  
  Ajout de langage (SMIL par exemple)
  
  03:04
- 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.
  
  Ajout d'extension
  
  03:33
- 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.
  
  Lorem Ipsum
  
  02:59
- 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.
  
  PHP Upload
  
  03:49
- 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.
  
  Draw swatches (nuancier Fireworks)
  
  03:37
- 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é.
  
  Gérer les thèmes Ordres
  
  04:46
- 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.
  
  Chrono (Fireworks)
  
  02:32
- 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.
  
  Lorem Ipsum (Fireworks)
  
  03:20
Dreamweaver et Fireworks sont un réel tandem des premiers jours. Dès leurs premières versions, ils dialoguaient déjà bien entre eux et cela s'améliore avec le temps.

Inter-Logiciel
- 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.
  
  Gestion des Editeurs externes
  
  05:22
- 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.
  
  Round Trip HTML Fireworks 1
  
  13:49
- 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.
  
  Round Trip HTML Fireworks 2
  
  13:36
- 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.
  
  Créer de fausses images rééditables
  
  02:04
- 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.
  
  Elément de librairie depuis Fireworks
  
  03:40
- 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.
  
  Tableau Excel
  
  02:11
Retravailler de vieux sites est parfois plus rapide que de repartir d'une page blanche. Grâce à la fonction Rechercher / Remplacer de Dreamweaver et l'aide d'expressions régulières, tout est possible.

Productivité
- 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.
  
  Rechercher / Remplacer
  
  03:50
- 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 !
  
  Expressions régulières
  
  03:17
- 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.
  
  Exporter des fichiers
  
  05:28
Comportement d'usine ou fait maison : le tout est de les préparer avec goût et dosage.

Comportements
- 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.
  
  Créer ses propres comportements
  
  07:42
- 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.
  
  Utiliser Spry
  
  08:33
Si Dreamweaver ne permet pas certaines fonctionnalités et qu'il n'est pas possible de créer facilement ces comportements serveurs, il reste toujours la possibilité de créer ses propres fragments de code et de les réutiliser à souhait.

Fragments de code
- 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.
  
  Envoi d'un e-mail
  
  15:52
- 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.
  
  Poster une image
  
  22:38
- 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.
  
  Stocker ses fragments de code
  
  02:23
Avant de commencer, il est toujours bon de remettre les compteurs à zéro avec une feuille CSS de réinitialisation, et une fois terminé, de s'assurer d'une bonne portabilité sur l'ensemble des navigateurs cible.

Vérification
- 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.
  
  Contrôle de compatibilité navigateur
  
  06:00
- 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.
  
  Feuille CSS de réinitialisation
  
  04:42

Style CSS à la conception

de : Optimisation de Dreamweaver et Fireworks CS4

À propos de cette vidéo

Un extrait de : Optimisation de Dreamweaver et Fireworks CS4

Infos sur la vidéo en cours de lecture