Introduction |
2 |
| What you can Expect |
4 |
| Support and Community |
8 |
Conventions Used in this Book |
9 |
 |
|
Chapter 1 - Setting Up |
|
| Defining a Local Site |
15 |
| Installing The PVII Extensions and Snippet |
19 |
| The Files Included with Foundations |
21 |
Chapter 2 - Panel Management |
|
| The MX Workspace |
22 |
| Closing a Panel Group |
23 |
| Modifying a Panel Group |
24 |
| Grouping Panels |
25 |
| Changing Workspaces |
28 |
Chapter 3 - Creating New Documents |
|
| Setting Preferences |
29 |
| Creating a New Page |
30 |
| Adding a Page Title |
31 |
Chapter 4 - Creating a Doctype Snippet |
|
| The Doctype |
32 |
| Creating a Snippet |
33 |
| Inserting a Snippet |
35 |
Chapter 5 - Accessibility Aids |
|
| Enabling Dreamweaver MX Accessibility Features |
37 |
| Declaring the default page language |
38 |
Chapter 6 - Planning the Page Layout |
|
| The design strategy |
39 |
| Assembling an Assets List |
42 |
Chapter 7 - Creating the Foundations Images |
|
| Create a New Document and Configure the Canvas |
43 |
| Rulers and pixels and Guides |
46 |
| Setting up the Fireworks MX workspace |
47 |
| Drawing the Foundations Images |
49 |
| Creating the logo |
57 |
| Slicing, Optimizing & Exporting |
67 |
| Optimizing the Foundations Images |
71 |
| Exporting the Foundations Images |
74 |
| Reviewing the Export Dialog Box Settings |
75 |
| The Export Process |
76 |
Chapter 8 - Building the Foundations Page |
|
| Inserting a Table |
78 |
| The Accessibility Dialog |
79 |
| Checking the Source Code |
81 |
| Code Formatting |
82 |
| Inserting the Logo |
84 |
| Blueprinting our Table and Assigning IDs |
86 |
| Reviewing the CSS ID Selectors |
87 |
| Creating a Style Sheet |
87 |
| A CSS Rule Defined |
88 |
| CSS Efficiencies |
88 |
| Setting CSS Preferences |
89 |
| Enabling CSS in the Properties Inspector |
90 |
| Linking a Style Sheet |
91 |
| Copy and Paste: the CSS Code Warrior's Ally |
95 |
| A Little Table Maintenance |
98 |
| Code Check |
102 |
| Find and Replace |
103 |
| Styling the Body Element |
104 |
| Creating the ID Selectors |
110 |
| Adding the Heading |
114 |
| Adding a Paragraph |
114 |
| The Vertical Alignment Compromise |
115 |
| Styling the H1 |
116 |
| Creating a Remedial CSS Rule |
119 |
| Styling the <p> |
120 |
| Styling The Footer ID Selector |
122 |
| Add an Address |
125 |
| Creating an <address> Selector |
126 |
| The Sidebar ID Selector |
128 |
| ID the Sidebar Cell |
129 |
| Adding Hyperlinks to the Sidebar |
130 |
| Making Hyperlink Styles |
133 |
| Making Additional Link Styles |
135 |
| Making Buttons from Text Part 1: The Main Section Links |
145 |
| Making Buttons from Text Part 2: The Sub-Section Links |
151 |
Chapter 9 - Making a Style Sheet for Version 4 Browsers |
|
| Take Two Style Sheets and Call Me in the Morning |
155 |
| Planning the Version 4 Style Sheet |
156 |
| Importing the Version 5 Style Sheet |
160 |
| Editing the Version 4 Style Sheet |
161 |
| The Dreamweaver MX @Import Issue |
174 |
| About Duplicate Rules and Redundant Properties |
175 |
| The Navigator 4 URL Issue |
175 |
| Solving the Navigator 4 CSS URL Issue |
177 |
| Saved Queries |
178 |
| Optimizing Our Two Style Sheets |
183 |
| The Optimization Process |
184 |
| Code Checks |
186 |
Chapter 10 - Alternate Image Sets |
|
| The Plan |
189 |
| Changing the Images |
190 |
| Matching Style Sheet Sets for Each Color Set |
193 |
| Backing Up the Style Sheets |
193 |
| Setting Design Time Style Sheets |
195 |
| Managing Multiple Color Schemes |
203 |
Chapter 11 - Extra Ingredients |
|
| How do I turn temporary links into real links - and make more pages? |
204 |
| Can I mark the link that relates to the current page, so users know where
they are? |
205 |
| Can I add images inside the main content table cell? |
206 |
| Can I add a table inside the main content cell so I can list my company's
widgets? |
207 |
Chapter 12 - Adding Menu Interactivity |
|
| Dressing up the Main Buttons |
212 |
| Editing the Navbg Image |
212 |
| Making a Second Navbg Image for the Hover Class |
213 |
| And Now For a Little CSS Wizardry |
216 |
Chapter 13 - Stepping Smartly Outside the Box |
|
| The Interactive Swap Class Menu |
220 |
| How the Menu Works |
220 |
| Accessibility |
221 |
| The Menu Mechanics |
222 |
| Creating the CSS Styles for our SwapClass Menu |
223 |
| The CSS Hacks |
224 |
| The Great Divide |
227 |
| Editing the Tag Library |
232 |
| Applying the SwapClass JavaScript Behavior |
234 |
| Menu Modifications |
237 |
Chapter 14 - Externalizing The JavaScript |
|
| Move the Script |
241 |
| Create the JavaScript File |
242 |
| Link the JavaScript File to Your Page |
243 |
Chapter 15 - The Table Lobotomy |
|
| Look Mom - No Table |
245 |
| What are the Benefits of Table-Less Designs? |
245 |
| Planning the Structure |
246 |
| Creating the Lobotomy Page |
247 |
| Creating the Base Structure |
247 |
| The Separation of Structure from Presentation |
251 |
| The Navbar DIV |
253 |
| Accessibility Check- We Passed! |
255 |
| Writing a Style Sheet for Version 4 Browsers |
257 |
| CSS Unleashed - The Lobotomy Style Sheet for Version 5 Browsers |
270 |
| Editing and Optimizing the Version 5 Style Sheet |
272 |
| Let's do the math |
272 |
| Preview and Behold a CSS Miracle |
274 |
| Does it Print? |
292 |
| A Print Media Style Sheet to the Rescue |
297 |
| Creating the Print Style Sheet |
302 |
| Notes and Afterthoughts |
308 |