School of Education

Internet Technologies At Work

Chapter 6: HTML Coding

After completing Chapter 6, you will know how to:

Substitutions

Chapter 6 steps you through the process of creating your Web page résumé. This is the same process I followed when I created my Web page résumé. Feel free to use my résumé as your guide, or let your imagination run free and create a unique design.

Remember that you can substitute a topic of your choosing if you do not want to create the specific pages taught in the book. As long as your Web pages look good on screen and have good navigation built in, you will ace the Web site assignment when you publish your pages and submit to be graded later in the course.

End of Chapter Labs

Lab Project 6.1: Graphic Design

The adage that a picture is worth a thousand words has never been more appropriate than on a Web page. One could argue that the hypermedia environment adds even more value to the picture, because you can access it quickly when you need it. Being able to find the picture you want quickly may make the image worth a million words when it answers a question or solves a problem for which you need a solution quickly. Imagine that your employer has put you in this kind of a situation. Your school or small company is having budget problems, and your employer has asked you to develop a cost-effective strategy for creating Web site graphics. Get your word processor started, and follow these suggested ways of satisfying your employer’s request for a graphic design strategy:

  1. There are several good banner and button-making utilities available on the Web. See if you can find a utility that creates banners and buttons in a style compatible with your school or company’s look and feel. Follow this book’s Web site links to banner and button makers. Using your word processor, take notes identifying the names of the sites you visited, and report whether you would recommend them for use in your workplace. At the site you like best, create a sample banner and copy it into your report as an example. Note: To copy a graphic from the Web into your word processor, right-click (Macintosh users Ctrl-click) the image and choose Copy, then go into your word processor, pull down the Edit menu, and choose Paste.
  2. Paint Shop Pro has a button-maker built in. Make a sample button with Paint Shop. Copy the button into the report in your word processor, and write a paragraph indicating that the button came from Paint Shop. State whether you would recommend using the Paint Shop button maker to make buttons at your school or company Web site.
  3. Google Sites has a wide array of themes built in. If you are using Google Sites, you can audition these themes to see if there might be one suitable for use in your school or company. It is also possible to modify the Google themes; if you find one that almost fits, you can fine-tune it. To audition the Google themes, follow these steps:
    • In Google Sites, pull down the More Actions button, and choose Manage Site.
    • In the sidebar, under Site Appearance, choose Themes.
    • Scroll through the themes, and click the preview link on the theme you would like to see. Google displays your page in that theme. Repeat this step and look at all the different themes.
    • If you see a theme you like, use your word processor to record its name in the report you are writing.
  4. The Microsoft Clip Gallery is a rich source of graphics for illustrating Web pages. Follow this link to the Microsoft Clip Gallery, and use the search tools to perform a keyword search for the kinds of graphics needed by your school or company. Use your word processor to add to your report any suitable graphics you may find. Type the graphic’s filename, and paste a thumbnail of the graphic into your report.

If your instructor has asked you to hand in this assignment, make sure you put your name at the top, then save your graphic design recommendations on disk or follow the other instructions you may have been given for submitting this assignment.

Lab Project 6.2: Page Layout

Page layout is a critical aspect of creating a Web site for any school or business. Because of the different screen sizes in common use today, you need to plan a design that will adjust to different window sizes. Every site on the Web faces this dilemma. Imagine that your employer has noticed that some Web sites seem to have better layout than others. Your employer has asked you to go out on the Web, analyze the designs of some of the better sites, and recommend a page layout strategy for your school or company Web site. To complete this assignment, follow these steps:

  1. Visit some of the premier sites on the Web and observe how they layout material on their Web pages. Sites with innovative screen layouts include:
  2. At each of the sites you visited in step (1), resize your browser window and refresh the pages to see how they look at different screen resolutions.
  3. All of these sites use tables to define their screen layout. As you learned in this chapter, tables permit you to design any conceivable layout pattern onscreen. One of the tricks you can use is to define certain columns of a table to be fixed to a predetermined pixel size, and set the others to a certain percentage of the window’s width. When the user resizes the window, the columns that have percentage settings stretch or squeeze accordingly. Consider whether this kind of a design would be appropriate for your Web site.
  4. At the microsoft.com site, notice especially how the menu bar at the top stretches or squeezes to fit the window when you resize your browser. Decide whether you want the menu bars at your site to work like this.
  5. Use your word processor to write a three-part report, organized as follows:
    • In the first part, describe the screen layout strategy you recommend for your workplace. If you found other Web sites using this strategy, provide their Web address so your employer can go visit them to see what you mean.
    • In part two, write a paragraph or two describing sites you found interesting, but whose layouts you rejected. Give the Web address so your employer can visit them, and state the reason why you decided not to follow their designs.
    • In the third part, conclude your report with a brief paragraph stating the reasons why the solution you have recommended is better than the layouts you decided to reject.

If your instructor has asked you to hand in this assignment, make sure you put your name at the top, then save your page layout recommendation on disk or follow the other instructions you may have been given for submitting this assignment.