Sākumā jums vajadzētu veikt nepieciešamos sagatavošanās soļus, lai izveidotu tīmekļa vietni. Izveidojiet vēlamo direktoriju struktūru. Tā varētu izskatīties šādi:
nodokļu konsultants
---attēli
---css
Tas ir ļoti tipisks direktoriju struktūras piemērs. Galvenajā līmenī jāievieto HTML lapas. CSS faili tiek uzglabāti css- direktorijā, bet visi attēli tiek saglabāti attēli- direktorijā. Tātad attēli- direktorijā ievietojiet visus attēlus, kurus jūs agrāk izgriezāt no dizaina.
Izveidojiet pamata struktūru
Izveidojiet jaunu CSS failu css- direktorijā. Pēc tam ievietojiet to savā HTML failā. (Manā piemērā HTML failam būs nosaukums index.html). Šis fails turpmāk būs pamats nākamajiem pamācības posmiem.
Sākumā atrodiet jau iepazīstošo HTML pamatu index.html.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Jūsu nodokļu konsultants</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Pārliecinieties, ka jūs iekļaujat arī stilu failu. Un tagad var sākties.
Ārējais elements ir div-konteiners.
<div class="galvenais-konteiners"> </div>
Šo konteineri varat tūlītēji formatēt, izmantojot CSS sintaksi.
.galvenais-konteiners {
platums: 100%;
plūsma: pa kreisi;
}
Galvenais konteiners tiek aprīkots ar 100 procentu platumu un plūst uz kreisi. Ieguvums no 100 procentu platuma: piemēram, jūs varat ievietot fondu bildi ar krāsu pāreju. Šis fons tad aizņemtu visu ekrāna platumu.
Es izveidoju divus papildu div-elementus iekšpusē galvenā konteinera.
<div class="galvenais-konteiners"> <div class="konteiners"> <div class="lapa"> </div> </div> </div>
Šos elementus arī formē. Patiesais saturu zonai piešķirtais platums ir 1000 pikseļi. Ar norādi margin: 0px auto; tiek panākta elementa horizontālā centrirovka.
.konteiners {
platums: 1000px;
mārķēšana: 0px auto;
}
Turpiniet arī ar lapas elementa formēšanu.
.lapa {
platums: 1000px;
plūsma: pa kreisi;
ietvars: 40px 0px 0px 0px;
}
Šis elements ir lapas pamata saturs. Šeit tiks novietoti visi pārējie elementi. Izmantojot šo elementu, jūs definējat iekšējos atstarpes. Augšējo iekšējo atstarpi iestata uz 40 pikseļiem, bet citi malu atstarpes uz 0 pikseļiem.
Un tagad jums jau ir (diezgan) pamatstruktūra izveidota.
Tagad ir laiks piepildīt šo struktūru ar saturu. Sākumā lapa tiek sadalīta trīs rindās.
• Galva
• Saturs
• Kājene
Tāpēc ir jādefinē trīs papildu div apgabalus.
<div class="augša"> </div> <div class="saturs"> </div> <div class="apakša"> </div>
Arī šos trīs apgabalus, protams, atkal jāformē ar CSS.
.augša {
fona-krāsa: #f6f7f7;
platums: 980px;
plūsma: pa kreisi;
ietvars: 0px 10px 10px 10px;
}
.saturs {
platums: 980px;
plūsma: pa kreisi;
ietvars-uzaugšu: 8px;
}
.apakša {
teksta-izlīdzinājums: centrā;
platums: 1000px;
augstums: 110px;
plūsma: pa kreisi;
}
Tagad jūs varat turpināt formatēt atsevišķos apgabalos.
Sāksim ar lapas galvas apgabalu. Tas atkal sastāv no vairākiem elementiem:
• Logotips/ Nosaukums
• Augšējā izvēlne
• Lielais attēls
Šie trīs elementi tiek definēti iekšpusē augša.
<div class="augša"> <div class="galva"> <div class="galvas-augšā"> <h1>Jūsu nodokļu konsultants</h1> </div> <div class="augšas-izvēlne"> Augšējā izvēlne </div> <div class="galvas-attēls"> </div> </div>
Šī ir lapas galvas pamata struktūra. Arī šis tagad tiks atkal formāts, izmantojot CSS.
.galva {
platums: 980px;
plūsma: pa kreisi;
}
.galvas-augšā {
platums: 980px;
augstums: 87px;
plūsma: pa kreisi;
}
.augšas-izvēlne {
fona-attēls: url(../images/menue.jpg);
atkārtošana-attēlos: atkārtojums-x;
platums: 978px;
augstums: 37px;
plūsma: pa kreisi;
}
.galvas-attēls {
fona-attēls: url(../images/header.jpg);
atkārtošana-attēlos: neatkārtojums;
fona-novietojums: pa kreisi augšā;
platums: 980px;
augstums: 213px;
plūsma: pa kreisi;
}
Sintakse satur divus "īpatnības". Vispirms apskatiet klases topmenu saturu. Šeit ir redzami divi datus par fona attēlu.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
Iekļauts vienpixela attēls menue.jpg. Tas attēlo jums zināmu krāsu gradientu augšējā izvēlnē. Ierakstot background-repeat: repeat-x;, attēls tiks horizontāli atkārtots tik ilgi, līdz elements ir pilnībā aizpildīts.
Satura nozare sadalīšana
Nākamais solis ir sadaļas, kur galu galā tiks rādīti saturs, daļa. Tas notiek iekšpusē div-elementa saturs. Šī sadaļa ir sadalīta dažādos elementos. Sākumā ir mazs ievadvienības attēls un uzruna.
Atbilstošā HTML sintakse ir šāda:
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Laipni lūdzam mūsu tīmekļa vietnē!</h1> <p>Šeit sekos laipnības teksts</p> </div> </div>
Šī daļa ir arī sadalīta divos. Pa kreisi tiek rādīts attēls, pa labi ir uzruna. Svarīga ir šeit klase content-image.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Šī klase ietver attēlu un uzrunu. Iekšpusē content-image atkal ir divi citi reģioni.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Laipni lūdzam</div>
Ja jūs vēlaties parādīt vien lielu attēlu vai citu saturu, nevis šādu divu sadalījumu, abas šīs sadaļas apvieno vien diva elementā. Divu elementu variantam CSS sintakse izskatās šādi:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}Tagad pārlūkā rezultātam būtu jāizskatās šādi:
''Turpina ar trīs citiem elementiem:
• kreisā teksta rūtiņu,
• labā teksta rūtiņu,
• labo izvēlni.
Šajā gadījumā HTML sintakse ir šāda:
<div class="teaser"> <div class="left"> Konteiners tekstam pa kreisi </div> <div class="right"> Konteiners tekstam pa labi </div> </div> </div> <div class="content-right"> Labā izvēlne </div> </div>
Un protams, šeit ir CSS sintakse:
.teaser {
width: 737px;
height: 216px;
float: left;
border: solid 1px #eee;
}
.left {
width: 330px;
height: 180px;
float: left;
padding: 20px;
}
.right {
width: 327px;
height: 180px;
float: left;
padding: 20px;
}
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}Šīs mācības beigās ir mūsu tīmekļa vietnes pamatstruktūra.
Tagad šo pamatstruktūru jāaizpilda ar atbilstošiem satura elementiem. Tas tiks darīts nākamajā mācību lapā.
