Copyright © Terry Felke-Morris
WEB DEVELOPMENT & DESIGN
FOUNDATIONS WITH HTML5
Chapter 7
Key Concepts
1Copyright © Terry F...
Copyright © Terry Felke-Morris
LEARNING
OUTCOMES
In this chapter, you will learn how to ...
Code relative hyperlinks to w...
Copyright © Terry Felke-Morris
MORE ON
RELATIVE LINKING
<a href="contact.html">Contact</a>
<a href="products/collars.html"...
Copyright © Terry Felke-Morris
OPENING A LINK
IN A NEW BROWSER WINDOW
 The target attribute on the anchor element opens
a...
Copyright © Terry Felke-Morris
HTML LINKING TO FRAGMENT IDENTIFIERS
A link to a part of a web page
Also called named fra...
Copyright © Terry Felke-Morris
HTML5 BLOCK ANCHOR
 Configure block display elements within a hyperlink
<a href="http://ww...
Copyright © Terry Felke-Morris
TELEPHONE & TEXT MESSAGE
HYPERLINKS
 Telephone Scheme
<a href="tel:888-555-5555">Call 888-...
Copyright © Terry Felke-Morris
CSS SPRITES
 Sprite
 an image file that contains multiple small graphics
 advantage: sav...
Copyright © Terry Felke-Morris
CHECKPOINT
1. Describe a reason to organize the files in a website using
folders and subfol...
Copyright © Terry Felke-Morris
THREE COLUMN
PAGE LAYOUT
A common web page layout consists of a header across
the top of th...
Copyright © Terry Felke-Morris
THREE COLUMN
LAYOUT
 container sets default background
color, text color, font typeface, a...
Copyright © Terry Felke-Morris
CSS STYLING FOR PRINT
 Create an external style sheet with the configurations
for browser ...
Copyright © Terry Felke-Morris
PRINT STYLING BEST PRACTICES
 Hide non-essential content
Example:
#nav { display: none; }
...
Copyright © Terry Felke-Morris
MOBILE WEB DESIGN BEST PRACTICES
eMarketer.com predicts 134.3 million
mobile Internet user...
Copyright © Terry Felke-Morris
MOBILE WEB LIMITATIONS
 Small Screen Size
 Low bandwidth
 Limited fonts
 Limited color
...
Copyright © Terry Felke-Morris
DESIGN TECHNIQUES FOR MOBILE WEB
 Single column design
 Avoid floats, tables, frames
 De...
Copyright © Terry Felke-Morris
VIEWPORT META TAG
 Default action for most mobile devices
is to zoom out and scale the web...
Copyright © Terry Felke-Morris
CSS3 MEDIA QUERIES
 Media Query
 Determines the capability of the mobile
device, such as ...
Copyright © Terry Felke-Morris
CHECKPOINT
1. Describe a design consideration when configuring a web
page for mobile displa...
Copyright © Terry Felke-Morris
SUMMARY
 This chapter introduced you to a variety
of topics related to hyperlinks, page la...
Upcoming SlideShare
Loading in …5
×

Chapter 7 - Web Design

3,246 views

Published on

Chapter 7 Presentation -- Web Design

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,246
On SlideShare
0
From Embeds
0
Number of Embeds
505
Actions
Shares
0
Downloads
97
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Chapter 7 - Web Design

  1. 1. Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1Copyright © Terry Felke-Morris
  2. 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. 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. 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. 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. 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. 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. 8. Copyright © Terry Felke-Morris CSS SPRITES  Sprite  an image file that contains multiple small graphics  advantage: saves download time 8
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×