Page 9 - CC2017_DW_Look_Inside
P. 9
Project 3 Stage 3 Using CSS to Control Content . . . . . . . . . . .197
Photographer’s Web Site 105 Define HTML Tag Selectors......................... 197
Create Named Anchors ...........................200
Stage 1 Placing Static Foreground Images . . . . . . .107 Create a Pseudo-Class Selector......................204
Review the Existing Project Status....................108 Create a Figure and Figure Caption...................205
Place an Image in the Regular Design View .............109 Create Descendant Selectors .......................209
Place an Image with the Insert Panel ................. 112
Project Review ............................... 212
Drag and Drop an Image from the Insert Panel .......... 115
Insert an Image with the Assets Panel................. 117 Portfolio Builder Project........................ 213
Resize and Resample an Image...................... 118
The Image Properties Panel in Depth.................. 122 Project 5
Cupcake Bakery CSS Site 215
Stage 2 Extracting Photoshop Assets . . . . . . . . . . .123
Verify your Adobe ID in Dreamweaver................. 123 Stage 1 Working with Classes . . . . . . . . . . . . . . . . .217
Load a Photoshop File into your Creative Cloud Account.... 125 Review Existing Site Files .......................... 218
Extract Text and Images from a Photoshop File .......... 127 Create a Class Selector to Place Background Images ...... 219
Format the Page Body with Extracted Assets............ 130 Manually Edit CSS Code...........................222
Format Text with Extracted Styles.................... 136 Make an Editable Attribute in a Template ..............225
Format Element Backgrounds with Extracted Styles .......140 Control Float and Clear Properties ...................228
Format Navigation Links with Extracted CSS ............ 145 CSS Mode of the Properties Panel.................... 231
Understanding Hexadecimal Color Codes ..............148 Apply Multiple Classes to Elements...................232
Define Background Images for Navigation Link States ..... 149 Apply Classes to Unlinked Files......................234
Project Review ............................... 152 Insert One HTML Page into Another ..................236
Portfolio Builder Project........................ 153 Stage 2 Creating Online Forms . . . . . . . . . . . . . . . . 240
Create a Form Element............................240
Project 4 The Form Properties Panel in Depth .................. 241
Museum CSS Layout 155 Create Form Text Fields ........................... 242
Create a Menu Field ............................. 245
Stage 1 Creating Layouts with Style Sheets . . . . . .157 Create a Checkbox ..............................248
Prepare the Site Files ............................. 158 Add Submit and Reset Buttons ...................... 249
Define a New Element and Tag Selector ...............160 HTML Form Fields in Depth ........................250
Drag and Drop to Create New Elements ............... 163 Apply CSS to the Form............................253
Define a Selector with an ID Attribute.................166
Understanding CSS Shorthand ...................... 169 Project Review ...............................258
Create New Selectors using the CSS Designer Panel ....... 170 Portfolio Builder Project........................ 259
Create and Manage Nested Elements ................. 172
Control Element Float Position ...................... 176
Work with the CSS Box Model ...................... 179
Define Properties for the <body> Tag.................184
Stage 2 Working with a Template . . . . . . . . . . . . . 187
Create a Template ............................... 187
Understanding Template Objects ....................190
Apply the Template to Existing Pages ................. 191
The Tools>Templates Menu in Depth ................. 192
Creating a New Page from a Template ................194
Edit the Design Template . . . . . . . . . . . . . . . . . . . . . . . . . . 195
ix
