XHTML:

1. This assignment is case sensitive. Be mindful of what you type.
2. Create a web page and save it as index.html
3. Create a table with 1 row and 5 columns. (mainMenu)
   • Table width: 700, cellpadding: 1, cellspacing: 1, border: (initially set as 1, when finished, change to 0)
   • Add style="vertical-align:top;" to each td
   • id: mainMenu
   • Put the following text in each td: | Home | About | Products | Services | Help |
   • Add an <a> tag around Home that points to index.html
4. Create a second table with 3 rows and 1 column. (aboutSubMenu)
   • Table cellpadding: 1, cellspacing: 1, border: (initially set as 1, when finished, change to 0)
   • id: aboutSubMenu
   • Put the following text in each td: | History | Mission | Vision |
   • Add <a> tags around each of the words that points to history.html, mission.html, etc.
5. Create a third table with 5 rows and 1 column. (productsSubMenu)
   • Table cellpadding: 1, cellspacing: 1, border: (initially set as 1, when finished, change to 0)
   • id: productsSubMenu
   • Put the following text in each td: | Product Listing | Order | Downloads | Trials | Accessories |
   • Add <a> tags around each of the words that points to productListing.html, order.html, etc.
6. Create a fourth table with 3 rows and 1 column. (servicesSubMenu)
   • Table cellpadding: 1, cellspacing: 1, border: (initially set as 1, when finished, change to 0)
   • id: servicesSubMenu
   • Put the following text in each td: | What we offer | Pricing | Guarantee |
   • Add <a> tags around each of the words that points to whatWeOffer.html, pricing.html, etc.
7. Create a fifth table with 3 rows and 1 column. (helpSubMenu)
   • Table cellpadding: 1, cellspacing: 1, border: (initially set as 1, when finished, change to 0)
   • id: helpSubMenu
   • Put the following text in each td: | Contact Us | Find a Location | FAQ |
   • Add <a> tags around each of the words that points to contactUs.html, findLocation.html, etc.

CSS:

1. Create an external style sheet called mystyles.css
2. Add a link tag to index.html that points to mystyles.css
3. Create a class: main
   • position: absolute
   • top: 10px
   • left: 10px
   • height: 30px
   • background-color: #ddddff
   • font-family: Arial, Helvetica, sans-serif
   • font-size: 10pt
   • color: navy
   • Add a class attribute to the mainMenu <table> tag that points to this class.
4. Create a class: about
   • position: absolute
   • top: 36px
   • left: 140px
   • display: none
   • background-color: #ddddff
   • Add a class attribute to the aboutSubMenu <table> tag that points to this class.
5. Create a class: products
   • position: absolute
   • top: 36px
   • left: 260px
   • display: none
   • background-color: #ddddff
   • Add a class attribute to the productsSubMenu <table> tag that points to this class.
6. Create a class: services
   • position: absolute
   • top: 36px
   • left: 445px
   • display: none
   • background-color: #ddddff
   • Add a class attribute to the servicesSubMenu <table> tag that points to this class.
7. Create a class: help
   • position: absolute
   • top: 36px
   • left: 596px
   • display: none
   • background-color: #ddddff
   • Add a class attribute to the helpSubMenu <table> tag that points to this class.
8. Create a class: subMenuA
   • text-decoration: none
   • font-family: Arial, Helvetica, sans-serif
   • color: navy
   • font-size:10pt
   • Add a class attribute to every <a> tag that points to this class.
9. Create a class: subMenuTd
   • border-bottom: 1px solid navy
   • width: 110px
   • In the four subMenu tables, add a class attribute to every <td> tag that points to this class.
10. Apply this style to h1
    • visibility:hidden

JavaScript:

1. JavaScript is case sensitive... be mindful of what you type.
2. When you add JavaScript, if the browser says it has restricted ActiveX controls, Click to 'Allow Blocked Content...'
3. In the mainMenu table:
   • Leave the Home <td> tag as is.
   • Add the following onmouseover event handler to the other four <td> tags, changing the bolded text to match the appropriate subMenu table name:
     • onmouseover="document.getElementById('aboutSubMenu').style.display='block';"
   • Add the following onmouseout event handler to the other four <td> tags, changing the bolded text to match the appropriate subMenu table name:
     • onmouseout="document.getElementById('aboutSubMenu').style.display='none';"
4. In the other four subMenu tables:
   • Add the following onmouseover event handler to every subMenu <table> tag, changing the bolded text to match the appropriate subMenu table name:
     • onmouseover="document.getElementById('aboutSubMenu').style.display='block';"
   • Add the following onmouseout event handler to every subMenu <table> tag, changing the bolded text to match the appropriate subMenu table name:
     • onmouseout="document.getElementById('aboutSubMenu').style.display='none';"
5. For every <a> tag on the page::
   • Add the following onmouseover event handler to every <a> tag:
     • onmouseover="this.style.color='#ffffff'"
   • Add the following onmouseout event handler to every <a> tag:
     • onmouseout="this.style.color='navy'"

1. Image showing the different parts of the solved exercise (shows rollovers): Exercise 15