HTML & Dream Weaver

Votre site Internet avec Insitu Multimédia sur www.insitu.
fr/html
Formation HTML
&
Dreamweaver
www.insitu.fr/html
Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

Page 0/1
Votre site Internet avec Insitu Multimédia sur www.insitu.fr/html
PARTIE 1 : LE HTML ........................................................................
I – INTRODUCTION .........................................................................
1 – Le World Wide Web ........................................................................................................................3
2 – Le HTML ..................................................................................................................................3
3 - Structure principale d'une page html .........................................................................................................4
II – MISE EN FORME ........................................................................

1 – Style de caractère ...........................................................................................................................5
2 - Tailles des caractères........................................................................................................................5
3 – Polices .....................................................................................................................................5
4 - Titre dans un texte ..........................................................................................................................6
5 - Alignement du texte.........................................................................................................................6
6 - Les couleurs ................................................................................................................................7
7 - Caractère Spéciaux..........................................................................................................................9
III – LES LIENS ............................................................................

1 - Définition .................................................................................................................................10
2 - Lier des pages locales .....................................................................................................................10
3 - Lier des sites. Liens absolus. ..............................................................................................................11
4 - Liens relatifs ..............................................................................................................................11
5 - Lien vers une adresse E-mail. .............................................................................................................11
6 - Lien vers une ancre .......................................................................................................................11
7 - Lien avec des images......................................................................................................................12
8 - Couleurs des liens .........................................................................................................................12
9 - Lien avec bouton..........................................................................................................................12
10 - Lien vers la page précédente .............................................................................................................13
11 - Résumé des liens ........................................................................................................................13
12 – Exercices................................................................................................................................14
IV – LES IMAGES ...........................................................................

1 - Insérer et positionner des images dans une page............................................................................................15
2 - Dimensions des images ...................................................................................................................16
3 – Format des fichiers images. ...............................................................................................................16
4 - Encadrer des images ......................................................................................................................17
5 - L’attribut ALT ............................................................................................................................17
V – LES TABLEAUX ..........................................................................

1 - Comment faire un tableau .................................................................................................................18
2 - Bordures et quadrillage dans un tableau ...................................................................................................19
3 - Dimensions d'un tableau et des cellules ....................................................................................................19
4 - Dimensions d’un tableau ..................................................................................................................20
5 - Dimensions des cellules ...................................................................................................................20
6 - Couleurs dans un tableau ..................................................................................................................20
7 - Alignement dans un tableau : ..............................................................................................................21
8 - Ecrire autour d’un tableau .................................................................................................................21
9 - Fusionner les cellules .....................................................................................................................22
10 – Exercices................................................................................................................................22
VI – LES FRAMES ...........................................................................

1 - Frames en colonnes .......................................................................................................................24

Page 1/2
2 - Frames en lignes ..........................................................................................................................24

3 - Frames imbriquées et en quadrillages......................................................................................................25
4 - Contenu des frames .......................................................................................................................25
5 - Liens avec des frames .....................................................................................................................26
PARTIE 2 : DREAMWEAVER .....................................................................

1 - Création d’un site .........................................................................................................................27
En-tête de la page d'accueil ......................................................................................................................................28
Le menu du site....................................................................................................................................................28
2 - Définir son site ............................................................................................................................32
3 - Les fonctions pratiques ....................................................................................................................34
A - Utiliser les fenêtres de l'écran et saisir du texte ..........................................................................................................34
B - Contrôler les éléments de l'en-tête .........................................................................................................................35
C - Insérer une image .............................................................................................................................................35
D - Insérer et paramétrer un tableau ............................................................................................................................36
E - Réaliser des liens..............................................................................................................................................37
F - Vérifier l'affichage dans un navigateur ....................................................................................................................39
G - Utiliser une feuille de style ..................................................................................................................................39
H - Afficher et modifier le code source ........................................................................................................................41
I - Utiliser un jeu de cadres ......................................................................................................................................42
J - Utiliser les calques ............................................................................................................................................43
K - Manier les événements et les comportements ............................................................................................................43
L - Insérer des éléments flash ou shockwave..................................................................................................................45
M - Vérifier un site................................................................................................................................................45
N - Fabriquer une fenêtre surgissante ..........................................................................................................................48
O - Faire alterner deux images ..................................................................................................................................49
PARTIE 3 : GRAPHISME ET CONCEPTION .............................................................

1 – La charte graphique .......................................................................................................................51
2 – Les formats d’images .....................................................................................................................51
3 – Adaptez l’image au Web ..................................................................................................................52
4 – Réaliser ses propres images ...............................................................................................................52
PARTIE 4 : PUBLIER SUR INTERNET ................................................................
I – LE SERVEUR WEB .........................................................................
II –TELECHARGER PAR FTP .....................................................................

1 – Notions ...................................................................................................................................53
2 – Filezilla ..................................................................................................................................54
A – Présentation ...................................................................................................................................................54
B - Connectons-nous au serveur ................................................................................................................................55
C - Téléchargeons nos fichiers ..................................................................................................................................56

Page 2/3
PARTIE 1 : LE HTML
I – INTRODUCTION
1 – Le World Wide Web
Le World Wide Web, communément appelé WWW, peut être considéré comme la plus grande
bibliothèque du monde. Cette Bibliothèque est situé sur un réseau mondial comptant plusieurs millions
d’ordinateurs spéciaux. Les « tomes » de cette bibliothèque consistent en documents qui sont
hébergés sur ces ordinateurs appelés serveurs Web.
Un serveur Web est un ordinateur qui, quelque part dans le monde, est connecté en permanence à
l’Internet et qui contient une collection de documents Web.
Le WWW contient de nombreux types de données : des images, du texte, des vidéos, mais aussi
beaucoup d’autres formats.
Sur presque tous les sites Web, nous trouvons un tronc commun de documents HTML proprement dit.
Le secret du succès du WWW est en effet la structure des pages en format HTML que vous allez
apprendre à utiliser.
Les documents HTML sont un type spécial de fichiers texte qui contiennent des instructions pour
l’affichage de leur contenu. Ce format les rend faciles à créer et à manipuler sur tous les types
d’ordinateurs, et la publication des pages Web sur Internet est à la portée de tous.
2 – Le HTML
HTML signifie Hyper Text Markup Language, on l'appelle aussi le langage de balises. Il est conçu sur
le même principe que les premiers traitements de textes.
C'est un langage qui permet de coder une page (via un éditeur) qui sera ensuite déchiffré par votre
navigateur ou browser.
En pratique, ce qu’on appelle un site Web consiste souvent en plusieurs documents HTML qui sont
combinés à d’autres types de fichiers.
Le HTML est un langage relativement simple dès lors que l'on en comprend le fonctionnement, en
effet, en HTML, on code une page mais on code aussi les instructions qui ne se voient pas en mode
texte ( police, gras, italique, souligné, couleur...).

Page 3/4
3 - Structure principale d'une page html

Chaque instruction est entourée d'une balise, exemple :
<title> Titre de la page </title>
("Titre de la page" = Ce qui sera affiché dans le navigateur et sur les moteurs de recherche)
Remarquez que <title> est la balise d'ouverture et </title> la balise de fermeture.
<html>
<head>
-Vos Méta-Tags
-Le titre de votre page( entre <title> et </title> )
-La plupart de vos scripts ( Java et Javascripts )
</head>
<body>
-Vos textes
-Vos images
-Vos liens
-Vos tableaux
-...
</body>
</html>
Pour créer une page HTML on utilise, principalement, quatre couples de balises:
<HTML>...</HTML> marquent le début et la fin du document
<BODY>...</BODY> marquent le corps du document (contenu de la page)
<HEAD>...</HEAD> marquent l'entête de la page. On pourra trouver, dans cette partie, une autre
balise (ou directive) <META> qui permet de mettre dans le document des informations qui seront lues
par le serveur. Ces informations sont généralement le nom (NOM) de l'auteur (AUTHOR), le contenu
(CONTENT), ou encore un ensemble de mots clés (KEYWORDS) qui pourra être examiné par les
moteurs de recherche.
<TITLE>...</TITLE> permettent de donner un titre à la page (celui-ci s'affichera en haut de la fenêtre

ouverte par votre navigateur)
Exemple: Ouvrir un éditeur simple et taper le code suivant.
<HTML>
<HEAD>
<META NAME="AUTHOR" CONTENT="MOI">
<TITLE>premier titre</TITLE>
</HEAD>
<BODY>
Ma première page en HTML
</BODY>
</HTML>
Enregistrer la page sous exo1.html (ou .htm) puis visualisez-la dans un navigateur.

Page 4/5
II – MISE EN FORME
Pour mettre en forme un texte, on peut distinguer plusieurs types d’actions.
1 – Style de caractère
Style Syntaxe Effet

<b>Gras</b> Gras
Gras
<strong>Gras</strong> Gras
Italique <i>Italique</i> Italique
Souligné <u>Souligné</u> Souligné
Combiné <b><i>Gras et Italique</i></b> Gras et Italique
Exposant Base<sup>Expo</sup> BaseExpo
Indice Base<sub>Ind</sub> BaseInd
Petit <small>Petit</small> Petit
Grand <big>Grand</big> Grand
Clignotant <blink>Clignotant</blink> Clignotant
<s>Barré</s> Barré
Barré
<strike>Barré</strike> Barré
Machine <tt>Machine</tt> Machine
Code <code>Code</code> code
Citation <cite>Citation</cite> Citation
Adresse <address>Adresse</address> Adresse
Variable <var>Variable</var> Variable
2 - Tailles des caractères

Il est possible de définir la taille des caractères avec le marqueur <font> et l'attribut size. Vous pouvez
le faire de façon absolue avec des tailles de 1 à 7, ou relative en augmentant ou diminant la taille
standard. Par défaut, la taille est de 3, mais l'affichage dépend de la configuration du navigateur de
votre lecteur. Elles sont donc toutes relatives, et vous ne pouvez pas contrôler totalement avec HTML
les tailles qui seront vues par votre lecteur.
Voici la taille normale 3 <font size="3">Voici la taille normale 3</font>
Ce texte est en taille 1 <font size="1">Ce texte est en taille 1</font>
Taille 7 <font size="7">Taille 7</font>
Taille augmentée de 2 <font size="+2">Taille augmentée de 2<br>
par rapport à la taille standard 3. par rapport à la taille standard 3</font>
Les tailles sont relatives à la taille standard, et pas à la taille précédente :
<font size="5">Taille 5</font> suivi de <font size="-2">Taille -2</font> ne donne pas la taille 5-3=2
mais la taille 3-2=1
Taille 5 En diminuant de 2, on obtient la taille 3-2=1 et pas la taille 5-2=3.
3 – Polices

Page 5/6
Globale : (Explorer)
Il est possible de modifier la police d'une page entière. (Sauf les tableaux !)
Placez dans le conteneur <head>...</head> :
<head>
<basefont size="3" face="arial" color="white">
</head>
vous obtiendrez la police, la taille, et la couleur actuelle.
Locale :
Vous pouvez modifier la police d'un paragraphe, d'une phrase, d'un mot, d'une lettre.
Placez votre texte dans un conteneur <font> votre texte </font> dans le <body>
<font size="3" face="times" color="green">
texte : paragraphe, phrase, mot, lettre.
</font>
Les attributs size, color ... sont facultatifs.
4 - Titre dans un texte
<h1>Titre de niveau 1</h1>

Les balises <h1> à <h6> acceptent l'attribut align = "left" | "center" | "right" .
Exemple : <h2 align="right">Titre 2 aligné à droite.</h2> produit le résultat suivant :
Titre 2 aligné à droite.
Un titre de niveau 1 est un gros titre, alors que la taille 1 est la plus petite : Texte en taille 1
Le 6ème rang est le niveau le plus bas pour les titres, 7 est la plus grosse taille. Comparons :
taille 7
Notez que les titres saute un ligne.
Titre 1
5 - Alignement du texte
Aller à la ligne : "Enter" passe à la ligne dans votre code source, mais place uniquement un espace
dans le texte affiché. Pour aller à la ligne vous devez utiliser le marqueur <br>. Ce marqueur n'a pas
besoin d'être fermé par </br>
Notez que ce marqueur ne change pas de paragraphe.

Page 6/7
Changer de paragraphe : C'est le rôle du marqueur <p> qui passe à la ligne et en saute une. <p>
possède des attributs. Dans ce cas vous devez fermer le conteneur par </p> pour arrêter ses effets.
Alignement gauche : c'est l'alignement par défaut.

on peut le forcer : <p align="left">Texte aligné à gauche</p>
Ce texte est aligné à droite

<p align="right">texte aligné à droite</p>
Ce texte est centré

<p align="center">Texte centré</p>
ou encore
<center>Texte centré</center>
<center> est déconseillée avec HTML4
Retrait … Mettre en marge : Blockquote
<blockquote> permet de mettre en retrait à droite. Ce paragraphe est sous l'effet de blockquote.
</blockquote>
Dès la fin du conteneur, le texte reprend son alignement sans retrait, avec un saut de ligne.
<DIV> Pour faire une exception dans la règle ..."Pouce" dit l'enfant qui souhaite interrompre un
instant la règle du jeu !
Si on active <p align="right"> pour aligner un texte, il arrive souvent, qu'on souhaite un autre
alignement pour une partie seulement.
<div align="left"> alignera votre texte selon l'attribut, ici à gauche, jusqu'à </div>.
Après le texte reprend l'alignement précédent.
Le conteneur <div align="..."> ... </div>
réalise une île dans l'océan, une exception à la règle.
6 - Les couleurs
Les couleurs sont formées à partir du mélange de trois couleurs : Hexadécimale
Rouge Vert Bleu (RVB en français et RGB en anglais). Il suffit de Décimale
regarder l'écran avec une loupe pour le vérifier. Chacune de ses 3
composantes est codée de plus en plus, sur 8 bits, ce qui donne 00
28=256 valeurs possibles. Le nombre de mélanges, c'est à dire de 00
couleurs, est donc de 2563 ce qui donne plus de 16 millions de
couleurs. 33
Dans la pratique, on trouve encore beaucoup de système en mode 3*16+3=51
256 couleurs. Il faut donc utiliser un nombre x tel que x3=256. La
valeur entière la plus proche est 6, on obtiendra donc des résultats 66

Page 7/8
plus fiables en se limitant aux 63=216 couleurs standards. Elles sont 6*16+6=102
obtenues pour les valeurs données dans les tableaux.
99
9*16+9=153
CC
12*16+12=204
FF
15*16+15=255
Vous pouvez obtenir 216 couleurs standards en sélectionnant chacune des composantes dans le
tableau ci-dessous.
Rouge Comment colorier ?
Vert
Bleu Le fond
<body bgcolor="#999999">
99
Du texte
99
<font color="#FF0000">texte</font>
99
Un tableau
<table bgcolor="#CCFFFF">
Une cellule
<td bgcolor="#CCFFCC">
Vous pouvez colorier le fond de vos pages ou les caractères avec le nom des couleurs ou le code
hexadécimale. Essayer des couleurs.
Colorier le fond :
Dans le marqueur <body> on place l'attribut bgcolor
La valeur de bgcolor est :
- Soit un code hexadécimal : "#rrvvbb" (Rouge, Vert, Bleu)
- Soit un nom "red", "green", "blue", etc.
<body bgcolor="#ffcc80"> donne la couleur de cette page.
C 0 L 0 R I E R les caractères :
Dans le marqueur <font> on place l'attribut color.
La valeur de color est :
- Soit un code hexadécimal : "#rrvvbb" (Rouge, Vert, Bleu)
- Soit un nom "red", "green", "blue", etc.
<font color="#0000ff"> Texte en bleu </font> donne Texte en bleu
Changer souvent de couleur est pénible !

C 0 L 0 R I E R est obtenu avec :
<font color="#ff0000">C</font>
<font color="#009900">0</font>
<font color="#ffff00">L</font>
<font color="#0000ff">0</font>
<font color="#ff00ff">R</font>
<font color="#00ffff">I</font>
<font color="#000000">E</font>
<font color="#ffffff">R</font>

Page 8/9
7 - Caractère Spéciaux
HTML permet d'écrire sur le réseau mondial, mais chacun possède ses accents ! l'" é " est très utilisé
en français, et n'apparaît pas dans la langue anglaise. Les entités HTML permettent en partie de
résoudre votre problème. Exemples : _ , _ , Ñ , Ö , È , Æ , ÿ
Entité Entité Entité

HTML HTML HTML
Caractère Caractère Caractère
é < ©

é < ©
è > ®

è > ®
Î & ¿

Î & ¿
ç ß

ç (espace) ß
ï " å

ï " å
æ õ °

æ õ °
Au début c'est pénible, mais très vite on s'y fait, et mieux, on s'amuse à les deviner : É
Â
Par contre, il est plus difficile de lire les documents sources. Essayez de lire "Noël à
Pâques". (Noël à Pâques)

Page 9/10
III – LES LIENS

1 - Définition
C'est permettre de naviguer ! On réalise des hypermots ou des hyperimages, c'est à dire des objets
qui réagissent avec la souris le plus souvent, pour atteindre d'autres objets. C'est la base de la
navigation.
Un lien se fait obligatoirement entre deux objets : celui qui envoie et celui qui reçoit.
On place le lien dans le fichier qui envoie. Au début, limitez-vous à des fichiers dans un même
dossier, et réalisez des liens entre eux.
Deux types de liens dominent la navigation :
- Relatifs et locaux pour lier vos pages. (C’est le lien le plus fréquent)
- Absolues et globaux pour lier des sites.
Il faut connaître aussi :

- Les liens vers un point précis d'une page : Ancre.
- Les liens vers une adresse e-mail.
- Les liens relatifs.
- Les liens vers des fichiers (Téléchargement).
2 - Lier des pages locales

C'est permettre d'atteindre un autre fichier dans un même dossier, sur une même machine.
Pour des documents placés dans un autre dossier, voyez liens relatifs.
1. On réalise d'abord le fichier cible

Faites très attention à l'archivage. Notez bien le chemin du dossier et le nom du fichier.
2. Dans le fichier source, on réalise le lien vers ce fichier cible :

Pour cela, on marque un texte, ou bien une image, avec le tag <a> et l'attribut href :
<a href="fichier.htm"> Texte de l'hyper lien vers le document</a>
Exemple dans le fichier eve.htm : <a href="adam.htm">Voir Adam</a>
3 - Lier des sites. Liens absolus.

C'est atteindre un document ou une adresse à l'aide du chemin complet et de son nom.

Page 10/11
1. Il faut connaître tous les éléments :

Le type de protocole http:// ou ftp:// ... et pour des références locales : file://
Le nom de l'ordinateur pour des liens locaux sur le serveur.
Le chemin complet ainsi que le nom de fichier.
2. On confie le tout a l'attribut href du tag <a> :
Syntaxe : <a href="Protocole Serveur Chemin Fichier"> Texte du lien</a>
Exemple : <a href="http://perso.wanadoo.fr/chatinais/index.htm">Site Web chenu</a>
4 - Liens relatifs
C'est atteindre un fichier situé dans un autre dossier, sur la même machine.
1. On réalise l'arborescence.
Il est très important d'archiver ses documents de façon structurée.
Voici un exemple, celui de ce cours (figure ci-contre)
2. On indique le chemin par rapport au document utilisé.

Syntaxe : <a href="../chemin/fichier> Texte hyper lien </a>
../ remonte d'un niveau et chemin/ descend.
Exemple : Avec l'arborescence ci-contre, nous sommes dans le document
"relatif.htm" du dossier "lien". Pour atteindre le document "index.htm" il faut
remonter d'un niveau, ce qui s'écrit ../ en HTML. D'où le lien relatif suivant :
<a href="../index.htm">Index</a>
Il est possible de remonter de plusieurs niveaux :
<a href="../../courhtml/index.htm">Index</a> donne le même résultat !
5 - Lien vers une adresse E-mail.

C'est atteindre un internaute en lui envoyant un message.
On utilise le tag <a> avec l'attribut href :
Adresse : <a href="mailto:E-mail de l'internaute"> Contacter TOTO</a>
Exemple : <a href="mailto:monsieur@wanadoo.fr">Contacter l'auteur</a>
Si votre configuration est bonne, votre logiciel de messagerie doit s'ouvrir avec l'adresse du
destinataire ! Magique ?
Plus fort encore...
en plus de l'ouverture de la messagerie avec le destinataire, on peut contraindre l'objet du
message :
<a href="mailto:E-mail de l'internaute ?subject=sujet_du_message" >Contacter TOTO</a>
Exemple : <a href="mailto:chenu@wanadoo.fr?subject=lecteur du cours">Ecrire à
l'auteur</a>
6 - Lien vers une ancre

C'est permettre d'atteindre un endroit précis dans une page.
1. On marque d'abord la cible avec une ancre en utilisant le tag : <a> et l'attribut name.
Syntaxe : <a name="Ancre1"> Texte qui sera ciblé.</a>
Le texte cible est compris entre les tags <a> et </a>.
Le conteneur <a name="Ancre1">Texte qui sera ciblé.</a> est placé à l'endroit que l'on veut
atteindre.
2. On réalise le lien vers cette cible :

Page 11/12
Pour cela, on marque un texte ou une image avec le tag <a> et l'attribut href :
Syntaxe : <a href="#Ancre1"> Texte de l'hyper lien vers une ancre</a>
3. On peut placer une ancre dans un autre document :

<a href="Chemin/NomDeFichier.htm#AncreCible">Texte de l'hyperlien</a>
Exemple : <a href="../alphabet.htm#lettre_H">Atteindre H</a>
7 - Lien avec des images

C'est rendre une image réactive. En cliquant dessus l'utilisateur ira vers ce que vous déciderez.
Conseil : Faites des hypermots et des images avant les hyperimages.
On utilise le tag <a> avec son attribut href pour le lien et <img src=... > pour l'image :
Syntaxe : <a href="fichier_cible.htm"> <img src=" fichier_image.gif ou .jpg "> </a>
Exemple : <a href="cibleimg.htm">< img src="imageli.gif"></a>
Notez : On met l'image à la place de l'hypermot.
Passez la souris sur ces images et observez le pointeur.
Pour ôter le cadre et garder le lien :

<img src="imageli.gif" border="0">
8 - Couleurs des liens

Il y a 3 états pour un lien : non visité, activé, visité.
Chaque état peut être colorisé.
Attention "link" est, soit un marqueur <link> , soit un attribut de <body link="...">.
1. Lien non visité : Par défaut c'est souvent bleu.
<body link="blue"> colorie les hypermots avant visite en bleu.
Il est possible d'utiliser le code hexadécimal : <body link="#0000FF">
2. Lien activé :
<body alink="red"> colorie les hypermots en rouge pendant le clic.
Il est possible d'utiliser le code hexadécimal : <body alink="#FF0000">
3. Lien visité : Par défaut c'est souvent violet.
<body vlink="green"> colorie les hypermots des liens visités en vert.
Il est possible d'utiliser le code hexadécimal : <body vlink="#00FF00">
4. Exemple : (Celui du sommaire et de cette page)
<body link="#0000ff" alink="#ff0000" vlink="#005500">
9 - Lien avec bouton

bou
Vous pouvez offrir un ton pour naviguer.
On utilise un formulaire
<form action=" fichier_cible.htm " >
<input type="submit" value=" etiquette_bouton">
</form>
Exemple :
<form action="../formulr/frfoenv.htm" target="_top">Voir les
<input type="submit" value="formulaires">
</form>

Page 12/13
10 - Lien vers la page précédente

Le navigateur mémorise votre parcours. Il est donc possible de revenir.
Revenir avec un hypermot :

Syntaxe : <a href="#" onClick="window.history.go(-1)"> Retour </a>
Revenir avec un bouton :

Syntaxe :
<form>
<input type="button" value="Retour" onClick="window.history.go(-1)">
</form>
Remarque :
Ce lien existe sur les navigateurs. Ce sont les célèbres boutons ci-contre
:
<a href="#" onClick="window.history.go(-1)"><img src="histnet.gif"> </a>
11 - Résumé des liens
Types Exemples
Local
<a href="local.htm">ReVoirLoc</a>
Même dossier
Vers un site
<a href="http://perso.wanadoo.fr/chatinais/index.htm">Site
URL
HTML</a>
indispensable
Absolu
Chemin
<a href="file://C:/dossier/absolu.htm">ReVoirAbs</a>
complet
indispensable
Relatif
<a href="../dossier/relatif.htm">ReVoirRel</a>
../ remonte
Courrier <a href="mailto:chenu@wanadoo.fr">Contactez</a>
Vers une <a
messagerie href="mailto:chenu@wanadoo.fr?subject=tester">Contactez</a>
Poser ancre : <a name="ici">Rendez vous</a>
Y aller : <a href="#ici">Aller</a>
Image <a href="image.htm"><img src="imagel.gif"></a>
<form action="libouton.htm">
Bouton <input type="submit" value="Go">
</form>
Retour <a href="#" onClick="window.history.go(-1)"> Retour </a>

Page 13/14
12 – Exercices
A - Lien local dans un même dossier
Placez un lien dans chaque fichier pour naviguer de l'un à l'autre.
B - Atteindre un site
Faire une page qui vous permettra d'ouvrir vos sites préférés.
Ajoutez un lien pour permettre aux lecteurs de vous écrire.
C -Pour utiliser une ancre, il vous faut combien de fichier ?
Cet exercice vous permettra de faire des liens avancés.
1. Créer un fichier "alphabet.htm" avec l’alphabet en verticale.
2. Dans le haut de l'alphabet, posez un hyperlien "atteindre R" .
3. Dans votre premier fichier posez un lien pour atteindre R de "alphabet.htm"
D – Nous sommes dans la page ancrage.htm
Observez l'arborescence ci-dessous .Quelle sera le lien pour allez vers la page adam.htm ?

Page 14/15
IV – LES IMAGES
Attention aux images. Elles utilisent beaucoup de place sur les disques, sont parfois très longues à
télécharger, et demandent beaucoup de temps si vous les créez !
Il est possible d'insérer des images :

Dans le fond :
<body background="nom_de_fichier.jpg ou .gif">
exemple. <body background="carres.jpg">
Dans les pages : (très utile)

<img src=" mouche.gif ">
Il est souvent pénible de les positionner.
Dans les tableaux :

Mettre dans les cellules entre <td><img src="fichier.jpg"> </td>
Avec des liens :

Mettre dans l'image entre <a href="..." ><img src="fichier.jpg"> </a>
1 - Insérer et positionner des images dans une page.
<img src="nom_du_fichier.jpg ou gif"> insère l'image comme un caractère. Remarque : bien que
l'alignement soit verticale, on utilise align et pas valign comme dans les tableaux.
<img src=" disques.jpg "> place l'image comme un caractère et le texte continue en
bas. Si la ligne déborde, elle continue sous l'image. Pour juxtaposer, utilisez align="left" ou un tableau.
<img src="carres.jpg" align="left"> insère l'image comme un caractère, mais si la ligne

déborde, l'image reste à gauche et le texte et l'image sont juxtaposés. Si le texte à son
tour déborde, il continue sous l'image. Pour garder l'effet de colonne utilisez un tableau.
<img src="des.jpg" align="right"> place l'image à droite.
2 - Dimensions des images
Quand on modifie une seule dimension, l'autre est modifiée proportionnellement.

Page 15/16
Largeur :
<img src="boules.jpg" width=40>
Résultat : Proportion conservé
Hauteur :
<img src="boules.jpg" height=30>
Résultat : Proportion conservé
Les deux :
<img src="boules.jpg" width=100 height=40>
Résultat : Quand les dimensions n'ont pas le même multiplicateur on obtient

une anamorphose.
3 – Format des fichiers images.

Afin de diminuer leur taille en octets, les images sont compressées.
Deux formats bitmaps uniquement sont reconnus : GIF et JPG
GIF : 8 bits 28=256 couleurs.

GIF entrelacé (89A) . L'image apparaît floue puis de plus en plus nette.
GIF transparent. La couleur transparente est celle du fond.
GIF animé. Les images défilent comme dans un film.
JPG : Il accepte jusqu'à 24 bits ce qui donne 224 > 16 millions de couleurs !
C'est le format pour diffuser des photos sur le web.
Le taux de compression est paramétrable. Cherchez un bon compromis entre taille et qualité.
Choisir entre GIF et JPG :

GIF : animation, transparence, dessin avec peu de couleurs, contours nets.
JPG : photographie, plus de 256 couleurs, contours complexes.
4 - Encadrer des images

Attention : les images réactives ont une bordure, sauf si vous ajoutez border=0 :
<img src="nom_fichier.jpg" border=0>

Page 16/17
Image
modèle Border=1
<img src="coccinel.jpg" border=1>
les bordures
faites avec des Résultat :
logiciels de
dessins sont Border=5
souvent plus <img src="coccinel.jpg" border=5>
agréables :
Résultat :
5 - L’attribut ALT
Les images sont longues à charger. Informez votre lecteur en lui affichant un message.
Syntaxe :
< img src="bidon.gif" alt = " Grâce à ALT vous le savez ! " >
< img src="fichier.gif ou jpg" alt = " Message envoyé au lecteur en attendant ... " >
V – LES TABLEAUX
Ils sont très utiles. Les alignements ne sont pas toujours faciles avec l'HTML.
Les tableaux sont souvent la solution qui permet d'obtenir des alignements complexes.
Structure de base d'un tableau :

Page 17/18
<table>
Marqueur de tableau
<tr>
Marqueur de ligne ("r"=row=rangée=ligne)
Marqueur de cellule et fin de cellule.

<td> ... </td> <td> ... </td>
Chaque <td> ... </td> réalise une
colonne."d"=data=donnée
</tr>
Fin de ligne
Fin du tableau
</table>
Les cellules titres utilisent le marqueur <th> à la place de <td>

Pour obtenir un cadre, il suffit d'ajouter l'attribut border : <table border>
1 - Comment faire un tableau

Chaque <tr> crée une ligne. Chaque <td> ou <th> crée une colonne.
Exemple :
<table border>
<tr> <th> Euros </th> <th> Francs </th> </tr>
<tr> <td> 1 E </td> <td> 6,56 F </td> </tr>
...ainsi de suite pour chaque nouvelle ligne...
<tr> <td> 15,24 E </td> <td> 100 F </td> </tr>
</table>
Résultat :
Euros Francs
1E 6,56 F
...ainsi de suite pour chaque nouvelle ligne...
15,24 E 100 F
Utilisez le "copier-coller" pour bâtir rapidement vos cellules.
Touche CTRL+C pour "copier" et CTRL+V pour "coller"
2 - Bordures et quadrillage dans un tableau

Bordures :
<table> <table border> <table border="4">
A1 A1 A1
B1 B1 B1
C1 C1 C1
A2 A2 A2
B2 B2 B2
C2 C2 C2

Page 18/19
Quadrillage :
<table border cellspacing="0"> <table border cellpadding="10">
Épaisseur du quadrillage Espace entre texte et quadrillage
A1 A1
B1 B1
C1 C1
A2 A2
B2 B2
C2 C2
3 - Dimensions d'un tableau et des cellules

Pour dimensionner :
Un tableau : mettre les attributs dans le marqueur : <table width="..." height="..." >
Une cellule : mettre les attributs dans le marqueur : <td width="..." height="..."> ou <th ...>
Dimensions relatives : (avec "%")

Voici un tableau qui occupe 75% de l'objet qui le contient
Tableau avec width="75%" et height="10%"
Cellule dimensionnée à 60% du tableau Reste (40%)
.
Observez l'occupation relative des 75%=3/4.
Dimensions absolues : (sans "%")

Voici un tableau qui occupe 400 pixels
Tableau avec width="400" pixels et height="10" pixels

Cellule dimensionnée à 250 pixels Reste 150
Observez l'occupation constante des 400 pixels.

Les dimensions dépendent aussi du texte, de la place dans la fenêtre, et de l'espace entre le texte et
le quadrillage.
4 - Dimensions d’un tableau

Dimensions relatives :
<table width="75%"> : Contraint le tableau à occuper 75% de la largeur de l'objet qui le
contient.
<table height="10%"> : Contraint le tableau à occuper 10% de la hauteur de l'objet qui le
contient.
Tableau avec width="75%" et height="10%"
Observez l'occupation relative des 3/4=75%.
Dimensions absolues :
<table width="400"> : Contraint le tableau à une largeur de 400 pixels.

Page 19/20
<table height="10"> : Contraint le tableau à une hauteur de 10 pixels.
Tableau avec width="400" pixels et height="10" pixels
5 - Dimensions des cellules

Dimensions relatives :
<td width="90%"> : Contraint la cellule à occuper 90% de la largeur de l'objet qui le contient.
<td height="10%"> : Contraint la cellule à occuper 10% de la hauteur de l'objet qui le contient.
Reste
Cellule avec width="90%"
10%
Voir cette cellule dans un tableau plus étroit (50%).
Observez l'occupation relative de 90%.
Dimensions absolues :
<td width="400"> : Contraint la cellule à occuper une largeur de 400 pixels. (Si c'est possible)
<td height="10"> : Contraint la cellule à occuper une hauteur de 10 pixels.
Cellule avec width="400" pixels et height="10" pixels Reste
Voir cette cellule dans un tableau plus large (90%).
6 - Couleurs dans un tableau

Fond et quadrillage : <table border bgcolor="yellow" bordercolor="green" >
Pour une cellule seulement : dans le tag cellule <td bgcolor="yellow">Contenu cellule</td>
Ombrages : <table border bodercolordark="green" bordercolorlight="yellow" >
Bordure Ombre
Fond Cellule
Quadrillage (Explorer)
<table
<table <td <table
bordercolordark="green"
bgcolor="red"> bgcolor="yellow"> bordercolor="green" >
bordercolorlight="yellow" >
A1 A1 A1 A1
B1 B1 B1 B1
C1 C1 C1 C1
A2 A2 A2 A2
B2 B2 B2 B2
C2 C2 C2 C2
7 - Alignement dans un tableau :

Il ne faut pas confondre alignement dans un tableau et alignement d'un tableau.
Pour aligner un tableau voir : alignement.
Pour disposer le texte dans sa cellule :

<td align="center"> Centre le texte horizontalement dans la cellule.</td>
<td align="right"> Aligne le texte à droite </td>
<td align="right" valign="bottom"> Aligne le texte à droite et en bas </td>
Les valeurs pour ALIGN sont : "LEFT" (par défaut), "CENTER", "RIGHT"
Les valeurs pour VALIGN sont : "TOP", "MIDDLE" (par défaut), "BOTTOM"

Page 20/21
On peut vérifier ce qui précède en plaçant notre tableau dans un tableau dont on centre les éléments :
<TABLE BORDER WIDTH="100%"> <TR> <TD ALIGN="CENTER">
<table border>
<tr><td>Tableau centré par un tableau</td> </tr>
</table>
</TD> </TR></TABLE>
Tableau centré par un tableau
8 - Ecrire autour d’un tableau

C'est le cas des titres et des légendes. Ils sont attachés au tableau.
En-tête :
<table>
<caption valign="top"> Titre du tableau </caption> C'est la valeur par défaut de caption.
<tr> <td> A1 </td> ... </tr> ... </table>
Titre du tableau
A1 B1 C1 D1
Pied :
<table>
<caption valign="bottom" align="right"> Légende du tableau </caption>
<tr> <td> A1 </td> ... </tr> ... </table>
Légende du tableau
A1 B1 C1 D1
À côté : Attention DÉLICAT !!

<table align="left"> (En alignant le tableau à gauche le texte est à droite ! )
<tr> <td> A1 </td> ... </tr> ... </table>
</table> Texte que l'on veut mettre à côté du tableau <br
clear="all"> A1
B1
C1
D1
Texte à droite du tableau

9 - Fusionner les cellules
<td colspan="3"> Fusionne 3 colonnes </td>
<td rowspan="2"> Fusionne 2 lignes </td>
Fusion de 3 colonnes Fusion de 2 lignes
<table border> <table border>
<tr><td colspan="3"></td></tr> <tr><td rowspan="2">Fusion</td>
<tr><td>A1</td><td>B1</td><td>C1</td></tr> <td>A1</td> </tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr> <tr><td>A2</td> </tr>
</table> </table>
Fusion de 3 colonnes Fusion de 2 lignes
A1
A1
B1
C1 A2

Page 21/22
A2
B2
C2
10 – Exercices
A - Essayez de dessiner le résultat sans regarder la réponse !
<HTML>
<HEAD></HEAD>
<BODY>
<table border bgcolor="#EEEEEE">
<tr><td><font color="#FF0000"><b>CHOISISSEZ</b></font></td></tr>
</table>
<p>
<TABLE BORDER>
<TR><TD><table border="6" width="100%">
<tr><td><a href="cinema.htm">CINEMA</a></td></tr></table></TD>
<TD>Films à l'affiche...</TD></TR>
<tr><td><a href="concert.htm">CONCERT</a></td></tr></table></TD>
<TD>Où irez-vous cette semaine ?</TD></TR>
<tr><td><a href="theatre.htm">THEATRE</a></td></tr></table></TD>
<TD>Un spectacle exceptionnel</TD></TR>
</TABLE>
</BODY>
</HTML>
B - Essayez de faire une page comme celle-ci :
Multiple Exemple :
Préfixe Symbole Multiplicateur
téra T 1012 1 500 000 000 octets
giga G 10 9 c'est
méga M 10 6 1,5 Go = 1500 Mo
kilo k 10 3

Page 22/23
Solution A
CHOISISSEZ
CINEMA
Films à l'affiche...
CONCERT
Où irez-vous cette semaine ?
THEATRE
Un spectacle exceptionnel
Solution B
<HTML>
<HEAD>
</HEAD>
<BODY>
<p align="center">
<table border>
<tr><th colspan="3" align="center">Multiple</th><th>Exemple :</th></tr>
<tr><th>Préfixe</th><th>Symbole</th><th>Multiplicateur</th>
<td rowspan="5">1 500 000 000 octets <br>
c'est <br>
1,5 Go = 1500 Mo</td>
</tr>
<tr><td>téra</td><td>T</td><td>10<sup>12</sup></td></tr>
<tr><td>giga</td><td>G</td><td>10<sup> 9</sup></td></tr>
<tr><td>méga</td><td>M</td><td>10<sup> 6</sup></td></tr>
<tr><td>kilo</td><td>k</td><td>10<sup> 3</sup></td></tr>
</table>
</p>
</BODY>
</HTML>

Page 23/24
VI – LES FRAMES
Attention : <frameset> remplace <body>
1 - Frames en colonnes
20
<frameset cols="20%,80%">
80
ici sera l'appel du contenu ...
</frameset>
Valeurs relatives, absolues, ou proportionnelles :

Plusieurs formes de valeurs sont autorisées :
<frameset cols ="20%,*"> donne le même résultat.
<frameset cols ="20,*"> : la première colonne occupe 20 pixels, l'autre le reste.
<frameset cols ="100%,200%,300%"> donne 3 colonnes. La 2ième est double de la 1ère et la
3ième triple de la 1ère.
<frameset cols ="*,2*,3*"> idem ci-dessus.
<frameset cols ="10,20%,*,2*"> donne des colonnes de 10 pixels, 20% de la largeur de la
fenêtre pour la 2ième, et le reste est partagé en 3 : 1 pour la 3ième et 2 pour la dernière.
2 - Frames en lignes
20
<frameset rows="20%,80%">
ici sera l'appel du contenu ... 80
</frameset>
Valeurs relatives, absolues, ou proportionnelles :

Plusieurs formes de valeurs sont autorisées :
<frameset rows ="20%,*"> donne le même résultat.
<frameset rows ="20,*"> : la première ligne occupe 20 pixels, l'autre le reste.
<frameset rows ="100%,200%,300%"> donne 3 lignes. La 2ième est double de la 1ère et la 3ième
triple de la 1ère.
<frameset rows ="*,2*,3*"> idem ci-dessus.
<frameset rows ="10,20%,*,2*"> donne des lignes de 10 pixels, 20% de la hauteur de la
fenêtre pour la 2ième, et le reste est partagé en 3 : 1 pour la 3ième et 2 pour la dernière.

Page 24/25
3 - Frames imbriquées et en quadrillages

A - Frames imbiquées
<frameset rows="15%,85%"> 15
ici sera le contenu de la frame ligne 15%.
<frameset cols="20%,80%"> 20
ici seront les contenus des colonnes 20%, 80% dans la ligne 85% ... 80
Suite
</frameset>
</frameset>
B - Frames en quadrillage
.
*
<frameset rows="15%,*" cols="20%,*">
*
ici seront les contenus des 4 cadres ...
85% en hauteur
</frameset>
80% en largeur
4 - Contenu des frames

Les noms de vos fichiers et de vos frames sont en vert. C'est vous qui les choisissez.
Frames en colonnes :
<frame src=" fichierColG.htm" name=" ColG">
<frame src=" fichierColD.htm" name=" ColD">
</frameset>
Frames en lignes :
<frame src=" fichierLigH.htm" name=" LigH">
<frame src=" fichierLigB.htm" name=" LigB">
</frameset>
Frames imbriquées :
<frame src=" fichierLigHaut.htm" name=" ligHaute">
<frame src=" fichierLigBasColG.htm" name=" BasG">
<frame src=" fichierLigBasColD.htm" name=" BasD">
</frameset>
</frameset>
5 - Liens avec des frames

Page 25/26
Il faut nommer vos cadres pour éviter la pagaille. Voyez les cibles réservées en cas de problème !
Ci-dessous : Les noms de fichiers et de frames sont en vert
Deux attributs : C'est le marqueur <a> qui assure les liens avec les attributs :
- href pour l'appel du fichier et
- l'attribut target pour la destination.
Syntaxe :
<a href="FichierAppelé.htm" target="NomDuCadreCible" > Aller vers</a>
Exemple :
Actuellement vous avez 2 frames. Celui de gauche "plan" contient les liens et celui de droite
"ColDroite" affiche le fichier appelé depuis "plan".
Voici le code source du fichier "planfram.htm" :

<a href="lien.htm" target="ColDroite">Lien</a><br>
L'utilisation des frames exige beaucoup de rigueur :

- Organisez bien vos informations avant de vous lancer.
- Donnez des noms judicieux aux fichiers et aux frames.
- Si vous naviguez à l'extérieur de vos frames, soyez encore plus rigoureux, car votre page
s'affichera dans votre frame. Pour mieux naviguer, ou en sortir, vous disposez des noms
réservés suivants :
Cibles réservées l'URL est affiché...

_self ...dans la frame du lien
_parent ...dans la frame liée
_blank ...dans une autre tache sans frame
_top ...sans les frames actives. Très utile.
Voici le code source dans "planfram.htm" qui permet de revenir au sommaire :
<a href="../somrhtml.htm" target="_top">HTML</a>

Page 26/27
PARTIE 2 : DREAMWEAVER
1 - Création d’un site
Avant même de commencer à écrire quoi que ce soit, nous allons mettre en place l'ossature du site
dans votre répertoire personnel.
A l'aide de l'explorateur de Windows, crée un répertoire "Mon site Web" dans votre répertoire
personnel. Dans ce répertoire, une page index.htm, une page chanteur.htm, une page loisirs.htm,
une page chinois.htm et un sous-répertoire "images".
Conseil : Vérifiez que les fenêtres Insertion et Propriétés sont visibles, sinon, allez dans le
menu fenêtres et sélectionnez-les, elles sont très utiles pour la suite.
Par convention, la page d'accueil d'un site Web porte toujours le nom index.htm ou default.htm, il
faut donc commencer par reprendre la page index.htm enregistrée et la compléter.
Ajouter un titre
Modifier => Propriétés de la page. Dans la zone titre indiquez « Mon premier site Web ».

Page 27/28
Puis cliquer sur OK.
En-tête de la page d'accueil

En haut de la page, écris le texte "Au programme de mon site Web" .Sélectionne le texte que tu viens
de frapper. Dans la fenêtre des propriétés, sélectionne une présentation pour ce titre:
Sélectionne une police de caractères, le centrage du paragraphe et les

caractères gras . Augmente la taille des caractères jusqu'à la valeur 5.
Sélectionne également une couleur pour cet en-tête.
Nous allons maintenant insérer un texte minimal dans ta page d'accueil, ainsi qu'un menu qui
permettra aux visiteurs de naviguer dans ton site.
Indiquez quelques éléments d'informations vous concernant (nom, prénom,…). Ces éléments seront
centrés horizontalement dans la page. Utilisez le bouton de la fenêtre des propriétés pour centrer
ce texte.
Le menu du site
Nous allons créer un tableau invisible pour positionner le menu du site au centre de la page d'accueil.
Insertion=>tableau
Reproduire les directives reprises dans la copie d'écran ci-dessous
Un cadre qui sera invisible dans le navigateur apparaît ; nous allons maintenant le centrer.
Déplacez le pointeur de souris sur le coin supérieur gauche du cadre. Il prend alors la forme d'une
quadruple flèche.

Page 28/29
Par un clic de souris, sélectionne le tableau puis centre-le en utilisant la palette de propriétés.
La page d'accueil se présente maintenant comme sur l'illustration ci-dessous:
On peut maintenant insérer le menu du site Web dans le tableau.
Utilisez la mise en forme liste a puce disponible à partir de la palette des propriétés .
• Mon chanteur préféré
• Mes loisirs préférés
• Mon portrait chinois

Il n'y a plus qu'à effectuer les liens vers les différentes pages du site. Sélectionne la rubrique Mon
chanteur préféré. Dans la palette des propriétés, clique sur l'icône présentant un petit dossier à
côté de la rubrique Lien
Dans la boîte de dialogue, sélectionne le fichier chanteur.htm puis clique sur Sélectionner.

Page 29/30
Procède de même pour les autres rubriques.

La page <Mon chanteur préféré>
Pour faciliter la navigation dans ton site, nous allons insérer un lien vers la page d'accueil en haut et à
droite de chaque page, en commençant par la page actuelle.
Crée un tableau invisible centré de 550 pixels comprenant une ligne et deux colonnes. Ce tableau
contiendra le texte du corps de la page. Dans ce tableau, on trouvera une photo du chanteur
(éventuellement récupérée sur le web) et une liste de ses principaux titres.
Partez à la recherche d'une photo de ton chanteur/ta chanteuse préféré(e) sur le web. Quand tu as
trouvé une image qui te convient, fais un clic du bouton droit sur cette image.
Un menu contextuel apparaît.Il te propose, entre-autres, d’enregistrer l’image sous… Sélectionnez

cette commande.
Dans la boîte de dialogue d'enregistrement qui

apparaît ensuite, retrouvez le dossier "Mon site Web"
et entrez dans le dossier "images" puis enregistrez-la..
Retournez dans le logiciel Dreamweaver.
Par un clic de souris, positionne le curseur de texte à l'endroit où l'image doit apparaître dans ta page.
Ici, c'est dans la cellule gauche du tableau de la page "chanteur.htm".
Dans le menu "Insertion" de Dreamweaver, sélectionnez la commande "Image". Dans la boîte de

dialogue qui suit, recherche zl'image.
Sélectionnez-la par un clic de souris sur le nom du fichier et insérez-la dans la page en cliquant sur le
bouton "Sélectionner".
L'image vient s'insérer à sa place dans La page.
La page <Mes loisirs préférés>

Page 30/31
Trouvez trois images et essayer de mettre en page comme ci-dessous.

Le basket
L'escalade
La sieste
La page <Mon portrait chinois>
Ton portrait chinois sera présenté dans un tableau de 5 lignes et 2 colonnes.
Essayez d’obtenir un tableau du genre suivant, que vous complétez selon vos caractéristiques. Ce
tableau doit être centré sur la page.
Une couleur Le vert
Un acteur Richard Harris
Un animal L'hippopotame
Un objet Une plume de phénix
Un pays Le Tibet
Sur toutes les pages
Insérer votre email. Un lien vers une adresse email n'est rien d'autre qu'un lien hypertexte. Indiquer
donc ce lien à l'aide de la palette des propriétés.
2 - Définir son site

Nous allons découvrir que le logiciel Dreamweaver gère parfaitement la structure des sites Web qui
sont construits grâce à lui.
Voici un exemple de site sur lequel nous allons travailler. Observez bien le schéma ci-dessous.
La fenêtre Fichiers va nous permettre de définir et visualiser la structure du site:
Site=>Nouveau site, complétez ensuite la boîte de dialogue qui apparaît en indiquant:
o Le nom du site (afin de pouvoir le distinguer d'un autre site réalisé sur le même
ordinateur)
o L'endroit précis où se trouve le site sur le serveur local, clique sur l'icône pour
retrouver la localisation précise du fichier index.htm

Page 31/32
o L'adresse finale du site sur le serveur Web distant.
Les autres informations ne doivent pas être fournies.
Après quelques instants de travail, la structure du site est définie et nous allons pouvoir la découvrir:
La structure du site a maintenant été analysée par le logiciel Dreamweaver qui a suivi tous les liens intégrés aux
pages. Voyons ce qu'il a découvert.
La fenêtre d'analyse de la structure du site se divise en deux zones. La zone de droite reprend la liste des fichiers
inclus dans le répertoire personnel, la partie gauche est vide:

Page 32/33
Dans la fenêtre fichiers, cliquer sur afficher/carte du site pour visualisez la structure "en arbre" du site web.
3 - Les fonctions pratiques
A - Utiliser les fenêtres de l'écran et saisir du texte
La fenêtre "Document" présente

une barre de menus déroulants
classique où vous retrouverez
toutes les commandes du
logiciel.

Page 33/34
Il n'y a pas de barre d'outils

classique mais la commande
"fenêtre" puis "insertion"
permet d'afficher une boîte à
outils présentant plusieurs
aspects suivant la tâche à
réaliser. Un survol de souris sur
chaque icône permet de
découvrir sa fonction.
La commande "propriétés" du
menu "Fenêtre" déclenche
l'affichage de l'inspecteur de
propriété. Cet inspecteur est
contextuel. Il changera selon que
l'objet mis en surbrillance est du
texte, une image ou un tableau.
La frappe du texte se fait comme dans un traitement de texte classique et toute les commandes de
format, de couleur, etc... sont réglables dans cet inspecteur de propriétés
B - Contrôler les éléments de l'en-tête
La fenêtre d'objet "En-tête" permet de rajouter les objets nécessaires tel que les "meta"
et les mots clés. N'oubliez pas de séparer ces derniers par le signe ";".

Page 34/35
C - Insérer une image
L'outil "image" de la fenêtre d'objets "commun" permet de choisir l'image dans une
fenêtre du genre "explorateur".
Une
prévisualisation
est présentée
ainsi qu'un
affichage des
propriétés de
l'image.
Une fois
affichée l'image
est
sélectionnable
par un simple
clic. Dans ce
cas l'inspecteur
de propriétés
change
d'aspect.
Il est fortement conseillé de ne pas changer les valeurs L et H pour que l'affichage soit correct.

Page 35/36
D - Insérer et paramétrer un tableau
Cliquez sur l'icône tableau de la fenêtre d'objets "commun". Une boîte de

paramétrage s'affiche pour définir les caractéristiques du tableau.
Après validation le
tableau est inséré dans
la page.
L'inspecteur de
propriété du tableau
s'affiche en cliquant sur
les bords droits ou
inférieurs du tableau
ainsi que sur les limites
séparatives (sauf les
bords supérieurs et
gauche).
L'inspecteur change si
le curseur est dans une
cellule du tableau. Cela
permet d'accéder à
d'autres propriétés

Page 36/37
La modification de ce
tableau se fait en
plaçant la surbrillance
dans le tableau et en
cliquant à droite.
Le passage de la souris sur les bordures gauche ou supérieure ou un balayage sur les cellules
sélectionne la ligne, la colonne ou les cellules concernées. Les commandes passées alors ne
s'appliqueront qu'à la sélection qui est encadrée.
E - Réaliser des liens

Dreamweaver offre de nombreuses méthodes pour instaurer des liens. Pour toutes ces méthodes il faut au préalable
mettre en surbrillance le texte ou l'image qui seront le point de départ du lien.
La fenêtre lien permet d'écrire

directement le nom du fichier lié.
La petite icône "viseur" peut être

prise avec la souris et traînée vers
La petite flèche à droite permet de choisir directement le fichier dans la liste des
un fichier ouvert à côté du fichier
fichiers déjà ouverts sur le bureau.
de travail lorsqu'on travaille en
mode "multifenêtre"

Page 37/38
L'icône dossier ouvre un

explorateur ordinaire pour
parcourir l'arborescence.
Pour une bonne rédaction du lien

il est impératif de choisir un fichier
déjà situé à l'intérieur du site que
l'on a déclaré au début. Sinon le
lien est construit de façon absolue
avec une adresse du genre "file c:
\\....." il ne fonctionnera pas sur un
serveur à distance.
Si le document doit être affiché dans une fenêtre particulière n'oubliez pas de le préciser en renseignant la case
"Cible".
La réalisation d'un lien interne à la page nécessite la pose d'une ancre.
Mettez le mot devant servir d'ancre en surbrillance et sélectionnez l'outil "ancre" dans
les objets invisibles. Nommez l'ancre dans le cadre "ad hoc" en n'utilisant qu'une chaîne
de caractères minuscules sans aucun caractère spécial ni d'espace.
Retournez au mot devant servir de point de départ au lien et utilisez le petit viseur en le
traînant sur le signe d'ancre. Le nom de l'ancre précédé du signe "#" s'affiche dans la
fenêtre "Lien". Si cette ancre est loin, faites défiler la page en mettant le viseur sur les
flèches de l'ascenseur.
La vérification d'un lien est une tentation fréquente. Un clic droit sur un lien affiche un
menu contextuel avec la commande "Afficher la page liée". Une nouvelle fenêtre
s'ouvre alors avec le fichier demandé.

Page 38/39
F - Vérifier l'affichage dans un navigateur

Dans le menu
"Fichier"
utilisez la
commande
"Aperçu dans
le navigateur"
et choisissez le
navigateur.
La commande "Vérifier navigateur cible" vous permet de faire une analyse ligne par ligne de la
page écrite et de voir ainsi quelles seront les versions de navigateurs qui poseront des problèmes pour
afficher votre page.
G - Utiliser une feuille de style

L'utilisateur de Dreamweaver peut très bien faire toutes ses pages en indiquant les formats au fur et à mesure
de la composition. Cela sera un peu fastidieux s'il a envie de sortir des sentiers battus en matière de police,
de taille, de couleur, d'alignement. L'utilisation d'une feuille de style permet de définir par avance les styles à
appliquer aux différentes parties d'un document ou d'un ensemble de document. Deux modalités sont
possibles :
- l'une incorpore la feuille de style au document,
- l'autre utilise une feuille de style externe liée au document ce qui permet d'utiliser la même feuille de style
pour un ensemble de page, voir pour tout un site.
Pour une feuille de style

incorporée au document, la
commande style du menu
"fenêtre" permet de d'afficher
une nouvelle fenêtre dédiée aux
style. Par un "glissé déposé"
elle peut être superposée à la
fenêtre "objets"

Page 39/40
Au départ la feuille de style est

vide. Si l'on clique sur
"Nouveau", une nouvelle
fenêtre permet de créer un
nouveau style. Ce style pourra
ensuite être "Edité" afin de le
modifier.
La première boîte demande de

sélectionner le type (gardez le
premier choix) et de lui donner
un nom. Ce nom doit
commencer par un point et ne
comporte que des caractères
minuscules ordinaires et des
chiffres sans espaces ni
accents.
La fenêtre de définition des

styles offre la possibilité de
définir un grand nombre de
paramètres. Activez les
catégories utiles et faites tous
les réglages avant de valider.
Pour appliquer le style à un objet, placez le pointeur à l'intérieur et cliquez

sur le style dans la boîte de style. Vous pouvez généralement voir l'effet à
l'écran. Pour certains styles il faudra passer par un aperçu dans le
navigateur. Vous pourrez à tout moment changer le style en l'éditant. Tous
les objets auxquels vous aurez appliqué ce style se conformeront à la
nouvelle définition.

Page 40/41
Pour une feuille de style

externe qui correspond à un
fichier ".css" la démarche est
différente au début. En cliquant
sur "lien", vous ouvrez la boîte
"Ajouter une feuille de style
externe". Pour rechercher une
feuille existante cliquez sur
"parcourir".
Pour en créer une nouvelle,

entrez un nom de fichier qui
n'existe pas encore en
terminant par ".css". Vous
pourrez ensuite l'éditer et créer
ou modifier des styles.
Au moment de la mise en place sur le serveur n'oubliez pas de joindre votre feuille de style à vos fichiers
textes et images.
H - Afficher et modifier le code source
La fenêtre "code source" est affichable à tout moment par un clic

sur la sixième icône de cette barre.
Les changements opérés dans le

code sont, pour les choses les
plus simples, immédiatement
répercutée dans la fenêtre de
document. Pour les
comportements plus compliqués
il faudra aussi passer par un
aperçu dans le navigateur de son
choix. Si des incohérences
apparaissent à la suite de ces
modifications, des surlignages de
couleurs vous rappellent à
l'ordre.

Page 41/42
Lorsque l'on importe du code issu d'un autre logiciel d'édition html. Il peut être très intéressant de
nettoyer les fichiers des balises inutiles. Choisir pour cela "commandes" puis "nettoyer l'HTML"
I - Utiliser un jeu de cadres
La création d'un jeu de cadres est

toujours un peu difficile. Il faut avoir
créé à l'avance les pages qui seront
positionnées dans ces cadres. Un fois
que cela est fait, ouvrez une nouvelle
page et sélectionnez "Jeu de
cadres" dans le menu "modifier".
Choisissez le mode de fractionnement
et observez la mise en place d'une
bordure que vous pouvez déplacer
avec la souris. Avant d'aller plus loin
enregistrez votre jeu de cadre par
"Fichier" et "Enregistrer le jeu de
cadres sous". N'oubliez pas que ce
fichier est indépendant des fichiers
qu'il est appelé à accueillir.
Un inspecteur de propriété "cadre"

permet de régler les paramètres du
jeu de cadres.
Pour sélectionner un cadre particulier

appuyez sur la touche <alt> en
cliquant dans ce cadre avec la souris.
Un nouvel inspecteur de propriétés
s'affiche. Il permet de régler les
caractéristiques du cadre et en
particulier le nom du fichier à afficher
dans le cadre. N'oubliez pas que la Ici le cadre appelé "gauche" est réglé pour empêcher le
première chose à faire est de nommer redimensionnement et l'affichage des barres de défilement. Les
ce cadre. marges et les bordures sont à zéro.

Page 42/43
Si vous voulez faire un lien d'un cadre

à son voisin n'oubliez de sélectionner
le nom du cadre dans le champ "cible"
de l'inspecteur de propriétés de lien.
Lors de la fermeture du jeu de cadre un message demandera si vous voulez enregistrer aussi bien les
modifications du jeu de cadre que celles affectant les fichiers affichés dans les cadres.
J - Utiliser les calques
A partir des navigateurs 4, les calques offrent des possibilités

graphiques nouvelles. Ce sont en effet des objets positionnés de
façon absolue dans la page. Ils sont doués de toutes les propriétés
d'une page mais sur une portion limitée de la page. Une icône de la
fenêtre d'objet permet de le tracer sur la page. Le calque est un objet
redimensionnable par ses poignées.
Un inspecteur de propriété
spécial est affecté aux calques.
Attention au choix de la balise.
Pour IE il faut utiliser "DIV" et
pour Netscape "LAYER". Les
deux systèmes ne sont pas
compatibles. Vérifiez le résultat
en faisant un aperçu dans le
navigateur de votre choix et
avertissez les clients.
Par prudence ne mélangez pas les calques avec des textes et des tableaux classiques. Le résultat
risque d'être illisible.
Retour
K - Manier les événements et les comportements
En choisissant "Fenêtre" puis

"comportement" une fenêtre spéciale
s'ouvre.

Page 43/44
L'étape suivante consiste à mettre en surbrillance un objet

(texte ou image) pour lui associer un comportement. Ensuite
un clic sur le "+" affiche une liste d'actions. Suivant l'objet et
le navigateur choisi, la liste est différente.
Après avoir choisi l'action il faut choisir

l'événement qui la déclenche.
Sélectionnez-la dans la liste. Enregistrez
votre fichier.
Vérifiez dans le navigateur que tout

marche comme prévu.
Pour retirer une action sélectionnez-la et

cliquez sur "-"
Des exemples plus précis de

comportements sont données en fin de
page.

Page 44/45
L - Insérer des éléments flash ou shockwave
Les éléments flash et shokwave sont des animations conçues par des logiciels
spécifiques de macromédia. Vous devez avoir construit ces fichiers avant toute
incorporation dans une page. Pour l'incorporation utilisez l'outil de la palette
objets communs. Après avoir choisi le fichier correspondant dans la boîte de
dialogue, l'objet apparaît sous la forme d'une icône.
Un inspecteur de
comportement est
associé à cette icône
et permet de
paramétrer l'objet. Il
faudra visualiser la
page dans un
navigateur pour
vérifier son
fonctionnement.
Retour
M - Vérifier un site
Deux fenêtres s'affichent sous

barre d'outils. La plus facile à
utiliser est une sorte d'explorateur.
Vous pouvez ainsi ouvrir les
fichiers pour vérifier le contenu.
Cette fenêtre est aussi très utile

pour renommer les fichiers. Il vous
sera automatiquement proposé de
mettre à jour tous les liens qui
aboutissent à ce fichier.
Cette fonction connaît cependant

une limite : le simple remplacement
d'une majuscule par une minuscule
ne provoque pas la mise à jour. Il
faudra donc faire un changement
plus important pour qu'il soit pris en
compte.
De même les fichiers appelés par

des java scripts ou des applets java
ne bénéficient pas de la mise à jour
des liens.

Page 45/46
Le second écran est affiché par le

bouton situé à droite.
Il montre l'arborisation du site et

permet les actualisations et les
contrôles
A condition de saisir les caractéristiques du serveur d'hébergement du site, il est possible de faire le
téléchargement des pages sur le serveur. L'utilisation de ce module est cependant pleine d'aléas. Mieux vaut
utiliser les logiciels ftp spécialisés.
Le menu "Fichier"
contient les fonctions de
vérification des liens pour
les pages ou le site
entier.

Page 46/47
La fenêtre du vérificateur
permet de pointer les
liens brisés, les liens
externes et les fichiers
orphelins. Opérez les
modifications et vous
verrez la liste diminuer
de longueur. Après un tel
contrôle plus besoin de
brosse à reluire pour
présenter un site "nickel".

Page 47/48
N - Fabriquer une fenêtre surgissante
La fabrication d'un lexique sous la forme d'une page html spécialement dédiée à cette fonction peut paraître a
première vue satisfaisante. Elle l'est beaucoup moins à l'usage car si l'appel de la page par un lien ne pose aucun
problème, le retour à la page d'appel n'est pas simple sauf pour les familliers du bouton "précédent". nous proposons
donc une alternative sous la forme d'une petite fenêtre surgissant lors du clic et ne renfermant que la définition du mot
cliqué
Les fichiers de définition doivent

bien entendu exister avant toute
création de lien.
Cette manoeuvre reposant sur

l'insertion d'un Javascript dans la
page, afficher la fenêtre
comportement (elle peut s'intégrer
comme un onglet à la fenêtre
"Style et objet")
Dans la page d'appel mettez en

surbrillance le mot qui servira de
lien (ce peut être une image)
Au lieu d'indiquer un nom de

fichier comme lien frappez
seulement le caractère #

Page 48/49
Dans la barre d'outil de la fenêtre

"Comportements" choisissez les
types de navigateurs pour
lesquels vous travaillez. Dans
l'état actuel des choses, préférez
les navigateurs 4 aux versions
ultérieures qui ne sont pas
compatibles entre elles.
Cliquez ensuite sur le signe + de

la fenêtre "Comportements" et
choisissez "Ouvrir fenêtre
navigateur"
Dans la boîte de dialogue

suivante vous pouvez paramétrer
la nouvelle fenêtre de navigateur
dont l'ouverture sera l'action
voulue.
En mettant la ligne en surbrillance

vous pourrez choisir le type
d'action qui détermine
l'évènement.
N'oubliez pas d'enregistrer puis

de vérifier dans le navigateur de
votre choix.
O - Faire alterner deux images

Page 49/50
L'interversion d'image est l'une des manoeuvres interactives les plus courantes. Elle permet de faire
apparaître une image légendée ou un schéma à la place de l'image originale. Cette interversion est le
plus souvent déclenchée par le passage de la souris sur l'image.
Il est bien entendu indispensable que les deux images à intervertir existent au préalable et qu'elles
aient les mêmes dimensions. Elles doivent se trouver dans le répertoire qui contient le site.
Ouvrir le menu Insertion/Images interactives/image survolée.
Remplissez la boite de dialogue

Page 50/51
PARTIE 3 : GRAPHISME ET CONCEPTION

1 – La charte graphique
La charte graphique Web est un document qui contient les règles de création de l'ensemble des
pages d'un site afin d'en assurer la cohérence.
La charte graphique permet d'assurer une homogénéité à l'intérieur d'un site et, entre les sites d'une
même entité, de contrôler l'image que l'entité souhaite véhiculer. Elle contient :
- Les couleurs principales,
- Les éléments graphiques communs à tout le site,
- L'organisation des pages,
- Les images de référence,
- Les zones de menu et éléments à utiliser pour la navigation,
- Les styles de caractères
Lors de la réalisation d'un site Internet, la charte graphique n'est donc surtout pas à négliger même s'il
est évident que le contenu, sa qualité et sa mise à jour, reste un élément essentiel à tout site visant à
acquérir une notoriété et des visiteurs toujours plus nombreux et fidèles.
Deux points clés conditionneront le succès de votre site :
• La vitesse d'affichage des pages et l'ergonomie de navigation à l'intérieur de votre site. Les
images ne doivent pas être trop lourdes pour que l'internaute ne soit pas tenté de "zapper" en
raison d'un temps d'attente trop long. Le faire attendre devant un écran vide, c'est tout
simplement lui donner toutes les raisons de quitter le site. Privilégiez donc les images
miniatures.
• De plus, il est primordial que le visiteur sache à tout moment où il se situe dans votre site.
Pensez à utiliser les cadres et barres de navigation.
Enfin, la richesse graphique, le dynamisme, la convivialité et l'interactivité de votre site feront l'ultime
différence. Ainsi, votre site retiendra l'attention de l'internaute ; il a de bonnes chances d'être
sélectionné dans ses favoris et sera donc visité régulièrement.
2 – Les formats d’images
Quand vous insérez une image dans une page Web, elle est affichée par défaut dans sa taille
d’origine. Les dimensions d’une image affichée à l’écran se mesurent en pixels, comme la résolution
d’un écran : 1024x768 par exemple.
Vous pouvez facilement forcez la page Web à réduire ou agrandir l’image. Toutefois, cela donne
rarement un bon résultat.
Le meilleur principe est donc d’afficher les images à leur taille réelle. Vous devez donc créer des
versions de vos images qui sont adaptées à vos pages Web et dont la taille en pixels correspond
exactement à la taille d’affichage que vous souhaitez sur votre page web.
De plus, plus la taille des images est importante, plus le transfert est lent pour l’internautes :
Ex : avec un modem 56k
17Ko = 3,5 secondes
600Ko = + 2 minutes

Page 51/52
Les images peuvent provenir de sources très différentes :

• Des images trouvées sur Internet,
• Des illustrations dessinées sur votre PC,
• Des images scannées,
• Des photos d’un appareil numérique,
• Des images de Cd-rom ou d’une autre origine.
Il est très rare que vous puissiez utiliser directement une image sans traitement. Il faut souvent
recadrer les images ou les rééchantillonner pour adapter leur taille.
Le JPEG
Utiliser pour les photos, compression variable.
Le Gif
256 couleurs maximum, utiliser pour les graphismes comportant des éléments de couleur unie, par
exemple dessins, logos, textes,…
3 – Adaptez l’image au Web
Plusieurs logiciels permettent d’adaptez une image au Web dont les deux premiers incontournables :
• Adobe Photoshop
• Macromédia Fireworks
• IrfanView…
La manipulation est très simple puisque tous les logiciels se ressemblent dans leurs démarches.
1. Ouvrez votre image
2. Trouvez le menu qui correspond à la taille de votre image
3. Changer les caractéristiques de l’image comme vous le désirez
4. Enregistrez votre travaille et voila.
C’est bien entendu la méthode la plus simple quand on ne veut pas optimiser un maximum sont
images mais juste l’adaptez un minimum au Web.
Dans Photoshop et Fireworks par exemple, vous pouvez enregistrer les images en utilisant dans le
menu Fichier, les fonctions enregistrer pour le Web qui vous guidera dans l’échantillonnage de votre
image
4 – Réaliser ses propres images
Nous ne verrons dans ce cours que des images réalisées à partir de texte (boutons, logos,…)

Page 52/53
PARTIE 4 : PUBLIER SUR INTERNET

I – LE SERVEUR WEB
Pour publier vos pages sur Internet, vous devez avoir accès à un serveur Web. En principe, vous
pouvez créer votre propre serveur chez vous, mais la plupart des serveurs sont placées chez un
hébergeur. Réservez son propre nom de domaine ne coûte que quelques dizaines d’euros.
Une fois que vous avez réservé un espace chez un hébergeur, vous recevrez des informations qui
vous permettent de placer vos pages Web sur Internet. Ces informations peuvent se présenter comme
suit :
Login : dougklas
Mot de passe : fddfgddMH
Adresse du serveur : web.arobasque.com
Adresse FTP : ftp.arob.cfr
Adresse WWW : http://www.dougklas.com
Beaucoup d’utilisateurs profitent d’un espace serveur gratuit, inclus dans leur abonnement Internet.
Vous pouvez aussi exploiter cette solution, mais l’adresse de vos pages en sera plus compliquée : elle
pointera vers un sous-domaine d’un autre serveur.
Ex : www.insitu.fr (domaine)
Perso.wanadoo.fr/insitu (sous-domaine)
Vous pouvez aussi utiliser les services d’un hébergeur gratuit, comme http://www.free.fr qui offre un
grand espace de stockage gratuitement et sans vous imposer d’afficher de la publicité.
Quel que soit le type de serveur que vous choisissez, vous devez télécharger vos pages sur le
serveur, typiquement à l’aide d’un programme FTP.
II –TELECHARGER PAR FTP

1 – Notions
On utilise plusieurs protocoles sur Internet. Un protocole est un ensemble de « règles du jeu » que
doivent respecter les programmes et ordinateurs afin de communiquer.
La communication la plus courante se fait avec le navigateur, quand vous pazssez d’une page Web à
une autre. Ici, le protocole HTTP. Pour le transfert de fichier, c’est le protocole FTP qui est utilisé. Ce
protocole est conçu spécialement pour gérer l’échange de fichiers entre ordinateurs, et l’échange se
fait à l’aide d’un programme.
Il existe de nombreux programmes FTP : FTP expert, Filezilla, …
Une session FTP
Une fois Que vos pages Web sont terminés ( et bien testées), vous devez les transférer au serveur
que vous utilisez.
Le programme FTP que vous utilisez est sans importance, car ils se ressemblent tous. Commencez
par définir votre connexion FTP à l’aide des informations suivantes (elles vous sont fournis par votre
hébergeur) :
- L’adresse FTP
- Le nom d’utilisateur (ou login)

Page 53/54
- Un code d’accès
Vous devez absolument connaître ces informations si vous voulez placer vos pages sur Internet.
Une fois la connexion établie, vous sélectionnez les fichiers que vous transférer, en général dans le
panneau de gauche du programme FTP, où vous pouvez naviguer dans votre disque dur.
Dans l’autre panneau, vous voyez les fichiers et dossiers du serveur Web auquel vous êtes connecté.
Il suffit alors de tirer les fichiers d’un panneau à l’autre. Le transfert prend rarement plus que quelques
minutes. Quand les pages Web sont sur le serveur, elles sont publiquement disponibles à tous les
internautes.
Pour afficher vos pages sur Internet, il vous suffira de taper leur adresse URL dans un navigateur
Web.
2 – Filezilla
Pourquoi Filezilla ? il est gratuit et rapide a télécharger.
A – Présentation
La fenêtre du logiciel FileZilla se présente comme sur l'illustration ci-dessous. Passe la souris et clique sur les
différentes zones afin de découvrir leur nom et leur rôle:
• La barre des menus est semblable à celle de presque tous les logiciels
• La barre d’outils est semblable à celle de presque tous les logiciels

Page 54/55
• La barre de connexion rapide nous servira à indiquer l'adresse de l'ordinateur de l'hébergeur, notre nom
d'utilisateur et notre mot de passe
• La fenêtre de dialogue va nous permettre de lire le dialogue entre notre ordinateur et le serveur. Ces
échanges ne concernent que les ordinateurs; nous n'avons pas besoin de les comprendre.
• La fenêtre de l’ordinateur local permet de visualiser les fichiers que nous allons télécharger, un peu
comme dans l'explorateur de Windows
• La fenêtre de l’ordinateur distant s'ouvre sur la partie du disque dur que notre hébergeur nous a réservé
sur le serveur. Au démarrage du logiciel, nous n'avons pas encore contacté le serveur; la fenêtre est
donc vide.
• Zone de file d’attente des fichiers: ici s'indiquent les noms des fichiers qui vont être téléchargés.
Nous allons télécharger l'ensemble des fichiers de notre site vers l'espace Web dont nous disposons chez notre
hébergeur.
• Dans la fenêtre de l'ordinateur local, préparons une vue du répertoire qui contient l'ensemble de nos
fichiers;
La partie supérieure nous permet de naviguer dans les répertoires sur notre disque dur. La partie inférieure nous
montre les fichiers dans le répertoire sélectionné.
B - Connectons-nous au serveur
• Dans la zone "Adresse", indiquez l'adresse du serveur FTP chez l'hébergeur. Cette adresse est
généralement du type ftp.hebergeur.com
• Dans la zone "Utilisateur", indiquez le nom d'utilisateur sur le serveur de l'hébergeur
• Dans la zone "Mot de passe", indiquez le mot de passe pour accéder à notre espace web.
• Cliquez sur le bouton "Connexion Rapide"
Si la connexion s'est bien faite, nous voyons apparaître notre répertoire sur le serveur dans la fenêtre du serveur.

Page 55/56
Il se peut que, dans le cas certains hébergeurs, la vue soit un peu différente.
C - Téléchargeons nos fichiers

• Dans la fenêtre de l'ordinateur local, sélectionne les fichiers et les répertoires à télécharger:
1. l'ensemble du répertoire "images"
2. les fichiers index.htm, chanteur.htm, loisirs.htm et chinois.htm
• Par un cliquer-glisser, déplace-les l'un après l'autre dans la fenêtre de l'ordinateur distant
• Dépose les fichiers
Le transfert se fait automatiquement. La file d'attente indique les noms des fichiers transférés. Dans la fenêtre de
dialogue, le logiciel de FTP indique ce que se racontent les ordinateurs en contact.
Quand la file d'attente est vide, le site est en ligne. Félicitations, le monde est à vous.

Page 56/57

HTML &amp; Dream Weaver

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML &amp; Dream Weaver

Загружено:

Авторское право:

Доступные форматы

Votre site Internet avec Insitu Multimédia sur www.insitu.

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

PARTIE 1 : LE HTML ........................................................................

II – MISE EN FORME ........................................................................

III – LES LIENS ............................................................................

IV – LES IMAGES ...........................................................................

V – LES TABLEAUX ..........................................................................

VI – LES FRAMES ...........................................................................

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

2 - Frames en lignes ..........................................................................................................................24

PARTIE 2 : DREAMWEAVER .....................................................................

PARTIE 3 : GRAPHISME ET CONCEPTION .............................................................

PARTIE 4 : PUBLIER SUR INTERNET ................................................................

I – LE SERVEUR WEB .........................................................................

II –TELECHARGER PAR FTP .....................................................................

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

3 - Structure principale d'une page html

Remarquez que <title> est la balise d'ouverture et </title> la balise de fermeture.

<HTML>...</HTML> marquent le début et la fin du document

<BODY>...</BODY> marquent le corps du document (contenu de la page)

<TITLE>...</TITLE> permettent de donner un titre à la page (celui-ci s'affichera en haut de la fenêtre

Exemple: Ouvrir un éditeur simple et taper le code suivant.

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

Style Syntaxe Effet

2 - Tailles des caractères

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

4 - Titre dans un texte

<h1>Titre de niveau 1</h1>

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

Alignement gauche : c'est l'alignement par défaut.

Ce texte est aligné à droite

Ce texte est centré

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

Changer souvent de couleur est pénible !

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

Entité Entité Entité

&eacute; &lt; &copy;

&egrave; &gt; &reg;

&Icirc; &amp; &iquest;

&ccedil; &nbsp; &szlig;

&iuml; &quot; &aring;

&aelig; &otilde; &deg;

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

III – LES LIENS

Il faut connaître aussi :

2 - Lier des pages locales

1. On réalise d'abord le fichier cible

2. Dans le fichier source, on réalise le lien vers ce fichier cible :

3 - Lier des sites. Liens absolus.

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

1. Il faut connaître tous les éléments :

2. On indique le chemin par rapport au document utilisé.

5 - Lien vers une adresse E-mail.

6 - Lien vers une ancre

2. On réalise le lien vers cette cible :

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

3. On peut placer une ancre dans un autre document :

7 - Lien avec des images

Passez la souris sur ces images et observez le pointeur.

Pour ôter le cadre et garder le lien :

8 - Couleurs des liens

9 - Lien avec bouton

Réalisé par Cyrille Brubion - Insitu Multimédia - cyrille.brubion@wanadoo.fr - 03.22.22.52.50

HTML & Dream Weaver

HTML & Dream Weaver

é < ©

è > ®

Î & ¿

ç ß

ï " å

æ õ °