Posted: 27 Dec 2010 08:48 AM PST
A Dreamweaver user will definitely reckon what a powerhouse it is. Packed with tonnes of features, options and debatably one among the most well known IDE (Integrated Development Environment) in today’s market. It may not meet the criteria that some developers demanded however, Dreamweaver undeniably provides a decent range of development, collaborating and coding tools. These options and tools are hidden under layers of regrettable less intuitive menus, which is why we are providing tutorials in today’s post.
We will show you some of the most powerful functions of Dreamweaver to assist your access them quickly, along with many other helpful tricks that will lubricate you development time and improve your code quality significantly. Full list after jump.
1. Dynamic View with “Live View”
We already know that DW offers a static view of our open files, but what about "dynamic views" of an application such as WordPress?
First, we need to tell DW what settings to use to present our"dynamic views" correctly. To do this, select HTTP Request Settings from the View > Live View Options menu, then enter the GET or POST parameters you need to view your application correctly.
2. "Code Navigator" is DW’s Firebug
Taking it a step further is all about the Code Navigator and when in the Live View window, ALT-clicking (Command-Option-clicking for Mac) anywhere in the window, instantly presents the code that rendered that item. Similar to what you might currently see in Firefox/Firebug.
Due to the dynamic nature of Ajax, many times we need to interact with a page where certain items are not rendered or available on first page load. These are items that are injected into the page some time after page load. Here’s an example:
Instead, try this:
4. Live View’s Next Best Friend – "Live Code"
When using Live View, you can also turn on Live Code. Live Code will update your code as you hover, click and interact with elements and items in the Live View window!
Click here to read more, or download:
6. Beautify Codes On The Fly
Does your code page look like unorganized, messy lines of code? Use the Apply Source Formatting feature and reformat it exactly to your preferences. To quickly clean them up, click the Format Source Code icon at the bottom of the Coding toolbar (Edit > Toolbars > Coding) and select Code Format Settings to set your preferred formatting.
You can also access the formatting option from Commands > Apply Source Formatting or only apply it to a select block of code by selecting the Apply Source Formatting to Selection option.
7. Get widgety
Just click the Extend Dreamweaver icon (it looks like a gear) in your Application Bar and select Browse for Web Widgets. This will take you to the Adobe Exchange where you can find additional widgets from vendors such as Yahoo!, JQuery, and many others.
8. Subversion & Dreamweaver
And yes, Dreamweaver does support Subversion (SVN). For developers who uses SVN to maintain revision control of their project, this could be a good news. Dreamweaver developer Andrew Voltmer discuss how you can use Subversions with Dreamweaver.
9. No More Redundant Styles
Many people use Dreamweaver as a way to update content visually, like a word processor. Before Dreamweaver CS4, this could result in redundant CSS rules like
10. Form Validation made easy
Want to validate your form fields, but worried that you’ll have to rebuild from scratch? No worries. Simply select an existing form element, such as a text field, and apply a Spry Validation widget from the Insert > Spry menu. Then control validation requirements such as minimum or maximum characters directly from the Property inspector.
Bonus: 3 more
11. Access Related Files Easily
12. Check browsers compatibility
Open the document you want to check for compatibility; from the same menu bar where Code / Split / Design views are accessed, look to the far right for ‘Check Page‘ button.
Clicking it will expand a drop down menu, select ‘Check Browser Compatibility‘. The Browser Compatibility results window will show at the bottom of the window with any issues that you need to address.
Note: This will NOT check new versions of IE on Mac! To select which browsers to use for testing, select Check Page > Settings from the menu.
13. Preview PHP Pages
Dreamweaver allows you to run and preview PHP codes within the software. Here’s how to get it setup.
Preview PHP in Dreamweaver
Now open a PHP file and make the needed changes to it. To view this file in Dreamweaver simply press F12 and the results will show in your default browser. You can change which browser is used in Edit -> Preferences -> Preview in Browser. This allows a faster edit-to-preview time, eliminates the need to type long URLs into your browser bar or to use another server software to render the PHP files, all of which save time!
That’s all. Happy Dreamweaver’ing :-)
|You are subscribed to email updates from hongkiat.com |
To stop receiving these emails, you may unsubscribe now.
|Email delivery powered by Google|
|Google Inc., 20 West Kinzie, Chicago IL USA 60610|