Page 14 - Demo

xiiCONTENTSProject 5Web Page Design 299Stage 1 / Automating Repetitive Tasks . . . . . . . . . . . . . 301The Actions Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . 301Save an Action Set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302Create a New Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303Batch-Process Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305Inserting Action Stops and Menu Options . . . . . . . . . . . . . . . . 306Stage 2 / Editing Layers for Visual Effect . . . . . . . . . . . 309Use Frames to Place Images . . . . . . . . . . . . . . . . . . . . . . . . . . 309Use Puppet Warp to Transform a Layer . . . . . . . . . . . . . . . . . . 315Stage 3 / Generating Web-Ready Assets . . . . . . . . . . . . 319Examine a Photoshop Artboard . . . . . . . . . . . . . . . . . . . . . . . 319Generate Image Assets from Layers..................... 320More about Adobe Generator . . . . . . . . . . . . . . . . . . . . . . . . 323Copy CSS for Text Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324Creating Image Slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326Copy and Edit Artboard Sizes . . . . . . . . . . . . . . . . . . . . . . . . . 326Adjust Content for the Alternate Display Size . . . . . . . . . . . . . 329Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . 335The Dreamweaver User Interface 337Launch the Dreamweaver Application . . . . . . . . . . . . . . . . . . 337Explore the Dreamweaver Workspace . . . . . . . . . . . . . . . . . . 339Understanding the Common Toolbar . . . . . . . . . . . . . . . . . . . 341Understanding New Feature Guides . . . . . . . . . . . . . . . . . . . . 344Explore the Dreamweaver Document Window . . . . . . . . . . . . 344Preview Files in Dreamweaver Live View . . . . . . . . . . . . . . . . . 348Preview a File in a Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . 351Remove a Site from Dreamweaver . . . . . . . . . . . . . . . . . . . . . 353Project 6Bistro Site Organization 355Stage 1 / Exploring Site Structure . . . . . . . . . . . . . . . . . 357Create a New Site Definition . . . . . . . . . . . . . . . . . . . . . . . . . 357Examine the Site Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359Plan Folder Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361Sort and Move Site Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362Stage 2 / Organizing the Site Navigation . . . . . . . . . . . 365Changing the Update Preferences . . . . . . . . . . . . . . . . . . . . . 365Managing the Insert Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . 366Create Hyperlinks Within the Site . . . . . . . . . . . . . . . . . . . . . . 366The HTML Insert Panel In Depth . . . . . . . . . . . . . . . . . . . . . . . 368Copy and Paste Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374Adjust Relative Link Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . 376Create an Email Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378Stage 3 / Naming and Titling Documents . . . . . . . . . . . 379Rename Pages for Search Engine Optimization . . . . . . . . . . . . 379Understanding Web File Naming Conventions . . . . . . . . . . . . 380Create Document Titles for Individual Pages . . . . . . . . . . . . . . 381Understanding Find and Replace Options . . . . . . . . . . . . . . . . 384Hide Files from a Web Server . . . . . . . . . . . . . . . . . . . . . . . . . 385Export and Remove the Site Definition . . . . . . . . . . . . . . . . . . 386Uploading Files to a Server . . . . . . . . . . . . . . . . . . . . . . . . . . . 388Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . 391Project 7HTML Book Chapter 393Stage 1 / Preparing the Workspace . . . . . . . . . . . . . . . . 395Define the ATC Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395Create a New HTML Document . . . . . . . . . . . . . . . . . . . . . . . 396Understanding Element Names, Tags, and Attributes . . . . . . . 398Stage 2 / Working with Semantic Markup . . . . . . . . . . 398Paste Text Content in Design View . . . . . . . . . . . . . . . . . . . . . 399Format Headings in Design View . . . . . . . . . . . . . . . . . . . . . . 403Formatting Text with the Properties Panel . . . . . . . . . . . . . . . 403Format a Blockquote and Inline Quote . . . . . . . . . . . . . . . . . . 405Mark up Abbreviations in Code View . . . . . . . . . . . . . . . . . . . 408Format with Strong and Em Elements . . . . . . . . . . . . . . . . . . . . 411Understanding Code View Formatting . . . . . . . . . . . . . . . . . . . 411Stage 3 / Working with Special Characters . . . . . . . . . . 413Insert Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413Create a Table of Quote Characters . . . . . . . . . . . . . . . . . . . . 415More about Working with HTML Tables . . . . . . . . . . . . . . . . . 416Use the Insert Other Character Dialog Box................ 418Insert Special Characters in Code . . . . . . . . . . . . . . . . . . . . . . 421