Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)
Book VI
Dreamweaver CC
At www.dummies.com/extras/adobecreativeclouddesigntoolsaio find a set of Dreamweaver CC keyboard shortcuts you can use regularly throughout this minibook.
Contents at a Glance
Chapter 1: Introducing Dreamweaver CC
Chapter 2: Understanding the Dreamweaver Workspace
Chapter 3: Creating a Website
Chapter 4: Working with Images
Chapter 5: Adding and Formatting Text
Chapter 6: Linking It Together
Chapter 7: Creating Tables
Chapter 8: Creating CSS Layouts
Chapter 9: Publishing Your Website
Chapter 1: Introducing Dreamweaver CC
In This Chapter
Exploring the Dreamweaver workspace
Utilizing HTML5 and CSS3 support
Working with CSS transitions
Building adaptable pages with fluid grids
Surveying mobile authoring options and tools
Dreamweaver CC lets you create and manage websites and applications across a variety of screens, including desktops, mobile phones, and tablet devices. Depending on your needs, you can use Dreamweaver to create all kinds of websites, from basic sites that consist only of simple links from one page to another to highly interactive websites that feature animation or drag-and-drop functionality. Dreamweaver users can even create more complex web and mobile applications capable of pulling data from databases, XML, or other sources.
As part of the Adobe Creative Cloud, Dreamweaver CC works seamlessly with several other Adobe applications, such as Photoshop CC, Illustrator CC, and Bridge. Even if you’ve never used Dreamweaver, you’ll be impressed by its many tools, panels, and powerful features that make building desktop and mobile-ready sites and applications easy and intuitive. If you’re familiar with the layout of other Adobe applications, you may feel right at home the first time you open Dreamweaver CC.
Dreamweaver’s features speak to the evolution of the web, with heavy emphasis on mobile web and multiscreen development, extensive support for HTML5 and CSS3, and integration with popular frameworks such as jQuery that define today’s standard web languages.
This chapter provides an overview of some of the most important feature groups in Dreamweaver, used to design and develop for the modern web.
Exploring the CC Interface
Over the years, Dreamweaver has made many useful enhancements to its workspace. In Dreamweaver CC, many of the toolbars and panels you will use every day have been streamlined to include the essentials for your workflow as shown in Figure 1-1.
Figure 1-1: The Dream-weaver Designer workspace.
The bottom of the Document window (where you do most of your work) contains additional options and toggles that enable you to view your page as it will appear in different desktop and mobile screen resolutions. This is one of many subtle additions that reinforce Dreamweaver’s commitment to development for the mobile web.
In the workspace, panels and panel groups appear tabbed, and you can separate them by dragging a tab to another location, as in other Adobe applications. Later in this minibook, you find out how to customize the workspace for different tasks and projects.
Taking Advantage of HTML5 and CSS3 Support
The last few years have proved to be a revolution for the web; combined efforts to embrace open standards and pull away from plug-in-based content has meant rapid adoption for HTML5 (the markup used to construct pages) and CSS3 (the language used to apply styling to pages). These web languages give you more creative and behavioral control than ever, enabling you to create sites that adapt to multiple screens without using plug-ins — which means they work with more consistency.
Dreamweaver includes new HTML5 layouts out of the box, so you can create a ready-to-modify HTML5-and-CSS3-based page in seconds that leverages new semantic markup elements (such as <nav>), as shown in Figure 1-2. In addition, you'll be able to make use of CSS3 capabilities such as rounded corners, multicolumn text, and even animation.
Figure 1-2: Create HTML5-based pages easier with support for HTML5 tags in Code view.
The CSS Designer panel provides a highly visual way of adding and modifying CSS properties. Several views (such as Code view) recognize and auto-complete HTML5 elements, and panels, such as the CSS Properties panel, and include CSS3 properties and suggested values, as shown in Figure 1-3.
Figure 1-3: CSS3 properties, such as border-radius, are recognized and can be added within the CSS Designer panel.
Although a number of HTML5 and CSS3 features have been adopted consistently in the latest versions of Firefox, Safari, Chrome, and Internet Explorer, the HTML5 spec still isn’t final, and support for many CSS3 properties still varies. This means certain features will be available only in certain browsers, and that success may vary. In certain cases, it may still be necessary to do a little hand-coding or tweaking to make sure things are backwards-compatible — or work at all, for that matter.
Bringing Your Pages to Life with CSS Transitions
Traditionally, if you wanted to create cool fades, slides, and sizing effects without Flash you’d need some help from JavaScript or a JavaScript library such as Spry or jQuery. Although these are still viable and common options, CSS3 now provides native transition properties that enable you to create these same effects without depending on JavaScript. The CSS Transitions panel allows you to design interesting interactive behavior and transitions using only CSS3.
Much like the Behaviors panel, which Dreamweaver has included for a long time and which now uses Adobe’s own Spry JavaScript framework, the CSS Transitions panel allows you to select an element in the Document window and apply transition behavior to any number of that element’s properties, including width, height, and opacity. You can trigger this transition on hover, focus, and other behaviors, as shown in Figure 1-4.
Figure 1-4: Add dynamic, interesting visual effects using pure CSS.
Working with Fluid Grids
Many of the features in Dreamweaver are designed to make authoring across many different screens easier. Creating several versions of a website or application to suit specific devices can be time consuming and difficult to maintain. A great way to overcome this is the use of fluid grids,which are pages designed on a single grid system that can easily adapt to multiple screen sizes.
When working with fluid grids, Dreamweaver opens up a number of visual aids to help you build your page. In conjunction with the CSS Designer panel, fluid grids allow you to easily design flexible pages that render well in most any screen or device setting, as shown in Figure 1-5.
Figure 1-5: Create Fluid Grid layouts easily from the New Document window.
To create a new page based on a fluid grid, choose File⇒New and click Fluid Grid Layout, as shown in Figure 1-5.
Exploring Mobile Authoring Options and Tools
Mobile-ready websites are no longer considered a luxury or novelty. Some experts predict that the use of mobile devices for online activity will soon surpass fixed desktop computer usage. This means that when creating a website you must think of smartphones, tablets, and other portable Internet-ready devices (such as Amazon’s Kindle Fire) as likely venues. Dreamweaver gets you off to a great start toward mobile site and application development with some exciting new features, including the following:
jQuery Mobile Projects: You can create mobile projects in Dreamweaver using the popular jQuery Mobile framework, which allows for rapid development of cross-device mobile apps that look and feel like native apps. This is a great addition for new or experienced web designers looking to create mobile-ready sites without the overhead of complex coding, and using standard web languages such as HTML, CSS, and JavaScript. To create a new jQuery Mobile project, you can choose File⇒New⇒Mobile Starters, as shown in Figure 1-6.
Figure 1-6: Create rich mobile applications by using integrated jQuery Mobile projects.
jQuery Mobile PhoneGap Projects: This feature is much like the jQuery Mobile project, but with the additional files and support necessary to make your mobile project ready for use with PhoneGap. PhoneGap is an open-source HTML5 framework that allows you to author native mobile apps with standard web languages, and to deploy them to iPhone, Android, and BlackBerry platforms as native applications. Another huge advantage is PhoneGap's capability to leverage native device APIs, so your applications can take advantage of hardware features, such as the accelerometer and GPS. To find out more about PhoneGap, visit www.phonegap.com.
Mobile device sizes and rendering: Several areas within Dreamweaver, such as the Document window and Live view, allow you to take advantage of common device screen sizes and presets, as shown in Figure 1-7.
Figure 1-7: The various view options are great for seeing your work in context of smartphone and tablet devices.