Mobiilimalli järgi veebilehestik
Nähtud käskude järgi veebilehe sisu kokkupanekuga saab üsna varsti hakkama. Põhjalikum
kujundamine aga nõuab sageli suuremat süvenemist, et taustade värvid ja piltide laiused
ilusti paika saaks. Kui tahta "oma ja head" kujundust saada, siis tuleb see tee ikka läbi
käia. Vahel aga on mugav end võõraste sulgedega ehtida ning kasutada mõnd juba
olemasolevat kujunduspõhja. Märksõna "HTML template" või "CSS template" alt võib neid
veebist hulgem leida ning mõndagi neist lubatakse vabalt kasutada.
Üksiku teate lugemine
Veebilehestikus on sisu ikka mitme lehe jagu. Kujundus aga võiks kokkukuuluvatel lehtedel
ühesugune või vähemasti sarnane olla. Enne suurema lehtedeploki ühendamist vaatame näidet
kahe failiga. Ühes neist lihtsalt paljas teade, mis tahetakse vajalikult lehele kuvada.
Teine mõninga kujundusega leht, kuhu siis teade sobivasse kohta sisse loetakse.
Teatefailis teade spordipäeva kohta:
teade.txt
Spordipäeva tõttu sel esmaspäeval tavalisi tunde ei toimu.
Kõik õpilased kohtuvad hommikul kell 9 palliplatsil.
Sisse lugeval lehel tavalise veebilehestiku andmed, lõpus lihtsalt require-käsklus
soovitud teate sisse võtmiseks.
Fail:
sisselugemine.php
Tunniplaani leht
Esmaspäev
Matemaatika
Ajalugu
Laulmine
Leht paistab lehitsejas välja järgmiselt.
Nii on mugav vajalikku teadet lihtsalt tekstifaili kirjutada. Ning teate näitamiseks
mõeldud lehed teavad, kust seda näha saab.
Valmis kujundusmall mobiilile
Kui omal kujundamise soont ei ole või lihtsalt tahtmine viisaka välimusega lehestik
kiiresti üles saada, siis tasub ette võtta mõni valmis kujundusmall. Näitena võeti
Gringo-nimeline mobiililehestiku põhi.
http://mobifreaks.com/free-mobile-website-templates/gringo-mobi-free-mobile-website-templa
te/
Tutvumiseks saab lehestiku lahti pakkida ning tema näitfaili töötamist imetleda.
Oma tunniplaanirakenduse tarbeks teeme avalehest koopia ning kujundame sellest esmaspäeva
tundide lehekülje, paigutades ülaserva viited ka teiste päevade jaoks mõeldud failidele.
blankett.html
Tunniplaan
Kujundusfailist jätame alles vaid lõigud, mis on vajalikud ühe päeva blanketti alles
jäänud elementide tarbeks.
kujundus.css
@charset "utf-8";
/* CSS Document */
body{
background:#ffffff;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#header{
margin:0 auto;
}
.nav{
font-size:14px;
background:#2d2d2d;
-moz-border-bottom-left-radius:6px;
-webkit-border-bottom-left-radius:6px;
border-bottom-left-radius:6px;
-moz-border-bottom-right-radius:6px;
-webkit-border-bottom-right-radius:6px;
border-bottom-right-radius:6px;
margin:0 5px;
}
.nav ul{
list-style-type:none;
margin:0;
padding:0;
}
.nav ul li{
display:inline;
margin:0;
padding:0;
}
.nav ul li:first-child{
margin:0 0 0 5px;
}
.nav ul li:last-child{
margin:0 5px 0 0;
}
.nav ul li a{
display:inline-block;
color:#f2f2f2;
padding:10px;
text-decoration:none;
}
.nav ul li a:hover{
color:#565656;
}
h2{
font-size:16px;
font-weight:bold;
color:#9b9b9b;
border:#aaaaaa 1px dashed;
padding:5px;
margin:0 5px;
}
p{
text-align:left;
font-size:12px;
color:#2d2d2d;
margin:5px;
padding:0;
line-height:20px;
}
p a{
color:#3c9ddb;
text-decoration:none;
}
p a:hover{
color:#4d4444;
}
.nav2{
font-size:14px;
background:#2d2d2d;
-moz-border-top-left-radius:6px;
-webkit-border-top-left-radius:6px;
border-top-left-radius:6px;
-moz-border-top-right-radius:6px;
-webkit-border-top-right-radius:6px;
border-top-right-radius:6px;
margin:0 5px;
}
.nav2 p{
text-align:center;
color:#f2f2f2;
margin:0 5px;
padding:5px 0;
}
.nav2 p a{
display:inline-block;
color:#88aa00;
padding:5px;
text-decoration:none;
}
.nav2 p a:hover{
color:#565656;
}
.clear{
clear:both;
}
Need omavahel ühendatuna kuvavad välja ühe päeva jaoks kujundatud lehekülje.
Lehstiku juures soovime, et lehed oleksid sarnase kujundusega, kuid iga päeva leht eraldi
sellele päevale vastava sisuga. Korduvad osad eraldame päisesse ja jalusesse, igale
päevale vastava osa selle nädalapäeva nimelisse faili. Kõigepealt päisefail. Sinna jääb
siis dokumendi algus, päiseosa ning menüüviited.
p2is.php
Tunniplaan
Edasi juba andmelehed päevade kaupa. Ülalt loetakse sisse päisefail, alt jalusefail.
esmaspaev.php
Esmaspäev
Matemaatika
Ajalugu
Laulmine
teisipaev.php
Teisipäev
Emakeel
Matemaatika
Tööõpetus
kolmapaev.php
Kolmapäev
Matemaatika
Emakeel
Kehaline kasvatus
neljapaev.php
Neljapäev
Emakeel
Ajalugu
Matemaatika
reede.php
Reede
Laulmine
Ajalugu
Tulemusena saab liigelda päevade lehtede vahel ning ühtsena kujundatud lehestikku
kasutada.
Ülesandeid
Koosta eraldi tekstifail teate jaoks ning tekstifail lehe tegija nimega. Loo uus
veebileht, kus ülal on pealkiri "Värske teade", lehe keskel failist sisseloetud teade ise
ning all paremal lehe tegija sisseloetud andmed.
Otsi veebist mõni valmiskujundusega lehemall. Pane oma masinasse/serverisse tööle.
Kujunda leht ühe anekdoodi näitamiseks. Pane lehe külge menüü viitega mitmele (veel
olematule) anektoodilehele. Jaga eraldi failidesse päiseosa, sisu ja jalus. Loo mitme
nalja jaoks eraldi sisu. Kujunda kokku ühiseks lehestikuks.