Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

De la maquette au template

1,786 views

Published on

Published in: Business
  • Be the first to comment

  • Be the first to like this

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>

×