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

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

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

3. Birsayfanınarka plan renginiayarlayacağız. • Font, renkvebüyüklükgibimetinnitelikleriniuygulayacağız. • Haricibirstilsayfasıoluşturacağız. • Mevcutbirstilsayfasına stiller ekleyeceğiz. • Birstilidüzenleyeceğiz. • Özelbirstiloluşturacağız. • Haricibirstilsayfasınabağlantıatayacağız. • Birdahilistiloluşturacağız. • Dahilistilleriharicistilleredönüştüreceğiz. • Temelbiryerleşimdüzenioluşturacağız.

4. BirArka Plan RengiBelirlemek Modify > Page Properties komutunuseçinve Category listesindenAppearance’ıseçin.

5. Page Properties iletişimkutusunun Appearance ekranındaDreamweaver’dabelgepenceresininvarsayılanarka plan rengibeyazolmasınarağmensayfaiçintanımlanmışherhangibirvarsayılanseçenekolmadığınıgöreceksiniz.

6. Sizbirarka plan rengitanımlamazsanız, birziyaretçibusayfayıziyaretettiğindesayfa, Web tarayıcısınınvarsayılanrengini (genelliklebeyaz) kullanır. Web tarayıcılarınınvarsayılanayarlarıfarklıolabildiğinden her zamansayfaiçinbirarka plan rengitanımlamanıztavsiyeedilir.

7. Background Color seçeneğininrenkkutusunatıklayın.

8. Onaltılıktabanlıkodu#FFFFCC olansoluksarırenknumunesinetıklayın. Soluksarırenk (#FFFFCC) sayfanızınarka plan rengiolarakayarlanacaktır. Rengi, onaltılıktabanlıkodudoğrudanrenkkutusununyanındakimetinalanınayazarakdadeğiştirebilirsiniz.

9. Page Properties iletişimkutusunukapatmadanyeniarka plan renginigörmekiçin Apply düğmesinetıklayın. Sayfanızınarkaplanı, Page Properties iletişimkutusundaseçtiğinizaçıksarırengesahipolacaktır.

10. FontuDeğiştirmek Sayfanızındahailginçvedahakolayokunmasınısağlamakiçinmetinlerigörüntülemedekullanılanfontlarıdeğiştirebilirsiniz.

11. Dreamweaver, font seçeneklerinitanımlamakiçineskibiryöntemolan font etiketniteliklerikullanmakyerineentegre CSS stillerindenfaydalanır. Uygulamadadagöreceğinizgibibütünbirsayfadakullanılanfontuyadasayfadaseçilidurumdakibirmetninfontunudeğiştirebilirsiniz.

12. Page Properties iletişimkutusunun Appearance kategorisindeki Page font menüsündenArial, Helvetica, sans-serif’iseçin. OK düğmesinetıklayarak Page Properties iletişimkutusunukapatın. Sayfadakimetnintamamıseçtiğinizfontlabiçimlendirilecektir: Arial, Helvetica, sans-serif. Dahasonrabusayfayaekleyeceğinizbütünmetinlerdeaynı font kullanılacaktır.

13. Font kombinasyonları (Arial, Helvetica, sans-serif gibi) kullanışlıdır, amabunlarsizinkullanmakistediğinizbütünözelfontlarıiçermeyebilirler. Font kombinasyonlarındadeğişiklikyapmaküzere Properties denetçisininText > Font > Edit Font List komutunukullanarakEdit Font List iletişimkutusunuaçabilirsiniz. Edit Font List iletişimkutusunukullanarakfont setlerindedeğişiklikyapabilirsiniz.

15. Mevcutbirkombinasyona font eklemekisterseniz: Font list alanındandeğişiklikyapmakistediğiniz font kombinasyonunuseçinve Available fonts listesineeklemekistediğinizfontuseçin. Sonrada Chosen fonts listesiyle Available fonts listesininarasındaki sol tarafıgösterenokatıklayarakilgilifontu Chosen fonts listesineekleyin.

16. Mevcutbirkombinasyondan font silmekisterseniz: Üzerindedeğişiklikyapmakistediğiniz font kombinasyonunuve Chosen fonts listesindensilmekistediğinizfontuseçin. Ardından Chosen fonts listesiyle Available fonts listesininarasındakisağtarafıgösterendüğmeyetıklayarakilgilifontu Chosen fonts listesindensilin.

17. Bir font kombinasyonueklemekiçin: Font list alanındaki Add fonts in list below seçeneğiniişaretleyin. İlave font kombinasyonlarıiçiniletişimkutusunun sol üst köşesindekiartıişaretlidüğmeye (+) tıklayınve Font list alanındakiyeni Add fonts in list below seçeneğiniişaretleyin. Birfont kombinasyonunusilmekiçin: Fonts list alanındasilmekistediğiniz font kombinasyonunuseçinveiletişimkutusunun sol üstköşesindekieksiişaretlidüğmeye (-) tıklayın.

18. FontBoyutunuDeğiştirmek Dreamweaver, aralarında 9 ile 36 arasındabelirliaralıklarladeğişensayısaldeğerler, xx-smalilexx-large arasındadeğişengörecelideğerlervearalarındasmalerve larger seçeneklerininde bulunduğubirçokhazır font boyutuseçeneğinesahiptir. Bu seçeneklerintümümetinbüyüklüğünütanımlamakiçin CSS kullanır. Dreamweaver’ıkullanarakvebütünleşik CSS özellikleriaracılığıylasayfalarınızdakimetinlerüzerindebüyükölçüdekontrolimkânınasahipolursunuz.

20. Font RenginiTanımlamak *Modify > Page Properties komutunuseçinve Category listesindeAppearance’ın seçiliolduğundaneminolun. *Page Properties iletişimkutusunun Appearance bölümü, belgeyleilgilibirçoközelliğiayarlamanızısağlayanpekçokseçenekiçerir.

21. Text color seçeneğininrenkkutusunatıklayın. Daha öncebelgeninarka plan renginibelirlemekiçinkullandığımızabenzerbirrenkpaletiaçılacaktır. Onaltılıktabanlıkodu #330000 olankoyukırmızımsısiyahrengiseçinve OK düğmesinetıklayın. Metinalanınaonaltılıktabanındakirenkkodunuyazabilirveyarenknumunelerini kullanarakbirrenkseçebilirsiniz. Siz OK düğmesinetıkladıktansonra Page Properties iletişimkutusukapanırvebelgenizedö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 Ayarları yapılır. 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 ayarları yapılır. 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 ExportStyles 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 AttachStyleSheet düğmesine tıklanmalıdır.

28. Bu tıklamayla birlikte AttachExternalstyleSheet penceresi açılacaktır. Bu pencerede, bağlanacak stil sayfasının konumu (File/URL) Browse düğmesine tıklanarak açılan SelectStyleSheet 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 SelectorType (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 StyleDefinitionfor * in CSS StyleSheet penceresi karşımıza gelecektir . Bu pencere içinde uygun stil tanımlamalarını yapabiliriz.

30. CSS StyleDefinition 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 StyleSheet düğmesi tıklanmalıdır. Açılan New StyleSheet penceresi içinde SelectorType 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 EditStyle 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 StyleSheet düğmesine tıklanır. New StyleSheet 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 StyleDefinition 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.

37. CSS StyleDefinition 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.