Transcript Using CSS to Create Some Style

LESSON
5
Module 5: Beyond the Basics with Expression Web
Using CSS to Create Some
Style
LESSON
5
Module 5: Beyond the Basics with Expression Web
Lesson Overview
In this lesson, you will:

Format a heading.

Format layers using an internal style sheet.

Align images using class style.
LESSON
5
Module 5: Beyond the Basics with Expression Web
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?
LESSON
5
Module 5: Beyond the Basics with Expression Web
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.
LESSON
5
Module 5: Beyond the Basics with Expression Web
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.
LESSON
5
Module 5: Beyond the Basics with Expression Web
Creating a Heading
1. Highlight the heading.
2. Select Heading 1 <h1> from the Style dropdown menu.
3. The heading will automatically resize and become bolded.
LESSON
5
Module 5: Beyond the Basics with Expression Web
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.
LESSON
5
Module 5: Beyond the Basics with Expression Web
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.
LESSON
5
Module 5: Beyond the Basics with Expression Web
The Corrected Heading

Compare the before and after images of the heading
 Before
After
LESSON
5
Module 5: Beyond the Basics with Expression Web
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.
LESSON
5
Module 5: Beyond the Basics with Expression Web
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.
LESSON
5
Module 5: Beyond the Basics with Expression Web
Applying a Class Style to an Image
1. Click on the image.
2. In the Apply Styles task pane, click on .img-right.
LESSON
5
Module 5: Beyond the Basics with Expression Web
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.
LESSON
5
Module 5: Beyond the Basics with Expression Web
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
Requirement
Points Possible
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 Points
50
Comments:
Points Received