Na početku ćemo se upoznati sa radnim okruženjem, a ukoliko ste radili u nekom drugom Adobe CS programu, poput Photoshopa CS5, onda će Vam princip panela i samo radno okruženje (Workspace) biti prilično poznato, ali sa nekim razlikama.

 

Welcome screen

Kada pokrenemo DW sačekaće nas Welcome screen ili ekran dobrodošlice, prikazan na slici ispod.

 

Welcome screen (ekran dobrodošlice)

 

Welcome screen se pojavljuje na radnoj površini prilikom pokretanja programa. On je automatski omogućen, te će se prikazivati prilikom svakog startovanja DW-a. Ukoliko to ne želimo, imamo mogućnost da ga isključimo u levom donjem delu prozora, štikliranjem opcije Don’t show again.

Sam welcome screen prikazuje u levom delu pređašnje dokumente na kojima smo radili u vidu liste (Open a Recent Item), kao i opciju za otvaranje bilo kog fajla (Open…), u sredini opcije za kreiranje novih fajlova (Create New) i kreiranje novog sajta, kao i dodatne opcije, dok se u desnom i donjem delu pojavljuju linkovi ka video-tutorijalima koje je pripremio Adobe, linkovi ka help materijalima i tako dalje.

Ukoliko izaberemo kreiranje novog dokumenta ili otvaranje postojećeg, welcome ekran će odmah nestati, a pojaviće se ponovo ukoliko zatvorimo sva dokumenta (pod uslovom da nije isključen). Sve opcije koje se nalaze na njemu, možemo naći i u padajućim menijima, o čemu će biti reči tokom kursa.

 

Radno okruženje

Na slici ispod prikazano je radno okruženje Dw-a sa kreiranim novim html dokumentom u split prikazu. I Vaš radni prostor bi trebalo da izgleda isto ili barem slično, zavisno od rezolucije monitora. Ukoliko ste menjali radno okruženje, preduzmite sledeće korake: izaberite iz padajućeg menija opciju Window > Workspace Layout > Designer. Tako ćete vratiti na default podešavanja jer radno okruženje može izgledati i funkcionisati potpuno drugačije.

 

Radno okruženje

 

Na radnom prostoru možemo razaznati nekoliko celina: Menu bar, Application bar, Workspace menu, Document title bar, Document toolbar, Browser navigation toolbar, Coding toolbar, Property inspector i ostale panele i toolbarove, kao i sam prikaz dokumenta na više načina (design view, code view i trenutno prikazan split, koji je kombinacija ova dva).

  • Code view, kako mu samo ime kaže, prikazuje kod dokumenta.
  • Design view prikazuje približan izgled strane u browseru, dok.
  • Split prikazuje dokument na oba načina istovremeno, tako što deli ekran na dva dela.

 

Važno je u startu napomenuti da, iako je design prikaz prilično tačan, nikada ne može realno prikazati stranu kao što to čine browseri. Naime, Dw dodaje razne vizuelne elemente u okviru design prikaza kao pomoć u razvoju, i ti detalji neminovno remete prikaz. Dakle, kada želimo da testiramo stranu, moramo je pokrenuti u browseru i testirati ili koristiti live view, a ne uzdati se samo u design prikaz unutar Dw. U toku kursa ćemo na primerima proveriti i pokazati ove detalje.

 

Menu bar i Application bar

Na vrhu prozora nalazi se komandna linija (menu bar), a čak i ukoliko ste početnik u radu sa računarima, primetićete da je komandna linija konceptualno slična svim ostalim programima koji imaju opcije otvaranja fajlova, čuvanja, korigovanja i tako dalje.

Odmah desno od menu bar-a se nalazi application bar koji sadrži tri ikonice sa padajućim menijima. Sa ovim opcijama ćemo se detaljnije upoznati kasnije u toku kursa.

 

Menu bar i Application bar

 

Menu bar se sastoji se od padajućih menija i klikom na naziv otvaraju se njihovi podmeniji sa ostalim opcijama. Ako kliknemo levim tasterom miša na neku komandu, rezultat će varirati u zavisnosti od komande koju smo izabrali.

  • ukoliko komanda koju smo izabrali iza svog imena nema prateće simbole, Dw će je momentalno izvršiti.
  • ukoliko komanda iza svoga naziva ima tri tačke (...) otvoriće se okvir za dijalog i dalja podešavanja.
  • ukoliko komanda ima trougao pored imena, koji pokazuje na desno, pojaviće se podmeni, posle toga možemo odabrati neku od ponuđenih komandi iz podmenija.

 

Većina komandi u desnom delu sadrži i ispisanu tastaturnu prečicu. To znači da možemo lako pozvati komandu, ukoliko pritisnemo odgovarajuće tastere na tastaturi.

 

File menu Dw-a

Na slici iznad, prikazan je otvoren file menu, u kome možemo uočiti standardne operacije za rad sa dokumentima, kao što su new, open, save i tako dalje. Detaljno o opcijama u ovom, ali i ostalim menijima, pozabavićemo se tokom kursa.

 

Rad sa panelima

Iako svim opcijama možemo pristupiti preko pomenutih padajućih menija, Dw pruža lak pristup većini komandi putem panela. Možemo prikazivati, sakrivati, pomerati, raspoređivati panele po svojim željama i potrebama.

 

Window menu i nekoliko panela

 

Window padajući meni prikazuje spisak svih dostupnih panela. Takođe, "štiklirani" su paneli koji su trenutno aktivni. Takođe, kao i kod drugih komandi, možemo pozivati, tj. uključivati/isključivati panele pomoću navedenih tastaturnih prečica. Na primer, panel insert možemo uključiti/isključiti preko Ctrl+F2.

Na slici ispod prikazana je jedna grupa panela. Možemo uočiti da su u toj grupi tri panela (files, assets i snippets), od kojih je jedan aktivan i prikazan (assets). Paneli su predstavljeni pomoću tabova panela na kojima je ispisano njihovo ime. Određeni panel aktiviramo klikom na njegov tab, a automatski će svi ostali paneli iste grupe postati neaktivni.

 

Grupa panela - aktivan je Assets panel, dok su
Files i Snippets trenutno neaktivni

 

Iznad grupe panela nalazi se title bar. Ukoliko uhvatimo levim tasterom miša title bar, pomeraćemo celu grupu panela (slika ispod).

 

Pomeranje grupe panela

 

Ukoliko uhvatimo levim tasterom miša tab određenog panela, možemo izmestiti panel iz grupe (slika ispod).

Izdvajanje jednog panela iz grupe

 

Panele možemo i spajati u grupe. Kada levim tasterom miša uhvatimo tab određenog panela možemo ga dodati željenoj grupi. Dovoljno je da držeći levi taster miša dovedemo panel do vrha grupe panela dok se ne pojavi plavi sjaj svuda oko grupe (slika ispod). Pošto otpustimo taster miša, panel će se pridružiti grupi.

Ukoliko želimo, možemo i menjati redosled panela u jednoj grupi, jednostavnim hvatanjem za tab panela i pomeranjem levo/desno.

 

Dodavanje jednog panela grupi panela

 

Za razliku od prethodno prikazane situacije kada smo panel vratili u grupu, možemo panel postaviti ispod/iznad/pored grupe ili pojedinačnog panela. Naime, u prethodnom primeru se pojavio plavi sjaj oko cele grupe prilikom prevlačenja. Ukoliko pomeramo panel i dovedemo ga do, na primer, donje ivice grupe, pojaviće se plavi sjaj, ali samo u donjem delu, kao linija. Ukoliko tada otpustimo taster miša, panel će se smestiti ispod grupe (slika ispod).

Takođe, jedan panel (držeći tab) ili grupu panela (držeći title bar grupe) možemo zakačiti (dockovati) uz ivicu Dw prozora, ili uz druge grupe. Dw pruža širok dijapazon mogućnosti što se tiče rasporeda i izgleda programa.

Dodavanje panela ispod grupe

 

Panele, osim što možemo pomerati, možemo i smanjiti (minimizovati). Ukoliko uradimo dvoklik levim tasterom miša na tab panela, smanjićemo taj panel (ili grupu) kao na slici ispod. Ukoliko ponovimo dvoklik, panel će se vratiti u svoju veličinu.

 

Smanjivanje/povećanje panela (grupe)

 

Ukoliko kliknemo levim tasterom miša na dugme collapse u title baru, smanjićemo panel ili grupu na ikonice. Tada, klikom na ikonicu otvaramo/zatvaramo panel (slika ispod). Analogno tome, klik na expand vraća panele na otvoreno stanje.

 

Pretvaranje panela (ili grupe) na ikonicu(e)

 

X dugme koje se nalazi u krajnjem desnom uglu zatvara grupu panela ili panel, a iste možemo ponovo prikazati iz padajućeg Windows menija.

Pored svih pomenutih podešavanja, većini panela možemo menjati i veličinu. Dovoljno je da dođemo do ivice panela i kursor miša će se promeniti u odgovarajući simbol, kao što se vidi na slici ispod.

 

Promena veličine panela

 

Izbor radnih okruženja

Svaki od ovih predefinisanih workspace okruženja je dizajniran kako bi pomogao kod određenih zadataka. Postoji osam različitih predefinisanih izbora:

  • App Developer - Izabirom ovog radnog prostora dobijamo na levoj strani šest panela: CSS styles, AP elements, Databases, Bindings, Behaviors, Files, Assets i Snippets. Prozor dokumenta je u sredini i bez Property Inspectora. Ovaj radni prostor se koristi kod razvijanja web aplikacija.
  • App developer Plus - Ovaj radni prostor daje sličan set panela na levoj strani kao i App Developer Layout. Prozor dokumenta je u sredini, sa Split Code prikazom i Property Inspectorom ispod koda. Sa desne strane su prikazani u vidu ikonica neki od panela.
  • Classic - Ovaj Layout je najsličniji radnom prostoru Dizajner iz prošlih verzija.Na vrhu je horizontalno prikazan insert panel u vidu grupa i ikonica, dok ostatak dosta nalikuje novom designer okruženju.
  • Coder - Ovaj radni prostor ima u centru Code prikaz dokumenta, a sa leve CSS styles, AP elements, Files, Assets i Snippets panele. Ovo je minimalističko okruženje i namenjeno kodiranju.
  • Coder plus - Veoma sličan Coder radnom prostoru, sa tom razlikom da su paneli Insert, CSS styles i AP elements u vidu ikonica na desnoj strani.
  • Designer - U centru ovog radnog prostora je prozor dokumenta u Split Code prikazu, ispod njega Properties Inspector. Sa desne strane su Insert, CSS Styles i Ap Elements, Files i Assets paneli. Ako ćete raditi sa WYSIWYG editorom i Code editorom, izaberite ovaj Layout.
  • Designer Compact - Sličan kao Designer layout, jedina razlika je što su paneli na desnoj strani prikazani u vidu ikonica.
  • Dual Screen - Ovaj Layout se koristi kada imamo dva monitora jedan pored drugog. Inicijalno, paneli se prikazuju na levom monitoru, a prozor dokumenta i Code Inspector se prikazuju na desnom monitoru.

 

Izbor predefinisanih radnih okruženja - workspace menu

 

Osim ovih panela, ukoliko su aktivirane live usluge koje Adobe pruža, možda ćemo uočiti i neke druge panele u pomenutim predefinisanim okruženjima.

Izbor radnog okruženja (workspace) vršimo tako što iz padajućih menija izaberemo: Window > Workspace Layout > Designer, odnosno okruženje koje želimo. Takođe, možemo koristiti workspace menu (prikazan na slici iznad) radi lakšeg pristupa.

Sa druge strane, ukoliko ne želimo da koristimo predefinisana radna okruženja i želimo da Dw uredimo po sopstvenim potrebama i željama, možemo lako rasporediti panele i njihove veličine i potom takav raspored sačuvati kao novi workspace. Za tu namenu, uočićemo tri poslednje opcije koje se nalaze u Window > Workspace Layout meniju, kao i u malopre pomenutom workspace meniju. 

Kreiranje novog radnog okruženja

 

Dakle, ukoliko želimo da snimimo svoja podešavanja radnog okruženja, podesićemo sve parametre/pozicije i izabrati New Workspace, a zatim uneti željeno ime, te potvrditi. Tada će se naš novi workspace pojaviti među ostalima. Kasnije pomoću opcije Manage Workspaces možemo promeniti ime nekom ili obrisati, uz napomenu da ne možemo uticati na predefinisane.

Ukoliko smo menjali neki postojeći workspace, bilo da se radi o predefinisanom ili našem, tako što smo menjali panele i njihove dimenzije, uvek možemo vratiti na snimljeno stanje izborom Reset 'Designer' (odnosno, neki drugi, trenutno izabrani).

 

Rad sa toolbarovima

Pored panela koje smo ranije pomenuli, Dw poseduje nekoliko vrlo bitnih toolbarova. Njih možemo prikazati ili sakriti koristeći padajući meni View > Toolbars > (željeni toolbar).

  • Document toolbar - Prikazuje tastere pomoću kojih možemo izabrati način prikaza dokumenta, razne opcije pregleda, testiranje u browseru etc.

  •  
    • A - Prikazuje samo kod dokumenta (Code View).
    • B - Prikazuje i kod i dokument vizuelno (Split View).
    • C - Prikazuje dokument samo vizuelno (Design View).
    • D - Prikazuje kod kakav stiže do browsera (nije moguće menjati kod u ovom prikazu)
    • E - Izvršava proveru css kompatibilnosti sa različitim browserima.
    • F - Prikazuje stranu poput browsera (nisu moguće izmene)
    • G - Uključuje CSS inspect mod koji radi sa Live View i omogućava identifikaciju html elemenata i njihovih CSS stilova.
    • H - Pregled strane ili debug u browseru.
    • I - Uključivanje/isključivanje vizuelnih pomagala.
    • J - Refresh vizuelnog prikaza (design view) pošto izvršimo izmene u kodu.
    • K - Naslov dokumenta koji se pojavljuje u title baru browsera može se uneti i kroz html kod. Ako je već uneto, pojavljuje se ovde.
    • L - File management.
  • Browser navigation - Tek pošto uključimo Live view ovaj toolbar postaje aktivan. Tada se prikazuje adresa strane koja je trenutno prikazana, a i sam Dw se ponaša praktično kao web browser. 

  

  •  
    • A - Kontrole internog web browser pregleda.
    • B - Trenutna adresa.
    • C - Opcije Live prikaza.
       
  • Coding (prikazan, tj dostupan je samo u code prikazu) - Sadrži alate za rad sa kodom. Coding ne možemo premeštati niti mu možemo menjati veličinu. Postavljen je na fiksnoj poziciji i samo ga možemo uključiti/isključiti.
  • Standard toolbar (u osnovnom podešavanju radnog okruženja nije prikazan) - Sadrži osnovne komande za rad sa fajlovima, tačnije učitanim dokumentom. Komande su New, Open, Browse in Bridge (korišćenje Adobe Bridge za pregled fajlova), Save, Save All, Print Code, Cut, Copy, Paste, Undo i Redo.
  • Style rendering toolbar (u osnovnom podešavanju radnog okruženja nije prikazan) - Sadrži opcije koje nam omogućavaju da simuliramo prikaz strane, odnosno njene CSS stilizacije na različitim tipovima prikaza. Takođe, omogućava prikaz css stilova u određenim situacijama, kao i potpuno isključivanje/uključivanje css stilova.
Dodaj komentar Sviđa mi se - (0) Ne sviđa mi se - (0)    

  • Interfejs 1
  • Interfejs 2
  • Interfejs 3