Öncelikle kodları koyacağımız yerler css bölümü..Css design stilinde tasarım ayarları/gelişmiş bölümünden en alttaki kutu olan css kodu bölümüne aşağıdaki kodları koyuyoruz.
-body = arkaplan kodudur.# ile yazılan sayı değer yerine başka renkler koyabilirsiniz.
Css kodu bölümüne
body {background-color:#F2F2F2;}
a{color:#000080; font-size: 14px; text-decoration: none;}
a:hover {color: #000080; font-size: 14px; text-decoration: none;}
a:link {color: #000080; font-size: 14px; text-decoration: none;}
a:active {color: #000080; font-size: 14px; text-decoration: none;}
a:visited {color: #000080; font-size: 14px; text-decoration: none;}
3.adım
-bu kodlar menü içindir.
-li.nav_element a = bu menünün ilk hali içindir
-li.nav_element a:hover = bu kodda menünün üstüne gelindiği durum içindir.
Css kodu bölümüne
li.nav_element a{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 120px;
height: 20px;
background-image:url();
background-color:#FDC600;}
li.nav_element a:hover{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 120px;
height: 20px;
background-image:url();
background-color:#F3EA8F;}
4.adım
-bu kodların hepsi yukarıdaki görsel anlatımda gösterilen yerler içindir.
Css kodu bölümüne
* { padding: 0; margin: 0; }
#Testdesign2 {
margin: 0 auto;
width: 922px;}
#Header_oben {
color: #333;
width: 900px;
height: 60px;
float: left;
padding: 10px;
border: 1px solid #80807F;
margin: 10px 0px 0px 0px;
background-image: url();
background: #FDC600;}
#Streifen_oben {
float: left;
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #80807F;
margin: 0px 0px 0px 0px;
background: #F3EA8F;}
#content {
color: #333;
border: 1px solid #80807F;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 320px;
width: 738px;
float: left;
background: #E8E8E3;
overflow:auto;}
#nav_container {
float: right;
color: #333;
border: 1px solid #80807F;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 320px;
width: 140px;
display: inline;
background: #FDF6Da;}
#Streifen_unten {
width: 900px;
clear: both;
color: #333;
border: 1px solid #80807F;
background: #FDC600;
margin: 0px 0px 10px 0px;
padding: 10px;}
#counter{text-align:center;}
5.adım
-bu kodlar css komutlarını tutan divlerdir.
-yazı buraya yazan yerlere istediğiniz yazıları yazabilirsiniz.
Tasarım üzerindeki yazı bölümüne
<div id="Testdesign2">
<div id="Header_oben">yazı buraya</div>
<div id="Streifen_oben">yazı buraya</div>
6.adım
Tasarım altındaki yazı bölümüne
<div id="Streifen_unten">;</div><>yazı buraya</div> alıntdır
______________
