Ne morate koristiti samo WYSIWYG
Dreamweaver je izvrstan WYSIWYG urednik , ali ako niste zainteresirani za pisanje web stranica u okruženju "ono što vidite je ono što dobivate", još uvijek možete koristiti Dreamweaver jer je i dobar uređivač teksta. Ali postoje mnoge značajke koje se skliznu za put u editoru kodova Dreamweaver jer je glavni fokus na "izgledu dizajna" ili WYSIWYG uređivaču proizvoda.
Kako doći do Dreamweaverovog kodnog prikaza
Ako nikad niste upotrijebili Dreamweaver kao HTML uređivač prije nego što nikada niste primijetili ni tri gumba pri vrhu stranice: "Kod", "Split" i "Dizajn". Dreamweaver se prema zadanim postavkama pokreće u "Dizajn pogledu" ili WYSIWYG modu. No, lako se prebaciti na pregled i uređivanje HTML koda. Samo kliknite gumb "Kod". Ili idite u izbornik Prikaz i odaberite "Kod".
Ako samo učite kako napisati HTML ili želite saznati kako će vaše izmjene utjecati na vaš dokument, istovremeno možete otvoriti prikaz koda i dizajn. Ljepota ove metode je da možete urediti i na oba prozora. Na taj način možete napisati kôd za svoju oznaku slike u HTML-u, a zatim upotrijebiti izgled dizajna da biste ga premjestili na drugo mjesto na stranici povlačenjem i ispuštanjem.
Da biste istovremeno vidjeli ili:
- Kliknite gumb "Split" (između "Kod" i "Dizajn")
- U izborniku View odaberite "Code and Design"
Kada budete zadovoljni pomoću Dreamweavera za uređivanje HTML koda, možete promijeniti svoje postavke kako biste standardno otvorili Dreamweaver u prikazu koda. Najlakši je način spremiti prikaz koda kao radnog prostora. Dreamweaver će se otvoriti u zadnjem radnom prostoru koji koristite. Ako to ne učinite, jednostavno idite na izbornik Prozor i odaberite željeni radni prostor.
Opcije prikaza koda
Dreamweaver je tako fleksibilan jer ima toliko mnogo načina da ga prilagodite i učinite da funkcionira onakav kakav želite. U prozoru opcija postoje boje za kodiranje, oblikovanje koda, savjeti o kodovima i mogućnosti za prepisivanje koda koje možete prilagoditi. Ali možete i promijeniti neke posebne opcije unutar samog koda.
Kada ste u prikazu koda, na alatnoj traci nalazi se gumb "Opcije prikaza". Opcije možete pregledati tako da otvorite izbornik Prikaz i odaberete "Opcije prikaza koda". Opcije su:
- Word Wrap - obavi HTML kôd tako da ga možete pregledati bez pomicanja vodoravno. Imajte na umu da ova opcija ne unosi kvačicu vozača u kvar, samo prikazuje kôd tako da je lakše čitati.
- Brojevi linija - prikazuje brojeve linija duž strane koda. Prikazuje simbol linije omota za crte koji se protežu duže od prozora prikaza.
- Skriveni znakovi - prikazuje posebne znakove umjesto razmaka koji bi se prikazali na web stranici. Kao što točka zamjenjuje prostor, dvostruki chevron zamjenjuje svaku karticu, a pilcrow ili marker odjeljka zamjenjuje svaki prekid linije.
- Označite nevažeći kôd - ističe HTML koji je pogrešan žuto. Ako odaberete žutu oznaku, Property Inspector će vam dati savjete o tome kako to popraviti.
- Sintaksa bojanje - uključuje ili isključuje kodiranje boje vašeg koda. Promijenite boje boje kodiranja u odjeljku bojanja koda postavki.
- Automatsko uvlačenje - automatski se uvlači kôd nakon vraćanja kotača ako je kôd iznad njega uvučen. Veličinu alata možete promijeniti promjenom veličine kartice u odjeljku oblikovanja koda postavki.
Uređivanje HTML koda u Dreamweaverovom kodu
Jednostavno je uređivati HTML kod u Dreamweaverovom kodnom prikazu. Jednostavno započnite upisivati HTML. Ali Dreamweaver vam pruža neke dodatke koji ga šire izvan osnovnog HTML urednika. Kada započnete pisati HTML oznaku, upišete <. Ako privremeno zaustavite nakon tog znaka, Dreamweaver će vam pokazati popis HTML oznaka . To se naziva šifrom koda. Da biste suzili odabir, počnite pisati slova - Dreamweaver će suziti padajući popis oznaku koja odgovara onome što upisujete.
Ako ste novi u HTML-u, možete se kretati kroz popis HTML oznaka i odabrati različite da biste vidjeli što rade. Dreamweaver će i dalje tražiti atribute nakon što upišete oznaku. Na primjer, ako upišete " oznaku.
Ali savjeti za kod ne završavaju na oznakama. Pomoću koda za umetanje možete dodati sljedeće:
Ako se kôdovi ne prikazuju, možete pritisnuti Ctrl-razmaknicu (Windows) ili Cmd-razmaknicu (Macintosh) da biste ih prikazali. Najčešći razlog zašto se kôd ne može pojaviti ako ste se prebacili na drugi prozor prije završetka oznake. Budući da Dreamweaver isključuje tipkanje znaka <, ako napustite prozor i vratite se, morat ćete ponovo pokrenuti kôdove za kôd.
Možete isključiti izbornik alata za kôd pritiskom na tipku za bijeg.
Kada unesete početnu HTML oznaku, morat ćete ga zatvoriti. Dreamweaver to čini na prirodan način. Ako upišete opciju "Zatvori oznake" koja najbolje odgovara vašim potrebama.
Ako niste sasvim spremni prebaciti se na uređivanje stranica u HTML-u, ali biste htjeli gledati kôd kao što je napisan, trebali biste pokušati inspektora koda. To otvara HTML kôd u zasebnom prozoru. Radi isto kao i kodni prikaz, a zapravo je u osnovi odvojivi kôd prikaza koda za trenutni dokument. Da biste otvorili inspektor koda, idite na izbornik Prozor i odaberite "Code Inspector" ili pritisnite tipku F10 na tipkovnici.
Dreamweaver će oblikovati HTML kod, međutim, želite ga prikazati. Na primjer, ako koristite 3 razmaka za uvlačenje, ali nikada ne uvlačite IMG oznake, možete odrediti informacije o oblikovanju u opcijama prepisivanja koda. Zatim idite na izbornik Naredbe i odaberite "Primijeni oblikovanje izvora". Ovo je odličan način da dobijete kôd napisan od strane nekog drugog u oblik koji vam je poznat.
Značajka koju mnogi HTML koderi ne znaju o ili ne upotrebljavaju jest mogućnost slanja HTML koda. To ne uklanja oznake iz dokumenta, već ih samo uklonite iz prikaza da ne ometaju rad na vašem računalu. Da biste saželi svoj kôd:
- Odaberite odjeljak koda koji želite sakriti
- Na izborniku Uređivanje odaberite "Sakrij odabir" iz podizbornika "Šifra koda"
Jednostavniji način je odabir koda, a zatim kliknite ikone kolabiranja koda koji se pojavljuju u kanalu. Također možete desnom tipkom miša kliknuti na odabrani kôd i odabrati "Collapse Selection".
Ako želite sakriti sve osim onoga što je istaknuto, odaberite "Skrivanje izvan odabira" u bilo kojem od gore navedenih metoda.
Da biste proširili srušeni kôd, jednostavno dvaput kliknite na njega. To otvara kôd i odabire ga. Zatim možete premjestiti taj odabir ili je izbrisati ili dodati dodatne oznake oko nje.
Svojstva kolapsa i proširenja možete koristiti cijelo vrijeme na stranicama na kojima ne želite uređivati vanjski predložak. Izaberite samo područje sadržaja koje želite urediti i srušiti van. Zatim napišite svoj HTML. I dalje možete pogledati stranicu u prikazu Dizajn ili je pregledati u pregledniku. Skupljeni kôd nije uklonjen iz dokumenta, jednostavno skriven od prikaza. Možete ga koristiti i kada radite na nizu stavki. Kada završite, slomite je. Znate da ste gotovi kada se ne prikazuje kôd.