Fakat ben “CTRL + K + D” tuşlarına bastığımda yukarıdaki gibi değil aşağıdaki gibi, yazdığım şekli bozmadan, her satırda tek bir tanım olacak şekilde kodlarımın biçimlendirilmesini istiyordum.

Bu konuyu biraz araştırınca benzer sorunu yaşayan bir çok kişi ve çok da kolay bir çözümü olduğunu öğrendim :)

Visual Studio 2010 uygulamasını açtıktan sonra “Tools” menüsü altından “Options“`ı açıyoruz. Ardından sol kısımdaki listeden sırasıyla; “Text Editor” > “CSS” > “Formatting” bölümlerini seçiyoruz. Daha önce ayarlarını değiştirmediyseniz fotoğrafta görüldüğü gibi sağ kısımda “Expanded” seçili durumda olacaktır.

“CTRL + K + D” tuşlarına bastığınızda css kodlarınızın her bir satırda tek bir tanım olacak şekilde biçimlendirilmesini sağlamak için “Style” başlığı altındaki ilk seçenek olan “Compact rules” seçeneğini işaretliyoruz (İşaretledikten sonra alt kısımdaki “Preview” kısmından nasıl bir biçimlendirme yapılacağını görebilirsiniz).

Seçim ardından “OK” tuşuna basarak yaptığımız değişiklikleri kaydediyoruz.

Kaynak: http://www.wiliam.com.au/wiliam-blog/better-formatting-in-visual-studio-2010

IETester programına kısaca değinmek gerekirse, web tasarımcılarının genelde ihtiyaç duyduğu tarayıcı uyumluluğu testlerini gerçekleştirmeye yarayan araçlardandır. IE 5.5 versiyonundan IE 8`e kadar tüm internet explorer tarayıcılarında hazırladığınız web sitelerini test edebilmenizi sağlıyor.

IETester programı hakkında bilgi almak için http://www.my-debugbar.com/wiki/IETester/HomePage adresini ziyaret edebilir, isterseniz http://www.my-debugbar.com/ietester/install-ietester-v0.4.1.exe adresinden bilgisayarınıza indirebilirsiniz.

Göz atmanızda fayda var; JavaScript – Çözünürlüğe göre stil kullanımı

Bu JavaScript dosyasında bir kaç düzenleme yapılarak çözünürlük dışında tarayıcıya (ie, ff) göre farklı css dosyalarının yüklenmesi de sağlanabilir.

Bunun üzerine, yine css ile hazırlanmış ama daha detaylı bir tasarımı sizlerle paylaşma kararı aldım.

Görselliği 2. planda bırakarak önce çok basit, ardından biraz daha detaylı bir web sayfasını hazırlayarak burada yayınlamayı düşünüyorum. Tabi sizden gelicek fikirlere de açığım.

İnternette bolca kaynak var css`i anlatan. Tek tek konulara bölerek anlatılmış durumda zaten, bu yüzden benzer bir yapı sunmak istemiyorum ve yapacağım bu çalışma ile uygulama anında anlatmayı düşünüyorum. Yani şu özellik şu işe bu özellikte bu işe yarar diye tek tek css`i anlatmaktansa, kullanıldığı yerde açıklamasını yazarak neden orda o özellik kullanılmış onu vermek istiyorum.

Sonuçta elinizde genel hatları ile hazır bir web sitesi olacak ve css dosyasına baktığınızda hangi özelliğin neden orada kullanıldığını anlatan açıklamalar yer alacak. Aynı şekilde html kısmında da tabiki.

Neyse lafı daha fazla uzatmak istemiyorum, bu konuda düşünceleriniz yada istekleriniz varsa lütfen yorumunuzda belirtin.

Bende yorumlarınız doğrultusunda daha kullanışlı bir şeyler hazırlamış olurum böylece.

IzzyMenu sitesinde ajax teknolojisinin nimetlerinden faydalanarak kolayca css menüleri hazırlayabilirsiniz. Ardından yarattığınız menülerinizi bilgisayarınıza css, html, js ve image dosyaları ile birlikte ziplenmiş olarak indirebiliyorsunuz.

Site içerisinde mevcut menü şablonlarından seçim yapabilir ve bu şablonlar üzerinde istediğiniz şekilde düzenleme yapabilir yada üye kaydınızı yaptıktan sonra kendi menülerinizi sıfırdan yaratabilirsiniz.

Sitede dikkatimi çeken bir diğer konuda; hazırlanan menünüzün tüm tarayıcılarda düzgün şekilde görüntülenebilmesi için css hack yöntemininde kullanılması ve hazırlanan dosyaların size bu şekilde sunulması.

Css ile menü hazırlamak konusunda oldukça pratik bir kaynak olan bu siteyi mutlaka ziyaret etmelisiniz.

Css ile menü hazırlamaya başka bir alternatif ise Css Menu Builder sitesi. Burada menüler yapılarına göre 3 ana grupta toplanmış; Horizontal (yatay), Vertical (dikey), Breadcrumb (ekmek kırıntısı).

Css Menu Builder`da menünüzü hazırlarken izzymenu`deki gibi bir çok ayara müdahele edebiliyor ve aynı zamanda menünün css, html kodlarını ve image dosyasınıda görebiliyor ve kodlara müdahele edebiliyorsunuz. Son olarak iki sitede hazırladığınız menünüzü tüm dosyaları ile birlikte ziplenmiş bir paket halinde indirebiliyorsunuz.

Geçen gün şu sitede gözüme çarpan bir menüdende bahsetmek istiyorum size. Mac kullanıcılarının alışık olduğu, windows kullanıcılarınında Stardock`un burdaki ücretsiz aracı ile bilgisayarlarında kullandıkları menünün web sitelerinde kullanılabilecek bir şeklini css ve jquery kullanarak hazırlamışlar. Menüyü test etmek için burayı, yüzünüzdeki şaşkınlığı gidermek içinde burayı tıklayın. Menüyü bilgisayarınıza indirmek istersenizde burayı tıklayın.

Konumuz css menüler olduğuna göre birde ufak bir Photoshop tutorial`den bahsetmek istiyorum size. Web 2.0 diye tabir edilen bu tasarım trendine uygun hoş menüleri kendinizde hazırlamak isterseniz diye.

Yukarıda gördüğünüz menünün hazırlanışı bu adreste adım adım anlatılmış. Örnekten faydalanarak ortaya güzel çalışmalar çıkartabileceğinizi düşünüyorum.

Bu tekniği ilk duyduğumda birazda anlatan arkadaştan kaynaklanan bilgi eksikliği yüzünden sanırım mantıksız bi şey gibi gelmişti. Çünki arkadaşımın tavsiyesi üzerine mevcut olan css koduma ekleme yaptığımda web sitesinin resmen dağıldığını görüp direk olarak arkadaşımın üzerine saldırmıştım :)

Neyse sonuçta bu tekniğin projeye başlamadan en başta css dosyasına eklenip sonradan buna göre kodlama yapılması gerektiğini öğrenmiş ve bu tekniği bende kullanmaya başlamıştım…

Css sıfırlama tekniği sadece bir tane değil, bir çok insanın kendine göre hazırlamış olduklarının yanı sıra css konusunda hatırı sayılır bir yere sahip olan kişi ve kurumlarında kendince standart olarak kullandığı teknikler var.

Bunlardan en çok bilinenleri:

• Yahoo`nun reset css tekniği
• Eric Meyer`in reset css tekniği
• Hard Reset denilen bir teknik daha var, oda şöyle;

* {margin:0; padding:0}

Bu konuda aslında detaylı bir yazı yazmayı düşünüyordum fakat benden önce davranıp çok güzel bir yazı hazırlamışlar bile. Css Reset tekniği hakkındaki bu güzel yazıyı okumak ve hazırlanan videoyu izlemek için…

Bahsettiğim bu kaynak; Fatih Hayrioğlu`nun web sayfasında yayınladığı css derslerinin derlenip .pdf formatında bir e-book haline getirilmiş hali. Bu derlemeyi yapanda zaten kendisi.

Kitap yayınlanalı hayli zaman geçti aslında fakat web sitemi tamamen değiştirip WordPress`e geçtiğim için tekrardan yazmak istedim.

Kitap hakkındaki açıklamanın ve okuyucularının görüşlerinin yer aldığı sayfa için…

Kitabı bilgisayarınıza indirmek için…

Kitapta anlatılan derslerin kaynak kodlarını bilgisayarınıza indirmek için…

Birde kitap için alternatif link (RapidShare)