Yeniden merhabalar. t’infection.com’da birkaç kez Xhtml/Css bileşimine sahip menüler yapmış ve sizlerle de nasıl yapılacağını paylaşmıştık. Bu makalemizde yine bir menü tasarımını birlikte oluşturacağız. Ancak bu sefer ki menümüz diğerlerinden biraz daha profesyonel olacak. Zira bu menümüzde Xhtml/Css’den daha iyi faydalanacak, menümüzü ikonlarla destekleyecek ve W3C standartlarına uygun bir kod yazımı elde edeceğiz.

Menümüzün yapısal tasarımını hazırlarken Html’de çokça kullandığımız Ul ve Li etiketlerinden faydalanacağız. Bu etiketlerin yazılımını düzgün bir şekilde yaptıktan sonra Stil dosyamızla bu etiketlerin değerlerini düzenleyeceğiz. Her zaman olduğu gibi Xhtml kodumuz gayet basit olacak, görünümümüzü de Css kodlarımızla şekillendireceğiz. Menümüzü oluşturmak için klasik olarak yine ihtiyacımız olan şey boş bir editör sayfası. Ben yine sizlere Notepad++ tavsiye edeceğim. Tabi klasik alışkanlarımızdan vazgeçemiyoruz, siz yine de kendi editörünüzü kullanmaya devam edin. :) Sözü fazla uzatmadan hemen menümüzü yapmaya başlayalım.

Gönderinin Devamını Okuyun…

Horizontal Menü Örneği

Tekrar merhabalar t’infection okurları. Uzun süre önce sitemizde sizlere Xhtml/Css bir menü yapımını anlatmıştık. Bu menümüz Dikey (vertical) diye niteleyebileceğimiz bir menü tipindeydi. Bu makalemizde de çok fazla kod yığını olmadan basitçe bir menü yapımını anlatacağız. Yalnız bu sefer farklı şekilde horizontal yani yatay diyebileceğimiz bir menü olacak ve menümüzü iki adet küçük gif resimle destekleyeceğiz.

Gönderimizin üst tarafında görünen menüyü oluşturmak için gerekli olan şey sadece boş bir not defteri sayfası. Dilerseniz şimdi menümüzün kodlarını yazmaya başlayalım.
Gönderinin Devamını Okuyun…

Efendim Rss okuyucuma düşen bir gönderide şahit oldum. Hasan Yalçın usta sitesinde duyurmuş ve giriş kısmında şu cümlelere yer vermiş;

Yetenekli tasarımcılar için paslanmış mouse’ları parlatma vakti! Süper menüler tasarlıyoruz üstelik birinci olan Botégo sponsorluğunda harika bir de ödülün sahibi olacak. Detaylar ise bir tık ötede!

Efendim, olay şudur ki bilgisayarımızın güzide programı Adobe Photoshop’u açıp bir menü tasarlıyorsunuz. Bu tasarladığınız menüyü belirlenen adrese gönderiyorsunuz ve daha sonrasında belirlenen jüri tarafından değerlendiriliyor. Detaylara burda girmeyeceğim. Hasan Yalçın’ın buradaki yazısından ayrıntılara ulaşabilirsiniz.

Botego sponsorluğunda yapılan bu yarışmada birinci gelen kişiye 160gb bir harici disk ödül olarak veriliyor. İlk 3′e giren kişilerin de çalışmaları sitede yayınlanacakmış. Daha öncesinde yapılan benzer yarışmalarda ne gibi aksilikler yaşandığını biliyoruz. Ancak Hasan Yalçın ve Botego’ya güvenimiz tam.

Hadi bakalım çalıştırın Photoshop’u… :) Detaylar…

Daha öncesinde sitemizde Dreamweaver ile ilgili birkaç makale yazmıştık. Bu makalemizde de Dreamweaver ile çok basit bir iki adımla nasıl Hızlı Menüler (Jump Menu) oluşturacağımızı anlatacağız. Hızlı menüler birçok web sitesinde gördüğümüz bir uygulamadır. Sitenizin tüm alt bölümlerine verilen hızlı bağlantılar sayesinde ziyaretçileriniz menülerin ve navigasyonların içinde kaybolmadan gitmek istedikleri sayfaya ulaşabilirler. (Özellikle kurumsal web sitelerinde çokça kullanılan bir uygulama olduğunu görebilirsiniz)

Makalemize başlamadan belirtmek isterim ki bu uygulamayı ben Dreamweaver 8 üzerinde geliştiriyorum. CS3 kullanan arkadaşlar da yine aynı şekilde menülerini oluşturabilirler.
Gönderinin Devamını Okuyun…

Tasarladığımız web sitelerinde sıklıkla açılır menüler ve buna benzer navigasyon araçları kullanırız. Belli bir alandaki resim ya da metin tabanlı link üzerine gelindiğinde açılır menü yardımıyla ilgili kategorinin alt dallarını ve menü başlıklarını görebiliriz. Çoğu zaman bu menüler doğru yerlerde kullanıldığında büyük bir navigasyon kolaylığı sağlarlar.

Bu yazımızda kısaca Adobe Dreamweaver ile resim ve metin tabanlı bağlantılarımızla açılır menülerin nasıl oluşturulacağını, özelleştirilmesini ve kullanımını anlatacağız.
Gönderinin Devamını Okuyun…

Vitaly Friedman’ın Alvid.de isimli sitesinin bir alt bölümü vardır. Bilenler bilecektir, Web Developer’s Handbook’tan bahsediyorum. Bu “el kitabında” web designer ve geliştiriciler için birçok web kaynağına ulaşmak mümkün. Başlıca kategorilerini ise Xhtml, Css, Css Galeriler, Navigasyon ve Menüler oluşturuyor.

Bugün tekrar uğradım ve tasarımının yenilendiğini gördüm. Daha güzel bir tasarım yapılmış ve eski siyah ağırlıklı halinden sıyrılmış tamamen. Web tasarımı ve özellikle Xhtml-Css ile uğraşanlar için öncelikli bir kaynak diye düşünüyorum.

Hızlı Linkler: Vitaly Friedman | Web Developer’s Handbook | alvit.de