18.3 Code Format Preferences

The Preferences dialog box's Code Format category sets the code formatting options for the HTML code visible in Code view (View figs/u2192.gif Code View) and the Code Inspector. The preferences determine the formatting applied to new documents and additions to existing documents. Existing documents, including documents created outside Dreamweaver, can be reformatted by using the Commands figs/u2192.gif Apply Source Formatting menu command. Beyond the options available in the Dreamweaver preferences, HTML source formatting is controlled by the SourceFormat.txt file in the Dreameaver4/Configuration folder as described in the next section.

The following preferences can be set in the Code Format preferences:


The Indent option turns on indentation for tags with the indent attribute in the SourceFormat.txt file.


Select whether to indent code segments using Spaces or Tabs.

Table Rows and Columns

Indents <table> , <td> , <th> , and <td> tags.

Frames and Framesets

Indents <frame> and <frameset> tags.

Indent Size

Sets the number of spaces (if Use is set to Spaces) or tabs (if Use is set to Tabs) to indent text with the Text figs/u2192.gif Indent command.

Tab Size

Sets the width of tab stops (defaults to four characters ). Tab stops are used when pressing the Tab key or when indenting code automatically (if Use is set to Tabs).

Automatic Wrapping...After Column

If enabled, inserts a hard carriage return if a line of HTML code reaches the specified width.

Line Breaks

Specifies the line break format: CR LF (Windows), CR (Macintosh), or LF (Unix). Choose the platform that matches your web server. If using an external HTML editor, such as NotePad, on Windows, set this option to CR LF. If using an external HTML editor, such as SimpleText, on the Macintosh, set this to CR. Files uploaded via FTP in ASCII mode ignore this setting (they always use CR LF). When downloading file via FTP in ASCII mode, Dreamweaver determines the appropriate line break character for your operating system automatically.

Case for Tags

Specifies whether to use <UPPERCASE> or <lowercase> format for HTML tags. You should use lowercase format for XHTML compliance.

Case for Attributes

Specifies whether to use the UPPERCASE="value" or lowercase="value" format for attributes within HTML tags. You should use lowercase format for XHTML compliance.

Override Case Of: Tags or Attributes

If enabled, Dreamweaver changes the case of HTML tags and attributes of any document opened in Dreamweaver. It also overrides the case used when hand-editing your HTML. If disabled, Dreamweaver leaves existing HTML alone.

Centering: Use DIV Tag or Use CENTER Tag

Select the Use DIV Tag radio button to center objects using the DIV tag, which is appropriate for Version 4+ browsers. Select the Use CENTER Tag radio button to support older Version 3 browsers. You should use the DIV option for XHTML compliance, because the <center> tag is deprecated.

18.3.1 The SourceFormat.txt File

The SourceFormat.txt file, found in the Dreameaver4/Configuration folder, offers more control over HTML source code formatting than Dreamweaver's preferences afford. You can edit this file in a text editor, but you must restart Dreamweaver for the changes to take effect.

There are three sections to the SourceFormat.txt file as indicated by the <?options> , <?elements> , and <?attributes> tags (the <?end> tag terminates the file). <?options>

The <?options> section corresponds roughly to the options available in the Code Format preferences dialog box.

The indentation settings are as follows (note that the tag is spelled "indention," not "indentation"):

 <indention enable indent="2" tabs="4" use="spaces" active="1,2"> 

The <indention> tag's enable , indent , tabs , and use attributes correspond to the Indent, Indent Size, Tab Size, and Use fields respectively in the Code Format preferences. The active attribute defines the groups of tags to be indented. Indentation group numbers are specified by assigning a value to the igroup attribute, such igroup="1" or igroup="2" . Two predefined groups correspond to the Table Rows and Columns (group 1) and the Frames and Framesets (group 2) options in the Code Format preferences.

The <?options> section configures other options as follows:

 <lines autowrap column="76" break="CRLF"> <omit options="0"> <element case="lower"> <attribute case="lower"> <colors text="0x00000000" tag="0x00000000" unknowntag="0x00000000"  comment="0x00000000" invalid="0x00000000" object="0x00000000"> <directives break="1,0,0,1"> <directives delimiter="%3C%25=" break="0,0,0,0"> 

The <lines> tag's autowrap , column , and break attributes correspond to the Automatic Wrapping, After Column, and Line Break preferences. The <omit> tag is reserved for future use. The case attribute of the <element> and <attribute> tags corresponds to the Case for Tags and Case for Attributes preferences. The <colors> tag corresponds to the Code Color preferences cited in Table 18-1. The <directives> tag controls the formatting of third-party tags. <?elements> and <?attributes>

The <?elements> section of the SourceFormat.txt file defines formatting preferences for individual tags. For example, this line defines the formatting attributes of the <p> tag.

 <p break="1,0,0,1" indent> 

The four numbers following the break attribute indicate the number of line breaks to insert before the opening tag, after the opening tag, before the closing tag, and after the closing tag. The indent attribute tells Dreamweaver to indent this tag according to the settings in the <?options> section.

These two lines assign the <td> and <frameset> tags to indention groups 1 and 2 using the igroup attribute:

 <td break="1,0,0,1" indent igroup="1"> <frameset break="1,0,0,1" indent igroup="2"> 

The noformat attribute prevents Dreamweaver from changing the format of the tag contents, as is the case with the <pre> tag:

 <pre break="1,0,0,1" noformat> 

The <?attributes> section of the SourceFormat.txt file defines custom capitalization for the specified HTML attributes.

The namecase attribute specifies the exact case to use for this particular element, which is important because JavaScript is case-sensitive. The following line ensures the correct case for onMouseOver :

 <onMouseOver namecase="onMouseOver"> 

The sameCase attribute forces the value of an attribute to be capitalized in the same way as the attribute name :

 <align samecase> 

The sameCase attribute is also used for Boolean attributes, which don't have values, and should not be removed.

 <checked samecase> 

See the comments within the SourceFormat.txt file itself for more information about its format. Search for "Changing default HTML formatting" under Help figs/u2192.gif Using Dreamweaver (F1) for more information.

Dreamweaver in a Nutshell
Dreamweaver in a Nutshell
Year: 2005
Pages: 208

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net