Excerpt from Adobe Dreamweaver CS4
Digital Classroom

• Page 1
• Page 2
• Page 3

Links

• Additional Resources for Learning Dreamweaver

What you’ll learn in this lesson

• Exploring Dreamweaver’s primary features
• Introducing new features in CS4
• Understanding how web sites and web pages work
• Coding HTML/XHTML: the basics

Dreamweaver CS4 Jumpstart

Whether you are a novice web designer or an experienced developer, Dreamweaver is a comprehensive tool you can use for site design, layout, and management. In this lesson, you’ll take a tour of Dreamweaver’s key features and get a better understanding of how web pages work.

Starting up

Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting the Dreamweaver workspace” on page 3.

You will work with several files from the dw01lessons folder in this lesson. Make sure that you have loaded the dwlessons folder onto your hard drive from the supplied DVD. See “Loading lesson files” on page 3.

Note: If you want to get started creating a page, jump ahead to “Tag structure and attributes” on page 20. Otherwise, the next few pages provide you with an overview of key capabilities and features of Dreamweaver CS4.

See Lesson 1 in action! Use the accompanying video to gain a better understanding of how to use some of the features shown in this lesson. Click here to view this lessonls sample video.

What is Dreamweaver?

Dreamweaver is an excellent coding and development tool for new and experienced users alike, and it has quickly become the preferred web site creation and management program, providing a creative environment for designers. Whether you design web sites, develop mobile phone content, or script complex server-side applications, Dreamweaver has something to offer.

Design and layout tools

Dreamweaver’s many icon-driven menus and detailed panels make it easy to insert and format text, images, and media (such as video files and Flash movies). This means that you can create great-looking and functional web pages without knowing a single line of code—Dreamweaver takes care of building the code behind the scenes for you. Dreamweaver does not create graphics from scratch; instead, it is fully integrated with Adobe Photoshop CS4, so you can import and adjust graphics from within the application.

The Insert panel features objects in several categories that let you easily add images, web forms, and media to your page.

Site management and File Transfer Protocol

Dreamweaver has everything you need for complete site management, including built-in file transfer protocol (FTP) capabilities between a server and your local machine, reusable objects (such as page templates and library items), and several safety mechanisms (such as link checkers and site reports) so that you can ensure that your site works well and looks good. If you’re designing your pages with Cascading Style Sheets (CSS), the Browser Compatibility Check and CSS Advisor features will help you to locate and troubleshoot any potential display issues that may occur across different web browsers.

Coding environment and text editor

Dreamweaver lets you work in a code-only view of your document that acts as a powerful text editor. Edit HTML code directly and switch views to see the results of your code as you work. Features such as color-coding, indentation, and visual aids make Dreamweaver a perfect text editing or coding environment for web designers of any level.

For more experienced developers, Dreamweaver also supports popular coding and scripting languages, such as JavaScript, and several server-side languages, including ColdFusion, PHP, and ASP.NET. Specialized insert menus and code panels help you to build pages and applications in the language of your choice.

Code view is a full-featured text editor that color-codes tags and scripts for editing that’s easier to decipher.

Scripting languages, such as those used to build interactive web pages or e-commerce sites, fall into two categories: client-side and server-side. Client-side languages (such as JavaScript) run in your browser, while server-side languages (such as ColdFusion) require special software installed on the server to run.

Who uses Dreamweaver?

Dreamweaver’s popularity is a result of its diversity. Its ability to take a site from conception through to launch—and maintenance afterward—makes it a preferred tool among industry professionals, businesses, and educational institutions. However, it remains easy and accessible enough for novice designers to get up-and-running quickly. It’s not unusual to see Dreamweaver utilized for personal projects or by small businesses and media professionals, such as photographers and painters, to maintain a web presence.

What’s new in Dreamweaver CS4?

In this lesson, you’ll look at some of the newest features in Dreamweaver CS4, if you are using Dreamweaver for the first time or new to web design, keep in mind that some of these features are geared to intermediate or advanced users. You may choose to skip this section and go directly ”An overview of the features” later in this lesson.

CS4 introduces many innovative design and coding features as well as improvements to Dreamweaver’s flagship features. Because Dreamweaver is part of the industry-standard Adobe Creative Suite, it has been engineered to work as seamlessly as possible with files from other CS4 applications, offering native support for Photoshop files and the ability to edit placed images directly in Adobe Photoshop CS4.

New user interface

When you launch Dreamweaver CS4, one of the first things you’ll notice is that it now features a user interface that is consistent with the rest of the applications in the Creative Suite. A highlight of this new interface is the workspace configurator, which allows you to easily choose the most efficient workspace for the job at hand.

Choose the workspace that matches your tasks—or create your own.

Dreamweaver has included some common workspaces for you, but you can also choose to create your own custom workspaces. Among the included workspaces is the new compact mode for your panels, which lets you conserve monitor space by collapsing your panels onto the right side of the screen and expand them only when needed.

Live View

Experience tells you that visual web editors often display differently from the browsers they’re emulating. As script-driven interactivity gains popularity, the need to accurately design the different states of your page (including menus, panels, and interface elements) has become increasingly important. The static nature of Design view in Dreamweaver might no longer meet users’ advanced needs.

Dreamweaver’s new Live View mode uses the WebKit rendering engine (which is also the basis for the Safari web browser and Adobe AIR) to give you a more accurate preview of your page, usually just as a browser would render it. In addition, you can interact with your page directly within Dreamweaver, viewing all the various states it may require in context.

Live View enables you to interact with your pages.

When you select Live Code while in Live View mode, you can see, in real time, how visually changing your page affects the code behind the scenes. You can preview your code as classes are added and removed using JavaScript, as dynamic content is inserted using Spry, and much more.

It’s one thing, however, to preview these states, and another to effectively work with them. The Freeze JavaScript button (or the F6 key) freezes your page in a particular state (for example, with a menu locked open and a hover effect in place). You can then edit those interactively displayed elements directly in Dreamweaver, without having to use the Preview in Browser feature (F12) and your favorite web browser.

Related files

Web-based projects are becoming more complex than ever before, and you often find that even a single page is composed of a variety of assets. These assets can include Cascading Style Sheets (CSS), external JavaScript files, or even server-side includes. Dreamweaver CS4 has a new feature that will help you be much more effective at designing and managing sites and applications with multiple assets.

The Related Files bar now runs across the top of your document window, just below the document tabs. The bar shows you all the various files that combine to create your finished page. Switch between these files using the Related Files bar without losing the visual preview of their parent page. Design view (or Live View) always shows the parent file, but you can now edit any of the related files without losing their important visual context.

The Related Files bar shows you the various files that are part of your finished page.

Code Navigator

Using the new Code Navigator, you can easily jump to any of the related files (including the specific rules within) that combine to create the final display of a selected element. It is no longer necessary to look through multiple style sheets to find a specific rule. It’s now just a context menu-click away in Dreamweaver. With the Code Navigator, when you hover over a CSS rule you are able to see the properties and values and click on them to navigate to that specific code. As with related files, you can do this without losing the visual context that’s so important to creating interactive experiences.

The Code Navigator allows you to easily jump to any of your related files.

CSS improvements

The rebuilt Property Inspector reduces the risk of making mistakes when adding HTML and CSS for text. In earlier versions, Dreamweaver would sometimes add HTML to the page, and sometimes create CSS styles, depending on which buttons you clicked in the Property Inspector. This often led to a long, undesired list of styles with ambiguous names, such as Style1, Style2, and so on. In Dreamweaver CS4, the two functions—adding HTML and creating styles—are divided into two different views of the Property Inspector.

The reconfigured Property Inspector eliminates confusion when using HTML and CSS.

HTML data sets

Dreamweaver’s new HTML data set feature lets you convert a regular HTML file to a small database system. For instance, you can create an HTML table with rows and columns of data, and use Dreamweaver to import that table into another web page (using JavaScript and Spry). Then you can present that data in a variety of different ways, such as a “Master/Detail” page that lets a user view a master summary of rows from the table, click an item in the list, and instantly see all the details for that table row.

The HTML data set feature allows you to import and present data in different ways.

Photoshop smart objects

For this version, Dreamweaver supports a key, long-standing feature of the other Creative Suite programs—smart objects. Dreamweaver CS4 offers support for Photoshop smart objects, meaning you can drag a PSD file into a web page within Dreamweaver, optimize the image for the web, and even resize it. If you later update the original PSD file, a red arrow appears on the image in Dreamweaver, indicating that the source file has changed. You can then click the Update from Original button in the Property Inspector, and a new version of the image is created.

Smart objects provide easier optimizing and updating of graphics.

Other new features

Adobe AIR authoring support

Adobe AIR is a cross-platform system that lets developers combine HTML, AJAX, Adobe Flash, and Flex technologies to deploy Rich Internet Applications (RIAs) on the desktop. Because it fully supports Adobe AIR, Dreamweaver allows developers to use familiar tools to build their applications and easily deliver a single application installer that works across multiple operating systems.

Subversion

Dreamweaver now includes Subversion, a version control system similar to CVS and Visual Sourcesafe (VSS). Subversion is typically used by companies to maintain a team environment on larger projects that require changes to be logged, and versions to be controlled. Previously in Dreamweaver, if you wanted to maintain versions, you would have to do the work yourself—maintaining folders and copies of previous versions. With Subversion, all files are kept on the Subversion server. Changes are tracked so that you can restore your project to any previous state.

Adobe Dreamweaver Training Class Locations

AGI offers regularly scheduled and private Dreamweaver classes at our training centers. Adobe Dreamweaver Training in or near Boston, Chicago, New York City, Philadelphia, Orlando, and London, England. Visit our Dreamweaver training class locations page.