Dinamičko pozicioniranje sadržaja



Tipično, unutar HTML dokumenta ukoliko želimo odvojiti ili naglasiti posebnu logičku sadržajnu cjelinu koristimo <DIV> tag. Ovime smo stvorili blok podataka koji sadrži jednu gif sliku i vezu na e-mail adresu, te predstavlja jednu logičku cjelinu. Da bi sada pozicionirali taj blok negdje u dokumentu , moramo reči <DIV> bloku da koristi style sheets, koji možda znate služe za opisivanje načina prikaza podataka. To obavljamo <STYLE> atributom, unutar <DIV> atributa na sljedeči način:

<DIV ID="mailblock"
STYLE="position:absolute;
width:auto;
height:auto;
left:400px;
top:50px;
background- color:white;">
<A HREF="mailto:me@myhouse.com">Mail me!</A>
<BR>
<IMG SRC = "mailbox.gif" width = 30 height = 15 alt = "Mailbox" >
</DIV>

Prvo smo ovome bloku podataka dali njegov ID putem kojeg ga dalje možemo referencirati npr. putem JavaScripta te tako njime manipulirati, a zatim smo unutar STYLE atributa naveli niz parametara i njihovih vrijednosti, odvojene dvotočkom ( parametar : vrijednost ), koji če pozicionirati ovaj blok ovisno o navedenim vrijednostima ovih parametara. ( 400 i 50 pixela od gornjeg ljevog kuta ekrana- apsolutno pozicioniranje).

Problem je što ne znamo veličinu prozora pa je bolje koristiti relativno pozicioniranje tj. pozicioniranje u odnosu na druge objekte, koje če rezultirati preciznijim pozicioniranjem. Tako npr. možemo stvoriti dva logička bloka pomoču <DIV> taga i onda pozicionirati jedan relativno prema drugom.

Kao što se i sami vidjeli pozicioniranje stvorenih blokova unutar stranice ovisit če isključivo o vrijednostima parametara unutar <STYLE> atributa, koji nam omogučavaju preciznu kontrolu nad elementima same stranice.

Tako u stvari možemo razgovarati o stranica koja se sastoji od niza objekata (blokova), kojima možemo mjenjati njihova svojstva, a onaj koji promatra stranicu toga nije niti svjestan.
Još uz pomoč JavaScripta ovaj pristup nam pruža širok spektar mogučnosti jer znamo da JavaScript ima vrlo močnu podršku za manipuliranje objektima. Sigurno se pitate gdje tu dolazi onaj dynamic.Ovo možda je precizno, ali dinamično ???