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

Bütün CSS tasarımlar TR.GG'ye uygulanabilmekte.

http://www.freecsstemplates.org adresine giriyoruz.

Herhangi bir CSS tasarımı bilgisayarımıza indirelim

İnen dosya Winrar ise dışarı çıkartalım.

Genel olarak CSS tasarımların içeriği bu şekildedir.

Bazen Java kodlar da bulunabilir.

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.

Eğer kendi sitenize yüklemek istemiyorsanız…

… resmin orijinal konumu ile de değiştirebilirsiniz.

Orijinal konumları ile değiştirmenin iki riski var :

1 - Silinebilir; 2 - Konum değişebilir.

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.

Şablonu önizleme yaptığımız sayfada kaynağı görüntüleyin

… diğer sayfaya geçiniz…

BODY tag öncesi bütün kodları siliniz.

BODY tag kapamasından sonraki kodları da siliniz..

BODY tag kapamasından sonraki kodları da siliniz..

… diğer sayfaya geçiniz…

Şablonun içinde içeriği oluşturan kısmı da siliniz.

Content kodunun başlangıç ve bitiş kısımlarına dikkat ediniz.

Silmiş olduğumuz içerik kısmı burası.

… diğer sayfaya geçiniz…

İçeriği sildikten sonra bu adımlar uygulanacak.

Tasarım üzerine ve altına ilgili kodları yapıştırıyoruz.

Tasarım üzerine ve altına ilgili kodları yapıştırıyoruz.

Kaydet diyerek değişiklikleri kaydediyoruz.

İşte mutlu son

Sonuç bu adreste: http://hackerfriendly.tr.gg/1.htm

Bilgi Güçtür, Paylaştıkça Büyür!

Artık siz de kendinize özgü CSS tasarımlar yapabilirsiniz, başarılar.