si 28 - Écriture interactive & multimédia
DESCRIPTION
SI 28 - Écriture interactive & multimédia. Dreamweaver Séance 1. Printemps 2008. Petit Clara & Palfart Julien. 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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/1.jpg)
SI 28 - Écriture SI 28 - Écriture interactive & interactive & multimédiamultimédia
Dreamweaver Séance 1
Petit Clara & Palfart Julien PrintempsPrintemps 20082008
![Page 2: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/2.jpg)
Plan de la séancePlan 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
![Page 3: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/3.jpg)
Introduction au HTMLIntroduction 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é.
![Page 4: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/4.jpg)
Introduction au HTMLIntroduction au HTML
Le HTML est un langage structuré à base de balises
Les balises se présentent sous la forme d’un code entre < et >
Quelques balises courantes : <H1> à <H7> Titres par taille décroissante <BR> Sauter une ligne <P> Pour un nouveau paragraphe <B> Pour mettre en gras <a href…> lien hypertexte … </a>
![Page 5: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/5.jpg)
Introduction au HTMLIntroduction au HTML Structure de base d’un document
HTML<HTML>
<HEAD>
<TITLE>Titre du document </TITLE>
</HEAD>
<BODY>
Contenu du document
</BODY>
</HTML>
Affiché dans la barre des titres du navigateur
![Page 6: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/6.jpg)
Introduction au HTMLIntroduction 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
![Page 7: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/7.jpg)
Introduction au HTMLIntroduction au HTML
![Page 8: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/8.jpg)
Introduction au HTMLIntroduction au HTML Enregistrez votre travail dans votre dossier aux
formats .txt et .html Découvrez le résultat en ouvrant le navigateur Web de
votre choix
![Page 9: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/9.jpg)
Dreamweaver 8Dreamweaver 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
![Page 10: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/10.jpg)
Dreamweaver 8Dreamweaver 8
Espace de travail
Groupe de
panneauxBarre d’outils du
document
Barre d’insertion
Inspecteur de propriétés
![Page 11: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/11.jpg)
Dreamweaver 8Dreamweaver 8
Hyperlien
La barre d’insertion - Commun
Lien de messagerie
Ancre nommée
Tableau
Image
![Page 12: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/12.jpg)
Dreamweaver 8Dreamweaver 8
Application d’un format
L’inspecteur de propriétés
Créer un lien
CouleurPolice
Alignement du texte
![Page 13: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/13.jpg)
Dreamweaver 8Dreamweaver 8Modes :
Code Fractionner Création Mode d’affichage
![Page 14: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/14.jpg)
Dreamweaver 8Dreamweaver 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 relatifset 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 "
![Page 15: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/15.jpg)
Dreamweaver 8Dreamweaver 8
La création d’un site…
![Page 16: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/16.jpg)
Dreamweaver 8Dreamweaver 8
La création d’un site…
![Page 17: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/17.jpg)
Dreamweaver 8Dreamweaver 8
La création d’un site…
![Page 18: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/18.jpg)
Dreamweaver 8Dreamweaver 8
La création d’un site…
![Page 19: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/19.jpg)
Dreamweaver 8Dreamweaver 8
La création d’un site…
![Page 20: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/20.jpg)
Dreamweaver 8Dreamweaver 8
La création d’un site…
![Page 21: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/21.jpg)
Dreamweaver 8Dreamweaver 8
La première page HTML…
Apparition de l’arborescence de notre site dans le panneaux Fichiers
![Page 22: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/22.jpg)
Dreamweaver 8Dreamweaver 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
![Page 23: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/23.jpg)
Dreamweaver 8Dreamweaver 8
Formatage du texte… > Le menu texte
![Page 24: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/24.jpg)
Dreamweaver 8Dreamweaver 8
Formatage du texte… > Le clic droit
![Page 25: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/25.jpg)
Dreamweaver 8Dreamweaver 8
Formatage du texte… > Le panneau propriétés
![Page 26: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/26.jpg)
Dreamweaver 8Dreamweaver 8
Modification du fond
![Page 27: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/27.jpg)
Dreamweaver 8Dreamweaver 8
Modification du fond
![Page 28: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/28.jpg)
Dreamweaver 8Dreamweaver 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
![Page 29: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/29.jpg)
Dreamweaver 8Dreamweaver 8
Les images…
L’mage survolée : l’image change quand la souris passe par dessus
![Page 30: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/30.jpg)
Dreamweaver 8Dreamweaver 8
Les tableaux
![Page 31: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/31.jpg)
Dreamweaver 8Dreamweaver 8
Les liens …Trois types de liens :
Lien interne ou externe
Lien de messagerie
Ancre nommée
![Page 32: SI 28 - Écriture interactive & multimédia](https://reader036.vdocuments.mx/reader036/viewer/2022062516/56812a67550346895d8de7cc/html5/thumbnails/32.jpg)
SI28 – Dreamweaver SI28 – Dreamweaver 1 1
Merci de votre attention !
Clara & Julien