Chapter 7 More on Links, Layout, and Mobile
Now that you've had some experience coding HTML and CSS, you're ready to explore a variety of techniques in this chapter, including relative hyperlinks and named fragment hyperlinks, CSS sprites, three-column page layout, styling for print, styling for mobile browsers, and configuring CSS3 media queries to target mobile devices.
CSS Sprites
CSS pseudo-classes are used in combination with background images to configure image "rollovers". When using CSS Sprites, you take this a step further: combine all multiple background images in one file and use positioning properties to display the appropriate image. See the following tutorials for an introduction to this popular technique
Web-based sprite generators can help you get up and running with CSS Sprites quickly:
Responsive Web Design and CSS Media Queries
- Ethan Marcotte's Responsive Web Design Article
- Return of the Mobile Stylesheet
- Media Queries Examples
- W3C CSS3 Media Queries
- Sample Media Queries
Desiging for the Mobile Web
- JCPenny and JCPenny Mobile Site
- White House and White House Mobile Site
- W3C Mobile Web Initiative
- W3C Mobile Web Best Practices (MWBP 1.0)
- Flip Carts for MWBP 1.0
- Mobile First
- Mobile Web Development
- Mobile First Helps with Big Issues
- Opera Mini: Web Content Authoring Guidelines
Testing Mobile Display
- Opera Mobile Emulator (Windows Only download and install)
- Mobilizer (Windows and Mac download and install)
- Web-Based Opera Mini 6 Simulator (Runs in a browser window)
- iPhone Emulator (Runs in a browser window)
- iPhoney (Mac only download and install)
- iOS SDK (Mac only)
- Android SDK
Exploring CSS3 & HTML5
Adobe's new resource site, http://theexpressiveweb.com, showcases new HTML5 & CSS3 coding techniques, including CSS3 Animations, CSS3 Media Queries, HTML5 Canvas, Web Storage, and more! The site is organized by coding techniques, called "features" by Adobe — and provides for each feature with an overview, examples, browser support chart, detection and fallback strategies, and list of related Adobe technologies.
Review Activities
Review flash card activities are available for this chapter.
Check your knowledge of chapter terms and concepts.
Chapter Updates
- There are no updates for Chapter 7
Questions or Comments?
The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com