Support de cours Dreamweaver CS5. MC Benveniste

Transcription

1 Support de cours Dreamweaver CS5 MC Benveniste 2011

2 Présentation du logiciel Il s agit d un logiciel d intégration de pages web, avec une interface wysyiswg (what you see is what you get = ce que vous voyez est de ce que vous obtenez). A partir de cette interface, il est facile d intégrer des images, des tableaux, des boîtes, des morceaux de javascript Editeur xhtml il génère le code xhtml, avec un choix de doctype valide W3C Editeur de styles css, également il édite un code avec les possibilités de raccourcis. En plus de ces bases une liste non exhaustive d autres fonctions intéressantes: Les bibliothèques : les textes, images, tableaux ou tout élément HTML commun à toutes les pages qui peuvent être modifiées régulièrement sont des fichiers externes facilement modifiables et toutes les pages y faisant référence seront alors modifiées automatiquement. Gestion de site : affichage graphique de la structure du site, modification facile de l'arborescence du site. Module FTP : permet de mettre en ligne un site sur un serveur distant à partir de la carte du site. Gestion de liens : vérification des liens cassés ou perdus, Les comportements : des morceaux de code en javascript facilement intégrables dans les pages html Historique qui garde la trace de toutes les actions, qui peuvent être annulées ou répétées. Images maps créées à l intérieur de la fenêtre du document. Vérification des liens et de l'accessibilité et des comptabilités avec les différents navigateurs. Des composants Ajax.

3 Interface : Les fenêtres et palettes L environnement classique est celui qui est le plus proche des versions précédentes Décochez fractionner verticalement pour avoir un affichage du code en haut, sinon il est maintenant à gauche

4 menu Interface : Les fenêtres et palettes insertion code mode création palettes ancrables propriétés

5 Lorsqu une palette a disparu : aller dans le menu fenêtre Nous utiliserons principalement Insertion sert à insérer des objets dans la page Propriétés donne accès aux propriétés des objets sélectionnés Fichiers permet de créer l arborescence, de la modifier et donne la liste des fichiers du site Comportements permet de créer de l interactivité au moyen de javascript Historique donne accès à l historique des opérations, par défaut les 50 dernières. Cela correspond au crtl+z ou pomme +Z sur mac

6 La fenêtre d insertion Elle répartie en onglets Communs pour les objets les plus communément utilisés : tableaux balise div images objet flash Formulaires pour les objets de formulaires formulaire champs de texte boutons radio case a cocher Pour les fonctions spry Ajax

7 La fenêtre d insertion L onglet commun > images En déroulant la flèche on a accès à un menu complémentaire en rapport avec les images

8 La barre code/fractionner/création... permet de travailler ici en mode code. Des aides au code facilitent ce mode. 1-Taper le signe plus grand que un menu déroulant apparaît vous donnant accès à toutes les balises 2- Vous n avez plus qu à choisir votre balise 3- Validez avec la touche enter 4- Utilisez la barre d espace pour faire apparaître le menu déroulant des attributs, id par exemple 5-Sont insérés les guillemets, il ne reste qu à donner le nom de l id 6-Puis le simple fait de taper le signe plus grand que et le slash fermera la balise automatiquement

9 Travailler en mode code Il est possible de replier des parties de code Surligner une partie du code (d un début de div à la fin de celui-ci par exemple) puis cliquez sur la flèche du haut Vous avez replié les lignes 16 à 24. Re-cliquez sur la flèche pour déployer à nouveau le code

10 Travailler en mode fractionner Travailler en mode fractionner permet de visualiser à la fois le code et l aperçu Dès que vous insérez des éléments dans la partie création, ils apparaissent automatiquement dans le code. L inverse n est pas vrai. Si vous écrivez quelque chose dans le code il faudra actualiser avec le raccourci F5, ou la touche actualiser Par défaut le code est à gauche. Cela peut se modifier depuis le menu affichage en décochant fractionner verticalement

11 Travailler en mode fractionner Tous les fichiers liés sont visibles et accessibles dans le mode code accès direct au css accès direct au js

12 Travailler en mode fractionner : indicateur de code Travailler en mode fractionner permet de visualiser à la fois le code et l aperçu Lorsqu on laisse le curseur sur un élément, il apparaît l indicateur de code En cliquant sur celui-ci, la liste des css attachés à cet endroit, ainsi que de tous ceux dans lesquels il est imbriqué se déroule

13 Travailler en mode fractionner : indicateur de code En passant la main sur chaque élément, les css sont décrits et en cliquant dessus, cela vous emmène directement dans le code css à la ligne correspondante

14 Barre d outils Le code affiché en mode Code en direct est similaire à ce que vous verriez si vous consultiez la source de la page à partir d'un navigateur. Alors que de telles sources de pages sont statiques et ne fournissent que la source de la page à partir du navigateur, le mode Code en direct est dynamique et est mis à jour à mesure que vous interagissez avec la page en mode Affichage en direct. Sert aux aperçus dans les navigateurs Permet d'interagir avec le document comme dans un navigateur. par exemple: affiche les survols des liens Possibilité d insérer le titre (contenu de la balise <title>, importante pour le référencement et l accessibilité Sert au transfert de fichiers ( cs/using/ws0459f349-e2dc-4d31-adcf- F954B79D9A77.html)

15 Barre d état à gauche Les balises dans leur ordre d imbrication. Vous pouvez sélectionner un élément de la page en cliquant dessus. Ici une balise <a> qui se trouve dans une liste imbriquée, elle-même dans un div menu... Possibilité de zoomer ou dezoomer sur la page avec la loupe ou le menu déroulant. Puis la main pour se déplacer et la flèche pour récupérer le curseur. à droite Affiche le poids de la page et le temps de chargement. Modifier la vitesse de chargement dans Editions>préférences> Barre d état

16 Inspecteur des propriétés html Ne donne accès qu aux éléments modifiables en html : transformer du texte en h1, à h6 ou en paragraphe mettre en gras, en italique créer des listes et des listes imbriquées créer des liens hypertexte appliquer des classes css personnalisées

17 Inspecteur des propriétés css Ne donne accès qu aux éléments modifiables en css : donne le nom de l objet sur lequel on est et lorsqu on clique à l intérieur indique les propriétés css appliquées à l objet