›_ ebskola.lv
← 2.1 2.3 →

2.2 Izkārtojuma kontrole un "Box Model"

Stundas uzdevums: Pārveidot haotisku saturu sakārtotā dizainā, kontrolējot elementu izmērus, atkāpes un apmales atbilstoši "Box Model" principiem.

1.1.1. Secina par struktūru un ergonomiku; 2.4.1. Strukturē teksta dokumentu atbilstoši prasībām.
SR 2.4.9. Satura sinhronizācija starp dokumentiem

70 min darba sadalījums: 1. uzdevums (~20 min) - atjauno teorijas piemēru vai minimālo prototipu; 2. uzdevums (~25 min) - pielieto to galvenajā uzdevumā; 3. uzdevums (~25 min) - pārbaudi rezultātu, izlabo kļūdas un tikai beigās pieraksti vienu secinājumu. Papildus/4. līmeņa uzdevums ir paredzēts tikai tad, ja pamatdarbs ir pabeigts.

Pirms sāc: izmanto iepriekš apgūto un šīs lapas teorijas/koda piemērus. Ja vajadzīga jauna komanda vai rīks, vispirms atrodi tās paraugu teorijas sadaļā.

Teorija: Kas ir Box Model?

Katrs HTML elements pārlūka acīs ir taisnstūra kaste. Box Model sastāv no četrām daļām:

Pareiza šo īpašību lietošana nodrošina spēles saskarnes (UI) skaidrību un lietojamību. 

/* Box Model: padding ir iekšpusē, margin ārpusē */
.kaste {
  width: 200px;
  padding: 16px;       /* iekšējā atstarpe */
  border: 2px solid #948979;
  margin: 20px auto;   /* ārējā atstarpe + centrēšana */
}
/* Flex izkārtojums */
.menu { display: flex; gap: 12px; justify-content: center; }

Praktiskie uzdevumi

1. uzdevums - Iesildies ar gatavu piemēru

Šis ir īss iesildīšanās uzdevums. Nokopē sagatavi, ielīmē to pareizajā koda vietā un palaid. Šeit pietiek droši izmēģināt tēmu 2.2 Izkārtojuma kontrole un "Box Model"; detalizētu izpratni veidosi nākamajos uzdevumos.

Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.

/* Box Model: padding ir iekšpusē, margin ārpusē */
.kaste {
  width: 200px;
  padding: 16px;       /* iekšējā atstarpe */
  border: 2px solid #948979;
  margin: 20px auto;   /* ārējā atstarpe + centrēšana */
}
/* Flex izkārtojums */
.menu { display: flex; gap: 12px; justify-content: center; }
  1. Atver darba failu vai rīku. CSS fragmentu ievieto style.css faila beigās.
  2. Nokopē visu piemēra bloku no šī uzdevuma un ielīmē to norādītajā vietā.
  3. Palaid kodu tieši tādu, kāds tas ir, un pārliecinies, ka parādās rezultāts, izvade vai vismaz nav kļūdas paziņojuma.
  4. Atrodi vienu drošu vietu, ko drīkst mainīt: tekstu, skaitli, krāsu, mainīgā vērtību vai testa ierakstu.
  5. Maini tikai šo vienu vērtību un palaid kodu vēlreiz.
  6. Salīdzini rezultātu pirms un pēc izmaiņas. Ja parādās kļūda, atcel pēdējo izmaiņu un palaid vēlreiz.
  7. Turpini pie 2. uzdevuma tikai tad, kad šis mazais piemērs darbojas.

2. uzdevums - Ievieto algoritmu projektā

Pievieno šīs stundas paņēmienu kā nelielu, lietotājam redzamu projekta daļu.

  1. Atver style.css un pievieno klasi .speles-laukums ar width: 400px; height: 300px; background-color: #393E46;.
  2. Pievieno tai padding: 16px; border: 3px solid #FFB142; border-radius: 8px;.
  3. Pievieno margin: 20px auto; - tas centrē laukumu horizontāli.
  4. Atver index.html un pievieno atribūtu class="speles-laukums" pie galvenā spēles <div>.
  5. Saglabā un atver pārlūkā - pārbaudi, vai spēles laukums ir centrēts un apmalīts.
  6. Atver DevTools → "Elements" → atlasi spēles laukumu → apskati "Box Model" paneli - pārbaudi, vai padding, border un margin ir redzami.
  7. Salabo, ja laukums izskatās nepareizi - pārbaudi, vai klase ir pareizi uzrakstīta HTML failā.
  8. Veic git commit -m "Style game container with box model".

3. uzdevums - Testē kodu un izdari secinājumu

Pārbaudi, vai algoritms darbojas paredzami vairākās situācijās.

  1. Atver index.html pārlūkā un pārbaudi, ka spēles laukums ir redzams ar apmali un iekšējo atkāpi.
  2. Spied F12 → "Elements" → atlasi spēles laukumu → apskati "Box Model" diagrammu labajā panelī.
  3. Nomaini padding vērtību uz 8px - pārbaudi, vai laukuma iekšējā telpa mainās.
  4. Pievieno box-sizing: border-box; spēles laukuma noteikumam - pārbaudi, vai kopējais platums paliek nemainīgs.
  5. Salabo, ja elements "iziet" ārpus ekrāna - pievieno max-width: 100%;.
  6. Pielāgo vismaz vienu margin vai padding vērtību tā, lai viss izskatās sabalansēti.
  7. Pieraksti vienu secinājumu: kāpēc box-sizing: border-box ir ērtāks nekā bez tā.

Papildu uzdevums - Pievieno mazu funkciju

Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.

  1. Izveido CSS Flexbox izkārtojumu: pievieno .menu-pogas { display: flex; gap: 12px; justify-content: center; }.
  2. Atver index.html un apliec 2-3 pogas ar <div class="menu-pogas">.
  3. Atver pārlūkā - pārbaudi, vai pogas ir novietotas blakus viena otrai ar vienādu atstarpi.
  4. Nomaini justify-content uz flex-start - pārbaudi, ko tas maina.
  5. Atjauno uz center un pievieno flex-wrap: wrap;, lai pogas pielāgojas šaurākiem ekrāniem.
  6. Veic git commit -m "Add flex layout for menu buttons".
  7. Palielini un samazini pārlūka logu - pārbaudi, vai pogas pārkārtojas pareizi.

Biežākās kļūdas (un kā tās labot):

Koda piemērs (Box Model rīki)

#game-container {
    width: 400px;
    height: 300px;
    padding: 10px;    /* Iekšpusē */
    border: 5px solid #333;
    margin: 20px auto; /* Ārpusē, centrēts */
    background-color: #95a5a6;
    box-sizing: border-box; /* Ļoti svarīgi! */
}
Spēles laukuma prototips (demonstrācija)
⬅ Iepriekšējā stunda Nākamā stunda ➡