De la maquette au template
Upcoming SlideShare
Loading in...5
×
 

De la maquette au template

on

  • 1,177 views

 

Statistics

Views

Total Views
1,177
Views on SlideShare
1,177
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

De la maquette au template De la maquette au template Presentation Transcript

  • Création d'un template
      1. Découpe de la maquette
    • 2. Structure globale : HTML
    • 3. Structure du contenu : HTML
    • 4. Mise en page : CSS
    • 5. Mise en forme : CSS
  • Découpe de la maquette
      4 zones
    • bandeau vertical
    • entête
    • contenu
    • pied de page
  • Découpe de la maquette
      conteneur global
    • bandeau vertical
    • conteneur central
    • entête
    • contenu
    • pied de page
  • Structure globale
    • <div id= &quot; global &quot; >
    • <div id= &quot; gauche &quot; >
    • </div>
    • <div id= &quot; contenu &quot; >
    • <div id= &quot; entete &quot; >
    • </div>
    • <div id= &quot; page &quot; >
    • </div>
    • </div>
    • </div>
    • <p id= &quot; copyright &quot; ></p>
  • Structure : bandeau vertical
    • <div id= &quot; gauche &quot; >
    • <ul>
    • <li><a href= &quot; # &quot; >Aller au menu...</a></li>
    • <li><a href= &quot; # &quot; >Aller au contenu</a></li>
    • <li><a href= &quot; # &quot; >Plan du site</a></li>
    • <li><a href= &quot; # &quot; >Aide</a></li>
    • </ul>
    • <form>
    • <fieldset>
    • <input type= &quot; text &quot; value= &quot; Rechercher &quot; />
    • </fieldset>
    • </form>
    • <div id= &quot; encart &quot; >
    • <p>Nouveautés</p>
    • <ul>
    • <li>01.01.01 : lorem...</li>
    • </ul>
    • </div>
    • </div>
  • Structure : entête
    • <div id= &quot; entete &quot; >
    • <!-- logo + nom en h1-->
    • </div>
    • <ul>
    • <li><a href= &quot; # &quot; >L'élevage</a></li>
    • <li><a href= &quot; # &quot; >Nos chiens</a></li>
    • <li><a href= &quot; # &quot; >Activités</a></li>
    • <li><a href= &quot; # &quot; >Le cairn</a></li>
    • <li><a href= &quot; # &quot; >Et aussi</a></li>
    • <li><a href= &quot; # &quot; >Contact</a></li>
    • </ul>
  • Structure : contenu
    • <div id= &quot;pag e &quot; >
    • <p><a href= &quot; # &quot; >Accueil</a> > <a href= &quot; # &quot; >...</p>
    • <h2>Bienvenue...</h2>
    • <p>Nous espérons...</p>
    • <p>Nous mettons...</p>
    • <p>Pour nous...</p>
    • <h3>Intertitre</h3>
    • <p>Lorem ipsum...</p>
    • <p>Nisl nec rhoncus...</p>
    • </div>
  • Structure : pied de page
    • <p id= &quot;copyright &quot; > Tous droits... </p>
  • Mise en page : globaux
    • * {
    • margin: 0;
    • padding: 0;
    • border: 0;
    • font-family: Arial, Helvetica, sans-serif;
    • }
    • body {
    • margin: 1em 0;
    • background: #ffc;
    • font-size: 1em;
    • }
    • #global {
    • margin: 0 auto;
    • width: 750px;
    • border: 1px solid #633;
    • }
  • Mise en forme : zones
    • ul {
    • list-style-type: none;
    • font-size: .8em;
    • }
    • #global {
    • margin: 0 auto;
    • width: 750px;
    • border: 1px solid #633;
    • background: #fc6 url(fond.gif)...;
    • }
    • #gauche {
    • float: left;
    • width: 170px;
    • }
    • #contenu {
    • margin-left: 190px;
    • border-left: 1px solid #633;
    • background: #fff;
    • }
  • Mise en forme : entête
    • #entete {
    • position: relative;
    • height: 100px;
    • background: url(photo...;
    • }
    • #entete span img {
    • position: absolute;
    • top: -10px;
    • left: -16px;
    • z-index: 2;
    • }
    • #h1 {
    • text-align: right;
    • padding-right: 125px ;
    • }
    • <di v id= &quot; entete &quot; >
    • <span><a href= &quot; # &quot; ><img src= &quot; logo.png &quot; alt= &quot;&quot; title= &quot;A ccueil &quot; /></span>
    • <h1><img src= &quot; elevage.gif &quot; alt= &quot; Cairn-terriers, le Clos... &quot; /></h1>
    • </div>
  • Mise en forme : menu
      #contenu ul {
    • background: #fc6 url(ombre.gif) left bottom repeat-x;
    • border-top: 1px solid #633;
    • padding: 4px 0 9px 136px;
    • font-weight: bold;
    • }
      #contenu li {
    • display: inline;
    • }
    • #contenu li a {
    • text-decoration: none;
    • color: #900;
    • margin-right: 9px;
    • }
  • Mise en forme : menu
      Et ainsi de suite...
    • La structure HTML n'est pas modifiée, seuls les éléments sont stylés au besoin.
    • 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.
    • Chaque modification sera automatiquement répercutée sur l'ensemble des pages.