1. 6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines Determine content placement Evaluate page layouts YOU WILL LEARN TO…

2. 6 Developing Content and Layout YOU WILL LEARN TO… Section 6.3 Create a custom page template Insert a logo Create a table Section 6.4 Create navigation buttons Add footer information Add text links Create an e-mail window

3. Section 6.1 Creating Web Site Content Focus on 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. 162-165

4. Section 6.1 Creating Web Site Content Writing for the Web content Information design involves determining a Web page’s content, or the text and graphics included on the page. Text content should be brief and easy to read. Graphics content should be visually appealing and informative. content The text and graphics included on a Web page. (p. 162) pp. 162-165

5. Section 6.1 Creating Web Site Content Text should be broken into small pieces on the Web page. Writing for the Web pp. 162-165

6. Section 6.1 Creating Web Site Content Writing for the Web inverted pyramid Many Web designers agree that Web text should be organized in an inverted pyramid form. The most important information should appear first. 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. 164) pp. 162-165

7. Section 6.1 Creating Web Site Content Here is a graphical representation of the inverted pyramid: Writing for the Web pp. 162-165

8. Section 6.1 Creating Web Site Content Here are some practical ideas to get you started writing: Brainstorm to generate ideas. Write down every topic you want to include on your page. Write a keyword next to each topic. Review your keywords and decide which to use in headings. Developing Content for a Web Page pp. 162-165

9. Section 6.1 Creating Web Site Content Activity 6A – Create Content for a Web Page (p. 165) pp. 162-165

10. Section 6.1 Creating Web Site Content pp. 162-165 True/False Long and detailed paragraphs are preferred over shorter text in a Web page. False. Text should be broken into small pieces on a Web page. Section Assessment

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

12. Section 6.2 Placing Items on a Page To make your Web site user-friendly: Eliminate clutter by removing unnecessary content. Use white space. Emphasize content by sizing elements in proportion to their importance. Group related items near each other. Align text consistently. Keep download time to a minimum by eliminating unnecessary content. Page Layout Guidelines pp. 167-170

13. Section 6.2 Placing Items on a Page Page Layout Guidelines The strategic use of white space creates an area where the eye can take a break as it scans the page. This helps frame and draw attention to your content. white space An area on a Web page without any content. (p. 168) pp. 167-170

14. Section 6.2 Placing Items on a Page Page Layout Guidelines proximity If items on a page are in close proximity to each other, people will assume that these items are related. proximity The closeness of elements on a page that can cause readers to make assumptions about how elements relate to each other. (p. 168) pp. 167-170

15. Section 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. 169) pp. 167-170

16. Section 6.2 Placing Items on a Page Web Page Dimensions safe area Place your most important information in the safe area because it displays on every Web browser/system combination. screen resolution Users can make content appear smaller or larger by changing their screen resolution. safe area Amount of space available on every Web browser and system combination; generally defined as 800 x 600 pixels, the size of the smallest monitor available. (p. 169) screen resolution The amount of pixels that a monitor can display; measured by width and height, such as 800 x 600. (p. 169) pp. 167-170

17. Section 6.2 Placing Items on a Page Activity 6B – View a Page at Various Resolutions (p. 169) pp. 167-170

18. Section 6.2 Placing Items on a Page pp. 167-170 Identify The strategic use of ___________ creates an area where the eye can take a break as it scans the page. A. pixels B. white space C. safe areas D. proximity B. white space Section Assessment

19. Section 6.3 Creating a Page Template Focus on Reading Main Ideas Creating a custom template provides consistency among the pages on a site and simplifies producing individual pages. The template can contain the elements that will appear on every page. Key Terms template logo title graphic table column row cell pp. 171-176

20. Section 6.3 Creating a Page Template Designing a Template Using a template is an easy way to create a new Web page. You can create your own custom templates if premade templates do not fit your need. template A reusable pattern that helps you place information quickly and efficiently on a Web page. (p. 171) pp. 171-176

21. Section 6.3 Creating a Page Template The Language Club Logo logotitle graphic Many Web sites include a logo and title graphic at the top of every page. You can designate alternative text for both the logo and the title graphic. The alternative text appears on the screen if the image is not available. logo A symbol used to represent a business or an organization. (p. 174) title graphic An image that appears at the top of every page on a Web site. (p. 174) pp. 171-176

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

23. Section 6.3 Creating a Page Template Activity 6C – Create a Page Template (p. 172) Activity 6D – Add a Logo (p. 174) Activity 6E – Create a Table (p. 175) pp. 171-176

24. Section 6.3 Creating a Page Template pp. 171-176 Name What is a reusable pattern that helps you place information quickly on a Web page called? A. logo B. table C. title graphic D. template Section Assessment

25. Section 6.4 Enhancing the Template Focus on Reading Main Ideas You can insert navigation buttons into a template so that when you create each page, the links will already be established. Page footers typically include text links, an e-mail link to the Webmaster, and copyright information. Key Terms navigation button hover button interactive button active button link bar footer pp. 177-182

26. Section 6.4 Enhancing the Template Navigation Buttons Navigation buttons Navigation buttons are used to locate information and navigate to other Web pages. navigation button A button that users click to locate additional information and to navigate to other Web pages. (p. 177) pp. 177-182

27. Section 6.4 Enhancing the Template Navigation Buttons There are different types of navigation buttons: Hover button Interactive button Interactive button Active button Active button hover button A navigation button that changes appearance when touched by a mouse pointer. (p. 177) interactive button A type of button that changes to let users know that an action has taken place; also called a dynamic button. (p. 177) active button A clicked button that is in the process of doing something, such as transferring the user to another Web page. (p. 177) pp. 177-182

28. Section 6.4 Enhancing the Template Navigation Buttons All navigation buttons can be placed in a link bar or navigation bar. Link bars are easy to locate because they are always in the same position. They make links easy to find because they are always in the same order. link bar A related group of horizontally or vertically aligned links; also known as a navigation bar or table of contents. (p. 177) pp. 177-182

29. Section 6.4 Enhancing the Template Footer Information footers Web page footers usually contain essential information and links. Always include text links and a link to a pop-up e-mail window in your footer. footer The bottom portion of a Web page; usually contains date information, copyright information, contact information, and text links. (p. 179) pp. 177-182

30. Section 6.4 Enhancing the Template Activity 6F – Add Navigation Buttons (p. 177) Activity 6G – Add Footer Information (p. 179) Activity 6H – Add Text Links (p. 180) Activity 6I – Add a Link to an E-mail Window (p. 181) pp. 177-182

31. Section 6.4 Enhancing the Template pp. 177-182 Evaluate Which of the following is not a type of navigation button? A. interactive B. hover C. active D. link Section Assessment

32. 6 Developing Content and Layout Chapter Review Examine In which area should you place a site’s most important information so it will display fully on every Web browser? A. white space area B. content area C. picture area D. safe area

33. 6 Developing Content and Layout Chapter Review Explain Why is it a good idea to base a Web site on a template? Templates allow you to create one unified design for a site. It also saves time because you do not need to start with a blank page for each new page that you want to add.

34. 6 Developing Content and Layout Chapter Resources For more resources on this chapter, go to the Introduction to Web Design Using Dreamweaver Web site at WebDesignDW.glencoe.com. WebDesignDW.glencoe.com