Stil Sayfaları Geliştirmek

Transkript

1 A-PDF Split DEMO : Purchase from to remove the watermark 4 Stil Sayfaları Geliştirmek Cascading Style Sheets (CSS) olarak adlandırılan stil sayfaları, metinler ve resimler gibi çeşitli elemanların Web sayfalarınızda nasıl görüneceğini tanımlamanızı sağlar. Cascading (basamaklı) terimi, stillerin sırasını ve öncelik düzeyini tanımlar. Stil (style), tek bir isimle tanımlanan bir dizi biçimlendirme niteliğidir. Bu da Web tarayıcısına bir elemanı nasıl görüntülemesi gerektiğini bildirir. HTML belgelerindeki stiller, biçimlendirme, görünüm ve yerleşim düzeni üzerinde geniş bir kontrol imkânı sağlar. Stillerden faydalanmanın avantajını şöyle özetleyebiliriz: Bir stilin niteliklerinden birinde bir değişiklik yaptığınızda, bu stil tarafından kontrol edilen bütün elemanlar otomatik Bu derste CSS aracılığıyla Dreamweaver daki üç stil tipini (sınıf [class] stilleri, etiket [tag] stilleri ve gelişmiş [advanced] özel stiller) kullanarak metne çeşitli biçimlendirme seçenekleri uygulayacaksınız.

2 olarak güncellenir (stili nasıl oluşturduğunuza bağlı olarak tek bir belgede ya da bütün site genelinde). Font, büyüklük ve renk gibi standart niteliklerden sadece CSS ile erişilebilen gelişmiş netin niteliklerine (satır aralıkları [leading] gibi) kadar pek çok ayarda değişiklik yapabilirsiniz. Stil sayfalarını kullanarak örneğin 1,25 cm lik kenar boşluğuna sahip bir paragraf oluşturabilir, bunun satırlarının arasını 20 punto yapabilir ve metinde kullanılan fontun puntosunu 12 olarak ayarlayabilirsiniz. Böyle bir şeyi CSS olmadan yapamazsınız. Web tarayıcılarının 4.0 ya da daha yeni sürümleri CSS desteğine sahiptir. Internet Explorer 3.0 bazı stil niteliklerini tanısa da eski Web tarayıcıları CSS i görmezden gelir. En iyi sonucu, sürümü 5.0 ve daha yeni olan Web tarayıcıları verir. Bunlar pek çok özelliği destekler. Tek bir sayfayı biçimlendirmek için belgede saklanan bir dahili stili kullanabilirsiniz. Çeşitli belgeleri birden fazla sayfada (aynı metin biçimlendirme özelliklerini koruyacak şekilde) bir bütün olarak kontrol etmek isterseniz bir harici stil sayfasından da faydalanabilirsiniz. Çeşitli belgelerin görünümünü, aynı metin biçimlendirme özelliklerini birden fazla sayfada koruyacak şekilde bir bütün olarak kontrol etmek isterseniz bir harici stil sayfasından da faydalanabilirsiniz. Bu stil sayfası Web sayfasının dışında bulunur ve geçerli sayfaya bağlanır. Böyle durumlarda metinlerin ve sayfa yerleşim düzeninin bütün site içinde tutarlı olmasını sağlamak en iyisidir. Çünkü bu öğeler sayfadan sayfaya ciddi ölçüde değişiklik gösterirse, ziyaretçileriniz başka bir siteye geçtiklerini düşünebilir. Stil sayfalarını kullanmanın diğer bir avantajı da, Web sayfalarının içeriğini biçimlendirmeden ayrı tutabilmeyi sağlamasıdır. Sonuç olarak bu, içeriğinizin görünümü üzerinde daha hassas bir kontrol imkânı sağlar ve Web sitenize içerik eklemek daha hızlı ve daha az karmaşık bir işlem halini alır. İçeriği bu şekilde izole etmek, sitenin güncellenmesi ve devamlılığının sağlanmasını çok daha basit bir hale getirir. Web sayfalarınızın biçimlendirme özelliklerini stil sayfalarıyla kontrol ederek farklı platformlar ve Web tarayıcıları arasında daha uyumlu sayfalar oluşturabilirsiniz. Bu derste, metnin görünümünü etkileyen stillere sahip temel stil sayfaları oluşturmayı öğreneceksiniz. Bu süre içerisinde CSS in özelliklerini öğrenecek ve nasıl çalıştığını kavrayacaksınız. Daha sonra burada öğrendiklerinizi temel bir CSS tabanlı yerleşim düzeni oluşturarak uygulayacaksınız. Kitabın geri kalan kısmında da ilave CSS teknikleri öğrenerek bu becerilerinizi geliştirecek ve metin dışındaki elemanlara da (örneğin Ders 5 te resimlere) stiller uygulayacaksınız. 108 DERS 4

3 Bu dersin sonunda elde edilen sayfalara ait örnekleri görmek isterseniz, Lesson_04_ CSS/Completed klasöründeki index.html ve sangha.css dosyaları ile Lesson_04_CSS/ Completed/about klasöründeki index.html dosyasını açın. Neler Öğreneceksiniz? Bu derste şunları öğreneceksiniz: Bir sayfanın arka plan rengini ayarlayacaksınız. Font, renk ve büyüklük gibi metin niteliklerini uygulayacaksınız. Harici bir stil sayfası oluşturacaksınız. Mevcut bir stil sayfasına stiller ekleyeceksiniz. Bir stili düzenleyeceksiniz. Özel bir stil oluşturacaksınız. Harici bir stil sayfasına bağlantı atayacaksınız. Bir dahili stil oluşturacaksınız. Dahili stilleri harici stillere dönüştüreceksiniz. Temel bir yerleşim düzeni oluşturacaksınız. Yaklaşık Süre Bu dersin tamamlanması yaklaşık 3 saat sürecektir. Ders Dosyaları Başlangıç Dosyaları: Lesson_04_CSS/index.html Lesson_04_CSS/about/index.html Lesson_04_CSS/Text/about.txt Tamamlanmış Proje: Lesson_04_CSS/Completed/index.html Lesson_04_CSS/Completed/about/index.html Lesson_04_CSS/Completed/sangha.css Stİl Sayfaları Gelİştİrmek 109

4 Bir Arka Plan Rengi Belirlemek Dreamweaver da bir sayfanın arka plan rengini Ders 3 te bağlantı renklerini tanımlarken kullandığınız gibi bir palet kullanarak kolayca değiştirebilirsiniz. Bu uygulamada Page Properties iletişim kutusunu kullanarak renk paletini açacak ve index.html belgesinin ark plan rengini değiştireceksiniz. 1. Lesson_04_CSS klasöründeki index.html dosyasını açın. Modify > Page Properties komutunu seçin ve Category listesinden Appearance ı seçin. Page Properties iletişim kutusunu açmak için Cmd+J (Macintosh ta) ya da Ctrl+J (Windows ta) klavye komutlarını da kullanabilirsiniz. Page Properties iletişim kutusunun Appearance ekranında (Dreamweaver da belge penceresinin varsayılan arka plan rengi beyaz olmasına rağmen) sayfa için tanımlanmış herhangi bir varsayılan seçenek olmadığını göreceksiniz. Siz bir arka plan rengi tanımlamazsanız, bir ziyaretçi bu sayfayı ziyaret ettiğinde sayfa, Web tarayıcısının varsayılan rengini (genellikle beyaz) kullanır. Web tarayıcılarının varsayılan ayarları farklı olabildiğinden her zaman sayfa için bir arka plan rengi tanımlamanız tavsiye edilir. 110 DERS 4

5 2. Background Color seçeneğinin renk kutusuna tıklayın. Onaltılık tabanlı kodu #FFFFCC olan soluk sarı renk numunesine tıklayın. Soluk sarı renk (#FFFFCC) sayfanızın arka plan rengi olarak ayarlanacaktır. Rengi, onaltılık tabanlı kodu doğrudan renk kutusunun yanındaki metin alanına yazarak da değiştirebilirsiniz. 3. Page Properties iletişim kutusunu kapatmadan yeni arka plan rengini görmek için Apply düğmesine tıklayın. Sayfanızın arka planı, Page Properties iletişim kutusunda seçtiğiniz açık sarı renge sahip olacaktır. Bir sonraki uygulama için Page Properties iletişim kutusunu açık bırakın. Fontu Değiştirmek Sayfanızın daha ilginç ve daha kolay okunmasını sağlamak için metinleri görüntülemede kullanılan fontları değiştirebilirsiniz. Yazının baskı için kullanılmasıyla ilgili önemli miktarda bilgi mevcuttur; fakat bu bilgilerin tamamı Web de kullanılmaz. Bilgisayar ekranında sans-serif tipindeki fontlar serif tipindeki fontlara göre genellikle daha kolay okunur. Serif tipindeki fontlar normalde basılı medyada kullanılır. Çünkü serif adı verilen çizgi sonlarındaki kıvrımlar karakterlerin daha kolay algılanmasını sağlar. Stİl Sayfaları Gelİştİrmek 111

6 Ama bilgisayar ekranında bu kıvrımlar harflerin birbirinden ayırt edilmesini zorlaştırır; Özellikle de uzun metinlerde ya da söz konusu metinde kullanılan fontun küçük olması durumunda. Bir sayfadaki yazı akışının tarayıcıdan tarayıcıya ve bilgisayardan bilgisayara farklılık gösterebileceği konusu da dikkate alınmalıdır. Dreamweaver, font seçeneklerini tanımlamak için eski bir yöntem olan font etiket nitelikleri kullanmak yerine entegre CSS stillerinden faydalanır. Aşağıdaki uygulamada da göreceğiniz gibi bütün bir sayfada kullanılan fontu ya da sayfada seçili durumdaki bir metnin fontunu değiştirebilirsiniz. 1. Page Properties iletişim kutusunun Appearance kategorisindeki Page font menüsünden Arial, Helvetica, sans-serif i seçin. OK düğmesine tıklayarak Page Properties iletişim kutusunu kapatın. Sayfadaki metnin tamamı seçtiğiniz fontla biçimlendirilecektir: Arial, Helvetica, sansserif. Daha sonra bu sayfaya ekleyeceğiniz bütün metinlerde aynı font kullanılacaktır. Page Properties iletişim kutusu bir dizi etiketi (body, td, th) seçilen font nitelikleriyle yeniden tanımlamak için dahili bir CSS stili oluşturacaktır. Harici CSS stillerini bu derste daha sonra göreceğiz. Page Properties iletişim kutusundaki Appearance kategorisinin Page Font menüsünde listelenen font kombinasyonları Web tarayıcısına metni seçilen gruptaki bir fontla (ziyaretçilerin bilgisayarında yüklü fontlara bağlı olarak) görüntülemesi gerektiğini 112 DERS 4

7 bildirir. Font grubundaki ilk seçenek kullanılamıyorsa tarayıcı ikinci seçeneği kullanmaya çalışır. İkinci font da kullanılamıyorsa üçüncü fontu kullanır. Kullanıcın bilgisayarında kombinasyondaki fontlardan hiçbiri yoksa, metin, tarayıcının varsayılan fontuyla görüntülenir. 2. Sayfanın üst kısmındaki Anusara Yoga in the Heart of San Francisco s Mission District metnini seçin. Properties denetçisindeki Font menüsünden Courier New, Courier, monospace i seçin. Etiket satırı için seçtiğiniz font, sayfa için ayarlanan varsayılan font grubunun yerine geçer. Properties denetçisindeki Font menüsünde yer alan font kombinasyonları, Page Properties iletişim kutusundaki Appearance kategorisinin Page Font menüsünde listelenen font kombinasyonlarıyla aynıdır. Bağlam menüsüne erişmek üzere sağ tıkladığınızda (Macintos ta ve Windows ta) ya da Ctrl tuşunu basılı tutup tıkladığınızda belge penceresinde seçili durumda bulunan metne bir dizi biçimlendirme seçeneğini doğrudan uygulayabilirsiniz. Sitenin ziyaretçilerinin metinleri sizin seçtiğiniz fontlarla yazılmış olarak görebilmesi için bu fontların ziyaretçilerin bilgisayarında yüklü olması gerekir. Nasıl olsa herkesin bilgisayarında her font yüklüdür diye düşünmeyin. Temel işletim sistemine dahil olmayan fontlar ziyaretçilerinizin bilgisayarında muhtemelen olmayacaktır. Ayrıca Macintosh ta bulunan her font Windows ta bulunmaz. Dreamweaver ın varsayılan font setlerinde verilen font genellikle çoğu bilgisayarda mevcuttur (hem Macintosh ta, hem de Windows ta). Ziyaretçilerinizin bilgisayarında olmama ihtimali bulunan bir font kullanmak istiyorsanız, bu fontla yazılan metnin yerine kullanabileceğiniz bir resim oluşturmanız tavsiye edilir. Bu teknik genellikle üstbilgiler, asıl başlıklar, vs için kullanılır. Uzun metinler için resim kullanılması tavsiye edilmez, çünkü bu durumda erişilebilirlik kısıtlanır ve içeriğin güncellenmesi daha zor olabilir. Font kombinasyonları (Arial, Helvetica, sans-serif gibi) kullanışlıdır, ama bunlar sizin kullanmak istediğiniz bütün özel fontları içermeyebilirler. Font kombinasyonlarında Stİl Sayfaları Gelİştİrmek 113

8 değişiklik yapmak üzere Properties denetçisinin Font açılır menüsünden Edit Font List komutunu seçerek ya da Text > Font > Edit Font List komutunu kullanarak Edit Font List iletişim kutusunu açabilirsiniz. Edit Font List iletişim kutusunu kullanarak font setlerinde aşağıdaki gibi bir dizi değişiklik yapabilirsiniz. Mevcut bir kombinasyona font eklemek isterseniz: Font list alanından değişiklik yapmak istediğiniz font kombinasyonunu seçin ve Available fonts listesine eklemek istediğiniz fontu seçin. Sonra da Chosen fonts listesiyle Available fonts listesinin arasındaki sol tarafı gösteren oka tıklayarak ilgili fontu Chosen fonts listesine ekleyin. Mevcut bir kombinasyondan font silmek isterseniz: Üzerinde değişiklik yapmak istediğiniz font kombinasyonunu ve Chosen fonts listesinden silmek istediğiniz fontu seçin. Ardından Chosen fonts listesiyle Available fonts listesinin arasındaki sağ tarafı gösteren düğmeye tıklayarak ilgili fontu Chosen fonts listesinden silin. Bir font kombinasyonu eklemek için: Font list alanındaki Add fonts in list below seçeneğini işaretleyin. İlave font kombinasyonları için iletişim kutusunun sol üst köşesindeki artı işaretli düğmeye (+) tıklayın ve Font list alanındaki yeni Add fonts in list below seçeneğini işaretleyin. Bir font kombinasyonunu silmek için: Fonts list alanında silmek istediğiniz font kombinasyonunu seçin ve iletişim kutusunun sol üst köşesindeki eksi işaretli düğmeye (-) tıklayın. Sisteminizde bulunmayan bir fontu eklemek için: Available fonts listesinin altındaki metin alanına ilgili fontun adını yazın ve solu gösteren düğmeye tıklayarak bu fontu kombinasyona ekleyin. Siteminizde bulunmayan bir fontu eklemeniz faydalı olacaktır. Örneğin Macintosh ta çalışırken Windows a özgü bir fontu tanımlayabilirsiniz. Doğru font adını kullandığınızdan emin olun. Font kombinasyonlarının sırasını değiştirmek için: İlgili kombinasyonu seçin ve iletişim kutusunun sağ üst köşesindeki yukarı aşağı ok düğmelerinden uygun olanına tıklayın. 114 DERS 4

9 Edit Fonts List iletişim kutusundaki Available fonts listesi, bilgisayarınızda bulunan fontları içerir. 3. Dosyayı kaydedin ve Web tarayıcınızda önizleyin. Tarayıcıdaki metin, seçmiş olduğunuz fontla görüntülenecektir. Bu, bilgisayarınızda yüklü durumdaki fontlara bağlıdır. Bir sayfada önce silmek istediğiniz fontun kullanıldığı metni seçerek sayfadaki font ayarlarını silebilir ve seçili metni varsayılan ayarlarına döndürebilirsiniz. Properties denetçisinde Font açılır menüsündeki Default Font seçeneğini işaretleyin ya da Text > Font > Default Font komutunu seçin. Font Boyutunu Değiştirmek Dreamweaver, aralarında 9 ile 36 arasında belirli aralıklarla değişen sayısal değerler, xx-small ile xx-large arasında değişen göreceli değerler ve aralarında smaller ve larger seçeneklerinin de bulunduğu birçok hazır font boyutu seçeneğine sahiptir. Bu seçeneklerin tümü metin büyüklüğünü tanımlamak için CSS kullanır. Dreamweaver ı kullanarak ve bütünleşik CSS özellikleri aracılığıyla sayfalarınızdaki metinler üzerinde büyük ölçüde kontrol imkânına sahip olursunuz. Gelişmiş CSS özelliklerini bu derste daha sonra göreceğiz. İyi Kod Yazma Prensipleri: Font Etiketinin Kullanımdan Kaldırılması HTML 4.01 de font etiketi (metin özelliklerini tanımlayan bir etiket) artık benimsenmeyen etiketlerin arasına eklenmiştir, yani standart araçların arasından çıkarılmıştır; ancak şu anda da Web tarayıcıları tarafından desteklenmeye devam etmektedir. Font etiketi, açılış ve kapanış etiketleriyle metinlerin etrafını şu şekilde sarar: <font face= Arial, Helvetica, sans-serif >Yoga Sangha</font> Font etiketinin nitelikleri metinlerin görünümü üzerinde minimum düzeyde kontrol imkânı sağlarken, Web geliştiricileri CSS aracılığıyla metni çok daha hassas bir şekilde kontrol edebilirler. Dreamweaver, gerektiğinde (örneğin çok eski sayfalar [1 Kasım 2001 den önce oluşturulan Web sayfaları] üzerinde çalışılırken) kullanılmak üzere çeşitli araçlar sağlayarak font etiketini tanır ve destekler. Günümüz standartlarına uygun etkili sayfalar oluşturmak için mümkün olan her yerde CSS kullanın ve font etiketini kullanmaktan kaçının. Stİl Sayfaları Gelİştİrmek 115

10 Macintosh ve Windows arasında font boyutu anlamında önemli farklar vardır. Windows yüklü bir bilgisayarda görüntülenen bir metnin aynısı Maintosh ta % 25 daha küçük görünür. Yani Macintosh lardaki metinlerin büyüklüğü, Windows yüklü bilgisayarlardaki metinlerin dörtte üçü kadardır. Kullanıcılar font boyutunu değiştirebilir; ama bu, sayfa tasarımını etkileyebilir. Sayfalarınızı bu olasılıkları hesaba kararak test edip tasarlarsanız daha fazla ziyaretçiye ulaşan esnek bir Wen sitesi hazırlayabilirsiniz. Sayfanın üst kısmındaki At Yoga Sangha, we re dedicated paragrafını seçin. Properties denetçisinin Size menüsünden 12 değerini seçin. Birim ayarının varsayılan seçeneği olan pixels i değiştirmeyin. Properties denetçisinin Appearance bölümünü kullanarak belge için varsayılan bir metin büyüklüğü de ayarlayabilirsiniz. Paragrafın metin boyutu biraz küçülecek ve sayfadaki geri kalan metinden (henüz boyut ayarıyla biçimlendirilmedi) biraz daha küçük görünecektir. Size alanına bir değer yazabilir ya da hazır değerlerden birini seçebilirsiniz. Sayfanızda ilk kez kullanılan bir nitelik ya da niteliklerden oluşan bir kombinasyon (boyut gibi) seçtiğinizde Dreamweaver, Properties denetçisindeki Style menüsünde listelenen yeni bir stil oluşturur. Daha sonra yazdığınız ve bu boyutla tanımlanan her metin aynı stili kullanacaktır. Font, boyut ve renk biçimlendirme özelliklerinin her benzersiz kombinasyonuyla yeni stiller oluşturulur. Bu stiller sayısal bir sıraya göre otomatik olarak oluşturulan genel isimlere sahiptir (style1, style2, vs). Etkin durumdaki, yani Properties denetçisindeki Style menüsünde görüntülenen bir stili Style menüsüne tıklayıp Rename komutunu seçerek yeniden adlandırabilirsiniz. Bir stili etkin stil haline getirmek istiyorsanız, imleci bu metnin kullanıldığı metnin içine yerleştirin. Seçili durumdaki metin için herhangi bir büyüklük belirtilmediyse Size menüsünde None yazısını görürsünüz. Web tarayıcıları, büyüklük tanımı yapılmamış metinleri varsayılan büyüklükte görüntüler. Bu da Size menüsündeki 14 değerine eşittir. Ancak ziyaretçilerin tarayıcılarında yaptığı tercih ayarlarına bağlı olarak bu değer tarayıcıdan tarayıcıya farklılık gösterebilir. Size menüsündeki sayısal font büyüklüğü seçenekleri tanıdık gelebilir. Çünkü bunlar kelime işlem programlarındaki standart büyüklük değerlerine benzerler. 116 DERS 4

11 Eğer font boyutu ayarlarını silmek ve varsayılan ayarlara dönmek isterseniz, önce değiştirmek istediğiniz metni seçin ve sonra da Properties denetçisindeki Style menüsünden None u seçin ya da Text > CSS Styles > None komutunu seçin. Font Boyutlarının Karşılaştırılması: Font Etiketi ve CSS Bir Web geliştiricisi olarak modası geçmiş <font> etiketinin kullanıldığı sayfalar üzerinde çalışmanız da gerekebilir. Dolayısıyla bu konuyla ilgili boyutları ve seçenekleri yakından tanımanız gerekir. Böyle durumlarda bütün <font> etiketlerini silerek ve CSS stilleri yaratarak çalıştığınız sistemi değiştirip CSS kullanabilirsiniz. Bul ve Değiştir (Find and Replace) özelliğini kullanarak (bu konuyu Ders 17 de göreceksiniz) bir sitedeki <font> etiketlerini kolayca kaldırabilirsiniz. Aşağıdaki tabloda Properties denetçisinde bulunan Size menüsündeki değerlerle eski <font> etiketi boyut seçenekleri karşılaştırılmıştır. Göreceli Değerler Mutlak Değerler Font Etiket Sayısal Size menüsünde Size menüsünde Boyutları Değerler* (CSS tabanlı) (CSS tabanlı) xx-small x-small / smaller None (varsayılan) 3 14 small medium / larger large +3 6 x-large 36** +4 7 xx-large * Ölçü birimleri menüsündeki varsayılan ayar olan pixels kullanılmıştır. ** Bu sayısal değer x-large (6) seçeneğinden biraz daha büyük ve xx-large (7) seçeneğinden de biraz küçüktür. <font> HTML etiketi metin büyüklüklerini mutlak (1 ile 7 arası) ya da göreceli (+1 ile +7 arası ve -1 ile -7 arası) olarak tanımlar. Bir mutlak sayı seçtiğinizde büyüklük ayarlanır (1 en küçük, 7 en büyüktür). Bir Web tarayıcısında metinler için varsayılan taban boyut değeri üçtür. Pozitif ya da negatif bir sayı seçtiğinizde font boyutu, o fontun taban boyut değerine göre ayarlanır. Örneğin +1 pozitif değeri font boyutunu taban boyut değerinden bir büyük olacak şekilde ayarlar. Font boyutu değeri olarak +3 ü seçerseniz aslında boyutu + yapmış olursunuz (3 + 3). Font boyutunun en büyük değeri 7, en küçük değeri de 1 dir. 7 den büyük bütün HTML font boyutları 7 olarak görüntülenir. Örneğin font boyutunu +6 olarak ayarlarsanız 3+6 değeri 7 den büyük olur ama font boyutu olarak 7 kullanılır. Bunlar, <font> HTML etiketinin kısıtlamalarıdır ve CSS i etkilemezler. CSS, metin özelliklerini tanımlamak için kullanılan daha esnek ve çok yönlü bir yöntemdir. Stİl Sayfaları Gelİştİrmek 117

12 Font Rengini Tanımlamak Önceki derste yaptığımız gibi bir sayfanın arka plan rengini değiştirdiğinizde görüntüyle ilgili sorunlara yol açmamak için görüntülenecek metnin rengini de değiştirmeniz gerekebilir. Örneğin siyah arka plan üzerinde siyah bir metin görünmez. Belgeniz için bir renk düzeni seçerken uyumlu renk kombinasyonları seçmeye ve renklerin arasında yeterli derecede kontrast (karşıtlık) olmasına özen gösterin. Birbirine çok yakın renkleri ayırt etmek (tamamlayıcı renklerde de olabildiği gibi) özellikle bilgisayar ekranında çok zor olabilir. Aşağıdaki uygulamada index.html belgesinin varsayılan font rengini değiştireceksiniz. 1. Modify > Page Properties komutunu seçin ve Category listesinde Appearance ın seçili olduğundan emin olun. Page Properties iletişim kutusunun Appearance bölümü, belgeyle ilgili birçok özelliği ayarlamanızı sağlayan pek çok seçenek içerir. 2. Text color seçeneğinin renk kutusuna tıklayın. Bu derste daha önce belgenin arka plan rengini belirlemek için kullandığınıza benzer bir renk paleti açılacaktır. 3. Onaltılık tabanlı kodu # olan koyu kırmızımsı siyah rengi seçin ve OK düğmesine tıklayın. Metin alanına onaltılık tabanındaki renk kodunu yazabilir veya renk numunelerini kullanarak bir renk seçebilirsiniz. Siz OK düğmesine tıkladıktan sonra Page Properties iletişim kutusu kapanır ve belgenize dönersiniz. 118 DERS 4

13 Text > Color komutunu seçerek ilave bir Colors iletişim kutusuna erişebilirsiniz. Onaltılık tabanlı renk kodlarını doğrudan Properties denetçisindeki Text Color renk seçicisinin yanındaki renk metin alanına girmek de mümkündür. 4. Welcome to Yoga Sangha metnini seçin. Properties denetçisindeki Text Color kutusuna tıklayın ve normal bir turuncu renk (#FFCC33) seçin. Font ve font boyutu seçeneklerine benzer şekilde font rengi de Dreamweaver da CSS stilleri aracılığıyla tanımlanır. Daha önce bir renk uygulayarak yeni bir stil oluşturmuştunuz. Properties denetçisindeki Style menüsünde stilin adını görebilirsiniz. Eğer font, font boyutu ya da renk nitelikleriyle denemeler yaparak ilave stiller oluşturduysanız, stilinizin numarası örneklerde gösterilenlerden farklı olabilir. Stili olan bir metne font, font boyutu veya renk seçenekleri uygularsanız, seçili metnin söz konusu stilin tek örneği olması durumunda yeni nitelikler eski stile eklenecektir. Eğer aynı stilin başka örnekleri mevcutsa veya yeni nitelikleri stili olan bir metnin sadece bir kısmına uygularsanız, Dreamweaver yeni bir stil oluşturacaktır. Metne stil uygularken stillerinizi düzenli bir şekilde tutmanız iyi olur. Metin niteliklerini rasgele uygulamamaya çalışın, çünkü Dreamweaver her yeni kombinasyon için yeni stiller oluşturur. Sadece gerektiğinde diğer nitelikleri kalıtım (inheritance) yoluyla alan organize stillerden oluşan bir sistem oluşturun. Kalıtım konusuyla ilgili ayrıntıları bu derste daha sonra göreceğiz. Stİl Sayfaları Gelİştİrmek 119

14 Sitenizde kullanılan onaltılık tabanlı renkleri Assets paneli aracılığıyla takip edebilirsiniz. Assets paneli Files panel grubunda yer alır. Assets panelini Window > Assets komutunu seçerek de açabilirsiniz. Renk varlıklarına erişmek için Assets panelinin sol sütunundaki Colors simgesine tıklayın. Assets panelinin üst tarafında yer alan radyo düğmeleri renkleri görmek için size iki seçenek sunar: Site ve Favorites. Site radyo düğmesine tıkladığınızda Yoga Sangha proje sitesinde ya da o anda etkin durumda bulunan sitede kullanılan renkler görüntülenir. Sitenizde herhangi bir renk kullanmadıysanız listede renk görmezsiniz. Renkleri tanımladıysanız, fakat listelenmiş olarak görmüyorsanız, panelin sağ alt köşesindeki Refresh Site List düğmesine tıklayın. Bu listede henüz kullanmadığınız renkleri göreceksiniz. Çünkü Yoga Sangha proje sitesinin diğer ders klasörlerindeki belgelerde kullanılan başka renkler de vardır. Kullandığınız renklerin bütün sitede tutarlı olmasını sağlamak için çok kullanılan renkleri Assets panelinde Sık Kullanılanlar (Favorites) olarak kaydedebilirsiniz. Sık kullanılan bir rengi kaydetmek isterseniz, istediğiniz rengi Site listesinden seçin ve Assets panelinin sağ alt köşesindeki Add to Favorites düğmesine tıklayın. Dreamweaver, ilgili rengin Favorite (Sık Kullanılanlar) listenize eklendiğini bildiren bir iletişim kutusu görüntüleyecektir. Favorites listesini görmek için Assets panelinin üst kısmındaki Favorite radyo düğmesine tıklamanız gerekir. Assets panelini resimleri yönetmek için Ders 5 te kullanacaksınız. Assets paneli sekmesi Site seçeneği Favorites seçeneği Colors simgesi 120 DERS 4 Refresh Site List Add to Favorites

15 Stillerin İncelenmesi Şu ana kadar bu dersin önceki uygulamalarında bir dizi CSS stili kullandınız. Bu dersin başında bir metni Properties denetçisini kullanarak font, font büyüklüğü ve renk nitelikleri ile biçimlendirmeye başladınız. Dreamweaver da bir yandan ilgili CSS stillerini oluşturuyordu. Siz bir sayfada niteliklerden oluşan yeni bir kombinasyon oluşturduğunuzda Dreamweaver ın da yeni bir stil oluşturduğunu ve bu yeni stilin Properties denetçisindeki Style menüsünde listelendiğini gördünüz. Şu ana kadar arka plan rengi, Ders 3 teki bağlantıların farklı durumlarına ait renkler ve bu dersin başındaki varsayılan font ayarları gibi çeşitli sayfa özellikleriyle de çalışma fırsatı buldunuz. Bütün bu nitelikler Dreamweaver da CSS stilleriyle kontrol edilir. Şimdiki uygulamada bir stil sayfasının (style sheet) ne olduğunu ve nasıl çalıştığını öğreneceksiniz. 1. index.html belgesi açık durumdayken Document araç çubuğunun sol üst kısmındaki Split düğmesine tıklayın. Split (Show Code and Design Views) Belge penceresinde, derslerde şu ana kadar kullandığınız Design görünümüyle birlikte buradaki tasarıma karşılık gelen kodlardan oluşan bölünmüş bir ekran göreceksiniz. Bu görünümü Ders 16 da daha yoğun bir şekilde kullanacaksınız. Varsayılan durumda Code görünümü belge penceresinin üst kısmında, Design görünümü de altta yer alır. Stİl Sayfaları Gelİştİrmek 121

16 Bu görünümlerin büyüklüğünü, imleci bu iki görünümü ayıran çubuğun üzerine yerleştirerek ayarlayabilirsiniz. İmleç iki uçlu bir oka dönüştüğünde, üzerine tıklayarak çubuğu istediğiniz gibi sürükleyebilirsiniz. 2. Code görünümünde aşağıdaki ifadeyi görene kadar ekranı yukarıya kaydırın. <style type= text/css > <! a:link { color: #FF3300; } Burada gördüğünüz kod, bu sayfada kullanılan stillere ait bütün bilgileri içeren bir stil sayfasının başlangıcını gösterir. Bu, bir dahili stil sayfası (internal style sheet) olarak adlandırılır, çünkü belgeye gömülü durumdadır. Önceki derslerde Properties denetçisi ve Page Properties iletişim kutusu kullanılarak oluşturulan bütün stiller dahili stildi. Siz bir metin biçimlendirmesi ya da sayfa özellikleri tanımladığınızda Dreamweaver 8 otomatik olarak bu stilleri oluşturur. CSS stilleri ve stil sayfası ekleri belgenin <head> ve </head> etiketlerinin arasına yerleştirilir. CSS te bir stil sayfası (style sheet), stillerden oluşan bir gruptur. Bir stil (genellikle kural [rule] olarak bilinir), belirli bir elemanın görünümünü tanımlayan ve kontrol eden bir özellikler grubudur. index.html belgesine ait kodda stil sayfası <style type= text/css > (stil sayfasını tanımlar) ve </style> (stil sayfasını sonlandırır) arasındaki her şeydir. a:link { color: #FF3300; } kodu tek bir stili (ya da kuralı) temsil eder. Buradaki stil sayfasında, sayfanın arka plan rengini ayarladığınız zaman oluşturulan aşağıdaki kodu görürsünüz. body { background-color: #FFFFCC; } Kurallar, seçiciler ve bildirimlerden meydana gelir. Seçici (selector), tanımlanan elemanın kendisidir. Bildirim (declaration) ise, özellikler ve bunların değerlerinin kombinasyonudur. Özellikler (properties), görünümü kontrol eden nitelikleri, değer de belirtilen nicelik ya da formattır. Bir stilin yapısı şu şekildedir: seçici { özellik: değer } ve özellik: değer ifadesi de bildirimdir. Örneğin aşağıdaki stilde body { background-color: #FFFFCC } tanımlanan eleman body seçicisidir. { background-color: #FFFFCC } bildirimi, özelliklerin ve değerlerin kombinasyonudur. Belirtilen arka plan elemanının niteliği, background-color (arka plan rengi) özelliğidir. Rengi tanımlayan değer de #FFCCCC dir. 122 DERS 4

17 Dahili Stillerle Çalışmak Dahili stiller sadece geçerli belgede tanımlanan kullanılan stillerdir. Sitenizdeki tek bir sayfa için bir stil tanımları oluşturacaksanız dahili stilleri kullanabilirsiniz. Eğer sitenizde birden fazlanın uyumlu bir görünüme sahip olmasını istiyorsanız, harici bir stil sayfası oluşturmanız ve bu stil sayfasını aynı görünüme sahip olmasını istediğiniz her belgeye bağlamanız gerekir. Mümkün olan her yerde harici stil sayfaları kullanmanız tavsiye edilir. Harici stiller diğer belgelerdeki stilleri kullanabilmenizi sağladığı için çok kullanışlıdır. Ayrıca, harici stiller için kullanılan biçimlendirme kodu ortak bir harici belgede saklandığı için bu stil sayfasını kullanan Web sayfaları biçimlendirme bilgilerini tekrar tekrar yüklemek zorunda kalmaz. Bu da daha az kod kullanılmasını sağlar ve böylece sayfalar daha hızlı yüklenir. Bunlara ek olarak, hepsi aynı yerde bulunduğu için stillerin güncellenmesi de daha kolay olur. Harici stillerin oluşturulmasını bu derste daha sonra göreceğiz. Şu ana kadar oluşturduklarınızın hepsi dahili stillerdi. Önceki uygulamada gördüğünüz stil sayfası da dahili bir stil sayfasıdır, yani tümüyle index.html belgesinin içinde saklanmaktadır. 1. CSS panel grubunda yer alan CSS Styles panelini açın ve panelin üst kısmında yer alan All düğmesine tıklayın. Eğer CSS Styles paneli açık değilse, Window > CSS Styles komutunu seçerek bu panele erişebilirsiniz. Stİl Sayfaları Gelİştİrmek 123

18 CSS Styles panelinde, sayfa özelliklerini tanımladığınızda oluşturulan stillerin bir listesi bulunur. Bütün dahili stillerin listesini görmek için CSS Styles panelinin üst kısmındaki <style> grubunu genişletmeniz gerekebilir. 2. CSS Styles panelinin alt kısmındaki New CSS Rule simgesine tıklayın. New CSS Rule düğmesi New CSS Rule iletişim kutusu açılacaktır. Bu iletişim kutusunu Text > CSS Styles > New komutunu seçerek de açabilirsiniz. 124 DERS 4

19 Dreamweaver da kullanabileceğiniz üç farklı seçici tipi (stiller tarafından tanımlanan eleman türleri) vardır: Class: Bu seçici tipi, belirli bir elemana bağlı olmayan sınıflar yaratmanızı sağlar. Tek bir sınıfı pek çok farklı elemana uygulayabilirsiniz. Sınıflar, başlarına konan nokta işaretiyle gösterilirler. Tag: Bu seçici tipi, stil tarafından yeniden tanımlanacak olan bir eleman olarak bir HTML etiketini belirlemenizi sağlar. Etiketin varsayılan görünümü stil tarafından değiştirilir. Advanced: Bu seçici tipi, özel etiket kombinasyonları için kullanılan stiller oluşturmanızı sağlar (bağlamsal seçiciler). Bu seçici tipi ayrıca ID ler oluşturmanızı sağlar ve önemli bir istisna dışında sınıflara benzerler: ID ler belirli bir elemanı benzersiz bir şekilde tanımlama yöntemi olarak sayfa başına sadece tek bir kez kullanılabilirler. Benzersiz yapılarından ötürü ID ler genellikle script yazma amacıyla kullanılır ve bir diyez işaretiyle (#) gösterilirler. 3. New CSS Rule iletişim kutusunun Selector Type alanındaki Class seçeneğini işaretleyin. Metin alanı, özel bir stil yaratmayı mümkün kılmak için Name adında bir metin alanına dönüşecektir. Dreamweaver genel isimleri otomatik olarak sayısal bir sırayla verir:.unnamed1,.unnamed2, vb. Bu isimler pek açıklayıcı değildir ve birden fazla sınıf oluşturuyorsanız işinizi gerçekten de zorlaştırabilirler. Stillerinize hangi amaçla kullanıldıklarını açıklayan kısa isimler verme alışkanlığını edinin. 4. Name metin alanına sınıfınızın ismi olarak.dayname yazın. İsmin önüne bir nokta koymak gerekir. Eğer noktayı silerseniz Dreamweaver ismin önüne bu noktayı otomatik olarak ekleyecektir (gösterilmese bile). Stilin görünüm nitelikleri yerine işlevini açıklayan isimler atama alışkanlığını edinmek en iyisidir. İşlevi açıklayan isimler özellikle konuşma tabanlı Web tarayıcılarında daha kolay erişim sağlarlar. 5. Define In alanındaki This document only seçeneğini işaretleyin ve OK düğmesine tıklayın. Stİl Sayfaları Gelİştİrmek 125

20 This document only seçeneği, yeni bir dahili stil oluşturduğunuzu gösterir. CSS Rule definition for.dayname iletişim kutusu açılacaktır. 6. CSS Rule Definition iletişim kutusunun Type kategorisinde Size değerini 12 pixels, Weight seçeneğini bold, Variant seçeneğini small-caps ve Color seçeneğini siyah (#000000) olarak ayarlayın. Diğer bütün seçenekleri tanımlanmamış olarak bırakın ve OK düğmesine tıklayın. Yeni oluşturduğunuz sınıfın CSS Styles panelindeki stil listesinde görüntülendiğine dikkat edin. 126 DERS 4

21 .dayname kuralını yeni oluşturduğunuz için, CSS Styles panelinin en üst kısmında yer alan All Rules listesinde bu kural otomatik olarak seçilecektir. Panelin alt kısmında seçili durumdaki kurala ait özelliklerin yer aldığı bir liste bulunur. Özellikler soldaki sütunda, bunların değerleri de sağdaki sütunda yer alır. Varsayılan durumda özellikler sadece, değerleri tanımlanmış özelliklerin listelendiği Show Only Set Properties modunda görüntülenir. Özellikler için kullanılan iki ilave görüntüleme modu daha mevcuttur: Show List View ve Show Category View. Show List View nitelik listesinin tamamını görüntüler, Show Category View ise nitelik listesini CSS Rule Definition iletişim kutusundakilerle aynı kategorilerde düzenlenmiş olarak gösterir. CSS Styles panelinde seçili durumdaki bir kuralı düzenlemenin birçok yolu vardır: Mevcut özelliklerin değerlerini değiştirmek: Özellik değerlerini doğrudan özellikler listesinde ilgili değere tıklayıp karşılık gelen menülere erişerek değiştirebilirsiniz. Yeni özellik ve değer eklemek: Show Only Set Properties modunda özellikler listesini görüntülerken listenin alt kısmındaki Add property bağlantısına tıklayarak yeni özellik seçmek için kullanabileceğiniz bir menüye erişebilirsiniz. Özellikler listesini Show Category View veya Show List View modunda görüntülerken listedeki bir özelliğe, ilgili özelliğin değer (value) alanına tıklayarak bir değer ekleyebilirsiniz. Kuralı düzenlemek için iletişim kutusunu kullanmak: Panelin alt kısmındaki Edit Style düğmesine tıklayarak CSS Rule definition iletişim kutusunu açabilirsiniz. Sınıflar sayesinde belgenizin biçimlendirme özellikleri üzerinde ciddi ölçüde kontrol imkânına sahip olursunuz. Sınıfları bir kelime işlem programındaki stillerle aynı şekilde uygulayabilirsiniz. Yani metni seçer ve sonra da stili uygularsınız. Bu stili metin bloklarına ya da metin bloğu içinde yer alan sözcüklere tek tek uygulayabilirsiniz. Sıradaki adımlarda dayname sınıfını madde imli listedeki belirli öğelere uygulayacaksınız. 7. index.html belgesindeki Schedule listesinde yer alan Monday sözcüğünü seçin. Stili uygulamak için Properties denetçisindeki Style menüsünden dayname i seçin. dayname i listedeki diğer günlere uygulamaya devam edin. Seçilen metin, dayname sınıfının özelliklerini yansıtacak şekilde değişecektir. Stili uyguladıktan sonra Code görünümünde seçilen sözcüğün önünde <span class= dayname > ifadesinin olduğunu göreceksiniz. Buradaki span ifadesi, Stİl Sayfaları Gelİştİrmek 127

22 elemanlardan oluşan seçimi, class da <span> (açılış etiketi) ile </span> (kapanış etiketi) arasında yer alan metne uygulanan stili tanımlar. <span> etiketi, büyük bir metin bloğundaki çeşitli sözcükler gibi öğeleri tanımlayan bir satıriçi elemandır. Bütün blokları (paragraf gibi) tanımlayan bir blok düzeyi elemanı olan <div> etiketine benzer. Metindeki stil biçimlendirme özelliğini kaldırmak isterseniz, ekleme noktasını metnin içine yerleştirin ve Properties denetçisindeki Style menüsünde None seçeneğini işaretleyin. Stil ve ona ait biçimlendirme özellikleri metinden kaldırılacak, ancak stil yine stil sayfasında kalacaktır. 8. CSS Styles panelindeki New CSS Rule düğmesine tıklayın. Selector Type seçeneğini Class olarak ayarlayın, Name metin alanına.highlight yazın ve Define In alanında This Document Only seçeneğini işaretleyin. OK düğmesine tıklayın. CSS Rule Definition for.highlight iletişim kutusu açılacaktır. 9. CSS Rule Definition iletişim kutusunda soldaki Category listesinden Background u seçin. CSS Rule Definition iletişim kutusu, arka plan seçeneklerini gösterecek şekilde değişecektir. 128 DERS 4

23 10. Background Color seçeneğini beyaz (#FFFFFF) olarak ayarlayın ve OK düğmesine tıklayın. Yeni oluşturduğunuz highlight sınıfı CSS Styles panelindeki kural listesinde belirecek ve Properties denetçisindeki Style menüsünde de kullanılabilir hale gelecektir. 11. Announcements bölümünde ilk olay başlığını (Intro to Anusara Workshop) seçin ve Properties denetçisindeki Style menüsünü kullanarak highlight stilini uygulayın. Metin beyaz renkle vurgulanacaktır. Bu uygulamada oluşturduğunuz yeni stiller (dayname ve highlight), tıpkı bu derste daha önce Properties denetçisi aracılığıyla metin özelliklerini ayarlarken Dreamweaver ın oluşturduğu stiller gibi, Style menüsünde sahip oldukları özelliklere ait görsel işaretlerle görüntülenecektir. Gömülü stil sayfasındaki bir dahili stili silmek isterseniz, CSS Styles panelinde ilgili stili seçtikten sonra panelin sağ alt köşesindeki Delete CSS Rule simgesine tıklayabilirsiniz. Bu işlemi yaptığınızda stil ilgili stil sayfasından silinecektir. Artık bu stil tanımı mevcut olmadığından, bu stilin uygulandığı hiçbir metinde, silinen stil tarafından tanımlanan nitelikleri göremezsiniz. Bununla birlikte, bir stili CSS Styles panelinden silmekle stili Properties denetçisindeki Style menüsünde None seçeneğini işaretleyerek silmenin aynı şey olmadığını unutmayın. Bir stil ait olduğu stil sayfasından silindiğinde, silinen stile ait referanslar (bir stili uyguladığınızda koda eklenirler) belgede kalacaktır. Referansları da silmek isterseniz, Ders 17 de göreceğimiz Find & Replace (Bul ve Değiştir) özelliğiyle bunu hızlı bir şekilde gerçekleştirebilirsiniz. Özellikler listesinde tek bir özelliği seçip Delete CSS property simgesine tıklayarak kuralların özelliklerini silmek de mümkündür. index.html dosyasını kaydedebilir ve bir sonraki uygulama için açık bırakabilirsiniz. Stİl Sayfaları Gelİştİrmek 129

24 Dahili Stilleri Harici Stillere Dönüştürmek Stil sayfaları harici olarak saklanabilir ve bir ya da daha fazla belgeye bağlanabilir. Bir harici stil sayfası (external style sheet), sadece CSS spesifikasyonları içeren bir dosyadır. Harici stil sayfalarını birden fazla Web sayfasında kullanarak sayfaların tutarlı olmasını sağlayabilirsiniz. Dahili stiller içeren bir belgeniz varsa ve bu stilleri diğer sayfalarda da kullanmak istiyorsanız, bunları harici bir stil sayfasına kolayca aktarabilirsiniz. 1. index.html belgesinde File > Export > CSS Styles komutunu seçin. Export Styles As CSS File iletişim kutusu açılacaktır. 2. Save As metin alanına stil sayfanızın adı olarak sangha.css yazın. Dosyayı Lesson_04_CSS klasörüne kaydedin..css uzantısını eklemeniz gerekmez. Kaydetme işleminden sonra siz eklemezseniz bu uzantı belgeye otomatik olarak eklenir. index.html belgesinde mevcut olan dahili stilleri (sayfa özelliklerini tanımlayan stillerle birlikte dayname ve highlight stilleri) içeren bir harici stil sayfası oluşturulacaktır. Siz stilleri aktarırken yeni belgeye sadece dahili stiller eklenir. Dahili stillerini aktardığınız belgeye eklenmiş bir harici stil sayfası varsa, bu harici stil sayfasındaki stiller yeni stil sayfasına dahil edilmez. Dahili stillerini dönüştürdüğünüz belgedeki harici stil sayfasını kullanmak isterseniz, stil sayfasını bağlamadan önce dahili stil sayfasını silmeniz gerekir. Bunun nasıl yapıldığını bir sonraki uygulamada öğreneceksiniz. Dreamweaver, bir dahili stil sayfasındakilerle aynı isimleri kullanan stillerin bulunduğu bir harici stil sayfasını eklemenize izin verir. Ancak uyuşmazlık çıkmasını önlemek, HTML belgenizdeki kod miktarını azaltmak ve hata ya da karışıklık çıkma olasılığını azaltmak için dahili stilleri silmeniz gerekir. Dahili stil sayfasını silmek için CSS Styles panelindeki kurallar listesinin en üstüne gidin. <style> ile gösterilen dahili stil sayfasını seçin. Bu stil sayfası, bu derste kullandığınız bütün kuralları içermektedir. <style> seçili durumdayken CSS Styles panelinin alt kısmındaki çöp tenekesi simgesine (Delete Embedded Style Sheet düğmesi) tıklayın. Bu düğmenin bağlama duyarlı olduğunu muhtemelen fark etmişsinizdir. Düğme, seçilen öğeye (özellik, kural ya da bütün bir stil sayfası) bağlı olarak değişir. index.html belgesini kapatabilirsiniz. 130 DERS 4

25 Mevcut Bir Harici Stil Sayfasını Bağlamak Şu anda birden fazla stil tanımına sahip bir harici stil sayfanız var. Harici olduğu için, stil tanımlarının uygulanmasını ya da uygulanabilmesini istediğiniz Web sayfalarına bağlayarak bu dosyayı diğer belgelerle birlikte kullanabilirsiniz. Sınıfları ilgili paragraflara ya da seçili durumdaki metinlere elle uygulamanız gerekir. Bu derste daha ileride HTML etiketlerini yeniden tanımlayan ve bağlamsal seçicileri oluşturan stillerin nasıl geliştirildiğini öğreneceksiniz. Her iki stil tipi de, söz konusu stil sayfasının eklenmiş olduğu bütün belgelere otomatik olarak uygulanacaktır. CSS seçici stilleri kullanılarak oluşturulabilen ID ler, harici stil sayfaları eklendiğinde belgelere otomatik olarak uygulanmaz. 1. Lesson_04_CSS/about klasöründeki index.html dosyasını açın Kullanılacak metin içeriği bu sayfaya eklenmiş ve önceki derslerde öğrendiğiniz tekniklerle biçimlendirilmiştir. İlave uygulama yapmak isterseniz, Lesson_04_CSS/Text klasöründe yer alan about.txt belgesindeki metni aktarabilir ve bu uygulamada kullanacağınız belgeye benzeyecek şekilde biçimlendirebilirsiniz. Bu sayfanın herhangi bir dahili ya da harici stili bulunmamaktadır. Sıradaki adımlarda bu belgeyi önceki uygulamada index.html belgesindeki dahili stillerden oluşturduğunuz harici stil sayfasına bağlayacaksınız. Bu bağlama işlemi, metin biçimlendirmesinin iki sayfada da tutarlı olmasını sağlayacaktır. Stilleri geliştirmeye devam ederken biçimlendirmenin tutarlı kalmasını sağlamak için definitions.html belgesindeki dahili stili silmeniz ve harici stil sayfasını eklemek üzere bu uygulamadaki adımları uygulamanız gerekir. Harici stil sayfaları kullandığınızda, bu stil sayfalarına bağlı olan bütün belgeler söz konusu harici stil sayfalarındaki stillerde yapılan her değişikliği yansıtacaktır. Bu ders için definitions.html belgesini olduğu gibi bırakabilir ya da ekstradan pratik yapmak için burada anlatıldığı şekilde üzerinde çalışabilirsiniz. Stİl Sayfaları Gelİştİrmek 131

26 2. CSS Styles panelinin sağ alt kısmındaki Attach Style Sheet simgesine tıklayın. Attach Style Sheet düğmesi Attach External Style Sheet iletişim kutusu açılacaktır. 132 DERS 4

27 Dreamweaver, Web sitelerinizde kullanabileceğiniz bir dizi hazır CSS stil sayfası içerir. Bu stil sayfalarından birini kullanmak isterseniz, Attach External Style Sheet iletişim kutusunun alt tarafında yer alan sample style sheets bağlantısına tıklayın. Sample Style Sheets iletişim kutusundan istediğiniz stil sayfasını seçin ve OK düğmesine tıklayın. Bu stil sayfalarını oldukları gibi kullanabilir ya da bir başlangıç noktası olarak alarak kendi stil sayfalarınızı geliştirebilirsiniz. Sample Style Sheets iletişim kutusunda Cancel düğmesine tıkladığınızda Attach External Style Sheet iletişim kutusuna dönersiniz. HTML kodu yazma konusunda yeterli bilgiye sahipseniz ve CSS kodu yazmayı biliyorsanız, File > New komutunu seçtikten sonra General sekmesindeki Basic Page kategorisinden de CSS belge tipini seçerek sıfırdan bir CSS sayfası oluşturabilirsiniz. Bu işlemi yaptığınızda yeni bir belge açılacaktır. Bu belgede Code görünümünün tek görünüm modu olduğuna dikkat edin. CSS ve CSS elemanlarıyla ilgili ayrıntılı bilgi almak isterseniz, Code panel grubunda yer alan Reference panelindeki Book menüsünden O REILLY CSS Reference ı seçin. Style menüsünü kullanarak CSS terimlerini seçebilir ve bunlarla ilgili açıklamaları okuyabilirsiniz. Reference panelini Ders 15 te daha yoğun bir şekilde kullanacaksınız Stİl Sayfaları Gelİştİrmek 133

28 3. Browse düğmesine tıklayın ve bu dersin başında oluşturduğunuz sangha. css dosyasını bulun. Select Style Sheet File iletişim kutusundaki Choose (Macintosh ta) ya da OK (Windows ta) düğmesine tıklayarak stil sayfasını seçin. Attach External Style Sheet iletişim kutusunun Add As bölümünde Link seçeneğinin işaretli olduğundan emin olun ve OK düğmesine tıklayın. sangha.css adındaki harici stil sayfası index.html belgesine bağlanacaktır. Sayfa artık harici stil sayfasında tanımlanan biçimlendirme niteliklerini yansıtacaktır. Bunun sonuçlarını hemen göreceksiniz. Bağlantı renkleri, Ders 3 te ayarladıklarınızla aynı olacak, arka plan bu derste daha önce ayarladığınız soluk sarı rengini alacak ve varsayılan sayfa fontu, yine bu derste daha önce seçtiğiniz fonta dönüşecektir. Link seçeneği varsayılan olarak ayarlanmış durumdadır, index.html belgesine ilk defa bir stil sayfası ekliyorsunuz. Bir stil sayfası eklemek için kullanılan Import seçeneği Netscape Navigator 4.x te çalışmaz. Bu Web tarayıcısı Import seçeneğiyle eklenen bütün stil sayfalarını göz ardı eder. Stil sayfalarının basamaklı yapısından dolayı ikinci stil sayfası önceliğe sahiptir ve ilk sayfada uyumsuzluk yaratan bütün stilleri geçersiz kılar. Benzer şekilde, üçüncü stil sayfası da birinci ve ikinci sayfalardaki bütün uyumsuz stilleri geçersiz kılar. Birden fazla stil sayfası kullanma işlemi basamaklama (cascading) olarak bilinir. Netscape 4.x kullanıcıları göz önüne alınarak sıkça kullanılan bir teknik de, bu tarayıcıyla uyumlu olmayan bütün stilleri Import seçeneğinin kullanıldığı sonraki diğer stil sayfalarına yerleştirmektir. Böylece Netscape 4.x sadece ilk stil sayfasında yer alan stilleri kullanacak ve uyumsuzluk çıkarma ya da hata oluşturma ihtimali bulunan stillerden etkilenmez, çünkü Import seçeneğine bağlanan stil sayfalarını görmezden gelir. Sonraki stil sayfalarında aktarılan stilleri içerenler varsa, bunlar ilk sayfada yer alan eski Web tarayıcılarına yönelik stilleri geçersiz kılabilir. Harici Stiller Oluşturmak Font, font büyüklüğü, rengi gibi çeşitli biçimlendirme niteliklerini ayrı ayrı belgelerde kolayca değiştirebilirsiniz. Ancak harici stil sayfalarının seçeneklerinizi artırabileceğini ve bu stilleri sitenizdeki diğer belgelerde de kolayca uygulamanızı sağladığını unutmayın. Stillerinizi, onları kullanmak istediğiniz her sayfada yeniden yaratmak yerine, bütün stillerinizi saklamak üzere bir harici stil sayfası kullanabilir ve böylece bu stilleri söz konusu stil sayfasının bağlı olduğu her belge tarafından erişilebilir kılabilirsiniz. Bu da biçimlendirme işlemini önemli ölçüde hızlandırabilir. 134 DERS 4

29 Şimdiki uygulamada bir HTML etiketini yeniden tanımlayarak sangha.css harici stil sayfası içinde yeni bir stil oluşturacaksınız. Burada Heading 3 (<h3>) HTML imini yeniden tanımlayarak Web tarayıcısına <h3> etiketini kullanan her metnin sizin tanımladığınız biçimlendirme ayarlarıyla görüntülenmesi gerektiğini bildireceksiniz. Bu kullanışlı bir işlemdir, çünkü temel Heading 3 formatını değiştirerek bu formatı kullanan bütün metinlerin sizin tanımladığınız stil nitelikleriyle biçimlendirilmesini sağlar. 1. CSS Styles panelindeki New CSS Rule simgesine tıklayın. Selector Type alanında Tag i seçin. Tag menüsünü kullanarak h3 ü seçin. Bu uygulamada Heading 3 (Başlık 3) için bir stil oluşturuyorsunuz. HTML de buna karşılık gelen etiket <h3> ile gösterilir. Etiketler New CSS Rule iletişim kutusunda kodda etraflarını saran büyük-küçük işaretleri olmadan gösterilir. Belgenin üst tarafında yer alan başlık Heading 3 olarak biçimlendirilmiştir ve bir sonraki adımda tanımlayacağınız nitelikleri alacaktır. Mevcut bir HTML etiketini yeniden tanımlayan bir stil oluşturuyorsanız, ekleme noktasını sayfada bu etiketi kullanan bir metnin içine yerleştirmeniz ya da stili oluşturmadan önce Etiket Seçici de bu etiketi seçmeniz işinizi kolaylaştıracaktır. Selector Type alanında Tag varsayılan seçenek olduğu müddetçe, Dreamweaver HTML etiketini, oluşturulacak olan stille otomatik olarak ilişkilendirecektir (varsayılan seçici tipi en son kullanılan tiptir). Selector Type alanındaki varsayılan seçenek Tag değilse onu seçebilir, ardından New CSS Rule iletişim kutusundaki Cancel düğmesine tıklayabilir ve tekrar New CSS Rule a tıklayabilirsiniz. İletişim kutusu tekrar açıldığında etiket seçili hale gelecektir. HTML konusuna aşina değilseniz etiketi New CSS Rule iletişim kutusunu açmadan önce seçmek işinizi kolaylaştırabilir. Örneğin başlığa tıklayıp, ardından <h3> etiketini seçebilir ve sonra da CSS Styles panelindeki New CSS Rule simgesine tıklayabilirsiniz. Selector Type alanında Tag seçiliyse, <h3> etiketi Tag metin alanında h3 şeklinde gösterilir. Stİl Sayfaları Gelİştİrmek 135

30 2. Define In alanında menü seçeneğini işaretleyin ve menüden sangha.css i seçin. OK düğmesine tıklayın. Bu, geçerli belgeye bağlanmış tek stil sayfası olduğu için menüde sadece (New Style Sheet File) ve sangha.css seçenekleri bulunur. Herhangi bir harici stil sayfası eklenmemiş belgeler için bu menüdeki tek seçenek (New Style Sheet File) olacaktır. Yeni bir stil oluştururken New CSS Rule iletişim kutusunun Define In alanındaki menüde (New Style Sheet File) seçeneğini işaretleyerek yeni bir harici stil sayfası oluşturabilirsiniz. Bir kural için yeni bir harici stil sayfası oluşturduğunuzda stil sayfası kendisi için oluşturulduğu belgeye otomatik olarak bağlanır. Bu tür yeni harici stil sayfalarını.css uzantısıyla kaydetmeniz gerekir. Dosya yapısını temiz ve düzgün tutmak için bazı sitelerde bütün harici stil sayfaları merkezi bir konumda toplanır. CSS Rule Definition for h3 in sangha.css iletişim kutusu açılacaktır. Bu iletişim kutusunu Heading 3 biçimlendirme özelliklerini tanımlamak için kullanacaksınız. 136 DERS 4

31 CSS Rule Definition iletişim kutusu daima stilin seçicisini (üzerinde değişiklik yapılan eleman) ve bunun tanımlandığı stil sayfasının adını görüntüler. Buradaki uygulamada seçici h3 ve stil sayfası da sangha.css tir. 3. Type kategorisinde Size menüsünden 18 i seçin ve ölçü değerini points olarak değiştirin. Font menüsünden Courier New, Courier, monospace i seçin. Renk değerini # olarak değiştirin. Weight menüsünden bold u seçin ve OK düğmesine tıklayın. Doğrudan CSS kodunda değişiklik yapmak için sangha.css dosyasını da açabilirsiniz. CSS Rule Definition iletişim kutusunu kapatmak için OK düğmesine tıkladığınızda, belge penceresinde yeni bir sekmede sangha.css dosyası otomatik olarak açılacaktır. CSS dosyaları Code görünümünde ekrana gelir (bu görünümü Ders 16 da yoğun olarak kullanacaksınız) Stil sayfasında stil oluşturma, düzenleme ya da silme gibi değişiklikler yaparsanız, kapatmadan önce CSS belgesini kaydettiğinizden emin olun. Kaydetmeden kapatırsanız yapmış olduğunuz bütün değişiklikleri kaybedersiniz. Çalışmaya devam ederken CSS belgenizle HTML belgenizi düzenli olarak kaydetmeniz iyi olacaktır. Stİl Sayfaları Gelİştİrmek 137

32 CSS le nasıl çalışacağınızı ayarlamak için Dreamweaver ın Preferences iletişim kutusunu kullanabilirsiniz. CSS Styles kategorisi, üzerinde değişiklik yapıldığında CSS dosyalarını açma imkânı sağlar. Bu seçenek varsayılan durumda açıktır. Şimdiki ders boyunca bu seçeneği işaretli olarak bırakmalısınız. Preferences iletişim kutusunun yine bu bölümünde Dreamweaver ın CSS yazma şeklini etkileyen bazı seçenekler vardır. 138 DERS 4

33 Yeniden tanımlanan HTML etiket stilleri, stil sayfasının uygulandığı belgedeki (belgelerdeki) yeniden tanımlanmış etiketlerin kapsadığı tüm içeriğe otomatik olarak uygulanır. Oluşturduğunuz stil heading 3 formatını kullanan metne yansıtılacaktır. 4. Ekleme noktasını Yoga Sangha s inspiration is emerging. İfadesiyle başlayan ilk paragrafın içine yerleştirin. Belge penceresinin sol alt köşesindeki Etiket Seçici bir HTML etiketi olan <p> yi gösterir. Buradan, ekleme noktasının paragrafın içinde olduğunu anlarız. <p> etiketi bir paragraf tanımlar. 5. CSS Styles panelindeki New CSS Rule simgesine tıklayın. Tag metin alanında p harfinin görünmesi, Selector Type alanında Tag in seçilmiş olması ve Define In alanındaki menüde sangha.css in seçili olması gerekir. Bu değerleri ayarlamak için gereken değişiklikleri yapın ve sonra da OK düğmesine tıklayın. Stİl Sayfaları Gelİştİrmek 139

34 Oluşturduğunuz yeni stil, paragraf etiketleriyle biçimlendirilen metnin görüntülenme şeklini yeniden tanımlayacaktır. Burada seçici p, stil sayfası da sangha.css tir. İletişim kutusundaki Tag metin alanında <p> etiketinin otomatik olarak seçilmesi gerekir, çünkü yeni bir CSS kuralı seçmeden önce ekleme noktasını <p> etiketini kullanan bir paragrafın içine yerleştirmiştiniz. Bu derste New CSS Rule iletişim kutusunu en son kullandığınızda Selector Type alanında Tag seçeneğini işaretlediğiniz için bu tip otomatik olarak seçili durumda olacaktır. Dreamweaver ı kapatırsanız, New CSS Rule iletişim kutusunu yeniden açtığınızda Selector Type alanında yine otomatik olarak Class seçeneğinin işaretlenmiş olduğunu göreceksiniz. 6. CSS Rule Definition iletişim kutusunun Type kategorisinde Font menüsünü boş bırakın. Size metin alanına 12 yazın ve Size alanının birim menüsündeki ölçü birimi değerini pixels olarak ayarlayın. Line Height metin alanına 20 yazın ve ölçüm değerini pixels olarak ayarlayın. Color alanında siyah rengi (#000000) seçin ve iletişim kutusunu kapatmak ve stili oluşturmak için OK düğmesine tıklayın. İletişim kutusu açık durumdayken Apply düğmesine tıklayarak yaptığınız ayarları sayfada görebilirsiniz. Metnin görünümüyle ilgili değişiklikler yapmak isterseniz bunu iletişim kutusunu kapatmadan önce yapabilirsiniz. 140 DERS 4

35 Belgede paragraf etiketleri içinde yer alan bütün metinler harici stil sayfasında tanımladığınız niteliklere ait biçimlendirme özellikleriyle görünecektir. Stil sayfası, farklı biçimlendirme özellikleri uygulanmış metinleri, konu başlıklarını ve listeleri etkilemez. Web de Ölçüm İçin Kullanılan Birim ve Çözünürlük Seçenekleri Piksel (pixel), Web sayfalarındaki metin büyüklüğünü tanımlamak için kullanılan ölçüm birimlerinden biridir. Punto (point), basılı medya ürünleri için türetilmiştir ve dolayısıyla sadece çıktısı alınacak sayfalar için iyi bir seçenektir. Piksellerin çıkış noktası dijital medya ürünleridir ve ekran çözünürlüğünü temel alan bir ölçü birimidir. Bunun sonucu olarak pikseller farklı Web tarayıcıları ve platformlar arasında geçiş yapıldığında puntoya göre daha tutarlı sonuçlar elde edilmesini sağlar. Windows yüklü bir bilgisayarda okunan küçük boyutlu bir metin bir Macintosh ta hiç okunmayabilir. Buna, geliştiricilerin metin boyutunu tanımlarken punto kullandığı durumlarda çok daha sık rastlanır. Aralarında Ders 2 de öğrendiğiniz göreceli büyüklüklerin (Properties denetçisindeki small, medium, large, vs diğer seçenekler) ve bir ölçü birimi seçmeyi gerektiren mutlak değerlerin de (sayısal olarak tanımlanırlar) bulunduğu birkaç ölçüm seçeneği daha mevcuttur. Baskı tabanlı diğer seçenekler arasında inç, santimetre ve milimetreyi de sayabiliriz. Pika, (bir pika 12 puntoya eşittir), ems, exs ve yüzde de diğer ölçü birimi seçenekleridir. Yüzde (percentage) seçeneği, ebeveyn eleman veya etiket tarafından tanımlanan büyüklüğü temel alır ve bu yüzden önceki bir stilde ya da varsayılan bir Web tarayıcısı ayarında tanımlanan bir büyüklük (size) niteliğinin varlığına (kalıtım yoluyla alır) bağımlıdır. Stillerin önceliği ve kalıtım konularını bu derste daha ileride göreceğiz. Genellikle piksel, punto ya da diğer baskı tabanlı ölçüm birimlerinin yerine göreceli büyüklükler, ems ve yüzde kullanılması tavsiye edilir. Ama dikkat etmek gereken en önemli nokta, Web sayfalarını farklı platformlarda test ederek metinlerin Macintosh larda ve Windows yüklü bilgisayarlarda nasıl göründüğüne bakmaktır. Stİl Sayfaları Gelİştİrmek 141

36 7. Ekleme noktasını is a form of Hatha yoga ifadesiyle başlayan listenin ilk satırının içine yerleştirin. Etiket seçicide <ul> ye tıklayın. Etiket Seçici Bu işlemde, metnin biçimlendirmesini kontrol eden list etiketi seçilir. <ul> etiketini (tüm listeye uygulanır) seçerek biçimlendirme özelliklerini aynı anda hem listenin madde imine, hem de liste öğesine uygulamış olursunuz. Etiket Seçici de <li> etiketini de (sadece listedeki tek bir öğeye uygulanır) göreceksiniz. 8. CSS Styles panelindeki New CSS Rule düğmesine tıklayın. Selector Type alanında Tag seçeneğinin işaretli olduğundan, Tag metin alanında ul ifadesinin görüntülendiğinden ve stilin sangha.css stil sayfasında oluşturulacağından emin olun. OK düğmesine tıklayın ve CSS Rule Definition iletişim kutusunu kullanarak Size değerini 12 pixels, Weight değerini bold ve renk değerini de # olarak ayarlayın. OK düğmesine tıklayın. 142 DERS 4

37 ul stili, varsayılan gövde metni rengi (siyah) için yaptığınız ayarları geçersiz kılar. Hangi stillere öncelik verildiğini nasıl belirleyeceğinizi bu derste daha ileride öğreneceksiniz. 9. Belge penceresinde, madde imli listenin hemen üzerinde yer alan Anusara Yoga konu başlığına tıklayın. Etiket Seçici de <h4> etiketin seçin ve CSS Styles panelindeki New CSS Rule düğmesine tıklayın. New CSS Rule iletişim kutusunda Tag alanında <h4> ifadesinin görüntülendiğinden, Selector Type seçeneğinin Tag olarak ayarlandığından ve stilin sangha.css dosyasında tanımlanacağından emin olun; sonra da OK düğmesine tıklayın. CSS Rule Definition iletişim kutusunda Font Courier New, Courier, mono olarak, Size değerini de 16 pixels olarak ayarlayın. OK düğmesine tıklayın. Bu konu altbaşlığı Heading 4 formatına ayarlanmıştır. Belge penceresinin sol alt köşesinde yer alan Etiket Seçici de <h4> etiketinin görüntülendiğine dikkat edin. Properties denetçisindeki Format menüsünde de Heading 4 ün seçili olduğunu görebilirsiniz. Stİl Sayfaları Gelİştİrmek 143

38 Bu aşamada belgenizin görünümü aşağıdaki örnektekine benzeyecektir. Bir sonraki uygulama için index.html dosyasını açık bırakın. Hem index.html, hem de sangha.css belgesini kaydedin. Bu derste daha önce stil sayfasını düzenlemeye başladığınızda sangha.css belgesinin otomatik olarak yeni bir sekmede açıldığını hatırlayın. Etiket Kombinasyonları İçin Stil Oluşturmak Şu ana kadar iki seçici tipi kullandınız: Class ve Tag. New CSS Rule iletişim kutusundaki üçüncü seçenek Advanced olarak adlandırılmıştır ve bu seçenek, aralarında etiket kombinasyonlarını (diğer etiketlerin içinde yer alan etiketler) biçimlendirmek için kullanılan bağlamsal seçicilerin de bulunduğu çeşitli gelişmiş stiller oluşturmanızı sağlar. Bu uygulamada metin paragrafları için hizalamayla birlikte farklı bir biçimlendirme ayarı tanımlayacaksınız. <p> etiketi için daha önce bir stil oluşturduğunuzdan belgedeki paragraflar geçerli durumda bu biçimlendirme özelliklerini yansıtacaktır. 144 DERS 4

39 1. İmleci belgenin üst tarafında yer alan ilk paragrafa ( An Anusara Yoga Studio satırının hemen altında) yerleştirin. Etiket Seçici yi kullanarak <p> etiketini seçin. Paragrafın tamamı seçilecektir. Belge penceresinin sol alt köşesindeki Etiket Seçici kod hiyerarşisini göstermektedir. Aşağıdaki adımlarda, paragraf bloğunu içeren bir etiket kombinasyonu oluşturacaksınız. 2. Insert araç çubuğundaki Insert Div Tag düğmesine tıklayın. Insert menüsünden Wrap Around Selection ı seçin ve New CSS Style düğmesine tıklayın. Selector Type seçeneğini Class olarak ayarlayın, Name metin alanına.description yazın ve Define alanında sangha.css i seçin. OK düğmesine tıklayın. Insert Div Tag düğmesi Stİl Sayfaları Gelİştİrmek 145

40 Burada bu <div> etiketine uygulanacak bir stil (description) oluşturuyorsunuz. Bir sonraki adımda CSS Rule Definition iletişim kutusunu kullanarak description stilinin niteliklerini tanımlayacaksınız. 3. Block kategorisini seçin, Text Align menüsünden justify ı seçin ve ardından OK düğmesine tıklayın. 4. Insert Div Tag iletişim kutusunda description sınıfının seçili olduğundan emin olun. OK düğmesine tıklayın. Paragraf artık belge penceresinde noktalı dış çizgilerle (bu, Web tarayıcısında görülmeyen ve Dreamweaver a özgü bir görsel yardımcıdır) gösterilen bir div in içinde yer alacaktır. Fare imlecini üzerine getirdiğinizde bu noktalı çizgiler düz kırmızı çizgilere dönüşecektir ve bu da div i seçebileceğinizi gösterir. 146 DERS 4

41 Eğer yukarıda bahsettiğimiz dış çizgileri göremiyorsanız, View > Visual Aids > CSS Layout Outlines komutunu seçebilirsiniz. Eğer bir div i etrafını saracağı bir şey (örneğin bu uygulamadaki <p> etiketi gibi) seçmeden eklerseniz, div, Content for class sınıfın adı Goes Here yer tutucu metniyle birlikte eklenecektir. 5. İmleci div in içinde yere alan paragrafa yerleştirin. Burada Etiket Seçici de <div.description><p> ifadesi görünecektir. Sıradaki adımlarda etiket kombinasyonlarını tanımlamak için bir stil oluşturacaksınız ve bu da tablonun içinde paragraf için farklı bir stil oluşturmanızı sağlayacak. 6. CSS Styles panelindeki New CSS Rule düğmesine tıklayın. Selector Type alanında Advanced seçeneğini işaretleyin ve Selector metin alanına div p yazın. Define In alanında sangha.css i seçin ve OK düğmesine tıklayın. Selector metin alanına yazdığınız div p ifadesi div etiketini ve içindeki paragraf (paragraph) etiketini temsil eder. sangha.css stil sayfasına bağlı bir belgede bu özel etiket kombinasyonu kullanıldığında aşağıdaki adımlarda ayarlayacağınız biçimlendirme özellikleri uygulanacaktır. div p kullandığınızda sadece bir div içinde bulunan paragrafların etkileneceğini belirtmiş olursunuz. Selector menüsünde bağlantılara uygulanabilen dört durum yer alır: a:link, a: visited, a:hover (eski Web tarayıcıları tarafından desteklenmez) ve a:active. Bu CSS seçici tipi sınıfımsı (pseudo-class) olarak adlandırılır. Stİl Sayfaları Gelİştİrmek 147

42 CSS Rule Definition iletişim kutusu açılacaktır. 7. Category listesinden Block u seçin. Text Indent metin alanına 15 yazın, ölçü birimi olarak pixels i seçin ve OK düğmesine tıklayın. Yaptığınız değişiklikler metne yansıtılacaktır. 8. index.html ve sangha.css belgelerinde yaptığınız değişiklikleri kaydedin ve index.html belgesini bir Web tarayıcısında önizleyin. Harici stil sayfası otomatik olarak kaydedilmediği için sayfanızı bir Web tarayıcısında önizlemeden önce onu kaydetmelisiniz. Önizlemeden önce kaydetmezseniz Dreamweaver size bunu yapmanız gerektiğini bildirecektir. Bağlamsal seçiciler, diğer etiketlerle arka arkaya kullanılan etiketleri biçimlendirmenizi sağladığı için, div içinde bulunan paragrafta yaptığınız değişiklikler sayfadaki diğer paragrafları etkilemez. 148 DERS 4

43 Mevcut Bir Stili Düzenlemek Harici stil sayfaları kullanmanın en önemli avantajlarından biri, stilleri kolay ve hızlı bir şekilde düzenleme imkânı sağlamasıdır. Değişiklikler Web sayfaları yerine sadece stil sayfalarında yapıldığı için yaptığınız düzenlemeleri bir sürü belgede tekrarlamanız gerekmez. Harici stillerde biçimlendirme ayarları HTML belgesinde (index.html gibi) tutulmaz. Dahil edilen tek stil bilgisi, sınıflarda hangi stilin kullanılması gerektiğini belirten bir referanstır. Web sayfaları Web tarayıcısına, biçimlendirme özelliklerinin görüntülenme şekliyle ilgili talimatlar için hangi harici stil sayfalarının kullanılacağını söyler. Stiller elemanlara Web tarayıcısı tarafından, aşağıdaki şekilde gördüğünüz gibi, dosyalar ziyaretçi tarafından görüntülendiği anda uygulanır. Yapılan her değişiklik, düzenlenen stil sayfasına bağlı bütün sayfalara ziyaretçi tarafından görüntülendikleri anda otomatik olarak yansıtılır. Biçimlendirme değerleri stil sayfasında (örneğin sangha.css) saklandığından, stil sayfasına bağlı bütün sayfaları etkilemek için bu değerlerin sadece tek bir konumda değiştirilmesi gerekir. Bu çok kullanışlı bir özelliktir. Çünkü metin gibi bir elemanın görünümü birkaç sayfada, hatta bütün sitede çok hızlı bir şekilde değiştirilebilir. Bu uygulamada sangha.css adındaki harici stil sayfasında yer aşan bir stili düzenleyeceksiniz. Stİl Sayfaları Gelİştİrmek 149

44 1. CSS Styles panelinin üst kısmında yer alan All Rules listesinden p yi seçin. sangha.css harici stil sayfasında oluşturduğunuz stiller CSS Styles panelindeki listede görüntülenir. CSS Styles panelinde p yi seçtiğinizde CSS Styles panelinin CSS Properties bölümünde geçerli durumdaki seçimin p stili olduğu belirtilir ve bu stil için tanımlanan özellikler (burada kullanılan özellikler renk, font büyüklüğü ve satır yüksekliğidir) görüntülenir. Her özellik, stilde tanımlanan belirli nitelikleri gösterir. 2. line-height yani satır yüksekliği özelliğinin değerine tıklayın ve bu değeri 18 olarak değiştirin. Özellikleri ve değerlerini doğrudan CSS Styles panelinde değiştirmek, stillerde değişiklik yapmak için kullanabileceğiniz hızlı bir yöntemdir. Bir özelliğin ismine (soldaki sütunda) tıkladığınızda bu özellik seçili hale gelir. İlgili değere (sağdaki sütunda) tıklayarak bu değeri değiştirebilirsiniz. Örneğin fontun ismine tıklayarak mevcut fontların bulunduğu bir menüye, renk numunesine tıklayarak da renk seçicisine erişebilirsiniz. Yaptığınız değişiklikler belgeye uygulanacaktır. Satırların arasındaki boşluk şimdi biraz daha az olacaktır. Bu stil sayfasına bağlı diğer tüm belgelerde <p> etiketini kullanan metinler, Dreamweaver da ya da bir Web tarayıcısında görüntülendiklerinde, yeni yaptığınız değişikliklere göre otomatik olarak biçimlendirilecektir. 150 DERS 4

45 Properties listesinin alt kısmındaki Add Property bağlantısına tıkladığınızda, kurala eklemek üzere yeni bir özellik seçebilirsiniz. Stilleri, ilgili stili seçip CSS Styles panelinin alt kısmındaki Edit Style simgesine tıklayarak da düzenleyebilirsiniz. Siz bu işlemi yaptıktan sonra CSS Rule Definition iletişim kutusu açılacaktır. Bu iletişim kutusu, önceki uygulamalarda stilleri oluşturmak için kullandığınız iletişim kutusuyla aynıdır. index.html ve sangha.css dosyalarını kaydedin ve açık bırakın. Stil Önceliği Aynı elemana birden fazla stil uygulanmışsa Web tarayıcısı her bir stilin niteliklerini diğer stillerle birlikte görüntüler ve bu stillerin arasında uyuşmazlık çıkabilir. Böyle bir uyuşmazlık çıkması durumunda stillerin öncelik sırası CSS in basamaklı (cascading) yapısı tarafından belirlenir. Stillerinizi nasıl yöneteceğinizi ve nasıl sıralayacağınızı bilirseniz beklenmedik sonuçlarla karşılaşmazsınız. CSS üst üste eklenerek uygulanır. Yani aynı elemana uygulanıyorlarsa her stil diğer stillerin üzerine eklenir. Burada da aşağıda belirtilen orijin, özgüllük ve sıralama kurallarına göre sıralı bir düzen oluşturulur. Orijin İlk olarak orijin (stilin kaynağı) değerlendirilir. Stil orijinlerinin sırası en düşük öncelikten (Web tarayıcısı tarafından kullanılır) başlayarak şu şekilde gider: Web tarayıcısı varsayılan seçenekleri (en düşük öncelik) Kullanıcı tarafından oluşturulan stiller Web sayfası tarafından tanımlanan stiller (en yüksek öncelik) Yani Web tarayıcıları kendi varsayılan biçimlendirme spesifikasyonlarını kullanır (bu varsayılan değerleri geçersiz kılan bir stil sayfası olmadığı müddetçe). Kullanıcı tanımlı bir stil sayfası Web tarayıcısının varsayılan değerlerini geçersiz kılar. Web sayfası tarafından tanımlanan stiller de kullanıcı tanımlı stilleri geçersiz kılar. 1. Windows kullanıcıları için: Internet Explorer ı açın, Tools > Internet Options komutunu seçin, General sekmesine geçin ve iletişim kutusunun alt kısmındaki Accessibility düğmesine tıklayın. Mac OS X kullanıcıları için: Safari yi açın, Safari > Preferences komutunu seçin, Advanced kategorisini seçin ve Style Sheet açılır menüsünü kullanarak daha önce oluşturduğunuz stil sayfanızı seçin. Stİl Sayfaları Gelİştİrmek 151

46 Bilgisayarınızda Internet Explorer ya da Safari yüklü değilse bu adımı tamamlamak için herhangi bir Web tarayıcısını kullanabilirsiniz. Kullanıcı stil sayfasının tanımlandığı bölümün adı ve tam konumu tarayıcıdan tarayıcıya ve sürümden sürüme farklılık gösterebilir. Bir Web tasarımcısı olarak farklı Web tarayıcılarını tanıyor olmanız iyi bir şeydir. Çünkü bu adımı diğer tarayıcılarda tekrarlamak isteyebilirsiniz. Stil sayfası tanımlamayla ilgili bir seçenek bulamazsanız Web tarayıcı uygulamasının Yardım bölümüne başvurabilirsiniz. Ziyaretçiler, girdikleri sayfalarda stil sayfalarının istedikleri şekilde uygulanması konusunda Web tarayıcılarını yönlendirme seçeneğine sahiptir. Bu seçenek, kendi ihtiyaçlarına göre optimize edilmiş bir stil sayfası aracılığıyla Web sayfalarının görünümünü ayarlamalarına izin vererek kullanıcılara daha geniş bir erişilebilirlik imkânı sağlayabilir. Bu, görme zorluğu çeken ziyaretçiler için önemli bir seçenektir. Örneğin arka plan üzerinde kontrastlı olmayan küçük harfli metinleri okumakta zorlanan bir kullanıcı, metinleri büyük olan ve yüksek kontrasta sahip bir renk kombinasyonu içeren bir stil sayfası (beyaz arka plan üzerinde siyah metin gibi) tanımlayabilir. Her ne kadar böyle bir seçenek mevcut olsa da, ziyaretçilerin büyük bir kısmı herhangi bir stil sayfası tanımlamayacaktır. Bu yüzden bir site geliştirirken tasarımınızın erişilebilirlik durumunu yine dikkate almanız gerekir. Bazı kullanıcıların böyle bir seçeneğin varlığından dahi habersiz olabileceğini de unutmayın. Sitenizin rahatça görülebilir hale getirilmesi konusunda ziyaretçilerinize fazla güvenmeyin. Sitenizi görmek için fazladan ne kadar çaba harcarlarsa, muhtemelen içeriğe bakmak için de o kadar az zaman harcayacaklardır. Tasarımlarınızı yaparken en iyi şekilde sonuç almak için (yani daha çok ziyaretçinin gelmesini kast ediyorum) ziyaretçilerinizden gelen tepkileri dikkate alın ve tam, dağınık olmayan ve kullanımı olabildiğince kolay siteler hazırlayın. 152 DERS 4

47 Windows taki Internet Explorer tercihleri arasında yer alan kullanıcı stil sayfası seçeneği Eğer kullanıcı tarafından tanımlanan bir stil sayfası ile Web sayfası tarafından tanımlanan bir stil sayfası arasında uyuşmazlık varsa, Web sayfası tarafından tanımlanan sayfa kullanılır. Eğer kullanıcı tanımlı bir stil sayfası varsayılan font olarak Verdana kullanıyorsa ve Web sayfası tarafından tanımlanan bir stil sayfasında varsayılan font rengi yeşilse, bu durumda varsayılan metinde hem Verdana hem de yeşil seçenekleri kullanılır. Bu üst üste geçme etkisi kalıtım (inheritance) olarak bilinir. Tarayıcının Preferences (Macintosh ta) ya da Tools (Windows ta) penceresini kapatabilirsiniz. CSS Weight Bildirimi Stillerde, weight bildirimi adındaki bir yöntemle de değişiklik yapılabilir. Bu öncelik belirleme yönteminde stillerin hangisinin öncelik sahibi olacağı konusunda kullanıcıya seçme şansı verilir. Bir stilin ağırlığını (weight) artırmak için stil bildiriminin sonuna, nitelik değerlerinden sonra!important ifadesi eklenir. Kullanıcı tanımlı bir stil sayfasında!important ifadesiyle tanımlanan her stil, Web sayfası tarafından tanımlanmış uyuşmazlık yaratan stilleri geçersiz kılar. Burada Web sayfasının tanımladığı stillerin!important modifier ını kullanıp kullanmaması dikkate alınmaz. Eski CSS standartlarına göre, kaynağı Web sayfası olan ve!important ifadesini içeren stiller!important ifadesini içeren kullanıcı stilleri geçersiz kılıyordu.!important bildirimi içeren kullanıcı tanımlı stillere öncelik veren değişiklikle kullanıcıların stiller üzerinde kontrol sağlayabilmesi amaçlanmıştır. Bu durum, sayfaları belirli şekillerde görmesi gereken ziyaretçiler için önemli olabilir. Bu modifier ı dikkatli bir şekilde kullanın ve gerçekten gerekip gerekmediğini belirleyin.!important modifier ını kullanan bir stil şöyle görünecektir. body { color: #339900!important }. Stİl Sayfaları Gelİştİrmek 153

48 Özgüllük Stil tiplerinin önceliği, hangi stilin en özel olduğunu belirleyen bir sisteme bağlıdır. Stillerin özgüllüğünde aşağıda görüldüğü gibi abc formatındaki değerler temel alınır. a, stildeki ID lerin sayısıdır b, stil tarafından tanımlanan niteliklerin sayısıdır c, seçicideki eleman isimlerinin sayısıdır Daha yüksek özgüllük değerlerine sahip stiller, daha düşük değere sahip stillere göre önceliklidir. Özgüllüğün Belirlenmesiyle İlgili Örnekler Stil Örnek Stiller Tipi a b c Özgüllük (abc) Değeri p { color: # } Tag Bu stil, paragraf bloklarındaki metinlerin rengini siyah olarak tanımlıyor. div p { font-size: Advanced (Bağlamsal Seçici) Bu stil, 22px } bir div içindeki bir paragraf bloğunda (paragraf bloklarında) bulunan metinlerin font boyutunu 22 piksel olarak tanımlıyor. h5 { font-family: Tag Bu stil, Heading 5 olarak Verdana, Arial, biçimlendirilmiş metinleri Helvetica, sans-serif; font-size 18px } 18 piksel büyüklükte, font ayarı da Verdana, Arial, Helvetica, sans-serif olacak şekilde tanımlıyor..quote { font-style: Class Bu stil,.quote stili normal; font-weight: uygulanmış metinlerin bold; color: #0033CC } normal font stilini kullanacağını, kalın olacağını ve koyu bir mavi renk (#0033CC) kullanacağını söylüyor. #left { font-size: Advanced Bu stil, benzersiz bir ID ile 22px; color: # } (ID ve işaretlenmiş olan metnin Bağlamsal font büyüklüğünü 22 piksel, Seçici) rengini de siyah olarak tanımlıyor. 154 DERS 4

49 2. Dreamweaver daki sangha.css stil sayfasına geçin. Şu stillerin özgüllük değerlerini hesaplayın: <h4> etiketi, highlight sınıfı ve <ul> etiketi. Değerleri hesapladıktan sonra bunları bu adımın en sonunda verilen değerlerle karşılaştırabilirsiniz. Aşağıdaki şekilde geçerli stil sayfanızın nasıl görünmesi gerektiğini görüyorsunuz. Özgüllüğün stil sırasını nasıl belirlediğini gösteren örneğin altında listelenen özgüllük değerleri, burada gördüğünüz stil sayfası temel alınarak hesaplanmıştır. Burada özgüllüğün stil sırasını nasıl belirlediğini gösteren bir örnek görüyorsunuz. Bu derste daha önce oluşturduğunuz Heading 3 etiket stili, dersin başında Page Properties iletişim kutusunda varsayılan fontu Arial, Helvetica, sans-serif olarak ayarladığınızda Stİl Sayfaları Gelİştİrmek 155

50 oluşturulan stilin tanımladığı fontu geçersiz kılar. Oluşturulan stil başlangıçta bir dahili stildi, fakat daha sonra sangha.css harici stil sayfasını oluşturmak için en üst seviyede yer alan index.html belgesindeki diğer dahili stillerle birlikte aktarıldı. <h3> etiket stili (41 dört nitelik ve bir seçici) varsayılan metin stilinden (23 iki nitelik ve üç seçici) daha büyük bir özgüllük değerine sahip. Varsayılan metin stili CSS belgesinde body, td, th { font-family: Arial, Helvetica, sans-serif; color: # } olarak; heading 3 stili h3 {fontfamily: Courier New, Courier, mono; font-size: 18pt; font-weight: bold; color: #660066;} olarak görünür. Varsayılan metin rengini tanımlayan stildeki seçicileri ayıran virgüllere dikkat edin (body, td, th). Virgüller bu stilin daha önce for div p için oluşturduğunuz gibi bir etiket kombinasyonu olmadığını, bu stilin bir dizi seçiciyi bir grup olarak tanımladığını gösterir. Nitelikleri aynı olan seçicileri gruplamak (ayrı ayrı stiller oluşturmak yerine) daha verimli bir yöntemdir. sangha.css stil sayfasında bu adımda hesapladığınız özgüllük değerleri şöyle olacaktır: h4 (Tag): a = 0, b = 2, c = 1 (değer: 21) Bu stilde herhangi bir ID (a) yok, font-family ve font-size adında iki nitelik var (b), ayrıca bir de seçici var (c), h4. highlight (Class): a = 0, b = 1, c = 0 (değer: 10) Bu stilde herhangi bir ID (a) yok, background-color adında bir tane nitelik var (b) ve hiçbir seçici yok (c). ul (Tag): a = 0, b = 3, c = 1 (değer: 31) Bu stilde herhangi bir ID (a) yok, font-size, weight ve color adında üç nitelik (b) ve ayrıca bir tane seçici var (c): ul. CSS, stillerin değerini hesaplamak için büyük, keyfi bir sayı tabanı kullanılır. Onluk sayı tabanı kullanılmaz, çünkü genellikle stillerin dokuzdan fazla ID si, niteliği ya da elemanı olabilir. Bir stilin hiçbir ID si olmadığını, 14 niteliği ve 5 elemanı olduğunu varsayalım. Böyle bir stil on tabanına göre şu değerleri kullanır: a = 0, b = 14 ve c = 5 ve elde edilen değer de 145 olur. Daha büyük bir tabana sahip bir sayı sisteminde a = 0, b = E ve c = 5, elde edilen değer de E5 olur. Bu nokta çok önemlidir. Çünkü bir ID si, bir niteliği olan ve hiçbir elemanı olmayan bir stil, hem onluk sistemde hem de daha büyük bir sayı sisteminde 110 değerine sahip olur. Onluk tabanda 145 değerine sahip ilk stil 110 değerine sahip ikinci stili geçersiz kılar. Ama daha büyük bir sayı sisteminde 110 değerine sahip ikinci stil, E5 değerine sahip birinci stili geçersiz kılar. Doğru özgüllük sırası da budur. 156 DERS 4

51 Sıralama Stillerin bulunduğu konumları temel alan stil sıralaması, aşağıdaki gibidir (en düşük öncelikten itibaren): Web tarayıcısı varsayılan değerleri (metne en uzak biçimlendirme ayarları, en düşük öncelik) Harici CSS stilleri Dahili CSS stilleri Satıriçi CSS stilleri Yerel HTML biçimlendirme seçenekleri (metne en yakın biçimlendirme ayarları, en yüksek öncelik-uyuşmazlık durumunda yukarıdaki stillerde ayarlanan bütün seçenekleri geçersiz kılar) İyi Kod Yazma Prensipleri: Satıriçi Stiller ve Yerel Biçimlendirme Özellikleri Kullanmaktan Kaçının Bir satıriçi stil (inline style) aslında doğrudan koda yerleştirilen bir stilin örneğidir. Satıriçi stillerini kullanılması genellikle tavsiye edilen bir şey değildir. <h1 style= color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif > ifadesini bir satıriçi stil örneği olarak verebiliriz. Satıriçi stiller belgenin içeriği içinde tanımlanırlar ve belgenin üstünde (dahili stillerde olduğu gibi) ya da ayrı bir stil sayfasında (harici stillerde olduğu gibi) herhangi bir stil sayfası kullanmazlar. Dahili ve harici stil sayfaları çok daha güçlüdür. Çünkü satıriçi stiller içeriği biçimlendirmeyle birleştirir ve bunlar bir stil tanımının başka yerde kullanılmayan tek bir örneğidir. Yerel HTML biçimlendirme özellikleri bütün stilleri geçersiz kılar. Dreamweaver metin biçimlendirmek için uzun bir süredir HTML biçimlendirme özelliklerini kullanmamaktadır, çünkü Ders 2 de gördüğümüz gibi <font> etiketi HTML 4.0 da geçerliğini yitirmiştir. Elle kod yazarken <font> etiketiyle biçimlendirme Dreamweaver da ve bazı Web tarayıcılarında desteklenmeye devam etmektedir. Ancak yeni standartları kullanarak daha esnek ve işlevsel Web siteleri tasarlayabileceğinizi unutmayın. En iyisi <font> etiketini kullanmaktan kaçınmaktır. 3. index.html sekmesine tıklayarak tekrar index.html belge penceresine geçin. Listenin en son satırında yer alan Universal Principles of Alignment metnine highlight stilini uygulayın. CSS Styles panelinin üst kısmındaki Current düğmesine tıklayın. Stİl Sayfaları Gelİştİrmek 157

52 highlight stilinde tanımlanan arka plan rengi, listenin biçimlendirme özelliklerini kontrol eden stille birleşecektir. CSS Styles panelinin Current görünümü, panelin üstteki kısmında geçerli seçime uygulanan bütün özelliklerin ve değerlerin (uygulanma sırasıyla) bir özetini sunar. En alttaki özellik, geçerli seçime en yakın olan özelliktir. Panelin alt kısmında, özet alanında seçilen özelliğe ait ayrıntıları göreceksiniz. Burada, kuralın içinde bulunduğu stil sayfası ile ilgili bilgilerle birlikte highlight sınıfı gösterilmektedir. Ayrıntılı bilgi edinmek için özet alanındaki özelliklerden istediğiniz birini seçebilirsiniz. Önceki uygulamada bir stili düzenlemek için kullandığınız CSS Styles panelinin Properties bölümü yine görünür durumda olacaktır. Bir metne Web sayfasını (orijin) hazırlayan kişi tarafından uyuşmazlık çıkaran niteliklere sahip birden fazla stil uygulandıysa, öncelik en içteki stilin (geçerli seçime en yakın stil) spesifikasyonlarına verilir. En yeni stiller daha eski stillerin içine yerleştirilir. Uyguladığınız en son biçimlendirme nitelikleri fiziksel olarak metne en yakın etiketler olduğu için bunlar daha eski stillere göre önceliklidir ve metnin son görünümünü kontrol ederler. Eğer belgenizde bir harici stil sayfası kullanılıyorsa, bu sayfadaki stiller bütün belgede kullanılır. Örneğin harici stil sayfasının Heading 3 ve Heading 4 için bazı tanımları olduğunu ve belgenizde Heading 3 etiketini yeniden tanımlayan bir de dahili stil oluşturduğunuzu farz edelim. Niteliklerin harici stildekilerle uyuşmazlık çıkarması durumunda öncelik dahili stile aittir. Örneğin dahili stil h3 etiketini kırmızı renkte olacak 158 DERS 4

53 şekilde, harici stil de yine h3 etiketini mavi renkte ve kalın olacak şekilde tanımladıysa, h3 etiketi kırmızı ve kalın olur. Bu durumdan sadece uyuşmazlık çıkaran nitelikler etkilenir. Metnin belirli bir kısmına elle uygulanan metin biçimlendirme özellikleri de diğer stillere göre öncelikli olabilir. Yukarıda verdiğimiz örnekte Heading 3 uygulanmış satırlardan birine Properties denetçisini kullanarak farklı bir renk uyguladığınızı varsayalım. Dreamweaver, Properties denetçisinde yapılan renk ve biçimlendirme seçimlerini özel dahili stiller olarak değerlendirir. Properties denetçisindeki Style menüsü hem dahili, hem de harici stilleri içerir. Belgenize bir stil sayfası iliştirdiyseniz ve Web tarayıcısı biçimlendirme özelliklerini beklediğiniz şekilde görüntülemiyorsa, stil sayfanızı ve belgenizi kontrol ederek, kullanılmasını beklediğiniz stilleri geçersiz kılan başka stiller ya da yerel biçimlendirme ayarları olup olmadığına bakın. Temel Tipte Bir CSS Yerleşim Düzeni Hazırlamak CSS, Web sitelerinizin yerleşim düzenini ve görünümünü kontrol etmek için kullanabileceğiniz harika bir araçtır. CSS işlevselliği en iyi şekilde, pek çok özelliği destekleyebilen yeni Web tarayıcılarıyla (5.0 ve daha yeni sürümler) sağlanır. CSS tablolarla birlikte ya da tabloyla oluşturulan yerleşim düzenlerine alternatif olarak kullanılabilir (bu konuyu Ders 6 da göreceğiz). Pek çok sitede tablo yerine CSS kullanımına geçilmiştir, çünkü tablolar şu anda daha fazla Web tarayıcısı ile uyumlu bir yerleşim düzeni hazırlama yöntemi olsalar da, bunları kullanmanın birçok dezavantajı vardır. Özellikle karmaşık tablolar sayfalarınızın yüklenmesini zorlaştırabilir. Bu tablolarda daha fazla kod kullanmak ve tablonun konumunu koruması için genellikle boşluk resimleri (spacer GIFs) kullanmak gerekir. En önemli dezavantajlardan biri, içeriğin biçimlendirme ve görünümle birleştirilmesidir. CSS in avantajları arasında, CSS tabanlı sitelerin güncellenmesinin daha kolay ve hızlı bir şekilde gerçekleştirilebilmesi, tutarlı görünüm, daha az kod ve daha kısa indirme süresi sayılabilir. CSS kullanıldığında içerik tasarımdan ve görünümü tanımlayan niteliklerden ayrılır. CSS kullanıldığında içerik tasarımdan be görünümü tanımlayan niteliklerden ayrılır. Yerleşim düzeni için CSS kullanmanın diğer avantajları arasında, erişilebilirlik düzeyinin artırılması, esneklik ve verimden de bahsetmek gerekir. Bir Web sayfasında kullanılacak yerleşim araçları konusunda karar verirken en önemli noktalar, oluşturulması düşünülen yerleşim düzeni için en iyi aracın hangisi olduğunu ve ziyaretçilerin büyük kısmının erişebileceği şeylerin neler olduğunu belirlemektir. Sayfalarınızı farklı Web tarayıcılarında ve işletim sistemlerinde önizleyerek seçmiş olduğunuz yerleşim düzeni yönteminin nasıl göründüğünü test etmeyi de sakın ihmal etmeyin. Şimdiki uygulamada, bu derste daha önce oluşturduğunuz description kuralını düzenleyecek ve description stilini kullanan içerik için temel tipte bir kutu elde edeceksiniz. index.html belgesinde, belgenin üst kısmındaki paragrafı içeren <div>, description kuralını kullanmaktadır. Stİl Sayfaları Gelİştİrmek 159

54 1. CSS Styles panelindeki All düğmesine tıklayın. All Rules listesinden description kuralını seçin ve CSS Styles panelinin alt kısmında yer alan Edit Style düğmesine tıklayın. Edit Style düğmesi Şimdi bu sayfada yer alacak basit kutunun görünümünü tanımlamak için kullanılacak sınıfı hazırlamaya başlıyorsunuz. 2. Category listesinden Background u seçin. Background color renk seçicisinden beyaz rengi (#FFFFFF) seçin. 160 DERS 4

55 Böylece sarı renkli arka planın üst kısmında görünecek olan sütunun arka plan rengini tanımlamış oldunuz. 3. Category listesinden Box ı seçin. Width metin alanına 90 yazın ve ölçü birimi menüsünde % nin seçili olduğundan emin olun. Padding alanındaki Top metin alanına 8 yazın. Same For All onay kutusunun işaretli olması ve ölçü birimi menüsünde pixels in seçili olması gerekir (bunlar varsayılan ayarlardır). Box kategorisinde, oluşturduğunuz taşıyıcı elemanı kontrol etmede kullanabileceğiniz pek çok seçenek bulunur. Burada, oluşturacağınız kutunun genişliğini, kullanılabilir Web tarayıcısı genişliğinin % 90 ı olacak şekilde tanımladınız. Padding ayarları kutunun kenarıyla içeriği arasında belirli miktarda bir boşluk yaratır. Margin ayarları, Web tarayıcısının kenarları ve kutunun kenarları arasında oluşacak boşluğu ve kutuyla kutunun dışında oluşturulabilecek elemanların arasındaki boşluğu tanımlar. Stİl Sayfaları Gelİştİrmek 161

56 4. Category listesinden Border ı seçin. Style alanındaki Top menüsünden Solid i seçin. Width alanında Same For All onay kutusunu işaretli olarak bırakın ve metin alanına 1 yazın. Sonra da ölçü birimi menüsünde pixels in seçilmiş olduğundan emin olun. Color alanındaki Top renk seçicisinde siyah rengi (#000000) seçin ve Same For All onay kutusunu işaretli olarak bırakın. OK düğmesine tıklayarak CSS Rule Definition iletişim kutusunu kapatın. Border kategorisindeki seçenekler kutunun nasıl görüneceğini belirlemenizi sağlar. Stil tanımıyla ilgili toplam sekiz kategori vardır. Şu ana kadar bunların beşini kullandınız. Type, Background, Box, Block ve Border. Diğer üç kategori şunlardır: List: Sıralı ve sırasız listelerin biçimlendirilmesini kontrol etmek için çeşitli seçenekler içerir. Positioning: Elemanların yerleştirileceği konumlarla ilgili bazı seçenekler içerir. Dreamweaver konumlandırma seçeneği kullanılan her elemanı bir katman (Layer) olarak değerlendirir. (Katmanları Ders 9 da göreceğiz.) Daha karmaşık yerleşim düzenleri için CSS i ve katmanları bir arada kullanabilirsiniz. Extensions: Bazıları çok fazla desteklenmeyen ilave seçenekler içerir. 162 DERS 4

57 Şu aşamada paragrafı içeren <div> siyah dış çizgili beyaz bir arka plan görüntülemektedir. 5. İmleci kutunun kenarlığının üzerine getirin. Çizgi kırmızıya dönüştüğünde (bu işaret <div> i seçebileceğinizi gösterir) kenarlığa tıklayın. Etiket Seçici deki vurgulanmış <div.description> dan da anlayabileceğiniz gibi <div> seçili hale gelecektir. Seçilen <div>, etkilenen CSS niteliklerini göstermek için bir dizi görsel yardımcı (Border özelliğini gösteren düz mavi dış çizgi ve Padding özelliğini gösteren ve kenarlık ile metin arasında bulunan gölgeli alan gibi) kullanır. 6. View > Visual Aids > CSS Layout Backgrounds komutunu seçin. Dreamweaver, bir belgenin CSS le biçimlendirilen alanlarını göstermek için renk kodlamasından faydalanır ve her div, yerleşim düzenleri oluştururken onları ayırt etmenizi kolaylaştırmak için farklı bir renk kullanır. Özelliklerin değerleri (font ve arka plan renkleri gibi) bu modda geçici olarak göz ardı edilir. Stİl Sayfaları Gelİştİrmek 163

58 Sadece Dreamweaver da bulunan bu görsel yardımcı, sayfanın Web tarayıcısında nasıl görüneceği hakkında bir fikir vermez. 7. View > Visual Aids > CSS Layout Backgrounds komutunu seçerek CSS Layout Backgrounds görsel yardımcısını kapatın. index.html ve sangha.css belgelerini kaydedin ve index.html belgesini Web tarayıcısında önizleyin. Artık elinizde içeriği çevreleyen bir kutu var. Bu yerleşim düzeni bir harici stil sayfası ile oluşturulduğu için, tutarlı bir görünüm elde etmek üzere bunu başka pek çok belgeye kolayca uygulayabilirsiniz. Tablo kullanmadan daha karmaşık yerleşim düzenleri oluşturmak için bunun gibi tekniklerden faydalanabilirsiniz. Her iki dosyayı da kapatabilirsiniz. 164 DERS 4

59 CSS le Tek Başınıza Çalışın Kitabın geri kalan kısmında görünümü ve yerleşim düzenini kontrol etmek için CSS stilleri oluşturmaya ve bunları düzenlemeye devam edeceksiniz. İlave uygulama yapmak için, bu derste öğrendiğiniz teknikleri kullanarak kendi harici stil sayfalarınızı oluşturabilir ve bunları daha önceki Tek Başınıza bölümlerinde kendi siteniz için oluşturduğunuz sayfalara bağlayabilirsiniz. Ayrıca Dreamweaver da örnek ve başlangıç sayfası olarak verilen çeşitli CSS belgeleriyle de bunları kendi Web sitenizdeki sayfalara veya Yoga Sangha proje sitesinin başlangıç sayfalarının kopyalarına uygulayarak denemeler yapabilirsiniz. Başka stil sayfalarını kurcalamak, CSS le neler yapabileceğinizi görmek ve kendi sayfalarınızda kullanabileceğiniz farklı teknikleri öğrenmek için kullanabileceğiniz faydalı bir yaklaşımdır. 1. File > New komutunu seçin ve ardından New Document iletişim kutusunun General kısmında Page Designs (CSS) kategorisini seçin. Page Designs listesinden Halo Left Nav gibi bir stil sayfası seçin. Create düğmesine tıklayın. Dreamweaver yeni belgeyi oluşturacak ve bu belgenin kaydedilmesini istediğiniz konumu belirtmenizi isteyecektir. Bazı başlangıç sayfaları, otomatik olarak sitenize kopyalanacak resim dosyaları gibi bazı dosyaların kullanımını gerektirebilir. Gerekli dosyaların sitenize Stİl Sayfaları Gelİştİrmek 165

60 kopyalanması işlemi sırasında HTML belgesinde hazırlık niteliği taşıyan bir içerik görebilirsiniz. Dosyalar kopyalandıktan sonra bu görüntü yenilenecektir. Halo Left Nav stil sayfaları, aşağıdaki örnektekine benzeyen bir sayfa oluşturacaktır. Neye benzediğini görmek için bu sayfayı Web tarayıcınızda önizleyebilirsiniz. Halo, aralarında HTML ve Flash elemanları ile yerleşim düzeni seçeneklerinin de bulunduğu bir dizi bileşenden biridir ve Macromedia tarafından yaratılan bir arabirim tasarımıdır. Halo aynı zamanda Web geliştiricilerine pozitif kullanıcı deneyimi yaratma konusunda yardımcı olmak için tasarlanan Studio programlarının entegre bir bileşenidir. 166 DERS 4

61 Önceki uygulamada kullandığınız CSS Layout Background görsel yardımcısını açtığınızda, yerleşim düzenini oluşturmak için birlikte çalışan stilleri görebilirsiniz. 2. Bu derste faydalandığınız teknikleri kullanarak kendi siteniz için stiller oluşturun. Stilleri oluştururken dahili ve harici stillerin arasındaki farkları aklınızdan çıkarmayın ve ne tip stiller oluşturduğunuza dikkat edin. İçerikteki hiyerarşik farklılıkları görsel olarak ayırt etmeyi sağlayan stiller oluşturmaya çalışın. Ne Öğrendiniz? Bu derste şunları öğrendiniz: Bir arka plan rengi ve font tanımladınız (Sayfa ). Aynı metin biçimlendirme özelliklerini hızlı ve kolay bir şekilde kullanabilmek için bir dahili stil oluşturdunuz (Sayfa ). Farklı metin biçimlendirme tiplerine uygulanabilen bir sınıf oluşturdunuz (Sayfa ). Dahili stilleri diğer belgeler tarafından da kullanabilmeleri için harici stillere dönüştürdünüz (Sayfa ). Aynı metin biçimlendirme ayarlarını kullanmak için farklı bir belgeyi harici bir stil sayfasına bağladınız (Sayfa ). Metinlerin görünümünün Web sitesinin tamamında tutarlı olmasını sağlamak için kullanılabilen ve metin biçimlendirme özelliklerini tanımlayan harici stiller oluşturdunuz (Sayfa ). HTML etiketlerini yeniden tanımlayarak mevcut bir stil sayfasına birden fazla stil eklediniz (Sayfa ). Harici bir stil sayfasında yer alan bir stili düzenleyerek bunun kendisine bağlanan bütün belgeleri etkilemesini sağladınız (Sayfa ). Bir div ve bir CSS sınıfı kullanarak temel tipte bir kutu oluşturdunuz (Sayfa ). Stİl Sayfaları Gelİştİrmek 167

62