• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Editing Code > Setting HTML Preferences

Setting HTML Preferences

If you work somewhere that has a house HTML style guide, it's probably specific about things like indenting (or not), tag case (upper or lower), and how text is wrapped. In production groups, the interaction of individual coders' pages with the entire site and with vi and CVS (two tools used in Unix environments) has a lot to do with these standards. Even if you work for yourself, setting up house rules for consistency is a good idea.

✓ Tip

  • More HTML preferences (including Code Color preferences, Quick Tag editor preferences, and External Editor preferences) are discussed in Appendix D on the Web site for this book. HTML Cleanup preferences are discussed later in this chapter.

To change Code Format preferences

From the Document window menu bar, select Edit > Preferences (OS X: Dream weaver > Preferences). The Preferences dialog box will appear.

In the Category box at the left of the dialog box, click on Code Format. That panel of the dialog box will appear (Figures 4.92 and 4.93).

Figure 4.92. The Code Format panel of the Preferences dialog box lets you get nitpicky about how your code is constructed.

Figure 4.93. A close-up of the Code Format panel of the Preferences dialog box.

To turn off indenting altogether, uncheck the Indent checkbox.

To use Spaces or Tabs for indent, select that option from the Use drop-down menu.

For more on indenting, see the sidebar, HTML Code Format Details, later in this chapter.

You can have Dreamweaver automatically wrap text in the Code inspector by checking the Automatic Wrapping checkbox.

For more on wrapping, see the sidebar.

To set the format for line breaks, select Windows, Macintosh, or Unix from the Line Breaks drop-down menu.

For more on line breaks, see the sidebar on the next page.

To set the default case for tags and attributes, select lowercase or UPPERCASE from the Default Tag Case and Default Attribute Case drop-down menus. For more on tag case, see the sidebar.

You can have Dreamweaver conform to your case options even when you type your tags and attributes in a different case than the one you specified. To have Dreamweaver override your typing for your preference, check the Tags checkbox or the Attributes checkbox in the Override Case Of area of the dialog box. You then need to Apply Source Formatting; see the Tips below.

No Break After TD means that not every table cell is required to stick to its own line of code. See the sidebar.

To set the default tag for centering text, click the Use DIV Tag or Use CENTER Tag radio button. To go oldschool, use CENTER. The DIV tag is a block-like tag that's similar to the P tag. These tags are described in detail in Chapters 6 and 14. One note: My preferences are currently set to DIV, but paragraphs whose alignment I set in the Property inspector now commonsensically use the align attribute of the P tag, as in <p ALIGN="center">.

When you're all set, click OK to save your changes and close the Preferences dialog box.

✓ Tips

  • When you change your Code Format preferences, the changes will be applied to all pages you create in Dreamweaver from here on out, but they won't be applied retroactively to pages you've already created.

  • To format a page using your new preferences, open the page and select Commands > Apply Source Formatting from the menu bar. Your tag case, indents, and so on will be applied to the page.

  • To add an indent, click at the beginning of the line and select Edit > Indent Code from the menu bar, or press Ctrl+Shift+> (Command+Shift+>).

  • To remove an indent, click at the beginning of the line and select Edit > Outdent Code from the menu bar, or press Ctrl+Shift+< (Command+Shift+<).

  • Versions of Dreamweaver earlier than MX allowed you to set separate indent preferences for tables and frames, but in MX or MX 2004, it's either on or off.

HTML Code Format Details

Good code is nitpicky, right? This sidebar describes some of the nitpickier details and rationales for code formatting. Use this sidebar in conjunction with the steps in the preceding sections.

  • Indenting: By default, Dreamweaver indents certain elements of HTML—the rows and cells in a table, for example. Not indenting may save some download time on very large pages.

    To set an indent size (the default is two spaces or two tabs), type a number in the Indent text box. To set the tab size, because tabs in HTML are spaces, type a number in the Tab text box.

  • Wrapping: To use hard wrapping, check the Automatic Wrapping checkbox. This breaks the line with an actual hard line-break character after the specified column width is reached. To turn off autowrapping, uncheck this option. (This wrapping is saved in the file and is different from the soft Word Wrap feature you can apply to individual pages by using the Options menu in the Code inspector or Code view.)

    The default column width for text-based programs like vi and Telnet is usually 76 or 80 columns (the number of columns in this context is equal to the number of monospace characters across a window). To set a different width, type it in the After Column text box.

  • Line Breaks: Line breaks are done differently on different platforms. Because line breaks are actually characters, a line-break character may show up in Unix, for example, if a Mac or Windows line break is inserted.

    If you work with an external editor that uses a specific type of line break, set Mac for TextEdit and Windows for Notepad.

    When using Dreamweaver's FTP client in ASCII mode (used for text files by default), MX and MX 2004 will override your preferences and will set breaks based on your current platform when downloading, and it sets breaks as the Windows entity CR LF when uploading.

    If you work with pages that will be checked in to a document management system like CVS, be sure to check with your house style guide or an engineer to verify your choices here.

  • No Break After TD means table cells are not required to occupy a unique line of code. Dreamweaver will generally produce each <td> on its own line, but if you want not to require this, go ahead. Your source formatting will allow the following: <td>&nbsp;</td><td>&nbsp;</td>

  • Tag Case: Some folks are especially picky about whether tags and attributes are written in UPPERCASE or lowercase.

    To set the case for attributes (the case can be the same as or different from tag case), select lowercase or UPPERCASE from the Case for Attributes drop-down menu.

    (Going forward, you'll want to standardize on lowercase for both tags and attributes, with attribute values quoted—it's a requirement for XHTML validity.)

    You can have Dreamweaver override the tag and attribute case for documents that were typed with some of each, produced in other applications, or created before you edited preferences.

    To change the HTML case of older documents opened in Dreamweaver, check the Tags and/or Attributes checkbox in the Override Case Of line. To apply the new case, select Commands > Apply Source Formatting from the menu bar.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint