Excerpt from Dynamic Learning - Dreamweaver CS3

What you’ll learn in this lesson: Exploring Dreamweaver’s primary features Introducing new features in CS3 Understanding how web sites and web pages work Coding HTML/XHTML: the basics

Dreamweaver CS3 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.

What is Dreamweaver?

Dreamweaver is an excellent coding and development tool for new and experienced users alike, and 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 CS3, so you can import and adjust graphics from within the application.

Site management and File Transfer Protocol (FTP)

Dreamweaver has everything you need for complete site management, including built-in file transfer (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 you can ensure that your site works well and looks good. If you’re designing your pages with Cascading Style Sheets (CSS), the new 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, which acts as a powerful text editor. Edit HTML code directly and switch views to see the results of your code as you work. Enhancements 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.

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 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 CS3?

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

Spry Widgets and the Spry framework for Ajax

Asynchronous JavaScript and XML (AJAX) is a popular combination of technologies used to create highly interactive web applications, or Rich Internet applications (RIAs). The Spry framework for Ajax is a JavaScript library for web designers that enhances user interactivity through navigation and form components as well as XML data-driven objects. Users of all levels can add visual effects, create intuitive menus, and develop within the Spry framework without having to climb the steep learning curve normally required to create these advanced features from scratch.

The Insert bar features a new Spry Widgets category with XML data-driven objects, self-validating form components, and enhanced navigation items, such as drop-down and accordion-style menus that you can easily customize and format with CSS (Cascading Style Sheets).

To view and customize a navigation bar created using the new Spry Widgets pane, follow these steps:

1 Launch Dreamweaver CS3.

2 Choose File > Open, or press the Open button () on the Welcome Screen.

3 When the Open dialog box appears, navigate to the dw01lessons folder and select SpryWidgets.html. Press Open.

4 Preview the document by choosing File > Preview in Browser, or by pressing the Preview/Debug in browser button () in the Document toolbar. Choose the default web browser or pick from a list of browsers installed on your computer. The document will open in a browser window. You can roll over the menu elements to see them expand to reveal more menus.

If you are using Internet Explorer on the Windows platform, you may need to select the Allow Blocked Content option under the toolbar and press OK. This is a security feature in this browser which prevents the external javascript file used in this widget from automatically running.

5 Close the browser and return to the document in Dreamweaver. Customizing Spry menus is easy. In the Document window, click on the tab at the top of the menu that reads Spry Menu Bar: MenuBar1. In the Property inspector at the bottom of your screen, locate and select Your Links in the first column to expand the menu.

6 In the Property inspector, Link 1, Link 2, and Link 3 represent locations in the menu where you can place any links you want. Select Link 1. In the text field labeled Text, enter the words Adobe Dreamweaver.

7 In the text field labeled Link, type http://www.adobe.com/dreamweaver in place of the pound sign (#). Press Enter (Windows) or Return (Mac OS) to commit the change.

8 Choose File > Save to save the page, and preview the new changes you made by choosing File > Preview in Browser or by pressing the Preview/Debug in browser button in the Document toolbar. The new link you added appears when you move the cursor over Your Links; you can now click the link to jump to the Adobe site.

The method is the same to customize the other two links—try it to see how easy it is to create interactive menus to navigate around your web site or other web sites.

9 Close the browser and return to Dreamweaver. Choose File > Close to close the document.

Spry effects

Elements on a page can adopt some very cool behaviors—boxes can fade in and out, shrink and grow; menus and images can slide in when a user loads a page. Spry effects make all this possible. Take a look at some of the new Dreamweaver Spry effects through the Behaviors panel (open by going to Window > Behaviors). Choose the plus-sign symbol > Effects and check out the Spry effects options.

1 Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. Select the file named SpryEffects.html, then Press Open.

2 Choose File > Preview in Browser or press the Preview/Debug in browser button () on the Document toolbar. The page will launch in a new browser window.

3 Use your cursor to roll over and select the different boxes on the page to see how Spry effects can make objects disappear, highlight, and fade to bring life and interactivity to an otherwise simple web page.

4 Close the browser and return to Dreamweaver. Choose File > Close.

1 2 3 | Next