10 Nyttige Dreamweaver Tips og tricks til begyndere

En Dreamweaver-bruger vil helt sikkert regne med, hvad et kraftværk er. Pakket med tons af funktioner, muligheder og debatabelt blandt de mest kendte IDE (Integrated Development Environment) i dagens marked. Det kan muligvis ikke opfylde de kriterier, som nogle udviklere krævede dog, Dreamweaver giver ubestrideligt et anstændigt udvalg af udviklings-, samarbejds- og kodningsværktøjer. Disse muligheder og værktøjer er skjult under lag af beklagelige mindre intuitive menuer, hvorfor vi leverer vejledninger i dagens indlæg.

Vi vil vise dig nogle af Dreamweaver's mest kraftfulde funktioner for at hjælpe dig med at få adgang til dem hurtigt, sammen med mange andre nyttige tricks, der vil smøre dig udviklingstiden og forbedre din kodekvalitet betydeligt. Fuld liste efter spring.

1. Dynamisk visning med “Live View”

Vi ved allerede, at DW tilbyder en statisk visning af vores åbne filer, men hvad med "dynamiske visninger" af en applikation som WordPress?

For det første skal vi fortælle DW hvilke indstillinger der skal bruges til at præsentere vores"dynamiske visninger" korrekt. For at gøre dette skal du vælge HTTP-anmodningsindstillinger fra Vis> Indstillinger for levende visning menu, og indtast derefter FÅ eller STOLPE Parametre, du skal se din ansøgning korrekt.

Derefter ved at skifte til Live View i DW erstatter den den gamle Designvisning rude med en levende, pixel-perfekt WebKit-gengivelse af din side; komplet med live Javascript, DOM manipulationer, database forespørgsler, server-side kode og renderet CSS, i stedet for de stedholder ikoner du ser i Designvisning.

2. "Code Navigator" er DW's Firebug

Tager det et skridt videre handler alt om Kode Navigator og hvornår i Live View vindue, ALT-klik (Command-Option-klik for Mac) hvor som helst i vinduet, præsenterer øjeblikkeligt den kode, der gav det pågældende element. Ligner på, hvad du måske ser i Firefox / Firebug.

3. Fryse JavaScript

På grund af Ajax dynamiske karakter mangler vi ofte at interagere med en side, hvor visse genstande ikke gøres tilgængelige eller tilgængelige på første side. Disse er genstande, der indsprøjtes på siden nogle gange efter siden indlæses. Her er et eksempel:

Du ønsker måske at ændre stylingen af ​​et værktøjstip, der er implementeret udelukkende i JavaScript. Før i dag skal du metodisk søge dig gennem dine scripts for at finde, hvad der blev oprettet, og hvor.

Prøv det her i stedet:

Indsend din side i Live View, derefter ramt F6 At fryse JavaScript til enhver tid, så du kan målrette og dissekere koden vedrørende et dynamisk element på siden.

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

Når du bruger Live View, du kan også tænde Live Code. Live Code vil opdatere din kode som du svinger, klik og interagere med elementer og elementer i Live View vindue!

5. Automatisk JavaScript-afslutning

Dreamweaver kommer med en intelligent og komplet HTML og CSS kode færdiggørelse, men hvad med Javascripts? Hvis du kode jQuery eller Prototype i Dreamweaver, skal du vide, at der er API-udvidelser, der giver Javascript-kode færdiggørelse. Det reducerer den nødvendige indtastning og kan komme i ganske praktisk til hurtige kodere.

Klik her for at læse mere, eller download:

• jQuery API-udvidelse til Dreamweaver
• Prototype API-udvidelse til Dreamweaver

6. forskønne koder på flyve

Ser din kode side ud som uorganiserede, rodet kodeord? Brug Anvend Kildeformatering funktion og reformat det præcist til dine præferencer. For hurtigt at rydde op skal du klikke på Format Kildekode ikon nederst på siden Kodningsværktøjslinje (Rediger> Værktøjslinjer> Kodning) og vælg Kodeformatindstillinger for at indstille din foretrukne formatering.

Du kan også få adgang til formateringsindstillingen fra Kommandoer> Anvend kildeformatering eller kun anvende det på en valgt blok kode ved at vælge Anvend Kildeformatering til udvælgelse mulighed.

7. Få widgety

Bare klik på Udvid Dreamweaver-ikonet (det ligner et gear) i din programlinje og vælg Gennemse Web Widgets. Dette fører dig til Adobe Exchange, hvor du kan finde flere widgets fra leverandører, såsom Yahoo !, JQuery og mange andre.

8. Subversion & Dreamweaver

Og ja, Dreamweaver understøtter Subversion (SVN). For udviklere, der bruger SVN til at opretholde revisionskontrol af deres projekt, kan det være en god nyhed. Dreamweaver-udvikleren Andrew Voltmer diskuterer hvordan du kan bruge Subversions med Dreamweaver.

9. Ingen mere overflødige stilarter

Mange bruger Dreamweaver som en måde at opdatere indhold visuelt på, som et tekstbehandlingsprogram. Før Dreamweaver CS4 kan dette resultere i overflødige CSS-regler som .Class1, .klasse 2, og så videre. I Dreamweaver CS4 skal du bare skifte din Ejendomsinspektør til HTML tilstand (klik på HTML-ikonet til venstre for inspektøren), og du vil sige farvel til alt det overflødige CSS, hvor du kun indsætter passende HTML-markering.

10. Formular validering gøres let

Vil du validere dine formularfelter, men bekymret for at du bliver nødt til at genopbygge fra bunden? Ingen problemer. Vælg blot et eksisterende formelement, f.eks. Et tekstfelt, og anvend en Spry Validation widget fra Indsæt> Spry menu. Derefter kontrollerer du valideringskrav, som f.eks. Mindste eller maksimale tegn direkte fra Ejendomsinspektør.

Bonus: 3 mere

11. Få adgang til relaterede filer nemt

Når du åbner en HTML- eller PHP-fil, vil du nu se en række afhængige filnavne, som f.eks. CSS, Javascript og endda inkluderede filer til PHP øverst i dokumentvinduet. Du kan nemt skifte til disse filer, foretage ændringer og gemme dem alle uden at åbne dem selv. Når du klikker på en fil i feltet Relaterede filer, vil du se dens kilde i Kodevisning og overordnede side i Designvisning. Eller brug Code Navigator til hurtigt at få adgang til CSS-kildekoden, der påvirker dit nuværende valg.

12. Kontrollér browsernes kompatibilitet

Åbn det dokument, du vil kontrollere for kompatibilitet; fra samme menulinje, hvor Kode / Split / Design visninger er tilgængelige, se langt til højre for 'Kontroller side'knappen.

Hvis du klikker på det, udvides en rullemenu, vælg 'Kontroller browser kompatibilitet'. Det Browser Kompatibilitetsresultater vindue vil vise nederst i vinduet med eventuelle problemer, du skal adressere.

Bemærk: Dette vil IKKE kontrollere nye versioner af IE på Mac! Vælg, hvilke browsere der skal bruges til testning Kontroller side > Indstillinger fra menuen.

13. Preview PHP Pages

Dreamweaver giver dig mulighed for at køre og forhåndsvise PHP-koder i softwaren. Sådan får du det setup.

Kom i gang

1. Vælg først webstedet -> Nyt websted fra den øverste navigation.
2. Du vil se begge Grundlæggende og Avanceret Site Definition mulighed faner. Lad os fortsætte ved at vælge Avanceret websted Definition faneblad.
3. Indtast et mappenavn for webstedet i den relevante boks (i dette eksempel bruger vi "myphp" som mappenavn).
4. Opret en anden mappe med navnet "billeder" ved at indtaste sit navn i feltet "Standardbilleder mappe".
5. Under Lokal Info, Indtast følgende værdier i felterne:
   • Side navn: webstedets navn Anvendes kun i Dreamweaver
   • Lokal rodmappe: Dette er navnet på det websted, du vil arbejde i. Sørg for at navngive websteder på en måde, der minimerer konflikter eller forvirrende navne.
   • Standardbilleder mappe: Dette er valgfrit, men det anbefales at oprette det nu, da de fleste steder vil bruge billeder til en vis grad. Det er her, hvor DW vil 'se' for at indsætte billeder i dine dokumenter under kodningsfasen.
   • Links i forhold til: Dette definerer, hvordan dokumentforbindelse i Dreamweaver håndteres. Du kan vælge enten Dokument eller Root. Forskellene mellem de to er:
     • Dokumentrelativ - Vil indsætte en sti i forhold til den fil, du arbejder, og varen er knyttet til.
     • Root Relative - Anvendelser / som får dokumentet / filen til at blive linket i forhold til ROOT-mappen.
     • Et andet alternativ er at tilføje nogle konfigurationer til serverkonfigurationsfilerne. At være en mere avanceret opgave, holder vi bare ved at bruge Document-relative for nu.
   • HTTP-adresse: Indtast webstedets rodmappe til dit projekt
   • Case-sensitive links: Dreamweaver vil tjekke, om en fil i projektet kan have et sager-følsomt problem, når du uploader til serveren. Meddelelser vises, når du bruger: Site -> Check Links Sitewide. Du kan lade det tjekke, hvis du vil. Personligt forlade jeg det ikke, da jeg altid navngiver filer i små bogstaver. Store bogstaver anbefales ikke.
   • Cache: Check Aktiver cache.
6. I Fjern Info side, skal du enten konfigurere din FTP eller anden adgang til en fjernserver eller lade Adgang til Ingen være.
7. I Testing Server side vælg den indstilling, der vedrører den filtype / det system, du vil teste.
8. Version Control vil ikke blive brugt til dette eksempel, så du kan lade det være tomt, medmindre du er bekendt med det.
9. Tilsløring giver dig mulighed for at placere .psd, .fla og andre kildefiler i din mappe, og DW vil se bort fra dem, når du uploader / opdaterer dit websted.
10. Design Notes er ideelle til et webdesign team, da det bevarer bemærkning om ændringer i filerne. Det er tjekket som standard og fint for os at bruge denne måde.
11. Forlade Filvisningskolonne, Bidrage, og Skabeloner som standard.
12. Det Spry Siden peger simpelthen på mappen Spry-aktiver, som automatisk medtages af Dreamweaver. Der er ingen grund til at ændre dette. Når hver indstilling er færdig, skal du klikke på Okay.

Forhåndsvis PHP i Dreamweaver

Nu åbner du en PHP-fil og foretager de nødvendige ændringer. For at se denne fil i Dreamweaver simpelthen tryk på F12 og resultaterne vises i din standardbrowser. Du kan ændre hvilken browser der bruges i Redigere -> Indstillinger -> Forhåndsvisning i browser. Dette giver mulighed for en hurtigere redigeringstid, eliminerer behovet for at skrive lange webadresser i din browserlinje eller at bruge en anden serversoftware til at gøre PHP-filer, som alle sparer tid!

Det er alt. Happy Dreamweaver'ing :-)

Redaktørens note: Dette indlæg er skrevet af Jesse Matlock til Hongkiat.com. I de sidste 6 år har Jesse fordybet sig i UI design, app udvikling og web trends. Han er grundlæggeren og designledelsen for et lille, men meget talentfuldt udviklingshold, der fokuserer på skræddersyet appudvikling.