Hervé Moriot

Hervé Moriot – Stella Formation 2006
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
Footer / pied du document
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 enlever 40 pixels à la largeur pour prendre en compte l‘espace utilisé 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
1ère étape : création du header
Le header va contenir une image de fond avec un logo / Texte.
Notre bannière sera un fondu entre 2 images.
Voici les 2 images :
Créer un fondu entre deux images, grâce aux masques. Il vous faut avant de
commencer, disposer de deux images de même taille. Dans cet exemple j'ai
choisi deux photos de paysages, au format 760*100.
2
/ / 1. Tout d'abord, nous allons ouvrir la première

de nos deux images. Pour cela, appuyez sur
ctrl + O ou Fichier / Ouvrir et sélectionnez la
1ère image.
Si un cadenas apparaît sur votre calque (calque

verrouillé), double cliquez dessus pour le
déverrouiller.
/ / 2. Appuyez sur ctrl + O ou Fichier / Ouvrir et

sélectionnez votre deuxième image.
Déverrouiller le calque si nécessaire.
Faire glisser la première image sur la 2è.
Vous pouvez voir que la deuxième image s'est

mise dans un nouveau calque, au dessus du
premier (c'est pour cela qu'elle masque
totalement la première image), nommé "calque
1".
Renommez le en "Image2".
Nommez le calque 0 en image 1
3
/ / 3. Cliquez sur le calque "Image1" et appuyez

sur cette icône ( ). Cela aura pour effet
d'ajouter un masque au calque.
Réitérez l'opération pour le calque "Image2".
Choisissez comme couleur d'avant plan : blanc

et d'arrière plan : noir. (CTRL + D)
Sélectionnez à présent l'outil dégradé ( ). 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 dégradé apparaîtra !
En haut de votre écran, dans les options de l'outil dégradé, vérifier que l'option
" Mode" (menu déroulant) se trouve bien en mode "Normal".
La troisième étape est maintenant terminée ! Passons donc à la quatrième et

dernière étape de ce tutorial.
/ / 4. Cliquez sur le calque "Image2" pour le

sélectionner, puis cliquez sur le masque
correspondant (entouré en rouge sur cette image :
) . Cliquez sur l'extrême
gauche de votre image (restez appuyé) et glissez
votre pointeur vers l'extrême droite de l'image.
Relâchez et un dégradé sur le masque sera
appliqué. Sur le calque, les zones où de la couleur
noire a été appliquée sont désormais transparentes
(et laisse entrevoir l'image1) tandis que les zones
où il y a du blanc sont restées opaques.
Il faut maintenant réaliser la même opération pour le calque "Image1", sauf que
dans ce cas, il faut partir de la droite, vers la gauche lorsque vous réalisez le
dégradé.
Maintenant, créez un nouveau calque, remplissez le entièrement de blanc, et

placez le tout en dessous des deux autres calques.
4
Et voila le résultat
Image 1
Image 2
Résultat
ème
2 étape
Création d‘un texte pour la bannière
Image dans un texte
tout d'abord ouvrez l'image que vous souhaitez intégrer dans le texte
ensuite créez un texte et placez le calque texte en dessous du calque contenant l'image...
vous devriez avoir à peu près ça :
si vous n'y parvenez pas, pas de panique ! Double cliquez sur le calque marqué "arrière-
5
plan" puis cliquez sur OK. Maintenant réessayer de déplacer votre calque, cela devrait
marcher sans problème.
En maintenant appuyé la touche ALT , cliquez entre les deux calques (vous remarquerez
que le curseur change de forme) ou aller dans
Calque / Créer un masque d‘écrêtage (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 possibilités sont multiples et l'utilisation du masque d'écrêtage fait gagner pas mal de
temps.
3ème étape
Création de la barre de navigation et des boutons
Pour la barre nous allons simplement faire un dégradé.
7
Création des boutons
Créer 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
créer la forme
Pour créer un cercle ou

un carré, appuyer en
même temps sur la
touche SHIFT
8
Grâce aux styles de calque (double clic sur la partie droite du calque où l‘on veut
appliquer le style), nous allons créer 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 à appliquer
Pour enregistrer les styles
13
Dupliquer le calque du bouton pour créer les boutons des autres rubriques de votre site
Clic droit sur le calque à dupliquer, Dupliquer le calque
Création de l‘état 2 (roll-over / état survolé) du bouton
Pour faciliter la navigation dans notre site, on va créer une copie du bouton et lui affecter
un style différent, par exemple, changer la couleur d‘incrustation.
Exemple avec le bouton contact
Créer les titres des boutons et la barre de navigation est terminée !!
14
ème
4 étape
Découpe du « design »
Premièrement, avant de pouvoir découper un design, il faut le créer sous forme d'image ;
Délimitez les parties principales de votre design en créant des repères (menu, boutons,
corps de la page, header etc ...)
Pour placer les repères, il faut afficher les règles
Sélectionner l‘outil « Déplacement (V) » se placer dans la règles et faire un cliquer/glisser

pour placer votre repère.
15
Passer dans Image Ready
Sélectionner l‘outil « Tranche (K)»
En s‘aidant des repères créer vos tranches. Les tranches doivent

délimiter les différents éléments de votre design (header, bouton,
etc…)
Voila le résultat !!
16
ème
5 étape
Nommer les tranches
Chaque tranche, une fois le document enregistré, deviendra une image, pour éviter
d‘avoir des noms d‘image avec accent / espace, il faut nommer les tranches.
Certaines tranches au lieu d‘être nommée seront remplacées par une couleur de fond.
1) Attribuer un nom à une tranche
Afficher la palette Tranche (Fenêtre / Tranche)

Prendre l‘outil « sélection de tranche (o) )
Sélectionner la tranche
Dans la palette tranche saisir le nom de votre tranche, ici, header
Il est important de donner des nom « évocateur » à 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.
Sélectionner la tranche
Dans la palette tranche, dans type, choisir « pas
d‘image »
Dans arrière plan choisir la couleur qui correspond à la
couleur de fond de votre tranche.
ème
6 étape
Création des roll-over (image survolée).
Afficher la palette calque et la palette Contenu Web et les mettre cote à cote.
18
Dans la palette calque, masquer les calques correspondant à l‘état 2 des boutons
Clic sur l‘Œil en face du calque à masquer
Dans la palette contenu web, sélectionner le calque du bouton
Cliquer sur « Créer un état de transformation par souris »
L‘état « par-dessus » apparaît

Dans la palette calque, afficher /
masquer le calque correspondant à
l‘état 2 du bouton.
19
Faire de même pour chaque bouton.
Pour vérifier que le roll-over fonctionne, faire un aperçu dans le navigateur en cliquant sur
cet icône :
ème
7 étape
Optimisation des images
Passer en mode 2 vignettes et afficher la palette « Optimisation ».
Dans la fenêtre de droite, sélectionner la tranche à optimiser
20
Dans optimisation choisir le format

d‘images correspondant le mieux au
contenu de votre tranche.
PNG-8 pour les textes, degradé
Jpeg pour les photos.
Faire un aperçu dans le navigateur pour vérifier le poids de la page après son optimisation
21
ème
8 étape
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 défini dans DreamWeaver.

Avant de confirmer l‘enregistrement, il faut vérifier les paramètres
Dans Paramètres, choisir Autres.
et Enregistrement des fichier
Changer les paramètres par

défaut.
22
faire OK, et enregistrer.

Image Ready va créer votre page HTML et un dossier « images ».
Démarrer DreamWeaver et ouvrir votre page.
9ème étape
Création des liens
Notre site comportera au moins 3 pages correspondant à nos 3 boutons (Accueil, Produit,
Contact).
Sélectionner le bouton accueil et dans la palette des propriétés/Liens, mettre accueil.htm,

se souvenir du nom, car il cela sera le nom de la future page d‘accueil.
Faire de même pour les autres boutons.
10ème étape
Changement des fonds
23
Dans la maquette on été prévues 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‘arrière plan.
Si l‘image est un aplat il suffit juste de la supprimer, si elle est un dessin/photo, il faut la
passer en arrière plan
Sélectionner l‘image (clic dessus) Dans la palette des propriétés, selectionner

Le nom dans SRC, couper le (CTRL+X),
supprimer l‘image (Touche Suppr)
Cliquer à l‘endroit où l‘image a été supprimée (cellule

du tableau) et dans arrière plan coller le nom de
l‘image. Faire de même pour toute les images
La page est maintenant prête à être transformée en modèle.

ème
1 1 étape
Création du modèle à partir du fichier Html.
Aller dans Fichier/Enregistrer comme modèle
Nommer le modèle et faire OK.
24
ème
1 2 étape
Création des « régions modifiables »
Insertion d‘une région modifiable
Avant d‘insérer une région modifiable, il est conseillé d‘enregistrer le document actif
comme modèle (voir Création d‘un modèle Dreamweaver).
Remarque : Si vous insérez une région modifiable non pas dans un fichier de modèle
mais dans un document, Dreamweaver vous informe que le document sera
automatiquement enregistré comme modèle.
Vous pouvez placer une région modifiable n‘importe où 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 même région modifiable. Si une balise <td> est sélectionnée,
la région modifiable comprend la région située autour de la cellule. Dans le cas
contraire, la région modifiable concerne uniquement le contenu de la cellule.
• Les calques et leur contenu sont deux éléments 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 insérer une région de modèle modifiable :
1. Dans la fenêtre de document, procédez de l‘une des manières suivantes pour

sélectionner la région.
o Sélectionnez le texte ou le contenu que vous souhaitez définir comme région
modifiable.
o Placez le point d‘insertion à l‘endroit où vous voulez insérer une région
modifiable.
2. Procédez de l‘une des manières suivantes pour insérer une région modifiable :
o Choisissez Insertion > Objets de modèle > Région modifiable.
o Cliquez du bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée
(Macintosh), puis choisissez Modèles > Nouvelle région modifiable.
o Dans la catégorie Commun de la barre Insérer, cliquez sur la flèche du bouton
Modèles, puis choisissez Région modifiable.
3 . La boîte de dialogue Nouvelle région modifiable s‘affiche.

4 . Dans la zone de texte Nom, tapez un nom unique pour la région (vous ne pouvez
pas utiliser le même nom pour plusieurs régions modifiables dans un modèle
donné).
Remarque : Ne tapez pas de caractères spéciaux dans la zone de texte Nom.

25
5. Cliquez sur OK.
La région modifiable est entourée d‘un cadre rectangulaire dans le modèle, de la

couleur de surbrillance définie dans les préférences. Dans le coin supérieur gauche
de la région, un onglet indique le nom de la région. Si vous insérez une région
modifiable vide dans le document, son nom s‘affiche également dans le cadre qui la
délimite.
Cas particulier pour les boutons

Pour pouvoir par la suite modifier les comportements des boutons, il faut que la région
modifiable soit associée à la balise <a> (lien hypertexte) du bouton.
Sélectionner le bouton (accueil par exemple) et dans la barre d‘état, cliquer sur la balise
« <a> » et insérer la région modifiable
26
ème
1 3 étape
Création 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.
Création du style pour le texte (contenu) du site
Pour ouvrir le panneau Styles CSS :
• Procédez de l‘une des manières suivantes :

o Choisissez Fenêtre > Styles CSS.
o Appuyez sur les touches Maj+F11.
Le panneau Styles CSS permet de consulter la définition des styles associés au

document en cours et la hiérarchie des styles. Le panneau Styles CSS affiche la
définition des styles CSS personnalisés (de classe), des balises HTML redéfinies et
des styles des sélecteurs CSS.
Si la feuille de style existe déjà, cliquer sur

attacher une feuille de style, sinon cliquer sur
nouveau style
o Pour créer un style personnalisé applicable en tant qu‘attribut class à une

plage ou un bloc de texte, choisissez Créer un style personnalisé (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,
.monentête1). Si vous omettez le point, Dreamweaver l‘insère à votre place.
27
o Pour redéfinir la mise en forme par défaut d‘une balise HTML spécifique,
choisissez Balise (permet de redéfinir l‘aspect d‘une balise), puis entrez une
balise HTML dans le champ Balise ou choisissez-en une dans le menu
déroulant.
o Pour définir la mise en forme d‘une combinaison particulière de balises ou de
toutes les balises contenant un attribut Id spécifique, choisissez Utiliser le
sélecteur CSS, puis entrez une ou plusieurs balises HTML dans le champ
Sélecteur ou choisissez-en une dans le menu déroulant. Les sélecteurs
(appelés sélecteurs de pseudo-classe) disponibles dans le menu déroulant
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.
Sélectionner les propriétés de votre style et faire OK
28
Création du style pour le corps (BODY) du document
Choisir, « Balise » et dans la liste déroulante « body »

Choisir dans arrière plan la couleur
dans boite mettre les marges à zéro
29
Création du style pour les liens

Un lien hypertexte est défini par 4 états
• Au démarrage (link)
• Au survol (hover)
• Visité (visited)
• Activé (active)
DreamWeaver propose de redéfinir les classes pour tout lien de la page, si on veut
pourvoir appliquer différents style aux liens, il faut procéder ainsi :
Créer un nouveau style, Avancé et nommer le style a.liensousmenu
30
Création de l‘état « hover »
Choisir Avancé et nommer votre lien en reprenant le nom précèdent (a.liensousmenu) et

en lui ajoutant :hover ce qui donne : a.liensousmenu:hover
Faire de même pour les 2 autres états.

Pour appliquer ce style, il faudra créer un lien et dans la palette des proprietés/style
choisir « a.liensoumenu »
31
ème
1 4 étape
Création des modèles imbriqués
Un modèle imbriqué est un modèle dont la conception et les régions modifiables sont
basées sur un autre modèle. Pour créer un modèle imbriqué, vous devez au préalable
enregistrer le modèle de base ou le modèle original, puis créer un document à partir de ce
modèle et enregistrer ce document comme modèle. Vous pouvez ensuite définir dans le
nouveau modèle des régions modifiables supplémentaires au niveau des sections définies
initialement comme modifiables dans le modèle de base.
Les modèles imbriqués sont utiles pour gérer le contenu de certaines pages d‘un site qui
ont de nombreux éléments de présentation en commun avec les autres pages du site mais
qui présentent malgré tout quelques différences. Par exemple, vous pouvez créer un
modèle de base définissant la conception de zones plus larges, qui sera utilisé par une
grande partie des responsables du contenu du site, et créer un modèle imbriqué
définissant de nouvelles régions modifiables dans les pages d‘une section spécifique du
site.
Les régions modifiables d‘un modèle de base sont transmises aux modèles imbriqués et
restent modifiables dans les pages créées à partir d‘un modèle imbriqué, à moins que de
nouvelles régions de modèle ne soient insérées dans ces régions.
Les modifications apportées à un modèle de base sont automatiquement répercutées dans

les modèles basés sur ce modèle de base et dans tous les documents basés sur les
modèles principal et imbriqué.
Pour créer un modèle imbriqué :
1. Créez un document à partir du modèle sur lequel vous souhaitez baser le modèle
imbriqué :
o Dans la catégorie Modèles du panneau Actifs, cliquez du bouton droit de la
souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le
modèle à partir duquel vous souhaitez créer un document, puis choisissez
Nouveau à partir d‘un modèle dans le menu contextuel.
o Choisissez Fichier > Nouveau. Dans la boîte de dialogue Nouveau document,
cliquez sur l‘onglet Modèles, puis sélectionnez le site qui contient le modèle
que vous souhaitez utiliser. Dans la liste de documents, double-cliquez sur le
modèle pour créer un document.
32
Un nouveau document s‘affiche dans la fenêtre de document.
2. Faire Insertion/Objet de modèle/Créer un modèle imbriqué
Ce modèle imbriqué permettra de

créer les page de la rubrique
accueil, nommer le
pageweb_accueil
Faire de même pour toutes les

rubriques du site :
Produit
Contact
15ème étape
Changement de l‘état des boutons
Pour améliorer l‘ergonomie du site, nous allons changer l‘état des boutons (passage de
l‘état 1 à l‘état 2) en fonction de la page affichée.
Modification de l‘état des bouton du modèle imbriqué « pageweb_accueil »
Ouvrir le modèle « pageweb_accueil »

Sélectionner le bouton accueil
Dans la palette comportement, supprimer tous les comportements associés à 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 premier et cliquer
plusieurs fois sur le signe « moins »
de la palette
Dans la palette des propriétés, changer l‘image affiche par celle de l‘état 2 (over)
33
Faire OK et faire de même pour les autres boutons à partir de leurs modèles respectifs
Une fois tous les modèles modifié, il ne reste plus qu‘a créer les différentes pages du site
en se servant de ces modèles.
34

Hervé Moriot

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Hervé Moriot

Transféré par

Droits d'auteur :

Formats disponibles

Hervé Moriot – Stella Formation 2006

Créer une maquette de site web

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

Menu 1 Corps du document / Contenu

Footer / pied du document

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

Par exemple : 760*600 // 984*768

Création d‘un nouveau document dans Photoshop

1ère étape : création du header

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

Notre bannière sera un fondu entre 2 images.

Voici les 2 images :

/ / 1. Tout d'abord, nous allons ouvrir la première

Si un cadenas apparaît sur votre calque (calque

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

Faire glisser la première image sur la 2è.

Vous pouvez voir que la deuxième image s'est

Nommez le calque 0 en image 1

/ / 3. Cliquez sur le calque "Image1" et appuyez

Réitérez l'opération pour le calque "Image2".

Choisissez comme couleur d'avant plan : blanc

Sélectionnez à présent l'outil dégradé ( ). Si vous ne le voyez pas, c'est qu'il

La troisième étape est maintenant terminée ! Passons donc à la quatrième et

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

Maintenant, créez un nouveau calque, remplissez le entièrement de blanc, et

Image dans un texte

Vous obtenez ceci :

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

Pour la barre nous allons simplement faire un dégradé.

Création des boutons

Créer un nouveau calque

1) Choisir l‘outil forme

Pour créer un cercle ou

4/ Biseautage et estampage : contour

Et voila un joli bouton Aqua

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

Aller dans les styles

Cliquer sur nouveau

Donner un nom au style

Cliquer sur style

Choisir le style à appliquer

Pour enregistrer les styles

Clic droit sur le calque à dupliquer, Dupliquer le calque

Création de l‘état 2 (roll-over / état survolé) du bouton

Exemple avec le bouton contact

Créer les titres des boutons et la barre de navigation est terminée !!

Pour placer les repères, il faut afficher les règles

Sélectionner l‘outil « Déplacement (V) » se placer dans la règles et faire un cliquer/glisser

Passer dans Image Ready

Sélectionner l‘outil « Tranche (K)»

En s‘aidant des repères créer vos tranches. Les tranches doivent

1) Attribuer un nom à une tranche

Afficher la palette Tranche (Fenêtre / Tranche)

Dans la palette contenu web, sélectionner le calque du bouton

Cliquer sur « Créer un état de transformation par souris »

L‘état « par-dessus » apparaît

Faire de même pour chaque bouton.

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

Dans la fenêtre de droite, sélectionner la tranche à optimiser

Dans optimisation choisir le format

PNG-8 pour les textes, degradé

Jpeg pour les photos.

Par exemple : 760600 // 984768