If you can't read please download the document
De la maquette au template
Embed Size (px)
344 x 292
429 x 357
514 x 422
599 x 487
Citation preview
1. Cration d'un template
1. Dcoupe de la maquette
2. Structure globale : HTML
2. 3. Structure du contenu : HTML
3. 4. Mise en page : CSS 4. 5. Mise en forme : CSS 5. Dcoupe de
la maquette
6. entte 7. contenu 8. pied de page 9. Dcoupe de la maquette
conteneur global
bandeau vertical
10. conteneur central 11. entte 12. contenu 13. pied de page 14.
Structure globale
24. 25. Structure : bandeau vertical
26.
27.
Aller au menu... 28.
Aller au contenu 29.
Plan du site 30.
Aide 31.
32. 33. 34. 35. 36. 37.
38.
Nouveauts
39.
40.
01.01.01 : lorem... 41.
42.
43.
44. Structure : entte
45. 46.
47.
48.
L'levage 49.
Nos chiens 50.
Activits 51.
Le cairn 52.
Et aussi 53.
Contact 54.
55. Structure : contenu
56.
Accueil > ...
57. Bienvenue... 58.
Nous esprons...
59.
Nous mettons...
60.
Pour nous...
61. Intertitre 62.
Lorem ipsum...
63.
Nisl nec rhoncus...
64.
65. Structure : pied de page
66. Mise en page : globaux
67. margin: 0; 68. padding: 0; 69. border: 0; 70. font-family:
Arial, Helvetica, sans-serif; 71. } 72. body { 73. margin: 1em 0;
74. background: #ffc; 75. font-size: 1em; 76. } 77. #global { 78.
margin: 0 auto; 79. width: 750px; 80. border: 1px solid #633; 81. }
82. Mise en forme : zones
83. list-style-type: none; 84. font-size: .8em; 85. } 86. #global {
87. margin: 0 auto; 88. width: 750px; 89. border: 1px solid #633;
90. background: #fc6 url(fond.gif)...; 91. } 92. #gauche { 93.
float: left; 94. width: 170px; 95. } 96. #contenu { 97.
margin-left: 190px; 98. border-left: 1px solid #633; 99.
background: #fff; 100. } 101. Mise en forme : entte
102. position: relative; 103. height: 100px; 104. background:
url(photo...; 105. } 106. #entete span img { 107. position:
absolute; 108. top: -10px; 109. left: -16px; 110. z-index: 2; 111.
} 112. #h1 { 113. text-align: right; 114. padding-right: 125px ;
115. } 116. 117. 118.
119. Mise en forme : menu
#contenu ul {
background: #fc6 url(ombre.gif) left bottom repeat-x;
120. border-top: 1px solid #633; 121. padding: 4px 0 9px 136px;
122. font-weight: bold; 123. }
#contenu li {
display: inline;
124. } 125. #contenu li a { 126. text-decoration: none; 127.
color: #900; 128. margin-right: 9px; 129. } 130. Mise en forme :
menu
Et ainsi de suite...
La structure HTML n'est pas modifie, seuls les lments sont
styls au besoin.
131. Un fichier CSS permet de grer la mise en page et la mise en
forme de tout un site, quel que soit le nombre de pages. 132.
Chaque modification sera automatiquement rpercute sur l'ensemble
des pages.
LOAD MORE