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. Açıklama ;
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
|
Dinamik Web Sayfaları
Webde sunulan sitelerin çoğu (en azından profesyonel olanların yada olmaya çalışanların) kullanıcı isteklerine göre yeniden şekillenebilmektedir. Bu, amatör siteler ile profesyonel siteler arasındaki farklılığın en önemli nedenlerindendir. Bu tip uygulamalar dinamik web sitesi olarak adlandırılırlar. Aslında bu dinamikliği iki şekilde sağlayabilirsiniz.
Birincisi; sitenizin bir şablonu olması ve bu şablonun içeriğinin kullanıcı isteklerine göre yeniden düzenlenmesi ki bunu asp, php, coldfusion, jsp, cgi gibi sunucu tarafında çalışan teknolojiler ile yapabilirsiniz.
İkincisi; kullanıcının istekleri doğrultusunda, sayfanın yeniden yüklenmesine gerek kalmadan, içeriğinin değiştirilmesi ki bunu DHTML ile rahatça yapabilirsiniz.
DHTML( Dynamic HTML ) Nedir ?
Pek çoğumuz DHTML ' i ayrı bir “dil” zannederiz. Aslında DHTML, bir kaç web standardının birleşmesiyle oluşmuştur. Belki bu yüzden adlandırılmasında da karışıklıklar söz konusudur. Bazı sitelerde DHTML 'i DOM ( Document Object Model) adı altında da görebilirsiniz. Hatta bazı sitelerde DHTML örnekleri javascript bölümü altında yer alır.
DHTML bir kaç web standardının birleşmesiyle oluşmuştur demiştik. Peki nedir bu standartlar? HTML , CSS, JavaScript (js) yada VisualBasicScript ( vbs ) ‘tir. İşte kastedilen dinamiklik js yada vbs yardımıyla gelir. ( DHTML 'de büyük çoğunlukla JS kullanılır ) İşin ilginç tarafı, DHTML bir standart değildir ama onu oluşturan teknolojiler bir standarttır. Ne demek şimdi bu?
DHTML W3C (World Wide Web Consortium) tarafından ortaya konmuş ve kabul edilmiş bir standart değildir. Netscape ve Microsoft firmaları tarafından, yeni nesil (4.x) tarayıcılarındaki yeni teknolojileri tanıtmak için kullanılmış bir terimdir. W3C ‘nin DHTML tanımı şöyledir : "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated." yani türkçesiyle, “Dinamik HTML, bazı şirketler tarafından HTML, CSS ve scriptler(js yada vbs) ile web sayfalarının daha dinamik(canlı) olmasını sağlayan kombinasyonu tanımlamak için kullanılan bir terimdir.” Sonuçta DHTML bir standart olmayabilir ancak kullandığı teknolojiler standart olduğu için ve bu standartlar W3C tarafından sürekli geliştirildiği için DHTML de sürekli gelişir. Biraz karışık bir durum. J
Peki avantajları nelerdir? Birincisi bedavadır, W3C desteği vardır, hazırlanan kodların boyutu flash animasyonlarına yada java appletlerine oranla oldukça ufaktır, hızlıdır, yeni nesil tüm tar |
Menü
16/03/2008 11:59 
ishak
