  Créer un kit graphique avec Photoshop 7
[25 mn de lecture - paru le 5/9/2004 11:21:26 AM - Public : Débutant]
|
 
|
Auteur
3. Création de la page web
3.1. Les fichiers
Afin d’alléger la page web, nous allons maintenant créer deux fichiers pour
pouvoir reconstituer notre page. Nous allons créer une page HTML et une page
CSS qui ont l’avantage d’être compatible avec la plupart des navigateurs web
mais aussi d’éviter de rendre la page web trop compliquée.
Pour cela, nous allons utiliser le bloc note et créer nos deux fichiers, l’un nommé
index.htm qui va contenir la mise en page de notre site et l’autre nommé
format.css qui va contenir tous les styles de la page.
3.2. CSS et HTML
Pour que la page html prenne en compte tous les styles et mise en page définis
dans notre feuille de style, il faut indiquer entre les balises <head> et </head> la
ligne suivante :
<link href="format.css" rel="stylesheet" type="text/css" />
3.3. Style body
Nous allons maintenant définir le style général de notre page web, ce code est à
placer dans la feuille de style :
body {
margin: 0;
font-family: verdana, arial, sans-serif;
font-size: 75%;
text-align:center;
}
Ici, l’argument margin indique que nous ne voulons pas de marge, le suivant
indique la police de caractère à utiliser, puis la taille de la police, et enfin la
position des éléments de la balise body dans la page.
3.4. Bloc principal
Le design de la page doit être centré mais pas tout le reste, c’est pourquoi nous
allons créer une classe que nous appellerons « global » et qui fera référence à
tout ce qui sera écrit sur notre page.
Ajoutez dans la page html :
<div class="global">
</div>
Puis dans la feuille de style :
.global {
width: 760px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}
3.5. La bannière
Nous allons reconstituer la bannière, nous allons donc créer un style particulier
que l'on pourra ensuite utiliser sur le menu situé en dessous.
Ajoutez à la feuille de style :
.leblocheader
{
width:760px;
background-image: url('images/img04.jpg');
border: 1px solid #000000;
}
Puis :
.leblocmenuheader
{
background-image: url('images/img07.jpg');
width: 760px;
height: 17px;
border-top: 1px solid #000000;
}
Maintenant que les styles de la bannière sont définis, il faut les appliquer à la
page html, pour cela, ajoutez :
<div class="leblocheader"> <img src="images/img03.jpg"
class="arbre" alt="deco"></img><div class="leblocmenuheader">
<a href="index.html">Accueil</a>:: <a href="etape1.html">Etape 1</a> ::
<a href="etape2.html">Etape 2</a> :: <a href="etape3.html">Etape 3</a>
</div>
</div>
3.6. Le menu de gauche
Une fois de plus, nous allons créer un style particulier pour le menu de gauche.
Pour cela, indiquez dans la feuille de style :
.leblocmenu {
background-image: url('images/img12.jpg');
border: 1px solid #000000;
margin-top:5px;
width: 150px;
height: 356px;
float:left;
}
Puis pour la zone de titre du menu dans la feuille de style :
.lebloctitre {
border-bottom: 1px solid #000000;
background-image: url('images/img09.jpg');
height: 15px;
}
Une fois les styles créés, nous allons y faire référence dans notre page HTML :
<div class="leblocmenu">
<div class="lebloctitre">
Titre Menu
</div>
</div>
<div class="texte">
::: <a href="chapitre1.html">Chapitre 1</a><br>
::: <a href="chapitre2.html">Chapitre 2</a><br>
::: <a href="chapitre3.html">Chapitre 3</a><br>
3.7. Le contenu
Même méthode pour la zone de contenu du site :
Dans la feuille de style :
.lebloccontenu {
background-image: url('images/img12.jpg');
border: 1px solid #000000;
margin-top:5px;
width: 600px;
height: 356px;
float:right;
}
Puis dans la page HTML :
<div class="lebloccontenu">
<div class="lebloctitre">
Presentation
</div>
</div>
|
292 Visites
Alexandre MORIN
[20 mn de lecture - paru le 5/9/2004 6:27:55 AM - Public : Débutant]
[25 mn de lecture - paru le 5/9/2004 3:21:01 AM - Public : Confirmé]