Microsoft Expression Web-Illustrated Unit F: Enhancing a Design with CSS

Objectives Understand CSS layouts Add background images Set a background color using the Eyedropper tool Set a background color using a swatch Add a border Microsoft Expression Web - Illustrated

Objectives Set margins and padding Style the footer Add a font family Style headings Microsoft Expression Web - Illustrated

Understanding CSS Layout The CSS Box Model  Every element on the page is a rectangular box  The innermost box is the content area  The padding area creates a space between the content and the border  Borders enclose the padding and content areas  The margin is the space surrounding the other three areas Microsoft Expression Web - Illustrated

Understanding CSS Layout Microsoft Expression Web - Illustrated The CSS box model

Understanding CSS Layout CSS layouts in Expression Web  New pages are structured with the divs included in the layout Microsoft Expression Web - Illustrated

Adding Background Images Open a Web page point to #masthead in the Apply Styles task pane Click the #masthead list arrow Then click Modify Style Click Background in the category list Click the Browse button next to background-image Navigate to the folder where you store your pictures Choose an image and click Open Microsoft Expression Web - Illustrated

Adding Background Images Click the background-repeat list arrow, then click no-repeat Click Position in the category list, type 235 in the height text box, then click OK Point to #container in the Apply Styles task pane, click the #container list arrow, then click Modify Style Click Background in the category list Click the Browse button next to the background- image Choose an image and click Open, Click the background-repeat list arrow and click repeat-y, then click OK Microsoft Expression Web - Illustrated

Adding Background Images Microsoft Expression Web - Illustrated Home page after background images added to #masthead and #container styles

Adding Background Images Background image properties and values Microsoft Expression Web - Illustrated

Setting a Background Color Using the Eyedropper Tool Confirm that the home page is the active page, click the Manage Styles tab in the Apply Styles task pane, right-click body, then click Modify Style Click Background in the category list, then click the background-color color swatch Click Select Microsoft Expression Web - Illustrated

Setting a Background Color Using the Eyedropper Tool Microsoft Expression Web - Illustrated

Setting a Background Color Using the Eyedropper Tool Pick a color, as shown in the figure Microsoft Expression Web - Illustrated

Setting a Background Color Using a Swatch Right-click #page_content in the Manage Styles task pane, then click Modify Style Click Background in the category list, then click the background-color list arrow Microsoft Expression Web - Illustrated

Setting a Background Color Using a Swatch Choose a color swatch Click OK Microsoft Expression Web - Illustrated

Setting a Background Color Using a Swatch Use the Save All command to save changes to all open files Preview the home page in a browser Microsoft Expression Web - Illustrated

Adding a Border Right-click the #page_content div in the Manage Styles task pane, then click Modify Style Click Border in the category list Choose your settings and click OK Microsoft Expression Web - Illustrated

Adding a Border Microsoft Expression Web - Illustrated Completed Border options

Setting Margins and Padding Observe the Web page in the browser window Microsoft Expression Web - Illustrated

Setting Margins and Padding Close the browser window, return to Expression Web, right-click body on the Manage Styles task pane, then click Modify Style Click Box on the category list, adjust the margin and click OK Microsoft Expression Web - Illustrated

Setting Margins and Padding Microsoft Expression Web - Illustrated Modifying the Box category of body style

Setting Margins and Padding Right-click page_content on the Manage Styles task pane, then click Modify Style Click Box on the category list, click in the top text box under padding, type 15, then compare your screen to the figure on the following slide Click OK Save your changes to all open files, preview the home page in a browser, use navigation links at the bottom of the pages to view all pages in the site, close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

Setting Margins and Padding Microsoft Expression Web - Illustrated

Styling the Footer Right-click #footer in the Manage Styles task pane, then click Modify Style Click in the font-size box, then type 10 Click the font-weight list arrow, then click bold Microsoft Expression Web - Illustrated

Styling the Footer Microsoft Expression Web - Illustrated

Styling the Footer Click Block in the category list, click the text-align list arrow, then click center Microsoft Expression Web - Illustrated

Styling the Footer Click Box on the category list, click the Same for all check box next to margin to remove the check mark, then type 20 in the top text box Microsoft Expression Web - Illustrated

Styling the Footer Click OK Save your changes to all open files, preview the home page in a browser, use navigation links at the bottom of the pages to view all pages in the site, close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

Adding a Font Family Click Tools on the menu bar, click Page Editor Options, then click the Font Families tab Microsoft Expression Web - Illustrated

Adding a Font Family In the Select font family list, click (New Font Family) if necessary In the Add font list, click Lucida Sans, then click Add In the Add font list, click Arial, then click Add In the Add font text box, type Helvetica, then click Add In the Add font text box, click sans-serif, click Add, then compare your screen with the figure on the following slide Click OK Microsoft Expression Web - Illustrated

Adding a Font Family Microsoft Expression Web - Illustrated

Adding a Font Family Microsoft Expression Web - Illustrated

Styling Headings Click the New Style button on the Manage Styles task pane, click the Selector list arrow, click h1, click the Define in list arrow, click Existing style sheet, click the URL list arrow, then click twstyles.css Click the font-family list arrow, click Lucinda Sans, Arial, Helvetica, sans- serif, type 22 in the font-size box, click the font-weight list arrow, click bold, then type # in the color text box Microsoft Expression Web - Illustrated

Styling Headings Click Border in the category list, then click the Same for all check boxes under border-style, border-width, and border-color to remove the check marks Click the bottom list arrow under border-style, click solid, click the bottom text box under border-width, type 1, click the bottom text box under border-color, type #C9A62D, compare your screen to the figure on the following slide, then click OK Microsoft Expression Web - Illustrated

Styling Headings Microsoft Expression Web - Illustrated

Styling Headings Click the New Style button on the Manage Styles task pane, click the Selector list arrow, click h2, click the Define in list arrow, click Existing style sheet, click the URL list arrow, then click twstyles.css Type 18 in the font-size box, click the font-weight list arrow, click bold, type #C9A62D in the color text box, compare your screen to the figure on the following slide, then click OK Microsoft Expression Web - Illustrated

Styling Headings Microsoft Expression Web - Illustrated

Styling Headings Use the Save All command to save changes to all open files, preview the home page in a browser, then click Store link Close the browser window, return to Expression Web, close the tradewinds site, then exit Expression Web Microsoft Expression Web - Illustrated

Styling Headings Microsoft Expression Web - Illustrated