Section 7.1 Identify presentation design principles Use a custom template
description
Transcript of Section 7.1 Identify presentation design principles Use a custom template
![Page 1: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/1.jpg)
Section 7.1• Identify presentation design principles• Use a custom template• Add pages to a navigation structure
Section 7.2• Identify color scheme guidelines• Use Web-safe colors
![Page 2: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/2.jpg)
Section 7.3• Identify text properties• Summarize formatting guidelines• Format text
Section 7.4• Insert a text document• Create an image map• Define a hotspot• Use a checklist
![Page 3: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/3.jpg)
7.1 Principles of Presentation DesignGuide to Reading
Main Ideas
Well-designed Web pages follow the guidelines of consistency and repetition. Using consistent visual elements and placing key items in the same place from page to page makes a site user-friendly.
Key Terms
consistency
repetition
page banner
pp. 178-182
![Page 4: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/4.jpg)
7.1 Principles of Presentation DesignConsistency and Repetition
Two features that make Web sites user-friendly are consistencyconsistency and repetition.
If key elements on your site are consistent, users will recognize that they are on the same site.
RepetitionRepetition helps users quickly find buttons and links they need to navigate through the site.
consistency A logical coherence among parts; rule that encourages designers to use similar design elements throughout a site. (p. 178)
repetition Design rule that encourages designers to duplicate specific elements on all (or most) of a site’s pages to make the site more user-friendly. (p. 178)
pp. 178-182
![Page 5: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/5.jpg)
7.1 Principles of Presentation DesignCreating Web Pages
Using a template for your Web page ensures that the position and appearance of the main elements of the site will be the same on each page.
Here are some steps to finalizing a Web page:
1. Assign file names and page titles2. Add pages to navigation structure3. Add page bannerspage banners
page banner Page element that contains graphics and/or text, such as a site’s logo and title graphic; helps users identify where they are in a Web site. (p. 181)
pp. 178-182
![Page 6: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/6.jpg)
pp. 178-1827.1 Principles of Presentation Design
After you have created the main pages of a site and given them titles, you need to add them to the site’s navigation structure.
Creating Web Pages
![Page 7: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/7.jpg)
pp. 178-1827.1 Principles of Presentation Design
• Activity 7A – Using a Template to Create New Pages (p. 179)
• Activity 7B – Adding Pages to the Navigation Structure (p. 180)
• Activity 7C – Inserting Page Banners (p. 181)
![Page 8: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/8.jpg)
7.2 Choosing Web-safe ColorsGuide to Reading
Main Ideas
A Web site’s color scheme should both appeal to visitors and create a sense of continuity among the pages. Using Web-safe colors helps ensure that pages will appear the same to all viewers, regardless of the systems and browsers they are using.
Key Terms
color schemeWeb-safe color
pp. 184-186
![Page 9: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/9.jpg)
7.2 Choosing Web-safe ColorsColor Scheme Guidelines
You can use colors to draw attention to important items on a page.
When choosing a color color schemescheme, it is important to select colors that are appropriate to your message.
color scheme A set of selected colors used consistently for a Web site’s interface elements, such as title graphics, navigation buttons, and background. (p. 184)
pp. 184-186
![Page 10: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/10.jpg)
7.2 Choosing Web-safe ColorsUsing Web-safe Colors
Not all colors will display exactly the same way on a screen.
Only 216 of the many colors available will display consistently. These are considered Web-safe colorsWeb-safe colors.
Web-safe colors The 216 colors that display consistently from computer to computer, giving Web designers some control over their pages’ appearance.
(p. 184)
pp. 184-186
![Page 11: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/11.jpg)
pp. 184-1867.2 Choosing Web-safe Colors
• Activity 7D – Adding Content and Color to the Home Page
(p. 185)
![Page 12: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/12.jpg)
7.3 Fonts and TypographyGuide to Reading
Main Ideas
When you are using text, you can specify its font type, size, style, color, and alignment. Choose formatting properties that will make your text readable, consistent, and attractive.
Key Terms
typography
font
point
alignment
serif
sans serif
pp. 187-193
![Page 13: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/13.jpg)
7.3 Fonts and TypographyText Properties
Presentation design also involves the physical appearance of text on a page.
Web designers select the text’s typographytypography, which consists of:
• FontFont type• Font size (in pointspoints)• Font alignmentalignment• Font color• Font style
typography The style, arrangement, and appearance of text. (p. 187)
font A family of letters, numbers, and other symbols that share a consistent style. (p. 187)
point A traditional unit of type measurement. (p. 188)
alignment The position of text on a page, such as left, right, or centered. (p. 188)
pp. 187-193
![Page 14: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/14.jpg)
7.3 Fonts and TypographyFormatting Guidelines
All the text on your page should be: • Readable
• Consistent
• Attractive
Fonts can be divided into two broad categories:• SerifSerif
• Sans serifSans serif
serif Font that has an extra line or curve on the ends of certain letters or numbers. (p. 190)
sans serif A font that does not have special adornment at the end of letters or numbers. (p. 190)
pp. 187-193
![Page 15: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/15.jpg)
pp. 187-1937.3 Fonts and Typography
Because FrontPage provides you with a WYSIWYG editor, you can immediately see how text is formatted on your pages.
Formatting Text in FrontPage
![Page 16: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/16.jpg)
pp. 187-1937.3 Fonts and Typography
• Activity 7E – Formatting Text (p. 192)
![Page 17: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/17.jpg)
7.4 Image Maps and ChecklistsGuide to Reading
Main Ideas
You can insert Word documents into your Web pages. Image maps let users click on hotspots that link to related pages or information.
Key Terms
subpage
image map
hotspot
pp. 195-200
![Page 18: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/18.jpg)
7.4 Image Maps and ChecklistsCreating Subpages
SubpagesSubpages are often pages that are a child of another page.
subpage A page that is a child of another page. (p. 195)
pp. 195-200
![Page 19: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/19.jpg)
7.4 Image Maps and ChecklistsImage Maps
Image mapsImage maps are often used on Web sites as parent pages leading to child pages.
The image map consists of hotspotshotspots that lead to the child pages. Hotspots can be any shape.
image map A graphic with clickable areas called hotspots that link to another page or to another area on the same page. (p. 197)
hotspot A graphic link to a related page or another area on the current page. (p. 197)
pp. 195-200
![Page 20: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/20.jpg)
pp. 195-2007.4 Image Maps and Checklists
There are many important guidelines concerning how to use text, images, and color on your Web sites.
Checklists can be useful in determining whether your pages conform to these guidelines.
Checklists
![Page 21: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/21.jpg)
pp. 195-2007.4 Image Maps and Checklists
The Web site and Web page checklists help you verify that your site meets its design.
Checklists
Web Page Evaluation• Text is presented in short
sections.• Graphics support the page’s
purpose.• All content is proofread and spell
checked.• The page contains sufficient
white space.• Important content is emphasized.• Related items are grouped
together.• All hyperlinks have been tested.
Web Site Evaluation• The site’s content, formatting,
and color scheme support the mission statement.
• The site’s color scheme is consistent.
• The site’s formatting is consistent.
• Text is readable against the background.
• Page elements such as link bars and page banners are placed consistently throughout the site.
![Page 22: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/22.jpg)
pp. 195-2007.4 Image Maps and Checklists
• Activity 7F – Adding a Subpage to the Sky Guide Page (p. 195)
• Activity 7G – Inserting a Document File into a Web Page (p. 196)
• Activity 7H – Inserting a Graphic for an Image Map(p. 197)
• Activity 7I – Creating a Hotspot (p. 198)
![Page 23: Section 7.1 Identify presentation design principles Use a custom template](https://reader035.fdocuments.net/reader035/viewer/2022062722/568139dd550346895da19252/html5/thumbnails/23.jpg)
Chapter 7
For more resources on this chapter, go to the Introduction to Web Design Web site at webdesign.glencoe.com.
Resources