Page 9 - Adobe Dream Viewer 2021

Project 3 Stage 2 / Working with a Template. . . . . . . . . . . . . . 189
Arts Council Website 109 Create a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Apply the Template to Existing Pages. . . . . . . . . . . . . . . . . . 193
Stage 1 / Placing Static Foreground Images . . . . . . . .111
More About Working with Dreamweaver Templates . . . . . . . 197
Review the Existing Project Status . . . . . . . . . . . . . . . . . . . . .112
Stage 3 / Using CSS to Control Content . . . . . . . . . . 198
Place an Image in the Regular Design View . . . . . . . . . . . . . .113
Defi ne HTML Tag Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . 198
Place an Image with the Insert Panel . . . . . . . . . . . . . . . . . . 116
Create Named Anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Drag and Drop an Image from the Insert Panel. . . . . . . . . . . .118
Create a Pseudo-Class Selector . . . . . . . . . . . . . . . . . . . . . . 205
Insert an Image with the Assets Panel . . . . . . . . . . . . . . . . . 120
Create a Figure and Figure Caption . . . . . . . . . . . . . . . . . . . 206
Stage 2 / Extracting Photoshop Assets . . . . . . . . . . . .123
Create Descendant Selectors . . . . . . . . . . . . . . . . . . . . . . . . 210
Verify Your Adobe ID in Dreamweaver . . . . . . . . . . . . . . . . . 123
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213
Load a Photoshop File into Your CC Account . . . . . . . . . . . . 124
Extract Text and Images from a Photoshop File . . . . . . . . . . 126 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . .214
Format the Page Body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Format Element Backgrounds with Extracted Styles . . . . . . . 135 Project 5
Defi ne Background Images. . . . . . . . . . . . . . . . . . . . . . . . . . 139 Music Festival CSS Site 217
Format Text with Extracted Styles. . . . . . . . . . . . . . . . . . . . . 143 Stage 1 / Working with Classes. . . . . . . . . . . . . . . . . .219
Format Links with Descendant Selectors. . . . . . . . . . . . . . . . 146 Review Existing Site Files . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Defi ning Color in CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Create a Class Selector to Place Background Images. . . . . . . 221
Defi ne Background Images for Navigation Link States . . . . . 150 Manually Edit CSS Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 Make an Editable Attribute in a Template. . . . . . . . . . . . . . . 226
Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . 154 Control Float Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
CSS Mode of the Properties Panel . . . . . . . . . . . . . . . . . . . . 233
Project 4 Apply Multiple Classes to Elements . . . . . . . . . . . . . . . . . . . 234
Museum CSS Layout 157 Insert One HTML Page into Another. . . . . . . . . . . . . . . . . . . 236
Stage 2 / Creating Online Forms . . . . . . . . . . . . . . . . 240
Stage 1 / Creating Layouts with Style Sheets. . . . . . .159
Create a Form Element. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Prepare the Site Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
The Form Properties Panel In Depth . . . . . . . . . . . . . . . . . . . 241
Defi ne a New Element and Tag Selector . . . . . . . . . . . . . . . . 162
Create Form Text Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Drag and Drop to Create New Elements . . . . . . . . . . . . . . . . 165
HTML Form Fields In Depth . . . . . . . . . . . . . . . . . . . . . . . . . 245
Defi ne a Selector with an ID Attribute . . . . . . . . . . . . . . . . . 168
Create a Menu Field. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Understanding CSS Shorthand . . . . . . . . . . . . . . . . . . . . . . . 171
Create a Check Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Create New Selectors Using the CSS Designer Panel. . . . . . . 172
Add Submit and Reset Buttons. . . . . . . . . . . . . . . . . . . . . . . 252
Create and Manage Nested Elements. . . . . . . . . . . . . . . . . . 174
Apply CSS to the Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Control Element Float Position . . . . . . . . . . . . . . . . . . . . . . . 178
Work with the CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . 181 Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Defi ne Properties for the <body> Tag . . . . . . . . . . . . . . . . . 186 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . 259

ix