CSS-based layouts are the presentation standard for web pages, but the learning curve can be steep. Instead of starting your layouts from scratch,
try the new preset CSS layouts provided in Expression Web 2 and the even wider assortment provided in Eric Meyer’s CSS Sculptor for Expression Web.
The first and second versions of Expression Web both provide a basic set of lean CSS-based page layouts that you can use as a starting point for your page
designs. If you compare the appearance of the page layouts in the first version of Expression Web with the page layouts in Expression Web 2, they appear to be the
same. But if you compare the underlying CSS of each you’ll see that we’ve improved the CSS that Expression Web 2 generates.
To start with one of the preset CSS-based page layouts, use the following steps in either Expression Web 2 or the first version of Expression Web.
- Click on File, then New
- In the New dialog box, on the Page tab, click CSS Layouts in the column on the left. In the column on the right,
select the page layout you want, and then click OK. For my example, I chose the third page layout in the list, named Three Columns.
When you select a page layout, a thumbnail preview of the preset layout appears on the right under Preview:
Columns that have a fixed width are shaded a darker color than columns that have a width that resizes with the size of the browser window. In addition,
a double-sided arrow lies horizontally across columns that automatically resize and a solid line lies horizontally across columns that have a fixed width.
In Expression Web 2, the columns that automatically resize with the browser window are each set to have a minimum width of 600 pixels.
Of course any of these properties can be adjusted as you like after you generate the page and CSS.
- The empty page layout is easier to work with if you turn on some of the Visual Aids that help visualize elements and attributes in the Design view of a page.
In the status bar that lies along the bottom of the program window, right-click Visual Aids and make sure the top four items in the list are selected: Show,
Block Selection, Visual Borders, and Empty Containers.
With those three visual aids on, it’s easier to work with elements, such as the DIVS in the CSS layouts. Now instead of a seemingly blank page, you can see an
outline around each div in the page layout. Since there’s no content in the page, the height of the layout appears collapsed.
- Adding some filler or placeholder content to the divs will help you see the page layout and make further design choices. I recommend creating a
Code Snippet for each bit of filler content you’d like to reuse for moments like this. To learn how, see my blog post Creating
a “content” snippet. In the meantime, you can just paste any content you want into each div of your layout.
- To help distinguish the columns, you can add a background color to each div. To do so, put your cursor in the div you want in the Design view of the page and
then click the associated
tag in the quick tag selector bar that lies along the top of your page. Go to the CSS Properties task pane, and set the background-color
attribute to the color you want, and then repeat this step for each div in your layout.
You can continue modifying your layout by setting additional attributes in the CSS Properties task pane, such as the padding that you want to appear between the contents of a div and the div.
You can do a lot with the nine lean CSS layouts that we provide in Expression Web. If you want a larger set of page layouts to choose from, and a more luscious
set of options and style sheets, then consider adding Eric Meyer’s
CSS Sculptor for Expression Web to your toolset. Joseph Lowry will show you how to use the CSS Sculptor add-in for Expression Web in the
next article.
About Anna
Anna is a Product Evangelist on the Expression Web team. When she’s not experimenting with CSS and helping users with her blog and in the Forum
for Expression Web, she constructs elaborate digital collages and calls it art.