Foundations: Dreamweaver MX: Building on Solid Foundations......Page 1
Trademarks......Page 2
Thank You One and All......Page 3
What You Can Expect......Page 4
Why Did We Make Foundations an E-Book?......Page 5
Sequential Steps......Page 6
Browser Previews......Page 7
Folder Lists......Page 8
Table of Contents......Page 9
Moving the Unzipped Folders......Page 15
The Included Files......Page 16
Open Dreamweaver MX......Page 17
Install The Filler Text Snippet and SwapClass Extension......Page 21
Mac Users......Page 23
Close a Panel Group......Page 24
Modify a Panel Group......Page 25
Group a New Panel on an Existing Panel......Page 26
Add the Snippets panel to the Files Group......Page 27
Changing the Panel Bar Width......Page 28
Changing to Dreamweaver 4 Workspace (PC Only)......Page 29
Setting Preferences......Page 30
Create a New Document......Page 31
Adding a Page Title......Page 32
The Doctype......Page 33
Creating a Snippet......Page 34
Inserting a Snippet......Page 36
Enabling Dreamweaver MX Accessibility Features......Page 38
Declaring the default page language......Page 39
The design strategy......Page 40
Assembling an Assets List......Page 43
Create a New Document and Configure the Canvas......Page 44
Rulers and Pixels and Guides......Page 47
Setting Up The Fireworks MX Workspace......Page 48
Creating the Button Background......Page 50
The Table Corners and Borders Images......Page 54
Creating the Logo......Page 58
The Home Icon......Page 61
The Shim (transparent spacer GIF)......Page 65
The Main table cell background......Page 66
The Foundations Background Tile......Page 67
Slicing the Button Background......Page 68
Slicing the Main Table Cell Background Image......Page 69
Slicing the Table Corners and Borders......Page 70
Optimizing the Foundations Images......Page 72
Optimizing the Logo......Page 73
Optimizing the Shim......Page 74
Optimizing the Striped Background Tile......Page 75
Exporting the Foundations Images......Page 76
In Closing......Page 80
Inserting a Table......Page 81
The Accessibility Dialog......Page 82
Centering the Table......Page 83
Checking the Source Code......Page 84
Code Formatting......Page 85
Inserting the Logo......Page 87
Blueprinting our Table and Assigning IDs......Page 89
Creating a Style Sheet......Page 90
CSS Efficiencies......Page 91
Setting CSS Preferences......Page 92
Enabling CSS in the Properties Inspector......Page 93
Creating a Style Sheet and Linking it......Page 94
Copy and Paste: the CSS Code Warrior’s Ally......Page 98
Insert Shim Images and IDs Where Needed......Page 101
Find and Replace......Page 107
If Non-Breaking Spaces are Breaking Your Heart......Page 109
Styling the Body Element......Page 111
Collapsing the Table......Page 116
Creating the #mn ID Selector......Page 117
Adding a Paragraph......Page 122
The Vertical Alignment Compromise......Page 123
Styling the H1......Page 124
Time for a Browser Check......Page 126
Creating a Remedial CSS Rule......Page 128
Styling the 
......Page 129
Save and Switch......Page 130
Styling The Footer ID Selector......Page 131
ID the Footer ......Page 134
Add an Address......Page 135
Creating an 
 Selector......Page 136
The Sidebar ID Selector......Page 138
ID the Sidebar Cell......Page 139
Adding Hyperlinks to the Sidebar......Page 140
Code Check......Page 142
#mn Hyperlinks......Page 143
Make a test link......Page 144
Creating the #mn Link Styles......Page 145
The footer link styles......Page 148
Preview......Page 149
The sidebar navigation styles......Page 150
Assign Classes to the Main and Sub-Section Links......Page 155
using the #nbutspacer ID......Page 157
Making Buttons from Text Part 1: The Main Section Links......Page 158
Making Buttons from Text Part 2: The Sub-Section Links......Page 164
Take Two Style Sheets and Call Me in the Morning......Page 168
Planning the Version 4 Style Sheet......Page 169
Making a Copy of mfv5.css......Page 171
Reset the Linked Style Sheet......Page 172
Importing the Version 5 Style Sheet......Page 173
Setting Font-Family for Version 4 Browsers......Page 174
Editing The Sidebar Link Styles......Page 175
Editing the 
 Selector......Page 179
Editing the #mn and #mn p Selectors......Page 180
Editing the #footer Selector......Page 182
Editing the Address Selector......Page 183
Previewing the Finished Style Sheet in Navigator 4......Page 184
Code Check......Page 185
The Dreamweaver MX @Import Issue......Page 187
The Navigator 4 URL Issue......Page 188
Solving the Navigator 4 CSS URL Issue......Page 191
Saved Queries......Page 192
Using the Saved Query......Page 195
A Hypothetical Example......Page 197
The Optimization Process......Page 198
CSS Code Check—mfv4......Page 201
CSS Code Check—mfv5......Page 203
How do I turn temporary links into real links—and......Page 204
Can I mark the navigation link that relates to the current page, so users know where they are?......Page 205
Can I add images inside the main content table cell?......Page 206
Can I add a table inside the main content cell so......Page 207
Editing the Navbg Image......Page 212
Making a Second Navbg Image for the Hover Class......Page 213
Slicing it......Page 214
Exporting to Foundations......Page 215
Editing the p.navbuts a:hover, p.navbuts a:active Rule......Page 216
Preview in a Version 5 (or higher) Browser......Page 218
How the Menu Will Work......Page 219
The Menu Mechanics......Page 220
The Styles SwapClass Will Use......Page 221
Creating the CSS Styles for our SwapClass Menu......Page 222
The Hacks......Page 223
Adding More Menu Sublinks......Page 224
The Great Divide......Page 226
Editing the Tag Library......Page 231
Applying the SwapClass JavaScript Behavior......Page 232
Menu Modifications......Page 237
Move the Script......Page 241
Create the JavaScript File......Page 242
Link the JavaScript File to Your Page......Page 243
Overview......Page 245
Changing the Images......Page 246
Backing Up the Style Sheets......Page 250
Setting Design Time Style Sheets......Page 252
Editing the Yellow Style Sheets......Page 254
Turning off Design Time Style Sheets......Page 258
Resetting the Default Style Sheets to the Yellow Color Theme......Page 259
Managing Multiple Color Schemes......Page 262
Planning the Structure......Page 263
Creating the Base Structure......Page 264
The Logo DIV......Page 265
The Main DIV......Page 267
The Evolving Structure......Page 270
The Navbar DIV......Page 271
Accessibility Check......Page 273
Code Check......Page 274
Create the Version 4 Style Sheet and the Body Selector......Page 275
Identify and Create the Remaining Selectors......Page 277
Code Check—mfv4_lobo.css......Page 286
Apply the Netscape Resize Fix......Page 287
Making a Copy of mfv4_lobo.css......Page 288
Importing the Version 5 Style Sheet......Page 289
Let’s do the math......Page 290
Editing the Version 5 Style Sheet......Page 291
Preview and Behold a CSS Miracle......Page 292
Code Check—mfv5_lobo.css......Page 299
The Finished Page......Page 300
Does it Print?......Page 301
Creating the Print Style Sheet......Page 302
Linking the Print Media Style Sheet......Page 305
Testing the Print Style Sheet......Page 307
We Wrote Foundations because—......Page 308