Reuse a design

Offbeat dog OK, I admit it. I have zero artistic skills. I can’t draw. There’s no way I could draw that offbeat dog on the right.

When I make a site from scratch, it ends up looking, well, not so good. My talents are in the geekery of the Web. Not in the art of it.

But some people are great at the visual side. Some of them share their work. Yay!

When I can, I use one of their designs. I prefer free designs, but will pay for one that does something I really need.

This chapter is about reusing designs. Usually, designs other people make don’t do exactly what you want. You need to change the graphics, colors, fonts, etc. I’ll show you how to do that.

Renata
Renata

Isn’t that cheating?

CC
CC

It sounds like stealing.

Renata
Renata

And why did we bother learning all that stuff in the other chapters? We’re just going to use an existing design.

Kieran
Kieran

Good questions.

Only use designs you have the right to. The people who made them gave us permission to use the designs. There are plenty of good, free designs out there. Plus lots of low-cost paid designs.

Professional Web developers often reuse designs. This isn’t cheating. It’s good business. It saves time and money.

Now, about the learning. You can’t reuse designs unless you can make them do what you want. You need to know about images, links, nav bars, tables, layout… stuff we’ve already talked about.

CC
CC

Do you reuse designs from other people?

Kieran
Kieran

Yes! I didn’t make the CoreDogs theme from scratch. I based it on the design Nonzero.

What you’re going to learn is legitimate. As long as you abide by the design’s terms of use, or license. We’ll talk about licenses soon.

Let’s start by looking at the goal. At the end of the reuse process, what do we want to have?

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.

Getting ready

Where are we?

You’ve decided to create a new site by reusing an existing design. Now what?

This lesson’s goals

See how to:

  • Work out what you want.
  • Gather your tools.
  • Set up directories.

Knowing what you want – a little

You’ll be looking at lots of different designs. How do you know what to choose?

Making a list of things the design must have. Such as:

  • Mood. Modern, traditional, fun, conservative, extreme, decorative, plain…
  • Layout.
    • How many side bars?
    • Menu location – left, right, top, whatever.
    • Want a footer?
    • Place for a logo in the header?

When you’re making your must-have list, don’t be too picky. You may not find a design that’s exactly what you want.

If you’re making a site for young girls, don’t say: “The design must have a pink background with flower accent graphics.” You probably won’t find it.

Instead, say: “The design should be attractive to young girls.” That’s the right goal, and you’ll have more options to choose from.

Renata
Renata

I see some Flash templates out there. You can make a complete Flash site. What do you think?

Kieran
Kieran

I’d avoid that. Flash is great, but not for entire sites, unless you have very good reasons.

First, you need special tools to edit Flash. Some template companies offer online tools that make it easy to make a Flash site. But if you want to do something even a little bit different from what their tools do, you’re out of luck.

Second, Flash sites don’t index well with search engines. If search engine traffic is important to you, don’t use Flash.

Third, Flash sites can be just plain annoying. They’re cool when you first see them. But after a while they can be painful.

CC
CC

Does Flash have any place?

Kieran
Kieran

Yes! Slide shows with voice over, educational animations, games… I’ve done a lot with it over the years, and still use it. Just not for entire sites.

Gather your tools

Here’s a basic toolkit. Everything is free. You’ve seen this stuff before. I just want to remind you.

  • NetBeans or another IDE. For editing HTML, CSS, and JavaScript.
  • Firefox. The official CoreDogs browser.
  • Firebug. A Firefox extension. Lets you find the right CSS to change.
  • ColorZilla. Another Firefox extension. Lets you get the right color codes.
  • MeasureIt. Yet another Firefox extension. Lets you make things the right size.
  • Paint.NET or another graphics program. Make and change graphics. I use Paint.NET for simple things, and Gimp for more complex tasks.
  • WinSCP or another file transfer program. To get your work up to the server.

Set up your development directories

You’ll need to have a directory on your hard disk (or USB flash drive or whatever) to do your work. For example, if you’re working on a site called BiteSize, you might open your Documents directory, and make a directory called BiteSize.

Project directory

Figure 1. Project directory

When you work on a design, make snapshots as you go. A snapshot is a copy of the design at a point in time. If you mess something up, you can go back to the last snapshot.

When to make a snapshot? When you’ve got part of the design working. Say the first thing you work on is the top nav bar. When you get it right, take a snapshot. Then you work on the layout. When you get that right, take a snapshot. And so on.

How to make snaphots? First, make a subdirectory in BiteSize called current. This is where you do your work. After you’ve been working for a while, make a copy of current, and call it snapshot1. Keep working. When you’ve made a bunch o’ new changes, copy current again, and call it snapshot2. And so on.

After a while, your working directory will look like this:

Project directory with snapshots

Figure 2. Project directory with snapshots

snapshot1 would be the oldest snapshot. snapshot4 would be the newest snapshot. current would be your most recent work.

Suppose you made a bunch of changes to current, and they weren’t working. You’ve lost track of what you did. You’d rather just start this part over. You can delete current, copy snapshot4, and rename the copy to current.

What you’re doing is called “version control.” This simple approach is just fine for basic, one-person projects. Professionals working in teams use version control software, like Git.

Summary

  • Work out what you want, but only in general terms. Be open to new ideas as you look at designs.
  • Get your tools ready. IDE, browser, extensions, graphics editor, and file transfer tool.
  • Make working directories.

What now?

Let’s go find ourselves a design!

Find a design

Where are we?

We’re going to make a site, reusing an existing design. We’ve gathered the tools we need. Now for the next step.

This lesson’s goals

By the end of this lesson, you should:

  • Know how to find a design.
  • Be able to check the design’s license.
  • Know what to look for in the design’s code.
  • Know how to find elements with Firebug.
  • Be able to finish setting up your work area.
  • Know how to create a NetBeans project.
  • Know how to strip out unneeded content.
  • Be able to convert an XHTML file to HTML.

Find a design that meets your goals

Let’s work on an example. Here’s my friend Giles.

Hey, everybody

He’s into poetry. Likes to collect it, and read it to people. He’s really into poetry about nature.

Sure am

What can I do for you?

Can you make me a site?

Sure. What should it be like? Features, look, feel, like that.

Green, links to poems, an about me page, and a contact page.

OK, let’s see what I can do. I’ll look around for a design I can adapt. You can tell me what you think.

Okey dokey

I’ll start at Metamorphosis Design. They have hundreds of free templates. Let me see…

Found another template site you like? Add it to the links page.

Clock (Tick tock)
(Tick tock)
(Tick tock)

Here’s a design that might work. It’s called Metamorph Hills. What do you think?

Changes

I should be able to do that.

But I’m not sure whether we can use the design yet. I need to check a couple of things.

Exercise: Find free designs

Find at least five sites that offer designs for free. Enter their URLs.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Check the license

I need to check what I’m allowed to use the design for. The license will tell me. There are many kinds of licenses. Common ones are:

  • Public domain. Anyone can use the design for free, including commercial use.
  • Creative commons. Several variants with different permissions. For example, a design with a CC license might be free for commercial use, or not. The designer will tell you.
  • Commercial, non-exclusive. You can buy a license to use the design. Other people can buy a license to use the same design.
  • Commercial, exclusive. You buy the right to be the only person who can use the design.

Make sure you can accept designers’ terms before you use their work. If you’re looking for free stuff, public domain and Creative Commons usually work best. Remember, some Creative Commons licenses allow free commercial use. Others do not.

The license for Metamorph Hills is:

This website template is released under a Creative Commons Attribution 2.5 License.

We request you retain the full copyright notice below including the link to www.metamorphozis.com.

...

You are allowed to use this design only if you agree to the following conditions:

- You cannot remove copyright notice from this design without our permission.

- If you modify this design it still should contain copyright because it is based on our work.

- You may copy, distribute, modify, etc. this template as long as link to our website remains untouched.

I can live with that. I just need to leave the link to www.metamorphozis.com in the footer.

CC
CC

I don’t get it. Why would Metamorphosis Design let us use their work for free? Nobody is going to see the link down there.

Kieran
Kieran

You’re right, not many people will read the footer. But each time someone links to a page, that page gets a little more Google juice. This boosts Metamorphosis Design’s ratings for Google searches like “Web templates.”

Exercise: Check the licenses

Find three designs, with different licenses:

  • A public domain design.
  • A creative commons design that cannot be used for free for commercial purposes.
  • A creative commons design that can be used for free for commercial purposes.

For each one, enter:

  • The design’s URL.
  • A copy of the design’s license (the text that says what you can and cannot do with the design).

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Check the code

I always go through a design’s code before I commit to using it. What am I looking for?

Easy to understand

Here’s something that is very important:

The code must be easy to understand.

After you download a design, look at the HTML and CSS. Good designers write simple, easy-to-understand code. See if you can match the code in the HTML file to different parts of the layout. If you can’t, consider using another design.

What did I do for Giles’ site? I downloaded the zip file that Metamorphosis Design provides, and extracted the files. Then I went through the HTML, to see if I could match the code up with the main pieces of the page. Here’s the rendered page, shrunk to fit:

Rendered

Figure 1. Rendered page

Here’s some of the HTML:

<body>
  <div id="menu">
    ...
  </div> 
  <div id="content">
    <div id="header">    
      <div id="logo">
        ...
      </div>
    </div>
    <div id="main">
      <div id="right">
        ...				
      </div>
      <div id="left">		
        <h3>Nunc pellentesque</h3>
        ...
      </div>
    </div>
    <div id="footer">
      <p>Copyright © 2008...</p>
    </div>
  </div>
</body>

Figure 2. Template HTML

Let’s see if we can match them up.

The <body> is divided into two containers: menu (lines 2 to 4) and content (lines 5 to 23). Here’s what they correspond to on the page:

Main containers

Figure 3. Main containers

It didn’t have to be done this way, but it was. It works, so there’s no need to change it.

menu is obviously the top menu. Let’s look at the other container – content – and see how it works. Here’s the code:

  <div id="content">
    <div id="header">    
      <div id="logo">
        ...
      </div>
    </div>
    <div id="main">
      <div id="right">
        ...				
      </div>
      <div id="left">		
        <h3>Nunc pellentesque</h3>
        ...
      </div>
    </div>
    <div id="footer">
      <p>Copyright © 2008...</p>
    </div>
  </div>

Figure 4. Part of the template HTML

content has three containers: header (lines 6 to 10), main (lines 11 to 19), and footer (lines 20 to 22). Here they are on the page:

Containers in the content container

Figure 5. Containers in the content container

header doesn’t have much in it. Just a place for a logo and stuff.

main has some important containers. Here’s the code:

    <div id="main">
      <div id="right">
        ...				
      </div>
      <div id="left">		
        <h3>Nunc pellentesque</h3>
        ...
      </div>
    </div>

Figure 6. Part of a part of the template HTML

Here are the containers in the main container:

left and right inside main

Figure 7. left and right inside main

OK, I can figure out which piece of the page is created by which part of the HTML code. Why does this matter? Because if I don’t understand the code, I can’t change the look.

The CSS is straightforward as well. Here’s part of it:

#left {
  width: 220px;
  margin-left: 20px;
}
#right {
  width: 510px;
  float: right;
  padding-right: 20px;
}

Figure 8. Part of the CSS

These two rules style the left and right containers inside main. Line 2 sets the width of left to a narrow 220 pixels. Line 3 moves left 20 pixels in from the left edge of its container, main.

There’s something important there. left is inside main in the HTML:

    <div id="main">
      <div id="right">
        ...				
      </div>
      <div id="left">		
        <h3>Nunc pellentesque</h3>
        ...
      </div>
    </div>

Figure 6 (again). Part of a part of the template HTML

So main is positioned first, and then left is positioned inside main. What about right? It’s inside main too.

Here’s the CSS again:

#left {
  width: 220px;
  margin-left: 20px;
}
#right {
  width: 510px;
  float: right;
  padding-right: 20px;
}

Figure 8 (again). Part of the CSS

Line 6 makes right 510 pixels wide. Line 7 moves right all the way to the right edge of… of what? The screen? No! All the way to the right of right’s container, main.

CC
CC

Things inside things inside things? It makes my head hurt.

Kieran
Kieran

Yes, it can get messy. Let’s see how Firebug can help.

Finding elements with Firebug

Start Firebug by pressing F12 or clicking on its icon:

The Firebug icon

Figure 9. The Firebug icon

The Firebug window will appear at the bottom of the page.

Now click on the Inspect button:

The inspect button

Figure 10. The inspect button

Move your mouse cursor over the items on the page. Firebug will highlight the element your mouse is on, and show you the HTML and CSS that created the elements. This helps you find the things you need to change.

It also works in reverse. Click on an element in the HTML, and Firebug will highlight the element on the rendered page. For example:

HTML for the menu

Highlighted menu div

Figure 11. Click on HTML, highlight the page

Firebug is an important tool for reusing designs. We’ll use it in the next few lessons.

Exercise: Analyze a design

Check out the design ftddrops. Use Firebug, ColorZilla, or other tools to answer the following questions.

  • What is the name of the container with the Gallery button in it?
  • What is the name of the container of the entire left sidebar?
  • There’s a class called readl. What sort of element does it style?

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

OK, so the design has passed the first two tests:

  • The license is acceptable.
  • I can understand the code.

What next?

Check the DOCTYPE

Way, way back, at the beginning of the first lesson of the first chapter in this book, you saw an HTML template. It looked like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>TITLE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    BODY
  </body>
</html>

Figure 12. HTML template

We’ve used this ever since. So what’s the problem?

The problem is that there’s more than one HTML.

If you look at the code for the design we’ve been working on, you’ll see this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>

Figure 13. The template’s code

The DOCTYPE in line 1 is different. There’s extra stuff in the <html> tag on line 2. Huh?

Look at these lines from Figures 12 and 13:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

The character case is different (Content-Type vs. content-type), and the second one has a / at the end. We’ve never done that!

We’ve been writing HTML all this time. But the person who wrote Metamorph Hills (the design we’re using) didn’t use HTML. S/he used XHTML.

XHTML is a (more-or-less) obsolete version of HTML. XHTML looked like it was going to replace HTML 4. But, instead, the XHTML project died, and HTML 5 is being worked on.

XHTML is almost identical to HTML. There are only three differences we care about.

First, the DOCTYPE is different.

Second, there’s that funny xmlns thing in the <html> tag.

Third, every tag has a / at the end. HTML has a few tags that aren’t closed. For example:

<br> – line break

<hr> – horizontal line (r stands for “rule”)

<img> – an image

In XHTML, those tags should be written like this:

<br></br> or <br/>

<hr></hr> or <hr/>

<img></img> or <img/>

If you want to convert from XHTML to HTML:

  • Change the DOCTYPE.
  • Remove the xmlns attribute from the <html> tag.
  • Remove the unnecessary /s.
Renata
Renata

Do I have to do those things?

Kieran
Kieran

Not really, no. Just put the HTML you’ve learned into the middle of an XHTML file, and it will work fine.

There are some small issues that ├╝bergeeks care about, but the page will look exactly the same, and 99.99% of people will never know the difference.

But there are differences in smart code editors, like NetBeans. They look at the DOCTYPE, and then use the right set of error-checking rules for your code. So for <br>, NetBeans marks it as an error in XHTML, but not in HTML.

I like to make things easy on myself, so I convert from XHTML to HTML. Then NetBeans will help me as much as it can.

Exercise: XHTML to XML

Download Blue Sin. It’s an XHTML design.

Change it to HTML, the type we’ve been using. Then rename index.html to template.html.

Upload the new design to your Web server, and enter the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Check for strange code

The design’s code is quite good. Easy to follow. But there are a few things I don’t like.

There’s some weird stuff in the sidebar:

<ul>
  <li><ul>
      <li><a href="#">Vivamus id arcu</a></li>
      <li><a href="#">Duis congue ultricies</a></li>
      <li><a href="#">Purus in mollis purus</a></li>
      <li><a href="#">Orci nonummy fringilla</a></li>
      </ul>
  </li>
</ul>

Figure 14. Strange code

There’s a <ul> with an <li> inside it, and a <ul> inside that. I can’t see a good reason for it. I’ll change it to:

<ul>
  <li><a href="#">Vivamus id arcu</a></li>
  <li><a href="#">Duis congue ultricies</a></li>
  <li><a href="#">Purus in mollis purus</a></li>
  <li><a href="#">Orci nonummy fringilla</a></li>
</ul>

Figure 15. Fixing the strange code

Better.

Another problem is this code:

<h2>Welcome To Our Website</h2><br />
<h4>.../h4><br />
<p>...</p>

Figure 16. More strange code

The designer used <br>s to put vertical space between elements. It works, but isn’t good practice. It would be easy to forget to add the <br>s when making pages. Not a big deal, but another thing to go wrong.

I’d rather use the CSS margin-top and margin-bottom properties to make the vertical space. No <br>s to forget.

There’s one other thing I don’t like about the code. It isn’t indented properly.

You saw this earlier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>

Figure 13 (again). The template’s code

Even if I kept the XHTML, this should be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Metamorphosis Design Free Css Templates</title>

Figure 17. The template’s code – indented

CC
CC

You really think this matters?

Kieran
Kieran

Yes! I’ve helped hundreds of people learn this stuff. Time and again, I’ve seen beginners have trouble matching tags, like knowing which </div> belongs with which <div>. Because of this, they’ve wasted hours trying to find problems with their code.

Good indenting helps you see which tags belong together.

NetBeans will correct indenting for you, automatically. You’ll see how in a moment.

OK, so where are we? We’ve:

  • Found a design with most of the characteristics Giles wanted. He wants some changes (e. g., the sidebar on the right), but the design is close.
  • Checked the license. The terms are fine.
  • Checked that we can understand the code. We’ve mapped containers in the code, like <div id="left">, to areas on the visible page. It looks understandable.
  • Found some things we don’t like about the code: it’s XHTML rather than HTML, <br>s are used too much, and the indenting is off. But we can fix all of that.

So it looks like the design will work. Let’s get to work.

Move the design into your work area

Earlier, we talked about setting up development directories. One of those directories was called current. It’s the current version of your site.

Now that you’ve chosen a design, copy the design’s files into current:

Design's files

Figure 18. Design’s files

We want to turn index.html into a template for the new site. So rename the file template.html.

Rename to template.html

Figure 19. Rename to template.html

I always keep a copy of the original design, and the URL I got it from. Just in case.

Into NetBeans

Let’s use NetBeans to modify the file. The first step is to set up a new NetBeans project. Here’s how.

Start NetBeans, then start a new project.

New project

Figure 20. New project

NetBeans asks what type of project you want. Choose “PHP Application with Existing Sources.” Remember that you (should have) installed the PHP version of NetBeans.

Existing sources

Figure 21. Existing sources

“Existing sources” is geek-speak for “the files are already on the disk.”

PHP is a programming language that runs on Web servers. Although we don’t use PHP here, the PHP version of NetBeans includes the HTML, CSS, and JavaScript tools we need. The ServerCore book is all about PHP.

NetBeans asks where the files are. Browse to current:

Where are the files?

Figure 22. Where are the files?

Click the Finish button, and there’s a new NetBeans project, ready to work on.

NetBeans project

Figure 23. NetBeans project

W00f!

By the way, NetBeans will add another directory to current, called nbproject. NetBeans keeps track of its own stuff there. Copy that as well when you take a snapshot. But you won’t need to upload nbproject to your server (although it won’t hurt anything).

Simplifying the template

Remember our goal for the template. We want to be able to copy it to make new pages.

Here’s what the template looks like now:

Rendered

Figure 1 (again). Rendered page

The designer put a lot of content on the page. We need to get rid of most of it. For example, we don’t need the calendar in the side bar. We don’t need the filler text in the right area.

Renata
Renata

Why did the designer put that stuff there?

Kieran
Kieran

Two reasons.

First, to show what the design can do. For example, if you want to have a calendar on the left, there’s enough space in the layout for that.

All the dummy content in the right area shows that the design looks good when the right area is longer than the left. That’s the way each page would normally look in a real site.

The second reason for the content: there’s stuff the designer wants you to know. Like the license, and where to get more free designs.

Removed the stuff you don’t need. Replace things like the site name with filler text, like [SITE NAME]. This will help you remember to update that later.

Here’s the result. Pretty good, but not perfect:

Small problems

Figure 24. Small problems

I removed the extra <br>s we talked about earlier. That’s what caused the vertical space to close up. We’ll fix in the next lesson.

One last thing. NetBeans can indent the code for you. Choose the menu entry Source | Format, and NetBeans will take care of it.

Fixing code indenting

Figure 25. Fixing code indenting

You see the site so far.

CC
CC

Wow, this was a long lesson.

Kieran
Kieran

Aye, that’s so. But it’s quicker than building from scratch, and you get a better look for your new site.

Exercise: Better Blue Sin

Earlier, you changed the Blue Sin design from XHTML to HTML.

Now:

  • Remove content you don’t need.
  • Fix the indenting of the code.

Upload the new design to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

Here’s what we did:

  • Found a design that looked right.
  • Checked the license. It’s acceptable.
  • Checked the code to make sure we could understand it. If you don’t understand it, you can’t modify it.
  • Used Firebug to find page elements.
  • Found some code that needed to change.
  • Copied files to the current directory.
  • Created a new project in NetBeans.
  • Erased content that wasn’t needed.

What now?

We have a design. We have the tools. Time to fix the layout.

Change layout

Where are we?

We have a design, and we’re all set to start changing it. Let’s begin with layout, since that’s often the hardest thing to get right.

This lesson’s goals

By the end of this lesson, you should:

  • Remember that layout is the hardest part of CSS.
  • Understand that you need to move slowly and carefully when making layout changes.
  • Know that sometimes it helps to change the names of page elements.

Here’s the site so far.

Switching columns

Giles wants us to move the sidebar from the left to the right:

Move sidebar

Figure 1. Move sidebar

Layout is the hardest part of CSS. It’s easy to mess up. When I make changes to layout, I’m very careful about it.

Here’s some code, from the HTML and CSS files:

<div id="main">
  <div id="right">
    ...				
  </div>
  <div id="left">		
    ...
  </div>
</div>
...
#left {
  width: 220px;
  margin-left: 20px;
}
#right {
  width: 510px;
  float: right;
  padding-right: 20px;
}

Figure 2. Some existing code

There are two divisions, left (lines 5 to 7) and right (lines 2 to 4). I want to move left to the right, and right to the left.

Renata
Renata

Argh! Left on the right and right on the left! That’s hurting my brain.

Kieran
Kieran

You’re right, er, correct. It’ll be easier to get the layout right if the names are less confusing.

Let’s do something about that.

Changing names

Here’s more of the code:

  <div id="content">
    <div id="header">    
      <div id="logo">
        ...
      </div>
    </div>
    <div id="main">
      <div id="right">
        ...				
      </div>
      <div id="left">		
        <h3>Nunc pellentesque</h3>
        ...
      </div>
    </div>
    <div id="footer">
      <p>Copyright © 2008...</p>
    </div>
  </div>

Figure 3. Part of the HTML

Let’s rename left, and call it sidebar. It will always be a sidebar, no matter which side it’s on.

Let’s rename right. I want to call it content. That makes sense to me, because that is what it contains, the main content of the page.

But there’s already a content (line 1). Hmm…

Renata
Renata

You could rename the content on line 1 to something else. After all, it’s not really just “content” anyway. It’s a container for a lot of different stuff.

Kieran
Kieran

Hey, I like it! Let’s do that.

So, I’ll rename content on line 1. I’ll call it, hmmm…, header-sidebar-content-footer-container. A long name, but it describes exactly what the container is.

Now I can rename right to content. Here’s what I end up with:

  <div id="header-sidebar-content-footer-container">
    <div id="header">    
      <div id="logo">
        ...
      </div>
    </div>
    <div id="main">
      <div id="content">
        ...				
      </div>
      <div id="sidebar">		
        <h3>Nunc pellentesque</h3>
        ...
      </div>
    </div>
    <div id="footer">
      <p>Copyright © 2008...</p>
    </div>
  </div>

Figure 4. Better names

NetBeans wins again

When you change the names in template.html, you have to change the names in styles.css as well.

NetBeans makes this easy. Open the HTML and CSS files. In the HTML, put your cursor in the name you want to change (e.g., left). Hit Control+R, for “rename.” Enter the new name, leaving the # (or . for class) where it is:

Renaming in NetBeans

Figure 5. Renaming in NetBeans

Click “Refactor,” and NetBeans should make the changes in the CSS for you as well. Check the CSS file to make sure.

This is yet another reason to use a smart editor like NetBeans. It’s easy to miss something when renaming yourself. Get NetBeans to do it, and it’s quick and correct.

A simple change

Baby steps Remember, layout is hard. Easy to mess up.

So, when I’m changing layouts, I take it one baby step at a time.

Here’s some code after the name changes.

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  width: 220px;
  margin-left: 20px;
}
#content {
  width: 510px;
  float: right;
  padding-right: 20px;
}

Figure 6. After name changes

I’ll make just a couple of small changes, and see how it looks:

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  float: right; /* Changed */
  width: 220px;
  margin-left: 20px;
}
#content {
  width: 510px;
  float: left; /* Changed */
  padding-right: 20px;
}

Figure 7. Changing floats

I added float: right; to the sidebar (line 11), and changed the content float from right to left (line 17). That’s all. Small steps.

Renata
Renata

That /* Changed */ thing. That’s not CSS. Won’t NetBeans mark it as an error?

Kieran
Kieran

No, /* Changed */ is valid CSS. It’s how you type in a comment. Comments are useful, reminding us what we’ve changed. It’s easy to lose track.

I recommend adding comments like this when you change designs.

Here’s the result:

Float changes

Figure 8. Float changes

Hey, not bad! They’re on the correct sides now.

But I need to add a little space:

Need space

Figure 9. Need space

Put sidebar a little to the left, and content a little to the right.

Here’s code again:

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  float: right;
  width: 220px;
  margin-left: 20px;
}
#content {
  width: 510px;
  float: left;
  padding-right: 20px;
}

Figure 7 (again). Changing floats

Check out lines 13 and 18. What if I changed left to right in line 13, and right to left in line 18? We’d have:

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  float: right;
  width: 220px;
  margin-right: 20px;
}
#content {
  width: 510px;
  float: left;
  padding-left: 20px;
}

Figure 10. Switching the spacing

Here’s what we get:

The result

Figure 11. The result

W00fy w00fy w00f w00f w00f! Perfect!

CC
CC

Look at lines 13 and 18:

margin-right: 20px;
...
padding-left: 20px;

One uses margin and other one padding. Does that matter?

Kieran
Kieran

Not really. I don’t know why the designer did it that way. But it works, and I see no reason to change it.

margin and padding often do the same thing when there is no border. Not always, but often.

Here’s the site so far.

Exercise: Modify an OSWD design

Here is the Transparentia design from OSWD.

Original layout

Figure 1. Original layout

Download the design, and change it to switch the nav and content regions:

New layout

Figure 2. New layout

Hint: You can do it with just two small changes to the CSS.

Upload your solution to your server. Put your URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Exercise: Blue Sin layout

Modify the Blue Sin design you’ve been working on. Remove the secondary menu, and move the right sidebar to the left.

Here’s what mine looks like:

New layout

Upload your solution to your server, and put the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

  • Layout is hard. Go in baby steps.
  • Change the names of page elements if it helps you keep things straight.
CC
CC

Why “baby steps” and not “puppy steps?”

Kieran
Kieran

We wan’t to go slowly. Puppies move too fast. Have you seen those baby humans? They take a long time before they can move at all!

Renata
Renata

Humans are strange.

Kieran
Kieran

No argument there!

What now?

We’re doing well! Now for some font work.

Change fonts

Where are we?

The layout is good to go. Let’s deal with some font issues.

This lesson’s goals

By the end of this lesson, you should know how to make common font changes, with the help of Firebug.

We’ve got a few things to deal with. The site name is too small, the vertical gap between some things is too small, and the mouse over effects are not very attractive.

Onward!

Making the site name bigger

Here’s that we have.

Big subtitle

Figure 1. Big subtitle

The subtitle is bigger than the title. Let’s make the title bigger.

Do this is two steps:

  • Find the HTML and CSS that makes the thing we want to change.
  • Change it.

Firebug makes the first one simple. Start Firebug, and click the Inspect button on the toolbar. Click an element on the page, and Firebug will show you the HTML and CSS that made that element.

Isn’t Firebug w00fy?

Firebug told me that the CSS for the title was at line 65 of styles.css. Here’s what’s there:

#logo a {
  text-decoration: none;
  text-transform: lowercase;
  font-style: italic;
  font-size: 18px;
  color: #5C722A;
}

Figure 2. 18px

In line 69, I’ll change the font size from 18px to 36px, and save. Now I have:

Larger title

Figure 3. Larger title

W00f!

Gappity gap

Here’s part of the template:

Vertical gap too small

Figure 4. Vertical gap too small

The vertical gap between the lines is too small.

Firebug pointed me to this code:

<div id="content">
  <h2>[PAGE TITLE]</h2>
  <h4>[PAGE SUBTITLE]</h4>
...
#content h2 {
  margin: 0;
  padding: 0;
  padding-top: 10px;
  color: #F5FFDC;
}
...
#content H4 {
  margin: 0;
  padding: 0px;
  font-size: 12px;
  color: #F5FFDC;
}

Figure 5. Code to fix

Here’s what I changed it to:

#content h2 {
  margin: 0 0 10px 0;  /* Changed */
  padding: 0;
  padding-top: 10px;
  color: #F5FFDC;
}
...
#content H4 {
  margin: 20px 0 5px 0; /* Changed */
  padding: 0px;
  font-size: 12px;
  color: #F5FFDC;
}

Figure 6. Changes

I added 10 pixels to bottom of the page title with:

margin: 0 0 10px 0;

Recall that the first number is the top margin. Then you go clockwise. The second number is the left margin, the third is the bottom margin, and the fourth is the left margin.

The subtitle margins became:

margin: 20px 0 5px 0;

Twenty to the top, and five to the bottom. This means that when two subsections are in a row, the content will look like this:

Spacing between sections

Figure 7. Spacing between sections

In this case, the subtitle is being used as a section heading.

Because there’s more space above the title than below it, it’s clear where a new section starts.

Here’s another problem:

Vertical gap too small

Figure 8. Another vertical gap too small

The gap between the bottom of the title and the first link is too small. It would also look better if the links were pushed to the left a little.

Here’s what Firebug pointed me to:

<div id="sidebar">
  <h3>[SIDEBAR HEADING]</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    ...
  </ul>
  ...
</div>
...
#sidebar ul {
  list-style: none;
  margin-bottom: 10px;
  background: url(images/title_back.gif) repeat-x top;
}

Figure 9. Link list

All of the links are contained in the <ul> (lines 3 to 6). If I add space at the top and left of the <ul>, that would do it.

Check out line 12:

margin-bottom: 10px;

That’s adding space, but only at the bottom. What if I changed it to:

margin: 10px;

The margin would go on all sides. Let’s see what it looks like:

Margins all around

Figure 10. Margins all around

W00f! That’s it!

Well, almost. I’d like a vertical gap above the sidebar heading. Bring it away from the dark green a little.

Sidebar spacing problem

Figure 11. Sidebar spacing problem

I open Firebug, click on the inspect button, and click on the sidebar heading. Firebug tells me that I need to look at the #sidebar H3 rule in styles.css, line 127:

Sidebar in Firebug

Figure 12. Sidebar in Firebug

I added:

margin-top: 12px;

to the #sidebar H3 rule. I tried different values; 12px seems about right. Here’s the result:

Sidebar fixed

Figure 13. Sidebar fixed

W00f! W00f! We’re getting it done!

Mouse over

Here’s the menu button effect. Move your mouse over the links below:


When the mouse hovers on a link, three things happen:

  • The background changes from green to white.
  • The text color changes from white to green.
  • The text is underlined.

There’s a high contract between the white and green. Giles thinks the effect is jarring. He wants this:


When the mouse goes over the links, there is only one change:

  • The background changes from green to lighter green.

It’s a less dramatic effect. He thinks it’s more suited to a poetry site.

Here’s the code that matters for this change:

<div id="menu">
  <ul>
    <li id="button1"><a href="#" title="">Home</a></li>
    ...
  </ul>
</div>
...
body {
  background: url(images/back_all.gif) repeat-x;
  ...
  color: #000000;
}
...
#menu a {
  ...
  text-decoration: none;
  color: #ffffff;
  ...
}

#menu a:hover {
  ...
  text-decoration: underline;
  color: #5C722A;
  ...
  background: #ffffff;
}


Figure 14. Old code for mouse effects

The menu items are all <a>s inside the container menu (line 3). Recall that a:hover (lines 21 to 27) sets the style the browser uses when the mouse is over the link. When the mouse is not over the link, the regular a style (lines 14 to 18).

The background of a is set by the body style. The image back_all.gif has green at the top, where the menu appears. So the background of the image is green.

When the mouse is not over the link, there is no underline on the link (line 16), and the text color of a is white (line 17).

When the mouse moves over the link, a:hover is activated. The text is underlined (line 23), and set to green (line 24). The background is changed to white (line 26).

How to get the look Giles wants? We’ll get rid of the underlining change (line 23) and the text color change (line 24). For the background color (line 26), we’ll switch to light green rather than while.

Here’s the new code for a:hover:

#menu a:hover {
  ...
  background: #98B74C;
}

Figure 15. Code changes

W00f!

You can try the current site.

Exercise: Blue Sin fonts

Remember Blue Sin?

Change it to use a serif font for the site name, site slogan, and page name. Also, make the site slogan smaller, indent it a little, and drop it down.

Mine looks like this:

Result

Upload your solution to your server, and enter the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

We changed some text stuff in this lesson. Font size, vertical spacing, and mouse over effects created by a CSS a:hover rule.

What now?

The template is looking good. Any changes to the graphics?

Change graphics

Where are we?

Giles wants a site for nature poetry. Rather than starting from scratch, we found a design we liked. We changed the layout and fonts a little.

This lesson’s goals

In this lesson, you’ll see how to position an image on top of an existing background image.

Graphics changes

Here’s the site so far.

The graphics look fine. Any changes? Let’s check with Giles.

Add my picture

OK.

Here’s what we have:

Template

Figure 1. Template

Let’s try adding Giles’ picture in the lower left of the landscape photo, like this:

The goal

Figure 2. The goal

There are two ways we could do this:

  • Edit the landscape photo with a graphics editor.
  • Make a Giles picture as a separate image, and tell the browser to overlay it on the landscape.

Let’s do the second one. It leaves the landscape image intact.

Making a Giles

First, I need to create an appropriate image of Giles. I’ll start with this:

Original Giles

Figure 3. Original Giles

The image doesn’t have green around it. I just wanted to show you that the image has a white background.

This is what I want:

New improved Giles

Figure 4. New improved Giles

To make the new image, I:

  • With Paint.NET, deleted the background white, turning it transparent. This lets the green show through.
  • With Paint.NET, flipped the image.
  • With Gimp, blurred the edges of the drawing.

I named the new image file dog-head.png.

Renata
Renata

Do we need to know how to do the graphics stuff?

Kieran
Kieran

You should know how to make basic changes to existing images. Some of this is covered in another lesson.

Positioning Giles

We want to put Giles on top of the landscape. First, we need to work out how the landscape is shown. Then we can figure out what to change.

Firebug showed me the HTML that makes the header area:

<div id="header">
  <div id="logo">
    <h1><a href="#">[SITE NAME]</a></h1>
    <h2>[SUBTITLE]</h2>
  </div>
</div>

Figure 5. Header code

Wait. Where’s the <img> tag? You use the <img> tag to show images, right?

Hmm. Let’s check out the CSS:

#header {
  height: 303px;
  text-align: right;
  background: url(images/header.jpg) no-repeat;		
}

Figure 6. CSS for header

Ah ha! There it is in line 4:

background: url(images/header.jpg) no-repeat;

TO make sure, let’s check out header.jpg, in the images directory:

header.jpg

Figure 7. header.jpg

That’s the one. So the design puts the landscape image in header using the CSS background property.

CC
CC

The Giles image file is dog-head.png. The landscape file is header.jpg. Why is one a png and the other a jpg?

Kieran
Kieran

png supports transparency, which we need for Giles. jpg doesn’t support transparency. But that’s OK, because we don’t need it for the landscape.

Read more about that in the image formats lesson.

Having a background makes it easy. We want to put Giles on top of the landscape:

The goal

Figure 2 (again). The goal

We can just drop in an <img> tag for Giles. Because the landscape is in the background, Giles will be on top of it.

OK. I’ll copy the new Giles image (in the file dog-head.png) into the images directory.

I’ll try this and see how it works:

<div id="header">
  <div id="logo">
    <h1><a href="#">[SITE NAME]</a></h1>
    <h2>[SUBTITLE]</h2>
    <img id="giles-head" src="images/dog-head.png" alt="Giles">
  </div>
</div>

Figure 8. New header code

Line 5 is new. Here’s how it looks:

Head showing

Figure 9. Head showing

There’s Giles! Cool!

We need him on the left. How about this:

#giles-head {
  float:left;
}

Figure 10. CSS for the head

Here’s what that looks like:

Head on the left

Figure 11. Head on the left

Not bad! Need to move it a bit, though:

Position head

Figure 12. Position head

Move the image a little to the right, and a little down. CSS margins might work.

How about this?

#giles-head {
  float:left;
  margin-left:8px;
  margin-top:18px;
}

Figure 13. New code

Here’s the result:

The goal

Figure 2 (again). The goal

W00f!

Renata
Renata

In Figure 13, how did you figure out that you needed 8px and 18px?

Kieran
Kieran

Trial and error. I plugged in different numbers until it was right.

Here’s the current site.

Exercise: Blue Sin graphics

Remember Blue Sin?

Add an image to the header, in this position:

Header

You can use this image, or another:

Dog

Upload your solution to your server, and enter the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Summary

  • Giles wanted his picture on the page, on top of the landscape photo.
  • We made a new picture.
  • We looked at the existing code to work out how the landscape photo was being shown: in a CSS background property.
  • We put an <img> tag in the header.
  • We floated it left, and messed with the margins until it was right.

What now?

We’ve finished with the look-and-feel changes to the template.

W00f! W00f!

Now we’ll add some standard content, like the site name, and links to the about and contact pages.

Add standard content

Where are we?

We’ve made all the look-and-feel changes to the template. Time to add some more stuff.

This lesson’s goals

By the end of this lesson, you should what “standard content” means, and how to add it to a template.

Remember the goal

Our goal is to create a template, template.html. When we want to make a new page, we copy the template. For example, when we want to make the home page, we copy template.html to index.html.

We want to make as little work for ourselves as we can. So we should make the template as complete as possible.

Here’s the template so far. You can try it.

Template so far

Figure 1. Template so far

[SITE NAME] will be the same on every page. [SITE NAME] is an example of standard content. It’s the same on every page. The nav bar and the footer are also standard content.

We should add the standard content to the template. Then when we copy the template to make a new page, the standard content is already in place. This will save us time.

Making the changes

We need to ask Giles for some of the standard content. Giles tells us that the site will be called “Natural Reflections,” with a subtitle of “Poetry from Giles.”

Here’s the before and after HTML for that:

Before:
<title>[TITLE]</title>
...
<h1><a href="#">[SITE NAME]</a></h1>
<h2>[SUBTITLE]</h2>


After:
<title>[PAGE TITLE] | Natural Reflections</title>
...
<h1><a href="index.html">Natural Reflections</a></h1>
<h2>Poetry from Giles</h2>

Figure 2. Code changes for site name and subtitle

The <title> tag sets the text in the browser title bar, bookmarks, and search engine results. Each page should have its own title.

Line 4 has a link to index.html. We haven’t made that page yet. That’s OK. Right now, we just need to know what it will be called.

Giles says there will be six poems on the site, and gives us a list of the poems. Links to each one will go into the sidebar. He also gives us some text to put below the poetry list.

Before:
<div id="sidebar">
  <h3>[SIDEBAR HEADING]</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Purus in mollis purus</a></li>
  </ul>
  <h3>Lorem ipsum dolor</h3>
    <p>Vivamus sagittis bibendum erat. Curabitur lorem ipsum dolore
      malesuada. <a href="#">More...</a></p>
</div>


After:
<div id="sidebar">
  <h3>Poems</h3>
  <ul>
    <li><a href="i-saw-in-louisiana-a-live-oak-growing.html">I Saw in Louisiana a Live-Oak Growing</a></li>
    <li><a href="the-lake-isle-of-innisfree.html">The Lake Isle Of Innisfree</a></li>
    <li><a href="the-tiger.html">The Tiger</a></li>
    <li><a href="by-the-arno.html">By the Arno</a></li>
    <li><a href="ladybird-ladybird.html">Ladybird, Ladybird</a></li>
    <li><a href="two-of-a-trade.html">Two of a Trade</a></li>
  </ul>
  <h3>Suggestions?</h3>
    <p>Please <a href="contact.html">contact me</a> if you
    have suggestions for this site.</p>
</div>

Figure 3. Code changes for sidebar

We haven’t made the pages for the poems yet. All we need to know now are the file names, like two-of-a-trade.html. They’ll be the same on every page.

We can also fill in the About and Contact links. On every page, About will link to about.com, and Contact will link to contact.html.

Before:
<div id="menu">
  <ul>
    <li id="button1"><a href="#" title="">Home</a></li>
    <li id="button1"><a href="#" title="">Poerty</a></li>
    <li id="button2"><a href="#" title="">Link</a></li>
    <li id="button4"><a href="#" title="">About</a></li>
    <li id="button5"><a href="#" title="">Contact</a></li>
  </ul>
</div>


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

Figure 4. Code changes for top nav bar

Extra stuff we aren’t using has been removed.

Some footer code has been changed as well.

Before:
<p>
  Copyright © 2011. 
  <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> 
</p>


After:
<p>
  Copyright © 2011. 
  <a href="terms-of-use.html">Terms of Use</a> 
</p>

Figure 5. Code changes for the footer

There is no need for a privacy policy, since Giles isn’t gathering data about anyone. That link was removed.

Here’s the completed template:

Final template

Figure 6. Final template

Almost everything on the page has been standardized. When the template is used, whoever is working on it needs to change:

  • The content in the main content area.
  • The <title> tag.

W00f! The template is all done, ready to use.

Summary

We added content to the template that is going to be the same on every page of the site. The top nav bar, the site name, the sidebar, and other stuff.

What now?

Now someone uses the template to build out the site.

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.

Renata and CC reuse a design

Where are we?

We’ve been through the entire process of reusing a design. Let’s see an example.

CC learns about learning

CC had a chance to interview Prof. Frieda Gufthausen, a well-known learning science researcher. She took a bus to Gray Pocket, New Mexico, where she interviewed Prof. Gufthausen at the Gray Pocket Winter Resort.

CC has just returned from her trip. She meets Renata at a broth bar.

Renata
Renata

How’d it go?

CC
CC

Great! Prof. Gufthausen was very helpful. I interviewed her for half an hour each day, for the three days I was in Gray Pocket.

Renata
Renata

What’s she like?

CC
CC

She’s all practical, but thoughtful as well.

On the bus ride back, I made transcripts of the recordings.

Renata
Renata

Bet you learned a lot.

CC
CC

Did I ever! I want to share it with the world!

Want to help me make a Web site?

Renata
Renata

Uhhh… OK.

CC
CC

We can reuse a design, like Kieran did.

Renata
Renata

That’ll be easier than working from scratch.

CC
CC

Indeed! We should keep it simple. Prof. Gufthausen would prefer that.

Goals

Renata
Renata

How we should organize the site?

CC
CC

Well, maybe just a page for each interview. Use the transcripts. Each interview had a different theme.

Renata
Renata

That makes sense. How about three links on each page, one for each interview. With a sentence of two.

CC
CC

Good idea! Let me sketch it out.

First wireframe

Figure 1. First wireframe

Renata
Renata

Yeah, looks good. You like sidebars on the right?

CC
CC

Yes, I do.

Renata
Renata

You’ll need more pages, though.

CC
CC

Like what?

Renata
Renata

Like a home page, maybe a page about the professor. Contact page. Copyright page.

CC
CC

Oh, you’re right. How about this?

Second wireframe

Figure 2. Second wireframe

Renata
Renata

Yeah, looks good!

What about the feel of it.

CC
CC

Well, not fancy. A bit rough would be OK. She wants people to think about learning science, not her.

Renata
Renata

What sort of collars does she wear?

CC
CC

She’s into natural fibers, hemp, like that.

Renata
Renata

OK.

Finding a design

Renata
Renata

Let’s look at freelayouts.com. They’ve got some good stuff.

Time passes. CC and Renata are looking at designs…

Ah! Some action!

Renata
Renata

How about this one? It’s called Papira.

CC
CC

I like it. Reminds me of Gray Pocket.

Renata
Renata

Let me check the license:

...you can use it in any way you want provided you keep links to the author intact.

That’s OK with me. OK with you?

CC
CC

Yeah, no problem.

Let’s use my laptop. I’ll set up the directories.

Renata
Renata

OK. But once you’ve downloaded the design, let’s check out the source code before we commit to it.

CC
CC

Good idea.

Here’s the work area:

Work area

Figure 3. Work area

We’ll use current for whatever the current version of the site is. I put the original files into papira-original. I put the zip file I downloaded in there, too, to keep it out of the way.

Now I’ll copy the original Papira files into current… Done.

Oh, the HTML file in the original design is called index.html. I’ll change it to template.html.

Renata
Renata

Great! Now what?

CC
CC

I’ll make a NetBeans project. Just of current, so the snapshots we make don’t confuse things.

Renata
Renata

Snapshots?

CC
CC

Remember? We make copies of current once in a while, in case something goes wrong.

Renata
Renata

Oh, yes.

CC
CC

Time to make the project.

New project

Existing sources

Project folder

Name the project

Figure 4. New project

Renata
Renata

Let’s check the design’s code. Make sure we understand it, and see what we don’t like about it.

CC
CC

OK.

Let me open the file in NetBeans.

Here’s template.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="all">
      <div id="container">
        <!-- header -->
        <div id="logo">
          <a href="#"><span class="brown"><strong>Your</strong></span> website name</a>
        </div>
        <div id="menu">
          <ul>
            <li><a href="#">Home</a></li>
            ...
          </ul>
        </div>
        <!--end header -->
        <!-- main -->
        <div id="main">
          <div id="sidebar">
            <h2>Sidebar</h2>
            <p>...</p>
          </div>
          <div id="text">
            <h1>Welcome</h1>
            <p>...</p>
          </div>
        </div>
        <!-- end main -->
        <!-- footer -->
        <div id="footer">
          <div id="left_footer">© Copyright 2008 Your website</div>
          <div id="right_footer">
            <!-- Please do not change or delete this links. Read the license! Thanks. :-) -->
            <a href="http://www.realitysoftware.ca/services/website-development/design/">Website design</a> by <a href="http://www.realitysoftware.ca">Reality Software</a>
          </div>
        </div>
        <!-- end footer -->
      </div>
    </div>
  </body>
</html>

Figure 5. Code for template.html

Renata
Renata

Looks nice. Broken up into sections. header, menu, sidebar

Oh, it uses XHTML, though. I think we should change it to HTML, like Kieran did.

CC
CC

Yes, I agree.

Let me check it out with Firebug, so we know what’s what…

When I ask Firebug to show me what menu is, this is what I see:

menu

Figure 6. menu

Renata
Renata

Makes sense. It’s highlighting the menu in the top window.

What about sidebar?

CC
CC

Let’s take a look… There it is.

sidebar

Figure 7. sidebar

Renata
Renata

Great! The code looks simple enough. If we need to change something, we should be able to find it in the code.

Let’s look at the CSS.

CSS

Figure 8. CSS

CC
CC

The format is different from what we’re used to. All the properties are squooshed onto one line.

Renata
Renata

Yes, I don’t like that. Harder to read.

But I don’t see any properties we haven’t learned about in CoreDogs.

CC
CC

Me neither. So we’ll use this design?

Renata
Renata

Aye!

Change layout

Renata
Renata

Any layout changes?

CC
CC

Well, remember those bits on the right?

Second wireframe

Figure 2 (again). Second wireframe

I’d like each of the three summaries to stand out a bit, maybe with a border or a background color.

Renata
Renata

OK. Can you draw one of them out?

Day block drawing

Figure 9. Day block drawing

Renata
Renata

So there’s maybe a <p> for the smaller text, and another <p> for the link. Having a second <p> will separate the link from the text. Like this:

<p>Blah blah blah</p>
<p>More...</p>

CC
CC

Right. There’ll be an <a> in the link. Oh, and we need to put the link on the right.

Renata
Renata

OK. Let’s give the link paragraph a style, then we can use CSS on it.

<p>Blah blah blah</p>
<p class="day_box_link">
   <a href=??>More...</a>
</p>

CC
CC

Should we do the CSS for day_box_link now?

Renata
Renata

We could, but let’s do the CSS later. Let’s get the classes and containers right first, so we know what we’re styling.

CC
CC

Makes sense.

There’s a heading for the block: Day 1. Make it an <h1>?

<h1>Day 1</h1>
<p>Blah blah blah</p>
<p class="day_box_link">
   <a href=??>More...</a>
</p>

Renata
Renata

OK, but this <h1> is going to look different from the <h1> in the page title.

CC
CC

So let’s give this one its own class, so we can make a CSS rule for it:

<h1 class="day_box_heading">Day 1</h1>
<p>Blah blah blah</p>
<p class="day_box_link">
   <a href=??>More...</a>
</p>

Renata
Renata

All that’s left is the border.

CC
CC

We could add the border to the CSS for the heading.

Renata
Renata

OK… No, wait. That would just put the border around the heading. We want the border around all of it: the heading, the summary, and the link.

Let’s put everything in a container:

<div id="day_box">
   <h1 class="day_box_heading">Day 1</h1>
   <p>Blah blah blah</p>
   <p class="day_box_link">
     <a href=??>More...</a>
   </p>
</div>

Wrap elements in a container when you want to treat them as a group. <div> is the most common container tag.

CC
CC

Good, except you gave the <div> an id.

Renata
Renata

So?

CC
CC

There will be three day boxes. ids are unique in the page. There can only be one element with the id of day_box.

Renata
Renata

So like this:

<div id="day_box1">
   ...
</div>
<div id="day_box2">
   ...
</div>
<div id="day_box3">
   ...
</div>

CC
CC

You could do it like that, but then you’d need to add CSS rules for all three days. Just use a class, like this:

<div class="day_box">
   ...
</div>
<div class="day_box">
   ...
</div>
<div class="day_box">
   ...
</div>

With a class, it doesn’t matter how many times you use day_box.

When you want to use the same format for several elements, give them the same class.

Renata
Renata

(Face-paw) You’re right.

It should be a class.

So, when you fix that…

What’s the final HTML code for the sidebar look like?

<div id="sidebar">
  <div class="day_block">
    <h1 class="day_block_title">Day 1</h1>
    <p>Lorem Lipsum dolor sit amet, consectetuer adipiscing elit. </p>
    <p class="day_block_more">
      <a href="day1.html">More...</a>
    </p>
  </div>
  <div class="day_block">
    <h1 class="day_block_title">Day 2</h1>
    <p>Lorem Lipsum dolor sit amet, consectetuer adipiscing elit. </p>
    <p class="day_block_more">
      <a href="day2.html">More...</a>
    </p>
  </div>
  <div class="day_block">
    <h1 class="day_block_title">Day 3</h1>
    <p>Lorem Lipsum dolor sit amet, consectetuer adipiscing elit. </p>
    <p class="day_block_more">
      <a href="day3.html">More...</a>
    </p>
  </div>
</div>

Figure 10. Sidebar code

Renata
Renata

W00f!

Now for the CSS. Here’s what the day box looks like:

Unstyled day box

Figure 11. Unstyled day box

CC
CC

Push the More link to the right

.day_block_more {
   text-align: right;
}

Make the heading smaller:

.day_block_title {
   font-size: 18px;
}

Let’s see how that looks:

Partly styled day box

Figure 12. Partly styled day box

Renata
Renata

Not bad! Now a border?

CC
CC

Let’s try:

.day_block {
   border: 1px black dotted;
}

Here it is:

Adding a border

Figure 13. Adding a border

Renata
Renata

You’ll need padding:

.day_block {
   border: 1px black dotted;
   padding: 10px;
}

Padding

Figure 14. Padding

Padding adds space between the border and the content.

CC
CC

Better, but why is there so much space at the top and bottom?

Renata
Renata

I don’t know… Could Firebug show us what’s causing the space?

CC
CC

Good idea.

h1 margin

Figure 15. <h1> margin

CC
CC

What’s the big yellow bit?

Renata
Renata

I think it’s the margin. Let’s change the title:

.day_block_title {
   font-size: 18px;
   margin-top: 0;
}

No top margin for h1

Figure 16. No top margin for <h1>

CC
CC

Cool! Now let’s kill the bottom margin from the More link.

.day_block_more {
   text-align: right;
   margin-bottom: 0;
}

No bottom margin for More...

Figure 17. No bottom margin for More…

Renata
Renata

W00f!

CC
CC

We’ll need a bottom margin on the box as well:

.day_block {
   border: 1px black dotted;
   padding: 10px;
   margin-bottom: 20px;
}

Bottom margin for the box

Figure 18. Bottom margin for the box

CC
CC

I’d like to try a background color for the box.

Renata
Renata

OK, but what color?

CC
CC

Hmmm… We could try ColorZilla, that add-on Kieran asked us to install. There’s its icon at the bottom of the browser window:

ColorZilla icon

Figure 19. ColorZilla icon

I’ll click the little down arrow.

Renata
Renata

What’s that “color analyzer” thing?

CC
CC

Don’t know. Let’s try it.

Color analysis

Figure 20. Color analysis

Renata
Renata

Hey! I think that’s all the colors on the page!

CC
CC

You’re right. Let’s put the light color in the CSS, and see what it looks like.

.day_block {
   border: 1px black dotted;
   padding: 10px;
   margin-bottom: 20px;
   background-color: #ECF1EF;
}

Renata
Renata

I like it!

CC
CC

Me, too. Let’s keep it.

You can see how the site looks so far.

Adding a photo

Renata
Renata

You know, it looks a little too impersonal.

CC
CC

What do you mean?

Renata
Renata

Well, this is all about Professor Gufthausen and her ideas. Maybe there should be a photo of her on each page.

CC
CC

Good idea! I took a few photos when I was in Gray Pocket.

Let me work on one. Here’s what I’ll start with:

Source image

Figure 21. Source image

Renata
Renata

Er, what is that?

CC
CC

They were ad-libbing Restoration comedy one night.

Renata
Renata

Huh?

CC
CC

Yeah, it was weird.

Anyway, I’ll use Gimp and cut the head out of the photo… resize it a bit… what do you think?

Cutout head

Figure 22. Cutout head

Renata
Renata

Now that’s what I’m w00fing about, dog!

CC
CC

Let’s put it above the day boxes.

Renata
Renata

OK.

That should look good.

Let me take a stab at it.

<div id="logo">
  <a href="#">
    <span class="brown"><strong>Learning</strong></span> Learning
  </a>
  <img id="prof-head" src="images/prof-head-small.png" alt="Prof. Gufthausen">
</div>
...
#prof-head { 
  float:right;
}

Figure 23. Head photo code

Head photo

Figure 24. Head photo

CC
CC

Hey, good job!

Renata
Renata

Yes, but I want to move the image to the left a little.

How to do that? Hmmm.

Maybe I should put a margin on the right:

#prof-head { 
  float:right;
  margin-right:40px;
}

Figure 25. Head photo code, fixed

Head photo, fixed

Figure 26. Head photo, fixed

CC
CC

Great!

Let me fix some other stuff. Put in the site name… Delete some filler text… There!

Renata
Renata

Looking good! That’s the final template!

You can see how the final template looks so far.

Building out the site

CC
CC

It’s up to me, now. I’ll copy the template a bunch of times, to make the final site… Add in the interview transcripts…

Time passes

Time passes

CC
CC

There! All done. Check it out!

Renata
Renata

W00f! It’s great!

How did you do the hanging indents?

Hanging indent

Figure 27. Hanging indent

I don’t remember seeing that in CoreDogs.

CC
CC

It isn’t there. I Googled “CSS hanging indent” and found this article that explained how to do it. I just copied the code from the article.

Summary

CC and Renata wanted to make a site. They:

  • Drew some wireframes to plan page layout.
  • Found a design.
  • Checked its license.
  • Set up some working directories.
  • Checked that they understood the design’s code.
  • Changed the layout.
  • Picked a color for the day boxes.
  • Added a photo of Professor Gufthausen to the template.
  • Built out the complete site from the template.

What now?

Exercises!

Exercises: Reuse a design

Exercise: Genesis

Download the design Genesis. Make the following changes:

HTML

Make the design HTML, instead of XHTML.

Ticks

There are some ticks in the top nav bar:

Ticks

Figure 1. Ticks

Dogs don’t like ticks. Remove them. Hint: use Firebug to work out what is making the ticks.

Bottom stuff

Remove the large menu at the bottom of the page.

Make the text in the footer easier to read.

Sidebar

Get rid of the Navigate, Search, and Sponsors areas.

Give About a generic title, like Title.

Header

Replace the solid green background with an image or a tile. We talked about background tiles ealier.

I used an image from GRSites.

Extra content

Remove the extra content in the main area. Remove extra links in the nav bar.

Put in template markers, like [SITE NAME].

When you’re done…

Upload your solution to your server. Enter the URL below.

You can see my solution.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Exercise: BusinessBlog

Download the design BusinessBlog. Make the following changes:

HTML

Make the design HTML, instead of XHTML.

Top nav bar

Get rid of the top nav bar, the one that has “Home About” etc.

Sidebar

Float the sidebar to the right instead of the left.

Remove the “Menu Navigation” section. Replace “Resources” with a generic title. Remove all but two of the links. Add some generic text below the links.

Remove content

Remove the extra content in the main area. Remove extra links in the top nav bar.

Add markers

Add markers for [SITE NAME], etc.

Final fixes

Make sure that [SITE NAME] lines up vertically with [PAGE TITLE]. Indent the [SITE SLOGAN] a little.

When you’re done…

Upload your solution to your server. Enter the URL below.

You can see my solution.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?