Posted by on Tuesday, March 2nd, 2010 at 1:43 pm.
Dreamweaver is a highly popular tool for many web developers in the web design industry, comprising of many great functionalities; one of which is the ability to source format your code.
Source formatting will literally make your code a lot neater, which can make it easier to manage and maintain.
On top of this, you can tell Dreamweaver exactly what you want to happen when you click source format. Take a look at the following walk-through and you can find out exactly what I mean.
Code Format Settings in Dreamweaver
First of all, click Dreamweaver -> Preferences (Edit -> Preferences on a PC).
In the preferences, click “Code Format”. The Code Format screen has a variety of options that will be implemented when you source format your code.
You can set up this section to your own style by choosing your tab and indent sizes. I recommend using LF (Unix) as the Line break type; this is the most common and is unlikely that it will need changing.
This next stage can be fairly important – if like me you like to maintain websites to be w3c valid, then you will want to do the following:
By default Dreamweaver changes tags like onclick, onload, etc. to use mixed case (onClick, onLoad) when you source format your xHTML. This, unfortunately, does not validate. However, the code format screen allows you to change the default case of tags and attributes.
- Change the Default tag case to <lowercase>.
- Change the Default attribute case to lowercase=”value”.
- Check the boxes for tags and attributes next to Override case of:
- Click Save.
How to Source Format your xHTML
In order to source format your code, all you have to do is click Commands -> Apply Source Formatting
Congratulations! Now you will have neat and w3c compliant code (assuming you have built it to their standards).
You can take this a step further and click the CSS tab in the Code Format screen. This allows you to change the way that CSS code looks when you apply source formatting. I like to give my CSS comment tags slightly different styling so they stand out more.
Good luck, and happy source formatting!


