Tutorial program: Microsoft Expression Web

Tutorial level: Beginner

Introduction to Microsoft Expression Web

In this tutorial series we will use Microsoft Expression Web to build a one page website for our fictitious company, Core Snowboards.

This free video tutorial series is intended for people who are new to web programming or are looking to have Microsoft Expression Web handle the majority of the HTML and CSS coding for them. This series is a good primer to getting accustomed to the UI of Expression Web, and to begin working with CSS.

• 1 / Laying a foundation / 19:27
• 2 / Understanding CSS / 15:30
• 3 / Bringing in the content / 29:39
• 4 / Formatting and styling / 35:32
• 5 / Cleaning up and getting online / 10:14
•  
• * / Download the source files for this tutorial / 56kb

Tutorial program: Microsoft Expression Web

Tutorial level: Beginner - intermediate

Divs vs Layers in Expression Web

This quick video is meant to show you how Microsoft Expression Web determines Layers, and how the Layers Task Pane displays div tags. To futher understand how layers and divs are used, I recommend watching the follow up video about positioning.

• 1 / Divs vs Layers in Expression Web / 3:29

Understanding positioning in CSS

In this video tutorial we will look at the position property for your divs. We will specifially explore position absolute, fixed, relative, static, and inherit. This video tutorial will also help you understand a bit more how Microsoft Expression Web determines what is a layer, and what it layers ultimiately give you control over.

• 2 / Understanding positioning in CSS / 12:18

Understanding floating with CSS

The float property is one you will find yourself using frequently, however, floats can get a little messy and a little trickey sometimes. This video will help you understand how to work with floats in Expression Web.

• 2 / Understanding floating with CSS / 12:18

Tutorial program: Microsoft Expression Web

Tutorial level: Beginner - ADvanced

Understanding IDs, Classes, Inline styles

This beginner video tutorial is aimed at helping you understand the differences between IDs, Classes, Inline sytles, and Span. Each of these elements will be used frequently throughout your CSS based sites in Microsoft Expression Web. In this first part, we will be exploring what happens when Expression Web handles our styling and formatting for us.

• 1 / Understanding IDs, Classes, Inline styles / 9:45

Manually Controlling Your Styles

In this video we will expand upon our control and understanding of IDs, Classes, Inline styles, and span. This Microsoft Expression Web tutorial is aimed for people who want to learn a bit more about hand coding their CSS. We'll also see how Intellisense is an extremely handy tool, for quickly writing accurate code.

• 2 / Manually Controlling Your Styles / 13:50

Tutorial program: Microsoft Expression Web

Tutorial level: Beginner

Centering your website with CSS

This video tutorial will show you how to get layouts and divs centered within your site, using CSS. The solution is simiplier than you may think.

• 1 / Centering your website with CSS / 4:03

Tutorial program: Microsoft Expression Web

Tutorial level: Beginner

Using CSS to style your links

CSS gives us more flexablitiy and plenty of extra options when it comes to styling links on your website. This video tutorial will show you how you can edit your link styles and states using Microsoft Expression Web.

• 1 / Using CSS to style your links/ 8:51

Tutorial program: Microsoft Expression Web

Tutorial level: Beginner/Intermediate

Inserting Flash into Expression Web

Unfortunately, there is no direct way in Expression Web to add Flash into your web pages. Instead, this video tutorial will show you how to use the popular SWFObject method for embedding Flash into your Expression Web project.

• 1 / Inserting Flash into Expression Web / 9:15

Tutorial program: Microsoft Expression Web

Tutorial level: Beginner

Understanding the CSS Box Model

This video tutorial will help you understand the CSS Box Model you will be using when you create CSS based sites. The box model is a foundation of your website. This video tutorial will also help you understand margin and padding better, as well as seeing some nifty features Microsoft Expression Web gives us for effecting margins and padding.

• 1 / Understanding the CSS Box Model / 9:49

Tutorial program: Microsoft Expression Web

Tutorial level: Beginner/Intermediate

Creating Rollover Buttons

This first video shows you how to create interactive rollover buttons exclusively inside Microsoft Expression Web.

• 1 / Creating rollovers with Expression Web / 5:50

In this follow up video we look at how to replicate the buttons we created in the previous video, only this time we do it entirely with CSS and only 1 image. This is a fairly common way to handle interactive buttons through CSS. A working knowledge of CSS will be helpful for you in this video, but it is not completely necessary.

• 2 / Creating rollovers with CSS / 9:23