Initiation à Dreamweaver

Dimension: px

Commencer à balayer dès la page:

Download "Initiation à Dreamweaver"

Liliane Joseph
il y a 8 ans
Total affichages :

1 Benjamin Godefroy Redouane Zarghoune Initiation à Dreamweaver SI28 Ecriture interactive et multimédia Automne 2004

2 Organisation du TD Préambule : Introduction au HTML Présentation de Dreamweaver Exercices Création d un site web Ajout de texte Insertion d images Création de tableaux Création de liens Création de cadres

3 Introduction au HTML HTML : Hypertext Markup Language Hypertexte : possibilité de relier deux éléments textuels par un lien (nœud) Langage de balisage simple (markup language) Dérivé du SGML (premiers documents structurés) Utilisé pour décrire les pages web (texte riche, inclusion d images et autres médias)

balisage simple (markup language) Dérivé du SGML (premiers documents

4 Introduction au HTML <H1> à <H6> <BR> <P> <B>mot</B> <CENTER>mot</CENTER> <BODY>document</BODY> Titres par importance décroissante Retour à la ligne Crée un nouveau paragraphe Met "mot " en gras Centre "mot" sur la page Définit le corps du document <UL> <LI>ligne 1</LI> Liste à puces <LI>ligne 2</LI> </UL> <a href= site> Cliquez ici</a> Création d un lien

nouveau paragraphe Met "mot " en gras Centre "mot" sur la page Définit le corps du

5 Introduction au HTML Il est donc possible de créer un site web en codant directement en HTML sur le bloc-notes par exemple <html> <head> <title>simple site</title> </head> <body> <h1>ceci est un site web minimaliste</h1> <p>je l'ai cree entierement en code HTML</p> </body> </html>

<title>simple site</title> </head> <body> <h1>ceci est un site web

6 Titre dans l en-tête Body Titre h1

7 Présentation de Dreamweaver Le tisseur de rêves est un éditeur WYSIWYG (what you see is what you get) destiné à la conception, au codage et au développement de sites, de pages et d'applications Web. Il propose des outils qui vous aideront à créer des applications Web. Les fonctions d'édition visuelles de Dreamweaver vous permettent de créer rapidement des pages sans rédiger une seule ligne de code. Si vous préférez faire appel au codage manuel, Dreamweaver intègre également de nombreux outils et fonctions de codage.

Il propose des outils qui vous aideront à créer des applications Web.

8 Insertion d objets (images, tableaux, calques,...) Barre d outils du document Sélecteur de balises Espace de travail Propriétés de l objet sélectionné 5 panneaux rétractables

9 Présentation de Dreamweaver La barre d outils regroupe toutes les fonctions La barre Insertion contient des boutons permettant d'insérer divers types d'«objets» dans un document. Chaque objet est une portion de code HTML vous permettant de définir des attributs lors de son insertion.

divers types d'«objets» dans un document.

10 Présentation de Dreamweaver La barre d'outils du document permet d'accéder aux différents modes d'affichage de la fenêtre du document (mode Création ou mode Code), de définir les différentes options d'affichage et d'effectuer certaines opérations courantes, telles que la prévisualisation dans un navigateur. L inspecteur de propriétés permet de voir et de modifier les propriétés de l'objet ou du texte sélectionné (chaque objet contient des propriétés différentes).

certaines opérations courantes, telles que la prévisualisation dans un navigateur.

11 Présentation de Dreamweaver Le sélecteur de balises affiche la hiérarchie des balises entourant la sélection courante Les 5 panneaux rétractables permettent Gestion des styles et des comportements - Inspecteur de balises - Bibliothèques de code Utilisation de données dynamiques - Gestion des pages - Gestion des ressources du site

Gestion des styles et des comportements - Inspecteur de balises - Bibliothèques de

12 Exercice 1 : Création d un site web Site / Nouveau site Utiliser l assistant et suivre les étapes : Entrer le nom du site Ne pas utiliser de technologie serveur Modifier les copies locales et indiquer le répertoire du site Nous travaillerons sur un serveur local, donc donnez encore une fois le répertoire de votre site Ne pas activer l archivage et l extraction Terminer

locales et indiquer le répertoire du site Nous travaillerons sur un serveur local, donc

13 Exercice 1 : Création d un site web Le site web est en place, ne manquent plus que les pages Fichier / Nouveau / Page de base / HTML Enregistrer la page en lui donnant un nom La page apparaît dans l arborescence du site

14 Exercice 2 : Ajout de texte En mode création, il est possible d ajouter du texte dans l espace de travail comme dans n importe quel éditeur de texte (Word, bloc-notes, ). On peut ensuite le mettre en forme via le menu texte, le panneau propriétés ou d un simple clic droit. Pour avoir un aperçu dans le navigateur cliquer ici.

15 Exercice 2 : Ajout de texte On peut aussi faire des listes : Texte / Liste Pour modifier le fond : Modifier / Propriétés de la page Et si on ajoutait des images???

17 Exercice 3 : Insertion d images On peut insérer des images pour illustrer son site web. Pour cela, il suffit d aller à Insertion / Image ou encore de cliquer sur cette icône:

18 Exercice 3 : Insertion d images Pour positionner une image plus précisément, il faut créer un calque en cliquant ici Dessiner un calque, le positionner et faire glisser l image dedans Les propriétés du calque

en cliquant ici Dessiner un calque, le positionner

20 Exercice 4 : Création de tableaux Cliquer ici ou Insertion / Tableau Rentrer le nombre de lignes et de colonnes Les propriétés du tableau

22 Exercice 5 : Création de liens Cliquer ici ou sur Insertion / Hyperlien Rentrer le nom et l adresse du lien Il est aussi possible de cliquer droit sur un texte sélectionné (ou une image) puis «créer le lien» pour affecter un lien à du texte déjà tapé

23 Exercice 5 : Création de liens Vous pouvez aussi faire des liens vers d autres sites. Il faut pour cela que le lien soit relatif à la racine du site

24 Exercice 5 : Création de liens On peut aussi faire des liens de messagerie (Insertion / Lien de messagerie) L attribut «target» définit la fenêtre où sera affichée la page du lien : target = _blank affichage dans une nouvelle fenêtre target = _self affichage dans la fenêtre ou le cadre courant(e) target = _parent ou _top affichage par écrasement de toute la page

25 Exercice 6 : Création de cadres Les cadres permettent de diviser une fenêtre du navigateur en plusieurs zones, chacune d'entre elles pouvant afficher un document HTML distinct. En règle générale, un premier cadre affiche un document avec des commandes de navigation tandis qu'un autre cadre affiche un document avec le contenu principal.

26 Exercice 6 : Création de cadres Choisir l onglet Cadres de la barre Insertion Il est possible de composer les jeux de cadres Charger le panneau rétractable Mise en forme avancée (clic droit sur fichiers)

27 Exercice 5 : Création de cadres 3 :La propriété «cible» des liens indique sur quel cadre la page va se charger 2 : Pointer ensuite avec la cible la page à afficher dans ce cadre 1 : Sélectionner le cadre à modifier ou Alt + clic sur le cadre

28 ET VOILÀ LE TRAVAIL!!!

30 Conclusion Il n est donc pas si dur de coder en HTML quand on utilise Dreamweaver Vous êtes désormais un peu autonome pour créer votre propre site web La séance 2 vous permettra de vous familiariser avec les feuilles de style, les comportements, les formulaires, l intégration d animations Flash,

Documents pareils

Publier dans la Base Documentaire

Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008