Scrigroup - Documente si articole

Username / Parola inexistente      

Home Documente Upload Resurse Alte limbi doc  

CATEGORII DOCUMENTE




loading...



AccessAdobe photoshopAlgoritmiAutocadBaze de dateCC sharp
CalculatoareCorel drawDot netExcelFox proFrontpageHardware
HtmlInternetJavaLinuxMatlabMs dosPascal
PhpPower pointRetele calculatoareSqlTutorialsWebdesignWindows
WordXml


Pozitionarea obiectelor HTML in document

html

+ Font mai mare | - Font mai mic








DOCUMENTE SIMILARE

Trimite pe Messenger
Tag-uri utilizate pentru inserarea imaginilor
Tag-uri utilizate pentru crearea legaturilor (referintelor, pointerilor)
Liste ordonate - <li>
Example HTML
Inserarea unui script java
SOLUTII HTML PENTRU CREAREA SITE-URILOR WEB
Blocuri de titlu
Culori, RGB, exprimarea culorilor in hexazecimal
Inserarea unei imagini
Culori, RGB, exprimarea culorilor in hexazecimal

Pozitionarea obiectelor HTML in document

“Obiect” este un termen generic pentru toate lucrurile ce se vad pe ecran la afisarea paginii web, si sunt create de browser in functie de codul HTML. Pot fi impartite in urmatoarele structuri:




obiect singuar (“elementele HTML”. si altele)

grup de obiecte (incapsulate in <DIV> </DIV>

ierarhie de obiecte (<DIV> </DIV> reincapsulate)

In HTML un obiect este un element “block” (ca un paragraf

<P > . . . </P>, un tabel <TABLE > . . . </TABLE> etc.). Unele obiecte sunt reprezentate prin eticheta insasi, exemplu fiind o imagine <IMG >

Pozitionare este abilitatea de a plasa elementele HTML la o anumita locatie bine definita in document, prin coordonatele x, y si z. Asta inseamna ca se pot plasa elemente – imagini, controale, text etc. – exact unde dorim si astfel obtinandu-se efecte speciale prin definirea intr-o ordine speciala.

Pozitionarea este o extensie a CSS. Asta insemnand ca se poate specifica pozitia unui element prin alegerea atributelor CSS corespunzatoare pentru acel element. Mai mult DHTML suporta pozitionarea si animarea elementelor chiar dupa ce un document a fost incarcat. Deoarece modelul obietului permite accesul la stiluri si la style sheets, se poate scimba pozitia unui element lafel de simplu cum se poate schimba culoarea acestuia. Aceasta constituie un avantaj, si face foarte simpla, schimbarea pozitiilor elementelor bazate pe cum va vizualiza utilizatorul acel document, si chiar se pot anima elementele. Pentru animatii, tot ce este necesar este modificarea pozitiei unui element la un interval. De exemplu, urmatorul document prezinta o imagine care se plimba la inceputul documentului si se opreste in coltul din stanga sus.

<HTML>

<HEAD><TITLE>Dynamic Positioning</TITLE>

<SCRIPT LANGUAGE='JScript'>

var id;

function StartGlide()

function Glide()

</SCRIPT>

<BODY onload='StartGlide()'>

<H3>Welcome to Dynamic HTML!</H3>

<P>With dynamic positioning, you can move images anywhere in the document even while the user views the document.

<IMG ID='Banner' STYLE='visibility:hidden; top:0; left:0; z-index:-1' SRC='GREEN-BALL.GIF'>

</BODY>

</HTML>

Pozitionarea se poate face automat, de catre browser sau explicit. Pozitionarea explicita se imparte la randul ei in dinamica si statica.




Cea statica se realizeaza prin modificarea VISIBILITY, DISPLAY, Z, si alte atribute STYLE. Cea dinamica, prin TOP si/sau LEFT.

Majoritatea obiectelor pot fi pozitionate prin folosirea unui atribur STYLE. De exemplu daca se doreste pozitionarea la dreapta:

<object_type STYLE=' top: ; left: '> . . . </ object_type>

Schimbarea VISIBILITY:

<object_type ID=..id.. STYLE=' top:; left:; visibility:hidden'> . . . </object_type>

// pentru ca obiectul sa nu mai fie vizibil in pozitia initiala

<BUTTON onclick='change_visibility(id)' > . . . </BUTTON>

// un buton care isi scimba vizibilitatea, apeland id

iar functie:

function change_visibility(obj)

Astfel nu se schimba pozitia, ci doar vizibilitatea lui, si butonul va avea un efect de revenire dupa click.

Schimbarea DISPLAY este similara cu cea precedenta:

<object_type ID=..id.. STYLE=' top:; left:; display:none'> . . . </object_type>

Iar butonul va arata de genul:

<BUTTON onclick='change_display()' > . . . </BUTTON>

si functia corespunzatoare:

function change_display()

else }

Astfel cand butonul va fi apasat obiectul va fi afisat, iar obiectele din documentul HTML se vor muta mai jos. La a doua apasare obiectul dispare si documentul isi revine in starea initiala.



loading...






Politica de confidentialitate

DISTRIBUIE DOCUMENTUL

Comentarii


Vizualizari: 468
Importanta: rank

Comenteaza documentul:

Te rugam sa te autentifici sau sa iti faci cont pentru a putea comenta

Creaza cont nou

Termeni si conditii de utilizare | Contact
© SCRIGROUP 2020 . All rights reserved

Distribuie URL

Adauga cod HTML in site