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

Satura veidošana

Tātad, mēs esam tikuši tik tālu, ka esam izveidojuši mājas lapas karkasu (visaptverošu rāmi, attēlā melnā krāsā atzīmēts ar numuru "1").

Kodā tas izskatītos šādi:

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>Pirmā mājas lapa</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>
	</body>
</html>
CSS
* {margin: 0; padding: 0;}

div#container
{
 width: 900px;
 height: 500px;
 border: 1px solid black;
 background-color: #F5F5F5;
 margin: 0 auto;
}

Kā jau vizuāli redzams, viss pārējais saturs atrodas iekšā "divā" <div id="container">, kas nozīmē, ka arī kodā tam visam jāatrodas starp šī "diva" atverošo un aizverošo tagu. Atceroties arī secību, kā mājas lapa tiek rakstīta (no kreisās uz labo, no augšas uz leju), pievienojam nākamo sektoru - sektoru numur "2", virsraksta daļu.
Turpmāk, lai saīsinātu piemēru kodus, es piemēros nerakstīšu lietas, kas atkārtojas. Tā vietā es tās aizstāšu ar daudzpunktēm, pievienojot atkārtotā koda vienu līdz divas rindiņas pirms un pēc jaunā koda!

HTML
...
	<body>
		<div id="container">
			<div id="top">
			
			</div>
		</div>
	</body>
...
CSS
* {margin: 0; padding: 0;}

div#container
{
 width: 900px;
 /* izdzēsts height */
 border: 1px solid black;
 background-color: #F5F5F5;
 margin: 0 auto;
}

div#top
{
 width: 100%;
 height: 200px;
 border-bottom: 1px solid #2CAAFF;
 background-color: #E1F3FF;
}

Pāris lietas, ko vēlos atzīmēt:

  • Kā redzam HTML daļā, ir vairāki atvērti "dvi" pēc kārtas, ir loģiski tos atšķirt pēc identifikatoriem, tomēr, kad tie tiek aizvērti, netiek nodādītas nekādas identifikācijas pazīmes. Loģisks varētu šķist jautājums: "Kā zināt, kuru aizver un kuru ne?" Ievērojiet: HTML valodā vienādo tagu aizvēršana notiek rindas kārtībā - pirmais tiks aizvērts tas, kas ticis atvērts pēdējais, otrais tiks aizvērts pirmspēdējais atvērtas u.t.t. Tieši tādēļ arī HTML valodā parasti tiek veidots atkāpju pieraksta princips: katrs no jauna atvērtais tags veido vienu pakāpi lielāku atkāpi no kreisās malas tieši tā pat kā šī taga aizverošā daļa. Viegli izsekot, kuram atverošajam tagam pieder kurš aizverošais tags, līdz ar to vieglāk konstatēt dažādas kļūdas. To sauc par kārtīgu pierakstu!
  • Otra lieta attiecas uz CSS daļu. Esmu izdzēsis augstuma pazīmi galvenajam "divam" div#container. Atceroties, ko iepriekš teicu, norādīt šim divam augstumu vairs nevajag, tas sāks piekļauties saturam. Pagaidām varat pasekot līdzi melnajai līnijai, kas ir saglabāta kā šī "diva" īpašība, lai pārliecinātos, ka tas tur vēl ir! Ar laiku noņemšu arī melno līniju.
  • Kas attiecas uz jaunizveidoto "divu" div#top, tam esmu norādījis tikai apakšējo malu zilā krāsā. Tas ir ar nodomu: ja jūs pamēģinātu uzlikt maliņu visapkārt šim "divam" un uzmanīgi ieskatītos, saprastu, ka jaunais "divs" sāk līst pāri malām galvenajam "divam". Tas ir saistīts ar tā saukto rāmja modeli (tulk. uz angļu val. "box model"), ko jau aprakstīju sadaļā par margin, padding un border elemetu problēmām. Arī šī līnija ir tikai pagaidu variants, lai varētu pasekot līdzi tam, kā izvietojas "divu" elementi.
  • Pēdējā lieta: izvairāmies no rēķināšanas tur, kur to varam! Jaunā "diva" platums norādīts procentos pasakot, ka tā platums ir ... simtprocentīgs! Tas nozīmē, ka šīs divs mēģinās izstiepties tik plats, cik vien varēs. Protams, tā platumu ierobežo galvenais "divs" div#container, kura platums ir norādīts statisks un nemainīgs.

Līdzīgi izdarām ar nākamo "divu" rindas kārtībā - izvēlves sektors, numur "3"!

HTML
...
	<body>
		<div id="container">
			<div id="top">
			
			</div>
			<div id="menu">
			
			</div>
		</div>
	</body>
...
CSS
* {margin: 0; padding: 0;}

div#container{ /* ... */ }

div#top { /* ... */ }

div#menu
{
 width: 100%;
 height: 30px;
 border-bottom: 1px solid #FF2D2E;
 background-color: #FFEDED;
}

Satura peldināšana (floating).

Kā jau apakšvirsraksts pasaka priekšā, ar nākamo "divu" pievienošanu vis nebūs tik vienkārši. Būs jadara kaut kas nedaudz savādāks. Pirms to darām, ieteiktu izlasīt un saprast lietas, kas attiecas uz elementu veidiem.

Satura peldināšana (tulk. uz angļu val. "floating") ir, iespējams, viena no ķēpīgākajām, bet tajā pašā laikā svarīgākajām un visvairāk izmantotajām īpašīmām pie dizainu veidošanas. Tādēļ šeit esiet īpaši uzmanīgi!

Sāksim ar to, ka vienkārši izveidosim kārtējo bloku ar vēlamajiem izmēriem un īpašībām:

HTML
...
	<body>
		<div id="container">
			<div id="top">
			
			</div>
			<div id="menu">
			
			</div>
			<div id="text">
			
			</div>
		</div>
	</body>
...
CSS
* {margin: 0; padding: 0;}

div#container { width: 900px;
                /* ... */ }
div#top { /* ... */ }
div#menu { /* ... */ }

div#text
{
 width: 80%;
 height: 500px;
 border: 1px solid #57D557;
 background-color: #E8F9E7;
}

Protams, kārtējo reizi cenšamies izvairīties no liekas rēķināšanas un lietojam procentus, jo proporcijas šeit nav būtisks faktors.

Pagaidām šis tekstam paredzētais sektors atrodas tur, kur mums arī vajag, tomēr, pirms turpinu un lieku klāt nākamo sektoru, nedaudz parēķināsim. Atceroties to, ka galvenā "diva" div#container platums ir 900px kā arī to, ka katra elementa izmēros tiek ieskaitīts arī rāmītis, sanāk, ka "diva" div#text platums ir 80% no 900px (80% no 900px = 720px) + 2px, kas ir rāmītis katrā pusē! 722px! Pieņemsim, ka blakus vēlamies izveidot otru sektoru ar platumu 20%. 20% no 900px ir 180px. Ja šim sektoram uzliksim rāmīti, sanāks 182px. Bet te rodas problēma - ja saskaitām abu sektoru platumus (722px + 182px), mēs iegūstam 904px! Par daudz, neietilps galvenajā "divā". Šī iemesla dēļ no šī brīža atbrīvosimies no visiem nevajadzīgajiem rāmīšiem, lai vēlāk nerastos liekas problēmas:

CSS
* {margin: 0; padding: 0;}

div#container
{
 width: 900px;
 border-width: 0 1px;  /* vieta, kur atstāsim rāmīti */
 border-style: solid;  /* un tikai gar sāniem, lai saturs neizskatās izplūdis */
 border-color: black;
 background-color: #F5F5F5;
 margin: 0 auto;
}

div#top
{
 width: 100%;
 height: 200px;
 background-color: #E1F3FF;
}

div#menu
{
 width: 100%;
 height: 30px;
 border-width: 1px 0;  /* arī šeit atstāsim rāmīti */
 border-style: solid;  /* un tikai gar augšu un apakšu */
 border-color: black;  /* gluži kā mūsu paraugā */
 background-color: #FFEDED;
}

div#text
{
 width: 80%;
 height: 500px;
 background-color: #E8F9E7;
}

Pagaidām atstājam fonu krāsas kā indikātorus, lai varētu atpazīt, kurš sektors ir kurš. Un nu liekam klāt nākamo sektoru, to, kas būs pa labi ,numurs "5" dzeltenā krāsā:

HTML
...
	<body>
		<div id="container">
			<div id="top">
			
			</div>
			<div id="menu">
			
			</div>
			<div id="text">
			
			</div>
			<div id="add">
			
			</div>
		</div>
	</body>
...
CSS
* {margin: 0; padding: 0;}

div#container { /* ... */ }
div#top  { /* ... */ }
div#menu { /* ... */ }
div#text
{
 width: 720px;                   /* tiem, kam labāk patīk strādāt ar skaitļiem */
 /* ... */
 float: left;                    /* bloka "peldināšana" */
}

div#add
{
 width: 179px;                   /* atcerieties, kas notika ar rāmīti? */
 border-left: 1px solid black;   /* ja mēs pieliekam rāmīti vienā sānā, */
 height: 500px;                  /* tad arī platumā mums jāatrēķina tas 1px nost! */
 background-color: #FFF9DF;
 float: right;                   /* bloka "peldināšana" */
}

Es ceru, ka par "divu" platumiem kļuva skaidrs, kur rodas nesaskaņas, un kāpēc dažreiz kaut kas nelien tur, kur tam vajadzētu ielīst. Bet nu par būtiskāko - bloku "peldināšana" jeb "pludināšana"... sauciet, kā vēlaties. Te ir jāpiefiksē pāris svarīgas lietas:

  • "peldinot" kādu bloka objektu, to vairs nerespektēs "nepeldinātie" bloki, kas būs pirms vai sekos pēc šī bloka, t.i. tiem būs tendence nospiest lejā, palīst zem vai uzlīst virsū šiem "peldinātajiem" blokiem,
  • "peldināti" bloki savā starpā respektē viens otru un nelien virsū vai zem citiem "peldinātiem" blokiem,
  • "peldināt" bloku var tikai galēji pie labās vai galēji pie kreisās malas, t.i. bloks, kas ticis "peldināts" pēdējais, nostāsies vistuvāk labajai vai kreisajai malai.

Pagaidām viss izskatās labi... vai vismaz gandrīz labi. Visticamākais varētu būt radusies sekojoša situācija:

Problēmas rada tas, ka "peldošie" bloki ir pēdējais mājas lapas saturs. Centieties izvairīties izmantot "peldošus" objektus kā jebkādu pēdējo saturu jebkurā vietā, jo tas vienmēr novedīs pie dinamiskā izmēra pielāgošanās nelabvēlīgām sekām, t.i. šo objektu apkļujošie elementi sarausies mazāki nekā vajadzētu. Ir divi risinājumi šādām situācijām:

  1. uzstādīt statiskus augstuma izmērus peldošajiem "diviem" un to aptverošajiem "diviem"; šajā situācijā šis risinājums īsti neder, jo mums būs jāļauj saturam stiepties garmā, pievienojot mājas lapai saturu,
  2. izveidot vēl vienu bloka tipa "nepeldošu" elementu pēc "peldošajiem" blokiem, lai apturētu patvaļīgu uzvedību.

Ir īpašība, kas pasak, ka konkrētajam objektam nedrīkst nekas "peldēt" virsū vai zem tā, tāpēc pievienosim pēdējo no visiem galvenajiem "diviem", t.i. kājeni ar šādu īpašibu. Tas ir bloks numur "6" zīmējumā, kas ir lapas pašā augšpusē.

HTML
...
	<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>
...
CSS
* {margin: 0; padding: 0;}

div#container { /* ... */ }
div#top  { /* ... */ }
div#menu { /* ... */ }
div#text { /* ... */ }
div#add { /* ... */ }

div#footer
{
 width: 100%;
 height: 20px;
 border-top: 1px solid black;
 background-color: #F3F3F3;
 clear: both;                  /* šī īpašība ierobežo peldošos objektus */
                               /* neļaujot tiem "piepeldēt" no jebkuras puses šim objektam */
}

Daži scenārīji, ja mēs būtu rīkojušies savādāk...

Lai arī tagad karkass beidzot ir gatavs, ieteiktu nedaudz "paspēlēties" ar float īpašību, lai pilnībā saprastu, kā tā darbojas. Šī, iespējams, ir vis piņķerīgākā lieta visas mājas lapas izveidā - saprast "peldināšanu".

Papildus par to, kādi mājas lapu izkārtojumi ir tie tipiskākie un kā tādus izveidot, varat palasīt papildus sadaļā pa mājas lapu izkārtojumiem. Visi šie izkārtojumi balstās uz līdzīgiem veidošanas principiem, visur ir viena un tā pati problēma ar "divu" peldināšanu, izvietošanu, izmēriem un pārējām lietām, kuras minēju jau šeit.