Adobe Dreamweaver CS6 Digital Classroom Book

Starting Up

About Dreamweaver Digital Classroom 1

Prerequisites 1

System requirements 1

Starting Adobe Dreamweaver 3

Resetting the Dreamweaver workspace 3

Loading lesson files 4

Working with the video tutorials 5

Setting up for viewing the video tutorials 5

Viewing the video tutorials with the Adobe Flash Player 6

Hosting your websites 7

Additional resources 7

Lesson 1: Dreamweaver CS6 Jumpstart

Starting up 9

What is Dreamweaver? 10

Design and layout tools 10

Site management and File Transfer Protocol 11

Coding environment and text editor 11

Mobile design and development features 12

Who uses Dreamweaver? 12

Dreamweaver’s workspace features 13

Live View and Live Code 16

CSS Inspection and the Enable/Disable Feature 17

Related files 18

Code Navigator 19

Photoshop smart objects 20

Support for Content Management Systems 20

HTML5, CSS3, and PHP code hinting 21

HTML and CSS Starter Pages 21

Subversion 22

Business Catalyst integration 22

How websites work22

A simple flow chart 22

Domain names and IP addresses 23

Servers and web hosts23

The role of web browsers 23

An introduction to HTML24

Tag structure and attributes 24

The structure of an HTML document 27

Placing images in HTML 28

Colors in HTML 30

Case sensitivity and whitespace rules 31

Element hierarchy 33

XHTML 1.0 Transitional 33

What’s the difference? 33

Explorations in code 34

A look at the Welcome Screen 35

Creating, opening, and saving documents 36

Creating new documents 36

Self study 38

Review 38

Lesson 2: Setting Up a New Site

Starting up 39

Creating a new site 40

Advanced site-creation options 43

Adding pages 45

Saving a page to your site 48

Defining page properties 49

Work views 55

A deeper look into the Files panel 58

Viewing local files 59

Selecting and editing files 59

Self study 61

Review 61

Lesson 3: Adding Text and Images

Starting up 63

Typography and images on the Web 64

Adding text 64

An introduction to styles 69

Previewing pages in a web browser 73

Understanding hyperlinks 74

Creating hyperlinks 75

Relative versus absolute hyperlinks 77

Linking to an e-mail address 79

Creating lists 80

Using the Text Insert panel 82

Inserting images 83

Image resolution 83

Image formats 83

Creating a simple gallery page 84

Linking images 87

Using image placeholders 88

Editing images 89

Adjusting brightness and contrast 89

Optimizing images 90

Updating images 91

Self study 92

Review 92

Lesson 4: Styling Your Pages with CSS

Starting up 93

What are Cascading Style Sheets? 94

CSS replaces inefficient HTML styling 95

The benefits of CSS styling 96

How do you create CSS rules in Dreamweaver? 98

Understanding Style Sheets 102

Understanding why they’re called Cascading 105

Creating and modifying styles 106

Creating a class style with the Property Inspector 108

Creating and modifying styles in the CSS Styles panel 111

Advanced text formatting with CSS 112

Fine-tuning page appearance with contextual and pseudo-class selectors 115

Div tags and CSS IDs 119

Internal versus external style sheets 120

Attaching an external style sheet to your page 122

Modifying attached style sheets 122

Creating a new .css file (external style sheet) 124

Self study 126

Review 126

Lesson 5: Creating Page Layouts with CSS

Starting up 127

The CSS Box model 128

The basics of CSS margins, padding, and borders 128

Reviewing the

element 129

Reviewing the ID selector 129

Creating a centered container for your page 132

Making layouts cross-browser compatible 135

Absolute versus relative positioning 136

Positioning content with AP Divs 138

Creating a header section with the Draw AP Div 139

Adding an introduction section to your page 142

Adding images to your layout 144

Photoshop integration 145

Adding Main and Sidebar content areas 146

Adding additional content and styles 148

Setting margins and borders 149

Overriding default margins in CSS 150

Adding borders to elements 151

Future proofing your layout 152

The pros and cons of Absolutely Positioned CSS layouts 153

Self study 156

Review 156

Lesson 6: Advanced Page Layout Starting up 157

Layout with AP divs versus layout with floats 158

Creating a floated image 159

Creating columns with HTML and CSS 161

Creating the HTML Structure with div elements 161

Setting the width and floating the columns 163

Using the clear property 165

Creating a list-based navigation bar 166

Changing column layout and size 172

Creating the appearance of equal height columns 175

Browser compatibility 178

Adding code for IE 6 178

Applying finishing touches 179

Creating more sophisticated layouts 180

Dreamweaver Fluid Grid Layout 181

Self study 182

Review 182

Lesson 7: CSS3 Transitions and Web Fonts

Starting up 183

Understanding the role of CSS3 184

Adding a CSS Transition 184

Modifying a CSS Transition 190

Adding CSS Transitions to a navigation menu 196

The basics of web fonts 199

Adding web fonts to your site 200

Styling your heading with a web font 205

Self study 208

Review 208

Lesson 8: Working with Tables

Starting up 209

Using tables in web design 210

Importing table data 210

Selecting table elements 213

Modifying table size215

Modifying table structure 217

Creating a table 219

Formatting and styling tables in HTML 221

Formatting and styling tables with CSS 226

Advanced CSS styling of tables 229

Controlling cell alignment, padding, and borders with CSS 232

Creating alternate row styling with CSS 234

Reusing CSS for other tables 236

Data sorting tables 238

Self study 240

Review 240

Lesson 9: Fine-Tuning Your Workflow Starting up 241

Customizing panels and panel groups 242

Using the Favorites tab on the Insert bar 245

Resizing the document window 246

Changing the Zoom level 249

Using guides 250

Using grids 253

The tag selector 255

Tiling documents 256

Self study 257

Review 257

Lesson 10: Adding Flash, Video, and Sound Content

Starting up 259

Making web content interesting 260

Inserting Flash movies 260

Adding video 263

Flash Video 263

QuickTime video and Windows Media 266

Inserting sound 269

Self study 272

Review 272

Lesson 11: Maximizing Site Design

Starting up 273

Creating modular page elements 274

Introducing snippets 274

The Snippets panel 275

Creating new snippets 276

Introducing library items 280

Modifying and updating library items 282

Introducing templates 285

Creating a new template 285

Working with editable regions 286

Creating new pages from templates 287

Modifying templates 289

Repeating regions 290

Putting repeating regions into action 291

Detach from Template command 293

Self study 294

Review 294

Lesson 12: Working with Code-editing Features

Starting up 295

Working with code 296

Accessing code with the Quick Tag editor 296

Inserting tags with the Tag Chooser298

Inserting and editing comments 299

Using HTML5 Code-hinting 300

Working in the Code view 302

Modifying the Code view workspace 303

The Coding toolbar 305

Collapsing and expanding tags and code blocks 307

Validating your code 308

Highlighting and correcting invalid code 308

Running a Report 309

Formatting code 311

Indenting 313

Self study 314

Review 314

Lesson 13: Building Web Forms

Starting up 315

The basics of HTML forms 316

How forms work 316

Building a contact form 317

Inserting the

Titling your documents with the <title> tag 432

Adding meta keywords and descriptions 435

Launching your site 436

Site Launch Checklist 436

Uploading your site 437

Getting help and using the reference guides 438

The Reference panel 439

Suggested next steps 439

Website design resources 440

Self study 441

Review 441

Lesson 17: Dreamweaver CS6 New Features

What’s new in Dreamweaver CS6? 443

Fluid Grid Layout 444

CSS transitions 446

Web fonts 447

jQuery Mobile Swatches 448

PhoneGap Build Service 448

New Features in Dreamweaver CS5.5 449

CSS3 and HTML5 authoring support 449

jQuery Mobile integration 450

Support for building native mobile apps for iOS and Android with PhoneGap 451

W3C Validation 451