DREAMWEAVER NOTES

Document title

A simple way to give a document or web page a title is to use the Document Toolbar and type a name in the Document Title entry box (which is located in the Toolbar at the top of each Dreamweaver document). If you can’t find the Toolbar, you should refer to the program’s main menu and go to View. Then, shift down to Toolbars and select Document.

It is also possible to change the title of a document by going to Modify > Page Properties.

You will undoubtedly notice that the Documents Toolbar includes buttons, or shortcuts, for View Code, Design, and Code and Design, and Preview in Browser. These devices are a quick and useful way to call up functions that you will often use and refer to as you develop a web page.

Formatting text

Located immediately below the Document Window is a Properties Inspector. Again, if you cannot find the Properties Window, you can open it by going to the main menu and choosing Windows > Properties.

Once you have selected text in the Document Window, you can use the Properties Inspector to format text. For example, you can apply changes with the following style buttons and pull-down menus :

• Format. These are standard HTML settings for paragraph parameters, body text, and headings. For instance, “Heading 1” is the largest text size used on the web; in comparison, “Heading 6” is the smallest; preformatted makes text appear as monotype; etc.
• Default font. Using this menu, you can choose whether a selected font should be either serif or sans serif.
• Font size.
• Font colour.
• From this section of the Properties Inspector, you can also add hyperlinks to selected text.
  Furthermore, once you have selected text in the Document Window, you can then use items in the Properties Inspector to change the text to bold, italic, etc. In addition, by using the shortcut buttons, you can align text left, centre, right, and justify, etc.

There is a very simple way to make a link using Dreamweaver. For example, if you would like to make a link to the Canadian Broadcasting Corporation’s web site:

• In the document window, type “CBC" and then select the text.
• Using your favorite web browser, go to the browser’s address bar, and select the URL or address. Subsequently, you should use the mouse to “right-click” and copy the location name.
• Go to back to Dreamweaver’s Properties Inspector and place the curser in the Link Entry Box. Right-click and choose Paste. As a result, the URL from the browser window should then appear in the Link box.

Alternatively, you can use the Insert Hyperlink short-cut button to add a link, or you can choose Insert > Hyperlink. Before doing this though, you should make sure that you have placed the cursor at the correct place in the HTML document. After this, you can take the following steps:

• Text: Enter the name of the site or write the content that you intend to highlight as a link.
• Link: Either type the full URL address for the link, or paste the address that you have selected and copied earlier from a web browser.

To change the background colour of a page

You should look at Dreamweaver’s main menu and then go to Modify > Page Properties.

Referring to the Page Properties Window, click on the grey box located immediately to the right of Background and choose a colour from the pull-down menu.

From the Page Properties, you can also choose colours for the following:

• Text (the main text for the document).
• Links (the colour for hyperlinks; the default colour is usually blue).
• Visited Links (the colour for links that have already been clicked; the default colour is usually purple).
• Active Links (the colour that links turn as they are clicked by a web user; the default colour is usually red).

To add an image to a web page

If you haven’t already done so, you must establish an “images” folder -- with letters written entirely in lowercase -- in your “pub_html” directory. Please remember that the “parentheses” in this document are merely meant to highlight the names: do not use parentheses when naming files.

The <images> folder is where you should store all of the images that you intend to use for your web site. The images must be either JPG or GIF formats. However, you can also use PNG files (Portable Network Graphic), but some browsers will not open PNG images, as the file format has not been universally recognized by all Internet software.

You can use Photoshop or ImageReady to make compressed JPG copies, files specifically intended for the Internet.

To add images to your web site, make sure that you place the image files in the <images> folder in your <pub_html> directory. It is important that you add the ".jpg" extension to the file (if the suffix isn't there already); for example, <elephant.jpg>.

Adding images with Dreamweaver can be a simple process, but make sure that program’s Insert Toolbar is active. If not, go to the main menu and choose Window > Insert.

Referring to the Document Window, find a place on your page where you would like to insert an image. Using the Insert Toolbar, click the Image Button (the button with a symbol of a tree). A Select Image Source dialogue box should then appear:

• Look in: Locate the image from “your network folder / pub_html / images”
• File name: Choose the JPG that you added earlier (i.e., elephant.html)
• Relative to: Document
• URL: Type “images / elephant.html.” Again, as a word of warning, you must not use parentheses when you create files. Parentheses in this document are only used for illustration sake.
• Press OK.

Upon completion of this step, you will probably notice that, below the Document Window, Image Properties appears in the Properties Inspector. From here, you can also add borders to an image, align it to the centre, left, and right of the document, etc.

• top of the page