10 nuttige tips en trucs voor Dreamweaver voor beginners

Een gebruiker van Dreamweaver zal zeker weten wat een krachtpatser het is. Vol met tonnen functies, opties en betwistbaar een van de meest bekende IDE (Integrated Development Environment) in de hedendaagse markt. Het voldoet misschien niet aan de criteria die sommige ontwikkelaars eisten, maar Dreamweaver biedt ontegensprekelijk een behoorlijk scala aan ontwikkelings-, samenwerkings- en codeergereedschappen. Deze opties en hulpmiddelen zijn verborgen onder lagen met betreurenswaardige minder intuïtieve menu's, daarom bieden we tutorials in het bericht van vandaag.

We zullen u een aantal van de krachtigste functies van Dreamweaver laten zien om u te helpen snel toegang te krijgen, samen met vele andere handige trucs die uw ontwikkelingstijd zullen smeren en uw codekwaliteit aanzienlijk zullen verbeteren. Volledige lijst na sprong.

1. Dynamische weergave met “Rechtstreekse beelden”

We weten al dat DW een statische weergave biedt van onze open bestanden, maar hoe zit het "dynamische weergaven" van een toepassing zoals WordPress?

Eerst moeten we dat doen vertellen DW welke instellingen moeten we gebruiken om onze te presenteren"dynamische weergaven" correct. Selecteer om dit te doen HTTP-aanvraaginstellingen van de Weergave> Live View-opties menu, voer dan het KRIJGEN of POST parameters die u nodig hebt om uw toepassing correct te bekijken.

Vervolgens door over te schakelen naar Rechtstreekse beelden in DW wordt de oude vervangen Ontwerpweergave paneel met een live, pixel-perfecte WebKit-weergave van uw pagina; compleet met live Javascript, DOM-manipulaties, databasequery's, server-side code en gerenderde CSS, in plaats van de placeholder-pictogrammen die u ziet in Ontwerpweergave.

2. "Code Navigator" is DW's Firebug

Een stap verder gaan is alles over het Codenavigator en wanneer in de Rechtstreekse beelden venster, ALT-klikken (Command-Option-klikken voor Mac) overal in het venster, presenteert onmiddellijk de code die dat item heeft gerenderd. Vergelijkbaar met wat u momenteel ziet in Firefox / Firebug.

3. JavaScript bevriezen

Vanwege het dynamische karakter van Ajax moeten we vaak een pagina gebruiken waarop bepaalde items niet worden weergegeven of beschikbaar zijn bij het laden van de eerste pagina. Dit zijn items die enige tijd na het laden van de pagina in de pagina worden geïnjecteerd. Hier is een voorbeeld:

Misschien wilt u de vormgeving van een tooltip wijzigen die volledig in JavaScript is geïmplementeerd. Vóór vandaag zou je methodisch moeten zoeken naar je scripts om te vinden wat er werd gecreëerd en waar.

Probeer in plaats daarvan dit:

Render je pagina in Rechtstreekse beelden, dan raken F6 om JavaScript op elk moment te bevriezen, zodat u de code kunt targeten en ontleden die betrekking heeft op een dynamisch item op de pagina.

4. Live View's beste vriend - "Live Code"

Tijdens gebruik Rechtstreekse beelden, je kunt ook inschakelen Live code. Live code zal uw code bijwerken terwijl u zweeft, klikt en communiceert met elementen en items in de Live View-venster!

5. Automatische JavaScript-aanvulling

Dreamweaver wordt geleverd met een intelligente en volledige voltooiing van de HTML- en CSS-code, maar hoe zit het met Javascripts? Als u jQuery of Prototype codeert in Dreamweaver, moet u weten dat er API-extensies zijn die de voltooiing van JavaScript-code bieden. Het vermindert het benodigde type en kan handig zijn voor snelle coders.

Klik hier om meer te lezen, of download:

• jQuery API-extensie voor Dreamweaver
• Prototype API-uitbreiding voor Dreamweaver

6. Verfraai codes on the fly

Ziet uw codetabel eruit als ongeorganiseerde, rommelige coderegels? Gebruik de Bronopmaak toepassen functie en herformateer het precies naar uw voorkeuren. Om snel op te ruimen, klikt u op Broncode opmaken pictogram onderaan de Codeerwerkbalk (Bewerken> Werkbalken> Codering) en selecteer Code formaat instellingen om uw gewenste opmaak in te stellen.

U hebt ook toegang tot de formatteringsoptie van Opdrachten> Bronopmaak toepassen of pas het alleen toe op een geselecteerd codeblok door het te selecteren Pas bronopmaak toe op selectie keuze.

7. Verkrijg widgety

Klik gewoon op de Verleng het Dreamweaver-pictogram (het lijkt op een versnelling) in uw toepassingsbalk en selecteer Blader naar webwidgets. Dit brengt je naar de Adobe Exchange waar je extra widgets kunt vinden van leveranciers zoals Yahoo !, JQuery en vele anderen.

8. Subversion & Dreamweaver

En ja, Dreamweaver ondersteunt Subversion (SVN) wel. Voor ontwikkelaars die SVN gebruiken om de revisiecontrole van hun project te behouden, kan dit een goed nieuws zijn. Dreamweaver-ontwikkelaar Andrew Voltmer bespreekt hoe u Subversions kunt gebruiken met Dreamweaver.

9. Geen overtollige stijlen meer

Veel mensen gebruiken Dreamweaver als een manier om inhoud visueel bij te werken, zoals een tekstverwerker. Vóór Dreamweaver CS4 zou dit kunnen resulteren in overbodige CSS-regels zoals .klas 1, .class2, enzovoorts. Schakel in Dreamweaver CS4 uw wachtwoord uit Property Inspector naar HTML modus (klik op het HTML-pictogram aan de linkerkant van de Infovenster) en u neemt afscheid van al die overbodige CSS en voegt alleen de juiste HTML-opmaak in.

10. Vormvalidatie eenvoudig gemaakt

Wilt u uw formuliervelden valideren, maar bent u bang dat u het opnieuw moet opbouwen? Maak je geen zorgen. Selecteer eenvoudig een bestaand formulierelement, zoals een tekstveld, en pas een toe Spry Validation-widget van de Voeg in> Spry-menu in. Controleer vervolgens de validatievereisten zoals minimum- of maximumtekens rechtstreeks vanuit de Eigenschap inspecteur.

Bonus: nog 3

11. Krijg gemakkelijk toegang tot gerelateerde bestanden

Wanneer u een HTML- of PHP-bestand opent, ziet u nu een rij met afhankelijke bestandsnamen, zoals CSS, Javascript en zelfs opgenomen bestanden voor PHP, bovenaan het documentvenster. U kunt eenvoudig naar deze bestanden overschakelen, wijzigingen aanbrengen en ze opslaan, en dat allemaal zonder ze zelfs maar open te maken. Wanneer u op een bestand in de balk Gerelateerde bestanden klikt, ziet u de bron in de codeweergave en de bovenliggende pagina in de ontwerpweergave. Of gebruik de codenavigator om snel toegang te krijgen tot de CSS-broncode die van invloed is op uw huidige selectie.

12. Controleer de compatibiliteit van browsers

Open het document dat u wilt controleren op compatibiliteit; van dezelfde menubalk waar Code / Split / Design-weergaven zijn geopend, kijk helemaal rechts voor 'Controleer pagina'knop.

Als u erop klikt, wordt een vervolgkeuzemenu uitgevouwen en selecteert u 'Controleer de compatibiliteit van de browser'. De Browser Compatibiliteitsresultatenvenster wordt onder in het venster weergegeven met eventuele problemen die u moet verhelpen.

Opmerking: dit controleert GEEN nieuwe versies van IE op Mac! Selecteer om te selecteren welke browsers u wilt gebruiken voor het testen Controleer pagina > instellingen van het menu.

13. Bekijk PHP-pagina's

Met Dreamweaver kunt u PHP-codes in de software uitvoeren en bekijken. U kunt het als volgt instellen.

Ermee beginnen

1. Selecteer eerst plaats -> Nieuwe site vanuit de navigatie bovenaan.
2. Je ziet zowel de basis- en Geavanceerde site-definitie optietabbladen. Laten we doorgaan met het selecteren van de Tabblad Geavanceerde site-definitie.
3. Voer een mapnaam voor de site in het juiste vak in (in dit voorbeeld gebruiken we "myphp" als mapnaam).
4. Maak een andere map met de naam "images" door de naam ervan in te voeren in het veld 'Default Images Folder'.
5. Onder de Lokale info, voer de volgende waarden in de velden in:
   • Site naam: de naam van de site. Alleen te gebruiken in Dreamweaver
   • Lokale hoofdmap: Dit is de naam van de site waar u gaat werken. Ben zeker dat u sites een naam geeft die conflicten minimaliseren of verwarrende namen veroorzaken.
   • Map Standaardafbeeldingen: Dit is optioneel, maar het is aan te raden het nu te maken, aangezien de meeste sites afbeeldingen tot op zekere hoogte gebruiken. Dit is waar DW zal 'kijken' om afbeeldingen in uw documenten in te voegen tijdens de coderingsfase.
   • Links ten opzichte van: Hiermee wordt gedefinieerd hoe documentkoppelingen in Dreamweaver worden afgehandeld. U kunt Document of Root selecteren. De verschillen tussen de twee zijn:
     • Relatief document - voegt een pad in ten opzichte van het bestand waar u aan werkt en het item waarnaar wordt gelinkt.
     • Root Relative - Gebruikt / waardoor het document / bestand wordt gekoppeld in relatie tot de ROOT-map.
     • Een ander alternatief is om wat configuratie toe te voegen aan de serverconfiguratiebestanden. Omdat we een meer geavanceerde taak zijn, houden we voorlopig vast aan het gebruik van document-relatieve.
   • HTTP-adres: voer de hoofdmap van de site in voor uw project
   • Hoofdlettergevoelige koppelingen: Dreamweaver controleert of een bestand in het project een hoofdlettergevoelig probleem kan hebben bij het uploaden naar de server. Meldingen worden getoond wanneer u gebruikt: Site -> Links controleren. Je kunt het laten vinken als je wilt. Ik laat het persoonlijk niet gecontroleerd, omdat ik bestanden altijd in kleine letters geef. Hoofdletter wordt niet aanbevolen.
   • Cache: Schakel Cache inschakelen in.
6. In de Remote Info pagina, ofwel uw FTP instellen of andere toegang tot een externe server of de Toegang tot Geen.
7. In de Server testen pagina selecteer de optie die betrekking heeft op het bestandstype / systeem dat u gaat testen.
8. Versiebeheer zal niet worden gebruikt voor dit voorbeeld, dus u kunt het leeg laten, tenzij u er bekend mee bent.
9. cloaking kunt u .psd, .fla en andere bronbestanden in uw map sites plaatsen en DW zal ze negeren bij het uploaden / bijwerken van uw site.
10. Ontwerpnotities zijn ideaal voor een webdesignteam omdat het de wijzigingen in de bestanden bijhoudt. Het is standaard gecontroleerd en prima voor ons om op deze manier te gebruiken.
11. Het verlof Kolom Bestandsweergave, Bijdragen, en templates als standaard.
12. De Bijdehand pagina verwijst eenvoudigweg naar de map Spry-items die automatisch wordt meegeleverd met Dreamweaver. Het is niet nodig om dit te veranderen. Nadat alle instellingen zijn voltooid, klikt u op OK.

Voorbeeld van PHP in Dreamweaver

Open nu een PHP-bestand en breng de benodigde wijzigingen aan. Om dit bestand eenvoudig in Dreamweaver te bekijken druk op F12 en de resultaten worden weergegeven in uw standaardbrowser. U kunt wijzigen in welke browser wordt gebruikt Bewerk -> voorkeuren -> Voorbeeld in browser. Dit zorgt voor een snellere weergavetijd bij het bewerken, het elimineert de noodzaak om lange URL's in uw browserbalk te typen of om een ​​andere serversoftware te gebruiken om de PHP-bestanden te renderen, die allemaal tijdwinst opleveren!

Dat is alles. Happy Dreamweaver'ing :-)

Opmerking van de uitgever: Dit bericht is geschreven door Jesse Matlock voor Hongkiat.com. De afgelopen 6 jaar heeft Jesse zich verdiept in UI-ontwerp, app-ontwikkeling en webtrends. Hij is de oprichter en ontwerpleider voor een klein, maar zeer getalenteerd ontwikkelteam dat zich richt op ontwikkeling van op maat gemaakte apps.