edit202 – web page lab · when the save window appears you can rename the image if desired. this...

EDIT202 – Web Page Lab

Assignment Guidelines

1. Create a web folder named “LABSEC-CCID-Webpage”.

To create a new folder, right-click on your desktop. Select New, then Folder from the available context menu.

When you see the New Folder on your desktop rename it. As soon as you create the new folder you should be able to rename it. If not simply

right-click on the folder and select Rename from the available context

menu.

2. Create three separate web pages using Adobe DreamWeaver. Follow

the guidelines listed for each page.

To launch DreamWeaver, locate the Adobe DreamWeaver icon.

Once you have launched DreamWeaver you should see a program

window similar to the following:

To begin working on your new website click on HTML under the

Create New menu of the program window.

Once you click on HTML under the Create New menu a new document

window should appear. The window should be labeled as follows:

3a. Save your first page as “index.htm”.

To save your web pages within DreamWeaver, choose Save As from the

File menu. The following Save As window should appear.

Navigate to your desktop, double-click to open your web folder and be sure to save your file inside your web folder.

Name your file “welcome.htm” and click Save. Periodically save your

file every few minutes. Note: If you are using Windows XP you will not have to type in the “.htm” file extension.

Remember if you want your website to properly link together all files

related to you website should be save inside the same folder.

3b. Include a colored page background.

To change the background color of your web page, select Page

Properties from the Modify menu. You should now see the following

Page Properties window as shown below.

To select a background color, click on the arrow in the bottom right corner of the Background Color: box and a list of colors will appear.

Choose any color and click on “OK”. Your page will be redisplayed,

using the new background color you have selected.

3c. Include a title on the first line of the page that welcomes people to

your site: (Note this is not the Page title or filename simply a line of text on the page).

“Welcome To My Sample Website”

3d. Center this title across the page using the following style:

Size: 4(14pt) Style: Bold

Font: Arial, Helvetica, sans-seriff

Color: Any color that does not clash with your page background

Once you have entered your text, to format it click and drag over the

text to highlight it. With the text highlighted/selected go to the go to

Format>Font if you want to change the font, other choices are Format>Style for style and Format>Color for color.

3e. One space below the title (hit return 2x), include two to three

sentences of text briefly describing yourself i.e. (Your program, your major and minor, and your hometown) using the following style:

Size: 3(12pt)



3f. One space below the text describing yourself (hit return 2x), include a

paragraph of text describing the EDIT 202 course in your own words (be nice and make sure to use appropriate language) using the

following style:

Size: 3(12pt)



3g. Two spaces below the paragraph describing EDIT 202 (hit return

3x), insert a horizontal line.

To insert a horizontal line, from the Insert menu select HTML >

Horizontal Rule. You should now see a horizontal line across your page.

Double-click on the line to adjust the settings of your horizontal line,

such as height, width, and shading though this is not part of the

assignment if you like you can alter the settings.

3h. Below the horizontal line type “Page created by: your name here”. Use the following style:

Size: 2(10pt) Font: Arial, Helvetica, sans-seriff


Alignment: Left

3i. Highlight the text for your name and use it to create an email link to your U of A email address Ex: mailto:[email protected].

To insert your email hyperlink click and drag over your name to select

the text and select Hyperlink from the Insert menu.

After selecting Hyperlink from the Insert menu you should see the

following Hyperlink Window.

The Text: field shows the text that users will click on to activate the

hyperlink and the Link: field is the actual hyperlink.

Because this is an email hyperlink be sure to use the mailto: prefix.

In order for it to be a usable email hyperlink the full link should be

mailto:[email protected]

typed out mailto:[email protected], replacing “AICT” with your

own AICT.

Once this is done, click on OK.

Your name should now appear on the page as if it is underlined and blue in color. These are two of the ways to recognize a hyperlink.

3j. One space below your email link, insert a table with the following

options:

Rows: 1

Columns: 3

Alignment: Center

Border Size: 1

Width: 50 Percent

Type the following text centered in your table:

Make sure your text is centered in each cell and is formatted in Arial

font and is 2(10pt) in size.

To insert an HTML table to your web page, select Table from the Insert menu. The following Table menu will appear.

mailto:[email protected]

Apply the settings as seen in the image shown above.

1 Row

3 Columns

Table Width 50%

Border Thickness: 1

You should now see a table similar to the following image on your web page document.

At this point the table still needs to be centered across the page. To

centre the table across the page first single click on the drop-down

arrow next to the 50% text (this is the measure of the width of the table) table width measure and select “Select Table”.

The table on your document should now be selected and look similar to the image shown below:

Now to centre the table open the Properties panel by selecting

Properties from the Windows menu.

With the Properties panel open you can select Center from the

Alignment drop-down menu:

For ease of use it is recommended that for the duration of this lab the

Properties panel is left open.

Page 2

4a. Create a second page and save as “imap.htm”.

To begin working on a second web page, select New from the File menu. This should bring up the following New Window menu:

To begin working on your second webpage file:

o Single click to select Blank Page

o Single click to select HTML from the Page Type: menu

o Click on Create.

4b. Include the following text on the first two lines of the page:

Teacher Certification Image Map for Prairie Provinces

Click on a prairie province to visit the website for teacher certification

information

Size: 4(16pt)


Color: Black

Alignment: Center

4c. Go to the following website address and save the labelled

background image and the map of Canada image into your web page folder:

http://www.ualberta.ca/~slscott/EDIT202

To save images into your web folder place your mouse over the image

and right click. A context menu should pop up and you can choose one of the following options, these will differ depending on which

browser you are using.

http://www.ualberta.ca/~slscott/EDIT202

When the save window appears you can rename the image if desired.

This may be a good idea, as you can rename the image with a filename that makes sense to you. Later on, when inserting the image

into your web page, it will be easier to find in your web folder.

To rename your saved image simply delete the old name and type in

the new one. Make sure to give this image the correct file extension.

If you are saving a GIF Image it is “.gif”, and if you are saving a JPEG image it is “.jpg”. Be sure that when you rename your image it

contains no spaces.

4d. Insert the maple leaf picture you just downloaded as a background

for this "imap.htm" page.

To add a background image, select Page Properties from the Modify menu the Page Properties should appear

Click on Browse to select the background image from your web

folder.

o Select Desktop from the Look in: drop down menu

o Double click to open your web page folder.

o Single click to select your background image.

o Click on OK in the Select Image Source window.

o Click on OK in the Page Properties window.

4e. Two lines below the title text (hit return 3x) insert the map of Canada image and center it across the page.

To insert images into your web page, select Image from the Insert

menu.

o Select Desktop from the Look in: drop down menu

o Double click to open your web page folder.

o Single click to select the image you want to insert on your web

page.

o Do not change any option in the Image Tag Accessibility

Attributes window and click on OK.

Note: Remember, before you insert your images into your web pages they

must be saved inside your web folder. If they are not, your images will not

display when you publish your page on the Internet.

4f. Using the map of Canada image you have just inserted onto your

page create three separate hotspots hyperlinks that correspond to the

prairie provinces (Alberta, Saskatchewan, and Manitoba).

Use the following addresses for your hotspots:

Alberta Teacher Certification

http://www.education.alberta.ca/teachers/certification.aspx

Saskatchewan Teacher Certification

http://www.stf.sk.ca/the_profession/certification/index.html

Manitoba Teacher Certification

http://www.edu.gov.mb.ca/k12/profcert/index.html

http://www.education.alberta.ca/teachers/certification.aspx

http://www.stf.sk.ca/the_profession/certification/index.html

http://www.edu.gov.mb.ca/k12/profcert/index.html

To create an image map, single-click on your image and if the Properties panel is not already open select Properties from the

Windows menu to open it.

With the Properties panel now added to your view single-click on the arrow in the bottom right-hand corner of the properties panel as

shown below:

You should now see the following tools available at the bottom of the

properties panel.

Using these tools, you can now create hotspots on your image. To create a square hotspot use the square tool, to create a circle

hotspot use the circle tool, and to create freeform shapes for

hotspots use the freeform tool.

After you single-click to select a tool, place your mouse on top of the

image, then click and drag to draw a hotspot which surrounds one of the provinces shown in the sample map image.

HINT: In order to create the irregular shapes necessary to surround the provinces in the map, it is highly recommended that you use the polygon

hotspot tool and repeatedly click around the border of the province.

Once you draw the hotspot around one of the provinces in your

sample image your Properties panel will appear as shown below:

Delete the “#” sign in the Link text field and type in the web address

for your hotspot.

4g. The three links you are inserting for your image map are considered

absolute hyperlinks and should be opened in a new browser

window. Adjust the target frame setting so that all of the above links

open in a new browser window when clicked on.

To edit the existing link on your image map single click on the

hotspots, single click on the available Target drop-down menu and

select “_blank”.

Remember, “_blank” is the setting you need to have if your absolute

hyperlink is going to open in a brand new browser window.

Complete this step for all three of your hotspots, so that all of the teacher certification sites open in a new browser window.

4h. Two lines below the image map (hit return 3x), insert another table identical to the one on the first page.

5. Preview your web pages in a web browser.

Note: It is encouraged that you repeat this step and preview your pages

frequently.

Before previewing your web pages you want to make sure that all your pages are saved and up to date so that you know you are

previewing your up to date content.

To make sure all your pages are saved and up to date select Save All

from the File menu.

To preview your webpage in the Internet Explorer browser select

File>Preview in Browser>IExplore.

If any one of your pages are not saved DreamWeaver will prompt you

to save them before previewing your index file.

If the program is not already running Internet Explorer will then

launch and your webpage should now appear in a new web browser

window.

If Internet Explorer is already running in the background, you may see

a flashing item in your taskbar, click on this item and you should see your webpage as it would appear in a web browser.

If you made a mistake and need to update your page, close the

browser window and Adobe DreamWeaver should then be running as the active program. You can then proceed to make your changes and

try previewing a second time if necessary.

Page 3

6a. Save your third page as “links.htm” and include a page background

color.

6b. Type the following title on the first line of the page:

Education Links Page

Size: 4(16pt)


Color: Black

Alignment: Center

6c. Two lines below (hit return 3x) Type the following text:

Click on the category heading below to view summaries and links for the

sites listed.

Size: 3(12pt)

Style: Bold and Italicized


Color: Black

Alignment: Left

6d. One line below the second title line (hit return 2x), insert another

horizontal rule.

6e. On the first line of the page next to the first title line "Education Links

Page", insert an anchor named "TOP".

Hint: At this point it is recommended that you visit the Prep Sheet for this

lab to read up on anchors.

To create an anchor, single-click to place your cursor on the first line

of your page. Be careful not to highlight any text.

Once your cursor has been placed, select Named Anchor from the

Insert menu. You should now see the Named Anchor window appear as shown below.

Type “TOP” into the Anchor name: text field and click on OK. An

anchor image will appear where the cursor was placed representing the anchor (a specific point in the document we wish to link to).

6. One line below the horizontal rule (hit return 2x). Type in the following text:

Hints:

In order to create the bullets seen below you will have to use the bullets

button located in the Properties panel.

To keep a running bulleted list with no breaks hit enter once to break a

bulleted list hit return two times.

7. Two lines below the last item in the list (hit return 3x) include another

horizontal rule. At this point your screen should look similar to the image shown below:

Create the Professional Sites Section

8a. Two lines below the above horizontal rule type in the following text:

Format this text in the following style:

Size: 14pt


Color: Your choice

Alignment: Left

8b. Two lines below the above text insert a table with the following specifications:

2 Row

1 Column

Table Width 75%

Border Thickness: 0

Your section should now be similar to the image shown below:

8c. Two lines below the above table insert another table with the same

specifications:

Your section should now look similar to the image shown below:

8d. Two lines below the above table type in the following text:


Size: 14pt


Color: Black Alignment: Left

8e. One line below the "Back to Top" text insert another horizontal rule.

Your section should now look similar to the image shown below:

Create the Government Sites Section



Size: 14pt


Color: Your choice

Alignment: Left

9b. Repeat steps 8b -8e.

Create the Educational Resources Section



Size: 14pt


Color: Your choice

Alignment: Left

10b. Repeat steps 8b -8e.

11a. Type in the following information into the two tables in the Professional Sites section:

11b. Open a web browser and visit the two sites found in the tables,

"http://www.teachers.ab.ca/" and

"http://www.districtofficeonline.com/".

11c. After visiting the two sites type 2 - 3 sentences describing the site in

the bottom cells of their respective tables.

11d. Insert two absolute hyperlinks to "http://www.teachers.ab.ca/" and "http://www.districtofficeonline.com/".

To properly insert absolute hyperlinks we need to highlight or select

what we want to be the link first.

For example to create an absolute hyperlink to the Alberta Teachers

Association page first click and drag to select the following text:

With the text now selected type the text for the link "

http://www.teachers.ab.ca/" in the Link text box shown below.

Because this is an absolute hyperlink (a link to someone else’s

webpage content) it needs to open in a new browser window.

To make sure the link does open in a new browser window select

"_blank", from the Target drop-down menu as shown below:

Repeat the above steps to enter in the absolute hyperlink to the

District Office Online website as well.

12a. Type in the following information into the two tables in the

Government Sites section:

12b. Open a web browser and visit the two sites found in the tables, "http://www.education.gov.ab.ca/" and

"http://www.learning.gov.ab.ca/ict/".



12d. Insert two absolute hyperlinks to "http://www.education.gov.ab.ca/" and

"http://www.learning.gov.ab.ca/ict/".



For example to create an absolute hyperlink to the Alberta Education

home page first click and drag to select the following text:

With the text now selected type the text for the link

"http://www.education.gov.ab.ca/" in the Link text box shown

below.





Repeat the above steps to enter in the absolute hyperlink to the

Alberta ICT Curriculum website as well.

13a. Type in the following information into the two tables in the

Educational Resources section:

13b. Open a web browser and visit the two sites found in the tables,

"http://www.2learn.ca/" and "http://www.tlt.ab.ca".



13d. Insert two absolute hyperlinks to "http://www.2learn.ca/" and

"http://www.tlt.ab.ca".



For example to create an absolute hyperlink to the Telus 2Learn home page first click and drag to select the following text:

With the text now selected type the text for the link

"http://www.2learn.ca/" in the Link text box shown below.





Repeat the above steps to enter in the absolute hyperlink to the Shaw

- TLT website as well.

14. Insert anchors for all three sections of your links page (Professional

Sites, Government Sites, and Educational Resources).

To insert an anchor first single click to place your cursor where you

want your anchor. In this case we want our curser before our section

titles:

With the cursor in the right position select Named Anchor from the

Insert menu and the following window will appear:

Because we are adding this anchor for the Profession Sites section,

single click inside the Anchor name: text box and type in the name

"Professional" and click on OK.

After clicking on OK in the Named Anchor text box you should see

your anchor right beside the section title.

Repeat the above steps to create anchors for the two remaining section

titles Government Sites, and Educational Resources.

Use the anchor name "Government" for the Government Sites

section, and "Educational" for the Educational Resources section.

15. Create links to your section anchors from the list at the top of the

page.

To create a link to an anchor on a webpage document first select what will be the link, in this example you will be creating a link to the

Professional Sites section of your document so "Professional Sites"

is highlighted in our list at the top of the page.

With the "Professional Sites" text selected type in "#Professional"

into the Link textbox in the Properties panel. Note that we are typing

in a number sign "#" in front of our anchor name. The reason for this is that it tells Dreamweaver that this is an anchored hyperlink.

Repeat the above steps to create anchored hyperlinks to Government

Sites section and the Educational Resources section.

16. Insert all "Back To Top" anchored links.

To create the Back To Top links select "Back to Top" at the bottom

of every section in your page and type in "#TOP" in the Link text

box of the Properties panel.

Remember that this is the anchor that your created earlier at the top of the page.

Hint: Once you create the first anchored "Back to Top" link, to create your other "Back to Top" links highlight your text and select "#TOP" for the

Link text box drop-down menu.

17. At the very bottom of your page 2 lines below (hit return 3x) the final horizontal rule, insert another table identical to the one on the

first and second pages.

18. Inside the tables at the bottom of each of your previous pages insert

the relative hyperlinks to the correct corresponding pages.

You do not need to create a link to the page you are currently working

on.

For example if you were creating the links on the image map page you

would not need to add a link to a page that you are currently viewing

To create the relative hyperlinks first highlite to select the text that

will be the link. In the example we will be creating a link to the welcome.htm page.

With the Properties panel open single click on the little folder icon on

the right hand side of the Link text field.

Navigate to your web page folder on the Desktop double-click to

open your web page folder and single click to select the file you wish to link to, in this example it would be “welcome.htm”, and click on

OK.

20. Publish your webpage to your University of Alberta webspace using

the next set of instructions on the WebCT site.

Steven Scott & The EDIT 202 Development Team University of Alberta

edit202 – web page lab · when the save window appears you can rename the image if desired. this...

Documents