Html Kodu - Tablolarla CSS Design-Resimli Anlatım

Tablolarla CSS Design-Resimli Anlatım

ADIM 1
*İlk yapmamız gereken Tasarım ayarlarına gitmek, bulamıyorsanız işte link http://www.bedava-sitem.com/design.php Girdiniz mi?Evetse devam edelim.
*Aşağıda resmde de gördüğünüz gibi gelen ekrandan CSS Design-Genel-pek Sevilmeyen'i seçip kaydediyoruz..

ADIM 2
Şimdi sitenize isterseniz girin ekranda bir text(yazı) menü ana sayfanız bu menünün altında bir de baslik yazınız sitenin ana sayfasında görünür.Bizim bu baslik yazısını kaldırmamız gerek.Bu yüzden basit bir yöntemi kullanacağız.
*Hemen http://www.bedava-sitem.com/login.php adresine gidiyoruz.Burada menümüzde Ayarlar diye bir bölüm olacak.Linkini de vereyim http://www.bedava-sitem.com/editdata.php buraya giriyoruz.
*Bu sayfada hemen biraz aşağıda Genel Ayarlar var burada Sitenin basligi diye bir yer mevcut resimde de gördüğünüz gibi orayı tamamen silin.

*Peki şimdi ne olacak?Kaydet derseniz kabul etmez o bosluğa gelip klavyemizdeki uzun tuş space e bir kez basın.
*Şimdi kaydet diyerek çıkın.

ADIM 3
Menü yok etme.Bunun için öncelikle kodu vereyim.

Kod:

Bu kodu ne yapacaksınız?Öncelikle bu kodla ilk işimizi anlatayım.
*Şimdi http://www.bedava-sitem.com/design.php adresine yeniden gidelim.
*Alta inip tasarım ayarlarına bir bakalım.Navigasyonun başlığı diye bir bölüm göreceksiniz işte verdiğim menü yok etme yani gizleme kodunu buraya koyun.
*Kodun görüntüsü resimdeki gibi olacak.

*Kaydet diyip bu işi de hallediyoruz.
*Şimdi sitenize girerseniz boş bir sayfayla karşılaşırsınız.

ADIM 5
Peki bu bos sayfa nasıl dolacak?Bazıları buradan sonrasını yapamıyor.Niye mi?Sayfalara her şeyi koyduğunu ama hep bos sayfa kaldığını söylüyor.Bunun nedeni şu verdiğim menü gizleme kodunu (tekrar vereyim) Wink

Kod:

*Şimdi http://www.bedava-sitem.com/editpage.php sayfalarımıza gidiyoruz.
*Bu kodu HER SAYFANIN KAYNAK BÖLÜMÜNE KOYARSANIZ O SAYFA ARTIK GÖRÜLECEKTİR.Resimde Kaynak ve kodun koyuluşu gösteriliyor.

*Şimdi kaydet diyin ve sayfanıza bakın artık görünecektir.

ADIM 6
Yüzdük Yüzdük kuyruğuna geldik artık.Tablo olayına geldik bazıları burada takılıyor.Halbuki pek de zor değil.Öncelikle tablo nasıl oluşturulur?

*Öncelikle http://www.bedava-sitem.com/editpage.php adresine girelim.
*Yeni Sayfa ekle diyelim(bu yeni sayfanın kaynağına ADIM 5 teki gibi kodumuzu koyalım ki kaydet diyince sitemizden çalışmalarımızı seyredebilelim.)
*Sayfada aşağıda resimde gösterdiğim simgeye tıklayacağız ve tablo oluşturmaya başlayacağız.Öncelikle dış tablo oluşturacağız sonra onun içine yeni ufak tablolar oluşturacaksınız.Şimdi, resmi inceleyiniz.

!Resimdeki 1-2-3 numaralı bölümlerle ilgili kısa açıklamalarım var.
***1 NUMARA
Satır ve sütun burada satıra 3, sütuna 1 yazın.Neden?
""Çünkü bir satırımızı baslık resmimize ayıracağız
""Bir satırımız ana orta bölüm olacak burayı istediğimiz gibi dolduracağız.
""En alt ise COPYRİGT bölümü olacak.
***2 NUMARA
Genişlik ve yükseklik burası tamamen size kalmıştır.Ne kadar büyük veya ne kadar küçük bir site istediğinize bağlı.
***3 NUMARA
Arkadaşlar buralarda 1 kalınca çok kalın oluyor kenarlar bence bunlardan birini ya da ikisini bos bırakın daha hoş olur.Tamamen zevk meselesi. Mr. Green

ADIM 7
Tabloların içlerini kenarlarını vs renklendirmeye geldik.

*"ADIM 6"'da tablo oluşturmuştuk.Şimdi tablomuza sağ tık yapalım HÜCRE=>HÜCRE ÖZELLİKLERİ'ne gidelim.Resimde görüldüğü gibi.

*Şimdi resimde hücre özellikleri ekranını görüyorsunuz.Bazı notlarım hemen onun altında.Notlar bazen dikkatten kaçınca büyük kayıp oluyor.LÜTFEN notlara dikkat...

!1 NUMARALI BÖLÜM
Yatay hizalama:burada karşımıza sol merkez ve sağ olmak üzere 3 seçenek çıkacak bunlardan birini seçin.Ama benim tercihim standart olmak SOL.
Dikey hizalama:Burada da karşınıza tepe orta alt taban çizgisi çıkacak.Yine size kalmış Fakat standart TEPE.
!2 NUMARALI BÖLÜM
Burada tablomuzun arkaplanını ve kenar rengini belirleyebiliriz.

ADIM8
MENÜ bildiğiniz gibi menümüz kayboldu bu yüzden menüyü sitemizde her sayfanın içine koymalısınız bunu unutmayın.

"Menü seçenekleri,
1)Text
2)Buton
3)Flash

1)TEXT :Çok basittir.Resimde nasıl yapacağınızı açıkladım.Kodu da resimden sonra.

Aşağıda comicsans text menü kodu var ben yaptım renklerde ve isimlerde urlburaya yazan yerlerde değişiklik yapıp kullanabilirsiniz..

Kod:

<p><font face="Comic Sans MS" color="#ff0000" size="3"><strong>=>Menü</strong></font><a target="_self" href="http://www.istediginherseyburada.tr.gg"><br />
<font face="Comic Sans MS" color="#ff00ff">ANA-SAYFA</font></a><br />
<a target="_self" href="http://urlburaya"><font face="Comic Sans MS" color="#000000" size="2">Oyunlar</font></a><br />
<a target="_self" href="http://urlburaya"><font face="Comic Sans MS" color="#000000" size="2">Chat</font></a><br />
<a target="_self" href="http://urlburaya"><font face="Comic Sans MS" color="#000000" size="2">Müzik</font></a><br />
<a target="_self" href="http://urlburaya"><font face="Comic Sans MS" color="#000000" size="2">Sinema</font></a><br />
<a target="_self" href="http://urlburaya"><font face="Comic Sans MS" color="#000000" size="2">Eğlence</font></a><br />
<a target="_self" href="http://urlburaya"><font face="Comic Sans MS" color="#000000" size="2">Fıkra</font></a><br />
<a target="_self" href="http://urlburaya"><font face="Comic Sans MS" color="#000000" size="2">Webmaster</font></a></p>

2)Buton
Buton menüde paintle belirlediğiniz bir zeminin üstüne yazı yazığ resim olarak kaydedip link ekleyebilirsiniz.
buton zeminler için http://cunobag.tr.gg/Butonlar.htm adresinden faydalanabilirsiniz.

3)Flash
123Flash programıyla (30 gün kısıtlamalı) veya flashwortex.com adresinden menü yapabilirsiniz

ADIM9
YARARLI KODLAR(CSS İÇİN)
*Kodları Tasarım Ayarları Gelişmiş Ayarlar Tasarımın Üzerindeki Yazıya Koyun...

=Site Ortalama Kodu

Kod:

=Arkaplan Yapma Kodu

Kod:

=Köprü Eklenen Yazıların Altı Çizilmesin

Kod:

*Firefox Site Ortalama Nasıl?
Bunun için bu kodu tasarımın üzerindeki yazıya

Kod:

Tasarımın altındaki yazıya

Kod:

</td></tr></table></div>