Linkovi

Dragan Filipović Drugi deo - Skripta, Kurs Comments (0)

Vrste linkova u Dreamweaver-u

Regularni linkovi – Povezuju stranice tako što konvertuju sadržaj, tekst i slike u hiperlinkove.

Email linkovi – Pokreće difoltni email program na računaru i navodi korisnika da pošalje email na adresu koja je navedena u linku.

Imenovana sidra – Ova vrsta linka vodi korisnika do određenog mesta na istoj stranici (ili nekoj drugoj strani) u okviru jednog web sajta.

Osnovno o linkovima

Hiperlinkovi se prave tako što se tekst ili slika u kodu stranice okruže <a> Tag-om. Atribut href (hypertext reference) definiše odredište linka. Na primer:

DIZAJN:

Pogledajte Web sajt KZM Palilule

KOD:

Pogledajte Web sajt <a href="http://www.kzmpalilula.rs"> KZM Palilule </a>

Po difoltu link je podvučen i obojen plavom bojom. Nakon što ste posetili adresu na koju taj link pokazuje tj. upućuje, linkovi po difoltu postaju purpurne boje. Kada se prelazi preko linka, kursor menja oblik u šaku sa ispruženim kažiprstom čime se ukazuje da se na taj link može kliknuti.

Putanje

Kada kreirate lokalni link (link od jedne stranice ka drugoj stranici unutar istog sajta), generalno ne morate da specificirate ceo URL fajla na koji linkujete. Umesto toga, samo je potrebno da postavite relativnu putanju, a to je putanja od aktuelnog fajla do linkovanog fajla. Na primer ako biste linkovali od stranice o_nama.html do stranice kontakt.html, a obe ove stranice se nalaze u Root folderu, tada bi kod za lokalni link izgledao ovako: <a href=“kontakt.html“>Kontakt</a>

Postoje tri tipa putanja kod linkovanja:

Putanje relativne u odnosu na dokument – Ovaj tip linka specificira putanju i ime dokumenta na koji se linkuje, kao na primer kontakt.html ili galerija/nove_slike.html. Kod ovog tipa linkovanja ideja je da ne morate da dodajete apsolutni (ceo) URL uključujući i http:// da bi linkovi radili jer se svi linkovani fajlovi nalaze na Root nivou, ili u Root lokalnom folderu, ili u nekom podfolderu. Putanja galerija/nove_slike.html kazuje čitaču da se pomeri jedan nivo ispod u hijerarhiji foldera, od Root nivoa do foldera „galerija“ i tu pronađe fajl koji se zove planina.html. Ako biste želeli da na stranici nove_slike.html postavite link koji će voditi ka stanici index.html, dodaćete dve tačke i slash (../) ispred imena fajla ../index.html. Ove dve tačke kazuju čitaču da se pomeri nivo iznad u hijerarhiji foldera. Sledeća tabela prikazuje različita scenarija i može vam pomoći da malo bolje razumete strukturu putanja.

Folderi i fajlovi su sledeći:

folderi linkova

Putanja Link
Od index.html do index_test.html index_test.html
Od index_test.html do nove_slike.html galerija/nove_slike.html
Od nove_slike.html do stare_slike.html stare_slike.html
Od nove_slike.html do index_test.html ../index_test.html
Od nove_slike.html do trece_slike.html treci_folder/trece_slike.html
Od index_test.html do trece_slike.html galerija/treci_folder/trece_slike.html
Od trece_slike.html do index_test.html ../../index_test.html

Apsolutne putanje – Apsolutna putanja je ceo URL do linkovanog fajla kao u sledećem kodu http://www.mojsajt.com/galerija/nove_slike.html. Ova vrsta putanja se mora koristiti kada se linkuju fajlovi koji se nalaze na drugim serverima, kao na primer link sa vašeg sajta ka vašoj facebook stranici..

Kreiranje linkova

Najlakši način da dodate link na vašu stranicu u Dreamweaver-u je da selektujete tekst, sliku ili neki objekat na stranici i zatim u Property Inspector-u u Link polju upišete putanju linka.

Pored link polja postoje dve ikonice – Point to file i Folder ikonica.

Point to file – Kliknite na ovu ikonicu i povucite meticu do fajla na koji želite da linkujete u Files panelu. Otpustite taster miša kada naciljate na željeni fajl, tada Dreamweaver upisuje automatski putanju u Link polje.

Folder – Kliknite na ikonicu foldera da bi se otvorio Select File dijalog boks, pronađite fajl na koji želite da linkujete i kliknite na OK. Dreamweaver upisuje link u Link polju u Property Inspector-u.

Kada unesete putanju tj. link, polje Target se aktivira. Kada kliknete na neki link, podrazumeva se da se novi dokument otvara u istom prozoru Web čitača u kome je prethodno bio otvoren tekući dokument. HTML omogućava da zadate da link treba da se otvori u novom prozoru Web čitača ili ako se radi o Frame-ovima, u određenom Frame-u, pomoću opcionalnog atributa Target. Ako želite da se novi dokument otvori u posebnom prozoru čitača, zadaćete atributu target vrednost _blank.

KOD:

<a href="http://www.facebook.com"  target="_blank" >Fejsbuk</a>

DIZAJN:

Tool tip atribut: Kada stanete mišem preko nekog linka da bi se pojavilo objašnjenje o tom linku potrebno je uneti atribut title.

KOD:

<a href="http://www.facebook.com" target="_blank"  title="Idi na Fejsbuk " >Fejsbuk</a>

DIZAJN:

Tekstualni linkovi se mogu kreirati od jedne reči, rečenice, pasusa ili čak cele stranice teksta.

Da biste kreirali link od slike, selektujte sliku u Design prikazu, zatim u Property Inspector-u u polju Link unesite putanju. Kada dodate link slici, pojavljuje se plava linija oko slike koja ukazuje na link. Ova linija se može ukloniti tako što ćete postaviti Border na 0 u Property Inspector-u.

Kreiranje email linkova

Da biste kreirali email link u Dreamweaver-u, kliknite na Insert dugme u meniju aplikacije, zatim izaberite Email Link, otvoriće vam se Email Link dijalog boks. U Text polje unećete tekst koji će se pojaviti kao link u čitaču, na primer kontakt@mojsajt.com ili kontakt. U E-Mail polje unećete email adresu. Dreamweaver će uneti sledeći kod:

KOD:

<a href="mailto:kontakt@mojsajt.com">Kontakt</a>

DIZAJN:

Takođe možete obeležiti tekst i u Properties baru u polju za link unesite mailto:kontakt@mojsajt.com

<h4 >Imenovana sidra

Ova vrsta linka vodi do određenog mesta na strani u okviru vašeg sajta. Sastoji se iz dva dela: imena (Name anchor) i linka do tog imena (anchor).

Ime postavljate na mesto gde vaš link treba da vodi, stavite kursor na to mesto , i ime ubacite sa Insert — Named Anchor . npr pri vrhu ove strane sam ubacio ime sidra pod nazivom osnovno. U prikazu strane ovaj deo sidra se ne vidi. U kodu se pojavljuje <a name=“osnovno“ id=“osnovno“></a> U Design delu se pojavljuje mala žuta sličica sidra.

Link ka sidru je u formatu

<a href=“#ime_sidra“>Kliknite ovde</a>

odnosno u polju za link ubacite simbol # pa ime sidra (bez razmaka). Ukoliko želite link ka određenom delu neke druge strane format je sledeći:

<a href=“druga_strana.html#ime_sidra“>Kliknite ovde</a>

KOD:

<a href="#osnovno">Kliknite ovde</a> da se vratite na osnovno o linkovima.

DIZAJN:

Kliknite ovde da se vratite na osnovno o linkovima.

Sidra se uglavnom koriste za strane sa puno teksta, kako bi olakšali vraćanje na vrh strane (npr Nazad na vrh ) ili pri izradi Sadržaja.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.