Enviar pesquisa
Carregar
Chapter 7 - Web Design
•
Transferir como PPT, PDF
•
2 gostaram
•
3,715 visualizações
T
tclanton4
Seguir
Chapter 7 Presentation -- Web Design
Leia menos
Leia mais
Educação
Tecnologia
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 20
Baixar agora
Recomendados
Chapter 5 - Web Design
Chapter 5 - Web Design
tclanton4
Chapter 11 - Web Design
Chapter 11 - Web Design
tclanton4
Chapter 4 - Web Design
Chapter 4 - Web Design
tclanton4
Chapter 6 - Web Design
Chapter 6 - Web Design
tclanton4
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Chapter 14 - Web Design
Chapter 14 - Web Design
tclanton4
Chapter 10 - Web Design
Chapter 10 - Web Design
tclanton4
Chapter 1 - Web Design
Chapter 1 - Web Design
tclanton4
Recomendados
Chapter 5 - Web Design
Chapter 5 - Web Design
tclanton4
Chapter 11 - Web Design
Chapter 11 - Web Design
tclanton4
Chapter 4 - Web Design
Chapter 4 - Web Design
tclanton4
Chapter 6 - Web Design
Chapter 6 - Web Design
tclanton4
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Chapter 14 - Web Design
Chapter 14 - Web Design
tclanton4
Chapter 10 - Web Design
Chapter 10 - Web Design
tclanton4
Chapter 1 - Web Design
Chapter 1 - Web Design
tclanton4
Chapter 3 - Web Design
Chapter 3 - Web Design
tclanton4
Chapter5
Chapter5
DeAnna Gossett
Chapter11
Chapter11
DeAnna Gossett
How websites and search engines work
How websites and search engines work
Brian Duffy
How to Create WordPress Website in Easy Steps
How to Create WordPress Website in Easy Steps
Singsys Pte Ltd
Wordcampnigeria
Wordcampnigeria
Aderemi Dadepo
WordPress: An Introduction
WordPress: An Introduction
sounddelivery
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Michelle Ames
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
Gary Bacon
Introduction to WordPress
Introduction to WordPress
R-Cubed Design Forge
Introduction to WordPress
Introduction to WordPress
Michelle Castillo
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
brightrocket
Building a Simple, Responsive Website with ExpressionEngine
Building a Simple, Responsive Website with ExpressionEngine
Ottergoose
Website development accessibility
Website development accessibility
Ilesh Mistry
DigitalInsights-ECM-WordPress-Session
DigitalInsights-ECM-WordPress-Session
Digital Insights - Digital Marketing Agency
Chapter 01
Chapter 01
Long Beach City College
WordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media Institute
Brendan Sera-Shriar
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
Svetlin Nakov
Dreamweaver cs6 step by step
Dreamweaver cs6 step by step
zoran Jelinek
Internet Librarian Slides
Internet Librarian Slides
Polly Farrington
Chapter7
Chapter7
DeAnna Gossett
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
AshleyJovelClavecill
Mais conteúdo relacionado
Mais procurados
Chapter 3 - Web Design
Chapter 3 - Web Design
tclanton4
Chapter5
Chapter5
DeAnna Gossett
Chapter11
Chapter11
DeAnna Gossett
How websites and search engines work
How websites and search engines work
Brian Duffy
How to Create WordPress Website in Easy Steps
How to Create WordPress Website in Easy Steps
Singsys Pte Ltd
Wordcampnigeria
Wordcampnigeria
Aderemi Dadepo
WordPress: An Introduction
WordPress: An Introduction
sounddelivery
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Michelle Ames
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
Gary Bacon
Introduction to WordPress
Introduction to WordPress
R-Cubed Design Forge
Introduction to WordPress
Introduction to WordPress
Michelle Castillo
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
brightrocket
Building a Simple, Responsive Website with ExpressionEngine
Building a Simple, Responsive Website with ExpressionEngine
Ottergoose
Website development accessibility
Website development accessibility
Ilesh Mistry
DigitalInsights-ECM-WordPress-Session
DigitalInsights-ECM-WordPress-Session
Digital Insights - Digital Marketing Agency
Chapter 01
Chapter 01
Long Beach City College
WordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media Institute
Brendan Sera-Shriar
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
Svetlin Nakov
Dreamweaver cs6 step by step
Dreamweaver cs6 step by step
zoran Jelinek
Internet Librarian Slides
Internet Librarian Slides
Polly Farrington
Mais procurados
(20)
Chapter 3 - Web Design
Chapter 3 - Web Design
Chapter5
Chapter5
Chapter11
Chapter11
How websites and search engines work
How websites and search engines work
How to Create WordPress Website in Easy Steps
How to Create WordPress Website in Easy Steps
Wordcampnigeria
Wordcampnigeria
WordPress: An Introduction
WordPress: An Introduction
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
Introduction to WordPress Slides from WordCamp 2012 by Gary A. Bacon
Introduction to WordPress
Introduction to WordPress
Introduction to WordPress
Introduction to WordPress
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
Building a Simple, Responsive Website with ExpressionEngine
Building a Simple, Responsive Website with ExpressionEngine
Website development accessibility
Website development accessibility
DigitalInsights-ECM-WordPress-Session
DigitalInsights-ECM-WordPress-Session
Chapter 01
Chapter 01
WordPress 2.5 Overview - Rich Media Institute
WordPress 2.5 Overview - Rich Media Institute
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
Dreamweaver cs6 step by step
Dreamweaver cs6 step by step
Internet Librarian Slides
Internet Librarian Slides
Semelhante a Chapter 7 - Web Design
Chapter7
Chapter7
DeAnna Gossett
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
AshleyJovelClavecill
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
Mukalele Rogers
Guide Hosting Dictionary
Guide Hosting Dictionary
HostGee.Com , Inc.
Basic Web Concept
Basic Web Concept
JM Ramos
ARTICULOENINGLES
ARTICULOENINGLES
Mónica Sánchez Crisostomo
7 new techniques every web developer should know
7 new techniques every web developer should know
Mitiz Technologies
Intermediate Web Design.doc
Intermediate Web Design.doc
butest
Intermediate Web Design.doc
Intermediate Web Design.doc
butest
Html tutorial 5
Html tutorial 5
Maxie Santos
Html tutorial 5
Html tutorial 5
Maxie Santos
Flex Web Development.pdf
Flex Web Development.pdf
Sonia Simi
Chapter3
Chapter3
DeAnna Gossett
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
SEGIC
Chapter4
Chapter4
DeAnna Gossett
Chapter3
Chapter3
cpashke
Web Design Chapter3
Web Design Chapter3
cpashke
Unit 2.10 - Frames
Unit 2.10 - Frames
Intan Jameel
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
HeroVins
Chapter4
Chapter4
cpashke
Semelhante a Chapter 7 - Web Design
(20)
Chapter7
Chapter7
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
Guide Hosting Dictionary
Guide Hosting Dictionary
Basic Web Concept
Basic Web Concept
ARTICULOENINGLES
ARTICULOENINGLES
7 new techniques every web developer should know
7 new techniques every web developer should know
Intermediate Web Design.doc
Intermediate Web Design.doc
Intermediate Web Design.doc
Intermediate Web Design.doc
Html tutorial 5
Html tutorial 5
Html tutorial 5
Html tutorial 5
Flex Web Development.pdf
Flex Web Development.pdf
Chapter3
Chapter3
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
Chapter4
Chapter4
Chapter3
Chapter3
Web Design Chapter3
Web Design Chapter3
Unit 2.10 - Frames
Unit 2.10 - Frames
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
Chapter4
Chapter4
Mais de tclanton4
Chapter 12 - Web Design
Chapter 12 - Web Design
tclanton4
Chapter 9 - Web Design
Chapter 9 - Web Design
tclanton4
Chapter 8 - Web Design
Chapter 8 - Web Design
tclanton4
Base2
Base2
tclanton4
Base1
Base1
tclanton4
Impress
Impress
tclanton4
Project Mgt
Project Mgt
tclanton4
Charts in Calc
Charts in Calc
tclanton4
Formatting a Worksheet in Calc
Formatting a Worksheet in Calc
tclanton4
Creating a Worksheet in Calc
Creating a Worksheet in Calc
tclanton4
Advanced Features of Writer
Advanced Features of Writer
tclanton4
Creating a Writer Document
Creating a Writer Document
tclanton4
Formatting Features of Writer
Formatting Features of Writer
tclanton4
Getting Started - The Basics
Getting Started - The Basics
tclanton4
Intro to Information Systems
Intro to Information Systems
tclanton4
Unit 04 PowerPoint (WebA)
Unit 04 PowerPoint (WebA)
tclanton4
Mais de tclanton4
(16)
Chapter 12 - Web Design
Chapter 12 - Web Design
Chapter 9 - Web Design
Chapter 9 - Web Design
Chapter 8 - Web Design
Chapter 8 - Web Design
Base2
Base2
Base1
Base1
Impress
Impress
Project Mgt
Project Mgt
Charts in Calc
Charts in Calc
Formatting a Worksheet in Calc
Formatting a Worksheet in Calc
Creating a Worksheet in Calc
Creating a Worksheet in Calc
Advanced Features of Writer
Advanced Features of Writer
Creating a Writer Document
Creating a Writer Document
Formatting Features of Writer
Formatting Features of Writer
Getting Started - The Basics
Getting Started - The Basics
Intro to Information Systems
Intro to Information Systems
Unit 04 PowerPoint (WebA)
Unit 04 PowerPoint (WebA)
Último
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
RaunakKeshri1
9548086042 for call girls in Indira Nagar with room service
9548086042 for call girls in Indira Nagar with room service
discovermytutordmt
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
sanyamsingh5019
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
Thiyagu K
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
SafetyChain Software
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Sapana Sha
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
SoniaTolstoy
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
anjaliyadav012327
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
Chameera Dedduwage
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
Sayali Powar
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
chloefrazer622
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
TechSoup
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
FatimaKhan178732
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
nomboosow
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
VS Mahajan Coaching Centre
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
Dr. Mazin Mohamed alkathiri
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
RAM LAL ANAND COLLEGE, DELHI UNIVERSITY.
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
Disha Kariya
Último
(20)
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
9548086042 for call girls in Indira Nagar with room service
9548086042 for call girls in Indira Nagar with room service
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
Chapter 7 - Web Design
1.
Copyright © Terry
Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1Copyright © Terry Felke-Morris
2.
Copyright © Terry
Felke-Morris LEARNING OUTCOMES In this chapter, you will learn how to ... Code relative hyperlinks to web pages in folders within a website Configure a hyperlink to a named fragment internal to a web page Configure images with CSS sprites Configure a three-column page layout using CSS Configure CSS for printing Configure CSS for mobile display Utilize CSS3 media queries to target mobile devices 2
3.
Copyright © Terry
Felke-Morris MORE ON RELATIVE LINKING <a href="contact.html">Contact</a> <a href="products/collars.html">Collars</a> <a href="../index.html">Home</a> <a href="../services/bathing.html">Dog Bathing</a> 3 Relative links from the home page: index.html
4.
Copyright © Terry
Felke-Morris OPENING A LINK IN A NEW BROWSER WINDOW The target attribute on the anchor element opens a link in a new browser window or new browser tab. <a href="http://yahoo.com" target="_blank">Yahoo!</a> 4
5.
Copyright © Terry
Felke-Morris HTML LINKING TO FRAGMENT IDENTIFIERS A link to a part of a web page Also called named fragments, fragment ids Two components: 1. The element that identifies the named fragment of a web page.This requires the id attribute. <div id=“top”> ….. </div> 2.The anchor tag that links to the named fragment of a web page.This uses the href attribute. <a href=“#top”>Back to Top</a> 5 Note the use of the # in the anchor tag!
6.
Copyright © Terry
Felke-Morris HTML5 BLOCK ANCHOR Configure block display elements within a hyperlink <a href="http://www.w3.org/TR/html-markup"> <h1>HTML5 Reference</h1> <p>Bookmark this site for a handy HTML5 reference.</p> </a> 6
7.
Copyright © Terry
Felke-Morris TELEPHONE & TEXT MESSAGE HYPERLINKS Telephone Scheme <a href="tel:888-555-5555">Call 888-555-5555</a> Many mobile browsers will initiate a phone call when the hyperlink is clicked. SMS Scheme <a href="sms:888-555-5555">Text 888-555-5555</a> Many mobile browsers will initiate a text message to the phone number when the hyperlink is clicked. 7
8.
Copyright © Terry
Felke-Morris CSS SPRITES Sprite an image file that contains multiple small graphics advantage: saves download time 8
9.
Copyright © Terry
Felke-Morris CHECKPOINT 1. Describe a reason to organize the files in a website using folders and subfolders. 2. Which attribute configures a hyperlink to open the file in a new browser window or tab? 3. State an advantage of using CSS sprites in a website.
10.
Copyright © Terry
Felke-Morris THREE COLUMN PAGE LAYOUT A common web page layout consists of a header across the top of the page with three columns below: navigation, content, and sidebar. 10
11.
Copyright © Terry
Felke-Morris THREE COLUMN LAYOUT container sets default background color, text color, font typeface, and a minimum width Left-column navigation float: left; width:150px; Right-column content float: right; width: 200px; Center column Uses the remaining screen room available room after the floating columns display margin: 0 210px 0 160px; Footer – clears the float clear: both; 11
12.
Copyright © Terry
Felke-Morris CSS STYLING FOR PRINT Create an external style sheet with the configurations for browser display. Create a second external style sheet with the configurations for printing. Connect both of the external style sheets to the web page using two <link > elements. 12 <link rel="stylesheet" href="wildflower.css" type="text/css" media="screen"> <link rel="stylesheet" href="wildflowerprint.css" type="text/css" media="print">
13.
Copyright © Terry
Felke-Morris PRINT STYLING BEST PRACTICES Hide non-essential content Example: #nav { display: none; } Configure font size and color for printing Use pt font sizes, use dark text color Control page breaks Example: .newpage { page-break-before: always; } Print URLs for hyperlinks Example: #sidebar a:after { content: " (" attr(href) ") "; } 13
14.
Copyright © Terry
Felke-Morris MOBILE WEB DESIGN BEST PRACTICES eMarketer.com predicts 134.3 million mobile Internet users by 2013 ( http://www.emarketer.com/articles/print.aspx?1007236) Three Approaches to Mobile Web: ◦ Develop a new mobile site with a .mobi TLD ◦ Create a separate website hosted within your current domain targeted for mobile users ◦ Use CSS to configure your current website for display on both mobile and desktop devices.
15.
Copyright © Terry
Felke-Morris MOBILE WEB LIMITATIONS Small Screen Size Low bandwidth Limited fonts Limited color Awkward controls Lack of Flash support Limited processor and memory Cost per kilobyte
16.
Copyright © Terry
Felke-Morris DESIGN TECHNIQUES FOR MOBILE WEB Single column design Avoid floats, tables, frames Descriptive page title Descriptive heading tags Optimize images Descriptive alt text for images Eliminate unneeded images Navigation in lists Em or percentage font size units Common font typefaces Good contrast between text and background colors Provide “Skip to Content” hyperlink Provide “Back toTop” hyperlink
17.
Copyright © Terry
Felke-Morris VIEWPORT META TAG Default action for most mobile devices is to zoom out and scale the web page Viewport MetaTag Created as an Apple extension to configure display on mobile devices Configures width and initial scale of browser viewport <meta name="viewport" content="width=device-width,initial-scale=1.0"> 17
18.
Copyright © Terry
Felke-Morris CSS3 MEDIA QUERIES Media Query Determines the capability of the mobile device, such as screen resolution Directs the browser to styles configured specifically for those capabilities Example: <link href="lighthousemobile.css" rel="stylesheet" media="only screen and (max-device-width: 480px)"> 18
19.
Copyright © Terry
Felke-Morris CHECKPOINT 1. Describe a design consideration when configuring a web page for mobile display. 2. True of False.The media="handheld" attribute reliably targets mobile devices. 19
20.
Copyright © Terry
Felke-Morris SUMMARY This chapter introduced you to a variety of topics related to hyperlinks, page layout, and designing for the mobile web. 20
Baixar agora