Join our community
- Expression Web Forum
- Expression web resources
- Build Expression Web Template 1
- Build Expression Web template 2
- Build Expression Web Template 3
- Style horizontal Navigation with CSS
- Style vertical menu with CSS
- Style the main content area
- Style the footer
- Centre a page
- Build Expression Web DWT Tutorial
- Graphic Template example
- Free Expression Web Templates
- Add RSS to Expression Web
- Expression web forms
- RSS feeds
- 10 Tips
- Page includes
- Insert flash in expression web
- Expression web dropdown menu
- Use XML with Expression Web
- Point and click easy drop-down menu's
- Table Based Layouts
- ASP.NET Ad Rotator
- Display Data
- Search database using a text box
- Transparent Text
- Bold text - Formatting
- Date and time
- Who are you
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.
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.
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.
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.
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.