The main challenge in CSS web page layout is positioning blocks of content in different parts of the browser window. The key HTML element used to achieve this is the DIV element (short for DIVISION). The DIV element is pure vanilla: it has no inherent properties or sub-elements (unlike the TABLE element which was originally used for web page layout). It is a block element which can contain any web page content, including other DIVs.

Groups of related elements within the HTML page are placed within the various DIVs. For example, there might be a DIV containing a logo or banner, another containing navigation links, another containing the main content of the page, and so on. Another common practice is to place all DIVs inside an outer or wrapper DIV which acts as the overall container for the page content. Key attributes such as width and alignment can then be applied to this wrapper.

When controlling DIVs with CSS, the key DIVs being used for page layout will normally be given a unique ID; for example, div ‘id=”leftCol”‘. IDs can only occur once within an HTML page and can therefore be referred to in the CSS code; for example ‘#leftCol…’. Some subordinate DIVs (i.e. those contained within the main DIVs) will share attributes with several other DIVs on the page. These will be defined as a class in both the HTML page; e.g. ‘div class=imageLeft’ and in the CSS style sheet; e.g. ‘.imageLeft…’.

You will generally set the overall width you want your page content to occupy by setting the width of the outer wrapper DIV which contains the entire page. The width that you choose will depend on the typical monitor resolution used by your anticipated audience. The lowest common denominator is probably 800 x 600 pixels but many designers are now assuming 1024 x 768. Bear in mind that these pixel dimensions represent the entire screen. The actual web content will occupy only some of this. For this reason, designers usually use a width of 760 pixels when targeting the smaller resolution and 950 pixels when targeting the larger.

You can specify the dimensions of your content in two ways in CSS: using a fixed measurement or using percentages. Using pixels to specify the width you want your content to occupy offers you more control over your design but it can be inconvenient for visitors to your website. If their monitors are larger than your specified width, there will be a lot of wasted space. Those whose monitors are not as wide as your content will have to constantly scroll left and right to read your pages and who can blame them if they lose patience and go elsewhere. Percentage-based design is often referred to as liquid in that the content will simply readjust to fill as much of the available space as you specify.

Author is a developer and trainer with Macresource Computer Training, a UK IT training company offering ASP.NET Classes at their central London training centre.

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.

CSS enhancements

The Property Inspector can be used to change the attributes of any element you select on an HTML page. In previous versions of Dreamweaver, changing the attributes of highlighted text would cause the program to create CSS classes with names like “Style1″, “Style2″, etc. in the head area of the current page. This random creation of styles was often responsible for getting new web developers into bad habits.

Whenever you open a file which contains linked files, Dreamweaver displays each of the linked files in the Related Files Bar. To access a related file just click on its name. If you make any changes to a related file and asterisk appears next to its name in the Related Files Bar to remind you to save your changes. When you do, the impact of the changes is immediately visible in the main file.

Photoshop Smart Objects

The Photoshop integration which was begun in Dreamweaver CS3 has been enhanced in CS4 to offer via the use of Adobe’s Smart Objects technology. A Photoshop file can be imported directly into Dreamweaver and will automatically come in as a smart object.

Photoshop images are can be inserted using the same techniques as inserting any other image file: Insert – Image; dragging from the Files panel; dragging from the Assets panel; or using the Insert toolbar. A Photoshop-style Optimise window automatically appears and you can choose the settings appropriate for that particular image usually GIF, JPEG or PNG.

Access to Related Files

The fact that the image is a smart object means that if we resize it in Dreamweaver, it will automatically be re-optimised and a new version of the image will be generated with the new dimensions. (In previous versions, resizing an image would mean that the browser was responsible for resizing leading to poor image quality.

Related Files

Integration with Adobe Photoshop CS4

The Photoshop integration which was begun in Dreamweaver CS3 has been enhanced in CS4 to offer via the use of Adobe’s Smart Objects technology. A Photoshop file can be imported directly into Dreamweaver and will automatically come in as a smart object.

Improvements in working with CSS

Once the image has been imported, an icon is displayed in the upper left of the image indicating that it is a smart object. Also, in the Property Inspector, the location of the original PSD file is shown in a box marked “Original”.

In Dreamweaver CS4, the Property Inspector contains buttons which allow you to switch between HTML and CSS options. When working in the CSS options, you can now target a specific CSS rule before choosing an attribute or, if necessary, create a new rule.

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.