Guillaume MICHAUD – Yvan LECOMTE Exposé Dreamweaver MX Première séance
Le HTML dans le bloc notes HTML : langage chargé de formaliser l'écriture d'un document avec des balises de formatage, indiquant la façon dont doit être présenté le document et ses liens Structure d’un document HTML <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Les fonctions essentielles Le HTML dans le bloc notes Les fonctions essentielles <BR> : marqueur « aller à la ligne » <IMG SRC=« »> : marqueur « insérer une image » <A HREF=« » >…</A>: balise « insérer un lien hypertexte » <P>…</P> : balise paragraphe <TITLE>…</TITLE> : balise titre
Le HTML dans le bloc notes
Le HTML dans le bloc notes
Le HTML dans le bloc notes Formatage du texte <font face =« » color=« » size= >…</font> : balise de police <b>…</b> : balise « gras » (b pour « bold ») <i>…</i> : balise italique (i pour « italic ») <u>…</u> : balise souligner (u pour « underline »)
Le HTML dans le bloc notes
Introduction : pourquoi utiliser Dreamweaver ? Dreamweaver permet de construire un site Internet facilement, car l’utilisateur peut travailler graphiquement plutôt qu’avec du code informatique. Ce logiciel renferme aussi un grand nombre d’outils, chargés d’aider l’utilisateur à créer ses applications Web.
Quelques définitions… Dreamweaver Quelques définitions… Dreamweaver : se traduit par tisseur de rêves Flash : outil de création de contenus dynamiques pour le Web
Dreamweaver Créer un nouveau site
Aperçu de l’interface Cet espace est dédié aux cinq panneaux rétractables Lorsque le programme démarre, cet écran s’affiche pour proposer différents raccourcis On clique ici pour créer une nouvelle page HTML C’est ici que les propriétés relatives à l’objet sélectionné apparaissent
Travail à partir d’une page HTML vierge Cette barre d’outils est toujours présente à l’écran ; elle permet d’insérer des objets comme des images ou des tableaux HTML On travaille ici un peu comme sous Word Cette barre d’outils est propre au document en cours (ici, une page HTML vierge) ; elle permet par exemple de choisir entre le mode visuel ou code informatique
Barres d’outils générales disponibles Insérer un commentaire En cliquant ici, on peut passer d’une barre à une autre Insérer des images Insérer des objets Flash, etc. Sélecteur de balises Créer un modèle Insérer un hyperlien Insérer un tableau Insérer un lien de messagerie Insérer une ancre nommée Insérer la date La barre Mise en forme permet de créer des tableaux ou des cadres La barre Formulaires permet d’insérer des objets de formulaire La barre Texte permet de mettre en forme un texte donné La barre HTML permet de jouer avec des objets HTML comme les lignes horizontales
Barre d’outils propre au document en cours Travailler avec le mode visuel et le code informatique en même temps (2) Travailler avec le mode visuel seulement (3) Vérifier que le code informatique saisi est correct Afficher des options sur l’éditeur Travailler avec le code informatique seulement (1) Fixer le titre de la page courante Tester son travail avec un navigateur Internet (3) (1) (2)
Barre des propriétés de l’objet sélectionné Créer une liste numérotée ou avec puces Choisir l’alignement du texte Créer un lien à partir du texte sélectionné Mettre en gras ou en italique Effectuer un retrait de texte Choisir le cadre cible du lien Choisir la taille de la police Choisir la couleur de la police Choisir la police à utiliser Ici, on a sélectionné du texte dans Dreamweaver ; ce volet permet donc de le mettre en forme… Mais son contenu change en fonction de la sélection
Création d’un premier site Internet… L’objectif est de partir de là : Pour arriver à quelque chose comme ça :
Construction d’un jeu de cadres Les cadres permettent d’afficher plusieurs pages HTML dans différentes zones. On va considérer qu’il y a trois cadres dans le site de LA21 ; on choisit la disposition suivante :
Création d’un premier tableau HTML Avant de cliquer, il faut penser à cliquer sur le cadre de gauche, qui contiendra le tableau dans lequel on veut faire le menu Cadre de gauche, à utiliser pour le menu ; on est en train d’y insérer un tableau HTML… Cadre du haut ; son contenu (le titre) ne va pas changer au cours de la navigation Le menu n’est composé que d’une seule colonne Cadre principal : son contenu va changer au cours de la navigation (ici, est affiché un écran de bienvenue) Il y a six entrées dans le menu
Quelques informations sur les liens… Il existe plusieurs types de liens : >>> Lien absolu (à éviter) : http://www.google.fr/index.html >>> Lien relatif (la direction dépend de la page de départ) : ./index.html >>> Ancre (lien interne à un même fichier) : #ancre >>> Lien de messagerie : mailto: email@utc.fr Lorsqu’un jeu de cadres est présent, il faut préciser en plus de la destination le cadre cible ; on utilise pour cela la syntaxe suivante : >>> _blank : affiche la cible dans une nouvelle fenêtre >>> _parent : affiche la cible dans le cadre de niveau supérieur >>> _self : affiche la cible dans le même cadre que le lien >>> _top : affiche la cible dans la fenêtre entière du navigateur
Créations des liens pour le menu Il faut sélectionner le texte que l’on veut transformer en lien On écrit le contenu du menu, matérialisé par le tableau HTML Il faut saisir la destination (jamais d’accent) ici Il faut cliquer ici pour créer un lien
Lien ciblant un cadre particulier Surligner le lien pour voir afficher ses propriétés Choisir mainFrame pour que les liens rafraîchissent le contenu du cadre principal
Insertion d’une image dans le menu On choisit ici une image à insérer Un clic ici entraîne l’affichage d’un pop-up
Insérer un lien dans une image Commencer par sélectionner l’image Entrer la destination du lien Définir le cadre du lien (ici, cadre principal)
Modification de l’arrière-plan Il faut d’abord penser à cliquer dans le cadre dont on souhaite modifier l’arrière-plan ! On peut choisir de mettre une couleur ou une image en arrière-plan
Une image qui change lorsque la souris passe dessus… Ce type d’image s’appelle image survolée C’est cette image qui est affichée la plupart du temps Cette image n’est affichée que lorsque la souris passe dessus
Insertion d’un texte Flash Les objets Flash sont dits vectoriels : on peut les agrandir à souhait sans perte de qualité Lorsque la souris passe sur le texte, on peut lui changer sa couleur C’est ici que l’on renseigne le contenu du texte Il est possible de faire du texte un lien On peut aussi fixer une couleur d’arrière-plan