Adobe Creative Suite 3 Photoshop and Dreamweaver

The purpose of this article is to provide a brief look at some of the tools available for use in Web site design, and point you to where there is more in-depth coverage of each technology highlighted in later articles. For readers working within the constraints of a variety of budgets, this article describes a range of image-editing tools that are available on the Web either as freeware, shareware, or trial versions of commercial software. This article also provides an overview of the next wave of Internet applications for the Mobile Web, and discusses the problems and opportunities associated with the so-called Web 2.0.

Adobe Creative Suite 3 (CS3)

Adobe’s Creative Suite 3 (CS3) is a collection of applications that provide Web designers with important tools. CS3 is available in the following six versions:

- Design Premium Includes tools for print, Web, interactive, and mobile design

- Design Standard Includes tools for professional print design

- Web Premium Includes an enhanced collection of tools for Web design and development

- Web Standard Includes a standard collection of tools for Web developers

- Production Premium Includes tools for video professionals

- Master Collection Includes design tools for a variety of media, including print, Web, interactive, mobile, video, and film

Both the Standard and Premium edition of CS3 offer a toolkit for designing, implementing, and maintaining Web sites. Both editions contain full versions of the latest Adobe Flash Professional, Adobe Dreamweaver, Adobe Contribute, Adobe Fireworks, Adobe Bridge, Adobe Version Cue, Adobe Stock Photos, Adobe Device Central, and Adobe Acrobat Connect. The Premium version also includes Adobe Photoshop CS3 Extended, Adobe Illustrator, and Adobe Acrobat 8.0 Professional. You may think of the Premium edition as the top of the line because it offers every tool available in the Adobe arsenal for both Web 1.0 and Mobile Web, while the Standard edition is lower end. While both will help you reach your Web design goals, if you are a serious designer, you’ll need those tools only contained in the Premium pack. This article concentrates on the Web Premium edition of CS3. Included in this edition are the following applications:

- Photoshop

- Dreamweaver

- Illustrator

- Flash Professional

- Photoshop Extended

- Fireworks

- Acrobat

- Contribute

Let’s take a look at each of these in a bit more detail.

Photoshop

Photoshop is part of a suite of Adobe applications, CS3, that are related to graphics creation, manipulation, and presentation in print, mobile, and Web media formats. Adobe Photoshop is classified as an image editor, which you can use to alter photos or other image sources (including animations and movies) to meet a particular need (such as advertising a product, providing a newsworthy photo, creating illustrations for a children’s book of poems, or even putting a church program on YouTube).

Adobe has been implementing many additional design tools in the Photoshop application. Photoshop is primarily used for the manipulation of bitmap images, while Illustrator is for vector images. All graphics fall into one of two categories: bitmap and vector. Bitmap images generally have 72, 96, or 120 dots per square inch (dpi). Of course, you can also customize that setting, and you can actually check to see what your dpi is. Click Display in the Control Panel, then the Settings tab, and, finally, the Advanced button. Bitmapped images are represented using pixels (but are not pixelated). There are generally 72 pixels to an inch of screen space. All pixel-based graphics are resolutiondependent. This means that the larger you blow up an image, the more unpleasant it is to the eye.

The larger an image is made, the more the pixels that must be inserted into it to keep the image coherent, but the colors assigned to the new pixels must be interpolated from the surrounding milieu, leading to a fading (or washed-out appearance) of the original colors and a fuzziness to the initial clarity of the picture. Interpolate means to introduce additional pixels into the new, larger image to have them blend in with the colors of the adjacent or surrounding pixels. However, the great thing about bitmaps is that, though they do not scale well, they are able to finely reproduce the enormous range of colors, harmonies, and textures that come through in the finest photographs and finely detailed portraits at normal sizes.

Some typical bitmap file formats are Bitmap (BMP), JPEG (JPG), Portable Network Graphics (PNG), Tagged Image File Format (TIFF), Graphics Interchange Format (GIF), and PICTure (PICT) (for the little bit of Mac in all of us).

Vector images are objects created by algorithms. (An algorithm is just a mathematical formula such as e = mc2.) These objects may be lines, curves, or other shapes, and are infinitely elastic. They show up distinctly, unmarred by jagged edges, irrespective of degree of resizing or scaling. Note that there is no loss of clarity when the picture is enlarged several times from the original. Although crisp, clear, and attractive, the vector graphic lacks the succulent realism of the same image in bitmap format.

Vector graphics are also sometimes referred to as object-based graphics because they are softwarecreated objects (curves, outlines, and shapes) appearing in palettes. They are infinitely adjustable, and their cartoon-like appearance makes them ideal for representing objects in video games, or animations depicting historical re-creations. However, that is also their limitation. Object-based graphics are incapable of reproducing the rich and subtle tones of a photograph, although such imagery can now be embedded within existing containers of vector graphic outlines to achieve greater photorealism. This hybridization is called a metafile.

Dreamweaver

Dreamweaver is a full-featured, user-friendly application used to design and develop Web sites in an integrated development environment (IDE). In the same way, Visual Studio is an IDE for Visual Basic and other languages, while HTML-kit is an editor for generating HTML code. In the CS3 iteration of Dreamweaver, the developer can use the Spry framework for Ajax to develop sites that, according to the Adobe advertising promo, ‘‘will leave your competition standing still.’’ A lot of the development toolbars in Dreamweaver may seem familiar because they follow Windows conventions long established by Microsoft. The top menu bar of the Dreamweaver main screen includes File, Edit, View, and so on, all the way over to the Help menu on the far right. These all appear in Microsoft’s recommended sequence. Like many such applications, Dreamweaver is menu and icon-driven with the menu bar and standard toolbar for such tasks as printing, copying, adjusting fonts, drawing, and the like.

As with most applications, these toolbars can be resized, dragged, docked, minimized, added to, or subtracted from, and their associated icons are accessible via keyboard shortcuts, mouse clicks, tabs, panels, and the taskbar. The workspace (the blank area surrounded by menus, panels, and other options) is the area where you develop the Web pages for a site. The easily accessible panels to the right of the workspace contain additional functionality (such as a CSS or properties). And, of course, the developer is able to modify the workspace to suit his or her individual needs.

Dreamweaver uses the standard tools of Web development: HTML code, JavaScript code for interactive functions, links, layout templates, tables, frames, interactive forms, and Cascading Style Sheets (CSS). In short, it is a comprehensive Web authoring tool that allows the developer to create, manage, maintain, and edit the site, even after it has been set up at its remote location (which is called a Web server). The developer can automatically use drag-and-drop techniques to select templates (for page layouts and for forms design, for example) or to query technologies, all while generating the associated HTML code.

Dreamweaver has several admirable features dealing with concurrency. These features enable a designer who is working as part of a team of programmers to work on any particular Web page while the rest of the team is working on other multiple Web pages of a site. The concurrency features ensure that no duplicate versions of a file can be created by programmers who might otherwise unknowingly be working separately on the same file.

An associated application, Fireworks (discussed in greater detail later in this article), offers several options in its tool palettes for the modification of images which provides a good companionship with Dreamweaver. For example, tables can be created simply by selecting an icon from the Insert bar and picking from the options offered. Dreamweaver is a WYSIWYG (‘‘what you see is what you get’’) development environment. The idea underlying a WYSIWYG is that, as a developer develops the page, he or she can literally see the page come to life as ‘‘a work in progress.’’ As the page is created, modifications can be

Bear in mind that the final product seen on the developer’s screen will not necessarily be rendered the same way on all users’ screens. There are going to be the adjustments to browser types, screen resolutions, graphics capabilities, and connection speed that will affect how (and when) the Web page is rendered on a viewer’s device. For example, using the features available in Dreamweaver, the developer can provide multiple versions of each of the Web pages loaded on the site by creating and referencing multiple versions, and testing each type of browser that might try to access the site. The Dreamweaver developer must also be aware of not only different browsers but also different screen resolutions and sizes. The Internet is capable of servicing many device types, such as desktop computers and laptops, as well as handheld devices and microbrowsers, also known as mobile browsers.

Professionals also understand that not all people on the Internet use dedicated T3 or even T1 lines for communication, and good developers minimize the eye candy to speed up delivery of content. Most of what developers cannot control directly, they can anticipate and plan for. In addition to the now-standard features of line numbering and automatic color coding to help in resolving coding issues, Dreamweaver has sophisticated diagnostics for troubleshooting related problems.

Though it may seem difficult at first, learning how to use these Dreamweaver development tools makes coding for Web pages a breeze. However, it was not always this convenient. Many developers’ first Web page code was written using Microsoft Notepad. If we made logical or syntactical errors in that nice little text application, they would be very difficult to find because there would be no pointers to where a glitch might be while running the program. The program would just run or it just wouldn’t. Of course, you could comment out sections you were suspicious of and run the program again, but sometimes the easiest troubleshooting methodology would be to just press the Delete key. Coding in plain text was no way to get home to dinner on time.

Plain text had no WYSIWYG, no split screens, no quick-and-easy back and forth between code and pages to aid in design and problem diagnosis. A developer did not have much of an idea of what the final site would look like until he or she ran the program. This meant a lot of tedious back and forth between the code and the unfinished page, and there would always be occasions when the screen would render nothing after a seemingly trivial change. But no more coding drudgery! Like all such applications, Dreamweaver has significant advantages and some drawbacks, but it is a premier Web site development and management tool.

Dreamweaver is included in many versions of CS3 for use by both the professional and casual users (it has very sophisticated design features, or is ‘‘feature-rich’’, as techies say). The Design Premium or Master Collection versions are designed for use by Web professionals, and consequently those versions can be rather pricey. In addition to the above CS3 versions, Dreamweaver is also available in a Web Standard edition (without a lot of the high-end tools), which may be more appropriate for use by occasional designers.