Introduction to Microsoft Expression Web Design (2 days)

Introduction to Microsoft Expression Web Design Overview

This Expression Web training course is for students interested in learning Microsoft Expression Web to design attractive, CSS-based, scalable web sites and front-ends for web-based applications.

Introduction to Microsoft Expression Web Design Course Goals

• Build, deploy, and maintain interactive web sites
• Layout text on pages using HTML and CSS
• Create and maintain hyperlinks to pages on other sites, pages within the same site, and to points within the same page
• Control styles and page layout with CSS
• Add interactive behaviors
• Create tables

Introduction to Microsoft Expression Web Design Course Outline

1. Introduction to Expression Web
   1. What is Microsoft Expression Studio?
2. Introduction to the Web and HTML
   1. Client-Server Model
   2. Definition of HTTP
   3. Static pages vs. Dynamic pages (ColdFusion, ASP, ASP.NET, PHP, etc.)
   4. What is a "webmaster?"
3. Exploring Expression Web
   1. Expression Web Interface
   2. Task Panes in Expression Web
   3. Expanding and Collapsing Task Panes
   4. Code View vs. Design View
   5. Using the Toolbars
   6. Using the Visual Aids
4. Creating Sites
   1. Creating Template-based Sites
   2. Creating New Pages in a Template Site
   3. Creating a Page from Scratch
   4. Creating a Page using CSS Layout
   5. Previewing in Browser
   6. Import Site Wizard
5. Working with Text and Page Format
   1. HTML Structural Tags
   2. Changing the HTML Title with Expression Web
   3. Format Font, Size, Color and other Text Properties
   4. Heading and Block Level Code
   5. Creating Bulleted Lists
   6. Pasting Text
   7. Inserting Horizontal Rules and other HTML tags
   8. Inserting Special Characters
6. Creating Links
   1. Adding Links
   2. Adding ScreenTips
   3. E-mail
   4. Changing Links
   5. Removing Links
   6. Link within Page (Bookmarks)
7. Images & Backgrounds
   1. Inserting Images
   2. Note about Accessibility and the alt attribute
   3. Adding a Background Image
   4. Editing Images Directly in Expression Web
8. Interactive Buttons & Rollover Images
   1. Adding the Swap Image Behavior
   2. Adding Interactive Buttons
9. Auto Thumbnail
   1. Auto Thumbnail Options
10. Image Maps (Hotspots)
    1. Add a Map with "Hot Spots" to the Locations Page
11. Cascading Style Sheets
    1. Quick Lesson in CSS Selectors
    2. Manage CSS Styles with Expression Web
    3. Creating a New Style
    4. Applying CSS Classes to Page Content
    5. Attaching an Existing Style Sheet
    6. Moving Styles to an External Style Sheet
12. Page Layout with CSS Layers
    1. Designing Layouts with pre-built "CSS Layouts"
    2. Using CSS Layers in Expression Web
13. Behaviors
    1. What is JavaScript?
    2. Events vs. Actions
14. Behavior: Jump Menu
    1. Demo: Democratic Governors' Association
    2. Adding the Jump Menu Behavior
    3. How to Select the First Option? Adding a "Go" Button
    4. A little JavaScript lesson
15. Behavior: Open Browser Window
    1. Creating Fake Links with JavaScript
16. Behavior: Change Property (Dynamic Visibility)
    1. Changing Font, Font Color, Borders
    2. Open Browser Window
    3. Dynamic Visibility
17. Tables
    1. Add a Table with Staff Information to the "Contact Us" page
    2. Page Layout with Tables (optional)
    3. Merge Cells

Introduction to Microsoft Expression Web Design Course Materials

Each student will receive a comprehensive set of materials, including course notes and all the programming examples.

Introduction to Microsoft Expression Web Design Technical Requirements

1. Operating System Options
   • Windows Vista
   • Windows XP with Service Pack 2
3. Internet Information Services
   • Instructions
4. Microsoft SQL Server 2005
   • Download - Express Edition will work fine.
5. Both of the Following Browsers
   1. Internet Explorer 6.0 or later
      • Download
   2. Firefox
      • Download

Class Files for Introduction to Microsoft Expression Web Design

1. Download the class files.