jump to navigation

Création d’un site trés simple Partie II août 6, 2009

Posted by pixelmed in Tutoriel photoshop, Web design.
Tags: , , , , ,
trackback

Création d'un site trés simple Partie IICréation d'un site très simple Partie II

Dans cette deuxième partie comme promis on va continuer notre petit projet et convertir le psd en un document xhtml.

Le résultat Finale

Voici ce que vous allez créer

cliquer sur l’image pour voir une démo live.
Création d'un site trés simple Partie II

Ce qu’il vous faut

Hiérarchie de notre site

Création d'un site trés simple Partie II
donc un dossier « clean » qui contient :

  • un dossier « img » pour nos images
  • un dossier « style » qui contient de son tour un fichier « style.css »
  • un fichier « index.html » pour la page d’accueil

Étape 1

Découpage du Template PSD

puisque le site est très simple on aura besoin que de trois photos.
– ouvrez le Template PSD dans photoshop.

La barre de navigation

– prenez l’outil de recadrage ou appuyez sur « c » puis faite une sélection comme la mienne. et appuyez sur Entrer.
Création d'un site trés simple Partie II

– si vous faite une mauvaise sélection appuyer sur « Echap » et recommencer.
– Noter que la sélection reste dans la barre de navigation ainsi que la largeur ne doit pas être très grande. ( Environ 8px pour moi )

– maintenant qu’on à cette petite photo faite un « Ctrl+Alt+Shift+S » ou aller dans « Fichier->Enregistrer pour web et… ».
une boite de dialogue s’affiche mettez les réglages présentés dans la photo suivante et appuyer sur « sauvegarder ». et Enregistrer la photo sous le nom de « nav » et mettez la dans le dossier « img ».
Création d'un site trés simple Partie II
– la boite de dialogue s’en va.
– Toujours sous photoshop faite un « Ctrl+Alt+Z » pour retourner à la dernière modification.

Le Banner

– faite une sélection à nouveau autour du banner avec l’outil de recadrage ou appuyez sur « c », puis appuyez sur Entrer.
Création d'un site trés simple Partie II

– Noter l’espace laissé après le banner,c’est seulement pour avoir un ombre au dessous du banner.

– maintenant il faudra désactiver le calque qui contient le texte pour cela dans la palette « calques » décocher l’œil du calque.
Création d'un site trés simple Partie II
Ainsi vous aurez une image comme ça.
Création d'un site trés simple Partie II
– faite à nouveau un « Ctrl+Alt+Shift+S » ou aller dans « Fichier->Enregistrer pour web et… ».
– Mettez les réglages suivant et cliquer sur « sauvegarder ».
Création d'un site trés simple Partie II
– Nommer la banner et valider.
– faite un « Ctrl+Alt+Z » pour retourner à la dernière modification.

Le footer

– recadrer le document comme suit en sélectionnant seulement quelques pixels du footer.
Création d'un site trés simple Partie II
– faite « Ctrl+Alt+Shift+S » et enregistrer l’image sous le nom « footer ».
Création d'un site trés simple Partie II
maintenant qu’on a les 3 images.Fermer photoshop.

Étape 2

Le contenue du fichier index

– ouvrer le fichier « index.html » et mettez le code suivant.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link type='text/css' rel='stylesheet' href='css/style.css' />
<title>Clean and Simple</title>
</head>
<body>
</body>
</html>

– Ce qu’on à fait :
pas grand chose on mis un doctype,un titre ainsi que le lien vers le fichier « css » qui est trés important.
– Ce qu’on a besoin :
Quatre div :

  • div avec un ID « nav »
  • un div avec un ID « banner »
  • un div avec un ID « container »
  • Et le tout dans un div avec un id « wrap » pour centrer la page dans le milieu

voici le code à insérer après la balise ouverte « body ».

<div id='wrap'>
<ul id='nav'>
</ul><!--Fin nav-->
<div id='banner'>
</div><!--Fin banner-->
<div id='container' class='clear'>
</div><!--Fin Container-->
<div id='footer'>
</div><!--Fin footer-->
</div><!--Fin wrap-->

– dans le div « nav » mettez le code suivant pour les boutons.

<li><a href='#'>HOME</a></li>
<li><a href='#'>DOWNLOAD</a></li>
<li><a href='#'>FORUMS</a></li>
<li><a href='#'>CONTACT</a></li>

donc une liste avec quatre liens vides.
– dans le div « banner » mettez ce code :

<p id='text'>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur....<br />
<a class='fr' href='https://pixelmed.wordpress.com/'>Pixelmed</a>
</p>

– un paragraphe avec un ID pour le déplacer après.
– un lien avec comme classe « fr » pour le floater à la droite.
– dans le div « container » mettez :

<ul id='sidebar'>
<li><a href='#'>SERVICES</a></li>
<li><a href='#'>A PROPOS</a></li>
<li><a href='#'>EXEMPLES</a></li>
<li><a href='#'>PAYEMENT</a></li>
<li></li>
</ul><!--Fin sidebar-->
<div id='main'>
<h1>The standard Lorem</h1>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. <br /><br />Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure .<br />
<a class='fr' href='https://pixelmed.wordpress.com/'>Pixelmed</a>
</p>
</div><!--Fin main-->

– Une liste non ordonée avec un ID « sidear ».
– un div « main » pour le contenue de la page.
– un lien avec une classe « fr » pour le floater à la droite.

en fin dans le footer metter

<p>
Tous drout réservé à <a href='pixelmed.wordpress.com/'>pixelmed</a> 2009
</p>

Ce que nous avons accomplis

la srouce complète du fichier index.html

Etape 3

Ajouter du style à la page

1 – la mise en forme de la page

– ouvrer maintenant le fichier style.css avec votre éditeur.
– Metter le code suivant :

* {
margin:0;
padding:0;
}
html{
font-family:Georgia,Arial,serif;
}
a{
text-decoration:none;
color:white;
}
a:hover {
text-decoration:underline;
}
li {
list-style:none;
}
.fr {
float:right;
}
#wrap {
width:960px;
margin:0 auto;
}

– la première classe : la marge et l’espace de tous les éléments est mise à 0, la raison de faire ça c’est que par défaut le navigateur accorde à chaque balise de la marge et de l’espace.
– la deuxième classe : pour tous le documents on choisi un seule font qui est « Georgia » et si le client n’a pas ce font la page sera avec le font « Arial » sinon avec le font serif.
– la troisième classe : on enlève le soulignement pour tous les liens et on met la couleur blanche.
– la quatrèeme classe : et si quelqu’un passe la souris au dessus du lien on remet le soulignement.
– la cinquième classe : on enlève la mise en forme des listes reférer vous ici.
– la sixième classe : pour tout les balises ayant la classe « fr » on les float à gauche.
– la septième classe : définir la largeur de la page et la centrer au milieu.

2 – La barre de navigation

– Metter le code suivant :

ul#nav {
background:url(../img/nav.gif) repeat-x;
height:40px;
text-align:center;
line-height:40px;
}
ul#nav li{
display:inline;
margin-right:30px;
}

– la première classe :
1. la mise en place d’un arrière plan et de le répéter horizontalement.
2. la hauteur de la barre de navigation est mise à 40px respectivement à la hauteur de l’image « nav.png »
3. Centrer les liens au milieu de la barre horizontalement.
4. Centrer les liens au milieu de la barre verticalement pour cela elle doit être égale à la hauter de l’image.
– la deuxième classe :
1. metter la liste dans une même ligne.
2. ajouter de l’espace entre les élements de la liste.

3 – Le banner

– ajouter le code suivant


#banner {
background: url(../img/banner.jpg) no-repeat;
height:290px;
text-align:justify;
color:white;
font-size:14px;
}
#banner p#text {
padding:100px 50px 0 340px;
overflow:hidden;
}

– la première classe :
1. la mise en place d’un arrière plan sans le répéter.
2. la hauteur du banner égale à 290px respectivement à la hauteur de l’image « banner.jpg ».
3. j’ai justifié le texte mais vous pouvez ne pas le faire.
4. la couleur est blanche pour tous le texte qui se trouve dans le div banner.
5. on diminue la police de 16px par défaut à 14px.
– la deuxième classe : pour le div « text » qui se trouve dans le div « banner »
1. déplacer le texte,du haut:100px,droite:50px,le bas:0px,la gauche,340px.
2. celle la à pour but de contenir ses éléments.je m’explique comme on à floaté la classe « fr » qui se trouve dans le div « text » à la droite ce dernier sera mise à zéro.

donc une règle à prendre à chaque fois que vous applique un flottement à une balise il faudra que le css la balise mère soit égale à : overflow:hidden.

4 – le contenue


#container {
background-color:#ededed;
}

on donne seulement une couleur d’arrière plan à la balise « container ».

5 – la sidebar


#sidebar{
float:left;
margin:0 0 0 14px;
width:184px;
background:#676767;
}
#sidebar li{
height:37px;
line-height:37px;
text-align:center;
border-bottom:1px solid white;
}

– première classe :
1. floater la barre à la gauche.
2. ajouter de la marge du coté droite.
3. ajouter une largeur de 184px.
4. une couleur d’arrière plan.
– la deuxième classe : pour liste qui se trouve à l’intérieur du div « sidebar »
1. une hauteur pour chaque élément de la liste.
2. centrer le texte horizontalement.
3. centrer le texte verticalement.
4. appliquer une bordure de 1px avec une couleur blanche.

le main

coller ce code:

#main {
margin-left:300px;
padding:0 40px 40px 0;
color:#939393;
}
#main h1{
color:#626262;
}
#main p{
padding:20px 0 0 20px;
}
#main a{
color:#666;
font-weight:bold;
font-size:80%;
}

– la première classe :
une marge de 300px pour déplacer le texte vers la droite,un peu d’espace et une couleur.
– la deuxième classe :
une couleur grise pour le titre.

Le pieds de la page


#footer{
background:url(../img/footer.png) repeat-x;
height:72px;
line-height:80px;
color:#fff;
text-align:center;
}

un arrière plan répéter horizontalement et un texte centrer dans le milieu.

Ce que nous avons accomplis

voila la source complète.

Résultat Finale

vous voila avec un site compatible avec tous les navigateurs « vailde xhtml/css ».
vous pouvez voir ici le site en ligne.le lien
télécharger la source ici
j’espère que vous avez appris quelque chose.
si vous aimez l’article,SVP abonner vous à la chaine RSS pour être à jours des derniers posts.

Commentaires»

No comments yet — be the first.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :