TD 1 : Prise en main du logiciel Dreamweaver - Jean

Transcription

Université Stendhal - Département Informatique Pédagogique - Jean-Philippe Pernin
TD 1 : Prise en main du logiciel Dreamweaver
OBJECTIFS :
•
•
•
•
•
•
1
•
Comprendre l’essentiel du fonctionnement de Dreamweaver
Savoir créer et appliquer une feuille de style
Savoir modifier des styles
Savoir créer des liens entre pages
Savoir nommer des fichiers
Savoir placer les fichiers dans des dossiers adaptés
RAPPELS ET DEFINITIONS
Un site est un ensemble de pages HTML liées entre elles et accessibles depuis une page d’accueil. Exemple :
index.html
Accueil
presentation.html
liste.html
Liste des
auteurs
Présentation
auteur_1.html
auteur_2.html
Auteur 1
•
•
•
•
Auteur 2
Chaque page doit avoir un nom de fichier avec un suffixe ".html" ou "htm" (option retenue par Dreamweaver)
La page d'accueil s'appelle toujours "index.html" ou "index.htm" (cela permet de ne pas l'écrire dans l'URL)
Un lien permet de naviguer d’une page à l’autre
Le code HTML d’un lien est le suivant pour naviguer d'une page vers une autre page
<a href="presentation.html"> voir la présentation </a>
Dans l'exemple ci-dessus il s'agit d'un lien placé dans la page <accueil.html> qui permet d'aller vers la page
<presentation.html>
1.1
Règles de nommage
Il faut prêter une attention particulière au nommage de chaque fichier afin que le site puisse fonctionner sur n'importe
quel serveur. Les règles suivantes peuvent être observées :
• N'utiliser que des lettres minuscules (a..z) et des chiffres (0..9)
• Ne jamais mettre d'espace dans un nom de fichier
• Pour séparer des mots dans le nom du fichier utiliser le caractère _ (souligné bas du 8 ou underscore en anglais),
par exemple <liste_voitures.html>
• Bien entendu le nom du fichier doit correspondre au nom du lien indiqué dans la page d'origine.
-1/8-
2
LE PARAMETRAGE DE DREAMWEAVER
Il est important dès la première utilisation de DW (Dreamweaver), de bien vérifier l’encodage choisi pour les pages.
Pour cela, cliquer sur <Edition>…><Préférences> puis sélectionner <Programme de validation>…<XHTML 1.0
Transitional> puis <OK>
3
CREATION DU SITE DREAMWEAVER
Le logiciel DW prend en charge à votre place la gestion du code HTML, des liens, des feuilles de styles, etc. Afin qu’il
travaille correctement, il est indispensable de créer un « site dreamweaver » qui contiendra tous vos fichiers. Ne
placez jamais de fichiers en dehors de ce site.
Cliquez sur <Site Dreamweaver> sur
la page d’accueil.
Ou menu <Site>, <Gérer les sites>,
<Nouveau>
Renseignez les écrans suivants en indiquant les éléments ci-dessous.
-2/8-
1. Le nom de votre site
2. Non, je ne veux pas utiliser de technologie de serveur
3. Choisissez le dossier racine dans lequel va se placer votre site.
4. Cochez <Aucun> pour le serveur distant
Retenez-bien cette adresse !! C'EST ESSENTIEL
5. Les informations résumées de votre site
-3/8-
4
CREATION DE LA PAGE D’ACCUEIL DE VOTRE SITE
•
Choisissez dans le menu <Fichier><Nouveau> puis <Page de base>..<HTML>
•
•
Pensez à sauvegarder votre fichier dès que celui-ci est créé.
Nommez le <index.htm>. Le fichier apparaitra dans la liste des fichiers de votre site.
-4/8-
5
EDITION DU CONTENU DE LA PAGE D’ACCUEIL DE VOTRE SITE
Utilisez uniquement les balises de base (P, H1, H2, H3, etc.) pour structurer votre texte. N’appliquez aucune règle de
style à ce niveau (pas de gras, pas de couleur, etc.). Tout doit être réglé avec les feuilles de styles ultérieurement.
Pour créer le code vous disposez de deux onglets <Code> et <Création>, l’onglet <Fractionner> combinant les deux
précédents. La vue code permet de travailler en mode « direct » (WYSIWYG).
6
APPLICATION D’UNE FEUILLE DE STYLE
Il faut en premier lieu créer la feuille de style. Bouton droit puis <Style CSS><Gérer les styles>
-5/8-
Pour créer la feuille de
style :
• cliquez sur le bouton
<Nouveau>
• sélectionnez le dossier dans lequel va être placée
votre feuille de style CSS
• donnez le nom à votre feuille de style, par
exemple <mafeuille.css>
• cliquez sur <Enregistrer>
• Cliquez sur <Terminer>
Votre feuille de style doit maintenant exister dans votre arborescence
7
MODIFICATION DU STYLE D’UNE BALISE EXISTANTE
Rappel : les feuilles des styles permettent de modifier la présentation des balises existantes ou bien la présentation de
blocs de texte délimités par des balises spécifiques <div> et <span>.
Supposons que l’on veuille modifier les styles BODY et H2 :
•
•
•
•
Bouton droit puis <Style CSS><Gérer les styles> puis <Nouveau>
Sélectionnez <Balise> dans Type de sélecteur
Sélectionnez <Définir dans> …<mafeuille.css> (nom à remplacer par votre feuille de styles)
Choisissez le nom de la balise dont vous voulez modifier le syle et cliquez sur OK
-6/8-
7.1
Modification du style BODY
On va ici modifier les caractéristiques de la police de caractères pour l'ensemble des balises de la page.
7.2
Modification du style H2
On va appliquer ici un style spécifique pour la balise H2
Le résultat obtenu est le suivant.
Vous pouvez également voir le résultat final dans un navigateur en cliquant sur <Fichier><Aperçu dans le navigateur>
ou en appuyant sur la touche F12
-7/8-
8
8.1
GESTIONS DES FICHIERS ET LIENS
Gestions des fichiers, des dossiers
Vous pouvez à tout moment réorganiser les fichiers. Par exemple, on veut créer un dossier <css> dans lequel on veut
placer le fichier <mafeuille.css>.
•
•
•
•
Sélectionnez la racine du site et cliquez sur bouton droit puis <Nouveau dossier>
Donnez le nom <css> au dossier créé
Glissez le fichier <mafeuille.css> vers le dossier <css>.
Glissez la boite de dialogue <Mettre à jour les fichiers> répondre <Mettre à jour>.
Les contenus des dossiers ainsi que les liens sont automatiquement mis à jour.
8.2
Création d'un lien
• Créez un dosser <pages>
• Créez une nouvelle page <presentation.htm> dans lequel vous placez le texte de votre choix.
• Insérez du texte une image dans cette page <insertion><images>. Placez cette image dans un nouveau dossier
images.
• Créez un lien depuis le texte <Présentation générale> de la page d'accueil vers la page <presentation.htm> :
bouton droit puis <créer le lien> puis choisir la page <presentation.htm>.
• Testez le lien avec votre navigateur (appuyez sur F12)
• Vous devez obtenir le résultat suivant :
-8/8-

TD 1 : Prise en main du logiciel Dreamweaver - Jean

Transcription

Documents pareils

Formation Adobe Dreamweaver - Création de site web

Programme Dreamweaver initiation

HTML, Initiation

Formation Dreamweaver – Perfectionnement

DreamWeaver Dynamiser un site

carte mere - Jean

Le logiciel Dreamweaver - Jean

Créer son site Web avec DREAMWEAVER

Programme de formation DreamWeaver initiation