Dreamweaver ve CSS Kullanarak Sayfa Ara Yüz Tasarımı (Layout) Yapmak
Son dokunuşlar
Tasarımımızı ayağa kaldırdık sayılır. Şimdi birkaç püf nokta ve bazı temel bilgilerden bahsetmenin zamanı geldi. Şimdi içeriğin sayfada nasıl görüneceğini test etmek için "icerik" alanına birkaç paragraflık bir şeyler kopyalayıp yapıştırın ya da yazın. "anaMenu" içine temsili bir şeyler yazın. "ustAlan" içine de bir H1 başlığı ve onun altına slogan olacak bir şeyler yazın. "altAlan" a da bir şeyler yazmayı unutmayın. Amacımız tasarımı test etmek. Şimdi kaydedip tarayıcıdan kontrol edin.
Tasarımı test etmek için bir şeyler yazıyoruz
Şimdi dikkatinizi çekecek bazı noktalar olmalı. Bunlardan biri "icerik" içerisindeki yazıların kenarlara çok yakın olduğu, ayrıca başlığında standart biçimde pek hoş görünmediği olabilir. "ustAlan" içerisindeki başlığın bir kısmının dışarı taşması ve sloganın başlığa çok uzak olması da diğer sorunlar olarak göze çarpabilir. Şimdi bu sorunları nasıl çözeceğimize deyinelim.
Öncelikle "ustAlan" içerisindeki başlığı biraz biçimlendirip göze hoş görünür bir hal almasını sağlayalım. CSS Styles panelinden "New..." menüsü ile yeni bir stil tanımlamaya başlıyoruz. "Selecto Type" olarak "Advanced (IDs, pseudo class selectors)" seçeneğini seçip, "Selector" olarak "#sayfa #ustAlan h1" yazıyoruz.
ustAlan için başlık tanımlaması yapıyoruz
Başlık için stil özellikleri şu şekilde;
- Type
- Font: Georgia, Times, serif
- Size: 30 pixels
- Weight: Bold
- Color: #FFFFFF
- Box
- Padding: 0 pixels
- Top: 10 pixels
- Right: 0 pixels
- Bottom: 20 pixels
- Left: 0 pixels
- Margin:
- Top: 15 pixels
- Right: 0 pixels
- Bottom: 0 pixels
- Left: 25 pixels
- Positioning
- Type: Absolute
Şimdide sloganı biçimlendirelim. "#sayfa #ustAlan p" için stil özellikleri
- Type
- Font: Georgia, Times, serif
- Size: 11 pixels
- Weight: Bold
- Color: #FFBD91
- Box
- Padding: 0 pixels
- Margin:
- Top: 50 pixels
- Right: 0 pixels
- Bottom: 0 pixels
- Left: 115 pixels
- Positioning
- Type: Absolute
Üst kısmın biçimlendirmesi bitti gibi. Şimdide "icerik" ile ilgilenmeye başlayalım. Yeni bir stil yaratıyoruz. "Selector" olarak "#sayfa #icerik h1" yazıyoruz. İçeriğin başlığı için stil özellikleri şu şekilde;
- Type
- Font: Arial, Helvetica, sans-serif
- Size: 24 pixels
- Weight: Bold
- Color: #2981AF
- Box
- Padding:
- Top: 10 pixels
- Right: 0 pixels
- Bottom: 10 pixels
- Left: 0 pixels
- Margin: 5 pixels
- Border
- Bottom: Solid, 1 pixels, #2981AF
Şimdide paragrafları biçimlendirelim. "#sayfa #icerik p" için stil özellikleri;
- Box
- Padding: 5 pixels
- Margin: 0 pixels
Böylece içeriğin kenarlara çok yakın olmasını engellemiş olduk. Tabi bu sadece "icerik" içindeki paragraflar için geçerli. Aynı şekilde her eleman için "padding" ve "margin" ayarlamaları yaparak düzgün görünümlü içerikler elde edebilirsiniz.
Son olarak "altAlan" a göze daha hoş görünmesi için geçişli (gradient) bir arka fon resmi ekliyoruz. Stil özelliklerinde şu değişikliği yapmalısınız.
- Background
- Background-image: images/altAlan_bg.gif
- Repeat: repeat-x
Sonucu görmek için tüm belgeleri kaydedip tarayıcıdan kontrol edebilirsiniz.
Tasarımın son halinin tarayıcıdaki görünümü
Böylelikle CSS biçimlendirmenin gücünü kullanarak nasıl bir site ara yüz tasarımı yapabileceğimizi ve bunu geliştirebileceğimizi görmüş olduk. Bu örneğimizde iki sütunlu tasarımlar üzerinde durduk. Bu yaklaşımdan yola çıkarak 3 sütunlu tasarımların nasıl yapıldığını kendiniz de bulabilirsiniz fakat ipucu olarak şunu belirtmekte fayda var. Bu tür 2 den fazla sütunlu tasarımlarda bileşenleri kendi aralarında ikili gruplara ayırarak sağ ve sol "Float" özelliklerini kullanabilirsiniz.
3 sütunlu tasarımın şematik görünümü
Ilgili makaleler
- Dreamweaver ve CSS stiller (CSS Styles)
- Yeni Bir CSS Stil Yaratmak ve CSS Stil Türleri
- Web Standartlarını Kullanarak Geliştirmek
- Web Sayfaları İçin Doğru Doküman Türü (DOCTYPE) Tanımlaması Yapmak
- CSS Dersleri
- Web Standartlarını Öğrenmek ve Kullanmak için 10 Sebep
- Doğru XHTML Kullanımı
Son eklenenler
Bölüm 4 - Fancybox ile Resim Galerisi Oluşturma (109) - 31 Ağus 2010 Sal 01:06:40
Bölüm 3 - Resimleri Kategorilerine Göre Listeleme (61) - 31 Ağus 2010 Sal 01:05:12
Bölüm 2 - Upload And Resize Image With Developer ... (61) - 31 Ağus 2010 Sal 01:03:46
Bölüm 1 - Tablosuz Tasarım ( Div ) (139) - 31 Ağus 2010 Sal 01:02:06
Adobe Developer Toolbox CS4 ve Duyuru Sayfası (57) - 31 Ağus 2010 Sal 00:59:19
Makale içeriği
Yazan
 |
Orhan Veli Firik |
| Orhan | |
 |
Eklenme tarihi |
| 13 Haziran 2007 Çarşamba 12:17:27 | |
 |
Puan ver |
  Ortalama: 4.67 |
Arama
Eklentiler (extensions)
Sitemizden indirdiğiniz eklentileri nasıl yükleyeceğinizi ve kullanacağınızı bilmiyorsanız bu makaleden başlayabilirsiniz. Genel olarak Dreamweaver eklentileri üzerine kısa bir yazı buyrun...
ana sayfa | makaleler | dosyalar | forum | kitaplar | linkler | reklam | iletişim | Prefabrik | oyun oyna | Borsa | canli imkb | mirc indir | Nakliyat ankara | ankara nakliyat | ankara web tasarım| imkb canli |
dw.gen.tr © 2010 Tüm hakları saklıdır ®
Yorumlar
Öncelikle çok teşekkür ederim. Çok yararlı bir kaynak benim için. Takıldığım bir yer var aşamadım onu sormak istedim. Söylediklerinizi adım adım yaptım fakat #sayfa #ustAlan h1 ve #sayfa #ustAlan p stil özelliklerini ayarlamaya çalıştığımda "sitemizin başlığı" ve "slogan" layer alakasız bir yerde çıkıyor ve müdahale edemiyorum. Sebebini çok merak ettim. Yardımcı olursanız sevinirim. Nerde yanlış yapıyo olabilirim.
sorunun tam olarak ne olduğunu buradan soylemek zor. foruma ilgili sorun için bir başlık açıp ornek dosyaları gonderiren oradan yorum yapabiliriz.
Öncelikle teşekkürler.Bazı sorunlar çıktı hallettim
ben aşağdaki gibi takları sıraladım düzeldi
Panoya kopyala
cok teşekkürler neredeyse çağ atladım
çok teşekkürler.iki sorum var müsadenizle.
1)bunları DW de CS'te yada 8 layout ile AP elements ile çizip sonra ayarlasakta olur di mi?aynı kapıya çıkıyo yani.
2)üstalan daki h1 başlığın position ayarıyla oynayana kadar firefoxta üstte boşluk çıkıyordu.relative yapınca düzeldi fakat absolutte aynı kalıyor.orası niye öyle onu anlamadım.turuncu alanı direk yukarı yapıştıramaz mıyız?niye başlığa bağlı?nasıl yapabiliriz olursa?
şimdi AP elementlerle yapmak tam olarak istediğimiz sonucu vermeyebilir. Zira mutlak konumlandırmada genelde çözünürlüğe bağlı kaymalar olabiliyor. Konumlama ve biçimlendirmeleri bu şekilde yapmak tasarımı kontrol altına almak açısından daha uygundur.
2. soruyu tam anlayamadım. Zaten turuncu alanın üst kısma bitişik olması gerekiyor. Eğer kasteddiğin başlığın yukarıya yapışık olması ise H1 için positioning değerlerindeki Top değeri ile oynamalısın.
birturlu alt alan ust alan icerik ...vs bu bolumlerı anlatıldıgı şekilde ayıramadım.hepsi içiçe giriyor.sanırım en başta sayfa div i acıp içerisine diger divleri oluşturmada yanlış birşey yapıyorum.tekrar denicem
geç oldu ama oldu sonucta ,yaptım
bir güzel haberde yağmur yağıyor aman allahım ben ne mutlu oldum geceyarısı 
teşekkürler, hayırlı çalışmalar...
Orhan ikinci soru;
4. sayfada #sayfa #UstAlan h1 e sınıf atarken... absolute kullanmadan önce sayfa üstten 10 px gibi boşluk vardı.h1 e absolute verince üste yapıştı.niye öyle oldu anlamadım.bende mi sorun öyle mi olması gerekiyordu.alala.yani bi h1 e absolute verince niye tüm sayfa yapısı değişti anlamadım
sanırım önceki adımlarda birşeyi eksik yaptın. Üst div lerin positioning bilgisinin relative olması gerekiyordu.
Eğer herşeye rrağmen hala düzelmiyorsa Psitioning değerini relative yap float:left de sonra margin ve padding lerle oyna. 3 aşağı 5 yukarı aynı şeyi yaparsın
arkadaşlar ben bu konularda çok yeniyim bi sorum olcak:ben bu tasarımı yaptım ve #anamenu div'indeki haberler yazısına bir link vermek istiyorum.haberlaer yazısın basınca "resim.jpg" isimli resimin #içerik div'inde görüntülenmesini istiyorum. linkin target bölümünde icerik bölümünü seçebileceğim bir seçenek çıkmıyor bunu nasıl yapabilirim yardımcı olabilirmisiniz.
bir sorum olacak belki saçma oolacak ama benm su anda bunu öğrenmeye cok ıhtıyacım var;; Sayfayı 800*300 de bıle tam açmak için 790 px demıssınız; peki yatay sayfa kullanımında bu kac oluyor?
yatay sayfa ile tam olarak neyi kasteddiğini çıkaramadım biraz daha açıklayıcı olursan soruna yanıt verebileyim.
Not: sorular için forumu kullanırsak daha rahat olur.
hocam forumda yeni başlık açamadım, buradan cevaplarsanız sevinirim.
aynı satırda ikiden fazla "div" i nasıl barındırabilirim?
bu divler için CSS kuralı tanımlarsın. Birinin float:left diğerini float:right yaparsın böylece biri bir tarafa diğeri diğer tarafa hizalanır. Yada ikisini de flot:left yaparsan peş peşe hizalanır.
Toplam 27 adet yorum mevcut «« « 1 2 » »»
Yorum ekleyebilmek için öncelikle üye girişi yapmanız gerekmektedir