glava
     

Cilji vaje:

  • namestitev brezplačne preizkusne različice programa Adobe Dreamweaver,
  • nastaviti uporabniški vmesnik,
  • poznati načine upravljanja orodjarn in oken.

Adobe Dreamweaverjem

Adobe Dreamweaver je celovito spletno razvojno okolje. Je spletni urejevalnik, ki med delom prikaže enako oblikovanje dokumenta, kot ga bo imel dokument po objavi v spletu (WYSIWYG). Program je zmogljiv, njegova uporaba pa je preprosta. Poleg urejevalnika HTML kode ima vgrajena tudi orodja za izdelavo časovnih animacij, razvojno orodje za dinamične spletne strani, orodje za upravljanje spletišč, omogoča natančno vstavljanje vsebine v spletno stran in izdelovanje in vstavljanje že pripravljenih skriptov. Adobe Dreamweaver zmore tudi izvajati skupine strani, ki vključujejo interaktivnost in animacijo. Vgrajena orodja omogočajo tudi izdelovanje celovitih namenskih programov.
Z Adobe Dreamweaverjem lahko izdelujemo povsem nova spletišča ali uvažamo in popravljamo obstoječa.

Namestitev programa Adobe Dreamweaver

Adobe Dreamweaver namestimo s standardnim namestitvenim programom za okolje Windows. Namestitveni program izdela vse imenike in datoteke, potrebne za izvajanje programa. Adobe Dreamweaver namesti tudi orodje Adobe Exstensions Manager, ki pomaga pri nameščanju dodatkov, ki jih lahko brezplačno prenesemo iz interneta in orodje Adobe Bridge, ki omogoča upravljanje vsebin izdelanih z Adobeovimi programi na enem mestu (Adobe Flash, Adoe Illustrator, Adobe Dreamweaver, Adobe Fireworks, Adobe Contribute, Adobe Acrobat, Adobe Indesign, Adobe Photoshop).

Preizkusna različica Adobe Dreamweaverja

Preizkusno različico programa lahko prenesete z naslova http://www.adobe.com/downloads/

s

Na strani http://www.adobe.com/downloads/ izberemo v spustnem seznamu program Dreamweaver CS3.

s

S klikom na gumb Go  potrdimo izbiro. Če pri Adobeu še nimamo svojega brezplačnega računa, si ga ustvarimo, v nasprotnem pa vpišemo svoje uporabniško ime in geslo in vstopimo na stran, s katere bomo lahko prenesli program Adobe Dreamweaver CS3.

s

Potrebno je še izbrati ustrezno različico operacijskega sistema, ENGLISH|WINDOWS|285.43 MB in s klikom na gumb Download  lahko začnemo prenos programa.

s

Določiti moramo še ali bomo program nameščali neposredno, v tem primeru kliknemo gumb Zaženi<, lahko pa program shranimo na trdi disk s klikom na gumb Shrani  in namestitev izvedemo kasneje.

s

Pred namestitvijo programa je potrebno preneseno datoteko še raztegniti.
Po končani namestitvi programa, lahko te datoteke zbrišemo s trdega diska.

s

S klikom na gumb Dokončaj  in označenim Zaženi Adobe Dreamweaver CS3  začnemo namestitev programa Adobe Dreamweaver CS3.

s

s

S klikom na gumb Finish  zaključimo namestitev.

s

Ob prvem zagonu Adobe Dreamweaverja CS3 je potrebno program registrirati. Vpisati je potrebno serijsko številko, program pa moramo tudi aktivirati.

Če nimamo serijske številke, program pa želimo preizkusiti, lahko izberemo možnost Želim preizkusiti program Adobe Dreamweaver CS3 brezplačno za 30 dni. Program nam bo 30 dni tudi v tem načinu deloval v polni funkcionalnosti.

s

Delovno okolje programa Dreamweaver

s

Dokumentno okno,  orodjarne in drugi elementi so združeni v integriran uporabniški vmesnik. Ko zaženemo Adobe Dreamweaver CS3 se program odpre v naslednji obliki:
Pozdravno okno:        nudi nekaj povezav do informacij o Adobe Dreamweaverju CS3 in hitre bližnjice za odpiranje dokumentov. S potrditvijo gumba Don't show again  lahko pozdravno okno tudi izključimo. Ob ponovnem zagonu programa se pozdravno okno ne bo prikazalo. V primeru, da ga želimo ponovno prikazati, ga moramo vključiti v meniju Edit > Preferences .   V kategoriji General  potrdimo potrditveno polje Show Welcome Screen 

Skupina orodjarn: ob desnem robu so orodjarne. Z njimi lahko spreminjamo in urejamo elemente spletne strani.
Menijska vrstica: v menijski vrstici so spustni meniji z ukazi.
Vrstica za vstavljanje: v njej so gumbi za vstavljanje elementov spletne strani.
Okno z lastnostmi predmetov: okno z lastnostmi prikazuje vse lastnosti trenutno izbranega predmeta. Spreminja se glede na izbran predmet.

Če v pozdravnem oknu kliknemo povezavo Create New > HTML<, se nam odpre nov dokument.

s

Adobe Dreamweaverjev CS3 vmesnik se spremeni v naslednjo obliko:

s

Dokumentno okno: vsebuje naslovno in menijsko vrstico, vrstico za vstavljanje, orodno vrstico, horizontalno in vertikalno ravnilo, vrstico stanja in delovno površino. V njej bo prikazana naša spletna stran v skoraj enaki obliki kot pozneje v spletnem brskalniku.
Orodna vrstica: omogoča nam hiter dostop do pomembnih ukazov.  
Vrstica stanja: nahaja se na spodnjem robu dokumentnega okna. V njej so orodja za izbiranje značk, meni za izbiro povečave, meni za izbiro velikosti okna in statistika prenosa datotek.

Večino ukazov v programu Adobe Dreamweaver CS3 lahko dosežemo na več načinov. Večinoma gre za tri načine:

  • ukaze izbiramo v padajočih menijih,
  • ukaz izberemo s klikom na gumb v orodjarni,
  • ukaz natipkamo s tipkovno bližnjico.

Dokumentno okno

Dokumentno okno vsebuje naslovno in menijsko vrstico, vrstico za vstavljanje, orodno vrstico, horizontalno in vertikalno ravnilo, vrstico stanja in delovno površino. V naslovni vrstici je ime programa - Adobe Dreamweaver CS3, v oglatih oklepajih pa je ime datoteke in pot do datoteke.

s

Menijska vrstica

s

Spustni meniji nam nudijo ukaze. V primeru, ko se za ukazom v meniju pojavi trikotna označba, nam to pove, da ukaz nudi še dodatne izbire, ki jih najdemo v dodatnem spustnem meniju. Le ta se pojavi, ko miškin kazalec zapeljemo na ukaz. Pri večini ukazov je v spustnih menijih navedena tudi tipkovna bližnjica, s katero lahko izvršimo ta ukaz.

s

Menija File  in Edit  sta skupna večini programov. V meniju File  (Datoteka) so ukazi za odpiranje, shranjevanje, uvažanje in izvažanje datotek.

s

Meni Edit  (Urejanje) vsebuje ukaze za izrezovanje, kopiranje in lepljenje, ukaze za iskanje in zamenjevanje in ukaz za določanje splošnih nastavitev.

s

Z ukazi v meniju View  (Pogled) lahko nastavimo povečavo, izbiramo različne poglede na dokumente, vklapljamo in izklapljamo razne elemente (ravnilo, mrežne črte, pomožne črte, nevidne elemente.).

s

Meni Insert  (Vstavljanje) je približno enak vrstici za vstavljanje. Nudi nam elemente, ki jih lahko vstavljamo na spletno stran: značke, slike, večpredstavnostne elemente, tabele, povezave.

s

Z ukazi v meniju Modify  (Spremeni) spreminjamo lastnosti trenutno izbranega predmeta.

s

Meni za delo z besedilom Text  (Besedilo) omogoča dostop do več načinov izboljševanja končnega videza besedila na spletni strani. V meniju za besedilo je veliko lastnosti, ki so na voljo tudi v oknu z lastnostmi, kadar je besedilo izbrano.

s

Meni Comands  (Ukazi) vsebuje ukaze za snemanje in predvajanje animacije, za čiščenje HTML kode, za razvrščanje tabele, za izdelavo spletnega foto albuma.

s

Meni Site  (Spletišče) vsebuje ukaze, ki se nanašajo na celotno spletno mesto.

s

Ukazi iz menija Window  (Okna) odpirajo vse orodjarne in okna z lastnostmi v programu.

s

Meni Help  (Pomoč) nam nudi povezave z datotekami s pomočjo za HTML. V tem meniju najdemo tudi ukaze za registracijo in aktivacijo programa. Če nas zanima, katero različico Dreamweaverja uporabljamo, ali pa iščemo serijsko številko programa, uporabimo ukaz About Dreamweaver<

s

Vrstica za vstavljanje

V vrstici za vstavljanje so gumbi za vstavljanje elementov spletne strani, kot so slike, tabele, obrazci, povezave. Element vstavimo v spletno stran tako, da kliknemo ikono gumba. Vrstica za vstavljanje ima več zavihkov, aktiviramo pa jo s klikom na Insert  v vrstici za vstavljanje.

s

s

s

s

s

s

s

s

Vrstica z zavihki dokumentov

V Adobe Dreamweaverju CS3 imamo lahko hkrati odprtih več dokumentov. V primeru, da so prikazani v raztegnjeni obliki, lahko z njimi upravljamo v vrstici z zavihki dokumentov. Dokument, ki ga želimo urejati, izberemo tako, da kliknemo zavihek z njegovim imenom.

s

Dokumente pa lahko prikažemo tudi v posameznih oknih. To storimo tako, da kliknemo na gumb s v vrstici z zavihki imen dokumentov. V raztegnjen pogled se vrnemo s klikom na gumb s v enem izmed oken dokumentov.

s

Orodna vrstica

Orodna vrstica ima tri sklope gumbov. Trije gumbi na levi strani nam omogočajo preklapljanje med različnimi pogledi na dokument:

  • gumb Code   - pogled na kodo;
  • gumb Split  - kombiniran pogled;
  • gumb Design  - pogled na postavitev strani.

V rubriko Title  (Naslov) vpišemo naslov spletne strani. Ta se prikaže tudi v naslovni vrstici, ko si stran ogledujemo z brskalnikom. Privzeto je poimenovana Untitled Document  (Neimenovan dokument). V tem sklopu gumbov sta še menija File management  (Upravljanje datotek) in Preview/Debug in browser  (Predogled/Iskanje napak v brskalniku).
V drugem sklopu orodij imamo gumbe, ki nam omogočajo osvežitev strani, vklop in izklop nekaterih možnosti uporabniškega vmesnika in elementov.
Tretji sklop gumbov pa nudi preverjanje kode in prikazovanja v brskalnikih.

s

Vrstica stanja

Vrstica stanja nam v levem delu omogoča izbiranje značk HTML kode, s katerimi lahko izbiramo posamezne elemente spletne strani. Poleg tega lahko v njej nastavljamo povečavo pogleda, premikamo delovno okno, nastavljamo velikost delovnega okna in sproti spremljamo statistiko prenosa spletne strani, ki je odvisna od velikosti strani.

s

Orodjarne

V Adobe Dreamweaverjevih CS3 orodjarnah in oknih z lastnostmi nastavljamo lastnosti, prikazujemo vrstice z orodji, izdelujemo animacije, oblikujemo s kaskadnimi slogi in dodajamo funkcije spletni strani. Orodjarne so združene v skupine in pripete ob dokumentnem oknu. Ko je orodjarna odprta, je v meniju Window  označena s kljukico. Z dodajanjem ali odstranjevanjem kljukic v meniju Window  zapiramo in odpiramo orodjarne. Z vlečenjem robov lahko orodjarne večamo oz. manjšamo, lahko pa jih tudi prosto prenašamo po delovnem oknu.

ss

Okno z lastnostmi

Okno z lastnostmi prikazuje lastnosti trenutno izbranega predmeta. Glede na izbran predmet se spreminja tudi njegova vsebina. S klikom na puščico v desnem spodnjem vogalu lahko prikažemo več ali manj lastnosti posameznega predmeta.

s

s

Da pridobimo maksimalni delovni prostor, lahko skupino orodjarn in okno z lastnostmi z gumbom za skrivanje in prikazovanje okna skrijemo oziroma prikažemo.

s

s

 

Navodila
Uvod v svetovni splet
Dreamweaver - 01 - Spoznavanje programa
Dreamweaver - 02 - Izdelava osnovne spletne strani z besedilom
Dreamweaver - 03 - Dodajanje slik
Dreamweaver - 04 - Tabele
Dreamweaver - 05 - Ogled in spreminjanje kode HTML
Dreamweaver - 06 - Definiranje spletišča
Dreamweaver - 07 - Postavitev strani
Dreamweaver - 08 - Priprava in uporaba predloge
Dreamweaver - 09 - Povezave
Dreamweaver - 10 - Izdelava slikovnih kart in navigacijskih vrstic
Dreamweaver - 11 - Dodajanje večpredstavnostnih datotek
Dreamweaver - 12 - Izdelava spletnega foto albuma
Dreamweaver - 13 - CSS
Dreamweaver - 14 - Prenos spletišča na strežnik
NVU - 01 - Spoznavanje programa
NVU - 02 - Izdelava osnovne spletne strani z besedilom
NVU - 03 - Dodajanje slik
NVU - 04 - Tabele
NVU - 05 - Povezave
NVU - 06 - CSS
NVU - 07 - Spletišče
NVU - 08 - Objava spletišča

Izhod

 

na vrh