10 Noderīgi Dreamweaver padomi un triki iesācējiem

Dreamweaver lietotājs noteikti rēķinās ar to, ko tā ir. Komplektā ar tonnām iezīmju, iespēju un neapšaubāmi viens no pazīstamākajiem IDE (Integrētās attīstības vide) mūsdienu tirgū. Tas var neatbilst kritērijiem, kurus daži izstrādātāji pieprasīja, tomēr Dreamweaver nenoliedzami nodrošina pienācīgu attīstības, sadarbības un kodēšanas rīku klāstu. Šīs opcijas un rīki ir paslēpti zemāk nožēlojamo mazāk intuitīvo izvēlņu slāņu dēļ, tāpēc mēs šodienas ziņojumā sniedzam konsultācijas.

Mēs jums parādīsim dažas no jaudīgākajām Dreamweaver funkcijām, lai palīdzētu jums ātri piekļūt tiem, kā arī daudziem citiem noderīgiem trikiem, kas ieeļļos jūsu izstrādes laiku un ievērojami uzlabos jūsu kodu kvalitāti. Pilns saraksts pēc izlēkšanas.

1. Dinamiskais skats ar “Live View”

Mēs jau zinām, ka DW piedāvā statisku skatījumu uz mūsu atvērtajiem failiem, bet par to "dinamiskie skati" piemēram, WordPress?

Pirmkārt, mums ir nepieciešams pateikt Kādus iestatījumus izmantot, lai prezentētu mūsu"dinamiskie skati" pareizi. Lai to izdarītu, izvēlieties HTTP pieprasījuma iestatījumi no Skatīt> Live View Options pēc tam ievadiet GŪT vai POST parametri, kas vajadzīgi, lai pareizi apskatītu lietojumprogrammu.

Pēc tam pārslēdzoties uz Live View DW, tas aizstāj veco Dizaina skats rūts ar dzīvu, pikseļu perfektu WebKit attēlojumu jūsu lapā; komplektā ar dzīvo Javascript, DOM manipulācijām, datu bāzes vaicājumiem, servera puses kodu un sniegto CSS, nevis vietņu apzīmējumu ikonām, kuras redzat Dizaina skats.

2. "Kodu navigators" ir DW Firebug

Tas ir solis tālāk par visu Kodu navigators un kad Live View logu, noklikšķinot uz ALT (noklikšķinot uz Command-Option uz Mac) jebkurā loga vietā, uzreiz tiek parādīts kods, kas padarīja šo vienumu. Līdzīgi tam, ko jūs varētu redzēt Firefox / Firebug.

3. JavaScript iesaldēšana

Sakarā ar Ajax dinamisko raksturu, daudzas reizes mums ir jārīkojas ar lapu, kurā daži priekšmeti netiek sniegti vai pieejami pirmajā lapā. Tie ir elementi, kas pēc lapas ielādes tiek ievadīti lapā. Šeit ir piemērs:

Iespējams, vēlēsities mainīt instrumenta tipu, kas tiek pilnībā realizēts JavaScript. Pirms šodienas jums vajadzētu metodiski meklēt savu ceļu caur jūsu skriptiem, lai atrastu to, kas tika izveidots un kur.

Tā vietā mēģiniet to:

Sniedziet savu lapu Live View, tad hit F6 iesaldēt JavaScript jebkurā laikā, ļaujot jums mērķēt un izkliedēt kodu, kas saistīts ar kādu dinamisku elementu lapā.

4. Live View nākamais labākais draugs - "Live Code"

Lietojot Live View, jūs varat arī ieslēgt Live kods. Live kods atjauninās jūsu kodu, kad jūs lidosiet, noklikšķināsiet un mijiedarbosies ar elementiem un vienumiem Tiešā skata logs!

5. Automātiska JavaScript pabeigšana

Dreamweaver nāk ar viedu un pilnīgu HTML un CSS kodu, bet kas par Javascripts? Ja jūs kodējiet jQuery vai prototipu Dreamweaver, tad jums jāzina, ka ir API paplašinājumi, kas nodrošina Javascript kodu pabeigšanu. Tas samazina vajadzīgo ierakstu skaitu un var būt diezgan ērts ātriem kodētājiem.

Noklikšķiniet šeit, lai uzzinātu vairāk vai lejupielādētu:

• jQuery API paplašinājums Dreamweaver
• Prototipa API paplašinājums Dreamweaver

6. Izveidojiet lidojuma kodus

Vai jūsu koda lapa izskatās kā neorganizēti, netīrs koda līnijas? Izmantojiet Lietot avota formatējumu iezīme un pārformatējiet to tieši jūsu vēlmēm. Lai tos ātri iztīrītu, noklikšķiniet uz Formāta avota kods ikona Kodēšanas rīkjosla (Rediģēt> Rīkjoslas> Kodēšana) un izvēlieties Kodu formāta iestatījumi lai iestatītu vēlamo formatējumu.

Varat arī piekļūt formatēšanas opcijai no Komandas> Lietot avota formatējumu vai izmantojiet to tikai atlasītajā koda blokā, izvēloties Piemērot avota formatējumu atlasei opcija.

7. Iegūstiet sīkrīku

Vienkārši noklikšķiniet uz Paplašiniet Dreamweaver ikonu Lietojumprogrammu joslā (tas izskatās kā rīks) un izvēlieties Pārlūkojiet tīmekļa logrīkus. Tas aizvedīs jūs uz Adobe Exchange, kur var atrast papildu preces no piegādātājiem, piemēram, Yahoo !, JQuery un daudziem citiem..

8. Subversion & Dreamweaver

Un jā, Dreamweaver atbalsta Subversion (SVN). Izstrādātājiem, kuri izmanto SVN, lai saglabātu sava projekta pārskatīšanas kontroli, tas varētu būt labas ziņas. Diskusijā diskutē Dreamweaver attīstītājs Andrew Voltmer kā jūs varat izmantot Subversions ar Dreamweaver.

9. Nav vairāk lieku stilu

Daudzi cilvēki izmanto Dreamweaver kā veidu, kā vizuāli atjaunināt saturu, piemēram, vārdu procesors. Pirms Dreamweaver CS4, tas var novest pie liekiem CSS noteikumiem .klase1, .2. klase, un tā tālāk. Dreamweaver CS4, vienkārši pārslēdziet savu Īpašuma inspektors uz HTML režīmā (noklikšķiniet uz HTML ikonas, kas atrodas inspektora kreisajā pusē), un jūs atvadīsieties no visiem liekajiem CSS, ievietojot tikai atbilstošu HTML atzīmi.

10. Veidlapas apstiprināšana ir vienkārša

Vēlaties apstiprināt veidlapu laukus, bet uztraucaties, ka jums būs jāveido no jauna? Neuztraucies. Vienkārši atlasiet esošo veidlapas elementu, piemēram, teksta lauku, un izmantojiet a Spry Validation widget no Ielikt> Izv. Pēc tam kontrolējiet apstiprināšanas prasības, piemēram, minimālās vai maksimālās rakstzīmes tieši no Īpašuma inspektors.

Bonuss: vēl 3

11. Piekļuve saistītajiem failiem viegli

Atverot HTML vai PHP failu, dokumentu loga augšpusē redzēsiet atkarīgu failu nosaukumus, piemēram, CSS, Javascript un pat PHP failus. Jūs varat viegli pārslēgties uz šiem failiem, veikt izmaiņas un saglabāt tās, pat bez to atvēršanas. Kad noklikšķināsiet uz jebkura faila joslā Saistītie faili, jūs redzēsiet tā avotu koda skatā un vecāku lapu dizaina skatā. Vai arī izmantojiet Code Navigator, lai ātri piekļūtu CSS pirmkodam, kas ietekmē jūsu pašreizējo izvēli.

12. Pārbaudiet pārlūkprogrammu saderību

Atveriet dokumentu, kuru vēlaties pārbaudīt par saderību; no tās pašas izvēlnes joslas, kur piekļūst Code / Split / Design skati, skatieties uz laboPārbaudiet lapupoga.

Uzklikšķinot uz tā, tiks paplašināta nolaižamā izvēlne, atlasiet 'Pārbaudiet pārlūka saderību“. The Pārlūka saderības rezultātu logs loga apakšā parādīsies visas problēmas, kas jārisina.

Piezīme. Tas netiks pārbaudīts jaunās IE versijas Mac! Lai izvēlētos, kuras pārlūkprogrammas jāizmanto testēšanai, izvēlieties Pārbaudiet lapu > Iestatījumi izvēlnē.

13. Priekšskatiet PHP lapas

Dreamweaver ļauj palaist un priekšskatīt PHP kodus programmatūras ietvaros. Lūk, kā to iegūt.

Darba sākšana

1. Vispirms izvēlieties Vietne -> Jauna vietne no augšējās navigācijas.
2. Jūs redzēsiet gan Pamata un Izvērstā vietnes definīcija opciju cilnes. Turpināsim, izvēloties Papildu vietnes definīcija cilne.
3. Ievadiet vietnes mapes nosaukumu attiecīgajā lodziņā (šajā piemērā kā mapes nosaukumu izmantosim "myphp").
4. Izveidojiet citu mapi ar nosaukumu "attēli", ievadot tā nosaukumu laukā "Noklusējuma attēlu mape".
5. Saskaņā Vietējā informācija, laukos ievadiet šādas vērtības:
   • Vietnes nosaukums: vietnes nosaukums. Izmanto tikai Dreamweaver
   • Vietējā saknes mape: Šis ir tās vietnes nosaukums, kurā strādāsit. Pārliecinieties, ka vietnes tiek nosauktas tā, lai samazinātu konfliktus vai mulsinošus vārdus.
   • Noklusējuma attēlu mape: Tas ir fakultatīvs, taču ieteicams to izveidot tagad, jo lielākā daļa vietņu zināmā mērā izmantos attēlus. Tas ir, ja DW "izskatīsies", lai ievietotu attēlus jūsu dokumentos kodēšanas fāzes laikā.
   • Saites saistībā ar: Tas nosaka, kā tiks apstrādāts dokuments, kas saistās ar Dreamweaver. Varat izvēlēties vai nu dokumentu vai sakni. Atšķirības starp abiem ir:
     • Dokumenta relatīvais - ievietos ceļu, salīdzinot ar failu, kuru jūs strādājat, un vienumu, kas ir saistīts.
     • Root Relative - lietojums / kas izraisa dokumenta / faila sasaisti saistībā ar ROOT mapi.
     • Vēl viena iespēja ir pievienot kādu konfigurāciju servera konfigurācijas failiem. Tā kā mēs esam uzlabotā uzdevumā, mēs tagad izmantosim dokumentu, kas saistīts ar dokumentu.
   • HTTP adrese: ievadiet vietnes saknes mapi savam projektam
   • Lietām raksturīgas saites: Dreamweaver pārbaudīs, vai, augšupielādējot serverī, jebkuram projekta failam var būt jūtīga problēma. Paziņojumi tiks parādīti, lietojot: Vietne -> Pārbaudīt saites Sitewide. Jūs varat atstāt to pārbaudītu, ja vēlaties. Es personīgi neatstājiet to pārbaudīt, jo es vienmēr nosaukšu failus mazos burtos. Liels burts nav ieteicams.
   • Kešatmiņa: Pārbaudiet Iespējot kešatmiņu.
6. Iekš Attālā informācija lapu, vai nu iestatiet FTP vai citu piekļuvi attālajam serverim vai atstājiet piekļuvi nevienam.
7. Iekš Testēšanas serveris lapā atlasiet opciju, kas attiecas uz faila tipu / sistēmu, kuru pārbaudīsit.
8. Versiju vadība šis piemērs netiks izmantots, lai jūs varētu atstāt to tukšu, ja tas nav zināms.
9. Cloaking ļauj izvietot .psd, .fla un citus avota failus jūsu vietņu mapē un DW tos ignorēs, augšupielādējot / atjauninot jūsu vietni.
10. Dizaina piezīmes ir ideāli piemēroti web dizaina komandai, jo tas saglabā piezīmi par izmaiņām failos. Tā ir pārbaudīta pēc noklusējuma un naudas sods, lai mēs varētu to izmantot.
11. Atstājiet Faila skata sleja, Veicināt, un Veidnes kā noklusējuma.
12. The Spry lapa vienkārši norāda uz Spry aktīvu mapi, kas tiek automātiski iekļauta Dreamweaver. Nav nepieciešams to mainīt. Kad katrs iestatījums ir pabeigts, noklikšķiniet uz labi.

Priekšskatīt PHP programmā Dreamweaver

Tagad atveriet PHP failu un veiciet nepieciešamās izmaiņas. Lai vienkārši apskatītu šo failu Dreamweaver nospiediet F12 un rezultāti tiks parādīti jūsu noklusējuma pārlūkā. Jūs varat mainīt pārlūkprogrammu, kurā tiek izmantota Rediģēt -> Preferences -> Priekšskatījums pārlūkprogrammā. Tas ļauj ātrāk rediģēt-to-preview laiku, novērš nepieciešamību rakstīt garus URL savā pārlūkprogrammas joslā vai izmantot citu servera programmatūru, lai padarītu PHP failus, kas visi ietaupa laiku!

Tas ir viss. Happy Dreamweaver'ing :-)

Redaktora piezīme: Šo ziņu raksta Jesse Matlock par Hongkiat.com. Pēdējos 6 gadus Jesse ir iegremdējusi sevi UI dizainā, lietotņu izstrādē un tīmekļa tendencēs. Viņš ir dibinātājs un dizaina vadītājs nelielai, kaut arī ļoti talantīgai attīstības komandai, kas koncentrējas uz pielāgotu lietotņu izstrādi.