1 er séance SI28 A2004 YIN Lei Emmanuel Eugene. Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver.

Présentation au sujet: "1 er séance SI28 A2004 YIN Lei Emmanuel Eugene. Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver."— Transcription de la présentation:

1 1 er séance SI28 A2004 YIN Lei Emmanuel Eugene

2 Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver  La création d'un site dans Dreamweaver  Formatage du texte

3 Introduction au HTML

4  Définition:  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…)

5 Introduction au HTML  Langage structuré à l’aide de balises Quelques balises courantes : à Titres par importance décroissante, Sauter une ligne, Pour un nouveau paragraphe, Pour mettre en gras, + Liste <a href lien hypertexte …

6 Introduction au HTML  Fichier HTML ~~~~~~~~ ~~~~~~~~~~ (contenu du document)

7 Introduction au HTML  6 éléments principaux - Image - Link graphe ou text - Table ~~~~~~~~~~~~~~ - Form ~~~~~~~~~~~ - Frame - Layer

8 Le HTML dans le bloc- notes (notepad)

9 Le HTML dans le bloc-notes

10

11 Présentation de Dreamweaver MX

12

13  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.

14 Présentation de Dreamweaver MX Espace de travail Objets Communs Propriété s 5 panneaux Rétractable s

15 Présentation de Dreamweaver MX  Panneau OBJETS -- Commun Hyperlien Lien de messagerie Ancre nommée Tableau Image Support Date Commentaire Modèle Sélecteur de balise

16 Présentation de Dreamweaver MX  L’inspecteur de propriétés couleur de la police Indentation du texte alignement du texte appliquer un format Changement de police créer un lien

17 Présentation de Dreamweaver MX  Panneaux à droite Gestion des styles et des comportements gestion des pages gestion des ressources du site utilisation de données dynamiques Inspecteur de balises bibliothèques de code

18 La Cr éation d’un Site

19 La création d’un site  Création d’un nouveau site Dans la barre des menus, aller sur Site  Gérer les sites…… Etape nécessaire pour pouvoir utiliser des liens relatifs !

20 La création d’un site

21  Suivez les instructions, ou passez en mode Avancé directement

22 La création d’un site  Le mode Avancé

23 La création d’un site  Définition du site

24 La création d’un site

25 Présentation de Dreamweaver MX

26

27

28

29 Apparition de l’arborescence de notre site dans le panneau fichiers

30 Présentation de Dreamweaver MX Choix du mode d’affichage Le nom et l’adresse de notre site web Pour afficher les autres outils (règles, grilles …) vous pouvez choisir dans ce menu

31 La création d’un site - Code  Mode d’affichage - Code

32 La création d’un site  Mode d’affichage - Fractionner

33 La création d’un site - Création  Mode d’affichage - Création

34 Formatage de texte

35  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).

36 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

37 Formatage de texte

38

39

40

41  Modification du fond Menu modifier  Propriétés de la page Modifier la couleur du fond Ou mettre une image en fond

42 Formatage de texte

43

44

45