2015
Lynda
Chris Converse
2:20
English
Discover how to make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site. The course takes the site from start-to-finish, from comping your ideas in Photoshop, to setting up the HTML page and containers, to styling established elements for small, medium, and large screens. In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images. Plus, learn how to replace graphics with high-resolution versions for Retina displays using CSS media queries.
This course was created and produced by Chris Converse. lynda.com is honored to host this training in our library.
Introduction
Previewing the final project
About the exercise files
Exploring the software you'll need to complete this course
Beginning your project
1. For Those Using Dreamweaver
What to expect with Design view in Dreamweaver
Accessing code for HTML and CSS in Dreamweaver
2. Setting Up Your Project
Planning your layout
Adding the main HTML containers
Adding the promo containers
Adding links and the copyright
Adding sample content into the HTML containers
3. Creating Web Graphics
Creating and slicing multiple-sized banner images
Exporting content and template artwork
4. Preparing the HTML File
Linking CSS files for all screen sizes
Linking CSS files based on screen size with media queries
Enabling Internet Explorer 7 and 8 to understand HTML5
Setting the viewport scale
5. Creating CSS Rules Across All Screens
Adding the background pattern and the page container color
Styling the headings
Styling the body text and the links
Styling the footer
6. Preparing the HTML File
Understanding compound rules
Styling the promo links with a CSS sprite
Styling the promo text
Adding the promo images with CSS
7. Creating the Content and the Layout Containers
Adding CSS rules for layout
Styling the header on large screens
Styling the article on large screens
8. Styling the Promos
Styling the navigation links
Styling the navigation for large screens
Positioning the navigation for large screens
Clearing the float for the promos
9. Working with CSS Rules
Adding CSS rules with inline media queries
10. Styling for Medium Screens
Styling the header for medium screens
Styling the navigation for medium screens
Styling the promos for medium screens
11. Styling for Small Screens
Styling the header for small screens
Styling the navigation for small screens
Styling the navigation links for small screens
Styling the promos for small screens
Styling the footer for small screens
12. Supporting High-Definition (Retina) Screens
Additional exercise files for this chapter
Creating double-sized graphics for high-definition screens
Replacing the promo graphics with CSS media queries
Replacing the logo and banner graphics with CSS media queries
13. Creating Markup and Styles for Print
Additional exercise files for this chapter
Creating graphics optimized for printing
Including additional content for printed pages
Creating print-friendly CSS rules
Revealing hyperlink URLs for a printed page
Redefining the promo and footer styles
Background images vs. image tags
Image option one: Using background images
Image option two: Adding image tags
Adding CSS page breaks
Conclusion
Where to go from here
lynda.com
Download File Size:647 MB
|
