Resource pages are a useful feature of classroom websites. They give students, parents, and colleagues a handy guide to the sites that you like to recommend, support for homework, and a chance to share discoveries. If you give extra credit for completing online games or quizzes, this is a handy way to group them. And of course it’s a great place to list your PowerPoints or other classroom resources.
We’re teachers, not web designers, but that doesn’t mean we can’t have good looking web resource pages. I made a random tour of classroom websites and found plenty of good examples:
Here’s a site that has created a table of resources with some fun graphics and consistent use of colors and space to organize the links.
This example uses a traditional list. It’s neat, well organized, and has a good balance of text and decoration.
Let’s look at some less successful examples, too:
This one would be a lot more appealing if the edges were lined up. I wouldn’t use the green boxes, but even if you like those boxes, I bet you’ll agree that making their edges even and then adding a bit of margin on the left of the links would improve the page.
This one has more than will fit on the screen going across the top and nothing on the rest of the page. The colors might also be improved — the red on blue isn’t very readable. Again, I don’t get the idea of using boxes. The “Star Sites” example uses boxes effectively, but the two above don’t really need them.
You can’t tell from the screen shot that this site has lots of blinking things, but it does. Whether it blinks or not, the items in the list run together a bit. The lines of text are also too long — too long for the screen, and also too long for comfortable reading on a computer screen. The background design makes the text less readable, too. If this site had a white container for the text and used a traditional bulleted list, it would be more comfortable for the reader.
These are issues with layout and color. After fixing layout and color issues, there are things we might want to consider that are more specific to a list.
This example has a traditional list with a clear layout. However, this site gives the URL instead of the title of the page. It’s more readable and more useful to give the page title.
This example has a clear layout and helpful information about the pages listed. However, underlining everything makes the page less readable, and could make people feel confused, since underlining on a web page normally indicates a link.
If you use a content management system, you probably can automatically make links with good spacing and margins. If you use HTML to make your website, here’s what you need:
<h2> Grammar</h2>
<ul>
<li><a href="http://www.chompchomp.com/" title="grammar games">Grammar Bytes</a></li>
<li><a href="http://www.english-online.org.uk/games/gamezone2.htm">Grammar of Doom</a> (designed for ESL and EFL learners)</li>
</ul>
Let’s look at the parts of that piece of code:
<ul>
This means, “Hey, computer, let’s make a list here!”
<li>
This means, “Computer, this is an item in a list.” Put the item in and then finish it up with
</li>
That means, “That’s the end of the item.”
</ul>
This means, “I’m finished with my list now.”
<a href=”URL”>
That’s how to make a hyperlink. Just put the web address you want to send people to where it says URL. Then put the words you want people to click on.
</a>
That means, “Okay, I’m through with my link.”
Now, if you want to say something about the colors and underlining for those links, as I did, you put this stuff into your CSS:
a:link {
color:#699; text-decoration:underline;}
a:hover {
color:#999a8c;
text-decoration:none;}
a:visited {
color:#966; text-decoration:none}
Look at yesterday’s post on website colors to find out about those numbers, as well as a little more about HTML.
Next step: embed some resources.
