1. The assignment
2. Web design guidelines--general information
3. Using Dreamweaver step by step
4. Test on web design guidelines
5. A template students can use for this assignment
6. A gallery of student created web sites


1. Your Group Web Site Assignment for Education 122

Working in teams of 5-6, students will investigate how adults and children think about the learning potential of one commonly accessible material artifact (or set of artifacts). To complete this assignment, you will need to talk with or interview adults and children about the material(s) you are investigating. Based on your observations and interviews, you will prepare an oral report and a web site that includes the following:

-A profile of the material artifact you have chosen, its history, variation, distribution, etc.

-Vivid examples of the material artifact in use

-A synthesis of adult ideas about the educational value of the artifact

-A synthesis of children's ideas about the educational value of the artifact

-An assessment of whether the child and adult perspectives you've investigated are consistent or inconsistent with specific course readings

-Your own assessment of the pedagogic potential of this artifact

You will work on this assignment for about six weeks.  Your team will make an oral progress report on January 28th and complete your team web site by February 21.  In both the oral reports and the web site you are encouraged to use photographs and audio or video recordings as well as text.  To facilitate your team's work on this project you will be given a web site template.  You can build your team web site by filling in the fields on the template or you can create your own  design from scratch. Your complete web site should also describe your data sources and provide a list of "credits" for the work of individual team members.

After your web site is completed, you will write a brief (300-500) word report that describes your contributions to the project and summarizes what you learned from these efforts.

[back to top]


2. Web design guidelines -- General information EDU 122-Winter 2006

As you collect information and materials for your exhibit, you need to organize them in a form that can support your web site.  Here are a few rules you should keep in mind:

Text, Images, Pages, Links and Site

These are the main building blocks of a web site.  You can do a variety of fancy things if you want and have the inclination.  However, all you need to do for this assignment is to prepare some text and images on pages and make some links between the pages.  The set of all the materials you've prepared and linked together will be your "site" and you will "define" your site as the name of the main folder in which all your materials and subfolders are kept.

Organizing Your Site

IMPORTANT: The only way your browser (Internet Explorer, Safari, Netscape, Mozilla, etc.) can follow the links you've made is if you keep your files in the same relative relationship to each other.  That is, as you put together your "site," it takes on an organizational structure, whether you want it to or not.  If you then change that structure (for example, by splitting your images into two image folders instead of keeping them in one), your browser will get lost. 

To make sure this doesn't happen, you'll need to put all the files for your website (html documents, images, video clips, etc.) in a single folder and give it the name of your group:  "BarbieSite" or "TeenSite" or "GameSite."  In Dreamweaver, this folder needs to be "defined" as your web site, and we'll show you how to do that.

To keep your images organized (you will probably have quite a few when you are finished), create a folder called "Images" inside this main "site" folder.  If you keep all your images within the "Image" folder and all your other files in the main "site' folder, you should do fine. 

In building your site, you may end up with quite a few files and images, some of them drafts from earlier work, and some of them that you do not use in your final site. This is OK to keep them within your folder, but watch out: similarly named files can become confusing when you are finishing up the links to your site. To avoid this kind of confusion, clean up your site by removing old files and images you aren't going to use.

Pages and Files

A web site includes a set of linked files.  All "pages" within a web site are individual files.  A page can contain text, images, tables, and so on, and it can be linked to audio or video files.  A page can be as long or as short as you want it to be.  However, most people take long pages and break them up into shorter pages connected by links.  A page can have links on it to other pages and links from one part of the page to another. 

Start with the Home Page

The home page will be the first page that people see when they open up your web exhibit.  You should set up this page so that people know what they've found and can find other pages in your exhibit.  You can probably find some good examples in the home pages from other web sites that you use.  The home page does not have to be complicated.  Some of the best home pages are quite simple.  Clear, informative, and useful are the watchwords.   But the home page MUST be named: 

default.html   or    index.html

If you use another name, the links you are making to and from your home page will not work.   When you direct your browser to a web address, the browser will look inside that address/folder for a file called "default.html" or "index.html."  If it finds a file with that name, it will automatically open it.  If it does not, it will just display a list of files in the folder and someone visiting the site will have to open those manually.

Other Pages

For this assignment, you will probably want to prepare separate pages for different parts of the assignment (Kids, Adults, Materials, for example) and link these to your home page. This will help other students navigate your site.  You can also include links to other subheadings if these correspond well to the information you were able to collect.

You can start by listing the other pages you have in mind by title on your home page, and then turn those titles into links that will open the other files in your exhibit.  You can also include a "home" link on the other files/pages so people can get back quickly to your home page. 

Naming Files

You can name html files for your web site in the same way that you name files that you keep on your hard drive.  HOWEVER, browsers are more finicky about reading file names than you are, and they don't do well with "spaces."  To avoid confusing your browser, don't use spaces in the name of any file that you include in your web site.  You can use the "underscore" like this _ to create a space that your browser can read.  So, for example, if you have a file called "Barbie kids" this might hang up your browser.  However, if you replace the space with an underscore it will work fine (e.g.  "Barbie_kids").

Preparing Text

In preparing text for your home page or other pages, you can use a regular word processing program, such as MS Word (v. 97 or higher).  If you are using MS Word, you can prepare the text just as you would for printing on paper, then use the "save as" command from the file menu to save your file in "html" format.  "HTML" - hypertext-markup-language - is a format that is read easily by web browsers such as Netscape, Internet Explorer, Safari, Mozilla, Firefox, etc.

In creating web pages you can copy and paste from other texts and programs, but you can also enter text using a specialized "web authoring" software program.  Mozilla Composer provides an editor for putting together web pages, as do programs such as Dreamweaver, Home Page, Page Mill, etc.  Some students in your group may be familiar enough with html to design pages using html commands directly, but we'll provide enough orientation to Dreamweaver for everyone to set up a site for this course.

Preparing Images

In preparing images - photographs, drawings, etc. - save them in a format called JPEG at low to medium quality.  You can get images from a digital camera, from the web, and by scanning photographic prints and slides.  You can scan both flat work and slides in the Meyer instructional materials lab and, I believe, in the Hart Hall lab as well.  The lab assistants can help you get set up, but you might want to call ahead to make sure the equipment is available when you come by.

If you are scanning pictures on a flatbed scanner and you want them displayed on your web site at the same size they are on paper, you can scan at 72 dpi.  That will create an image file with 72 dots per inch, the same number of dots per inch that are on most computer screens.  If you are scanning really small images, slides or negatives, and you want them to look larger than that on your web site, then you should scan at a somewhat higher resolution - 150 or 300 or even higher.  Computer monitors are not going to display images at greater than 90 ppi (pixels per inch), so having a large image scanned at more than that is not going to improve the "quality" of what you see (and high resolution scans will increase the length of time it takes for the image to appear on your screen when you click that link!)

You can insert images in your text through a word-processing program.  However, to make sure that the images stay with your text when you save your text as html, you'll need to include a copy of the image file in the same folder that that you use in saving the page as an html file.  If you are using a web-authoring program like Dreamweaver to design your web pages, you create a page, then set a link from the page to the image.  To make sure the image can be found, keep the image in the same folder you used when you set the link from the page.

Making Links

The easiest way to make links between your pages is to use a web-authoring program such as Page Mill, Home Page, Dreamweaver, or the Mozilla Composer.  Once you are viewing your page in one of these programs, you highlight/select a chunk of text (or image) that you want to LINK FROM.  Select the "link" command, and you will get a dialog box in which you can identify the file you want to LINK TO.  You can set links from one page to another, even from one web site to another.  You can also set links from one part of a page to another part -- these are frequently called "anchors"

Check Your Links

Before you try to upload your exhibit to the web you should check all your links. Once your web materials are saved as html files, you should be able to open your home page - e.g. "default.html" - with a web browser such as Microsoft Explorer, Safari, Firefox and then click your way via links to all the other pages in your exhibit. If your images are not loading properly, go back to your files and make sure they are saved with underscored names, and are in the proper folders


Do these few things, and everything should go fine.

31 Jan 2006

[back to top]


3. Using Dreamwever, step by step, to design a web site


1) One of the first things you'll want to do after you open an "HTML PAGE" is to give it a FILE NAME. The file name for your HOME PAGE should be "default.html" or "index.html" File names for other pages can be whatever you want them to be, but it helps if they are short and somewhat descriptive, and it's important that they do NOT include spaces or non-standard characters. Good examples might be "interviewKID_Mary", "interviewADULT_Lee", history_part1", etc.

2) It's also a good idea to give your page a "title". The "title" is not the same as a file name. You give your page a FILE NAME by using the "SAVE AS" command under the FILE pull down menu. You give your page a TITLE by entering text in the little box called "title" that's in the status line of the file you are working on (just above this text).

3) After you have named your file and given it a title, you can set the PAGE PROPERTIES by selecting that command under the MODIFY pull down menu. PAGE PROPERTIES are style settings that will be applied by default to everything on your page -- rather than to just one section of the page or another. They include things like background color, the color of the text you'd like for headings, links, font and type size, etc. You can override some page properties as you edit your page, but not all of them. NOTE: You can always change these after you've created a page, so you don't need to figure this out ahead of time

4) You can insert text into your html page in several ways: You can type it in, or you can copy and paste from another document. If you cut and paste from another document, it's best to save that document first as "text only." When you type text in Dreamweaver, it will appear in the font/size that you've specified on the PAGE PROPERTIES dialogue box.

5) You can change how individual words, letters, lines or sections of text appear by using the PROPERTIES edit window which is usually set to appear at the bottom or right hand side of your screen. Some of the options here are similar to the PAGE PROPERTIES options, but these can be applied separately to individual sections of the page rather than the page as a whole. You'll find options in this window for many important elements, including font, style, size, color, justification, and LINK. Using the PROPERTIES window to create links between pages is by far the best way to avoid misfires in your web site. If you have all your files in the right folders to start with, and you use the "browse for link" option (click the little folder to the right of the LINK space, your links are guaranteed to work.

6) All this text that I'm writing here will appear on the home page of the KNIVES web site. But if I just enter it as text, it may float around a bit as I add other materials. The best way to keep everything in place is to create a TABLE and then put text, images, etc. into individual cells of the table. You can create a "TABLE" by choosing TABLE from the INSERT pull down menu. When you first create the table, you can set various options--just like in MS Word, but you can also change these options by selecting the TABLE command under "MODIFY". Keep this in mind: There are two "table" commands: one to create, and one to modify.

ALSO: There's a neat trick you can use to hide the table lines. You can only see the lines if they are a different color than the background of the table. If you make them the same color as the background--you can do this by choosing the BORDERS options in the PROPERTIES window--they'll disappear. (You can also make your text disappear this way and get it back by changing the color)

7) As you build your web page(s), you can add LINKS and ANCHORS, but DO NOT CREATE ANY LINKS UNTIL ALL YOUR FILES ARE IN THE RIGHT FOLDER AND NAMED CORRECTLY. You create a LINK by selecting part of your web page (a line of text, a word, a picture, or a table cell) and then specifying the path from this selection to another page. If you want to go to a particular spot on another page, or on the same page you are working on, you can do so by first creating an ANCHOR. You can create LINKS between one part of your page to ANCHORS on the same page so that people can jump around easily--if you want them to do that. The three most important steps in creating links that work are:

(a) start with all your files for the web site in the folders where they'll be when you are all done, and keep them there;

(b) name your files correctly and don't change the names;

(c) use the "browse" option in the PROPERTIES window to set your links.

8) One more "most important" step is to PREVIEW IN BROWSER the pages you've been creating in Dreamweaver. Dreamweaver is a web-editing program, so when you open your file in Dreamweaver you can work on it, but you can't quite see how it will look on the web. Use the FILE pull down menus in Dreamweaver and you can PREVIEW your page in different browsers.

[back to top]


4. Testing your knowledge of web design guidelines -- General information

NOTE: This is an exam on web building principles for students enrolled in EDU 122. ALL members of your group must answer ALL questions correctly before you will be given access the the EDU 122 web space.


1.   T or F.  In building a web site that works, you'll need to keep all your files in the same "root" folder.

2.   T or F.   In assigning names to files within your web site, you can use blank spaces (e.g., "Barbie photo") or special characters (e.g. "Barbie photo") without running into any problems, but if you use underscores "_" the site may not work. 

3.   T or F.  One difference for web sites between text and images is that with images you don't have to include the actual file in your web site, you can just paste in a link from an image that you've found somewhere else.

4.   T or F.  The best way to start a web site is to start making links between pages. Keep adding more links until you get to the point where you actually need a home page, then design the home page.

5.   T or F.  Most web browsers will open image files to the right size for viewing, regardless of the actual size of the original file.

6.   The most common resolution for computer screens is which of the following: (a) 72 pixels per inch; (b) 300 pixels per inch; (c) 400 lines per inch.

7.   To arrange text and images on a web page and keep them where you want them, you put them in which of the following: (a) a frame; (b) a table; or (c) a folder

8.   T or F.  To avoid unpleasant surprises, you should always name your home page "default.html"

9.   T or F.  Once your web site is created, you can change file names to whatever you like without compromising your design.

10.   T or F.  If you are using images in your web site, always use a copy of the image that is the highest resolution you can find.

11.  T or F.   Don't bother to check your links before you upload your files to a server; checking links in your work folder won't tell you much about how things will work once your materials are uploaded, so you might as well wait.

12.   T or F.  If you want to have separate sub-folders inside your root folder, that's okay, as long as you don't change their names as you build your site.

13.   T or F.  The software you use to "build" a web site is different from the software you use to "look" at a web site.

14.   T or F.  One great thing about building web sites is that most web building programs will automatically back up your files for you so that you'll never lose anything.

[back to top]


5. A web site template students can use in designing their own web site for EDU 122



6. A gallery of student created web sites

[back to top]