|
Tüm anlatımlarda “sayfa” web sayfası(dokümanı) manasında, “eleman” web sayfasındaki bir nesne(textbox,table vs.) manasında, “nitelik” elemanın özelliği(attribute) manasında kullanılmıştır. Ayrıca aksi belirtilmedikçe tüm örnekler Cross-Browserlar ile çalışır biçimde anlatılacaktır. Tarayıcılara Özgü Standartlar: | Netscape Navigator 4.x | Cross-Browser | Internet Explorer 4.x | - JSS (JavaScript Style Sheets)
- Katmanlar
| - CSS1
- CSS2
- CSS Positioning
- JavaScript
| - Görsel Filtreler
- Dinamik CSS
| CSS-P Özellikleri: Öncelikle elemanın pozisyon niteliği belirtilmelidir. (absolute yada relative) - left – elemanın sol pozisyonu
- top – elemanın üst pozisyonu
- visibility – eleman görünür mi görünmez mi
- z-index – elemanın istif sırası
- clip – elemanı belli yerlerinden kesme
- overflow – içerik taşmaları kontrolü
Filtreler: Filtreler ile yazılarınıza ve resimlerinize çeşitli efektler verebilirsiniz. Bu özelliği kullanmak istediğiniz elemanın genişliğini(width) mutlaka belirtin. Bazı filtreler background-color özelliği transparent olarak ayarlanmadıkça çalışmayacaktır. | Filtre | Argüman | Açıklama | Örnek | | alpha | opacity finishopacity style startx starty finishx finishy | Elemanın opaklığını ayarlamanızı sağlar | filter:alpha(opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270) | | blur | add direction strength | Elemanın netliğini ayarlamanızı sağlar | filter:blur(add=true, direction=90, strength=6); | | chroma | color | Belirtilen rengi transparan yapar | filter:chroma(color=#ff0000) | | fliph | yok | Elemanı yatay döndürür | filter:fliph; | | flipv | yok | Elemanı dikey döndürür | filter:flipv; | | glow | color strength | Elemana glow efekti verir | filter:glow(color=#ff0000, strength=5); | | gray | yok | Elemanı siyah-beyaz hale getirir | filter:gray; | | invert | yok | Elemanın renklerini ve aydınlığını ters çevirir | filter:invert; | | mask | color | Elemanı belirtilen arkaplan rengyile ve transparan ön plan rengiyle kaplar. | filter:mask(color=#ff0000); | | shadow | color direction | Elemana gölge ekler | filter:shadow(color=#ff0000, direction=90); | | dropshadow | color offx offy positiv | Elemana dropshadow ekler | filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true); | | wave | add freq lightstrength phase strength | Elemanı dalgalı hale getirir | filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5) | | xray | yok | Elemanı ters renk ve aydınlıkla siyah-beyaz hale getirir | filter:xray; | DOM(Doküman Obje Modeli): Sayfadaki her elemana erişebilmemizi sağlar. Cross-Browserlar için ortak bir DOM modeli kullanılmaktadır. (NS 4.x ve IE 4.x için farklı yöntemlerle sayfa elemanlarına erişilebiliriz. Yeri geldiğinde bunlardan bahsedeceğim.) İstediğimiz elemana erişebilmek için o elemana bir “id” belirtmeliyiz tabi ki birde bu elemana erişmek için kullanılacak bir script dili ki biz javascript kullanacağız. Ufak bir örnek vereyim: | <html> <head> <span id="text">Deneme Yazısı</span> <script type="javascript"> document.getElementById('text').style.color="red" </script> </body></html> | HTML 4.0 Event-Handlerları (Event Handlar = Olay tutucusu yada yöneticisi) Aşağıda belirtilen olaylar yardımıyla sayfadaki elemanlar denetlenebilir yada istediğimiz olay(tetikleme) gerçekleştiğinde bunu kontrol edebiliriz. Bu eventler tüm cross-browserlar tarafından desteklenir. | Event (Olay) | ...... olduğunda olur | | onabort | sayfa yüklenmesi iptal edilirse | | onblur | eleman terk edilirse | | onchange | elemanın değeri değiştirilirse | | onclick | elemana tıklanırsa | | ondblclick | elemana çift tıklanırsa | | onfocus | eleman aktive edilirse | | onkeydown | tuşa basılı tutulursa | | onkeypress | tuşa basılırsa | | onkeyup | tuşa basıp bırakılırsa | | onload | sayfa yüklendikten sonra Not: Netscape bu olayı sayfa yüklenirken gerçekleştirir. Tam yüklenmesini beklemez. | | onmousedown | fare butonuna basılırsa | | onmousemove | fare imleci bir elemanın üzerinde hareket ederse | | onmouseover | fare imleci bir elemanın üzerine gelirse | | onmouseout | fare imleci bir elemanın üzerinden ayrılırsa | | onmouseup | fare butonuna basılıp bırakılırsa | | onreset | form resetlenirse | | onselect | sayfadan bir içerik seçilirse | | onsubmit | form gönderilirse | | onunload | sayfa kapatılırsa |
|
