Panel All Rules bölümünde sayfam?z içerisinde ili?kili ve önceden tan?ml? stillerin bir listesini bar?nd?r?yor. Bu liste sayesinde stilleri seçili objelere uygulayabiliyor ve stillerimizi yönetebiliyoruz.

All Rules’dan bir stili seçti?imiz anda Properties k?sm?nda ilgili stile ait özellikler ve parametreler listeleniyor. Add Properties seçene?i ile de stilimiz için yeni bir özellik tan?mlama mümkün. Özelli?in türüne ve stilin konumuna göre DW bize olas? seçenekler ve tan?mlamalar? Code hints’e benzer bir ara yüz ile sunuyor.

Ayn? panel içerisinde yer alan “Current” sekmesi ile sayfada herhangi bir alana t?klad???m?zda o alan? etkileyen CSS özelliklerini görüntülemeye yar?yor. Örne?in Current sekmesine geçip bir ba?l??a ya da stiller ile biçimlendirilmi? bir metne t?klad???n?z anda bu alanda stil özellikleri listelenmekte ve bize bu eleman?n hangi stillerden etkilendi?i konusunda fikir vermektedir.

Panelin alt k?sm?nda bulunan dü?meler ile de panel menüsündeki i?lemleri gerçekle?tirmek mümkün. Sa? alt k?s?mda bulunan

• Attach Style Sheet: Harici .css uzant?l? stil dosyalar?n?z? çal??t???n?z doküman ile ili?kilendirmeye yarar. Böylece tek bir stil dosyas? ile sitenizdeki tüm sayfalar? biçimlendirebilir ve de?i?ikliklerin tek bir .css dosyas? üzerinden yürümesini sa?layabilirsiniz. Buraya t?klad???m?zda aç?lan ileti?im penceresinden Browse diyerek ilgili CSS dosyas?n? seçebiliriz.
  
  
  

  Harici CSS dosyas?n? doküman ile ili?kilendirmek

  
  
  • Add as: seçene?i stilin nas?l doküman içerisine dahil edilece?ini belirtiyor. "Link" dedi?imizde ornek.css dosyas?n? "link" tekni?i sayesinde doküman ile ili?kilendiriyor. "Import" dedi?imizde ise ornek.css dosyas? "@inport" tekni?i ile doküman?m?z ile ili?kilendiriliyor. Bu iki yöntem ?u a?amada bizim için anlam ifade eden bir fark ta??m?yor, herhangi birini seçebilirsiniz
  • Media: Bu stilin ne tür medyalar için görüntülenmesi gerekti?ini belirtiyor. (Style rendering k?sm?nda konunun ayr?nt?l? aç?klamas?n? bulabilirsiniz)
  • Sample style sheets: DW içerisinde standart olarak gelen önceden haz?rlanm?? haz?r stil dosyalar?n? sayfam?za ili?kilendirebilece?imiz bir ara yüz açar. (Ayr?nt?lar için Haz?r stiller k?sm?na bakabilirsiniz)
• New CSS Rule: Yeni bir stil yaratmaya yarar.
• Edit Style: Seçili olan stili düzenlemeye yarar.
• Delete CSS Rule: Seçili stili siler.

Sol alt k?s?mda bulunan

• Category View: Stil özelliklerini kategorilere ay?rarak listeler.
  
  
  

  Kategori görünümü

  
  
• List View: Ne kadar özellik varsa hepsini listeler Fakat tüm özellikleri gösterdi?i için biraz kafa kar??t?r?c? olabilir.
  
  
  

  Liste görünümü

  
  
• Set Properties View: Standart olarak DW kurulumunda gelen görünüm türüdür. Bence en ba?ar?l? ve kullan??l? görünüm türü olmakla beraber az yer kaplar.

            Yaratt???m?z ya da d??ar?dan harici olarak ili?kilendirdi?imiz CSS stilleri herhangi bir nesneye uygulamak için öncelikle ilgili nesneyi (metin grubu, paragraf, link, resim,tablo veya DIV) seçmemiz gerekmektedir. Ard?ndan Properties paneli üzerinden “Style” listesinden uygun bir stil seçebiliyoruz.

Veya yine nesneyi seçtikten sonra CSS Styles panelinden uygulamak istedi?imiz stili seçip sa? t?kl?yoruz ve “Apply” diyoruz yine ayn? sonucu alaca??z.

Bunu da be?enmezseniz nesneye tasar?m görünümünde çal???rken sa? t?klay?p CSS styles / stil ismi ?eklindeki menüden de stilimizi uygulayabiliyoruz.

DW MX ile gelen çok kullan??l? bir özellik olan “Design time style sheet” özelli?i; özellikle profesyonel tasar?mc?lar?n ba? balesi olan ve include ya da dosyalar? ?ablon kütüphanesi objeleri (Library) ile çal???rken kar??la??lan tasar?m problemlerini ortadan kald?r?yor.

DW ile çal???rken bazen CSS stilleri do?ru bir biçimde göremeyebilirsiniz. Ancak taray?c?da çal??t?r?ld???nda izlenebilecek olan bu stilleri DW içinde çal???rken kullanabilmek için DW’?n “Design Time Style Sheet” özelli?ini kullanaca??z.

Peki nedir bu Design Time Style Sheet ?

E?er programlama dilleri ile bir web geli?tirme projesinde çal??t?ysan?z (ASP, PHP gibi) include ile çal???rken bu stillere ihtiyac?n?z oldu?u anlarda onlar? kullanamad???n?z? bilirsiniz. Yada ?ablon (template) veya ?ablon kütüphanesi (Library) dosyalar? ile çal???rken de ayn? sorun söz konusu tabi. ??te Design Time Style Sheet özelli?i ile DW’da çal???rken önceden belirledi?iniz bir .css dosyas? doküman düzenleme s?ras?nda (sayfaya ba?lanm??–ba?lanmam?? fark etmez) aktif hale getirilecek ve en do?ru biçimlendirmeyi yapman?z sa?lanacakt?r. Di?er taraftan tam tersi bir durum da söz konusu olabilir. Sayfa tasar?m?n? yaparken baz? stillerin gizlenmesini ama taray?c?da do?ru görünmesini istiyor olabilirsiniz. ??te Design time style sheet bize bu imkânlar? sa?l?yor.

Design Time Style Sheet özelli?ini kullanmak için CSS Styles panelinin özellikler menüsünden “Design Time …” seçene?ine t?klaman?z yeterlidir.

Aç?lan diyalog penceresinden “Show only at Design Time” k?sm? sadece tasar?m an?nda görüntülenecek olan CSS Stil dosyalar?n? belirtiyor. + i?aretine t?klayarak istedi?iniz kadar .css dosyas? ekleyebilirsiniz. “Hide at Design Time” ise tasar?m an?nda gizlenmesi gereken .css dosyalar?n? belirtiyor. Oldukça kullan??l? bir özellik.

Style rendering stillerimizin görüntülenece?i daha do?rusu sayfa görünümüne kat?laca?? (burada rendering olarak tabir edilen olay) medya türünü belirten bir terminolojidir. Söz gelimi siteniz tasar?m? için farkl? medyalar için farkl? CSS dosyalar? haz?rlay?p bunlar? sayfan?z ile ili?kilendirirseniz, siteniz eri?ilebilirlik seçeneklerini en üst düzeyde tutmu? olursunuz. Örne?in yaz?c? ç?kt?s? s?ras?nda; site tasar?m?ndaki logo ve renkli tasar?m bile?enlerinin yaz?c? kartu?lar?n? bitirece?i yada ç?kt? kalitesini dü?ürece?i gibi sitenizdeki içerik için ç?kt? alan ziyaretçinin sitenizden so?umas?na sebep olabilmektedir.

Bu taray?c?lar?n destekledi?i bir özellik olmakla beraber DW içerisinde tasar?m s?ras?nda nas?l göründü?ünü görmek isteyebilirsiniz. ??te bunun için DW geli?tiricileri çal??ma esnas?nda hangi medya türüne göre stil görüntüleme seçeneklerinin aktif olaca??n? belirten bir özellik olan Styl rendering’i bizlere sunmaktalar.

Varsay?lan olarak kapal? gelen Style Rendering toolbar’? açmak için View / Toolbars / Style Rendering menüsünü kullanabilirsiniz.

Bu toolbar içerisinden DW’da kullan?m s?ras?nda hangi medya türüne göre stil görüntülenece?ini belirtebilirsiniz. Ba?l?ca media türleri ?u ?ekildedir

• Render Screen Media Type: Ekranlar için görüntüler. Bu PC kullan?c?lar? oluyor.
• Render Print Media Type: Yaz?c? ç?kt?s? s?ras?nda görüntülenir.
• Render Handheld Media Type: Mobil cihazlarda (smartphone veya PDA cihazlar gibi) görüntülenir.
• Render Projection Media Type: Projeksiyon cihazlar?nda görüntülenir.
• Render TTY Media Type: Teletype olarak tabir edilen uzak yaz?c? cihazlar?nda görüntülenir.
• Render TV Media Type: Televizyon ekran?nda görüntülenir.

Attach style sheet seçene?i s?ras?nda stilimiz için hangi medya türünün geçerli olaca?? seçmemizde mümkün. (bu özellik taray?c?lar? etkiliyor)

Buradan “all” derseniz her türlü görüntüleme medyas? için geçerli olabilece?i gibi; “projection” projeksiyon cihazlar?nda görüntülenece?i, “screen” sadece ekranlarda görüntülenebilece?i, “print” dedi?imizde ise sadece yaz?c? ç?kt?s? s?ras?nda görüntülenmesi anlam?na geliyor. (Bu ?ekilde sayfa tasar?m?na normal tasar?m stili ile birlikte print medyas? için sadece gerekli k?s?mlar?n göründü?ü di?er logo ve menülerin CSS özellikleri ile gizlendi?i bir stil dosyas? ili?kilendirirseniz ziyaretçileriniz sitenizden yaz?c? ç?kt?s? al?rken zorlanmayacaklard?r.)