Developing Educational Materials for the World Wide Web

Week 5 - Designing a Web Document

Now that you have had a look at HTML and practiced creating tables, you can try your skills in a web author. I would recommend using Dreamweaver or Front Page, or if you do not have one of these, try one of the limited edition programs such as Front Page Express, or a 30-day trial demo of Dreamweaver. Most web authors contain the same features, but some handle certain elements better than others. You may have to search out the features you want to use and experiment! It's part of the fun.

The first thing you will have to do is decide the purpose of your page, and which elements you want to appear on your page. Will your page be informational, instructional, for entertainment purposes, or do you want to be able to communicate? Who is your audience -- students, other teachers, parents, or your family? Do you want an attractive, artistic page, or is content more important than presentation?

There are a number of different elements that appear in most all pages, including the following:

• A headline or banner,
• text content,
• graphics content,
• links to other pages,
• design elements such as color bars and white space,
• and navigation.

Decisions you will have to make about these are:

• Font styles, colors, and sizes,
• Whether your page is complex enough to need a table (for example, if you want text alongside a graphic, or if you want color bars or navigation bars),
• Your graphic source--will you use a scanned photo, a photo you took from a digital camera, or borrowed from a web site (make sure it is not copyrighted! although requests to use graphics are usually granted)
• What format and size of graphics you will use. Browsers recognize *.gif and *.jpg graphics. Graphics larger than 50 kb. may take too long to download on slow machines.
• How many pages your site will have. You will need to name these pages in advance so you can link to them as you create your site. You can create a basic page "template" and use it for your entire site.
• The "look" and theme of your pages. Most sites benefit from a theme or template that continues throughout all pages so the reader can recognize where they are
• What kind and where navigation elements will appear. Do you want a simple line of links across the top, a one-column table down the side or across the bottom, a drop menu (these are easy to make in Dreamweaver), or are you ready for a mouseover? You can make these in Adobe Image Ready or Macromedia Fireworks.

You may want to look up the following site for more ideas on how to build your web site:

Web Site Building Basics: Questions to ask http://hotwired.lycos.com/webmonkey/html/97/05/index2a.html?tw=design

Here is the title heading I made for our project page at OHS, including colored bars in a table plus a title graphic:

					The projects on this page were created by students at Ontario High School in Ontario, Oregon
	Click on a thumbnail to see a picture.

Once you have made these decisions, you are ready to begin! You will need to create your web folder.

For Dreamweaver, create your folder wherever you want. When you open up Dreamweaver for the first time, go to Site/New Site, give your site a name, and browse until you find your folder. Everything you use on your site must be in this folder, including graphics and pages. Go to this site every time you want to edit it.

• Dreamweaver has three palettes that handle text, links, colors & tables, (the Properties palette,) common objects that are inserted in a page such as graphics, lines, and frames email addresses, (the Objects palette,) and the Launcher palette which you will probably not use for awhile.
• If you want to preview in a browser, go to File/Preview in browser. It will display the file you are working on as a temporary file.
• If you want to be able to use the Refresh button on the browser, then save your file in "Save As" each time so it won't go to the temporary file, and make sure your page's path in the browser is not the temporary file.
• Text color and cell background color can be changed in the little boxes with arrows on the bottom. The text color box is between the Size and B box, and the cell color box says BG when you click on the cell you want to color.
• The Dreamweaver default extension is *.htm, not *.html as in many other programs.

If you are working in Front Page, it will save your folder under My Documents unless you tell it otherwise. Front Page has the simple interface of most Microsoft products. It handles tables extremely well. One nice thing about it is that it has tabs at the bottom of the page that allow you to see HTML source or Preview in a browser. One drawback is that it tends to make cluttered HTML which not all servers can handle.

Both Dreamweaver and Front Page page properties can be changed by right-clicking on the page. You will get a dialog box asking for the name of the page (the one that appears in the web browser), background image (if you want one), and text colors for links, etc.

Assignment/Activity: Experiment with your web author by creating a site that includes the following elements:

1. A Heading or title. You can create one as a gif file and insert it into the top of your page or simply use the Heading format in your web author.
2. Text content.
3. Graphic images.
4. Links, and
5. Navigation, if you have more than one page.

I know you will have many questions, so write them down and ask me, or call! The best way to learn is to experiment. For example,

• When inserting a graphic in a table, you can resize the graphic, and then you have to move the lines of the table where you want them. It can be tricky!
• When making a link to an outside page, type in the entire URL including http://www. Better yet, find the site, copy the URL, and paste it into the link box.
• When linking to one of your own pages in your own folder, you only have to use the title of the page itself, such as mypage.htm rather than http://www.mysite.com/mypage.htm
• Save your work often. Pretty soon you will be good at it!

Try a couple of tutorials. I've found the Webmonkey tutorials to be easy to follow and fairly comprehensive. The Front Page tutorial is a download from the Microsoft site and must be installed.

Dreamweaver Walk Throughhttp://hotwired.lycos.com/webmonkey/98/27/index1a.html
Front Page Tutorial Download http://officeupdate.microsoft.com/2000/downloadDetails/FPTutor.htm
Organizing Your Site http://hotwired.lycos.com/webmonkey/99/39/index3a.html?tw=design

Email your page to me. Don't worry if it's not professional looking. This can become habit forming, and you may never think you are finished!

Developing Educational Materials for the World Wide Web

EOU Malheur County Center (541) 889-7468 or (541) 889-6222

kenningtons@fmtc.com

Return to Top