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!


How to...

Lessons

User login

Log in problems? Try here


Dogs