Getting your pages to look exactly the same across every browser in use on the Web is nearly impossible, unless you're willing to use only the simplest and most basic HTML formatting options. But such consistency is rarely worth losing the design benefits of CSS. Entire books and Web sites are dedicated to the best ways to design sites that look good on different browsers, especially when it comes to creating page designs with CSS.

If you want to create complex page designs with CSS and want your pages to look as good as possible on as many browsers as possible, a number of hacks, or workarounds, have been developed that can help ensure page designs look the same on a variety of browsers. Some of these tricks are relatively simple; others are extraordinarily complex, and unfortunately, every time a new version of a browser, such as IE or Firefox is released, those hacks will probably have to be adjusted. You find more information on designing CSS for different Web browsers in Chapter 7.

If you know that your visitors will be using only one browser — for example, if you're designing a corporate intranet and can require that all employees use Firefox 3 — your design work is simpler. Some public Web site designers resort to putting a note on the front page of a site advising anyone who visits that the pages display best in a particular browser. Although that may be warranted in some cases, I don't recommend it because you risk losing many potential visitors.

In addition to being able to preview a Web page in any Web browser on your hard drive, Dreamweaver also includes a Browser Compatibility feature that can help you test for known issues among different browsers automatically.

To use this feature, open a page in Dreamweaver and choose File

Figure 4-3. Access testing features, such as Check Browser Compatibility.

You can specify which browsers and browser versions you want to target by doing either of the following:

Figure 4-4. Specify the browsers and versions you want to target when you run a browser compatibility check.

If you're trying to rein in a chaotic Web site or if you just want to check a site for broken links, you'll be pleased to discover the Check Links feature. You can use Check Links to verify the links in a single file or an entire Web site, and you can use it to automatically fix all the referring links at once.

Here's an example of what Check Links can do. Assume that someone on your team (because you would never do such a thing yourself) changed the name of a file from new.htm to old.htm without using the Files panel or any of Dreamweaver's automatic link update features. Maybe this person changed the name using another program or simply renamed it in Explorer (Windows) or the Finder (Mac). Changing the filename was easy, but what this person may not have realized is that if he or she didn't change the links to the file when the file was renamed, the links are now broken.

If only one page links to the file that your clueless teammate changed, fixing the broken link isn't such a big deal. As long as you remember which file the page links from, you can simply open that page and use the Property inspector to reset the link the same way you created the link in the first place. (You can find out all the basics of link creation in Chapter 2.)

But many times, a single page in a Web site is linked to many other pages. When that's the case, fixing all the link references can be time-consuming, and forgetting some of them is all too easy. That's why the Check Links feature is so helpful. First, it serves as a diagnostic tool that identifies broken links throughout the site (so you don't have to second-guess where someone may have changed a filename or moved a file). Then it serves as a global fix-it tool. You can use the Check Links dialog box to identify the page a broken link should go to, and Dreamweaver automatically fixes all links referring to that page. The following section walks you through this cool process.

To check a site for broken links, follow these steps:

Figure 4-7. The report can be organized by broken links, external links, and unused files.

Broken links are one of the worst problems you can have on a Web site. After you identify a broken link in a site, fix it as soon as possible. Nothing turns off visitors faster than clicking a link and getting a File Not Found error page. Fortunately, Dreamweaver makes fixing broken links simple by providing quick access to files with broken links and automating the process of fixing multiple links to the same file.

After using the Link Checker tab described in the preceding section to identify broken links, follow these steps to use the Results panel to fix them:

Finding files by their addresses

If you're not sure where you saved a file or what you called it, but you can get to it with your browser, you can determine the filename and location by looking at the URL in the browser's address bar. Each folder in a Web site is included in the address to a page within that folder. Folder names are separated by the forward slash, /, and each filename can be distinguished because it includes an extension. For example, the URL in the browser's address bar of the page displayed in this figure tells me that the file is named index.html and is located in the kiev folder, which is a subfolder of the main folder for the Web site.

Similarly, you can identify the name and location of any image you're viewing on a Web page. If you're using Internet Explorer or Firefox, place your cursor over the image and right-click (Windows) or Control+click (Mac) and then choose Properties. The Element Properties dialog box includes the specific URL of the image, which has the name and folder (path). In the Element Properties dialog box shown in this example, you can see that the logo that appears in the top left of the page is ArtesianMedia-logo.jpg and is stored in an images folder. If you're using the Safari browser on a Mac, it works a little differently. Control+click an image and choose Open Image in New Window. In the new window, the image URL appears in the location bar.

If the link that you correct appears in multiple pages and you fix the link using the broken link's Results panel, Dreamweaver prompts you with a dialog box asking whether you want to fix the remaining broken link references to the file. Click the Yes button to automatically correct all other references. Click the No button to leave the other files unchanged.

To rearrange or rename files, follow these steps:

If you want to globally change a link to point at a new URL or to some other page on your site, you can use the Change Link Sitewide option to enter the new URL and change every reference automatically. You can use this option to change any kind of link, including mailto, ftp, and script links. For example, if an e-mail address that you use throughout your site changes, you can use this feature to fix it automatically — a real timesaver. You can use this feature also when you want a string of text to link to a different file than it currently does. For example, you can change every instance of the words Enter This Month's Contest to link to /contest/january.htm instead of /contest/december.htm throughout your Web site.

To change a collection of links with the Change Link Sitewide feature, follow these steps:

To make your life simpler, Dreamweaver incorporates FTP capability so that you can easily upload your pages to a remote Web server. The FTP options include features that can help you keep track of changes you make to files on your hard drive and ensure that they match the files on your Web server.

To upload your site using FTP, you need the following information from your Web hosting service:

To access the FTP features in Dreamweaver:

Now that your site is set up, upload pages on your server and retrieve them by using the built-in FTP capabilities of Dreamweaver.

To transfer files between your hard drive and a remote server, follow these steps:

One of the most valuable features in Dreamweaver's FTP options is the capability to automatically synchronize the files on your hard drive with the files on your server. This is cool because it helps you keep track of which pages you've edited and ensures that they've been updated on the server. This may not matter much to you the first time you upload your site, or if you have only a few pages in your site. But if you have a large site and make frequent updates, this feature is a wonderful way to make sure all the changes you make get to your server. Dreamweaver also confirms which files are updated after you complete the synchronization.

Follow these steps to synchronize your Web site:

The Testing Server option enables you to specify a development server, a necessary step if you're creating a Web site using the Dreamweaver dynamic page-creation features for developing sites using PHP, ASP, or ColdFusion. You find more information about using these options in Chapters 14 and 15.

The Check In/Out feature is designed to keep people from overwriting each other's work when more than one person is working on the same Web site (a valuable feature if you want to keep peace among all the members of your Web design team). When a person working on the Web site checks out a file, other developers working on the site can't make changes to that file. When you check out a file, a green check mark appears next to the filename in the Files panel. If someone else checks out a file, you see a red check mark next to the filename.

To enable the Check In/Out feature, follow these steps:

If you sometimes forget the details of your work or neglect to tell your colleagues important things about the Web site you're all working on, the Dreamweaver Design Notes feature may save you some grief.

Design Notes is ideal if you want to hide sensitive information from visitors, such as pricing structures or creative strategies, but make it available to members of your development team. Information saved as a Design Note in Dreamweaver can travel with any HTML file or image, even if the file transfers from one Web site to another or from Fireworks to Dreamweaver.

Essentially, Design Notes enable you to record information (such as a message to another designer on your team) and associate it with a file or a folder. Design Notes work a lot like the comment tag (HTML code that enables you to embed in a page text that won't appear in a browser) but with a bit more privacy. Unlike the comment tag, which is embedded directly in the HTML code of a page (and can be seen if someone views the source code behind a page on the Web), Design Notes are never visible to your visitors. The only way for a visitor to view Design Notes is to deliberately type the path to your notes subdirectory and view the notes files directly. You can even explicitly block this from being allowed, but only if you have administrative access to your server. To be even more secure, you can keep the notes on your hard drive and prevent them from ever being uploaded to your server — though, of course, your team members won't see your witty remarks.

Adobe Contribute is a program that was created so that people who don't know much about Web design can easily contribute to a Web site. Think of Contribute as sort of a Dreamweaver Light, except it doesn't work very well as a standalone program. Contribute was designed to work on sites designed in Dreamweaver, and a number of features have been carefully integrated to make that collaboration work smoothly. If you're working with other developers of a site who use Contribute, make sure you select the Enable Contribute Compatibility box in the Contribute category of the Site Definition dialog box.