All decent Dreamweaver training courses and online tutorials will show you how to create hyperlinks. HTML hyperlinks provide an essential interactivity allowing users to move from one place to another within a web site. Links can be attached to both text and images. To attach a link to text

1. Select your text.

2. Click on the folder icon next the Link box in the Property Inspector.

3. Find the file to which you want to link and double-click on it.

Any text you convert to a hyperlink will change appearance and become blue (with underline) or to the link colour specified with the command Modify – Page Properties. CSS styles can also be used to change the appearance of links and to exploit Internet Explorer’s Hover feature whereby the link colour can be changed when the mouse rolls over it. (See the section on using CSS styles in Unit 5: working with text.)

The Browse button (the folder icon) and point to file icons are especially useful ways of creating links since they minimise the risk of errors. However, if the file to which you want to create the link has not yet been be saved to disk, these methods cannot be used. To create a link manually:-

1. Select the text.

2. Type a URL in the Link box in the Property Inspector.

3. Press the Enter key.

There is an even more useful way of defining a link: using the point-to-file icon located next to the Link box in the Property Inspector (to the left of the folder icon).

1. Reposition the Files and Document windows as necessary until they are next to each other.

2. Select your text.

3. Drag the point to file icon into the Files panel directly onto the file to which you want to link.

You can also use an image file as a link.

1. Click once on the image to highlight it.

2. Click the Browse button (the folder icon) next the Link box in the Property Inspector.

3. Locate and then double-click the file to which you want to link.

Needless to say, the point-to-file and manual link creation techniques can also be used with images. Images which have been hyperlinked can normally be distinguished from other images by a border which appears around them in a colour which matches the link colour for that page. Dreamweaver suppresses this border by setting the border attribute of the IMG element to zero. If, for any reason, you wish to have a border around a linked graphic, in the Property inspector, change the zero to one or more pixels.

To learn more about Dreamweaver training courses, visit Macresource Computer Training, an independent computer training company offering Dreamweaver training courses at their central London training centre.

New Additions to Spry Widgets

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.

Brand new Spry widgets

Spry is Dreamweaver’s Ajax solution which uses JavaScript and CSS to add sophisticated interactivity to your web pages. Dreamweaver CS4 includes some useful additions to its existing range of Spry widgets. The Spry Validation Password widget allows you to specify the minimum and maximum number of characters, numbers, uppercase and special characters which can be included in the password entered. The Spry Validation Confirm widget checks that the entries in two fields are identical and displays a customizable error is they are not. This makes it ideal for creating “Password/Confirm Password” or “Email/Confirm Email” functionality.

Other new widgets include the Spry Tooltip widget which allows you to create a tooltip which will appear when the mouse is placed over the specified text or object. Since the tooltip is inside a DIV element, this offers tremendous flexibility as to the appearance of the tooltip. For example, it could include an image or a Flash movie.

Inserting 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.

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.

HTML is a notoriously sparse environment which relies on files created with other technologies to add functionality to web pages. Typical examples of related files are server-side includes, CSS, JavaScript and XML. Dreamweaver now includes a feature called “Related Files” which enables you to edit the content of such files, without having to open them separately, and to instantly see the effect of your changes on the main file.

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

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.

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.

The author is a training consultant with TrainingCompany.Com, an independent computer training company offering Adobe Dreamweaver training courses in London and throughout the UK.