Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Dreamweaver Séance 1
2
Introduction au HTML
3
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…)
4
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 …
5
<TITLE>~~~~~~~~</TITLE>
Introduction au HTML Structure <HTML> <HEAD> <TITLE>~~~~~~~~</TITLE> </HEAD> <BODY> ~~~~~~~~~~ (contenu du document) </BODY> </HTML>
6
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
7
Le HTML dans le bloc-notes
8
Le HTML dans le bloc-notes
9
Le HTML dans le bloc-notes
10
Dreamweaver MX
11
Dreamweaver MX
12
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
13
Dreamweaver MX Espace de travail Propriétés Objets communs Panneaux
rétractables Espace de travail Propriétés
14
Dreamweaver MX Panneau OBJETS -- Commun Image Hyperlien Tableau
Ancre nommée Commentaire Lien de messagerie Date
15
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
16
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
17
La Création d’un Site
18
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……
19
La création d’un site
20
La création d’un site
21
La création d’un site
22
La création d’un site
23
La création d’un site
24
La création d’un site
25
La création d’un site Apparition de l’arborescence de notre site dans le panneau fichiers
26
La création d’un site Mode d’affichage Code
27
La création d’un site Mode d’affichage - Fractionner
28
La création d’un site Mode d’affichage - Création
29
Formatage de texte
30
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).
31
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
32
Formatage de texte
33
Formatage de texte
34
Formatage de texte
35
Formatage de texte Création de listes
36
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
37
Formatage de texte
38
Formatage de texte
39
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
40
Les liens
41
Les liens
42
Les liens Lien créé
43
Les tableaux
44
Les tableaux
45
Les tableaux
46
Les images
47
Les images mappées
48
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
49
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
50
Les frames On travail sur cette zone, qui correspond à :
51
Les frames
Présentations similaires
