Converting  a Table Based Layout to CSS Positioned Layout with Expression Web

Before you start, you need a basic understanding of Cascading Style Sheets (CSS) and X/HTML code. This tutorial will NOT teach you those skills.

In a previous tutorial Converting a Theme Based - Shared Border Web to DWT, I showed you how a table based layout using shared borders and the FrontPage navigation bots was converted to a Dynamic Web Template (DWT) using the FrontPage include web component and an external style sheet. Now lets take the same site and convert it into a css positioned layout using Expression Web. The menu will still use an include as it changes with the various sections of the site.

Original Site http://freepages.genealogy.rootsweb.com/~monroenys/

View screenshot of original site

View screenshot of source code for original site (you may have to click on the image to enlarge it)

Analyze Your Current Layout

Analyze the layout of your site and decide if you want the same "look" or a whole new look.  The current site uses three tables as well as nested tables for the layout. Draw it out on paper so you know what goes where.

• 1 row 2 column table for the masthead.
• 1 row 3 column table for the navigation, a gutter and the main content area.
• Two nested tables within the main content area for additional content
• single row table for the footer
• the three main tables were given a width of 100% so the page resized according to the viewer's browser resolution at 1024x768 and 800x600.

View screenshot with tables/cells outlined in red and green.

Choose Your CSS Layout Template

Pick a layout that most closely resembles the look you want. The current Monroe County New York site has five main areas, the masthead, the top navigation bar, the side navigation, the content, and the footer.  I chose the two-column-left-sidebar with masthead and footer. I set the container width at 90%. Download it to your computer in a newly created web and work on a COPY so that if you mess it up, you can start again. The css is included as an embedded style sheet. I work with it like that and convert to an external style sheet when I have completed the template. Video tutorial on external style sheets

View screenshot of Layout-O-Matic Preview

View screenshot of Layout-O-Matic Source Code

The source code is embedded in the head section and the five main <divs> or sections are coded for you to start. You will need to add another one for the top menu <div>if you want to use one. I also tend to rename the sidebar <div> to left navigation. So what you have now is each section in its own <div>

• Container Div - Holds the entire layout
• Banner Div - Will hold the banner
• Top Menu Div - Holds your main areas menu
• Left Nav Div - Will hold anything we want to the left (mainly your site navigation)
• Content Div - Will hold the main content
• Footer Div - Will hold the page footer.

View screenshot of Layout <div> tags

Define your styles

I first move the styles that have been created for the basic layout to an external sheet and add additional styling for each of the <div> sections as well as the body styles. Your style sheet will now contain the styles for:

• body and body img - which include the background color, font color, family, and size, margin and padding set to 0 to start. I also add a style for the body img { border: 0px; text-decoration: none; } so that any images I use as hyperlinks will not have the ugly blue border.
• container for all elements set at 90% so that it will resize according to the viewer's browser window with the page background surrounding the container. Left and right margins are set to auto so the container will be centered on the page. A background color and/or image is specified.
• masthead with the image used as the background rather than inserted into the xhtml coding. Make sure you specify the height you want the banner to be.
• top menu - which can include a border and any styling if you are using a list displayed inline (horizontally)
• sidebar navigation - this is floated to the left, a width is specified, and the styling for the navigation which is a list
• content - the left margin is stated so that it leaves some space between the menu and the content area. No width is specified so that it will expand and contract according to the viewer's browser window.
• footer - the clear tag is added to make sure the footer remains below both the left navigation and content areas. I also style the <p> tag with 0 top and bottom margins rather than use the <br> tag

Add the styling for your hyperlinks and h1-h6 tags and any others you think you will be using. Don't worry if you don't define all of your styles, you can add new styles as they are needed. You can also add comments to your styles so that you can remember what sections they are for. The style sheet for the layout for the Monroe County NY site.

Once you have created your basic layout, validate both the x/html coding and the css coding and save it as a dynamic web template (dwt). Expression Web DWT fr*ee Ebook by Tina Clarke

Monroe County New York
Final template before converting to dwt
External Style sheet

Convert Your Content

You are now ready to convert your site from tables to the css positioned layout. How much work that will entail will depend on how much formatting is within your x/html coding. Tips to use to clean up your current page:

• To remove current formatting on the page - In Design View CTRL + A > Format > Remove Formatting
• Convert a table to text - Select the table > Convert > Table to Text
• Use Search and Replace - Be careful doing this. I once searched for div to replace with p forgetting that divorce also begins with div. Save the page first, then use search and replace. If you mess up you can use Edit | Undo
• Copy and Paste Special

Once you get the page cleaned up delete everything between the <body> </body> tags EXCEPT your main content. You can then attach your DWT to the clean content maintaining your current meta tags.

Monroe County New York Revised index page

Gertner Family Page shows how a sectional menu would be used.

Additional Resources for Converting from Tables to CSS positioned layout

• Cleaning up your FrontPage code while written for FrontPage the suggestions will work in Expression Web as well.
• Tables to Valid XHTML/CSS

Additional Resources for CSS Based Layout Templates

• W3.CSS Website Templates
• CSS Grid Starter Layouts
• http://www.dynamicdrive.com/style/layouts/
• CSS Layouts based on the Layout-O-Matic starters

My thanks to Linda Gutiérrez for again allowing me to use her Monroe County New York site as an example.