1. Home
  2. Website Design
  3. Portfolio
  4. eCommerce
  5. Web Optimisation
  6. Website Video
  7. Graphic Design
  8. Blog
  9. Team
  10. Contact

Print This Page
Print this page.

Web Design tip for Dreamweaver: Source Format

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

Dreamweaver Preferences

Dreamweaver Preferences

Dreamweaver's Code Format Screen

Dreamweaver's Code Format Screen

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!

Related Posts

Leave your Comment

Bookmark and Share Creare

Twitter
twitter.com/crearegroup

Recent Blog Comments

  1. Ypho: Never seen this....
  2. Craig Riches: Disregard my las...
  3. James Bavington: Hi Craig, thank ...
  4. Craig Riches: Ahh yes, "Live V...
  5. Simon: All these tutori...

Latest Web Design Blog

Testing Websites with Adobe BrowserLab
Posted on Fri, 30 Jul 2010

In this week's web design video blog, Nick and James explore Adobe's new Browserlab service. Browserlab allows web designers and developers to easily test how their website renders on all the major Internet Browsers.