Kategoriler
Etiketler
İletişim
Ziyaretçi Defteri
En güncel 10 konu
Geri Dön
csstemplate
< Web Derslerine Geri Dön <Soru:
Herhangi bir CSS tasarımı siteme uygulamak istiyorum, ancak bir türlü başaramadım. Ya içerik tasarım altında oluyor, ya tasarım kayıyor, ya resimler gözükmüyor, yada ekstralar tasarım içinde gözükmüyor. Mutlaka bir sorun çıkıyor. CSS tasarımlar TR.GG'ye uygulanabiliyor mu? Eğer uygulanabiliyorsa bunun püf noktası nedir?
Cevap:
Hemen hemen bütün CSS tasarımlar TR.GG'nin CSS tasarımına uygulanabiliyor. Denedim ve test ettim. Sadece çok gelişmiş olan, büyük katmanlı tasarımlarda sorun çıkıyor. Eğer nasıl uygulandığını merak ediyorsanız aşağıdaki dersimizi izleyin:Derse başlamadan önce aşağıdaki kodu bir yere not alın, çünkü işinize yarayacak:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
Belki dersi izlemeden önce sonucu görmek istersiniz. Boştan yere izlemiyeyim diyorsanız aşağıdaki örneğe bakınız:
Uyguladığımız CSS tasarım: http://www.freecsstemplates.org/preview/bestfriends
Ve sonuç: http://hackerfriendly.tr.gg/1.htm
CSS dosyasını düzenlemek için açıyoruz.
Sitemize uygulamak için resim konumlarını değiştirmek gerekiyor.
Resim konumlarını değiştirmezsek sitemizde gözükmez.
Tavsiye olarak 1 GB alanı olan TR.GG sitenize resimleri yükleyiniz.
Düzenleme programınızın özelliğine bağlı olarak…
… tüm resim konumlarını değiştirin. Notepad'te CTRL+H yapıyoruz.
Orjinal konum ile değiştirdiğimizde resimler böyle olacak
Böylece resimleri tekrar yükleme zahmetinden kurtulmuş olduk.
CSS kodunu kopyalayıp tasarım ayarlarına gidiniz.
Vermiş olduğum kod başta olmak üzere CSS kodu yapıştırınız.
Buraya kadar sitemize CSS kodunu uyarlamış olduk.
Bundan sonraki işimiz Tasarım Üzerinde ve Altında olacak.
Şablonun içinde içeriği oluşturan kısmı da siliniz.
Content kodunun başlangıç ve bitiş kısımlarına dikkat ediniz.
İçeriği sildikten sonra bu adımlar uygulanacak.
Tasarım üzerine ve altına ilgili kodları yapıştırıyoruz.
Resimleri orjinal boyutunda izlemek için üzerlerine tıklayınız…
Piksel olarak düşük ekranlarda F11 yapmanız tavsiye olunur.
Önemli Not:
• "Tasarımı indirdim ancak içinden content diye bir şey bulamadım" diye bir çok soru ile karşılaştım. Evet, olmayabilir. Önemli olan içeriklerin yer aldığı katmanı (division) bulabilmek ve bu aşamayı iyi kavramak olacak. Kimi ücretsiz tasarımlarda bu katman (yani <div>) main, post, page, icerik gibi tanımlanabilir. İsmin hiç bir önemi yok.
• İçerik katmanını bulduktan sonra bu içerik katmanına kadar olan kısmı TASARIM ÜSTÜNE, geri kalanı da TASARIM ALTINA yerleştirmek gerekiyor. Örneğin tasarım içindeki katman ismi page olsun.
Tasarım üstüne:
....
....
....
....
... <div id="page">
Tasarım altına:
</div>
....
....
....
yerleştirilecek.
• "Tasarımı indirdim ancak içinden content diye bir şey bulamadım" diye bir çok soru ile karşılaştım. Evet, olmayabilir. Önemli olan içeriklerin yer aldığı katmanı (division) bulabilmek ve bu aşamayı iyi kavramak olacak. Kimi ücretsiz tasarımlarda bu katman (yani <div>) main, post, page, icerik gibi tanımlanabilir. İsmin hiç bir önemi yok.
• İçerik katmanını bulduktan sonra bu içerik katmanına kadar olan kısmı TASARIM ÜSTÜNE, geri kalanı da TASARIM ALTINA yerleştirmek gerekiyor. Örneğin tasarım içindeki katman ismi page olsun.
Tasarım üstüne:
....
....
....
....
... <div id="page">
Tasarım altına:
</div>
....
....
....
yerleştirilecek.
< Web Derslerine Geri Dön <
