Reklamı
Kapat
Facebook
Profilim
Twitter    
Profilim
Bugün burdaki 142. kişisin ve bugün gösterilen 168. sayfaya bakıyorsun.

toplist Kişisel Web Siteleri
Kolay Tasarim

Emre SAZAK Kişisel Web Sitesi

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
Örnek tasarımımda en üste başlık, sola menü, sağa çok amaçlı bir kutu ve içeriğide ortaya yapacam. Tasarıma devam etmek için tabloda gerekli düzenlemeleri yapıyorum.
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..
Başlık ve footer alanlarını oluşturmak için tablomuzda 3 hücreyi birleştirdik menü ve sağ kutucuğu daraltıp içerik alanını genişlettik.Sıra sitemizin bu genel çizimini şekillendirmeye geldi!!
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
Ana Sayfa
İletişim
Z.Defteri
Hakkımda
Oyunlar
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!!
Ana Sayfa
İletişim
Z.Defteri
Hakkımda
Oyunlar
deneme saat= 23:55
Reklam
Reklam
Reklam
İşte tasarımımızda bunu gibi başlık ve footer resimleri hazırlayıp kullanabiliriz böylece bu basit tasarımı çok profesyönel gibi gösterebiliriz. Son olarak yaptığınız tasarımın daha güzel görünmesi için tablo çizgilerini aradan kaldırmak isteyeceinizi biliyorum bunun içinde tablo özelliklerinden kenar kalınlığını 0 " sıfır" yapıyoruz ve böylece.......
Ana Sayfa
İletişim
Z.Defteri
Hakkımda
Oyunlar
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!

 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol