Websites evolve every year, growing in scope, capability, and complexity, making sites look and work ever better over time. Even people with personal sites use a collection of programming languages and server technologies to dish up their content.
Throughout its history, Dreamweaver has kept pace with the changing web-development landscape, and Adobe’s latest offering, Dreamweaver Creative Cloud, is no exception—it does more than any previous version of the program. Whether you want to use Cascading Style Sheets (CSS) for cutting-edge site design, create JavaScript-powered dynamic web pages, incorporate HTML5, build websites for mobile devices, use content management systems like WordPress or Drupal, or simply stick to straightforward HTML, Dreamweaver has just about all the tools you need.
Any enterprising designer can create web pages, Cascading Style Sheets, and even JavaScript programs using just a simple text editor. In fact, Dreamweaver CC’s powerful text editor lets you handcraft files to create any kind of web file you want, from simple HTML content to complex database-powered web pages. However, typing in HTML, CSS, and JavaScript code is not only a recipe for carpal tunnel syndrome, it’s a slow and typo-prone way to build web pages. Dreamweaver provides buttons, dialog boxes, and panels that let you add HTML, CSS, and JavaScript quickly, with fewer keystrokes. For example, in a matter of seconds, a simple button lets you insert the complex HTML required to insert a video into your web page. And Dreamweaver is flexible enough to let you hand-code pages and use time-saving HTML shortcuts in tandem—the choice is yours.
Note
To emphasize that its Creative Suite applications (Dreamweaver, Photoshop, InDesign, and so on) now reside exclusively in the cloud, Adobe added “CC” to the creative suite product names. So, for this new version of Dreamweaver, what used to be Dreamweaver CS6 has become Dreamweaver CC. Throughout this book, and out there in the site design/developer world, the name is usually shortened to CC.
Dreamweaver is a complete website development and site-management program. It works with web technologies like HTML, XHTML, CSS, JavaScript, and PHP.
Its CSS support lets you create fast-loading, easily modified pages, while its support for the popular jQuery JavaScript framework lets you create complex, interactive page elements, like tabbed panels and collapsible content panels, with a single key click.
Dreamweaver also includes plenty of tools to manage your sites once you build them. You can check for broken links, use templates to implement site-wide page changes, and reorganize your site in a flash with the program’s site-management tools.
Note
If you’re unfamiliar with the acronym CSS, it stands for Cascading Style Sheets—a set of rules you write that dictate the look of your pages. Dreamweaver includes advanced tools to create, test, and edit CSS in your pages.
If you’ve built one or more sites without Dreamweaver, you don’t have to start over again. The program happily opens web pages and websites created in other programs without destroying any of your carefully crafted code.
You can find dozens of web design programs on the market, but Dreamweaver is one of the leaders, thanks to key benefits like these:
Visual page-building. If you’ve ever spent time using a text editor to punch out HTML for your web pages, you know the tedium involved in adding even a simple photograph. When your boss asks you to add her photo to the company home page, you launch your trusty text editor and type in something like <img src=“images/staff/bigcheese.jpg” width=“100” height=“150” alt=“The Boss”>. Not only is this approach prone to typos, it separates you from what you want the page to look like.
Dreamweaver, on the other hand, gives you a several ways to stay in touch with your page’s visual design. If your interest is in design and not HTML, you can work in the program’s Design view. Drag an image to your budding web page there, and Dreamweaver displays the picture on the page. Just as a word processor displays documents as they’ll look when you print them out, so Dreamweaver gives you a close approximation of what your page will look like in a web browser.
Because Dreamweaver’s Design view is only an approximation of what a page will look like in a browser, the program offers Live view, too—a real-time look at your page in a browser built right into Dreamweaver. Using it, you can see what a page looks like and how it behaves without leaving Dreamweaver!
Another approach web designers commonly use is monitoring a page’s code and its appearance side-by-side. Dreamweaver’s Split view handles that, giving you direct access to the HTML of a page on one half of the screen and to its visual look on the other half. For the visual half, you can use either Design view, or, for greatest accuracy, Live view. Using this technique, you can hammer out your HTML in the Code view half of the monitor and quickly see the effect in a web browser in the Live view half of your screen.
Complex interactivity, simply. You’ve probably seen web pages where an image (on a navigation bar, for example) lights up or changes appearance when you mouse over it. Dynamic effects like these—mouse rollovers, alert boxes, and pop-up dialog boxes—usually require JavaScript programming, a language browsers understand. While JavaScript can do amazing things, it requires time and practice to learn.
Dreamweaver CC now supports the wildly popular jQuery JavaScript framework, and its sister project, jQuery UI, which provides easy-to-use “widgets” that make adding interactive page elements like tabbed panels, pop-up date selectors, and dialog boxes a breeze.
Note
Dreamweaver CC drops the “Spry” JavaScript framework that older versions of the program supported in favor of the jQuery framework. See JavaScript, jQuery, and jQuery UI and the note on Note for details.
Solidcode. Every now and then, even in Dreamweaver, you may want to put aside the visual view and look at a page’s underlying HTML. You may want to tweak the code that Dreamweaver produces, for example, or see how Dreamweaver writes code.
Adobe realizes that many professional web developers do a lot of work “in the trenches,” typing in HTML, CSS, and JavaScript code by hand. In Dreamweaver, you can edit a page’s raw HTML to your heart’s content. Switching back and forth between Design view and Code view is seamless and, best of all, nondestructive. Unlike many visual web page programs, where making a change in the visual mode stomps all over the underlying HTML, Dreamweaver respects hand-typed code and doesn’t try to rewrite it (unless you ask it to). You can even use Dreamweaver’s Split view to see your HTML side-by-side with a representation of your final page.
In addition, Dreamweaver can open many other types of files commonly used on websites, such as external JavaScript files (.js files), so you don’t have to switch to another program to work on them. Dreamweaver’s Related Files toolbar lists all CSS, JavaScript, and server-side files the current document uses. For hand-coders, this feature means that editing a page’s CSS or JavaScript is just a click away (instead of a time-draining File→Open hunt for that danged file). Chapter 7 has the scoop on how Dreamweaver handles writing and editing code.
Site-management tools. Rarely will you build just a single web page. More often, you’ll create and edit pages that work together to form part of a website. Or you may build an entire website from scratch.
Either way, Dreamweaver’s site-management tools make your job easier. They automate many of the routine tasks every webmaster faces, from managing links, images, pages, and other media, to working with a team of people and moving your site to a web server. Part 4 of this book looks at how Dreamweaver helps you build and maintain websites.
Have it your way. As if Dreamweaver didn’t have enough going for it, the program’s engineers have created a completely customizable product, or, as they call it, an extensible program. Anyone can add to or change Dreamweaver’s menus, commands, objects, and windows.
Suppose, for example, that you hardly ever use any of the commands in the Edit menu. By editing one text file in the Dreamweaver Configuration folder, you can get rid of unwanted menu items—or even add commands of your own creation. This incredible flexibility lets you customize Dreamweaver to fit the way you work, and even add features that Adobe’s programmers never imagined. Best of all, the Adobe Exchange website includes hundreds of free and commercial extensions for Dreamweaver. See Chapter 21 for details.
If you haven’t used Dreamweaver before, see Chapter 1 for the grand tour. If you’re upgrading from Dreamweaver CS6 or some other version of the program, you’ll find that Dreamweaver CC offers a host of new features:
HTML5 is touted by everyone from AT&T to Google as the next big thing (described in more detail on The Insert Div Command). It’s the first major change to HTML in years, and it promises to make building powerful websites easier than ever. Dreamweaver CS6 introduced very basic support for HTML5 that simplified hand-coding the new HTML5 tags. Fortunately, Dreamweaver CC brings HTML5 to Design view, providing simple menu options that let you insert new HTML5 elements like <header>, <article>, <nav>, <section>, and so on. It also now lets you insert the many useful HTML5 form elements, such as web addresses, date, email addresses, and search fields, among others. Finally, CC makes adding the HTML5 <video> and <audio> tags easy, so you can insert video and audio that works on smartphones as well as web browsers.
CSS is the heart of web design. While HTML provides the structure for content, CSS gives it color, layout, and graphical interest. Because CSS is so fundamental to web design, Adobe took a long look at how designers use CSS and completely revamped CSS creation and editing in CC. As a result, you’ll use the CSS Designer panel to visually manage complex sets of styles. You’ll use the CSS Transitions panel to develop engaging and useful visual effects. These new tools are covered on CSS Transitions.
Web Fonts. Dreamweaver CC’s typography options build off of the web fonts feature added in Dreamweaver CS6. In addition to being able to use your own set of fonts, CC lets you take advantage of free, hosted fonts from Adobe using Adobe Edge Web Fonts. This free service gives you access to dozens and dozens of fonts. You’ll learn more about this new feature on Formatting Fonts.
Mobile web design. Dreamweaver CS6 introduced many new tools to help designers build websites that work on mobile devices like smartphones and tablets. CC improves on this “fluid grid layout” feature, which lets you create designs that re-flow content to match different devices. For example, using the same HTML, you can create designs that display a single column of content for a phone, two columns for a tablet, and three or more columns for a spacious desktop monitor. CC adds support for nested elements, and significantly improves the workflow for fluid grids.
jQuery UI. Dreamweaver CC replaces Adobe’s outdated Spry framework with the wildly popular jQuery library and its user-interface toolkit known as jQuery UI. Unfortunately, jQuery UI doesn’t replace all the Spry widgets available in earlier versions of Dreamweaver (see What’s Gone in Dreamweaver CC for more on Spry and what’s missing).
Adobe Creative applications, like Dreamweaver, no longer come from a disc in a box—they come from the cloud. That change may have a greater effect on your wallet than it does on your computer. Like many other companies, Adobe decided it is better to get a little money from you each month than it is to get big whopping sums every couple of years. In essence, you lease Creative Cloud software. You can pay $19.99 a month for the license to use Dreamweaver or $49.99 a month for the license to use Dreamweaver and a whole suite of creative apps such as Photoshop, Illustrator, InDesign, Flash, and Premiere Pro. Those are just the major tools; the complete list is really pretty impressive. See http://www.adobe.com/products/creativecloud.html.
The first time you install an app, like Dreamweaver, from the Creative Cloud, you use the Download Center—a web page that you log into after you’ve paid the licensing fee. Click on the Download button next to the Dreamweaver icon and follow the links and instructions to download and install the application on your computer. Yes, that’s right, Dreamweaver CC is an application that’s installed on the hard drive of your computer, just like the previous versions. The difference is that periodically, Dreamweaver will check back with the mothership to make sure you still have a license to use the program. Depending on your agreement with Adobe, that period is either 30 days or 99 days. If you don’t have a valid license, you can’t use the app. The web pages that you’ve created in Dreamweaver won’t disappear, you just can’t use Dreamweaver to work on the project unless you’re paid up and licensed.
When you first install Dreamweaver or any other Creative Cloud app on your computer, you also install the Creative Cloud desktop app, which keeps track of the Adobe CC apps on your computer and notifies you when there are updates. Once the CC app is installed, you can install and update Dreamweaver or any of the other apps that you are licensed to use. All it takes is a click of a button.
With Dreamweaver CC, Adobe took a long, hard look at a fairly old program. They decided that it was time for some serious housecleaning:
Server behaviors. Dreamweaver’s innovative server behaviors were a boon to those afraid of server-side programming. They let non-programmers add basic database integration into their websites, making it easy to add forms to collect (and store) visitor information. For the last several versions of the program, however, Adobe largely ignored Dreamweaver server behaviors, and the code behind their magic wasn’t up to current programming standards. In CC, Adobe finally pulled the plug on these database tools. If you want to integrate your site with a database, you either need to learn how to program the website-database interaction yourself or use an extension that adds the tools necessary to create database-driven web pages. For that, you can turn to a third party solution, such as WebAsisst (www.webassist.com).
Spry. Adobe’s Spry JavaScript Framework for AJAX was once a cutting-edge set of tools that made building forms, drop-down menus, and other interactive page features simple. However, the programming behind these elements is out of date, and a hugely popular replacement, jQuery, has arisen out of the world of open source software. jQuery is a free JavaScript framework that more than 40 percent of the world’s websites use. Adobe wisely realized that they could never keep their Spry framework up to the level of jQuery and, in Dreamweaver CC, dropped support for Spry and replaced it with jQuery and the jQuery user interface library. However, while Adobe replaced many Spry widgets with jQuery counterparts, there are a few exceptions: For example, there’s no longer a tool that lets you build drop-down navigation menus, nor are there any tools that let you validate forms. See the box on JavaScript, jQuery, and jQuery UI for more.
BrowserLab. Earlier versions of Dreamweaver integrated directly with BrowserLab, Adobe’s online service that displayed your web pages in a variety of browsers. BrowserLab let you see, for example, if your page looked the same in Internet Explorer 7 as it did in Google Chrome. However, Adobe closed BrowserLab in March 2013 and removed it from Dreamweaver CC. Adobe now refers developers to BrowserStack (www.browserstack.com/) and Sauce Labs (https://saucelabs.com/) for web pages. Adobe recommends using their Edge Inspect tool (adobe.com/edge/inspect/) for mobile web projects.
Assorted changes. Dreamweaver CC boasts a number of smaller changes, too. Among them are the removal of the panel that let you manage absolutely positioned elements (see Absolute Positioning for more on absolute positioning), the link to Adobe’s Bridge program so you could browse for files outside of Dreamweaver, and the File→Convert tool that translated the HTML of one type (say, XHTML) to the HTML of another type (HTML5, for example).
Under the hood of any web page—whether it’s your uncle’s “Check out this summer’s fishin’” page or the front door of a billion-dollar online retailer—is nothing more than line after line of ordinary text. You embed simple commands, called tags, within this text. Web browsers know how to interpret these tags to properly display your pages. When you create a page with tags in it, the document becomes known as an HTML page (for Hypertext Markup Language). HTML is at the heart of most of the Web.
The HTML code that creates a web page can be as simple as this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hey, I am the title of this web page.</title>
</head>
<body>
<p>Hey, I am some body text on this web page.</p>
</body>
</html>While it may not be exciting, this short bit of HTML is all you need to create an actual web page.
The first line of the code above:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">is called a “doctype,” and it identifies the flavor of HTML you used to create the page. Developers have used two doctypes for years—HTML 4.01 and XHTML 1.0—and each has two versions: strict and transitional. Dreamweaver can create any type of HTML—you simply tell it which you want when you create a new web page (see Creating a Web Page).
Dreamweaver even lets you use the latest, greatest, and simplest doctype, HTML5. It replaces the extraneous code of earlier doctypes with much simpler and straightforward code:
<!DOCTYPE HTML>
Yep, that’s the entire doctype declaration. HTML5 is much easier to use than plain old HTML in many ways, and Dreamweaver CC supports this new version of the web’s lingua franca. This book uses the HTML5 doctype—it’s short, simple, and supported by every major browser (even back to Internet Explorer 6). And because HTML5 is the future of the Web, there’s no reason to use older doctypes.
But no matter which doctype you use, it’s important that you always use one, because without it, different browsers display CSS differently, and your pages will look different depending on your visitor’s browser.
Different doctypes do require that you write your HTML in a particular way. For example, the line break tag looks like this in HTML 4.01:
<br>
But in XHTML, you write it this way:
<br />
HTML5 lets you write it either way. Fortunately, you won’t have to worry about these subtle differences when you use Dreamweaver to insert your HTML—it automatically adjusts to the doctype you chose, inserting the appropriate HTML.
In the preceding example—and, indeed, in the HTML of any web page—you’ll notice that most commands appear in pairs that enclose a block of text or other commands.
These bracketed commands, like the <p> command that denotes the beginning of a paragraph, constitute the “markup” part of HTML (hypertext markup language), and they’re called tags. Sandwiched between greater-than and less-than signs, tags are simply instructions that tell a web browser how to display a page.
The starting tag of each pair tells a browser where the instruction begins, and the closing tag tells it where the instruction ends. A closing tag always includes a forward slash (/) after the first bracket symbol (<), so the closing tag for the paragraph command above is </p>.
Fortunately, Dreamweaver can generate all these tags automatically. You don’t have to memorize or even type them in (although many programmers still enjoy doing so for greater control). Behind the scenes, Dreamweaver’s all-consuming mission is to convert your visual design into underlying code, like this:
The <html> tag appears once at the beginning of a web page and again (with an added closing slash) at the end. This tells a browser that the information between these two tags is written in HTML, as opposed to some other language. All the contents of the page, including any other tags, appear between these opening and closing <html> tags.
If you were to think of a web page as a tree, the <html> tag would be its trunk. Springing from the trunk are two branches that represent the two main parts of any web page: the head of the page and the body.
The head of a web page contains the title of the page (“Izzie’s Mail-Order Pencils”). It may also include other, invisible information, such as a page description, that browsers and search engines use. You surround the head section with opening and closing <head> tags.
The head section can also include information that browsers use to format a page’s HTML and add interactivity. You can store CSS styles and JavaScript code in the head, for example, or you can embed links to external CSS and JavaScript files there. In fact, the interactivity you’ll see in Dreamweaver’s jQuery UI widgets (Chapter 13) work with the help of JavaScript code stored in separate files on a server; the link to these files resides in the page’s head section.
The body of a web page, identified by its beginning and ending <body> tags, contains all the content that appears inside a browser window—headlines, text, pictures, and so on. When you work in Dreamweaver’s Design view, the blank white portion of the document window represents the body area. It resembles the blank page of a word-processing program.
Most of your work with Dreamweaver will involve inserting and formatting text, pictures, and other objects into the body portion of a document. Many tags commonly used in web pages appear within the <body> tag. Here are a few:
You can tell a web browser where a paragraph of text begins with a <p> (opening paragraph) tag, and where it ends with a </p> (closing paragraph) tag.
The <strong> tag emphasizes text. The text between an opening and closing <strong> tag shows up as boldfaced. The HTML snippet <strong>Warning!</strong> tells a web browser to display the word “Warning!” in bold type on the screen.
The <a> tag, or anchor tag, creates a link (hyperlink) on a web page. A link, of course, can lead anywhere on the Web. How do you tell a browser where the link should point? Simply give address instructions inside the <a> tags. For instance, you might type <a href=“http://www.missingmanuals.com”>Click here!</a>.
The browser knows that when your visitor clicks the words “Click here!”, it should go to the Missing Manuals website. The href part of the tag is called, in Dreamweaver, a property (you may also hear it called an attribute), and the URL (the Uniform Resource Locator, or web address) is the value of that property. In this example, http://www.missingmanuals.com is the value of the href property.
Fortunately, Dreamweaver exempts you from having to type any of this code, letting you add properties to tags (and other page elements) through an easy-to-use window called the Properties panel. To create links the Dreamweaver way (read: the easy way), turn to Chapter 4.
Note
For a full-fledged introduction to HTML, check out Creating a Website: The Missing Manual, 3rd Edition. For a primer geared to readers who want to master CSS, pick up a copy of CSS3: The Missing Manual. And if you want to add interactivity to your web pages (beyond the cool, ready-to-use features that Dreamweaver offers), you might be interested in JavaScript & jQuery: The Missing Manual. End of advertisements; now back to your regularly scheduled book.
Like any technology, HTML has evolved over time. Although standard HTML has served its purpose well, it’s always been a somewhat sloppy language. Among other things, it allows uppercase, lowercase, and mixed-case letters in tags (<body>, <BODY>, and <bODy> are all correct, for example) and permits unclosed tags (so you can use an opening <p> tag without a closing </p> tag to create a paragraph, for instance). While this flexibility may make page-writing easier, it also makes life more difficult for web browsers, smartphones, and other technologies that must interact with these pages. Additionally, HTML doesn’t work with one still-useful Internet language, XML (Extensible Markup Language).
To keep pace with the times, an improved version of HTML, called XHTML, was introduced back in 2000, and you’ll find it used frequently on many sites (in fact, XHTML is just an “XML-ified” version of HTML). Dreamweaver CC can create and work with XHTML files as well as plain old HTML pages.
HTML5 isn’t some radically new technology. In fact, unlike XHTML, which was intended to foster a new way to build web pages, HTML5 is about making sure the Web continues to work as it always has. Most of the basics of HTML are still in place. HTML5 adds a few new elements that support the way designers build websites today. In HTML5, for example, the <header> tag contains the content you’d usually find at the top of a page, such as a logo and site-wide navigation links; the new <nav> tag encloses the set of links used to navigate a site; and the <footer> tag houses the stuff you usually put at the bottom of a page, like legal notices, email contacts, and so on.
In addition, HTML5 adds new tags that let you insert video and audio into a page, add sophisticated form elements like drop-down date-pickers, and validate forms to make sure visitors fill them out correctly. Unfortunately, browser support for these new features isn’t consistent and it’s therefore difficult to use the new tags without some pretty elaborate workarounds to ensure cross-browser support.
Dreamweaver CC includes new tools that work with HTML5. Click-to-insert buttons make it easy to insert HTML5 tags like <header>, <footer>, <article>, and <section>. And CC supports the HTML5 <video> and <audio> tags that make your pages come to life with video and sound.
But new tags are just one small part of the HTML5 story. HTML5 started life as a product of the Web Hypertext Application Technology Group (WHATG), which wanted to create a version of HTML that provided the tools needed to build powerful, browser-based applications, like Google’s Gmail program. So, much of HTML5 is devoted to powerful (and complicated) technologies like Canvas (for drawing pictures and diagrams on a web page), data storage (for storing information like game scores, preferences, and notes on a visitor’s computer), drag and drop functionality, “web workers” for making JavaScript programs run faster and more efficiently, and “web sockets” for streaming data from a web server. All these technologies are promising, but browser support for them varies. In addition, Dreamweaver doesn’t provide any easy-to-use tools to tap into these complicated technologies, so you’re a few years off from being able to easily include most HTML5 functionality on your site.
In the beginning, HTML was the only language you needed to create web pages. You could build them with colorful text and graphics, and make words jump out using a limited selection of fonts, font sizes, and font colors. Today, however, you can add much more visual stimulation using Cascading Style Sheets. CSS is a formatting language that lets you design pages with sophisticated layouts and precise typographic control. For example, it gives you site-wide design consistency for headings and subheads, lets you create unique-looking sidebars, and lets you add special graphics treatment for quotations.
From now on, think of HTML as merely the scaffolding you use to organize a page. It helps identify and structure page elements. Tags like <h1> and <h2> denote headlines and reflect their relative importance. A Heading 1 is more important than a Heading 2, for example (and can affect how a search engine like Google adds a page to its search listings). The <p> tag indicates a basic paragraph of information. Other tags provide further structural clues: For example, a <ul> tag identifies a bulleted list (to, say, make a list of recipe ingredients more intelligible).
Cascading Style Sheets, on the other hand, add design flair to that highly structured content, making it more beautiful and easier to read. Take a look at the CSS Zen Garden site (www.csszengarden.com). Each of the striking, very different websites profiled there use the same underlying HTML. The only difference among them—and the sole reason they look different—is that each uses a different style sheet. Essentially, a CSS style is just a rule that tells a browser how to display a particular page element—to make an <h1> tag appear orange, 36 pixels tall, and in the Verdana font, for example.
But CSS is more powerful than that. You use it to add borders, change margins, and even control the exact placement of an element on a page.
To be a successful web designer, you need to get to know Cascading Style Sheets. You’ll learn more about this exciting technology throughout this book.
A normal web page—just regular HTML and CSS—isn’t very interactive. About the only interaction visitors have with a page like that is clicking a link to load a new page. JavaScript is a programming language that lets you supercharge your HTML with animation, interactivity, and dynamic visual effects. It can also make a web page more responsive to visitors by supplying immediate feedback. For example, a JavaScript-powered shopping cart can instantly display the total cost of your purchase, tax and shipping included, the moment a visitor selects a product to buy. Or JavaScript can produce an error message immediately after someone attempts to submit a web form that’s missing information.
JavaScript’s main selling point is immediacy. It lets web pages respond instantly to visitor actions: clicking a link, filling out a form, or merely moving the mouse around the screen, for instance. JavaScript doesn’t suffer from the frustrating delay associated with “server-side” interactive programming languages like PHP, which require that a web browser communicate with a remote web server before the browser does anything. It doesn’t rely on constantly loading and reloading pages, so your pages respond with the immediacy of a desktop program.
If you’ve visited Google Maps (http://maps.google.com), you’ve seen JavaScript in action. Google Maps lets you zoom in to get a detailed view of streets and zoom out to get a birds-eye view of how to get across town, the state, or the nation, all from the same web page. While there have been lots of map sites before Google, they always loaded a new page every time you changed a view (a usually slow process).
The JavaScript programs you create can range from the really simple (such as popping up a new browser window with a web page in it) to full-blown “web applications,” such as Google Docs (http://docs.google.com), which let you edit documents, build spreadsheets, and create presentations using your web browser—all as though the program were running on your computer.
JavaScript programming can be difficult, but Dreamweaver has plenty of tools that let you add sophisticated interactivity to your sites—from animations to pop-up dialog boxes—with just a few clicks of your mouse.
There’s no doubt that mobile phones have changed how we live. They’re also changing how we build websites. The small screens of iPhones and Android phones don’t treat wide, three-column web pages kindly. Many sites shrink down to postage-stamp size when you look at them on a phone, requiring you to pinch, zoom, swipe, and scroll to find what you’re looking for. Fortunately, you can have websites redraw themselves to fit the smaller sizes of mobile phones. Dreamweaver CC includes several solutions: the new fluid grid layout tool (Launching Your jQuery Mobile Site) lets you design three layouts (for phones, tablets, and desktop screens) using the same HTML. In other words, you only have a single web page, but using CSS, you can dynamically alter the page’s layout depending on the width of the viewing screen. You can also craft your own “media queries” (a CSS3 feature discussed on Media Queries) to create CSS styles that apply only to screens at particular widths or within a particular range of widths.
Dreamweaver CC lets you create mobile-only websites, too, using jQuery Mobile (Adding Styles to Media Query Style Sheets), a JavaScript tool that makes traditional websites look and function more like mobile applications (and less like web pages).
Dreamweaver CC: The Missing Manual is divided into five parts, each with several chapters:
Part 1 explores Dreamweaver’s main screens and takes you through the basic steps of page-building. It explains how to add and format text, link from one page to another, and spice up your design with graphics. It also introduces you to Cascading Style Sheets.
Part 2 takes you deeper into Dreamweaver and provides in-depth CSS coverage, including that for Dreamweaver’s new CSS Designer and CSS Transitions tools. In addition, you’ll get step-by-step instructions for creating advanced page layouts, as well as advice on how to view and work with the underlying HTML of a page.
Part 3 helps you add interactivity to your site. From the new jQuery UI widgets that let you add tabbed interfaces to forms that collect information from visitors, this section guides you through adding animation, multimedia, and other interactive effects with ease. The last chapter in this section explains how to add HTML5 video and audio, Flash animation, and Edge Animate compositions to your web pages.
Part 4 covers the big picture: managing the pages and files on your site, testing links and pages, and moving your site to a web server connected to the Internet. And since you’re not always working solo, this section covers features that let you work with a team of web developers, too.
Part 5 shows you how to take advantage of timesaving Dreamweaver features like libraries, templates, and history-panel automation. It also covers Dreamweaver’s Extension Manager, a program that can add hundreds of free and commercial features to the site-builder.
Despite the many improvements in software over the years, one feature has grown consistently worse: documentation. Until version 4, Dreamweaver came with a printed manual. In MX 2004, all you got was a Getting Started booklet. Now, mostly likely, you’re getting the entire application from the cloud. If you do get a physical disc, it arrives in an otherwise empty cardboard box. To get any real information, you need to delve into the program’s online help.
But even if you have no problem reading a help screen in one window as you work in another, something’s still missing. At times, the terse electronic help assumes you already understand the discussion at hand and hurriedly skips over important topics that require in-depth explanation. In addition, you don’t always get an objective evaluation of the program’s features. Engineers often add technically sophisticated capabilities to a program because they can, not because you need them. You shouldn’t have to waste your time learning tools that don’t help you get your work done.
The purpose of this book, then, is to serve as the Dreamweaver manual that should have been in the box. You’ll find step-by-step instructions for every Dreamweaver feature, including those you may not otherwise have understood, let alone mastered, such as libraries, Design view, behaviors, and Dreamweaver’s JavaScript tools. In addition, you’ll find honest evaluations of each tool to help you determine which are useful to you, as well as how and when to use them.
Note
This book periodically recommends other books, covering topics that are too specialized or tangential for a manual on Dreamweaver. Careful readers may notice that not every one of these titles is published by Missing Manual parent O’Reilly Media. While we’re happy to mention other Missing Manuals and books in the O’Reilly family, if there’s a great book out there, we’ll let you know about it.
Dreamweaver CC: The Missing Manual is designed to accommodate readers at every technical level. The primary discussions are written for advanced-beginner or intermediate computer users. But if you’re new to building web pages, special sidebars called “Up To Speed” provide the introductory information you need to understand the topic at hand. If you’re a web veteran, on the other hand, keep your eye out for similar boxes called “Power Users’ Clinic.” They offer more technical tips, tricks, and shortcuts for the experienced computer fan.
Dreamweaver CC works almost precisely the same way on the Macintosh as it does in Windows. Every button in every dialog box is exactly the same, and the response to every command is identical. This book uses images that alternate between the various operating systems where Dreamweaver feels at home (Windows 8, Windows 7, Windows Vista, and Mac OS X).
One of the biggest differences between Windows and Mac software is the keystrokes, because the Ctrl key in Windows is equivalent to the Macintosh’s ⌘ key. And the key labeled Alt on a Windows PC (and on non-U.S. Macs) is equivalent to the Option key on American Macs.
Whenever this book refers to a key combination, therefore, you’ll see the Windows keystrokes listed first (using the + symbol for compound commands, as is customary in Windows documentation); the Macintosh keystrokes follow in parentheses (with - symbols, in time-honored Mac fashion). In other words, you might read, “The keyboard shortcut for saving a file is Ctrl+S (⌘-S).”
You’ll find very little jargon or technical terminology in this book. You will, however, encounter a few terms and concepts you’ll come across frequently in your computing life:
Clicking. This book gives you three kinds of instructions that require you to use your computer’s mouse or trackpad. To click means to point the arrow cursor at something on the screen and then—without moving the cursor—press and release the clicker button on the mouse (or laptop trackpad). To double-click, of course, means to click twice in rapid succession, again without moving your cursor. And to drag means to move the cursor while holding down the mouse button.
Keyboard shortcuts. Every time you take your hand off the keyboard to move the mouse, you lose time and potentially disrupt your creative flow. That’s why many experienced computer fans use keystroke combinations instead of menu commands wherever possible. Ctrl+B (⌘-B for Mac folks), for example, gives you boldface type in Dreamweaver documents (and most other programs).
When you see a shortcut like Ctrl+S (⌘-S), it’s telling you to hold down the Ctrl or ⌘ key and type the letter S, then release both keys. (This command, by the way, saves changes to the current document.)
Choice is good. Dreamweaver frequently gives you several ways to trigger a particular command—by selecting a menu command or by clicking a toolbar button or by pressing a key combination, for example. Some people prefer the speed of keyboard shortcuts; others like the satisfaction of a visual command available in menus or toolbars. This book lists all the alternatives; use whichever you find most convenient.
Throughout this book, and throughout the Missing Manual series, you’ll find sentences like this one: “Open the System→Library→Fonts folder.” That’s shorthand for a much longer instruction that directs you to open three nested folders in sequence, like this: “On your hard drive, you’ll find a folder called System. Double-click it to open it. Inside the System folder is a folder called Library; double-click it to open it. Inside that folder is yet another folder called Fonts. Double-click to open that folder, too.”
Similarly, this kind of arrow shorthand helps to simplify the business of choosing commands in menus, as shown in Figure 1.
This book is designed to get your work onto the Web fast and professionally; it’s only natural, then, that part of the value of this book also lies on the Web.
This book doesn’t have a CD pasted inside the back cover, but you’re not missing out on anything.
Figure 1. When you read “Choose Insert→Structure→Div” in this Missing Manual, that means, “From Dreamweaver’s menu bar, click the Insert command. From the drop-down menu that appears, select Structure. That opens a list of HTML tags you can add to the currently open document; select Div from that list.”
As you read the book, you’ll find a number of tutorials that show you how to build web pages using raw materials, like graphics and half-completed web pages. You can download these practice files from this book’s Missing CD page (http://oreilly.com/missingmanuals/cds/dreamweaverccmm13/). If you take the time to work through the tutorials, you’ll discover that they give you unprecedented insight into the way professional designers build web pages.
The download also includes the completed tutorial pages, so you can compare your Dreamweaver work with the final result. In other words, you won’t just see pictures of Dreamweaver’s output in the pages of the book; you’ll find the actual, working pages in this download.
Finally, the Missing CD site gives you one-click access to the reference websites mentioned in this book—that’ll save your fingers some typing.
If you register this book at oreilly.com (http://oreilly.com/register), you’ll be eligible for special offers—like discounts on future editions. If you buy the ebook from oreilly.com and register your purchase, you get free lifetime updates for that edition of the ebook; we’ll notify you by email when updates become available. Registering takes only a few clicks.
To keep this book as up to date and accurate as possible, each time we print more copies, we’ll make any confirmed corrections you suggest. We also note such changes on the book’s website, so you can mark important corrections in your own copy of the book if you like. And if you bought the ebook from us and registered your purchase, you’ll get an email notifying you when you can download a free updated version of this edition of the ebook. Go to http://tinyurl.com/dreamweaverccerrata to report an error and view existing corrections.
This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You don’t need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.
We appreciate, but do not require, attribution. An attribution usually includes the source book’s title, author, publisher, and ISBN. For example: “Dreamweaver CC: The Missing Manual by David Sawyer McFarland and Chris Grover (O’Reilly). Copyright 2014 David McFarland and O’Reilly Media, Inc., 978-1-4493-4170-1.”
If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com.
Safari® Books Online is an on-demand digital library that lets you search over 7,500 technology books and videos.
With a subscription, you can read any page and watch any video from our library. Access new titles before they’re available in print. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.
O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.
Get Dreamweaver CC: The Missing Manual now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
