Page 11 - Adobe Photoshop and Dreamviewer 2021
P. 11
Project 7 Project 8
Arts Council Website 371 Museum CSS Layout 419
Stage 1 / Placing Static Foreground Images . . . . . . . 373 Stage 1 / Creating Layouts with Style Sheets. . . . . . 421
Review the Existing Project Status . . . . . . . . . . . . . . . . . . . . 374 Prepare the Site Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Place an Image in the Regular Design View . . . . . . . . . . . . . 375 Defi ne a New Element and Tag Selector . . . . . . . . . . . . . . . . 424
Place an Image with the Insert Panel . . . . . . . . . . . . . . . . . . 378 Drag and Drop to Create New Elements . . . . . . . . . . . . . . . . 427
Drag and Drop an Image from the Insert Panel. . . . . . . . . . . 380 Defi ne a Selector with an ID Attribute . . . . . . . . . . . . . . . . . 430
Insert an Image with the Assets Panel . . . . . . . . . . . . . . . . . 382 Understanding CSS Shorthand . . . . . . . . . . . . . . . . . . . . . . . 433
Stage 2 / Extracting Photoshop Assets . . . . . . . . . . . 385 Create New Selectors Using the CSS Designer Panel. . . . . . . 434
Verify Your Adobe ID in Dreamweaver . . . . . . . . . . . . . . . . . 385 Create and Manage Nested Elements. . . . . . . . . . . . . . . . . . 436
Load a Photoshop File into Your CC Account . . . . . . . . . . . . 386 Control Element Float Position . . . . . . . . . . . . . . . . . . . . . . . 440
Extract Text and Images from a Photoshop File . . . . . . . . . . 388 Work with the CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . 443
Format the Page Body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 Defi ne Properties for the <body> Tag . . . . . . . . . . . . . . . . . 448
Format Element Backgrounds with Extracted Styles . . . . . . . 397 Stage 2 / Working with a Template. . . . . . . . . . . . . . .451
Defi ne Background Images. . . . . . . . . . . . . . . . . . . . . . . . . . 401 Create a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
Format Text with Extracted Styles. . . . . . . . . . . . . . . . . . . . . 405 Apply the Template to Existing Pages. . . . . . . . . . . . . . . . . . 455
Format Links with Descendant Selectors. . . . . . . . . . . . . . . . 408 More About Working with Dreamweaver Templates . . . . . . . 459
Defi ning Color in CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411 Stage 3 / Using CSS to Control Content . . . . . . . . . . 460
Defi ne Background Images for Navigation Link States . . . . . 412 Defi ne HTML Tag Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . 460
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .415 Create Named Anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . .416 Create a Pseudo-Class Selector . . . . . . . . . . . . . . . . . . . . . . 467
Create a Figure and Figure Caption . . . . . . . . . . . . . . . . . . . 468
Create Descendant Selectors . . . . . . . . . . . . . . . . . . . . . . . . 472
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .475
Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . .476
xi
