Dreamweaver CC For Dummies®

Visit www.dummies.com/cheatsheet/dreamweavercc to view this book's cheat sheet.

Table of Contents

Introduction

About This Book

Using Dreamweaver on a Mac or PC

Conventions Used in This Book

What You’re Not to Read

Foolish Assumptions

How This Book Is Organized

Part I: Getting Started with Dreamweaver CC

Part II: Creating Page Designs with Style

Part III: Making Your Site Cool with Advanced Features

Part IV: The Part of Tens

Icons Used in This Book

Where to Go from Here

Part I: Getting started with Dreamweaver CC

Chapter 1: The Many Ways to Design a Web Page

Comparing Static and Dynamic Sites

Working with Templates in Dreamweaver

Creating and editing Dreamweaver templates

Editing WordPress, Joomla!, and Drupal templates

Assessing Other Web Design Tools

Understanding How to Build a Website in Dreamweaver

Managing your site’s structure

Exploring HTML, XHTML, and HTML5

Comparing Tables, Frames, and Layers

Creating page designs with HTML tables

Considering design options with HTML frames

Appreciating the Benefits of Cascading Style Sheets

Understanding Browser Differences

Introducing the Dreamweaver CC Workspace

Changing workspace layouts

The menu bar

The Document toolbar

The Document window

The docking panels

The Insert panel

The Property inspector

The status bar

Changing preference settings

Chapter 2: Opening and Creating Sites

Setting Up a New or Existing Site

Switching among Sites

Managing Sites in Dreamweaver

Creating Pages

Starting from the Welcome screen

Creating an HTML page with the New Document window

Naming new page files

Naming the first page index.html

Bestowing a page title

Changing Page-Wide Styles with the Page Properties Dialog Box

Changing background and text colors

Changing link styles with Page Properties

Adding and Formatting Text

Adding text to a web page

Formatting text with the heading tags

Adding paragraphs and line breaks

Setting Links in Dreamweaver

Linking pages within your website

Setting links to many pages at once

Linking to another website

Setting a link to an e-mail address

Linking to PDFs

Adding Meta Tags for Search Engines

Chapter 3: Creating Web Graphics

Creating and Optimizing Web Graphics

Resizing graphics and photos

Choosing the best image format

Saving images for the web: The basics

Optimizing JPEG images for the web

Optimizing images in GIF and PNG formats

How small is small enough?

Inserting Images in Dreamweaver

Image Editing in Dreamweaver

Cropping an image

Adjusting brightness and contrast

Sharpening an image

Opening an image in Photoshop or Fireworks from Dreamweaver

Inserting a Background Image

Chapter 4: Managing, Testing, and Publishing a Website

Understanding Why Web Pages Can Look Bad in Some Browsers

Understanding browser differences

Targeting browsers for your design

Previewing Your Page in a Browser

Adding web browsers to the preview feature

Previewing pages in many web browsers

Testing sites with online browser services

Testing your designs with mobile, tablet, and desktop previews

Testing Your Work with the Site Reporting Feature

Finding and Fixing Broken Links

Checking for broken links

Fixing broken links

Making Global Changes to Links

Managing Files and Folders in Your Site

Moving and renaming files and folders

Creating files and creating and deleting folders

Publishing Your Website

Setting up Dreamweaver’s FTP features

Publishing files to a web server with FTP

Synchronizing local and remote sites

Setting cloaking options

Using Design Notes to Keep in Touch

Part II: Creating Page Designs with Style

Chapter 5: Introducing Cascading Style Sheets

Introducing Cascading Style Sheets

Understanding the basics of styles

Combining CSS and HTML

Understanding style selectors

Using internal versus external style sheets

Looking at the code behind the scenes

Introducing the CSS Designer Panel

Identifying and selecting styles

Reviewing CSS Selector Options

The Layout options

The Text panel

The Border panel

The Background panel

The Box-Shadow panel

The List panel

The CSS Transitions panel

Switching between CSS and HTML Mode in the Property Inspector

Chapter 6: Creating and Editing CSS Styles

Organizing Style Sheets

Creating an internal style sheet

Creating an external style sheet

Attaching an external style sheet to a page

Moving and copying styles

Creating Style Rules

Defining styles with the tag selector

Creating styles with class and ID selectors

Applying class and ID styles

Resetting HTML elements with CSS

Creating Layouts with CSS and Div Tags

Using Dreamweaver’s CSS Layouts

Creating a new page with a CSS layout

Editing the styles in a CSS layout

Creating a Navigation Bar from an Unordered List of Links

Comparing Margins and Padding in CSS

Aligning and Centering Elements in CSS

Centering a page layout with CSS margins

Aligning the contents of an element

Aligning elements with floats

Editing, Renaming, and Removing Styles

Editing a style

Renaming existing styles

Removing or changing a style

Chapter 7: Designing with CSS3

Comparing Browser Support for CSS3

Adding drop and text shadows

Adding drop shadows to images and divs

Softening Edges with Rounded Corners

Enhancing Your Site with Custom Fonts

How does the @font-face rule work?

Using custom fonts from the Google Web Fonts site

Chapter 8: Creating Responsive Designs with Fluid Grid Layouts

Understanding Responsive Web Design

Designing Pages with Fluid Grid Layouts

Creating a new fluid grid layout

Adding fluid elements to a layout

Positioning elements to create three layouts in one fluid grid

Creating Custom Media Queries

Applying styles to your page designs

Using media queries in external style sheets

Creating media queries in Dreamweaver

Chapter 9: Saving Time with Templates and More

Templating Your Pages

Creating Templates

Creating editable and uneditable regions

Creating a new Dreamweaver template

Saving any page as a template

Making attributes editable

Creating a Page from a Template

Making Global Changes with Templates

Opening a template from any page created from a template

Reusing Elements with the Library Feature

Creating and Using Library Items

Creating a library item

Adding a library item to a page

Highlighting library items

Making global changes with library items

Editing one instance of a library item

Using a Tracing Image to Guide Your Design Work

Chapter 10: Coming to the HTML Table

Understanding HTML Tables

Creating Tables in Dreamweaver

Changing your table’s appearance

Making tables more accessible

Specifying cell options

Aligning table content in columns and rows

Merging and splitting table cells

Sorting Table Data

Nesting Tables within Tables

Part III: Making Your Site Cool with Advanced Features

Chapter 11: Adding Interactivity with Behaviors

Brushing Up on Behavior Basics

Creating a Simple Rollover Image

Adding Behaviors to a Web Page

Creating swaps with multiple images

Using the Open Browser Window behavior

Attaching Multiple Behaviors

Editing a Behavior

Installing New Extensions for Behaviors

Chapter 12: Using jQuery UI and Mobile Widgets

Making Magic with jQuery

Creating Collapsible Panels

Creating Tabbed Panels

Using jQuery Mobile Widgets

Chapter 13: Showing Off with Multimedia

Understanding Multimedia Players

Using YouTube, Vimeo, and Other Online Services to Host Videos

Using SoundCloud to Host Audio Files

Using Adobe Flash

Inserting Flash SWF files

Setting Flash properties

Using scripts to make Flash function better

Working with Adobe Edge Animate Files

Working with Video and Audio on the Web

Comparing popular video formats

Comparing popular audio formats

Adding Audio and Video Files to Web Pages

Linking to audio and video files

Inserting audio and video files

Setting options for audio and video files

Adding Flash audio and video files

Part IV: The Part of Tens

Chapter 14: Ten Resources You May Need

Registering a Domain Name

Dressing Up the Address Bar with a Favicon

Add Forms with Online Services

Selling Stuff on the Web

Sharing Your Computer Screen Remotely

Keeping Track of Traffic

Taking Your Site’s Temperature with a Heat Map

Surveying Your Visitors

Keeping Up with Web Standards at W3.org

Extending Dreamweaver at Adobe.com

Chapter 15: Ten Ways to Promote Your Site

Scoring High in Search Engines

Buying Traffic (Yes, You Really Can!)

Using Social Networking Sites for Promotion

Increasing Your Ranking on Social Bookmarking Sites

Spreading the Love with Social Media Share Buttons

Enticing Visitors to Return for Updates

Marketing a Website to the Media

Unleashing the Power of Viral Marketing

Blogging, Blogging, Blogging

Gathering Ideas from Other Websites

Cheat Sheet

About the Author

Janine Warner’s best-selling books and videos about the Internet have won her an international following and earned her speaking and consulting engagements around the world.

She is also the founder and managing director of DigitalFamily.com, a full-service interactive design and training agency that offers web and mobile design, content strategy, and Internet marketing services.

Janine’s skills as a “techy translator” helped her land the deal for her first book in 1996. Since then, she’s written or coauthored more than 25 books, including Web Sites For Dummies, Mobile Web Design For Dummies, and every edition of Dreamweaver For Dummies. She has also created more than 50 hours of training videos about web design and content strategy for Lynda.com and KelbyTraining.com.

Janine has taught courses at the University of Miami and the University of Southern California. She’s also been a guest lecturer at more than 20 other universities in the United States and Latin America, and she helped create an Internet Literacy program for high school students in Central America.

She is a member of the TV Academy’s Interactive Media Peer Group and has served as a judge in the Interactive Emmy Awards, the Knight News Challenge, and the Arroba de Oro Latin American Internet Awards.

In 1998, Janine’s experience as a journalist and Internet consultant, combined with her fluency in Spanish, took her to The Miami Herald as Online Managing Editor. A year later, she was promoted to Director of New Media. She left that position to serve as Director of Latin American Operations for CNET Networks.

Since 2001, Janine has run her own business as an author, a consultant, and a speaker. Over the years, she’s worked with one of Russia’s largest publishing companies in Moscow; traveled to New Delhi to speak at Internet World India; and worked with media companies and other businesses in Colombia, Chile, Brazil, Panama, Costa Rica, Nicaragua, El Salvador, Mexico, and Spain.

When she’s not traveling, she is based in Southern California, where she lives with her husband, David LaFontaine, manages DigitalFamily.com and occasionally takes a break to run on the beach.

Dedication

To all those who aspire to share their stories and passions on the web: May all your dreams come true.

Author’s Acknowledgments

More than anything, I want to thank all the people who have read my books or watched my videos over the years. You are my greatest inspiration, and I sincerely enjoy it when you send me links to your websites. You'll find my e-mail address on my site at www.DigitalFamily.com.

Special thanks to David LaFontaine, my partner in all things digital and analog, whose patience and support keep me fed, loved, and (mostly) sane, even when I’m up against impossible deadlines.

For letting me feature their websites in this book, a heartfelt thanks to my friends and clients Laurie Ann Schag and Casey Stoll (www.Cinembargo.com), and James Kober (www.AssetShield.com).

Thanks to the entire editorial team on this book: Susan Pink for her attention to detail and quick turnaround on the editing, Jon McFarland for reviewing all the technical details, and Bob Woerner for shepherding this book through the development and publishing process (again and again and again).

Over the years, I’ve thanked many people in my books — family, friends, teachers, and mentors — but I have been graced by so many wonderful people now that no publisher will give me enough pages to thank them all. So let me conclude by thanking everyone who has ever helped me with a website, book, video, or any other aspect of the writing and research that goes into these pages. Okay, now I think I can go to sleep tonight without fearing that I’ve forgotten anyone. Thank you, thank you, thank you.

Publisher’s Acknowledgments

We’re proud of this book; please send us your comments at http://dummies.custhelp.com. For other comments, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002.

Some of the people who helped bring this book to market include the following:

Acquisitions and Editorial

Project Editor: Susan Pink

Acquisitions Editor: Bob Woerner

Copy Editor: Susan Pink

Technical Editor: Jon McFarland

Editorial Manager: Jodi Jensen

Editorial Assistant: Annie Sullivan

Sr. Editorial Assistant: Cherie Case

Cover Photos: Front cover image courtesy of Janine Warner; computer monitor © iStockphoto.com/MorganLeFaye; back cover images courtesy of Janine Warner

Composition Services

Project Coordinator: Sheree Montgomery

Layout and Graphics: Carrie A. Cesavice, Jennifer Goldsmith, Amy Hassos, Joyce Haughey

Proofreaders: Melissa Cossell, Lisa Young Stiers

Indexer: BIM Indexing & Proofreading Services

Publishing and Editorial for Technology Dummies

Richard Swadley, Vice President and Executive Group Publisher

Andy Cummings, Vice President and Publisher

Mary Bednarek, Executive Acquisitions Director

Mary C. Corder, Editorial Director

Publishing for Consumer Dummies

Kathleen Nebenhaus, Vice President and Executive Publisher

Composition Services

Debbie Stailey, Director of Composition Services

Introduction

In the last few years, the Internet has experienced extraordinary growth and has gone through incredible changes. As more and more users access the web with smartphones, tablets, Apple TVs, dashboard-mounted touchscreens in cars, and even tiny head-mounted displays on Google Glass, web designers have been forced to design sites that work on devices from tiny mobile screens to giant television sets.

Simultaneously, the technologies that work best on the web are changing. The once popular design tool Adobe Flash is losing its audience because videos and animations created in Flash don’t work on the iPad or iPhone. Fortunately, HTML5 and CSS3 (the latest flavors of the Hypertext Markup Language and Cascading Style Sheets, respectively), make it possible to add new design features and greater interactivity without the need for Flash.

I can’t cover every detail of all these technologies in this book, but I do give you a solid introduction to modern web design. You discover how the newest features in Dreamweaver CC make it easier to create web pages that meet modern standards and adapt to all the screens used to view websites today.

In this fully updated version of Dreamweaver For Dummies, I added a new chapter to show you how to create responsive web page designs that adjust to fit different screen sizes, using Dreamweaver’s fluid grid layout features.

Over the years, web design has evolved into an increasingly complex field, and Dreamweaver has evolved with it, adding features that go way beyond the basics of combining a few words and images. Adobe’s dedication to keeping up with changing standards and adding new features with each new version is why Dreamweaver is such a popular program among professional web designers, as well as among a growing number of people who want to build sites for their hobbies, clubs, families, and small businesses.

In the 15-plus years that I’ve been writing about web design, I’ve seen many changes — from the early days (before Dreamweaver even existed) when you could create only simple pages with HTML 1.0, to the elaborate designs you can create with Dreamweaver today using HTML5, CSS3, jQuery, multimedia, and more.

If you’re not sure what those acronyms mean yet, don’t worry. I remember what it was like to figure out all this stuff, so I designed this book to introduce you to the basic concepts before you get into the more advanced features. To prepare you for the ever-changing world of web design, I show you how to use Dreamweaver to create websites that take advantage of the latest advances in web technology — including CSS3, covered in the Chapter 7, and responsive design, covered in the brand-new Chapter 8.

One of the challenges of web design today is that web pages are not only displayed on different kinds of computers but also downloaded to computers with monitors as big as widescreen televisions — or as small as the little screens on cell phones. As a result, creating websites that look good to all visitors is a lot more complex than it used to be — and standards have become a lot more important. This book shows you not only how to use all the great features in Dreamweaver but also how to determine which of those features best serve your goals and your audience.

About This Book

I designed Dreamweaver CC For Dummies to help you find the answers you need when you need them. You don’t have to read through this book cover to cover, and you certainly don’t have to memorize it. Consider this a quick study guide and a reference you can return to. Each section stands alone, giving you easy answers to specific questions and step-by-step instructions for common tasks.

Want to find out how to change the background color in page properties, design CSS style rules to align images, or add an interactive photo gallery with the Swap Image behavior? Jump right to the pages that cover those features. (Hint: the Table of Contents and index can help you find the sections that interest you most.) Don’t worry about getting sand on this book at the beach or coffee spilled on the pages at breakfast. I promise it won’t complain!

You find templates, artwork, and other goodies to use with this book at www.DigitalFamily.com/bonus.

Using Dreamweaver on a Mac or PC

Dreamweaver works almost identically on Macintosh or Windows computers. To keep screenshots consistent throughout this book, I’ve used a computer running Windows 7. However, I’ve tested the program on both platforms, and whenever I find a difference in how a feature works, I indicate that difference in the instructions.

Conventions Used in This Book

Keeping things consistent makes them easier to understand. In this book, those consistent elements are conventions. Notice how the word conventions is in italics? I frequently put new terms in italics and then define them so you know what they mean. It just makes reading so much nicer.

When I type actual URLs (web addresses) in regular paragraph text, they look like this: www.digitalfamily.com.

I also assume that your web browser doesn't require the introductory http:// for web addresses. If you use an older browser, remember to type that quaint prefix before the address (also make sure you include that part of the address when you're creating links in Dreamweaver).

Even though Dreamweaver makes understanding HTML pages easier, you may want to wade into HTML waters occasionally. I include HTML code in this book when I think it can help you better understand how things work in Design view. Sometimes it’s easier to remove or edit a tag in Code view than Design view. When I do provide examples — including filenames, file extensions, attributes, and tags, such as the following code that links a URL to a web page — I set off the HTML in monospaced type:

 

<a href="http://www.digitalfamily.com">Learn more about Dreamweaver at Janine's DigitalFamily website</a>

When I introduce you to a new set of features, such as options in a dialog box, I set those items apart with bullet lists so you can see that they’re all related. When I want you to follow instructions, I use numbered step lists to walk you through the process.

What You’re Not to Read

If you’re like most of the web designers I know, you don’t have time to wade through a thick book before you start working on your website. That’s why I wrote Dreamweaver CC For Dummies in a way that makes it easy for you to find the answers you need quickly. You don’t have to read this book cover to cover. If you’re in a hurry, go right to the information you need most and then get back to work. If you’re new to web design or you want to know the intricacies of Dreamweaver, skim through the chapters to get an overview — and then go back and read what’s most relevant to your project in greater detail. Whether you’re building a simple site for the first time or working to redesign a complex site for the umpteenth time, you find everything you need in these pages.

Foolish Assumptions

Although Dreamweaver is designed for professional developers, I don’t assume you’re a pro — at least not yet. In keeping with the philosophy behind the For Dummies series, this book is an easy-to-use guide designed for readers with a wide range of experience. If you’re interested in web design and want to create a website, that’s all I expect from you.

If you’re an experienced web designer, Dreamweaver CC For Dummies is an ideal reference for you because it gets you working quickly with the ­program — starting with basic web-page design features and progressing to more advanced options. If you’re new to web design, this book walks you through all you need to know to create a website, from creating a new page to publishing your finished project on the web.

How This Book Is Organized

To ease you through the learning curve associated with any new program, I organized Dreamweaver CC For Dummies as a reference. This section provides a breakdown of the four parts of the book and what you can find in each one. Each chapter walks you through the features of Dreamweaver step by step, providing tips and helping you understand the vocabulary of web design as you go along.

Part I: Getting Started with Dreamweaver CC

Part I introduces you to the basic concepts of web design as well as the main features of Dreamweaver. In Chapter 1, I give you an overview of the many approaches to web design, so you can best determine how you want to build your website before you get into the details of which features in Dreamweaver are best suited to any particular design approach. In Chapter 2, I start you on the road to your first website — including creating a new site, importing an existing site, creating new web pages, applying basic formatting, and setting links. To make this chapter more interesting and help you see how all these features come together, I walk you through creating a real web page as I show you how the features work.

In Chapter 3, I move on to graphics, with an introduction to creating graphics for the web, an overview of the differences in formats (GIFs, JPEGs, and PNG files), and detailed instructions for adding and positioning graphics in your pages. In Chapter 4, you discover Dreamweaver’s testing and publishing features, so you can make sure that all your links work and that your website will look good in the most important web browsers. You also find everything you need to start uploading pages to the Internet.

Part II: Creating Page Designs with Style

Chapter 5 provides an overview of how Cascading Style Sheets work and how they can save you time. CSS has become the way to create page designs and manage formatting on web pages, and these features have been dramatically improved in Dreamweaver CC. In this chapter, you find descriptions of the style definition options available in Dreamweaver as well as instructions for creating and applying styles. In Chapter 6, I take you further into CSS, introducing you to the power of <div> tags, how to create CSS layouts, how to create centered CSS designs, and how to use Dreamweaver's newest CSS testing features. In Chapter 7, I show how Dreamweaver CC has more fully integrated some of the hot new design options, such as drop shadows and gradients, which were made possible by CSS3.

In Chapter 8, I introduce fluid grid layouts, which make it easier to create websites using a new technique called responsive design. The advantage of responsive design, sometimes called adaptive design, is that it enables you to create page layouts that adjust to different screen sizes so that they look as good on tiny smartphone screens as they do on giant desktop monitors. In Chapter 9, I cover the use of templates and Dreamweaver’s Library items, which come in handy for commonly used elements, such as the copyright on all your web pages. In Chapter 10, I take a look at HTML Tables, and show where and how this time-honored technique is still relevant with modern web design.

Part III: Making Your Site Cool with Advanced Features

In Part III, you discover how cool your site can look when you add interactive images, audio, video, and drop-down menus. In Chapter 11, you find instructions for creating an interactive photo gallery with the Swap Image behavior, as well as how to use other features in Dreamweaver’s Behaviors panel — including the Open New Browser behavior. In Chapter 12, you discover how great the Spry features are for adding AJAX interactivity to your site. You find instructions for creating and customizing drop-down lists, collapsible panels, and more. In Chapter 13, you find out what it takes to add multimedia to your web pages, including how to insert and create links to a variety of file types — from Flash to HTML5 animations, and video and audio files.

Part IV: The Part of Tens

Part IV features two quick references to help you develop the best websites possible. Chapter 14 provides a collection of online resources where you can register domain names and find hosting services, as well as a few services that can help you take care of more advanced challenges (such as setting up interactive forms and e-commerce shopping carts). In Chapter 15, you find ten ways to promote your website, from search engine optimization to social media and beyond.

Icons Used in This Book

This icon points you toward valuable resources on the web.

This icon reminds you of an important concept or procedure that you’ll want to store away in your own memory banks for future use.

This icon signals technical stuff that you may find informative and interesting, though it isn’t essential for using Dreamweaver. Feel free to skip over this information.

This icon indicates a tip or technique that can save you time and money — and a headache — later.

This icon warns you of any potential pitfalls — and gives you the all-important information on how to avoid them.

Where to Go from Here

To familiarize yourself with the latest in web design strategies and options, don’t skip Chapter 1, which guides you through the many ways to create websites that you have to choose from today. If you’re ready to dive in and build a basic website right away, jump ahead to Chapter 2. If you want to find out about a specific trick or technique, consult the Table of Contents or the index; you won’t miss a beat as you work to make those impossible web design deadlines. Most of all, I wish you great success in all your web projects!

Occasionally, we have updates to our technology books. If this book does have technical updates, they will be posted at

 

dummies.com/go/dreamweaverccfdupdates

Part I

Getting started with Dreamweaver CC

For Dummies can help you get started with lots of subjects. Visit http://www.dummies.com/extras/dreamweavercc to learn more and do more with For Dummies.

In this part . . .

Compare different layout techniques you can use in Dreamweaver.

Explore the toolbars, menus, and panels that make up Dreamweaver’s interface.

Set up a website, create web pages, and add text, links, and meta data for search engines.

Optimize web graphics, with instructions for using Photoshop (or Photoshop Elements) to covert images to GIF, PNG, and JPEG formats.