Dreamweaver CC For Dummies^®

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