 Graphic by Keith Ohlfs |
|
|
Graphic by Keith Ohlfs |
|
There are 3 pieces to this problem set: the prelaboratory assignment, the laboratory assignment and the homework assignment. You are required to do all three parts. We recommend that you do the prelaboratory assignment before your lab section, the laboratory assignment during your lab section and the homework assignment after completing the prelab and lab assignments.
Prelab Assignment: Although it is required that you complete the prelab, you are not expected to turn in any materials for the prelaboratory assignment.
Laboratory Assignment: Upload your webpage (the index.html file and any associated local files (including image files)) to your public_html folder. Also, upload these files to your folder in the ps1 drop folder in the cs111 folder. Turn in a hardcopy of your index.html file.
Homework Assignment: Name your completed file <your-user-name>-ink.html and upload it to your folder in the ps1 drop folder in the cs111 folder. Turn in a hardcopy of your html file.
When submitting your hardcopies, we ask that you turn in only one package of materials. Please staple your files together with a cover page, and submit your hardcopy package by placing it in the box outside of Jennifer's office (E104, directly across from E101).
IMPORTANT NOTE - Once you have used Fetch to upload a file to the cs111 server, you should be sure to doublecheck that the file was actually uploaded. You can do this in Fetch by verifying that the file is now listed in your directory. Not only should you check that the file is listed, but you should check that it does not have a size of 0K. If the file isn't listed or if the size for the document is 0K, this means that there was an error in transferring it via Fetch and you must re-upload the document. When transferring a folder, you should check that its contents have been uploaded correctly. That is, you should be sure to check that every single file that you wish to submit has been uploaded correctly. Often times, although not always, you will see a message "Connection Failed" when there is an error in transferring your files.
ANOTHER IMPORTANT NOTE - It is your responsibility to keep a personal back-up of every file that you submit electronically until you have received a grade for the assignment.
On the cs111 server there is a file called blankpage.html. Use Fetch to connect to the cs111 server (not Sallie, which is the default connection on the machines in E101) using your username and password. If you are unsure how to use Fetch, review the documentation. You will be in your own directory folder. The folder that contains your directory folder contains folders for all the other students as well as a directory named cs111. You can navigate to these other folders by selecting users in the menu at the top of the Fetch window. Click on the cs111 folder. Now click on the folder named download. You will find a file called blankpage.html. Download this file by dragging it to your desktop.
Now startup Symantec Cafe project manager. If you are not sure how to do this, read the documentation for editing files in Cafe. Open the blankpage.html file. Edit it to contain the header with your name. E.g. Georgia Dome would have the header "Georgia Dome's New Web Page". Edit the body of the page to say "This is now Georgia Dome's web page!", except use your name instead. Don't worry about creating a magnificent homepage right now. We will do that in lab! Save your edited file as index.html.
Upload your edited file into your public_html folder in your directory on the cs111 server. After you do this, you should be able to jump to your new page by clicking on your name in the CS111 Class List page.
Carefully read the home page laboratory assignment below to learn about what you will be doing during lab. Note that you will be asked to build your own home page and that this home page must include different styles of text and links to the web. Think about what you might like to do for your home page. Explore the web noting sites that you might like to use a part of as a model for your home page, or that you might like to link to in your home page. Use "view document source" to find out how a specific page is implemented on the web. Save the address of the site and/or the piece of html source for accomplishing any examples that interest you. (You can write these to a text file and save it to a floppy to bring with you to lab). Go to the URL site: http://www.wellesley.edu/OneCard/Photo-Directory/ where all the Wellesley student photos are stored and navigate to your student ID photo.
During this lab, you will create your home page for the course. You will use the information you collected for the prelab assignment, plus whatever witty, original and interesting things you care to include to make a marvelous home page. During lab, we will take pictures of each of you so that you will have a picture of yourself that you may use on your page. These pictures take some time to process and will be available sometime after lab for inclusion in your page. In the meantime (during lab), you can include your student ID photo.
1. A title.
2. An introduction of yourself to your fellow students.
3. At least one image (this can be your picture that we take today, or some other image of your choice).
You should have some information about the following things prepared from your prelab. Use that to include:
4. At least three different styles of text (e.g. different sizes, bold face, italic, etc).
5. At least three links to the web ("My favorite links"), one of which is an image.
When you are done, you can upload your webpage with the name: index.html into your public_html folder (which will make it visible on the web). Then click on your name in the class list to see if it works! (Note, you will replace the simple index.html file you uploaded for the prelab. That's OK.)
Ink Incorporated, an ink and dye company, is experiencing a crisis. Last week, Paige D. Zeiner, the company's sole HTML programmer, left for a higher-paying job at a Wall Street investment firm. And this week, when their file server crashed, the only copy of their web page file was irretrievably lost. A search of Paige's old cubicle turned up only a hardcopy printout of the company web page and a few notes that Paige wrote about HTML.
You have been hired by Ink Inc. to re-implement their web page based on the hardcopy printout and Paige's HTML notes. A scanned-in image of the hardcopy printout appears at the end of this document; Paige's notes appear below. The president of the company likes Paige's original web page design and wants you to copy her design exactly, without making any stylistic changes. (Note - If you are looking at a black and white printout of this assignment, you should recognize that the image contains colors that you should consider.) She tells you that Paige's page was elegantly designed because the alignments present in the document were maintained when the browser window was resized and she wants you to preserve this feature too. She also tells you that Ink Inc. has no programs like Claris Home Page to help you and that you must write your HTML code without the use of such a program. For ease of future maintainability of your code, she tells you that she wants you to format your HTML code for readability. To this end, she recommends using an indentation of 2-4 spaces per nesting level, using a matching close tag (e.g. </td>, </tr>) for every open tag, and appropriate comments (<! This is a comment in HTML>). She hands you Paige's notes and asks you to get to work.
According to Paige's notes, she decided to break up the overall problem of designing the web page into 3 main parts, solving each separately: 1) the Ink Inc. logo, 2) the main body of the advertisement, and 3) Ink Inc.'s telephone number.
She also had the following notes which you should follow as closely as possible :
Images or links: None used.
Logo: Centered logo. Entire logo is a table. Use nested tables! Font size for words "Ink Inc." is 7. Corner blocks are 20 x 20 pixels, center block is 50 x 50 pixels. Pay attention to alignments! Important table features are below.
Main body: Centered entire table. Nested tables and/or lists! Important table features are below.
Telephone number: Just simple text.
Tables: A table with k rows and n columns is specified as follows (the notation (i,j) means the datum in the table cell at row i and column j):
<table table-attributes>
<tr><td datum-attributes>(1,1)</td> ... <td datum-attributes>(1,n)</td></tr>
... rows 2 through k-1 go here ...
<tr><td datum-attributes>(k,1)</td> ... <td datum-attributes>(k,n)</td></tr>
</table>
The special token is for the contents of an empty table cell.
table-attributes include:
datum-attributes include:
