Cration de pages Web avec Dreamweaver 3 -...

48
FELSI 2010 Conception de pages Web avec Dreamweaver CS3 Y. Mine 1

Transcript of Cration de pages Web avec Dreamweaver 3 -...

FELSI

2010

Conception de pages Web avec Dreamweaver CS3

Y. Mine

1

Préambule 1 Introduction 2 Eléments fondamentaux de Dreamweaver CS3 2.1 les menus 2.2 la fenêtre document

l’espace de travail les règles la grille les ascenseurs la barre d’état le menu préférences

2.3 le menu contextuel 2.4 la palette des objets 2.5 l’inspecteur des propriétés 2.6 l’inspecteur HTML

3 Environnement de travail 3.1 la carte du site 4 Création d’un site 4.1 construction d’une page 4.1.1 l’arrière-plan 4.1.2 les liens 4.1.3 l’encodage 4.1.4 les polices de caractères 4.1.5 les couleurs 4.1.6 les styles 4.1.7 les alignements 4.1.8 les retraits 4.1.9 les listes 4.1.10 les images 4.2 les liens 4.3 enregistrement des documents 4.3.1 prévisualisation 4.4. la gestion des sites 5 Options graphiques 5.1 les images survolées 5.2 les cartes graphiques 5.3 l’affichage des pages 5.4 insertion de tableaux 5.5 les données tabulaires 5.6 les formulaires 5.6.1 champ de texte ligne unique 5.6.2 champ de texte multi-lignes 5.6.3 champ masqué 5.6.4 case à cocher 5.6.5 bouton radio 5.6.6 menu contextuel 5.6.7 boutons d’envoi 6 Les feuilles de style 7 L’aide en ligne 8 Les comportements 9 Conception de frames dans Dreamweaver

2

Avant de commencer à réaliser les pages … Créer un site Web à caractère professionnel est un geste technique final, qui doit être précédé d’une réflexion et d’une préparation minutieuse du travail à réaliser. Marche à suivre : 1/ Préparation

• Choisir un thème à développer – ou – répondre à une demande

• Définir avec exactitude les objectifs poursuivis (promotion commerciale, présence sur la toile, présentation d’un hobby,…)

• Déterminer le public cible : adulte, adolescent, enfants, …

En fonction de ces 3 points : délimitation de la matière première qui sera exploitée pour le site. 2/ Réunir la matière première

• documentation écrite (livres, revues,…) et virtuelle (fichiers)

• illustrations (photos, dessins, graphiques,…)

• Créations personnelles 3/ En fonction du volume et du contenu de la documentation rassemblée, faire la découpe en pages et en niveaux.

• Chaque page signifie un fichier html, les niveaux représentant la hiérarchie d’organisation de l’information.

• Le niveau 1, qui est représenté par la page d’accueil, est le plus général, tandis que les niveaux 2 et 3 vont donner accès à de l’information de plus en plus détaillée.

• Dessiner les pages en indiquant les liens prévus. (exemple) • Attribuer un nom significatif à chaque fichier html

Accueil

A B C

A1 A2 A3 B1 B2 C1 C2 C3

Niveau 1 : accueil

Niveau 2 : premier niveau de détail

Niveau 3 : deuxième niveau de détail Les liens sont toujours (ou presque) verticaux. Le besoin de liens horizontaux implique très souvent une mauvaise découpe de l’information.

3

Nommer les fichiers (html, jpeg, gif,…) de manière évocatrice et rationnelle : p ;ex ; en français, maximum 8 caractères, pas de caractère accentué ni de caractère spécial ( ‘ « ç é à …), pas de majuscule. Toujours raisonner et travailler en fonction des objectifs déterminés au préalable. Si une modification des objectifs est nécessaire, il faut alors recommencer toute la réflexion. 4/ Quand le schéma rencontre les objectifs, on peut commencer à créer les pages html selon les critères définis plus haut.

• Créer une directory dans laquelle seront placés tous les fichiers relatifs au site • Créer toutes les pages, les nommer et les sauver • Y insérer tous les hyperliens • Vérifier le bon fonctionnement de ce « squelette » • Garnir les pages avec l’information voulue : texte, photos, dessins, animations

diverses,… • Tester le site sur les différents navigateurs et en différentes résolutions

Attention :

Les étapes 1 à 3 doivent faire l’objet d’un document papier, qui sera la base de travail ainsi que le « story book » du site. Ce n’est que quand il sera terminé,

corrigé et approuvé que la conception des fichiers pourra commencer.

Les effets spéciaux (Flash, Java, JavaScript, ActiveX,…) Ils sont destinés à embellir les pages et à y attirer l’attention. Ils ne doivent pas nuire à leur lisibilité ni aux temps de chargement. En conséquence, utilisez-les seulement quand ils apportent un réel « plus » aux pages et pas dans le seul but de garnir. C’est le fond de votre site et lui seul qui fera revenir les visiteurs.

Propriété intellectuelle (copyright) Il faut proscrire la copie de textes, photos et autres objets graphiques sauf si ils sont expressément déclarés libres de droits ou si vous disposez de l’autorisation pour le faire. En bref, pas de copier-coller sauvage. L’idéal est de réaliser soi-même les photos et objets graphiques que l’on met en ligne et d’écrire le texte. Dans le cas d’un site commandé, le contenu pourra être celui apporté par le client. Il ne pourra servir alors que pour ce seul travail.

4

1 - Introduction Dreamweaver est un éditeur HTML: Hyper Text Markup Language en mode WySIWyG (What you see is what you get); qui permet de réaliser des pages web (html) et qui donne directement une idée de ce que sera la page, mais qui impose la visualisation du résultat dans un navigateur (via la touche F12). Il permet en outre de gérer un site et de le mettre sur le réseau, même si il existe des outils plus appropriés à cet effet. Un site est un ensemble de fichiers html, d’objets graphiques (jpeg, gif, png), de fichiers divers, de codes javaScript, d’Applets Java, … liés entre eux par des liens hypertexte. Le fichier correspondant à la page de départ (ou page d’accueil (home page)) sera nommé par convention index.htm (ou html). Cette pratique permet de simplifier l’adresse du site : taper http://www.yes.com/index.htm ou http://www.yes.com/ fera charger automatiquement cette même page index.htm dans le navigateur.

Très important,

en HTML, on n’a jamais la maîtrise totale de ses documents Internet Explorer, Chrome et Netscape coexistent dans l’environnement. Des différences de réaction et d’affichage sont systématiques suivant l’emploi de l’un ou l’autre de ces navigateurs. Certains sites affichent un avertissement qui informe le visiteur qu’il a été optimisé pour l’un ou l’autre de ces programmes. Vu que nous allons développer des pages pour tout le monde et pas seulement pour les utilisateurs d’un programme spécifique, on veillera toujours à créer des pages également lisibles par ces 3 principaux browsers et à les tester soigneusement dans les différents environnements et sur différentes versions.

5

2 - Eléments fondamentaux de Dreamweaver • Les menus • La fenêtre document • Le menu contextuel • La palette des objets • L’inspecteur des propriétés • L’inspecteur HTML

2.1 Les menus Comme tout logiciel, Dreamweaver comporte une série de menus, classiques (Fichier, Edition, Affichage, …), ou propres à la conception web.

6

7

8

9

10

2. 2 La fenêtre document Il s’agit de l’espace de travail principal du logiciel. C’est dans cet espace que s’insèrent les différents éléments en mode WISIWIG. Les différents composants de la fenêtre document sont : • L’espace de travail • Les règles • La grille • Les ascenseurs • La barre d’état • Les préférences L’espace de travail (en blanc sur l’exemple ci-dessous) est le seul élément de la fenêtre document qui sera visible dans un navigateur

11

Les 3 boutons « code », « fractionner » et « création » (cerclés de rouge) permettent de choisir l’affichage html, combiné (comme sur cet exemple) ou wysiwyg. Combiné signifie que l’on a sous les yeux les 2 « versions » de la page, celle wysiwyg et celle en code html. Le volet qui les sépare est mobile.

12

Les règles Les paramètres en sont spécifiés via les sous-commandes de « Affichage : Règles ». Afficher permet de rendre les règles visibles. Rétablir origine permet de replacer l’origine des règles (0,0) dans le coin supérieur gauche de la page. Pixel, Pouce et Centimètre permettent de définir l’unité employée par les règles. La plupart du temps, les règles sont échelonnées en pixel qui est l’unité de base du web. Les règles sont affichées sur notre exemple. La grille

Les paramètres de grille sont spécifiés via les sous-commandes de « Affichage : Grille ». « Afficher » permet de rendre la grille visible « Aligner sur » permet de forcer l’alignement des calques sur la grille « Modifier » permet de régler la grille (espacement, couleur,…) Les cases « Grille visible » et « Alignement » ont respectivement le même effet que «

Affichage :Grille : Afficher » et « Affichage :Grille :Aligner sur ». La grille n’est pas affichée sur notre exemple. Les ascenseurs permettent la navigation verticale et horizontale à l’intérieur de la fenêtre. La présence d’un ascenseur horizontal est à proscrire. Organisez vos pages (via des tableaux ou des div) de manière à ce qu’ils ne soient jamais nécessaires. La barre d’état de la fenêtre document comprend, de gauche à droite :

• Mini-laceur : Il représente les palettes du logiciel sous forme d’icônes. • La liste dimension de fenêtre : elle permet de donner une dimension précise à l’espace de

travail de la fenêtre document afin de simuler l’affichage sur différents écrans. Il est possible de préciser d’autres dimensions que celles pré-installées dans la liste via la commande « Modifier les tailles » de cette même liste qui ouvre la barre d’état des préférences du logiciel.

• Indicateur de téléchargement : il affiche deux valeurs. La première détermine la taille de la

page (y compris les éléments graphiques ou interactifs), la seconde le temps de téléchargement évalué en fonction de la vitesse de modem spécifiée dans la zone d’entrée Vitesse de connexion de la catégorie Barre d’état du logiciel.

13

Le menu « préférences »

Ce menu permet de régler de très nombreuses options de réaction du programme.

2.3 Le menu contextuel

Un menu contextuel apparaît lors d’un Ctrl-Clic (Mac) ou clic droit (Windows) sur un élément présent dans l’espace de travail de la fenêtre document. Il permet un accès plus rapide aux fonctions.

14

2.4 La palette des objets

Elle regroupe la majorité des éléments à insérer, groupés par catégorie sous 7 onglets.

Les catégories sont : • Commun qui gère les objets de base (insérer tableau, photo, roll-over, ligne,…) • Mise en forme des tableaux, cadres et div • Formulaire qui gère les éléments de formulaires • Données, qui gère les relations avec les bases de données • Spry – voir l’encadré ci-dessous • Texte, qui gère la mise en forme des textes • Favoris – rubrique à garnir soi-même selon ses besoins et ses habitudes de travail

Présentation des effets Spry Les effets Spry sont des améliorations visuelles applicables à pratiquement n'importe quel élément d'une page HTML à l'aide de JavaScript. Ces effets sont souvent utilisés pour surligner des informations, créer des transitions animées ou modifier visuellement un élément de page pendant un certain délai.

15

Remarque : pour appliquer un effet à un élément, il doit être sélectionné ou posséder un ID. Si, par exemple, vous surlignez une balise div qui n'est pas sélectionnée, elle doit posséder une valeur ID valide. Si ce n'est pas encore le cas, vous devez en ajouter un au code HTML. Les effets peuvent modifier les propriétés d'opacité, d'échelle, de position et de style d'un élément, comme sa couleur d'arrière-plan. Vous pouvez créer d'intéressants effets visuels en combinant plusieurs propriétés. Ces effets sont basés sur Spry. Dès lors, lorsqu'un utilisateur clique sur un objet possédant un effet, seul l'objet est mis à jour de manière dynamique. La page HTML n'est pas entièrement actualisée. Spry comporte les effets suivants :

• Apparition/Fondu Fait apparaître ou disparaître lentement un élément.

• Surligner Modifie la couleur d'arrière-plan d'un élément.

• Store monté/Store baissé Simule l'effet d'un store qui monte ou descend pour afficher ou masquer l'élément.

• Glisser vers le haut/Glisser vers le bas Fait monter ou descendre l'élément.

• Agrandissement/Réduction Augmente ou diminue la taille de l'élément.

• Secouer Donne l'impression que l'élément est secoué de gauche à droite.

• Ecraser Fait disparaître l'élément dans le coin supérieur gauche de la page. Important : lorsque vous utilisez un effet, diverses lignes de code sont ajoutées au fichier en mode Code. Une ligne identifie le fichier SpryEffects.js, qui est nécessaire à l'inclusion des effets. Ne supprimez pas cette ligne du code, faute de quoi les effets ne fonctionneront pas.

2.5 L’inspecteur de propriétés

Cet outil, qui se trouve au bas de l’espace de travail, donne accès aux propriétés de l’objet sélectionné dans l’espace de travail. Le contenu de la palette varie donc en fonction de l’objet sélectionné. Cas du texte

16

Cas d’une image

Cas d’un formulaire

Cas d’un tableau

C’est dans cette barre que vous devez réaliser les différents réglages à apporter aux éléments sélectionnés : • Texte : gras, italique, alignement, taille et police de caractères, couleur, retraits, puces • Tableau : épaisseur de bordure, couleurs ou motifs des fonds et des cadres, alignement,

taille, unités, composition • Objets graphiques : dimensions, alignement • Liens : cible

17

2.6 L’inspecteur HTML

Affiché via la commande Fenêtre : Inspecteur de code ou la touche F10, cette fenêtre montre le code source de la page en cours. Dreamweaver étant une interface graphique transformant des objets en code HTML, toute modification de la page entraîne une modification du code. Inversement, toute modification du code HTML entraîne, à condition que ce code soit conforme, une modification dans la fenêtre document. L’affinage d’une page passant obligatoirement par la lecture et la correction du code, il est indispensable d’ouvrir fréquemment cette fenêtre afin de vérifier le code source. Il faut connaître un minimum le langage html pour arriver à un bon résultat Afin de faciliter la lecture du code, la catégorie « Coloration du code » des Préférences permet de colorer les balises, ainsi que le contenu des balises. Il est intéressant de regrouper toutes les balises d’un même objet sous une couleur unique. Par exemple, les balises <table>, <th>, <tr>, et <td> étant colorées en rouge, c’est l’ensemble du code des tableaux qui serait affiché en rouge.

18

3 Environnement de travail

3.1 La carte du site Carte du site : ouvre la palette de gestion du site pour faciliter la gestion des liens. Vous pouvez afficher un fichier local pour un site Dreamweaver sous la forme d'une carte d'arborescence contenant des icônes liées et que l'on appelle carte de site. Utilisez cette carte pour ajouter de nouveaux fichiers à un site Dreamweaver ou pour ajouter, modifier ou supprimer des liens.

La carte du site présente la structure du site sur deux niveaux en partant de la page d'accueil. Les pages sont présentées sous la forme d'icônes et les liens sont affichés dans l'ordre où ils apparaissent dans le code source.

Vous devez définir la page d'accueil du site avant de pouvoir en afficher la carte. La page d'accueil du site est le point de départ de la carte ; il peut s'agir de n'importe quelle page de votre site. Vous pouvez changer de page d'accueil, indiquer le nombre de colonnes à afficher, préciser si les étiquettes des icônes doivent afficher le nom du fichier ou le titre de la page et indiquer si les fichiers dépendants et masqués doivent être affichés. (Un fichier dépendant est une image ou tout autre élément de contenu non HTML que le navigateur charge en même temps que la page principale.)

Lorsque vous travaillez dans la carte d'un site, vous pouvez sélectionner des pages, ouvrir une page pour la modifier, ajouter des pages au site, créer des liens entre les fichiers et modifier le titre des pages.

La carte du site est idéale pour agencer la structure d'un site. Vous pouvez définir rapidement la structure d'ensemble du site, puis créer une image graphique de la carte du site.

Remarque : l'option de carte du site n'est disponible que pour les sites locaux. Pour créer la carte d'un site distant, copiez le contenu de ce site dans un dossier de votre disque local, puis utilisez la commande Gérer les sites pour définir le site en tant que site local. Affichage d'une carte de site Dans le panneau Fichiers (Fenêtre > Fichiers), effectuez l'une des opérations suivantes : Dans le panneau Fichiers affiché sous sa forme réduite, sélectionnez Affichage de la carte dans le menu Vue du site.

Dans le panneau Fichiers affiché sous sa forme développée, cliquez sur le bouton Carte du site dans la barre d'outils, puis sélectionnez Carte seulement (la carte du site sans la structure des fichiers locaux) ou Carte et fichiers (la carte du site avec cette structure).

19

Remarque : Si aucune page d'accueil n'a été définie ou si Dreamweaver ne trouve pas de page intitulée index.html ou index.htm dans le site actuel (qu'il utilise alors comme page d'accueil), Dreamweaver vous invite à sélectionner une page d'accueil.

20

4 Création d’un site La bonne utilisation de Dreamweaver suppose qu’on lui indique d’emblée les caractéristiques de base du site en cours de construction. Cette procédure ne sert qu’au programme lui-même. Cela lui permet de contrôler plus facilement la cohérence des liens entre les éléments et de gérer la synchronisation des fichiers se trouvant sur la machine locale avec ceux du site du serveur. La définition du site s’obtient via le menu site en optant pour l’option « nouveau site ».

21

Remplissez obligatoirement les deux premiers champs « nom du site » et « dossier racine local ». Les autres champs ne sont nécessaires que si vous comptez utiliser Dreamweaver pour placer en ligne votre site. Des programmes de FTP pur sont mieux indiqués à cet effet.

4.1 Construction d’une page Il ne faut pas confondre le titre donné à la page avec le nom de fichier sous lequel vous allez la sauver. Le titre sera le nom convivial qui apparaîtra dans la barre supérieure du navigateur lors de la visualisation de la page. Exemple :

22

Par contre, c’est le nom de fichier présent physiquement sur le disque dur qui sera utilisé pour établir les liens. Le titre de la page peut être modifié en allant dans le menu « Modifier » et en choisissant l’option « Propriétés de la page ». Dans cette fenêtre, vous pouvez modifier d’autres paramètres que le titre de la page : image d’arrière plan, couleur d’arrière plan, couleur du texte, couleur du lien, marges, … Il est également possible de modifier le titre de la page directement dans le code, entre les balises <title> : <title>titre de la page</title>

4.1.1 Arrière-plan

Pour le fond de la page, vous pouvez choisir soit une image de fond, soit une couleur de fond. Pour les images d’arrière-plan, on utilise généralement une petite image au format gif représentant un motif. Celui-ci se répète automatiquement pour former un fond de page.

23

Il faut à tout prix éviter d’insérer directement une image trop grande car cela alourdirait la page et en allongerait considérablement le temps de chargement. De plus, elle ne s’adapterait pas bien à la mise en page suivant les résolutions utilisées par les visiteurs. En outre, veillez à choisir judicieusement votre motif de fond pour ne pas gêner la lisibilité du texte de la page. La couleur d’arrière-plan offre comme avantage par rapport à l’image d’arrière-plan de ne pas ralentir le chargement de la page. Par contre, on ne dispose que de fonds de couleurs uniformes. Ne négligez pas les fonds blancs (sans image ni couleur) qui, dans certain cas, présentent une solution particulièrement nette. Ces paramètres sont réglables dans le menu « propriétés de la page ».

4.1.2 Liens

La couleur des liens peut aussi être redéfinie. Par défaut, les liens s’affichent en gris. Quand il s’agit de texte, le bloc est souligné quels que soient ses attributs de départ. Quand on utilise une image, elle est entourée d’un cadre bleu. Une fois que le lien a déjà été utilisé, il apparaît dans une couleur bordeaux. Il est conseillé de changer ces couleurs si on risque un problème de lisibilité dû à l’utilisation d’un fond coloré ou d’une image de fond – ou selon les règles de la charte graphique.

24

4.1.3 Encodage

L’encodage du texte s’effectue comme dans un logiciel de traitement de texte avec la plupart des facilités classiques : • Flèche gauche : déplacement du curseur d’un caractère vers la gauche ; • Flèche droite : déplacement du curseur d’un caractère vers la droite ; • Flèche haut : déplacement du curseur d’une ligne vers le haut ; • Flèche bas : déplacement du curseur d’une ligne vers le bas ; • CTRL-Flèche gauche : déplacement du curseur d’un mot vers la gauche ; • CTRL-Flèche droite : déplacement du curseur d’un mot vers la droite ; • CTRL-Flèche haut : déplacement du curseur d’un paragraphe vers le haut ; • CTRL-Flèche bas : déplacement du curseur d’un paragraphe vers le bas ; Les touches de début et fin de page, début et fin d’écran fonctionnent également. La pression sur la touche majuscule associée au déplacement (flèche, CTRL-flèche, …) permet une sélection équivalente au déplacement du curseur. Le texte entré est balisé par <p></p>. Chaque retour ou pression sur la touche « Enter » crée une nouvelle paire de balises qui définit une nouvelle ligne. Seule la touche de tabulation n’est pas équivalente à celle des traitements de texte. L’alignement de texte ne s’effectuant pas par des tabulations, mais par tableau, liste ou retrait. On ne peut insérer qu’un seul caractère blanc de séparation (space bar) entre deux lettres ou mots.

25

Le déplacement de texte ou d’objet graphique est possible par cliquer-glisser.

4.1.4 Polices de caractères

Le choix de la police de caractère doit se faire de manière judicieuse : comme le texte peut être visualisé par de visiteurs n’ayant pas nécessairement la même plate-forme que celle qui a servi au développement de la page, ni les même polices de caractères, Dreamweaver propose en standard un jeu de fonts (groupées par équivalence d’aspect) et qui sont normalement présent d’office sur tous les systèmes. Le choix de la police par défaut se fait en ouvrant la palette des Propriétés, onglet aspect. La taille des caractères est donnée en points, en centimètres, en pixels,… Si vous désirez utiliser des polices de caractères différentes ou plus grandes, vous devez les éditer dans un logiciel graphique et en faire un gif que vous positionnerez à l’endroit adéquat. Ainsi, il sera lu de manière égale par tous les browsers.

4.1.5 Couleur

La couleur globale du texte est gérée par les propriétés de la page mais peut être modifiée localement par la commande Texte : Couleur qui ouvre le nuancier ou encore par l’inspecteur des propriétés.

4.1.6 Styles

Style : vous disposez en standard de gras (B enfoncé) et d’italique (I enfoncé) et, par combinaison, du gras-italique (B et I enfoncés). De plus, vous pouvez colorer votre texte (carré coloré à coté de la taille). N’utilisez qu’avec parcimonie le souligné (qui n’est d’ailleurs pas proposé en standard) car il est réservé au marquage de liens. Néanmoins, on peut y recourir si cela ne crée pas d’ambiguïté mais il faut alors éviter de mettre le texte dans la couleur des liens. Pour obtenir tous les styles non-standards, il faut aller dans le menu « Texte » et choisir l’option « Style ». On obtient alors la fenêtre suivante :

26

4.1.7 Alignements Alignement du texte : Dreamweaver propose en standard l’alignement à gauche, l’alignement à droite, le centrage et la justification gauche/droite. Le retrait de texte ne s’effectue pas à l’aide de taquets de tabulations comme dans les logiciels de traitement de texte ou de mise en page. Seuls les retraits ou les tableaux permettent d’aligner le texte à une distance donnée de la marge gauche.

4.1.8 Retraits La création de retraits se fait via l’inspecteur des propriétés, les commandes « Retrait » et « Retrait négatif » du menu « Texte », ou encore les commandes « Liste : Retrait » et « Liste : Retrait négatif » du menu contextuel. Chaque retrait positif crée une paire de balises <blockquote></blockquote>. Ces balises, utilisées en HTML pour signifier une citation, correspondent approximativement à un retrait de 5 caractères en corps 3 et peuvent être imbriquées.

Les icônes le permettent également dans l’inspecteur de propriétés, quand du texte est sélectionné.

4.1.9 Listes Pour créer une liste ou une énumération, il suffit d’effectuer l’une des commandes suivantes : • La commande « Texte : Liste », un choix est à effectuer parmi les différentes listes

proposées, la commande « Propriété de la liste » permet d’affiner ce choix ; • Les icônes de la « Liste simple» et « Liste numérotée » de l’inspecteur des propriétés, le

bouton « Eléments de liste » donne accès aux propriétés de la liste • La commande « Liste » du menu contextuel. Tout texte converti en liste garde ses attributs de corps, couleur, … et est imbriqué dans la paire de balises <ul></ul> pour les listes non-ordonnées, et <ol></ol> pour les listes ordonnées. Les listes non-ordonnées sont des listes précédées d’un rond (puce), d’un cercle ou d’un carré, tandis que les listes ordonnées débutent par un chiffre ou une lettre.

4.1.10 Images Pour mettre des images sur le web, on utilise exclusivement les formats, JPEG, GIF et PNG. Le JPEG sera réservé aux photos et aux images exigeant un grand nombre de couleurs. Le GIF (maximum 216 couleurs) sera réservé aux images présentant de nombreux aplats (grandes zones d’une seule couleur) tels que les logos. Le GIF permet aussi de créer des animations (gifs animés) et des images dont une couleur est déterminée comme transparente. Le Portable Network Graphics (PNG) est un format ouvert d’images numériques, qui a été créé pour remplacer le format GIF, à l’époque propriétaire et dont la compression était soumise à un

27

brevet. Le PNG est un format non destructeur spécialement adapté pour publier des images simples comprenant des aplats de couleurs. Pour les images synthétiquesPNG est particulièrement approprié lorsqu’il s’agit d’enregistrer des images synthétiques destinées au Web comme des graphiques, des icônes, des images représentant du texte (bonne conservation de la lisibilité), ou des images avec des dégradés. Le PNG surpasse régulièrement le format GIF en ce qui concerne la taille (avec une palette de couleurs bien choisie) ou la qualité (puisqu’il n’est pas limité à 256 couleurs). Pour les photosLes caractéristiques de PNG lui permettent d’enregistrer des photographies sans perte de

données, mais au détriment de la taille du fichier résultant qui reste la plupart du temps très supérieure à celle de formats spécifiques aux photographies comme JPEG (ou

).

avec l’option « Image ».

n obtient alors la fenêtre suivante :

JPEG 2000 L’insertion d’une image se fait soit via la palette des objets, soit via le menu«Insertion »

O

28

Bien qu’il soit possible de modifier dans Dreamweaver la taille d’affichage d’une image, c’est à déconseiller car cela oblige en pratique le navigateur de votre visiteur à recalculer à chaque fois la taille d’affichage à partir de la taille réelle de l’image en question. Cela a pour résultat de dégrader l’image et risque d’allonger le temps de chargement. Il convient de réaliser pour chaque image une version directement à la taille souhaitée et de les utiliser pour garnir les pages. Il est aussi possible d’y ajouter un lien vers l’image en taille réelle.

4.2 Les liens Il existe 5 types de liens : • vers une autre page du site • vers une page externe à votre site • vers un endroit précis de la page locale (ancre) • pour permettre un contact mail • pour permettre un téléchargement de fichier Dans tous les cas, le départ du lien peut être du texte, une image ou une partie d’image. Pour créer un lien, il faut d’abord créer la cible, puis dans la page de départ, sélectionner le bloc de texte ou l’image et aller dans la fenêtre des Propriétés et créer le lien. • pour lier une autre page de votre site, soit vous utilisez l’icône « Dossier » pour parcourir les

répertoires et choisir le fichier adéquat, soit vous utilisez le pointeur pour sélectionner votre fichier dans la carte du site.

• pour lier une page extérieure à votre site, il faut encoder l’URL (http://www.fundp.ac.be) dans la case du lien dans la fenêtre des Propriétés.

• pour un lien vers une ancre de la page elle-même, il faut d’abord créer l’ancre en allant à

l’endroit cible puis dans le menu « Insertion », choisir l’option « Ancre nommée ». On peut aussi utiliser la « palette des Objets » où dans le menu « Commun » on retrouve l’icône de l’ancre. On retourne ensuite à l’endroit où doit se faire le lien et dans la case lien de la « palette des Propriétés », on tape « # » suivi du nom de l’ancre (sans espace).

L’utilisation d’ancres est utile dans deux cas : pour développer un menu et pour proposer un retour direct au-dessus d’une page très longue (nb : il faut, dans la mesure du possible, éviter les pages très longues et leur privilégier un ensemble de pages courtes liées entre elles). • pour lancer un contact email, sélectionner le texte, puis dans la palette de Propriétés, dans

la case lien, taper « mailto : » suivi de votre adresse email (sans blanc). Vous pouvez également utiliser la palette des Objets, où dans le menu « Commun » se trouve l’icône « Lien de messagerie ».

29

• pour permettre le téléchargement d’un fichier, il faut procéder de la même manière que pour

un lien vers une page de votre site et choisir le fichier (non-HTML). • Lors de l’établissement d’un lien vers une autre page html, il faut également veiller à indiquer

dans l’onglet « Cible » l’endroit ou la nouvelle page doit s’ouvrir (parent = même écran, blank = nouvelle fenêtre)

4.3 Enregistrer un document. Il existe trois enregistrements possibles dans Dreamweaver. Les commandes « Fichier : Enregistrer » et « Fichier : Enregistrer sous » sont identiques à celles des autres logiciels. Enregistrer tout permet de sauver en une seule opération tous les fichiers html ouverts à ce moment. La commande « Fichier :Enregistrer comme modèle » permet d’enregistrer une page en tant que modèle, autrement dit, toutes les pages ouvertes d’après ce modèle partageront les mêmes propriétés de la page (couleur d’arrière-plan, marges, …).

4.3.1 Prévisualisation

Bien que les documents Dreamweaver donnent une bonne idée de ce que donnera la page affichée, il y a cependant de grandes différences qui peuvent apparaître selon le navigateur utilisé ainsi que la version de ces navigateurs et il est nécessaire d’y visualiser les pages avant de les utiliser. Il est possible d’enregistrer sa page, de lancer le navigateur et de l’y ouvrir, mais ceci représente une perte de temps considérable. Pour cette raison, Dreamweaver a introduit une fonction de Prévisualisation qui ouvrira automatiquement la page dans le navigateur désiré. Il est possible de préciser un navigateur principal et des navigateurs secondaires. Pour pouvoir utiliser cette fonction, il est indispensable de préciser au logiciel où se trouvent les navigateurs à l’aide de la sous-commande « Edition : Préférences : Aperçu dans le navigateur». Les boutons + et – servent à ajouter ou supprimer des navigateurs qui peuvent être définis comme principal (F12) ou secondaire (CTRL-F12) grâce aux cases à cocher.

30

4.4 Gestion des sites

La gestion du site se fait à l’aide de la fenêtre « Fichier du site » et « carte du site ». Comme très souvent le nombre de pages du site augmente avec le temps, on est tenté de supprimer ou renommer certaines pages, en dehors de Dreamweaver, et cela finit par créer des liens brisés. Parmi les problèmes qui perturbent les liens, on trouve très souvent celui de la casse (minuscules/majuscules). Il faut savoir que sous Windows ou sous Macintosh, le système ne verra pas de différences entre un fichier nommé Toto.htm ou TOTO.htm ou encore TOTO.HTM. Sur le réseau, on a plus souvent affaire au système d’exploitation Unix et ce dernier fait lui la distinction entre majuscules et minuscules. Pour lui, il s’agira de trois fichiers distincts. Ainsi, si dans le code HTML de ma page, je fais un lien vers monfichier.html et que le fichier est nommé réellement monfichier.HTML, tout sera OK sur ma machine locale mais sur le réseau, le lien sera déclaré inexistant. C’est particulièrement courant avec les images, leur extension étant très souvent réécrite en majuscules lorsqu’on les retouche dans un programme de dessin.

31

5 les options graphiques

5.1 Les images survolées (roll over) Lorsqu’une image est survolée par le pointeur, une autre image apparaît (roll-over). C’est le cas

des boutons qui donnent l’impression d’être en relief, puis en creux lorsqu’on clique dessus, à la nuance près que la réaction se déroule lors du passage de la souris et non pas du clic. La seconde image peut être porteuse d’un lien (pas la première). L’insertion d’une image survolée se fait soit via la palette des objets, soit via le menu « commun » avec l’option « Image survolée». On obtient alors la fenêtre suivante :

« Nom de l’image » permet de préciser un nom à l’objet image survolé, par défaut, elle portera le om imagex, x étant le nombre actuel d’images insérés dans la page depuis son ouverture.

le chemin et le nom du fichier de l’image lors du hargement de la page.

réciser le chemin et le nom de fichier de l’image qui remplacera image originale lors du survol.

t pas cochée, l’image survolée sera chargée au

n « Image originale » permet de préciser c « Image survolée » permet de pl’ La case à cocher « Précharger l’image survolée » permet de précharger d’office, et en tâche de fond, l’image survolée lors du chargement de la page. Cette option permet ainsi d’obtenir des effets de roll-over immédiats. Si cette case n’esmoment du survol, avec un décalage temporel.

32

Le texte secondaire sera la légende du roll-over – il n’est pas obligatoire.

via la zone d’entrée lien de l’inspecteur des propriétés de l’image urvolée sélectionnée.

.B. Il est important que les deux images aient les mêmes dimensions.

5.2 Carte graphique ou image map

ble de l’image, mais à des zones très précises, choisies en fonction de la ature de l’image.

Outils zones réactives présent à gauche e l’inspecteur des propriétés de l’image sélectionnée.

« Si cliquée, aller à l’URL » permet de préciser la destination du lien. Il est toutefois possible de la préciser par la suites N

Une carte graphique ou image map est une image qui possède un ou des liens attribués nonepas à l’ensemn Les zones sensibles sont attribuées à l’aide des trois d

Ils permettent de définir des zones rectangulaires, rondes ou polygonales libres. Les zones réactives sont marquées par des formes bleues translucides superposées à l’image, elles possèdent des points d’ancrage et leur contour est invariablement noir.

proche des points d’ancrage, ermettant ainsi la modification de la forme des zones réactives.

La sélection et le déplacement de telle ou telle zone réactive s’effectue à l’aide de la flèche noire. Cette dernière se transforme en flèche blanche à l’app

Le nom de la carte, les noms et les liens des zones réactives ainsi qu’un nom alternatif se définissent respectivement dans la zone d’entrée « Carte », « Liens » et « Sec. » de l’inspecteur es propriétés de la zone réactive sélectionnée.

fichage des liens via la fenêtre des propriétés de la page (« Modifier : Propriétés de la page ).

d Par défaut, la couleur d’un texte portant un lien est bleu et souligné. Lorsqu’on clique sur un lien, il devient noir par défaut et violet une fois visité. Il est possible de modifier les couleurs d’af»

33

La zone « Couleur du lien » permet de définir la couleur du lien avant toute visite. La zone « Lien actif » permet de déterminer la couleur du lien lors du clic et la zone « Lien visité » détermine la couleur du lien mémorisé. Si l’on ne désire pas obtenir une couleur différente lors du clic ou après une visite, il suffit d’encoder les mêmes valeurs de couleurs dans chaque zone d’entrée. De fait, si aucune couleur n’est entrée, les valeurs seront celles par défaut. Les couleurs étant déterminées par les attributs de <body> : link, vlink, alink, elles sont invariables pour l’entièreté de la page.

5.3 Affichage des pages Par défaut, tout lien, qu’il soit basé sur un texte, une image ou un élément extérieur (Shockwave Flash, …) ouvre son fichier de destination dans la fenêtre en cours. Il est possible de modifier la fenêtre cible des liens grâce aux attributs « _blank », « _self », « _parent » et « _top ». ces attributs se définissent via la liste « Cible » accompagnant la zone d’entrée « Lien ». Notez que cette zone est inactive tant qu’aucun élément, texte, ou image n’a été sélectionné.

5.4 Insertion de tableaux Deux méthodes sont possibles : • via le menu « Insertion » avec l’option « Tableau » • via la « palette des objets », section « commun » On obtient alors la fenêtre suivante qui permet le paramétrage du tableau

34

dans laquelle on détermine le nombre de lignes, de colonnes, le type de bordure (0= pas de bordure), l’espace entre les cellules, …. La taille peut être donnée • en pourcentage de la taille d’écran (le tableau s’adaptera à la résolution du visiteur) • en pixels (la taille du tableau sera fixe). «Bordure» permet de préciser l’épaisseur en pixels du contour du tableau. La bordure peut également avoir une couleur. Pour cela, il suffit d’aller dans la « Palette de Propriétés » et de définir la couleur de la bordure dans la case « Brdre ». Par défaut, la bordure d’un tableau est de 1 pixel. La case « Marge intérieure des cellules » détermine l’espace entre le contenu et le bord du cadre. La case « Espacement des cellules » permet de préciser la quantité d’espace entre deux cellules. Par défaut, le remplissage et l’espacement des cellules est de deux pixels. Il existe deux moyens d’ajouter des lignes et des colonnes à un tableau. Le premier ajoute les lignes en haut de la ligne active et les colonnes à gauche de la colonne active, le second ajoute les lignes et les colonnes respectivement en bas et à droite de celles qui sont actives. La méthode d’ajout est à choisir en fonction du besoin. L’ajout de ligne au-dessus et de colonne à gauche de l’élément actif est possible via la commande «Insertion », « objet du tableau : Insérer (une ligne/colonne), par le menu contextuel obtenu par clic droit (Windows) ou CTRL-clic (Mac) sur le tableau. On peut aussi ajouter une ligne en dessous du tableau en positionnant le pointeur dans la cellule du bas à droite et en pressant la touche tabulation. La suppression de lignes et de colonnes est possible via les commandes « Tableau : Supprimer (ligne/colonne) » du menu contextuel ou en les sélectionnant et en activant la commande clavier « delete ».

5.5 Données tabulaires Si les données qui devront être mises en page dans un tableau sont déjà encodées dans un logiciel de traitement de texte ou un tableur, il est inutile de les encoder à nouveau, on peut importer des données tabulaires via le menu « Insertion », « objets du tableau », « importer les données tabulaires ». Lors du placement de données tabulaires importées, la boîte de dialogue « Insérer des données tabulaires » s’ouvre et permet le paramétrage de l’import :

35

• « Fichier de données » permet de localiser le fichier source, éventuellement à l’aide du

bouton « Parcourir » ; • « Délimiteur » permet de choisir le séparateur de données entre tabulation, virgule, point-

virgule, deux points ou un autre séparateur à préciser ; • « Adapter au contenu » permet d’adapter la largeur des colonnes et donc du tableau au

contenu du fichier importé ; • « Marge intérieure des cellules » permet de préciser le remplissage des cellules ; • « Espacement des cellules » permet de préciser la distance séparant deux cellules ; • « Formatage ligne supérieure » permet de préciser les attributs gras, italique ou gras italique

de la première ligne du tableau ; • « Bordure » permet de préciser l’épaisseur en pixel de la bordure du tableau.

5.6 Formulaires

Les formulaires servent à créer un écran contenant des champs que les visiteurs des pages peuvent garnir avec leurs données et envoyer ensuite via une liaison avec une base de données résidente sur un serveur (pas nécessairement celui où les pages se trouvent) Tout formulaire, du plus simple au plus complexe, passe obligatoirement par l’insertion d’un objet-formulaire au sein de la page. Cet objet n’est qu’un conteneur, il ne possède aucune réalité visible lors de l’affichage dans le navigateur. Dans Dreamweaver, l’objet-formulaire est représenté par un rectangle pointillé rouge.

36

L’insertion d’un objet-formulaire s’effectue via le menu « Insertion » avec l’option « Formulaire ». N.B. Contrairement aux tableaux, il est impossible d’imbriquer des formulaires ou d’en modifier la taille (ils s’agrandissent en fonction de leur contenu). Les éléments du formulaire (boutons, champ de texte, liste, menu,...) doivent ensuite être insérés dans l’espace délimité par « l’Insertion du formulaire ». Soit ils sont introduits à l’aide de la « palette des Objets », soit ils sont introduits à partir du menu « Insertion » avec l’option « Objet de formulaire ». Les différents éléments pouvant être insérés dans un formulaire et leurs icônes respectives sont : Dreamweaver regroupe trois réalités sous un même objet nommé « Insérer un champ de texte » • Le champ de texte ligne simple • Le champ de texte multi-lignes • Le champ masqué

5.6.1 Champ de texte ligne unique

Les paramètres d’un « champ de texte ligne unique », réglables dans l’inspecteur des propriétés du champ de texte sélectionné, sont :

37

• Son nom, encodé dans la zone d’entrée « Champ de texte » • La largeur du champ en nombre de caractères introductibles dans le champ, encodée dans

la zone d ‘entrée « Nbre caract. max. » • Le texte présent dans le champ dès son affichage, encodé dans la zone d’entrée « Val. Init.

»

5.6.2 Champ de texte multi-lignes Les paramètres d’un « champ de texte multi-lignes », réglables dans l’inspecteur des propriétés du champ de texte sélectionné, sont :

• Son nom, encodé dans la zone d’entrée « Champ de texte » • La largeur du champ en nombre de caractères visibles, encodée dans la zone d ‘entrée «

Larg. De caract.. » • Le nombre de lignes affichées, encodé dans la zone d’entrée « Nbre de ligne » • Le texte présent dans le champ dès son affichage, encodé dans la zone d’entrée « Val. Init.

» • Le mode de retour à la ligne lorsque le texte introduit par l’usager arrive à la limite droite du

champ :

o Désactivé, aucun retour à la ligne forcé ne s’opère o Virtuel, un retour à la ligne forcé s’opère à l’écran mais pas dans les données envoyées o Physique, un retour à la ligne forcé s’opère à l’écran et dans les données envoyées o Par défaut, utilise les préférence du navigateur (à éviter).

5.6.3 Champ masqué Les paramètres d’un champ masqué, réglables dans l’inspecteur des propriétés du champ de texte sélectionné, sont :

38

• Son sens, encodé dans la zone d’entrée «Valeur » Les champs masqués permettent de conserver et transmettre des informations qui ne sont pas saisies par l’utilisateur. Ces informations sont masquées afin que l'utilisateur ne puisse pas les voir. Remarque : cette amélioration n’est disponible que si vous pouvez accéder à un ordinateur exécutant ColdFusion MX 7 ou une version ultérieure

5.6.4 Case à cocher La case à cocher est l’élément qui permet à l’usager de choisir une ou plusieurs occurrences dans une liste. Les paramètres sont :

• Son état • Sa valeur • Son état initial, à savoir : actif (coché) ou inactif (décoché) • Sa classe

5.6.5 Bouton radio Un bouton radio permet de ne choisir qu’une occurrence de cette liste. Les paramètres d’un bouton radio sont :

• Son nom • Sa valeur • Son état initial (actif ou inactif) • Sa classe

39

5.6.6 Menu contextuel Un menu contextuel est un champ de texte possédant une petite flèche ouvrant une liste lorsqu’on clique dessus.

Les paramètres d’un menu, réglables dans l’inspecteur des propriétés du champ menu sélectionné, sont : • Son nom • Son type • Les éléments contenus (valeur de la liste) • L’élément initialement sélectionné (attribut selected) • Sa classe

N.B. Après avoir cliqué sur le bouton « Valeur de la liste », l’ajout et la suppression d’éléments de la liste s’effectuent à l’aide des boutons + et -. La modification s’effectue en cliquant à nouveau sur « Valeur de la liste ».

5.6.7 Boutons d’envoi

Les éléments finaux d’un formulaire sont les boutons qui permettent à l’usager de valider et d’envoyer ou non son formulaire. Dreamweaver regroupe trois réalités sous un même objet : • Le bouton d’envoi des données du formulaire • Le bouton d’effacement des données du formulaire • Le bouton type pour l’attribution de commandes.

40

Les paramètres d’un bouton, réglables dans l’inspecteur des propriétés du champ bouton sélectionné, sont : • Sa valeur (Action : envoyer le formulaire, rétablir le formulaire, aucune) • Son nom qui spécifie le texte apparaissant sur le bouton • Sa classe 6 Utilisation des feuilles de style Un style est un groupe d'attributs de mise en forme qui contrôlent l'apparence d'un texte dans un document. Une feuille de style CSS peut être utilisée pour contrôler la mise en forme de plusieurs documents en même temps, et elle peut inclure tous les styles d'un document. L'avantage d'une feuille de style CSS sur un style HTML est double : la feuille de style CSS peut affecter plusieurs documents à la fois et, lorsqu'elle est modifiée, la mise en forme de tous les documents qui y font appel est automatiquement modifiée en conséquence. Les styles CSS sont identifiés par des noms ou par des balises HTML, ce qui vous permet de modifier l'un des attributs d'un style et de voir tout le texte auquel ce style est appliqué refléter instantanément ce changement. Dans les documents HTML, les styles CSS peuvent contrôler la plupart des attributs de mise en forme traditionnels, par exemple la police, la taille et l'alignement. Mais les styles CSS permettent aussi de spécifier des attributs HTML uniques, dont le positionnement, des effets spéciaux et la réaction à un survol de la souris. Pour créer une feuille de style CSS, il faut : • Ouvrir le menu « Fenêtre » option « Styles CSS ». Clic droit sur « aucun style défini » et

choisir « nouveau ». Vous avez alors la fenêtre suivante :

• Cliquer bouton droit sur « aucun » et choisir « nouveau style » dans le menu contextuel

41

• Sauver la css à l’endroit approprié • Encoder les choix voulus dans les différents menus – faire « appliquer » • Dans le « head » de la ou des pages html qui doivent exploiter la css, écrire : <link rel="stylesheet" type="text/css" href="nom.css" />

42

7 l’aide en ligne Une pression sur la touche F1 ouvre l’aide en ligne de Dreamweaver. On y trouve la réponse à la plupart des questions qui peuvent se poser. N’hésitez pas à la consulter en cas de besoin. La fonction de recherche ainsi que l’index permettent de spécifier les questions.

43

8 Les comportements La fenêtre des comportements s’affiche via la clé Maj-F4. Son intérêt principal réside dans la possibilité d’ajouter facilement des événements dans le code de la page. Cet ajout se réalise en cliquant le bouton + et en choisissant l’option désirée dans la liste.

• …Ouvrir la fenêtre navigateur permet d’ouvrir une nouvelle fenêtre, nantie des paramètres

souhaités et pointant vers une adresse au choix.

44

• Précharger les images indique au browser qu’il doit commencer immédiatement à charger

les images indiquées (par exemple, celles se trouvant sur la page logiquement suivante), ceci afin de réduire le temps de chargement quand le lien sera vraiment actionné.

45

9 Conception de frames dans Dreamweaver Une page découpée en frames comprend : • le jeu de frames (frameset), entité dans laquelle on n’écrira rien, dont la seule utilité est de

contenir les autres frames. Néanmoins, il faudra lui donner un nom. • Les frames proprement dites, sorte de découpage réglable de la surface de la page. Chaque

frame va afficher un fichier html différent.

46

Chaque frame porte un nom. Sauver immédiatement les fichiers via la commande « fichier » « enregistrer tout » : pour une découpe en 3 frames, on sauvera 4 fichiers html ; 3 nommés frame_nom et 1 nommé librement qui est le frameset. Veillez à nommer les 3 fichiers « frame » en fonction de la position qu’ils occupent réellement sur la page. Dans l’hypothèse d’une découpe comme ci-dessus, il y a un « frame_top » ou « top_frame », un « right » (à droite) et un « main » (le plus grand). Nous allons faire un menu dans le right_frame. Son but est d’afficher des pages dans MAIN_FRAME. Après avoir lié un fichier sur l’item « menu » du menu (ici, index2), il faut également régler l’endroit où il va apparaître.

Cette opération se réalise dans la boîte « Cible » de l’inspecteur de propriétés. On trouve dans ce menu les options suivantes Item Affiche la nouvelle page dans… Blank Une nouvelle page - browser ouvert 2x Parent Une nouvelle page - browser ouvert 1x Self Dans le frame local Top Une nouvelle page Rightframe Le frame principal Mainframe Le frame gauche Topframe Le frame du dessus

47

Dans notre hypothèse, nous allons choisir « mainframe » dans le menu « cible ». Quand l’item du menu sera activé, index2.php s’affichera dans le mainframe. Quand vous construisez les pages destinées à garnir les frames top et left, tenez compte du peu de place disponible pour l’affichage. Il faut essayer de se passer d’ascenseur.

La fenêtre « cadre » (maj F2) permet de nommer les cadres (fenêtre « Cadre »). Cette opération est nécessaire pour pouvoir adresser l’affichage d’une page dans le frame voulu.

48