Kolay Tasarim
Kolay Yoldan Tablo İle Site Tasarımı Yapmak
Bu konuda size kolay yoldan ve tamamen kendinize ait bir site tasarımı yapmayı öğreteceğim.Öncelikle Tasarım ayarlarından CSS Design i seçiyoruz ve sitemizde nerde ne olmasını istiyorsak o şekilde ve ölçüde bir tablo oluşturalım benim bu sayfada alanım kısıtlı olduğu için küçücük bi tablo yapacağım ama siz kendi istediğiniz ölçülerde yapın. Ben 3e 3 bi tablo yaptım ölçüleride 300x300 siz yükseklik girerken içerik bölümüne yükseklik girmezseniz daha iyi olacaktır. Ve ölçülerde sitenizin genişliğini 900 veya 950 olarak yapmanız güzel olacaktır.Bu satır sitenin | başlığı olacak | hepsini birleştir |
Burası menü için ayrıldı | Burası sitenin içerik bölümü olacaktır |
Burası sağ kutucuk (opsyonel) |
Bu satır | sitenin footer | bölümü olacak |
Başlık Yeri Böylece Hazır Oldu Sırada Başlık Yapımı Var! | ||
menü alanını biraz dar tutun böylece içerik alanı genişleyecektir. | daha geniş içerik alanı daha ferah siteler... | Bu alanıda menü gibi dar tutun. |
Footer alanımızıda hazırlamış olduk böylece.. |
Siteme Hoş Geldiniz | ||
menü | içerik kısmı | sağ kutu |
Bu Gün 10 Ziyaretçi |
Hücrelerimiz üzerinde sağ tıklayarak başlık için; yatay hizalama ortai dikey hizalama orta ve istediğim bir arka plan rengini seçtim. Menü, içerik ve sağ kutu içinse; yatay hizalama merkez dikey hizalama "tepe" ve bir arka plan rengi seçtim. Footer için yatay hizalama merkez dikey hizalama orta dedimve bir arka plan rengi seçtim. Ayrıca başlık ve footer alanımı hücre ayarlarından istediğim ölçülerde ayarladım. Sırada Bu alanların içlerini doldurmak var!
Siteme Hoş Geldiniz www.emresazak.tr.gg | |||||||
|
içerik kısmı | saat= 23:55 Reklam Reklam Reklam |
|||||
Bu Gün 10 Ziyaretçi (15 Klik) Kişi Burdaydı! |
Başlığı herkes kendi istediği gibi yapsın ama size tavsiyem başlık bölümüne güzel bi resim yapıp koyun benim gibi.. Gelelim menü bölümüne bu bölüme sitemdeki sayfa sayısı kadar satır ve tek sutun içeren bir tablo daha açtım ölçülerini ayarladım ve sayfalarımın adını yazdım ve tek tek onlara tıklandığında gitmesini istediim sayfaların köprülerini ekledim böylece kendi menümüzüde yapmış olduk... İçerik kısmını hiç ellemeyin boş kalsın oraya deneme yazarsanız sonra kod içinde bulması kolay olur.. Sağ kutuya saat üyelik paneli gibi araçlarımızı reklamlarımızı falan ekleyip footrıda aynı başlık gibi bir resim ekleyerek bitiriyoruz. Sırada tasarımı resimler ve uyumlu renklerle gerçek bir tasarım haline çevirmek var!!
|
deneme | saat= 23:55 Reklam Reklam Reklam |
|||||
|
deneme | saat= 23:55 Reklam Reklam Reklam |
|||||
Tasarımımız bu hali alıyor. Veee büyük final bu tasarımı sitene eklemek.. Yaptığın bunca işlemden sonra tek yapman gereken kaynak butonuna basarak içerik kısmına yazdığımız deneme yazısını buluyoruz. İşte o yazı tasarımımızın kodlarını tasarım üstü ve tasarım altı olarak ayırıyor yani o yazının üstünde kalan yazıları kopyalayıp tasarım üstüne altında kalanları kopyalayıp tasarım altına kopyalıyoruz. Böylece tasarımımızı hazırladık tasarım üstü altı diye ayırıp yerleştirdik peki CSS koduna neler yazacağız derseniz onlarıda vereyim..
table {margin-left: auto;margin-right: auto}
body,td,th { color: #FF9900; }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}
bu koduda CSS kısmına yapıştırın bu kod sayesindede tasarımımızı ortaladık genel yazı rengini turuncu yaptık orjinal başlık, menü, sayfa adı gibi şeyleri devre dışı bıraktık. yazı renginin turuncudan başka bi renk olmasını istiyorsanız FF9900 yerine istediğiniz renk kodunu koyun ve CSS kodu kısmına yapıştırın. sonrada kaydedip tasarımınızın keyfini çıkarın... Bi kaç defa yaptıktan sonra kendinizde birşeyler katacaksınız bunlara ve yaratıcılığın zevkini tadacaksınız...
İyi Eğlenceler...
Tamamen Emre SAZAK Anlatımıdır!