Deliverable: Four (4) Web pages (the home page and three image pages) and four (
ID: 3599889 • Letter: D
Question
Deliverable: Four (4) Web pages (the home page and three image pages) and four (4) Cascading Style Sheets (.css) (one for each page) Complete the weekly lab based on the following Write the code for each lab assignment . The code is to be submitted in a single compressed folder (zip file) to the online course shell. The file must contain all .htm fles, along with any other files that may be necessary for your project to run (ex text files, images, etc.). When sa ng the file it should be saved as Lab # Last name First initial htm For example if your name is Mary Smith the file for Lab 1 should be saved as Lab 1 Smith 1 htm Any and all written answers must be entered into the online course shell with the submission of the attached lab assignment. Follow the directions below to complete Lab Assignment 5: 1. Create a home page with navigation bar to the three (3) pages with images listed below and a Cascading Style Sheet (.css) for bisque color and Arial text. 2. Create a "single image page with a Cascading Style Sheet (css) for background image, bisque color, and Arial text. 3. Create a top line image" page with Cascading Style Sheet (.css) for background image, bisque color, and Arial text. 4. Create a-left side image" page with a Cascading Style Sheet (css) for background image, bisque color, and centered Arial text. Finished Example may not be an exact match to the assignment CAUTION: This screen shot Mary Smith .53earch . D. More » Backboard Learn 8 Suggested Sites . l Single Background Image | Backgroung Image Across Top I Background Image DownLeft Side Home Page This page uses a Horizontal navigetion bar and also style sheet to change the background color to bisque and the text to ArialExplanation / Answer
Hi,
Good Question with detailed pictures. Please find the following answer with details.
Keep all the files in the same directory.
homepage.html
<html>
<head>
<link rel="stylesheet" href="home.css" type="text/css"/>
</head>
<body>
[<a href="singleImage.html">Single Background Image</a>]
[<a href="singleImageTop.html">Background Image Across Top</a>]
[<a href="singleImageLeft.html">Background Image DownLeft Side</a>]
<div class="desc">
<h3>Home Page</h3>
<div>This page uses a Horizontal navigation bar</div>
<div>and also a style sheet to change</div>
<div>the background color to bisque and the text to Arial</div>
</div>
</body>
</html>
home.css
body{
background-color:bisque;
font-family:"Arial";
}
Home Page in Action: Please find in this URL -> https://jsfiddle.net/1zohkrv2/1/
singleImage.html
<html>
<head>
<link ref="singleImage.css" type="text/css"/>
</head>
<body>
<div id='dv'></div>
</body>
</html>
singleImage.css
#dv {
background: url('http://www.vectortemplates.com/raster/globes-024.png') no-repeat 0 0;
background-position:center;
background-size: 250px;
}
html,body,#dv {
width:100%;
height:100%;
background-color:bisque;
font-family: "Arial";
}
See first page in Action: http://jsfiddle.net/ZngsR/56/
You can download and keep the image in the same folder. Then change the css
background: url('http://www.vectortemplates.com/raster/globes-024.png') no-repeat 0 0;
to
background: url('yourImage.png') no-repeat 0 0;
SingleImageTop.html
<html>
<head>
<link ref="singleImageTop.css" type="text/css"/>
</head>
<body>
<div id='dv'></div>
<div class="desc">
<div class="descContent">
<div>A style sheet is used to</div>
<div>change the background color to bisque, the text to Arial</div>
<div>and to repeat a single image horizontally as a background</div>
</div>
</div>
</body>
</html>
SingleImageTop.css
#dv {
background: url('http://www.vectortemplates.com/raster/globes-024.png') 0 0;
background-size: 100px;
width: 100%;
height: 100px;
background-repeat: space;
}
.desc {
width:100%;
height: 100%;
position: absolute;
top: 100px;
background-color:bisque;
font-family: "Arial";
margin-top: 10px;
}
.descContent{
width:100%;
height: 100%;
margin-top: 30px;
}
If you want to change the height of desc div, set the same height to dv. So that overlap will not be there.
Margin is used to give the gap below the image and top of the description.
You can keep the image in the same folder and give the same name with image extension as mentioned above in the css of this page also.
You can see the code in action using: http://jsfiddle.net/ZngsR/57/
SingleImageBottom.html
<html>
<head>
<link ref="singleImageBottom.css" type="text/css"/>
</head>
<body>
<div id='dv'></div>
<div class="desc">
<div class="descContent">
<div>A style sheet is used to</div>
<div>change the background color to bisque, <br/>the center the Arial style textl</div>
<div>and to repeat a single image vertically as a background</div>
</div>
</div>
</body>
</html>
SingleImageBottom.css
#dv {
background-image: url('http://www.vectortemplates.com/raster/globes-024.png');
background-size: 100px 100px;
background-repeat: repeat-y;
background-position: left top;
height: 100%;
width: 100px;
float: left;
}
html, body {
height:100%;
}
.desc {
overflow: hidden;
height: 100%;
background-color:bisque;
font-family: "Arial";
margin-top: 10px;
text-align: center;
}
.descContent{
width:100%;
height: 100%;
margin-top: 30px;
position: relative;
top: 50%;
}
You can see the code in Action -> http://jsfiddle.net/ex5ck7r6/1/
You can see the whole demo with working links using -> https://jsfiddle.net/1zohkrv2/2/
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.