[ToolmakerSteve.com banner TBD]


 

Page Templates For Use In Microsoft Expression Web

----- NEEDS REWORK SINCE OVERALL SITE CHANGE -----

 

Each of these pages is based on its own DWT (Dynamic Web Template).

NOTE: Since each one has its own menu style, navigating through this part of TMS.com can be confusing.

 

Each DWT could be used to make many pages with the same layout.

Each has a banner and a footer.

Each has a menu, either horizontally in the banner, or vertically in the left column.

Download All [right-click / Save Target Link As] (All Page Templates, Menus, and Style Sets)

 

To add another page:

 

Menus: You can easily swap in a different menu structure.

 

Style-sets:  Each style-set can be applied to any of the page-template DWTs or HTMs:

Instructions: These styles are included in "download all" above.  Or you may download separately.  Each style links to the needed assets.  Download and unzip the assets.  Put any images into folder "images".  Put the .css file into folder "style-sets" (or anywhere).

 

A note on fixed-width layouts.  The overall width is 790 pixels, and the right margin is 20 pixels, so that the content fits within the leftmost 770 pixels, for viewing on an 800 x 600 monitor, in a browser window with a scrollbar.  Even if you have a larger monitor, consider that your customers may not.  Or they may have favorites pane or history pane using some width.

Fixed-width versus flexible-width layouts.  A fixed-width layout ...[TBD]

Finding and changing the key values controlling the page layout.  Each value is an [attribute?] in a css style.  To locate a style, we can use the "breadcrumbs" at the top of the page (<body> <div#container> ...).  Click somewhere in the item you wish to change, then go to "breadcrumbs" and click on the item of interest.  A css style can be changed either via the "CSS Properties" pane or via the "Modify Style" dialog.  (For details, see EW's Help, Category "Cascading Style Sheets", Subcategory "Styles", Topic "How to Modify a Style".)  Some commonly  changed [attributes?] (in this set of layouts) are:

And some attributes in the DWT of the fixed-width layouts:

For example, here is a recipe for changing the width of the whole page of a fixed-width layout, using the CSS Properties pane.

 Adding (or deleting) a column (fixed or flexible).  The columns are held in a one-row table.  Each column is a table cell.  To change the number of columns, we will add (or delete) a table cell.  (See Help / Tables and Layout Tables / subcategory: Tables / topic: Tables, sections: "To add a cell.." and "To delete a cell..".)

Deleting banner (or footer).  Each of these is a <div>.  Click anywhere within that element (banner or footer).  Click, in "breadcrumbs", on <div#banner> (or <div#footer>), so that the whole element is selected.  Press key "Delete".

A note on the layout technique used.  Unlike most css-based examples you will find, I use a single-row table to layout columns.  A table is still the easiest way to get columns to behave nicely in all browsers (as of 2006).  In particular, solutions that only use divs require extra complexity to have the columns extend their background color all the way down to the footer, when the column content are different heights.  This complexity may be inconvenient when you start making changes to the layout.  For example, to change the width of the left column [in an all-div solution], you might need to change a number in TWO different places!  But not here  :)

Links to other tutorials, examples, resources for page layout: