Dreamweaver

Dreamweaver.qxd 16.1.
2004 13:32 Page 1

Dreamweaver.qxd 16.1.2004 13:32 Page v
PREGLED SADRŽAJA
UVOD — xi
01. POGLAVLJE: Upoznavanje s Dreamweaverom MX — 1
02. POGLAVLJE: Stvaranje prve web-stranice — 11
03. POGLAVLJE: Osnovni elementi web-stranice — 21
04. POGLAVLJE: Rad sa slikama — 33
05. POGLAVLJE: Rad s tablicama — 45
06. POGLAVLJE: Korištenje frameova — 57
07. POGLAVLJE: CSS — 69
08. POGLAVLJE: Layeri — 81
09. POGLAVLJE: Klijentske skripte — 93
10. POGLAVLJE: Siteovi — 103
11. POGLAVLJE: Predlošci — 119
12. POGLAVLJE: Napredna navigacija — 133
13. POGLAVLJE: Korisni alati — 143
KAZALO — 153
Dreamweaver.qxd 16.1.2004 13:32 Page 21
OSNOVNI ELEMENTI
WEB-STRANICE
U ovom poglavlju nauèit æete što su linkovi i
03. kako se stvaraju, te kako se na jednostavan

naèin korištenjem podnaslova, poravnavanja i
listi može oblikovati sadržaj web-stranice.
Dijelovi HTML stranice

Kako biste u potpunosti razumjeli način rada HTML stranice, morat ćete
upoznati i HTML kôd. On opisuje samu web-stranicu i sadrži upute o tome
na koji ju način prikazati. HTML stoga nije programski, već opisni jezik.
BRZI VODIÈ KROZ DREAMWEAVER MX 2004
Slika 3-1:
Slika 3-1: HTML kôd nove web-stranice
Nakon što stvorite novu web-stranicu, njen HTML kôd će biti jednostavan
(bez prve linije koja opisuje tip korištenog kôda, što je zasad nebitno):
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type” content=”text/html;
charset=windows-1250”>
</head>
<body>
</body>
</html>
Već smo prije spomenuli tagove, osnovne građevne elemente HTML stranice. To
su upute koje se navode unutar < i > znakova. Svaki tag ima i svoje područje
na koje djeluje, a kraj njegovog djelovanja označava se s </ i > znakovima.
Tako je kompletan HTML kôd web-stranice sadržan unutar “html” taga, odnos-
no nalazi se između “<html>” i “</html>” tagova.
Sama HTML stranica sastoji se od dva dijela, zaglavlja i tijela stranice. U zaglav-
lju se nalaze razne upute, poput kodne stranice i naslova. Zaglavlje se ozna-
22
03. OSNOVNI ELEMENTI WEB-STRANICE
čava tagom “<head>”, a upravo ste naučili i da je kraj zaglavlja označen s

“</head>”.
Slika 3-2:
Dijelovi HTML stranice
Unutar tijela stranice nalazi se njezin sadržaj. Sadržaj stranice označen je BODY
tagom. Vratite li se natrag u dizajnerski način rada (klikom na gumb Design ili
preko izbornika View – Design), obratite pozornost na dno prozora sa stranicom.
Tamo ćete pronaći trenutno aktivni tag unutar kojeg dodajete sadržaj.
Slika 3-3:
Na dnu prozora sa stranicom prikazuje se trenutno aktivni tag
Pogledom na aktivni tag možete u svakom trenutku saznati u kojem se kon-

tekstu nalazite i time dobivate bolju predodžbu samoga kôda. Zbog organiza-
cije HTML stranice, odnosno činjenice da se kompletan sadržaj nalazi unutar
23
BODY taga, u dizajnerskom načinu rada nećete moći uređivati zaglavlje i nje-
gove tagove.
Linkovi
Kada biste morali istaknuti najvažniji element web-stranica, tada bi to u svakom
slučaju bili linkovi. Linkovi ili veze služe za međusobno povezivanje web-stra-
nica. Zamislimo na trenutak što bi bilo da ih nitko nikad nije izmislio – tada bi
svaka stranica na webu bila zasebna i morali bismo ručno upisivati adresu web-
stranice koju želimo posjetiti. Na svu sreću, situacija nije takva i, zahvaljujući
njima, krećemo se webom klikanjem po raznim linkovima.
Web-site je niz međusobno povezanih stranica iste tematike. Zato najčešće nije
dovoljno izraditi samo jednu web-stranicu – za imalo složeniju temu trebat će
vam nekoliko povezanih stranica. Njih ćete, kako ih budete stvarali, spremati
u zajednički direktorij i povezati linkovima.
Za početak, napravite još jednu web-stranicu i spremite ju u isti direktorij sa stra-
nicom “index.htm” napravljenom u prošlom poglavlju. Možete joj dati ime “stra-
nica.htm”. Cilj nam je povezati te dvije stranice i omogućiti posjetitelju da se
kreće između njih uz pomoć linkova.
Stvaranje linkova je doista jednostavno: napišite tekst koji želite pretvoriti u link,
te ga označite mišem (pritisnite lijevi gumb miša i povucite mišem da označite
cijeli tekst). Link ćete napraviti uz pomoć Properties panela.
Slika 3-4:
Properties panel poslužit će vam za stvaranje linkova
U desnom dijelu panela nalazi se opcija Link. Kliknite na sličicu direktorija i otvo-
rit će vam se prozor s izborom datoteka prikazan na slici 3-5. U njemu prona-
đite stranicu na koju želite da pokazuje link, odaberite ju i kliknite na OK.
24
Slika 3-5:
Izaberite
web-stranicu na koju
želite napraviti link
Umjesto biranja stranice pomoću prozora s izborom datoteka, mogli ste direkt-
no upisati adresu stranice u padajući izbornik. Nakon što odaberete stranicu na
koju link pokazuje, tamo će se ispisati njena adresa.
Želite li napraviti link na neku stranicu na webu, upišite njenu adresu u padajuæi
izbornik. Želite li tako, primjerice, napraviti link na web-stranice èasopisa Bug, na- SAVJET
pisat æete kompletnu adresu “http://www.bug.hr/”. Nipošto nemojte zaboraviti
prefiks “http://”, jer on pokazuje da se radi o stranici na webu, a ne nekoj koja je
dio vašeg sitea.
Ako želite maknuti link, odnosno vratiti tekst u normalno stanje tako da klik na
njega ne vodi na drugu stranicu, postavite pokazivač bilo gdje unutar linka. U pa-
dajućem izborniku označenom s Link u Properties panelu bit će ispisana adresa
stranice na koju link vodi – samo ju izbrišite iz izbornika i link će prestati postojati.
Ukoliko, pak, želite maknuti kompletan tekst i link, možete odmah izbrisati tekst
na stranici, a link će automatski nestati.
Podešavanje boje linkova

Link će na novoj stranici biti podvučen i u plavoj boji. No, nakon što isprobate
stranicu i posjetite link, on će promijeniti boju u ljubičastu.
25
Razlog tomu je jednostavan – linkovi imaju boju ovisno u kojoj od četiri situa-
cije se nalaze. Jedna se boja prikazuje kad link vodi na već posjećenu stranicu,
druga boja kad se miš nalazi iznad linka, treća u trenutku kad je gumb miša pri-
tisnut iznad linka (posjetitelj želi slijediti link), a četvrta u normalnoj situaciji (miš
se ne nalazi iznad linka i link nije još posjećen).
Svaki preglednik, kao i Internet Explorer, ima vlastite definicije boje linkova za
sve četiri situacije, no te se boje ne uklapaju baš uvijek u izgled stranice. Zato vam
Dreamweaver nudi mogućnost definiranja tih boja za svaku web-stranicu.
Slika 3-6:
Opcije za
promjenu boje
linkova
Kliknite na Modify – Page Properties ili pritisnite CTRL+J i otvorit će se prozor

s postavkama stranice. U lijevoj strani kliknite na Links, a u desnoj strani prika-
zat će vam se opcije za linkove.
Linku tako možete promijeniti i postavke teksta, pa tako možete napraviti da
oni budu ispisani drugačijim fontom i drugačije veličine. No, vas zanimaju bo-
je – ponuđene su četiri opcije koje odgovaraju maloprije opisanim situacijama.
Link color boja bit će iskorištena u normalnoj situaciji, Visited links određuje bo-
ju posjećenih linkova, Active links trenutno aktivnih (u trenutku kad surfer na njih
klikne), a Rollover links određuje boju linkova u trenutku kad se iznad njih na-
lazi miš.
No, to nije sve – iako su inače linkovi uvijek podvučeni, vi to možete promije-
niti. U opciji Underline style odaberite kad će linkovi biti podvučeni. Tako mo-
žete namjestiti da su podvučeni samo kad se iznad njih nalazi miš, da nikad ni-
su podvučeni ili da su podvučeni kad se iznad njih ne nalazi miš. Na vama je
da izaberete!
26
I linkovi imaju svoj HTML tag, a on ima sljedeæi oblik:

NOVI
<a href=”adresa_stranice.html”>tekst linka</a> TERMIN
Unutar href atributa upisuje se adresa stranice na koju link vodi, a izmeðu poèet-
ka i kraja A taga upisuje se tekst linka.
Oblikovanje teksta
Pri oblikovanju teksta na web-stranicama imajte samo jednu stvar na umu – tekst
mora biti čitak. Već ste prije naučili odabrati font kojim će tekst biti ispisan, a
to već bitno pridonosi čitljivosti.
Za početak, veće količine teksta razbijte na manje dijelove. Ukoliko želite do-
dati novi odlomak, pritisnut ćete tipku Enter. No, želite li prijeći u novi redak,
tada pritisnite kombinaciju tipki SHIFT+Enter. Tag P označava odlomak, a tag
BR prelazak u novi red.
Veličina slova također je veoma bitna za čitljivost teksta. I dok ste među postav-
kama stranice također mogli namjestiti veličinu slova za cijelu stranicu, Proper-
ties panel pomoći će vam oko mijenjanja veličine slova za dio teksta.
Slika 3-7:
Ponuđene veličine slova
Označite tekst kojem želite promijeniti veličinu i pronađite u Properties pane-

lu padajući izbornik Size. U njemu se, kao što je prikazano na slici 3-7, nalaze po-
nuđene opcije veličine slova.
Ukoliko ju postavite na None, tekst će biti iste veličine kao i na ostatku strani-
ce, tj. njega će odrediti veličina odabrana među postavkama stranice. Zatim su
27
vam ponuđene brojčane veličine između 9 i 36. Odaberete li njih, morat ćete
odrediti i mjernu jedinicu iz desnog padajućeg izbornika. Tako vam na raspo-
laganju stoje pikseli, točke, centimetri i druge veličine, a na vama je da eksperi-
mentirate i pronađete odgovarajuću.
U padajućem izborniku za veličinu slova ponuđene su i opisne oznake poput
“x-small” ili “xx-large”. Slovo “x” predstavlja “extra” pa bismo “xx-large” mog-
li prevesti u “extra extra large”. Te veličine se određuju u odnosu na veličinu teks-
ta postavljenu među postavkama stranice, pa tako možete prikazati tekst većim,
mnogo većim ili, pak, manjim slovima nego što je na ostatku stranice.
UPOZORENJE
Veæina preglednika ima opciju za podešavanje velièine teksta kojima se može poveæati
font stranice ili prema potrebi smanjiti. U Internet Exploreru te se opcije nalaze pod View
– Text size. Ukoliko postavite velièinu fonta korištenjem fiksnih vrijednosti (brojèana vri-
jednost + mjerna jedinica), velièina tog teksta se korištenjem tih opcija neæe moæi mije-
njati. Želite li omoguæiti posjetiteljima da prema potrebi sami promijene velièinu teksta
(što je posebno korisno ukoliko žele proèitati veæe kolièine teksta, a imaju slabije moni-
tore), definirajte relativne velièine teksta bez korištenja mjernih jedinica (npr. “x-large”).
f) poravnanje g) upisivanje adrese na

a) izbor fonta b) veličina fonta e) stil teksta teksta koju link vodi
c) mjerna jedinica h) opcija za izbor

d) boja fonta i) stvaranje listi j) uvlačenje teksta
veličine fonta stranice na koju
vodi link
Slika 3-8:
Opcije Properties panela za tekst
Baš kao i u drugim alatima za unos i obradu teksta, tako i u Dreamweaveru mo-
žete zadebljati slova ili ih ispisati u nakošenom stilu. Pritiskom na CTRL+B uklju-
28
čujete i isključujete pisanje zadebljanog teksta (bold), a pritiskom na CTRL+I

uključujete i isključujete pisanje nakošenim stilom (italic). Možete iskoristiti i
opcije u Properties panelu – na slici 3-8 (e) su označene opcije za podešava-
nje stila teksta.
Velièine naslova
Ako ste već radili u alatima poput Microsoftovog Worda, naučili ste koristiti
različite veličine naslova, odn. headinga. Baš kao i u Wordu, i u Dreamweaveru
možete definirati veličine šest naslova (Heading 1 do Heading 6).
Njih možete iskoristiti također za razbijanje dugih tekstova, a oni i olakšavaju
i snalaženje. Tako ćete najvažnije naslove ispisati korištenjem Headinga 1, ne-
što manje važne Headingom 2, njihove podnaslove Headingom 3, itd.
Veličine svih naslova možete namjestiti na razini cijele stranice. Vratite se sto-
ga opet među postavke stranice (Modify – Page Properties ili CTRL+J) i odabe-
rite u lijevoj strani prozora Headings.
Slika 3-9:
Namještanje
veličine naslova
Svakom od naslova namjestite veličinu – odaberite veličinu fonta i, ako treba,

mjernu jedinicu. Možete svakom i promijeniti boju, a ukoliko to ne učinite, oni
će biti iste boje kao i ostatak teksta na stranici.
Želite li neki tekst pretvoriti u naslov, označite ga i u Properties panelu u For-
mat izborniku odaberite odgovarajući stil. Želite li, pak, pretvoriti tekst u norma-
lan oblik, u istoj listi odaberite Paragraph opciju.
29
Pravilno oblikovanje teksta

1. Meðu postavkama stranice odaberite font, te podesite boje teksta i po-
zadinsku boju.
2. Razbijte duge tekstove na odlomke.
3. Izmeðu nekoliko odlomaka ubacite podnaslove (headinge).
4. Istaknite važne pojmove korištenjem zadebljanog i nakošenog teksta.
5. Nemojte koristiti više razlièitih fontova i boja za isti tekst.
Liste, poravnavanje i uvlaèenje teksta

Kao što ste mogli vidjeti na slici 3-8, nudi vam se još nekoliko opcija za obliko-
vanje teksta. One su veoma slične onima iz drugih programa za uređivanje teksta,
poput Microsoftovog Worda, pa ćete se veoma brzo snaći.
Liste mogu biti poredane i neporedane. Poredane liste koriste redne brojeve (1,
NOVI
2, 3, itd.) ili slova (A, B, C, itd.) za oznaèavanje svojih elemenata, a neporedane svo-
TERMIN
je elemente oznaèavaju toèkicama.
Želite li tako napraviti poredanu listu, kliknite na neku od opcija označenih s (i)
na slici 3-8. Svakoj poredanoj listi možete promijeniti stil i način brojanja. Po-
stavite kursor bilo gdje unutar liste i u Properties panelu kliknite na List item gumb.
Slika 3-10:
Postavke liste
30
Tako svakoj listi možete odrediti tip (da li je poredana ili neporedana), te stil.
Ukoliko radite s poredanom listom, moći ćete odrediti kako se broje članovi –
slovima, arapskim ili, pak, rimskim brojevima, a možete odrediti i od kojeg bro-
ja počinje lista (Start count opcija). Radite li, pak, s neporedanom listom, moći
ćete odrediti stil točkice koja se prikazuje uz svaki element.
Kompletni tekst možete i poravnati na lijevu (Align Left) ili desnu stranu (Align
Right), po sredini (Align Center) ili podjednako duž cijele širine ekrana (Justify).
Samo se pozicionirajte negdje unutar odlomka koji želite poravnati i kliknite
odgovarajuću opciju (označene su s (f) na slici 3-8).
Tekst možete i uvlačiti prema potrebi – želite li ga uvući, kliknut ćete na Text In-
dent opciju, a želite li ga, pak, vratiti natrag i izvući, kliknut ćete na Text Outdent.
Obje opcije označene su s (j) na slici 3-8.
SADA ZNATE
• HTML kôd jednostavne stranice
• Povezati web-stranice linkovima
• Namjestiti boju linkova za odreðenu situaciju
• Promijeniti velièinu slova
• Koristiti naslove i podnaslove
• Pravilno oblikovati tekst
31
32

Dreamweaver

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweaver

Uploaded by

Copyright:

Available Formats

Dreamweaver.qxd 16.1.

2004 13:32 Page 1

01. POGLAVLJE: Upoznavanje s Dreamweaverom MX — 1

02. POGLAVLJE: Stvaranje prve web-stranice — 11

03. POGLAVLJE: Osnovni elementi web-stranice — 21

04. POGLAVLJE: Rad sa slikama — 33

05. POGLAVLJE: Rad s tablicama — 45

06. POGLAVLJE: Korištenje frameova — 57

07. POGLAVLJE: CSS — 69

08. POGLAVLJE: Layeri — 81

09. POGLAVLJE: Klijentske skripte — 93

10. POGLAVLJE: Siteovi — 103

11. POGLAVLJE: Predlošci — 119

12. POGLAVLJE: Napredna navigacija — 133

13. POGLAVLJE: Korisni alati — 143

03. kako se stvaraju, te kako se na jednostavan

Dijelovi HTML stranice

BRZI VODIÈ KROZ DREAMWEAVER MX 2004

03. OSNOVNI ELEMENTI WEB-STRANICE

čava tagom “<head>”, a upravo ste naučili i da je kraj zaglavlja označen s

Pogledom na aktivni tag možete u svakom trenutku saznati u kojem se kon-

BRZI VODIÈ KROZ DREAMWEAVER MX 2004

03. OSNOVNI ELEMENTI WEB-STRANICE

Podešavanje boje linkova

BRZI VODIÈ KROZ DREAMWEAVER MX 2004

Kliknite na Modify – Page Properties ili pritisnite CTRL+J i otvorit će se prozor

03. OSNOVNI ELEMENTI WEB-STRANICE

I linkovi imaju svoj HTML tag, a on ima sljedeæi oblik:

Označite tekst kojem želite promijeniti veličinu i pronađite u Properties pane-

BRZI VODIÈ KROZ DREAMWEAVER MX 2004

f) poravnanje g) upisivanje adrese na

c) mjerna jedinica h) opcija za izbor

03. OSNOVNI ELEMENTI WEB-STRANICE

čujete i isključujete pisanje zadebljanog teksta (bold), a pritiskom na CTRL+I

Svakom od naslova namjestite veličinu – odaberite veličinu fonta i, ako treba,

BRZI VODIÈ KROZ DREAMWEAVER MX 2004

Pravilno oblikovanje teksta

2. Razbijte duge tekstove na odlomke.

3. Izmeðu nekoliko odlomaka ubacite podnaslove (headinge).

4. Istaknite važne pojmove korištenjem zadebljanog i nakošenog teksta.

5. Nemojte koristiti više razlièitih fontova i boja za isti tekst.

Liste, poravnavanje i uvlaèenje teksta

03. OSNOVNI ELEMENTI WEB-STRANICE

• HTML kôd jednostavne stranice

• Povezati web-stranice linkovima

• Namjestiti boju linkova za odreðenu situaciju

• Promijeniti velièinu slova

• Koristiti naslove i podnaslove

• Pravilno oblikovati tekst

You might also like