Metropolitan State University

ICS 225 Web Design and Implementation

Lab 7: Horizontal Drop Down Menus

Vertical Drop Down Menus

Using Regular Expressions

Part I. Getting Started

• Create a directory called Lab7 and place all the parts of this lab in the directory.

• Use File | Save Page As (Firefox/Mozilla) or File | Save As (IE) to save a copy of the web pages to your disk space.

• Script debugging: Turn on debugging in Internet Explorer by selecting Tools, then Internet Options. Click on the Advanced tab. Be sure the box “Display a notification with every script error” is checked and the box “Disable Script Debugging” is not checked.

• Popups: Enable popups. Again, select Tools | Internet Options. Click on the Security tab. Click the Custom Level button. Enable the option to Allow Scripting Internet Explorer Webbrowser Controls. Disable the Pop Up Blocker.

• Testing: You do not need to upload your web page to the server in order to test it out. You can save your files on the H: drive while you are working on them tonight. To debug, simply display the directory that contains your files and double click on the file name. Your web page will be displayed using Internet Explorer (or whatever the default browser is on your computer). When you are completely finished, upload your files (including pictures) to the server and retest them to be sure nothing broke. Remember – filenames are case sensitive!

• View Source: From the browser you can click on View | Source to display the HTML tags and JavaScript for any web page.

Part II. Horizontal Drop Down Menus

• Start with the Horizontal Drop Down Menu example from week 7. It can be found at http://cs.metrostate.edu/~fitzgesu/courses/ics225/fall2006/examples/week6/Horiz.htm

• Make the menu boxes narrower

• Change the color of the box outline

• Change the color of the text

• Change the color of the background

• Change the font

• Make the text larger or smaller

• Add a URL to one or more of the links

Part III. Vertical Drop Down Menus

• Start with the Vertical Drop Down Menu example from week 7. It can be found at http://cs.metrostate.edu/~fitzgesu/courses/ics225/fall2006/examples/week7/Vert.htm

• Change the color of the text

• Change the color of the background

• Make sure all of the fonts match

• Add a URL to one or more of the links

• Remove the “stub” at the end of the horizontal menu

Part IV. Pattern Matching

• Start with the Regular Expressions example we discussed in class. It can be found at http://cs.metrostate.edu/~fitzgesu/courses/ics225/fall2006/examples/week5/regexp.html

• Add this pattern to the sample web page: (^| )myclass( |$)

Play with this example until you understand what patterns it will match and which it will not match.

• Add a pattern to the sample web page which will match your first name.

• Add a pattern to the sample web page which will match your first and last name.

• Add a pattern to the sample web page which will match the first and last names of anyone in your family (with the same last name).

• Learn more about regular expressions at http://www.greggriffiths.org/webdev/clientside/javascript/regex/

Part V. Finishing Up

• Upload your pages to the class server and test to be sure nothing broke.