1 / 32

SI 28 - Écriture interactive & multimédia

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.

Download Presentation

SI 28 - Écriture interactive & multimédia

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

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

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

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

  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&sbquo;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

More Related