Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un...

41
DreamWeaver 2 Intro Le langage de description de page HTML Rôle de l’éditeur de pages Web Création du site dans Dreamweaver Saisir et formater du texte Créer un tableau Créer un lien hypertextuel local sur du texte Créer un lien hypertextuel local sur une image Voir le site dans le navigateur Ajout d’un papier peint Autres possibilités des tableaux Autres possibilités des tableaux : le menu contextuel Compatibilité des navigateurs Cibles de liens en http Adresse e-mail comme cible de lien Edition des images Lien vers un endroit précis d’une page Contrôler le site La bibliothèque Calques Les comportements Création d'une animation de scénario Création d’un jeu de cadres Quelques liens (législation) Initiation au logiciel DrealWeaver, Éditeur de sites Web Réal. Joël Leporcq CDDP des Zardennes

Transcript of Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un...

Page 1: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Intro Le langage de description de page HTML Rôle de l’éditeur de pages Web Création du site dans Dreamweaver Saisir et formater du texte Créer un tableau Créer un lien hypertextuel local sur du texte Créer un lien hypertextuel local sur une image Voir le site dans le navigateur Ajout d’un papier peint Autres possibilités des tableaux Autres possibilités des tableaux : le menu contextuel Compatibilité des navigateurs Cibles de liens en http Adresse e-mail comme cible de lien Edition des images Lien vers un endroit précis d’une page Contrôler le site La bibliothèque Calques Les comportements Création d'une animation de scénario Création d’un jeu de cadres Quelques liens (législation)

Initiation au logiciel DrealWeaver, Éditeur de sites Web

Réal. Joël Leporcq CDDP des Zardennes

Page 2: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

HTML ?HTML est un langage de description de pages destinées au Web. Un fichier (ou page) HTML est une suite d'instructions balisées à destination du navigateur internet qui les lira.

<HTML>

<HEAD><TITLE>Titre du document</TITLE></HEAD>

<BODY>Contenu du document</BODY>

</HTML>

Squelette d'une page HTML presque minimale :

Les commandes du vocabulaire HTML seront donc utilisées : soit à la manière de parenthèses délimitant une partie du texte :<B> écrit en gras </B><I> écrit en italique </I><B><I> écrit en gras et italique</B></I> soit à la manière d'instructions :<BR> : Passe une ligne

dites "balises", selon une syntaxe normalisée.

HTML

Page 3: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

HTML éclatéHTML

Les images affichées dans une page Web ne font pas partie intégrante de la page HTML, qui n’est donc qu’un fichier texte. Elles accompagnent la page, qui doit pouvoir les localiser pour les présenter à l’écran.

<IMG SRC="ligne.gif">

Page 4: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Rôle de DreamWeaverHTML

En général, un logiciel spécialisé est utilisé pour concevoir ou modifier des pages web. Le concepteur ne manipule pas les balises HTML lui-même. C'est le logiciel qui génère la mise en page vers le langage balisé et réciproquement : DreamWeaver (version 2 gratuite), FrontPage, OpenOffice (suite gratuite), NamoWeb, … voire Word ou Publisher.

Le code HTMLest créé par

DreamWeaver

Le code HTMLest lu par

le navigateur

Page 5: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Voir l’HTMLHTML

Pour apercevoir le code HTML ayant été reçu, et interprété, par le navigateur Internet, faire Affichage, Source.

Le concepteur de pages Web travaillant avec Dreamweaver peut ne jamais voir le code HTML, puisque le but premier de ce logiciel est de servir d’écran entre le code et le concepteur, ce qui est le cas général des environnements de programmation.

Page 6: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Plan et dossiersPlan du site

Prenons l’exemple d’un site personnel, présentant son auteur, ses goûts, passe-temps préférés, sites favoris, …

Il est toujours préférable de réfléchir dans un premier temps à la structure du site, son plan, ce que Dreamweaver appelle sa carte, avant de se lancer dans la confection des pages. Dreamweaver en inclut d’ailleurs la visualisation.

Page d’accueil

Présentation Passe-temps Favoris

De même, on créera un dossier destiné à contenir tous les éléments constitutifs du site (pages, images, …)

Carte (logique du site)

Arborescence des fichiers du site

Page 7: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Carte du siteDreamweaver vous montrera les deux niveaux d’organisation de votre site.

Carte du site

Carte du site,liens des pages entre elles,

circulation dans le site

Arborescence desfichiers du sitesur le disque

Page 8: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Création du site 1Mise en place du site

Lancer Dreamweaver. Fermons toutes les petites fenêtres satellites de Dreamweaver qui encombrent l'écran pour ne garder que la fenêtre principale. Cela simplifiera notre tâche de débutant et il sera de toute façon possible de les rappeler par la suite. Enregistrer – Fichier, Enregistrer sous – la page vierge (il s’agit d’un document HTML) qui s’ouvre dans le dossier « Site perso » en l’appelant « Index.HTM ». Ce sera la page d’accueil de notre futur site. Ce nom de fichier est automatiquement pris en compte par la plupart des serveurs comme nom de page par défaut.Prenons la bonne habitude de donner un titre à la page. Ce titre s'affichera tout en haut dans la fenêtre du navigateur chez le visiteur et dans la barre des tâches de Windows lorsque nous serons dans DreamWeaver. Modifier, Propriétés de la page, et donnons comme Titre « Accueil ». Créons de même les trois autres pages par Fichier, Nouveau, en les enregistrant dans le même dossier.

Notez que la carte du site, à la différence de l’arborescence des fichiers, ne nous montre toujours que la page d’accueil.C’est tout à fait normal, puisqu’aucun lien n’est encore défini entre les pages, et qu’un visiteur de notre site, si nous le publiions tel quel, n’aurait aucun moyen de se rendre sur les autres pages …

Page 9: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Création du site 2Pour créer un nouveau site, cliquer sur Fichier puis sur Nouveau site

Mise en place du site

Nom du site (permetant de le retrouver la prochaine fois que Dreamweaver sera ouvert).

Dossier contenant le site (cliquer sur le petit dossier pour parcourir le disque).

S’il s’agit d’un site destiné à être publié sur Internet, adresse du dossier du serveur sur lequel on a les droits d’écriture.

Le cache est une carte des liens préindexée permettant à Dreamweaver de vérifier et de mettre à jour très rapidement les liens du site.

Selon que la version publiée du site se trouve sur un réseau local (Intranet), sur Internet (FTP), ou restera locale (Aucun), dans le cas d’une aide intégrée, d’une présentation sur CD, …

Page 10: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Création du site 3Activez l'option Activer l'archivage et l'extraction de fichier si vous travaillez au sein d'une équipe (ou si vous travaillez seul mais depuis plusieurs machines).Cette option est utile pour informer les autres que vous avez extrait un fichier pour l'éditer, ou pour vous rappeler qu'une version plus récente d'un fichier est peut-être ouverte sur une autre machine.

Le nom du fichier qui sera la page d’accueil : saisir « Index.HTM ». Si la page n’existe pas encore, Dreamweaver la créera.

Nombre de colonnes utilisées pour afficher la carte du site : saisir « 5 ».

Mise en place du site

Page 11: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Affichage du siteMise en place du site

Affiche le site distant si l’on dispose d’un accès au serveur

Réglage du niveau de zoom sur la carte du site

Arborescence des dossiers du site. Un double-clic sur l’une des pages l’ouvrira dans Dreamweaver

Page 12: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Saisir et formater du texte

Saisir et formater du texte

Dans la page d’accueil, taper par exemple « Bienvenue sur mon site ».Puis, demandons l’affichage de la fenêtre satellite de Dreamweaver qui nous sera le plus utile, la fenêtre des Propriétés. Pour contrôler l’affichage des barres d’outils dans Dreamweaver, il faut utiliser le menu Fenêtre. Puis, pour ce qui nous concerne, Propriétés.

Cette petite fenêtre rassemble les propriétés les plus utiles de l’objet sélectionné. Comme nous sommes actuellement en train de saisir du texte, elle nous propose les outils de formatage

Gras, Italique, alignements,Listes à puces, numérotées,Couleur du texte,Taille,Police

Propriétés supplémentaires éventuelles

Taille de l’écriture et police

Couleur du texte

Page 13: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Saisir et formater du texteOn met en taille 7             , en gras    et on centre   . On profite aussi de la surbrillance pour mettre le texte en couleur :

Saisir et formater du texte

Sélectionnons le texte à formater

Remarque importante :En tant que créateur d’un site qui sera publié sur Internet, vous ne pouvez faire aucune supposition quant à l’équipement qui sera utilisé par les personnes qui consulteront votre site sur une machine distante. Notamment ici, à propos des fontes qui y seront installées. Ni par exemple sur la taille de l’écran qui servira à les visualiser …

La touche Entrée, comme dans Word, crée un nouveau paragraphe, tandis qu’employée simultanément avec une touche Majuscule, elle va à la ligne sans passer à un autre paragraphe.Dans ce nouveau paragraphe, entrer ses coordonnées.

Effet de la touche Entrée

Effet de Majuscule + Entrée

Page 14: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Créer un tableauDans la conception de pages Web, les tableaux sont très importants et sont très fréquemment utilisés. Ils sont en effet l’outil qui va permettre de placer des éléments dans la page en étant assuré qu’ils conserveront leurs emplacements relatifs quelle que soit la machine employée pour voir la page.

Créer un tableau

Création d’un tableau dans la page : Insertion, Tableau, et arrive la fenêtre de définition du tableau :

Afin d’y placer le sommaire de notre site, nous allons créer ici un tableau d’une ligne et d’une colonne, dont la largeur sera 30% de celle de la page, et dont le bord ne sera pas visible …

Puis, à l’aide de la fenêtre des propriétés, une fois dans le tableau, on choisit une liste à puces pour écrire les titres de nos trois pages :

Sauvegardez régulièrement (Ctrl S)

Page 15: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Créer un lien hypertextuel local sur du texte 1

Créer un lien hypertextuel local sur du texte

Un lien hypertextuel peut provoquer l’affichage d’une autre page du même site, d’une page quelconque d’un autre site, voire d’une endroit précis d’une autre page. Pendant la création de pages Web, il suffit de sélectionner le texte qui sera un lien, et d’indiquer à Dreamweaver la destination, la cible, de ce lien.

Exemple pour le texte « Présentation », qui devra aller à la page Present.HTM

Sélectionner le texte

Dans la fenêtre des propriétés, cliquer sur le petit dossier pour choisir la page cible, car elle est locale

Choisir ici la page Present.HTM, puis cliquer sur le bouton « Sélectionner »

C’est fait.

Page 16: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Créer un lien hypertextuel local sur du texte 2

Créer un lien hypertextuel local sur du texte

Le texte du lien a été formaté avec le style des liens par défaut, ici Souligné et Bleu, ce qui permettra à l’utilisateur de savoir du premier coup d’œil que ce groupe de mots l’emmènera, dans son navigateur Internet, sur la page concernée.

De plus, la carte du site matérialise maintenant le fait que, dans la page Index.HTM, un lien mène vers Present.HTM

Nous pouvons maintenant créer les liens qui mèneront de notre page d’accueil vers les autres pages du site, Hobbies.HTM, et Favoris.HTM

Il peut être sympathique de créer des liens sur des images. Nous allons installer dans nos pages une petite image qui permettra au visiteur de revenir à la page d’accueil.

Page 17: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Créer un lien hypertextuel local sur une image

Créer un lien hypertextuel local sur une image

Insérez l’image Home.GIF, du dossier Images, dans la page Present.HTM

Puis, par l’intermédiaire de la fenêtre des propriétés, dont vous pouvez constater qu’elle s’adapte à l’objet sélectionné, vous pouvez comme pour le texte lui assigner une cible, et faire d’une image un lien hypertextuel.

Si vous souhaitez qu’un cadre matérialise le fait que cette image est un lien hypertextuel, entrez une valeur dans le champ « Bordure ».

Sauvegardez d’un seul coup les modifications apportées dans n’importe quelles pages de votre site :

Fichier, Enregistrer tout (Ctrl + Maj + S)

Vous pouvez copier et coller cette image sur les autres pages une fois que vous aurez défini sa cible, son lien sera copié aussi.

Page 18: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Images réactivesCréer une image réagissant au passage de la souris

La création d’une image réactive, ou image survolée, (que DreamWeaver 2 nomme « retournée » ou « renouvelée ») se fait par le menu Insertion.

Le logiciel demande alors les deux images, celle qui figurera l’état du bouton au repos, et celle qui figurera le bouton survolé par la souris, ainsi que la cible du lien du bouton lorsqu’il sera cliqué :

Page 19: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Images réactivesImages à carteVous pouvez définir au sein d’une même image plusieurs zones réactives, qui dirigeront le visiteur vers autant de liens. C’est la fonction « Carte … » de la fenêtre des Propriétés.

Vous pouvez alors, après avoir nommé la carte, dessiner des régions à l’aide des outils fournis, qui seront pour chacune d’entre elles associées à un lien à définir …

Les zones définies, et elles seuls, qui dans le site ne seront plus visibles, sont en revanche porteuses d’un lien, ce qui se manifeste au passage de la souris.

Créer une image portant plusieurs liens

Page 20: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Voir le site dans le navigateur

Voir le site dans le navigateur

Dreamweaver propose dans son menu Fichier, la fonction Aperçu dans le navigateur (F12), qui crée un fichier temporaire dans le dossier du site afin de l’ouvrir dans l’explorateur Internet. Ceci vous montre donc l’aperçu de la page, qu’elle ait été sauvegardée ou pas.

Vous pouvez ainsi faire des allers et retours entre Dreamweaver et le navigateur Internet pour vérifier pas à pas le rendu de vos modifications sur la page telle qu’affichée dans votre navigateur Internet.

Dreamweaver vous permet, au cas où, de recenser les navigateurs Internet présents : Fichier, Aperçu dans le navigateur, Editer la liste des navigateurs.Sinon, sauvegardez (Crtl + Majuscule + S), puis allez par l’Explorateur ou le Poste de travail ouvrir le fichier HTML de la page que vous souhaitez visualiser. Si celle-ci était déjà ouverte, il vous suffira par la suite d’en demander l’actualisation au navigateur (F5).

Dreamweaver : la page a été modifiée Ctrl + S (Ré) ouvrir la page HTML Si déjà ouverte, F5

Pour commuter rapidement entre 2 applications : Alt + Tab

Page 21: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Ajout d’un papier peint

Ajout d’un papier peint

Dans les propriétés de la page (Modifier, Propriétés de la page) vous pouvez spécifier un papier peint, en allant le chercher sur le disque par l’intermédiaire du petit dossier « Parcourir » :

Page 22: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Autres possibilités des tableaux

Autres possibilités des tableaux

Prenons comme exemple la page Favoris. Nous souhaiterions une présentation de ce type :C’est un tableau de 4 colonnes par 9 lignes. Nous allons voir comment, dans ce tableau :

des colonnes ou lignes peuvent s’étendre par-dessus les autres donner un fond à certaines cellules fixer une dimension à une ligne ou une colonne ajouter ou supprimer ligne ou colonne

Page 23: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Autres possibilités des tableaux : le menu contextuel

Autres possibilités des tableaux : le menu contextuel

Fusionner plusieurs cellules et obtenir des arrangements quelconques dans un tableau :

Diviser une cellule :

Supprimer lignes ou colonnes :

La fenêtre des propriétés de la cellule permet aussi de déterminer la justification de la cellule (Horz et Vert), sa couleur, un papier peint, la couleur de ses bords, ainsi que les dimensions souhaitées (en pourcentage ou en pixels) …

Ces deux dernières commandes sont répliquées dans la fenêtre des propriétés de la cellule

Page 24: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Compatibilité des navigateursRemarque concernant la compatibilité des navigateurs. Si la couleur des bordures apparaît bien dans Internet Explorer 4.0 et plus, celle-ci ne s'affichera pas chez les visiteurs de votre site qui utilisent Netscape.

Compatibilité des navigateurs

La commande Fichier, Vérifier navigateurs cibles effectue un test de compatibilité avec le ou les navigateurs de votre choix, et fournit un rapport détaillé des instructions HTML qui ne seront pas prises en compte dans la version du navigateur choisie.

Une commande HTML non comprise par un navigateur ne proque pas de blocage, elle est simplement ignorée, comme par exemple la bordure colorée d’une cellule dans Netscape :

Page 25: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Liens http et mailCibles de liens en http

L’affectation d’une adresse Web comme cible d’un lien se fait en écrivant, ou collant, l’adresse du site ou de la page du site dans les propriétés de l’image … Mettez toujours http:// au début de l’adresse car c’est ce qui permet à DreamWeaver de différencier un site distant d’un fichier sur votre disque !

Adresse e-mail comme cible de lien

L’affectation d’une adresse Mail comme cible d’un lien est obtenue par « mailto: » suivi de l’adresse e-mail à laquelle on veut donner accès par un clic sur le lien …

Lorsque l’utilisateur cliquera sur le lien, son client de messagerie se lancera avec l’adresse fournie comme adresse de destination du courrier

Page 26: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Edition des images

Edition des images

L’image, puisqu’elle ne fait pas partie intégrante de la page HTML, ne peur être copiée dans la page, mais doit être sauvegardée sur le disque. Si elle est extérieure au dossier du site, Dreamweaver propose d’y copier le fichier.

Le concepteur du site peut imposer des dimensions à une image, à la souris ou par la fenêtre de ses propriétés. Pour redimensionner une image en conservant ses proportions, maintenir une touche Shift.

Et pour rendre à une image ses dimensions originelles, on pourra utiliser son menu contextuel : Actualiser la taille

Page 27: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Lien vers un endroit précis d’une page 1

Lien vers un endroit précis d’une page

Soit un lien vers les dernières mises à jour du site (les « nouveautés ») qui, dès la page d’accueil, propose de se rendre directement en certains points des pages, où le visiteur pourra aller voir directement les changements apportés au site :

On souhaite que le lien nous amène non seulement sur la page mais à cet endroit précis, où, dans la page qui peut être fort longue, est située l’information cible du lien.

Il faut commencer par donner un nom à cet endroit …

Page 28: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Lien vers un endroit précis d’une page 2

Lien vers un endroit précis d’une page

Pour donner un nom à un endroit quelconque d’une page, y placer le curseur et utiliser la commande de création d’une ancre nommée.

Et l’on saisit alors le nom de l’ancre, qui sera utilisée comme cible du lien :

Apparaît alors (sinon, voir Affichage, Éléments invisibles) à l’endroit choisi le symbole de l’ancre nommée, dont vous pouvez ensuite changer l’emplacement :

Page 29: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Utiliser le pointeur

Utiliser le pointeur

Voici une méthode très sure permettant de créer un lien vers une ancre. Elle utilise une fonction originale de Dreamweaver, qui permet de désigner la cible d’un lien (fichier, page, ancre, …) au moyen d’une flèche depuis la fenêtre des propriétés. Les deux pages sont visibles.

L’origine du lien, ici le texte, est sélectionnée.

Cliquez sur l’outil de pointage de la fenêtre des propriétés du texte.

Amenez la pointe de la flèche sur l’ancre (vous voyez d’ailleurs le nom de l’ancre apparaître dans la zone « Lien » des propriétés du texte).

C’est tout.

Page 30: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Contrôle du site

Contrôle du site

DreamWeaver peut, pour tout le site ou pour les pages sélectionnées :

tester la validité des liens internes (liens brisés) lister les liens vers l’extérieur lister les fichiers orphelins dans le dossier du site

Page 31: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

La bibliothèqueLa bibliothèque, outil (précieux) de cohérence et de réutilisabilité

Lorsqu’un même objet est réutilisé dans le site, glissez-le dans la bibliothèque (affichable par Fenêtre, Bibliothèque).

Alors, seul l’objet contenu dans la Bibliothèque existe. Les copies que vous pouvez en faire, en le glissant ensuite de la Bibliothèque vers d’autres pages, ou par le bouton « Ajouter à la page » ne créent que des références à l’original, lui-même conservé dans la Bibliothèque …

L’avantage de cette méthode est l’efficacité avec laquelle vous pourrez contrôler les modifications ultérieures de l’élément de la bibliothèque, celles-ci se répercutant automatiquement sur toutes ses références par la commande Modifier, Bibliothèque, Mettre à jour …

Vous pouvez définir une bibliothèque différente pour chaque site.

Un double-clic sur l’objet dans la bibliothèque permet de le modifier

Page 32: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Calques

Calques

Les calques sont utilisés pour positionner les éléments avec précision dans la fenêtre du navigateur. Les calques peuvent contenir du texte, des images, et même d'autres calques. Tout ce que vous pouvez placer dans le corps d'un document HTML peut être inséré dans un calque. Les calques sont particulièrement utiles pour la superposition de certaines parties de votre page. Grâce aux scénarios, vous pourrez déplacer les calques selon une ligne de temps.

Identificateur signalant l’emplacement du code HTML définissant le calque dans la page (cliquer sur l’identificateur sélectionne le calque)

Cliquer dans le calque fait apparaître un curseur mais ne le sélectionne pas

Quand le calque est sélectionné, ses propriétés apparaissent :

Un calque peut être déplacé par sa poignée, ou redimensionné par ses côtés.

Voyez Fenêtre, Calques, pour gérer le chevauchement, la visibilité, ou l’imbrication des calques

Page 33: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Calques - ExempleCalques - Exemple de positionnement d’une image

Au lieu de tapisser la page avec un motif répété, un calque permettrait de placer une image en fond.

Un calque est créé, avec, dans la fenêtre de ses propriétés, une abscisse et une largeur relatives :

On y insère l’image que l’on souhaite voir figurer dans le fond de la page :

Puis, au moyen de la propriété « Ordre Z » du calque, que l’on fixe à –1, on l’envoie au fond de la page … Ceci ne sera visible dans DreamWeaver qu’une fois que le calque ne sera plus sélectionné.

Page 34: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Les comportements

Interactivité et animation

Il existe plusieurs façons d'ajouter interactivité et animation à vos pages à l'aide de Dreamweaver :

Les comportements

Vous permettent d’exécuter des tâches en réponse à des événements spécifiques, tels la mise en surbrillance d'un bouton lorsque l'utilisateur passe dessus avec la souris, l'ouverture d'une deuxième fenêtre de navigation une fois la page principale chargée …Un comportement est la combinaison d'un événement et d'une action (Ex : afficher un calque lorsque la souris passe au-dessus d’une image).

Choix de l’action et de l’évènement qui devra la déclencher.

Page 35: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Les scénarios

Interactivité et animation

Les scénarios

Insérons l’image ChauveSouris.gif dans le calque et vérifions (en sauvegardant la page Dreamweaver puis en rafraichissant la page Web ou en appelant l’aperçu par F12) la possibilié de superposer le calque librement aux autres éléments de la page.

Les scénarios créent une animation en modifiant la position, la taille, la visibilité, ou l'ordre de superposition des calques. Ils peuvent également modifier les fichiers source des images. Les scénarios peuvent déplacer seulement des calques. Les scénarios utilisent le code HTML dynamique pour modifier la position d'un calque ou la source d'une image dans le temps ... (HTML dynamique, ou DHTML, décrit la capacité de modifier le style ou les propriétés de positionnement à l'aide d'un langage de script).

Page 36: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Création d'une animation de scénarioSi vous voulez animer un calque :2. Déplacez-le vers l'emplacement où il devrait

se trouver au démarrage de l'animation.3. Choisissez Fenêtre > Scénarios.4. Sélectionnez le calque ou l'image à animer. 5. Faites glisser l'objet sélectionné

dans l'inspecteur de scénarios

7. Cliquez sur l'indicateur d'image-clé à la fin de la barre.

12. Déplacez le calque vers l'emplacement où il devrait se trouver à la fin de l'animation

13. Si vous voulez que le calque se déplace en courbe, cliquez sur un cadre au milieu de la barre d'animation et choisissez Ajouter image-clé du menu contextuel. Vous pourrez ensuite déplacer le calque pour infléchir sa trajectoire au moment où il passe sur les images-clés.

Création d'une animation de scénario

temps

calques

Nous ne pouvons préciser un changement de paramètre que dans une image-clé, en la créant au besoin. Les autres images étant interpolées par DreamWeaver.

Page 37: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Ajout d’un comportement dans un scénario

Ajouter un comportement dans une animation de scénario

La fenêtre Scénarios comporte un canal des comportements qui vous permet sur une image donnée, d’ajouter un comportement

Ajout d’un comportement Choix de l’action sur cette image

Le scénario modifié : le calque Chauve-Souris se masque une fois arrivé sur la dernière image …

Page 38: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Création d’un jeu de cadresLes cadres divisent une page web de façon à ce que différents fichiers puissent être chargés à plusieurs endroits sur une même page. De manière générale, les cadres définissent une zone de navigation et de contenu pour une page.

Création d’un jeu de cadres

La création d’un jeu de cadres se fera par le menu Modifier :

La fenêtre « Cadres » vous permettra de sélectionner le cadre sur lequel vous voulez intervenir.

Et, une fois le cadre sélectionné, vous pourrez le modifier par la fenêtre des Propriétés :

Pour enregistrer le jeu de cadres, choisissez Fichier, Enregistrer le jeu de cadres.

Page 39: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Les propriétés d’un cadre

Création d’un jeu de cadres

Page HTML devant apparaître dans le cadre

Le nom du cadre courant à utiliser pour les références du script et de la cible d'hyperlien. Le nom du cadre doit être en un seul mot

Détermine si la barre de défilement apparaît lorsqu'il n'y a pas assez de place pour afficher le contenu du cadre courant

Empêche l'utilisateur de faire glisser la bordure du cadre courant et de le redimensionner

Marges de droite et de gauche en pixels

Hauteur des marges en haut et en bas du cadre en pixels

La fenêtre Propriétés d’un cadre :

Page 40: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Lien vers un cadre

Création d’un jeu de cadres

Comment faire apparaître la cible d’un lien dans un cadre donné ?

Les cadres doivent être préalablement nommés (à l’aide de leur fenêtre Propriétés) :

La seule différence sera que, lors de la définition du lien, il faudra indiquer dans le fenêtre Propriétés le cadre qui devra recevoir la cible du lien, en choisissant son nom dans la liste « Cible »:

Pensez ensuite à sauvegarder les cadres par Fichier, Enregistrer le jeu de cadres. Cette opération est de toutes façons incluse dans la commande Fichier, Enregistrer tout.

Page 41: Initiation au logiciel DrealWeaver, Éditeur de sites Web In t PDF... · DreamWeaver 2 Créer un tableau Dans la conception de pages Web, les tableaux sont très importants et sont

DreamWeaver 2

Quelques liens

Quelques liens

http://fr.selfhtml.org/Faire soi-même les fichiers HTML SELFHTML comprend aussi bien des chapitres d'initiation pour les débutants que des chapitres de référence pour les professionnels. La documentation est un mélange de didacticiel et d'ouvrage de référence.Le contenu de ce site est librement copiable.Traite aussi : l’HTML dynamique, le Javascript, le PHP, …

http://www.toutjavascript.com/Tutoriaux Javascript, scripts à télécharger, questions/réponses…

Le Droit Français concernant les Sites Web

Loi n° 78-17 du 6 janvier 1978 relative à l'informatique, aux fichiers et aux libertés, et projet de dispositions modifiant la loi

Loi n° 2000-719 du 1er août 2000, modifiant la loi n° 86-1067 du 30 septembre 1986 relative à la liberté de communication

Source : http://www.chaillot.com/fr/