COURSE TECHNOLOGYCENGAGE Learning'

ShellyCashmanSeries,

Australia • Brazil • japan • Korea • Mexico • Singapore • Spain • United Kingdom • United States

.:. Dreamweaver CS6

vii

INTRODUCTION

Web Site Development and AdobeDreamweaver CS6

Objectives DW1

Web Site Planning and Design Basics DW 2

Types of Web Sites DW 2

Browser Considerations DW 4

Web Site Navigation DW 7

Mobile Site Access DW 8

Planning a Web Site DW 8

Planning Basics DW 9

Design DW 10

Accessibility Guidelines DW 12

Role of Social Networking DW 13

Web Site Hosting DW 14

Project Management DW 16

Testing the Site DW 16

Maintaining the Site DW 16

Web Programming Languages DW 17

HTML and XHTML DW 17

HTML5 DW18

DHTML DW 18

XML DW 18

PHP DW 18

ASP DW18

jQuery DW 18

Web Page Authoring Programs DW 19

About Adobe Dreamweaver CS6 DW 19

Chapter Summary DW 21

Apply Your Knowledge DW 21

Extend Your Knowledge DW 22

Make It Right DW 22

In the Lab DW 22

Cases and Places DW 24

CHAPTER ONE

Creating a New Web Site

with Dreamweaver

Objectives DW 25

What Is Dreamweaver CS6? DW 26

Project — Small Business Incubator

Web Site Plan DW 26

Overview DW 27

Starting Dreamweaver DW 28

To Start Dreamweaver DW 28

Touring the Dreamweaver Window DW 30

Dreamweaver Workspace DW 30

Displaying Document Views DW 35

Opening and Closing Panels DW 37

To Show, Hide, and Move Panels DW 37

To Reset the Classic Workspace DW 39

To Display the Standard Toolbar DW 40

To Access Preferences DW 41

Understanding HTML5 DW 42

Understanding CSS3 DW 43

Creating a New Site DW 43

Defining a Local Site DW43

Creating the Local Root Folder and Subfolders DW 44

Using Site Setup to Create a Local Site DW 45

To Quit and Restart Dreamweaver DW 45

To Use Site Setup to Create a Local Site DW 46

Selecting a Predefined Template DW 49

To Select a Template Layout DW 50

To Name and Save the Home Page DW 51

To Edit Navigation Link Text DW 53

To Format Text Using Heading Styles DW 54

To Create a Link DW 56

To Save the Home Page DW 57

To Add a Second Page DW 58

To Create an Unordered List DW 59

To Add the Links to the Second Page DW 61

To Change the Web Page Title DW 62

Iv Contents Adobe Dreamweaver CS6 Complete

To Check Spelling DW 63 CHAPTER THREE

Previewing a Web Page in a Browser DW 63 Adding GraphicsTo Choose a Browser and Preview the Web Site DW64 and Links

Dreamweaver Help DW 65 Objectives DW 139

To Access Dreamweaver Help DW65 Introduction DW 140

To Quit Dreamweaver DW65Project — Promotional Images DW140

Chapter Summary DW 66 Overview DW 142

Apply Your Knowledge DW66Modifying a Template DW 143

Extend Your Knowledge DW 67 To Modify a Dreamweaver Template byMake It Right DW69 Editing a CSS Rule DW 144

In the Lab DW 70 To Modify a Dreamweaver Template byCases and Places DW75

Adding an Editable Region DW 146

Adding Graphics To the Web Site DW148

CHAPTER TWO Understanding Image File Formats DW 149

Designing a Web Site Adding Alt Text to Provide Accessibility DW 150

Using a Template and CSS To Copy Files into the Images Folder DW 150

Objectives DW 77 To Insert a Logo Image in the Template DW 152

Designing Web Pages with CSS DW 78 Marketing a Site with Facebook and Twitter DW 153

Project— Custom Template and Style Sheet DW 78 To Insert Social Networking Icons in the

Overview DW79 Template DW 155

Anatomy of a Style Sheet DW 80 To Insert an Image on the Home Page DW 157

Understanding the Structure of a Style DW81 Creating Additional Pages for the Site DW 159

Identifying Types of Style Sheets DW 82 To Create the Services Web Page DW 159

Creating a Dreamweaver Web Template DW84 To Create the Portfolio Web Page DW 161

Organizing the Site Structure DW 84 To Create the Pricing Web Page DW 164

To Create a New Site DW 86 To Create the Session Web Page DW 165

To Create Folders for the Image and CSS Files DW 87 To Create the Contact Web Page DW 166

To Create a Blank HTML Template DW 88 Adding Links to the Gallery Site DW168

To Save the HTML Page as a Template DW 90 To Add Relative Links to the

Adding CSS Styles DW92 Gallery Template DW 170

To Add a Div Tag DW 93 To Add Absolute Links to the

Setting CSS Rule Definitions DW 97 Gallery Template DW 172

To Select CSS Rule Definitions DW 97 To Add an E-mail Link to the

To Add the Logo Div Tag and Define Gallery Template DW 174

Its CSS Rules DW 100 Formatting Links DW 175

To Add the Navigation Div Tag and To Format a Link as Rollover Text DW 176

Define Its CSS Rules DW 104 Modifying the CSS Style Sheet DW 178

To Add the Image Div Tag and Define Creating Compound Styles DW 178

Its CSS Rules DW107 To Add New CSS Rules with a

To Add the Content Div Tag and Define Compound Selector DW 178

Its CSS Rules DW 109 Adding an Image Placeholder DW 180

To Add the Footer Div Tag and Define To Define an Image Placeholder DW 181

Its CSS Rules DW 111 To Replace an Image Placeholder DW 183

Creating an Editable Region of a Template DW 113 To Add Image Placeholders DW 184

To Create an Editable Region DW 113 Chapter Summary DW 186

To Close the Template DW 115 Apply Your Knowledge DW 186

Creating a New Page from a Template DW115 Extend Your Knowledge DW 187

To Create a Page from a Template DW 115 Make It Right DW 189

To View the Site in Live View DW 118 In the Lab DW 190

Chapter Summary DW119 Cases and Places DW199

Apply Your Knowledge DW 119

Extend Your Knowledge DW122

Make It Right DW123

In the Lab DW 125

Cases and Places DW 136

Adobe Dreamweaver CS6 Complete Contents v

CHAPTER FOUR CHAPTER FIVE

Exploring Tables and Forms Creating Interactive Web PagesObjectives DW 201 with Spry and Adobe WidgetsIntroduction DW 202 Objectives DW 269

Project — Formatted Tables and Forms DW 202 Introduction DW 270

Overview DW 203 Project — Interactive Web Pages DW 270

Understanding Tables DW 204 Overview DW 271

Designing Table Layouts DW 205 Understanding the Spry Framework DW 272

Adding a Summary to Provide Accessibility DW 206 Spry Widget Options DW 273

To Insert a Table into the Services Page DW 207 Adding Spry to a Web Page DW 274

To Add Text to the Table DW 209 Using Spry Validation Widgets DW 275

Formatting Tables DW210 To Open the Contact Web Page and Select

Setting Cell, Row, and Column Properties DW211 the Spry Category on the Insert Bar DW 275

Selecting Table Elements DW213 To Add Spry Validation to a RequiredTo Format Table Text DW214 Text Field DW276

To Format the Table Caption DW215 To Add Spry Validation to Another

Understanding the HTML Structure of Required Text Field DW 279

a Table DW216 To Add Spry Validation to an E-mail

To Insert a Table into the Pricing Page DW217 Text Field DW 281

Merging and Splitting Cells in a Table DW219 To Add Spry Validation to a Phone

To Merge Cells in a Table DW 220 Number Text Field DW283

To Add Text to the Pricing Table DW 221 To Add Spry Validation to Another

To Align the Table DW 223 Required Text Field DW 284

To Adjust the Table Width DW 224 To Add Spry Validation to a Radio Group DW 287

To Adjust the Column Width DW 225 To Test the Spry Validation Form in

Changing the Default Cell Alignment DW 227 a Browser DW290

To Align Text within a Table Cell DW 228 Using Spry Collapsible Panels DW 292

To Set the Background Color of To Add Spry Collapsible Panels to a

Cells in a Table DW 229 Web Page DW292

Understanding How Forms Work DW 231 To Add Panel Headings DW296

Creating a Form DW 231 Using the Adobe Widget Browser DW 297

Form Processing DW 231 To Check Your Computer for the

To Insert a Form into a Web Page DW232 Adobe AIR Application DW 298

Using the Form Property Inspector DW234 To Download and Install Adobe AIR DW 299

To Insert a Table to Design the Form DW 235 To Create an Adobe Account DW 300

To Add Labels to the Table DW 236 To View and Add Widgets from

Adding Form Objects DW 237 Adobe Exchange to My Widgets DW 303

Adding Text Fields DW 238 Editing and Formatting Widgets DW 306

To Add Text Fields to a Form DW 239 To Create a Widget Preset for the

Adding a Menu DW 243 LightBox Gallery Widget DW306

To Add a Menu to a Form DW 243 Adding an Adobe Widget to a Web Page DW 309

Text Field Properties DW 246 To Add the LightBox Gallery WidgetTo Add an Initial Value to a Text Field DW 247 to a Web Page DW311

Adding Radio Buttons in a Radio Group DW 248 To Add Images to the Portrait PhotographyTo Add a Radio Group DW 248 LightBox Gallery Widget DW314

To Add Submit and Reset Buttons to a Form DW250 To Add Images to the Family PhotographyChapter Summary DW 253 LightBox Gallery Widget DW317

Apply Your Knowledge DW254 To Add Images to the Baby Photography

Extend Your Knowledge DW 255 LightBox Gallery Widget DW319

Make It Right DW 256 Chapter Summary DW 322

In the Lab DW 258 Apply Your Knowledge DW 322

Cases and Places DW267 Extend Your Knowledge DW 323

Make It Right DW 324

In the Lab DW 325

Cases and Places DW 329