Dreamweaver ve CSS stiller (CSS Styles)

Transkript

1 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 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. CSS styles paneli 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. 1

2 CSS styles paneli ile stile yeni bir parametre eklemek oldukça kolay 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. 2

3 CSS styles paneli current sekmesi görünümü 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 3

4 Stil yönetim dü?meleri 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. 4

5 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? 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 5

6 Panel yönetim dü?meleri Category View: Stil özelliklerini kategorilere ay?rarak listeler. 6

7 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. 7

8 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. 8

9 Properties paneli üzerinden CSS stilleri seçip uygulayabilirsiniz 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. 9

10 CSS styles pnaelinde n stil uygulamak 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. 10

11 Sa? tu?u kullanarak stil uygulamak 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. 11

12 CSS panel müsünden Design Time seçene?ini seçiyoruz 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. 12

13 Design time style sheet ileti?im penceresi 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. 13

14 Style rendering toolbar 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.) 14

15 Medya türleri seçimi DW içerisinde gelen haz?r stil?ablonlar?n? kullanarak kendinize yeni ufuklar açabilirsiniz. File / New menüsü ile yeni doküman olu?turma penceresini açt???n?zda CSS Style Sheets kategorisi alt?nda haz?r olarak tan?mlanm?? ve bir sayfan?n tüm stil ihtiyaçlar?n? kar??layacak CSS tan?mlamalar?n? içeren?ablonlara ula?abilirsiniz. 15

16 Haz?r stil dosyalar?n? kullanmak Doküman?m?za harici bir stil dosyas? ili?kilendirme esnas?nda Sample style sheets seçene?i ile de haz?r stil dosyalar?n? sayfam?za ili?kilendirebilece?imiz bir ara yüze ula?mak mümkün. CSS konusunda yeni olan arkada?lar bu stilleri inceleyerek bir stil dosyas?nda ne tür stiller olmas? gerekti?ini kavrayabilirler. 16

17 Haz?r stil dosyalar?n?n seçimi Kaynak 17