10 Användbara Dreamweaver Tips och tricks för nybörjare

En Dreamweaver-användare kommer definitivt att anse vilket kraftaggregat det är. Paket med ton av funktioner, alternativ och diskutabelt en bland de mest kända IDE (Integrated Development Environment) på dagens marknad. Det kanske inte uppfyller de kriterier som vissa utvecklare krävde, men Dreamweaver ger otvetydigt ett anständigt utbud av utvecklings-, samarbets- och kodningsverktyg. Dessa alternativ och verktyg är dolda under lager av beklagliga mindre intuitiva menyer, varför vi tillhandahåller handledning i dagens inlägg.

Vi kommer att visa dig några av Dreamweavers mest kraftfulla funktioner för att hjälpa dig att få tillgång till dem snabbt, tillsammans med många andra användbara knep som kommer att smörja din utvecklingstid och förbättra din kodskvalitet väsentligt. Hela listan efter hopp.

1. Dynamisk vy med “Realtidsbild”

Vi vet redan att DW erbjuder en statisk bild av våra öppna filer, men hur är det med "dynamiska vyer" av en applikation som WordPress?

Först måste vi säga DW vilka inställningar som ska användas för att presentera vår"dynamiska vyer" korrekt. För att göra detta, välj HTTP-förfrågan Inställningar från Visa> Live View Options menyn, skriv sedan in SKAFFA SIG eller POSTA parametrar du behöver se din ansökan korrekt.

Då byter du till Realtidsbild i DW ersätter den gamla Designvy rutan med en levande, pixel-perfekt WebKit-återgivning av din sida; komplett med live Javascript, DOM-manipuleringar, databasfrågor, server-sida-kod och gjord CSS, i stället för de platshållareikoner du ser i Designvy.

2. "Code Navigator" är DWs Firebug

Att ta det ett steg längre handlar om Kod Navigator och när i Realtidsbild fönster, ALT-klick (Kommando-Alternativ-klicka för Mac) var som helst i fönstret, presenterar omedelbart koden som gjordes det objektet. Liknande vad du kanske ser i Firefox / Firebug.

3. Frysning av JavaScript

På grund av Ajax dynamiska karaktär måste vi ofta interagera med en sida där vissa objekt inte görs eller är tillgängliga på första sidan. Dessa är föremål som injiceras i sidan någon gång efter sidan laddas. Här är ett exempel:

Du kanske vill ändra styling av ett verktygstips som helt implementeras i JavaScript. Innan idag måste du metodiskt söka dig igenom dina skript för att hitta vad som skapades och var.

Prova istället det här:

Rendera din sida i Realtidsbild, sedan slå F6 Att frysa JavaScript när som helst, så att du kan rikta in och dissekera koden som rör ett dynamiskt objekt på sidan.

4. Live Views nästa bästa vän - "Live Code"

När man använder Realtidsbild, du kan också slå på Live Code. Live Code kommer att uppdatera din kod när du sveper, klicka och interagera med element och objekt i Live View-fönstret!

5. Automatisk avslutning av JavaScript

Dreamweaver kommer med en intelligent och komplett HTML- och CSS-kodfärdigställande, men vad med Javascripts? Om du kodar jQuery eller Prototype i Dreamweaver, borde du veta att det finns API-tillägg som tillhandahåller Javascript-kodens slutförande. Det minskar den typ som behövs och kan komma ganska bra för snabba kodare.

Klicka här för att läsa mer, eller ladda ner:

• jQuery API-förlängning för Dreamweaver
• Prototyp API förlängning för Dreamweaver

6. Försköna koder på flugan

Kollar din kodsida som oorganiserade, röriga kodenheter? Använd Använd källformatering funktionen och omforma den exakt till dina önskemål. För att snabbt rensa upp dem klickar du på Formatera källkod ikonen längst ner på sidan Kodningsverktygsfält (Redigera> Verktygsfält> Kodning) och välj Kodformatinställningar för att ange önskad formatering.

Du kan också komma åt formateringsalternativet från Kommandon> Använd källformatering eller bara tillämpa det på ett valt kodkod genom att välja Använd källformatering till urval alternativ.

7. Hämta widgety

Klicka bara på Utök Dreamweaver-ikonen (det ser ut som ett redskap) i programfältet och välj Bläddra efter webb widgets. Detta tar dig till Adobe Exchange där du kan hitta ytterligare widgets från leverantörer som Yahoo !, JQuery och många andra.

8. Subversion & Dreamweaver

Och ja, Dreamweaver stöder Subversion (SVN). För utvecklare som använder SVN för att upprätthålla revisionskontroll av sitt projekt, kan detta vara en bra nyhet. Dreamweaver-utvecklaren Andrew Voltmer diskuterar hur du kan använda Subversions med Dreamweaver.

9. Inga mer överflödiga stilar

Många använder Dreamweaver som ett sätt att uppdatera innehåll visuellt, som en ordbehandlare. Innan Dreamweaver CS4 kan detta resultera i överflödiga CSS-regler som .Class1, .klass 2, och så vidare. I Dreamweaver CS4, byt bara din Fastighetsinspektör till html läge (klicka på HTML-ikonen till vänster om inspektören) och du säger farväl till all den överflödiga CSS-enheten, och bara sätter in lämplig HTML-märkning.

10. Formulär Validering görs enkelt

Vill du validera dina formulärfält, men oroliga att du måste bygga om från början? Inga problem. Välj bara ett existerande formelement, till exempel ett textfält, och använd ett Spry Validation widget från Infoga> Spry-menyn. Därefter kontrollerar du valideringskrav som minsta eller maximala tecken direkt från Fastighetsinspektör.

Bonus: 3 mer

11. Få tillgång till relaterade filer enkelt

När du öppnar en HTML- eller PHP-fil ser du nu en rad av beroende filnamn, till exempel CSS, Javascript och till och med inkluderade filer för PHP, högst upp i dokumentfönstret. Du kan enkelt byta till dessa filer, göra ändringar och spara dem, allt utan att ens öppna dem. När du klickar på någon fil i fältet Relaterade filer ser du källan i Kodvy och föräldersidan i Designvy. Eller använd kodnavigatorn för att snabbt komma åt CSS-källkoden som påverkar ditt nuvarande val.

12. Kontrollera kompatibiliteten med webbläsaren

Öppna dokumentet du vill kontrollera för kompatibilitet; från samma menyraden där koden / Split / Design-vyerna är åtkomliga ser du längst till höger för "Kontrollera sidan' knapp.

Om du klickar på det kommer du att expandera en rullgardinsmeny, välj "Kontrollera webbläsarkompatibilitet'. De Fönsterkompatibilitetsresultatfönstret kommer att visas längst ner i fönstret med eventuella problem som du behöver adressera.

Obs! Det här kommer inte att kontrollera nya versioner av IE på Mac! För att välja vilka webbläsare som ska användas för testning, välj Kontrollera sidan > inställningar från menyn.

13. Förhandsgranska PHP-sidor

Dreamweaver låter dig springa och förhandsgranska PHP-koder i programvaran. Så här får du det setup.

Komma igång

1. Välj först Webbplats -> Ny webbplats från toppen navigering.
2. Du får se både Grundläggande och Avancerad webbplatsdefinition alternativ flikar. Låt oss fortsätta genom att välja Avancerad platsdefinitionsflik.
3. Ange ett mappnamn för webbplatsen i lämplig ruta (för det här exemplet använder vi "myphp" som mappnamn).
4. Skapa en annan mapp med namnet "bilder" genom att ange sitt namn i fältet "Standardbilder".
5. Under Lokal info, mata in följande värden i fälten:
   • Sidnamn: webbplatsens namn Används endast i Dreamweaver
   • Lokal rotmapp: Detta är namnet på den webbplats du ska arbeta med. Var noga med att namnge webbplatser på ett sätt som minimerar konflikter eller förvirrande namn.
   • Standardbilder mapp: Det här är valfritt, men det rekommenderas att skapa det nu eftersom de flesta webbplatser kommer att använda bilder i viss utsträckning. Det är här DW kommer att "se" för att infoga bilder i dina dokument under kodningsfasen.
   • Länkar i förhållande till: Här definieras hur dokument som länkar i Dreamweaver hanteras. Du kan välja antingen Dokument eller Rot. Skillnaderna mellan de två är:
     • Dokumentrelativ - Lägger in en sökväg i förhållande till filen du arbetar och objektet är länkat till.
     • Root Relative - Använd / som orsakar att dokumentet / filen kopplas i förhållande till ROOT-mappen.
     • Ett annat alternativ är att lägga till viss konfiguration i serverns konfigurationsfiler. Att vara en mer avancerad uppgift kommer vi bara hålla fast vid att använda Document-relative för nu.
   • HTTP-adress: Ange webbplatsens rotmapp för ditt projekt
   • Fallkänsliga länkar: Dreamweaver kommer att kontrollera om någon fil i projektet kan ha fallskänslig problem vid uppladdning till servern. Meddelanden visas när du använder: Webbplats -> Kontrollera länkar Sitewide. Du kan lämna kontrollen om du vill. Jag lämnar det inte personligen som jag alltid namnger filer i små bokstäver. Stor bokstav rekommenderas inte.
   • cache: Markera Aktivera cacheminne.
6. I Fjärrinformation sida, antingen konfigurera din FTP eller annan åtkomst till en fjärrserver eller lämna åtkomst till None.
7. I Testa Server sida välj det alternativ som gäller den filtyp / det system du ska testa.
8. Versionskontroll kommer inte att användas för det här exemplet så att du får lämna den tom om du inte känner till den.
9. cloaking låter dig placera .psd, .fla och andra källfiler i din mapp och DW kommer bortse från dem när du laddar upp / uppdaterar din webbplats.
10. Design Notes är idealiska för ett webbdesign team eftersom det behåller notering om ändringar som gjorts i filerna. Det är markerat som standard och bra för oss att använda den här vägen.
11. Lämna Filvisningskolumn, Bidra, och mallar som standard.
12. De Rask sidan pekar helt enkelt på mappen Spry-tillgångar som automatiskt ingår i Dreamweaver. Det behöver inte ändras. När varje inställning är klar klickar du på ok.

Förhandsgranska PHP i Dreamweaver

Öppna nu en PHP-fil och gör de ändringar som behövs. Att visa den här filen i Dreamweaver helt enkelt tryck på F12 och resultaten visas i din standardwebbläsare. Du kan ändra vilken webbläsare som används Redigera -> Inställningar -> Förhandsgranska i webbläsare. Detta möjliggör en snabbare redigeringstid för förhandsgranskning, vilket eliminerar behovet av att skriva långa webbadresser i webbläsarfältet eller att använda en annan serverns programvara för att göra PHP-filerna, vilket alla sparar tid!

Det är allt. Glad Dreamweaver'ing :-)

Redaktörens anteckning: Det här inlägget är skrivet av Jesse Matlock för Hongkiat.com. Under de senaste 6 åren har Jesse fördjupat sig i UI-design, apputveckling och webbtrender. Han är grundare och designledare för ett litet, men väldigt begåvat utvecklingsteam som fokuserar på skräddarsydd apputveckling.