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.
Pats vienkāršākais izkārtojums. Bieži sastopams dažādos blogos, kur nav daudz informācijas.
<!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;}
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).
<!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;}
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.
<!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;}
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.
<!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;}
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: