fenercafe anlatımıdır.
arkadaşlar bu konuda sizlere birbirinden farklı tasarım örnekleri göstereceğim... sizlerde anlattıklarımı kavradığınız zaman aşağıdaki örnek tasarımları bozup yeni türler ortaya çıkarabileceksiniz...
ayrıca bu tasarımlarda boyut sınırı yok isteyen istediği boyutu uygulayacak...
öncelikle şunları bilin
KODLARI TASARIM AYARLARI / GELİŞMİŞ / TASARIM ÜSTÜ-ALTI ve CSS KODU BÖLÜMLERİNE KOYUYORUZ...
content ==> sayfa altı demek (içerik altı )
header ==> başlık resmi demek
container ==> bazı bölümlerde göreceksiniz alt arkaplan demek örneği bir altta
nav container ==> menülerin alt fonu
nav ==> menü yani navigasyon
widht ==> genişlik
height ==>yükseklik
color==> renk
border / border color ==> kenar kalınlığı / kenar rengi
background color ==> arkaplan rengi
NOT : ARKADAŞLAR background image() yazan yerlere resim koyabilirsiniz..özelliklede header bölümünde işinize yarar
şidmi arkadaşlar aşağıdaki örnek tasarımları yavaş yavaş koymaya başlayacağım öncelikle bir tür üstünde çalışacağız ...bu türün adını ben A1 koydum...
A1 TASARIMI
şunu unutmayın margin ve padding değerleri ile şimdilik oynamayın
Bölgeler ve açıklamaları :
A BÖLGESİ ==> HEADER_Oben
B BÖLGESİ ==> Streifen_oben
C BÖLGESİ ==>CONTENT
D BÖLGESİ==>Streifen_unten
NAV==> MENÜLER
kodlara başlayalım...
öncelikle bu kodlar css kodlarına verilen komuttur yani onların biçimlenmesi için gereklidir..
CSS KODU BÖLÜMÜNE (Style tagları olmadan) koyunuz
Kod: h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
--------------------------------------------------------------------------------------------
bu kod link içindir...
açıklamaları :
color : normal rengidir
a hover: üstüne gelince değişecek renktir
a active : tıklanırkenki renktir
a visited : tıklandıktan sonraki renktir..
CSS KODU BÖLÜMÜNE(Style tagları olmadan)koyunuz..
Kod: 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;}
------------------------------------------------------------------------------------------------
Bu kodlar nav kodlarıdır yani menü içindir...
-bacground image() ==> buraya widht height boyutlarına uygun menü resmi koyabilirsiniz..
CSS KODU BÖLÜMÜNE koyunuz...
Kod: 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:#000000;}
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:#000000;}
---------------------------------------------------------------------------------------------
BU kodlarda en başta anlattığım bölüm kodları...
CSS KODU BÖLÜMÜNE koyunuz..
Kod:
* { 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: #000000;}
#Streifen_oben {
float: left;
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #80807F;
margin: 0px 0px 0px 0px;
background: #4E4848;}
#content {
color: #333;
border: 1px solid #80807F;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 320px;
width: 738px;
float: left;
background: #000000;
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: #000000;
margin: 0px 0px 10px 0px;
padding: 10px;}
#counter{text-align:center;}
NOT: #counter sayaç için olan koddur...bunuda ilerleyen bölümlerde daha detaylı anlatacağım..
-----------------------------------------------------------------------------------------------
TASARIM ÜSTÜNE
Kod: <div id="Testdesign2">
<div id="Header_oben">text</div>
<div id="Streifen_oben">text</div>
text yazan yerlere yazı yazabilirsiniz...texti silip boş bırakırsanız başlık resmi üstü boş kalır...
----------------------------------------------------------------------------------------------------
TASARIM ALTINA
Kod: <div id="Streifen_unten">WWW.SİTENİZİN ADI.TR.GG</div></div>
sitenizin adı .tr.gg yazan yere copyright yazısı yazabilirsiniz...
_____________________________________________________________
A2 TASARIMI
Arkadaşlar üstteki örnekteki gibi bir tasarım ancak bu tasarımda menüyü biz yapıyoruz yani bize bir boşluk kalıyor ve o boşluğa menüyü biz koyuyoruz...
menüyü nasıl koyuyoruz? forumda hazır css menüler var onlardan birini alıp düzenleyin ve aşağıda belirtiiğim yere koyun...
şimdi basamakları inceleyin yine
CSS KODU BÖLÜMÜNE
Kod: div#nav_container{visibility: hidden;}
li.nav_element{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}
Kod: a{color:#800000; font-size: 15px; text-decoration: none;}
a:hover {color: #800000; font-size: 15px; text-decoration: none;}
a:link {color: #800000; font-size: 15px; text-decoration: none;}
a:active {color: #800000; font-size: 15px; text-decoration: none;}
a:visited {color: #800000; font-size: 15px; text-decoration: none;}
Kod: body {background-color:#F2F2F2;}
BU kod arkaplan rengi kodudur... background-color yerine background-image yazarsanız ve resim urlsi eklerseniz arkaplan resimden oluşur...
Kod: * { padding: 0; margin: 0; }
#Testdesign3 {
margin: 0 auto;
width: 922px;}
#Header_oben {
color: #FFFFFF;
width: 900px;
height: 80px;
background-image: url();
background: #800000;
float: left;
padding: 10px;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;}
#Navi_Feld {
width: 900px;
background: #DAC9CB;
color: #4A0000;
padding: 10px;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;}
#content {
height: 300px;
width: 900px;
background: #F2F2E6;
color: #000000;
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 0px;
padding: 10px;
overflow:auto;}
#Feld_unten {
width: 900px;
color: #FFFFFF;
border: 1px solid #CCCCCC;
background: #800000;
margin: 0px 0px 10px 0px;
padding: 10px;}
#counter{text-align:center;}
----------------------------------------------------------------------------------------------------
-ŞİMDİ BU BÖLÜMDE MENÜ KODUNU KOYMAK İÇİN LAZIM OLAN KOD VAR...KODDA YAZAN ''menü bu bölüme'' yazan yeri silerek forumdan veya başka yerden hatta kendi yaptığınız menünün kodunu koyunuz... ancak şunu unutmayınki büyük boyuttaki yani genişilk be uzunuluğu büyük olan css menüleri tasarıma birazda olsa zarar verir
TASARIM ÜSTÜNE
Kod: <div id="Testdesign3">
<div id="Header_oben"></div>
<div id="Navi_Feld"> menü bu bölüme
TASARIM ALTINa
Kod: <div id="Feld_unten"></div></div> ______________ 
En son ysnsen tarafından 01.07.2008 06:34:54 tarihinde değiştirildi, toplam 2 kere değiştirildi
|
