Enviar búsqueda
Cargar
Intro to Web Design 6e Chapter 4
•
Descargar como PPTX, PDF
•
1 recomendación
•
319 vistas
S
Steve Guinan
Seguir
Intro to Web Design 6e Chapter 4
Leer menos
Leer más
Educación
Denunciar
Compartir
Denunciar
Compartir
1 de 50
Descargar ahora
Recomendados
Intro to Web Design 6e Chapter 7
Intro to Web Design 6e Chapter 7
Steve Guinan
Intro to Web Design 6e Chapter 5
Intro to Web Design 6e Chapter 5
Steve Guinan
Intro to Web Design 6e Chapter 2
Intro to Web Design 6e Chapter 2
Steve Guinan
Intro to Web Design 6e Chapter 1
Intro to Web Design 6e Chapter 1
Steve Guinan
Intro to Web Design 6e Chapter 6
Intro to Web Design 6e Chapter 6
Steve Guinan
Intro to Web Design 6e Chapter 3
Intro to Web Design 6e Chapter 3
Steve Guinan
Ch 3: Big Concepts
Ch 3: Big Concepts
Steve Guinan
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
Steve Guinan
Recomendados
Intro to Web Design 6e Chapter 7
Intro to Web Design 6e Chapter 7
Steve Guinan
Intro to Web Design 6e Chapter 5
Intro to Web Design 6e Chapter 5
Steve Guinan
Intro to Web Design 6e Chapter 2
Intro to Web Design 6e Chapter 2
Steve Guinan
Intro to Web Design 6e Chapter 1
Intro to Web Design 6e Chapter 1
Steve Guinan
Intro to Web Design 6e Chapter 6
Intro to Web Design 6e Chapter 6
Steve Guinan
Intro to Web Design 6e Chapter 3
Intro to Web Design 6e Chapter 3
Steve Guinan
Ch 3: Big Concepts
Ch 3: Big Concepts
Steve Guinan
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
Steve Guinan
Online tools for Content Development
Online tools for Content Development
adrianlaranjo111
Module 4 -presentation_slides
Module 4 -presentation_slides
QueenestylDalumbar
Planning Site Navigation
Planning Site Navigation
Mukesh Tekwani
CIS1203 Web Design Principles - Part 1
CIS1203 Web Design Principles - Part 1
Ross University School of Medicine
Web design content
Web design content
MrCHenderson
International SEO: How to Establish a Global Web Presence with a Localized Feel
International SEO: How to Establish a Global Web Presence with a Localized Feel
BusinessOnline
Chapter 23: Web Images
Chapter 23: Web Images
Steve Guinan
Not Just Video—VideoSEO
Not Just Video—VideoSEO
BusinessOnline
Chapter 7: Images
Chapter 7: Images
Steve Guinan
Tapping Into The SEO Goldmine - The Customer Network
Tapping Into The SEO Goldmine - The Customer Network
BusinessOnline
Etec 632 web design
Etec 632 web design
ahalemano
The SEO Value of Social Media
The SEO Value of Social Media
BusinessOnline
CIS1203 Web Design Principles - Part 2
CIS1203 Web Design Principles - Part 2
Ross University School of Medicine
Ppt ch07
Ppt ch07
1geassking
1WebDesign6EChapter1TheEnvironmentandtheTools.docx
1WebDesign6EChapter1TheEnvironmentandtheTools.docx
lorainedeserre
Sql9e ppt ch07
Sql9e ppt ch07
Dr. Ahmed Al Zaidy
chapter-02.pptx
chapter-02.pptx
YantiAndriyani3
Access 2016 module 2 ppt presentation
Access 2016 module 2 ppt presentation
dgdotson
ITEC 1010
ITEC 1010
Logeethan Thirukailayanathan
DC18_FOWD - HTML.pptx
DC18_FOWD - HTML.pptx
WalidBasemAbdelfatta
Chapter 4-Organizational Capability Structure, Culture, and Roles.pptx
Chapter 4-Organizational Capability Structure, Culture, and Roles.pptx
harlicks200
BSAD 372 SPRING 2017 CH 9
BSAD 372 SPRING 2017 CH 9
Janice Robinson
Más contenido relacionado
La actualidad más candente
Online tools for Content Development
Online tools for Content Development
adrianlaranjo111
Module 4 -presentation_slides
Module 4 -presentation_slides
QueenestylDalumbar
Planning Site Navigation
Planning Site Navigation
Mukesh Tekwani
CIS1203 Web Design Principles - Part 1
CIS1203 Web Design Principles - Part 1
Ross University School of Medicine
Web design content
Web design content
MrCHenderson
International SEO: How to Establish a Global Web Presence with a Localized Feel
International SEO: How to Establish a Global Web Presence with a Localized Feel
BusinessOnline
Chapter 23: Web Images
Chapter 23: Web Images
Steve Guinan
Not Just Video—VideoSEO
Not Just Video—VideoSEO
BusinessOnline
Chapter 7: Images
Chapter 7: Images
Steve Guinan
Tapping Into The SEO Goldmine - The Customer Network
Tapping Into The SEO Goldmine - The Customer Network
BusinessOnline
Etec 632 web design
Etec 632 web design
ahalemano
The SEO Value of Social Media
The SEO Value of Social Media
BusinessOnline
CIS1203 Web Design Principles - Part 2
CIS1203 Web Design Principles - Part 2
Ross University School of Medicine
Ppt ch07
Ppt ch07
1geassking
La actualidad más candente
(14)
Online tools for Content Development
Online tools for Content Development
Module 4 -presentation_slides
Module 4 -presentation_slides
Planning Site Navigation
Planning Site Navigation
CIS1203 Web Design Principles - Part 1
CIS1203 Web Design Principles - Part 1
Web design content
Web design content
International SEO: How to Establish a Global Web Presence with a Localized Feel
International SEO: How to Establish a Global Web Presence with a Localized Feel
Chapter 23: Web Images
Chapter 23: Web Images
Not Just Video—VideoSEO
Not Just Video—VideoSEO
Chapter 7: Images
Chapter 7: Images
Tapping Into The SEO Goldmine - The Customer Network
Tapping Into The SEO Goldmine - The Customer Network
Etec 632 web design
Etec 632 web design
The SEO Value of Social Media
The SEO Value of Social Media
CIS1203 Web Design Principles - Part 2
CIS1203 Web Design Principles - Part 2
Ppt ch07
Ppt ch07
Similar a Intro to Web Design 6e Chapter 4
1WebDesign6EChapter1TheEnvironmentandtheTools.docx
1WebDesign6EChapter1TheEnvironmentandtheTools.docx
lorainedeserre
Sql9e ppt ch07
Sql9e ppt ch07
Dr. Ahmed Al Zaidy
chapter-02.pptx
chapter-02.pptx
YantiAndriyani3
Access 2016 module 2 ppt presentation
Access 2016 module 2 ppt presentation
dgdotson
ITEC 1010
ITEC 1010
Logeethan Thirukailayanathan
DC18_FOWD - HTML.pptx
DC18_FOWD - HTML.pptx
WalidBasemAbdelfatta
Chapter 4-Organizational Capability Structure, Culture, and Roles.pptx
Chapter 4-Organizational Capability Structure, Culture, and Roles.pptx
harlicks200
BSAD 372 SPRING 2017 CH 9
BSAD 372 SPRING 2017 CH 9
Janice Robinson
Create Engaging Branded SharePoint Portals and Plan for Content
Create Engaging Branded SharePoint Portals and Plan for Content
Cathy Dew
JNTU 4 Ps Marketing Strategy Presentation.docx
JNTU 4 Ps Marketing Strategy Presentation.docx
write4
Check Your Understanding (40) Approx. 400 words1. Distinguish .docx
Check Your Understanding (40) Approx. 400 words1. Distinguish .docx
mccormicknadine86
BSAD 372 SPRING 2017 CH 3
BSAD 372 SPRING 2017 CH 3
Janice Robinson
Access 2016 module 4 ppt presentation
Access 2016 module 4 ppt presentation
dgdotson
Power point 2016 module 1 ppt presentation
Power point 2016 module 1 ppt presentation
dgdotson
9781337102087 ppt ch17
9781337102087 ppt ch17
Terry Yoast
Coronel_DatabaseSystems_13e_ch02.pptx
Coronel_DatabaseSystems_13e_ch02.pptx
rmzx1989
Websites
Websites
Ramakrishna Kongalla
Power point 2016 module 4 ppt presentation
Power point 2016 module 4 ppt presentation
dgdotson
Chapter 11 Authentication and Account Management
Chapter 11 Authentication and Account Management
Dr. Ahmed Al Zaidy
Word 2016 module 2 ppt presentation
Word 2016 module 2 ppt presentation
dgdotson
Similar a Intro to Web Design 6e Chapter 4
(20)
1WebDesign6EChapter1TheEnvironmentandtheTools.docx
1WebDesign6EChapter1TheEnvironmentandtheTools.docx
Sql9e ppt ch07
Sql9e ppt ch07
chapter-02.pptx
chapter-02.pptx
Access 2016 module 2 ppt presentation
Access 2016 module 2 ppt presentation
ITEC 1010
ITEC 1010
DC18_FOWD - HTML.pptx
DC18_FOWD - HTML.pptx
Chapter 4-Organizational Capability Structure, Culture, and Roles.pptx
Chapter 4-Organizational Capability Structure, Culture, and Roles.pptx
BSAD 372 SPRING 2017 CH 9
BSAD 372 SPRING 2017 CH 9
Create Engaging Branded SharePoint Portals and Plan for Content
Create Engaging Branded SharePoint Portals and Plan for Content
JNTU 4 Ps Marketing Strategy Presentation.docx
JNTU 4 Ps Marketing Strategy Presentation.docx
Check Your Understanding (40) Approx. 400 words1. Distinguish .docx
Check Your Understanding (40) Approx. 400 words1. Distinguish .docx
BSAD 372 SPRING 2017 CH 3
BSAD 372 SPRING 2017 CH 3
Access 2016 module 4 ppt presentation
Access 2016 module 4 ppt presentation
Power point 2016 module 1 ppt presentation
Power point 2016 module 1 ppt presentation
9781337102087 ppt ch17
9781337102087 ppt ch17
Coronel_DatabaseSystems_13e_ch02.pptx
Coronel_DatabaseSystems_13e_ch02.pptx
Websites
Websites
Power point 2016 module 4 ppt presentation
Power point 2016 module 4 ppt presentation
Chapter 11 Authentication and Account Management
Chapter 11 Authentication and Account Management
Word 2016 module 2 ppt presentation
Word 2016 module 2 ppt presentation
Más de Steve Guinan
Chapter 18: Transitions, Transforms, and Animation
Chapter 18: Transitions, Transforms, and Animation
Steve Guinan
Chapter 15: Floating and Positioning
Chapter 15: Floating and Positioning
Steve Guinan
Chapter 9: Forms
Chapter 9: Forms
Steve Guinan
Chapter 8: Tables
Chapter 8: Tables
Steve Guinan
Chapter 14: Box Model
Chapter 14: Box Model
Steve Guinan
Chapter 13: Colors and Backgrounds
Chapter 13: Colors and Backgrounds
Steve Guinan
Chapter 12: CSS Part 2
Chapter 12: CSS Part 2
Steve Guinan
Chapter 11: Intro to CSS
Chapter 11: Intro to CSS
Steve Guinan
HubSpot Student Instructions
HubSpot Student Instructions
Steve Guinan
Ch 6: Links
Ch 6: Links
Steve Guinan
Ch 5: Marking up Text
Ch 5: Marking up Text
Steve Guinan
Ch 2: How the Web Works
Ch 2: How the Web Works
Steve Guinan
Ch 1: Getting Started
Ch 1: Getting Started
Steve Guinan
Internet Search Presentation
Internet Search Presentation
Steve Guinan
Elements of Design
Elements of Design
Steve Guinan
Design Principles
Design Principles
Steve Guinan
HTML5 &CSS: Chapter 08
HTML5 &CSS: Chapter 08
Steve Guinan
HTML & CSS: Chapter 07
HTML & CSS: Chapter 07
Steve Guinan
HTML & CSS: Chapter 06
HTML & CSS: Chapter 06
Steve Guinan
HTML & CSS: Chapter 05
HTML & CSS: Chapter 05
Steve Guinan
Más de Steve Guinan
(20)
Chapter 18: Transitions, Transforms, and Animation
Chapter 18: Transitions, Transforms, and Animation
Chapter 15: Floating and Positioning
Chapter 15: Floating and Positioning
Chapter 9: Forms
Chapter 9: Forms
Chapter 8: Tables
Chapter 8: Tables
Chapter 14: Box Model
Chapter 14: Box Model
Chapter 13: Colors and Backgrounds
Chapter 13: Colors and Backgrounds
Chapter 12: CSS Part 2
Chapter 12: CSS Part 2
Chapter 11: Intro to CSS
Chapter 11: Intro to CSS
HubSpot Student Instructions
HubSpot Student Instructions
Ch 6: Links
Ch 6: Links
Ch 5: Marking up Text
Ch 5: Marking up Text
Ch 2: How the Web Works
Ch 2: How the Web Works
Ch 1: Getting Started
Ch 1: Getting Started
Internet Search Presentation
Internet Search Presentation
Elements of Design
Elements of Design
Design Principles
Design Principles
HTML5 &CSS: Chapter 08
HTML5 &CSS: Chapter 08
HTML & CSS: Chapter 07
HTML & CSS: Chapter 07
HTML & CSS: Chapter 06
HTML & CSS: Chapter 06
HTML & CSS: Chapter 05
HTML & CSS: Chapter 05
Último
9548086042 for call girls in Indira Nagar with room service
9548086042 for call girls in Indira Nagar with room service
discovermytutordmt
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
chloefrazer622
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
christianmathematics
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
Jayanti Pande
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
Janet Corral
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
chloefrazer622
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
nomboosow
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
dawncurless
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
Thiyagu K
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
TeacherCyreneCayanan
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
AyushMahapatra5
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
SoniaTolstoy
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
eniolaolutunde
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
VishalSingh1417
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
pragatimahajan3
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
EduSkills OECD
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
misteraugie
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
Maestría en Comunicación Digital Interactiva - UNR
Último
(20)
9548086042 for call girls in Indira Nagar with room service
9548086042 for call girls in Indira Nagar with room service
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
Intro to Web Design 6e Chapter 4
1.
1 Web Design 6e Chapter
4: Planning a Successful Website: Part 2 © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
2.
2 Chapter Objectives •Discuss the
relationship between page length, content placement, and usability •Complete Step 4: Specify the website’s navigation system •Complete Step 5: Design the look and feel of the website •Complete Step 6: Test, publish, and maintain the website •Use a checklist to review your web design plan © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
3.
3 Page Length, Content
Placement, and Usability (1 of 5) •The initial, visible screen area is extremely valuable space •Screen resolution and size determine how much of a page is visible •Place the most critical information above and to the left of the potential scroll zones • Avoid a cluttered appearance • Follow the same guidelines on subsidiary pages © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
4.
4 Page Length, Content
Placement, and Usability (2 of 5) •To help prevent webpage scrolling, use: • Carousels • Card layouts • Slide shows •These may affect SEO © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
5.
5 Page Length, Content
Placement, and Usability (3 of 5) •Eye-tracking studies use various technologies to produce heat maps that represent data using color • A website’s visitors typically first look at the top and left areas of a page, and then look down and to the right •Eye-tracking heat maps are created by analyzing the movement of a visitor’s eyes as he or she views a webpage © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
6.
6 Page Length, Content
Placement, and Usability (4 of 5) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
7.
7 Page Length, Content
Placement, and Usability (5 of 5) •When designing a webpage, you need to decide how to manage page width • Fixed-width page • Liquid or flexible page layout • Hybrid page layout © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
8.
8 Step 4: Specify
the Website’s Navigation System (1 of 2) •A navigation system that is easy for visitors to understand and follow will draw them deeper into your website to view detail pages with content that can satisfy their needs and expectations • User-based navigation system • User-controlled navigation system © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
9.
9 Step 4: Specify
the Website’s Navigation System (2 of 2) •A navigation system that is easy for visitors to understand and follow will draw them deeper into your website to view detail pages with content that can satisfy their needs and expectations •Include a search capability •Keep in mind needs of touch screen users © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
10.
10 Link Types •Text links •Hidden
links •Image links •Related link groups •Breadcrumb trails © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
11.
11 WAI link and
navigation guidelines •WAI: Web Accessibility Initiative • Identify the target clearly • Do not use color alone to indicate links • Group related links together in navigation bars © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
12.
12 User-Based and User-Controlled
Navigation •User-based navigation • Based on visitors’ needs rather than publishers’ needs • Use target audience profile • UX •User-controlled navigation • Allows visitors to move around a website in a manner they choose •Include navigation back to home page on all subsidiary pages © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
13.
13 Text Links (1
of 2) •Text links are hyperlinks based on a word or words in an HTML document • Clearly identify target -Use a tooltip • Use existing text flow • Avoid phrases such as click here • Include formatting and color • Use color to indicate clicked links • Be consistent © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
14.
14 Text Links (2
of 2) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
15.
15 Hidden Links •Off-canvas or
hamburger menus • Pro: Saves screen space • Con: Visitors might not see them •Rollover links © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
16.
16 Image Links •Illustrations or
photographs •Image map • Image with hot spots © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
17.
17 Navigation Areas (1
of 4) •Group related links into a navigation areas • Menus -List of related links -Pop-out menus • Bars -Graphic buttons represent links -Drop-down menu • Tabs -Links as small tabs © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
18.
18 Navigation Areas (2
of 4) •Pop-out menu © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
19.
19 Navigation Areas (3
of 4) •Navigation bar © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
20.
20 Navigation Areas (4
of 4) •Tab with drop-down menu © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
21.
21 Breadcrumb Trails •A breadcrumb
trail is a hierarchical outline or horizontal list that shows a visitor the path he or she has taken from the home page to the currently viewed page © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
22.
22 Search Capability (1
of 2) •A website search feature is another popular navigation tool for websites with a large number of pages •A hosted website search provider is a third-party company that uses spiders or other tools to build a searchable index of your website’s pages and then hosts the index on their servers •Website index: summary of links to major pages •Autocomplete: Predicts search terms as a visitor enters keywords © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
23.
23 Search Capability (2
of 2) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
24.
24 Levels of Navigation
(1 of 2) •Primary • Overview of website •Local or subsidiary • Within an area of the website •Contextual • Specific to content being viewed •Adaptive • Links that use visitors’ history © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
25.
25 Levels of Navigation
(2 of 2) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
26.
26 Step 5: Design
the Look and Feel of the Website •The look of a website is the combination of design aspects •The feel of a website is the behavior of its elements • Navigation • Animation •Together, the look and feel are the emotion or reaction of visitors © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
27.
27 Visual Consistency (1
of 2) •Create visual consistency by repeating design elements across all pages • Font and typeface • Content position • Color scheme • Placement of name, logo, navigation © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
28.
28 Visual Consistency (2
of 2) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
29.
29 Color and Visual
Contrast (1 of 5) •Color schemes create unity •Apply color scheme to the background, graphic art and illustrations, and text across all pages •Choose background and text colors to provide sufficient contrast •Choose graphics that match your color scheme © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
30.
30 Color and Visual
Contrast (2 of 5) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
31.
31 Color and Visual
Contrast (3 of 5) •Color can: • Evoke mood • Stimulate interest • Support a website’s purpose • Meet audience expectations © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
32.
32 Color and Visual
Contrast (4 of 5) •Consistency tools: • Templates • Web design tools • Color schemes • Color-matching software © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
33.
33 Color and Visual
Contrast (5 of 5) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
34.
34 CSS and Formatting
(1 of 4) •The CSS specification allows web designers to use a text document, called a style sheet, to control the appearance of one or more pages at a website •Styles can create visual consistency •Style rules are specifications that define: • One or more formatting properties -Declarations • For specific HTML tags -Selectors © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
35.
35 CSS and Formatting
(2 of 4) •Inline Style • Inserted within a tag •Internal Style Sheet • Inserted within a page’s heading tags •External Style Sheet • Saved in a folder with the website’s pages and linked to them with HTML tag © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
36.
36 CSS and Formatting
(3 of 4) •If you make a change to a style sheet, all webpages that use the style sheet are updated • Can use CSS editor software •CSS prioritizes size rules: • Inline styles • Internal and external style sheets • Default styles specified by browser © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
37.
37 CSS and Formatting
(4 of 4) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
38.
38 Page Layout (1
of 2) •Can ensure visual consistency across a website’s pages •Standardize layout •Use layout grids and CSS •Wireframing plans arrangement of page elements • Separates page layout and functionality from design • UX • Sketch or blueprint © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
39.
39 Page Layout (2
of 2) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
40.
40 Layout Grids (1
of 2) •Underlying structure of rows and columns •Allows you to precisely position and align page content •Fluid grid layouts based on percentage of screen •Responsive grid layouts use a combination of percentages and fixed limits © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
41.
41 Layout Grids (2
of 2) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
42.
42 CSS and Page
Layout (1 of 3) •Style sheets can also be used to control page layout by dividing a page into sections, such as a header section or a navigation section © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
43.
43 CSS and Page
Layout (2 of 3) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
44.
44 CSS and Page
Layout (3 of 3) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
45.
45 Step 6: Test,
Publish, and Maintain the Website •Include the following in your website plan: • How you will test the website • How you will publish the website • Where you will host it • How you will maintain and update the website © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
46.
46 Testing •A formal website
usability test is an evaluation that generally takes place in a structured environment, such as a testing laboratory •Create a website that meets the needs of your hosting service • Internal or external hosting vendor • Size limits • Update frequency • Person in charge of updating • Budget restrictions © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
47.
47 Publishing and Maintaining
(1 of 2) •Include these in your plan to ensure your website: • Meets the needs of your hosting service • Can be updated to keep the content relevant. © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
48.
48 Publishing and Maintaining
(2 of 2) © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
49.
49 Site Plan Checklist •Identify
the website’s purpose and target audience •Determine the website’s general content •Select the website’s structure •Specify the website’s navigation system •Design the look and feel of the website •Test, publish, and maintain the website © 2018 Cengage. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use.
50.
50© 2018 Cengage.
All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part, except for use as permitted in a license distributed with a certain product or service or otherwise on a password-protected website for classroom use. Chapter Summary •Discuss the relationship between page length, content placement, and usability •Complete Step 4: Specify the website’s navigation system •Complete Step 5: Design the look and feel of the website •Complete Step 6: Test, publish, and maintain the website •Use a checklist to review your web design plan
Descargar ahora