csH2019paper

Explore

section 2

q-16

⁠

Bailey’s Dog Kennels is developing a website. The website will have a multi-level structure, consisting of a home page with a horizontal navigational bar that links to four main web pages: Kennels, Grooming, Gallery and Contact Us. The grooming web page will have links to three sub-pages showing costs, treatments and photos.

⁠

part a

Design a multi-level structure for this website.

⁠

part b

A browser displays the header element of the home page as shown below.

⁠

Loading…⁠

⁠

Complete the CSS below to style the header.

header{ ??????????? :lightgrey; padding:0px; }

.imageBanner{ ????????? :20px; float:left; padding:0px; height:90px; width:130px; }

h1{ ???????????? ; margin-right:30px; margin-top:30px; color:white; display:inline; }

(edit the code in the CSS file)

⁠

part c

The navigational bar shown below makes use of the following CSS.

nav ul { list-style-type:none; background-color:lightgrey; }

nav ul li { float:left; }

nav ul li a { display:block; color:green; width:100px; text-align:center; padding:14px; }

nav li a:hover { background-color:black; color:white: }

Explain why descendant selectors are used here.

Describe how the navigational bar changes when the pointer is moved over one of the hyperlinks.

The hyperlinks work if the user clicks on or near the text. Identify the line of code that allows this to happen.

(try the code in the CSS file)

⁠

part d

The home page for Bailey’s Dog Kennels is shown below.

⁠

Loading…⁠

⁠

When the mouse is placed over the image in the main section, the image changes.

⁠

Loading…⁠

⁠

When the mouse is moved away from the image, the image should return to the original one, however, at present this is not happening.

(try the code in the project below)

HTML code for the home page is shown below.

<!DOCTYPE html>

<html>

<head>

function rollover(my_image){my_image.src = '../images/Bailey2.png';}

</script>

</head>

<body>

<h1>Bailey's Dog Kennels</h1>

</header>

<nav>

<ul>

<li><a href="kennels.html">Kennels</a></li>

<li><a href="grooming.html">Grooming</a></li>

<li><a href="gallery.html">Gallery</a></li>

<li><a href="contactUs.html">Contact Us</a></li>

</ul>

</nav>

<main>

Why Bailey's Dog Kennels?</h2>

<p>At Bailey's Dog Kennels we treat your dogs as we would treat our own. We provide a friendly yet professional boarding service.</p>

</main>

</footer>

</body>

</html>

Write the new function to display the original image when the mouse is moved away from the image.

Re-write the appropriate HTML element to call the function created in part (i) when the mouse is moved away from the image.

(edit the code in the HTML file called home.html)

⁠

Loading…⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.