Programming Assignment 2 utilizes Cascading Style Sheets (CSS) for implementing
ID: 3791461 • Letter: P
Question
Programming Assignment 2 utilizes Cascading Style Sheets (CSS) for implementing the home page (index.html) for the Nunavut Tribal Society. A suggested implementation for the homepage, index.html is illustrated in Fig. 1 below:
Note: The div sections shown below are examples and are referenced in the sections that follow.
caribou2.jpg
div 2
The background color used for the most of the HTML’s body is #5E0E03. The background image for the whole document is bg_head2.bmp.
A close-up view of the example homepage is shown below:
The details for this homepage are described as follows:
div 1
div 1 (banner section) has the following properties:
The font of the .heading text is script mt bold
The two images - PolarBearsFirePartyGrillingAnimated.gif and header1a.bmp- must be included in this section and this section should include the heading “Nunavut Tribal Society” in the text using Script MT Bold. A solid border should surround this div. The images will have to be resized appropriately in order to be displayed properly in this div.
div 2
div 2 contains the following menu items that stretch across the top of this section
:
Note - “Contact Us” should be displayed on the same horizontal line with the other menus - because of display constraints in MS Word it is displayed beneath “Visitors” but should actually be placed to the right of “Visitors”.
The example illustrates a menu having a font of Arial and a font size of 11px. These top level menus should contain the text labels as shown. Each of these menus will display a submenu when the mouse hovers over them. A given submenu is then highlighted in red when the mouse hovers over it. A description of each submenu is given as follows:
Campgrounds
When the mouse hovers over the Campgrounds menu, the following submenu is displayed:
Each submenu item must be implemented as a link. The example above displays the links with a slightly darker red color than the top-level menu - (124,14,3). When the mouse hovers over a submenu item, the submenu should be highlighted as shown above. The background for the submenu is (94,14,3). The text for the submenu should be red when the mouse hovers over it. Otherwise, the submenu should be displayed as white. River Flats, and Sam’s Camping are the two submenus displayed above.
Each submenu item must be implemented as a link. For programming assignment 2, these links do not have to be associated with an existing HTML page.
Products
When the mouse hovers over the Products menu, the following submenu is displayed:
Each submenu item must be implemented as a link.
The link associated for Our Store should be connected to the store_index.htm page implemented in programming assignment 1. Upon pressing Our Store will direct the user to store_index.htm and display the following page (implemented in programming assignment 1).
store_index.htm
The Our Store link is the only sub-menu checked in programming assignment 2. There will also be twelve product links implemented in this programming assignment for the Footwear, Jewelry, and Crafts links. See the “Products” section on page 8.
Tours
Each submenu item must be implemented as a link. For programming assignment 2, these links do not have to be associated with an existing HTML page.
Hotels
Each submenu item must be implemented as a link. For programming assignment 2, these links do not have to be associated with an existing HTML page.
Restaurants
Each submenu item must be implemented as a link. For programming assignment 2, these links do not have to be associated with an existing HTML page.
Members
When the mouse hovers over the Members menu, the following submenu is displayed:
Each submenu item must be implemented as a link. For programming assignment 2, these links do not have to be associated with an existing HTML page.
Visitors
When the mouse hovers over the Visitors menu, the following submenu is displayed:
Each submenu item must be implemented as a link. For programming assignment 2, these links do not have to be associated with an existing HTML page.
Contact Us
When the mouse hovers over the Contact Us menu, the following submenu is displayed:
Each submenu item must be implemented as a link. For programming assignment 2, these links do not have to be associated with an existing HTML page.
div 3
div 3 is located on the right side of the home page and pertains to current information/events. div 3 has the following properties:
Contains 3 images - bear1.bmp, bear2.bmp, 3.jpg, baby-polar-bear.jpg - implemented as hyperlinks. Text for each hyperlink is “Current Events”, “Chief’s Message” and “Conservation Efforts” also shown in Fig. 1 and displayed over the image. For this assignment, the links do not have to be associated with an existing HTML page. A border should be drawn around this div. The images will have to be resized appropriately in order for this div to look properly.
div 4
div 4 is located near the center of the page and contains general information about the website. This div contains the following:
A brief description of the organization - as an example - The Nunavut Tribal Society is the oldest organization of its kind located in the Northern Manitoba region. Members participate in a variety of festivals and conservation efforts in the sub-arctic regions. We conduct regular meetings open to the the public concerning our conservation of Polar Bears and Caribou. We also offer guided tours daily from May 31 thru October 31. The font should be bolder.
An image that represents the basic concept/interest for the website. The one images (caribou2.jpg) must be included in this section with a caption under the image. A border around the images should be used. The caribou2.jpg image must be resized appropriately in order for this image to be displayed properly in this div.
3. Set the background color for this div to #CCCCCC.
div 5
The contact information should be displayed in div 5. Use the following data content as shown displayed in a vertical fashion:
Tour Times
Monday 8:00am - 1:00pm
Address
Northpoint Landing
Churchill, Manitoba MB712
Contact Us
Chief John Carangcon
713-350-3291
Product Pages
The following product page was implemented in programming assignment 1 (This page will not be re-graded in this assignment) for Footwear:
You will now need to create an individual page for each product. These pages will correspond to the hyperlinks shown above. The names of these pages should be:
Pages Hyperlink
Caribou.html Caribou Skin Boots
Moose.html Moose Boots
BrownRabbit.html Brown Rabbit Slippers
SnowRabbit.html Snow Rabbit Slippers
An example product page for Moose.html is shown below:
The product page must have a title (<h1>, the image of the product (displayed as actual size), with a description of the product (Lucida Calligraphy font). The price along with a textfield for the Quantity is displayed as shown. A maximum of 2 digits can be entered for the quantiy. The Command Button is displayed with atc1.bmp displayed as its background image. Use <div> when creating the product pages. The suggested prices and descriptions for the other 3 footwear products are shown below:
Table 1 - Footwear
Boot1.jpg
Caribou
Highest Quality Caribou Skin Boots. Water-proof and insulated.
$300.00
Slipper1.jpg
Brown Rabbit
A very comfortable Slipper ideal for cold winter morning.
$150.00
Slipper2.jpg
Snow Rabbit
A100% Snow Rabbit Slipper. Great for those lounging and made to last.
$150.00
The same pattern can be used for all product pages. The links from footwear.html must be implemented to each product page. See me if you were not able to fully implement footwear.html for programming assignment 1.
The following page was implemented for Jewelry (jewelry.html):
Implement the following 4 product pages the correspond to each hyperlink on the
Pages Link
Earring.html Earring
HairClip.html Hair Clip
Necklace.html Necklace
Pendant.html Pendant
The description for each product is given below:
Table 2 - Jewelry
earring1.jpg
Earrings
Beautiful handcrafted turquoise jewelry earrings
$1000.00
Pendant4.jpg
Necklace
A very beautiful ornamental necklace .
$500.00
hairclp1.jpg Hair Clip
An elegant hair clip crafted from caribou bone.
$75.00
Pendant6.jpg
Pendant
Charming turquoise pendant. Great birthday gift.
$400.00
The same pattern can be used for all product pages. The links from jewelry.html must be implemented to each product page. See me if you were not able to fully implement jewelry.html for programming assignment 1.
The following page was implemented for artsAndCrafts (artsAndCrafts.html)
Implement the following 4 product pages the correspond to each hyperlink on the
Pages Link
DogSled.html Dog Sled
WoodCarving1.html Wood Carving (upper right)
WoodCarving2.html Wood Carving (lower left)
IvoryCarvings.html Ivory Carvings
The description for each product is given below:
Dogsled1.jpg
Earrings
Beautiful handcarved dog sled. Carved from oak wook.
$1000.00
Craft5.jpg
Wood Carving (upper right)
A beautiful wood carving of ornamental bird wings. .
$500.00
Craft7jpg Wood Carving
Lower left
A beautiful wood carving of brown eagle.
$1500.00
Pendant2.jpg
Ivory Carvings
Beautiful hand decorated whale teeth.
$2500 /tooth
The same pattern can be used for all product pages. The links from artsAndCrafts.html must be implemented to each product page. See me if you were not able to fully implement artsAndCrafts.html for programming assignment 1.
Explanation / Answer
The answer for the below said HTML page would be as below.
<html>
<head>
<title>Nunavut Tribal Society</title>
</head>
<body bgcolor="#5E0E03"><img src="d: unavutimagesg_head2.bmp">
<div class="left">
<div id="div1">
<p><p>/<font src="d: unabutimagesPolarBearsFirePartyGrillingAnimated.gif" border = 1 ></p>
</div>
</div>
<div class="right">
<div id="div2">
DIV 2</p>
</div>
<img src="change.gif" alt="background">
<div class="left">
<div id="div3">
<p><a href="d:\Current Events.html"><img src="bear1.bmp" title="Describe Image Link Destination" width="300" height="200" /></a>
<a href="d:\Chief's Message"><img src="bear2.bmp" title="Describe Image Link Destination" width="300" height="200" /></a>
<a href="conservation events.html"><img src="bear3.bmp"title="Describe Image Link Destination" width="300" height="200" /></a></p>
</div>
</div>
<div class="center">
<div id="div4">
<p><font >The Nunavut Tribal Society is the oldest organization of its kind located in the Northern Manitoba region. Members participate in a variety of festivals and conservation efforts in the sub-arctic regions. We conduct regular meetings open to the the public concerning our conservation of Polar Bears and Caribou. We also offer guided tours daily from May 31 thru October 31</font>
<img src="d:\caribou2.jpg" width = 100 height = 100 border = 1>
</div>
<div class="left">
<div id="div5">
<p>Tour Times
Monday 8:00am - 1:00pm<br><br>
Address
Northpoint Landing
Churchill, Manitoba MB712<br><br>
Contact Us
Chief John Carangcon
713-350-3291
<p>
<a href = “ Caribou.html”> Caribou Skin Boots</a>
<a href = “ Moose.html”>Moose Boots</a>
<a href = “ BrownRabbit.html”> Brown Rabbit Slippers </a>
<a href = “SnowRabbit.html ”> Snow Rabbit Slippers </a>
</p>
<p>
<a href = “Earring.html”> Earring</a>
<a href = HairClip.html”> Hair Clip</a>
<a href = “HairClip.html”> Necklace</a>
<a href = “Pendant.html ”> Pendant </a>
</p>
<html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.