Introduction to Microsoft Expression Web Design and Development (3 days)

Introduction to Microsoft Expression Web Design & Development 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. It also includes an introduction to working with ASP.NET in Expression Web.

Introduction to Microsoft Expression Web Design & Development 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
• Design fill-in foms
• Publish their site to a web server
• Build front-ends for applications whose back-ends will later be written by developers
• Build pages that allow users to select, insert, update, or delete database records
• Use ASP.NET validators to validate user input

Introduction to Microsoft Expression Web Design & Development 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
18. Forms
    1. Using Expression Web to Create Forms
    2. HTML Form Elements
19. Introduction to ASP.NET
    1. Static pages vs. Dynamic pages
20. Validating User Input with ASP.NET Validation Controls
    1. HTML Form Elements vs. ASP Form Controls
    2. ASP.NET Validation Control
    3. Using the RequiredFieldValidator Control
    4. Using the RegularExpressionValidator Control
    5. Testing with Validators
    6. Summarizing Results with ValidationSummary Control
21. Navigation Menus with Flyouts
    1. Adding the Menu
    2. Adding Elements to the Menu
22. Data Binding
    1. Database Basics: Introduction to SQL
23. Creating an ASP.NET Connection
    1. Using the SQLDataSource Control
    2. Displaying Data in a Bulleted List with a List Bound Control
    3. Using a SQL Alias to Combine Two Columns
24. Displaying Data with GridView Control
    1. Using the GridView
    2. Paging through Records
    3. Creating Sortable Columns
    4. Using AutoFormat
    5. Changing Column Headings
25. Editing and Deleting Records with GridView
26. Building a Drill-Down
    1. Introducing the AutoPostBack
    2. Using a SQL Alias to Combine Two Columns
    3. Showing all Movies by an Actor
    4. Showing all Movies in a Genre (SELECT DISTINCT)
27. Building a Search Feature
28. Inserting Records with FormView Control
29. Using Master Pages and Templates
30. Using Meta Tags to Optimize Search Engine Placement
    1. Keywords
    2. Description
31. Site Management Information
    1. Find and Replace
    2. Hyperlink Report
    3. Compatibility Checker
    4. CSS Reports

Introduction to Microsoft Expression Web Design & Development Course Materials

In addition to a comprehensive set of materials, including course notes and all the programming examples, each student will also receive a one-year subscription to Webucator's online reference library, which contains hundreds of the most current electronic technology books - a $149.95 per student value.

Introduction to Microsoft Expression Web Design & Development 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 & Development

1. Download the class files.