UD Logo
School of Education
Textbook Cover

Computational Thinking on the Internet

Chapter 4: Designing Webs

After completing Chapter 4, you will know how to:

End of Chapter Labs

Lab Project 4.1: Adopting a Common Look and Feel

Whether or not the Web page author is aware of it, every Web page has a certain kind of look and feel. If the look and feel is consistent from page to page, coworkers and users who visit the site frequently get used to looking in certain places on the page to find different kinds of things such as menus, link bars, headlines, different kinds of content, and navigation buttons. If the look and feel is not consistent from page to page, the user must spend more time finding where things are on the page. This is inefficient at best and can be frustrating as well. Imagine that your employer has decided that your school or company website needs to adopt a common look and feel. Your employer has asked you to create a design specification recommending a common look and feel for Web pages created in your workplace. In creating this design spec, address the following issues:

  1. Templates. What kinds of pages do your coworkers typically create? The pages probably fall into a few basic types, such as home pages for different projects or products, search pages for finding things, catalog pages for listing products for sale, and document pages containing reports, product information, or scholarly papers.
  2. Design elements. What are the design elements that are likely to appear on the different kinds of pages identified in step 1? Make an outline that lists the basic kinds of pages typically used in your workplace. Under each kind, list the design elements that appear on that kind of page. Consider all the different elements that can appear on your workplace Web pages, such as banners, menus, search buttons, quick links, news feeds, headlines, navigation buttons, pictures, icons, logos, prose, products, catalogs, advertisements, and bibliographies.
  3. Positioning. Add to the outline created in step 2 an indication of where each element will go on the Web page. If you are not sure where things should go, visit some websites of organizations like yours, and study their Web page designs. If you have Dreamweaver, there are several built-in page templates you can look at. Pull down the File menu, choose New, and click the option to see the starter templates. As you click each template, a preview pane shows the layout. You can also peruse award winning Web designs by surfing the winners of the Webby awards. Study their templates and visit other websites in your industry or subject matter to get more design ideas.
  4. Navigation. Include in your design spec a strategy for placing navigational elements at consistent places onscreen.

Use a word processor to write up your answer to this assignment in the form of a three-part essay. In the first part, describe the overall approach you recommend. Mention the three or four basic kinds of templates you feel your school or company needs. In the second part, present the outline of design elements that will typically appear on each template. Conclude by describing where onscreen these design elements will appear. If you are graphically inclined, you can use your word processor's drawing tools to create a prototype of the screen designs you envision. Otherwise, you can describe the layout prosaically. Make sure you specify where the navigational elements will be onscreen. If your instructor asked you to hand in this assignment, put your name at the top, then save it on your computer and follow any other instructions you may have been given for submitting this assignment.

Lab Project 4.2: Using a Word Processor to Make a Web Page

Microsoft Word has a powerful Web page creation capability that works in both Windows and Macintosh versions of MS Word. Especially for essays and term papers written with MS Word, this Save As Web Page feature is a handy way to convert documents into Web pages for publishing on the Web. Suppose you have written a term paper that you wish to convert into a Web page for publishing on the Web. Follow these steps:

  1. Open your document with MS Word.
  2. Pull down the File menu and choose Save As.
  3. Use the controls to choose the location where you want to save the file.
  4. When the Save As dialog appears, you will see a filename field and a Save As Type setting.
  5. In the filename field, type the filename you want this document to have. Remember that out on the Web, it is best avoiding spaces and special characters in your filenames. It is however fine to type a hyphen in the midst of a filename. In this example, my-term-paper.html would make for a good filename.
  6. Pull down the Save As Type menu and choose the option to make a Web Page. You will see three types of Web page formats that are called Single File Web Page (*.mht, *.mhtml), Web Page (*.htm, *.html), and Web Page Filtered (*.htm, *.html). The Single File Web Page is a proprietary Microsoft format that requires the Microsoft browser to display. The Filtered page removes Microsoft-specific tags from the HTML file. With experience you will discover which format works best in your situation. I normally choose Web Page (*.htm, *.html), which is what I suggest you should use the first time you try this.
  7. After you save the page in your website folder, use your Web browser to open the page and see how it will appear out on the Web. Later in this book, you learn how to publish pages like this in Chapter 9, Publishing Webs. Note: When you publish this page to the Web, check to see if it has an accompanying folder that needs to be published along with it. Such a supplementary folder will end with the suffix _files. If the filename of your page is my-term-paper.html, for example, the name of the supporting folder will be my-term-paper_files. When you publish the page to the Web, you also need to publish its supporting folder, if there is one, into that same spot on the Web.
If your instructor asked you to hand in this assignment, put your name at the top of the page, save it as HTML, and open it with your browser to make sure it displays properly. Then follow any other instructions you will have been given for submitting this assignment.