1. Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement Evaluate page layouts

2. Section 6.3 Create a custom page template Insert a logo Insert a title graphic Create a table Section 6.4 Create navigation buttons Add footer information Add text links Create an e-mail window

3. 6.1 Creating Web Site Content Guide to Reading Main Ideas Many specific strategies can help you write interesting content for the Web. You must write your Web content clearly and concisely. Key Terms content inverted pyramid pp. 150-153

4. 6.1 Creating Web Site Content Writing for the Web content Writing good Web content shares some basic principles with good print writing. inverted pyramid Many Web designers agree that Web text should be organized in an inverted pyramid form. content The text and graphics included on a Web page. (p. 150) inverted pyramid A type of narrative structure that places the most important information at the beginning of a story, where it will best catch the reader’s attention. (p. 152) pp. 150-153

5. 6.1 Creating Web Site Content Text should be broken into small pieces on the Web page. Writing for the Web

6. pp. 150-153 6.1 Creating Web Site Content Example of the inverted pyramid: Writing for the Web

7. pp. 150-153 6.1 Creating Web Site Content Some practical ideas to get you started writing include: Generating and organizing ideas through brainstorming and keyword lists. Identifying headings for organization. Writing for the Web

8. pp. 150-153 6.1 Creating Web Site Content Activity 6A – Creating Content for a Web Page (p. 153)

9. 6.2 Placing Items on a Page Guide to Reading Main Ideas The best Web pages have clear, attractive layouts, which you can achieve by understanding simple Web design guidelines. Key Terms pixel screen resolution safe area white space proximity pp. 155-159

10. 6.2 Placing Items on a Page Web Page Dimensions A Web page’s dimensions are determined by the width and height of the page, which are viewed on the monitor. pixels The viewing area of a monitor is measured in pixels. pixel A single point in a graphic image; short for picture element. (p. 155) pp. 155-159

11. 6.2 Placing Items on a Page Web Page Dimensions screen resolution Users can change the size of the viewing area of their monitor by changing their screen resolution. safe area The perfect page dimension cannot be defined, but there is a safe area available on every Web browser/system combination. screen resolution The amount of pixels that a monitor can display; measured by width and height, such as 640 x 480. (p. 155) safe area Amount of space available on every Web browser and system combination; generally defined as 640 x 480 pixels, the size of the smallest monitor available. (p. 155) pp. 155-159

12. 6.2 Placing Items on a Page Page Layout Guidelines There are some simple guidelines to make your Web site user-friendly. Eliminate clutter  Remove unnecessary content  Choose function over form Create visual rest stops white space  Use plenty of white space white space An area on a Web page without any content. (p. 158) pp. 155-159

13. 6.2 Placing Items on a Page Page Layout Guidelines (continued) Emphasize important content proximity Group related items in proximity to each other Align text consistently Keep download time short proximity The closeness of elements on a page that can cause readers to make assumptions about how elements relate to each other. (p. 158) pp. 155-159

14. 6.2 Placing Items on a Page This newspaper home page is so cluttered that viewers cannot determine which information is important. The redesigned site draws the eye to important news. Page Layout Guidelines

15. pp. 155-159 6.2 Placing Items on a Page Page Layout Guidelines

16. pp. 155-159 6.2 Placing Items on a Page Activity 6B – Viewing a Page at Various Resolutions (p. 156)

17. 6.3 Creating a Page Template Guide to Reading Main Ideas Creating a custom template provides consistency among the pages on a site and simplifies creating the individual pages. The template can contain the elements that will appear on every page. Key Terms logo title graphic table column row cell pp. 160-164

18. 6.3 Creating a Page Template Using a template is an easy way to create a new Web page. You can create your own custom templates if pre-made templates do not fit your need. Designing a Template

19. 6.3 Creating a Page Template The Astronomy Club Logo and Title Graphic logotitle graphic You will need to place the logo and title graphic at the top of every page. You will also need to add alternative text to both the logo and the title graphic. logo A symbol used to represent a business or an organization. (p. 162) title graphic An image that appears at the top of every page on a Web site. (p. 162) pp. 160-164

20. 6.3 Creating a Page Template Tables tables columnsrows cells Many designers use tables, made up of columns, rows, and cells, to organize a Web page’s content. pp. 160-164 table An item consisting of columns and rows that is used to organize a Web page’s content. (p. 163) column Cells in a table that are arranged vertically. (p. 163) row Cells in a table that are arranged horizontally. (p. 163) cell Each individual square within a table; the intersection of a column and a row. (p. 163)

21. pp. 160-164 6.3 Creating a Page Template Activity 6C – Creating a Page Template (p. 161) Activity 6D – Adding a Logo and Title Graphic (p. 162) Activity 6E – Creating a Table (p. 163)

22. 6.4 Enhancing the Template Guide to Reading Main Ideas You can insert navigation buttons into a template so that when you create individual pages, the links will already be established. Page footer information typically includes text links, an e- mail link to the Webmaster, and copyright information. Key Terms navigation link hover button active button interactive button link bar footer pp. 166-170

23. 6.4 Enhancing the Template Navigation Buttons Navigation links Navigation links are used to locate information and navigate to other Web pages. Two types are: Hover button Active button Active button pp. 166-170 navigation link A button that users click to locate additional information and to navigate to other Web pages. (p. 166) hover button A navigation button that changes appearance when touched by a mouse pointer. A type of interactive button. (p. 166) active button A clicked button that is in the process of doing something, such as transferring the user to another Web page. (p. 166)

24. 6.4 Enhancing the Template Navigation Buttons interactive buttons Hover buttons are also called interactive buttons. FrontPage provides many different styles of pre- made interactive buttons, and it also allows you to create custom buttons. interactive button Type of button that changes to let users know that an action has taken place; also called a dynamic button. (p. 166) pp. 166-170

25. 6.4 Enhancing the Template Navigation Buttons All navigation buttons can be placed in a link bar or navigation bar. Link bars: Act as maps to the site. Ease the use of the page. link bar A related group of horizontally or vertically aligned links; also known as a navigation bar or table of contents. (p. 166) pp. 166-170

26. 6.4 Enhancing the Template Footer Information footers Web page footers usually contain date information, copyright information, contact information, and text links. footer The bottom portion of a Web page; usually contains date information, copyright information, contact information, and text links. (p. 168) pp. 166-170

27. 6.4 Enhancing the Template When visitors click the Webmaster link at the bottom of the page, an e-mail window will pop up that contains the Webmaster’s e-mail address. This feature allows visitors to send messages to the Webmaster. Footer Information

28. pp. 166-170 6.4 Enhancing the Template Activity 6F – Adding Navigation Buttons (p. 167) Activity 6G – Adding Footer Information (p. 168) Activity 6H – Adding Text Links (p. 168) Activity 6I – Adding a Link to an E-mail Window (p. 169)

29. Chapter 6 For more resources on this chapter, go to the Introduction to Web Design Web site at webdesign.glencoe.com.webdesign.glencoe.com Resources