|
Home | Week1 | Week2 | Week3 | Week4 | Week5 | Week6 | Week7 | Week8 | Week9 | Week10 |
Developing Educational Materials for the World Wide Web
Week 4- Designing a Basic Web Page
This week we will practice with tables, which are used extensively in constructing web pages.
Trends: You may have noticed that web sites undergo "fashion" trends -- trends in color, font styles and sizes, Flash animations, etc. You may even be able to place when the website was developed by the way it looks!
An early trend was the use of frames, which are still used in many sites, such as one we've already seen, the Interface Hall of Shame. http://www.iarchitect.com/mshame.htm. Frames are used as navigation devices by keeping the same menu of information available no matter where the viewer goes. One of the problems with frames is that is is difficult to save a site since the URL of the original frame will take precedence over any following pages. If done incorrectly, even pages outside the site will be seen inside the frames.
Many web authors have gone to other methods of navigation, particularly tables or "sliced" navigation bars or images, "mouseovers" or "rollovers". An example is found at Teacher Created, http://www.teachercreated.com/ Software such as Macromedia Fireworks or Adobe ImageReady can cut an image or a navigation bar into "slices," or hotspots. Each slice is assigned a URL. The slices are then reassembled as an HTML file. When the HTML file is inserted into a page, rolling the mouse over the hotspot will change what the viewer sees, and when the hotspot is clicked, it will take them to the target URL. As you may have guessed, this takes some knowledge of these programs. Sliced images also create many files to upload to a remote server.
Page Structure Using Tables: You may have found in your simple HTML page that it is difficult to place graphic images where you want them, and if you do not tell them exactly where to go, they may wander all over your page! When you construct your web page, you may have difficulty putting text alongside a graphic, and you wonder how it is done.
TABLE You can merge cells, add color, center text, and insert images.
The answer is to use tables. (The navigation bar at the top of this page is a one-row, one-column table.) Take a look at Kathy Schrock's Guide at http://school.discovery.com/schrockguide/ Another similar site is WWW4Teachers, http://www.4teachers.org/ In these sites,the web authors divided information on the page by the use of tables with colored cells, which serve as fences (or corrals, as we use on the dairy farm) to keep the text and graphics in place. You can choose whether to make the table visible on a browser when you first insert it onto your page, by the use of colored cells, or by the use of borders, cell padding and cell spacing. An example of visible borders can be found at the Enchanted Learning site, http://www.enchantedlearning.com/Home.html. If you set the cell padding and cell spacing to 0, the tables will not be visible on the browser, although you will see the dotted lines in the web author.
Download Time: We've mentioned download time before, and we will hear about it again! One way to shorten download time is to use more than one table. Some browsers wait until the table is completely downloaded in order to display it. So make one table underneath another if you plan on a long page, so several things can be showing up at once.
Activity/Assignment:
Your assignment for the week is to create a table that can give structure to your web page. You may create the table using Word Perfect, Microsoft Word, or another word processor, or you may use a web author such as Dreamweaver or Front Page. Remember that if you want to use a graphic, you must use the "Insert" option rather than copying or pasting, because the browser needs a path in order to find the graphic.
Do the following with your table:
- When planning your page, sketch it out on a grid that is the same size as the screen you will be using, including however long the scrolled page will be. Mark the part of the page the first screen will include. Since screens are of different sizes, your table should be made using a percentage of the screen rather than a fixed size.
- Place the banner headline, navigation bars, graphics, and text where you want it to be. Then estimate where your table cells should be. Count how many rows and columns you will need. Remember that you will need to merge cells in order to provide enough space for a long headline, for instance, or a square graphic image.
- Experiment with different border thicknesses (cell padding and cell spacing) or none at all. Most sites choose to eliminate table borders, although you may see them on children's sites or commercial sites presenting objects for sale.
- Try using color in cells. Color is especially effective when used to separate text, as in long bars of color.
- Merge cells in order to create long strips within your table for bars of color. Or merge cells in a larger square in order to insert a graphic. Graphics can then be sized after inserted, and the table can be resized by moving the lines in or out.
Practice Making Tables:
You may already have had experience making tables in a word processor. If not, you can download the following documents for practice, using Word Perfect or Microsoft Word. Click on the file you want and download it to your desktop. The Microsoft Word file will not automatically download, so right-click and use the "Save As" option.
Developing Educational Materials for the World Wide Web
EOU Malheur County Center (541) 889-7468 or (541) 889-6222
