Adobe Dreamweaver CS4 is the industry leading Web development tool for building Web sites and applications. It provides a combination of visual layout tools, application development features, and code editing support, enabling developers and designers at every skill level to create visually appealing, standards-based sites and applications quickly and easily. From leading support for Cascading Style Sheet (CSS) design to hand-coding features, Dreamweaver provides the tools professionals need to get the job done. In addition, developers can use Dreamweaver with the server technology of their choice to build powerful Internet applications that connect users to databases, live data feeds, and legacy systems.

Dreamweaver is an application that’s rooted in the real world. In the real world, new or updated browsers come into the marketplace every year, and this creates problems in compatibility. Dreamweaver solves this problem by giving you powerful error-checking tools, and even gives you the ability to use Live Data View, and see exactly how your pages will perform on virtually any browser.

In the real world, server technologies change quickly. Dreamweaver’s extensible architecture makes server compatibility a snap by giving you the tools to customize for third-party server models. In the real world, computer operating systems change. Dreamweaver’s CS4 not only supports use on Windows and Macintosh systems; in addition, there is now support for the new Intel-based Macintosh computers.

Web designers come at all levels of experience. Dreamweaver’s user-friendly interface helps you out. If you’re relatively new to the application, you can jump right in and begin designing simple Web pages. If you are an experienced designer, you will be able to access the power and control that this application offers, and take your Web designs where no one has gone before.

Before you can install Dreamweaver, you will need to make sure that your computer meets the minimum system requirements. Dreamweaver CS4 is supported on both Windows and Macintosh computers, including the new Intel-based Macintosh systems.

While many designers bemoan the fact that their older computer systems will not support the newer applications, in the long run it’s all for the best. The original versions of Dreamweaver (many years ago) were simply non-visual HTML editing applications. Dreamweaver CS4 is not only doing things that were not even dreamed of in years past; it’s also faster. As a Web designer, time is an important part of getting the job done, and getting it done quickly.

If I can accomplish more work in less time, it gives me more time to be creative, and able to meet my deadlines. And that’s a good thing. So think of system requirements as the power behind the applications, that’s going to help you do more, better work, and all in less time.

You need to have a computer with the following minimum configuration:

You need to have a computer with the following minimum configuration:

The process of installing the Dreamweaver application is fairly straightforward; you insert the Dreamweaver disc into your disc drive, double-click the installer application and simply follow the on-screen instructions. The first thing that will happen is that the installer will check to see if you have the minimum system requirements. If you meet the minimums, the installer will guide you through the steps to complete the installation. The whole process takes about ten minutes, and at the end of the process you can launch Dreamweaver for the first time. Remember to have your serial number handy, because you will have to type it in before you can open the application. It’s a good idea to have that serial number in a safe place, just in case you would need to reinstall Dreamweaver.

The launching of Dreamweaver can be accomplished in one of several ways. You could access the application by opening the Dreamweaver folder and double-clicking on the application icon (Macintosh or Windows). You could create an alias of the application, by right clicking on the Dreamweaver program icon and selecting Make Alias (Macintosh) or Create Shortcut (Windows).

The Dreamweaver Graphical User Interface or GUI (pronounced “GOOEY”) is the Web designer’s workplace. Inside its document window and 19 main work panels you will find all the tools you need to design everything from a simple Web page, to a complex site.

Before you create a Web site, you need to create a local root folder where you’ll store all the elements that make up the site. Web sites are more than just a bunch of Web pages. All the images, navigational buttons, document, etc., are separate files that must be uploaded into those pages. That’s including any video, audio Java applets and scripts. Defining a Web site instructs Dreamweaver that the local root folder is the folder location that contains all the elements of your site. In turn, Dreamweaver will keep track of the files within the folder, automatically update them when necessary, and give you easy access to them, while you’re working.

Adobe Dreamweaver allows you to manage multiple sites. When you open Dreamweaver it will load the Web site last used. If, however, you need to work on another Web site it’s a simple matter to redirect Dreamweaver to the needed site using the Manage Sites dialog box, which you can also use to create, edit, duplicate, remove, export, and import sites.

The whole point of using Dreamweaver is the creation of Web pages. In turn, these pages will load static and dynamic content, and be bundled together with a good navigational system; finally winding up as a complete Web site. The process of creating a site can become quite involved; however, it all begins with the creation of the first page. A new page is a blank slate for you to draw. A new Web page can be literally anything from a text page to a high-end page dealing with animation, video, audio, CSS, or any combination of the above. Please don’t take this step too lightly. In other words don’t start with a plan, just put the first page together and see where it goes from there. It’s the plan that will make it all come together.

A Dreamweaver template is a common structure created and used for all or some pages of a Web site. Each section of a Web site can have its own template with variations in structure or color from the others. Templates are fantastic timesaving tools because they allow you to create pages that share the same design but different content, and if you modify a template document, you immediately update the design of all pages that were created from that template. Dreamweaver templates are special master files that contain editable and locked regions. Pages based on a template enable Dreamweaver users to edit parts of a Web page within the editable regions without the risk of accidentally changing the locked regions. This is a major advantage, because if you are creating a site that will be maintained by other users you can specify which parts of pages editors can and cannot change.

Instead of creating a Web page from scratch, you can create a new Web page based on the existing template, which can save you a lot of time and effort. In the New Document dialog box, you can select your own custom template designs available in the Page From Template category or click Get More Content to open the Dreamweaver Exchange on the Web to download more template page designs.

If you’re not sure where you start, you can use one of Dreamweaver’s sample designs as a starting point for a new page and then make any changes you want to customize it to suit your specific needs. In the New Document dialog box, you can preview sample file designs and then create a new document based on the one you want to use. You can select from sample pages with CSS (Cascading Style Sheets), frames, themes (starter pages for Entertainment, Lodging, etc.), and basic types (starter pages for Commerce, Data, Images, etc.). When you create a new document, Dreamweaver makes a untitled copy of the sample file, which you can save with a new name.

Web pages should be saved as soon as they’re opened. Naming conventions should be according to a predefined list of names that you created during the planning stage of the project. It’s important to save pages early, that way if there’s any problem such as: the application locking up, you will be able to start again from the last-saved version. Another important reason is error checking and validating. Web pages must be in a saved state before performing any validation.

Opening a Web page is a simple procedure. You can use the Open section on the Welcome screen, Open commands on the File menu, or Adobe Bridge CS4 (a stand-alone file management program that comes with Dreamweaver CS4) to open Web related files in several formats. You can open a Web page from your local hard drive, a network drive, or a Web server using an Uniform Resource Locator (URL). By default, Dreamweaver opens the last Web site you worked on every time you open the program. If you open a new page while another site is still open, the new page opens in a new Dreamweaver window. Web pages using the HTML—Hypertext Markup Language—are the primary file types you open in Dreamweaver, however, you can open other types too. As an editor, you can use Dreamweaver to open many types of Web related files, including style sheets, scripts, text, xml, and libraries. For Web pages you recently opened, you can quickly reopen them again by pointing to Open Recent on the File menu, and then selecting the Web page you want to open.

Dreamweaver displays the contents of a Web page in different ways to help you work efficiently with your content. When you click a Web page or document tab, Dreamweaver displays three view buttons on the Document toolbar below the tab name.

Code view displays the HTML and any embedded code for a page.

Split Code view (New!) displays the screen in half horizontally. Both halves display page code. Only available on View or Layout menu.

Code and Design view displays the screen in half horizontally. The top half displays the current page in Code view and the bottom half displays the current page in Design view.

Design view displays Web pages in WYSIWYG (What You See Is What You Get) view for editing.

The tabs across the top of the Document window indicate the currently open Web pages. You can click the tab to display the page or site you want. Below the tab in the Document window, the view buttons—Code, Split, and Design—appear for the current page. Design view displays the page or site as it appears on screen, while Code view displays the HTML code that makes up the page or site. Split (Code and Design) view shows you Code view at the top and Design view at the bottom, while Split Code view (New!) shows code at the top and bottom.

As you work on the development of your site, you will probably want to occasionally stop and see what the individual pages look like. Instead of previewing pages in a browser, you can view pages as they will appear in a browser without having to leave Dreamweaver. Live view (New!) is a non-editable, more realistic view of what you see in Design view. You switch to Live view from Design view. When you switch to Live view, Design view becomes frozen. However, you can still use Code view to make changes and then refresh it back in Live view. While in Live view, you can also view live code (New!), which is a non-editable view of the executed code on the page. When you switch to Live view, you can also freeze JavaScript and the page in its current state. This allows you to make and refresh changes to step through different states of a user interaction, pop-up menus, or other interactive elements, which you can’t do in Design view.

As you work on the development of your site, you will probably want to occasionally stop and see what the individual pages look like when previewed within a specific browser. One of the most used features for testing your site is the Preview In Browser feature. This is one of the most used when working in Dreamweaver. It lets you see what your site will look like in a particular Internet browser. When testing a particular Web page, it’s a good idea to check it out in more than one browser, and in more than one version of the browser. For example, on the Macintosh the native browser is called Safari, and on Windows, it’s Explorer. The Safari browser will not work on a Windows machine, and Microsoft recently stopped supporting the Macintosh platform. Since your Web page will be loaded, interpreted, and run by the visitor’s browser, it may look great in Safari, and not even work in Explorer. Therefore, make sure that you check your pages out in all the major versions of the browsers that you believe your visitors will use.

At some time, everyone has a question or two about the program they are using. Dreamweaver Help uses a Community Help site (New!) on the web at adobe.com (which is updated regularly) to help you find the information you need. When you start Dreamweaver Help, your browser opens, displaying a web site with help categories and topics. You can search the site by using keywords or phrases or browsing through a list of categories and topics to locate specific information. When you perform a search using keywords or phrases, a list of possible answers is shown to you from adobe.com, with the most likely answer to your question at the top of the list.

Applications are released to the public on a specific date, and as sure as the sun rises in the east; they will eventually come up with a new version. As a matter of fact, this is the ninth version of Dreamweaver. The problem is that we can’t always wait for an update to fix a specific problem. For example, you just picked up Dreamweaver CS4 and loaded it onto your computer... three months later you get an update to your operating system, and load it. Ops... Dreamweaver is having problems, now that the new operating system is loaded. Do you wait another year for the next version update? The good news is that Adobe already knows about the potential problem, and in their immense wisdom created an update to fix the problem. It’s not a bad idea to make a notation on your calendar and visit the update area on a monthly basis. You might be surprised what you find... and all updates are free. But how do you get that update? You’re only a couple of clicks away.

After you finish working on a Web page, you can close it and open another one, or close it and exit Dreamweaver. Closing a Web page makes more computer memory available for other processes. Closing a Web page is different from exiting Dreamweaver: after you close a Web page, Dreamweaver is still running until you exit it. You can use the Exit command on the File menu (Win) or Quit Dreamweaver command on the Dreamweaver menu (Mac) to close a document and exit Flash, or you can use the Close button on the Document tab (New!). If you try to close a document without saving your final changes, a dialog box opens, asking if you want to do so.

As much as we enjoy working in Dreamweaver, the time will finally come when you want to shut down for the day. The process of closing out a Dreamweaver Web site, is not difficult; as a matter of fact, it’s no more complicated than closing down any application. Dreamweaver is smart, if you attempt to exit or quit before saving that last file you were working on, Dreamweaver prompts you to save or ignore any changes.