10 Kasulikud Dreamweaveri nõuanded ja trikid algajatele

Dreamweaveri kasutaja arvab kindlasti, mis see jõuallikas on. Pakendatud tonni funktsioone, võimalusi ja vaieldamatult üks tuntumaid IDE (integreeritud arenduskeskkond) tänapäeva turul. See ei pruugi vastata kriteeriumidele, mida mõned arendajad nõudsid, aga Dreamweaver pakub vaieldamatult korralikku valikut arendus-, koostöö- ja kodeerimisvahendeid. Need valikud ja tööriistad on peidetud kahetsusväärsete vähem intuitiivsete menüüde all, mistõttu pakume tänases postituses õpetusi.

Näitame teile mõningaid Dreamweaveri kõige võimsamaid funktsioone, et aidata teil neid kiiresti juurde pääseda, koos paljude teiste kasulike trikkidega, mis määrivad teie arendusaega ja parandavad oluliselt teie koodi kvaliteeti. Täielik nimekiri pärast hüpata.

1. Dünaamiline vaade koos “Otsevaade”

Me teame juba, et DW pakub meie avatud failide staatilist vaadet, aga mis on "dünaamilised vaated" rakenduse nagu WordPress?

Esiteks peame ütle DW, milliseid seadeid kasutada meie esitlemiseks"dünaamilised vaated" õigesti. Selleks valige HTTP päringu seaded alates Vaade> Otsevaate valikud menüü, seejärel sisestage GET või POST parameetrid, mida vajate oma taotluse õigeks vaatamiseks.

Siis lülitades Otsevaade DW-s asendab see vana Disainivaade paneel, kus on teie veebilehe reaalajas piksel-täiuslik WebKit renderdamine; täiendada live-Javascript-i, DOM-manipulatsioonide, andmebaasi päringute, serveripoolse koodi ja sulatatud CSS-iga, mitte kohatäituri ikoonidega, mida näete Disainivaade.

2. "Code Navigator" on DW Firebug

See on samm edasi Code Navigator ja millal Otsevaade aken, ALT-klõpsamine (Maci jaoks käsku-käsk-klõpsamine) kõikjal aknas, kuvab koheselt selle elemendi. Sarnaselt sellele, mida praegu Firefoxis / Firebugis näete.

3. JavaScripti külmutamine

Ajaxi dünaamilise olemuse tõttu peame mitu korda suhtlema leheküljega, kus teatud esemeid ei esitata ega esita esimesel leheküljel. Need on elemendid, mis sisestatakse lehele mõnda aega pärast lehekülje laadimist. Siin on näide:

Võib-olla soovite muuta tööriista otsa, mida rakendatakse täielikult JavaScriptis, muuta. Enne täna peaksite oma skripte otsima, et leida, mis loodi ja kus.

Selle asemel proovige seda:

Pakkuge oma leht sisse Otsevaade, seejärel tabas F6 Freeze JavaScript igal ajal, võimaldades teil sihtida ja lõigata koodi mis tahes dünaamilise elemendi lehel.

4. Live View'i järgmine parim sõber - "Live Code"

Kasutamisel Otsevaade, saate ka sisse lülitada Live-kood. Live-kood värskendab teie koodi, kui klõpsate, klõpsate ja suhtlete elementide ja üksustega Otsevaate aken!

5. Automaatne JavaScripti lõpetamine

Dreamweaveril on intelligentne ja täielik HTML ja CSS kood, Aga Javascripte? Kui kasutate Dreamweaveris jQuery või Prototype koodi, siis peaksite teadma, et on olemas API-laiendused, mis pakuvad Javascript-koodi. See vähendab vajalikku kirjutamist ja võib kiiresti kodeerijate jaoks päris mugav olla.

Lisateabe saamiseks või allalaadimiseks klõpsake siia:

• Dreamweaveri jQuery API laiendus
• Prototüübi API laiendus Dreamweaverile

6. Kaunista lennulisi koode

Kas teie koodileht näeb välja nagu organiseerimata, räpane koodirida? Kasuta Rakendage allika vormingut funktsiooni ja vormindage see täpselt oma eelistustele. Nende kiireks puhastamiseks klõpsake nuppu Formaadi lähtekood ikoon Kodeerimise tööriistariba (Redigeerimine> Tööriistaribad> Kodeerimine) ja valige Koodivormingu seaded soovitud vormingu seadistamiseks.

Samuti saate kasutada vormindamisvalikut Käsud> Rakenda allika vormingut või rakendage seda ainult valitud ploki koodile, valides Rakendage allika vormindamist valikule valik.

7. Hankige vidin

Klõpsake lihtsalt Laienda Dreamweaveri ikooni (see näeb välja nagu käik) rakenduste riba ja vali Sirvige veebi vidinaid. See viib teid Adobe Exchange'i, kus leiate täiendavaid vidinaid sellistest müüjatest nagu Yahoo !, JQuery ja paljud teised.

8. Subversion ja Dreamweaver

Ja jah, Dreamweaver toetab Subversioni (SVN). Arendajatele, kes kasutavad SVN-i oma projekti kontrollimise kontrollimiseks, võib see olla hea uudis. Dreamweaveri arendaja Andrew Voltmer arutab kuidas saate Subwionssi kasutada Dreamweaveriga.

9. Ei rohkem koondatud stiile

Paljud inimesed kasutavad Dreamweaveri viisina sisu visuaalselt värskendada, nagu tekstitöötlusprogramm. Enne Dreamweaver CS4-i võib see põhjustada üleliigseid CSS-reegleid .klass1, .klass2, ja nii edasi. Dreamweaver CS4-s lihtsalt vahetage oma Kinnisvara inspektor kuni HTML režiimis (klõpsake HTML-ikooni Inspektori vasakul poolel) ja hüvasti kõikidest üleliigsetest CSS-idest, lisades ainult sobiva HTML-märgistuse.

10. Vormi valideerimine on lihtne

Tahad oma vormivälju kinnitada, kuid mures, et peate nullist üles ehitama? Ära muretse. Lihtsalt vali olemasolev vormielement, näiteks tekstivälja ja kasuta a Spry valideerimise vidin alates Sisestage> Spry menüü. Seejärel kontrollige selliseid valideerimisnõudeid nagu miinimum- või maksimummärgid otse Omandi inspektor.

Boonus: veel 3

11. Juurdepääs seotud failidele

HTML- või PHP-faili avamisel näete nüüd dokumendiakna ülaosas rida sõltuvaid failinimesid, nagu näiteks CSS, Javascript ja isegi failid PHP jaoks. Neid faile saab hõlpsasti vahetada, teha muudatusi ja salvestada neid kõiki ilma neid avamata. Kui klõpsate mis tahes faili seotud failide ribal, näete selle allikat koodivaates ja vanema lehel kujunduse vaates. Või kasutage Code Navigatorit, et kiiresti avada CSS-lähtekoodi, mis mõjutab teie praegust valikut.

12. Kontrollige brauserite ühilduvust

Avage dokument, mida soovite ühilduvuse üle kontrollida; samast menüüribast, kuhu on ligipääs Kood / Split / Disaini vaadetele, vaadake kaugele paremale, et „Kontrollige lehekülge'nupp.

Klõpsates seda laiendatakse rippmenüüd, valige 'Kontrollige brauseri ühilduvust". The Brauseri ühilduvuse tulemuste aken ilmub akna allosas probleemidega, mida peate lahendama.

Märkus: see ei kontrolli IE uut versiooni Macis! Testimiseks kasutatavate brauserite valimiseks valige Kontrollige lehekülge > Seaded menüüst.

13. PHP lehekülgede eelvaade

Dreamweaver võimaldab teil käivitada ja eelvaate PHP-koode tarkvara sees. Siin on, kuidas seda seadistada.

Alustamine

1. Esmalt valige Sait -> Uus sait ülevalt navigeerimisest.
2. Näete nii Põhiline ja Täpsem saidi määratlus valikulehed. Jätkame, valides Täiustatud saidi määratluse sakk.
3. Sisestage saidi nimi sobivasse kasti (selle näite puhul kasutame kausta nime "myphp").
4. Looge teine ​​kaust nimega "pildid", sisestades selle nime väljale "Vaikimisi pildikausta".
5. Alla Kohalik teave, sisestage väljadesse järgmised väärtused:
   • Saidi nimi: saidi nimi. Kasutada ainult Dreamweaveris
   • Kohalik juurkaust: See on selle saidi nimi, kus te töötate. Kindlasti nimetage saite nii, et konfliktid oleksid minimaalsed või segased nimed.
   • Kausta Vaikimisi pildid: See on vabatahtlik, kuid soovitatav on see nüüd luua, kuna enamik saite kasutab mingil määral pilte. See on koht, kus DW näeb kodeerimisfaasi ajal oma dokumentidesse pilte.
   • Seotud lingid: See määratleb, kuidas käidelda Dreamweaveris linkivaid dokumente. Saate valida kas dokumendi või juure. Nende kahe vahelised erinevused on järgmised:
     • Dokumendi suhteline - sisestab sinu töötatava faili ja tee, millega see on seotud.
     • Root Relative - Kasutamine / mis põhjustab dokumendi / faili sidumise ROOT-kausta suhtes.
     • Teine võimalus on lisada mõne konfiguratsiooni serveri konfiguratsioonifailidele. Olles edasijõudnud ülesanne, jääme lihtsalt dokumendi-suhtelise kasutamise juurde.
   • HTTP aadress: sisestage oma projekti saidi juurkataloog
   • Juhtumitundlikud lingid: Dreamweaver kontrollib, kas mis tahes projekti failis võib serverile üleslaadimisel olla tundlik probleem. Teated kuvatakse, kui kasutate: Site -> Check Links Sitewide. Võite soovi korral selle kontrollida. Mina isiklikult ei jäta seda kontrollituks, sest ma nimetan faile alati väiketähelisena. Suurtäht ei ole soovitatav.
   • Vahemälu: Kontrollige vahemälu lubamine.
6. In Kauginformatsioon seadistage oma FTP või muu juurdepääs serverisse või jätke Juurdepääs puudub.
7. In Testimise server lehel valige suvand, mis on seotud failitüübi / süsteemi testimisega.
8. Versiooni kontroll seda näidet ei kasutata, nii et võite jätta selle tühjaks, kui seda ei tunne.
9. Cloaking võimaldab paigutada .psd, .fla ja muud allikate failid teie saidi kausta ja DW ei võta neid oma saidi üleslaadimisel / värskendamisel arvesse..
10. Disaini märkused on ideaalsed veebidisaini meeskonnale, kuna see säilitab failis tehtud muudatuste kohta märkuse. See on vaikimisi kontrollitud ja trahvi, et seda kasutada.
11. Jäta Failivaate veerg, Aidake kaasa, ja Mallid vaikimisi.
12. The Spry lehekülg viitab lihtsalt Spry varade kaustale, mis on automaatselt kaasatud Dreamweaveriga. Seda pole vaja muuta. Kui iga seade on lõpetatud, klõpsake nuppu Okei.

Eelvaade PHP-st Dreamweaveris

Nüüd avage PHP fail ja tehke vajalikud muudatused. Selle faili vaatamiseks Dreamweaveris lihtsalt vajutage F12 ja tulemused kuvatakse teie vaikebrauseris. Saate muuta, millist brauserit kasutatakse Muuda -> Eelistused -> Eelvaade brauseris. See võimaldab kiiremat redigeerimis-eelvaadet aega, välistab vajaduse pikkade URL-ide sisestamiseks brauseriribale või teise serveritarkvara kasutamiseks PHP-failide esitamiseks, mis kõik säästavad aega!

See on kõik. Happy Dreamweaver'ing :-)

Toimetaja märkus: See postitus on kirjutatud Jesse Matlock Hongkiat.com jaoks. Viimase kuue aasta jooksul on Jesse ennast kasutajaliidese disaini, rakenduste arendamise ja veebisuundumuste all. Ta on väikese, kuid väga andekas arendusmeeskonna asutaja ja disainijuht, mis keskendub rakenduste arendamisele.