10 Nyttige Dreamweaver Tips og triks for nybegynnere

En Dreamweaver-bruker vil definitivt regne med hvilket kraftverk det er. Pakket med tonnevis av funksjoner, alternativer og diskutabelt blant de mest kjente IDE (Integrated Development Environment) i dagens marked. Det kan ikke oppfylle kriteriene som noen utviklere krevde, men Dreamweaver utgjør umulig et anstendig utvalg av utviklings-, samarbeids- og kodingsverktøy. Disse alternativene og verktøyene er skjult under lag av beklagelige, mindre intuitive menyer, og derfor gir vi opplæringsprogrammer i dagens innlegg.

Vi vil vise deg noen av Dreamweavers mest kraftige funksjoner for å hjelpe deg med å få tilgang til dem raskt, sammen med mange andre nyttige triks som vil smøre deg utviklings tid og forbedre kodekvaliteten betydelig. Full liste etter hopp.

1. Dynamisk visning med “Sanntid”

Vi vet allerede at DW gir en statisk visning av våre åpne filer, men hva med "dynamiske visninger" av et program som WordPress?

Først må vi fortelle DW hvilke innstillinger som skal brukes til å presentere vår"dynamiske visninger" riktig. For å gjøre dette, velg HTTP-forespørselsinnstillinger fra Vis> Alternativer for levende visning menyen, og skriv deretter inn FÅ eller POST parametere du trenger for å se søknaden din riktig.

Deretter bytter du til Sanntid i DW, erstatter den den gamle Designvisning ruten med en levende, piksel-perfekt WebKit-gjengivelse av siden din; komplett med live Javascript, DOM manipulasjoner, database spørringer, server-side kode og gjengitt CSS, i stedet for stedholder ikoner du ser i Designvisning.

2. "Code Navigator" er DWs Firebug

Å ta det et skritt videre handler om Kode Navigator og når i Sanntid vindu, ALT-klikke (Command-Option-klikke for Mac) hvor som helst i vinduet, presenterer umiddelbart koden som gjengitt det aktuelle elementet. Ligner på hva du kanskje ser i Firefox / Firebug.

3. Frys JavaScript

På grunn av den dynamiske naturen til Ajax, må vi ofte samhandle med en side der enkelte elementer ikke gjengis eller er tilgjengelige på første sidebelastning. Dette er elementer som injiseres på siden noen gang etter siden lastes. Her er et eksempel:

Du vil kanskje endre stylingen av et verktøytips som er implementert helt i JavaScript. Før i dag, må du metodisk søke deg gjennom skriptene dine for å finne det som ble opprettet og hvor.

Prøv i stedet dette:

Sett inn siden din Sanntid, deretter treffer F6 Å Fryse JavaScript når som helst, slik at du kan målrette og dissektere koden knyttet til et dynamisk element på siden.

4. Live View's Next Best Friend - "Live Code"

Når du bruker Sanntid, du kan også slå på Live Code. Live Code vil oppdatere koden din som du svinger, klikk og samhandle med elementer og elementer i Live View-vinduet!

5. Automatisk JavaScript-gjennomføring

Dreamweaver kommer med en intelligent og fullstendig HTML og CSS-kode fullføring, men hva med Javascripts? Hvis du koden jQuery eller Prototype i Dreamweaver, bør du vite at det er API-utvidelser som gir Javascript-kodeavslutning. Det reduserer skriving som trengs, og kan komme ganske bra for hurtig kodere.

Klikk her for å lese mer, eller last ned:

• jQuery API-utvidelse for Dreamweaver
• Prototype API-utvidelse for Dreamweaver

6. beautify koder på fly

Kodesiden din ser ut som uorganiserte, rotete kodelinjer? Bruke Bruk Kildeformatering funksjonen og reformat den nøyaktig til dine preferanser. For å rydde opp dem raskt, klikk på Format Kildekode ikon nederst på siden Koding verktøylinje (Rediger> Verktøylinjer> Koding) og velg Kodeformatinnstillinger for å angi ønsket formatering.

Du kan også få tilgang til formateringsalternativet fra Kommandoer> Bruk Kildeformatering eller bare bruk den til en valgt blokk av kode ved å velge Bruk Kildeformatering til utvalg alternativ.

7. Få widgety

Bare klikk på Utvid Dreamweaver-ikonet (det ser ut som et utstyr) i programlinjen og velg Bla etter Web Widgets. Dette tar deg til Adobe Exchange, hvor du kan finne flere widgets fra leverandører som Yahoo !, JQuery og mange andre.

8. Subversion & Dreamweaver

Og ja, Dreamweaver støtter Subversion (SVN). For utviklere som bruker SVN for å opprettholde revisjonskontroll av prosjektet, kan dette være en god nyhet. Dreamweaver-utvikleren Andrew Voltmer diskuterer hvordan du kan bruke Subversions med Dreamweaver.

9. Ingen mer overflødige stiler

Mange bruker Dreamweaver som en måte å oppdatere innhold visuelt på, som et tekstbehandlingsprogram. Før Dreamweaver CS4 kan dette resultere i overflødige CSS-regler som .class1, .Class2, og så videre. I Dreamweaver CS4, bare bytt din Eiendomsinspektør til HTML modus (klikk på HTML-ikonet til venstre for inspektøren), og du vil si farvel til alt det overflødige CSS, bare å sette inn riktig HTML-oppslag.

10. Form validering gjort enkelt

Vil du validere skjemafeltene dine, men bekymret for at du må gjenoppbygge fra bunnen av? Ingen bekymringer. Velg bare et eksisterende formelement, for eksempel et tekstfelt, og bruk en Spry Validation widget fra Sett inn> Spry-menyen. Kontroller deretter valideringskrav som minimum eller maksimum tegn direkte fra Eiendomsinspektør.

Bonus: 3 mer

11. Få tilgang til relaterte filer enkelt

Når du åpner en HTML- eller PHP-fil, vil du nå se en rekke avhengige filnavn, for eksempel CSS, Javascript og til og med inkluderte filer for PHP, øverst i dokumentvinduet. Du kan enkelt bytte til disse filene, gjøre endringer og lagre dem, alt uten å åpne dem selv. Når du klikker på hvilken som helst fil i Related Files-feltet, ser du kilden i Kodevisning og overordnet i Designvisning. Eller bruk Code Navigator for å raskt få tilgang til CSS-kildekoden som påvirker ditt nåværende utvalg.

12. Kontroller nettleserens kompatibilitet

Åpne dokumentet du vil sjekke for kompatibilitet; fra samme menylinje hvor Kode / Split / Design visninger blir åpnet, se helt til høyre for 'Sjekk siden'-knappen.

Hvis du klikker på det, utvides en rullegardinmeny, velg 'Sjekk nettleserens kompatibilitet'. De Browser Kompatibilitetsresultater vindu vil vise nederst i vinduet med eventuelle problemer du må adressere.

Merk: Dette vil IKKE sjekke nye versjoner av IE på Mac! For å velge hvilke nettlesere som skal brukes til testing, velg Sjekk siden > innstillinger fra menyen.

13. Forhåndsvisning av PHP-sider

Dreamweaver lar deg kjøre og forhåndsvise PHP-koder i programvaren. Slik får du det oppsettet.

Starter

1. Velg først Nettstedet -> Nytt nettsted fra toppnavigasjonen.
2. Du vil se begge grunn~~POS=TRUNC og Avansert nettsteddefinisjon alternativ faner. La oss fortsette ved å velge Avansert nettsted definisjon kategorien.
3. Skriv inn et mappenavn for nettstedet i den aktuelle boksen (for dette eksempelet bruker vi "myphp" som mappenavnet).
4. Opprett en annen mappe som heter "bilder" ved å skrive inn navnet i feltet Standard bildermappe.
5. Under Lokal info, skriv inn følgende verdier i feltene:
   • Side navn: navnet på nettstedet. Brukes kun i Dreamweaver
   • Lokal rotmappe: Dette er navnet på nettstedet du skal jobbe med. Sørg for å navngi nettsteder på en måte som minimerer konflikter eller forvirrende navn.
   • Standard Bilder-mappe: Dette er valgfritt, men det anbefales at du oppretter det nå, da de fleste nettsteder vil bruke bilder til en viss grad. Dette er hvor DW vil "se" for å sette inn bilder i dokumentene dine under kodingsfasen.
   • Lenker i forhold til: Dette definerer hvordan dokumentkobling i Dreamweaver håndteres. Du kan velge enten Dokument eller Rot. Forskjellene mellom de to er:
     • Dokumentrelativ - Vil sette inn en sti i forhold til filen du arbeider og elementet er knyttet til.
     • Root Relative - Bruk / som forårsaker at dokumentet / filen kobles i forhold til ROOT-mappen.
     • Et annet alternativ er å legge til noen konfigurasjon i serverkonfigurasjonsfilene. Å være en mer avansert oppgave, holder vi bare til å bruke Document-relative for nå.
   • HTTP-adresse: skriv inn nettstedets rotmappe for prosjektet ditt
   • Case-sensitive koblinger: Dreamweaver vil sjekke om en fil i prosjektet kan ha et sakfølsomt problem når du laster opp til serveren. Varsler vil bli vist når du bruker: Site -> Sjekk Links Sitewide. Du kan la den sjekket hvis du vil. Jeg personlig ikke la det sjekket som jeg alltid navngir filer i små bokstaver. Stor bokstav anbefales ikke.
   • cache: Sjekk Aktiver cache.
6. I Fjerninfo side, kan du enten konfigurere FTP eller annen tilgang til en ekstern server eller la Adgang til Ingen.
7. I Testing Server side velg alternativet som gjelder filtype / system du vil teste.
8. Versjonskontroll vil ikke bli brukt til dette eksempelet, så du kan la det være tomt med mindre det er kjent med det.
9. Maskering lar deg plassere .psd, .fla og andre kildefiler i mappen din, og DW vil se bort fra dem når du laster opp / oppdaterer nettstedet ditt.
10. Design notater er ideell for et webdesign team som det beholder notat om endringer gjort til filene. Det er sjekket som standard og bra for oss å bruke denne måten.
11. Permisjon Filvisningskolonne, Bidra, og maler som standard.
12. De Spry Siden peker bare på Spry-eiendomsmappen som automatisk inkluderes med Dreamweaver. Det er ikke nødvendig å endre dette. Når hver innstilling er ferdig, klikk OK.

Forhåndsvis PHP i Dreamweaver

Åpne nå en PHP-fil og gjør de nødvendige endringene til den. For å se denne filen i Dreamweaver ganske enkelt trykk F12 og resultatene vil vises i standard nettleser. Du kan endre hvilken nettleser som brukes Redigere -> Preferanser -> Forhåndsvisning i nettleser. Dette gir en raskere redigeringstid, eliminerer behovet for å skrive lange nettadresser i nettleserlinjen eller å bruke en annen serverprogramvare for å gjengi PHP-filene, som alle sparer tid!

Det er alt. Glad Dreamweaver'ing :-)

Redaktørens notat: Dette innlegget er skrevet av Jesse Matlock for Hongkiat.com. For de siste 6 årene har Jesse dratt seg ned i UI-design, apputvikling og webtrender. Han er grunnlegger og design leder for et lite, men svært talentfullt utviklings team som fokuserer på skreddersydd app utvikling.