Expression Web/HB Tours Site/Layout with a CSS Template

A concept introduced around 2010 was the separation of design and content in a Web site. From a design point of view there are two areas: the Layout of the page and the formatting of elements in the page.

In the past, tables were often used to layout a web site, with the cells assisting in positioning the elements on a page. However, the number and type of devices accessing your page now includes not only the traditional PC (with varying monitor sizes) but many Mobile devices as well. Further, as the pages become much richer, the printed version of the page usually needs different formatting. All this can be achieved using Style Sheets.

This tutorial looks at using some CSS Templates to layout your web page. We will create a generic page that we can use as a model for all the other pages in the web site.

{{vmv:Box|Objective|3|| By the end of this page you should be able to:
 * Using CSS Templates in Expression Web to layout your web site.

Pre-knowledge
}}


 * 1) Use drop arrow next to New Document button
 * 2) Select
 * 3) Select
 * 4) *In the center panel, use your mouse (or up/down arrows) to look through the Layouts provided by EW.
 * 5) Since I want to show a reasonably complex layout, choose
 * 6) EW will create 2 pages (Untitled_1.css and Untitled_1.html)
 * 7) *Save the html file as generic.html with a title of Generic Page
 * 8) *You will also be prompted for the name of the css file. Call this layout0.css

Let's have a little look at what was created..

generic.html

layout0.html

Note:
 * A &lt;DIV> tag is used to manage the different areas, and includes an id.
 * The left and right columns are specified before the page content (the center column)
 * clear for the footer is used so that the browser doesn't get confused with multiple columns.
 * A # in a style indicates only the first occurrence of this id has the style attached - in this case there should only be one of each (masthead,top_nav, container, etc.)

In this activity, I want you to center the content in the masthead, top navigation and footer.
 * 1) First, using generic.html, could you type into the correct areas the names of each area (as shown in Figure 1 above).
 * Now, modify layout0.css - do not format in the html document !
 * 1) *With layout0.css selected, enable the tab. I will show you how to do one of them..
 * 2) *Right click on #masthead, and choose
 * 3) **Click on and change the text-align drop box to
 * 4) **Then
 * 5) *Repeat for #top-nav and #footer
 * 6) Now select the html document and the text header and footer text should now be centered (Figure 2).

Generic page for the HB Tours site
As part of a storyboard, You should develop a generic page that contains the common layout and elements for your site, and can be used to construct the Layout CSS. The following is an example of a Generic page developed for the Hawke's Bay Tours Web Site.


 * To help understand how CSS Layouts work, we will concentrate on playing around with modifying some text, backgrounds and borders
 * 1) Using Expression Web, and the technique shown in Activity 2, try to reproduce the layout shown in Figure 3 (above). Remember, change the style in layout0.css and see the result in generic.html
 * 2) In layout0.css change the left and right columns from 200px to 100px (you will need to change this in 4 places)