Valters Celmiņš
 © 2006 - 2011
Apmācība mājas lapu izveidē izmantojot xHTML 1.0 un CSS 2.1 valodas

Mājas lapu izkārtojumi

Ja runa ir par to, kādi izkārtojumi mājas lapām eksistē, tad tādu ir daudz... pārāk daudz, lai visus šeit minētu. Tomēr ir daži šablontipa izkārtojumi, kas sastopami ļoti, ļoti daudzās mājas lapās. Tas nav saistīts ar cilvēku neorģinalitāti, nebūt ne. Tas ir sastīts ar pārskatāmību, attēlojamās informācijas daudzumu un dizaina īpašībām, kas piemīt attiecīgajai mājas lapai. Protams, savu lomu spēlē arī cilvēka vēlmes: kādu mājas lapu vēlamies redzēt.

Šeit minētie izkārtojuma veidi nav obligāti vai ieteicami. Tie vienkārši tādi ir, un jūs varat tos izmantot drīzāk kā šablonus, pamatus, no kuriem sākt būvēt pašiem savas mājas lapas. Beigu beigās, kad būsiet izveidojuši kādas 2-3 mājas lapas, šādi šabloni jums vairs nebūs nepieciešami, jo noteikti jau pūsiet sapratuši, kā tās lietas strādā...


Jebkuri izmēri norādīti paraugos ir tikai parauga pēc, tie var, protams, tik mainīti pēc ieskatiem. Pie izmēriem, kur pievienoti komentāri "dzēst" paredzēti vēlākai dzēšanai, jo šie lielumi tiks nodrošināti dinamiskā veidā - palielinoties saturam.

Vienas slejas lapa ar augšējo izvēlni

Pats vienkāršākais izkārtojums. Bieži sastopams dažādos blogos, kur nav daudz informācijas.

HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Lorem Ipsum</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div id="top"> </div>
      <div id="menu"> </div>
      <div id="text"> </div>
      <div id="footer"> </div>
    </div>
  </body>
</html>
CSS 
* {margin: 0;
   padding: 0;}

div#container {width: 800px;
               border-left: 1px solid #000;
               border-right: 1px solid #000;
               margin: 0 auto;}

div#top {width: 100%;
         height: 100px;}

div#menu {width: 100%;
          height: 40px;
          border-top: 1px solid #000;
          border-bottom: 1px solid #000;}

div#text {width: 100%;
          height: 500px;  /* dzēst */}

div#footer {width: 100%;
            height: 20px;
            border-top: 1px solid #000;}

Vienas slejas lapa ar sāna izvēlni

Otrs vienkāršākais izkārtojums. Bieži sastopams dažādu uzņēmumu mājas lapās, interneta veikalos, arī blogos. Pārsvarā lapās, kurās ir ļoti plaša hierarhija (daudz izvēlņu un apakšizvēlņu).

HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Lorem Ipsum</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div id="top"> </div>
      <div id="menu"> </div>
      <div id="text"> </div>
      <div id="footer"> </div>
    </div>
  </body>
</html>
CSS 
* {margin: 0;
   padding: 0;}

div#container {width: 800px;
               border-left: 1px solid #000;
               border-right: 1px solid #000;
               margin: 0 auto;}

div#top {width: 100%;
         height: 100px;
         border-bottom: 1px solid #000;}

div#menu {width: 200px;
          height: 500px;  /* dzēst */
		  float: left;}

div#text {width: 599px;
          height: 500px;  /* dzēst */
          border-left: 1px solid #000;
		  float: right;}

div#footer {width: 100%;
            height: 20px;
            border-top: 1px solid #000;
			clear: both;}

Divu sleju lapa

Parasti sastopamas lapās, kurām ir aktuāli atspoguļot kādus "karstākos" jaunumus, pastāvīgi sniegt kādu statisku vai dinamisku informāciju (piemēram, informācija par kontu) vai arī reklāmu saturošās lapās. Tā ir tāda kā kombinācija no abām agstāk minētajām lapām.

HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Lorem Ipsum</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div id="top"> </div>
      <div id="menu"> </div>
      <div id="text"> </div>
	  <div id="add"> </div>
      <div id="footer"> </div>
    </div>
  </body>
</html>
CSS 
* {margin: 0;
   padding: 0;}

div#container {width: 800px;
               border-left: 1px solid #000;
               border-right: 1px solid #000;
               margin: 0 auto;}

div#top {width: 100%;
         height: 100px;}

div#menu {width: 100%;
          height: 40px;
          border-top: 1px solid #000;
          border-bottom: 1px solid #000;}

div#text {width: 599px;
          height: 500px;  /* dzēst */
          float: left;}

div#add {width: 200px;
         height: 500px;  /* dzēst */
         border-left: 1px solid #000;
		 float: right;}

div#footer {width: 100%;
            height: 20px;
            border-top: 1px solid #000;
			clear: both;}

Svētais Grāls

Sarežģītākais no visiem šablontipa izkārtojumiem. Šiet, visviežāk sastopamais izkārtojums. Reizēm tiem papildināts arī ar papildus izvēlni augšējā joslā. Sastopams pilnīgi visur, tomēr visplašāk ziņu portālos, interneta veikalos, sociālo tīklu lapās - mājas lapās, kur ir milzīgs informācijas apjoms un liels daudzums reklāmu.

HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Lorem Ipsum</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div id="top"> </div>
      <div id="text"> </div>
      <div id="menu"> </div>
      <div id="add"> </div>
      <div id="footer"> </div>
    </div>
  </body>
</html>
CSS 
* {margin: 0;
   padding: 0;}

div#container {width: 800px;
               border-left: 1px solid #000;
               border-right: 1px solid #000;
               margin: 0 auto;}

div#top {width: 100%;
         height: 100px;
         border-bottom: 1px solid #000;}

div#text {width: 400px;
          height: 500px;  /* dzēst */
		  float: left;
          position: relative;
            left: 200px;}

div#menu {width: 199px;
          height: 500px;  /* dzēst */
          border-right: 1px solid #000;
          float: left;
          position: relative;
            right: 400px;}

div#add {width: 199px;
         height: 500px;  /* dzēst */
         border-left: 1px solid #000;
		 float: right;}

div#footer {width: 100%;
            height: 20px;
            border-top: 1px solid #000;
			clear: both;}

Izkārtojuma nosacījumi

Protams, neviens no šiem izkārtojumiem nav ideāls. Tiem ir savi trūkumi, it īpaši "Svētā Grāla" izkārtojumam. Konkrēti iepriekš minētajam izkārtojumam irkādi 3 paveidi, tomēr pilnīgi visiem izkārtojumiem ieteicams saglabāt pāris nosacījumus:

  • svarīga ir secība: virsraksts, izvēlne, teksts, papildus lietas un pašās beigās kājene; tas saistīts ar tādu lietu kā SEO,
  • pēc iespējas mazāka "spēlēšanās" ar margin un padding lielumiem, jo interneta pārlūki Internet Explorer ļoti bieži rada nepatikšanas, izmantojot šos lielumus; tādu parametru kā position lietot tikai gadījumos, kad nav citu iespēju, jo lielākajā daļā izkārtojumu bez tā var iztikt,
  • labāk par daudz nekā par maz - veidojiet "divus" tā, kā nepieciešams, nevajag baidīties izveidot veselu "divu" mudžekli, lielākā daļa izkārtojumu sastāv no vairākiem desmitiem sektoru, lai veiksmīgi noorganizētu visu mājas lapu un tās izkārtojumu,
  • vienmēr beigās pievienojiet kājeni, pat tad, kad tā nav vajadzīga; kājenes galvenais uzdevums ir noslēgt lapu un novērst jebkādu nevēlamu sektoru peldēšanu, tikai pēc tam šis sektors pilda informatīvu funkciju; varat kājēni izveidot ar augstumu "0".