Rockable.Press.From.Photoshop.to.HTML.2010.pdf

(14242 KB) Pobierz
449565224 UNPDF
449565224.039.png 449565224.050.png 449565224.059.png 449565224.067.png 449565224.001.png 449565224.007.png
 
449565224.011.png
 
449565224.012.png
 
 
 
 
449565224.013.png
 
449565224.014.png
 
449565224.015.png 449565224.016.png
 
 
449565224.017.png
 
 
449565224.018.png
 
449565224.019.png 449565224.020.png
 
449565224.021.png
 
449565224.022.png 449565224.023.png 449565224.024.png
 
 
 
449565224.025.png 449565224.026.png 449565224.027.png 449565224.028.png 449565224.029.png 449565224.030.png 449565224.031.png 449565224.032.png 449565224.033.png
 
449565224.034.png
 
449565224.035.png 449565224.036.png 449565224.037.png 449565224.038.png 449565224.040.png 449565224.041.png 449565224.042.png 449565224.043.png 449565224.044.png 449565224.045.png 449565224.046.png 449565224.047.png 449565224.048.png 449565224.049.png 449565224.051.png 449565224.052.png
 
449565224.053.png 449565224.054.png 449565224.055.png 449565224.056.png 449565224.057.png
 
449565224.058.png 449565224.060.png 449565224.061.png 449565224.062.png
 
 
449565224.063.png 449565224.064.png 449565224.065.png
 
449565224.066.png 449565224.068.png 449565224.069.png 449565224.070.png 449565224.071.png 449565224.072.png 449565224.073.png 449565224.074.png 449565224.075.png 449565224.002.png 449565224.003.png 449565224.004.png
 
449565224.005.png 449565224.006.png
 
 
449565224.008.png 449565224.009.png
 
© Rockable Press 2010
All rights reserved. No part of this publication may be
reproduced or redistributed in any form without
the prior written permission of the publishers.
449565224.010.png
Foreword
5
AnIntroduction
6
What This Book Includes
7
What This Book Assumes
7
What This Book Does Not Assume
8
Tools of the Trade
8
CodingTheHTML
12
Coding The HTML
13
Creating the Basic Shell
15
The Markup
16
Markup Complete!
27
SlicingthePSD
2
The Plan
33
Photoshop
34
The “Save for Web” Pattern
36
Best Practices for Image Types
39
CSS Sprites
41
Revising our HTML
46
CodingtheCSS
49
CSS Resets
50
What’s the Solution?
51
DEFAULT.CSS
54
General Styles
56
Container
58
Header
58
Styling The Main Banner
62
Fahrner’s Image Replacement Technique
64
What’s The Difference Between Absolute And
65
Relative Positioning?
Main Content
68
Working Example: Columns
69
Here’s The Thing about Floats
75
The Three Headings
78
4
Blockquote
81
CSS Shapes
83
Recent Portfolio
85
Before
86
After
90
About Page Header (subpage)
101
Home Page Header
101
The Body ID Trick
102
Work Page
104
Contact Page
111
Cufón Font Replacement
118
CompensatingforOlderBrowsers
12
Cringe Time
124
Tools
124
Why is “Having Layout” Necessary?
126
Targeting Speciic Versions of Internet Explorer
127
BonusChapter:ASplashofjQuery
14
The Script
135
Decoding the Script
137
Conclusion
140
Appendix–FurtherStudy
142
AboutTheAuthor
14
Foreword
I’m sure you’ve heard it before. “CSS is easy. Anyone can do it!”
Granted, it may not be rocket science, but CSS is powerful enough
to make you rip your hair out.
On a daily basis – if you listen closely – screams can be heard
around the world from coders unsuccessfully attempting to force a
design into position. It’s not just a matter of learning the language;
memorization is an easy task. The scream inducing points occur
when you view your site in ten different browsers, all of which
render your site at different levels of consistency. When such things
occur, how do you ix them?
This is what separates the amateurs from the pros. By the end of
this book, you’ll be a member of the latter.
It won’t be an easy task. As a matter of fact, I’m going to teach
you to use techniques that seemingly make zero sense. Aren’t you
glad you purchased this book? All kidding aside, you’re going to
ind that, just because it should work, doesn’t mean it will. Just
because your design looks great in Firefox, doesn’t mean it will in
Internet Explorer – in fact this is typically the case. To compensate,
we’ll be researching the unique “deiciencies” in each browser that
will undoubtedly prove to give you trouble. When you inish the last
page, you’ll have the tools to battle the forces of evil and wrangle
browsers – even those that are a decade old – to work for you,
not against.
Jeffrey Way

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin