U uvodnim lekcijama kursa smo pomenuli linkove i njihovu podelu. Postoje tri osnovne kategorije, u zavisnosti od putanje na koju ciljaju:

  • putanje relativne u odnosu na dokument
  • putanje relativne u odnosu na Root folder sajta
  • apsolutne putanje


Postoji više načina kako možemo kreirati linkove (hyperlinks) u Dreamweaveru i sada ćemo ih razjasniti.

Možemo izabrati iz padajućih menija Insert > Hyperlink ili iz Insert panela izabrati ikonicu hyperlinka. Ona je predstavljena slikom lanca i nalazi se prva sa leve strane. U oba slučaja otvoriće se dijalog koji vidimo na sledećoj slici.

 

Unos hyperlinka

 

  • Text - u ovo polje unosimo tekst od koga želimo da napravimo link.
  • Link - polje gde unosimo putanju do dokumenta na koji linkujemo. Ako je dokument u okviru istog sajta, onda upisujemo samo ime fajla (npr kontakt.html), a ako linkujemo na dokument van sajta, unosimo celu URL adresu (uključujući i http://).
  • Target - biramo u kom će se prozoru otvoriti nova stranica.
    • _blank  - učitava linkovani dokument u novom okviru/prozoru
    • _parent - učitava linkovani dokument u roditeljskom elementu strane u kojoj se nalazi link. Ukoliko se link ne nalazi u ugnježdenoj strani, učitava u punom prozoru.
    • _self - učitava linkovani dokument u istom prozoru gde se nalazi i link. Ukoliko izostavimo target, ova vrednost se uzima kao default.
    • o _top - učitava u punom prozoru, zanemarujući sve frejmove.
  • Title - ovde unosimo opis linka. Naslov se pokazuje u nekim čitačima, kao tool tip, kada korisnik prelazi mišem preko linka. Dobra praksa je da se ovo polje popuni jer doprinosi boljoj pristupačnosti i može pomoći u boljem rankiranju i indeksiranju kod web pretraživača. Ovo je polje koje možemo smatrati pandanom alt teksta kod slika.
  • Access key - Opciono polje. Možemo uneti jedno slovo koje će postati prečica u kombinaciji sa CTRL tasterom. Na primer ukoliko unesemo slovo "B" možemo koristiti CTRL+B u browseru. Na Windows sistemu i Internet Exploreru tastaturna prečica je ALT+access key, u Firefoxu je ALT+SHIFT+access key, a na Mac Safari browseru je CMD+access key.
  • Tab index - ova opcija služi za postavljanje tab redosleda. Može biti korisno ukoliko imamo više polja i elemenata. Korisnik onda može tab tasterom na tastaturi prelaziti sa polja na polje. Ukoliko podesimo tab index za jedno polje, trebalo bi podesiti za sva. Ova i prethodna opcija se vrlo retko koriste.

Drugi način za kreiranje linkova jeste da selektujemo već postojeći tekst na stranici, a potom iz Properties Inspectora izabrati folder ikonicu (Browse for file) pored link polja, na slici označenu sa D. Otvoriće se dijalog u kome možemo izabrati fajl iz lokalnog Root foldera, tj. sa sajta.

Više mogućnosti za unos linkova u Properties Inspectoru

 

Umesto toga možemo, dok je selektovan željeni tekst, prevući ikonicu linka (na slici označeno sa C) do fajla direktno tako što ćemo pritisnuti ikonicu, držati levi taster miša, prevući do fajla i otpustiti iznad njega u Files panelu.

Povrh svega, možemo ručno uneti link tako što ćemo ukucati deo putanje ukoliko je interni link, ili apsolutnu putanju, ukoliko je eksterni, absolutni link (A na slici).

DW pamti linkove koje smo ranije koristili na sajtu, tako da možemo otvoriti padajući meni klikom na trougao pored polja Link (na slici B) i izabrati neki od njih ukoliko želimo da ga ponovo upotrebimo.

 

Ranije korišćeni linkovi


Primetićemo da nas, ukoliko na neki od ovih načina unesemo link, DW neće eksplicitno pitati za title i target kao kada smo koristili padajući meni, odnosno Insert panel, ali te opcije su i dalje tu, možemo ih uneti kroz Properties Inspector.

 

Title i Target polja možemo uneti kroz Properties Ins.

 

Podsetićemo se, Title opcija je za linkove poput alt teksta za slike. Nije obavezna, ali je dobra praksa unositi to polje. Target polje smo pominjali, ali bitno je zapamtiti vrednost _blank. Ukoliko Target polje ostavimo prazno, link će se otvarati u istom tabu/prozoru browsera, dok ukoliko postavimo _blank vrednost, link će se otvarati u novom tabu/prozoru. Ova opcija može biti korisna ukoliko linkujemo ka eksternim stranama, pa želimo da posetioca zadržimo na sajtu i sl, ali može biti i kontraproduktivna.


Imenovana sidra

Imenovana sidra (eng. named anchor) koristimo kada želimo da link vodi na tačno određeni deo strane. U nekim slučajevima možemo imati stranu koja je sadržajna i koja zahteva dosta vertikalnog skrolovanja kako bismo pronašli neki detalj. Imenovana sidra nam omogućavaju postavljanje bilo gde na stranici, a zatim postavljanje linkova ka njima, ka tačno tom delu strane.

Na primer, Wikipedia (www.wikipedia.org) koristi imenovana sidra za povezivanje odrednica u tekstu sa referencama koje se nalaze na dnu strane. Kod svake reference postavljeno je imenovano sidro, a potom linkovano sa odrednice u tekstu.

 

Prikaz imenovanog sidra na Wikipediji

 

Da bismo kreirali imenovano sidro (Named anchor) postavićemo kursor na mesto gde želimo da ga postavimo, a zatim ćemo izabrati iz padajućih menija Insert > Named Anchor ili iz Insert panela Named anchor opciju koja je predstavljena ikonicom brodskog sidra. U oba slučaja otvara se dijalog sa slike.

 

Dodavanje i imenovanje sidra

 

Dovoljno je uneti naziv sidra. I u ovom slučaju ne bi trebalo koristiti znake interpunkcije, razmake i slične karaktere. Preporuka je da naziv sidra bude jedna reč.


 

Prikaz ikonice imenovanog sidra


Tada će nam se pojaviti ikonica imenovanog sidra na izabranoj poziciji. Ona je predstavljena žutim štitom i oznakom sidra na njoj. Ta ikonica nije vidljiva na prikazu u browseru, već samo kod nas u Dreamweaveru.

Neminovno je da će se prikaz u dizajn modu promeniti i razlikovati od realnog, pošto ikonica pomera tekst kako bi se smestila. Ukoliko nam to smeta, možemo isključiti vizuelna pomagala (engl. Visal Aids) otvaranjem menija Visual Aids na Document Title Baru i štikliranjem opcije Hide All Visual Aids ili deštikliranjem opcije Invisible Elements  u istom meniju.

 

Visual Aids meni

 

Takođe, ukoliko otvorimo Preferences dijalog (Edit > Preferences) i izaberemo grupu Invisible Elements možemo izabrati koje će oznake za nevidljive elemente biti prikazane.

 

Podešavanja oznaka nevidljivih elemenata

 

Ukoliko želimo da promenimo ime imenovanog sidra koje smo već postavili, dovoljno je da ga obeležimo (kliknemo na njega) kako bi se u Properties Inspectoru pojavila ta opcija. Zatim u polju Name upišemo novu željenu vrednost.

 

Opcije imenovanog sidra


Pošto postavimo imenovano sidro, ono samo po sebi neće imati nikakvu funkciju. Moramo postavili link (ili više njih) koji će voditi ka njemu.

Link ka imenovanom sidru se postavlja slično kao običan link. Označićemo elemenat za koji želimo da postane link i prevući ikonicu linka (Point to file) iz Properties Inspectora direktno na ikonicu anchora.

 

Prevlačenje linka ka imenovanom sidru


Link će dobiti oblik #sidro, dakle, znak # i odmah ime imenovanog sidra bez razmaka između, ukoliko se i link i sidro nalaze na istoj strani. Možemo i sami, ručno uneti link ka imenovanom sidru ukoliko znamo tačan naziv, samo dodamo znak # ispred.

Ukoliko link i imenovano sidro nisu na istoj strani, opet možemo selektovati objekat koji postaje link i prevlačenjem kreirati link ka sidru ukoliko su obe strane otvorene ili ukucati ručno u obliku:

ime_strane.html#sidro

U tom slučaju, link otvara stranu ime_strane.html i pozicionira se na imenovanom sidru sa nazivom sidro.


E-mail linkoviP

Postoje i e-mail linkovi koji pokazuju ka e-mail adresama. Kod njih je specifično što umesto otvaranja strane pokreću default e-mail program posetioca strane. Ukoliko je to npr. Microsoft Outlook, link će pokrenuti pomenuti e-mail klijent, otvoriti dijalog za novi e-mail i uneti u polju to: adresu koju smo odredili. Ipak, može biti problema ukoliko posetilac nema podešen e-mail program.

Za postavljanje ovih linkova izabraćemo iz padajućih menija Insert > E-mail link ili iz Insert panela ikonicu pisma – E-mail link. Otvoriće se dijalog sa slike. U polju Text unosimo tekst linka, a u polju E-mail sam e-mail primaoca. Ukoliko ste već koristili e-mail linkove, DW će ponuditi prethodno korišćeni e-mail.

 

Postavljanje e-mail linka

 

Pošto potvrdimo ovaj dijalog, DW će postaviti link koji je veoma sličan običnom linku, samo što na početku ima mailto: deo. U ovom slučaju link će glasiti:

mailto:office@it-akademija.com

A kao što možemo primetiti, u Properties Inspectoru će se isto pojaviti i u polju link

 

Deo Properties panela - unet e-mail link

 

Ukoliko želimo, možemo precizirati i predefinisati subject, odnosno naslov e-mail poruke koja se kreira. Na primer, možemo želeti da subject bude "Kontakt sa sajta". U tom slučaju link će glasiti:

mailto:office@it-akademija.com?subject=Kontakt sa sajta

i unećemo ga ručno, ukucavanjem u link opciji Properties Inspectora. Obratite pažnju na to da smo dodali znak ?, reč subject= a zatim sam tekst. Posle znaka = može biti razmaka, jer je to tekst. Sada je verovatno jasnije zašto se nigde ne koriste znaci interpunkcije.

Slično tome, ukoliko želimo da predefinišemo body, odnosno tekst poruke, unećemo:

mailto:office@it-akademija.com?body=Predefinisani tekst poruke sa sajta


Kao što i sami zaključujete, isti je princip, samo je ključna reč body.

Ako želimo da predefinišemo i subject i body, unećemo e-mail link u sledećem obliku:

mailto:office@it-akademija.com?subject=Kontakt sa sajta&body=Predefinisani tekst poruke sa sajta


U ovom slučaju smo povezali oba dela i postavili ih jedan za drugim, ali smo kod druge stavke postavili znak & umesto ?. Pošto ćete ove detalje unositi ručno, morate obratiti pažnju da ne unesete neki razmak ili karakter viška.


Pseudoselektori kod linkova

Pseudoselektori su jednostavan način da kreiramo drugačiju stilizaciju za određeno stanje linkova.

Svaki link ima četiri stanja:

  • link
  • visited
  • hover
  • active

Svaki pravilno postavljen anchor tag (a) ili, jednostavnije, link ima osnovno link stanje. Ukoliko smo ranije kliknuli i upotrebili link, njegovo stanje će biti visited. Kada postavimo kursor miša iznad linka, njegovo stanje je hover, dok je active stanje u trenutku klika. Zašto je ovo bitno? Zato što možemo sva ova stanja kroz CSS tretirati posebno, kao da se radi o četiri klase i tako stilizovati po želji.

Ovi pseudoselektori se u CSS-u kreiraju tako što na selektor dodamo dve tačke : i stanje. Tako bi, na primer, četiri stanja za link (a tag) bila:

a:link
a:visited 
a:hover 
a:active


ili možemo kreirati pseudoselektor na složenom selektoru, na primer:

#sidebar a.mojlink:link
#sidebar a.mojlink:visited
#sidebar a.mojlink:hover
#sidebar a.mojlink:active

Time smo definisali četiri stanja za sve linkove koji se nalaze u elementu sa id vrednošću sidebar i koji imaju klasu mojlink


Ranije smo prilikom obrađivanja Page Properties dijaloga pomenuli stilizaciju linkova. Možemo otvoriti iz padajućeg menija Modify > Page Properties i zatim kategoriju Links (CSS).

 

Links (CSS) kategorija Page Properties dijaloga


Tu možemo definisati pseudostanja, ali zapamtite da će sva podešavanja biti uneta kao interni CSS. Kasnije ih možemo prebaciti u eksterni putem CSS Styles panela i slično. Ali možemo i u startu ova podešavanja kreirati kroz pomenuti CSS Styles panel, ili uneti kroz kod.

Ranije pomenuti primer bi izgledao na strani i u kodu na sledeći način:

Ako analiziramo CSS kod, možemo videti da postoje četiri opisa za svako stanje i da svaki od njih poseduje posebnu stilizaciju (u ovom primeru – za boju teksta i underline).

 

Kreiranje padajućeg menija

Dodaj komentar Sviđa mi se - (0) Ne sviđa mi se - (0)    

  • Linkovi 1
  • Linkovi 2
  • Linkovi 3