A-PDF Split DEMO : Purchase from www.a-pdf.com 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.
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
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
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
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
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
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
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
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
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
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ı) 9-2 1 10 xx-small -1 2 12 x-small / smaller None (varsayılan) 3 14 small +1 4 18 medium / larger +2 5 24 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
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 #330000 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
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
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
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
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
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
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
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
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
.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
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
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
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
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
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
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
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
Ş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
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
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 #660066 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