Le logiciel Dreamweaver - Jean

Le logiciel Dreamweaver
Jean-Philippe PERNIN
Université Stendhal
Département Informatique Pédagogique
Bureau I 113
Mél. : [email protected]
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3
p2
Logiciels de création de site
• Editeur simple de texte
– Bloc notes
• Editeurs de code avec coloration syntaxique
– gratuits : NotePad++, Scite, Context
• Logiciels WYSIWYG (What you see is What You Get)
– Payants :
• Dreamweaver : la référence des professionnels
– Outil riche mais parfois complexe
– Gratuits :
• Komposer
– Assez rudimentaire mais suffisant pour petits sites
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3
p3
L'environnement de travail-type
Onglets
d'insertion
d'éléments
Onglets des
fichiers ouverts
Fenêtre
d'arborescence
des fichiers
Fenêtre Edition
du code HTML
Fenêtre Edition
en mode visuel
Fenêtre
Propriétés de
l'élément courant
sélectionné
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3
p4
Les principales fenêtres
Fenêtres Principales :
Insertion
Propriétés
Fichiers
Gérér les feuilles de style
Styles CSS
Gérer le positionnement (DIV)
Calques
Gérer les cadres
Cadres
Pour fermer un panneau
Clic droit +
<Fermer le groupe de panneaux>
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3
p5
Quelques touches à connaître
• F4 : permet d'afficher uniquement la page en mode
édition
• F8 : Affichage de l'arborescence du site (Fichiers)
• F12: Aperçu dans le navigateur
• Dans toutes les situations
– Penser au bouton droit à partir duquel les principales actions
sont accessibles
– Utiliser la fenêtre de Propriétés au bas de l'écran pour
modifier l'élément courant
– Penser à sauvegarder tous les fichiers ouverts (menu
<Fichier>…<Enregistrer tout>
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3
p6
Avant de travailler dans Dreamweaver (DW)
• Créer ou recopier le répertoire et les sous-répertoires de son site sur
l'ordinateur, en local.
• Configurer si nécessaire Dreamweaver pour choisir le type "XHTML 1.0
transitional" :
– <Edition>…<Préférences>…<Programme de validation>
• dans DW :
– définir le site (pointer vers le répertoire principal du site)
– ou sélectionner dans DW le site déjà défini.
• créer une nouvelle page : choisir le type
"XHTML 1.0 transitional" dans les préférences si ce n'est pas l'option par
défaut.
• enregistrer le document "Enregistrer sous..." avant d'inclure des médias
(images etc.) :
– indispensable pour que DW crée des liens relatifs entre les fichiers
• pas d'espace, de caractère spécial ou accentué dans les noms de fichiers.
Attention : ceci est valable pour vos pages (.htm) mais aussi pour les fichiers
dépendants (images etc).
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3
p7
Une architecture type
• Très important : l'architecture du site doit permettre sa
maintenance aisée
Les fichiers sont placés dans des dossiers spécifiques
-Dossier images
-Dossier css
-Dossier pages (pouvant contenir des sous-dossiers)
• Les fichiers peuvent être déplacés a posteriori
– Les liens sont préservés de façon automatique
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3
p8
La gestion des liens sous Dreamweaver
• Utiliser bouton droit <créer un lien>
• Sélectionner
– Soit un fichier existant de votre site
– Soit un fichier externe
• Dans ce cas, il vous sera proposé de copier le fichier dans votre site. A
cette étape, il est très important de bien placer le fichier dans le bon
dossier
• Penser à vérifier, vérifier, vérifier votre code
– Ne jamais trouver de lien de type : file:///
<a href="file:///C:/0_JPHIL/pageExemple.html">exemple</a>
NON !
<a href="../pageExemple.html">exemple</a>
OUI…
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3
p9
La gestion des CSS avec Dreamweaver
• Créer une CSS externe vide
– Fichier…Nouveau…
• Enregistrer votre fichier CSS
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3
p 10
Lier une page avec une CSS
Bouton droit.. Gérer les styles…
puis
Joindre…Ajouter une feuille de style externe
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3
p 11
Mise au point de la CSS
2. Voir le résultat
1. Modifier la CSS
dans la page liée
Bouton droit… Styles CSS… Gérer les styles…