Part of the task of creating a web site is to check that our web site looks and behaves as we expect. This is more difficult than it ought to be; each browser has its own quirks which mean that there can be subtle (and not so subtle!)
differences in the way our pages look in various browsers. There can even be differences between versions of the same browser.
Dreamweaver includes a number of tools that help with this process, but much of it is still our responsibility. These tools are accessed through the Res ults panel.
This panel is not usually displayed unless needed – it takes up quite a lot of screen space – but just as with other panels you can quickly display it through the Wi ndow menu.
Most tabs of the Res ults panel have a small green reveal button on the left-hand side that gives access to the features of a particular tool, and usually allows the settings of the tool to be changed.
7.2.1. Search
The search facility in Dreamweaver is extremely powerful. You can search any part or parts of your web site for any text, code or even specific tags. At the same time you can replace the searched for content with any other content that you specify.
The search dialog looks similar to those found in many other applications, with the added features of being able to specify where in your site to search, and the type of content you want to search for.
Using the Fi nd Nex t button in the dialog will take you directly to the next match.
Using the Fi nd All button will display in the Results panel a list of all the matches found. Double-clicking on an entry in the list will then take you directly to the location of the match.
Figure 12 The Find and Replace dialog 7.2.2. Reference
Built into Dreamweaver is the content of a dozen or so reference books, many taken from the excellent O’Reilly series of computer reference manuals. These are all accessed through the Referenc e tab of the Res ults panel.
You can select a reference book from a drop-down list, and then search through the book for a particular feature. For example, selecting the O’Reilly HTML Reference book, allows you to then select a particular HTML Tag and then access the description of the tag, or choose from a list of the attributes that it can take.
7.2.3. Validation
HTML and CSS were developed under the auspices of the World Wide Web Consortium (W3C), and there are published standards for each language that browsers should comply with. As with all standards there are some areas which are open to interpretation, and there are some browser developers who choose to implement their own features, or ignore parts of the standards. This explains why not all browsers render our pages in the same way.
The best we can hope for is to ensure that our pages meet the published standards with the expectation that browser versions will become more consistent in their implementations.
Earlier versions of Dreamweaver included a Validation tab in the Res ults panel where we could choose to validate our pages against the standards. This assumed, of course, that Adobe had correctly interpreted the standards! Most developers chose to validate their pages directly using a W3C tool. In Dreamweaver CS5 the tab is still there, but not functional!
Many web developers validate their pages at:
http://validator.w3.org/ for HTML validation and http://jigsaw.w3.org/css-validator/ for CSS validation 7.2.4. Browser compatibility
Many of the browser quirks are well known. Dreamweaver includes a database of the most important and uses this to give us an indication of which browsers may have problems with our pages.
Obviously, this database only knows about browsers and browser versions that were in existence when Dreamweaver was written. We can hope that newer browsers will become more consistent in their interpretations of the HTML and CSS standards. You can customise the settings for the tool, so that it checks only against particular browsers or browser versions.
The Adobe BrowserLab tool is extremely useful. It enables you to upload your web pages to the BrowserLab web site and preview the page in many of the popular browsers, on different platforms, without having to have these available locally. To use the service you need to register with Adobe and obtain an Adobe Liv e ID. The Brows erLab tool was briefly covered in a previous Dreamweaver session.
7.2.5. Link checker
One of the most irritating problems with web sites is clicking on a link that is broken, something that is guaranteed to make your visitors think less of your web site.
If you have created your links in Dreamweaver, and carried out all your file management using the Files panel, your links should all be valid. However, if you are maintaining a web site that was written in another tool, it is wise to check that all of the links work. You might even find it reassuring to do this for your
Dreamweaver created sites.
The link checker tool can check some or all pages. It not only checks links between pages, but also links to other files such as style sheets and images. The tool gives a list of problem links. Clicking on an entry in the list will open the web page at the link location, ready for you to fix it.
The link checker tool does not check links to external web sites, but one of the options is to list external files. You can then check these external links manually.
There are a number of tools that you can run independently of Dreamweaver which will check external links by visiting each one and seeing if there is a page at the other end. Of course, that tool can’t tell you whether it is the correct page!
A popular external link checking tool can be found at:
http://home.snafu.de/tilman/xenulink.html
7.2.6. Site reports
The Res ults panel tools we have looked at so far have each had their own tab, but there is a collection of extra tools under the Si te Reports tab.
The Site Reports tools are enabled using the options accessed through the green reveal button to the left of the panel. The dialog presents a list of reports that can be generated for the web site (Figure 13).
Figure 13 The Reports dialog