Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

In the Lab 2: Mapping a Horizontal Navigation Bar Problem: You are learning how to utilize a button bar on a Web page as seen

image text in transcribed
image text in transcribed
image text in transcribed
image text in transcribed
In the Lab 2: Mapping a Horizontal Navigation Bar Problem: You are learning how to utilize a button bar on a Web page as seen in many Web sites. Use age mapping skills to create a Web page that has four circular links. You plan to create a We e similar to the one shown in Figure 5-40, with the file bluebuttons.jpg as an image map that li your to the sample.html Web page Figure 5-40 Instructions: Perform the following steps sing Paint, open the file bluebuttons.jpg from the Chapter05IntheLab folder 2. Each area on the image is a circular shape. Use good judgment when planning the shapes of your image map, ensuring that no clickable areas overlap from one circular shape into another and that each shape makes sense for its respective area. Using Paint, estimate the x- and y-coordinates necessary to create four circular clickable areas on the bluebuttons.jpg image. (Hint: For a circular shape, find the coordinates of the center of the circle, then one point on the edge of the circle Determine the radius, as discussed in the chapter.) 3. Using Notepad*+, create a new HTMI file with the title Lab 5-2 in the title section. Add a link to 4. Begin the body section by adding a one-row, three-data-cell table. The first cell contains the 5. Within a ediv>container, insert the image bluebuttons.jpg that is used for the image map 6. Insert a bulleted list and use the image bulbsm.png as the bullet type. (Hint: Use the list-style- the external style sheet lab5-2styles.css that is included in the Data Files. Add the headings (one h and two h2 headings) and text as shown in Figure 5-40. brightidealogo.png image; the second cell contains an chl> heading as shown in Figure 5-40. Include the special character (see Appendix F for the registered trademark in the third data cell. Use the usemap attribute usemap-"#menubar" in the cimgs tag. Enter the required cmap tags to create the image map named menubar. image and include a URI for the image.) The bullet text should have font-size of 11 point and font-style of italic. In the Lab HTML 279 er the careas tags required to define four circular clickable areas on the image bluebuttons.jipg. Use the x- and y-coordinates determined in Step 2 and set the href attributes to link to the home ge, the e-mail link, and two links to the sample.html Web pa s. Create the navigation bar shown at the bottom of the Web page. 9. Save the HTML file in the Chapter05\IntheLab folder using the filename lab5-2solution.html. Validate the Web page(s) using W3C. Print the HTML, file. 10. Open the file labs-2solution.html in your browser and test the image map and text links. I1. Print the main Web page. 12. Submit the completed HTML files and Web pages in the format specified by your instructor. In the Lab ting a Home Builder's Web Site I Monteg increase the reach of his home building business. Weh site with a home page 0. Google Bright Idea use bluebuttonspg for image map Welcome to Bright Idea t innovators for over forty years Our first "bright ide was to gasher logetie pinering indeduad o shae their Phoughis, gpet foodback on new deas, and purchase products devlsoedly hese individuals We advise dients on a wide range of creative endeavors We have over 200 patents registered today with another 20 in process Our clients have created new and innovative businesses, servioes, lools, safety devices, and engineering models. Our product line is extensive We can help you develop your: image used as bullet type Patents nnovaive ideas Entrepreneur products Hon e ~ Ema ~ Shopping ~ ltrmaton4 navigation bar Figure 5-40

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access with AI-Powered Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Students also viewed these Databases questions