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

Izvēlnes izveidošana

Ja runa ir pa vienkāršām izvēlnēm, tad ir divas izvēlnes - horizonkālā (mūsu gadījumā) un vērtikālā. Vertikālās izvēlnes veidot ir visvienkāršāk, kaut pamatprincipi abām ir vienādi. Horizontālās izvēlnes ir nedaudz ķēpīgākas, tieši tāpēc metīšu jūs pa taisno tajos "dziļākajos ūdeņos", lai interesantāk! Ja mācēsiet horizontālo, mācēsiet arī vertikālo variantu izveidot.

Horizontālā izvēlne

Atgriežamies pie mūsu koda. HTML daļu mēs jau uzrakstījām. papildināsim to ar hipersaitēm, jo izvēlnē kā nekā vajadzētu būt aktīvajām daļām, ar kuru palīdzību iespējams ceļot no lapas uz lapu. Protams, mērķi mēs vēl nezinām, tādēļ atcerēsimies par restīti:

HTML
...
			<div id="menu">
				<ul>
					<li>
						<a href="#">Galvenā lapa</a>
					</li>
					<li>
						<a href="#">Fotogalerija</a>
					</li>
					<li>
						<a href="#">Kontaktinformācija</a>
					</li>
					<li>
						<a href="#">Kaut kāda cita sadaļa</a>
					</li>
				</ul>
			</div>
...

Tas arī patiesībā būs viss, ko mēs HTML daļā darīsim! Pārējais viss notiks CSS! Tieši pie izvēlnes veidošans kardināli var novērot, ko ir iespējams sasniegt ar CSS valodas palīdzību.

Pirmais, no kā mums vajadzētu tik vaļā, ir tie riņķīši saraksta elementu sākumā. Tie mums absolūti nebūs nepieciešami.

CSS
/* ... */
#menu ul
{
 list-style-type: none;
}
/*... */

Nedaudz CSS sintakses.
CSS valodā var nenorādīt HTML elementu, kam piedēvēta attiecīgā klase vai identifikātors. Klašu gadījumā tas sniedz iespēju piešķirt vienu īpašību kopu vairākiem dažādiem elementiem neuztraucoties, vai katrs no šiem elementiem ir atrakstīts CSS valodā. ID gadījumā, protams, tas pats, bet tā kā ID var atkārtoties tikai vienu reizi katrā lapā, bieži tie ir unikāli arī visas mājas lapas ietvaros, tādēļ to var uzskatīt arī par saīsinātu pierakstu.
Otra īpatnība ir hierarhiskā kārtība. CSS valodā ne vienmēr nepieciešams norādīt klases vai identifikātorus visiem elementiem. Tos iespējams "atrast" un atpazīt arī tad, ja tie ir pietiekami unikāli kā cita objekta (piemēram, "diva") ietvaros. Tieši mūsu gadījums - "divā" div#menu atradīsies tikai viens vienīgs saraksts. Patiesībā šajā "divā" nekas cits bez šī saraksta arī neatradīsies! Šī iemesla dēļ mēs varam īpašības norādīt (lasīt kā CSS kodā) "elementos ar ID 'menu' esošajiem ul elementiem piešķirt īpašības ...". Lai arī cik dziļu hierarhiju īpašību piešķiršanā neveidotu, vienmēr saglabājas viena struktūra:

tags#id    /* atstarpe */ tags#id     { īpašība : vērtība ; }
tags.klase /* atstarpe */ tags.klase  { īpašība : vērtība ; }

Saliekot to visu, ko mēs par CSS sintaksi jau zinām, sanāk tā, ka īpašības var pierakstīt vājprātīgākajā mudžeklī! Galvenais - spēt tam visam izsekot līdzi. Neliels piemērs ārpus konteksta, lai jūs saprastu, cik traģisks patiesība var izveidoties CSS pieraksts:

/* ... */
#container #subContainer div#menu ul li ul li a:hover
{
 background: url('design/listSubmarkerActive.jpg') no-repeat;
}
/*... */

Patiesībā, šis ir izraksts no šīs pašas (apmācības) mājas lapas CSS faila! Rindiņa briesmīga, bet doma vienkārša:
"elementā ar id 'container', kurā atrodas elements ar id 'subContainer', kurā ir "divs" ar id 'menu', kur iekšā ir neorganizēts saraksts, kura saraksta elements ir vēl viens saraksts, kura elementi acīm redzot ir hipersaites, kurām kā aktīvā īpašība ':hover' ir piešķirta ... attēla maiņa brīdī, kad ar kursoru uzvirzās tam virsū"!
Spējāt izsekot līdzi? Kaut kas stipri līdzīgs tūlīt sāks veidoties arī mājas lapā, kas tiek veidota pēc šīs apmācības.

Turpinot veidot mūsu izvēlni, nākošais, kas vajadzētu izdarīt, ir izvietot sarakstu horizontāli. Jau pazīstama lieta: uzspiestais tips un "peldināšana":

/* ... */
#menu ul {list-style-type: none;}

#menu ul li
{
 display: block;  /* pārvēršam visus saraksta elementus brutāli par blokiem... */
 float: left;     /* ... lai varētu veikt peldināšanu pie kreisās malas. */
}
/*... */

Šajā vietā jāizdara kāda izvēle: vai izvēlnes pogas visas būs viena platuma vai arī pogas platumu noteiks izvēlnes pogas teksta platums (tā teikt, automātiski). Mēs pieturēsimies pie otrā varianta, bet ja tomēr kādu reizi vēlaties statisku platumu visām pogām, tad attiecīgi li elementiem jānorāda platums (īpašība width). Tajā brīdī, kad pogas teksts būs garāks par pašu pogu, tas "lauzīsies" un pārleks jaunā rindiņā. Šāda ideja ir ļoti laba vertikālām izvēlnēm (kā, piemēram, šajā lapā).

Tālāk mēs vairs neaiztiksim ne ul, ne li elementus. Tālāk darbs notiks ar hipersaitēm. Mēs hipersaitēm izveidojām fona attēlus, tomēr fonu vieglāk un ērtāk ir piešķirt bloka elementiem. Hipersaite pēc noklusējuma bija inline elements, tādēļ arī šo elementu uzspiesti pārvērtīsim par bloka elementu. Papildus pakoriģēsim dažādus mums jau zināmas lietas:

/* ... */
#menu ul {list-style-type: none;}

#menu ul li
{
 display: block;
 float: left;
}

#menu ul li a
{
 display: block;
 font-size: 14px;                /* izvēlnes tekstam savu izmēru */
 text-decoration: none;          /* noņemam pasvītrojumu, kas hipersaitēm ir pēc noklusējuma */
 font-weight: bold;              /* treknraksts */
 border-right: 1px solid black;  /* katra izvēlne tiek atdalīta ar melnu līniju, labajā pusē */
}
/*... */

Ja mēs tagad apskatītu mūs lapu, konstatētu pāris lietas, kas vajadzētu izkoriģēt:

  • visas izvēlnes ir tādas kā salipušas kopā,
  • vajadzētu dabūt arī vidū (pa vertikāli) visu izvēlņu tekstus,
  • un pēdējā lieta - kaut kas nav ar to atdalītāja līnīju!

Pirms mēs tam visma ķeraies klāt, mēģināsim saprast, kas mums tur tagad ir uztaisīts! Tam izmantosim Mozilla Firefox plug-inu Web Developer --> Information --> Display Element information (jeb vienkārši Ctrl+Shift+F). Uzklikšķināsim uz vienas no izvēlnes pogām:

Mūs interesē, pirmkārt jau, šīs pogas (hipersaites) augstums (height). Mēs esam norādījuši fonta izmēru 14px, bet tas izveidoja šīs hipersaites augstumu 18px. Kopējais izvēlnes joslas augstums ir 24px. Uhh... atkal matemātika - kaut kā jākompensē šī 6px starpība!

Visas iepriekš uzskatītās problēmas var kompensēt ar vienu paņēmienu: pielietojot īpašību padding. Tas varētu izskatīties šādi:

/* ... */
#menu ul li a
{
 display: block;
 font-size: 14px;
 text-decoration: none;
 border-right: 1px solid black;
 padding: 3px 40px;               /* atceramies saīsināto pierakstu! */
}
/*... */

Atstarpe no augšas (3px) + atstarpe no apakšas (arī 3px) + hipersaites augstums (18px) = 24px! Tieši tas, kas mums vajadzīgs! Protams, šis bija vienkāršākais paņēmiens, kā to izdarīt. Improvizācijas varianti var būt visdažādākie. Tik pat labi mēs varējām augstumu hipersaitei uzstādīt 24px (tas tagad ir bloka elements, mēs tā drīkstam darīt), tomēr tad mums būtu jācīnās ar dabūšanu centrā (atcerieties, vertical-align īpašība strādā tikai tabulas šūnām). Varam arī šos paņēmienus kombinēt.

Vēl tikai pāris sīkumu trūkst: Vajadzētu burtus dabūt melnā krāsā, kā arī vajadzētu uzlikt īpašību hipersaitei, kas ļauj nomainīt fona attēlu, kad uz tās uzbrauc ar kursoru.

/* ... */
#menu ul li a
{
 display: block;
 font-size: 14px;
 text-decoration: none;
 color: black;                     /* teksts melnā krāsā */
 border-right: 1px solid black;
 padding: 3px 40px;
}

#menu ul li a:hover
{
 background: url('design/active.jpg') repeat-x;  /* hover īpašība */
 color: #333;   /* joka pēc nomainīsim arī krāsu uz trejdeviņu skaitli, laimīgi */
}
/*... */

Pat ja grūti pamanīt, ka mainās krāsa burtiem brīdī, kad ar kursoru uzbrauc uz hipersaites, ir jūtams nedaudz padziļinošs efekts. Mazliet vairāk piesaista uzmanību... un tas taču ir tieši tas, ko mēs velamies panākt - piesaistīt mājas lapas vērotāja uzmanību!

Nu ko - izvēlne izveidota! Nebija nemaz tik traki! Dodamies tālāk. Kas tālāk? Teksti, ļoti daudz teksta! Bet pirms tam atskatāmies uz padarīto:

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 id="top">
      
      </div>
      <div id="menu">
        <ul>
          <li> <a href="#">Galvenā lapa</a> </li>
          <li> <a href="#">Fotogalerija</a> </li>
          <li> <a href="#">Kontaktinformācija</a> 
          <li> <a href="#">Kaut kāda cita sadaļa</a> </li>
        </ul>
      </div>
      <div id="text">
      
      </div>
      <div id="add">
      
      </div>
      <div id="footer">
      
      </div>
    </div>
  </body>
</html>
CSS
* {margin: 0; padding: 0;}

body {background: url('design/back.jpg') repeat;}

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

div#top
{
 width: 100%;
 height: 146px;
 background-image: url('design/top.jpg');
}

div#menu
{
 width: 100%;
 height: 24px;
 border-width: 1px 0;
 border-style: solid;
 border-color: black;
 background: url('design/unactive.jpg') repeat-x;
}

div#text
{
 width: 720px;
 height: 500px;
 float: left;
}

div#add
{
 width: 179px;
 height: 500px;
 border-left: 1px solid black;
 float: right;
}

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

#menu ul {list-style-type: none;}

#menu ul li {display: block; float: left;}

#menu ul li a
{
 display: block;
 font-size: 14px;
 text-decoration: none;
 font-weight: bold;
 color: black;
 border-right: 1px solid black;
 padding: 3px 40px;
}


#menu ul li a:hover {background: url('design/active.jpg') repeat-x; color: #333;}

Šinī brīdī ļoti uzskatāmi var redzēt, ka koda kārtošana ir ļoti svarīga! Iedomājieties, kāds kods izskatītos, ja mēs to nekārtotu un necenstos pierakstīt grīti? Būtu pilnīgs haoss un nebūtu oespējams neko atrast! Radiniet sevi pie normālassintakses, pie pareiza vai jums ērta pieraksta. Vēl jo vairāk - ja ar laiku sāksiet sadarboties ar citiem cilvēkiem mājas lapu veidošanā, varat kādu dienu "norauties pa mizu" par nekārtīgu pierakstu! Radiniet sevi pie kārtības, jo šeit vēl ir maz koda. Parasti mājas lapu kodi mēdz izstiepties vairāku simtu vai pat tukstošu rindiņu garumā.