Expression Web help

Join our community

Visit our Expression Web Forum

How do you make a web site with Expression Web ?

Expression Web templates can be used to create your own web presence. This tutorial shows you how to build a basic web site template using an unstyled CSS template that provides us with a header, navigation bar, 2 columns and a footer.

First open up Expression Web and create a new one page web site. Ensure that you have Expression Web set to the default layout. Click - Task Panes > Reset work space layout.

Then do the following: File > new > page

From the next pop up choose CSS layouts and select the 5th template. (Header, nav, 2 columns, footer) Clicking the template will open 2 new files. The actual HTML page and the CSS file.

Now click File > save as and save the web page as masterpage and the CSS we will call masterstyles.

Your page view in Expression Web , should look like the page below.

Create expression web template tutorial.

Click on it for a larger view. (opens in a new window) All that remains is for us to tell the html what to do using CSS. First we will add some colour to the site starting from the top and working down.

At the bottom of Expression Web default layout, on the left and right, we see apply styles, manage styles and css properties tabs from the task pane box's

In the bottom right hand side of Expression Web in default view, you will see the Manage styles task pane. This identifies the styles that are currently being used in the web site. At the moment, we see just 6 styles. These control the <divs> that make up your page.

At the bottom of your page, on the left hand side, you will see the CSS properties/Tag properties task panes, click on the CSS properties tag this is the task pane that we will use exclusively for styling our new Expression Web template.

So if you are ready lets add some colour to the site via CSS

Click inside the #masthead <div> From the CSS Properties task pane select Background color and type in the following: #7D5F50 this will make the background color of the #masthead <div> brown.

Click inside the #top_nav <div> once again From the CSS Properties task pane select Background color and type in the following: #C98080 this will make the top_nav background colour a pinkish/plum colour.

Click your mouse inside the #left_col <div> From the CSS Properties task pane select Background color and type in the following: #C99981 a ligher brown colour

Click inside the #page_content <div> From the CSS Properties task pane select Background color and type in the following: #C9C9C9 Grey/silver colour

Click inside the #footer <div> From the CSS Properties task pane select Background color and type in the following: #C9C9C9 Grey/silver colour.

A simple flash tutorial on how to style Expression Web CSS based templates can be found here.

CSS/stageonestyle.htm

By no means are you ready to display your page to the world! But, you have made a good start to styling Expression Web templates. Your page should look like the one here.

expression web tutorial

Click on it for a larger image (opens in a new window) To return to this page, just close the newly opened page. Assuming you have a page that looks like the screen shot, we are ready to move onto styling the text. Remember, we are trying to create an easy to update, standards compliant, accessible valid web site. The hard work is all at the build stage. Once complete, changing your web site is very easy.

Styling Text

Making you web site text stand out but allowing simple updating of said styles, is one of the most enduring parts of web site design. In the past, we would have used the mouse and the font colour, size and font family to style our different parts of the page! This is wrong and what's more, it is hard work.

The second part of this Expression Web tutorial is based on how to style Expression Web text elements of your page.

There is nothing stopping you just jumping in and typing text - except - That would be wrong. We need to use the HTML tags that we have always used. eg: <p> <h1> <h2> and so on.

Doing this gives us control over how the page content will be displayed.

Part 2..............

 

Microsoft MVP

RSS Icon  RSS

Our forum feed can be found here

Add RSS to Yahoo

Add to Google

Reader not listed? Click here for more options

Expression Web Help RSS
Expression Web Help. Tips and Tricks and tutorials Get our feed now