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.
How’d it go?
Great! Prof. Gufthausen was very helpful. I interviewed her for half an hour each day, for the three days I was in Gray Pocket.
What’s she like?
She’s all practical, but thoughtful as well.
On the bus ride back, I made transcripts of the recordings.
Bet you learned a lot.
Did I ever! I want to share it with the world!
Want to help me make a Web site?
Uhhh… OK.
We can reuse a design, like Kieran did.
That’ll be easier than working from scratch.
Indeed! We should keep it simple. Prof. Gufthausen would prefer that.
Goals
How we should organize the site?
Well, maybe just a page for each interview. Use the transcripts. Each interview had a different theme.
That makes sense. How about three links on each page, one for each interview. With a sentence of two.
Good idea! Let me sketch it out.
Figure 1. First wireframe
Yeah, looks good. You like sidebars on the right?
Yes, I do.
You’ll need more pages, though.
Like what?
Like a home page, maybe a page about the professor. Contact page. Copyright page.
Oh, you’re right. How about this?
Figure 2. Second wireframe
Yeah, looks good!
What about the feel of it.
Well, not fancy. A bit rough would be OK. She wants people to think about learning science, not her.
What sort of collars does she wear?
She’s into natural fibers, hemp, like that.
OK.
Finding a design
Let’s look at freelayouts.com. They’ve got some good stuff.
Time passes. CC and Renata are looking at designs…
Ah! Some action!
How about this one? It’s called Papira.
I like it. Reminds me of Gray Pocket.
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?
Yeah, no problem.
Let’s use my laptop. I’ll set up the directories.
OK. But once you’ve downloaded the design, let’s check out the source code before we commit to it.
Good idea.
Here’s the 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.
Great! Now what?
I’ll make a NetBeans project. Just of current, so the snapshots we make don’t confuse things.
Snapshots?
Remember? We make copies of current once in a while, in case something goes wrong.
Oh, yes.
Time to make the project.
Figure 4. New project
Let’s check the design’s code. Make sure we understand it, and see what we don’t like about it.
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/website-design.html">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
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.
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:
Figure 6. menu
Makes sense. It’s highlighting the menu in the top window.
What about sidebar?
Let’s take a look… There it is.
Figure 7. sidebar
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.
Figure 8. CSS
The format is different from what we’re used to. All the properties are squooshed onto one line.
Yes, I don’t like that. Harder to read.
But I don’t see any properties we haven’t learned about in CoreDogs.
Me neither. So we’ll use this design?
Aye!
Change layout
Any layout changes?
Well, remember those bits on the right?
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.
OK. Can you draw one of them out?
Figure 9. Day block drawing
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>
Right. There’ll be an <a> in the link. Oh, and we need to put the link on the right.
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>
Should we do the CSS for day_box_link now?
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.
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>
OK, but this <h1> is going to look different from the <h1> in the page title.
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>
All that’s left is the border.
We could add the border to the CSS for the heading.
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.
Good, except you gave the <div> an id.
So?
There will be three day boxes. ids are unique in the page. There can only be one element with the id of day_box.
So like this:
<div id="day_box1">
...
</div>
<div id="day_box2">
...
</div>
<div id="day_box3">
...
</div>
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.
(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
W00f!
Now for the CSS. Here’s what the day box looks like:
Figure 11. Unstyled day box
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:
Figure 12. Partly styled day box
Not bad! Now a border?
Let’s try:
.day_block {
border: 1px black dotted;
}
Here it is:
Figure 13. Adding a border
You’ll need padding:
.day_block {
border: 1px black dotted;
padding: 10px;
}
Figure 14. Padding
Padding adds space between the border and the content.
Better, but why is there so much space at the top and bottom?
I don’t know… Could Firebug show us what’s causing the space?
Good idea.
Figure 15. <h1> margin
What’s the big yellow bit?
I think it’s the margin. Let’s change the title:
.day_block_title {
font-size: 18px;
margin-top: 0;
}
Figure 16. No top margin for <h1>
Cool! Now let’s kill the bottom margin from the More link.
.day_block_more {
text-align: right;
margin-bottom: 0;
}
Figure 17. No bottom margin for More…
W00f!
We’ll need a bottom margin on the box as well:
.day_block {
border: 1px black dotted;
padding: 10px;
margin-bottom: 20px;
}
Figure 18. Bottom margin for the box
I’d like to try a background color for the box.
OK, but what color?
Hmmm… We could try ColorZilla, that add-on Kieran asked us to install. There’s its icon at the bottom of the browser window:
Figure 19. ColorZilla icon
I’ll click the little down arrow.
What’s that “color analyzer” thing?
Don’t know. Let’s try it.
Figure 20. Color analysis
Hey! I think that’s all the colors on the page!
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;
}
I like it!
Me, too. Let’s keep it.
You can see how the site looks so far.
Adding a photo
You know, it looks a little too impersonal.
What do you mean?
Well, this is all about Professor Gufthausen and her ideas. Maybe there should be a photo of her on each page.
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:
Figure 21. Source image
Er, what is that?
They were ad-libbing Restoration comedy one night.
Huh?
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?
Figure 22. Cutout head
Now that’s what I’m w00fing about, dog!
Let’s put it above the day boxes.
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
Figure 24. Head photo
Hey, good job!
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
Figure 26. Head photo, fixed
Great!
Let me fix some other stuff. Put in the site name… Delete some filler text… There!
Looking good! That’s the final template!
You can see how the final template looks so far.
Building out the site
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
There! All done. Check it out!
W00f! It’s great!
How did you do the hanging indents?
Figure 27. Hanging indent
I don’t remember seeing that in CoreDogs.
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!
