ESAT/DGF/DMSI

ECOLE SUPERIEURE ET D’APPLICATION DES TRANSMISSIONS

Division Management et Systèmes d’Information

EDITEUR DREAMWEAVER

COURS APPLICATIFS

Cours Applicatifs

INTERNET

Editeur Dreamweaver

SOMMAIRE
SOMMAIRE...............................................................................................................................2 1. Présentation de Dreamweaver..............................................................................................4
1.1 Un éditeur HTML .....................................................................................................................4 1.2 Installation de Dreamweaver 3.................................................................................................4 Présentation de l'interface................................................................................................................7
1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 L'inspecteur des Propriétés......................................................................................................................7 La palette Objets....................................................................................................................................10 Le lanceur..............................................................................................................................................12 L'inspecteur avancé...............................................................................................................................13 La fenêtre document .............................................................................................................................13 Utilisation de l'inspecteur de source HTML ........................................................................................14

1.4 Présentation des principales fonctions des menus.................................................................15
1.4.1 Menu Fichier ........................................................................................................................................15 Menu Edition...................................................................................................................................................19 1.4.3 Menu Affichage......................................................................................................................................20 1.4.4 Menu Insertion......................................................................................................................................23 1.4.5 Menu Modifier......................................................................................................................................24 1.4.6 Menu Texte...........................................................................................................................................25 1.4.7 Menu Commandes.................................................................................................................................26 1.4.8 Menu Site..............................................................................................................................................28 1.4.9 Menu Fenêtres.......................................................................................................................................29

2. Utilisation de Dreamweaver...............................................................................................30
Préparer son site............................................................................................................................30
Organiser son site, créer ses dossiers, définir le répertoire racine..................................................................30 Définir le document par défaut ou page d'accueil ..........................................................................................33

Mettre en page du texte.................................................................................................................38
Paragraphes ....................................................................................................................................................38 Sections ..........................................................................................................................................................38 Eléments de rupture ........................................................................................................................................40 2.2.5 Eléments de titre ...................................................................................................................................42 2.2.6 Alignement du texte..............................................................................................................................43 2.2.7 Retraits du texte ....................................................................................................................................44 2.2.8 Préformater le texte ..............................................................................................................................46

Mettre en forme du texte................................................................................................................47
Caractères accentués : é è ê ë …...................................................................................................................47 Espaces insécables ..........................................................................................................................................48 Mise en forme logique.....................................................................................................................................49 Taille du texte en valeur absolue ....................................................................................................................50 Couleur du texte : ...........................................................................................................................................51

Listes...............................................................................................................................................52
Listes à puces .................................................................................................................................................52 Listes ordonnées..............................................................................................................................................54 2.4.3 Listes de définitions..............................................................................................................................57

Images.............................................................................................................................................58
Insérer des images...........................................................................................................................................58 Propriétés des images......................................................................................................................................60 Images à lien unique........................................................................................................................................62 Cartes graphiques............................................................................................................................................63

Edition janvier 2004

23242259.doc

Page 2 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.6 Liens...........................................................................................................................................66
2.6.1 Insérer un lien.........................................................................................................................................66 2.6.2 Liens internes (ancres nommées)..........................................................................................................68 2.6.3 Autres types de liens ............................................................................................................................71

2.7 Tableaux...................................................................................................................................73
2.7.1 Insérer un tableau..................................................................................................................................73 2.7.2 Propriétés des tableaux..........................................................................................................................75 2.7.3 Fusionnement des cellules.....................................................................................................................79

2.8 Cadres......................................................................................................................................80
2.8.1 2.8.2 2.8.3 2.8.4 Créer un jeu de cadres..........................................................................................................................80 Propriétés des cadres.............................................................................................................................84 Exemple de page HTML avec cadres...................................................................................................86 Rediriger les liens dans les jeu de cadres..............................................................................................88

2.9 Feuilles de styles.......................................................................................................................90
2.9.1 Créer une feuille de style externe.........................................................................................................90 2.9.1 Créer un style ......................................................................................................................................92

2.10 Formulaires............................................................................................................................99
2.10.1 Généralités sur les formulaires............................................................................................................99 2.10.2 Insertion des éléments de formulaires................................................................................................99 2.10.3 Propriétés des éléments de formulaires............................................................................................100

3 . Annexes............................................................................................................................105
3.1 Commentaires sur les différentes versions............................................................................105
3.1.1 Apports de Dreamweaver 3 ................................................................................................................105 3.1.2 Apports de Dreamweaver 4.................................................................................................................106 3.1.3 Apports de Dreamweaver MX............................................................................................................107

3.2 Sous-menu préférences..........................................................................................................108

Edition janvier 2004

23242259.doc

Page 3 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

1. Présentation de Dreamweaver
1.1 Un éditeur HTML
Dreamweaver de Macromedia (http://www.macromedia.com) est un logiciel professionnel, éditeur de pages web, qu'elles soient écrites au format HTML, XHTML ou XML. Avec Dreamweaver, il est facile de créer et modifier des pages de sites Web compatibles avec les différentes plates-formes et les divers navigateurs. Il est aussi possible d'éditer des fichiers Javascript ainsi que des pages de style. Dreamweaver fait partie de la suite de logiciels développée par Macromédia qui comprend notamment un logiciel de dessin et de retouche d'images orienté web : Fireworks ainsi qu'un logiciel permettant de réaliser des animations vectorielles : Flash. Ces logiciels présentent un interface très similaire et communiquent relativement facilement entre eux. Il existe ainsi des commandes spécifiques qui permettent d'importer du code HTML et du code javascript généré par Fireworks dans Dreamweaver dans le cas de boutons animés par exemple.

1.2 Installation de Dreamweaver 3
Configuration système requise dans Microsoft Windows : • • • • • • • Processeur Intel Pentium II ou équivalent, 300 MHz ou vitesse supérieure Windows 98, Windows 2000, Windows NT (avec Service Pack 3 ou ultérieur), Windows ME ou Windows XP Netscape Navigator ou Microsoft Internet Explorer version 4.0 ou ultérieure 96 Mo de mémoire RAM disponible (128 Mo recommandés) 275 Mo d'espace disque disponible Moniteur 256 couleurs d'une résolution de 800 x 600 pixels (résolutions 1024 x 768 pixels ou millions de couleurs recommandées) Lecteur de CD-ROM.

La procédure d'installation de Dreamweaver 3 est décrite à travers les écrans suivants :

Double cliquer sur Installation d'installation.

Drea m w e a v er3.exe

pour lancer l'assistant

Edition janvier 2004

23242259.doc

Page 4 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Appuyer sur

Suivant

puis choisir

Oui

.

Choisir le répertoire d'installation : en appuyant sur : Parcourir

.

Edition janvier 2004

23242259.doc

Page 5 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Remarque : Il est possible, dans le cas d'une installation via l'ESAT, d'avoir à saisir un numéro de licence que l'on peut trouver dans un fichier lisez-moi.txt situé dans le même répertoire que celui contenant le programme d'installation, sinon ce numéro est fourni à l'achat. Le programme récapitule les options sélectionnées avant de lancer l'installation sur le système. Par défaut, une icône de lancement (raccourci) apparaît sur le bureau, il permet bien sûr de lancer le programme.

Edition janvier 2004

23242259.doc

Page 6 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Présentation de l'interface
Au lancement de l'application, de nombreuses palettes apparaissent à l'écran dans la fenêtre principale ou fenêtre document de Dreamweaver. Leur nombre et leur complexité peuvent dérouter l'utilisateur néophyte. Ces palettes vont être décrites successivement en insistant sur les éléments les plus utiles.

1.3.1 L'inspecteur des Propriétés

L'inspecteur de propriétés affiche les propriétés de l'objet ou du texte sélectionné, et permet de modifier ses propriétés. C'est donc une palette particulièrement utile qu'il convient d'avoir toujours présent à l'écran.

Edition janvier 2004

23242259.doc

Page 7 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Ce bouton permet d'appeler l'aide en ligne de Dreamweaver, celle ci se présente sous la forme de pages HTML.

Ce bouton permet d'activer l'option Insérer du code HT M L .

Ces boutons permettent de basculer de la forme réduite à la forme complète de la palette inspecteur des propriétés.

Utilisation de la couleur :

Pour changer la couleur d'un élément (texte, fond, bordure etc ..), il est pratique de passer par l'inspecteur de propriété qui propose une icône générique qui donne accès à la palette de couleurs web.

Il faut utiliser la pipette pour sélectionner une nuance de couleur dans la palette. Toutes les couleurs de la palette sont W e b safe, donc garanties identiques dans un navigateur Web.

Edition janvier 2004

23242259.doc

Page 8 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Utiliser la pipette permet de sélectionner une couleur à partir de n'importe quel point visible à l'écran, même à l'extérieur de la fenêtre de Dreamweaver. L'inspecteur affiche la plupart des propriétés (ou attributs) de l'objet ou élément HTML sélectionné. Les propriétés existantes mais non disponibles obligent à afficher le code HTML correspondant pour y effectuer directement les modifications. A noter que l'apparence et le contenu de la palette inspecteur des propriétés varie en fonction de l'élément HTML sélectionné. Exemple 1 : inspecteur des propriétés pour une image

Exemple 2 : inspecteur des propriétés pour du texte

Pour le rendre visible / invisible , il faut cliquer sur Propriétés (raccourci : Ctrl+F3).

dans le menu

Fenêtre

Il arrive que l'inspecteur ne soit plus présent à l'écran (bug Dreamweaver). Dans ce cas utiliser l'option Réorganiser les palettes flottantes / par défaut , afin de le faire réapparaître à sa position d'emploi par défaut.

Edition janvier 2004

23242259.doc

Page 9 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

1.3.2 La palette Objets

La palette Objets contient des boutons permettant d'insérer dans la page web en construction divers types d'objets HTML, par exemple : des images, des tableaux, des calques, etc. Pour basculer d'un type d'objets à un autre, il suffit de cliquer sur le bouton triangulaire noir.

L'objet symbolisé par l'icône est explicité si le curseur est laissé pointé quelques secondes sur celui ci.

Cette palette objet se révèle au final assez utile pour développer rapidement mais son utilisation peut être jugée facultative, pour la désactiver cliquer sur Propriétés dans le menu Fenêtre (raccourci: Ctrl+F2) Voici enfin un aperçu rapide des différents éléments HTML insérables dans la page web en construction à partir de la palette Objets :

Edition janvier 2004

23242259.doc

Page 10 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 Le panneau Commun contient les objets les plus couramment utilisés : images, tableaux et calques.

 Le panneau Caractères contient des caractères spéciaux, par exemple le symbole "Copyright" ((c)), les guillemets typographiques et le symbole de "marque déposée" (trademark) etc).

 Le panneau Formulaires permet de créer des formulaires et leurs éléments : champs textes, boutons radio, cases à cocher, mots de passe…

 Le panneau Cadres contient les éléments des structures de jeux de cadres courantes.

Edition janvier 2004

23242259.doc

Page 11 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 Le panneau En-tête permet d'ajouter divers éléments dans la partie en-tête de la page web (<head> </head>) comme des balises meta, des scripts, des liens, des commentaires …

 Le panneau Invisibles permet d'insérer des objets invisibles dans la fenêtre du document, par exemple des ancres nommées, des commentaires ou des espaces insécables.

1.3.3 Le lanceur

Le lanceur comporte des boutons permettant d'ouvrir et de fermer non seulement les inspecteurs mais aussi les palettes les plus fréquemment utilisés. Les icônes du lanceur apparaissent également dans le mini-lanceur qui se trouve dans la barre d'état de la fenêtre du document, afin d'en faciliter l'accès lorsque le lanceur est fermé. Cet outil ne présente qu'un intérêt relativement négligeable. Il est aussi facile d'utiliser les deux raccourcis clavier les plus utiles ( F10 pour visionner le code source HTML et F12 pour lancer le navigateur afin de tester la page en cours ) et de passer par le menu Fenêtre pour ouvrir les palettes à l'instant voulu. Il convient, en effet toujours, d'avoir toujours le maximum d'espace disponible dans la fenêtre document pour pouvoir concevoir confortablement et efficacement. Le mini- lanceur de Dreamweaver 3. Il reprend les principales fonctions du lanceur et se situe dans le coin bas droite de la fenêtre document.

Edition janvier 2004

23242259.doc

Page 12 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

1.3.4 L'inspecteur avancé

L'inspecteur avancé regroupe de nouvelles fonctionnalités sur l'historique, les cadres, les calques ainsi que les comportements. Il est très appréciable dès qu'il faut travailler avec ces différentes fonctions avancées de l'édition HTML comme les calques ou les comportements (non décrits dans ce document).

1.3.5 La fenêtre document
La fenêtre document affiche une image du document en cours très proche de celle qui s'affichera dans un navigateur Web. C'est la fenêtre principale de travail. La barre de titre de la fenêtre du document affiche le titre de la page et, entre parenthèses, le nom de fichier, suivi d'un astérisque si le fichier contient des modifications non enregistrées.

Les balises qui contrôlent le texte ou l'objet sélectionné apparaissent dans le sélecteur de balise, dans le coin inférieur gauche de la fenêtre du document. Il faut cliquer sur l'une de ces balises pour en sélectionner le contenu dans la fenêtre du document et cliquer sur <body> pour sélectionner le corps (body) du document.

Les estimations de la taille du document et du temps de téléchargement de la page, y compris tous les éléments liés, tels que les images, s'affichent à gauche du mini-lanceur.

Le menu déroulant Taille de fenêtre permet de redimensionner la fenêtre du document suivant des dimensions prédéterminées ou personnalisées.

Edition janvier 2004

23242259.doc

Page 13 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

1.3.6 Utilisation de l'inspecteur de source HTML
L'inspecteur de source HTML affiche le code utilisé par les navigateurs pour afficher le document comme une page Web. Pour afficher ou masquer l'inspecteur de source HTML, choisir Fenêtre > source HTML (raccourci très pratique : F10). Les modifications effectuées dans la fenêtre du document apparaissent immédiatement dans l'inspecteur de source HTML. Lorsque l'on saisit du code HTML dans l'inspecteur de source HTML, les changements correspondants apparaissent dans la fenêtre du document dès qu'elle est activée.

Les options Retour à la ligne auto et Numéros de ligne ne sont pas cochées par défaut, alors qu'elles sont très pratiques ; il ne faut pas hésiter à les activer pour avoir une meilleure lisibilité sur le code. Pour modifier les couleurs dans l'éditeur HTML, il faut le spécifier dans les préférences (Edition > Préférences > Couleurs des balises HTML).

Pour apporter des modifications mineures à des balises HTML, on peut utiliser le mini-éditeur HTML Quick Tag Editor au lieu de l'inspecteur de source HTML. Pour afficher Quick Tag Editor, appuyer sur Contrôle+T ou choisir Modifier > Quick Tag Editor.

Edition janvier 2004

23242259.doc

Page 14 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

1.4 Présentation des principales fonctions des menus
La barre des menus comporte 10 éléments dont un menu d'aide.

1.4.1 Menu Fichier

Ce menu Fichier comprend 16 options et 4 autres sous - menus. Parmi les options, plusieurs fonctions classiques que l'on retrouve sous tout système d'exploitation (Ouvrir, Fermer, Enregistrer, Quitter).  Ouvrir dans un cadre sélectionné. : cette option permet d'ouvrir une page HTML dans le cadre : cette option s'utilise lorsque l'on veut enregistrer

 Enregistrer le jeu de cadre sous un jeu de cadre pour la première fois.

 Enregistrer tout : lorsque l'on travaille dans un jeu de cadres, cette fonctionnalité permet d'enregistrer simultanément le jeu de cadres et les différentes pages HTML apparaissant dans le jeu défini.  Modèles : cette fonction avancée de Dreamweaver qui permet de créer des fichiers modèles de référence dans lequel on peut définir des régions modifiables. Ces fichiers modèles servent de base pour le développement de la quasi totalité des fichiers HTML du site web.

Edition janvier 2004

23242259.doc

Page 15 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 Convertir : peut présenter une utilité si l'on veut créer une page HTML exploitable par un navigateur ancien ne supportant pas les calques (objets HTML superposés en utilisant les styles CSS2 ) ou les CSS.

Dreamweaver peut donc effectuer des conversions de calques en tableaux et de styles CSS en styles HTML.  Aperçu dans le navigateur : cette fonctionnalité essentielle permet de lancer une fenêtre de navigateur pour tester la page en cours de développement (raccourci très pratique : F12). Dreamweaver permet de configurer le lancement de plusieurs navigateurs de test dans le menu Edition > Préférences > Aperçu dans le navigateur .

Remarque : Par défaut le navigateur lancé est Internet Explorer, logiciel utilisé en Version 5 et plus par plus de 90% des internautes et plus encore des intranautes de la Défense. Remarque : Le développement d 'un site grand public doit cependant tenir compte que certains internautes utilisent Netscape Navigator, Netscape 4.7 et d'autres navigateurs peu courants. (Mozilla, Neoplanet …) il convient donc de tester les pages créées sous ces différents environnements car le code HTML est différemment interprété par ces navigateurs, ce qui peut amener à des erreurs importantes au niveau de la mise en page.

Edition janvier 2004

23242259.doc

Page 16 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 Design notes : cette fenêtre est surtout utilisée dans le cadre de projet regroupants plusieurs développeurs ayant accès aux mêmes documents. Elle permet à chacun d'y d'intégrer ses remarques personnelles ainsi que l'état d'avancement du fichier.

 Importer : ce sous-menu comporte 3 options :

1. Importer XML dans le modèle : pour importer un fichier XML dans le document modèle en cours, les champs variables du modèles seront alors au format XML. 2. Importer HTML Word : permet d'importer et de traiter un fichier HTML généré par le logiciel de traitement de texte Word. 3. Importer données tabulaires : permet d'importer puis de mettre sous la forme d'un tableau HTML des données formatée provenant d'un fichier texte.

 Exporter : ce sous-menu comporte 3 options :

1. Exporter les styles CSS : permet d'exporter les styles CSS déclarés dans le document courant vers un fichier CSS externe. 2. Exporter tableau : permet d'exporter sous la forme d'un fichier texte formatable le contenu d'un tableau HTML

Edition janvier 2004

23242259.doc

Page 17 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 Vérifier liens : cette fonctionnalité avancée permet de vérifier que tous les liens codés pointent vers une ressource (page HTML, fichier multimédia, URL …) existante. Un rapport d'analyse est généré et permet de recenser les liens brisés ou manquants.  Vérifier navigateurs cibles : cette fonctionnalité permet de vérifier que le code généré par Dreamweaver est ou non entièrement reconnu pour un navigateur choisi dans une liste cidessous. Sur certains navigateurs anciens, en effet certaines balises ne sont pas reconnues et entraîneront des erreurs à l'affichage. Cette fonctionnalité est intéressante mais à l'heure actuelle, seule une minorité de personnes utilise encore des versions anciennes d' Internet Explorer ou de Netscape Navigator.

Edition janvier 2004

23242259.doc

Page 18 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Menu Edition

Ce menu comprend de nombreuses fonctions classiques d'un éditeur comme Répéter, Copier / Coller et Rechercher / Remplacer.

: Annuler /

 Copier / Coller comme texte : Une distinction est faite dans Dreamweaver entre le texte brut et le code HTML à proprement parlé.  Sélectionner balise parent / enfant : Les éléments HTML sont imbriqués comme des poupées russes, les uns dans les autres (balises imbriquées). Il est quelquefois difficile d'atteindre l'élément HTML de niveau supérieur ou inférieur d'ou la présence de ces commandes.  Lancer un éditeur externe : il est possible sous Dreamveaver d'utiliser un éditeur de texte externe (bloc-note, UltraEdit 32, Script Edit …), il faut pour cela afficher son chemin d'accès et les fichiers à ouvrir de préférence avec cet éditeur. Il est alors souhaitable de synchroniser les 2 éditeurs.  Les préférences seront décrites en annexes à la fin de ce document.

Edition janvier 2004

23242259.doc

Page 19 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

1.4.3 Menu Affichage

Ce menu permet d'afficher / rendre invisibles différents outils plus ou moins utiles.  Contenu de l'entête : cette fonctionnalité permet d'afficher des icônes correspondant au contenu de la balise <head> et définissant donc les balises <meta> et autres éléments de script.

 Eléments invisibles : cette fonctionnalité permet d'afficher dans la fenêtre document les icônes correspondantes à certaines balises ou lignes de codes (paramétrables dans Edition > Préférences > Eléments invisibles ).

Edition janvier 2004

23242259.doc

Page 20 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 Bordures de calques : si l'on utilise les calques (outils avancés non développés dans ce document).  Bordures de tableau : permet de voir le contour d'un tableau HTML en pointillé si son attribut taille de bordure est fixé à 0.  Bordures de cadres : si l'on utilise des cadres, permet de visionner l'agencement des différents cadres. Cette fonctionnalité est indispensable pour atteindre la page de définition de cadres et son code source.  Cartes graphiques : pour afficher la carte graphique (zone active sur l'image permettant d'ouvrir un lien défini.) sur une image.

 Règles : pour afficher des règles graduées paramétrables facilitant la mise en page et l'édition. L'échelle et l'origine sont paramétrables.

Edition janvier 2004

23242259.doc

Page 21 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 Grilles : pour afficher les grilles dans la fenêtre document.

Il apparaît à l'usage que les grilles sont souvent assez pratiques pour une mise en page rigoureuse.

La grille est paramétrable ( Affichage > Grille > Paramètres ) si on coche l'option aligner sur ( Affichage > Grille > Aligner sur ), les différents éléments HTML vont coller aux repères de la grille. Ceci permet de faciliter la mise en page du document notamment pour aligner différents éléments.  Tracé de l'image : n'est pas recommandé car cette fonctionnalité insère des attributs propriétaires. Son utilité reste à démontrer.  Plug-ins : n'est pas recommandé.  Barre d'état : pour afficher la barre d'état situé en bas de la fenêtre document du logiciel. Elle contient plusieurs informations pertinentes avec respectivement de gauche à droite :

1. La balise dans lequel le curseur se situe et donc ou l'on opère 2. La résolution utilisée dans la fenêtre document (paramétrables dans Edition > Préférences > Barre d'état ) 3. Le poids de la page en cours et une estimation de son temps de chargement dans un navigateur en fonction du type de connexion utilisé (paramétrables dans Edition > Préférences > Barre d'état ) 4. Mini lanceur (Cf 1.4.3)

Edition janvier 2004

23242259.doc

Page 22 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

1.4.4 Menu Insertion

Ce menu liste les différents éléments HTML ou autres que l'on peut utiliser sous Dreamweaver et insérer dans la fenêtre document à l'endroit où se trouve le curseur. L'utilisation des plus courants et des plus utiles d'entre eux sera développée dans la suite de ce document.  L'option Image permet d'insérer une image sélectionnée dans le répertoire image dans la fenêtre document (Cf 2.5).  L'option Image survolée permet d'insérer du code javascript permettant d'afficher deux images au même endroit en fonction du survol de la souris (roll over).  L'option Tableau permet d'insérer un tableau dans la fenêtre document (Cf 2.7).  L'option Données tabulaires permet d'insérer un tableau contenant des données provenant d'une base ou d'un fichier texte formaté.  L'option Barre horizontale permet d'insérer une barre horizontale ( <hr> ) paramétrable dans le document (Cf 2.2.3.1).  L'option Barre de navigation permet d'insérer cet élément fonctionnel (code javascript).  L'option Calque permet de positionner un objet calque dans la page à l'endroit exacte ou se trouve le curseur (position horizontale et verticale définie au pixel près).  L'option Formulaire permet d'insérer dans le code HTML des balises <form> et </form> délimitant un formulaire.  Le sous menu Objets de formulaire permet d'insérer des éléments de formulaire HTML (Cf 2.10).  Le sous menu Cadres correspondant (Cf 2.8). permet d'insérer des cadres et de désigner le jeu de cadre

Edition janvier 2004

23242259.doc

Page 23 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 L'option Saut de ligne permet d'insérer un saut de ligne balise <br> dans le code HTML. (Cf 2.2.3.2).  L'option Lien de messagerie permet d'insérer un lien vers une adresse de messagerie (ou adresse email). (Cf 2.6.3.2).  L'option Date permet de récupérer puis d'insérer la date système dans la page.  Le sous menu Médias animations Director etc). permet d'insérer des éléments multimédias (sons, animations flash,

 Le sous menu En-tête permet d'insérer des balises <meta> dans l'entête ( <head> ) de la page HTML en construction.  Le sous menu Caractères permet d'insérer des caractères spéciaux dans le document.  L'option Server Side Include ouvre la porte aux éléments dynamiques du site.  L'option Ancre nommée permet d'insérer une ancre afin de réaliser un lien interne à la page (Cf 2.6.2).  L'option Commentaires ouvre une fenêtre permettant s'insérer un commentaire directement dans le code HTML (balises <!-- -- >).  L'option Script ouvre une fenêtre permettant s'insérer un script (langage sélectionnable (Javascript, VBscript) directement dans le code HTML (balises <script=""> </script> )  L'option Espace insécable ( &nbsp; ) (Cf 2.3.2). permet d'insérer un espace insécable dans le document

1.4.5 Menu Modifier

Ce menu permet non seulement de spécifier les propriétés de divers éléments HTML complexes mais aussi d'accéder à certaines fonctionnalités de l'éditeur (éditeur de code, lanceur, traducteur, modèles, bibliothèques …). Certaines de ces fonctionnalités seront expliquées par la suite.

Edition janvier 2004

23242259.doc

Page 24 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

1.4.6 Menu Texte

Ce menu regroupe les fonctionnalités permettant de mettre en page du texte. La partie mise en page sera développée par la suite (Cf 2.2) et la partie style CSS sera expliquée en détail dans le chapitre 2.9 car c'est un outil très puissant pour mettre en forme un document HTML. A noter que Dreamweaver comprend une fonctionnalité de correction d'orthographe.

Edition janvier 2004

23242259.doc

Page 25 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

1.4.7 Menu Commandes

Ce menu regroupe diverses fonctions avancées de Dreamweaver.  Démarrer l'enregistrement et Reproduire la commande enregistrée : cet outil peut être utilisé si l'on doit accomplir une tache répétitive. On peut programmer une suite d'instructions, la mémoriser puis la lancer, cette fonctionnalité peut s'utiliser comme une macro sous Excel.  Nettoyer HTML Word : Dans Dreamweaver, on peut ouvrir ou importer des documents enregistrés par Microsoft Word en HTML. Il est alors possible d'ouvrir la boîte de dialogue Nettoyer HTML Word pour supprimer le code HTML superflu généré par Word. La commande Nettoyer HTML Word est utilisable pour les documents enregistrés sous forme de fichiers HTML par Word 97 ou Word 2000.  Nettoyer HTML : Utiliser la commande Nettoyer HTML permet de supprimer des balises vides ou redondantes, de combiner des balises <font> imbriquées et de nettoyer le code HTML désordonné ou illisible.  Ajouter / supprimer correction pour redim dans Netscape : permet d'ajouter un programme d'auto correction d'affichage pour les navigateurs Netscape.  Optimiser l'image dans Fireworks : permet de retravailler en direct une image dans le logiciel de retouche d'images Macromedia Fireworks.  Créer un album photos pour le Web : en liaison avec Fireworks permet de créer un album photos de vignettes avec des liens vers les images au format original.  Formater le tableau : Utiliser la commande Formater le tableau pour appliquer rapidement une mise en forme prédéfinie à un tableau (couleur, bordures, tailles etc)

Edition janvier 2004

23242259.doc

Page 26 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 Trier le tableau : c'est un outil puissant et pratique qui permet de trier un tableau de valeurs en fonctions de plusieurs critères.

 Définir la palette de couleur : ouvre une fenêtre dans lequel des modèles ont été définis.

Edition janvier 2004

23242259.doc

Page 27 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

1.4.8 Menu Site

Ce menu permet de créer un répertoire racine où seront déposées les pages HTML. Le nommage des fichiers HTML se fera en fonction de ce répertoire racine. Cette opération, obligatoire dès que l'on commence un projet sous Dreamweaver, sera développée par la suite.  La carte du site est un schéma montrant comment s'articulent et sont liées les différentes pages HTML du site. C'est une fonction pratique pour avoir une vision d'ensemble.

Edition janvier 2004

23242259.doc

Page 28 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 Acquérir, extraire, placer, retrouver sur le site local, retrouver sur le site distant sont des commandes FTP lancées par l'intermédiaire de l'interface de Dreamweaver. Ce sont ces commandes qui permettent de mettre à jour le site distant de publication.  Vérifier les liens de tout le site C'est une commande très puissante et très pratique. Elle permet de lister les liens brisés (ne menant pas vers une ressource existante), les liens externes au site et les fichiers orphelins (non atteignables par un lien de navigation).

1.4.9 Menu Fenêtres

Ce menu permet d'afficher à l'écran les diverses fenêtres de propriétés avancées dont nous avons déjà parlé. Les raccourcis claviers correspondants y sont aussi notés dans ce menu. C'est ici qu'il est possible de désactiver l'apparition des fenêtres, objets ou palettes, inspecteurs dénommés par le logiciel palettes flottantes. La deuxième partie du menu permet un accès plus rapide à certains gestionnaires ou fonctionnalités.

Edition janvier 2004

23242259.doc

Page 29 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2. Utilisation de Dreamweaver
Préparer son site Organiser son site, créer ses dossiers, définir le répertoire racine
Il faut, dès que l'on débute un projet web, commencer par définir le répertoire racine ou se trouveront toutes les ressources nécessaires à sa publication (pages HTML, images, fichiers externes de styles ou de scripts, éléments multimédias, etc…). C'est donc le contenu de ce répertoire qui sera par la suite exporté vers un serveur web.

Sélectionner Nouveau site

dans le menu Site

.

Ecrire le Nom du site (simple étiquette de gestion propre à Dreamweaver.)

Edition janvier 2004

23242259.doc

Page 30 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Sélectionner le Dossier racine local. Ce dossier constitue pour le site à développer la racine au dessus de laquelle se trouvent tous les fichiers du site (pages web, images, etc …) organisés en sous dossiers. Cette option ouvre une fenêtre de navigation.

Créer grâce à la fonction prévue à cet effet un répertoire du site (par exemple site_dreamweaver) dans lequel il convient ensuite de créer un sous répertoire pages, un sous répertoires images, un sous répertoire styles et si nécessaires de nouveaux sous répertoires contenant d'autres types d'éléments : scripts, éléments multimedia etc.

Remarque : toujours éviter quand on nomme un répertoire, les majuscules et les espaces. (règles de nommage)

 

Enregistrer le répertoire racine. Cocher dans la fenêtre Définition du site la case Utiliser le Cache (très utile pour réorganiser physiquement le site à sa convenance).

Edition janvier 2004

23242259.doc

Page 31 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Il est aussi possible d'entrer l'adresse URL du site, si elle est connue. C'est donc l'adresse du serveur de production.

Valider enfin en pressant la touche OK. Le cache va être généré puis la fenêtre Site de gestion FTP du site s'ouvre :

fichiers du site distant

fichiers du site en local

C'est avec cette fenêtre que l'on peut facilement effectuer sous Dreamveaver des transfert FTP entre le site local et le site distant (généralement présent physiquement sur un serveur web). Pour cela, on utilisera les commandes suivantes :  Connecter : pour effectuer la connexion au serveur distant.  Acquérir : pour rapatrier un fichier du site distant vers le site local.  Placer : pour copier un fichier sur le site distant (il est aussi possible d'effectuer du drag and drop).  Actualiser : pour raffraîchir l'affichage des écrans.

Edition janvier 2004

23242259.doc

Page 32 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Définir le document par défaut ou page d'accueil

 Aller dans

Fichier

>

Nouveau

Une nouvelle page s'ouvre dans la fenêtre document de Dreamweaver .

Aller dans le menu Fichier

>

Enregistrer sous

Enregistrer cette page dans le répertoire racine et la nommer : index.htm

Cette page sera donc la page d'accueil du site. Lorsque le site sera publié sur un serveur web, les internautes visionneront par défaut cette page, le serveur étant paramétré pour afficher par défaut cette page. Il est utile de le spécifier dès ce moment à afin que Dreamweaver puisse concevoir au fur et à mesure la carte du site.

Aller dans la fenêtre fichier du site ( Fenêtres > Fichiers du site ou raccourci F5 ), pour vérifier que le fichier crée juste auparavant index.htm est bien présent.

Edition janvier 2004

23242259.doc

Page 33 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Clic droit sur index.htm >

Définir comme page d'accueil.

La carte du site peut alors être créée ( Fenêtres

> Carte du site ou raccourci ctrl + F5 ).

Edition janvier 2004

23242259.doc

Page 34 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Edition janvier 2004

23242259.doc

Page 35 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Aller ensuite dans le menu Modifier

>

Propriétés de la page.

1 3 2 4

Une nouvelle fenêtre s'ouvre : 1. Ecrire le titre de la page (balise <title></title> ) 2. On peut aussi y définir la couleur d'arrière plan (attribut bgcolor de la balise <body></body> ) ainsi que les couleurs par défaut du texte et des liens. 3. Il est aussi possible via ce menu de définir une image d'arrière plan. 4. On peut aussi spécifier la couleur des liens par défaut grâce aux attributs alink, link et vlink.

Ces éléments sont explicités dans la partie "corps de page" du document "langage HTML pages statiques" p. 23.

 Valider, le document créé est ainsi parfaitement défini.

Edition janvier 2004

23242259.doc

Page 36 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Appuyer sur F10

pour afficher le code source HTML.

Comparer le code avec les informations insérées dans la fenêtre Propriétés de la page.

Edition janvier 2004

23242259.doc

Page 37 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Mettre en page du texte Paragraphes
Un paragraphe est défini par la balise <p>. (Cf le document : "langage HTML : pages statiques" p.16).

 Saisir le texte puis appuyer simplement sur la touche return
courant et ouvrir le suivant.

pour terminer un paragraphe

Code source correspondant :

Sections
Une section de document peut être mise en œuvre grâce à la balise <div>. (Cf le document : "langage HTML : pages statiques" p. 17). Une division ne se met en place que si on applique un style différent (alignement par exemple) à un ensemble d'objets (paragraphes, images, etc …).

Edition janvier 2004

23242259.doc

Page 38 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Il n'existe pas de menu pour mettre en œuvre cette balise. Aussi l'auteur du site est amené à modifier directement dans le code source à l'endroit désiré.

Edition janvier 2004

23242259.doc

Page 39 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Eléments de rupture
2.2.3.1 Retour chariot Un retour chariot est effectué en déclarant une balise <br>. (Cf le document : "langage HTML : pages statiques" p. 18).

Ecrire le texte puis appuyer sur Maj + return pour passer à la ligne suivante ou utiliser l'icône BR à partir du panneau Objets Communs.

Remarque : Si on le paramètre dans les préférences, la petite icône <br> apparaît dans la fenêtre document. Code source correspondant :

Edition janvier 2004

23242259.doc

Page 40 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.2.3.2 Ligne horizontale de séparation Il est possible de tracer une ligne horizontale de séparation dans la page HTML en utilisant la balise <hr>. (Cf le document : "langage HTML : pages statiques" p. 18).

Aller dans le menu Insertion

>

Barre horizontale.

ou utiliser le panneau Objets Communs.

La barre horizontale est paramétrable, on peut modifier ses attributs dans la barre des propriétés.

Edition janvier 2004

23242259.doc

Page 41 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Code source correspondant :

2.2.5 Eléments de titre
Les éléments de titre sont définis par les balises <h1> <h2> … <h6> (Cf le document : "langage HTML : pages statiques" p. 19). Au moins deux moyens existent pour appliquer le style en question :

Taper le titre, sélectionner puis aller dans le menu Texte >

Format

>

En-tête

ou utiliser directement l'inspecteur des propriétés.

Edition janvier 2004

23242259.doc

Page 42 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Code source correspondant :

2.2.6 Alignement du texte
Les alignements sont fixés par l'attribut align= et les valeurs "center". ( Cf le document : "langage HTML : pages statiques" p. 20). "left" "right"

Sélectionner le texte puis aller dans le menu Texte >

Alignement

>

Centrer.

 

ou utiliser directement l'inspecteur des propriétés.

Appuyer alors sur le bouton correspondant à un alignement sur la gauche, la droite ou au centre.

Edition janvier 2004

23242259.doc

Page 43 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Code source correspondant :

2.2.7 Retraits du texte
Les retraits de textes sont fixés par la balise <blockquote>. ( Cf le document : "langage HTML : pages statiques" p. 21).

Sélectionner le texte puis aller dans le menu Texte >

Retrait.

ou utiliser l'inspecteur des propriétés.

Edition janvier 2004

23242259.doc

Page 44 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Aperçu dans la fenêtre document :

Code source correspondant :

L'option retrait négatif est là pour réaliser l'effet inverse. (ôter une balise <blockquote> ).

Edition janvier 2004

23242259.doc

Page 45 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.2.8 Préformater le texte
Pour préformater du texte, il convient d'utiliser la balise <pre>. (Cf le document : "langage HTML : pages statiques" p. 22).

Sélectionner le texte puis aller dans le menu préformaté.

Texte >

Format

>

Texte

Ou utiliser l'inspecteur des propriétés.

Code source correspondant :

Le style prédéfini est en général utilisé pour afficher des données style calcul, programmes informatiques, etc .

Edition janvier 2004

23242259.doc

Page 46 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Mettre en forme du texte Caractères accentués : é è ê ë …
(Cf le document : "langage HTML : pages statiques" p. 26.) Dreamweaver effectue directement la transformation du code nécessaire. Il suffit donc uniquement de saisir le texte normalement dans la fenêtre document.

Code source correspondant :

Les caractères particuliers comme © sont accessibles via le menu Insertion > Caractères ou via la palette Objets > Caractères. A titre d'explication, les navigateurs de première génération ne supportent que le codage ASCII 7 bits.

Edition janvier 2004

23242259.doc

Page 47 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Espaces insécables
L'auteur de site va insérer un espace insécable partout ou le caractère espace (barre d'espacement) propre aux paragraphe ne peut s'insérer. Cet espace ( code HTML : &nbsp; ) permet de ne pas coller les objets HTML les uns aux autres, d'aérer les éléments constitutifs de sa page. ( Cf le document : "langage HTML : pages statiques" p. 26).

Pour insérer un espace insécable, aller dans le menu insécable.

Insertion

/

Espace

ou aller dans la palette Objets Invisibles :

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 48 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Mise en forme logique
( Cf le document : "langage HTML : pages statiques" p. 29). Voici quelques remarques concernant l'utilisation des styles : • • • • Le style souligné, réservé aux liens, est à éviter. Le style barré est réservé aux modifications apportées dans une page. Les styles accentué et fortement accentué ne sont qu'une manière de mettre le texte en italique et en gras. Les autres styles deviennent rarement usités. > Style.

 Sélectionner le texte puis aller dans le menu Texte

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 49 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Taille du texte en valeur absolue
La taille du texte est fixée par la balise <font> et l'attribut size. (Cf le document : "langage HTML : pages statiques" p. 32).

Sélectionner le texte puis aller dans le menu Texte

>

taille.

ou à l'aide de l'inspecteur des propriété.

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 50 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Couleur du texte :
La couleur du texte est fixée par la balise <font> et l'attribut color. ( Cf le document : "langage HTML : pages statiques" p. 24).

Sélectionner le texte puis aller dans le menu Texte

>

Couleur.

ou en utilisant l'inspecteur des propriétés, en cliquant sur le carré coloré on ouvre un menu comprenant une palette de couleurs.

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 51 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Listes Listes à puces
2.4.1.1 Puces standards ( Cf le document : "langage HTML : pages statiques" p. 36).

Sélectionner le texte puis aller dans le menu Texte

>

Listes

>

Liste simple.

ou en utilisant l'inspecteur des propriétés.

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 52 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Pour changer le motif en début de liste, il faut passer par les Eléments de liste dans l'inspecteur des propriétés. En effet, ces trois motifs sont : le disque noir, le cercle noir et le carré noir. Ils sont appliqués par défaut respectivement pour les premiers, deuxième et troisième niveaux de liste.

Ceci donne alors accès à une nouvelle fenêtre permettant d'avoir des informations plus complètes.

2.4.1.2 Puces graphiques Dans Dreamweaver, pour pouvoir afficher des listes avec des puces graphiques, il faut passer par la technique des feuilles de style, technique qui sera abordée ultérieurement dans ce document.

Edition janvier 2004

23242259.doc

Page 53 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Listes ordonnées
( Cf le document : "langage HTML : pages statiques" p. 38).

Sélectionner le texte puis aller dans le menu numérotée.

Texte

>

Listes

>

Liste

ou en utilisant l'inspecteur des propriétés.

En activant le bouton Elé m e nts de la liste , il est possible de choisir les différents éléments (ou articles) de liste. Ce fenêtre est aussi accessible via le menu Texte > Listes > Propriétés de la liste.

Edition janvier 2004

23242259.doc

Page 54 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Il est ainsi possible de réaliser des arborescences complexes en utilisant les boutons de retrait de l'inspecteur des propriétés.

Code source correspondant :

Enfin, il est possible de modifier la valeur initiale d'une liste numérotée grâce à la fenêtre des propriétés de la liste.

Edition janvier 2004

23242259.doc

Page 55 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Edition janvier 2004

23242259.doc

Page 56 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.4.3 Listes de définitions
Ce type de liste est prévue pour les glossaires de site. Il peut être aussi utilisé pour toutes les annotations, remarques ou autres. ( Cf le document : "langage HTML : pages statiques" p. 39).

Sélectionner le texte puis aller dans le menu définitions.

Texte

>

Listes

>

Liste de

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 57 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Images
( Cf le document : "langage HTML : pages statiques" chapitre 6).

Insérer des images
Plusieurs méthodes sont possibles :

Sélectionner l'option Ctrl+Alt+I)

Image

dans le menu

Insertion (raccourci clavier :

Sélectionner l'icône image dans le panneau Objets communs.

Ceci déclenche l'ouverture d'une nouvelle fenêtre, dans lequel on sélectionne l'image à insérer. Au moment de l'insertion, elle devrait se trouver dans le répertoire images créé à la racine du site. Sinon, il faut annuler l'opération et prendre soin de copier le fichier image dans le répertoire en question.

Edition janvier 2004

23242259.doc

Page 58 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Aperçu dans la fenêtre document :

Propriétés de l'image :

Code source correspondant :

Outre le chemin d'accès au fichier, l'éditeur indique automatiquement dans le code source les dimensions de l'image insérée.

Edition janvier 2004

23242259.doc

Page 59 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Propriétés des images

1

2 3

4 10 9 8 7 6 5

1. 2. 3. 4. 5. 6. 7.

chemin et nom de l'image texte alternatif à l'image (attribut alt) alignement du paragraphe ( balise <p> ) qui encadre l'image valeur de l'épaisseur de la bordure de l'image (attribut border) en pixels chemin de l'image pour l'attribut lowsrc (Netscape) * URL du lien éventuel taille des marges gauche et supérieure pour le positionnement de l'image dans la page (attributs hspace et vspace ) 8. dimensions de l'image (attributs height et width ) 9. carte graphique 10. poids de l'image * : cas où l'image à afficher est longue à charger. L'auteur de site désigne une image d'attente de plus basse résolution et donc plus rapide à charger. Code source correspondant :

Edition janvier 2004

23242259.doc

Page 60 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Edition janvier 2004

23242259.doc

Page 61 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Images à lien unique
Pour affecter un lien à une image, une façon rapide d'opérer est d'aller dans l'inspecteur des propriétés de l'image et d'appuyer sur l'icône répertoire de la case lien. Ceci ouvre une fenêtre de navigation dans laquelle il est possible choisir le fichier cible.

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 62 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Cartes graphiques
Pour éditer rapidement une carte graphique, Dreamweaver propose un outil particulièrement pratique. Cet outil est disponible dans l'inspecteur des propriétés de l'image en cours.

  

Dans un premier temps, il faut donner un nom à la carte. Il faut ensuite sélectionner l'une des 3 formes disponibles : le rectangle, le cercle et le polygone. Puis dessiner la forme de la zone réactive sur l'image.

Conseils de dessins : Le curseur de souris change d'aspect pendant le survol de l'image. En fonction de la forme choisie, il faut placer le curseur à l'extrémité de zone pour le rectangle (coin supérieur gauche ou coin inférieur droit), au centre de la zone pour le cercle, aux sommets pour la forme polygonale. Tout le temps du dessin, la souris reste enfoncée pour les 2 premières formes, alors qu'une série de clics définissent les sommets du polygone. La forme terminée, il faut relâcher le bouton de la souris pour le rectangle et le cercle et effectuer un double clic pour le polygone.

Edition janvier 2004

23242259.doc

Page 63 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Edition janvier 2004

23242259.doc

Page 64 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Dernière étape: éditer le lien en suivant la méthode vue précédemment.

Pour chaque lien et donc chaque zone, il est possible de définir un texte informatif, activé au survol de la zone. Code source correspondant :

Edition janvier 2004

23242259.doc

Page 65 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.6 Liens
( Cf le document : "langage HTML : pages statiques" chapitre 7).

2.6.1 Insérer un lien
2.6.1.1 Insérer un lien à partir d'un texte

Sélectionner le texte sur lequel il faudra poser le lien puis aller dans l'inspecteur des propriétés :

 

Cliquer sur le bouton "répertoire" permettant d'ouvrir une fenêtre parcourir.

Sélectionner le fichier puis valider.

Edition janvier 2004

23242259.doc

Page 66 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Les informations dans l'inspecteur des propriétés sont mises à jour.

Code source correspondant :

Pour choisir la cible, il convient d'utiliser le menu déroulant cible dans l'inspecteur des propriétés.

La cible _blank peut être utilisée si l'on souhaite que la nouvelle page s'ouvre dans une deuxième fenêtre de navigateur. Les autres cibles s'utilisent si l'on travaille avec un jeu de cadres.

2.6.1.2 Insérer un lien à partir d'une image Cf chapitre 2.5.3

Edition janvier 2004

23242259.doc

Page 67 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.6.2 Liens internes (ancres nommées)
Il s'agit de poser un lien interne à une page donnée. Pour mettre en œuvre cette technique, il convient dans un premier temps de définir la cible, celle ci prend le nom d'ancre dans Dreamweaver. Dans un deuxième temps, il convient de poser le lien vers la cible précédemment citée. (Cf le document : "langage HTML : pages statiques" p. 56). 2.6.2.1 Poser une ancre

Sélectionner Ancre nommée Ctrl+Alt+A)

dans le menu

Insertion (raccourci clavier :

Ou sélectionner l'icône ancre dans le panneau Objets >

invisibles

Donner un nom explicite, relativement court, à l'ancre nommée puis valider.

Edition janvier 2004

23242259.doc

Page 68 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Edition janvier 2004

23242259.doc

Page 69 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Aperçu dans la fenêtre document :

L'icône ancre apparaît si elle a été paramétrée dans le menu éléments invisibles. Inspecteur des propriétés pour une ancre nommée :

Edition

>

Préférences

>

Code source correspondant :

L'ancre nommée (ou cible du lien interne) se pose à un endroit bien déterminé dans la page. Le fait d'encadrer ou non un texte ou un autre objet HTML importe peu. C'est le positionnement de l'ancre qui conditionne l'affichage. 2.6.2.2 lier l'ancre

Sélectionner le texte ou l'image puis aller dans l'inspecteur des propriétés et appuyer sur l'icône circulaire près de la case lien, pointer ensuite vers l'ancre. Dreamweaver va alors créer automatiquementle lien interne.

Edition janvier 2004

23242259.doc

Page 70 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Code source correspondant :

2.6.2.3 Liens mixtes C'est à la fois un lien externe (vers une autre page) et un lien interne. En cliquant sur ce type de lien, l'internaute est dirigé vers une section définie sur une nouvelle page HTML.

Pour créer un lien mixte, la solution simple est d'éditer le lien dans l'inspecteur des propriétés : 1. Sélectionner le document cible en parcourant puis en sélectionnant le document cible. 2. Rajouter le nom de l'ancre manuellement, en effet Dreamweaver ne propose pas de menu convivial pour ajouter la partie lien interne.

2.6.3 Autres types de liens
2.6.3.1 Lien vers un site Internet

Sélectionner le texte ou l'image, puis dans l'inspecteur des propriétés, éditer l'adresse URL complète du lien :

Edition janvier 2004

23242259.doc

Page 71 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.6.3.2 Lien vers une adresse de courriel

Pour insérer un lien de messagerie (Email), il possible d'utiliser via l'interface de Dreamweaver la commande Insertion > Lien de messagerie.

Code source correspondant :

2.6.3.3 Lien vers un site FTP

Sélectionner le texte ou l'image, puis dans l'inspecteur des propriétés, éditer l'adresse du lien :

Edition janvier 2004

23242259.doc

Page 72 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.7 Tableaux
( Cf le document : "langage HTML : pages statiques" chapitre 8).

2.7.1 Insérer un tableau
Plusieurs méthodes sont possibles :

Sélectionner Tableau

dans le menu Insertion (raccourci clavier : Ctrl+Alt+T).

Ou sélectionner l'icône tableau dans le panneau Objets > Communs.

Ceci entraîne l'ouverture d'une nouvelle fenêtre…

Edition janvier 2004

23242259.doc

Page 73 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

… dans laquelle on peut rentrer certains paramètres dont le nombre de lignes et de colonnes. Cette fenêtre est intéressante, car Dreamweaver utilise par défaut les paramètres laissés lors de la dernière insertion. Ainsi sans garder de modèle, il est possible de fixer dès à présent, le choix entre une longueur fixe ou relative, la présence ou non de bordures etc.

Aperçu dans la fenêtre document :

Aperçu de l'inspecteur des propriétés :

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 74 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.7.2 Propriétés des tableaux
2.7.2.1 Pour le tableau en entier La balise qui définit un tableau est <table> .

1

2

3

4

5

6

7 8 9

12 13 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

11

10

nom du tableau (attribut name ) pour désigner précisément un tableau dans un script nombre de lignes et de colonnes (obligatoire) dimensions du tableau (attributs width et height ) largeur obligatoire, hauteur facultative espacement entre cellules (attribut cellspacing ) espacement entre le bord d'une cellule et son contenu (attribut cellpadding ) alignement horizontal du tableau (attribut align ) épaisseur de la bordure (attribut border ) abscente ou légère (0 - 1) pour insérer une image de fond de tableau (attribut background ) couleur de la bordure (attribut bordercolor ) couleur de fond de tableau (attribut bgcolor ) couleurs pour bordure en 3D (attributs bordercolordark et bordercolorlight ) taille des marges gauche et supérieure pour le positionnement du tableau dans la page (attributs hspace et vspace ) 13. outils pour effectuer des conversions pixels en % ou pour supprimer les valeurs de hauteur et de longueur des lignes et cellules. Code source correspondant :

Edition janvier 2004

23242259.doc

Page 75 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.7.2.2 pour une ligne seulement La balise qui définit une ligne est : <tr>

1 2

8

7

6

5

4

3

1. interdit les retours à la ligne automatiques pour les longues séquences de mots si coché (attribut nowrap ) 2. pour insérer une image de fond de ligne (attribut background ) 3. couleur de la bordure interne (attribut bordercolor ) 4. couleur de fond pour la ligne (attribut bgcolor ) 5. si coché, la ligne devient une ligne d'en-tête ( <tr> -> <th> ) 6. spécifie la hauteur et la largeur des cellules de la ligne 7. spécifie l'alignement vertical et horizontal du texte dans les cellules de la ligne (attributs align et valign ) 8. outils utilisés pour fusionner / fractionner les cellules

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 76 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Edition janvier 2004

23242259.doc

Page 77 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.7.2.3 pour une cellule seulement La balise qui définit une ligne est : <td>

1

2

7

6

5

4

3

1. interdit les retours à la ligne automatiques pour les longues séquences de mots si coché (attribut nowrap ) 2. pour insérer une image comme fond (attribut background ) 3. couleur de la bordure interne (attribut bordercolor ) 4. couleur de fond (attribut bgcolor ) 5. si coché la ligne devient une ligne d'en-tête ( <tr> -> <th> ) (valable pour la ligne complète) 6. spécifie la hauteur et la largeur de la cellule 7. spécifie l'alignement vertical et horizontal du texte dans la cellule (attributs align et valign )

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 78 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.7.3 Fusionnement des cellules
Exemple pratique : à partir de l'exemple précédent, sélectionner les 3 cellules de la première ligne à l'aide de la souris et de la touche Ctrl , puis aller dans l'inspecteur des propriétés et appuyer sur la touche activant la fusion des cellules horizontales.

Résultat dans la fenêtre document :

Code source correspondant :

La procédure est la même pour fusionner des cellules verticales. Remarque : il est possible d'effectuer l'opération inverse, c'est à dire scinder une cellule en plusieurs nouvelles cellules sous Dreamweaver, en appuyant sur la touche division.

Edition janvier 2004

23242259.doc

Page 79 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.8 Cadres
La technique d'utilisation des cadres est expliquée dans le support écrit : "langage HTML : pages statiques" chapitre 9.

2.8.1 Créer un jeu de cadres
Plusieurs méthodes sont possibles :

Sélectionner préexistant.

Cadres

dans le menu

Insertion puis choisir un des jeux de cadres

Ou

Sélectionner l'un des jeux de cadres dans le panneau cadres de la palette objets

Les options du menu Cadres indiquant le sens du découpage, sens que l'on peut retrouver dans la série d'icônes de la palette O bjets. Les options Gauche et Droite réalisent un découpage vertical et les options Haut et Bas un découpage horizontal. Les 3 options suivantes effectuent un découpage dans les 2 sens. La dernière permet de (re)diviser un cadre donné.

Edition janvier 2004

23242259.doc

Page 80 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Ouvrir l'inspecteur avancé des cadres puis sélectionner Fenêtre (raccourci clavier : Ctrl+F10).

Cadres

dans le menu

Aperçu de la fenêtre document :

Le jeu de cadre est établi. Il convient, maintenant, avant toute chose et pour éviter de nombreuses erreurs, d'enregistrer convenablement le fichier qui décrit ce découpage de définitions des cadres ou jeu de cadres.

Edition janvier 2004

23242259.doc

Page 81 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 

Sélectionner l'un des cadres en cliquant dans l'une des 3 régions définies. Le curseur doit être actif. Puis aller dans Fichier document HTML ainsi créé. > Enregistrer sous pour donner un nom explicite au

 

Répéter l'opération pour chaque cadre. Enregistrer le jeu de cadres en cliquant sur l'option fichier > Enregistrer le jeu de cadre sous ; donner un nom explicite au document HTML ainsi créé.

Dans l'exemple en cours, 4 pages HTML ont été enregistrées : 3 pages correspondants aux cadres (gauche.htm, haut.htm, partie_centrale.htm ) et 1 page correspondant au jeu de cadres ( jdc.htm ) Dorénavant, il suffira nécessaire d'utiliser la fonction Fichier > Enregistrer tout pour sauvegarder les modifications effectuées. Les 4 pages seront alors sauvegardées simultanément.

Edition janvier 2004

23242259.doc

Page 82 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Edition janvier 2004

23242259.doc

Page 83 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.8.2 Propriétés des cadres
Pour sélectionner les différents cadres et le jeu de cadres, il peut être pratique d'utiliser l'inspecteur avancé des cadres, en cliquant dans les différentes régions pour les cadres et sur le pourtour pour le jeu de cadres.

2.8.2.1 Propriétés d'un cadre

Sélectionner un cadre comme expliqué précédemment et observer l'inspecteur des propriétés. 1 2 3 4

7 , 8

6

5

1. Nom du cadre : il détermine le nom du cadre courant. Ce nom sera utilisé comme référence dans un script ou comme cible de lien hypertexte. Voici quelques règles de nommage à suivre : 2. Le nom du cadre doit être en un seul mot. 3. Les caractères de soulignement (_) sont autorisés, mais les traits d'union (-), les points (.) et les espaces sont refusés 4. Les noms des cadres doivent commencer par une lettre, jamais par un chiffre. 5. Il est conseillé de ne pas utiliser de mots réservés en JavaScript (par exemple "top" ou "navigator") comme noms de cadres.

Edition janvier 2004

23242259.doc

Page 84 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

6. Src détermine le document source du cadre. Indiquer un nom de fichier, ou cliquer sur l'icône du dossier pour trouver le fichier source et le sélectionner. 7. Bordures contrôle la bordure du cadre courant. Les options sont Oui, Non et Par défaut. Ce choix a la priorité sur la configuration de bordures par défaut définie pour le jeu de cadres. La valeur par défaut de la plupart des navigateurs est Oui. Pour désactiver une bordure, tous les cadres adjacents doivent être paramétrés sur Non (ou paramétrés sur Par défaut avec le jeu de cadres parent paramétré sur Non). 8. Couleur de bordure définit une couleur de bordure pour toutes les bordures du cadre courant. Cette configuration annule la couleur de bordure définie par défaut pour le jeu de cadres. 9. Ne pas redimens. bloque la taille du cadre courant, et empêche l'utilisateur de déplacer la bordure du cadre et de le redimensionner. Il sera toujours possible de redimensionner le cadre dans la fenêtre du document. Mais si cette option est activée, un visiteur ne pourra pas redimensionner ce cadre dans son navigateur. 10. Défiler détermine si la barre de défilement apparaît lorsqu'il n'y a pas assez de place pour afficher tout le contenu du cadre courant. La valeur par défaut de la plupart des navigateurs est Auto. 11. Largeur de marge définit (en pixels) la largeur des marges droite et gauche (l'espace entre la bordure du cadre et le contenu). Hauteur de marge définit (en pixels) la hauteur des marges supérieure et inférieure du cadre (l'espace entre la bordure du cadre et le contenu).

2.8.2.2 Propriétés d'un jeu de cadres

1

2

4

3

1. Dans le menu déroulant Bordures, indiquer si des bordures doivent marquer les limites des cadres lorsque le document est affiché dans un navigateur. Pour afficher les bordures, cliquer sur Oui. Pour ne pas afficher les bordures, cliquer sur Non . 2. Dans le champ Couleur , saisir la valeur hexadécimale de la couleur désirée pour la bordure, ou se servir-vous de la pipette pour sélectionner une couleur. 3. Pour sélectionner les options de taille du cadre, cliquer sur les onglets de la zone Sélection lignes / col. pour sélectionner une ligne, ou sur les onglets du haut pour sélectionner une colonne. Dans le champ Valeur , saisir ensuite un chiffre pour spécifier la taille de la colonne ou de la ligne, et dans le champ Unités , définir l'unité de mesure de ce chiffre. 4. Dans le champ Larg. de bordure, taper un chiffre pour spécifier la largeur en pixels des bordures du jeu de cadres courant. Saisir la valeur 0 pour spécifier aucune bordure.

Edition janvier 2004

23242259.doc

Page 85 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.8.3 Exemple de page HTML avec cadres

 Reprendre l'exemple décrit en 2.8.1
Sélectionner l'inspecteur des propriétés pour les 3 cadres créés puis rentrer les paramètres suivants : cadre de gauche (menu)

cadre de haut (en tête ou titre)

cadre central (page principale)

Enfin, l'inspecteur des propriétés du jeu de cadres accessible en cliquant dans l'inspecteur avancé:

De manière semblable aux tableaux, les cadres voient leur largeur s'exprimer en pourcentage (taille relative).

Edition janvier 2004

23242259.doc

Page 86 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Ecrire quelques lignes de texte afin de facilement pouvoir différencier les cadres.

 

Enregistrer l'ensemble des cadres ainsi que le jeu de cadres (menu Enregistrer tout ) puis visualiser le résultat dans Internet Explorer ( F 12 )

Fichier

/

Le jeu de cadres est réalisé.

Edition janvier 2004

23242259.doc

Page 87 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.8.4 Rediriger les liens dans les jeu de cadres

 Reprendre l'exemple décrit en 2.8.1 et 2.8.3. Poser un lien dans le cadre de gauche vers une
page HTML à l'aide de l'inspecteur des propriétés comme précisé dans le chapitre Liens (Cf 2.6).

 L'astuce à utiliser consiste alors à sélectionner dans la cible du lien l'option
nouvelle page HTML va donc s'ouvrir dans le cadre central mainFrame.

mainFrame. La

Les deux autres cadres ne sont pas modifiés, ni rechargés.

Edition janvier 2004

23242259.doc

Page 88 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 Pour ouvrir cette même page dans le cadre "haut", il faut sélectionner la cible TopFrame.  Pour ouvrir la nouvelle page dans le cadre de gauche, il faut sélectionner la cible LeftFrame , ou dans cet exemple, _Self puisque le lien se trouve aussi dans la page située dans le cadre de gauche (LeftFrame).  Pour ouvrir la page dans une nouvelle fenêtre de navigateur supplémentaire, il faut utiliser la cible _Blank.  Pour ouvrir la page dans la même fenêtre de navigateur en abandonnant la structure en cadres, il faut sélectionner la cible _Top. En conclusion, on peut constater qu'en utilisant judicieusement les cibles, il est possible de rediriger facilement les liens lorsque l'on travaille sur des pages Web utilisant les cadres.

Edition janvier 2004

23242259.doc

Page 89 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.9 Feuilles de styles
(Cf le document : "langage HTML : pages statiques" complément 3).

2.9.1 Créer une feuille de style externe
L'interface de Dreamweaver ne permettant pas de créer directement une feuille de style, il faut donc en réaliser une nouvelle comme suit :

 

En utilisant l'explorateur de fichiers, aller dans le répertoire styles puis faire droit / nouveau > document texte . Renommer enfin ce document en style.css

click

Maintenant dans Dreamweaver, aller dans le menu Modifier Feuille de style.

Texte

>

Style CSS

>

Edition janvier 2004

23242259.doc

Page 90 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 

Puis dans la fenêtre Modifier Feuille de style ,

cliquer sur le bouton

lien

dans la fenêtre Ajouter une feuille de style externe cocher le bouton radio lien puis Parcourir. puis valider.

Sélectionner le fichier style.css

La feuille de style externe vient, par cette procédure, d'être liée à notre la page html en cours de réalisation. Toutes les références aux styles CSS seront donc notées dans un fichier de style.css externe à la page html. Cette technique est surtout utile si l'on fonctionne à l'échelle d'un site internet comportant de nombreuses pages HTML toutes liées au même fichier .css externe. Une modification au niveau de la feuille de style impacte donc toutes les pages du site liées.

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 91 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.9.1 Créer un style

Aller dans le menu Texte > Style CSS > Modifier Feuille de style, puis sélectionner le fichier externe style.css puis cliquer sur Modifier

Cliquer ensuite sur Nouveau

Nommer le nouveau style de façon explicite puis confirmer

Edition janvier 2004

23242259.doc

Page 92 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Les éléments ou propriétés de style sont classés par Dreamweaver en différentes catégories ou familles : type, arrière-plan, bloc … Type :

 Police permet de définir la famille de polices (ou la série de familles) de ce style. Les navigateurs affichent le texte en utilisant la première police installée sur l'ordinateur de l'utilisateur au sein de la combinaison de polices choisie. Pour assurer la compatibilité avec Internet Explorer 3.0, utiliser une police Windows en premier.  Taille définit la taille du texte. On peut choisir une taille spécifique en cliquant sur une valeur et une unité de mesure, ou une taille relative.  Style permet de spécifier la variation Normal, Italique ou Oblique comme style de la police. La valeur par défaut est Normal.  Hauteur de ligne définit la hauteur de la ligne sur laquelle le texte est placé. Choisir Normal pour que la hauteur de ligne soit calculée automatiquement en fonction de la taille des caractères, ou indiquer une valeur fixe et une unité de mesure. Cet attribut n'est pas pris en charge par certains navigateurs, et provoque des problèmes dans Internet Explorer 3.0.  Décoration ajoute un effet de soulignement, de barre supérieure, de texte barré ou de clignotement du texte. La valeur par défaut pour le texte normal est Aucune. La valeur par défaut pour le texte des liens est Souligné.  Epaisseur applique aux caractères un niveau de graisse spécifié en valeur relative ou absolue. Le style Normal est équivalent à 400, Gras à 700.  Variante il est possible de permet de sélectionner une variation de police (petites capitales). Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.  Casse permet de mettre en capitale la première lettre de chaque mot de la sélection, ou de passer celle-ci en majuscules ou minuscules. Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.  Couleur définit la couleur du texte.

Edition janvier 2004

23242259.doc

Page 93 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Arrière plan :

 Couleur d'arrière-plan définit la couleur d'arrière-plan de l'élément.  Image d'arrière-plan définit l'image d'arrière-plan de l'élément.

 Répétition détermine si l'image d'arrière-plan doit être répétée  Fixation détermine si l'image d'arrière-plan reste fixe par rapport à sa position originale, ou défile avec le contenu. Noter que certains navigateurs font toujours défiler l'image avec son contenu. Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.  Position horizontale et Position verticale spécifient la position initiale de l'image d'arrière-plan par rapport à l'élément. Si la propriété Fixation est réglée sur Fixe, cette position est relative à la fenêtre du document, pas à l'élément. Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.

Edition janvier 2004

23242259.doc

Page 94 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Bloc :

 Espacement des mots permet de modifier l'espace entre les mots. L'espacement des mots peut être affecté par la justification du texte. On peut indiquer des valeurs négatives, mais le résultat final variera selon le navigateur. Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.  Espacement des lettres permet de modifier l'espace entre les caractères. Il est possible d'indiquer des valeurs négatives, mais le résultat final variera selon le navigateur. L'espacement des caractères défini ici a la priorité sur toute modification d'espacement entre les lettres provoquée par la justification. Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.  Alignement vertical permet de spécifier l'alignement vertical de l'élément, le plus souvent par rapport à son objet parent. Dreamweaver n'affiche cet attribut dans la fenêtre du document que lorsqu'il est appliqué à la balise IMG.  Alignement du texte détermine l'alignement horizontal du texte au sein de l'élément.  Retrait du texte permet d'indiquer un retrait de la première ligne du texte. Il est possible d' utiliser une valeur négative pour créer un retrait négatif, mais le résultat final variera selon le navigateur. Dreamweaver n'affiche cet attribut dans la fenêtre du document que lorsqu'il est appliqué aux éléments au niveau du bloc.  Espace blanc détermine la gestion des espaces au sein de l'élément. Choisir parmi les options suivantes : Normal réduit à un seul espace une suite éventuelle de plusieurs caractères d'espacement ; PRE gère les espaces comme si le texte était inséré à l'intérieur d'une balise <PRE> (tous les caractères d'espacement, - espaces, tabulations et retours chariot - sont respectés) ; Pas de retour spécifie que seul du texte peut être renvoyé à la ligne à l'apparition d'une balise <BR>. Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.

Edition janvier 2004

23242259.doc

Page 95 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Boite :

 Largeur et Hauteur définissent la taille de l'élément. Dreamweaver n'affiche cet attribut dans la fenêtre du document que lorsqu'il est appliqué aux images et aux calques.  Flottante sépare l'élément du flux de la page et le place sur la marge de page gauche ou droite. Les autres éléments sont affichés autour de l'élément flottant, suivant la méthode habituelle. Dreamweaver n'affiche cet attribut dans la fenêtre du document que lorsqu'il est appliqué à la balise <IMG>.  Effacer définit les côtés sur lesquels les calques ne sont pas autorisés. Si un calque apparaît du côté marqué dans Effacer, l'élément possédant cet attribut passera sous le cadre. Dreamweaver n'affiche cet attribut dans la fenêtre du document que lorsqu'il est appliqué à la balise IMG.  Remplissage définit la marge intérieure, c'est-à-dire l'espace préservé entre le contenu de l'élément et sa bordure (ou sa marge s'il ne comporte pas de bordure). Dreamweaver n'affiche cet attribut dans la fenêtre du document que lorsqu'il est appliqué à la balise <IMG>.  Marge définit la marge, c'est-à-dire l'espace préservé entre la bordure de l'élément (ou sa marge intérieure s'il ne comporte pas de bordure) et tout autre élément. Dreamweaver n'affiche cet attribut dans la fenêtre du document que lorsqu'il est appliqué aux éléments au niveau du bloc (paragraphes, en-têtes, listes, etc.).

Edition janvier 2004

23242259.doc

Page 96 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Bordure :

 Largeur détermine l'épaisseur de la bordure de l'élément. Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.  Couleur définit la couleur de la bordure. On peut indiquer une couleur différente pour chaque côté, mais le résultat final variera selon le navigateur. Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.  Style détermine le style de trait de la bordure, mais le résultat final variera selon le navigateur. Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.

Edition janvier 2004

23242259.doc

Page 97 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

Liste :

 Type détermine l'apparence des puces ou des nombres. Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.  Illustration de la puce permet de choisir une image personnalisée pour les puces. Cliquer sur Parcourir pour sélectionner une image, ou taper le chemin d'accès à celle-ci. Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.  Position permet de déterminer si les éléments de la liste s'alignent sur un retrait (extérieur) ou sur la marge (intérieur). Dreamweaver n'affiche pas cet attribut dans la fenêtre du document.

Edition janvier 2004

23242259.doc

Page 98 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.10 Formulaires 2.10.1 Généralités sur les formulaires
Les formulaires permettent de recueillir des informations auprès des utilisateurs. Les sondages, les bons de commande et les interfaces de recherche en sont des exemples courants. Pour le fonctionnement des formulaires, deux éléments sont nécessaires : le code HTML décrivant le formulaire et, soit une application côté serveur, soit un script côté client (ou les deux), pour traiter les informations que l'utilisateur saisit dans les champs du formulaire créé par le code HTML. On peut utiliser Dreamweaver pour créer des formulaires, pour leur ajouter des objets et pour valider (à l'aide de comportements) les informations indiquées par l'utilisateur. L'utilisation d'un éditeur de texte pour rédiger le script ou l'application qui permettent de traiter les données renvoyées par le formulaire est nécessaire. (Perl est le langage de script le plus utilisé pour le traitement des formulaires ; les alternatives sont C, Java, PHP et même JavaScript (coté client seulement)).

2.10.2 Insertion des éléments de formulaires
Les éléments de formulaires sont disponibles à partir du menu formulaire. Insertion > Objet de

Ou insérables directement dans la fenêtre document à partir de la palette Formulaires.

Objets

>

Edition janvier 2004

23242259.doc

Page 99 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.10.3 Propriétés des éléments de formulaires
2.10.3.1 Les champs textes

1

2

3

4

5

1. 2.

Champ texte affecte un nom au champ. A chaque champ Texte doit correspondre un nom unique. Larg. de caract. définit le nombre maximum de caractères pouvant être affichés dans le champ. Il peut être inférieur au nombre indiqué dans la propriété Nbre caract. max., qui définit le nombre maximum de caractères pouvant être saisis dans le champ. Nbre caract. max/Nbre lignes Pour les champs texte à une ligne, définit le nombre maximum de caractères pouvant être saisis dans le champ ; pour les champs texte à plusieurs lignes, définit la hauteur du champ. La propriété Nbre caract. max. permet de limiter à 5 le nombre de caractères des codes postaux, par exemple, ou à 10 le nombre de caractères des mots de passe.  Le choix du type Ligne simple produit une balise <INPUT> dont l'attribut TYPE a pour valeur TEXT. Le paramètre Larg. de caract. est mappé sur l'attribut SIZE et le paramètre Nbre caract. max. sur l'attribut MAXLENGTH.  Choix du type Mot de passe produit une balise <INPUT> dont l'attribut TYPE a pour valeur PASSWORD. Les paramètres Larg. de caract. et Nbre caract. max. sont mappés sur les mêmes attributs que dans les champs de texte à une ligne. Lorsqu'un utilisateur saisit un mot de passe dans un champ Texte de type M ot de passe , celui-ci est affiché sous forme d'astérisques ou de puces, pour des raisons de sécurité.  Le choix du type M ulti lignes produit une balise <TEXTAREA>. Le paramètre Larg. de caract. est mappé sur l'attribut COLS et le paramètre Nbre lignes sur l'attribut ROWS.

3.

4. 5.

Type définit le type de champ, à savoir Ligne simple , M ulti lignes ou M ot de passe . Val. init. affecte la valeur affichée dans le champ lors du chargement initial du formulaire.

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 100 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.10.3.2 Les boutons radio

1

2

3

1. 2.

Bouton radio affecte un nom au bouton radio. Tous les boutons radio appartenant à un groupe doivent avoir le même nom. Valeur définit la valeur du bouton lorsque celui-ci est activé. Il s'agit de la valeur qui est transmise à l'application côté serveur (un script CGI, par exemple) lorsque l'utilisateur envoie le formulaire. On doit affecter une valeur différente à chaque bouton radio d'un groupe. Etat initial détermine si le bouton doit être activé ou désactivé lors du chargement initial du formulaire. Un seul bouton d'un groupe peut être activé initialement.

3.

Code source correspondant :

A noter que les boutons radio sont quasiment toujours utilisés par groupes (même nom mais valeurs différentes).

Edition janvier 2004

23242259.doc

Page 101 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.10.3.3 Les cases à cocher

1

2

3

1. 2.

Case à cocher affecte un nom à la case à cocher. Valeur définit la valeur de la case à cocher lorsqu'elle est activée (cochée). Il s'agit de la valeur qui est transmise à l'application côté serveur (script CGI, par exemple) lorsque l'utilisateur envoie le formulaire. Etat initial précise si la case à cocher doit être activée ou désactivée lors du chargement initial du formulaire.

3.

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 102 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.10.3.4 Les listes et les menus

1

2

4

3

1. 2.

Liste/Menu affecte un nom à la liste ou au menu. Cette propriété est obligatoire et le nom attribué doit être unique. Type indique si l'objet est un menu déroulant ou une liste déroulante. Dans le cas d'une liste, on peut en définir la longueur (nombre d'éléments affichés à la fois) et indiquer si l'utilisateur peut sélectionner plusieurs éléments. Valeurs de la liste ouvre la boîte de dialogue Valeurs initiales de la liste pour permettre d'ajouter des éléments à la liste ou au menu déroulant. Chaque élément de la liste possède un libellé (qui sera affiché dans la liste) et une valeur (qui sera envoyée à l'application de destination lorsque l'élément correspondant sera sélectionné). Si aucune valeur n'est spécifiée, le libellé sera envoyé à l'application à sa place. Sélections : permet de choisir les éléments de liste qui seront initialement sélectionnés et affichés

3.

4.

Code source correspondant :

Edition janvier 2004

23242259.doc

Page 103 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

2.10.3.5 les boutons

1

2

3

1.

Bouton affecte un nom au bouton. Les deux noms réservés Submit (Envoyer) et Reset (Rétablir) indiquent au formulaire que les données qu'il contient doivent être envoyées à l'application ou au script auxquels elles sont destinées ou que les valeurs initiales de tous les champs du formulaire doivent être rétablies. Etiquette définit le texte à afficher sur le bouton. Action définit ce qui se produit lorsque l'utilisateur clique sur le bouton. Il est possible de faire en sorte qu'un clic sur le bouton efface le contenu du formulaire dans lequel il apparaît, ou que le contenu du formulaire soit soumis au traitement, ou qu'il ne se passe rien. Si on sélectionne Envoyer le formulaire , le bouton prend automatiquement le nom Submit. Si on sélectionne Rétablir le formulaire , le bouton prend automatiquement le nom Reset. Si on sélectionne Aucune, il ne se passe rien lorsque l'utilisateur clique sur le bouton.

2. 3.

Code source correspondant :

Les autres éléments de formulaires tels que les champs cachés, champs fichiers ou champs images ne seront pas explicités dans ce document, leur emploi nécessite des bases en programmation dans des langages comme PHP, ou ASP. De la même façon, il ne sera enseigné dans ce document comment on traite un formulaire.

Edition janvier 2004

23242259.doc

Page 104 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

3 . Annexes
3.1 Commentaires sur les différentes versions
La version utilisée est la version 3.

3.1.1 Apports de Dreamweaver 3
Les nouvelles fonctionnalités de Dreamweaver 3 améliorent le travail sur le code HTML et la gestion des sites, permettent d'ajouter des éléments supplémentaires (caractères spéciaux, barres de navigation, cartes graphiques), simplifient le déroulement du travail, et permettent de personnaliser Dreamweaver et de lui ajouter des extensions.

Modification du code HTML : Le mini-éditeur HTML, Quick Tag Editor, permet d'ajouter, supprimer ou modifier rapidement du code HTML sans devoir sortir de la fenêtre du document. Les styles HTML permettent de définir des styles en utilisant les balises standard HTML (d'où une compatibilité totale avec tous les navigateurs). Par exemple, les balises B et FONT, plutôt que de recourir aux feuilles de style CSS (Cascading Style Sheets). La palette de styles de Dreamweaver 2.0 est désormais appelée palette de styles CSS. L'inspecteur de code source HTML amélioré permet d'afficher les numéros de lignes, de sélectionner des lignes entières de code depuis la marge, et de glisser-déposer des sélections HTML. On peut aussi empiler l'inspecteur de source HTML avec les autres palettes flottantes. Les modèles de balises propriétaires améliorés vous permettent d'indiquer que Dreamweaver doit ignorer le contenu de certains types de balises propriétaires, telles que les balises ASP (Active Server Pages) de Microsoft et les balises de ColdFusion. On peut aisément ajouter une prise en compte d'autres balises propriétaires. De plus, de nouvelles options de réécriture du code HTML permettent de décider si Dreamweaver codera certains caractères dans certains contextes.

Création et modification d'objets et d'éléments de page : Les objets caractères sont une collection de caractères spéciaux et de symboles couramment utilisés (comme ©, ® et ). Ils sont directement accessibles depuis la palette Objet. Les objets Cadre permettent de créer rapidement et aisément des jeux de cadres prédéfinis. D'autres objets permettent d'ajouter aisément des barres de navigation, des menus de reroutage, des liens de messagerie, des dates, et de nouveaux objets multimédias (tells que des animations Flash 4 et Shockwave 7, ou des objets Generator) aux documents. Les cartes réactives incorporées à des images permettent d'ajouter et redimensionner des zones réactives, de modifier des liens et leurs cibles et d'appliquer des comportements, tout ceci sans sortir de la fenêtre du document.

Edition janvier 2004

23242259.doc

Page 105 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

3.1.2 Apports de Dreamweaver 4
Modification du code améliorée La barre d'outils Dreamweaver vous permet de gérer l'affichage d'une page en choisissant le mode Création, le mode Affichage de code ou un affichage combinant les deux modes. La barre d'outils offre un accès simplifié aux fonctions les plus courantes (Aperçu dans le navigateur, Design Notes , etc.). Le mode Affichage de code offre un nouveau moyen de visualiser le code source HTML directement dans la fenêtre de document de Dreamweaver. On peut également modifier les documents nonHTML, tels les fichiers JavaScript et XML, directement dans Dreamweaver en mode Affichage de code. Deux éditeurs de codes intégrés à la pointe de la technologie sont désormais inclus dans Dreamweaver : le mode Affichage de code et l'inspecteur de code. Le menu O ptions de ces deux éditeurs permet, entre autres, de configurer les retours à la ligne automatiques, les retraits du code, la coloration de la syntaxe interactive, etc. Le panneau Référence est un outil de référence rapide pour HTML, JavaScript et CSS. Il propose des informations sur les balises spécifiques utilisées dans le mode Affichage de code (ou dans l'inspecteur de code). . Le menu déroulant Navigation dans le code permet de sélectionner le code pour les fonctions JavaScript dans une page. Grâce à ce menu, on peut parcourir rapidement le code JavaScript lorsque vous travaillez en mode Affichage de code. Le Débogueur JavaScript permet de déboguer les documents JavaScript dans Dreamweaver. Par exemple, il est possible de définir des points d'arrêt pour contrôler le code à tester. Conception des pages simplifiée Le mode Mise en forme permet de concevoir rapidement des pages web en traçant des rectangles (tableaux ou cellules) auxquels on peut ajouter du contenu. Les modèles améliorés simplifient l'identification des zones modifiables dans un fichier de modèle. Les modèles affichent maintenant un onglet qui contient le nom de la région modifiable et un cadre de délimitation. Les feuilles de style peuvent à présent être définies dès que l'on créé un nouveau style. Il est également possible de rattacher facilement une feuille de style CSS existante à un bouton dans le panneau Styles CSS. Intégration améliorée Les boutons et le texte Flash sont maintenant intégrés directement à Dreamweaver. Il est possible de choisir parmi un ensemble de boutons Flash prédéfinis et les insérer dans le document. Le découpage Roundtrip permet de travailler de façon transparente dans Dreamweaver et Fireworks 4. Il est possible de modifier et mettre à jour les images et les tableaux HTML importés depuis Fireworks. Le sélecteur de couleurs sécurisées pour le web permet d'établir facilement une correspondance entre les couleurs et les graphiques. D'un simple clic, on peut sélectionner une couleur n'importe où

Edition janvier 2004

23242259.doc

Page 106 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

sur le bureau : le sélecteur de couleurs s'aligne automatiquement sur la couleur sécurisée pour le web la plus proche. Rationalisation du déroulement des opérations Le panneau Actifs permet de gérer les actifs du site. Il est possible d' afficher l'ensemble des images, couleurs, URL externes, scripts, animations Flash, Shockwave et QuickTime, modèles et éléments de bibliothèque dans un emplacement centralisé. Une version améliorée de Design Notes permet d'associer des remarques à un fichier pour effectuer le suivi des modifications ou échanger des idées sur les problèmes de développement avec les autres membres de l'équipe. La messagerie intégrée permet de communiquer avec les autres membres d'une développement. équipe de

La génération de rapports de site permet de recourir à différents rapports prédéfinis pour tester les problèmes courants aux documents HTML (documents sans titre, balises alt manquantes, etc.). Interface utilisateur commune Les raccourcis clavier ont une nouvelle interface, commune à tous les produits de publication sur le web de Macromedia. Cette interface permet de modifier les raccourcis clavier existants, d'en créer de nouveaux pour les éléments des menus et de supprimer ceux dont on a pas besoin. La gestion des fenêtres a été améliorée : une fenêtre est maintenant ancrée sur sa position. Lorsque l'on ouvre une nouvelle fenêtre, Dreamweaver l'empêche de chevaucher les panneaux visibles.

3.1.3 Apports de Dreamweaver MX

A noter aussi que la version MX de Dreamweaver fusionne la version précédente de Dreamweaver avec sa version Ultradev. L'intégration d'éléments PHP, ASP.NET, ColdFusion ou l'interfaçage avec une base de données y est donc pleinement prise en compte et sérieusement améliorée.

Edition janvier 2004

23242259.doc

Page 107 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

3.2 Sous-menu préférences
Ce sous-menu offre la possibilité de modifier nombre de comportements par défaut de l'éditeur. Il rassemble les options par catégories.

 Aperçu dans le navigateur Les préférences pour Aperçu dans le navigateur affichent les navigateurs actuellement définis comme principal et secondaire.  Préférences de la barre d'état Ces préférences définissent les options applicables à la barre d'état qui apparaît à la base de la fenêtre du document (vitesse de chargement, taille de la fenêtre).  Préférences de correction HTML Les préférences de correction HTML déterminent le comportement de Dreamweaver à l'ouverture d'un document HTML. Elles sont sans effet lorsque l'on modifie du code HTML dans l'inspecteur de source HTML. Si on désactive ces options de correction, Dreamweaver affiche les éventuels éléments non valides dans la fenêtre du document, pour le code HTML qu'il aurait normalement corrigé. Si on importe un document HTML depuis MS Word, on peut utilise la commande Nettoyer HT M L W ord pour supprimer le code HTML inutile.  Utilisation d'un éditeur multimédia externe On peut double-cliquer sur l'un des fichiers de la fenêtre Site pour le modifier. Bien sûr, s'il s'agit d'un fichier HTML, il s'ouvrira dans Dreamweaver. Mais pour tout autre type de fichier, tel qu'un fichier image ou Flash, l'éditeur externe approprié, par exemple Fireworks ou Flash, sera exécuté. Chaque type de fichier est associé à un plusieurs éditeurs externes. L'éditeur qui est exécuté lorsque vous double-cliquez sur le fichier dans la fenêtre Site est appelé l'éditeur principal.  Les éléments invisibles Les préférences des éléments invisibles permettent d'indiquer les éléments qui apparaissent dans la fenêtre du document. Les éléments invisibles (scripts, commentaires, ancres nommées, etc.) sont représentés par des marqueurs dans la fenêtre du document. L'affichage des éléments invisibles permet de sélectionner leurs marqueurs, puis de modifier leurs propriétés dans l'inspecteur de propriétés.

Edition janvier 2004

23242259.doc

Page 108 sur 109

Cours Applicatifs

INTERNET

Editeur Dreamweaver

 Préférences des palettes flottantes On peut utiliser les préférences des palettes flottantes pour indiquer les inspecteurs et les palettes qui seront toujours visibles devant la fenêtre du document, et ceux qui pourront être masqués par elle. On peut aussi utiliser également les préférences pour indiquer les palettes et les inspecteurs qui doivent apparaître dans le lanceur. (Les éléments sélectionnés pour apparaître dans le Lanceur apparaissent aussi dans le Mini-lanceur.)  Polices / Encodage Les préférences de polices et d'encodage permettent de définir un codage de polices par défaut pour les nouveaux documents, et de définir les polices que Dreamweaver utilise pour afficher chaque codage de police. Le codage d'un document détermine la façon dont ce document est affiché dans un navigateur. Les paramètres de polices de Dreamweaver permettent d'utiliser un texte affiché suivant la police et la taille de police de son choix, sans affecter l'aspect qu'aura le document dans un navigateur.

 Calques - Vue d'ensemble Un calque est un conteneur de code HTML, généralement délimité par la balise DIV ou SPAN, et que l'on peut positionner n'importe où dans une page. Les calques peuvent contenir du texte, des images, des plug-ins et même d'autres calques - tout élément que l'on peut insérer dans le corps d'un document HTML peut être placé dans un calque. Les calques permettent aux concepteurs de pages Web d'avoir un contrôle total, au pixel près, du positionnement des éléments d'une page. En plaçant les éléments de la page dans des calques, on peut faire apparaître des objets devant d'autres, ainsi que déplacer ou cacher des objets. Il est possible également de créer un scénario pour déplacer un ou plusieurs calques simultanément à l'intérieur de la page. Dans Dreamweaver, il existe deux formats de calques permettant de positionner du contenu sur une page : Les calques CSS et les calques Netscape. Les calques CSS (également appelés éléments CSS-P) positionnent le contenu sur la page à l'aide des balises DIV et SPAN. Les propriétés des calques CSS sont définies par le document Positioning HT M L Ele m e nts with Cascading Style Sheets du W3C (World Wide Web Consortium). Les calques Netscape positionnent le contenu sur la page à l'aide de balises uniquement utilisées par Netscape, LAYER et ILAYER. Les propriétés des calques Netscape sont définies par un format de calque propre à Netscape. Microsoft Internet Explorer 4+ et Netscape Navigator 4+ acceptent tous les deux les calques créés à l'aide des balises DIV et SPAN. Par contre, seul Navigator accepte les calques créés avec les balises LAYER et ILAYER. Les versions précédentes de Microsoft Internet Explorer et de Netscape Navigator afficheront le contenu des calques, mais il ne sera pas positionné. Les propriétés de positionnement incluent les coordonnées X et Y (respectivement haut et gauche), l'index Z (également appelé ordre de superposition), et la visibilité. Les éléments positionnés peuvent être définis avec les balises DIV, SPAN, LAYER et ILAYER dans Dreamweaver. Ainsi la faible portabilité des calques Netscape fait qu'ils sont peu utilisés en développement web grand public. Les autres éléments non commentés sont d'une importance secondaire.

Edition janvier 2004

23242259.doc

Page 109 sur 109

Sign up to vote on this title
UsefulNot useful