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: Portrait Photo Gallery
This free Web template is a photo gallery for photos in a portrait layout. It uses pure CSS for the site layout. This is the CSS for this free web template.
This free Web template is a photo gallery for photos in a portrait layout. It uses pure CSS for the site layout. This is the CSS for this free web template.
Free Web Template: Portrait Photo Gallery
This free Web template is a photo gallery for photos in a portrait layout. It uses pure CSS for the site layout. This is the XHTML for this free web template.
This free Web template is a photo gallery for photos in a portrait layout. It uses pure CSS for the site layout. This is the XHTML for this free web template.
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.
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
This Web site template is a photo gallery where the thumbnails are listed in an unordered list and the full size photos are displayed in a popup layer. This is the CSS for this free web template.
This Web site template is a photo gallery where the thumbnails are listed in an unordered list and the full size photos are displayed in a popup layer. This is the CSS for this free web template.
Free Web Template: Fancy Photo Gallery
This Web site template is a photo gallery where the thumbnails are listed in an unordered list and the full size photos are displayed in a popup layer. This is the XHTML for this free web template.
This Web site template is a photo gallery where the thumbnails are listed in an unordered list and the full size photos are displayed in a popup layer. This is the XHTML for this free web template.
Free Web Template: Fancy Photo Gallery
This Web site template is a photo gallery where the thumbnails are listed in an unordered list and the full size photos are displayed in a popup layer. This is the JavaScript for this free web template.
This Web site template is a photo gallery where the thumbnails are listed in an unordered list and the full size photos are displayed in a popup layer. This is the JavaScript for this free web template.
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.
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
A simple layout for a Web portfolio
Free Web Template: Calendar Layout
Put up a monthly calendar on your Web site.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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
Center your content in the browser, no matter how large the monitor