Ramele în html, exemple de cadre - Life-prog

CUPRINS

1. Reprezentarea cadrelor pe o pagină Web
1.1 Definirea unei structuri de cadru
1.2 Specificarea parametrilor cadrului
2 cadre plutitoare
3 Dezvoltarea unei pagini web cu mai multe ferestre
3.1 Cadrul "titlu"
3.2 Cadrul "stâng"
Exemplul nr. 1

1. Reprezentarea cadrelor pe o pagină Web

1.1 Definirea unei structuri de cadru

Spre deosebire de documentul HTML obișnuit din documentul cu descrierea cadrelor, nu există niciun container-tag . . În schimb, utilizează un container de etichete . . care împarte ecranul în mai multe părți orizontale (ferestre) sau în mai multe ferestre verticale. Fiecare dintre ferestre este descrisă sub forma unui cadru cu ajutorul unei etichete . etichetă conține următorii parametri:

  • COLS - specifică lățimea ferestrelor verticale în pixeli sau în% din lățimea ecranului (dacă * este specificat, atunci această fereastră este alocată restului ecranului);
  • ROWS - specifică înălțimea ferestrelor orizontale în pixeli sau în% din înălțimea ecranului (dacă * este specificat, atunci această fereastră este alocată restului ecranului);
  • Frameborder.
    • 1 - cadrele au un cadru;
    • 0 - cadrele nu au un cadru.
  • FRAMESPACING - specifică distanța dintre cadre în pixeli.





divizează ecranul în trei ferestre verticale, care ocupă 20%, 30%, respectiv restul (50%) ecranului. În locul fiecărei etichete poate fi specificată ca o etichetă . . Aceasta vă permite să creați pe ecran o structură complexă pe mai multe ferestre.

Exemplul 1 prezintă construirea și utilizarea unei structuri cu trei ferestre pe o pagină Web.

1.2 Specificarea parametrilor cadrului

Pentru a descrie caracteristicile fiecărei ferestre, utilizați eticheta , care conține următorii parametri:

2 cadre plutitoare în HTML

Atunci când creați o pagină web cu mai multe ferestre, în plus față de aplicarea unei structuri cadru pe baza etichetei . (vezi punctul 1.1), pot fi utilizate și cadre plutitoare. În acest caz, în documentul HTML în loc de etichetă . Folosit, ca și în celelalte pagini web, eticheta . .
Un cadru flotant, ca o imagine, va fi plasat pe ecran în punctul care corespunde locației etichetei cu descrierea acesteia în documentul HTML. Pentru a specifica un cadru flotant, utilizați un recipient de etichete . Deoarece rama plutitoare combină în mare măsură proprietățile atât cadrului și imaginea pe care o are parametrii (marginheight, marginwidth, NUME, SCROLING, SRC, borderColor), care sunt specifice cadrele și discutate la punctul 1.2, pe de altă parte a parametrilor săi (ALIGN, INALTIME, WIDTH, HSPACE, VSPACE) este tipic pentru imagini și este considerat în imaginea HTML de la punctul 1.1.

În exemplul 1, împreună cu cadrele obișnuite, este afișată aplicarea cadrelor plutitoare (în fișierul "left.htm").

3 Dezvoltarea unei pagini web cu mai multe ferestre

Exemplul (№ 1) prezintă construcția unei pagini web cu trei pagini, respectiv una: orizontală ("titlu") și două verticale ("stânga" și "dreapta").

Exemplul 1



Frames în HTML pe o pagină Web


MARGINHEIGHT = 0 MARGINTEIGHT = 0
STYLE = "margine: roșu 6 punctat">


BORDERCOLOR = # 0000E0>


După cum puteți vedea din structura cadrelor, ecranul este mai întâi împărțit în două ferestre orizontale: prima fereastră are o dimensiune de 60 de pixeli, cea de-a doua ocupă restul ecranului. Apoi, a doua fereastră orizontală este împărțită în două verticale cu dimensiuni de 30% și respectiv 70% ale ecranului.

3.1 Cadrul "titlu"

Cadrul "titlu" este utilizat pentru a specifica informații comune sau antet. Poate fi folosit ca pagină de pornire. Nu permite barele de defilare și redimensionarea ferestrelor.
Fișierul "title.htm", încărcat în fereastra "titlu", conține un document HTML din două rânduri care specifică culoarea de fundal, parametrii inscripției și inscripția:

STUDIUNEA HTML

3.2 Cadrul "stâng"

Fișier „left.htm“, descărcabile în fereastra „stânga“ conține un document HTML care specifică un set de link-uri în formă de butoane care accesul la descrierile loboratornyh de lucrări, și cadru de plutire:






Pagina # 2


Pagina # 3


Pagina # 4


Pagina # 5


Pagina # 6