Créer une maquette de site web

Une page web classique est composée de différentes parties

Bannière / Header

Barre de navigation

Menu 1 Corps du document / Contenu

Menu 2
Menu 3
La taille du document dépendra de la résolution / taille de l'écran

Les principales résolutions sont :

VGA : 640 * 480 Ecran 12 / 14 pouces

SVGA : 800 * 600 Ecran 14 / 15 pouces
XVGA : 1024 * 768 et supérieure Ecran 17 pouces

Il faudra
Footerenlever 40 document
/ pied du pixels a la largeur pour prendre en compte l'espace utilise par la barre
de défilement du navigateur.

Par exemple : 760*600 // 984*768

1
Création d'un nouveau document dans Photoshop
Fichier / Nouveau // CTRL + N

1ere etape : creation du header

Le header va contenir une image de fond avec un logo / Texte.

Notre banniere sera un fondu entre 2 images.

Voici les 2 images :

Creer un fondu entre deux images, grace aux masques. Il vous faut avant de
commencer, disposer de deux images de meme taille. Dans cet exemple j'ai
choisi deux photos de paysages, au format 760*100.

2
// 1. Tout d'abord, nous allons ouvrir la premiere
de nos deux images. Pour cela, appuyez sur
ctrl + O ou Fichier / Ouvrir et selectionnez la
1ere image.

Si un cadenas appara'it sur votre calque (calque

verrouille), double cliquez dessus pour le
deverrouiller.

// 2. Appuyez sur ctrl + O ou Fichier / Ouvrir et

selectionnez votre deuxieme image.
Deverrouiller le calque si necessaire.

Faire glisser la premiere image sur la 2e.

Vous pouvez voir que la deuxieme image s'est

mise dans un nouveau calque, au dessus du
premier (c'est pour cela qu'elle masque
totalement la premiere image), nomme "calque
1".

Renommez le en "Image2".

Nommez le calque 0 en image 1

3
 // 3. Cliquez sur le calque "Image1" et appuyez
sur cette icone ( ). Cela aura pour effet
d'ajouter un masque au calque.

Reiterez l'operation pour le calque "Image2".

Choisissez comme couleur d'avant plan : blanc

et d'arriere plan : noir. (CTRL + D)

Selectionnez a present l'outil degrade ( ). Si vous ne le voyez pas, c'est qu'il

se cache sous le pot de peinture ;) . Cliquez longtemps sur le pot de peinture et
l'outil degrade appara'itra !

En haut de votre ecran, dans les options de l'outil degrade, verifier que l'option
"Mode" (menu deroulant) se trouve bien en mode "Normal".

La troisieme etape est maintenant terminee ! Passons donc a la quatrieme et

derniere etape de ce tutorial.

// 4. Cliquez sur le calque "Image2" pour le

selectionner, puis cliquez sur le masque
correspondant (entoure en rouge sur cette image :
) . Cliquez sur l'extreme
gauche de votre image (restez appuye) et glissez
votre pointeur vers l'extreme droite de l'image.
Relachez et un degrade sur le masque sera
applique. Sur le calque, les zones ou de la couleur
noire a ete appliquee sont desormais transparentes
(et laisse entrevoir l'image1) tandis que les zones
ou il y a du blanc sont restees opaques.

Il faut maintenant realiser la meme operation pour le calque "Image1", sauf que
dans ce cas, il faut partir de la droite, vers la gauche lorsque vous realisez le
degrade.

Maintenant, creez un nouveau calque, remplissez le entierement de blanc, et

placez le tout en dessous des deux autres calques.

4
Et voila le resultat

Image 1

Image 2

Resultat

2eme etape
Creation d'un texte pour la banniere

Image dans un texte

tout d'abord ouvrez l'image que vous souhaitez integrer dans le texte
ensuite creez un texte et placez le calque texte en dessous du calque contenant l'image...
vous devriez avoir a peu pres ca :

si vous n'y parvenez pas, pas de panique ! Double cliquez sur le calque marque "arriere-
5
plan" puis cliquez sur OK. Maintenant reessayer de deplacer votre calque, cela devrait
marcher sans probleme.

En maintenant appuye la touche ALT , cliquez entre les deux calques (vous remarquerez
que le curseur change de forme) ou aller dans
Calque / Creer un masque d'ecretage (CTRL G)

Vous obtenez ceci :

En ajoutant un fond et un effet sur le texte on obtient en moins de 2 minutes ce type

d'image :

6
Les possibilites sont multiples et l'utilisation du masque d'ecretage fait gagner pas mal de
temps.

3eme etape
Creation de la barre de navigation et des boutons

Pour la barre nous allons simplement faire un degrade.

7
Creation des boutons

Creer un nouveau calque

2) Pixel de remplissage
3) Choisir la forme

1) Choisir l'outil forme

4) Choisir la couleur

5) Faire un
Cliquer/Glisser pour
creer la forme

Pour creer un cercle ou

un carre, appuyer en
meme temps sur la
touche SHIFT

8
Grace aux styles de calque (double clic sur la partie droite du calque ou l'on veut
appliquer le style), nous allons creer un bouton de type « Aqua »

1/ Ombre interne

2/ Lueur interne

3/ Biseautage et estampage

9
4/ Biseautage et estampage : contour

10
5/ Satin

6/ Incrustation couleur

Et voila un joli bouton Aqua

Pour pouvoir re-appliquer ce style, nous allons le sauvegarder

11
Aller dans les styles

Cliquer sur nouveau

Donner un nom au style

12
Re-utiliser ce style

Cliquer sur style

Choisir le style a appliquer

Pour enregistrer les styles

13
Dupliquer le calque du bouton pour creer les boutons des autres rubriques de votre site

Clic droit sur le calque a dupliquer, Dupliquer le calque

Creation de l'etat 2 (roll-over / etat survole) du bouton

Pour faciliter la navigation dans notre site, on va creer une copie du bouton et lui affecter
un style different, par exemple, changer la couleur d'incrustation.

Exemple avec le bouton contact

Creer les titres des boutons et la barre de navigation est terminee !!

14
4eme etape
Decoupe du « design »

Premierement, avant de pouvoir decouper un design, il faut le creer sous forme d'image ;
Delimitez les parties principales de votre design en creant des reperes (menu, boutons,
corps de la page, header etc ...)

Pour placer les reperes, il faut afficher les regles

Selectionner l'outil « Deplacement (V) » se placer dans la regles et faire un cliquer/glisser

pour placer votre repere.

15
Passer dans Image Ready

16
5eme etape
Nommer les tranches

Chaque tranche, une fois le document enregistre, deviendra une image, pour eviter
d'avoir des noms d'image avec accent / espace, il faut nommer les tranches.

Certaines tranches au lieu d'etre nommee seront remplacees par une couleur de fond.

1) Attribuer un nom a une tranche

Afficher la palette Tranche (Fenetre / Tranche)

Prendre l'outil « selection de tranche (o) )

Selectionner la tranche
Dans la palette tranche saisir le nom de votre tranche, ici, header
Il est important de donner des nom « evocateur » a vos tranche pour vous y retrouver
plus facilement parmi vos images.
Par exemple :
Pour vos boutons, bt_accueil (bouton accueil)
Pour la barre de navigation : barre_h (partie haute de la barre)
Pour la partie menu : menu_hg (coin haut/gauche du menu)

17
Si la tranche est un aplat de couleur (tranche qui contient une zone d'une seule couleur),
il faut changer le type de la tranche.

Selectionner la tranche
Dans la palette tranche, dans type, choisir « pas
d'image »
Dans arriere plan choisir la couleur qui correspond a la
couleur de fond de votre tranche.

6eme etape
Creation des roll-over (image survolee).

Afficher la palette calque et la palette Contenu Web et les mettre cote a cote.

18
Dans la palette calque, masquer les calques correspondant a l'etat 2 des boutons
Clic sur l'reil en face du calque a masquer

Dans la palette contenu web, selectionner le calque du bouton

Cliquer sur « Creer un etat de transformation par souris »

L'etat « par-dessus » appara'it Dans la palette calque, a

19
Faire de meme pour chaque bouton.

Pour verifier que le roll-over fonctionne, faire un apercu dans le navigateur en cliquant sur
cet icone :

7eme etape
Optimisation des images

Passer en mode 2 vignettes et afficher la palette « Optimisation ».

Dans la fenetre de droite, selectionner la tranche a optimiser

20
 Dans
optimisation choisir le format
d'images correspondant le mieux au
contenu de votre tranche.

PNG-8 pour les textes, degrade

Jpeg pour les photos.

Faire un apercu dans le navigateur pour verifier le poids de la page apres son optimisation

21
22
8eme etape
Enregistrement de la maquette en HTML

Pour pouvoir utiliser la maquette dans DreamWeaver, il faut l'enregistrer en HTML.

Se placer dans le dossier racine du site defini dans DreamWeaver.

Avant de confirmer l'enregistrement, il faut verifier les parametres

Dans Parametres, choisir Autres.

et Enregistrement des fichier

Changer les parametres par defaut.

23
faire OK, et enregistrer.
Image Ready va creer votre page HTML et un dossier « images ».

Demarrer DreamWeaver et ouvrir votre page.

9eme etape
Creation des liens

Notre site comportera au moins 3 pages correspondant a nos 3 boutons (Accueil, Produit,
Contact).

Selectionner le bouton accueil et dans la palette des proprietes/Liens, mettre accueil.htm,

se souvenir du nom, car il cela sera le nom de la future page d'accueil.

Faire de meme pour les autres boutons.

10eme etape
Changement des fonds

24
Dans la maquette on ete prevues des zones de saisie (SousMenu et Contenu), pour
pouvoir y saisir du texte, il faut supprimer l'image mise en premier plan et la faire passer
en image d'arriere plan.

Si l'image est un aplat il suffit juste de la supprimer, si elle est un dessin/photo, il faut la
passer en arriere plan

Selectionner l'image (clic dessus) Dans la palette des proprietes, selectionner

Le nom dans SRC, couper le (CTRL+X),
supprimer l'image (Touche Suppr)

Cliquer a l'endroit ou l'image a ete supprimee (cellule

du tableau) et dans arriere plan coller le nom de
l'image. Faire de meme pour toute les images

La page est maintenant prete a etre transformee en modele.

11eme etape
Creation du modele a partir du fichier Html.
Aller dans Fichier/Enregistrer comme modele

Nommer le modele et faire OK.

25
12eme etape
Creation des « regions modifiables »

Insertion d'une region modifiable

Avant d'inserer une region modifiable, il est conseille d'enregistrer le document actif
comme modele (voir Creation d'un modele Dreamweaver).

Remarque : Si vous inserez une region modifiable non pas dans un fichier de modele
mais dans un document, Dreamweaver vous informe que le document sera
automatiquement enregistre comme modele.

Vous pouvez placer une region modifiable n'importe ou sur votre page. Toutefois, tenez
compte des informations suivantes si vous rendez possible la modification d'un tableau ou
d'un calque :

 Vous pouvez marquer un tableau entier ou une cellule de tableau individuelle

comme modifiable, mais vous ne pouvez pas marquer plusieurs cellules d'un tableau
comme une seule et meme region modifiable. Si une balise <td> est selectionnee,
la region modifiable comprend la region situee autour de la cellule. Dans le cas
contraire, la region modifiable concerne uniquement le contenu de la cellule.
 Les calques et leur contenu sont deux elements distincts. Rendre un calque
modifiable permet de changer la position du calque et son contenu, alors que rendre
le contenu d'un calque modifiable permet uniquement de modifier le contenu du
calque, et non sa position.

Pour inserer une region de modele modifiable :

1. Dans la fenetre de document, procedez de l'une des manieres suivantes pour

selectionner la region.
o Selectionnez le texte ou le contenu que vous souhaitez definir comme region
modifiable.
o Placez le point d'insertion a l'endroit ou vous voulez inserer une region
modifiable.
2. Procedez de l'une des manieres suivantes pour inserer une region modifiable :
o Choisissez Insertion > Objets de modele > Region modifiable.
o Cliquez du bouton droit (Windows) ou en maintenant la touche Ctrl enfoncee
(Macintosh), puis choisissez Modeles > Nouvelle region modifiable.
o Dans la categorie Commun de la barre Inserer, cliquez sur la fleche du bouton
Modeles, puis choisissez Region modifiable.

3. La bo'ite de dialogue Nouvelle region modifiable s'affiche.

4. Dans la zone de texte Nom, tapez un nom unique pour la region (vous ne pouvez
pas utiliser le meme nom pour plusieurs regions modifiables dans un modele
donne).

Remarque : Ne tapez pas de caracteres speciaux dans la zone de texte Nom.

26
 5. Cliquez sur OK.

La region modifiable est entouree d'un cadre rectangulaire dans le modele, de la

couleur de surbrillance definie dans les preferences. Dans le coin superieur gauche
de la region, un onglet indique le nom de la region. Si vous inserez une region
modifiable vide dans le document, son nom s'affiche egalement dans le cadre qui la
delimite.

Cas particulier pour les boutons

Pour pouvoir par la suite modifier les comportements des boutons, il faut que la region
modifiable soit associee a la balise <a> (lien hypertexte) du bouton.

Selectionner le bouton (accueil par exemple) et dans la barre d'etat, cliquer sur la balise
« <a> » et inserer la region modifiable

27
13eme etape
Creation de la feuille de style CSS

Dans un premier temps, on aura besoin pour notre site d'une feuille de style comportant 3
styles.

 Un style pour le texte

 Un style pour le corps
 Un style pour les liens hypertextes.

Creation du style pour le texte (contenu) du site

Pour ouvrir le panneau Styles CSS :

 Procedez de l'une des manieres suivantes :

o Choisissez Fenetre > Styles CSS.
o Appuyez sur les touches Maj+F11.

Le panneau Styles CSS permet de consulter la definition des styles associes au

document en cours et la hierarchie des styles. Le panneau Styles CSS affiche la
definition des styles CSS personnalises (de classe), des balises HTML redefinies et
des styles des selecteurs CSS.

Si la feuille de style existe deja, cliquer sur attacher une feuille de style, sinon cliquer sur nouvea

o Pour creer un style personnalise applicable en tant qu'attribut class a une

plage ou un bloc de texte, choisissez Creer un style personnalise (classe), puis
entrez le nom du style dans la zone de texte Nom.

Remarque : Les noms de classe doivent commencer par un point et peuvent

contenir n'importe quelle combinaison de lettres et de chiffres (par exemple,
.monentete1). Si vous omettez le point, Dreamweaver l'insere a votre place.

28
 o Pour redefinir la mise en forme par defaut d'une balise HTML specifique,
choisissez Balise (permet de redefinir l'aspect d'une balise), puis entrez une
balise HTML dans le champ Balise ou choisissez-en une dans le menu
deroulant.
o Pour definir la mise en forme d'une combinaison particuliere de balises ou de
toutes les balises contenant un attribut Id specifique, choisissez Utiliser le
selecteur CSS, puis entrez une ou plusieurs balises HTML dans le champ
Selecteur ou choisissez-en une dans le menu deroulant. Les selecteurs
(appeles selecteurs de pseudo-classe) disponibles dans le menu deroulant
sont a:active, a:hover, a:link et a:visited.

Si la feuille style n'existe pas, DreamWeaver vous proposera de l'enregistrer, nommer la

et cliquer sur Enregistrer.

Selectionner les proprietes de votre style et faire OK

29
Creation du style pour le corps (BODY) du document

Choisir, « Balise » et dans la liste deroulante « body »

Choisir dans arriere plan la couleur

dans boite mettre les marges a zero

30
Creation du style pour les liens
Un lien hypertexte est defini par 4 etats

 Au demarrage (link)
 Au survol (hover)
 Visite (visited)
 Active (active)

DreamWeaver propose de redefinir les classes pour tout lien de la page, si on veut
pourvoir appliquer differents style aux liens, il faut proceder ainsi :

Creer un nouveau style, Avance et nommer le style a.liensousmenu

31
Creation de l'etat « hover »

Choisir Avance et nommer votre lien en reprenant le nom precedent (a.liensousmenu) et

en lui ajoutant :hover ce qui donne : a.liensousmenu:hover

Faire de meme pour les 2 autres etats.

Pour appliquer ce style, il faudra creer un lien et dans la palette des proprietes/style
choisir « a.liensoumenu »

32
14eme etape
Creation des modeles imbriques

Un modele imbrique est un modele dont la conception et les regions modifiables sont
basees sur un autre modele. Pour creer un modele imbrique, vous devez au prealable
enregistrer le modele de base ou le modele original, puis creer un document a partir de ce
modele et enregistrer ce document comme modele. Vous pouvez ensuite definir dans le
nouveau modele des regions modifiables supplementaires au niveau des sections definies
initialement comme modifiables dans le modele de base.

Les modeles imbriques sont utiles pour gerer le contenu de certaines pages d'un site qui
ont de nombreux elements de presentation en commun avec les autres pages du site mais
qui presentent malgre tout quelques differences. Par exemple, vous pouvez creer un
modele de base definissant la conception de zones plus larges, qui sera utilise par une
grande partie des responsables du contenu du site, et creer un modele imbrique
definissant de nouvelles regions modifiables dans les pages d'une section specifique du
site.

Les regions modifiables d'un modele de base sont transmises aux modeles imbriques et
restent modifiables dans les pages creees a partir d'un modele imbrique, a moins que de
nouvelles regions de modele ne soient inserees dans ces regions.

Les modifications apportees a un modele de base sont automatiquement repercutees dans

les modeles bases sur ce modele de base et dans tous les documents bases sur les
modeles principal et imbrique.

Pour creer un modele imbrique :

1. Creez un document a partir du modele sur lequel vous souhaitez baser le modele
imbrique :
o Dans la categorie Modeles du panneau Actifs, cliquez du bouton droit de la
souris (Windows) ou en maintenant la touche Ctrl enfoncee (Macintosh) sur le
modele a partir duquel vous souhaitez creer un document, puis choisissez
Nouveau a partir d'un modele dans le menu contextuel.
o Choisissez Fichier > Nouveau. Dans la bo'ite de dialogue Nouveau document,
cliquez sur l'onglet Modeles, puis selectionnez le site qui contient le modele
que vous souhaitez utiliser. Dans la liste de documents, double-cliquez sur le
modele pour creer un document.

33
 Un nouveau document s'affiche dans la fenetre de document.

2. Faire Insertion/Objet de modele/Creer un modele imbrique

Ce modele imbrique permettra de

creer les page de la rubrique
accueil, nommer le
pageweb_accueil

Faire de meme pour toutes les

rubriques du site :

Produi
t
Conta
ct

15eme etape
Changement de l'etat des boutons
Pour ameliorer l'ergonomie du site, nous allons changer l'etat des boutons (passage de
l'etat 1 a l'etat 2) en fonction de la page affichee.

Modification de l'etat des bouton du modele imbrique « pageweb_accueil »

Ouvrir le modele « pageweb_accueil »

Selectionner le bouton accueil
Dans la palette comportement, supprimer tous les comportements associes a ce bouton
(en effet la page accueil n'as plus besoin de roll-over sur le bouton accueil).

Pour supprimer les comportements, cliquer sur le premie

Dans la palette des proprietes, changer l'image affiche par celle de l'etat 2 (over)

34
Faire OK et faire de meme pour les autres boutons a partir de leurs modeles respectifs

Une fois tous les modeles modifie, il ne reste plus qu'a creer les differentes pages du site
en se servant de ces modeles.

35