BSEN307 E-Commerce Website II
CSS-DHTML Final In Class Lab Project
Description:
This project will allow you to demonstrate your capability to apply CSS and
DHTML concepts to a web page. You will use a combination of CSS techniques
and interactive DHTML elements to perform the following actions and create the
effects as indicated.
Section 1.
Make a copy of
this page and modify the presentation using an external style sheet called 'css-dhtml-final'
based upon the following descriptions. Place all necessary pages and pictures in
a folder labeled 'BSEN307 Final CSS-DHTML yourname'.
- Apply the image image15.gif as a background image. Make it fixed
compared to the text content. The image can be found in the course
folder on the N: drive.
- Center all H1 tags.
- Underline and Center all H2 tags.
- Make all H4 tags use font Broadway and font size 16.
- Apply a 1px straight border around all paragraphs.
Section 2.
Modify the page you created in Section 1. above, to display the following DHTML effects. For each of the
following instructions write the appropriate Javascript commands
or functions into this page and modify the HTML as needed.
Instructions:
- Use relative positioning to place a piece of clipart above the Section 2.
heading. It should be 200 pixels from the left side of the page.
- Create a text area that uses a click to change the background of this page
to blue.
- Create a text area that uses a double click to change the background of
this page back to the original image.
- Place a piece of clipart on this page. Make a button that will hide
the image. Use a mouseover on the image to bring it back to the page.
- Create a set of three radio buttons labeled right, center,
left. When a button is checked it will adjust the Section 1
headings alignment as indicated by the button.
- Make a button called Product Picture. When the button is clicked it
will display a piece of clipart. When the button is double clicked the
size of the image will double. Clicking on the image itself will cause
the image to go away.
- Make a group of three check boxes labeled blue, orange, teal. Use a
button to change the font color based upon the selection of the check
box. Clear the check boxes after the change.
- Make a button that will turn the paragraph borders on the page green.
- Make a button that will turn just the bottom border of the last paragraph
to red, 10 pixels and grooved.
- Make text area that will turn the Section 2 heading into Times New Roman
or Courier or Comic Sans MS or Forte based upon a mouseover event.
- Make a text area that will change the size of the font in the text
paragraph below the Section 2 heading to 8pts and yellow font using comic
sans ms, when clicked.
- Make a button that will change the alignment of the content of the text,
in the paragraph below the Section 2 heading, to center
alignment.
- Make a text area that will change the border width of the paragraph
described above
to 3, 6 or 9 pixels when clicked.
- Make a text area that will change the background color of the paragraph
described above to purple when the mouse moves over the text and turns it
lime when the mouse leaves the text.
- Make a button that will return the paragraph modified above to its
original condition.
top
|