web dizajn autor: velja milanović · pdf file odrednica 1 opis odrednice 1 ... da bi se...

WEB DIZAJN

Velimir Milanović, prof.

Lazarevac 2014.

WEB dizajn autor: Velja Milanović

2

2014

1. Internet programiranje - HTML

HTML (HyperText Markup Language) je veoma jednostavan jezik koji služi za izvršavanje programa na daljinu. HTML stranice imaju ekstenziju .html ili .htm, a nalaze se u određenom direktorijumu servera vezanog na Internet, što ih čini dostupnim na web-u. Pomoću HTML jezika se generišu dokumenti tipa hipertekst. Hipertekst je, tekst koji sadrže veze ili linkove ka drugim dokumentima ili na samog sebe. Hipertekst je skup stranica , međusobno povezanih linkovima koje su umetnute u stranice. Na ove linkove se može kliknuti. Za razliku od običnog teksta, koji se čita linearno (sleva na desno, odozgo naniže), hipertekst se čita prateći hiper-veze u tekstu, dakle, ne nužno na linearan način. Za generisanje HTML stranice potreban je najobičniji tekst editor, na primer Notepad. Mogu se koristiti i specijalni alati, na primer Front Page, Dremweaver, Joomla… . Stranica se može videti u okviru Web browser-a, Internet Explorer, Mozilla Firefox-a Opera, Safari…

HTML komande se pišu u vidu tzv. TAG- ova. Jedan tag je ustvari komanda koja govori browseru šta

i kako da uradi tj. na koji način da prikaže sadržaj vaše stranice. HTML tagovi su "case insensitive" tj. svejedno je da li se pišu malim ili velikim slovima. Tagovi se pišu unutar oznaka "<" i ">" (bez znakova navoda) npr: <html>. Ovaj tag se nalazi na početku svakog HTML dokumenta. Tag govori browseru da je fajl koji je upravo počeo da učitava HTML dokument i da kao takvog treba i da ga prikaže. Na kraj HTML dokumenta se stavlja završni HTML tag: </html>. Ovaj tag govori browseru da je to kraj HTML dokumenta. Većina tagova ima i početni i završni tag. Završni tag se dobija dodavanjem znaka "/" i označava mesto na kom prestaje dejstvo početnog taga.

Minimalna struktura HTML-dokumenta obuhvata tagove:

<HTML>, </HTML> - zagrade HTML-teksta;

<HEAD>, </HEAD> - zagrade zaglavlja, sadrži meta- definicije HTML-dokumenta;

<TITLE>, </TITLE> - zagrade za naziv HTML- dokumenta i

<BODY>, </BODY> - zagrade teksta obeleženog dokumenta.

Svaki HTML dokument se sastoji od dva dela:

zaglavlja (engl. head) i

tela (engl. body).

Zaglavlje se odvaja tagovima <head> i </head>, a telo dokumenta tagovima: <body> i </body>. Sve ono što se napiše u zaglavlju dokumenta neće se prikazati u prozoru browsera već obično služi samo da pruži neke informacije o stranici. Sve ono što je napisano između tagova <body> i </body> predstavlja telo dokumenta, pojaviće se kao sadržaj prezentacije u prozoru browsera.

<html>

3

2014

<head> <title> ovde je naziv prezentacije </title> </head> <body> ovde se unosi sve ono sto zelite da se vidi u prezentaciji </body> </html>

Dodatna opcija omogućava da se obeleži komentar u HTML-obeleženom tekstu koji se neće videti u vizuelizaciji dokumenta.



1.1. Osnovni markeri html-a

Otvoriti Notepad dokument i kreirati sledeći sadržaj:

<html> <head><title> moja web stranica</title></head> <body> zdravo svete!!!!!!! </body> </html>

Sačuvati ovaj document pod nazivom vežba1.htm. Zatim otvoriti program Interent Explorer ili Mozilla Firefox. Otići na opciju “File”-> “Open” i otovriti fajl “vežba1.htm” sa lokacije gde je sačuvan. Zapaziti da je web stranica koja je ovako kreirana sa naslovom (na vrhu) “Moja web stranica”. Stranica više nije prazna već u njoj postoji tekst koji smo ukucali (npr: “Zdravo svete!!!!!!! ” ).

P marker:

Ovo je marker za formiranje paragraf. Oznake su sledeće: <P> - za početak markera </P> - za završetak markera mada ovaj deo nije obavezan

Hx marker:

Ovo je marker za formiranje veličine slova. Postoji 6 nivoa velicine slova od H1 do H6 ( dakle x moze biti 1, 2,…6). Najveća slova su sa velicinom H1. Oznake su sledeće: <Hx> za početak markera </Hx> za završetak markera

B marker:

Ovo je marker za potamnjivanje (podebljavanje) slova. Oznake su sledeće: <B> za početak markera </B> za završetak markera

I marker:

Ovo je marker za formiranje kurzivnih (italic) slova. <I> - za početak markera </I> - za završetak markera


4

2014

BR marker:

Ovaj marker služi za prekid teksta i prebacivnje u novi red. <BR> - za početak markera( za završetak se ne koristi )

Center marker:

Ovaj marker služi za centriranje sadržaja koji se nalazi izmedju makera za početak <center> i markera za kraj </center>.

Vežba 1:

<html> <head><title> naslov moje web strane</title></head> <body> ovo je telo texta. <p>zatim pocinjem novi pasus <h1><b> debela i velika slova </b></h1> <h5><b> kurziv manja slova </i></h5> <p> nastavljam dalje i prelamam <br> text </br> <p> <centar> stavljam text u centar </centar> <p> <p> napravio sam dva razmaka i <br>završavam </br><p><i> vežbu prelomom <br>texta italik</br> </i> </body> <html>

UL marker:

Ovaj marker sluzi za formiranje NENUMERISANE liste elemenata. Ovi elementi na web stranici dobijaju takav izgled da ispred svakog od njih stoji tačka i poređani su jedan ispod drugog. Ovaj marker se uvek koristi zajedno sa drugime markerom LI o kome će biti više reči u nastavku. <UL> - za početak markera </UL> - za završetak markera

LI marker:

Ovaj marker se koristi zajedno sa markerima za NENUMERISANU ili NUMERISANU listu. Njegov zadatak je da istakne svaki od elemenata. <LI> - za početak markera </LI> za završetak markera ( nije obavezan)

OL marker:

Ovaj marker služi za formiranje NUMERISANE liste elemenata. Ovi elementi na web stranici dobijaju takav izgled da je ispred svakog od njih redni broj i poredjani su jedan ispod drugog. Ovaj marker se uvek koristi zajedno sa marekerom LI. <OL> - za početak markera </OL> - za završetak markera

Definicione liste

Ovaj oblik liste se dobija sa <dl> tagom. Svaka stavka ovakve liste se sastoji iz dva dela: termina


5

2014

koji se definiše i njegove definicije. Termini zapocinju <dt> tagom, a njihove definicije <dd> tagom. Termini se poravnavaju uz levu marginu a njihove definicije se pojavljuju u novom redu i pomerene su za određen broj mesta. Opšta stuktura je: <DL> <DT> odrednica 1 <DD> opis odrednice 1 <DT> odrednica 2 <DD> opis odrednice 2 . . . . . </DL> Primer za ovu vrstu listi je: Prolece: traje od 21. marta do 21. juna. Leto: traje od 21. juna do 21. septembra. Jesen: traje od 21. septembra do 21. decembra. Zima: traje od 21. decembra do 21. marta. HTML kod za prethodni primer je:

<dl> <dt>Prolece: <dd>traje od 21. marta do 21. juna. <dt>Leto: <dd>traje od 21. juna do 21. septembra. <dt>Jesen: <dd>traje od 21. septembra do 21. decembra. <dt>Zima: <dd>traje od 21. decembra do 21. marta. </dl>

Vežba 2: Primer opisne liste

<html> <head> <title> opisne liste <title> </head> <body> <dl> <dt> piko- <dd> prefiks nekoj jedinici koja pokazuje milioniti deo milionitog dela te jedinice; <dt>nano- <dd> prefiks nekoj jedinici koji pokazuje milijarditi deo te jedinice; </dl> </body> </html>

Lista unutar liste

Unutar neke liste može se definisati nova lista. Na primer:


6

2014

<ul> <li> a few new england states: <ul>

<li> vermont <li> new hampshire <li> maine

</ul> <li> two midwestern states: <ul>

<li> michigan <li> indiana

</ul> </ul>

Boje i HTML

Svi elementi stranice rad sa bojama organizuju identično: o Preko predefinisanog engleskog naziva boje (npr. "yellow" za žutu boju) o Ili preko heksadecimalne RGB vrednosti ispred koje obavezno treba staviti simbol # (npr. #ffff00)

Boja pozadine se određuje atributom bgcolor u okviru <BODY> taga. U slučaju da se prilikom navođenja taga BODY izostave opisani atributi, čitač im dodeljuje predefinisane vrednosti. Na primer ako želite žutu pozadinu tada <BODY> tag treba da glasi: <body bgcolor="#ffff00"> ili <body bgcolor="yellow">

Pored pozadine, može se menjati i boja teksta, pomoću atributa text. <body bgcolor="#ffff00" text="#008000"> ili <body bgcolor="#ffff00" text="green"> ili <body bgcolor="yellow" text="#008000"> ili <body bgcolor="yellow" text="green">

Kao promena boje, pozadina u obliku slike se definiše pomoću odgovarajućeg atributa u BODY tagu. Atribut je u ovom slučaju background.

Na primer, ako se želi da se kao pozadina stavi slika "pozadina1.jpg" tada će odgovarajući tag izgledati:

<body background="pozadina1.jpg"> Pri definisanju pozadine u obliku slike, dobra praksa je da se definiše i bgcolor atribut. <body background="pozadina1.jpg" bgcolor="#0000ff">

FONT marker:

Ovaj marker omogućava da se pomoću atributa definiše font koji želimo da koristimo, njegova veličina, kao i boja. Sastoji se iz početka koji izgleda kao npr: <font color=”blue” size=”5” face=”helvetica”> i kraja </font> Kompletna informacija koja se stavi u ovom slucaju između početka i kraja bila bi napisana fontom “Helvetica” veličine 5, a boja tog teksta bi bila plava.

Vežba 3: <html> <title> moja prva web stranica</title>


7

2014

<body> <font color=”blue” size=”5” face=”helvetica”> <ol> <li> fudbal <li> košarka <li> ragbi <li> tenis </ol> </font> </body> </html>

IMG tag:

U okviru HTML stranice slika se prikazuje pomoću <IMG> taga. Ovaj tag mora imati bar jedan atribut src atribut koji definiše naziv, i eventualno lokaciju, grafičkog fajla koji se želi prikazati u okviru stranice.

<img src="slika.gif">

left - postavlja sliku uz levu marginu: <img src="slika.gif" align="left"> right - postavlja sliku uz desnu marginu: <img src=" slika.gif" align="right"> top - poravnava sliku sa vrhom slova u tekućoj liniji: <img src=" slika.gif" align="top"> bottom - poravnava sliku sa donjom ivicom slova: <img src=" slika.gif" align="bottom"> middle - postavlja sliku tako je donja ivica slova na sredini slike: <img src=" slika.gif"

align="middle"> absmiddle - postavlja sliku tako da se sredina slike i sredina slova poklapaju:

<img src=" slika.gif" align="absmiddle">

Da bi se promenila originalna veličina slike, željena veličina se može definisati pomoću dva atributa: height i width. <img src=" slika.gif" height="50%“ width="50%">

U okviru stranice može se definisati i debljina granice pomoću atributa border čija se vrednost zadaje u pikselima.

<img src=" slika.gif" border="5"> Alt atribut će u slučaju da čitač korisnika stranice iz bilo kog razloga ne učita sliku, na onom mestu gde bi trebalo da bude slika prikazati tekst koji predstavlja vrednost ovog atributa.

<img src=" slika.gif" alt="Broj osam">

Linkovi

Veze između različitih stranica se nazivaju linkovi ili hiperveze. One omogućavaju jednostavan prelazak sa jednog mesta na stranici na drugo mesto unutar same stranice ili na sasvim novoj stranici. Linkovi koji se mogu definisati u okviru jedne HTML stranice mogu se podeliti na tri grupe:

krajnja pozicija se nalazi na stranici koja je u okviru iste aplikacije i nalazi se na istom serveru gde i stranica sa polaznom pozicijom,

krajnja pozicija se nalazi na stranici koja ne pripada istoj aplikaciji, već se nalazi na drugom serveru,

krajnja pozicija pripada istoj stranici kao i polazna pozicija

Za sve linkove definicija početne pozicije se dobija korišćenjem taga <A>. Opšti izgled ovog taga je:

<A atribut> ... </A>.


8

2014

Sintaksa ovog taga podrazumeva da se u okviru polazne pozicije opišu: fizička pozicija polazne pozicije i fizička lokacija krajnje pozicije.

Polazna pozicija označava na stranici mesto sa koga se prelazi na neki drugi deo stranice i definiše se pomoću atributa href:

<A HREF= adresa krajnje pozicije> polazna pozicija sa koje se prelazi na krajnju </A>

Link na stranicu u okviru istog servera. Najjednostavniji slučaj rada sa linkovima je prelazak na stranicu u okviru istog servera. Kod ove vrste linkova koristi se tag <A> sa atributom href i nazivom stranice do koje se želi da se napravi veza.

<a href="Prva.html"> Veza do stranice Prva.html </a>

Da bi se pristupilo stranici izvan servera potrebno je navesti celu web adresu te stranice. Opšti oblik adrese koja se pojavljuje kao vrednost href atributa je:

<a href="http://www. etf.bg.ac.yu/"> Link ka Elektrotehnickom fakultetu </a>

Link na istu stranicu

Za ovu vrstu linkova prvo se napravi oznaka na mestu na stranici gde se nalazi krajnja pozicijia. Oznaka se dobija pomoću atributa name u <A> tagu:

<A NAME= ime_krajnje_pozicije> tekst krajnje pozicije sa koje se prelazi iz polazne pozicije </A>

na polaznoj poziciji navodi se tag sa imenom krajnje pozicije:

<A HREF="#ime_krajnje_pozicije"> tekst polazne pozicije </A>

na krajnjoj poziciji se navodi tag koji definiše ime krajnje pozicije:

<A NAME= " ime_krajnje_pozicije "> tekst krajnje pozicije </A>

<html> <head><title> link u okviru iste stranice</title></head> <h2>programiranja </h2> <ol> <li> <a href="#html"> web i jezik html </a> ; <li> <a href="#java"> programski jezik java </a> <li> <a href="#uvodc"> uvod u c</a> </ol> <h3> <a name="html"> web i jezik html</a> </h3> <p><br></p> <p><br> </p> <p><br> </p> <h3> <a name="java"> programski jezik java </a> </h3> <p><br> </p> <p><b</p> <p><br> </p> <h3> <a name="uvodc"> uvod u c </a> </h3> <p><br></p><p><br></p><p><br></p></ul> </body> </html>

Slika kao link

Slika u HTML dokumentu može predstavljati i polazni čvor u hipervezi. Dolazna adresa se tada navodi kao kod običnog linka, a umesto teksta koji se može aktivirati navodi se tag IMG.


9

2014

<A HREF="URL dolazne datoteke"> "tag IMG za željenu sliku"</A>

<a href="Primer.html"><img src="slika.gif"></a>

Link za elektronsku poštu

Linkovi se mogu iskoristiti i za pisanje nove mail poruke pomoću default programa za elektronsku poštu

<a href="mailto: [email protected]"> Posaljite e-mail poruku! </a>

TABLE marker:

Ovaj marker se koristi za formiranje tabela na web stranicama.

<table> - oznaka za početak markera </table> - oznaka za kraj markera.

U početni deo markera <table> mogu se smestiti različiti atributi, a najčešće se koriste sledeća tri:

border – označava granice izmedju polja odnosno širinu granice izmedju polja u pikselima:

cellpaddding – koristi se za širinu polja u tabeli

cellspacing – koristi se za širinu prostora izmedju polja;

Primer markera sa svim gore navedenim atributima bi bio:

<table border=”1” cellpadding =”10” cellspacing=”5”>

Uz marker <table> uobičajeno je korišćenje druge tri vrste markera i to:

<tr> u paru sa </tr> za obeležavanja početka tj. zavrsetak novog reda; <th> u paru sa </th> za obeležavanje zaglavlja tabele; <td> u paru sa </td> označava pojedinačno polje;

Vežba 4 :

<Html> <Head><Title> Rad sa tabelama u HTML - u </title></head> <body> <H2> Ovde demonstriram rad sa tagovim vezanim za tabele</H2> <P> <H4>Upotrebio sam: </H4> <P> <ul type=’disc”> <li> cellpadding – rastojanje izmedju sadrržaja ćelije i njene granične linije <li> cellspacing – rastojanje izmedju pojedinih ćelija tabele <li> table border="2" – debljina granične linije u pixselima <li> th width="33% -definiše 1/3 veličine prozora </ul> <p> <p> <table border="2" cellpadding="10" cellspacing="20"> <tr> <th width="33%"><font face="Arial" size="2"> Ime: </font></th> <th width="33%"><font face="Verdana" size="2"> Prezime: </font></th> <th width="33%"><font face="Verdana" size="2"> Zvanje: </font></th> </tr> <tr>


10

2014

<td><font face="Verdana" size="2"> Pera </font></td> <td><font face="Verdana" size="2"> Perić </font></td> <td><font face="Verdana" size="2"> student </font></td> </tr> </table> </body> </Html>

HTML dopušta mogućnost da se pojedine ćelije tabele protežu duž više redova ili kolona tabele.

Ovakav efekat se može postići pomoću atributa colspan i rowspan, koji se ubacuju u <td> ili

<th> tag one ćelije koja se želi posebno da formatira. Vrednost ovih atributa se zadaje brojem kolona ili redova tabele duž kojih treba da se prostire data ćelija.

U prvu ćeliju u sledećem primeru, je postavljena slika tipa GIF pod nazivom space.gif. ovo je neophodno stoga što svaka ćelija tabele mora imati neki sadržaj, inače browser je neće prikazati.

Vežba 5:

<html> <title> Slozena tabela </title> <table border="4" width="40%"> <tr> <th rowspan="2" colspan="2"><img src="space.gif"></th> <th colspan="6"><h3> DANI U NEDELJI:</h3> </th> </tr><tr> <th width="20%"><H4> ponedeljak</H4> </th> <th width="20%"><H4> utorak</H4></th> <th width="20%"><H4> sreda</H4></th> <th width="20%"><H4> cetvrtak</H4></th> <th width="20%"><H4> petak</H4></th> </tr><tr> <th rowspan="5"> C <p> A <p> S <p> O <p> V <p> I <p> </th> <th> 1. </th> <td> srpski </td> <td> istorija</td> <td> fizicko</td> <td> pevanje</td> <td> spavanje</td> </tr><tr> <th> 2. </th> <td> word</td> <td> C#</td> <td> mreze </td> <td> access</td> <td> baze</td> </tr><tr> <th> 3.</th> <td> matematika</td> <td> HTMl</td> <td> mreze </td>


11

2014

<td> baze</td> <td> baze</td> </tr><tr> <th> 4. </th> <td> gradjansko</td> <td> XML</td> <td> spavanje</td> <td> baze </td> <td> baze </td> </tr><tr> <th> 5. </th> <td> pascal</td> <td> AutoCAD</td> <td> spavanje</td> <td> programiranje</td> <td> delphi</td> </tr> </table> </body> </html>

Vežba 6:

<html> <head> <title>Zadatak3</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> </head>


12

2014

<body> <table align="center" border="1"> <th colspan="3">Tabele i liste </th> <tr> <td> <ul type="square"> <li> sto <li> stolica <li> krevet <li> fotelja </ul> </td> <td> <ol type="I"> <li> krompir <li> brokoli <li> paprika </ol> </td> <td rowspan="3"><ul> <li> Neke vrste nameštaja su: <ul type="circle"> <li> sto <li> stolica <li> krevet <li> fotelja </ul> <li> Neke vrste povrća su: <ol type="a"> <li> krompir <li> brokoli <li> paprika boje <ol type="i"> <li> žute <li> zelene <li> crvene </ol> </ol> </ul> </td> </tr> <tr> <td colspan="2"> <dl><h4>Pića</h4> <dt>mleko: <dd> belo hladno piće <dt>kafa: <dd>crno toplo piće </dl> </td> </tr>


13

2014

<tr> <td colspan="2" align="center" > <img src="DSC00555.JPG" height="50" width="50" align="bottom"> </tr> </table> </body> </html>

Vežba 7: Napisati HTML kod koji opisuje stranicu kao što je na slici:

<html> <head> <title>Zadatak2</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> </head> <body> <table border="5" cellspacing="8" cellpadding="10" width="60%"> <th colspan="3"><h2><b>Tabele, liste i slike </h2></b> </th> <tr> <td><i><u> <ul type="square"> <li> sto <li> stolica <li> krevet <li> fotelja </ul></i></u> </td> <td> <ol type="I"> <li> krompir <li> brokoli <li> paprika


14

2014

</ol> </td> <td rowspan="3"> <h2> <ul type="circle"> <li> Beograd <li> Valjevo <li> Kraljevo <li> Ljig </ul> </h2> <H3><i><u> Neke vrste povrca su:</u></i></h3> <ol type="a"> <li> luk <li> salata </ol> <p> <font face="arial" size="5"> Paprika boje <p> <ol type="i"> <li> žute <li> zelene <li> crvene </ol> </font> </ul> </td> </tr> <tr> <td colspan="2"> <center><font face="arial" size="3"><u><I>OVO JE LISTA SLIKA</i></U></FONT> <ol type="A"> <li> <img src="gg.gif" height="50" width="50" align="bottom"><p> <li> <img src="ee.gif" height="50" width="50" align="bottom"><p> <li> <img src="dd.gif" height="50" width="50" align="bottom"><p> </ol></center> </tr> <tr> <td colspan="2" align="center" > <img src="gg.gif" height="150" width="150" align="bottom"> </tr> </table> <p> <p> <a href="prva.html"><h3><center> Vrati se na prvu stranu</center></a> </body>

</html>

view-source:file:///C:/Users/velja/Desktop/Documents/USB%20VELJA%208/ljove/nesa/Vezbe%20po%20godinama/DRUGI/Testovi%20HTML%20drugi%20razred/2%20razred%20HTML%202009/gg.gif

view-source:file:///C:/Users/velja/Desktop/Documents/USB%20VELJA%208/ljove/nesa/Vezbe%20po%20godinama/DRUGI/Testovi%20HTML%20drugi%20razred/2%20razred%20HTML%202009/ee.gif

view-source:file:///C:/Users/velja/Desktop/Documents/USB%20VELJA%208/ljove/nesa/Vezbe%20po%20godinama/DRUGI/Testovi%20HTML%20drugi%20razred/2%20razred%20HTML%202009/dd.gif

view-source:file:///C:/Users/velja/Desktop/Documents/USB%20VELJA%208/ljove/nesa/Vezbe%20po%20godinama/DRUGI/Testovi%20HTML%20drugi%20razred/2%20razred%20HTML%202009/gg.gif

view-source:file:///C:/Users/velja/Desktop/Documents/USB%20VELJA%208/ljove/nesa/Vezbe%20po%20godinama/DRUGI/Testovi%20HTML%20drugi%20razred/2%20razred%20HTML%202009/prva.html


15

2014

1.2. Treperenje i trčanje

I pored čudnog naslova ove strane na njoj se i dalje govori o HTML-u. O čemu se zapravo radi? Verovatno ste već primetili da web stranice ne moraju da budu statične. Na mnogim stranicama možete videti slova koja trepere ili trče preko stranice. Ovo se može postići pomocu dva taga:


16

2014

<blink> i <marquee>.

Netscape Navigator prepoznaje tag <blink> a ne prepoznaje tag <marquee>, dok je kod Internet Explorera obrnuto. Medjutim ova dva taga nemaju isto dejstvo. <blink> dovodi do treperenja teksta u jednom mestu, dok <marquee> tag dovodi do skrolovanja teksta preko stranice. Iz tog razloga bi bilo dobro da istovremeno koristite oba taga, umetnuta jedan u drugi, tako da će korisnici Explorera videti tekst koji skroluje, a korisnici Navigatora će videti tekst koji se pali i gasi.

<marquee><blink> ZDRAVO ! </blink></marquee>

Vi ćete naravno videti samo jedan od ova dva efekta u zavisnosti od toga kojim browserom surfujete. Ako stranicu posmatrate iz Internet Explorera onda vidite da reč "ZDRAVO !" skroluje (trči) preko cele širine stranice sa desna na levo. Ako pak stranicu posmatrate iz Netscape Navigatora trebalo bi da vidite kako se ova reč pali i gasi (treperi) u jednom mestu. Ako imate i jedan i drugi browser pogledajte ovu stranicu u oba, da bi ste uvideli razliku. Naravno da tekst unutar ovih tagova mozete formatirati pomocu <font> taga kako bi ste postigli što bolji efekat.

HTML kod u ovom slučaju glasi:

<font face="Comic Sans MS" size="7"><marquee><blink> <font color="#0000ff">Z</font> <font color="#ff0000">D</font> <font color="#00ff00">R</font> <font color="#00ffff">A</font> <font color="#ff1493">V</font> <font color="#ffff00">O</font> <font color="#ff00ff">!</font> </blink></marquee></font>

Dakle za svako slovo sam posebno definisao boju, a za sva slova zajedno veličinu 7. Internet explorerov <marquee> tag je mnogo bogatiji u opcijama. Pomoću atributa width, čija se vrednost zadaje u pikselima ili u procentima širine stranice, možemo zadati da tekst skroluje samo preko dela stranice. Pomoću atributa bgcolor mozemo zadati boju pozadine preko koje će tekst skrolovati. U sledećem primeru sam zadao da beli tekst skroluje samo preko 50% sirine stranice i to po crnoj pozadini: Naravno, tu je i HTML kod:

<center> <font face="Comic Sans MS" size="7" color="#ffffff"> <marquee width="50%" bgcolor="#000000"><blink> ZDRAVO ! </blink></marquee></font> </center>

Ovaj efekat će videti samo korisnici Interent Explorera, ali s obzirom da prema poslednjim istrazivanjima 60% surfera koristi ovaj browser, to znaci da ce većina posetilaca stranice uživati u ovom divnom prizoru :-)

Ako zelite da promenite smer skrolovanaja na desnu stranu to mozete postići atributom: direction="right". Sada će tekst trčati sa leva na desno:

Ili:

Pomoću atributa behavior="alternate" možete zadati tekstu da šeta napred - nazad:


17

2014

2. Macromedia ( Adobe ) Dreamweaver

2.1. Uvod u Dreamweaver

Iako se web stranice mogu kreirati 100% pomoću običnog tekst-editora, kao što je Notepad, postoje programski paketi koji taj posao uveliko olakšavaju. Najpoznatiji takav program je Macromedia ( Adobe ) Dreamweaver. Dreamweaver je kompletan program za web stvaralaštvo-HTML (Hypertext Markup Language) editor, program za autorstvo i stvaranje dinamičkih web stranica.

Dreamweaver se danas pojavljuje u više verzija: Macromedia Dreamweaver 8, Adobe Dreamweaver CS 3 i CS4.

Pre nego što počnete da pravite Web strane pomoću Dreamweaver-a, treba da upoznate razne Dreamwavereove alatke i panoe, koji će vam omogućiti da efikasno pravite Web prezentacije. Ako prvi put pokrećete Dreamweaver, prikazaće se prozor dobrodošlice s informacijama za nove korisnike, kao i zbir novih mogućnosti za one koji već poznaju program. Dugmad na paleti u dnu prozora služe za kretanje kroz informacije o programu. Po otvaranju Dreamweavera vidi se i prozor za nov dokument, u kome se obavlja projektovanje i programiranje. Možda se vide i panoi za dodavanje i menjanje teksta i objekata, za rad s datotekama prezentacije i drugo, Medju panoima koji se vide mogu biti traka Insert, pano za prikazivanje svojstava (Properties), prozor prezentacije (Site) i pano za odgovore (Answers).


18

2014

Slika 1. Pozdravni prozor i radno okruženje Dreamweaver-a 8

Većina Dreamweaverovih panoa svrstana je prema svojim funkcijama u sledeće grupe: Design, Code, Application, Files i Answers. Grupe panoa omogućavaju da najčešće korišćenim panoima brzo pristupate i da ih brzo sakrivate. Svim panoima (u pomenutim grupama i izvan njih) možete da pristupite iz menija Window.

Ako ste već otvarali Dreamweaver, panoi će biti smešteni tamo gde ste ih ostavili kada ste poslednji put zatvorili program. Znak za potvrdu u meniju Window označava da su pano ili paleta alatki otvoreni i vidljivi. Može se desiti da pano bude sakriven ispod drugog panoa ili prozora dokumenta. Da biste prikazali sakriveni pano, ponovo ga izaberite u meniju Window.

Ako se potrebni pano ne nalazi u trenutno vidljivoj grupi panoa, pojavi će se i pano i njegova grupa. Ako je pano izabran, a ipak se ne vidi, izaberite Window, Arrange Panels da bi se svi paneli vratili na svoja podrazumevana mesta. Traka Insert će otići na svoje mesto u gornjem levom uglu, pano svojstava (Properties) preći će na dno prozora, a svi ostali otvoreni panoi na desnu stranu prozora. Najveći deo posla obavljate u prozoru dokumenta, gde možete da umetnete, promenite i izbrišete mnoštvo elemenata od kojih se sastoji Web strana. Dok radite, u prozoru dokumenta prikazuje se približan izgled strane u browseru: Nova strana se podrazumevano zove "Untitled Document", što se vidi na naslovnoj traci dokumenta. Posle naslova dokumenta, koji je prikazan i u polju Title na paleti alatki dokumenta, u zagradama je navedeno ime datoteke.

U Dreamweaveru postoje tri načina prikazivanja: Design View, Code View i Split Design and Code. Dugmad za uključivanje ovih prikaza nalaze se na levoj strani palete alatki dokumenta. Dugme aktivnog režima prikazivanja je uvek istaknuto.


19

2014

Slika 2. Načini prikazivanja stranice

U donjem levom uglu prozora dokumenta nalazi se birač HTML oznaka (Tag Selector). U njemu se hijerarhijski prikazuju HTML oznake koje pripadaju trenutno izabranom elementu. (Početna HTML oznaka je uvek <body>).

Slika 3. Birač HTML oznaka

Birač HTML oznaka može da koriste za kretanje kroz elemente strane pomoću HTML oznaka koje odgovaraju tim elementima. Ova alatka omogućava brzo kretanje kroz hijerarhiju koda strane, pregled elemenata s kojima radite i lako biranje ostalih elemenata. To je posebno zgodno kod rada sa višestrukim umetnutim tabelama; tada se u biraču HTML oznaka pojavljuju oznake tabela <Table>, redova <TR> i ćelija <TD>.

Slika 4. Osnovni meni i traka Insert


20

2014

Traka Insert sadrži više objekata i elemenata koje možete da postavite na stranu: slike, tabele, specijalne znakove, obrasce i okvire. Elementi koje možete da umetnete razvrstani su po grupama u zavisnosti od vrste.

Grupe su Common (uobičajeni elementi), Frames (okviri), Forms (obrasci), Layout (raspored elemenata), Characters (znakovi) i druge. Grupe birate pritiskanjem odgovarajućeg jezička kartice. Primera radi, u grupi Characters nalaze se brojni specijalni znakovi, dok se u grupi Common nalaze uobičajeni elementi, kao što su slike i tabele. Svim ovim elementima i objektima možete da pristupate i kroz meni Insert. Da biste umetnuli element, prevucite njegovu ikonicu sa trake Insert na odgovarajuće mesto u prozoru dokumenta. Drugi način je da najpre u dokumentu zadate (postavite) tačku umetanja, a potom da pritisnete ikonicu objekta na panou. Kada pritisnete ikonicu, element će se pojaviti u dokumentu na mestu tačke umetanja.

U zavisnosti od objekta koji izaberete, može da se pojavi i okvir za dijalog s opcijama za svojstva i smeštaj elementa. Za neke objekte, kao što su tabele i slike, možete da zaobiđete okvir za dijalog i da odmah u dokument umetnete oznaku za rezervisano mesto (sa tasterom Alt). Oznake za rezervisano mesto koriste se kada pravite strane za koje fotografije i slike još nisu spremne.

Slika 5. Pano Properties služi za podešavanje osobina objekata

Pano Properties se koristi za pregled i menjanje atributa (svojstava) izabranog teksta, slika, tabela i ostalih elemenata strane. Njegov sadržaj se menja u zavisnosti od konteksta: atributi koje prikazuje zavise od toga šta je izabrano u prozoru dokumenta. Da biste smanjili ili proširili pano Properties, pritisnite dugme za proširenje u donjem desnom uglu panoa. Ako je pano smanjen, može biti dodatnih svojstava za čije prikazivanje nema mesta i koja će ostati nevidljiva dok ne proširite pano.

Većina panoa koje ćete koristiti tokom pravljenja Web strana jesu usidreni složeni u obliku kartica s jezičkom unutar grupa panoa. Sidrenje povećava slobodnu površinu prozora, a istovremeno omogućava brz pristup potrebnim panoima. Svaka grupa panoa može biti proširena tako da se prikažu svi njeni panoi, odnosno sažeta tako da se vidi samo ime grupe. Ponekad nećete moći da pronađete određeni pano (jedan od razloga za to može biti i promena rezolucije). Ako vam neki pano treba, a ne možete da ga prikažete ni kada ga izaberete u meniju Window, izaberite opciju menija Window, Arrange Panels, pa će se panoi prilepiti uz ivice ekrana.

2.2. Razvijanje strukture prezentacije

Posvetite se pravljenju detaljne skice ili dijagrama toka prezentacije, jer ćete tako lakše razviti svoje zamisli, bolje shvatiti opseg projekta i uštedeti vreme i resurse. Dobra Web prezentacija je intuitivna i ostavlja pozitivan i jedinstven utisak na posetioca. Izrada dobre Web prezentacije počinje definisanjem i sažetim prikazivanjem razloga i potrebe za takvom Web lokacijom. Zapitajte se ili pitajte naručioca prezentacije: zašto je ona potrebna i čemu će služiti? Šta hoćete da izrazite pomoću ove prezentacije i na koji način ćete to postići? Kakav utisak hoćete da ostavite i šta posetioci ove Web lokacije treba da zapamte?

Poznavanje posetilaca je suštinski značajno. Ko će posećivati Web lokaciju? Definisanjem opšteg profila posetilaca lakše ćete dostići ciljnu grupu posetilaca. Kada shvatite ko sačinjava vašu buduću


21

2014

publiku, zapitajte se kakvom tehnologijom oni raspolažu. Kakve softverske dodatke, browsere i operativne sisteme koristi većina budućih posetilaca? Sve to morate uzeti u obzir da bi im Web lokacija bila dostupna. Važan deo priprema za projektovanje i izradu Web prezentacije jeste definisanje i prikupljanje njenih sastavnih delova: teksta, slika i multimedijskih elemenata.

2.3. Definisanje lokalne web prezentacije

Za početak objasnićemo pojam sajta. Reč sajt ima više značenja:

Website, skup strana na serveru kojima pristupa posetilac preko svog browsera.

Remote site, skup fajlova na serveru koji čine Web sajt, uglavnom gledano sa pozicije autora samog sajta.

Local site, fajlovi na lokalnom računaru identični onima na remote sajtu. Sa njima se radi na računaru, a potom se prebacuju na server.

Site definition, u Dreamweaveru označava karakteristike lokalnog sajta sa informacijama o tome kako lokalni sajt komunicira sa remote sajtom.

Najčešće korišćen način kreiranja Web sajta je kreiranje i rad sa web stranama, na lokalnom računaru, a zatim prenos kopija tih strana na web server kako bi one postale dostupne javnosti. Takav rad i ovde se podrazumeva.

Prvi korak u pravljenju Web prezentacije koji treba obaviti pre nego što počnete izradu Web stranica je biranje postojećeg ili pravljenje novog foldera koji će sadržati celokupnu buduću Web prezentaciju. Ovaj postupak se naziva "definisanje lokalne "Web prezentacije". Izabrani folder, lokalni koreni folder, definiše granice lokalne Web prezentacije na vašem lokalnom disku i odražava stanje udaljene Web lokacije, tj. stvarne lokacije na Web serveru kojoj će posetioci pristupati. Pri definisanju lokalne Web prezentacije možete da zadate istu hijerarhiju foldera u lokalnoj i udaljenoj verziji, što je nezaobilazno prilikom izrade i održavanja aktivne lokacije. Prezentaciju ćete razvijati unutar lokalne prezentacije na lokalnom disku, gde ćete napraviti i testirati Web strane. Kada otpočnete izradu novih Web prezentacija, morate za njih da napravite ili izaberete osnovne foldere. Ime osnovnog foldera može da bude jednako imenu odgovarajuće prezentacije, a i ne mora. Ako pravite mnogo prezentacija, koristite imena koja se lako razlikuju. Ime osnovnog direktorijuma služi samo vama, za rad s datotekama, pošto ga posetioci buduće Web lokacije neće videti.

U Dreamweaveru izaberite Site, New Site. Predjite na kraticu Basic u okviru za dijalog Site Definition. Otvara se okvir za dijalog Site Definition sa dve kartice, Basic i Advanced, koje služe za biranje postupka definisanja prezentacije. Kartica Basic, koja se podrazumevano prikazuje kada otvorite okvir za dijalog, vodi vas kroz postupak korak po korak. Kartica Advanced daje još nekoliko dodatnih opcija i parametara za podešavanje, ali ne sadrži tekstualna objašnjenja koja se prikazuju u režimu Basic.


22

2014

Slika 6. Definisanje prezentacije (Basic)

Ako dosad niste napravili prezentaciju u Dreamweaveru, prozor Site (ako je otvoren) prikazuje folder u kome nema nikakve prezentacije. Dreamweaver postavlja pitanje: "What would you like to name your site?" (Kako ćete nazvati prezentaciju?) Izaberite i upišite neko ime u polje za ime i pritisnite Next. "Ispitni zadaci" je ime projekta prezentacije koju pravite u ovoj lekciji. Ovo ime prezentacije služi samo vama, jer ga posetioci lokacije neće videti. Ime prezentacije se na kartici Advanced upisuje u polje Site Name u kategoriji Local Info.

U drugom koraku Dreamweaver pita: "Do you want to work with a server techology such as ColdFusion, ASP.NET, ASP, JSP or PHP?" (Želite li da radite sa serverskim tehnologijama Cold Fusion, ASP.NET, ASP, JSP ili PHP?) Pritisnite radio-dugme "No, I do not want to use a server technology". (Neću.) Pritisnite. Za izradu statičkih prezentacija izaberite opciju No. Definiciju prezentacije uvek možete da izmenite kad izaberete opciju menija Site, Edit Sites

Slika 7. Izbor načina rada sa datotekama

Na vrhu ovog područja Dreamweaver pita: "How do you want to work with your files during development?" (Izaberite način rada s datotekama tokom razvoja ove prezentacije.) Pritisnite radio dugme, "Edit local copies on my machine, then upload to server when ready (recommended)".

U istom području, Dreamweaver pita: "Where on your computer do you want to store your files?" (Gde ćete smjestiti datoteke ove prezentacije?). Treba izabrati neki lokalni folder. Izabrani folder odgovara korenom folderu udaljene Web lokacije. Dreamweaver će pomoću lokalnog korenog foldera odrediti putanje dokumenata, slika i hiperveza vaše prezentacije. Pritisnite Next da biste prešli na sledeći korak. Izaberite "None" u padajućoj listi ispod pitanja "How do you connect to your remote server?" (Kako se povezujete s udaljenim serverom?), ako radite isključivo na lokalnoj prezentaciji i ako nećete morati da pristupate udaljenom Web serveru.

Ovom području kartice Basic odgovara kategorija Remote Info na kartici Advanced, gde ima dodatnih opcija za definisanje prenosa datoteka na udaljeni server. Pritisnite Next da biste prešli

http://asp.net/

http://asp.net/


23

2014

na sledeći korak. Pregledajte podatke o prezentaciji koje ste dosad zadali i pritisnite dugme Done na dnu okvira za dijalog.

Kako ste u odjeljcima Application Server i Remote Info izabrali No, Dreamweaver će kao vrednost obe opcije prikazati tekst "Access; I'll set this up later". Kada pritisnete dugme Done, Dreamweaver će možda prikazati obaveštenje da priprema memoriju za ovu prezentaciju. Pritisnite OK i Dreamweaver će pregledati datoteke u folderu DWMX-project, kako bi mogao da pripremi memoriju i da prikaže prozor Site kada završi s tim. Aktivira se pano Site i prikazuje kreirani folder, u desnom oknu prozora, u koloni Local Files.

Slika 8.

2.4. Zadavanje browsera

Tokom razvoja Web strana stalno ćete da proveravate kako vaš rad izgleda u različitim browserima, kao što su Netscape, Firefox ili Internet Explorer. Ono što vidite u prozoru Dreamweavera samo je približno jednako stvarnom izgledu prezentacije. Svaki browser prikazuje Web strane na različit način, i mada su neke od tih razlika neznatne, druge su veoma značajne. Kartica Preferences u Dreamweaveru služi za zadavanje browsera u kojima ćete proveravati izgled strana prezentacije. Da biste ubrzali proveru, zadajte prvi i drugi podrazumevani browser i za svaki definišite prečicu sa tastature. Izaberite File, Preview in Browser, Edit Browser List. Otvara se okvir za dijalog Preferences i prikazuje browsere izabrane za proveru. Dreamweaver će automatski prikazati spisak browsera instaliranih u računaru. Kada pritisnete ime browsera u spisku, polja za potvrdu ispod spiska (Defaults: Primary Browser, odnosno Secondary Browser) pokazaće da li se radi o primarnom ili sekundarnom browseru. Ako imate više od dva instalirana browsera, ni u jednom od polja za potvrdu neće biti znaka za potvrdu, što znači da tek treba da izaberete koji browseri će biti podrazumevani.


24

2014

Slika 9. Izbor web browsera

2.5. Pravljenje i snimanje nove strane

Iako Dreamweaver otvara nov dokument bez naslova kada pokrenete program, često ćete sami morati da pravite nove strane. Pri tome uvek treba prvo da snimite dokument. Ako dokument nema naslov jer ga je Dreamweaver otvorio automatski, možete ga zatvoriti, a da ga ne snimite: izaberite taj dokument i opciju menija File, Close.

Izaberite File, New. Pritisnite karticu General i izaberite opciju Basic Page u spisku. U padajućoj listi Basic Page izaberite opciju HTML i pritisnite dugme Create.

Dreamwever 8

Adobe CS4

Slika 10.

U okviru za dijalog New Document postoje i druge opcije, za pravljenje strana različitih vrsta: HTML, XML i dinamičkih strana koje koriste skripte kao što su ASP i ColdFusion. U spisku kategorija birate vrstu strane ponuđeni su šabloni (eng. Templates), kaskadni opisi stilova (eng. CSS Style Sheets), skupovi okvira (eng. Framesets) i gotovi modeli HTML strana (eng. Page designs). Na dnu okvira za dijalog New Document nalazi se opcija Make Document XHTML Compliant (neka dokument bude kompatibilan sa jezikom XHTML). Jezik za opisivanje Web strana HTML ograničen je, naročito po tome što nove mogućnosti nisu kompatibilne s njegovim starijim verzijama, a postoji i mnogo problema s izvršavanjem na različitim platformama. Jezik XHTML (eXtensible HTML) proširuje mogućnosti HTML-a, pretvarajući ga u jezik tipa XML (eXtensible Markup Language) u koji su ugrađene mogućnosti proširenja.


25

2014

Ne odlažite snimanje Web strane dok na nju ne stavite tekst ili slike, već ih snimajte čim otvorite nov dokument. Ukoliko najpre snimite datoteku, sve putanje, koje referenciraju slike i ostale elemente koje budete uvozili, biće propisno formirane. Ukoliko ne snimite datoteku, za opis mesta elementa koji se uvozi koristiće se referenca "file://putanja", relativno u odnosu na hard disk. Ako pokušate da umetnete objekat na stranu, a da prethodno niste snimili dokument, Dreamweaver će vas upozoriti da za taj element mora da upotrebi referencu file://putanja. Koristite što kraća imena datoteka i foldera. Vodite računa o tome da ime foldera postaje sastavni deo URL adrese koju korisnik mora da otkuca da bi pristupio strani.

Svaki HTML dokument mora imati naslov, koji služi prvenstveno za identifikaciju. On se prikazuje na naslovnoj traci browsera, ukazuje na sadržaj strane i automatski postaje ime obeleživača (eng. Bookmark, Favorite) koji korisnik može da priloži svojoj kopiji Web strane. Birajte kratke, informativne izraze koji opisuju namenu dokumenta. Neka vam pređe u naviku da svakoj strani date naslov pre nego što počnete da joj dodajete tekst i slike. Ako zaboravite na to, Dreamweaver će strani dati ime Untitled Document. Na Internetu možete prepoznati stranice koje su uradili loši dizajneri upravo po ovom detalju.

Upišite Ispitni zadaci u polje Title na paleti alatki dokumenta. Pritisnite Enter.

Slika 11. Naslov web stranice

Ako ne vidite paletu alatki dokumenta na kojoj je polje Title, izaberite opciju menija View, Toolbars, Document. Polje Title na početku prikazuje naslov "Untitled Document", pa ćete sada zameniti taj naslov pravim naslovom uvodne strane prezentacije.

Zadavanje boje pozadine

U Dreamweaveru se boja pozadine lako menja pomoću specijalne palete boja za Web (eng. Web-safe color palette). Na toj paleti ima 216 boja. Izaberite Modify, Page Properties. Otvara se okvir za dijalog Page Properties. U njemu nema podrazumevanih opcija, mada je u Dreamweaveru podrazumevana boja pozadine u prozoru dokumenta bela. Ako ne zadate boju pozadine, strana će se prikazati s podrazumevanom bojom pozadine koja je definisana u browseru korisnika. Pritisnite polje s bojom do opcije Background. Prikazuje se paleta boja, a pokazivač miša će se pretvoriti u pipetu. Dovedite pipetu iznad uzorka boje na paleti.


26

2014

Slika 12. Izbor boje pozadine stranice

Pritiskom na dugme Apply menjate sve izabrane parametre, a okvir za dijalog Page Properties ostaje otvoren. Ako hoćete da zatvorite okvir za dijalog, pritisnite OK i svi izabrani parametri će se automatski primeniti pre zatvaranja.

Slika na pozadini strane

Na pozadinu se obično stavlja mali grafički objekat, čijim kopijama se popločava cela strana. Strana može imati definisanu i boju i sliku za pozadinu. Učitana slika za pozadinu prikazuje se i prekriva definisanu boju pozadine.

Izaberite Modify, Page Properties. Pritisnite dugme Browse do polja Background Image. Izaberite sliku; zatim pritisnite OK da bi se zatvorio okvir za dijalog Page Properties.

Ako treba da uklonite sliku sa pozadine, otvorite okvir za dijalog Page Properties i obrišite ime datoteke u polju Background. Ako niste snimili datoteku odmah po otvaranju dokumenta, u polju Background se prikazuje celokupna putanja izabrane slike na disku. Kada snimite datoteku, putanja

će se izmeniti i pokaziva će mesto čuvanja slike. Uvek treba snimiti datoteku pre uvoženja bilo

kakvog sadržaja strane, čak i slike za pozadinu.

2.5.1. Zadavanje fontova i teksta

Kada izmenite boju pozadine ili stavite sliku na nju, može postati potrebno da se izmeni i boja slova teksta koji se prikazuje u prvom planu: primera radi, crni tekst se ne vidi na crnoj pozadini: prilikom biranja šeme boja za dokument, izaberite kombinacije boja koje se dobro slažu i koje su dovoljno kontrastne..

Izaberite Modify, Page Properties. Pritisnite polje za boju teksta, desno od odrednice Text. Prikazaće se paleta boja kao ona za boju pozadine. Pipetom izaberite boju s palete, ili upišite njen heksadecimalni kod u tekstualno polje. Tekst možete da upišete neposredno u dokument. Obično se na početku stranice nalazi neki naslov, koji se označi tagom "Heading". U padajućoj listi Format na panou Properties izaberite opciju Heading 4. Upisanom tekstu ste dali HTML oznaku naslova četvrtog nivoa.


27

2014

Slika 13. Izbor oznake naslova 4. nivoa (Heading 4)

Kada pritisnete Enter, time ste ispod naslova "Ispitni zadaci" dodali još jedan red, koji podrazumevano dobija HTML oznaku pasusa. Za običan tekst koristi se, po pravilu, format pasusa.

Kad god izmenite dokument, Dreamweaver dodaje zvezdicu (*) do imena datoteke na vrhu prozora dokumenta. Ona označava da je datoteka promenjena, a da potom nije snimljena. Zvezdica će nestati kada snimite dokument. Često snimajte dokument kako biste umanjili rizik od gubitka uloženog rada kada se Dreamweaver ili operativni sistem sruše (radi brzine koristite: Ctrl+S).

Tekst se strani može dodati kopiranjem i prenošenjem iz drugog dokumenta. Dreamweaver može da otvori datoteke napravljene u programima za obradu teksta ili programima za prelom strana, ukoliko su snimljene kao ASCII datoteke (čist tekst). Na primer, Dreamweaver može da otvori dokument Microsoftovog Worda, ako je bio snimljen kao tekstualna datoteka (s nastavkom .txt) ili kao HTML dokument, što se postiže biranjem opcije menija File, Save as Web Page.

Tekstualne (.txt) datoteke se u Dreamweaveru uvek otvaraju u novom prozoru, u prikazu Code View.

Radi bržeg rada, koristi se Enter za prelazak u novi red sa oznakom <p>, odnosno kraj pasusa, a Shift+Enter za prelazak u novi red bez završetka pasusa , tj. za oznaku <br>. Mogućnosti za poravnanje teksta su: podrazumevani izgled (bez poravnanja), poravnanje ulevo (eng. align left), centralno poravnanje (eng. justify). Podrazumevano je poravnanje ulevo. Osim poravnanja, pasuse teksta možete i da uvučete od margina. Za to se koriste dugmad Text Indent i Text Outdent na panou Properties.

Slika 14. Alati za poravnanje teksta, označavanje spiskova i za uvlačenje teksta

Da biste formatirali tekst, koristite kategoriju Text palete Insert.


28

2014

Slika 15.

Promena fonta

Web strane će biti zanimljivije i lakše će se čitati ako promenite font kojim se prikazuje tekst. Morate voditi računa o činjenici da korisnici mogu da menjaju veličinu prozora i fonta, kao i boju slova. Izgled teksta na Web strani menja se od korisnika do korisnika. Ako ste navikli da raspoređujete elemente na stranicama štampanih medija (kao što su časopisi i brošure), razočaraćete se, jer u HTML-u ne možete da utičete npr. na prored teksta i međuslovna rastojanja.

U Web tekstu ne možete da utičete na prored teksta u pasusima.

Da bi posetilac video stranu onako kako ste je napravili, mora na svom računaru imati instaliran font koji ste zadali.Kombinacije instaliranih fontova čine da browser prikazuje tekst u drugom fontu. Ako prvi font u spisku fontova nije instaliran, browser će pokušati da upotrebi drugi, a na kraju i treći. Ako nijednog od tih fontova nema na korisnikovom računaru, tekst se prikazuje u podrazumevanom fontu browsera. Kombinaciju fontova možete da promenite kada izaberete opciju Edit Font List u padajućoj listi Font na panou Properites, odnosno kada pomoću opcije menija Text, Font, Edit Font List otvorite okvir za dijalog Edit Font List.

Slika 16. Izbor kombinacije fontova

Izaberite kombinaciju fontova i zatim jednu od sledećih opcija:

Da bi dodali ili uklonili font: izaberite font i pritiskajte dugmad sa strelicama, koja premešta fontove između spiskova Chosen Fonts (izabrani fontovi) i Available Fonts (dostupni fontovi).

http://npr.na/


29

2014

Da bi dodali ili uklonili kombinaciju fontova: pritiskajte dugmad sa znakovima plus i minus, u gornjem levom uglu okvira za dijalog.

Veličine fontova u listi poslagane su od 1 do 7, od +1 do +7 i od –1 do –7. Ako izaberete broj bez predznaka (1 je najmanji font, a 7 najveći), zadali ste apsolutnu veličinu fonta. Biranjem broja s predznakom plus ili minus, zadajete relativnu veličinu fonta u odnosu na njegovu osnovnu veličinu. Broj +1, na primer, zadaje font za jedan broj veći od njegove osnovne veličine. Podrazumevana osnovna veličina fonta u browseru je 3. Ako izaberete +3 za veličinu fonta, zapravo ste zadali 6 (3+3). Najveća veličina fonta je 7, a najmanja 1. Svaki font veći od 7 prikazuje se veličinom 7. Primera radi, ako izaberete veličinu fonta +6, 3+6 je veće od 7, ali će se ipak prikazati font veličine 7. U Dreamweaveru se boja teksta lako menja. Prozor za biranje boja se automatski zatvara kada pritisnete neki uzorak boje, koju Dreamweaver odmah primjenjuje na tekst. Prozor za biranje boja možete otvoriti i pomoću opcije menija Text, Color, čime nekoliko takvih prozora postaje dostupno.

Slika 17. Lista korišćenih boja u dokumentu

Sve boje koje upotrebite u prezentaciji čuvaju se na panou Assets. Da bi isti skup boja mogli dosledno da koristite u celoj prezentaciji, snimite najčešće korišćene boje u folder Favorites na panou Assets: Pritisnite strelicu levo od grupe panoa Files. Prikazuje se grupa panoa Files, u kojoj se nalazi i pano Assets. Ako grupa panoa Files nije otvorena, izaberite Window, Assets. Na panou Assets pritisnite ikonicu Colors u levoj koloni, a zatim radio-dugme Site pri vrhu panoa. Prikazuju se sve boje koje ste već koristili u prezentaciji "Ispitni zadaci".

Izaberite jednu od boja iz spiska boja upotrebljenih u prezentaciji, prikazanog na panou Assets. Pritisnite dugme Add to Favorites u donjem desnom uglu panoa Assets. Dreamweaver će prikazati okvir za dijalog s porukom da je izabrana boja dodata u listu Favorites. Da biste videli spisak najčešće korišćenih boja, Favorites, pritisnite istoimeno radio-dugme pri vrhu panoa Assets.

Pravljenje spiskova

Dreamweaver omogućava pravljenje dve vrste spiskova (lista): neuredjenih i uredjenih.


30

2014

Slika 18. Osobine neuredjene liste

Šemu numerisanja uredjene liste možete promeniti promenom njenih svojstava. Pritisnite bilo koji red spiska. Zatim pritisnite dugme List Item na panou Properties. Izaberite samo jedan red liste. Ako izaberete celu listu, dugme List Item će postati nedostupno i sivo. Ako se dugme ne vidi, pritisnite strelicu za proširenje u donjem desnom uglu panoa Properties. Otvara se okvir za dijalog List Properties. Uredjena lista se u padajućoj listi List Type naziva Numbered List. Područje List Item na dnu okvira za dijalog sadrži padajuću listu New Style, pomoću koje menjate izgled pojedine stavke ili grupe stavki spiska, umesto celog spiska. U istom području je i polje Reset Count To, koje služi za proizvoljno zadavanje rednog broja stavke u kojoj se nalazi tačka umetanja; sve naredne stavke automatski dobijaju sledeće redne brojeve.

Sledi opis postupka izrade i modifikovanja neuređene liste. Izaberite deo teksta i pritisnite dugme Unordered List na panou Properties. Izabrani tekst će biti uvučen i dobiće znakove za nabrajanje. Podrazumevani znak za nabrajanje neuređenih lista možete da promenite imenom odgovarajućih svojstava, isto kao kod uređenih lista. U padajućoj listi List Type, neuređena lista se naziva Bulleted List. Pritisnite bilo koji red u listi i izaberite opciju menija Text, List, Properties. Otvara se okvir za dijalog List Properties. U padajućoj listi Style izaberite npr. opciju Square i pritisnite OK. Sve stavke u listi dobiće kvadrat (eng. square) kao znak za nabrajanje. Boja rednih brojeva i znakova za nabrajanje, koji se koriste u uređenim i neuređenim listama, jednaka je podrazumevanoj boji teksta dokumenta, koju zadajete u okviru za dijalog Page Properties.

Liste se mogu ugnježđivati, odnosno stavljati unutar drugih lista. Vrstu liste je moguće promeniti i kada je ugnježdena. Primera radi, unutar neuređene liste možete imati uređenu listu. Kada ugnježđujete liste, podrazumevano se koriste puni krugovi, kružnice i kvadrati (tim redom) kao znakovi za nabrajanje. U Dreamweaveru se ti znakovi za nabrajanje nazivaju bullet, circle i square. Odgovarajući termini u HTML-u su disc, circle i square.

Da bi ugnezdili stavku koju ćete napraviti, pritisnite dugme Text Indent na panou Properties. Stavka će biti uvučena na sledeći nivo.

Ako hoćete da uklonite ugnežđenu listu, stavite kursor u nju, ali nemojte je označiti. Pritisnite dugme Text Outdent na panou Propperties i zatim uklonite ugnježdeni tekst.


31

2014

2.6. Dodavanje horizontalnih linija i datuma

Horizontalna linija se pruža preko cele strane i vizuelno odvaja delove dokumenta. Zadajte naredbu Insert, HTML, Horizontal Rule. Dok je horizontalna linija izabrana, upišite 70 u polje W na panou Properties. Izaberite % u padajućoj listi desno od broja koji ste upravo upisali. Horizontalna linija će tako zauzeti 70 odsto širine (eng. width, W) prozora browsera, bez obzira na širinu samog prozora. Linija se prikazuje kao tanka pruga. Ako hoćete da zadate apsolutnu širinu linije, izaberite opciju pixels u padajućoj listi. U tom slučaju, linija ne menja širinu kada korisnik promeni veličinu prozora browsera. Pritisnite polje Shading kako biste uklonili znak za potvrdu iz njega. U polje H upišite 1. Kad se ukloni potvrda iz polja Shading, prikazuje se puna linija. Horizontalna linija je visoka (eng. height, H) 3 piksela. Horizontalnu liniju možete i da poravnate s levom marginom, sa desnom marginom ili centralno. Podrazumevano poravnanje horizontalne linije je centralno.

Slika 19. Osobine horizontalne linije

Izgled linije možete da promenite kada je izaberete i promenite joj parametre na panou Properties.

Ponekad treba voditi računa o tome kada ste poslednji put izmenili stranu u prezentaciji.

Dreamweaver može da stavi datum i vreme poslednje izmene na sve strane prezentacije i da ih automatski ažurira svaki put kada snimite datoteku, da to ne biste radili ručno.

Slika 20. Dodavanje datuma

To nije dinamički datum koji se menja svaki put kada korisnik pristupi strani, nego datum koji govori posetiocima kada ste poslednji put ažurirali sadržaj Web lokacije. Postavite kursor tamo gde hoćete da umetnete datum. Datum se obično prikazuje na dnu strane. Okvir za dijalog Insert Date može da otvorite pomoću opcije menija Insert, Date.

2.7. Umetanje slika i medija

Najrašireniji i najbolje podržani formati slika na Webu jesu format za razmenu grafičkih elemenata (eng. Graphic Interchange Format, GIF) i format združene grupe fotografskih stručnjaka (eng. Joint Photographic Experts Group, JPEG). Kada odlučujete da li da snimite grafiku u formatu GIF ili JPEG, neka vam cilj bude najbolji kvalitet slike i što manja datoteka.

Biranjem opcije menija Insert, Image otvara se okvir za dijalog Select Image Source, pomoću koga možete da umetnete grafički objekat na stranu. Po pravilu, treba koristiti reference u odnosu na


32

2014

dokument. Samo ako imate izuzetno veliku prezentaciju ili nameravate često da premeštate strane, opravdano je da koristite reference u odnosu na osnovni folder lokacije.

Obavezno snimite dokument pre nego što počnete da umećete grafičke elemente. Ako to ne uradite, Dreamweaver će prikazati upozorenje i sačekati dok ne snimite datoteku, da bi popravio putanju slika. Ako se slika koju ste izabrali u okviru za dijalog Select Image Source nalazi izvan lokalne prezentacije, Dreamweaver će prikazati i sledeće upozorenje ispod menija Relative To: The file is outside the root folder (Izabrana datoteka se nalazi izvan osnovnog direktorija lokacije).

Od verzije 8 Dreamweaver prilikom svakog umetanja slike zahteva da se unese i alternativni tekst za svaku sliku. Tekst iz polja Alt prikazuje se umesto slike ako je posetilac onemogućio prikazivanje slika u svom browseru, ako njegov browser uopšte ne može da prikazuje slike ili ako učitavanje određene slike nije uspelo. Umesto slike, tada se prikazuje tekst koji ste upisali u polje Alt.

Slika 21. Umetanje slike u html stranicu

Kada uvezete grafički objekat, njegova širina i visina prikazuju se na panou svojstava i automatski upisuju u HTML kod, što browseru daje podatke potrebne za definisanje izgleda strane. Veličina slike bitno utiče na brzinu njenog učitavanja. U Dreamweaveru možete da promenite te dimenzije, korišćenjem miša ili pomoću polja u panelu svojstava.

Slika 22. Promena veličine slike: širina je smanjena neproporcionalno, pa je u panou za promenu osobina ispisana podebljano i ažuriranje slike


33

2014

Parametri širine i visine automatski se prilagođavaju novim dimenzijama slike i ispisuju podebljanim brojkama. Ovo formatiranje je pokazatelj da je grafičkom objektu menjana veličina. Dešava se da slučajno promenite veličinu slike, pa podebljani brojevi treba da vas podsete da je veličina menjana. Veličinu slike možete promeniti i upisivanjem novih vrednosti u polja za širinu (eng. Width, W) i visinu (eng. Height, H).

Ako hoćete da odnos širine i visine slike ostane nepromenjen prilikom menjanja njene veličine, držite taster Shift dok mišem povlačite ručice u uglovima slike.

Ponekad treba istaći sliku u odnosu na pozadinu. Jedan od načina da se to postigne jeste i dodavanje okvira oko slike. Okvir može da privuče pažnju na sliku i da doprinese ujednačenosti stila cele Web prezentacije. Ponekad okvir može da posluži i kao hiperveza.

Na panou svojstava upišite 1 u polje Border. Dreamweaver će oko grafike nacrtati okvir, debljine 1 piksel. Debljinu okvira možete proizvoljno da zadajete. Boja okvira jednaka je podrazumevanoj boji teksta, zadatoj u okviru u dijaloga Page Properties. Ako slici pridružite hiperlink, boja okvira te slike postaće jednaka podrazumevanoj boji hiperlinkova, zadatoj u okviru za dijalog Page Properties.

Mogućnosti definisanja rasporeda elemenata strane u HTML-u obuhvataju i omotavanje teksta oko slika. Slika se prikazuje u podrazumevanom položaju, u kome prvi red teksta počinje na visini donje ivice slike.

Ako iz padajuće liste Align na panou svojstava izaberete opciju Left, slika će biti poravnata s levom marginom. Tekst desno od nje ide na visini donje ivice slike do desne margine i zatim se u novom redu vraća sve do leve. Promenom atributa Align, oko slike možete da prelomite više redova teksta. Kada izaberete opcije Left ili Right u padajućoj listi Align, Dreamweaver stavlja simbol sidra za mesto gde je slika umetnuta. Ako hoćete, možete da premestite ovaj simbol na drugo mesto. Sidro mora biti na početku teksta, da bi prelamanje teksta oko slike bilo ispravno. Ovaj simbol pokazuje mesto gde se HTML oznaka slike nalazi u odnosu na tekst. Ako ne vidite taj simbol, izaberite opciju menija View, Visual Aids, Invisible Elements i potvrdite istoimenu stavku. Simbol sidra se ne vidi u browseru.

Kada omotate tekst oko slike, verovatno ćete hteti i da prilagodite prostor oko nje. Možete da dodate vertikalni prostor (eng. V space) i horizontalni prostor (eng. H space). Ako na panou svojstava, upišete 10 u polje H Space, ovaj parametar znači da će s leve i s desne strane slike biti 10 piksela slobodnog prostora. Ne možete da dodate prostor na samo jednu stranu slike.

Sliku možete da podelite i na nekoliko hiperveza pomoću mapirane slike (eng. image map), što je naziv za sliku s više aktivnih područja. Aktivna područja ne moraju biti pravougaona, već mogu imati i druge oblike. Alatkom Rectangular Hotspot ispod imena mape na panou svojstava može se nacrtati aktivno područje na slici.

Oko imena na tako označenom delu slike pojaviće se providno plavozeleno područje s ručicama, a pano Properties će prikazati svojstva tih aktivnih područja. Dreamweaver automatski upisuje znak za broj (#) u polje Link panoa svojstava. Ne brišite ovaj znak jer on rezerviše mesto za hipervezu i ukazuje na to da se područje može pritisnuti. Kada napravite jednu ili više mapiranih slika, pojaviće se ikonica mape na dnu dokumenta (najčešće). Ova ikonica liči na ikonicu sidra, a vidi se samo u Dreamweaveru, ne i u browseru. Vidljivost ovakvih objekata možete da uključujete i isključujete pomoću opcije menija View, Visual Aids.


34

2014

Aktivna područja koja napravite lako je preurediti: možete im menjati veličinu, premeštati ih i brisati kad god hoćete. Da biste premestili aktivno područje, dovedite pokazivač miša u područje i prevucite ga. Ako hoćete da uklonite aktivno područje, izaberite ga i pritisnite Backspace. Ako znak # u polju Link zamenite URL adresom i izaberete opciju "_blank" u padajućoj listi Target, ta se hiperveza otvara u novom prozoru browsera.

Slika 23. Kreiranje mapirane slike

Ako hoćete da dobijete kvadratno aktivno područje pomoću alatke za pravougaona aktivna područja (Rectangular Hotspot), držite taster Shift dok crtate područje mišem.

Panel Assets i Flash dugme Da ne bi pamtili svojstva svih slika, naročito na velikim sajtovima pomaže vam panel Assets. On se nalazi u grupi panela Files pored Site panela. Na ovom panelu možete raditi na dva načina, uz izabranu opciju Site, što daje celokupan spisak svih slika u sajtu, ili uz izabranu opciju Favorites, kada imate spisak u koji dodajete slike po izboru. Ako sajtu dodate novu sliku ona se neće odmah pojaviti na panelu Assets, zato je potrebno pritisnuti dugme Refresh Site List u donjem desnom uglu panela.

Slika 24. Panel Assets

Da bi ubacili sliku na označeno mesto u dokumentu, jednostavno je izaberite sa panela Assets i kliknite insert. Preporučljivo je slikama odmah zadati imena i <alt> oznake da bi uštedeli vreme i olakšali kasniji rad.


35

2014

Još jedan način za uštedu vremena je smeštanje onih slika sa kojima često radite u spisak Favorites. U ovaj spisak možete smestiti bilo koju sliku sadržanu unutar osnovnog direktorijuma sajta, tako što ćete je označiti u opciji Site i kliknuti dugme Add to Favorites u donjem desnom uglu. Kada izaberete grafički objekat u spisku Favorites dugme Add to Favorites se pretvara u dugme Remove from Favorites, pa tako možete i ukloniti željenu sliku iz ovog spiska. Za organizaciju slika panela Favorites koristi mogućnost dodavanja foldera u spisak Favorites (dugme New favorites Folder).

Slika 25 i 26. Insert Flash Button

Dodavanjem Flash objekata možete da postignete specijalne efekte. Flash dugmad ima nekoliko stanja u zavisnosti od položaja pointera miša. Prvo stanje je izgled dugmeta kada pointer nije na njemu. Drugo stanje je kada pokazivač jeste na dugmetu ali taster miša nije pritisnut. Treće stanje je kada je pokazivač na dugmetu a taster pritisnut. Da bi napravili Flash dugme u panelu Common izaberite karticu Flash i pritisnite ikonicu Flash dugmeta. Otvoriće se prozor Insert Flash Button.

U spisku Style izaberite stil dugmeta, u listi Font font a u polju Size odgovarajuću veličinu. Naravno sve ove parametre i kasnije možete promeniti. Ovde možete odrediti i boju pozadine dugmeta (polje BG color). Tekst dugmeta upisujete u polje Button Text, a ime pod kojim će te ga zapamtiti u Save As. Da bi videli efekte novog dugmeta pritisnite dugme Play na panelu Properties. Tada se dugme 'ponaša' baš onako kao u browseru. Za prekid probe tu je dugme Stop.

Napomena: Flash elementi mogu ulepšati izgled Vaše stranice, ali isto tako ukoliko ih na strani ima previše, ceo sajt može biti neozbiljno shvaćen. Isto tako, posetioci moraju imati instaliran Flash player na svom računaru, jer ukoliko ga nemaju, tim sadržajima ne mogu pristupiti. Flash elementi se mogu duže učitavati, što posetiocima sa slabijom internet konekcijom može smetati i tako ih oterati sa Vašeg sajta. U svakom slučaju, ne treba previše koristiti Flash objekte na strani ukoliko to nije potrebno.

Izrada interaktivnih stranica - rollover image JavaScript se na Web stranama često koristi za pravljenje slika sa prelazom –slika koje se menjaju kada posetilac dovede pokazivač miša iznad njih. U Dreamweaveru možete napraviti ovakve slike a da pritom ne bacite nijedan pogled u HTML i JavaScript kod.

Da bi napravili sliku s prelazom na izabranom mestu na strani pritisnite dugme Rollover Image na traci Common panela Insert. Otvoriće se prozor Insert Rollover Image


36

2014

Slika 27. Rollover Image

Poželjno je da date ime slici (ako to ne uradite Dreamweaver automatski dodaje svoja imena npr. Image1, Image2, ...).

Prvo treba da unesete sliku koja će biti original, tj. sliku koja će biti na strani pre nego što posetilac dovede pokazivač miša iznad nje (dugme Browse do polja Original Image). Zatim treba da unesete sliku koja će se pojaviti kada posetilac pređe pokazivačem preko originalne slike (dugme Browse do polja Rollover Image). Slika sa prelazom koja se pojavljuje na početku i ona koja je zamenjuje treba da imaju iste dimenzije, inače će druga slika biti smanjena ili uvećana u skladu s dimenzijama prve slike i zato izobličena. Takođe odmah možete napraviti grafičku hipervezu unoseći u polje 'When Click, Go To URL' URL adresu ili putanju do povezane strane. Ako ne upišete ništa u ovo polje, Dreamweaver upisati znak #, u polje link na panelu Properties. Taj znak saopštava browseru da pokazivač miša pretvori u šaku kada ga korisnik dovede iznad slike, ali i da ga ostavi na toj strani kada klikne na nju. Ovde možete zameniti ovaj znak proizvoljnom hipervezom ka drugoj strani istog sajta ili bilo kakvom URL adresom, ali ne smete ovo polje ostaviti prazno jer ćete tako ukloniti JavaScript kod koji izvršava prelaz sa jedne slike na drugu.

Da biste umetnuli animaciju izradjenu u Flashu: 1. Izaberite mišem tačku na kojoj ćete postaviti animaciju u Flashu. 2. Izaberite stavku Insert, Media, Flash 3. Pronadjite željenu datoteku, označite je i izaberite dugme OK. Otvoriće se dijalog Object

Tag Accessibility Attributes. 4. U polje Title dijaloga upišite alternativni tekst. Izaberite dugme OK. 5. Da biste reprodukovali animaciju u alatki property Inspector izaberite dugme Play.

2.8. Umetanje tabela

Dreamweaver pruža dve mogućnosti za pravljenje tabela: prikaze Layout i Standard.

Prikaz Layout je sličan programu za pravljenje rasporeda elemenata na strani, gde se crtaju pravougaonici u koje zatim ubacujete tekst ili slike. Možete da menjate veličinu tih pravougaonika i da ih razmeštate po strani kako hoćete. Na traci Insert izaberite karticu Layout i pritisnite opciju Layout View. Prešli ste u prikaz Layout, u kome se elementi lako smeštaju na stranu. Prikazaće se obaveštenje pod naslovom "Getting Started in Layout View", koje ukratko opisuje glavne alatke: za pravljenje nacrta ćelije i za pravljenje nacrta tabele. Kada pročitate ovo objašnjenje, pritisnite OK. U pomenutom objašnjenju postoji polje "Don't show me this message again" (Više ne prikazuj ovu poruku). Ako ne potvrdite ovo polje, isto objašnjenje će se ponovo prikazati kada restartujete Dreamweaver i pređete u prikaz Layout.

Neposredno ispod naslovne trake dokumenta, pojaviće se svetlosiva traka sa natpisom "Layout View". Mada izgleda kao da je sastavni deo dokumenta, ova traka se ne vidi u browserima i koristi se u Dreamweaveru samo da bi vas obavestila u kom prikazu radite.


37

2014

Slika 28. Layout način rada

SAVET: Drugi način da pređete u prikaz Layout daje opcija menija View, Table Mode, Layout Mode. Možete da upotrebite i prečicu s tastature Ctrl+F6.

Pritisnite ikonicu Draw Layout Cell u području Layout Insert. Kada dovedete pokazivač u prozor dokumenta, on će se promeniti u znak plus (+). Alatka Draw Layout Cell služi za crtanje ćelija, odnosno pravougaonika koje zovemo ćelije, bilo gde na strani. Sadržaj tabele je podeljen na njene ćelije, jer sve tabele imaju jednu ili više ćelija u preseku kolona i redova. U prikazu Layout ne morate da brinete o broju i rasporedu redova i kolona kada crtate tabelu, jer se o njima automatski brine Dreamweaver kada naznačite mesto ćelija na strani.

Slika 29. Crtanje tabele pomoću alata "Draw Layout Cell"

Dovedite pokazivač na sredinu strane, zatim pritisnite miša i vucite ga dok kontura ćelije ne bude odgovarajuće veličine. Automatski će se iscrtati struktura tabele, koja sadrži ćeliju koju ste sami nacrtali. Nacrt tabele je širok kao prozor dokumenta, što vas ne sprečava da veličinu te tabele menjate kako god hoćete. Nacrt ćelije je iscrtan plavom bojom da bi se razlikovao od nacrta tabele, koji je zelen. Puna plava linija naznačava da je tačka umetanja u ćeliji, dok isprekidana plava linija naznačava da tačka umetanja nije u ćeliji. Svi ostali delovi nove tabele, osim ćelije, iscrtani su sivom bojom. Tanke bele linije označavaju redove i kolone tabele koju je Dreamweaver nacrtao oko nacrta vaših ćelija. Kada dovedete pokazivač miša iznad ivice nacrta ćelije, on postaje crven, i ukazuje na ćeliju iznad koje se nalazite

Na vrhu nacrta tabele podrazumevano se prikazuje traka koja olakšava prepoznavanje tabele; traka sadrži meru širine kolona tabele i njihove podmenije. Zbog ove trake, tabela je pomerena od vrha strane, ali to se u browserima ne vidi.


38

2014

Menjanje okvira tabele

Dok budete radili u prikazu Layout, dodavaćete nove ćelije, menjati im veličinu i premeštati. Okvir ćelije ne sme da se preklopi s drugim ćelijama, niti može da se premesti izvan okvira tabele. Dovedite pokazivač iznad plave ivice tabele i pritisnite taster miša kada se pokazivač oboji u crveno. Ivica ćelije će poplaviti; pojaviće se i ručice koje možete da povučete i tako promenite veličinu ćelije. Da biste prikazali ručice za promenu veličine ćelije, pritisnite je držeći taster Crtl. Tasteri sa strelicama pomeraju ćeliju za po jedan piksel kada ih pritisnete. Ako pri tom budete držali taster Shift, pomeraće se po 10 piksela.

Kada crtate ćeliju na strani, prikazuju se bele vođice koje olakšavaju crtanje drugih ćelija koje treba da budu poravnate s prvom ćelijom. Upotrebite horizontalne vođice za poravnanje vrhova ćelija. Ako hoćete da nacrtate više ćelija, a da pri tom ne morate više puta da pritiskate ikonicu Draw Layout Cell, držite taster Crtl dok budete crtali prvu ćeliju. Možete da nastavite crtanje novih ćelija sve dok ne otpustite taj taster.

Nekoliko svojstava svake ćelije možete da menjate. Možete da obojite pozadinu svake ćelije zasebno ili cele tabele. Isto tako, možete da kontrolišete horizontalno i vertikalno poravnanje objekata unutar svake ćelije.

U polje Bg na panou svojstava možete upisati oznaku boje pozadine ili izabrati boju iz ponuđene palete (ili pipete). Ćelija se bira pritiskanjem njene ivice (tako da vidite njene ručice za biranje), a ne postavljanjem kursora u nju.

Ako hoćete da promenite boju pozadine cele tabele, pritisnite njenu zelenu ivicu kako biste je izabrali; možete da pritisnete i bilo koju sivu površinu unutar tabele. Zatim pritisnite polje Bg i izaberite boju iz palete.

Ako u padajućoj listi Horz na panou svojstava izaberete opciju Center, time ste promenili poravnanje teksta u ćelijama, koji je sada centriran u odnosu na levu i desnu ivicu ćelije. Opcija Middle tekst centrira po vertikali ćelija.

Širina tabele i slike koje održavaju razmak

U prikazu Layout možete da kontrolišete širinu tabele na dva načina: korištenjem podrazumevane širine ili opcije Autostretch, koja prouzrokuje da ćelije automatski menjaju širinu u zavisnosti od

širine prozora browsera.

U ovoj vežbi primenićete opciju Autostretch i naučiti da koristite slike koje održavaju razmak (eng. spacer images).

Ukoliko određena slika za održavanje razmaka nije pridružena prezentaciji, pojaviće se okvir za dijalog Choose Spacer Image.

Ako se gornji okvir za dijalog prikaže, izaberite opciju Use an Existing Spacer Image File (Upotrebi postojeću sliku za održavanje razmaka), pritisnite OK i pronađite sliku. Prikazani okvir za dijalog sadrži i opciju za pravljenje slike za održavanje razmaka. Ako radite na prezentaciji kojoj nije pridružena slika za održavanje razmaka, izaberite opciju Create a Spacer Image File i pritisnite OK, kako biste došli do foldera u koji Dreamweaver treba da snimi sliku za održavanje razmaka. Najbolje mesto za to je folder Images.

Kolona koja automatski prilagođava svoju širinu, u tabeli se prikazuje cik-cak linijom. Kada izaberete opciju automatskog prilagođavanja širine kolone Autostretch, Dreamweaver umeće slike


39

2014

za održavanje razmaka kako bi održao zadatu, fiksnu širinu kolona. Slika za održavanje razmaka određuje razmak ćelija u tabeli, ali se ne vidi u prozoru browsera.

Ako hoćete da uključite automatsko održavanje širine kolone, možete da otvorite i podmeni u zaglavlju kolone i da tamo izaberete opciju Make Column Autostretch. Dok menjate širinu prozora browsera, menja se i širina ove kolone, odnosno svih njenih ćelija. Pomoću belih vođica na strani, utvrdite da li pojedina ćelija pripada koloni koju ste izabrali. Ako odlučite da ne koristite slike za održavanje razmaka, kolone menjaju veličinu, pa čak i nestaju, ukoliko nemaju sadržaja.

Slike za održavanje razmaka možete i sami da umećete i uklanjate, a možete pustiti i Dreamweaver da ih automatski dodaje prilikom pravljenja Autostretch kolone. Ako hoćete sami da umećete i uklanjate slike za održavanje razmaka, izaberite jednu od sledećih opcija u podmeniju na vrhu kolone:

Add Spacer Image: Umeće sliku za održavanje razmaka u kolonu. Tu sliku nećete videti, ali kolona može malo da se pomeri.

Remove Spacer Image: Uklanja sliku za održavanje razmaka i kolona može malo da se pomeri.

Remove All Spacer Images: Sve ćelije mogu malo (ili mnogo) da se pomere, u zavisnosti od sadržaja. Kolone u kojima nema sadržaja mogu potpuno da nestanu.

Podmeni na vrhu kolone je kontekstni i menja se u zavisnosti od kolone koju ste izabrali. Nemaju sve kolone sve tri gornje opcije.

Izrada tabele u prikazu standard

Prednost standardnog prikaza je preciznost i mogućnost detaljnije kontrole izgleda tabele. Ako su informacije koje hoćete da prikažete podeljene u redove i kolone, lakše je upotrebiti standardnu tabelu nego nacrtati novu. Često ćete u standardnom prikazu imati veće mogućnosti da kontrolišete izgled tabele.

Pritisnite opciju Standard View na kartici Layout trake Insert. Kada umetnete tabelu u standardnom prikazu, njene ćelije i ivice se vide odmah, a ikonice za crtanje ćelija i tabela su nedostupne. Za prelazak u standardni prikaz možete da upotrebite i opciju menija View, Table Mode, Standard Mode. Treći način za prečice s tastature; Shift+Ctrl+F6.

Za umetanje tabele može da posluži dugme Table na kartici Tables trake Insert. Otvara se okvir za dijalog Insert Table. Okvir za dijalog Insert Table sadrži polja za davanje sledećih parametara:

Rows: Broj redova tabele. Podrazumevana vrednost u Dreamweaveru je 3. Columns: Broj kolona tabele. Podrazumevana vrijednost je 3. Width: Širina tabele u pikselima ili u procentima širine prozora browsera. Za precizno

raspoređivanje teksta i slika bolje su dimenzije zadate u pikselima. Dimenzije u procentima su dobre kada je odnos širine i visine kolona važniji od njihove apsolutne širine. Podrazumevana vrednost širine u Dreamweaveru je 75%.

Border: Debljina ivice tabele. Podrazumevana vrednost u Dreamweaveru je veličina fonta 1 piksel

Cell Padding: Razmak između sadržaja ćelija tabele i njenih ivica. Ako ne zadate ovaj parametar, njegova podrazumevana vrednost je 1 piksel. Ako uopšte nećete razmak između sadržaja ćelija tabele i njenih ivica, upišite 0 u ovo polje. Prazno polje znači da je izabrana Dreamweaverova podrazumevana vrednost.

Cell Spacing: Razmak između ćelija tabele, ne računajući ivice. Ako ne zadate ovaj parametar, njegova podrazumevana vrednost je 1 piksel. Ako uopšte nećete razmak


40

2014

između ćelija tabele, upišite 0 u ovo polje. Prazno polje znači da je izabrana Dreamweaverova podrazumevana vrednost.

Slika 30. Insert Table

2.9. Pravljenje šablona (Template-a)

Šablon je posebna vrsta datoteke u Dreamweaveru koja se koristi kada postoji dosta stranica u kojima se nalazi deo istog koda (teksta, slika, grafike, tabela,...). Unutar šablona se definišu područja koja su zajednička i područja u koje se unosi sadržaj koji se nalazi samo u toj stranici. Svaka promena na šablonu može se automatski reflektovati na izmene svih stranica za koje je taj šablon vezan, odnosno od kojeg su napravljene.

Šablon definiše izgled i raspored strana koje ćete napraviti pomoću njega. Šablon možete da pravite od nule, a možete da uzmete i postojeću HTML stranu i da je snimite kao šablon, naredbom File, Save As Template. U dijalogu "Save As Template" birate prezentaciju u koju ćete snimiti šablon. Dreamweaver šablonu automatski daje ime datoteke iz koje je nastao. Ako hoćete da promenite ime šablona, upišite ga u polje Save As. Ono ionako služi samo vama: Šablonima dajte opisna imena. Strana je tako snimljena kao šablon, pa možete da je koristite za pravljenje drugih strana.

Šablon se snima u folder Templates sa nastavkom imena, .dwt. Ako takav folder ne postoji, Dreamweaver će ga automatski napraviti.

Drugi korak u pravljenju šablona jeste definisanje oblasti na strani koje se mogu menjati u dokumentima napravljenim na osnovu tog šablona.

Po pravilu, sve oblasti šablona su nepromjenljive. Ako hoćete da menjate informacije na stranama napravljenim pomoću šablona, morate da definišete oblasti na njima koje se mogu menjati. Ove oblasti na mnogim Web lokacijama sadrže tekst. Svi delovi šablona koji nisu izričito definisani kao promjenljivi, daju nepromjenljive oblasti strana zasnovanih na tom šablonu. Prilikom rada na šablonu možete da menjate i oblasti koje će biti promjenljive i one koje to neće biti, dok na strani napravljenoj pomoću šablona možete da menjate samo oblasti definisane kao promjenljive.


41

2014

Za vežbu kreirajte prazan HTML dokument, a zatim u njemu nacrtajte tabelu sa 2 reda i 2 kolone. Snimite datoteku kao šablon, pod imenom Sablon.dwt.

U šablonu Sablon.dwt izaberite drugu ćeliju u drugom redu tabele pomoću birača oznaka na dnu prozora dokumenta: pritisnite oznaku <td>. Ovaj odeljak strane mora biti promenljiv, kako biste mogli da menjate njegov sadržaj na stranama koje ćete napraviti pomoću ovog šablona. Pritisnite ikonicu Editable Region na kartici Templates trake Insert. Otvara se okvir za dijalog New Editable Region (nova promjenljiva oblast). Upišite reč "tekst" kao ime promenljive oblasti šablona i pritisnite OK.

Slika 31. Pravljenje promenljive oblasti u šablonu

Imena oblasti ne smeju da sadrže specijalne znakove (znakove navoda, zagrade itd.). Svaka oblast jednog šablona mora imati drugačije ime. Pošto ste izabrali ćeliju tabele kada ste definisali promenljivu oblast, cela ćelija je istaknuta plavim okvirom na čijem vrhu jezičak prikazuje ime promenljive oblasti. Ako se ne vide imena i konture izabranih oblasti, izaberite opciju menija View, Visual Aids, Invisible Elements.

Ne možete definisati više ćelija tabele kao jednu promjenljivu oblast. Ako hoćete da više ćelija tabele bude promenljivo, podesite da cela tabela bude promenljiva ili je podelite na nekoliko promenljivih područja. Ako izaberete nekoliko ćelija tabele i definišete ih kao promenljive, cela tabela će postati promenljiva oblast. Sve što je u ćeliji izvan izabranog područja oivičenog plavom konturom, biće nepromenljivo u dokumentima napravljenim pomoću ovog šablona.

Imena svih promenljivih oblasti koje ste napravili prikazuju se na dnu menija Modify, Templates. Ako izaberete promenljivu oblast, do njenog imena u spisku pojaviće se znak za potvrdu; isto važi i kada je kursor u toj oblasti ili je izabran neki element unutar nje. Sve što treba da se menja mora biti u promenljivoj oblasti, uključujući i hiperveze.

Ako budete pravili hiperveze u originalnoj datoteci šablona, za pronalaženje hiperveze upotrebite ikonicu foldera ili alatku za pravljenje hiperveza Point-to-File. Obe se nalaze na panou svojstava. Hipervezu ne smete upisivati neposredno u odgovarajuće polje panoa svojstava, jer hiperveze u šablonu neće raditi. Kako se šabloni čuvaju u folderu Templates, njihove putanje su drugačije od onoga što bi se očekivalo. Dreamweaver automatski formira ispravne putanje kada koristite jednu od dve predložene metode.

Više alatki i mogućnosti predviđenih za pravljenje i modifikovanje šablona dostupne su samo u prikazu Design u kome ste radili: Neki kontrolni objekti za šablone nisu dostupni u prikazu Code. Dakle, ako radite u prikazu Code i ne možete da obavite određene operacije sa šablonom, pređite u prikaz Design. Oblast koja se ponavlja (eng. repeating region) jeste područje strane koje se ponavlja više puta. Oblasti koje se ponavljaju naročito su pogodne za objekte koji se ponavljaju promenljiv broj puta


42

2014

na stranama napravljenim pomoću šablona. Ove oblasti omogućavaju precizno kontrolisanje izgleda tabela s više stavki.

Naredbom Insert, Template Objects, Repeating Region kreirate opcionu oblast.

Slika 32. Ponavljajuća oblast šablona

Kreirajte dokument koji liči na primer prikazan na sledećoj slici; Unutar tabele 2 x 2 kreirajte jednu opcionu oblast (u prvom redu, sa imenom "Opciona_oblast") i jednu običnu oblast (u drugom redu, sa imenom "tekst"). Unutar opcione oblasti ubacite još jednu tabelu sa 2 kolone i u svaku njenu ćeliju ubacite po jednu ponavljajuću oblast (sa imenima "Ponavljajuca_1" i "Ponavljajuca_2"). Sadržaj tako kreiranih oblasti se neće moći menjati u stranici kreiranoj pomoću ovog šablona, jer se ne nalaze unutar promenljive oblasti.

Slika 33. Primer šablona sa oblastima Snimite i zatvorite datoteku Sablon.dwt.

Pravljenje strana pomoću šablona

Sledeći korak u izradi prezentacije pomoću šablona jeste pravljenje strana na osnovu originalnog šablona. U prikazanom primeru napravite nove strane na osnovu šablona profile koji ste napravili u prethodnom primeru. Te strane će naslediti sadržaj originalnog šablona; moći ćete da menjate samo one delove koje ste definisali kao promenljive oblasti.

Izaberite File, New i pritisnite karticu Templates u okviru za dijalog New Document. Na kartici Templates prikazuje se spisak definisanih prezentacija i spisak svih šablona pridruženih izabranoj prezentaciji.

Izaberite profile u spisku šablona prezentacije "Ispitni zadaci", ostavite polje "Update Page when Template Changes" (ažuriraj strane kada se izmeni šablon) potvrdjeno i pritisnite dugme Create. Napravili ste novu stranu na osnovu šablona "Sablon". Mada novi dokument prikazuje sav nasledjeni sadržaj šablona, ipak ga treba snimiti. Snimite datoteku pod imenom primer.html


43

2014

Slika 34. Kreiranje nove stranice pomoću šablona

Na novoj strani vidite boju za isticanje zaključanih oblasti (podrazumevana boja je svetložuta). Ime šablona se prikazuje na jezičku iste boje, u gornjem desnom uglu prozora dokumenta. Kada dovedete pokazivač miša iznad zaključane oblasti (ili pokušate da je pritisnete), on će se pretvoriti u precrtan krug. To pokazuje da se te oblasti ne mogu menjati. Na isti način kreirajte još jednu html stranicu.

Kada uključite opcionu oblast, pojaviće se u stranici. Ponavljajuće oblasti koje se nalaze u njoj ćete moći dodavati pomoću tastera "+" koji će se pojaviti pored imena oblasti. Nećete ih moći brisati, jer se ni opciona ni ponavljajuće oblasti ne nalaze u promenljivoj oblasti. Iz toga vidite da prilikom kreiranja oblasti u šablonu treba poštovati hijerarhiju; sve oblasti koje se nalaze u šablonu moraju biti u promjenljivoj oblasti.

Slika 35. Upravljanje opcionim oblastima

Ako je potrebno izvršiti izmenu svih stranica koje su vezane za neki šablon, potrebno je otvoriti datoteku sa šablonom (sa ekstenzijom .dwt), izvršiti izmene u njoj, a zatim je snimiti na disk. Prilikom snimanja, pojaviće se dijalog sa pitanjem da li želite da se te promene reflektuju na sve stranice koje su vezane za taj šablon (Update) ili da se snimi samo datoteka šablona, bez promena na stranicama koje su za njega vezane ((Don't Update).

Naredbom Modify, Templates, Update Current Page se stranica može naknadno ažurirati tako da prihvati izmene koje su urađene na šablonu.


44

2014

Naredbom Modify, Templates, Detach from Template se stranica odvaja od šablona, tako da se njen sadržaj ne menja, a samo se raskida njena veza sa šablonom (prilikom ažuriranja se promene na šablonu neće reflektovati na sadržaj stranice).

2.10. Hiperveze (linkovi)

Moć HTML-a potiče od njegove ugrađene mogućnosti da poveže tekstualna i grafička područja sa drugim dokumentima. Browser obično ističe ta područja (bojom ili podvlačenjem) kako bi ukazao korisniku da su to hipertekstualne veze. Hiperveza u HTML-u ima dva dela: ime (ili URL adresu) datoteke s kojom se povezuje i tekst ili grafiku koja služi kao područje koje se može kliknuti i naziva se aktivno područje (hotspot) na strani. Kada posetilac klikne na aktivno područje, browser koristi putanju hiperveze za skok do povezanog dokumenta. Da bi zadali boje pojedinih vrsta hiperveza izaberite opciju menija Modify Page Properties:

Hiperveze (links), početna boja koju korisnik vidi pre nego što pritisne hipervezu. Podrazumevana boja u browserima je plava.

Posećene hiperveze (visited links), boja u koju hiperveza pređe kada je korisnik pritisne. Standardna u browseru je ljubičasta,

Aktivne hiperveze (active links), boja u koju hiperveza pređe kada je korisnik pritisne i zadrži taster miša pritisnut. Podrazumevana boja je crvena.

Slika 36.

Pritisnite OK kada ste odredili boje hiperveza i sačuvajte stranu. Hiperveze vode posetioca do drugih dokumenata unutar tekuće Web strane ili do strana na drugim lokacijama. Postoje dva opšta pristupa kreiranja hiperveza (linkova):

napraviti set praznih strana, zatim ih povezati, i na kraju stavljti sadržaj u njih; ili kreirati link na stranu koja još ne postoji, pa je tek kasnije formirati i dati joj ime koje ste

već naveli pri kreiranju linka.

Na ovom primeru ću Vam pokazati kako se prave Hiperveze. Recimo, napišite nekakav tekst. Ja sam stavio "O NAMA". Obeležite ga. Sledeći korak- Izaberite mali folder koji se nalazi ispod status bara. Sa njegove leve strane se nalazi polje Link gde se nalazi adresa objekta (stranice, elementa i sl...) sa kojom će pojam "O NAMA" biti povezan. Kliknite na sličicu foldera. Otvara Vam se putanja gde ćete tražiti objekat sa kojim se povezujete. Pronađite i izaberite objekat i završite sa OK. Tada se uspešno kreirali Hipervezu.


45

2014

Veza tada postaje podvučena i kada se pređe preko nje, pojavljuje se mala ruka. Na prethodnoj slici videli smo kako se rade osnovna podešavanja vezana za prikazivanje izgleda Hiperveze.

Ponovo važi pravilo da ako ga povezujete sa nekim elementom ili stranicom u okviru vašeg sajta, taj elemenat (stranica)- treba da bude iskopiran u lokalni folder gde se sam sajt nalazi. Ukoliko ga povezujete sa nekom drugom adresom (drugim sajtom), u prazno polje pored oznake link, jednostavno unesite željenu adresu. Recimo, hoću da određeni tekst- u ovom slučaju "O NAMA" uputim na Google, tj. kada kliknem na njega, da me odvede direktno na sajt Google-a. U tom slučaju u polje Link kucam sledeću adreesu: http://www.google.com

Slika 37. Pravljenje Hiperveze način 1

Postoji i drugi način pravljenja linka. A to je obeležim objekat koji želim da linkujem, desni klik i izaberem opciju Make link. To izgleda ovako:

http://www.google.com/


46

2014

Slika 38. Make Link način 2

Ukoliko želite da uklonite vezu, izaberite mišem unutar teksta sa koga želite da uklonite vezu, u biraču kontrolnog koda izaberite kontrolni kod <a> i potom u alatki Property Inspector obrišite vrednost iz polja za tekst Link.

Pravljenje hiperveza za slanje elektronske pošte je veoma značajno, jer na taj način olakšavate posetiocima da se povežu sa vama. Ukoliko recimo hoću da pošaljem mail, u isto polje ću kucati mailto:[email protected]. Link za mail se može napraviti i na sledeći način:

Označite mesto na strani gde želite da umetnete hipervezu za slanje E-maila. Na panelu Insert, kartici Common pritisnite dugme za hipervezu sa slanje poruka (Email Link). Pojaviće se prozor Email Link, gde unosite tekst (koji će se prikazati na strani kao hiper veza) i Email adresu. Ako prethodno izaberete tekst koji se već nalazi na strani i zatim otvorite prozor Email Link izabrani tekst će se pojaviti u polju tekst.

Slika 39.

Odredišta veza

Kada posetilac pomoću linka ode na određenu Web stranu, ona obično zameni tekuću stranu njegovog browsera. Međutim, ponekad je pogodnije da se nova strana prikaže u drugom prozoru, jer ako ste, npr. link usmerili prema dokumentu van vaše lokacije, posetioca ćete izvesti van vaših strana. Pa ukoliko on nije zapamtio URL adresu vašeg sajta, možda neće znati da se vrati na nju. Ako se spoljna hiperveza otvori u novom prozoru browsera, originalna strana ostaje prikazana na prvom prozoru. U Dreamweaveru se mesto prikazivanja strane na koju dospevate pritiskom na hiprvezu, zadaje usmeravanjem ka cilju (target), a to se vrši u polju Target, odmah ispod polja Link na panelu Properties.

mailto:[email protected].


47

2014

Slika 40.

Osim opcije _blank, ostali ciljevi se korise uz okvire (frames) o kojima će biti govora kasnije. Ciljevi mogu biti:

blank, učitava povezanu stranu u nov prozor, parent, učitava povezanu stranu u roditeljski skup okvira, ili prozor onog okvira koji sadrži

hipervezu, self, učitava povezanu stranu u isti okvir ili prozor koji sadrži hipervezu (ovo je

podrazumevani cilj), top, učitava povezanu stranu i njime ispunjava prozor browsera, čime uklanja sve okvire sa

ekrana.

Umetanje sidara i povezivanje sa njima

Kada je dokument dugačak ili ima mnogo odeljaka, obično se pravi niz hiperveza koje odvode posetioca na određeno mesto u dokumentu. Sidro (named anchor) označava mesto na strani na

koje dovodi hiperveza.

Na slici je ukratko prikazan način kreiranja sidra i veze sa njim.

Slika 41. Kreiranje sidra i veze sa njim

Postavite kursor na neki deo strane (gde želite da umetnete sidro, obično pri kraju strane). Pritisnite dugme Named Anchor (1) na kartici Common na panelu Insert. Otvara se prozor gde treba da unesete ime sidra (2). Ime sidra ne sme da sadrži razmake, znakove interpunkcije i specijalne znake. Svako sidro na strani mora imati jedinstveno ime, inače browser neće znati na


48

2014

koje od istoimenih sidara da ode. Na strani, sidro je predstavljeno žutom ikonicom (3) koja se inače ne vidi u browseru. Još jedan način za unos sidra je opcija Insert > Named Anchor.

Sada na strani (obično na vrhu) izaberite tekst (4) koji će odvesti posetioca na odgovarajući odeljak strane (do odgovarajućeg sidra). Da bi pretvorili taj tekst u hipervezu koja referencira sidro u panelu Properties, u polje Link upišite #ime sidra (7) i kliknite Enter. Znak # govori browseru da je ovaj link unutrašnji, tj. da se zadržava na originalnoj strani. Ime koje ste upisali posle znaka # mora biti identično imenu sidra.

Ako sidro umetnete na pogrešno mesto, možete ga premestiti prevlačenjem.

Drugi način za izradu linka sa sidrom je da označite željeni tekst (4), kliknete ikonicu Point to File (5) (prva ikonica do polja Link u panelu Properties) i prevučete ikonicu (6) do sidra koje ste prethodno napravili (1,2,3) (pustite taster miša tačno iznad sidra). Ovaj način je sigurniji jer korišćenje ikonice Point to File smanjuje verovatnoću da ćete pogrešno otkucati ime sidra.

Na dugačkim stranama uobičajeno je da se na kraj svakog odeljka stavi link do sidra na vrhu strane ili do navigacionog sadržaja. Ovo sidro obično se zove #top. U ovom slučaju korisnici ne moraju da premotavaju stranu do vrha kako bi došli do linkova za prelazak na druge odeljke.

Broj linkova na jednoj strani koji referenciraju isto sidro je neograničen.

2.11. Rad sa okvirima ( Frame )

Okviri dele prozor browsera na pravougaone oblasti koje se nezavisno popunjavaju HTML sadržinom. Okviri obično dele stranu na oblast za navigaciju po Web sajtu i oblast sadržine. Oblast za navigaciju se najčešće ne menja, a oblast sadržine menja, i to svaki put kad se pritisne hiperveza u oblasti za navigaciju.

Za prikazivanje Web strane sa dva okvira browser koristi tri datoteke:

jednu koja definiše skup okvira i dve sa sadržinom svakog okvira.

Skup okvira je HTML datoteka nevidljiva korisniku koja definiše strukturu Web strane sa okvirima. Skup čuva podatke o veličini i položaju svakog okvira i imena datoteke sa njihovom sadržinom. Svaki okvir je posebna HTML datoteka. Okviri imaju ivice čije se prikazivanje može isključiti, tako da ih korisnik ne vidi, ili uključiti da bi prozor bio jasno izdeljen na okna. Okviri mogu imati trake za pomeranje sadržaja i posetiocu može biti dozvoljeno da im menja veličinu povlačenjem ivica.

Postoje dva načina da se napravi skup okvira u Dreamweaveru, možete ih unositi ručno, ili izabrati neki od gotovih skupa okvira.

Ovaj drugi način je brži jer se tada i skup okvira i svi njegovi okviri automatski definišu.Kada izaberete opciju View > Visual Aids > Frame Borders pojaviće se debela ivica oko strane u prozoru dokumenta.

Ako hoćete ručno da unesete okvire, odvucite ivicu koja opkoljava stranu u prozor dokumenta. Strana će se podeliti horizontalno (ako odvučete gornju ili donju ivicu) ili vertikalno (ako odvučete desnu ili levu ivicu).


49

2014

Slika 42. Laout→ Frames

Kada stavite potreban skup okvira na stranu, treba da ga snimite. Da biste videli stranu u browseru, i skup i datoteke sadržine svakog okvira moraju biti snimljeni.

Da bi snimili skup okvira treba da ga označite. Pošto ste izabrali (označili) skup okvira snimite ga izborom opcije File > Save Frameset As. Dok je skup okvira još izabran možete ga imenovati (polje Title na Document Toolbaru). Ako skup okvira nije izabran prilikom davanja naslova strani, naslov će biti dodeljen jednoj od strana u skupu, a ne datoteci skupa okvira.

Da ne biste grešili i radili na objektu na kome ne želite da radite, pogledajte često na panel Frames gde se jasno vidi šta je izabrano.

Karakteristike okvira i skupova okvira

Karakteristike okvira možete kontrolisati na panelu Properties. U zavisnosti od toga da li ste selektovali skup okvira ili sam okvir, opcije panela se menjaju. Ako hoćete da menjate veličine okvira treba da izaberete odgovarajući skup okvira. Veličinu okvira možete zadati na panelu Properties unosom odgovarajućih dimenzija redova odnosno kolona u polje Value, a možete i ručno da vučete ivice okvira dok ne dobijete potrebnu veličinu okvira. Dok menjate veličinu okvira morate voditi računa i o sledećim opcijama (meni Units do polja Value):

Pixels, ovom opcijom zadajete apsolutnu veličinu uspravnog ili položenog okvira, jednako upisanom broju piksela. Za okvire koji ne treba da menjaju veličinu ovo je najbolja opcija. Ako ostalim okvirima zadate veličinu pomoću drugih jedinica mere, njima će se dodeljivati prostor tek pošto okviri čija je veličina zadata u pikselima dobiju odgovarajuće vrednosti.

Percent, ova opcija zadaje procentualni deo skupa okvira koji tekući okvir treba da zauzme. Uspravni i položeni okviri čija je veličina zadata u procentima, dobijaju prostor posle okvira čija je veličina zadata apsolutno, a pre okvira čija je velična zadata relativno,

Relative, ova opcija zadaje da će tekući okvir dobijati prostor relativno u odnosu na ostale okvire i da će zadržati tekuće proporcije. Okviri čija je veličina relativna dobijaju prostor poslednji, posle onih čija je veličina zadata u pikselima ili procentima, ali zauzimaju sav preostali prostor. Ako donjem ili desnom okviru zadate relativnu veličinu on će ispuniti preostalu visinu, odnosno širinu prozora browsera.

Posle izbora veličine okvira snimite skup okvira (Save Frameset).

2.12. Korišćenje obrazaca i polja

Web stranice često prikupljaju podatke od korisnika. Obrasci (eng. Forms) omogućuju da korisnici pomoću njihovog browsera unose neke podatke i šalju ih na e-mail, čuvajući na serveru ili prosleđuju nekoj aplikaciji. Obrasci u sebi sadrže različite vrste polja za unos ili izbor ponuđenih


50

2014

podataka. On će sadržati polja u koja će posetioci upisivati podatke i zadati šta da se radi s podacima.

Pravljenje stranica mogli biste započeti postavljanjem polja, ali kada posetilac izabere dugme Submit, pretraživač neće znati šta da uradi sa podacima. Zbog toga vam je neophodan obrazac – on govori pretraživaču da su svi ti podaci deo jednog paketa, i govori mu šta treba da uradi sa svim podacima koje je prikupio.

Slika 43. Paleta Forms

Obrazac možete da stavite na stranicu naredbom Insert, Form, Form.

Crvene isprekidane linije označavaju površinu obrasca u prozoru dokumenta; ista površina je definisana unutar oznaka <form> i </form> u kodu. Crvene linije su nevidljivi elementi i prikazuju se samo u Dreamweaveru; površinu obrasca u browseru ništa ne označava. Te linije ne možete prevlačiti. Veličina obrasca zavisi od onoga što umetnete u njega, a on će se produžiti koliko treba da bi primio sav sadržaj koji mu dodate.

U polje Form Name upišite ime obrasca, ukoliko nameravate da ga kontrolišete pomoću aplikacije za izvršavanje skriptova, poput JavaScripta. Dreamweaver obrascima automatski dodjeljuje opšta imena: form1, form2 itd. Ako nemate na raspolaganju CGI skript dok radite ovu lekciju, informacije koje slede tumačite samo kao objašnjenje. Polje Action ostavite prazno, a Method ne menjajte.

Slika 44. U alatki Property Inspector podešavati ime, akciju i metod obrasca.

Action saopštava browseru šta da uradi s podacima iz obrasca. Zadaje putanju ili URL adresu lokacije i ime aplikacije (obično CGI skript ili dinamičke strane) koja će obrađivati podatke kada posetilac pritisne dugme Submit. CGI skript se nalaze na Web serveru koji obrađuje podatke koje obrazac pošalje.

Method definiše metodu kojom se podaci iz obrasca šalju: GET, POST ili Default. Podaci koje šalje obrazac čine kontinuiran tekstualni niz, koji sačinjavaju informacije koje je upisao posetilac. Metoda GET dodaje sadržaj obrasca URL adresi zadatoj u polju Action; te informacije su stoga vidljive na adresnoj traci browsera. GET nije bezbedna metoda prenosa podataka, pa se ne sme koristiti za slanje poverljivih podataka kao što su brojevi kreditnih kartica i slično. Kako browseri i serveri često nameću ograničenja dužine URL adrese, Get može da šalje malu količinu podataka. Ograničenja su različita, pa metoda Get nije dobra ni za slanje obrazaca u koje posetilac može da unese mnogo podataka, jer će obrasci izgubiti sve informacije koje predju ograničene veliečine ili dužine.

Metoda POST, s druge strane, može da šalje mnogo više podataka, pouzdanija je i bezbednija. POST koristi HTTP zahtev za slanje podataka iz obrasca u telu poruke.


51

2014

Opcija Default koristi podrazumevan metod browsera, što je obiečno GET.

Dodavanje polja za jedan red teksta Polja služe za prikupljanje informacija koje posetilac upisuje u njih. Obično se u polja za jedan red teksta upisuje ime i prezime, deo poštanske adrese ili adresa elektronske pošte. Sva polja i dugmad obrasca moraju biti smešteni unutar crvenih isprekidanih linija; u protivnom, neće biti deo obrasca. Ako pokušate da umetnete polja obrasca izvan crvenih linija, Dreamweaver će prikazati upozorenje, pitati da li želite da dodate HTML oznaku obrasca i ponuditi odgovore Yes i No. Ako izaberete No, polje ili dugmad neće raditi kao deo obrasca.

Izaberite naredbu Insert, Form Objects, Text Field.

Slika 45. Dodavanje polja za jedan red teksta

Polje za jedan red teksta umetnuto je na obrazac. Na panou svojstava prikazuju se svojstva polja kada ga umetnete ili pritisnete u prozoru dokumenta. Podrazumevana opcija vrste polja je Single line (za jedan red teskta). Izaberite polje koje ste upravo umetnuli i zamenite textfield rečju "ime" u polju Name na panou svojstava.

Slika 46. Osobine polja u obrascu

Kada se obrazac pošalje, ime tekstualnog polja opisuje informacije koje su unete u njega. U ovom slučaju, "ime" označava da je u polje upisano ime posetioca. Sva polja obrasca moraju imati imena. U imenima ne sme biti razmaka niti specijalnih znakova, a treba zapamtiti da se u njima razlikuju mala i velika slova. Dreamweaver poljima za tekst automatski dodjeljuje imena textfield1, textfield2 itd.

Dodavanje polja za više redova teksta Polja za više redova teksta olakšavaju prikupljanje velikih količina informacija od posetilaca, jer daju oblast od više redova gde posetilac može da upisuje svoj tekst. U tipična polja za više redova teksta posetioci upisuju svoje komentare, mišljenja i zahteve. U ovoj vežbi stavićete polje za više redova teksta u tabelu unutar obrasca.

Izaberite Insert, Form Objects, Textarea.


52

2014

Slika 47. Polje za više redova teksta

Polje za više redova teksta umetnuo je na obrazac, pa se na panou Properties vide njegova svojstva. Polje za jedan red teksta možete da pretvorite u polje za više redova teksta: izaberite ga, a zatim pritisnite radio-dugme Multi line u opciju Type na panou svojstava.

Dodavanje polja za potvrdu Polja za potvrdu omogućavaju korisnicima da izaberu jednu ili više opcija u grupi povezanih stavki. Polja za potvrdu se obično koriste kada posetilac treba da izabere koliko god hoće prikazanih opcija. Ako hoćete da posetilac izabere samo jednu opciju, onda upotrebite radio-dugme.

Izaberite Insert, Form, Check Box.

Slika 48. Osobine polja za potvrdu

Polje za potvrdu je umetnuto u obrazac, a pano Properties prikazuje njegova svojstva. Obično se u obrascu dodaje više polja za potvrdu (odvojite ih sa Shift+Enter).

Dodavanje radio-dugmadi Radio-dugmad su grupa opcija. Biranje jedne opcije automatski poništava izbor svih ostalih opcija grupe. Radio-dugmad se obično koristi za izbor vrste kreditne kartice i odgovore tipa da/ne. Izaberite Insert, Form, Radio Group.

Slika 49. Dijalog za kreiranje grupe radio-dugmadi


53

2014

Pomoću dugmadi plus (+) i minus (-) dodajete i brišete stavke u listama. Redosed dugmadi menjate pomoću dugmadi s trouglovima okrenutim nagore i nadole. Pritisnite dugme plus (+) i zamenite novi primerak reči "Radio" drugom riječju (npr. brojem 512). U koloni Value, zamenite sve primerke rečju "radio" odgovarajućim tekstom.

Kada koristite radio-dugmad, istim imenom morate da nazovete celu grupu stavki. Radio-dugmad treba da omogući izbor samo jedne stavke u grupi.

Slika 50. Grupa od dva radio-dugmeta

Dodavanje spiskova i menija Spisak/meni omogućava da posetilac bira opcije iz liste čija se sadržaj pomera, ili iz menija. Lista čija se sadržaj pomera omogućava da posetilac izabere više susednih ili nesusednih stavki, dok meni ograničava posetioca na izbor samo jedne stavke. U oba slučaja, izabrane stavke bivaju istaknute.

Izaberite Insert, Forms, List/Menu.

Na panou svojstva izaberite opciju List u polju Type i upišite 4 u polje Height. Potvrdite vrednost Allow multiple za polje Selections. Na obrazac je dodat mali meni, a i pano Properties prikazuje svojstva menija, jer Dreamweaver podrazumevano umeće meni, a ne listu. Promenili ste format menija u format liste čija se sadržaj pomera. Da bi objekat na obrascu bio promenjen od menija u listu, morate mu zadati visinu (eng. height) veću od 1. U polje Height treba upisati broj redova koji će se videti u listi čiji se sadržaj pomera. Ukoliko polje Selections ostavite nepotvrjeno, obavezno upišite broj vidljivih redova veći od 1. U protivnom, umesto liste čija se sadržaj pomera biće prikazan meni. Uvek zadajte visinu liste, jer ako to ne uradite, u njoj se prikazuje broj redova podrazumevan u browseru posetioca, a on je različit. Pritisnite dugme List Values na panou svojstava. Otvoriće se okvir za dijalog List Values, isti za spiskove i za menije.

Slika 51. Osobine liste


54

2014

Slika 52. Dodavanje stavki u listu ili meni

Pritisnite dugme sa znakom plus (+) za dodavanje stavke. U polje "Item Label" upišite "Intel" i zatim pritisnite taster Tab. Širinu spiska/menija odreduje dužina najduže stavke u spisku. U polje Value upišite "i". Ovaj tekst se šalje CGI skriptu ili serveru kao znak da je opcija izabrana. Pritisnite Tab ili dugme sa znakom plus (+) u gornjem levom dijelu okvira za dijalog, da biste dodali još jednu opciju u spisak. Za brisanje stavki iz dijaloga List Values upotrebite dugme sa znakom minus (-). Ponovite te korake da biste dodali u spisak stavke "AMD" i "neki drugi". U polje Value za ove stavke upišite "a" i "n". Za menjanje redosleda stavki u listi upotrebite dugmad iznad polja Value (s trouglovima okrenutim nagore i nadole).

Dodavanje dugmadi Obrasci najčešće imaju dva dugmeta: jedno za slanje (Submit) i drugo za brisanje podataka iz obrasca (Reset). Dugmetom Submit saopštava se browseru da pošalje podatke u skladu sa zadatom akcijom (Action) i metodom (Method). Dugme Reset briše informacije iz svih polja na strani.

Izaberite Insert, Form, Button.

Slika 53. Dugme za slanje obrasca

Dugme Submit je umetnuto na obrazac, a pano Properties prikazuje njegova svojstva. Kako je dugme Submit podrazumevano, ne menjate nijednu opciju za ovo dugme. Dodajte još jedno dugme Submit. Jedina razlika je u imenu - ovo se zove submit2, jer dva dugmeta ne smeju imati isto ime. Jedini objekti na obrascu koji mogu (i treba) da imaju isto ime jesu radio-dugmad koja pripadaju istoj grupi. Dugme s kojim radite u ovoj vežbi razlikuje se, jer se ne može grupisati s drugom dugmadi i dodeliće mu se samostalna akcija u sledećem koraku.

Izaberite Reset form u području Action na panou svojstava. Tekst u polju Label (oznaka dugmeta na obrascu) automatski se mijenja u "Reset". Interno ime dugmeta (eng. button name) ostaje nepromenjeno. Akcija resetovanja koju ste izabrali znači da se sva tekstualna polja, polja za potvrdu i radio-dugmad brišu i vraćaju u prvobitno stanje, koje su imala kada je strana bila učitana.


55

2014

Treća opcija u području Action je None. Za razliku od opcija Submit i Reset, opciji None nije pridružena nikakva akcija. Da bi takvo dugme nešto uradilo, treba ga povezati sa skriptom (napisanim u JavaScriptu, na primjer), koji će recimo, izračunati ukupan zbir ili kamatu i posetiocu dati konačan rezultat. Dugmadi dajte jasna imena, a u skladu s očekivanjima posetilaca. Submit i Reset su uobičajene oznake dugmadi na obrascima koje posetioci razumeju, jer se veoma često koriste.

Slika 54. Gotov obrazac u Internet Exploreru

2. 13. CSS u Dreamweaveru

U Dreamweaveru postoji niz alata koji mogu da pomognu u dizajnu, kreiranju, održavanju i pregledu web sajtova koji koriste CSS. Centralno mesto za manipulisanje i kontrolu stilova i listi stilova je pano CSS Styles (Window > CSS Styles). Preko ovog panoa možete da kreirate, menjate i ispitujete stilove, kao i da upravljate dokumentima sa stilovima koji su uvezeni preko spoljašnjih linkova ili su uvezeni.

Slika 55


56

2014

2. 13. 1. Kreiranje novog stila

Ako želite da preko panoa CSS styles kreirate novi stil, kliknite dugme New CSS Styles. Novi stil možete da napravite i ako desnim tasterom miša kliknete relevantnu CSS karticu u Tag Inspectoru i izaberete New Rule, ili ako izaberete opciju New iz padajuće liste Style u Property Inspectoru, ili ako izaberete Text > CSS Styles > New iz glavnog menija, ili ako desnim tasterom miša kliknete u prozoru Document i izaberete CSS > New. Koji god metod da izaberete, otvara se okvir za dijalog New CSS Style. U njemu možete da definišete koju vrstu stila želite da napravite i gde želite da ga postavite. Preko opcija iz Selector Type izaberite tip stila koji želite da napravite. Mogućnosti su:

Class (može da se primeni na bilo koju oznaku) – Ako izaberete ovu opciju, onda preko polja Selector možete da unesete ime klase. Ime klase treba da počne tačkom, ako zaboravite da unesete tačku, to će umesto Vas da uradi Dreamweaver.

Tag (menja se izgled određene oznake) – Ako izaberete ovu opciju, onda u polju Selector treba da definišete oznaku kojoj menjate definiciju, ili tako što ćete izabrati oznaku iz padajućeg menija ili tako što ćete ukucati oznaku u polje.

Advanced (kontekstualni selektori i sl.) – Ovu kategoriju ćete koristiti za sve što ne pripada prvim dvema. To su, na primer, pseudo klase, kontekstualni selektori i ID oznake.

Slika 56

Nakon što ste odlučili koju vrstu stila želite da napravite, kliknite OK da biste zatvorili okvir za dijalog New CSS Style. Ovim se automatski otvara okvir za dijalog Style Definition u kome možete da definišete format koji treba da bude u novom stilu. To se radi preko parametara stila.

2. 13. 2. Definisanje parametara stila

Interfejs preko kojeg zadajete formatiranje u CSS stilu je okvir za dijalog Style Definition. Ovaj okvir za dijalog se otvara čim kreirate novi stil i svaki put kada želite da menjate postojeće stilove. Tu postoji osam različitih prozora koji se odnose na različite aspekte kontrole preko CSS-a. U toku rada ćete primetiti da Dreamweaver sada u prikazu Design prikazuje većinu CSS elemenata. Ipak je dobro da stranu pogledate u različitim pretraživačima, da biste bili sigurni da će se strana prikazati na pravi način. Tip Kategorija Type sadrži opcije za formatiranje teksta. Neke opcije su same po sebi jasne, neke i nisu. Većina podešavanja dobro radi u pretraživačima, kao i u prikazu Design.


57

2014

Slika 57

Font – Izaberite grupu fontova koja se koristi u tom stilu. Ovu listu možete menjati ako kliknete strelicu naniže i izaberte opciju Edit Font List.

Size – Definiše se veličina fonta. Možete da izaberete brojčanu vrednost ili da zadate apsolutnu veličinu. Apsolutna veličina se odnosi na srednju vrednost podrazumevane vrednosti u pretraživaču korisnika, ili na definisani stil. Odatle se posle meri vrednost.

Style – Font može da se podesi na opcije normal, italic ili oblique. Razlika između opcija italic i oblique je u tome da je italic različita verzija fonta. Većina fontova ima verziju italic. Opcija oblique je originalna verzija fonta koju je računar napisao pod drugim uglom. U stvarnosti, pretraživač ih obično prikazuje na isti način, ali mogu da postoje razlike između fontova i veličina. Ako je ta razlika bitna, onda obe opcije treba da testirate u pretraživačima.

Line Height - Ovim se određuje visina jednog reda teksta. Ako radite sa projektima koji se štampaju, onda je to slično sa razmakom između redova i uvlačenjem. Normalna visina reda se izračunava na bazi veličine tipa. Linije su otprilike 20% veće nego veličina tipa. Apsolutna visina linije se može dodeliti na bazi mernog sistema koji smo dali u sledećem uokvirenom delu.

Weight – Ovim se određuje da li su slova deblja ili ne. Brojčane vrednosti (100-900) se odnose na apsolutna podešavanja, dok se opcije Bolder i Lighter zadaju relativno u odnosu na podrazumevanu težinu. Debljina slova se neće uvek isto prikazati u svim pretraživačima. Ako ovde birate neku opciju koja je različita u odnosu na Normal ili Bold, treba da proverite kako to izgleda u pretraživačima.

Variant – Ova vrednost određuje da li će se mala slova zameniti velikim, ali umanjenim slovima.

Case Određuje da li su slova velika ili mala. Sva slova su velika, sva su mala ili svaka reč počinje velikim slovom.

Color – Određuje se boja fonta.

Decoration – Ovim se podešavaju opcije redova u tekstu. Ako želite da uklonite podvlačenje kod hiperlinkova, onda treba da zadate opciju None.

Pozadina Kategorija Background kontroliše pozadinu. Preko CSS-a možete da kontrolišete pozadinu svakog elementa u bloku. To znači da svaki pasus, nivo, tabela ili neki drugi konačni element može da ima svoj stil za pozadinu. Ako želite da pozadinu primenite na celu stranu, onda morate da je zadate za oznaku body.


58

2014

Slika 58

Background Color – Ovim se zadaje boja pozadine za neki element.

Background Image – Ovim se zadaje slika koja ide u pozadini elementa. Ostala podešavanja iz ove kategorije definišu kako se prikazuje slika u pozadini.

Repeat Ova vrednost definiše da li se slika u pozadini ponavlja u vidu ploča. Možete podesiti opciju repeat, non repeat, repeat-x (samo po horizontali) ili po vertikali (repeat-y).

Attachment – Ova opcija određuje da li se slika u pozadini kreće zajedno sa stranom ili ostaje statička, tako da strana prelazi preko nje.

Horizontal Position and Vertical Poisition – Ovim se definiše postavljanje slike u pozadini. Opcije Left, Right ili Center/Middle omogućavaju da sliku poravnate relativno u odnosu na osnovni element. Ako želite da slika bude na nekom rastojanju od gornjeg levog ugla osnovnog elementa, onda unesite neko numeričko rastojanje.

Slika koju ovde zadate se u prozoru Dreamweavera može prikazati u gornjem levom uglu prozora Design. Da biste videli kako strana tačno izgleda, pogledajte je u pretraživaču.

Blok

Blokovi su diskretni delovi HTML-a. Na primer, pasus je element bloka. Sa aspekta CSS-a, to se smatra blokom koda. Kada korisničku klasu primenite na pasus, to utiče samo na kod koji je između oznake početka i kraja pasusa. Na taj način se svaki pasus tretira kao zaseban element. Većina blokova ima oznaku za početak i kraj. Ovo se razlikuje od inlajn elemenata, koji se mogu postaviti bilo gde u okviru bloka. Slika koja nema oznaku za zatvaranje je dobar primer inlajn elementa. Kategorija Block u okviru za dijalog CSS Style Definition sadrži opcije za definisanje blokova koji postoje na strani.

Slika 59


59

2014

Word Spacing – Koristi se za definisanje rastojanja između reči.

Letter Spacing – Koristi se za definisanje rastojanja između slova u reči.

Vertical Aligment – Zadaje se vertikalni aspekt razmaka između reči. Ovo možete koristiti za subscript i superscript.

Text Align – Definiše se horizonatlno ravnanje bloka sa tekstom. Može biti Left, Right, Center i Justify. Kad koristite opciju Justify, proverite kako to izgleda u pertraživaču, pošto je podrška za ovakvo ravnanje različita (i prilično loše izgleda čak i kada postoji).

Text Indent – Definiše se uvlačenje prve linije bloka sa tekstom. (Ako želite da uvučete ceo blok, treba da upotrebite opciju Margin or Padding iz kategorije Box).

Whitespace – Definiše se razmak unutar bloka. Opcija Normal spaja više razmaka u jedan. Opcija Pre ostavlja više razmaka. Opcija Nowrap ne dozvoljava prelaz u novi red, bez oznake break.

Display – Kontrolišu se osnovni aspekti elementa block, uključući i da li se element prikazuje i kako se oznaka ponaša. Sa ovim podešavanjim treba biti oprezan pošto za opciju Display u pretraživačima postoji ograničena podrška.

Box

Svaki element koji može biti blok, kao što je pasus, postoji u svom pravougaonom okviru, koji se može podešavati preko CSS-a. Neka od ovih podešavanja se koriste zajedno sa kontrolom pozicije, čime se dobija CSS pozicija. Obratite pažnju na to da će se neka od ovih podešavanja prikazati samo u pretraživaču. Trebalo bi da stalno proveravate kako nešto izgleda u pretraživaču. Za kontrolu postavljanja elementa i za rastojanja na strani ćete koristiti kategoriju Box iz okvira za dijalog CSS Style Definition.

Slika 60

Width and Height – Definišu se visina i širina elementa.

Float – Koristi se odvajanje elementa od ostatka strane. Ostali elementi mogu da teku preko ovog elementa ili da se prekidaju oko njega, slično onom što možete da radite sa slikom. Ova podešavanja se u prikazu Design prikazuju samo za slučaj slika.

Clear – Koristi se za definisanje oblasti u kojoj se ne dozovljava preklapanje elemenata. Nivo koji se pojavi u oblasti definisanoj sa Clear se postavlja ispod te oblasti. Ovim se sprečava da


60

2014

elementi bloka zauzimaju isti horizontalni prostor.

Padding – Definiše rastojanje između sadržaja bloka i njegovog okvira (ili njegove margine, ako okvir nije zadat). Ovo je slično sa atributom cellpadding kod tabela. Možete da ga podesite nezavisno za sve četiri strane elementa. U tom slučaju treba da deselektujete polje Same for All.

Margin – Margina definiše rastojanje između okvira elementa i ostalih elemenata na strani, koji se nalaze oko njega. Ovo je slično sa atributom cellspacing kod tabela, ili atributima vspace i hspace kod slika i medijskih elemenata. Ako deselektujete polje Same fo All, možete da nezavisno podešavate marginu za sve četiri strane.

Border Ove opcije se koriste za podešavanje okvira oko zadatog elementa. U pitanju je okvir u odnosu na koji se zadaju atributi padding i spacing. Ovo je slično sa okvirom tabele, ali sa više mogućnosti. Za podešavanje okvira nekog elementa na strani treba da koristite kategoriju Border iz okvira za dijalog CSS StyleDefinition.

Slika 61

Style – Možete izabrati neku od opcija Dotted, Dashed, Solid, Double, Groove, Ridge, Inset i Outset. Podrška u pretraživačima se razlikuje za pojedine opcije.

Width – Podešava se širina okvira, kao broj piksela ili varijante Thick i Thin, koje nisu brojčane.

Color – Bira se boja okvira. Treba da znate da se okvir može primeniti nezavisno na sve četiri strane elementa. Ova nezavisnost Vam omogućava da postignete efekte kao što su pravila u pasusima. List Kategorija List sadrži opcije za podešavanje listi bilo sa brojevima, bilo sa nekim oznakama.


61

2014

Type – Za liste sa oznakama (neuređene), izaberite tij oznake. Opcije su Disc, Circle i Square. Kod uređenih list birate vrstu slovne ili brojčane oznake. Opcije su Decimal Lowercase, Roman Numerals, Uppercase Roman Numerals Upper i Lowercase slova.

Bullet Image – Kod listi sa oznakama, ovim se zadaje sliki koja se koristi kao oznaka. Preko dugmeta Browse možete d; povežete sliku.

Position – Definiše se kako stavke u listi prelaze u nove redovi i koliko se uvlače. Opcija Outside će stavku iz list ravnati sa uvlačenjem prvog reda, a opcija Inside sa marginom

Positioning Opcije iz ove kategorije definišu gde se elemeni strane prikazuju na toj strani. Ovo se zove CSS pozicioniranje, ili CSS-P. Premda se CSS pozicioniranje može primeniti na većinu elemenata koji čine blokove, ono se ipak generalno koristi sa oznakom div.

Type – Ovim se definiše vrsta kontrole pozicije nekog elementa. Apsolutno pozicioniranje element postavlja relativno u odnosu na gornji levi ugao strane. Relativno pozicioniranje postavlja element relativno u odnosu na mesto u dokumentu, u kome se stil javlja u


62

2014

dokumentu. Statičko pozicioniranje postavlja element bloka na istu lokaciju na kojoj se pojavljuje i u dokumentu.

Visibility – Kontroliše se inicijalna vidljivost elementa. Nasledivanje daje elementu istu vidljivost, koja je podešena i za osnovnu oznaku. Opcija Visible čini element vidljivim. Opcija Hidden ga čini nevidljivim. Ove opcije dinamički prikazuju i uklanjaju element preko JavaScripta.

Width i Height – Isto kao istoimeni elementi u kategoriji Block. Definišu se dimenzije elementa u bloku.

Z-Index Definiše se redosled prikazivanja elemenata, ako dođe do njihovog preklapanja. Elementi sa manjim brojem se prikazuju ispod elemenata sa većim brojem. Ovaj redosled je bitan samo kod elemenata koji su pozicionirani preko CSS-a.

Overflow – Ovo se koristi kada je sadržaj nekog elementa veći od zadate visine i širine i definiše šta se dešava sa tim dodatnim materijalom. Ako je zadata opcija Visible, onda se sav sadržaj nivoa prikazuje istovremeno, bez obzira na podešenu veličinu. Opcija Hidden striktno poštuje zadatu veličinu nivoa i seče sav sadržaj koji prelazi tu veličinu. Opcija Scrollbars dodaje klizače, bez obzira da li su potrebni ili ne. Ako je sadržaj koji prikazujete bitan, pogledajte kako pretraživači to podržavaju. Opcija Auto pravi klizače samo ako je potrebno.

Placement – Ove vrednosti definišu gde element pozicioniran preko CSS-a treba da se prikaže. Kod elemenata kojima je zadata apsolutna pozicija, sve vrednosti su relativne u odnosu na ugao prozora pretraživača.

Clip – Koristi se za definisanje dela nivoa koji je vidljiv. Koristićete ovo ako želite da sakrijete deo nivoa, a da pri tome ne koristite opcije Overflow. Može se koristiti zajedno sa Java Scriptom, čime se dobijaju interesantni efekti.

2. 13. 2 Rad sa stilovima

Stilovima rukujete preko panoa CSS, Tag Inspectora, Property Inspectora, Tag Selectora i preko mnogih drugih stavki.

Primena (i uklanjanje) stilova

Lepota promene definicije HTML oznaka je u tome što to ne mora da se primeni. Kada u datoteci sa stilovima menjate definiciju oznake, svako pojavljivanje te oznake se automatski prilagođava formatiranju koje ste zadali. Kontekstualni selektori i pseudo klase rade na isti način. Korisničke klase, sa druge strane, moraju da se primene na određenu oznaku. U Dreamweaveru postoje različiti načini da to uradite.

Preko Property Inspectora – Property Inspectori za tekst i tabele imaju padajući meni sa klasama koje su u tekućem dokumentu na raspolaganju. Samo izaberite objekat/tekst, na koji želite da primenite klasu, a onda iz padajućeg menija izaberite stil koji treba da se primeni. Prvo treba da izaberete objekat na koji želite da primenite klasu, a onda da izaberete i klasu. Ako želite da uklonite primenu klase, iz menija izaberite None.


63

2014

Preko Tag Inspectora – U delu Attributes u Tag Inspectoru, u okviru kategorije CSS/Accessibility unesite ime klase koja se primenjuje.

Preko Tag Selectora – Desnim tasteron miša kliknite neku oznaku u Tag Selectoru i iz pomoćno > menija izaberite opciju Set Class. Prikazaće se lista klasa koje stoje na raspolaganju. Izaberite neku od njih. Ako ne želite da primenite ni jednu od klasa, izaberite None.

Preko CSS Styles – U meniju CSS Style postoji lista klasa koje su trenutno na raspolaganju. Ovom meniju možete da pristupite preko menija Text, ili ako desnin tasterom miša kliknete neki element na strani i izaberite opciji iz pomoćnog menija. Ako ne želite da primenite ni jedni klasu, izaberite opciju None.


64

2014

Nakon što se na oznaku primenila neka klasa, u padajućem meniji Class iz Property Inspectora se sada prikazuje ta klasa, a u Tag Selectoru se prikazuje oznaka, iza koje sledi ime klase.

Rukovanje stilovima preko panoa CSS Styles (i sa drugih mesta) U panou CSS Styles se prikazuju stilovi koje ste definisali, prikazuju se njihove osobine, kao i mesto na kome se nalaze (interno ili eksterno).

Ako želite da promenite neki stil, selektujte ga u panou i kliknite dugme Edit Style sa panoa. Otvoriće se okvir za dijalog CSS Style Definition, u kome možete da menjate osobine.

Ako želite da promenite ime klase, selektujte tu klasu i iz menija Options u panou, izaberite opciju Rename.

Ako želite da obrišete stil, selektujte ga u panou i kliknite dugme Remove Style (kanta za otpatke). Za korisničke klase ovim nećete obrisati mesta na kojima je stil primenjen u dokumentu.

Stilovima možete da rukujete i sa različitih drugih mesta u Dreamweaveru. Iz glavnog menija možete da izaberete Text > CSS Styles i da pozovete komande Edit ili Rename. Ovaj podmeni možete da dobijete i ako u prozoru Document kliknete desnim tasterom miša i iz pomoćnog menija izaberete opciju Text > CSS Styles. Drugi interfejs koji možete koristiti za rukovanje stilovima je iz opcija Text > CSS Styles > Edit iz glavnog menija. Ova komanda otvara prozor <style>, u kome se prikazuju svi stilovi koji su definisani interno u dokumentu i u pridruženim listama stilova. Pregled stilova Nakon što ste stilove ubacili u dokument, verovatno ćete želeti da pratite koje su klase primenjene, koje formatiranje iz CSS-a se koristi, i sl. Property Inspector, Tag Selector, a posebno novi, slavni Tag Inspector mogu u tome da Vam pomognu. Tag Inspector/CSS Rule Inspector Kartica Attributes u okviru Tag Inspectora, preko svoje kategorije CSS/Accessbility ukazuje da li je klasa primenjena na izabranu oznaku. Kartica Relevant CSS iz Tag Inspectora, koja se često zove i CSS Rule Inspector je sjajan i komapaktan interfejs za ispitivanje i uređivanje stilova koji su primenjeni na elemente na strani.

Ispitivanje primenjenih stilova - U gornjem delu prozora su prikazani stilovi koji su trenutno


65

2014

primenjeni na izabranu stavku u dokumentu. Taj stil može biti korisnički definisana klasa, promenjena definicija oznake ili neka kombinacija. Kod korisnički definisanih klasa se prikazuje i oznaka na koju je klasa primenjena.

Ispitivanje osobina stila - Ako na vrhu prozora izaberete pravilo, u donjem delu se prikazuje opsežna lista opcija vezanih za CSS formatiranje. Tu su sve vrednosti koje su u okviru pravila podešene. Listu možete prikazivati uredenu po kategorijama (iste kategorije koje postoje i u okviru za dijalog CSS Style Definition) ili po abecednom redu.

Uređivanje stilova - Najbolje je što bilo koje promene koje napravite u osobinama stila ovde, automatski menjaju stil. Prema tome, ako ste u dokumentu izabrali jedan pasus i ako se on kontroliše preko promenjene definicije oznake p, možete da promenite pravilo za formatiranje oznake p i da se automatski promene svi pasusi. Ako se promenjena definicija oznake p nalazi u spoljašnjoj datoteci sa stilovima, onda ste upravo promenili format pasusa na celom sajtu, a niste morali da idete u pano CSS Styles ili da otvarate okvir za dijalog CSS Style Definition.

Rad sa listama stilova Rukovanje stilovima obuhvata i rukovanje listama stilova, bilo internim, bilo eksternim. Ovo rukovanje se obavlja preko panoa CSS Styles. Pridruživanje lista sa stilovima Pored toga što pano CSS Styles koristite za kreiranje liste stilova, isti pano se koristi i za pridruživanje tih listi. Ako na sajt dodajete više strana u kojima se nalazi niz unapred napravljenih stilova, ove stilove lako možete da pridružite svojim novim stranama i da ih primenite kada Vam to zatreba. Ovi stilovi se neće ponašati u odnosu na stilove koje ste kreirali u Dreamweaveru. Promene HTML oznake će se automatski ažurirati, a u panou CSS Styles će se pojaviti lista korisničkih klasa. Ako želite da neku postojeću listu stilova pridružite preko panoa CSS Styles, jednostavno kliknite dugme Attach Style Sheet, koje se nalazi u donjem levom delu panoa. Možete i da iz padajućeg menija Class izaberete opciju Attach Style Sheet. Ova klasa je u okviru Property Inspectora. Možete i da izaberete Text > CSS Styles > Attach Style Sheet iz glavnog menija, ili da desnim tasterom miša kliknete u prozoru Document i iz pomoćnog menija izaberete opciju CSS Styles > Attach Style Sheet. Koji god metod da izaberete, zatražiće se da pronađete.css datoteku i da izaberete da li je linkujete ili uvozite. Razlika između ove dve opcije je vrlo mala. Opcija Link povezuje datoteku preko oznake href, a opcija Import koristi stil ili URL link za pronalaženje datoteke. Kliknite OK da biste zarvšili povezivanje. Promenjene definicije HTML oznaka i selektori se automatski primenjuju, a listi korisničkih klasa možete da pristupite preko interfejsa. Ako ste uvezli listu stilova, ona se prikazuje u panou CSS Styles i to preko indikatora <style>. Razlog je što se direktiva import nalazi u okviru oznake style. Ako ste datoteku sa stilovima linkovali, ona se jednostavno prikazuje u panou CSS Styles. Brisanje datoteke sa stilovima Ako želite da uklonite neku spoljašnju datoteku sa stilovima, u panou CSS Styles izaberite tu datoteku i kliknite dugme Delete CSS (kanta za otpatke). Ovim se neće obrisati sama datoteka. Ovim se samo uklanja iskaz link ili import, kojim je tekući dokument povezan sa tom datotekom. Interna lista stilova se ne može ukloniti. Umesto toga, treba da selektujete pojedinačne stilove u okviru liste i da ih izbrišete.


66

2014

2.15. Postavljanje sajta na server

Da bi posetioci mogli da vide vaš sajt morate ga kopirati na udaljenu lokaciju, tj. na Web server. Ovde ću Vam pokazati kako se sajt koji ste napravili podiže na server i postaje vidljiv posetiocima Vašeg sajta. Izabrao sam besplatan Yahoo-ov server koji se nalazi na adresi www.geocities.com . Prvo što je neophodno uraditi, to je registrovati se. Pošto se registrujemo, možemo pristupiti podizanju stranica koje smo napravili, kao i svih ostalih elemenata koji se nalaze na samim stranicama (slike, flash objekti....). Pošto se radi o besplatnom serveru, adresa će nam biti korisničko ime koje se nalazi iza www.geocities.com/ - U ovom slučaju konkretno http://www.geocities.com/dragan_epo

Slika 67.

Pristupamo File Manager-u. Bitno je naglasiti da sadržaj Vaših podataka na serveru, mora biti identičan sadržaju istih tih podataka na Vašem HDD-u, inače ga browser ne može pravilno prikazati. Pomoću dugmeta Browse pronalazimo fajlove i postavljamo ih na server. Sadržaj Vaših podataka na serveru MORA biti kopija istih podataka sa Vašeg HDD-a. To izgleda ovako:

Slika 68.

Kada smo završili, jednostavno se izlogujemo i sada je sajt spreman za prikazivanje posetiocima. Pravilo je da se prva stranica naslovi sa INDEX (recimo sa index.html), kako bi server znao koja stranica je prva i kojoj stranici on pristupa kada vi ukucate adresu.

http://www.geocities.com/

http://www.geocities.com/dragan_epo


67

2014

SADRŽAJ:

1. Internet programiranje - HTML ........................................................................................................ 2

1.1. Osnovni markeri html-a ............................................................................................................ 3

1.2. Treperenje i trčanje ................................................................................................................. 15

2. Macromedia ( Adobe ) Dreamweaver ......................................................................................... 17

2.1. Uvod u Dreamweaver ............................................................................................................ 17

2.2. Razvijanje strukture prezentacije ....................................................................................... 20

2.3. Definisanje lokalne web prezentacije............................................................................... 21

2.4. Zadavanje browsera ............................................................................................................. 23

2.5. Pravljenje i snimanje nove strane ..................................................................................... 24

2.5.1. Zadavanje fontova i teksta ............................................................................................ 26

2.6. Dodavanje horizontalnih linija i datuma ................................................................................. 31

2.7. Umetanje slika i medija ........................................................................................................... 31

2.8. Umetanje tabela...................................................................................................................... 36

2.9. Pravljenje šablona (Template-a) ............................................................................................. 40

2.10. Hiperveze (linkovi) ................................................................................................................ 44

2.11. Rad sa okvirima ( Frame ) ..................................................................................................... 48

2.12. Korišćenje obrazaca i polja ................................................................................................. 49

2. 13. CSS u Dreamweaveru ........................................................................................................... 55

2. 13. 1. Kreiranje novog stila ..................................................................................................... 56

2. 13. 2. Definisanje parametara stila ........................................................................................ 56

2. 13. 2 Rad sa stilovima ............................................................................................................. 62

2.15. Postavljanje sajta na server .................................................................................................. 66

SADRŽAJ: ............................................................................................................................................ 67