glava
     

Cilji vaje:

  • izdelati glavo in nogo spletne strani,
  • izdelati navigacijski meni,
  • kopirati glavo in nogo v spletne strani.

Povezava spletnih strani v spletišče

Izdelava glave in noge spletne strani

Izdelali 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.

s      s

s

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.

s           s

Ob sliki na desno v prvo celico postavimo še sliko logo.jpg. Med slikama ne dodamo presledkov.

s

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.

s                  s

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:

  • na tekst Domov postavimo povezavo do strani index.html,
  • na tekst Prva spletna stran postavimo povezavo do strani prva.html,
  • na tekst Čas in prostor postavimo povezavo do strani cas.html,
  • na tekst Merjenje časa postavimo povezavo do strani merjenje_casa.html,
  • na tekst Ure postavimo povezavo do strani ure.html,
  • na tekst Anekdota postavimo povezavo do strani anekdota.html,
  • na tekst Enote postavimo povezavo do strani enote.html,
  • na tekst Povezave postavimo povezavo do strani povezave.html,
  • na tekst Povezave s CSS postavimo povezavo do strani povezave_css.html,
  • na tekst Razdalje postavimo povezavo do strani razdalje.html.

s

Prvi vrstici tabele priredimo slog glava, tretji vrstici pa priredimo slog meni.

s

Spletni strani na dnu vstavimo še eno tabelo z dvema vrsticama in enim stolpcem. Tabela naj bo širine 100% strani.

s      s

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.

s

s

Pred tekst vstavimo še gumb Ustvarjeno z Nvu, ki ga dobimo v meniju Vstavi v izbiri Pametni gradniki.

s

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.

s

s

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.

s

V značko <table .parametri. align=''center''> dodamo na konec parameter za poravnavo na sredino.

s

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.

s

Podobno označimo tudi spodnjo tabelo, jo kopirajmo in prilepimo na konec dokumenta prva.html.

s

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.

s

Shranimo si dokument prva.html in si ga oglejmo v brskalniku. Preverimo delovanje povezav.

s

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.

s

s

s

s

s

s

s

s

 

Navodila
Uvod v svetovni splet
Dreamweaver - 01 - Spoznavanje programa
Dreamweaver - 02 - Izdelava osnovne spletne strani z besedilom
Dreamweaver - 03 - Dodajanje slik
Dreamweaver - 04 - Tabele
Dreamweaver - 05 - Ogled in spreminjanje kode HTML
Dreamweaver - 06 - Definiranje spletišča
Dreamweaver - 07 - Postavitev strani
Dreamweaver - 08 - Priprava in uporaba predloge
Dreamweaver - 09 - Povezave
Dreamweaver - 10 - Izdelava slikovnih kart in navigacijskih vrstic
Dreamweaver - 11 - Dodajanje večpredstavnostnih datotek
Dreamweaver - 12 - Izdelava spletnega foto albuma
Dreamweaver - 13 - CSS
Dreamweaver - 14 - Prenos spletišča na strežnik
NVU - 01 - Spoznavanje programa
NVU - 02 - Izdelava osnovne spletne strani z besedilom
NVU - 03 - Dodajanje slik
NVU - 04 - Tabele
NVU - 05 - Povezave
NVU - 06 - CSS
NVU - 07 - Spletišče
NVU - 08 - Objava spletišča

Izhod

 

na vrh