glava
     

Cilji vaje:

  • uporabiti absolutne in relativne poti povezav,
  • izdelati povezave do strani v spletišču in do strani zunaj našega spletnega mesta,
  • izdelati povezavo znotraj spletne strani,
  • izdelati povezave na besedilu in slikah,
  • izdelati povezavo, ki odpre prednaslovljeno e-poštno sporočilo.

Postavljanje povezav

Povezave na spletni strani obiskovalcu spletne strani omogočajo skok na drugo spletno stran ali pa na drugo mesto v spletni strani. Povezava je lahko postavljena na različnih elementih spletne strani, kot npr. besedilo, slika. Spletišče je navadno sestavljeno iz več spletnih strani med katerimi se lahko sprehajamo s povezavami. Povezave lahko kažejo tudi na strani izven spletišča.

Povezave v najpreprostejši obliki so podčrtano in obarvano besedilo. Ko se s kazalnikom zapeljemo na povezavo, se iz puščice spremeni v obliko roke. Klik na povezavo pa nas popelje na novo spletno mesto.

Naslov spletnih strani v svetovnem spletu imenujemo tudi URL (Uniform Resource Locator). Na spletnih straneh lahko povezave kažejo na veliko različnih vrst datotek, vendar pa brskalniki zmorejo prikazati le nekaj vrst. Prikažejo datoteke tipa HTML, podprte oblike zapisov slik, dodatne programe in nekaj posebnih vrst datotek. Če povezava vodi do datoteke, ki je brskalnik ne zna prikazati, nas navadno vpraša, če jo želimo posneti na disk.

Relativne in absolutne poti povezav

Če v spletni strani naredimo povezavo ali pa če v spletno stran postavimo zunanjo datoteko, npr. datoteko s sliko, moramo vpisati pot do dokumentov. Na voljo imamo dva tipa poti oz. povezav in sicer:

  1. absolutno pot in
  2. relativno pot.

Absolutna pot si lahko predstavljamo kot hišni naslov. Če nekdo pozna naš točen naslov, nas bo zlahka našel. Absolutne poti uporabljamo za povezovanje s spletnimi stranmi izven našega spletišča. Primer absolutne spletne povezave:
http://www.tsckr.si/raziskov/index.htm

Relativna pot pa je določena glede na druge povezave. Če bi nekomu razlagal, kje je moj dom in ta pozna mojo ulico, bi mu dejal, da stanujem v drugi hiši na desni. V relativnih poteh naslova URL ni potrebno navesti v celoti. Znotraj spletišča uporabljamo relativne poti do datotek, da bodo vse povezave delovale, tudi če celotno spletno mesto preselimo drugam. Primer relativne poti:
povezane/enote_p.html

Včasih srečamo absolutne naslove URL, ki na koncu nimajo navedenega imena datoteke:

http://www.adobe.com/products/dreamweaver/

Tak naslov pa vseeno deluje, ker spletni strežnik pozna privzeto ime strani za ta imenik. Privzeto ime datoteke je navadno default.html ali default.htm,  index.html ali index.htm. To je lastnost, ki jo strežnikom lahko nastavljamo.

Pomembno je, da v spletišču uporabljamo relativne poti do datotek. Če postavimo absolutno povezave do datoteke na krajevnem disku, bo imela povezava naslednjo obliko:

             file:///C|/eRid/povezane/prvi_p.html

In v takem primeru, bo prikaz strani v brskalniku na našem računalniku pravilen. Ko pa spletno stran preselimo v strežnik, povezava ne bo več delovala. Datoteka je namreč shranjena na našem disku, do diska pa drugi nimajo dostopa in strani ne bodo videli.

Nekaj primerov relativnih povezav:

  1. če sta datoteki v isti mami za povezavo vpišemo samo ime datoteke, npr. datoteka.html,
  2. če je datoteka v podmapi moramo v povezavi navesti ime mape in datoteke, npr. mapa/datoteka.html,
  3. v primeru, da povezavo želimo postaviti do datoteke v nadrejeni mapi navedemo niz ../ in ime datoteke, npr. ../index.html.

Izdelava povezave do strani v spletišču in do strani zunaj našega spletnega mesta

Izdelali bomo novo spletno stran z imenom datoteke povezave.html. Poimenujmo pa jo Seznam spletnih strani. V stran vstavimo besedilo iz datoteke povezave.doc, ki jo najdemo v mapi gradivo. Naslov postavimo v slog Naslov 3, mu spremenimo pisavo v Helvetica, Arial in ga obarvajmo modro z barvo #0000FF. Besedilo pa postavimo v neurejen seznam.

s

Besedilo iz prve alineje bi radi povezali z datoteko prvi.html. To storimo lahko na več načinov, a najprej moramo tisti del besedila, za katerega želimo, da bo povezava, označiti. V našem primeru označimo besedilo Prva spletna stran:

  1. v meniju Vstavi izberemo ukaz Povezava., ki nam odpre okno Nastavitve povezave;
  2. v orodni vrstici kliknemo gumb Povezava, ki nam odpre okno Nastavitve povezave;
  3. s tipkovno bližnjico CTRL+L odpremo okno Nastavitve povezave.

V oknu Nastavitve povezave v rubriki Besedilo povezave vpišemo tekst, ki bo povezava. Če pa smo tekst označili pred odpiranjem okna Nastavitve povezave, se ta  že izpiše v rubriki Besedilo povezave. V polje Mesto povezave vpišemo mesto spletne strani, lokalne datoteke, elektronski naslov ali izberemo poimenovano sidro oziroma naslov iz spiska.

Prav lahko se nam zgodi, da se zatipkamo in povezavo napišemo napačno. V takem primeru bo ustvarjena povezava kazala na napačno mesto ali pa nikamor. Temu se izognemo tako, da namesto tipkanja povezave, pokažemo mesto datoteke. S klikom na gumb Izberi datoteko.  odpremo okno Odpri datoteko HTML,  kjer poiščemo in izberemo datoteko, do katere želimo postaviti povezavo. Nvu  nam v tem primeru povezavo izpiše sam in povezava je res pravilna, če smo le izbrali pravo datoteko.

s

s

Označimo sedaj tekst v drugi alineji Čas in prostor in postavimo povezavo z izbiranjem datoteke na dokument cas.html.

Označimo tudi besedilo v tretji alineji Merjenje časa in postavimo povezavo z izbiranjem datoteke na dokument Merjenje_časa.html.

s

Ker smo postavili že kar nekaj povezav, preverimo če zares delujejo. Shranimo dokument povezave.html in si ga oglejmo v brskalniku.

s

s

Vidimo, da povezave delujejo. A naleteli smo na drugo težavo. Naš prvi dokument ne vsebuje nobene povezave. In naše brskanje po spletu se je ustavilo. Spletne strani, ki ne vsebujejo povezav, so z vidika spletišča mrtve strani. Edina možnost, da se na taki strani prebijemo naprej po spletišču je vrnitev na predhodno stran spletišča.

Povezavam lahko dodelimo tudi lastnost Cilj s katero povemo, kako oziroma v katerem oknu naj se odpre stran, na katero kaže povezava. Lastnost Cilj najdemo v oknu Nastavitve povezave, kjer z gumbom Več lastnosti odpremo dodatne možnosti nastavitev.

s

V rubriki Cilj označimo polje Povezava se bo odprla in v meniju izberemo med:

  1. v novem oknu - odpre dokument v novem, ne poimenovanem oknu;
  2. v starševskem okvirju - odpre dokument v oknu, ki je oče trenutnega okna;
  3. v trenutnem okvirju - odpre dokument v istem oknu;
  4. v istem oknu, brez zbirke okvirjev - odpre dokument v celem oknu.

V našem primeru bi bilo smiselno povezave, ki kažejo na ''slepe'' spletne strani odpreti v novem praznem oknu. Uporabnik si po ogledu, to stran ki nima povezav, preprosto zapre. Lahko pa je tudi tak način prikazovanja spletnih strani slab, saj se uporabnik v množici odprtih oken več ne znajde.

Za naš primer dodajmo povezavi, ki kaže na Prvo stran lastnost Cilj  v novem oknu, da se bo stran odprla v novem praznem oknu.

s

In ko si stran povezave.html ponovno ogledamo v brskalniku, se nam po kliku na povezavo Prva spletna stran, le ta sedaj odpre v novem zavihku.

s

Dodajmo še ostalim povezavam lastnost odpiranja v novem oknu.

Na naši spletni strani povezave.html dodajmo še ostalim alinejam neurejenega seznama povezave do ustreznih datotek. To bomo storili z izbiranjem datoteke:

  1. v četrti alineji izberimo tekst Ure in postavimo povezavo na datoteko ure.html, ki naj se odpre v novem oknu,
  2. v peti alineji izberimo tekst Anekdota in postavimo povezavo na datoteko anekdota.html, ki naj se odpre v novem oknu,
  3. v sedmi alineji izberimo tekst Osnovne fizikalne količine in enote in postavimo povezavo na datoteko enote.html, ki naj se odpre v novem oknu.

s

Stran povezave.html shranimo in si jo oglejmo v brskalniku. Preverimo ali povezave delujejo pravilno.

s

V dokumentu povezave.html izdelajmo še dve povezavi, ki kažeta na mesti zunaj našega spletišča. Za neurejenim seznamom dodajmo tekst Če želimo poiskati še več informacij o prostoru in času pa si pomagajmo z iskalnikoma:. V neurejeni seznam pa postavimo še tekst poišči z Googlom, poišči z Najdi.si.

s

Tekstu Googlom dodajmo povezavo, ki kaže na mesto zunaj našega spletišča http://www.google.si. Prav tako dodajmo povezavo tekstu Najdi.si, ki kaže na mesto http://www.najdi.si. Povezavi dodamo tako, da natipkamo celotno ime povezave v polje Mesto povezave v oknu Nastavitve povezave. Povezavama dodajmo še lastnost Cilj v novem oknu, da se bo iskalnik odprl v novem oknu.

s

Shranimo dokument povezave.html in si ga oglejmo v brskalniku. Preverimo povezavi, ki kažeta na mesto zunaj našega spletišča.

s

Povezave znotraj spletne strani

Ko imamo opravka z daljšimi stranmi, želimo včasih obiskovalcu ponuditi možnost hitrega skoka na določeno mesto v spletni strani. Tako stran izdelamo s tako imenovanimi notranjimi povezavami. Na mestu na strani, kamor želimo skočiti, dodamo poimenovano oznako oziroma Sidro, na to oznako pa postavimo povezavo.

Na primeru si oglejmo izdelovanje povezav znotraj spletne strani. Odprimo si datoteko ure.html. Spletna stran je nekoliko daljša in razdeljena na sklope. Izdelali bomo povezave do naslovov posameznih ur. Pod glavni naslov vstavimo tekst, ki nam bo služil kot izbirni meni:

| Sončna ura | Peščena ura | Vodna ura | Svečna ura | Nihalna ura |

Na mesta, kamor želimo skočiti, dodajmo poimenovane oznake:

  1. s kazalnikom se postavimo pred naslov Sončna ura in v orodni vrstici kliknimo na gumb Sidro. Odpre se nam okno Lastnosti poimenovanega sira v katerem v polju Ime  sidra oznaki dodelimo ime SoncnaUra.

s

s

Označimo tekst Sončna ura v izbirnem meniju in postavimo povezavo do oznake soncnaUra. Povezavo postavimo s klikom na gumb Povezava v orodni vrstici. V oknu Nastavitve povezave v polje Mesto povezave natipkamo ime oznake #SoncnaUra.

s

Podobno sedaj dodajmo še oznake pred ostale naslove in postavimo povezave:

  1. pred naslov Peščena ura dodamo oznako pescenaUra,
  2. pred naslov Vodna ura dodamo oznako vodnaUra,
  3. pred naslov Svečna ura dodamo oznako svecnaUra,
  4. pred naslov Nihalna ura dodamo oznako nihalnaUra.

Označimo tekste posamezne ure v izbirnem meniju in postavimo povezavo do oznake za posamezno uro. Povezavo postavimo s klikom na gumb Povezava v orodni vrstici. V oknu Nastavitve povezave pri polju Mesto povezave razpremo meni in izberemo ustrezno povezavo.

s

Pri dolgi spletni strani je smiselno ob posameznih izbirah postaviti tudi povezavo, ki nas vrača na vrh strani. To storimo tako, da čisto na vrhu dokumenta, v našem primeru pred glavni naslov URE, dodamo oznako, npr. URE. Pred naslove pa dopišimo tekst [na vrh], in nanj postavimo povezavo, ki kaže na oznako URE. To storimo le pri enem naslovu, pri ostalih pa povezavo kar kopiramo. Enako označimo tudi zgornji izbirni meni in ga kopirajmo še na dno spletne strani.

Shranimo stran ure.html in preverimo delovanje povezav z ogledom v brskalniku.

s

s               s

Izdelava povezave na sliki

Povezave lahko postavljamo tudi na drugih elementih, ne samo na besedilu in oznakah. Za povezavo uporabimo tudi slike in ostale večpredstavne vsebine.

Oglejmo si primer povezave na sliki. Odprimo datoteko povezave.html. V zadnjih dveh vrsticah, kjer imamo navedena iskalnika, zamenjamo tekstovne povezave s slikovnimi. Za besedilom dodajmo sliki iskalnikov, ki se nahajata med slikami v mapi vaja5. Na slikah nastavimo povezavi do iskalnikov, kar storimo ob izbrani sliki z menijskim ukazom Oblika v katerem izberemo ukaz Slika in povezave Lastnosti. V izbiri Povezava vnesemo celotno pot povezave do iskalnikov Google in Najdi.si.

s

Shranimo dokument in preverimo delovanje povezav z ogledom dokumenta v brskalniku.

Povezava, ki odpre prednaslovljeno e-poštno sporočilo

Poznamo še eno vrsto povezave in sicer povezava mailto. Ta povezava na spletni strani uporabniku omogoča pošiljanje elektronske pošte. Da uporabnik lahko uporabi tako povezavo, mora imeti e-poštni odjemalec, ki je povezan s spletnim brskalnikom.

V dokument povezave.html na dnu strani dopišimo še besedilo Za dodatne informacije pa lahko tudi pišete po e-pošti. Označimo besedilo e-pošti in dodajmo povezavo mailto, tako da dodamo povezavo in v polje Mesto povezave vpišemo e-naslov.

Potrditi moramo še potrditveno polje Zgoraj je naslov e-pošte.

s

Nvu vstavi povezavo mailto:ime@ime_strežnika.domena. Poštni naslov smo se izmislili in ni delujoč. Če želite, da vam uporabniki zares pošljejo pošto morate navesti resničen e-naslov.

Shranimo dokument in preverimo povezave v spletnem brskalniku. Zaprimo odprte dokumente v programu Nvu. Končali smo vajo dodajanja povezav.

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