Conception de site web

                            Une interface dans les grandes lignes.



         Ce d oc u m e n t t...
Orga nise r s o n t ravail : Créer u n d o s sier d é dié à u n site o u à u n p r oje t. À l'interie u r
créer u n n o uv...
2. Première s balis e s
 En xh t ml cha q ue élé m e n t d' u ne p age es t d éfinie et p o sitio n n é grâce à d e s bali...
3. < t able > n'est pas fait p our faire la mi s e e n forme d'un e page



          En h t ml4.01 o n u tilisait e s s e...
Pou r l'in s t a n t rien d'i m p r e s sio n n a n t à l'affichage d e cet te p age m ai s o n a p r e p a r é
le te r r ...
On va alor s avoir n o s différe n t s élé m e n t s d e la p age s'afficher à la s uite. Il exis te
d e ux ty p es d e ba...
On l'i m p o r te alor s d a n s n o t re in dex.ht m


fichier : index.htm
<!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1...
Il s u ffit d e re m plir n o t re fichier d efa ult.css


default.css
/* Un commentaire */ 
/* Blocs */ 
body{ 
      mar...
7. La finition


        On a p re s q u e te r mi né. La p age à l'air d e s'afficher correcte m e n t s u r IE ...
m ai ...
Puis a u nivea u d u cs s il fa u t rajo u te r u n e clas se :


default.css
[...]
hr.clear{ 
      clear : both; 
      ...
Prochain SlideShare
Chargement dans…5
×

Conception Web2.0 v1

1 385 vues

Publié le

Ce document propose un modèle de page en xhtml et css dans le respect des standards W3C et dans une optique de conception web2.0. Ceci présente alors un résumé de bonnes pratiques pour un débutant désirant créer un site, un modèle de page ou un template pour cms.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 385
Sur SlideShare
0
Issues des intégrations
0
Intégrations
32
Actions
Partages
0
Téléchargements
29
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Conception Web2.0 v1

  1. 1. Conception de site web Une interface dans les grandes lignes. Ce d oc u m e n t t r aite d' u n e p e tite p a r tie d e la réalisa tio n d' u n site web m ai s q ui n 'e n e s t p a s m oi n s im p o r ta n t : la créatio n d e la s t r uc t u re d' u n e p age inter n e t. Ce d oc u m e n t es t d e s ti né à t o u te s p e r s o n n e s d é sira n t affiner s e s co n n ais s a nce s d a n s l'élab o ra tio n d e site inter ne t e n res p ecta n t a u mie ux les s t a n d a r d s d u web W3C p o u r u n e m eille ur inte rro pé r a bilité et u n e rec herc he ergo n o miq ue. De s u rcr oît ces écrit s t e n t e n t d' a p p r oc he r les p r a tiq ue s d e co nce p tio n d u web2.0. Ce d oc u m e n t n e t raite p a s d u d e sign, ni d e s tec h n ologies s e rve u r. Il n e t r aite p a s n o n pl u s d e la p ré se n t a tio n e n Fra m e s et. Pré - r e q uis : n o tio n d u b alisage h t ml, cs s e t cult u re inter ne t. I La base du html / xhtml Lors q ue l'on n avigue s u r inter ne t o n u tilise u n n avigate u r (brows er e n a nglais) t el q u e Inter ne t Explorer, Firefox, Opera ... Ces n avigate u r s vo n t in te r p r e te r le co de h t ml d' u n e p age web p o u r affiche r s o n co n te n u (textes, images...) mi s e n for m e. On p e u t voir le co de h t ml d' u n e p age d e p uis u n n avigate u r e n cliq ua n t s u r « affiche r le co de s o u rce » (Le racco u rci Ctrl +U p e r m e t a u s si d e faire cet te actio n s elo n le n avigate u r). Pour créer u n e p age web n ul be s oin d ' u tiliser u n logiciel ult ra - m o d e r n e e t ult ra - p aya n t, u n blocNote s uffit. Nb: Cha q ue n avigate u r n'affiche p a s exacte m e n t la m ê m e dis p o sitio n d' u n e m ê m e p age. Ainsi il es t n éce s s aire d e créer d e s p age s valides a ux s t a n d a r d s W3C p o u r s e r a p p r oc he r a u mie ux d e ce q ue l'o n s o u h aite. Evite z alor s d e t ro p u tiliser les é dite u r s WYSIWYG car o n ob tie n t ja m ais exacte m e n t ce q u e l'on ve ut (WYSINAWYG). David Epely - 2 0 0 7 / 2 0 0 8
  2. 2. Orga nise r s o n t ravail : Créer u n d o s sier d é dié à u n site o u à u n p r oje t. À l'interie u r créer u n n o uvea u fichier q ue l'o n n o m m e ra « in dex.ht m » (l'exte n sio n e s t im p o r t a n t e). Un d o u ble clique p e r m e t d e le faire affiche r d a n s u n n avigate u r (ce s er a u n e belle p age vide) et u n cliq ue d r oit > « o uvrir avec u n é dite u r d e texte » p e r m e t t r a d e m o difier cet te p age inte r ne t. 1. Le DOCTYPE En p r e mier lieu il fa u t d éfinir le d oc ty pe. Celui - ci s p écifie le s t a n d a r d u tilisé p o u r écrire la p age. h t ml 4.01 : la ngage h t ml clas siq ue, les b alises HTML s o n t écrites e n • m aj u sc ule. Je d éco n seille celui - ci car il n'offre p a s l'inte ro p e ra bilité n éces s aire a ujo u r d' h ui et le co de h t ml d evien t vite chargé et p e u lisible. xh t ml1.0 - t r a n sitio nal : Ce d oc ty pe p e r m e t d e réécrire d e s p age s e n • h t ml 4.01 e n s o u ple s s e. xh t ml1.0 - s t rict : Le m eilleu r m oye n p o u r s e p re p a rer a u xh t ml1.1 • xh t ml1.1 : La d e r nière versio n d u s t a n d a r d W3C • Prene z votre fichier « in dex.ht m » et in diq ue z le d oc ty pe q u e vou s s o u h aite z u tiliser. (plus d'i nfor m a tio n e t u n e liste d e s d oc ty pe s e s t visible s u r le site Alsa crea tio n ) Nb: écrire u n co m m e n t aire e n h t ml : <! - - ceci e s t u n co m m e n t aire - - > fichier : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;    quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;> David Epely - 2 0 0 7 / 2 0 0 8
  3. 3. 2. Première s balis e s En xh t ml cha q ue élé m e n t d' u ne p age es t d éfinie et p o sitio n n é grâce à d e s balises : < b alise > q ui d oive n t être fer m ée s : < / b alise >, il existe a u s si d e s balise s a u t o - fer m a n t e s : < b alise / > . Ecrivon s m ai n t e na n t la s t r uc t u re d e n o t re p age h t ml. fichier : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;    quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;> <html> <head> <!­­ ici se trouve l'entête de la page html, celle­ci n'est  pas directement affiché dans un navigateur ­­> <title>Bienvenue</title> <!­­ Le titre de la page. ­­> </head> <body> <h1>Hello world!</h1> <!­­ Le cor ps de page affiche les éléments (media) q u'on va  lui integrer ­­> </body> </html> En o uvra n t cet te p re mière éba uc he d a n s u n n avigate u r o n verra a p p a r aît re u n joli « Hello worl d ». Celui - ci es t e n t o u ré d e la balise < h 1 > , o n lui in diq ue ain si q u e c'es t u n titre : Hea dline. NB: En xht ml, t o u t e s les balises s'écrive nt e n m i n u sc ule. NB2: On voit d a n s la balise < h e a d > s e ule m e n t u n titre, bie n s û r ce ne s e ra p a s s uffisa n t p o u r si te co m ple t. Les b alise s < m e t a / > s o n t u tiles a u référe nce m e n t. Plus loin d a n s ce d oc u m e n t o n verra a p p a r aît re l'i m p o r t a tio n d e fichier cs s. David Epely - 2 0 0 7 / 2 0 0 8
  4. 4. 3. < t able > n'est pas fait p our faire la mi s e e n forme d'un e page En h t ml4.01 o n u tilisait e s s e n tielle me n t les t a blea ux p o u r m e t t re e n for m e les p age web. Le s o ucis a rrive lors q ue l'o n im b riq ue pl u sie u r s ta blea ux. On s e re t r o uvait r a pi de m e n t avec d e s s o u rces a b s ol u m e n t illisibles e t difficile me n t m ai n te n a bles. Le xh t ml offre u n e n o uvelle vision; sé p a re r le co n te n u d e la p ré s e n t a tio n. Ce s o n t les fichier s .css (casca di ng s tyle s h eet) q ui s'occu pe r o n t d e l'a p p a re nce. Le x h t ml s'occu p e ra d e d éfinir le co n te n u : < h2 > : u n titre • < d iv > : u n e divisio n • < ul > : u n e liste • <p> : u n p a r agra p h e • etc. • Co m m e nço n s p a r u n m o d èle d e p age si m ple m ais p e r tina n t. fichier : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;     quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;>  <html>  <head>  <title>Ma première page web2.0</title>  </head>  <body>  <div id=quot;pagequot;>  <div id=quot;headerquot;>  <h1>Hello world!</h1>  </div>    <div id=quot;sidebarquot;> </div>    <div id=quot;contentquot;></div>    <div id=quot;footerquot;></div>  </div>  </body>  </html> David Epely - 2 0 0 7 / 2 0 0 8
  5. 5. Pou r l'in s t a n t rien d'i m p r e s sio n n a n t à l'affichage d e cet te p age m ai s o n a p r e p a r é le te r r ain. On voit a p p a raître id = »ide n tifia n t» : o n ide n tifie les divisio n s, elles s o n t • u niq u e s. Par la s uite o n les p e r s o n n alisera avec le css. Une division e ngloba n te (#page) p e r m e t t ra d e cha nger facile m e n t la • p r é se n t a tio n d e la p age. Pen se z à l'in de n t a tio n, ceci p e r m e t d e mie ux se re p é rer s u r la s o u rce d' u ne • p age. 4. Un p eu d e c onten u On va rajo u te r vite fait u n p e u d e co n te n u p o u r avoir d e la m a tière à t r availler. fichier : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;     quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;>  <html>  <head>  <title>Ma première page web2.0</title>  </head>  <body>  <div id=quot;pagequot;>  <div id=quot;headerquot;>  <h1>Hello world!</h1>  </div>    <div id=quot;sidebarquot;>  <h3>Menu</h3>  <ul>  <li>menu 1</li>  <li>menu 2</li>  </ul>  </div>    <div id=quot;contentquot;>  <h2>Ma page</h2>  <p>Un peu de contenu à rajouter ici</p>  </div>    <div id=quot;footerquot;>  <a href=quot;index.htmquot; title=quot;lien inutilequot;>lien sur  la page</a>  </div>  </div>  </body>  </html> David Epely - 2 0 0 7 / 2 0 0 8
  6. 6. On va alor s avoir n o s différe n t s élé m e n t s d e la p age s'afficher à la s uite. Il exis te d e ux ty p es d e balises : ty p e bloc : ces b alises s'affiche n t les u n s a u d e s s o u s d e s a u t re s. Par exe m ple • < d iv >, < p > , < h 1 > ... ty p e inline : celles - ci s'affiche n t e n ligne, c'es t à dire à la s uite. Exe m ple : • < s p a n > < a > ... Une d e r nière cho s e ava n t d e p a s s er a ux cs s, à p a r tir d e m ai n te n a n t la p age es t valide a u te s t W3C et elle d oit le re s te r. Pour te s te r ces p age s o n p e u t u tiliser le te s t e n ligne : h t t p: / / v alida t or.w3.org / (les u tilisate u r s d e firefox p e uve n t es s ayer le pl ugin Ht ml valida to r q ui je d ois dire es t t rè s p r a tiq ue et int uitif). 5. Css : initialisation Il existe pl u sie u r s m é t h o d e s p o u r inclu re d u cs s, s oit directe m e n t d a n s les b alises h t ml, s oit d a n s l'en tê te o u e ncore d a n s u n a u t re fichier. Co m m e je l'in diq u ais p récé de m m e n t o n cherc he m ai n te n a n t à s é p a rer a u m axi m u m le co n te n u d e la p ré se n t a tio n. On va d o nc créer u n (ou pl u sie u r s) n o uvea u(x) fichier(s) q ue l'o n p e u t n o m m e r p a r exe m ple « d efa ult.cs s ». NB : Vous ave z re m a r q u é, je n' u tilise q ue l'a nglais d a n s m e s ide n tifia n t s h t ml e t d a n s les n o m s d e fichier s. Ceci p o u r d e ux r aiso n s : 1 - On p e u t êt re a m m e n é à t r availler avec d e s ét ra nger s et il fa u t u n la ngage co m m u n et clair. 2 - Essaye z d'o uvrir u n e p age s u r inter ne t n o m m é « d éfa u t.h t m », le « é » va gé né rer u n co de caractè re relative m e n t h o r rible. De la m ê m e m a nière p o u r vot re d o s sier d e t r avail : p a s d'e s p ace (%20) ni d e carac tère s s pécia ux. David Epely - 2 0 0 7 / 2 0 0 8
  7. 7. On l'i m p o r te alor s d a n s n o t re in dex.ht m fichier : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;     quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;>  <html>  <head>  <title>Ma première page web2.0</title>  <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;default.cssquot;  media=quot;screenquot; /> </head>  <body>  <div id=quot;pagequot;>  <div id=quot;headerquot;>  <h1>Hello world!</h1>  </div>    <div id=quot;sidebarquot;>  <h3>Menu</h3>  <ul>  <li>menu 1</li>  <li>menu 2</li>  </ul>  </div>    <div id=quot;contentquot;>  <h2>Ma page</h2>  <p>Un peu de contenu à rajouter ici</p>  </div>    <div id=quot;footerquot;>  <a href=quot;index.htmquot; title=quot;lien inutilequot;>lien sur la  page</a>  </div>  </div>  </body>  </html> 6. Jouon s un p e u : un e pre mière mi s e e n form e On d éci de q u e n o t re p r é s e n t a tio n va se faire a s s e z si m ple m e n t : • co ule ur d e fo n d : ble u fo ncé • p age : fo n d bla nc, 60 0 px ce n t rée avec u n e b or d u re d e 1 px grise • co ule ur d e t exte : gris fo ncé • lien s : s élection or a nge • m e n u : s u r le côté d r oi t • Titres : b o r d u re 2 px e n b a s • pie d d e p age : ble u p âle avec u n e bo r d u r e p oi n tillée, t exte ce n t ré e t p e tit. David Epely - 2 0 0 7 / 2 0 0 8
  8. 8. Il s u ffit d e re m plir n o t re fichier d efa ult.css default.css /* Un commentaire */  /* Blocs */  body{  margin : 0;  padding : 0;  background­color : #2F2F4F;  /*couleur des textes mais pas de liens!*/  color : #666;  }  #page{  width : 600px;  /*permet de centrer la page sans avoir besoin d'utiliser text­align */  margin : 10px auto;  border : 1px solid #333;  background­color : #fff;  }  #sidebar{  /*le menu est flottant sur le coté droit*/  float : right;  width : 150px;  }  #content{  /*le contenu ne passera pas dessus le menu*/  width : 430px;  }  #footer{  padding : 4px;  text­align : center;  border­top : 1px dotted #999;  background­color : #E6E8FA;  font­size : 0.8em;  }  /*Texts*/  a{  color : #666;  text­decoration : none;  }  a:hover{  background­color : #E47833;  }  h2{  border­bottom : 2px solid #999;  } David Epely - 2 0 0 7 / 2 0 0 8
  9. 9. 7. La finition On a p re s q u e te r mi né. La p age à l'air d e s'afficher correcte m e n t s u r IE ... m ai s u n p e tit p r o blè m e s u r Firefox, le pie d d e p age p a s se p a r d e s s u s le m e n u. Firefox u n p r o blè m e?! En réalité : n o n. On a s pecifié le m e n u co m m e flot t a n t d o n c le pie d d e p age va se coller s o u s le con t e n u, ce q ui es t logiq ue e n fin d e co m p t e. Voici la p e tite a s t uce p o u r régler ça. Il fa u t r ajo u te r u n e b ar re h o ri z o n t ale < h r / > e n d e s s o u s d u co n te n u e n m e t t a n t à jo u r les nivea ux grâce a u cs s : index.htm <!DOCTYPE html PUBLIC quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;     quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;>  <html>  <head>  <title>Ma première page web2.0</title>  <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;default.cssquot;  media=quot;screenquot; />  </head>  <body>  <div id=quot;pagequot;>  <div id=quot;headerquot;>  <h1>Hello world!</h1>  </div>    <div id=quot;sidebarquot;>  <h3>Menu</h3>  <ul>  <li>menu 1</li>  <li>menu 2</li>  </ul>  </div>    <div id=quot;contentquot;>  <h2>Ma page</h2>  <p>Un peu de contenu à rajouter ici</p>  </div>    <hr class=quot;clearquot; />    <div id=quot;footerquot;>  <a href=quot;index.htmquot; title=quot;lien inutilequot;>lien sur la  page</a>  </div>  </div>  </body>  </html> David Epely - 2 0 0 7 / 2 0 0 8
  10. 10. Puis a u nivea u d u cs s il fa u t rajo u te r u n e clas se : default.css [...] hr.clear{  clear : both;  /* on cache la barre*/ visibility : hidden;  } [...] NB : En Css les clas se s à la différe nce s d e s ide n tifia n t s p e uve n t ré u tilisé s d a n s u n e p age. 8. C'est fini. Je r ajo u te rai p e u t êt re d a n s u n e n o uvelle versio n d e ce d oc u m e n t d' a u t re s m o d èles d e p age et l'intégra tio n d'effet s javascri p t q ui fo n t la n o t o riété d u web 2.0. Néa n m oi n s je p ré s e n te u n m o d èle d e n avigatio n m ai s il e n existe b ea uco u p. Je vo u s invite à jeter u n oeil à h t t p: / / w ww.navigatio n - web.co m , u n livre q ui p r o p o se u n e s oixa n t ai ne d e m o d èle s d e n aviga tio n. Puis p o u r ava ncer u n p e u pl u s d a n s l'élabo ra tio n d e p ages ergo n o miq ue s, plein d' a s t uce s e t u n e co m m u n a u t é t o ujo u r s gra n dis s a n te à l'aff û t d' u n inter ne t pl u s bea u e t m eilleu r : h t t p: / / w ww.alsacrea tio n s.co m . Et p o u r finir u n p e u d e d e sign avec le site h t t p: / / w ww.crys talx p.net q ui axe les créa tio n s vis uelles a u t o u r d' u n s tyle crys t al et ain si t r o uver u n p e u d'i n s pira tio n si n éce s s aire. David Epely - 2 0 0 7 / 2 0 0 8

×