HELP PLEASE

THIS IS CSIS 315

A Soldiers Scrapbook: Jakob Bauer is a curator at the Veterans Museum in Raleigh, North Carolina. Currently he is working on an exhibit called A Soldiers Scrapbook containing mementos, artifacts, journals, and other historic items from the Second World War. Youve been asked to work on a page for an interactive kiosk used by visitors to the exhibit. Jakob has already supplied much of the text and graphics for the kiosk pages but he wants you to complete the job by working on the page layout. The page you will work on provides an overview of the Normandy beach landings on June 6th, 1944. Since this page will be displayed only on the kiosk monitor, whose screen dimensions are known, youll employ a fixed layout based on a screen width of 1152 pixels. Jakob also wants you to include an interactive map of the Normandy coast where the user can hover a mouse pointer over location markers to view information associated with each map point. To create this effect, youll mark each map point as a hypertext link so that you can apply the hover pseudoclass to the location. In addition to the interactive map, Jakob wants you to create a drop cap for the first letter of the first paragraph in the article describing the Normandy invasion. The image above shows a preview of the company's home page that you'll create. The style sheets and graphic files have already been created for you. Your job is to write the HTML markup. Instructions This Case Problem contains interactive instructions that you can complete to ensure you've completed the instruction correctly. After reading each instruction thoroughly, perform the requested change in the code editor to the right. You can use the Build Website button to refresh your website preview at any point and view a full-page version of your website by clicking the arrow in the top right corner of your website preview.

1. Document Setup Enter your name and the date in the comment section of each file, and save them as ss_dday.html and ss_layout.css. Go to the ss_dday.html file and within the document head, create links to the ss_styles.css and ss_layout.css style sheet files. Study the content and structure of the document. Note that within the aside element is an image for the battle map with the ID #mapImage. Also note that there are six marker images enclosed within hypertext links with IDs ranging from #marker1 to #marker6. After each marker image are div elements of the .mapInfo class with IDs ranging from #info1 to #info6. Part of your style sheet will include style rules to display these div elements in response to the mouse pointer hovering over each of the six marker images.

2. Article Styles Go to the ss_layout.css file and then to the Article Styles section. Within this section, youll lay out the article describing the Normandy Invasion. Create a style rule to float the article element on the left margin and set its width to 384 pixels. First Line and Drop Cap Styles Jakob wants the first line from the article to be displayed in small capital letters. Go to the First Line and Drop Cap Styles section and create a style rule for the first paragraph of the article element and the first line of that paragraph, setting the font size to 1.25em and the font variant to small-caps. (Hint: Use the first-of-type pseudo-class for the paragraph and the first-line pseudo-element for the first line of that paragraph.) Jakob also wants the first letter of the first line in the articles opening paragraph to be displayed as a drop cap. Create a style rule for the articles first paragraph and first letter that applies the following styles: sets the size of the first letter to 4em in a serif font and floats it on the left, sets the line height to 0.8em, and sets the right and bottom margins to 5 pixels. (Hint: Use the first-letter pseudo-element for the first letter of that paragraph.)

3.Aside Styles The interactive map is placed within an aside element that Jakob wants displayed alongside the Normandy Invasion article. Go the Aside Styles section and create a style rule that sets the width of the aside element to 768 pixels and floats it on the left margin. Map Styles Next, you will lay out the interactive map. The interactive map is placed within a div element with the ID battleMap. Go to the Map Styles section and create a style rule for this element that sets its width to 688 pixels. Center the map by setting its top/bottom margins to 20 pixels and its left/right margins to auto. Place the map using relative positioning. The actual map image is placed within an img element with the ID mapImage. Create a style rule for this element that displays it as a block with awidth of 100%. Interactive Map Styles Go to the Interactive Map Styles section. Within this section, youll create style rules that position each of the six map markers onto the battle map. The markers are placed within hypertext links. Create a style rule for every a element of the battleMarkers class that places the hypertext link using absolute positioning. Create style rules for the six a elements with IDs ranging from marker1 to marker6, placing them at the following (top, left) coordinates: #marker1: (220, 340) #marker2: (194, 358) #marker3: (202, 400) #marker4: (217, 452) #marker5: (229, 498) #marker6: (246, 544) Map Information Styles The information associated with each map marker has been placed in div elements belonging to the mapInfo class. Go to the Map Information Styles section and create a style rule that hides this class of elements so that this information is not initially visible on the page. To display the information associated with each map maker, you need to create a style rule that changes the map informations display property in response to the mouse pointer hovering over the corresponding map marker. Since the map information follows the map marker in the HTML file, use the following selector (see Figure 2-12) to select the map information corresponding to the hovered map marker: a.battleMarkers:hover + div.mapInfo. Write a style rule for this selector that sets its display property to block.

4.Verify Open ss_dday.html and click the Build Website button. Verify that a drop cap appears for the first letter of the Normandy Invasion article and the first line of the first paragraph is displayed in small caps. Test the interactive map by first verifying that none of the information about the six battle locations appears on the page unless you hover your mouse pointer over the marker on the battle map. Further verify that when you are not hovering over the battle marker, the information is once again not visible on the page. Validate You can use the W3C HTML Validator to ensure that your HTML files adhere to World Wide Web (W3) standards. This also helps improve the readability of your HTML files, making them easier to work with.