The Document Window


The single most important Dreamweaver window is the Document window. The Document window, simply put, is where all of the action happens and where all your creative energy will be focused as you develop websites and applications.

The versatility of the Document window is immediately noticeable when you place your cursor within the window and start typing. Although the Document window's job ranges from simple word processor to basic image editor, as you will see, it really combines those roles to deliver a familiar approach to web development. To aid you in that development, the Document window introduces the following functionality:

  • The Tabbed File Chooser: Dreamweaver allows you to open and work with multiple files simultaneously. You can navigate between files using the tabbed file chooser.

  • The Document Toolbar: Advanced features for working with the documents are located within this toolbar. Features such as customizing how you view and interact with the Document window's Code and Design views and accessibility options are located here.

  • The Standard Bar: Basic options for interacting with the current open window are located here. Features such as open, save, copy, and paste are all here.

  • The Status Bar: The status bar, located at the bottom of the Document window, includes functionality such as the Tag Selector, Document window zoom tools, the Hand tool, the Window Sizer menu, and the Download Time Indicator. Use any one of these tools for easier interaction between Code and Design views.

The Tabbed File Chooser

When multiple files are open within Dreamweaver, each document is separated by a tabbed menu near the top of the Document window. As shown in Figure 2.3, you can easily work with a different open documents by choosing the appropriate tab from the tabbed file chooser.

Figure 2.3. Swap between open documents by choosing the appropriate file from the tabbed file chooser.


You'll also notice that each tab contains an asterisk next to the filename. This is provided simply to alert you that either the file has not been previously saved or a change has been made to the file since the last save. Saving each document with a unique filename removes the asterisk icon from the tab.

You can also use the context menu for additional options within the tabs by simply right-clicking a tab. The context menu provides additional options for creating a new document, opening an existing document, closing an existing document, closing all documents, closing other documents except for the visible one, saving the document, saving a document with a specific name, saving all documents, or reverting to a previously saved document.

NOTE

Context menus are covered in more detail later in this chapter. For now, note that the context menu is accessible by right-clicking a window, panel, tab, or other object.


The Document Toolbar

The Document toolbar provides you with advanced functionality that would otherwise only be available from various other menus. Highlighted in Figure 2.4, the Document toolbar allows you to quickly control the visual dynamics of the page, check for accessibility and browsers errors, upload documents to a remote server, and more.

Figure 2.4. The Document toolbar allows you to control the visual dynamics of the Document window amongst other things.


NOTE

You can hide/display the Document toolbar by choosing View, Toolbars, Document.


As you can see from Figure 2.4, the Document toolbar's functionality can be broken down into the following categories:

  • Show Code, Split, and Design Views: With a click of a single icon, Dreamweaver allows you to quickly switch from design to code view or even a combination of both.

  • Live Data View: When a dynamic page is open in Dreamweaver, the live data view icon appears, allowing you to preview your page as if it were being run from a web server.

  • Title Bar: Allows you to add a unique title to your page.

  • Browser Compatibility Check: Displays a warning icon when Dreamweaver detects that the page structure will conflict with pre-configured target browsers.

  • File Management: Allows you to quickly retrieve from and upload to a remote server. Also provides you with the ability to check into or out of source control (covered with more detail in Chapter 4, "Dreamweaver Site Management."

  • Preview in Browser: This feature will launch your design within a pre-defined browser, allowing you to review your work.

  • Refresh Design View: When in split view, this icon, when clicked, refreshes the design view.

  • View Options: Provides numerous additional view options for both the code and design views. Options include viewing head content, rulers, guides, and more. In code view, these options change to allow word wrapping, line numbers, syntax coloring, and more.

  • Visual Aids: Options available within this menu allow you to control visibility of visual aids, table borders, frame borders, image maps, table widths, as well as various layout block options.

Now that you have a basic idea as to what features the Document toolbar provides, let's delve a bit deeper into the functionality that each feature exposes.

Show Code, Split, and Design Views

Whether you're a seasoned HTML developer or a converted print designer who prefers a visual representation of your web page, the Show Code, Split, and Design View options can accommodate your work style. Located in the top-left corner of the Document toolbar, the Show Code, Split, and Design View options allow you to work in the following views:

  • Code View: As Figure 2.5 shows, when the Code view button is selected, the Document window converts to an HTML editor.

    Figure 2.5. Switch to code view when you want to work with the code for your web page.


  • Design View: The Design view, which is the default view in which Dreamweaver opens, lets you visually add and place items in the Document window.

  • Split Code/Design View: As Figure 2.6 shows, the Split Code/Design view gives you the best of both worlds. Not only do you have the option of working with the document's HTML, you can also work within the visual editing environment at the same time.

    Figure 2.6. The Split Code/Design view affords you the best of both HTML authoring and visual designing worlds.


Live Data View

The Live Data view is a tremendous time saving feature for web application developers. Typically, a web application developer would have to save their work to a web server's root directory. Next, they would have to manually open a browser and locate the file in the web server's root before finally seeing the dynamic output generated by the web application. The Live Data view cuts all these steps to a mere click of a button.

As mentioned earlier, the Live Data view option is available only when a dynamic page is open. However, the button looks similar to the code, split, and design view buttons.

If working with the Live Data view seems a bit foggy now, don't worry, we'll be covering the Live Data view option with much more detail in Chapter 25, "Working with Dynamic Data."

The Title Bar

One of the most obvious features of your page is its title. This is the descriptive text that appears at the top of the browser window just to the right of the browser's icon similar to Figure 2.7.

Figure 2.7. The title of a page is shown at the top of the browser window.


The title of your page is the first item that appears in search engine results, so it's important that you add a good, descriptive title. Dreamweaver provides a few methods for adding the title to your page but none more obvious than the text box in the Document toolbar. By default, Dreamweaver places the text Untitled Document in the text box. To customize the text, simply place your cursor in the text box, change the text to something that best describes your page, and press Enter.

Browser Compatibility Check

One of the features I've been most excited about, dating back to its implementation in the previous release of Dreamweaver, is that of the Browser Compatibility Check built right into Dreamweaver's interface. This feature allows you to quickly check your pageand more importantly, the markup within your pageagainst a pre-configured browser type. In the past, Dreamweaver developers would have to install multiple versions of every browser, open their page within those browsers, check for inconsistencies and errors, and then make tweaks to fix the problems for the particular browser type. Although it's still important to check your page on various browsers for layout inconsistencies, the Browser Compatability Check can automatically detect inconsistencies, errors, and elements that are not supported in a particular browser version. All you have to do is provide the browser version to perform the check against, save your page, and then select the Check Browser Support option. Furthermore, the Browser Compatability Check also provides an Auto-check on Open option. Enable this option to have the Browser Compatability Check run automatically whenever you open pages.

Let's walk through an example together. To check the browser support for your page, follow these steps:

1.

Purposely add a bogus tag to your code by switching to code view and typing in the tag <zak> within the <body> tag as shown in Figure 2.8.

Figure 2.8. Add a tag to the code that doesn't exist in HTML.


2.

Now save your document by choosing File, Save.

3.

Click the Browser Compatibility Check icon and select the Check Browser Support option. The icon should immediately change from that with a green check mark to a yellow warning icon. If you hover your mouse over the icon, the tool tip should display Found 1 Browser Check Error, as shown in Figure 2.9.

Figure 2.9. Use the dynamic compatibility check option to check for browser errors.


4.

Now that you know you have an error, you can view the error by clicking the dynamic compatibility check icon again and selecting the Show All Errors option. This time, the Results window, shown in Figure 2.10, appears with the specific error and the browser versions that the error is not compatible with.

Figure 2.10. The Results window displays the browser versions that an error is not compatible with.


NOTE

Discussed later in the book, the Results window is a centralized location for performing searches, page validation, browser compatibility checks, checking links, creating site reports, and so on.


The Results window displays the browser versions that the page is not compatible with. You can configure the browser types and versions easily by clicking the dynamic compatibility check icon again and selecting Settings. The Target Browsers dialog appears, similar to Figure 2.11, allowing you to customize which browsers to target and more specifically which browser versions.

Figure 2.11. The Target Browsers dialog allows you to customize which browsers and browser versions to target.


File Management

Covered with more detail in Part III - Team Collaboration and Task Automation, the File Management option allows you to quickly upload to and retrieve files from your remote server, check in and check out files from source control, maintain design notes, and more. A quick list of the features in this menu is given here:

  • Turn Off Read Only: Turns off the read only attribute for a file.

  • Get: Gets the most recent version of a file from the remote server.

  • Check Out: Checks out a file from source control with full permissions.

  • Put: Puts the most recent version of a saved file to the remote server.

  • Check In: Checks a file back into source control.

  • Undo Check Out: When working in a team collaborative environment and source control is enabled, choose this option when changes have been made that you regret. This option undoes the check out status and reverts the file back to its original state.

  • Design Notes: When design notes are enabled for a site, this option allows you to maintain design notes for the current page.

  • Locate In Site: After a site has been defined (covered in Chapter 3, "Building a Web Page"), this option allows you to locate the saved version of the open file in the site file list.

Preview In Browser

A developer's best friend, the Preview in Browser option allows you to quickly preview your page in the browser window. To see this feature in action, click the Preview in Browser icon and choose Preview In <your browser>. Immediately your page appears within the browser of choice.

NOTE

Because we use the Preview in Browser feature in nearly every example in this book, it's important to mention that pressing F12 is the shortcut for previewing your page in the primary browser.


In Chapter 5, "Defining Preferences," we'll walk through the process of configuring the browsers to display in this list.

Refresh Design View

While in Split Code/Design view, you can use the Refresh Design View option to refresh the Design view as you make changes to the code. As Figure 2.12 indicates, even though I've added some valid code to my page, the design isn't rendered in Design view until I've actually clicked the Refresh Design View icon.

Figure 2.12. The Refresh Design View option allows you to make changes to the code and then display them in the designer when you're ready.


NOTE

At first glance, the Refresh Design View feature might not make a whole lot of sense. To understand why this is even a feature is to understand how HTML works. Because HTML requires open and close tags and even nested tags in between, it would be nearly impossible for Dreamweaver to render HTML in the designer before you've actually completed working with the tag's structure. For this reason, Dreamweaver lets you complete your tag and then allows you to refresh the designer to view the changes.


View Options

You can use the View Options menu to configure viewing preferences within your page. Depending on which view you're currently in (Code, Split, or Design), the View Options menu tailors itself accordingly. If you're in Code view, the View Options menu displays the options shown in Figure 2.13.

Figure 2.13. The View Options menu in Code view.


The View Options menu in Code view supports the following options:

  • Word Wrap: When this option is checked, code wraps to the next line when it reaches the end of the development window.

  • Line Numbers: When this option is checked, line numbers appear in the leftmost gutter (highlighted in blue).

  • Hidden Characters: When this option is selected, line breaks, similar to those in a word processor, are displayed within the code. It's important to note however, that even when these hidden characters are visible in Code view, they are still not shown in the browser.

  • Highlight Invalid Code: When this option is checked, all invalid code is highlighted in yellow.

  • Syntax Coloring: Checking this option enables various colors to be associated with different tags. You can configure these colors in the Preferences dialog, as described in Chapter 5, "Defining Preferences."

  • Auto Indent: Checking this option automatically causes child tags to indent under the parent tags. For example, with this option enabled, the <td> and <tr> tags are shown indented under the parent <table> tag.

If you're in Design view, the View Options menu displays the options shown in Figure 2.14.

  • Head Content: When this option is selected, the Head Content menu appears just below the Document toolbar. The Head content menu, discussed later in this chapter, allows you to add and customize <head> tag-specific items such as the title, scripts, styles, meta tags, and so on.

  • Rulers: When this option is selected, rulers become visible on the page, making it easier to see the dimensions of the page in terms of pixels.

  • Grid: Selecting this option displays a grid in the background of the page. This visual feature makes positioning elements easier for a developer.

  • Guides: When rulers are visible, you can use this option to drag visual guides into the Document window. Similar to image editing and print publishing programs, guides are a handy feature that allow you to position elements on the page based on guide placement. Guides are a new addition to Dreamweaver 8.

  • Tracing Image: Discussed with greater depth in Chapter 11, "Layers in Dreamweaver," a tracing image is merely a completed prototype added to the page as a background to aid in the positioning of elements in the designer.

Figure 2.14. The View Options menu in Design view.


If you're in Split Code/Design view, the View Options menu displays the options shown in Figure 2.15. As you can see, the options for both Code and Design view are combined into one menu. The only other feature that is added is the Design View on Top option. Selecting this option allows you to position the Design window on the top and the Code window on the bottom or vice versa.

Figure 2.15. The View Options menu in Split Code/Design view.


Visual Aids

The Visual Aids menu, like the View Options menu, allows you to customize how specific visual aids are displayed or not displayed in the Document window.

A visual aid constitutes any piece of functionality within the Document window that aids in viewing elements that would otherwise not be shown within the browser. For instance, if you create a new table in the Document window with a border of 0 pixels, it would be difficult to add elements in the cells of that table because a border doesn't exist to allow you to see the boundaries of the specific cells. As an aid, Dreamweaver adds a temporary border at design time to allow you to visually see the outlining boundaries of the table's cells. At runtime, however, your table will still appear borderless. This temporary border that Dreamweaver adds is considered a visual aid.

Like the table example, Dreamweaver includes visual aids for other pieces of functionality. These visual aids are available in this menu and are outlined next:

  • Hide All Visual Aids: Select this option to hide all visual aids in the Document window.

  • Layout Block Options: As you will see in Chapter 7, "Advanced Page Formatting Using Style Sheets," a layout block is an HTML element that can be positioned anywhere on your page simply by dragging the element around the Document window. Specifically, layout blocks are <div> tags that include the display:block, position:absolute, or position:relative attribute style. Although Dreamweaver provides numerous visual aids for viewing layout blocks, none are more obvious than the ones listed in this menu. For instance, you can choose the Layout Block Outlines option to show the outlines of all layout blocks on the page. You can also choose the Layout Block Backgrounds option to show or hide the assigned background colors for each layout block on the page. Finally, you can choose the Layout Block Box Model option to show or hide padding, margins, and so on for a selected layout block.

  • Layer Outlines: Layout blocks, also known as layers in Dreamweaver, are similar to layers in print publishing programs in that they can be dragged and moved around freely on the page. Because layers are borderless by default, you can choose this option to temporarily show or hide the outline/border for the layer.

  • Table Widths: A visual aid, discussed with more detail in Chapter 6, "Web Page Structuring Using Tables," table widths allow you to quickly see and manipulate the width of an entire table or the individual columns within a table.

  • Table Borders and Frame Borders: As mentioned earlier in this section, choose the Table Borders option to show or hide the temporarily assigned border to a table when the border attribute is set to 0. You also can show or hide frame borders when the border attribute of a frame is set to 0.

  • Image Maps: Choose this option to show or hide image maps on the page. This feature is discussed with more detail in Chapter 3, "Building a Web Page."

  • Invisible Elements: Some HTML elements don't have visual representations in a browser. For example, anchor tags don't appear in browsers. However, it can be useful while you're creating a page to select such invisible elements, edit them, move them, and delete them. If this is the case, you can select this option to show invisible elements and then make the necessary edits.

The Standard Toolbar

The Standard toolbar (see Figure 2.16), available by selecting View, Toolbars, Standard, provides basic file-based operations such as these:

  • New: Opens the New Document dialog, which allows you to quickly create a new document.

  • Open: Allows you quickly open an existing document.

  • Save: Saves the current document.

  • Save All: Saves all open Document window instances.

  • Print Code: Prints the code as it's formatted in Code view.

  • Cut: When an element is selected, this option allows you to cut it.

  • Copy: When an element is selected, this option allows you to copy it.

  • Paste. Allows you to paste a previously cut or copied element.

  • Undo: Undoes a current operation.

  • Redo: Redoes a previous operation.

Figure 2.16. The Standard toolbar allows for quick and visual selections of file-based operations such as copy, paste, and save.


TIP

Screen real estate is a developer's best friend. I typically turn this toolbar off because all its options are also available from either the File or Edit menu.


The Style Rendering Toolbar

The Style Rendering toolbar, available by selecting View, Toolbars, Style Rendering, contains buttons that let you see how your design would look in different media types including:

  • Screen: When enabled, this button shows you how your page will look on a typical computer screen. This is the default option.

  • Print: When selected, this button shows you how your page will look on a printed piece of paper.

  • Handheld: When selected, this button shows you how your page will look on a handheld device such as a cell phone or PocketPC.

  • Projection: When selected, this button shows you how your page will look on a projection device.

  • TTY: When selected, this button shows you how your page will look on a teletype machine.

  • TV: When selected, this button shows you how your page will look on a television screen.

The Style Rendering toolbar also includes a button that allows you to turn CSS (Cascading Style Sheets) on and off. Simply select it to choose between the two modes. This option is covered in more detail in Chapter 7, "Advanced Page Formatting using Style Sheets."

The Status Bar

The status bar, located at the bottom of each Document window instance, exposes numerous features for working with the web page. Options include a Tag Selector for viewing and selecting from the hierarchy of HTML tags based on your cursor's position, a set of zoom tools for zooming in and out of the Document window, and a window size and download time indicator that allow you to physically change the viewable size of the page as well as see how long your page will take to view in a target audience's browser based on the total size (in kilobytes) of the elements contained within the page.

The Tag Selector

The Tag Selector displays a cleanly formatted hierarchal view of the tags from the position of your cursor. Think of the Tag Selector as night vision goggles while you're in Design view. Because you can't see the tags you're currently working in while in Design view, the Tag Selector displays them for you and even better, allows you to quickly modify them without ever switching to Code view. To see the Tag Selector in action, simply follow these steps:

1.

Make sure that you are in Design view and quickly insert a new table by choosing Insert, Table. When the Table dialog appears, modify some of the values and click OK. (Right now, it's not important what you specify in the dialog's text boxes.)

2.

With the table now in Design view, place your cursor in a cell and observe the Tag Selector. As you can see from Figure 2.17, the Tag Selector displays the hierarchical list of tags with the tag your cursor is currently in highlighted.

Figure 2.17. The Tag Selector displays a hierarchal list of tags, even highlighting the tag that your cursor is currently in.


You can even use the context menu (right-click a tag in the Tag Selector) for complete control over the selected tag, including access to the following options:

  • Remove Tag: Removes the selected tag.

  • Quick Tag Editor: Allows you to edit attributes within a tag.

  • Set Class: Allows you to set a CSS class for a tag.

  • Set ID: Allows you to set a CSS ID for a tag.

  • Collapse Full Tag: Collapses the tag in Code view.

  • Collapse Outside Full Tag: Collapses the parent tag of the currently highlighted tag. For instance, if my cursor is in a table cell, selecting this option collapses the <body> tag because the existing <table> tag is nested within it.

As an example of how to use the context menu on a tag, I'll quickly right-click the <table> tag and choose the Quick Tag Editor option. As you can see from Figure 2.18, the Quick Tag Editor appears, with the tag and attributes for the tag pre-populated.

Figure 2.18. The Quick Tag editor allows you to quickly preview the structure of a tag and make quick edits.


Next, I'll add the bgcolor="red" attribute and value and press Enter. The table's background color in the Document window now has a red background.

Zoom Tools

Just to the right of the Tag Selector hierarchy is a new set of tools included with Dreamweaver 8 that allow you to zoom in and out of the Document window. Also shown in Figure 2.19, the zoom toolset includes a pointer icon, a hand tool for moving the page around within the Document window when zoomed in, a magnifying glass for zooming into the page (hold down the Alt key to zoom out), and a zoom percentage menu that allows you to quickly zoom into a specific value.

Figure 2.19. Use the zoom toolset to zoom in and out of the Document window.


Window Size and Download Time

You can use the Window Size option, located in the bottom right corner of the Document window to set the Document window's width and height while in development mode to design your pages based on a target browser resolution. For instance, latest browser studies have shown that as long as you develop for 800x600 browser resolutions, at least 95% of your viewers will be able to see your page without scrolling horizontally. Because this is the case, you can set up your development environment to keep this size in mind. To change your development window to accommodate 800x600 screen resolutions, simply follow these steps:

1.

Select the Restore Down option located in the top-right corner of the Document window.

2.

With the window floating, the Window Size option should now be selectable. Choose the 760x420(800x600) option as shown in Figure 2.20.

Figure 2.20. The Window Size menu allows you to configure the development environment to better target your users' browsers.


3.

The window resizes itself to accommodate the new size.

The Window Size option simply calculates the total size (in kilobytes) of text and images on the page, divides it by a specific bandwidth target, and presents the estimated download time. In Chapter 5, "Defining Preferences," we'll review options for defining the bandwidth target as well as defining your own custom window sizes.




Macromedia Dreamweaver 8 Unleashed
Macromedia Dreamweaver 8 Unleashed
ISBN: 0672327600
EAN: 2147483647
Year: 2005
Pages: 237
Authors: Zak Ruvalcaba

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