DESIGN SITE PAR ETAPE POUR DEBUTANT ?

Bonjour,

Après avoir potassé en détail le cours sitweb du site du zéro ( excellent)
Et après avoir fait pas mal de progrès, voici les questions que je me pose au stade
ou j'en suis, sans doute que d'autre débutant dans mon genre se pose la même question


J'aimerais avoir votre avis sur les étapes à respecter pour créer le design d'un site !!

Je m'explique, j'ai bien compris que tout le design tient dans une grande page css unique qui
s'applique à toutes les pages du site et qui est pratique à changer quand y a besoin

Pouvez-vous dire quels éléments doivent être dans cette feuille de style ?
Quels éléments ne doivent pas y être ?

Est-ce que par exemple les images de fonds back-ground doivent être dans le Css ou dans la page html ?
(je mets toutes mes images dans le Css, mais Dreamweaver ne sait plus afficher mes pages ?)

Je m'interroge sur ces questions, car j'ai une tendance à refaire des tonnes de Css pour chaque
nouvelles page de mon site, et je crois que la page unique de Css ne doit pas comporter une page
de Css par feuille web, ça serait fastidieux ?
Mais alors, comment mettre en page les nouvelles pages sans créer de nouveaux css ?

En exemple, ci-joint, ma page CSS unique, si vous avez des conseils ou des améliorations à
apporter à celle-ci, je suis tout ouïe

Merci de votre avis:

body
{
color:#330066;
font-family:Verdana;
margin: 10px 10px 10px 10px;
background-image: url("images/partitionfond.jpg");
border: 3px solid white;
}

/* L'en-tête */

#pied_de_page
{
width: 760px;
height: 90px;
padding: 0px;
margin-right: auto;
margin-left: auto;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("images/bannieredubas.jpg");
background-repeat: repeat-x;
border: 2px solid black;
}

#entete a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
}


/* MENU DE GAUCHE */
#menu
{
float: left;
width: 18%;
white-space: nowrap;
background-image: url("images/essaifondmenu.jpg");
background-repeat: no-repeat;
border: 3px solid white;
}

.titremenu {
font-family: Georgia, "Times New Roman", Arial, serif;
text-align: center; }

#esp ul
{
list-style-image: url("");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

#esp a
{
color: black;
}

#esp a:hover
{
background-color: #B3B3B3;
color: black;
}

a:hover
{
background-color: #B3B3B3;
color: black;
}

/* Le corps de la page */

#corps
{
width: 760px;
margin-top: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
color: black;
background-image: url("images/partitionfondpourlecorps.jpg");
border: 2px solid red;
overflow: visible;
}

#corps h1
{
color: black;
text-align: center;
font-family: Georgia, "Times New Roman", Arial, serif;
}

#corps h2
{
height: 30px;
background-image: url("images/titre.png");
background-repeat: no-repeat;
padding-left: 30px;
color: black;
text-align: left;
font-family: Georgia, "Times New Roman", Arial, serif;
}

#corps p
{
font-size: 18px;
text-indent: 60px;
color: black;
font-family: Georgia, "Times New Roman", Arial, serif;
text-align: justify;
}

a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
color: blue;
}



/* CSS DE LA PAGE ACCUEIL*/

#menuaccueil ul
{
list-style-image: url("");
padding: 70px;
padding-left: 70px;
margin: 0px;
margin-bottom: 0px;
}

.linotebleue
{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
list-style-type: none;
background-image: url(images/notedemusique.gif);
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.linotebleue h2
{
color: blue;
}


.liapprendrepiano {
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
list-style-type: none;
background-image: url(images/livredeconnaissance.gif);
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}


.lisalondemusique{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
color: black;
list-style-type: none;
background-image: url(images/musiquephonographes.gif);
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.lisalondemusique h1
{
color: purple;
}

.litelechargementpartitions{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
color: black;
list-style-type: none;
background-image: url(images/musiquepartition.gif);
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.litelechargementpartitions h1
{
color: black;
}

.titreh2
{
margin-left: 70px;
}

.imageflottante
{
float: left;
margin-left: 0px;
}


.notedemusique
{
border: none;
}

.livredeconnaissance
{
border: none;
}

/* CSS DE LA PAGE INDEX*/
.drapeau
{
margin-right: 20px;
border-style: none;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */



#en_tete
{
width: 760px;
height: 90px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background-image: url("images/banniere1noambonnandcombis.jpg");
background-repeat: no-repeat;
}