Dreamweaver sance 1 SI 28 Malpart Cline Jrmy

Dreamweaver séance 1 SI 28 Malépart Céline Jérémy Palmier

Plan � Introduction au HTML (bloc note) � Création d’un site � le formatage

Introduction au HTML � Html : Hyper. Text Markup Language : langage de mise

Introduction au HTML � En HTML, on utilise des balises prédéfinies afin de préciser

Présentation de quelques balises › › › <BR> Saut de ligne, <P> Pour un

Structure d’un fichier HTML <HTML> <HEAD> <TITLE>~~~~</TITLE> </HEAD> <BODY> ~~~~~ (contenu du document) </BODY>

Création d’une page web à partir du bloc note

Dreamweaver � Dreamweaver est un logiciel permettant de créer des documents HTML plus simplement,

$Mode d’affichage : fractionné$

Création d’une nouvelle page si on ne passe pas par l’étape de création de

Formatage du texte � Insertion des textes Dans l’espace de travail, vous pouvez insérer

Panneau de propriétés Titre, sous-titre… Permet d’ajouter des feuilles de style Choix de la

Création d’un jeu de cadres � les cadres (ou frames) servent à structurer le

Création de cadres Bandeau supérieur Menu de navigati on Cadre principal Contenu du site

Les tableaux Bouton d’insertion de tableau Propriétés du tableau

Opérations sur les tableaux Fusion de cellule

Les liens � Trois choix possibles : › Lien de messagerie › Lien vers

Image mappé � Sélectionner l’image � Choix de la forme appropriée:

Slides: 25

Download presentation

Dreamweaver séance 1 SI 28 Malépart Céline Jérémy Palmier

Plan � Introduction au HTML (bloc note) � Création d’un site � le formatage du texte � la création d’un jeu de cadres � les tableaux � liens internes et externes � l’insertion d'images

Introduction au HTML � Html : Hyper. Text 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 � En HTML, on utilise des balises prédéfinies afin de préciser à l'intérieur d'un fichier texte des éléments tels les titres, les paragraphes, les acronymes, les citations. � Les balises se présentent sous la forme d’un code entre « < » et « > »

Présentation de quelques balises › › › <BR> Saut de ligne, <P> Pour un nouveau paragraphe, <B> Mettre le texte en gras, <H 1>…<H 7> Formatage du texte <a href=. . url. . . target=. . . > </a> Lien <img src= «url de l’ image » > Insertion d’image › <table> balise ouvrant un tableau › Balise fermante </nom_balise>

Structure d’un fichier HTML <HTML> <HEAD> <TITLE>~~~~</TITLE> </HEAD> <BODY> ~~~~~ (contenu du document) </BODY> </HTML>

Création d’une page web à partir du bloc note

Résultat

Dreamweaver � 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 • Un outil d’efficacité même pour les plus connaisseurs

Mode d’affichage : code

$Mode d’affichage : fractionné$

Mode d’affichage : fractionné

Mode d’affichage : création

Création d ‘un site

Création d’une nouvelle page si on ne passe pas par l’étape de création de site, Dreamweaver fera des liens absolus et pas relatifs : Liens relatifs : "image/fond_vert_degrade. png" Liens absolus : "file: ///F|/si 28/exposes_si 28/expo s‚ s/pariset/DW_seance 1 _rpariset/Site/haut. html "

Formatage du 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). � Pour formatage de texte trois choix possibles : › Menu Texte › Panneau propriétés › Sélection du texte + clic droit souris

Panneau de propriétés Titre, sous-titre… Permet d’ajouter des feuilles de style Choix de la police Taille

Menu texte

Création d’un jeu de cadres � les cadres (ou frames) servent à structurer le site � ils permettent d’afficher simultanément plusieurs pages HTML

Création de cadres Bandeau supérieur Menu de navigati on Cadre principal Contenu du site

Les tableaux Bouton d’insertion de tableau Propriétés du tableau

Opérations sur les tableaux Fusion de cellule

Les liens � Trois choix possibles : › Lien de messagerie › Lien vers un site internet (lien externe) › Lien vers une autre page du site Lien interne ou externe Ancre nommée Lien de messagerie

Les liens

Insertion d’image � A partir de : ou

Image mappé � Sélectionner l’image � Choix de la forme appropriée: