2.7 Hidden Objects

Hidden objects (a.k.a. invisible objects ) are objects that are not seen when the document is viewed in a web browser. Dreamweaver provides access to the following hidden objects through its interface:

• Comments

• Line Breaks and Nonbreaking Spaces

• Scripts

• Anchors (discussed earlier in this chapter)

Figure 2-23 shows the icons that act as placeholders for these and other invisible objects within Dreamweaver.

Figure 2-23. Icons for invisible objects

To make placeholders for hidden objects visible, ensure that the View Visual Aids Invisible Elements option is checked. Use View Visual Aids Hide All, Ctrl+Shift+I (Windows), or Cmd+Shift+I (Macintosh) to hide all visual aids temporarily.

2.7.1 Comments

Comments can be used to provide development notes about the HTML code for the benefit of future developers or for yourself, should you need to revisit some old code. Add comments to explain scripts, add instructions for use, or include notes for future development.

Comments are inserted using the Comment button in the Objects panel's Invisibles category or by selecting Insert Invisible Tags Comments. You can type comments directly into the Code pane, in the form:

<!-- This is a comment -->

Web browsers ignore everything between the leading <!-- and trailing --> characters, which delimit the comment. Multiline comments are allowed and take the form:

<!-- This is another comment that takes up multiple lines.
     It keeps going and going and going. -->

You should not nest comments. The following code is erroneous:

<!-- this is a <!-- nested --> comment -->

If you attempt to nest comments, the text following the first --> character combination will be displayed to the user.

Dreamweaver uses comments to track templates, library items, and Fireworks HTML, as discussed later. Use Dreamweaver's Design Notes, described in Chapter 6, to track design issues more efficiently.

2.7.2 Nonbreaking Spaces and Paragraph Breaks

Extra whitespace (spaces, tabs, and line breaks) within HTML source code is generally ignored unless the text is tagged with the <pre> tag. You can insert nonbreaking spaces, which will be honored by a browser, using the Insert Non-Breaking Space button in the Objects panel's Characters category. You can also use Insert Special Characters Non-Breaking Space, or Ctrl+Shift+Space (Windows), or Cmd+Shift+Space (Macintosh).

A nonbreaking space is represented by the character entity &nbsp;. Use tables instead of nonbreaking spaces to align text accurately.

You can also use the <br> and <p></p> tags to partially affect text placement. The <br> tag inserts a line break in the current line of text without creating a new paragraph, whereas the <p></p> tags delimit paragraphs. However, the rendering of these tags varies by browser and they are not a reliable way to control vertical whitespace. Again, use tables for more reliable formatting.

2.7.3 Script Tag

Dreamweaver provides its own set of JavaScript-enabled behaviors (discussed in Part III), but also provides a way to add and link to your own scripts. Add your own scripts by clicking the Script icon in the Objects panel's Invisibles category or by choosing Insert Invisible Tags Scripts.

The Insert Script dialog box allows you to select from four types of scripts:

JavaScript

Specifies any version of JavaScript. Use this option as the lowest common denominator if your code will run in any version of JavaScript.

JavaScript1.1

Use this option if your code requires JavaScript 1.1 or higher. It will be executed by browsers supporting JavaScript 1.1 or 1.2 (or higher), but not by browsers that support only JavaScript 1.0.

JavaScript1.2

Use this option if your code requires JavaScript 1.2 or higher. Browsers that don't support at least JavaScript 1.2 will ignore it.

VBScript

Specifies any version of VBScript. VBScript is supported by IE3+ for Windows or IE5+ on Mac. For broader compatibility, use JavaScript instead.

For JavaScript compatibility by browser, see Table 12-1.

Enter your script code within the Content area of the Insert Script dialog box, which will insert your code inside <script> tags as shown here:

<script type="text/JavaScript">
function DoItNow {
}
</script>

You can hide JavaScript code from older browsers by placing it in comment tags within your <script> tag as follows:

<script type="text/JavaScript">
<!--
  function WriteScreen(  ) {
    document.writeln("This is a simple script.");
  }
-->
</script>

Your page may not operate correctly in browsers (and some other HTML clients) that ignore scripts within comment tags. Furthermore, enclosing scripts within comment tags is not XHTML-compliant.

In this chapter we've covered the common elements you'll add to your HTML pages, including text, images, links, head content, and hidden objects. Chapter 3 explains how to use tables to control a web page's layout and how to use form objects to collect and submit data.