Dreamweaver Destek Sitesine Hoşgeldiniz.

Web tasarımını kod yazmadan, hiç zorlanmadan Dreamweaver ile yapmaya hazırmısınız? Doğru yerdesiniz arkadaşlar.

Hepinize kolay gelsin.

Dreamweaver ve Timeline uygulamaları

"Timeline" kavramına deyinerek yazımıza başlayabiliriz. Flash ya da bir video düzenleme programı ile ilgilenmiş arkadaşlar için yabancı bir kavram olmayan bu "timeline" kelimesi "zaman çizelgesi" olarak Türkçeye çevrilebilir. Yani adından da anlaşılacağı üzere bir süreç içerisinde hangi anda ne olacağını belirleyebildiğimiz bir akış periyodu göstergesidir de diyebiliriz.

"DHTML" (Dynamic HTML) olarak tabir edilebilen ve JavaScript-CSS ilişkisinin beklide en yoğun kullanım bulduğu alanlardan biridir bu timeline süreci. Birçok örneğine rastladığınız hareketli katmanları ve bir görünüp bir kaybolan objeleri timeline ile DW içerisinde yapmak mümkün olabilmekte.

Biz burada basit bir örnek ile kullanımına deyinip panel hakkında genel bilgiler verecek ve yazıyı tamamlayacağız. Tabi gerisi tamamen sizin hayal gücünüze kalmış. Örnek bir uygulama olarak hareket eden katmanlar yapacağız. Sizde bu tür örnekleri çeşitli kombinasyonlar ile tekrarlayarak olayın mantığını daha iyi kavrayabilirsimiz. Neyse fazla uzatmadan uygulamamıza geçelim.

Timelines Paneli

Bütün zaman çizelgesi uygulamalarımızı yönetebilmemize olanak tanıyan bu panele eğer açık değilse Window / Timelines menüsü ile ulaşabilirsiniz. Standart olarak farklı bir konumda gelen "Timelines" panelini ben rahat çalışabilmek adına "Results" paneli altına taşıdım. Sizde ihtiyaçlarınıza göre panel gruplarını kendi aralarında yeniden sınıflandırarak verimliliğinizi arttırabilirsiniz.

Paneli kısaca tanıtmak gerekirse;

Timelines panelinin bileşenleri

• Timeline pop-up menu: Bu açılır menü o an üzerinde çalıştığımız zaman çizelgesini gösteriyor. Dikkat ederseniz bu alan açılır bir menü, yani bu, bir sayfada birden fazla zaman çizelgesi, birden fazla süreç olabileceği anlamına geliyor. Bu da çalışmalarımızda esneklik ve çeşitlilik kazandırmamızı sağlıyor.
• Playback head: Bir zaman çizelgesi üzerinde kaçında karede (frame) yani animasyonun hangi anında olduğumuzu belirtiyor.
• Frame numbers: Kare numarasını belirtiyor. Buradan da anlayacağınız üzere animasyonumuz (ya da olay, süreç ne derseniz artık) karelerden yani "frame" lerden oluşmakta. Buradaki "frame" kavramını daha önce anlatılan "Frame kullanımı" konusu ile karıştıranlar bu ikisinin farklı kavramlar olduğuna dikkat etmeliler.
• Behaviors channel: Zaman çizelgemizdeki objeleri etkileyen Behavior'ları gösteren kanaldır.
• Animation bar: Animasyonun ne kadar süreceğini gösterir. Sağ ucundan tutup uzatıp kısaltarak sürecin kaç kare boyunca devam edeceğini belirleyebilirsiniz.
• Keyframe: Anahtar kare olarak tabir edebileceğimiz animasyonun son karesidir. Bunun ne anlama geldiğine birazdan deyineceğiz.
• Animation channel: Animasyon kanalıdır. Bir zaman çizelgesi birden fazla animasyon kanalı içerebilir. Buda demek oluyor ki; bir süreç içersinde birden fazla olayı ve objeyi yönetebiliyoruz.

Paneli genel olarak tanıdığımıza göre genel zaman çizelgesi kavramlarına deyinebiliriz. Bu kavramlar bir animasyon sürecinde ihtiyacımız olan terimleri belirtmesi açısından önem taşıyorlar.

Keyframe

Daha önceden Flash ile animasyon yapan arkadaşlar bunun ne anlama geldiğini biliyorlar aslında. Biz bir kez daha tekrarlayalım. Animasyon süreci belirli bir kareden başlar ve başka bir karede biter. Bu aradaki zaman dilimi içerisinde objeler çeşitli değişikliğe uğrayabilirler. Örneğin 0 numaralı karede X ekseninde 150px konumunda bulunan bir katman 25. karede X eksenindeki 400. piksele hareket etmiş olabilir. Daha sonra ise 55. karede ise Y ekseninde 100px aşağı kaymış olabilir. İşte bu 25 ve 55. kareler birer "keyframe" olarak adlandırılır ve objelerin parametre ve/ve ya özelliklerindeki belirli bir değişiklik olduğu anı belirtir.

Loop

Animasyon sürecinin bittikten sonra tekrar başa döneceğini belirtir. Animasyonumuz bu şekilde kendini sonsuza kadar tekrar edecektir (sayfa açık olduğu sürece).

Autoplay

Animasyon sürecinin kendiliğinden otomatik olarak başlaması anlamına gelir. Yani sayfa yüklenir yüklenmez (onLoad) süreç başlayacak ve kendini tamamlayacaktır. Fakat biz her zaman bunu istemeyebiliriz. Örneğin bir linke tıkladığımızda sürecin başlamasını istiyorsak bu seçeneği işaretlememeliyiz.

FPS

Frame per second yani saniyedeki kare sayısını belirtir. Televizyon ve sinema gibi tüm hareketli medyalar için geçerli bir kavramdır. Animasyonun akıcılığını belirtir. FPS değeri yüksek olan animasyon daha yumuşak hareketlere sahiptir. FPS ne kadar düşük olarsa animasyon o kadar kesik biçimde ilerler. Hareketli medyalarda FPS değeri dosya büyüklüğünü belirleyen önemli bir etkendir fakat zaman çizelgesi uygulamalarında durum ne açıkçası bilmiyorum. DW içerisinde Timelines paneli üzerindeki "Fps" yazısı, bazı Windows görsel stillerinde kaymalardan dolayı "Fas" gibi görünmektedir, aklınızda bulunsun :)

Örnek bir uygulama

Şimdi bu kadar teorik bilginin ardından biraz uygulama görmenin zamanı geldi. Şimdi sayfanıza Insert paneli altındaki "Layout" sekmesi altında yer alan "Draw layer" düğmesi ile bir katman çiziyoruz. Biz bu örnekte katman kullanacağız. Zaman çizelgesi uygulamalarında katmanlar yanında resimleri de kullanabilmekteyiz. Tabi katman içerisine koyacağınız materyale göre birçok objeyi de kullanmak da mümkün.

Katman çizme düğmesi

Yeni bir katman çizdiğimiz an bu katman ile aynı isimde bir stilde dokümanımıza eklenecektir. Bu stil ile katmanın konumu arka fon rengi hizalama ve boyut bilgilerini yönetebilmekteyiz. Sizde istediğiniz gibi bu stili yapılandırarak size uygun bir hale getirebilirsiniz. Ben basit olarak rengini ve yazı tipi seçeneklerini değiştiriyorum.

Bu değişiklikleri Properties paneli üzerinden yapabilirsiniz. Ben aşağıdaki değerleri uyguladım:

Katman özellikleri

• Layer ID: katman1
• L: 50px
• T: 35px
• W: 300px
• H: 30px
• Bg color: #99CC00
• Z-index: 1

Zaman çizelgesi içerisinde kullandığınız objelere sizin için anlam ifade eden ve çalışmalarınızı kolaylaştıracak ID'ler vererek bu süreci daha az zahmetli bir hale getirebilirsiniz. DW'ın otomatik olarak verdiği "layer1,image5..." gibi ID'ler ile çalışmak bazen can sıkıcı olabiliyor.

Şimdi bu katmanımızı zaman çizelgemiz içerisinde dahil edeceğiz. Hala açık değilse Window / Timelines panelinden zaman çizelgesi panelimizi açıyoruz. 1. kareye sağ tıklayıp "Add Object" seçeneğine tıklıyoruz.

İlgili kareye sağ tıklayıp Add Object menüsü ile objemizi zaman çizelgemize ekliyoruz

Bu seçenek yerine objeyi tutup Timelines paneli üzerine sürüklediğinizde de aynı işlemi daha kolay bir biçimde yapmanız mümkün.

Eğer bu seçeneği ilk defa kullanıyorsanız DW bir uyarı mesajı göstererek "bu zaman çizelgesi uygulaması ile katmanın sadece sol-üst kenarlara olan uzaklığını (konumunu), yüksekliğini, genişliğini, Z-index ve görünüm parametrelerini değiştirebileceğiniz ve yükseklik-genişlik değişimlerinin Netscape 4.0'da çalışmayacağını" belirtiyor. "OK" deyip geçiyoruz.

Obje ekleme uyarı mesajı

Şimdi zaman çizelgemizde 15. kareye kadar mor bir alan oluştu ve katmanın ismi (katman1) bu alanda yer aldı. Bu animasyon sürecinin 15 kare süreceğini gösteriyor ve FPS değerimizde 15 olduğuna göre tam 1 saniyelik bir süreç anlamına geliyor. Bu mor alanın sonundaki ortasında yuvarlak olan kareyi tutup başka bir kareye sürükleyerek animasyonun ne kadar süreceğini belirleyebiliriz. Ben 30. kareye kadar bunu uzatarak animasyonun 30 kare sürmesini belirttim.

Timelines panelinin obje eklendikten sonraki görünümü

Bu ortasında yuvarlak olan kare bizim "keyframe" olarak tabir ettiğimiz anahtar karemizi gösteriyor.

Şimdi animasyonumuzun son karesi olan ve aynı zamanda anahtar karemizi de bünyesinde barındıran 30. kareye tıklıyoruz ve Properties panelinden "L" değerini "500px" yapıyoruz. Bu değişikliği yaptığımız kare anahtar kare olduğu için DW aradaki boşlukları kendisi hesaplayarak animasyonu ona göre yapılandırıyor ve bunu da animasyon yolunu ince bir çizgi ile belirterek bize bildiriyor.

Animasyon yolunun görünümü

Burada objeyi eklediğimiz için DW otomatik olarak bir anahtar kare ekledi. Eğer siz animasyonlarınızda aralara anahtar kareler tanımlayarak animasyonu ilerletmek ve ara değişimler tanımlamak isterseniz Timelines panelinden mor alan içerisindeki ilgili kareye tıklayıp Modify / Timeline / Add Keyframe menüsü ile bir anahtar kare tanımlayabilirsiniz.

Bu aşamada animasyonumuzu yapmış oluyoruz. Fakat henüz animasyonumuzu tetikleyen bir şey olmadığı için sayfayı kaydedip kontrol ettiğinizde hiçbir şey olmayacaktır. "Autoplay" seçeneğini işaretleyip sayfayı kaydedip denediğinizde ise animasyonun sayfa açılır açılmaz yürütüldüğünü göreceksiniz.

Autoplay uyarısı

"Autoplay" seçeneğini işaretlediğinizde dokümanın "onLoad" olayına zaman çizelgesinin yürütülmesi komutunun eklendiğini belirten bir uyarı mesajı alacaksınız. Behaviors panelinin açıp "Tag selector" ile BODY etiketini seçtiğinizde "onLoad" olayında "Play Timeline" isimli bir komut olduğunu göreceksiniz.

onLoad olayındaki Play Timeline komutunun Behaviors panelden görünüm

Buradan yola çıkarak bir linke tıklayarak da bu animasyon sürecini harekete geçirebileceğiniz sonucuna varabilirsiniz. Link aracılığı ile animasyonu başlatmak için;

Öncelikle "Autoplay" seçeneğini eğer seçili ise kaldırıyoruz. Ardından bir metini seçip link olarak # veriyor ve bu link seçili iken Behaviors panelden (+) işaretine tıklayarak açılan menüden Timeline / Play Timeline seçeneğini seçiyor ve açılan iletişim penceresinden üzerinde çalıştığımız zaman çizelgesini seçiyoruz.

Behaviors panelden Timeline / Play Timeline seçeneğine tıklıyoruz

Bu işlemi yaptığımızda seçtiğimiz linkin "onClick" olayına "Play Timeline" komutu eklenecek ve bu linkte tıkladığımızda animasyonumuz başlayacaktır. Aynı şekilde animasyonu durdurmak (Stop Timeline) ve belirli bir karesine atlamak (Go to Timeline Frame) komutlarını da linklere atayarak zaman çizelgesi üzerinde hakimiyet kurabilirsiniz. Öte yandan animasyonun devamlı tekrarını sağlayan "Loop" seçeneği de animasyonun son karesindeki "Go to Timeline Frame" seçeneğine 1 değeri verilerek yapılan bir etkidir. Animasyon son kareye kadar ilerler ve son karede 1. kareye geri dön komutu ile animasyonu baştan oynatır (Flash'daki ActionScriptler gibi).

Gelişmiş seçenekler

Birde resim animasyonu örneği verelim. Sayfaya bir resim ekliyoruz ve bu resmi Timelines paneli üzerinde bir noktaya sürükleyerek bu objeyi zaman çizelgemize eklemiş oluyoruz. Bu aşamada DW bize yine bir uyarı gösteriyor ve "resimlerin sadece SRC parametrelerinin yani resimlerin kaynaklarının zaman çizelgesi uygulamalarında değiştirilebildiğini ve konumunu değiştirmek istiyorsak bunu bir katman içerisine koyarak katmanı hareketlendirmemiz gerektiğini" söylüyor. E haksız da değil tabi :)

Resim objesi ekleme uyarısı

Bizde eklediğimiz objeyi zaman çizelgesinden silip bunu bir katmanın içine yerleştiriyor ve bu katmanı zaman çizelgesi üzerine sürükleyerek bu kısıtlamadan kurtuluyoruz.

Birden fazla obje ile çalışırken her objeyi farklı animasyon kanallarına atmak zaman çizelgesini yönetmek açısından kolaylık sağlayacaktır. Bu nedenle biz burada içerisinde resim olan katmanı ikinci kanala sürüklüyoruz. Şimdi sondaki anahtar kareden tutup mor alanı uzatarak animasyon sürecini ayarlıyoruz. Ben 20. kareden başlayıp 45. karede biten bir süreç yarattım.

resimliKatman’ı ekledikten sonra Timelines panelinin görünümü

Son kareye tıklayarak katmanın yerini değiştirip animasyona bir hareket sağlayabilirsiniz. Ayrıca ek olarak Properties paneldeki "Visibility" seçeneğini de "hidden" yaptığınız da katman animasyonun bu karesine geldiğinde görünmez olacak ve ekrandan silinecektir.

Doğrusal olmayan hareketler

Şimdi doğrusal hareketler yerine biraz daha karmaşık hareketleri nasıl yapacağımız konusunda gelelim. Bu işlem için "Record Path Of Layer" seçeneğini kullanacağız. Bunun için animasyonunuzun başlamasını istediğiniz kareye tıklayıp ilgili katmanı seçiyoruz ve Timelines panelinden başlangıç karesine sağ tıklayıp açılan menüden "Record Path Of Layer" seçeneğini seçiyor ya da Modify / Timeline / Record Path Of Layer menüsüne tıklıyoruz.

İlgili kareye sağ tıklayıp Record Path of Layer seçeneğini seçiyoruz

Bu aşamadan sonra DW katman üzerinde yaptığımız sürükleme hareketlerinin güzergâhını kaydedecek ve bu yaptığımız hareketler doğrultusunda otomatik olarak anahtar kareleri ve animasyon uzunluğunu ayarlayacaktır. Sürecin uzunluğu "Record Path Of Layer" menüsüne tıkladığınız anda başlayacaktır. Katmanın sol üst köşesinden tutup farenin sol tuşunu basılı tutarak yaptığınız hareketler kaydedilecek ve ekranda gidiş yolu çizilecektir.

Katmanı tutup istediğimiz konumlara sürüklüyoruz

Sürükleme işlemini bitirdiğinizde ve farenin sol tuşunu serbest bıraktığınız anda zaman çizelgesi paneli kendini bu hareketler doğrultusunda yapılandıracaktır.

Hareket sonrası zaman çizelgesinin görünümü

Bu sayede sizde istediğiniz gibi kompleks animasyonlar yaratabilir ve Flash animasyonlarını aratmayacak cıvıl cıvıl sayfalar yaratabilirsiniz. Fakat bu işlemlerin karmaşık JavaScript'ler ile yapıldığını ve tüm tarayıcıların bu özellikleri destekleyemeyebileceğini de unutmadan bu işlemleri yapmayı da aklınızdan çıkarmamalısınız.

Dreamweaver ve Metinler (Texts)

Tabi ziyaretçilere sadece bir metin ulaştırmak her zaman tatmin edici olmayabilir. Yapacağımız biçimlendirmeler, renk seçimleri ve hizalama teknikleri sayfa görünümüne çok daha hoş bir hava katacaktır.

HTML içerisinde tagı ile metinlerimizi biçimlendirmemiz mümkün. DW'da ise işin kod kısmına geçmemize hiç gerek yok. DW'ın bizlere sunduğu kullanışlı biçimlendirme araçları ile en kolay yoldan sonuca ulaşmak mümkün.

W3C font tagını kullanımdan kaldırmış ve bu tagı kullanan web sayfalarını demode ve geçersiz kod yapısına sahip sayfalar olarak nitelendirmiştir. Biçimlendirme seçeneklerinizde font yerine CSS kullanmak size daha sağlıklı sonuçlar vereceği aklınızdan bulunması gereken önemli bir noktadır. Konu hakkında daha detaylı bilgiyi www.w3c.com dan alabilirsiniz.

Metin biçimlendirirken CSS kullanmakta büyük projelerde çalışan ve sayfanın ara yüzünün metinlerin tekrar boyutlandırılması gibi durumlarda bozulmamasını isteyenler için çok daha mantıklı olacaktır. CSS Style ile ilgili daha kapsamlı bilgilere sitemizdeki ilgili makalelerden ulaşabilirsiniz.

Text & HTML

İlk önce HTML içerisindeki metin ve biçim kavramlarına biraz deyinelim. HTML de kullanılan başlıca metin biçimleri şunlardır.

Temel metin biçimleri

• Paragraph: Paragraflarımız oluşturan

  ....

  tagları arasında yer alan biçimdir.
• Heading: Başlık anlamına gelir 6 farklı heading türü vardır. (Heading 1, Heading 2.... Heading 6) Türüne göre

  ...

  yada .... biçiminde kullanılır. Heading 1 en büyük, Heading 6 en küçük başlıktır.
• Preformated:

  ....

  tagına karşılık gelen biçimlendirme türüdür. Bu biçimde metin çıktısı olduğu gibi verilir. Yani fazladan boşluklar doğrudan ekrana yansıtılır, Enter'a basılan yerler (n) alt satıra kaydırılır, tablar, sekme biçiminde görüntülenir vs.

Bunlar en temel HTML metin etiketleri idi. Birde HTML stil olarak isimlendirilen ve HTML içinde standart olarak tanımlı gelen ve her Tarayıcı tarafından tanınan standart stiller mevcuttur. DW içinde bu stillere Text / Style menüsü ile ulaşabilirsiniz.

Text menüsü ve metin biçimleri

Metin biçimlendirmek

Ziyaretçileri etkilemenin birçok yolu var biz ilk önce metinler ile neler yapabiliyoruz bir bakalım.

Biçimlendirme işlemini Property Inspector (Properties) panelinden yapacağız. Bu paneldeki tüm ayarları Text menüsü altında yer alan alt menüler ile de yapabileceğinizi söylemeden geçmeyelim. Bu paneldeki başlıca öğeler;

Properties panel vs CSS ilişkisi

• Format: HTML biçimleri olarak anlattığımız Heading, Paragraph.... Kısmı. .(Text / Paragraph Format)
• Link: Bu ise seçili durumdaki metin veya metin grubuna bir link atamaya yarar. Buraya direk adres veya dosya ismi yazarak yada yanındaki klasör simgesine tıklayarak (Browse/Gözat) link ile bağlanacak dosyayı seçebilirsiniz. Bu kısmı doldurduktan sonra yanındaki Target alanı da aktif hale gelecektir. Target ise Frameler ile çalışan tasarımcılar için bağlanan linkin hangi frame içinde açılacağını belirtmeye yarayan "hedef" kısmıdır. (Insert / Hyperlink)
• Font: Bu drop down menü ile HTML içinde en uyumlu yazı tiplerinin tanımlı olduğu bir menüye ulaşabilirsiniz. Buradan Sayfamıza eklediğimiz metinin yazı tipini belirliyoruz. (Text / Font)
• Size: Metnimizin yazı tipi büyüklüğünü belirtir. 1 ile 7 arasında bir rakam olabilir. .(Text / Size)
• Color: Metnimizin rengini belirler. Tıklayarak rengi siz seçebileceğiniz gibi bir grafik programında kopyaladığınız renk kodunu direk yapıştırarak da rengi belirleyebilirsiniz. DW aynı zamanda ekrandaki bir bölgeden renk kodu çalabilmektedir.(Text / Color...)
• Unordered list: Madde imi işaretleri kullanarak liste yaratmaya yarar. Basılan her Enter da yeni bir liste öğesi oluşturulur. .(Text / List / Unordered)
• Ordered list: Numaralandırma yaparak liste yaratmaya yarar. Basılan her Enter da yeni bir liste öğesi oluşturulur. .(Text / List / Ordered)
• Text Outdent: Paragrafı bir sekme (Tab) dışarı kaydırır. .(Text / Outdent)
• Text Indent: Paragrafı bir sekme (Tab) içeri kaydırır. .(Text / Indent)
• Bold: Kalın yazmak için kullanılır. .(Text / Style / Bold)
• Italic: Eğik yazmak için kullanılır. .(Text / Style / Italic)
• Align Left: Sola hizala. .(Text / Align / Left)
• Align Center: Ortaya hizala. .(Text / Align / Center)
• Align Right: Sağa hizala. .(Text / Align / Right)
• Justify: İki yana hizala.(Text / Align / Justify)

Font kısmında belirtilen fontları yetersiz bulduğunuzda bu menünün en altında yer alan "Edit Font list" seçeneği ile yeni font türleri tanımlayabilirsiniz. Fakat bunu pek tavsiye etmiyorum.

Yazı tipi listesini düzenlemek

Zira sizin çok hoşunuza giden şatafatlı fontlarınızın herkeste olmadığını aklınızdan çıkarmamanız gerekiyor. Yani yeni bir font tanımlaması yaparken Web ve Dünya standartlarındaki fontlardan birini seçmelisiniz. Örneğin Arial her Win9x yüklü bir bilgisayarda bulunan bir fonttur.

Yazı tipi düzenleme iletişim penceresi

Ayrıca Insert paneli altında yer alan "Text" sekmesinden de metin biçimlendirme işlemleri ile ilgili birçok araca ulaşabilir ve sayfanızda yer alan metinleri kolayca düzenleyebilirisiniz.

Insert panelde yer alan Text sekmesi

Metinlere link vermek

Bir HTML sayfasında en çok kullanılan ve beklide kullanılması gereken text-linkler sayfaların birbiri ile olan bağlantılarını sağlar ve sayfalar arası geçişleri düzenler.

Sadece metinlere değil, resimlere de link verebilme şansına sahibiz. Biz burada metinlere nasıl link vereceğimize değineceğiz.

Bir text'e link vermek için;

Öncelikle link vermek istediğiniz metni seçin Arkasından seçili metnin üzerine sağ tıklayıp ve "Make Link" seçeneğine seçin.

Sağ tuş menüsü ile link vermek için

Yada metni seçtikten sonra doğrudan Properties Panelinden "Link" kısmına bağlantının URL sini yazarak da (yandaki klasör simgesine tıklayarak Gözat da diyebilirsiniz) link verebilirsiniz.

Properties panelinden link vermek için

Eğer harici bir web sayfasına link vermeniz gerekiyorsa mutlaka adresin başına http:// yazmanız gerekiyor.

Mail adreslerine link vererek ziyaretçilerin bilgisayarında kurulu olan Outlook Express benzeri bir programla size e-mail yollamasını sağlayabilirsiniz. Bunun için mail linki verirken mail adresinin başına "mailto:" yazmanız yeterlidir. Bunun dışında Insert Panelden Common kategorisi altındaki Email link isimli düğme ile de mail linkler yaratmanız mümkün.

E-mail linki ekleme penceresi

Birde çok daha detaylı linkler yaratabilmek için; Insert / Hyperlink menüsünü kullanabilirsiniz. Açılan iletişim penceresinden bir link için yapabileceğiniz en detaylı ayarları gerçekleştirebilirisiniz.

Gelişmiş link ekleme iletişim penceresi

Dynamic metin (Dinamik text)

Aslında bu konuyu çok daha ayrıntılı bir şekilde inceleyeceğiz ama yeri gelmişken bir şeyler söyleyelim.

Bu konu daha çok sunucu modelleri ile çalışırken kullandığımız konuları kapsamına giriyor. Fakat yeri gelmişken açıklayalım. DW içerisinde desteklenen sunucu modellerinden biri ile sunucu taraflı (Server side) bir dili kullanıyor iseniz Veritabanına ulaşıp bir Recordset yarattıktan sonra verileri sayfaya yazdırdığımız anda yazdırdığımız bu veriler artık Dinamik nitelik taşıyan bir obje durunu alırlar. DW içerisinde bu "Dynamic" kavramı oldukça fazla geçiyor. Dynamic Table, Dynamic list menu vs. Bunlar ilerideki konularda çok daha ayrıntılı bir biçimde açıklanacak. Şimdilik bu kadar ile yetinelim.

Özel karakterler

Dokümanlarımızda para birimlerinin sembolleri veya bilimsel ifadeler gibi özel karakterleri metin içerisinde kullanmak isteyebiliriz. Bu gibi durumlar için HTML içerisinde özel kodlar ile ifade edilen özel karakterleri kullanmak en kolay yol olacaktır. DW içerisinde özel karakterlere Insert paneli altında yer alan "Text" sekmesinden ulaşabilir ve sayfanıza ekleyebilirsiniz.

Insert panelde yer alan Text sekmesi

En sık kullanılan karakterler kolay ulaşım açısından menüye eklenmiş durumda, bu karakterlerin dışında bir şey eklemek için menüden "Other Characters" menüsüne tıklayarak diğer karakterlere de ulaşabilirsiniz.

Özel karakter ekleme penceresi

Dreamweaver ve Klavye kısayolları

Klavye kısayollarının yönetimi

Dreamweaver içerisinde klavye kısayollarını kullanmanın dışında önceden kullandığınız başka bir editördeki kısayollar gibi DW kısayollarını da yapılandırabiliyorsunuz. Genelde belli kısayollara alışmış bir kullanıcı için yeni ve başka bir sistemi kullanamaya başlamak oldukça zor olabilmekte. Bu bakımdan DW içerisinde Edit / Keyboard Shortcuts menüsü ile DW kısayollarını yeniden yapılandırabiliyorsunuz.

Edit / Keyboard Shortcuts menüsü ile DW kısayollarını yeniden yapılandırabiliyorsunuz

Klavye kısayolları yapılandırma penceresinden kısayollar ile ilgili bütün işlemleri yapmak mümkün.

Klavye kısayolları yapılandırma penceresi

Current Set: Bu açılır menüden kullandığınız diğer programlardaki ön tanımlı kısayolları doğrudan DW içerisine aktarabilme şansına sahibiz. Örneğin eski bir "HomeSite" fanatiği için buradaki klavye kısayollarını görmek eminim oldukça heyecan verici olacaktır. Aynı Şekilde "Dreamweaver MX 2004" kullanıcıları da alıştıkları düzene buradan geçiş yapabilirler.

Bu menü ile tanımlı bir profili seçebilirsiniz.

"Current set" ile aynı hizada yer alan düğmeler ile de seçili kısayolları profillerini yönetebilirler.

• Duplicate: Seçili olan profilin bir kopyasını oluşturmanızı sağlar. Böylece varolan profile zarar vermeden kendi profilinizi düzenleyebilirsiniz.
• Rename: Seçili profili yeniden adlandırır.
• Save as HTML File: Profilin bir HTML çıktısını istediğiniz konuma kaydeder. Bu özellik tüm kısayolları bir arada görüp tekrar düzenlemeniz gerektiğinde çok işinize yarayabilir.
• Delete: Seçili profili siler.

Commands: Bu açılır menü ile hangi kısayol grubunu düzenlemek istediğinizi seçebilirsiniz.

Shortcuts: bölümünde yer alan (+) ve (-) düğmeleri ile seçtiğiniz işlem için yeni kısayollar ekleyip silebilirsiniz. "Press key" kısmında ilgili tuş kombinasyonlarına basıp "Change" düğmesi ile kısayolu değiştirebilirsiniz.

Klavye kısayollarının yönetimi bu şekilde. Şimdi yazımıza sıkça kullanabileceğiniz bazı işlemlerin klavye kısayollarına deyinerek yazımıza devam edelim.

Klavye kısayolları

Ok tuşlarının kullanımı sadece Windows kullanıcıları için geçerlidir.

Windows içerisindeki "Control (CTRL)" tuşu yerine "Macintosh" kullanıcıları "Command", "Enter" tuşu yerine ise "Return" tuşunu kullanabilirler.

Paneller arası geçiş

Doküman penceresi içerisinde çalışırken Control+Alt+Tab ile panel grubu odaklamasıı değiştirebilirsiniz. Odaklanamnın hangi panelde olduğunu panel başlığı çevresindeki kesikli çizgilerden oluşan çerçeveden anlayabilirsiniz. Tekrar Control+Alt+Tab kombinasyonu ile sonraki panele geçebilirsiniz. Bir önceki panele dönmek için ise Control+Alt+Shift+Tab tuş kombinasyonunu kullanabilirsiniz. Bu tuş kombinasyonları ile kod görünüm ve tasarım görünüm arasındaki geçişleri de yapabilmeniz mümkün.

Panel kısayolları

Eğer ilgilendiğiniz panel açık değilse panel klavye kısayolu ile paneli açıp kapatabilirsiniz. İstediğiniz panelin başlık çubuğu odaklı iken "Space (boşluk)" tuşu ile paneli genişletebilir "Tab" tuşu ile de panel içerisinde gezinebilirsiniz. Eğer birden fazla alt paneli olan bir panel grubunda diğer sekmelere geçmek isterseniz "CTRL+Tab" (Windows) ya da "Option+Tab" (Macintosh) kombinasyonunu kullanabilirsiniz.

Seçenekleri olan bir alana geldiğinizde ok tuşlarını kullanarak seçimleri değiştirebilirsiniz.

İletişim pencereleri içerisinde

"Tab" tuşu ile seçenekler arası geçişler yapabilirsiniz. Eğer seçenek birden fazla opsiyon içeriyorsa (örneğin açılır menüler-combo box'lar gibi) ok tuşları ile herhangi birini seçebilirsiniz.

Eğer iletişim penceresi birden fazla sekme içeriyorsa "CTRL+Tab" (Windows) ya da "Option+Tab" (Macintosh) kombinasyonunu ile sekmeler arası geçiş yapabilirsiniz.

İletişim penceresinden çıkmak için "Enter" (Windows) ya da "Return" (Macintosh) tuşuna basabilirsiniz.

Frameler ile çalışırken

Doküman penceresinde çalışırken "Alt+Üst ok" tuş kombinasyonu ile aktif frame'e odaklanılabilir. "Alt+Üst ok" kombinasyonuna basmaya devam ederek Frameset seçimi de yapmak mümkündür.

"Alt+Aşağı ok" ile alt framelere (child frames) odaklama yapılabilir. "Alt+Sağ-Sol ok" tuşları ile frameler arası geçiş yapılabilir.

Tablolar ile çalışrken

Tablo içerisinde ok tuşları yada Tab duşu ile hücreler arası geçiş yapabilirsiniz. "Control+A" (Windows) ya da "Command+A" ile hücreyi seçebilirsiniz. Tüm tabloyu seçmek için bu tuş kombinasyonuna iki kez basmanız yeterli olacaktır.

Bir tablodan çıkmak için üç defa "Control+A" (Windows) ya da "Command+A" kombinasyonuna basmanız yeterlidir.

Kısayollar tablosu

İşinize yarayacak en sık kullanılan kısayolları bu tablodan takip edebilirsiniz.

File Menüsü

Komut	Windows	Macintosh
Yeni Döküman	Control+N	Command+N
Bir HTML dosyası aç	Control+O, Yada Site dosya menüsünden doküman penceresine sürükleyin	Command+O
Frame'in içine aç	Control+Shift+O	Command+Shift+O
Kapat	Control+W	Command+W
Kaydet	Control+S	Command+S
Farklı Kaydet	Control+Shift+S	Command+Shift+S
Linkleri Kontrol et	Shift+F8	Command+F8
Geçerlilik kotrolü yap	Shift+F6	Command+F6
Çıkış	Control+Q	Command+Q

Edit (Düzen) Menüsü

Komut	Windows	Macintosh
Geri al	Control+Z	Command+Z
Tekrar yap	Control+Y ya da Control+Shift+Z	Command+Y ya da Command+Shift+Z
Kes	Control+X ya da Shift+Del	Command+X ya da Shift+Del
Kopyala	Control+C ya da Control+Ins	Command+C ya da Command+Ins
Yapıştır	Control+V ya da Shift+Ins	Command+V ya da Shift+Ins
Özel yapıştır	Control+Shift+V	Command+Shift+V
Temizle	Delete	Delete
Tümünü Seç	Control+A	Command+A
Üst etiket seç (Parent tag)	Control+[	Command+[
Alt etiket seç (Child tag)	Control+]	Command+]
Bul ve Değiştir	Control+F	Command+F
Sonrakini bul	F3	Command+G
Seçileni bul	Shift+F3	Shift+F3
Satıra git	Control+G	Command+G
Code Hınts göster	Control+Space	Command+Space
Kod içeri al	Control+Shift+>	Command+Shift+>
Kod dışarı al	Control+Shift+<	Control+Shift+<
Harici editörü aç	Control+E	Command+E
Özellikler	Control+U	Command+U

View (Görünüm) Menüsü

Komut	Windows	Macintosh
Yakınlaş	Control+=
Uzaklaş	Control+-
100% yakınlaşma ya daanı	Control+Alt+1
Seçimi sığdır	Control+Alt+0
Hepsini sığdır	Control+Shift+0
Genişliğe sığdır	Control+Shift+Alt+0
Görünüm modunu değiştir	Control+`
Tasarım görünümünü zatele	F5
Server Debug	Control+Shift+G
Live Data	Control+Shift+R
Genişletilmiş tablo modu	F6
Layout Mod	Control+F6

Tablo düzenleme işlemleri

Komut	Windows	Macintosh
Tablo Seç (Tablo'da gelişigüzel)	Control+A	Command+A
Sonraki hücreye git	Tab	Tab
Önceki hücreye git	Shift+Tab	Shift+Tab
Row (yaty sıra) ekle (geçerliden önce)	Control+M	Command+M
Tablo sonuna satır ekle	Tab in the last cell	Tab in the last cell
Geçerli satırı sil	Control+Shift+M	Command+Shift+M
Kolon ekle	Control+Shift+A	Command+Shift+A
Kolonu sil	Control+Shift+ - (hyphen)	Command+Shift+ - (hyphen)
Seçili hücreleri birleştir	Control+Alt+M	Command+Option+M
Hücreleri ayır	Control+Alt+S	Command+Option+S

Metin ekleme işlemleri

Komut	Windows	Macintosh
Yeni paragraf yarat	Enter	Return
Line break (ekstra satır) Insert et	Shift+Enter	Shift+Return
Nonbreaking space (Ekstra Boşluk) Insert et	Control+Shift+Spacebar	Option+Spacebar
Objeyi yada metni sayfa içinde başka bir yere hareket ettir	Seç ve yeni konuma sürükle	Drag selected item to new location
Obje yada metni sayfa içinde başka bir yere kopyala	Control+Seç ve yeni konuma sürükle	Option-drag selected item to new location
Bir kelime seçmek	Double-click	Double-click
Kitaplıktan bir madde ekle	Control+Shift+B	Command+Shift+B
Properties panelinde aç yada kapa sdasa	Control+Shift+J	Command+Shift+J
Yazım hatasını kontrol et (yanlızca ingilizce)	Shift+F7	Shift+F7

Yardım almak

Komut	Windows	Macintosh
Dreamweaver Yardım Konuları	F1	F1
ColdFusion yardım	Control+F1	Command+F1
Referanslar	Shift+F1	Shift+F1

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

Çok değil birkaç yıl önce sayfa tasarımlarımızı yaparken ara yüz bileşenlerini tablolar kullanarak görünmez ızgaralar üzerine inşa ederdik. Bu durum; HTML yapı dilinin web tasarımcıları tarafından hatalı yorumlanmasının ve kullanılmasının bir sonucu idi. Tarayıcılar arası çekişmelerin ve tüm Internet alışkanlıklarımızı etkileyen tarayıcı savaşlarının bir sonucu olarak ortaya çıkmıştı. Fakat Web 2.0 kavramının gündeme geldiği şu günlerde artık eski tasarım alışkanlıklarını bir kenara bırakıp modern tasarım ve web teknolojilerine cevap verecek web sayfaları tasarlamanın vakti geldi de geçiyor bile.

Modern tasarım süreçlerinin bazı yaptırımları vardır. Aslında bunlara "yaptırım" demek ne kadar doğru bilemiyorum ama geçerli bir sayfa yapmak için bunlara dikkat etmemiz gerekiyor. Makaleyi okuyan birçok arkadaş için sıkıcı bir konu olsa da bu hususları işin başından ele alarak ileride yaşanacak muhtemel hataları elimine edebilirsiniz.

Bunlardan bazıları şu şekilde sıralanabilir.

1. Sayfalar doğru doküman türü tanımlamasına (DOCTYPE) sahip olmalılar
2. Sayfa tasarım bileşenleri tablo hücreleri yerine DIV'ler içerisine yerleştirilerek konumlandırma ve hizalamalar tamamıyla CSS ile ve "CSS kutu modeli" (CSS Box Model) göz önüne alınarak yapılmalı.
3. Kullanılan HTML (veya XHTML) ve CSS kodları geçerli ve W3C standartlarına uygun olmalı ve geçerleme motorlarından (validator) hatasız olarak geçebilmeli.

Doğru DOCTYPE

İlk madde olan doğru "DOCTYPE" bilgisinin seçilmesi konusuna ilgili makalede oldukça ayrıntılı bir biçimde deyinmiştik. Genel bir özet olarak şunları belirtmekte fayda var; eğer spesifik olarak XHTML'e ihtiyaç duymuyorsanız (sayfanız XML verisi içermiyorsa) ve standart olarak bir HTML sayfası tasarlıyorsanız, başka bir deyimle amacınız sayfanızı anlaşılabilir bir biçimde kullanıcılara sunmak ise kullanmanız gereken doküman türü "HTML 4.01 Strict" tanımlamasıdır.

Doğru "DOCTYPE" tanımlaması sayfa tasarımlarımızda tarayıcılar arası kayma ve farklı görünüm sorunlarının aşılması açısından en önemli aşamalardan biridir. Eğer doküman türü doğru tanımlanmaz ise safta tarayıcı tarafından hatalı olarak, "Garip Mod" (Quirks Mod) adı verilen bir durumda yorumlanacak bu durum da sayfamızın hatalı görünmesine sebep olacaktır.

CSS Kutu modeli (BOX model)

CSS2 ile sıkça konuşulur olan bu CSS kutu modeli, sayfadaki tüm içerik alanlarını birer kutu gibi değerlendirir ve boyutlandırma ve konumlandırma işlemini özel bir algoritma ile algılar. Burada sözü geçen "kutular" içeriğimizi yerleştirdiğimiz HTML bileşenlerini ifade etmektedir. (Örneğin DIV, tablo, başlık ve/veya paragraflar) Eğer bir dokümanın "DOCTYPE" bilgisi doğru bir biçimde tanımlanmış ise modern tarayıcılar "Standart Mod" ile çalışıp bu içerik alanı bileşenlerinin boyutlarını hesaplarken şöyle bir yol izler;

Bir objenin (kutunun) tüm genişliği; içerik (content area) + çerçeve kalınlığı (border) + kenar boşluları (padding) değerlerinin toplamına eşittir. Yani CSS'de "width: 300px" olarak belirtilen bir DIV etiketinin genişliği sadece içerik alanının (content area) belirtir. Eğer bu DIV etiketinin çerçeve kalınlığı 1 piksel ve içeriğin DIV sınırlarına olan uzaklık bilgisi (padding) de 10 piksel ise bu DIV etiketinin toplam kapladığı alan:

sol çerçeve+sol boşluk+içerik+sağ boşluk+sağ çerçeve

1+10+300+10+1=322 pikseldir.

CSS kutu modeli şematik görnümü

Modern tarayıcılar Standart mod ile çalışırken bunu algılayıp yaptığınız biçimlendirmeleri buna göre yorumlarlarken, diğer taraftan Garip mod ile çalışırken eski tarayıcılar gibi yorumlarlar. Eski tarayıcılarda ise bu 300 piksellik genişlik DIV etiketinin toplam genişliğini bildirir ve içeriğin genişliği, kenar boşluları ve çerçeve genişliği bu değerden çıktıktan sonra kalan değere (300-22=278 piksel) eşittir.

CSS kutu modeli hakkında daha detaylı bilgi için;

• http://www.unbf.ca/altiustu/arsiv/2005/02/kutucuk_modeli.php
• http://www.fatihhayrioglu.com/?p=13
• http://www.yakuter.com/cssin-temeli-kutu-modeli
• http://www.godoro.com/Divisions/Ehil/...BoxModel.html

Geçerli kodlar

Bu konu, sayfalarımızın tarayıcılar tarafından daha kolay ve doğru yorumlanması ve yaptığımız hataları daha kolay algılayıp müdahale etmemizi sağlaması açısından oldukça önemli bir yere sahiptir. Web tasarımı ile ilgilenmeye başlayan birçok kullanıcı yaşadığı basit sorunların neden kaynaklandığını, sayfalarını geçerli hale getirmeye çalışırken görebilirler.

Örneğin bir etiketi (HTML tag) kullanılmaması gereken bir yerde kullanıldığında bu standartlara uygun olmayan bir sayfadır ve muhtemelen tarayıcı tarafından hatalı yorumlanmaya sebep olan bir durumdur. Acemi kullanıcı bu geçerlilik kuralını sayfasına uyguladığında yaşadığı sorunu da halletmiş olacaktır. Bu geçerlilik kuralları web geliştiricilerin işlerini kolaylaştırmak ve standart bir kod yapısı ile uyumluluğu arttırmak amacı ile konmuşlardır. Neden sayfalarımızı geçerlememiz gerektiği ve bunun için yapabileceklerimiz hakkında daha detaylı bilgiyi Roger Johansson'ın "Web Standartlarını Kullanarak Geliştirmek" başlıklı nefis makalesinden alabilirsiniz.

Sayfalarımızın standartlara uygun olup olmadığını W3C (web komisyonu) geçerleme motorundan kontrol ettirebilir hatalarımızı daha yakından görebiliriz.

Evet, biraz uzun bir giriş oldu fakat yeni bir sayfa yapmaya başlamadan önce bunları göz önünde bulundurmamız gerekmektedir. Şimdi uygulamaya geçebiliriz.

Sayfamızın tasarımını yaparken tablolar yerine CSS ve DIV kullanacağımızı belirtmiştik. Birçok yeni başlayan kullanıcının yaşadığı en büyük handikaplardan biri olan tasarımda istenilen objenin istenilen yere yerleştirilememesi ve hizalanamaması sorununu aşmak için CSS kullanacağız. Tabi bunun için en azından temel CSS bilgisine ihtiyacımız var. Bu makalede CSS bilgisine girip konuyu fazla dağıtmak istemiyorum. Genel olarak temel noktalara deyineceğim. Fakat burada bahsi geçen uygulamaları anlayabilmeniz için ilgili CSS kaynaklarından kendinizi geliştirmenizi şiddetle tavsiye edeceğim. Aksi takdirde söz ettiğimiz şeyler havada kalacaktır.

İçinizde CSS Zen Garden'ı (ZG) görenleriniz olmuştur. ZG birçok web geliştiricin ilham kaynağı olmuş ve CSS'in sadece metinleri biçimlendirip rollover text-linkler yapmaktan öte tek başına bir web sayfasını baştan aşağı CSS ile biçimlendirilebileceğini bizlere göstermiştir. İncelediğinizde fark edeceğiniz üzere ZG'daki bütün tasarımların HTML kaynak kodları aynı olup değişen tek şey sayfaya bağlı olan ".css" dosyasıdır. Söz gelimi "bu" sayfa ile "şu" sayfanın kanyak kodlarına bakarsanız birebir aynı olduklarını görebilirsiniz :) Oldukça etkileyici değil mi?

Bizde sayfamızı tasarlarken CSS'in bu güçlü özelliklerinden faydalanacağız. Bu makalede hazırlayacağımız örnek tasarım 2 veya 3 sütunlu standart blog ve portallerde görebileceğiniz sayfa düzenidir. Fatih Harioğlu'nun sayfasındaki bahsi geçen makaleyi temel alarak anlatıma devam edeceğim. Tasarımın aşağıda görüldüğü üzere sabit genişlikte bir dış çerçeve (#sayfa), başlık bölümü (#ustAlan), sol sütun (#anaMenu), içerik sütunu (#icerik) ve alt kısımdan (#altAlan) oluşmaktadır.

2 sütunlu ve sabit genişlikli genel sayfa tasarımının şematik görünümü

Sayfanın bitmiş halini görmek için buraya indirmek için ise buraya tıklayınız.

Şimdi DW'da File / New menüsü ile yeni bir HTML dokümanı açın. Yeni dokümanı açarken "Document Type (DTD)" olarak "HTML 4.01 Strict" seçili olduğuna dikkat edin. Dokümanı oluşturup uygun bir konuma kaydedin.

Yeni bir HTML dokümanı oluşturuyoruz

Şimdi sayfaya, tüm tasarımı kapsayıp ve toparlayan çerçeve olan "sayfa" isimli bir DIV ekliyoruz. Bunun için "Insert" paneldeki "Layout" sekmesi altında yer alan "Insert Div Tag" düğmesini ya da Insert / Layout Objects / Div Tag menüsünü kullanabilirsiniz.

Sayfaya bir DIV ekliyoruz

Açılan iletişim penceresinden "ID" kısmına "sayfa" yazıyoruz. "Class" bilgisini şimdilik boş bırakıyoruz. Birazdan tüm DIV'ler için stil tanımlamalarını toplu olarak yapacağız.

DIV ekleme iletişim penceresi

Şimdi eklediğimiz "sayfa" isimli DIV etiketinin içine sırayla "ustAlan", "anaMenu", "icerik" ve "altAlan" isimli 4 tane daha DIV ekliyoruz. Sayfanın DW içersindeki son hali şuna benzemelidir;

Sayfanın son halinin DW içerisindeki görünümü

"sayfa" DIV'inin içerisine diğer DIV'leri eklerken kolaylık olması açısından "sayfa" içerisinde "Content for id "sayfa" Goes Here" yazısını seçip bir defa ENTER (Return) tuşuna basarak yeni bir paragraf oluşturabilirsiniz. Bütün DIV'leri ekledikten sonra sondaki veya aralardaki fazla paragrafları silmeyi unutmayın.

CSS tanımlamaları

Sayfaya herhangi bir müdahale yapmadan "CSS Styles" panelini eğer açık değilse Window / CSS Styles menüsü veya Shift+F11 tuş kombinasyonu ile açıyor ve sağ üst köşedeki sembole tıklayıp açılan menüden "New..." seçeneğine tıklıyoruz.

Yeni bir stil tanımlamaya başlıyoruz

Açılan iletişim penceresinden "Selector type" kısmından "Tag (redefines the look of a spesific tag)" seçeneğini seçiyor, "Tag" kısmından "body" etiketini buluyor ve "Define in" bölümünden de "New Style Sheet File" seçeneğini seçiyoruz. "OK" diyerek "body" etiketi için stil tanımlaması yapmaya başlıyoruz. Bu stil yarattığımız ilk stil olduğu için DW yeni bir stil dosyası yaratacak ve bunu nereye kaydetmek istediğiniz soracaktır. Şuan çalıştığınız doküman ile aynı veya herhangi bir alt dizinde bir yere uygun bir isimle (örneğin stiller.css) stil dosyasını kaydedip işleme devam ediyoruz.

Yeni stil oluşturma iletişim penceresi

"body" etiketi HTML dokümanımızın ana gövde kısmını belirten bölüm olup sayfa arka fon rengi, kenar boşlukları, metin rengi ve boyutu gibi özellikleri tanımlamamıza yarar. Stil özellikleri iletişim penceresinden sayfamız ile ilgili ana biçim özelliklerini belirliyoruz. Bu örnekte arka fonu açık mavi olan ve kenar boşlukları olmayan bir sayfa tasarlayacağız. Bunun için neleri değiştireceğinizi bildiğinizi varsayarak bu kısmı hızlı geçiyorum. "body" için stil özellikleri şu şekilde olacak;

• Type
  • Font: Verdana, Arial, Helvetica, sans-serif
  • Size: 11 pixels
  • Line height: 13 pixels
  • Color: #000000
• Background
  • Background-color: #E0F0F8
• Block
  • Text-align: center
• Box
  • Padding: 0 pixels
  • Margin: 0 pixels

Body için stil özelliklerini belirtiyoruz

"OK" dediğiniz anda dokümanın arka fon rengi açık mavi olacak ve sayfadaki tüm yazılar ortalanacaktır. Endişelenmeyin hep böyle kalmayacak. Metinleri ortalamamızın sebebi tasarımın tam ortada olmasını ve kullanıcının çözünürlüğü ne olursa olsu daima tarayıcının ortasında yer almasını sağlamaktır.

"body" biçimlendirmesini de bu şekilde yaptıktan sonra DIV'leri biçimlendirmeye başlayabiliriz. Tekrar CSS Styles panelinden sağ üst köşedeki düğmeye tıklayıp "New..." diyerek yeni bir stil tanımlıyoruz. Açılan iletişim penceresinden "Selecto Type" olarak "Advanced (IDs, pseudo class selectors)" seçeneğini seçiyoruz. "Selector" olarak "#sayfa" yazıyoruz.

#sayfa için stil tanımlaması yapıyoruz.

İçinizde neden stil ismi olarak "#" ile başlayan bir isim girdiğimizi merak edenler olabilir. Bunu şu şekilde açıklayabiliriz; hatırlarsanız biraz önce "sayfa" ID bilgisine sahip bir DIV yaratmıştık. CSS tanımlamalarında "#" ile başlayan stiller birer ID tanımlamalarını belirtir ve sadece ilgili ID'ye sahip elemanları ve bu elemana bağlı alt elemanları kapsar. Tahmin edeceğiniz üzere de "#sayfa" isimli bir tanımlama "sayfa" ID'li DIV'i yani tasarımımızı çevreleyen ana DIV'i belirtmektedir.

#sayfa

"#sayfa" için stil özelliklerini tanımlayarak işleme devam edebiliriz. Ben özellikleri şu şekilde belirledim.

• Block
  • Text-align: left
• Box
  • width: 760 pixels
  • Padding: 0 pixels
  • Margin:
    • Top: 0 pixels
    • Right: auto
    • Bottom: 0 pixels
    • Left: auto

Burada gördüğünüz üzere "sayfa" isimli DIV elemanının genişliğini 760 piksel olarak belirledik. Bu değer 800x600 çözünürlükte dahi tarayıcı ekranına sığabilen bir değerdir. Bu, "sayfa" DIV'i tüm tasarımı dışardan çepeçevre sardığından tasarımımızın maksimum genişliğinin 760 piksel olabileceği anlamına geliyor. Aynı zamanda sayfanın ortalanması içinde "margin" yani objenin diğer tasarım elemanlarına ve objelere olan mesafe bilgisinde sağ ve sol boşluk değerlerinin "auto" olarak belirtilmesi gerekiyor. Bu değer sayesinde "icerik" DIV'inin sağ ve sol kenarlara olan uzaklığı otomatik olarak ayarlanacak başka bir değişle her iki yana da eşit uzaklıkta olması (sayfanın ortasında) sağlanacaktır. Dikkat çekmek istediğim bir diğer nokta da "padding" yani içeriğin kenarlara olan mesafe bilgisinin 0 piksel olarak ayarlanmasıdır. Bu tür çok elemanlı sayfa tasarımlarında dış objelerin "margin" ve "padding" değerlerinin 0 olarak atanıp daha sonra iç DIV ve elemanların kendi değerlerinin belirtilmesi her zaman için daha pratik ve sağlıklı bir yöntemdir. Tabi dış objelerin de değişik değerlere sahip olduğu durumlar olabilir bu tamamen isteğinize ve gereksinimlerinize bağlı bir konudur.

"#sayfa" stil tanımlamasını yaptığınız anda sayfa içeriği ortalanacak fakat metinler sola hizalı olacak şekilde konumlandırılacaktır. Evet, yavaş yavaş sayfamız biçimlenmeye başladı.

#ustAlan

Tekrar yeni bir stil yaratıyoruz ve yine "Selecto Type" olarak "Advanced (IDs, pseudo class selectors)" seçeneğini seçiyoruz. "Selector" olarak "#sayfa #ustAlan" yazıyoruz. Bu "ustAlan" yani sitemizin üst kısmını temsil eden DIV'in biçimlendirilmesi anlamına geliyor.

Bir CSS tanımlaması yaparken aralarında boşluk bırakarak yapılan isimlendirmeler, "element > alt element" şeklinde stil tanımlamaları yapmamıza olanak sağlar. Bu örnekte "sayfa" DIV'inin içindeki "ustAlan" DIV'ini biçimlendirmek için "#sayfa #ustAlan" yazıyoruz. Yine aynı şekilde "ustAlan" DIV'inin içindeki "H1" başlık biçimini CSS ile biçimlendirmek için de "#sayfa #ustAlan h1" yazmamız yeterlidir.

"ustAlan" için stil özellikleri; "#sayfa #ustAlan"

• Background
  • Background-color: #F36507
• Box
  • Width: 760 pixels
  • Height: 75 pixels
  • Padding: 0 pixels
  • Margin: 0 pixels
• Border
  • Bottom: Solid, 7 pixels, #000000
• Positioning
  • Type: Relative

"ustAlan" ın genişliğini "icerik" ile aynı yani 760 piksel, yüksekliğini de 75 piksel olarak ayarladık. "margin" ve "padding" değerlerini 0 piksel olarak girdik. Hoş bir görünüm elde etmek için 7 piksellik bir alt çerçeve yaptık. İleride yapacağımız pozisyonlama belirtmelerinden etkilenmemesi için de "Positioning" bölümünden "Type" değerini "Relative" olarak ayarladık.

#anaMenu

Aynı şekilde "anaMenu" için stil özellikleri; "#sayfa #anaMenu"

• Background
  • Background-color: #FFFFFF
• Box
  • Width: 200 pixels
  • Padding: 0 pixels
  • Float: left
  • Margin:
    • Top: 5 pixels
    • Right: 0 pixels
    • Bottom: 5 pixels
    • Left: 0 pixels

Dikkat ettiyseniz "anaMenu" için genişliği 200 piksel girdik, "Float" değeri olarak da "left" verdik. Böylece sola hizalanmış 200 piksel genişliğinde bir sütunumuz oldu. (Objeleri hizalamak için CSS içerisinde "Float" özelliğini kullanmaktayız), "magrin" değerlerini de "Top" ve "Bottom" için 5 piksel diğerlerini ise 0 piksel olarak ayarladık. Böylece üst ve alt kısımda yani "ustAlan" ile "anaMenu" ve "altAlan" ile "anaMenu" arasında 5 piksellik bir boşluk elde etmiş olduk.

#icerik

"icerik" alanı için stil özellikleri; "#sayfa #icerik"

• Background
  • Background-color: #FFFFFF
• Box
  • Width: 560 pixels
  • Padding: 0 pixels
  • Float: right
  • Margin:
    • Top: 5 pixels
    • Right: 0 pixels
    • Bottom: 5 pixels
    • Left: 0 pixels

"anaMenu" DIV'ini sola hizaladığımıza göre bu içerik alanını da sağa hizalıyoruz. "Float" değerini "right" vererek bu hizalama işlemini yapabiliriz. Aynı şekilde sadece üstte ve altta 5 piksellik mesafe vererek diğer "margin" değerlerini 0 piksel olarak giriyoruz. DIV'in genişliğini belirten "width" olarak da 560 piksel giriyoruz. Burada bu genişlik değeri oldukça önemli bir yere sahip. Hatırlarsanız CSS kutu modelinin işleyişinden bahsetmiştik. Tasarımımızı yaparken bunu aklımızdan çıkartmamamız gerekiyor. Basit bir matematiksel hesap ile şöyle bir sonuç elde edebiliriz.

#anaMenu: 200px

#icerik: 560px

Toplam: 760px

"#sayfa" için genişliği 760 piksel olarak belirtmiştik. Yani "sayfa" DIV'inin içindeki tüm elemanlarının "margin", "padding", "border" ve genişlik değerlerinin toplamı 760'ı geçmemelidir. Aksi takdirde "Float" özelliğinin bir belirtimi olarak objeler genişlikleri ve hizalamaları ölçüsünde alana sığdırılmak için kaydırılırlar. Aynı matematik hesabını şu şekilde genişletebiliriz

#anaMenu: 200px = (1px sol çerçeve + 5px sol padding + 188px width + 5px sağ padding + 1px sağ çerçeve)

#icerik: 560px = (5px sol padding + 550px width + 5px sağ padding)

Toplam: 760px

Genişlikleri girerken bunlara dikkat etmemiz halinde herhangi bir sorunla yaşamadan tasarım sürecini tamamlayabilirsiniz.

Objelerin kutu modelinden nasıl etkilendiklerini görmek için "icerik" alanının genişliğini 561 piksel olarak girip sayfayı tarayıcıda deneyebilirsiniz. Sayfayı tarayıcıda açtığınızda "icerik" alanının "anaMenu" ile aynı hizada olması gerekirken aşağıya kaydığını göreceksiniz. Gördüğünüz gibi 1 piksellik bir hata bile CSS kutu modelinden etkilenmektedir. Bu sorun birçok acemi kullanıcının anlam veremediği kaymaların başlıca sebebidir. Hesaba katılmayan ya da unutulan bir "padding" veya "margin" değeri bu tür kaymalara sebep olur ve geliştiriciyi çileden çıkarabilir.

#altAlan

"altAlan" için stil özellikleri "#sayfa #altAlan"

• Type
  • Size: 10 pixels
• Background
  • Background-color: #B0D2E4
• Box
  • Width: 740 pixels
  • Padding: 10 pixels
  • Margin: 0 pixels
  • Clear: both

Genişliğin 740 piksel olduğu dikkatinizi cezp etmiş olsa gerek. Sebebinin 10 piksel olarak tanımlanan "padding" değerinden ileri geldiğini söylememize gerek yok sanırım. (10+740+10=760px) Diğer alanlardan farklı olarak "altAlan" için "Clear" özelliğini "both" olarak tanımladık. "Clear" özelliği ile bir objeyi, kendinden önce gelen objelere uygulanan "Float" etkisinden kurtarmak mümkündür. Eğer "altAlan" DIV'i için "Clear" tanımlamasını "both" olarak yapmasaydık, "altAlan" DIV'i "icerik" DIV'i içerisindeki içeriğin altında kalacak idi. "Float" ve "Clear" ile ilgili açıklayıcı bir yazı için Fatih Hayrioğlu'nun makalesine göz atabilirsiniz.

Dokümanın DW içerisindeki son görünümü

Evet, tanımlamaları yaptıktan sonra dokümanınızı ve CSS stil dosyasındaki değişiklikleri kaydedip tarayıcınızda deneyerek nasıl bir sonuç elde ettiğimizi görebilirsiniz.

Tasarımın tarayıcıdaki son görünümü

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ü

Elastik sayfalar

Eğer sayfa tasarımının sabit bir değerde değil de kullanıcının ekran çözünürlüğü ve tarayıcı penceresinin genişliğine göre otomatik olarak boyutlandırılmasını sağlamak istiyorsanız; elastik tasarımlar (Liquid layout) kullanmalısınız.

Hizalama teknikleri açısından herhangi bir fark içermeyen bu sayfalarda yapmanız gereken tek şey birimleri piksel yerine yüzde (%) olarak belirtmeniz gerektiğidir. Bu bakımdan "#sayfa" için "width" değerini 760 piksel yerine "95" olarak birimi de "%" girerseniz sayfa genişliği elastik olarak genişleyecektir. Tabi "#ustAlan", "#anaMenu", "#icerik" ve "#altAlan" için de "width" değerlerini "%" cinsinden girmeniz gerekmektedir.

Birimleri % olarak girmelisiniz

Burada genişlikleri birbirine göre oranlamanız da mümkün tabiî ki. Örneğin "#anaMenu" için "%25", "#icerik" için ise "%75" olarak girmelisiniz.

Elastik sayfanın tarayıcıdaki görünümü

Birimleri "%" olarak kullanırken CSS kutu modelinin halen devrede olduğunu ve verdiğiniz bu "width" değerlerinin sadece içerik alanının genişliğini belirttiğini unutmamalısınız. Örnek sayfanın resmine bakarsanız "altAlan" IV'inin diğer DIV'lerden daha geniş olduğunu göreceksiniz. Bu durum "altAlan" için önceden tanımladığımız 10 piksellik "padding" değerinden kaynaklanmaktadır. Bu tür uygulamalarda "padding", "margin" ve/veya "border" değerlerini göz önünde bulundurarak "%" değerleri girmekte fayda vardır.