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

Dizaina griezšana

Šī daļa parasti notiek vienlaikus ar karkasa veidošanu, tomēr, tā kā šī ir ļoti vienkārša mājas lapa, to var darīt arī pēc tam. Šeit darbs vairāk būs nevis ar kodu vai kodēšanu, bet gan ar attēlu apstrādi. Tādēļ droši varam vērt vaļā jūsu iecienītāko grafikas apstrādes programmu (jā, arī Paint's derēs) un sāk darbu ar sekojošo attēlu:

Pirmkārt, jākonstatē tas, kur šajā lapā ar attēli. Šajā dizainā to nav daudz un tie ir labi saskatāmi:

  • virsraksta attēls, vislielākais attēls šajā lapā,
  • neaktīvās izvēlnes attēls - poga izvēlnes joslā; it kā jau nekas īpašs, tāda krāsu pāreja vien ir, bet arī tādi skaitās attēli,
  • aktīvās izvēlnes attēls - poga izvēlnes joslā, kad uz tās uzbrauc ar peles kursoru; tas pats stāsts, kas augšā,
  • fona attēls - diagonāli pelēki svītorotais fons; šeit būs ļoti interesanti.

Sāksim ar pirmo attēlu - titulattēlu pašā augšā. Tur mēs īsti neko daudz mainīt nevaram, tas ir viengabalains attēls, un to būs jāsaglabā tādu, kāds tas ir. Protams, mēs redzam, ka tur ir arī teksts, bet to mums nevajadzēs grabāt kā attēlu, to mēs varēsim novietot tur arī kā standarta tekstu. Centieties izveidot visu pēc iespējas vieglāk labojamu: ja tas ir teksts, tad mēģiniet to arī izveidot kā tekstu.
Bet neauzmirsīsim arī par attēla izmēru! Tas, ko es jums piedāvāju kā mājas lapas paraugu, ir gabarītos mazāks sattēls, nekā pati mājas lapa! Šoreiz mēs nevaram tā vienkārši izgriezt attēlu un ielikt to mājas lapā. Ar to es vēlējos pateikt, ka, veidojot mājas lapu, jādomā vairāki soļi uz priekšu. Kad tiek izstrādāts mājas lapas uzmetums uz datora, to ieteicams veidot izmēru attiecībās 1:1, lai pēc tam būtu vieglāk "sagriezt" dizainu.
Atceroties, ka mājas lapas augšējās daļas izmērs ir 900x200px, tad arī attēlu vajadzētu izveidot tik pat lielu, bet man attēlu izdevās izveidot šādu:

Man augstums sanāca nevis 200px, bet 146px! Tādēļ arī vajag mājas lapu vispirms uzzīmēt tieši tādu, kādai tai ir jāizskatās, un tikai tad jāsāk tā veidot (kodēt). Šinī gadījumā man ir vieglāk nevis modificēt attēlu līdz vajadzīgajam augstumam, bet gan samazināt paša "diva" augstumu.

Un, protams, šo attēlu tagad vajadzētu arī dabūt mājas lapā. Dizainu parasti veido kā fonu "div" elementiem. Ļoti retos gadījumos šīs bildes tiek ievietoti kā attēli. Tam, protams, ir savas priekšrocības, kuras parādīšu nedaudz vēlāk. Šobrīd ienkārši ieliksim mūsu attēlu augšējā "diva" fonā:

CSS
/* ... */
div#top
{
 width: 100%;
 height: 146px; /* izlabojam augstumu */
 /* izņemam fona krāsu, to mums vairs nevajadzēs */
 background-image: url('design/top.jpg');
}
/* ... */

Tagad vajadzētu atcerēties, kāda tika izveodota failu struktūra mājas lapas failiem. Atcerieties, es savā strukturā izveidoju speciāli mapīti tur pat, kur atradās mans index.html fails. Mapītes nosaukums bija design, un tā bija paredzēta tieši attēliem, kas veidos mājas lapas dizainu, tādēļ arī background-image īpašības atribūtā url (universal resource locator, tulk. no angļu val. "universālais resursu meklētājs") tiek meklēta mapīte "design", kurā atrodas attēls "top.jpg" (kas automātiski nozīmē, ka attēlam arī tur jābūt saglabātam). Tas būtībā ir hipersaišu darbības princips, bet par to nedaudz vēlāk, kad veidosim izvēlni. Šobrīd šo daļu centieties veidot līdzīgu, kāda ir man.
Vēl viens knifs, kas attiecas tieši uz url īpašību: ievērojiet, kādas pēdiņas ir iekavās - vienkāršās nevis dubultās. Tam šoreiz ir nozīme - jebkādas adtreses norādītas CSS valodā jāatzīmē ar vienkāršajām nevis dubultajām pēdiņām.

Ņemam nākamos attēlus - izvēlnes foni. Lai arī mums pagaidām izvēlne nav izveodota, tas mums neliedz izveodot attēlus priekš šīm izvēlnēm. Mums jau ir zināms augstums izvēlnes joslai, tātad, pogas būs tieši tik augstas! Paltums? Nevajadzēs zināt...
Pirmkārt, cenšamies atkal izdabūt tieši to attēlu, ko mums vajag:

Atcerieties, ka melnos rāmīšus veido border īpašība, tādēļ tos mums nevajadzēs. Otrkārt, jau atkal man ir izdevies izveidot paraugu, kur izmēri nesakrīt ar tiem, kurus esmu izvēlējies kodā, tādēļ arī tos būs jāmaina. Pierodiet, ka reti kur būs apaļi skaitļi izmēros, kad tiks griezts mājas lapas dizains, tādēļ ir labi, ja protat veikli saskaitīt un atņemt līdz pat četrciparu skaitļiem galvā.

Tomēr šoreiz ar to viss nebeidzas! Šim attēlam ir kāda īpatnība - atkārtoties pa horizontāli. Ļoti, ļoti bieži mājas lapās atrodami fonu attēli vai dizainu elementi, kam ir tendence kaut kā atkārtoties - pa horiontāli, pa vertikāli vai uz visām pusēm. Te parādās īpašības "background" viena no pozitīvajām iezīmēm dizaina veidošanā - to ir iespējams atkārtot, neveidojot lielus attēlus, bet izveidojot tikai vienu atkārtojamo fragmentu. Tas ir tieši tas, ko es tagad darīšu - izgriezīšu no kopējā attēla fragmentu, kas atkārtojas, t.i. 1px platu josliņu visa attēla augstumā.

Tagad, lai pārbaudītu, vai attēls ir pareizi izveidots, ievietosim to visā izvēlnes joslā kā fonu. Līdzīgi kā ar īpašībām margin, padding un border, arī īpašībai background ir saīsinātais pieraksts. Šādu pierakstu var lietot tad, ka ir minēts vairāk kā viens parametrs.

/* ... */
div#menu
{
 width: 100%;
 height: 24px;  /* izmainām augstumu 30px --> 24px */
 border-width: 1px 0;
 border-style: solid;
 border-color: black;
 background: url('design/unactive.jpg') repeat-x;
 /* fona krāsa tiek aizstāta ar 1x24px lielu fona attēlu, ko nupat izveidojām */
}
/* ... */

Visai joslai vajadzētu iekrāsoties gluži kā vienai lielai pogai. Vienīgais, kas tika izdarīts, t.i. tika pievienota īpašība repeat (tulk. no angļu val. "atkārtot"). Patiesībā jau šī īpašība pēc noklusējuma jau ir uzstādīta tā, lai atkārtotu fonu uz visām pusēm, bet šeit mums ir nepieciešams to atkārtot tikai pa horizontāli (ģeometriski pa X asi).

Fonam ir iespējami četri varianti, kā atkārtot attēlu:

/* ... */
{
 background-repeat: no-repeat;  /* attēls netiek atkārtors, parādās tikai vienu reizi */
 background-repeat: repeat;     /* attēls tiek atkārtorsuz visām pusēm */
 background-repeat: repeat-x;   /* attēls tiek atkārtors tikai pa horizontāli */
 background-repeat: repeat-y;   /* attēls tiek atkārtors tikai pa vertikāli */
}
/* ... */

Tieši tādā pašā veidā kā iepriekš veidojām neaktīvās pogas attēlu, izveidojam aktīvās pogas attēlu. Pašās beigās vajadzētu sanākt diviem 1x24px lieliem attēliem:


Neaktīvā poga

Aktīvā poga

Un nu ķeramies pie pēdējā attēla - fona. Noteikti jau nojaušat, ka tur šī lieta būs stipri, stipli līdzīga, kā darījām iepriekš. Atrast to fragmentiņu, kas atkārtojas. Parasti svītrotiem laukumiem šadi fragmentiņi ir izmēros no 3x3px līdz 7x7px. mūsu gadījuma attēla izmērs ir 5x5px:


Fona attēls, palielināts.
Uzklikšķiniet, lai iegūtu reāla izmēra (5x5px) attēlu.

Tagad šo bildi kā fona attēlu jāieliek body elementā! Tieši tādēļ šis elements arī pastāv: vienmēr jābūt kaut kam, kas apņem visu lapu! Tad nu izmantojot šī elementa sniegtās priekšrocības, izveidosim to par fonu:

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

Patlaban mājas lapas kodam vajadzētu izskatīties šā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 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;}

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

div#container
{
 width: 900px;
 border-width: 0 1px;
 border-style: solid;
 border-color: black;
 background-color: white;
 /* fona krāsa: balta */
 margin: 0 auto;
}

div#top
{
 width: 100%;
 height: 146px;
 background-image: url('design/top.jpg');
 /* background-color: #E1F3FF; */
 /* fona krāsa vairs nebūs vajadzīga */
}

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;
 /* background-color: #E8F9E7; */
 /* fona krāsa vairs nebūs vajadzīga */
 float: left;
}

div#add
{
 width: 179px;
 height: 500px;
 border-left: 1px solid black;
 /* background-color: #FFF9DF; */
 /* fona krāsa vairs nebūs vajadzīga */
 float: right;
}

div#footer
{
 width: 100%;
 height: 20px;
 border-top: 1px solid black;
 background-color: #D8EDCE;
 /* fona krāsa: gaiši zaļa, kā paraugā */
 clear: both;
}

Mājas lapai vajadzētu saturēt sekojošus failus:

Un pašai mājas lapai vajadzētu izskatīties šādi: