Šajā pamācībā atradīsiet informāciju kā izveidot savu pirmo pavisam vienkāršu horizontālu navigācijas izvēlni mājas lapai.
Lai izveidotu mājas lapas navigācijas izvēlni jeb navigāciju (menu), būs nepieciešams vispirms izveidot HTML dokumentus un CSS failu. Šajā pamācībā apskatīsim piemēru ar četrām mājas lapas sadaļām (Sākums, Par mums, Pakalpojumi un Kontakti).
Kā izveidot HTML dokumentu padziļinātāk variet apskatīt pamācībā Ievads HTML.
Kā izveidot CSS failu padziļinātāk variet apskatīt pamācībā Ievads CSS
Izveidojiet 4 HTML dokumentus – index.html, par_mums.html, pakalpojumi.html un kontakti.html.
Kā arī izveidojiet CSS failu stils.css. Saglabājiet visus šos failus vienā mapē.
Atveriet index.html failu un izveidojiet struktūru, kas sastāvēs no body un kājenes (footer). Iekš body ievietojiet pirmā līmeņa virsrakstu h1 un paregrāfu (p).
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Mana pirmā mājas lapa - Mana lapa</title>
<meta name="description" content="Šeit jāievieto meta apraksts par Jūsu mājas lapu.Šī info tiek attēlota meklēšanas rezultātos.">
<link rel="stylesheet" href="stils.css">
</head>
<body>
<h1>Par mums</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
<footer>
<p> Izstrādāts 2020</p>
</footer>
</html>
Lai izveidotu izvēlni tiks izmantots nenumurēts saraksts (ul). Izvēlni mēs ievietosim lapas augšpusē, tā būs horizontāli novietota un pilnā platumā. Lai ievietotu izvēlni lapas augšpusē, mēs ievietosim sarakstu (ul) kā pirmo elemetu iekš body. iekš saraksta <ul> ievietosim <li>, kas ir saraksta vienības. Saraksta vienības būs lapas sadaļas (sākums par mums, pakalpojumi, kontakti).
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Tādēļ iekš (li) jāieraksta sadaļu nosaukumi, ko vēlēsieties attēlot navigācijas izvēlnē”. Sarakstam (ul), piešķiriet kalsi ar nosaukumu “nav”, ko mēs izmantosim, lai vēlāk noformētu navigācijas menu izskatu, ko mēs darīsim stils.css failā.
<ul class="nav">
<li>Sākums</li>
<li>Par mums</li>
<li>Pakalpojumi</li>
<li>Kontakti</li>
</ul>
Tā kā mums nepieciešams, lai uzspiežot uz nosaukuma atvērtos konkrētā sadaļa, mēs pievienosim saites uz dokumentiem, ko izveidojām ar a tagu un href atribūtu:
<ul class="nav">
<li><a href="#">Sākums</a></li>
<li><a href="par_mums.html">Par mums</a></li>
<li><a href="pakalpojumi.html">Pakalpojumi</a></li>
<li><a href="kontakti.html">Kontakti</a></li>
</ul>
Pēc minēto darbību veikšanas, atverot HTML dokumentu index.html interneta pārlūkā, Jums jāredz šāds saraksts ar saitēm:
Nokopējiet visu index.html faila saturu un iekopējiet failos pakalpojumi.html, par_mums.html un kontakti.html un saglabājiet izmaiņas.
Atveriet index.html failu interneta pārlūkā un, uzpiežot uz kādas no saraksta saitēm, piemēram, Pakalpojumi, Jūs redzēsiet, ka adreses joslā interneta pārlūkā uzrādās ceļš līdz failam, ko atvērāt, nospiežot uz saites:
Šobrīd visas mājas lapas sadaļas ir vienādas, tādēļ nepieciešams izmainīt katras sadaļas saturu, nosaukumu kā arī saites. Failā par_mums.html izmainiet:
- sadaļas nosaukumu (title) no “Mana pirmā mājas lapa” uz “par mums”.
- Tekstu paregrāfā uz citu tekstu.
- Meta aprakstu, jo katrai sadaļai tam jābūt unikālam (tas ir būtiski, lai Jūs pierastu, ka tas vienmēr ir jādara).
- Kā arī pievienojiet saiti uz sākumlapu, jo sākumlapā (index.html), no kurienes kopējām kodu, nebija saites, bet bija # simbols. Par mums sadaļā šo simbolu ievietojiet saites vietā saraksta Par mums vienībā.
Veiciet šīs pašas darbības ar kontakti.html un pakalpojumi.html failu, tikai attiecīgi kontakti.html failā pie nosaukuma rakstiet Kontakti un Pakalpojumi.html -Pakalpojumi. Pēc nosaukumu (title) nomaiņas, atverot interneta pārlūkā kādu no sadaļām Jūs šo nosaukumu variet redzēt interneta pārlūka cilnē:
Failā pakalpojumi.html arī nomainiet meta aprakstu atbilstoši sadaļas saturam un saites uz sākumlapu un pakalpojumu sadaļu. Kā arī nomainiet tekstu, piemērā parādīts nosaukums ar pirmā līmeņa virsrakstu “Mūsu pakalpojumi” un 2 otrā līmeņa virsraksti ar 2 paregrāfiem:
Sadaļā kontakti arī nomainiet meta aprakstu, saites sākumlapai un kontaktu sadaļai un tekstu:
Nākamais solis būs piešķirt CSS dizainu. Katrā no html dokumentiem ir ievietota saite uz dokumentu stils.css, kas ir galvenais stila fails, kurā noteiksim arī navigācijas izvēlnes izskatu un novietojumu.
HTML dokumentos mēs sarakstam (ul) pievienojām klasi ar nosaukumu “nav”. Mums nepieciešams šo sarakstu ievietot vienā rindā, lai to izdarītu mēs izmantosim īpašību float un piešķirsim tai vērtību left (visām saraksta vienībām (li), kas ir iekš saraksta (ul) ar klasi nav), plūst no kreisās puses:
Pēc tam mums jānoņem saraksta vienību apzīmējumi (tumšie aplīši jeb disc), kas pēc noklusējuma ir ul sarakstiem. Lai to izdarītu ir jāizmanto list-style īpašība un jāpievieno vērtība none (nekas jeb neviens), lai pirms saraksta vienībām nebūtu nekas:
.nav {
list-style: none;
}
Ja vēlamies, lai menu jeb izvēlne būtu pilna platuma, tad margin (attālums līdz nākamajam elementam no visām pusēm) būtu 0 – margin:0;
.nav {
list-style: none;
margin: 0;
}
Savukārt, lai izvēlnei pievienotu attālumus iekšpusē, varam izmantot padding. Piemērā izmantoju padding: 0px 40p, kas apzīmē, ka iekšējais attālums augšā un apakšā būs 0, bet labajā un kreisajā malā 40 px:
.nav {
list-style: none;
margin: 0;
padding: 0px 40px;
}
Kā arī pievienosim sarkanu fona krāsu mūsu mājas lapas izvēlnei ar background īpašību un augstumu ar height īpašību 50 px augstumā:
.nav {
list-style: none;
margin: 0;
padding: 0px 40px;
height:50px;
background:#d40404;
}
Attālums (padding):
Ar augstumu 50px:
Nākamis solis ir noformēt tekstu, kas apzīmē sadaļas. Šajā gadījumā teksts ir iekš (li), kas ir ul saraksta vienības un teksts ir saite (a), tādēļ noformēsim a iekš nav ul:
.nav li a {
display: block;
color: white;
text-align: center;
text-transform:uppercase;
padding: 14px 16px;
text-decoration: none;
font-weight:600;
font-size:14px;
}
Pēc noklusējuma visām saitēm HTML ir pievienota apakšsvītra un tās ir zilā krāsā. Tādēļ ar color īpašību mēs piešķirsim baltu krāsu (color:white) un ar text-decoration:none (noņemam apakšsvītru).
Text-align:center – teksta novietojums pa centru iekš li.
text-transform:uppercase – ja vēlaties, lai teksts tiktu pārveidots uz lielajiem burtiem.
padding- attālums iekš katra li (saraksta vienības), šajā gadījumā 14px no augšas un apakšas un 16px no labās un kreisās puses. Tiek izveidotas atstarpes starp nosaukumiem.
font-weight – burtu biezums un font-size – burtu izmērs.
Display:block, attēlo katru saraksta vienību kā bloku.
Saglabājiet izmaiņas un atveriet index.html failu interneta pārlūkā un Jums jābūt šādam rezultātam, ja sekojāt instukcijām:
Viss CSS kods priekš navigācijas izvēlnes:
.nav li {float: left;}
.nav {
list-style: none;
margin: 0;
padding: 0px 40px;
background:#d40404;
height:50px;
}
.nav li a {
display: block;
color: white;
text-align: center;
text-transform:uppercase;
padding: 14px 16px;
text-decoration: none;
font-weight:600;
font-size:14px;
}
Autors: Dagnija Ivdra
+37125693580
hello@dgwebfactory.com