Na tej strani izdelamo domačo stran vzorčnega Bootstrap spletišča. Datoteka index.html je običajno vstopna stran spletišča, zato mora uporabniku hitro predstaviti namen, najpomembnejšo vsebino in osnovne možnosti navigacije. Stran temelji na ogrodju Bootstrap 5, uporablja jasno strukturo HTML dokumenta, odzivno navigacijo, uvodni odsek, vrtiljak, vsebinske kartice, mnenja uporabnikov in nogo strani.
Datoteko index.html izdelamo postopno, od osnovnega ogrodja dokumenta do posameznih vsebinskih odsekov. Tak način dela omogoča preglednejše razumevanje strukture strani in lažje odpravljanje napak.
Pomni: Domača stran ni le prva stran spletišča. Je izhodišče, ki uporabniku predstavi namen spletišča, omogoči dostop do glavnih vsebin in ustvari prvi vtis o kakovosti celotnega spletnega mesta.
Osnovna pravila izdelave domače strani
Pri izdelavi domače strani najprej določimo njeno nalogo. Uporabnik mora hitro razumeti, kaj spletišče ponuja, kje najde glavne vsebine in kako nadaljuje z uporabo strani. Zato mora biti domača stran pregledna, tehnično pravilna, odzivna in vsebinsko smiselno razdeljena.
| Področje | Priporočilo |
|---|---|
| Struktura dokumenta | HTML dokument naj ima pravilno ogrodje, jezik strani, glavo dokumenta in telo dokumenta. |
| Glava dokumenta | V razdelku <head> določimo kodiranje, naslov strani, meta opis, odzivnost, povezave do slogov in ikono spletišča. |
| Navigacija | Navigacija naj bo jasna, odzivna in dostopna tudi na manjših zaslonih. |
| Vsebinski odseki | Odseki naj bodo razdeljeni po pomenu, na primer uvod, predstavitev tehnologij, dodatna pojasnila, mnenja in noga. |
| Dostopnost | Slike naj imajo smiselna nadomestna besedila, gumbi in povezave pa naj bodo razumljivi. |
Pozor: Pri uporabi Bootstrapa ni dovolj, da kopiramo razrede iz primerov. Razumeti moramo, kaj pomenijo mreža, vrstice, stolpci, komponente, odzivne prelomne točke in podatkovni atributi za interaktivne elemente.
HTML5 ogrodje in naslov strani
Najprej pripravimo osnovno HTML5 ogrodje dokumenta. Z oznako <!DOCTYPE html> brskalniku povemo, da uporabljamo sodoben HTML dokument. V začetni oznaki <html> določimo jezik strani, v razdelku <head> pa zapišemo osnovne podatke o dokumentu.
Naslov strani v elementu <title> se prikaže v zavihku brskalnika in je pomemben tudi za uporabnika, zaznamke ter iskalnike.
<!DOCTYPE html>
<html lang="sl">
<head>
<meta charset="utf-8">
<title>eNSA | Spletišče: Domača stran</title>
</head>
<body>
</body>
</html>Pomni: Element <title> ni glavni naslov, ki je prikazan v vsebini strani. Glavni naslov strani običajno zapišemo z elementom <h1>, naslov dokumenta pa z elementom <title> v glavi dokumenta.
Meta oznake
Meta oznake podajo podatke o dokumentu. Pri domači strani so pomembne predvsem oznake za kodiranje znakov, odzivnost strani in opis vsebine. Oznaka viewport je nujna za pravilen prikaz odzivnih strani na telefonih in tablicah.
| Meta oznaka | Namen |
|---|---|
charset |
Določi kodiranje znakov, na primer utf-8. |
viewport |
Omogoči pravilno prilagajanje strani širini zaslona. |
description |
Na kratko opiše vsebino strani. |
author |
Določi avtorja ali organizacijo, ki je pripravila stran. |
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Predstavitev sodobnega Bootstrap spletišča.">
<meta name="keywords" content="Bootstrap, odzivno oblikovanje, mrežni sistem, komponente, dokumentacija">
<meta name="author" content="eNSA">
<title>eNSA | Spletišče: Domača stran</title>
</head>Pozor: Meta opis naj bo kratek, smiseln in povezan z dejansko vsebino strani. Pretirano naštevanje ključnih besed ni nadomestilo za kakovostno vsebino.
Favicon, Bootstrap 5, ikone in Googlova pisava
V glavo dokumenta vključimo datoteke in zunanje vire, ki jih stran potrebuje za oblikovanje in delovanje. Najprej povežemo ikono spletišča, nato spletno pisavo, Bootstrapovo slogovno datoteko, knjižnico ikon in lastno slogovno datoteko.
Vrstni red vključevanja je pomemben. Lastna slogovna datoteka je običajno vključena za Bootstrapovo datoteko, ker lahko z njo prilagodimo ali dopolnimo privzete Bootstrapove sloge.
<link rel="icon" href="slike/favicon.ico" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/slog.css">Na konec dokumenta dodamo še Bootstrapovo skriptno datoteko bootstrap.bundle.min.js, ki vsebuje podporo za interaktivne komponente, na primer spustne menije, modalna okna in vrtiljak:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>Datoteka z oblikovnimi slogi spletišča
Po povezavi do Bootstrapove CSS datoteke vključimo še lastno datoteko css/slog.css. V njej določimo prilagoditve, ki dajejo vzorčnemu spletišču prepoznavno obliko. Sem spadajo pisava, barve, razmiki, slog navigacije, videz kartic, ozadja odsekov in slog noge.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/slog.css">Pomni: Bootstrap zagotovi osnovno oblikovanje in komponente, lastna datoteka CSS pa omogoči prilagoditev strani izbranemu spletišču.
Odzivna navigacija z logotipom in glavnim menijem
Na vrhu strani izdelamo odzivno navigacijo z logotipom, glavnim menijem in spustnim podmenijem Dokumentacija. Navigacija je izdelana s komponento navbar. Pri večjih zaslonih je meni prikazan vodoravno, pri manjših zaslonih pa se zloži v gumb za odpiranje menija.
Glava domače spletne strani z logotipom in glavnim menijem.
<nav class="navbar navbar-expand-lg navbar-light site-navbar sticky-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="slike/index/logo.png" alt="eNSA logotip">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#meni"
aria-controls="meni" aria-expanded="false" aria-label="Preklopi navigacijo">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="meni">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
...
</ul>
</div>
</div>
</nav>Primer osnovnih slogov navigacije:
body { font-family: Roboto, Helvetica, Arial, sans-serif; }
.site-navbar {
background-color: #ffffff;
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.05);
}
.navbar-brand img {
max-height: 58px;
}
.navbar-nav .nav-link {
color: #666;
font-weight: 500;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
color: #222;
}Pozor: Gumb za odpiranje menija mora biti pravilno povezan z elementom, ki se odpira. Vrednost atributa data-bs-target se mora ujemati z vrednostjo atributa id pri elementu collapse.
Uvodni odsek in vrtiljak
Pod navigacijo izdelamo uvodni odsek z naslovom, opisom, gumboma in vrtiljakom s tremi slikami. Uvodni odsek je pomemben, ker uporabniku predstavi temo spletišča in ga usmeri na nadaljnje vsebine.
Vrtiljak je interaktivna Bootstrapova komponenta. Za njegovo delovanje potrebujemo pravilno HTML strukturo, ustrezne Bootstrapove razrede, podatkovne atribute in vključeno datoteko bootstrap.bundle.min.js.
Uvodni odsek z besedilom, gumboma in vrtiljakom.
<section class="hero pb-0">
...
<div id="uvodCarousel" class="carousel slide hero-card overflow-hidden" data-bs-ride="carousel">
...
</div>
</section>Pomni: Vrtiljak naj ne bo edini način dostopa do pomembnih informacij. Vsebina, ki je bistvena za uporabnika, naj bo dostopna tudi brez čakanja na menjavanje slik.
Okvir Kaj uporabljamo
V naslednjem odseku predstavimo štiri osnovne tehnologije: HTML5, CSS3, JavaScript in Bootstrap. Vsebina je razporejena v odzivno mrežo. Pri večjih zaslonih so kartice lahko prikazane v eni vrstici, pri manjših zaslonih pa se razporedijo v več vrstic.
Načrt okvirja Kaj uporabljamo.
<section class="py-5">
...
<div class="row g-4">
<div class="col-6 col-lg-3">...</div>
...
</div>
</section>Okvir Sass in Less
Pod razdelkom s karticami sledi odsek Sass in Less z besedilom in slikami v odzivni postavitvi. Odsek pojasnjuje, da se pri večjih projektih slogovne datoteke pogosto organizirajo z dodatnimi orodji. Sass in Less sta predprocesorja, ki omogočata uporabo spremenljivk, gnezdenja in drugih možnosti za lažje vzdrževanje slogov.
Načrt okvirja Sass in Less.
<section class="section-accent py-5">
...
</section>Okvir Mnenja naših uporabnikov
Naslednji del domače strani vsebuje tri mnenja uporabnikov v karticah s sliko, citatom in imenom. Tak odsek lahko poveča zaupanje uporabnika, vendar mora biti vsebina verodostojna, pregledna in oblikovno skladna z ostalim spletiščem.
Načrt okvirja Mnenja naših uporabnikov.
<section class="py-5">
...
<div class="row g-4 mt-1">
<div class="col-md-4">...</div>
...
</div>
</section>Noga spletne strani <footer>
Na dnu dokumenta izdelamo nogo strani. Noga običajno vsebuje dodatne povezave, podatke o avtorju, letnico, povezave do družbenih omrežij ali druge zaključne informacije. V vzorčnem primeru so na levi strani ikone družbenih omrežij, na desni pa oznaka spletišča in letnica.
Načrt noge spletne strani <footer>.
<footer>
<div class="container">
<div class="row align-items-center gy-3">
...
</div>
</div>
</footer>Priporočila za izdelavo domače strani
- Najprej pripravi pravilno HTML ogrodje in smiselno glavo dokumenta.
- Za odzivno stran vedno vključi meta oznako
viewport. - Bootstrapovo CSS datoteko vključi pred lastno slogovno datoteko.
- Interaktivne Bootstrap komponente naj imajo vključeno tudi skriptno datoteko
bootstrap.bundle.min.js. - Navigacija naj bo razumljiva, odzivna in dostopna s tipkovnico.
- Slike naj imajo ustrezna nadomestna besedila in naj bodo optimizirane za splet.
- Vsebino razdeli v jasne odseke, ki sledijo namenu strani.
- Predogled strani preveri na različnih širinah zaslona.
Pogoste napake
- V dokumentu manjka meta oznaka
viewport, zato se stran na mobilnih napravah ne prikazuje pravilno. - Lastna slogovna datoteka je vključena pred Bootstrapovo datoteko, zato prilagoditve ne delujejo pričakovano.
- Bootstrapove interaktivne komponente so dodane brez skriptne datoteke
bootstrap.bundle.min.js. - Atribut
data-bs-targetpri navigacijskem gumbu ni usklajen z ustreznim elementomid. - Slike v vrtiljaku nimajo ustreznega nadomestnega besedila.
- Domača stran vsebuje preveč nepovezanih vsebinskih sklopov, zato uporabnik težje razume namen spletišča.
- Noga strani je oblikovana samo vizualno, brez smiselnih povezav ali uporabnih informacij.