[cannerx]

arkadaşlar yeni tasarladığım bir sitede açılır menü hazırladım ve mause butonun üzerine geldiğinde sağında popup tarzı bir menü oluşturdum fakat ekran çözünürlüğü düşük olan bilgisayarlarda (örn:1024x768) menü sayfanın ortasında görüntüleniyor. bu konuda hakkında yardımlarınızı bekliyorum site adresi : www.turkeycappadociatour.com

[nothingrows]

Merhaba, sayfanı inceledim ve gördüğüm kadarıyla basit bir şekilde ilgili menü alanının üzerine gelince alt menülere ait bir div elemanını açıp-kapatan bir yapı kullanmışsın. Açılan alt-menünün bahsettiğin çözünürlükte sayfanın ortasında görünmesi ise oldukça doğal. Çünkü bu alt-menülerin top ve left stil değerlerini kendi ekranının çözünürlüğüne göre vermişsin. Doğal olarak değişik çözünürlüklerde bu değerler sayfanın ortasını gösterir.

Yapman gereken ise çok basit. Bu işi JavaScript ile hızlı bir şekilde yapman için katetmen gereken çok yol olduğunu varsaydığım için aynı menüleri CSS ile yapabileceğin kaynaklar mevcut. Şimdilik kurumsal sandığım bu siteyi CSS ile geçiştir ve JavaScript ile biraz daha haşır neşir olduktan sonra gerçekten doğrusunu nasıl yapacağını da anlatırım Kolay gelsin.

[erdinç]

Sadece CSS ile çalışan hazır bir menü kullanabilirsin.

http://www.cssplay.co.uk/menus/fly_definition.html
http://www.cssplay.co.uk/menus/slide_definition.html
http://www.cssplay.co.uk/menus/magic_menu_seven
http://www.cssplay.co.uk/menus/flyoutt.html
http://www.cssplay.co.uk/menus/flyout2.html
http://www.cssplay.co.uk/menus/flyout_4level.html
http://www.cssplay.co.uk/menus/three-up-two-down.html

Bir de siteyi tablo ile tasarlamışsın. Arada CSS yeşillik olsun diye ufak teker yerlere karışmış. Tablo kullanmaktan vazgeçip div'lerle site tasarımı yapmanı öneriyorum.

[cannerx]

nothingrows tarafından gönderilen mesaj:

Merhaba, sayfanı inceledim ve gördüğüm kadarıyla basit bir şekilde ilgili menü alanının üzerine gelince alt menülere ait bir div elemanını açıp-kapatan bir yapı kullanmışsın. Açılan alt-menünün bahsettiğin çözünürlükte sayfanın ortasında görünmesi ise oldukça doğal. Çünkü bu alt-menülerin top ve left stil değerlerini kendi ekranının çözünürlüğüne göre vermişsin. Doğal olarak değişik çözünürlüklerde bu değerler sayfanın ortasını gösterir.

Yapman gereken ise çok basit. Bu işi JavaScript ile hızlı bir şekilde yapman için katetmen gereken çok yol olduğunu varsaydığım için aynı menüleri CSS ile yapabileceğin kaynaklar mevcut. Şimdilik kurumsal sandığım bu siteyi CSS ile geçiştir ve JavaScript ile biraz daha haşır neşir olduktan sonra gerçekten doğrusunu nasıl yapacağını da anlatırım Kolay gelsin.

ilglenidiğiniz için gerçekten çok teşekkürler.cevap geleceğine pek itimadım yoktu çünkü birkaç foruma daha önceden yazmıştım ve hiçkimse ilglilenmemişti,değerli vaktinizi ayırdıgınız için tekrar çok teşekkür ederim.

biraz acemi gözüyle bakmışınız bana ama olsun buna kırılmadım doğrusu çünkü pprofosyonel değilim sonuçta hocam siz yinede vaktiniz varsa anlatın bana ben içerisinden çıkarım,yeterki kaynak olsun , yol gösteren olsun...

[cannerx]

erdinç tarafından gönderilen mesaj:

Sadece CSS ile çalışan hazır bir menü kullanabilirsin.

http://www.cssplay.co.uk/menus/fly_definition.html
http://www.cssplay.co.uk/menus/slide_definition.html
http://www.cssplay.co.uk/menus/magic_menu_seven
http://www.cssplay.co.uk/menus/flyoutt.html
http://www.cssplay.co.uk/menus/flyout2.html
http://www.cssplay.co.uk/menus/flyout_4level.html
http://www.cssplay.co.uk/menus/three-up-two-down.html

Bir de siteyi tablo ile tasarlamışsın. Arada CSS yeşillik olsun diye ufak teker yerlere karışmış. Tablo kullanmaktan vazgeçip div'lerle site tasarımı yapmanı öneriyorum.

Sizede çok teşekkür ederim efendim.Bu siteye başlarken bu gösterdiklerinizi düşünmüş,aramış ama bulamamıştım fakat birsürü HTML var şimdi kim hepsini tek tek değiştircek gerçi mevcut menüde bir oynama yapıcak olsam yine uğraşıcam ama neyse artık bir daha ki sefere bu CSS leri kullancam. bir de bu tablo yerine div olayları nasıl oluyor hocam?

[cannerx]

bende iş yaptıgımı sanıyodum.dünyadan haberim yokmuş

[erdinç]

Selamlar cannerx.

Senin yaptığın sitede sitenin iskeleti tablo kullanılarak yapılmış. Yani tabloyu bir biçimlendirme elemanı olarak kullanmışsın. Artık tabloların biçimlendirme için kullanılması web tasarımında modası geçmiş bir yaklaşım. Bu konuda aşağıdaki başlığa bakabilirsin.

div dediğimiz şey bir kutucuk veya çerçeve olarak tanımlanabilir. CSS ile div'lerin özelliklerini belirliyorsun.

Bence aşağıdaki başlığı ve o başlık içinde verilen linkleri inceleyip siteyi tablodan div'e dönüştürmeyi deneyebilirsin. Eğer bunu başarılı bir şekilde yaparsan sitenin kodları arasında bir tane bile table kodu kalmaması gerekir.

Herhangi bir yerde takılırsan yeni bir başlık açtığında zaten burada yardım edecek kişiler olacaktır. Kolay gelsin. Erdinç

CSS'de Layout

[cannerx]

erdinç abicim yardımcı olmaya çalıştıgın için çok teşekkür ederim.

verdiğiniz linkteki hazırlamış oldugunuz kodlarda üst orta alt sağ ve sol kısımlara katmanlar oluşturmuşunuz ve gerçekten onları görünce birşeyler çıkartmaya başladım. şimdi birşeyi merak ediyorum. iframe sistemi gibi o div leri sabitleyebilirmiyiz.yani 100 sayfalı bir sitede bir link değişikliği için hepsini tek tek açmamız gerekiyor,div kullanacağımız bir sistemde bu olayı kolaylaştırmak için bir çözüm yolu var mı?

[nothingrows]

cannerx tarafından gönderilen mesaj:

erdinç abicim yardımcı olmaya çalıştıgın için çok teşekkür ederim.

verdiğiniz linkteki hazırlamış oldugunuz kodlarda üst orta alt sağ ve sol kısımlara katmanlar oluşturmuşunuz ve gerçekten onları görünce birşeyler çıkartmaya başladım. şimdi birşeyi merak ediyorum. iframe sistemi gibi o div leri sabitleyebilirmiyiz.yani 100 sayfalı bir sitede bir link değişikliği için hepsini tek tek açmamız gerekiyor,div kullanacağımız bir sistemde bu olayı kolaylaştırmak için bir çözüm yolu var mı?

Evet tek tek açman gerekiyor

Ya da şöyle yapabilirsin. Tasarım için Adobe Dreamweaver kullanıyorsan, her sayfada aynı olan genel taslağı bir kereliğine hazırlarsın. Ama bundan önce Dreamwaver'da yeni site oluşturmakla ilgili şu makalemin şu bölümünü bir oku. Elindeki programın sürümü pek farketmez, CS3'te bile aynı yöntem kullanılıyor.

Yeni site oluşturduktan sonra az önce de dediğim gibi bir kereliğine taslak -yani template- oluşturursun. Ardından Insert->template Objects->Make template'e tıklayıp bu taslağı site'ne template olarak kaydedersin. Daha sonra her sayfada değişecek içerik alanın olduğu elemanın içine yine Insert->template Objects menüsündeki Editable Region bölümü yerleştirp kaydedersin. Artık bir alt sayfa oluşturmak için sitenin ana şema bölümlerini kopyalama gerek kalmayacak. Sadece içerikle alaklı kısmı boş bir HTML sayfasında oluşturduktan sonra Modify->Templates->Apply template to Page... 'e tıklayarak içeriği template'de belirttiğin Editable Region içine yerleştirirsin.

Böylece bir kere yaptığın tasarımı, tüm alt sayfalarda kullanırsın. Daha sonra Templates klasörü içindeki bu taslak dökümanını değiştirdiğin zaman, taslağın uygulandığı alt sayfalardaki içerik alanı olduğu gibi kalır ve sadece taslaktaki değişen yerler kaydedilir.

[erdinç]

Selamlar cannerx,

Elbette sitede pek çok farklı sayfada kullanılan bir div'i (kutucuğu) bir defada değiştirme imkanın var. Yani sayfaları teker teker dolaşmıyorsun.

Zaten bu tür işlemleri yapmak için CSS kodlarını HTML sayfasının içinden alıp ayrı bir CSS dosyasının içine koyuyoruz. CSS kodları HTML sayfalarına gömülü olabilir veya ayrı bir CSS dosyasında tutulabilir. Eğer sadece bir sayfa için biçimlendirme yapıyorsan kodları sayfaya gömülü bırakabilirsin. Eğer kullandığın biçimlendirme aynı anda pek çok sayfada kullanılacaksa o zaman ayrı bir CSS dosyasına taşıman iyi olur.

CSS dosyası bir text dosyasına benziyor. Tek farkı .CSS uzantılı olması. CSS dosyana istediğin ismi verebilirsin. Diyelim ki dosyanın ismi styles.CSS olsun. Bu dosyayı dreamweaverda birkaç şekilde yaratabilirsin. En kolay yol herhangi bir yeni belge yaratıp ismini styles.CSS vermek. Bir diğer yol da yeni bir CSS stili kaydederken harici dosyaya kaydet seçmek ki o zaman Dreamweaver CSS dosyasını zaten kendisi yaratıyor.

Yarattığın HTML dosyasında bu styles.CSS dosyasına link vermen lazım. Bu şekilde gidip biçimlendirmeleri oradan okuyabilir. HTML dosyasında head tagları arasına şunu yazıyorsun: (linki kendi dosyana göre güncellemen lazım)

<link href="http://forum.zoque.net/www/CSS/styles.CSS" rel="stylesheet" type="text/CSS" />

Zaten CSS'in özelliği, bir sitede içerik ile biçimlendirmeyi birbirinden ayırması. Bunu şuna benzetebiliriz: MS Word'te heading denilen özellik sayesinde bir başlık için kullandığın biçimlendirmeyi kaydedip aynı biçimlendirmeyi farklı başlıklarda da kullanabiliyorsun. Sonradan sadece heading stili üzerinde değişiklik yapınca o stilin kullanıldığı bütün başlıklar bir anda değişiyor. Dolayısıyla başlıkları teker teker dolaşıp manuel olarak değiştirmene gerek kalmıyor. CSS buna benziyor. hatta yazı biçmlendirmeleri için çok gelişmiş özellikler CSS'te yine var. Ancak bunun yanı sıra asıl önemli olan şey div denilen kutucuklar. div'ler sayesinde tablo kullanman gerekmiyor. 100 tane sayfada kullanılan bir div'i bir defada değiştirebiliyorsun. div'lerle ilgili çok gelişmiş biçimlendirme özellikleri var.

Ben CSS'in gücünü ilk başta fark etmemiştim. Sonra o yukarıa verdiğim linkteki hazır menüleri inceleyip onların kodları üzerinde çalışırken CSS'in ne kadar üstün biçimlendirme özellikleri olduğunu anladım.

nothingrows'un bahsettiği template kullanımı DW'ın çok kullanışlı özelliklerinden biri. Diyelim ki bir sitenin pek çok sayfası birbirine benziyor. Yani soldaki menü, üstteki header kısmı, alttaki footer kısmı ortak olsun. Bu şekilde iskeleti birbirine benzeyen 20 tane sayfa olsun. Eğer bir tane sayfa yapıp onu 19 defa kopyalarsan, işi epeyce kolaylaştırmış olursun. Bu sayfalarda geçen menü, header, içerik, footer kısımlarını farklı divlere koyup sonra harici bir CSS dosyasında biçimlendirmeleri yaparsan sayfaların hepsini teker teker dolaşmadan CSS ile oynayarak bazı şeyleri değiştirebilirsin. Örneğin ölçülerde, renklerde, arkaplan resimlerinde vb değişiklik yapabilirsin. Ancak diyelim ki menüye yeni bir madde ekleyeceksin, ya da footer kısmına bir link ekleyeceksin. İşte bu tür değişiklikleri harici CSS ile oynayarak yapamazsın.

O nedenle ilk başta yarattığın o HTML dosyasını kopyalayıp kullanmak yerine onu taslak (template) olarak kaydediyorsun. Sonra o taslaktan HTML dosyası yaratıyorsun. Ardından template'te değşiklik yapınca, örneğin yeni bir menü maddesi ekleyince veya footer'da değişiklik yapınca o template'ten yaratılan bütün sayfalara değişiklik yansıyor. template'i değiştirince DW dosyaları güncelliyeyim mi diye soruyor. Ona evet demen lazım.

Bir de DW'da template'ten template yaratma özelliği var. İki farklı menü sistemi, örneğin hem üst menü hem de sol menü kullanan bir sitede bu özelliğ kullanmak iyi olur. İlk başlarda bu özelliğe ihtiyacın olmayacak.

Onların dışında bir de DW'da library item denilen bir özellik var. Diyelim ki bir sitede birkaç farklı yere koymak istediğin bir paragraflık bir yazı olsun. Ancak template'e bu yazıyı koyamıyorsun çünkü yazı sitenin farklı yerlerinde ortaya çıkıyor. Yani footer kısmı gibi bütün sitede aynı yerde değil. Manuel olarak yapmak istemiyorsun çünkü bir değişiklik gerektiğinde teker teker yazının geçtiği sayfaları dolaşman lazım. İşte DW'ın buna çözümü library item. İçeriği ayrı bir dosyaya koyup, içeriğin geçtiği yerlere birer link koyuyorsun. Bu özelliğe de ilk başlarda ihtiyacın olmayacak.

CSS dışında, template kullanımı, iç içe geçmiş template kullanımı (nested template) ve library item kullanımı konularını öğrenince web tasarımı konularını başlangıç düzeyinde öğrenmiş oluyorsun. Tabii bunun yanında bir grafik editörü (örneğin illustrator) ve bir miktar flash bilmek iyi olur. Ben de bu düzeydeyim. Acemiyim yani. Bu aşamadan sonra server side scripting konularını yani ASP veya PHP konularını öğrenmek gerekiyor.