Metropolitan State University

ICS 225 Web Design and Implementation

Lab 5: Menus and Arrays

Part I. Getting Started

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

• For each file, put the name of the file, your name and a brief description of the purpose of the page in comments at the top of the page.

• Use File | Save Page As (Firefox/Mozilla) or File | Save As (IE) to save a copy of the web page 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 for this lab. 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.

• Editors: Some students like using TextPad as their text editor rather than WordPad or NotePad. TextPad uses different colors and indenting to show the structure of your programs. However, you are welcome to use any editor you like. Dreamweaver (view code) is also available in the Metro State computer labs.

• 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. Play with Pop Out Menus

• Start with the Prettier Menu example from week 5. It can be found at http://cs.metrostate.edu/~fitzgesu/courses/ics225/spring2007/examples/menus/list6.htm

• Remove the underline from the links

• Change the link color on rollover

• Add a URL to several of the links in the submenus

• Change the color of the links after they have been visited

• 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

Part III. Playing with Arrays

• Start with the last ARRAY example we discussed in class (Sorting). It can be found at http://cs.metrostate.edu/~fitzgesu/courses/ics225/spring2007/examples/arrays/arraysort.htm

• Add another animal to the array. Add a row to display the animal’s information and write the code to display the animal’s information.

• Add another column to the data. Display the fourth column with the rest of the animal’s data.

• Add another button to the screen. Invite the user to click this button after they have made updates or changes to the animal data shown on the screen. When the button is clicked (onclick), call a function to take the new data and store it in the array. Now, when you click the Populate Data button, the new data should continue to show on the screen.

Part IV. Finishing Up

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