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  La création d'un site dans Dreamweaver  Formatage du texte

Introduction au HTML

 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…)

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 …

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

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

Le HTML dans le bloc- notes (notepad)

Le HTML dans le bloc-notes

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.

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

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

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

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

La Cr éation d’un Site

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 !

La création d’un site

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

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

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

La création d’un site

Présentation de Dreamweaver MX

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

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

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

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

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

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

 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