SI 28 - Écriture interactive & multimédia

SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Printemps2008 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

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é.

Introduction 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 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 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 HTML

Introduction 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 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 8 Barre d’insertion Groupe de panneaux Barre d’outils du document Espace de travail Inspecteur de propriétés

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

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

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

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&sbquo;s/pariset/ DW_seance1_rpariset/Site/ haut.html "

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

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

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

Dreamweaver 8 • Formatage du texte… > Le menu texte

Dreamweaver 8 • Formatage du texte… > Le clic droit

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

Dreamweaver 8 • Modification du fond

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

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

Dreamweaver 8 • Les tableaux

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

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

SI 28 - Écriture interactive & multimédia