 |
|
|
|
|
|
|
|
||||||||||||||||||||||||
|
 |
||||||||||||||||||||||||||||||
 |
 |
||||||||||||||||||||||||||||||
 |
 |
 |
 |
 |
 |
||||||||||||||||||||||||||
|
.Lucky 13! (not!) Review CSS |
|
|
|
Why stylesheets? Stylesheet locations Linked, embedded and inline Stylesheet syntax Selector, declaration, properties and values Redefining tags vs classes Units in CSS Pixels or percentages Text properties text-indent, text-align, line-height, vertical-align, word-spacing, letter-spacing, text-transform, text-decoration Font properties font, font-family, font-weight, font-size, font-style, font-variant Background properties background, background-color, background-image, background-repeat, background-attachment, background-position Box properties Margins margin, margin-top, margin-right, margin-left, margin-bottom Padding padding, padding-top, padding-right, padding-left, padding-bottom Borders border, border-top, border-right, border-left, border-bottom, border-color, border-style, border-width, border-collapse Classification properties display, white-space, list-style-type, list-style-image, list-style-position,
|
| Dissection | |
|
|
Open World Hotels http://www.openworldhotels.com Dissected version
|
| Site Strategies | |
|
Make a |
Get yourself a pad of gridded paper
This will drive your file folder layout
|
| Usability | |
|
Rule One |
Where Am I Now And How Did I Get Here? The user should always know exactly where they are in your site and how they got there. Methods Headers with UI highlighted to current location Good titling Breadcrumbs
|
|
Rule Two |
How Do I Get Somewhere Else? The user should never be unsure about how to get to somewhere else on your site. Methods Clear labeling on buttons and links Consolidate internal links into a group Assume your user is an idiot.
|
|
What will happen if you violate rules one or two |
Your user will leave without seeing what you wanted them to see. |
| Exercises | |
|
Review First |
Some new-ish properties: position |
|
Exercise One |
Make this |
|
Exercise two |
Take the stylesheet you made for the above and move it to an attached stylesheet |
|
|
