- Css tasarım yapma

Css tasarım yapma

Bu anlatım sadece wepdersimde vardır..

Alıntı göstermek şartıyla sitemizdeki bütün içeriği kullana bilirsiniz..

Bu bölümde herhangi bir web tasarım yazılımına ihtiyaç duymadan kodlamaya başlıyoruz. Bunun için kwrite (linux) ya da notepad (windows) gibi bir metin düzenleyici yeterli.

Adım 1. Metin editörümüz ile İndex.html ve style.css isimli iki belge oluşturun.

Hazır ve boş olarak- | index.html | style.css | resimler | - dosyalarını indirmek için tıklayın!

Adım 2. Html dosyamızın başına şu kodu eklememiz gerekli. Bunlar bütün html sayfalarında bulunması şart olan kodlar.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<html>
<head>
</head>
<body>
</body>
</html>

Adım 3. CSS stil dosyamızdan bilgileri çağırmak için html dosyamızda <head> ve </head> arasına şu kodu ekleyelim :


<title>WEB SİTEMİZİN BAŞLIĞI</title>
<link rel=stylesheet href="style.css" type="text/css" media=screen>

“WEB SİTEMİZİN BAŞLIĞI” yazan bölümü istediğiniz bir başlık ile değiştirebilirsiniz.

Adım 4. Şimdi index.html dosyamıza div etiketlerini ekleyeceğiz. Div’ler stilleri css dosyasında bulunan, içerik olarak html dosyasında da yer alan web sitemizin bölümleridir. Örneğin aşağıdaki resimde bizim sitemizdeki div tanımlarının yerlerini görebilirsiniz :

Adım 5. İndex.html belgemizde <body> ile </body> etiketleri arasına aşağıdaki kodu ekleyelim. Kodlarda da görebileceğiniz gibi web sitemizin temel bileşenleri olan div’leri tanımlıyoruz.


<div id="sayfa">
    <div id="baslik">
    </div>
    <div id="linkmenu">
    </div>
    <div id="anabolge">
        <div id="icerik">
        </div>
        <div id="yanmenu">
        </div>
    </div>
    <div id="altlik">
    </div>
</div>

Adım 6. Şu durumda İnternet tarayıcınızla sayfayı açsanız hiçbir şey göremezsiniz. Çünkü stil dosyamızda henüz div’lerle ilgili bir tanımlama yapmadık. İndex.html sayfasındaki div etiketlerine atıfta bulunduğumuzu belirtmek için her bir div etiketinin başına # işaretini koymamız gerekir. Sonra köşeli parantez açıp özellik ve bu özelliğe ait değeri girmemiz gerekir. Örneğin;


 
#baslik {width:960px;}

Yukarıdaki örnekte başlığımızın genişliğinin 960 piksel olduğunu belirtiyoruz. Aynı parantez içinde birden fazla özellikte tanımlayabiliriz. Her bir tanımlamadan sonra noktalı virgül koymayı unutmamalıyız. Örneğin;


#baslik {
width:960px;
height:108px;
background-image:url(resimler/baslik.png);

Bu kodlamada başlığa ait genişlik, yükseklik ve kullanılacak arkaplan resmi gibi bilgiler yer alıyor. Benzer şekilde sayfada yer alacak yazıtipi, boyutu, rengi gibi değerleri de css dosyası içinde belirtebiliriz.

Eğer ki bir sınıfa atıf yapıyorsak önüne “a” harfini koymanız gerekir. Ve yine her bir değer açıklamasından sonra noktalı virgül kullanmak zorundayız.

Adım 7. Şimdi style.css dosyanızı metin editörüyle açıp aşağıdaki CSS kodunu ekleyin. Bu kodlar html sayfamızda belirttiğimiz div’lerin görünüm ve yerleriyle ilgili bilgiler içeriyor. İnternette CSS kodlamayla ilgili pek çok bilgi bulabileceğiniz gibi hazır css kodlarını alıp kendi oluşturduğunuz sayfalara da uygulayabilirsiniz. Ben fatih hayraoğlu, volkan görgülü ve birkaç yabancı kaynağı inceleyerek aşağıdaki kodları çıkardım. Bu arada ufak bir hatırlatma daha yapmak istiyorum; width : genişlik, height:yükseklik değerini verir. Resimler dizininizdeki resimlerinizin yükseklik ve genişilik değerlerine göre CSS belgenizde birkaç ufak değişiklik yapmanız gerekebilir.


body {
background-color:#b4b4b4;
margin:0;
padding:0;
text-align:center;
font-family:Sans;
font-size:12px;
color:#555555;
}
#sayfa {
width:960px;
margin:auto;
padding:auto;
background-image:url(resimler/sayfa.png);
text-align:left;
}
#baslik {
width:960px;
height:108px;
background-image:url(resimler/baslik.png);
clear:both;
}
#linkmenu {
width:960px;
height:44px;
background-image:url(resimler/linkmenu.png);
clear:both;
}
#anabolge {
width:960px;
clear:both;
padding-top:10px;
}
#icerik {
float:left;
width:560px;
padding-left:45px;
margin-bottom:10px;
}
#yanmenu {
float:right;
width:290px;
padding-right:45px;
}
#altlik {
width:960px;
height:100px;
background-image:url(resimler/altlik.png);
clear:both;
}
#altlik p {
padding-top:30px;
color:#FFFFFF;
padding-left:50px;
line-height:20px;
}

Adım 8. Son olarak içerik, yan menu ve altlığa bazı yazılar ekleyelim. Bunu için aşağıdaki yazıları ya da kendi hazırladığınız paragrafları index.html belgenizdeki ilgili bölümlere ekleyebilirsiniz. yazı da bulunan paragraf başı, ise alt satıra geç anlamındadır.


İcerik :
<p>HÜRRİYETE DOĞRU<p/>
<p>
Gün doğmadan,<br/>
Deniz daha bembeyazken çıkacaksın yola.<br/>
Kürekleri tutmanın şehveti avuçlarında,<br/>
İçinde bir iş görmenin saadeti,<br/>
Gideceksin<br/>
Gideceksin ırıpların çalkantısında.<br/>
Balıklar çıkacak yoluna, karşıcı;<br/>
Sevineceksin.<br/>
Ağları silkeledikçe<br/>
Deniz gelecek eline pul pul;<br/>
Ruhları sustuğu vakit martıların,<br/>
Kayalıklardaki mezarlarında,<br/>
Birden<br/>
Bir kıyamettir kopacak ufuklarda.<br/>
Denizkızları mı dersin, kuşlar mı dersin;<br/>
Bayramlar seyranlar mı dersin,<br/>
Şenlikler cümbüşler mi?<br/>
Gelin alayları, teller, duvaklar,<br/>
Donanmalar mı?<br/>
Heeey<br/>
Ne duruyorsun be, at kendini denize:<br/>
Geride bekliyenin varmış, aldırma;<br/>
Görmüyor musun, Her yanda hürriyet;<br/>
Yelken ol, kürek ol, dümen ol, balık ol, su ol;<br/>
Git gidebildiğin yere...<br/>
</p>               

<p>Orhan Veli KANIK</p>

yanmenu : bu bölgeye çeşitli yazılar yazabilir ya da resimler ekleyebilirsiniz. Ya da isterseniz menü linklerinden bazılarını bu bölüme ekleyebilirsiniz. bu bölgeye çeşitli yazılar yazabilir ya da resimler ekleyebilirsiniz. Ya da isterseniz menü linklerinden bazılarını bu bölüme ekleyebilirsiniz. bu bölgeye çeşitli yazılar yazabilir ya da resimler ekleyebilirsiniz. Ya da isterseniz menü linklerinden bazılarını bu bölüme ekleyebilirsiniz. bu bölgeye çeşitli yazılar yazabilir ya da resimler ekleyebilirsiniz. Ya da isterseniz menü linklerinden bazılarını bu bölüme ekleyebilirsiniz.
altlık : kopya hakları (c) 2008 Gimp TR.  
bütün haklar saklı.

Bu ders Pardus işletim sistemi üzerinde hazırlanmış olup elde edilen web sayfası firefox, opera ve konqueror gibi özgür tarayıcılar üzerinde denenmiş ve hata görülmemiştir. İnternet explorer da meydana gelecek olası hatalar bu tarayıcının desteklemediği css kodlarıyla ilgili olabilir. Kurulu bir windows işletim sistemim olmadığı için internet explorer hatalarıyla ilgili yardımcı olma ihtimalim maalesef yok. İ.E’de Sorunla karşılaşanlar İnternette bu konudaki sorunların çözümleriyle ilgili çok sayıda kaynaktan faydalanabilirler. Ayrıca buldukları çözümü forumda paylaşırlarsa diğer arkadaşlar için güzel olur.

Bu bölümde herhangi bir web tasarım yazılımına ihtiyaç duymadan kodlamaya başlıyoruz. Bunun için kwrite (linux) ya da notepad (windows) gibi bir metin düzenleyici yeterli.

Adım 1. Metin editörümüz ile İndex.html ve style.css isimli iki belge oluşturun.

Adım 2. Html dosyamızın başına şu kodu eklememiz gerekli. Bunlar bütün html sayfalarında bulunması şart olan kodlar.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<html>
<head>
</head>
<body>
</body>
</html>

Adım 3. CSS stil dosyamızdan bilgileri çağırmak için html dosyamızda <head> ve </head> arasına şu kodu ekleyelim :


<title>WEB SİTEMİZİN BAŞLIĞI</title>
<link rel=stylesheet href="style.css" type="text/css" media=screen>
“WEB SİTEMİZİN BAŞLIĞI” yazan bölümü istediğiniz bir başlık ile değiştirebilirsiniz.
Adım 4. Şimdi index.html dosyamıza div etiketlerini ekleyeceğiz. Div’ler stilleri css dosyasında bulunan, içerik olarak html dosyasında da yer alan web sitemizin bölümleridir. Örneğin aşağıdaki resimde bizim sitemizdeki div tanımlarının yerlerini görebilirsiniz :
 

Adım 5. İndex.html belgemizde <body> ile </body> etiketleri arasına aşağıdaki kodu ekleyelim. Kodlarda da görebileceğiniz gibi web sitemizin temel bileşenleri olan div’leri tanımlıyoruz.
 

<div id="sayfa">
    <div id="baslik">
    </div>
    <div id="linkmenu">
    </div>
    <div id="anabolge">
        <div id="icerik">
        </div>
        <div id="yanmenu">
        </div>
    </div>
    <div id="altlik">
    </div>
</div>
Adım 6. Şu durumda İnternet tarayıcınızla sayfayı açsanız hiçbir şey göremezsiniz. Çünkü stil dosyamızda henüz div’lerle ilgili bir tanımlama yapmadık. İndex.html sayfasındaki div etiketlerine atıfta bulunduğumuzu belirtmek için her bir div etiketinin başına # işaretini koymamız gerekir. Sonra köşeli parantez açıp özellik ve bu özelliğe ait değeri girmemiz gerekir. Örneğin;

 
#baslik {width:960px;}
 
Yukarıdaki örnekte başlığımızın genişliğinin 960 piksel olduğunu belirtiyoruz. Aynı parantez içinde birden fazla özellikte tanımlayabiliriz. Her bir tanımlamadan sonra noktalı virgül koymayı unutmamalıyız. Örneğin;
 

#baslik {
width:960px;
height:108px;
background-image:url(resimler/baslik.png);
Bu kodlamada başlığa ait genişlik, yükseklik ve kullanılacak arkaplan resmi gibi bilgiler yer alıyor. Benzer şekilde sayfada yer alacak yazıtipi, boyutu, rengi gibi değerleri de css dosyası içinde belirtebiliriz.
Eğer ki bir sınıfa atıf yapıyorsak önüne “a” harfini koymanız gerekir. Ve yine her bir değer açıklamasından sonra noktalı virgül kullanmak zorundayız.
Adım 7. Şimdi style.css dosyanızı metin editörüyle açıp aşağıdaki CSS kodunu ekleyin. Bu kodlar html sayfamızda belirttiğimiz div’lerin görünüm ve yerleriyle ilgili bilgiler içeriyor. İnternette CSS kodlamayla ilgili pek çok bilgi bulabileceğiniz gibi hazır css kodlarını alıp kendi oluşturduğunuz sayfalara da uygulayabilirsiniz. Ben fatih hayraoğlu, volkan görgülü ve birkaç yabancı kaynağı inceleyerek aşağıdaki kodları çıkardım. Bu arada ufak bir hatırlatma daha yapmak istiyorum; width : genişlik, height:yükseklik değerini verir. Resimler dizininizdeki resimlerinizin yükseklik ve genişilik değerlerine göre CSS belgenizde birkaç ufak değişiklik yapmanız gerekebilir.
 

body {
background-color:#b4b4b4;
margin:0;
padding:0;
text-align:center;
font-family:Sans;
font-size:12px;
color:#555555;
}
#sayfa {
width:960px;
margin:auto;
padding:auto;
background-image:url(resimler/sayfa.png);
text-align:left;
}
#baslik {
width:960px;
height:108px;
background-image:url(resimler/baslik.png);
clear:both;
}
#linkmenu {
width:960px;
height:44px;
background-image:url(resimler/linkmenu.png);
clear:both;
}
#anabolge {
width:960px;
clear:both;
padding-top:10px;
}
#icerik {
float:left;
width:560px;
padding-left:45px;
margin-bottom:10px;
}
#yanmenu {
float:right;
width:290px;
padding-right:45px;
}
#altlik {
width:960px;
height:100px;
background-image:url(resimler/altlik.png);
clear:both;
}
#altlik p {
padding-top:30px;
color:#FFFFFF;
padding-left:50px;
line-height:20px;
}

Adım 8. Son olarak içerik, yan menu ve altlığa bazı yazılar ekleyelim. Bunu için aşağıdaki
yazıları ya da kendi hazırladığınız paragrafları index.html belgenizdeki ilgili bölümlere
ekleyebilirsiniz. yazı da bulunan <p> paragraf başı, <br/> ise alt satıra geç anlamındadır.

İcerik :
<p>HÜRRİYETE DOĞRU<p/>
<p>
Gün doğmadan,<br/>
Deniz daha bembeyazken çıkacaksın yola.<br/>
Kürekleri tutmanın şehveti avuçlarında,<br/>
İçinde bir iş görmenin saadeti,<br/>
Gideceksin<br/>
Gideceksin ırıpların çalkantısında.<br/>
Balıklar çıkacak yoluna, karşıcı;<br/>
Sevineceksin.<br/>
Ağları silkeledikçe<br/>
Deniz gelecek eline pul pul;<br/>
Ruhları sustuğu vakit martıların,<br/>
Kayalıklardaki mezarlarında,<br/>
Birden<br/>
Bir kıyamettir kopacak ufuklarda.<br/>
Denizkızları mı dersin, kuşlar mı dersin;<br/>
Bayramlar seyranlar mı dersin,<br/>
Şenlikler cümbüşler mi?<br/>
Gelin alayları, teller, duvaklar,<br/>
Donanmalar mı?<br/>
Heeey<br/>
Ne duruyorsun be, at kendini denize:<br/>
Geride bekliyenin varmış, aldırma;<br/>
Görmüyor musun, Her yanda hürriyet;<br/>
Yelken ol, kürek ol, dümen ol, balık ol, su ol;<br/>
Git gidebildiğin yere...<br/>
</p>               

<p>Wepdersim</p>

yanmenu :
<p>bu bölgeye çeşitli yazılar yazabilir ya da resimler ekleyebilirsiniz. Ya da isterseniz menü linklerinden bazılarını bu bölüme ekleyebilirsiniz. bu bölgeye çeşitli yazılar yazabilir ya da resimler ekleyebilirsiniz. Ya da isterseniz menü linklerinden bazılarını bu bölüme ekleyebilirsiniz.</p>
<p>bu bölgeye çeşitli yazılar yazabilir ya da resimler ekleyebilirsiniz. Ya da isterseniz menü linklerinden bazılarını bu bölüme ekleyebilirsiniz. bu bölgeye çeşitli yazılar yazabilir ya da resimler ekleyebilirsiniz. Ya da isterseniz menü linklerinden bazılarını bu bölüme ekleyebilirsiniz.</p>

altlık :
<p>kopya hakları (c) 2010. <br/>
bütün haklar saklı.</p>

Ana Sayfa

Css tasarım yapma