10 Uporabni Dreamweaver Nasveti in triki za začetnike

Uporabnik Dreamweaverja bo zagotovo računal, kaj je to močan stroj. Opremljen s tonami funkcij, možnosti in sporno eno izmed najbolj znanih IDE (integrirano razvojno okolje) na današnjem trgu. Morda ne izpolnjuje meril, ki so jih nekateri razvijalci zahtevali, vendar Dreamweaver nedvomno zagotavlja dostojno paleto orodij za razvoj, sodelovanje in kodiranje. Te možnosti in orodja so skriti pod sloji obžalovanja vrednih manj intuitivnih menijev, zato nudimo vadnice v današnji objavi.

Pokazali vam bomo nekaj najmočnejših funkcij Dreamweaverja, ki jim bodo omogočili hiter dostop do njih, skupaj s številnimi drugimi koristnimi triki, ki vam bodo podarili razvojni čas in znatno izboljšali kakovost kode. Popoln seznam po skoku.

1. Dinamični pogled z “Pogled v živo”

Že vemo, da DW ponuja statičen pogled na naše odprte datoteke, ampak kaj pa »dinamični pogledi« aplikacije, kot je WordPress?

Najprej moramo povej DW kakšne nastavitve uporabite za predstavitev našega»dinamični pogledi« pravilno. To storite tako, da izberete Nastavitve zahteve HTTP Iz Pogled> Možnosti ogleda v živo in vnesite GET ali POST parametre morate pravilno pregledati aplikacijo.

Nato preklopite na Pogled v živo v DW, nadomešča staro Pogled oblikovanja podokno z živo sliko, ki je popolna za pixel vaše strani; dopolnjene z živimi Javascript, manipulacijami DOM, poizvedbami v bazi podatkov, kodo na strani strežnika in upodobljenim CSS-jem, namesto ikonami nadomestnih mest, ki jih vidite v Pogled oblikovanja.

2. "Navigator kode" je Firebug podjetja DW

Če naredimo korak dlje, gre za vse Navigator kode in ko je v Pogled v živo okno, ALT-klik (Command-Option-klik za Mac) kjerkoli v oknu, takoj prikaže kodo, ki je ta element naredila. Podobno tistemu, kar trenutno vidite v Firefoxu / Firebugu.

3. Zamrznitev JavaScripta

Zaradi dinamične narave Ajaxa je treba pogosto sodelovati s stranjo, kjer določeni elementi niso prikazani ali na voljo ob nalaganju prve strani. To so elementi, ki so vstavljeni v stran nekaj časa po nalaganju strani. Tukaj je primer:

Morda boste želeli spremeniti obliko nasveta orodja, ki je v celoti izvedena v JavaScriptu. Pred današnjim dnem bi morali metodično iskati svojo pot skozi skripte, da bi našli tisto, kar je bilo ustvarjeno in kje.

Namesto tega poskusite to:

Ponastavite svojo stran v Pogled v živo, nato zadeti F6 kadarkoli zamrzni JavaScript, s čimer lahko ciljno usmerite in razčlenite kodo, ki se nanaša na kateri koli dinamični element na strani.

4. Naslednji najboljši prijatelj Live Viewa - "Live Code"

Pri uporabi Pogled v živo, lahko tudi vklopite Live Code. Live Code bo posodobil vašo kodo med premikanjem, klikom in interakcijo z elementi in elementi v Okno Live View!

5. Samodejno dokončanje JavaScripta

Dreamweaver ima inteligentno in popolno dokončanje kode HTML in CSS, ampak kaj o Javascripts? Če v programu Dreamweaver vnesete jQuery ali Prototype, morate vedeti, da obstajajo API razširitve, ki omogočajo dokončanje kode JavaScript. Zmanjšuje potrebo po tipkanju in je lahko zelo priročno za hitre koderje.

Kliknite tukaj, da preberete več ali prenesete:

• Razširitev jQuery API za Dreamweaver
• Razširitev prototipnega API-ja za Dreamweaver

6. Uljepšajte kode na letalu

Ali vaša kodna stran izgleda kot neorganizirana, grda vrsta kode? Uporabi Uporabi oblikovanje vira funkcijo in jo ponovno prilagodite svojim željam. Za hitro čiščenje kliknite Oblikuj izvorno kodo na dnu Orodna vrstica za kodiranje (Uredi> Orodne vrstice> Kodiranje) in izberite Nastavitve formata kode , da nastavite želeno oblikovanje.

Do možnosti oblikovanja lahko dostopate tudi iz Ukazi> Uporabi oblikovanje vira ali jo uporabite samo za izbrani blok kode, tako da izberete Uporabi Oblikovanje vira za izbiro možnost.

7. Pridobite pripomoček

Samo kliknite Razširite ikono Dreamweaverja (izgleda kot orodje) v vaši aplikacijski vrstici in izberite Poiščite spletne pripomočke. To vas bo popeljalo v Adobe Exchange, kjer boste našli dodatne pripomočke ponudnikov, kot so Yahoo !, JQuery in mnogi drugi.

8. Subversion in Dreamweaver

In da, Dreamweaver podpira Subversion (SVN). Za razvijalce, ki uporabljajo SVN za vzdrževanje nadzora nad svojimi projekti, je to lahko dobra novica. Dreamweaver razvijalec Andrew Voltmer razpravlja kako lahko uporabljate Subverzije z Dreamweaverjem.

9. Ni več odvečnih slogov

Veliko ljudi uporablja Dreamweaver kot način za vizualno posodabljanje vsebine, kot je urejevalnik besedil. Pred Dreamweaver CS4 bi to lahko povzročilo odvečna pravila CSS .class1, .class2, in tako naprej. V Dreamweaver CS4 preprosto preklopite Inšpektor za premoženje do HTML način (kliknite ikono HTML na levi strani inšpektorja) in se boste poslovili od vsega tega odvečnega CSS-ja, tako da vstavite le ustrezno oznako HTML.

10. Preprosto preverjanje veljavnosti obrazca

Želite preveriti polja obrazca, vendar ste zaskrbljeni, da boste morali ponovno zgraditi iz nič? Brez skrbi. Preprosto izberite obstoječi element obrazca, na primer besedilno polje, in uporabite a Gradnik za preverjanje veljavnosti Spryja Iz Vstavi> Začetni meni. Potem preverite zahteve za preverjanje veljavnosti, kot so minimalni ali maksimalni znaki, neposredno iz Inšpektor za premoženje.

Bonus: 3 več

11. Preprosto dostopajte do povezanih datotek

Ko odprete datoteko HTML ali PHP, boste na vrhu okna dokumenta videli vrstico z odvisnimi imeni datotek, na primer CSS, Javascript in celo vključene datoteke za PHP. Lahko preprosto preklopite na te datoteke, naredite spremembe in jih shranite, tudi brez odpiranja. Ko v vrstici Sorodne datoteke kliknete katero koli datoteko, boste videli njen vir v pogledu Code in nadrejeni strani v pogledu Design. Ali pa uporabite Code Navigator za hiter dostop do izvorne kode CSS, ki vpliva na vaš trenutni izbor.

12. Preverite združljivost brskalnikov

Odprite dokument, ki ga želite preveriti za združljivost; iz iste menijske vrstice, kjer se dostopa do pogledov Code / Split / Design, poiščite skrajno desno za "Preverite strangumb.

S klikom se bo razširil spustni meni, izberite »Preverite združljivost brskalnika. The Okno z rezultati združljivosti brskalnika na dnu okna se prikažejo morebitne težave.

Opomba: To ne bo preverilo novih različic IE na Macu! Če želite izbrati brskalnike za testiranje, izberite Preverite stran > Nastavitve v meniju.

13. Predogled strani PHP

Dreamweaver vam omogoča zagon in predogled PHP kod znotraj programske opreme. Tukaj je, kako ga namestiti.

Prvi koraki

1. Najprej izberite Spletna stran -> Novo spletno mesto na vrhu navigacije.
2. Videli boste oba Osnovno in Napredna definicija spletnega mesta zavihki z možnostmi. Nadaljujemo z izbiro Zavihek Napredna definicija spletnega mesta.
3. V ustrezno polje vnesite ime mape za spletno mesto (za ta primer bomo kot ime mape uporabili »myphp«).
4. Ustvarite drugo mapo z imenom "slike", tako da vnesete njeno ime v polje "Privzete mape slik".
5. Pod Lokalne informacije, v polja vnesite naslednje vrednosti:
   • Ime mesta: ime spletnega mesta. Za uporabo samo v Dreamweaverju
   • Lokalna korenska mapa: To je ime spletnega mesta, v katerem boste delali. Poskrbite, da boste spletna mesta poimenovali tako, da boste čim bolj zmanjšali konflikte ali zmedli imena.
   • Privzeta mapa Slike: To je neobvezno, vendar priporočamo, da ga ustvarite zdaj, saj bo večina spletnih mest do neke mere uporabljala slike. Tukaj bo DW »iskal«, da vstavi slike v vaše dokumente med fazo kodiranja.
   • Povezave glede na: To določa, kako bo obdelano povezovanje dokumentov v Dreamweaverju. Izberete lahko Dokument ali Root. Razlike med obema so:
     • Document Relative - Vstavi pot glede na datoteko, ki jo uporabljate, in element, s katerim je povezan.
     • Root Relative - Uporablja / ki povzroči povezavo dokumenta / datoteke glede na mapo ROOT.
     • Druga možnost je, da v konfiguracijske datoteke strežnika dodate nekaj konfiguracije. Ker smo bolj napredna naloga, se bomo še naprej držali relativnega dokumenta.
   • Naslov HTTP: vnesite korensko mapo spletnega mesta za vaš projekt
   • Povezave, občutljive na velike in male črke: Dreamweaver bo pri nalaganju na strežnik preveril, ali ima katera koli datoteka v projektu lahko občutljivo na zadevo. Obvestila bodo prikazana, ko uporabljate: Site -> Check Links Sitewide. Lahko ga preverite, če želite. Osebno ne preverjam, ker vedno imenujem datoteke z malimi črkami. Velika črka ni priporočljiva.
   • predpomnilnik: Preverite Omogoči predpomnilnik.
6. V Oddaljena informacija stran, bodisi nastavite svoj FTP ali drug dostop do oddaljenega strežnika ali pustite Access to None.
7. V Preskusni strežnik strani izberite možnost, ki se nanaša na vrsto datoteke / sistem, ki ga boste testirali.
8. Nadzor različic ne bo uporabljen za ta primer, zato ga lahko pustite prazno, če ga ne poznate.
9. Skrivanje vam omogoča, da postavite .psd, .fla in druge izvorne datoteke znotraj mape spletnih mest in jih DW ne bo upošteval pri nalaganju / posodabljanju spletnega mesta.
10. Oblikovne opombe so idealni za ekipo za izdelavo spletnih strani, saj obdrži obvestilo o spremembah datotek. Privzeto je preverjeno in dobro je, da uporabimo ta način.
11. Zapusti Stolpec prikaza datoteke, Prispevajte, in Predloge privzeto.
12. The Spry stran preprosto kaže na mapo sredstva Spry, ki se samodejno vključi v Dreamweaver. Tega ni treba spreminjati. Ko je vsaka nastavitev končana, kliknite v redu.

Predogled PHP v Dreamweaverju

Zdaj odprite datoteko PHP in naredite potrebne spremembe. To datoteko si preprosto ogledate v programu Dreamweaver pritisnite F12 in rezultati bodo prikazani v privzetem brskalniku. Spremenite lahko kateri brskalnik uporabljate Uredi -> Nastavitve -> Predogled v brskalniku. To omogoča hitrejši čas urejanja predogleda, odpravlja potrebo po vnosu dolgih naslovov URL v vrstico brskalnika ali uporabo druge strežniške programske opreme za upodabljanje datotek PHP, ki vse prihranijo čas!

To je vse. Vesel Dreamweaver :-)

Opomba urednika: To objavo je napisal Jesse Matlock za Hongkiat.com. V zadnjih šestih letih se je Jesse ukvarjal z oblikovanjem uporabniškega vmesnika, razvojem aplikacij in spletnimi trendi. On je ustanovitelj in vodja oblikovanja za majhno, čeprav zelo nadarjeno razvojno ekipo, ki se osredotoča na razvoj prilagojenih aplikacij.