LES BASES DE DREAMWEAVER

Tous droits réservés © - Roxane Formations – http://www.roxaneformation.fr

Roxane Formations

http://www.roxaneformation.fr

[email protected]

DREAMWEAVER- VERSIONS CS

LES FONDAMENTAUX

http://www.roxaneformation.fr/

mailto:[email protected]

SOMMAIRE

L’interface de travail – Page 3

Ouvrir et Créer son site web – 1

Pages Web – Page 31

Intégrer du texte – Page 36

Intégrer des feuilles de style – Page 63

Intégrer des images – Page 76

Intégrer des liens – Page 87

Intégrer des tableaux – Page 102

Intégrer des formulaires – Page 116

Intégrer des objets – Page 133

Créer des boîtes DIV – Page 160

Code HTML – Page 176

Mise en ligne du site – Page 186

Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr

• Interface de travail


Interface de travail• Introduction générale

– Page d’accueil, différentes possibilités

– Création de pages dans différents langages :HTML, PHP, CSS, XML etc.

– Ouvrir un document déjà crée

– Accès à des tutoriels

– Accès à des plugins : Dreamweaver Exchange

– Nécessité de créer un nouveau site pour démarrer • Fichier => Nouveau


Interface de travail

• L’écran principal Mode classique

Mode Codeur

Mode Designer

Mode double Affichage

Pour réduire ou agrandir le dock, pointez l’un des bords gauches des panneaux : le pointeur de la souris prend la forme d’une double flèche. Cliquez et faites glisser dans le sens souhaité

Affichage -Barres d’outils -Documents (barre d’outils Documents)

Affichage -Barres d’outils - Standard (barre d’outils Standard)



• La barre d’état– Taille de la fenêtre => pour modifier la taille de la fenêtre:

Cliquez sur la zone correspondante pour faire apparaître le menu déroulant

Edition(PC)/ Dreamweaver(Mac) – Préférences – catégorie Barre d’état

– Taille du document et temps de chargement

Pour paramétrer la vitesse de connexion, utilisez le menu Edition(PC)/ Dreamweaver(Mac) - Préférences – catégorie Barre d’état

Dans le menu déroulant Vitesse de connexion, choisissez une vitesse exprimée en kilobits par seconde



• Utiliser les règles – Afficher /masquer les règles : Affichage – Règles – Afficher

– Choix de l’unité : Affichage – Règles – Pixels, Pouces ou Centimètres

– Pour modifier l’origine de la règle, faites un cliqué-glissé depuis l’intersection des deux règles

– Pour retrouver la position par défaut de l’origine: Affichage – Règles – Rétablir origine



• Utiliser la grille – Afficher /masquer la grille :

Affichage – Grille – Afficher la Grille

– Pour « attirer» les objets sur la grille lors de leur positionnement : Affichage – Grille – Aligner sur la grille

– Pour paramétrer la grille : Affichage – Grille – Paramètres de la grille



• Utiliser les repères – Pour placer un repère horizontal ou vertical, effectuez un cliqué-

glissé à partir de la règle correspondante vers la page

– Pour afficher la position d’un repère, activez l’outil Sélectionner dans la barre d’état et placez le pointeur sur le repère

– Pour afficher les distances, activez l’outil Sélectionner, maintenez la touche Ctrl (PC) ou Commande (Mac) enfoncée et placez le pointeur sur la zone voulue

– Pour gérer les repères, utilisez la commande Affichage -Repères



• Modifier le zoom– Pour afficher le code source, cliquez sur le bouton Création de la

barre d’outils Document ou Affichage – Code

– Vous pouvez aussi séparer votre écran en deux pour visualiser en même temps la page et le code, en cliquant sur Fractionner

– Pour revenir au mode Création, cliquez sur le bouton Création

– Pour basculer du mode Code au mode Création et inversement : Affichage – Basculer entre les affichages ou Ctrl $



• Choisir les navigateurs– Edition(PC)/Dreamweaver (Mac) – Préférences – catégorie

Aperçu dans le navigateur ou dans barre d’outils Document, cliquez sur l’outil puis sur Modifier

liste des navigateurs

– Pour ajouter un navigateur, cliquez sur le bouton +

– Pour visualiser vos pages, Fichier – Aperçu dans le navigateur, cliquer sur le nom du navigateur ou puis Aperçu dans « nom du navigateur »

ou raccourci-clavier F12



• Les menus Menu Fichier Menu Edition Menu Affichage Menu Insertion Menu Modifier Menu Texte Menu Commandes Menu Site Menu Fenêtre Menu Aide La partie inférieure de la fenêtre =>paramétrage Edition=>Préférence=>Barre d’état=>Définir les différentes tailles de

fenêtre et la vitesse de connexion



• Les panneaux – Pour afficher un panneau : Fenêtre – nom du panneau ou, si son nom

est visible dans le dock, cliquez sur son onglet

– Pour réduire tous les panneaux en icônes, cliquez sur les deux flèches visibles dans la partie supérieure droite du dock. A l’inverse, pour afficher tous les panneaux sous forme d’onglets, cliquez à nouveau sur ces deux flèches

– Menu options des panneaux :

– Détacher un panneau :faites glisser l’onglet du panneau vers l’espace de travail

– Détacher un groupe d’onglets, pointez la partie gris foncé à droite des onglets ,faites glisser dans l’espace de travail du document



• Les panneaux – Pour masquer tous les panneaux affichés : Fenêtre – Masquer les

panneaux ou F4

– Pour les faire réapparaître : Fenêtre – Afficher les panneaux ou F4

– Enregistrer son propre environnement de travail : Fenêtre –Présentation de l’espace de travail – Nouvel espace de travail

– Pour gérer vos environnements de travail : Fenêtre – Présentation de l’espace de travail – Gérer les espaces de travail



• Le panneau Insertion– Pour choisir la catégorie d’objets à insérer, ouvrez la liste des

catégories (Commun, par défaut) et sélectionnez une autre catégorie



• Le panneau Propriétés– Ce panneau permet de visualiser, de modifier les propriétés les plus

usuelles de l’élément sélectionné dans la page



• Le panneau Fichiers– Ce panneau permet de gérer les fichiers utilisés pour le site Web

– Fenêtre – Fichiers ou F8

– Pour ouvrir un fichier double-cliquez sur son nom



• Le panneau Historique – Fenêtre – Historique ou Shift F10 (PC)

– Pour rétablir des actions annulées, faites de nouveau glisser le curseur, cette fois vers le bas, jusqu’à l’étape souhaitée

– Si seule la dernière action doit être annulée, utilisez la commande Edition – Annuler (Ctrl Z sous PC et Commande Z sous Mac)

– Le nombre d’actions mémorisées peut être défini dans la zone Nombre maximum d’étapes d’historique de la boîte de dialogue Préférences (Edition (PC)/Dreamweaver(Mac)- Préférences –catégorie Général)



• Raccourcis claviers– Ctrl + N => Nouveau fichier (Commande + N sous MAC)

– Ctrl + S => Enregistrer (Commande + S sous MAC)

– Edition => Raccourcis clavier

• En haut de cette fenêtre, différents jeux de raccourcis

• Dans la fenêtre principale, vous allez pouvoir changer les raccourcis

• Pour les utilisateurs de Mac

– http://www.adobe.com/fr/support/dreamweaver/ts/documents/d9e959b3.htm#f12


http://www.adobe.com/fr/support/dreamweaver/ts/documents/d9e959b3.htm

http://www.adobe.com/fr/support/dreamweaver/ts/documents/d9e959b3.htm

• Ouvrir et Créer son site web


Ouvrir et Créer son site web



• Définir un dossier racine:– Cliquez sur Site=>nouveau site

– Cliquez sur l’onglet Avancé

– Dans la liste Catégories, sélectionnez Infos locales

– Dans le champ nom du site, saisissez le nom de votre site

– Utiliser le bouton Parcourir, à droite du champ Dossier racine local. Vous accédez alors aux différents lecteurs de votre disque dur.

– Sélectionnez le dossier dans lequel Dreamweaver peut identifier tous les fichiers et dossiers entrant dans la composition de la structure du site



– Spécifiez le dossier des images par défaut soit en saisissant directement le chemin d’accès au dossier en question, soit en cliquant sur l’icône Parcourir

– Sur la ligne Liens relatifs, laissez active l’option Document

– Dans le champ adresse HTTP, saisissez l’URL de votre site Web, c’est-à-dire son adresse Internet

– Sélectionnez la case à cocher Utiliser vérification des liens sensibles à la casse (9)

– Cochez la case Activer le cache (10)

– Cliquez sur OK pour fermer la boîte de dialogue Définition du site et enregistrer vos définitions



• Enregistrer les fichiers

– Pour enregistrer un document : Fichier – Enregistrer

– Pour enregistrer une copie : Fichier – Enregistrer sous

– Pour retrouver le document tel qu’il était au dernier enregistrement : Fichier – Rétablir

– Pour enregistrer tous les fichiers ouverts : Fichier – Enregistrer tout

– Attention ! Veillez à enregistrer les fichiers constituant votre site dans votre dossier local pour éviter des chemins d’accès absolu et faciliter leur gestion ! Si vous utilisez un fichier qui ne se trouve pas dans votre dossier local, Dreamweaver vous prévient.



• Gestion des sites et des fichiers – Site – Gérer les sites



• Accéder à un site– Fenêtre – Fichier ou F8

– Ouvrez le menu déroulant des sites



• Gérer les fichiers/dossiers d’un site– Afficher le panneau Fichiers : Fenêtre – Fichiers ou F8

– Pour créer un dossier, sélectionnez le dossier racine et choisissez Fichier –Nouveau dossier dans le menu des options du panneau

– Saisissez le nom du dossier et validez par Entrée

– Lorsque vous créez une page web, celle-ci est automatiquement enregistrée dans le dossier racine du site.

– Pour créer un fichier HTML dans un dossier précis, sélectionnez le dossier concerné et choisissez Fichier – Nouveau fichier dans le menu options

– Nommez le fichier ,validez par Entrée

– Pour renommer : Fichier – renommer

– Pour déplacer : sélectionnez le fichier puis faites-le glisser



• Gérer les fichiers/dossiers d’un site

– Pour dupliquer : Edition – Dupliquer

– Pour actualiser la liste des fichier, cliquez sur du panneau Fichiers ou F5

– Pour supprimer un fichier, sélectionnez-le et appuyez sur Suppr : si le fichier intervient dans une page, Dreamweaver vous demande de confirmer la suppression



• Exercice – Ouvrir et Créer son site web

– Créez un dossier que vous intitulerez formation_dreamweaver

– Créez ensuite un site avec Dreamweaver qui pointera dans ce dossier

– Créez par l’intermédiaire du panneau Fichier, un dossier que vous intitulerez images


• Pages Web


Pages Web

• Créer votre première page web– Fichier – Nouveau ou Ctrl N (PC) ou Commande N (Mac)

– Dans la catégorie Page vierge, sélectionnez HTML dans la zone Type de page et <aucun> dans la colonne suivante

– Modifiez, si besoin est, le type de document de référence dans la liste Type de document

– Cliquez sur le bouton Créer

– Enregistrer ensuite votre page (Fichier – Enregistrer )

• Attribuer un titre – Saisissez le titre dans la zone Titre de la barre d’outils Document

– Pour le modifier : Modifier – Propriétés de la page ou Ctrl J (PC) ou Commande J (Mac) ou dans le panneau Propriétés, cliquez sur le bouton Propriétés de la page

– Cliquez sur la catégorie Titre/codage

– Tapez le texte souhaité dans la zone Titre, puis cliquez sur OK


Pages Web

• La mise en forme des pages avec les feuilles de style – Définir un arrière-plan

• Créez un style CSS de type Sélecteur de balise sur l’élément HTML <body>. Dans la boîte de dialogue Définition des règles de CSS pour body, sélectionnez la catégorie Arrière-plan.

• Pour insérer une image d’arrière-plan, dans la zone Background-image, cliquez sur le bouton Parcourir pour choisir une image

• Pour définir une couleur d’arrière-plan, dans la zone de saisie Background-color, saisissez le code hexadécimal de la couleur ou son nom, ou cliquez sur le carré à gauche de la zone de saisie pour ouvrir le sélecteur de couleur

• Dans le champ Background-repeat, précisez si l’image doit être répétée (repeat) ou non (no-repeat) ou si la répétition doit se aire horizontalement (repeat-x) ou verticalement (repeat-y)

• Dans le champ Background-attachment, choisissez le comportement de l’image lors du défilement du contenu de la page web

• Position dans les champs Background-position (x) et Background-position (y)


Pages Web

• La mise en forme des pages avec les feuilles de style – Définir la mise en forme des caractères

• Cliquez si besoin sur la catégorie Type

• Pour modifier la police de caractères par défaut, sélectionnez-la dans la liste Font-Family

• Pour modifier la taille des caractères, sélectionnez une valeur dans le champ Font-size

• Pour appliquer une couleur de caractères, saisissez son code hexadécimal dans le camp Color ou cliquez sur le carré situré à gauche du champ pour la sélectionner dans le sélecteur de couleur

– Définir les marges

• Sélectionnez la catégorie Boîte

• Utilisez la propriété Margin. Saisissez les valeurs souhaitées et modifiez si besoin, l’unité de mesure associée.

• Cliquez sur le bouton OK pour valider la modification du style de l’élément <body>Tous droits réservés © - Roxane Formation - http://www.roxaneformation.fr

Pages Web

• Exercice – Créer la première page de son site– Créez avec Dreamweaver une première page que vous enregistrerez

dans le dossier formation_dreamweaver en tant que index.html

– Donnez lui un titre par l’intermédiaire de la zone de titre

– Appliquez un arrière-plan de la couleur de votre choix à cette première page


• Intégrer du texte


Intégrer du texte

• Les principes généraux– Le codage des caractères

La norme utf-8 permet d’uniformiser les caractères. Cela permet de ne plus coder les caractères quel que soit l’environnement utilisé ou qu’elle que soit la langue.

• Pour définir la norme à utiliser pour les nouveaux documents, faites Edition (PC)/Dreamweaver(Mac) - Préférences

• Sélectionnez la catégorie Nouveau document

• Sélectionnez dans la liste Codage par défaut, l’option Unicode (UTF-8)


Intégrer du texte

• Les éléments HTML conteneurs de texteVotre texte quel qu’il soit doit être placé dans un conteneur de texte, en fait un élément HTML : en-tête, paragraphe, paragraphe de citation, texte pré-formaté et listes

– Espaces entre les mots

Par défaut, vous ne pouvez saisir qu’un seul espace entre les mots. Si vous désirez saisir plusieurs espaces, allez dans Préférences, catégorie Général et cochez l’option Autoriser plusieurs espaces consécutifs. Ces espaces consécutifs seront alors appelés des espaces insécables.

– Caractères spéciaux

Pour insérer des caractères spéciaux dans votre texte, allez dans le menu Insertion-HTML-Caractères spéciaux

Choisissez le caractère à insérer.

Choisissez Autre pour une liste plus complète


Intégrer du texte

• Insérer un texte d’un autre programme– Nombreuses options permettant de conserver la mise en forme lors du

copier/coller– Menu Edition (PC) ou Dreamweaver (Mac)– Préférences-Rubrique Copier /Coller – Collage Spécial

• Texte Seul• Texte Structuré• Texte Structuré + Formatage de Base• Texte Structuré avec formatage complet • Conserver les sauts de ligne • Nettoyage des espaces inter-paragraphes de Word


Intégrer du texte

• Utiliser des en-têtes– Les éléments d’en-tête permettent de structurer votre page web en

plusieurs parties bien distinctes.

– 6 niveaux d’en-tête allant de <h1> à <h6>

– Menu Format - Format de paragraphe -choisissez En-tête 1 à En-tête 6

– Vous pouvez aussi utiliser la liste déroulante Format dans le panneau Propriétés.


Intégrer du texte

• Utiliser des paragraphes– Menu Format - Format de paragraphe, choisissez Paragraphe

– Panneau Propriétés => avec le bouton HTML actif, la liste déroulante Format pour choisir Paragraphe

– Pour aller à la ligne au sein du même paragraphe : Shift + Entrée

– Autre possibilité : Insertion - HTML - Caractères spéciaux, choisir Saut de ligne


Intégrer du texte

• Utiliser les citations de paragraphe– Les citations de paragraphe <blockquote> permettent de mettre

en évidence un texte, en ajoutant un retrait à gauche et à droite de ce texte

– Menu Format - Retrait

– Vous pouvez aussi utiliser le bouton Retrait du texte, dans le panneau Propriétés, avec le bouton HTML actif

– Pour supprimer la citation de paragraphe, dans le panneau Propriétés, cliquez sur le bouton Retrait négatif ou dans le menu Format, choisissez Retrait négatif


Intégrer du texte

• Utiliser le texte pré-formaté– But : conserver les espaces supplémentaires insérés et les

marques de tabulation

– Menu Format - Format de paragraphe, choisissez Texte pré-formaté

– Vous pouvez aussi utiliser la liste déroulante Format dans le panneau Propriétés, avec le bouton HTML actif


Intégrer du texte

• Utiliser des listes

Listes simples à puces, listes numérotées et les listes de définition

– Les listes simples à puces

Menu Format - choisissez Liste, puis Liste simple

Vous pouvez aussi cliquer sur le bouton Liste simple dans le panneau Propriétés, avec le bouton HTML actif.

A la fin de la saisie du 1er item de la liste, appuyez sur la touche Entrée pour saisir le 2nd item.


Intégrer du texte

– Les listes numérotées• Menu Format- choisissez Liste, puis Liste numérotée• Vous pouvez aussi cliquer sur le bouton Liste numérotée dans le panneau

Propriétés, avec le bouton HTML actif

– Les listes de définition• Pour insérer une liste de définition, dans le menu Format, choisissez Liste, puis

Liste de définition• Vous devez alors saisir le mot à définir. Appuyez sur la touche Entrée puis

saisissez la définition du mot • Pour arrêter de saisir la liste de définition, appuyez deux fois sur la touche

Entrée : vous accédez alors à un paragraphe


Intégrer du texte

• Autres possibilités d’insertion de texteVous pouvez insérer tous les conteneurs de texte que nous venons de voir à partir du panneau Insertion-HTML-Objets texte. Vous retrouvez alors les éléments HTML:

-Paragraphe-Citation de paragraphe -Texte pré-formaté-les En-tête-les listes simples à puces-les listes numérotées-les items des listes -les éléments des Liste de définition


Intégrer du texte

• L’édition de texte– Effectuer une recherche simple ou évoluée• Edition -Rechercher et remplacer ou Ctrl F(PC) ou Pomme F(Mac)

1. Indiquez où doit s’effectuer la recherche2. Option texte (recherche simple de texte) versus Option texte avancée (recherche sur un

texte + sa mise en forme)3. Tapez le texte à rechercher 4. Déterminez les critères de recherche si vous avez choisi Texte(avancé), sélectionnez

balise interne si le texte recherché est formaté ou pas de balise interne si le texte recherché ne doit pas posséder la mise en forme de son code HTML

5. Si vous avez choisi l’option Texte (avancé), ajoutez si besoin des critères de recherche


Intégrer du texte

6. Activez les options :a. Si la casse du document doit correspondre exactement à celle du texte à rechercheb. Pour ignorer les espaces supplémentaire tapés dans la zone de saisie c. Pour rechercher un mot et non une occurrence de caractèresd. Pour pouvoir utiliser les caractères « joker » dans la recherche

7. Lancez la recherche:e. Pour rechercher chaque occurrence l’un après l’autre, chaque occurrence étant sélectionnée dans le

document f. Pour rechercher tous les occurrences en une seule fois => visualisation dans le groupe de panneaux

Résultats, onglet Rechercher et vous pouvez atteindre une occurrence en cliquant dessus

8. Fermez la fenêtre de recherche tout en conservant les éléments de la recherche (Edition -Rechercher suivant pour relancer ou F3)


Intégrer du texte

• Lancer la correction orthographique– Commandes - Orthographes ou Shift F7

– Sélectionnez la bonne orthographe dans la zone Suggestions ou tapez le bon mot dans la zone Remplacer par

– Cliquez sur :

a. Pour remplacer uniquement cette occurrence

b. Pour remplacer toutes les occurrences dans le document

c. Pour ne pas faire de correction sur ce mot

d. Pour ne plus faire de correction sur ce mot dans le document

e. Pour ajouter ce mot à votre dictionnaire personnel


Intégrer du texte

• La mise en forme des caractères– Mise en forme avec les styles classiques

– Le gras, l’italique et l’emphase

Par défaut, Dreamweaver utilise pour la mise en forme en gras et en italique les éléments <b> et <i>. Pour donner un sens au contenu à mettre en évidence (l’emphase), le W3C préconise d’utiliser les éléments <strong> et <em>.

Pour gérer ce changement, allez dans les Préférences (menu Edition sous Windows et Dreamweaver sous Mac), catégorie général. Laissez l’option Utiliser <strong> et <em> au lien de <b> et <i> cochée


Intégrer du texte

• La mise en forme des caractères– L’application des styles

Pour mettre en forme votre texte, sélectionnez-le. Dans le menu Format –Style, choisissez Gras ou Italique. Vous pouvez aussi utiliser les boutons Graset Italique dans le Panneau Propriétés, avec le bouton HTML actif.

– Vous retrouvez ces styles, Gras, Italique, Forte accentuation et Accentuation, dans le panneau Insertion, dans la catégorie Texte


Intégrer du texte

• La mise en forme des caractères– Pour appliquer un autre style, dans le menu Format-Style, choisissez :

• Souligné (élément HTML <u>)

• Barré (élément HTML <s>)

• Télétype (élément HTML tt) pour une mise en forme

avec une police à largeur fixe, type Courier

• Accentuer (<em>) ou Forte Accentuation (<strong>)


Intégrer du texte

• Les styles sémantiquesIl existe d’autres styles qui permettent de donner du sens à votre texte : ce sont les styles sémantiques.

Dans le menu Format - Style, choisissez:

– Code : Indiquer que le texte est du code de programmation

– Variable : Indiquer que le texte est une variable de programmation

– Echantillon : Indiquer que le texte est un échantillon

– Clavier : Indiquer que le texte est saisi au clavier

– Citation : Indiquer que le texte est une citation

– Définition : Indiquer que le texte est une définition

– Effacé(e) : Indiquer que le texte a été effacé par rapport à une précédente version

– Insérée (e ) : Indiquer que le texte a été inséré par rapport à une précédente version


Intégrer du texte

• Les abréviations– Cette mise en forme permet d’afficher dans une bulle, le libellé

complet d’une abréviation (élément HTML <abbr>)

– Sélectionnez le texte de votre abréviation et dans le panneau Insertion, dans la catégorie HTML, objets Texte, cliquez sur Abréviation

– Indiquez le libellé complet

– Indiquez le code de la langue utilisée


Intégrer du texte

• La mise en forme avec les styles CSS

Un rappel sur les sélecteurs– Vous pouvez utiliser un sélecteur de classe, qui permet de créer

un style, de définir ses propriétés et de l’appliquer aux sélections de votre choix.

– Vous pouvez aussi utiliser les sélecteurs de balise qui permettent de redéfinir la mise en forme d’un élément HTML existant.

– Par exemple, vous pouvez redéfinir la mise en forme de l’élément HTML <strong> pour qu’il apparaisse avec une couleur et un fond coloré.


Intégrer du texte

– Pour créer un style, dans le document HTML enregistré, allez dans le menu Format=>Style CSS, choisissez Nouveau• Ou dans le panneau Styles CSS, cliquez sur le bouton Nouvelle règle CSS

– Renseignez les différentes informations puis cliquez sur le bouton OK


Intégrer du texte

• La catégorie TypeCette catégorie contient les propriétés CSS relatives à la mise en forme des caractères (type en anglais) .


Intégrer du texte

• La catégorie Arrière-plan Appliquer une couleur ou une image d’arrière-plan


Intégrer du texte

• La catégorie BlocMettre en forme des caractères avec des propriétés d’espacement et de décalage


Intégrer du texte

• La catégorie BoîteUne boîte est l’espace dans lequel est affiché l’élément HTML. Cette boîte peut, pour la mise en forme des caractères, être délimités par une bordure, il peut y avoir un espace entre la boîte, matérialisée par la bordure, et son contenu, le texte

ainsi qu’un espace autour de la boîte.


Intégrer du texte

• La catégorie BordureCes propriétés permettent d’appliquer des bordures sur tous les côtés de la boîte. Là encore vous pouvez avoir des bordures identiques ou différentes pour chaque côté.


• Intégrer des feuilles de style


Intégrer des feuilles de style

• La mise en forme CSS des textes– Les sélecteurs utilisables

• Sélecteurs de classe

• Sélecteurs d’identifiant

• Sélecteurs de balises

• Pseudo-classes : sélecteurs servant à la mise en forme des liens hypertextes

– Créer un style CSS

• Format - Styles CSS-Nouveau – ou dans le panneau Styles CSS, cliquez sur le bouton Nouvelle règle CSS



• La mise en forme CSS des textes– Choisissez l’option:

• Classe : Pour créer un style personnel auquel vous allez appliquer des éléments de mise en forme. Le nom des classes doit commencer par le caractère . (point)

• Balise : Pour définir la mise en forme d’un élément HTML existant que vous sélectionnez dans le menu déroulant qui suit

• ID : Pour créer des styles à usage unique par page

• Composé : Pour définir dans un premier temps l’apparence des liens non visités (a:link), pointés (a:hover), au moment où l’utilisateur clique dessus (a:active) et des liens visités (a:visited)



• La mise en forme CSS des textes– Si vous avez choisi l’option Classe ou ID, nommez le style et validez

– Définissez la mise en forme à l’aide des options des différentes Catégories de la boîte de dialogue Définition des règles de CSS :

• Type

• Arrière-plan

• Bloc

• Boîte

• Bordure

• Liste

• Positionnement

– Cliquez sur OK

– Les styles créés sont affichés dans le menu Format –Styles CSS et dans le panneau Styles CSS



• Appliquer / Annuler un style – Pour appliquer un style, cliquez dans le texte (paragraphe, paragraphe de

citation, en-tête) ou sélectionnez l’élément (élément de liste, élément de tableau et image)

– Format – Styles CSS puis cliquez sur le nom du style ou, dans le panneau Styles CSS, cliquez sur le style voulu puis choisissez Appliquer dans le menu des options ou, dans le panneau Propriétés, sélectionnez le style à appliquer dans la liste Règle cible si le bouton CSS est actif, ou Classe si le bouton HTMLest actif

– Pour annuler l’application d’un style, sélectionnez l’élément qui utilise ce style puis choisissez Format – Styles CSS – Aucun. Dans le panneau Propriétés, avec le bouton CSS actif, dans la liste déroulante Règle cible, choisissez Supprimer la classe. Avec le bouton HTML actif, dans la liste déroulante Classe, choisissez Aucune.



• Modifier un style – A l’aide de la boîte de dialogue Définition des règles de CSS

• Sélectionnez le style à modifier dans le panneau Styles CSS et cliquez sur le

bouton

• Faites les modifications voulues dans la boîte de dialogue Définition des règles de CSS pour et cliquer sur OK

• Tous les éléments qui utilisent ce style sont mis à jour

– A l’aide du panneau Styles CSS (méthode avancée)

• Fenêtre – Styles CSS ou cliquez sur le bouton CSS du panneau Propriétés

• Cliquez, si besoin, sur le bouton Tous

• Sélectionnez le style à modifier

• Cliquez sur le bouton pour afficher uniquement les propriétés de styles définies

• Cliquez sur le champ de valeur de la propriété à modifier puis

sélectionnez une autre valeur dans la liste ou saisissez-là



• La création de feuilles de style externes– Créer un fichier .css

Il s’agit ici de créer un fichier pour la feuille de style pour votre site auquel toutes les pages feront référence pour pouvoir utiliser cette source unique de styles.

• Créez un nouveau document

• Format – Styles CSS – Nouveau ou dans le panneau Styles CSS, cliquez sur

– Choisissez un type de la même façon que pour la création d’un style d’une page

– Si vous créez un style personnalisé, nommez-le

– Choisissez l’option (Nouveau fichier feuille de style) dans la liste déroulante

– Validez




– A l’étape suivante, vous devez enregistrer le fichier de feuille de style

– Précisez le Nom du fichier de la feuille de style puis cliquez sur le bouton Enregistrer

– Ensuite, définissez le style créé

– Dans la fenêtre de définition du style, indiquez les éléments de mise en forme de ce style et cliquez sur le bouton OK

– Créez ensuite, dans le même fichier, les autres styles de la feuille de style

– La feuille de style apparaît dans la fenêtre Styles CSS avec tous les styles associés

– Si vous connaissez bien le HTML et le CSS, vous pouvez coder directement vos styles dans un fichier CSS : Fichier – Nouveau – catégorie Page vierge, choisissez CSS comme Type de page puis cliquez sur Créer. Saisissez le code puis enregistrez le fichier CSS.




– Dreamweaver met à votre disposition des modèles de feuilles de style. Pour les utiliser, faites Fichier – Nouveau – catégorie Exemple de page-dossier Feuilles de Style en cascade. Choisissez un modèle et cliquez sur Créer. Enregistrez cette feuille de style dans le dossier de votre site.

– Dans la boîte de dialogue Préférences, catégorie Styles CSS, vous pouvez paramétrer la syntaxe du code généré par Dreamweaver lors de la création ou de la modification des styles CSS et choisir Utiliser Forme courte : le code est plus concis et plus facilement exploitable par le programmeur



• La création de feuilles de style externes– Créer un nouveau style dans le fichier CSS précédemment créé

Il s’agit de créer un nouveau style de la page HTML dans le fichier CSS créé précédemment.

– Format – Styles CSS – Nouveau ou, dans le panneau Styles CSS, cliquez sur

– Sélectionnez le Type de sélecteur, saisissez un nom

– Dans la liste Définition de règle, sélectionnez le nom du fichier CSS créé précédemment

– Cliquez sur le bouton OK

– Définissez ensuite les propriétés du style



• La création de feuilles de style externes– Lier un fichier .css

• Ouvrez le document HTML à lier

• Format – Styles CSS – Attacher feuille de style ou dans le panneau Styles CSS, cliquez sur le bouton

• Depuis le panneau Propriétés avec le bouton HTML actif, l’option Joindre la feuille de style de la liste Classe

permet aussi de lier une feuille CSS



• La création de feuilles de style externes– Lier un fichier .css

• Pour supprimer une liaison , sélectionnez le nom de la feuille de style dans le panneau Styles CSS puis cliquez sur le bouton Rompre le lien vers la feuille de style CSS

• Vous pouvez créer des styles particuliers pour une page, en plus de la feuille liée

• Pour modifier un fichier CSS, accédez à un document lié à la feuille de style à modifier. Dans le panneau Styles CSS, sélectionnez le style à modifier. Cliquez sur le bouton pour effectuer les modifications

• Si mise en page complexe, utilisant plusieurs feuilles de style externes liées, intéressant d’afficher/de masquer les styles provenant de fichiers .css:

– Format – Styles CSS – Conception. Puis bouton + et -, pour ajouter/supprimer les fichiers CSS à utiliser dans la zone Afficher à la conception uniquement, et les fichiers CSS à masquer dans la zone Masquer à la conception


• Intégrer des images


Intégrer des images

• Ajoutez des images– Pour créer, convertir ou modifier vos images, un autre programme est

nécessaire tel que Photoshop ou Fireworks

– Dreamweaver sert juste à placer les images dans votre page

– Avant l’insertion d’une image

• Enregistrer sa page

• Créer un dossier images

• Attention ! Utiliser toujours le panneau fichiers pour déplacer ou renommer des éléments



• Les chemins d’accès aux images – Les chemins absolus

• Le chemin absolu précise l’url complète d’accès à la source, par exemple: http://www.monsite.fr/images/desert.jpg

• Vous utilisez des liens absolus quand vous faites référence à une ressource qui se trouve en dehors du dossier de votre site

– Les chemins relatifs au document

• Le chemin relatif au document indique le chemin d’accès à la ressource par rapport au document


http://www.monsite.fr/images/desert.jpg


• Insertion d’une image– Cliquez à l’endroit où vous voulez mettre l’image et placez-y votre

curseur

– Cliquez sur le panneau Insertion (en haut à droite de l’espace de travail)

– Cliquez sur l’icône Image de la section Commun

– Naviguez vers le dossier où se trouve l’image à insérer. Double-cliquez sur ce dossier pour le sélectionner

– Tapez un texte secondaire dans la boîte de dialogue Attributs des balises d’image

– OK



• Insertion d’une image– Cliquez sur l’image que vous venez d’insérer dans votre page web

– Utilisez l’inspecteur Propriétés pour définir les attributs de l’image (alignement, espacement vertical ou horizontal, texte secondaire etc.)

– Attention ! Bien qu’il est possible de modifier la taille de l’image via Dreamweaver, cela est déconseillé!

– Distribution d’un document récapitulatif des attributs des images dans l’inspecteur Propriétés



• Insertion d’une image au format Photoshop– Lorsque vous insérez une image au format natif de Photoshop (.psd), une

boîte de dialogue apparaît pour que vous puissiez optimiser cette image

– Choisissez le Format d’optimisation de l’image dans la liste correspondante

– Choisissez les options du Format Jpeg, Gif ou Png

– Taille de l’image:• Pour optimiser la taille de l’image, cliquez sur le bouton

• Pour réduire ou augmenter la taille de l’image, cliquez sur l’onglet Fichier puis effectuez une mise à l’échelle proportionnelle à l’aide de la liste % ou spécifiez la largeur de l’image dans la zone L et sa hauteur dans la zone H ; cochez l’option Contraindre les proportions pour conserver les proportions de l’image

• Cliquez sur OK

• Une fois l’image insérée, vous pouvez retrouver ces propriétés en utilisant la commande Modifier – Image – Optimiser ou du panneau Propriétés



• La modification d’une image– Modifier une image provenant de Photoshop

• Dans Dreamweaver, sélectionnez l’image concernée puis cliquez sur le bouton Edition visible à droite de l’option Modifier dans le panneau Propriétés

• L’application Adobe Photoshop s’ouvre

• Réalisez les modifications souhaitées puis enregistrez-les.

• Faites ensuite une sélection d’une zone, d’une tranche ou de l’image entière puis faites un copié-collé pour remplacer l’ancienne version de l’image par la nouvelle version modifiée

• Vous pouvez également faire un double clic sur le nom de l’image dans le panneau Fichiers pour l’ouvrir dans Photoshop



• La modification d’une image– Paramétrer une image

• Sélectionnez l’image insérée



• La modification d’une image– Retoucher une image

• Recadrage : Modifier – Image – Recadrer ou du panneau Propriétés

Réduisez la partie visible à l’aide des poignées et validée par Entrée

• Rééchantillonner une image: quand vous redimensionner manuellement une image, vous la pixellisez. Pour supprimer cet aspect « granuleux », vous pouvez demander un rééchantillonnage

• Modifier – Image – Rééchantillonner ou cliquez sur du panneau Propriétés

• Régler la luminosité ou le contraste: Modifier – Image – Luminosité/Contraste ou du panneau Propriétés

• Déplacez le ou les curseurs et cochez, si besoin, l’option Aperçu pour visualiser directement le résultat sur l’image dans la page

• Quand le résultat vous convient, cliquez sur OK

• Accentuer une image: Modifier – Image – Accentuer ou dans le panneau Propriétés



• La mise en forme CSS des images La mise en forme CSS des images se fait à l’aide des feuilles de styles. Pour information, l’élément HTML utilisé pour une image est <img>

– Positionner une image en utilisant le flottement

• Dans la boîte de dialogue des règles CSS, sélectionnez la catégorie Boîte

• Ouvrez la liste Float et sélectionnez l’option left si l’image doit flotter à gauche du paragraphe ou right si elle doit flotter à droite

– Modifier les marges et les bordures d’une image

• Dans la boîte de dialogue des règles CSS, sélectionnez la catégorie Boîte et complétez les propriétés des zones Padding et Margin

• Utilisez les propriétés de la catégorie Bordure pour définir le style, la couleur et l’épaisseur du trait des bordures de l’image

– Modifier les propriétés à l’aide du panneau Styles CSS

• Cliquez sur le lien Ajouter une propriété

• Pour modifier une propriété existante, sélectionnez-la dans la partie inférieure du panneau et modifiez dans la liste qui suit ses caractéristiques


• Intégrer des liens


Intégrer des liens

• Définir des liens– Lier des pages au sein de votre site Web

• Ouvrez la page dans laquelle vous souhaitez créer un lien

• Cliquez sur l’icône Hyperlien à gauche de la barre d’outils Commun en haut de l’espace de travail

• Dans la boîte de dialogues Hyperliens, cliquez sur le bouton Parcourir à droite du champ Lien

• Cliquez sur le nom du fichier voulu afin de sélectionnez la page que vous désirez lier

• Cliquez sur OK (Windows) ou Choisir ( MAC)


Intégrer des liens

• Définir des liens– Lier des pages au sein de votre site Web


Intégrer des liens– Définir des liens vers des ancres nommées à l’intérieur d’une

page web

• Ouvrez la page sur laquelle vous souhaitez insérer une ancre nommée

• Cliquez à côté du mot ou de l’image que vous souhaitez lier

• Dans le menu Insertion choisissez l’option Ancre Nommée

• Saisissez un nom d’identification

• Cliquez sur OK

• Pour modifier le nom de l’ancre, cliquez sur son élément invisible et utilisez le panneau Propriétés


Intégrer des liens• Pour définir un lien qui renvoie à l’ancre nommée,

sélectionnez le texte ou l’image qui servira de lien hypertexte

• Dans la section Commun, cliquez sur l’icône Hyperlien et dans le menu local Liens vous retrouvez votre ancre nommée

• Alternative : Champ Lien du panneau Propriétés =>signe # suivi du nom de l’ancre

• Alternative : Sélection du texte et tirer un trait à partir de l’icône « Pointer vers un fichier » jusqu’à l’icône de l’ancre


Intégrer des liens– Lier vers des pages situées sur d’autres sites web

• Ouvrez la page dans laquelle vous souhaitez créer le lien

• Sélectionnez le texte ou l’image qui servira de lien

• Dans le champ Lien de l’inspecteur Propriétés, saisissez l’URL de la page à atteindre

• Attention ! Saisir l’URL complète!


Intégrer des liens

– Définir un lien vers une adresse e-mail• Envoyer rapidement un courrier électronique à l’adresse vers laquelle

pointe le lien ainsi défini

• Sélectionnez le texte voulu

• Cliquez sur l ’icône Lien de messagerie de la section Commun du panneau Insertion

• Dans la boîte de dialogue qui s’affiche, entrez l’adresse électronique cible et cliquez sur OK

• Attention ! Via le champ lien de l’inspecteur de Propriétés, n’oubliez pas d’insérer mailto devant l’adresse !

– Créer des liens externes • Sélectionnez le texte du lien

• Dans le champ Lien du panneau Propriétés, saisissez l’Url complète de la page à pointer


Intégrer des liens

• Créer des liens sur des images– Les boutons

• Insérez une image qui fera office de bouton et sélectionnez-la

• Dans le champ Lien du panneau Propriétés, créez votre lien de la même façon qu’un lien de texte

– Les cartes image• Activez si besoin, l’affichage des zones réactives de la carte : Affichage – Assistances

visuelles –Cartes graphiques

• Insérez l’image et sélectionnez-là

• Dans le champ Carte du panneau Propriétés, saisissez obligatoirement le nom à donner à votre image

• Choisissez une forme de zone réactive

• Cliquez sur OK et dessinez la zone sur l’image


Intégrer des liens

• Créer des liens sur des images– Les rollovers

Les rollovers apportent un peu de dynamisme à votre page. Vous devez prévoir une image pour le bouton dans son état actif et une image pour le bouton dans son état inactif.

• Cliquez à l’endroit où doit apparaître le bouton

• Insertion – Objets d’image – Image survolée ou panneau Insertion- catégorie Commun –menu déroulant Images survolées


Intégrer des liens

• La vérification des liens Lorsqu’un fichier intervenant dans un lien est renommé ou déplacé, Dreamweaver vous demande d’effectuer la mise à jour des liens

– Vérifier les liens • Pour vérifier un lien dans une page, sélectionnez-le puis Modifier – Ouvrir la page liée ou

maintenez la touche Ctrl (PC) ou Commandes (Mac) et double cliquez sur le lien

• Pour vérifier tous les liens dans une page : Fichier – Vérifier la page – Liens

• Dans le menu Afficher du panneau Vérificateur de lien, choisissez l’option Liens brisés

• Pour corriger un lien dans une page, double-cliquez sur l’icône du lien à corriger et faites la correction dans le panneau Propriétés, dans le champ Lien

• Pour vérifier les liens de certains fichiers, dans la fenêtre des sites local et distant, sélectionnez les fichiers à vérifier puis Fichier – Vérifier liens ou Shift F8 (PC) ou menu local du panneau Fichiers puis Fichier – Vérifier liens

• Pour vérifier tous les liens du site, à partir de la liste des fichiers du site : Site – Vérifier tous les liens du site ou Ctrl F8 (PC), Commandes F8 (Mac)


Intégrer des liens

• La vérification des liens Lorsqu’un fichier intervenant dans un lien est renommé ou déplacé, Dreamweaver vous demande d’effectuer la mise à jour des liens

– Vérifier les liens • Pour visualiser les liens externes à votre site Web dans la page courante : Fichier –

Vérifier la page- Liens. Dans le menu déroulant Afficher du panneau Vérificateur de lien, choisissez Liens externes. Les liens vers des fichiers externes ou vers d’autres sites ainsi que vers des adresses mail sont affichés.

• Dès qu’il y a un problème dans les liens, Dreamweaver affiche dans la carte du site, les fichiers liés dont le lien est brisé en rouge avec le symbole d’une chaîne brisée

– Vérifier tous les liens du site • Dans le panneau Vérificateurs de liens, cliquez sur le bouton Vérifier les liens et

sélectionnez l’option Vérifier les liens de tous les fichiers du site local

• Pour vérifier tous les liens, dans le panneau Fichier, cliquez sur– Menu Site, option Vérifier tous les liens du site


Intégrer des liens

• Gérer les liens – Pour modifier le lien d’un fichier, dans le panneau Fichiers, sélectionnez le

fichier lié puis dans le menu local choisissez Site – Modifier le lien ou Ctrl L (PC) ou Commandes L (MAC)

– Sélectionnez le nouveau fichier à lier à la place de l’ancien puis cliquez sur OK

– Ouvrir source d’un lien : panneau Fichiers – Site- Ouvrir source du lien

– Supprimer un lien : panneau Fichiers – Site- Supprimer le lien


Intégrer des liens

• Changer couleur de lien et option de soulignement

– Menu Modifier - Option Propriétés de la page

– Option Liens(CSS) dans la liste Catégories

– Indiquez les polices à exploiter pour les liens via la case Police des liens

– B: liens en gras / I: liens en italique

• Quatre options de couleur de liens :

– Couleur des liens

Indique la couleur d’un lien dont l’utilisateur n’a pas encore visité la page de destination

– Liens visités

Couleur utilisée pour des liens pointant vers des pages déjà visitées

– Liens de survol

Le lien prend cette couleur lorsque l’utilisateur place le pointeur au-dessus

– Liens Actifs

Le lien prend brièvement cette couleur lorsque l’utilisateur clique dessus


Intégrer des liens

– Dans la liste style souligné, spécifiez si les liens seront soulignés

– Cliquez sur le bouton Appliquer pour voir l’impact de vos modifications de couleurs dans la page

– Cliquez sur OK et fermer la boîte de dialogues Propriétés de la page


• Intégrer des tableaux


Intégrer des tableaux

• La création d’un tableau Dans les pages Web, les tableaux permettent de créer des tables de données de manière tout à fait classique.

– Créer un tableau

• Cliquez à l’endroit souhaité de la page

• Insertion Tableau

• Panneau Insertion

• =>Catégorie Commun



• Il est préférable d’utiliser des styles CSS pour la mise en forme de tableaux

• Le tableau s’agrandit si vous insérez dans une cellule une image de taille plus importante que la taille de la cellule

• La commande Fichier – Importer – Données tabulaires ou Insertion –Objets du tableau – Importer les données tabulaires permet d’importer des données organisées sous forme tabulaire

• Pour importer un tableau qui a été réalisé avec Excel, utilisez la commande Fichier – Importer – Document Excel

• Vous pouvez exporter un tableau créé dans Dreamweaver en utilisant la commande Fichier – Exporter - Tableau



• Sélectionnez les cellules d’un tableau– Pour activer une cellule, faites un clic dans celle-ci

– Pour sélectionnez une cellule, faite Ctrl clic (PC) ou Commande clic (Mac) dans celle-ci ou cliquez dans la cellule à sélectionner puis sur l’élément HTML <td> (ou <th>)visible dans la barre d’état

– Pour sélectionnez des cellules non contiguës, faite Ctrl clic (PC) ou Commande clic (Mac) dans la première cellule, maintenez la touche Ctrl ou Commande enfoncée puis faites des clics successifs dans les autres cellulesSi besoin est, cliquez à nouveau dans une cellule sélectionnée pour la désélectionner

– Pour sélectionner plusieurs cellules contiguës, faites un cliqué-glissé sur celles-ci, ou cliquez dans la première cellule, appuyez et maintenez la touche Shift enfoncée puis cliquez dans la dernière cellule

– Pour sélectionner une ligne/colonne, cliquez à gauche de la ligne/au sommet de la colonne ; le pointeur doit avoir la forme d’une flèche et les cellules sont entourées de rouge



• La structure d’un tableau– Ajouter/Supprimer des lignes/colonnes

a. Ajouter des lignes/colonnes:

Pour ajouter une ligne à la fin du tableau, cliquez dans la dernière cellule du tableau puis appuyez sur la touche tabulation

Pour ajouter une ligne/colonne à l’intérieur du tableau, utilisez l’une de ces quatre méthodes:

-cliquez dans la cellule au-dessus/à gauche de laquelle vous voulez qu’apparaisse la nouvelle ligne/colonne puis choisissez Modifier –Tableau – Insérer une ligne (Ctrl M sous PC ou Pomme M sous Mac ouInsérer une colonne (Ctrl Shift A (PC) ou Pomme Shift A (Mac)





-cliquez dans la cellule à côté de laquelle vous voulez insérer des lignes ou des colonnes puis faites Modifier – Tableau – Insérer des lignes ou des colonnes

-dans la catégorie Mise en forme du panneau Insertion, vous pouvez cliquer sur le libellé correspondant





-Ouvrez le menu Insertion – Objets du tableau et cliquez sur l’option correspondante

=> Vous pouvez également utiliser le menu local qui apparaît au niveau des dimensions du tableau : cliquez sur le triangle vert d’une colonne et choisissez Insérer une colonne à gauche ou Insérer une colonne à droite.

b. Supprimer des lignes/colonnes

Pour supprimer une ligne/colonne, cliquez dans une cellule de la ligne/colonne puis choisissez Modifier – Tableau – Supprimer la ligne (Ctrl Shift M (PC) ou Pomme Shift M (Mac) ) ou Supprimer la colonne (Ctrl Shift I (PC) ou Pomme Shift I (Mac) )



• La structure d’un tableau– Fusionner/fractionner des cellules

– Sélectionnez les cellules adjacentes que vous souhaitez fusionner

– Modifier-Tableau -Fusionner les cellules

– Pour agrandir une cellule fusionnée, cliquez dans la cellule puis Modifier – Tableau – Augmenter l’étendue de la ligne ou Augmenter l’étendue de la colonne

– Pour réduire une cellule fusionnée, cliquez dans la cellule fusionnée puis Modifier – Tableau – Réduire l’étendue de la ligne ou Réduire l’étendue de la colonne



• Fractionnez des cellules fusionnées

– Cliquez dans la cellule fusionnée

– Modifier - Tableau - Fractionnez la cellule

– En fonction de la fusion initiale, choisissez Fractionnez la cellule en Lignes ou Colonnes puis indiquez le Nombre de lignes ou colonnes

• Trier un tableau

– Cliquez dans le tableau :Commandes - Trier le tableau



• Imbriquez un tableau dans un autre

– Créez un premier tableau

– Dans un espace libre du premier tableau, créez un second tableau

• La mise en forme CSS des tableaux

– La mise en forme CSS des tableaux doit se faire à l’aide des feuilles de styles mais certaines mises en forme n’étant pas accessibles dans Dreamweaver, dans ce cas, il sera nécessaire d’intervenir directement dans le code !



• Mettre en forme le tableau

– Pour appliquer une couleur ou une image en arrière-plan, utilisez les propriétés de la catégorie Arrière-plan

– Pour appliquer une bordure extérieure au tableau, sélectionnez la catégorie Bordure et précisez le Style, l’épaisseur (Width) et la couleur (Color) du trait pour chacune des bordures du tableau dans les zones correspondantes. Si le style, l’épaisseur et/ou la couleur du trait doit être identique pour toutes les bordures, laissez cochée l’option Idem pour tous du cadre correspondant

– Pour modifier la largeur du tableau, sélectionnez Boîte et précisez une valeur fixe (px, cm, pt…) ou relative (%) dans la propriété Width

– Pour aligner le tableau dans la page, dans la catégorie Boîte, choisissez auto pour les marges gauche et droite de la propriété Margin

– Pour espacer le tableau de ce qui précède et de ce qui suit, précisez la valeur de l’espacement dans les zones Top et Bottom de la propriété Margin(catégorie Boîte)



• Mettre en forme le tableau



• Mettre en forme la légende

– Dans la barre d’outils Document, cliquez sur le bouton Code

– Créez un style de classe pour la légende et utiliser la propriété caption-side avec les valeurs top, right, bottom ou left

• Mettre en forme des cellules

– Pour éviter le problème d’affichage des tableaux, spécifiez la largeur des cellules de la première ligne du tableau sans qu’il soit obligatoire d’indiquer la largeur du tableau

• Propriété width de la catégorie Boîte :modifier la largeur des cellules

• Propriétés de la catégorie Bordure :définir les bordures des cellules

• Les bordures apparaissent espacées, pour ne plus afficher cet espace entre les bordures des cellules, celles-ci doivent être fusionnées : dans le code, ajoutez la propriété border-collapse à la classe en lui affichant la valeur collapse


• Intégrer des formulaires


Intégrer des formulaires

• La création d’un formulairePour utiliser des formulaires, deux éléments sont indispensables : le

formulaire avec tous ses objets (zones de saisie, listes, menus, cases à cocher …) et un script qui va gérer les données. Vous devez créer le script en utilisant un langage de programmation serveur (PHP, ASP …) afin de pouvoir récupérer ces données dans une base de données.

Vous pouvez insérer le formulaire dans un tableau pour faciliter la mise en page de ces éléments



• Créer un formulaire– Insertion – Formulaire-Formulaire

– Panneau Insertion, catégorie Formulaires

– Le formulaire s’affiche sous la forme d’un rectangle rouge

1) Saisissez le nom du formulaire

2) Indiquez le chemin d’accès au script qui va gérer le formulaire en cliquant sur l’icône de dossier pour le sélectionner sur votre disque, ou, si les données doivent être envoyées par mail, inscrivez l’adresse mail sous la forme : mailto:[email protected]



• Créer un formulaire3) Choisissez le type de traitement de données :

– GET Envoie les données au serveur par l’intermédiaire de l’URL à l’aide d’une requête GET

– POST Envoie les données au serveur dans le corps d’un message à l’aide d’une requête POST

4) Définissez le code MIME des données envoyées au serveur en fonction du type de ces données

5) Spécifiez la fenêtre à utiliser pour afficher les données envoyées par le script



• Insérer une zone de saisie• Cliquez dans votre formulaire à l’endroit voulu

• Insertion – Formulaire – Champ de texte

• Panneau Insertion catégorie Formulaires

• Définissez les attributs d’accessibilité du champs de texte puis cliquez sur OK

• Sélectionnez la zone de saisie puis spécifiez ses paramètres à l’aide du panneau Propriétés



• Insérer une case à cocher et un bouton radio• Cliquez dans votre formulaire à l’endroit voulu et tapez si besoin est,

le libellé associé à la case à cocher ou au bouton radio

• Insertion – Formulaire – Case à cocher ou Bouton radio

• Définissez les attributs d’accessibilité du champ puis cliquez sur OK

• Sélectionnez la case à cocher ou le bouton radio puis spécifiez ses paramètres à l’aide du panneau Propriétés



• Définir les attributs d’accessibilité Par défaut, lorsque vous créez un objet de formulaire, Dreamweaver vous propose de définir les attributs de l’objet



• Insérer un groupe de boutons radio ou de cases à cocher– Cliquez à l’endroit voulu

– Insertion – Formulaire - Groupe de boutons radio ou Groupe de cases à cocher




• Insérer un menu déroulant – Cliquez dans votre formulaire à l’endroit voulu et tapez, si besoin est,

le libellé associé au menu déroulant

– Insertion -Formulaire -Liste/Menu


– Définissez les attributs d’accessibilité de l’objet menu déroulant puis cliquez sur OK

– Sélectionnez le menu déroulant, puis spécifiez ses paramètres à l’aide du panneau Propriétés



• Insérer une liste

Une liste permet d’afficher plusieurs valeurs et permet à l’utilisateur de

sélectionner plusieurs options.

– Insérez l’objet de formulaire en procédant comme pour le menu déroulant puis spécifiez ses paramètres à l’aide du panneau Propriétés



• Créer un jeu de champs

Pour mieux structurer vos formulaires, vous pouvez regrouper un certain

nombre de champs dans un ensemble encadré et lui donner un titre

– Sélectionnez les éléments du formulaire qui doivent être encadrés

– Insertion – Formulaire –Ensemble de champs ou utilisez le bouton spécial de la catégorie Formulaires du panneau Insertion

– Saisissez le nom de l’ensemble puis cliquez sur OK



• Insérer un champ masqué

Un champ masqué n’est pas visible dans la fenêtre du navigateur quand

l’internaute consulte le site, il ne l’est que pas le concepteur de la page dans Dreamweaver. Il permet d’effectuer des opérations diverses à l’aide d’un script.

– Cliquez à l’endroit voulu

– Insertion - Formulaire -Champ Masqué

– Panneau Insertion, onglet champ masqué de la catégorie Formulaires

– Dans le panneau Propriétés, remplacez le texte hiddenField par le nom de l’objet

– Indiquez la valeur renvoyée au script



• Insérer des boutons d’envoi et d’annulation

Pour pouvoir utiliser le formulaire, vous devez y insérer deux boutons : le premier

pour envoyer le formulaire (submit) au script sur serveur ou à l’adresse mail ; le second pour donner la possibilité à l’internaute d’annuler le saisies et de recommencer (reset)

– Cliquez à l’endroit voulu

– Insertion- Formulaire -Bouton


– Définissez les attributs d’accessibilité de l’objet puis cliquez sur OK

– Sélectionnez le bouton puis spécifiez ses paramètres à l’aide du panneau Propriétés



• La mise en forme CSS des formulaires

Comme pour tout autre élément, vous pouvez créer des sélecteurs de

classe pour ensuite appliquer le style CSS aux éléments HTML du formulaire ou utiliser des sélecteurs de balise pour redéfinir ceux existants. Les éléments HTML, utilisés dans les formulaires sont les suivants:

<form> pour l’objet de formulaire

<label> pour les étiquettes

<input> pour les objets de type champs de texte, boutons radio, cases à cocher, champ de fichier et les boutons envoi et annulation

<select> pour menus et listes

<option> pour item des menus et des listes

<fielset> pour encadrement des objets et l’élément du titre <legend>



• Modifier la mise en forme des objets du formulaire– Les propriétés CSS de mise en forme des objets d’un formulaire sont

équivalentes à celles des caractères, des textes et des conteneurs

– Pour modifier rapidement la mise en forme de toutes les étiquettes du formulaire, vous pouvez utiliser un sélecteur de balise <label>. Il peut en être de même pour l’encadré des champs et leur titre

– Pour la mise en forme du formulaire, vous pouvez utiliser un sélecteur

d’identification (ID), en reprenant par exemple le nom donné à votre

formulaire : #inscriptions



• Modifier la mise en forme de l’élément présélectionné d’un menu– Créez un nouveau style et choisissez le sélecteur Composé (selon

votre sélection)

– Dans le champ Nom du sélecteur, saisissez option[selected=selected] pour appliquer le style à tous les éléments dont l’attribut et la valeur sont selected.

– Définissez ensuite les propriétés du style, par exemple, une couleur de fond différente


• Intégrer des objets


Intégrer des objets

• Introduction– Vous pouvez insérer des objets aussi divers que des animations Flash,

des scripts, des vidéos mais gardez bien à l’esprit que l’utilisateur doit posséder sur son ordinateur le plug-in qui va permettre d’exploiter cet objet.

– Définir les éditeurs externes

• Edition/Dreamweaver – Préférences – catégorie Types de fichiers /Editeurs

• Dans la liste Extensions, vous visualisez celles qui sont paramétrées



• Pour modifier l’éditeur d’une extension déjà existante, sélectionnez-la dans la liste Extensions puis, si le logiciel a déjà été ajouté, sélectionnez-le dans la liste Editeurs ou, à l’inverse, ajoutez-le en cliquant sur le bouton +

• Pour ajouter une extension, cliquez sur le bouton + et tapez le nom de l’extension

• Dans la liste Editeurs, cliquez sur le bouton + pour sélectionner sur votre ordinateur le logiciel qui doit être lancé pour ce type d’extension ; le bouton Rendre Principal permet de définir le logiciel qui doit être ouvert en premier lorsque vous définissez plusieurs éditeurs pour une même extension

• Cliquez sur OK

• Pour ouvrir un objet multimédia depuis la fenêtre de votre site, ouvrez la fenêtre par F8 et double cliquez sur cet objet



• Insérer des objets Flash ou Director – Pour insérer une animation Flash : Insertion - Médias - SWF ou Ctrl +

Alt +F (PC) ou Pomme Shift F (Mac)

– Sélectionnez le fichier .swf dans votre site puis cliquez sur OK

– Renseignez les attributs d’accessibilité puis cliquez sur OK

– Pour insérer une animation Director : Insertion – Médias – Shockwave : paramétrez l’animation de la même manière que pour une animation Flash

– Pour insérer des documents FlashPaper, utilisez la commande Insertion – Médias – FlashPaper



• Insérer une vidéo Flash– Adobe propose son propre

format de vidéo : Flash Vidéo(.flv). Ce format , qui associeperformance et qualité, est largement utilisé par les professionnels du Web.

– Insertion - Médias - FLV



• Insérer un objet Fireworks– Adobe Fireworks permet de créer rapidement et efficacement des

objets visuels pour le Web : bouton interactif, carte-image, rollover … en générant le code HTML et JavaScript nécessaire

– Insertion – Objets Image – HTML Fireworks

– Dans le champ Fichier HTML Fireworks, tapez le nom du fichier à incorporer ou cliquez sur le bouton Parcourir pour le sélectionner

– Cochez l’option Supprimer fichier après insertion pour effacer le fichier généré par Fireworks après son insertion dans Dreamweaver

– Cliquez sur OK



• Insérer un son/une vidéo– Insertion – Médias – Plug-in ou image plug-in du panneau Insertion –

catégorie Commun

– Sélectionnez le fichier audio ou le fichier vidéo à insérer



• Insérer des scripts– Les scripts vont permettre de déclencher diverses actions. Pour créer

un script, il faut utiliser un langage ; le plus répandu est actuellement le JavaScript.

– Pour visualiser l’insertion d’un script , cochez l’option Scripts dans les préférences des Eléments Invisibles (Editions/Dreamweaver –Préférences) puis : Affichage – Assistances visuelles – Eléments invisibles

– Pour insérer un script, cliquez à l’endroit voulu puis Insertion – HTML – Objets Script – Script ou cliquez sur du panneau Insertion –catégorie Commun



• Insérer des scripts– Si le script utilise des valeurs saisies dans un formulaire, il doit être

placé avant le formulaire

– Dans la boîte de dialogue Script, sélectionnez le langage utilisé dans la liste Type

– Saisissez le code du script dans la zone Contenu

– Cliquez sur OK (le script apparait alors avec son symbole)

– Pour associer un bouton au script, sélectionnez le bouton et cliquez sur le bouton Code de la barre d’outils Document pour afficher le code source

– Apportez si besoin d’autres modifications au code du document

– Pour tester le script, enregistrez le document et ouvrez-le dans le navigateur



• Les composants d’interface Spry– Le panneau réductible

• Ce composant d’interface propose très simplement d’afficher et de masquer des informations en cliquant sur le titre du panneau

• Positionnez le point d’insertion à l’emplacement du composant dans la page

• Insertion – Spry – Panneau réductible Spry ou panneau Insertion– catégorie Spry – bouton

• Saisissez ou insérez les éléments souhaités dans la zone Contenu; supprimez le texte Contenu s’il ne doit pas apparaître lorsque le panneau est ouvert



• Si besoin, sélectionnez le composant en le pointant puis en cliquant sur son étiquette Panneau réductible Spry : CollapsiblePanel1

1. Spécifiez le nom de votre composant inséré

2. Choisissez si le contenu du panneau doit être invisible ou non dans la page

3. Choisissez si le panneau doit être ouvert ou fermé à l’affichage de la page HTML dans un navigateur

4. Cochez cette option si vous souhaitez qu’à l’ouverture et à la fermeture du panneau, celui-ci s’ouvre ou se ferme progressivement



5. Enregistrez la page

6. Dreamweaver vous informe qu’il a copié , dans votre site local, les fichiers CSS et JavaScript nécessaires au bon fonctionnement du composant. Cliquez sur OK.

7. La personnalisation du panneau s’effectue via la feuille de style associée au composant. Son nom (SpryCollapsiblePanel.css) apparaît dans la barre d’outils des fichiers associés à la page HTML. Pour modifier les style CSS d’un élément, cliquez sur l’élément puis dans le panneau Propriétés, cliquez sur Modifier les CSS. Dans le panneau Styles CSS, modifiez .

8. Le bouton Affichage en direct de la barre d’outils Document vous permet d’afficher le panneau tel qu’il apparaîtra dans votre navigateur



• L’accordéonCe composant propose une interface originale pour afficher et masquer des informations diverses en cliquant simplement sur l’en-tête du panneau de l’accordéon. Nous pouvons dire qu’il reprend le principe du panneau réductible en utilisant plusieurs panneaux.

– Positionnez le point d’insertion à l’emplacement du composant dans la page

– Insertion – Spry – Accordéon Spry ou panneau Insertion – catégorie Spry – bouton

– Si besoin, sélectionnez le composant en le pointant puis en cliquant sur son étiquette Accordéon Spry : Accordion 1 pour afficher ses propriétés



• Vous pouvez :– Modifier le nom du composant

– Ajouter si besoin des panneaux à l’accordéon en cliquant autant de fois que nécessaire sur le bouton

• Pour chaque titre remplacer Etiquette x par le votre

• Saisissez ou insérez les éléments souhaités dans chaque panneau : pointez, si besoin, le titre du panneau concerné et cliquez sur le bouton (œil) pour afficher le contenu du panneau puis, insérez ensuite les contenus : supprimez le texte Contenu s’il ne doit pas apparaître lorsque le panneau est ouvert

• Enregistrez et cliquez sur OK

• SpryAccordion.css (feuille .css associée à ce composant)



• Le panneau à onglets Spry– Ce composant propose une interface avec navigation classique en

onglets.

– Positionnez le point d’insertion dans la page

– Insertion – Spry – Panneau à onglet Spry ou panneau Insertion –catégorie Spry – bouton

– Si besoin, sélectionnez le composant en le pointant puis en cliquant sur son étiquette Panneaux à onglet Spry : TabbedPanels1 pour afficher ses propriétés

– SpryTabbedPanels.css (feuille Css associée à ce composant)



• L’info-bulle – Ce composant d’interface permet d’afficher une info-bulle riche en contenu au

survol d’un lien avec la souris

– Placez le point d’insertion là où doit être le composant

– Insertion – Spry – Info-bulle Spry

– Ou, dans le panneau Insertion, dans la catégorie Spry, cliquez sur le bouton Info-bulle Spry

– Nommez le composant dans le panneau Propriétés .

– Le composant nécessite un lien texuel. Vous devez le saisir à la place du texte par défaut qui est inséré lors de l’ajout du composant : Placer le déclencheur de l’info-bulle ici

– Dans la zone de contenu de l’info-bulle Placer le contenu de l’info-bulle ici, saisissez le contenu qui doit apparaître au survol de la souris



• Paramétrer l’info-bulle– Sélectionnez le widget en cliquant sur son en-tête bleu. Dans le

panneau Propriétés, dans le champ Déclencheur, vous visualisez le nom du texte qui va déclencher l’info-bulle.

– Dans cet exemple, le déclencheur n’a pas été renommé, il utilise donc le nom par défaut : #sprytrigger 1

– Toute la mise en forme de l’info-bulle est réalisée avec une feuille de style CSS associée au composant. Dans la barre d’outils des fichiers associés à la page HTML utilisant ce composant, vous pouvez accéder à cette feuille de style : SpryTooltip.css



• Les bibliothèques d’objets– Gérer les actifs

• Les Actifs représentent une « super bibliothèque» qui permet de classer des éléments récurrents (image, script, animation Flash, lien externe, couleur … ) et de les réutiliser par un simple cliqué-glissé.

• Il faut impérativement avoir coché l’option Activer le cache dans la fenêtre de définition des paramètres su site (Site –Gérer les Sites – Modifier)

• Fenêtre – Actifs

• Activez, si nécessaire, l’option Site



– Gérer les favoris

• Les favoris vous permettent de grouper les éléments récurrents de manière logique.

• Pour ajouter un élément aux Favoris, sélectionnez-le dans le panneau Actifs puis cliquez sur le bouton visible en bas à droite du panneau

• Dreamweaver vous informe que l’élément a été ajouté aux Favoris

• Pour visualiser la liste des Favoris, activez la liste correspondante



– Utiliser la bibliothèque • La bibliothèque permet de stocker des éléments récurrents afin de les

insérer rapidement dans une page. En cas de modification d’un élément de la bibliothèque, toutes les occurrences sont mises à jour dans le site.

• Pour ajouter un élément d’une page dans la bibliothèque, sélectionnez-le, cliquez sur le bouton du panneau Actifs puis cliquez sur + ou faites glisser la sélection dans la bibliothèque. Nommez cet élément puis validez par Entrée

• Pour insérer un élément de la bibliothèque dans un document dans le panneau Actifs, sélectionnez le nom de l’élément à ajouter et cliquez sur le bouton Insérer ou faites glisser son icône sur le document



• Créer et modifier un modèle

Un modèle sert de base de conception pour une nouvelle page. Dans ce

modèle vous définissez des zones éditables (Régions modifiables que vous pouvez modifier quand vous utilisez le modèle) et d’autres non éditables (Régions verrouillées).Si vous modifiez une partie d’un modèle, toutes les

pages du site basées sur ce modèle seront mises à jour.



• Etapes nécessaires à la création du modèle– Créez une page qui servira de modèle

– Fichier – Enregistrer comme modèle

• ou panneau Insertion – catégorie Commun

– Sélectionnez le Site où doit être enregistré le modèle, tapez le nom du modèle dans la zone Enregistrer sous et cliquez sur Enregistrer

– La barre de titre de la fenêtre du document rappelle que le document actif est un modèle. Dreamweaver crée dans le dossier de votre site un sous-dossier nommé Templates. Chaque modèle y est représenté par un fichier avec l’extension .dwt

– Le modèle créé fait partie des éléments actifs du site : cliquez sur le bouton Modèles du panneau Actifs pour y accéder



– Dans un nouveau modèle, toutes les régions sont verrouillées. Pour que le modèle soit exploitable, vous devez rendre modifiables certaines régions. Pour rendre modifiable une zone, sélectionnez-la pour rendre modifiable un endroit du document, cliquez à l’endroit voulu.

– Insertion – Objets de modèle – Région modifiable

• ou option Région modifiable dans la liste du bouton correspondant du panneau Insertion – catégorie Commun

– Tapez le nom de la zone et cliquez sur OK

– La zone modifiable apparaît en Surbrillance.

– Atteindre une région modifiable: sélection puis Modifier – Modèles puis cliquez sur le nom de la région à atteindre ou cliquez directement dans la zone modifiable



– Rendre non modifiable une région crée modifiable, sélection puis Modifier – Modèles – Supprimer le marqueur de modèle

– Enregistrez les modifications apportées au modèle puis fermez la page correspondante.

– Pour modifier, renommer, supprimer … un modèle, procédez comme pour un élément quelconque du panneau Actifs

– Vous pouvez créer un modèle qui en dépend d’un autre : créez un modèle de base puis créez un document basé sur ce modèle que vous enregistrez en tant que modèle. Ce dernier est alors un modèle imbriqué. Si vous modifiez le modèle de base, Dreamweaver vous proposera la mise à jour des modèles imbriqués



• Utiliser un modèle – Pour créer un nouveau document à partir d’un modèle, faites Fichier –

Nouveau

– Dans la catégorie page issue d’un modèle, sélectionnez le Site qui contient le modèle à utiliser puis cliquez sur son nom dans la liste Modèles du site

– Décochez l’option Mettre la page à jour quand le modèle est modifié si vous souhaitez créer un document indépendant du modèle et qui ne tient pas compte des régions définies dans le modèle

– Cliquez sur Créer



– Dreamweaver crée un nouveau document dans lequel les régions modifiables apparaissent avec un cadre bleu accompagné du nom de la région. La page est entourée d’un cadre jaune comportant la mention Modèle : nom du modèle

– Pour appliquer un modèle à un document existant, utilisez la commande Modifier – Modèles – Appliquer le modèle à la page, sélectionnez le modèle à appliquer puis cliquez sur Sélectionner ou, accédez à la catégorie Modèles du panneau Actifs, sélectionnez le modèle voulu puis cliquez sur le bouton Appliquer ou faites glisser l’icône du modèle sur la page

– Si le document n’est pas vierge, Dreamweaver vous demande où placer les éléments présents ; dans la liste régions modifiables, sélectionnez celle qui doit accueillir ces éléments puis cliquez sur OK


• Créer des boîtes Div


Créer des boîtes div

• La création et l’utilisation d’éléments PA

Les éléments PA pour Position Absolue répondent au besoin de

pouvoir placer des « conteneurs » n’importe où dans la page, de façon très précise. Un élément PA dans Dreamweaver peut contenir du texte, des images, des animations …

– Lorsque vous créer un élément PA, un élément HTML <div> est créé avec un identifiant unique qui fait le lien avec un style CSS créé en même temps par Dreamweaver

– Dans Dreamweaver, les éléments PA ont un positionnement absolu : par rapport aux bords de la page et au-dessus du contenu de la page



• Créer et formater un élément PA– Cliquez à l’endroit voulu de votre page

– Insertion - Objets mise en forme - Div PA ou du panneau Insertion – catégorie Mise en forme

– Faites un cliqué-glissé dans votre page, du coin supérieur gauche au coin supérieur droit

– Pour créer successivement plusieurs éléments PA, cliquez sur le bouton , appuyez et maintenez la touche Ctrl (PC) ou Commande (Mac) enfoncée et dessinez vos éléments PA les uns après les autres sans relâcher la touche



• Créer et formater un élément PA

– Pour paramétrer l’élément PA, sélectionnez-le puis utilisez le panneau Propriétés :



• Créer et formater un élément PA– Pour modifier la visibilité de cet élément PA, cliquez sur le menu

déroulant Visib. :

• default : ne précise pas l’attribut

• inherit : l’élément PA hérite de l’attribut de l’élément PA qui le contient

• visible : l’élément PA est immédiatement visible dans la page

• hidden : l’élément PA sera masqué à l’affichage

– Dans le champ Débord, indiquez ce que doit faire le navigateur quand le contenu de l’élément PA est trop grand par rapport aux tailles spécifiées :



• Créer et formater un élément PA• visible : Agrandit la taille de l’élément PA pour voir tout son

contenu

• hidden : le contenu qui déborde sera masqué

• scroll : affiche dans tous les cas des barres de défilement

• auto : affiche des barres de défilement uniquement si c’est nécessaire

– Pour découper le contenu de l’élément PA, renseignez la zone Déc :

• G : Début de la surface visible à gauche depuis la gauche de l’élément PA

• D : Fin de la surface visible à droite depuis la gauche de l’élément PA



• Créer et formater un élément PA• S : Début de la surface visible en haut depuis le haut de l’élément

PA

• B: Fin de la surface visible en bas depuis le haut de l’élément PA

• Vous pouvez aussi modifier certains paramètres dans le panneau Eléments PA (Fenêtre – Eléments PA) ou F2 ou dans la boîte de dialogue Préférences – catégorie Eléments PA



• Créer et formater un élément PA– Sélectionner un élément PA

• Activez l’affichage des éléments invisibles : Edition (PC)/ Dreamweaver (Mac) – Préférerences – catégorie Eléments invisibles, cochez l’option Points d’ancrage des éléments PA

• Veillez à ce que les options Contour des éléments PA et Eléments invisibles soient cochées dans le menu Affichage – Assistances visuelles

• Pour sélectionner un élément PA, cliquez sur son élément invisible ou cliquez sur son nom dans le panneau Eléments PA ou quand le point d’insertion est dans l’élément PA, cliquez sur sa poignée de sélection située en haut à gauche de l’élément PA*



• Créer et formater un élément PA– Gérer les éléments PA

• Pour déplacer des éléments PA, sélectionnez-les puis, dans le panneau Propriétés, modifiez les valeurs des zones de saisie G et S* ou faites glisser le rectangle de sélection de l’élément PA ou utilisez les touches fléchées du clavier

• Pour redimensionner des éléments PA, dans le panneau Propriétés, tapez de nouvelles valeurs dans les zones de saisie L et H ou faites glisser une des poignées de redimensionnement

• Pour appliquer aux éléments PA, la même largeur ou la même hauteur que celle du dernier élément PA sélectionné, utilisez Modifier –Réorganiser – Même largeur ou Même hauteur


Créer des boîtes Div

• Pour aligner des éléments PA les uns par rapport aux autres, utiliez Modifier – Réorgansier – Aligner à gauche ou à droite ou en haut ou en bas

• L’alignement se fait par rapport au dernier élément PA sélectionné .

– Imbriquer les éléments

• Pour que l’imbrication soit automatique lorsqu’un élément PA est dessiné au-dessus d’un autre, dans les préférences (Edition (PC) ou Dreamweaver catégorie Eléments PA (Mac), cochez l’option Imbriquer en cas de création d’une div PA



• La création et l’utilisation des balises Div – Vous pouvez utiliser des balises div pour créer des blocs de mise en forme CSS et

les placer dans votre document. Cette méthode est utile si une feuille de style CSS existante contenant des styles de positionnement est associée à votre document. Dreamweaver vous permet d'insérer rapidement une balise div et de lui appliquer des styles existants.

– Dans la fenêtre de document, placez le point d'insertion à l'endroit où vous voulez insérer la balise div.



• Effectuez l’une des tâches suivantes :

– Choisissez Insertion -Objets mise en forme-Balise Div.

– Dans la catégorie Mise en forme du panneau Insertion, cliquez sur le bouton Insérer la balise Div .

• Parmi les options suivantes, définissez celles de votre choix : – Insérer Permet de choisir l'emplacement de la balise div et le nom de la balise

s'il ne s'agit pas d'une nouvelle.

– Classe Affiche le style de classe actuellement appliqué à la balise. Si vous avez associé une feuille de style, les classes qui y sont définies s'affichent dans la liste. Ce menu permet de sélectionner le style à appliquer à la balise.



– ID : vous permet de modifier le nom utilisé pour identifier la balise div. Si vous avez associé une feuille de style, les ID qui y sont définis s'affichent dans la liste. Les ID des blocs déjà présents dans votre document ne sont pas

– Nouvelle règle de CSS : ouvre la boîte de dialogue Nouvelle règle CSS.

– Cliquez sur OK. La balise div s'affiche dans votre document sous la forme d'une zone contenant du texte d'espace réservé. Lorsque vous déplacez le pointeur sur le bord de cette zone, Dreamweaver la met en surbrillance.

– Si la balise div est placée de manière absolue, elle devient un élément PA. Vous pouvez modifier les balises div qui ne sont pas à positionnement absolu.



• Affichage et modification des règles appliquées à une balise div

• Procédez de l'une des manières suivantes pour sélectionner la balise div :

– Cliquez sur la bordure de la balise div.

– Recherchez la surbrillance afin de voir les bordures.

– Cliquez à l'intérieur de la balise div et appuyez sur les touches Ctrl+A(Windows) ou Commande+A (Macintosh) à deux reprises.

– Cliquez à l'intérieur de la balise div, puis sélectionnez-là à partir du sélecteur de balises figurant au bas de la fenêtre du document.

– Choisissez Fenêtre -Styles CSS pour afficher le panneau Styles CSS, si besoin est. Les règles appliquées à la balise div s'affichent dans le panneau.

– Effectuez les modifications nécessaires.



• Insérer une boîte flottante– Créer le style qui sera utilisé

– Cliquez dans ou à la fin du texte de la boîte à laquelle la nouvelle sera insérée puis Insertion – Objets mise en forme –Balise Div ou utilisez le panneau Insertion pour insérer la balise Div


• Le code HTML


Le code HTML

• La découverte du code HTML

A l’heure actuelle, les concepteurs de sites Web son tde plus en plus soucieux de créer

des sites conformes aux standards du Web, tels qu’ils sont décrits dans les recommandations du W3C. Les navigateurs reconnaissent de mieux en mieux les standards du W3C et permettent ainsi de créer des sites performants au graphique identique sur toutes les plateformes. Le concepteur doit donc être vigilant et vérifier la validité du code généré par rapport aux standards.

• Utiliser la référence HTML– Pour utiliser la référence HTML dans la page : Fenêtre – Résultats –

Référence

– Sélectionnez la référence que vous souhaitez utiliser

– Sélectionnez l’élément HTML voulu


Le code HTML

• Utiliser la référence HTML– Sélectionnez l’option Description pour avoir des informations

générales sur la balise ou sélectionnez un attribut pour avoir des informations sur celui-ci

– Pour utiliser la référence HTML d’un élément de la page, sélectionnez cet élément puis faites Shift F1*


Le code HTML

• Visualiser le code utilisé pour la mise en forme d’un élément – Affichage – Code et Création ou Fractionner

– Pour visualiser les éléments HTML employés pour la mise en forme d’un élément, sélectionnez cet élément : la barre d’état affiche les balises qui s’appliquent à l’élément

– Pour sélectionner une balise d’un élément sélectionné, cliquez sur la balise dans la barre d’état Le code correspondant est sélectionné et s’affiche en surbrillance.

– Pour accéder à la balise de niveau supérieur ou inférieur, faites Edition –Sélectionner balise parente ou Sélectionner enfant

– Vérifier le code : Fichier- Valider – Marqueur ou Shift F6. Le panneau Validation affiche les erreurs trouvées .

– : valider le site local actuel entier


Le code HTML

• La validation et l’optimisation du code HTML– Paramétrer les corrections

• Vous pouvez paramétrer le comportement de Dreamweaver vis-à-vis des corrections qu’il effectue dans le code source d’une page HTML importée, au moment de l’ouverture de celle-ci

• Edition (PC)/ Dreamweaver (Mac) – Préférences – catégorie Correction du code


Le code HTML

• La validation et l’optimisation du code HTML


Le code HTML

• Nettoyer le code source

– Pour supprimer le code source inutile : Commande – Nettoyer le code XHTML

– Cochez les éléments que vous souhaitez supprimer puis cliquez sur OK

– Pour nettoyer du code HTML provenant de Microsoft Word, utilisez Commandes – Nettoyer HTML Word

• Vérifier la compatibilité du code en fonction du navigateur

Si vous créez une page en utilisant les technologies récentes (D-HTML, CSS, multimédia, Ajax…) les navigateurs d’ancienne génération ne pourront pas afficher correctement ces éléments. Il est donc nécessaire de vérifier quels sont ces éléments non reconnus en fonction de la version des navigateurs.


Le code HTML

• Choisir les types d’erreur à afficher – Pour préciser les types d’erreurs à signaler , faites Edtion (PC)/Dreamweaver

(Mac) – Préférences – Programme de validation et cliquez sur le bouton Options

– Dans la zone Afficher, cochez les options voulues

– Cliquez sur OK

• Choisir les navigateurs– Fenêtre – Résultats – Compatibilité avec les navigateurs

– Dans le menu local de la fenêtre, sélectionnez Paramètres

– Cochez les navigateurs à utiliser et la version

– Cliquez sur OK


Le code HTML

• Vérifier la compatibilité dans un document ouvert

– Dans le panneau Compatibilité avec les navigateurs, choisissez dans le menu local , l’option Vérification de la compatibilité entre les navigateurs

• Vérifier l’accessibilité du document

– Le W3C a émis des recommandations : http://w3.org/TR/WCAG10

– Vous pourrez trouver sur ce site tous les éléments et attributs qui peuvent être utilisés pour avoir un site accessible

– Fichier - Vérifier la page – Accessibilité

– Ou, dans la barre d’outils Document de la page, utilisez le bouton Vérifier la page et choisissez Vérifier l’accessibilité

– Enregistrer le rapport au format XML en cliquant sur le bouton Enregistrer le rapport


http://w3.org/TR/WCAG10

Le code HTML

• Convertir au format XHTML– Ouvrez le document au format HTML puis Fichier – Convertir

– Choisissez la version de l’XHTML à utiliser puis cliquez sur OK


• Mise en ligne du site


Mise en ligne du site

• Généralités

Quand vous publiez un site, il faut le faire en le référençant. Pour ce faire,

vous avez deux possibilités : les annuaires et les moteurs de recherche. Quand un moteur de recherche doit indexer votre site, un « robot » accède au serveur de votre site et indexe toute une série de mots qui alimente de gigantesques bases de données.

Les mots indexés sont entre autres ceux du titre des pages, les mots les plus usités dans vos pages et ceux des balises <meta> qui se placent dans l’en-tête du document. Ces balises contiennent ce que l’on appelle des méta-informations.



• Insérer des méta-informations – Insérer des mots clés

Il est nécessaire d’insérer pour chacune des pages, une dizaine de mots-clés qui les caractérisent.

• Insertion – HTML – Balises d’en-tête – Description

• Tapez un texte décrivant votre page puis cliquez sur OK

– Insérer une description

La description, composée d’une vingtaine de mots, s’affichera dans certains moteurs de recherche, dont Google

• Insertion – HTML – Balises d’en-tête – Description

• Tapez un texte décrivant votre page puis cliquez sur OK



• Insérer des balises méta

Vous pouvez créer vos propres méta informations.

– Insertion – HTML – Balises d’en-tête – Meta

• Insérer un rafraîchissement

Au cas où votre site change de serveur, vous pouvez provoquer un basculement automatique vers la nouvelle adresse en insérant un rafraîchissement dans la page d’accueil

– Insertion – HTML – Balises d’en-tête – Actualiser



• Visualiser/ modifier les informations – Affichez la barre des icônes d’en-tête par Affichage – Contenu de l’en-tête ou

Ctrl Shift H (PC) ou Pomme Shift H (Mac)

– Cliquez sur l’icône correspondant au type d’informations à modifier et effectuez les modifications dans le panneau Propriétés

• Configurer la relation avec le serveur – Site – Gérer les sites

– Sélectionnez le site à publier puis Modifier

– Dans l’onglet Avancé, sélectionnez la catégorie Infos distantes

– Pour une publication via FTP, dans le menu déroulant Accès, choisissez FTP



• Afficher les fichiers locaux et distants – Cliquez sur l’icône

– Pour gérer votre site, utilisez les outils mis à votre disposition

– Pour ajouter des informations dans la fenêtre du site, choisissez Site – Gérer les sites. Sélectionnez votre site et cliquez sur Modifier . Sélectionnez la catégorie Colonnes en mode Fichier

• Publication et maintenance du site – Publier le site

• Dans le cas d’un accès via FTP, connectez-vous au serveur en cliquant sur l’icône

• Dans la partie Fichiers locaux, sélectionnez l’icône du dossier racine de votre site

• Site – Placer puis cliquez sur le bouton OK



• Mettre le site à jour – Affichage – Actualiser du menu local ou

– Pour visualiser les fichiers modifiés localement, sélectionnez le dossier de votre site dans la liste des Fichiers locaux puis Edition – Sélectionner locaux plus récents du menu local

– Pour visualiser les fichiers publiés qui sont plus récents que les fichiers locaux : dans la liste des fichiers dans le Site distant, sélectionnez le dossier de votre site puis Edition – Sélectionner distants plus récents

– Pour publier des fichiers qui ont été modifiés ou ajoutés sur votre machine en local, sélectionnez-les dans la liste des Fichiers locaux et cliquez sur



• Mettre le site à jour – Pour acquérir sur votre machine locale des fichiers qui ont été

modifiés sur le serveur, établissez si besoin la connexion

– Dans la liste des fichiers du Site distant, sélectionnez les fichiers à récupérer : Site –Acquérir ou ou faites glisser les fichiers dans la partie Fichiers Locaux

– Pour effectuer une synchronisation, si vous souhaitez ne synchroniser que quelques fichiers ou dossiers, sélectionnez-les : Site – Synchroniser du menu local du panneau ou icône de synchronisation



• Retrouver des fichiers Au cas où l’organisation du site serait différente entre le dossier local et le dossier publié sur le serveur, il peut être utile de retrouver rapidement la correspondance d’un fichier.

– Pour retrouver l’emplacement d’une page ouverte dans l’arborescence du dossier local ou sur le serveur, utilisez Site – Repérer dans le site ou cliquez sur le bouton de la barre d’outils Document et choisissez Repérer dans le site

– Pour retrouver un fichier sur le serveur, sélectionnez le fichier local à retrouver dans la liste Fichiers locaux puis Edition – Retrouver sur le site distant du menu local du panneau Fichiers

– Pour retrouver un fichier dans le dossier local, sélectionnez le fichier publié dans la liste des fichiers dans le Site distant puis Edition – Retrouver sur le site local du menu local



• Créer un rapport de site Lors de la création d’un site Web avec Dreamweaver, vous avez la possibilité de créer des rapports permettant de compiler des problèmes éventuels de syntaxe au niveau du code HTML généré (éléments redondants, éléments vides …) et comprenant des informations sur le travaill collaboratif – Site – Rapports


Merci de votre attention


LES BASES DE DREAMWEAVER

Documents

Transcript of LES BASES DE DREAMWEAVER