Dreamweaver : logique de fonctionnement, structure, initiation.

Introduction :

Contenu :

1. Features
2. Logique de fonctionnement
3. Structure :
1. Fenêtre de site
2. Fenêtres WYSIWIG et code
3. Inspecteur de propriétés
4. Palettes diverses
4. Initiation
5. Evaluation
6. Ressources

Features

• Il travaille sur un miroir local du site.
• Il peut gérer les liens et identifier les liens erronés sur le site et les fichiers orphelins.
• Une palette permet d'introduire des éléments comme des images ou des tableaux.
• Un inspecteur de propriétés permet de régler les paramètres pertinents à la sélection.
• La visualisation dans un browser est aisée.
• Il crée des imagemaps
• Etablissement de liens relatifs à l'origine du site.
• Création WYSIWIG de formulaires
• Il peut voir et travailler au niveau Wisywg ou code.
  
• Insertion de JAVASCRIPT
• Insertion de tags inconnus.
• Il ne convertit pas les images, ni n'en modifie la transparence.
• Il gère une bibliothèque d'éléments réutilisables

Fonctions de plus haut niveau

• DW gère des librairies de code et met à jour rétroactivement les pages qui les incluent.
• DW gère des modèles (Templates) et met à jour rétroactivement.
• DW permet de créer des liens graphiquement.
• DW travaille avec des calques et permet leur conversion en tableaux (compatibilité descendante).
• DW s'harmonise bien avec des éditeurs externes.
• DW crée automatiquement des effets JavaScript (rollover, etc).
• DW peut gérer un système de jeton (pour éviter de perdre des modif. intermédiaires quand on travaille à plusieurs endroits / plusieurs personnes)
• DW utilise un cache en local pour accélérer la gestion des liens.
• DW gère le DHTML, Flash, QuickTime, etc
• DW génère une carte du site graphique, permet l'édition des liens directement dans la carte.
• La collaboration avec des éditeurs externes.(BBedit notamment)
• Il peut nettoyer le code de WORD dont on sait à quel point il est mauvais (Ici plus de 800 erreurs sur une page un peu longue)
• etc.

Logique de fonctionnement :

• DW travaille sur un miroir local du site. On n'ouvre qu'un seul site à la fois, mais on peut avoir plusieurs fenêtres de document. L'étendue (le scope) de la gestion est déterminée par les paramètres. P. ex. en fonction des paramètres de ce site, les liens sont créés en relatif, la vérification des liens y est limitée, etc.
• La palette de l'inspecteur de propriétés permet de déterminer la plupart des paramètres de la sélection (style, alignement, taille, liens p. ex.).
• Les palettes permettent d'insérer des éléments de bibliothèque par glisser-déposer.
• Les modèles sont des pages maquettes composées de parties éditables et de parties non-éditables qu'on peut employer pour donner une unité à un site.
• Les modifications rétro-actives, qui sont effectuées lorsqu'on change le modèle le sont sur la sur la base du cache et de commentaires dans la page. On peut donc intégre une page à la ligne graphique du site en insérant les commentaires adéquats. (#BeginTemplate "/Templates/layout 2.dwt" en commentaires). Donc, possibilité d'intégrer des pages générées par un système de script.
• Les Librairies permettent de stocker des éléments fréquemments utilisés (fractions de page HTML avec images, tableaux, textes etc) les modifications de l'original entraînent une modif de toutes les occurences de cet élément.( via les infos du cache)
• Les modif du code sont vérifiées lors du basculement dans la fenêtre WYSIWIG, les parties non reconnues sont mises en évidence mais pas supprimées.
• Archivage-extraction : lorsqu'une équipe travaille sur le même site ou lorsque un y travaille depuis divers lieux, on peut gérer un système de jeton (pour éviter de perdre des modif. intermédiaires). Celui qui a l'original en cours de modification peut ensuite l'archiver : le remettre sur le serveur, libre pour modif. Le suivant qui l'extrait a désormais le droit de le modifier, jusqu'à ce qu'il le ré-archive sur le serveur. Les autres peuvent néanmoins obtenir en lecture seulement un fichier qui est extrait ailleurs.
• Les éléments de code invisibles (ancres, scripts, res. des images, etc) sont manifestées dans la page par des icônes dont la sélection permet d'accéder aux paramètres.

Structure :

Fenêtre de site : sert à la gestion des fichiers et de la mise à jour :

On y trouve les fichiers sur le serveur et en local. On peut y gérer la synchronisation, le déplacement des fichiers etc.

On accède à une page en double-cliquant dessus, on la glisse d'un panneau vers l'autre pour la transférer, et on accède par les menus aux fontions de syncchronisation, de vérification du site.

Fenêtres Wysiwig / Code

On a en parallèle la fenêtre WYSIWIG et la fenêtre de code. On peut agir dans les 2 à volonté. (Les 2 sont actives en temps réel : Intéressant du point de vue pédagogique)

En haut de la fenêtre WYSIWIG sont figurés les éléments du HEAD par une icône parfois discutable.

En bas on a un mini-lanceur qui permet d'accéder à d'autre palettes ou fenêtres du logiciel (code, styles, etc)
On y voit aussi la taille de la fenêtre et la taille / temps de downlaod

L'inspecteur de propriétés :

On y définit les attributs du texte, on y crée des liens,etc.
On peut créer directement des liens en tirant un fil depuis l'icône pointer vers un fichier jusque sur l'ou l'autre des symbole du point d'arrivée (le nom du fichier dans la fenêtre de site ou sur une ancre)

Palettes des éléments de bibiothèque, de modèles ou de styles

On y crée et et on y puise (par glisser-déposer) des éléments de bibliothèque pour construire ses pages.

Ces palettes peuvent être fusionnées et empilées en une seule qui montre alors des onglets. Les palettes de style, de bibliothèque, de

Initiation :

Ici sera crée en direct un exemple.Ces lignes sont un guide pour soutenir mon exposé...

Créer un exemple :

• Ouvrir un site,
• Nouveau a partir d'un modèle,
  
• Propriétés de la page.
• Intégrer contenu d'une autre page.
• Ajouter image. Evt. imagemap
• Ajouter Rollover.
• Ajouter élément de la librairie
• Editer les styles : Intégrer par le code, modifier par le WYSIWIG
• Gestion de fichiers : sélectionner les plus récents sur le serveur, downloader, etc.
• Vérifier les liens d'un sélection, du site.
• etc.

Evaluation : ( v 2.01)

Ressources :

• La doumentation en format pdf
• Les Technotes chez Macromedia
• Dreamwaever Basics
• Cours assez complet (En)
• Version Démo