uvod u dreamweaver (1)

PRIRODNO-MATEMATIČKI FAKULTET UNIVERZITET U SARAJEVU

MACROMEDIA DREAMWEAVER 8.0

Radna skripta I-Dio

Sarajevo 2009

��

�

��

�

Sadržaj

�

1.� Osnove rada sa Dreamweaverom 8.0.............................................. 2�1.1� Šta je Dreamweaver i čemu služi .................................................... 2�1.2� Radna površina i alati .................................................................... 2�2.� Kreiranje Web sajta i Web stranice .................................................. 6�2.1� Kreiranje lokalnog web sajta ........................................................... 6�2.2� Kreiranje nove Web stranice ......................................................... 10�

2.2.1� Dodjela naslova Web stranici��

2.2.2� Dodjeljivanje boje pozadine��

2.2.3� Stavljanje slike na pozadini stranice��

2.2.4� Odreñivanje boje fonta��

2.3� Definisanje Web Browsera ............................................................ 13�3.� Rad sa tekstom ........................................................................... 15�3.1� Upisivanje i formatiranje teksta .................................................... 15�

3.1.1� Dodavanje teksta iz drugih dokumenata��

3.2� Rad sa fontom ............................................................................ 16�3.3� HTML i CSS stilovi ....................................................................... 17�3.4� Specijani znakovi, horizontalna linija, datum .................................. 20�4.� Rad sa tekstom ........................................................................... 23�4.1� Upisivanje i formatiranje teksta .................................................... 23�4.2� Mijenjanje veličine slike i njeno pozicioniranje ................................. 25�4.3� Davanje imena i HTML oznaka <alt> slikama.................................. 26�4.4� Panel Assets i Flash dugme .......................................................... 27�5.� Dizajniranje Web stranica ............................................................. 30�5.1� Kreiranje tabela u Layout i Standard prikazu .................................. 30�5.2� Promjena svojstava i elemenata tabele .......................................... 33�5.3� Ugniježdavanje tabela i pravljenje okvira ....................................... 35�6.� Hiperveze - Linkovi ...................................................................... 37�6.1� Pravljenje tekstualnih i grafičkih hiperveza ..................................... 37�6.2� Umetanje sidara i povezivanje sa njima ......................................... 41�6.3� Mapirane slike ............................................................................ 42��

��

�

��

�

1. Osnove rada sa Dreamweaverom 8.0

�

1.1 Šta je Dreamweaver i čemu služi

Dreamweaver je program za izradu web stranica, koji omogućava vizuelno projektovanje i ureñivanje, kao i direktno pisanje HTML koda kroz „pogled u kod“ (Code View). Takoñe omogućava izradu dinamičkih web aplikacija koristeći serverske jezike kao što su ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, Cold Fusion, JSP i PHP MySQL.

Dreamweaver skraćuje vrijeme izrade web stranice, a ima i alate za njihovo mijenjanje i održavanje. Ovaj program je dosta fleksibilan jer i napredne tehnike čini pristupačnim i olakšava njihovo korištenje. Objedinjavanjem velikih mogućnosti projektovanja i programiranja pruža mnoštvo pogodnosti i početnicima i iskusnijim korisnicima.

I pored svih korisnih stvari koje nudi Dreamweaver 8-0, ne smije se zaboraviti detaljno planiranje sajta, jer susrećemo se sa sajtovima čiji je fokus usmjeren na alate i tehnologije, natrpane Java Apletima, Java Script efektima, raznim animacijama i zvucima, ali nažalost, bez pravog logičkog sadržaja.

1.2 Radna površina i alati �

Prije nego što počnemo da kreiramo Web stranicu, treba da se upoznamo sa radnom površinom programa i njegovim alatima. Prilikom prvog pokretanja Dreamweavera 8.0 prikazaće se prozor dobrodošlice sa informacijama za nove korisnike, kao i niz novih mogućnosti za one koji već poznaju program.

Slika 1.2.1 Izgled Welcome prozora

��

�

��

�

Takoñe Dreamweaver 8.0 daje mogućnost izbora (slika 1.2.2) jednog od dva ponuñena izgleda radne površine, novu, integrisanu površinu u kojoj su svi prozori i paneli integrisani u jedan širi aplikacioni prozor, ili radno okruženje već viñeno u prethodnoj verziji programa (Dreamweaver 4).

Slika 1.2.3 Radna površina Dreamweavera u design modu

Po otvaranju Dreamweavera susrećemo se sa slijedećim elementima (slika 1.2.3.):

• Insert Bar sadrži osam tabova: Common, Layout, Forms, Text, HTML, Application, Flash elements, Favorites.

Unutar taba Common imamo slijedeće ikone : ikona za unos hiperlinka (Hyperlink), ikona za postavljanje linka za slanje e-maila (Email Link), ikona za postavljanje sidra (Named Anchor), ikona za unos tabele (Table), ikona za unos div taga (Insert Div Tag), ikona za unos različitih oblika slika (Images) kao što su : ikona za unos obične slike (Image), ikona za unos držača slike (Image Placeholder), ikona za unos „rollover „ slike (Rollover Image), ikona za unos navigacionog bara (Navigation Bar), ikona ca crtanje pravougaonika (Draw Rectangle Hotspot), elipse odnosno kruga (Draw Oval Hotspot) i poligona (Draw Polygon Hotspot), ikona za unos različitih oblika media

��

�

��

�

(Media) kao što su : ikona za unos fleš fajla (Flash), ikona za kreiranje fleš dugmeta (Flash button), ikona za unos fleš videa (Flash Video), ikona za unos „Udarnog vala“ (Shockwave), ikona za unos apleta (Applet), ikona za unos taga param (param), ikona za unos aktiv x objekta (ActiveX), ikona z unos plugina (Plugin), dalje ikona za unos datuma (Date) , ikona za unos komentara (Comment), ikona za unos raznih vrsta templejta (Template), ikona za selekciju tagova (Tag Chooser).

Unutar taba Layout imamo slijedeće ikone : ikona za crtanje sloja ili

layera (Draw layer) , ikone za ubacivanje kolone slijeva odnosno sdesna, ikone za ubacivanje reda odozgo odnosno odozdo, ikone za izgled tabele odnosno ćelije, ikone za unos podataka iz tekstualne datoteke (Tabular Data).

Unutar taba Forms imamo slijedeće ikone : ikona za unos forme

(Form), ikona za ubacivanje tekstualnog polja u formu ( Text Field ) , ikona za ubacivanje na formu skrivenog polja ( Hidden Field), ikona za ubacivanje na formu polja koje omogućava upis više linija teksta ( Textarea ), ikona za ubacivanje na formu kutije za čekiranje (Checkbox) , ikona za ubacivanje radio dugmeta na formu ( Radio Button ), ikona za ubacivanje na formu više radio dugmadi koja su grupisana ( Radio Group), ikona za ubacivanje na fromu više stavki u obliku padajuće liste( List/Menu), ikona za ubacivanje na formu padajućeg menija (Jump Menu ), ikona za stavljanje slike na formu preko edit polja (Image Field), ikona za postavljanje polja na formu preko kojeg vršimo učitavanje odreñenog fajla ( File Field), ikona za dodavanje dugmeta na formu ( Button), ikona za dodavanje labele na formu (Label), ikona za objedinjavanje više polja u obliku grupe ( Fieldset).

Unutar taba Text imamo slijedeće ikone : ikona za definisanje taga za

font (Font Tag Editor), ikona za masna slova (B), ikona za iskošena slova (I), ikona za nešto masnija slova (S), ikona za nešto iskošenija slova (em), ikona za definisanje novog paragrafa (¶ ), ikona formatirani tekst (Pre), ikona za zaglavlja, ikona za karaktere i niz drugih ikona.

Unutar taba HTML imamo slijedeće ikone : ikona za postavljanje

horizontalene linije (Horizontal Rule), ikona pod imenom (Head) za unos tagova kao što su meta, link, keywords i dr., ikona za unos skript fajlova poput JavaScript-a i dr.

Svaki objekat je predstavljen HTML kodom koji omogućava

podešavanje različitih atributa kroz „Kod pogled“.

• Document Toolbar tri taba i niz drugih objekata za podešavanje izgleda prozora dokumenta. Ista tri taba služe za prebacivanje iz moda Design View u mod Code View i na kraju u mod Split Design and Code. Tabovi za promjenu moda nalaze se na lijevoj strani ovog toolbar-a.

��

�

��

�

• Document Window , prikazuje tekući dokument i rad na njemu. U donjem lijevom uglu prozora dokumenta nalazi se birač HTML oznaka (Tag Selector), u njemu se hijerarhijski prikazuju HTML oznake koje pripadaju trenutno izabranom elementu. Pocetna HTML oznaka je uvijek <body>.

• Property Inspector, omogućava mijenjanje osobina selektovanih objekata ili teksta. Svaki objekat posjeduje različite osobine.

• Panel Group, je grupa panela sa desne strane: CSS,Files,Tag Inspector, Application. Da bi otvorili željeni panel kliknite na strelicu sa lijeve strane imena panela.

• Site Panel, omogućava upravljanje fajlovima i folderima koji čine vaš sajt. Takoñe obezbjeñuje i pristup fajlovima na hard disku, slično kao kod Explorera (drvo).

Kratak opis menija:

� File i Edit meni, sadrže standardne komande kao što su : New, Open, Save, Save as, Copy, Cut i Paste. File meni sadrži i različite komande za prikaz i rad na tekućem dokumentu (Preview u Browseru, Print Code). Edit meni uključuje komande za selekciju i pretraživanje (Select Parent Tag, Find And Replace) i omogućava pristup editoru za prečice na tastaturi. Pristup preferencama je takoñe iz Edit menija.

� View meni omogućava izbor različitih prikaza dokumenta (Code, Design, Code And Design) kao i prikazivanje i skrivanje raznih elemenata strane i Dreamweaver alata.

� Insert meni predstavlja alternativu Insert Bara. Služi za dodavanje objekata u dokument.

� Modify meni daje mogućnost promjene karakteristika selektovanog elementa stranice. Koristeći ovaj meni mogu se editovati tag atributi i mijenjati elementi tabela.

� Text meni omogućava lako formatiranje teksta. � Commands meni omogućava pristup različitim komandama, uključujući i

one za optimizaciju slika sa Macromedia Fireworks-om. � Site meni pruža komande za kreiranje, otvaranje i editovanje sajtova. � Window meni omogućava pristup svim panelima, inspektorima i prozorima

u Dreamweaveru. � Help meni uključuje Help sistem za korišćenje Dreamweavera.

��

�

��

�

2. Kreiranje Web sajta i Web stranice

2.1 Kreiranje lokalnog web sajta

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

a. Web site je skup stranica na serveru kojima pristupa posjetioc preko svog browsera.

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

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

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

Najčešće korišten način kreiranja Web sajta je kreiranje i rad sa web

stranicama na lokalnom računaru, a zatim prenos kopija tih stranica na web server kako bi one postale dostupne javnosti. Takav rad i ovdje je zastupljen.

Postupak kreiranja je slijedeći:

1. Iz menija Site izaberite New Site. Pojaviće se okvir za dijalog Site Definition, koji nudi mogućnost izbora osnovnog (Basic) ili naprednog (Advanced) postupka kreiranja sajta.Izaberite Basic i kliknite next. (slika 2.1.1)

Slika 2.1.1 Korak 1 - Kreiranje Web Sajta

��

�

��

�

2. Sada upišite ime vašeg sajta , a za adresu vašeg sajta ostavite blanko.Nakon toga preñite na slijedeći korak.

3. Dreamveawer sada pita da li želite da radite sa serverskim tehnologijama ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, Cold Fusion, JSP i PHP MySQL. Izaberite No,I don't want to use a server technology, jer će ovdje biti razmatrani samo statički sajtovi (slika 2.1.2). Definiciju samog sajta uvijek možete izmijeniti tako što izaberete iz menija Site stavku Edit Sites.

Slika 2.1.2 Korak 2- Kreiranje Web Sajta

4. U trećem koraku, definišite kako želite da radite sa datotekama vašeg sajta.Obzirom da radimo na lokalnom računaru odabraćemo radio dugme : 'Edit local copies on my machine, then upload to server when ready. (Recomended)' (slika 2.1.3).

5. Sada treba da upišete gdje želite da smestite datoteke sajta, ili pritisnite

folder ikonicu desno od polja za unos teksta ako ste već prethodno odredili mjesto za sajt. Taj izabrani folder se naziva lokalni root direkrorijum i pomoću njega Dreamweaver odreñuje putanje dokumenata, slika i hiperveza vašeg sajta.

6. Na slijedećem koraku definišete kroz pitanje : 'how do you connect to your remote server' , kako želite da se povežete sa udaljenim računarom (Remote server) . S obzirom da se radi o lokalnom sajtu izaberite 'None'(slika 2.1.4).

7. Pritisnite next da biste presli na slijedeći korak. Pregledajte podatke koje ste do sada zadali (slika 2.1.5) i pritisnite dugme Done da bi završili kreiranje sajta. Novo kreirani sajt možete vidjeti u sajt panelu (slika 2.1.6).

��

�

��

�



��

�

��

�

Slika 2.1.5 Korak 4- Kompletno kreiranje Web Sajta

Slika 2.1.6 Novo kreirani sajt

��

�

��

�

2.2 Kreiranje nove Web stranice �

Iako Dreamweaver otvara novi dokument ( stranicu) bez naslova, često ćete sami morati da pravite nove stranice, i to će te činiti na slijedeći način. Izaberite New iz opcije File. Otvoriće se okvir za dijalog New document sa dvije kategorije General i Templates. Na kartici General nudi vam se mogućnost izbora neke od ponuñenih predizajniranih stranica, ali preporučujemo izbor 'prazne' HTML strane (Category : Basic Page, a Basic Page : HTML).Za tip dokumenta (Document Type) odaberite : XHTML 1.0 Transitional (slika 2.2.1).

Slika 2.2.1 Kreiranje nove stranice

Novi dokument bez naslova (Untitled-1), koji se automatski otvara kada

pokrenete Dreamweaver je HTML stranica. Vrstu tog dokumenta možete promeniti kada pritisnete dugme Preferences u istoimenom prozoru.

Na dnu okvira New Document nalazi se opcija Document Type (DTD) koja je veoma korisna jer će vaša strana biti kompatibilna sa starijim i novijim verzijama HTML-a. Kreiranu stranu možete sačuvati tako što izaberete opciju Save iz menija File(slika 2.2.2). Naravno, istoj dajte ime i sačuvajte je u lokalnom direktorijumu sajta. Preporučljivo je snimiti datoteku pre stavljanja bilo kakvog teksta ili slika, jer će tada sve putanje koje se odnose na te elemente biti propisno formirane. Napomene: Davanje imena stranicama koje će se koristiti na Web serveru razlikuje se od imenovanja stranica za korištenje na lokalnom računaru. U zavisnosti od operativnog sistema koji koristi server, struktura imena se razlikuje (Kod Unix-a razlikuju se mala i velika slova). Zato je preporuka koristiti samo slova (A-Z) i

��

�

��

�

brojeve (0-9).U imenima datoteka takoñe ne smije biti razmaka. Ako je neophodno razdvojiti riječi tako što ćete upotrebite crticu ili čizu.Ne smijete koristiti specijalne znakove kao što su: %,*,#,/. Ne počinjite imena datoteka brojkom. Vodite računa da ime stranice ne bude suviše dugo, jer se ime stranice postaje sastavni dio URL adrese koju korisnik mora otkucati da bi pristupio stranici.

Slika 2.2.2 Kreirana Web stranica

Postoji još jedan način kreiranja nove stranice, a to je da uradite desni klik na

sajt u sajt panelu i da izaberete opciju New, gdje se opet susrećete sa prozorom New Document (slika 2.2.1).

2.2.1 Dodjela naslova Web stranici

Svaki HTML dokument mora imati naslov, koji prvenstveno služi za identifikaciju i vidi se na naslovnoj traci browsera. Taj naslov takoñe postaje ime Bookmarka koji se prilaže uz Web stranu. Zbog toga treba izabrati kratke izraze koji najbolje opisuju namjenu same stranice. Ako zaboravite da imenujete stranicu Dreamweaver će je nazvati Untitled document. Najzad, stranici dajemo ime upisujući ga u polje Title u

��

�

��

�

Document Toolbar-u (slika 2.2.3).Ukoliko Document Toolbar nije vidljiv, do istog dolazimo preko menija View, zatim Toolbars pa selektujemo Document.

Slika 2.2.1.1 Imenovanje Web stranice

2.2.2 Dodjeljivanje boje pozadine �

U Dreamweaveru se boja pozadine lako mijenja pomoću specijalne palete boja za Web (Web – safe Color Pallete). Na toj paleti ima 216 boja. Da bi promjenili boju izaberite iz menija Modify stavku Page Properties. U ovom prozoru strelicu na kvadratiću koji se nalazi desno od natpisa Background color. Prikazaće se paleta boja, a pokazivač miša će se pretvoriti u pipetu. Dovedite pipetu iznad željene boje. Možete primjetiti da se boja u HTML-u definiše heksadecimalnim brojem, koji opisuje udio crvene, zelene i plave komponente (RGB). Sada označite boju i pritisnite dugme Apply (slika 2.2.2.1).

Slika 2.2.2.1 Odabir boje pozadine za stranicu

��

�

��

�

2.2.3 Stavljanje slike na pozadini stranice �

Na pozadinu se obično stavlja slika čijim se kopijama popločava cijela stranica po x ili po y osi. Možemo istovremeno definisati boju i sliku pozadine za istu stranicu. Da bi to uradili u prozoru Page Properties pritisnite dugme Browse do polja Background image i odaberemo željenu sliku. Preporučljivo je staviti sve slike koje će se koristiti za izradu stranice u jedan folder lokalnog root direktorijuma (slika 2.2.3.1) .

Slika 2.2.3.1 Odabir boje pozadine i slike za stranicu

2.2.4 Odreñivanje boje fonta �

Kada ste izmjenili boju pozadine, ili stavili sliku na nju, poželjno je da prilagodite boju slova teksta pozadini. Prilikom biranja boja za dokument izaberite one kombinacije koje se dobro slažu i koje su dovoljno kontrasne. Odabir boje teksta se takoñe vrši u okviru Page Properties prozora u polju Text color (slika 2.2.3.1).

2.3 Definisanje Web Browsera �

Tokom razvoja Web stranica biće neophodno da stalno provjeravate izgled vašeg rada u različitim Web browserima, kao što su Netscape, Internet Explorer, Opera, Mozila, Google Chrome i dr. Ono što vidite u prozoru Dreamweavera samo je približno jednako stvarnom izgledu stranice. Svaki browser prikazuje Web stranice na manje – više različit način. S obzirom da svi posjetioci neće koristiti isti čitač za gledanje vašeg sajta, bilo bi najbolje ako je to moguće, prilagoditi stranice sajta bar onim najčešće korištenim browserima. Izaberite File , zatim Preview in Browser i odaberite Edit Browser List. Otvoriće se prozor za dijalog Preferences i prikazati čitače izabrane za provjeru. Dreamweaver će automatski prikazati spisak čitača

��

�

��

�

instaliranih u računaru. Tu možete odrediti koji će browser biti primaran a koji sekundaran i eventualno zadati pečicu na tastaturi za pojedine browsere. Ako želite da dodate nov čitač pritisnite dugme + desno od natpisa Browsers (slika 2.3.1)

Slika 2.3.1 Izbor Browsera

uvod u dreamweaver (1)

Documents