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 ChooserWhen 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 ToolbarThe 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:
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 ViewsWhether 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:
Live Data ViewThe 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 BarOne 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 CheckOne 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:
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 ManagementCovered 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:
Preview In BrowserA 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 ViewWhile 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 OptionsYou 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:
If you're in Design view, the View Options menu displays the options shown in Figure 2.14.
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 AidsThe 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:
The Standard ToolbarThe Standard toolbar (see Figure 2.16), available by selecting View, Toolbars, Standard, provides basic file-based operations such as these:
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 ToolbarThe 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:
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 BarThe 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 SelectorThe 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:
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:
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 ToolsJust 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 TimeYou 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:
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. |