How to Create the Product webpage of Chapter 11 working with images and icons. Halloween 11 Create a product page In this exercise, you’ll create a product page that uses a variety of features for working with images. When you’re through, the page should look similar to this: Specifications • To create the product page, you can copy the index.html file you worked on in exercise 7 to the products folder and rename it cat.html. Then, you can delete the content from the section, modify the URLs on the page as necessary, and add the content shown above. • Create a new style sheet named product.css for the product page, and copy the styles you need from the main.css file to this style sheet. Then, modify the link element for the style sheet in the cat.html file so it points to the correct style sheet. • Modify the horizontal navigation menu so it indicates that no page is current. • In the section, float the image to the left of the text. In addition, set the left margin for the text so if the product description is longer, the text won’t flow below the image. • Assign an id to the left sidebar, and modify the CSS so it refers to the sidebar by that id. • Add another sidebar with a width of 180 pixels that’s floated to the right of the main section, and assign an id to that sidebar. Set the background color of the right sidebar to #F5DEB3 • Add a heading to the right sidebar, formatted as shown above. Then, add an unordered list with three list items. Each list item should include a figure with a link that includes an image and a figure caption that includes a text link. The images are named flying_bats.jpg, rat1.jpg, and strobe1.jpg. Be sure to size the images appropriately. • Format the links in the right sidebar so they’re displayed in black whether or not they’ve been visited. If a link has the focus or the mouse is hovering over it, though, it should be displayed in green. • Adjust the margins and padding as necessary so the page looks as shown above. • Add a circular image map for the pumpkin image in the header. When this image map is clicked, the home page should be displayed. • Add the link element for the favicon to the head element of the HTML document. You’ll find the favicon in the images folder.
How to Create the Product webpage of Chapter 11 working with images and icons.
Halloween 11 Create a product page In this exercise, you’ll create a product page that uses a variety of features for working with images. When you’re through, the page should look similar to this:
Specifications
• To create the product page, you can copy the index.html file you worked on in exercise 7 to the products folder and rename it cat.html. Then, you can delete the content from the section, modify the URLs on the page as necessary, and add the content shown above.
• Create a new style sheet named product.css for the product page, and copy the styles you need from the main.css file to this style sheet. Then, modify the link element for the style sheet in the cat.html file so it points to the correct style sheet.
• Modify the horizontal navigation menu so it indicates that no page is current.
• In the section, float the image to the left of the text. In addition, set the left margin for the text so if the product description is longer, the text won’t flow below the image.
• Assign an id to the left sidebar, and modify the CSS so it refers to the sidebar by that id.
• Add another sidebar with a width of 180 pixels that’s floated to the right of the main section, and assign an id to that sidebar. Set the background color of the right sidebar to #F5DEB3
• Add a heading to the right sidebar, formatted as shown above. Then, add an unordered list with three list items. Each list item should include a figure with a link that includes an image and a figure caption that includes a text link. The images are named flying_bats.jpg, rat1.jpg, and strobe1.jpg. Be sure to size the images appropriately.
• Format the links in the right sidebar so they’re displayed in black whether or not they’ve been visited. If a link has the focus or the mouse is hovering over it, though, it should be displayed in green.
• Adjust the margins and padding as necessary so the page looks as shown above.
• Add a circular image map for the pumpkin image in the header. When this image map is clicked, the home page should be displayed.
• Add the link element for the favicon to the head element of the HTML document. You’ll find the favicon in the images folder.
Trending now
This is a popular solution!
Step by step
Solved in 2 steps with 6 images
