[ Syllabus ][ Lab Assignments ][ Downloadable Resources ][ Back to Home ]

[Summer Session 2000 Watermark] [Computer Lab Assignments]

EXTRA CREDIT: A Webpage of Your Own

In this optional exercise, students will build an "About Me!" Web Page [on their own time!] to include not only a little information about themselves, but to also "showcase" some of the multimedia files they have created in other lab exercises. It is also hoped that students will link to these pages from their course Web project modules so that subsequent "visitors" to the site(s) they build will get to meet the authors!

Specifically, students wishing to take advantage of the extra credit points will:

  1. Log-on to the Social Science Mac Lab Computers
  2. Create your own Web Page & upload it to your UHUNIX account
  3. Add hyperlinks & images to your "bio.html" page
  4. Build links to other multimedia files [e.g., movie & audio files]
  5. Revisit some of the ethical concerns everyone should keep in mind when posting personal information on the Web
  6. Finally, don't forget to Log-out!

[anamated line]

CREATE an About Me! Web Page

    Now that you are familiar with some of the basics of HTML, it is your job to create an "About Me!" web page for your multimedia project -- that is, if you wish to receive any extra credit points! A "starter" page, or template, has been provided for you. From Netscape, simply us the "Save As..." option under the File menu making sure to save it to your "Guest" folder as source. Once you have done this, open it up in Dreamweaver [to see &/or edit the HTML tags, click on "HTML" in the Launcher Palette].

    [Screen Shot of Template]

    Here are the things that I will expect you to include on your page:

    • A short paragraph about yourself [you can change it later if you wish]
    • A link to your QuickTime Resume [download it from "lab_05" sub-directory on the "www.soc.hawaii.edu" server]
    • Another paragraph that describes your proposed multimedia project. Include a link to the Com 337 home page in your description
    • 1-3 external links to your favorite sites
    • At least one graphic of your choosing
        Check out the Awesome Icons Web site for hundreds of free icons you can use on your web pages
        Instructions on how to get graphics off the Web are available from Awesome Icons' Download Instructions page.

    [Browser View of Bio Template]

    From time to time, you might want to "preview" your work-in-progress to see how it will be displayed. To Preview your page you need to first save your document. For this assignment save it as bio.html. You should always end the name of the file with .html to indicate that it is a file containing HTML tags.

    Hit the "F-12" button to view the page in Dreamweaver's default browser, or load the page in your open browser window manually.

    When you are done you will need to use Fetch to UPLOAD your document and any graphics to your public_html directory in your own Uhunix account. Revisit Lab Assignment #4 to review the proceedures.


Adding Images & Hyperlinks [REVIEW]

    As was discussed in Lab Assignment #4 [and expanded upon in Lab #5], to insert a picture in your Web document simply place the cursor where you wish to place the image [hit Return to open up a space if necessary], and then simply click on the top button of the Object Palette and then browse to the folder where the desired image is stored, select the graphic file [usually a .gif or a .jpg file], click select then click "OK." The picture should appear at the place in your Web document where your cursor was last located.

    You've already learned how to position images to the Left, Right, or Center of the page by clicking next to the image and then using the text align icon in the Property inspector. You probably also remember that you can also position images in relation to text using the Image Property inspector and selecting the alignment attribute you wish from the Align pull-down menu.
    So... ummmm... carry on then!

    IMPORTANT NOTE: If you don't specify alignment for an image file, the browser default is "Bottom," which causes the image to appear at the left of the screen with its bottom edge aligned with the baseline of the text that follows it. Anumber of other variations -- Absolute Bottom, Middle, Absolute Middie, Top, and Text Top -- move the first line of the adjacent paragraph to various heights beside the image. Any of these settings work will for single-line captions, but not when you're trying to integrate an image with blocks of body text.

    Hyperlinks

    As was discussed in Lab Assignment #5, Dreamweaver makes is easy to set a link to another Web site -- all you need to do is highlight the anchor text for the hyperlink, then type in the complete URL in the Link box in the Property inspector.

[ Setting up an External Link in Property inspector]


Linking to Multimedia Files [REVIEW]

    As you have learned throughout this course, Webmasters now have a rich variety of multimedia options -- from animated interactivity to streaming sound and video. You could use Flash, for example, to create interactive Shockwave movies, as well as add increased functionality to your Website. Keep in mind, however, that many multimedia files require a "plug-in," to extend the cababilities of your browser and allow you to access the multimedia file(s). You must have the proper plug-in installed or you won't be able to see the designed effect. Several of the audio and movie files you have [will have] created in this course take advantage of plug-ins that now come "standard" with most browser software or are easily obtained from free download sites.

    So, do you remember all the "fun" we had completing Lab Assignment #5? Well, if you do, you probably also recall learning how easy it was to add HTML links [absolute, document-relative & site-root-relative paths] to Web page(s). The process is not much different when the file we wish to link to is a multimedia file [ie., audio, video, animation] instead of an HTML document. Using either text or a graphic as an "anchor," highlight the text/graphic and use the Property inspector to enter the URL in the Link text box for the media file you wish to link to.


Ethical Concerns... Revisited!

    Again, we revisit the questions raised in Lab Assignment #2 when we created our electronic résumé. . . How much personal information should you reveal about yourself on your Web site? Unfortunately, crime exists in Cyberspace as it does in "Real Space." Stories of stalkers seeking victims via online documents or chat rooms abound. Because of the privacy concerns created by online media, you should be cautious -- think twice before you post anything too personal on your Web Page.

    My general advice is that you avoid listing your home address or phone number -- your "About me" Web Page will be "public" information the whole world can see! It is advisable, however, to provide an email address so visitors to your website can contact you. . . but protect your privacy by not revealing much else!


 

[ Syllabus ][ Lab Assignments ][ Downloadable Resources ][ Back to Home ]


 
Copyright © 2000

 
By: M. R. Ogden -- ogden@hawaii.edu   (Rev. 19 June 2000)