• Print Version of This Page.

• Top of Page

• Top of Page

• Top of Page

• Top of Page

• Top of Page

• Top of Page

• Top of Page

• Top of Page

• Top of Page

• Top of Page

• Top of Page

 
•  Web Page Design 1  •

•  Laboratory Assignments  •
 
 
 

  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. ( link: Instructions)  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.

      Special WebCT Faculty & Staff Log in instructions: Use the initial of your first name followed by your last name as your user name (webCT ID). If you have never logged into WebCT before use your user name as the password.

    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.

•  Assignment 1 (print ready)

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.

•  Assignment 2 (print ready)

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.

•  Assignment 3 (print ready)

4. Pictures - Read Chapter 6.

     Note: FrontPage created a website in assignment 1 and it has created an images folder ( In My Documents - My Web Sites) 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.

•  Assignment 4 (print ready)

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.

•  Assignment 5 (print ready)

6. Pictures Continued

    •  Select a background image & 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.

•  Assignment 6 (print ready)

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.

•  Assignment 7 (print ready)

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. Missed the lecture? Use the instructions at: Recommended Solutions, 1st Option .

     This lesson concentrates on converting an existing PowerPoint Presentation to
a Web implementation as a slide show. If you where starting from scratch it would
be unnecessary to create a PowerPoint Presentation first, you would simply create your slides directly as html pages & link them as a slide show.

     The method used in recommended conversion of PowerPoint will change the slide (& any photos on the slide) to .gif format (FrontPage 2003) which would cause a lost of quality in color photos. Building the slide directly as an html page would allow the photos to retain their .jpg formatting.

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

•  Assignment 8 (print ready)

9. Tables (grid)

    •  Create & insert a grid table on at least one of your web site's pages.

    • Link to a page utilizing a grid table from your site's home page using a link labeled: Gird Table Example.

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

•  Assignment 9 (print ready)

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"

• Ask a Question

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

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

• Course Evaluation Form 

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

    •  Publish your web site.

•  Assignment 10 (print ready)

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

    <style type="text/css" media="print">
    body { display: none; }
    </style>

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

    <style type="text/css">
    pre {font-family:"arial";font-size:11pt;color:#000000}
    </style>

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

•  Assignment 11 (print ready)