Dreamweaver Ve CSS Kullanarak Sayfa Ara Yüz Tasarımı (Layout) Yapmak

18.12.
2010 Dreamweaver ve CSS Kullanarak Sayfa …
Dreamweaver ve CSS Kullanarak Sayfa Ara Yüz Tasarımı (Layout) Yapmak

Dreamweaver'ın bizlere sunduğu güçlü tasarım ortamını kullanarak modern standartlara uygun, geçerli ve tarayıcılar
tarafından kolay çözümlenebilen şık sayfalar tasarlamanın temellerini bu makalede inceleyeceğiz.
Doküma nla r Ana Sa y fa s ı / Dre a mw ea v e r / Dre amw e a v er 8
Bu doküman toplam 5 sayfadan oluşmaktadır. Gösterilen 1/5
www.likno.c om Google Reklamları
Çok değil bi rkaç yı l önce s ayfa t as arı ml arı mız ı yaparke n ara yüz bil eş enl eri ni t abl olar kul lanarak görünmez
ı z garal ar üzerine inş a ederdik. Bu durum; HTML yapı di li ni n web t asarımcıl arı t arafından hat alı yoruml anmas ının
ve kull anı lması nın bir s onucu i di. Tarayıcıl ar aras ı çekiş mel eri n ve tüm Internet alı ş kanl ıkl arı mı zı et kil eyen
t arayı cı s avaş l arı nı n bi r s onucu olarak ortaya çı kmış t ı. Fakat Web 2.0 kavramı nı n gündeme geldi ği şu günlerde
art ık es ki t as arı m al ış kanlı klarını bi r kenara bı rakı p modern t as arı m ve web teknoloj il eri ne cevap verecek web
s ayfaları tas arlamanı n vakti gel di de geçiyor bi le.
Modern t as arı m s üreçlerini n baz ı yaptı rı ml arı vardır. As lı nda bunlara "yaptı rı m" demek ne kadar doğru
bi lemiyorum ama geçerl i bir s ayfa yapmak i çin bunl ara dikkat et memi z gereki yor. Makal eyi okuyan bi rçok
arkadaş içi n s ı kı cı bir konu ol s a da bu hus usl arı iş in baş ından el e al arak i leride yaşanacak muht emel hat aları
el imine edebi li rs i niz .
Bunl ardan baz ı ları ş u ş ekil de s ı ral anabi li r.
1. Sayfal ar doğru doküman t ürü tanı ml amas ına (DO CT YPE) s ahip olmal ıl ar
2. Sayfa t as arım bi leş enleri tabl o hücrel eri yerine DIV'ler i çeri s ine yerleş t iril erek konumlandırma ve hiz al amalar
t amamı yla CSS i le ve "CSS kutu modeli" (CSS Box Model ) göz önüne al ınarak yapıl mal ı.
3. Kul lanıl an HTML (ve ya XHTML) ve CSS kodl arı geçerl i ve W 3C s t andart larına uygun olmal ı ve geçerl eme
mot orlarından (vali dator) hatas ı z ol arak geçebil mel i.
Doğru DOCTYPE
İl k madde olan doğru "DOCTY PE" bi lgi si nin s eçi lmesi konus una ilgili makalede ( http://ww w.dw .gen.tr/?
mo dule=articles&page=detail&id=249) ol dukça ayrınt ıl ı bir biçimde deyinmi ş ti k. Genel bir öz et ol arak şunl arı
bel irt mekte fayda var; eğer s pes ifik ol arak XHTML'e iht iyaç duymuyorsanı z (s ayf anız XML veris i i çermi yors a) ve
s t andart ol arak bir HTML s ayf as ı t as arlı yors anız , baş ka bi r deyiml e amacı nız sayfanız ı anlaş ı labil ir bir bi çi mde
kul lanı cı lara s unmak is e kul lanmanı z gereken doküman t ürü "HT ML 4.01 Strict" t anıml amas ıdı r.
Doğru "DOCTY PE" t anımlamas ı s ayfa t asarımlarımız da t arayı cı lar aras ı kayma ve farklı görünüm s orunl arı nın
aş ı lmas ı açı sı ndan en önemli aş amal ardan bi ri dir. Eğer doküman t ürü doğru t anı ml anmaz i s e s aft a tarayı cı
t arafı ndan hatal ı olarak, "Garip Mod" (Q uirks Mod) adı veri len bir durumda yoruml anacak bu durum da
s ayfamız ı n hat alı görünmes ine s ebep ol acakt ı r.
CSS Kutu modeli (BOX model)

CSS2 il e s ı kça konuş ul ur olan bu CSS kut u model i, s ayfadaki t üm içerik al anlarını bi rer kut u gi bi değerlendi ri r
ve boyut l andı rma ve konuml andırma iş lemini öz el bir al gori t ma i le algı lar. Burada s öz ü geçen "kutular"
i çeri ğimi z i yerl eşt i rdi ğimi z HTML bil eş enl eri ni ifade et mekt edi r. (Ö rneğin DIV, tabl o, baş lı k ve/veya paragraflar)
Eğer bi r dokümanın "DO CTY PE" bil gi s i doğru bir bi çi mde tanı ml anmış is e modern tarayıcıl ar "Standart Mod" il e
çal ış ıp bu i çeri k alanı bi leş enlerini n boyut larını hes aplarke n ş öyl e bi r yol iz l er;
Bi r obj eni n (kutunun) t üm geniş li ği; içeri k (content area) + çerçeve kalı nlı ğı (border) + kenar boşl uları
(padding) değerlerini n t oplamı na eş it t ir. Y ani CSS'de "wi dt h: 300px" ol arak beli rt il en bi r DIV et iket ini n
geni ş li ği sadece i çeri k alanı nın (cont ent area) bel irti r. Eğer bu DIV et iket ini n çerçeve kal ınl ığı 1 piks el ve
i çeri ğin DIV s ını rl arı na ol an uz aklı k bil gis i (padding) de 10 piks el i se bu DIV eti ket i nin topl am kapl adı ğı alan:
s ol çerçeve+s ol boş luk+i çerik+s ağ boş l uk+sağ çerçeve
1+10+300+10+1=322 piks eldi r.
www.dw.gen.tr/?module=articles&page… 1/3
18.12.2010 Dreamweaver ve CSS Kullanarak Sayfa …
( http: //w ww.dw.gen.tr/? mo dule=site&page=img_sho w&id=654)

CS S kutu mo deli ş ematik gö rnümü
Modern t arayı cıl ar Standart mod i le çal ış ı rken bunu algı layıp yaptı ğını z biçi ml endi rmeleri buna göre
yoruml arl arken, diğer t araft an Garip mod il e çal ış ırken es ki t arayıcı lar gi bi yoruml arl ar. Es ki t arayıcı larda i se
bu 300 pi ks el li k geniş l ik DIV et iketi nin t opl am geni ş li ğini bi ldi ri r ve i çeriği n geni şl iği , kenar boşl uları ve
çerçeve geni ş li ği bu değerden çıkt ıkt an s onra kal an değere (300-22=278 pikse l) eş it t ir.
CSS kutu modeli hakkında daha det ayl ı bil gi içi n;
http://ww w.unbf.ca/altiustu/arsiv/2005/02/kutucuk_modeli.php
( http://w ww.unbf.ca/altiustu/arsiv/2005/02/kutucuk_mo deli.php)
http://ww w.fatihhayrioglu.com/?p=13 (http: //www.fatihhayrio glu.co m/? p=13)
http://ww w.yakuter.com/cssin-temeli-kutu-modeli ( http: //www.yakuter.com/cssin- temeli- kutu- mo deli)
http://ww w.godoro.com/Divisions/Ehil/...BoxModel.html
( http://w ww.go do ro .co m/ Divisio ns/E hil/ Mahzen/W eb/W ebPro gramming/txt/html/ do cument_StyleSheetBo xMo del.html)
Geçerli kodlar
Bu konu, s ayfalarımız ın t arayıcı lar t arafından daha kolay ve doğru yoruml anmas ı ve yaptı ğımız hat aları daha
kol ay algı layı p müdahal e et memi z i sağl amas ı açıs ından oldukça öneml i bir yere s ahipt ir. W eb t asarımı il e
i lgi lenmeye başl ayan bi rçok kull anıcı yaş adığı bas it s orunların neden kaynakl andı ğını , s ayf alarını geçerl i hale
get irmeye çal ış ı rken görebil irler.
Ö rneğin bir et i ke t i (HTML t ag) kull anıl mamas ı gereken bir yerde kull anıl dığında bu s t andart lara uygun ol mayan
bi r s ayfadı r ve muht emel en t arayıcı t arafından hat al ı yoruml anmaya s ebep ol an bir durumdur. Acemi kull anıcı
bu geçerli li k kuralı nı sayfas ına uygul adı ğında yaş adı ğı sorunu da hal let mi ş ol acakt ır. Bu geçerli li k kural ları web
gel iş t irici lerin iş lerini kol ayl aş tı rmak ve s t andart bi r kod yapıs ı i le uyumlul uğu artt ırmak amacı il e
konmuş l ardı r. Neden s ayfalarımız ı geçerl ememi z gerekt iği ve bunun içi n yapabil ecekl eri miz hakkı nda daha
det aylı bi lgi yi Roger Johansson'ın "Web Standartlarını Kullanarak Geliştirmek
( http: //www.456bereastreet.co m/ lab/develo ping_with_w eb_standards/tr/) " baş lı kl ı nefi s makal es inden
al abil irs ini z.
Sayfalarımı z ın s tandartl ara uygun olup olmadı ğını W 3C (web komi s yonu) geçerleme motorundan
( http: //validato r.w3.o rg/) kontrol ett i rebil ir hat al arı mız ı daha yakı ndan görebi li ri z .
Evet , biraz uz un bi r giri ş oldu fakat yeni bir sayfa yapmaya baş l amadan önce bunl arı göz önünde
bul undurmamız gerekmektedi r. Şi mdi uygulamaya geçebi li ri z .
Google Reklamları CSS Div Layouts Div 1 Norra Max Div Junior Div
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 (1441) - 31 Ağus 2010 Sal 01:06:40
Bölüm 3 - Resimleri Kategorilerine Göre Listeleme (1644) - 31 Ağus 2010 Sal 01:05:12
Bölüm 2 - Upload And Resize Image With Developer ... (849) - 31 Ağus 2010 Sal 01:03:46
Bölüm 1 - Tablosuz Tasarım ( Div ) (2060) - 31 Ağus 2010 Sal 01:02:06
Adobe Developer Toolbox CS4 ve Duyuru Sayfası (822) - 31 Ağus 2010 Sal 00:59:19
ana sayfa | makaleler | dosyalar | forum | kitaplar | linkler | reklam |

iletişim | oyun oyna | borsa | c anli imkb | nakliyat ankara | ankara
web tasarım | imkb c anli | hisse senetleri | estetik | c anlı borsa |
müzik keyfi | süper oyunlar oyna | tüm araba oyunları | Film indir
dw.gen.tr © 2010 Tüm hakları saklıdır ®
Dreamweaver ve CSS Kullanarak Sayfa Ara Yüz

Tasarımı (Layout) Yapmak
Dokümanlar Ana Say f as ı / Dreamw eav er / Dreamw eav er 8
Dreamweaver ile Sayfa Ara Yüz

(Layout) Tasarımı
Sayfamı zı n t as arı mı nı yaparken tablol ar yeri ne CSS ve DIV
kul l anacağı mı z ı bel i rt mi şt i k. Bi rçok yeni başl ayan kul lanı cı nı n
yaş adı ğı en büyük handi kapl ardan bi ri ol an tasarı mda i st eni l en
objeni n i st eni l en yere yerl eş ti ri l ememesi ve hi zal anamaması
sorununu aşmak i çi n CSS kul l anacağı z. Tabi bunun i çi n en azı ndan
temel CSS bi l gi s i ne i hti yacı mı z var. Bu makal ede CSS bi l gi si ne gi ri p
konuyu fazl a dağı tmak i stemi yorum. Genel ol arak temel nokt al ara
deyi neceği m. Fakat burada bahsi geçen uygul amal arı
anl ayabi l meni z i çi n i l gi l i CSS kaynakl arı ndan kendi ni zi
gel i şt i rmeni zi şi ddetl e t avsi ye edeceği m. Aksi takdi rde s öz
et ti ği mi z şeyl er havada kal acaktı r.
İçi ni zde CSS Zen Garden'ı (ZG) göre nl eri ni z ol muşt ur. ZG bi rçok web
gel i şt i ri ci n i lham kaynağı ol muş ve CSS'i n sadece meti nl eri
bi çi ml endi ri p rollover text-linkler ( http:/ /www.dw.gen.tr/?
mo dule=articles&page=detail&id=222) yapmakt an öte t ek başı na bi r
web sayfası nı başt an aşağı CSS i l e bi çi ml endi ri lebi l eceği ni bi zl ere
göst ermi şt i r. İncel edi ği ni z de fark edeceği ni z üzere ZG'daki büt ün
tasarı ml arı n HTML kaynak kodl arı aynı ol up deği şen tek ş ey sayfaya
bağl ı ol an ".cs s" dosyas ıdı r. Söz gel i mi "bu
(http: // www.csszengarden.co m/?cssfile=/ 036/036.css&page=0) "
sayfa i l e "şu ( http:/ / www.csszengarden.com/ ?
cssfile=/ 101/101.css&page=0) " sayfanı n kanyak kodl arı na
bakars anı z bi rebi r aynı ol dukl arı nı göre bi l irsi ni z :) Ol dukça
et ki l eyi ci deği l mi ?
Bi z de sayfamı z ı t asarl arken CSS'i n bu güçl ü özel l i kl eri nden

faydal anacağı z. Bu makal ede haz ı rl ayacağı mı z örnek tasarı m 2 veya
3 s üt unl u st andart bl og ve port al l erde göre bi l eceği ni z sayfa
düzeni di r. Fatih Harioğlu'nun s ayfas ı ndaki bahsi geçen makaleyi
(http: // www.fatihhayrio glu.co m/? p=173) t emel al arak anl atı ma
devam edeceği m. Tasarı mı n aşağı da görül düğü üzere sabi t
geni ş l ikte bi r dı ş çerçeve (#sayfa), başl ı k böl ümü (#us tAl an), sol
süt un (#anaMenu), i çeri k s üt unu (#i ceri k) ve al t kı sı mdan
(#al t Al an) oluşmakt adı r.
( http:/ /www.dw.gen.tr/?
module=site&page=img_sho w&id=724)
2 s ütunlu ve s abit geniş likli genel s ayfa t as arımının ş ematik gö rünümü
Sayfanı n bi t mi ş hal i ni görmek i çi n buraya

(http: // www.dw.gen.tr/ samples/ csslayo ut/tasarim.html) i ndirmek
içi n i s e buraya ( http: // www.dw.gen.tr/ ?
mo dule=files&page=detail&id=295) tı kl ayı nı z.
Şimdi DW 'da File / New menüs ü i l e yeni bi r HTML dokümanı açı n.

Y eni dokümanı açarken "Document T ype (DT D)" ol arak "HT ML
4.01 Strict" s eçi l i ol duğuna di kkat edi n. Dokümanı ol uş turup uygun
bi r konuma kaydedi n.
Yeni bir HTML do kümanı o luş turuyo ruz
Şimdi sayfaya, tüm t asarı mı kapsayı p ve toparl ayan çerçeve ol an

"sayfa" i s i ml i bi r DIV ekl i yoruz. Bunun i çi n "Insert" panel deki
"Layout" sekmesi al tı nda yer al an "Insert Div T ag" düğmesi ni ya
da Insert / Layout Objects / Div T ag menüs ünü kull anabi l i rs i ni z.
Sayfaya bir DIV ekliyo ruz
Açı l an i l et i şi m pencere si nden "ID" kı smı na "sayfa" yazı yoruz.

"Class" bi l gi s i ni şi mdi l i k boş bı rakı yoruz . Bi razdan t üm DIV'l er i çi n
sti l tanı ml amal arı nı toplu ol arak yapacağı z.
DIV ekleme ilet iş im penceres i
Şimdi ekl edi ği mi z "sayfa" i si ml i DIV et i keti ni n i çi ne sı rayl a

"ust Al an", "anaMenu", "iceri k" ve "al tAl an" i s i ml i 4 t ane daha DIV
ekl i yoruz. Sayfanı n DW i çers i ndeki son hal i şuna benzemel idi r;
S ayfanın s o n halinin DW içeris in deki gö rünümü
"sayfa" DIV'i ni n i çeri si ne di ğer DIV'l eri ekl erken kol ayl ı k ol ması
açı sı ndan "sayfa" içeri s i nde "Content for id "sayfa" Goes Here"
yaz ı sı nı seçi p bi r defa ENT ER (Return) tuşuna bas arak yeni bi r
paragraf ol uşt urabi l i rs i ni z. Büt ün DIV'l eri ekl edi kt en sonra sondaki
veya aral ardaki fazl a paragrafları si l meyi unut mayı n.
Gördüğünüz gi bi s ayfa ana i skel et i bu şeki l de ol acak. Hangi DIV'in

nası l boyut l andı rı l ı p hi z al anacağı nı i se CSS i l e bel i rteceği z.
Ilgili makaleler

CSS tanımlamaları
Sayfaya herhangi bi r müdahal e yapmadan "C SS Styles" panel i ni
eğer açı k deği l se W i ndow / CSS Styles menüsü veya Shift+F11 tuş
kombi nas yonu i l e açı yor ve sağ üs t köş edeki sembol e t ı kl ayı p açı l an
menüden "New..." seçeneği ne tı kl ı yoruz .
(http: // www.dw.gen.tr/ ?
Y eni bir s til tanımlamaya baş lıyo ruz
Açı l an i l et i şi m pencere si nden "Selector type" kı smı ndan "T ag

(redefines the look of a spesific tag)" seçeneği ni seçi yor, "T ag"
kı smı ndan "body" et i keti ni bul uyor ve "Define in" bölümünden de
"New Style Sheet File" seçeneği ni seçi yoruz . "OK" di yerek "body"
et i keti i çi n st i l t anı ml aması yapmaya başl ı yoruz. Bu sti l
yarat t ığı mı z i l k s ti l ol duğu i çi n DW yeni bi r st i l dosyası yarat acak
ve bunu nereye kaydet mek i st edi ği ni z soracakt ı r. Şuan çal ı şt ı ğı nı z
doküman i l e aynı veya herhangi bi r al t di zi nde bi r yere uygun bi r
is i ml e (örneği n stiller.css) st il dosyası nı kaydedi p i şl eme devam
edi yoruz .
Yeni s t il o luş turma iletiş im p enceres i
"body" et i ket i HTML dokümanı mı zı n ana gövde kı s mı nı bel i rt en

böl üm ol up sayfa arka fon re ngi , kenar boş l ukl arı , meti n rengi ve
boyutu gi bi özel l i kl eri t anı ml amamı za yarar. St i l özel li kl eri i l et i şi m
pencere si nden sayfamı z i l e i l gi l i ana bi çi m özel li kl eri ni bel irl i yoruz .
Bu örnekte arka fonu açı k mavi ol an ve kenar boşl ukl arı ol mayan bi r
sayfa tasarl ayacağı z. Bunun i çi n nel eri deği şt i re ceği ni z i bi l di ği ni zi
varsayarak bu kı smı hı zl ı geçi yorum. "body" i çi n st i l öz el l i kl eri şu
şeki l de ol acak;
Type
Font : Verdana, Arial , Hel vet i ca, sans -s eri f
Size: 11 pi xel s
Li ne hei ght: 13 pi xel s
Col or: #000000
Background
Background-col or: #E0F0F8
Bl ock
Text -al i gn: cent er
Box
Paddi ng: 0 pi xel s

Margi n: 0 pi xel s
Bo dy için s t il ö z elliklerini belirtiyo ruz
"OK" dedi ği ni z anda dokümanı n arka fon rengi açı k mavi ol acak ve
sayfadaki t üm yazı l ar ort al anacakt ı r. Endi şel enmeyi n hep böyl e
kal mayacak. Meti nl eri ortal amamı zı n sebebi tasarı mı n t am ortada
ol ması nı ve kul l anı cı nı n çözünürl üğü ne olurs a ol su dai ma
tarayı cı nı n ort as ı nda yer al ması nı sağl amaktı r.
"body" bi çi ml endi rmesi ni de bu şeki l de yapt ı kt an sonra DIV'l eri

bi çi ml endi rmeye baş l ayabi l i ri z. Tekrar CSS Styles panel i nden sağ
üst köşedeki düğmeye tı kl ayı p "New..." di yere k yeni bi r s ti l
tanı ml ıyoruz . Açı l an i l et iş i m penceres i nden "Selecto T ype" ol arak
"Advanced (IDs, pseudo class selectors)" s eçeneği ni s eçi yoruz.
"Selector" ol arak "#sayfa" yazı yoruz.
#s ayfa için s til t anımlamas ı yapıyo ruz .
İçi ni zde neden st i l i smi ol arak "#" i l e başl ayan bi r i si m gi rdi ği mi zi

merak edenl er ol abi l i r. Bunu şu şeki l de açı kl ayabi l i ri z; hat ı rl arsanı z
bi raz önce "sayfa" ID bi l gi si ne s ahi p bi r DIV yaratmı ştı k. CSS
tanı ml amal arı nda "#" i l e başl ayan sti l l er bi re r ID tanıml amal arı nı
bel i rt i r ve s adece i l gi l i ID'ye sahi p el emanl arı ve bu el emana bağl ı
al t el emanl arı kapsar. Tahmi n edeceği ni z üz ere de "#sayfa" i s i ml i
bi r tanı ml ama "sayfa" ID'l i DIV'i yani t asarı mı mı zı çevrel eyen ana
DIV'i bel i rtmekt edi r.
#sayfa
"#sayfa" i çi n st i l öz el l i kl eri ni t anı ml ayarak i şl eme devam
edebi l i ri z. Ben özel l i kl eri şu ş eki l de bel i rl edi m.
Bl ock
Text -al i gn: l eft
Box
wi dth: 760 pi xel s
Margi n:
Top: 0 pi xel s
Ri ght : auto
Bott om: 0 pi xel s
Left : aut o
Burada gördüğünüz üzere "sayfa" i si ml i DIV el emanı nı n geni şl i ği ni

760 piksel ol arak bel i rl edi k. Bu değer 800x600 çözünürl ükt e dahi
tarayı cı ekranı na sı ğabi l en bi r değerdi r. Bu, "s ayfa" DIV'i t üm
tasarı mı dı şardan çepeçevre sardı ğı ndan tasarı mı mı zı n maksi mum
geni ş l iği ni n 760 pi ks el ol abi l eceği anl amı na gel i yor. Aynı zamanda
sayfanı n ort al anması i çi nde "margin" yani objeni n di ğer tasarı m
el emanl arı na ve objel ere ol an mes afe bi l gi s i nde sağ ve sol boşl uk
değerl eri ni n "auto" ol arak bel i rt i l mesi gereki yor. Bu değer
sayes i nde "i ceri k" DIV'i ni n sağ ve sol kenarl ara ol an uzakl ı ğı
ot omat i k ol arak ayarl anacak başka bi r deği şl e her i ki yana da eşi t
uzakl ı kt a ol mas ı (sayfanı n ort ası nda) sağlanacakt ı r. Di kkat çekmek
is tedi ği m bi r di ğer nokta da "padding" yani i çeri ği n kenarl ara ol an
mes afe bi l gi si ni n 0 pi ksel ol arak ayarl anmas ı dı r. Bu tür çok
el emanl ı s ayfa tasarı ml arı nda dı ş obj el eri n "margin" ve "padding"
değerl eri ni n 0 ol arak atanı p daha sonra i ç DIV ve el emanl arı n kendi
değerl eri ni n bel i rt il mes i her zaman i çi n daha prat i k ve s ağl ı kl ı bi r
yönt emdi r. Tabi dış obj el eri n de deği şi k değerl ere s ahi p ol duğu
duruml ar ol abi l i r bu tamamen i s teğini ze ve gereksi ni ml eri ni ze bağl ı
bi r konudur.
"#sayfa" st i l tanı ml aması nı yaptı ğı nı z anda sayfa i çeri ği

ort al anacak fakat met i nl er s ol a hi zal ı ol acak şeki l de
konuml andı rı l acakt ı r. Evet , yavaş yavaş sayfamı z bi çi ml enmeye
başl adı .
#ustAlan
Tekrar yeni bi r s ti l yarat ı yoruz ve yine "Selecto T ype" ol arak
"Advanced (IDs, pseudo class selectors)" s eçeneği ni s eçi yoruz.
"Selector" ol arak "#sayfa #ustAlan" yaz ıyoruz . Bu "ustAlan" yani
si temi zi n üst kı s mı nı temsi l eden DIV'i n bi çi ml endi ri l mesi anl amı na
gel i yor.
Bi r CSS t anı ml aması yaparken aral arı nda boşl uk bı rakarak yapı l an
is i ml endi rmel er, "element > alt element" ş ekl i nde sti l
tanı ml amal arı yapmamı za ol anak sağl ar. Bu örnekte "sayfa" DIV'i ni n
içi ndeki "ust Al an" DIV'i ni bi çi ml endirmek i çi n "#sayfa #ustAlan"
yaz ı yoruz . Y i ne aynı ş eki l de "ustAlan" DIV'i ni n i çi ndeki "H1" baş lı k
bi çi mi ni CSS i l e bi çi ml endi rmek i çi n de "#sayfa #ustAlan h1"
yaz mamı z yet erl i di r.
"ustAlan" i çin s ti l özel l i kl eri ; "#sayfa #ustAl an"
Background
Background-col or: #F36507
Box
W i dt h: 760 pi xel s
Hei ght: 75 pi xel s
Margi n: 0 pi xel s
Border
Bot tom: Sol i d, 7 pi xel s, #000000
Pos it i oni ng
Type: Rel ati ve
"ustAlan" ı n geni ş li ği ni "icerik" i l e aynı yani 760 pi ksel ,

yüksekl i ği ni de 75 pi ksel ol arak ayarl adı k. "margin" ve "padding"
değerl eri ni 0 pi ksel ol arak gi rdi k. Hoş bi r görünüm el de etmek i çi n 7
pi ks el l i k bi r al t çerçeve yapt ı k. İl eri de yapacağı mı z pozi syonl ama
bel i rt mel eri nden et ki l enmemesi i çi n de "Positioning" böl ümünden
"T ype" değeri ni "Relative" ol arak ayarl adı k.
#anaMenu
Aynı şeki l de "anaMenu" i çi n st i l özel l i kl eri ; "#sayfa #anaMenu"
Background
Background-col or: #FFFFFF
Box
Fl oat : l eft
Margi n:
Top: 5 pi xel s
Ri ght : 0 pi xel s
Bott om: 5 pi xel s
Left : 0 pi xel s
Di kkat et t i yseni z "anaMenu" i çi n geni şl i ği 200 piksel gi rdi k,

"Float" değeri ol arak da "left" verdi k. Böyl ece sol a hi zal anmı ş 200
pi ks el geni ş li ği nde bi r s üt unumuz oldu. (Objel eri hi zal amak i çi n CSS
içeri s i nde "Float" öz el l i ği ni kul l anmaktayı z), "magrin" değerl eri ni
de "T op" ve "Bottom" i çi n 5 piksel di ğerl eri ni i se 0 piksel ol arak
ayarl adı k. Böyl ece üst ve al t kı sı mda yani "ustAlan" i l e "anaMenu"
ve "altAlan" i l e "anaMenu" arası nda 5 pi ksel l i k bi r boş l uk el de
et mi ş ol duk.
#icerik
"icerik" al anı i çi n st i l özel l i kl eri ; "#s ayfa #i ceri k"
Background
Background-col or: #FFFFFF
Box
Fl oat : ri ght
Margi n:
Top: 5 pi xel s
Ri ght : 0 pi xel s
Bott om: 5 pi xel s
Left : 0 pi xel s
"anaMenu" DIV'i ni sol a hi z al adı ğı mı za göre bu i çeri k al anı nı da

sağa hi z al ı yoruz. "Float" değeri ni "right" vere re k bu hi z al ama
iş l emi ni yapabi l i ri z. Aynı şeki l de sadece üst t e ve al t ta 5 pi ksel l i k
mes afe verere k di ğer "margin" değerl eri ni 0 pi ks el ol arak gi ri yoruz.
DIV'i n geni şl i ği ni bel i rten "width" ol arak da 560 piksel gi ri yoruz.
Burada bu geni şl i k değeri ol dukça öneml i bi r yere sahi p.
Hat ı rl ars anı z CSS kut u model i ni n i ş leyi ş i nden bahset mi şt i k.
Tasarı mı mı z ı yaparken bunu akl ı mı zdan çı kart mamamız gereki yor.
Basi t bi r mat emat i ksel hes ap i l e şöyl e bi r sonuç el de edebi l i ri z.
#anaMenu: 200px
#i ceri k: 560px
T oplam: 760px
"#sayfa" i çi n geni ş l i ği 760 pi ks el ol arak bel i rtmi ş ti k. Y ani "sayfa"

DIV'i nin i çi ndeki tüm el emanl arı nı n "margin", "paddi ng", "border" ve
geni ş l ik değerl eri ni n t opl amı 760'ı geçmemel i di r. Aksi t akdirde
"Float" öz el l i ği ni n bi r bel i rti mi ol arak objel er geni ş l i kl eri ve
hi zal amal arı öl çüsünde al ana sı ğdı rı l mak i çi n kaydı rı l ı rl ar. Aynı
mat emat i k hesabı nı şu şeki l de geni şl et ebi l i ri z
#anaMenu: 200px = (1px s ol çerçeve + 5px sol paddi ng + 188px

wi dth + 5px sağ paddi ng + 1px sağ çerçeve)
#i ceri k: 560px = (5px sol paddi ng + 550px wi dt h + 5px s ağ

paddi ng)
T oplam: 760px
Geni şl i kl eri gi re rken bunl ara di kkat etmemi z hal i nde herhangi bi r
sorunl a yaşamadan t asarı m s üre ci ni tamaml ayabi l i rs i ni z.
Objel eri n kut u model i nden nası l etki l endi kl eri ni görmek i çi n "icerik"
al anı nı n geniş l i ği ni 561 piksel ol arak gi rip s ayfayı t arayı cı da
deneyebi l i rsi ni z . Sayfayı t arayı cı da açt ı ğı nı zda "icerik" al anı nı n
"anaMenu" i l e aynı hi zada ol ması gereki rken aşağı ya kaydı ğı nı
göre ceks i ni z . Gördüğünüz gi bi 1 pi ksel l i k bi r hat a bi l e CSS kut u
model inden etki l enmekt edi r. Bu s orun bi rçok acemi kul l anı cı nı n
anl am vere medi ği kaymal arı n başl ı ca sebebi di r. Hesaba katı l mayan
ya da unut ul an bi r "paddi ng" veya "margin" değeri bu tür kaymalara
sebep ol ur ve gel i şti ri ci yi çi l eden çı karabi l i r.
#altAlan
"altAlan" i çi n st i l öz el l i kl eri "#sayfa #al t Al an"
Type
Size: 10 pi xel s
Background
Background-col or: #B0D2E4
Box
Margi n: 0 pi xel s
Cl ear: bot h
Geni şl i ği n 740 pi ksel ol duğu di kkati ni zi cezp etmi ş ols a gere k.

Sebebini n 10 piksel ol arak tanı ml anan "padding" değeri nden i l eri
gel di ği ni söyl ememi z e gere k yok sanı rı m. (10+740+10=760px)
Di ğer al anl ardan farkl ı ol arak "altAlan" i çi n "C lear" öz el l i ği ni "both"
ol arak t anı ml adı k. "Clear" özel l i ği il e bi r objeyi , kendi nden önce
gel en obj el ere uygul anan "Float" etki s i nden kurt armak mümkündür.
Eğer "altAlan" DIV'i i çi n "C lear" t anı ml amas ı nı "both" ol arak
yapmasaydı k, "altAlan" DIV'i "icerik" DIV'i i çeri si ndeki i çeri ği n
al t ı nda kal acak i di . "Fl oat " ve "Cl ear" i l e i l gi l i açı kl ayı cı bi r yaz ı i çi n
Fatih Hayrioğlu' nun makalesine ( http: // www.fatihhayrio glu.co m/?
p=160) göz at abi l i rs i ni z .
Do kümanın DW içeris indeki s o n gö rünümü
Evet , t anı ml amal arı yapt ı kt an sonra dokümanı nı zı ve CSS st i l

dosyası ndaki deği şi kl i kl eri kaydedi p tarayı cı nı zda deneyere k nas ı l
bi r sonuç el de ett i ği mi zi görebi l i rs i ni z.
T as arımın t arayıcıdaki s o n gö rünümü
Google Reklamları CSS CSS HTML Div Max Div Div 1 Norra Junior Div
Ilgili makaleler
CSS Dersleri
Son eklenenler
Bölüm 4 - Fancybox ile Resim Galerisi Oluşturma (1441) - 31 Ağus 2010 Sal
01:06:40
Bölüm 3 - Resimleri Kategorilerine Göre Listeleme (1644) - 31 Ağus 2010
Sal 01:05:12
Bölüm 2 - Upload And Resize Image With Developer ... (849) - 31 Ağus
2010 Sal 01:03:46
Adobe Developer Toolbox CS4 ve Duyuru Sayfası (822) - 31 Ağus 2010 Sal
00:59:19
ana sayfa | makaleler | dosyalar | forum | kitaplar | linkler | reklam |

iletişim | oyun oyna | borsa | c anli imkb | nakliyat ankara | ankara
web tasarım | imkb c anli | hisse senetleri | estetik | c anlı borsa |
müzik keyfi | süper oyunlar oyna | tüm araba oyunları | Film indir

Son dokunuşlar
Tasarı mı mı z ı ayağa kal dı rdı k sayı l ı r. Şi mdi bi rkaç püf nokt a ve bazı
temel bi l gi l erden bahsetmeni n z amanı gel di . Şi mdi i çeri ği n sayfada
nası l görüneceği ni t est et mek i çi n "icerik" al anına bi rkaç paragrafl ı k
bi r şeyl er kopyal ayı p yapı ş tı rı n ya da yazı n. "anaMenu" i çine
temsi l i bi r şeyl er yazı n. "ustAlan" i çi ne de bi r H1 başl ı ğı ve onun
al t ı na sl ogan ol acak bi r ş eyl er yazı n. "altAlan" a da bi r şeyl er
yaz mayı unutmayı n. Amacı mı z t as arı mı t est et mek. Şi mdi kaydedi p
tarayı cı dan kont rol edi n.
( http: // www.dw.gen.tr/ ?
Tas arımı t es t etmek için bir ş eyler yaz ıyo ruz
Şimdi di kkat ini zi çekecek baz ı nokt al ar ol mal ı . Bunl ardan bi ri

"icerik" i çeri si ndeki yaz ıl arı n kenarl ara çok yakın ol duğu, ayrı ca
başl ı ğında standart bi çi mde pek hoş görünmedi ği ol abi l i r. "ustAlan"
içeri s i ndeki başl ı ğı n bi r kı smı nı n dı şarı t aşmas ı ve sl oganı n başl ı ğa
çok uz ak ol ması da di ğer s orunl ar olarak göze çarpabil i r. Şi mdi bu
sorunl arı nası l çözeceği mi z e deyi nel i m.
Öncel i kl e "ustAlan" i çeri si ndeki başl ı ğı biraz bi çi ml endi ri p göze hoş

görünür bi r hal al mas ı nı s ağl ayal ı m. CSS Styles panel i nden
"New..." menüsü i l e yeni bi r st i l t anı ml amaya başl ı yoruz. "Selecto
T ype" ol arak "Advanced (IDs, pseudo class selectors)" seçeneği ni
seçi p, "Selector" ol arak "#sayfa #ustAlan h1" yazı yoruz.
us t Alan için b aş lık tanımlamas ı yap ıyo ruz
Başl ı k i çi n sti l öz el l i kl eri ş u şeki l de;
Type
Font : Georgi a, Ti mes , s eri f
Size: 30 pi xel s
W ei ght : Bol d
Col or: #FFFFFF
Box
Top: 10 pi xel s
Ri ght : 0 pi xel s
Bott om: 20 pi xel s
Left : 0 pi xel s
Margi n:
Top: 15 pi xel s
Ri ght : 0 pi xel s
Bott om: 0 pi xel s
Left : 25 pi xel s
Posi t i oni ng
Type: Absol ut e
Şimdi de s l oganı bi çi ml endi re l i m. "#sayfa #ustAlan p" i çi n sti l

özel l i kl eri
Type
Font : Georgi a, Ti mes , s eri f
Size: 11 pi xel s
W ei ght : Bol d
Col or: #FFBD91
Box
Margi n:
Top: 50 pi xel s
Ri ght : 0 pi xel s
Bott om: 0 pi xel s
Left : 115 pi xel s
Posi t i oni ng
Type: Absol ut e
Üst kı smı n bi çi ml endi rmesi bi t ti gi bi . Şi mdi de "icerik" i l e

il gi l enmeye baş l ayal ı m. Y eni bi r s ti l yarat ı yoruz. "Selector" ol arak
"#sayfa #icerik h1" yazı yoruz. İçeri ği n başl ı ğı i çi n st i l özel l i kl eri
şu şeki l de;
Type
Font : Ari al , Hel veti ca, s ans-seri f
Size: 24 pi xel s
W ei ght : Bol d
Col or: #2981AF
Box
Paddi ng:
Top: 10 pi xel s
Ri ght : 0 pi xel s
Bott om: 10 pi xel s
Left : 0 pi xel s
Margi n: 5 pi xel s
Border
Bott om: Sol i d, 1 pi xel s, #2981AF
Şimdi de paragrafl arı bi çi ml endi re l i m. "#sayfa #icerik p" i çi n st i l

özel l i kl eri ;
Box
Margi n: 0 pi xel s
Böyl ece i çeriği n kenarl ara çok yakı n ol ması nı engel l emi ş ol duk. Tabi
bu sadece "i ceri k" i çi ndeki paragraflar i çi n geçerl i . Aynı şeki l de her
el eman i çi n "padding" ve "margin" ayarl amal arı yaparak düz gün
görünüml ü i çeri kl er el de edebil i rsi niz .
Son ol arak "altAlan" a göze daha hoş görünmesi i çi n geçi ş l i

(gradi ent ) bir arka fon re smi ekl i yoruz. Sti l özel l i kl eri nde şu
deği ş i kl i ği yapmal ı sı nı z.
Background
Background-i mage: i mages/al tAl an_bg.gi f

Repeat: repeat -x
Sonucu görmek i çi n t üm bel geleri kaydedi p t arayı cı dan kont rol

edebi l i rs i ni z.
( http: // www.dw.gen.tr/ ?
Tas arımın s o n halinin tarayıcıdaki gö rünümü
Böyl el i kl e CSS bi çi ml endi rmenin gücünü kul l anarak nası l bi r s i te ara

yüz t asarı mı yapabi l eceği mi z i ve bunu gel i şt i re bi l eceği mi zi görmüş
ol duk. Bu örneği mi zde i ki süt unl u tasarı ml ar üzeri nde durduk. Bu
yakl aş ımdan yol a çı karak 3 sütunl u t as arı ml arı n nası l yapı l dı ğı nı
kendi ni z de bul abil i rsi ni z fakat i pucu ol arak ş unu bel i rt mekte fayda
var. Bu t ür 2 den fazl a sütunl u t asarı ml arda bi l eş enl eri kendi
aral arı nda i ki l i grupl ara ayı rarak s ağ ve s ol "Float" özel l i kl eri ni
kul l anabi l i rs i ni z.
3 s üt unlu tas arımın ş ematik g ö rünümü
Google Reklamları Dreamw eaver CSS Stil Div Layouts Div 1 Norra
Ilgili makaleler
CSS Dersleri
Son eklenenler
Bölüm 4 - Fancybox ile Resim Galerisi Oluşturma (1441) - 31 Ağus 2010 Sal
01:06:40
Bölüm 3 - Resimleri Kategorilerine Göre Listeleme (1644) - 31 Ağus 2010
Sal 01:05:12
Bölüm 2 - Upload And Resize Image With Developer ... (849) - 31 Ağus
2010 Sal 01:03:46
Adobe Developer Toolbox CS4 ve Duyuru Sayfası (822) - 31 Ağus 2010 Sal
00:59:19

Elastik sayfalar
Eğer sayfa t as arı mı nı n sabi t bi r değerde deği l de kul l anı cı nı n ekran
çözünürl üğü ve tarayı cı penceres i ni n geni şl i ği ne göre ot omat i k
ol arak boyut l andı rı l ması nı sağl amak i st i yors anı z; el ast i k t as arı ml ar
(Li qui d l ayout ) kul l anmal ı sı nı z.
Hi zal ama t ekni kl eri açı s ından herhangi bi r fark i çermeyen bu

sayfal arda yapmanı z gereken t ek şey bi ri ml eri pi ks el yeri ne yüzde
(%) ol arak bel i rt meni z gere kt iği di r. Bu bakı mdan "#sayfa" içi n
"width" değeri ni 760 pi ksel yeri ne "95" ol arak bi ri mi de "%"
gi re rs eni z s ayfa geni ş l i ği el asti k ol arak geni ş l eyecekti r. Tabi
"#ustAlan", "#anaMenu", "#icerik" ve "#altAlan" i çi n de "width"
değerl eri ni "%" ci nsi nden gi rmeni z gere kmekt edi r.
( http:// www.dw.gen.tr/ ?
B irimleri % o larak girmelis iniz
Burada geni şl i kl eri bi rbi ri ne göre oranl amanı z da mümkün t abi î ki.
Örneği n "#anaMenu" i çi n "%25", "#icerik" i çi n i se "%75" ol arak
gi rmel i si ni z. Örneği görmek i çin tıklayınız
(http: // www.dw.gen.tr/ %7b-SIT E _ADDRE SS-
%7d/ samples/ csslayout/ tasarim_liguiq.html) .
Elas tik s ayfanın tarayıcıd aki gö rünümü
Bi ri ml eri "%" ol arak kul l anı rken CSS kut u model i ni n hal en devrede
ol duğunu ve verdi ği ni z bu "width" değerl eri ni n sadece i çeri k
al anı nı n geniş l i ği ni bel i rt t i ği ni unut mamal ı sı nı z. Örnek s ayfanı n
res mi ne bakarsanı z "altAlan" IV'i ni n di ğer DIV'l erden daha geni ş
ol duğunu göre ceksi ni z. Bu durum "altAlan" i çi n önceden
tanı ml adı ğı mı z 10 pi ks el l i k "padding" değeri nden
kaynakl anmakt adı r. Bu tür uygul amal arda "paddi ng", "margi n"
ve/veya "border" değerl eri ni göz önünde bul undurarak "%" değerl eri
gi rmekt e fayda vardı r.
Google Reklamları CSS Max Div CSS HTML Div Div 1 Norra Junior Div

Dreamweaver Ve CSS Kullanarak Sayfa Ara Yüz Tasarımı (Layout) Yapmak

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweaver Ve CSS Kullanarak Sayfa Ara Yüz Tasarımı (Layout) Yapmak

Uploaded by

Copyright:

Available Formats

18.12.

2010 Dreamweaver ve CSS Kullanarak Sayfa …

Dreamweaver ve CSS Kullanarak Sayfa Ara Yüz Tasarımı (Layout) Yapmak

Doküma nla r Ana Sa y fa s ı / Dre a mw ea v e r / Dre amw e a v er 8

Bu doküman toplam 5 sayfadan oluşmaktadır. Gösterilen 1/5

www.likno.c om Google Reklamları

Bunl ardan baz ı ları ş u ş ekil de s ı ral anabi li r.

CSS Kutu modeli (BOX model)

s ol çerçeve+s ol boş luk+i çerik+s ağ boş l uk+sağ çerçeve

1+10+300+10+1=322 piks eldi r.

( http: //w ww.dw.gen.tr/? mo dule=site&page=img_sho w&id=654)

CSS kutu modeli hakkında daha det ayl ı bil gi içi n;

Bu doküman toplam 5 sayfadan oluşmaktadır. Gösterilen 1/5

ana sayfa | makaleler | dosyalar | forum | kitaplar | linkler | reklam |

Dreamweaver ve CSS Kullanarak Sayfa Ara Yüz

Dokümanlar Ana Say f as ı / Dreamw eav er / Dreamw eav er 8

Bu doküman toplam 5 sayfadan oluşmaktadır. Gösterilen 2/5

Dreamweaver ile Sayfa Ara Yüz

Bi z de sayfamı z ı t asarl arken CSS'i n bu güçl ü özel l i kl eri nden

Sayfanı n bi t mi ş hal i ni görmek i çi n buraya

Şimdi DW 'da File / New menüs ü i l e yeni bi r HTML dokümanı açı n.

Şimdi sayfaya, tüm t asarı mı kapsayı p ve toparl ayan çerçeve ol an

Açı l an i l et i şi m pencere si nden "ID" kı smı na "sayfa" yazı yoruz.

Şimdi ekl edi ği mi z "sayfa" i si ml i DIV et i keti ni n i çi ne sı rayl a

Gördüğünüz gi bi s ayfa ana i skel et i bu şeki l de ol acak. Hangi DIV'in

Bu doküman toplam 5 sayfadan oluşmaktadır. Gösterilen 2/5

Dreamweaver ve CSS Kullanarak Sayfa Ara Yüz

Dokümanlar Ana Say f as ı / Dreamw eav er / Dreamw eav er 8

Bu doküman toplam 5 sayfadan oluşmaktadır. Gösterilen 3/5

Açı l an i l et i şi m pencere si nden "Selector type" kı smı ndan "T ag

"body" et i ket i HTML dokümanı mı zı n ana gövde kı s mı nı bel i rt en

Paddi ng: 0 pi xel s

"body" bi çi ml endi rmesi ni de bu şeki l de yapt ı kt an sonra DIV'l eri

İçi ni zde neden st i l i smi ol arak "#" i l e başl ayan bi r i si m gi rdi ği mi zi

Burada gördüğünüz üzere "sayfa" i si ml i DIV el emanı nı n geni şl i ği ni

"#sayfa" st i l tanı ml aması nı yaptı ğı nı z anda sayfa i çeri ği

"ustAlan" i çin s ti l özel l i kl eri ; "#sayfa #ustAl an"

"ustAlan" ı n geni ş li ği ni "icerik" i l e aynı yani 760 pi ksel ,

Di kkat et t i yseni z "anaMenu" i çi n geni şl i ği 200 piksel gi rdi k,

"anaMenu" DIV'i ni sol a hi z al adı ğı mı za göre bu i çeri k al anı nı da

"#sayfa" i çi n geni ş l i ği 760 pi ks el ol arak bel i rtmi ş ti k. Y ani "sayfa"

#anaMenu: 200px = (1px s ol çerçeve + 5px sol paddi ng + 188px

#i ceri k: 560px = (5px sol paddi ng + 550px wi dt h + 5px s ağ

"altAlan" i çi n st i l öz el l i kl eri "#sayfa #al t Al an"

Geni şl i ği n 740 pi ksel ol duğu di kkati ni zi cezp etmi ş ols a gere k.

Evet , t anı ml amal arı yapt ı kt an sonra dokümanı nı zı ve CSS st i l

Bu doküman toplam 5 sayfadan oluşmaktadır. Gösterilen 3/5

ana sayfa | makaleler | dosyalar | forum | kitaplar | linkler | reklam |

Dreamweaver ve CSS Kullanarak Sayfa Ara Yüz

Dokümanlar Ana Say f as ı / Dreamw eav er / Dreamw eav er 8

Bu doküman toplam 5 sayfadan oluşmaktadır. Gösterilen 4/5

Şimdi di kkat ini zi çekecek baz ı nokt al ar ol mal ı . Bunl ardan bi ri

Öncel i kl e "ustAlan" i çeri si ndeki başl ı ğı biraz bi çi ml endi ri p göze hoş

us t Alan için b aş lık tanımlamas ı yap ıyo ruz

Başl ı k i çi n sti l öz el l i kl eri ş u şeki l de;

Şimdi de s l oganı bi çi ml endi re l i m. "#sayfa #ustAlan p" i çi n sti l

Üst kı smı n bi çi ml endi rmesi bi t ti gi bi . Şi mdi de "icerik" i l e

Şimdi de paragrafl arı bi çi ml endi re l i m. "#sayfa #icerik p" i çi n st i l

Son ol arak "altAlan" a göze daha hoş görünmesi i çi n geçi ş l i

Background-i mage: i mages/al tAl an_bg.gi f

Sonucu görmek i çi n t üm bel geleri kaydedi p t arayı cı dan kont rol

Böyl el i kl e CSS bi çi ml endi rmenin gücünü kul l anarak nası l bi r s i te ara

Bu doküman toplam 5 sayfadan oluşmaktadır. Gösterilen 4/5