LYCEE 2 Mars 1934 Ouardia

DISCIPLINE :

TECHNOLOGIES DE LINFORMATION
ET DE LA COMMUNICATION

PROFESSEUR : Mr Khmili Meher

CHAPITRE 4
REALISATION D'UN SITE WEB

I. Introduction
Un site Web est un ensemble des pages Web qui peuvent contenir du texte, des images, des
tableaux Pour la cration de sites Web on aura besoin d'un logiciel de cration de sites Web, parmi
les logiciels libres* utiliss: Bluefish, Ginf, Screem... Dans la suite on utilisera le logiciel libre NVU

II. Les tapes de ralisation d'un site Web statiques

1. Introduction
La cration d'un site Web est un projet qui comprend un ensemble d'tapes d'avant-projet qui
doivent tre suivies pour bien russir sa ralisation, il s'agit d'une dmarche stratgique et crative
devant tre ralise en y associant l'ensemble des parties du projet. Les tapes de cration d'un
site Web sont :

Le dveloppement
Consiste tudier la faisabilit du site, la rdaction de cahier des charges, la conception de
la navigation et la ralisation technique.

L'hbergement ou publication
Qui permet de mettre le site en ligne pour qu'il soit accessible par les internautes.
Le rfrencement
Qui a pour objectif de faire connatre le site aux diffrents moteurs et outils de recherche.
La mise jour
Qui permet de rviser priodiquement le contenue du site
L'valuation
Qui permet de savoir le degr de performance du site.

2. Le dveloppement
a) L'tude pralable
Consiste dfinir les objectifs du site car les pages doivent tre crites pour remplir les
objectifs spcifis.
b) Le cahier des charges
C'est un document de spcification qui va servir comme rfrence pour les tapes qui suivent le
dveloppement d'un site Web qui dcrit les caractristiques du site Web raliser (objectif,
thme, ) ainsi que d'autre contraintes (dlais de conception et de ralisation).
c) La conception de la structure de navigation (Prparation d'un story-board)
Cette tape consiste structurer l'information en un groupe de pages. Il faut un type de
structure du site qui dcrit les moyens pour se dplacer dans la structure du site : choisir le
type des liens (bouton, hypertexte, menu, ), choisir le sens donner (suivant, prcdent,
back, top, front ).
Toutes les informations seront reprsentes sous forme d'un story-board (un carnet de bord)
contenant l'architecture ou la structure de navigation du site. Le story-board permet d'avoir
une vue d'ensemble de ce quoi rassemblera le site une fois termin. Il sert comme repre
lors de dveloppement des diffrentes pages WEB. Dans le cas de grands sites, le story-board
permet plusieurs personnes de dvelopper diffrentes parties du site.
Un story-board ressemble un ensemble de feuilles de papier. Chaque feuille reprsente un
page du site, avec une liste de points que la page va dcrire et les liens que cette page va
inclure. Les modles (structures) de navigation les plus courants sont :
La structure linaire ou squentielle:
Ce modle est assez similaire la manire dont on parcourt les documents imprims. On
trouve une page d'accueil (home), qui nous renvoie vers la page suivante et ainsi de
suite. Voir Figure page 116.

Chapitr4 : Ralisation d'un site Web

page 1/6

 La structure Hirarchise
On trouve une page d'accueil, qui nous renvoie vers des pages secondaires. Chacune des
ces pages revoie un ensemble de pages qui contiennent elles mme des liens vers cette
page. Voir Figure page 117.
La structure composite
C'est une structure qui est trs utilise. A partir de la page d'accueil, on peut aller des
niveaux distincts du site et vis versa.
d) La ralisation technique
La collecte des donnes
Il s'agit de la collecte de certains objets (textes, images, sons et vidos), ou leurs cration et
de les organiser dans des dossiers spars.
L'intgration
Consiste runir les objets prpars en respectant le story-board. Cette tape englobe
l'tape de test et de correction, on doit disposer d'un navigateur pour tester localement le
bon fonctionnement des diffrentes pages et composants du site.
Remarques
Pour crer un site web on a besoin
o Des logiciels de dessin.
o Des logiciels d'animations : flash
o Des navigateurs : Mozilla Firefox, Internet Explorer
o Logiciel de cration des pages web :
Les diteurs de texte simple : Par l'emploi du code source de la page WEB en
utilisant le langage HTML et ses balises.
Les diteurs WYSIWYG (What you See Is What You Get) : Ce sont des diteurs o
on ne voit pas le code HTML qui est gnr par le logiciel (FrontPage,Dreamweaver
)

3. L'hbergement (Publication de la version dfinitive)

Cette tape permet de mettre le site WEB en ligne pour qu'il soit accessible par les internautes.
C'est dire de stocker le site sur un serveur qui est connect en permanence Internet.
Pour hberger un site WEB il faut avoir un nom de domaine (le nom que vous taper dans la barre
d'adresse) unique et significatif (exemple http://www.edunet.tn : Ministre d'ducation et de la
formation, http://www.laposte.tn : site de la poste tunisienne, http://www.souk-el-web.com/ :
site de commerce lectronique).
Une fois le nom de domaine est rserv, il faut stocker le site dans le serveur d'hbergement et
associer la page d'index du site au nom du domaine.
Pour l'opration d'hbergement on peut utiliser l'une des manires suivantes:
o

Contacter directement l'hbergeur et lui donner le site.

Envoyer le site sur un support de stockage par poste.

Envoyer le site comme fichiers joints par courrier lectronique pour un site de petite taille.

Utiliser un logiciel de transfert de fichiers pour transfrer le site d'un ordinateur local un
autre distant.

4. Le rfrencement
Cette opration consiste utiliser des techniques pour annoncer le site WEB afin que les
internautes sachent que votre site t hberg et puissent le visiter.
Cette tape comporte :
o L'indexation (submission) : Consiste faire connatre le site auprs des moteurs de
recherche, ou bien utiliser des utilitaires "multi rfrencer" qui comporte un formulaire dont
le contenu sera envoyer aux diffrents moteurs et annuaires exploits.
o Le positionnement (positionning) : consiste positionner le site ou certain pages du site en
premire page de rsultat pour certain mots-cls.

Chapitr4 : Ralisation d'un site Web

page 2/6

o Le classement (ranking) : similaire au positionnement pour des expressions plus labores.

5. La mise jour
Pour attirer les surfeurs et le site WEB reste accessible, il faut prvoir des mises jour
priodiquement du contenue du site. Il s'agit de stocker des nouvelles versions.

6. L'valuation
Ce sont des rgles normales de la critique qui s'applique au site pour valuer la qualit des
informations, leur exactitude, pertinence, fracheur, l'ergonomie, interactivit,

III. Prsentation de logiciel d'intgration

1. Prsentation du logiciels NVU

a.Utilisation du systme d'aide de NVU

Drouler le menu "Aide"
Choisir loption "Contenu de l'Aide

Le systme d'aide offres des modes de

navigation:

Le sommaire (mode de base)

L'index (alphabtique)

La recherche (mode avanc)

b.L'espace de travail de NVU

La barre d'outils Principale
Compose par les boutons reprsentant les commandes les plus utilis de l'application exemple : nouveau,
Enregistrer...

La barre d'outils de mise en forme

Exemple B (Gras), I (italique), U (soulign)

La barre des onglets

Affiche les titres des pages ouverts. Une icne de disquette apparat dans chaque onglet pour indiquer qu'un
document a t modifi mais non enregistr.
La barre d'outils des modes d'dition
Permettant de basculer entre les diffrentes vue disponible : Normal, Balise HTML, Source, Aperu
La barre d'tat
Affiche la position du curseur en respectant la hirarchie des balises HTML.
Pour slectionner le texte encadrer par un balise : simple clic gauche

Chapitr4 : Ralisation d'un site Web

page 3/6

Pour diter/dfinir : clic droit.

2. Les tapes prliminaires

a. Cration (dition) du site
Avant de commencer l'tape de cration de votre site. Il faut penser l'organisation du dossier
principal du site, ainsi les sous dossiers contenant chacun un type de mdia.
Pour crer l'arborescence d'un site on peut soit utiliser l'explorateur de systme, soit procder
par Le gestionnaire de sites, en effet :
0) Dbut cration
1) Cliquer sur le bouton Edition des sites dans le gestionnaire de site une boite de
dialogue (paramtre de publication) apparat.
2) Cliquer sur le bouton Nouveau site
3) Taper le nom du site dans la zone de texte Nom du site
4) Crer le dossier principal du site : cliquer sur le bouton parcourir une boite de dialogue
(Rechercher un dossier) apparat choisir l'emplacement cliquer sur le bouton Crer un
nouveau dossier.

5) Valider par OK pour les deux boites de dialogues.

6) Dans le gestionnaire de sites cliquer sur le bouton Nouveau dossier pour crer les dossiers
ncessaires votre site.

7) Fin cration.
b. Cration d'une nouvelle page Web
Drouler le menu "Fichier" Choisir loption "nouveau" Valider

3. Intgration
a. Insertion dun tableau
Drouler le menu Tableau Choisir loption insrer tableauDterminer les paramtres relatifs
au tableau (ligne, colonnes, etc.) Valider.

Chapitr4 : Ralisation d'un site Web

page 4/6

b. Proprits de la page

Drouler le menu "Format"

Choisir loption
proprits de la page"

"Titre

et

Taper le titre, l'auteur

c.Mise en forme de texte

Drouler le menu "Format"

Choisir les options dsires : police, taille, style, couleur

Ou bien Choisir loption "Couleurs et fond de page"

dfinir les options dsires : couleurs (texte, liens...),
l'arrire plan

d. Insertion dimages
Drouler le menu "insertion"Choisir loption "image" Dfinir l'adresse (chemin relatif ou
absolu de l'image) Valider
e. Insertion dun Ancre (signet)
Slectionner laide du curseur le ou les mots qui vont servir de dclencheurs pour atteindre
la cible.
Drouler le menu Insertion,

Choisir loption Ancre

; une bote de dialogue apparatra (proprits de l'ancre)

Taper le nom de L'ancre

Un symbole de l'ancre viendra se rajouter cot du texte,

Chapitr4 : Ralisation d'un site Web

page 5/6

f. Insertion des liens :

Slectionner le texte ou l'image
qui va servir comme lien

Drouler le menu "insertion"

Cliquer sur la commande Lien

(CTRL+L) ou bien sur l'icne
correspondant

de la barre d'outil

Liens internes
Pour insrer un lien interne drouler la liste de la zone
"emplacement du lien"
Slectionner l'ancre dsire.

Liens externes
Pour insrer un lien
externe : cliquer sur le
bouton parcourir une
boite
de
dialogue
apparat

slectionner le fichier
atteindre avec le lien.

g. Aperu dans le navigateur

Un fois on a cre les pages, il reste les tester en utilisant un navigateur : Internet Explorer,
FireFox

IV. Publication (Hbergement) du site Web

Cette tape permet de mettre le site WEB en ligne. Il existe trois catgories de logiciels pour stoker les
fichiers du site Web dans le serveur d'hbergement :

1. Utilisation des logiciels de transfert de fichiers

Qui permettent d'envoyer n'importe quel fichier de n'importe quel poste n'importe quel autre
poste. Exemple de logiciels : CuteFTP, FtpExplorer, Filezilla, voir Figures page 132 et 133.

2. Utilisation des logiciels intgrs

Qui sont intgrs dans les logiciels de cration de site Web (NVU, Dreamweaver, Frontpage, Claris
Home Page, ) voir Figure page 134.

3. Utilisation des logiciels orients Web

Qui sont proposs par les hbergeurs. Il s'agit de se connecter au site Web de l'hbergeur, qui
vous propose un lien vers l'utilitaire de tlchargement. Voir Figure page 135.
Dans le cas de 'utilisation d'un logiciels de tlchargement vous devez disposer d'un compte et un
mot de passe pour pouvoir accder l'espace disque que l'hbergeur vous a rserv.

Chapitr4 : Ralisation d'un site Web

page 6/6