DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Écriture interactive & multimédia Présentation Dreamweaver 8.

Présentation au sujet: "DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Écriture interactive & multimédia Présentation Dreamweaver 8."— Transcription de la présentation:

1 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Écriture interactive & multimédia Présentation Dreamweaver 8

2 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Introduction au HTML Création d’un site Internet Le formatage du texte Le jeu de cadres L’insertion d’images et de sons Les liens internes et externes Les tableaux

3 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Dreamweaver : logiciel édité par Adoble permettant de créer des sites internet, et reposant sur le language HTML 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

4 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 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é. 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

5 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 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, …) 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

6 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Pour structurer le HTML, o n utilise des balises prédéfinies afin de préciser à l'intérieur d'un fichier texte des éléments tels les titres, les paragraphes, les acronymes, les citations. Les balises se présentent sous la forme d’un code entre 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

7 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Quelques balises courantes : Retour à la ligne nouveau paragraphe (saut de ligne) Balise fermante Mettre le texte en gras … Formatage du texte Lien Insertion d’image balise ouvrant un tableau 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

8 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Structure de base d’un document HTML Titre du document Contenu du document Affiché dans la barre des titres du navigateur 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

9 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 A vous de jouer : Créez le dossier « Ma première page Web » dans votre espace de travail personnel Allez sur l’adresse http://wwwetu.utc.fr/~ajacquet et copiez le dossier http://wwwetu.utc.fr/~ajacquet Ouvrez le bloc notes 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

10 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

11 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Enregistrez votre travail dans votre dossier aux formats.txt et.html Découvrez le résultat en ouvrant le navigateur Web de votre choix 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

12 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Espace de travail Groupe de panneaux Barre d’outils du document Barre d’insertion Inspecteur de propriétés 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

13 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Hyperlien La barre d’insertion - Commun Lien de messagerie Ancre nommée Tableau Image 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

14 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Application d’un format Créer un lien CouleurPolice Alignement du texte L’inspecteur de propriétés 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

15 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 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 : Recherche le fichier directement sur l’emplacement spécifié "file:///F|/si28/exposes_si28/ expos‚s/pariset/ DW_seance1_rpariset/Site/ haut.html « 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

16 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 La création d’un site 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

17 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 La création d’un site 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

18 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 La création d’un site 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

19 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 La création d’un site 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

20 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 La création d’un site 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

21 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 La création d’un site 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

22 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 La première page HTML Apparition de l’arborescence de notre site dans le panneaux Fichiers 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

23 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Modes : Code Fractionner Création Mode d’affichage 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

24 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Création d’un jeu de cadres 2 solutions pour cela: fichiers  nouveau  jeu de cadres mise en forme  jeu de cadres Renommer les cadres pour plus de clarté Création de cellule pour structurer les éléments des cadres. Mise en forme  mise en forme  onglet vert puis dessiner des cellules 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

25 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 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 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

26 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Formatage du texte Le menu texte 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

27 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Formatage du texte Le clic droit 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

28 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Formatage du texte Le panneau propriétés 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

29 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Modification du fond 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

30 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 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 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

31 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Les images L’mage survolée : l’image change quand la souris passe par dessus 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

32 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Les sons / vidéos Procédure identique pour les films et sons Dans la catégorie Commun de la barre Insertion, cliquez sur le bouton Support et sélectionnez l'icône du plug-in. Sélectionnez Insertion > Médias > Plug-in. Dans l'inspecteur Propriétés, cliquez sur l'icône de dossier pour rechercher le fichier audio/vidéo ou tapez le nom et le chemin d'accès au fichier dans la zone Lien Dans paramètre ajout de AUTOPLAY et le désactiver pour ne pas avoir le film visionné automatiquement dès l’ouverture de la page web 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

33 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Les tableaux 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

34 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Les liens Trois types de liens : Lien interne ou externe Lien de messagerie Ancre nommée 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

35 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Exercice Etapes réalisées: Création de jeu de cadres et de cellules Placer la bannière SI28 dans le cadre supérieur Créer un lien vers le site SI28 lors d’un clic sur la bannière Ecrire « Equipe »,« notre site html » et « utc » dans le cadre gauche et créer les liens vers ces sites Changer la couleur du cadre gauche Placer les trois images dans les cellules dans le cadre central Placer l’image survolée dans la quatrième case Ajout du film par plugin 1. Le html - qu’est-ce que le HTML ? - À partir du bloc note … - Exercice 2. Création d’un site sous DW8 - L’interface - Comment créer son site sur Vega - Création de cadres - Texte et style - Les images et sons - Les tableaux ( standard /mise en forme ) - Les liens - Exercice

36 DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Merci de votre attention ! Axel & Julien