CrystalCoastBanner WGD 232 week 4 ilab

CrystalCoastBanner
WGD 232 week 4 ilab

Scenario/Summary

This iLab assumes that you have already read this week’s Lecture material, as well as the assigned reading from the textbook.

This week, you will add borders, a background image, and some fonts to enhance the Crystal Coast Theater website. Although you will be working with a background image this week, you will learn more about images next week and will add more images to the site at that time.

STEP 1: Update the Backgrounds

Previously, you added a background color to the site of “lightblue”. Now you will add a background image to the header and will change the light blue background color to a color taken from the background image.

1. 1.1 Locate your local wgd232 folder containing the Crystal Coast Theater website. In this folder, create a new folder named images. There should now be two folders inside this root folder—css and images—along with your two HTML files.

2. 1.2 Download the background image CrystalCoastBanner.jpg and save in the wgd232/images folder.

3. 1.3 Add a background property to the header selector in the CSS and set the repeat property so the image will not repeat. Be sure to use a relative path to the image. Since the CSS file is located in the CSS folder, the path to the banner image is up one level (../), into the images folder (images/) and to the file (CrystalCoastBanner.jpg). Also, remember that the web server is case-sensitive. You must use the exact case for the name of all files and folders.

body {

background-color: lightblue;

background-image: url(../image/CrystalCoastBanner. jpg);

background-repeat:no-repeat;

1. 1.4 Save the CSS and then open your index.html page in a browser window. You should see the background image and also note that there is a bit of light blue from the background extending below the image. If you do not see the image, make sure the file path and name are correct.

2. 1.5 Open CrystalCoastBanner.jpg using Adobe Photoshop.

1.6 Use the Eyedropper Tool and click on part of the sky in the image.
1.7 Click on the square of the Color Palette that is displaying the color from the eyedropper. This will launch the Color Picker dialogue box. From here you can choose the hexadecimal value of the color you selected. Make a note of this value, as you will use it later. Notice that the hue, saturation and lightness values, as well as the RGB values, are all available here. You can easily match any color from an image and use it for a background color. This is also helpful when the size of an image is less than the size of the container. By matching the background color to the actual image, it will look like the image fits the container, without stretching the image.
1.8 Click on the sand in the image and again note the hexadecimal value. Do this again for the water.
1.9 Change the background color of the header and footer to the value from the sand.
1.10 Change the background of the aside to the value from the sky.
1.11. Save your CSS and refresh the HTML page to view the changes.
STEP 2: Add Borders and Other Styles

1. 2.1 Add a border property to the body. Use shorthand notation to set the width to .15em, the style to solid, and the color to the sky color.

2. 2.2 Add a section selector with a min-height property of 20em. This will ensure that the page expands vertically, even when there is relatively little content on the page. Save your changes and then refresh. Notice how the Home page now fills up more of the screen vertically.

3. 2.3 Locate the h1 a selector. Remove the “h1” from in front of this tag so that it will apply to all anchors. Add a color attribute to set the text color to the value for the water.

4. 2.4 Use a :hover selector with the navigation links to increase the text size to a “larger” value.

nav a:hover {font-size:larger;}

1. 2.5 Add a Google Font for the h1.

o 2.5.1 Add a link to the bold version of the Google Font Dancing Script to the <head> of each HTML page.

2.5.2 Add a font-family to the h1 that uses Dancing Script

1. 2.6 Save all changes and review your site in a browser. Correct any errors before proceeding.

STEP 3: Upload to CWP

1. 3.1 Using the FTP method of your choice, upload the contents of your website, including all dependent files, to your wgd232 folder on CWP. When prompted, you should overwrite the existing files. Remember, you are updating your website, not creating new sites for individual weeks.

2. 3.2 Open a browser window and enter your site URL.

3. 3.3 Verify that all pages are displaying correctly. Make corrections as needed.

Order from us and get better grades. We are the service you have been looking for.