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, slikah, več povezav na eni sliki,
  • 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 puščica 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:

  1. absolutno pot in
  2. relativno pot.

Absolutno 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

Naslov URL lahko vsebuje največ pet delov:

http://www.tsckr.si:80/raziskov/16sre/rezultati/rezultati_podrocja.asp?podrocje_izpis=Sociologija

  1. http - prvi del naslova določa protokol. To je način dostopa. Za spletno stran je to http. Če bi npr. želeli dostopiti do strežnika FTP, bi bil protokol ftp.
  2. ://www.tsckr.si - drugi del naslova je domena. To je gostitelj oz. spletni strežnik, v katerem je shranjena spletna stran. Dvopičje in poševnici ločujejo domeno od protokola.
  3. :80 - vrata so neobvezni del naslova. Če gre za spletni strežnik http je privzeta številka vrat 80 in jo ni potrebno navajati.
  4. raziskov/16sre/rezultati/rezultati_podrocja.asp - četrti del naslova URL je ime datoteke in pot do nje. Pot vključuje vse mape in ime datoteke. Večina spletnih strani ima v imenu pripono .html ali .htm.
  5. ?podrocje_izpis=Sociologija - niz poizvedbe, ki sledi datotekam tipa .cgi, .asp, .aspx, .php, .jsp, .cfm. Niz poizvedbe ni obvezen, služi pa za pošiljanje podatkov skriptu, da se bo lahko izvedel.

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 absolutne 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 povezano s predlogo, z imenom povezave.html in jo shranili v mapo povezane. Poimenujmo jo Seznam spletnih strani.

s

V stran vstavimo besedilo iz datoteke povezave.doc, ki jo najdemo v mapi gradivo. Oblikujmo ga kot kaže slika. Naslov postavimo v slog Heading 3, mu spremenimo pisavo v Arial, Helvetica, sans-serif 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. V oknu z lastnostmi v izbiri Link postavimo povezavo:

  • vpišemo ime datoteke, na katero želimo, da kaže povezava. V našem primeru je datoteka povezave.html v podrejeni mapi glede na položaj datoteke prvi.html, do katere želimo postaviti povezavo. Torej moramo povezavo zapisati ../prvi.html.

s

  • 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 odpremo mapo ob izbiri Link v oknu z lastnostmi. V oknu Select File poiščemo in izberemo datoteko, do katere želimo postaviti povezavo. Adobe Dreamweaver  nam v tem primeru povezavo izpiše sam in povezava je res pravilna, če smo le izbrali pravo datoteko.

    Označimo sedaj tekst v drugi alineji Čas in prostor in postavimo povezavo z izbiranjem datoteke na dokument cas.html, ki leži v korenskem imeniku našega spletišča.

s

  • naslednja in najelegantnejša možnost pa je, da z označevalnikom povezav pokažemo datoteko, do katere želimo povezavo. S kazalnikom primemo označevalnik v vrstici za oblikovanje ob izbiri Link in ga odvlečemo na datoteko v okno spletišča.

    V našem primeru označimo besedilo v tretji alineji Merjenje časa in z označevalnikom datotek pokažimo na datoteko Merjenje_časa.html v oknu spletišča, kot kaže slika.

s

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

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 Target s katero povemo, kako oziroma v katerem oknu naj se odpre stran, na katero kaže povezava. Lastnost Target najdemo v oknu z lastnostmi, kjer lahko v meniju izbiramo med:

  1. _blank - odpre dokument v novem, nepoimenovanem oknu;
  2. _parent - odpre dokument v oknu, ki je oče trenutnega okna;
  3. _self - odpre dokument v istem oknu;
  4. _top - 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 jih po ogledu, 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 Target  _blank, 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, to sedaj odpre v novem oknu.

s

 

Na naši spletni strani povezave.html dodajmo še ostalim alinejam neurejenega seznama povezave do ustreznih datotek. To bomo storili kar z označevalnikom povezav:

  1. v četrti alineji izberimo tekst Ure in postavimo povezavo na datoteko ure.html v korenskem imeniku spletišča,
  2. v peti alineji izberimo tekst Anekdota in postavimo povezavo na datoteko anekdota.html v korenskem imeniku spletišča,
  3. v šesti alineji izberimo tekst DolžinaWord in postavimo povezavo na datoteko dolzinaWord.htmlnato pa izberemo še tekst Dolžina in postavimo povezavo na datoteko dolzina.html. Obe datoteki se nahajata v korenskem imeniku spletišča,
  4. v sedmi alineji izberimo tekst Osnovne fizikalne količine in enote in postavimo povezavo na datoteko enote.html v korenskem imeniku spletišča,
  5. v osmi alineji izberimo tekst Predloga in postavimo povezavo na datoteko predloga.html v korenskem imeniku spletišča.

Stran povezave.html shranimo in si jo oglejmo v brskalniku. Preverimo ali povezave delujejo pravilno. V Adobe Dreamweaverju pa stran zaprimo.

s

Podobno, kot v datoteki povezave.html, postavimo povezave tudi v meniju naše predloge. Odprimo dokument predloga.dwt za urejanje. Sedaj pa postavimo povezave na besedilo v meniju in sicer:

  1. prvi dokument - postavimo povezavo na dokument prvi_p.html v mapi povezane;
  2. čas in prostor - postavimo povezavo na dokument cas_p.html v mapi povezane;
  3. merjenje časa - postavimo povezavo na dokument merjenje_casa_p.html v mapi povezane;
  4. ure - postavimo povezavo na dokument ure_p.html v mapi povezane;
  5. anekdota - postavimo povezavo na dokument anekdota_p.html v mapi povezane;
  6. dolžina - postavimo povezavo na dokument dolzina_p.html v mapi povezane;
  7. enote - postavimo povezavo na dokument enote_p.html v mapi povezane;
  8. predloga - postavimo povezavo na dokument predloga_p.html v mapi povezane;
  9. z besedilom - postavimo povezavo na dokument povezave.html v mapi povezane;

Ostale povezave pa bomo dodali kasneje, ko bomo izdelali dokumente. Predlogo shranimo in posodobimo s predlogo povezane spletne strani.

V Adobe Dreamweaverju odprimo datoteko prvi_p.html. Povezave v meniju smo dodali, sedaj pa preverimo, če delujejo pravilno, zato si dokument odprimo v brskalniku. Vidimo, da se povezave sedaj pojavljajo v vseh spletnih straneh. Tako se lahko iz katerekoli strani premaknemo na katerokoli stran.

s

Odprimo zopet dokument povezave.html. V njem 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, kot kaže slika. 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 označimo tekst in v polje Link v oknu z nastavitvami natipkamo celotno ime povezave. Povezavama dodajmo še lastnost Target _blank, da se bo iskalnik odprl v novem oknu.

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 (Named Anchor), na to oznako pa postavimo povezavo.

Na primeru si oglejmo izdelovanje povezav znotraj spletne strani. Odprimo si datoteko ure_p.html v mapi povezane. 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:

  • s kazalnikom se postavimo pred naslov Sončna ura in v vrstici za vstavljanje v zavihku Common kliknimo na gumb Named Anchor. Odpre se nam okno Named Anchor, v katerem oznaki dodelimo ime SoncnaUra.

s 

s

Označimo tekst Sončna ura v izbirnem meniju in postavimo povezavo do oznake SoncnaUra. Povezavo postavimo kar z označevalnikom povezav, tako da pokažemo na poimenovano oznako, kot kaže slika. Povezavo Adobe Dreamweaver poimenuje #SoncnaUra.

s

Podobno sedaj dodajmo še oznake pred ostale naslove in postavimo povezave z izbirnega menija do ustreznih oznak:

  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.

Včasih je dodajanje povezav z označevalnikom povezav na obsežni spletni strani težko in zamudno početje. Elegantneje povezavo postavimo s pomočjo gumba Hyperlink v vrstici za vstavljanje v zavihku Common. V oknu Hyperlink, ki se nam odpre, v meniju izbire Link izberemo poimenovano oznako in tako postavimo oznako.

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. vrh. Pred naslove pa dopišimo tekst [na vrh], in nanj postavimo povezavo, ki kaže na oznako vrh. 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_p.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 v mapi gradivo med slikami v mapi vaja9. V polje Link vpišimo povezavo za posamezni iskalnik. Najpreprosteje je, če povezavo kar kopiramo s tekstovne povezave. Nastavimo še lastnost odpiranja Target na _blank.

s

Ko sliki dodamo povezavo, se okrog nje izriše okvir, ki je navadno modre barve. Če okvirja nočemo, moramo v oknu z lastnostmi v polju Border dodati vrednost 0. Na koncu pobrišimo še tekst s povezavo, shranimo dokument in preverimo delovanje povezav z ogledom dokumenta v brskalniku.

s

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.

Tako povezavo postavimo z orodjem Email Link v vrstici vstavljanja v izbiri Common.

s

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. Adobe Dreamweaver v polje Link doda povezavo mailto:ime@ime_strežnika.domena. Poštni naslov smo si izmislili in ne deluje. Če želite, da vam uporabnik zares pošlje pošto, mora navesti resničen e-naslov.

s

Shranimo dokument in preverimo povezave v spletnem brskalniku. Zaprimo odprte dokumente v Adobe Dreamweaverju. Končali smo vajo dodajanja povezav. V naslednji vaji pa si bomo ogledali, kako v spletne strani dodamo večpredstavne elemente.

 

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