Really Basic

Dreamweaver’s Properties Inspector is extremely versatile and is normally displayed at the bottom of the screen. It is context sensitive, in that it displays options which are relevant to the currently selected item. These options offer the user useful feedback and allow you to modify the attributes of the selected element.

There are two different sections in the Properties inspector: HTML and CSS. They are accessed by clicking on one of the two buttons on the left of the panel. When formatting text, the HTML section contains options which allow you to assign structural attributes to your text. From the Format drop-down menu, you can specify whether the text is a heading (h1, h2, h3, etc.) or a paragraph (p). In the ID box, you have the option of assigning a unique ID to the item which could then be used in CSS or JavaScript to reference the item.

The CSS Class drop-down menu displays any CSS class styles which have been defined either within the current HTML page or in a linked external CSS file. These classes or styles can be applied to the selected text simply by choosing one of their names. If an entire paragraph or heading is selected, Dreamweaver will associate the class with the heading or paragraph tag. Thus, your code will read, for example, ‘ p class=”greenpara” ‘. If, on the other hand, only section of a paragraph is selected, Dreamweaver will surround the selected text inside a SPAN element and attach the class to it. Thus, your code will read ‘ span class=”greenpara” ‘.

Next we have the link box, which allows you to convert the selected text into a hyperlink. Dreamweaver offers a number of ways of creating the link. Thus, for example, if the link is to an external website, you can simply enter the entire URL into the link box. If you are linking to one of your own pages, one of the fastest techniques is to use the Point to File button. Simply drag the Point to File icon onto any page listed in your Files panel and Dreamweaver will create a link to it.

You will also notice buttons for Bold and Italic. These are no longer used for formatting but cause Dreamweaver to surround the selected text with the standards compliant strong and em elements, respectively. (Em is short for emphasis.) The default rendering for strong is normally bold, in modern browsers, and for em, italic.

The Unordered List button converts the selected text into a bulleted list; while Order List converts the text into a numbered list. The Text Outdent and Text Indent buttons can be used to promote and demote elements within lists, thus enabling you to create nested lists. If the selected text is not a list item, clicking the Text Indent button converts it into a blockquote element.

Author runs Adobe Dreamweaver CS4 training courses and HTML/XHTML training all over the United Kingdom.

Whenever the computer training company I work for runs Dreamweaver training courses, we always ensure that the topic of templates is included. They are such a great time-saving feature. Templates can be used in two ways: firstly, a new page can be based on a template and, secondly, a template can be applied to an existing page. To create a new page based on a template, proceed as follows.

1. Choose New from the File menu.

2. In the first column of the New Document window, choose Blank Template.

3. In the second column, specify the type of page you would like to create (HTML, ASP, ASP.NET, ColdFusion, JSP OR PHP).

4. In the third column, you may optionally choose one of Dreamweaver’s excellent preset CSS layouts.

5. If you use a CSS layout, choose whether you would like your CSS code placed in the head area of the template, in a new CSS file or in an existing CSS file. (Naturally, this option only applies if you choose to use one of the preset CSS layouts.)

If you wish to apply a template to an existing page, perform the following steps.

1. Open the page in question.

2. Choose Modify – Templates – Apply Template to Page.

3. Double-click the name of the template you wish to associate with the page.

Templates use editable regions to mark areas of the page which may be modified whenever the template is used. Editable regions may contain placeholders such as text or graphics. Graphic placeholders are ideal for marking an area of a page where an image is to be inserted. Each time the template is used, a different image can be substituted for the placeholder. To replace a graphic placeholder, do the following.

1. Create or open a page based on a template.

2. Double-click the graphic placeholder.

3. Navigate to the image which will replace the placeholder.

4. Double-click the name of the image.

Once you have applied a template to a page, the name of the template is displayed in the top right and the name of each editable region is shown above the appropriate area of the page. The editable region labels compromise the WYSIWYG display of your page slightly by pushing elements down. To switch off the display of template and editable region names, choose View – Visual Aids – Invisible Elements. Use the same command to reinstate them.

By default, Dreamweaver places a light blue rectangle around editable regions in both templates and documents based on them. It also places a yellow rectangle around any page based on a template. The same yellow highlight also shows up in code view to mark the locked regions of a page based on a template. Dreamweaver allows you to change these highlight colours.

1. Choose Preferences from the Edit menu.

2. Click on the category heading Highlighting on the left of the window.

3. Choose a colour from the pop-up palettes next to Editable regions and Locked Regions

From time to time, you will have pages which you need to treat as independent and which you do not want controlled by a template. Obviously, you can simply avoid attaching a template to such pages. However, you will often find it useful to apply a template to the page, to obtain formatting elements and then to detach the page from the template. To detach a page from its template, choose Modify – Templates – Detach from Template.

If you have your Assets panel open, you can also update the current page by dragging the appropriate template icon from the Templates section onto the page. This technique can also be used to apply a template to a page or to change the template on which a page is based.

Author is a developer and trainer with Macresource Computer Training, a UK IT training company offering Adobe Dreamweaver training courses 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.

Images should always 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. Click on the image to select it.

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

Rollover images are those which change appearance when the mouse passes over them. This effect is created with JavaScript. However, Dreamweaver uses visual tools to generate the necessary code.

1. Position the cursor in the desired location then choose Insert – Interactive Images – Rollover Image.

2. Enter a name for the image.

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

4. Repeat step 3 to locate the Rollover Image.

5. Finally, click on the Browse button next to When Clicked Go To URL then locate and double-click the linked file.

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