Bilgisayar Hakkında Herşey...

CSS-Design

CSS-Design Teması seçildikten sonra tamamen kendinize ait bir site yapmanızın yollarını bizzat kendim sıfırdan yapmakta olduğum sitem ile anlatmak istiyorum. Amacımız hazır şablonlardan bağımsız bir şekilde tamamen kendi isteğimiz doğrultusunda bir site yapmaktır. Hedefimizin ne olduğunu anlamak amacıyla örnek olarak teknik destek elemanımız Treo'nun şu test sitesine bakabilirsiniz http://treo.de.tl/ ilginizi çekti ise tam yerindesiniz

. Unutmadan söyleyelim, CSS ile yapılan siteler farklı browserlarda farklı görünebilirler. Treo'nun sitesi Firefox için optimize edilmiştir.

Bu sayede tamamen individüel bir siteye sahip olabilirsiniz, belirli bir kod bulma arayışında olmadan, bulunan kodlarla yetinmek zorunda kalmadan dilediğiniz iceriğe sahip olabileceksiniz ve işin en guzeli umuyorum ki, sitenizi tamamladıktan sonra da bir HTML ve CSS bilgini olacaksınız

Dikkat: Bu sayfa "ben kendim uğraşmam, başkaları elemanlari geliştirmiş, onlardan alır siteme eklerim bana yeterli" diyenler için uygun değildir

Herşeyi kendimiz yapacağız, kopyala yapıştıra bir son vereceğiz

Adım 1 - HTML, CSS nedir?
Adım 2 - Hazır Temalar ve CSS-Design Teması
Adım 3 - CSS-Design Teması Kodu ve Açıklaması YENİ!

Hazır Temalar ve CSS-Design
Bedava-Sitem programcılık bilgisi az ya da hiç olmayanlara kullanabilecekleri hazır temalar sunar. Bu temalar genel olarak birbirlerine benzerler ve aslında yeterince bilgisi olanlar tarafından istenildikleri şekilde değiştirilebilirler. Bu sayede hazır olan kutucukların bölümlern yerleri ve renkleri mesela değiştirilerek kişisel tasarımlar oluşturulabilir. Bütün bu temaların tam kodlarını pek yakında detaylı açıklaması ile size sunacağım böylece içlerinde yaratıcılığınıza göre istediğiniz değişiklikleri yapabilirsiniz. Ama şimdilik CSS-Design temasını ele alalım, bu tema gerçekten herşeyi kendisi yapmak isteyenler için sunulmuştur. Zamanında birçok kişinin 'herkesin sitesi aynı görünüyor' demesi üzerine geliştirilmiştir. Bu nedenle 'boş' görünür ama farklı birşeyler yapmak isteyenler için süperdir

. Ama aslında boş değildir, diğer temalar gibi kutucuklara, menüye vs. sahiptir sadece bunlara şekil verilmemiştir. Bir başka farkı ise diğer temaların tablo bazlı olmasına rağmen bu temanın elemanlarının div adını verdiğimiz katmanlara dayalı olmasıdır. Tabloları sabit düşünün (bu nedenle hazır şablonların elemanları sabittir)... Katmanlar ise havada uçan farkli büyüklükteki kutucuklar gibidirler ve istenilen yere konabilirler. Bu temanın güzelliği de istediğimiz kadar böyle katmanı kendi istediğimiz şekilde tanımlayabilecek olmanızdır. Tasarımın özgürlüğü de buradan gelmektedir. Biz şekillendirmeye başlamadan önce bakalım içinde neler var...

yukarı

CSS-Design Kodu
CSS ile yeni bir site açtığınızda (selin verdik mesela adına), site aynen şuna benzer:

=> Bedava bedava-sitem, süper tasarımlar, 1 GB Hafıza Alanı, Bedava! <=

Ana Sayfa

Merhaba, bu siteni Sitene Giris den değiştirebilirsin! Sitenle iyi eğlenceler! Benjamin Lochmann Webmaster bedava-sitem.com

Bugün 2 ziyaretçi (23 klik) kişi burdaydı!

Bu sazfanın kodunu ise sitemize browser ile bakarken fare ile sağ tıklayıp 'kaynak kodu göster' benzeri seceneği tıklayarak görebiliriz (Farklı browserlarda farklı ama benzer birşey yazar). Ortaya bir metin alanı açılır ve içinde bakalım ne yazıyor ve satır satır ne anlam ifade ediyor bunlar (Yeşil yazan yerler kodların açıklamalarıdır

:

Açılıp kapanan 'Tag'ler her zaman bir şeyi belirtir demiştik hatırlarsanız, o nedenle biz de bunları cümle gibi düşünüp tercümeseini öyle yapacağız)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Bu satır bu dokümanın bir HTML dokümanı olduğunu söyler ve W3 Organizasyonu tarafından standardize edilmiş olan (dtd dokumanı yani Document Type Definition) definisyonuna uyması gerektiğini bildirir. Bu dokumanın standardize edilmiş olması gerekir ki yoksa herkes başka telden çalardı ;)

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

Her web sitesi HTML tagi ile başlar ve en sonunda (azfanın en altında) HTML ile de biter yine... Satırın gerisi olmasaydı da çalışırdı sayfanız.

xmlns NameSpace denilen İsimAlanına hitap eder, bu biray karışık ama biz bu her sitemizde olurö bunu bilsek yeterlidir.

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    <title>selin - Ana Sayfa</title>
   </head>

HEAD sitenin başını tanımlar, sitenin başına her zaman TİTLE gelmelidirö bu Browserınızın sol üst alanında site hakkında yazacak olan metni tanımlar.

META TAG ise farklı farklı amaçlar için kullanılır, buradaki amacı bu dosya içindeki metnin iso-8859-15 ile tanımlanmış olan özel karakterleri browserın düzgün anlamasını emreder. Yoksa ı veza ş gibi harflerimiz garip görünürdü...

<body id="hpb_cssonly">

Ve sonunda BODY yani sitenin gövdesi (sayfa olarak gördüğümüz içerik) burda başlar.

  <TABLE height="25">

25 piksel büyüklüğünde bir tablo var sayfada öncelikle...

<TR><TD>

tablonun satırlarını tanımlamak için tr ve td kullanılır... tr yi satır td yi sğtun gibi düşünün... ilk satırın ilk sütunu açıldı şimdi... Bu TR ve TDler ile hücrelerin takibi başta zor gelebilir...

<font style="font-size:16px;color:#000000;font-family:Arial, Helvetica, Verdana, sans-serif;">=>  </font>

FONT yazı karakteri demektir
font-size: 16 pikselmiş
color:#000000; renk siyahmış
font-family:Arial, Helvetica, Verdana, sans-serif; font bahsedilen ailedenmiş....

  BOŞLUK demektir, yani birden fazla boşluk bırakırsanız kodda bunların kullanılması gereklidir, HTML genelde editörlerden birden fazla boşluğu birmiş gibi alır...

<a href="http://www.bedava-sitem.com?t=42" style="font-size:16px;color:#000000;font-family:Arial, Helvetica, Verdana, sans-serif;" target="_blank">Bedava bedava-sitem, süper tasarımlar, 1 GB Hafıza Alanı, Bedava!</a>

A link demektir... Tıklandığında "http://www.bedava-sitem.com?t=42" adresıne gideceği HREF özelliği ile tanımlanmış..... STYLE ile bir stil verilmiş....

<font style="font-size:16px;color:#000000;font-family:Arial, Helvetica, Verdana, sans-serif;">  <=</font>

....yukarıda vardı bu....

</TD></TR></TABLE>

önce sütun sonra satır sonra da tablo burada kapatılmış...

  <div id="container">
   <div id="header_container">

İç içe 2 div (katman) açılmış...

    <div id="pre_header"></div>
bir tane daha açılmış ve hemen kapanmış...

Bunları işte kendimiz de istediğimiz kadar açar kaparız, sonra da CSS ile ID şeklinde belirlediğimiz için hepsine istediğimiz stili verir, sayfada istediğimiz yere yapıştırabiliriz...

    <div class="header">

bir katman daha... ID diye tanımlanan her DİV farklı stil verilebilir... CLASS ile tanımlanırlarsa bir kere bu classa stil verdikten sonra aynı tarz görünmesini istediğimiz tüm katmanlara uzgulamak mümkün olur

<h1 id="header">

H1 en büyük başlık demektir, aslında FONT ile de belirlenebilir büyüklük falan ama başlıklar için bu kullanıldığında ID sağolsun CSS ile stil katılabilir... H2 H3 H4 giderek küçülen başlık demektir.

<span>selin</span>

span ile çevredeki özelliklerden farklı bir küçük stil tanımlanabilir... genelde <span class="farklı">farklı görünüm</span> seklinde kullaılır aslında... (Sonra class ile CSS den ayarlanabilen, çevresindekı divden farklı bir stil...

</h1>

başlık kapatılmış...

</div>

katman kapatılmış....

    <div id="post_header"></div>

başka bir katman daha

   </div>

simdi bu da bir katman kapatmış.. katmanlar iç içe olduüu için yukarı dönüp bakmak lazım, en son kapanmamış olan katmanı kapatacak bu... yani div id="header_container" olanı

   <div id="nav_container">
   <h2 id="nav_heading"><span></span></h2>

yine bir katman ve bir başlık daha, bu sefer H2 yani daha küçük o kadar...

    <ul id="nav">

UL bir liste başlıyor demektir...

     <li class="nav_element checked_menu" id="nav_AnaSayfa"><a href="/Ana-Sayfa.htm" class="menu"><span>Ana Sayfa</span></a></li>

LI sırayla listenin içindekileri tanımlıyor, bu birinci eleman yani ve içinde bir link var (menü elemanları liste şeklinde yani anlaşılan....)

     <li class="nav_element" id="nav_304leti351im"><a href="/%26%23304%3Bleti%26%23351%3Bim.htm" class="menu"><span>İletişim</span></a></li>

ikinci eleman

     <li class="nav_element" id="nav_Ziyaret351idefteri"><a href="/Ziyaret%26%23351%3Bi-defteri.htm" class="menu"><span>Ziyaretşi defteri</span></a></li>

ücüncü eleman

        </ul>

liste bitti burda, UL kapanmış ;)

   </div>
   <div id="content_container">
   <div id="pre_content"></div>
   <div id="content">

yine iç içe katmanlar...

   <h2 id="title"><span>Ana Sayfa</span></h2>

başlık

   Merhaba,
bu siteni Sitene Giris den değiştirebilirsin!Sitenle iyi eğlenceler!Benjamin LochmannWebmaster bedava-sitem.com

metin

</div>

div kapanmış...

   <div id="counter"><span>Bugün 2 ziyaretçi (23 klik) kişi burdaydı!</span></div>
   <div id="post_content"></div>
      <div id="sidebar_container">
    <h2 id="sidebar_heading"><span></span></h2>
    <div id="sidebar_content"></div>
   </div>
   </div>
  </div>

daha başka katmanlar.... Bunların hepsi hazır kullanılabilsinler diye ancak kullanılmazlar ise sitede de görünmezler CSS ile renk vsç vermedikçe biz o nedenle bunları kullanmak zorunda değiliz... kendimiz de istediklerimizi kendimiz ekleyebiliriz yani...

        <iframe src="http://www.homepage-baukasten.de/cookie.php?visit=selin&xxx" style="display:none;width:1px;height:1px;"></iframe>

Burada bir IFRAME içinde COOKIE eklenmişö cookieler eklendiklerinde bir dahaki bağlantıda mesela kullanıcıyı tanımak için kullanılır... Bizim icin önemsiz....

<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
  <div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

başka hazır divler...

</body>

sonunda site vücut kapatılıyor...

</html>

ve sayfa kapatılıyor....

yukarı

Gördügünüz gibi 3-5 eleman ne yapar bir kere anladık mı çok da zor bir olay değil özgürce istediğimizi yapabilmek
CSS-Design /Kendi temanız

Bilgisayar Hakkında Herşey...

CSS-Design

selin

Ana Sayfa