20      Web'inizi Cascading Style Sheets İle Biçimlendirin

Günümüzde World Wide Web tasarımı konusunda en büyük trend, bir sayfanın görünüşünü (yazı tiplerini, renklerini ve hizalamasını) sunduğu bilgiden ayırmak. Bu pek çok nedenden dolayı tercih edilebilir.

• Öncelikle, sitenin yeniden tasarlanması gerektiğinde Web tasarımcısının yaşamını çok daha kolaylaştınr. İçinde belirli yazı tipleri ve yazı tipi stilleri her sayfaya tek tek girilen bir site de aynı tarzda değiştirilmelidir.
• İkinci olarak, bir Web'i onu izleyen çeşidi ziyaretçiler için daha kolay uyum sağlanabilen bir hale getirir. Netscape Navigator ve Microsoft Internet Explorer kullanıcılarının günümüzde Web gezginlerinin yüzde 85'inden fazlasını teşkil etmesine karşın, diğer tarayıcı türleri de genel bir Web'i ziyaret etmekte kullanılabilir: Salt-metin tarayıcıları, görsel olmayan tarayıcılar, ekran okuyucular ve Opera gibi daha az bilinen tarayıcılar.
• Üçüncü olarak, bir Web yayıncısına sayfaların nasıl sunulacağı hakkında daha fazla denetim sağlar.

Daha önce, FrontPage 2000'de bir Web'in görüntüsünü tanımlamanızı sağlayan temaları öğrendiniz. Bu bölüm boyunca, Cascading Style Sheets (CSS) adı verilen yeni bir Web teknolojisini kullanarak bu prensibi bir adım daha ileri götüreceksiniz.

20.1    Web'inizde Stilleri Tanımlayın

Günümüzün en popüler kelime işlemcileri, stil (style) adı verilen bir özelliğe sahiptir. Bunlar bir dokümanda görülecek bilgi türlerini (başlık satırları, gövde metni ve resimler gibi) tanımlamanızı ve sonra bunların her birine özel biçimini vermenizi sağlar. Örneğin, dokümanınızdaki yazının sol marja göre 2,5 cm içeride, 12 puntoluk Courier New yazı tipinde olmasını sağlayabilirsiniz. Gövde metni için bu kuralı ayarladıktan sonra, bu stili dokümanın ana gövdesinin parçası olan tüm paragraflara uygulayabilirsiniz. Bunlar, aynen yazı tipi ve biçimi doğrudan uyguladığınız şekilde görünür. Daha sonra, farklı bir yazı tipi veya yazı tipi boyu seçmeniz gerekirse, doküman üzerinde değişiklik yapmak yerine, gövde metni stilini değiştirebilirsiniz. Tüm gövde metni de uygun şekilde değişir.

Bu fikir World Wide Web'e Cascading Style Sheets (CSS) ile geldi. CSS, bir Web sayfasının ve öğelerinin nasıl görüneceğini tanımlayan yeni bir dildir. Cascading Style Sheets, HTML'in yerini almaz, sadece bir tür uzantıdır. Bir Web sayfası CSS komutlarını sayfada gizli kısımlar halinde tutar veya CSS biçimlendirme bilgilerini içeren ayrı sayfalar haline getirir. Şu anda, CSS'nin üç versiyonu var; bunlar Internet Explorer'ın 3.0 versiyonundan ve Navigator'ın 4.0 versiyonundan idbaren desteklenmeye başladı. CSS 1.0, geçerli tarayıcılarda daha yaygın olarak desteklenir ve yazının, hiperlink'lerin ve sayfanın diğer kısımlarının yazı tiplerini, renklerini ve biçimlerini ayarlayan komutlar içerir.

20.1.1  FrontPage 2000 Temaları Yerine Stilleri Kullanın

FrontPage 2000, bir anda tüm bir Web'in görünüşünü değiştirmenizi sağlayan bir özelliğe sahiptir: Temalar. Bir yazı tipi gibi tema parçalarını değiştirebilirsiniz, bundan sonra seçilen tüm Web sayfaları değişikliği yansıtacak şekilde güncellenir. Temalar, Cascading Style Sheets'e benzer, ancak çok daha fazla kısıtlıdır. Bir tema için kullandığınız her şey, Page görünümünden elle idare edilebilır. Arka planı ayarlayabilir, tüm yazı tiplerini yerleştirebilir ve kendi gezinti çubuğu grafiklerinizi yaratabilirsiniz.

CSS ile yapabileceğiniz şeylerden biri, bir tema uygulamaktır. CSS kullanarak bir temayı uygulamayı seçmezseniz, FrontPage 2000 bir temanın grafiklerini, yazı tiplerini ve renklerini standart HTML'i kullanarak uygular. CSS, aynı efekleri sağlayabilir.

Temalardan farklı olarak, Cascading Style Sheets HTML'de tümüyle imkansız olan teknikler için kullanılabilir. Örneğin:

• Metnin paragrafları arasındaki boş satırın kaldırılması.

·        Her paragrafın başlangıcına girinti uygulanması.

• Paragrafların sağ marja göre hizalanması.
• Bir paragrafa kendi kenarının ve arka plan renginin verilmesi.

Style sheet'ler, şu ana kadar tarayıcılar tarafından otomatik olarak idare edilen biçimlendirme kararları üzerinde denetim kurmanızı sağlar; örneğin, yıllardır tarayıcılann çoğunda standart olan paragraflar arasındaki boş satır gibi. Bunlar, farklı Web sayfası öğelerinin belirlenmesinde de size pek çok seçenek sunar.

20.2    Bir Style Sheet Yaratın

Style sheet'ler bir Web sayfasının bir parçası olarak ya da sayfaya bağlanan ayrı bir doküman halinde uygulanabilir. Bu ikinci metod çok daha iyidir, çünkü aynı dokümanı diğer sayfalara da bağlayarak tüm sayfalar için ortak bir stil sağlayabilirsiniz. Bir style sheet yaratmaya başlamak için, File>New>Page'i seçin ve sonra Style Sheets sekmesine geçin (Bkz. Şekil 20.1).

Şekil 20.1: Yeni bir style sheet’in yaratılması

İçinden seçim yapabileceğiniz style sheet'lerin çoğu temalarla aynı isimlere sahip ve bunların çoğu aynı yazı tiplerini, renkleri ve başlık stillerini tanımlıyor (Ancak Cascading Style Sheets, gezinti düğmelerini veya sayfa banner'larını tanımlamaz). Normal Style Sheet'ini seçmeniz, stilleri eklemeniz için boş bir sayfa sağlar.

Style sheet'ler .css dosya adı uzantısıyla kaydedilmelidir. Bunları, Web'inizin ana klasörüne veya images alt klasörü gibi klasörlerinden herhangi birine koyabilirsiniz.

Yeni bir style sheet üzerinde herhangi bir değişiklik yapmadan önce, onu geçerli Web'inizdeki sayfalara bağlayabilmek için kaydedin. Format>Style Sheet Links'i seçerek, bir style sheet'e bir bağ yaratın. Bir sayfayı veya tüm Web'i style sheet'i içeren .css dosyasına bağlayabilirsiniz.

Bir sayfayı bir style sheet'e bağladıktan sonra, bu sayfa otomatik olarak tüm stilleri gösterir.

20.2.1  Bir Stili Düzenleyin

Bir style sheet'i düzenlemek için, bir Web sayfasından veya Page görünümünde açılmış bir .css dosyasından Format>Style'ı seçin. Şekil 20.2'te gördüğünüz Style iletişim kutusu karşınıza çıkacaktır.

Şekil 20.2: Bir style sheet’in düzenlenmesi

Bir Web sayfasından bir style sheet'i düzenlerseniz, yapacağınız değişiklikler sadece o sayfaya kaydedilir. Stillerin bir .css dosyasında düzenlenmesi, o style sheet'e bağlı tüm sayfalarda uygulanan değişiklikler yapılmasını sağlar.

Stiller, belirli HTML etiketleriyle ilişkilidir. Mevcut bir etiketi alarak, bu etiketin bir Web sayfasında nasıl görüneceğini belirlemek için yeni bir stil tanımlayabilirsiniz. Style iletişim kutusu, tüm HTML etiketlerini veya sadece kullanıcı tanımlı stilleri (kendilerine yeni stiller uygulanan etiketler) göstermekte kullanılabilir.

Bunu iş başında görmek için, Style iletişim kutusunda tüm HTML etiketlerini gösterin ve kbd etiketini değiştirin. Bu etiket, metne klavye efekti uygulamakta kullanılır. Bu, bir Web sayfasını düzenlerken Format>Font'u seçerek kullanabileceğiniz seçeneklerden biridir.

Modify düğmesine tıklamanız, Şekil 20.3'de görülen Modify Style iletişim kutusunu açar.

Şekil 20.3:

Bir stilin

değiştirilmesi

Modify Style iletişim kutusundaki Format düğmesini kullanarak, bir Web sayfasında bir etiketin nasıl görüneceği üzerinde şu değişiklikleri yapabilirsiniz:

• Font: Metnin yazı tipi, boyu, rengi ve diğer nitelikleri.
• Paragraph: Bu metni içeren paragrafların boşluğu ve girintisi.
• Border: Görülen çerçeve ve gölgeleme.
• Numbering: Bu metnin listelerinin numaralanma ve girinti tarzı.

Bu format değişiklikleri herhangi bir öğeye uygulanabilir, ancak bu seçeneklerin çoğu yazı için daha uygundur.

kbd etiketi için yeni bir yazı tipi, renk, boy seçin ve ona bir arka plan gölgesi verin. Yaptığınız değişiklikler, Modify Styles iletişim kutusunun Preview kısmında gösterilir.

Bir stili doğrudan bir .css sayfasından değiştirdiğinizde, FrontPage 2000, Page görünümünde Cascading Style Sheets dilini kullanarak o stili gösterir. CSS'yi daha iyi öğrenmedikçe bu dokümanı elle düzenlemeyin: Format>Style'a tıklarsanız, Style iletişim kutusuyla bir style sheet üzerinde çalışarak bu dosya üzerinde değişiklik yapabilirsiniz.

20.2.2  Sayfanızda Değiştirilmiş Bir Stili Uygulayın

h1 sitilini değiştirdikten sonra, şu iki yoldan birini deneyebilirsiniz:

• Stili ayrı bir .css dosyasında düzenlediyseniz, bu dosyayı kaydederek kapatın. Bu style sheet'e bağladığınız bir Web sayfasını açın.

• Stili bir Web sayfasında değiştirdiyseniz, stili yazıya uygulamaya hazırsınız.

Bir Web sayfasında yazıyı seçin ve Format>Font'u seçerek Font iletişim kutusunu açın. Bu metne kbd (keyboard) efektini uygulayın. Tarayıcıların çoğunda, bu efekt yazının Courier gibi sabit aralıklı ve daha küçük bir yazı tipiyle gösterilmesine neden olur. h1'e uygulanan yeni stil, Cascading Style Sheets'i destekleyen tarayıcılarda bu sitilin yerini alır. Yazıyı, Modify Style iletişim kutusunda değiştirdiğiniz şekilde görürsünüz.

h1 stili üzerinde değişiklik yaptığınızda, bu değişiklikler bu stili uyguladığınız tüm yazılarda anında yansıtılır.

20.2.3  FrontPage 2000 Özellikleriyle Etiketlerin Eşlenmesi

Style sheet'ler, bir Web sayfasının öğelerini tanımlamakta HTML etiketlerini kullanır. HTML'i pek bilmiyorsanız, bu etiketlerin bir Web sayfasında nasıl kullanıldığını da bilmiyor olabilirsiniz.

Font>Format'ı seçerek bir özel efekt eklerken, şu HTML etiketleri kullanılır:

• blink: Yanıp sönme
• cite: Alıntı
• code: Kod
• dfn: Tanım
• em: Vurgu
• kbd: Klavye
• samp: Örnek
• strike: Üstü çizili
• strong: Güçlü
• sub: Alt karakter
• sup: Üst karakter
• u: Altı çizili
• var: Değişken

Formatting araç çubuğundaki pek çok düğme yazıyı biçimlendirmekte kullanılabilir. Bunlar, şu HTML etiketleriyle ilişkilidir:

• b: Boldface (Kalın) düğmesi
• i: Italics (İtalik) düğmesi
• u: Underline (Altı Çizili) düğmesi
• blockquote: Increase Indent (Girintiyi Artır) düğmesi.

Formatting araç çubuğu, tüm paragraflara uygulanan çok sayıda biçimlendirme seçeneğine sahip bir çekme menü de içerir. Bunlar şu HTML etiketlerini kullanır:

·        p: Normal

·        pre: Biçimlendirilmiş

·        address: Adres

·        h1-h6: Heading 1'den (başlık) Heading 6'ya kadar

·        ol: Numaralı bir listeden önce ve sonra

·        ul: Madde imli bir listeden önce ve sonra

·        dir: Bir dizin listesinden önce ve sonra

·        menu: Bir menü listesinden önce ve sonra

·        li: Numaralı, madde imli, dizin veya menü listesindeki her öğe için

·        di: Terim tanımı listesinden önce ve sonra

·        dt: Bir terim tanımı listesindeki her terim için

·        dl: Bir tanım listesinden önce ve sonra

·        dd: Bir tanım listesindeki her tamm için

Web sayfalarını yaratırken FrontPage 2000'in kullandığı başka HTML etiketleri de vardır; bunların arasında hiperlink'ler için a, resimler için img ve Java applet'leri için applet sayılabilir.

FrontPage tarafından kullanılan etiketleri belirlemek için, bir tek Web öğesi haricinde başka bir şey içermeyen boş bir Web sayfası yaratın. O sayfada HTML moduna geçerek, onu yaratmakta kullanılan etiketi (veya etiketleri) görebilirsiniz.

20.2.4  Yeni Bir Stil Yaratın

Bir style sheet, mevcut HTML etiketlerinin biriyle doğrudan ilişkili olmayan yeni stiller içerebilir. Bu sitiller genellikle mevcut etiketlere göre biraz değiştirilmiş stilleri yaratmakta kullanılır; şunlar gibi:

• p: Normal bir paragraf.
• p.quote: Bir alıntı içeren bir paragraf.
• p.author: Metnin yazarını belirten bir paragraf.
• p.contact: Yazarla nasıl irtibat kurulacağını belirten bir paragraf.

Bu stilleri birbirinden ayırmak için, her bir stile farklı bir görünüm verebilirsiniz.

FrontPage 2000'de yeni bir stil yaratmanın en iyi yolu, onu benzer bir paragraf etiketine dayandırmaktir: Örneğin, normal paragraflar için kullanılan p veya h3 gibi bir başlık etiketinden yola çıkarak yaratmak. Yeni bir stil yaratmak için, Formats>Style'ı seçin ve New düğmesine tıklayarak yeni stile bir isim verin. Bu ismin ilk kısmı, stilin dayandığı etiketin ismi olmalı, bundan sonra bir nokta ve noktadan sonra da o stilin hangi amaçla kullanılacağını belirten bir isim gelmelidir. p.quote, p.author ve p.contact stilleri, buna verebileceğimiz örnekler. Yeni bir stili isimlendirdiğinizde, bu stil özelleştirdiğiniz diğer HTML etiketleri gibi kullanıcı-tanımlı stiller listesinde görülür. Diğer stillerde olduğu gibi nasıl biçimlendirildiğini değiştirebilirsiniz. Yeni bir stili bir paragraf etiketine dayandırmanın en iyi avantajı, stilin bir paragrafı biçimlendirmekte kullanılan diğer seçeneklerle birlikte Formatting araç çubuğunda görünmesidir. Örneğin, p.quote, p.author ve p.contact stillerini yarattığınızda, bunlar çekme menülerde Normal.quote, Normal.author ve Normal.contact isimleriyle görülür.

Yorumlar (0)

Bu içeriğe ait yorumları masaüstüne alabilirsiniz

Adınız

Email

Websiteniz

Başlık

Yorum

Yorum Ekleyin