1. Using CSS to Create Some Style Module 5: Beyond the Basics with Expression Web LESSON 5

2. Module 5: Beyond the Basics with Expression Web LESSON 5 Lesson Overview In this lesson, you will:  Format a heading.  Format layers using an internal style sheet.  Align images using class style.

3. Module 5: Beyond the Basics with Expression Web LESSON 5 Guiding Questions:  In Module 3 you learned about font styles. Which styles work best for computer monitor viewing?  What styles do you think would complement your Current Event Web site?

4. Module 5: Beyond the Basics with Expression Web LESSON 5 Project Continue working with your Current Event project. In this stage of the project, you will create an internal Cascading Style Sheet (CSS) to format layers within the Web page.

5. Module 5: Beyond the Basics with Expression Web LESSON 5 Creating a Heading 1. Place the cursor at the beginning of the text. 2. Press Enter (this will create a blank space between the top of the layer and the top line of text. 3. Place the cursor in this blank space. 4. Type the text for the header.

6. Module 5: Beyond the Basics with Expression Web LESSON 5 Creating a Heading 1. Highlight the heading. 2. Select Heading 1 from the Style dropdown menu. 3. The heading will automatically resize and become bolded.

7. Module 5: Beyond the Basics with Expression Web LESSON 5 Creating a Heading 1. Using the Split View, look at the code for the heading that was just created in Expression Web. The style should be easily recognized from your HTML work in Module 2.

8. Module 5: Beyond the Basics with Expression Web LESSON 5 Correcting the Heading Style 1. Click New Style in the Apply Styles or Manage Styles task pane. 2. In the New Style dialog box, select h1. 3. Specify the values desired for the current Web page and click OK.

9. Module 5: Beyond the Basics with Expression Web LESSON 5 The Corrected Heading  Compare the before and after images of the heading  BeforeAfter

10. Module 5: Beyond the Basics with Expression Web LESSON 5 Adding an image to a Text Layer  Placing an image at the beginning of a paragraph will cause the text to drop to the bottom right corner of the image and continue inline from that point.

11. Module 5: Beyond the Basics with Expression Web LESSON 5 Creating a Class Style for an Image 1. Click New Style in the Apply Styles or Manage Styles task pane. 2. Enter.img-right in the Selector field. 3. Select Layout category and set Float to Right. 4. Select the Box category and specify the needed values for the margins. 5. Click OK to save the settings.

12. Module 5: Beyond the Basics with Expression Web LESSON 5 Applying a Class Style to an Image 1. Click on the image. 2. In the Apply Styles task pane, click on.img-right.

13. Module 5: Beyond the Basics with Expression Web LESSON 5 Previewing your work 1. On the File menu, point to Preview in Browser. 2. Click on Windows Internet Explorer 7.0 (1024 X 768) or whatever browser is installed on the computer. 3. Observe the preview of the page and take note of details that need to be corrected.

14. Module 5: Beyond the Basics with Expression Web LESSON 5 Assignment  Begin working on the Style Worksheet (S.5.5_6_7.R_Style)  This worksheet provides a list of modifications to be made to your Current Event Web page. Rubric for Current Event Web page RequirementPoints PossiblePoints Received Create a header using Expression Design to reflect your subject and insert it at the top of your Web page 25 Add a heading to the main text portion of your Web page and format it to match the main text section 10 Move one of the images that you previously placed on the Web page and format it so that it floats to the right and the text wraps around the image. 15 Total Points50 Comments: