ALTI ÜSTÜ TASARIM – Mehmet Doğan

Bu yazıya ait 16 yorum var.

1. | 14 Mart 2005 22:26 tarihinde, Umut Akyol demiş ki:

Yahoo, superonline, mynet, siberalem, ekşi sözlük aklınıza gelebilecek bir sürü site css kullanıyor, css 3-5 yıldan beri var. Dreamweaver'in anca verebildiği özürlü css desteği sayesinde, menulerimi olmasa bile sayfamdaki tum fontlarımı, cogunlukla tablo veya sutunlara genel css etiketleri kullanarak yapiyorum.

Ben, kardesimin cok akillica bir css taktiğini paylaşmak istiyorum: (SafakCSS Yontemi)

--------------------------

Normalde dreamweaver ya da bir benzeriyle yaptiginiz bir css asagidaki gibi olur, icinde bir sürü sacma fazlalik etiketle, ornegimi ekşi sözlükteki css dosyasindan vereceğim, title diye bir şeyler var...

.title1 {
font: bold 12pt Verdana, sans-serif;
color: #000080;
}

simdi yukarıdaki title'la bir sey yazmak istersek soyle yapabiliriz, (span class=title1) Bunlar title1 seklindeler...(/span)

Bu tarzda eger font buyuklugunu 14 punto yapmak istersek yeni bir css daha yapmamiz gerekiyor, bu herkesin yaptigi bir hata:

.title2 {
font: bold 12pt Verdana, sans-serif;
color: #000080;
}

(span class=title2) Bunlar title2 seklindeler...(/span) İste simdi iki tane title'imiz ve iki kat fazladan kodumuz oldu....

/////////////////////////

Bizse soyle yapiyoruz...

.y30
{
font-size: 12px;
}

.y40
{
font-size: 14px;
}

.georgia
{
font-family:Georgia;
}

.verdana
{
font-family:Verdana;
}

.mavi
{
color: #0033FF
}

.kirmizi
{
color: #FF0000
}

////////////////

simdi diledigimiz kadar kombinasyon yaratabiliriz, mesela

(span class="mavi y30 verdana") Burasi mavi, 12 punto ve verdana oldu...(/span)
(span class="kirmizi y30 verdana") Burasi kirmizi, 12 punto ve verdana oldu...(/span)
(span class="kirmizi y40 georgia") Burasi kirmizi, 14 punto ve georgia oldu...(/span)

Yani birkac dogru duzgun css tanimlamasiyla, istediginiz kadar kombinasyon uretebiliyorsunuz, şafak (kardesim) bana ilk anlattiginda biraz itiraz ettim, eski tarz her css icinde font, renk belirlemeye alismistim, embesil dreamveaver sagolsun, fakat kabul edip kullanmaya baslayinca cok esnek ve harika bir yontem oldugunu fark ettim..

Belki buradaki yontemi ayri bir yazi konusu olarak dusunebilirsiniz.

Okdugunuz için tesekkurler..

15 Mart 2005 0:01 tarihinde, Mehmet Doğan demiş ki:

Umut,

soyledigin yontem benimde cok kullandigim bir yontem. Yani CSS icinde birkac class tarif edip, bu classlarin birkacini ayni anda kullanilabilmesi.

Fakat CSS icinde dikkat etmemiz gereken bir kisim ise CSS'i neden kullandigimiz. CSS'i kullanmamizin bir nedeni, ileride site uzerinde bir degisiklik yapmamiz gerekirse, sitenin her sayfasi uzerinde degil yanlizca CSS icinde yapacagimiz bir degisiklikle tum sitenin bu degisikliklerden etkilenmesi. Bu nedenle, CSS icindeki class (ornegin .alt) ve id (ornegin #alt) isimleri verirken, anlamli ve gelecekte degismeyecek isimler vermeliyiz.

Ornegindeki

.kirmizi
{
color: #FF0000
}

classi bugun ki tasarimda bir kelimeyi kirmizi yapar. Fakat ileri bir tarifde, ayni kelimenin lacivert olmasini isteyen musteri nedeniyle CSS'imizi degistirmemiz gerekirse, site icinde kullandigimiz .kirmizi classi bir anlam ifade etmeyecegi gibi bizim aklimiza da karistiracaktir.

3. | 15 Mart 2005 8:53 tarihinde, Umut Akyol demiş ki:

Katılıyorum, cok dogru, aslında ornegimin anlasilir olmasi icin isimleri oyle verdim, normalde renkler icin r10, r20, r30... font büyüklükleri icin y10, y20, y30.. gibi bir tanimlama daha mantikli... ama fontlar icin verdana, georgia, arial... olabilir.

Bu sekilde ileride yapacagimiz degisiklikler kafamızı karıştırmaz.

Hatta, bu yontemi benimseyen bir tasarimci, yaptigi her site icin iyi hazirlanmis tek bir css dosyasi kullanabilir, cunku webde kullanılabilecek yeni bir font ortaya cikmazsa, o ilk emektar css dosyaniz hala is gorecektir.

Bu yontem ozellike buyuk web tasarım sirketlerinin islerini hizlandirabilir, maliyetlerini dusurebilir.

15 Mart 2005 14:43 tarihinde, Mehmet Doğan demiş ki:

Ertan Bey bana bir email gonderdi ve bir tavsiyede bulundu. Tavsiyesi "aktif menu" elementleri hakkinda idi.

Bircok kisi websitesinde belirli bir bolum ile ilgili menu elementini aktif hale getirerek, ziyaretcilere hangi bolum icinde olduklarini belirtir. Bunu yukarida ki menu ornegi icinde de uygulamak kolay.

Diyelim ki yukarida ki ornek icinde, ziyaretciniz, "ucuncu link" sayfasi icinde ve siz bu menu elementini aktif hale getirmek istiyorsunuz. Bunun icin yapmaniz gereken CSS'e ve HTML'e yeni bir class eklemek.

Bununla ilgili ornek sayfayi surada hazirladim. Kod icine bakarak yeni CSS'i ve HTML'i inceleyebilirsiniz. Eger bir sorunuz olursa, buraya yazarsaniz, elimden geldigince cevaplamaya calisacagim.

5. | 17 Haziran 2005 17:05 tarihinde, Fatih demiş ki:

Slmlar..
bende http://www.turkmizah.net/forums.html için dinamik menü yapmayı düşünüyorum.. menünün arka planına türk bayrağı yerleştirmek istiyorum..
onunla uğrascam yaparsam haber veririm..
saygılar..

6. | 29 Ağustos 2005 5:55 tarihinde, Eyup demiş ki:

Ornekte text in buyuklugu 12px/24px olarak verilmis bunun anlami nedir. Ben genelde 9pt; 10pt; olarak kullaniyorum. Dogrusu nedir veya ne sekilde kullanmaliyiz ?

7. | 24 Kasım 2005 21:32 tarihinde, Oguz demiş ki:

Benim merak ettiğim listeleri yatay hale getirirken kullandığınız #menu ol, #menu li nin tamamı ile sadece #menu li aynı şeyi temsil etmiyor mu? Aynı şey değilse css den #menu ol kaldırdığım zaman sayfanın sunumunda neden herhangi bir değişikliğe sebeb olmuyor? Anladığım kadarıyla display: inline ile listelemenin dikey olma özelliğini ortadan kaldırıp bunu yatay sıralama haline getiriyorsak bunu sadece #menu li ile uygulamamız yeterli olmaz mı? Web tasarımına yeni başladım ukalalık yapmam istemem ama #menu ol bana orda fazla kullanılmış gibi geliyor eğer gelmiyorsa ne işe yaradığını açıklayabilirseniz sevinirim.

8. | 25 Aralık 2005 23:38 tarihinde, UMUT demiş ki:

YENİ BLOG AÇTIM. YENİ BİR AKA PLAN HAZIRLAMAK İSTİYORUM. YARDIMCI OLURSANIZ SEVİNİRİM. HİÇ BİR BİLGİM YOK.

9. | 06 Mart 2006 6:16 tarihinde, salih sonmez demiş ki:

ben menuyu saga kaydiramiyorum ne yapsam menu hep solda duruyor ama ben hem sagda hemde solda menu olmasini istiyorum bana yardimci olursaniz sevinirim

tsk ederim

10. | 08 Mayıs 2006 16:40 tarihinde, Onur demiş ki:

ben ''http://www.unbf.ca/altiustu/upload/menu/sademenu.html'' bu linkteki gibi bisey yaptim fakat, bunun yatay degilde dikey olanini yapmak istiyorum css'nin hangi kodlarini ne ile degistirmeliyim ki bu menu yatay olarak gozuksun.

ilginize tesekkurler.

11. | 10 Mayıs 2006 21:53 tarihinde, Onur demiş ki:

yatay olaninida yapmayi basardim :) simdi sormak istedigim soru su; menunun sayfada gorunecegi bolgeyi nasil ayarlayacagim ben?

bu yukaridaki yere

gibi degerler ekledigimde menunun yeri degismiyor. bunu nasil yapabilirim.

tesekkurler.

12. | 24 Mayıs 2006 23:01 tarihinde, Bora demiş ki:

1. #menu {margin: 0; padding: 0 0 20px 10px; font: bold 12px/14px Verdana, sans-serif; border-bottom: 1px solid #A7A7A7;}
2. #menu ol, #menu li {display: inline; list-style-type: none;}
3. #menu a:link, #menu a:visited {float: left; margin: 0 10px 4px 10px; text-decoration: none; color:#999; }
4. #menu a:hover {border-bottom:4px solid #A7A7A7; padding-bottom:2px; background:transparent; color:#900; }

bu kodu nasil bir sekilde yazarsam calisir

13. | 24 Aralık 2006 0:12 tarihinde, Tamer Ağaoğlu demiş ki:

PHP ile çalışanlar için durum biraz daha karışık olabiliyor
---------------------------------------------------------------

header.php (üst)

body.php (orta)

foother.php (alt)

(isteğe göre)

tabiki ben genellikle türkçemizin suyumu çıktı diyerekten

ust.php
sayfa.php
alt.php olarak ayırıyorum aslında ingilizce yapmakta fayda var daha kolay ezberleniyor ve unutmayın developher iseniz bid türk iseniz gerçekten şanslısınız :)

lafı uzatmadan css deki mantığımız burdada geçiyor biz sayfaları ayırdık
menülerin olcağı kısmı mesela ust.php ye aldık include "ust.php"; bir değişiklik yapılacaksa tek bir yerden yapılıyor include edilen yer index.php olarak düşünelim header deki yani ust deki maksat de bildiğimiz yani baş kısım diye tanımlandırılan kısımdır.bu kısımda gibi sayfanın broser yüklemeden önceki sayfa ayar ve standartlarını belirleriz aynı şekilde ust.php dede sayfamızın ayar ve standartlarını belirliyeceğiz böylece köklü bir site alt yapısı ortaya çıkıyor gerçi bunu yapıpta türkçe imla kurallarına uymayan benim gibi vardır :))

mehmet abimiz kadar anlatamadık ama php ye yeni başlayan arkadaşlarımız için yararlı olacağını düşünüyorum.

14. | 21 Şubat 2007 19:19 tarihinde, tuna demiş ki:

valla cok saglam bir css yazisi, turk milleti eminim birbirinden cok sey ogreniyor bu sayede bilgi gercekten paylastikca cogaliyor, ben bunlar baska hic biryerden ogrenemezdim. saygilar

15. | 27 Şubat 2007 12:22 tarihinde, caglar demiş ki:

menu 'ye geçişlerde ses eklemek mümknmü? Flas da olduğu gibi. Eğer oluyosa yardımcı olurmusunuz. tşk.

16. | 27 Şubat 2007 12:07 tarihinde, caglar demiş ki:

menu 'ye geçişlerde ses eklemek mümknmü? Flas da olduğu gibi. Eğer oluyosa yardımcı olurmusunuz. tşk.

Bu yazı yorumlara kapatılmıştır.

Kitabımı satın almak ister misiniz?