Post on 30-Dec-2015
description
SI 28 - Écriture SI 28 - Écriture interactive & interactive & multimédiamultimédia
Dreamweaver Séance 1
Petit Clara & Palfart Julien PrintempsPrintemps 20082008
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
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é.
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>
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
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
Introduction au HTMLIntroduction au HTML
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
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
Dreamweaver 8Dreamweaver 8
Espace de travail
Groupe de
panneauxBarre d’outils du
document
Barre d’insertion
Inspecteur de propriétés
Dreamweaver 8Dreamweaver 8
Hyperlien
La barre d’insertion - Commun
Lien de messagerie
Ancre nommée
Tableau
Image
Dreamweaver 8Dreamweaver 8
Application d’un format
L’inspecteur de propriétés
Créer un lien
CouleurPolice
Alignement du texte
Dreamweaver 8Dreamweaver 8Modes :
Code Fractionner Création Mode d’affichage
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 "
Dreamweaver 8Dreamweaver 8
La création d’un site…
Dreamweaver 8Dreamweaver 8
La création d’un site…
Dreamweaver 8Dreamweaver 8
La création d’un site…
Dreamweaver 8Dreamweaver 8
La création d’un site…
Dreamweaver 8Dreamweaver 8
La création d’un site…
Dreamweaver 8Dreamweaver 8
La création d’un site…
Dreamweaver 8Dreamweaver 8
La première page HTML…
Apparition de l’arborescence de notre site dans le panneaux Fichiers
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
Dreamweaver 8Dreamweaver 8
Formatage du texte… > Le menu texte
Dreamweaver 8Dreamweaver 8
Formatage du texte… > Le clic droit
Dreamweaver 8Dreamweaver 8
Formatage du texte… > Le panneau propriétés
Dreamweaver 8Dreamweaver 8
Modification du fond
Dreamweaver 8Dreamweaver 8
Modification du fond
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
Dreamweaver 8Dreamweaver 8
Les images…
L’mage survolée : l’image change quand la souris passe par dessus
Dreamweaver 8Dreamweaver 8
Les tableaux
Dreamweaver 8Dreamweaver 8
Les liens …Trois types de liens :
Lien interne ou externe
Lien de messagerie
Ancre nommée
SI28 – Dreamweaver SI28 – Dreamweaver 1 1
Merci de votre attention !
Clara & Julien