-
Augment the index page for your web site with some content and a stylesheet.
Add six paragraphs of Latin text to the index page for your web site. You can get this text from lipsum.com. Change the form at the bottom of the page to get six paragraphs rather than the default (5). Copy the paragraphs from the result page into your page after the h1 element. Wrap each paragraph in p elements so they do not all run together.
Add the class hover-target to paragraphs 2, 3, and 5. Add the class important to paragraphs 3 and 6.
If your site does not have a css directory yet, add it now. Be careful to capitalize it like that: mis-capitalization will lead to a site that works when you test it, but not when I copy it to babbage. You can add it from within Dreamweaver by right-clicking on the Site folder, choosing , and typing the proper name over the default (“untitled”). Right-click on the css directory, and select , and rename that to assignment_04.css
Put a link to the stylesheet in the head of your index page:
<link rel="stylesheet" type="text/css" href="css/assignment_04.css" />
Be sure to put in both the rel and type attributes so your code validates.
Now add some rules to your stylesheet: make the background color of the entire page a light color (light gray is okay) and the text a dark color (black is okay). Test your web page to be sure the paragraphs show up, and that the page is displayed with dark text on a light background. Click both the XHTML and CSS links at the bottom to be sure everything validates with no errors or warnings.
-
Add distinctive appearances for elements with the important and active classes.
That’s not a typo: you are to make elements with the active class have a distinct appearance even nothing in your web page has that class (yet!). And do not make the elements with the hover-target class look any different from the other paragraphs (yet!!).
Make the important paragraphs display in italics (font-style:italic;), and make the active paragraphs display in reverse video (light text on a dark background). Reload the page and verify that paragraphs 3 and 6 are displayed in italics.
-
Add a JavaScript application to create the action.
Use the JavaScript skeleton code to create a script file named assignment_04.js in your scripts directory, and update your index page so it has links to just core.js and this file.
In the init(), get a list of all the elements in the document, and then loop all these elements. Use Core.hasClass() function to test each element to see if it has the class hover-target, and if it does, add two event listeners to it: mouseoverListener, and mouseoutListener.
Add the two event listener functions to the anonymous self-executing function. This assignment makes no use of the event object passed to event listeners, but as an exercise, set it up properly as shown in class on October 15. For example:
Core.start ( ( function() { function mouseoverListener(evt) { evt = evt ? evt : window.event; etc.
Simply have mouseoverListener() add the class active to the element that caused the mouseover event (this), and have mouseoutListener remove the class.
Test your code carefully to be sure it works properly with no JavaScript errors (the Firebug icon in the browser status bar will change to a red circle with an X if there is an error:
.
Make sure your page still passes both the XHTML and CSS external validators with no errors or warnings.
Add margins and padding to your page so the layout looks “good.” When finished, you should end up with something like this (note the cursor hovering over the second paragraph):
