 |
||
|---|---|---|
|
Cilji vaje:
Postavljanje povezavPovezave 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:
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: 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
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:
Izdelava povezave do strani v spletišču in do strani zunaj našega spletnega mestaIzdelali bomo novo spletno stran povezano s predlogo, z imenom povezave.html in jo shranili v mapo povezane. Poimenujmo jo Seznam spletnih strani.
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.
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:
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.
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:
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.
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.
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:
Stran povezave.html shranimo in si jo oglejmo v brskalniku. Preverimo ali povezave delujejo pravilno. V Adobe Dreamweaverju pa stran zaprimo.
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:
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.
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.
Povezave znotraj spletne straniKo 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:
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.
Podobno sedaj dodajmo še oznake pred ostale naslove in postavimo povezave z izbirnega menija do ustreznih oznak:
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.
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.
Izdelava povezave na slikiPovezave 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.
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.
Povezava, ki odpre prednaslovljeno e-poštno sporočiloPoznamo š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.
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.
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 |
||
| na vrh | ||
