De la maquette au template

Embed Size (px)

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

  • 4 zones
  • bandeau vertical

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

  • 15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    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
          • Tous droits...

          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
          • ul {
          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
          • #entete {
          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.