Dreamweaver Séance 1
Introduction au HTML
Introduction au HTML Qu’est ce que le 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…)
Introduction au HTML Langage structuré à l’aide de balises Quelques balises courantes : <H1> à <H6> Titres par taille décroissante, <BR> Sauter une ligne <P> Pour un nouveau paragraphe <B> Pour mettre en gras <UL>+<LI> Liste <a href…> lien hypertexte …
<TITLE>~~~~~~~~</TITLE> Introduction au HTML Structure <HTML> <HEAD> <TITLE>~~~~~~~~</TITLE> </HEAD> <BODY> ~~~~~~~~~~ (contenu du document) </BODY> </HTML>
Introduction au HTML 6 éléments principaux Image < img src = « URL »> Link <a herf=« URL »>graphe ou text </a> Table <table>~~~~~~~~~~~~~~</table> Form <form name= « form1»> ~~~~~~~~~~~</form> Frame
Le HTML dans le bloc-notes
Le HTML dans le bloc-notes
Le HTML dans le bloc-notes
Dreamweaver MX
Dreamweaver MX
Dreamweaver, c’est quoi ? Dreamweaver MX Dreamweaver, c’est quoi ? Dreamweaver est un logiciel permettant de créer des documents HTML plus simplement, sans nécessairement passer directement par l’édition de ce langage. Avantages: Plus accessible aux non initiés Permet de créer simplement des pages complexes Possibilité de contrôler le script HTML
Dreamweaver MX Espace de travail Propriétés Objets communs Panneaux rétractables Espace de travail Propriétés
Dreamweaver MX Panneau OBJETS -- Commun Image Hyperlien Tableau Ancre nommée Commentaire Lien de messagerie Date
Dreamweaver MX L’inspecteur de propriétés couleur de la police alignement du texte appliquer un format changement de police créer un lien indentation du texte
Gestion des styles et des comportements Dreamweaver MX Panneaux à droite bibliothèques de code Gestion des styles et des comportements gestion des pages gestion des ressources du site utilisation de données dynamiques
La Création d’un Site
Dans la barre des menus, aller sur Site Nouveau site…… La création d’un site Création d’un nouveau site Dans la barre des menus, aller sur Site Nouveau site……
La création d’un site
La création d’un site
La création d’un site
La création d’un site
La création d’un site
La création d’un site
La création d’un site Apparition de l’arborescence de notre site dans le panneau fichiers
La création d’un site Mode d’affichage - Code
La création d’un site Mode d’affichage - Fractionner
La création d’un site Mode d’affichage - Création
Formatage de texte
Formatage de 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).
Formatage de texte Pour formatage de texte vous avez trois choix possibles : Menu Texte Panneau propriétés Sélection du texte + clic droit souris
Formatage de texte
Formatage de texte
Formatage de texte
Formatage de texte Création de listes
Formatage de texte Modification du fond Menu modifier Propriétés de la page Modifier la couleur du fond Ou mettre une image en fond
Formatage de texte
Formatage de texte
Les liens Trois choix possibles : Lien de messagerie Lien vers un site internet (lien externe) Lien vers une autre page (lien interne) Lien de messagerie Ancre nommée Lien hypertexte externe ou interne au site
Les liens
Les liens
Les liens Lien créé
Les tableaux
Les tableaux
Les tableaux
Les images
Les images mappées
Les frames 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 ) 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 Il existe deux méthodes pour créer les frames : En allant dans le menu : Fenêtre/autre/cadres Ou en sélectionnant le menu « cadres » à partir d’un document vierge
Les frames On travail sur cette zone, qui correspond à :
Les frames