 |
||
|---|---|---|
|
Cilji vaje:
Povezava spletnih strani v spletiščeIzdelava glave in noge spletne straniIzdelali smo že kar nekaj spletnih strani. Sedaj pa bi jih radi povezali v spletišče, da bo možno sprehajanje po posameznih straneh. Stranem bomo dodali navigacijsko vrstico, ki bo vsebovala povezavo do posameznih strani. Da bodo strani imele celovito grafično podobo, bomo že izdelanim spletnim stranem dodali enotno podobo glave in noge strani. Odprimo si stran index.html. S kazalnikom se postavimo pred tabelo in s pritiskom na tipko Enter pomaknimo tabelo navzdol. Pred obstoječo tabelo bomo vstavili novo tabelo s štirimi vrsticami, ki imajo en stolpec. Tabela naj bo široka 100% strani. Celicam nastavimo vodoravno in navpično poravnavo na sredino, razmik in odmik celic pa postavimo na vrednost 0.
V novo tabelo vstavimo slike, ki se nahajajo med slikami v mapi vaja7. V prvo celico tabele vstavimo sliko nvu.jpg in ji dodelimo nadomestno ime Izhodišče. Na sliko postavimo povezavo, ki kaže na stran index.html. Tako se bomo lahko z vsake spletne strani vrnili na izhodiščno stran spletišča.
Ob sliki na desno v prvo celico postavimo še sliko logo.jpg. Med slikama ne dodamo presledkov.
V drugo in četrto vrstico tabele vstavimo sliko razmik.gif. V drugi vrstici sliki nastavimo širino 1 piko in višino 10 pik, v četrti vrstici pa širino 1 piko in višino 30 pik.
V tretjo vrstico pa vstavimo tekst menijske vrstice. Vrstici nastavimo tudi višino 35 pik: | Domov | Prva spletna stran | Čas in prostor | Merjenje časa | Ure | Anekdota | Enote | Povezave | Povezave s CSS | Razdalje | Na posamezne tekste menijske vrstice postavimo povezave in sicer:
Prvi vrstici tabele priredimo slog glava, tretji vrstici pa priredimo slog meni.
Spletni strani na dnu vstavimo še eno tabelo z dvema vrsticama in enim stolpcem. Tabela naj bo širine 100% strani.
V zgornjo vrstico vstavimo sliko razmik.gif in ji nastavimo vrednost širine 1 piko in višine 30 pik. V spodnjo vrstico pa vstavimo tekst C Projekt eRid (e-gradiva), Izdelava spletnih strani. Znak C vstavimo v meniju Vstavi z ukazom Znaki in simboli. Izberemo kategorijo Pogosti simboli in v meniju Znaki izberemo C. Spodnji vrstici nastavimo tudi višino 25 pik.
Pred tekst vstavimo še gumb Ustvarjeno z Nvu, ki ga dobimo v meniju Vstavi v izbiri Pametni gradniki.
Spodnji vrstici dodelimo še slog noga. S tem je stran index.html postavljena v končno obliko. Shranimo jo in si jo oglejmo v brskalniku.
Vidimo da osrednji okvir z vsebino v Internet Explorerju ni poravnan na sredino. Zato v pogledu kode srednji tabeli dodajmo še parameter poravnave na sredino align=''center''. Ker je koda sorazmerno obširna, si v navadnem pogledu srednjo tabelo označimo, nato pa vključimo pogled na kodo.
V značko <table .parametri. align=''center''> dodamo na konec parameter za poravnavo na sredino.
Dokument shranimo in si ga ponovno oglejmo v brskalniku. Sedaj se v obeh brskalnikih okvir poravna na sredino okna. Da bomo zgradili spletišče in bodo strani med seboj povezane, moramo kopirati zgornjo in spodnjo tabelo s strani index.html še v preostale že zgrajene strani. V ostale strani moramo uvoziti tudi oblikovne sloge CSS iz datoteke erid.css. Odprimo dokument prva.html. Na strani index.html označimo zgornjo tabelo, jo kopirajmo v odložišče, se postavimo s kazalnikom pred naslovni tekst Moja prva stran in vstavimo tabelo iz odložišča s pritiskom tipkovne bližnjice Ctrl+V.
Podobno označimo tudi spodnjo tabelo, jo kopirajmo in prilepimo na konec dokumenta prva.html.
V dokument prva.html uvozimo še oblikovne sloge CSS iz datoteke erid.css. Odprimo si Urejevalnik CSS v meniju Orodja. S klikom na Elt. povezave odpremo okno Nova povezana slogovna predloga, v katerem v polju URL pokažemo datoteko erid.css v mapi css, v polje Seznam medijev vpišemo all in za Naslov vpišemo erid. S klikom na Ustvari slogovno predlogo uvozimo oblikovne sloge.
Shranimo si dokument prva.html in si ga oglejmo v brskalniku. Preverimo delovanje povezav.
Podobno kot smo kopirali tabeli in uvozili slogovno predlogo v dokument prva.html, to naredimo še v preostalih dokumentih. Dokumente shranimo in preverimo delovanje povezav v brskalniku.
Navodila
|
||
| na vrh | ||
