Teorija

HTML dokumenti ar ietvariem
Katru ietvaru raksturo ar tagu frame. Tik, cik ir ietvaru, tikpat ir jābūt arī tagiem frame.
 
Svarīgākie taga frame atribūti ir doti tabulā.
 
Atribūts
Vērtība
Paskaidrojums
src
URL
Parāda ceļu pie HTML dokumenta <frame src="dok1.html">. Šajā gadījumā pārlūkprogramma ielādēs ietvarā dok1.html, bet te var tikt norādīta jebkura iespējamā adrese.
name
Nosaukums
Ietvara nosaukums ietvaru struktūrā.
scrolling
yes
no
auto
Nosaka ritjoslu lietošanu: rādīt vienmēr (yes), nerādīt (no), rādīt, ja lappuse neievietojas ietvarā (auto - noklusētā vērtība).
frameborder
0
1
Nosaka, vai attēlot apmales (vērtība 1 - noklusētā vērtība) vai neattēlot (vērtība 0) (frameborder="1" vai frameborder="0").
marginwidth
marginheight
pikseļos
Nosaka teksta atkāpi no ietvara malas pa horizontāli un pa vertikāli.
noresize
-
Neļauj lietotājam izmainīt tekošā ietvara izmērus. Parametram nav jānorāda vērtības.
 
Ja pārlūkprogramma neatpazīst ietvarus, tad HTML kodā var ietvert tagu <noframes>, kas pasaka, ka lapā ir ietvari: <noframes>Šis dokuments satur ietvarus</noframes>.
Ietvaru ligzdstruktūras veidošana
Ietvaru ligzdstruktūra (nested framesets) veidojas, ja viens ietvars satur citu ietvaru. Tabulā apskatīti divasu ligzdstruktūru piemēri.
 
 
Ligzdstruktūra 1
Ligzdstruktūra 2
Ietvaru ligzdstruktūra03.png04.png
HTML kods<html>
  <frameset rows="20%,80%">
  <frame src="" name="augsa">
     <frameset cols="25%,75%">
     <frame src="" name="kreisais">
     <frame src="" name="labais">
     </frameset>
  </frameset>
</html>
<html>
  <frameset cols="20%,80%">
  <frame src="" name="kreisais">
     <frameset rows="25%,25%,*">
     <frame src="" name="augsa">
     <frame src="" name="vidus">
     <frame src="" name="apaksa">
     </frameset>
  </frameset>
</html>
PaskaidrojumiAr pirmo tagu frameset ir izveidoti divi horizontāli ietvari. Otrajā horizontālajā ietvarā ar otro tagu frameset ir izveidoti divi vertikāli ietvari.Ar tagu frameset ir izveidoti divi vertikāli ietvari. Otrajā vertikālajā ietvarā ar otro tagu frameset ir izveidoti trīs horizontāli ietvari.
 
Tālāk piemēros ir parādīti vienkāršākie kodi ietvaru veidošanai un to darbības rezultāts. Šeit frame name ir katra ietvara vārds (A, B, C, D, M) un src pēdiņās jāieliek katras HTML lapas adrese, piemēram, A.html, B.html, ...M.html, kas ievietotas ietvaru struktūrā.
 
Piemērs:
Kods:
 
<html>
<head>
<title>Piemērs</title>
</head>
<frameset rows="50%,*">
  <frame name="A" src="A.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
  <frameset cols="50%,*">
     <frame name="B" src="B.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
     <frame name="C" src="C.html" marginwidth="10" marginheight="10" scroIling="auto" frameborder="0">
  </frameset>
</frameset>
</html>
Rezultāts:
 
05.png
 
Piemērs:
Kods:
 
<html>
<head>
<title>Piemērs</title>
</head>
<frameset rows="50%,*" cols="50%,*">
  <frame name="A" src="A.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
  <frame name="B" src="B.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
  <frame name="C" src="C.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
  <frame name="D" src="D.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
</html>
Rezultāts:
 
b06.png
 
Nākamais ir sarežģītāks ietvars, kas sastāv no 5 citiem ietvariem:
 
Piemērs:
Kods:
 
<html>
<head>
<title>Piemērs</title>
</head>
<frameset cols="20%,*">
  <frame name="A" src="A.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
     <frameset rows="50%,*">
       <frameset cols="50%,*">
         <frame name="B" src="B.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
         <frame name="C" src="C.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
       </frameset>
       <frameset cols="50%,*">
         <frame name="D" src="D.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
         <frame name="M" src="M.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
       </frameset>
     </frameset>
</frameset>
</html>
Rezultāts:
 
b07.png
 
Atsauce:
Informātika vidusskolai. 2. daļa / Kārlis Veiss – Rīga: Apgāds Zvaigzne ABC, 2009. – 144 lpp.: il. – izmantotā literatūra: 132.- 133. lpp.
 
Tīmekļa lapu veidošana. HTML un CSS / Andris Kamars - Rīga: Apgāds Zvaigzne ABC, 2008. – 320 lpp.: il. – izmantotā literatūra: 103.-107. lpp.