Whenever you build a new website, you can almost guarantee that you will make mistakes and that there will be errors within the site that need to be fixed before it goes live. Adobe Dreamweaver has a number of tools for helping you to locate such errors and correct them. The program allows you to perform browser compatibility checks, locate broken links, orphaned files and locate syntax errors within your code.

Site testing should be an integral part of building a web site and not an isolated step which is performed after the site has been built. Every page that forms part of the site should function correctly in all its aspects in all of the browsers which the site is designed for. Using Adobe Dreamweaver’s various reports is a great way of ensuring that your site is error-free.

A key aspect of site testing is to preview your pages in as many browsers as possible. Dreamweaver’s Preview in Browser feature allows you to set up primary and secondary browsers and then add as many other browsers as you like. Each time you choose File – Preview In Browser, you can choose any of the browsers you have configured. You should also try to preview your web pages both on PCs and Macs. This multi-browser testing is particular important for testing that CSS and JavaScript is functioning correctly. What works well in one browser does not always work in another.

It is also very important to check both the text and the markup of each page. A simple omission made by many web developers is to check spelling. Naturally, this can be done in a word-processor such as Microsoft Word, prior to bringing the text into Dreamweaver. However, even in this scenario, it is quite typical to make further changes to your text within Dreamweaver. It is always a good idea, therefore, to run the spell-checker on every page. In Design mode, simply choose Check Spelling from The Command menu.

Broken links are another type of error which it is important to eliminate. These are, if nothing else, a potential cause of annoyance to your website visitor. Dreamweaver’s Link Checker will look for any links to pages that do not exist as well as locating orphaned pages; i.e., pages that do not have any links pointing to them and which will therefore not be found by your website visitors. To access Dreamweaver’s Link Checker, choose Check Links Sitewide from the Site menu.

When building websites with Adobe Dreamweaver, you will find yourself alternating between two main views of your web pages: files and document. The Files panel gives you an overview of the entire site and work with the entire site structure. It shows listings of the files in your local root folder and on your server. When you open any document, by contrast, you work on one HTML page at a time, adding and modifying content as necessary.

Once you have finished defining your site, Dreamweaver will open the Files panel automatically and the site you have just created will be the active site. You can also enter site Files view at any time by choosing Window – Files. You can activate a particular site by choosing its name from the site pop-up menu. You can also choose Site – Manage Site and then select the desired site name and click Done.

By default, the files panel shows two listings: on your right, the files in your local root folder are displayed; on your left are shown the files on your server. The toolbar above the file listing contains tools for uploading and downloading files to and from your server. Moving your mouse over an icon displays a tooltip explaining its function. The Connect button is used to establish a connection to the remote server. The Put button uploads the selected file(s) to the server. The Get button downloads files from the server.

Immediately after defining a new site, the next step is usually to create all of the HTML files your site will need together with any necessary subdirectories. To create a new file or folder in a particular folder, right click the name of the folder (or of one of the documents inside it) and choose New File or New Folder from the context menu. You can also highlight the relevant folder (or a document inside it) then choose New File or New Folder from the File menu. When creating documents, be sure to enter the necessary file extension: you may type either “.html” or “.htm”. Naturally, folder names do not need an extension.

One of the main benefits of creating all the files needed for a web site in Files panel view before beginning to edit any documents is that links between pages can then be created by browsing for the linked page which otherwise would not yet exist. Dreamweaver also has a useful Point to File facility whereby a link can be created by dragging from the link object to the linked file.

Next to each folder which contains items, Dreamweaver displays a plus sign (+) is shown. To display the contents of a folder, simply click once on the plus sign. When the contents of a folder are displayed, the plus sign changes to a minus. To hide the contents of a folder, click the minus sign.

Using Dreamweaver’s Files panel view is very similar to working in Windows Explorer or the Macintosh Finder. To delete a file or folder, click once on the item to highlight it then press Delete or Backspace. You can also right-click on the file or folder and choose Edit-Delete from the context menu. It is also important to remember that the site listing is a live indication of a section of your hard disk. When you delete a file or folder, you are deleting an item from your hard disk in real time.

To select a non-contiguous range of files and/or folders, click on the first item then, with the Control (Command) key held down, click on each of the items you wish to add to the selection. The items being selected can be in separate folders and you may collapse and expand folders during the operation without destroying the selection.

To change the name of a file or folder in Files panel view, click on it with the right mouse then choose Edit – Rename from the context menu. You can also click twice on the current name of the item, taking care that the two clicks are on slightly different parts of the name. The name will then be highlighted, ready to be edited.

The writer of this article is a developer and trainer with Macresource Computer Training, a UK IT training company offering Adobe Dreamweaver Classes in London and throughout the UK.

A web page is pure text and is therefore incapable of embedding images in the way that word processing documents can. Instead the page contains a reference to the image which enables the browser to locate and display the image when necessary. Images must be therefore be uploaded to the server along with the HTML pages. This can only take place properly if the images are located in Dreamweaver’s local root folder. Whenever you insert a graphic which is not located in the root folder of the active site, Dreamweaver displays a dialogue offering you the opportunity of saving this image in the current root folder. When this message appears, you should click the Yes button and save the image somewhere in the current root folder.

Dreamweaver Assets panel (Window – Assets) can also be used to insert images. Basically, the Assets panel displays elements which have already been used within your Dreamweaver site(s). Assets are arranged according to category: to change the category, simply click on one of the icons on the left of the panel. Images can be found in the first category. All existing image assets are available for use within your documents by simply dragging them onto a page.

If you ever need to change an existing image for an alternative, simply double-click the existing image. A dialogue labelled Select Image Source appears. This is the same dialogue which appears when the Insert Image command is used. Locate and double-click the replacement image.

As a general rule, images should be saved at the size at which they need to appear on the web page. However, where the same image appears on different pages at different sizes, it is useful to import the same image each time and resize it as necessary. This works best if the image is saved at the largest size required and reduced in size on those pages where it needs to smaller. To resize an image:

1. Highlight the image.

2. While holding down the Shift key, drag the bottom right corner handle towards or away from the centre of the image. (Holding down the Shift key retains the aspect ratio of the image.)

The term rollover image refers to the effect where an image changes appearance when the mouse passes over it. This effect is created with JavaScript. However, Dreamweaver uses visual tools to generate the necessary code.

1. Position the cursor where you want the image to go, then choose Insert – Interactive Images – Rollover Image.

2. Type in a name for the image.

3. Click the Browse button next to Original Image, then locate and double-click the appropriate image.

4. Repeat the above step for Rollover Image.

5. The final step is to create a hyperlink by clciking on the Browse button next to When Clicked Go To URL then locating and double-clicking the linked file.

The writer of this article is a trainer and developer with Macresource Computer Training, an independent computer training company offering Adobe Dreamweaver training courses at their central London training centre.

Not many people would argue that Adobe Dreamweaver is one of the most widely used web development packages around. It has gained its popularity by appealing to users with a varied variety of profiles. Its user-friendly interface appeals to inexperienced users with not much expertise of the technologies that underpin web pages. At the same time, it allows knowledgeable web developers to interact with code in a variety of handy ways.

Adobe Dreamweaver enables developers to create dynamic web sites whose content is derived from a data source. Such sites feature server-side pages, written in a scripting language such as PHP, ASP or ASP.Net, which need to be executed on the server. It is therefore vital to denote a testing server as part of the site setup while defining such sites within Dreamweaver.

A Microsoft invention, Active Server Pages (ASP) is one of the easiest such languages to configure. Now referred to as classic ASP to distinguish it from ASP.Net, the current incarnation of Active Server Pages, ASP was initially released in the late nineties and revolutionised the way in which web sites were developed. ASP is designed to run on Windows 2000 server and on Windows XP Professional. It is part of Internet Information Services (IIS), an optional Windows component. Once installed, IIS converts your PC into a web server running a default website located in a folder called “wwwroot” which can be accessed with the web address “localhost/”.

Once ASP is up and running, Adobe Dreamweaver CS4 is equipped to start creating dynamic web sites. The features to be had in Dreamweaver for generating the necessary server-side content are to be found in three panels: Databases, Bindings and Server Behaviors. The Databases panel is used to create connections to data sources. In the case of ASP, the most frequent solutions are Microsoft Access and the more powerful Microsoft SQL Server. As soon as a connection to the database is in place, the Bindings panel is used to retrieve data into a recordset. The dialogue box which Adobe Dreamweaver CS4 uses for creating recordsets automatically generates fragments of SQL as the user interacts with the related data objects. However, some familiarity with SQL (structured query language) is needed to be able to retrieve specifically the data necessary for a given recordset.

The Server Behaviours panel is where the majority of the action takes place: It contains a wide variety of pre-built scripts which can be used to add dynamic content to web pages. For example, the Insert Record server behaviour can be used to create a form which adds new records to a database table via a web page or it can be used to create an enquiries sheet which adds every enquiry to an enquires table and after that takes the visitor to a thank you page.

Adobe Dreamweaver templates are one of the most powerful development aids that the program contains. Basically, a template is a master design which can be copied repeatedly to generate an limitless number of web pages each one containing the same shared elements. Obviously, each time the template generates a new page, the page can be customised and the requisite elements added to it to make it unique. This is achieved by a technique of locked page regions and editable regions.

When the template is applied to a page, locked regions cannot be modified. (You have to return to the template to alter them.) Only the areas of the page designated as editable regions can have content added to them.

To create an editable region anywhere on the template, you simply position the cursor in the desired part of the layout and choose Insert – Template Objects – Editable Region. Enter a name for the new region and click OK. One frequent problem experienced by new users of Dreamweaver is the accidental positioning of and editable region inside a heading or paragraph tag. This means that when the template is applied to a page, only text can be placed in the editable region. To fix this problem, return to the template, click in the editable region and examine the Tag Selector on the left of the Status bar. Having located the offending tag (usually h1, h2, p, etc.), right-click on it and choose Remove Tag from the context menu.

To apply a template to an existing page, open the page and choose Modify – Templates – Apply Template to Page. Next, double-click on the name of the template to be applied. Strangely enough, there is no Dreamweaver command that enables you to apply a template to several pages at once. However, here are two suggestions for applying a template to multiple pages reasonably quickly.

Firstly, you can select multiple pages in the Files panel using the classic techniques of Shift-click or Control-click (Command-click on a Mac). Then, you can right-click one of the selected files and choose Open from the context menu to open all of them. Next, activate the Assets panel (Window – Assets) and click on the Templates button (the second icon from the bottom). Finally, drag the icon of the required template onto each of the open pages. To speed up the process, use Control-Tab to switch from page to page.

To create a page based on a template, choose New from the File menu and, when the New Document window appears, select the Page From Template option, click on the site that contains the template (It should already be highlighted.), then choose the template. To get the most benefit from a template, before clicking the Create button, make sure that the option “Update Page When Template Changes” is activated.

As you work on your web pages in Adobe Dreamweaver, you constantly need to review them in a web browser. To facilitate this process, Dreamweaver allows you to configure as many browsers as you would like to see use for previewing. You can specify one browser as your primary, or preferred, browser; you can then specify a secondary browser and as many additional browsers as you want.

Naturally, the first step is to make sure that the browser software is installed on your computer. Next, to specify your preferred browser, go to the Edit menu and choose Preferences. (This is the Windows location of Dreamweaver Preferences: on a Macintosh, go to the Dreamweaver menu and choose Preferences.)

The various categories are displayed on the left of the Preferences window. Choose the Preview in Browser category. You may have already configured a browser as your primary browser and possibly another as your secondary. If you wish to change this, simply click on the appropriate checkboxes to specify which is which.

If you would like to add an additional browser, just click on the plus sign (+), locate the browser software and double-click to open it. You can carry out this procedure as many times as you like.

To preview a page using one of your configured browsers, click on the preview icon (the globe) located on the Document toolbar which is normally displayed at the top of the document window. From the drop-down menu, choose the browser that you’d like to use. You can also use the keyboard shortcuts: to preview using your primary browser press Shift-F12 on Windows or option-F12 on a Macintosh; to preview in the secondary browser press Control-F12 on Windows or Command-F12 on a Macintosh. Alternatively, simply choose the name of any other browser.

Once you’ve looked at the preview, to return to Dreamweaver, simply close the browser window.

It is also possible that sometimes you’d like to preview pages without saving the changes you’ve made to your document. Dreamweaver makes this easy but, first, let’s have a look at what normally happens when you preview a file that has been modified.

Dreamweaver shows us a dialogue box asking us if we’d like to save the changes. If we click “No”, we are given a preview of the last version that was saved rather than the version that we’re currently working on. If we click “Yes”, Dreamweaver will save our changes before previewing the file. This behaviour can sometimes be inconvenient, since you may not be ready to save your changes.

If you’d like to preview files at any time without saving your changes, return to your Browser Preview section of Dreamweaver’s Preferences and activate the option “Preview Using Temporary File”. When this option is switched on, Dreamweaver will always create a temporary file containing the latest version of your document and then shows you a preview of it. When the browser window opens, look at the name of the file being previewed. It will be a temporary file name generated by Dreamweaver and not the name of document you are working on.