Fiche Dreamweaver

Transcription

Fiche Dreamweaver

1.1
Fiche de cours - Dreamweaver
Créer le site
Pour créer un site internet, vous devez tout d’abord créer un dossier qui contiendra tous les éléments qui
composent le site. Ce dossier est appelé « dossier racine ». En outre la première de votre site devra s’appeler
index.html. Dans Dreamweaver, vous déclarez le site en utilisant la commande Site > Gérer les sites.
Cliquez sur Nouveau > Site. Puis dans Avancé : donnez un nom et indiquez où se trouve le dossier racine.
Modifier les propriétés de la page
Pour modifier les propriétés de la page, utilisez la commande Modifier > Propriétés de la page
Couleur du lien
standard.
Vous indiquez quelle image ou couleur utiliser en arrière-plan. Vous pouvez changer la couleur du texte par
défaut ainsi que la couleur des liens. Les marges créent un espace entre le contenu de la page et les bords de
fenêtre du navigateur.
Laurent Oliver
GRETA Touraine
1.2
Couleur du lien
quand on passe
dessus.
Couleur du lien
une fois cliqué.
Couleur du lien
quand on clique
dessus.
Permet de supprimer le
soulignement des liens
Attention ! le titre de la page est une information qui est différente de son nom de fichier.
Tracé de l’image permet de placer une image en fond de page avec une opacité. Elle sert de guide pour la
mise en page. Elle est invisible dans le navigateur.
Laurent Oliver
GRETA Touraine
2.1
Préparation du texte
Nous sommes malheureusement limités dans l’usage
de polices de caractères. En effet, votre site peut être
visité par des personnes qui utilisent un Macintosh,
un PC avec Windows ou Linux, certaines travaillent
sur d’autres systèmes comme Unix. Toutes ces plateformes n’utilisent pas les mêmes jeux de caractères.
De plus, l’affichage des caractères dépend des
polices installées sur l’ordinateur. Par exemple, vous
demandez d’afficher un caractère en Trajan, si le
poste ne contient pas cette police, votre texte sera
écrit dans une police de substitution.
Pour remédier à cela, utilisez la commande
Texte > Police > Modifier la liste des polices.
Elle permet de créer une liste de caractères. Par
exemple pour la première liste. On demande à afficher en priorité du Arial. Si cette police est absente,
on affiche du Helvetica sinon du Sans Serif
Les styles HTML
Attention ! Ne pas confondre avec les feuilles de style CSS (voir fiches suivantes)
De plus cette commande a disparu depuis la vervion MX 2004.
Accessible par le menu Fenêtre > Styles HTML permettent de mémoriser des attributs de caractères et de
paragraphes pour ensuite les appliquer sur d’autres pages.
Le (a) est un attribut de Sélection. Il contient tous
les attributs de mise en forme des caractères.
Paragraphe contient en plus des attributs d’alignement et de format.
Laurent Oliver
GRETA Touraine
2.2
Nous retrouvons ces attributs dans la palette des propriétés :
Applique les styles CSS
la graisse alignement
lien hypertext
Couleur du texte - Listes numérotées ou à puces - Retrait du texte
La
La
La
La
La
La
La
taille
taille
taille
taille
taille
taille
taille
1
2
3
4
5
6
7
correspond
correspond
correspond
correspond
correspond
correspond
correspond
à
à
à
à
à
à
à
une
une
une
une
une
une
une
taille
taille
taille
taille
taille
taille
taille
de
de
de
de
de
de
de
8 pt
10 pt
12 pt
14 pt
18 pt
24 pt
36 pt
Format définit des éléments pré-formatés pour la mise
en forme. Ils sont peu utilisés directement, mais beaucoup plus utiles en correspondance avec les feuilles de
style CSS (voir fiche). Les formats s’intitulent En-tête1 à
En-tête6 et se codent en HTML H1 à H6.
Listes à puces
Sélectionnez plusieurs paragraphes et dans
la palette des propriétés, cliquez sur
pour insérer une liste à puces ou
numérotée.
Cette commande permet de formater les
paragraphes en éléments de liste. Vous
pouvez choisir différents types de listes en
utilisant le menu Modifier > Propriétés de
liste.
Dans le cas de listes numérotées, vous
choisissez le début du comptage.
Laurent Oliver
GRETA Touraine
3
Insérer une image
Les images utilisées pour internet sont aux formats Gif, JPEG ou PNG. Lorsqu’il s’agit d’illustrations, de logos, de
titres, d’images comportant peu de couleurs (≤256), on utilise le format Gif. Sinon pour des photos (plus de milliers de couleurs) , on utilise le format JPEG. Le PNG est un format plutôt utilisé pour le travail des images
(sur Fireworks) et peu répandu dans les pages web.
Pour insérer une image, cliquez sur le bouton
de la palette Commun. voici les propriétés d’images :
Nom de l’image - Taille - Source - Lien hypertext - Légende
Style CSS de l’image
Alignement de l’image par rapport au texte
Mappage
Espace V et Espace H définissent un espace vertical et horizontal autour de l’image pour que le texte ne vienne
pas se coller contre la photo.
Src faible affiche une image en basse qualité pendant que l’originale se charge.
Bordure crée un cadre noir autour de l’image.
Le mappage permet de créer des zones sensibles sur une image.
Les zones sont rectangulaires, circulaires ou polygonales.
Cela permet de générer plusieurs liens sur une même image.
Exemple de mappage.
Laurent Oliver
GRETA Touraine
4
Eléments du site (actifs)
Dans la palette Fenêtre > Actifs sont listés les couleurs,
les images, les liens, les animations Flash ou
Shockwave, les vidéos, les scripts… utilisés dans le site.
Couleurs du site :
L’option Favoris permet de stocker certains de ces éléments pour les utiliser dans d’autres sites. Pour ajouter
des éléments aux favoris, cliquez sur le bouton + en
bas à droite de la fenêtre.
Liste des images utilisées dans le site :
Ajouter aux favoris
Liens hypertext du site :
Cliquez ici pour actualiser la liste
Laurent Oliver
GRETA Touraine
5.1
Les tableaux
Les tableaux sont très utiles pour la mise en page. Ils permettent de créer une structure fixe dans la page.
Pour insérer un tableau, cliquez sur le bouton
dans la palette des objets. Renseignez le nombre de lignes
et de colonnes souhaitées ainsi que la taille du tableau. Une taille donnée en pixel fixera le tableau. Une taille
donnée en % sera relative à la taille de la fenêtre du navigateur. (50% représente la moitié de la fenêtre quelle
que soit sa taille).
Remplissage des cellules
Espacement des cellules
Bordure
Une fois le tableau inséré, vous pouvez le modifier grâce à la palette des propriétés :
Paramètres du tableau :
Paramètres d’une cellule de tableau :
Taille - Couleur d’arrière-plan - couleur de la bordure
Permet de fusionner ou de scinder des cellules - Alignement du contenu des cellules
Laurent Oliver
GRETA Touraine
5.2
Mode Mise en forme
Le mode Mise en forme est très pratique pour effectuer une mise en page à la manière d’un maquettiste PAO.
Pour activer ce mode cliquez sur le bouton Mise en forme de la palette Mise en forme.
Tout d’abord, délimitez votre tableau en utilisant le bouton
Pour revenir en mode normal, cliquez sur le bouton Standard.
. Puis insérer des cellules avec le bouton
.
Tableau
Cellule
Formater le tableau
En sélectionnant une cellule du tableau, vous pouvez
ajouter ou supprimer un ligne ou une colonne du
tableau. Pour cela, utilisez les commandes du menu
Modifier > Tableau
Dans le menu Commandes > Formater le tableau,
cette fonction permet de créer une mise en forme
du tableau en utilisant des styles prédéfinis et en
les personnalisant par la suite.
Laurent Oliver
GRETA Touraine
6
Les ancres et liens
Les ancres
Les ancres sont des objets invisibles qui permettent de créer des liens à l’intérieur d’une même page.
Cliquez à l’endroit où doit aboutir le lien et insérez une ancre en cliquant sur son icône dans la palette
Commun.
Nommez l’ancre dans les propriétés.
Ensuite sélectionnez l’objet qui contiendra le lien et dans la propriété du lien écrivez :
#nom de l’ancre ou faîtes glisser la cible de lien sur l’ancre.
#clients
Cible de lien
Le lien est créé.
Lien vers l’ancre
Liens et cibles :
Pour créer un lien vers une nouvelle page, cliquez sur le dossier jaune à droite du lien dans la palette des
propriétés et indiquez la page à afficher. Elle peut s’afficher de différentes manières. Pour cela on utilise une
cible : Blank : ouvre une nouvelle fenêtre, Top : efface les jeux de cadres, Parent : affiche la page dans le jeu de
cadres qui contient le lien, Self : la page s’affiche au même endroit. Dans le cas de jeux de cadres, les cibles
sont aussi utilisées pour spécifier dans quel cadre afficher une page.
../intro.html
Laurent Oliver
GRETA Touraine
7.1
Les feuilles de styles CSS
Les feuilles de styles CSS sont des éléments très puissants pour formater divers éléments qui composent une
page HTML. Elles permettent de paramétrer du texte, des images, certaines propriétés de page, les calques…
Une feuille de styles contient plusieurs styles que vous pouvez appliquer sur les pages d’un ou plusieurs sites.
Il existe deux types de feuilles de styles : interne et externe. Une feuille de styles interne est propre à une
seule page. Vous pouvez néanmoins la copier/coller sur une autre page. La feuille de styles externe est beaucoup plus intéressante car elle s’enregistre sous la forme d’un fichier indépendant (feuille.css) qui se lie aux
pages. On dit que l’on attache la feuille de styles.
Pour créer une feuille de styles externe, vous pouvez utilisez le menu Texte > Style CSS > Nouveau style
ou utilisez la palette des styles : Fenêtre > Styles CSS.
Il existe trois types de styles : balise HTML, classe, sélecteur CSS. Ils se paramètrent de la même façon mais ils
s’appliquent différemment..
Balise HTML :
Classe :
Balise HTML redéfinit les paramètres par défaut de certains codes HTML. Exemple :
Les attributs de format En-tête sont définis par les
balises “H1 à H6”. Ils se personnalisent pour régler des
attributs de paragraphes. La balise” a” indique un lien
hypertext. Nous pouvons donc changer la couleur des
liens et demander à ne pas les souligner. Connaissant
quelques codes HTML (voir fiche) cet outil est très utile.
Les classes créent des styles qui s’appliquent
par sélection d’objet et non directement par le
code HTML. Nous pouvons en créer à l’infini.
Attention à placer un point devant le nom de
la classe (.class1).
Sélecteur CSS : édite quatre objets HTML.
a:link lien standard
a:hover lien lorsque la souris passe dessus.
a:visited lien une fois utilisé.
a:active lien actif lorsque l’on clique dessus.
Palette des styles affiche uniquement les classes utilisées.
A. Attacher la feuille de styles à une page.
B. Ajouter un style
C. Modifier un style
D. supprimer un style
A - B - C- D
Laurent Oliver
GRETA Touraine
7.2
Cliquez sur OK et enregistrez la feuille de styles externe.
Vous pouvez ensuite paramétrer le style : ci-contre la catégorie Type définit les attributs de caractères.
Décoration : aucune permet de supprimer le soulignement des liens en éditant la balise html <a>.
La catégorie Arrière-plan paramètre les attributs d’arrière-plan d’un objet (texte, tableau, page…).
En éditant la balise <Body>, vous pouvez créer un fond de page fixe et sans répétition :
La catégorie Bloc permet de modifier des attributs de paragraphes.
Alinéa
Laurent Oliver
GRETA Touraine
7.3
La catégorie Boîte permet de formater des images, des blocs de texte.
Bordure
Remplissage
Texte, image ou
autre objet...
Marges
La catégorie Bordure crée une bordure autour d’un objet.
La catégorie Liste permet définir des listes à puces ou numérotées. Pour cela éditez les balises html ul ou ol.
Laurent Oliver
GRETA Touraine
7.4
La catégorie Positionnement agit sur les calques (voir fiche).
La catégorie Extensions est peu utilisée.
Pour modifier un style dans une feuille de style :
Texte > Style CSS > Modifier feuille de style
ou utilisez la palette des Styles CSS.
Sélectionnez le style à modifier et cliquez sur Modifier.
Cliquez ensuite sur Enregistrer pour mémoriser les modifications.
Contenu de la feuille de styles feuillepagode.css.
Ici tous les styles sont visibles.
Laurent Oliver
GRETA Touraine
8.1
Insertion d’objets
Insère un objet “Flash”
Créer un bouton “Flash”
Créer un texte “Flash”
Insère un objet Shockwave (.swf ou .dcr) issu de Flash ou director
Insère du son, de la vidéo ou autre objet spécifique
Envoi d’e-mail
Date
Roll over
Insérer une page Html issue de Fireworks
Barre de navigation
Roll over (classique) :
Nommez l’image. Indiquez quelles images à
afficher pour l’état dessus et survolé. Donnez
l’adresse du lien URL si elle existe.
Dreamweaver crée un comportement qui
réalise le roll-over. Pour le corriger, vous devez
afficher la palette des comportements (par le
menu Fenêtre) et double cliquez sur
Intervertir une image.
Dans la liste des images de la page, sélectionnez celle du roll-over et indiquez quelle image
sera utilisée en survol.
Laurent Oliver
GRETA Touraine
8.2
Barre de navigation :
Cet objet est utilisé pour créer des menus.
Pour chaque image du menu vous spécifiez l’état
à afficher : normal, quand la souris passe dessus et
quand on clique (Image abaissée). Image dessus
déjà abaissée est l’image à afficher une fois que
l’on a déjà cliqué. De plus indiquez l’URL et la cible
dans le cas de jeux de cadres ou d’affichage particulier de l’URL (Blank : ouvre une nouvelle
fenêtre, top : efface les jeux de cadres, parent :
affiche la page dans le jeu de cadres qui contient
le lien). Vous choisissez également la disposition
du menu (horizontal ou vertical). Il est préférable
de créer le menu dans un tableau.
Pour corriger la barre de navigation, cliquez sur
une des images du menu et ouvrez Modifier >
barre de navigation. Vous retrouvez les mêmes
paramètres que précédemment.
Menu de routage :
Le menu de routage crée une liste déroulante qui permet de choisir un lien vers une autre page.
Dans Texte, écrivez le texte à afficher dans le menu et donnez l’URL correspondante. Ouvrir les URL dans
permet de spécifier une cible dans le cas de jeux de cadres ou d’affichage particulier de l’URL (Blank : ouvre
une nouvelle fenêtre, top : efface les jeux de cadres, parent : affiche la page dans le jeu de cadre qui contient
le lien). Pour ajouter un nouvel élément à la liste, cliquez sur +.
Dreamweaver crée un comportement. Pour corriger le menu, cliquez deux fois sur le comportement Menu de
routage. Vous retrouvez les même praramètres que précédemment.
Laurent Oliver
GRETA Touraine
8.3
Créer un bouton dynamique :
Cette commande crée un bouton interactif.
Vous pouvez choisir parmi une liste de boutons avec des styles pré-définis.
Personnalisez ensuite le bouton en écrivant
son intitulé, en choisissant la police que
vous souhaitez sans restriction.
Dreamweaver crée automatiquement un
fichier button1.swf qui est l’image animée
du bouton. Il ne faut pas l’effacer.
Créer un texte de survol :
Cette commande crée un texte interactif.
Vous pouvez personnaliser le texte en choisissant la police que vous souhaitez sans
restriction, ainsi que les attributs de texte
ci-contre
Dreamweaver crée automatiquement un
fichier text1.swf qui est l’image animée du
texte. Il ne faut pas l’effacer.
Insérer la date du jour “fixe” (date de la
création du document ou de son
enregistrement) :
Pour insérer une animation Flash (animation.SWF)
utilisez le bouton
. L’option Lecture auto permet
de lancer automatiquement l’animation.
Pour insérer du son au format WAV ou une vidéo au
format MPEG ou MOV, utilisez le bouton plug-in des
objets spéciaux
Laurent Oliver
.
GRETA Touraine
9.1
Les jeux de cadres
Les jeux de cadres sont très courants sur internet. Ils permettent de couper une page en plusieurs parties (cadres).
L’ensemble de la structure s’appelle un jeu de cadres. C’est une page HTML (Frameset) qui mémorise le découpage
et les pages à afficher dans chaque cadre. Pour créer un jeu de cadre, utilisez la palette des objets cadres.
Choisissez le style
de découpe
séparation des cadres
palette des cadres
paramètres du jeu de cadres
Vous pouvez paramétrer chaque cadre en le sélectionnant grâce à la palette des cadres (accessible par le menu
fenêtre). Pensez à nommer tous les cadres. Une fois le cadre sélectionné, vous optenez les réglages suivants :
source du cadre
nom du cadre
Laurent Oliver
GRETA Touraine
9.2
Dans la barre des outils cliquez sur ce bouton
et dans Assistances visuelles demandez à
afficher les bordures du cadres.
En cliquant sur la bordure de séparation des cadres vous obtenez ses propriétés du jeu de cadres :
hauteur ou largeur du cadre sélectionné ici
Exemple d’un jeu de cadres (composé au minimum de trois pages) : la page est coupée en deux horizontalement. En haut le menu est permanent tandis que d’autres pages se chargent dans le cadre inférieur. Les liens se
font grâce à l’attribut Cible qui indique dans quel cadre afficher la page.
Cadre-haut : menu-haut.html
Cadre-bas : destinations.html
Le jeu de cadre (Frameset) : cadre-destinations.html
Laurent Oliver
GRETA Touraine
10.1
Les calques ou boîtes flottantes
Les calques sont des boîtes qui contiennent des images, du texte ou d’autres éléments. Elles sont placées audessus des éléments de la page et se placent à volonté comme des blocs dans un logiciel de mise en page PAO.
Elles présentent plusieurs intérêts :
1. Réaliser une mise en page comme un maquettiste PAO.
2. Ce sont des éléments dynamiques, on peut les animer, les afficher ou les masquer à volonté.
3. Elles peuvent de paramétrer grâce aux feuilles de styles CSS en éditant la balise Div.
Pour insérer un calque cliquez sur le bouton
de la palette Mise en forme et tracez un rectangle.
La palette des calques (du menu fenêtre) permet
de sélectionner les calques d’une page.
Mise en forme avec des calques.
Propriété d’un calque :
Pensez à nommer les calques.
G indique la distance entre le bord gauche de la page et le calque.
S indique la distance entre le bord supérieur de la page et le calque.
L et H sont la largeur et la hauteur du calque.
Index-z est un numéro qui indique le degré d’empilement des calques (premier-plan/arrière-plan) ;
1 est le niveau le plus bas.
Vous pouvez insérer couleur et une image d’arrière-plan.
Visib. indique si le calque doit s’afficher ou être masqué.
Balise : option Div est la meilleure.
Découp. recadre l’intérieur du calque G - D - S - B indiquent le début et la fin de la surface visible à gauche,
à droite, supérieur et bas.
Si vous effectuez la mise en page avec des calques, vous pouvez les convertir en tableau et vice-versa. Menu
Modifier > Convertir...
Laurent Oliver
GRETA Touraine
10.2
Les comportements de calques
Afficher - Masquer un calque :
Insérer un objet ou texte qui commande
l’action sur le calque. Ouvrez la palette
des comportements grâce au menu
Fenêtre. Cliquez sur le bouton + et choisissez Afficher-Masquer les calques.
Dans la liste des calques choisissez ceux
à masquer ou à afficher.
Texte du calque :
l’action sur le calque. Ouvrez la palette
des comportements grâce au menu
Fenêtre. Cliquez sur le bouton + et choisissez Texte du calques.
Dans la liste des calques choisissez le
calque qui recevra le texte à la place de
son contenu initial.
Déplacement de calque :
Cette commande permet à l’internaute de
déplacer lui-même un calque. Ce déplacement
est soit libre ou contraint (limité à une zone
rectangulaire).
De plus vous pouvez définir une cible et indiquer par un message que l'utilisateur a atteint
la cible.
l’action sur le calque. Dans la palette des comportements choisissez Déplacement de calque.
Choisissez le calque à déplacer. Dans le cas
d’un déplacement restreint H (haut), B (bas), G
(gauche), D (droite) délimitent le rectangle de
contrainte par rapport aux bords du calque
Cible de dépôt est la cible à atteindre : le
point défini par H (haut), G (gauche). Aligner
si dans x pixels créer une zone magnétique
pour attirer le calque vers la cible.
Avancé : Poignée de déplacement indique une zone particulière pour saisir le calque. En déposant appel
Javascript : écrivez, alert(“Gagné“). Ceci affichera le message Gagné lorsque la cible sera atteinte.
Laurent Oliver
GRETA Touraine
10.3
L’animation de calques
Il est possible d’animer les calques. Affichez la palette des Scénarios grâce au menu fenêtre. Sélectionnez le
calque à animer. Dans le menu de la palette ou dans Modifier > Scénarios activez la commande Enregistrer le
chemin du calque. Puis déplacez le calque pour créer l’animation.
Chemin du calque
L’animation est retranscrite dans la palette des Scénarios. Chaque ligne numérotée peut recevoir l’animation
d’un calque. Les ronds bleus sont des images clés (Keyframes). Cela signifie qu’à cet instant le chemin change
de sens.
Chaque case numérotée en horizontale représente une image (Frame). Ici, Il y a 15 images par secondes
(option lps). Pour que l’animation démarre à l’ouverture de la page, cochez Lecture auto.
La ligne B permet à un instant donné de lancer un comportement.
Il peut être divers (voir la fiche des comportements). En ce qui concerne l’animation de calque, dans la palette
comportements > Scénarios vous pouvez demander de lire le scénario, d’arrêter le scénario ou d’atteindre une
image. Cette-dernière permet de créer un nombre précis de boucles pour l’animation.
Par exemple : placez ce comportement en fin de
scénario et demandez d’atteindre l’image 1 avec
2 boucles.
L’animation sera jouée trois fois.
Laurent Oliver
GRETA Touraine
11.1
Réglage d’un formulaire
Pour réaliser un formulaire, utilisez les objets de la palette Formulaires.
Cliquez en premier sur le bouton insertion de formulaire
.
Tous les éléments du formulaire doivent être inscrits dans le rectangle en pointillés rouges qui délimite le formulaire.
Vous pouvez aussi insérer des éléments de mise en page comme des tableaux, du texte des images.
Attention ! pensez à nommer chaque objet du formulaire.
Pour insérer un champ de texte, utilisez la palette Formulaires dans la palette des objets.
Cliquez sur
Propriété d’un champ de texte :
nom du champ
Valeur affichée par défaut
Largeur du champ et nombre de caractères maximum.
Si
vous
cochez
l’option
Multilignes, vous créez une zone
de texte. Elle correspond au
champ adresse dans l’exemple
ci-dessus. Vous pouvez écrire du
texte sur plusieurs lignes.
Laurent Oliver
GRETA Touraine
11.2
Réglage d’une liste déroulante et menu :
La liste déroulante permet de choisir un ou plusieurs éléments d’une liste de choix.
Cliquez sur le bouton Valeurs de la liste pour paramétrer la liste. Renseignez les étiquettes et les valeurs correspondantes. Si vous désirez insérer plusieurs choix, appuyez sur la touche
pour insérer une ligne supplémentaire.
Dans le cas d’une liste déroulante, cochez Autoriser plusieurs pour effectuer plusieurs choix.
L’option Menu permet d’effectuer
un seul choix parmi plusieurs.
Réglage des boutons radios :
Les boutons radio permettent de préciser un choix parmi plusieurs possibilités. Pour cela, sélectionnez un par un les
boutons faisant partie du même groupe et écrivez le même Nom pour chacun. Dans la case Valeur... écrivez la
valeur à renvoyer lorsque le bouton est coché. La coche Activer de la palette de contrôle permet d’indiquer quel
bouton sera activé par défaut.
Réglage des cases à cocher :
Les cases à cocher permettent de préciser plusieurs choix parmi d’autres.
Sélectionnez chaque case à cocher et écrivez un Nom puis écrivez la Valeur à renvoyer lorsque le bouton est
coché. La coche Activer de la palette de contrôle permet d’indiquer quel bouton sera activé par défaut.
Le champ de fichier
permet de transférer des fichiers via le formulaire (upload).
est un élément invisible pour l’internaute, mais vous pourrez visualiser son contenu en
Le champ caché
recevant le formulaire. Donnez un nom et une valeur.
L’objet bouton
Sélectionnez Envoyer le formulaire pour que ce bouton transfère les données. Rétablir le
formulaire permet d’effacer le formulaire pour l’écrire à nouveau. Dans Etiquette, vous personnalisez
l’intitulé des boutons. L’objet
insère une image qui agit comme le bouton Envoyer le formulaire.
Réglage de l’envoi du formulaire :
Dreamweaver permet de transmettre le formulaire sous forme de message électronique. Cliquez sur le rectangle
rouge délimitant le formulaire. Dans la palette de contrôle, écrivez mailto:votre adresse e-mail dans la case
Action.
Dans la case ENCTYPE écrivez : text/plain et Méthode : POST
Propriétés du formulaire
Laurent Oliver
GRETA Touraine
11.3
Vérifier le formulaire
Dreamweaver propose un comportement qui permet de valider un formulaire. Pour chaque champ de formulaire vous pouvez vérifier la nature des données : nombre, intervalle, adresse E-mail. Si vous cochez Nécessaire,
cela indique que le champ doit être obligatoirement renseigné.
Pour insérer la commande Valider le Formulaire de la palette des comportements, au préalable, sélectionnez la
balise <form> dans la barre d’état.
Les messages d’avertissement sont en anglais.
Pour les personnaliser, cliquez sur l'icône du
script dans l’en-tête de page (voir fiche) et
cliquez sur Modifier dans les propriétés.
Dans le script changer les lignes commençant
par errors += “...
doit contenir une
adresse e-mail
doit être un nombre
doit être un intervalle
champ obligatoire
Appliquer une feuille de styles au formulaire
Vous pouvez appliquer un style de type classe sur les zones de texte du formulaire.
Dans l’exemple, nous avons créé une feuille de style dont le Type est un texte vert en Arial taille 12 px gras et
dont l’arrière-plan est une image. Nous avons appliqué ce style à chaque zone de texte par sélection.
Ainsi dans le navigateur les champs ont une image en arrière-plan et le texte est formaté selon nos souhaits.
Laurent Oliver
GRETA Touraine
12.1
En-tête de page et META
Un certain nombre d’informations sont stockées dans l’en-tête de page qui est invisible aux yeux de l’internaute.
On y trouve le titre de la page, le codage des caractères, les scripts, les feuilles de styles, les META Tags.
Pour visualiser l’en-tête de page dans Dreamweaver, cliquez sur ce bouton dans la barre d’outils et cochez
Contenu d’en-tête.
Le contenu d’en-tête se présente sous forme de plusieurs icônes :
Titre - Codage - Script - META
Feuilles de styles interne - externe
Insérer des META Tags
Dans la palette HTML :
META
META Mots clés (Keywords)
META Description
Une META Tag est un objet qui se place en en-tête de page. Elle donne des informations concernant votre site
ou la page qui contient la META. Ces informations sont principalement exploitées par les moteurs de
recherches. Une META donne une description, des mots-clés et d’autres renseignements aux robots de moteurs
de recherches.
Voici les META les plus utilisées :
<META name=“Classification“ content= “Business and Economy travel etc…”>
La Meta Classification vous permet de vous lister dans les catégories auxquelles vous appartenez.
<META name=“Keywords” content= “vos mots clés”>
La Meta la plus importante. En effet, vous allez lister dans content=”... “ tous les mots clés (séparés par des virgules) en rapport avec votre page, votre activité... Utilisez les pluriels, les singuliers, faites des combinaisons.
<META name=“Description“ content= “la description de votre page”>
Quelques lignes suffisent pour bien décrire votre page.
<META name=”Author” content= “le nom de l’auteur de la page”>
Vous pouvez à l’aide d’une balise, vous identifier comme l’auteur de cette page.
<META name= “copyright” content=”Propriétaire”>
Avec le META Copyright, vous pouvez indiquer le propriétaire du contenu de la page.
Laurent Oliver
GRETA Touraine
12.2
<META name= “Robots” content= “ALL”>
Le Meta tag Robots contient des directives (séparés par des virgules). Les moteurs de recherche utilisent des
robots pour indexer vos pages... Vous pouvez à l’aide de cette balise contrôler quelles seront les informations
qui seront indexées.
ALL : indexera la page et suivra tous les liens
NONE : n’indexera ni la page ni les liens
INDEX, NOFOLLOW : indexera la page mais ne suivra pas les liens
NOINDEX, FOLLOW : n’indexera pas la page mais suivra les liens
<META name= “Revisit-after” content= “30 days”»>
Cette Meta a son importance puisqu’elle force le robot à revenir dans les X jours que vous aurez indiqué. Si par
exemple, vous ajoutez régulièrement de nouvelles pages à votre site, elles seront ainsi indexées.
<META HTTP-EQUIV=”Reply-to” content=”Your email address”>
Vous pouvez dans cette Meta insérer votre adresse e-mail.
Pour insérer une META, cliquez dans l’en-tête de page et cliquez sur le bouton
Choisissez Attribut : nom, donnez la Valeur et renseigner le contenu.
de la palette HTML.
Ci-dessous voici l’équivalent de <META name=”Author” content= “Laurent”>
Propriétés d’une Meta insérée dans la page :
Dreamweaver permet d’insérer directement deux autres Meta Tags : Description et Mots-clés.
Laurent Oliver
GRETA Touraine
13.1
Les comportements
Nous avons déjà rencontré les comportements dans les fiches précédentes. Un comportement est un objet écrit
en Javascript qui ajoute des fonctions dynamiques et interactives aux pages du site. Je vous présente les plus
utilisés dans Dreamweaver.
Ouvrir la fenêtre Navigateur
Le comportement Ouvrir la fenêtre Navigateur permet d’ouvrir un lien dans une nouvelle fenêtre.
Contrairement à la cible Blank, vous pouvez paramétrer les attributs de la fenêtre.
Vous choisissez sa taille, quelle barre d’outils ou de menu afficher.
Intervertir une image
Intervertir une image permet de substituer une image par une autre. Il est conseillé de choisir deux images de
même taille pour éviter que la deuxième soit déformée.
Principe : nommez toutes les images du document. Sélectionnez un objet qui commande le changement.
Ajouter un # dans les propriétés de lien pour activer une zone sensible. Dans la palette des comportements
cliquez sur + et sélectionnez Intervertir une image.
Dans la liste des images choisissez celle à intervertir et indiquer l’image de substitution en cliquant sur
Parcourir. L’option Restaurer les images remet l’image d’origine lorsque l’on sort de la zone de commande
(Roll-over).
Laurent Oliver
GRETA Touraine
13.2
Vérifiez le navigateur
Placé dans l’en-tête de page, le comportement Vérifier le navigateur permet à l’ouverture d’une page de tester
le type de navigateur utilisé par l’internaute. En effet, selon la nature du navigateur et sa version certains éléments comme les calques, les feuilles de styles, les jeux cadres, les comportements, etc... ne s’afficheront pas ou
mal. En fonction de cela vous pouvez aiguiller l’internaute vers des pages qui fonctionneront en accord avec son
navigateur.
Vous pouvez indiquez deux URL différentes en fonction des tests ou choisir de rester sur la page en cours.
Autre
Dans la palette des comportements, Afficher les événements est une commande qui indiquera les comportements et actions de souris possibles en fonction du type de navigateur.
Les événements de souris les plus utilisés sont :
Onclick, OnDbClick, OnMouseOver, OnMouseOut,
OnMouseDown, OnMouseUp
Pour le clavier : OnKeyPress, OnkeyDown, OnKeyUp.
Vous pouvez obtenir plus de comportements en utilisant la
commande Télécharger d’autres comportements…
Laurent Oliver
GRETA Touraine
14.1
Intégrer une image en découpe et interactive
créée dans Adobe Image Ready
Dans Adobe ImageReady, nous avons conçu une image découpée en tranche avec des zones en survol
(Roll-over).
Nous demandons à Image Ready de créer un fichier Html et un dossier avec toutes les images.
Le fichier html contient le script qui fait fonctionner les roll-over et un tableau qui intègre les images découpées
en tranche. Nous souhaitons intégrer cet objet dans une page du site qui est déjà créée.
Le dossier Import-script contient le
fichier html et le dossier des
images créés par Image Ready.
Nous allons intégrer l’image interactive dans la page Mexique.htm
du dossier Embarquement-promo
(déjà existante).
Pour des questions de liens dans le
script, copiez le dossier images de
Import-script et collez-le dans le
dossier
Embarquement-promo
pour qu’il soit au même niveau que
la page Mexique.htm.
Laurent Oliver
GRETA Touraine
14.2
Page Mexique.htm
Ouvrez la page Mexi007.htm créée par Image Ready. Sélectionnez le tableau contenant les images et copiez-le.
Ouvrez la page Mexique.htm placez le curseur à l’endroit où vous souhaitez intégrer le tableau-image
et faîtes Coller.
Copiez ce tableau
qui contient les images.
Laurent Oliver
GRETA Touraine
14.3
Collez le tableau ici.
Copier/Coller
Dans l’en-tête de page du fichier Mexi007.htm (issu d’Image Ready) copiez le script et collez le dans l’en-tête
de page du fichier Mexique.htm.
Retournez ensuite dans la page Mexi007.htm, cliquez sur l’image et sélectionnez la balise Html <Body> dans la
barre d’état.
Cliquez sur l’icône
de la palette des propriétés et copiez le code qui concerne l’instruction Onload=”...”;
Allez dans la page Mexique.htm, sélectionnez la balise <Body>, cliquez sur le bouton
la partie qui concerne <Body>. C’est fini !
et collez le code dans
Enfin ! Si vous créez une image interactive ou en découpe dans Fireworks, l’intégration dans Dreamweaver est
un jeu d’enfant ! En effet, ces deux logiciels sont fournis par le même fabriquant : Macromédia, ils jouent la
complémentarité.
Pour intéger l’image, cliquez sur le bouton
de la palette des objets. Indiquez le fichier Html et
tout s’intègre automatiquement : image + script + Onload=”…”
Laurent Oliver
GRETA Touraine
15
Aperçu dans un navigateur
Pour vérifier si une page s’affiche correctement, vous devez la visualiser dans un navigateur.
Le navigateur le plus utilisé est Internet Explorer, mais vous pouvez tester une page dans Netscape Navigator.
Dreamweaver permet de basculer automatiquement en aperçu dans un navigateur.
Pour paramétrer la liste des navigateurs, cliquez sur sur bouton
et cliquez sur modifier la liste navigateurs...
Dans les préférences, cliquez sur + pour ajouter un navigateur et indiquez où il se situe sur votre disque dur.
Laurent Oliver
GRETA Touraine
16
Publier le site
Glissez ici les dossiers ou fichiers
pour les télécharger.
Pour mettre un site en ligne, vous devez demander à un hébergeur de stocker vos fichiers.
L’hébergeur vous transmet les coordonnées et codes d’accès au disque de stockage.
Vous devez rentrer ces paramètres dans la définition du site.
Cliquez sur Site > Gérer les sites et modifier le site.
Dans Infos distantes, sélectionnez le mode d’accès FTP (File Transfer Protocol).
Hôte FTP : renseignez l’adresse FTP fournie par votre hébergeur.
Nom d’utilisateur : login fourni par l’hébergeur
Mot de passe : fourni par l’hébergeur.
Répertoire de l’hôte : permet d’accéder directement à un dossier du site.
Cliquez sur OK.
Dans le gestionnaire de site cliquez sur
pour vous connecter au site distant.
Glissez dans la fenêtre Site distant les dossiers ou fichiers du site.
Pour ouvrir un site, utilisez la commande
Site > Gérer les sites et choisissez le site
de travail.
Ou choisissez le site dans la liste
Laurent Oliver
Cliquez ici pour développer
la palette Fichiers
GRETA Touraine
17.1
Les principales balises HTML
Structure :
<HTML>...</HTML>
Définit le début et la fin du code HTML
<HEAD>...</HEAD>
Définit l’en-tête du document
<TITLE>...>/TITLE>
Définit le titre du document
<META...>
Définit les méta-données pour les moteurs de recherche
<BODY>...</BODY>
BACKGROUND
BGCOLOR
TEXT
LINK
VLINK
ALINK
Image d’arrière-plan
Couleur d’arrière-plan
Couleur du texte
Couleurs des hyperliens
Couleurs des hyperliens visités
Couleurs des hyperliens actifs
Formatage de texte
<FONT>...</FONT>
FACE
SIZE
COLOR
Définit la police
Police
Taille de la police
Couleur de la police
<Hx>...</Hx>
x est un chiffre de 1 à 6, formats de paragraphes
<B>...</B>
<l>...</l>
<BIG>...</BIG>
<SMALL>...</SMALL>
<U>...</U>
<BR>
<P>...</P>
Commande de gras
Italiques
Grande police, une taille plus grande que la taille définie pour la police
Petite police, une taille au-dessous de la taille définie pour la police
Caractères soulignés
Saut de ligne
Paragraphe
Graphisme
<IMG>
SRC
ALT
BORDER
WIDTH
HEIGHT
ALIGN
HSPACE
VSPACE
USEMAP
Insère une image
Adresse du fichier
Texte du fichier graphique
Bordure (épaisseur)
Largeur de l’image
hauteur de l’image
Alignement
Marge horizontale
Marge verticale
Référence de coordonnées d’image (Imagemap)
Listes
<OL>...</OL>
TYPE
START
Liste ordonnée
Type de numérotation
Valeur de départ de la liste
<UL>...</UL>
TYPE
Liste non ordonnée
Type à numérotation ou à puce
Laurent Oliver
GRETA Touraine
17.2
Tableaux
<TABLE>...</TABLE>
ALIGN
BORDER
CELLPADDING
CELLSPACING
WIDTH
HEIGHT
BGCOLOR
BACKGROUND
BORDERCOLOR
Insère un tableau
Alignement du tableau
Bordure du tableau
Marge des cellules
Distance entre cellules
Largeur des cellules
Hauteur des cellules
Couleur d’arrière des cellules
Image d’arrière-plan des cellules
Couleur de la bordure des cellules (MSIE seulement)
<TR>...</TR>
ALIGN
VALIGN
BGCOLOR
BACKGROUND
Définit une ligne d’un tableau
Alignement horizontal du texte de la ligne
Alignement vertical du texte de la ligne
Couleur d’arrière-plan d’une ligne de tableau
Image d’arrière-plan d’une ligne de tableau
<TD>...</TD>
ALIGN
VALIGN
WIDTH
HEIGHT
COLSPAN
ROWSPAN
BACKGROUND
ROWRAP
Définit une cellule
Alignement horizontal du texte de la cellule
Alignement vertical du texte de la cellule
Largeur de la cellule
Hauteur de la cellule
Définit le nombre de colonnes sur lesquelles s’étend la cellule
Définit le nombre de lignes sur lesquelles s’étend la cellule
Image d’arrière-plan de la cellule
Empêche le passage automatique à la ligne dans la cellule
Cadres
<FRAMESET>...</FRAMSET>
COLS
ROWS
FRAMEBORDER
FRAMESPACING
Définition dans un document de contrôle
Nombres de colonnes
Nombres de lignes
Bordures visibles ou non
Distance entre les cadres (marge des cadres)
<FRAME>
SRC
NAME
SCROLLING
NORESIZE
MARGENWIDHT
MARGENHEIGHT
FRAMEBORDER
Définit le contenu d’un cadre
Adresse du document
Nom du cadre
Barre de défilement dans le cadre
Cadre de taille fixe
Marges de gauche et de droite
Marges du haut et du bas
Bordures visibles
<NOFRAMES>...</NOFRAME>
Affiche un texte pour les navigateurs qui ne peuvent pas afficher les cadres
<DIV>
Définit l’alignement du texte, des images et des commandes HTML
Hyperliens
<A>...>/A>
HREF
TARGET
NAME
Laurent Oliver
Définit un hyperlien
Adresse de l’hyperlien
Cadre d’affichage de l’hyperlien
Nom de la destination
GRETA Touraine
Dreamweaver
Sommaire des fiches
Créer le site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
Modifier les propriétés de la page . . . . . . . . . . . . . . . . . . . . . . . . . .1
Préparation du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2
Insérer une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
Eléments du site (actifs) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5
Les liens et les ancres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
Les feuilles de styles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Insertion d’objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
Les jeux de cadres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Les calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Réglage d’un formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
En-tête de page et META TAGS . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Les comportements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
Intégrer une image en découpe et interactive
créée dans Image Ready et Fireworks . . . . . . . . . . . . . . . . . . . . . .14
Aperçu dans un navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Publier le site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16
Principales balises HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Laurent Oliver
GRETA Touraine
Fiches
de cours
Dreamweaver
GRETA
Touraine
Laurent OLIVER

Fiche Dreamweaver

Transcription

Documents pareils

Le GRETA HAUTE-CORREZE UNE REPONSE DE PROXIMITE

mode d`emploi - Médiathèque municipale de Villeneuve d`Ascq

Rencontre de Touraine du Kan ar Bobl

Formation au logiciel AMADEUS (Tourismatique)

Formation Web Adobe DREAMWEAVER PERFECTIONNEMENT

Fiche descriptive CAP APS 2016-2017

gabarits Web.indd

MEHARI CLUB de France

Métiers du décolletage : formation sur mesure