Even before you choose the overarching structure for your site (as discussed in the following sections), you need to address the all-important issues of message, audience, and budget.

Many Web professionals borrow a technique used extensively in developing other mass-marketing forms: storyboarding. Storyboarding for the Web entails first diagramming the various pages in your site—much like the more traditional storyboarding in videos or filmmaking—and then detailing connections for the separate pages to form the overall site. How you connect the disparate pages determines how your visitors navigate the completed Web site.

The following sections describe the basic navigational models. The Web designer should be familiar with them all because each one serves a different purpose, and they can be mixed and matched as needed.

The linear approach

Prior to the World Wide Web, most media formats were linear—that is, one image or page followed another in an unalterable sequence. In contrast, the Web and its interactive personality enable the user to jump from topic to topic. Nevertheless, you can still use a linear approach to a Web site and have one page appear after another, like a multimedia book.

The linear navigational model, shown in Figure 5-1, works well for computer-based training applications and other expository scenarios in which you want to tightly control the viewer's experience. Some Web designers use a linear-style entrance or exit from their main site, connected to a multilevel navigational model. With Dynamic HTML, you can achieve the effects of moving through several pages in a single page through server-side processing.

Figure 5-1. The linear navigational model takes the visitor through a series of Web pages.

Warning

Keep in mind that Web search engines can index the content of every page of your site separately. Each page of your site—not just your home page—becomes a potential independent entrance point. Therefore, make sure every page includes navigation buttons back to your home page, especially if you use a linear navigational model.

The hierarchical model

Hierarchical navigational models emerge from top-down designs. These start with one key concept that becomes your home page. From the home page, users branch off to several main pages; if needed, these main pages can, in turn, branch off into many separate pages. Everything flows from the home page; it's very much like a company's organizational chart, with the CEO on top followed by the various company divisions.

The hierarchical Web site, shown in Figure 5-2, is best known for maintaining a visitor's sense of place in the site. Some Web designers even depict the treelike structure as a navigation device and include each branch traveled as a link. This enables visitors to quickly retrace their steps, branch by branch, to investigate different routes.

Figure 5-2. A hierarchical Web layout enables the main topics to branch into their own subtopics.

The spoke-and-hub model

Given the Web's flexible hyperlink structure, the spoke-and-hub navigational model works extremely well. The hub is, naturally, the site's home page. The spokes projecting from the center connect to all the major pages in the site. This layout permits quick access to any key page in just two jumps—one jump always leading back to the hub/home page and one jump leading in a new direction. Figure 5-3 shows a typical spoke-and-hub structure for a Web site.

Figure 5-3. This storyboard diagram for a zoo's Web site shows how a spoke-and-hub navigational model might work.

The main drawback to the spoke-and-hub structure is the required return to the home page. Many Web designers get around this limitation by using frames to make the first jump off the hub into a Web page; this way, the navigation bars are always available. This design also enables visitors using nonframes-capable browsers to take a different path.

The full Web design

The seemingly least structured approach for a Web site—full Web—takes the most advantage of the Web's hyperlink capabilities. This design enables virtually every page to connect to every other page. The full Web design, shown in Figure 5-4, works well for sites that are explorations of a particular topic because the approach encourages visitors to experience the site according to their own needs, not based on the notions of any one designer. The danger in using full Web for your site design is that a visitor can literally get lost. As an escape hatch, many Web designers include a link to a clickable site map, especially for large-scale sites using this design.

Figure 5-4. In a full Web design, each page can have multiple links to other pages.

There are two main paths through the Site Definition Wizard:

To keep things simple, I've written a separate procedure for each of these paths, which I provide in the following sections. Be sure to choose the correct path before you launch into your site definition!

Advanced mode comprises eight categories of information: Local Info, Remote Info, Testing Server, Cloaking, Design Notes, Site Map Layout, File View Columns, and Contribute. Note that only the first three categories—Local Info, Remote Info, and Testing Server—are essential for site definition. Once I became familiar with the interface, I found Advanced mode to be much easier to navigate than Basic mode.

The three main steps to defining a site in Dreamweaver are

After your site is on your Web server and fully operational, it consists of many files—server-side pages, plain HTML, graphics, and other media files—that make up the individual Web pages. All these associated files are kept on the server in one folder, which may use one or more subfolders. This main folder is called the remote site root. In order for Dreamweaver to properly display your linked pages and embedded images—just as they are displayed online—the program creates a mirror of your remote site on your local development system. This primary mirror folder on your system is known as the local site root.

You must establish the local site root at the beginning of a project. This ensures that Dreamweaver duplicates the complete structure of the Web development site when it comes time to publish your pages to the Web. One of Dreamweaver's key site-management features enables you to select just the HTML pages for publication; Dreamweaver then automatically transfers all the associated files, creating any needed folders in the process. The mirror images of your local and remote site roots are critical to Dreamweaver's capability to expedite your workload in this way.

Tip

If you do decide to transfer an existing Web site to a new Dreamweaver local site root, run Dreamweaver's Link Checker after you've consolidated all your files. Choose Site

To set up a local site root folder in Dreamweaver, follow these steps:

In addition to defining the local site root, you must specify information pertaining to the remote site. The remote site may be a folder accessed through the local network or via FTP (File Transfer Protocol). If your remote site is located on the local network—in this arrangement, the remote site is often said to be on a staging server—all you do is select or create the particular folder to house the remote site. At the appropriate time, the network administrator or other designated person from the Information Technology department exports the files from the staging server to the Web or intranet server.

If, on the other hand, you post your material to a remote site via FTP, you need various bits of information to complete the connection. In addition to the FTP host's name—used by Dreamweaver to find the server on the Internet—you also need, at a minimum, the user name and password to log on to the server. The host's technical support staff can provide you with this and any other necessary information.

To enter the remote site information, follow these steps:

The final primary element for defining sites using the Advanced tab is supplying the server application information. One key aspect of Dreamweaver's power is its capability to create the same application for different server models using different scripting languages. The Live Data Preview—which enables designers to work with data directly from the data source—is another unique Dreamweaver feature. Settings in the Testing Server category of the Site Definition dialog box control both of these features.

To set the Testing Server options, follow these steps:

Whether or not you define a site, you create, edit, and remove server connections by using the Manage Sites dialog box. The type of remote access—FTP or RDS—you choose for a server determines how the connection is listed. Connections using FTP are listed with an ftp:// preface, whereas those using RDS start with rds://, as in rds://myclientserver.

To set up an FTP server connection, follow these steps:

To set up an RDS connection to a ColdFusion server, follow these steps:

When you're finished defining either an FTP or RDS server, you can continue managing your sites and server connections or click Done to close the Manage Sites dialog. If a server is selected when you close the dialog, Dreamweaver connects to the server and displays the available files in the Files panel.

After being defined, all the servers are listed along with the sites in the Files panel pop-up menu. As noted earlier, the type of server is used as a preface to the defined name. Thus, all the FTP servers are grouped together as are all the RDS servers; servers are listed above the standard site list in the pop-up menu, as shown in Figure 5-13. Choose any server from the list to open a connection and list the files. After the files are listed, you can choose any one just as you would select a file from a defined site, by double-clicking the filename to open the file. Dreamweaver automatically downloads the file and any dependent files, such as images, needed to render the page.

Figure 5-13. All server connections are found above the defined sites in the Files panel pop-up.

In addition to sites and server connection, the Files panel also provides access to local and mapped network drives. You find the additional connections at the top of the pop-up list, above the defined sites and servers.

After you finish modifying the page, choose File

Start Dreamweaver as you would any other program. Double-click the Dreamweaver program icon, or single-click if you are using Internet Explorer's Desktop Integration feature in Windows or if you have Dreamweaver's icon in your Dock on OS X. After the splash screen, Dreamweaver opens with the Welcome Screen, which lists 10 of your previously opened documents and also offers a full range of new document types. Choose HTML from the Welcome Screen to create a new blank page. This page is created from the Default.html file found in Dreamweaver's Configuration/DocumentTypes/NewDocuments folder. Of course, you may want to replace the original Default.html file with one of your own—perhaps with your copyright information. All your blank pages are then created from the template that you've designed.

To open an existing file that belongs to a site you've defined in Dreamweaver, select the site in the Files panel and double-click the file icon. Recently opened files, regardless of their origin, are available through the Welcome Screen or from the File

To open an existing file that does not belong to a site defined in Dreamweaver—or that was created in a different program—choose File

Tip

You can enable/disable Dreamweaver from automatically repairing HTML syntax errors in your files when it opens them. Choose Edit

To add an entry, place your cursor at the end of the line above where you want your new file format to be placed, and press Enter (Return). Type in your file extension(s) in capital letters followed by a colon and then the text description. Save the Extensions.txt file and restart Dreamweaver to see your modifications.

HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,AS,ASC,ASR,XML,XSL,XSD,DTD,
XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,CFM,CFML,CFC,
TLD,TXT,PHP,PHP3,PHP4,PHP5,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,
JAVA,EDML,MASTER:All Documents
HTM,HTML,HTA,HTC,XHTML:HTML Documents
SHTM,SHTML,STM,SSI,INC:Server-Side Includes
JS:JavaScript Documents
XML,DTD,XSD,XSL,XSLT,RSS,RDF:XML Files
LBI:Library Files
DWT:Template Files
CSS:Style Sheets
ASP,ASA:Active Server Pages
ASPX,ASCX,ASMX,CS,VB,CONFIG,MASTER:Active Server Plus Pages
CFM,CFML,CFC:ColdFusion Templates
AS:ActionScript Files
ASC:ActionScript Communication Files
ASR:ActionScript Remote Files
TXT:Text Files
PHP,PHP3,PHP4,PHP5,TPL:PHP Files
LASSO:Lasso Files
JSP,JST:Java Server Pages
JSF:Fireworks Script
TLD:Tag Library Descriptor Files
JAVA:Java Files
WML:WML Files
EDML:EDML Files
VBS:VBScript Files
VTM,VTML:VTML Files

You can work on as many Dreamweaver files as your system memory can sustain. When you choose File

Each time you open a new file, Dreamweaver temporarily names the file Untitled-n, where n is the next number in sequence. This naming convention prevents you from accidentally overwriting a new file opened in the same session.

Saving your work is very important in any computer-related task, and Dreamweaver is no exception. To initially save the current file, choose File

By default, all HTML files are saved with an .htm filename extension. Different file formats are saved with different extensions; XML documents, for example, are stored with an .xml extension. To save your file with another extension, such as .shtml or .xhtml, change the Save as Type option to the specific file type and then enter your full filename with the extension.

The section "Working Directly with Servers" described how Dreamweaver automatically transfers a modified file to a defined server when you are working in a siteless mode. But do you know that you can also store files on any server?

The capability to save to a remote server comes in handy in a number of situations. If a designer has files to work on locally and the connection information needed for uploading them, he doesn't need to create a local site. All he needs is a connection to the server and the knowledge of where the file should be stored. Because the designer is working without a locally defined site, the file must be saved in a particular location.

To save a file on a remote server, follow these steps:

Dreamweaver transfers the current file as well as any dependent files.

When you're done working on a file, you can close it by choosing File

When you're finished working for the day—or, more often, the late, late night—you can close Dreamweaver by choosing File

Dreamweaver offers a wide range of starting points through the New Document dialog box: you can start off with anything from a completely blank page to the basic HTML code to a fully CSS compliant, 3-column elastic design with header and footer.

Note

The entire New Document dialog box has been redesigned for Dreamweaver CS3, with a great deal of new content to fill it. All of the layouts listed when the Blank Page

To create a new document using the New Document dialog box, follow these steps:

If you want to create a new document based on a custom template, use the Page from Template—rather than the Blank Page—category. For more information on creating and using templates, see Chapter 28.

If you often create one type of document—HTML or ColdFusion files, for example—you can take advantage of Dreamweaver's default document feature to save yourself some document creation time and trouble. By using the techniques described in this section, you can open a new document of your default type (HTML, ColdFusion, and so on) with one quick keyboard shortcut—in other words, without having to work your way through the New Document dialog box.

To create a new default document, follow these steps:

After you've established your local site root—and you've included your remote site's FTP information in the setup—the actual publishing of your files to the Web is a very straightforward process.

Putting and getting files to and from your server, while easy, can be incredibly time-consuming. Dreamweaver frees its users from the drudgery of waiting for files to transfer through its background FTP feature. Uploading and retrieving files is a separate computer process in Dreamweaver, distinct from working in Design and Code view. When you initiate a publishing event, the Background File Activity dialog box with a small progress bar appears, as seen in Figure 5-18. You can dismiss the dialog by clicking Hide; when hidden, file activity can be seen in the bottom of the Files panel. An ongoing log is shown when you click Details, and can be saved when the transfers have been completed by clicking Save Log.

Figure 5-18. Dreamweaver transfers files through a background FTP process so you can continue working while files are being published.

To transfer your local Web pages to an online site, follow these steps:

Remember that the only files you have to highlight for transfer to the remote site are the HTML files. As noted previously, Dreamweaver automatically transfers any dependent files (if you allow it), which means that you'll never forget to move a GIF again. (Nor will you ever move an unnecessary file, such as an earlier version of an image, by mistake.) Moreover, Dreamweaver automatically creates any subfolders necessary to maintain the site's integrity. Combine these two features to save substantial time and worry.

Now you have made your site a reality, from the planning stages to the local site root and onto the Web. Congratulations—all that's left is to fill those pages with insightful content, amazing graphics, and wondrous code.

Like all data transfers on the Internet, FTP file transfers sometimes go awry: Servers are busy or down, file/directory permissions are improperly set, passwords are misspelled, and so on. If you run into an FTP transfer problem with your Dreamweaver Put File(s) or Get File(s) command, you can use the FTP Log panel to find out exactly what went wrong.

The FTP Log panel displays all your FTP file-transfer activity. To display the FTP Log panel, first choose Windows

FTP logs may seem complex and indecipherable, but the information they contain is invaluable for troubleshooting FTP errors. Figure 5-20, for example, displays the FTP log that results from Putting (uploading) a file to a remote server.

Figure 5-20. The FTP Log generates a blow-by-blow description of actions taken.