Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

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

Benzer bir sunumlar


... konulu sunumlar: " 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."— Sunum transkripti:

1

2

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

16

17

18

19

20 *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 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

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


" 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." indir ppt

Benzer bir sunumlar


Google Reklamları