SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Petit Clara & Palfart Julien Printemps2008 Printemps 2008.

Présentation au sujet: "SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Petit Clara & Palfart Julien Printemps2008 Printemps 2008."— Transcription de la présentation:

1 SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Petit Clara & Palfart Julien Printemps2008 Printemps 2008

2 Plan de la séance Introduction au HTML Création d’un site Internet Le formatage du texte L’insertion d’images Les tableaux Les liens internes et externes

3 Introduction au HTML HTML : HyperText Markup Language : langage de mise en forme de documents hypertextes Système hypertexte : réseau constitué par un ensemble de documents informatiques liés entre eux. Hyperlien : référence dans un système hypertexte permettant de passer directement d’un document consulté à un document lié.

4 Introduction au HTML Le HTML est un langage structuré à base de balises Les balises se présentent sous la forme d’un code entre Quelques balises courantes :  à Titres par taille décroissante  Sauter une ligne  Pour un nouveau paragraphe  Pour mettre en gras  lien hypertexte …

5 Introduction au HTML Structure de base d’un document HTML Titre du document Contenu du document Affiché dans la barre des titres du navigateur

6 Introduction au HTML Ce langage peut être écrit dans un éditeur de texte basique. La visualisation du résultat nécessite un navigateur Web (Internet Explorer, Mozilla Firefox, …) Application :  Créez le dossier « Ma première page Web » dans votre espace de travail personnel  Copiez le logo UTC  Ouvrez le bloc notes

7 Introduction au HTML

8 Enregistrez votre travail dans votre dossier aux formats.txt et.html Découvrez le résultat en ouvrant le navigateur Web de votre choix

9 Dreamweaver 8 Dreamweaver est un logiciel permettant de créer visuellement des sites Web en se passant de l’écriture du code qui peut se révéler fastidieuse lors de la création d’un site. Avantages :  Plus accessible aux non initiés  Permet de créer simplement des pages complexes  Possibilité de contrôler le code pour les connaisseurs

10 Dreamweaver 8 Espace de travail Groupe de panneaux Barre d’outils du document Barre d’insertion Inspecteur de propriétés

11 Dreamweaver 8 Hyperlien La barre d’insertion - Commun Lien de messagerie Ancre nommée Tableau Image

12 Dreamweaver 8 Application d’un format L’inspecteur de propriétés Créer un lien CouleurPolice Alignement du texte

13 Dreamweaver 8 Modes : Code Fractionner Création Mode d’affichage

14 Dreamweaver 8 La création d’un site… -> Barre des menus > Site > Nouveau site L’étape de création de site est nécessaire afin que Dreamweaver crée des liens relatifs et non absolus. Lien relatif : «image/fond_vert_degrade.png Lien absolu : "file:///F|/si28/exposes_si28/ expos‚s/pariset/ DW_seance1_rpariset/Site/ haut.html "

15 Dreamweaver 8 La création d’un site…

16 Dreamweaver 8 La création d’un site…

17 Dreamweaver 8 La création d’un site…

18 Dreamweaver 8 La création d’un site…

19 Dreamweaver 8 La création d’un site…

20 Dreamweaver 8 La création d’un site…

21 Dreamweaver 8 La première page HTML… Apparition de l’arborescence de notre site dans le panneaux Fichiers

22 Dreamweaver 8 Formatage du texte…  Insertion des textes Dans l’espace de travail, vous pouvez insérer des textes comme dans tout éditeur de texte (Microsoft Word ou le bloc notes).  Pour formatage de texte trois choix possibles : Menu Texte Panneau propriétés Sélection du texte + clic droit souris

23 Dreamweaver 8 Formatage du texte… > Le menu texte

24 Dreamweaver 8 Formatage du texte… > Le clic droit

25 Dreamweaver 8 Formatage du texte… > Le panneau propriétés

26 Dreamweaver 8 Modification du fond

27 Dreamweaver 8 Modification du fond

28 Dreamweaver 8 Les images…  Cliquez pour insérer une image sur l’icône dans la barre d’insertion.  Choisissez une image qui se placera à l’endroit au niveau de votre curseur  Les zones réactives : Sélectionnez l’image Dans le menu du bas choisissez une forme et dessinez la sur l’image Nommez la zone réactive et inscrire le lien correspondant

29 Dreamweaver 8 Les images…  L’mage survolée : l’image change quand la souris passe par dessus

30 Dreamweaver 8 Les tableaux

31 Dreamweaver 8 Les liens … Trois types de liens : Lien interne ou externe Lien de messagerie Ancre nommée

32 SI28 – Dreamweaver 1 Merci de votre attention ! Clara & Julien