CSS Ünite 7 Bilgisayar Programcılığı Ön Lisans Programı WEB EDİTÖRÜ Öğr. Gör. Rıza ALTUNAY 1
Ünite 7 CSS Öğr. Gör. Rıza ALTUNAY İçindekiler 7.1. CSS KULLANIM ALANLARI... 3 7.1.1. Yerel Kullanım Alanı... 3 7.1.2. Global Kullanım Alanı... 3 7.1.3. Bağlantılı Kullanım Alanı... 3 7.1.4. Web Tasarım Editörü ile Sayfa İçinde CSS Kullanımı... 3 7.2. WEB TASARIM EDITÖRÜ VE HARICI CSS SAYFALARI... 5 7.3. DAVRANIŞLAR... 7 7.3.1. Davranış Türleri... 7 7.3.2. Ziyaretçi Tarafı Etkileşim... 8 7.4. KAYNAKÇA...10 2
CSS Ünite 7 CSS (Cascading Style Sheets), site oluştururken tasarlamış olduğumuz sayfalar içinde istenildiğinde kullanılmak üzere belirli kalıplar oluşturmaya yarar. Site içerisinde bir değişiklik yapılmak istendiğinde tüm sayfalarda değişiklik yapmak yerine, daha önceden hazırlamış olduğumuz CSS üzerinde değişiklik yaparak tüm sayfalara uygulanmasını sağlayabiliriz. CSS kodlarının en önemli özelliklerinden birisi farklı türlerde kullanılabilme özelliğidir. İsteğe göre tek bir öğeye, tüm sayfaya veya site içerisinde kullanılan tüm HTML dosyalarına etki edebilme özelliğine sahiptir. CSS kodları sayfa içinde kullanılabildiği gibi harici olarak da tanımlanıp istenildiği zaman çağrılarak kullanılabilme özelliğine sahiptir. 7.1. CSS KULLANIM ALANLARI Oluşturduğumuz stil şablonlarını sayfamıza nasıl uygulayacağımızı, nereye yerleştirmemiz gerektiğini belirleyen 3 yöntem vardır: Yerel kullanım alanı Global kullanım alanı Bağlantılı kullanım alanı 7.1.1. Yerel Kullanım Alanı Etiket içinde stil kullanımı (In-line Style) olarak da adlandırılır. Bu kullanım Ģeklinde CSS direkt etiketin style özniteliği kullanılarak uygulanır. 7.1.2. Global Kullanım Alanı Dahili stil kullanımı (Internal Style Sheet) olarak da adlandırılır. CSS kodumuz sayfamızın kısmında, CSS kodumuz sayfamızın <head> kısmında, <style> </style> etiketi içinde yer alır. Kısmen de olsa HTML ve CSS kodumuzu birbirinden ayırmış oluruz. 7.1.3. Bağlantılı Kullanım Alanı Harici stil kullanımı (External Style Sheet) olarak da adlandırılır. Stilimizi.css uzantılı stil şablonu dosyasına kaydederek, kullanmak istediğimiz sayfalarda etiketi yardımıyla çağırırız. HTML kısmı ile CSS kısmını birbirinden tamamen ayırmış oluruz. Sayfalarımızın okunaklılığı ve yönetilebilirliği maksimum düzeye çıkacaktır. Bu nedenle en çok tercih edilen yöntemdir. Bu yöntem en çok tercih edilen yöntem olduğu için nasıl ki resimlerimizi, dokümanlarımızı ayrı klasörlerde tutuyorsak stil şablonu (CSS) dosyalarını da ayrı bir klasörde tutmalıyız. Klasör ismi olarak CSS veya styles isimlerini tercih edebilirsiniz. Bu klasörler içinde yer alan.css dosyalarına istediğimiz sayfadan bağlantı sağlayarak, içinde oluşturulmuş tüm stilleri sayfamıza uygulayabiliriz. 7.1.4. Web Tasarım Editörü ile Sayfa İçinde CSS Kullanımı Web tasarım editörünü kullanarak sayfa içinde stiller oluşturabilirsiniz. İlgili panele erişebilmek için Pencere menüsünden CSS stilleri veya klavyeden Shift+F11 tuşları kullanılır. Yeni bir sayfa açıldığında da sayfanın alt tarafında yer alan özellikler bölümündeki CSS kısmından CSS paneline erişilebilir. 3
Web Editörü Edit Rule ( Kuralı Düzenle ) seçeneği seçildiğinde aşağıdaki şekil gelmektedir. Buradan seçici türü ve seçici için bir isim belirlendikten sonra Kural tanımı kısmından da Yalnızca bu belgede seçeneği seçilerek Tamam düğmesine basıldığı zaman sayfanızda istediğiniz stil özelliklerini belirleyeceğiniz pencere açılacaktır. 4
CSS Ünite 7 Açılan bu pencerede yapmak istediğimiz bütün CSS tiplerini belirleriz ve ok tuşuna tıklayarak işlemimizi gerçekleştirmiş oluruz. Oluşturduğunuz stille ilgili özellikleri CSS Stilleri paneline tıklayarak görebilirsiniz. 7.2. WEB TASARIM EDITÖRÜ VE HARICI CSS SAYFALARI Stiller sayfa içinde kullanılabildiği gibi harici olarak da tanımlanıp istenildiği zaman çağrılıp kullanılabilme özelliğine sahiptirler. Harici stil sayfası oluşturmak için CSS stilleri panelini açıp oradan Yeni CSS Kuralını Yeni CSS Kuralı penceresini açarak ekleriz 5
Web Editörü Dosya adı yazılıp kaydet düğmesine basıldığı zaman karşınıza gelen pencereden istediğiniz stilleri belirleyip tamam düğmesine basıldığında, istediğiniz zaman istediğiniz sayfada kullanabileceğiniz harici stil tanımlanmış olacaktır. Önceden hazırlanmış olan harici stil dosyasını sitenizde kullanmak için; CSS stilleri panelinin sağ alt köşesinde bulunan Stil sayfasını ekle düğmesine tıklanır. Daha sonra aşağıdaki sayfa açılır ve istenilen bilgiler girilerek dışardan harici stil dosyaları sayfamıza dahil edilir. 6
CSS Ünite 7 7.3. DAVRANIŞLAR Web tasarım editörü kod yazmaya gerek kalmadan belgelere Javascript kodları yerleştirir. Böylelikle ziyaretçiler web sayfaları üzerinde birtakım görevler başlatabilirler. Bunlar, davranışlar sayesinde gerçekleşmektedir. Davranış, bir olay veya olay sayesinde tetiklenen bir eylemin birleşimidir. Web tasarımı editörünü kullanarak sayfaya davranışlar eklemek için Davranışlar paneli kullanılır. Davranışlar panelinin görüntülenmesi için Pencere menüsünden Davranışlar veya klavyeden Shift+F4 tuş grubu kullanılır. 7.3.1. Davranış Türleri 7
Web Editörü 7.3.2. Ziyaretçi Tarafı Etkileşim Ziyaretçiler sayfa içinde gezinirken programcı tarafından daha önceden belirlenmiş noktalarda tarayıcı bir olay üretir ve yanıt olarak bir JavaScript kodunu çağırıp çağırmayacağını denetler. Bir davranış oluşturulduğunda bu davranışları tetikleyecek olayların neler olacağının seçilmesi gerekmektedir. Olaylar, ziyaretçilerin sayfanızda bir işlem gerçekleştirdiğini gösteren mesajlardır. Davranışlar panelinin Eylemler (+) menüsünde listelenen eylemlerle ilişkilendirilmiş bir takım olaylar mevcuttur. Web tasarım editöründe kullanılan olaylar ve görevleri aşağıda verilmiştir. onblur: Odaklanmanın kaybedilmesi durumunda meydana gelir. onclick: Kullanıcı nesne üzerinde fareye tıkladığı zaman oluşmaktadır. ondblclick: Kullanıcı nesne üzerine çift tıkladığı zaman meydana gelmektedir. onerror: Sayfanın yüklenmesi sırasındaoluşan hatalarda meydana gelen olaydır. 8
CSS Ünite 7 OnFocus: İmlecin odaklandığı durumda meydana gelmektedir. onkeydown: Klavyedeki bir tuşa basıldığı zaman oluşan olaydır. onkeypress: Bir tuşa basılıp bırakıldığı zaman gerçekleşmektedir. onkeyup: Bir tuşun bırakılması durumunda meydana gelen olaydır. onload: Sayfanın yüklendiği durumu gösteren olaydır. onmousedown: Kullanıcının nesne üzerinde farenin herhangi bir tuşuna bastığı anda gerçekleşerek tetiklenen olaydır. onmousemove: Kullanıcının fare işaretçisini bir nesne üzerinde hareket ettirdiği zaman gerçekleşen olaydır. onmouseout: Farenin odaklanmış olduğu elemandan uzaklaşması durumunda meydana gelmektedir. onmouseover: Fare imlecinin nesne üzerine odaklanması durumunda gerçekleşen olaydır. onmouseup: Nesne üzerinde basılmış olan fare düğmesi bırakıldığı durumda gerçekleşen olaydır. onunload: Dökümanın pencere veya çerçeveden atıldığında gerçekleşen olaydır. 9
Web Editörü 7.4. KAYNAKÇA http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/web%20 Tasar%C4%B1m%20Edit%C3%B6r%C3%BCne%20Giri%C5%9F.pdf http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/stil%20 %C5%9Eablonu%20(css).pdf 10
CSS Ünite 7 11
Web Editörü 12