In this iLab, you will finalize the CSS style sheet for the Sunholm Solar site. Last week, you created three additional pages, giving you a total of five pages. Now, we'll use the CSS style sheet to adjust our text, image, and other properties.

Deliverables

NOTE

Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions .

(See the Syllabus section "Due Dates for Assignments & Exams" for due dates.)

After completing the steps below, submit a compressed (.zip) file named YourNameLab5.zip containing all HTML, CSS, and image files for your site. The zipped file should include the files from the Week 3 and Week 4 iLabs, as well as the new files added in this Week 5 iLab assignment.

Section	Deliverable	Points
Step 2	Appropriate number of properties set in style sheet for <h1>	5
Step 2	Appropriate values for h1 properties to ensure readability, good design, and branding	5
Step 3	Appropriate number of properties set in style sheet for h2	5
Step 3	Appropriate values for h2 properties to ensure consistency with <h1>	5
Step 4	Appropriate number of properties set in style sheet for p (paragraph) tag	5
Step 4	Paragraphs are easy to read based on CSS choices.	5
	Total	30

Required Software

Dreamweaver

Open Dreamweaver as in previous labs. Steps: 1–5

Use a personal copy or the free Adobe Creative Cloud subscription provided by DeVry.

Adobe Creative Cloud Subscription

Internet Explorer

Access the software at https://lab.devry.edu . Step: 5

Lab Steps

STEP 1: Preparation

Open Dreamweaver as you have in previous iLabs. It is likely that your site will open when you open Dreamweaver. If the site does not open, click on File, Open Recent to open your home page or click on File, Open and then browse to your home page and open it as you would a file in any other application. Opening a file in your site will also open the site itself.

Your workspace should look something like the following image. Of course, your file names will probably be different.

Image Description

STEP 2: Create Properties for Level 1 Headings

Your home page should have an h1 heading at the top. If it doesn't, insert an h1 heading now.

Triple click the heading or use another method to select the heading.

In the left side of the Property Inspector, click on CSS. In the Targeted Rule textbox h1, h2, h3, h4, h5, p should appear. If not, click on the dropdown arrow next to the textbox and select that choice.

Image Description

Click CSS Designer. The CSS Designer panel will open and the rule you are working on will be highlighted.

Image Description

Click the plus sign (+) on the Selectors bar of the CSS Designer panel. A new selector will appear. It will be .container .content h1. It should be highlighted.

Image Description

Click Edit Rule in the Property Inspector. The CSS Rules Definition dialog box will appear. This dialog box provides a way to set the properties that will be applied to items to which the CSS rule you are creating will be supplied.

On the left, you see Type as the selection category. Here, the word type refers to what we might casually refer to as font, rather than describing some kind of category. Choose a font-family that is appropriate for your business.

Image Description

Alter the properties until you are satisfied that they fit the needs of the site. Remember that clarity is the most important attribute. However, by manipulating the style sheet properties, you can create effects that are appropriate for your website. Here is an example.

Image Description

In order to create the effect shown above for h1 tags, the following properties were used.

Font-family was set to Tahoma. Font-size was set to x-large, Font-weight was set to bold, and Color was set to #330.

Image Description

Under Block, the letter-spacing was set to 0.2 em. The Block category is selected by clicking the choice two rows down from Type.

Image Description

Under Border, the bottom border was set to a thin ridge. Note that the other borders must be set to none and the Same For All box unchecked.

Image Description

For this lab you must specify appropriate properties for the following for h1. You may use the values in the example or you may enter values of your choice.

Set the following items.

· Font-family

· Font-size

· Font-weight as bold

· Color

· Letter-spacing and/or word-spacing

· At least one border property

Use your design eye; keep it readable and consistent.

STEP 3: Set Properties for Level 2 Headings

Select your Level 2 heading by highlighting it. Be sure that CSS is selected in the Property Inspector. Click CSS Designer in the Property Inspector if the CSS Designer panel is not already visible. Click the + sign next to Selectors to add a new rule pertaining to the h2 header.

Image Description

Click on Edit Rule in the Property Inspector to open the Rule Definition dialog box. Set the properties as follows:

Image Description

Your h2 must be smaller than your h1. It should use the same font family for consistency and be the same color. Set the following items.

· Font-family

· Font-size

· Font-weight as bold

· Color

· Letter-spacing and/or word-spacing

· Position set to relative and Top to 20 px under Positioning

This positioning values will push the Level 2 headings down closer to the text, maybe too close. You may not be able to see this in the editing window, but you will see the effect when you preview your page in the browser in Step 5. If you don't like how the h2 is spaced relative to the body text, feel free to experiment with the Position values. Just be sure to set at least Position and Top.

You page should look something like this:

Image Description

STEP 4: Create Properties for Body Text Paragraphs

Highlight your body text.

Image Description

Use steps similar to what you used for the h2 heading to set the properties for the paragraph p text.

Be conservative in setting properties for your body text. Whereas headings can be somewhat decorative, body text paragraphs must be legible. Make sure that the text is readable and not set to a size smaller than medium. Make sure that there is good contrast between your text and its background. Do not use absolute font sizes if you can avoid doing so. Recall that Arial is a good choice for body text.

For body text paragraphs, set the following items.

· Font-family

· Font-size

Your page should now look something like this.

Image Description

STEP 5: Test, Zip, and Submit

Preview your website using F12 (Preview in Browser). Make any necessary changes. When you are satisfied, zip the entire site and submit it to the Week 5 iLab Dropbox.

Submit your lab to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions .

See the Syllabus section "Due Dates for Assignments & Exams" for due date information.