dwcc_10-fdfjqwe

Copyright © Link group

Rad sa kodom

Iako Dreamweaver nudi odlične opcije za vizuelni rad sa dokumentima, ne možemo se osloniti samo na njih. Često ćemo doći u situaciju da željenu izmenu možemo postići mnogo brže koristeći Code prikaz. Čak je ponekad nešto i nemoguće izvesti bez ručne izmene koda. Zbog toga, moramo znati da koristimo Code prikaz i da se snalazimo u njemu. Code Hint Po default podešavanjima Dreamweaver prikazuje content-sensitive code sugestije (hintove) u Code prikazu. Na primer, ako krenemo da otvaramo ugaonu zagradu posle otvorenog <body> taga, otvoriće se pop-up meni i prikazaće sve validne HTML tagove. Možemo skrolovati dole kako bismo pronašli odgovarajući tag i dvoklikom na njega uneti ga u kod dokumenta. Druga opcija je da nastavimo sa kucanjem. Na primer, ako unosimo div tag, ukucaćemo slovo d zatim i, i DW će nam sam selektovati div u meniju. Dovoljno je da pritisnemo Enter na tastaturi i tag će biti unesen u dokument.

slika 10.1 - Code hint

Kada pritisnemo Space bar na tastaturi, otvoriće se drugi Context meni, samo što će ovog puta prikazati sve validne atribute za tekući element, jer je logično da tu unosimo atribute. Ako unosimo ID element, DW će uneti id="" i postaviti kursor između znaka navoda kako bismo uneli vrednost za ID. Ako unosimo klasu koja je već definisana u CSS-u, Dreamweaver će automatski prikazati sve dostupne klase koje možemo izabrati. Context meni nastavlja da se pojavljuje sve dok ne zatvorimo ugaonu zagradu. Ako se slučajno ovaj meni izgubi, pritisnućemo Ctrl + Spacebar da bi se opet pojavio.


slika 10.2 - Code hint Coding Toolbar Kada otvorimo Code prikaz stranice u Dreamweaveru, bilo kroz Document toolbar ili putem View > Code, Coding Toolbar je prikazan na levoj strani dokumenta. Takođe je dostupan u Code Inspectoru i nalazi se isto na levoj strani prozora. Jedna specifičnost u vezi sa njim jeste ta da se ne može otkačiti i premestiti na neko drugo mesto, ali se može isključiti i prema potrebi uključiti ponovo, putem opcije View > Toolbars > Coding. U Coding Toolbaru postoje sledeće opcije:

● Open Documents - Kada kliknemo na ovo dugme, izlistaće se svi trenutno otvoreni dokumenti, zajedno sa njihovim putanjama. Ovo je korisna opcija ako imamo više otvorenih fajlova sa istim imenom, pa preko putanje možemo lako odrediti koji je koji. Klikom na neki od njih, on postaje aktivan.

● Show Code Navigator - Ova opcija prikazuje Code Navigator koji se koristi za prikazivanje liste CSS pravila koja su primenjena na selektovani element na stranici, zajedno sa detaljnim kodom u vidu pop-up prozora.

● Collapse Full Tag - Ova opcija selektuje blok koda u kome se trenutno nalazi kursor i kolapsira sav kod koji je u njemu. Ne vrše se nikakve izmene, samo se prikaz menja. Možemo opet vratiti kod na normalan prikaz, klikom na plus ikonicu levo od kolapsiranog koda.

● Collapse Selection - Ova opcija kolapsira selektovani deo. ● Expand All - Klikom na ovu opciju proširujemo sve kolapsirane sekcije. ● Select Parent Tag - Ova opcija selektuje Parent tag trenutno selektovanog elementa

ili elementa, gde god je kursor trenutno lociran. ● Balance Braces - Ova opcija selektuje ceo kod koji se nalazi unutar zagrada, vitičastih

zagrada i ugaonih zagrada. ● Line Numbers - Ova opcija uključuje/isključuje prikaz broja linija. ● Highlight Invalid Code - Ukoliko je uključeno, žutom bojom označava neispravan

kod. ● Syntax Error Alerts - Ova opcija prikazuje greške u Java Script kodu u vidu žute

trake na vrhu prozora dokumenta. Ovo dugme uključuje/isključuje ovu opciju. Ne postoji u toolbaru code inspectora i to je jedina razlika ovog toolbara u code prikazu i code inspectoru.

● Apply Comment Tag - Ova opcija omogućava unos različitih tipova komentara u tekuću liniju ili selekciju.


● Remove Comment Tag - Pomoću ove opcije uklanjaju se uneseni komentari iz tekuće linije ili selekcije.

● Wrap Tag - Ova opcija omogućava brz način za primenu taga oko tekuće selekcije. ● Recent Snippets - Ovde se prikazuju svi poslednje korišćeni Snippeti iz Snippets

panela. ● Move or Convert CSS - Ova opcija omogućava brzo prebacivanje CSS pravila u CSS

fajl. ● Indent Code - Ova opcija uvlači kod. Tab dugme na tastaturi ima istu ulogu. ● Outdent Code - Ova opcija je suprotna prethodnoj, pomera kod ulevo, smanjuje

uvlačenje (Shift + Tab). ● Format Source Code - Klikom na ovo dugme, otvara se meni sa opcijama pomoću

kojih možemo da primenimo default formatiranje na stranicu ili trenutno selektovan kod, zatim omogućava brz pristup kategoriji Code Format u Preferences panelu. Tag Library Editor omogućava kontrolu nad formatiranjem svakog HTML elementa u kodu.

slika 10.3 - Coding toolbar u Code prikazu

Komentari U HTML kodu, kao i mnogim drugim programskim i opisnim jezicima, možemo pisati komentare. Komentari služe da pojasne unet kod, da označe nešto u kodu, podsete nas da je potrebno nešto izmeniti i sl. Iako se nalaze u kodu, browseri (u slučaju HTML-a) se neće obazirati na njih, preskaču ih kao da nisu upisani. Komentari imaju tačno definisanu sintakstu koju moramo poštovati. U HTML jeziku postavlja se:

 Dakle, počinjemo komentar znakom <, postavljamo znak uzvika, zatim dve srednje crte i potom pišemo tekst komentara. Na kraju postavljamo dve srednje crte i znak veće >. Dreamweaver će ceo komentar obojiti u kodu u sivu boju, time i vizuelno signalizirajući da se neće primeniti prilikom prikaza. U CSS-u, komentari se postavljaju malo drugačije. Piše se:

/* Tekst komentara */ Kao što vidimo u primeru, jednostavnije nego kod HTML-a, u CSS-u komentar počinjemo tako što pišemo kosu crtu ( / ) i odmah iza nje asterisk znak (*). Potom upisujemo tekst i na kraju završavamo sa ista dva znaka, samo u obrnutom redosledu. Podešavanja prikaza koda Ukoliko želimo da promenimo na koji način se kod prikazuje u Dreamweaveru, možemo otvoriti Preferences dijalog i Code Coloring grupu.


slika 10.4 - Podešavanja prikaza koda

U ovom dijalogu, u donjem delu možemo podesiti boje koje se odnose na sve tipove fajlova, kao što su osnovna boja pozadine (Default background), boja pozadine za read-only fajlove (Read only bacgkround) i sl. Ostalim podešavanjima možemo pristupiti tako što u okviru Document type izaberemo željeni tip fajla, i kliknemo na dugme Edit Coloring Scheme. Pojaviće se novi, dodatni dijalog u kome možemo podešavati prikaz tog tipa fajla. Code Inspector Code Inspector možemo otvoriti tako što ćemo izabrati Windows > Code Inspector iz padajućih menija ili prečicom F10 sa tastature. Code Inspector omogućava prikaz i izmene koda trenutne stranice u posebnom prozoru. Code Inspector je praktično potpuno isti kao Code (ili split) prikaz. Može biti koristan ukoliko radimo u Design prikazu i želimo da nešto brzo promenimo u kodu.


slika 10.5 - Code Inspector

U vrhu su opcije:

• File Management – Opcije vezane za PUT/GET i ostale funkcije File Managementa • Preview/Debug In Browser – Pokretanje browsera i otvaranje u browseru • Refresh Design View – Osvežava design prikaz kako bi izmene koje smo uneli u kod

bile vidljive • Code Navigation – Omogućava lakšu navigaciju. • View Options – Opcije vezane za način prikaza koda:

o Word Wrap – Prelama dugačke linije koda u prikazu. Ne dodaje nove redove i slično, već ih samo tako prikazuje. U suprotnom, redovi idu u svojoj punoj dužini i eventualno se pojavljuje horizontalni skrol.

o Line Numbers – Ova opcija uključuje/isključuje prikaz broja linija. o Hidden Characters – Prikazuje oznake skrivenih karaktera (poput oznake za

razmak, paragraf i sl.) o Highlight Invalid Code – Ukoliko je uključeno, žutom bojom označava

neispravan kod. o Syntax Coloring – Opcija koja boji kod radi lakšeg vizuelnog raspoznavanja. o Auto Indent – Postavlja automatsko uvlačenje redova po pritisku na Enter.

Quick tag editor Opcija koju ćete verovatno češće koristiti je quick tag editor. Ukoliko radimo u design prikazu, pomoću njega možemo vrlo brzo i lako dodati novi tag na određenom mestu, izmeniti postojeći tag ili postaviti novi tag oko trenutne selekcije.


Ubacivanje novog taga Postavićemo kursor na željeno mesto u Design prikazu i na tastaturi pozvati prečicu (Ctrl + T). Otvara se quick tag editor kao mini dijalog preko radne površine, kao što vidimo na slici ispod. Možemo upisati željeni tag i potvrditi. Dreamweaver će automatski postaviti završni tag.

slika 10.6 - Quick Tag editor - insert tag Editovanje postojećeg taga Ukoliko želimo da izmenimo postojeći tag, potrebno je da ga selektujemo i pozovemo već pomenutu prečicu Ctrl + T kako bi se aktivirao Quick Tag editor. Kao što već vidite, tip funkcije u Quick Tag editoru zavisi od same selekcije na stranici, dok je komanda (prečica) ista. Da bi lakše selektovali određeni atribut, možete koristiti tag selector iz status bara na dnu prozora dokumenta.


slika 10.7 - Quick Tag editor - Edit tag Postavljanje novog taga oko selekcije Treća upotreba Quick Tag editora je za postavljanje novog taga oko selekcije. Prečica je naravno Ctrl+T. Korisno je kada npr. želimo da postavimo span oko dela teksta i sl. Imajte na umu da ukoliko selektujete ceo tag, pozvaćete Edit tag funkciju, zbog toga, moramo selektovati samo tekst ili drugi neformatiran objekat.

slika 10.8 - Quick Tag editor - Wrap tag


Pitanje: Quick tag editor možemo otvoriti:

● u design prikazu ● u code prikazu ● i u design i code prikazu

Sažetak Iako možemo veći deo sajta napraviti u Design prikazu, potrebno je da poznajemo i HTML i CSS kod. Dw nudi dosta olakšavajućih okolonosti u radu sa kodom, među kojima i code hitn. Takođe, coding toolbar omogućava da lako manipulišemo prikazom. Komentare možemo postavljati kad želimo da označimo nešto. Quick tag editor možemo koristiti u design prikazu kako bi brzo i lako promenili i dodali kod na stranicu.