Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

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 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

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

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

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

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

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

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

10 Section 6.1 Creating Web Site Content pp 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

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

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

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

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

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

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

18 Section 6.2 Placing Items on a Page pp 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

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

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

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

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

24 Section 6.3 Creating a Page Template pp 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 link to the Webmaster, and copyright information. Key Terms navigation button hover button interactive button active button link bar footer pp

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

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

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

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 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

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 Window (p. 181) pp

31 Section 6.4 Enhancing the Template pp 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


Download ppt "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."

Similar presentations


Ads by Google