Design-Tuto - Pour tous les webmaster !
  Faire son design
 

Leçon 1
Comprendre le css:

Nous allons commencer par comprendre le css.

Bon tout à bord j'explique un peut le css, le css est composé par plusieur partie sa veut dire par plusieur composant !

Mais pour les retrouvé vous devez comprende ces mot !

Alors je commence à citer ces mot (code)

edit_header_full: Veut dire header tous simplement
headline: Montre comment et ou sera pacé le titre (aucune importance)
nav_heading: Quand vous le changerais remplacera le bouton ou il y a écrit naviguation
nav a: montre la couleur de l'écriture par exemple pour écriture noir "
td.nav a{color: #FFFFFF;} "
nav: design bouton, pour changer le bouton de toute la naviguation !
edit_below_nav: Visibilitè couleur du cradre en bas la navigaution
edit_navi_headbg: Sert à changer le cadre en bas de la navigaution grâce à votre images choisi
edit_content_top: Sert à changer la grande barre en haut de chauqe page
edit_content_bottom2: Sert à changer la grand barre en bas de chaque pages.
edit_content: Sert à changer le fond de chaque page
edit_content_bottom: Sert a plusieur chose vous verrez par la suite
sidebar_heading: Sert à changer le bouton de titre de chaque cadre
shouty: Fond du premiers cadre
shouty2: Fond du deuxièmes cadres

edit_rechts_bottom: Pareil que edit_navi_headbg mais pour le cotè droite !

Voilà je vous ai donné le général !
Je vous met à disposition une images qui montre encore plus de code ! Et qui représente encore meieux ceux que je vous est mit !






Leçcon 2:
Mais je suis ultra debutant me faut de l'aide svp !

Comme vous le montre le titre nous allons attaquer notre design !

Prenons un code de design n'importe le quel !

<style type="text/css">  <!--
td.nav{background-image:url(URL DU BOUTON 2); background-repeat:no-repeat;}
td.nav:hover{background-image:url(URL DU BOUTON 1); background-repeat:no-repeat;}
td.nav a{text-decoration:none;}
td.nav_heading{background-image:url(URL D'IMAGES QUI REMPLAE LA OU IL Y A ECRIS NAVIGUATION); height:35px; background-repeat:no-repeat;}
td.edit_navi_headbg{background-image:url(URL DE L'IMAGES QUI CHANGE DU CADRE EN BAS LA NAVIGAUTION);background-color:#XXXXXX;}
td.edit_below_nav {visibility:hidden;}
td.nav a{color: #000000;}
td.headline{visibility:hidden;}
td.edit_header_full{background-image:url(URL DE L'IMAGES DE VORTE HEADER);}
td.edit_content_bottom{height:0px;}
td.edit_content_top{background-image:url(URL DE L'IMAGES PUR XCHANGER LA GRANDE BARRE DU HAUT DE CHAQUE PAGE); height:35px; background-repeat:no-repeat;}
td.edit_content_bottom2{background-image:url(PARREIL SAUF DE LA BARRE DU BAS);}
td.edit_content_bottom{background-image:url(
URL DE L' IMAGES POUR L IMAGES DU CADRE EN BAS A DROITE);background-color:transparent;}
td.edit_content{background-image:url(URL DE L'IMAGES POUR CHANGER LE FOND DE CHAQUE PAGE);}
td.edit_content_bottom{height:0px;}
body{background-image:url(URL DE L'IMAGES POUR FOND DE PAGE DU SITE); background-attachment: fixed;background-color:#XXXXXX;}
td.sidebar_heading{background-image:url(URL DE L'IMAGE POUR CHANGER LES BOUTON DE TITRE DES CADRE A DROITE); height:35px; background-repeat:no-repeat;}
td.edit_rb_footer {visibility:hidden;}
td.edit_rechts_sbg{visibility:hidden;}
td.edit_rechts_cbg{background-image:url(URL);background-color:transparent;}
td.edit_rechts_bottom{background-image:url(URL);background-color:transparent;}
td.shouty{background-image:url(
URL DE L'IMAGES POUR CHANGER LE FOND DES CADRE A DROITE 1);background-color: ;}
td.shouty2{background-image:url(
URL DE L'IMAGES POUR CHANGER LE FOND DES CADRE A DROITE 2 );background-color: ;}
td.shouty3{background-image:url(
URL DE L'IMAGES POUR CHANGER LE FOND DES CADRE A DROITE 3);background-color: ;}
td.shouty4{background-image:url(
URL DE L'IMAGES POUR CHANGER LE FOND DES CADRE A DROITE 4);background-color: ;}
td.shouty5{background-image:url(URL DE L'IMAGES POUR CHANGER LE FOND DES CADRE A DROITE 5);background-color: ;}
--> </style><style type="text/css">
<!--
html, body {
text-align: center;
}
-->
</style>

Voilà maintenant vous pouvez faire votre propre design avec vos images ! Mais la leçon n'est pas encore fini ! Vous pouviez toujours agrandir le design, le centré changer la taille du bouton, header ....


Leçon 3
Taille, centrer, élargir, décaler...


La code pour élargirs son design est:

table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;}
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 15% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 15% !important;}
td.edit_rechts_cbg{width:100%;}


Mais ne fonctionne pas sur tous les design (je pense).
Mais il faut le placer juste après ceci <style type="text/css"> et ton design prendra toute la alrgeur de ton écran.

Le code pour centré son design:

Tu colle le code dans "Texte au dessus de design"!

<div style="width:921px; position: relative; margin-left: auto; margin-right: auto;">

Voilà, maintenant ton design et centré en plein milleu de ton écran

IMPORTANT: Tous les code que je vous est donné ne marche pas sur tous les design mais en majorité ils marches !


Voilà le tutoriaux sera mis a jours de temps en temps.

 
  Aujourd'hui sont déjà 1 visiteurs (27 hits) Ici!  
 
=> Veux-tu aussi créer une site gratuit ? Alors clique ici ! <=