De la maquette au template

1,415 views
1,268 views

Published on

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,415
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

De la maquette au template

  1. 1. Création d'un template <ul>1. Découpe de la maquette <li>2. Structure globale : HTML
  2. 2. 3. Structure du contenu : HTML
  3. 3. 4. Mise en page : CSS
  4. 4. 5. Mise en forme : CSS </li></ul>
  5. 5. Découpe de la maquette <ul>4 zones <li>bandeau vertical
  6. 6. entête
  7. 7. contenu
  8. 8. pied de page </li></ul>
  9. 9. Découpe de la maquette <ul>conteneur global <li>bandeau vertical
  10. 10. conteneur central
  11. 11. entête
  12. 12. contenu
  13. 13. pied de page </li></ul>
  14. 14. Structure globale <ul><li><div id= &quot; global &quot; >
  15. 15. <div id= &quot; gauche &quot; >
  16. 16. </div>
  17. 17. <div id= &quot; contenu &quot; >
  18. 18. <div id= &quot; entete &quot; >
  19. 19. </div>
  20. 20. <div id= &quot; page &quot; >
  21. 21. </div>
  22. 22. </div>
  23. 23. </div>
  24. 24. <p id= &quot; copyright &quot; ></p> </li></ul>
  25. 25. Structure : bandeau vertical <ul><li><div id= &quot; gauche &quot; >
  26. 26. <ul>
  27. 27. <li><a href= &quot; # &quot; >Aller au menu...</a></li>
  28. 28. <li><a href= &quot; # &quot; >Aller au contenu</a></li>
  29. 29. <li><a href= &quot; # &quot; >Plan du site</a></li>
  30. 30. <li><a href= &quot; # &quot; >Aide</a></li>
  31. 31. </ul>
  32. 32. <form>
  33. 33. <fieldset>
  34. 34. <input type= &quot; text &quot; value= &quot; Rechercher &quot; />
  35. 35. </fieldset>
  36. 36. </form>
  37. 37. <div id= &quot; encart &quot; >
  38. 38. <p>Nouveautés</p>
  39. 39. <ul>
  40. 40. <li>01.01.01 : lorem...</li>
  41. 41. </ul>
  42. 42. </div>
  43. 43. </div> </li></ul>
  44. 44. Structure : entête <ul><li><div id= &quot; entete &quot; >
  45. 45. <!-- logo + nom en h1-->
  46. 46. </div>
  47. 47. <ul>
  48. 48. <li><a href= &quot; # &quot; >L'élevage</a></li>
  49. 49. <li><a href= &quot; # &quot; >Nos chiens</a></li>
  50. 50. <li><a href= &quot; # &quot; >Activités</a></li>
  51. 51. <li><a href= &quot; # &quot; >Le cairn</a></li>
  52. 52. <li><a href= &quot; # &quot; >Et aussi</a></li>
  53. 53. <li><a href= &quot; # &quot; >Contact</a></li>
  54. 54. </ul> </li></ul>
  55. 55. Structure : contenu <ul><li><div id= &quot;pag e &quot; >
  56. 56. <p><a href= &quot; # &quot; >Accueil</a> > <a href= &quot; # &quot; >...</p>
  57. 57. <h2>Bienvenue...</h2>
  58. 58. <p>Nous espérons...</p>
  59. 59. <p>Nous mettons...</p>
  60. 60. <p>Pour nous...</p>
  61. 61. <h3>Intertitre</h3>
  62. 62. <p>Lorem ipsum...</p>
  63. 63. <p>Nisl nec rhoncus...</p>
  64. 64. </div> </li></ul>
  65. 65. Structure : pied de page <ul><li><p id= &quot;copyright &quot; > Tous droits... </p> </li></ul>
  66. 66. Mise en page : globaux <ul><li>* {
  67. 67. margin: 0;
  68. 68. padding: 0;
  69. 69. border: 0;
  70. 70. font-family: Arial, Helvetica, sans-serif;
  71. 71. }
  72. 72. body {
  73. 73. margin: 1em 0;
  74. 74. background: #ffc;
  75. 75. font-size: 1em;
  76. 76. }
  77. 77. #global {
  78. 78. margin: 0 auto;
  79. 79. width: 750px;
  80. 80. border: 1px solid #633;
  81. 81. } </li></ul>
  82. 82. Mise en forme : zones <ul><li>ul {
  83. 83. list-style-type: none;
  84. 84. font-size: .8em;
  85. 85. }
  86. 86. #global {
  87. 87. margin: 0 auto;
  88. 88. width: 750px;
  89. 89. border: 1px solid #633;
  90. 90. background: #fc6 url(fond.gif)...;
  91. 91. }
  92. 92. #gauche {
  93. 93. float: left;
  94. 94. width: 170px;
  95. 95. }
  96. 96. #contenu {
  97. 97. margin-left: 190px;
  98. 98. border-left: 1px solid #633;
  99. 99. background: #fff;
  100. 100. } </li></ul>
  101. 101. Mise en forme : entête <ul><li>#entete {
  102. 102. position: relative;
  103. 103. height: 100px;
  104. 104. background: url(photo...;
  105. 105. }
  106. 106. #entete span img {
  107. 107. position: absolute;
  108. 108. top: -10px;
  109. 109. left: -16px;
  110. 110. z-index: 2;
  111. 111. }
  112. 112. #h1 {
  113. 113. text-align: right;
  114. 114. padding-right: 125px ;
  115. 115. } </li></ul><ul><li><di v id= &quot; entete &quot; >
  116. 116. <span><a href= &quot; # &quot; ><img src= &quot; logo.png &quot; alt= &quot;&quot; title= &quot;A ccueil &quot; /></span>
  117. 117. <h1><img src= &quot; elevage.gif &quot; alt= &quot; Cairn-terriers, le Clos... &quot; /></h1>
  118. 118. </div> </li></ul>
  119. 119. Mise en forme : menu <ul>#contenu ul { <li>background: #fc6 url(ombre.gif) left bottom repeat-x;
  120. 120. border-top: 1px solid #633;
  121. 121. padding: 4px 0 9px 136px;
  122. 122. font-weight: bold;
  123. 123. } </li></ul><ul>#contenu li { <li>display: inline;
  124. 124. }
  125. 125. #contenu li a {
  126. 126. text-decoration: none;
  127. 127. color: #900;
  128. 128. margin-right: 9px;
  129. 129. } </li></ul>
  130. 130. Mise en forme : menu <ul>Et ainsi de suite... <li>La structure HTML n'est pas modifiée, seuls les éléments sont stylés au besoin.
  131. 131. Un fichier CSS permet de gérer la mise en page et la mise en forme de tout un site, quel que soit le nombre de pages.
  132. 132. Chaque modification sera automatiquement répercutée sur l'ensemble des pages. </li></ul>

×