|
Related Reading 
Dreamweaver MX 2004: The Missing Manual |
As you ponder a strategy on how to update your old web sites, or if you're in the planning stages of new sites, you may be considering a switch to a different mode of creation. If you've been a hand-coder all these years, you may be considering a visual design tool. Perhaps you've switched platforms, and want to move away from another visual design tool, such as Microsoft FrontPage or Adobe GoLive. Or maybe you want to bring your site into compliance with XHTML, or migrate from a static site to a database-driven dynamic site.
Macromedia Dreamweaver has always facilitated web design in the visual graphic art tradition. It's also famous for its accurate HTML code and organic way of letting users alternate between code and design view.
Dreamweaver MX 2004, the recently released version, has some improvements that may affect your decision. We survey some popular new and cool features of MX 2004 below.
Let's assume that your web sites were created in another application, such as BBEdit or TextWrangler, or even FrontPage. You can port them into MX 2004.
Make sure your site and all its folders -- including web pages, images, CSS files, templates, and rich media files -- are located in the root folder of your hard drive. Then, from the main menu, choose Site>Manage Sites.
The Manage Sites box appears, letting you choose a local site. Choose the FTP & RDS Server only when you want to send pages to a site that is not on your hard drive.
The Site Definition dialog box asks for information such as the site name and the exact location of the folder holding the site files. When you indicate the location of your site, Dreamweaver can manage your site's links, templates, library items, behaviors, and a host of special features.
Then, fill in the remote information specifying your FTP or network specifications and password, and click OK. When this procedure is complete, Dreamweaver establishes a path to your local site. Your files will now open in Dreamweaver, though their icons still may be associated with the program that originally created them, especially if that program is in your system.
If you want to update your site using new coding protocols, you can easily make the site XHTML compliant. HTML is no longer under development, and its replacement, Extensible HTML (XHTML), basically XML, is compatible with most browsers. You don't have to change a single line of code or have any special knowledge of XHTML or HTML to convert an entire site, or some selected pages. Just use the Convert command under the File menu and XHTML is the only choice.
You can also specify that any or all new pages be XHTML compliant by clicking the checkbox in the New Document dialog box.
Dreamweaver also supports the import and export of template-based XML files so that you can work with template data in other programs, such as a text editor or an XML editor. Open a template-based document and choose File>Export>Template Data as XML.
The Export Template Data dialog box gives you a choice of notations for templates with repeating regions or template parameters, or those without. Click OK for the kind of template this document is derived from. Then name the XML document.
It should look like the image below. There is no design view. All you see is code.
|
Some new accessibility features in this version of Dreamweaver can make your site more compliant with the W3C's Web Accessibility Initiative and/or the U.S. government's Section 508 guidelines.
Accessible web sites, aside from being the law of the land for the U.S. government, are simply common sense and good manners. You want everyone within your target audience to be able to view your web site. You don't want to lock out those who have visual, auditory, or motion disabilities.
Whether you're starting from scratch or retrofitting parts of your site, in MX 2004, accessibility is built in. Dreamweaver MX 2004 ships with multiple tools for designers who use assistive technology as well as features that help webmasters build accessible web sites. It is more efficient to build accessibility into your site from the ground up rather than to retrofit an existing site.
Accessibility features include screen-reader support, text equivalents for graphics, keyboard shortcuts, and high-contrast display colors.
Accessibility starts with the preferences. Check off which elements must be accessible, and Dreamweaver will prompt you to add the proper tags to forms, frames, media objects, images, and tables, all while building the site.
Tables prompt you for accessibility tags by default. Table tag features such as Caption and Summary are built into the Table dialog box. Indicating where headers are located organizes the information read by screen readers.
With Dreamweaver's accessibility preferences enabled, nothing is left to chance. You are reminded to create ALT tags for your images.
Labels indicate the purpose of form items, such as text boxes, checkboxes, or Submit buttons. Dreamweaver MX 2004 prompts you to fill in form labels (which are read by screen readers), and choose access keys, and a tab-index. These elements help those using assistive technologies to more easily navigate through a form and to understand each element of the form as they fill it in.
You can wrap a label tag around a form object with the Wrap with label tag style. This option assumes that the label and the form object are next to each other.
The Attach label tag using "for" attribute allows the label and form object to be separated by table cells, or be placed above or below each other. This option offers more flexibility in the placement of form objects and their labels, while still associating the correct label with the correct form object. You can position the label tag before or after the object, as long as all labels are placed consistently.
Access keys -- a single letter or number -- allow users to find form objects via a keyboard shortcut. Access keys work well for longer forms that otherwise would require multiple keyboard tabs to access each required item. Tab index specifies the order that the tab key moves among elements on the page, and could be helpful if those elements' positions in the code differs from the visual layout of the page.
Access keys and Tab indexes are not required by the W3C or Section 508 of Federal Rehabilitation Act, but they can make forms easier to use for people with motion disabilities.
Even if you don't have a clue about Section 508 or W3C guidelines, you can still build an accessible web site. Dreamweaver MX 2004 contains a long list of accessible page templates in the Start Page dialog box.
Dreamweaver MX 2004 lets you test your site for accessibility. The tests are automatic, dynamic, and exhaustive. You can check by page, folder, or site. You do not have to correct any errors, and you can tailor the tests to any level of accessibility that your viewers require. Most accessibility policies worldwide are based on the W3C's Web Content Accessibility Guidelines.
In the Results inspector, click the green Reports arrow in the Site Reports tab.
A dialog box lets you choose which reports to run and lets you enable and disable various accessibility rules.
You can also enable and disable certain accessibility parameters in the Accessibility dialog box to sync your site with the needs of your audience. Click the Report Settings button to access the dialog box below.
Each notation in the Results Site Reports panel refers to UsableNet's Accessibility Reference guide that you can access through the More info button. Double-click on an error message, and it tells you exactly where on the page it is located, and highlights the code for you in code view. The reference tells you why it is inaccessible, to whom, by what standard, and how to fix it.
CSS implementation in Dreamweaver MX 2004 is so highly evolved it's nearly transparent. The program has a light, flexible way of approaching CSS, both propelling designers to use it, and making it easier to learn.
The first and most obvious implementation is the Page Properties button on the Property inspector. Unless you specifically set a preference to use HTML, Dreamweaver writes custom styles from the Property inspector by default. The Page Properties dialog box interface is simple to use to set all text styles such as color, background, headers, and even link rollover and underline styles. The Property inspector's text styling commands also write CSS.
To assign a new style, go to the Styles panel and click the New CSS Style button. Type the name of the selector, and fill in the CSS Styles dialog box to indicate how the style will look. You also can create a new style sheet, as well as add, subtract, or replace a style in an existing style sheet. Use the Attach Style Sheet button to attach a style sheet to any page. Once you have attached a style sheet, or added styles to a page, you can access and apply styles through the Property inspector.
|
Use the New CSS Style dialog box to assign a new style class for an individual page, or create a new style sheet.
The new style appears in the Property inspector's Style pull-down menu, and can be applied to any text on the page.
Dreamweaver's new features make style markup easier and more convenient. The CSS Properties panel, which shows you selector properties, appears in a Rule inspector whenever you select a style from the CSS Styles panel. You can see properties in list or category view, and you can edit properties right from the panel -- no visits to the CSS Styles dialog box.
Select any element on the page, and a new Relevant CSS panel appears as part of the Tag inspector. Relevant CSS is a two-part panel: one part highlights the element you chose on the page, while the other part reveals its properties and lets you edit them right in the panel grid. When you apply edits, you will see the change immediately on the page. The panel will indicate any CSS styles that affect the selected element.
The Target Browser Check feature lets you check your site against a wide range of graphical browsers, and assures that your site is designed for its audience.. Choose which browsers you want to test by accessing the Settings command via the Target Browser Check button.
The Target Browser dialog box lets you choose which browsers to test.
Then, from the Document menu, click the Target Browser Check button pull-down menu to check errors for a page or site, or to add further settings. This utility runs through your code to identify which tags and attributes are not supported in the browsers you chose. The results are available from the Target Browser Check panel of the Results inspector.
The Target Browser Check panel gives you a line-by-line analysis of all non-compatible elements. It offers a plain-English guide containing detailed explanations about the errors. Clicking anywhere on an error report highlights the error in your page code.
An error preceded by a red stop sign indicates a serious problem. A yellow warning icon lets you know that certain code may not display correctly, but that there are no serious display issues. An informational message tells you that code may not be visible, but that it will not affect how your page displays.
Some other neat features include customizable syntax coloring, reference books, coding aids, and a customizable tag database.
Those who have used BBEdit know how convenient color codes can be. Slogging through a sea of black type is not my idea of fun. Dreamweaver, with or without BBEdit integration, lets you custom color your code.
Under Dreamweaver-->Preferences, choose the Code Coloring category. Choose any scripts and web languages that you use to set up a color scheme for your documents.
While you don't have to be an HTML wizard to use Dreamweaver, you can use its built-in reference panel to bring yourself up to speed. The O'Reilly Network (publishers of this web site) has contributed complete versions of its reference works on HTML, CSS, JavaScript, ASP.NET, PHP, and SQL. The reference panel also includes Macromedia's ColdFusion references, UsableNet's accessibility reference, and Wrox's ASP 3.0 and JSP references. To access them, choose Window-->Reference to bring up the Reference tab in the Code panel group.
Hand-code faster and more accurately by invoking Code Hints in code view. Generally, you can find the place where you want to add code. When you type the open bracket, clickable code hints automatically appear.
Control-clicking a selection in code view brings up a contextual menu that you can use to tweak your tags.
Tag libraries (located in an XML tag database) are an easy, visual way to manage your collection of tags. Use the tag library editor to add, edit, and delete tag libraries, tags, and attributes. You can also import custom tags into Dreamweaver to make them part of the coding environment. When a tag is part of the program, it appears with its attributes for coding and editing. A plus (+)/minus (-) interface lets you add and delete tags easily.
Use the Tag Library Editor to set properties and edit tags and attributes. Select a tag to see its properties.
Dreamweaver MX 2004 is a different world when it comes to visually designing and coding your site. However, be aware of some issues that have arisen for OS X in the initial release of this version.
First, there are some disappointing kinks in performance in Jaguar. For example, launching the program seems slow; it seems to hang before finally launching. Then, some commands, such as opening and closing documents, switching documents, FTP, and various other common functions, initiated a spinning beach ball for varying lengths of time. Launching the application and other functions seem snappier in Panther.
There are also a few glitches in customizing the workspace via panel groupings. It is sometimes awkward to expand some panels past a certain point. A Maximize command opens a panel to its largest setting, which is not always necessary. There are limits to grouping certain panels together, too. You can't just tear off any panel and group it with any other one, as some choices are dimmed out or do not appear.
Anyone can appreciate the need to conserve paper and save on printing costs, but Macromedia should include a free, printed instruction book with the program, in addition to the 800-page (9.1 MB) PDF.
Those who installed or plan to install the program in Jaguar, and then upgrade to Panther using the "Archive and Install" or "Erase and Install" features, will need to install a patch from the Macromedia web site at http://www.macromedia.com/support/service/ts/documents/mac_archive_install.htm. Otherwise the program will not launch.
If you are looking for a change, the best way to go about it is to download a free tryout and see how it works for you.
Jackie Dove is a technology writer, editor, and software reviewer specializing in digital art, Web design, the Internet, and of course, the Mac.
Return to the Mac DevCenter
Copyright © 2009 O'Reilly Media, Inc.