Dreamweaver_scripta_prvi_dio

Dreamweavera – program za izradu web stranica
1. Radni prostor
Osnovni elementi Dreamweaver radnog prostora su:
1. Prozor dokumenta
2. Panoi
3. Palete Insert i Properties
4. Tag selektor
1.1 Prozor dokumenta
Mjesto gdje se izrađuje web stranica. Web stranicu možemo raditi na način da upisujemo direktno kod ili da
koristimo dizajnerski režim rada.
Postoje tri mogućnosti režima rada
1. Code – prikazuje samo HTML kode
2. Split – prikazuje u gornjem okviru HTML kode, a u donjem okviru Design prikaz
3. Design – prikaz web strana približno onako kako bi izgledala u pregledniku
Uobičajeni prikaz je prikaz Split koji nam omogućava pogled na kod i pogled na približni izgled web
stranice.
Prozor dokumenta možemo prikazivati na dva načina:
o Vezani prozor i
o Nevezani prozor.
Kod vezanog dokumenta lako možemo prelaziti iz jednog otvorenog dokumenta u drugi otvoreni dokument.
Prijelaz iz jednog prikaza prozora u drugi realiziramo klikom u polje maximize u gornjem desnom kutu.
VEZANI PROZOR
NEVEZANI PROZOR
1.2. Panoi
Panoi nam olakšavaju rad jednostavnijim pristupom. Panoi su smješteni u grupama (css, code, …) i
pojedinačnom panou se pristupa klikom na tekst ili trokutić koji se nalazi na naslovnoj liniji panoa. Svaki
panoa ima više menija i klikom na jezičak otvaramo sadržaj svakog menija.
Trokut i tekst za otvaranje i zatvaranje sadržaja panoima
Jezičci panoa. Klikom na jezičak otvaramo sadržaj svakog
menija s različitim opcijama
Ako uhvatimo i vučemo pričvrstimo ili otkačimo grupu s
panoima s mjesta za sidrenje
Ikonice koje nam olakšavaju rad sa sadržajem koji se nalazi u
panou
menu
Ako želimo ukloniti grupu panoa kliknemo na meni i izaberemo
Close Panel Group
Ako želimo premjestiti koji panoa iz jedne grupe u drugu grupu
kliknemo na meni i izaberemo Group Panel With Æ(grupu koju
želimo)
Možemo napraviti svoju grupu panoa kliknemo na meni i
izaberemo Group Panel With Æ New Group
1.3. Palete Insert i Properties
Paleta Insert i Properties su jedinstveni panoi sa svojim pravilima. Insert se nalazi na vrhu, a Properties na
dnu prozora document. Oni se mogu otkačiti, ali se ne mogu grupirati sa drugim panoima.
1.3.1. Paleta Properties
Selektiranjem određenih elemenata na stranici mjenja se sadržaj opcija koje se pojavljuju na paleti
Properties
1.3.2. Paleta Insert
Može se prikazivati u jednom od dva režima koja se biraju opcijom Show as Tabs iz padajuće liste sa opcijama za tu grupu.
Služi nam za ubacivanje određenih elemenata na web stranici. (tablice, flash animacije, frejmove, …)
1.4. Tag selector
Tag selector nalazi se na statusnoj liniji i omogućava da tokom rada u prikazu Design stalno na oku imamo
kod. Tag selektor pokazuje što je izabrano ili gdje se nalazimo u odnosu na ostale HTML oznake koje prave
ugniježđeni međusobni niz.
Tag selector
Primjeri
Ako se nalazimo nad tekstom koji je definiran oznakom h1, Tag selector prikazuje strukturu
<body> <h1>
Ako se nalazimo nad tekstom u ćeliji tablice koji je definiran oznakom h1, Tag selector prikazuje strukturu
<body> <table> <tr> <td> <h1>
Najbolje je što tag selector možemo koristiti za selektiranje klikom na oznaku i u Design prikazu
sadržaj oznake će biti selektiran, a također i kod koji sadržaj prikazuje
Ako desnim klikom miša kliknemo na neku oznaku u Tag selectoru otvoriti će se meni koji nam
omogućava:
a) izbacivanje naredbe
b) mijenjanje naredbe
c) dodavanje CSS klase
d) dodavanje ID oznake
2.Upravljanje lokalnim sajtom
2.1.Kreiranje lokalnog sajta
Lokalni sajt je kompletna verzija web sajta, ali koji postoji na računalu. On sadrži isti raspored datoteka i
mapa koji će se eventualno nalaziti na web serverskom računalu.
Definiranje lokalnog sajta: Lokalni sajt se definira tako da se jedna mapa koja se nalazi bilo gdje u
računalu definira kao korijenska i u nju organiziramo mape i datoteke prema vlastitoj želji, a koje ćemo
možda kasnije prenijeti na web server.
Kreirati lokalni sajt možemo početi na više načina:
1. Na startnoj strani – klikom na Dreamweaver Site
2. U panou Files izborom Manage Site
3. Koristeći liniju menija i izborom Site→Manage Site
Izborom opcije Manage Sites pojavi se dijaloški okvir Manage Sites. U tom dijaloškom okviru izaberemo
New→Site
Pojavi se novi slijedeći dijaloški okvir u kojem lokalni sajt možemo definirati preko dva režima: Advanced i
Basic. Za definiranje lokalnog sajta su potrebne samo informacije koje se nalaze u kategoriji Local Info .
Advanced – opcije
Obavezne informacije u Local Info su:
a) Site Name – proizvoljno ime preko kojeg ćemo u panou Files pristupati lokalnom sajtu
b) Local Root Folder- definiramo mjesto gdje se nalazi mapa u računalu koja je nama za taj lokalni
site korijenska.
Opcionalne informacije su (nisu nužne):
a) HTTP Addres – upisujemo adresu sajta na web serveru npr. http://www.gogss.hr. Ako na sajtu
koristimo apsolutne adrese onda će Dreamweaver provjeravati da li linkovi vode na pravo mjesto.
b) Enable Cache – Dreamweaver tokom rada automatski prati informacije o datotekama na lokalnom
sajtu. On to radi preko keša za sajt. Kod malih i srednjih sajtova, keš može ubrzati postupke koje se
odnose na rad sa sajtom, kao što su Find and Replace, provjera pravopisa ili rukovanje linkovima.
2.1. Upravljanje datotekama na sajtu.
2.1.1. Pano Files
Nakon što smo definirali sajt, u panou Files je prikaz svih datoteka i mapa tog sajta kao i hijerarhijska
struktura sajta. Bitno je da je struktura logična, da imena imaju smisla, linkovi funkcioniraju.
Kreiranje novih datoteka – Kliknemo na mapu u koju želimo kreirati
datoteku i desnom tipkom miša izaberemo New File. Upišemo ime i
ekstenziju.
Kreiranje novih mapa – Kliknemo na mapu u koju želimo kreirati novu
mapu i desnom tipkom miša izaberemo New Folder.
Promjena imena – Označimo datoteku ili mapu i zatim ponovno kliknemo
na tekst i promjenimo ime. Kod promjene imena file treba ponovno upisati
ekstenziju. Ako promjena imena zahtjeva i ažuriranje linkova, nakon
promjene imena će se pojaviti dijaloški okvir Update Files koji će nam
promjene ažurirati, ako kliknemo Update.
Premještanje datoteka– Označimo datoteku i odnesemo je u novu mapu.
Ako premještanje zahtjeva i ažuriranje linkova, nakon promjene imena će se
pojaviti dijaloški okvir Update Files koji će nam promjene ažurirati, ako
kliknemo Update.
2.1.2. Panoa Assets
U panou Assets nalaze se sadržaji koji su spremljeni na sajtu. Sadržaji su kategorizirani na 9 područja.
Preko panoa Assets možemo sadržaje pratiti ili ubacivati na druge stranice (datoteke). Rad sa panom je
koristan pogotovo kada neke elemente koristimo više puta na sajtu.
Tipovi elemenata su:
a) Images – slike koje se nalaze na sajtu
b) Colors – boja koja se koristi na sajtu
c) URLs – vanjske URL adrese kao npr. E-Mail, HTTP, FTP,..
d) Flashmovies – prikazuje .swf datoteke
e) Shokwave – filmovi koji su napravljeni u programima Director ili
Authorwave
f) Movies – filmovi u formatu AppleQuickTime ili u MPEG formatu
g) Scripts - scriptovi pisani u Java Scriptu ili VBScriptu
h) Templates - prikaz šablona
i) Library – prikaz biblioteka
2.1.3. Kreiranje novog dokumenta
1. Kada otvaramo Dreamweaver pojavljuje se startna strana ako je uključeno Show start page ( možemo
uključiti s linije menija EditÆ PreferencesÆ GeneralÆShow start page)
Klikom na HTML otvara nam se nova html datoteka.
2. Kada izaberemo s linije menija FileÆNew otvara se dijaloški okvir s mnoštvo opcija. Selekcijom
kategorija opcija Basic Page u lijevom stupcu i HTML u desnom stupcu otvara nam se HTML dokument
kada kliknemo na create .
Preporuka za kreiranje novog dokumenta
Kada smo otvorili Dreamweaver (imamo definirani lokalni sajt) kreiranje
novog dokument poželjno je u Pano Files. Kliknemo na mapu u koju želimo
kreirati datoteku i desnom tipkom miša izaberemo New File. Upišemo ime i
ekstenziju.
2.1.4. Definiranje najave novog dokumenta
XHTML mora imati DOCTYPE najavu. Definiranjem novog HTML dokumenta, automatski u dokumentu
je postavljena DOCTYPE najava. DOCTYPE najava definira tip dokumenta, kao na donjem primjeru.
Primjer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Moja druga web stranica</title>
</head>
<body>
Ovo je tekst moje web stranice
</body>
</html>
Postoje2 tipa XHTML dokumenta koji se mogu definirati u dreamweaveru:
DTD XHTML→ točno opisuje kakvu sintaksu i pravila koristiti kod XHTML
1. STRICT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. TRANSITIONAL
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ako želimo da nam se cijelo vrijeme otvaraju novi dokumenti s istom najavom izborom s linije menija
EditÆPreferences otvara nam se dijaloški okvir gdje koristimo kategoriju New Document i opciju Default
Document Type.
Ako nam se otvorio dokument s nekom drugom najavom, jednostavnim izborom s linije menija FileÆ
Convert možemo promijeniti najavu u html dokumentu
2.1.5. Definiranje kodne stranice dokumenta
Jedan od obaveznih tagova koji dolazi unutar <head> taga. Govori pregledniku koji skup znakova treba
koristiti za prikazivanje tekstualnih dijelova web stranice. Definiranjem novog HTML dokumenta,
automatski u dokumentu je postavljen meta tag kodne stranice. Možemo koristiti različite načine kodiranja
za prikazivanje hrvatskih znakova kao npr.:
1. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />,
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Primjer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Moja druga web stranica</title>
</head>
<body>
Ovo je tekst moje web stranice
</body>
</html>
Ako želimo da nam se cijelo vrijeme otvaraju novi dokumenti s istom kodnom stranicom izborom s linije
menija EditÆPreferences otvara nam se dijaloški okvir gdje koristimo kategoriju New Document i opciju
Default encoding.
Izborom:
o
Central European (Windows) Æ <meta http-equiv="Content-Type" content="text/html;
charset=windows-1250" />
o
Central European (ISO) Æ <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2" />
o
Unicode(UTF-8) Æ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2.1.6. Definiranje naslova stranice-title
Jedan od obaveznih tagova koji dolazi unutar <head> taga je tag <title>. Naslov stranice vidjeti ćemo na
naslovnoj liniji preglednika (slika 3) i on se ne izostavlja kod izrade web stranice. Naslovom stranice daje se
ime i u nekoliko riječi opisuje namjena te stranice. Unutar ovog elementa nije dozvoljeno korištenje
znakova , /, :, -, ; jer operativni sistem može imati problema s takvim nazivima.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Moja druga web stranica</title>
</head>
<body>
Ovo je tekst moje druge web stranice
</body>
</html>
Jednostavnim unosom na liniji ispod palete Insert unosimo naslov stranice.
2.1.7. Definiranje najave, kodne stranice i naslova stranice-title
Klikom na Page Properties u paleti Properties otvara nam se dijaloški okvir u kojem možemo mijenjati sve
ove opcije zajedno u postojećem dokumentu.
3. Pomoć pri radu
du
2.1.Upotreba ravnala, vodilice i mreže
Za precizno podešavanje veličine i položaja mogu nam pomoći :
o
ravnalo,
o
vodilice i
o
mreža.
2.1.1.Ravnalo (rules)
Pojavljuje se ravnalo na sceni ako iz menija izaberemo View → Rulers →Show. Ravnalo nam može služiti
za postavljanje vodilica na scenu i precizno postavljanje objekta na sceni. Ishodište se nalazi u gornjem
lijevom kutu.
Ishodište
Horizontalno i vertikalno ravnalo
2.1.2.Vodilice
Horizontalne i vertikalne linije koje možemo postaviti bilo gdje na pozornici. Uzimamo ih klikom na
ravnalo i povlačenjem na scenu. Služe nam za precizno pozicioniranje objekata na sceni.
Podešavanje vodilica
Ako iz menija izaberemo
možemo podešavati vodilice:
View→Guides
2.1.3. Mreža
Mreža se sastoji od niza horizontalnih i vertikalnih linija koje pomažu pri postavljanju objekta i
dimenzioniranju objekta na scenu. Ako iz menija izaberemo View→Grid→Show Grid pojavljuje se mreža u
design codu.
Ako iz menija izaberemo View→ Grid→ Grid Settings
pojavljuje se dijaloški okvir u kojem možemo
podešavati elemente grida.
.
4. Rad s tekstom
4.1.Naredbe
HTML je strukturni jezik. Njegov osnovni zadatak je da opiše logičku strukturu elemenata na strani, kao
što je tekst. Za formatiranje teksta HTML koristimo naredbe na nivou bloka, koja se primjenjuju na
dijelove teksta i time ukazuju na ulogu tog teksta na strani. Pored naredbi na nivou bloka, koriste se naredbe
na nivou karaktera, koja se primjenjuju na riječ ili nekoliko riječi u okviru bloka, čime se te riječi ističu u
odnosu na ostatak teksta.
Naredbe na nivou bloka
Naredbe za označavanje teksta
Opis
Prikaz u pretraživaču
Primjer
p
Paragraf ili odlomak
u tekstu
Podrazumijevana veličina je
16 piksela, a pismo Times.
<p> HTML je skriptirani (opisni)
ul, li
Neuređena lista koja
sadrži popis stavki
Podebljana slova veličinom
koja se kreće od najveće
h1 – 36 piksela do najmanje
h6 – 9 piksela
Uvučeno, sa oznakom ispred
svake stavke
<h1> OSNOVE HTML </h1>
h1 – h6
Naslovi, gdje je h1
glavni naslov, h2
podnaslov, itd
ol, li
Uređena lista koja
sadrži popis stavki
Uvučeno, sa brojkom ispred
svake stavke
dl, dt,dd
Lista definicija koja
se
koristi
za
opisivanje pojmova.
Sadrži termine i
definicije
Definicija je uvučena u
odnosu na termin koji je
definira
Pasus s tekstom pod
navodnicima
Uvućen s obje strane
blockquote
jezik za stvaranje web stranica.
HTML nije programski jezik, jer
se njime samo opisuje izgled i
sadržaj web stranice.</p>
<ul>
<li>krompir</li>
<li>salata</li>
<li>rajčica</li>
</ul>
<ol>
<li>krompir</li>
<li>salata</li>
<li>rajčica</li>
</ol>
<dl>
<dt>Prova</dt>
<dd>Prednji
dio
broda
</dd>
<dt>Krma</dt>
<dd> Stražnji dio broda
</dd>
</ol>
<p> Kada je Linkon rekao:
<blockguote>Kada smo bili
na rijeci...</blockquote></p>
Naredbe na nivou karaktera
Naredbe na nivou karaktera primjenjuju se na riječ ili na nekoliko riječi u okviru bloka.
Naredbe za označavanje teksta
Opis
Prikaz u pretraživaču
Primjer
em
tekst položen u
desnom smjeru
Italic
<p> HTML je<em> skriptirani
(opisni) jezik</em> za stvaranje
web stranica. </p>
tekst podebljan
bold
<p> HTML je<strong> skriptirani
(opisni)
jezik</strong>
za
stvaranje web stranica. </p>
strong
4.2.Paragraf <p>…</p> i naslovi <h1> … <h6>
4.2.1. Naredba <p>...</p>
Smisao paragrafa je razbijanje monotonije čitanja i stvaranje kratkog predaha prilikom čitanja. U HTML
između paragrafa postoji razmak.
Dva odlomka (između njih razmak)
Prilikom unosa novog teksta (klikom i pisanjem) u dizajn prikazu novi tekst nema definiranu naredbu za
paragraf. Kada želimo preći u novi redak pritiskom tipke enter u dizajn prikazu stvara se naredba za
paragraf i to na novom paragrafu i prethodnom paragrafu. Svaki prelazak u novi paragraf pritiskom na tipku
enter automatski se definira novi paragraf.
4.2.2. Naredba <br />
Ako želimo preći u novi red bez razmaka između redaka koristimo naredbu <br />. Prelazak u novi red u
dizajn prikazu realiziramo istovremenim pritiskom na tipku shift i enter. Prelaskom u novi red nismo
definirali novi paragraf.
4.2.3. Naslovi <h1> … <h6>
Koriste se za isticanje dijelova teksta od kojih je h1 glavni naslov i veličinom najveći naslov, a h6 veličinom
najmanji naslov. Definiranjem naslova postoje razmaci između naslova i paragrafa ili naslova i nekog
drugog naslova.
Definiranje naslova ili paragrafa za neki tekst najčešće se koristi paleta Properties
Postoje tri osnovna formata za definiranje naredbi za paragraf, naslove i
preformatirani tekst
o Paragraph (p),
o Heading (h1 - h6) i
o Performatted (pre).
U dizajn modu selektiramo tekst ili koristimo Tag selector i odaberemo jednu od
opcija. Opcija none ne postoji u HTML, a osnovna svrha jest uklanjanje svih
formatiranja koja su primijenjena.
4.2.4. Definiranje atributa naredbi <p> i <h..>
Poravnavanje teksta - U dizajn modu selektiramo tekst ili koristimo Tag selector i iz palete properties
odaberemo jednu od opcija.
Tekst se može poravnavati na četiri načina u paleti Properties
• Lijevo
• Centrirano
• Desno
• Obostrano (i lijevo i desno)
4.3. Definiranje atributa naredbi <font>
Obavezno!!!
Kada želimo definirati html naredbu font tada obavezno moramo izborom s linije menija
EditÆPreferences, u dijaloški okvir pod kategoriju General isključiti opciju Use CSS instead of
HTML tags.
4.3.1. Veličina teksta
Veličina teksta - U dizajn modu selektiramo tekst ili koristimo Tag selector i iz palete properties
odaberemo Size.
<font size="6"> Veličina</font>
4.3.2. Vrsta pisma
Na Webu postoji pet osnovnih kategorija fontova:
1. Serifni fontovi , kao Times
2. Beserifni fontovi (sans-serif), kakvi su Arial i Helvetika
3. Neproporcionalni fontovi, kao Courier (monospace)
4. Rukopisni fontovi, kao Mistral
5. Dekorativni fontovi, svi ostali koji nisu u ove četiri prethodne grupe.
Najčešće se koriste dvije vrste fontova i to serifni i sans –serifni. Prilikom zadavanja fontova u jeziku
HTML, običaj je da se navede nekoliko varijanti željenog fonta kako bi korisnici mogli vidjeti odgovarajući
izgled stranice.
<font face face="Arial, Verdana, Helvetica, sans-serif">Tekst</font>
Ako se odlučite koristiti neki manje poznati font, tada ćete jedini koji ćete se možda diviti svom remek
dijelu.
Vrsta pisma - U dizajn modu selektiramo tekst ili koristimo Tag selector i iz palete properties odaberemo
Font.
<font face="Georgia, Times New Roman, Times, serif"> Vrsta pisma</font>
Ako želimo napraviti vlastitu kombinaciju fontova izaberemo Edit Font List. Font listi imamo prikaz
prozore koji nam pokazuju izabrane fontove i fontove koji postoje na našem računalu.
4.3.3. Boja pisma
Za sve heksadecimalne boje u HTML koristimo šest znamenki s prefiksom „ # “. Prve dvije znamenke su
heksadecimalna vrijednost crvene boje, druge dvije su za zelenu boju i zadnje dvije za plavu boju.
#b1e1eb
<font color="#0066CC"> Vrsta pisma</font>
4.4.Liste
Dvije vrste lista:
• Neuređene – prikazivanje stavki kod kojih redoslijed nije bitan
• Uređene ili numerirane - prikazivanje stavki kod kojih je redoslijed bitan
U paleti properties kliknemo na dugme za uređenu ili neuređenu listu.
Unosimo stavke, pritisnemo enter, unosimo novu stavku i kada smo završili
s upisivanjem stavki pritisnemo enter dva puta.
Html kod uređene liste
<ol>
<li>mate</li>
<li>jure</li>
<li>stipe</li>
</ol>
Html kod neuređene liste
<ul>
<li>mate</li>
<li>jure</li>
<li>stipe</li>
</ul>
4.5. Definiranje atributa naredbi <ol>
Mijenjanje izgleda liste - postavimo kursor u listi
na neku stavku i kliknemo List Item u
Properties panou. Gornji dio dijaloškog okvira
odnosi se na cijelu listu, a donji samo na stavku u
kojoj se nalazimo.
4.5.1. Vrsta brojeva
Po postavci su arapski brojevi, ako želimo mijenjati kliknemo na opciju style i definiramo vrstu
numeriranja. U HTML kodu naredba <ol> dobije atribut type.
<ol type="i">
4.5.2. Početni broj liste
Ako želimo promijeniti broj s kojim počinje lista u opciji Start count upišemo broj s kojim želimo da lista
počme. U HTML kodu naredba <ol> dobije atribut start.
<ol start="3">
4.5.3. Mijenjanje broj stavke u listi
Ako želimo promijeniti broj s kojim počinje stavka u listi u opciji Reset count to upišemo broj s kojim
želimo da stavka počme. U HTML kodu naredba <li> dobije atribut value.
<li value="10">stipe</li>
4.6. Definiranje atributa naredbi <ul>
4.6.1. Vrste oznaka
Po postavci su obojani kružići, ako želimo mijenjati kliknemo na style i definiramo vrstu oznake. U HTML
kodu naredba <ul> dobije atribut type.
<ul type="square">
4.7. Definiranje atributa naredbe font unutar liste
Kod definiranja naredbe font unutar liste postoji problem s radom u Dreamweaveru jer on ubacuje naredbu
font s atributima unutar naredbe <li>............</li>. Posljedica je da su stavke obojane, ali ne i brojevi.
<ol>
<li><font color="#99FF00" size="4" face="Verdana, Arial, Helvetica, sans-serif">Maja</font></li>
<li><font color="#99FF00" size="4" face="Verdana, Arial, Helvetica, sans-serif">Jure</font></li>
<li><font color="#99FF00" size="4" face="Verdana, Arial, Helvetica, sans-serif">Stipe</font></li>
</ol>
Potrebno je u kodu ubaciti naredbu font na predviđeno mjesto.
<ol>
<font color="#0066FF" size="4" face="Arial, Helvetica, sans-serif">
<li>Maja</li>
<li>Jure</li>
<li>Stipe</li>
</font>
</ol>
4.7. Lista definicija <dl>
HTML kod liste definicija
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
U paleti Insert kliknemo na dugme dl. Unosimo termin, pritisnemo enter, unosimo definiciju termina,
pritisnemo enter unosimo ponovo termin, pritisnemo enter unosimo ponovno definiciju termina i kada smo
završili s upisivanjem definicije termina pritisnemo enter dva puta.
4.8. Naredba <blockquote>
Uvlači tekst s lijeve i desne strane. Označimo tekst koji želimo uvući i zatim u paleti Insert pritisnemo
navodnike.
<p>Linkon je rekao</p>
<blockquote><p>
Kada smo bili na rijeci dsfsdsdf fdsdsfsdfsd fdssfds flksjdsak klfdjdsakl ylkvhfdfkj djfhd jdf jdfh jkhdfj kfjdhs jdfhsdjk jhjsd
jdfhj jhsdjksh fsdhjf jhdfsj jhfcjsd jhgdsj jdsfh
fdgfd fgfsd fdgs fdgsd fdgdfsgd fdgfdsgdg dfgfsd fdgfsd dfgs sjdsak klfdjdsakl ylkvhfdfkj djfhd jdf jdfh jkhdfj kfjdhs jdfhsdjk
jhjsd jdfhj jhsdjksh fsdhjf jhdfsj jhfcjsd jhgdsj jdsfh
fdgfd fgfsd fdgs fdgsd fdgdfsgd fdgfdsgdg dfgfsd fdgfsd dfgssjdsak klfdjdsakl ylkvhfdfkj djfhd jdf jdfh jkhdfj kfjdhs jdfhsdjk
jhjsd jdfhj jhsdjksh fsdhjf jhdfsj jhfcjsd jhgdsj jdsfhfdgfd fgfsd fdgs fdgsd fdgdfsgd fdgfdsgdg dfgfsd fdgfsd dfgs
</p></blockquote>
4.9. Naredbe na nivou karaktera <em> i <strong>
Naredba za podebljani tekst<strong> i naredba za ukošeni tekst - kurziv <em>. Označimo tekst i u paleti
properties pritisnemo B za podebljani tekst i I za kurzivni tekst
6. Rad s slikom
6.1. Umetanje slika u HTML dokument
Umetanje slike u Dreamweaverna u HTML datoteku ubacujemo naredbu
<img src=“putanja/ime slike“ />
Sliku možemo ubaciti na više načina:
1. Preko panoa Assets
Ako smo napravili lokalni sajt i ako smo slike spremili u lokalni sajt tada sve slike možemo vidjeti u Panou
Assets.
Kategorija slike
Prikaz slika
Popis slika u
lokalnom sajtu
Pozicioniramo se u HTML dokumentu gdje želimo ubaciti sliku i pritisnemo dugme Insert. Pojavi se
dijaloški okvir u kojem ubacujemo atribut alt
Alt tekst
2. Preko panoa Insert→Common
U panou izaberemo Image
Pojavi se dijaloški okvir u kojem nađemo i selektiramo željenu sliku
3. Pritiskom istovremeno na tastaturi tipke CTRL + ALT + I
Pojavi nam se dijaloški okvir prikazan na gornjoj slici u kojem nađemo i selektiramo željenu sliku
6.2. Atributi naredbe <img>
Atributi slike se u Dreamweaveru mogu se podesiti preko Properties panoa kada sliku označimo.
6.2.1. Atributi width i height
Dremweaver automatski ubacuje width i height u naredbu <img>. Dimenzije slike ne bi trebalo mijenjati u
Dreamweaveru osim u programu koji se koristi za obradu slika.
Ako su vrijednosti height i width prikazane masnim slovima, onda to nisu originalne
dimenzije slike.
Klikom na Reset Size vraćamo na početne dimenzije.
6.2.2. Atributi vspace i hspace
VSPACE se odnosi na broj praznih pixela s gornje i donje strane slike. HSPACE je broj praznih pixela koji
se ostavlja s lijeve i desne strane slike.
6.2.3. Atributi alt
Ako slika nije pronađena od strane preglednika, ALT tekst će biti prikazan na web stranici. Tekst će biti
prikazan ako ostavite kursor nekoliko sekundi na odabranoj slici.
6.2.4. Atributi border
Okvir oko slike
6.2.5. Atributi align
Atribut
Vrijednost
ALIGN
LEFT, RIGHT
TOP, MIDDLE, BOTTOM,
ABSBOTTOM, ABSMIDDLE,
TEXTTOP, BASELINE
Opis
- horizontalno poravnanje slike na stranici.
- vertikalno poravnanje slike ako je smještena
unutar paragrafa
6.3. Integrirano uređivanje slika
Integrirano uređivanje slika podrazumijeva osnovnu obradu slika koristeći mogućnost koju nam pruža
Dreamweaver. Promjena koju napravimo utječe na datoteku (sliku).
Možemo
o editirati sliku,
o cropati (rezati) sliku,
o promijeniti broj piksela na slici,
o podesiti kontrast i
o osvjetljenje i podesiti oštrinu.
6.3.1. Editiranje slike
To znači otvaranje nekog od programa za obradu slike kada označimo sliku i kliknemo na ikonu.
Koji će se program otvoriti potrebno je definirati izborom EditÆPreferences , a zatim u kategoriji File
Types/Editors za svaki tip datoteke odabrati program koji će se otvarati.
tip datoteke
definiranje programa
6.3.2. Cropanje ili obrezivanje slike
Kliknemo na sliku, a zatim na ikonu za kropanje i na slici se pojavi okvir sa osam
crnih kvadratića koje možemo povlačiti u svim smjerovima. Kada smo odredili koji
dio slike se obrezuje dva puta kliknemo unutar kvadratića
6.3.3. Mjenjanje dimenzija slike
Kliknemo na sliku pojavi se okvir sa tri kvadratića. S tim kvadratićima možemo
mijenjati dimenzije slika samo po širini, samo po visini i istovremeno širinu i
visinu.Kada smo promijenili dimenzije slike, tada nismo promijenili dimenziju
datoteke(slike). Ako kliknemo na ikonu za rezanje tada mijenjamo stvarne dimenzije
datoteke (slike).
6.3.4. Mjenjanje svjetloće, kontrasta i oštrine slike
Ove elemente možemo mijenjati ako kliknemo na ikonu za svjetloću i kontrast i na ikonu za oštrinu
kontrast i svjetloća
oštrina
7.Rad s linkovima
Kad je u Dreamweaveru izabran neki tekst ili neka slika, u Properties panou se nalazi polje za linkove.
Kada smo definirali link za neki tekst u kodu nam se pojavi
<a href="zanimanja/mojastrana.html">Tekst</a>
ili
<a href="http://www.yahoo.com">YAHOO!</a>
7.1. Relativna putanja
Relativna putanja – Uspostavlja vezu između datoteke i strukture cijeloga sajta.
Ako želimo postaviti link na neku datoteku koja je dublje u strukturi sajta kao npr. sa index.html →
mojastrana.html, onda je potrebno navesti ime mape i ime datoteke (zanimanja/mojastrana.html).
Ako želimo postaviti link na neku datoteku koja je iznad u strukturi sajta kao npr. sa mojastrana.html →
index.html, onda preko opcije u zagradi (../) ukazujemo na to da se treba popeti jedan nivo više
(../index.html).
Kod unosa relativnih linkova možemo koristiti ikone Point to File ili Browse.
7.1.1.Point to File
U datoteci selektiramo tekst ili sliku koja će postati link. U Panou Properties kod polja Link, pronađemo
dugme Point to File. Kliknemo na dugme i odvučemo u pano file preko datoteke koja se označi tj. na
datoteku na koju želimo da link vodi
7.1.2. Browse.
U datoteci selektiramo tekst ili sliku koja će postati link. U Panou Properties kod polja link, pronađemo
dugme Browse.
Kliknemo na dugme i pojavi nam se dijaloški okvir. U dijaloškom okviru pronađemo datoteku koja se
označi i na koju želimo da link vodi.
7.2. Apsolutna putanja
Apsolutna putanja – Ako želimo apsolutnu adresu potrebno je upisati sve informacije koje su potrebne za
lociranje datoteke koja se traži, tj. moramo ukucati kompletan link uključujući i protokol npr. za
mojutrećustranu.html treba upisati (http://www.mywebsite.com/zanimanja/grafika/mojatrećastrana.html)
Kada smo jednom ukucali apsolutni link i ako smo napravili lokalni sajt, od pomoći nam može biti pano
Assets, koji nam može pomoći da ponovno ne ukucavamo već jednom ukucanu adresu.
7.3. Izgled linka
Izgled linka – Izgled linka može se definirati na tri načina
1. Podrazumijevana postavka – ovdje ništa ne definiramo, link je podvučen i obojan plavom bojom,
nakon što smo posjetili adresu linkovi postaju purpurne boje
2. Mijenjanje postavki pomoću HTML tagova link, vlink i alink. Potrebno je u
Edit→Preferences→General isključiti opciju Use CSS instead of HTML tags. Zatim u Properties
panou kliknuti na Page Properties i definirati boje za link,vlink i alink.
3. Pomoću CSS-a
Target – u kojem prozoru se otvara novi link
_blank – novi dokument se otvara u novom prozoru
_parent – koristi se kod frejmova kada je frameset file(dijete) unutar još jednog frameset(roditelj)
fila. Dokument se otvara u roditeljskom file.
_self - novi dokument se otvara u istom prozoru
_top – otvara dokument u najgornjem frame
ime prozora – koristi se kada želimo novi dokument otvoriti u frejmu koji smo imenovali.
8.Pozadina web stranice
Pozadinu web stranice definiramo atributima naredbe <body>. Atributi tag <body> su:
Atribut
Vrijednost
Opis
background
URL
Trebalo bi se upisati web adresa/URL adresa slike koja bi bila pozadinska
slika cijelog dokumenta.
bgcolor
TEKST
Označava pozadinsku boju web stranice. Postavlja se ako niste postavili
pozadinsku sliku ili ako ne želimo bijelu pozadinu.
ILI
#HEKSADECIMALNA
VRIJEDNOST
link
TEKST
Označava boju linka prije nego što kliknemo mišem na njega. Default je
BLUE .
ILI
#HEKSADECIMALNA
VRIJEDNOST
alink
TEKST
Boja aktivnog linka (kad kliknemo na njega). Default je RED na većini
pretraživača.
ILI
#HEKSADECIMALNA
VRIJEDNOST
vlink
TEKST
Boja posjećenog linka (nakon što je linkana stranica posjećena). Default je
PURPLE.
ILI
#HEKSADECIMALNA
VRIJEDNOST
text
TEKST
Boja teksta. BLACK je po defaultu, a dobro ga je namjestiti na drugu boju
nego što je namještena BGCOLOR (probajte ne stavljati žuti tekst na bijelu
ILI
podlogu te slične kombinacije).
#HEKSADECIMALNA
VRIJEDNOST
8.1. Pozadinska boja web stranice
U Properties panou kliknuti na Page Properties i u dijaloškom okviru klikom na Background definiramo
pozadinsku boju.
8.2. Pozadinska slika web stranice
U Properties panou kliknuti na Page Properties i u dijaloškom okviru klikom na Background
image(Browse) definiramo pozadinsku boju, tako da je pronađemo i selektiramo na određenom mjestu u
site.
9.Tablice
9.1. Umetanje tablica
Originalno su tablice u HTML-u namijenjene prikazivanju tabelarnih podataka. Kako je HTML strukturalni
jezik, web dizajneri su ih počeli koristiti za pozicioniranje elemenata na strani. Sa pojavom CSS-P, tablice
se polako vraćaju svojoj originalnoj upotrebi.
Ako želimo ubaciti tablicu možemo koristiti više opcija:
1. objekt Table s palete Insert pod opcijom Layout,
2. objekt Table s palete Insert pod opcijom Common ili
3. izaberemo s menija Insert→ Table.
Pojavi se dijaloški okvir.
U dijaloškom okviru možemo podešavati:
Table size
• rows – broj redaka
• columns – broj stupaca
• table width – širina tablice
• border thickness – debljina okvira oko
tablice
• cellpadding – razmak između ruba ćelije i
sadržaja
• cellspacing – razmak između dvije ćelije
Header
• none – tablica bez zaglavlja
• left – tablica s zaglavljem s lijeve strane
• top – tablica s zaglavljem na vrhu
• both – tablica s zaglavljem na vrhu i s lijeve
stranice
9.2. Režimi rada i pomoć pri radu
U Dreamweaver postoje tri režima za rad s tablicama koja možemo mijenjati u paleti Insert pod opcijom
Layout
Standard – U ovom slučaju tablice se prikazuju približno isto kao u pretraživaču.
Expanded – prikaz s umjetno dodanim prostorom između i unutar tablice, zbog lakšeg biranja elemenata
tablice
Layout – Možemo samostalno crtati tablice i ćelije
Bez obzira da li radite u režimu Standard ili Expanded postoji vizualna pomoć, kao npr.
Table Width (View→Visual Aids→Table Widths) koja nam omogućava prikaz horizontalne linije na dnu ili
vrhu i koja pokazuje dimenzije tablice i stupava, a klikom na trokutiće imamo dodatne elemente za izbor i
podešavanje osobina tablice.
Table Border (View→Visual Aids→Table Borders) omogućava prikaz ruba i strukture tablice koja nema
definirane rubove.
9.3. Atributi naredbi table,tr,td,th
9.4. Selektiranje elemenata tablice
Podrazumijeva selektiranje tablice, redova, stupaca i ćelija.
9.4.1. Selektiranje tablice- naredba <table>
o
U tag selektoru klikom na table
o
o
o
Klikom na rub tablice
Povlačenjem pokazivača miša preko tablice
Desnim klikom miša nad tablicom i izbor Table→Select Table
o
Klikom na trokutić širine tablice ako je prikazana linija Table Width
9.4.2. Selektiranje jednog reda tablice - naredba<tr ili th>
o povlačenjem pokazivača miša preko ćelija koje čine jedan red
o klikom na bilo koju ćeliju u željenom redu i klikom na <tr> u Tag selektoru
9.4.3. Selektiranje jednog stupca tablice
o povlačenjem pokazivača miša preko ćelija koje čine jedan stupac
o klikom na trokutić širine stupca ako je prikazana linija Table Width
9.4.4. Selektiranje ćelije tablice <td>
o CTR i klik na željenu ćeliju
o klikom na željenu ćeliju koju selektiramo, a zatim klik na <td> u Tag selektoru
9.5. Promjena strukture tablice
9.5.1. Dodavanje i uklanjanje redova
o dodavanje novog reda preko tastature – ako nam je kursor u posljednjoj ćeliji, pritiskom na Tab
pojaviti će se novi red
o preko panoa Properties – selektiramo cijelu tablicu i promijenimo broj redova u polju Rows
o
o
o
selektiranjem reda i pritisnemo tipku Delete na tastaturi - brišemo redove
klikom na ćeliju, a zatim desnom tipkom miša izaberemo opcije table možemo dodavati i brisati
redove
Insert Row – dodaje red ispod označenog
reda
Delete Row – briše označeni red
Insert Rows or Column – pojavljuje se
dijaloški okvir u kojem možemo birati broj
redova i gdje ćemo ih smjestiti
9.5.2. Dodavanje i uklanjanje stupaca
o
preko panoa Properties – selektiramo cijelu tablicu i promijenimo broj stupaca u polje Cols
o
o
selektiranjem stupca i pritisnemo tipku Delete na tastaturi - brišemo stupce
Table Width – trokutić ispod širine stupaca i izbor opcije Insert Column Left ili Right
o
Desnom tipkom miša – klikom na ćeliju možemo dodavati i brisati stupce
Insert Column – dodaje stupac desno od
označenog reda
Delete Column – briše označeni stupac
Insert Rows or Column – pojavljuje se dijaloški
okvir u kojem možemo birati broj stupaca i gdje
ćemo ih smjestiti
9.5.3. Spajanje ćelija
o
Panoa Properties – selektiramo dvije ili više ćelija i kliknemo na dugme Merge
o
Desnom tipkom miša – selektiramo dvije ili više ćelija i izaberemo Merge Cells
9.5.4. Podijela ćelije
o
Panoa Properties – selektiramo jednu ćelija i kliknemo Split Cell .
Pojavi se dijaloški okvir u kojem dijelimo ćeliju na više redaka ili više stupaca
o
desnom tipkom miša – označimo jednu ćelija i izaberemo Split Cells
Pojavi se dijaloški okvir u kojem dijelimo
ćeliju na više redaka ili više stupaca
9.5. Podešavanje atributa tablice
9.5.1. Definiranje širine -<table> <td> i <th>
o tablice <table> – selektiramo tablicu i u panou properties upišemo vrijednost
o
stupca <td> – selektiramo ćeliju i u panou properties upišemo vrijednost. Potrebno je
samo u jednom redu definirati širine za svaku ćeliju. Zbroj mora odgovarati širini cijele
tablice.
9.5.2. Okvir i boja okvira -<table>
o tablice <table> – selektiramo tablicu i u panou properties upišemo vrijednost
9.5.3. Prostor između ruba ćelije i sadržaja -<table>
o
tablice <table> – selektiramo tablicu i u panou properties upišemo vrijednost
9.5.4. Prostor između ćelije -<table>
9.5.5. Boja pozadine -<table> <tr> <td> i <th>
o tablice <table> – selektiramo tablicu i u panou properties upišemo vrijednost
o
redova i ćelija <tr> <td> <th> – selektiramo red i u panou properties upišemo vrijednost.
9.5.6. Slika u pozadini -<table> <tr> <td> i <th>
o
tablice <table> – selektiramo tablicu i u panou properties upišemo vrijednost
o
redova i ćelija <tr> <td> <th> – selektiramo red i u panou properties upišemo vrijednost.
9.5.7. Horizontalno ravnanje ćelija -<tr> <td> i <th>
o redova i ćelija <tr> <td> <th> – selektiramo ćeliju ili red i u panou properties upišemo
vrijednost.
9.5.8. Vertikalno ravnanje ćelija -<tr> <td> i <th>
o redova i ćelija <tr> <td> <th> – selektiramo ćeliju ili red i u panou properties upišemo
vrijednost.

Download Report