Lab 10b - HCI 201

It is a requirement for this lab to use FrontPage for questions 2 and 3. FrontPage is installed in all of the Depaul labs.

Search online for at least 2 Javascripts. Write a simple webpage and practice embedding these scripts. Add other elements to the page like headings, paragraphs etc..
Read the section in the frontpage tutorial about adding pictures. Write a webpage using frontpage that displays a few photos. You can use the biograph from the example as one of your photos. Add some other HTML elements to the page.
For this part you will create a new web page using layout tables in FrontPage 2003. Before you begin. Create the following sub directories of lab10 both locally and at your students account.

music, this is a subdirectory of lab10
photos, this is a subdirectory of lab10

Download this picture and save it to your photos directory.

http://condor.depaul.edu/~alarrain/hci201/photos/ruben.jpg

Download the music sample and save it to your music directory

http://condor.depaul.edu/~alarrain/hci201/sound/

Create a new Blank Page in front page and save it your lab10 directory.
Make sure your are in design view in FrontPage. From the main menu select --> Table --> Layout Tables and Cells
From the Task Pane select the following layout template.
In the design view this gives you 4 rectangles, each with different dimensions.
In the Upper Left Rectangle, type in the text

Music Samples by Ruben Delgado

Make the text a heading. Just highlight the text and select one of the headings
Add the picture of Ruben to the lower left rectangle. See FrontPage tutorial on adding pictures.

Remember the path to the photo is photos/ruben.jpg

Add this text to the same rectangle as Ruben's picture

Ruben Delgado was born in Alamagordo, New Mexico. Ruben currently lives in Fresno, California and teaches English and computers at the high school level. Check out some of his fabulous samples to the right.

Next place the music sample as a link in the lower right rectangle
If you did the above steps correctly when you view the page in the browser it should look like this

http://condor.depaul.edu/~alarrain/hci201/lab/rnostyle.gif

Play around and add some styles either use CSS or use FrontPage(or both) to add colors to each section. If you are adding CSS, remember go into code view and edit the html code. Here is what I did, Note you do not have to match what I did.

http://condor.depaul.edu/~alarrain/hci201/rwithstyle.html

Upload all files to your students account. Remember the directory structure. So at your students account you need to make music and photos a subdirectory of lab10

Check out your midterm, look at it in different browsers.
Work on Final Project