Expression Web Tutorials

 Expression Web 2 Tutorials

CSS Layouts

The first step to designing web pages is creating a Layout.  Of course, we will use CSS to style each div used for our layout.  Below is a step by step Tutorial showing you how to make a simple CSS Layout.

DON'T USE TABLES, PLEASE!  TABLES ARE MEANT TO DISPLAY TABULAR DATA, NOT A WEB PAGE LAYOUT.  

 

Two General Ways to Make a Layout in Expression Web

  1. Pre-Made CSS Layouts
  2.  Make a Layout from Scratch

1.  Pre-Made CSS Layout

Expression Web comes with a set of Premade CSS Layouts that you can choose from.  The you would set up this type of layout is as follows:

1.  Set up an Empty Web Site 
2.  Set the Doctype 
3.  Choose a Premade Layout

A Premade Layout consists of one HTML web page and one External Style Sheet that is already linked to the web page.  Each section of the Layout already has a CSS Style created.  All you have to do is modify each style so as to provide heights and or widths to each div; add background colors or images; choose font-families and font size, and so forth. 

Then you would add your content, images, and any other assets you choose to use.  You will also need to create more CSS Styles so as to position images, style text, style headings, etc.

Set up a Premade CSS Layout:

1.  Click File --> Click New   (This will open a dialog box -  See below)

New page dialog

Click on image to see larger.

 

2.  Look for CSS Layouts in the left column.

3.  View each Layout listed in the middle column by clicking on each description. 

4.  You can see a preview of the layout in the right column.

 

Note:  When you open one of these premade layouts, all you will see is a bunch of divs that have not been given any sizing instructions.  Don't let the initial appearance of these layouts confuse you. 

 

Right-click on a Style located in the Manage Styles Task Pane, and choose Modify Style.  If there is a style for the masthead, choose that one first.  Set a height for the masthead by clicking on the Position Category in the Style Builder.  Say, 90 px high.  Then click OK.  Now take a look at your layout.  Repeat this process for each div so that you can better see the layout.   Keep in mind, the columns should not receive a height.  So at the very end, remove the height values for the columns so that they can stretch open as you add content.

 

Here is an example of a Premade CSS Layout found in Expression Web 2.

premade css layout

 

Manage Styles Task Pane:  To modify the layout above, change the properties on the styles below....   To do this, right-click on a Style and choose Modify Style.  This will open the Style Builder, which is where you will modify the styles.

 

 2.  Create a Centered Layout From Scratch

See Designing Web Pages for a Tutorial on how to make a layout from scratch.