t-infection.com | tasarım oyuncakları, web teknolojileri » Şablon

Xhtml ve Css ile Geçerli Sayfa Şablonu Kodlama

webthese — Mon, 27 Jul 2009 15:28:45 +0000

Az önce Line25′te bir makale gördüm. Basit olarak Xhtml ve Css ile bir sayfanın kodlaması anlatılıyordu. Ne zamandır aklımda olan ama yazmaya bir türlü fırsat bulamadığım bir konuydu bu. Ben de oturup yazmaya karar verdim. Umarım size en yalın haliyle Xhtml ve Css sayfa kodlamayı anlatabilirim. Gerçekten bu iş düşündüğümüz kadar zor değil.

W3C standartlarına uygun kodlama için (valid code) Xhtml bilgimiz olması şart. Daha önceki zamanlarda sitemizde Xhtml dersleri yayınlamıştık, dilerseniz o derslerden yararlanabilirsiniz. Ancak standartlara uygun bir sayfa kodlaması için yalnızca Xhtml bilgisi başlı başına yeterli değil. Xhtml ile oluşturduğumuz kodların görünümünü düzenleyecek olan stilleri yazmak için CSS’ye de hakim olmak gerekli. Kaldı ki yazacağımız Css kodlarının da standartlara uygun olması gerekiyor. Css yazarken de belli kurallara bağlı kalmamız gerekiyor. Geçerli bir sayfa kodlaması için Xhtml ve Css’ye başlangıç aşamasında hakim olmak yeterli.

Öncelikle Xhtml kodlarımızı yazarak işe başlayalım. Sayfamız klasik olarak bir Üst bölüm (Header), bir Navigasyon alanı (Navigation), bir İçerik alanı (Content), bir Menü bölümü (Menubar veya Sidebar) ve bir Alt bilgi (Footer) alanı barındıracak. Şimdi bu alanları Xhtml olarak yazalım.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


	Xhtml Css Sayfa Şablonu
	
	






Üst Bilgi Alanı
Navigasyon Alanı
Ana İçerik Alanı
Yanmenü Alanı
Alt bilgi Alanı

Xhtml kodlarında gördüğünüz üzere her bir Div için yukarıda bahsettiğimiz alanları tanımladık. Id seçiciler kullanarak div etiketlerimizi sırasıyla yazdık. Buraya kadar sayfamızın Xhtml kodları hazır görünüyor. Şimdi asıl önemli olan kısma geçiyoruz. Css ile Id’lerimize değerler atayacağız ve görünümü şekillendireceğiz. Css kodlarından sonra her Id’de kısaca ne yaptığımızı anlatacağız.

#sayfa {width:800px;margin:0 auto;font:bold 16px "Arial", Verdana, Helvetica, sans-serif;}
#ustbolum {height:100px;background:#2e83ff;color:#fff;}
#navigasyon {height:40px;background:#666;color:#fff;}
#icerik {width:500px;height:500px;float:left;background:#999;color:#333;}
#yanmenu {width:300px;height:500px;float:right;background:#888;color:#333;}
#altbilgi {width:100%;height:50px;background:#777;color:#fff;clear:both;}

Css kodlarımızı da yukarıdaki gibi yazdıktan sonra style.css adıyla kaydediyoruz. Sonuç BURADA yer alan sayfa gibi görünmeli. Şimdi dilerseniz kısaca Css kodlarıyla neler yaptığımızı biraz anlatalım.

Önce Sayfa isimli id’mizi tanıtmaya başladık. Burada sayfa seçicisine 800 piksel genişlik atadık. Margin değerini 0 auto yaparak sayfa id’si içinde kalacak bölümlerin tarayıcımızda ortalanmasını sağladık. Son olarak yazıtipi belirledik. Örnek sayfada dikkat ederseniz diğer alanlarda yazıtipi tanımlaması olmadığı için tüm yazılar 16 piksel Arial yazıtipinde görünmekte. Sayfa id seçiciyi en son kodlama bittikten sonra kapattık.

Ustbolum isimli id’mizde iste sayfamızın Üst bilgisini oluşturacak bir tanılamaya gittik. Yüksekliğini 100 piksel olarak atadık. Arkaplan rengi ve yazı rengini ayrı ayrı tanımlayarak Ustbolum id yazımını bitirdik.

Navigasyon bölümünde ise bir navigasyon alan görünümü istediğimiz için yüksekliğini 40 piksel tuttuk. Yine Ustbolum gibi arkaplan ve yazı rengi atamalarını yaptık.

İcerik ve Yanmenu seçici id’lerinde ise yine öncelikle genişlik ve yükseklik tanımlamaları yaptık. Burada dikkat ettiyseniz fazla olarak float değerini atadık. İcerik için float:left değerini yanmenu içinse float:right değerini kullandık. Böylelikle icerik alanındaki tüm içerik sola, yanmenu alanındaki tüm içerik ise sağa yaslanmış vaziyette görünecek.

Altbilgi bölümünde ise yer alacak içeriğin üstte görünen icerik ve yanmenu’den bağımsız olarak hizalanması içinse clear:both değerini kullandık. Böylelikle Css kodlarımızı tamamlamış olduk.

Gördüğünüz gibi yazmış olduğumuz basit kodlar sayesinde sayfa şablonumuzu oluşturduk. Üstelik W3C’nin sevdiği ve geçerli kabul ettiği bir kodlama ile bunu yaptık. Yukarıda yazılan kodlar ile oluşturduğumuz bu basit sayfayı bir nevi sayfa iskeletimiz gibi düşünebilirsiniz. Zira henüz hiçbir ekstra tanımlama ve kod eklemesi yapmadık. Sadece şablon olarak neyin nerede duracağını belirttik. Css’nin türlü nimetlerinden yararlanarak sayfalarımızı geliştirebilir ve farklı görünümler ortaya çıkarabiliriz.

Wordpress’te Etiket Bulutu Sayfası Oluşturmak

webthese — Fri, 16 Jan 2009 00:03:59 +0000

Wordpress tabanlı güncelerin olmazsa olmazlarından birisi de gönderilere eklenen etiketlerdir. Birçoğumuz gönderi içinde kullandığımız popüler etiketleri bir etiket bulutu (tag cloud) şeklinde sitemizde ziyaretçilerimize sunarız. Bu yazımızda kısaca Wordpress tabanlı güncemizde nasıl bir etiket bulutu sayfası elde edeceğimizi anlatacağız.

Bu işlemi yaparken Wordpress’te öncelikle bir sayfa şablonu oluşturalım. Sayfa şablonumuz etiketlerimizi göstereceğinden Wordpress’in wp tag cloud fonksiyonundan yararlanacağız. Şimdi sayfa şablonumuzu oluşturacak olan kodları yazalım.

< ?php
/*
Template Name: etiket_bulutu
*/
?>

< ?php
get_header();
?>


  < ?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  
     
      < ?php the_title(); ?>
      
	  

< ?php wp_tag_cloud('smallest=8&largest=18&number=999&order=RAND'); ?>


    
  
  < ?php comments_template(); // Get wp-comments.php template ?>
  < ?php endwhile; else: ?>
  
    < ?php _e('Sorry, no posts matched your criteria.'); ?>
  
  < ?php endif; ?>
  
    < ?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
  

< ?php get_sidebar(); ?>
< ?php get_footer(); ?>

Yukarıdaki kodlar benim t’infection.com’da Etiket bulutu sayfası yapmak için kullandığım kodlardır. Burada yaptığım şey ise sitemin index.php dosyasını alarak wp tag cloud() fonksiyonunu eklemek. Etiket bulutunu elde edecek kodu tekrar görelim;


< ?php wp_tag_cloud('smallest=8&largest=18&number=999&order=RAND'); ?>

Gördüğünüz gibi wp_tag_cloud() fonksiyonunda biraz argüman eklemesi yaptım. En küçük etiket görünüm değerini 8pt en büyük değeri ise 18pt olarak belirledim. Etiketlerin sayısını 999 olarak yazdım ki tüm eklemiş olduğum etiketleri içerebilsin. (Tabi sizin 1000 üzeri etiketiniz varsa bu değeri büyütebilirsiniz) Son olarakta etiket dizilimi Rand değeriyle rastgele hale getirdim. Etiket bulutunu ise stil dosyama eklediğim Etiketsayfa Css sınıfı içerisine aldım.

Şimdi sıra geldi sayfamızı oluşturmaya. Yukarıda vermiş olduğum kodu boş bir metin editöründe etiket_bulutu.php olarak kaydedip tema dizininiz içine atın. Daha sonra sitenizin yönetim paneline giriş yapın. Burada Yeni sayfa ekleme alanına gelerek yeni sayfanıza Etiket Bulutu ismini verin. Yan alanda tema dizinine attığımız etiket_bulutu.php isimli dosya Sayfa Şablonu olarak görünecektir. Sayfamıza sadece isim verip bu şablonu seçerek kaydedebiliriz.

Gördüğünüz gibi önce etiket_bulutu.php şablonumuzu oluşturduk. Bunu kullandığımız temanın dizinine attık. Yönetim panelinden yeni sayfa ekleme alanına gelerek attığımız şablonu seçtik ve sayfamıza isim vererek oluşturduk. Hepsi bu :) Yukarıda size şablon olarak verdiğim kodları siz kendi temanızın herhangi bir .php dosyasını düzenleyerekte elde edebilirsiniz.

Benim oluşturduğum etiket bulutu sayfasını görmek için buraya tıklayabilirsiniz. Umarım faydalı olur.

Daha Hızlı Şablonlar Yapmak için 9 Css Framework

webthese — Mon, 05 Jan 2009 18:43:38 +0000

Daha hızlı sayfa şablonları yapmak için kullanabileceğiniz 9 Css Framework listelenmiş. Birçoğunu zaten biliyorsunuz ama bilmediğim 2-3 framework’ü burada gördüm :)

100 Yüksek Kalite Xhtml/Css Sayfa Şablonu

webthese — Tue, 02 Dec 2008 00:21:19 +0000

SmashingMagazine’den yine güzel bir derleme. Bu sefer 100 adet kaliteli Xhtml/Css kodlanmış sayfa şablonuna yer vermişler. Yer verilen tasarımların hepsi de ücretsiz indirilebilir.

Ücretsiz Css ve Xhtml Şablon Kaynakları

webthese — Mon, 13 Aug 2007 03:03:48 +0000

Çok önceleri web tasarımına merak saldığımızda Html kodlarıyla uğraşmaktansa Hazır Site Şablonları aramayı tercih ederdik. Bu özlemimizi birçok sitede giderir, bulduğumuz hazır şablonları kendimize uyarlayarak sitelerimizi hayata geçirirdik. Eminim birçok kişi benim gibi yapmıştır. Yoksa bu denli Şablon sitelerine rağbet olmazdı. Ancak herşey gibi Web’de gelişiyor. Web 2.0 modasını yaşadığımız şu günlerde artık “valid” şablon ihtiyacı hisseder olduk. Çünkü annemizin Html’siyle yapılan şablonlar artık “demode” olmaya başladı. Web 2.0 akımının kendini iyice hissettirdiği günümüz internetinde artık moda: “Css ve Xhtml Şablonlar”.

Bu yazımda sizlere ücretsiz Css ve Xhtml uyumlu sayfa şablonları barındıran siteleri listeleyeceğim. Sözü fazla uzatmadan listemize geçelim.

1) Open Source Web Design

Birçok geliştirci tarafından ücretsiz şablonların bulunduğu sitede 2000′den fazla tasarım bulabiliyorsunuz. Fazlaca şablon bulunması, şablonların kolay indirilebilmesi artı özelliklerinden.

2) Open Web Design

2000 üzerinde tasarım bulunan sitede özellikle şablon aramalarındaki iyileştirme göze çarpıyor.

3) Open Designs

Open Designs sade ve yeşil ağırlıklı tasarımıyla dikkat çekiyor. Sitede 600′e yakın tasarım bulmak mümkün.

4) Open Source Templates

Şablonlara oy verebildiğiniz hoş bir site. Genel görünümü itibariyle biraz CssRemix’i andırsa da yine de içeriği bakımından çok çok ziyaret edilen bir alan.

5) Six Shooter Media

Six Shooter Media bünyesinde oluşturulmuş olan az sayıdaki tasarımı kullanma imkanınız var. Sınırlı sayıda şablon olmasına rağmen tasarımlar görülmeye değer.

6) Free-Css-Templates

Birçok Wordpress temasının altyapısını oluşturan şablonları sitede görmek mümkün. Tasarımlar sitede Yeni Tasarımlar ve 2006 tasarımları olarak iki ana alana ayrılmış.

7) Free Css Templates

Farklı renk ve görünümlerde 216 şablonu sitede bulabilirsiniz. Alternatif birçok tasarımı görmekte mümkün.

8) Andreas Viklund

Wordpress temalarıyla tanıdığımız Andreas Viklund’un hazırlamış olduğu şablonlara yine sitesinden ulaşabiliyorsunuz. Az sayıdaki profesyonelce hazırlanmış çalışma gerçekten görülmeye değer.

9) CssFill

CssFill sitesi Michael Strand’ın yapmış olduğu Css ve Xhtml şablonları barındırıyor. Ayrıca sitede şablonlar farklı kategorilere ayrılarak ziyaretçilere sunulmuş.

10) Template World

Template World tarafından yapılmış olan ücretsiz tasarımlar farklı görünümler ve daha profesyonel şablonlar arayanlar için birebir.

11) Arcsin

Yine Wordpress temalarıyla tanıdığımız başka bir geliştirici kaynağı.

12) Solucija

Hemen hemen tüm template sitelerinde tasarımlarını görebileceğiniz bu sitede birbirinden güzel Css ve Xhtml tasarımlar da mevcut. Özellikle portal ve ticaret siteleri için şablonlar görülmeye değer.

13) i-use

İtalyan Mediando Communications’un geliştirmiş olduğu ve kullanıma sunduğu Css ve Xhtml şablonları.

14) Styleshout

Ücretli tasarımlarda sunan Styleshout sitesi aynı zamanda ücretsiz Css ve Xhtml şablonlarına da yer veriyor. Site kaliteli ve profesyonel tasarımlar barındırıyor.

15) Get Css Templates

Site sınırlı sayıda şablona yer veriyor ancak ileriki zamanlarda daha fazlasını bulabileceğimiz söyleniyor. Tasarımları ise görülmeye değer.

16) Free Css Templates

Birbirinden güzel ve kaliteli şablonlar bulabileceğiniz bu site sloganı ve içeriğiyle olduça iddialı görünüyor. Tasarımlarına göz atmakta fayda var.

17) RamblingSoul

Ramblingsoul.com kaliteli Css ve Xhtml şablonlarına yer veren bir site. Tasarımlarına kesinlikle göz atmanızı tavsiye ediyorum.