Print Ready - WPD Laboratory Assignments

Laboratory Assignments
• Web Page Design 1 •
IMED 1316 50

• Laboratory assignments (progress) will be graded monthly (see your class schedule for assessment
cutoff dates.

1. Introduction

• View all of the free tutorials at: • Microsoft FrontPage 2003 Tutorials .
• Read the 1st three Chapters of your text.

• Before you begin building your web site, follow the steps on page 60 of your text to control how FrontPage
uses platform-specific features. Assume that FrontPage Server Extensions & SharePoint Services will NOT
be available.

Designing for Internet Explorer's latest versions resolves any cross-platform mania for the moment.
We can reasonably do this because most browsers at least try to be compatible with Microsoft's browser.
The result of our efforts may not be as pretty when viewed using other browsers but will be usable.
Incidentally, Firefox is the second most used browser out there today. This site is compatible
with Firefox.

• Create your 1st FrontPage Web Site (page 10). If the folder list does not appear in step 8, try clicking
on File (on the menu bar), then click on Open Site...., then click on Open, then answer yes to the question in the
pop-up box. If this doesn't work use Creating a Web site from scratch (page 18).

• Post at least one comment to the Web-CT discussion.

The discussion topic/topics should be obvious from the weekly assignment. Because this is a hybrid
course it has an online component, using the discussion board is required & your participation will be
evaluated as part of your monthly assessments.

Feel free to pose questions for your classmates to consider. The process of creating a coherent message
(whether a question or an answer) forces one to understand, summarize, focus, & reflect on the material
being studied.

A dynamic atmosphere can develop in a class when participants interact & communicate with one another.
I consider the synergy generated through online discussion to be an important learning tool in your class,
enhancing your learning outcomes. Online discussions have a vital role in creating & sustaining a sense
of community and a common purpose, you are not alone.

Full participation will enrich your experience. Be active in the online discussions. Volunteer, respond, have
a go! We learn by mistakes. Don’t miss out on interactions with other students just because you’re not in a
classroom (one hour a week in a lecture environment is NOT enough interaction for optimal learning). Visit the
chat rooms on Web-CT. Use E-mail. A solid course buddy can be your best tool.

2. Text - Read Chapter 4

• Most Web servers look for the file named; index.htm, to identify the Web site's default page, also known as
the site's home page. You created a blank home page (index.htm) file on your disk-based web site when you
created your web site in assignment 1. Display the name of your site on your homepage & add several
paragraphs of fun tweaked text to it.

• Adjust paragraph alignment, indenting, & spacing.
• Add horizontal lines.

• Create at least three other pages on your web site adding text to each page. Teachers should
place the text of their syllabus on the pages. One syllabus per page.

• Make a bulleted or numbered list of of your site's pages & display their names in a shaded
box on the index page.

• Check your site against accessibility guidelines. (check for errors only). Note the remember icon:
"if you're unable to comply with every guideline, don't worry too much" ...

• Post at least one comment to the Web-CT discussion.

3. Hyperlinks - Read Chapter 5 to page 102 & 106-108.

• Create a new page with at least 3 areas of information, bookmark them. At the top of the page
build a menu to hyperlink to each of the bookmarks. Add a hyperlink to get back to your home page
( to back arrow to get there might take a while if the bookmarks have been used ).

• Build a menu on your home page & hyperlink to the other pages on your disk-based site. Be sure
to use appropriate screen tips with your hyperlinks.

• At least one of the pages linked to from the menu on your home page should open in a new browser window.

• Use FrontPage to generate a text-based horizontal navigation link bar based on your site's navigation structure.
Implement the bar on your web site’s pages in a shared border at the top of the page.

• Post at least one comment to the Web-CT discussion.

• E-mail your web site to the Instructor.

Here's how to create the required zipped compressed folder for this process to work well.

1. Open My Computer.
2. Double-click a drive or folder.
3. On the File menu, point to New, & then click Compressed (zipped) Folder.
4. Type a name (1_yourlastname) for the new folder, and then press ENTER.
5. Drag & drop your site folders & files into the compressed folder.
6. E-mail the compressed folder (as an attachment) to me.
Notes:

• To open My Computer, click Start, and then click My Computer.
• You can also create a zipped compressed folder by right-clicking the desktop, pointing to New,
& then clicking Compressed (zipped) Folder.
• You can identify compressed folders by the zipper on the folder icon.
• If you share compressed folders with users on other computer systems, you may want to limit the
compressed folder names to eight characters with a .zip file name extension.

4. Pictures - Read Chapter 6.

Note: FrontPage created a website in assignment 1 and it has created an images folder for you. You should always
move/copy images you want to use on your Web site to the images folder of the web site you are modifying /developing.
This takes a little extra time; but, you will know where they are should you choose to change/edit or upload them. Do not
leave them scatted all over your hard drive!

• Insert a different properly scaled picture of reasonable file size on each of the pages of your disk-based site.
• Post at least one comment to the Web-CT discussion.

5. Pictures Continued

• Use a different background image or solid color as a background on various pages of your web site.
• Insert a transparent GIF created by you on one of your web pages.
• Implement a thumbnail link to at least one large picture.
• Place a text label on top of a picture.
• Add a border (make it obvious) to at least one of your pictures.
• Insert an animated picture (found on the web & in the public domain) to one of your web pages.
• Post at least one comment to the Web-CT discussion.

6. Pictures Continued

• Select a background image and implement it on every page of your web site (excepting
print friendly versions).
• Give every picture in your Web site meaningful alternate text.
• Create a WordArt graphic & display it on at least one web page.
• Create an AutoShape graphic & display it on at least one web page.
• Post at least one comment to the Web-CT discussion.

7. Photo Gallery

• Unfortunately one of the last things that seem to be implemented on a web site is a photo gallery. Let’s get
ahead of the game and do one now so those visiting your site will have some insight at to who we are & what
we are about.

• Select ten or more appropriate pictures that you have permission to use or that you own & create a photo
gallery for your web site.

• Link to the Gallery page from your site's home page using a link labeled: Photo Gallery.

• Post at least one comment to the Web-CT discussion.

• E-mail your web site to the Instructor.

Here's how to create the required zipped compressed folder for this process to work well.

1. Open My Computer.
2. Double-click a drive or folder.
3. On the File menu, point to New, & then click Compressed (zipped) Folder.
4. Type a name (2_yourlastname) for the new folder, and then press ENTER.
5. Drag & drop your site folders & files into the compressed folder.
6. E-mail the compressed folder (as an attachment) to me.

8. Adding Power Point Presentations to Your Web Site

• Add a Power Point Presentation to your Web Site as a series of HTML files that link to each other.
• Link to the Power Point's starting page from your site's home page using a link labeled: Power Point Example.
• Post at least one comment to the Web-CT discussion.

9. Tables (grid)

• Insert a grid table on at least one of your web site's pages.
• Link to a page utilizing a gird table from your site's home page using a link labeled: Gird Table Example.
• Post at least one comment to the Web-CT discussion.

10. Forms, Read Chapter 8 of your text.

• Implement a form (use e-mail type) soliciting questions from your visitors on one of your web site's pages.

Link to the form from your site's home page using a link labeled: Ask a Question.

• You will have to modify the form tag in code view to read as follows:

form method="post" enctype="text/plain" action="mailto:yourname@yourprovider"

• Implement a form which tests the student & sends the results to you. Link to the Test (form) from your site's
home page using a link labeled: Test 1.

• Implement a form which asks the student to evaluate your course/work & sends the results to you. Link to the
survey (form) from your site's home page using a link labeled: Submit Course Evaluation.

• Post at least one comment to the Web-CT discussion.
• Publish your web site.

11. Print Friendly

• Create & link print friendly versions of your web pages when appropriate.

• Place the following Internal Cascading Style Sheet in the head section of the Web page you
do not wish to be printed. Note: Generally you would not force the non printing of a page, after all it
is not your ink; however, when you know the majority of your visitors are students using school
printers it seems wise to force them to conserve printer ink/toner supplies and save printer time
(print friendly versions usually print much faster).

• There are many ways to produce a print friendly version of a web page, after all it's just a
stripped down version of your page. I often use the HTML tag "<pre> </pre>" as in preformatted
on an unembellished blank Web page and then cut & paste the formatted text from the source
document to the area inside the tags. You have to manually insert line feed, carriage returns where
you wish then to occur in the print friendly version, but that's a relatively quick procedure. The
Internal Cascading Style Sheet I generally use to specify the characteristics for the pre tag follows.
Insert it into the head section of the Web Page using FrontPage's Code view.

• Remember to use the browser's Print Preview to see what the page will look like when printed!
• Post at least one comment to the Web-CT discussion.

12. Layout Tables

• Update (at least) the index/home web page on your site to utilize a layout table.
• Post at least one comment to the Web-CT discussion.

13. Buttons & Behaviors

• Make some of the links on your home page operate from Interactive buttons (reference: pages 242 -247).
• Make the links on your home page "click" when the mouse passes over them. (reference: pages 281 -282).
• Post at least one comment to the Web-CT discussion.

14. HTML & Java

• Publish your web site.
• Take the self test on Web Page Design 1.
• Post at least one comment to the Web-CT discussion.
• Review all student Web sites. Vote using Web-CT E-mail (to your instructor) for 1st place in
Web page design.