Learning Web Design w/Adobe CS5

Lesson 1: Get Started with Dreamweaver 1 Exercise 1 [Dreamweaver]   About Adobe Dreamweaver CS5 3   Start Dreamweaver 3   Open a Web Page 4   Dreamweaver Workspace 5 Ï Property Inspector 5 Ï Application Bar and Document Toolbar 6 Ï Status Bar 7   Work with Panels and Panes 8   Close and Exit Dreamweaver 8 Exercise 2 [Dreamweaver]   Create a New Site 11 Ï Select a Server Technology 12 Ï Where to Store Your Web Site 13 Ï Test Your Web Site 13 Ï Select a Remote Server 14 Ï Check In/Check Out Feature 15 Ï Finish the Site Setup 15   Create Web Pages 16   View Site Files 18   Web Design Guidelines 18 Exercise 3 [Dreamweaver]   About HTML and XHTML 23   HTML Document Structure 24   HTML Tags 24 Ï Attributes and Values 25 Ï Common HTML Tags 25 Ï HTML vs CSS 26   About XML 26   Add Keywords to a Web Site 27   Enter Text on a Web Page 28   Use Paragraph and Heading Tags 29   Use Code and Design Views 29   Open a Different Web Site 30 END OF LESSON PROJECTS Exercise 4   Summary Exercise 35 Exercise 5   Application Exercise 37 Exercise 6   Curriculum Integration 39 Exercise 7   Portfolio Builder 40 iv Exercise 11 [Dreamweaver]   Adjust Paragraph Alignment 70   Change Paragraph Indentation 70   Create Lists 71   Insert a Date 72   Use the History Panel 72 Exercise 12 [Dreamweaver]   About Dreamweaver’s HTML Code Features 77   Use the Code Inspector 78   Display Head Content 79   Use Code Hints and the Tag Chooser 80   Use the Tag Inspector 81   Insert Snippets 81   Clean Up XHTML Code 81   Find and Replace Code 82 END OF LESSON PROJECTS Exercise 13   Summary Exercise 87 Exercise 14   Application Exercise 89 Exercise 15   Curriculum Integration 90 Exercise 16   Portfolio Builder 91 Lesson 2: Working with Text Using CSS Styles and HTML 41 Exercise 8 [Dreamweaver]   Insert Text from Office Documents 43 Ï Importing or Copying Office Text 43 Ï Create a Link to an Office Document 44 Ï Opening Office HTML Files 44   Modify Font Formats 45 Ï Select New Font Combination 45 Ï Add Fonts to the Font List 46 Ï Apply Font Styles 46 Ï Change Font Size 46 Ï Apply Font Color 47   Insert Special Characters 47   Check Spelling 48   Find and Replace Text 48   Save Edits 49 Exercise 9 [Dreamweaver]   About Styles and Style Sheets 54   Use the Property Inspector to Create Internal CSS Styles 54   Use the CSS Styles Panel to Create Internal CSS Styles 55 Ï Define a New Class Style 56 Ï Redefine HTML Tags 57   Apply Internal CSS Styles 57   Edit Internal CSS Styles 57   Dreamweaver CSS Reference 58 Exercise 10 [Dreamweaver]   Create an External Cascading Style Sheet 61 Ï Save New External Style Sheet 62 Ï Attach External Style Sheet to Existing or New Web Document 62   Dreamweaver CSS Layouts and Samples 63 Ï Use a CSS Layout 63 Ï Use a Dreamweaver Sample Style Sheet 65   About Inline Styles 65   Manage Styles  66 Learning Web Design with Adobe CS5 | Table of Contents v Lesson 4: Work with Graphic Elements and Templates 117 Exercise 24 [Dreamweaver]   Change the Page Background Color 119   Insert Horizontal Rules 121   Use Web-Safe and Custom Colors 121 Exercise 25 [Fireworks]   About Adobe Fireworks 126   About Bitmap and Vector Images 126   Start Fireworks and Create a New Document 126   Learn the Fireworks Window and Tools  127   Understand the Select Tools 127   Learn the Bitmap Tools 129   Understand Vector Tools 129   Change the View 130   Fit the Canvas 130 Exercise 26 [Fireworks]   Learn about Bitmap Objects 134   Select the Drawing Colors 134   Draw with the Brush Tool 134   Draw with the Pencil Tool 134   Select Bitmap Objects 135   Copy and Paste Bitmap Objects 136 Exercise 27 [Fireworks]   Adjust Brightness and Contrast 140   Apply Filters 140   Sharpen and Blur an Image 141   Use the Burn and Dodge Tools 142   Use the Rubber Stamp Tool 142   Use the Smudge Tool 142 Lesson 3: Adding and Managing Links and Previewing Pages 93 Exercise 17 [Dreamweaver]   About Links 95   Create Text Links 95   Link to Named Anchor 96   Link to E-Mail Address 97   Other Ways to Link 98 Exercise 18 [Dreamweaver]   Preview a Site in a Browser 101   Preview a Site in Device Central 102   Work in the Files Panel 103 Ï Displaying Files in the Files Panel 103 Ï Basic Files Panel Operations 103 Exercise 19 [Dreamweaver]   Check Browser Compatibility 107   Understand Browser Compatibility Issues 108   Check and Modify Links 108 Ï Check Links 109 Ï Repair Links 110 END OF LESSON PROJECTS Exercise 20   Summary Exercise 113 Exercise 21   Application Exercise 114 Exercise 22   Curriculum Integration 115 Exercise 23   Portfolio Builder 116 Exercise 31 [Dreamweaver]   About Adobe Bridge 166   Insert an Image on a Page in Dreamweaver 166   Modify Image Properties 169 Ï Resize Image 170 Ï About Image Borders 170   Position an Image on a Page 170 Ï Position a Standalone Image 170 Ï Wrap Text around an Image 170 Ï About Spacing around Images 171 Ï Use Rulers and Guides to Help Position Graphics 172   Edit Graphics within Dreamweaver 172   Insert and Edit a Fireworks Image 173   Manage Graphic Files 174 Exercise 32 [Dreamweaver]   Insert a Background Picture 181   Create Image Maps 181   About Rollover Images 183 Ï Insert a Rollover Image 183 Ï Insert a Navigation Bar 183   Use the Assets Panel 185 Exercise 33 [Dreamweaver]   About Templates  190   Create a New Template 190   Apply a Template 192   Edit a Template and Update Pages 193 Exercise 34 [Dreamweaver]   Use the Library 198 Ï Add Items to the Library 198 Ï Insert Library Item on Page 199 Ï Modify Library Item and Update Pages 199   Use Design Notes 199 Ï Viewing Design Notes 200 Exercise 28 [Fireworks]   Learn about Vector Objects  145   Draw Lines  146   Draw Rectangles 146   Draw Ellipses  146   Create Polygons  146   Scale Vector Objects 147   Draw Using the Vector Path Tool 147   Use the Pen Tool to Create Paths  147   Add, Change, and Delete Points 148   Apply a Stroke to a Vector Path  148   Add a Fill to a Path 148 Exercise 29 [Fireworks]   Create a Text Block 152   Add Text 152   Choose a Font 152   Set Text Size 153   Add Fills to Text 153   Make Text Follow a Path 154 Exercise 30 [Fireworks]   Add Layers 157   Place Objects on Layers  158   Hide and Display Layers  158   Create a Vector Mask 159   Create a Bitmap Mask  159   Convert an Object to a Mask  160   Add a Blend  160   Set Opacity  160   Set a Blending Mode  161 Learning Web Design with Adobe CS5 | Table of Contents vii Exercise 41 [Dreamweaver]   About Forms 230 230   Create a Form230 230 Ï Handle Accessibility Issues 231 231 Ï Insert Single-Line Text Fields232 232 Ï Insert Radio Buttons232 232 Ï Insert Radio Groups 233 233 Ï Insert Checkboxes234 234 Ï Insert Lists and Menus 234 234 Ï Insert Multiple-Line Text Fields 236 236   Insert Buttons 237 237 Ï About Spry Form Fields237 237   About Validating a Form237 237   Test a Form238 238   About Dynamic Data238 238   About Form Handling238 238 Exercise 42 [Dreamweaver]   About Frames Pages 243   Create a Frameset 243 Ï Insert Frames Manually 243 Ï Use a Frameset Page Design 245   Work with Frames 245 Ï Activate or Select a Frame 245 Ï Name a Frame 245 Ï Save Framesets and Frames 246   Add Content to Frames 246 Ï Set Frame Source 247   Add Frame Borders 248   Resize Frames 248   Set Frame Target for Links 248 END OF LESSON PROJECTS Exercise 43   Summary Exercise 253 Exercise 44   Application Exercise 255 END OF LESSON PROJECTS Exercise 35   Summary Exercise 206 Exercise 36   Application Exercise 208 Exercise 37   Curriculum Integration 210 Exercise 38   Portfolio Builder 212 Lesson 5: Create Tables, Forms, and Frames Exercise 39 [Dreamweaver]   About Tables 214   Create a Table 215   Insert Text and Images in Table Cells 216   Adjust Table Structure 216 Ï Select Table Elements 217 Ï Change Cell Width and Height 217 Ï Insert and Delete Rows and Columns 217 Ï Split and Merge Cells 218 Ï Span Rows and Columns 218 Exercise 40 [Dreamweaver]   Modify Table Borders and Backgrounds 223 Ï Set Border Colors 223 Ï Add Background Color to Cells 224 Ï Insert Background Image in Cell 224   Import Table Data 224   Sort Table Data 225   Insert Table-Related Tags 225   Use Expanded Tables Mode 225 Learning Web Design with Adobe CS5 | Table of Contents viii Exercise 45   Curriculum Integration 256 Exercise 46   Portfolio Builder 256 Lesson 6: Create Dynamic and Interactive Pages 259 Exercise 47 [Dreamweaver]   About the Spry Framework 261   About Spry Widgets 261   Insert Spry Validation Widgets 262 Ï Insert Spry Validation Widgets 262 Ï Set Properties and Validation 262   Create a Spry Menu Bar  264 Ï Insert a Menu Bar Widget 264 Ï Specify Menu Bar Entries  264   Create a Spry Collapsible Panel  265   Create a Spry Accordion 266   Other Spry Elements  266 Exercise 48 [Flash]   About Flash271 271   Start Flash and Create a New Document 272 Ï Explore the Flash Window 273 Ï Understand the Timeline 274 Ï Learn about the Tools Panel 274   Set Document Properties 275   Enter Content on the Stage 275   Change the Stage View 275 Exercise 49 [Flash]   Draw Basic Shapes in Flash 279   Select Objects 280   Position Objects on the Stage 280   Transform Objects 281   Arrange the Stack Order 281   Group and Ungroup Objects 282 Exercise 50 [Flash]   About Animation  287   About Frames and Keyframes  287   Work with Frames and Keyframes  287   View Frames with the Timeline  287   Preview an Animation 288 Exercise 51 [Flash]   About Layers 292   Work with Layers 293   Create Graphic Symbols 293   Add a Symbol Instance 294   Classic Tweening 294   Classic Tween Settings 294   Motion Tweening 295   Shape Tweening 295 Exercise 52 [Flash]   Test a Movie 300   Test Download Performance 300   Publish a Flash Application 300   Publish Settings 301   Preview a Published Application 302   Export Flash Content 302 Exercise 53 [Dreamweaver]   About Multimedia Files 307   Insert a Flash Movie 308   Modify and Play a Movie 308   Other Multimedia Plugins 310 Exercise 54 [Fireworks]   About Buttons 313   Create Up and Down States 315   Create Over and Over While Down States 315   Edit Buttons 315   Add a URL to a Button 316 Exercise 55 [Fireworks]   About Slices 319   Draw Slices with the Slice Tool 319   Modify Slices 320   Add Rollovers to a Slice 320   Add a Disjoint Rollover 321   Remove a Rollover 321 END OF LESSON PROJECTS Exercise 56   Summary Exercise 325 Exercise 57   Application Exercise 327 Exercise 58   Curriculum Integration 329 Exercise 59   Portfolio Builder 330 Lesson 7: Advanced Graphics and Animation 331 Exercise 60 [Fireworks]   Choose an Output Format 332   Select the Palette 333   Choose the Right Number of Colors 333   Use the Color Palette 333 Exercise 61 [Fireworks]   Compress GIF Files 336   Make Transparent GIFs 337   Use Interlacing GIFs 338 Exercise 62 [Fireworks]   Adjust JPEG Quality 341   Use Selective JPEG Compression 342   Adjust Detail Sharpness 343   Create Progressive JPEGs 343 Exercise 63 [Flash]   Create a Movie Clip Symbol 346 Exercise 64 [Flash]   Use the Movie Explorer 350   Use Motion Presets 351   Use the Motion Editor 352 END OF LESSON PROJECTS Exercise 65   Summary Exercise 325 Exercise 66   Application Exercise 327 Exercise 67   Curriculum Integration 329 Exercise 68   Portfolio Builder 330 Learning Web Design with Adobe CS5 | Table of Contents x Lesson 8: Manage and Publish a Web Site 363 Exercise 69 [Dreamweaver]   Run Dreamweaver Reports 364   Validating Web Pages 365 Exercise 70 [Dreamweaver]   Publish a Web Site on a Server  368 Ï Associating an FTP Server with a Web Site 369 Ï Putting the Web Site on the FTP Server  370 Ï Associating a WebDAV Connection (HTTP server) with a Web Site  371 Ï Associating a Local or Network Server with a Web Site  372   Check Files In and Out  372   Copy Files from a Remote Server 374 END OF LESSON PROJECTS Exercise 71   Summary Exercise 377 Exercise 72   Application Exercise 378 Exercise 73   Curriculum Integration 379 Exercise 74   Portfolio Builder 380 Index 381