19azera
Siteler İçin Css Tasarım
Css Design tasarımında menü gizleme kodunu eklememiz gereklidir.
Menü gizleme kodunu Navigasyonun baslığı: kutucuğuna yapıştırıyoruz. Ardından Kaydet diyoruz
Css Design Menü Gizleme Kodu:
| Kod: |
| <style type="text/css"> <!-- td.nav {visibility:hidden;} --> </style> |
"Ayarlar" sayfasına gelerek site başlığını yok etmeliyiz.Bunu ise site başlığı: Yazının karşısındaki kutucuğa bir kez tıklayıp ardından space (boşluk) tuşuna basıyoruz ve Kaydet diyoruz.
Sayfalarımı değiştir / Yeni sayfa diyoruz.
Aşağıda görüldüğü gibi araçlarımız gösteriliyor.
Tasarımımızın bir tablo içerisinde olması için aşağıdaki yolu izliyoruz.
Resimde görüldüğü dış tablomuzu yaptık.
En üste banner resmi koyacaz.Onun için yaptığımız tablonun en üstüne banner'lık bi tablo yapacağız.
Resimde görüldüğü gibi banner resmi ekleme işlemi yapılmaktadır.Banner boyutları 800 x 100 boyutlarında.Ona göre banner yapabilirsiniz..
Ve işte banner' ımız tablonun içine eklenmiş durumda
Şimdide dış tablomuzun içini renklendirelim.
Resimde görüldüğü gibi renk seçiyoruz...
Ve görüldüğü gibi tablomuzun içini renklendirdik.Ben gri rengi tercih ettim.
Siz hangi seçerseniz seçin.Zevkinize kalmış
Şimdide Tablomuzun sağ tarafına tablo yapalım.
Tablo yapmak için araçlarımızdan yine aynısına tıklıyoruz.
ve gelen pencereden;
Görüldüğü gibi saol tablomuzuda yerleştirmiş olduk.
Yapmış olduğumuz tablonun içine menü kutucukları koyalım.Menü kutucukları tablo ebatları;
satırlar:1
sütunlar:1
Kenar kalınlığı:1
Genişlik:210
Kaç tane sayfamız olacaksa o kadar menü tablosu ekliyoruz ve içlerine sayfa yazılarını ekliyoruz.
Sayfa Linki Yazdığım yeri seçiyorum ve Köprü ekle aracına tıklıyorum.Sonrası resimde görüldüğü gibi..
Tamam'a tıkladığımız anda köprü eklenmiş demektir.Ancak Yazının rengi gördüğünüz gibi koyu mavi oldu.Bunu tekrar eski haline yani siyah yapmak için;
Hepsine bu şekilde sayfasına göre link (köprü ekleyin).
Tasarım olarak biraz bilgi öğretmeye çalıştım.Genel olarak bu verdiğim bilgilere dayanarak kafanızda tasarladığınız tasarımlar yaratabilirsiniz.
Son bi kaç bilgi vereceğim..Daha önce menü gizleme kodu vermiştim.Onu bi yere daha yapıştıracağız.Bu kodu resimdeki yere yapıştırmazsak sitemiz görünmez haberiniz olsun...
Css Design Menü Gizleme Kodu:
| Kod: |
| <style type="text/css"> <!-- td.nav {visibility:hidden;} --> </style> |
Tekrar "Kaynak" aracına tıklayarak Ctrl + A yapıyoruz.Yani kodlarımızın hepsini seçiyoruz ve kopyalıyoruz..
Bu kopyaladığımız kodu bütün sayfalara yapıştırıyoruz.Yapıştırıyoruz derken direk yapıştırmayın.Öncelikle "Kaynak"aracına tıklayıp sonra yapıştırıyoruz..
Görüldüğü gibi bütün sayfalara yapıştırıyorum..
Tasarladığımız sitenin içeriklerini her sayfanın kendisine göre dolduruyoruz.
Css Design Tasarımında işimize yarayacak bazı kodlar.(Burası fenercafe mod'un konusundan alıntıdır.)
menü gizleme kodu :
| Kod: |
| <style type="text/css"> <!-- td.nav {visibility:hidden;} --> </style> |
site ortalama kodu
| Kod: |
| <style type="text/css"> <!-- html, body { text-align: center; } --> </style> |
arkaplan yapma kodu :
| Kod: |
| <style type="text/css"> <!-- body{background-image:url(RESMİN URL'Sİ BURAYA YAZILACAK);background-attachment: fixed} --> </style> |
kaydırma çubuğu ( sayfa içeriğinin tabloyu bozmasını istemiyorsanız kullanın)
| Kod: |
| <div style="overflow: auto; width: 300px; height: 200px">yazı buraya</div> |
sayaç vs. gibi ekstraların yazı boyutunu küçültme kodu
| Kod: |
| <font color="#ffffff"><font face="Comic Sans MS" size=2> |
gerekli yerleri kendinize göre değiştiriniz...
text menü kodu
| Kod: |
| <!-- begin class menu --> <div class="menu"> <ul> <li><a href="siteadı.tr.gg">sayfanızın adı</a></li> </ul> </div> <!-- end class menu --> |
köprü eklediğiniz yazıların altının çizilmemesi için
| Kod: |
| <style> <!-- A{text-decoration:none} --> </style> |
Mozilla ve İE vs. site ortalamak için
tasarımın üzerine
| Kod: |
| <div align="center"><table border="0" width="70%"><tr><td> |
tasarımın altına
| Kod: |
| </td></tr></table></div> |
Örnek olarak vermiş olduğumuz Css Design Tasarımının kodunu vermiyorum.
Benim amacım Balık Vermek Değil, Balık Tutmayı Öğretmek
Herkese Kolay gelsin...
CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)
Anlatım: photoshopar.tr.gg - fatihparıldar
Öncelikle resimde görüldüğü gibi Css Design Tasarımını seçiyoruz.
Css Design tasarımında menü gizleme kodunu eklememiz gereklidir.
Menü gizleme kodunu Navigasyonun baslığı: kutucuğuna yapıştırıyoruz. Ardından Kaydet diyoruz
Css Design Menü Gizleme Kodu:
| Kod: |
| <style type="text/css"> <!-- td.nav {visibility:hidden;} --> </style> |
"Ayarlar" sayfasına gelerek site başlığını yok etmeliyiz.Bunu ise site başlığı: Yazının karşısındaki kutucuğa bir kez tıklayıp ardından space (boşluk) tuşuna basıyoruz ve Kaydet diyoruz.
Sayfalarımı değiştir / Yeni sayfa diyoruz.
Aşağıda görüldüğü gibi araçlarımız gösteriliyor.
Tasarımımızın bir tablo içerisinde olması için aşağıdaki yolu izliyoruz.
Resimde görüldüğü dış tablomuzu yaptık.
En üste banner resmi koyacaz.Onun için yaptığımız tablonun en üstüne banner'lık bi tablo yapacağız.
Resimde görüldüğü gibi banner resmi ekleme işlemi yapılmaktadır.Banner boyutları 800 x 100 boyutlarında.Ona göre banner yapabilirsiniz..
Ve işte banner' ımız tablonun içine eklenmiş durumda
Şimdide dış tablomuzun içini renklendirelim.
Resimde görüldüğü gibi renk seçiyoruz...
Ve görüldüğü gibi tablomuzun içini renklendirdik.Ben gri rengi tercih ettim.
Siz hangi seçerseniz seçin.Zevkinize kalmış
Şimdide Tablomuzun sağ tarafına tablo yapalım.
Tablo yapmak için araçlarımızdan yine aynısına tıklıyoruz.
ve gelen pencereden;
Görüldüğü gibi saol tablomuzuda yerleştirmiş olduk.
Yapmış olduğumuz tablonun içine menü kutucukları koyalım.Menü kutucukları tablo ebatları;
satırlar:1
sütunlar:1
Kenar kalınlığı:1
Genişlik:210
Kaç tane sayfamız olacaksa o kadar menü tablosu ekliyoruz ve içlerine sayfa yazılarını ekliyoruz.
Sayfa Linki Yazdığım yeri seçiyorum ve Köprü ekle aracına tıklıyorum.Sonrası resimde görüldüğü gibi..
Tamam'a tıkladığımız anda köprü eklenmiş demektir.Ancak Yazının rengi gördüğünüz gibi koyu mavi oldu.Bunu tekrar eski haline yani siyah yapmak için;
Hepsine bu şekilde sayfasına göre link (köprü ekleyin).
Tasarım olarak biraz bilgi öğretmeye çalıştım.Genel olarak bu verdiğim bilgilere dayanarak kafanızda tasarladığınız tasarımlar yaratabilirsiniz.
Son bi kaç bilgi vereceğim..Daha önce menü gizleme kodu vermiştim.Onu bi yere daha yapıştıracağız.Bu kodu resimdeki yere yapıştırmazsak sitemiz görünmez haberiniz olsun...
Css Design Menü Gizleme Kodu:
| Kod: |
| <style type="text/css"> <!-- td.nav {visibility:hidden;} --> </style> |
Tekrar "Kaynak" aracına tıklayarak Ctrl + A yapıyoruz.Yani kodlarımızın hepsini seçiyoruz ve kopyalıyoruz..
Bu kopyaladığımız kodu bütün sayfalara yapıştırıyoruz.Yapıştırıyoruz derken direk yapıştırmayın.Öncelikle "Kaynak"aracına tıklayıp sonra yapıştırıyoruz..
Görüldüğü gibi bütün sayfalara yapıştırıyorum..
Tasarladığımız sitenin içeriklerini her sayfanın kendisine göre dolduruyoruz.
Css Design Tasarımında işimize yarayacak bazı kodlar.(Burası fenercafe mod'un konusundan alıntıdır.)
menü gizleme kodu :
| Kod: |
| <style type="text/css"> <!-- td.nav {visibility:hidden;} --> </style> |
site ortalama kodu
| Kod: |
| <style type="text/css"> <!-- html, body { text-align: center; } --> </style> |
arkaplan yapma kodu :
| Kod: |
| <style type="text/css"> <!-- body{background-image:url(RESMİN URL'Sİ BURAYA YAZILACAK);background-attachment: fixed} --> </style> |
kaydırma çubuğu ( sayfa içeriğinin tabloyu bozmasını istemiyorsanız kullanın)
| Kod: |
| <div style="overflow: auto; width: 300px; height: 200px">yazı buraya</div> |
sayaç vs. gibi ekstraların yazı boyutunu küçültme kodu
| Kod: |
| <font color="#ffffff"><font face="Comic Sans MS" size=2> |
gerekli yerleri kendinize göre değiştiriniz...
text menü kodu
| Kod: |
| <!-- begin class menu --> <div class="menu"> <ul> <li><a href="siteadı.tr.gg">sayfanızın adı</a></li> </ul> </div> <!-- end class menu --> |
köprü eklediğiniz yazıların altının çizilmemesi için
| Kod: |
| <style> <!-- A{text-decoration:none} --> </style> |
Mozilla ve İE vs. site ortalamak için
tasarımın üzerine
| Kod: |
| <div align="center"><table border="0" width="70%"><tr><td> |
tasarımın altına
| Kod: |
| </td></tr></table></div> |
Web tasarım dersleri 1
Web tasarım
6 yorum
37 kez bakıldı
Tugay Tekeci
29 Mart 2012 / Perşembe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin auctor cursus velit, id rhoncus est lacinia ac. Maecenas ultricies laoreet malesuada. Duis vel sem lorem, eget ultrices diam. Curabitur et ipsum magna, id laoreet purus. Integer enim dui, viverra vel hendrerit nec, tempor vel massa. Praesent dignissim erat nec orci molestie sagittis. Suspendisse potenti. Donec ac justo ligula. Nullam et nulla quis tortor fringilla consequat dignissim varius odio. Nunc aliquam ante sed leo facilisis sit amet ornare diam molestie. Proin ut sem eu quam malesuada rhoncus. Nunc sollicitudin erat a tortor iaculis faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor rhoncus justo et iaculis.
Vivamus molestie, elit ut pharetra volutpat, nisi sapien varius nisl, iaculis ultrices purus leo quis velit. Donec elementum diam eu dolor volutpat vitae egestas urna accumsan. Nam id ante nisl. Fusce nunc justo, lobortis a scelerisque et, feugiat in lorem. Fusce eros orci, ullamcorper et sodales ac, auctor at odio. Aenean congue ipsum in magna dapibus placerat accumsan leo dictum. Donec nisl nisl, pharetra id pellentesque non, semper at elit. Donec vitae orci mi, eget pulvinar massa. Sed aliquet condimentum arcu vitae egestas. Morbi non libero sed urna scelerisque egestas. Vestibulum congue posuere dapibus.
Donec laoreet, orci vel suscipit tristique, purus tellus aliquam dui, in semper nisl urna vel ligula. Donec elit nunc, tempor eget egestas vitae, semper ac nunc. Duis blandit auctor condimentum. Mauris aliquet consequat purus et pulvinar. Cras vestibulum, tortor id porta placerat, urna ligula aliquet felis, sit amet placerat tortor urna vitae nunc. Etiam vitae placerat lectus. Integer dapibus magna eget lorem lobortis vehicula. In lacus justo, dapibus sit amet posuere vitae, luctus vel tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed quis tellus at lectus congue varius vel at est. Aliquam lacus justo, pellentesque bibendum volutpat non, laoreet sed nunc. Quisque eu massa turpis, non aliquet eros. Nam pharetra velit id ipsum volutpat molestie. Maecenas velit nibh, luctus nec malesuada eu, volutpat vitae tortor. Etiam eu ligula neque, a dignissim nibh. Proin sit amet velit sed turpis rutrum adipiscing. Fusce quis luctus sem. Praesent condimentum dapibus faucibus.
Bununla birlikte:
Sed adipiscing elit id nunc placerat tempor. Duis sit amet malesuada nisl. Fusce semper lacus et nulla ultricies tristique. Sed vel ipsum urna, et hendrerit nisl. Vestibulum at velit tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque sit amet nisl quis nunc ornare pretium. Nunc dignissim eros at augue porttitor bibendum. Fusce auctor ligula in felis consectetur suscipit. Praesent posuere erat at orci imperdiet vitae aliquam sapien sollicitudin. Mauris mattis semper ipsum, non rutrum ligula faucibus nec. Duis posuere nulla ut leo mollis et vulputate ante blandit.Vivamus molestie, elit ut pharetra volutpat, nisi sapien varius nisl, iaculis ultrices purus leo quis velit. Donec elementum diam eu dolor volutpat vitae egestas urna accumsan. Nam id ante nisl. Fusce nunc justo, lobortis a scelerisque et, feugiat in lorem. Fusce eros orci, ullamcorper et sodales ac, auctor at odio. Aenean congue ipsum in magna dapibus placerat accumsan leo dictum. Donec nisl nisl, pharetra id pellentesque non, semper at elit. Donec vitae orci mi, eget pulvinar massa. Sed aliquet condimentum arcu vitae egestas. Morbi non libero sed urna scelerisque egestas. Vestibulum congue posuere dapibus.
Donec laoreet, orci vel suscipit tristique, purus tellus aliquam dui, in semper nisl urna vel ligula. Donec elit nunc, tempor eget egestas vitae, semper ac nunc. Duis blandit auctor condimentum. Mauris aliquet consequat purus et pulvinar. Cras vestibulum, tortor id porta placerat, urna ligula aliquet felis, sit amet placerat tortor urna vitae nunc. Etiam vitae placerat lectus. Integer dapibus magna eget lorem lobortis vehicula. In lacus justo, dapibus sit amet posuere vitae, luctus vel tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed quis tellus at lectus congue varius vel at est. Aliquam lacus justo, pellentesque bibendum volutpat non, laoreet sed nunc. Quisque eu massa turpis, non aliquet eros. Nam pharetra velit id ipsum volutpat molestie. Maecenas velit nibh, luctus nec malesuada eu, volutpat vitae tortor. Etiam eu ligula neque, a dignissim nibh. Proin sit amet velit sed turpis rutrum adipiscing. Fusce quis luctus sem. Praesent condimentum dapibus faucibus.
Sed quis tellus at lectus congue varius vel at est. Aliquam lacus justo, pellentesque bibendum volutpat non, laoreet sed nunc. Quisque eu massa turpis, non aliquet eros. Nam pharetra velit id ipsum volutpat molestie. Maecenas velit nibh, luctus nec malesuada eu, volutpat vitae tortor. Etiam eu ligula neque, a dignissim nibh. Proin sit amet velit sed turpis rutrum adipiscing. Fusce quis luctus sem. Praesent condimentum dapibus faucibus.
Yorumlar (16)
"furkan" dediki:29 Mart 2012 / 21:49
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut eros eu justo accumsan dignissim et id nunc. Maecenas molestie mollis suscipit. Sed id nisi ipsum, et auctor ipsum. Integer justo mi, pellentesque ut volutpat vel, auctor sed dui. Nulla facilisi. Vivamus a tellus vitae purus egestas rutrum.
"ahmet" dediki:29 Mart 2012 / 20:36
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut eros eu justo accumsan dignissim et id nunc. Maecenas molestie mollis suscipit. Sed id nisi ipsum, et auctor ipsum. Integer justo mi, pellentesque ut volutpat vel, auctor sed dui. Nulla facilisi. Vivamus a tellus vitae purus egestas rutrum.
"kağan" dediki:28 Mart 2012 / 18:56
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut eros eu justo accumsan dignissim et id nunc. Maecenas molestie mollis suscipit. Sed id nisi ipsum, et auctor ipsum. Integer justo mi, pellentesque ut volutpat vel, auctor sed dui. Nulla facilisi. Vivamus a tellus vitae purus egestas rutrum.
Bugün 2081 ziyaretçikişi burdaydı!
