Hazır Tasarımları bedava-sitem'e Uyarlama
Sayfa Eklenme Tarihi: 23.01.2014Merhaba bu sayfada hazır CSS temaları nasıl bedava-sitem'e uyarlandığını öğreneceksiniz.
Derse başlamadan önce tasarımları nerelerden indirebileceğiniz hakkında birkaç link vermek istiyorum:
templatemo.com
freecsstemplates.org (tavsiyemdir)
free-css.com
gibi bunlar böyle devam eder.
Ben freecsstemplates.org'dan stuffy adlı tasarımı kullanacağım. Tabi tasarımda biraz değişiklik olacak ama sabit tutmaya çalışacağım.
Adım 1: Tasarımı indirin.
Uyarı: Tasarımla beraber gelen fontları ve başka dosyaları kullanamazsınız. Sadece index.html (bazı tasarımlarda index.html dışında galery concact sayfaları falan da ekliyor onları da kullanabiliriz ama tek bir index sayfasından daha zor olur.), default.css ve varsa resimleri kullanacağız. (İsimler farklı olabilir.)
Adım 2: index.html (index yazmayabilir ama dosyanın html dosyası olması gerek) dosyasını bir metin belgesi ile açıp içindekilerinin tamamını farklı bir metin belgesine yapıştırın.
Adım 3: Tasarımı editlemeye daha sonra geçeceğiz şimdi bedava-sitemdeki sayfamıza CSS tasarımı en verimli şekilde kullanabilmek için birkaç kod gerekli.
1-) CSS tasarımı seçtiğinizde gelen sayfa linkleri.
Bunlardan kurtulmak için Tasarım Ayarları --> Gelişmiş Ayarlar --> CSS Kodu kısımına şu kodu ekleyin:
2-) Reklamlar.
Oldum olası şu reklamlar benim sinirimi bozmuştur. Reklamlar ile ilgili kodlar aşağıda:
Bu kod reklamları tamamen kaldırır. Bu kod iframelerin gösterilmesini engellediği için iframe komutlarını kullanamazsınız. Tasarımın üstündeki reklamlara özel açılmış alan kaldırılmaz. Ayrıca bedava-sitem.com reklamları gizlemenin kural dışı olduğunu belirtmiştir.
Tasarımın üstündeki metin kısmına yapıştırın.
Bu kod üstteki reklamı ortalar.
CSS kodu kısmına yapıştırın.
Bu kod sağdaki dikey reklamın yerini değiştirmeyi sağlar.
Tasarımın üstündeki metin kısmına yapıştırın.
Bu kod sayfanın en altında "=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=" yazısına özellik verir.
Fark ettiyseniz şu an bulunduğunuz sitenin en altında kırmızı renkle yazıyor. Özellikleri kendiniz belirtebilirsiniz.
color: yazıya renk verir. Renk kodu yazmanıza gerek yok white, green, yellow falan da yazabilirsiniz.
backround-color: arka plan rengidir. (Arka plan rengiyle yazının rengini aynı yaparsanız yazı görünmez olur ama bu da kurallara aykırı.)
margin-left: 32%; Bu ise yazının ekranın %32'si kadar sola gitmesini söylüyor. Böylece yazıyı ortalıyoruz.
Bu bir CSS kodu olduğu için istediğiniz gibi özellik verebilirsiniz.
CSS kodu kısmına yapıştırın.
3-) Linkler.
Ben linklerin üzerine gelince saydam olmalarını seviyorum. Nasıl yaptım derseniz kod aşağıda.
CSS kodu kısmına yapıştırın.
Adım 4: Şimdi tasarımı ayırmaya başlayacağız. Öncelikle tasarımı kopyaladığımız metin belgesinde silmemiz gereken yerleri siliyoruz.
Tasarımın en başından <body> tagının başladığı yer,
ve sondan </body> ve </html> bitmiş tagları siliyoruz.
Bedava-sitem'in CSS tasarım matığı şudur: Tasarım iki parçadan oluşur; sayfa dışı ve sayfa içidir. Sayfa dışı değişmeyen tasarımdır. Sayfa içi ise sayfalarımı düzenle'den bir sayfa açtığınız zaman ortaya çıkan tasarımdır. Yani her sayfa Tasarım üstündeki yazı ve Tasarımın altındaki sayfa arasındadır. Şimdi yeni bir sayfa açtığımızda bu sayfanın tasarımının nereye geleceğini ayarlayacağız.
Burası sizin keyfinize kalmış birşey ben sayfalarımın içeriğini buraya almak istiyorsam (kırmızıyla belirtilmiş yer: "entry id'li div"miş) ;
Görüntüdeki gibi orayı bulup oranın üstünü tasarımın üstüne, altını tasarımın altına yapıştırıyoruz.
Ama bizim tasarımımızın altında buna benzer iki yer daha var. Biz de onları siliyoruz. (div'lerin başladığı ve bittiği yerlere dikkat edin)
Uyarı: Her tasarımda farklı yöntemler uygulanabilir. Bunların hepisni yazamam ben sadece işin mantığını anlattım. Lütfen yorumlara bu bende yok nereyi silicez diye mesaj atmayın.
Sitenize girdiğinizde hiçbir şeye benzemeyen şeyler çıktığının farkındayım. Şimdi tasarımı indirdiğiniz klasöre geri dönün ve ordaki style.css dosyasını metin belgesiyle açıp hepsini olduğu gibi CSS kodu kısmına yapıştırın. Evet şimdi birşeylere benzedi.
Ama bir eksik daha var resimler. Şimdi tasarımı indirdiğiniz klasör gidin. Resimlerin hepsini resimlerimi yönet'e gidip resimleri yükleyin. Ardından yüklediğiniz resimlerin isimlerini style.css dosyasında aratın. Bulduğunuz yerde yüklediğiniz resimlerin linklerini oraya kopyalayın. Evet tasarım bitti.
Adım 5: Tasarım tamamlandı ama linkler ve yazılar öylece duruyor şimdi onları ayarlama zamanı.
Linkleri ayarlamak dünyadaki en kolay tasarım işidir. Link kodu her zaman şöyledir.
<a href="LINK'IN GÖTÜRECEĞİ ADRES">SAYFADA GORUNEN ŞEKLİ</a>
mesela <a href="google.com.tr">Google</a> şeklinde bir kod olursa
karşınıza çıkar.
Siz de tasarımlarda böyle yapacakınız.
İpucu: Örneğin <a href="http://worderexpress.tr.gg/Ana-Sayfa.htm">Ana Sayfa</a> ile
<a href="/Ana-Sayfa.htm">Ana Sayfa</a> aynı şeydir.
Yani "http://worderexpress.tr.gg" kısmını yazmanıza gerek yoktur.
Tasarımın geri kalanını istediğiniz gibi şekillendirebilirsiniz. Sitenize daha fazla özellik katmak isterseniz sitemizi takip etmeye devam edin.