Free Site Template Layouts for FrontPage 2003 and Sharepoint Designer 2007

Site Templates for Expression Web, FrontPage 2003, and Sharepoint Designer 2007.

Site Templates

These FREE Expression Web Site Templates were previously announced on Expression Web Tips. They are available for all versions of Expression Web. They will also work in FrontPage 2003 and the free Sharepoint Designer 2007.

The set of twelve site templates are based on Eric Meyer’s CSS Sculptor for Expression Web produced by Webassit but no longer available. Each of the site template packages is complete with a linked style sheet and dwt and is commented in-depth so they are easy for you to use.  Included is a search box and contact form with instructions on how to use them and full instructions on working with these and other pages of the site. You can download all twelve of the templates at Expression Web Site Templates.

The Site Templates are available as:

  • One column, with top navigation, header, and footer
  • Two column, with left sidebar, top navigation, header, and footer
  • Two column, right sidebar, top navigation, header, and footer
  • Three columns, left and right sidebar, top navigation

Within each of the above four groups, you will find the following layouts available:

  • Fixed width to 800px
  • Fixed Width to 1024px
  • Liquid Width

Each package include the following pages with instructions on how to use them and why you should include them as part of your site.

Download the Expression Web Site Templates and remember they WILL WORK with both FrontPage 2003 as well as SharePoint Designer 2007. Tweak them by changing the colors and graphic images. Make them your own. This is our gift to you, the web design community.

ON SALE! CSS Sculptor for Expression Web

ON SALE though June 30th 2009 Eric Meyer’s CSS Sculptor for Expression Web for $39.99 which is ten dollars off the regular price.

Create standards compliant CSS-based website layouts with ease. You can see some examples of templates created and availabkle for free download at Expression Web Tutorials and Templates.

Overview of Eric Meyer’s CSS Sculptor for Expression Web.

  • Total Customization – The included wizard gives you total control over all aspects of your layout so that you can design unique one-of-a-kind layouts.
  • Efficient and Intuitive –  Now you can develop CSS-based layouts faster than ever before with our powerful easy-to-use wizard.
  • Cross Browser Compatibility – Create CSS-based layouts that are compatible with all modern browsers.
  • CSS Expertise -We have partnered with Eric Meyer, renowned CSS master, so that you too can create professional looking CSS-based layouts without CSS knowledge or experience.

Get it now as the sale lasts ONLY though June 30th 2009 Eric Meyer’s CSS Sculptor for Expression Web for $39.99 which is ten dollars off the regular price.

Five Minute Upgrade – Using CSS Borders for Emphasis

I’ve noticed recently that many of the techniques used by top designers are actually quite simple. It’s how these simple elements are pieced together that makes a design brilliant. Today we’ll be looking at the first one of these highly effective, yet strikingly simple design methods with the use of CSS borders.

Borders have a lot more impact than most people realize. They can make a design look miles better with only minutes of work. The little characteristics like weight, style, and color have big effects on either drawing elements out or making them fit into the background.

Read Five Minute Upgrade – Using CSS Borders for Emphasis by Zach Dunn and try out some of his suggestions on your own site.

The Woork Handbook

The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design… directly from Woork!

The book contains articles with code sections, images, illustrations and links to the original articles on woork.You can choose to download The Woork Handbook in pdf format or read it online.

Structural Naming Convention in CSS

Structural naming convention means that you name you elements for what they do rather than where they are located or how they look. When you assign a class or id for the masthead area of your page, you would then name it banner or masthead rather than top-div. Naming the elements for where they are located or how they look is called presentational naming.

Example 1: Presentational Layout click thumbnail to view larger image

Screenshot Presentation Layout - click to view larger image

Problems the Presentational Layout presents:

  1. What happens if you move things around? Is the accuracy of your markup affected?
  2. The div names don’t accurately describe what the elements are. Either what they are for and what they do as part of the overall document.

Example 2: Structural Layout click thumbnail to view larger image

By changing the names of the elements to #header, #site-navigation, #main-content, and #footer, the names NOW describe the purpose and the structure of those particular elements within in the document.

Guidines:

  1. BEFORE choosing the id or class for an element, ask yourself what is the element for?
  2. AVOID using names that rely on the location or visual look of the element. What happens if you want to change that class red-link to blue-link?
  3. Use names that are intuitive and mean something to you.

You can read  CSS Tip #2: Structural Naming Convention in CSS by Jacob Gube in its entirety. Make sure you check the Related Articles listed at the end.

Templates that are offered on Genealogy Web Creations and Expression Web Tutorials use the structural naming convention.