xhtml | bildirgec.org

101 yüksek kaliteli css ve xhtml web şablonu yazısını daha önce bildirmiştim.

Bir önceki bildirinin devamı niteliğinde olan bu yazıda birbirinden güzel web tasarım şablonlarına ulaşabilirsiniz.

1 - çözümün ne xhtml ve css web şablonu

önizleme | indir

2 - internet işleri xhtml ve css web şablonu

önizleme | indir

Web Tasarımı için kullanabileceğiniz birbirinden güzel 101 yüksek kaliteli css ve xhtml şablonlara aşağıdan ulaşabilirsiniz.

Sıfırdan web sitesi oluşturalım yazısında bu yazım hakkında bir link yer almaktadır.

1. Çevresel Marka xhtml ve css web şablonu

önizleme | indir

2. Organik Tasarım xhtml ve css web şablonu

önizleme | indir

Daha önce CSS Sprite tekniğinden "css sprite'ların kullanış alanları" başlıklı yazımda bahsetmiştim. Eğer bu yazıyı okumadıysanız bu tekniğin yararını kavrayabilmeniz için okumanızı tavsiye ederim. Bu yazıda ise bu tekniği satırlarca kod yazmadan nasıl uygulayabileceğimizi anlatacağım.

1. adım: Kullanılacak Resmin Yaratılması
Matt Varone'un yapmış olduğu CSS Navigation Bar Code Generator uygulamasına önceden yaptığımız sprite dosyamızı yüklüyoruz. Ben rehberde örnek olarak aşağıdaki butonları kullanacağım.

2. Adım: Ayarlamalar
Resmi yükleyip ikinci adıma geçiyoruz. Bu sayfa Menü tasarımı için yapıldığından dolayı uygulama sizden menünün ismini yazmanızı ve horizontal (yatay) ya da vertical (dikey) özelliklerinden birini seçmenizi istiyor. Bu seçimi yapıp bir sonraki adımda menümüzün sayfa yüklendiği anda gösterilecek halini seçmemiz isteniyor.

3. Adım: Ana Katmanı Seçmek
Bu adımda yatay menü yapıyorsanız yatay, dikey olarak tasarladıysanız dikey olarak menünün ilk elemanlarını seçmeniz gerekmekte. Eğer uygun bir seçim yaparsanız uygulama size onay mesajı göstererek bir sonraki adıma geçmenize izin veriyor.

Internet Explorer'la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim.

Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+'ya odaklandım. Her ne kadar IE6'nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6'nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.

Özet
Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.

• Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın
• CSS'nizin en başında daima sıfırlama (CSS RESET) kullanın.
• Firefox'ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari'de ise text-shadow: #000 0 0 0 kullanın.
• Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.
• Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.
• BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.
• Üzerine float uygulanmış tüm anahat divleri display: inline ve overwlow: hidden içermeli.
• CSS3 seçicilerini kullanmayın.
• Alpha'yı yüklemediyseniz saydam PNG kullanmayın.

Yayımladığı web tasarımı ve trendlerine yönelik makaleleri ve kaynakları ile geçtiğimiz yıl 4 milyon ziyaretçi tarafından ziyaret edilen Woork web sitesi, geçtiğimiz günlerde ücretsiz ve kaliteli bir el kitabı yayımladı.

Kitap CSS, HTML, AJAX, Web programlama, Mootools, Scriptaculous ve web tasarımına yönelik pek çok farklı konuda bilgi içeriyor. İçeriğin tamamı daha önce Woork üzerinde yayımlanan kaynaklardan oluşturulmuş.

Site yöneticileri geçtiğimiz yıl boyunca ziyaretçilerden bu tip bir kitap yayımlamaları konusunda yoğun istek aldıkların belirtirlerken, uzun bir çalışma sürecinin ardından ilgili kitabı ücretsiz yayımlamaya karar vermişler.

Kitap bünyesinde kod bölümlerinden görsellere, illüstrasyonlardan woork üzerindeki orijinal içeriğe bağlantılara kadar pek çok konuda değerli bilgiyi derli toplu bir biçimde sunuyor.

(Cheat Sheets) kopya kağıtları sayesinde hafızanızı tazeler ve zamandan tasarruf sağlarsınız. öğrenmek istediğiniz araç/yapı hakkında başlangıç için hızlıca bilgi almak ya da karşılaştırma yapmak için de kullanabilirsiniz.

genelde programcılar ve programlar için kopya kağıtları hazırlarnır. bildirgecte arama yaparak bunlara ulaşabilirsiniz.

sixrevisions sitesi ise web tasarımcıları için 9 bölümden oluşan 28 maddelik bir kopya kağıtları listesi oluşturmuş.

Photoshop

1. Photoshop CS3 Keyboard Shortcuts Cheat Sheet

Yükle: PDF (Windows) , PDF (Mac)

2. Keys for using the Layers palette (HTML)

bu yazıyı okuyanlar arasında öğrencilik yıllarındayken sınav zamanı geldiğinde tüm dönemin konularını bir tek kopya kağıdına sığdırabilen arkadaşlar mutlaka vardır :) bizim zamanımızda hazırladığı kopya kağıdıyla övünenler bile vardı. Hatta en güzel kopya kağıdı sınav öncesi fotokopi çekilip çoğaltılırdı.

Şu sitedeki makalede Javascript, HTML, CSS ve XHTML başlıklarıyla listelenen 23 adet yazdırılabilir kopya kağıtları (cheat sheets) bana o eski kopya kağıtlarını hatırlattı.

850+ 1,2,3 kolonlu, rengarenk ve akışkan özellikleri ile kaliteli, CSS ve XHTML hazır tema şablonlarını, ücretsiz olarak indirebileceğiniz bir tema galerisi.

Örnek:

Temaları önizleme yapabilir ve temalar hakkında yorumunuzu site üzerinden diğer kullanıcılar ile paylaşabilirsiniz.İsterseniz kendi temanızı ekleyerek gelecek yorumlar ile tasarımınız hakkında bilgi sahibi olabilirsiniz.

Tema galerisine gidin.