Dreamweaver MX
Plan de l’exposé Introduction au HTML Présentation de Dreamweaver Création d’un site local Insertion de texte Listes Tableaux
Plan de l’exposé Insertion d’images et d’animations simple Texte Flash Boutons Flash Liens Frames
Définition du HTML Html : HyperText Markup Language : langage de mise en forme de documents hypertextes Hypertexte : textes qui contiennent des références croisées Hypertexte : Mise en forme : propriétés de formatage du texte (titre, liste, gras, tableau…)
Définition du HTML Langage structuré à l’aide de balises Quelques balises courantes : <H1> à <H6> Titres par importance décroissante, <BR> Sauter une ligne, <P> Pour un nouveau paragraphe, <B> Pour mettre en gras, <UL>+<LI> Liste <a href lien hypertexte …
Lien entre document et fichier HTML Un document Un fichier .html Une en-tête TITRE Un corps CONTENU <HTML> <HEAD> <TITLE>Ma 1ère page Web</TITLE> </HEAD> <BODY> ~~~~~~~~~~ (contenu du document) </BODY> </HTML>
Exemple
Présentation de Dreamweaver MX Dreamweaver MX est un éditeur HTML destiné à la création de sites web professionnels et au développement de puissantes applications dynamiques pour Internet Dreamweaver MX facilite la mise en œuvre et fournit les outils appropriés pour élargir votre expérience dans le domaine de la conception web.
L’espace de travail Espace de travail Propriétés Objets Communs 5 panneaux Rétractables Espace de travail Propriétés
Espace réservé pour l’image Panneau Insertion Ancre nommée HTML fireworks Image survolée Barre horizontale Sélecteur de balise Hyperlien Calque Données tabulées Image Lien de messagerie Date Espace réservé pour l’image Commentaire Insérer un tableau Flash Barre de navigation
L’inspecteur de propriétés alignement du texte Changement de police couleur de la police appliquer un format créer un lien Indentation du texte Dimensions d’une cellule Mise en forme d’un texte Liens … Ce panneau permet de modifier les propriétés des objets insérés
Panneaux à droite Inspecteur de balises bibliothèques de code Gestion des styles et des comportements utilisation de données dynamiques gestion des pages gestion des ressources du site
Création d’un nouveau site Dans la barre des menus, aller sur Site Nouveau site …… Etape nécessaire pour pouvoir utiliser des liens relatifs !
Liens Absolus !
Liens Absolus !
Suivez les instructions, ou passez en mode Avancé
Le mode Avancé
Suivre les instructions On va choisir les options suivantes: Entrez le nom de votre site (ex: Mon website) Ne pas utiliser de technologie serveur Modifier les copies locales… et indiquer le répertoire du site Pour l’instant, nous travaillerons sur un serveur local, donc donnez encore une fois le répertoire de votre site Ne pas activer l’archivage et l’extraction Et enfin « terminer ».
Apparition de l’arborescence de notre site dans le panneau fichiers
Première Page sous Dreamweaver Cliquez ici
Mode d’affichage Il existe trois mode d’affichage sous Dreamweaver : Code : voir le code html uniquement Création : voir la page html Code et création : affichage simultanée du code et de la page
Afficher Choix du mode d’affichage Le nom et l’adresse de notre website Pour afficher les autres outils (règles, grilles …) vous pouvez choisir dans ce menu
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).
Formatage de texte Trois choix possibles : Menu Texte Panneau propriété Sélection du texte + clique droit souris Exemples : en tête, polices, styles, couleurs,…
Pour visualiser les pages avec un navigateur, sans quitter Dreamweaver Tapez F12 Ou : Fichier > Aperçu dans le navigateur
Modification du fond Menu modifier Propriété de la page Modifier la couleur du fond Ou mettre une image en fond
En H1 Un paragraphe Le titre
Les listes Listes à puces Listes numérotées Listes de définitions (présente les termes suivis de leur définition)
Application Réalisation de plan.htm : deux listes. Une liste « Accueil » à 3 puces (html,dreamweaver, frames) Une liste « Sites Utiles » à 4 puces (liens vers google, utc, macromédia et si28) Les listes sont séparées par une barre horizontale.
Les Tableaux On peut insérer un tableau de deux manières différentes : Clic sur la boîte à outil tableau A partir du menu : Insertion/Tableau
Propriétés du Tableau Propriétés d’insertion Propriétés détaillés du tableau Formatage classique d’un tableau Ajustement automatique en ligne et en colonne Choix des unités de mesure (pixel ou %)
Propriétés des cellules Possibilités de rajouter un lien Formatage classique de cellules Fractionnement de cellule Définition de cellules d’en tête de tableau
Images et Animations simples Pour pouvoir manipuler aisément un image sous Dreamweaver, il faut l’insérer au préalable dans un calque Via la barre d’outil ou le menu Pour modifier un calque (position, dimensions…), cliquez sur un bord d’un calque. Des petites poignées apparaissent. Pour modifier la position, cliquez sur un bord de la cellule et faites glisser
Images et Animations simples Images survolés Un image survolé est un genre d’animation facile à éditer sous Dreamweaver. On accède à ce genre d’animation à partir de la barre d’outil ou du menu Insertion/Images interactives Il suffit alors de choisir les deux images que vous voulez alterner lors du survol de la souris dans les fenêtres de propriétés.
Texte Flash Choix des deux couleurs de l’animation Ce genre d’animation permet la modification de la couleur du texte lors du survol de la souris Pour créer un texte flash, aller dans menu : Insertion/Images interactives/Text Flash Choix des deux couleurs de l’animation
Possibilité d’ajouter un lien Boutons Flash Le bouton flash s’insère aussi à partir du menu : Insertion/Images interactives/Bouton Flash Possibilité d’ajouter un lien
Liens Il existe plusieurs types de liens : Les liens absolus externes au site, par exemple : href = http://www.google.fr Les liens internes au site : par exemple : href = accueil.html Les liens vers une partie du même document, effectués à partir des signets (#étiquette) Les liens de messagerie : fonction « mailto » du navigateur L’attribut « target » définit la fenêtre où sera affiché la page du lien target = _blank affichage dans une nouvelle fenêtre target = _self affichage dans la fenêtre ou le cadre courant(e) target = _parent ou _top affichage par écrasement de toute la page Pour accéder à ces liens on peut utiliser le menu: Insertion/ ou bien les barres d’outils de la rubrique commun RMQ : On a aussi la possibilité de sélectionner un texte et de le transformer en lien, en spécifiant l’attribut lien dans sa propriétés Lien hypertexte externe ou interne au site Lien de messagerie Ancre nommée
Les Frames (cadres) Frames = Regroupement de cadres permettant un affichage réparti, dynamique et ordonné des pages html Objectif des frames = assurer une bonne navigation (via l’existence d’au moins un cadre accompagnateur qui affichera le plan du site et/ou le plan des différentes parties ) exemple : Le site CINEMA http://www.fas.umontreal.ca./com/com3561/bta/ergo/frame1.html Caractéristiques : Un frame est un fichier html particulier qui contient : Les dimensions des cadres Un nom de référence pour pouvoir activer les liens sur un cadre spécifique des frames en question
Les Frames (cadres) Il existe deux méthodes pour créer les frames : En allant dans le menu : Fichier/Nouveau/Jeux de cadres Ou en sélectionnant le menu « cadres » à partir d’un document vierge
Frames Menu Fenêtre autres Cadres Pour sélectionner les propriétés d’une frame particulières, vous pouvez : Menu Fenêtre autres Cadres Cela permet d’afficher un schéma de votre cadre et de vous montrer sur quelle zone de votre fenêtre vous travaillez. Alt + click sur le cadre voulu Sélectionne directement la zone de travail.
On travail sur cette zone, qui correspond à :
Frames Après avoir choisi le modèle de votre « frames » et après avoir défini ses dimensions, entrer dans le mode Code pour définir ses pages de chargement. L’attribut « src » référence le fichier à charger dans le cadre (src=plan.htm) L’attribut « name » spécifie la cible définie par « target » (name=topFrame) RMQ : chaque cadre doit posséder un nom de référence, pour que les liens puissent pointer sur un élément spécifique des « frames » Exemple: si le cadre nommé « topFrame » existe, je peux envoyer la page « accueil.htm » dans ce cadre en spécifiant « cible= topFrame » dans le mode création (href=accueil.htm target= topFrame [en mode code])
Frames Un façon plus simple pour définir les pages de chargement serait de sélectionner un zone de travail (un cadre de travail cf diapo précédente) puis d’utiliser l’icône cible (dans le panneau propriété en bas)en cliquant dessus puis d’aller sélectionner la page voulue aux niveau de l’arborescence de votre site dans le panneau à droite : fichiers Icône Cible
Ici on sélectionne index.htm
Et voilà le résultat http://www4.utc.fr/~si28009