CST161: Web Site Design

Project 7:  "Kansas Statewide Races" Web Page

The "Kansas Statewide Races" web page from the ElectionWeb website is shown below. Download the files from the previous link and complete the web document following the instructions for the assignment described below.

CST161 Project 7

  1. Using an HTML editor, open the kansas.htm, district1.htm, district2.htm, district3.htm and district4.htm web documents and ewstyles.css style sheet files from the download and insert comments containing your name and the project due date in all of them
  2. Go to the kansas.htm file in your text editor. Use the meta element to specify your name as the document author, and Kansas and elections as keywords for web search engines.
  3. Set the base target of the web page to _blank so that links on the page open in a new browser window or tab.
  4. Go to the page body and immediately after the opening <body> tag insert the following:
    1. A header block.
    2. Within the header an inline image with the ewlogo.png source image and the alternate text ElectionWeb.
  5. Then directly below the header element insert a navigation list with the following content:
    1. A nav block.
    2. An h2 heading with the text News Sources
    3. An unordered list containing the following entries: Yahoo! News, FOX News, CNN, MSNBC, Google News, New York Times, digg, Washington Post, LATimes, Reuters, ABCNews and USA Today.
    4. Look up the web addresses of the 12 news sources and link your list entries to the appropriate web sites.
  6. Scroll down to the paragraph just before the closing </section> tag and link the text Secretary of State to the Office of the Kansas Secretary of State web site (look up the web address of the Kansas Secretary of State).
  7. Immediately after the closing </section> tag insert the following:
    1. A figure block.
    2. Within the figure block an inline image with the kansasmap.png source image and the alternate text Kansas.
    3. Following the image add a <figcaption>with the text Click to view congressional district results.
  8. Directly below the figure box, create an image map named kansasdistricts containing four polygonal hotspots for each of the four Kansas congressional districts. Use the coordinates found in the "dcoords.txt" file as the coordinates of the hotspots.
  9. Set the hotspots in your image map to access the district1.htm, district2.htm, district3.htm and district4.htm files using the target attribute value _self so that those web pages open within the current browser window or tab (the coordinates for the polygon are given in the dcoords.txt file)
  10. Apply the kansasdistricts image map to the "kansasmap.png" inline image.
  11. Save your changes to the file.
  12. Go to the district1.htm file in your text editor. Click the previous link in this paragraph to view an image of the web page (will open in a new browser tab or window).
  13. Go to the page body and immediately after the opening <body> tag insert the following (exactly as you did for the kansas.htm web document):
    1. A header block.
    2. Within the header an inline image with the ewlogo.png source image and the alternate text ElectionWeb.
  14. Directly below the opening <section> tag, insert a navigation list within a nav block that contains an unordered list with the items District 1, District 2, District 3 and District 4. Link each entry to its corresponding web page in the "ElectionWeb" web site.
  15. Scroll down to the paragraph just before the closing </section> tag and link the text statewide races to the kansas.htm file.
  16. Immediately after the closing </section> tag insert the following (exactly as you did for the kansas.htm web document):
    1. A figure block.
    2. Within the figure block an inline image with the kansasmap.png source image and the alternate text Kansas.
    3. Following the image add a <figcaption>with the text Click to view congressional district results.
  17. Apply the same image map you created in for the kansas.htm file to the "kansasmap.png" inline image.
  18. Save your changes to the file.
  19. Open the district2.htm, district3.htm and district4.htm files in your text editor and repeat Steps 13 through 17 for each file. Click the previous links in this paragraph to view images of the web pages (each will open in a new browser tab or window).
  20. Open the kansas.htm file in your web browser and verify that you can navigate through all the pages by clicking the hypertext links within the page body and within the image maps. Verify that you can access the external web sites listed in the news sources and the Office of the Kansas Secretary of State, and that these links open in a new browser tab or window.