WEB EDİTÖRÜ STİL SAYFALARI GELİŞTİRMEK

... konulu sunumlar: "WEB EDİTÖRÜ STİL SAYFALARI GELİŞTİRMEK"— Sunum transkripti:

1 WEB EDİTÖRÜ STİL SAYFALARI GELİŞTİRMEK

2 Bu derste neler öğreneceğiz bir bakalım.

3 Bir sayfanın arka plan rengini ayarlayacağız.
Font, renk ve büyüklük gibi metin niteliklerini uygulayacağız. Harici bir stil sayfası oluşturacağız. Mevcut bir stil sayfasına stiller ekleyeceğiz. Bir stili düzenleyeceğiz. Özel bir stil oluşturacağız. Harici bir stil sayfasına bağlantı atayacağız. Bir dahili stil oluşturacağız. Dahili stilleri harici stillere dönüştüreceğiz. Temel bir yerleşim düzeni oluşturacağız.

4 Bir Arka Plan Rengi Belirlemek
Modify > Page Properties komutunu seçin ve Category listesinden Appearance’ı seçin.

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

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

7 Background Color seçeneğinin renk kutusuna tıklayın.

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

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

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

11 Dreamweaver, font seçeneklerini tanımlamak için eski bir yöntem olan font etiket nitelikleri kullanmak yerine entegre CSS stillerinden faydalanır. 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.

12 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, sans-serif. Daha sonra bu sayfaya ekleyeceğiniz bütün metinlerde aynı font kullanılacaktır.

13 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 değişiklik yapmak üzere Properties denetçisinin Text > Font > Edit Font List komutunu kullanarak Edit Font List iletişim kutusunu açabilirsiniz. Edit Font List iletişim kutusunu kullanarak font setlerinde değişiklik yapabilirsiniz.

14

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

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

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

18 Font Boyutunu Değiştirmek
Dreamweaver, aralarında 9 ile 36 arasında belirli aralıklarla değişen sayısal değerler, xx-smal ile xx-large arasında değişen göreceli değerler ve aralarında smal er 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.

19

20 Font Rengini Tanımlamak
*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.

21 Text color seçeneğinin renk kutusuna tıklayın.
Daha önce belgenin arka plan rengini belirlemek için kullandığımıza benzer bir renk paleti açılacaktır. 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.

22 Dahili Stil Oluşturma Sayfamızda kayıtlı stilleri Dreamweaver ekranının sağ tarafında bulunan “CSS STYLES” panelinden görebilirsiniz.

23 Yeni bir dahili stil oluşturmak için bu ekranın sağ alt tarafında bulunan “New CSS Rule” butonuna tıklanır. Daha sonra stil kayıt ekranı açılacaktır. Burada dikkat edilmesi gereken önemli nokta, stile isim verilirken “Selector Name” kısmının benzersiz bir isim olmasıdır. Stile isim verdikten sonra “OK” butonu ile stil kaydedilir.

24 Type : Metin ayarları yapılır. Background :Arkaplan
Block :Metin aralığı ve metinlerin yerleştirilmesi yapılır. Box : Tabloların büyüklük ve boşluk ayarları yapılır. Border :Tabloların kenarlık ayarları yapılır. List : Tanımlı tanımsız listelerin Positioning :Elemanların Yerleştirileceği konum ayarları yapılır. Extensions : Fare imleci gibi ayaları yapılır. Ve “OK” butonuna tıklanarak yeni bir stili oluşturulmuş olur.

25 Dahili Stilleri Harici Stillere Dönüştürme
Harici stiller, sadece CSS özellikleri içeren stillerdir. Bu tür stil sayfalarını birden fazla WEB sayfasında kullanabiliriz. Bu da metin düzenlemesinin sayfalar arasında tutarlılık göstermesine yardımcı olur. Dreamweaver aracılığıyla dâhili stilleri, harici stil olarak düzenleyebiliriz.

26 Bu işlem için sayfa içinde iken File menü altında bulunan Export seçeneği içindeki CSS Styles komutu işaretlenmelidir. Karşımıza Export Styles As CSS File penceresi gelecektir. Bu pencere içinde, önceden oluşturulan dâhili stil işaretlenir ve Save düğmesine tıklanır. Böylece dâhili stil kaynağından harici stil oluşturma işlemi tamamlanmış olur.

27 Harici Stil Sayfasını Bağlama
Harici stilleri, Dreamweaver editörü ile çalışırken kullandığımız tüm sayfalarda kullanabiliriz. Bu kullanım için oluşturulan harici stil sayfasının, çalışılan WEB sayfası içine bağlanması gerekmektedir. Harici stil sayfalarını bağlamak için öncelikle CSS Styles panelinde bulunan Attach Style Sheet düğmesine tıklanmalıdır.

28 Bu tıklamayla birlikte Attach External style Sheet penceresi açılacaktır. Bu pencerede, bağlanacak stil sayfasının konumu (File/URL) Browse düğmesine tıklanarak açılan Select Style Sheet File penceresi içinde tanımlanır. Bu işlemin ardından CSS Styles paneline baktığımızda, çalıştığımız sayfa içine bağladığımızı harici stili görebiliriz.Eğer bağlantısını gerçekleştirdiğimiz stili, sayfa içinde kullanmak istersek; CSS Styles paneli içinde görünen harici stil dosyasının üzerine tıklayarak görünen stil ayrıntılarından ana stil üzerinde farenin sağ tuşunu tıklayıp Apply komutu işaretlenmelidir.

29 Harici Stiller Oluşturma
Harici ve dâhili stil sayfalarının oluşumu birbirine benzemektedir. Harici stil sayfası oluşturmak için CSS Styles panelinde bulunan New CSS Style düğmesine tıklanarak New CSS Style penceresinin açılması sağlanmalıdır. Açılan pencerede Selector Type (seçici tip) alanında Tag (etiket) seçeneği aktive edilmelidir. Bu pencere içinde gerekli düzenlemeleri yaparak OK düğmesine tıkladığımızda CSS Style Definition for * in CSS Style Sheet penceresi karşımıza gelecektir . Bu pencere içinde uygun stil tanımlamalarını yapabiliriz.

30 CSS Style Definition Penceresi için gerekli olan tanımlamaları yaptıktan sonra OK düğmesine tıkladığımızda oluşturduğumuz etikete ait düzenlemenin CSS Styles paneline aktarıldığını görebiliriz.

31 Etiket Kombinasyonları için Stiller Oluşturma
Etiket kombinasyonları için stil oluşturma işlemi, daha önceden oluşturulmuş etiket stillerinin içinde yeni stiller oluşturmak anlamına gelmektedir. Bu işlem için CSS Styles paneli içindeki New Style Sheet düğmesi tıklanmalıdır. Açılan New Style Sheet penceresi içinde Selector Type alanında Advanced seçeneği işaretlenmelidir. Bu pencere içinde gerekli tanımlamaları yaparak OK düğmesine tıkladığımızda CSS Definition penceresi karşımıza gelecektir. Bu pencere içinde de oluşturulacak stile ait tanımlamalar yapılır.

32 Mevcut Bir Stili Düzenleme
Oluşturulan stili düzenlemek için CSS Styles panelinde bulunan Edit Style düğmesine tıklanmalıdır. Açılan pencere içinde stil özellikleri düzenlenebildiği gibi yeni stiller de oluşturulabilir.

33 Stil Önceliği Sayfa içinde bulunan aynı metne birden fazla stil uygulanmış ise sayfanın WEB tarayıcıda görüntülenmesi sırasında uyuşmazlıklar yaşanabilir. Bu durumu önlemek için tarayıcı içinde düzenleme yapmamız gerekmektedir. Stil önceliğini düzenlemek için tarayıcı aracılığıyla Internet Options (Internet Seçenekleri) penceresi açılarak General (Genel) sekmesine geçilmelidir. Bu sekme içinde bulunan Accessibility (Erişilebilirlik) düğmesine tıklanarak istenen öncelik ayarları yapılabilir.

34 Temel CSS Yerleşim Alanı Hazırlama
WEB sayfaları içinde yerleşim alanı, tasarım için önemli noktalardandır. CSS stillerini kullanarak sayfa içinde yerleşim alanı hazırlamak, kolay ve sağlıklı bir yoldur. CSS yerleşim alanı oluşturmak için CSS Styles paneli içindeki New Style Sheet düğmesine tıklanır. New Style Sheet penceresi karşımıza gelecektir.

35 Bu pencere içinde, stile ait temel tanımlamalar yapıldıktan sonra OK düğmesine tıklanır. Karşımıza gelecek olan CSS Style Definition penceresi içindeki Box alanında yerleşim alanına ait ölçülendirme ayarları Border ile yerleşim alanı kenarlığına ait düzenlemeleri yapabiliriz.

36

37 CSS Style Definition penceresi içindeki Box alanındaki Padding ve Margin seçeneklerinin işlevlerini yazarak bu seçenekleri oluşturacağınız yerleşim alanları için değiştirerek uygulayınız. Stil biçimlendirme ayarlarının tamamlanması ile OK düğmesine tıklanır. Oluşturulan yerleşim alanı stili, CSS Styles panelinde görünecektir. Sayfa içinde iken bu stil üzerinde farenin sağ tuşu ile tıklayıp açılan menüden Apply seçeneğini işaretlediğimizde, tanımladığımız yerleşim düzeni, sayfa içine yerleştirilecektir.