HCI 201 Multimedia and the WWW Winter 2006
Lab 3 – Creating a e-zine page
Note You are encouraged to work in pairs on this lab exercise. Make sure each team members uploads the files to his/her account and keeps a copy since this will be part of H3. Also note that the text for this article was published at http://www.cio.com/archive/120105/keynote.html all due credit should be given to the author.
1. Download the lab3.zip file from Course Documents/Week3
2. Unzip the file on your machine. Make sure you extract all files.
3. Open an SSH connection with your remote server on students.depaul.edu
4. I am sure by now you are convinced of the need to have a local copy of your website that has exactly the same structure as your account on students. How you achieve that is up to you, but here is what your final structure should look like:
You will be creating a lab3.htm file in Lab3.
5. Open FrontPage and create a new page called lab3.htm. The page will reside inside Lab3. This file uses images that are stored in Lab3_pic. This page will use a multi-table layout like the one highlighted in ciotest.htm, eventually your finished page should look more like cioAlmostDone.htm (you will need to put some finishing touches on it)
Sub pic/ Filler pic / Leadership Banner
Cio logo
/ Filler pic / Article title, summary, author
Filler pic / Main text
Copied from cio_text.txt
Picture
|______130px___||_10_||______740 px ______|
Details on the page requirements
6. All links to pages or file on your website should be done using relative paths, not absolute URLS
7. All links to external sites should open in a separate window
8. The page's title bar should display your name and information about which magazine the article is from and parts of the title of the article (remember this is the description of the page the user will see when the page is bookmarked
9. The page does not use a background, but the file cio_background.gif is used as a background picture for both tables.
10. The page is structured using two tables each with 3 columns.
a. The left column is reserved for logos and links. Since the background picture has 130 pixels of blue, the width of this column should be 130.
b. The middle column is just a filler. Each cell in the middle column is actually displaying a clear picture (dotclear.gif) and has a width of 10 pixels.
c. The right column contains a banner in the top table and the main content of the article in the lower table. Since the banner is 720x90 pixels, and we want some space around it, the width of the column should be 740 pixels.
What should be the width of each table?
What would be a height of the top table?
Table àInsertàTable
Right click on tables or cells for Properties (alignment, background colors etc)
Note In my examples I set the borders to a few pixels width and bright colors for your convenience. The final product should have all table borders set to 0
11. Once you have set up the top table, insert the correct pictures in each column (freeSub.gif, cleardot.gif, leadershipbanner.gif)
12. Modify the background color of the cells in the top table to match the background
Right click on the cell à Cell Properties à Background Color à More colors àSelect (dip the color picker in the background color of the background picture, it will automatically select the same color for the cell background)
13. Once you have set up the bottom table, fill out the first row by inserting the CIO logo in the left column and hyperlinking it to the magazine’s main page (you might want to google it), inserting the filler image dotclear.gif in the middle column, and copying the first few lines from cio_text.txt (see example). Don’t worry about the formatting for now, work on the next step first then come back to this.
14. In the second row, leave the left column empty for the time being, put the filler in the middle column, then copy the main text from cio_text.txt into the right column. You need to edit the text to space out paragraphs, create a bullet list for the 4 recommendations the author gives, format the first letter of the first paragraph, choose a font etc
15. As you can see from the example you need to insert a floating advertisement picture in the main text. I have inserted advertisement.gif right after the following sentence: “High school students who do not devote all their waking minutes to computers and programming feel they are unfit for careers in computer science.”
Right click on the picture à Picture Properties à Appearacne à Wrapping Style (Right) àLayout Alignment (Right), Layout Horizontal Space (10), Vertical Space (10) (the spacing will leave a small buffer between the picture and the text for readability
16. The left navigation column should contain an inner table with hyperlinks in each cell. Check out the actual cio.com page to get a sense of what the navigation menu should look like. The bullets are actually small images (arrow.gif). For H3 you will be required to add this part, for the time being don’t worry about it.