1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006

2 Sommaire 1) Présentation du HTML 2) Premier pas en HTML 3) L’interface de DREAMWEAVER 4) Formatage du texte 5) Les images 6) Les tableaux 7) Les liens 8) Les frames

3 Présentation du HTML HTML, Hyper Text Markup Language Langage structuré à l’aide de balises  Peut être écrit dans un éditeur de texte basique  Doit être visionné à travers un logiciel pour voir le résultat comme : Internet Explorer Firefox

4 Présentation du HTML Composé de balises Une balise = un code entre « ». Exemple: Il y a souvent une balise ouvrante et une balise fermante avec du contenu à l’intérieur Exemple: titre

5 Présentation du HTML La structure de base d’un Fichier HTML titre ici contenu du document

6 Présentation du HTML Quelques balises courantes :  … Taille du texte  Lien  Insertion d’image  (pas de balise fermante) Saut de ligne  Paragraphe  Gras

7 Premier pas en HTML Objectif : A partir du Note pad et des fichiers fournies créer une page web avec plusieurs éléments :  Des textes de différentes tailles  Un lien  Un paragraphe avec un mot en gras  Une image

8 Premier pas en HTML Exemple

9 L’interface de DREAMWEAVER Espace de travail Objets communs Propriété s Panneaux rétractables

10 L’interface de DREAMWEAVER Hyperlien Lien de messagerie Ancre nommée Tableau Image Date Commentaire Panneau OBJETS -- Commun

11 L’interface de DREAMWEAVER L’inspecteur de propriétés couleur de la police indentation du texte alignement du texte appliquer un format changement de police créer un lien

12 L’interface de DREAMWEAVER Panneaux à droite Gestion des styles et des comportements gestion des pages gestion des ressources du site bibliothèques de code utilisation de données dynamiques

13 L’interface de DREAMWEAVER Création d’un nouveau site  Dans la barre des menus, aller sur Site  Nouveau site……

14 L’interface de DREAMWEAVER Espace de travail fractionné Code HTML Partie visuelle

15 L’interface de DREAMWEAVER

16 L’interface de DREAMWEAVER

17 L’interface de DREAMWEAVER

18 L’interface de DREAMWEAVER

19 L’interface de DREAMWEAVER

20 L’interface de DREAMWEAVER

21 Modification du fond  Menu modifier  Propriétés de la page  Modifier la couleur du fond  Ou mettre une image en fond Formatage du texte

22 Formatage du texte Écrire le texte Ajuster le format avec :  Menu « texte » en haut  la barre du bas  Clique droit une fois le texte sélectionné Fonctionne comme Word

23 Les images Cliquez pour insérer une image Choisissez une image l’image se placera à l’endroit ou vous avez le curseur Image

24 Les images Les zones réactives  Sélectionnez l’image  Dans le menu du bas choisissez la forme et dessiné la sur l’image  Nommé la et mettez un lien Nom Forme Lien

25 Les images Les images survolés  L’image change quand la sourie passe au dessus

26 Les tableaux Pratique pour la mise en page et pour les alignements Tableau

27 Les liens Les liens permettent de naviguer d’une page à une autre Pour des liens vers son site faire des liens relatifs  Exemple images/image1.jpg

28 Les liens Lien

29 Les frames Les frames permettent de visualiser plusieurs page web sur une même page

30 Les frames Attention il est préférable d’enregistrer les cadres un par un : sélectionnez un cadre puis fichier -> enregistrer le cadre.

31 Les Frames Pour les liens vous pouvez maintenant préciser le cadre dans lequel afficher la page