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.

• Working With Forms
• Add a Search Box – Add Bing Search Box
• About Privacy Policies on your site
• Site Map page
• Links page
• About page
• Working with a Site DWT

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.

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.

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 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.

Example 1: Presentational Layout click thumbnail 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.

I get this one a lot and it’s surprisingly difficult to answer. The problem is that the question doesn’t include the persons background, which will in many ways determine the best course of action.

• Are you literally just getting started in web design? As in, you have never designed a website before?
• Have you designed web sites before, but never with CSS? As in, you are coming from a table-based mindset?
• Have you designed sites (graphically) before, but never done the actual coding?

My favorite analogy is that learning web design is like learning to play the guitar.

Read the entire article How Would You Recommend a Novice Get Started Using CSS?

He suggests jumping right in and getting started by going out and get yourself a domain name (from NameCheap or the like) and get yourself some cheap hosting. I would suggest a 1and1 account on their Linux servers. Then you get yourself a template. I offer a number of free ones on Expression Web Tips, Tutorials, and Templates as well as Genealogy Web Creations. You can also Google for CSS Templates. One word of advice is before you start to use the template, make sure it validates. Mine do.

Chris further states: “Now you have the ultimate learning environment. Start poking through that code and making changes and seeing what happens.”

Those of you with genealogy websites that are currently using the free servers on RootsWeb, you can also use the free templates to learn CSS. As you are aware, Rootsweb will add banners to the top of your page. All of my templates are written using an XHTML doctype which will NOT validate on the Rootsweb servers as is. Read RootsWeb FreePages Banners and XHTML Doctype.

Chris ends with: “That is how you learn CSS. Experimentation. THEN, you go buy a book about CSS. That book will make 10x more sense now that you have something to relate it to.”