Kendi Temanız

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ı


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...

---

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


Bu sayfanı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)
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.... Forumda görüyorum, bir renk değiştirmek için 10 satır kod paylaşımı yapılıyor, bunlar aslında gereksiz... Şimdi hadi bomboş sayfamızı buradan renklendiremeye başlayalım Hazır Temalar ve CSS-Design