10 Korisni Dreamweaver Savjeti i trikovi za početnike

Dreamweaver korisnik će definitivno misliti kakav je to powerhouse. Opremljen tonama značajki, opcija i sporno jedan od najpoznatijih IDE (Integrated Development Environment) na današnjem tržištu. Možda ne ispunjava kriterije koje su neki programeri zahtijevali, ali Dreamweaver nedvojbeno pruža pristojan raspon alata za razvoj, suradnju i kodiranje. Ove opcije i alati skriveni su ispod slojeva žalosno manje intuitivnih izbornika, zbog čega pružamo vodiče u današnjem postu.

Pokazat ćemo vam neke od najsnažnijih funkcija programa Dreamweaver kako biste im pomogli brzo pristupiti, zajedno s mnogim drugim korisnim trikovima koji će vam podmazati vrijeme razvoja i značajno poboljšati kvalitetu koda. Cijeli popis nakon skoka.

1. Dinamički prikaz s “Prikaz uživo”

Već znamo da DW nudi statičan prikaz naših otvorenih datoteka, ali što o tome "dinamički prikazi" aplikacije kao što je WordPress?

Prvo, moramo reći DW koje postavke koristiti za predstavljanje našeg"dinamički prikazi" ispravno. Da biste to učinili, odaberite Postavke HTTP zahtjeva od Prikaz> Opcije prikaza uživo , a zatim unesite DOBITI ili POST parametre morate ispravno pregledati vašu aplikaciju.

Zatim prebacivanjem na Prikaz uživo u DW, on zamjenjuje stari Prikaz dizajna okno sa živim, savršenim WebKit prikazom vaše stranice; upotpunjene živim Javascriptom, DOM manipulacijama, upitima baze podataka, kôdom na strani poslužitelja i prikazanim CSS-om, umjesto ikona rezerviranog mjesta Prikaz dizajna.

2. "Navigator koda" je DW-ov Firebug

To je korak dalje Navigator koda i kada ste u Prikaz uživo prozor, ALT-klik (klikom na Command-Option za Mac) bilo gdje u prozoru, odmah predstavlja kôd koji je prikazao tu stavku. Slično onome što trenutno vidite u Firefoxu / Firebugu.

3. Zamrzavanje JavaScripta

Zbog dinamičke prirode Ajaxa, mnogo puta trebamo stupiti u interakciju sa stranicom na kojoj određene stavke nisu prikazane ili dostupne na učitavanju prve stranice. To su stavke koje se ubrizgavaju u stranicu neko vrijeme nakon učitavanja stranice. Evo primjera:

Možda želite promijeniti stil alata koji je u potpunosti implementiran u JavaScriptu. Prije danas, trebali biste metodički pretraživati ​​svoj put kroz svoje skripte da biste pronašli ono što je stvoreno i gdje.

Umjesto toga pokušajte sljedeće:

Vratite svoju stranicu na Prikaz uživo, zatim udari F6 za zamrzavanje JavaScripta u bilo koje vrijeme, omogućujući vam da ciljate i secirate kôd koji se odnosi na bilo koju dinamičku stavku na stranici.

4. Sljedeći najbolji prijatelj Live Viewa - "Live Code"

Kada koristite Prikaz uživo, također možete uključiti Live Code. Live Code će ažurirati vaš kôd dok lebdite, kliknete i stupate u interakciju s elementima i stavkama u Prozor Live View (Prikaz uživo)!

5. Automatski JavaScript dovršetak

Dreamweaver dolazi s inteligentnim i potpunim završetkom HTML i CSS koda, ali što je s Javascripts? Ako kodirate jQuery ili Prototype u Dreamweaveru, trebali biste znati da postoje API proširenja koja omogućuju završetak Javascript koda. To smanjuje tipkanje potrebno i može doći u prilično zgodan za brzo kodera.

Kliknite ovdje da biste pročitali više ili preuzeli:

• jQuery API proširenje za Dreamweaver
• Prototip API proširenja za Dreamweaver

6. Uljepšajte kodove na letu

Izgleda li vaša kodna stranica kao neorganizirane, neuredne linije koda? Koristiti Primijeni formatiranje izvora značajka i preoblikovati je točno prema vašim željama. Da biste ih brzo očistili, kliknite gumb Formatiranje izvornog koda na dnu Alatna traka za kodiranje (Uredi> Alatne trake> Kodiranje) i odaberite Postavke formata koda da biste postavili željeno oblikovanje.

Možete pristupiti i opciji oblikovanja iz Naredbe> Primijeni oblikovanje izvora ili ga primijenite samo na blok koda odabira odabirom Primijenite Oblikovanje izvora na odabir opcija.

7. dobiti widgety

Samo kliknite Proširite ikonu Dreamweaver (izgleda kao brzina) u traci aplikacija i odaberite Potražite web-widgete. To će vas odvesti na Adobe Exchange gdje možete pronaći dodatne widgete dobavljača kao što su Yahoo !, JQuery i mnogi drugi.

8. Subversion i Dreamweaver

I da, Dreamweaver podržava Subversion (SVN). Za programere koji koriste SVN za održavanje kontrole nad svojim projektom, to bi mogla biti dobra vijest. Dreamweaver programer Andrew Voltmer raspravljati kako možete koristiti Subverzije s Dreamweaverom.

9. Nema više suvišnih stilova

Mnogi ljudi koriste Dreamweaver kao način za vizualno ažuriranje sadržaja, poput programa za obradu teksta. Prije Dreamweaver CS4, to bi moglo rezultirati redundantnim CSS pravilima poput .Class1, .Klasa 2, i tako dalje. U Dreamweaver CS4, samo prebacite svoj Inspektor imovine do HTML modu (kliknite HTML ikonu s lijeve strane inspektora) i reći ćete zbogom svim tim suvišnim CSS-u, umetanjem samo odgovarajućeg HTML oznake.

10. Provjera obrasca je jednostavna

Želite li potvrditi polja obrasca, ali ste zabrinuti da ćete morati ponovno graditi od nule? Bez brige. Jednostavno odaberite postojeći element obrasca, kao što je tekstno polje, i primijenite a Spy Provjera widgeta od Umetni> Izbornik Spry. Zatim kontrolirajte zahtjeve za provjeru valjanosti kao što su minimalni ili maksimalni znakovi izravno iz Inspektor imovine.

Bonus: još 3

11. Jednostavno pristupite povezanim datotekama

Kada otvorite HTML ili PHP datoteku, na vrhu prozora dokumenta sada ćete vidjeti redak zavisnih naziva datoteka, kao što su CSS, Javascript, pa čak i datoteke za PHP. Možete se jednostavno prebaciti na te datoteke, napraviti promjene i spremiti ih, a sve to bez otvaranja. Kada kliknete bilo koju datoteku u traci Srodne datoteke vidjet ćete njezin izvor u pogledu koda i nadređenu stranicu u prikazu dizajna. Ili koristite Navigator koda da biste brzo pristupili izvornom kodu CSS-a koji utječe na vaš trenutni odabir.

12. Provjerite kompatibilnost preglednika

Otvorite dokument koji želite provjeriti za kompatibilnost; iz iste trake izbornika gdje se pristupa pogledima Code / Split / Design, potražite krajnje desno za "Provjerite stranicu' dugme.

Klikom na nju proširit će se padajući izbornik, odaberite "Provjerite kompatibilnost preglednika”. Prozor za rezultate kompatibilnosti preglednika na dnu prozora prikazat će se svi problemi koje trebate riješiti.

Napomena: ovo NEĆE provjeriti nove verzije IE na Macu! Za odabir preglednika koje ćete koristiti za testiranje, odaberite Provjerite stranicu > postavke iz izbornika.

13. Pregledajte PHP stranice

Dreamweaver vam omogućuje pokretanje i pregled PHP koda unutar softvera. Evo kako ćete ga postaviti.

Početak

1. Najprije odaberite mjesto -> Nova stranica s gornje navigacije.
2. Vidjet ćete oboje Osnovni, temeljni i Napredna definicija web-lokacije karticama opcija. Nastavimo odabirom Kartica Napredna definicija web-lokacije.
3. Unesite naziv mape za web-lokaciju u odgovarajući okvir (za ovaj primjer koristit ćemo "myphp" kao naziv mape).
4. Napravite drugu mapu pod nazivom "slike" tako da unesete njeno ime u polje "Zadane mape slika".
5. Ispod Lokalne informacije, unesite sljedeće vrijednosti u polja:
   • Ime stranice: naziv web-lokacije. Za korištenje samo u Dreamweaveru
   • Lokalna korijenska mapa: Ovo je naziv web-lokacije na kojoj ćete raditi. Svakako imenovati web-lokacije na način da se minimiziraju sukobi ili zbunjuju imena.
   • Mapa Zadane slike: Ovo je opcionalno, ali preporučujemo da ga napravite sada jer će većina web-lokacija u određenoj mjeri koristiti slike. Ovo je mjesto gdje će DW 'izgledati' za umetanje slika u dokumente tijekom faze kodiranja.
   • Veze u odnosu na: Ovo definira kako će se obraditi povezivanje dokumenata u Dreamweaveru. Možete odabrati Dokument ili Root. Razlike između njih su:
     • Document Relative - umetnut će stazu koja se odnosi na datoteku koju radite i na koju je stavka povezana.
     • Root Relative - Koristi / koji uzrokuje povezivanje dokumenta / datoteke u odnosu na ROOT mapu.
     • Druga alternativa je dodati neke konfiguracije u konfiguracijske datoteke poslužitelja. Budući da smo napredniji zadatak, za sada ćemo se samo držati relativnog dokumenta.
   • HTTP adresa: unesite korijensku mapu web-lokacije za svoj projekt
   • Poveznice osjetljive na velika i mala slova: Dreamweaver će provjeriti može li bilo koja datoteka u projektu imati problem osjetljiv na mala i velika slova prilikom prijenosa na poslužitelj. Obavijesti će biti prikazane kada koristite: Site -> Check Links Sitewide. Možete ga provjeriti ako želite. Ja osobno to ne provjeravam jer uvijek nazivam datoteke malim slovima. Velika slova se ne preporučuju.
   • Cache: Označite Omogući predmemoriju.
6. U Udaljena informacija postavite svoj FTP ili drugi pristup udaljenom poslužitelju ili ostavite Access to None.
7. U Poslužitelj za testiranje odaberite opciju koja se odnosi na vrstu datoteke / sustav koji ćete testirati.
8. Kontrola verzija neće se koristiti za ovaj primjer, tako da ga možete ostaviti praznim, osim ako ga ne poznajete.
9. Ogrtač omogućuje vam da postavite .psd, .fla i druge izvorne datoteke unutar mape web-lokacija, a DW će ih zanemariti prilikom prijenosa / ažuriranja web-lokacije.
10. Napomene o dizajnu idealni su za web dizajn tim jer zadržava bilješku o promjenama koje su napravljene u datotekama. Provjereno je prema zadanim postavkama i dobro je za nas na ovaj način.
11. Napustiti Stupac prikaza datoteke, doprinijeti, i Predlošci kao zadano.
12. žustar stranica jednostavno pokazuje na mapu Spry imovine koja se automatski uključuje u Dreamweaver. Nema potrebe mijenjati ovo. Nakon završetka svake postavke kliknite u redu.

Pregledajte PHP u Dreamweaveru

Sada otvorite PHP datoteku i izvršite potrebne promjene. Da biste ovu datoteku vidjeli u Dreamweaveru jednostavno pritisnite F12 i rezultati će se prikazati u vašem zadanom pregledniku. Možete promijeniti koji se preglednik koristi Uredi -> Postavke -> Pregled u pregledniku. To omogućuje brže vrijeme uređivanja za pregled, eliminira potrebu za unošenjem dugačkih URL-ova u traku preglednika ili upotrebu drugog poslužiteljskog softvera za prikazivanje PHP datoteka, od kojih sve štedi vrijeme!

To je sve. Sretan Dreamweaver :-)

Napomena urednika: Ovaj post je napisao / la Jesse Matlock za Hongkiat.com. Posljednjih 6 godina, Jesse se bavi dizajnom korisničkog sučelja, razvojem aplikacija i web trendovima. On je osnivač i voditelj dizajna za mali, iako vrlo talentirani razvojni tim koji se fokusira na razvoj prilagođenih aplikacija.