110 Final Project

Looking at the proliferation of personal web pages on the net, it looks like very soon everyone on earth will have 15 megabytes of fame.
      -- M. G. Siriam

If 1 Helen is the amount of beauty to launch a thousand ships, how much beauty does it take to launch a single ship? -- Anon.

Project Description

In CIS 110, you've gained experience creating web pages that reside on I) the UO web server; II) a hosted wiki; and, III) a hosted blog. In this final project, you will add new web pages to each of these three.

I. UO Web Page.

If you click Project PDFs in the links section to the left of this section, you can read Eric Meyer's Fixing Your Backgrounds tutorial.

If you click HTML & JPGs, you will see a directory that lists a number of .html files.  ch12proj.html, for example, is the completed tutorial. ch1201.html shows the initial web page at the start of the tutorial. The remaining .html files are "snapshots" illustrating each step of the tutorial. If you download these files you can read the tutorial and reproduce each step in TextPad without having to type a single character, by using copy-and-paste. At the end of the tutorial you will have learned how ch12proj.html was designed from the start.

To learn the CSS necessary to complete this part of the final project, you must complete the tutorial. After you have completed the tutorial, make the following modifications to the finished web page. Each time you modify the document, it is saved to a different file. When you have completed the following modifications a-c, below, you will have three .html files named header-bg.html, flip.html and flip-colors.html.

Use can use ch12proj.html to complete the following modifications :

  1. header-bg.html. Pick one of Eric Meyer's project files to get started. ch1215.html is the completed project (but you can use ch1214.html, ch1215.html, ch12proj.html-- whichever one looks best to you.). You can also use the file you created to complete the tutorial. Pick one file to get started and save it as header-bg.html. Complete Branching Out exercise #1, PDF p. 280.

    It's simplest to just use shell-fade.jpg for the background of the H1 element. You do not have to make any changes to the H3 element.

  2. flip.html. After solving the previous exercise, save header-bg.html as flip.html. Complete Branching Out exercise #2, PDF p. 280 (201 KB, 30-sec download @ 56KB/sec).

  3. flip-colors.html. After solving the previous exercise, save flip.html as flip-colors.html and choose new, compatible colors for the four states of the links in the div#content section.

    (Optional reading: Wikipedia: color-scheme, WestCiv: Styling Links and WestCiv: Visited Links.)

  4. Upload header-bg.html, flip.html, and flip-colors.html to /110/fp/ on shell.uoregon.edu.

  5. index-css.html. Using the CSS techniques you've learned in completing the previous steps, create a new 110 Project Index page.

    i. Move the index page you created for P3-A (/110/index-110.html) to /111/p3/index-110.html, and then create a new index page, /110/index-css.html, as follows:

    ii. You are welcome to use Eric Meyer's shell images for the backgrounds in index-110.html. In other words, you can save ch12proj.html as 110-index.html and then change the content and the links.

    If you have graphics editing skills, you can create or download public domain image(s) to use for the background(s), but this is not required for this project.

    In general, do not use copyrighted images for which you are not the copyright holder, unless the copyright holder states conditions under which it's permissible to use the image, and you can meet the conditions. For example, many copyrighted images may be used on non-commercial sites as long as the copyright holder is given credit; see Image Credits, below, as an example.

    There many places to acquire public domain photos. See Wikipedia: Public domain image resources. If you would like more information about CSS and background images, see WestCiv: creative use of images.

    iii. All the links in div#links will now be P3-A's div.leftNav links.

    iv. Add some CSS Buttons to div#content. Learn how in this css button tutorial. Example: See the Jump To section, below.

    iv. When complete install /110/index-css.html on shell.uoregon.edu.

II. VLT Wiki Pages.

Your VLT will collaborate on a new Front Page for your Wiki. The topic of the web page will be selected from one of the following categories:

Category A: What is Phishing and How to detect it. Briefly define Phishing and give some guidlines on how to detect when you're being phished. Go into your mailbox and pull out some examples of phishers trying to get you to reveal your eBay information, bank account information, etc.

Category B: What is Web 2.0? Briefly define what characterizes a Web 2.0 site, and find several example sites (but not the obvious ones like Google, Yahoo, Amazon, FaceBook, Flickr, and so on).

Category C: Taking Down your FaceBook site. Graduating students are discovering that prospective employers are researching you while you are researching the employer. Describe how a FaceBook site can negatively impact your job prospects now and for a long time to come. Recommend some best practices to get the best of both worlds: a FaceBook site that's fun and one that won't get you blackballed.

Complete this part of the final project as follows:

  1. Communicate with your VLT to decide which category you will collaborate on.

  2. Move or rename your current Wiki front page: Your Wiki administrator should save the current front page under a new name and link it to the new front page, so that it's still accessible. Name the link P4 Wiki Page.

    Edit the front page; copy all the code; cancel.
    Create a new page named "p4-page"; paste all the code; save.
    Edit the front page; delete the code no longer needed; add a P4 Wiki Page link that connects to p4-page.
  3. Collaborate as a team to create a new Front Page devoted to your selected topic. The Wiki version history is a log of member contributions.

    When you edit your Wiki's Front Page, remember to hit Save when you are done, as other people on your team may be trying to edit the same page. While you are editing the page, it will be locked to others.

    Wiki Page Editing Policy:     if the page has been locked and idle for 10 minutes, you may "steal" the lock.

III. Your Blogger Page: Add a YouTube Video Playlist.

  1. Read Add a YouTube Video Playlist to your Blog
  2. Create a new post in your blog.
    Title: Video Playlist.
    Add the playlist to your post.

IV. Extra Credit Option. No-scroll Links.

+5 pts added to FP score.

Observe that as you scroll the content of this page vertically, the links in the left Div scroll with it, and disappear from view. Read W3Schools: CSS Positioning to learn how to position the left Div relative to the viewport (rather than the Body element) so it will not scroll.

Do not spend any time on extra credit problems until you have completed all project requirements. Extra credit does not substitute for sub-standard work or requirements not completed.


Final Project Grading Rubric

C-Level (75/100): Complete Part I.
B-Level (85/100): Complete Parts I-II.
A-Level (100/100): Complete Parts I-II-III.

How to Submit the Final Project for Grading


On or before the due-date, submit your final project in Blackboard. Since you will be submitting your project URL, no local files need to be attached in Blackboard.

Image credits


Nautilus shell: scanned by and copyright Eric A. Meyer. CSS by Eric A. Meyer.

Jump to


Style sheet for the CSS buttons: buttons.css