| Although Dreamweaver offers numerous methods for workflow customization, in reality, everything begins with the Preferences window. Available by choosing the Preferences option from the Edit menu (see Figure 5.1), the Preferences window includes numerous categories for fine-tuned workflow customization. Figure 5.1. The Preferences window includes numerous categories for fine-tuned workflow customization. 
As you can see from Figure 5.1, everything from how you interact with the Document window to how code is written in Code view can be customized from this window. A complete list includes: Setting general preferences for Dreamweaver Optimizing the workspace for accessible page design Setting code-coloring preferences Setting code-formatting options Setting code hints preferences Setting code-rewriting preferences Setting copy-and-paste preferences Setting CSS (styles) preferences Defining a file compare program Setting file types and external editors Setting font preferences for Dreamweaver display Setting highlighting preferences Setting invisible elements preferences Setting layer preferences Setting preferences for Layout mode Setting options for new document creation Setting preferences for previewing in browsers Setting site preference options Setting status bar preferences Setting validator preferences
NOTE Most Dreamweaver categories can be accessed from specific panels and windows while you're working. For instance, because the Preview in Browser category allows you to set external browsers to use for previewing web pages, it can be accessed directly by selecting the Edit Browser List option from the Preview in Browser icon menu in the Document bar. Most of the categories you see in the Preferences window function that way. It's simply a matter of convenience to select the Preferences option from the Edit menu.
Let's discuss each of these preferences with more detail; I'm sure that you will find some preferences that you'll want to customize to improve the way you work with Dreamweaver. The General Category As you can see from Figure 5.1, basic preferences appear in the General category of the Preferences window. As you've seen in chapters up to this point, options including enabling the start page, working with HTML tags instead of CSS, and the spell checker dictionary can all be customized from this category. A complete list of customizable functionality is given here: Show start page: As you saw in Chapter 3, "Building a Web Page," the start page is a handy window that allows you to quickly open recently opened files, create new files, and create new files from pre-built Dreamweaver skeleton files. Choose this option to enable or disable the start page when Dreamweaver opens or when all Document window instances have been closed. Reopen documents on startup: Enable this option if you want Dreamweaver to automatically open the last file(s) you had open when you closed Dreamweaver. If you disable this option, Dreamweaver opens the start page if you have that option selected; Dreamweaver opens a blank screen if you don't. Warn when opening read-only files: Enabling this option forces Dreamweaver to alert you when opening files that are set as read-only. When the alert appears, you are given the option to unlock the file, check it out, open the file with read-only status, or to cancel completely. Update links when moving files: This option determines how Dreamweaver should handle the moving, renaming, or deleting of files in your defined site. From the menu, you have the option of choosing whether to have Dreamweaver update links automatically, never, or to prompt you before performing any operations. Show dialog when inserting objects: Disable this option if you don't want to see a dialog when inserting objects such as images and tables from the Insert bar. If this option is disabled, all properties for the object must be set within the Properties Inspector, Code view, or the Attributes tab of the Tag Inspector panel group. Enable double-byte inline input: Choosing this option enables you to enter double-byte text directly into your pages if you are using a language that facilitates double-byte text (such as Japanese characters). When this option is deselected, a text input dialog appears for entering and converting double-byte text. Switch to plain paragraph after heading: Enabling this option causes Dreamweaver to insert a new paragraph (represented with the <p> tag) when you press Enter after a heading (represented by tags such as <h1> and <h2>). If this option is not selected, pressing Enter after a heading creates a new paragraph with the same heading tag. Allow multiple consecutive spaces: By default, inserting a normal space into a web page is represented by the non-breaking space ( ) special character. The non-breaking space is accessible by choosing Insert, HTML, Special Characters, Non-Breaking Space or by pressing the keyboard shortcut Ctrl+Shift+Space. Check this option to insert a non-breaking space when the Spacebar is pressed. Use <strong> and <em> in place of <b> and <i>: For standards compliancy, this option should remain enabled. In fact, the World Wide Web Consortium (W3C) discourages the use of the <b> and <i> tags. Choosing this option guarantees that the <strong> tag (Bold) is used in place of the <b> tag and the <em> tag (Italic) is used in place of the <i> tag when their respective buttons are selected from the either the Properties Inspector or from the Text, Style menu. Use CSS instead of HTML tags: As you saw in Chapter 3, deselecting this option allows you to work with traditional HTML formatting options. As you'll see in Chapter 7, "Advanced Page Formatting Using Style Sheets," you check this option to work with the forward standards-compliant CSS. Warn when placing editable regions within <p> or <h1>-<h6> tags: Specifies whether or not Dreamweaver displays a warning message whenever you save a Dreamweaver template that has an editable region in a paragraph or heading tag. The message tells you that users will not be able to create more paragraphs in the region. It is turned on by default. Maximum number of history steps: Specifies the maximum number of history steps to store in memory. These steps, also represented by repeatedly choosing Edit, Undo (or by pressing Ctrl+Z/Option+Z) are also visible in the History panel. Although you can increase this number, be aware that these steps are stored in memory. The higher you increase this number, the more memory is consumed by your computer. Spelling dictionary: Lists the various dictionaries to use with the spell checker. By default, this option is set to English (American).
The Accessibility Category As you can see from Figure 5.2, the Accessibility category of the Preferences window allows you to customize how you work with various accessibility features in Dreamweaver. Figure 5.2. The Accessibility category of the Preferences window allows you to customize how you work with accessibility features in Dreamweaver. 
NOTE More information on Accessibility can be found in Appendix A, "Accessibility."
A complete list of customizable functionality is given here: Show attributes when inserting: As you will see in Appendix A, form objects, frames, media elements, and images all carry accessibility attributes that you can set. Checking these boxes guarantees that whenever you insert a form object, create a frame, or insert a media or image element, a dialog appears allowing for customization of accessibility attributes for the respective element. If these check boxes are left unchecked, an accessibility dialog does not automatically appear when you insert the previously mentioned elements onto the page. Again, we'll discuss these options with more detail in Appendix A. Keep focus in the panel when opening: Enable this option if you want to keep the focus in panels when they open; disable this option to keep the focus in the main window when you open a panel. Offscreen Rendering: Disable this option if you ever have issues with a screen reader viewing your pages.
The Code Coloring Category One of the subtle benefits to working in the code environment in Dreamweaver is that all code is separated into colors. For instance, most ordinary HTML elements appear as blue, styles as maroon, scripts as red, form elements as orange, literal text as black, and so on. You might want to pursue these colors even further and customize them to your liking. Even better, you might want to create more color combinations for tags. If this is the case, the Code Coloring category in the Preferences window is for you. As you can see from Figure 5.3, the Code Coloring category allows you to customize how elements in a specific tag library are displayed. Figure 5.3. The Code Coloring category allows you to customize the color of elements in various tag libraries. 
As you will see, aside from plain HTML, other tag libraries exist and can be modified. A complete list of customizable functionality in the Code Coloring category is given here: Document type: Lists all the document libraries that are supported and that can be customized in Dreamweaver. When you've found the tag library whose colors you'd like to customize, select it, and click the Edit Coloring Scheme button. Edit Coloring Scheme: After you've selected a tag library from the Document Type list box, click this button to display the Edit Coloring Scheme dialog (see Figure 5.4). The Edit Coloring Scheme for <your tag library> dialog allows you to pick from a tag list on the left and customize the color of that tag on the right. Dreamweaver also gives you the options of adding a background color to the tag and of changing the weight to Bold, Italic, and even Underline. When you've customized how you want the tag to look, review it in the Preview pane and click OK to apply the changes. Figure 5.4. The Edit Coloring Scheme for HTML dialog allows you to customize tag colors as they will appear in Code view in the Document window. 
Default background Sets the background color of Code view. By default, the color is set to white or #FFFFFF.
The Code Format Category The Code Coloring category allows you to make tailored changes that affect the color of code as it's added to the coding environment; the Code Format category of the Preferences window, shown in Figure 5.5, allows you to customize how the code is added and subsequently formatted in the coding environment. Figure 5.5. HTML code is formatted in the coding environment based on modifications you make to the Code Format category. 
A complete list of customizable functionality is provided here: Indent: Enable this option to allow Dreamweaver to automatically indent HTML code according to the rules specified to the right of this check box. If this option is enabled, specify how many spaces or tabs Dreamweaver should indent code. Tab size: The value in this text box determines how many characters wide each tab character appears in the code view. For instance, if the Tab size is set to 5, then each tab is displayed in Code view as a five-character-wide blank space. Automatic Wrapping: Enable this check box to have Dreamweaver insert a line-break character when a line reaches the specified column width in a table. Because Dreamweaver inserts line-break characters only in places where they don't change the appearance of the document in browsers, some lines might remain longer than what this Automatic Wrapping option specifies. Line break type: Choose one of the three options in this list to set the type of line break based on the remote server's operating system. Choosing the correct version ensures that your pages are accurately formatted on the remote server. As you can see from this list, options include Carriage Return Line Feed (CR LF) for Windows, Carriage Return (CR) for Macintosh, and Line Feed (LF) for Unix. Default tag case: Choose from one of the two options in this menu to force Dreamweaver to add tags in either uppercase or lowercase format. Due to XHTML compliancy standards, it's generally a good idea to stick with lowercase characters. Default attribute case: Choose from one of the two options in this menu to force Dreamweaver to add tag attributes in either uppercase or lowercase. Again, because the web is moving towards XHTML compliancy, it's generally a good idea to stick with lowercase characters. Override case of: Tags and Attributes: Use these powerful check boxes to always force the two uppercase/lowercase rules mentioned above. By enabling this option, Dreamweaver converts to lowercase/uppercase the code in any document opened in Dreamweaver. This is a great way to enforce the rules you set above, even for documents you open in Dreamweaver that weren't created in Dreamweaver. No break after TD: Choose this option if you don't want Dreamweaver to add a line break after the <td> tag (table data tag for the parent <table> tag) is inserted in code such as: <td>Hello World</td>. Disabling this option simply adds a line break after the opening <td> tag and then again after the literal text. Centering: Specifies whether centering in your web pages is handled using <div align="center"> or <center>. Both of these options are deprecated as of the HTML 4.01 specification and should be replaced with CSS styles whenever possible.
Also notice the option for opening the Tag Library Editor. As you will see later in the chapter, selecting this option opens the Tag Library Editor, which lets you set the formatting of individual tags as opposed to the global settings you specify in the Preferences window. The Code Hints Category You can set options in the Code Hints category of the Preferences window to customize how Dreamweaver helps you along in the coding environment. Shown in Figure 5.6, the Code Hints category allows you to enable or disable automatic tag completion as well as the delay in milliseconds that it will take for the code hints drop-down menu to appear as you write code in Code view. Figure 5.6. Set preferences in this category to customize how Dreamweaver works with tag completion and code hints. 
A complete list of customizable functionality is provided here: Close tags: Choose one of the options in this radio group to set how Dreamweaver will automatically close tags for you as you type. For instance, selecting the first radio button (After Typing "</") guarantees that if you type the <td> tag, the closing tag won't automatically appear until I type the </. Selecting the second radio button (After Typing the Open Tag's ">") guarantees that if you type the <td> tag, the closing tag automatically appears as soon as you close the opening tag with the > symbol. Selecting the Never option guarantees that Dreamweaver never automatically closes tags. Options: Enable code hints: As discussed in Chapter 3, the code hints menu is a collection of tags, attributes, and values for various languages supported in Dreamweaver. This option enables or disables the code hints menu that appears when you write code in Code view. Delay: Choose a time in seconds from this slider to set the delay of the code hints menu. If you prefer the code hints menu to appear instantly, set the slider to 0; if you prefer a longer delay, move the slider to the right. Menus: Choose from the check boxes in this list to set which type of code hints you want displayed while typing. You can enable a few of these options or all of them.
The Code Rewriting Category As you can see, each code category in the Preferences window allows you customize the look, formatting, and interaction of code you add while in Code view. The Code Rewriting category, shown in Figure 5.7 is no different. Use this category to customize how Dreamweaver rewrites code of a certain type, encodes special characters, encodes URLs, and so on. Figure 5.7. Use the Code Rewriting category to customize how Dreamweaver should handle the rewriting of code of a certain type, how it should encode URLs, and how it should encode special characters. 
A complete list of the functionality in the Code Rewriting category is provided here: Fix invalidly nested and unclosed tags: Choose this option to rewrite tags that are invalidly nested or invalidly unclosed. For instance, the code <strong><em>Hello World</strong></em> is rewritten as <strong><em>Hello World</em></strong>. Rename form items when pasting: Ensures that forms are always given unique names when pasting. For instance, if you have <form name="form1"><form> and you copied and pasted that form somewhere else on the page, it would be renamed to <form name="form2"><form>. If this option was disabled, the new form would be pasted in with the same name. Remove extra closing tags: Choose this option to force Dreamweaver to delete closing tags that have no corresponding opening tag. Warn when fixing or removing tags When the Fix Invalidly Nested and Unclosed Tags option or the Remove Extra Closing Tags option is enabled, this option becomes available and can be enabled or disabled. Enabling this option forces Dreamweaver to display a list of attempted fixes in the Results window. Never rewrite code: Useful when working with languages that have third-party tags, this option ensures that Dreamweaver doesn't rewrite code in files with the filename extensions you list in the Files with Extensions text box. Special characters (Encode): Enabling this option ensures that attribute values you enter or edit using Dreamweaver tools such as the Properties Inspector contain only legal characters. URL Encoding (Do not encode special characters) : Select this radio button to prevent Dreamweaver from changing URLs to use only legal characters. URL Encoding (Encode special characters in URLs using &#): Enabled by default, this option guarantees that URLs edited with Dreamweaver tools such as the Properties Inspector contain legal characters. URL Encoding (Encode special characters in URLs using %): Similar to the previous option, this option simply uses a different method of encoding suited more to older browser but less compatible with some languages.
The Copy/Paste Category You can use the Copy/Paste category, shown in Figure 5.8, to set how Dreamweaver handles the pasting of text by default when using the Paste option from the Edit menu. Figure 5.8. Use the Copy/Paste category to set how Dreamweaver handles the pasting of text when using the Edit, Paste option. 
A complete list of the functionality in the Copy/Paste category is provided here: Text only: Check this box to have Dreamweaver paste unformatted text. If the original text is formatted, all formatting, including line breaks and paragraphs, is removed. Text with structure: Check this box to have Dreamweaver paste text and retain structure, but not retain basic formatting. For example, you can paste text and retain the structure of paragraphs, lists, and tables without retaining bold, italics, and other formatting. Text with structure plus basic formatting: Check this box to have Dreamweaver paste both structured and simple HTML-formatted text such as paragraphs and tables, as well as <b>, <i>, <u>, <strong>, <em>, <hr>, <abbr>, and <acronym>. Text with structure plus full formatting: Check this box to have Dreamweaver paste text that retains all structure, HTML formatting, and CSS styles. Retain line breaks: Enable this check box to have Dreamweaver retain line breaks in pasted text. This option is disabled when pasting with the Text Only option enabled. Clean up Word paragraph spacing: Select this check box if you selected the Text with Structure option or the Basic Formatting option and want to eliminate extra spaces between paragraphs when pasting text.
The CSS Styles Category The CSS Styles category controls how Dreamweaver writes the code that defines CSS styles. As you can see from Figure 5.9, the CSS Styles category is heavily centered around CSS shorthand preferences. CSS shorthand, which is a cleaner and more concise way of writing CSS, is not correctly interpreted by older browsers. Because this is the case, use these options according to your organizational environment. Figure 5.9. Use the CSS Styles category to define how Dreamweaver writes the code that defines CSS styles. 
A complete list of the functionality in the CSS Styles category is provided here: When creating CSS rules use shorthand for: Choose from this list of options to declare which CSS styles Dreamweaver should use shorthand for. Options include Font, Background, Margins and Padding, Border and Border Widths, and List-Styles. When editing CSS rules use shorthand: Choose from these options to control whether Dreamweaver rewrites existing CSS styles in shorthand. Choose the If Original Used Shorthand option to keep styles as they are when CSS styles are edited; enable the According to Settings Above option to rewrite CSS based on settings you choose from the Use Shorthand For check box list (this is the option selected by default). Keep the Open CSS Files When Modified option checked to automatically open the CSS file when a change to the file has been detected from a Dreamweaver CSS styles-editing tool such as the CSS Styles panel. Personally, I find it rather annoying that the CSS file opens every time I make edits, so I always disable this check box. When double-clicking in CSS panel: Choose an option from this list to set which built-in CSS editor opens when you double-click in the CSS panel. Options include the CSS dialog, the Properties pane, and Code view.
The File Compare Category One of the newest features in Dreamweaver 8 is the ability to install, set, and use a file compare program directly from Dreamweaver. A file compare program is a software application that allows you to compare (otherwise known as "diff"), line by line, differences between two files. For instance, if you've made changes to a file, saved it with a different name, and then wanted to compare the changes in the new file versus the structure of the original file, you could easily compare the two using a file compare program. The file compare program scans the files line by line and presents both files, side by side, with the differences highlighted. Although file compare programs have been around for some time, it's not until the release of Dreamweaver 8 that support for file compare programs has been integrated directly into Dreamweaver's interface. In the next two sections, we'll walk through identifying and installing a file compare program and then setting the Dreamweaver Preferences to use the file compare program. Installing a File Compare Program Although numerous file compare programs exist for you to download and try, the one I've been using for years, WinDIFF, is arguably archaic in its implementation but is simple to install and use. To download and install WinDIFF, follow these steps: 1. | Go to http://www.dreamweaverunleashed.com and choose the WinDIFF option from the Tools page. The WinDIFF.zip file begins to download.
| 2. | Create a folder called WinDIFF in the Program Files directory of your computer.
| 3. | Open the ZIP file you just downloaded and extract the windiff.exe and gutils.dll files, copying them into the C:\Program Files\WinDIFF folder.
|
That's it! You're now ready to begin using WinDIFF. Setting Dreamweaver to Use the File Compare Program After you've copied the WinDIFF files to your computer, you're ready to set the File Compare preferences in Dreamweaver. Doing this allows Dreamweaver to automatically open WinDIFF when you want to compare two files. To set WinDIFF as the file compare program to use in Dreamweaver's Preferences, follow these steps: 1. | If you closed the Preferences window, reopen it by choosing the Preferences option from the Edit menu.
| 2. | Switch to the File Compare category.
| 3. | Click the Browse button and browse to the windiff.exe program file located in the C:\Program Files\WinDIFF directory on your computer.
| 4. | Click OK to close the Preferences window.
|
You can now compare files in Dreamweaver. Comparing Files Now that you've successfully copied the necessary WinDIFF files to your computer and you've correctly referenced the executable from the Preferences window in Dreamweaver, you're ready to compare files. Although the reasons for comparing files differ for each user, this section aims to expose the process so that when the situation arises, you'll understand how to do it. To compare two files in Dreamweaver, follow these steps: 1. | If you don't have the Files panel open, open it now by choosing Window, Files or by pressing F8.
| 2. | From the Files list, choose both the employeestore.htm and helpdesk.htm pages by holding down the Ctrl key and clicking to select both files.
| 3. | Right-click one of the files and choose the Compare Local Files option from the context menu.
| 4. | WinDIFF opens and displays the differences in code between the two files. As you can see from Figure 5.10, the differences between the two files are outlined in red and yellow for line 49.
Figure 5.10. WinDIFF displays the differences between two files by highlighting the lines in red and yellow. 
|
The File Types/Editors Category One of the more important categories in the Preferences window is the File Types/Editors category. Shown in Figure 5.11, the File Types/Editors category allows you to set preferences for specific file types as well as external editors that should be opened when an element of a specific file type is edited directly from Dreamweaver. Figure 5.11. Use the File Types/Editors category to configure how Dreamweaver handles the direct editing of elements with specific file types. 
A complete list of the functionality in the File Types/Editors category is provided here: Open in code view: Use this text box to maintain a list (separated by spaces) of files with specific extensions that should be opened directly in Code view. External code editor: Assuming that you're using a language that contains third-party tags not supported in Dreamweaver, you can set the program to be used as the external editor by browsing to it from here. Reload modified files: Use this option to specify what you want Dreamweaver to do when it detects that changes have been made externally to a document that is open in Dreamweaver. Save on launch: Use this option to specify whether Dreamweaver should always save the current document before starting the editor, never save the document, or prompt you to ask whether to save or not each time you start the external editor. Fireworks: Specify the path to your Fireworks installation in this text box. Numerous Dreamweaver operations depend on Fireworks, such as the image-editing options in the Properties Inspector when an image is selected in the Document window.
You can also set external editor preferences for specific file types. Consuming the bottom half of the File Types/Editors screen, the file types/editors panes allow you to quickly browse for and set external editors for specific file types. To set an external editor for a file type, follow these instructions: 1. | From the Extensions list box, select the extension for which you want to configure an external editor. If an extension you're using is not listed in this pane (not likely), click the + icon to manually add it. For the sake of demonstration, I'll choose the .png extension.
| 2. | Click the + icon located above the Editors pane.
| 3. | The Select External Editor dialog appears, allowing you to browse to the executable of the program you want to associate with the selected file extension. In my case, I'll add Photoshop as an editor. On my computer, Photoshop is located at C:\Program Files\Adobe\Photoshop CS\photoshop.exe. Yours may differ. After you've found the program, click OK.
| 4. | Dreamweaver adds the program to the Editors list. You can then choose between primary and secondary editors by choosing the editor and clicking the Make Primary button.
|
That's it! You can repeat the process for the other file types that appear in the Extensions pane if you'd like. The Fonts Category You can use the Fonts category of the Preferences window, shown in Figure 5.12, to change the fonts that Dreamweaver uses in the Document window, in Code view, and for certain tags. Figure 5.12. Use the Fonts category to change the fonts Dreamweaver uses for display. 
Remember, Dreamweaver uses the fonts listed here for display purposes only. Ultimately, these settings have no effect on what the end user sees in his browser. The end user always has the power of customizing the fonts he sees on all web pages by customizing the browser to use one of their system fonts. The following list shows a complete list of functionality exposed through the Fonts category: Font settings: Choose a language from this list to specify the set of fonts to be used in Dreamweaver for documents that use a given type of encoding. Proportional font: Choose an available system font and size to set the display of most text elements in Design view. Fixed font: Choose an available system font and size to set the display of text within <pre>, <code>, and <tt> tags. Code view: Choose an available system font and size to set the display of the Code view and Code Inspector.
The Highlighting Category You can use options available from the Highlighting category in the Preferences window, shown in Figure 5.13, to customize the colors Dreamweaver uses to identify template regions, library items, third-party tags, layout elements, and code. Figure 5.13. Use the Highlighting category to customize the colors Dreamweaver uses to identify special elements. 
NOTE Although the Highlighting category appears similar to the Code Coloring category, they are in fact, completely different. The Color Coloring category outlines how specific tags in code should be colored. The Highlighting category specifies how certain elements in the Designer are color coded to distinguish them from other elements.
Specific customizations that can be made include mouse-over, editable regions, nested editable, locked regions, library items, third-party tags, and translated and un-translated live data elements. You might have to make changes to the options in this category as you progress through the book and begin to pick up on the functionality of these elements. To make a change, simply identify the element's highlight color that you want to change, choose a custom color from the color picker, and then enable the Show check box to highlight the specific element. Alternatively, you can decide not to highlight a specific element by disabling the Show check box next to the specific element name. The Invisible Elements Category Invisible elements are HTML components that, in most cases, don't have visual interfaces. Instead, invisible elements, like the named anchor you saw in Chapter 3, is represented by various yellow-shield icons. You can use the Invisible Elements category of the Preferences window, shown in Figure 5.14, to customize which, if any, invisible elements are displayed in Design view. Figure 5.14. Use the Invisible Elements category to customize which, if any, invisible elements are displayed. 
A complete list of functionality exposed by the Invisible Elements category is given here: Show: Enable or disable the display of named anchors, scripts, comments, line breaks, client-side imagemaps, embedded styles, hidden form fields, form delimiter, anchor points for layers, anchor points for aligned elements, virtual server markup tags, non-visual server markup tags, and CSS display (none) invisible elements. When working in Design view, you'll be able to differentiate the invisible element by looking for the representative shield icon. Unfortunately, these icons cannot be changed. Show dynamic text as: As you will see in Part V, "Dynamic Web Page Development," Dreamweaver displays dynamic text directly in Design view using either brackets ({ }) or the text {Recordset.Field}. You can choose which to display using this drop-down menu. Occasionally, I'll choose the bracket option alone; if I'm working with an intricate design, it's more important to conserve space than it is to display the text {Recordset.Field}. Server-Side includes: Server-side includes are text files you can reference in an HTML file using the <!#include file="filename" > tag. The benefit to using server-side includes is that they let you "include" large amounts of text, HTML elements, and so on in any HTML file without taking up a lot of visual space in Code view. The downside to using server-side includes is that they can be used in excess, ultimately becoming unmanageable. Enable this check box to show the contents of the server-side include in the document. Disable this check box to display an invisible element icon instead.
The Layers Category Layers, as you will learn in Chapter 11, "Layers in Dreamweaver," are HTML elements that can contain text, images, media, and so on. The benefit to using layers is that they are stackable and moveable in the design window, enabling pinpoint accurate designs. As shown in Figure 5.15, the Layers category in the Preferences window allows you to customize the look of the layer when it's inserted into the design window. Figure 5.15. Use the Layers category to customize the initial look of layers as they are inserted into your page. 
NOTE Most of these customizable features are also available from the Properties Inspector after the layer has been inserted into the design window. The Preferences options merely customize the initial look of the layer when it's inserted for the first time.
A complete list of functionality exposed by the Layers category is given here: Visibility: Choose an option from this menu to set the initial display properties of the layer. Options include Default, Inherit, Visible, and Hidden. Again, you will learn more about these options in Chapter 11. Width: Sets the initial width in pixels of the layer when it's first inserted into the Document window. Height: Sets the initial height in pixels of the layer when it's first inserted into the Document window. Background color: Sets the initial background color of the layer when it's first inserted into the Document window. Background image: Sets the initial background image of the layer when it's first inserted into the Document window. If a background image is set and is smaller than the specified width and height of the layer, the image tiles vertically and horizontally. Nesting: Enable this option to automatically nest a layer within another layer if the second layer is initially created within the boundaries of an existing layer. Disabling this option causes the layer to stack instead of nest. Netscape 4 compatibility: Enable this option to allow Dreamweaver to automatically insert JavaScript code within the <head> tag of the web page to fix a known problem in Netscape 4 browsers that automatically causes a layer to lose its positioning values if a user resizes the browser window. Alternatively, you can manually add/remove this code by choosing the Add/Remove Netscape Resize Fix option from the Commands menu.
The Layout Mode Category In general, Dreamweaver supports two development modes: Standard and Layout. Up until now, you've been using the Standard mode for developing your web pages. In Chapter 6, "Web Page Structuring Using Tables," we'll examine the Layout mode with much more detail. In support of that chapter, you can set layout preferences in the Layout category of the Preferences window, shown in Figure 5.16, to customize the look of elements exposed by the Layout mode. Figure 5.16. Use the Layout category to customize the look of elements exposed by the Layout mode. 
A complete list of functionality exposed by the Layout Mode category is given here: Autoinsert spacers: Choose the When Making Autostretch Tables option to insert a spacer image to control the width, the height, or both of a table cell. Choose the Never option if you'd prefer not to have Dreamweaver automatically add the spacer image to your table. Spacer image for site: Choose a defined site from this menu to set the spacer image in the Image File text box for a specific site. Image file: Click the Browse button to search for an existing spacer image file or click Create to have Dreamweaver create a 1 x 1 pixel transparent GIF in your selected site. NOTE Spacer images are discussed with more detail in Chapter 6.
Cell outline: Choose from this color picker to set the color of the outlines of layout cells. Table outline: Choose from this color picker to set the color of the outlines of layout tables. Table background: Choose from this color picker to set the color used for areas of layout tables where there are no layout cells.
The New Document Category You can use the New Document category of the Preferences window, shown in Figure 5.17, to specify default properties for a newly created document. Everything from the default extension of the document to its encoding type can be specified here. Figure 5.17. Use the New Document category to specify default properties for a newly created document. 
A complete list of functionality exposed by the New Document category is given here: Default document: Choose an option from this list to set a default document type. Whenever you create a new document, this is the file to which it defaults. The default is HTML. Default extension: Enter the three- or four-letter extension in this text box. For instance, if you're working with HTML, you might elect to enter .htm or .html. Default Document Type (DTD) : Enter the DTD that will initially appear in the New Document dialog. The default is XHTML 1.0 Transitional. DTDs are explained in Chapter 3. Default encoding: As you saw from the Modify Page Properties dialog in Chapter 3, a document's encoding specifies how characters and fonts in the document should be rendered within Dreamweaver and the browser. Although you can change this option on a per-page basis, you can also set it here to default every page to a specific encoding type. You can also enable the check box under the Default Encoding menu to have Dreamweaver automatically add the <meta> tag that's used to set the encoding on pages that do not specify an encoding type. Unicode Normalization Form: Dreamweaver lets you specify which Unicode Normalization Form to use with your selected encoding type. Although there are four Unicode Normalization Forms listed as options, the most important is Normalization Form C (NFC) because it's the most common form used in the Character Model for the World Wide Web. For completeness, Macromedia provides the other three Unicode Normalization Forms. You can also include the Unicode Signature Byte Order Mark (BOM) by enabling the check box directly under the Unicode Normalization Form menu. The BOM is 2 to 4 bytes at the beginning of a text file that identifies a file as Unicode, and if so, the byte order of the following bytes. Show New Document dialog box on Control+N: Enable this option to show the New Document dialog when you press the Ctrl+N shortcut key combination.
The Preview in Browser Category In the previous chapters, you learned that you can quickly preview your web pages in a browser by choosing the Preview in Browser option from the Document bar. The Preview in Browser menu lists the names of the browser(s) available on your computer at the time Dreamweaver was installed. If you ever install new browsers or find that you use one browser more than another, you can customize those preferences in the Preview in Browser category (see Figure 5.18). Figure 5.18. Use the Preview in Browser category to add, remove, and edit browsers for use in Dreamweaver. 
A complete list of functionality exposed by the Preview in Browser category is outlined here: Browsers: Use the Browsers functionality to add, remove, and edit existing browsers that appear in the Preview in Browser menu. Defaults: Use these options to determine whether a browser selected in the Browsers list should be set as the primary or a secondary browser. By default, the primary browser assumes the F12 shortcut key while the secondary browser uses the Ctrl+F12 shortcut key. Options: Preview using temporary file: If a file hasn't been saved before you select the Preview in Browser option, Dreamweaver asks you to save the file first. You can prevent this prompt from appearing by enabling this check box. Enabling this check box causes Dreamweaver to create a temporary file when you select the Preview in Browser option. The downside to using this option is that every time you preview your page in the browser (which could be dozens of times), a new file is created. If Dreamweaver ever unexpectedly quits, the temporary files linger in the site, forcing you to manually remove them.
Adding a browser to the Browsers list is simple. As you can see from Figure 5.18, I already have Internet Explorer set up as my primary browser. As a secondary browser, I'll browse for and add Netscape. You can do this yourself by following these directions: 1. | Click the Add (+) icon to add a new browser to the list. The Add Browser dialog appears.
| 2. | Enter the name of the browser in the Name text box. I'll enter Netscape.
| 3. | Browse to the application by clicking the Browse button. The path to Netscape on my computer is C:\Program Files\Netscape\Netscape.exe. Yours may be different. Click OK. The path to the application appears in the Application text box.
| 4. | Because I already have a primary browser configured, I'll select the secondary browser check box. When you've finished configuring the dialog, it should resemble Figure 5.19.
Figure 5.19. Configure the Add Browser dialog for your secondary browser. 
| 5. | Click OK to return to the Preview in Browser category in the Preferences window.
|
Back on the Preview in Browser screen, the new secondary browser appears in the Browsers list. You can return to the Add Browser dialog to configure options for a specific browser by either double-clicking a browser in the list or by selecting the browser and clicking the Edit button. Furthermore, you can remove a browser from the list by selecting the browser and clicking the Remove () button. Click OK in the Preferences window to return to the Document window. You'll notice that the new secondary browser now appears in the Preview in Browser menu on the Document bar (see Figure 5.20). Figure 5.20. The new secondary browser appears in the Preview in Browser menu in the Document bar. 
The Site Category As you saw in Chapter 4, "Dreamweaver Site Management," Dreamweaver integrates numerous site management features including an FTP client, site synchronization, file Check In/Check Out, source control integration, and so on. You learned that accessing these features was as simple as defining a site. During the site definition process, you saw that various preferences could be set for a specific site. The Site category of the Preferences window, shown in Figure 5.21, allows you to customize initial preferences for sites as they are created. Figure 5.21. Use the Site category to define initial preferences for sites as they are created. 
A complete list of functionality exposed by the Site category is provided here: Always show: Choose options from these two menus to customize the placement of the local and remote file panes either on the left or right of the site management window. Dependent files: You probably remember the Dependent Files dialog that appeared when we transferred an HTML file from the Local pane to the Remote pane in the previous chapter. Selecting Yes from the Dependent Files dialog guaranteed that files referenced by a specific HTML file would also be transferred without having to manually select them and drag them over. If this functionality is important to you, then keep these check boxes selected. FTP connection: Entering a value in minutes in this text box guarantees that the FTP client's connection to the remote site is terminated after the specified number of minutes have passed with no activity. FTP time out: In this text box, specify the number of seconds in which Dreamweaver attempts to make a connection with the remote server. If there is no response after the specified amount of time, Dreamweaver displays a warning dialog alerting you that a timeout has occurred. FTP transfer options: Enabling this check box guarantees that Dreamweaver will select the default option after the specified number of seconds when a dialog box appears during a file transfer and there is no user response. Firewall host: In this text box, enter the address of the proxy server through which you connect to outside servers if you are behind a firewall. Firewall port: Enter the port number your firewall uses to connect to the remote server. The default port number for FTP connections is 21. If yours is different, enter that value here. Put options: Enabling this check box guarantees that Dreamweaver will save the open file before "putting" to the remote server. Move options: Enable this check box if you want Dreamweaver to prompt you with a warning dialog when you attempt to move files on the remote server. Manage Sites: Clicking this button launches the Manage Sites dialog, where you can edit existing sites or create new ones.
The Status Bar Category In Chapter 2, "The Dreamweaver Interface," we discussed the Window Size and Download Time options located in the lower-right corner of the Document window (see Figure 5.22). Figure 5.22. The Window Size and Download Time options are integrated into the Document window. 
We discussed that these options allow you to set the width and height of the Document window according to the screen resolutions of your target audience. In addition, the Download Time status indicator calculates all the elements in the Document window and presents a time, in kilobytes, in which the page would take to download based on a connection speed set in the Status Bar category of the Preferences window (see Figure 5.23). Figure 5.23. The Window Size and Download Time options can be set in the Status Bar category of the Preferences window. 
A complete list of functionality exposed by the Status Bar category is given here: Window sizes: This menu lists all the common screen resolutions and the width and height settings Dreamweaver will use accordingly. If you'd like to add your own dimensions and description, place your cursor in the white area after the last entry for each column and enter a number value for width and height. The Description field is a free-form text field in which anything can be entered. Connection speed: Select a connection speed from this menu. Dreamweaver takes that value and divides it by the sum of the size of all the elements on the page. The time in seconds that the page would take to download is presented in the Download Time indicator on the Document Window's status bar.
The Validator Category You can use the Validator feature, available by choosing the Validate Markup option from the File, Check Page submenu to quickly locate tag and syntax errors in your code. The errors are presented to you in the Validation tab in the Results window. You can use the Validator category of the Preferences window, shown in Figure 5.24, to specify the tag-based languages against which the Validator should check, the specific problems that the Validator should check for, and the types of errors that the Validator should report. Figure 5.24. Use the Validator category to specify the tag-based languages against which the Validator should check. 
Specifying a language that the Validator should check against is merely a matter a checking the box for the specific language in the list box. You can further customize options for a specific language by clicking the Options button just below the list box. Shown in Figure 5.25, the Validator Options dialog allows you to customize what the Validator checks for and ultimately what is displayed by the Validator in the Validation tab in the Results window. Figure 5.25. Define the types of errors the Validator checks for and how errors are displayed using the Validation Options dialog. 
|
