CPSCI 105: Explorations in Computer Science

Lab 17

April 26, 2007

Frames

Frames suck, so I'm not going to teach you how to use them. (You can always read chapter 7 in Duckett on your own.) We'll just take a quick look at what they are. So open the following link in Firefox: Duckett's basic frame example.

Image Maps

1. Log in to your account on warp and make public_html your working directory.
2. Create a directory named nav in the working directory. Set its protections so that the web server can access it.
3. Make nav your working directory.
4. Use the following command to copy some files from the directory /home/public/web-authoring to your working directory:
   cp /home/public/web-authoring/map* .
   (Don't forget the dot—it's part of the bash command—it's not a period.)
5. Set the protections on your map* files so that they're readable over the web.
6. Now open your warp homepage in your favorite browser; modify the URL in the address bar to open the file map1.html that's now in your nav directory.
7. If the page doesn't display in your browser, check the following: Is the URL correct? Is everything in the URL spelled correctly? Are the permissions set correctly on the nav directory? Are the permissions set correctly on the map* files?
8. Now we'll briefly discuss what an image map is and how to make one accessible.

Horizontal Navigation

1. Go back to bash and make nav your working directory.
2. Use the following command to copy some files from the directory /home/public/web-authoring to your working directory:
   cp /home/public/web-authoring/tabs* .
   (Don't forget the dot—it's part of the bash command—it's not a period.)
3. Set the protections on your tab* files so that they're readable over the web.
4. Open the file tabs1.html in emacs. It's a very short document based on our XHTML template. Take a close look at the unordered list of hyperlinks on the page. After you've examined the file, keep it open in emacs.
5. Now open your warp homepage in your favorite browser; modify the URL in the address bar to open the file tabs1.html that's now in your nav directory.
6. Click on the tabs and see what happens. They should all work except for "Item five".
7. Now go back to emacs. Issue the command
       C-x 5 f
   (i.e., type control-x, take your hand finger off the control key, type a 5, and then type an f). When you are prompted for a file name, type tabs.css
8. We'll now discuss what's going on in the CSS and HTML files.

Vertical Navigation

1. Make sure that nav is your working directory.
2. Use the following command to copy some more files from the directory /home/public/web-authoring to your working directory:
   cp /home/public/web-authoring/buttons* .
3. Set the protections on your buttons* files so that they're readable over the web.
4. Open the file buttons1.html in emacs. It's based on our XHTML template. Take a close look at the unordered list of hyperlinks on the page. After you've examined the file, keep it open in emacs.
5. Now open your warp homepage in your favorite browser; modify the URL in the address bar to open the file buttons1.html that's now in your nav directory.
6. Click on the buttons and see what happens. They should all work except for "Item five" (and the ones marked "Fake Item").
7. Now go back to emacs. Issue the command
       C-x 5 f
   When you are prompted for a file name, type buttons.css
8. We'll now discuss what's going on in the CSS and HTML files.

Quiz 11

Do the following three tasks.

1. Create a file named tabs5.html (you can "create" it by copying one of the other tabs?.html files). Edit the title, h1, and p elements so that it's clear this file is functioning as "Item five". Edit the navigation list so that all the displayed tabs work correctly.
2. Create a file named buttons5.html (you can "create" it by copying one of the other buttons?.html files). Edit the title, h1, and p elements so that it's clear this file is functioning as "Item five". Edit the navigation list so that all the displayed buttons work correctly.
3. Put links to both of these pages in the appropriate place on your homepage. Be sure to test all links to make sure they work correctly.

[ Return to the CPSCI 105-01 homepage ]