Filed In:
Free Web Site Templates from About.com
These templates were created by the About.com Guide to Web Design and HTML. They use CSS and XHTML to create standards based Web pages.
To Use These Templates
1. Download the XHTML, CSS, and any related files.
2. Place all the files in the same directory.
3. rename the CSS styles.css if it's not named that.
4. Test in your Web browser.
5. If there are problems, make sure that the CSS is referenced correctly and in the correct location.
6. Edit the page in your HTML editor to add your content and images.
7. Post the page to your Web site.
Terms of Use
You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.
To Use These Templates
1. Download the XHTML, CSS, and any related files.
2. Place all the files in the same directory.
3. rename the CSS styles.css if it's not named that.
4. Test in your Web browser.
5. If there are problems, make sure that the CSS is referenced correctly and in the correct location.
6. Edit the page in your HTML editor to add your content and images.
7. Post the page to your Web site.
Terms of Use
You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.
Free Web Template: Basic Web Form with Left Aligned Labels Template
A free Web template to create a standard HTML form with left aligned labels.
Free Web Template: Basic Web Form with Right Aligned Labels Template
A free Web template to create a standard HTML form with right aligned labels.
Free Web Template: Right Aligned Web Form
This is the CSS for the Right Aligned Web Form free Web template.
Free Web Template: Left Aligned Web Form
This is the CSS for the Left Aligned Web Form free Web template.
Free Web Template: Right Aligned Web Form
This is the HTML for the Right Aligned Web Form free web template.
Free Web Template: Left Aligned Web Form
This is the HTML for the Left Aligned Web Form free web template.
Free Web Template: Top Aligned Web Form Template
A top aligned web form template for creating HTML forms.
Free Web Template: Top Aligned Web Form
This is the HTML for the Top Aligned Web Form free web template.
Free Web Template: Top Aligned Web Form
This is the CSS for the Top Aligned Web Form free Web template.
Free Web Template: 2 Column Web Page in HTML 5
This is the XHTML for the 2 Column Web Page in HTML 5 free web template.
Free Web Template: 2 Column Web Page in HTML 5
This is the CSS for the 2 Column Web Page in HTML 5 free web template.
Free Web Template: 2 Column Web Page in HTML 5 Website Template
This is a two column layout written in HTML 5. It uses CSS and HTML 5 tags to define the layout. It doesn't work in IE or Firefox. It does work in Safari 3 and 4 and Opera 9 and 10.
Free Web Template: Three Column Centered Flexible Width Websi…
This is a free Web template showing how to create a centered, flexible width layout with three columns. The width of the entire page is flexible upto a maximum size of 1000px, and the widths of the interior columns is flexible as well. It is a great layout to get a lot of information on a page at once.
Free Web Template: $$Three Column Centered Flexible Width
This is the CSS for the Three Column Centered Flexible Width free web template.
Free Web Template: $$Three Column Centered Flexible Width
This is the XHTML for the Three Column Centered Flexible Width free web template.
How to Use Basic Web Templates
There are lots of free Web templates available, and most of them are very fancy, with images, scripts, and fancy colors and styles. But then you come along some plain ones. All these seemingly ugly ones have are basic shapes and positions for the layout, perhaps even just a wireframe or basic layout. You'd never want your page to look like that, so what good are these layouts? Learn how to use these seemingly ugly layouts to create fancy and creative designs that are all your own.
Free Web Template: 2-Column Centered Flexible Width Website Template
A very common layout you find on the Web is a 2-column centered layout that flexes to match the current window width. This layout validates as XHTML 1.0 Strict, uses h1 and h2 tags for headlines and the main content area comes first on the page.
Free Web Template: 2-Column Centered Flexible Width
This is the CSS for this free web template.
Free Web Template: 2-Column Centered Flexible Width
This is the XHTML for this free web template.
Free Web Template:
This is the CSS for this free web template.
Free Web Template: Fifty-Fifty
This is a two column layout with an optional footer. This is the XHTML for this free web template.
Free Web Template: Fifty-Fifty Website Template
This is a two column layout with an optional footer. It is built as a flexible width template with two columns, one with a colored background and one not. It is built so that browsers that support the max-width property will not expand the page too wide to read.
Free Web Template: Portrait Photo Gallery Website Template
This free Web template is a photo gallery for photos in a portrait layout. It uses pure CSS for the site layout.
Free Web Template: Fancy Photo Gallery Website Template
This free Web template is a fancier version of a photo gallery. It uses JavaScript to display captions and the images themselves as well as pure CSS for the site layout.
Free Web Template: Portfolio Layout
A simple layout for a Web portfolio
Free Web Template: Calendar Layout
Put up a monthly calendar on your Web site.
Free Web Template: Overlapping Sections in a Two Column Layout
Learn how to set up a layout with two columns a header where the columns have some overlap.
Free Web Template: A Polaroid or Instant Photo with CSS
Learn how to set up a layout with two columns a header and a footer.
Free Web Template: Two Column Layout with Header and Footer
Learn how to set up a layout with two columns a header and a footer.
Free Web Template: Photo Gallery Layout - One Photo per Page
Learn how to set up a layout for a simple photo gallery with one photo per page.
Free Web Template: Two Column Stretches to Fit Layout
Learn how to set up a layout with two columns where the second column stretches to fit the browser width.
Free Web Template: Wrap Text Around an Image Layout
An interesting effect in print is the ability to wrap text around an image so that it follows the contours of the image. With this CSS trick, you can mimic this effect on your Web site.
Free Web Template: Top Square Navigation Layout
I got the idea for this simple layout from a forum I was reading, where the writer wanted the text in the layout to wrap around the navigation box. I just thought it might look nice.
Free Web Template: Top and Bottom Rows Layout Template
This Web template gives you space to put branding and navigation information at the top and copyright and contact information at the bottom while your main page area takes up the rest of the space.
Free Web Template: Simple Photo Gallery Layout
This Web site template shows one simple way you can layout a photo gallery and use JavaScript to display the expanded image page.
Free Web Template: Multiple Boxes Layout
Learn how to set up a layout with multiple boxes for images and text. This layout looks like it was done with tables, but it's 100% CSS using float and width elements. This layout also demonstrates the use of multiple classes on one element.
Free Web Template: Left Navigation Top Header with Photo and Colors
This Web site template uses a photo to determine the color scheme and the layout. The photo location could be used on an ecommerce site as a product shot or as a photo for a Web log.
Free Web Template: Form Layout
This Web site template shows one complex way you can layout a form using no tables. This is a very position intensive layout - and in fact, I find it quite cumbersome. It uses the standard left nav with top header - if you're willing to change the positions of every form element, you can move them wherever they fit on your screen. It's not as elegant as I would like, but it does the job.
Free Web Template: Floating Navigation Box Layout
Web site template of a main page with rows at the top and bottom layout
Free Web Template: Fake Frames Layout
By using the overflow property, it is possible to create fake frames on your Web site. However, doing this loses you the prime value of frames, so I would recommend using this layout as an example of how to use overflow, rather than a realistic design template.
Free Web Template: Brown Crossbar Layout
This Web site layout was suggested to me by Marcia, the Bipolar Disorder Guide at About. It uses three divs to create a cross in the upper left of the page with the main content held below it.
Free Web Template: Better Three Column Layout
There are many ways to do a three column Layout using CSS and XHTML, but this one is one of the better ways to get 3 columns on your Web page without a lot of headache or trouble. And this 3-column template works in both IE and Mozilla (Netscape) browsers.
Free Web Template: Three Columns Layout
This Three Columns layout Web page template makes your pages look like a newspaper. Similar to a newspaper, this three column layout features fixed width columns on the right and left with a variable width center column for your main content.
Free Web Template: Three Column Top Layer Layout
Three columns is something of the holy grail of CSS Web layouts and this layout modifies that design with a top layer for branding or navigation.
Free Web Template: 3-Column with Header and Footer Layout
Learn how to set up a 3 column layout that has both a header and footer. This 3 column Web page layout template uses floats to position the columns. 3 column layouts are considered hard to generate with CSS, and 3 columns with a header and footer below are even harder. You'll find that 3-column layouts are actually fairly easy to build and maintain.
Free Web Template: 3-Column with Footer Layout
Once you have 3 columns on your Web page, getting the footer to display below all three columns can also be a pain. Luckily, with just a slight modification to the better 3 column layout, you can add a footer with ease.
Free Web Template: Two Column Layout Template
Web site template of a basic two column layout. This is a very basic layout, with two columns. The left is fixed width and the right is the rest of the window space.
Free Web Template: Two Column with Top Branding Layer Layout Template
Web site template of a two column with top branding layer layout
Free Web Template: Two Column Faux Column Layout
Learn how to set up a layout with two columns and a faux column so that all columns appear to be the same height.
Free Web Template: Centered Single Column Layout Template
Center your content in the browser, no matter how large the monitor
Write an Ouline in HTML and CSS
Creating an outline of a document can be tricky, especially in XHTML. Getting the location of the ending LI tags is easy to mess up. But with this...
Free Web Template: Hierarchical Outline in HTML and CSS
A hierarchical outline with up to 5 levels for creating written outlines using HTML and CSS.
Free Web Template: Float the Navigation Layout
Float the navigation to the right or left to create a layout that maintains your navigation and contents in an easy to use format. Layout is XHTML 1.0 with CSS2.
Fits in One Screen Layout
This is the header
Fits in One Screen Layout
This free template creates a layout that will fit on one screen, no matter how large or small that screen is. Layout is XHTML 1.0 with CSS2.