Handout for New Re-design of COEHS Websites

Macintosh Edition

Last Revised 2006

Office for Partnerships, Professional Development, and Technology ©2006 College of Education and Human Services

113 Horrabin Hall Western Illinois University

Macomb, IL 61455 (309) 298-3076

http://www.wiu.edu/imm

Creating a new page and applying a template in Dreamweaver 1. Go to File > New. 2. Make sure the General tab

is selected, click on Basic page under Category. Click on HTML under Basic page. Click Create.

3.

Type in your content on your new page.

4. Click on Modify > Template > Apply Template to Page…

5. Choose the template of your site.

6. The Inconsistent Region Names dialog box will open. Click on Document body.

7. In the Move content to new region drop-down menu choose body. Click OK.

8. The content that you had typed earlier now appears within the body region of the template as shown here.

Applying a header style to a selection of text

1. Highlight the text that you want to appear as a header style.

2. In the Properties Display, from the pop-up Style menu choose header.

3. The text that you had chosen will now appear as the header style.

Applying the rightalignbox and navigation links within that box 1. Type in the text that

you want to appear in the rightalignbox. (Note: If the header style is still applied to the text, select None in the style box within the Properties Display.)

2. In the Properties Display, from the pop-up Style menu, choose rightalignbox. In this case it says immrightalignbox, however yours may say something else at the beginning instead of imm.

3. The text that you typed

will now appear in the rightalignbox.

4. To make a link within the box, type or highlight the text that you want to make a hyperlink. Within the Properties Display in the Link box, type in the URL of the website that you want your text to link to. (You can also link to single .html files that you have or to other documents such as pdf’s and word documents. The following will show you how to do this.)

To link to a single .html

page you can just type the name of the page in the Link box. For example, in the picture to the right I typed mission.html. (You’ll want to make sure that this page is under your root folder to your website.)

To link to a file you can just type the name and extension of the file that you want to link to. For example, in the picture to the right I typed scholarship.pdf in the Link box. (Again you will want to make sure that this file is in the root folder of your site.)

You can also use the

Browse for File folder to the right of the Link box to link to a file. Click on the Browse for File folder icon.

Browse the location of the file that you want. Select the file and click Choose.

You may see the message that says the file is outside of the root folder. It will ask you if you want to copy the file into your root folder. Click Yes.

Then you will see the file that you selected within the Link box in the Properties Display and your text will now be linked to that file.

5. The text in the box will then appear linked but with a blue color. This is not the color that the links in the box are set to.

6. To apply the box navigation style, highlight the linked text. Within the Properties Display, under the Style menu, choose boxnav from the list.

Inserting an image and formatting it to the right or left 1. Go to Insert > Image.

2. Browse to locate the image that you want to insert. Choose the image and click Choose.

3. The Image Tag Accessibility Attributes dialog box will open up. Make sure you type some text that describes the picture you are inserting where it says Alternate text. Click OK.

4. While the picture is highlighted, in the Properties Display, from the Class pop-up menu choose picleft or picright.

5. This is what the picright looks like.

6. This is what the picleft looks like.