Yeni Tasarımın Yapılışı - II

21-9-2008

Bu yazının ilk bölümü: Yeni Tasarımın Yapılışı - I

Tasarımı HTML’ e aktarmak - 07.04.08

Pazar sabahı, 9:45 gibi uyandım, önce sitenin tasarımını Fireworks üzerinde fena olmayan bir seviyeye getirdim. Bunu yaparken RSS ikonuna ihtiyacım oldu normal RSS ikonlarını Feed Icons sitesinden aldım. Ek olarak e-mail ile RSS’ e üye olacaklar içinde bir ikona ihtiyacım oldu. Onun için de E-mail Subscriptions Icons’ u buldum ve onu da oradan çarptım. Tabii ki ikiside ücretsiz ve serbest şekilde dağıtılıyor, dolayısıyla isteyen sitesinde kullanabilir. İkonları ve benzer dış kaynakları kullanırken lisansa bakmak her zaman önemli, aksi takdirde Süleyman Hocam canımıza okur :)

CSS Tasarımı

Önce istediğimiz yapı için bir CSS şablonu bulmak gerekiyor. CSS’ yi kendimiz de yazabiliriz ama yapılmışı tekrar yapmamak için hemen CSS şablon avına çıkıyoruz. CSS şablonu veren bir çok site var ama şu iki tanesi benim hoşuma gidiyor. Iron Myers – Pure CSS Layouts ve Layout Gala ikiside her tarayıcıda bu CSS’ lerin sorunsuz çalıştığını iddia ediyorlar. Ben de onlara inanıyorum ve CSS’ lerinin basit ve temizliğinden dolayı Layout Gala’ yı seçiyorum.

İlgimi çeken CSS’ yi yüklüyor, Edit+ ile HTML kodlamaya başlıyorum.

Arada bir dizi başka iş yaptım, saat şu an 15:27...

Alıntı CSS’ si oluşturmak

Blog yazarken sık sık gereken bir şey başkalarından alıntı yapmak. O yüzden güzel bir blockquote tagını çok kullanıyorum, bunu belli etmek için güzel bir CSS oluşturmam gerekiyordu. Bu iş için Design Meme’ de güzel bir örnek var ama sadece Firefox’ ta çalışıyor bu da bizim işimizi görmüyor tabii ki. Bende şu an ki sitedeki gibi basit bir şey yapmak istedim. Aşağıdaki gibi bir şey yaptım;

image

CSS ise şu şekilde;

blockquote{

background: url('mg/openquote.gif') no-repeat left top;
padding-left: 16px;
padding-top:2px;
color:#555;
margin-left:14px;

}

blockquote p,blockquote div,blockquote td,blockquote span{

font:italic 14px "Georgia", serif;

}

İlk İzlenimler

Sağ taraftaki hakkında kısmını da hallettikten sonra aşağıdaki gibi bir HTML’ e ulaştım.

image

Resimde görülen sağdaki navigasyon kısım başlıklarını şu şekilde bir CSS ile gerçekleştirdim.

div.section h2{
text-align:center;
background: url('/mg/blackdot.gif') repeat-x center;
margin-top:0;
}

div.section h2 span{
font: normal 24px Times, serif;
color:#333;
background-color:#FFF;
padding:0 10px 0 10px;
}

HTML kısmı ise gene çok basit;

ARAMA

Şimdilik güzel gidiyoruz.saat : 17:35. Bir kaç kek ve 330ml Coca Cola tükettim.

Yazı devam edecektir...

Recent Blog Posts

See all of the blog posts