1. Uvod
Adobe Dreamweaver CS5 jedan je od najpoznatijih alata koji nam omogućuje stvaranje
sadržaja za web. Prvobitno razvijan od strane kompanije Macromedia, danas je pod okriljem
kompanije Adobe (Adobe je preuzeo Macromediju 2005).
Kutija Dw softvera
Sve lekcije ovoga kursa obrañuju alate i primere iz verzije CS5.5. Prikazi ekrana su iz
Windows verzije. Mac verzija je, osim nekih vizuelnih razlika koje su uslovljene operativnim
sistemom, praktično ista. Glavna razlika izmeñu Win i Mac okruženja je tastaturna prečica
alt, odnosno cmd.
Molim Vas da ne preskačete lekcije i da ih prelazite redom, uporedo vežbajući primere na
koje se lekcije nadovezuju. Primeri su detaljnije obrañeni u video-materijalima koji prate
lekcije. Sa druge strane, ove tekstualne jedinice sadrže informacije kojih nema u videomaterijalima. To znači da se tekstualni i video-materijali dopunjuju i trebalo bi ih koristiti
kao celinu. Nikako nemojte zanemariti ove tekstualne jedinice u korist samo videomaterijala, ili obrnuto.
Tokom kursa, imperativ nije postavljen na prevodu svih pojmova, tj neki termini su
ostavljeni u originalu na engleskom jeziku, jer ćete ih kao takve koristiti u daljem radu.
Osnovni pojmovi
Krajnji proizvod koji svaki web dizajner kreira jeste web strana (strana na netu, strana sajta
i slično – puno je naziva za istu stvar) koja je osnovna jedinica svakog sajta.
U osnovi, svaka web strana se bazira na HTML jeziku i ona je tekstualni dokument, pisan i
organizovan na specifičan i tačno odreñen način. Ukoliko bismo otvorili html stranu u
Copyright © Link group
notepadu, otvara se i prikazuje html kod. Sa druge strane, kada tu istu stranu pokrenemo u
web browseru, on je interpretira i prikazuje na pravi način.
Ukoliko ovi pojmovi deluju konfuzno, ne brinite, u narednim lekcijama ćemo ih detaljno
razjasniti.
Postoje i mnoge druge tehnologije i programski jezici koji se pojavljuju na web stranama, ali
za sada ćemo ostati u domenu HTML-a. Na primer, PHP je programski jezik veoma
zastupljen na današnjem netu. Sam PHP je potpuno nezavistan od HTML-a, ali se njegov
kod prikazuje unutar HTML strane.
Šta je HTML
HTML (HyperText Markup Language) je markup jezik pomoću kojih kreiramo web stranice.
Mogli bi se reći da je i programski jezik, ali to nije u potpunosti tačno.
HTML je 1990. godine kreirao Tim Berners Li, tada zaposlen u CERN-u. Uporedo je stvoren i
prvi web browser. U to doba, internet je postojao, ali u mnogo drugačijem obliku nego
danas. HTML je, u tom prvobitnom periodu razvoja, omogućio lakšu saradnju na projektima,
na velikoj udaljenosti. Pomoću njega prenosimo kod (tekst) od izvora do primaoca, čiji
browser taj kod interpretira u smislen dokument.
Danas, HTML se znatno razlikuje od te prvobitne verzije, ali je zadržao osnove. Berners-Lee
nije zaštitio HTML i objavljen je pod open source uslovima. Tokom godina, konstantno je
unapreñivan, a i osnovan je W3C (World Wide Web Consortium - www.w3.org) koji se bavi
standardizacijom i unapreñenjem HTML i drugih standarda. Trenutno je u razvoju nova
verzija HTML-a pod verzijom 5. Finalna verzija se očekuje 2014. ali već sada možemo
koristiti neke delove. Za sada se koristi html 4, odnosno xhtml 1 i njima ćemo se baviti u
ovom kursu.
Osnova HTML dokumenta je sledeća:
<html>
<head>
<title>Naziv stranice</title>
</head>
<body>
<h1>Naslov</h1>
<p>Tekst u okviru jednog paragrafa strane</p>
</body>
</html>
dok bi gornji kod, prikazan u web browseru, izgledao ovako:
Copyright © Link group
Prikaz jedne veoma proste html strane u browseru
Kao što možemo i videti na primeru iznad, html kod sadrži tekstualne delove koji nisu
vidljivi (html tagovi) i deo teksta koji je vidljiv korisniku.
Nešto ranije u tekstu pomenuli smo HTML i XHTML. XHTML (eXtensible HyperText Markup
Language) je forma HTML jezika koja proširuje funkcionalnost dokumenata tako što se
usklañuje sa striktnijim Xtensible Markup Language (XML) pravilima. XHTML je ne samo
čistija i striktnija verzija HTML-a, već i odlično radi u kombinaciji sa CSS-om i potpuno je
podržan od strane Dreamweavera.
XHTML datira iz 2000. godine kada je W3C predložio da XHTML bude novi jezik za kreiranje
web stranica. 2002. XHTML je postao prihvaćen standard, zbog čega je trebalo da svi čitači
sadrže ugrañenu podršku za XHTML.
Trenutno se koristi HTML verzija 4.01, kao i XHTML verzije 1.0, odnosno 1.1.
Kada govorimo o HTML, ali i XHTML dokumentima, postoje dve varijante pisanja
dokumenata – transitional i strict – sa čime ćemo se detaljno upoznati.
Svi HTML i XHTML fajlovi imaju esktenziju .html (eventualno .htm). Važno je zapamtiti da
ekstenzija .html nije vezana za odreñenu aplikaciju, poput .doc, koja je vezana za MS Word,
ili .psd, koja odgovara Adobe Photoshopu. Pošto je html tekstualni format, čita se i edituje
bilo u notepadu, Dreamweaveru ili bilo kom drugom text editoru. Razlika je "samo" u
opcijama koje nam program nudi u radu sa html-om. Sa druge strane, ukoliko .html
pokrenemo u browseru poput Mozilla FireFoxa ili Chroma, on će je interpretirati na odreñen
način.
Copyright © Link group
Dalje u tekstu, kada se pominje HTML, misli se na HTML i XHTML zajedno, ukoliko nije
drugačije naznačeno.
Šta je DW
Adobe Dreamweaver je komercijalna aplikacija (ne preuzima se besplatno) koja se koristi za
kreiranje sadržaja za internet, a koja pri tom omogućava lak pregled kreiranog sadržaja
interno, u okviru preview dela, ili na lokalno instaliranim browserima.
Adobe Dreamweaver u trenutnoj verziji CS5.5 (DW dalje u tekstu) je jedan on
najpopularnijih alata u svojoj branši, i to ne bez razloga. Dw pruža široke mogućnosti
različitim korisnicima i mogućnost prilagoñavanja trenutnim potrebama. Osim rada sa HTML
i CSS dokumentima, Dw radi odlično i sa ASP, PHP, JavaScript, ColdFusion i mnogim drugim
tipovima dokumenata. Pored toga, dizajnerima pruža mogućnost WYSIWYG (What You See
Is What You Get) kodiranja, što dosta olakšava rad, pogotovo početnicima koji se prvi put
susreću sa kodiranjem za web. To praktično znači da možemo unositi elemente na
jednostavan, vizuelan način, dok će "ispod haube" Dw kreirati kod za nas. Povrh svega, DW
je jedan od alata iz popularne Adobe CS porodice, što mu pruža mogućnosti odlične
integracije sa ostalim alatima.
U novijim verzijama, dodate su i neke nove opcije, poput podrške za neka CMS rešenja,
SVN sistema, test opcije Adobe Browser Lab i slično. Podržava i ekstenzije (eng. Extensions)
koje su dodaci ili složene aplikacije, a koje uključujemo u Dw i time proširujemo njegovu
funkcionalnost. Uglavnom su kreirane od strane trećih lica, odnosno ne od strane kompanije
Adobe. Jedna ekstenzija, na primer, je HTML5 ekstenzija za CS5 verziju, a koja pruža
mogućnosti lakšeg rada sa HTML5 fajlovima (CS5.5 tu podršku ima u startu).
Dw, poput ostalih HTML editora, kreira sadržaj lokalno, a onda taj sadržaj prebacuje
(aplouduje) na udaljeni server koristeći FTP, SFTP ili WebDAV. Za razliku od malopre
pomenutih editora, DW ima najveći spektar mogućnosti, što je lepo ilustrovano na Wikipediji
na strani:
http://en.wikipedia.org/wiki/Comparison_of_WYSIWYG_HTML_editors#Editor_features
Copyright © Link group
2. Interfejs
Na početku ćemo se upoznati sa radnim okruženjem, a ukoliko ste radili u nekom drugom
Adobe CS programu, poput Photoshopa CS5, onda će Vam princip panela i samo radno
okruženje (Workspace) biti prilično poznato, ali sa nekim razlikama.
Welcome screen
Kada pokrenemo DW sačekaće nas Welcome screen ili ekran dobrodošlice, prikazan na slici
ispod.
Welcome screen (ekran dobrodošlice)
Welcome screen se pojavljuje na radnoj površini prilikom pokretanja programa. On je
automatski omogućen, te će se prikazivati prilikom svakog startovanja DW-a. Ukoliko to ne
želimo, imamo mogućnost da ga isključimo u levom donjem delu prozora, štikliranjem
opcije Don’t show again.
Sam welcome screen prikazuje u levom delu preñašnje dokumente na kojima smo radili u
vidu liste (Open a Recent Item), kao i opciju za otvaranje bilo kog fajla (Open…), u sredini
opcije za kreiranje novih fajlova (Create New) i kreiranje novog sajta, kao i dodatne opcije,
Copyright © Link group
dok se u desnom i donjem delu pojavljuju linkovi ka video-tutorijalima koje je pripremio
Adobe, linkovi ka help materijalima i tako dalje.
Ukoliko izaberemo kreiranje novog dokumenta ili otvaranje postojećeg, welcome ekran će
odmah nestati, a pojaviće se ponovo ukoliko zatvorimo sva dokumenta (pod uslovom da
nije isključen). Sve opcije koje se nalaze na njemu, možemo naći i u padajućim menijima, o
čemu će biti reči tokom kursa.
Radno okruženje
Na slici ispod prikazano je radno okruženje Dw-a sa kreiranim novim html dokumentom u
split prikazu. I Vaš radni prostor bi trebalo da izgleda isto ili barem slično, zavisno od
rezolucije monitora. Ukoliko ste menjali radno okruženje, preduzmite sledeće korake:
izaberite iz padajućeg menija opciju Window > Workspace Layout > Designer. Tako ćete
vratiti na default podešavanja jer radno okruženje može izgledati i funkcionisati potpuno
drugačije.
Radno okruženje
Na radnom prostoru možemo razaznati nekoliko celina: Menu bar, Application bar,
Workspace menu, Document title bar, Document toolbar, Browser navigation
toolbar, Coding toolbar, Property inspector i ostale panele i toolbarove, kao i sam
Copyright © Link group
prikaz dokumenta na više načina (design view, code view i trenutno prikazan split, koji je
kombinacija ova dva).
•
•
•
Code view, kako mu samo ime kaže, prikazuje kod dokumenta.
Design view prikazuje približan izgled strane u browseru, dok
Split prikazuje dokument na oba načina istovremeno, tako što deli ekran na dva
dela.
Važno je u startu napomenuti da, iako je design prikaz prilično tačan, nikada ne može
realno prikazati stranu kao što to čine browseri. Naime, Dw dodaje razne vizuelne elemente
u okviru design prikaza kao pomoć u razvoju, i ti detalji neminovno remete prikaz. Dakle,
kada želimo da testiramo stranu, moramo je pokrenuti u browseru i testirati ili koristiti live
view, a ne uzdati se samo u design prikaz unutar Dw. U toku kursa ćemo na primerima
proveriti i pokazati ove detalje.
Menu bar i Application bar
Na vrhu prozora nalazi se komandna linija (menu bar), a čak i ukoliko ste početnik u radu
sa računarima, primetićete da je komandna linija konceptualno slična svim ostalim
programima koji imaju opcije otvaranja fajlova, čuvanja, korigovanja i tako dalje.
Odmah desno od menu bar-a se nalazi application bar koji sadrži tri ikonice sa padajućim
menijima. Sa ovim opcijama ćemo se detaljnije upoznati kasnije u toku kursa.
Menu bar i Application bar
Menu bar se sastoji se od padajućih menija i klikom na naziv otvaraju se njihovi podmeniji
sa ostalim opcijama. Ako kliknemo levim tasterom miša na neku komandu, rezultat će
varirati u zavisnosti od komande koju smo izabrali.
•
•
•
ukoliko komanda koju smo izabrali iza svog imena nema prateće simbole, Dw će je
momentalno izvršiti.
ukoliko komanda iza svoga naziva ima tri tačke (...) otvoriće se okvir za dijalog i
dalja podešavanja.
ukoliko komanda ima trougao pored imena, koji pokazuje na desno, pojaviće se
podmeni, posle toga možemo odabrati neku od ponuñenih komandi iz podmenija.
Većina komandi u desnom delu sadrži i ispisanu tastaturnu prečicu. To znači da možemo
lako pozvati komandu, ukoliko pritisnemo odgovarajuće tastere na tastaturi.
Copyright © Link group
File menu Dw-a
Na slici iznad, prikazan je otvoren file menu, u kome možemo uočiti standardne operacije za
rad sa dokumentima, kao što su new, open, save i tako dalje. Detaljno o opcijama u ovom,
ali i ostalim menijima, pozabavićemo se tokom kursa.
Rad sa panelima
Iako svim opcijama možemo pristupiti preko pomenutih padajućih menija, Dw pruža lak
pristup većini komandi putem panela. Možemo prikazivati, sakrivati, pomerati, rasporeñivati
panele po svojim željama i potrebama.
Copyright © Link group
Window menu i nekoliko panela
Window padajući meni prikazuje spisak svih dostupnih panela. Takoñe, "štiklirani" su paneli
koji su trenutno aktivni. Takoñe, kao i kod drugih komandi, možemo pozivati, tj.
uključivati/isključivati panele pomoću navedenih tastaturnih prečica. Na primer, panel
insert možemo uključiti/isključiti preko Ctrl+F2.
Na slici ispod prikazana je jedna grupa panela. Možemo uočiti da su u toj grupi tri panela
(files, assets i snippets), od kojih je jedan aktivan i prikazan (assets). Paneli su
predstavljeni pomoću tabova panela na kojima je ispisano njihovo ime. Odreñeni panel
aktiviramo klikom na njegov tab, a automatski će svi ostali paneli iste grupe postati
neaktivni.
Grupa panela - aktivan je Assets panel, dok su Files i Snippets trenutno neaktivni
Copyright © Link group
Iznad grupe panela nalazi se title bar. Ukoliko uhvatimo levim tasterom miša title bar,
pomeraćemo celu grupu panela (slika ispod).
Pomeranje grupe panela
Ukoliko uhvatimo levim tasterom miša tab odreñenog panela, možemo izmestiti panel iz
grupe (slika ispod).
Izdvajanje jednog panela iz grupe
Copyright © Link group
Panele možemo i spajati u grupe. Kada levim tasterom miša uhvatimo tab odreñenog panela
možemo ga dodati željenoj grupi. Dovoljno je da držeći levi taster miša dovedemo panel do
vrha grupe panela dok se ne pojavi plavi sjaj svuda oko grupe (slika ispod). Pošto
otpustimo taster miša, panel će se pridružiti grupi.
Ukoliko želimo, možemo i menjati redosled panela u jednoj grupi, jednostavnim hvatanjem
za tab panela i pomeranjem levo/desno.
Dodavanje jednog panela grupi panela
Copyright © Link group
Za razliku od prethodno prikazane situacije kada smo panel vratili u grupu, možemo panel
postaviti ispod/iznad/pored grupe ili pojedinačnog panela. Naime, u prethodnom primeru se
pojavio plavi sjaj oko cele grupe prilikom prevlačenja. Ukoliko pomeramo panel i dovedemo
ga do, na primer, donje ivice grupe, pojaviće se plavi sjaj, ali samo u donjem delu, kao
linija. Ukoliko tada otpustimo taster miša, panel će se smestiti ispod grupe (slika ispod).
Takoñe, jedan panel (držeći tab) ili grupu panela (držeći title bar grupe) možemo zakačiti
(dockovati) uz ivicu Dw prozora, ili uz druge grupe. Dw pruža širok dijapazon mogućnosti
što se tiče rasporeda i izgleda programa.
Dodavanje panela ispod grupe
Panele, osim što možemo pomerati, možemo i smanjiti (minimizovati). Ukoliko uradimo
dvoklik levim tasterom miša na tab panela, smanjićemo taj panel (ili grupu) kao na slici
ispod. Ukoliko ponovimo dvoklik, panel će se vratiti u svoju veličinu.
Copyright © Link group
Smanjivanje/povećanje panela (grupe)
Ukoliko kliknemo levim tasterom miša na dugme collapse u title baru, smanjićemo panel ili
grupu na ikonice. Tada, klikom na ikonicu otvaramo/zatvaramo panel (slika ispod).
Analogno tome, klik na expand vraća panele na otvoreno stanje.
Pretvaranje panela (ili grupe) na ikonicu(e)
X dugme koje se nalazi u krajnjem desnom uglu zatvara grupu panela ili panel, a iste
možemo ponovo prikazati iz padajućeg Windows menija.
Pored svih pomenutih podešavanja, većini panela možemo menjati i veličinu. Dovoljno je da
doñemo do ivice panela i kursor miša će se promeniti u odgovarajući simbol, kao što se vidi
na slici ispod.
Copyright © Link group
Promena veličine panela
Izbor radnih okruženja
Svaki od ovih predefinisanih workspace okruženja je dizajniran kako bi pomogao kod
odreñenih zadataka. Postoji osam različitih predefinisanih izbora:
•
•
•
•
•
•
•
App Developer - Izabirom ovog radnog prostora dobijamo na levoj strani šest
panela: CSS styles, AP elements, Databases, Bindings, Behaviors, Files, Assets i
Snippets. Prozor dokumenta je u sredini i bez Property Inspectora. Ovaj radni prostor
se koristi kod razvijanja web aplikacija.
App developer Plus - Ovaj radni prostor daje sličan set panela na levoj strani kao i
App Developer Layout. Prozor dokumenta je u sredini, sa Split Code prikazom i
Property Inspectorom ispod koda. Sa desne strane su prikazani u vidu ikonica neki
od panela.
Classic - Ovaj Layout je najsličniji radnom prostoru Dizajner iz prošlih verzija.Na
vrhu je horizontalno prikazan insert panel u vidu grupa i ikonica, dok ostatak dosta
nalikuje novom designer okruženju.
Coder - Ovaj radni prostor ima u centru Code prikaz dokumenta, a sa leve CSS
styles, AP elements, Files, Assets i Snippets panele. Ovo je minimalističko okruženje i
namenjeno kodiranju.
Coder plus - Veoma sličan Coder radnom prostoru, sa tom razlikom da su paneli
Insert, CSS styles i AP elements u vidu ikonica na desnoj strani.
Designer - U centru ovog radnog prostora je prozor dokumenta u Split Code
prikazu, ispod njega Properties Inspector. Sa desne strane su Insert, CSS Styles i Ap
Elements, Files i Assets paneli. Ako ćete raditi sa WYSIWYG editorom i Code
editorom, izaberite ovaj Layout.
Designer Compact - Sličan kao Designer layout, jedina razlika je što su paneli na
desnoj strani prikazani u vidu ikonica.
Copyright © Link group
•
Dual Screen - Ovaj Layout se koristi kada imamo dva monitora jedan pored drugog.
Inicijalno, paneli se prikazuju na levom monitoru, a prozor dokumenta i Code
Inspector se prikazuju na desnom monitoru.
Izbor predefinisanih radnih okruženja - workspace menu
Osim ovih panela, ukoliko su aktivirane live usluge koje Adobe pruža, možda ćemo uočiti i
neke druge panele u pomenutim predefinisanim okruženjima.
Izbor radnog okruženja (workspace) vršimo tako što iz padajućih menija izaberemo:
Window > Workspace Layout > Designer, odnosno okruženje koje želimo. Takoñe, možemo
koristiti workspace menu (prikazan na slici iznad) radi lakšeg pristupa.
Sa druge strane, ukoliko ne želimo da koristimo predefinisana radna okruženja i želimo da
Dw uredimo po sopstvenim potrebama i željama, možemo lako rasporediti panele i njihove
veličine i potom takav raspored sačuvati kao novi workspace. Za tu namenu, uočićemo tri
poslednje opcije koje se nalaze u Window > Workspace Layout meniju, kao i u malopre
pomenutom workspace meniju.
Copyright © Link group
Kreiranje novog radnog okruženja
Dakle, ukoliko želimo da snimimo svoja podešavanja radnog okruženja, podesićemo sve
parametre/pozicije i izabrati New Workspace, a zatim uneti željeno ime, te potvrditi. Tada
će se naš novi workspace pojaviti meñu ostalima. Kasnije pomoću opcije Manage
Workspaces možemo promeniti ime nekom ili obrisati, uz napomenu da ne možemo uticati
na predefinisane.
Ukoliko smo menjali neki postojeći workspace, bilo da se radi o predefinisanom ili našem,
tako što smo menjali panele i njihove dimenzije, uvek možemo vratiti na snimljeno stanje
izborom Reset 'Designer' (odnosno, neki drugi, trenutno izabrani).
Rad sa toolbarovima
Pored panela koje smo ranije pomenuli, Dw poseduje nekoliko vrlo bitnih toolbarova. Njih
možemo prikazati ili sakriti koristeći padajući meni View > Toolbars > (željeni toolbar).
•
Document toolbar - Prikazuje tastere pomoću kojih možemo izabrati način prikaza
dokumenta, razne opcije pregleda, testiranje u browseru etc.
o
o
o
o
o
o
A - Prikazuje samo kod dokumenta (Code View).
B - Prikazuje i kod i dokument vizuelno (Split View).
C - Prikazuje dokument samo vizuelno (Design View).
D - Prikazuje kod kakav stiže do browsera (nije moguće menjati kod u ovom
prikazu)
E - Izvršava proveru css kompatibilnosti sa različitim browserima
F - Prikazuje stranu poput browsera (nisu moguće izmene)
Copyright © Link group
o
o
o
o
o
o
•
G - Uključuje CSS inspect mod koji radi sa Live View i omogućava
identifikaciju html elemenata i njihovih CSS stilova
H - Pregled strane ili debug u browseru
I - Uključivanje/isključivanje vizuelnih pomagala
J - Refresh vizuelnog prikaza (design view) pošto izvršimo izmene u kodu.
K - Naslov dokumenta koji se pojavljuje u title baru browsera može se uneti i
kroz html kod. Ako je već uneto, pojavljuje se ovde.
L - File management
Browser navigation - Tek pošto uključimo Live view ovaj toolbar postaje aktivan.
Tada se prikazuje adresa strane koja je trenutno prikazana, a i sam Dw se ponaša
praktično kao web browser.
o
o
o
A - Kontrole internog web browser pregleda.
B - Trenutna adresa.
C - Opcije Live prikaza.
•
Coding (prikazan, tj. dostupan je samo u code prikazu) - Sadrži alate za rad sa
kodom. Coding ne možemo premeštati niti mu možemo menjati veličinu. Postavljen
je na fiksnoj poziciji i samo ga možemo uključiti/isključiti.
•
Standard toolbar (u osnovnom podešavanju radnog okruženja nije prikazan) Sadrži osnovne komande za rad sa fajlovima, tačnije učitanim dokumentom.
Komande su New, Open, Browse in Bridge (korišćenje Adobe Bridge za pregled
fajlova), Save, Save All, Print Code, Cut, Copy, Paste, Undo i Redo.
•
Style rendering toolbar (u osnovnom podešavanju radnog okruženja nije prikazan)
- Sadrži opcije koje nam omogućavaju da simuliramo prikaz strane, odnosno njene
CSS stilizacije na različitim tipovima prikaza. Takoñe, omogućava prikaz css stilova u
odreñenim situacijama, kao i potpuno isključivanje/uključivanje css stilova.
Copyright © Link group
3. Properties i Insert panel
Properties inspector
Properties inspector je panel koji služi za formatiranje, dodavanje svojstava i atributa
selektovanim objektima u dokumentu.
Sadržaj ovog panela se menja u zavisnosti od konteksta rada. Na primer, kada je
selektovan tekst u dokumentu, Properties inspector prikazuje opcije za dodavanje
karakteristika tekstu, a kada je selektovana slika, tada se prikazuju opcije za editovanje
svojstva slike.
Properties panel - selektovana slika
Properties panel - HTML režim rada za formatiranje teksta
Properties panel - CSS režim rada za formatiranje teksta
Properties panel - podešavanja tabele
Copyright © Link group
Properties panel - podešavanja kolone tabele (css)
Kao što možemo videti iz prethodnih slika, tekst, kao i druge elemente možemo stilizovati
pomoću HTML-a, ali i putem CSS-a. U toku razvoja web dizajna, prvobitno, do razvoja CSSa korišćen je čist HTML za stilizaciju. Tada su se dizajneri dovijali na razne načine da urade
ono što žele, jer je HTML bio dosta ograničavajući. Kasnije se stilizacija postepeno prebacila
na CSS, kako se isti razvijao. Ipak, HTML stilizacija je ostala kao opcija, ali bi je svakako
trebalo izbegavati.
Insert panel
Insert panel sadži opcije za kreiranje i unos objekata poput tabela i slika. Same opcije su,
radi lakšeg snalaženja, grupisane u kategorije.
Copyright © Link group
Insert panel
Za razliku od ostalih panela, insert panel možemo postaviti na nešto drugačiji način. Ukoliko
prevučemo pomenuti insert panel na vrh iznad dokumenta, kako je prikazano na slici, panel
će se pretvoriti u toolbar.
Copyright © Link group
Pretvaranje insert panela u insert toolbar
Tastaturne prečice (keyboards shortcuts)
Dw sadrži veoma fleksibilan sistem korišćenja i upravljanja prečicama. Kompleti prečica se
čuvaju u okviru setova koje možemo čuvati i primenjivati nezavisno od radnog okruženja.
Da bismo kreirali ili izmenili prečice uradićemo sledeće: iz padajućih menija izabraćemo Edit
> Keyboard Shortcuts...
U panelu koji nam se pojavljuje možemo u okviru opcije Current set izabrati neki od
predefinisanih setova. Desno od tog padajućeg menija pojavljuju se četiri komande:
•
•
•
•
Duplicate set - Dupliranje trenutno izabranog seta. Po kliku, tražiće se unos naziva
novog, dupliranog seta.
Rename set - Izmena imena (rename) trenutno izabranog seta.
Export set as HTML - Omogućava snimanje HTML dokumenta u kome će tabelarno
biti prikazane sve prečice iz trenutno aktivnog seta. Ova opcija je zgodna ukoliko
želimo da odštampamo referencu prečica.
Delete set - Briše trenutno aktivni set.
Copyright © Link group
U samom dijalogu, niže od izbora seta i tastera koje smo pomenuli, možemo menjati prečice
i vezane tastere tastature. Prvo biramo grupu komandi, a potom iz stabla željenu komandu.
Tada možemo dodati novu prečicu ili izmeniti postojeću.
Na prikazanom primeru, u grupi Menu commands u stablu je izabrana komanda Insert >
Image i njena trrenutna prečica je Ctrl+Alt+I. Koristeći +/- možemo dodati ili obrisati
prečicu.
Ukoliko prilikom unosa napravimo preklapanje komandi, tj tastaturnih prečica, DW će nas
upozoriti o tome.
Insert panel
Na sledećoj tabeli su prikazane neke od najčešće korišćenih prečica u radu sa DW-om.
Prečica
PC prečica
Mac prečica
Kreiranje novog dokumenta
Otvaranje postojećeg
dokumenta
Čuvanje otvorenog dok.
Zatvaranje otvorenog dok.
Zatvaranje svih dokumen.
Zatvaranje Dw-a
Control+N
Control+O
Command+N
Command+O
Control+S
Control+W
Control+Shift+W
Control+Q or Alt+F4
Command+S
Command+W
Command+Shift +W
Command+Q or Opt+F4
Copyright © Link group
Undo
Redo
Cut
Copy
Paste
Paste special
Selektuj sve
Find and replace
Preferences panel
Prikaži/sakrij rulers
Prikaži/sakrij guides
Prikaži/sakrij visual aids
Prikaži/sakrij grid
Izmeni page properties
Refresh Design prikaz
Bold selektovanog teksta
Italic selektovanog teksta
Primena formatiranja
paragrafa na selektovan
tekst
Primena heading
formatiranja (H1–H6) na
selektovan tekst
Novi paragraf
Novi line break <BR>
Nonbreaking space
Pomeranje objekta ili teksta
Kopiranje objekta ili teksta
Selektovanje reči
Selektovanje reda ili bloka
teksta
Unos slike
Unos tabele
Provera pravopisa
Pomoć (help)
Zoom in
Zoom out
Pregled strane u primarnom
browseru
Pregled strane u
sekundarnom browseru
Live View
Stopiranje JavaScript
Inspect
Code Navigator
Get
Put
Check in
Check out
Control+Z or Alt+Backspace
Control+Y ili
Control +Shift+Z
Control+X ili
Shift+Delete
Control+C
Control+V
Control+Shift+V
Control+A
Control+F
Control+U
Control+Alt+R
Control+;
Control+Shift+I
Control+Alt+G
Control+J
F5
Control+B
Control+I
Control+Shift+P
Option+Delete
Command+Y or Command+Shift+Z
Control+1 do 6
Command+1 do 6
Return
Shift+Return
Command+Shift+Spacebar
Prevlačenje na novu lokaciju
Control+prevlačenje na novu lokaciju
Dvostruki klik
Trostruki klik
Return
Shift+Return
Command+Shift+Spacebar
Prevlačenje na novu lokaciju
Option+prevlačenje na novu lokaciju
Dvostruki klik
Trostruki klik
Control+Alt+I
Control+Alt+T
Shift+F7
F1
Control+=
Control+F12
Command+Option+I
Command+Option+T
Shift+F7
F1
Command+=
Command+Option+F12
Shift+F12 or Control+F12
Command+F12
Alt+F11
F11
Alt+Shift+F11
Control+Alt+N
Control+Shift+D
Control+Shift+U
Control+Alt+Shift+U
Control+Alt+Shift+D
Option+F11
F11
Option+Shift+F11
Command+Option+N
Command+Shift+D
Command+Shift+U
Command+ Option+Shift+U
Command+ Option+Shift+D
Copyright © Link group
Command+X ili
Shift+Delete
Command+C
Command+V
Command+Shift+V
Command+A
Command+F
Command+U
Command+Option+R
Command+;
Command+Shift+I
Command+Option+G
Command+J
F5
Command+B
Command+I
Command+Shift+P
4. Osnovna struktura sajta
Kada govorimo o sajtovima iz ugla korisnika, tj posetioca, uočavamo osnovnu adresu (URL)
sajta. Na primer, adresa jednog sajta je http://www.it-akademija.com/
Ali, šta se dešava kada tu adresu unesemo u browser? Iz ugla prosečnog korisnika,
praktično momentalno (zavisno od brzine interneta) otvara se stranica koja sadrži odreñeni
sadržaj. U malopre pomenutom slučaju to je index (početna) stranica sajta IT Akademije.
Dok smo na sajtu, možemo pratiti razne linkove koji će nam otvarati druge stranice uz
istovremenu promenu trenutne url adrese u browseru.
Iz drugog ugla, ako pogledamo kako sve to funkcioniše, svaki sajt u osnovi poseduje root ili
koreni folder. U njemu se nalaze svi fajlovi sajta i oni koji su relevantni za njegovo
funkcionisanje. Taj folder se nalazi na računaru koji nazivamo server ili web server.
Serveri su specijalizovani računari koji su stalno uključeni i konstantno povezani sa
internetom u svrhu opsluživanja sajtova i njihovih korisnika.
Kada unesemo željenu adresu u browser, pomoću DNS sistema (Domain Name System)
browser dobija informaciju o IP adresi servera, odnosno sajta koji je potrebno učitati. IP
adresa je tačna adresa gde se željeni sajt nalazi. Drugim rečima, mi koristimo URL (adresu
sajta) kako bismo olakšali pamćenje, dok sami računari sajtove pronalaze pomoću IP
adresa. Na primer, lakše je zapamtiti www.google.com, nego njegovu IP adresu:
74.125.224.72, iako možemo ukucati taj IP u browser i dobiti isti rezultat (probajte, možete
otvoriti bilo koji browser i u adress bar uneti malopre pomenutu IP adresu u obliku:
http://74.125.224.72/).
Pošto browser od DNS servera dobije informaciju o IP adresi sajta, on pristupa njoj, otvara
root folder i traži index.html (ili default.html), te ih onda prikazuje korisniku.
Copyright © Link group
Proces pristupanja sajtu
Osnovna struktura i organizacija sajta
Kada počinjemo sa kreiranjem sajta, kreiramo root folder. U njemu ćemo kreirati i
postavljati naše fajlove. Pošto završimo sajt, iskopiraćemo ceo root folder na server.
S tim na umu, možemo razlikovati dva, odnosno tri osnovna dela:
1. Lokalni folder (engl. Local Folder) - U njemu se nalaze svi fajlovi, slike i ostali
elementi web sajta. Najjednostavnije rečeno, root nivo je početna tačka koju
browseri koriste da pronañu objekte sajta.
2. Udaljeni folder (engl. Remote Folder) - Ovo je folder gde publikujemo sajt i on se
nalazi na serveru. O zakupu prostora na serveru ili celog servera će biti više reči u
daljem toku kursa.
3. Testing server folder - Ovo je folder gde Dreamweaver procesira dinamičke fajlove
da bi kreirao dinamički sadržaj i gde se konektuje sa bazom podataka dok kreiramo i
testiramo sajt. Server za testiranje može biti na lokalnom računaru i ne preporučuje
se korišćenje udaljenog foldera kao testing server foldera.
Dakle, ako bismo rezimirali sve ranije rečeno, pri kreiranju sajta sve stranice i ostale fajlove
kreiramo/postavljamo u za to namenski kreiran folder na lokalnom računaru. Po završetku
kreiranja sajta, taj folder kopiramo na server, gde on postaje dostupan svima. Ukoliko sajt
Copyright © Link group
ostane u lokalnom folderu, niko osim nas ga neće nikad videti i zato ga moramo postaviti u
udaljeni folder na serveru.
Da bismo možda lakše objasnili, napravićemo analogiju sa slikanjem. Umetnik radi u svom
ateljeu (lokalni folder) gde stvara umetnička dela (sajtove). Kada završi odreñeno delo,
njega izlaže u galeriji (udaljeni folder) i tada je delo dostupno javnosti. Kada ne bi izložio
odreñenu sliku u galeriji, niko nikada ne bi saznao za nju.
Konvencije u imenovanju fajlova
Kod kreiranja fajlova za web od vitalnog je značaja pratiti pravila za imenovanje fajlova.
Ako nisu ispravno imenovane, izvesne stranice mogu postati nedostupne ili jednostavno
neće raditi pravilno. Ova pravila su prilično jednostavna i trebalo bi ih se uvek pridržavati.
1. Ne koristiti razmake u imenima fajlova - Ako je potrebno razdvojiti više reči,
koristi se donja crta (_) (engl. Underscore) ili crtica (-) (engl. Hypen):
o_nama.html
o-nama.html
Većina servera će dozvoliti razmake u imenima fajlova, ali ovo može biti nepodesno
jer će neki serveri prikazati %20 umesto razmaka i može dovesti do zabune prilikom
slanja linka te strane. Oznaka za razmak je %20 (space).
2. Kraća imena fajlova su bolja - Bolje je imenovati fajl o-nama.html nego
pogledajte-vise-o-nama-i-o-nasim-proizvodima.html.
3. Ne koristiti specijalne karaktere #, $, %, *, & - Ovi karakteri imaju neka druga
značenja, kao na primer URL perimetri, koja možete slučajno aktivirati. Brojevi se
mogu koristiti u imenima fajlova, ali treba izbegavati korišćenje brojeva kao prvi
karakter u imenu.
4. Ne mešati velika i mala slova - Trebalo bi napisati index.html, a ne Index.html,
niti INDEX.HTML. Mnogim web serverima neće smetati, ali neki UNIX serveri prave
razliku izmeñu velikih i malih slova (Case Sensitive) i linkovi se neće pravilno
razrešiti.
5. Konzistentnost u dužini ekstenzije fajlova – Trebalo bi koristiti ili .html ili .htm
ekstenzije, nikako zajedno. Preporučuje se .html.
Linkovi (hyperlinks)
Linkovi ili hiperlinkovi (eng. hyperlinks) nam mogućavaju povezivanje i prelazak sa strane
na stranu, kao i povezivanje fajlova, emailova etc. Svi smo koristili linkove na internetu jer
bez njih bismo morali svaki put ručno da ukucavamo adresu koju želimo da otvorimo.
Postoje tri osnovne kategorije u zavisnosti od putanje koje sadrže:
•
Putanje relativne u odnosu na dokument - Ovaj tip linka specificira putanju i
ime dokumenta na koji se linkuje, kao na primer about.html ili
Copyright © Link group
products/catalog.html. Kod ovog tipa linkovanja ideja je da ne moramo da
dodajemo 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 products/catalog.html kazuje čitaču da se pomeri jedan nivo ispod u
hijerarhiji foldera, od trenutnog nivoa do foldera products i tu pronañe fajl koji se
zove catalog.html. Ako bismo želeli da na stranici catalog.html postavimo link koji
će voditi ka stanici index.html, dodaćemo 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 i da otvori index.html. Sledeća tabela prikazuje različita
scenarija i može pomoći radi malo boljeg razumevanja strukture putanja.
Link od X do Y
Od index.html do about.html
Od about.html do index.html
Od index.html do catalog.html
Od catalog.html do archive.html
Od catalog.html do index.html
•
Primer linka
about.html
index.html
products/catalog.html
archive.html
../index.html
Putanje relativne u odnosu na Root folder sajta - Linkovi koji koriste
putanje relativne u odnosu na Root sajt prikazuju putanju i ime dokumenta na
koji se linkuje, ali one usmeravaju čitače da počnu pretragu za putanjom počev
od Root nivoa sajta. Da bismo napisali ovu putanju, dodaćemo Forward slash
ispred prvog foldera ili imena fajla kao u sledećem primeru:
/kontakt.html
/galerija/planine.html
Ovakve putanje su bolje ukoliko se koristi više servera za isti sajt, ili više sajtova
na istom serveru, ali za početak preporuka je da koristite putanje relativne u
odnosu na dokument.
•
Apsolutne putanje - Apsolutna putanja je ceo URL do linkovanog fajla ili
stranice, kao u sledećim primerima:
http://upload.wikimedia.org/wikipedia/commons/2/23/NoviBG_Nov30_2005.jpg
ili http://www.it-akademija.com
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 index stranici sajta IT
Copyright © Link group
akademije. Ovakve putanje se ne preporučuju u okviru stranica istog sajta, jer su
mnogo teže za izmenu.
Definisanje novog sajta
Da bismo definisali novi sajt na lokalu (lokalnom računaru - računar na kome radimo)
uradićemo sledeće:
1. Izabraćemo iz padajućih menija Site > New Site...
Site setup dijalog
Novi sajt možemo kreirati i iz application bara, kao i iz manage sites dijaloga.
Pošto se otvorio novi dijalog za kreiranje sajta, primetićemo da su njegove opcije
podeljene u četiri grupe prikazane sa leve strane, pri čemu poslednja grupa ima
dodatne kategorije. Počećemo od prve, site grupe, koja je po defaultu i selektovana.
2. Unećemo u polje Site Name željeno ime za novi sajt. Ja ću uneti ime DW site. Kad
birate ime za definiciju sajta, koristite nešto smisleno što će podsećati na taj
projekat. Ovo ime je vidljivo samo nama, odnosno korisnicima DW-a i nije vidljivo
na samom sajtu.
Ukoliko ste radili u ranijim verzijama DW-a, primetićete da je od CS5 ovaj dijalog
drastično izmenjen, ali su sve stare opcije i dalje tu, samo malo logičnije
organizovane.
Copyright © Link group
3. U polju Local Site Folder DW je predložio novi folder za naš novi sajt. Da
podsetimo, taj folder će biti root folder našeg sajta i ne bi trebalo koristiti postojeći,
već kreirati novi, prazan (osim ukoliko ne nastavljamo rad na već postojećem sajtu).
Kliknućemo levim tasterom miša na ikonicu foldera pored polja. Otvara se standardni
win dijalog za izbor foldera. Odabraćemo ili kreirati novi root folder i potvrditi klikom
na select dugme1.
Izbor root direktorijuma
4. Prethodnim koracima smo definisali osnovu, ali se nećemo zadržati na tome. Za sada
ćemo zanemariti opcije Servers i Version Control (njima ćemo se pozabaviti u
poslednjem modulu kursa) i izabraćemo grupu opcija Advanced settings iz stabla
levo. Otvoriće nam se dodatne kategorije u okviru te grupe i po defaultu je izabrano
Local Info.
Prva stavka je Default Images Folder. DW nam ovde nudi odmah na početku rada,
da izaberemo folder u kome će biti smeštene slike.
Iako nije obavezno, dobra praksa u kreiranju sajtova je da različite tipove fajlova
čuvate u posebnim podfolderima. Na primer, mnogi sajtovi imaju foldere za slike, css
fajlove, pdf dokumenta i tako dalje. Kao i u svakom poslu, pravilna organizacija je
važna jer u suprotnom može se doći u situaciju gde bi 100+ fajlova različitih tipova,
namena i upotreba bilo u root folderu. Tada održavanje i izmene postaju noćna
mora.
1
Ukoliko se umesto select dugmeta pojavljuje open dugme, to znači da je selektovan neki od foldera u trenutnom
dijalogu. Potrebno je da željeni folder bude otvoren, ali ništa selektovano u njemu.
Copyright © Link group
Kao i kod izbora root foldera, klikom na ikonicu foldera pored polja otvaramo dijalog
za izbor foldera. DW nas odmah postavlja u root folder i u njemu kreiramo folder
images.
5. Sledeća bitna stavka u istom dijalogu je Links relative to. Ta opcija je po defaultu
postavljena na document.
Ranije u tekstu smo pojasnili linkove i ostavićemo izabranu opciju document jer
želimo linkove koji su relativni na dokument.
Default folder za slike i links relative
6. Sada ćemo izabrati Save i time zatvoriti dijalog za kreiranje/definisanje novog sajta.
Ostalim opcijama ćemo se pozabaviti kasnije u toku kursa. Trenutno imamo kreiranu
osnovu za sajt sa svim parametrima podešenim. Panel files bi trebalo da izgleda kao
na slici, ako je sve urañeno kako treba.
Panel files pošto smo kreirali novi sajt
Za sada naš sajt sadrži samo osnovni root folder i u njemu podfolder images, koji je
prazan. U narednim lekcijama ćemo kreirati prve fajlove.
Copyright © Link group
5. HTML i kreiranje dokumenata
HTML
HTML (hyper text markup language) ima odreñenu sintaksu i pravila po kojima se kreira.
Sam HTML se bazira na tagovima, u koje postavljamo sadržaj. Tagovi obuhvataju odreñeni
sadržaj i shodno tome eksplicitno se označava početak i kraj jednog taga, dok je sadržaj
izmeñu. Pogledajmo na primeru kako bi jedan tag izgledao:
<p>Danas je utorak</p>
Ovo je p tag, odnosno tag koji koristimo da označimo paragraf teksta. Vidimo da smo
pomoću <p> otvorili tag, a pomoću </p> zatvorili. Pravilo je da se tag zatvara na isti način
kako je otvoren samo uz dodatak kose crte (slash). Izmeñu je tekst koji će biti vidljiv.
Ukoliko bismo želeli da dodamo još jedan paragraf posle njega, imali bismo nešto poput
sledećeg primera:
<p>Danas je utorak</p>
<p>Napolju je divan sunčan dan</p>
Same tagove možemo postavljati u druge tagove. Na primer, prethodna dva paragrafa
možemo postaviti unutar jednog div taga.
<div>
<p>Danas je utorak</p>
<p>Napolju je divan sunčan dan</p>
</div>
Div tagove koristimo za grupisanje objekata u celine i radi lakšeg rasporeñivanja elemenata
vizuelno.
U HTML jeziku je veoma važno da vodimo računa o preklapanju tagova. Kao i u matematici
sa višestrukim zagradama, tako i ovde, unutrašnji tag mora biti prvo zatvoren, pa onda
njegov okružujući tag. Na primer, ovo je deo koda sa ispravno napisanim tagovima:
<p>Danas je <strong>utorak</strong></p>
Dok sledeći primer nije:
<p>Danas je <strong>utorak</p></strong>
Copyright © Link group
Kao što uočavamo, u prvom primeru postoji p tag sa tekstom, a deo teksta je obuhvaćen
strong tagom (koji je ekvivalent za bold). U drugom primeru smo načinili grešku jer smo
zatvorili p tag, iako je očekivano da se prvo zatvori strong.
Kada browser naiñe na ovakav problem, tj nepravilan kod, pokušava da ga ipak prikaže, ali
pretpostavljajući neke detalje i ispravljajući kod koliko može prilikom prikaza. Tada se mogu
desiti razne nepredviñene situacije i verovatno različit prikaz u različitim browserima.
Takoñe, ne smemo zaboraviti da sve tagove koje smo otvorili i zatvorimo. Ukoliko su svi
tagovi zatvoreni i nema ukrštanja tagova, onda smo kreirali pravilno strukturiran ili
izbalansiran dokument.
Postoje i takozvani samozatvarajući tagovi koji nemaju početak i kraj, kao malopre
pomenuti tagovi, već odmah počinju i istovremeno se završavaju. Na primer, tag koji kreira
line break u tekstu (poput shift+enter u wordu) je <br>, kao u sledećem primeru:
<p>Napolju je divan<br />sunčan dan</p>
U HTML-u je bilo dovoljno pisati ove tagove kao <br> ili <img>, dok je u xHTML-u zbog
strožih sintaksnih pravila potrebno pisati nešto drugačije: <br /> ili <img />. Pošto ćemo
u kursu raditi sa xHTML-om, pratićemo ta pravila.
Takoñe, HTML tagovi mogu imati odreñene atribute koji se postavljaju unutar početnog dela
tega. Na primer:
<td width="100" height="40">...</td>
U ovom primeru vidimo td tag (koji koristimo kao deo tabele) koji sadrži dva atributa width i height.
<td width="100" height="40">...</td>
Ukoliko bismo uklonili ta dva atributa, vidimo da se ovaj tag ne razlikuje od ostalih.
<td>...</td>
Struktura HTML dokumenta
Svaki HTML dokument počinje i završava se <html> tagom, koji se nekad naziva i koreni
tag strane - root.
Zatim postoje dve osnovne celine dokumenta, to su <head>, odnosno zaglavlje dokumenta
i <body>, u kome se nalazi sav vidljiv sadržaj strane.
Copyright © Link group
Osnovna struktura HTML dokumenta
Da bismo demistifikovali HTML i pisanje koda, sada ćemo kreirati našu prvu stranicu u
notepadu.
•
Otvorite Notepad (ili TextEdit ako radite na Mac-u) i unesite
<html>
<body>
Napolju je divan dan
</body>
</html>
•
Snimite na desktopu kao html-strana.html. Obratite pažnju na to da ekstenzija
bude .html, a ne kako je po defaultu .txt
•
Pokrenite taj fajl dvoklikom na njegovu ikonicu i otvoriće se Vaš podrazumevani
browser. Prikaz bi trebalo da izgleda kao na sledećoj slici:
Copyright © Link group
Prikaz naše prve strane u browseru
•
Kao što vidimo, prikazuje se rečenica koju smo uneli dok su sami HTML tagovi
nevidljivi korisniku. Sada ćemo dodati još neke detalje. Unesite head tag koji će
sadržati title tag, kao i br tag u okviru teksta, kao na primeru:
<html>
<head>
<title>Moja prva html strana</title>
</head>
<body>
Napolju je<br />divan dan
</body>
</html>
Copyright © Link group
Prikaz naše prve strane sa odreñenim izmenama
Title tag koji se pojavljuje u okviru head taga služi za definisanje naziva (engl. Title)
stranice i pojavljuje se u browseru. Br tag (break) koji smo dodali u tekstu je prelomio
pomenuti tekst u dva reda.
Sada imamo neko osnovno poznavanje i razumevanje HTML dokumenata. Čak i kada
otvorimo neku veoma komplikovanu stranu, možemo je raščlaniti na delove i prostiju
strukturu kroz osnovno poznavanje pravila.
Više o samom HTML-u, kao i o osnovama CSS-a možete naći u kursu: Uvod u HTML i CSS.
Document Type Declaration (Doctype)
Document Type Declaration se upisuje na početku HTML dokumenta i postavlja Document
Type Definition ili skraćeno DTD.
DTD možemo posmatrati kao gramatiku HTML dokumenta. Na početku deklarišemo koji
ćemo DTD, odnosno skup pravila koristiti. Ukoliko se pridržavamo tih pravila i ako je naša
stranica usklañena sa njima i nema grešaka u kodu, možemo reći da je naš dokument
validan.
Validnost dokumenta možemo proveriti na sajtu W3C koji je kreiran sa tom namenom
(http://validator.w3.org/). Kada na toj adresi unesemo URL link do sajta ili uploadujemo
stranu/deo strane, validator proverava greške u kodu (nezatvorene tagove, nedostajuće
atribute i sl.) ali i proverava da li je usklañen sa DTD-om koji smo postavili.
Copyright © Link group
W3C Validator
Kada kreiramo novi dokument u DW, postoji nekoliko mogućih izbora:
•
•
•
•
•
•
•
•
None - Nikada nećemo koristiti ovu opciju jer svaka stranica mora imati svoju
DOCTYPE deklaraciju.
HTML 4.01 Transitional - Ova opciju biramo ukoliko ne želimo da koristimo xHTML.
HTML 4.01 Strict - Slično prethodnoj opciji, samo što su pravila za pisanje dosta
stroža nego u transitional varijanti.
XHTML 1.0 Transitional - Ova opcija omogućava istu fleksibilnost kao HTML 4.01
Transitional sa dodatim striktnijim pravilima XML-a. Preporuka je da se ova opcija
uvek koristi, barem dok HTML5 ne postane standard.
XHTML 1.0 Strict - Kao i kod HTML-a, strict varijanta xHTML-a donosi stroža pravila
pisanja.
XHTML 1.1 - Ova opcija ne bi trebalo da se koristi na stranicama koje koriste
text/html MIME type, što je trenutni standard za web servere.
XHTML Mobile 1.0 - Ovo je podskup XHTML Basic za mobilne ureñaje, ali polako
postaje izlišan sa pojavom HTML5.
HTML 5 - Omogućuje postavljanje deklaracije za nove HTML5 stranice. Ova opcija se
pojavljuje prvi put u CS5.5 verziji, kao i u CS5 sa dodatkom za HTML5. Izvesno je da
će postati novi standard u godinama koje dolaze.
Kreiranje dokumenata i njihova svojstva
Novi dokument u DW možemo kreirati tako što izaberemo File > New, ili putem ekrana
dobrošlice. Takoñe, prečica Ctrl+n poziva istu funkciju. U svakom slučaju, pošto izaberemo
opciju za novi dokument sačekaće nas dijalog sa sledeće slike:
Copyright © Link group
Dijalog za kreiranje novog dokumenta
A - U ovom delu možemo birati šta želimo da kreiramo. Zadržaćemo se na opciji Blank Page
jer nam omogućava kreiranje nove prazne strane.
B - Ovaj region se menja dinamički u zavisnosti od toga šta smo izabrali u levom meniju, ali
kod kreiranja nove prazne strane omogućava izbor više tipova strana. Iako su svi fajlovi
koje DW kreira u osnovi tekst, pravilan izbor je veoma važan zbog osnovnih podešavanja i
inicijalnog sadržaja strane, jer, kao što ćemo videti, iako kreiramo prazan novi dokument,
on nikada nije apsolutno prazan. Izabraćemo za sada HTML, odnosno prvu opciju.
C - U ovoj grupi opcija, koja takoñe zavisi od prethodne, nalazi se lista ponuñenih layoutova koje DW može kreirati za nas, kao i prva opcija koja ne sadrži nikakvu strukturu.
Ukoliko izaberemo prvu opciju na nama je da sami dodamo osnove elemente, dok će u
slučaju izbora neke druge DW će postaviti osnove za nas. Samo ime opcije nam govori o
kakvoj se strukturi radi.
Na primer, 2 column liquid, left sidebar, header and footer opcija će kreirati novi prazan
dokument ali sa odreñenim regionima (centralni deo, sidebar, kao i zaglavlje i dno strane)
pritom postavljajući CSS kod. Mi ćemo za sada izabrati <none> jer želimo da sami unesemo
sve elemente.
D - U ovom delu možemo videti preview izabranog layouta iz prethodne stavke, kao i opis
neposredno ispod.
Copyright © Link group
E - Ova opcija nam nudi izbor doctype podešavanja strane.
F - Ukoliko smo izabrali neku od opcija za kreiranje strane koja iziskuje da DW unese
odreñeni CSS kod u startu, ova opcija će biti aktivna. Tada možemo izabrati da li će taj CSS
biti u istom HTML fajlu (Add to Head), da li ćemo kreirati novi CSS fajl (Create New File) ili
možda želimo da dodamo u postojeći fajl (Link to Existing File). Kao što ćemo videti kasnije
u toku kursa, CSS kod se može nalaziti u istom fajlu zajedno sa HTML-om ili može biti
poseban, izdvojen fajl (fajlovi).
G - Ukoliko želimo, možemo u startu povezati postojeće CSS fajlove. Klikom na ikonicu
lanca otvaramo dijalog u kome možemo izabrati CSS fajl za povezivanje (X), način
povezivanja (Y) i tip CSS-a, odnosno za koji medijum je namenjen (Z).
Povezivanje postojećeg externog CSS fajla
H - Kada podesimo željena podešavanja, izabraćemo Create da kreiramo stranicu, odnosno
Cancel da poništimo sve.
I - Ova opcija nam omogućuje da pristupimo default podešavanjima nove stranice. Više o
tome u ovoj lekciji nešto niže.
Pošto smo kliknuli na Create dugme, DW je kreirao novu stranicu. Sada je design prikaz
prazan (jer smo izabrali blanko HTML bez osnovnog rasporeda), dok se u code prikazu
pojavljuje odreñeni kôd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Copyright © Link group
Iako možda deluje konfuzno, ovo je potpuno prazna HTML stranica, sa samo unetim
osnovnim parametrima. Sada ćemo rasčlaniti delove:
Ovaj deo koda definiše DTD i, kao što možemo videti, radi se o xHTML 1.0 transitional
dokumentu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ovo je osnovni, root element HTML strane. To je HTML tag, koji sadrži atribut za XML
namespace:
<html xmlns="http://www.w3.org/1999/xhtml">
Zatim sledi head deo u kome je trenutno postavljen meta tag koji nam odreñuje encoding
dokumenta (u ovom slučaju UTF-8), kao i title tag, koji odreñuje naslov stranice:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
Zatim sledi body tag, koji je sada prazan i u njega ćemo unositi sam sadržaj:
<body>
</body>
I na kraju zatvaramo sam HTML tag, root tag dokumenta:
</html>
Postavljanje karakteristika novog dokumenta
Kao što smo pomenuli ranije u vezi sa kreiranjem novog dokumenta, možemo podesiti
odreñena default podešavanja za nove dokumente. Klikom na preferences u dijalogu novog
dokumenta ili izborom iz padajućih menija Edit > Preferences, a zatim New Document
grupe, otvaramo pomenuta podešavanja.
New Document kategorija postavlja globalne karakteristike za sve web stranice koje se
kreiraju u Dreamweaveru. Postoje sledeće opcije:
•
Default document - Ova opcija postavlja tip default dokumenta, omogućava izbor
tipa dokumenta koji će biti kreiran kada koristimo prečicu sa tastature za novi
dokument Ctrl+N. Da bi ovo funkcionisalo, moramo deselektovati opciju na dnu
Show New Document dialog box on Control+N.
Copyright © Link group
•
•
•
•
Default Extensions - Ovo se odnosi samo na HTML dokumenta. Možemo uneti .htm
umesto default vrednosti .html, ali nikako ne savetujem da to radite. Ostavićemo
.html.
Default Document Type (DTD) - Ova opcija postavlja default DOCTYPE deklaraciju
za sve nove web stranice.
Default Encoding - Ova opcija omogućava izbor seta karaktera koji će se koristiti
na svakoj stranici. Default podešavanje Dreamweavera je Unicode (UTF-8). Check
box ispod ove opcije, ako je omogućen, kazuje Dreamweaveru da postojeće stranice
koje nemaju specificiranu šemu karaktera prikaže u gore izabranom setu karaktera.
Encoding je veoma bitan zbog naših slova (š,ñ,ć...) koja se neće pravilno prikazati.
Uvek ćemo postavljati UTF-8 jer podržava sve karaktere, unazad je kompatibilan za
ASCII standardom i postao je standard na netu. Takoñe, u zvaničnoj preporuci za
HTML5 W3C sugeriše njegovu upotrebu1.
Unicode Normalization Form - Ova opcija je obavezna samo ako je izabran
Encoding UTF-8. Trebalo bi da bude podešena na C (Canonical Decomposition,
followed by Canonical Composition) i Check boks koji sledi Include Unicode Signature
(BOM) bi trebalo da je deselektovan.
Page Properties
Za svaku pojedinačnu HTML stranu možemo definisati osnove podešavanja. Pomoću
padajućih menija Modify > Page Properties otvaramo Page Properties koji nam
omogućava da podesimo osnovnu font familiju, boju pozadine, margine, stilove linkova i
mnoge druge aspekte dizajna strane. Promene koje ovde vršimo tiču se cele strane i samo
nje (ne utiču na druge strane sajta).
Postoji nekoliko kategorija koje se nalaze sa leve strane dijaloga. Klikom na njih, otvaramo
njihova podešavanja.
Appearance (CSS), Link (CSS) i Headings (CSS) kategorije postavljaju formatiranje pomoću
CSS opisa koje DW kreira za nas. Appearance (HTML) kategorija postavlja formatiranje
pomoću HTML atributa i savetujem da to izbegavate. HTML bi trebalo koristiti za strukturu,
a CSS za stilizaciju. Title/Encoding postavlja parametre u HTML-u, ali su to opcije koje ne
možemo podešavati CSS-om i tiču se osnove strane.
Appearance (CSS) kategorija
•
•
•
•
•
•
1
Page Font – Izbor fonta, odnosno font familije koja će biti upotrebljena. Možemo
uneti jedan font ili više njih. Prikazuje se prvi dostupan.
Size – Definiše veličinu teksta. Ukoliko se odlučimo za brojčanu vrednost potrebno je
da iz padajućeg menija izaberemo tip jedinice.
Text Color - Postavlja boju teksta. Klikom na kvadrat pozivamo vizuelni izbor boja.
Background Color – Postavlja boju pozadine. Klikom na kvadrat pozivamo vizuelni
izbor boja.
Background Image – Postavlja sliku za pozadinu. Možemo ručno uneti putanju do
slike ili klikom na browse locirati sliku kroz dijalog.
Repeat – Definiše kako se pozadinska slika iz prethodne stavke prikazuje na strani:
o No-repeat – prikazuje sliku samo jednom.
http://www.w3.org/TR/html5/semantics.html#charset
Copyright © Link group
Repeat – ponavlja sliku horizontalno i vertikalno u beskonačnost, odnosno
onoliko puta koliko prostora ima.
o Repeat-x – ponavlja sliku horizontalno.
o Repeat-y – ponavlja sliku vertikalno.
Left, Right, Top i Bottom Margin – Postavlja margine cele stranice.
o
•
Appearance (CSS) kategorija Page Properties dijaloga
Appearance (HTML) kategorija
Podešavanja u ovoj kategoriji su ostatak od ranijih vremena, kada se sva stilizacija vršila
kroz HTML. Funkcije su date informativno jer se ne preporučuje njihovo korišćenje.
•
•
•
•
•
•
•
•
Background Image – Postavlja sliku za pozadinu. Slično ranije pomenutom
podešavanju, ali ne putem CSS-a, već kroz HTML atribut. Slika se ponavlja u obe
ose.
Background - Postavlja boju pozadine.
Text - Postavlja boju teksta.
Link – Postavlja boju linkova.
Visited Links – Postavlja boju posećenih, korišćenih linkova.
Active Links – Postavlja boju aktivnih linkova.
Left i top margina – Postavlja margine levo i gore.
Margin width i height – Postavlja širinu i visinu margina. Praktično se sukobljava
sa prethodnim.
Copyright © Link group
Appearance (HTML) kategorija Page Properties dijaloga
Links (CSS) kategorija
•
•
•
•
•
•
•
Link Font – Definiše font familiju za linkove na strani.
Size – Definiše veličinu linkova (teksta linkova)
Link Color – Postavlja boju linkova.
Visited Links - Postavlja boju posećenih, korišćenih linkova.
Rollover Links – Postavlja boju linkova kada se mišem preñe preko njih.
Active Links – Postavlja boju aktivnih linkova.
Underline Style – Podešavanja linije ispod teksta linka. Po default podešavanjima
svi linkovi imaju donju liniju (underline). Ukoliko su linkovi definisani kroz eksterni
CSS npr, stajaće “don’t change” kao default. Podešavanja mogu biti:
o Always underline – Linija će biti vidljiva uvek.
o Never underline – Linija neće biti vidljiva nikad.
o Show underline only on rollover – Linija će se prikazati samo kad se miše
preñe preko linka, u suprotnom se ne vidi.
o Hide underline on rollover – Linija će nestati kad se miše preñe preko linka, u
suprotnom se uvek vidi.
O ovim detaljima ćemo se vratiti u nekoj od narednih lekcija.
Copyright © Link group
Links (CSS) kategorija Page Properties dijaloga
Headings (CSS) kategorija
•
•
Heading Font - Definiše font familiju za naslove na strani. Default opcija ostavlja
isti font kao na strani.
Heading 1 do Heading 6 – Definiše veličinu teksta i njihove boje za svih šest
mogućih nivoa naslova.
Copyright © Link group
Headings (CSS) kategorija Page Properties dijaloga
Title/Encoding kategorija
Ova kategorija podešava opcije o kojima smo govorili ranije u ovoj lekciji. Možemo
naknadno promeniti Document Type (DTD), Encoding i slično. Pored toga, prva opcija je
Title u kojoj definišemo naslov tekuće strane.
Copyright © Link group
Title/Encoding kategorija Page Properties dijaloga
Tracing image kategorija
•
•
Tracing Image – Ovom funkcijom možemo postaviti sliku u pozadini kako bi nam
pomogla u precrtavanju dizajna strane sa nje. Ne pojavljuje se kada se strana
prikaže u browseru.
Transparency – Odreñuje vidljivost slike iz prethodne stavke. Od kompletno
nevidljive, providne, do kompletno vidljive.
Copyright © Link group
Tracing image kategorija Page Properties dijaloga
Copyright © Link group
6. Upravljanje sajtovima
Da bismo promenili podešavanja u definiciji sajta, izabraćemo iz padajućih menija Sites >
Manage Sites... Otvoriće nam se dijalog Manage Sites koji možemo videti na sledećoj slici.
Istom dijalogu možemo pristupiti i preko Application bara, kao i iz files panela i padajućeg
menija.
Manage sites dijalog
Pojavljuju se sledeće opcije u dijalogu Manage Sites:
•
•
•
•
•
•
New - otvara Site Setup za definisanje novog sajta.
Edit - za selektovani sajt otvara dijalog za izmenu. Ovaj dijalog je potpuno isti kao
kod kreiranja novog sajta, sa tom razlikom da se opcije odnose na postojeći sajt.
Duplicate - Ova opcija pravi egzaktnu kopiju definicije sajta koji je selektovan. Ovo
može biti korisno ako pravimo novi sajt koji će imati ista ili slična podešavanja kao
već neki postojeći sajt.
Remove - Sa ovom opcijom brišemo definiciju sajta iz Dreamweavera, ali važno je
napomenuti da postojeći fajlovi i folderi sajta ostaju netaknuti na disku, samo
uklanjamo sajt iz DW-a.
Export - Ova opcija eksportuje definiciju sajta kao XML fajl (Dreamweaver daje fajlu
ekstenziju .ste). Možemo selektovati više sajtova iz levog dela prozora (Shift+klik)
da bismo eksportovali više definicija odjednom.
Import - Ova opcija importuje definicije sajta (fajlove sa ekstenzijom .ste) koje su
kreirane pomoću malopre pomenute opcije export. Ako su .ste fajlovi u istom
folderu, možemo importovati više definicija sajtova odjednom. Ako već postoji sajt
sa tim imenom, Dreamweaver ne piše preko već postojeće definicije, već kreira novu
definiciju sa istim imenom i brojem pored.
Copyright © Link group
Rad sa browserima
Kao web dizajneri moramo biti svesni da naš finalni produkt, sajt koji kreiramo, na kraju
predajemo na milost i nemilost browseru korisnika. Browser je taj koji će pokupiti naše
fajlove, interpretirati ih i prikazati korisniku. Sve to ne bi bio problem da različiti browseri ne
prikazuju na različit način naše stranice. To je delom do eventualnih grešaka koje smo
napravili, ali i delom zbog nekompatibilnosti samih browsera.
Danas, na tržištu browsera, glavni igrači su Internet Explorer, Mozilla Firefox, Google
Chrome, a u nešto manjem obimu Apple Safari i Opera. Za njima slede mobilni browseri
poput sve popularnijeg Androida ili Apple iOS-a.
Globalna statistika upotrebe web browsera za 20111
1
Izvor StatCounter
Copyright © Link group
Statistika upotrebe web browsera u Srbiji za 20112
Moramo biti svesni trendova koji nas okružuju i uvek testirati stranice. U toku samog
procesa kreiranja sajta, kao i na samom kraju, testiraćemo sajt u svim relevantnim
browserima i ispraviti odeñene detalje.
Takoñe, pomenuli smo mobilne browsere koji igraju sve veću ulogu, tako da i njih moramo
uzeti u obzir ako ne želimo da izgubimo dobar deo tržišta.
DW poseduje opciju LiveView koja se nalazi na samom document toolbaru (A). Ova opcija
menja design prikaz tako da se on ponaša kao browser. Sam prikaz je renderovan na
osnovu ugrañenog webkit engina koji se koristi kao osnova i u Google Chrome i u Apple
Safari browserima, ali i za Android u nešto izmenjenoj varijanti.
Ipak, realno testiranje u pravim browserima je najtačnija solucija. Možemo direktno iz DW
pokrenuti browser i prikazati stranu. Na pomenutom document toolbaru postoji opcija
Preview/Debug in Browser (B). Klikom otvaramo padajući meni u kome možemo
izabrati prikaz u nekom od podešenih browsera (moraju biti instalirani) ili prikaz u Device
Cetntral, odnosno Browser Lab.
2
Izvor StatCounter
Copyright © Link group
Live View i Preview in Browser
Samu listu dostupnih browsera na ovoj opciji možemo izmeniti pomoću opcije Edit Browser
List ili iz padajućih menija Edit > Preferences... a zatim izborom grupe podešavanja Preview
in Browser.
Preview in Browser podešavanja u okviru Preferences panela
Copyright © Link group
Na slici ispod vidimo da su trenutno podešeni Firefox i Internet Explorer. Možemo dodati
druge ili ukloniti postojeće browsere pomoću ikonica +/- koje se nalaze iznad liste. Da
bismo dodali browser dovoljno je da kliknemo na + i potom u dijalogu koji sledi unesemo
ime browsera, kao i da ukažemo na putanju do njegovog exe fajla klikom na dugme browse.
Naravno, pre toga moramo instalirati i znati gde se exe fajl nalazi na lokalnom disku3.
Dodavanje novog browsera u listu
Preporučujem da, ukoliko već niste, instalirate Firefox i Chrome pored Internet Explorera
koji se isporučuje standardno uz Windows. Takoñe, nije loše imati instaliran i Apple Safari,
kao i Operu. Sve browsere možete dodati u ovu listu i pozivati ih po potrebi.
Verovatno ste primetili da se na prethodnim slikama pominju primary i secondary
browser. DW primarnom i sekundarnom browseru dodaje prečicu F12, odnosno Ctrl+F12.
U svakom trenutku samo jedan može biti primaran, odnosno sekundaran.
3
Za razliku od ostalih browsera koji se nalaze u Program Files folderu, kao i sve ostale aplikacije, Google Chrome
se nalazi na putanji: C:\Users\ime.korisnika\AppData\Local\Google\Chrome\Application\Chrome.exe
Copyright © Link group
7. Osnovni tekst tagovi
Osnovni tagovi stranice - block vs. inline
Već smo pomenuli osnove HTML tagova i strukture. Pre nego što krenemo sa kreiranjem
sadržaja i formatiranjem, moramo napomenuti dva tipa gradivnih elemenata.
Postoje block i inline tagovi. Iako su svi tagovi deo šire strukture, block elementi se
pojavljuju kao pravougaoni objekti koji zauzimaju maksimalnu širinu, a njihova širina i
visina može se postavljati nezavisno od drugih susednih elemenata. Nasuprot njih, inline
elementi se predstavljaju kao deo toka teksta, i ne mogu imati svoju visinu širinu, niti se
prelamati kroz više linija teksta. Najlakše je zamisliti inline elemente kao jedan karakter,
kao jedno slovo teksta.
Neki od najčešće korišćenih block elemenata su:
•
•
•
•
Paragrafi: p
Naslovi (Heading): h1, h2, h3, h4, h5, h6
DIV tagovi: div
Liste (ureñene, neureñene): ol, ul
Neki od najčešće korišćenih inline elemenata su:
•
•
•
•
Boldiranje teksta: strong
Slika: image
Deo teksta: span
Link (Anchor): a
Da podsetimo, svi ovi elementi, iz obe grupe, jesu tagovi, samo se drugačije manifestuju.
Kasnije ćemo se u lekcijama pozabaviti gradivnim elementima u okviru CSS Box modela.
Osnovni unos teksta
Ukoliko želimo da unosimo tekst direktno u DW, možemo to učiniti u design prikazu.
Komande su slične drugim tekst editorima.
Na slici ispod vidimo otvorenu HTML stranu u split prikazu (code i design prikaz
istovremeno). Unet je tekst koji se sastoji od tri paragrafa. Svaki paragraf je okružen p
tagom koji smo ranije pominjali (<p>...</p>).
Iako tekst može stajati direktno u body, takvu praksu bi trebalo izbegavati. Pravilno je da
postavimo p tag oko svakog paragrafa.
Copyright © Link group
HTML strana sa unetim tekstom
Možemo raditi direktno u design prikazu i tada će svaki novi red (tast. enter) biti pretvoren
u novi paragraf, tj. DW će sam kreirati tagove. Sa druge strane, možemo raditi u code
prikazu i tu menjati tekst, ali onda moramo paziti na tagove, jer ukoliko slučajno obrišemo
neki deo ili ceo tag, DW nas neće ispraviti i napravićemo grešku u kodu.
Ukoliko obratimo pažnju na properties panel, videćemo da nam prikazuje osobine i
formatiranje paragrafa ili drugog elementa u kome se nalazi kursor. Za sada ćemo se
pozabaviti samo HTML delom. Ukoliko je izabran CSS, klikom prebacite na HTML (slika
ispod).
HTML / CSS formatiranje u Properties panelu
Copyright © Link group
U properties panelu možemo pretvoriti paragraf u naslov (heading). Dovoljno je da
postavimo kursor bilo gde unutar željenog paragrafa i da izaberemo neki od headinga iz
padajućeg menija Format. Ne moramo selektovati ceo paragraf ručno (kao što bismo to
radili u MS Wordu) već samo postaviti kursor unutar njega, jer se format padajući meni
odnosi na ceo block elemenat. Slično pomenutom, možemo dodeliti ID ili klasu elementu,
promeniti poravnanje i tako dalje.
Nasuprot tome, ukoliko želimo da paragraf, ili bilo koji drugi deo teksta postavimo u bold ili
italic, moramo tačno selektovati željeni tekst i potom izabrati iz properties panela bold,
odnosno italic. Ukoliko ne bismo selektovali, ništa se ne bi promenilo, jer DW ne bi znao na
šta da primeni željeno formatiranje. Slično je i kada želimo da postavimo link na odreñeni
tekst.
A - Formatiranje, odnosno izbor osnovnog formatiranja. Izbor je izmeñu:
o None - ne postavlja nikakav tag.
o Paragraf - osnovno formatiranje za standardni paragraf teksta <p>
o Heading 1-6 - Izbor jednog od šest nivoa naslova. Heading 1 je naznačajniji,
6 je najmanje. <h1>, <h2>...<h6>
o Preformatted - Slično paragraf formatiranju, ali postavlja <pre> tag koji se
koristi za prikaz koda (obično monospace font).
B - Izbor identifikacione vrednosti (ID) koji želimo primeniti na izabrani element1.
Trenutno je prazno jer nemamo učitanih CSS stilova, a samim tim ni dostupnih selektora
C - Izbor klase (Class) koju želimo primeniti na izabrani elemenat
D - Postavljanje bold formatiranja (<strong> ili <b>)
E - Postavljanje Italic formatiranja (<em> ili <i>)
F - Postavljanje neureñene (ul) liste
G - Postavljanje ureñene (ol) liste
H - Dodavanje/uklanjanje blockquote elementa radi uvlačenja paragrafa <blockquote>
I - Hiperlink do stranice/fajla/elementa koji se postavlja na selektovan tekst. Možemo
uneti link ručno u polje, prevući ikonicu linka (Point to File) do fajla u file panelu ili
izabrati fajl klikom na folder ikonicu (Browse for File)
J - Title odnosno naslov linka (dostupno je samo kada je kreiran link)
K - Odreñuje kako će se otvoriti linkovani dokument (samo kada je kreiran link):
• _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.
1
Identifikaciona vrednost (ID) i klase (class) su detalji koji se odnose na CSS i služe za povezivanje CSS
stilizacije sa samim elementima (o tome detaljno u narednim lekcijama). Možda deluje nelogično da se opcije za
dodelu ID i Class vrednosti nalaze u okviru HTML opcija (a ne CSS), ali to je zato što se te vrednosti upisuju kao
HTML atributi nad odreñenim tagom, a CSS se referencira na njih.
Copyright © Link group
• _top - Učitava u punom prozoru, zanemarujući sve frejmove.
L - Putem ove opcije otvaramo dijalog za osnovna podešavanja strane. Vratićemo se na
ovu opciju kad obradimo stilizaciju.
M - Izbor i podešavanja lista (dostupno samo kada je kreirana i selektovana lista).
Kopiranje teksta iz drugih programa (Paste special)
Ukoliko kopiramo iz notepada, ili sličnog programa koji ne poseduje nikakvo formatiranje,
možemo koristiti standardno cut/copy/paste kopiranje teksta (Ctrl+x, Ctrl+c, Ctrl+v). U tom
slučaju, pošto je tekst neformatiran, DW će ga prihvatiti kao plain (običan) tekst. Opcije za
kopiranje možemo pozvati i putem padajućeg menija Edit ili desnim klikom miša na željenu
lokaciju2.
Sa druge strane, ukoliko pastujemo iz nekog programa koji i sam sadrži formatiranje i
stilove (poput MS Worda i sličnih) ili sa web strane, jednostavno copy/paste bi unelo gomilu
nepotrebnog koda. To formatiranje se onda sukobljava sa našim formatiranjem strane.
U tom slučaju, možemo koristiti paste special koji, za razliku od običnog paste, sadrži još
jedan korak u kome odreñujemo kako i šta ćemo iskopirati, a šta odbaciti. Pomenutu
funkciju pokrećemo slično kao paste, desnim klikom miša na poziciju gde želimo da
iskopiramo i biranjem Paste Special.. ili pozivanjem istoimene opcije iz Edit padajućeg
menija. Pojaviće nam se sledeći dijalog:
Paste Special dijalog
Postoje sledeće opcije:
•
Text only - Samo tekst u bukvalnom smislu, svako formatiranje je izuzeto.
2
Zabeleženo je da se u DW CS5 i CS4 relativno često javljaju problemi sa copy/paste i sličnim opcijama. Na
primer, može se desiti da prečice ctrl+x/c/v ne funkcionišu, odnosno pozivaju neku drugu komandu. Uglavnom je
problem u samom Dreamweaveru. Rešenje može biti u brisanju cache fajlova DW-a. Ukoliko imate neki ovakav
problem, pogledajte: http://forums.adobe.com/thread/494811.
Copyright © Link group
•
•
•
Text with structure (paragraphs, lists, tables, etc) - Ova opcija će pored teksta
ostaviti i naslove, pasuse, tabele, liste i drugo strukturno označavanje.
Text with structure plus basic formatting (Bold, Italic) - Ova opcija će ostaviti
Bold i Italic formatiranje pored elemenata iz prethodne stavke.
Text with structure plus full formatting (Bold, Italic, Styles) - Ova opcija
konvertuje fontove, boje i druge stilove u CSS fajl. Rezultat u Design prikazu je
impresivan, ali CSS fajl je noćna mora. Preporučujem da ne koristite ovu opciju.
Mnogo je bolje izabrati Text with structure plus basic formating, pa urediti svoj CSS,
kao i dve dodatne opcije:
•
•
Retain line brakes - Ovaj checkbox nam omogućava da odredimo da li će se line
breaks (br) sačuvati ili ne.
Clean up Word paragraph spacing - Ova opcija izbacuje ekstra liniju izmeñu
paragrafa u tekstu dodatom iz Microsoft Worda.
U ranije pomenutom Preferences panelu (Edit > Preferences...), u grupi Copy/Paste
možemo postaviti default ponašanje opcije Paste. Ova podešavanja su potpuno ista kao u
prethodno pomenutom Paste Special dijalogu, ali odnose se na običan Paste. Tako
možemo podesiti da neka od varijanti iz Paste special zameni standardni
Paste.
Osnovna podešavanja za copy/paste
Copyright © Link group
Unos MS Word i Excel fajlova
Dreamweaver može uvesti (import) Word i Excel fajlove izborom opcije iz padajućeg menija
File > Import > Word Document... odnosno Excel Document...
Pojavljuje nam se, zatim, standardni dijalog za izbor fajlova, sa tom napomenom da se u
donjem delu mogu podesiti opcije uvoza, kao kod Paste special. Kursor mora biti postavljen
u dizajn prikazu.
Uvoz fajlova
Ove opcije neće biti dostupne ukoliko MS Office nije instaliran na računaru.
Osim uvoza fajlova, DW može i otvoriti HTML fajlove koje smo sačuvali u bilo kom
programu, pa i u MS Wordu. U tom slučaju, po otvaranju fajla, možemo koristiti opciju iz
padajućeg menija Commands > Clean Up Word HTML...
Pojavljuje nam se dijalog u kome možemo izabrati šta sve želimo da uklonimo od Word
formatiranja. Preporuka je da se sve opcije ostave štiklirane.
Copyright © Link group
Čišćenje (clean up) Word formatiranja
Copyright © Link group
Tipografija i liste
Tipografija
Tipografija je tehnika i umetnost prikaza teksta na razumljiv i vidljiv način. Reč tipografija
potiče od grčkih reči τύπος, što znači forma, i γραφή, što znači pisanje, dakle slobodan i
grub prevod bi mogao biti forma pisanja. Tipografija se pojavila u antička vremena uporedo
sa prvim pisanim tragovima, ali se početkom moderne tipografije smatra trenutak pojave
prve štamparije Johana Gutenberga.
Mi se nećemo baviti tipografijom uopšteno, već samo web tipografijom, odnosno prikazom
teksta na internetu. Ipak, ukoliko su Vam ovi opšti pojmovi nepoznati, preporučujem da
pogledate vodič kroz tipografiju koji je pripremila kompanija Adobe. Može se besplatno
preuzeti u PDF formatu na putanji: http://www.adobe.com/education/pdf/type_primer.pdf.
Za pravilno razumevanje web potrebno je uopšteno poznavanje one klasične tipografije.
Uglavnom, kada se pomene tekst, većina ljudi pomisli na jednostavno pisanje i osnovno
formatiranje, poput izbora fonta i poravnanja, eventualno bold/italic varijanti. Ipak, postoji
mnogo aspekata na koje moramo obratiti pažnju oko ureñivanja tekstova, pod uslovom da
imamo pripremljen pravilno napisan i gramatički ispravan tekst.
Čitljivost se ogleda u izboru fonta (font-familije)1. Važno je da su slova, tj odreñeni
karakteri čitljivi i vizuelno razdvojeni. Sve su to aspekti koji zavise od samog fonta i
njegovih karakteristika. Ali zato imamo mogućnost pravilnog izbora familije, kao i logičnog
rasporeñivanja na strani, što daje preglednost i lako razumevanje teksta, njegovog toka i
slično.
Dužina reda takoñe utiče na preglednost i uopšteno je mišljenje da bi pojedinačna linija
teksta trebalo da bude izmeñu 45 i 75 karaktera, mada to nije pravilo i postoje odstupanja.
Neki sajtovi i portali koji su uglavnom tekstualni imaju dužinu redova i do 100 karaktera,
što je i dalje prihvatljivo. Ukoliko se tekst deli u kolone, onda bi trebalo ići sa manjim
brojem karaktera. Ukoliko se koristi justify poravnanje, duži redovi se bolje ponašaju u
browserima.
Visina reda ili Leading (Line height) označava razmak izmeñu dve osnovne linije teksta.
Za web browsere je uobičajena, default vrednost od 1 em. Što u realnim uslovima za font
veličine 16 px kreira line-height takoñe od 16 px. Takav poredak je dosta nečitak, te se
preporučuje minimalno 1.2 em ili veći. Primer: ako je veličina fonta 10 px, vrednost od 1.4
em za line height daće 14 px.
Tracking (letter spacing) je razmak izmeñu pojedinačnih karaktera u tekstu. Može biti i
negativno. Trebalo bi biti oprezan sa nekim parovima slova, poput ft, rn, vv jer može doći
do vizuelnog spajanja karaktera i nerazumevanja, nečitljivosti teksta.
Word spacing je razmak izmeñu reči u tekstu.
1
U govoru često koristimo reč font u nepravilnom kontekstu. Font je tačno odreñeni stil i veličina neke font
familije. Na primer, Verdana 11pt bold je font, dok je Verdana font familija.
Copyright © Link group
Apsolutne i relativne font vrednosti
U web tipografiji možemo koristiti bilo relativne ili apsolutne vrednosti kako bismo definisali
veličinu karaktera, odnosno celog teksta. Sve ove jedinice se koriste za tipografiju, ali se
mogu primeniti i na druge elemente, poput margina, dimenzija širine/visine i tako dalje.
Apsolutne vrednosti su tačno odreñene i u potpunosti ne zavise od drugih elemenata ni
vrednosti.
Relativne vrednosti su zavisne od nasleñene vrednosti ili default vrednosti, u odsustvo
preñašnje, kao što ćemo videti na primerima.
Dostupne jedinice su:
•
•
Apsolutne jedinice
o in – inč (2.54mm)
o pt – point, tipografska tačka (1 point je 1/72 inča)
o pc – pika (1 pika je 12 pointa)
o cm – centimetar
o mm – milimetar
o px – piksel (jednobojna, nedeljiva tačka na ekranu monitora/ureñaja)
Relativne jedinice
o em – ems
o % - procenat
o ex – x-height
Apsolutne jedinice preuzete iz štampanih medija, kao što su in, pt, pc, cm i mm, trebalo
bi maksimalno izbegavati na internetu, osim u slučaju kada pripremamo poseban CSS za
štampu. Jedinica Ex je relativna i zavisi od visine karaktera x u izabranom fontu, ponaša se
slično kao em.
Pomoću piksela (px) tačno i apsolutno odreñujemo veličinu. Ukoliko postavimo vrednost
veličine na 12 px, uvek će biti 12 px. Aktuelna dimenzija samo zavisi od rezolucije monitora
i slično. Uz em vrednosti možda je najčešće korišćena jedinica.
Procentualna jednica em je dobila takav naziv pošto je ranije, u doba analogne štampe,
zavisila od velikog slova M u fontu, jer je ono kreiralo kvadratnu formu i bilo isto za sve
fotove u istoj veličini. Danas, u modernim digitalnim fontovima, em vrednost je
procentualna vrednost fonta koji se koristi, drugim rečima, veličina se nasleñuje od
parent elementa. To praktično znači da dobijenu veličinu množimo sa em vrednošću.
Najlakše je objasniti na primeru. Moderni browseri po default vrednosti dodeljuju veličinu od
16 px normalnom tekstu u <body> elementu (na celoj strani). Ukoliko bismo postavili
veličinu na 1 em, veličina bi bila 16 px. Ukoliko bismo postavili veličinu na 2 em, veličina bi
bila 16px*2em=32px. Razmotrićemo još jedan primer. Default vrednost je 16 px, kako
smo rekli. Postavićemo jedan div i njegovom tekstu dodeliti veličinu od 3 em. Unutar njega
ćemo postaviti još jedan div i na njemu veličinu od 0.5 em. Tada bismo dobili
16px*3em*0.5em=24px. Kao što možemo zaključiti, em vrednost zavisi direktno od
parent, okružujućeg elementa.
Copyright © Link group
Prikazane em vrednosti
Važno je napomenuti da, po default vrednostima, svi tipografski elementi imaju svoje
odreñene vrednosti. Kako smo pomenuli, osnovna vrednost za normalan tekst je 16 px, dok
je na primer za h1, 2 em – što daje h1 veličinu od 32 px.
Neki od najčešće korišćenih elemenata i njihove default veličine
Ove default vrednosti, tj njihove veličine ne bi trebalo pamtiti. Odlika dobrih web dizajnera
jeste da ništa ne prepuste slučaju i zato je uvek dobro definisati svoje vrednosti. Drugim
rečima, ako definišemo dimenzije za h1-h6, za paragrafe i tako dalje, ne moramo brinuti o
default podešavanju.
Dostupni fontovi
Na stranicama koje kreiramo ne možemo koristiti bilo koji font, odnosno font-familiju. Ovo
možda deluje čudno i nelogično na prvi pogled. U nekim drugim medijima, na primer, kada
Copyright © Link group
kreiramo tekst u Wordu ili kada pravimo plakat u Adobe Illustratoru, imamo na raspolaganju
čitav dijapazon fontova koje možemo koristiti. Kod web stranica je drugačija situacija, jer
njihova tipografija zavisi od računara korisnika. Tačnije, mi ne ugrañujemo font u samu
stranicu, već samo informaciju koji je font upotrebljen.
Na primer, ukoliko unesemo tekst i definišemo kroz CSS da se koristi Verdana font, browser
korisnika će dobiti tekst i informaciju o fontu, meñu ostalim informacijama i stilovima. Tada
browser prikazuje tekst, ali u fontu koji učitava sa računara korisnika. Ukoliko korisnik nema
instaliran željeni font (Verdana, u našem primeru) biće prikazan default font, što je na
Windows sistemima Times New Roman. Svakako je jasno da tako nešto nije mnogo poželjno
i predstavlja veliko ograničenje. Povrh svega, različiti korisnici koriste različite sisteme,
Windows, Mac, Linux, Android, iOS, Symbian i tako dalje, sa različitim instaliranim
fontovima. Ukoliko bi tekstu na strani postavili npr. font Helvetica, browseri na Mac
sistemima bi ga normalno prikazali (jer je to jedan od default Mac fontova), dok bi na
Windowsu ili Linuxu nastao problem svima osim onima koji su sami instalirali Helveticu.
Sve ovo pomenuto je dovelo do toga da se koristi relativno mali broj fontova na
internetu i pri tom se kroz CSS ne definiše samo jedan izbor, već niz fontova (engl. font
stack). U tom slučaju, browser će ići redom i prikazati tekst u prvom fontu koji je dostupan.
Pravilo je da se uvek završi generičkim izborom - serif ili sans-serif.
Predefinisani font-family nizovi
Copyright © Link group
Na slici vidimo izbor od predefinisanih font nizova u DW-u prilikom podešavanja CSS opisa.
Za sada ćemo govoriti samo o principu fontova, a kasnije ćemo se upoznati sa CSS-om
detaljno. Na slici u listi vidimo da je prvi izbor Verdana, Geneva, sans-serif. Ukoliko
postavimo takav izbor, browser će pokušati da prikaže tekst u Verdana fontu (Windows),
ukoliko ga ne pronañe prelazi na font Geneva (Mac), a ako i njega ne pronañe na sistemu,
izabraće prvi ne serifni font. Pošto su pomenuti fontovi skoro sigurno prisutni na svim
sistemima, a pritom su vrlo slični, možemo reći da naš tekst po pitanju tipografije neće
imati problema.
U nastavku su date dve tabele, sa najčešće instaliranim fontovima na Windows i Mac
sistemima i procentom zastupljenosti kod korisnika računara. Na primer, vidimo da se na
Windows sistemima Georgia font pojavljuje u 98.55% slučajeva, što je siguran izbor. Sa
druge strane, Constantia se pojavljuje samo u 53.81% slučajeva. Možemo kombinovati više
fontova kako bismo se osigurali. Na primer, možemo postaviti: Constantia, Palatino,
Georgia, serif.
Windows
Serif
%
Sans-serif
%
Georgia
98.55
Verdana
99.40
Times New Roman
98.60
Tahoma
99.30
Palatino Linotype
98.04
Arial
99.15
Book Antiqua
86.09
Trebuchet MS
99.00
Garamond
86.24
Lucida Sans Unicode
98.25
Cambria
54.51
Franklin Gothic Medium
97.89
Constantia
53.81
Calibri
54.76
Goudy Old Style
51.30
Candara
54.31
Baskerville Old Face
49.10
Gill Sans MT
51.74
Bodoni MT
47.89
Segoe UI
45.04
Mac
Serif
%
Sans-serif
%
Times
96.23
Helvetica
99.71
Georgia
94.20
Geneva
98.84
Times New Roman
93.62
Lucida Grande
99.13
Hoefler Text
88.70
Arial
97.10
Baskerville
88.60
Verdana
96.81
Didot
87.72
Helvetica Neue
94.74
Big Caslon
85.10
Trebuchet MS
94.20
Palatino
79.71
Gill Sans
91.52
Lucida Bright
64.90
Futura
91.01
Garamond
23.84
Optima
90.14
Statistika instaliranih fontova - Izvor: A Way Back, http://www.awayback.com/
Copyright © Link group
Listu fontova, odnosno font nizova u DW-u možemo korigovati i izmeniti po svojim
potrebama. Vodite samo računa da ne unesete neke fontove koji su retki i nedostupni.
Česta greška početnika je da pronañu na internetu font koji se njima sviña, preuzmu ga,
instaliraju, definišu na sajtu i to objave. Kod njih će stranica izgledati kako treba, jer imaju
instaliran font, ali na većini drugih računara će nastati problem – nedostaje font.
Listu font nizova (font stack) definišemo u dijalogu Format > Font > Edit font list. Isti
dijalog možemo pozvati i direktno prilikom izbora, kao poslednja opcija.
Podešavanje liste font nizova
@font-face
Iako davno zamišljena kao opcija, tek u poslednje vreme postaje aktuelna mogućnost
embedovanja fontova. To praktično znači da možemo uz sajt, spakovati i potreban font, koji
browser učitava i koristi po potrebi. Iako jednostavno zvuči, stvari se komplikuju oko
standarda i različitih browsera. Trenutno postoji više varijanti:
•
•
•
•
TTF – funkcioniše na većini browsera osim na Internet Exploreru i iPhone-u.
EOT – samo na Internet Exploreru.
WOFF – nov, kompresovan format, koji tek uzima maha.
SVG – samo na iPhone/iPad sistemima.
Zbog svega toga, postoji više alata koji nam olakšavaju implementaciju, poput popularnog
www.fontsquirrel.com sajta.
Copyright © Link group
Liste
Kada kažemo liste, uglavnom mislimo na jednostavno, vizuelno odvajanje sadržaja u
smislene celine. To je svakako tačno, ali liste u HTML-u mogu biti mnogo više. Lista može
poslužiti da odvojimo odreñene celine, radi grupisanja više linkova u celinu, radi
dodeljivanja prioriteta odreñenim elementima i tako dalje.
Same liste i ne moraju izgledati kao što ih možda zamišljamo, već mogu imati potpuno
drugačiji izgled, pri čemu korisnik i ne primećuje da je sadržaj strukturiran pomoću liste. Na
primer, veliki broj navigacija (osnovnih menija) na sajtovima danas je kreiran pomoću lista,
koje su stilizovane poput dropdown menija i sl.
Standardna primena liste - sajt IT Akademije (www.it-akademija.com)
Copyright © Link group
Upotreba liste za kreiranje navigacije - sajt Srednje IT škole (www.iths.edu.rs)
U prvom primeru na slici vidimo jednu standardnu primenu liste, i to neureñene liste, gde je
pomoću bulleta strukturiran tekst u smislene celine, pojedinačne stavke. Takav prikaz je u
toj funkciji pregledniji od običnog teksta.
U drugom primeru vidimo navigaciju sajta koja je takoñe realizovana pomoću neureñene
liste, ali koja je drastično izmenjena u vizuelnom smislu, korišćenjem CSS. Same stavke su
poreñane horizontalno, jedna pored druge i lista sadrži i ugnježdene stavke koje se otvaraju
vertikalno, na prelazak mišem.
Vrste listi
Postoje tri osnovna tipa listi koje možemo koristiti u DW, odnosno u HTML dokumentu:
•
•
•
ureñene (engl. ordered) liste. Označavaju se kao ol
neureñene (engl. unordered) liste. Označavaju se kao ul
definicione (engl. definition) liste. Označavaju se kao dl
Unordered liste (ul) su liste čije se stavke označavaju raznim elementima - kvadrat, krug,
crta i tako dalje. Malopre su pomenuti bulleti.
Ordered liste (ol) su liste čije se stavke označavaju nekim tipom rednih elemenata.
Najčešće brojevima, rimskim brojevima, slovima alfabete i tako dalje.
Definition liste (dl) su liste čije se stavke sastoje iz dva dela, teksta i definicije. Korisne su
za kreiranje lista pitanja i odgovora, jer su uvek sastavljene iz parova.
Copyright © Link group
Struktura lista
Ureñene i neureñene liste
ul i ol liste imaju veoma sličnu, praktično istu strukturu. Počinju i završavaju se tagom liste
- <ul>...</ul>, odnosno <ol>...</ol>. Unutar osnovnog taga liste, nalaze se <li> tagovi
koji odvajaju stavke.
Struktura neureñene liste izgleda ovako:
Neureñena - unordered lista - kod i prikaz na stranici
Kao što smo napomenuli, počinjemo ul tagom, postavljamo stavke u vidu li tagova i
zatvaramo ul tag.
Struktura ureñene liste je praktično ista, osim što je osnovni tag ol:
Ureñena - ordered lista - kod i prikaz na stranici
Pošto imaju istu strukturu, kada bismo samo promenili ul u ol (ili obrnuto) na početku i
kraju liste (tag), možemo konvertovati tip liste.
Ranije smo napomenuli, a sada ćemo ponoviti da je veoma važno kako pišemo kod. Ukoliko
liste sreñujemo kroz dizajn prikaz, DW će se brinuti o tome, ali ukoliko sami menjamo u
Copyright © Link group
code prikazu, moramo voditi računa da sve tagove zatvorimo i da ih ne ukrštamo. I jedan
pogrešan karakter može načiniti haos na strani u prikazu.
Postoje takozvane ugnježdene liste, koje za razliku od prethodnih primera imaju više
nivoa stavki. To najlakše možemo primetiti na sledećem primeru:
Lista sa ugnježdenom listom - kod i prikaz na stranici
U primeru, ako posmatramo prikaz na stranici (Design prikazu) možemo uočiti prvi nivo
stavki, dok jedna stavka (Beograd) ima svoje ugnježdene stavke. Najlakši način da
kreiramo podnivo jeste da za početak unesemo stavke u jednom nivou, kao da su deo
osnovne liste. Potom selektujemo željene stavke i izaberemo ikonicu za uvlačenje reda iz
Properties panela:
Copyright © Link group
Ako želimo da neku od stavki vratimo u gornji nivo, jednostavno ćemo selektovati i izabrati
ikonicu pored. Lista može imati praktično neograničen broj nivoa.
Ako pogledamo u kod liste, videćemo da je DW u dobroj meri promenio strukturu. DW
praktično kreira potpuno novu listu, sa ul tagom i smešta je u okviru jedne stavke koja je
nadreñena. Dakle, kompletna, nova lista se nalazi sada izmeñu li stavke nadreñene liste.
Važno je zapamtiti da ne smemo zatvoriti li nadreñene stavke sve dok ne završimo samu
ugnježdenu listu.
Isti je princip i za ol.
Definicione liste
Definicione liste se nešto reñe koriste od malo prepomenutih, ali isto tako mogu biti vrlo
korisne. Najčešća upotreba može biti kod najčešće postavljenih pitanja i sl.
Važno je zapamtiti da se stavke sastoje uvek iz dva dela, koja su predstavljena tagovima dt
i dd, a sama lista je označena tagom dl.
Definiciona lista (dl) - kod i prikaz na stranici
Copyright © Link group
Kada želimo da kreiramo ovaj tip liste, primetićemo da se ne nalazi dugme na Properties
panelu kojim možemo brzo kreirati listu, kao kod ul i ol. Da bismo kreirali definicionu listu
potrebno je da selektujemo odreñene paragrafe koje želimo i iz padajućeg menija izabrati
Format > List > Definition list. Pri tom, obavezno je selektovati paran broj paragrafa, jer
kao što je rečeno, ovaj tip listi sadrži stavke iz dva dela.
Copyright © Link group
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) je danas jedan od najbitnijih elemenata modernih web
sajtova. Daljom evolucijom interneta polako se od osnovnih, preko tabelarnih prikaza u
HTML-u prešlo na savremeni prikaz, koji je omogućio CSS.
CSS je style sheet jezik koji se koristi za opis prezentacione semantike dokumenta pisanog
u opisnom jeziku (markup language). Jednostavnije rečeno, opisuje, tj. ureñuje izgled i
formatiranja bilo kog elementa na stranici. Uobičajeno je da stilizuje web strane pisane u
HTML ili XHTML, ali se može primeniti i na bilo koji XML dokument, uključujući i SVG i XUL.
CSS je kreiran sa namerom da odvoji sadržaj dokumenta (pisanog u HTML-u) od samog
izgleda dokumenta, koji uključuje elemente poput boja, fontova ili rasporeda. Ovo
razdvajanje poboljšava pristupačnost, povećava fleksibilnost i kontrolu nad karakteristikama
stranice, donosi mogućnost da više stranica dele isto formatiranje, umanjuje kompleksnost i
ponavljanje i poboljšava rasporeñivanje elemenata. Drugim rečima, ostavljamo da HTML
"nosi" sadržaj, dok CSS taj sadržaj stilizuje. HTML nikad nije kreiran da bude vizuelni
medijum, već jednostavan način za prezentovanje sadržaja. Na primer, HTML je u verziji 1
podržavao samo bold i italic od opcija za formatiranje teksta.
Problem sa internetom je bio taj što je kreiran za štrebere. Nije bilo mesta za boju
pozadine i lepe slike – samo sadržaj. Slatki sadržaj. Teško je raspravljati se sa
takvim idealima, ali sa druge strane, tačno je da svi mi volimo male radosti i
poseban doživljaj dok surfujemo. Onda je došla tabela da reši naše dileme, najzad
smo imali kontrolu nad rasporedom na stranici! To je bila prava stvar. Nalazili smo
načina da prevarimo sistem. Ne možeš da napraviš punu liniju od jednog piksela?
Samo ubaci GIF za razmak, pozadinsku boju i nekoliko ćelija tabele i gotov si! Ne
možeš da kontrolišeš tipografiju? Iskoristi još jedan <font> tag!1
Ovaj prethodni pasus lepo ilustruje web dizajn do pojave CSS-a i početaka njegove
masovne upotrebe. Developeri i dizajneri su se dovijali na razne načine, kako bi prikazali
nešto na željeni način. U celom tom peridu razvoja neta dizajneri su većinu vremena trošili
na to da pomoću trikova dobiju ono što žele, jer nije postojao pravi alat (CSS).
Tako dolazimo do današnjice i pune primene CSS-a, gde praktično sve što zamislimo
možemo lako kreirati. Ukoliko imamo nekoliko naslova (h1) koje želimo da formatiramo na
odreñeni način, na primer da im promenimo boju iz standardne crne u neku drugu, html bi
izgledao uobičajeno:
<h1>Naslov</h1>
....
<h1>Drugi naslov</h1>
dok bi u CSS-u postavili:
h1 {
1
http://www.sitepoint.com/article/tables-vs-css/
Copyright © Link group
color:#F90;
}
Tako bi svi h1 naslovi imali boju #F90. Ukoliko promenimo boju preko CSS vrednosti samo
na jednom mestu, svi vezani elementi (naslovi) bi odmah bili promenjeni. Primetićemo da
html ne sadrži ništa od stilizacije, već samo sadržaj, dok CSS daje boju (u ovom primeru).
Naravno, današnji standardi i naširoko rasprostranjen CSS 2.1 nije kraj razvoja, naprotiv.
CSS 3 je praktično već stigao i donosi nove načine formatiranja.
CSS sintaksa
Iako Dw pruža odlične mogućnosti rada sa CSS-om bez skoro ikakvog poznavanja samog
jezika, važno je da poznajemo CSS kod, makar da bismo promenili neki detalj ili mogli da
protumačimo CSS. CSS sintaksa se sastoji od opisa izgleda elemenata u dokumentu.
Jedan opis (engl. Rule) može da definiše izgled više elemenata, ali i više opisa može
da definiše jedan element. Na taj način se opisi slažu jedan preko drugog da bi definisali
konačni izgled odreñenog elementa, otuda naziv Cascading (na engleskom cascade znači
crep) da bi se dočaralo slaganje jednog stila preko drugog u definisanju konačnog izgleda
elementa. Nije bitno da li se ti opisi nalaze u eksternim fajlovima ili u istom html
dokumentu.
Da bismo ovo plastičnije dočarali, zamislićemo ovakav primer. Pomoću jednog CSS opisa h1
naslove bojimo u crveno, a onda dodajemo drugi opis koji se odnosi na tačno odreñeni
naslov h1 i njemu dodeljuje odreñenu veličinu. Tako smo složili dva opisa na tom naslovu.
Dobija boju od jednog, a veličinu od drugog. Videćemo detalje kako to činimo u nastavku
ove jedinice.
Svaki opis se sastoji od tri elementa:
1. definicije ciljnih elemenata (engl. Selector)
2. svojstva (engl. Property)
3. vrednosti (engl. Value)
Svojstvo i vrednost zajedno nazivamo deklaracijom (engl. Declaration).
Nakon što definišemo ciljne elemente, tj. elemente na koje će se trenutni opis odnositi,
nizom parova svojstvo-vrednost definišemo izgled svakog ciljnog elementa. Sintaksa koja se
pri tom definiše je sledećeg oblika:
ciljni elementi {
svojstvo: vrednost;
svojstvo: vrednost;
}
Sve ovo čini jedan CSS opis (CSS rule).
Copyright © Link group
CSS podržava i komentare, koji izgledaju kao u programskom jeziku C, dakle navode se
izmeñu znakova /* i */.
Ciljni elementi
Ciljni elementi se definišu na tri načina:
1. navodeći HTML tag ciljnih elemenata
2. navodeći klasu elemenata
3. navodeći direktnu identifikacionu vrednost (ID) elementa
HTML tag
Kada definišemo preko HTML taga, to znači da će opis uticati na sve elemente u dokumentu
koji imaju ovaj tag. Definicija ciljnih elemenata se tada vrši preko direktnog upisa
odgovarajućeg HTML taga:
body {
svojstvo: vrednost;
}
Klase
Klasa HTML elementa je reč koju stavimo kao vrednost argumenta CLASS pri definiciji tog
elementa. Definicija ciljnih elemenata (svih koji imaju odreñenu istu klasu) se vrši tako što
upišemo znak tačke (.), a zatim naziv klase:
.imeKlase {
svojstvo: vrednost;
}
Ovaj opis će, dakle, imati uticaja na sve elemente u dokumentu koji su definisani na sledeći
način:
<p class="imeKlase">...</p>
<div class="imeKlase">...</p>
Identifikaciona vrednost
Identifikaciona vrednost elementa je vrednost argumenta ID pri definiciji tog elementa. U
jednom dokumentu identifikacione vrednosti moraju biti jedinstvene, tj. može postojati
samo jedan element sa odreñenom identifikacionom vrednošću, što znači da ovakvi opisi
mogu uticati samo na po jedan element u dokumentu. Definišu se pomoću znaka #, a zatim
se piše identifikaciona vrednost:
#identifikacionaVrednost {
svojstvo: vrednost;
}
Copyright © Link group
Ovaj će, dakle, opis uticati na sve elemente koji u svojoj HTML definiciji imaju
id="identifikacionaVrednost", odnosno na primeru:
<p id="identifikacionaVrednost">...</p>
Identifikacione vrednosti su unikatne za jedan jedinstven tag na stranici, dok se klase mogu
ponavljati. ID se može ponoviti bez problema na drugoj html strani.
Pored pomenute tri kategorije ciljih elemenata (selektora), postoje i takozvani
pseudoselektori. Pseudo-classes i Pseudo-elements - ovi selektori stilizuju elemente
prema njihovoj poziciji ili ulozi na stranici, kao na primer link preko koga prelazi miš. Sastoji
se od HTML selektora, dve tačke (:) i imena pseudoklase ili pseudoelementa. Na primer:
a:hover.
Postavljanje CSS-a
CSS možemo postaviti na tri načina:
1. Eksterni CSS - unosom CSS opisa u poseban fajl koji je povezan sa
stranicom
Na ovaj način možemo jedan CSS fajl povezati sa više html strana, radi lakšeg
korišćenja istih CSS opisa. Pored toga, može biti i više od jednog CSS fajla vezanog
za isti html (ne zaboravite, CSS fajl može sadržati više opisa)
2. Interni CSS - unosom CSS opisa u okviru head dela strane
U ovom slučaju, CSS opisi će biti dostupni samo na toj jednoj strani. Ne kreiramo
poseban fajl, već se CSS nalazi u okviru HEAD dela, odvojen od ostatka HTML strane
posebnim <style> tagom.
Copyright © Link group
3. Inline CSS - unosom inline CSS opisa
Inline opis unosimo slično atributu u HTML-u i u ovom slučaju se on odnosi samo na
taj konkretni tag, na toj konkretnoj strani. Ne preporučuje se korišćenje ovakvih
CSS opisa, a u strict varijantama HTML i XHTML fajlova je i zabranjen. Ovakav vid
kreiranja stranica narušava koncepciju odvojenosti sadržaja od stilizacije.
(Napomena: nemojte mešati pojmove inline CSS stilova sa Inline i Block
elementima - tagovima)
Slaganje CSS stilova (Cascade theory)
Videli smo da se CSS može postaviti na tri načina (poseban fajl, head sekcija html
dokumenta ili inline na samom tagu) tako da može doći do poklapanja istih CSS vrednosti.
Takoñe, u okviru samih CSS fajlova ili CSS dela u okviru stranice, može doći do poklapanja.
U takvim slučajevima postoje odreñena pravila koja se automatski primenjuju i odreñuju
koji će CSS opis biti primenjen.
U slučaju da se CSS opisi poklapaju, browser će poštovati pravilo bliskosti (eng. proximity
rule) koje odreñuje da će biti primenjen CSS opis koji je najbliži ciljnom elementu. U
tom kontekstu je sledeća struktura i redosled:
1.
2.
3.
4.
Default vrednosti browsera
Eksterni CSS fajl
Interni CSS (u head sekciji dokumenta)
Inline CSS stil (u okviru samog taga)
To praktično znači da ukoliko postoje sve četiri varijante stilizacije, browser će iskoristiti
četvrtu.
Pogledajmo na primeru. Ukoliko smo u CSS fajlu postavili:
p {
color:#F00; /*crvena boja*/
}
u head delu strane:
p {
color: #3F0; /*zelena boja*/
}
Copyright © Link group
a na samom tagu inline plavu boju:
<p style="color:#00F;">Ovo je neki tekst.</p>
Logično je da istovremeno tekst ne može biti crn (default), crven, zelen i plav, već će
browser postaviti plavu boju, jer je njen CSS opis najbliži elementu.
Bitno je napomenuti i da ukoliko se nalaze dva ili više CSS opisa koja se odnose na isti ciljni
elemenat, a sama svojstva se ne sukobljavaju, biće primenjena sva svojstva.
Pogledaćemo dva primera.
Ukoliko imamo CSS opis:
p {
color:#F00;
}
ali i drugi opis:
p {
font-family:Arial;
}
Iako se odnose na isti element, paragraf će biti formatiran u crvenoj boji, ali i u fontu
Arial jer se dopunjuju.
Pravila nasleñivanja (Inheritance theory)
Sa druge strane, ukoliko imamo:
p {
color:#F00;
}
ali i
p {
font-family:Arial;
color:#3F0;
}
Uzimaju se sva svojstva koja se ne sukobljavaju plus jedno od sukobljenih. Paragraf će
svakako biti formatiran u fontu Arial, ali formatiranje boje (crvena ili zelena) će zavisiti od
pravila sukobljavanja koje smo pomenuli ranije.
Copyright © Link group
Pravila potonjih elemenata (Descendant theory)
Ciljni elementi preko kojih dodeljujemo svojstva mogu kompleksniji i specifičniji u zavisnosti
od elemenata iznad njih. Na primer:
h1 {
color:#F90;
}
je stilizovao sve h1 elemente. Dok bi sledeći kod:
div h1 {
color:#F90;
}
stilizovao samo h1 elemente koji se nalaze u okviru div elementa. Ukoliko npr. postavimo
h1 direktno u body, ne bi bio pogoñen, niti stilizovan ovim opisom jer nije u okviru nijednog
diva.
Pravilo specifičnosti (Specificity theory)
Dalje, možemo još preciznije definisati odnos elementa kojeg ciljamo stilizacijom. Na
preñašnjem primeru:
div h1 {
color:#F90;
}
ukoliko napišemo:
div.mojaKlasa h1 {
color:#F90;
}
stilizovaćemo sve h1 naslove koji se nalaze u div elementu sa klasom mojaKlasa.
Ukratko, ako postavimo razmak, ciljamo na elemenat ispod; ako nema razmaka, ciljamo na
element u istom nivou (elemenat koji ispunjava oba uslova).
Još jedan primer, malo komplikovaniji, je kombinacija više prethodnih elemenata:
body #header div.mojaKlasa h1 span {
color:#F90;
}
Da li možete sami protumačiti?
Copyright © Link group
U ovom slučaju, stilizujemo sve span elemente koji se nalaze unutar h1 naslova, koji su
smešteni u div elementu, ali samo u onom divu sa klasom mojaKlasa. Opet ti div-ovi moraju
biti u elementu sa id oznakom header, koji se nalazi u osnovnom body elementu.
Uglavnom nema potrebe za ovoliko detaljnom postavkom selektora, već se može dosta
jednostavnije unikatno naciljati traženi elemenat.
Sva ova pravila se mogu dalje komplikovati, ali su praktično veoma jednostavna, jer se prati
samo nekoliko preciznih pravila. Ipak, mnogi web dizajneri nailaze na problem ako ne
savladaju te osnove. Preporučujem da, ukoliko već niste, detaljno proñete kroz kurs Uvod u
HTML i CSS, jer je to okosnica web dizajna i rada u Dw. Sve će delovati mnogo
jednostavnije ako poznajete osnove.
CSS preference
Na slici ispod možemo videti code prikaz jednog CSS fajla u Dreamweaveru (sami CSS
fajlovi nemaju svoj vizuelni, design prikaz, jer oni stilizuju html fajlove).
CSS fajl
Copyright © Link group
Prikaz možemo korigovati i podešavati po svojim željama. Ukoliko otvorimo dijalog
preferences (Edit > Preferences...) i potom grupu Code Coloring, otvoriće nam se dijalog u
kome možemo korigovati osnovne boje koje se tiču koda ili vezano za odreñene dokumente.
Shodno tome, možemo izabrati iz Document type liste opciju CSS i klikom na dugme Edit
Coloring Scheme. Otvoriće se novi dijalog u kom svaki deo CSS sintakse može biti
prilagoñen našim željama. Za početak preporučujem da ostavite podešavanja kakva jesu.
Podešavanja code coloringa
Dreamweaver, kao što ćemo videti, može sav CSS kod pisati za nas, dok mi sva
podešavanja vršimo iz odreñenih panela. Radi preglednosti i ličnih afiniteta, možemo
podesiti na koji način će Dw formatirati CSS kod. Iz pomenutog preferences dijaloga
izabraćemo grupu parametara Code Format. Za sada, kao i kod prethodne stavke,
preporučujem da ostavite default vrednosti, a kada budete ovladali osnovama, možete
izmeniti podešavanja.
Copyright © Link group
Podešavanja code formata
Još jedna bitna grupa podešavanja vezana za CSS je CSS styles grupa iz preferences
panela. Ali, da bi ta podešavanja bila jasnija, pojasnićemo prvo jednu od značajnih
mogućnosti CSS-a.
Kada bismo, na primer, želeli da kreiramo gornju marginu od 10 piksela na naslovu h1,
možemo postaviti:
h1 {
margin-top:10px;
}
ukoliko želimo da margina bude sa svih strana, a ne samo na vrhu, možemo postaviti:
h1 {
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
}
tako smo dobili četiri linija koda. Ukoliko tako ostavimo, sve će funkcionisati najnormalnije,
ali možemo skratiti i pisati jednostavnije, a i preglednije. Zamenićemo prethodni primer
sledećim kodom:
h1 {
margin:10px;
}
Copyright © Link group
Ovako se u jednom redu odnosimo na sve četiri margine i tako smo uštedeli tri reda i
napisali pregledniji kod. Pri tom, nije zanemariva činjenica sama razlika u veličini CSS
fajlova i dužine njihove obrade u veoma kompleksnim sajtovima. CSS se skraćuje po tačno
odreñenim pravilima, koja ćemo upoznati. To skraćivanje nazivamo kraćom formom CSSa ili, u originalu, CSS shorthand.
Shodno pomenutom, ukoliko sami kucamo CSS moramo obratiti pažnju na te detalje, ali ako
želimo da odredimo kako da se Dw ponaša, izabraćemo u preferences panelu grupu CSS
styles.
Podešavanja css skraćivanja
Prva grupa opcija (Use shorthand for) odreñuje u kojim će slučajevima Dw skraćivati CSS. U
osnovnim default podešavanjima su sva polja prazna i Dw neće skraćivati kod. Druga opcija
(Use shorthand) se odnosi na editovanje postojećih fajlova, dok u trećoj možemo podesiti
način na koji želimo da editujemo CSS. Ukoliko ostavimo default (Edit using CSS dijalog),
naša interakcija sa CSS vrednostima će uglavnom biti putem panela. Sa druge strane,
ukoliko želimo da CSS menjamo kroz kod prikaz, možemo postaviti Edit using code view ili
edit using propetries panel.
Sve opcije vezane za CSS prefrence odnose se na naš pogled i interakciju sa CSS-om i
samim tim, podešavanja zavise od naših potreba i želja.
Copyright © Link group
10. CSS panel i opisi
CSS Styles panel
Centralno mesto za manipulisanje, kontrolu i kreiranje stilova i listi stilova je CSS Styles
panel. Ako panel nije vidljiv, otvorićemo ga preko padajućeg menija tako što ćemo izabrati
Window > CSS Styles.
Postoje dva režima rada u CSS Styles panelu:
All
Ovaj režim rada prikazuje sve CSS stilove primenjene na tekući dokument, bilo da su opisi u
eksternim CSS fajlovima ili su pak ugnježdeni u Head sekciji dokumenta.
CSS Style panel - All režim
Kada izaberemo All dugme, dobićemo dva panoa:
•
All rules - U ovom delu se prikazuju svi CSS opisi (rules) grupisani u vidu Tree
menija, razvrstani na osnovu CSS fajlova, ili ugnježdenih u samom html fajlu, a koji
Copyright © Link group
•
se primenjuju unutar trenutno otvorenog dokumenta. Ako se nalaze u Head sekciji
dokumenta (Embeded ili ugnježden), onda se prikazuje kao <style> Tag, a ako su
eksterni, tada se prikazuje ime CSS fajla. Pored imena fajla u zagradi se prikazuje
media atribut, ukoliko je postavljen. Ukoliko se poziva CSS fajl iz drugog CSS fajla,
onda će i to biti prikazano hijerearhijski u stablu.
Properties - Kada se selektuje CSS opis u gornjem All panou, ovde se prikazuju
svojstva (properties) tog opisa. Možemo brzo promeniti postojeća ili dodati nova
svojstva preko Add Property linka. Pošto kliknemo levim tasterom miša na
pomenuti Add property, pojaviće se padajući meni, gde možemo izbarati od
ponuñenih svojstava, a možemo i sami ukucati svojstvo ukoliko poznajemo tačan
naziv. Posle toga je potrebno uneti vrednost (value) u desnoj koloni za izabrano
svojstvo.
Dodavanje novog svojstva
Current
Ovaj režim CSS Styles panela je donekle kompleksniji. Omogućava detaljan prikaz svih CSS
opisa i svojstava primenjenih nad trenutno izabranim elementom, kao i sažetak svih
realno upotrebljenih svojstava. Podsetićemo se da se više CSS opisa može sukobiti. Ovaj
panel će prikazati sva svojstva, a u sažetku samo ona koja su primenjena.
Copyright © Link group
CSS Style panel - Current režim
•
•
•
Summary for selection - Ovde se prikazuje kratak sadržaj atributa trenutno
selektovanog stila.
About/Rules - U ovom delu se prikazuju dva načina rada: About, gde se prikazuje
informacija o selektovanom svojstvu i Rules, koji prikazuje ime svojstva i tag u kodu
na koji je primenjen. Promena iz About u Rules način i obrnuto vrši se preko dva
dugmeta u gornjem desnom uglu.
Properties - Donji deo panoa prikazuje svojstva selektovanog opisa i isti je kao u All
režimu.
Properties deo
Copyright © Link group
Na slici iznad vidi se Properties deo u kome su prikazana svojstva koja se ne primenjuju
(precrtana su) jer su, po ranije pomenutim pravilima, neka druga svojstva primenjena.
Na dnu CSS Styles panela se nalaze opcije koje su dostupne u oba režima rada.
Opcije CSS Styles panela
Videli smo da se Properties deo u oba prikaza ne menja, ali ga možemo prikazati na tri
načina, shodno našim željama. Stoga su tu tri opcije u donjem levom uglu panela:
•
•
•
Show Category View - Deli CSS na više kategorija. Svojstva svake kategorije su
prikazana u formatu liste koja se može proširiti klikom na znak plus. Svojstva u
svakoj kategoriji su poreñana po alfabetu sa primenjenim svojstvima prikazanim na
vrhu u plavoj boji.
Show List View - Prikazuje CSS svojstva u alfabet opadajućem nizu sa primenjenim
svojstvima u plavoj boji prikazanim na vrhu.
Show Only Set Properties - Default opcija, o kojoj je već bilo reči. Prikazuju se
samo svojstva koja su primenjena. Ova varijanta je možda i najlakša za upotrebu,
jer ne komplikuje prikaz svim opcijama.
U sva tri sličaja dobijamo iste opcije, na drugačiji način prikazane i grupisane.
Properties deo - tri prikaza
U donjem desnom delu panela su četiri opcije:
•
•
Attach Style Sheet - Ova opcija otvara Attach External Style Sheet dijalog za izbor
eksternog CSS fajla koji želimo da linkujemo ili importujemo u tekući dokument.
New CSS Rule - Ova opcija otvara New CSS Rule dijalog za biranje tipa selektora,
imena i odreñivanje lokacije za novo CSS pravilo.
Copyright © Link group
•
•
•
Edit Rule - Otvara se CSS Rule Definition dijalog za trenutno selektovan CSS opis u
dokumentu.
Disable/Enable CSS Property - Isključuje/uključuje trenutno izabrano svojstvo.
Delete CSS Property - Briše trenutno izabrano svojstvo.
Poslednje dve stavke mogu biti nedostupne ukoliko nije selektovano nijedno svojstvo.
Kreiranje CSS opisa (New CSS Rule)
Kada izaberemo kreiranje novog opisa pojaviće se ovaj dijalog. U njemu biramo tip
selektora, odnosno ciljnog elementa (Selector Type), ime selektora (Selector Name), kao i
gde želimo da CSS opis bude smešten (Rule Definition).
New CSS Rule dijalog
Selector Type - postoje četiri opcije:
•
•
•
•
Class (can apply to any HTML element) - Ova opcija kreira CSS klasu.
ID (applies to only one HTML element) - Ova opcija kreira ID selektor.
Tag (redefines an HTML element) - Ova opcija kreira HTML tag selektor.
Compound (based on your selection) - Ova opcija se koristi za pseudoklase,
pseudoelemente, descendente i grupne selektore.
Copyright © Link group
Selector Name - Ovde unosimo ime CSS selektora. Ako kreiramo ID selektor ili klasu,
možemo, ali ne moramo uneti simbol za funtu (ID) ili tačku (klasa), jer Dreamweaver
automatski kreira ispravan simbol ako je potrebno. Kada kreiramo HTML selektor, ovo polje
se pretvara u padajući meni gde možemo izabrati odgovarajući HTML tag. Možemo ili upisati
željeni tag ili izabrati iz liste. Tekst oblast ispod padajućeg menija opisuje na koji će element
uticati ovo novo pravilo. U slučaju složenih (compound) selektora, možemo pomoću opcija
Less Specific/More Specific podesiti preciznost opisa (na koje će se tačno elemente
odnositi), kao i to da li će biti odreñen sa više ili manje ciljnih elemenata.
Rule Definition - Vršimo izbor gde će se naš novi opis smestiti, odnosno, gde će kod biti
upisan. Postoje tri opcije:
•
•
•
(This document only) - Ovom opcijom smeštamo nov CSS opis koji kreiramo u
sam dokument, odnosno HEAD deo strane.
(New Style Sheet File) - Kreiramo novi CSS fajl, u koji smeštamo CSS opis.
Postojeći CSS fajl - Dostupno je samo ukoliko već postoji povezan CSS fajl (ili više
fajlova).
(Ne zaboravite da postoji i inline CSS koji ne možemo kreirati ovde jer se on smešta
direktno na html tag – ne kreira opis)
Pošto potvrdimo ovaj dijalog, otvoriće se novi, u kome možemo podešavati sve željene CSS
parametre i od kojih će DW kreirati svojstva upravo kreiranog opisa.
Podešavanja novog CSS opisa
Možemo menjati različita svojstva od podešavanja tipografije, preko boja do pozicioniranja.
Isti dijalog se poziva i kada želimo da izmenimo CSS opis. Detaljno ćemo se pozabaviti svim
opcijama ovog dijaloga.
Copyright © Link group
CSS Rule definition dijalog
Svaku od opcija u ovom dijalogu možemo ostaviti praznu, nepopunjenu. U tom slučaju,
browser će za dati element koristiti ili default stilizaciju ili drugi primenjen CSS opis, bilo da
se direktno odnosi ili je nasleñen. Ova osobina je čak i korisna. Na primer, možemo
definisati odreñeni font (font-family) za body tag. Pošto je sav sadržaj unutar njega, sav
sadržaj će imati taj font1 jer će naslediti od bodyja.
Type kategorija
•
•
•
•
•
•
•
•
•
Font-family – Izbor fonta, odnosno font familije koja će biti upotrebljena. Možemo
uneti jedan font ili više njih. Prikazuje se prvi dostupan.
Font-size – Definiše veličinu teksta. Ukoliko se odlučimo za brojčanu vrednost,
potrebno je da iz padajućeg menija izaberemo tip jedinice.
Font-style – Definiše stil teksta, odnosno Normal, Italic, ili Oblique. Poslednja dva
su praktično ista, ali je preporuka koristiti italic, jer ukoliko ne postoji italic varijanta
fonta, browser će izabrati oblique. U nekim slučajevima, oblique može biti “na silu”
iskrivljen normal tekst.
Line-height – Definiše visinu reda, ili ono što se u štampi naziva leading.
Text-decoration – Definiše dekoraciju teksta, odnosno možemo izabrati sledeće
vrednosti:
o Underline – Postavlja liniju ispod teksta.
o Overline – Postavlja liniju iznad teksta.
o Line-through – Postavlja liniju preko teksta, kroz sredinu.
o Blink – Čini da se tekst neizmenično pojavljuje i nestaje – trepće. Ne
podržava Internet Explorer, Chrome ni Safari. Trebalo bi izbegavati.
o None – isto kao i default vrednost za normalan tekst. Linkovi u startu imaju
underline i možemo ukloniti donju liniju ukoliko kreiramo novu klasu na linku
sa none vrednosti.
Font-weight – Definiše težinu teksta. Najčešće vrednosti su normal i bold, koje i
preporučujem da koristite. Budite oprezni sa brojčanim vrednostima jer ne
podržavaju svi browseri sve.
Font-variant – Možemo izabrati small caps varijantu pored standardne normal.
Retko se koristi jer mora font podržavati tu varijantu, ali i browser. IE do verzije 7 ne
podržava ovu opciju.
Text-transform – Transformiše tekst prilikom ispisa, slično prethodnoj stavci. Izbor
je izmeñu:
o Capitalize – Postavlja veliko prvo slovo svake reči
o Uppercase – Postavlja sva slova (karaktere) na velika slova.
o Lowercase – Postavlja sva slova (karaktere) na mala slova.
o None – isto kao i default vrednost
Color – Postavlja boju teksta.
Background kategorija
•
1
Background Color – Definiše boju pozadine.
Uz izuzetak tekstova u odreñenim delovima formi i sl.
Copyright © Link group
•
•
•
•
Background Image – Postavlja sliku za pozadinu elementa. Ukoliko slika ne
pokriva ceo element, biće vidljiva boja pozadine (iz prethodne stavke) ukoliko je
definisana.
Background Repeat – Definiše da li se i kako ponavlja pozadinska slika.
o No Repeat – ne ponavlja sliku
o Repeat – ponavlja sliku po x i y osama, i horizontalno i vertikalno.
o Repeat-x – ponavlja sliku po x osi.
o Repeat-y – ponavlja sliku po y osi.
Background Attachment – Fiksira poziciju pozadinske slike (Fixed) ili ostavlja da
se skroluje, pomera sa stranom. Scroll je default.
Background Position (X) i Background Position (Y) – definiše poziciju
pozadinske slike u odnosu na element. Ukoliko nije definisano, default vrednost je
gore-levo, odnosno za x je left, za y je top. Možemo uneti i brojčanu vrednost, ali
onda je potrebno da iz padajućeg menija izaberemo tip jedinice.
Block kategorija
•
•
•
•
•
•
•
Word Spacing – Definiše razmak izmeñu reči. Unosimo vrednost i biramo tip
jedinice, kao kod nekih opcija koje smo ranije pomenuli. Možemo uneti i negativnu
vrednost, ali opet prikaz zavisi od browsera.
Letter Spacing – Definiše razmak izmeñu slova (karaktera).
Vertical Align – definiše vertikalnu poziciju teksta. O tom pozicioniranju smo pričali.
Text Align – Definiše horizontalnu poziciju teksta i drugih inline elemenata. Može
biti:
o Left – poravnava tekst po levoj ivici. Default vrednost.
o Right – poravnava po desnoj ivici.
o Center – centrira tekst
o Justify – poravnava tekst i po levoj i desnoj ivici, na uštrb promene razmaka
meñu rečima.
Text Indent – definiše uvlačenje reda teksta. Može biti negativno, ali prikaz zavisi
od browsera.
Whitespace – definiše ponašanje preloma redova (br), razmaka, tabova i sličnih
karaktera:
o Normal – Više uzastopnih razmaka kolapsiraju u jedan. Redovi se prelamaju
po potrebi.
o Pre – Sav ispis ostaje u originalu. Redovi se ne prelamaju, osim na početku
novog reda.
o Nowrap – Slično kao normal, ali se redovi ne prelamaju sami.
o Uz ove pomenute, koje DW nudi u opcijama, postoje i pre-line i pre-wrap koje
se manje koriste.
Display – Definiše manifestaciju objekta, odnosno njegovo ponašanje na strani.
o Block – Generiše block elemenat
o Inline – Generiše inline elemenat
o Inline-block – Generiše block elemenat koji se ponaša kao inline
o Inline-table – Generiše table elemenat koji se ponaša kao inline
o List-item – Generiše osnovni block elemenat i stavku liste
o Run-in – Generiše block ili inline zavisno od konteksta
o Table – Generiše table elemenat. Sve ostale opcije koje sadrže table prefiks,
generišu neki od tabelarnih delova.
o None – Uklanja elemenat iz prikaza strane, ali ostaje u kodu. Svi elementi
sadržani u okviru njega takoñe neće biti vidljivi, čak iako imaju drugo display
podešavanje.
Copyright © Link group
Block kategorija
•
•
•
•
•
Width i Height – Odreñuje širinu i visinu elementa. Zahteva izbor jedinice, osim
ukoliko je reč o auto (što je i default vrednost).
Float – Definiše float elementa, kao što smo pomenuli u varijantama pozicioniranja
kada je bilo više reči o njemu. Može biti left, right i none (default).
Clear – Definiše clear vrednost. Ukoliko je uneta vrednost, pomeriće se ispod svih
AP elemenata (absolutno pozicioniranih) sa te strane. Može biti left, right, both ili
none (default).
Padding – Definiše padding prostor, tj. unutrašnji razmak elementa od sadržaja do
ivice.
Margin - Definiše margin prostor, tj. spoljni razmak elementa. Može kolapsirati sa
drugom marginom iznad/ispod.
Padding i margin opcije sadrže po četiri polja za četiri strane (gore, desno, dole, levo) i izbor
tipa jednice za svako. Ukoliko želimo istu vrednost za sve padding strane, odnosno margin,
možemo označiti Same For All opciju koja duplira jednu unetu vrednost paddinga, odnosno
margine.
Border kategorija
•
Style – Tip okvira, ivice. Može biti: none, dotted, dashed, solid, double, groove,
ridge, inset, outset. Sve varijante su prikazane na slici radi lakšeg predstavljanja.
Tipovi okvira, ivice – Style podešavanje bordera
•
Width – Definiše jačinu, debljinu linije okvira. Možemo uneti brojčanu vrednost ili
izabrati izmeñu thin, medium ili thick. Brojčana vrednost ima tačno odreñenu
Copyright © Link group
vrednost (npr 1px – 1 piksel) dok opisne vrednosti zavise od browsera. IE do verzije
7 je primenjivao 2px, 4px, i 6px za thin, medium ili thick redom, dok svi moderni
browseri koriste 1px, 3px i 5px.
•
Color – Definiše boju okvira.
Kao i kod margin/padding opcija, ove tri opcije sadrže po četiri polja za unos vrednosti, a,
ukoliko želimo, možemo označiti Same For All, kako bi sve četiri strane imale iste vrednosti
za odreñeno svojstvo.
List kategorija
•
List-style-type – Definiše tip liste, odnosno njenih buleta. Može biti disc (default),
circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha ili
none.
Tipovi buleta (prikaz zavisi od browsera)
•
•
List-style-image – Definiše sliku kao bullet.
List-style-Position – Definiše poziciju buleta u odnosu na tekst. Može biti unutar
elementa ili spolja (default).
Positioning kategorija
•
•
Position – Definiše poziciju elementa, o čemu je bilo reči ranije. Može biti Absolute,
Relative, Fixed i Static.
Visibility – Definiše vidljivost elementa. Može biti:
o Inherit – Nasleñuje osoobinu od okružujućeg, parent elementa. IE do verzije
7 ne podržava ovu opciju.
o Visible – Postavlja elementu vidljivo stanje.
o Hidden – Postavlja elementu nevidljivo stanje, ali ga ne ukljanja iz toka.
Postoji i opcija Collapse, koja nije ponuñena, i koristi se za neke elemente, poput
ćelija tabela koje se spajaju, kolapsiraju ukoliko nemaju sadržaja. Ovu opciju ne
podržavaju svi browseri.
Copyright © Link group
•
•
•
•
Z-index – Definiše slaganje više elemenata na istom mestu, odnosno njihovu
vidljivost. Funkcioniše samo za absolute, fixed i relative elemente. Element sa većom
vrednošću će biti vidljiv i iznad elementa sa manjom vrednošću na istoj x,y poziciji.
Može biti negativno.
Overflow – Definiše ponašanje elementa ukolikoje njegov sadržaj veći od njegovih
dimenzija. Na primer, ukoliko je slika 200x200px postavljena u div tagu dimenzija
100x100px. Vrednosti mogu biti:
o Visible – proširuje element kako bi sav sadržaj bio prikazan.
o Hidden – Zadržava dimenzije elementa i odseca višak.
o Scroll – Dodaje scroll kontrole elementu, bez obzira na to da li su potrebne ili
ne.
o Auto – Dodaje scroll kontrole po potrebi.
Placement – Definiše poziciju elementa. Postoje četiri polja za četiri strane.
Potrebno je izabrati i tip jedinice.
Clip – Definiše prikaz samo odreñenog dela elementa. Može biti korisno u
kombinaciji sa JavaScriptom za kreiranje odreñenih efekata.
Width i Height vrednosti su iste kao u Box kategoriji.
Copyright © Link group
11. Rad sa CSS-om
Properties Inspector
Properties Inspector smo pominjali ranije, ali sada ćemo razmotriti njegove opcije vezane za
CSS umesto HTML. Pomoću njega možemo lakše menjati CSS, bez potrebe da koristimo
uvek CSS Styles panel.
Veoma je važno da budemo svesni šta ćemo tačno promeniti u kodu promenom neke
od ovih opcija. Kod HTML formatiranja sve izmene se vrše direktno, dok kod CSS-a se mogu
desiti u različitim klasama na različitim mestima. Na primer, bold formatiranje može doći iz
jednog opisa, izbor fonta iz drugog i tako dalje.
Properties Inspector u CSS modu
A - U ovom delu panela možemo izabrati da li želimo opcije vezane za HTML ili za CSS.
HTML delom smo se već pozabavili i sada ćemo ostaviti ili izabrati CSS.
B - Polje koje označava trenutno izabran opis. DW automatski bira onaj koji je najbliži
izabranom elementu na strani. Iz padajućeg menija možemo izabrati jedan od primenjenih
opisa (Cascade grupa), kreirati novi opis ili inline CSS (New Rule grupa) ili dodeliti neku
od dostupnih klasa u dokumentu, kao i ukloniti klasu (Apply Class grupa)
Copyright © Link group
Targeted Rule u okviru Properties inspectora
C - Putem Edit Rule tastera otvaramo dijalog za izmenu trenutnog opisa, a pomoću CSS
Panel opcije možemo pozvati CSS Styles panel ukoliko nije aktivan.
D - Opcije za formatiranje su na prvi pogled iste kao kod HTML formatiranja, ali utiču na
promenu CSS parametara.
E - Putem ovog tastera možemo pristupiti podešavanjima strane. Ova funkcionalnost je ista
kao kod HTML moda.
F - Prečice koje nude pozivanje Help dijaloga, kao i Quick tag Editora.
Code Navigator
Jedna od veoma korisnih opcija je i Code Navigator. Kada postavimo kursor u dizajn prikazu
i sačekamo nekoliko sekundi, pojaviće se mala ikonica sa prikazom kormila, kao na slici.
Prikaz Code Navigator ikonice
Klikom na pomenutu ikonicu otvara se Code Navigator dijalog. U dijalogu se prikazuju
selektori svih opisa na trenutnom elementu. Najniže naveden je najbliži. Prelaskom mišem
preko nekog od njih, pojavljuje se tooltip sa primenjenim svojstvima. Klikom na neki od
selektora nas vodi na mesto u Code prikazu gde se nalazi taj CSS, a u CSS styles panelu se
fokusira takoñe na izabrani CSS.
Copyright © Link group
Ukoliko ne želimo da se stalno pojavljuje ikonica Code Navigatora dok radimo, možemo je
isključiti tako što ćemo izabrati i potvrditi Disable opciju u donjem desnom uglu dijaloga.
Neće se više sama pojavljivati, a možemo pozvati Code Navigator tastaturnom prečicom Alt
+ klik na element, odnosno Cmd + Opt + Klik na element za Mac.
CSS Disable/Enable
CS5 verziji dodate su nove opcije za Disable/Enable
ugasiti/uključiti odreñeno CSS svojstvo u okviru opisa.
kojim
CSS styles sa isključenim (disable) svojstvom
Copyright © Link group
možemo
privremeno
Na slici vidimo da je u okviru trenutno izabranog p opisa isključeno svojstvo za font-size.
Bilo koje svojstvo možemo isključiti klikom na prostor levo od samog svojstva i potom se na
tom mestu pojavljuje crvena ikonica, klikom na koju uključujemo nazad svojstvo. Svojstvo
možemo isključiti i pomoću druge ikonice sa desne strane, u donjem desnom uglu panela.
Ono što se dešava "ispod haube", odnosno u CSS kodu, jeste to da DW postavlja specifičan
komentar oko izabranog svojstva.
Isključeno (disable) CSS svojstvo u kodu
Komentari se, kao što Vam je možda poznato iz raznih drugih programskih jezika, mogu
koristiti da unesemo bilo kakav tekst unutar koda, a koji se neće koristiti u renderu, prikazu
strane. Drugim rečima, browseri taj deo preskaču kao da ne postoji.
DW prilikom Disable opcija postavlja specifičan komentar sa ključnom reči disable.
Preporučujem da ove komentare koje DW sam kreira ne menjate jer, ukoliko promenite
makar jedan karakter, to svojstvo se više neće pojavljivati u panelu CSS Styles (čak ni kao
isključeno), a mogu se poremetiti i ostala svojstva i opisi.
Sa druge strane, možemo sami postavljati komentare izmeñu /* i */ . Sve što je izmeñu će
biti izuzeto iz prikaza, odnosno pod komentarom. Kao i sve karaktere, komentar koji
počnemo moramo završiti.
Dodavanje eksternog CSS fajla
U CSS Styles panelu, putem Attach Style Sheet možemo povezati eksterni CSS. Ova opcija
otvara Attach External Style Sheet dijalog za izbor CSS fajla koji želimo da linkujemo ili
importujemo u tekući dokument.
Copyright © Link group
Dodavanje eksternog CSS fajla
Media označava sredinu na koju će se primeniti izabrani CSS. Media polje možemo ostaviti
prazno, jer će onda web čitači primeniti CSS fajl na sve sredine (medijume). Ukoliko
izaberemo jedan ili više medijuma, na ostalima izabrani CSS neće biti primenjen. Takoñe,
možemo kreirati poseban fajl za različite svrhe, na primer za mobilne ureñaje ili za print.
Ako napravimo CSS fajl za print, izabraćemo opciju print iz padajućeg menija. Ovo je
korisno ako, na primer, pomoću em vrednosti definišemo veličinu h1, ali želimo da u štampi
taj h1 bude tačno odreñen pomoću pt ili drugih tipografskih vrednosti. Opcije koje ćemo
najčešće koristiti su screen (za ekrane monitora/ureñaja) i print (za štampu).
Postoje dve mogućnosti kod dodavanja CSS fajla. Link opcija, povezuje, linkuje CSS fajl sa
html dokumentom. Import opcija je namenjena kako bi jedan CSS fajl importovali, uvezli u
drugi CSS fajl. Tako možemo povezati na HTML strani samo jedan CSS fajl, a onda u njega
importovati još nekoliko. Sada, sa modernim browserima, i import se može koristiti za html,
tako da i jedan i drugi način nemaju nekih preteranih razlika, osim drugačije sintakse.
Prebacivanje (eksportovanje) internog u eksterni CSS
Pri kreiranju možemo izabrati da CSS opise smeštamo u HTML fajl direktno u okviru HEAD
dela strane, gde bi izgledao ovako:
<style type="text/css">
#container {
margin:0 auto;
width:900px; }
#header {
position:relative;
float:left;
width:900px;
height:405px;
background:url(../images/headerBack.gif) no-repeat top left; }
</style>
Copyright © Link group
Kako smo ranije pomenuli, ovo je interni CSS i sasvim korektan način kreiranja opisa. Ipak,
te stilove ne možemo primeniti na bilo koji drugi HTML, već samo na taj u kome se nalaze.
Možda ćemo želeti da isti CSS primenimo na nekoliko ili sve strane sajta i zato postoji
mogućnost eksportovanja iz internog u eksterni CSS.
Interni opisi se u CSS Styles panelu nalaze u grupi označenoj sa <style>, dok su eksterni
razvrstani po CSS fajlovima.
Uradićemo sledeće: označićemo u CSS Styles panelu jedan ili više opisa, uraditi desni klik
mišem i izabrati Move CSS Rules… opciju. Označavanje više opisa možemo uraditi tako što
ćemo držati pritisnut taster Ctrl na tastaturi i levim klikom miša izabrati željene, ili, ako su
redom opisi koje želimo da izaberemo, označiti prvi, pritisnuti i držati Shift i označiti
poslednji koji želimo.
Prebacivanje internog CSS opisa u eksterni
Pošto smo izabrali Move CSS Rules opciju, otvoriće se drugi dijalog Move To External
Style Sheet u kome možemo izabrati gde prebacujemo opise. Možemo prebaciti u postojeći
CSS fajl (ako je dostupan) izborom opcije Style Sheet ili kreirati novi CSS fajl izborom A
new style sheet… opcije.
Copyright © Link group
Izbor eksternog CSS fajla prilikom eksporta internog CSS-a
Ukoliko smo izabrali novi CSS fajl, otvoriće se sledeći dijalog u kome biramo gde želimo da
kreiramo CSS fajl. Isti dijalog se otvara i ako pri kreiranju CSS opisa (rule) izaberemo novi
CSS fajl.
Kreiranje novog eksternog CSS fajla
Drugi način da uradimo ovo je da jednostavno uhvatimo opis koji želimo i prevučemo ga na
željeno mesto. Ukoliko ga prevučemo na eksterni CSS, Dreamweaver će ga tu prebaciti.
Takoñe, ovako možemo razvrstati redosled opisa u okviru jednog CSS fajla.
Copyright © Link group
Premeštanje CSS opisa prevlačenjem
Inline CSS se ne može eksportovati u eksterni CSS jer je on ugnježden na samim HTML
tagovima.
Copyright © Link group
12. Slike
Tipovi slika na internetu
Pre nego što počnemo da koristimo slike na stranicama, moramo razjasniti vrste slika i
najbolje primene. Postoje tri tipa slika na netu: JPG, GIF i PNG.
JPG format (Joint Photographic Experts Group) koristi .jpg ili .jpeg ekstenziju. Ovaj format
ne podržava providnost (engl. Transparency) niti animaciju, ali je odličan za komprimovanje
fotografija jer podržava milione boja. U programima za obradu slika možemo izabrati koliku
degradaciju kvaliteta ćemo tolerisati u zamenu za manju veličinu fajla. Svaki put prilikom
snimanja se gube odreñene informacije, te je strogo preporučeno da čuvamo originale
posebno.
GIF (Graphic Interchange Format) je ograničen na 256 boja. GIF-ovi su odlični za tehničke
crteže i za male slike (ikonice, thumb sličice i sl.). GIF-ovi mogu da pamte 2,4,16... boja, pa
se može dosta uštedeti na veličini prilikom kreiranja fajlova. GIF fajlovi se kompresuju
horizontalno, tj. ukoliko na GIF slici piksel ima malu varijaciju boja u horizontalnom pravcu,
mnogo lakše se transformiše u manju veličinu. GIF format podržava providnost (uz dosta
ograničenja) i animaciju, što znači da možemo kreirati efekat kretanja i sl. U početnim
fazama razvoja interneta, gif animacije su stalno korišćene, čak i kada nisu bile potrebne.
Danas se sve manje koriste.
PNG (Portable Network Graphic) je noviji format podržan od strane svih aktuelnih web
čitača, a kombinuje funkcionalnosti gif-a i jpeg-a. Ovaj resterski format za slike koristi
kompresiju bez gubitka. Koristi RGB i sistem boja u sivim tonovima.
Postoje dva tipa formata:
•
•
PNG-8, sadrži 8-bitnu informaciju o bojama (slično GIF-u).
PNG-24, sadrži 24-bitnu informaciju o bojama (kombinuje najbolje od GIF i JPG).
PNG-8 ne podržava animaciju, ali podržava transparentnost i to mnogo bolje nego GIF, dok
PNG-24 podržava još bolju transparentnost i kvalitet slike bolji nego JPG. Ipak, PNG fajlovi
su dosta veći, a i raniji browseri se ne snalaze najbolje sa njim (npr. IE6 ne podržava
transparentni PNG).
Kada bismo rezimirali sva tri tipa, možemo doći do ovog zaključka:
•
•
•
JPG - najbolji za fotografije i slike sa puno detalja.
GIF - najbolji za ikonice i male sličice.
PNG - kombinuje najbolje od GIF i PNG, ali na uštrb veličine fajlova. Nije podržan od
ranijih browsera, mada to polako postaje nebitno, jer se IE6 sve manje koristi.
Copyright © Link group
Assets panel
Ovaj panel nam omogućava lak način manipulisanja i pregleda svih materijala (Asseta) koje
koristimo u našem sajtu. Uslov da se neki fajl pojavi u ovom panelu jeste taj da prethodno
taj fajl iskopiramo u Root folder. Na primer, ukoliko neku sliku iskopiramo u Images folder u
okviru sajta, automatski će se pojaviti u Assets panelu.
Assets panel sortira elemente sajta u devet kategorija kojima se pristupa klikom na jednu
od vertikalno poreñanih ikonica na levoj strani panela:
•
•
•
•
•
•
Images - U ovoj kategoriji se nalaze svi jpg, png i gif fajlovi i prikazane su njihove
dimenzije, veličina i putanja do njihovog mesta na računaru.
Colors - Ova kategorija prikazuje sve boje koje su specificirane na sajtu, uključujući
i pozadinske boje, boju teksta i linkova.
Links - Ovde su prikazani svi linkovi, ne samo eksterni apsolutni http://, nego i
email linkovi, FTP adrese i JavaScript linkovi.
SWF, Shockwave i Movies - Svaka kategorija prikazuje movie fajl sa
odgovarajućom ekstenzijom .swf (Flash), .dcr (Shockwave) i .mpg ili .mov (Quick
Time i MPEG), poput kategorije slika.
Scripts - Ova kategorija prikazuje JavaScript fajlove, i to eksterne skript fajlove ka
kojima web stranica ima linkove (na primer, JavaScript fajlovi koji su deo Spry
Frameworka, koji su prikačeni za stranicu kada koristite Spry Widgete ili efekte). U
ovoj kategoriji nisu prikazani JavaScript fajlovi koji su ugnježdeni u web stranicu (na
primer, kada koristimo Dreamweaver Behaviors).
Templates i Library - Poslednjim dvema kategorijama ćemo se pozabaviti nešto
kasnije tokom kursa.
Copyright © Link group
Assets panel
Kao što je već rečeno, u Assets panelu možemo videti sve slike koje su u okviru sajta.
Važno je pomenuti da se tu prikazuju sve slike, pa i one koje nisu u okviru Images foldera.
Zbog prikaza svih fajlova, iz svih foldera u jednoj jedinoj listi, može se desiti da nastane
"gužva".
Ukolliko jednim klikom levim tasterom miša izaberemo neku od slika, njen umanjeni
prikaz (engl. Preview) će se pojaviti u gornjem delu panela. Ova opcija je vrlo zgodna radi
lakog i brzog pronalaženja slika.
Iz samog dijaloga možemo pozvati Default editor i izmenu neke od slika tako što ćemo
uraditi dvoklik nad slikom. Verovatno će Vam se i desiti da slučajno pozovete Fireworks ili
Photoshop u početku, jer ćete uraditi dvoklik umesto jednog. Osim dvoklika, možemo
koristiti dugme Edit u donjem desnom uglu panela.
U svakom trenutku možemo sortirati prikaz po kolonama kao što bismo to uradili u
folderima operativnog sistema.
Favorites u Assets panelu
Jedna od zgodnih opcija kojima raspolaže DW jeste mogućnost da neke slike izdvojimo u
omiljene (engl. Favorites). Primetićemo da se u gornjem delu panela, na sredini, nalaze dva
radio dugmeta: Site i Favorites.
Copyright © Link group
Site opcija, koja je i izabrana u startu, prikazuje sve fajlove u okviru sajta. Opcija Favorites
prikazuje samo one koji su označeni kao omiljeni. Naravno, Favorites lista je u startu
prazna.
Prikaz svih ili omiljenih Asseta
Bilo koji od fajlova može se označiti kao Favorite tako što ćemo uraditi desni klik nad
željenom slikom i u meniju izabrati Add to Favorites ili označiti sliku levim klikom, a potom
izabrati dugme Add to Favorites iz donjeg desnog ugla panela (ikonica je predstavljena kao
znak + i traka). Takoñe, u Files panelu, može se označiti jedna ili više slika i uz izbor Add
to Image Favorites opcije iz desnog klik menija, dodati slika u omiljene.
U svakom slučaju, pojaviće nam se dijalog koji nas obaveštava da je fajl dodat u omiljene.
Na istom dijalogu postoji sheck box kojim možemo isključiti njegovo buduće pojavljivanje,
ali budite oprezni jer se može desiti da više puta dodamo isti fajl u omiljene, jer ćemo
isključiti povratnu informaciju.
Dijalog dodavanja u omiljene
Važno je zapamtiti da DW ne kopira niti radi bilo šta drugo nad samim slikama, tj. fajlovima.
On samo filtrira prikaz i izdvaja označene omiljene fajlove. U tom prikazu možemo promeniti
nadimak slike (Nickname). Opet, samo ime fajla neće se promeniti.
Klikom na ikonicu u donjem desnom uglu New Favorites Folder ili izborom istoimene
prečice iz menija koji se pojavljuje desnim klikom, možemo kreirati nove foldere u okviru
omiljenih. Potom prevlačenjem fajlova, možemo ih razvrstavati u foldere, što olakšava
organizaciju.
Copyright © Link group
Prikaz omiljenih Asseta
Svim ovim pomenutim opcijama lako se mogu organizovati materijali u okviru sajta.
Dodavanje iz Asset panela
Bez obzira na to da li je aktivan prikaz svih fajlova ili samo omiljenih, možemo lako dodati
sliku na stranicu. Jedan način je da postavimo kursor na stranici gde želimo sliku, a potom
selektujemo željenu u Asset panelu i izaberemo Insert dugme u donjem levom uglu. Drugi
način je da prevučemo sliku držeći levi taster miša iz Asset panela direktno na stranicu.
Nakon toga, bez obzira na to kako smo dodali, DW će prikazati dijalog koji će nam tražiti
neke od informacija u vezi sa slikom.
Image Accessibility podešavanja
Copyright © Link group
U tom dijalogu se pojavljuju dva polja. Prvo polje, Alternate text, je bitnije jer u njemu
unosimo alt tekst slike (alternativni tekst). On ima više upotreba, ali osnovno je da ponudi
alternativu ukoliko se slika iz bilo kog razloga ne učita. U tom slučaju, prikazaće se
pomenuti tekst u okviru predviñenim za sliku. Ipak, ne bi trebalo bukvalno opisivati sliku,
već pružiti info o njenoj svrsi. Na primer, alt tekst slike upozorenja ne bi trebalo da bude
"Žuti trougao sa crnim okvirom i znakom uzvika", već "Upozorenje!" i slično. Alt tekst
koriste i pretraživači poput Googla, radi indeksiranja. Po standardima W3C, alt tekst je
obavezan na slici, ali i pored toga, dobra je praksa uvek upisivati smislen alt tekst. Alt
tekst možemo dodati i kasnije u properties opcijama, ali preporuka je da se to čini u startu.
Drugo polje na dijalogu je Long description. Ono se reñe koristi i nije obavezno. U njemu
možemo dati link ka detaljnijem objašnjenju slike, pogotovo ako se radi o grafikonima i
tabelama ili o drugim komplikovanijim elementima.
Važno je da zapamtite da, ukoliko u ovom dijalogu izaberemo Cancel, nećemo otkazati
postavljanje slike, već ćemo samo otkazati unos ovih vrednosti. Slika će ipak biti
postavljena na stranicu, ali bez alt teksta.
Ostali načini dodavanja slika
Malopre pomenuti Asset panel nije jedini način za unos slika na stranicu.
Možemo jednostavno prevući sliku iz Files panela na stranicu, kao što smo to učinili iz
Assets panela. Odnosno, možemo izabrati iz padajućeg menija Insert > Image ili iz Insert
panela opciju Image (Common grupa).
Insert image iz padajućeg menija i Insert panela
Pošto izaberemo jednu od ove dve varijante, pojaviće nam se sledeći dijalog:
Copyright © Link group
Izbor slike
U ovom dijalogu, koji je prilično sličan standardnom win dijalogu za izbor fajlova, možemo
izbarati željenu sliku. Dok se u Assets panelu pojavljuju samo materijali koji su u okviru
Root foldera, dotle se u ovom dijalogu može izabrati bilo koji dostupan fajl, bez obzira na to
gde se nalazi. Ali baš oko tih detalja moramo biti veoma oprezni.
Podsetićemo se, sam HTML ne sadrži i ne uključuje druge materijale, poput slika. To znači
da kada otvorimo HTML stranu koja prikazuje i slike, same slike nisu u .html fajlu, već ih on
učitava iz posebnog jpg fajla ili fajlova (png, gif..). Analogno tome, ako je neka stranica
kreirana za galeriju i sadrži deset slika, svih deset slika (fajlova) moraju biti u okviru sajta ili
na dostupnoj putanji.
Da pojasnimo na primeru – ako napravimo novi sajt u lokalu na putanji: D:/sites/DWsite i u
Root folderu stranu index.html i ukoliko postavimo nekoliko slika, a sami fajlovi se nalaze u
podfolderu images (D:/sites/DWsite/images), to bi značilo da su putanje do slika tipa:
images/slika1.jpg. Kada bi takav Root postavili na server, slike bi se normalno prikazivale
jer su na istoj putanji u odnosu na HTML.
Sa druge strane, u istoj situaciji, ukoliko smo slike ostavili u MyDocuments ili nekom
drugom
folderu
i
pri
tom
ih
linkovali
preko
putanja,
npr.
C:/users/admin/Documents/MojSajt/images/slika1.jpg, sajt će raditi normalno na lokalu
(Vašem računaru), ali pošto postavimo Root folder na net – neće. HTML će i dalje na istoj
Copyright © Link group
putanji tražiti slike, a sa sigurnošću se može tvrditi da je na njoj neće naći jer na serveru ne
postoji C, niti mydocuments.
Da rezimiramo: svi fajlovi koji se koriste na sajtu moraju biti u okviru Root foldera, a koji
ceo kopiramo na server prilikom postavljanja.
Podešavanje eksternih editora
Kako je pomenuto ranije, može se direktno pozvati Photoshop, Fireworks ili neki treći
program za izmenu slika, direktno iz Dreamweavera. Postoji više načina, ali je najlakši
dvoklikom na samu sliku u Files, odnosno Assets panelu.
Podešavanje koji program otvara koji format možemo izvršiti u Preferences dijalogu, u
kategoriji FileTypes/Editors. U levoj listi se nalaze ekstenzije fajlova, a u desnoj dodeljene
eksterne aplikacije. U startu su za slike podešeni Photoshop i Fireworks, pod uslovom da su
instalirani na računaru. Možemo selektovati aplikaciju iz liste i izabrati opciju Make
Primary. Tako podešavamo da se ta aplikacija otvara posle dvoklika za tu ekstenziju.
Takoñe, ukoliko aplikacija nije na listi (npr. Gimp), možemo je dodati preko + ikonice i
ukazivanjem na njen .exe fajl.
Podešavanje default editora
Copyright © Link group
Integracija sa Photoshopom
DW može učitati i koristiti psd fajlove koje smo kreirali u Photoshopu. U tom slučaju DW
učitava psd, a kreira jpg (ili drugi kompatibilan format). Tako dobijamo dva fajla koja su
povezana. Ukoliko kasnije promenimo radni, psd fajl može se odmah izmeniti i jpg fajl koji
prikazujemo na stranici, odnosno svuda na sajtu.
Ovakve fajlove uvozimo kao i ranije pomenute slike, pomoću Insert > Image iz padajućeg
menija ili iz Insert panela. Ipak, ukoliko izaberemo psd fajl umesto obične jpg/gif/png slike,
što smo ranije činili, pojaviće se dijalog poput ovog koji vidimo na sledećoj slici:
Podešavanje psd slike prilikom importa
U ovom dijalogu možemo podesiti u kom formatu ćemo čuvati sliku, koji kvalitet želimo itd.
Podešavanja su veoma slična Save for Web & Devices koji nalazimo u Photoshopu. U
desnom delu, iznad prikaza same slike, vidimo kolika će biti veličina fajla. Ispod prikaza se
nalaze opcije za Zoom i razne promene prikaza. Na drugom, File tabu ovog dijaloga
možemo skalirati i iseći deo slike ukoliko želimo.
Copyright © Link group
Pošto potvrdimo, DW će upitati gde da sačuva novu sliku. Svakako ćemo izabrati poziciju
unutar Root foldera, preporučeno unutar Images podfoldera. Slika će dobiti malu ikonicu u
levom gornjem uglu, a na Properties panelu dok je selektovana slika na strani videćemo
putanju do slike (Src polje) ali i putanju do originalnog, radnog psd fajla (Original polje) jer
su ta dva fajla sada povezana.
Properties za unetu psd sliku
Ukoliko pomerimo psd fajl, promenimo mu ime ili na bilo koji drugi način narušimo
sinhronizaciju sa njim, ikonica će dobiti znak upozorenja.
U Properties panelu postoji dugme Edit (sa ikonicom Photoshopa) kojim možemo izmeniti
sliku u Photoshopu. Ukoliko u bilo kom trenutku izmenimo originalni psd fajl, ikonica na slici
sa dve zelene strelice će se promeniti u ikonicu sa jednom zelenom i jednom crvenom, što
označava da je potreban update. Tada možemo izabrati Update from Original bilo iz
Properties panela ili iz menija koji pozivamo desnim klikom na sliku. Update se potom vrši
na svim instancama te slike svuda na sajtu.
Ove ikonice se ne vide na prikazu stranice u browseru.
Info u levom gornjem uglu slike
Kopiranje direktno iz Photoshop dokumenta
Umesto da importujemo kompletan psd fajl, možemo kopirati ceo ili deo dokumenta iz
Photoshopa i u Dreamweaveru nalepiti direktno na stranicu (Edit > Paste ili Ctrl+V). U tom
slučaju, sva podešavanja će biti ista kao da smo uvezli fajl, ali sa jednom bitnom razlikom.
Sama slika neće biti sinhronizovana sa originalnim psd fajlom. Neće se pojaviti ikonica na
slici i DW nas neće upozoriti da li se originalna promenila i sl. Ipak, u Properties panelu će
postojati informacija o lokaciji originala. Ukoliko želimo da zamenimo sliku na strani, u ovom
slučaju možemo kopirati ponovo iz Photoshopa i uraditi Paste dok je slika na strani
selektovana. Samo će doći do zamene.
Copyright © Link group
Umetanje Placeholdera
Ponekad, dok kreiramo raspored stranice, nemamo na raspolaganju sve slike. U tom slučaju
koristi se Image Placeholder. Kada kliknemo na Insert > Image Objects > Image
Placeholder, otvoriće se sledeći dijalog:
Image Placeholder dijalog
•
•
•
•
•
Name - Ovde se upisuje ime Placeholdera. Ime koje upišemo ovde koristi se i za ID
i za Name attribute <img> taga, pa ime mora početi slovom i ne sme sadržati
razmake ili neki specijalni karakter. Ako ostavimo ovo polje prazno, Dreamweaver
neće ubaciti ID atribut, a za Name atribut će upisati name="".
Width - Ovde unosimo širinu Placeholdera u pikselima. Default širina je 32px.
Height - Ovde unosimo visinu Placeholdera u pikselima. Default visina je 32px.
Color - Ova opcija unosi Inline CSS atribut za pozadinsku boju (Background-color).
Namena ove opcije je da se istakne Placeholder ili da se utopi sa ostatkom sadržaja
stranice. Možemo iskoristiti Color Picker za odabir boje ili jednostavno ukucati
heksadecimalnu vrednost. Ako ne izaberemo boju, Dreamweaver neće kreirati Style
Attribute, ali će u Design prikazu prikazati Placeholder u svetlosivoj boji.
Alternate text - Ovde unosimo tekst koji će ići u Alt atribut. Ako ne unesemo
vrednost, Dreamweaver će prikazati alt="" u <img> tagu.
Copyright © Link group
Image Placeholder u dizajn prikazu
Kada završimo i želimo da unesemo pravu sliku, možemo ili kreirati novi Image ili zameniti
Placeholder već postojećom slikom dva načina, putem Properties Inspectora:
•
•
Kreiranje nove slike - Da bismo kreirali novu sliku, izabraćemo Create opciju. Ona
pokreće samo Adobe Fireworks, ako je instaliran na računaru. Photoshop neće
pokrenuti, iako je možda podešen kao default Image editor.
Zamena placeholdera - Kao i kod običnih slika, možemo ukucati putanju u Src
polje ili povezati sliku prevlačenjem Point to File ikonice… Takoñe možete i da
kliknete na meticu pored src polja i da je povežete sa slikom u Files panelu.
Koji god način da izaberemo, DW će zameniti Placeholder novom slikom i automatski će
preuzeti visinu i širinu novog fajla.
Properties Inspector dok je izabran Image Placeholder
Copyright © Link group
13. Formatiranje slika
Formatiranje slika - HTML
Kod mnogih elemenata prilikom rada u DW-u, možemo doći u nedoumicu da li da
stilizujemo pomoću HTML-a ili putem CSS-a. To se posebno ističe kod rada sa slikama.
HTML podešavanja slike se mogu naći u Properties panelu. Ukoliko Properties nije vidljiv,
uključite ga ponovo. Pomenuli smo ranije da se Properties panel menja u zavisnosti od
konteksta. Da bismo prikazali podešavanja slike potrebno je da označimo, selektujemo sliku
na stranici.
Properties panel za sliku
A - Prikaz (thumbnail), veličina i identifikaciona vrednost (ID) slike. ID je bitan jer
unikatno označava elemenat i koristimo ga za CSS i JavaScript itd.
B - Vrednosti Width i Height, odnosno širina i visina slike. Iako ovde možemo promeniti
vrednosti, to nikako nije preporučljivo. Sliku bi trebalo obraditi, pripremiti dimenzije i tek
onda postaviti na stranicu. Postoji više razloga za to. Iako su drugačije dimenzije u
Properties panelu, slika će sama ostati ista i verovatno će doći do deformacija itd. Ukoliko
dimenzije ne odgovaraju originalnim, biće označene bold fontom i pojaviće se dugme Reset
Size za vraćanje na originalne dimenzije.
C - Ovo polje predstavlja link koji vodi sa slike ka drugoj stranici, adresi, fajlu etc. Možemo
ručno uneti putanju ili koristiti dve ikonice sa desne strane. Klikom na folder ikonicu otvara
se dijalog za izbor fajla u okviru sajta ukoliko želimo da linkujemo ka fajlu. Ukoliko kliknemo
levim tasterom i zadržimo ga pritisnutog nad ikonicom point to file, možemo prevući do fajla
i na taj način linkovati neki od fajlova. U svakom slučaju, pojaviće se putanja u polju levo, a
slika će postati link.
D - Predstavlja putanju do fajla slike (izvora, source). Pošto je slika već uneta, putanja će
biti prikazana. Možemo ručno uneti novu putanju ili koristiti iste ikonice kao kod malopre
Copyright © Link group
pomenutog linka, sa tom razlikom da sada nećemo linkovati ka fajlu, već ćemo na taj način
izabrati fajl slike.
E - Polje za unos Alt teksta
F - Polje za izbor klase. Slično polju za unos ID i koristimo da radi CSS stilizacije.
G - Dodatne ikonice za pomoć i pozivanje tag editora.
H i I - Podešavanja mapiranih linkova slike.
J - Vertikalni i horizontalni prostor oko slike. Ukoliko dodamo vertikalni prostor, isti razmak
će se pojaviti iznad i ispod slike. Analogno tome, ukoliko dodamo horizontalni, isti razmak
će se pojaviti levo i desno. Ove opcije se veoma retko danas koriste i trebalo bi koristiti CSS
umesto toga. Podsetićemo se, ovo su HTML podešavanja, ne CSS koja ćemo u nastavku
obraditi.
K - Prikazuje putanju do originalnog fajla slike, ukoliko je dostupan (npr. PSD).
L - Označava target atribut prilikom postavljanja linka (tada je i jedino dostupan).
M - Vrednost okvira oko slike. Postoji mnogo praktičniji CSS ekvivalent, jer u ovom slučaju
dodeljujemo default okvir koji zavisi od browsera.
N - Ikonice kojima pozivamo editovanje slike. Izmena slike u Photoshopu, izmena
kompresije i ostalih parametara slike i update slike, ukoliko je povezana sa originalnim
fajlom.
O - Dodatne ikonice za isecanje (Crop), smanjivanje na zadatu vrednost (Resample),
osvetljenje i kontrast (Brightness and Contrast), kao i oštrina (Sharpen). Izmene koje se
vrše pomoću ovih kontrola ostaju trajno na slici. Preporučuje se da sve izmene vršimo u
Photoshopu ili sličnom programu, ali mogu biti korisne za neku brzu izmenu ili u nedostatku
odgovarajućeg eksternog softvera.
P - Opcija Align može biti dosta zbunjujuća u početku. Podsetićemo se da se slika po
default podešavanjima ponaša kao jedan karakter teksta. Zbog toga se, iako je verovatno
veća od jednog slova, postavlja pored jednog reda teksta. I u ovom slučaju može se koristiti
CSS. Moguće vrednosti za Align su sledeće:
•
•
•
•
•
•
•
•
•
Default - Osnovno podešavanje. Zavisi od browsera.
Baseline and Bottom - Poravnava osnovnu liniju teksta sa donjom ivicom slike.
Može bitii drugi elemenat umesto teksta.
Top - Poravnava vrh slike sa vrhom najvišeg elementa (slika ili tekst) u tekućem
redu.
Middle - Poravnava sredinu slike sa osnovnom linijom u tekućem redu.
Text Top - Poravnava vrh slike sa vrhom najvišeg dela teksta u tekućem redu.
Absolute Middle - Poravnava sredinu slike sa sredinom slike u tekućem redu.
Absolute Bottom - Poravnava donju ivicu slike sa donjom ivicom tekućeg reda
teksta (uključujući i descendere na slovima).
Left - Postavlja sliku na levu marginu i dopušta da se tekst prelama desno.
Right - Postavlja sliku na desnu marginu i dopušta da se tekst prelama levo.
Copyright © Link group
Dostupne Align vrednosti
Formatiranje slika - CSS
CSS stilizacija slika svakako pruža više mogućnosti u radu i preporučuje se pre nego HTML
stilizacija.
Jedna od najbitnijih, ako ne i najbitnija prednost jeste ta što možemo stilizovati putem CSS
klase i onda tu klasu primeniti na više slika. Kasnije, promenom samo jedne klase,
promenićemo formatiranje svih slika.
Pogledaćemo na primeru. Na sledećoj slici vidimo sliku koja je uneta u okviru paragrafa,
neposredno pre prvog karaktera.
Uneta slika i tekst - default podešavanja
Prema ovim default podešavanjima, slika se nalazi pored jedne linije teksta. Mi želimo da
slika bude levo od teksta koji se automatski prelama, da ima neki okvir i odreñeni razmak
do teksta kako ne bi bio slepljen. Sve to možemo postići putem CSS-a.
Izbaraćemo New CSS Rule (ukoliko već nismo kreirali klasu za sliku), kako je pomenuto u
ranijim jednicama kursa.
Copyright © Link group
Pojaviće se dijalog poput ovog na slici:
Vrednosti koje nudi Dw za novi CSS opis
Dreamweaver je ponudio kreiranje novog CSS opisa i to na osnovu složenog (compound)
selektora. Mi ne želimo takav CSS, već da kreiramo posebnu klasu koju možemo koristiti
više puta po potrebi. Želimo da ime klase bude dovoljan ciljni elemenat. Zato ćemo izabrati
u padajućem meniju za tip selektora klasu (Class), a u polje sa imenom selektora ćemo
upisati željeno ime nove klase koje sami odreñujemo. Na primer photo, jer ćemo tu klasu
primenjivati na fotografije. Primetićemo tačku direktno ispred imena, što označava klasu.
Vrednosti koje nudi Dw za novi CSS opis
Copyright © Link group
Pošto potvrdimo ove vrednosti, pojavljuje nam se dijalog za izmenu CSS formatiranja, koji
smo već pominjali.
Uneli smo neke vrednosti koje se mogu videti na slikama ispod. Postavili smo marginu,
padding, float, kao i border.
Unete CSS vrednosti za novu klasu
Pošto i ovaj dijalog potvrdimo, videćemo da se ništa nije dogodilo. I dalje je slika ostala gde
jeste, a to je zato što klasa nije primenjena na nju. Selektovaćemo sliku i u Properties
Inspectoru postaviti novokreiranu klasu.
Izbor klase u Properties Ins.
Sada ćemo na stranici imati nešto poput prikaza na sledećoj slici:
Copyright © Link group
Slika sa dodatom klasom i CSS formatiranjem
Sada korišćenu klasu u ovom primeru možemo ponovo koristiti na stranici za stilizovanje i
ostalih slika.
Slike u pozadini
Praktično svaki elemenat na strani može imati pozadinu. Sama pozadina može biti boja ili
slika, čak i kombinacija ta dva. Slike u pozadini se razlikuju od normalno unetih slika. U
HTML-u se uopšte ne pojavljuju, već se putem CSS-a vezuju za odreñeni elemenat.
Pogledaćemo na primeru.
Normalno uneta slika putem img taga (levo) i pozadinska slika (desno)
Copyright © Link group
Deo HTML strane prikazuje dve slike. Leva je postavljena putem normalnog img taga, dok je
desna postavljena kao pozadina div-a. Na prvi pogleda nema nikakve razlike. Ipak, u levom
primeru kreirali smo div i u njega uneli sliku. Ceo kod izgleda ovako:
<div>
<img src="images/galerija_spomenik.jpg" width="300" height="200"
alt="Slika" />
</div>
Div nema širinu ni visinu, ali te vrednosti dobija od slike, tj. proširuje se kako bi obuhvatio
sliku.
Sa druge strane, kod pozadinske slike, div se ne prilagoñava slici koja je u pozadini. Njeni
atributi nemaju nikakav uticaj na div. U našem primeru, na desnoj slici, postavljen je sledeći
kod:
<div class="pozadinskaSlika">
</div>
ali moramo dodati i CSS:
.pozadinskaSlika {
background:url(images/galerija_spomenik.jpg) left top no-repeat;
width:300px;
height:200px;
}
Primetićemo da je u HTML kodu div prazan i nema nikakav sadržaj, dok samu sliku
dodajemo kroz CSS (detaljima ćemo se pozabaviti odmah u nastavku). Pored toga, moramo
upisati širinu i visinu, jer će dimenzije, u suprotnom, zavisiti od sadržaja diva.
Slika u pozadini je isečena jer visina/širina diva zavisi samo od sadržaja
(u ovom slučaju od teksta)
Copyright © Link group
Postavljanje CSS pozadinske slike
Kada želimo da postavimo sliku kao pozadinu, kreiraćemo novi ili otvoriti izmenu postojećeg
CSS opisa. U grupi Background možemo izabrati fajl slike i još nekoliko podešavanja.
•
•
•
•
•
Background-color - Dodaje boju pozadine elementu. Ukoliko ne unesemo sliku, ova
boja će biti u pozadini. Takoñe, ukoliko je slika manja od elementa a ne ponavlja se,
ili ukoliko poseduje providne detalje, ova boja će se videti. Zamislite da pozadinu
bojimo ovom bojom, a pozadinsku sliku lepimo preko nje.
Background-image - Putanja do slike. Kao i ranije, fajl bi trebalo da bude unutar
sajta.
Background-repeat - Ovo je korisna opcija koja nam omogućava beskonačno
ponavljanje po x, po y ili po obe ose, kao i bez ponavljanja. Ukoliko ne postavimo
drugačije, default vrednost je ponavljanje i po x i po y. Često se koristi za
postavljanje pattern elemenata za pozadinu.
Background-attachment - Odreñuje da li se slika u pozadini skroluje, pomera
zajedno sa sadržajem ili ostaje fiksirana na originalnoj poziciji. Preporučujem da u
početku ne unosite ovu opciju ili da je postavite na scroll vrednost (što daje isti
rezultat).
Background-position - Odreñuje početnu poziciju pozadinske slike u odnosu na
element. Posebno podešavanje je za x, posebno za y osu. Ukoliko je attachment
postavljen na fixed, odnosi se na dokument, ne na elemenat. Mogu se izabrati razni
tipovi jedinica (default je px), ali i upisati left, center, right, bottom i top umesto
vrednosti.
Copyright © Link group
Podešavanje CSS detalja pozadinske slike
Iznad su prikazana pomenuta podešavanja kroz CSS Styles, dok CSS kod izgleda ovako:
background-color: #FFFFFF;
background-image: url(../images/galerija_spomenik.jpg);
background-repeat: no-repeat;
background-position: 0px 10px;
background-attachment: scroll;
a može se skratiti kao:
background: url(../images/galerija_spomenik.jpg) 0px 10px no-repeat
scroll #FFFFFF;
Copyright © Link group
14. CSS Box model
CSS raspored strane - Box layout
Detalj koji možda najviše problema pravi početnicima i nekima koji su navikli na tabelarni
prikaz je CSS box model i razumevanje istog.
Definicija Box modela bi mogla glasiti ovako: Box Model je programski okvir koji nam CSS
pruža radi formatiranja i/ili redefinisanja bilo kog datog HTML elementa.
Drugim rečima, browser čita sirov HTML kod, interpretira, a zatim prikazuje korisniku. CSS
"uskače" izmeñu HTML-a i browsera, menjajući prikaz. CSS kreira imaginarnu kutiju (engl.
box) oko elementa, oko sadržaja, omogućujući nam da tu kutiju stilizujemo kako želimo, u
svim njenim aspektima. Odatle je nastao izraz CSS Box model.
Ranije, tokom ’90-ih godina prošlog veka i početkom prošle decenije tabele su bile osnovni
alat za bilo kakvo rasporeñivanje elemenata na strani jer nije bilo CSS-a. Pojavom pune
podrške za CSS od 2000. godine stvari počinju da se menjaju i polako dolazimo do pravog
razdvajanja sadržaja i stilizacije. Danas se tabele koriste isključivo za šta su i namenjene,
za tabelarni prikaz podataka. Svi moderni sajtovi koriste div elemente za razdvajanje celina
sadržaja, a onda te elemente ureñujemo, tj. stilizujemo putem CSS-a. Ipak, i danas
možemo videti sajtove na netu koji i dalje koriste prevaziñene tehnike, ali to je neko drugo
pitanje.
Copyright © Link group
Prikazani regioni na jednom od najčešćih rasporeda
Na slici iznad prikazan je jedan čest raspored na modernim sajtovima, odnosno njihovim
stranama. Svaki pravougaonik predstavlja jedan div, jednu celinu.
Uglavnom se postavlja okružujući div koji "nosi" celu stranu (wrapper), a onda se drugim
divovima odvajaju odreñene celine. Sve što se tiče rasporeda, dimenzija, boja i ostalih
vizuelnih detalja, spada u domen CSS-a. Bez stilizacije, ista strana bi bila predstavljena,
rasporeñena kao na sledećoj slici. U tom slučaju browser prikazuje čist sadržaj.
Regioni bez CSS-a
Box model elementi
Svaki elemenat na strani, pa čak i inline elementi spadaju pod box model i zato je veoma
važno pravilno ga razumeti i razjasniti.
Radi lakšeg predstavljanja, u ovoj lekciji svi elementi u dokumentu su dati kao pravougaoni
boks čiji je sadržaj okružen svojstvima: Margin, Padding i Border.
Copyright © Link group
Box Model se sastoji od pet osnovnih svojstava elemenata:
•
•
•
•
•
•
Width (širina)
Height (visina)
Margin (margine, spoljni razmak)
Padding (padding, unutrašnji razmak)
Border (okvir, ivica)
i Background (pozadina - koja tehnički nije deo Box modela, ali se često uključuje)
Margine su uvek transparentne i odvajaju element od drugih elemenata na stranici. Okviri
(Borders) mogu biti različitih stilova i definišu granice elementa. Padding odvaja sadržaj
elementa (Content) od njegovih okvira. Background podešavanja elementa se odnose na
oblast unutar okvira zajedno sa Padding i Content delom (na slici Padding deo je prikazan
u nešto tamnijoj sivoj boji, mada je realno nevidljiv).
Margins, Borders i Padding svojstva za svaku stranu elementa (Top, Right, Bottom, Left)
mogu biti različite vrednosti. Po default vrednostima, ova svojstva su u većini slučajeva 0.
Margine mogu imati i negativnu vrednost.
Važno je zapamtiti da Width i Height vrednosti odreñuju samo širinu, odnosno vidinu
sadržaja (content) elementa. Realna visina i širina koje elemenat zauzima na strani je
Content + Padding + Border.
Na primer, ukoliko je sadržaj 100 x 100 piskela, padding je 10px (sa svih strana), a border
2px (takoñe sa svih strana), mesto koje takav elemenat zauzima je 124 x 124 piksela. To je
zato što je širina ukupno: 100px za sadržaj + 10px za padding x2 zbog levog i desnog
paddinga + 2px za border x2 jer imamo levu i desnu. (100 + 10x2 + 2x2 = 124px). Isto
je i za visinu.
Div elemenat (boks) može sadržati i više drugih elemenata, kreirajući hijerarhiju, što
predstavlja ugnježdene elemente stranice. Prozor čitača u ovoj hijerarhiji predstavlja Root
(koreni) element.
Postoje dva osnovna tipa elementa: Block i Inline, koje smo ranije pomenuli kod osnovnih
tagova. Ipak, tip boksa može biti odreñen korišćenjem svojstva Display kroz CSS. Ako na
primer, svojstvu Display nekog Inline elementa dodelimo vrednost Block, tada će taj
element biti tretiran kao i svaki drugi Blok element.
Boks neće biti vidljiv ako svojstvu Display dodelimo vrednost None. U tom slučaju, browser
će se ponašati kao da element ne postoji, mada će biti u kodu. Takoñe i bilo koji ugnježdeni
elementi unutar tog elementa neće biti prikazani iako im je dodeljena neka druga Display
vrednost.
Na primer, span tag je inline elemenat. Ukoliko dodelimo display:block vrednost, ponašaće
se, praktično, kao div. Ukoliko sa druge strane postavimo display:none, pomenuti span neće
biti vidljiv. Ipak, morate zapamtiti da pomoću ove opcije ne uklanjamo kompletno elemenat
već samo sakrivamo njegov prikaz, ali korisnik može uvek očitati sirov HTML kod koji sadrži
taj deo. Ne bi trebalo sakrivati tako neke osetljive podatke.
Kod pozicioniranja elemenata možemo razlikovati sledeće tipove:
•
static (default)
Copyright © Link group
•
•
•
relative
absolute
fixed.
Static i relative pozicioniranje čine normalni tok dokumenta.
Normalni tok dokumenta (Normal Flow)
Normal Flow je default način rada kod pozicioniranja. U okviru njega se sadrži static1 i
relative pozicioniranje. Primenjuje se na sve elemente koji nemaju specificiranu poziciju
putem Absolute ili Fixed i koji nisu Floated. Blok (block) elementi su pozicionirani jedan
ispod drugog po vertikali, dok su Inline elementi pozicionirani po horizontali, sleva nadesno.
Vertikalne margine kolapsiraju (preklapaju se) u normalnom toku dokumenta. To znači da
se umesto sabiranja vrednosti margina gornjeg i donjeg elementa računa samo margina
koja je veća - kao što je ilustrovano na slici ispod. Horizontalne margine nikad ne
kolapsiraju.
Float (plutajući elementi)
Floating se ostvaruje preko svojstva Float sa vrednostima left (levo) i right (desno). Kada
dodelimo ovu vrednost nekom elementu, on izlazi iz normalnog toka koji smo malopre
pomenuli i ponaša se drugačije. Vertikalno je pozicioniran na isti način (kao kod normal
flow), dok je po horizontali pozicioniran skroz levo ili desno koliko je moguće unutar svog
bloka u kome je sadržan. Okolni Inline sadržaj je tada pozicioniran na suprotnoj strani.
Sledeći kod i slika ilustruju Floated element:
<p>
<span style="float:right; width:30%;">content...</span>
1
Kod nekih autora se ne koristi termin static, već se označava kao normal ili default.
Copyright © Link group
content content content content content content content...
</p>
Za razliku od bokseva u normalnom toku, vertikalne margine floated elemenata nikada ne
kolapsiraju sa marginama elemenata iznad ili ispod. Flaoted boks može da preklopi susedne
elemente koji su u normalnom toku i uopšte da naruši raspored stranice ukoliko nije
adekvatno primenjen.
Sledi primer kôda i slika gde floated element ima mnogo više teksta nego njegov sadržajni
blok.
<p>
<span style="float:right; width:30%;">
content content content content content content content...
</span>
content content content content content content
</p>
<p>
content content content content content content
content content content content content content
</p>
Copyright © Link group
U ovom slučaju možemo primetiti da se floated element preklapa preko svog parent
elementa, ali i elementa koji dolazi posle njega. Ovo se može izbeći dodavanjem svojstva
clear.
Postavićemo clear:right drugom elementu. Ovo pravilo će ga pomeriti nadole, odmah ispod
floated elementa. Time smo postavili da on otpočne tek pošto se završi float.
<p>
<span style="float:right; width:30%;">
content content content content content content content...
</span>
content content content content content content
</p>
<p style="clear:right;">
content content content content content content
content content content content content content
</p>
Copyright © Link group
Floated element se i dalje preklapa sa elementom na vrhu, ali tako je namerno postavljeno
u cilju demonstracije. Ovo preklapanje možemo izbeći kada bi floated element postavili
izvan p taga. Time bismo dozvolili da oba paragrafa budu pozicionirana oko floated
elementa.
<span style="float:right;width:30%;">
content content content content content content content...
</span>
<p>
content content content content content content
</p>
<p>
content content content content content content
</p>
Copyright © Link group
Relativno pozicioniranje
Kada je elementu dodeljeno svojstvo position:relative, tada je element inicijalno
pozicioniran prema pravilima normalnog toka, ali uz odreñene razlike u odnosu na static.
Element možemo pomeriti iz njegovog osnovnog položaja, dok će prostor koji on zauzima
na osnovnoj poziciji ostati prazan. Pomeramo ga prema Offset svojstvima, koje mogu biti
Left, Right, Top i Bottom. Vrednost svakog ovog svojstva predstavlja razdaljinu za koju bi
odgovarajuća ivica elementa trebalo da bude pomerena u odnosu na poziciju elementa u
static varijanti.
Static i Relative pozicioniranje
Boks 1 koristi relativno pozicioniranje da bi se pomerio udesno za 120px u odnosu na
njegovu startnu poziciju. Boks 2 i Boks 3 ostaju u istom mestu, nepromenjene pozicije,
(ponašaju se kao da Boks 1 nije ni promenio poziciju, tj. kao da je ostao na istom mestu)
jer relativno pozicioniranje ne pomera elemente iz normalnog toka.
Elemenat može biti relativno postavljen u odnosu na stranicu ili relativno u odnosu na
roditeljski element. U vezi sa ovim načinom pozicioniranja trebalo bi biti oprezan jer se
može desiti da dobijemo "rupe" u sadržaju.
Apsolutno pozicioniranje
Elementi sa svojstvom position:absolute se uklanjaju, tj. pomeraju iz normalnog toka i ne
utiču na ostale elemente. Pozicija elemenata se odreñuje na osnovu Offset vrednosti koje
mogu biti Left, Right, Top i Bottom. Ove vrednosti se ponašaju skoro isto kao i kod
relativnog pozicioniranja, sem što se kod apsolutnog pozicioniranja element pomera u
odnosu na roditeljski element, koji takoñe mora biti pozicioniran, tj. kome je dodeljeno
svojstvo position. Najlakše je dodati position:relative roditeljskom elementu ako njega ne
želimo da pomeramo.
Copyright © Link group
Apsolutno pozicioniranje nam dozvoljava da definišemo gde bi element trebalo da bude
pozicioniran apsolutno u odnosu na stranicu ili u odnosu na roditeljski element.
Absolute pozicioniranje
Boks 1 je apsolutno pozicioniran, Left i Top svojstva ga pomeraju na desno i dole, a Boks 2 i
Boks 3 se ponašaju kao da Boks 1 ni ne postoji i zauzimaju njegovu poziciju u normalnom
toku. Zbog svoje nove pozicije Boks 1 se preklapa sa Boksom 3 i bilo koja promena u
sadržaju Boksa 3 ne utiče na poziciju ostala dva elementa.
Fiksno pozicioniranje
Fiksno pozicioniranje je specijalan način apsolutnog pozicioniranja. Kada se skroluje
stranica, fiksiran element se ne pomera kao i svi ostali elementi. Ovaj atribut se ne ponaša
isto u svim čitačima, a IE6, kao i ranije verzije Internet Explorera ga uopšte ne podržavaju.
#mojElement {
position:fixed;
left:10%;
}
Element je pomeren na desno za 10% od ukupne širine prozora čitača i fiksiran je u tom
mestu tako da, kada skrolujemo kroz stranicu, mojElement ostaje na istom mestu.
Internet Explorer Box model problem
Ranije verzije Internet Explorera su imale bag vezan za odreñivanje širine i visine
elemenata. Naime, eksplicitno uneta širina/visina u IE je uključivala i border i padding dok
kod W3C specifikacije širina/visina odreñuje samo širinu/visinu sadržaja, a potom se dodaju
border i pading, kako smo pomenuli ranije.
Copyright © Link group
Poreñenje W3C i IE (pre verzije 6) box modela2
Ovaj detalj je stvarao velike probleme pri kreiranju rasporeda stranica jer nije bilo moguće
jednostavno definisati uniformnu širinu/visinu elemenata za sve browsere. Srećom, od IE
verzije 6 i nadalje, problem je rešen i IE poštuje W3C standard.
Pomenuti Internet Explorer stvara i dalje velike probleme web dizajnerima i developerima u
verziji 6, ali i verzijama 7 i 8. Tek verzija 9 je donela drastičnija poboljšanja, mada i dalje
kasni za modernim browserima kao što su Chrome, Firefox i Opera. Očekuje se da će tek
najavljeni IE10 biti u skladu sa modernim standardima.
2
izvor slike http://en.wikipedia.org/wiki/File:W3C_and_Internet_Explorer_box_models.svg
Copyright © Link group
15. CSS Layout
Unos div elemenata
Kao što je slućaj kod mnogih elemenata, div tagove možemo uneti na više načina. Možemo
ih izabrati iz padajućih menija Insert > Layout Objects > Div Tag ili izabrati iz Insert
panela opciju Insert Div Tag (ikonica kvadrata sa elementima unutar njega) koja se nalazi
i u grupi Common, kao i Layout. Bilo koji način da smo izabrali, otvoriće se sledeći dijalog:
Insert opcija omogućava da izabremo gde će se novi div nalaziti:
•
•
•
•
•
At Insertion point - postaviće div gde je kursor
Before tag - postavlja div pre taga koji biramo u padajućem meniju desno
After start of tag - postavlja div odmah posle početka taga koji biramo u
padajućem meniju desno
Before end of tag - postavlja div odmah pre završetka taga koji biramo u
padajućem meniju desno
After tag - postavlja div odmah posle taga koji biramo u padajućem meniju desno
Ukoliko smo selektovali odreñeni element ili više njih, prva stavka će, umesto At insertion
point, glasiti Wrap around Selection i omogućava da novi tag obuhvati izabrane postojeće
elemente.
Class i ID opcije omogućavaju izbor klase, odnosno ID vrednosti, ukoliko su dostupne, a
koje će biti dodeljene divu koji kreiramo. Zapamtite, sve klase koje postoje će biti na
raspolaganju, a istovremeno, samo neiskorišćene ID vrednosti, jer kao što smo ranije
pomenuli, ID se može samo jednom naći na odreñenoj stranici.
Takoñe, možemo ručno uneti ime klase ili ID vrednost i izabrati opciju New CSS Rule koje
omogućava kreiranje novog CSS opisa i poznati CSS Rule definition dijalog.
Copyright © Link group
Unos AP div elemenata
Kao i malopre pomenute div tagove, AP div tagove možemo uneti tako što ćemo izabrati iz
padajućih menija Insert > Layout Objects > AP div ili izabrati iz Insert panela opciju
Draw AP div. Prva mogućnost unosi AP div na stranu sa nekim default podešavanjima, dok
druga opcija nam menja kursor i očekuje da sami nacrtamo AP div na strani. Držeći levi
taster miša možemo nacrtati div gde želimo.
AP div tagovi su obični div tagovi kojima DW odmah dodaje CSS i smešta ga u HEAD deo
strane. Ne dodaje bilo koji CSS, već postavlja apsolutno pozicioniranje.
Na primer, nacrtali smo AP div na strani, DW bi dodao ovakav CSS:
#apDiv1 {
position:absolute;
left:300px;
top:150px;
width:200px;
height:300px;
z-index:1;
}
Odmah je kreirao ID vrednost. Postavio je position, z-index i left/right vrednost zbog
pozicije, kao i width/height vrednosti za veličinu.
AP div u Design prikazu
Copyright © Link group
Takoñe, u Properties Inspectoru se nalaze sva podešavanja za AP div kada je on selektovan
na strani.
Properties Inspector – selektovan AP div
Ranije smo govorili o pozicioniranju elemenata i normalnom toku. Budite svesni da su svi AP
div tagovi apsolutno pozicionirani na strani i da shodno tome ne ulaze u normalan tok
strane, te bi trebalo biti maksimalno oprezan sa njima.
Kreiranje CSS rasporeda strane
U prethodnoj jedinici smo samo pomenuli CSS layout raspored. Raspored strane se sastoji
od nekoliko ili više div tagova koji su tačno struktuirani i rasporeñeni CSS-om i koji čine
neku vrstu šablona strane. Često se koristi i termin CSS layout, pozajmljen iz engleskog
jezika. Dobra praksa je da uvek prvo osmislite i kreirate raspored strane, a tek onda unosite
sam sadržaj. Ukoliko će više strana imati isti sadržaj, utoliko je bitnije pravilno postaviti
osnove.
Dobar broj modernih sajtova ima sledeću strukturu: Zaglavlje (Header) na vrhu strane,
glavni sadržaj (Main) u kome se, kako mu i ime kaže, nalazi glavni sadržaj strane,
sporedni sadržaj (Sidebar) i dno strane (Footer). Na većini sajtova postoji i div sa
navigacijom koji se nalazi iznad ili ispod zaglavlja. Možemo dodati i div oko svega (odmah
posle Body) kojim ćemo centrirati sav sadržaj. Dalje, regione na sajtu možemo deliti u dalje
blokove i celine.
Ovi termini, kao i terminologija nikako nisu obavezni, možemo praviti kakvu god strukturu
želimo i davati bilo koja imena regionima (divovima).
Pogledaćemo neke primere sajtova koji se danas mogu naći na netu:
Copyright © Link group
Adobe Dreamweaver sajt
Adobe Dreamweaver saj ima sličan raspored o kome smo pričali. Na vrhu je navigacija koja
se prostire celom širinom. Ispod je zaglavlje koje nosi naslov i druge informacije. Zatim
sledi glavni sadržaj i sidebar koji počinju u istoj visini i tako dalje.
Copyright © Link group
LINKgroup sajt
Sajt kompanije LINKgroup ima vrlo sličan raspored. Na vrhu su navigacija i header, a slede
glavni sadržaj i sidebar, koji je u ovom slučaju iskorišćen za vesti i logoe partnera.
Copyright © Link group
Naxi radio sajt
Sajt jedne popularne beogradske radio-stanice sadrži pregršt informacija, nema istu ciljnu
publiku i u drugačijem kontekstu je od prethodno pomenutog, ali opet ima sličnu strukturu,
raspored. Na vrhu (ako zanemarimo reklame) se nalazi header sa logotipom i nekim
informacijama. Zatim sledi navigacija koja vizuelno čini celinu sa headerom. Ispod je glavni
sadržaj izdeljen u više celina, a desno sidebar.
Copyright © Link group
Platforma link elearning
Posle ovih primera osvrnućemo se i na sajt/platformu Link elearning. U ovom primeru se
tačno vizuelno mogu distancirati regioni. Header i navigacija su spojeni, glavni sadržaj je
desno, a sidebar levo, gde su njegovi delovi jasno naznačeni okvirima, upadljivijim od
glavnog sadržaja.
Unos sadržaja
Za naš prvi raspored stranice možemo uneti sledeće div tagove: wrapper i unutar njega
header, main, sidebar i footer. Unosimo ih kao obične tagove i vodićemo računa da svi
idu jedan za drugim, da se ne ukrštaju. Samo će wrapper biti oko svih. Ako smo pravilno
uneli te divove, u kodu bi trebalo da imamo:
<div id="wrapper">
<div id="#header">Header</div>
<div id="#main">Main</div>
<div id="#sidebar">Sidebar</div>
<div id="#footer">Footer</div>
</div>
Copyright © Link group
Odmah pre i posle ovog koda stoji početak i kraj body taga. U dizajn prikazu videćemo
nešto poput sledećeg:
Novi div tagovi
Kao što vidite, divovi su poreñani jedan ispod drugog u punoj, maksimalnoj širini i sa
visinom koja zavisi od teksta, pri tom tekst nije stilizovan. Ovde trenutno ne postoji nikakva
stilizacija, samo smo kreirali HTML osnovu i potrebno je da dodamo CSS.
Inače, Dreamweaver poseduje odličnu opciju koja može pomoći u radu. Ukoliko otvorimo
meni sa vizuelnim pomagalima iz Document toolbara, možemo izabrati CSS Layout
Backgrounds opciju, koja će obojiti pozadinu divova u različite boje i time ih distancira
jedan od drugog. Ova opcija je vidljiva samo nama dok radimo i neće biti vildljiva na strani
u browseru. Divovi su i dalje providni i čekaju da im mi kroz CSS dodamo pozadinu. Svaki
put kada uključimo/isključimo ovu opciju, dobićemo drugačije boje.
Vizuelna pomagala – distancirani divovi
Sada ćemo izabrati kreiranje novog CSS opisa iz CSS Styles panela. Pojaviće se dijalog o
kome smo već govorili. Selektor će biti #wrapper (unesite ako je potrebno) jer želimo da
tim novim opisom stilizujemo taj div koji smo malopre kreirali. U donjem delu dijaloga ćemo
postaviti da se kreira novi CSS fajl.
Copyright © Link group
Novi CSS opis - #wrapper div
Pošto smo ovako uneli podatke i potvrdili, otvoriće se sledeći dijalog u kome biramo gde
snimamo CSS fajl. Ja sam kreirao podfolder CSS i u njemu ću snimiti fajl layout.css koji će
nam služiti za raspored elemenata.
Copyright © Link group
Novi CSS fajl
Pošto smo snimili CSS fajl, dolazimo do CSS Rule definition dijaloga. Postavljamo
podešavanja za wrapper, a onda ponavljamo i za ostale divove ove korake (osim snimanja
CSS fajla).
Copyright © Link group
#wrapper - podešavanje opisa
Kreiranje divova, odnosno njihovu stilizaciju predstavili smo u video-materijalu
koji prati ovu lekciju, tako da detaljno možete ispratiti svaki korak.
Live View
Ukoliko želimo da proverimo kako naša strana izgleda u browseru, možemo učiniti baš to,
pokrenuti je u browseru pomoću File > Preview in browser padajućeg menija i tako dalje
ili iskoristiti Live View opciju. Live view nam omogućava da u okviru DW-a prikažemo
stranu kao da smo u browseru i to vrlo korektno, jer DW koristi WebKit osnovu za prikaz.
Live View možemo najlakše pokrenuti klikom na istoimeno dugme u Document toolbaru.
Live View opcija
Tada se prikaz u dizajn delu pretvara u browser i ponaša isto. Čak, možemo pratiti linkove
ka drugim stranama ukoliko pritisnemo i držimo taster Ctrl pre nego što kliknemo na link.
Tada, vrlo koristan je Browser Navigation toolbar (koji pozivamo putem menija: View >
Toolbars > Browser Navigation, ukoliko nije uključen).
Copyright © Link group
Tako stičemo utisak o celom našem sajtu. Ali šta ako primetimo grešku na nekoj strani koja
nije otvorena? Ne možemo odmah vršiti izmene iz live prikaza. Zato postoji opcija Edit the
Live View page in a new tab. Ova opcija koja se nalazi u pomenutom Browser navigation
toolbaru, otvoriće nam trenutno prikazanu stranu u novom tab prozoru Dreamweavera.
Obratite pažnju na to da neće biti dostupna ukoliko je van našeg sajta (ukoliko ste npr. došli
putem linka do www.google.com i slično).
Edit the Live View page in a new tab opcija
Live inspect
Kao dodatnu pomoć u Live prikazu, Adobe je od verzije CS5 u Dreamweaver dodao opciju
Live Inspect1. Pošto uključimo pomenutu opciju putem Document toolbara (nalazi se odmah
pored Live View), možemo preći mišem preko bilo kog elementa, gde će se pojaviti
odreñene boje.
Zeleno-plava predstavlja sadržaj elementa, Padding je ljubičast, margina žuta i tako dalje.
Ovo je vrlo korisno jer možemo lako ustanoviti koja opcija šta čini na stranici.
1
Ukoliko ste do sada koristili Firebug za Firefox ili Firefly za Operu, onda će ova opcija biti poznata jer funkcioniše
vrlo slično.
Copyright © Link group
Live inspect opcija nad slikom
Copyright © Link group
16. Linkovi
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.
o _blank - učitava linkovani dokument u novom okviru/prozoru
o
_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.
Copyright © Link group
_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 - možemo uneti jedno slovo koje će postati prečica u kombinaciji sa Ctrl
tasterom. Na primer, ukoliko unesemo B, možemo koristiti Ctrl+B u browseru.
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.
o
•
•
•
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
Copyright © Link group
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.
Copyright © Link group
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č.
Copyright © Link group
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.
Copyright © Link group
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.
Copyright © Link group
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 linkovi
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.
Copyright © Link group
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:[email protected]
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:[email protected]?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:[email protected]?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:
Copyright © Link group
mailto:[email protected]?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
#sidebar
#sidebar
#sidebar
a.mojlink:link
a.mojlink:visited
a.mojlink:hover
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).
Copyright © Link group
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:
a:link {
text-decoration: none;
color: #F00;
}
a:visited {
text-decoration: none;
color: #336;
}
a:hover {
text-decoration: underline;
color: #090;
}
Copyright © Link group
a:active {
text-decoration: none;
color: #66C;
}
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).
Copyright © Link group
17. Tabele
Tabele u HTML dokumentima nikako ne bi trebalo koristiti za strukturiranje saržaja, već
samo za ono za šta su i namenjene, a to je tabelarno strukturiranje podataka. Ranijih
godina dizajneri su kreirali nevidljive tabele u koje su rasporeñivali elemente strana i tako
kreirali raspore. Danas je ta tehnika napuštena zbog širokih mogućnosti CSS-a, a tabele su
došle na svoje.
Kada želimo da dodamo tabelu, postavićemo kursor na željeno mesto i izabrati Insert >
Table iz padajućeg menija, ili Table opciju iz panela Insert. U oba slučaja, dobićemo Table
dijalog koji vidimo na sledećoj slici.
Dijalog za kreiranje tabele
Postoje sledeće opcije:
•
Rows, Columns - definišemo koliko će tabela imati redova (Rows) i kolona
(columns)
Copyright © Link group
•
•
•
•
•
•
•
Table width – odreñujemo kolika će biti širina tabele, ako unesemo vrednost u
pikselima tada će širina biti fiksna, procente unosimo za fleksibilnu širinu koja zavisi
od Parent elementa ili prozora browsera.
Border tickness - odreñujemo vrednost za debljinu ivica tabele. Ako ostavimo
prazno polje, ivica tabele će se prikazati kao da je uneto 1 piksel, a ako unesemo
vrednost 0, ivica se neće prikazati.
Cell padding – odreñujemo vrednost za prostor, razmak izmeñu ivica ćelije i
sadržaja unutar ćelije. Ako ostavimo prazno polje, razmak će se prikazati kao 1
piksela, a ako unesemo vrednost 0, razmaka neće biti.
Cell spacing - ovde unosimo vrednost za razmak izmeñu samih ćelija tabele. Ako ne
unesemo ništa u polje, razmak će se prikazati kao da smo uneli 2 piksela, a ako
unesemo vrednost 0, razmaka neće biti.
Header - sadržaj u zaglavljima redova i kolona se formatira drugačije nego sadržaj
ostalih ćelija i definiše se drugačije.
Caption - ovde se unosi naslov tabele koji će se pojaviti van tabele na vrhu prvog
reda.
Summary - ovde se unosi opis tabele, sakriven je od čitača, ali se ta informacija
prosleñuje Screen Reader aplikacijama za osobe slabijeg vida, radi identifikovanja
sadržaja.
Ukoliko potvrdimo klikom na ok, kreiraćemo novu tabelu kao na slici ispod,
Nova tabela u dizajn prikazu
dok njen kod, koji ćemo u nastavku razjasniti, izgleda ovako:
<table width="80%" border="0" cellspacing="0" cellpadding="2">
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
Copyright © Link group
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Struktura tabele
Tabelu okružuje <table> tag, sa odreñenim atributima koje smo pomenuli (Width, Border,
Cellspacing, Cellpadding, Summary). Obratite pažnju na to da se podešavanja tabele unose
kao html atributi, CSS ćemo koristiti kasnije za stilizaciju.
Dakle, počinjemo sa <table> tagom:
<table>
</table>
Koji sadrži atribute:
<table width="80%" border="0" cellspacing="0" cellpadding="2">
</table>
Svaki red1 u tabeli se označava <tr> tagom (Table Row Tag)
<table width="80%" border="0" cellspacing="0" cellpadding="2">
<tr>
</tr>
</table>
Dok se svaka ćelija označava <td> (Table Data Tag), eventualno sa <th> (Table Header
Tag), ukoliko je header ćelija.
<table width="80%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>Ovo je sadržaj ćelije</td>
</tr>
1
Da podsetimo: redovi su horizontalni, kolone su vertikalne
Copyright © Link group
</table>
Ovako smo kreirali tabelu sa jednom jedinom ćelijom. Jedan red i jedna ćelija. Možda već
naslućujete da kod HTML tabela ne postoje kolone, barem što se koda tiče.
Ukoliko bismo imali tabelu sa dva reda i tri kolone, njen kod bi izgledao ovako:
<table>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Tabela redovi ćelije
Vidimo dva tr taga koji predstavljaju dva reda, a u svakom od njih po tri polja -td.
Sa druge strane, u dizajn prikazu, ako selektujemo celu tabelu u Properties Inspectoru će se
pojaviti podešavanja.
A.
B.
C.
D.
E.
F.
G.
H.
ID tabele
broj redova i kolona
širina tabele (% ili px)
Cellpading i Cellspacing
Align opcije tabele (kao sa tekstom)
klasa tabele
Border
brisanje, čišćenje širina kolona (Clear Column Widths), brisanje visina redova (Clear
Row Heights), pretvaranje širina u piksele iz procenata (Convert Table Widths to
Pixels), pretvaranje širina u piksele iz procenata (Convert Table Widths to Pixels)
Formatiranje tabele
Kao i kod CSS-a uopšte, možemo unositi stilizaciju i formatiranje tabele, bilo pomoću CSS
Styles panela, bilo pomoću Properties Inspectora.
Copyright © Link group
Ukoliko postavimo kursor unutar ćelije, označimo ćeliju, red ili kolonu, u Properties
Inspectoru možemo menjati podešavanja.
Properties Inspector dok je selektovana kolona tabele
Ukoliko ne postoji već postojeći CSS za izabrani elemenat, izborom bilo koje opcije DW će
nam ponuditi da kreira novi opis, kao što možemo videti sa sledeće slike:
Novi CSS rule dijalog
DW je odmah ponudio da kreira opis i postavio Compound selektor na osnovu pozicije
kursora. Kursor je, u ovom slučaju, bio u jednoj ćeliji i zato je ponudio #data tr td, gde je
#data id tabele, tr predstavlja red, a td ćeliju. Ako bismo nastavili i tako kreirali opis, on bi
se odnosio na sve ćelije te tabele. Slično tome, možemo selektorom “gañati” redove sa, na
primer, #tabela tr ili sve heading ćelije sa odreñenom klasom preko #neki_id tr th.klasa
i tako dalje. Sve ovo možemo i sami uraditi iz CSS Styles panela, bez upotrebe Properties
Inspectora.
Copyright © Link group
Ako bismo stavili samo tr td ili tr th ili tr i tako dalje, opis bi se odnosio na sve moguće
tabele, pogotovo ako je eksterni CSS primenjen na sve stranice, odnosio bi se na sve tabele
na sajtu, odnosno na njihove delove.
Importovanje tabelarnih podataka
Ako već posedujemo Word ili Excel dokumenta sa tabelarnim podacima, najlakši način
kreiranja tabele sa tim podacima u DW-u je pomoću opcije Import Tabular Data do koje
možemo doći na dva načina: File > Import > Tabular Data ili Insert > Table Objects >
Tabular Data. Otvoriće se Import Tabular Data dijalog.
Dijalog za import tabelarnih podataka
U polju Data file unosimo lokaciju izvornog fajla. Klikom na dugme Browse otvaramo dijalog
za lociranje fajla na računaru. Možemo odrediti delimiter koji zavisi od dokumenta sa
podacima. Zatim možemo odrediti width: Fit to data koji postavlja širinu shodno podacima
ili možemo odrediti širinu u pikselima/procentima. Postoje i opcije za podešavanje atributa
Cell Padding, Cell Spacing i Border, kao i formatiranja prvog reda.
Copyright © Link group
18. Forme
Formulari, forme predstavljaju odličan alat za sakupljanje informacija od posetilaca web
sajta. Formulari dozvoljavaju korisnicima da pošalju komentare i pitanja, zatraže neku
informaciju, prijave se za Newsletter, popune Online aplikaciju ili unesu informacije za
plaćanje kako bi kupili neki proizvod.
Sami po sebi formulari ne pružaju nikakvu funkcionalnost, već samo neku vrstu šablona za
prikupljanje informacija. Kada korisnik popuni formular prikazan na sajtu, prikupljeni podaci
se prosleñuju skripti na drugoj strani koja će obaviti sav posao.
Koncept funkcionisanja formulara
Videćemo na primeru. Strana kontakt.html sadrži formular na kome korisnik unosi svoje
podatke i poruku. Pošto potvrdi formu, forma poziva kontakt_slanje.php stranu, na kojoj se
nalazi skripta i koja prikupljene podatke obrañuje i šalje e-mailom na podešenu adresu. Ovo
je samo jedan od primera, skripta može poslati e-mail, upisati/pročitati podatke iz baze ili
uraditi nešto treće što je definisano.
Svaka forma sadrži action atribut koji definiše kome će se proslediti podaci, kojoj strani i
skripti na njoj. U našem primeru je to bila strana kontakt_slanje.php.
Atribut method je takoñe obavezan i on definiše na koji način će podaci biti prosleñeni.
Postoje dve opcije:
•
•
GET metod - Podaci iz fome se ovom opcijom šalju na server kroz URL. Informacije
koje se prosleñuju na ovaj način su transparente i podložne napadima hakera. Pošto
URL može da ima maksimum 8.192 karaktera, ovaj metod nije podesan za duže
formulare. Takoñe, može doći do transliteracije ili transkripcije i neki karakteri se
mogu promeniti ili izgubiti.
POST metod - Ovaj metod pakuje podatke formulara unutar HTTP zahteva. Podaci
nisu šifrovani i stoga su (iako sigurniji nego u GET metodu) ipak podložni napadima
Copyright © Link group
hakera, tako da, ako sakupljamo personalne informacije kao što su korisnička imena,
lozinke ili brojevi kreditnih kartica, moramo osigurati bezbednu konekciju do
sigurnog servera.
U ovom kursu se nećemo baviti skriptama koje procesuiraju i obrañuju podatke iz
formulara, jer je to posebna oblast i spada u domen programiranja.
Kreiranje formulara
Da bismo kreirali formular u Dreamweaveru, postavićemo kursor na mesto gde želimo da ga
unesemo. Izabraćemo Insert > Form > Form iz padajućih menija. Drugi način je preko
Insert panela, izborom kategorije Form i klikom na Form dugme.
Kreiranje osnove formulara
Ukoliko je tom prilikom otvoren Design prikaz, Dreamweaver će uneti crvenu isprekidanu
liniju u obliku pravougaonika, a u Code prikazu sledeći kod:
Copyright © Link group
<form id="form1" name="form1" method="post" action="">
</form>
Ukoliko smo formu dodali dok je otvoren Code prikaz, pre samog postavljanja na stranu,
pojaviće se sledeći dijalog:
Podešavanja forme prilikom dodavanja u Code prikazu
U ovom dijalogu možemo uneti razna podešavanja pre postavljanja. Većinu opcija odavde
možemo naći u Properties Inspectoru, kada je forma selektovana u Design prikazu.
Ako već nismo, otvorićemo Design prikaz i izabrati našu formu klikom unutar nje, unutar
crvene isprekidane linije. Properties Inspector će postati kao na slici:
Podešavanja forme
•
•
•
•
Form ID - U ovom polju unosimo jedinstveno ime formulara. Preko ID vrednosti
možemo stilizovati formu, ali ID koristimo i kod programiranja skripti.
Action - U ovom polju unosimo ima skripte/stranice koja će procesirati formular.
Možemo ručno uneti ili locirati skriptu klikom na folder ikonicu desno od polja.
Target - Omogućava da odredište bude drugi prozor ili frame u odnosu na tekući. U
tom drugom okviru se prikazuje HTML strana koja se dobija nakon obrade podataka.
Method - Ovde biramo kojim metodom šaljemo serveru prikupljene podatke iz
formulara.
o Default - Ova opcija koristi difoltna podešavanja čitača da bi poslala
informacije sa formulara. Default metod je obično, ali ne i uvek, GET metod.
Preporučuje se postavljanje neke od druge dve vrednosti.
Copyright © Link group
GET - Podaci iz formulara se šalju GET metodom, kako smo pojasnili ranije.
POST - Podaci iz formulara se šalju POST metodom, kako smo pojasnili
ranije.
Enctype - Ovo polje je opciono i po default podešavanju je prazno. Kada imamo File
upload polje u formularu, izabraćemo Multipart/form-data tip.
Class – Definiše klasu formulara.
o
o
•
•
Unos elemenata forme
Osim prve opcije Form, Insert panel u Form kategoriji nudi mnošto opcija.
Insert panel, Forms kategorija
Text Field polje
Klikom na opciju Text Field opciju dodajemo input tekstualno polje (sve ove opcije možemo
naći i u padajućem meniju Insert > Forms).
Copyright © Link group
Input podešavanja
Ovaj dijalog koji vidite na slici iznad će biti prikazan uvek kada izaberemo neko input polje u
formularima, bilo da se radi o Text Field, Textarea, Checkbox i tako dalje.
ID – unosimo id vrednost polja
Label – Postavljamo tekst koji će biti vidljiv van polja i koji će dati korisniku
informaciju/uputstva za polje.
Style – Biramo način postavljanja label opcije.
• Attach label tag using ‘for’ attribute – Postavlja labelu u posebnom tagu i
povezuje sa poljem putem for atributa. Preporučen način jer možemo razdvojiti
fizički delove (labelu i polje) a da pri tom ostanu povezani.
• Wrap with label tag – Postavlja label tag oko polja. Tekst labele ide neposredno
pre polja.
• No label tag - Tekst labele postavlja neposredno pre polja. Ne postavlja tag.
Position – Postavlja labelu pre ili posle polja.
Access key – Opciono polje. Koristimo ukoliko želimo da definišemo tastaturnu prečicu za
polje. Na Windows sistemu i Internet Exploreru potrebno je pritisnuti Alt + accesskey, u
FireFoxu Alt + Shift + accesskey. Na većini Mac browsera je Cmd + accesskey.
Tab index – Opciono polje. Koristimo ga ukoliko želimo korigovati default tab redosled koji
kreira browser. Unošenjem brojeva za različita polja u formi možemo definisati redosled.
Pritiskom tastera Tab, korisnikov fokus će preči na polje sa narednom vrednošću. Možemo
Copyright © Link group
unositi 1,2,3,4.. ili 10,20,30,40.. Brojevi ne moraju biti zaredom, bitno je da su različiti i
veći od 0.
Ukoliko unesemo vrednosti kao sa slike iznad, dobićemo polje u formi koje će u dizajn
prikazu i browseru izgledati ovako:
Forma i jedno polje sa labelom u dizajn prikazu
Isti elementi u browseru
U Code prikazu, HTML kod će izgledati poput sledećeg:
<form action="kontakt_slanje.php" method="post" name="formaKontakt"
id="formaKontakt">
<label for="ime">Vaše ime:</label>
<input type="text" name="ime" id="ime" />
</form>
Primetićemo da je u kodu tag našeg polja <input>, a da je type atribut postavljen na text.
U formama različiti tipovi polja koriste isti tag, ali različit type atribut, kako ćemo videti u
nastavku.
Kada selektujemo naše input polje, Properties Inspector će prikazati moguća podešavanja:
Properties Inspector za input polje
•
•
•
•
•
TextField – ID vrednost koju smo uneli u dijalogu prilikom kreiranja polja.
Char width – Definišemo broj karaktera u polju. Preporučujem da izbegavate ovo
polje i da definišete putem CSS-a.
Max Chars - Definišemo maksimalan broj karaktera u polju.
Disabled – Možemo isključiti (Disable) polje i načiniti ga nedostupnim, ali vidljivim.
Read-only – Postavlja polje na read-only stanje. Sva interaktivnost je dostupna, ali
se ne može ništa upisati u polje.
Copyright © Link group
•
•
•
Init val – Postavlja default vrednost.
Class – Definiše klasu nad poljem.
Type – Biramo tip polja.
o Single line – Ovo polje je postavljeno pošto smo uneli Text Field na početku,
obično tekstualno polje.
o Multi line – Konvertuje obično tekstualno polje u tekstualno polje sa više
redova. Ukoliko postavimo ovu vrednost ranije pomenuta Max Char vrednost
postaje Num Lines, gde možemo podesiti broj redova. U tom slučaju, u
kodu, <input> tag se pretvara u <textarea>
o Password – Potpuno isto kao obično Single line tekstualno polje, osim što u
browseru prikazuje tačke ili zvezdice prilikom upisa, kako bi sakrilo šifru.
Atribut type postaje password umesto text.
Hidden polje
Hidden polje je, kao i prethodno, <input> tag. Koristimo ga kad želimo da postavimo neku
vrednost, a ona ne bi trebalo da bude vidljiva. Možemo uneti u startu ili se može učitati i
pomoću skripti. Na primer, možemo učitati iz baze id broj kupca koji je trenutno prijavljen
na sajtu, i taj broj proslediti kroz formular:
<input type="hidden" name="hdnCustId"
value="<?php echo $strCustomerId; ?>"/>
Text Area polje
Ovo polje je potpuno isto kao Text Field, sa tom razlikom da može sadržati više redova
teksta. Klikom na ovu opciju ista su podešavanja kao za Text Field.
Checkbox
Izborom ove opcije kreiramo takoñe <input> tag, samo što je atribut type postavljen na
checkbox. Ne postoji mogućnost unosa vrednosti, već polje može imati samo dve vrednosti
- checked ili unchecked. Sledi prikaz u kodu i u browseru:
<input type="checkbox" name="obavestenja" id="obavestenja" />
<label for="obavestenja">Da li želite da primate obaveštenja
emailom?</label>
Checkbox i labela u browseru
Po default vrednosti, labela se smešta iza polja kako bi sama kontrola bila levo, a tekst u
nastavku desno. U Properties Inspectoru možemo definisati default stanje (označeno ili ne) i
koju vrednost prosleñuje formular.
Copyright © Link group
Checkbox group
Izborom ove opcije pozivamo dijalog u kome možemo odmah kreirati više checkbox polja.
Checkbox Group dijalog
•
•
•
Name - Unosimo naziv grupe od koga će u nizu biti kreirane ID vrednosti za polja.
Checkboxes – U ovom središnjem delu kreiramo polja unosom Label vrednosti (za
labele koje se prikazuju korisniku) i Value vrednosti (koje korisnik ne vidi, ali se
prosleñuju kroz formular). Takoñe, opcijama +/- dodajemo/brišemo polja, a
strelicama gore/dole ureñujemo redosled.
Lay out using – Biramo da li će polja u grupi biti rasporeñena pomoću line break
vrednosti ili pomoću tabele.
Radio Button i Radio Group
Radio elementi su potpuno isti kao checkbox, sa jednom bitnom razlikom. Ukoliko se nalaze
više u grupi (i imaju isti name atribut), moguće je izabrati samo jedno polje. Ukoliko se
izabere drugo, prethodno se isključuje, što nije slučaj kod checkbox.
Select (List/Menu)
Ova opcija nam dozvoljava da kreiramo padajući meni ili listu za izbor. Početni dijalog je isti
kao za input polja, ali kreira <select> tag u koji se smešta po jedan <option> tag za svaku
ponuñenu vrednost.
Copyright © Link group
Podešavanja Select polja u Properties Inspectoru
•
•
Type – možemo izabrati tip polja, da li će biti u obliku padajućeg menija ili liste.
Ukoliko izaberemo List, možemo definisati visinu u polju Height, kao i dozvoliti
selektovanje više opcija istovremeno kroz Allow multiple.
List Values.. – Veoma bitna opcija, jer klikom na dugme otvaramo dijalog u kome
definišemo moguće vrednosti.
Podešavanja dozvoljenih vrednosti
Kod izgleda poput sledećeg:
<select name="pol" id="pol">
<option value="zenski">Ženski</option>
<option value="muski" selected="selected">Muški</option>
</select>
Copyright © Link group
Jump menu
Ova opcija je vrlo slična prethodnoj, sa tom razlikom da nam omogućava da se oizvrši akcija
posle selekcije.
Image Field
Ponaša se vrlo slično kao Submit dugme, o čemu ćemo pričati uskoro. Razlika je u tome što
se može postaviti slika umesto standardnog ili stilizovanog dugmeta.
File Field
Opcija koja kreira polje za postavljanje/upload fajlova. Takoñe je <input> tag, ali sa
atributom type podešenim na file.
File Field polje u Design prikazu
Iako neraskidiva celina (jedan input tag), vizuelno je predstavljeno iz dva dela. Vidimo polje
slično običnom tekst input polju i dugme browse, kojim korisnik poziva dijalog za izbor fajla.
Prilično je teško stilizovati ovo polje, a tekst Browse.. ne možemo promeniti.
Button
Kreira dugme forme. Postoje tri tipa:
•
•
•
Submit – Prosleñuje sve podatke forme skripti koju smo definisali putem action
atributa forme, na način koji smo definisali putem method atributa forme
(GET/POST). Drugim rečima, korisnik unosi podatke, ali tek kada izabere submit
opciju, formular čini ono za šta je namenjen, tj. prosleñuje podatke dalje.
Reset – Resetuje sva polja u formi u kojoj se nalazi što ponekad može prilično
iznervirati korisnika ako je slučajno izabrao ovu opciju umesto submit. Koristiti sa
oprezom.
None – Postavlja dugme koje samo po sebi nema nikakvu funkcionalnost. Obično se
postavlja JavaScript koji će izršiti neku radnju pošto se dugme aktivira.
Value vrednost u Properties Inspectoru definiše vidljiv tekst.
Copyright © Link group
Podešavanja za selektovano dugme u Properties Inspectoru
Label
Postavlja labelu, ali ne vezuje za odreñeno polje putem for atributa, kako smo pomenuli
ranije. Postavlja kod:
<label>Nova labela</label>
Fieldset
Pomoću Fieldset opcije možemo grupisati odreñena polja. Na primer, možemo imati u
formularu grupe za opšte informacije, informacije o plaćanju i tako dalje. Kreira <fieldset>
tag u koji smeštamo sva polja koja želimo da grupišemo, i <legend> na samom početku
grupe, a koji sadrži naziv. Sam naziv pluta na liniji koja okružuje grupu. Kod izgleda poput
sledećeg:
<fieldset><legend>Opšte informacije</legend>
.....
</fieldset>
U browseru, fieldset koji okružuje dva tekstualna polja izgleda poput slike:
Fieldset i dva text field polja
Spry validacija
Poslednjih sedam opcija se odnosi na Spry validaciju. Pojavljuju nam se dva nova termina
koja do sada nismo upoznali – spry i validacija.
Copyright © Link group
Spry opcijama ćemo se baviti u nekoj od narednih lekcija, za sada je bitno da znamo da je
to JavaScript koji će nam DW sam kreirati po potrebi.
Validacija (u ovom kontekstu) je proces u kome se proverava da li je forma pravilno
popunjena od strane korisnika. Na primer, možemo proveriti da li je korisnik uneo obavezna
polja, da li je potvrdio checkbox u kome se slaže sa pravilima korišćenja, da li je uneo email adresu u pravilnoj formi i tako dalje. Validacija može biti client-side ili server-side.
Client side znači da se vrši u browseru korisnika I, tek ako je sve ok, prosleñuje skripti na
dalju obradu. Server side validacija prosleñuje formu, odnosno njene podatke odmah
skripti, koja tek onda validira formu.
Ovih poslednjih sedam opcija su ponovljena polja o kojima smo pričali, ali uz dodatak
validacije. Sve su client-side. Možemo uneti, na primer, Text Field polje i podesiti da
prihvata samo datume u obliku dd/mm/gggg (dan/mesec/godina).
Copyright © Link group
19. Šabloni (Templates)
U okviru jednog sajta uobičajeno je da sve stranice, ili barem većina njih poseduje odreñene
zajedničke elemente. Ti elementi mogu biti Header, Footer, navigacija, logo sajta i tako
dalje.
Da se postavljanje ovih elemenata ne bi radilo na svakoj stranici posebno, koriste se šabloni
(Template). Svi zajednički elementi stranica mogu se definisati i zaključati i sve promene
koje načinimo na šablonu automatski se primenjuju na sve zavisne stranice. Pomoću
šablona možemo da kontrolišemo koji delovi stranice će moći da se edituju, a koji će biti
fiksni na svim stranicama sajta. Ova opcija je pogotovo zgodna ukoliko prosleñujete nekom
drugom da sajt popuni podacima i želite da ograničite mogućnost greške.
Šabloni su posebni fajlovi sa ekstenzijom dwt i od jednog šablona možemo napraviti više
HTML strana. Ukoliko kasnije promenimo šablon, možemo automatski promeniti sve strane
kreirane na osnovu njega.
Sami dwt šabloni se koriste kao kostur za buduće stranice koje kasnije kreiramo i snimamo.
Kada postavljamo na udaljeni server, nije potrebno kopirati dwt fajlove.
Grafički prikaz funkcionisanja šablona
Copyright © Link group
Na primer, kreiraćemo osnovu rasporeda i izgleda svih strana u jednom fajlu. Dodaćemo
logo, navigaciju, centralni i sporedni sadržaj (main i sidebar) i tako dalje. Potom možemo tu
stranu snimiti kao dwt fajl tako što ćemo izabrati File > Save As Template iz padajućeg
menija. Osim toga, možemo izabrati i blanko template iz New Document dijaloga (File >
New).
Snimanje strane kao šablon (template) u dwt formatu
Možda je začuñujuće što se ne pojavljuje klasičan dijalog za snimanje fajla, već ovaj koji
vidimo na slici. Možemo izabrati i podesiti:
•
•
•
•
Site - u okviru kog sajta želimo da snimimo šablon. Trenutno aktivan je izabran u
startu.
Existing templates – vidimo spisak postojećih šablona (ukoliko postoje) i možemo
presnimiti preko nekog od njih.
Description – opis za novi template. Može biti duži opis sa razmacima i drugim
karakterima.
Save as – ime našeg novog šablona (kratko i bez razmaka).
Pošto potvrdimo, DW će u okviru našeg sajta kreirati novi folder pod nazivom Templates i
u njega smestiti novi dwt fajl. Ukoliko smo radili na postojećem HTML fajlu, on ostaje
netaknut. Templates folder ne bi trebalo da menjamo, pomeramo i slično. Njega ne
postavljamo na server pošto završimo sajt.
Copyright © Link group
Novi Templates folder i dwt fajl u Files panelu
Dodavanje izmenjivih (Editable) regiona
Ukoliko bismo samo snimili šablon koji smo kreirali malopre, nijedan njegov deo ne bi bio
izmenjiv. To znači da, ukoliko bismo kasnije napravili novu stranu na osnovu tog šablona,
nijedan njen deo ne bi bio izmenjiv. Takav šablon je praktično neupotrebljiv. Dreamweaver
će nas čak i upozoriti na taj detalj ukoliko pokušamo da snimimo.
Upozorenje ukoliko pokušamo da snimimo šablon bez izmenjivih regiona
Pošto ne želimo da kreiramo takav, neupotrebljiv šablon dodajemo izmenjive regione.
Samo ono što je unutar njih će biti podložno promenama na zavisnim stranama. Ukoliko
postavimo takav region unutar objekta na strani, možemo menjati njegov sadržaj, ali ne i
strukturu. Na primer, možemo postaviti izmenjiv region unutar h1 taga. U tom slučaju, na
strani je moguće promeniti tekst naslova, ali ne i sam tag iz h1 u h2 i slično. Sa druge
strane, regioni mogu biti oko tagova ili delova strane (div i sl). U malopreñašnjem primeru
smo mogli postaviti region oko h1 taga i tada bi na strani mogli promeniti iz h1 u h2 i slično.
Copyright © Link group
Samo dodavanje izmenjivih regiona je prilično jednostavno. Postavićemo kursor gde želimo
da dodamo region ili oko nekog elementa/elemenata i izabrati Insert > Template Objects
> Editable Region iz padajućih menija. Pojaviće se dijalog sa sledeće slike u kome je
potrebno uneti naziv novog regiona.
Dodavanje novog editabilnog regiona
Region će biti vidljiv u dizajn prikazu kao plavi okvir sa karticom na kome je prikazan njegov
naziv. Sam region možemo lako selektovati klikom na njega direktno ili putem tag
selektora, u kome se pojavljuje kao i ostali tagovi. U Properties Inspectoru jedino
podešavanje je ono za naziv (name) regiona, koji možemo promeniti, ali mora biti unikatan.
Editabilni region u dizajn prikazu
Kada pokušamo da snimimo dwt, DW će nas upozoriti ukoliko je neki od regiona postavljen
unutar elementa tako da je samo njegov sadržaj izmenjiv. Pomenuli smo taj detalj i primer
ukoliko postavimo unutar h1 taga. Uglavnom je slučaj da smo to želeli, ali, u suprotnom,
može biti koristan podsetnik kako bismo proverili o čemu se radi.
Copyright © Link group
Notifikacija za region unutar block taga
Dodavanje opcionih (optional) regiona
Pored izmenjivih regiona, postoje i opcioni regioni. Oni se mogu pojaviti ili ne, praktično
uključiti/isključiti na zavisnim stranama. Njihovo kreiranje je slično izmenjivim regionima, i
dodajemo ih putem padajućeg menija Insert > Template Objects > Optional Region,
pri čemu će se otvoriti sledeći dijalog.
Novi opcioni region
Potrebno je uneti ime opcionog regiona i izabrati da li će biti po default podešavanju biti
vidljiv ili ne (Show by default). Važno je napomenuti da opcioni regioni nisu nužno i
Copyright © Link group
izmenjivi. Imaće fiksiran sadržaj koji možemo prikazati/sakriti. Ako želimo da budu i opcioni
i izmenjivi istovremeno, moramo definisati i izmenjiv region, kako smo pričali ranije.
Dodavanje regiona koji se ponavljaju (Repeating Regions)
Ponekad je potrebno kreirati stranu sa elementima, delovima koji se ponavljaju. Na primer,
kreiramo stranu sa proizvodima. Velika je verovatnoća da ćemo imati više elemenata koji
imaju istu strukturu, a drugačiji sadržaj. Naziv proizvoda, slika, cena, opis i tako dalje. Da
ne bismo ručno unosili svaki od njih, možemo definisati regione koji se ponavljaju i lako
dodavati i brisati po želji.
Izabraćemo Insert > Template Objects > Optional Region i u dijalogu koji se pojavi
uneti ime.
Unos regiona koji se ponavlja
Kao i opcioni regioni, regioni koji se ponavljaju nisu u startu izmenjivi.
Kasnije, na zavisnim stranama, oko regiona se pojavljuju kontrole putem kojim možemo
dodati/obrisati ili promeniti redosled stavki koje se ponavljaju.
Postavljanje izmenjivih atributa
Pored izmenjivih ili opcionih delova strane, možemo izabrati tag i na njemu postaviti
izmenjiv atribut. Tako možemo, na primer, dozvoliti da se na zavisnoj stranici menja klasa
naslova h1 ili slično. Izabraćemo tag na kome želimo da omogućimo to i izabrati iz
padajućih menija opciju Modify > Templates > Make Attribute Editable.
Copyright © Link group
Podešavanja izmenjivog atributa
Možemo podesiiti sledeće:
•
•
•
•
•
Attribute - podešavamo koji atribut želimo da načinimo izmenjivim. Možemo dodati
atribut na dugme Add.. desno od menija.
Make attribute editable opcija omogućava podešavanja niže.
Label – biramo oznaku. Preporučujem unošenje smislenog naziva kako bi kasnije u
listi mogli lako da nañemo onu koja nam treba.
Type – tip vrednosti atrubuta koji se unosi na zavisnoj stranici.
Default – default vrednost atributa.
Kreiranje strane na osnovu šablona
Kada želimo da kreiramo novu stranu koja bi bila zavisna od šablona, najlakše je da u New
Document dijalogu (File > New) izaberemo kategoriju Page From Template, lokalni sajt i
potom sam template. Važno je da pri tome ostavimo uključenu opciju Update page when
template changes. Tako ćemo osigurati da se i strana izmeni, pošto eventualno izmenimo
šablon.
Opcija koja pri kreiranju strane ostavlja šablon povezan sa zavisnom stranom
Copyright © Link group
U toku rada možemo koristiti i opciju Modify > Templates > Update Curent Page kako
bismo osvežili tekuću stranu, odnosno opciju Modify > Templates > Update Pages…
kako bismo osvežili sve strane sajta u odnosu na šablon.
Copyright © Link group
20. Flash i video
Dreamweaver olakšava posao unosa Flash fajlova, muzičkih i video-fajlova, usklañuje
atribute koji odreñuju kako će ti medija fajlovi biti prikazani na stranici i, tamo gde je
primenljivo, Dreamweaver daje mogućnost promene načina na koji korisnik interaguje sa
tim fajlovima.
Sami po sebi, multimedijalni fajlovi koje smo pomenuli postavljaju se nešto drugačije nego
obične slike, na primer. Flash fajlovi zahtevaju poseban kod za povezivanje i tu nam
Dreamweaver pomaže.
Postoji nekoliko tipova Flash fajlova:
•
•
•
•
•
.fla (Flash fajlovi ili Flash filmovi) - Ovo su originalni, editabilni izvorni Flash
fajlovi za kreiranje .swf fajlova. Njih ne možemo unositi na stranu, već ih moramo
pripremiti kao swf.
.swf fajlovi - Ovo su kompresovane, prenosive verzije .fla fajlova koje se mogu
prikazati u Dreamweaveru i pustiti u rad u browserima. Flash buttons i Flash text isto
koriste .swf fajlove. Ovi fajlovi nemaju mogućnost editovanja kao originalni .fla
fajlovi.
.swt fajlovi - Ovo su Flash templejti koji omogućavaju da promenimo informacije u
.swf fajlovima. Na primer, dugme koje je kreirano u Flashu može koristiti .swt fajl,
koji će omogućiti da generišemo više dugmadi sa različitim tekstom.
.swc fajlovi - Ovo su specijalni SWF fajlovi koji se koriste za Rich Internet
Applications.
.flv fajlovi (Flash video fajlovi) - Ovi fajlovi sadrže enkodirane audio i videopodatke koji omogućavaju da ih besplatni Flash Player pušta na stranicama.
Ubacivanje Flash animacija/filmova (SWF)
Pre nego što ubacimo Flash fajlove u Dreamweaver, moramo ih prvo kreirati u Flash
aplikaciji i snimiti sa swf ekstenzijom. Ubacivanje Flash filmova je jako slično kao i
ubacivanje slika. Meñutim, prateći kod se dosta razlikuje.
Da bismo ubacili swf fajl u Dreamweaver, postavićemo kursor na mesto gde i iz padajućeg
menija izaberemo Insert > Media > SWF iz padajućih menija.
Copyright © Link group
Accessibility atributi prilikom dodavanja Flash animacije
Otvoriće se Object Tag Accessibility Attributes dijalog gde možemo ubaciti naslov
animacije, Acces key i Tab index. Sva tri atributa su opciona, ali je dobra praksa uneti
barem ime animaciji. Ako izaberemo Cancel, swf će se ipak postaviti na stranicu, nećemo
otkazati postavljanje, već samo ove atribute.
Flash u Design prikazu
Copyright © Link group
Ukoliko želimo da vidimo kako izgleda swf zajedno sa sadržajem stranice, izabraćemo
Placeholder u dizajn prikazu, a zatim u Property Inspector kliknuti na Play dugme.
Pokretanje animacije u dizajn prikazu
Flash film će se pokrenuti u dizajn prikazu:
Flash u Design prikazu – pokrenuta animacija
Takoñe, možemo izabrati Live view kako bismo videli izgled strane u browseru ili pokrenuti
u pravom browseru (F12).
Kao i kod drugih objekata, Property Inspector, kada je selektovan SWF, ima dosta opcija
gde možemo kontrolisati razna podešavanja. U levom gornjem uglu prikazuje se tip fajla i
veličina, odmah ispod je polje u kome se nalazi ID atribut <object> taga. Dreamweaver
Copyright © Link group
automatski dodeljuje vrednost FlashID za prvi ubačeni swf objekat. Svi naredni objekti koji
se ubacuju dobijaju FlashID2, FlashID3 itd. Ovo polje je editabilno, tako da možemo sami
uneti željeni ID.
Properties Inspector dok je SWF selektovan na strani
Ostale opcije u Property Inspectoru su:
•
•
•
•
•
•
•
•
•
•
•
Weight i Hight - Širina i visina animacije u pikselima. Ova polja se automatski
popunjavaju kada ubacimo swf objekat, mada ih možete promeniti unosom drugih
vrednosti, ali to nikako ne preporučujem. Ostavite uvek prave vrednosti flash
animacije. Ako je potrebna druga veličina, pripremite takav swf.
File - Ovo polje prikazuje punu putanju do swf objekta. Opcije sa desne strane se
ponašaju isto kao kod slika, npr.
Src - Ovo polje specificira lokaciju originalnog .fla fajla koji je korišćen u kreiranju
swf objekta.
Bg - Ova opcija unosi parametar u <object> tag i setuje pozadinsku boju swf
objekta (boja koja se prikazuje u pozadini filma).
Edit - Ova opcija otvara .fla fajl za editovanje, ali da bi radila, src polje mora biti
adekvatno popunjeno i Adobe Flash instaliran na računaru.
Class - Omogućava primenu CSS klase na <object> tag.
Loop - Ova opcija je po default podešavanjima potvrñena i postavlja automatsko
ponavljanje animacije.
Autoplay - Ova opcija je takoñe po default podešavanjima potvrñena i postavlja
automatsko pokretanje animacije.
V Space i H space - Ova opcija insertuje neodobravane (nisu XHTML standard)
atribute u <object> tag. Postavljaju vertikalan i horizontalan prostor oko filma.
Najbolje je ove atribute dodeliti preko CSS-a.
Quality - Ova opcija kontroliše izgled filma za vreme prikazivanja. Postoje sledeća
podešavanja:
o High - Postavlja najbolji kvalitet filma, ali zahteva nešto više procesorske
snage, što može biti problem na nekim starijim računarima i mobilnim
ureñajima (preporučena opcija)
o Low - Selektovaćemo ovu opciju ako je mnogo bitnija brzina prikazivanja
nego kvalitet filma.
o AutoHigh - Ova opcija daje jednak prioritet u izgledu i brzini, ali žrtvuje
izgled ako je potrebno više brzine.
o AutoLow - Prioritet je na brzini, ali kad god je moguće popravlja kvalitet
filma.
Scale - Odreñuje kako se film prikazuje u već odreñenim H i W dimenzijama.
o Default (Show All) - Ceo film se prikazuje sa svojih 100%.
o No Border - Bilo koji delovi filma koji se pružaju preko podešenih W i H
dimenzija su isečeni.
Copyright © Link group
Exact Fit - Sabija film u specificirane dimenzije, bez obzira na originalnu
veličinu filma.
Align - Postavlja poravnanje filma relativno u odnosu na stranicu/Parent element.
Wmode - Ova opcija postavlja Wmode filma u prozoru čitača, što preventuje
konflikte sa DHTML elementima kao što su Spry Widgets. Postoje sledeće opcije:
o Window - Forsira swf iznad svih elemenata stranice.
o Opaque - Default opcija, dozvoljava DHTML objektima, kao što su, na primer,
padajući meniji da se korektno prikazuju preko filma.
o Transparent - Forsira DHTML elemente da se prikazuju ispod filma.
Parameters - Otvara dijalog sa nizom parametara koje možemo postaviti samo ako
je film kreiran tako da prihvata te parametre, tj. ako ih naša SWF animacija zahteva.
o
•
•
•
Alternativni sadržaj
Dreamweaver postavlja svetloplavi tab iznad swf objekta u dizajn prikazu sa ikonicom
otvorenog oka u desnom uglu. Kada kliknemo na tu ikonicu, otvara se alternativni sadržaj
koji će se prikazati ako korisnik nije instalirao adekvatnu (noviju) verziju Flash Playera.
Možemo editovati ili obrisati ovaj sadržaj.
Flash u Design prikazu – alternativni sadržaj (nedostaje Flash player)
Da bismo zatvorili ovaj prikaz i vratili se na normalan, kliknućemo ponovo na ikonicu sada
zatvorenog oka.
Ubacivanje Flash video-fajlova (FLV)
Flash video-fajl je drugačiji od regularnog swf objekta i poseduje .flv ekstenziju, što
omogućava dodavanje već gotovog filma na stranicu. Možemo ga insertovati tako što ćemo
postaviti kursor na željeno mesto i izabrati Insert > Media > FLV iz padajućih menija. Flv
format se može kreirati iz Adobe Flash ili drugih aplikacija za kreiranje Flash sadržaja.
Takoñe, može se snimiti iz profesionalnih aplikacija za video-montažu, poput Adobe
Premiere Pro, a možemo konvertovati/encodovati avi, wmv i druge formate pomoću raznih
dostupnih aplikacija.
Kada unesemo ovakav video, Dreamweaver će obezbediti kontrole videa koje možemo i
podesiti. Pošto smo izabrali Insert > Media > FLV, otvoriće se sledeći dijalog:
Copyright © Link group
Dijalog za podešavanje FLV prikaza na strani (progresivni video)
Najbitnija opcija u ovom dijalogu je na vrhu – Video type, gde možemo izabrati:
•
•
Progressive Download Video – Preuzima video-fajl u privremeni folder na
računaru korisnika i onda ga pokreće na stranici. Ipak, za razliku od tradicionalnog
preuzimanja i onda pokretanja, progresivni video dozvoljava pokretanje filma pre
nego što je ceo video preuzet (kao što to čine i YouTube ili Vimeo, na primer).
Streaming Video – Strimuje video-sadržaj posle kraćeg buffer perioda
(predučitavanja) kako bi se izbegli mogući prekidi zbog nestabilnosti internet
konekcije. Potreban je Adobe Flash Media Server.
Ostale opcije vezane za progresivni video su:
•
•
•
URL – Definišemo relativnu ili apsolutnu putanju do FLV fajla. Možemo izabrati
browse i u dijalogu naći željeni fajl.
Skin – U ovoj opciji vršimo izbor izgleda kontrola videa prilikom puštanja na strani.
Pregled kako će izgledati se nalazi ispod.
Width i Height – Definišemo širinu, odnosno visinu videa. Pored polja nalazi se
dugme Detect Size koje automatski postavlja ove parametre na osnovu fajla i
preporuka je korišćenje automatskog umesto ručnog unosa. Obratite pažnju na to da
Copyright © Link group
•
•
•
će realna veličina na strani zavisiti i od opcija skina. Ukupna veličina je data pored sa
labelom Total With Skin.
Constrain – Forsira aspect ratio za širinu/visinu. Po default podešavanjima je
uključeno i preporuka je da se ostavi tako, da ne bi došlo do deformacija videa.
Auto Play - Postavlja automatsko pokretanje filma.
Auto Rewind - Postavlja automatsko premotavanje filma, pošto se isti završi.
Na slici koja sledi je dijalog sa opcijama, koji se pojavljuje ukoliko izaberemo Streaming
video prilikom dodavanja FLV:
Dijalog za podešavanje FLV prikaza na strani (Striming video)
•
•
•
Server URI – Definiše server name, application name, i instance name u formi
rtmp://www.primer.com/app_ime/instanca_ime.
Stream Name – Unosimo ime FLV fajla koje želimo da pustimo (na primer video.flv)
Live Video Feed – Definiše da li video ide uživo. U tom slučaju Auto Play i Auto
Rewind nemaju efekta, a i od kontrola se vidi samo jačina zvuka, jer ne možemo
premotati video i sl.
Copyright © Link group
•
Buffer Time – Postavljamo željeno vreme u sekundama, koliko će se učitati video
pre puštanja. Ako ostavimo 0, video počinje odmah po uspostavljanju konekcije.
Ostale opcije iz ovog dijaloga su iste kao za progresivni video.
Napomene kod postavljanja multimedijalnih sadržaja
Kada postavljamo SWF ili FLA fajlove, Dreamweaver će kreirati odreñene (bilo SWF, CSS, JS
etc) fajlove automatski, a koji služe u svrhu pokretanja i puštanja ovih materijala. Tek kada
pokušamo da snimimo stranu, DW će otvoriti dijalog u kome će nas obavestiti da je
pripremio potrebne fajlove i da želi da ih snimi u okviru sajta.
Dijalog kojim nas DW obaveštava o dodatnim fajlovima koje je kreirao
Na slici se vidi da je kreirao dva fajla, jedan swf i jedan js, a kao podršku za naš SWF fajl na
strani. Pošto kliknemo na ok, oni će se pojaviti u Files panelu u podfolderu Scripts. Važno
je da te fajlove ne brišemo i da im ne menjamo lokaciju (bez update linkova). Ukoliko budu
nedostupni, strana možda neće biti prikazana pravilno.
Ukoliko se ne vide odmah po snimanju, izabraćemo Refresh opciju u Files panelu (plava
strelica kružnog oblika).
Copyright © Link group
Files panel sa novim fajlovima – Scripts folder
Copyright © Link group
Behaviours
U poslednjih nekoliko godina iskustvo korisnika na stranama se promenilo, a i sama
očekivanja posetilaca sajtova. Najčešći način za dodavanje interaktivnosti je pomoću
JavaScripta i svakako preporučujem da se posvetite izučavanju tog skriptnog jezika. Ipak,
programiranje nije za svakoga i zato možemo koristiti Behaviour opcije.
Instalacija Dreamweavera dolazi sa dosta predinstaliranih ponašanja (engl. Behaviors) koje
možemo da koristimo kako bismo uneli Client Side Java Script kod u dokument. Većina ovih
skripata dozvoljava korisniku da interaguje sa sadržajem na stranici. Behaviors su tipično
sastavljeni od dogañaja i akcija koje pokreću te dogañaje.
Behaviors se mogu dodati na web stranicu koristeći Behaviors podpanel. Svi imaju svoj
dijalog koji nas vodi kroz proces unosa potrebnih podataka. Behaviours opcije se nalaze
unutar tag Inspector panela i pozivamo ih klikom na Behaviours dugme.
Behaviours opcije u okviru tag Inspector panela
Behaviors panel postaje aktivan kada imamo otvoren dokument u prozoru radnog prostora.
Da bismo saznali nešto više o već primenjenim ponašanjima, selektovaćemo element ili tag
na koji je primenjen Behavior na stranici, i on će se pojaviti u listingu Behaviors podpanela.
Copyright © Link group
Kada se dogañaj sastoji od više akcija, one su izazvane prema redu u kome se nalaze na
listi. Obično su Behaviors pridodati tagovima za tekst, slike, ali možemo i da ih primenimo
na <body> elemente, linkove, polja formulara i tako dalje.
Meni akcija u Bahaviors panelu se dobija klikom na + dugme. Tada će se izlistati sva
presetovana ponašanja.
Dodavanje Behaviours opcija
Koja će ponašanja biti dostupna, a koja nedostupna zavisi od toga koji objekat ili element
na stranici je selektovan pre nego što kliknemo na + dugme.
Kako se dodaje Behavior (ponašanje)?
Dodavanje Behaviora elementu u Dreamweaveru je prilično jednostavno i sastoji se iz
nekoliko koraka. Najkraće rečeno, selektujemo objekat ili tekst na stranici, izaberemo
Behavior u panelu, popunimo polja u dijalogu tog Behaviora koji smo izabrali i proverimo da
li Event Hendler odgovara našim potrebama.
Copyright © Link group
Editovanje i brisanje Behaviora se vrši u Behaviors podpanelu desnim klikom miša na
Behavior.
Izmena i brisanje Behaviour unosa
Copyright © Link group
22. Rad sa kodom
Code Inspector
Code Inspector možemo otvoriti tako što ćemo izabrati Windows > Code Inspector iz
padajućih menija ili prečicom F10 sa tastature. Code Inspector omogućava prikaz i izmene
koda trenutne stranice u posebnom prozoru. Code Inspector je praktično potpuno isti kao
Code (ili split) prikaz. Može biti koristan ukoliko radimo u Design prikazu i želimo da nešto
brzo promenimo u kodu.
Code Inspector
•
•
•
•
•
•
File Management – Opcije vezane za PUT/GET i ostale funkcije File Managementa
Preview/Debug In Browser – Pokretanje browsera i otvaranje u browseru
Refresh Design View – Osvežava design prikaz kako bi izmene koje smo uneli u
kod bile vidljive
Reference – Otvara Reference panel sa objašnjenjima trenutnog dela koda, ukoliko
je pomoć dostupna.
Code Navigation – Omogućava lakšu navigaciju.
View Options – Opcije vezane za način prikaza koda:
o Word Wrap – Prelama dugačke linije koda u prikazu. Ne dodaje nove redove
i slično, već ih samo tako prikazuje. U suprotnom, redovi idu u svojoj punoj
dužini i eventualno se pojavljuje horizontalni skrol.
o Line Numbers – Ova opcija uključuje/isključuje prikaz broja linija.
o Hidden Characters – Prikazuje oznake skrivenih karaktera (poput oznake za
razmak, paragraf i sl.)
o Highlight Invalid Code – Ukoliko je uključeno, žutom bojom označava
neispravan kod.
Copyright © Link group
o
o
Syntax Coloring – Opcija koja boji kod radi lakšeg vizuelnog raspoznavanja.
Auto Indent – Postavlja automatsko uvlačenje redova po pritisku na Enter.
Coding Toolbar
Po default podešavanjima, Coding Toolbar je prikazan na levoj strani dokumenta u Code
prikazu stranice. Takoñe je dostupan u Code Inspectoru i nalazi se isto na levoj strani
prozora. Jedna specifičnost u vezi sa njim jeste ta da se ne može otkačiti i premestiti na
neko drugo mesto, ali se može isključiti i prema potrebi uključiti ponovo, putem opcije View
> Toolbars > Coding.
U Coding Toolbaru postoje sledeće opcije:
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Open Documents - Kada kliknemo na ovo dugme, izlistaće se svi trenutno otvoreni
dokumenti, zajedno sa njihovim putanjama. Ovo je korisna opcija ako imamo više
otvorenih fajlova sa istim imenom, pa preko putanje možemo lako odrediti koji je
koji. Klikom na neki od njih, on postaje aktivan.
Show Code Navigator - Ova opcija prikazuje Code Navigator koji se koristi za
prikazivanje liste CSS pravila koja su primenjena na selektovani element na stranici,
zajedno sa detaljnim kodom u vidu pop-up prozora.
Collapse Full Tag - Ova opcija selektuje blok koda u kome se trenutno nalazi kursor
i kolapsira sav kod koji je u njemu. Ne vrše se nikakve izmene, samo se prikaz
menja. Možemo opet vratiti kod na normalan prikaz, klikom na plus ikonicu levo od
kolapsiranog koda.
Collapse Selection - Ova opcija kolapsira selektovani deo.
Expand All - Klikom na ovu opciju proširujemo sve kolapsirane sekcije.
Select Parent Tag - Ova opcija selektuje Parent tag trenutno selektovanog
elementa ili elementa, gde god je kursor trenutno lociran.
Balance Braces - Ova opcija selektuje ceo kod koji se nalazi unutar zagrada,
vitičastih zagrada i ugaonih zagrada.
Line Numbers - Ova opcija uključuje/isključuje prikaz broja linija.
Highlight Invalid Code - Ukoliko je uključeno, žutom bojom označava neispravan
kod.
Syntax Error Alerts - Ova opcija prikazuje greške u Java Script kodu u vidu žute
trake na vrhu prozora dokumenta. Ovo dugme uključuje/isključuje ovu opciju. Ne
postoji u toolbaru code inspectora i to je jedina razlika ovog toolbara u code prikazu i
code inspectoru.
Apply Comment Tag - Ova opcija omogućava unos različitih tipova komentara u
tekuću liniju ili selekciju.
Remove Comment Tag - Pomoću ove opcije uklanjaju se uneseni komentari iz
tekuće linije ili selekcije.
Wrap Tag - Ova opcija omogućava brz način za primenu taga oko tekuće selekcije.
Recent Snippets - Ovde se prikazuju svi poslednje korišćeni Snippeti iz Snippets
panela.
Move or Convert CSS - Ova opcija omogućava brzo prebacivanje CSS pravila u CSS
fajl.
Indent Code - Ova opcija uvlači kod. Tab dugme ima istu ulogu.
Outdent Code - Ova opcija je suprotna prethodnoj, pomera kod ulevo, smanjuje
uvlačenje (Shift + Tab).
Format Source Code - Klikom na ovo dugme, otvara se meni sa opcijama pomoću
kojih možemo da primenimo default formatiranje na stranicu ili trenutno selektovan
Copyright © Link group
kod, zatim omogućava brz pristup kategoriji Code Format u Preferences panelu. Tag
Library Editor omogućava kontrolu nad formatiranjem svakog HTML elementa u
kodu.
Coding toolbar u Code prikazu i u Code Inspectoru
Code Hint
Po default podešavanjima Dreamweaver prikazuje content-sensitive code sugestije
(hintove) u Code prikazu. Na primer, ako krenemo da otvaramo ugaonu zagradu posle
otvorenog <body> taga, otvoriće se pop-up meni i prikazaće sve validne HTML tagove.
Možemo skrolovati dole kako bismo pronašli odgovarajući tag i dvoklikom na njega uneti ga
Copyright © Link group
u kod dokumenta. Druga opcija je da nastavimo sa kucanjem. Na primer, ako unosimo div
tag, ukucaćemo slovo d zatim i, i DW će nam sam selektovati div u meniju. Dovoljno je da
pritisnemo Enter na tastaturi i tag će biti unesen u dokument.
Kada pritisnemo Space bar na tastaturi, otvoriće se drugi Context meni, samo što će ovog
puta prikazati sve validne atribute za tekući element, jer je logično da tu unosimo atribute.
Ako unosimo ID element, DW će uneti id="" i postaviti kursor izmeñu znaka navoda kako
bismo uneli vrednost za ID. Ako unosimo klasu koja je već definisana u CSS-u,
Dreamweaver će automatski prikazati sve dostupne klase koje možemo izabrati. Context
meni nastavlja da se pojavljuje sve dok ne zatvorimo ugaonu zagradu. Ako se slučajno ovaj
meni izgubi, pritisnućemo Ctrl + Spacebar da bi se opet pojavio.
Coding Hint
Copyright © Link group
Rad sa sajtovima
Izveštaji
Jedan od vrlo bitnih aspekata sajta koji se često zanemaruje je održavanje nakon što sajt
postavimo na server i pošto zaživi. Male greške koje smo prevideli u razvoju mogu (i
sigurno će) postati veliki problemi. Zato bi trebalo da se trudimo da minimizujemo
mogućnost grešaka, a pomoć nam može pružiti sam Dreamweaver.
Iz padajućih menija otvorićemo opciju Window > Results > Site reports, kako bismo
pozvali Site reports panel. U startu je ovaj panel prazan. Pošto pokrenemo kreiranje
izveštaja (report), DW će ovaj panel popuniti izveštajem o greškama, upozorenjima i tako
dalje. Za početak, potrebno je da kliknemo na ikonicu zelenog trougla (play taster) koja se
nalazi u levom gornjem uglu panela, odmah ispod naziva.
Site reports panel
Pošto pokrenemo kreiranje izveštaja, DW će na početku prikazati dijalog u kome je
potrebno da izaberemo oblast i šta želimo od podataka u našem izveštaju.
Copyright © Link group
Podešavanje izveštaja
Na vrhu dijaloga je polje Report on: u kome biramo oblast izveštaja. Podešavanja mogu
biti:
• Current Document – Ograničava oblast izveštaja samo na tekući, otvoreni
dokument.
• Entire Current Local Site – Oblast izveštaja će biti ceo lokalni sajt, odnosno sve
stranice u okviru njega. Nije potrebno da budu otvorene.
• Selected Files in Site – Izveštajem će biti obuhvaćeni samo izabrani fajlovi pre
pokretanja ovog dijaloga.
• Folder – Pojavljuje se dodatno polje u kome biramo sami folder za oblast izveštaja.
Preporuka je da se postavi opcija koja obuhvata ceo lokalni sajt.
U donjem delu po nazivom Select reports: biramo koje uzveštaje želimo. Podešavanja za
workflow nam nisu toliko bitna, ali ih možemo koristiti za opšte informacije o sajtu. Nas
zanima HTML Reports grupa u kojoj postoje sledeće stavke:
•
•
•
•
•
Combinable Nested Font Tags – Nalazi i prikazuje u izveštaju sve višestruke
<font> tagove koji se mogu iskombinovati. Ovo je domen HTML sitilizacije koju
(nadam se) nećete koristiti, pošto je mnogo lakše i bolje koristiti CSS za istu
namenu.
Missing Alt Text – U izveštaju nalazi i prikazuje slike koje ne poseduju Alt tekst.
Redundant Nested Tags – U izveštaju nalazi i prikazuje nepotrebne tagove. Na
primer, dvostruke <b> tagove.
Removable Empty Tags – U izveštaju nalazi i prikazuje prazne tagove koje
možemo ukloniti.
Untitled Documents - U izveštaju nalazi i prikazuje sve stranice koje imaju default
naslov ili ga uopšte nemaju.
Copyright © Link group
Pošto kliknemo na dugme Run i kada DW završi izveštaje, u panelu Site reports će se
pojaviti eventualne greške.
Izveštaj sa prikazanim greškama
U stavkama vidimo o kom je dokumentu reč (file), na kom redu u kodu se nalazi greška
(line) i opis greške (Description).
U opcijama sa leve strane nalaze se tri ikonice pored one koju smo koristili. Možemo izabrati
više informacija o selektovanom redu ili snimiti izveštaj kao fajl. Opcija koja nije dostupna
služi za zaustavljanje kreiranja izveštaja, ako taj proces potraje (kod velikih sajtova).
Dvoklikom na red (grešku) u panelu DW će otvoriti dotični fajl (ako već nije otvoren) i
postaviti kursor tačno na grešku kako je možemo ispraviti. Važno je zapamtiti da DW neće
ukloniti grešku automatski iz panela pošto je ispravimo i snimimo fajl. Tek kada ponovo
uradimo izveštaj videćemo promene.
Provera linkova
Tokom rada na sajtu velika je verovatnoća da smo postavili veliki broj linkova. Neki od njih
su linkovi izmeñu strana, neki su putanje do slika, putanje do CSS fajlova i tako dalje.
Često se može desiti da u toj gomili linkova neki pogrešno unesemo, bilo zbog žurbe, bilo
zbog menjanja imena fajlova i foldera van DW-a ili slično. Za proveru linkova možemo
koristiti Link checker panel koji možemo uključiti opcijom Window > Results > Link
checker iz padajućih menija.
Link checker panel
Copyright © Link group
U opciji Show možemo izabrati vrstu linkova koje želimo da proverimo.
•
•
•
Broken links – Proverava za loše postavljene linkove, na strani i u sajtu.
External links – Proverava za loše eksterne linkove, ka lokacijama na internetu.
Potrebna je internet konekcija za ovu proveru.
Orphaned files – Prikazuje sve fajlove koji nisu povezani unutar sajta. Takvi fajlovi
će praktično biti nedostupni korisniku jer ne mogu doći do njih.
Pošto kliknemo na ikonicu trougla, ponudiće nam u padajućem meniju oblast skeniranja, da
li će biti samo na toj stranici, na svim stranama sajta ili samo na izabranim.
Kada dobijemo rezultate možemo iz same liste menjati linkove i ovde će stavke automatski
nestajati pošto se isprave, za razliku od izveštaja.
Provera kompatibilnosti sa browserima
Izveštaj kompatibilnosti sajta sa raznim pregledačima (Browser Compatibility Report)
podrazumeva testiranje naših HTML i CSS dokumenata i pronalaženje tagova ili atributa koji
su nedozvoljeni i/ili nepodržani od strane ciljanih browsera (kao, na primer, height atribut
<table> taga u Firefoxu 1, Netscape 7 i 8). Ova vrsta testiranja je drugačija od pregleda
stranice u browseru koji pokazuje samo kako će stranica izgledati.
Ovaj izveštaj možemo pozvati iz njegovog panela, slično kao kod prethodnih klikom na
zeleni trougao i izborom check browser compatibility opcije. Panel browser compatibility
možemo uključiti iz padajućeg menija Window > Results > Browser Compatibility.
U izveštaju možemo videti potencijalne probleme sa browserima. Klikom na neku stavku,
desno se prikazuje opis, na koji se browser odnosi i koja je verovatnoća manifestovanja.
Trebalo bi biti oprezan jer mnogo izlistanih grešaka mogu biti minorni i nerelevanti problemi
i modernim browserima. Desnim klikom na neku stavku možemo označiti da je DW ignoriše
i neće se više pojavljivati.
Browser compatibility
Copyright © Link group
Iz panel menija ovog panela ili iz menija koji pozivamo desnim klikom miša negde unutar
panela možemo izabrati opciju Settings.. u čijem dijalogu definišemo za koje browsere i
njihove verzije želimo da uradimo proveru.
Izbor browsera za proveru (sa preporučenim podešavanjima)
Definisanje udaljenog servera
Kada završimo sajt, potrebno je iskopirati ga na udaljeni server na kome će biti dostupan
putem interneta. Samo kopiranje svih fajlova iz lokalnog foldera u udaljeni možemo učiniti
putem bilo kog FTP/SFTP menadžera fajlova (kao što su Total Commander, WinSCP i sl.) ali
isto tako i kroz Dreamweaver. Povezivanje i sinhronizacija lokalnog i udaljenog foldera kroz
DW ima mnoge prednosti, jer možemo pratiti izmenjene fajlove, automatski prebacivati i
tako dalje.
Na početku kursa smo se bavili definisanjem lokalnog sajta, ali smo ove opcije vezane za
servere izostavili do sada. Dijalogu kojim podešavamo definiciju sajta možemo pristupiti
putem padajućih menija Site > Manage Sites..., putem application bara i opcije site ili iz
padajućeg menija files panela gde biramo poslednju opciju Manage Sites. U svakom
slučaju, pošto otvorimo manage sites dijalog, selektovaćemo željeni sajt, ukoliko već nije i
izabrati edit.
Copyright © Link group
Site setup dijalog – izabrana servers kategorija
Sada ćemo se baviti Servers kategorijom dijaloga za upravljanjem sajtom. Lista servera je
prazna, jer do sada nismo definisali nijedan, a možemo ih definisati jedan ili više.
Primetićemo četiri opcije, ikonice, u donjem levom uglu. To su (sleva):
•
•
•
•
Add new Server – Dodavanje novog servera
Delete Server – Brisanje servera
Edit existing Server – Izmena postojećeg servera
Duplicate existing Server – Dupliranje postojećeg servera.
Razumljivo, sve osim prve su trenutno nedostupne. Izabraćemo ikonicu znaka + kako bismo
dodali novi server. Pojaviće se sledeći dijalog:
Copyright © Link group
Postoje dve grupe podešavanja, Basic i Advanced, koja možemo izabrati na vrhu i dijalog
će se promeniti. Ukoliko postavljamo udaljeni server koji će služiti za živi (live) sajt
potrebno je da imamo pri sebi parametre koje nam je dostavila hosting kompanija kada
smo zakupili hosting ili parametre našeg servera ukoliko ga posedujemo.
Basic podešavanja servera su:
• Server name - Unosimo željeno ime servera koji kreiramo. Može biti bilo šta, ali
preporuka je da se unosi smisleno ime. Na primer, live server, test server i tako
dalje (ne moramo označavati koji je sajt u pitanju jer serveri se kreiraju posebno za
svaki sajt).
• Connect using – Biramo iz padajućeg menija koji ćemo tip konekcije ka serveru
upotrebiti. Može biti FTP, FTPS(samo CS5.5), SFTP, Local/Netowork, WebDAV ili RDS.
Ovaj parametar podešavamo na osnovu parametra udaljenog servera, odnosno koji
tip konekcije podržava. Uglavnom je FTP. Local/Network koristimo kad pristupamo
serveru putem lokalne mreže (u tom slučaju se broj opcija dijaloga smanjuje).
• FTP Address, Username i Password parametre unosimo kako smo ih dobili.
• Test – Pošto unesemo prethodna polja, dugme test će postati dostupno. Klikom na
njega pokrećemo testiranje veze sa serverom i ako su uneti parametri tačni i
pravilno uneti, DW će nas obavestiti da se uspešno povezao sa serverom:
Copyright © Link group
•
•
Root directory – Podešavamo osnovni folder unutar servera. Često root folder
našeg sajta nije i root folder servera. Ukoliko niste sigurni, za početak ostavite
prazno.
Web URL – Ovaj parametar će DW sam popuniti pošto se povežemo sa serverom,
ali, ako želimo, možemo ga i sami uneti u formatu http://www.mojsajt.com/
U advanced podešavanjima važne su dve opcije: Maintain synchronization information,
pomoću koje postavljamo da DW prati sve promene na fajlovima izmeñu lokalnih i udaljenih
fajlova. Po default podešavanjima je uključena i preporuka je da se ostavi tako. Druga je
Automatically upload files to server on Save i ako je uključena svi fajlovi će se
automatski kopirati na server po snimanju. Može biti opasna ako imamo definisan živ
server, a isprobavamo razne opcije na lokalu. Tako nesvesno možemo "srušiti" sajt na
internetu.
Prenos fajlova
Pošto definišemo udaljeni server, u files panelu su nam bitne odreñene opcije koje do sada
nismo koristili. Pored padajućeg menija u kome biramo sajt, nalazi se Site View meni koji
nam omogućava prebacivanje u četiri moguća prikaza:
•
•
•
•
Local - Selektujemo ovaj prikaz kako bismo videli strukturu sajta u Files panelu.
Remote - Selektujemo ovu opciju kako bismo videli strukturu fajlova i foldera
udaljenog servera.
Testing server - Ova opcija je dostupna ako smo podesili testing server i lista sve
foldere i fajlove koji se nalaze na testing serveru.
Repository - Ova opcija prikazuje fajlove i foldere u skladištu kada radimo sa
Subversion control sistemom.
Opcije koje se nalaze neposredno ispod u vidu ikonica su:
•
•
•
Connect/Disconnect - Ova opcija omogućava konektovanje/diskonektovanje sa
udaljenim serverom. Ako je FTP konekcija, DW se sam diskonektuje posle 30 minuta
neaktivnosti. Idle time (vreme neaktivnosti) možemo podesiti u Preferences panelu,
kategorija Site.
Refresh - Ova opcija osvežava i lokalne i udaljene fajlove.
Get Files - Preuzimanje kopija selektovanih fajlova i foldera sa udaljenog servera u
lokalni root folder. Svi fajlovi koji su postojali u lokalnom Files panelu će biti
prekopirani za vreme ovog procesa.
Copyright © Link group
•
•
•
•
•
Put Files - Ova opcija postavlja kopije selektovanih fajlova i foldera iz files panela
lokalnog sajta na udaljeni server ili testing server. Fajlovi sa istim imenom na
serveru bivaju prekopirani sa novijom verzijom iz lokalnog sajta.
Check Out Files - Ova opcija je dostupna samo kada koristimo Check In/Check Out
sistem. Klikom na ovo dugme preuzimamo kopiju selektovanog fajla sa remote
servera na lokalni sajt. Ako ovaj fajl već postoji u lokalnom sajtu, ova opcija će
prekopirati lokalnu verziju fajla. Kada je fajl kopiran u lokalni sajt, fajl na serveru je
markiran kao Checked out i mala zelena Check Mark ikonica će se pojaviti pored
imena fajla u Files panelu.
Check In Files - Ova opcija je takoñe dostupna samo kada koristimo Check
In/Check Out sistem. Klikom na ovo dugme postavljamo kopiju selektovanog fajla sa
lokalnog sajta na remote server. Kada je fajl kopiran, fajl u lokalnom folderu je
markiran kao Checked In i mala katanac ikonica će se pojaviti pored imena fajla u
Files panelu kao indikacija da fajl ima Read-Only status.
Synchronize - Ovo dugme omogućava pokretanje procesa sinhronizacije.
Expand/Collapse - Ova opcija prebacuje Files panel iz kolapsiranog u prošireni
prikaz i obratno. Prošireni prikaz je pregledniji kada radimo sa fajlovima. U Extend
načinu rada se pojavljuje i ceo red opcija na vrhu panela koje pomažu u transferu
fajlova sa remote servera i na remote server. Na Windows sistemima prošireni prikaz
zauzima ceo ekran, a na Mac sistemima "pluta" iznad.
Sinhronizacija
Pošto izaberemo opciju Synchronize možemo izabrati da li želimo sinhronizovati ceo sajt ili
samo odreñene fajlove. Pored toga imaćemo izbor:
•
•
•
Put Newer Files To Remote – Kopira lokalne fajlove koji ne postoje na serveru (ili
one koji su noviji od istih) na server.
Get Newer Files From Remote - Kopira udaljene fajlove koji ne postoje na lokalu
(ili one koji su noviji od istih) na lokal.
Get And Put Newer Files – Kopira novije verzije fajlova sa udaljenog servera, kao i
na udaljeni server.
Copyright © Link group
Download

1. Uvod - Index of