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…

Web sayfalarımızın kodlama geçerliliğini (Markup Validation) her zaman W3C‘nin Validation servisleriyle test ederiz. Bildiğiniz üzere Xhtml geçerliliği için Xhtml Validator ve Css geçerliliği için de Css Validator sayfalarını kullanırız. Tabi başvuracağımız en büyük merci şu anda W3C ancak internette sitelerimizi geçerlilik yönünden test edebileceğimiz birçok servis bulunmakta. Bu yazımızda sizlere bu birkaç siteden söz edeceğiz.
Gönderinin Devamını Okuyun…

Merhabalar, sizler de biliyorsunuz ki Css sayesinde birçok stil tanımlaması yapabiliyoruz ve web sayfalarımızı bu stillere göre şekillendirebiliyoruz. Css’nin basit, etkili ve güçlü biçimde kullanılabildiği bir başka alan ise; web sayfalarımızın arkaplan (background) resimleri.

Bu yazımızda örnek kodlar ve sayfalarla birlikte bir arkaplan resmini Css ile nasıl sabitleyebileceğimizi ve nasıl tekrarlı kullanımını (repeat) sağlayabileceğimizi anlatacağız. Her zaman olduğu gibi yine işin mutfağına iniyoruz…

Css ile Sabit Arkaplan Resmi
Çoğu websitesinde gördüğümüz güzel bir uygulama ise kullandığımız arkaplan resminin sabit bir şekilde web sayfamızda kalmasıdır. Sayfamız için uygun olduğunu düşündüğümüz bu resmi küçük bir Css kodu ile sayfamızda sabit hale getirebiliriz.
Gönderinin Devamını Okuyun…

Web tasarımı söz konusu olduğunda mutlaka Form’lardan bahsedilir ve kullanılır. Çünkü web formları (her türlü formdan bahsediyorum) ziyaretçiden bilgi alma, bilgi aktarma, sonuç döndürme, bilgi girişini sağlama gibi görevler üstlenirler. En basit haliyle bir “İletişim Formu” bile sitenizdeki ziyaretçinin size ulaşmasını ve düşündüğü konuda yazmasını sağlar.

Bu yazımızda sizlere bir iki küçük Css taktiği ile Web Formlarımızı nasıl daha güzel hale getireceğimizi anlatacağız. Tabi önce işin mutfak kısmından başlıyoruz ve Xhtml ile formumuzu yazıyoruz…
Gönderinin Devamını Okuyun…

İnternet üzerinde görmüş olduğumuz birçok web sitesi ve kaynak üzerinde onlarca bağlantı görürüz ve bunları kullanırız. Bu bağlantıların gelişen web akımlarına ve özellikle de Web 2.0 tasarım özelliklerine göre şekillendirildiğini biliyoruz. Zira özelleştirilmiş bağlantılar sayesinde tıklayacağımız bağlantı sonucunda bir harici sayfaya mı gideceğimizi yoksa bir dosyayı mı indireceğimizi bilir hale geliyoruz. Bunu bizlere bildiren elbette bağlantımız başında kullandığımız küçük ikon ve resimler oluyor.

Şüphesiz uygulamanın yapılmasında en büyük pay Css’nin. Xhtml ile de bu özelleştirilen bağlantıları kullanarak site ziyaretçilerimize değişik bağlantı profilleri sunmuş oluyoruz. Bu makalemizde en basit yöntemiyle gönderilerimizde ve hazırlamış olduğumuz websitelerinde kullanılan bağlantılara nasıl resim ekleyeceğimizi anlatacağız.
Gönderinin Devamını Okuyun…

Sitepoint.com‘a uzun süre sonra girmemle birlikte üst menüde Reference bağlantısını görme fırsatım oldu. Girip nedir ne değildir diye baktığımda Css Reference başlığı altında bir sayfayla karşılaştım.

Bu sayfada Css konusunda Referans bilgiler yer alıyor. Temel Css Bilgileri, Syntax (sözdizim), Sayfa tasarımı, Kutular, Listeler gibi Css ile yapılan kodlama biçimleri ve nasıl uygulanacakları anlatılıyor. İlk gördüğümde W3schools.com’daki Css derslerini hatırlattı bana. Hoş ve faydalı bilgiler içeren bir bölüm olması ve kullanılan bileşenin (örneğin list-style-type) tarayıcılarda ne kadar desteklendiğini de göstermesi artılarından.

Css Reference sayfasına girdiğinizde alt bölümde ise yakında Html ve Javascript Reference bölümlerinin de geleceğini görebiliyorsunuz. Sitepoint Reference sayfasına ulaşmak için bu bağlantıyı kullanabilirsiniz.

(Öncelikle belirtmeliyim ki aşağıda okuyacağınız bilgi eski bir yazıdan alıntı. Yeni bir proje için rastgele arkaplan gösterecek ve bunu siteyi fazla yormadan sadece Css ve Php yardımıyla yapacak bir bileşen arıyordum. Eski dostumuz A List Apart imdadıma yetişti ve orada bulunan uygulamayı yaparak sonuca ulaştım. Umarım bu eski bilgi sizler için yararlı olur.)

Öncelikle Neler Gerekli?
Her girişte veya her sayfa açılışında farklı bir arkaplan resmi göstermek için Php (4.2 ve üzeri) Css ve Xhtml çalıştıran bir sunucunuz olması yeterli. Bundan sonrası çok küçük bir iki işleme kalıyor. Dilerseniz uygulamanızı yerel sunucu üzerinde (localhost) dilerseniz de kendi hostunuzda yapabilirsiniz. Bununla birlikte farklı gösterimler için “aynı boy ve genişlikle” formatı (gif, jpeg, png) önemli olmayan resimleriniz olmalı. Bu resimlerinizi hazırladıktan sonra hemen uygulamamıza geçebiliriz.

Rastgele Arkaplan Resmi Atama
Kısaca aşağıda yapacağımız küçük işlemi anlatmak istiyorum sizlere. Bu işlemde bir .php dosyasında yazılmış olan fonksiyon ile resimlerimizi bir dizin içindeyken (veya başka bir dizindeyken) kendi .css (style) dosyamız içine tanımlamış olduğumuz alan ile gösterime alıyoruz. Şimdi size gerekli olan şey Alistapart.com üzerindeki orjinal .php dosyası. Burada gördüğünüz kodları bir metin editör içine alıp “dongu.php” olarak kaydedin. Kayıt işlemini yaptıktan sonra resimlerinizin bulunduğu dizin içine atın.

Bu aşamadan sonra resimlerimizi göstereceğimiz alanın CSS tanımlamasını yapmamız gerekiyor. Bu tanımlama için şöyle bir kod yeterli olacaktır.

#dongualani
{
background:#fff url(dongu.php) no-repeat center top;
width: 800px;
height: 170px;
}

Gördüğünüz gibi stil dosyamızda “dongualani” diye bir id oluşturduk ve bu id üzerinde beyaz arkaplan rengi ve arkaplan resmi olarakta daha önce oluşturduğumuz “dongu.php” dosyasına ithafta bulunduk. Burada dikkat ettiyseniz arkaplan tanımlamasında bir resim dosyası kullanacağımıza bir .php dosyası kullandık ve .php dosyasının işlem yapmasını sağladık. Bu alanda bulunan resim genişlik ve yüksekliğinde siz değişiklikler yapabilirsiniz. Bu kodu kopyalayıp stil dosyanıza kaydediniz.

Stil dosyasını da kaydettikten sonra artık yapacağımız tek şey stil olarak tanımladığımız id sınıfına Xhtml üzerinde atıfta bulunmak. Bunu da aşağıdaki kod yardımıyla gerçekleştirebiliriz.

<div id=”dongualani”> </div>

Yukarıda yer alan kodu da rastgele arkaplan resmimizin görünmesini istediğimiz yere kopyalıyoruz. Bundan sonra dosyamızı kaydederek sonucu görebiliriz. Ben şurada bir örnek çalışma yaptım ve hem Firefox hem de Internet Explorer üzerinde test ettim. Sonuç gayet güzel…

Sorular ve Problemler
Şayet yukarıdaki işlemleri yaptınız ve sonuca ulaşamadıysanız adımları yeniden takip edin. Yukarıda bahsettiğimiz gibi dongu.php ve resim dosyalarınızın aynı dizinde olduğundan emin olun. Şayet resimleriniz ve dongu.php dosyanız farklı bir alandaysa dongu.php içinde $folder = ‘.’; alanına dizin yolunuzu yazın. Bununla birlikte #dongualani kodu içindeki dongu.php dosyasının tam yolunu yazmanız da uygulamanın çalışası için yeterli olacaktır. Ancak aynı dizin içinde dosyalarınız barınıyorsa bunu yapmanıza gerek yoktur.

Kaynaklar: A List Apart | Sonspring.com

Digg‘de günlük rutin gezintilerimi yaparken bir başlığa rastladım. “53 CSS-Techniques You Couldn’t Live Without”. Smashing Magazine sitesi tarafından yazılmış hoş bir bildiri. Tamı tamına 53 güzel Css uygulamasını gösteriyor ve ilgili alanlara linkler vererek yazının daha da tatlı olmasını sağlıyor. Aklınıza gelebilecek tüm Css teknikleri işlenmiş, Css Navigasyonlar, Css Diagramlar, İleri düzey tablolar, tab menüler, image map’ler, formlar ve daha nicesi. Kesinlikle bakmanızda ve bookmarklamanızda fayda olabileceğini düşündüğüm bir site. Css ve Xhtml bileşimiyle neler yapılabildiğini görmek isteyenler içinse bu deryada küçük ama dikkate alınası bir örnek. (2 gündür ölesiye hastaydım, siteye gönderi yapamadım, sanırım böylelikle biraz olsun affettiririm kendimi)

Gece boyunca bilgisayar başındaydım. Sürekli Web2.0 sitelere bakıp bakıp iç geçirdim. (Tabi haliyle insan bu siteleri görünce böyle bir tasarım yapmaya çalışıyor, işin kötü olan tarafı o tasarımı yapamadan ya da kendi istediğinizi yapamadan hüsrana uğramanız) Şunu görüyorum ki, Web2.0 diye tabir edilen ve büyük puntolarla başlıkları olan, oval kesimlerin hakim olduğu, gradientlerin çokça kullanıldığı siteler azımsanmayacak kadar çoğalmışlar(!) Hal böyle olunca bu siteleri bizlerin önüne sunabilmek için birçok Css Showcase ile karşı karşıya kalıyoruz. Bunların içinde gerçekten işini çok iyi yapan sitelerde var tamamen baştan savma, reklam amaçlı olanları da. Çok eski bir zamanlarda Visualdesigner.net ile bu özlemimi giderir, tasarımı güzel olan siteleri bookmarklayıp saklardım. Şimdilerde ise insan hangi sitelere girip bakacağını şaşırıyor. O kadar çoğaldılar ki… Fakat ben sizlere en çok ziyaret ettiğim Css galeri sitelerini yazacağım.
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