Page 9 - Adobe Dream Viewer CC 2020

Project 3 Stage 2 / Working with a Template . . . . . . . . . . . . . . .191
Arts Council Website 107 Create a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Apply the Template to Existing Pages . . . . . . . . . . . . . . . . . . 195
Stage 1 / Placing Static Foreground Images . . . . . . . 109
More About Working with Dreamweaver Templates . . . . . . . 199
Review the Existing Project Status . . . . . . . . . . . . . . . . . . . . 110
Stage 3 / Using CSS to Control Content . . . . . . . . . . 200
Place an Image in the Regular Design View . . . . . . . . . . . . . .111
Define HTML Tag Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Place an Image with the Insert Panel . . . . . . . . . . . . . . . . . . .114
Create Named Anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Drag and Drop an Image from the Insert Panel . . . . . . . . . . . 116
Create a Pseudo-Class Selector . . . . . . . . . . . . . . . . . . . . . . 207
Insert an Image with the Assets Panel . . . . . . . . . . . . . . . . . .118
Create a Figure and Figure Caption . . . . . . . . . . . . . . . . . . . 208
Resize and Resample an Image . . . . . . . . . . . . . . . . . . . . . . 120
Create Descendant Selectors . . . . . . . . . . . . . . . . . . . . . . . . 212
The Image Properties Panel in Depth . . . . . . . . . . . . . . . . . . 124
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215
Stage 2 / Extracting Photoshop Assets . . . . . . . . . . . .125
Verify Your Adobe ID in Dreamweaver . . . . . . . . . . . . . . . . . 125 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . .216
Load a Photoshop File into Your CC Account . . . . . . . . . . . . 126
Extract Text and Images from a Photoshop File . . . . . . . . . . 128 Project 5
Format the Page Body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Music Festival CSS Site 219
Format Element Backgrounds with Extracted Styles . . . . . . . 137 Stage 1 / Working with Classes . . . . . . . . . . . . . . . . . 221
Define Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Review Existing Site Files . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Format Text with Extracted Styles . . . . . . . . . . . . . . . . . . . . . 145 Create a Class Selector to Place Background Images . . . . . . . 223
Format Links with Descendent Selectors . . . . . . . . . . . . . . . . 147 Manually Edit CSS Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Defining Color in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Make an Editable Attribute in a Template . . . . . . . . . . . . . . . 228
Define Background Images for Navigation Link States . . . . . 152 Control Float Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155 CSS Mode of the Properties Panel . . . . . . . . . . . . . . . . . . . . 235

Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . 156 Apply Multiple Classes to Elements . . . . . . . . . . . . . . . . . . . 236
Insert One HTML Page into Another . . . . . . . . . . . . . . . . . . . 238
Project 4 Stage 2 / Creating Online Forms . . . . . . . . . . . . . . . . 242
Museum CSS Layout 159 Create a Form Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
The Form Properties Panel In Depth . . . . . . . . . . . . . . . . . . . 243
Stage 1 / Creating Layouts with Style Sheets . . . . . . .161
Create Form Text Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Prepare the Site Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
HTML Form Fields In Depth . . . . . . . . . . . . . . . . . . . . . . . . . 247
Define a New Element and Tag Selector . . . . . . . . . . . . . . . . 164
Create a Menu Field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Drag and Drop to Create New Elements . . . . . . . . . . . . . . . . 167
Create a Check Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Define a Selector with an ID Attribute . . . . . . . . . . . . . . . . . 170
Add Submit and Reset Buttons . . . . . . . . . . . . . . . . . . . . . . . 253
Understanding CSS Shorthand . . . . . . . . . . . . . . . . . . . . . . . 173
Apply CSS to the Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Create New Selectors Using the CSS Designer Panel . . . . . . . 174
Create and Manage Nested Elements . . . . . . . . . . . . . . . . . . 176 Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Control Element Float Position . . . . . . . . . . . . . . . . . . . . . . . 180 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . 260
Work with the CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . 183
Define Properties for the <body> Tag . . . . . . . . . . . . . . . . . 188

ix