Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Introduction au HTML Qu’est ce que le 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 automatiquement d'un document consulté à un document lié.
2
Introduction au HTML Langage structuré à l’aide de balises
<balise propriétés de la balise>Texte ou code … </balise> Quelques balises courantes : <H1> à <H6> Titres par taille décroissante,</H1> … </H6> <BR> Sauter une ligne <P> Pour un nouveau paragraphe <B> Pour mettre en gras <UL>+<LI> Liste <a href…> lien hypertexte … </a>
3
Introduction au HTML Encapsulation des balises => Structure arborescente <balise1> <balise2> <balise3> </balise3> <balise5> </balise5> </balise2> <balise4> </balise4> </balise1>
4
Introduction au HTML Structure d’un document HTML <HTML>
<HEAD> <TITLE>Titre du document (affiché dans la barre de titre du navigateur)</TITLE> </HEAD> <BODY> (contenu du document) </BODY> </HTML>
5
Exemple d’une page web Ecriture d’une d’une page Web Corps du document
6
Ecriture d’une page web
Rendu de la page Web
7
Dreamweaver MX Dreamweaver, c’est quoi ?
Dreamweaver est un logiciel « What you See is What You Get » permettant de créer visuellement des sites web en se passant de l’écriture du code qui est une étape de la conception d’un site qui peut se révéler fastidieuse. Avantages: Plus accessible aux non initiés Permet de créer simplement des pages complexes Possibilité de contrôler le code.
8
Espace de travail DreamWeaver MX
9
Dreamweaver MX Panneau Barre d’insertion :: Objets Communs Image
Hyperlien Tableau Ancre nommée Commentaire Lien de messagerie Date
10
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
11
Gestion des styles et des comportements
Dreamweaver MX bibliothèques de code Panneaux à droite Gestion des styles et des comportements gestion des pages gestion des ressources du site utilisation de données dynamiques
12
La création d’un site Création d’un nouveau site
Création d’un projet facilement déplaçable. Création de liens relatifs # absolus Dans la barre des menus, aller sur Site Nouveau site……
13
La création d’un site
14
La création d’un site
15
La création d’un site
16
La création d’un site
17
La création d’un site
18
La création d’un site
19
La création d’un site Apparition de l’arborescence de notre site dans le panneau fichiers
20
La création d’un site Mode d’affichage Code
21
La création d’un site Mode d’affichage - Fractionner
22
La création d’un site Mode d’affichage - Création
23
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).
24
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
25
Formatage de texte
26
Formatage de texte
27
Formatage de texte
28
Formatage de texte Création de listes
29
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
30
Formatage de texte
31
Formatage de texte
32
Les cadres 1/2 Les différents types de cadres
Chaque cadre est un fichier HTML Imbrication possible De moins en moins utilisés
33
Les cadres 2/2 Un fichier HTML qui décrit l’emplacement des cadres
Autant de fichiers HTML que de cadres Exemple : Dans ce cas, il y a 4 fichiers et 3 cadres Index.htm
34
Les tableaux 1/2 2 modes de création Tableau de mise en forme Tableau
35
Les tableaux 2/2 Les tableaux peuvent être aussi imbriqués.
36
Les images 1/2 Image Espace réservé pour une image Image survolée
37
Les images 2/2
38
Les autres média Le flash Le shockwave (Director, …) Applet JAVA
La balise embed Import de tout type de media Sons, videos, … dépendant du poste client
Présentations similaires
