Dreamweaver MX 2004 phần 10 pps

You can configure your Dreamweaver workspace so that the program prompts you to use accessibility features when you insert page ele­ments, and you can also run an accessibility report to

618 ■ chapter 32: Customizing and Extending Dreamweaver

Hands On 1: Using the Advanced Random Images Extension

There are a wide variety of extensions available, but one of the most useful is the Advanced Random Images extension Not only is this extension one of the most useable, but it is also one of the most popular This extension allows you to display a random image, a daily image, or even a set of sequential images on your website This is a great tool if you wish to create a series of rotating banners for advertising, or even if you want to easily change the appearance of your website for daily visitors

The Advanced Random Images extension is available on the companion CD To install and use this extension, follow these steps

Image extension file (advRandImage3.mxp

2 The Extension Manager dialog box should display automatically If it doesn’t, you can also use one of these:

• Select Start ➔ Programs ➔ Macromedia ➔ Macromedia Extension Manager from your Windows desktop

• Double-click the Extension Manager application in your Finder window on your Macintosh

3 In the Extension Manager window, select File ➔

4 Click Accept to agree to the terms of the licensing agreement for the extension The rest of the installation should complete, and you should be returned to the Extension Manager with the Advanced Random Image extension selected and checked

5 Open Dreamweaver and the document to which you wish to add the random images

This document must be saved into your current site for the extension to work properly

6 Select Commands ➔ Kaosweaver.com ➔ Advanced Random Images to open the Ran­dom Images dialog box shown in Figure 32.15

hands on 1: using the advanced random images extension ■ 619

7 In the Random Images dialog box, select the type of dis­

play you wish to create from the Actions drop-down menu Your options include the following:

Random Image Images in the list are displayed randomly

Daily Image One image is displayed to all visitors each day

Random Slideshow Images are displayed randomly in a slideshow format

Sequential Slideshow Images are displayed in their listed order in a slideshow format

8 Use the + (Plus) button and Folder icon to add images to

your Image List If you wish to delete some, select them and click the - (Minus) button

9 In the Subdomain field enter the trailing part of the URL

if your site is not at the root for your web server

10 Set the following properties for each image in

your list

Auto

Width Height Align Title & Alt Sets the alternate text for the image

Border Link

Figure 32.14

The Select Extension

To Install dialog box with the Advanced Random Images extension selected

Target

11 The properties affect only the currently selected image in the image list

12 Click OK when you are done

The code created by this extension is visible only when you have View Invisible Elements turned on, so don’t worry if you don’t see any results on your Design view screen You can see them in Code view

Figure 32.15

The Random Images dialog box, which allows you to config­ ure the Advanced Random Images extension

620 ■ chapter 32: Customizing and Extending Dreamweaver

When you view this page in your browser, you will see that the images appear in the order, and sizes that you configured in the dialog box

Hands On 2: Add Custom Characters to an Insert Bar

The steps outlined in this tutorial allow you to create your own custom characters and add them to the Character menu of the Text Insert bar

1 Open one of the HTML files in your /Macromedia/Dreamweaver MX 2004/Configuration/ Objects/Characters directory in Dreamweaver For instance, you can use the Trademark htm file shown in this example

2 Change to Code view, by selecting View ➔ Code This opens the Trademark.html

All rights reserved >

function isDOMRequired() { // Return false, indicating that this object is available in code view

return false;

} function objectTag() { checkEncoding();

// Return the html tag that should be inserted // <!ENTITY trade CDATA “&#8482;” trade mark sign, U+2122 ISOnum >

return “&#8482;”; // Supported starting in 4.0 browsers, valid HTML //return “&trade;”; // Supported starting in 5.0 browsers, valid HTML //return “&#153;”; // Generally supported, but not valid HTML

hands on 2: add custom characters to an insert bar ■ 621

In this file, there are two JavaScript functions that insert a named entity—such as &iexcl;, which inserts an inverted exclamation point—into your document This entity is also referred

to numerically by &#161;

3 Modify the Trademark.htm file so that it inserts your entity item, &iexcl; This is done

by replacing the existing entity string on line 19 (you can view the line numbers in your document by selecting View ➔ Code View Options ➔ Line Numbers) with either the &iexcl; or the &#161; numerical entity

The named entity &iexcl; is only supported by 4.0 and newer browsers such as Internet Explorer 4+, Netscape Navigator 4+, and Opera 4+ For users of your site using other browsers

or devices, you might want to consider using the numerical entity &#161; because it has more global support

When you have finished, and as long as you are using the &#161;

function isDOMRequired() { // Return false, indicating that this object is available in code view

return false;

} function objectTag() { checkEncoding();

// Return the html tag that should be inserted return “&#161;”; // Supported starting in 4.0 browsers, valid HTML

622 ■ chapter 32: Customizing and Extending Dreamweaver

4 Select File ➔ Save As and save your new character description in the /Macromedia/ Dreamweaver MX 2004/Configuration/Objects/Characters directory Name the file

Be careful to use only valid named entities within your modified configuration files If these entities are invalid, you will insert non-supported information into your document, which might be displayed incorrectly or not at all by web browsers

Hands On 3: Using an Extension to Create a Bookmark to Your Web Page

In this tutorial we’ll walk through installing an extension to create a Universal Bookmarks link on your web page This extension adds a script to your page that provides a browser-specific link so that a user can add your URL to Netscape Bookmarks, Internet Explorer Favorites, or Opera’s Hotlist

extension file (Universal_Bookmarks.mxp

2 The Extension Manager dialog box should display automatically If not, you can also:

• Select Start ➔ Programs ➔ Macromedia ➔ Macromedia Extension Manager from your Windows desktop

• Double-click the Extension Manager application in your Finder window on your Macintosh

3 In the Extension Manager window, select File ➔ Install Extension This will open the Select Extension To Install dialog box This dialog box will automatically open to the location where extensions were last installed Click Install to start the installation procedure

4 Click Accept to agree to the terms of the licensing agreement for the extension The rest of the installation should complete, and you should be returned to the Extension Manager with the Universal Bookmark extension selected and checked

hands on 3: using an extension to create a bookmark to your web page ■ 623

5 Create a new HTML file by selecting File ➔ New

7 From the File menu, select Save As and type a name of your choice

8 Choose either Design view or Split view (with the cursor in the Design view window)

9 Choose Commands ➔ Dazdezines ➔ Universal Bookmarks

10 The Universal Bookmarks Dialog box displays In the Basic tab (see Figure 32.16),

type the URL that you want the user to bookmark This is the only field you need to fill out for the extension to work Don’t include http://; that will be automatically added by the script

11 The Advanced tab, shown in Figure 34.17, displays the link text for different browsers

You can customize this text, but Dazdezines recommends reading the Help page before you do this To display the Help page, click the Help button on the right side of the dialog box You can also customize the display of the link by adding a style sheet

For additional information on this extension, see the Universal Bookmarks page at www.dazdezines.com/mme/extensions/unversal_bookmarks.htm

12 Click the Add button

13 Be sure your page has a title; otherwise the bookmark will be saved as Untitled Docu­

ment Save the file

14 You can view the script in the Code view window, but you won’t see any changes in

Design view Preview the file in different browsers to view the link

The Basic tab of the Universal Bookmarks dialog box You can change the link text in the Advanced tab of the

Universal Bookmarks dialog box

624 ■ chapter 32: Customizing and Extending Dreamweaver

Ready, Set, Go!

Dreamweaver’s customization and extension features are among the outstanding features

of Dreamweaver and make it possible to totally customize your use of Dreamweaver But before you head out into the fast-paced world of web application development, you’ll need one more item for your web development tool kit: a good understanding of Dream-weaver’s accessibility features In the next chapter, you’ll learn how Dreamweaver can help you quickly and easily implement accessibility on all your pages and sites

C H A P T E R 3 3

Using Dreamweaver to

Make Your Site Accessible

Accessible design enables users with disabilities—whether visual, auditory, or other forms of disability—to access, navigate, and use the Web Accessibility is a part of web standards, is required for U.S government sites (under the law known as “Section 508”), and should certainly be a consideration for today’s designers and developers Many other government, educational, and corporate organizations around the world now require compliance with accessibility guidelines

Dreamweaver MX 2004 makes it easier than ever to create pages and sites that are accessible to Web users with disabilities You can configure your Dreamweaver workspace

so that the program prompts you to use accessibility features when you insert page ele­ments, and you can also run an accessibility report to test a page or site’s compliance with accessibility guidelines

Dreamweaver includes several features for Dreamweaver users with disabilities, includ­ing support for using screen readers and keyboard navigation

The following topics will be discussed in this chapter:

626 ■ chapter 33: Using Dreamweaver to Make Your Site Accessible

Using Dreamweaver’s Accessibility Preferences

Dreamweaver includes a multitude of accessibility features but, as always, leaves it up to you to choose which features you want to include in your workspace You can set these preferences in the Accessibility category of the Preferences dialog box (Edit ➔ Preferences ➔ Accessibility), as shown in Figure 33.1

Four categories of page elements are included: form objects, frames, media, and images If you check the box in front of a category, dialog boxes with accessibility tags and attributes will automatically display when you insert these page elements In the next sec­tion, we’ll review Section 508 guidelines and show how Dreamweaver’s accessibility dialog boxes help you stay in compliance with the Section 508 law

The Accessibility preferences settings also include an Offscreen Rendering check box for screen reader users This is checked by default, but you can uncheck it if you are hav­ing any problems with your screen reader

section 508 guidelines ■ 627

These 16 guidelines are taken directly from the Section 508 Law, technical standard 1194.22 (web-based intranet and internet information and applications) To see the complete

text of technical standard 1194.22, visit www.access-board.gov/sec508/guide/1194.22.htm

A text equivalent for every non-text element shall be provided The alt attribute of the img

tag is used to provide alternate text for viewers with visual disabilities who use screen read­

ers and viewers who turn off image display in browsers You can use up to 256 characters

in an alt attribute

You can also add a longdesc attribute to provide a longer text description A longdesc

attribute is a link to another page that contains only the text description Screen readers

open and read the longdesc page, but standard browsers ignore it

If you check Images in the Accessibility preferences, then when you insert an image in a

Dreamweaver page, the Image Tag Accessibility Attributes dialog box (see Figure 33.2)

automatically displays

Equivalent alternatives for any multimedia presentation shall be synchronized with the pres­

entation You can add captions for screen readers or alternative auditory content for mul­

timedia presentations, and synchronize these with the visual presentation

See the “Introduction to Screen Readers” movie at www.doit.wisc.edu/accessibility/

video/intro.asp for more details on captioning

Web pages shall be designed so that all information conveyed with color is also available

without color, for example from context or markup Make sure that your page design does

not rely on color alone to convey information

Documents shall be organized so they are readable without requiring an associated style

sheet Your page should still be readable without an associated style sheet For best results,

if you use styles, use an external CSS stylesheet with your page, and make sure there is no

presentational markup in your page code (for example, <b> tags or align attributes)

Redundant text links shall be provided for each active region of a server-side image map

Dreamweaver creates client-side image maps, not server-side, but the same principle can

be used for client-side image maps—include text links for each image map link

Client-side image maps shall be provided instead of

server-side image maps except where the regions cannot be

defined with an available geometric shape The available

shapes are rectangle, polygon, and oval Server-side image

maps are rarely used

Figure 33.2

Image Tag Accessibility Attrib­ utes dialog box

628 ■ chapter 33: Using Dreamweaver to Make Your Site Accessible

Row and column headers shall be identified for data tables Tables were created for display­ing tabular data Dreamweaver automatically displays accessibility options in the Table dialog box (see Figure 33.3) that displays when you insert a table Choose a header style (none, top row, left column, or both) from the graphic icons You can also specify a cap­tion, caption alignment, and a table summary, although these features aren’t required under Section 508

Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers Screen readers have difficulty with complex tables unless additional attributes are added to relate the header cells with the correct data cells: an id and a category attribute (axis) for the header (th) cells, and a headers attribute for the td cells You’ll need to add these attributes by hand to your Dreamweaver code (See the Macromedia article for an example and more details.)

Frames shall be titled with text that facilitates frame identification and navigation Use meaningful titles for frames If you checked Frames in the Accessibility Preferences, the Frame Tag Accessibility Attributes dialog box (see Figure 33.4) displays when you insert a frameset Choose the frame name from the Frame drop-down menu and enter a title in the Title text box

Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2

Hz and lower than 55 Hz You can use scripts to control the refresh rate of the user’s moni­tor We recommend not using flickering graphics, but if you must, avoid the frequencies listed above (which can trigger seizures in individuals with photosensitive epilepsy) or provide a warning that links to alternative content

A text-only page, with equivalent information or functionality, shall be provided to make a website comply with the provisions of this part, when compliance cannot be accomplished in any other way The content of the text-only page shall be updated whenever the primary page changes If you can’t comply with accessibility guidelines, it’s also acceptable to provide a link to the page con­tent as a text-only page Update the text page whenever the orig­inal page changes

When pages utilize scripting languages to display content or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology If you use JavaScript for important content, make sure you provide non-JavaScript alternatives Also consider

Figure 33.3

Accessibility fea­

tures in the Table

dialog box

section 508 guidelines ■ 629

using server-side scripting, because the final output is HTML content

that can be read by a screen reader

When a web page requires that an applet, plug-in, or other application be

present on the client system to interpret page content, the page must

provide a link to a plug-in or applet that complies with 1194.22(a)

through (l) [the previous 12 guidelines] Provide a link to necessary Figure 33.4

Frame Tag Accessi­

When electronic forms are designed to be completed on-line, the form shall allow people dialog box

using assistive technology to access the information, field elements, and functionality

required for completion and submission of the form, including all directions and cues

If you checked form objects in Accessibility Preferences, the Input Tag Accessibility

Attributes dialog box (see Figure 33.5) displays when you insert form input elements

such as a text field You can add any of three additional accessibility elements through

this dialog box:

Label The label element associates a text label with a form element

Access key Keystroke that is used with the Alt key to put focus on a specific form element

Tab order Specifies a sequence that form elements are tabbed through

For more information on using access keys, see “Accesskeys: Unlocking Hidden Navigation”

at www.alistapart.com/articles/accesskeys/ For additional details on forms, see “Acces­

sible Forms” at www.htmldog.com/guides/htmladvanced/forms.php

A method shall be provided that permits users to skip repetitive navigation links Add a Figure 33.5 graphic link and a text link to an anchor where the actual page content begins This Input Tag

Accessibility Attrib­

enables screen reader users to skip going through the navigation links on every page utes dialog box

When a timed response is required, the user shall be alerted and

given sufficient time to indicate more time is required This

requirement addresses sites where the content “expires” if a

response is not received, such as online testing pages or

secured sites Screen readers might process a page more slowly

than other users, so time limits must be clearly stated on the

testing web page, and users should have a way to reset the

timer if additional time is needed

630 ■ chapter 33: Using Dreamweaver to Make Your Site Accessible

Using Dreamweaver’s Accessible Page Samples

To use one of Dreamweaver’s Sample Accessible Page Designs, choose Page Designs (Accessible) from the Start page Create From Samples list, or from the main menu choose File ➔ New ➔ Page Designs (Accessible) The New Document window (see Figure 33.6) dis­plays Select a sample page from the Page Designs list, and then click the Create button to close the window Your new page opens in the Document window

Generating an Accessibility Report

You can test a page or a site to check compliance with accessibility guidelines To create a report:

1 Select Site ➔ Reports to open the Reports dialog box Check the Accessibility option (see Figure 33.7)

2 Click the Report Settings buttons at the bottom left to open the Accessibility dialog box (see Figure 33.8)

3 All of the guidelines are enabled by default To select specific Accessibility guidelines

to test against, select All and click the Disable button to disable all the options Select the guidelines you want to test against and click the Enable button Click OK to close the window and return to the Reports dialog box

4 Click the Run button The results display in the Site Reports panel in the Results

Selecting an Acces­

sible Page Design

sample page

support for dreamweaver users with disabilities ■ 631

Reports dialog box with Accessibility option selected Accessibility dialog box

Support for Dreamweaver Users with Disabilities

Dreamweaver also provides features for Dreamweaver users with disabilities, including

screen reader support, support for Windows high contrast mode, and keyboard navigation

Screen Reader Support Screen readers read screen text content, as well as non-screen text

content such as links, alternative text in images, and accessibility attributes You can use a

screen reader when creating pages in Dreamweaver MX 2004, which supports the JAWS

for Windows (www.freedomscientific.com) and Window Eyes (www.gwmicro.com) screen

readers

For more details on screen readers and CSS, see “Screenreader Visibility” at discuss.incutio.com/?page=ScreenreaderVisibility

http://css-Windows High Contrast Mode Dreamweaver supports the Windows high contrast mode

You access this via the Windows Control Panel Dialog boxes and panels use system color

settings, and will be in high contrast mode Code view syntax coloring is turned off in

this mode

Keyboard Navigation You can use keyboard navigation in Dreamweaver to navigate pan­

els, the Property inspector, dialog boxes, frames, and tables However, using tabbing and

arrow keys is supported for Windows only

632 ■ chapter 33: Using Dreamweaver to Make Your Site Accessible

For additional information on accessibility and creating accessible pages, see these online resources:

book at http://joeclark.org/book/sashay/serialization/

• Web Accessibility Initiative at www.w3.org/WAI/

• “HTML Techniques for Web Content Accessibility Guidelines 1.0” at

TR/WCAG10-HTML-TECHS/

Ready, Set, Go!

You’re now ready to enter the fast-paced world of rapid website and web application development with Dreamweaver MX 2004

See the appendices that follow for information on online resources (Appendix A), key­board shortcuts (Appendix B), and an overview of new features in Dreamweaver MX 2004 (Appendix C)

P A R T V I

Dreamweaver inspires loyalty and enthusiasm among its users, and you can see evidence of this in the many websites and discussion groups devoted to the software The enjoyment that designers and developers get from using the program encourages them to share what they’ve learned, discovered, or created Going online is the best way to get the latest information about Dreamweaver and other Macromedia products, and to contact other web designers/developers if you have questions or problems you can’t solve

The first appendix collects some websites, mailing lists, and other online resources that will help you continue to learn about Dreamweaver after you finish this book The second appendix will help you get around in Dreamweaver We hope that you will find this exten­ sive list of keyboard shortcuts helpful and informative The third appendix is a summary of all the new features in Dreamweaver MX 2004

This page intentionally left blank

A P P E N D I X A

There are so many websites related to Dreamweaver that it can be helpful to begin with sites that collect links to other resources as well as providing their own software or instructional materials The following websites are good starting points for finding out about Dreamweaver online

These sites are Macromedia resources:

Dreamweaver Developer Center (www.macromedia.com/devnet/mx/dreamweaver/) The Dreamweaver Developer Center features links to articles, tutorials, and sample files for Dreamweaver MX 2004 as well as Dreamweaver MX It also includes information

on Contribute and on server technologies supported in Dreamweaver For links to addi­tional articles on Dreamweaver MX 2004, see www.macromedia.com/devnet/mx/dreamweaver/ dw_mx2004.html

Macromedia On Demand Seminars ( mand/index.html) On Demand seminars are free multimedia presentations and demon­strations of Macromedia products that can be viewed at any time over a broadband connection Several presentations are already available for Dreamweaver MX 2004

www.macromedia.com/macromedia/events/online/onde-Dreamweaver Support Center (www.macromedia.com/support/dreamweaver) Any problems with Dreamweaver are reported here You’ll also find patches, how-tos, and tips

Dreamweaver Documentation (www.macromedia.com/support/documentation/en/

dreamweaver/) Download Dreamweaver product manuals and release notes

Dreamweaver Templates (www.macromedia.com/devnet/mx/dreamweaver/templates.html)

The Dreamweaver Developer Center Template section includes links to several articles on various aspects of using templates You can also download sample design templates at

www.macromedia.com/software/dreamweaver/download/templates

Dreamweaver Online Forums (http://webforums.macromedia.com/dreamweaver) dia’s own web-based discussion groups for Dreamweaver include General Discussion, Application Development, and Exchange Extensions

Macrome-636 ■ appendix a: Online Resources

Here are a few more starting points for more information, from non-Macromedia sources:

Dreamweaver FAQ (www.dwfaq.com/default.asp) Dreamweaver FAQ offers an assortment

of tutorials, articles, and Dreamweaver news, and also features an exchange for code snippets

edgeofmyseat (www.edgeofmyseat.com/resources.do) This site features Dreamweaver arti­cles, tutorials, and extensions created by Rachel Andrews

Essential Dreamweaver Resources (www.thepattysite.com/essential_resources.cfm) Patty Ayers’ links to Dreamweaver resources, tutorials, FAQs, and extensions

Charon Internet (www.charon.co.uk/default.aspx) Julian Robert’s Charon Internet offers Dreamweaver articles, tutorials, and extensions, including both a free and a commercial version of a shopping cart extension This site is a great source for information on using ASP.NET with Dreamweaver

Robgt.com (http://robgt.com/index.asp) Rob Turnbull’s site includes a variety of Dreamweaver tutorials, especially for ASP/VB Script

Dreamweaver Software

Dreamweaver can do a lot, but some enterprising designers who have used the program in real-world situations have found ways to make it do more They’ve come up with their own extensions, templates, commands, and other goodies that can be added to the pro­gram Some are available for free, but don’t expect the software to be updated or sup­ported Other extensions have to be purchased from their developers

Third-Party Extensions

Macromedia Exchange for Dreamweaver (www.macromedia.com/exchange/dreamweaver)

Macromedia makes a number of extensions available that add additional capabilities to Dreamweaver Be sure to read the comments posted by individuals who have actually used (or tried to use) the extensions

Dreamweaver Dabbling (www.pawluk.com/public) Self-proclaimed dabbler Hal Pawluk makes some nifty extensions available for download, including JavaScript code snippets and a tell-a-friend-about-this-site form

Dreamweaver Fever (http://dreamweaverfever.com/grow/) Drew McLellan provides some unusual extensions, including one that automatically adds two paragraphs of mock Latin text, which designers can use as filler text to mock up pages

blogs ■ 637

Yaromat (www.yaromat.com/dw) Web designer Jaro von Flocken gives back to the

Dream-weaver community by providing extensions, objects, behaviors, and other goodies on this

site for free

Project Seven Development (www.projectseven.com) This is consistently one of the best

commercial sources for Dreamweaver design packs and extensions, including a variety of

dynamic menu styles

Website Templates

Templates2go.com (www.templates2go.com) Designer Linda Locke presents four packages

of 25 predesigned websites for business, publishing, personal, and e-commerce use Cost is

$50 per package

Dreamweaversites.com (http://store.dreamweaverwebmaster.com/dwtemplates.asp)

Restrained, tasteful designs intended for business and e-commerce sites You can buy one

template at a time, typically for $15 to $30

Heeha.com (www.heeha.com) A wide range of personal and business templates, many of

which use a clean white page background Some templates are available for free; others

typically cost about $16

Newsgroups and Mailing Lists

There’s nothing like finding personal support when you run into a problem you can’t

solve or a question you can’t answer immediately Newsgroups and mailing lists not only

give you a great place to get help, but you can also answer questions yourself and be part

of the Dreamweaver community

Macromedia_Dreamwvr (http://groups.yahoo.com/group/Macromedia_Dreamwvr) One of the

Yahoo! discussion groups, it’s for beginners as well as advanced users You need a Yahoo!

ID to subscribe, but you can obtain one for free from Yahoo!

Dreamweaver Talk (www.blueworld.com/blueworld/lists/dreamweaver.html) An e-mail dis­

cussion group run by software developer Blue World Communications, Inc

Blogs

These blogs are an excellent source for news and tips about Dreamweaver MX 2004 and

other Macromedia software

JD on MX (www.markme.com/jd/) Macromedia’s John Dowdell’s blog features news updates

for web developers who use Macromedia products Also see JD’s Forum at www.macromedia

.com/devnet/jd_forum/

638 ■ appendix a: Online Resources

Dan’s Shorts (http://blog.web-shorts.com/) Dan Short is a Team Macromedia member, author, and web designer His blog focuses on web development with Macromedia software

Macromedia XML News Aggregator, Dreamweaver section (www.markme.com/mxna/ index.cfm?category=Dreamweaver) This blog includes a selection of Dreamweaver news and tips from 208 news feeds

fullasagoog (www.fullasagoog.com/index.cfm?blogcat=DreamweaverMX) This section of the fullasagoog blog includes updates from Dreamweaver news feeds

A P P E N D I X B

This appendix lays out some essential keyboard shortcuts that will help you get around in Dreamweaver MX 2004 If you keep this reference handy when you are working with the application, you will be able to save yourself a lot of mouse-clicks

You can also customize Dreamweaver’s keyboard shortcuts Choose Edit ➔ Keyboard Short­ cuts, then add, delete, or change shortcuts

C A T E G O R Y / C O M M A N D W I N D O W S S H O R T C U T M A C I N T O S H S H O R T C U T Managing Files

Open in frame Ctrl-Shift-O Command-Shift-O

General Editing

Undo Ctrl-Z or Alt-Backspace Command-Z Redo Ctrl-Y or Ctrl-Shift-Z Command-Y or Command-Shift-Z Cut Ctrl-X or Shift-Delete Command-X or Shift-Delete

Paste Ctrl-V or Shift-Insert Command-V or Shift-Insert

Move to page down Page Down Page Down Select to page up Shift-Page Up Shift-Page Up

continued

Select to start of line Shift-Home Shift-Home Select to end of line Shift-End Shift-End

Go to previous/next paragraph Ctrl-Up/Down Command-Up/Down

Go to next/previous word Ctrl-Right/Left Command-Right/Left

Select until next Ctrl-Shift-Right/Down Command-Shift-Right/Down

word/paragraph Select from previous Ctrl-Shift-Left/Up Command-Shift-Left/Up

word/paragraph

Delete word left Ctrl-Backspace Command-Backspace Delete word right Ctrl-Delete Command-Delete Select character left/right Shift-Left/Right Shift-Left/Right

Live Data view Ctrl-Shift-R Command-Shift-R

Switch to next document Ctrl-Tab Command-Tab Switch to previous document Ctrl-Shift-Tab Command-Shift-Tab

Switch between Design Ctrl-~ Command-‘ (backquote)

and Code views

Server debug Ctrl-Shift-G Command-Shift-G

Viewing Page Elements

Show/hide visual aids Ctrl-Shift-I Command-Shift-I Show/hide rulers Ctrl-Alt-R Command-Option-R Show/hide grid Ctrl-Alt-G Command-Option-G Snap to grid Ctrl-Alt-Shift-G Command-Option-Shift-G Show/hide head content Ctrl-Shift-H Command-Shift-H View page properties Ctrl-J Command-J

continued

appendix b: Keyboard Shortcuts ■ 641

C A T E G O R Y / C O M M A N D W I N D O W S S H O R T C U T M A C I N T O S H S H O R T C U T

Code Editing

Switch to Design view Ctrl-~

Validate markup Shift-F6

Open Quick Tag Editor (Design view)

Open snippets panel Shift-F9

Show code hints Ctrl-Spacebar

Indent code Ctrl-Shift->

Outdent code Ctrl-Shift-<

Edit tag (Design view) Ctrl-F5

Select parent tag Ctrl-[

Select child (Design view) Ctrl-]

Balance braces Ctrl-’

Move to top of code Ctrl-Home

Move to end of code Ctrl-End

Select to top of code Ctrl-Shift-Home

Select to end of code Ctrl-Shift-End

Text Editing

Create a new paragraph Enter

Insert a line break <br> Shift-Enter

Insert a nonbreaking space Ctrl-Shift-Spacebar

Move text or object Drag item

Copy text or object Ctrl-drag item

Select a word Double-click

Open/close the Property inspector Ctrl-F3

Switch between Dreamweaver Alt-Tab

and other open programs

Check spelling Shift-F7

Formatting Text

Indent (inserts blockquote Ctrl-Alt-]

tags; using CSS for indenting is

Select cell (with cursor Ctrl-A

inside the cell)

Command-‘ (backquote) Command-P

Shift-F6 Ctrl-T Command-T Shift-F9

Command-Spacebar Command-Shift->

Command-Shift-<

Command-E Command-F5 Command-[

Command-]

Command-’

Command-Home Command-End Command-Shift-Home Command-Shift-End Return

Shift-Return Command-Shift-Spacebar Drag item

Control-drag item Double-click Command-F3 Option-Tab Shift-F7 Command-Option-]

Command-Option-[

Command-Shift-P Command-1–6 Command-Alt-Shift-L/C/R/J Command-A

continued

Insert a column (to left Ctrl-Shift-A Command-Shift-A

of current column)

Delete a column Ctrl-Shift (hyphen) Command-Shift (hyphen) Merge selected table cells Ctrl-Alt-M Command-Option-M Split table cell Ctrl-Alt-S Command-Option-S Increase column span Ctrl-Shift-] Command-Shift-]

Decrease column span Ctrl-Shift-[ Command-Shift-[

Alt-drag frame border frame border

Working with Layers

Select a layer Ctrl-Shift-click Command-Shift-click Select and move layer Shift-Ctrl-drag Command-Shift-drag

Add or remove layer Shift-click layer Shift-click layer

from selection

Move selected layer by pixels Arrow keys Arrow keys

Move selected layer by Shift-Arrow keys Shift-Arrow keys

snapping increment

Resize selected layer by pixels Ctrl-Arrow keys Option-Arrow keys

Resize selected layer by Ctrl-Shift-Arrow keys Option-Shift-Arrow keys

snapping increment

Toggle the display of the grid Ctrl-Alt-G Command-Option-G Snap to grid Ctrl-Shift-Alt-G Command-Shift-Option-G Align layers left Ctrl-Shift-1 Command-Shift-1 Align layers right Ctrl-Shift-3 Command-Shift-3 Align layers top Ctrl-Shift-4 Command-Shift-4 Align layers bottom Ctrl-Shift-6 Command-Shift-6 Make same width Ctrl-Shift-7 Command-Shift-7 Make same height Ctrl-Shift-9 Command-Shift-9

appendix b: Keyboard Shortcuts ■ 643

C A T E G O R Y / C O M M A N D W I N D O W S S H O R T C U T M A C I N T O S H S H O R T C U T

Inserting Objects

Any object (image, Shockwave Drag file into the Document Drag file into the Document

Managing Hyperlinks

Check links sitewide Ctrl-F8 Command-F8

text, image, or object)

Remove hyperlink Ctrl-Shift-L Command-Shift-L

Drag and drop to create a Select the text, image, or object, Select the text, image, or object,

hyperlink from a document then Shift-drag the selection to a then Shift-drag the selection to a

file in the Files panel file in the Files panel

Drag and drop to create a Select the text, image, or object, Select the text, image, or object,

hyperlink using the Property then drag the Point-to-File icon then drag the Point-to-File icon in

Inspector in Property inspector to a file in Property Inspector to a file in the

the Files panel Files panel

Open the linked-to docu- Ctrl-double-click link Command-double-click link

ment in Dreamweaver

Previewing and Debugging in Browsers

Preview in primary browser F12 F12

Preview in secondary browser Shift-F12 Shift-F12

Managing a Site

Get (selected files or folders

from remote site)

Ctrl-Shift-D Command-Shift-D

Put (selected files or folders

to remote site)

Ctrl-Shift-U Command-Shift-U Check out Ctrl-Alt-Shift-D Command-Option-Shift-D

Check in Ctrl-Alt-Shift-U Command-Option-Shift-U

View site map

Using a Site Map

Link to existing file Ctrl-Shift-K Command-Shift-K

Remove link Ctrl-Shift-L Command-Shift-L

continued

Opening and Closing Panels

Databases Ctrl-Shift-F10 Command-Shift-F10

If you have used previous versions of the program, you’ll notice the change as soon as you open it, but even if you’re a new Dreamweaver user you’ll appreciate all the new fea­tures And wherever this book discusses a new feature, you’ll see the MX 2004 icon

Useability

Dreamweaver MX 2004 offers a trimmed-down and less-cluttered workspace that allows you to access even more features of the program more easily than before New features and changes include these:

Document toolbar The new Document toolbar makes it easy to use features that were pre­viously in separate locations in the Dreamweaver workspace The Document toolbar pro­vides quick and easy access to just about every feature of the program and most of Dreamweaver’s essential tools—tools that let you switch between viewing modes (Code, Split, Design), change the document title, manage files, check browser support, preview your site in a browser of your choice, refresh Design view after changes to the code, and change view options for both Code and Design view

Dreamweaver MX 2004 automatically checks your files for cross-browser compatibility when­ ever you open a file You choose target browsers, and Dreamweaver creates a report listing errors, warnings, or other information about cross-browser issues

646 ■ appendix c: New Features in Dreamweaver MX 2004

Start page When you open Dreamweaver (or anytime that no documents are open in the workspace), the new Start page appears in the workspace The Start page includes options

to open recent documents, create a new document, or create a new document from sam­ple files (CSS style sheets, Framesets, Table Based Layouts, and Accessible Page Designs) The Start page also gives you access to Help and to the Dreamweaver Exchange on the Macromedia site

Tabbed document interface (Windows workspace only) When documents are maximized, they display a tab at the top, and the contents of a single document fill the Dreamweaver workspace You can shift back and forth easily between multiple open documents by click­ing the tabs, and you can see at a glance the file names of all open documents If you want

to compare the content of multiple documents at the same time, just reduce the document size and arrange them however you wish in your workspace

Multiple Insert bars Dreamweaver MX 2004 includes a drop-down menu with a set of insert bars for various tasks rather than a single insert bar Not only are the medium-sized icons easier to read than the small icons of Dreamweaver MX, but the new insert bar is smaller and takes up less space The insert bar selections include Common, Layout, Forms, Text, and HTML as well as two new choices: a Favorites insert bar where you can add icons for the features you most often use and a Flash elements insert bar Flash ele­ments, also new in Dreamweaver MX 2004, are prebuilt Flash components that can be inserted in your Dreamweaver pages to create RIAs (Rich Internet Applications) See Chapter 11, “Getting into Flash,” for more information on Flash and RIA

Improved table editing Dreamweaver MX 2004 includes three modes for creating and editing tables: Standard mode, Layout mode, and the new Expanded Tables mode Expanded Tables mode makes it easy to select areas within and around table cells

Improvements in Layout mode provide better visualization of table and cell size and boundaries, and instantly show changes to the code when cells are resized

Siteless connections From Dreamweaver MX 2004, you can connect to a server, download files, make changes, and upload files—all without having to create a Dreamweaver site If you want to use Dreamweaver’s comprehensive site management tools, though, you’ll need to create a Dreamweaver site

For additional details on all the changes to the Dreamweaver workspace and document win­ dow, see Chapter 3, “Setting Up Your Workspace and Your Site.”

css (cascading style sheets) ■ 647

CSS (Cascading Style Sheets)

One of the biggest changes in Dreamweaver MX 2004 is the addition of many more CSS

features CSS in Dreamweaver is now web standards–compliant; when Dreamweaver

checks your pages for browser compatibility, it checks CSS as well as HTML/XHTML

Whether you use an external CSS editor, such as Top Style Pro, or create all your CSS

in Dreamweaver itself, you’ll find a host of features to help you use CSS in your pages,

including:

CSS Styles in the text Property inspector By default, Dreamweaver MX 2004 automatically

creates text styles when you format text, and lets you apply these styles to other selections

of text A style drop-down menu is now included in the text Property inspector, listing all

Dreamweaver-created styles as well as any additional styles available in attached style

sheets The style drop-down menu displays sample text in the available styles, so you can

easily preview any style choice before you apply it

CSS styles can be also be accessed and applied from the new Class drop-down menu avail­

able in Dreamweaver’s other Property inspectors

CSS Page Properties The page properties dialog box is expanded in Dreamweaver MX 2004,

and now includes options for CSS-based page properties (such as background color and font

characteristics), link display features, and heading styles

Relevant CSS panel The new Relevant CSS panel in the Tag Inspector panel group displays

any CSS rules that have been applied to the current selection The top part of the panel

displays the applied rules and any affected tags, and the bottom part displays the details of

the applied style rules You can modify the rules in the bottom section, and changes will be

immediately applied to your document

CSS Rule inspector The CSS Rule inspector displays details of any style rule selected in the

CSS panel, an associated style sheet, or the head section of an HTML page The CSS Rule

inspector opens the CSS properties panel in the Tag Inspector panel group where you can

view and edit the CSS properties directly

648 ■ appendix c: New Features in Dreamweaver MX 2004

CSS Code Hints CSS Code Hints are now available in Code view when hand-coding CSS rules

Using Dreamweaver’s CSS sample pages When you attach an external style sheet to a Dreamweaver page, you can choose sample style sheets directly from the Attach External Style Sheet dialog box This automatically applies the selected style sheet sample to the current page, and makes it easier than ever to use CSS in your pages

Additional New Features

Dreamweaver MX 2004 has even more new features, including:

Increased integration with Microsoft Word and Excel You can now copy and paste Word and Excel documents directly into Dreamweaver pages and preserve the Word or Excel formatting while displaying the content as HTML

Integrated image editing The new image editing features in the image Property inspector enable you to edit JPEG and GIF images directly in Dreamweaver You can crop, resize, resample, sharpen, or modify brightness and contrast

Secure FTP Dreamweaver now allows you to connect to SFTP servers and enables you to

XML namespaces

Note to the Reader: Throughout this index boldfaced page numbers indicate primary discussions of a

topic Italicized page numbers indicate illustrations

538–539

591–593

516–517

650 ■ application objects–blogger tool

Application Objects, 423, 423,

467, 467

Application panel group, 43

for ColdFusion, 431–432 for databases, 406–408,

407–408

Application tab, 41

Apply Source Formatting option,

121, 394 Apply Source Formatting To

Selection option, 394 Apply Template To Page

option, 73 applying

styles, 192–193, 198

templates, 72–73, 72–73

arguments attribute, 610–611

ASP See Active Server Pages (ASP)

ASP.NET (Active Server

Pages.NET), 346–347, 403, 501 installing, 501

Control Shockwave or Flash,

for multimedia, 235

Open Browser Window,

268–269, 270

Play Sound, 269–270, 270 Popup Message, 271, 271 Preload Images, 271–272, 272

Set Nav Bar Image, 272–274,

for style switcher, 282–284

Swap Image and Swap Image

Behaviors panel, 43, 258–259, 258,

388–389, 389

Berners-Lee, Tim, 23, 36 BigNoseBird.com site, 328, 332 binary tree indexes, 416 bindings

for ColdFusion, 436–437 for databases, 407–408,

431–432

in WSDL, 497

Bindings panel, 43, 431–432 for ColdFusion, 431–432, 436 for databases, 407–408

for Master Detail page sets, 541

for PHP, 465–467, 465

Blank Database option, 515 _blank target, 160, 176 block formatting, 191 block_model value, 613

block options for CSS, 196, 196

BLOCKQUOTE element, 553

Blogger tool, 338–339

blogs–clustering ■ 651

205–206

C

551–552