SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Petit Clara & Palfart Julien Printemps2008 Printemps 2008
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 Quelques balises courantes : à Titres par taille décroissante Sauter une ligne Pour un nouveau paragraphe Pour mettre en gras lien hypertexte …
Introduction au HTML Structure de base d’un document HTML Titre du document Contenu du document 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
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 Espace de travail Groupe de panneaux Barre d’outils du document Barre d’insertion Inspecteur de propriétés
Dreamweaver 8 Hyperlien La barre d’insertion - Commun Lien de messagerie Ancre nommée Tableau Image
Dreamweaver 8 Application d’un format L’inspecteur de propriétés Créer un lien CouleurPolice Alignement du texte
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‚s/pariset/ DW_seance1_rpariset/Site/ haut.html "
Dreamweaver 8 La création d’un site…
Dreamweaver 8 La création d’un site…
Dreamweaver 8 La création d’un site…
Dreamweaver 8 La création d’un site…
Dreamweaver 8 La création d’un site…
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 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