Création de pages web HTML

Dreamw eaver V. 8
Création de pages web HTML
Macromedia Dreamweaver 8
FORMASOFT
Dreamw eaver V. 8
Sommaire
1
INTRODUCTION.......................................................................................4
2
L'ESPACE DE TRAVAIL..............................................................................4
2.1
2.2
2.3
2.4
2.5
2.6
3
CONTRAINTES TECHNIQUES...................................................................10
3.1
3.2
3.3
3.4
3.5
4
LA FENETRE DE DOCUMENT ..........................................................................................5
LA BARRE OUTILS DE DOCUMENT....................................................................................6
LA BARRE D'ETAT :...................................................................................................7
LA BARRE "INSERER" OU PANNEAU "INSERTION" ..................................................................8
L'INSPECTEUR DES PROPRIETES .....................................................................................9
LE PANNEAU FICHIERS ...............................................................................................9
REGLE N°1 : LA PAGE INDEX ..................................................................................... 10
REGLE N° 2 : LES CARACTERES SPECIAUX....................................................................... 10
REGLE N°3 : LES CARACTERES DE SEPARATION ................................................................. 11
REGLE N°4 : LA CASSE DES CARACTERES ....................................................................... 11
REGLE N° 5 : LES EXTENSIONS .................................................................................. 11
CONFIGURER UN NOUVEAU SITE ............................................................12
4.1
4.2
CREER ET ORGANISER LES DOSSIERS DU SITE ................................................................... 12
DEFINIR UN SITE ................................................................................................... 12
5
CONCEPTION DES PAGES DU SITE ..........................................................15
6
CREER UN NOUVEAU DOCUMENT ............................................................15
7
PROPRIETES DE LA PAGE .......................................................................17
8
LES TABLEAUX ......................................................................................21
8.1
8.2
8.3
8.4
8.5
8.6
8.7
8.8
8.9
8.10
8.11
9
INSERER UN TABLEAU .............................................................................................. 21
SELECTIONNER UN TABLEAU ....................................................................................... 22
AUTRES PROPRIETES DU TABLEAU ................................................................................. 22
CONTENU DES CELLULES .......................................................................................... 23
REDIMENSIONNER TABLEAUX, LIGNES OU COLONNES............................................................ 23
UNIFORMISER LARGEURS DE COLONNE EN MODE CODE AVEC LARGEURS VISUELLES ........................... 25
SUPPRIMER TOUTES VALEURS DE LARGEURS ET HAUTEURS ...................................................... 26
AJOUTER OU SUPPRIMER LIGNE OU COLONNE .................................................................... 27
FUSIONNER OU FRACTIONNER CELLULES ......................................................................... 28
IMBRIQUER DES TABLEAUX ........................................................................................ 28
TRIER UN TABLEAU ................................................................................................. 29
INSERTION ET MISE EN FORME DE TEXTE ...............................................29
9.1
9.2
9.3
9.4
9.5
INSERTION DE TEXTE .............................................................................................. 29
IMPORTER DES DONNEES TABULAIRES ............................................................................ 30
IMPORTER UN DOCUMENT MICROSOFT OFFICE................................................................... 31
AJOUT D'ESPACEMENTS DE PARAGRAPHE ......................................................................... 32
MISE EN FORME TEXTE ET PARAGRAPHES ......................................................................... 32
10 UTILISATION DE FEUILLES DE STYLES EN CASCADE (CSS) .......................33
10.1
10.2
10.3
10.4
10.5
10.6
10.7
10.8
10.9
DESCRIPTION DES FEUILLES DE STYLE EN CASCADE ............................................................. 33
CREER UNE FEUILLE DE STYLES CSS ............................................................................. 34
APPLIQUER UN STYLE CSS ........................................................................................ 43
OTER UN STYLE CSS .............................................................................................. 43
ATTACHER UNE FEUILLE DE STYLE CSS : ........................................................................ 44
MODIFIER UNE REGLE DE STYLE CSS ............................................................................ 44
CREER UNE NOUVELLE REGLE DANS UNE FEUILLE DE STYLE CSS (FICHIER) EXISTANTE ....................... 45
EXPORTER DES STYLES POUR CREER UNE NOUVELLE FEUILLE DE STYLE CSS .................................. 46
SUPPRIMER UNE REGLE DE CSS DANS UNE FEUILLE DE STYLE .................................................. 46
11 LES IMAGES ..........................................................................................47
11.1
11.2
11.3
11.4
INSERER UNE IMAGE ............................................................................................... 47
INSERER UN ESPACE RESERVE POUR UNE IMAGE ................................................................. 48
MODIFIER LES PROPRIETES D'UNE IMAGE......................................................................... 48
INSERER UNE IMAGE SURVOLEE (ROLL-OVER) ................................................................... 52
AFCI NewSoft
2
Dreamw eaver V. 8
12 TESTER VOTRE DOCUMENT DANS UN NAVIGATEUR ..................................53
13 LES CALQUES ........................................................................................54
13.1
13.2
13.3
13.4
13.5
13.6
INSERER UN CALQUE............................................................................................... 54
SELECTIONNER UN CALQUE........................................................................................ 54
DEFINIR LES PROPRIETES D'UN CALQUE .......................................................................... 55
CONVERTIR DES CALQUES EN TABLEAUX.......................................................................... 56
EMPECHER LE CHEVAUCHEMENT DES CALQUES ................................................................... 56
ANIMER UN CALQUE................................................................................................ 56
14 GESTION DES MODELES .........................................................................59
14.1
14.2
14.3
14.4
14.5
CREER UN MODELE ................................................................................................. 59
LES REGIONS MODIFIABLES D'UN MODELE ........................................................................ 59
APPLIQUER UN MODELE ............................................................................................ 61
DETACHER UN MODELE D'UN DOCUMENT ......................................................................... 61
MODIFIER UN MODELE ............................................................................................. 61
15 LES COMPORTEMENTS ...........................................................................62
15.1
15.2
15.3
15.4
OUVRIR UN LIEN DANS UNE FENETRE (POP-UP).................................................................. 62
AFFICHER TEXTE DANS BARRE D’ETAT ............................................................................ 63
MESSAGE CONTEXTUEL ............................................................................................ 64
AFFICHER-MASQUER LES CALQUES................................................................................ 64
16 INSERER UN ELEMENT FLASH .................................................................65
16.1
16.2
16.3
INSERER UNE ANIMATION FLASH (FICHIER SWF) ............................................................... 65
INSERER UN BOUTON « FLASH » ................................................................................. 66
INSERER UN TEXTE « FLASH ».................................................................................... 66
17 AJOUTER UN SON A UNE PAGE................................................................67
17.1
17.2
INCORPORER UN FICHIER AUDIO .................................................................................. 68
CREER UN LIEN VERS UN FICHIER AUDIO ......................................................................... 68
18 CREER UN FORMULAIRE HTML ................................................................69
18.1
18.2
18.3
18.4
18.5
18.6
18.7
18.8
INSERER UN FORMULAIRE .......................................................................................... 69
INSERER UN CHAMP LISTE/MENU (SELECT)....................................................................... 69
INSERER UN CHAMP DE TEXTE (TEXTFIELD) ...................................................................... 70
INSERER DES BOUTONS RADIO (RADIOBUTTON) ................................................................. 70
INSERER DES CASES A COCHER (CHECKBOX) .................................................................... 71
INSERER UN CHAMP DE ZONE DE TEXTE (TEXTAREA) ............................................................ 71
INSERER DES BOUTONS DE COMMANDE (SUBMIT) ............................................................... 72
PARAMETRAGE DU FORMULAIRE ................................................................................... 72
19 INSERER UN CADRE FLOTTANT (OU <IFRAME> ) .....................................75
20 LES LIENS .............................................................................................77
20.1
20.2
20.3
20.4
20.5
20.6
20.7
LIEN VERS UNE PAGE DU SITE ..................................................................................... 77
DEFINIR LA CIBLE DES LIENS ...................................................................................... 77
LIEN DE MESSAGERIE ELECTRONIQUE............................................................................. 77
LIEN SUR UNE ZONE REACTIVE .................................................................................... 78
LIEN EXTERNE ...................................................................................................... 78
LIEN VERS UN AUTRE EMPLACEMENT DANS LA MEME PAGE....................................................... 78
LIEN DE TELECHARGEMENT ........................................................................................ 79
21 TRANSFERT DU SITE VERS SERVEUR DISTANT.........................................80
22 REFERENCER SON SITE ..........................................................................82
22.1
22.2
22.3
22.4
22.5
QU'EST-CE QUE LE REFERENCEMENT ?............................................................................ 82
AMELIORER SON REFERENCEMENT ................................................................................ 82
REFERENCEMENT ANNUAIRE ....................................................................................... 84
REFERENCEMENT MOTEUR ......................................................................................... 85
LES META TAGS ................................................................................................... 88
AFCI NewSoft
3
Dreamw eaver V. 8
1
INTRODUCTION
Macromedia Dreamweaver MX 8 est un éditeur HTML (Hypertext Markup Language)
professionnel destiné à la conception, au codage et au développement de sites, de pages et
d’applications Web. Quel que soit l’environnement de travail utilisé (codage manuel HTML ou
environnement d’édition visuel), Dreamweaver propose des outils qui vous aideront à créer
des applications Web.
2
L'ESPACE DE TRAVAIL
L’espace de travail de Dreamweaver permet d’afficher des documents et les propriétés des
objets. Il comporte des barres d’outils donnant accès aux opérations les plus courantes, vous
permettant ainsi de modifier rapidement vos documents.
Ce chapitre vous présente une vue d’ensemble de l’espace de travail de Dreamweaver 8.
Barre Insérer
Groupes de Panneaux
Barre d'outils de document
Fenêtre de document
Panneau Fichiers
Sélecteur de balises
L'inspecteur des propriétés
Les panneaux peuvent être masqués ou développés en cliquant sur leur intitulé situé en haut
à gauche de chaque panneau.
AFCI NewSoft
4
Dreamw eaver V. 8
2.1
La fenêtre de document
La fenêtre de document affiche le document actif. Vous pouvez choisir parmi les modes
d’affichage suivants, en cliquant sur un des 3 boutons dans la "barre d'outils de document" :
Affichage Création
est un environnement de création pour la mise en
forme visuelle des pages, l’édition visuelle et le développement rapide d’applications. Dans
ce mode, Dreamweaver affiche une représentation visuelle entièrement modifiable du
document, similaire à la représentation de la page sur un navigateur.
Affichage Code
est un environnement de codage manuel pour rédiger et
modifier du code HTML, JavaScript et du code de langage de-serveur, tel que le langage
PHP, ASP ou CFML (ColdFusion Markup Language), ou tout autre type de code.
Affichages Code et Création
vous permettent d’obtenir l’affichage
Code et l’affichage Création du document dans une même fenêtre.
Lorsque la fenêtre de document dispose d’une barre de titre, cette dernière affiche le titre de
la page, et, entre parenthèses, le chemin et le nom de fichier du document. Dreamweaver
affiche un astérisque à la suite du nom de fichier si vous avez apporté des modifications et
que vous ne les avez pas encore enregistrées.
Lorsque vous agrandissez la fenêtre de document de la présentation de l’espace de travail
intégré (sous Windows uniquement), elle s’affiche sans barre de titre; le titre de la page, ainsi
que le chemin et le nom du fichier s’affichent alors dans la barre de titre de la fenêtre
principale de l’espace de travail.
En outre, lorsqu’une fenêtre de Document est agrandie, des onglets s’affichent en haut de la
zone de la fenêtre de document indiquant les noms de fichier de tous les documents ouverts.
Pour passer à un autre document, cliquez sur son onglet.
AFCI NewSoft
5
Dreamw eaver V. 8
2.2
La barre outils de document
Valider le marqueur
Gestion de fichiers
Aucune erreur navigateur
Aperçu/Débogage dans
navigateur
Titre du document
Actualiser le mode création
Options d'affichage
• Mode Code
Assistances visuelles
• Modes Code et
Création
• Mode Création
Mode Code /Modes Code et Création / Mode Création : voir chapitre précédent.
Titre de document vous permet d’attribuer un titre à votre document et l’afficher dans la
barre de titre du navigateur. Si votre document possède déjà un titre, celui-ci s’affiche dans
ce champ.
Aucune erreur du navigateur permet de vérifier la compatibilité avec différents navigateurs.
Valider le marqueur vous permet de valider le document actif ou la balise sélectionnée.
Gestion des fichiers pour afficher le menu contextuel correspondant.
Aperçu/Débogage dans le navigateur pour prévisualiser ou déboguer un document dans
un navigateur. Sélectionnez un navigateur dans le menu contextuel.
Actualiser le mode Création pour actualiser le mode Création du document après avoir
apporté des modifications dans le mode Code. Les modifications apportées dans le mode
Code n’apparaissent pas automatiquement dans le mode Création. Vous devez exécuter
tout d’abord certaines opérations, comme enregistrer le fichier ou utiliser ce bouton.
Options d’affichage pour définir les options d’affichage des modes Code et Création,
notamment le mode devant s’afficher au-dessus de l’autre. Les options du menu s’appliquent
à l’affichage actuel : Mode Création, mode Code ou les deux.
Assistance visuelle pour vous fournir des supports visuels différents en vue de la
conception de vos pages, telles que des bordures de tableaux ou de cadres.
AFCI NewSoft
6
Dreamw eaver V. 8
2.3
La barre d'état :
La barre d’état, située au bas de la fenêtre de document, fournit des informations
supplémentaires sur le document en cours de création.
Outil "Main"
Outil "Sélectionner"
Sélecteur de balises
Outil "Zoom"
Définir facteur de
"zoom""
Taille de la fenêtre
Taille du document
(fichier) et temps de
téléchargement
Le sélecteur de balises affiche la hiérarchie des balises entourant la sélection active.
Cliquez sur une balise quelconque dans la hiérarchie pour la sélectionner avec son contenu.
Par exemple, cliquez sur <body> pour sélectionner tout le corps du document. Il est
préférable de faire appel au Sélecteur de balises, car il garantit avec certitude la bonne
sélection.
L’outil Main vous permet de cliquer sur le document et de le glisser jusque dans la fenêtre
de document. Cliquer sur l’outil Sélectionner pour désactiver l’outil Main.
L’outil Zoom et le menu contextuel Définir le facteur de zoom permettent de définir un
taux d’agrandissement pour votre document.
Taille de la fenêtre (visible en mode Création uniquement) permet de redimensionner la
fenêtre du document selon des dimensions prédéfinies ou personnalisées.
Taille du document et du temps de téléchargement de la page : Dreamweaver calcule la
taille sur la base du contenu de toute la page, y compris tous les objets liés, tels que les
images et les plug-ins. Dreamweaver estime la durée de téléchargement en fonction de la
vitesse de connexion entrée dans les préférences de la Barre d'état. Le temps de
téléchargement réel dépend de l'état du trafic sur Internet.
AFCI NewSoft
7
Dreamw eaver V. 8
2.4
La barre "Insérer" ou panneau "Insertion"
Les boutons qui composent la barre Insérer permettent de créer et d’insérer des objets, tels
que des tableaux, des calques et des images. Lorsque vous placez le curseur de la souris
sur un bouton, une info-bulle indiquant le nom de ce bouton apparaît.
Les boutons sont organisés en plusieurs catégories, sur le côté gauche de la barre Insérer.
D’autres catégories s’affichent lorsque le document sélectionné contient du code serveur, tel
que des documents ASP ou CFML. Au démarrage de Dreamweaver, la dernière catégorie
utilisée s’ouvre.
Les différentes catégories :
La catégorie Commun permet de créer et d’insérer les objets les plus couramment utilisés,
comme les images et les tableaux.
La catégorie Mise en forme permet d’insérer des tableaux, des balises div, des calques et
des cadres. Vous pouvez également choisir parmi trois types de tableaux : Standard (par
défaut), Tableaux étendus et Mise en forme. Si le mode Mise en forme est sélectionné, vous
pouvez utiliser les outils de mise en forme de Dreamweaver : Dessiner la cellule de Mise en
forme et Dessiner le tableau de Mise en forme.
La catégorie Formulaires contient des boutons permettant de créer des formulaires et d’y
insérer des éléments.
La catégorie Texte insère diverses balises de mise en forme de texte et de liste.
La catégorie HTML insère des balises HTML pour les règles horizontales, le contenu de
l’en-tête, les tableaux, les cadres et les scripts.
Les catégories de code serveur sont disponibles uniquement pour les pages utilisant un
langage serveur spécifique comme ASP, ASP.NET, CFML Basic, CFML Flow, CFML
Advanced, JSP et PHP. Ces catégories proposent des objets de type code serveur que vous
pouvez insérer en mode Code.
La catégorie Application insère des éléments dynamiques, tels que les jeux
d’enregistrements, les régions répétées et les formulaires d’insertion d’enregistrements et de
mise à jour.
La catégorie éléments Flash insère des éléments Flash de Macromedia.
La catégorie Favoris permet de regrouper et d’organiser, dans un espace commun, les
boutons de la barre Insérer que vous utilisez le plus fréquemment.
Afficher les onglets, affiche le panneau Insertion sous forme d'onglets, comme dans la
version précédente !
AFCI NewSoft
8
Dreamw eaver V. 8
2.5
L'inspecteur des propriétés
L’inspecteur de propriétés permet de consulter et de modifier les propriétés les plus fréquentes de
l’élément sélectionné dans la page, tel que du texte ou une image. Le contenu de l’inspecteur de
propriétés varie donc en fonction de l’élément sélectionné.
Par exemple, si vous sélectionnez une image de la page, l’inspecteur des propriétés se modifie pour
montrer les propriétés de l’image (telles que le chemin d’accès au fichier, la largeur et la hauteur de
l’image, la bordure autour de l’image, s’il y a lieu, et ainsi de suite).
Par défaut, l’inspecteur de propriétés se trouve au bas de l’espace de travail, mais vous
pouvez l’ancrer en haut de l’espace de travail si vous le souhaitez. Vous pouvez aussi le
laisser flotter dans l’espace de travail.
2.6
Le panneau Fichiers
Le panneau Fichiers permet d'afficher et d'exploiter les fichiers de votre site Dreamweaver.
Vous pouvez agrandir ou réduire le panneau Fichiers par cliquer glisser à droite de l'intitulé
du panneau. Dans sa forme réduite (comme ci-dessus), le panneau Fichiers affiche le
contenu du site local, du site distant ou du serveur d’évaluation sous la forme d’une liste de
fichiers.
Sous sa forme développée (en cliquant sur le dernier outil
) le panneau affiche le site
local et soit le site distant, soit le serveur d’évaluation. Le panneau Fichiers peut également
afficher une carte d’arborescence du site local.
AFCI NewSoft
9
Dreamw eaver V. 8
3
CONTRAINTES TECHNIQUES
3.1
Règle N°1 : La page index
Le fichier index est la page HTML que vos visiteurs verront en premier en arrivant sur votre
site. Il est donc vital qu'elle soit la plus attrayante possible. C'est le fichier par défaut du site,
qui doit se trouver à la racine de votre site, c'est-à-dire dans le premier dossier.
Lorsque vous tapez le nom de votre site, par exemple : www.monsite.com. La page qui
s'affiche est www.monsite.com/index.html ou .htm (ou encore .php, .asp ...).
Le fichier index peut s'appeler de quatre façons différentes :
index.html ou index.htm lorsque vous êtes hébergé par un serveur francophone.
default.html ou default.htm lorsque vous êtes hébergé par un serveur anglophone.
Si votre site ne possède pas de fichier index, en saisissant l'URL : www.monsite.com, vous
obtiendrez donc une liste des fichiers du site !!
Vous ne voulez pas que vos visiteurs obtiennent cet écran ? Prenez donc garde à nommer la
première page index.htm !!
3.2
Règle N° 2 : Les caractères spéciaux
Vos fichiers et dossiers ne doivent pas comporter de caractères spéciaux c'est à dire :
•
•
•
pas d'accents,
pas d'apostrophes
pas de signes de ponctuation.
Sont acceptés : le . (point), - (tiret normal ou signe -) et _ (underscore ou tiret bas)
Évitez les noms comportant des espaces. Car, même s'ils sont admis, ils seront convertis en
%20. Par exemple un fichier : "mon fichier avec espaces.html" apparaîtra de la
manière suivante dans la barre d'adresse de votre navigateur :
mon%20fichier%20avec%20espaces.html
Ce qui nuit à la lisibilité !!
AFCI NewSoft
10
Dreamw eaver V. 8
3.3
Règle N°3 : Les caractères de séparation
Afin d'éviter l'utilisation des espaces, il est conseillé d'utiliser les tirets - plutôt que les tirets
bas _. En effet, les – (tirets) sont correctement interprétés par les moteurs de recherche qui
comprennent que le nom du fichier comporte des mots distincts alors que les _ (tirets bas)
ne permettent pas de différencier les mots.
Ce point est important car les URL, et donc les noms de fichiers et de dossiers, ainsi que
votre nom de domaine sont pris en compte dans le classement des sites.
Ainsi, indépendamment du contenu d'un site, un fichier ayant pour URL :
• http://www.poissons-exotiques.com/aquariophilie-debutant/nettoyage-vitres.html
ressortira sur les requêtes des mots qui composent son URL, soit :
poissons, exotiques, aquariophilie et débutant, nettoyage et vitres.
• A l'inverse, un fichier ayant pour URL :
http://www.poissons-exotiques.com/aquariophilie_debutant/nettoyage_vitres.html
ne ressortira que sur les requêtes des mots :
poissons et exotiques.
Il est donc très important de soigner les noms des fichiers et des dossiers ainsi que, la
logique de l'architecture pour optimiser son référencement.
3.4
Règle N°4 : La casse des caractères
La casse des caractères, c'est-à-dire les majuscules ou les minuscules, est prise en compte
dans une URL (sauf pour les noms de domaines).
Un fichier : nettoyage-vitres.html sera différent de : nettoyage-VITRES.html .
Préférez donc l'utilisation de minuscules.
3.5
Règle N° 5 : Les extensions
Pour vos pages web, les extensions htm et html sont équivalentes. Vous pouvez utiliser
indifféremment l'une ou l'autre mais attention un fichier nommé fichier.html sera différent de
fichier.htm !
AFCI NewSoft
11
Dreamw eaver V. 8
4
CONFIGURER UN NOUVEAU SITE
4.1
Créer et organiser les dossiers du site
Vous devez au préalable, créer sur votre disque dur un dossier principal pour votre site, par
exemple : mon_site_web, dans lequel seront stockées toutes les pages web du site.
A l'intérieur de ce dossier, créer au minimum, 1 dossier pour stocker les images du site, par
exemple : images.
Si vous disposez de beaucoup d'images, vous pouvez, bien entendu, créer plusieurs
dossiers afin de mieux les organiser.
!! Attention : N'oubliez pas que vos dossiers et fichiers devront être nommés sans espace,
sans accent, sans apostrophe…, et éviter les noms trop longs ! (voir chapitre précédent).
4.2
Définir un site
Vous devez définir un site ("dossier local Dreamweaver") pour chaque site Web créé. Ce
"dossier local" fait référence au dossier que vous avez crée sur votre disque dur, et dans
lequel seront stockés l'ensemble des fichiers du site. Ce dossier local est indispensable au
bon fonctionnement de certaines fonctions de Dreamweaver.
•
•
Cliquer sur le menu Site / Nouveau site…
Cliquer, si nécessaire sur l'onglet Elémentaire
Nommer ici votre
projet de site
Facultatif - Saisir
ici l'url de votre
site, si vous la
connaissez
(fournie par votre
hébergeur)
Cliquer Suivant
AFCI NewSoft
12
Dreamw eaver V. 8
Etape 2 de l'assistant :
Cliquer Non, pas de
technologie de
serveur
Cliquer Suivant
Etape 3 de l'assistant :
Cliquer Modifier
copies locales…
Cliquer le bouton
Parcourir pour
sélectionner le dossier
principal du site sur
votre ordinateur
Cliquer Suivant
AFCI NewSoft
13
Dreamw eaver V. 8
Etape 4 de l'assistant :
Choisir Aucun serveur
distant si vous souhaitez
utiliser un logiciel FTP
tel que Filezilla,
FTPexpert ou autre.
Sinon choisir FTP, puis
définir tous vos
paramètres de
connexion au serveur
distant (adresse d'hôte ;
nom d'utilisateur (login)
et mot de passe).
Cliquer Suivant
Etape 5 de l'assistant :
Le résumé de votre
configuration
apparaît
Cliquer Terminé
Après validation, l'arborescence de votre site apparaît dans le panneau Fichiers, à droite de
l'écran !
AFCI NewSoft
14
Dreamw eaver V. 8
5
CONCEPTION DES PAGES DU SITE
Vous pouvez ajouter des contenus variés à vos pages Web à l'aide des outils visuels de
Macromedia Dreamweaver 8. Ajouter des tableaux, des calques, des textes, des images,
couleurs, animations, sons et autres formes de données, puis réaliser une mise en forme.
Macromedia Dreamweaver 8 dispose de nombreuses fonctions vous permettant de créer de
nouvelles pages Web en toute facilité. Vous pouvez ainsi aisément définir de nombreuses
propriétés de page (titre, image et couleur d'arrière-plan, couleurs personnalisées des liens,
etc.). De plus, Dreamweaver comprend des outils vous permettant d'optimiser les
performances de votre site Web et de tester les pages pour garantir leur compatibilité avec
différents navigateurs Web.
Organisez avec soin votre site : cela vous fera gagner beaucoup de temps par la suite.
L'organisation d'un site ne se réduit pas à déterminer l'emplacement des fichiers : elle inclut
également l'analyse des besoins du site, des profils de ses utilisateurs et de ses objectifs. Il
convient également d'examiner les conditions techniques requises, notamment l'accès
utilisateur et les restrictions en matière de navigateurs, de plug-ins ou de téléchargement.
Dreamweaver vous permet de progresser à votre rythme et selon vos envies dans la mise en
forme de vos pages. Sélectionnez la technique de mise en forme de votre choix ou combinez
les options de mise en forme de Dreamweaver pour définir la présentation de votre site.
6
CREER UN NOUVEAU DOCUMENT
Ø Appuyer sur les touches CTRL N ou cliquer le menu Fichier / Nouveau…
Ø Choisir la catégorie Pages de base, puis HTML
Ø Pour rendre un document HTML compatible XHTML, sélectionner XHTML 1.0
transitionnel (ou XHTML 1.0 Strict) dans le menu déroulant Type de document
(DTD),
Ø Cliquer sur le bouton Créer.
AFCI NewSoft
15
Dreamw eaver V. 8
Définition du XHTML :
XHTML (eXtensible Hyper Text Markup Language) signifie "langage de balisage hypertexte
extensible".
Langage normalisé par le W3C1 (World Wide Web Consortium) servant à la publication de pages web
sur Internet. Le XHTML offre les mêmes possibilités que le HTML tout en étant conforme à la norme
XML.
Les documents HTML devraient peu à peu être remplacés par leur équivalent en XHTML, (quoique les
avis soient partagés !!), dont la structure se doit d'être plus rigoureuse pour en faciliter l'accès à
d'autres machines que des ordinateurs, comme les téléphones mobiles par exemple.
Il est la conséquence de l'incompatibilité des fichiers HTML et XML que certains navigateurs
n'arrivaient pas à déchiffrer. C'est une extension du HTML qui, en outre, reprend les caractéristiques
les plus intéressantes du XML, telles que la structuration et l'extensibilité des données (il est possible
d'étendre les fonctions standards du langage, en employant des bibliothèques externes chargeables
sous forme de module par le biais du DTD).
Le XHTML est le garant de la séparation entre le contenu et la présentation, grâce à
l'utilisation combiné du XHTML et des feuilles de styles CSS.
Moins lourd que le langage HTML, il permet de dissocier la structure du site (réalisée en
XHTML) de la présentation (réalisée à l'aide de feuilles de style CSS), rendant ainsi le
téléchargement de la page plus rapide. Le XHTML permet donc d'avoir un code léger, qu'il
soit utilisé de manière graphique ou textuelle et apporte une facilité de maintenance. Un
meilleur respect de la sémantique (La sémantique du web est l'utilisation de chaque balise à bon
escient) en fonction du type de contenu aidant de plus en plus au bon référencement de votre site.
Les variantes de DTD (type de document) sont :
DTD XHTML strict : un ensemble de règles obligeant à une formulation XHTML rigoureuse.
DTD XHTML transitionnel : une définition plus permissive autorisant l'emploi d'éléments HTML obsolètes.
1
Le W3C a été fondé en octobre 1994 par Tim Berners-Lee (l'inventeur du World Wide Web) dont le but est de promouvoir l'évolutivité du Web et
de garantir son interopérabilité.
AFCI NewSoft
16
Dreamw eaver V. 8
7
PROPRIETES DE LA PAGE
Pour chaque page que vous créez dans Dreamweaver, vous pouvez spécifier les propriétés de mise
en forme dans la boîte de dialogue Propriétés de la page. Cette boîte de dialogue permet de
spécifier la famille et la taille par défaut de la police, la couleur d'arrière-plan, les marges, le style des
liens ainsi que d'autres aspects de la conception de page. Vous pouvez attribuer de nouvelles
propriétés à chaque nouvelle page que vous créez et modifier celles des pages existantes.
Par défaut Dreamweaver met le texte en forme à l'aide de feuilles de style en cascade (CSS :
Cascading Style Sheets). Vous pouvez choisir d'utiliser le langage HTML pour mettre les pages en
forme par le biais de la boîte de dialogue Préférences (Edition > Préférences). Lors de l'utilisation des
propriétés de page CSS, Dreamweaver utilise des balises CSS pour l'ensemble des propriétés
définies dans les catégories Aspect, Liens et En-têtes de la boîte de dialogue Propriétés de la page.
Les balises CSS qui définissent ces attributs sont intégrées dans la section <head> de la page.
Remarque : Les propriétés de page que vous choisissez ne s'appliquent qu'au document actif. Si une
page utilise une feuille de style CSS externe, Dreamweaver n'écrase pas les balises définies dans la
feuille de style, car ceci affecterait les autres pages qui utilisent cette feuille.
Comparaison des "Propriétés de page" CSS et HTML
Si vous choisissez d'utiliser des balises HTML au lieu des styles CSS, l'inspecteur Propriétés affiche
quand même le menu déroulant Style. Cependant, les commandes de police, taille, couleur et
alignement indiquent uniquement les propriétés qui utilisent les balises HTML. Les valeurs des
propriétés CSS appliquées à la sélection en cours ne sont plus visibles et le menu déroulant Taille est
désactivé.
Si vous préférez utiliser des balises HTML, désactivez l'option Utiliser des balises CSS au lieu de
balises HTML dans la catégorie Général de la boîte de dialogue Préférences.
Ø Choisissez Edition / Préférences.
Ø Dans la catégorie Général de la boîte de dialogue Préférences, désactivez l'option Utiliser des
balises CSS au lieu de balises HTML.
Cette case à cocher se trouve dans la catégorie Options d'édition du panneau Préférences
générales.
Ø Cliquez sur OK.
Pour définir les propriétés de votre page web :
Ø Utiliser le raccourci clavier CTRL J
ou cliquer sur le menu Modifier / Propriétés de la page…
Ø Choisir une catégorie, à gauche, puis définir les propriétés de votre page…
AFCI NewSoft
17
Dreamw eaver V. 8
Catégorie Aspect : Définir ici la police de la page par défaut, la taille, ainsi que la couleur
du texte. La couleur d'arrière plan sera appliquée sur toute la page. L'image d'arrière plan
est désormais possible sans répétition en mosaïque, mais sera calée en haut à gauche de
votre page. Les marges pour votre page sont à définir en pixels, en cm ou autre mesure de
votre choix.
Catégorie Liens : Définir ici la police pour les liens (sur texte uniquement !!), taille et
couleurs. Les liens pourront être soulignés ou non.
!! Remarque : Liens de survol permet d'obtenir un effet "roll-over" sur le texte. Liens actifs
est la couleur qui apparaît au moment du clic.
AFCI NewSoft
18
Dreamw eaver V. 8
Catégorie En-têtes : La catégorie En-têtes CSS permet de spécifier la famille et la taille de
polices des en-têtes de pages CSS :
Police spécifie la famille de polices par défaut à utiliser dans vos pages Web.
Dreamweaver utilise la famille de polices spécifiée sauf si une autre police est désignée pour
un élément de texte donné. Les champs En-tête 1 à En-tête 6 spécifient les tailles et
couleurs à utiliser pour chaque niveau de balises d'en-tête, que vous pourrez ensuite
appliquer par le panneau Inspecteur des propriétés.
Catégorie Titre / Codage : Titre permet de spécifier le titre de la page, qui s'affiche dans la
barre de titre de la fenêtre de document et dans la plupart des fenêtres du navigateur. Type
de document (DTD) spécifie une définition de type de document. Par exemple, vous pouvez
rendre un document HTML compatible XHTML en sélectionnant XHTML 1.0 transitionnel ou
XHTML 1.0 Strict dans le menu déroulant.
Codage précise le codage utilisé pour les caractères du document. (L'encodage de document précise
le codage utilisé pour les caractères dans le document. L'encodage du document est spécifié dans une balise meta, insérée
dans l'en-tête du document ; il indique au navigateur et à Dreamweaver le mode de décodage du document et les polices à
utiliser pour afficher le texte décodé.
Par exemple, si vous spécifiez Occidental (Latin1), la balise meta suivante est insérée : <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">. Le document affiché dans Dreamweaver contient les polices que vous spécifiez dans
Préférences de polices pour l'encodage Occidental (Latin1) ; ce même document affiché dans un navigateur contient les polices
que l'utilisateur du navigateur précise pour l'encodage Occidental (Latin1).
Si vous spécifiez Japonais (Maj JIS), la balise meta suivante est insérée : <meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">. Le document affiché dans Dreamweaver contient les polices que vous spécifiez pour les encodages du
japonais ; ce même document affiché dans un navigateur contient les polices que l'utilisateur du navigateur précise pour les
encodages du japonais.)
AFCI NewSoft
19
Dreamw eaver V. 8
Catégorie Tracé de l'image : Permet d'insérer un fichier image à utiliser comme guide dans
la création de votre page :
Tracé de l’image permet de spécifier l'image à utiliser comme guide pour reproduire une
mise en page. Cette image sert uniquement de référence et n'apparaît pas lorsque le
document s'affiche dans un navigateur.
Transparence détermine l'opacité du tracé de l'image, de complètement transparent à
complètement opaque.
AFCI NewSoft
20
Dreamw eaver V. 8
8
LES TABLEAUX
Les tableaux sont très utiles pour présenter des données tabulaires et mettre en forme du
texte et des images dans une page HTML. Un tableau comprend au moins une ligne ;
chaque ligne comporte au moins une cellule. Bien que les colonnes ne soient généralement
pas spécifiées explicitement en code HTML, Dreamweaver vous permet de manipuler les
colonnes, les lignes et les cellules.
8.1
Insérer un tableau
Ø Placer le curseur à l’endroit où vous souhaitez insérer le tableau,
Ø Dans le panneau Insertion (ou Insérer, catégorie "Commun"), onglet
"Commun", cliquer sur le bouton "tableau"
Ø Définir le nombre de lignes, de colonnes, largeur en pixels ou pourcentage,
épaisseur des bordures en pixels (0 pour masquer)…
Ø Dans la section En-tête, sélectionnez l'une des options d'en-tête suivantes :
Aucun n'autorise pas les en-têtes de colonne ou de ligne pour le tableau.
Gauche transforme la première colonne du tableau en colonne d'en-têtes pour vous permettre
d'entrer un en-tête pour chaque ligne du tableau.
Haut transforme la première ligne du tableau en ligne d'en-têtes pour vous permettre d'entrer un
en-tête pour chaque colonne du tableau.
Les deux vous permet d'entrer des en-têtes de colonne et de ligne dans le tableau.
AFCI NewSoft
21
Dreamw eaver V. 8
Conseil : Il est judicieux d'employer des en-têtes au cas où l'un des visiteurs de votre site Web
utiliserait un lecteur d'écran. Les lecteurs d'écran lisent les en-têtes de tableau et aident les utilisateurs
à garder une trace des informations de tableau.
Ø Dans la section Accessibilité, définissez les options suivantes :
Légende fournit un titre de tableau qui s'affiche en dehors du tableau.
Aligner la légende indique où la légende du tableau apparaît par rapport au tableau.
Résumé fournit une description du tableau. Les lecteurs d'écran lisent le texte de résumé
mais le texte n'apparaît pas dans le navigateur de l'utilisateur.
Ø Cliquez sur OK pour créer le tableau.
8.2
Sélectionner un tableau
Ø Placer le curseur dans une cellule du tableau,
Ø Cliquer sur la balise <table> dans le sélecteur de balises.
Ø Cliquer sur la balise <td> pour sélectionner une cellule
Ø Cliquer sur la balise <tr> pour sélectionner la ligne
Remarque : La sélection d'une colonne ne peut pas se faire par une balise puisse qu'elle ne
sont pas spécifiées en code HTML, vous devez cliquer sur le pointeur placé au dessus de la
colonne, puis choisir "sélectionner la colonne".
8.3
Autres propriétés du tableau
Ø Sélectionner le tableau
Ø Définir les différentes options dans le panneau des Propriétés.
AFCI NewSoft
22
Dreamw eaver V. 8
8.4
Contenu des cellules
Dans chaque cellule, vous pouvez saisir directement du texte, insérer une image ou insérer
un autre tableau.
La touche tabulation du clavier permet de placer le curseur dans la cellule suivante et
d'ajouter une ligne en fin de tableau depuis la dernière cellule.
8.5
Redimensionner tableaux, lignes ou colonnes
Vous pouvez redimensionner tout un tableau ou seulement certaines cellules ou certaines
colonnes individuelles. Si vous avez des problèmes pour le redimensionnement, vous
pouvez effacer la largeur des colonnes ou la hauteur des lignes et recommencer.
Les largeurs de colonne définies dans le code HTML ne correspondent pas nécessairement
aux largeurs apparentes à l'écran. Dans ce cas, vous pouvez uniformiser les largeurs.
Dreamweaver affiche les largeurs de colonne et de tableau ainsi que les menus d'en-têtes
pour vous aider à mettre les tableaux en forme. Vous pouvez activer ou désactiver ces
informations à votre convenance.
a) Redimensionner un tableau :
Vous pouvez redimensionner un tableau dans l'inspecteur Propriétés ou en faisant glisser
l'une de ses poignées de sélection. Dreamweaver affiche la largeur du tableau, ainsi que le
menu des en-têtes du tableau, en haut ou en bas du tableau lorsque celui-ci est sélectionné
ou que le point d'insertion se trouve dedans.
Lorsque vous redimensionnez tout un tableau, toutes ses cellules changent de taille en
proportion. Si les cellules d'un tableau ont une largeur ou une hauteur spécifiées
explicitement, le redimensionnement du tableau modifie la taille visuelle des cellules dans la
fenêtre de document mais ne modifie pas la largeur et la hauteur spécifiées des cellules.
Ø Sélectionner le tableau,
Ø Dans le panneau des Propriétés, saisir une valeur en pixels ou pourcentage
pour la largeur (L) et/ou pour la hauteur (H).
AFCI NewSoft
23
Dreamw eaver V. 8
Pour activer ou désactiver les menus au dessus du tableau et de colonnes :
Ø Cliquer le menu Affichage / Assistances visuelles / Largeurs des tables.
Ou Cliquez du bouton droit de la souris dans le tableau, puis choisissez
Tableau / Largeurs des tables.
b) Redimensionner colonnes et lignes :
Vous pouvez modifier la largeur d'une colonne ou la hauteur d'une ligne dans l'inspecteur
Propriétés ou en faisant glisser les bordures de la colonne ou de la ligne. Si vous avez des
problèmes pour le redimensionnement, vous pouvez effacer la largeur des colonnes ou la
hauteur des lignes et recommencer.
Dreamweaver affiche la largeur des colonnes, ainsi que les menus des en-têtes de colonne,
en haut ou en bas des colonnes lorsque le tableau est sélectionné ou que le point d'insertion
se trouve dedans.
Pour modifier la largeur d'une colonne tout en conservant la même largeur de
tableau :
Ø Faites glisser la bordure droite de la colonne à modifier.
La largeur de la colonne contiguë est également modifiée, ainsi vous redimensionnez deux
colonnes. L'affichage visuel vous montre la manière dont les colonnes seront ajustées, la
largeur totale du tableau ne variant pas.
Remarque : Dans les tableaux avec des largeurs en pourcentage (et non en pixels), si vous
faites glisser la bordure droite de l'extrême droite du tableau, la largeur du tableau est
modifiée et toutes les colonnes s'adaptent proportionnellement.
AFCI NewSoft
24
Dreamw eaver V. 8
Pour modifier la largeur d'une colonne en conservant les dimensions des
autres colonnes :
Ø Maintenez la touche Maj (Shift) enfoncée, puis faites glisser la bordure de la
colonne.
Seule la largeur de cette colonne change. L'affichage visuel vous montre la manière dont les
colonnes seront ajustées, la largeur totale du tableau varie en fonction de la colonne
redimensionnée.
Pour définir la largeur d'une colonne ou la hauteur d'une ligne à l'aide de
l'inspecteur Propriétés :
Ø Sélectionnez une colonne ou une ligne,
Ø Dans l'inspecteur Propriétés, saisissez une valeur dans le champ de
texte L pour la largeur ou dans le champ de texte H pour la hauteur.
Ø Appuyez sur Tab ou Entrée pour valider.
Conseil : Vous pouvez spécifier la largeur ou la hauteur par des pixels ou des pourcentages.
Vous pouvez convertir les pixels en pourcentages et inversement.
8.6
Uniformiser largeurs de colonne en mode Code avec largeurs visuelles
Si vous voyez deux nombres indiquant la largeur d'une colonne, cela signifie que la largeur
de colonne définie dans le code HTML est différente de la largeur apparente à l'écran. Vous
pouvez uniformiser la largeur spécifiée dans le code et la largeur visuelle.
Pour uniformiser les largeurs :
Ø Cliquer dans une cellule.
Ø Cliquez sur le menu des en-têtes de colonne, puis choisissez Uniformiser
toutes les largeurs.
AFCI NewSoft
25
Dreamw eaver V. 8
Dreamweaver redéfinit la largeur spécifiée dans le code sur la largeur visuelle.
!! Attention : L'option d'affichage des menus doit être activée, (Menu Affichage / Assistances
visuelles / Largeurs des tables)
8.7
Supprimer toutes valeurs de largeurs et hauteurs
Il peut être parfois utile d'effacer les largeurs et les hauteurs définies, avant de
redimensionner un tableau ou en cas de problème lors du redimensionnement de colonnes
ou de lignes individuelles d'un tableau.
Remarque : Lorsque vous redimensionnez un tableau en faisant glisser l'une de ses
poignées de sélection, vous modifiez la dimension visuelle des cellules dans le tableau mais
vous ne modifiez pas les largeurs et hauteurs spécifiées des cellules. Il est judicieux de
supprimer des largeurs et des hauteurs définies avant le redimensionnement.
Ø Sélectionner le tableau,
Ø Cliquer sur le pointeur au-dessus du tableau et dans le menu, cliquer sur
Effacer toutes les hauteurs ou Effacer toutes les largeurs.
AFCI NewSoft
26
Dreamw eaver V. 8
Ø Vous pouvez également supprimer les largeurs en cliquant sur un des boutons
dans l'inspecteur des Propriétés :
Pour effacer la largeur d'une seule colonne :
1. Placer le curseur dans une cellule de la colonne concernée,
2. Cliquez sur le menu d'en-tête de la colonne, puis choisissez Effacer la largeur de
colonne.
8.8
Ajouter ou supprimer ligne ou colonne
a) Pour Insérer une colonne :
Ø Cliquez sur le menu des en-têtes de colonne, puis choisissez Insérer une
colonne à gauche ou Insérer une colonne à droite.
b) Pour insérer une ligne :
Ø Cliquer droit dans une des cellules de la ligne adjacente à la nouvelle ligne à
insérer,
Ø Dans le menu contextuel, choisir Tableau / Insérer une ligne
Remarque : L'insertion de ligne s'effectue toujours au-dessus de la position initiale du
curseur.
AFCI NewSoft
27
Dreamw eaver V. 8
c) Supprimer ligne ou colonne :
Ø Sélectionner ligne ou colonne entière à supprimer,
Ø Appuyer sur la touche Suppr du clavier.
8.9
Fusionner ou Fractionner cellules
b) Pour fusionner des cellules (rassembler) :
Ø Sélectionner les cellules à fusionner,
Ø Cliquer sur le bouton "Combiner la sélection rectangulaire des cellules" dans le
panneau Inspecteur des Propriétés.
c) Pour fractionner une cellule (diviser en plusieurs lignes ou colonnes) :
Ø Placer le curseur dans la cellule à fractionner,
Ø Cliquer sur le bouton "Diviser la cellule en lignes ou en colonnes" dans le
panneau Inspecteur des Propriétés.
8.10 Imbriquer des tableaux
Un tableau imbriqué est un tableau à l'intérieur d'une cellule d'un autre tableau. Vous pouvez
le mettre en forme comme n'importe quel tableau, mais sa largeur est limitée par la largeur
de la cellule dans laquelle il se trouve !
Ø Placer le curseur dans une cellule,
Ø Dans la panneau Insertion, onglet "Commun", (ou Insérer, catégorie
"Commun"), cliquer sur le bouton "tableau"
,
Ø Compléter les options de la boite de dialogue, cliquer OK pour insérer le
nouveau tableau.
AFCI NewSoft
28
Dreamw eaver V. 8
Remarque : Il est parfois utile d'insérer un tableau à l'intérieur d'un premier tableau dont la largeur et
la hauteur sont à 100%, de façon à aligner le deuxième tableau sur les valeurs de fenêtre du
navigateur quel qu'en soit sa taille.
8.11 Trier un tableau
Vous pouvez trier les lignes d'un tableau selon le contenu d'une seule colonne. Vous pouvez
également effectuer un tri plus complexe, selon le contenu de deux colonnes.
Ø Sélectionner le tableau,
Ø Cliquer le menu Commandes /
Trier le tableau,
Ø Définir les options de la boite
de dialogue.
9
INSERTION ET MISE EN FORME DE TEXTE
Dreamweaver permet d'ajouter et de mettre en forme du texte dans un document de
plusieurs façons. Vous pouvez insérer du texte, définir un type, une taille ou une couleur de
police, des attributs d'alignement ou encore créer et appliquer vos propres styles à l'aide de
feuilles de style en cascade (CSS).
9.1 Insertion de texte
Dreamweaver vous permet d'insérer facilement du texte dans un document. Vous pouvez le
taper directement, effectuer un copier/coller ou réaliser une importation. Vous pouvez
également insérer des espaces supplémentaires entre les caractères et les lignes de votre
texte.
AFCI NewSoft
29
Dreamw eaver V. 8
9.2 Importer des données tabulaires
Vous pouvez importer des données tabulaires dans un document HTML en enregistrant
d'abord ces fichiers (tels que des fichiers Microsoft Excel ou d'une base de données) sous
forme de fichiers texte délimités (*.txt).
Pour importer des données tabulaires :
Ø Cliquer le menu Insertion / Objets du tableau / Importer les données
tabulaires,
Ø Dans la boîte de dialogue recherchez le fichier souhaité en cliquant sur le
bouton Parcourir...,
Ø Choisir le délimiteur utilisé lors de l'enregistrement du fichier en tant que
texte délimité,
Les différentes options sont : Tab, Virgule, Point-virgule, Deux points et Autre.
Ø Si vous sélectionnez Autre, un champ vierge s'affiche à côté de l'option.
Préciser alors le caractère utilisé comme délimiteur,
Ø Utilisez les options restantes pour définir le tableau dans lequel seront
importées les données,
Ø Cliquez sur OK.
AFCI NewSoft
30
Dreamw eaver V. 8
9.3
Importer un document Microsoft Office
Vous pouvez insérer le contenu d'un document Microsoft Word ou Excel dans une page Web
nouvelle ou existante ou créer un lien vers ce fichier. Lorsque vous importez un document
Word ou Excel, Dreamweaver reçoit le code HTML converti et l'insère dans votre page Web.
La taille du fichier, après réception du code HTML converti par Dreamweaver, doit être
inférieure à 300 Ko.
Ø Placez le fichier à importer (Word ou Excel) dans le dossier de votre site,
Ø Ouvrez la page Web dans laquelle vous souhaitez copier le document Word
ou Excel,
Ø Assurez-vous que vous êtes en mode Création,
Ø Dans le panneau Fichiers, cliquez glissez le fichier Word ou Excel vers la
page web (ou menu Fichier / Importer…),
Ø La boîte de dialogue Insérer un document apparaît :
Ø Définissez les options souhaitées, puis cliquez sur OK.
Les options de mise en forme sont les suivantes :
Texte seul permet d'insérer du texte non formaté. Si le texte d'origine est mis en forme, cette dernière
est supprimée.
Texte structuré permet d'insérer du texte en conservant sa structure, mais sans la mise en forme de
base. Par exemple, vous pouvez coller un texte et conserver la structure des paragraphes, des listes
et des tableaux, mais pas les mises en gras, italiques et autres mises en forme.
Texte structuré avec formatage de base permet d'insérer du texte structuré et du texte HTML avec
une mise en forme simple.
Texte structuré avec formatage complet permet d'insérer du texte conservant toute sa structure,
mise en forme HTML et styles CSS.
AFCI NewSoft
31
Dreamw eaver V. 8
Nettoyage des espaces inter-paragraphes de Word permet d'éliminer les espaces superflus entre
les paragraphes lorsque vous collez le texte alors que l'option Texte structuré ou Mise en forme de
base est sélectionnée.
9.4
Ajout d'espacements de paragraphe
Dreamweaver fonctionne comme une application classique de traitement de texte : Appuyez
sur la touche Entrée pour commencer un nouveau paragraphe. Les navigateurs Web
insèrent automatiquement une ligne vierge entre les paragraphes. Vous pouvez vous-même
espacer les paragraphes d'une ligne vierge en insérant un saut de ligne.
Pour insérer un saut de paragraphe :
Ø Appuyez sur la touche Entrée.
Pour insérer un saut de ligne :
Ø Appuyez sur les touches Maj (Shift)+Entrée.
9.5
Mise en forme texte et paragraphes
Vous pouvez appliquer un formatage de texte à une seule lettre, à des paragraphes entiers
du site ou encore à des blocs de texte.
Ø Sélectionner le texte ou paragraphe à mettre en forme,
Ø Dans le panneau Inspecteur des Propriétés, définir taille, couleur, alignement,
retrait …
Pour mettre en forme un paragraphe :
Ø Placez le point d'insertion dans le paragraphe, ou sélectionnez une partie
du texte du paragraphe.
Ø Dans menu déroulant Format de l'inspecteur Propriétés, puis sélectionnez
un format : par exemple, En-tête 1, En-tête 2, Texte pré-formaté, etc.
La balise HTML associée au style choisi (par exemple, <h1> pour En-tête 1,
AFCI NewSoft
32
Dreamw eaver V. 8
<h2> pour En-tête 2, <p> pour paragraphe, <pre> pour Texte pré-formaté,
etc.) est appliquée à tout le paragraphe.
Ø Choisissez Aucun pour supprimer un format de paragraphe.
Lorsque vous choisissez une balise d'en-tête pour un paragraphe, Dreamweaver applique la
mise en forme définie dans les propriétés de la page, catégorie En-tête (voir chapitre
correspondant).
10 UTILISATION DE FEUILLES DE STYLES EN CASCADE (CSS)
Par défaut, Dreamweaver utilise des feuilles de style en cascade (CSS : Cascading Style Sheets) pour
mettre le texte en forme. Les styles appliqués au texte à l'aide de l'inspecteur Propriétés ou des
commandes de menu génèrent des règles CSS intégrées à la section <head> du document.
Vous pouvez également utiliser le panneau Styles CSS pour créer et modifier des propriétés et des
règles CSS. Ce panneau est un éditeur bien plus fiable que l'inspecteur Propriétés et présente toutes
les règles CSS définies dans le document actif, qu'elles soient intégrées à la section <head> du
document ou dans une feuille de style externe. Macromedia recommande l'utilisation du panneau
Styles CSS (plutôt que l'inspecteur Propriétés) comme outil principal de création et modification de
vos styles CSS. Ainsi, votre code sera plus clair et sa maintenance en sera simplifiée.
10.1 Description des feuilles de style en cascade
Les feuilles de style en cascade (CSS) regroupent des règles de mise en forme qui déterminent
l'aspect du contenu d'une page Web. Lorsque vous utilisez CSS pour formater une page, vous
séparez le contenu de sa présentation. Le contenu de votre page (le code HTML) réside dans le
fichier HTML, tandis que les règles CSS qui définissent la présentation du code résident dans un autre
fichier (une feuille de style externe) ou dans une autre partie du document HTML (généralement dans
la section <head>). CSS permet de contrôler de façon précise et souple l'aspect de la page, tant en
termes de précision de l'emplacement des éléments, qu'en termes de choix de polices et de styles
spécifiques.
Une règle de formatage CSS se compose de deux entités : le sélecteur et la déclaration. Le sélecteur
est un terme (tel que P, H1, un nom de classe ou une id) qui identifie l'élément formaté, tandis que la
déclaration définit les éléments du style. Dans l'exemple suivant, H1 correspond au sélecteur et tout
ce qui est placé entre les accolades ({}) correspond à la déclaration :
H1 {
font-size: 16 px;
font-family: Helvetica;
font-weight:bold;
}
La déclaration est composée de deux entités : la propriété (par exemple, font-family) et la
valeur (par exemple, Helvetica). Dans la règle CSS précédente, un style particulier a été créé pour
les balises H1 : le texte de toutes les balises H1 liées à ce style sera associé à une police Helvetica,
d'une taille de 16 pixels et en gras.
AFCI NewSoft
33
Dreamw eaver V. 8
Le terme en cascade signifie qu'il est possible d'appliquer plusieurs feuilles de style à un
même élément. Vous pouvez, par exemple, créer une règle CSS pour définir la couleur et
une autre pour les marges, puis les appliquer toutes les deux au même texte sur une
page.CSS présente l'avantage d'une mise à jour facile et rapide. Lorsque vous modifiez une
règle CSS en un emplacement, la mise en forme de tous les documents utilisant ce style
reflète automatiquement le nouveau style.
Les feuilles de style CSS externes regroupent des règles CSS enregistrées dans un fichier .css
externe distinct (pas dans un fichier HTML). Ce fichier est lié à une ou plusieurs pages d'un site Web à
l'aide d'un lien situé dans la section <head> d'un document.
Les feuilles de style CSS internes (ou incorporées) regroupent les règles CSS incluses dans une
balise style de la section <head> d'un document HTML.
10.2 Créer une feuille de styles CSS
Ø Afficher le panneau Styles CSS (menu Fenêtre / styles CSS),
Ø Cliquer sur le bouton Nouvelle règle de CSS…
Ø
Choisir un type de sélecteur (ex : classe)
Type Classe permet de créer un style personnalisé applicable en tant qu'attribut class
à une plage ou un bloc de texte, entrez ensuite le nom du style dans la zone de texte
Nom.
Remarque : Les noms de classe doivent commencer par un point et peuvent
contenir n'importe quelle combinaison de lettres et de chiffres (par exemple,
.monentete1). Si vous omettez le point, Dreamweaver l'insère à votre place.
Type Balise permet de redéfinir la mise en forme par défaut d'une balise HTML
spécifique. Choisissez ensuite une balise HTML dans le menu déroulant ou saisissez-en
une dans le champ Balise.
Type Avancé permet de définir la mise en forme d'une combinaison particulière de
balises ou de toutes les balises contenant un attribut Id spécifique. Entrez ensuite une
ou plusieurs balises HTML dans le champ Sélecteur ou choisissez-en une dans le menu
déroulant. Les sélecteurs (appelés sélecteurs de pseudo-classe) disponibles dans le
menu déroulant sont a:active, a:hover, a:link et a:visited.
Ø Nommer le style,
Ø Définir le style dans un nouveau fichier CSS ou Uniquement dans ce
document,
Ø Cliquer sur OK, puis choisir emplacement dans votre site où le fichier CSS
sera enregistré,
AFCI NewSoft
34
Dreamw eaver V. 8
Ø Définir le contenu du style, à l'aide de la boite de dialogue, en choisissant
une catégorie (à gauche)…
Ø Cliquer sur OK pour créer le style.
Description des différentes catégories de la boite de dialogue :
Catégorie Type :
Permet de définir les paramètres élémentaires de police, de couleur, de casse… d'un texte.
Police : permet de définir la famille de polices du style. Les navigateurs affichent le texte en utilisant la
première police installée sur l'ordinateur de l'utilisateur de la combinaison de polices choisie. Pour
assurer la compatibilité avec Internet Explorer, utilisez une police Windows en premier. Cet attribut est
pris en charge par les deux navigateurs.
Taille : définit la taille du texte. Les pixels en tant qu'unité fonctionnent correctement pour empêcher la
déformation du texte par les navigateurs. Cet attribut est pris en charge par les deux navigateurs.
Style : permet de spécifier la variation Normal, Italique ou Oblique comme style de la police. Cet
attribut est pris en charge par les deux navigateurs.
Hauteur de ligne : définit la hauteur de la ligne sur laquelle le texte est placé. Ce paramètre fait
généralement référence à la notion d'interligne. Choisissez Normal pour que la hauteur de ligne soit
calculée automatiquement en fonction de la taille de la police ou entrez une valeur fixe et sélectionnez
une unité de mesure. Cet attribut est pris en charge par les deux navigateurs.
Décoration : ajoute un effet de soulignement, de barre supérieure, de texte barré ou de clignotement
du texte. La valeur par défaut pour le texte des liens est Souligné. Si vous définissez le paramètre de
lien sur aucun, vous pouvez supprimer le soulignement des liens en définissant une classe spéciale.
Cet attribut est pris en charge par les deux navigateurs.
Epaisseur : applique aux caractères un niveau d'épaisseur. Cet attribut est pris en charge par les
deux navigateurs.
Variante : définit la variante en petites capitales du texte. Dreamweaver n'affiche pas cet attribut dans
la fenêtre de document. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape
Navigator.
Casse : permet de mettre en capitale la première lettre de chaque mot de la sélection ou de passer
l'ensemble du texte en majuscules ou minuscules. Cet attribut est pris en charge par les deux
navigateurs.
Couleur : définit la couleur du texte. Cet attribut est pris en charge par les deux navigateurs.
AFCI NewSoft
35
Dreamw eaver V. 8
Catégorie Arrière-plan :
Permet de définir les paramètres d'arrière-plan d'un élément d'une page web. Vous pouvez assortir un
élément de page d'une couleur ou d'une image d'arrière-plan (derrière un texte, une page, un tableau,
etc.).
Couleur d'arrière-plan : définit la couleur d'arrière-plan de l'élément. Cet attribut est pris en charge
par les deux navigateurs.
Image d'arrière-plan : définit l'image d'arrière-plan de l'élément. Cet attribut est pris en charge par les
deux navigateurs.
Remarque : Si vous définissez une couleur d'arrière-plan et une image d'arrière-plan, pour un
même élément (fond d'une une page, par exemple), seule la couleur apparaîtra !!
Répétition : détermine comment l'image d'arrière-plan doit être répétée. Cet attribut est pris en charge
par les deux navigateurs.
Pas de répétition affiche l'image une seule fois, dans le coin supérieur gauche de l'élément.
Répéter crée une mosaïque horizontale et verticale de l'image derrière l'élément.
Répéter-x et Répéter-y affichent respectivement un bandeau horizontal ou vertical. Les
dernières images sont coupées pour s'adapter aux dimensions exactes de l'élément.
Remarque : La propriété Répétition vous permet de redéfinir la balise <body> et de définir une
image d'arrière-plan sans mosaïque ni répétition.
Pièce jointe (ou Fixation) : détermine si l'image d'arrière-plan reste fixe par rapport à sa position
d'origine ou défile avec le contenu. Notez que certains navigateurs font toujours défiler l'image avec
son contenu. Cet attribut est pris en charge par Internet Explorer, mais non par Netscape Navigator.
Position horizontale et Position verticale : spécifient la position initiale de l'image d'arrière-plan par
rapport à l'élément. Ceci peut être utilisé pour aligner une image d'arrière-plan sur le centre de la
page, verticalement et horizontalement. Si la propriété Fixation est réglée sur Fixe, cette position est
relative à la fenêtre de document, pas à l'élément. Cet attribut est pris en charge par Internet Explorer,
mais non par Netscape Navigator.
AFCI NewSoft
36
Dreamw eaver V. 8
Catégorie Bloc :
Permet de définir les paramètres d'espacement et d'alignement des balises et des attributs.
Espacement des mots : définit l'intermots. Choisissez "valeur" dans le menu déroulant, puis entrez
une valeur numérique. Puis, choisissez une unité de mesure (par exemple, pixels, points, etc.).
Remarque : Vous pouvez indiquer des valeurs négatives, mais le résultat final variera selon le
navigateur. Dreamweaver n'affiche pas cet attribut dans la fenêtre de document.
Espacement des lettres : augmente ou réduit l'interlettrage. Une valeur négative (par exemple, -4)
réduit l'espacement entre les caractères. Les paramètres d'interlettrage ont priorité sur les paramètres
de justification du texte. Cet attribut est pris en charge par Internet Explorer depuis la version 4, mais
non par Netscape Navigator 6.
Alignement vertical : détermine l'alignement vertical de l'élément auquel il s'applique. Dreamweaver
n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué à la balise <img>.
Alignement du texte : détermine l'alignement horizontal du texte au sein de l'élément. Cet attribut est
pris en charge par les deux navigateurs.
Retrait du texte : détermine le retrait de texte sur la première ligne. Vous pouvez utiliser une valeur
négative. Dreamweaver n'affiche cet attribut dans la fenêtre de document que lorsqu'il est appliqué
aux éléments au niveau du bloc. Cet attribut est pris en charge par les deux navigateurs.
Espace blanc : détermine la gestion des espaces au sein de l'élément. Choisissez parmi les trois
options suivantes : Normal réduit à un seul espace une suite éventuelle de plusieurs caractères
d'espacement ; Pre gère les espaces comme si le texte était inséré à l'intérieur d'une balise pre (tous
les caractères d'espacement, notamment les espaces, tabulations et retours chariot, sont respectés) ;
Pas de retour spécifie que le texte peut uniquement être renvoyé à la ligne à l'apparition d'une balise
br. Dreamweaver n'affiche pas cet attribut dans la fenêtre de document. Cet attribut est pris en charge
par Netscape Navigator et par Internet Explorer depuis 5.5.
Afficher : détermine le mode d'affichage d'un élément, le cas échéant. Aucune désactive l'affichage
d'un élément.
AFCI NewSoft
37
Dreamw eaver V. 8
Catégorie Boite :
La catégorie Boîte permet de définir les paramètres des balises et des attributs pour le
positionnement des éléments sur la page.
Vous pouvez appliquer des paramètres individuels aux côtés d'un élément lors de la définition du
remplissage et des marges ou utiliser l'option Idem pour tous pour appliquer le même paramètre à
tous les côtés d'un élément.
Largeur et Hauteur : définissent la largeur et la hauteur de l'élément.
Flottante : détermine de quel côté les autres éléments, tels que le texte, les calques, les tableaux,
etc., flottent autour d'un élément. Les autres éléments sont affichés autour de l'élément flottant,
suivant la méthode habituelle. Cet attribut est pris en charge par les deux navigateurs.
Effacer : définit les côtés sur lesquels les calques ne sont pas autorisés. Si un calque apparaît du côté
marqué dans Effacer, l'élément possédant cet attribut passera sous le cadre. Cet attribut est pris en
charge par les deux navigateurs.
Zone Remplissage : définit la marge intérieure, c'est-à-dire l'espace qui sépare le contenu de
l'élément de sa bordure (ou sa marge s'il ne comporte pas de bordure). Désactivez l'option Idem pour
tous si vous voulez définir un remplissage différent pour chaque côté de l'élément.
Idem pour tous : applique le même remplissage aux bords supérieur, droit, inférieur et gauche
de l'élément.
Zone Marge : définit l'espace qui sépare la bordure d'un élément (ou son remplissage s'il ne comporte
pas de bordure) d'un autre élément. Dreamweaver n'affiche cet attribut dans la fenêtre de document
que lorsqu'il est appliqué aux éléments au niveau du bloc (paragraphes, en-têtes, listes, etc.).
Désactivez l'option Idem pour tous si vous voulez définir une marge différente pour chaque côté de
l'élément.
Idem pour tous : applique les mêmes attributs de marge aux bords supérieur, droit, inférieur et
gauche de l'élément.
AFCI NewSoft
38
Dreamw eaver V. 8
Catégorie Bordures :
Permet de définir les paramètres des bordures des éléments, par exemple leur épaisseur, leur couleur
et leur style.
Zone Style : définit l'aspect de la bordure. Dreamweaver restitue tous les styles en aplat dans la
fenêtre de document. Cet attribut est pris en charge par les deux navigateurs. Désactivez l'option
Idem pour tous si vous voulez définir un style de bordure différent pour chaque côté de l'élément.
Idem pour tous : applique le même style de bordure aux bords supérieur, droit, inférieur et
gauche de l'élément.
Zone Largeur : détermine l'épaisseur de la bordure de l'élément. Cet attribut est pris en charge par
les deux navigateurs. Désactivez l'option Idem pour tous si vous voulez définir une épaisseur
différente pour chaque côté de l'élément.
Idem pour tous : applique la même épaisseur aux bords supérieur, droit, inférieur et gauche de
l'élément.
Zone Couleur : définit la couleur de la bordure. Désactivez l'option Idem pour tous si vous voulez
définir une couleur différente pour chaque côté de l'élément.
Idem pour tous : applique la même couleur aux bords supérieur, droit, inférieur et gauche de
l'élément.
AFCI NewSoft
39
Dreamw eaver V. 8
Catégorie Liste :
Permet de définir les paramètres des balises de liste, tels que la taille et le type des puces.
Type : détermine l'aspect des puces ou des numéros. Cet attribut est pris en charge par les
deux navigateurs.
Illustration de la puce : permet de choisir une image personnalisée pour les puces. Cliquez
sur Parcourir… pour sélectionner une image ou tapez le chemin d'accès de celle-ci.
Position : détermine si le texte de l'élément de la liste est habillé et mis en retrait (extérieure)
ou si le texte habille la marge de gauche (intérieure).
Catégorie Positionnement :
Permet de transformer la balise ou le bloc du texte sélectionné en un nouveau calque, en
utilisant la balise par défaut de définition des calques dans les préférences (menu Edition).
AFCI NewSoft
40
Dreamw eaver V. 8
Type : détermine la façon dont le navigateur doit positionner le calque, avec les options suivantes :
Absolu : place le calque suivant les coordonnées indiquées dans la zone Emplacement, par rapport au
coin supérieur gauche de la page.
Relatif : place le calque suivant les coordonnées indiquées dans la zone Emplacement, par rapport à la
position de l'objet dans le flux de texte du document. Dreamweaver n'affiche pas cette option dans la
fenêtre de document.
Statique : place le calque à son emplacement dans le flux de texte.
Visibilité : détermine la condition de l'affichage initial du calque. Si vous ne spécifiez pas de propriété
de visibilité, la plupart des navigateurs l'interprètent comme Hériter.
Hériter : prend la propriété de visibilité de l'objet parent du calque. Si le calque n'a aucun parent, il est
visible.
Visible : affiche le contenu du calque, quelle que soit la valeur du parent.
Masqué : dissimule le contenu du calque, quelle que soit la valeur du parent.
Index Z : détermine l'ordre de superposition du calque (coordonnée verticale). Plus l'index-z du calque
est élevé, plus le calque se trouve au-dessus des autres calques de valeur d'index inférieure. Les
valeurs peuvent être positives ou négatives. Pour modifier l'ordre de superposition des calques, il est
plus facile d'utiliser le panneau Calques.
Débordement (calques CSS seulement) : détermine ce qui se passe lorsque le contenu d'un calque
dépasse sa taille. Ces propriétés déterminent le traitement de cet excédent comme suit :
Visible : augmente la taille du calque pour que tout son contenu soit visible. Le calque s'agrandit vers le
bas et vers la droite.
Masqué : conserve la taille du calque et coupe tout contenu dépassant la taille. Aucune barre de
défilement n'est affichée.
Défilement : ajoute des barres de défilement au calque, même si le contenu ne dépasse pas la taille du
calque. Le fait d'intégrer des barres de défilement évite la confusion causée par l'apparition et la disparition
de barres de défilement dans un environnement dynamique. Cette option n'est pas affichée dans la fenêtre
de document, et seuls les navigateurs qui prennent en charge les barres de défilement l'accepteront. Cet
attribut est pris en charge par Internet Explorer et par Netscape Navigator 6.
Auto : ne fait apparaître les barres de défilement que lorsque le contenu du calque dépasse les limites de
ce dernier. Dreamweaver n'affiche pas cette option dans la fenêtre de document.
Emplacement : définit l'emplacement et la taille du calque. La façon dont le navigateur interprète
l'emplacement dépend de l'option choisie pour l'attribut Type. Les valeurs relatives à la taille ne sont
pas prises en compte si le contenu du calque excède la taille spécifiée.
Les unités par défaut pour l'emplacement et la taille sont les pixels. Pour les calques CSS, vous pouvez
également spécifier les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimètres), cm
(centimètres) ou % (pourcentage de la valeur équivalente de l'objet parent). Les abréviations doivent suivre
la valeur sans espace : par exemple, 3mm.
Détourage : définit la partie du calque qui est visible. Si vous indiquez une zone de détourage, vous
pouvez la gérer à l'aide d'un langage de script tel que Java Script et modifier ces propriétés pour créer
des effets spéciaux, par exemple un effet de volet à l'ouverture. Ces effets de volet peuvent être
configurés via le comportement Changer la propriété.
AFCI NewSoft
41
Dreamw eaver V. 8
Catégorie Extensions :
Les attributs de style d'extensions comprennent les filtres, les sauts de page et les options de
pointeur. La plupart d'entre eux ne sont pris en charge par aucun navigateur ou le sont uniquement
par Internet Explorer 4.0 et versions ultérieures.
Saut de page : force un saut de page en cas d'impression de la page, avant ou après l'objet contrôlé
par ce style. Choisissez l'option que vous souhaitez définir dans le menu déroulant. Cet attribut n'est
pas pris en charge par la version 4.0 des navigateurs, mais peut l'être dans les versions ultérieures.
Curseur : modifie l'aspect du pointeur lorsque celui-ci passe au-dessus de l'objet contrôlé par ce style.
Choisissez l'option que vous voulez définir dans le menu déroulant. Cet attribut est pris en charge par
Internet Explorer 4.0 et versions ultérieures et par Netscape Navigator 6.
Filtre : applique des effets spéciaux, dont des effets de flou et de négatif, à l'objet contrôlé par ce
style. Sélectionnez un effet dans le menu contextuel.
AFCI NewSoft
42
Dreamw eaver V. 8
10.3 Appliquer un style CSS
Ø Sélectionner l'élément (texte, paragraphe ou balise) auquel vous souhaitez
appliquer le style, puis :
1 - Dans le panneau
des styles CSS :
Cliquer sur le bouton
Tous.
2 – Cliquer sur + pour
afficher toutes les
règles de style
définies dans la feuille
style CSS. (ici, une
seule règle a été
définie).
3 – Cliquer bouton
droit de souris sur le
style à appliquer,
puis choisir Appliquer
Remarque : Vous pouvez également appliquer un style à l'aide du panneau Inspecteur des
propriétés, dans le menu déroulant "Style".
10.4 Oter un style CSS
Ø Sélectionnez l'objet ou le texte auquel le style ne doit plus être appliqué,
Ø Dans le panneau Inspecteur des propriétés, choisissez Aucun dans le menu
déroulant "Style".
AFCI NewSoft
43
Dreamw eaver V. 8
10.5 Attacher une feuille de style CSS :
Vous pouvez attacher une feuille de style externe (fichier css) dans un nouveau document
afin d'y appliquer les styles. Vous pour également exporter les styles CSS crées dans un
document afin de créer une nouvelle feuille de style CSS.
Ø Ouvrir ou Créer un nouveau document HTML (Menu Fichier/Nouveau),
Ø Dans le panneau Styles CSS, cliquez sur le bouton Attacher une feuille de
style
situé en bas à droite du panneau,
Ø Cliquer sur le bouton Parcourir… pour sélectionner le fichier css à attacher
(lier) au document HTML,
Ø Choisir l'option Lien pour créer un lien entre le document actif et la feuille de
style externe,
Cette sélection a pour effet de créer une balise de lien href dans le code HTML et de
référencer l'URL de l'emplacement de la feuille de style publiée. Microsoft Internet Explorer et
Netscape Navigator prennent tous deux en charge cette méthode.
Ø Cliquez sur le bouton Aperçu pour vérifier que la feuille de style applique
effectivement les styles de votre choix à la page active (dans panneau CSS !).
Ø Cliquer sur OK pour valider.
10.6 Modifier une règle de style CSS
Vous pouvez facilement modifier les règles internes et externes appliquées à un document.
Lorsque vous modifiez une feuille de style CSS qui contrôle du texte dans votre document,
vous reformatez instantanément tout ce texte. Les modifications apportées à une feuille de
style externe se répercutent sur tous les documents auxquels elle est liée.
1 - Dans le panneau des styles CSS :
cliquer sur le bouton Tous.
2 – Double cliquer sur le style à
modifier, puis compléter la boite de
dialogue (voir chapitre "Créer une règle CSS").
AFCI NewSoft
44
Dreamw eaver V. 8
10.7 Créer une nouvelle règle dans une feuille de style CSS (fichier) existante
Ø Dans le panneau Styles CSS,
Ø Cliquer sur le bouton Nouvelle règle de CSS…
1 – Choisir le type de sélecteur Classe
2 – Nommer la nouvelle règle à
créer dans le fichier css,
3 – Sélectionner le nom du fichier css
(feuille de style) dans lequel la nouvelle
règle doit être créée,
4 – Cliquer sur OK, puis
compléter la boite de
dialogue pour définir la
nouvelle règle.
Cliquer sur OK pour
ajouter cette nouvelle
règle dans la feuille de
style.
Désormais, vous disposez d'une nouvelle
règle (ici, style "rubrique2") disponible dans tous
les documents auxquels la feuille de style est
liée !!
AFCI NewSoft
45
Dreamw eaver V. 8
10.8 Exporter des styles pour créer une nouvelle feuille de style CSS
Ø Ouvrir le fichier CSS (menu Fichier / Ouvrir) à exporter,
Ø Dans le panneau CSS, cliquer bouton droit de souris, puis cliquer Exporter...
Ø Enregistrer le nouveau fichier CSS.
Remarque : La totalité des règles de la feuille de style est copiée dans la nouvelle feuille de
style !!
10.9 Supprimer une règle de CSS dans une feuille de style
Ø Ouvrir le fichier CSS ou un document lié à la feuille de style CSS,
Ø Dans le panneau CSS, sélectionner la règle de CSS à supprimer,
Ø Cliquer sur le bouton "supprimer règle de CSS"
situé en bas à droite du panneau.
Remarque : Les suppressions de règle de CSS apportées à une feuille de style externe se
répercutent sur tous les documents auxquels elle est liée. Les textes ou autre éléments qui
étaient mis en forme à l'aide du style supprimé ont désormais une mise en forme par défaut !
AFCI NewSoft
46
Dreamw eaver V. 8
11 LES IMAGES
Différents types de formats de fichiers graphiques existent, mais trois formats de fichiers
graphiques sont généralement utilisés dans les pages Web : GIF, JPEG et PNG.
Actuellement, les formats de fichiers GIF et JPEG sont les formats les mieux pris en charge
et peuvent être visualisés par la plupart des navigateurs.
Les fichiers PNG sont les plus adaptés pour la plupart des types de graphiques Web en
raison de leur souplesse et de leur taille réduite ; toutefois, l'affichage d'images PNG n'est
que partiellement pris en charge dans Microsoft Internet Explorer (4.0 et versions ultérieures)
et dans Netscape Navigator (4.04 et versions ultérieures). A moins que votre site ne soit
spécifiquement destiné à des navigateurs prenant en charge le format PNG, utilisez des
fichiers GIF ou JPEG afin de cibler un plus large public.
•
Les fichiers GIF (Graphic Interchange Format) utilisent un maximum de 256
couleurs et sont destinés à l'affichage d'images à tons non continus ou d'images
comportant de larges zones de couleurs unies, telles que les barres de
navigation, les boutons, les icônes, les logos ou d'autres images contenant des
tons et des couleurs uniformes.
•
Le format de fichier JPEG (Joint Photographic Experts Group) est le format
supérieur destiné aux photographies ou aux images à tons continus, car de tels
fichiers peuvent contenir des millions de couleurs. Lorsque la qualité d'un fichier
JPEG augmente, sa taille et son temps de téléchargement augmentent
également. Il est souvent possible d'obtenir un bon compromis entre la qualité
de l'image et sa taille de fichier en compressant un fichier JPEG.
•
Le format de fichier PNG (Portable Network Group) est un format de
remplacement non breveté pour les fichiers GIF, qui inclut la prise en charge
des images à couleurs indexées, en niveaux de gris et en couleurs vraies ainsi
que la prise en charge du canal alpha pour la transparence. PNG est le format
de fichier natif de Macromedia Fireworks. Les fichiers PNG conservent toutes
les informations d'origine sur les calques, les vecteurs, les couleurs et les effets
(comme par exemple des ombres portées) et tous ces éléments peuvent être
modifiés à tout moment. Les fichiers doivent avoir l'extension .png pour être
reconnus comme fichiers PNG par Dreamweaver.
11.1 Insérer une image
Ø Placer le curseur à l’endroit où vous souhaitez insérer une image (cellule d'un
tableau ou un calque)
Ø Cliquer sur le bouton Images
"Insertion",
de l'onglet "Commun" du panneau
Ø Sélectionner l'image à insérer.
Remarque : Si vous cliquez sur le pointeur noir du bouton, vous devrez choisir Images dans
le menu déroulant.
AFCI NewSoft
47
Dreamw eaver V. 8
11.2 Insérer un espace réservé pour une image
Un espace réservé pour une image est un "objet" que vous utilisez jusqu'à ce que le dessin
final soit prêt pour être ajouté à une page Web.
Ø Placer le curseur à l’endroit où vous souhaitez insérer un espace réservé
pour la future image (cellule d'un tableau ou un calque)
Ø Cliquer sur le pointeur noir du bouton Images
panneau "Insertion",
de l'onglet "Commun" du
Choisir "Espace réservé
pour une image"
Ø Compléter la boite de dialogue :
11.3 Modifier les propriétés d'une image
Dreamweaver comprend des fonctions basiques de retouche d'image, ce qui vous évite de
devoir lancer une application externe pour effectuer cette tâche (par exemple, Macromedia
Fireworks). Les outils de retouche d'image de Dreamweaver sont conçus pour un travail
simplifié.
Remarque : Vous n'avez pas besoin d'avoir installé Macromedia Fireworks sur votre
ordinateur pour utiliser les fonctions de retouche d'image de Dreamweaver.
Dreamweaver comporte les fonctions de retouche permettant d'effectuer un
rééchantillonnage d'image, un recadrage, une accentuation ou encore modifier la luminosité
et le contraste.
AFCI NewSoft
48
Dreamw eaver V. 8
11.3.1 Alignement d'une image
Ø Sélectionnez l'image (en mode Création), en cliquant une fois dessus,
Ø Choisir l'alignement dans la liste déroulante Aligner de l'inspecteur Propriétés.
Les options d'alignement sont les suivantes :
Défaut provoque généralement un alignement sur la ligne de base. La valeur par défaut varie selon le
navigateur du visiteur du site.
Ligne de base et Bas alignent la ligne de base du texte (ou de tout autre élément du même paragraphe) sur le
bas de l'objet sélectionné.
Haut aligne le haut d'une image sur le haut de l'élément le plus élevé (image ou texte) dans la ligne.
Milieu aligne le milieu de l'image avec la ligne de base de la ligne.
Haut du texte aligne le haut de l'image avec le haut du plus grand caractère de la ligne de texte.
Milieu absolu aligne le milieu de l'image avec le milieu du texte dans la ligne actuelle.
Bas absolu aligne le bas de l'image avec le bas de la ligne de texte (y compris les jambages inférieurs comme
dans la lettre g).
Gauche aligne l'image sélectionnée sur la marge de gauche et place le texte qui l'entoure à sa droite. Si le texte
aligné à gauche précède l'objet sur la ligne, les objets alignés à gauche sont généralement placés
automatiquement sur une nouvelle ligne.
Droite aligne l'image sur la marge de droite et place le texte qui l'entoure à sa gauche. Si le texte aligné à droite
précède l'objet sur la ligne, les objets alignés à droite sont généralement placés automatiquement sur une
nouvelle ligne.
11.3.2 Recadrage d'une image
Dreamweaver permet de recadrer (ou rogner) les images.
Remarque : Lorsque vous recadrez une image à l'aide de Dreamweaver, le fichier d'image source est
modifié sur le disque. Il peut donc s'avérer utile de conserver une copie de sauvegarde du fichier
d'image au cas où vous auriez besoin de revenir à l'image d'origine.
Ø Ouvrir la page qui contient l'image à recadrer, sélectionnez l'image,
Ø Cliquer sur l'icône Recadrer
dans l'inspecteur Propriétés,
Ø Une boîte de dialogue informe que le fichier image sera modifié sur le disque,
Ø Des poignées de recadrage apparaissent autour de l'image sélectionnée,
Ø A l'aide des poignées de
recadrage, ajuster la
surface de l'image à
conserver en faisant un
cliquer glisser,
Ø Appuyez sur Entrée pour
recadrer la sélection.
AFCI NewSoft
49
Dreamw eaver V. 8
11.3.3 Ajuster luminosité et contraste d'une image
La fonction Luminosité/Contraste modifie la luminosité ou le contraste des pixels qui
composent l'image. Ceci affecte les surbrillances, les ombres et les demi-tons d'une image.
Cette fonction est utilisée pour corriger les images trop sombres ou trop claires.
Ø Sélectionner l'image à ajuster,
Ø Cliquez sur le bouton Luminosité/Contraste
dans l'inspecteur Propriétés,
Ø Dans la boîte de dialogue Luminosité/Contraste déplacer les curseurs de
luminosité et de contraste (les valeurs sont comprises entre -100 et 100),
Ø Cliquer sur OK pour valider.
11.3.4 Accentuer une image
L'accentuation augmente le contraste des pixels autour des objets pour une meilleure
définition de l'image.
Ø Sélectionner l'image à accentuer,
Ø Cliquer sur le bouton Accentuer
dans l'inspecteur Propriétés,
Ø Dans la boîte de dialogue, spécifier le degré d'accentuation à appliquer en
déplaçant le curseur (ou taper une valeur comprise entre 0 et 10 dans la zone de texte ),
Ø Cliquer sur OK.
AFCI NewSoft
50
Dreamw eaver V. 8
11.3.5 Nommer une image
Ø Sélectionner l'image à nommer,
Ø Dans l'inspecteur des propriétés, saisir un nom, puis appuyer sur la touche
Entrée.
11.3.6 Redimensionner une image
Dans Dreamweaver, vous pouvez redimensionner visuellement certains éléments comme des images,
des plug-ins, des fichiers Flash…
Si vous redimensionnez visuellement une image dans Dreamweaver, mais que vous n'utilisez pas
d'application de retouche d'image (comme Adobe Photoshop ou Macromedia Fireworks) pour en
adapter les proportions aux dimensions désirées, le navigateur de l'utilisateur devra le faire lorsque la
page sera chargée. Cela risque d'entraîner l'allongement du temps de téléchargement de la page et
l'affichage incorrect de l'image dans le navigateur. Pour réduire le temps de téléchargement et être sûr
de l'affichage de toutes les propriétés de l'image, utilisez une application de retouche d'image pour
adapter les proportions de l'image.
Ø Sélectionner l'élément (par exemple, une image ou un fichier SWF (flash)),
Ø Dans l'inspecteur des propriétés, saisir une valeur numérique dans la zone
H (hauteur) et/ou dans la zone L (largeur) en prenant soin de conserver les
proportions (rapport largeur/hauteur) de l'élément.
Vous pouvez également ajuster simultanément la largeur et la hauteur de l'élément, à
l'aide de la souris, en faisant un glisser de la poignée de l'angle. Pour conserver les
proportions de l'élément (rapport largeur/hauteur) lorsque vous modifiez ses dimensions,
faites glisser la poignée de l'angle de la sélection tout en appuyant sur la touche Maj (shift).
Remarque : Une fois les dimensions visuelles originales modifiées, les valeurs numériques
de la largeur et/ou la hauteur apparaissent en gras dans l'inspecteur des propriétés.
Pour rétablir la taille originale d'un élément redimensionné :
Ø Cliquer sur le bouton Rétablir la taille
situé à côté des zones L et H.
dans l'inspecteur Propriétés
Vous pouvez également supprimer les valeurs des zones de texte L et H.
AFCI NewSoft
51
Dreamw eaver V. 8
11.3.7 Rééchantillionner une image
Le rééchantillonnage d'image redimensionnée permet d'en améliorer la qualité dans ses
nouvelles taille et forme. Le rééchantillonnage d'une image en réduit la taille, ce qui permet
d'en accélérer le téléchargement. En général, le rééchantillonnage d'une image à une
résolution supérieure provoque une faible perte de qualité. Le rééchantillonnage à une
résolution inférieure, en revanche, provoque toujours une perte de données et donne une
moins bonne qualité.
Ø Redimensionner l'image de la manière décrite précédemment, puis
Ø Cliquer sur le bouton Rééchantillonner
images.
dans l'inspecteur Propriétés des
Remarque : Cet outil n'est actif que si vous avez redimensionné une image. Vous ne pouvez
pas rééchantillonner les espaces réservés pour une image ou les éléments autres que les
images bitmap.
11.4 Insérer une image survolée (Roll-over)
Appelée aussi "roll-over", une image survolée est une image qui change lorsque le pointeur
de souris est placé au-dessus d’elle. Cette commande de Dreamweaver fait appel au
langage "Javascript" en créant un Comportement. Un comportement est la combinaison
d'un événement et d'une action déclenchée par cet événement. Les images survolées sont
automatiquement définies pour répondre à l'événement onMouseOver et au comportement
"Permuter une image".
Remarque : Vous devez disposer de deux images pour insérer une image survolée : une
image principale et une image secondaire. Les deux images utilisées doivent avoir les
mêmes dimensions ; si ce n'est pas le cas, Dreamweaver redimensionne automatiquement
la seconde image en fonction de la taille de la première.
Ø Dans votre page, placer le curseur à l'endroit où vous voulez insérer l'image
survolée,
Ø Dans le panneau Insertion, onglet Commun, cliquer sur le pointeur noir du
bouton Images et choisir "Image survolée" (voir illustration ci-dessous) :
AFCI NewSoft
52
Dreamw eaver V. 8
Compléter les options de la boîte de dialogue :
Ø Nommer l'image survolée.
Ø Cliquer sur le bouton Parcourir… pour sélectionner l'image à afficher lors du
chargement de la page (image originale),
Ø Cliquez sur le bouton Parcourir… pour sélectionner l'image à afficher (image
survolée) lorsque le pointeur est placé au-dessus de l'image originale,
Si vous souhaitez précharger les images dans la mémoire cache du navigateur afin d'éviter tout
délai lorsque vous faites passer le pointeur de la souris par-dessus l'image, sélectionnez l'option
Précharger les images.
Ø (Facultatif) Dans Texte secondaire, saisir une description de l'image pour les
personnes utilisant un navigateur en mode texte,
Ø Cliquez sur le bouton Parcourir… pour sélectionner le fichier à atteindre (aller à
l'URL) si l'utilisateur clique sur l'image survolée.
Remarque : Si vous ne définissez pas un lien pour l'image, Dreamweaver insère un lien nul (#)
dans le code source HTML auquel le comportement de survol est attaché. Si vous supprimez le
lien nul, l'image survolée ne f onctionne plus.
Ø Cliquez sur le bouton OK pour valider
Désormais, sur la sélection de l'image survolée, vous
pouvez constater que dans le panneau comportements,
2 comportements ont bien été crées (voir ci-contre).
Il est impossible de voir l'effet d'une image survolée dans
le mode Création.
12 TESTER VOTRE DOCUMENT DANS UN NAVIGATEUR
Ø
Appuyez sur la touche F12 pour afficher la page en cours dans votre
navigateur (principal) par défaut et/ou CTRL F12 pour votre navigateur secondaire,
Remarque : Si vous n'avez pas encore sélectionné de navigateur, cliquer menu Edition /
Préférences, puis sélectionner la catégorie Aperçu située dans la partie gauche du navigateur
pour sélectionner un navigateur.
Ø Vous pour pouvez maintenant tester le contenu de votre page.
AFCI NewSoft
53
Dreamw eaver V. 8
13 LES CALQUES
Un calque est un élément de page HTML auquel une position absolue est attribuée. Les
calques peuvent comporter du texte, des images ou tout autre contenu à placer au sein d'un
document HTML.
Dreamweaver vous permet d'effectuer la mise en forme d'une page à l'aide de calques. Vous
pouvez placer les calques devant ou derrière d'autres calques, masquer certains d'entre eux
et en afficher d'autres ou encore déplacer les calques à l'écran (animation). Vous pouvez
placer une image d'arrière-plan dans un calque, puis placer un deuxième calque contenant
du texte avec un arrière-plan transparent devant ce dernier.
Les calques offrent une grande souplesse dans le placement de contenu. Il se peut toutefois
que les visiteurs de votre site possédant de très anciens navigateurs ne puissent pas les
visualiser. Pour que votre page Web puisse être visualisée par tous, vous pouvez effectuer
votre mise en page à l'aide de calques, puis les convertir en tableaux.
Tout d'abord; afficher le panneau Calques (Menu Fenêtre / Calques).
13.1 Insérer un calque
Ø Dans le panneau Insertion, onglet Mise en forme, cliquer sur l'outil
,
"Dessiner un calque"
Ø Cliquer glisser dans votre document pour dessiner le calque.
Ø Placer le curseur à l'intérieur du calque, puis Saisir le texte, insérer une image,
insérer un tableau ou insérer un autre calque.
13.2 Sélectionner un calque
Pour sélectionner un calque à l'aide du Panneau Calques :
Dans le panneau Calques
(Fenêtre / Calques),
cliquer sur le nom du
calque.
Pour sélectionner un calque directement dans le document :
Cliquer sur la poignée de
sélection du calque ( si la
poignée n'est pas visible, cliquer
n'importe où dans le calque p our
la faire apparaître )
ou Cliquer sur la bordure
du calque.
AFCI NewSoft
54
Dreamw eaver V. 8
13.3 Définir les propriétés d'un calque
Ø Sélectionner le calque, puis dans le panneau Inspecteur des Propriétés :
Ø
Dans la zone ID de calque, saisir un nom pour le calque. Seuls les caractères
alphanumériques sont acceptés ; n'utilisez aucun caractère spécial comme les espaces, les traits
d'union, les barres obliques ou les points. Chaque calque doit porter un nom unique.
Ø G et S (gauche et haut) indiquent la position de l'angle supérieur gauche du calque
par rapport à l'angle supérieur gauche de la page, ou du calque parent s'il est
imbriqué.
Ø L et H spécifient la largeur et la hauteur du calque.
Remarque : Si le contenu d'un calque dépasse la taille indiquée, le bord inférieur du calque (tel qu'il
apparaît dans le mode Création dans Dreamweaver) s'étire proportionnellement (le contour inférieur
ne s'étend pas lorsque le calque apparaît dans le navigateur, sauf si la propriété Débordement est
définie sur Visible).
Ø Index Z détermine l'ordre de superposition du calque.
Ø Visib. indique si le calque est visible ou non au chargement de la page :
•
•
•
•
Default : Aucune propriété de visibilité n'est définie par défaut.
Lorsque aucune visibilité n'est précisée, la plupart des navigateurs choisissent Hériter.
Inherit (Hériter) : prend la propriété de visibilité de l'objet parent du calque.
Visible : affiche le contenu du calque, quelle que soit la valeur du parent.
Hidden (Masqué) : dissimule le contenu du calque, quelle que soit la valeur du parent.
Ø Image ar-pl. spécifie une image en arrière-plan du calque.
•
Cliquez sur l'icône du dossier à parcourir et sélectionnez le fichier d'une image.
Ø Couleur d'ar-pl. spécifie une couleur d'arrière-plan pour le calque.
•
Laissez cette option vide pour spécifier un arrière-plan transparent.
Ø Débord. contrôle la manière dont les calques apparaissent dans un navigateur
lorsque le contenu dépasse la taille spécifiée du calque.
•
Visible indique que le contenu supplémentaire apparaîtra dans le calque ; en fait, le calque
s'agrandit proportionnellement. Hidden (masqué) signifie que le contenu supplémentaire ne
sera pas affiché dans le navigateur. Scroll (défilement) indique que le navigateur devra ajouter
des barres de défilement dans le calque, qu'elles soient nécessaires ou non. Auto entraîne
l'affichage des barres de défilement du calque dans le navigateur uniquement lorsque cela est
nécessaire (c'est-à-dire lorsque le contenu du calque dépasse ses limites).
Ø Déc. (déroutage) définit la zone visible du calque.
•
Indiquez les coordonnées Gauche, Haut, Droite et Bas pour définir un rectangle dans le champ des
coordonnées du calque (en partant du coin supérieur gauche du calque). Le calque est « dérouté »
afin que seul le rectangle spécifié soit visible. Par exemple, pour rendre le contenu d'un calque
invisible à l'exception d'un rectangle visible d'une largeur de 50 pixels et d'une hauteur de 75 pixels
dans le coin supérieur gauche du calque, définissez G sur 0, S sur 0, D sur 50 et B sur 75.
AFCI NewSoft
55
Dreamw eaver V. 8
13.4 Convertir des calques en tableaux
Il n'est possible de convertir des calques en tableaux et vice versa que pour la totalité d'une
page.
Créez votre mise en forme à l'aide de calques, puis convertissez les calques en tableaux afin
que votre mise en forme puisse s'afficher dans les navigateurs les moins récents.
Avant de convertir vos calques en tableaux, assurez-vous qu'ils ne se chevauchent pas (voir
chapitre suivant) :
Ø Cliquer le menu Modifier / Convertir / Calques en tableau,
Ø Sélectionner les options souhaitées,
Ø Cliquer sur OK.
13.5 Empêcher le chevauchement des calques
Les cellules d'un tableau ne peuvent pas se chevaucher. Dreamweaver ne peut donc pas
créer de tableau à partir de calques qui se chevauchent. Si vous envisagez de convertir les
calques d'un document en tableaux, activez l'option "Empêcher le chevauchement" pour
restreindre le déplacement et le positionnement des calques et en éviter le chevauchement.
Ø Dans le panneau Calques (menu Fenêtre / Calques), activez l'option Empêcher
le chevauchement.
13.6 Animer un calque
Le langage HTML dynamique, soit DHTML, est une combinaison du langage HTML et d'un langage
de script qui permet de modifier les propriétés de style ou de positionnement d'éléments HTML. Dans
Dreamweaver, les scénarios utilisent le langage HTML dynamique pour modifier les propriétés des
calques et des images dans le temps. Utilisez les scénarios pour créer des animations qui ne
nécessitent pas de contrôles ActiveX, de plug-ins ni d'applets Java (mais requièrent JavaScript).
Remarque : Le terme dynamique a des sens différents selon le contexte Web. Le langage HTML
dynamique n'a rien à voir avec le concept de page Web dynamique, autrement dit, une page Web générée
dynamiquement par du code côté serveur avant d'être affichée pour un visiteur (comme les pages php ou
asp par exemple).
L'animation d'un calque correspond à la création d'un scénario.
Les scénarios permettent de modifier la position, la taille, la visibilité et l'ordre de superposition des
calques. (Les fonctions relatives aux calques des scénarios sont uniquement prises en charge dans la version
4.0 ou ultérieure des navigateurs). Les scénarios permettent également d'exécuter d'autres actions que
vous souhaitez déclencher après le chargement d'une page. Ainsi, les scénarios peuvent modifier le
fichier source d'une balise d'image afin que différentes images apparaissent sur la page dans le
temps.
AFCI NewSoft
56
Dreamw eaver V. 8
13.6.1 Création d'un scénario en faisant glisser un chemin
Si vous désirez créer une animation comportant un chemin complexe, il est souvent plus facile
d'enregistrer celui-ci au fur et à mesure que vous faites glisser le calque, plutôt que de créer des
images-clés individuelles.
Ø Sélectionner le calque à animer,
Ø Placer le calque à l'emplacement auquel il doit se trouver au démarrage de
l'animation,
Assurez-vous que vous avez sélectionné le calque. Si le point d'insertion se trouve dans le
calque, il n'est pas sélectionné. Pour sélectionner un calque, cliquez sur le repère ou sur la
poignée de sélection correspondant ou utilisez le panneau Calques.
Ø Cliquer le menu Modifier / Scénario / Enregistrer le chemin du calque.
Ø Faites glisser le calque dans la page pour créer un chemin, puis relâcher la
souris à l'emplacement où l'animation doit s'arrêter.
Dreamweaver ajoute dans le "Panneau Scénarios" une barre d'animation contenant
le nombre approprié d'images-clés (rond blanc).
Ø Dans le panneau Scénarios, cliquez sur le bouton "Rembobiner"
, puis
maintenez le bouton "Lecture"
enfoncé pour afficher un aperçu de l'animation.
Nombre d'images
par seconde (IPS)
Liste déroulante
de Noms de
scénario.
Canal de
comportements
Tête de lecture
Canal
d'animation
Barre d'animation
Numéros
d'images
Images clés
13.6.2 Modification de scénarios
Une fois les composants de base d'un scénario défini, vous pouvez effectuer diverses
modifications : ajouter ou supprimer des images, modifier le démarrage de l'animation, etc.
•
Pour allonger la durée de l'animation, faites glisser le repère de la dernière image vers la
droite. Toutes les images-clés de l'animation sont déplacées afin de respecter leur position
relative. Pour empêcher le déplacement des autres images-clés, maintenez la touche Ctrl
enfoncée lorsque vous faites glisser le repère de la dernière image.
•
Pour que le calque atteigne une image-clé plus tôt ou plus tard, déplacez le repère de
cette dernière vers la gauche ou la droite sur la barre.
AFCI NewSoft
57
Dreamw eaver V. 8
•
Pour changer l'heure de début d'une animation, sélectionnez une ou plusieurs des
barres qui lui sont associées (appuyez sur Maj (shift) pour sélectionner plusieurs barres
simultanément) et faites glisser la sélection vers la droite ou la gauche.
•
Pour déplacer la totalité du chemin d'une animation, sélectionnez intégralement la
barre, puis faites glisser l'objet sur la page. Dreamweaver adapte la position des imagesclés. Toute modification effectuée lorsqu'une barre entière est sélectionnée a une incidence
sur la totalité des images-clés.
•
Pour ajouter ou supprimer des images dans le scénario, placez la tête de lecture puis
cliquez menu Modifier / Scénario / Ajouter une image (ou Supprimer une image).
•
Pour qu'un scénario soit lu automatiquement à l'ouverture de la page dans un
navigateur, cochez l'option "Lecture auto". L'option "Lecture auto" associe un comportement
Javascript à la page. Ce comportement exécute l'action Lire le scénario au chargement de
la page.
•
Pour qu'un scénario soit lu en boucle indéfiniment, cochez l'option "Boucle". L'option
"Boucle" insère l'action "Go to Timeline Frame" (Atteindre l'image du scénario) dans le
canal de comportements après la dernière image de l'animation. Vous pouvez modifier les
paramètres de ce comportement pour définir le nombre de boucles à l'aide du "Panneau
Comportements" en faisant un double clic sur le comportement.
AFCI NewSoft
58
Dreamw eaver V. 8
14 GESTION DES MODELES
Un modèle est un type spécial de document qui sert à concevoir une mise en page « fixe ».
Il est alors possible de créer des documents basés sur le modèle, qui en héritent la mise en
page. Lors de la conception d'un modèle, vous spécifiez les zones des documents basés sur
ce modèle que les utilisateurs pourront modifier.
14.1 Créer un modèle
Ø Ouvrir le document que vous souhaitez enregistrer comme modèle ou créer
un nouveau document HTML vierge,
Ø Cliquer le menu Fichier / Enregistrer comme modèle…
Sélectionner le site
dans lequel vous
souhaitez enregistrer
le modèle
Taper un nom
unique pour le
modèle
Remarque : Dreamweaver enregistre le fichier de modèle dans le dossier "Templates" du
site, dans le dossier racine local du site, avec l'extension .dwt. Si ce dossier n'existe pas,
Dreamweaver le crée automatiquement au moment de l'enregistrement du nouveau modèle.
Désormais, tous vos modèles doivent être conservés dans le dossier "Templates". Ne
déplacez pas ce dossier de votre dossier racine local, cela pourrait provoquer des erreurs
dans les chemins d'accès des modèles !
14.2 Les régions modifiables d'un modèle
Il est possible de créer des régions modifiables dans un modèle pour définir les zones qui
pourront être modifiées dans les pages basées sur ce modèle.
Vous pouvez marquer un tableau entier ou une cellule de tableau individuelle comme
modifiable, mais vous ne pouvez pas marquer plusieurs cellules d'un tableau comme une
seule et même région modifiable. Si une balise <td> est sélectionnée, la région modifiable
comprend la région située autour de la cellule. Dans le cas contraire, la région modifiable
concerne uniquement le contenu de la cellule.
Les calques et leur contenu sont deux éléments distincts. Rendre un calque modifiable
permet de changer la position du calque et son contenu, alors que rendre le contenu d'un
calque modifiable permet uniquement de modifier le contenu du calque, et non sa position.
AFCI NewSoft
59
Dreamw eaver V. 8
14.2.1 Insérer une région modifiable
Ø Sélectionner le texte ou le contenu que vous souhaitez définir comme région
modifiable ou placer le point d'insertion à l'endroit où vous voulez insérer une
région modifiable,
Ø Dans le Panneau Insertion, onglet Commun, cliquer sur le pointeur noir du
bouton Modèles, puis choisissez "Région modifiable",
Ø Saisir un nom unique pour la région (vous ne pouvez pas utiliser le même
nom pour plusieurs régions modifiables dans un même modèle).
Ne pas saisir de caractères spéciaux !
Ø Cliquez sur OK.
Remarque : Vous pouvez modifier le nom d'une région modifiable, par le
panneau "Inspecteur des propriétés".
14.2.2 Sélectionner une région modifiable
Ø Cliquer sur l'onglet situé dans le coin supérieur gauche de la région modifiable.
14.2.3 Supprimer une région modifiable
Si vous avez marqué une région de votre fichier de modèle comme étant modifiable, vous
pouvez la verrouiller (pour la rendre non modifiable dans les documents basés sur le
modèle).
Ø Cliquer sur l'onglet situé dans le coin supérieur gauche de la région
modifiable pour la sélectionner,
Ø Cliquer le menu Modifier / Modèles / Supprimer le marqueur de modèle,
La région n'est alors plus modifiable.
AFCI NewSoft
60
Dreamw eaver V. 8
14.3 Appliquer un modèle
Ø Créer un nouveau document HTML (CTRL N),
Ø Dans le "Panneau Fichiers", cliquer l'onglet Actifs, :
1 -Cliquer le
bouton "Modèles"
sur le côté
gauche du
panneau
2 - Faire glisser
dans la fenêtre de
document le
modèle à appliquer
14.4 Détacher un modèle d'un document
Pour apporter des modifications aux régions verrouillées d'un document basé sur un modèle,
vous devez au préalable détacher le document du modèle. Lorsqu'un document est détaché,
toutes les régions qui le composent deviennent modifiables.
Ø Ouvrir le document basé sur un modèle que vous souhaitez détacher.
Ø Cliquer le menu Modifier / Modèles / Détacher du modèle.
Le document est détaché du modèle et tout le code du modèle est supprimé.
14.5 Modifier un modèle
Vous pouvez ouvrir un fichier de modèle directement pour le modifier. Lorsque vous
apportez des modifications à un modèle, Dreamweaver vous invite à mettre à jour tous les
documents basés sur ce modèle.
Ø Ouvrir le fichier modèle à modifier (Menu Fichier / Ouvrir, dossier
Templates),
Ø Apporter toutes les modifications souhaitées,
Ø Enregistrer le modèle.
Un message s'affiche, vous invitant à mettre à jour les pages basées sur le modèle.
Ø Cliquez sur "Mettre à jour" pour mettre à jour tous les documents basés sur le
modèle modifié ; cliquez sur "Ne pas mettre à jour" si vous ne souhaitez pas
mettre à jour les documents basés sur le modèle modifié.
Dreamweaver affiche un journal indiquant les fichiers mis à jour.
AFCI NewSoft
61
Dreamw eaver V. 8
15 LES COMPORTEMENTS
Les comportements insèrent du code JavaScript dans les documents pour permettre aux
visiteurs d'une page Web d'effectuer certaines tâches. Un comportement est la combinaison
d'un événement et d'une action déclenchée par cet événement. Dans le panneau
Comportements, vous pouvez ajouter un comportement à une page en spécifiant une action,
puis l'événement qui déclenche cette action.
Remarque : Le code de comportement est un code JavaScript côté client, c'est-à-dire qu'il
s'exécute sur des navigateurs, mais pas sur des serveurs.
15.1 Ouvrir un lien dans une fenêtre (Pop-up)
Ø Sélectionner la source du lien (image ou texte),
Ø Afficher la fenêtre des Comportements (Menu Fenêtre),
Cliquer sur le bouton +, puis
sélectionner le comportement
"Ouvrir la fenêtre navigateur
Ø Dans la boite de dialogue :
- Cliquer sur le bouton Parcourir… pour définir le fichier à afficher (document
html ou fichier image)
- Définir largeur et hauteur de fenêtre (en pixels)
- Cocher les attributs de la fenêtre selon votre choix
- Nommer la fenêtre et cliquer sur OK pour valider.
Ø
Dans le Panneau de comportement,
Vérifier que l'événement par défaut est bien
l'événement souhaité
Si ce n'est pas le cas, sélectionner-en un
autre dans le menu déroulant (ex : "onClick")
Si les événements désirés ne sont pas
répertoriés, changez de navigateur cible dans le
menu déroulant en cliquant sur "Afficher les
événements pour".
AFCI NewSoft
62
Dreamw eaver V. 8
Ø Sur la sélection de la source du Comportement :
saisir un # dans la zone "Lien" de l'Inspecteur des Propriétés
pour obtenir un pointeur de souris "main" dans le navigateur !
Attention : Plusieurs outils existent pour empêcher l'ouverture des fenêtres pop-up (des barres
d'outils comme la Google Toolbar, des navigateurs comme Mozilla/Firefox ou des logiciels
spécifiques).
15.2 Afficher texte dans barre d’état
L'action "Définir le texte de la barre d'état" affiche un message dans la barre d'état, dans la partie
inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser cette action pour
décrire la destination d'un lien dans la barre d'état, au lieu d'afficher l'URL associée. Cependant, il
arrive fréquemment que les utilisateurs ne tiennent pas compte des messages de la barre d'état
(certains navigateurs ne prennent pas en charge la définition du texte de la barre d'état). Si votre
message est important, pensez à l'afficher sous la forme d'un message contextuel ou comme texte
d'un calque.
Ø Sélectionner la source du Comportement (texte ou image),
Ø Dans le Panneau Comportements cliquer sur bouton + et choisir "Texte" /
"Définir le texte de la barre d’état"
Ø Saisir le message à afficher puis cliquez sur OK
Ø Dans le Panneau de comportement,
Vérifier que l'événement par défaut est bien l'événement souhaité
Si ce n'est pas le cas, sélectionner-en un autre dans le menu déroulant.
Si les événements désirés ne sont pas répertoriés, changez de navigateur cible dans
le menu déroulant en cliquant sur "Afficher les événements pour".
Remarque : Pour masquer le texte de barre d'état, faire un deuxième comportement
sans message sur l'événement "onMouseOut" !
AFCI NewSoft
63
Dreamw eaver V. 8
15.3 Message contextuel
Cette action fait apparaître un message d'alerte "JavaScript", avec le texte que vous avez spécifié.
Comme les alertes "JavaScript" ne disposent que d'un seul bouton (OK), utilisez cette action pour
informer l'utilisateur plutôt que pour lui proposer un choix.
Ø Sélectionner la source du Comportement (texte ou image),
Ø Dans le Panneau Comportements cliquer sur bouton + et choisir "Message
contextuel"
Ø Saisir le message puis cliquez sur OK.
Ø Sélectionner l’évènement souhaité.
15.4 Afficher-masquer les calques
L'action "Afficher-masquer les calques" affiche, masque ou rétablit la visibilité par défaut d'un ou
plusieurs calques. Cette action permet d'afficher des informations en fonction des interactions de
l'utilisateur dans la page.
Par exemple, lorsque le curseur passe sur l'image d'une plante, vous pouvez afficher un calque
comportant des détails sur le climat idéal de la plante, l'ensoleillement dont elle a besoin, sa taille
adulte, etc.
L'action "Afficher-masquer les calques" sert également à créer un calque de préchargement, c'est-àdire un grand calque qui cachera d'abord le contenu de la page, puis disparaîtra à la fin du
chargement de tous les éléments de la page.
Ø Dessiner le ou les calques à afficher dans la fenêtre de document,
Ø Nommer chacun des calques,
Ø Dans le Panneau calques, masquer les calques
Pour masquer un calque :
- Cliquer dans la 1ère colonne (œil)
de manière à y afficher un "œil
fermé"
AFCI NewSoft
64
Dreamw eaver V. 8
Ø Sélectionner la source pour le comportement (texte ou bouton),
Ø Dans le Panneau de Comportements, cliquer sur le bouton plus + et choisir
"Afficher-Masquer les calques",
Ø Sélectionner le calque, dont la visibilité doit être modifiée, dans la liste
"Calques nommés" :
Ø Cliquer sur le bouton "Afficher" pour afficher le calque ou "Masquer" pour le
masquer, ou Par Défaut pour rétablir la visibilité par défaut du calque.
Ø Répéter les étapes pour tous les autres calques dont vous voulez modifier la
visibilité
Ø Cliquez sur OK.
Ø Vérifier que l'événement par défaut est bien l'événement souhaité.
exemple : "OnMouseOver" pour Afficher et "OnMouseOut" pour Masquer.
16 INSERER UN ELEMENT FLASH
16.1 Insérer une animation Flash (fichier SWF)
Vous pouvez utiliser Dreamweaver pour insérer des animations Flash dans vos pages.
Ø Dans la fenêtre de document (mode Création), placer le curseur à l'endroit où
vous souhaitez insérer le contenu,
Ø Cliquer le menu Insertion / Médias / Flash.
Ø Dans la boîte de dialogue, sélectionner un fichier d'animation Flash (.swf).
Un espace réservé Flash s'affiche dans la fenêtre de document (contrairement aux
objets de texte et de bouton Flash). Afficher l'aperçu du contenu Flash dans la fenêtre
de document
Ø Dans cette fenêtre, cliquer sur l'espace réservé de l'animation "Flash" afin de
sélectionner le contenu Flash à pré visualiser.
Ø Dans "l'inspecteur Propriétés", cliquer sur le bouton "Lecture". Cliquer sur le
bouton "Arrêt" pour stopper la prévisualisation. Vous pouvez également pré
visualiser le contenu Flash dans un navigateur en appuyant sur la touche F12.
AFCI NewSoft
65
Dreamw eaver V. 8
16.2 Insérer un bouton « Flash »
Vous pouvez créer, insérer et modifier des boutons Flash dans vos documents tout en
travaillant sous Dreamweaver ; il n'est pas nécessaire de disposer du logiciel Macromedia
Flash. L'objet de bouton Flash est un bouton pouvant être mis à jour. Il est basé sur un
modèle Flash. Vous pouvez personnaliser un objet de bouton Flash en ajoutant du texte,
une couleur d'arrière-plan et des liens vers d'autres fichiers.
Ø Placer le curseur,
Ø Menu Insertion / Médias / Bouton Flash
1.
Sélectionner un style de bouton
(Tester sur la zone échantillon),
2.
Saisir légende pour le bouton,
3.
Sélectionner une police et une
taille (à définir avec la légende la
plus longue !!),
4.
Cliquer sur Parcourir… pour créer
le lien (URL ou Page web à
atteindre ou autre),
5.
Définir la cible, si nécessaire,
6.
Sélectionner une couleur d'arrière
plan pour l'image du bouton
(couleur identique à celle de la
page !!)
7.
Nommer le bouton dans la zone
Enregistrer sous.
Remarque : Un fichier Flash (SWF) est crée dans le même dossier que la page web. Ce
bouton pourra être inséré dans d'autres pages. (Voir chapitre précédent).
16.3 Insérer un texte « Flash »
L'objet de texte Flash permet de créer et d'insérer un fichier SWF Flash contenant
uniquement du texte. Vous pouvez ainsi créer une petite animation graphique vectorielle
avec les polices et le texte de votre choix.
Ø Placer le curseur,
Ø Menu Insertion / Médias / Texte Flash
Ø Renseigner la boite de dialogue :
AFCI NewSoft
66
Dreamw eaver V. 8
17 AJOUTER UN SON A UNE PAGE
Il est possible d'ajouter du son à une page Web. Il existe de nombreux types de fichiers et de
formats audio, par exemple, les fichiers .wav, .midi et .mp3. Certains facteurs sont à
considérer avant de décider d'un format et d'une méthode d'ajout de son : son objectif, son
public, la taille du fichier, la qualité du son et les différences entre les navigateurs.
Remarque : Le traitement des fichiers est très différent et incohérent suivant les navigateurs.
Vous pouvez ajouter un fichier audio à un fichier SWF Flash, puis incorporer le fichier SWF pour
assurer une meilleure cohérence.
A propos des formats de fichiers audio
La liste ci-dessous décrit les formats de fichiers audio les plus courants et présente certains
avantages et inconvénients de chaque conception Web.
Le format .midi ou .mid (Musical Instrument Digital Interface) est destiné à la musique
instrumentale. Les fichiers MIDI sont reconnus par plusieurs navigateurs et ne requièrent pas de plugin. Bien que leur qualité sonore soit très bonne, elle peut varier en fonction de la carte son du visiteur.
Un petit fichier MIDI peut offrir un clip audio de longue durée. Les fichiers MIDI ne peuvent pas être
enregistrés et doivent être synthétisés sur un ordinateur équipé d'un matériel et d'un logiciel spéciaux.
Le format .wav (Waveform Extension) qui offre une bonne qualité sonore, est pris en charge par
plusieurs navigateurs et ne requiert pas de plug-in. Vous pouvez enregistrer vos propres fichiers WAV
à partir d'un CD, d'une cassette, d'un microphone, etc. Toutefois, la taille importante des fichiers limite
sérieusement la longueur des clips audio que vous pouvez utiliser dans vos pages Web.
Le format .aif (Audio Interchange File Format ou AIFF), tout comme le format WAV, offre une
bonne qualité sonore, est pris en charge par plusieurs navigateurs et ne requiert pas de plug-in. Vous
pouvez également enregistrer des fichiers AIFF à partir d'un CD, d'une cassette, d'un microphone, etc.
Toutefois, la taille importante des fichiers limite sérieusement la longueur des clips audio que vous
pouvez utiliser dans vos pages Web.
Le format .mp3 (Motion Picture Experts Group Audio, ou MPEG-Audio Layer-3) est un format
compressé qui diminue de manière significative la taille des fichiers audio. La qualité sonore est
excellente : si un fichier MP3 est correctement enregistré et compressé, sa qualité peut être
équivalente à celle d'un CD. La technologie MP3 permet de lire le fichier « en transit » afin que les
visiteurs n'aient pas à attendre le téléchargement du fichier entier avant de pouvoir l'écouter. Mais le
fichier est plus gros qu'un fichier Real Audio, ce qui signifie que le téléchargement d'une chanson
entière peut s'avérer assez long si l'on utilise une connexion à Internet par modem. Pour lire des
fichiers MP3, les visiteurs doivent télécharger et installer une application d'aide ou un plug-in tel que
QuickTime, Windows Media Player ou RealPlayer.
Le format .ra, .ram, .rpm ou Real Audio offre un degré très élevé de compression avec une taille de
fichier inférieure à celle du format MP3. Le téléchargement de fichiers de chanson peut être effectué
dans un laps de temps raisonnable. Les fichiers pouvant être « diffusés » à partir d'un serveur Web
normal, les visiteurs peuvent commencer à écouter le son avant la fin du téléchargement. Les visiteurs
doivent télécharger et installer l'application d'aide ou le plug-in RealPlayer afin de lire ces fichiers.
.qt, .qtm, .mov ou QuickTime est un format à la fois audio et vidéo mis au point par Apple Computer.
QuickTime est inclus dans le système d'exploitation des ordinateurs Apple Macintosh. Il est utilisé par
la plupart des applications Macintosh utilisant l'audio, la vidéo ou des animations. Les PC aussi
peuvent lancer les fichiers au format QuickTime, mais cela nécessite le pilote approprié. QuickTime
prend en charge la plupart des formats de codage, notamment Cinepak, JPEG et MPEG.
AFCI NewSoft
67
Dreamw eaver V. 8
17.1 Incorporer un fichier audio
L'opération consistant à incorporer un son intègre le fichier audio directement dans la page,
mais le son est uniquement lu si les visiteurs du site disposent du plug-in approprié pour le
fichier audio choisi. Incorporez des fichiers si vous souhaitez utiliser le son en tant que
musique de fond ou pour contrôler le volume, l'apparence du lecteur sur votre page ou
encore les points de démarrage et d'arrêt du fichier audio.
Conseil : Lorsque vous incorporez des fichiers sons à vos pages Web, réfléchissez bien à
l'usage qu'il est possible d'en faire et de quelle façon les visiteurs pourraient s'en servir.
Proposez toujours une commande permettant d'activer ou de couper le son, au cas où
certains visiteurs ne souhaiteraient pas entendre le contenu audio.
Ø En mode Création, placer le curseur à l'endroit où vous souhaitez incorporer le
fichier,
Ø Sélectionner Insertion > Médias > Plug-in,
Ø Sélectionner le fichier audio à incorporer,
Ø Dans l'inspecteur des Propriétés, entrer la largeur et la hauteur du plug-in en
saisissant les valeurs dans les zones de texte appropriées,
Ces valeurs déterminent la taille à laquelle les contrôles audio sont affichés dans le
navigateur.
17.2 Créer un lien vers un fichier audio
Ø Sélectionner le texte ou l'image à utiliser comme lien vers le fichier audio,
Ø Dans l'inspecteur Propriétés, cliquer sur l'icône de dossier pour rechercher le
fichier audio, dans la zone "Lien".
AFCI NewSoft
68
Dreamw eaver V. 8
18 CREER UN FORMULAIRE HTML
Les formulaires vous permettent d'obtenir des informations de la part des visiteurs de votre
site Web. Ces visiteurs saisissent les informations à l'aide d'objets de formulaires tels que
des champs de texte, des zones de liste, des cases à cocher et des boutons radio, puis ils
cliquent sur un bouton afin de les envoyer vers votre adresse email.
18.1 Insérer un formulaire
Ø Dans le panneau Insertion, cliquer l'onglet "Formulaires" :
Cliquer l'outil
"Formulaire"
Dreamweaver insère un formulaire vierge dans la page. En mode Création, les formulaires sont
indiqués par une bordure rouge en pointillé. Si vous ne voyez pas la bordure, vérifiez que l'option
"Eléments invisibles" soit sélectionnée dans le menu "Affichage / Assistances visuelles".
Exemple de formulaire :
18.2 Insérer un champ liste/menu (select)
Dans notre exemple : Insérer une liste de "civilités"
Ø Placer le curseur dans la cellule du tableau correspondante,
Ø Dans le panneau Insertion, onglet "Formulaires", cliquer l'outil
"Liste/Menu"
Ø Dans l'Inspecteur des propriétés, Nommer ce champ "civilite"
Remarque : Saisir les noms de champs de formulaires sans accent espace, ou autres
caractères !!
AFCI NewSoft
69
Dreamw eaver V. 8
Ø Cliquer sur le bouton Valeurs de la liste (pour définir les éléments de cette liste ) :
Colonne "Etiquette"
Affiche les valeurs
dans la liste.
Colonne "Valeur" :
Affiche les valeurs
dans l'email.
Cliquer sur le bouton + après chaque entrée dans la liste
18.3 Insérer un champ de texte (textfield)
Dans notre exemple : Insérer 3 "champs de Texte" pour saisir Nom Prénom / Ville / Email
Ø Placer le curseur dans la cellule du tableau correspondante,
Ø Dans le panneau Insertion, onglet "Formulaires", cliquer l'outil
de texte" autant de fois que nécessaire,
"Champ
Ø Dans l'Inspecteur des propriétés, Nommer le 1er champ "nomprenom", le
2ème "ville", le 3 ème "email",
Ø Vous pouvez définir une largeur au champ de texte, si besoin,
18.4 Insérer des boutons radio (radiobutton)
Dans notre exemple : Insérer 2 "boutons radio" pour Oui ou Non
Ø Placer le curseur dans la cellule du tableau correspondante,
Ø Dans le panneau Insertion, onglet "Formulaires", cliquer l'outil
radio" autant de fois que nécessaire,
"Bouton
Ø Dans l'Inspecteur des propriétés, Nommer chaque bouton radio
"newsletter", (même nom pour deux boutons, car 1 seul choix possible)
AFCI NewSoft
70
Dreamw eaver V. 8
L'état initial Activé est coché uniquement pour le bouton de valeur "Oui"
Ø Saisir la valeur qui sera postée dans l'email (exemple : "Oui" pour le 1 er bouton
radio et "non" pour le 2 ème).
18.5 Insérer des cases à cocher (checkbox)
Dans notre exemple : Insérer 3 "cases à cocher" pour Auto ; Moto ; Bateaux
Ø Placer le curseur dans la cellule du tableau correspondante,
Ø Dans le panneau Insertion, onglet "Formulaires", cliquer l'outil
cocher" autant de fois que nécessaire,
"Case à
Ø Dans l'Inspecteur des propriétés, Nommer la 1ère case à cocher "auto", la
2ème "moto", la 3 ème "bateaux" (noms différents, car plusieurs choix possible)
Ø Saisir la valeur qui sera postée dans l'email (exemple : "automobile" pour la
1ère case à cocher, "moto" pour la 2 ème et "bateaux" pour la 3 ème.
18.6 Insérer un champ de zone de texte (textarea)
Dans notre exemple : Insérer un champ de "zone de texte" pour le message
Ø Placer le curseur dans la cellule du tableau correspondante,
Ø Dans le panneau Insertion, onglet "Formulaires", cliquer l'outil
texte",
"Zone de
Ø Dans l'Inspecteur des propriétés, Nommer le champ "message"
Ø Définir une largeur de caractères pour le champ (35), et un nombre de lignes
(5)
AFCI NewSoft
71
Dreamw eaver V. 8
18.7 Insérer des boutons de commande (submit)
Dans notre exemple : Insérer 2 boutons de commande pour Envoyer le formulaire et pour
Rétablir le formulaire.
Ø Placer le curseur dans la cellule du tableau correspondante,
Ø Dans le panneau Insertion, onglet "Formulaires", cliquer l'outil
"Bouton",
Ø Dans l'Inspecteur des propriétés, Nommer le bouton "envoiform"
Ø Saisir l'étiquette du bouton dans la zone Valeur
Ø L'action du bouton sera "Envoyer le formulaire"
Propriétés du 2 ème bouton :
18.8 Paramétrage du formulaire
Plusieurs possibilités s'offre à vous pour envoyer les données d'un formulaire vers une
adresse email tel qu'un script CGI (Common Gateway Interface : échange entre une page html et un
programme tournant côté serveur) selon indications de l'hébergeur, la commande "mailto:" ou
encore la fonction "php mail( )".
Pour définir les propriétés d'un formulaire :
Ø Cliquer sur la balise <form> dans le "Sélecteur de balises" pour sélectionner
le formulaire,
Ø Définir les différentes options dans l'Inspecteur de Propriétés :
AFCI NewSoft
72
Dreamw eaver V. 8
Descriptif du panneau "Inspecteur des propriétés" :
Dans la zone de texte Action, indiquez le chemin d'accès en cliquant sur l'icône de dossier pour sélectionner le
fichier à atteindre ou saisir le script approprié.
Dans le menu déroulant Méthode, choisissez la méthode à utiliser pour transmettre les données du formulaire au
serveur.
POST permet d'incorporer les données du formulaire dans la requête HTTP.
GET permet d'annexer la valeur à l'URL demandant la page.
Par défaut permet de se baser sur le paramétrage par défaut du navigateur pour envoyer les données du
formulaire au serveur. En général, la méthode par défaut est GET.
N'utilisez pas la méthode GET pour envoyer des formulaires longs. Les URL sont limitées à
8 192 caractères. Si la quantité de données envoyées est trop importante, celles-ci seront tronquées,
ce qui peut produire des résultats inattendus ou un échec du traitement.
Si vous rassemblez des noms d'utilisateur et des mots de passe, des numéros de cartes de crédit ou
d'autres informations confidentielles, la méthode POST peut sembler plus sûre que la méthode GET.
Toutefois, les informations envoyées par la méthode POST ne sont pas codées. Par conséquent, les
pirates peuvent les récupérer facilement. Pour garantir leur sécurité, utilisez une connexion sécurisée
à un serveur sécurisé.
Si vous le souhaitez, utilisez le menu déroulant Enctype pour définir le type de codage MIME des données
envoyées au serveur pour traitement.
Le paramètre par défaut application/x-www-form-urlencode est généralement utilisé en
conjonction avec la méthode POST. Si vous créez un champ de téléchargement de fichier, spécifiez le
type de codage MIME multipart/form-data.
Si vous le souhaitez, utilisez le menu déroulant Cible pour spécifier la fenêtre dans laquelle les données
renvoyées par le programme appelé s'affichent.
Si la fenêtre indiquée n'est pas encore ouverte, une nouvelle fenêtre du même nom apparaît. Les
valeurs cible sont les suivantes :
_blank ouvre le document de destination dans une nouvelle fenêtre sans nom.
_parent ouvre le document de destination dans la fenêtre parente de celle affichant le document actif.
_self ouvre le document de destination dans la même fenêtre que celle dans laquelle le formulaire a
été envoyé.
_top ouvre le document de destination au sein de la fenêtre en cours. Cette valeur permet de
s'assurer que le document de destination occupe la fenêtre entière, même si le document d'origine
était affiché dans un cadre.
Exemple de paramétrage selon script CGI de l'hébergeur OVH :
Action du formulaire :
Ø Dans l'inspecteur des propriétés, saisir l'action suivante :
http://www.ovh.net/cgi-bin/reponse.nl
AFCI NewSoft
73
Dreamw eaver V. 8
Les balises invisibles :
A l'intérieur de la zone de formulaire (pointillés rouges), insérer autant de champs masqués
que nécessaires au bon fonctionnement du formulaire (selon indications de l'hébergeur) :
Ø Placer le curseur dans la zone de formulaire,
Ø Dans le panneau Insertion, onglet Formulaires, cliquer sur le bouton "champ
masqué"
pour définir l'objet de l'email,
Ø Dans l'inspecteur des propriétés, nommer le champ (subject) et saisir sa
valeur (objet de l'e-mail) :
Les autres "champs masqués" à insérer :
Nommez
Valeur (précisez ici…)
Explications
email_master1
[email protected]
Adresse e-mail où sera envoyé le formulaire.
url
http://www.i-formasoft.net/~login/form2.html
Redirection après envoi du formulaire
url_temps
2
Délai de redirection (en secondes)
cava2
L'email a été envoyé !
Message après envoi
back1color
000000
Couleur d'arrière plan de la page après envoi
back1text
FFFFFF
Couleur de texte du message après envoi
font
verdana
Police du texte du message après envoi.
Remarque :
Créer un 2ème document (ex : form2.html), pour redirection après envoi (champ masqué "url").
Tester le formulaire après avoir transféré les pages sur le serveur distant de votre hébergeur !
AFCI NewSoft
74
Dreamw eaver V. 8
19 INSERER UN CADRE FLOTTANT (ou <iframe> )
L'utilisation de balises HTML <iframe> </iframe> permet d'afficher plusieurs documents
dans une seule et même fenêtre de navigateur. L'imbrication de ces différents documents
permet une navigation aisée et conviviale.
Exemple : La page ci-dessous est découpée en 3 zones !
Partie supérieure :
Contenant un
bandeau avec logo
et 4 images animées
(gifs).
Partie Navigation :
Contenant les 4
boutons pour
naviguer d'une
rubrique à l'autre.
Partie centrale :
Contenant la page
html de rubrique
"plantes.html"
appelée par une
iframe !
Pour réaliser cette page :
Ici, un 1er tableau de
centrage de 100% de
largeur et 100% de
hauteur.
Puis à l'intérieur un 2 ème
tableau afin de positionner
chaque élément de la page :
(2 colonnes ; 2 lignes ; L :
800 pixels).
Remarque : La cible de
chacun des liens (boutons)
devra correspondre avec le
nom de l'iframe !
Ici le bandeau
Ici la
navigation
Ici la balise <iframe>…</iframe>
(voir chapitre suivant)
Ici, la balise <iframe> pour appeler la page "plantes.html" :
- Afficher la page en mode "Fractionner", placer le curseur dans la cellule correspondante, puis dans le
code de la page saisir la balise et définir ses attributs :
<iframe src="plantes.html" name="zone1" width="650" height="450"
marginwidth="0" marginheight="0" align="right" scrolling="auto"
frameborder="0">
</iframe>
<noframe>Pour afficher les frames, merci de faire la mise à jour de
votre navigateur</noframe>
AFCI NewSoft
75
Dreamw eaver V. 8
Les différents attributs de la balise <iframe> </iframe> :
src Spécifie l'emplacement du fichier à afficher dans le frame
Exemple : src="page1.htm"
name Affecte un nom au frame permettant le référencement par des liens avec <target> (cible)
Exemple : name ="zone1"
width Définit la largeur du frame en pixel ou en pourcentage
Exemple width="400"
height Définit la hauteur du frame en pixel ou en pourcentage
Exemple height="400"
marginwidth Spécifie les pixels qui séparent les bords latéraux du contenu du frame
Exemple : marginwidth=2
marginheight Spécifie les pixels qui séparent les bords supérieurs et inférieurs du contenu du frame
Exemple : marginheight=3
align Définit l'alignement du frame par rapport au texte environnant.
valeur: left Déroulement du texte côté gauche du frame
valeur: right Déroulement du texte côté droit du frame
valeur: middle Positionne le iframe au centre
valeur: bottom Positionne le iframe en bas
valeur: top Positionne le iframe en haut
Exemple : align="right"
scrolling Indique au navigateur si les barres de défilement, apparaissent dans le frame.
Valeur: yes Les barres de défilement apparaissent, quelque soit la taille du contenu
Valeur: no Les barres de défilement n'apparaissent pas, quelque soit la taille du contenu
Valeur: auto Les barres de défilement apparaissent automatiquement quand le contenu n'entre pas
entièrement dans le frame.
Exemple : scrolling="auto"
frameborder Spécifie les bordures des frames (yes/no ou 1/0)
Exemple : frameborder="yes" ou frameborder="1"
hspace Conjointement à <align>, spécifie, en pixels, l'espace à ménager à droite et à gauche du
frame.
Exemple : hspace="2"
vspace Conjointement à <align>, spécifie, en pixels, l'espace à ménager au dessus du frame flottant.
Exemple : vspace="2"
AFCI NewSoft
76
Dreamw eaver V. 8
20 LES LIENS
20.1 Lien vers une page du site
Ø Dans la page, sélectionner la source du lien (bouton (image) ou texte)
Ø Dans l'inspecteur de Propriétés, cliquer sur le bouton « Rechercher le
fichiers » (dossier jaune) à côté de la zone de texte lien,
Ø Sélectionner la page html de destination.
20.2 Définir la cible des liens
Ø Après avoir créer le lien, si nécessaire, dans l'inspecteur des propriétés,
sélectionner une cible ou saisir le nom d'un cadre (iframe)
_blank charge le fichier lié dans une nouvelle fenêtre,
_parent charge le fichier lié dans la fenêtre parente du cadre (frame) contenant le lien. Si le
cadre (frame) contenant le lien n'est pas imbriqué, le document lié sera chargé dans la fenêtre
de base du navigateur.
_self charge le fichier lié dans le même cadre (frame), ou dans la même fenêtre, que le lien.
Cette cible étant celle par défaut, vous n'avez généralement pas à la spécifie r.
_top charge le fichier lié dans la fenêtre de base du navigateur, supprimant ainsi tous les
cadres.
ou saisir le nom d'un cadre flotttant (iframe) dans lequel doit s'afficher la page
Exemple : zone1.
20.3 Lien de messagerie électronique
Ø Dans la page, sélectionner la source du lien (bouton (image) ou texte)
Ø Dans l'inspecteur de Propriétés, saisir sans espace mailto: suivi de
l’adresse email de destination :
Remarque : L'activation de ce lien lance Outlook ou autre logiciel de messagerie
électronique !
AFCI NewSoft
77
Dreamw eaver V. 8
20.4 Lien sur une zone réactive
Permet de créer un lien sur une partie d'une image (carte).
Ø Sélectionner une image,
Ø Dans l'inspecteur de Propriétés, sélectionner un des 3 Outils de zones
réactives (rectangle, ovale, polygone)
Ø Dessiner la zone réactive sur l’image en faisant un cliquer glisser
Ø Dans l'inspecteur de Propriétés,
- Nommer la zone réactive,
- Créer le lien vers une page du site ou un lien de messagerie électronique ou
autre.
Outils de zone réactive
20.5 Lien externe
Un lien dit "externe" est un lien vers l'URL d'une autre site (ex : http://www.societe.com).
Ø Dans la page, sélectionner la source du lien (bouton (image) ou texte)
Ø Dans l'inspecteur de Propriétés, saisir dans la zone de texte "Lien" l'URL
complète à atteindre
Il est préférable d'ajouter une cible _blank, pour ouvrir le lien dans une
nouvelle fenêtre de navigateur.
20.6 Lien vers un autre emplacement dans la même page
Nommer l'emplacement à atteindre à l'aide d'une balise invisible :
Ø Placer le curseur à l’emplacement à atteindre
Ø Dans le panneau Insertion, onglet "Commun" cliquer l'outil
nommée"
"Ancre
Ø Dans la boite de dialogue, saisir le Nom de l’ancre puis OK
AFCI NewSoft
78
Dreamw eaver V. 8
Créer un lien vers l'ancre nommée :
Ø Dans la page, sélectionner la source du lien (bouton (image) ou texte)
Ø
Dans l'inspecteur de Propriétés, saisir dans la zone de texte "Lien" le signe
dièse (#) suivi du nom de l’ancre (sans espace)
Exemples :
Pour créer un lien vers une ancre nommée "ancre01", saisir : #ancre01
Pour créer un lien vers une ancre nommée "ancre01" dans un autre document du même
dossier, saisir : nomdufichier.html#ancre01
20.7 Lien de téléchargement
Permet de télécharger (du serveur vers un pc) des fichiers, tels que des fichiers sons, des
fichiers texte, des vidéos, des images…
Ø Dans la page, sélectionner la source du lien (bouton (image) ou texte)
Ø Dans l'inspecteur de Propriétés, cliquer sur le bouton « Rechercher le
fichiers » (dossier jaune) à côté de la zone de texte Lien,
Ø Sélectionner le fichier.
AFCI NewSoft
79
Dreamw eaver V. 8
21 TRANSFERT DU SITE VERS SERVEUR DISTANT
Une fois le site conçu sur le disque dur de votre PC, il faut transférer vers le serveur distant
de votre hébergeur l'intégralité de votre réalisation, afin qu'elle devienne accessible à tous
les internautes.
Lors de l'ouverture d'un compte pour hébergement, des informations capitales vous sont
communiquées, à savoir : l'adresse d'hôte (c'est-à-dire l'adresse du serveur distant,
exemple : ftp.i-formasoft.net), un nom d'utilisateur (ou login), un mot de passe (password) et
l'URL de votre site.
Pour effectuer ce transfert, vous devez installer sur votre PC un logiciel spécialisé, souvent
appelé "client FTP". Ce logiciel peut être téléchargé gratuitement (www.telecharger.com ou
autre site).
Ce logiciel vous servira ensuite chaque fois que vous devrez apporter des modifications à
votre site.
Exemple avec le logiciel FTP "Filezilla" :
Ø Ouvrir le logiciel,
Ø Cliquer sur le menu Fichier / Gestionnaire de sites…
Ø Cliquer sur le bouton Nouveau site, puis nommer le site
Ø Dans la partie droite de la fenêtre "Détails du site", saisir l'adresse d'hôte,
choisir "FTP" comme type de serveur, choisir "normal" comme type
d'authentification, saisir votre login (nom utilisateur ftp) et enfin votre mot de
passe,
Ø Cliquer sur le bouton Connexion.
AFCI NewSoft
80
Dreamw eaver V. 8
Fenêtre de connexion au serveur distant :
A gauche les dossiers de votre PC, à droite le serveur distant.
Ø Sélectionner dans la partie de gauche, les fichiers et dossiers à transférer,
Ø Glisser les vers le serveur distant à droite.
Vos pages sont instantanément en ligne !!
Ouvrez votre navigateur, et saisissez votre url !!
AFCI NewSoft
81
Dreamw eaver V. 8
22 REFERENCER SON SITE
22.1 Qu'est-ce que le référencement ?
Le référencement permet la signalisation de l'existence de votre site web auprès des internautes du
monde entier par le biais des moteurs et annuaires de recherche.
On désigne habituellement par le terme « référencement » (en anglais web positionning) l'ensemble
des techniques permettant d'améliorer la visibilité d'un site web :
indexation (en anglais submission) consistant à faire connaître le site auprès des outils de recherche
grâce aux formulaires que ceux-ci proposent ;
positionnement (en anglais positionning) consistant à positionner le site ou certaines pages du site en
première page de résultat pour certains mots-clés ;
classement (en anglais ranking) dont le but est similaire au positionnement mais pour des expressions
plus élaborées ; une partie du travail étant d'identifier ces requêtes.
Pour autant, toute la difficulté de l'exercice ne réside pas tant dans la promotion du site auprès des
moteurs de recherche que dans la structuration du contenu pour être bien positionné dans les
résultats sur des mots-clés préalablement choisis.
En effet une majorité d'internautes utilise les moteurs de recherche afin de trouver de l'information et
interroge à ce titre un moteur de recherche à l'aide de mots clés (en anglais keywords). Il est donc
essentiel avant tout chose de se préoccuper du contenu que l'on propose afin de répondre au mieux
aux attentes des internautes, et d'identifier dans un second temps les mots-clés susceptibles d'être
saisis par ces derniers !
22.2 Améliorer son référencement
Il existe quelques techniques de conception de site permettant de donner plus d'efficacité au
référencement des pages d'un site :
•
•
•
•
•
•
•
un contenu original et attractif,
un titre bien choisi,
une URL adaptée,
un corps de texte lisible par les moteurs,
des balises META décrivant précisément le contenu de la page,
des liens bien pensés,
des attributs ALT pour décrire le contenu des images.
Contenu de la page web
Les moteurs de recherche cherchent avant tout à fournir un service de qualité à leurs utilisateurs en
leur donnant les résultats les plus pertinents en fonction de leur recherche ainsi avant même de
songer à améliorer le référencement il est indispensable de s'attacher à créer un contenu consistant et
original.
Un contenu original ne signifie pas un contenu qui n'est proposé par aucun autre site, cela serait une
mission impossible. En revanche il est possible de traiter un sujet et de lui amener de la plus-value en
approfondissant certains points, en l'organisant d'une manière originale ou en mettant en relation
différentes informations.
D'autre part, toujours dans l'optique de fournir le meilleur contenu aux visiteurs, les moteurs de
recherche accordent de l'importance à la mise à jour des informations. Le fait de mettre à jour les
AFCI NewSoft
82
Dreamw eaver V. 8
pages du site permet donc d'augmenter l'indice accordé par le moteur au site ou en tout cas la
fréquence de passage du robot d'indexation.
Titre de la page
Le titre est l'élément de prédilection pour décrire en peu de mots le contenu de la page, c'est
notamment le premier élément que le visiteur va lire dans la page de résultat du moteur de recherche,
il est donc essentiel de lui accorder une importance particulière. Le titre d'une page web est décrit
dans l'en-tête de la page web entre les balises <TITLE> et </TITLE>.
Le titre doit décrire le plus précisément possible, environ 90 caractères maximum, le contenu de la
page web et sa longueur totale recommandée ne doit pas dépasser la soixantaine de caractères.
Le titre est d'autant plus important qu'il s'agit de l'information qui s'affichera dans les favoris de
l'internaute, ainsi que dans l'historique.
URL de la page
Certains moteurs de recherche accordent une importance capitale aux mots-clés présents dans l'URL,
notamment les mots-clés présents dans le nom de domaine. Il est donc conseillé de mettre un nom de
fichier adapté, contenant un ou deux mots-clés, pour chacun des fichiers du site plutôt que des noms
du genre page1.html, page2.html, etc.
Corps de la page
Afin de valoriser au maximum le contenu de chaque page il est nécessaire que celui-ci soit
transparent (par opposition aux contenus opaques tels que le flash), c'est-à-dire qu'il comporte un
maximum de texte, indexable par les moteurs. Le contenu de la page doit être avant tout un contenu
de qualité adressé aux visiteurs, mais il est possible de l'améliorer en veillant à ce que différents motsclés soient présents.
Les cadres (frames) sont fortement déconseillés car ils empêchent parfois l'indexation du site dans de
bonnes conditions.
Balises META
Les META Tags sont des balises non affichées à insérer en début de document HTML afin de décrire
finement le document. Parmi ces balises les balises keywords et description permettent
respectivement d'ajouter des mots-clés et une description décrivant la page, sans les afficher aux
visiteurs (par exemple des termes au pluriel, voire avec des fautes d'orthographe volontaires). Il est
conseillé d'utiliser le codage HTML pour les caractères accentués et de ne pas dépasser une
vingtaine de mots clés.
Le META robots permet de décrire le comportement du robot vis-à-vis de la page, notamment indiquer
si la page doit être indexée ou non et si le robot est autorisé à suivre les liens.
Etant donné l'usage abusif des métas constaté dans un nombre important de sites web, les moteurs
utilisent de moins en moins ces informations lors de l'indexation des pages.
Liens hypertextes
Afin de donner le maximum de visibilité à chacune de vos pages, il est conseillé d'établir des liens
internes entre vos pages pour permettre au robots indexeurs (appelés crawlers, traduisez chenilles)
de parcourir la totalité de votre arborescence. Ainsi il peut être intéressant de créer une page
présentant l'architecture de votre site et contenant des pointeurs vers chacune de vos pages.
AFCI NewSoft
83
Dreamw eaver V. 8
D'autre part il est important d'avoir des liens externes pointant vers son site web car cela augmente
d'une part le trafic et la visibilité de votre site, d'autre part car certains moteurs de recherches prennent
en compte le nombre et la qualité des liens pointant vers un site pour caractériser son niveau de
pertinence (c'est le cas de Google avec son indice appelé PageRank).
Attributs ALT des images
Les images du site sont opaques pour les moteurs de recherche, c'est-à-dire qu'ils ne sont pas
capables d'en indexer le contenu, il est donc conseillé de mettre un attribut ALT sur chacune des
images, permettant d'en décrire le contenu. La balise ALT est également primordiale pour les nonvoyants, navigant à l'aide de terminaux en braille.
Voici un exemple de balise ALT :
<img src="images/logo_formasoft.gif"
width="140"
height="40"
border="0"
alt="logo formasoft">
Associer un texte à une image présente trois avantages :
•
Cela donne des indications aux internautes ayant désactivé l'affichage des images.
•
Vous enrichissez le contenu de la page qui sera vu par les moteurs de recherche.
•
Certains moteurs, accordent plus d'importance aux mots servant de liens. Si vous utilisez des
images cliquables en guise de liens (des boutons par exemple), celles-ci seront ignorées. Par
contre, le texte associé à une image cliquable sera pris en compte.
Un référencement articulé autour de la page
L'élément de référence pour les moteurs de recherche est la page web, il faut donc penser, lors de la
conception du site web, à structurer les pages en prenant en compte les conseils ci-dessus pour
chacune des pages.
En effet la plupart des webmasters pensent à indexer correctement la page d'accueil de leur site mais
délaissent les autres pages, or ce sont généralement les autres pages qui contiennent le contenu le
plus intéressant. Il est donc impératif de choisir un titre, une URL et des métas (etc.) adaptés pour
chacune des pages du site.
22.3 Référencement annuaire
Comment inscrire son site sur un annuaire ?
Dans la plupart des cas il suffit de choisir la catégorie (ou plusieurs sur certains annuaires) la plus
appropriée à votre site puis de cliquer sur le lien appelé "proposer votre site" ou "suggérer un site" (en
anglais "submit" ou "add"). Un formulaire vous demande alors divers renseignements sur vous et votre
site.
Puis-je inscrire plusieurs pages d'un même site ?
Le rôle d'un annuaire n'est pas de référencer l'intégralité de votre site Web (contrairement à un
moteur), mais uniquement la page d'entrée principale. Il vous faut donc soumettre uniquement à
l'annuaire de recherche l'url de votre site Web.
AFCI NewSoft
84
Dreamw eaver V. 8
22.4 Référencement moteur
Comment inscrire son site sur un moteur ?
Dans la plupart des cas il suffit de cliquer sur le lien appelé "proposer votre site" ou "suggérer un site"
(en anglais "submit" ou "add"). Après votre demande, le robot (spider) du moteur ira visiter votre site
ou plûtot décortiquer vos balises META (d'où l'importance de celles-ci !).
Les délais ?
Le délai est variable selon les annuaires mais comptez entre une et six semaines avant de voir votre
site dans l'annuaire. Quant aux moteurs de recherche, la page dont vous avez soumis l'URL, en
principe la page d'accueil de votre site, sera prise en compte relativement rapidement, généralement
dans les 48 heures. Dans un second temps, le moteur ira analyser et indexer les autres pages de
votre site. Là, il est fréquent que le délai atteigne plusieurs semaines.
Distinction entre Annuaire et Moteur de recherche :
Les annuaires indexent des sites, les moteurs de recherche indexent des pages. Ils prendront en
compte non seulement la page d'accueil de votre site, mais aussi toutes les autres (ou presque
toutes). Leur objectif est de collecter le maximum d'adresses.
Dans un annuaire, ce sont des personnes humaines qui acceptent ou refusent, notent et classent les
sites suggérés.
Les principaux annuaires : yahoo.fr – lycos.fr – voila.fr – nomade.fr - msn.fr
Dans un moteur, votre site sera consulté, analysé et classé par un logiciel. Aucun humain ne va aller
voir votre œuvre. La différence est fondamentale car la notation, et donc le classement de votre site,
ne dépend pas ni de son esthétique, ni de son utilité. Cela aura beaucoup d'incidences pratiques.
Vous avez par exemple réalisé un site entièrement en Flash. Le moteur ne "voit" pas le Flash et
considérera donc votre site comme vide. Autant dire que côté classement, vous n'allez pas atteindre
des sommets !
Un mot aura plus d'importance s'il se trouve dans l'URL de la page ou dans son titre que s'il se
trouve dans le texte. De même un mot servant de lien verra son importance augmenter.
Les principaux moteurs : lycos.fr – hotbot.fr – altavista.fr – google.fr
Puis-je inscrire plusieurs pages d'un même site ?
A priori, un moteur de recherche devrait se contenter d'indexer la page d'accueil du site référencé.
Toutefois et ceci afin d'améliorer votre référencement il est conseillé de déclarer l'ensemble des pages
d'un site Web. Cependant, attention à ne pas dépasser un rythme de dix pages référencées par jour,
car l'outil de recherche peut considérer ceci comme du "spamdexing".
Qu'est-ce qu'un fichier robot.txt ?
Ce fichier permet d'indiquer aux outils de recherche de ne pas indexer certaines parties de votre site.
Il s'agit d'un simple fichier texte.
Dès que le spider d'un moteur arrive sur un site (par exemple, http://www.monsite.com/), il va
rechercher le document présent à l'adresse http://www.monsite.com/robots.txt avant d'effectuer la
moindre "aspiration de document". Si ce fichier existe, il le lit et suit les indications qui y sont inscrites.
S'il ne le trouve pas, il commence son travail de lecture et de sauvegarde de la page HTML qu'il est
venu visiter, considérant qu'a priori rien ne lui est interdit.
AFCI NewSoft
85
Dreamw eaver V. 8
Il ne peut exister qu'un seul fichier robots.txt sur un site, et il doit se trouver à la racine, comme le
montre l'exemple d'adresse ci-dessus. Le nom du fichier (robots.txt) doit toujours être créé en
minuscules. La structure d'un fichier robots.txt est la suivante :
User-agent: *
Disallow: /cgi-bin/
Disallow: /tempo/
Disallow: /perso/
Disallow: /entravaux/
Disallow: /abonnes/prix.html
Dans cet exemple :
•
•
User-agent: * signifie que l'accès est accordé à tous les agents (tous les spiders), quels qu'ils soient.
Le robot n'ira pas explorer les répertoires : /cgi-bin/, /tempo/, /perso/, /entravaux/ du serveur ni le fichier
/abonnes/prix.html.
Le répertoire /tempo/, par exemple, correspond à l'adresse http://www.monsite.com/tempo/. Chaque
répertoire à exclure de l'aspiration du spider doit faire l'objet d'une ligne Disallow: spécifique. La
commande Disallow: permet d'indiquer que "tout ce qui commence par" l'expression indiquée ne doit pas
être indexé.
Ainsi :
Disallow: /perso ne permettra l'indexation ni de http://www.monsite.com/perso/index.html, ni de
http://www.monsite.com/perso.html
Disallow: /perso/ n'indexera pas http://www.monsite.com/perso/index.html, mais ne s'appliquera pas à l'adresse
http://www.monsite.com/perso.html
D'autre part, le fichier "robots.txt" ne doit pas contenir de lignes vierges (blanches).
L'étoile (*) n'est acceptée que dans le champ User-agent.
Elle ne peut servir de joker (ou d'opérateur de troncature) comme dans l'exemple : Disallow: /entravaux/*.
Il n'existe pas de champ correspondant à la permission, de type Allow:.
Enfin, le champ de description (User-agent, Disallow) peut être indifféremment saisi en minuscules ou en
majuscules.
Les lignes qui commencent par un signe dièse (#), ou plus exactement tout ce qui se trouve à droite de ce signe
sur une ligne, est considéré comme étant un commentaire.
Voici quelques commandes et très classiques importantes du fichier "robots.txt" :
Disallow:/
Permet d'exclure toutes les pages du serveur (aucune
aspiration possible).
Disallow:
Permet de n'exclure aucune page du serveur (aucune
contrainte).
Un fichier robots.txt vide ou inexistant aura une
conséquence identique.
User-Agent : fast
Permet d'identifier un robot particulier (ici, celui des moteur
Lycos et Fast/Alltheweb).
User-agent: fast
Disallow:
User-agent: *
Disallow:/
Permet au spider d'Alltheweb et de Lycos (dont l'index est
également fourni par Fast) de tout aspirer, mais refuse les
autres robots.
Qu'est-ce qu'un meta moteur ?
Un meta moteur est un moteur de recherche qui interroge d'autres outils de recherche afin de fournir
un résultat complet.
Référencement manuel ou automatique ?
Vaste question... Il est préférable de réaliser un référencement manuel sur les principaux moteurs de
recherche (Google, Hotbot, Altavista...) et automatique sur les moteurs de recherche moins connus.
AFCI NewSoft
86
Dreamw eaver V. 8
Comment connaître les sites qui font référence au votre ?
Google et Altavista permettent de rechercher dans leur index les sites qui ont mis en place un lien
vers vos pages. Il suffit pour cela de taper dans la zone de recherche du moteur l'instruction :
Ex : link:www.votresite.com
Qu'est ce qu'un spider (ou robot) ?
Spider, robot, agent, crawler ou encore "aspirateur de pages Web" désigne un logiciel qui scrute les
sites web et extrait les pages html (balises meta, mots et phrases) afin de constituer l'index (base de
donnée) du moteur de recherche. C'est vous même qui lui demandait de venir scruter votre site lors
de la soumission de celui-ci sur la page "ajouter votre site" ou en anglais "add your url".
Que signifie le terme "popularité" ?
Comme son nom l'indique, le terme "popularité" est en rapport avec la visibilité de votre site auprès
des visiteurs. Ce critère est pris en compte par de plus en plus de moteurs de recherche, lors de
l'affichage des résultats. Ainsi, plus votre site est visité, plus il apparaîtra dans les premiers résultats
d'une recherche.
Exemple de résultat d'une recherche avec Google :
Analyser le résultat d'une recherche, c'est comprendre comment le moteur traite votre
référencement...
1 - Contenu de la balise <title> + Lien
2 - Résumé du texte contenu dans le corps du document
3 - Résumé, contenu de la balise <meta name="description">
4 - Nom de domaine + Taille
5 - Visualisation de la page stockée en mémoire
6 - Sites similaires (même thématique)
7 - Catégorie du site
Format des mots clés
Minuscules / Majuscules / Accents
Google n'est pas sensible aux majuscules / minuscules.
Ex : html --donne--> html, Html, HTML
Ex : HTML --donne--> html, Html, HTML
Mot saisi avec ou sans accents : Le mot exact est recherché.
Ex : clés --donne--> clés
Ex : cles --donne--> cles
Opérateurs booléens
ET (AND) correspond au signe + (implicite sur Google)
Ex : +html +javascript --donne--> html ET javascript
OU (OR)
Ex : html javascript --donne--> html OU javascript
AFCI NewSoft
87
Dreamw eaver V. 8
SAUF (NOT) correspond au signe Ex : html -javascript --donne--> html SAUF javascript
Recherche d'expression à l'aide de guillemets "..."
Ex : "home page" --donne--> expression home page
Tips Google
! La notion d'indice de popularité est l'élément numéro 1 sur le moteur Google.
! Google ne tient pas compte de la plupart des balises meta.
! La recherche se fait principalement sur le corps du texte.
! La technologie de Google est utilisée par de nombreux annuaires dont Yahoo !..
Conclusion
Le point crucial pour bien apparaître chez Google est l'indice de popularité. Donc si votre site est récent, vous
avez peu de chance dans un premier temps de bien apparaître. Néanmoins cet indice de popularité s'exerce sur
deux niveaux : Le nombre de liens pointant vers votre site et la qualité de ce lien ou plutôt le trafic de celui-ci (plus
il est important, plus vous remonterez dans les classements). Essayez donc de réaliser des échanges de liens
avec des sites dits à "hauts trafics".
22.5 Les Meta Tags
Dans le code de sa page, entre les balises <head> et </head> saisir les lignes suivantes :
Les mots clés :
<meta name="keywords" content="saisir ici les différents mots clés séparés par une
virgule">
La description de la page :
<meta name="Description" content="saisir ici description de votre site">
L'auteur de la page :
<meta name="Author" content="saisir ici vos prénom nom société.">
Meta qui force le robot (moteur de recherches) à revenir dans les X jours afin d'indexer de
nouvelles pages ajoutées au site.
<meta name="Revisit-after" content="30 days">
A lire aussi :
http://www.webrankinfo.com/referencement/index.php
http://www.google.fr/intl/fr/webmasters/
AFCI NewSoft
88
Dreamw eaver V. 8
GLOSSAIRE
HTTP : (HyperText Transfer Protocol).- Protocole utilisé pour transporter des pages HTML
du WWW sur le réseau. L'accès aux services Web se fait en donnant une adresse de type
http://nom de domaine/répertoire....
WWW : (World Wide Web) - A l'origine du développement d'Internet dans le grand public.
Service Internet d'accès aux ressources du réseau à partir de liens hypertexte, des pointeurs
sur lesquels il suffit de cliquer pour se connecter en toute simplicité sur d'autres serveurs ou
pour accéder à une information spécifique.
FTP : (File Transfer Protocol).- Protocole Internet par lequel on peut envoyer (upload) ou
recevoir (download) des fichiers.
URL : (Uniform Resource Locator).- Adresse Internet exploitée par les navigateurs (Internet
Explorer ou Navigator, par exemple). C'est l'adressage standard de n'importe quel
document, sur n'importe quel ordinateur en local ou sur Internet.
Structure de base d'une URL : protocole://serveur/répertoire/document.extension
Ex : http://www.yahoo.fr
CSS : (Cascading Styles Sheets) - Feuilles de style en cascade - Norme avancée du HTML
4.0, qui permet une meilleure gestion de la mise en forme des documents HTML en
définissant des classes de formats.
Download : (télécharger) - Récupération de données sur un disque dur local (programmes,
données informatiques, etc..) situées sur un serveur distant.
Upload : Transfert de données d'un disque dur local vers un serveur distant.
HTML : (Hypertexte Markup Language) - Langage de balisage servant à la publication de
pages web sur Internet.
XHTML : (eXtensible Hyper Text Markup Language) - Langage de balisage hypertexte
extensible.
AFCI NewSoft
89