The goal

This lesson’s goals

By the end of this lesson, you should:

  • Know what the terms layout, design, and template mean.
  • Know how a template gets reused.
  • Be able to list the things you need to do to reuse a design.

Some terms

Let’s define some words, so we know what we’re talking about.

  • Layout. You already know this one. The regions on a page, and what they’re used for.
  • Template. An HTML file containing all the standard elements on a page, like headings and nav bars.
  • Design. A template and the complete set of files it uses, including CSS, JavaScript, and image files.

Let’s use an example to see how the three relate.

A layout

You learned about layouts in the last chapter. On most Web sites, pages use the same regions for the same things. For example, on every CoreDogs lesson page, there’s a lesson menu on the right.

A layout standardizes the way a site uses page regions. Here’s an example:

Standard layout

Figure 1. Standard layout

The header extends over both the content and the nav bar. The footer extends under both of them.

The layout doesn’t give any content. It doesn’t give formatting, either. For example, the footer might have a solid border and background color, or no border or background color.

There can be more than one layout for a site. For example, most of the pages on a site might use the layout in Figure 1. But pages in the Photo Gallery might use this layout:

Image gallery layout

Figure 2. Image gallery layout

A template

A template is an HTML file for a layout, with empty slots where content goes. You copy a template for each page on a site.

Here’s part of a template:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
...
    <title>[Site name]</title>
...
    <link rel="stylesheet" type="text/css" href="gorotron2.css"/>
...
          <h1>[Site name]</h1>
          <h2>[Subtitle]</h2>
...
        <h3>[Heading]</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </p>
        <h3>[Heading]</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </p>
...
</html>

Figure 3. Part of a template

Lines 4, 8, 9, 11, and 18 have spaces for text to go. The lorem ipsum text is just filler.

Let’s say the file in Figure 3 is called template.html. To make the home page for your site, you copy template.html, and name the copy index.html. You fill in the empty slots.

To make a contact page, you copy template.html, and name the copy contact.html. You fill in the empty slots.

And so on.

Here’s line 6 of the template:

   <link rel="stylesheet" type="text/css" href="gorotron2.css">

Why do I point this out? Because of …

A design

A design is one or more template files, plus the CSS files, image files, and JavaScript files that the template(s) use.

Here’s how the template in Figure 3 renders, when it has all of the files it needs:

Rendered template

Figure 4. Rendered template

This is based on the Random Landscapes design.

To sum up, here are those terms again:

  • Layout – regions on a page.
  • Template – an HTML file containing all the standard elements on a page, like headings and nav bars.
  • Design – one or more templates and the complete set of files they use, including CSS, JavaScript, and image files.

Start and end points

Here’s what happens when you reuse a design.

Start: A design that someone else made. The person who made the design had their own goals. They probably don’t match your goals, not exactly. So you need to change the design.

End: You have a new design, one that does what you want. Maybe the layout’s been changed, there are new colors, new fonts, whatever.

The new design has a template (maybe more than one). The template is based on the code on the original design, but changed to meet your requirements.

So you have one or more templates. You copy the template(s) to make your site.

How do you reuse a design?

Say you want to make a new site. You decide to reuse a design. Here’s what you do.

  • Decide what your site should look like. Layout, mood, etc.
  • Find a design. Look through what’s out there, and pick something.
  • Gather your tools. Browser, editor, graphics program, and other stuff.
  • Set up your working directories. Keep copies of your work in stages. If you mess up, you can go back to the last checkpoint.
  • Make new templates. Change the layout, fonts, and graphics.

Summary

  • A layout is the regions on a page.
  • A template is an HTML file you copy and complete.
  • A design is one or more templates and their supporting files.
  • To reuse a design:
    • Decide on what your final site should look like.
    • Find a design.
    • Gather your tools.
    • Set up your directories.
    • Make new templates.

What now?

Let’s find a design, and reuse it.


How to...

Lessons

User login

Log in problems? Try here


Dogs