10 Hyödyllisiä Dreamweaverin vinkkejä aloittelijoille

Dreamweaverin käyttäjä varmasti luulee, mitä se on. Pakattu tonneina ominaisuuksia, vaihtoehtoja ja kiistattomasti yksi tunnetuimmista IDE-tuotteista (integroitu kehitysympäristö) nykypäivän markkinoilla. Se ei välttämättä täytä kriteereitä, joita jotkut kehittäjät vaativat kuitenkin, Dreamweaver tarjoaa kiistatta kunnon valikoiman kehitys-, yhteistyö- ja koodaustyökaluja. Nämä vaihtoehdot ja työkalut on piilotettu valitettavien vähemmän intuitiivisten valikoiden alle, minkä vuoksi tarjoamme opetusohjelmia tämän päivän postissa.

Näytämme sinulle muutamia Dreamweaverin tehokkaimpia toimintoja, jotka auttavat pääsyä niihin nopeasti, sekä monia muita hyödyllisiä temppuja, jotka voitelevat kehitysaikaa ja parantavat merkittävästi koodin laatua. Täysi lista hyppyjen jälkeen.

1. Dynaaminen näkymä “Live-näkymä”

Tiedämme jo, että DW tarjoaa staattisen kuvan avoimista tiedostoistamme, mutta entä sitten "dynaamiset näkymät" sovelluksen, kuten WordPressin?

Ensinnäkin meidän täytyy kertoa DW mitä asetuksia käytät esittelemään"dynaamiset näkymät" oikein. Voit tehdä tämän valitsemalla HTTP-pyyntöasetukset alkaen Näytä> Live View -asetukset valitse sitten SAADA tai LÄHETTÄÄ parametrit, joita sinun tarvitsee tarkastella sovelluksellasi oikein.

Sitten vaihtamalla Live-näkymä DW: ssä se korvaa vanhan Suunnittelunäkymä ruutu, jossa on live-pikseli-täydellinen WebKit -palautus sivulta; Täydellinen live-Javascript, DOM-manipulaatiot, tietokantakyselyt, palvelinpuolen koodi ja renderoitu CSS, eikä sijaintimerkkien kuvakkeita, joita näet Suunnittelunäkymä.

2. "Code Navigator" on DW: n Firebug

Se on askel vielä pidemmälle Code Navigator ja milloin Live-näkymä ikkuna, ALT-napsauttaminen (Mac-komento-vaihtoehto-napsauttaminen) missä tahansa ikkunassa, tuo heti näkyviin koodin, joka on tehnyt kyseisen kohteen. Samankaltainen kuin Firefoxissa / Firebugissa.

3. JavaScriptin jäädyttäminen

Ajaxin dynaamisen luonteen vuoksi meidän on monta kertaa vuorovaikutuksessa sellaisen sivun kanssa, jossa tietyt kohteet eivät ole saatavilla tai saatavilla ensimmäisen sivun latauksessa. Nämä ovat kohteita, jotka pistetään sivulle jonkin aikaa sivun lataamisen jälkeen. Tässä esimerkki:

Haluat ehkä muuttaa työkalun kärjen muotoilua, joka on toteutettu kokonaan JavaScriptissä. Ennen tänään sinun pitäisi etsiä tapojasi skripteistäsi löytääksesi, mitä on luotu ja missä.

Kokeile sen sijaan:

Palauta sivu Live-näkymä, sitten osuma F6 Freeze JavaScript milloin tahansa, jolloin voit kohdistaa ja purkaa koodin, joka liittyy sivun dynaamiseen kohtaan.

4. Live Viewin seuraava paras ystävä - "Live Code"

Käytettäessä Live-näkymä, voit myös käynnistää Live-koodi. Live-koodi päivittää koodisi, kun siirrät, napsautat ja vuorovaikutuksessa elementtien ja kohteiden kanssa Live View -ikkuna!

5. Automaattinen JavaScript-täydennys

Dreamweaverissa on älykäs ja täydellinen HTML- ja CSS-koodin valmistus, mutta entä Javascriptejä? Jos koodit jQuery tai Prototype Dreamweaverissa, sinun pitäisi tietää, että on olemassa API-laajennuksia, jotka tarjoavat Javascript-koodin. Se vähentää tarvittavaa kirjoittamista ja voi tulla melko käteväksi nopeille koodereille.

Klikkaa tästä lue lisää tai lataa:

• Dreamweaverin jQuery API -laajennus
• Prototyypin API-laajennus Dreamweaverille

6. Koristele lentojen koodit

Näyttääkö koodisivusi organisoimattomia, sotkuisia koodirivejä? Käytä Käytä lähdemuotoa ominaisuus ja muotoile se täsmälleen mieleisesi. Voit puhdistaa ne nopeasti napsauttamalla Muotoile lähdekoodia -kuvake alareunassa Koodaus-työkalurivi (Muokkaa> Työkalurivit> Koodaus) ja valitse Koodimuodon asetukset määrittää haluamasi muotoilu.

Voit myös käyttää muotoiluvaihtoehtoa Komentot> Käytä lähdemuotoa tai käytä sitä vain valitulle koodilohkolle valitsemalla Käytä lähdemuotoilua valintaan vaihtoehto.

7. Hanki widgety

Napsauta vain Laajenna Dreamweaver-kuvake (näyttää vaihteelta) sovelluspalkissa ja valitse Selaa Web-widgetit. Tämä vie sinut Adobe Exchange -palveluun, josta löydät lisää widgetit myyjiltä, ​​kuten Yahoo !, JQuery ja monet muut.

8. Subversion & Dreamweaver

Ja kyllä, Dreamweaver tukee Subversionia (SVN). Kehittäjille, jotka käyttävät SVN: tä ylläpitämään hankkeensa tarkistuksen hallintaa, tämä voisi olla hyvä uutinen. Dreamweaverin kehittäjä Andrew Voltmer keskustelee miten voit käyttää aliohjelmia Dreamweaverin avulla.

9. Ei enää tarpeettomia tyylejä

Monet ihmiset käyttävät Dreamweaveria tapa päivittää sisältöä visuaalisesti, kuten tekstinkäsittelyohjelma. Ennen Dreamweaver CS4: n käyttöä tämä saattaa johtaa tarpeettomiin CSS-sääntöihin .Class1, .Class2, ja niin edelleen. Vaihda Dreamweaver CS4: ssä vain Kiinteistön tarkastaja että HTML -tilassa (napsauta Inspectorin vasemmalla puolella olevaa HTML-kuvaketta) ja sanot hyvästi kaikki tarpeettomat CSS: t, lisäämällä vain sopivan HTML-merkinnän.

10. Lomakkeen validointi on helppoa

Haluatko validoida lomakekentät, mutta on huolissasi siitä, että sinun täytyy rakentaa uudelleen tyhjästä? Ei huolia. Valitse vain olemassa oleva lomakkeen osa, kuten tekstikenttä, ja käytä a Spry Validation-widget alkaen Lisää> Spry-valikko. Ohjaa sitten validointivaatimukset, kuten vähimmäis- tai enimmäismerkit suoraan Kiinteistön tarkastaja.

Bonus: 3 lisää

11. Liittyvät tiedostot helposti

Kun avaat HTML- tai PHP-tiedoston, näet asiakirjaikkunan yläosassa rivin riippuvaisia ​​tiedostoja, kuten CSS, Javascript ja jopa tiedostot PHP: lle. Voit helposti siirtyä näihin tiedostoihin, tehdä muutoksia ja tallentaa ne kaikki avaamatta niitä. Kun napsautat mitä tahansa tiedostoa liittyvissä tiedostoissa, näet sen lähdekoodin koodinäkymässä ja vanhemman sivun Suunnittelunäkymässä. Voit myös käyttää koodinavigaattoria pääsemään nopeasti CSS-lähdekoodiin, joka vaikuttaa nykyiseen valintaan.

12. Tarkista selainten yhteensopivuus

Avaa asiakirja, jonka haluat tarkistaa yhteensopivuudesta; samasta valikkorivistä, jossa koodin / jaon / muotoilun näkymät ovat käytettävissä, katso oikealle oikeaan kohtaan 'Tarkista sivu-painike.

Napsauttamalla sitä laajennetaan pudotusvalikko, valitse 'Tarkista selaimen yhteensopivuus'. Selaimen yhteensopivuuden tulosten ikkuna näyttää ikkunan alareunassa kaikki ongelmat, joita sinun on käsiteltävä.

Huomautus: Tämä ei tarkista IE: n uusia versioita Macissa! Jos haluat valita, mitkä selaimet käytetään testaukseen, valitse Tarkista sivu > asetukset valikosta.

13. Esikatsele PHP-sivuja

Dreamweaverin avulla voit suorittaa ja esikatsella PHP-koodeja ohjelmiston sisällä. Näin saat sen asetukset.

Päästä alkuun

1. Valitse ensin paikka -> Uusi sivusto alkuun navigointi.
2. Näet molemmat perustiedot ja Advanced Site Definition vaihtoehto-välilehdet. Jatka valitsemalla Advanced Site Definition -välilehti.
3. Syötä sivuston kansion nimi sopivaan ruutuun (tätä esimerkkiä käytämme "myphp" -kansiota kansion nimellä).
4. Luo toinen kansio nimeltä "kuvat" kirjoittamalla sen nimi "Oletuskuvat" -kansioon.
5. Alla Paikalliset tiedot, anna seuraavat arvot kenttiin:
   • Sivuston nimi: sivuston nimi. Käytetään vain Dreamweaverissa
   • Paikallinen juurikansio: Tämä on sen sivuston nimi, johon aiot työskennellä. Muista nimetä sivustot tavalla, joka minimoi ristiriidat tai hämmentävät nimet.
   • Oletuskuvat-kansio: Tämä on valinnainen, mutta on suositeltavaa luoda se nyt, koska useimmat sivustot käyttävät kuvia jossain määrin. Tällöin DW "näyttää" lisätä kuvia dokumentteihin koodausvaiheen aikana.
   • Linkit suhteessa: Tässä määritellään, miten käsitellään Dreamweaverissa olevaa asiakirjaa. Voit valita joko Asiakirja tai Juuri. Näiden kahden väliset erot ovat seuraavat:
     • Asiakirja suhteellinen - lisää polun, joka on suhteessa tiedostoon, jota käytät, ja kohde on linkitetty.
     • Root Relative - Käyttö / joka aiheuttaa asiakirjan / tiedoston yhdistämisen suhteessa ROOT-kansioon.
     • Toinen vaihtoehto on lisätä joitakin määrityksiä palvelimen määritystiedostoihin. Koska olemme edistyneempää tehtävää, käytämme vain asiakirja-suhteita.
   • HTTP-osoite: kirjoita projektin sivuston pääkansio
   • Tapauskohtaiset linkit: Dreamweaver tarkistaa, onko projektissa olevilla tiedostoilla asiaankuuluva ongelma, kun se lähetetään palvelimeen. Ilmoitukset näytetään, kun käytät: Sivusto -> Tarkista linkit Sitewide. Voit jättää sen tarkistetuksi, jos haluat. En henkilökohtaisesti jätä sitä tarkistamaan, koska nimeän tiedostot aina pienillä kirjaimilla. Isokirjainta ei suositella.
   • Kätkö: Tarkista Ota välimuisti käyttöön.
6. Vuonna Etätiedot sivu, joko määritä FTP tai muu pääsy etäpalvelimeen tai jätä käyttöoikeus Ei mitään.
7. Vuonna Testaa palvelin Valitse sivu, joka liittyy testattavaan tiedostotyyppiin / järjestelmään.
8. Versionhallinta sitä ei käytetä tässä esimerkissä, joten voit jättää sen tyhjäksi, ellei sitä tunne.
9. peittäminen voit sijoittaa .psd-, .fla- ja muut lähdetiedostot sivustosi kansioon ja DW jättää ne huomiotta, kun lataat / päivität sivustosi.
10. Suunnitteluohjeet ovat ihanteellisia web-suunnitteluryhmälle, koska sillä on muistiinpanoja tiedostoihin tehdyistä muutoksista. Se tarkistetaan oletusarvoisesti ja sakko, jotta voimme käyttää tätä tapaa.
11. jättää Tiedostonäkymän sarake, edistävät, ja Mallit oletuksena.
12. vetreä sivu viittaa vain Spry-varojen kansioon, joka sisältyy automaattisesti Dreamweaveriin. Tätä ei tarvitse muuttaa. Kun jokainen asetus on valmis, napsauta kunnossa.

Esikatsele PHP Dreamweaverissa

Avaa nyt PHP-tiedosto ja tee siihen tarvittavat muutokset. Voit tarkastella tiedostoa Dreamweaverissa yksinkertaisesti paina F12 ja tulokset näkyvät oletusselaimessasi. Voit muuttaa selainta, jota käytetään Muokata -> Asetukset -> Esikatselu selaimessa. Tämä mahdollistaa nopeamman muokkaus-esikatseluajan, ei tarvitse kirjoittaa pitkiä URL-osoitteita selaimen palkkiin tai käyttää toista palvelinohjelmistoa PHP-tiedostojen tekemiseen, mikä säästää aikaa!

Siinä kaikki. Onnellinen Dreamweaver'ing :-)

Toimittajan huomautus: Tämä viesti on kirjoittanut Jesse Matlock varten Hongkiat.com. Viimeisten 6 vuoden aikana Jesse on uppoutunut UI-suunnitteluun, sovelluskehitykseen ja web-trendeihin. Hän on perustaja ja muotoilupäällikkö pienelle, mutta hyvin lahjakkaalle kehitystiimille, joka keskittyy mukautettuun sovelluskehitykseen.