dHtml - Dinamik html - Geniş Bilgi

yigityurt · 14-05-2007, 16:15

Bu bölümde websayfalarımız daha hareketli hâle getirecek yeni teknikleri öğreneceğiz. Genel adı DHTML olan bu teknikler sayfa tasarımında bizler için yeni ufuklar açacak.

Websayfalarının durağan yapısını değiştirmek ve onları daha canlı ve hareketli hâle getirmek gerçekten ilginç bir çalışmadır. Bu sayede sayfada hereket eden, içeriği değişen değişik eventlere ( hareketlere ) karşı tepkiler verebilen bir sayfa tasarımı yapabileceğiz.

DHTML tekniklerini kullanabilmek için NS 4.x ve IE 4.x üzeri browserleri kullanılması gerekiyor. Bu bölümdeki teknikleri denemeniz için bu browserlerden en az birini elde etmelisiniz.

DHTML konusunu işlerken

yigityurt · 14-05-2007, 16:18

Konumuza girmeden önce DHTMLin ne olduğunu kavramamız gerekmektedir. Bu nedenle kısa bir açıklama yapmakta fayda bulunmaktadır.

DHTML bir programlama veya işaretleme dili değildir. Bu nedenle yeni bir dil öğrendiğinizi düşünmeyin. Çünkü DHTML; CSS, JavaScript ve HTMLin birleşiminden oluşan, browser DOM ( document object model ) yapısını kullanarak sayfa üzerinde yeni denetimler ve düzenlemeler sunun teknikler zinciridir. Bu nedenle bu bölüme başlamadan önce HTML , CSS ve JavaScript hakkında orta seviyede bilgi sahibi olmanız gerekmektedir.

DHTML teknikleri DOM özelliklerini kullanma üzerine geliştirilmiştir ve her browser kendi DOM ( document object model ) geliştirmiştir. Bu nedenle gerekli durumlarda browseri tanımlamak ve ona göre bir program yapmak gerekmektedir. Eğer mümkünse elinizin altında IE 4.x veya yukarısı, NS 4.x ve NS 6.x browrowserlerin bulunmasında fayda olacaktır.

yigityurt · 14-05-2007, 16:21

Aslında DHTML ile browser DOM yapısının izin verdiği tüm işlemler üzerinde çalışmalar yapabilirsiniz. Fakat birkaç örnek vermek gerekirse ;

Açılır-kapanır menüler,
Animasyonlar,
Sayfa elemanlarini hareketlendirme,
Duruma göre değişen sitil tasarımları,
Sayfayı süsleyecek efektler,
gibi bir çok değişik

yigityurt · 14-05-2007, 16:26

Browser tanımlama
Browser üreticileri farklı şekillerde broserler için bir Document Object Model geliştirdiklerinden ve browserlere farklı yaklaşımlar sunduklarından browserler arası DHTML uygulamalarında farklılıklar olmaktadır. Bu nedenle bir DHTML uygulaması hazırlarken ilk olarak bu uygulmayı çalıştıracak browseri tanımlamamız gerekmektedir.

Bir websayası değişik üreticilerin sundukları değişik sürümlerde browserlerle ziyaret edilebilir. Bu nedenle eğer sayfamızı özel bir browsere göre hazırlamıyorsak hazırladığımız uygulama her brower üzerinde çalışmak zorundadır. Bunun içinde öncelikle browser tanımlaması yapmak zorundayız.

Nestcape 4.x
Nestcape 4.x browserler katman tanımlamasını LAYER tagı üzerine kurmuşlardır. Bu nedenle javascript ile browserin Nestcape 4.x uyumlu olup olmadığını anlamak için layer nesnesini kontrol etmemiz gerekmektedir. Bu şu şekilde yapabiliriz.

ns4 = (document.layers) ? true : false
Bu kod ile eğer browser layer nesnesini tanıyorsa yani Nestcape 4.x ise ns4 değişkenine true değeri atanacaktır, aksi halde false değeri ns4 değişkenine atanır.

Internet Explorer 4.x
Internet Explorer sayfa üzerinde tüm nesneler ile oynayabilir ve bunu sağlamak için all nesnesini kullanır. Biz browserin IE 4.x olduğunu anlamak için :

ie4 = (document.all) ? true : false
kodunu kullanacağız. IE5 içinde bu tanımlamayı kullanacağız.

Netscape 6.x
NS6 W3C nin tanımladığın standart DOM1 tanımlamasına uygun bir DOM yapısına sahiptir. Bu nedenle bu browserde getElementById nesnesi ile sayfa elemanlarına ulaşılır. Standartları destekleyen Netscape 6.x serisi browserler için :

ns6 = (document.getElementById && !document.all) ? true : false
kodu ile eğer browser getElementById nesnesini tanıyor ve de document.all nesnesini tanımıyorsa yani IE 5.x değilse ns6 değişkeni true aksi halde false değeri alacaktır. Burada document.all nesnesinin denetlenmesinin sebebi IE5.x serisinin de getElementById nesnesini kullanabilmesidir.

Bu değişkenleri nasıl kullanacağımızı görelim : Öncelikle bu değişkenler javascript içerisinden tanımlanacaktır ve bu tanımlama sayfa yüklenmeden yapılmalıdır. Kullanacağımız kod :

<script>
ns4 = (document.layers) ? true : false;
ie4 = (document.all) ? true : false;
ns6 = (document.getElementById && !document.all) ? true : false;
</script>

şeklinde olacaktır. Şimdi bu koda bir de fonksiyon ekleyelim ve sayfa yüklenirken browserin türünü bize söylesin.

function tanimla(){
if(ns4)
alert("Nestscape 4.x browser. layer özelliği kullanıyor.");
else if(ns6)
alert("Netscape 6.x browser. getElementById kullanılıyor.");
else if(ie4)
alert("Interntet Explorer. all özelliği kullanılıyor.");
}

bu fonksiyonuda script tagı içerisine yerleştirelim. Simdi browserimizi sınayan ve tanımllayan bir scriptimiz oldu. Tüm kodlar :

<HTML>
<HEAD>
<SCRIPT>
ns4 = (document.layers) ? true : false;
ie4 = (document.all) ? true : false;
ns6 = (document.getElementById && !document.all) ? true : false;
function tanimla(){
if(ns4)
alert("Nestcape 4.x browser. layer özelliği kullanıyor.");
else if(ns6)
alert("Netscape 6.x browser. getElementById kullanılıyor.");
else if(ie4)
alert("Interntet Explorer. all özelliği kullanılıyor.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="tanimla()">
</BODY>
</HTML>

Burada onLoad="tanimla()" şeklinde girdiğimiz parametrenin sayfa yüklendiğinde tanimla() isimli fonksiyonu çağıran bir event olduğunu hatırlatmakta fayda görüyorum.

Sonucu denemek

yigityurt · 14-05-2007, 16:32

dhtml - Değişen içerikler hazırlama
Websayfaları browser ekranına geldiklerinde tanımlandıkları şekillerde görünürler. Tasarımcılar sayfaları üzerinde sayfa görüntülendikten sora da denetim sahibi olmak isterler.

Bu gibi durumlarda DHTML tekniklerini kullanarak sayfa üzerinde denetim sahibi olunabir. Netscape 4.x serisi sadece konumsal özellikler üzerinde denetime izin verir. Mesela bir bloğu başka bir yere taşımak veya gizlemek gibi. Fakat IE 4.x ve üzeri ayrıca Netscape 6.x serisi sayfa yüklendikten sonra da sayfa üzerinde denetime izin vermektedir. Bu denetimler içerik değiştirmek olduğu gibi yeni içerikler yerleştirmek veya ver olan sitillerin değiştirilmesi de olabilir.

Biz bu bölümde sadece sayfa içerisindeki sitilleri nasıl değiştirebileceğimizi göreceğiz. İlk olarak bir yazının üzerine gelindiğinde renginin nasıl değiştirilebileceğini görelim.

DHTML sayfa tasarımcıları için
<B ID="onemli">önemli<B>
teknikler sunar.

Şimdi yukarıda tanımladığımız onemli adlı elemanımızın üzerine mouse geldiğinde nasıl rengini değiştirebileceğimizi görelim.

IE de bu işlemi yapmak için direkt olarak elemanın IDsi verilerek yeni sitil bilgisi verilebilir. Aşağıdaki ifadeler IE 4.x ve üzerinde çalışacaktır.

DHTML sayfa tasarımcıları için
<B ID="onemli"
onMouseOver="onemli.style.color='red'"
onMouseOut="onemli.style.color='black'">
önemli
</B>
teknikler sunar.

Yukarıdaki ifadeleri incelediğinizde onMouseOver ve onMouseOut eventlerine şu ifadeleri ekledik

onemli.style.color='red';
IE de bir elemanın style bilgilerine erişmek ve onları değiştirmek için elemanın IDsini kullanıyoruz.
elemanIDsi
Sonra sitil bilgisi üzerinde çalışacağımız için ona style şeklide bir ekleme yapıyoruz.
elemanIDsi.style
Ardından hangi özelliğe ulaşacaksak o özelliği ekliyoruz.
elemanIDsi.style.ozellik
En son olarakta yeni değeri atıyoruz.
elemanIDsi.style.ozellik="yeni_değer";
Bu işlemi sayfa yüklendikten sonra sayfanın herhangi bir yerinde yapabiliriz. Şimdi yukarıdaki ifadelerin nasıl bir sonuç verdiğini görelim. Mouse ile önemli yazısı üzerine gelin ve yazının renginin nasıl değiştiğine dikkat edin.

DHTML sayfa tasarımcıları

yigityurt · 14-05-2007, 16:35

Aynı işlemi Netscape 6.x ile de yapabiliriz. Netscape standart DOM yapısını kullandığından bu işlemi farklı bir şekilde yapıyor. Öncelikle bir elemana IDsi üzerinden erişmek için Netscape 6.x getElemanById yöntemini kullanıyor. Şimdi bu işlemin nasıl olacağını görelim.

İlk olarak bir döküman üzerinde çalıştığımızdan document ve ardından kullanacağımız yöntem olan getElemanById gelir. Ulaşacağımız elemanın IDsi burada kullanılır.

document.getElemanById('elemanIDsi')
Ardından sitil özellikleri kullanılacağından style eki ve kullanacağımız sitil özelliği ve değerini ekliyoruz.

document.getElementById('elemanIDsi').style.ozelli k="yeni_değer";
Bu ifadeleri yukarıdaki örneğimize uyarlarsak.

DHTML sayfa tasarımcıları için
<B ID="onemli"
onMouseOver="document.getElementById('onemli').sty le.color='red'"
onMouseOut="document.getElementById('onemli').styl e.color='black'">
önemli
</B>
teknikler sunar.

Şeklinde yeni ifadelerimiz oluşur. Şimdi bu ifadelerin Netscape 6.x ve IE 5.5 üzerinde deneyebilirsiniz.

DHTML sayfa tasarımcıları için önemli teknikler sunar.

Bu yöntemler kullanılarak istenilen elemanın istenilen özelliği üzerinde yeni denetimler kurulabilir. Şimdi aynı örneğimizde onemli adlı elemanın font boyunu değiştirelim. Önce IE cephesi:

DHTML sayfa tasarımcıları için
<B ID="onemli"
onMouseOver="onemli.style.fontSize='30px'"
onMouseOut="onemli.style.fontSize='small'">
önemli
</B>
teknikler sunar.

Yeni örneğimizde elemanımız üzerine mouse geldiğinde font boyutu 30px olacak ve sonra mouse ayrıldığında ise small değerine dönüşecektir. Sonucu aşağıda görebilirsiniz.

DHTML sayfa tasarımcıları için önemli teknikler sunar.

Dikkat edeceğimiz konu sitil özelliği eğer birden fazla kelimeden oluşuyora font-size gibi bu özelliği javascripten ulaşmak için bu kelimeleri birleştiriyoruz ve ikinci ve varsa üçüncü kelimelerin başharflerini büyük harf yapıyoruz. Yukardaki örneği NS6 ya uygulamak için aşağıdaki ifadeleri kullanıyoruz.

DHTML sayfa tasarımcıları için
<B ID="onemli"
onMouseOver="document.getElementById('onemli').sty le.fontSize='30px'"
onMouseOut="document.getElementById('onemli').styl e.fontSize='small'">
önemli
</B>
teknikler sunar.

Yukarıdaki ifadelerin NS6 sonucunu aşağıdaki paragrafta görebilirsiniz.

DHTML sayfa tasarımcıları için önemli teknikler sunar.

yigityurt · 14-05-2007, 16:39

dhtml - İki tarayıcının aynı işi yapabilmesi
Şimdide bir bloğun zemin renginin nasıl değiştirilebileceğini görelim. Bu örneğimizin diğer iki örnekten farlı olan tarafı javascript ile bir fonksiyon tanımlayacak olmamız ve sonrada bu fonksiyon üzerinden zemin rengini değiştirecek olmamızdır. Bunun nedeni ise iki browser içinde tek bir ifadeyi kullanmak ve sayfamızın iki browser üzerinden de çalışmasını sağlamaktır.

Öncelikle bloğumuzu tanımlayalım.

<DIV ID="alan"
STYLE="margin : 20; background-color: gray;
width: 300; height:100;
border-style:solid; border-color:red;
border-width:1"
onClick="zRenginiDegistir('alan')">
alan kimliği verdiğimiz bir blok.
</DIV>

Tanımladığımız elemana alan adı verdik. Biz bu elemanın değişik özelliklerini artık IDsi ile kolaylıkla denetleyebileceğiz.

Şimdide scriptimizi hazırlayalım. Scriptimizi hazırlarken ilk olarak browser seçimi yapacağız.

ie = (document.all) ? true : false;
ns6 = (document.getElementById && !document.all) ? true : false;

Browser tanımlamasını yaptıktan sonra fonksiyonumuzu yazmaya başlayabiliriz. Fonksiyonumuz katmanın ismini alacak sonra elemanın zemin rengini öğrenecek, ardındanda yeni zemin rengini belirleyecek ve yeni zemin rengini uygulayacak.

function zRenginiDegistir(katman)
{
if(ie)
{
eskiRenk = document.all[katman].style.backgroundColor;
if(eskiRenk == 'gray')
yeniRenk = 'yellow';
else
yeniRenk = 'gray';
document.all[katman].style.backgroundColor=yeniRenk;
}
if(ns6)
{
eskiRenk = document.getElementById(katman).style.backgroundCo lor;
if(eskiRenk == 'gray')
yeniRenk = 'yellow';
else
yeniRenk = 'gray';
}
}

Fonksiyonumuzda browseri konrollerini yaptık ve sonuca göre farklı işlemlerin yapılmasını sağladık. Önce eskiRenk adlı değişkenimize kullandığımız katmanın zemin rengini atadık. Sonra bu renge göre yeniRenk değişkenine bir değer atayarak her tıklamada bloğumuzun zemin renginin değişmesini sağladık.

Aşağıda tüm ifadeleri görebilirsiniz.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
ie = (document.all) ? true : false;
ns6 = (document.getElementById && !document.all) ? true : false;
function zRenginiDegistir(katman)
{
if(ie)
{
eskiRenk = document.all[katman].style.backgroundColor;
if(eskiRenk == 'gray') yeniRenk = 'yellow';
else yeniRenk = 'gray';
document.all[katman].style.backgroundColor=yeniRenk;
}
if(ns6)
{
eskiRenk = document.getElementById(katman).style.backgroundCo lor;
if(eskiRenk == 'gray')
yeniRenk = 'yellow';
else
yeniRenk = 'gray';
document.getElementById(katman).style.backgroundCo lor=yeniRenk;
}
}
</SCRIPT>
<HEAD>
<BODY>
<DIV ID="alan"
STYLE="margin : 20; background-color: gray;
width: 300; height:100;
border-style:solid; borde-color:red;
border-widht:1"
onClick="zRenginiDegistir('alan')">
alan kimliği verdiğimiz bir blok.
</DIV>
</BODY>
</HTML>

yigityurt · 14-05-2007, 16:41

dhtml - İki tarayıcının aynı işi yapabilmesi 2
Şimdiki işlemimiz istediğimiz elemanın istediğimiz özelliğini tek bir fonksiyon ile nasıl değiştireceğimizi görmek olacak.

Bir elemana onun IDsi ile ulaşabiliyoruz ve istediğimiz özelliğini değiştirebiliyoruz. Fakat browserlerin DOM yaıları farklı olduğundan her browser için farklı ifadeler yazmak işimizi uzatacaktır. Eğer verdiğimiz IDnin, verdiğimiz özelliğine verdiğimiz değeri atayacak bir fonksiyon yazarsak bu fonksiyonu kullanarak fazladan ifadeler yazmadan istediğimizi istediğimiz browsere yaptırabiliriz. Yeni yazacağımız fonksiyon dışarıdan üç değişken alacak. Bunlar işlem yapılacak elemanın IDsi, kullanılacak özelliğin adı ve özelliğe atayacağımız değerdir.

Fonksiyonumuzu yazmaya başlayalım.

function sitilDegistir(kimlik,sitil,deger)
{
if(ie) eleman = "document.all['" + kimlik + "'].style.";
if(ns6) eleman = "document.getElementById('" + kimlik + "').style.";
eval (eleman + sitil + "=" + "\"" + deger +"\"");
}

Yukarıdaki fonksiyon ilk olarak eleman adlı bir değişkeni browse türüne göre oluşturuyor. Sonrada eval() medodu kullanılarak sitil adı ve değeri bu elemana eklenerek oluşan ifadenin browser tarafından uygulanması sağlanıyor. Şimdi örnek bir sayfa içerisinde birkaç elemanın sitillerini bu fonksiyon ile değiştirelim.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
ie = (document.all) ? true : false;
ns6 = (document.getElementById && !document.all) ? true : false;
function sitilDegistir(kimlik,sitil,deger)
{
if(ie) eleman = "document.all['" + kimlik + "'].style.";
if(ns6) eleman = "document.getElementById('" + kimlik + "').style.";
eval (eleman + sitil + "=" + "\"" + deger +"\"");
}
</SCRIPT>
<HEAD>
<BODY>
<DIV ID="alan"
STYLE="margin : 20; background-color: gray;
width: 300; height:100;
border-style:solid; borde-color:red;
border-widht:1"
onClick="sitilDegistir('alan','borderWidth','10'); ">
alan kimliği verdiğimiz bir blok.
</DIV>
<P>
DHTML sayfa tasarımcıları için
<B ID="onemli"
onMouseOver="sitilDegistir('onemli','fontSize','30 px');"
onMouseOut="sitilDegistir('onemli','fontSize','sma ll');">
önemli
</B>
teknikler sunar.
<P>
<DIV ID="aciklama"
onClick="sitilDegistir('aciklama','textAlign','rig ht');">
Bu yazıya tıkladığınızda sağ kenara yaslı bir hâlde gösterilecektir.
</DIV>
</BODY>
</HTML>

Yukarıdaki fonksiyonu kullanarak istediğiniz elemanın istediğiniz özelliğini her iki browser içinde değiştirebilirsiniz. Burada bir noktaya dikkat çekmek istiyorum eğer kullanılan browser IE4.x ve yukarısı veya NS6.x değilse fonksiyonumuz hiç bir işlem yapmayacak ve boş bir fonksiyon

yigityurt · 14-05-2007, 16:42

dhtml - Konumsal özellikler ile çalışma
Sayfa içerisindeki elemanların konumları ile ilgili özellikleri değiştirerek değişik uygulamalar geliştirebiliriz. Mesela bir katmanı gizleme, gösterme, başka bir alana taşımak veya hareket ettirmek gibi. Bu kısımda bu gibi konuları işleyeceğiz.

CSS ile katman tanımlama
Browserler arasında Nestcape 4.x serisi <LAYER> tagı ile katman kullanmayı ve CSS ile katman tanımlamayı destekler. Fakat İnternet Explorer ve Nestcape 6.x serisi sadece CSS ile katmanları tanımlayabilirler ve kullanabilirler. Bu nedenle bir bu bölümde sadece CSS ile katman kullanmayı göreceğiz.

CSS ( Cascading Style Sheet ) ile katman tanımlamak için <STYLE> tagını kullanıyoruz. Katmanları genel olarak block taglarında kullanabiliriz ( P, DIV, Hx gibi). Genel katman tanımlama tagı olarak <DIV> tagını kullanacağız.

Örnek olarak bir katman tanımlarsak :

<DIV STYLE="position:absolute; left:20; top:30; width:200">

şeklinde bir tanımlama yapmamız yeterli olacaktır.
Bu şekilde bir kullanım satır içi kullanımdır. Şimdi satır içi kullanımla birlikte katman tanımlarken kullanacağımız diğer sitil özelliklerini görelim.

position
Bu özellik katmanın durumunu belirtir. Üç değer alabilir.
absolute : bu parametre kullanıldığında katman bağımsız bir şekilde oluşturulacaktır. Verilen değerlere göre sayfa üzerinde dilediğimiz yere katmanı yerleştirebiliriz.
relative : bu özellik ile katmanı sayfa içerisinde katmanın tanımlandığı yere göre konumladırılır.
inherid : bu özellikte katmanın bir başka katman içerisinde kullanıldığında içerisinde bulunduğu katmana göre hareket etmesini sağlar. Eğer başka bir katman içerisinde tanımlanmadıysa katman absolute özelliği gibi davranacaktır.

left
Bu özellik katmanın sol kenara göre nereye yerleştirileceğini belirtir. left: 10 şekllinde bir kullanım sol kenara göre 10 pixel sağa katman yerleşecektir.

top
Bu özellik katmanın sayfanın enüstüne göre konumlandırılmasını sağlar.

width
Katmanın genişliğini belirtir. Kullanılmadığı zaman browser kendi ayarlama yapacaktır. Fakat böyle durumlarda Internet Explorer sorun çıkarabilir. Bu nedenle belirtilmesi gereklidir.

height
Katmanın yüksekliğini belirtir.

clip
Bu özellik ile katmanın hangi bölümünün görünür olacağı belirtilir. Katmanın istenilen bölümü görünür kılınabilir. clip:rect(ust,sağ,alt,sol) şekllinde bir kullanımı vardır. Burada :
üst katmanın en üstünden ne kadar birim uzaklıkta gösterime başlanacağını bellirtir.
Sağ değeri ise katmanın sol kısımdan ne kadar birim sağdan başlayacağını belirtilir.
Alt parametresi katmanın en üsten ne kadar aşağıya doğru gösterileceğni belirtir.
Sol parametresi katmanın en soldan ne kadar sağa yanaşık gösterileceğini belirtir.

visibility
Bu parametre katmanın görünürlüğünü belirtir. visible parametresi ile katman görünür olacaktır. hidden parametresi ise katmanın görünmez olamsını sağlar.

z-index
Bu parametre derinlik olarak katmanın hangi seviyede olacağını belirtir. Bu değer kullanılmadığında katmanlar sayfa içerisinda aynı derinlikte kalacaklardır. Değer artıkça katmanın daha üste görünmesi sağlanır.

background-color
Bu değer katmanın zemin rengini belirler. Değer olarak tanımlı renk isimleri veya hexadesimal RGB üçlüsü girilebilir. Nescape 4.x serisinde bu değer katman içerisine yazılan yazının zemin rengini belirtir.

layer-background-color
Bu değer Nestcape 4.x için layerin zemin rengini belirler.

background-image
Katman için zemine bir resim yerleştirir. Kullanımı : background-image:URL(zemin.gif) şeklindedir.

layer-background-image
Nestcape için katmana bir zemin resmi yerleştirir. Kullanımı layer-background-image:URL(zemin.gif) şeklindedir.
Bu özelliklerin tam açıklamasını W3C CSS-Positioning adresinide bulabilirsiniz. Şimdi örnek bir katman tanımlayalım :

<DIV ID="yeniKatman" STYLE="
position:absolute;
left:100;
top:40;
width:200;
height:200;
clip:rect(0,200,200,0);
background-color:red;
layer-background-color:red;
visibility:visible;"> yeniKatman isminde tanımlanmış bir katman.
</DIV>

Bu katmanı görmek için tıklayınız . Burada dikkat edilmesi gereken bir konuda ID özelliğidir. HTML 4.0 da tanımlanan bu özellik ile tüm sayfa elemanlarına özel bir kimlik verilebilir ve istenildiğinde verilen kimlik ile elemana istenilen yerden ulaşılınablir. Burada verdiğimiz yeniKatman isminde başka bir elemena isim veremeyiz ve yeniKatman ismi

yigityurt · 14-05-2007, 16:44

dhtml - Konumsal özellikler ile çalışma 2
Yine sitillerin başka bir kulanımı şu şekilde olabilir; tüm sitillerimizi başlangıçta HEAD tagı içerisinde tanımlayabiliriz. Böyle bir kullanımda tanımlayacağımız katmanın ID sine göre tanımlama yapabiliriz. Mesela;

<HTML>
<HEAD>
<STYLE type="text/css">

</STYLE>
</HEAD>
<BODY>
<DIV ID="yeniKatman"> </DIV>
<DIV ID="digerKatman"> </DIV>
</BODY>
</HTML>

Katman ( layer ) tanımlamayı gördüğümüze göre katmanların özelliklerini değiştirerek istediklerimizi nasıl yapabileceğimizi görelim.

14-05-2007, 16:15	#1 (permalink)
yigityurt EN Afacan Üyelik Tarihi: 06-05-2007 Mesajlar: 163 Rep Gücü: 32 Rep Puanı: 1294	dHtml - Dinamik html - Geniş Bilgi Bu bölümde websayfalarımız daha hareketli hâle getirecek yeni teknikleri öğreneceğiz. Genel adı DHTML olan bu teknikler sayfa tasarımında bizler için yeni ufuklar açacak. Websayfalarının durağan yapısını değiştirmek ve onları daha canlı ve hareketli hâle getirmek gerçekten ilginç bir çalışmadır. Bu sayede sayfada hereket eden, içeriği değişen değişik eventlere ( hareketlere ) karşı tepkiler verebilen bir sayfa tasarımı yapabileceğiz. DHTML tekniklerini kullanabilmek için NS 4.x ve IE 4.x üzeri browserleri kullanılması gerekiyor. Bu bölümdeki teknikleri denemeniz için bu browserlerden en az birini elde etmelisiniz. DHTML konusunu işlerken

14-05-2007, 16:18	#2 (permalink)
yigityurt EN Afacan Üyelik Tarihi: 06-05-2007 Mesajlar: 163 Rep Gücü: 32 Rep Puanı: 1294	DHTML nedir? Konumuza girmeden önce DHTMLin ne olduğunu kavramamız gerekmektedir. Bu nedenle kısa bir açıklama yapmakta fayda bulunmaktadır. DHTML bir programlama veya işaretleme dili değildir. Bu nedenle yeni bir dil öğrendiğinizi düşünmeyin. Çünkü DHTML; CSS, JavaScript ve HTMLin birleşiminden oluşan, browser DOM ( document object model ) yapısını kullanarak sayfa üzerinde yeni denetimler ve düzenlemeler sunun teknikler zinciridir. Bu nedenle bu bölüme başlamadan önce HTML , CSS ve JavaScript hakkında orta seviyede bilgi sahibi olmanız gerekmektedir. DHTML teknikleri DOM özelliklerini kullanma üzerine geliştirilmiştir ve her browser kendi DOM ( document object model ) geliştirmiştir. Bu nedenle gerekli durumlarda browseri tanımlamak ve ona göre bir program yapmak gerekmektedir. Eğer mümkünse elinizin altında IE 4.x veya yukarısı, NS 4.x ve NS 6.x browrowserlerin bulunmasında fayda olacaktır.

14-05-2007, 16:21	#3 (permalink)
yigityurt EN Afacan Üyelik Tarihi: 06-05-2007 Mesajlar: 163 Rep Gücü: 32 Rep Puanı: 1294	DHTML ile neler yapılabilir Aslında DHTML ile browser DOM yapısının izin verdiği tüm işlemler üzerinde çalışmalar yapabilirsiniz. Fakat birkaç örnek vermek gerekirse ; Açılır-kapanır menüler, Animasyonlar, Sayfa elemanlarini hareketlendirme, Duruma göre değişen sitil tasarımları, Sayfayı süsleyecek efektler, gibi bir çok değişik

14-05-2007, 16:26	#4 (permalink)
yigityurt EN Afacan Üyelik Tarihi: 06-05-2007 Mesajlar: 163 Rep Gücü: 32 Rep Puanı: 1294	dHtml - Tarayıcı / browser tanımlama Browser tanımlama Browser üreticileri farklı şekillerde broserler için bir Document Object Model geliştirdiklerinden ve browserlere farklı yaklaşımlar sunduklarından browserler arası DHTML uygulamalarında farklılıklar olmaktadır. Bu nedenle bir DHTML uygulaması hazırlarken ilk olarak bu uygulmayı çalıştıracak browseri tanımlamamız gerekmektedir. Bir websayası değişik üreticilerin sundukları değişik sürümlerde browserlerle ziyaret edilebilir. Bu nedenle eğer sayfamızı özel bir browsere göre hazırlamıyorsak hazırladığımız uygulama her brower üzerinde çalışmak zorundadır. Bunun içinde öncelikle browser tanımlaması yapmak zorundayız. Nestcape 4.x Nestcape 4.x browserler katman tanımlamasını LAYER tagı üzerine kurmuşlardır. Bu nedenle javascript ile browserin Nestcape 4.x uyumlu olup olmadığını anlamak için layer nesnesini kontrol etmemiz gerekmektedir. Bu şu şekilde yapabiliriz. ns4 = (document.layers) ? true : false Bu kod ile eğer browser layer nesnesini tanıyorsa yani Nestcape 4.x ise ns4 değişkenine true değeri atanacaktır, aksi halde false değeri ns4 değişkenine atanır. Internet Explorer 4.x Internet Explorer sayfa üzerinde tüm nesneler ile oynayabilir ve bunu sağlamak için all nesnesini kullanır. Biz browserin IE 4.x olduğunu anlamak için : ie4 = (document.all) ? true : false kodunu kullanacağız. IE5 içinde bu tanımlamayı kullanacağız. Netscape 6.x NS6 W3C nin tanımladığın standart DOM1 tanımlamasına uygun bir DOM yapısına sahiptir. Bu nedenle bu browserde getElementById nesnesi ile sayfa elemanlarına ulaşılır. Standartları destekleyen Netscape 6.x serisi browserler için : ns6 = (document.getElementById && !document.all) ? true : false kodu ile eğer browser getElementById nesnesini tanıyor ve de document.all nesnesini tanımıyorsa yani IE 5.x değilse ns6 değişkeni true aksi halde false değeri alacaktır. Burada document.all nesnesinin denetlenmesinin sebebi IE5.x serisinin de getElementById nesnesini kullanabilmesidir. Bu değişkenleri nasıl kullanacağımızı görelim : Öncelikle bu değişkenler javascript içerisinden tanımlanacaktır ve bu tanımlama sayfa yüklenmeden yapılmalıdır. Kullanacağımız kod : <script> ns4 = (document.layers) ? true : false; ie4 = (document.all) ? true : false; ns6 = (document.getElementById && !document.all) ? true : false; </script> şeklinde olacaktır. Şimdi bu koda bir de fonksiyon ekleyelim ve sayfa yüklenirken browserin türünü bize söylesin. function tanimla(){ if(ns4) alert("Nestscape 4.x browser. layer özelliği kullanıyor."); else if(ns6) alert("Netscape 6.x browser. getElementById kullanılıyor."); else if(ie4) alert("Interntet Explorer. all özelliği kullanılıyor."); } bu fonksiyonuda script tagı içerisine yerleştirelim. Simdi browserimizi sınayan ve tanımllayan bir scriptimiz oldu. Tüm kodlar : <HTML> <HEAD> <SCRIPT> ns4 = (document.layers) ? true : false; ie4 = (document.all) ? true : false; ns6 = (document.getElementById && !document.all) ? true : false; function tanimla(){ if(ns4) alert("Nestcape 4.x browser. layer özelliği kullanıyor."); else if(ns6) alert("Netscape 6.x browser. getElementById kullanılıyor."); else if(ie4) alert("Interntet Explorer. all özelliği kullanılıyor."); } </SCRIPT> </HEAD> <BODY onLoad="tanimla()"> </BODY> </HTML> Burada onLoad="tanimla()" şeklinde girdiğimiz parametrenin sayfa yüklendiğinde tanimla() isimli fonksiyonu çağıran bir event olduğunu hatırlatmakta fayda görüyorum. Sonucu denemek

14-05-2007, 16:32	#5 (permalink)
yigityurt EN Afacan Üyelik Tarihi: 06-05-2007 Mesajlar: 163 Rep Gücü: 32 Rep Puanı: 1294	dhtml - Değişen içerikler hazırlama dhtml - Değişen içerikler hazırlama Websayfaları browser ekranına geldiklerinde tanımlandıkları şekillerde görünürler. Tasarımcılar sayfaları üzerinde sayfa görüntülendikten sora da denetim sahibi olmak isterler. Bu gibi durumlarda DHTML tekniklerini kullanarak sayfa üzerinde denetim sahibi olunabir. Netscape 4.x serisi sadece konumsal özellikler üzerinde denetime izin verir. Mesela bir bloğu başka bir yere taşımak veya gizlemek gibi. Fakat IE 4.x ve üzeri ayrıca Netscape 6.x serisi sayfa yüklendikten sonra da sayfa üzerinde denetime izin vermektedir. Bu denetimler içerik değiştirmek olduğu gibi yeni içerikler yerleştirmek veya ver olan sitillerin değiştirilmesi de olabilir. Biz bu bölümde sadece sayfa içerisindeki sitilleri nasıl değiştirebileceğimizi göreceğiz. İlk olarak bir yazının üzerine gelindiğinde renginin nasıl değiştirilebileceğini görelim. DHTML sayfa tasarımcıları için <B ID="onemli">önemli<B> teknikler sunar. Şimdi yukarıda tanımladığımız onemli adlı elemanımızın üzerine mouse geldiğinde nasıl rengini değiştirebileceğimizi görelim. IE de bu işlemi yapmak için direkt olarak elemanın IDsi verilerek yeni sitil bilgisi verilebilir. Aşağıdaki ifadeler IE 4.x ve üzerinde çalışacaktır. DHTML sayfa tasarımcıları için <B ID="onemli" onMouseOver="onemli.style.color='red'" onMouseOut="onemli.style.color='black'"> önemli </B> teknikler sunar. Yukarıdaki ifadeleri incelediğinizde onMouseOver ve onMouseOut eventlerine şu ifadeleri ekledik onemli.style.color='red'; IE de bir elemanın style bilgilerine erişmek ve onları değiştirmek için elemanın IDsini kullanıyoruz. elemanIDsi Sonra sitil bilgisi üzerinde çalışacağımız için ona style şeklide bir ekleme yapıyoruz. elemanIDsi.style Ardından hangi özelliğe ulaşacaksak o özelliği ekliyoruz. elemanIDsi.style.ozellik En son olarakta yeni değeri atıyoruz. elemanIDsi.style.ozellik="yeni_değer"; Bu işlemi sayfa yüklendikten sonra sayfanın herhangi bir yerinde yapabiliriz. Şimdi yukarıdaki ifadelerin nasıl bir sonuç verdiğini görelim. Mouse ile önemli yazısı üzerine gelin ve yazının renginin nasıl değiştiğine dikkat edin. DHTML sayfa tasarımcıları

14-05-2007, 16:35	#6 (permalink)
yigityurt EN Afacan Üyelik Tarihi: 06-05-2007 Mesajlar: 163 Rep Gücü: 32 Rep Puanı: 1294	dhtml - Değişen içerikler hazırlama 2 Aynı işlemi Netscape 6.x ile de yapabiliriz. Netscape standart DOM yapısını kullandığından bu işlemi farklı bir şekilde yapıyor. Öncelikle bir elemana IDsi üzerinden erişmek için Netscape 6.x getElemanById yöntemini kullanıyor. Şimdi bu işlemin nasıl olacağını görelim. İlk olarak bir döküman üzerinde çalıştığımızdan document ve ardından kullanacağımız yöntem olan getElemanById gelir. Ulaşacağımız elemanın IDsi burada kullanılır. document.getElemanById('elemanIDsi') Ardından sitil özellikleri kullanılacağından style eki ve kullanacağımız sitil özelliği ve değerini ekliyoruz. document.getElementById('elemanIDsi').style.ozelli k="yeni_değer"; Bu ifadeleri yukarıdaki örneğimize uyarlarsak. DHTML sayfa tasarımcıları için <B ID="onemli" onMouseOver="document.getElementById('onemli').sty le.color='red'" onMouseOut="document.getElementById('onemli').styl e.color='black'"> önemli </B> teknikler sunar. Şeklinde yeni ifadelerimiz oluşur. Şimdi bu ifadelerin Netscape 6.x ve IE 5.5 üzerinde deneyebilirsiniz. DHTML sayfa tasarımcıları için önemli teknikler sunar. Bu yöntemler kullanılarak istenilen elemanın istenilen özelliği üzerinde yeni denetimler kurulabilir. Şimdi aynı örneğimizde onemli adlı elemanın font boyunu değiştirelim. Önce IE cephesi: DHTML sayfa tasarımcıları için <B ID="onemli" onMouseOver="onemli.style.fontSize='30px'" onMouseOut="onemli.style.fontSize='small'"> önemli </B> teknikler sunar. Yeni örneğimizde elemanımız üzerine mouse geldiğinde font boyutu 30px olacak ve sonra mouse ayrıldığında ise small değerine dönüşecektir. Sonucu aşağıda görebilirsiniz. DHTML sayfa tasarımcıları için önemli teknikler sunar. Dikkat edeceğimiz konu sitil özelliği eğer birden fazla kelimeden oluşuyora font-size gibi bu özelliği javascripten ulaşmak için bu kelimeleri birleştiriyoruz ve ikinci ve varsa üçüncü kelimelerin başharflerini büyük harf yapıyoruz. Yukardaki örneği NS6 ya uygulamak için aşağıdaki ifadeleri kullanıyoruz. DHTML sayfa tasarımcıları için <B ID="onemli" onMouseOver="document.getElementById('onemli').sty le.fontSize='30px'" onMouseOut="document.getElementById('onemli').styl e.fontSize='small'"> önemli </B> teknikler sunar. Yukarıdaki ifadelerin NS6 sonucunu aşağıdaki paragrafta görebilirsiniz. DHTML sayfa tasarımcıları için önemli teknikler sunar.

14-05-2007, 16:39	#7 (permalink)
yigityurt EN Afacan Üyelik Tarihi: 06-05-2007 Mesajlar: 163 Rep Gücü: 32 Rep Puanı: 1294	dhtml - İki tarayıcının aynı işi yapabilmesi 1 dhtml - İki tarayıcının aynı işi yapabilmesi Şimdide bir bloğun zemin renginin nasıl değiştirilebileceğini görelim. Bu örneğimizin diğer iki örnekten farlı olan tarafı javascript ile bir fonksiyon tanımlayacak olmamız ve sonrada bu fonksiyon üzerinden zemin rengini değiştirecek olmamızdır. Bunun nedeni ise iki browser içinde tek bir ifadeyi kullanmak ve sayfamızın iki browser üzerinden de çalışmasını sağlamaktır. Öncelikle bloğumuzu tanımlayalım. <DIV ID="alan" STYLE="margin : 20; background-color: gray; width: 300; height:100; border-style:solid; border-color:red; border-width:1" onClick="zRenginiDegistir('alan')"> alan kimliği verdiğimiz bir blok. </DIV> Tanımladığımız elemana alan adı verdik. Biz bu elemanın değişik özelliklerini artık IDsi ile kolaylıkla denetleyebileceğiz. Şimdide scriptimizi hazırlayalım. Scriptimizi hazırlarken ilk olarak browser seçimi yapacağız. ie = (document.all) ? true : false; ns6 = (document.getElementById && !document.all) ? true : false; Browser tanımlamasını yaptıktan sonra fonksiyonumuzu yazmaya başlayabiliriz. Fonksiyonumuz katmanın ismini alacak sonra elemanın zemin rengini öğrenecek, ardındanda yeni zemin rengini belirleyecek ve yeni zemin rengini uygulayacak. function zRenginiDegistir(katman) { if(ie) { eskiRenk = document.all[katman].style.backgroundColor; if(eskiRenk == 'gray') yeniRenk = 'yellow'; else yeniRenk = 'gray'; document.all[katman].style.backgroundColor=yeniRenk; } if(ns6) { eskiRenk = document.getElementById(katman).style.backgroundCo lor; if(eskiRenk == 'gray') yeniRenk = 'yellow'; else yeniRenk = 'gray'; } } Fonksiyonumuzda browseri konrollerini yaptık ve sonuca göre farklı işlemlerin yapılmasını sağladık. Önce eskiRenk adlı değişkenimize kullandığımız katmanın zemin rengini atadık. Sonra bu renge göre yeniRenk değişkenine bir değer atayarak her tıklamada bloğumuzun zemin renginin değişmesini sağladık. Aşağıda tüm ifadeleri görebilirsiniz. <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> ie = (document.all) ? true : false; ns6 = (document.getElementById && !document.all) ? true : false; function zRenginiDegistir(katman) { if(ie) { eskiRenk = document.all[katman].style.backgroundColor; if(eskiRenk == 'gray') yeniRenk = 'yellow'; else yeniRenk = 'gray'; document.all[katman].style.backgroundColor=yeniRenk; } if(ns6) { eskiRenk = document.getElementById(katman).style.backgroundCo lor; if(eskiRenk == 'gray') yeniRenk = 'yellow'; else yeniRenk = 'gray'; document.getElementById(katman).style.backgroundCo lor=yeniRenk; } } </SCRIPT> <HEAD> <BODY> <DIV ID="alan" STYLE="margin : 20; background-color: gray; width: 300; height:100; border-style:solid; borde-color:red; border-widht:1" onClick="zRenginiDegistir('alan')"> alan kimliği verdiğimiz bir blok. </DIV> </BODY> </HTML>

14-05-2007, 16:41	#8 (permalink)
yigityurt EN Afacan Üyelik Tarihi: 06-05-2007 Mesajlar: 163 Rep Gücü: 32 Rep Puanı: 1294	dhtml - İki tarayıcının aynı işi yapabilmesi 2 dhtml - İki tarayıcının aynı işi yapabilmesi 2 Şimdiki işlemimiz istediğimiz elemanın istediğimiz özelliğini tek bir fonksiyon ile nasıl değiştireceğimizi görmek olacak. Bir elemana onun IDsi ile ulaşabiliyoruz ve istediğimiz özelliğini değiştirebiliyoruz. Fakat browserlerin DOM yaıları farklı olduğundan her browser için farklı ifadeler yazmak işimizi uzatacaktır. Eğer verdiğimiz IDnin, verdiğimiz özelliğine verdiğimiz değeri atayacak bir fonksiyon yazarsak bu fonksiyonu kullanarak fazladan ifadeler yazmadan istediğimizi istediğimiz browsere yaptırabiliriz. Yeni yazacağımız fonksiyon dışarıdan üç değişken alacak. Bunlar işlem yapılacak elemanın IDsi, kullanılacak özelliğin adı ve özelliğe atayacağımız değerdir. Fonksiyonumuzu yazmaya başlayalım. function sitilDegistir(kimlik,sitil,deger) { if(ie) eleman = "document.all['" + kimlik + "'].style."; if(ns6) eleman = "document.getElementById('" + kimlik + "').style."; eval (eleman + sitil + "=" + "\"" + deger +"\""); } Yukarıdaki fonksiyon ilk olarak eleman adlı bir değişkeni browse türüne göre oluşturuyor. Sonrada eval() medodu kullanılarak sitil adı ve değeri bu elemana eklenerek oluşan ifadenin browser tarafından uygulanması sağlanıyor. Şimdi örnek bir sayfa içerisinde birkaç elemanın sitillerini bu fonksiyon ile değiştirelim. <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> ie = (document.all) ? true : false; ns6 = (document.getElementById && !document.all) ? true : false; function sitilDegistir(kimlik,sitil,deger) { if(ie) eleman = "document.all['" + kimlik + "'].style."; if(ns6) eleman = "document.getElementById('" + kimlik + "').style."; eval (eleman + sitil + "=" + "\"" + deger +"\""); } </SCRIPT> <HEAD> <BODY> <DIV ID="alan" STYLE="margin : 20; background-color: gray; width: 300; height:100; border-style:solid; borde-color:red; border-widht:1" onClick="sitilDegistir('alan','borderWidth','10'); "> alan kimliği verdiğimiz bir blok. </DIV> <P> DHTML sayfa tasarımcıları için <B ID="onemli" onMouseOver="sitilDegistir('onemli','fontSize','30 px');" onMouseOut="sitilDegistir('onemli','fontSize','sma ll');"> önemli </B> teknikler sunar. <P> <DIV ID="aciklama" onClick="sitilDegistir('aciklama','textAlign','rig ht');"> Bu yazıya tıkladığınızda sağ kenara yaslı bir hâlde gösterilecektir. </DIV> </BODY> </HTML> Yukarıdaki fonksiyonu kullanarak istediğiniz elemanın istediğiniz özelliğini her iki browser içinde değiştirebilirsiniz. Burada bir noktaya dikkat çekmek istiyorum eğer kullanılan browser IE4.x ve yukarısı veya NS6.x değilse fonksiyonumuz hiç bir işlem yapmayacak ve boş bir fonksiyon

14-05-2007, 16:42	#9 (permalink)
yigityurt EN Afacan Üyelik Tarihi: 06-05-2007 Mesajlar: 163 Rep Gücü: 32 Rep Puanı: 1294	dhtml - Konumsal özellikler ile çalışma 1 dhtml - Konumsal özellikler ile çalışma Sayfa içerisindeki elemanların konumları ile ilgili özellikleri değiştirerek değişik uygulamalar geliştirebiliriz. Mesela bir katmanı gizleme, gösterme, başka bir alana taşımak veya hareket ettirmek gibi. Bu kısımda bu gibi konuları işleyeceğiz. CSS ile katman tanımlama Browserler arasında Nestcape 4.x serisi <LAYER> tagı ile katman kullanmayı ve CSS ile katman tanımlamayı destekler. Fakat İnternet Explorer ve Nestcape 6.x serisi sadece CSS ile katmanları tanımlayabilirler ve kullanabilirler. Bu nedenle bir bu bölümde sadece CSS ile katman kullanmayı göreceğiz. CSS ( Cascading Style Sheet ) ile katman tanımlamak için <STYLE> tagını kullanıyoruz. Katmanları genel olarak block taglarında kullanabiliriz ( P, DIV, Hx gibi). Genel katman tanımlama tagı olarak <DIV> tagını kullanacağız. Örnek olarak bir katman tanımlarsak : <DIV STYLE="position:absolute; left:20; top:30; width:200"> şeklinde bir tanımlama yapmamız yeterli olacaktır. Bu şekilde bir kullanım satır içi kullanımdır. Şimdi satır içi kullanımla birlikte katman tanımlarken kullanacağımız diğer sitil özelliklerini görelim. position Bu özellik katmanın durumunu belirtir. Üç değer alabilir. absolute : bu parametre kullanıldığında katman bağımsız bir şekilde oluşturulacaktır. Verilen değerlere göre sayfa üzerinde dilediğimiz yere katmanı yerleştirebiliriz. relative : bu özellik ile katmanı sayfa içerisinde katmanın tanımlandığı yere göre konumladırılır. inherid : bu özellikte katmanın bir başka katman içerisinde kullanıldığında içerisinde bulunduğu katmana göre hareket etmesini sağlar. Eğer başka bir katman içerisinde tanımlanmadıysa katman absolute özelliği gibi davranacaktır. left Bu özellik katmanın sol kenara göre nereye yerleştirileceğini belirtir. left: 10 şekllinde bir kullanım sol kenara göre 10 pixel sağa katman yerleşecektir. top Bu özellik katmanın sayfanın enüstüne göre konumlandırılmasını sağlar. width Katmanın genişliğini belirtir. Kullanılmadığı zaman browser kendi ayarlama yapacaktır. Fakat böyle durumlarda Internet Explorer sorun çıkarabilir. Bu nedenle belirtilmesi gereklidir. height Katmanın yüksekliğini belirtir. clip Bu özellik ile katmanın hangi bölümünün görünür olacağı belirtilir. Katmanın istenilen bölümü görünür kılınabilir. clip:rect(ust,sağ,alt,sol) şekllinde bir kullanımı vardır. Burada : üst katmanın en üstünden ne kadar birim uzaklıkta gösterime başlanacağını bellirtir. Sağ değeri ise katmanın sol kısımdan ne kadar birim sağdan başlayacağını belirtilir. Alt parametresi katmanın en üsten ne kadar aşağıya doğru gösterileceğni belirtir. Sol parametresi katmanın en soldan ne kadar sağa yanaşık gösterileceğini belirtir. visibility Bu parametre katmanın görünürlüğünü belirtir. visible parametresi ile katman görünür olacaktır. hidden parametresi ise katmanın görünmez olamsını sağlar. z-index Bu parametre derinlik olarak katmanın hangi seviyede olacağını belirtir. Bu değer kullanılmadığında katmanlar sayfa içerisinda aynı derinlikte kalacaklardır. Değer artıkça katmanın daha üste görünmesi sağlanır. background-color Bu değer katmanın zemin rengini belirler. Değer olarak tanımlı renk isimleri veya hexadesimal RGB üçlüsü girilebilir. Nescape 4.x serisinde bu değer katman içerisine yazılan yazının zemin rengini belirtir. layer-background-color Bu değer Nestcape 4.x için layerin zemin rengini belirler. background-image Katman için zemine bir resim yerleştirir. Kullanımı : background-image:URL(zemin.gif) şeklindedir. layer-background-image Nestcape için katmana bir zemin resmi yerleştirir. Kullanımı layer-background-image:URL(zemin.gif) şeklindedir. Bu özelliklerin tam açıklamasını W3C CSS-Positioning adresinide bulabilirsiniz. Şimdi örnek bir katman tanımlayalım : <DIV ID="yeniKatman" STYLE=" position:absolute; left:100; top:40; width:200; height:200; clip:rect(0,200,200,0); background-color:red; layer-background-color:red; visibility:visible;"> yeniKatman isminde tanımlanmış bir katman. </DIV> Bu katmanı görmek için tıklayınız . Burada dikkat edilmesi gereken bir konuda ID özelliğidir. HTML 4.0 da tanımlanan bu özellik ile tüm sayfa elemanlarına özel bir kimlik verilebilir ve istenildiğinde verilen kimlik ile elemana istenilen yerden ulaşılınablir. Burada verdiğimiz yeniKatman isminde başka bir elemena isim veremeyiz ve yeniKatman ismi

14-05-2007, 16:44	#10 (permalink)
yigityurt EN Afacan Üyelik Tarihi: 06-05-2007 Mesajlar: 163 Rep Gücü: 32 Rep Puanı: 1294	dHtml - Konumsal özellikler ile çalışma 2 dhtml - Konumsal özellikler ile çalışma 2 Yine sitillerin başka bir kulanımı şu şekilde olabilir; tüm sitillerimizi başlangıçta HEAD tagı içerisinde tanımlayabiliriz. Böyle bir kullanımda tanımlayacağımız katmanın ID sine göre tanımlama yapabiliriz. Mesela; <HTML> <HEAD> <STYLE type="text/css"> <!-- #yeniKatman { position:absolute; left:100; top:40; width:200; height:200; clip:rect(0,200,200,0); background-color:red; layer-background-color:red; visibility:visible;} #digerKatman { position:absolute; left:200; top:10; width:300; height:400; clip:rect(0,300,200,0); background-color:silver; layer-background-color:silver; } --> </STYLE> </HEAD> <BODY> <DIV ID="yeniKatman"> </DIV> <DIV ID="digerKatman"> </DIV> </BODY> </HTML> Katman ( layer ) tanımlamayı gördüğümüze göre katmanların özelliklerini değiştirerek istediklerimizi nasıl yapabileceğimizi görelim.

Konu Yönetim Seçenekleri
Yazdırılacak şekilde göster Sayfayı e-posta ile gönder
Konu Gösterim Seçenekleri
Normal şekilde göster Ağaç şeklinde göster Otomatik konu şeklinde göster

Hafta içi her gün 19:30 - 21:30 arası forumENA CANLI radyo yayını "Keyf-i Müzik" programını dinlemek için TIKLAYINIZ

dHtml - Dinamik html - Geniş Bilgi

dHtml - Dinamik html - Geniş Bilgi