Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
SI28 Malépart Céline Jérémy Palmier
Dreamweaver séance 1 SI28 Malépart Céline Jérémy Palmier
2
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
3
Introduction au 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 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 « > »
5
Présentation de quelques balises
<BR> Saut de ligne, <P> Pour un nouveau paragraphe, <B> Mettre le texte en gras, <H1>…<H7> 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>
6
Structure d’un fichier HTML
<HEAD> <TITLE>~~~~~~~~</TITLE> </HEAD> <BODY> ~~~~~~~~~~ (contenu du document) </BODY> </HTML>
7
Création d’une page web à partir du bloc note
8
Résultat
9
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
10
Mode d’affichage : code
11
Mode d’affichage : fractionné
12
Mode d’affichage : création
13
Création d ‘un site
14
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|/si28/exposes_si28/expos‚s/pariset/DW_seance1_rpariset/Site/haut.html "
15
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
16
Panneau de propriétés Titre, sous-titre… Taille Choix de la police
Permet d’ajouter des feuilles de style Choix de la police Taille
17
Menu texte
18
Création d’un jeu de cadres
les cadres (ou frames) servent à structurer le site ils permettent d’afficher simultanément plusieurs pages HTML
19
Création de cadres Bandeau supérieur Menu de navigation
Cadre principal Contenu du site
20
Bouton d’insertion de tableau
Les tableaux Bouton d’insertion de tableau Propriétés du tableau
21
Opérations sur les tableaux
Fusion de cellule
22
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
23
Les liens
24
Insertion d’image A partir de : ou
25
Image mappé Sélectionner l’image Choix de la forme appropriée:
Présentations similaires
