2012
Lynda.com
James Williamson
~9h
English
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
Topics include:
- Reviewing the box model
- Calculating em and percentage values
- Controlling how elements display
- Creating fixed, fluid, and responsive layouts
- Structuring content with HTML5
- Floating elements
- Using relative, absolute, or fixed positioning
- Defining column spacing
- Creating grid-based assets and layouts
- Considering mobile-design-specific issues
- Working with multi-column text
- Enhancing page design CSS Sprites
Introduction
Welcome 00m 54s
How to use the exercise files 03m 26s
1. Layout Basics 01h 39m
Box model review 08m 47s
Calculating element dimensions 11m 11s
Understanding margin collapse 07m 59s
Calculating em values 07m 41s
Calculating percentage values 07m 51s
Normal document flow 13m 03s
Controlling element display 08m 53s
Using CSS Resets 07m 11s
Fixed, fluid, and responsive layouts 09m 09s
CSS debugging tools 06m 46s
Using the Firebug Inspector and the WebKit Web Inspector 11m 05s
2. Design Considerations 53m 15s
Page design workflow 03m 06s
Page design tools 04m 56s
Determining page structure 07m 18s
Creating image assets 08m 58s
Creating initial page structure 07m 03s
Adding meaning with classes and IDs 05m 23s
Structuring content with HTML5 06m 06s
Building internal structure 10m 25s
3. Working with Floats 01h 36m
Floating elements 07m 50s
Clearing floats 07m 28s
Containing floats 07m 50s
Clearfix technique 10m 38s
Floating inline elements 14m 34s
Two-column floated layouts 08m 17s
Three-column floated layouts 11m 30s
Column height considerations 07m 03s
Creating equal-height columns 10m 42s
Floats: Lab 05m 25s
Floats: Solution 05m 21s
4. Positioning Elements 51m 42s
Relative positioning 07m 59s
Absolute positioning 08m 59s
Fixed positioning 04m 23s
Controlling stacking order 08m 31s
Clipping content 08m 21s
Controlling content overflow 05m 38s
Positioning elements: Lab 03m 59s
Positioning elements: Solution 03m 52s
5. Building Fixed Layouts 48m 46s
Design considerations for fixed layouts 03m 28s
Establishing the layout grid 07m 57s
Defining column spacing 09m 30s
Applying the grid through CSS 08m 56s
Creating grid-based assets 08m 26s
Grid design resources 06m 22s
Building fixed layouts: Lab 04m 07s
6. Building Flexible Layouts 44m 35s
Designing for flexible layouts 02m 30s
Calculating percentage values 08m 45s
Setting flexible width values 06m 06s
Making images flexible 08m 10s
Setting minimum and maximum widths 07m 24s
Building flexible layouts: Lab 04m 53s
Building flexible layouts: Solution 06m 47s
7. Building Responsive Layouts 49m 36s
Responsive layout overview 03m 49s
Using media queries 07m 16s
Organizing styles 08m 39s
Making content responsive 08m 33s
Mobile design considerations 07m 32s
Building responsive layouts: Lab 04m 23s
Building responsive layouts: Solution 09m 24s
8. Enhancing Page Design 01h 22m
Creating multi-column text 06m 36s
Using borders to enhance design 13m 59s
Rounding corners 06m 56s
Adding drop shadows 10m 35s
Working with opacity 06m 08s
Utilizing the background property 15m 05s
Working with CSS sprites 07m 58s
Enhancing page design: Lab 06m 22s
Enhancing page design: Solution 08m 38s
Additional Resources 06m 25s
Additional resources 06m 25s
http://www.lynda.com/Web-Interactive-CSS-tutorials/CSS-Page-Layouts/86003-2.html

Download File Size:1.01 GB

---