Build out

Where are we?

The template is complete. Now to put it to use.

This lesson’s goals

By the end of this lesson, you should:

  • Know how to use a template to make an entire site.
  • Be able to make some changes to all the pages on a site at once.

Using template.html to make an entire site

Making a new page is easy. Here are the steps:

  • Decide what page you’re going to make. index.html, contact.html, by-the-arno.html, whatever.
  • Copy template.html.
  • Add the page title.
  • Add the page content.

Here’s the title and content in the template:

<title>[PAGE TITLE] | Natural Reflections</title>
...
<div id="content">
  <h2>[PAGE TITLE]</h2>
  <h4>[PAGE SUBTITLE]</h4>
  <p>Consectetuer adipiscing elit, sed diam nonummy nibh 
    euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
</div>

Figure 1. Title and content

Your new page might not have a subtitle. In that case, delete line 5.

Do that for Giles’ site, and here’s what you get (with one page missing).

W00f! We’re done!

Well…

Changing the template

We made lots of changes to the template, earlier in this chapter. Changed layouts, fonts, graphics, and standard content.

But that was before we built out the entire site. What if we want to make a change afterwards?

Changing template.php is no problem. But the changes won’t effect the pages we’ve already created.

For example, here’s the top nav bar for the current site:

Current nav bar

Figure 2. Current nav bar

There is no need for the poetry link. There are already links to all of the poems in the sidebar:

Poem list

Figure 3. Poem list

Giles wants us to remove it, making this the nav bar:

New nav bar

Figure 4. New nav bar

We have to change every page: index.html, about.html, contact.html, by-the-arno.html, etc. What a pain!

There are tools that can help us. NetBeans can do it. But this is a case where Notepad++ is a little better. There are several ways to make the change. I’ll show one of them.

Notepad++ has a bunch of plugins, like add-ons for Firefox. They’re small programs that extend the editor. One of them is Explorer, that shows you a directory tree. Here’s how you turn it on:

Turn on Notepad++ Explorer

Figure 5. Turn on Notepad++ Explorer

The Explorer window appears on the left:

Notepad++ Explorer

Figure 6. Notepad++ Explorer

Select the directory containing your site. Right-click on it, and choose “Find in files”.

Select Find in Files command

Figure 7. Select Find in Files command

Fill in the dialog that appears:

Dialog

Figure 8. Dialog

Let’s make sure we know what to change. This is the code we have:

<div id="menu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="poetry.html">Poetry</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

Figure 9. Current code

Line 4 has to go. We want:

<div id="menu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

Figure 10. New code

If we replace <li><a href="poetry.html">Poetry</a></li> with emptiness, we’d end up with:

<div id="menu">
  <ul>
    <li><a href="index.html">Home</a></li>

    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

Figure 11. New code – almost

We’d have that blank line. We want to get rid of the blank line as well.

In Windows, a new line is made by the special characters \r\n. So if we replace <li><a href="poetry.html">Poetry</a></li>\r\n with emptiness, we’d get what we want.

Here is the Find in Files dialog again:

Dialog

Figure 8 (again). Dialog

In the top field, I’ve pasted in the line I want to delete, including \r\n at the end. The “Replace with” field is empty. I checked “Extended” in the “Search Mode” box in the lower left, so Notepad++ would recognize \r\n as the “new line” combination. I clicked the “Replace in Files” button, and Notepad++ made all the changes for me.

W00f!

You can see the final site.

Site-wide changes are often more difficult than this. It won’t just be a couple of commands.

To really do a template-based site right, you need to use server-side technology, that is, have your pages constructed by a program that runs on your server. The Web site templates chapter in the ServerCore explains how.

Summary

  • Once you have a template, copy it to build out the site.
  • After the site is complete, it’s more difficult to make changes. Tools like Notepad++ can help.

What now?

Time for Renata and CC to do some work.


How to...

Lessons

User login

Log in problems? Try here


Dogs