De la maquette au template

1 703 vues

Publié le

Publié dans : Business
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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>

×