Most of the classroom and faculty webpages we saw as we randomly wandered school websites really didn’t have any layout at all. With some excellent exceptions, faculty pages tend to have a box or two randomly placed on the page:
In these examples, the school provides a frame that keeps the pages from being completely without structure. In the example below, there wasn’t that head start:
Instead, decide what you want to put on your page, and then put it into some boxes that make visual sense on your page. The layout below on the left is a very standard one, and it’s used in the school sites above. If you don’t have a school layout already, you can use it for your own page. The one on the right is an alternative, but it will also fit into the main content box of a school site layout:
You can see that my faculty homepage uses a combination of these two layouts. We don’t have a whole-school layout as the top two pages do, so I have my own sidebar. I’ve put some pictures from my class into three boxes at the bottom of the page on the right.
Since schools use such a variety of content management systems and web editors, we don’t think it will be useful for us to try to give you instructions on how to make the boxes to put things in. You should have covered it in your training and you should have documents to help with it. If not, then we think you should just ask your IT department to make the boxes you want, and send them a diagram showing exactly what you want, like those above. Ask them to put lorem ipsum into the places where you can put your stuff, and then you can just type where you want to type.
Now make yourself a header.
- Determine how big a space you have for your header. You want it to fit exactly. If you have a site like the ones at the top of this post, you can ask your IT guys, “How many pixels wide is the main content box?”
- Make a new image with your graphics program and choose the correct pixel size if you can do that with your program. If not, you can fix it when you put the image into your page.
- Choose a picture and make it the right height to fit into your header box. Don’t choose the width — you don’t want a narrow slice of your picture. Make it match the height and it’ll fit nicely into the header and leave you space for your text.
- Add text, such as “Welcome to AP Psychology!” or “Mrs. Donner’s 6th Grade Class.”
- Save your image as a .jpg or .png file.
Here’s how to make a really simple header in Photoshop without any special skills:
Put your header into the top spot of your layout, and then add photos to the boxes you made for photos (such as the three boxes at the bottom of the right hand layout above). Since you know how many pixels wide your main content area is, you can just divide it by three to know how big your pictures should be. You can also make your header the correct width now.
Then type your words into the areas left for content. We’ll talk more about making the words look good later in the series. For right now, you have a layout for your site and it will already look much better.
Next, fix your colors!
