1. Computing

Discuss in my forum

How to Use Basic Web Templates

Create Fancy Pages from Seemingly Dull Templates

By

While there are many ready-made templates available, they can end up feeling just like everyone else's website, especially those people who used that template. But writing a Web page layout from scratch can be difficult. Instead, you can look at free templates that just show you the layout, rather than providing images, colors, and designs, and then use your own logos, images, colors and more to create exciting websites that look unique to you - even though you used a template.

Step 1 - Choose the Template for the Layout You Like

Most Web designs can be put into 3 basic layouts:

For this tutorial, I've chosen the 2-Column Centered Flexible Width Website Template as the base of my new website.

Step 2 - Make any Basic Structural Changes to the Layout

The template I've chosen will work well, but there are a couple things I need to add or change. Primarily, I want to have a navigation bar across the top of the page, not just in the narrow column. I also need more than just a sub-head as the footer, so I'll convert that to a <div>. The specific changes I made include:

  • Removed all the optional borders from the design
  • Zeroed out the margin on the h1 headline:
    #container h1 { margin: 0; }
  • Added a horizontal menu (minus the colors) from my horizontal menu template
  • Added a footer <div> at the bottom
    <div id="footer"> ... </div>
    and used the h2 CSS:
    #container #footer { clear: both; }

View the Layout

Step 4 - Choose a Color Scheme for Your Layout

It can be hard to choose a color scheme for your website. I typically choose the color based on something that I know is going to be an integral part of the design. Such as:

  • the site logo
  • photography of the site
  • favorite colors of the client

For my design, I knew that I wanted to build a site around a wonderful photo of the sunset from our recent trip to Hawaii. The photo had lots of great colors in it, and I finally decided on a color scheme with these colors:

  • #653A59
  • #D78F00
  • #FBF382
  • #CA8A89

I edited the sunset photo so that it was exactly 1000px - the maximum width I'd set for the page. I also faded it a little as I'm going to use it as my background and I didn't want it overpowering the page. Then I took my edited sunset photo and set it as the background of the entire page:

body { background: #999 url(hawaii_sunset.jpg) center center no-repeat; }

Then I played around with the other colors for other elements of the page. Such as the links, headlines, and text:

a:link { color: #D78F00; }
 a:visited { color: #653A59; }
 a:hover { color: #CA8A89; }
 a:active { color: #FBF382;}
 #container h1, #container h2, #container h3{ color: #653A59; }
 #container p, ul li, ol li, dd, dt { color: #000; }

Finally, I changed the hover color for the navigation bar to match my color scheme that I'd chosen.

ul#navigation li a:hover { color: #000; background-color: #FBF382; } 

View the Layout

Step 5 - Work with the Fonts and Typography

Right now, the text on my page is all the default font of the browser. This is boring, and doesn't match the tone of the content. I use several things to help me decide what font families to choose for a page:

  • Sans-serif fonts are easier to read online, so I like to use them for body text
  • Serif fonts are more formal and I like them for headlines, especially h1 headlines
  • Fantasy and script fonts, while often fitting the tone better than other fonts, are not widely available
  • Comic sans is often the default for script typefaces, so I try to avoid that style
  • I like to use fonts that are similar on both Windows and Macintosh, so my readers get a similar experience

Compare fonts on Windows and Macintosh

After looking at the chart, I decided to use Palatino Linotype and Palatino as my primary serif typeface choices with Book Antiqua and New York as alternatives. So I set up my headlines with this font face. I wanted to use the sizes as reference to their priority as well. This is the CSS I wrote:

#container h1 { font: bold 2em/2.25em "Palatino Linotype", "Book Antiqua", Palatino, "New York", serif; }
 #container h2, #container h3 { font: "Palatino Linotype", "Book Antiqua", Palatino, "New York", serif; }
 #container h2 { font-size: 1.5em; line-height:0.8em; }
 #container h3 { font-size: 1.25em; line-height:0.8em; }

For the standard text on the page, I wanted a sans serif font, so I chose Geneva and MS Sans Serif from the compatibility chart. I wanted the font to be a decent size, with the list in the narrow column slightly smaller. If I thought there were going to be other tags in that column, I'd change the style selector to reflect other text options.

#container p, ul li, ol li, dd, dt { font: normal 1em/1.25em Geneva, "MS Sans Serif", sans-serif; }
 #thin-col ul li { font-size: 0.9em; }

I used ems as my type measurement because it flexes with the browser font sizes. This makes the page more accessible. However, whatever measurement style you choose, you should use it throughout - don't mix ems with pixels or points with percentages. If you do, you can end up with some strange looking effects.

View the Layout

Step 6 - Add Content

If you're like most designers, you could do more, and you probably want to. That's fine. Design away. But don't forget to add content to your page so that you can launch.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Web Design
  5. Principles of Design
  6. Layout
  7. Website Templates
  8. Free Web Templates
  9. How to Use Basic Web Templates - Create Fancy Pages from Seemingly Dull Templates

©2014 About.com. All rights reserved.