EN YENİLER

EN İYİLER


YetkinForuM Eğlencenin Merkezi

css tasarımı siteye uygulamak

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

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.


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.

Bugün 3 ziyaretçi (60 klik) kişi burdaydı!
Tasarımın Kullanılması ve Kaynak Belirtilmeden
Yayınlanan İçerik Durumunda Gerekli İşlem Yapılacaktır YetkinForum Yönetimi


YetkinForum Link Değişimi
Dost Siteler
Dost Siteler

Siteni Ekle


Hit-Kurdu
css, css attribute selector, css kodları, css kullanımı, CSS Yazı Dizisi,css, css kodları, css kullanımı, xhtml,
xhtml sayfa yapısı,css, css dersleri, css kodları, css nedir, css örnekleri, css tema, css temalar, css template,
Dizayn Dünyası, free, html, html template, internet, tema indir, tema nedir, temalar, template arşivi,
template download, template indir, templateci, templates, theme, theme indir, themes, ücretsiz template,
web site design, WebMaster Genel, xhtm, xhtml, xhtml dersleri, xhtml nedir, xhtml tema, xhtml temalar,
xhtml template,web tasarim şablon kodları css kodları html programlama php,web tasarim şablon kodları,
css kodları html programlama php,css kodları, css+editor, hazır css kodları, hazır css kodları download
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=