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.)

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.)

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.)

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.)

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.)

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.


How to...

Lessons

User login

Log in problems? Try here


Dogs