Creative Ideas for a Lesson on Web Page Design

Page content

Creating Web Pages

There are many ways to make a web page or even a whole website, and each method has its good and bad aspects. For the moderately tech savvy, Dreamweaver and similar programs can help you design a professional-looking website, giving you total control over the design process. These programs aren’t easy to use, though, and take a lot of time to master and teach. On the other side of the spectrum there are the free website-building engines, like and Wordpress, which are very simple to use but are also very limited and give you little control over the design.

When teaching students the fundamentals of webpage design, then, a good middle ground can be found with Microsoft Word. Making a webpage or even a whole website in Word is fairly easy. It won’t look too professional, but you do have a good deal of control over the design process. Plus, most students are already familiar with Word, so the learning curve isn’t steep. This web page design lesson plan is a good starting point for helping students become participants, not just consumers, of the Internet.

Starting at Home

You’ll want to focus first on designing a homepage. Students can add more pages to their sites later, but it’s good for them to learn now that the homepage sets the tone and organization for an entire website. So have them come up with a concept for a website or provide them with one that lends itself to a well-designed homepage. Good choices include a personal “about me” website, a website devoted to a favorite activity or hobby, or a website about your school or community. Each student should create his or her own web page—working in a group only complicates the process and leads to frustration.

The Elements of Design

Web page design is a vast, complex topic that is best covered over a whole semester or more. The basics, however, can be easily taught to junior high or even older elementary school students. These design concepts are most important to cover before letting students loose on their first web pages:

  • Less is more—Don’t crowd in too much information too close together. Web pages need plenty of “white space,” or empty space, so the eye doesn’t become overwhelmed.
  • Make a hierarchy—Place links and the most important information where they are prominent and easy to find. Links are best placed at the top of the page or on the left, since that’s where people expect them to be. Just like when you’re writing a news article, you’ll want the most crucial information to go closest to the top of the web page.
  • Avoid text blocks—When people use the Internet, they like to scan pages rather than read them. Long paragraphs and pages that are full of text are intimidating and often skipped over. “Less is more” applies here too, since you’ll want to rid your web page of any unnecessary words and information.
  • Scrolling is annoying—People don’t like to have to scroll down a lot, especially on a homepage. Aim to make the most important information visible without any scrolling at all, and to create web pages that don’t require you to scroll down more than a computer screen-length or so.
  • Use color, but not too much—Color makes a web page look interesting, but too much color is chaotic. Using just a couple of colors throughout a single web page is best (and for a website, make sure the color schemes on each page match up). If you have a picture on your web page, consider using colors similar to (or complementary to) the ones in the picture to create a more professional look.

Creating the Page

After explaining the basics of web page design, and before you let them start making their web page, have the students sketch out a plan for their homepage. It doesn’t have to be elaborate, but a quick pencil-and-paper draft lets them get their ideas together and start to think about the hierarchy of information.

Once they have a rough plan on paper, have them open a blank document in Word. Tell them to navigate to “View” and choose “Web Layout,” since this will show them what the document will look like once it’s uploaded to the web.

The last thing you’ll want to do before letting them work (and be sure to give them plenty of time for that) is remind the students of the many options they have at their disposal. Anything they can add to a Word document, they can include on their web page, such as:

  • Text
  • Pictures, clip art
  • Tables (a good way to organize links and other information)
  • Word Art, colored text, etc.
  • Columns
  • Bullets, numbered lists
  • Background page color, web page borders

Saving the Page

Once the students are happy with their homepages, they’ll need to save them in the right format. Have them save each page as a Word document first, in case they want to make changes later on. Then have them choose “Save as” and go to the “Save As Type” field, and scroll down until they find “Web Page.” Select this format and click save, and the page is automatically converted to HTML and is ready to be uploaded to the Internet. Also keep in mind:

  • When saving a homepage, the file name should be “index”. This is standard procedure and very important for the page to work correctly.
  • If they want to, students can click on the “Change Title” button to give their page a short title. This is the text that appears on the tab in a web browser.

If you want the students’ web pages to actually appear on the Internet (which is recommended so they can see how they actually look), you’ll need to find a way to upload them—such as through your school’s server.

Once the homepage is saved, you can move on to other pages if you want the students to build an entire website. This requires creating links from page to page. Every subsequent page should be linked to from the homepage at the very least, and should include a link back to home. It’s a good idea to include a link bar (using a table) that is exactly the same on every page. In any case, here is how to create a hyperlink in Microsoft Word:

  • First, you must have created and saved the page you want to link to (unless you’re linking to an outside, existing web page).
  • Highlight the text you want to convert to a hyperlink, right click on it (on a PC), and choose “Hyperlink.”
  • To link to a file saved on your computer, navigate to that file and click on it, then choose “OK.”
  • To link to an existing web page, type the URL into the “Address” text box and choose “OK.”
  • Your text will be automatically converted into a web-enabled hyperlink.
  • Note: If you move or rename a file after linking to it, you may have to redo the link

A note on saving non-homepage web pages: The best filenames are short but descriptive, lowercase, and have no spaces. This makes the URL easier to type and remember (i.e. “mybio” or “foodsilike” or “libraries”).

And You Have a Web Page!

Be sure to congratulate your students on their accomplishment. The Internet is a vital part of our culture, and it’s important to know how to use and add to it. Although these first web pages are simple, they are real. This web page design lesson plan gives students the tools they need to start experimenting with design concepts and figure out the best ways to relay information online, as well as to better understand the websites they frequent at school and at home.