1. DL manuals
  2. MACROMEDIA
  3. Other
  4. DIRECTOR MX 2004-USING DIRECTOR
  5. Using Manual

MACROMEDIA DIRECTOR MX 2004-USING DIRECTOR Using Manual

Other manuals for DIRECTOR MX 2004-USING DIRECTOR: Using Manual, Using Manual, Using Manual, Using Manual, Using Manual

Summary of DIRECTOR MX 2004-USING DIRECTOR

  • Page 1

    Using dreamweaver.

  • Page 2

    Trademarks add life to the web, afterburner, aftershock, andromedia, allaire, animation powerpack, aria, attain, authorware, authorware star, backstage, bright tiger, clustercats, cold fusion, contribute, design in motion, director, dream templates, dreamweaver, drumbeat 2000, edje, ejipt, extreme 3...

  • Page 3: Contents

    3 contents part i: dreamweaver basics introduction: welcome to dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 what’s new in dreamweaver mx 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 where to start . . . . . . . . . . . . . . . . . . . . . . . . . ...

  • Page 4

    4 contents chapter 3: creating and opening documents . . . . . . . . . . . . . . . . . . . . . . . . . 69 creating new documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 saving a new document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....

  • Page 5

    Contents 5 part iii: laying out pages chapter 7: laying out pages with css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 about layers in dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 inserting content blocks for layout . . . . . . . . ....

  • Page 6

    6 contents viewing and setting frame properties and attributes . . . . . . . . . . . . . . . . . . . . . . 210 viewing and setting frameset properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 controlling frame content with links. . . . . . . . . . . . . . . . . . . . . . . ....

  • Page 7

    Contents 7 chapter 14: inserting images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 about images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 inserting an image . . . . . . . . . . . . . . . . . . . . . ...

  • Page 8

    8 contents inserting netscape navigator plug-in content . . . . . . . . . . . . . . . . . . . . . . . . . . . 367 inserting an activex control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368 inserting a java applet . . . . . . . . . . . . . . . . . . . . . . . . ....

  • Page 9

    Contents 9 chapter 22: editing code in design view . . . . . . . . . . . . . . . . . . . . . . . . . . . 441 editing code with the property inspector. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441 changing attributes with the tag inspector . . . . . . . . . . . . . . . . . . . . . ...

  • Page 10

    10 contents chapter 28: database connections for php developers . . . . . . . . . . . . . . . 487 connecting to a database. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487 editing or deleting a database connection . . . . . . . . . . . . . . . . . . . . . . . ...

  • Page 11

    Contents 11 chapter 34: adding dynamic content to web pages . . . . . . . . . . . . . . . . . . 545 about adding dynamic content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546 making text dynamic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....

  • Page 12

    12 contents chapter 39: creating forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 about forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 creating html forms . . . . . . . . . . . . . . . . . . . . ....

  • Page 13

    Contents 13 chapter 43: building php applications rapidly . . . . . . . . . . . . . . . . . . . . . . 719 building master/detail pages (php). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719 building search/results pages (php) . . . . . . . . . . . . . . . . . . . . . . . . . ...

  • Page 14

    14 contents.

  • Page 15: Part I

    Part i dreamweaver basics learn how to use macromedia dreamweaver mx 2004 documentation and other resources, and set up the dreamweaver workspace to fit your preferred working style. Then plan and set up a site, and begin to create pages. This part contains the following chapters: introduction, “wel...

  • Page 17: Introduction

    17 introduction welcome to dreamweaver macromedia dreamweaver mx 2004 is a professional html editor for designing, coding, and developing websites, web pages, and web applications. Whether you enjoy the control of hand-coding html or prefer to work in a visual editing environment, dreamweaver provid...

  • Page 18

    18 introduction: welcome to dreamweaver what’s new in dreamweaver mx 2004 dreamweaver mx 2004 contains a new, streamlined interface, along with improved product performance. There’s also a wide variety of new features that improve usability and help you build pages whether you are working in the des...

  • Page 19

    What’s new in dreamweaver mx 2004 19 dynamic cross-browser validation automatically checks the current document for cross- browser compatibility issues when you save the document. You specify which browsers to target, and dreamweaver checks to make sure pages are not using tags or css constructs tha...

  • Page 20

    20 introduction: welcome to dreamweaver improved support for asp.Net form controls provides new and improved ways, including new property inspectors, to build and manipulate asp.Net web forms in design view. For more information, see chapter 42, “building asp and jsp applications rapidly,” on page 7...

  • Page 21

    Where to start 21 4 for useful information on the details of using dreamweaver to create basic html pages, read chapter 13, “inserting and formatting text,” on page 273 and chapter 14, “inserting images,” on page 303 . 5 for information about coding in dreamweaver, see “setting up your coding enviro...

  • Page 22

    22 introduction: welcome to dreamweaver web application developers if you are a web application developer, this section will point you to sections of the dreamweaver documentation that are most appropriate for your background. There are two different approaches, depending on whether you’ve used drea...

  • Page 23

    Dreamweaver workflow for creating websites 23 once you’ve organized your information and determined a structure, you can begin creating your site. • use the dreamweaver files panel to set up your site’s organizational structure. In the files panel, you can easily add, delete, and rename files and fo...

  • Page 24

    24 introduction: welcome to dreamweaver adding content to pages using dreamweaver, you can easily add a variety of content to web pages. Add assets and design elements, such as text, images, colors, movies, sound, and other forms of media. • dreamweaver page creation features enable you to specify w...

  • Page 25

    Using dreamweaver with other applications 25 creating dynamic pages in dreamweaver, you can define a variety of sources of dynamic content, including recordsets extracted from databases, form parameters, and javabeans components. To add the dynamic content to a page, simply drag it onto the page. Yo...

  • Page 26

    26 introduction: welcome to dreamweaver • for information about adding interactivity to your site using macromedia flash, see “inserting and modifying a flash button object” on page 361 , “inserting a flash text object” on page 363 , or “downloading and installing flash elements” on page 364 . • to ...

  • Page 27

    Guide to dreamweaver instructional media 27 the dreamweaver accessibility validation feature the accessibility validation feature in dreamweaver mx uses technology from usablenet. Usablenet is an industry leader in developing easy-to-use software to automate usability and accessibility testing and r...

  • Page 28

    28 introduction: welcome to dreamweaver macromedia website resources the macromedia website contains the following resources to support dreamweaver users: the dreamweaver support center website helps you get the most out of dreamweaver. The dreamweaver support center website at www.Macromedia.Com/go...

  • Page 29

    Html and web technologies resources 29 typographical conventions the following typographical conventions are used in this guide: • menu items are shown in this format: menu name > menu item name. Items in submenus are shown in this format: menu name > submenu name > menu item name. • code font indic...

  • Page 30

    30 introduction: welcome to dreamweaver sun one product page ( www.Chilisoft.Com/products/ ) provides information about the sun one asp application server. Web services demystified ( www.Sitepoint.Com/article/692 ) explains what web services are and how they work. Javascript bible , by danny goodman...

  • Page 31: Chapter 1

    31 chapter 1 exploring the workspace to get the most out of your macromedia dreamweaver mx 2004 experience, you should understand the basic concepts behind the dreamweaver workspace and how to select options, use inspectors and panels, and set preferences that fit your work style best. This chapter ...

  • Page 32

    32 chapter 1: exploring the workspace about the dreamweaver workspace the dreamweaver workspace enables you to view documents and object properties. The workspace also places many of the most common operations in toolbars so that you can quickly make changes to your documents. The workspace layout i...

  • Page 33

    About the dreamweaver workspace 33 on the macintosh, dreamweaver provides a floating workspace layout, in which each document is in its own individual window. Panel groups are initially docked together, but can be undocked into their own windows. Windows “snap” automatically to each other, to the si...

  • Page 34

    34 chapter 1: exploring the workspace the insert bar contains buttons for inserting various types of “objects,” such as images, tables, and layers, into a document. Each object is a piece of html code that enables you to set various attributes as you insert it. For example, you can insert a table by...

  • Page 35

    About the dreamweaver workspace 35 when the document window has a title bar, the title bar displays the page title and, in parentheses, the file’s path and filename. After the filename, dreamweaver displays an asterisk if you’ve made changes that you haven’t saved yet. When the document window is ma...

  • Page 36

    36 chapter 1: exploring the workspace refresh design view refreshes the document’s design view after you make changes in code view. Changes you make in code view don’t automatically appear in design view until you perform certain actions, such as saving the file or clicking this button. View options...

  • Page 37

    About the dreamweaver workspace 37 the insert bar the insert bar contains buttons for creating and inserting objects such as tables, layers, and images. When you roll the pointer over a button, a tooltip appears with the name of the button. The buttons are organized into several categories, which yo...

  • Page 38

    38 chapter 1: exploring the workspace reports in dreamweaver you can run reports in dreamweaver to find content, troubleshoot, or test content. You can generate the following types of reports: search enables you to search for tags, attributes, and specific text within tags. To search your code, see ...

  • Page 39

    Working in the document window 39 working in the document window the document window shows the current document. You can view a document in design view, code view, or code and design views. The document window’s status bar provides information about the current document. Related topics • “the docume...

  • Page 40

    40 chapter 1: exploring the workspace resizing the document window the status bar displays the document window’s current dimensions (in pixels). To design a page that looks its best at a specific size, you can adjust the document window to any of the predetermined sizes, edit those predetermined siz...

  • Page 41

    Using toolbars, inspectors, and context menus 41 setting status bar preferences set preferences for the status bar using the preferences dialog box. To set preferences for the status bar: 1 select edit > preferences (windows) or dreamweaver > preferences (macintosh). The preferences dialog box appea...

  • Page 42

    42 chapter 1: exploring the workspace using the insert bar the insert bar contains buttons for creating and inserting objects such as tables and images. The buttons are organized into categories. When you roll the pointer over a button, a tooltip appears with the name of the button. Related topics •...

  • Page 43

    Using toolbars, inspectors, and context menus 43 to show insert bar categories as tabs: • click the arrow beside the category name on the left end of the insert bar, then select show as tabs. The insert bar displays the categories as tabs across the top of the insert bar. Note: you might need to cli...

  • Page 44

    44 chapter 1: exploring the workspace to modify preferences for the insert bar: 1 select edit > preferences (windows) or dreamweaver > preferences (macintosh). The preferences dialog box displays the general preferences category. 2 deselect show dialog when inserting objects to suppress dialog boxes...

  • Page 45

    Using toolbars, inspectors, and context menus 45 using the property inspector the property inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the property inspector vary depending on the element ...

  • Page 46

    46 chapter 1: exploring the workspace using context menus dreamweaver makes extensive use of context menus, which provide convenient access to the most useful commands and properties related to the object or window you’re working with. Context menus list only those commands that pertain to the curre...

  • Page 47

    Using panels and panel groups 47 to open a panel group or panel that isn’t visible on your screen: • select the window menu, then select a panel name from the menu. A check mark next to an item in the window menu indicates that the named item is currently open (though it may be hidden behind other w...

  • Page 48

    48 chapter 1: exploring the workspace to drag a floating (undocked) panel group without docking it: • drag the panel group by the bar above its title bar. The panel group doesn’t dock as long as you don’t drag it by its gripper. Resizing and renaming panel groups you can change the size and name of ...

  • Page 49

    Using dreamweaver accessibility features 49 using dreamweaver accessibility features dreamweaver provides features that make it accessible to users with disabilities. Specifically, dreamweaver supports screen readers, operating system accessibility features, and keyboard navigation. Related topics •...

  • Page 50

    50 chapter 1: exploring the workspace using the keyboard to navigate dreamweaver you can use the keyboard to navigate dreamweaver panels, inspectors, dialog boxes, frames, and tables without a mouse. Related topics • “using screen readers with dreamweaver” on page 49 • “support for operating system ...

  • Page 51

    Using dreamweaver accessibility features 51 navigating the property inspector you can use the keyboard to navigate the property inspector and make changes to your document. Note: tabbing and the use of arrow keys are supported for windows only. To navigate the property inspector: 1 press control+f3 ...

  • Page 52

    52 chapter 1: exploring the workspace navigating frames if your document contains frames, you can use the arrow keys to shift focus to a frame. Note: tabbing and the use of arrow keys are supported for windows only. To select a frame: 1 place the insertion point in the document window. 2 press alt+u...

  • Page 53

    Optimizing the workspace for accessible page design 53 optimizing the workspace for accessible page design when you create accessible pages, you need to associate information, such as labels and descriptions, with your page objects to make your content accessible to all users. To do this, activate t...

  • Page 54

    54 chapter 1: exploring the workspace using visual guides in dreamweaver dreamweaver provides several kinds of visual guides to help you design documents and predict (approximately) how they will appear in browsers. You can do any of the following: • instantly snap the document window to a desired w...

  • Page 55

    Dreamweaver customizing basics 55 choosing the workspace layout (windows only) in windows, you can choose between the designer and coder workspace layouts. The first time you start dreamweaver, a dialog box appears that enables you to choose a workspace layout. You can switch to a different workspac...

  • Page 56

    56 chapter 1: exploring the workspace to display the start page: 1 select edit > preferences (windows) or dreamweaver > preferences (macintosh). The preferences dialog box appears displaying the general preferences category. 2 select the show start page checkbox. The start page appears when you star...

  • Page 57

    Dreamweaver customizing basics 57 customizing keyboard shortcuts use the keyboard shortcut editor to create your own shortcut keys, including keyboard shortcuts for code snippets. You can also remove shortcuts, edit existing shortcuts, and select a predetermined set of shortcuts in the keyboard shor...

  • Page 58

    58 chapter 1: exploring the workspace to install and manage extensions: 1 on the macromedia exchange website, click the download link for an extension. Your browser may let you choose to open and install it directly from the site or save it to disk. ■ if you are opening the extension directly from t...

  • Page 59: Chapter 2

    59 chapter 2 setting up a dreamweaver site a website is a set of linked documents and assets with shared attributes, such as related topics, a similar design, or a shared purpose. Macromedia dreamweaver mx 2004 is a site creation and management tool, so you can use it to create complete websites, in...

  • Page 60

    60 chapter 2: setting up a dreamweaver site all you need to do to define a dreamweaver site is set up a local folder. To transfer files to a web server or to develop web applications, you need to also add information for a remote site and testing server. The remote folder is where you store your fil...

  • Page 61

    About dreamweaver sites 61 for example, if your remote site’s root folder, named public_html, contains two folders, project1 and project2, and you want to work only on the html files in project1, you don’t need to download the files in project2, but you must map your local root folder to public_html...

  • Page 62

    62 chapter 2: setting up a dreamweaver site setting up a new dreamweaver site after you plan your site structure, or if you already have an existing site, you should define a site in dreamweaver before you start developing. Setting up a dreamweaver site is a way to organize all of the documents asso...

  • Page 63

    Using the advanced settings to set up a dreamweaver site 63 using the advanced settings to set up a dreamweaver site you can use the advanced settings of the site definition dialog box to set up a dreamweaver site. The advanced settings enable you to set up local, remote, and testing (for processing...

  • Page 64

    64 chapter 2: setting up a dreamweaver site 3 click the advanced button, if the advanced settings aren’t showing. The advanced tab of the site definition dialog box displays the local info category options. 4 enter the local info options. For more information, click the help button in the dialog box...

  • Page 65

    Using the advanced settings to set up a dreamweaver site 65 setting up a remote folder after you set up a local folder for a dreamweaver site (see “setting up a local folder” on page 63 ), you can set up a remote folder. Depending on your development environment, the remote folder is where you store...

  • Page 66

    66 chapter 2: setting up a dreamweaver site troubleshooting the remote folder setup a web server can be configured in a wide variety of ways. The following list provides information on some common issues you may encounter in setting up a remote folder (see “setting up a remote folder” on page 65 ), ...

  • Page 67

    Editing existing websites in dreamweaver 67 editing settings for a dreamweaver site use the site definition advanced settings to edit your dreamweaver sites. To edit settings for a dreamweaver site, do one of the following: • select site > manage sites, select a site in the manage sites dialog box, ...

  • Page 68

    68 chapter 2: setting up a dreamweaver site editing an existing remote website in dreamweaver you can use dreamweaver to copy an existing remote site (or any branch of a remote site) to your local disk and edit it there, even if you didn’t use dreamweaver to create the original site. Note: this sect...

  • Page 69: Chapter 3

    69 chapter 3 creating and opening documents macromedia dreamweaver mx 2004 offers a flexible environment for working with a variety of web design and development documents. In addition to html documents, you can create and open a variety of text-based documents, including cfml, asp, javascript, and ...

  • Page 70

    70 chapter 3: creating and opening documents creating new documents dreamweaver provides you with several choices for selecting a new document to work in. You can create a new document in the following ways: • start with a blank document (see “creating a new blank document” on page 70 ). • create a ...

  • Page 71

    Creating new documents 71 to create a new document from a dreamweaver design file: 1 select file > new. The new document dialog box appears. The general tab is already selected. 2 in the category list, select css style sheets, table based layouts, page designs (css), page designs, or page designs (a...

  • Page 72

    72 chapter 3: creating and opening documents to create a new document from a template in the assets panel: 1 open the assets panel (window > assets), if it is not already open. 2 in the assets panel, click the templates icon on the left to view the list of templates in your current site. Tip: if you...

  • Page 73

    Opening existing documents 73 3 set or change preferences as necessary. For more information on options in the dialog box, click the help button. 4 click ok. Dreamweaver saves your preferences. Opening existing documents in dreamweaver, you can open an existing web page or text-based document, even ...

  • Page 74

    74 chapter 3: creating and opening documents importing a microsoft word html file in dreamweaver, you can import documents saved by microsoft word as html files, then use the clean up word html command to remove the extraneous html code generated by word. The clean up word html command is available ...

  • Page 75: Part II

    Part ii working with dreamweaver sites learn how to manage macromedia dreamweaver mx 2004 sites and site-specific assets. This part contains the following chapters: chapter 4, “managing your files,” on page 77 chapter 5, “managing site assets and libraries,” on page 115 chapter 6, “managing contribu...

  • Page 77: Chapter 4

    77 chapter 4 managing your files macromedia dreamweaver mx 2004 helps you organize and manage your files. Dreamweaver includes a number of features for managing files and transferring files to and from a remote server. When you transfer files between local and remote sites, dreamweaver maintains par...

  • Page 78

    78 chapter 4: managing your files about site management dreamweaver includes a number of features for managing a site and transferring files to and from a remote server. Dreamweaver also contains features to make collaborative work on a website easier, such as check in/check out and design notes. Th...

  • Page 79

    About site management 79 • working with asset panel contents • updating templates and libraries note: dreamweaver excludes cloaked templates and library items from get and put operations only. Dreamweaver does not exclude these items from batch operations, because it might cause them to become out o...

  • Page 80

    80 chapter 4: managing your files accessing sites, a server, and local drives you can access, modify, and save files and folders in your dreamweaver sites, as well as files and folders that are not part of a dreamweaver site. In addition to dreamweaver sites, you can access a server, a local drive, ...

  • Page 81

    Accessing sites, a server, and local drives 81 to access a local drive or your desktop: 1 in the files panel (window > files), select desktop, local disk, or cd drive from the pop-up menu (where the current site, server, or drive appears). 2 navigate to a file, then do any of the following: ■ open f...

  • Page 82

    82 chapter 4: managing your files setting up dreamweaver to work without defining a site dreamweaver enables you to connect to an ftp or rds server to work on your documents without creating a dreamweaver site. Note: if you work on files without creating a dreamweaver site, you will not be able to p...

  • Page 83

    Viewing files and folders 83 3 complete the dialog box. For more information, click the help button in the dialog box. Note: you only need to complete this dialog box once for each server you want to connect to. 4 click ok. The files panel displays the contents of the remote server folder you connec...

  • Page 84

    84 chapter 4: managing your files to change the site view in files panel, do one of the following (dreamweaver sites only): • in the collapsed files panel (window > files), select local view, remote view, testing server, or map view from the site view pop-up menu. Note: local view appears in the pop...

  • Page 85

    Viewing files and folders 85 to sort by any detail column in the files panel: • click the heading for the column you want to sort. Tip: click the heading again to reverse the order (ascending or descending) by which dreamweaver sorts the column. To add, delete, or change detail columns: 1 select sit...

  • Page 86

    86 chapter 4: managing your files managing files and folders in the files panel you can organize and manage your site files and folders whether they are part of a dreamweaver site, on a server you’ve connected to, or on your local drive or desktop. Note: in previous versions of dreamweaver, the file...

  • Page 87

    Managing files and folders in the files panel 87 working with files in the files panel you can open or rename files; add, move, or delete files; or refresh the files panel after you make changes. For dreamweaver sites, you can also determine which files (on either the local or remote site) have been...

  • Page 88

    88 chapter 4: managing your files to refresh the files panel, do one of the following: • right-click (windows) or control-click (macintosh) any file or folder, then select refresh. • (dreamweaver sites only) click the refresh button in the files panel toolbar (this option refreshes both panes). Note...

  • Page 89

    Working with a visual map of your site 89 to locate and select files that are newer in the remote site than in the local site: • in the collapsed files panel (window > files), click the options menu in the upper right corner of the files panel, then select edit > select newer remote. Dreamweaver sel...

  • Page 90

    90 chapter 4: managing your files viewing a site map you must define a home page for your site before you can display the site map. The site’s home page can be any page in your site; it does not have to be the main page for your site. In this case, the home page is simply the starting point of the m...

  • Page 91

    Working with a visual map of your site 91 3 notice the colors in the site map: ■ text displayed in red indicates a broken link. ■ text displayed in blue and marked with a globe icon indicates a file on another site or a special link (such as an e-mail or script link). ■ a green check mark indicates ...

  • Page 92

    92 chapter 4: managing your files 3 select site map layout from the category list on the left. The site definition dialog box displays site map layout options. 4 make changes as necessary. For more information, click the help button in the dialog box. 5 click ok to close the site definition dialog b...

  • Page 93

    Working with a visual map of your site 93 to add an existing file to the site, do one of the following: • drag the file from the windows explorer or the macintosh finder to a file in the site map. The page is added to the site, and a link is created between it and the file you dragged it to. • right...

  • Page 94

    94 chapter 4: managing your files to update the site map display after making changes: 1 click anywhere in the site map to deselect any files. 2 click the refresh button in the files panel toolbar. Related topics • “viewing a site map” on page 90 • “modifying the site map layout” on page 91 • “savin...

  • Page 95

    Working with a visual map of your site 95 to show dependent files in the site map: 1 in the collapsed files panel (window > files), click the options menu in the upper right corner. 2 do one of the following: ■ select view > show dependent files. ■ select view > layout to open the site definition di...

  • Page 96

    96 chapter 4: managing your files saving the site map you can save the site map as an image, then view the image in (or print it from) an image editor. To create an image file of the current site map: 1 in the collapsed files panel (window > files), click the options menu in the upper right corner, ...

  • Page 97

    Checking in and checking out files 97 to import a site: 1 select site > manage sites. The manage sites dialog box appears. 2 click the import button. The import site dialog box appears. 3 browse to and select a site (saved as an xml file) to import. Note: you must export the site from dreamweaver, w...

  • Page 98

    98 chapter 4: managing your files setting up the check in/check out system before you can use the check in/check out system, you must associate your local site with a remote server (see “setting up a remote folder” on page 65 ). To set up the check in/check out system: 1 select site > manage sites. ...

  • Page 99

    Checking in and checking out files 99 checking files into and out of a remote folder after you set up the check in/check out system (see “setting up the check in/check out system” on page 98 ), you can check in and check out files on a remote server using the files panel or from the document window....

  • Page 100

    100 chapter 4: managing your files to check in or check out an open file from the document window: 1 make sure the file you want to check in or out is active in the document window. Note: you can check in only one open file at a time. 2 do one of the following: ■ select site > check in or site > che...

  • Page 101

    Getting and putting files to and from your server 101 getting and putting files to and from your server if you’re working in a collaborative environment, use the check in/check out system to transfer files between local and remote sites (see “checking in and checking out files” on page 97 ). If you’...

  • Page 102

    102 chapter 4: managing your files to get a file from a remote server using the document window: 1 make sure the document is active in the document window. 2 do one of the following to get the file: ■ select site > get. ■ click the file management icon in the document window toolbar, then select get...

  • Page 103

    Synchronizing the files on your local and remote sites 103 if the file hasn’t been saved, a dialog box may appear (depending on your preference setting in the site category of the preferences dialog box) allowing you to save the file before putting it on the remote server. 3 if a dialog box appears,...

  • Page 104

    104 chapter 4: managing your files to see which files are newer on the local site or the remote site, without synchronizing, do one of the following: • in the files panel, click the options menu in the upper right corner of the files panel, then select select > select newer local or select > select ...

  • Page 105

    Cloaking folders and files in your site 105 enabling and disabling site cloaking site cloaking is enabled by default. You can disable cloaking permanently or just temporarily to perform an operation on all files, including cloaked files. When you disable site cloaking, all cloaked files are uncloake...

  • Page 106

    106 chapter 4: managing your files cloaking and uncloaking specific file types you can indicate specific file types to cloak, so that dreamweaver cloaks all files ending with a specified pattern. For example, you can cloak all files ending with the .Txt extension. The file types that you enter do no...

  • Page 107

    Cloaking folders and files in your site 107 to uncloak specific file types within a site: 1 in the files panel (window > files), select a select a site that has site cloaking enabled from the pop-up menu where the current site, server, or drive appears. 2 right-click (windows) or control-click (maci...

  • Page 108

    108 chapter 4: managing your files storing file information in design notes design notes are notes associated with a file, but stored in a separate file. Use design notes to keep track of extra file information associated with your documents, such as image source- filenames and comments on file stat...

  • Page 109

    Storing file information in design notes 109 associating design notes with files you can create a design notes file for each document or template in your site. You can also create design notes for applets, activex controls, images, flash content, shockwave objects, and image fields in your documents...

  • Page 110

    110 chapter 4: managing your files working with design notes after you associate a design note with a file (see “associating design notes with files” on page 109 ), you can open the design note, change its status, or delete it. To open design notes associated with a file, do one of the following: • ...

  • Page 111

    Testing your site 111 testing your site dreamweaver provides several features to help you test your site, including previewing pages and checking for browser compatibility. You can also run various reports, such as a broken links report. Site testing guidelines before uploading your site to a server...

  • Page 112

    112 chapter 4: managing your files • once the bulk of the site has been published, continue to update and maintain it. Publishing your site—that is, making it live—can be accomplished in several ways and is an ongoing process. An important part of the process is defining and implementing a version- ...

  • Page 113

    Testing your site 113 to run reports to test a site: 1 select site > reports. Tip: if you want to run only an accessibility report for your site, you can select file > check page > check accessibility and the report appears in the site reports panel of the results panel group. The reports dialog box...

  • Page 114

    114 chapter 4: managing your files to use and save a report: 1 run a report (see the previous procedure). 2 in the site reports panel, do any of the following to view the report: ■ click the column heading you want to sort results by. You can sort by filename, line number, or description. You can al...

  • Page 115: Chapter 5

    115 chapter 5 managing site assets and libraries as you develop websites, you accumulate a growing number of assets. In some cases, you might use the same assets across multiple sites, or perhaps you have a set of favored assets that you use in all your sites. You can use macromedia dreamweaver mx 2...

  • Page 116

    116 chapter 5: managing site assets and libraries dreamweaver stores library items in a library folder within the local root folder for each site. Each site has its own library. Note: if the library item contains links, the links may not work in the new site. Also, images in a library item aren’t co...

  • Page 117

    Working with assets 117 viewing assets in the assets panel you can view and manage assets in the current site using the assets panel. The assets panel displays assets for the site associated with the active document in the document window. Note: you must define a local site before you can view asset...

  • Page 118

    118 chapter 5: managing site assets and libraries to view the favorites list: • in the assets panel (window > assets), select the favorites option at the top of the panel. The favorites list is empty until you explicitly add assets to it. Note: in the templates and library categories (on the left si...

  • Page 119

    Working with assets 119 to manually refresh the site list: 1 in the assets panel (window > assets), select the site option at the top of the panel to see the site list. 2 click the refresh site list button at the bottom of the assets panel. Dreamweaver creates the site cache or updates it as necessa...

  • Page 120

    120 chapter 5: managing site assets and libraries applying a color to text using the assets panel the colors in the assets panel represent colors you’ve applied to various elements in your site, such as text, table border, background color, and so on. You can use the color swatches in the color cate...

  • Page 121

    Working with assets 121 selecting and editing assets the assets panel allows you to select multiple assets at once. It also provides a quick way to begin editing assets. To select multiple assets: 1 in the assets panel (window > assets), select one of the assets. 2 select the other assets in one of ...

  • Page 122

    122 chapter 5: managing site assets and libraries reusing assets in another site the assets panel shows all the assets (of recognized types) in your current site. To use an asset from the current site in another site, you must copy it to the other site. You can copy an individual asset, a set of ind...

  • Page 123

    Creating and managing a list of favorite assets 123 creating and managing a list of favorite assets because the assets panel’s site list always shows all of the recognized assets in the site, this list can become cumbersome for some large sites. You can add frequently used assets to a favorites list...

  • Page 124

    124 chapter 5: managing site assets and libraries to remove assets from your favorites list: 1 in the assets panel (window > assets), select the favorites option at the top of the panel. 2 select one or more assets (or a folder) in the favorites list. 3 click the remove from favorites button at the ...

  • Page 125

    Working with library items 125 grouping assets in a favorites folder you can group assets in your favorites list in folders in the assets panel. For example, if you have a set of images that you use on numerous catalog pages in an e-commerce site, you could group them together in a folder called cat...

  • Page 126

    126 chapter 5: managing site assets and libraries to create a library item based on a selection: 1 in the document window, select a portion of a document to save as a library item. 2 do one of the following: ■ drag the selection into the library category of the assets pane (window > assets). ■ click...

  • Page 127

    Working with library items 127 editing a library item when you edit a library item, you can update all documents that use that item. If you choose not to update, the documents remain associated with the library item; you can update them later. Other kinds of changes to library items include renaming...

  • Page 128

    128 chapter 5: managing site assets and libraries 3 make sure library items is selected in the update option. Tip: to update templates at the same time, make sure templates is also selected. For more information, see “opening a template for editing” on page 242 . 4 click start. Dreamweaver updates t...

  • Page 129

    Working with library items 129 setting library highlighting preferences you can customize the highlight color for library items and show or hide highlighting of library items by setting highlighting preferences. To change the highlight color for library items: 1 select edit > preferences (windows) o...

  • Page 130

    130 chapter 5: managing site assets and libraries making library items editable in a document if you’ve added a library item to your document and you want to edit the item specifically for that page, you must break the link between the item in the document and the library. Once you’ve made an instan...

  • Page 131

    Working with library items 131 10 to update the library item in your site’s other documents, select modify > library > update pages. 11 in the update pages dialog box, in the look in pop-up menu, select files that use. 12 in the adjacent pop-up menu, select the name of the library item you just crea...

  • Page 132

    132 chapter 5: managing site assets and libraries.

  • Page 133: Chapter 6

    133 chapter 6 managing contribute sites with dreamweaver macromedia contribute combines a web browser with a basic web-page editor. It enables your colleagues or clients to browse to a page in a site that you created, and to edit or update the page if they have permission to do so. Contribute users ...

  • Page 134

    134 chapter 6: managing contribute sites with dreamweaver about managing contribute sites you can use dreamweaver to connect to a contribute site and modify the files in the site just as you would in any dreamweaver site. Most dreamweaver capabilities work the same way with a contribute site as with...

  • Page 135

    About managing contribute sites 135 • to prevent a css style from being available to contribute users, change the name of the style so that the name starts with mmhide_. For example, if you use a style named rightjustified in a page but you don’t want contribute users to be able to use that style, r...

  • Page 136

    136 chapter 6: managing contribute sites with dreamweaver file transfer to or from a contribute site contribute uses a system much like the dreamweaver check in/check out system to ensure that only one user at a time can edit a given web page. When you enable contribute compatibility in dreamweaver,...

  • Page 137

    About managing contribute sites 137 when you set up a site, it’s a good idea to give users read access on the server to the /_mm folder (the _mm subfolder of the root folder), the /templates folder, and all of the folders containing assets that they will need to use. If for some reason you can’t giv...

  • Page 138

    138 chapter 6: managing contribute sites with dreamweaver preparing a site for use with contribute before you can use dreamweaver to administer a contribute site, you must enable contribute compatibility. Depending on the site you are connecting to, you might be automatically prompted to enable cont...

  • Page 139

    Administering a contribute site using dreamweaver 139 to administer a contribute website in dreamweaver: 1 select site > manage sites. The manage sites dialog box appears. 2 select a site, then click edit. The site definition dialog box appears. 3 click the advanced tab. 4 select the contribute cate...

  • Page 140

    140 chapter 6: managing contribute sites with dreamweaver troubleshooting a contribute site if you encounter a problem with a contribute site, see the following specific topics for information on how to resolve the problem: • for problems connecting to a contribute site, see “troubleshooting connect...

  • Page 141

    Managing contribute files using dreamweaver 141 managing contribute files using dreamweaver most dreamweaver capabilities work the same way with a contribute site as with any other site. However, when you use dreamweaver with a contribute site, dreamweaver automatically performs certain file-managem...

  • Page 142

    142 chapter 6: managing contribute sites with dreamweaver enabling contribute users to access templates without root folder access in a contribute site, you must manage underlying read and write permissions assigned to files and folders by the server directly on the server. For more information, see...

  • Page 143: Part III

    Part iii laying out pages use the visual design tools in macromedia dreamweaver mx 2004 to create sophisticated page layouts. This part contains the following chapters: chapter 7, “laying out pages with css,” on page 145 chapter 8, “presenting content with tables,” on page 163 chapter 9, “laying out...

  • Page 145: Chapter 7

    145 chapter 7 laying out pages with css in macromedia dreamweaver mx 2004, you can use css to add content blocks to your document for layout. You can either insert div tags and apply css positioning styles to them, or you can use dreamweaver layers to create your layout. Note: dreamweaver treats all...

  • Page 146

    146 chapter 7: laying out pages with css about layers in dreamweaver a layer is an html page element that you can position anywhere on your page. Layers can contain text, images, or any other content that you can place in the body of an html document. Note: a layer in dreamweaver is a div tag with a...

  • Page 147

    Inserting content blocks for layout 147 the following is sample html code for a layer: the following is sample html code for a layer nested inside another layer: content inside the parent layer. Content inside the nested layer. You can set properties for layers on your page, including x and y coordi...

  • Page 148

    148 chapter 7: laying out pages with css 3 complete the dialog box. For more information, click the help button in the dialog box. 4 click ok. The div tag appears as a box in your document with placeholder text. When you move the pointer over the box, dreamweaver highlights it. If the div tag is abs...

  • Page 149

    Working with content blocks for layout 149 working with content blocks for layout after you insert a div tag (see “inserting content blocks for layout” on page 147 ), you can manipulate the content block or you can add content to it. Note: content block div tags that are absolutely or relatively pos...

  • Page 150

    150 chapter 7: laying out pages with css inserting a layer dreamweaver lets you create layers on your page easily and position them precisely. You can also create nested layers. For more information, see “nesting layers” on page 151 . Note: you can use a dreamweaver design file as a starting point f...

  • Page 151

    Inserting a layer 151 nesting layers a nested layer is a layer whose code is contained in another layer. Nesting is often used to group layers together. A nested layer moves with its parent layer and can be set to inherit visibility from its parent. You can turn the nesting option on to automaticall...

  • Page 152

    152 chapter 7: laying out pages with css setting layer preferences and properties you can specify default settings for your layers. You can also view and set various attributes of one or more layers using the property inspector. Setting layer preferences use the layers category in the preferences di...

  • Page 153

    Managing layers 153 viewing and setting properties for multiple layers when you select two or more layers, the layer property inspector displays text properties and a subset of the full layer properties, allowing you to modify several layers at once. To select multiple layers: • hold down shift whil...

  • Page 154

    154 chapter 7: laying out pages with css to show or hide nested layers: • click the plus (+) or minus (–) buttons (windows) or the expander arrow (macintosh) next to the layer name. Nested layers appear as names connected to parent layers. Related topics • “inserting a layer” on page 150 • “changing...

  • Page 155

    Managing layers 155 to select multiple layers, do one of the following: • in the layers panel (window > layers), shift-click two or more layer names. • in the document window, shift-click inside or on the border of two or more layers. When multiple layers are selected, the handles of the last select...

  • Page 156

    156 chapter 7: laying out pages with css changing layer visibility while working on your document, you can show and hide layers manually, using the layers panel, to see how the page will appear under different conditions. Note: the currently selected layer always becomes visible and appears in front...

  • Page 157

    Manipulating layers 157 manipulating layers as you work with your page layout, you can select, move, resize, and align layers. You must select a layer before you can move, resize, or align it. To prevent layers from overlapping each other as you move and resize them, use the prevent overlap option (...

  • Page 158

    158 chapter 7: laying out pages with css moving layers you can move layers in the design view in much the same way that you move objects in most basic graphics applications. If the prevent overlaps option is on, you will not be able to move a layer so that it overlaps another layer. (see “preventing...

  • Page 159

    Converting layers to tables 159 converting layers to tables instead of using tables or layout mode to create your layout, some web designers prefer to work with layers. Dreamweaver enables you to create your layout using layers, then (if you want) convert them into tables. For example, you might nee...

  • Page 160

    160 chapter 7: laying out pages with css converting between layers and tables you can create your layout using layers, then convert the layers to tables so that your layout can be viewed in older browsers. Before you convert to tables, make sure layers do not overlap (see “preventing layer overlaps”...

  • Page 161

    Using a tracing image 161 to enable or disable snapping: • select view > grid > snap to grid. To change grid settings: 1 select view > grid > grid settings. The grid settings dialog box appears. 2 set options as desired. For more information, click the help button in the dialog box. 3 click ok. Rela...

  • Page 162

    162 chapter 7: laying out pages with css to show or hide the tracing image: • select view > tracing image > show. The tracing image is visible only in dreamweaver. It is never visible when you view the page in a browser. When the tracing image is visible, the page’s real background image and color a...

  • Page 163: Chapter 8

    163 chapter 8 presenting content with tables tables are a powerful tool for presenting tabular data and for laying out text and graphics on a page. Many designers use tables to lay out web pages. Macromedia dreamweaver mx 2004 provides two ways to view and manipulate tables: standard mode, in which ...

  • Page 164

    164 chapter 8: presenting content with tables about tables tables are a powerful tool for presenting tabular data and for laying out text and graphics on an html page. A table consists of one or more rows; each row consists of one or more cells. Although columns aren’t usually explicitly specified i...

  • Page 165

    Inserting a table and adding content 165 about splitting and merging table cells you can merge any number of adjacent cells—as long as the entire selection is a line or a rectangle of cells—to produce a single cell that spans several columns or rows. You can split a cell into any number of rows or c...

  • Page 166

    166 chapter 8: presenting content with tables 3 complete the dialog box. For more information, click the help button in the dialog box. 4 click ok. The table appears in the document. Related topics • “viewing and setting table, cell, row, and column properties” on page 171 • “editing accessibility a...

  • Page 167

    Selecting table elements 167 to export a table: 1 place the insertion point in any cell of the table. 2 select file > export > table. The export table dialog box appears. 3 in the export table dialog box, specify options for exporting the table. For more information, click the help button in the dia...

  • Page 168

    168 chapter 8: presenting content with tables related topics • “formatting tables and cells” on page 170 • “resizing tables, columns, and rows” on page 173 • “copying, pasting, and deleting cells” on page 179 selecting a table there are several ways you can select an entire table at once. To select ...

  • Page 169

    Selecting table elements 169 to select a single column: 1 click in the column. 2 click the column header menu, then select select column. Related topics • “selecting a table” on page 168 selecting cells you can select a single cell, a line or block of cells, or nonadjacent cells. To select entire ro...

  • Page 170

    170 chapter 8: presenting content with tables using expanded tables mode for easier table editing expanded tables mode temporarily adds cell padding and spacing to all tables in a document and increases the tables’ borders to make editing easier. This mode enables you to select items in tables or pr...

  • Page 171

    Formatting tables and cells 171 viewing and setting table, cell, row, and column properties when a table or cell is selected, the property inspector lets you view and change its properties. Note: before you change properties for table elements, it’s a good idea to understand which properties have pr...

  • Page 172

    172 chapter 8: presenting content with tables using a design scheme to format a table use the format table command to quickly apply a preset design to a table. You can then select options to further customize the design. Note: only simple tables can be formatted using preset designs. You can’t use t...

  • Page 173

    Resizing tables, columns, and rows 173 resizing tables, columns, and rows you can resize an entire table or individual rows and columns. If you have trouble resizing, you can clear the column widths or row heights and start over. Sometimes the column widths set in the html code do not match their ap...

  • Page 174

    174 chapter 8: presenting content with tables to change a column’s width and keep the overall table width: • drag the right border of the column you want to change. The width of the adjacent column also changes, so you actually resize two columns. Visual feedback shows you how the columns will adjus...

  • Page 175

    Resizing tables, columns, and rows 175 making column widths in code consistent with visual widths if you see two numbers for a column’s width, then the column width set in the html code does not match the column’s apparent width on the screen. You can make the width specified in the code match the v...

  • Page 176

    176 chapter 8: presenting content with tables related topics • “resizing a table” on page 173 • “resizing columns and rows” on page 173 • “making column widths in code consistent with visual widths” on page 175 displaying table and column widths and menus dreamweaver displays table and column widths...

  • Page 177

    Adding and removing rows and columns 177 to add multiple rows or columns: 1 click in a cell. 2 select modify > table > insert rows or columns. The insert rows or columns dialog box appears. 3 select rows or columns, then complete the dialog box. For more information, click the help button in the dia...

  • Page 178

    178 chapter 8: presenting content with tables splitting and merging cells use the property inspector or the commands in the modify > table submenu to split or merge cells. For more information, see “about splitting and merging table cells” on page 165 . As an alternative approach to merging and spli...

  • Page 179

    Copying, pasting, and deleting cells 179 to increase or decrease the number of rows or columns spanned by a cell: 1 select a cell. 2 do one of the following: ■ select modify > table > increase row span or modify > table > increase column span. ■ select modify > table > decrease row span or modify > ...

  • Page 180

    180 chapter 8: presenting content with tables to paste table cells: 1 select where you want to paste the cells: ■ to replace existing cells with the cells you are pasting, select a set of existing cells with the same layout as the cells on the clipboard. For example, if you’ve copied or cut a 3 x 2 ...

  • Page 181

    Sorting tables 181 nesting tables a nested table is a table inside a cell of another table. You can format a nested table as you would any other table; however, its width is limited by the width of the cell in which it appears. To nest a table within a table cell: 1 click in a cell of the existing t...

  • Page 182

    182 chapter 8: presenting content with tables.

  • Page 183: Chapter 9

    183 chapter 9 laying out pages in layout mode one common method for creating a page layout is to use html tables to position elements. Tables can be difficult to use for layout, however, because they were originally created for displaying tabular data, not for laying out web pages. To streamline the...

  • Page 184

    184 chapter 9: laying out pages in layout mode about layout mode in layout mode, you use layout cells and tables to lay out your page before adding content. For example, you could draw a cell along the top of your page to hold a header graphic, another cell on the left side of the page to hold a nav...

  • Page 185

    About layout mode 185 about viewing table and cell widths in layout mode the widths of layout tables and cells (in pixels, or as a percentage of the page width) appear at the top or bottom of the table when the table is selected or when the insertion point is in the table. Beside the widths are arro...

  • Page 186

    186 chapter 9: laying out pages in layout mode layout table and cells grid lines when you draw a layout cell in a layout table, a light grid of lines appears, extending from the edges of any new layout cell out to the edges of the layout table that contains it. These lines help you align new cells w...

  • Page 187

    Drawing in layout mode 187 you can manually insert and remove spacer images in specific columns or remove all spacer images in the page. Related topics • “using spacer images” on page 196 switching from standard to layout mode before you can draw layout tables or layout cells, you must switch from s...

  • Page 188

    188 chapter 9: laying out pages in layout mode when you move the pointer over a layout cell, dreamweaver highlights it. You can turn highlighting on or off or change the highlight color in preferences. To draw a layout cell: 1 make sure you are in layout mode (see “switching from standard to layout ...

  • Page 189

    Drawing in layout mode 189 to change highlighting preferences for layout cells: 1 select edit > preferences (windows) or dreamweaver > preferences (macintosh). The preferences dialog box appears. 2 select highlighting from the category list on the left. 3 make either of the following changes: ■ to c...

  • Page 190

    190 chapter 9: laying out pages in layout mode to draw a nested layout table: 1 make sure you are in layout mode (see “switching from standard to layout mode” on page 187 ). 2 in the layout category of the insert bar, click the draw layout table button. The pointer changes to a cross hair (+). 3 poi...

  • Page 191

    Adding content to a layout cell 191 a layout cell expands automatically when you add content that is wider than the cell. As the cell expands, the column that the cell is in also expands, which might change the sizes of surrounding cells. The column width for that column changes to show the width th...

  • Page 192

    192 chapter 9: laying out pages in layout mode clearing automatically set cell heights when you create a layout cell, dreamweaver automatically specifies a height for the cell, to make the cell display at the height you drew even though the cell is empty. After you insert content into the cell, you ...

  • Page 193

    Resizing and moving layout cells and tables 193 to move a layout cell: 1 select a cell by clicking an edge of the cell or by control-clicking (windows) or command-clicking (macintosh) anywhere in the cell. Selection handles appear around the cell. 2 do one of the following: ■ drag the cell to anothe...

  • Page 194

    194 chapter 9: laying out pages in layout mode formatting layout cells and tables you can change the appearance of any layout cell or table by using the property inspector. Formatting layout cells you can set various attributes of a layout cell in the property inspector, including width and height, ...

  • Page 195

    Setting column width 195 setting column width you can set a column to a specific width or make it stretch to fill as much of a browser window as possible. You can also specify a minimum width for a column using a spacer image. Sometimes the column widths width set in the html code do not match their...

  • Page 196

    196 chapter 9: laying out pages in layout mode using spacer images to require a column to be a certain minimum width, you can insert a spacer image into that column. For more information, see “spacer images” on page 186 . You can remove spacer images from a single column or from the entire table. Th...

  • Page 197

    Setting preferences for layout mode 197 making column widths in code consistent with visual widths if you see two numbers for a column’s width, then the column width set in the html code does not match the column’s apparent width on the screen. You can make the width specified in the code match the ...

  • Page 198

    198 chapter 9: laying out pages in layout mode.

  • Page 199: Chapter 10

    199 chapter 10 using frames frames provide a way to divide a browser window into multiple regions, each of which can display a different html document. In the most common use of frames, one frame displays a document containing navigation controls, while another frame displays a document with content...

  • Page 200

    200 chapter 10: using frames about frames and framesets a frame is a region in a browser window that can display an html document independent of what’s being displayed in the rest of the browser window. A frameset is an html file that defines the layout and properties of a set of frames, including t...

  • Page 201

    About frames and framesets 201 note that a frame is not a file. It’s easy to think of the document that currently appears in a frame as an integral part of the frame, but the document isn’t actually part of the frame. The frame is a container that holds the document—any frame can display any documen...

  • Page 202

    202 chapter 10: using frames not all browsers provide good frame support, and frames may be difficult for visitors with disabilities to navigate, so if you do use frames, always provide a noframes section in your frameset, for visitors who can’t view them (see “handling browsers that can’t display f...

  • Page 203

    Working with framesets in the document window 203 dreamweaver takes care of nesting framesets as needed; if you use the frame-splitting tools in dreamweaver, you don’t need to worry about the details of which frames are nested and which aren’t. For more information about the frame-splitting tools, s...

  • Page 204

    204 chapter 10: using frames creating frames and framesets there are two ways to create a frameset in dreamweaver: you can select from several predefined framesets or you can design it yourself. Choosing a predefined frameset automatically sets up all the framesets and frames needed to create the la...

  • Page 205

    Creating frames and framesets 205 3 if the frame tag accessibility attributes dialog box appears, complete the dialog box for each frame, then click ok. For more information, click the help button in the dialog box. Note: if you click cancel, the frameset appears in the document, but dreamweaver doe...

  • Page 206

    206 chapter 10: using frames to split a frame into smaller frames, do one of the following: • to split the frame where the insertion point is, select a splitting item from the modify > frameset submenu. • to split a frame or set of frames vertically or horizontally, drag a frame border from the edge...

  • Page 207

    Selecting frames and framesets 207 selecting frames and framesets to make changes to the properties of a frame or frameset, begin by selecting the frame or frameset you want to change. You can select a frame or frameset either in the document window or by using the frames panel. Selecting frames and...

  • Page 208

    208 chapter 10: using frames selecting frames and framesets in the document window in the document window’s design view, when a frame is selected, its borders are outlined with a dotted line; when a frameset is selected, all the borders of the frames within the frameset are outlined with a light dot...

  • Page 209

    Saving frame and frameset files 209 opening a document in a frame you can specify the initial content of a frame by either inserting new content into an empty document in a frame, or opening an existing document in a frame. To open an existing document in a frame: 1 place the insertion point in a fr...

  • Page 210

    210 chapter 10: using frames to save all files associated with a set of frames: • select file > save all frames. This saves all open documents in the frameset, including the frameset file and all framed documents. If the frameset file has not yet been saved, a heavy border appears around the framese...

  • Page 211

    Viewing and setting frame properties and attributes 211 to view or set frame properties: 1 select a frame by doing one of the following: ■ alt-click (windows) or shift-option-click (macintosh) a frame in the document window’s design view. ■ click a frame in the frames panel (window > frames). 2 in t...

  • Page 212

    212 chapter 10: using frames to change the background color of a document in a frame: 1 place the insertion point in the frame. 2 select modify > page properties. The page properties dialog box appears. 3 click the background color pop-up menu, then select a color. 4 click ok. Related topics • “crea...

  • Page 213

    Controlling frame content with links 213 controlling frame content with links to use a link in one frame to open a document in another frame, you must set a target for the link. The target attribute of a link specifies the frame or window in which the linked content opens. For example, if your navig...

  • Page 214

    214 chapter 10: using frames handling browsers that can’t display frames dreamweaver lets you specify content to display in text-based browsers and in older graphical browsers that do not support frames. This content is stored in the frameset file, wrapped in a noframes tag. When a browser that does...

  • Page 215: Chapter 11

    215 chapter 11 managing templates a macromedia dreamweaver mx 2004 template is a special type of document that you use to design a “fixed” page layout; you can then create documents based on the template that inherit the page layout of the template. As you design a template, you specify which areas ...

  • Page 216

    216 chapter 11: managing templates about dreamweaver templates a template author designs a “fixed” page layout in a template. The author then creates regions in the template that are editable in documents based on that template; if the author does not define a region as editable, then template users...

  • Page 217

    About dreamweaver templates 217 an editable tag attribute lets you unlock a tag attribute in a template, so the attribute can be edited in a template-based page. For example, you can “lock” which image appears in the document but let the template user set the alignment to left, right, or center. For...

  • Page 218

    218 chapter 11: managing templates viewing templates in code view in code view, you can make changes to both editable and locked html source code in a template. Tip: you can use code color preferences to set your own color scheme so you can easily distinguish template regions when you view a documen...

  • Page 219

    About dreamweaver templates 219 in addition to the editable-region outlines, the entire page is surrounded by a different-colored outline, with a tab at the upper right giving the name of the template that the document is based on. This highlighted rectangle is there to remind you that the document ...

  • Page 220

    220 chapter 11: managing templates the default color for non-editable text is gray; you can select a different color for the editable and non-editable regions in the preferences dialog box. For more information, see “customizing code coloring preferences for a template” on page 228 . Related topics ...

  • Page 221

    About dreamweaver templates 221 (equivalent to @@...@@) related topics • “general syntax rules” on page 220 instance tags dreamweaver uses the following instance tags: related topics • “general syntax rules” on page 220 • “template tags” on page 220 links in templates to create a link in a template ...

  • Page 222

    222 chapter 11: managing templates for information about linking using the point-to-file icon, see “linking files and documents” on page 320 . Note: in some cases, (such as file paths in event handlers in templates) you can’t use the folder icon or the point-to-file icon; in those cases, you must en...

  • Page 223

    About dreamweaver templates 223 to create a nested template, we created a new document based on the template, then saved the document as a template and named it trionested. In the nested template, we added two editable regions, with content, in the editable region named body . When you add a new edi...

  • Page 224

    224 chapter 11: managing templates template parameters template parameters indicate values for controlling content in documents based on a template. You can use template parameters with optional regions or editable tag attributes, or to set values you want to pass to an attached document. For each p...

  • Page 225

    About dreamweaver templates 225 the template expression language the template expression language is a small subset of javascript, and uses javascript syntax and precedence rules. You can use javascript operators to write an expression like this: @@(firstname+lastname)@@ the following features and o...

  • Page 226

    226 chapter 11: managing templates in cases where there is a field conflict, fields of the _repeat object take precedence over fields of the _document object. Therefore, you shouldn’t need to explicitly reference _document or _repeat except that _document might be needed inside a repeat region to re...

  • Page 227

    Creating a dreamweaver template 227 to create a template: 1 open the document you want to save as a template: ■ to open an existing document, select file > open, then select the document. ■ to open a new blank document, select file > new. In the dialog box that appears, select basic page or dynamic ...

  • Page 228

    228 chapter 11: managing templates to use the assets panel to create a new template 1 in the assets panel (window > assets), select the templates category on the left side of the panel. The templates category of the assets panel appears. 2 click the new template button at the bottom of the assets pa...

  • Page 229

    Creating templates for a contribute site 229 setting highlighting preferences for template regions you can use the dreamweaver highlighting preferences to customize the highlight colors for the outlines around the editable and locked regions of a template in design view. The editable region color ap...

  • Page 230

    230 chapter 11: managing templates note: make sure that the site root folder defined in each contribute user’s site definition is the same as the site root folder defined in your site definition in dreamweaver. If a user’s site root folder doesn’t match yours, that user won’t be able to use template...

  • Page 231

    Creating templates for a contribute site 231 to create a non-dreamweaver template: 1 select site > manage sites. The manage sites dialog box appears. 2 select a site, then click edit. The site definition dialog box appears. 3 click the advanced tab. 4 select the contribute category from the category...

  • Page 232

    232 chapter 11: managing templates creating editable regions editable template regions control which areas of a template-based page a user can edit. Related topics • “types of template regions” on page 216 inserting an editable region before you insert an editable region, you should save the documen...

  • Page 233

    Creating editable regions 233 related topics • “removing an editable region” on page 233 • “changing an editable region’s name” on page 234 selecting editable regions you can easily identify and select template regions in both the template document and template- based documents. To select an editabl...

  • Page 234

    234 chapter 11: managing templates changing an editable region’s name after you insert an editable region, you can later change its name. To change the name of an editable region: 1 click the tab in the upper left corner of the editable region to select it. 2 in the property inspector (window > prop...

  • Page 235

    Creating repeating regions 235 to insert a repeating region in a template: 1 in the document window, do one of the following: ■ select the text or content you want to set as a repeating region. ■ place the insertion point in the document where you want to insert the repeating region. 2 do one of the...

  • Page 236

    236 chapter 11: managing templates inserting a repeating table you can use a repeating table to create an editable region (in table format) with repeating rows. You can define table attributes and set which table cells are editable. To insert a repeating table: 1 in the document window, place the in...

  • Page 237

    Using optional regions 237 the following is a code example of a table that includes alternating background table row colors: using optional regions an optional region is a region in a template that users can set to show or to hide in a template- based document. Use an optional region when you want t...

  • Page 238

    238 chapter 11: managing templates to insert an optional region: 1 in the document window, select the element you want to set as an optional region. 2 do one of the following: ■ select insert > template objects > optional region. ■ right-click (windows) or control-click (macintosh) the selected cont...

  • Page 239

    Defining editable tag attributes 239 modifying an optional region you can edit optional region settings after you’ve inserted the region in a template. For example, you can change whether the default for the content is set to show or not, link a parameter to an existing optional region, or modify a ...

  • Page 240

    240 chapter 11: managing templates specifying editable tag attributes in a template you can set multiple editable attributes in a page so that template users can modify the attributes in template-based documents. The following data types are supported: text, boolean ( true / false ), color, and url....

  • Page 241

    Creating a nested template 241 creating a nested template nested templates let you create variations of a base template. You create a nested template by saving a document based on a template, then saving that document as a new template. You can nest multiple templates to define increasingly specific...

  • Page 242

    242 chapter 11: managing templates editing and updating templates when you make changes to and save a template, dreamweaver automatically updates all documents attached to the template. You can also manually update documents based on a template, if necessary. Note: to edit a template for a contribut...

  • Page 243

    Editing and updating templates 243 to open and modify the template attached to the current document: 1 open the template-based document in the document window. 2 do one of the following: ■ select modify > templates > open attached template. ■ right-click (windows) or control-click (macintosh), then ...

  • Page 244

    244 chapter 11: managing templates updating templates in a contribute site contribute users can’t make changes to a dreamweaver template. You can, however, use dreamweaver to change a template for a contribute site the following are important factors to keep in mind when updating templates in a cont...

  • Page 245

    Managing templates 245 managing templates use the templates category of the assets panel to manage existing templates, including renaming template files and deleting template files. Note: you can also use the assets panel to apply a template to a document (see “editing and updating templates” on pag...

  • Page 246

    246 chapter 11: managing templates exporting and importing template xml content you can think of a document based on a template as containing data represented by name/value pairs. Each pair consists of the name of an editable region, and the contents of that region. Dreamweaver lets you export the n...

  • Page 247

    Applying or removing a template from an existing document 247 exporting a site without template markup if you do not want to include template markup in the template-based documents you export to another site, use the export site without template markup command. To export a site without template mark...

  • Page 248

    248 chapter 11: managing templates to apply a template to an existing document from the document window: 1 open the document you want to apply the template to. 2 select modify > templates > apply template to page. The select template dialog box appears. 3 choose a template from the list, then click ...

  • Page 249

    Editing content in a template-based document 249 modifying template properties when template authors create parameters in a template (see “template parameters” on page 224 ), documents based on the template automatically inherit the parameters and their initial value settings. A template user can up...

  • Page 250

    250 chapter 11: managing templates adding, deleting, and changing the order of a repeating region entry use repeating region controls to add, delete, or change the order of entries in template-based documents. When you add a repeating region entry, a copy of the entire repeating region is added. To ...

  • Page 251: Part IV

    Part iv adding content to pages use the visual tools in macromedia dreamweaver mx 2004 to add a variety of content to your web pages. Add and format elements such as text, images, colors, movies, sound, and other forms of media. Be sure to make your pages accessible to visitors with disabilities. Th...

  • Page 253: Chapter 12

    253 chapter 12 working with pages macromedia dreamweaver mx 2004 provides many features to help you create new web pages. These page creation features can help you more easily specify web page properties such as page titles, background images and colors, and text and link colors. In addition, dreamw...

  • Page 254

    254 chapter 12: working with pages about setting page properties for each page you create in dreamweaver, you can specify layout and formatting properties using the page properties dialog box (modify > page properties). The page properties dialog box lets you specify the default font family and font...

  • Page 255

    About working with pages 255 about the history panel the history panel shows a list of the steps you’ve performed in the active document since you created or opened that document, up to a specified number of steps. (the history panel doesn’t show steps you’ve performed in other frames, in other docu...

  • Page 256

    256 chapter 12: working with pages unix versions of netscape navigator use a different color palette than the windows and macintosh versions. If you are developing exclusively for unix browsers (or your target audience is windows or macintosh users with 24-bit monitors and unix users with 8-bit moni...

  • Page 257

    Saving web pages 257 saving web pages you can save a document using its current name and location, or save a copy of a document using a different name and location. When naming files, avoid using spaces and special characters in file and folder names. In particular, do not use special characters (su...

  • Page 258

    258 chapter 12: working with pages specifying html instead of css by default, dreamweaver uses css tags to assign page properties. If you want to use html tags instead, you must deselect the use css instead of html tags option in the general category of the preferences dialog box. To specify html in...

  • Page 259

    Setting page properties 259 changing the document title the title of an html page helps site visitors keep track of what they’re viewing as they browse, and it identifies the page in the visitor’s history and bookmark lists. If you don’t title a page, the page will appear in the browser window, book...

  • Page 260

    260 chapter 12: working with pages setting a background image or background page color to define an image or color for the page background, use the page properties dialog box. If you use both a background image and a background color, the color appears while the image downloads, and then the image c...

  • Page 261

    Working with colors 261 ■ use the eyedropper to pick up a color from anywhere on your screen—even outside the dreamweaver windows. To pick up a color from the desktop or another application, press and hold the mouse button; this allows the eyedropper to retain focus, and select a color outside of dr...

  • Page 262

    262 chapter 12: working with pages selecting elements in the document window to select an element in the design view of the document window, you generally click the element. If an element is invisible, you must make it visible before you can select it. For more information about invisible elements, ...

  • Page 263

    Using the history panel 263 showing and hiding invisible elements some html code doesn’t have a visible representation in a browser. For example, comment tags don’t appear in browsers. However, it can be useful while you’re creating a page to be able to select such invisible elements, edit them, mov...

  • Page 264

    264 chapter 12: working with pages to undo multiple steps at once, do one of the following: • drag the slider to point to any step. • click to the left of a step along the path of the slider; the slider scrolls automatically to that step, undoing steps as it scrolls. Note: to scroll automatically to...

  • Page 265

    Automating tasks 265 automating tasks while creating your documents, you may want to perform the same task numerous times. To repeat a series of steps once or twice, replay them directly from the history panel, which records your steps as you work on a document. (for basic information about the hist...

  • Page 266

    266 chapter 12: working with pages to repeat a series of adjacent steps: 1 select steps in the history panel by doing one of the following: ■ drag from one step to another. (don’t drag the slider; just drag from the text label of one step to the text label of another step.) ■ select the first step, ...

  • Page 267

    Automating tasks 267 to set the vertical and horizontal spacing of a series of images: 1 start with a document in which each line consists of a small image (such as a graphical bullet or an icon) followed by text. The goal is to set the images off from the text and from the other images above and be...

  • Page 268

    268 chapter 12: working with pages copying and pasting steps between documents each open document has its own history of steps. You can copy steps from one document and paste them into another. Closing a document clears its history. If you know you will want to use steps from a document after that d...

  • Page 269

    Automating tasks 269 to create a command: 1 select a step or set of steps in the history panel. 2 click the save as command button, or select save as command from the history panel’s context menu. 3 enter a name for the command and click ok. The command appears in the commands menu. Note: the comman...

  • Page 270

    270 chapter 12: working with pages to save a recorded command: 1 select commands > play recorded command to play the command back. A step named run command appears in the history panel’s step list. 2 select the run command step and click the save as command button. 3 enter a name for the command and...

  • Page 271

    Previewing and testing pages in browsers 271 tip: to preview content linked with root-relative paths, put the file on a remote server, then select file > preview in browser to view it (see “site root-relative paths” on page 318 ). 3 close the page in the browser when you finish testing. To set or ch...

  • Page 272

    272 chapter 12: working with pages setting download time and size preferences dreamweaver calculates size based on the entire contents of the page, including all linked objects, such as images and plug-ins. Dreamweaver estimates download time based on the connection speed entered in status bar prefe...

  • Page 273: Chapter 13

    273 chapter 13 inserting and formatting text macromedia dreamweaver mx 2004 offers several ways for you to add and format text in a document. You can insert text, set font type, size, color, and alignment attributes, as well as create and apply your own custom styles using cascading style sheet (css...

  • Page 274

    274 chapter 13: inserting and formatting text about formatting text formatting text in dreamweaver is similar to using a standard word processor. You can set default formatting styles (paragraph, heading 1, heading 2, and so on) for a block of text, change the font, size, color, and alignment of sel...

  • Page 275

    About text formatting in dreamweaver 275 css styles let you control many properties that cannot be controlled using html alone. For example, you can assign custom list bullets and specify different font sizes and units (pixels, points, and so on). By using css styles and setting font sizes in pixels...

  • Page 276

    276 chapter 13: inserting and formatting text about conflicting css styles when you apply two or more css styles to the same text, the styles may conflict and produce unexpected results. Browsers apply style attributes according to the following rules: • if two styles are applied to the same text, t...

  • Page 277

    About text formatting in dreamweaver 277 if you have styles defined in more than one location (for example, both embedded in an html page and imported from an external style sheet) using both the short and long forms of css syntax, be aware that omitted properties may override (or cascade) propertie...

  • Page 278

    278 chapter 13: inserting and formatting text the style pop-up menu displays both the names of styles in your page, as well as a preview of the style’s properties. The properties shown in the preview are font family, font size, font weight, text color, and background color. Related topics • “formatt...

  • Page 279

    About text formatting in dreamweaver 279 you can also use the lower panel of the relevant css tab to modify the properties of a selection. The editable grid lets you change the values for any of the displayed properties. Any changes you make to a selection are applied immediately, letting you previe...

  • Page 280

    280 chapter 13: inserting and formatting text list view displays all of the dreamweaver supported css properties in descending alphabetic order, with set properties sorted to the top of the list displayed in blue text (see the following illustration). Related topics: • “the relevant css tab” on page...

  • Page 281

    Inserting text 281 importing tabular data documents you can import tabular data into your document by first saving the files (such as microsoft excel files or database files) as delimited text files. For information on importing and formatting table data, see “importing and exporting tabular data” o...

  • Page 282

    282 chapter 13: inserting and formatting text inserting a link to a word or excel document you can insert a link to a microsoft word or excel document in an existing page. To create a link to a word or excel document: 1 open the page where you want the link to appear. 2 drag the file from its curren...

  • Page 283

    Formatting paragraphs and document structure 283 formatting paragraphs use the format pop-up menu in the property inspector or the text > paragraph format submenu to apply the standard paragraph and heading tags. To apply a paragraph or heading tag: 1 place the insertion point in the paragraph, or s...

  • Page 284

    284 chapter 13: inserting and formatting text adding paragraph spacing dreamweaver works similarly to many word processing application: you press enter (windows) or return (macintosh) to create a new paragraph. Web browsers automatically insert a blank line of space between paragraphs. You can add a...

  • Page 285

    Formatting text 285 to create a new list: 1 in the dreamweaver document, place the insertion point where you want to add a list, then do one of the following: ■ click either the bulleted or numbered list button in the property inspector ■ select text > list and select the type of list desired—unorde...

  • Page 286

    286 chapter 13: inserting and formatting text setting and changing fonts and styles use options in the property inspector or the text menu to set or change font characteristics for selected text. You can set the font type, style (such as bold or italic), and size. To set or change font characteristi...

  • Page 287

    Formatting text 287 renaming a style as you format text, dreamweaver keeps track of the styles you create in each page, and builds a library of styles that you can reuse. This makes applying the same formatting to a block of text much simpler, as well as letting you create a more consistent look for...

  • Page 288

    288 chapter 13: inserting and formatting text to add a new combination to the font list: 1 select text > font > edit font list. 2 select a font from the available fonts list and click the chosen fonts list. 3 repeat step 2 for each subsequent font in the combination. To add a font that is not instal...

  • Page 289

    Formatting text 289 inserting dates dreamweaver provides a convenient date object, which inserts the current date in whatever format you prefer (with or without the time) and provides the option of updating that date whenever you save the file. Note: the dates and times shown in the insert date dial...

  • Page 290

    290 chapter 13: inserting and formatting text adding space between characters html only allows for one space between characters; to add additional space in a document you must insert a non-breaking space. You can set a preference to automatically add non-breaking spaces in a document. To insert a no...

  • Page 291

    Using cascading style sheets styles 291 using the css styles panel you use the css styles panel to create, edit, and remove css styles, as well as to attach external style sheets to documents. To open the css styles panel: • do one of the following: ■ select window > css styles. ■ press shift+f11. T...

  • Page 292

    292 chapter 13: inserting and formatting text delete css style removes the selected style from the css styles panel, and removes the formatting from any element to which it was applied. Note: right-click (windows) or control-click (macintosh) the css styles panel to open a context menu of options fo...

  • Page 293

    Using cascading style sheets styles 293 using the css properties tab the css properties tab lets you directly edit the properties and values of a css rule. By default, the css properties are organized into categories. You can modify the properties of each css rule by entering values in text fields a...

  • Page 294

    294 chapter 13: inserting and formatting text creating a new css style you can create a css style to automate the formatting of html tags or a range of text identified by a class attribute. To create a new css style: 1 place the insertion point in the document, then do one of the following to open t...

  • Page 295

    Using cascading style sheets styles 295 • defining css style positioning properties • defining css style extensions properties related topics • “using the css styles panel” on page 291 • “using the relevant css tab” on page 292 • “applying a class style” on page 295 • “editing a css style” on page 2...

  • Page 296

    296 chapter 13: inserting and formatting text to remove a custom style from a selection: 1 select the object or text you want to remove the style from. 2 do one of the following: ■ in the text property inspector, select none from the style pop-up menu. ■ right-click the applied rule you want to remo...

  • Page 297

    Using cascading style sheets styles 297 to link to or import an external css style sheet: 1 open the css styles panel by doing one of the following: ■ select window > css styles. ■ press shift + f11. 2 in the css styles panel, click the attach style sheet button. The attach external style sheet dial...

  • Page 298

    298 chapter 13: inserting and formatting text using the sample dreamweaver style sheets dreamweaver provides sample style sheets that you can apply to your pages or that you can use as starting points to develop your own styles. To apply dreamweaver style sheets: 1 open the css styles panel by doing...

  • Page 299

    Using cascading style sheets styles 299 4 click the style you want to edit to select it, then do one of the following: ■ double-click the selected style in the css styles panel. ■ right-click (windows) or control-click (macintosh), then select edit rule from the content menu. ■ click the edit style ...

  • Page 300

    300 chapter 13: inserting and formatting text updating css style sheets in a contribute site contribute users can’t make changes to a css style sheet. To change a style sheet for a contribute site, use dreamweaver. The following are important factors to keep in mind when updating style sheets for a ...

  • Page 301

    Searching for and replacing text 301 related topics • “using the css styles panel” on page 291 • “exporting styles to create a css style sheet” on page 296 • “linking to or importing an external css style sheet” on page 296 • “editing a css style sheet” on page 299 checking spelling use the check sp...

  • Page 302

    302 chapter 13: inserting and formatting text.

  • Page 303: Chapter 14

    303 chapter 14 inserting images in macromedia dreamweaver mx 2004, you can work in design view or code view to insert images in a document. As you add images in a dreamweaver document, you can set or modify image properties and view the changes directly in the document window. To set up an efficient...

  • Page 304

    304 chapter 14: inserting images jpeg (joint photographic experts group) file format is the superior format for photographic or continuous-tone images, because jpeg files can contain millions of colors. As the quality of a jpeg file increases, so does the file size and the file download time. You ca...

  • Page 305

    Inserting an image 305 related topics • “resizing an image” on page 309 • “cropping an image” on page 310 • “adjusting the brightness and contrast of an image” on page 311 • “sharpening an image” on page 311 inserting an image when you insert an image into a dreamweaver document, dreamweaver automat...

  • Page 306

    306 chapter 14: inserting images 4 click ok. The image tag accessibility attributes dialog box appears if you have activated the dialog box in preferences (see “optimizing the workspace for accessible page design” on page 53 ). 5 enter values in the alternative text and long description text boxes, ...

  • Page 307

    Inserting an image 307 inserting an image placeholder an image placeholder is a graphic you use until final artwork is ready to be added to a web page. To insert an image placeholder: 1 in the document window, place the insertion point where you want to insert a placeholder graphic. 2 do one of the ...

  • Page 308

    308 chapter 14: inserting images aligning an image you can align an image to text, another image, a plug-in, or other elements in the same line. You can also set the horizontal alignment of an image. To align an image: 1 select the image in design view. 2 set the alignment attributes of the image in...

  • Page 309

    Resizing an image 309 resizing an image you can visually resize elements such as images, plug-ins, macromedia shockwave or flash files, applets, and activex controls in dreamweaver. Visually resizing an image in dreamweaver helps you to see how the image affects the layout at different dimensions. V...

  • Page 310

    310 chapter 14: inserting images cropping an image dreamweaver lets you crop (or trim) bitmap file images. Note: when you crop an image using dreamweaver, the source image file is changed on disk. For this reason, you may want to keep a backup copy of the image file in the event you need to revert t...

  • Page 311

    Sharpening an image 311 • “inserting an image” on page 305 • “cropping an image” on page 310 • “sharpening an image” on page 311 adjusting the brightness and contrast of an image brightness/contrast modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, and ...

  • Page 312

    312 chapter 14: inserting images to undo the effects of the sharpen command: • select edit > undo sharpen to revert to the original image. You can only undo the effect of the sharpen command (and revert to the original image file) prior to saving the page containing the image. Once you save the page...

  • Page 313

    Applying behaviors to images 313 using an external image editor while in dreamweaver, you can open a selected image in an external image editor; when you return to dreamweaver after saving the edited image file, any changes you made to the image are visible in the document window. You can set up fir...

  • Page 314

    314 chapter 14: inserting images.

  • Page 315: Chapter 15

    315 chapter 15 linking and navigation after you’ve set up a macromedia dreamweaver mx 2004 site to store your website documents and have created html pages, you’ll want to create connections from your documents to other documents. Macromedia dreamweaver mx 2004 provides several ways to create hypert...

  • Page 316

    316 chapter 15: linking and navigation understanding document locations and paths understanding the file path between the document you’re linking from and the document you’re linking to is essential to creating links. Each web page has a unique address, called a uniform resource locator (url). For m...

  • Page 317

    Understanding document locations and paths 317 the basic idea of document-relative paths is to omit the part of the absolute url that is the same for both the current document and the linked document, providing only the portion of the path that differs. For example, suppose you have a site with the ...

  • Page 318

    318 chapter 15: linking and navigation site root-relative paths site root-relative paths provide the path from the site’s root folder to a document. You may want to use these types of paths if you are working on a large website that uses several servers, or one server that hosts several different si...

  • Page 319

    Navigation bars 319 navigation bars a navigation bar consists of an image (or set of images) whose display changes based on the actions of a user. Navigation bars often provide an easy way to move between pages and files on a site. A navigation bar element can have four states: • up: the image that ...

  • Page 320

    320 chapter 15: linking and navigation about image maps an image map is an image that has been divided into regions, or hotspots; when a user clicks a hotspot, an action occurs (for example, a new file opens). Client-side image maps store the hypertext link information in the html document—not in a ...

  • Page 321

    Creating links 321 linking to documents using the property inspector you can use the property inspector’s folder icon or link text box to create links from an image, an object, or text to another document or file. To link documents using the property inspector’s folder icon or link text box: 1 selec...

  • Page 322

    322 chapter 15: linking and navigation linking documents using the point-to-file icon the point-to-file icon lets you create links from an image, an object, or text to another document or file. To link documents using the point-to-file icon: 1 select text or an image in the document window’s design ...

  • Page 323

    Creating links 323 to link documents in the site map, do one of the following: • drag a page from the windows explorer or the macintosh finder onto a page in the site map. Note: make sure the files panel is docked, and then click the expand arrow. Hold down the site map button, and then select files...

  • Page 324

    324 chapter 15: linking and navigation linking to a specific place in a document you can use the property inspector to link to a particular section of a document by first creating named anchors. Named anchors let you set markers in a document, which are often placed at a specific topic or at the top...

  • Page 325

    Creating links 325 to link to a named anchor using the point-to-file method: 1 open the document containing the named anchor you want. Note: if you don’t see the anchor, select view > visual aids > invisible elements to make it visible. 2 in the document window’s design view, select text or an image...

  • Page 326

    326 chapter 15: linking and navigation to create an e-mail link using the property inspector: 1 select text or an image in the document window’s design view. 2 in the link text box of the property inspector, type mailto: followed by an e-mail address. Do not type any spaces between the colon and the...

  • Page 327

    Managing links 327 managing links to avoid broken links in your site, you can activate link management so that dreamweaver updates links automatically when you make a change. You can also use a visual representation of your site to modify links or you can update all links to a particular file with o...

  • Page 328

    328 chapter 15: linking and navigation to create a cache file for your site: 1 select site > manage sites. The edit sites dialog box appears. 2 select a site, and then click edit. The site definition dialog box appears. 3 click the advanced tab to display the advanced category of the site definition...

  • Page 329

    Managing links 329 to remove a link: 1 select the page in the site map. 2 do one of the following: ■ select site > remove link (windows) or site > site map view > remove link (macintosh). Note: use the files panel’s site menu. ■ right-click (windows) or control-click (macintosh), and select remove l...

  • Page 330

    330 chapter 15: linking and navigation to change a link sitewide: 1 select a file in the local view of the files panel. Note: if you are changing an e-mail, ftp, null, or script link, you do not need to select a file. 2 select site > change link sitewide. The change link sitewide dialog box appears....

  • Page 331

    Inserting jump menus 331 inserting jump menus jump menus let you associate urls with options in a pop-up menu list. By choosing an item from the list, the user is redirected (or “jumps”) to the specified url. Jump menus are inserted within the jump menu form object. To insert a jump menu: 1 open a d...

  • Page 332

    332 chapter 15: linking and navigation editing jump menu items to edit jump menu items, you can change the list order or the file an item links to, or you can add, delete, or rename an item. To change the location in which a linked file opens, or to add or change a menu selection prompt, you must us...

  • Page 333

    Using navigation bars 333 using navigation bars a navigation bar consists of an image (or set of images) whose display changes based on the actions of a user. Before using the insert navigation bar command, you must create a set of images for the display states of each navigation element. (it can be...

  • Page 334

    334 chapter 15: linking and navigation related topics • “navigation bars” on page 319 modifying a navigation bar once you create a navigation bar for a document, you can add images to or remove them from the navigation bar by using the modify navigation bar command. To modify a navigation bar: 1 sel...

  • Page 335

    Using image maps 335 using image maps an image map is an image that has been divided into regions, or “hotspots”; when a user clicks a hotspot, an action occurs (for example, a new file opens). Related topics • “about image maps” on page 320 inserting client-side image maps when you insert a client-...

  • Page 336

    336 chapter 15: linking and navigation to select multiple hotspots in an image map: 1 use the pointer hotspot tool to select a hotspot. 2 do one of the following: ■ shift-click the other hotspots you want to select. ■ press control+a (windows) or command+a (macintosh) to select all of the hotspots. ...

  • Page 337

    Checking for broken, external, and orphaned links 337 the only links that dreamweaver verifies are links to documents within the site; dreamweaver compiles a list of external links that appear in the selected document or documents, but does not verify them. To check links within the current document...

  • Page 338

    338 chapter 15: linking and navigation fixing broken links after you run a links reports, you can fix broken links and image references directly in the link checker panel, or you can open files from the list and fix links in the property inspector. To fix links in the link checker panel: 1 run a lin...

  • Page 339

    Opening linked documents in dreamweaver 339 opening linked documents in dreamweaver links are not active within dreamweaver; that is, you cannot open a linked document by clicking the link in the document window. To open linked documents in dreamweaver, do one of the following: • select the link and...

  • Page 340

    340 chapter 15: linking and navigation.

  • Page 341: Chapter 16

    341 chapter 16 working with other applications macromedia fireworks mx 2004, macromedia flash mx 2004, and macromedia flash mx professional 2004 are powerful web-development tools designed to create graphics and swf movies for viewing in web pages. You can tightly integrate macromedia dreamweaver mx...

  • Page 342

    342 chapter 16: working with other applications optimizing your work environment for fireworks and flash the key to developing a smoothly integrated workflow with fireworks or flash is to optimize your work environment. To optimize your work environment for fireworks and flash: 1 make sure design no...

  • Page 343

    Working with fireworks 343 editing a fireworks image or table from dreamweaver you can start fireworks from dreamweaver to edit images inserted in a dreamweaver document. When you open and edit an image or an image slice that is part of a fireworks table, dreamweaver starts fireworks, which opens th...

  • Page 344

    344 chapter 16: working with other applications optimizing a fireworks image from dreamweaver you can start fireworks from dreamweaver to make quick export changes, such as resizing an image or changing the file type, to placed fireworks images and animations. Fireworks lets you make changes to opti...

  • Page 345

    Working with fireworks 345 fireworks starts, in editing from dreamweaver mode. 4 use fireworks options to design the image. Fireworks recognizes the following image placeholder settings you may have set while working with the image placeholder in dreamweaver: image size (which correlates to the fire...

  • Page 346

    346 chapter 16: working with other applications opening a fireworks pop-up menu in dreamweaver fireworks supports image-based pop-up menus and html-based pop-up menus. Dreamweaver only supports html-based pop-up menus. In dreamweaver, you can open a fireworks pop-up menu and make edits to all menu i...

  • Page 347

    Working with fireworks 347 ask when launching lets you specify each time whether or not to open the source png file. When you edit or optimize a placed image, fireworks displays a message prompting you to make a launch-and-edit decision. You can also specify global launch-and-edit preferences from t...

  • Page 348

    348 chapter 16: working with other applications to export and paste fireworks html into dreamweaver: 1 in fireworks, select file > export. 2 in the export dialog box, specify your dreamweaver site folder as the destination for the exported images. 3 in the save as pop-up menu, select html and images...

  • Page 349

    Working with fireworks 349 to create a web photo album: 1 in dreamweaver, select commands > create web photo album. 2 in the photo album title text box, enter a title. The title will be displayed in a gray rectangle at the top of the page containing the thumbnails. If desired, you can enter up to tw...

  • Page 350

    350 chapter 16: working with other applications 9 click ok to create the html and image files for the web photo album. Fireworks starts (if it’s not already running), and creates the thumbnails and large-size images. This may take several minutes if you’ve included a large number of image files. Whe...

  • Page 351

    Working with flash 351 working with flash you can use dreamweaver to set playback and display options for a flash file in a web page, or update the links in the movie. If macromedia flash mx 2004 is installed, you can also select a swf file in a dreamweaver document and start flash to edit it. Editi...

  • Page 352

    352 chapter 16: working with other applications 3 in flash, edit the movie. The document window indicates that you are modifying a movie from within dreamweaver. 4 when you are finished making edits, click done. Flash updates the flash authoring document (fla file), re-exports the movie file (swf fi...

  • Page 353

    Working with flash 353 updating links in a swf file you can use dreamweaver to update a link in a flash file (swf file), then update the change in the flash authoring document (fla file). To update a url link in a swf file: 1 set up a home page for the site, if you haven’t already done so. You need ...

  • Page 354

    354 chapter 16: working with other applications.

  • Page 355: Chapter 17

    355 chapter 17 adding audio, video, and interactive elements macromedia dreamweaver mx 2004 lets you add sound and movies to your website quickly and easily. You can attach design notes to these objects, which let you communicate with your team. You can also insert macromedia flash mx 2004 button an...

  • Page 356

    356 chapter 17: adding audio, video, and interactive elements about media files you can incorporate the following media files into your dreamweaver pages: flash and shockwave movies, quicktime, avi, java applets, active x controls, and audio files of various formats. Flash file types dreamweaver com...

  • Page 357

    About media files 357 audio file formats the following list describes the more common audio file formats along with some of the advantages and disadvantages of each for web design. .Midi or .Mid (musical instrument digital interface) format is for instrumental music. Midi files are supported by many...

  • Page 358

    358 chapter 17: adding audio, video, and interactive elements inserting and editing media objects you can insert a flash movie or object, quicktime or shockwave movie, java applet, activex control, or other audio or video objects in a dreamweaver document. To insert a media object in a page: 1 place...

  • Page 359

    Starting an external editor for media files 359 5 if the object tag accessibility attributes dialog box appears, complete the dialog box and click ok. For more information, click the help button in the dialog box. The media object appears in the document. Note: if you click cancel, a media object pl...

  • Page 360

    360 chapter 17: adding audio, video, and interactive elements specifying the editor to start from dreamweaver you can specify the editor you want dreamweaver to use for editing a file type, and add or delete file types that dreamweaver recognizes. To explicitly specify which external editors should ...

  • Page 361

    Inserting and modifying a flash button object 361 to add design notes to a media object: 1 right-click (windows) or control-click (macintosh) the object in the document window. Note: you must define your site before adding design notes to any object (see “enabling and disabling design notes for a si...

  • Page 362

    362 chapter 17: adding audio, video, and interactive elements modifying a flash button object you can modify the properties and content of a flash button object. To modify a flash button object: 1 in the document window, click the flash button object to select it. 2 open the property inspector, if i...

  • Page 363

    Inserting flash content 363 inserting a flash text object the flash text object lets you create and insert a flash movie that contains just text. This allows you to create a small, vector-graphic movie with the designer fonts and text of your choice. To insert a flash text object: 1 in the document ...

  • Page 364

    364 chapter 17: adding audio, video, and interactive elements to preview a flash movie in the document window: 1 in the document window, click the flash placeholder to select the flash movie you want to preview. 2 in the property inspector, click the play button. Click stop to end the preview. You c...

  • Page 365

    Adding video 365 editing flash element attributes you edit flash element attributes using the property and tag inspectors. To edit flash element attributes: 1 do one of the following in the document window: ■ in design view, select the flash element. ■ in code view, click anywhere in a flash compone...

  • Page 366

    366 chapter 17: adding audio, video, and interactive elements adding sound to a page you can add sound to a web page. There are several different types of sound files and formats, including .Wav, .Midi, and .Mp3. For more information, see “audio file formats” on page 357 . Some factors to consider b...

  • Page 367

    Inserting netscape navigator plug-in content 367 inserting netscape navigator plug-in content you can create content such as a quicktime movie for a netscape navigator plug-in, and then use dreamweaver to insert that content into an html document. Typical plug-ins include realplayer and quicktime, w...

  • Page 368

    368 chapter 17: adding audio, video, and interactive elements troubleshooting netscape navigator plug-ins if you have followed the steps to play plug-in content in the document window, but some of the plug-in content does not play, try the following: • make sure the associated plug-in is installed o...

  • Page 369

    Using behaviors to control media 369 using behaviors to control media you can add behaviors to your page to start and stop various media objects. Control shockwave or flash lets you play, stop, rewind, or go to a frame in a shockwave or flash movie (see “control shockwave or flash” on page 380 ). Pl...

  • Page 370

    370 chapter 17: adding audio, video, and interactive elements.

  • Page 371: Chapter 18

    371 chapter 18 using javascript behaviors macromedia dreamweaver mx 2004 behaviors place javascript code in documents to allow visitors to interact with a web page to change the page in various ways, or to cause certain tasks to be performed. A behavior is a combination of an event with an action tr...

  • Page 372

    372 chapter 18: using javascript behaviors this chapter contains the following sections: • “using the behaviors panel” on page 372 • “about events” on page 372 • “applying a behavior” on page 373 • “attaching a behavior to text” on page 374 • “changing a behavior” on page 375 • “updating a behavior”...

  • Page 373

    Applying a behavior 373 if you’re attaching a behavior to an image, some events (such as onmouseover ) appear in parentheses. These events are available only for links. When you select one of them, dreamweaver wraps an a tag around the image to define a null link. The null link is represented by jav...

  • Page 374

    374 chapter 18: using javascript behaviors attaching a behavior to text you can’t attach a behavior to plain text. Tags like p and span don’t generate events in browsers, so there’s no way to trigger an action from those tags. However, you can attach a behavior to a link. Therefore, to attach a beha...

  • Page 375

    Creating new actions 375 changing a behavior after attaching a behavior, you can change the event that triggers the action, add or remove actions, and change parameters for actions. To change a behavior: 1 select an object with a behavior attached. 2 select window > behaviors to open the behaviors p...

  • Page 376

    376 chapter 18: using javascript behaviors downloading and installing third-party behaviors one of the most useful features of dreamweaver is its extensibility—that is, it offers users who are proficient in javascript the opportunity to write javascript code that extends the capabilities of dreamwea...

  • Page 377

    Using the behavior actions that come with dreamweaver 377 call javascript the call javascript action lets you use the behaviors panel to specify that a custom function or line of javascript code should be executed when an event occurs. (you can write the javascript yourself, or you can use code prov...

  • Page 378

    378 chapter 18: using javascript behaviors check browser use the check browser action to send visitors to different pages depending on their browser brands and versions. For example, you might want visitors to go to one page if they have netscape navigator 4.0 or later, to go to another page if they...

  • Page 379

    Using the behavior actions that come with dreamweaver 379 check plugin use the check plugin action to send visitors to different pages depending on whether they have the specified plug-in installed. For example, you might want visitors to go to one page if they have shockwave and another page if the...

  • Page 380

    380 chapter 18: using javascript behaviors control shockwave or flash use the control shockwave or flash action to play, stop, rewind, or go to a frame in a macromedia shockwave or macromedia flash swf files. To use the control shockwave or flash action: 1 select insert > media > shockwave or insert...

  • Page 381

    Using the behavior actions that come with dreamweaver 381 4 click the plus (+) button and select drag layer from the actions pop-up menu. If drag layer is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—suc...

  • Page 382

    382 chapter 18: using javascript behaviors 14 click ok. 15 check that the default event is the one you want. If it isn’t, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the show events for pop-up menu. Remember that layers are not suppo...

  • Page 383

    Using the behavior actions that come with dreamweaver 383 to prevent re-registration of snapped layers: 1 make a backup copy of your document before making any changes to the code. (you can do this in the site panel in dreamweaver, or in windows explorer (windows) or the finder (macintosh).) 2 selec...

  • Page 384

    384 chapter 18: using javascript behaviors jump menu when you create a jump menu by using insert > form objects > jump menu, dreamweaver creates a menu object and attaches the jump menu (or jump menu go) behavior to it. There is usually no need to attach the jump menu action to an object by hand. Fo...

  • Page 385

    Using the behavior actions that come with dreamweaver 385 if you specify no attributes for the window, it opens at the size and with the attributes of the window that opened it. Specifying any attribute for the window automatically turns off all other attributes that are not explicitly turned on. Fo...

  • Page 386

    386 chapter 18: using javascript behaviors play sound use the play sound action to play a sound. For example, you might want to play a sound effect whenever the mouse pointer rolls over a link, or you might want to play a music clip when the page loads. Note: browsers may require some kind of additi...

  • Page 387

    Using the behavior actions that come with dreamweaver 387 preload images the preload images action loads images that do not appear on the page right away (such as those that will be swapped in with behaviors or javascript) into the browser cache. This prevents delays caused by downloading when it is...

  • Page 388

    388 chapter 18: using javascript behaviors to set multiple images for a navigation bar button: 1 select an image in the navigation bar to edit, and open the behaviors panel. 2 in the behaviors panel, in the actions column, double-click the set nav bar image action associated with the event you’re al...

  • Page 389

    Using the behavior actions that come with dreamweaver 389 to use the set text of frame action: 1 select an object and open the behaviors panel. 2 click the plus (+) button and select set text > set text of frame from the actions pop-up menu. 3 in the set text of frame dialog box, select the target f...

  • Page 390

    390 chapter 18: using javascript behaviors set text of status bar the set text of status bar action shows a message in the status bar at the bottom left of the browser window. For example, you can use this action to describe the destination of a link in the status bar instead of showing the url asso...

  • Page 391

    Using the behavior actions that come with dreamweaver 391 to use the set text of text field action: 1 select a text field and open the behaviors panel. 2 click the plus (+) button and select set text > set text of text field from the actions pop-up menu. 3 in the set text of text field dialog box, s...

  • Page 392

    392 chapter 18: using javascript behaviors to create a preload layer: 1 click the draw layer button in the common category of the insert bar and draw a large layer in the document window’s design view. Be sure the layer covers all the content on the page. 2 in the layers panel, drag the layer name t...

  • Page 393

    Using the behavior actions that come with dreamweaver 393 show pop-up menu you use the show pop-up menu behavior to create or edit a dreamweaver pop-up menu or to open and modify a fireworks pop-up menu you’ve inserted in a dreamweaver document. You set options in the show pop-up menu dialog box to ...

  • Page 394

    394 chapter 18: using javascript behaviors to create a submenu item: in the show pop-up menu list, select the item you want to make into a submenu item, then do one of the following: • to indent an item in the menu list, click the indent item button. • to remove an indent, click the outdent item but...

  • Page 395

    Using the behavior actions that come with dreamweaver 395 setting advanced appearance options use options in the advanced tab to specify additional attributes of the menu cells. For example, you can set the width, height, cell spacing or padding of the menu button, indent text, and set border attrib...

  • Page 396

    396 chapter 18: using javascript behaviors modifying a pop-up menu the show pop-up menu behavior allows you to edit or update the contents of a pop-up menu. You can add, delete, or change menu items, rearrange them, and set where a menu is positioned relative to the triggering image or link. To open...

  • Page 397

    Using the behavior actions that come with dreamweaver 397 10 click ok. 11 check that the default event is the one you want. If it isn’t, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the show events for pop-up menu. Swap image restore ...

  • Page 398

    398 chapter 18: using javascript behaviors 9 click ok. If you are validating multiple fields when the user submits the form, the onsubmit event automatically appears in the events pop-up menu. 10 if you are validating individual fields, check that the default event is onblur or onchange . If it isn’...

  • Page 399: Part V

    Part v working with page code use the advanced coding tools in macromedia dreamweaver mx 2004 to create or modify pages. This part contains the following chapters: chapter 19, “setting up your coding environment,” on page 401 chapter 20, “coding in dreamweaver,” on page 415 chapter 21, “optimizing a...

  • Page 401: Chapter 19

    401 chapter 19 setting up your coding environment you can adapt the coding environment in macromedia dreamweaver mx 2004 so it fits the way you work. For example, you can change the way you view code, set up different keyboard shortcuts, or import and use your favorite tag library. This chapter cove...

  • Page 402

    402 chapter 19: setting up your coding environment to code and visually edit a page in the document window at the same time: 1 select view > code and design. The code appears in the top pane and the page appears in the bottom pane. 2 to display the page on top, select view > design view on top. 3 to...

  • Page 403

    Setting coding preferences 403 setting viewing preferences you can set word wrapping, display line numbers for the code, highlight invalid html code, set syntax coloring for code elements, and set indenting from the view > code view options menu. To set options for code view and the code inspector: ...

  • Page 404

    404 chapter 19: setting up your coding environment setting code hints preferences code hints let you quickly insert tag names, attributes, and values as you type code. For more information, see “using code hints” on page 423 . Tip: even if code hints are disabled, you can display a pop-up hint in co...

  • Page 405

    Setting validator preferences 405 setting code coloring preferences use the code coloring preferences to specify colors for general categories of tags and code elements, such as form-related tags or javascript identifiers. To set color preferences for a specific tag, edit the tag definition in the t...

  • Page 406

    406 chapter 19: setting up your coding environment to set preferences for the validator: 1 select edit > preferences (windows) or dreamweaver > preferences (macintosh). 2 select validator from the category list on the left. The validator preferences appear. 3 select tag libraries to validate against...

  • Page 407

    Managing tag libraries 407 to close the tag library editor and save changes: • click ok. To close the tag library editor without saving changes: • click cancel. Note: when you click cancel, all changes you’ve made in the tag library editor are discarded. If you deleted a tag or tag library, it’s res...

  • Page 408

    408 chapter 19: setting up your coding environment editing libraries, tags, and attributes you can use the tag library editor to set properties for a tag library and edit tags and attributes in a library—whether it be their attributes and attribute values, or their format (for easy identification in...

  • Page 409

    Managing tag libraries 409 to edit an attribute for a tag: 1 in the tag library editor (edit > tag libraries), expand a tag library in the tags box, expand a tag, and select a tag attribute. 2 in the attribute case pop-up menu, select default, lowercase, uppercase, or mixed case. If you select mixed...

  • Page 410

    410 chapter 19: setting up your coding environment importing custom tags into dreamweaver you can import custom tags into dreamweaver so that they become an integral part of the authoring environment. For example, when you start typing an imported custom tag in code view, a code hints menu appears, ...

  • Page 411

    Importing custom tags into dreamweaver 411 importing jsp tags from a file you can import a jsp tag library into dreamweaver from a variety of file types. To import a jsp tag library into dreamweaver: 1 open a jsp page in dreamweaver. 2 open the tag library editor (edit > tag libraries). 3 click the ...

  • Page 412

    412 chapter 19: setting up your coding environment using an external html editor with dreamweaver you can start an external html or text editor from dreamweaver to edit the source code for the current document and then switch back to dreamweaver to continue editing graphically. Dreamweaver detects a...

  • Page 413

    Using an external html editor with dreamweaver 413 to disable bbedit integration: 1 select edit > preferences or dreamweaver > preferences (mac os x), and select file types/ editors. 2 deselect enable bbedit integration and click ok. Setting file type and external editor preferences you can specify ...

  • Page 414

    414 chapter 19: setting up your coding environment.

  • Page 415: Chapter 20

    415 chapter 20 coding in dreamweaver macromedia dreamweaver mx 2004 offers a full-featured coding environment designed for any type of web development, from writing simple html pages to designing, testing, and deploying complex web applications. Note: for information on migrating from macromedia hom...

  • Page 416

    416 chapter 20: coding in dreamweaver about coding in dreamweaver the coding environment in dreamweaver allows you to write, edit, and test code (in a variety of languages) in your pages. Dreamweaver doesn’t change your hand-written code unless you enable specific options to rewrite certain kinds of...

  • Page 417

    About coding in dreamweaver 417 automatic code modification in dreamweaver you can set options that instruct dreamweaver to automatically clean up your hand-written code according to criteria that you specify. However, dreamweaver never rewrites your code unless the code rewriting options are enable...

  • Page 418

    418 chapter 20: coding in dreamweaver the following table describes the xhtml requirements that dreamweaver meets automatically. Xhtml requirement actions dreamweaver performs to meet this requirement when the character encoding of a document is other than the default utf-8, the document must have a...

  • Page 419

    About coding in dreamweaver 419 server-side includes a server-side include is a file that the server incorporates into your document when a browser requests your document from the server. When a visitor’s browser requests the document containing the include instruction, your server processes the inc...

  • Page 420

    420 chapter 20: coding in dreamweaver you cannot edit the included file directly in a document. To edit the contents of a server-side include, you must directly edit the file that you’re including. Note that any changes to the external file are automatically reflected in every document that includes...

  • Page 421

    About coding in dreamweaver 421 the following table lists the special characters in regular expressions, their meanings, and usage examples. To search for text containing one of the special characters in the table, “escape” the special character by preceding it with a backslash. For example, to sear...

  • Page 422

    422 chapter 20: coding in dreamweaver use parentheses to set off groupings within the regular expression to be referred to later. Then use $1, $2, $3, and so on in the replace with field to refer to the first, second, third, and later parenthetical groupings. Note: in the search for text box, to ref...

  • Page 423

    Writing and editing code 423 about server behavior code when you develop a dynamic page and select a server behavior from the server behaviors panel, dreamweaver inserts one or more code blocks into your page to make the server behavior work. If you manually change the code within a code block, you ...

  • Page 424

    424 chapter 20: coding in dreamweaver to edit a tag using code hints, do either of the following: • to replace an attribute with a different attribute, first delete the attribute and its value, then add a new attribute and its value as described in the previous procedure. • to change a value, first ...

  • Page 425

    Writing and editing code 425 4 a list of snippets appears. 5 select a snippet and assign a keyboard shortcut to it. For more information, see “customizing keyboard shortcuts” on page 57 . To share a snippet with other members of your team: 1 find the file corresponding to the snippet that you want t...

  • Page 426

    426 chapter 20: coding in dreamweaver editing tags with tag editors tag editors let you view, specify, and edit the attributes of a tag. To edit a tag with a tag editor: 1 right-click (windows) or control-click (macintosh) a tag in code view or an object in design view, and select edit tag from the ...

  • Page 427

    Writing and editing code 427 copying and pasting code you can copy and paste code from another application or from code view itself. You can copy and paste the code as text (so that it appears on the page when viewed in a browser) or as code (so that browsers interpret it as, for example, html tags)...

  • Page 428

    428 chapter 20: coding in dreamweaver viewing javascript and vbscript functions in your document you can view a list of all of the javascript or vbscript functions in your document, and you can jump to any function. To view the names of the script functions in a document: 1 view the document in code...

  • Page 429

    Searching and replacing tags and attributes 429 to search again without displaying the find and replace dialog box: • press f3 (windows) or command+g (macintosh). Related topics • “regular expressions” on page 420 saving search patterns you can save a search pattern and reuse it later. To save a sea...

  • Page 430

    430 chapter 20: coding in dreamweaver making quick changes to a code selection you can select code and then make quick changes to it using a context menu. To make quick changes to selected code: 1 in code view, select some code and right-click (windows) or control-click (macintosh). In the context m...

  • Page 431

    Using language-reference material 431 using language-reference material the reference panel provides you with a quick reference tool for markup languages, programming languages, and css styles; it provides information on the specific tags, objects, or styles that you are working with in code view (o...

  • Page 432

    432 chapter 20: coding in dreamweaver printing your code you can print your code to edit it offline, archive it, or distribute it. To print code: 1 open a page in code view. 2 select file > print code. 3 specify printing options, then click ok (windows) or print (macintosh)..

  • Page 433: Chapter 21

    433 chapter 21 optimizing and debugging your code you can use macromedia dreamweaver mx 2004 to optimize and debug your code. For example, you can validate your tags, make your document xhtml-compliant, or debug your coldfusion code. This chapter covers the following topics: • “cleaning up your code...

  • Page 434

    434 chapter 21: optimizing and debugging your code related topics • “setting code formatting preferences” on page 403 • “setting code coloring preferences” on page 405 verifying that tags and braces are balanced you can check to make sure the tags, parentheses (( )), braces ({ }), and square bracket...

  • Page 435

    Checking for browser compatibility 435 • an informational message indicates code that isn’t supported in a particular browser, but that has no visible effect; for example, the img tag’s galleryimg attribute isn’t supported in some browsers, but those browsers ignore that attribute, so it has no visi...

  • Page 436

    436 chapter 21: optimizing and debugging your code to view the check target browser report for the entire document: • in the target browser check menu in the document toolbar, select show all errors. The results panel group appears, with the target browser check panel selected. Errors are marked wit...

  • Page 437

    Validating your tags 437 to view a target browser check report in a browser: • click the browse report button in the target browser check panel. To fix an error: • remove the unsupported code, or change it to other code that’s supported by your target browsers. To specify that dreamweaver should ign...

  • Page 438

    438 chapter 21: optimizing and debugging your code making pages xhtml-compliant when you create a new page, you can make it xhtml-compliant. You can also make an existing html document xhtml-compliant. To create a new, xhtml-compliant document: 1 select file > new. The new document dialog box appear...

  • Page 439

    Using the coldfusion debugger (windows only) 439 using the coldfusion debugger (windows only) if you’re a coldfusion developer using macromedia coldfusion mx as your dreamweaver testing server, you can view coldfusion debugging information without leaving dreamweaver. Note: this feature is not suppo...

  • Page 440

    440 chapter 21: optimizing and debugging your code.

  • Page 441: Chapter 22

    441 chapter 22 editing code in design view macromedia dreamweaver mx 2004 lets you visually create and edit web pages without worrying about the underlying source code, but there are times when you might need to edit the code for greater control or to troubleshoot your web page. Dreamweaver lets you...

  • Page 442

    442 chapter 22: editing code in design view to use the property inspector: 1 click in text or select an object on the page. The property inspector for the text or object appears below the document window. If the property inspector is not visible, select window > properties. 2 make changes to the att...

  • Page 443

    Editing code with the quick tag editor 443 to edit or add an attribute value, do one of the following: • type a new value for the attribute in the attribute-value column, to the right of the attribute name. • if the attribute takes pre-defined values, select a value from the pop-up menu (or the colo...

  • Page 444

    444 chapter 22: editing code in design view editing an html tag with the quick tag editor you can use the quick tag editor to edit an html tag in your document. To edit an html tag with the quick tag editor: 1 select an object in design view. You can also select the tag you want to edit from the tag...

  • Page 445

    Editing code with the quick tag editor 445 using the hints menu while in the quick tag editor, you can access an attributes hint menu that lists all the valid attributes of the tag you are editing or inserting. You can also disable the hints menu or adjust the delay before the menu pops up in the qu...

  • Page 446

    446 chapter 22: editing code in design view editing code with the tag selector you can use the tag selector to select, edit, or remove tags without leaving design view. The tag selector is located in the status bar at the bottom of the document window and shows a series of tags, as follows: to edit ...

  • Page 447

    Editing scripts 447 to insert a client-side script in design view: 1 place the insertion point where you want the script. 2 select insert > script objects > script. The script dialog box appears. 3 complete the dialog box and click ok. For more information, click the help button in the dialog box. L...

  • Page 448

    448 chapter 22: editing code in design view working with server-side includes server-side includes are instructions to the web server to include a specified file in a web page before serving the page to the browser. For more information, see “server-side includes” on page 419 . You can use dreamweav...

  • Page 449

    Viewing and editing head content 449 using javascript behaviors the behaviors tab of the tag inspector allows you to easily attach javascript (client-side) behaviors to page elements. For more information, see “using the behavior actions that come with dreamweaver” on page 376 . Viewing and editing ...

  • Page 450

    450 chapter 22: editing code in design view.

  • Page 451: Part VI

    Part vi preparing to build dynamic sites if you’re building a dynamic web application, start by setting up an application server and connecting to a database. This part contains the following chapters: chapter 23, “setting up a web application,” on page 453 chapter 24, “database connections for cold...

  • Page 453: Chapter 23

    453 chapter 23 setting up a web application this chapter describes how to configure your system to build web applications in macromedia dreamweaver mx 2004. What you need to build web applications to build web applications in dreamweaver, you need the following software: • a web server (see “setting...

  • Page 454

    454 chapter 23: setting up a web application setting up a web server to run web applications, you need a web server. A web server is software that serves files in response to requests from web browsers. A web server is sometimes called an http server. Common web servers include microsoft internet in...

  • Page 455

    Setting up an application server 455 server technology application servers use different technologies. Dreamweaver supports five server technologies: coldfusion, asp.Net, asp, jsp, and php. For more information, see “choosing a server technology” in getting started help. The following table shows co...

  • Page 456

    456 chapter 23: setting up a web application installing an asp.Net application server to run asp.Net pages, you need the following software: • a windows 2000 or windows xp professional computer running iis 5 or later • the microsoft .Net framework, which you can download from the microsoft website d...

  • Page 457

    Setting up an application server 457 installing a jsp application server to run jsp pages, you need an application server that supports javaserver pages. Here are some popular choices: • macromedia jrun for windows, mac os x, linux, solaris, or unix. You can download a trial version of jrun from the...

  • Page 458

    458 chapter 23: setting up a web application creating a root folder for the application after signing up with a web hosting company or setting up the server software yourself, create a root folder for your web application on the computer running the web server. Make sure the folder is published by t...

  • Page 459

    Defining a dreamweaver site 459 defining a dreamweaver site after configuring your system to develop web applications, define a dreamweaver site to manage your files. Before you start, make sure you meet the following requirements: • you have access to a web server. The web server can be running on ...

  • Page 460

    460 chapter 23: setting up a web application defining a remote folder after defining a local folder, you can define a remote folder for your dreamweaver site. The remote folder is the folder you created for your web application on the web server (see “creating a root folder for the application” on p...

  • Page 461

    Connecting to a database 461 specifying where dynamic pages can be processed after defining the remote folder in dreamweaver, specify a folder where dynamic pages can be processed. Dreamweaver uses this folder to generate dynamic content and connect to databases while you work. Typically, you specif...

  • Page 462

    462 chapter 23: setting up a web application.

  • Page 463: Chapter 24

    463 chapter 24 database connections for coldfusion developers you can connect to databases when developing macromedia coldfusion applications with macromedia dreamweaver mx 2004. The chapter assumes you have set up a coldfusion web application (see chapter 23, “setting up a web application,” on page...

  • Page 464

    464 chapter 24: database connections for coldfusion developers creating a coldfusion data source before you can connect to a database, you must create a coldfusion data source in coldfusion administrator, the server’s management console. Note: if you’re running coldfusion 4 or 5 on a windows compute...

  • Page 465: Chapter 25

    465 chapter 25 database connections for asp.Net developers to use a database with an asp.Net application, you need to create a database connection in macromedia dreamweaver mx 2004. This chapter describes how to create the database connection. Note: if you’re developing microsoft active server pages...

  • Page 466

    466 chapter 25: database connections for asp.Net developers if you want to connect to a microsoft sql server database, you can use the managed data provider for sql server that comes with the .Net framework. This provider, which is optimized for sql server and is very fast, is installed when you ins...

  • Page 467

    Connecting to a database 467 to create a database connection using data link properties: 1 open an asp.Net page in dreamweaver, then open the databases panel (window > databases). The panel displays the connections defined for the site. 2 click the plus (+) button on the panel and select ole db conn...

  • Page 468

    468 chapter 25: database connections for asp.Net developers case 2: you use the .Net framework on a remote development server and you want to connect to a microsoft access database called mtnschool.Mdb located on the server in the following folder: d:\users\tara\projects\mtndrivingschool\data\mtnsch...

  • Page 469: Chapter 26

    469 chapter 26 database connections for asp developers to use a database with a microsoft active server pages (asp) application, you need to create a database connection in macromedia dreamweaver mx 2004. This chapter describes how to create the database connection. Note: if you’re developing asp.Ne...

  • Page 470

    470 chapter 26: database connections for asp developers you can use a data source name (dsn) or a connection string to connect to the database. A dsn is a one-word identifier, such as myconnection, that points to the database and contains all the information needed to connect to it. You define a dsn...

  • Page 471

    Creating a dsn connection 471 for the parameter value of your ole db provider, see your provider vendor’s documentation, or consult your system administrator. Related topics • “creating a dsn-less connection” on page 474 creating a dsn connection you can use a dsn to create an odbc connection betwee...

  • Page 472

    472 chapter 26: database connections for asp developers 3 click the plus (+) button on the panel and select data source name (dsn) from the pop-up menu. The data source name (dsn) dialog box appears. 4 enter a name for the new connection. Note: do not use any spaces or special characters in the name...

  • Page 473

    Creating a dsn connection 473 to create a database connection with a remotely defined dsn: 1 define a dsn on the remote system running your application server. For instructions, see the following articles on the microsoft website: ■ if the remote computer runs windows 98, see microsoft knowledge bas...

  • Page 474

    474 chapter 26: database connections for asp developers creating a dsn-less connection you can use a dsn-less connection to create an odbc or ole db connection between your web application and your database. You use a connection string to create this kind of connection. A connection string combines ...

  • Page 475

    Connecting to a database on an isp 475 connecting to a database on an isp if you’re an asp developer working with a commercial internet service provider (isp), you often don’t know the physical path of the files you upload, including your database file or files. If your isp doesn’t define a dsn for ...

  • Page 476

    476 chapter 26: database connections for asp developers you can experiment with the mappath method as follows. 1 open an asp page in dreamweaver and switch to code view (view > code). 2 enter the following expression in the page’s html code. Stringvariable)%> 3 use the mappath method to obtain a val...

  • Page 477

    Connecting to a database on an isp 477 5 enter the connection string and use the mappath method to supply the dbq parameter. Suppose the virtual path to your microsoft access database is /jsmith/data/statistics.Mdb. The connection string can be expressed as follows if you use vbscript as your script...

  • Page 478

    478 chapter 26: database connections for asp developers editing or deleting a database connection when you create a database connection, dreamweaver stores the connection information in an include file in the connections subfolder in the site’s local root folder. You can edit or delete the connectio...

  • Page 479: Chapter 27

    479 chapter 27 database connections for jsp developers to use a database with a javaserver pages (jsp) application, you need to create a database connection in macromedia dreamweaver mx 2004. This chapter describes how to create the connection. The chapter assumes you have set up a jsp application (...

  • Page 480

    480 chapter 27: database connections for jsp developers this section shows how to define connection parameters in dreamweaver using the oracle thin jdbc driver as an example. For the connection parameters of other drivers, consult the driver vendor’s documentation. The oracle thin jdbc driver suppor...

  • Page 481

    Connecting to a database 481 connecting to a database this section describes how to connect to a database when developing a jsp application in dreamweaver. The section assumes a jsp application server is running on a local or remote computer. For more information, see “setting up a web application” ...

  • Page 482

    482 chapter 27: database connections for jsp developers 4 specify the location of the jdbc driver you want to use. ■ if your jdbc driver is installed on the same computer as dreamweaver, select the using driver on this machine option. ■ if your jdbc driver is not installed on the same computer as dr...

  • Page 483

    Connecting through an odbc driver 483 checking for the odbc driver make sure an odbc driver for your database is installed on the windows computer running the jsp application server. To find out whether an odbc driver is installed, see “viewing the odbc drivers installed on a windows system” on page...

  • Page 484

    484 chapter 27: database connections for jsp developers creating an odbc connection before connecting through an odbc driver, make sure the appropriate odbc driver and the sun jdbc-odbc bridge driver are installed on the windows computer running the jsp application server . To connect through an odb...

  • Page 485

    Editing or deleting a database connection 485 8 click test. Dreamweaver attempts to connect to the database. If the connection fails, double-check the dsn and the other connection parameters. If the connection still fails, check the settings for the folder dreamweaver uses to process dynamic pages (...

  • Page 486

    486 chapter 27: database connections for jsp developers.

  • Page 487: Chapter 28

    487 chapter 28 database connections for php developers to use a database with a php application, you need to create a database connection in macromedia dreamweaver mx 2004. This chapter describes how to create the database connection. For php development, dreamweaver only supports the mysql database...

  • Page 488

    488 chapter 28: database connections for php developers editing or deleting a database connection when you create a database connection, dreamweaver stores the connection information in an include file in the connections subfolder in the site’s local root folder. You can edit or delete the connectio...

  • Page 489: Chapter 29

    489 chapter 29 troubleshooting database connections this chapter describes some common problems you might encounter after creating a database connection, and describes ways to fix them. Troubleshooting permissions problems one of the most common problems is insufficient folder or file permissions. I...

  • Page 490

    490 chapter 29: troubleshooting database connections to check or change the database file permissions (windows xp): 1 make sure you have administrator privileges on the computer. 2 in windows explorer, locate the database file or the folder containing the database, right-click the file or folder, an...

  • Page 491

    Troubleshooting microsoft error messages 491 troubleshooting microsoft error messages this section describes some common microsoft error messages and ways to troubleshoot them. These errors can occur if you use internet information server (iis) with a microsoft database system such as access or sql ...

  • Page 492

    492 chapter 29: troubleshooting database connections • in windows 2000, the time-out value may need to be changed for the access database dsn. To change the time-out value, select start > settings > control panel > administrative tools > data sources (odbc). Click the system tab, highlight the corre...

  • Page 493

    Troubleshooting microsoft error messages 493 for more information on this error, see “prb: asp ‘error the query is not updateable’ when you update table record,” in the microsoft knowledge base at http://support.Microsoft.Com/ default.Aspx?Scid=kb;en-us;q174640 . 80040e07—data type mismatch in crite...

  • Page 494

    494 chapter 29: troubleshooting database connections see the following web pages for lists of reserved words for common database systems: • microsoft access at http://support.Microsoft.Com/default.Aspx?Scid=kb;en-us;q209187 • microsoft sql server at http://msdn.Microsoft.Com/library/default.Asp?Url=...

  • Page 495: Part Vii

    Part vii making pages dynamic use the web application development tools in dreamweaver to add dynamic content to your pages. This part contains the following chapters: chapter 30, “optimizing the workspace for visual development,” on page 497 chapter 31, “the workflow for dynamic page design,” on pa...

  • Page 497: Chapter 30

    497 chapter 30 optimizing the workspace for visual development you can optimize the macromedia dreamweaver mx 2004 workspace to develop web applications visually. For example, you can use panels to rapidly build dynamic pages and you can view data live on your pages while you work. This chapter cont...

  • Page 498

    498 chapter 30: optimizing the workspace for visual development to find out what each button on the insert bar does, move your mouse over an icon. A tooltip appears: if you want to define sources of dynamic content for your page and add the content to the page, select window > bindings. The bindings...

  • Page 499

    Viewing your database within dreamweaver 499 if you want to inspect, add, or modify code for javabeans, macromedia coldfusion components, or web services, select window > components. The components panel appears. Note: the components panel is enabled only if you open a coldfusion, a jsp, or an asp.N...

  • Page 500

    500 chapter 30: optimizing the workspace for visual development viewing live data in design view dreamweaver can display the dynamic content of a page while you work on the page in design view. For more information on design view, see “switching between views in the document window” on page 39 . To ...

  • Page 501

    Viewing live data in design view 501 the following illustration shows the same page with live data turned on: related topics • “copying dependent files” on page 502 • “providing the page with expected parameters” on page 503 • “refreshing the page” on page 504 • “troubleshooting live data view” on p...

  • Page 502

    502 chapter 30: optimizing the workspace for visual development related topics • “viewing live data in design view” on page 500 • “working in design view without live data” on page 505 copying dependent files some dynamic pages rely on other files to work properly. You must upload all related files,...

  • Page 503

    Viewing live data in design view 503 providing the page with expected parameters to generate dynamic content, some pages require parameters from the user—for example, a page needs the id number of a record to find and display that record. Without that data, dreamweaver cannot generate dynamic conten...

  • Page 504

    504 chapter 30: optimizing the workspace for visual development refreshing the page to refresh a page: • with live data turned on, click the refresh button (the circle-arrow icon) on the document toolbar if you want to refresh the page after making a change that affects dynamic content. You can also...

  • Page 505

    Previewing dynamic pages in a browser 505 working in design view without live data if live data is turned off or if you’re temporarily disconnected from your application server, you can still work on your dynamic pages in design view. Dreamweaver uses placeholders to visually represent dynamic conte...

  • Page 506

    506 chapter 30: optimizing the workspace for visual development restricting database information displayed in dreamweaver advanced users of large database systems like oracle should restrict the number of database items retrieved and displayed by dreamweaver at design time. An oracle database may co...

  • Page 507: Chapter 31

    507 chapter 31 the workflow for dynamic page design a key benefit provided by macromedia dreamweaver mx 2004 is the ability to create dynamic websites without having to be experienced in programming languages. The dreamweaver visual tools let you develop dynamic websites without having to hand code ...

  • Page 508

    508 chapter 31: the workflow for dynamic page design designing the page a key step in designing any website—whether static or dynamic—is the visual design of the page. When adding dynamic elements to a web page, the design of the page becomes crucial to its usability. You should carefully consider h...

  • Page 509

    Creating a source of dynamic content 509 to use a content source in dreamweaver, you use the bindings panel to create the data source. The bindings panel, shown below, lets you create data sources for databases and different variable types. When you create a data source, it is stored in the bindings...

  • Page 510

    510 chapter 31: the workflow for dynamic page design adding dynamic content to a web page after you define a recordset or other data source, and add it to the bindings panel, you can insert the dynamic content the recordset represents into the page. The dreamweaver menu-driven interface makes adding...

  • Page 511

    Testing and debugging the page 511 dreamweaver provides a point-and-click interface that makes applying dynamic content and complex behaviors to a page as easy as inserting textual and design elements. The following server behaviors are available: • define a recordset from an existing database. The ...

  • Page 512

    512 chapter 31: the workflow for dynamic page design testing dynamic content dreamweaver allows you to preview and edit dynamic content using the live data window. Note: links don’t work in the live data window. To test your links, use the dreamweaver preview in browser feature. (see “checking for b...

  • Page 513

    Testing and debugging the page 513 editing dynamic content on a page you can modify or remove dynamic content from a page by changing the server behavior that provides the content, or deleting the behavior altogether. For example, you can edit a recordset server behavior to return more records to th...

  • Page 514

    514 chapter 31: the workflow for dynamic page design.

  • Page 515: Chapter 32

    515 chapter 32 obtaining data for your page web-based applications and dynamic websites require a content source from which to retrieve data. Both data and data sources can take many forms. Typically, data consists of text or numerical information returned to a web page, and displayed in some form t...

  • Page 516

    516 chapter 32: obtaining data for your page to learn more about databases, see appendix a, “beginner’s guide to databases,” on page 741 . Accessing data stored in a database web pages can’t directly access the data stored in a database. Instead, they interact with a recordset. A recordset is a subs...

  • Page 517

    Collecting data submitted by users 517 form parameters form parameters are sent to the server using an html form using either the post or get method. When using the post method, parameters are sent in the body of the message. In contrast, the get method appends parameters to the requested url. You c...

  • Page 518

    518 chapter 32: obtaining data for your page url parameters a url parameter is a name/value pair appended to a url. The parameter begins with a question mark (?) and takes the form name=value . If more than one url parameter exists, each parameter is separated by an ampersand (&). The following exam...

  • Page 519

    Collecting data submitted by users 519 typical uses of url parameters include personalizing websites based on a user’s preferences. For example, a url parameter consisting of a user name and password can be used to authenticate a user, displaying only information that user has subscribed to. Common ...

  • Page 520

    520 chapter 32: obtaining data for your page retrieving form and url parameters after a form or url parameter is created, dreamweaver can retrieve the value and use it in a web application. For more information, see “defining url parameters” on page 534 . After defining the form or url parameter in ...

  • Page 521

    Accessing data stored in session variables 521 to allow for the creation of complex web applications, and the storage of user-supplied data across all of a site’s pages, most application server technologies include support for session management. Session management allows web applications to maintai...

  • Page 522

    522 chapter 32: obtaining data for your page storing url parameters in session variables a typical example of storing url parameters in session variables is a product catalog that uses hard-coded url parameters created using a hypertext link to send product information back to the server to be store...

  • Page 523

    Accessing data stored in session variables 523 coldfusion asp and asp.Net related topics • “understanding session variables” on page 520 • “collecting information to store in session variables” on page 521 • “example of information stored in session variables” on page 523 • “retrieving data from ses...

  • Page 524

    524 chapter 32: obtaining data for your page related topics • “understanding session variables” on page 520 • “collecting information to store in session variables” on page 521 • “storing information in session variables” on page 522 • “retrieving data from session variables” on page 524 retrieving ...

  • Page 525: Chapter 33

    525 chapter 33 defining sources of dynamic content dynamic websites require a data source from which to retrieve and display dynamic content. Macromedia dreamweaver mx 2004 lets you use databases, request variables, url variables, server variables, form variables, stored procedures, and other source...

  • Page 526

    526 chapter 33: defining sources of dynamic content about dynamic content sources a dynamic content source is a store of information from which you can retrieve and display dynamic content for use in a web page. Sources of dynamic content include not only information stored in a database, but values...

  • Page 527

    About dynamic content sources 527 note: microsoft asp.Net refers to a recordset as a dataset. If you are working with asp.Net document types, the dialog boxes and menu choices specific to asp.Net use the label dataset. The dreamweaver documentation generically refers to both types as recordsets, but...

  • Page 528

    528 chapter 33: defining sources of dynamic content inserting code within sql statements when inserting code within sql statements written for asp.Net, you must enclose all strings in quotes ( " " ), and enclose the code in parentheses ( ). Select * from employees where hiredate > "+ (request.Querys...

  • Page 529

    About dynamic content sources 529 asp and coldfusion application variables in asp and coldfusion, you can use application variables to store and display information that is maintained for the lifetime of the application and persists from user to user. The application’s lifetime lasts from the time t...

  • Page 530

    530 chapter 33: defining sources of dynamic content javabeans and jsp javabeans components are architectural elements of multitier jsp applications. Javabeans are typically used as part of a middle “business-logic” layer meant to separate the presentation logic from data-access logic. In these appli...

  • Page 531

    Defining a recordset 531 creating a recordset without writing sql this section describes how to define a recordset using dreamweaver’s recordset dialog box, which allows you to create a recordset without having to manually enter sql statements. Defining a recordset using this method can be as easy a...

  • Page 532

    532 chapter 33: defining sources of dynamic content creating an advanced recordset by writing sql the advanced recordset dialog box allows you to write your own sql statements, or use the graphical database items tree to create a sql statement note: if you are writing sql statements for asp.Net docu...

  • Page 533

    Defining a recordset 533 creating sql queries using the database items tree instead of manually typing sql statements into the sql text box, you can use the database item’s point-and-click interface to create complex sql queries. The database items tree lets you select database objects and link them...

  • Page 534

    534 chapter 33: defining sources of dynamic content defining url parameters url parameters store retrieved information input by users. Before you begin, make sure you pass a form or url parameter to the server. For more information, see “url parameters” on page 518 and “understanding url and form pa...

  • Page 535

    Defining form parameters 535 defining form parameters form parameters store retrieved information that is included in the http request for a web page. If you create a form that uses the post method, the data submitted by the form is passed to the server. Before you begin, make sure you pass a form p...

  • Page 536

    536 chapter 33: defining sources of dynamic content defining session variables you can use session variables to store and display information maintained for the duration of a user’s visit (or session). The server creates a different session object for each user and maintains it for a set period of t...

  • Page 537

    Defining application variables for asp and coldfusion 537 defining application variables for asp and coldfusion in asp and coldfusion, you can use application variables to store and display information that is maintained for the lifetime of the application and persists from user to user. Note: there...

  • Page 538

    538 chapter 33: defining sources of dynamic content using a variable as a data source for a coldfusion recordset when you define a recordset for a page in the bindings panel, dreamweaver enters the name of the coldfusion data source in the cfquery tag on the page. For more flexibility, you can store...

  • Page 539

    Defining server variables 539 to define a server variable for an asp page: 1 open the bindings panel (window > bindings). 2 click the plus (+) button and select request variable from the pop-up menu. The request variable dialog box is displayed. Select one of the request collections from the type po...

  • Page 540

    540 chapter 33: defining sources of dynamic content defining php server variables you can define a php server variable as a source of dynamic content for php document types. To define a server variable for a php page: 1 open the bindings panel (window > bindings). 2 click the plus (+) button and sel...

  • Page 541

    Defining server variables 541 • on the system running the jsp application server, the bean class must reside in the application server’s class path. (your application server uses this copy of the class at runtime.) the application server’s class path varies from application server to application ser...

  • Page 542

    542 chapter 33: defining sources of dynamic content to define a javabean collection for a jsp page: 1 select window > bindings to display the bindings panel. 2 click the plus (+) button and select javabean collection from the pop-up menu. The javabean collection dialog box appears. 3 complete the di...

  • Page 543

    Copying a recordset from one page to another page 543 changing or deleting content sources you can change or delete any existing source of dynamic content—that is, any content source listed in the bindings panel. Changing or deleting a content source in the bindings panel does not change or delete a...

  • Page 544

    544 chapter 33: defining sources of dynamic content.

  • Page 545: Chapter 34

    545 chapter 34 adding dynamic content to web pages this chapter describes the most efficient ways of making various page elements dynamic. Once you define one or more sources of dynamic content, you can use the sources to add dynamic content to the page. Content sources can include a column in a rec...

  • Page 546

    546 chapter 34: adding dynamic content to web pages about adding dynamic content you can add dynamic content to a page by selecting a content source in the bindings panel. Dreamweaver inserts a server-side script in the page’s code instructing the server to transfer the data from the content source ...

  • Page 547

    Making text dynamic 547 making text dynamic you can replace existing text with dynamic text, or you can place dynamic text at a given insertion point on the page. To add dynamic text: 1 open the bindings panel by choosing window > bindings. 2 make sure the bindings panel lists the content source you...

  • Page 548

    548 chapter 34: adding dynamic content to web pages related topics • “about adding dynamic content” on page 546 • “dynamic text” on page 546 making images dynamic you can make images on your page dynamic. For example, suppose you design a page to display items for sale at a charity auction. Each pag...

  • Page 549

    Making html attributes dynamic 549 making html attributes dynamic you can dynamically change the appearance of a page by binding html attributes to data. For example, you can change the background image of a table by binding the table’s background attribute to a field in a recordset. You can bind ht...

  • Page 550

    550 chapter 34: adding dynamic content to web pages 3 to make the attribute’s value dynamic, click the attribute; then click the lightning-bolt icon or folder icon at the end of the attribute’s row. If you clicked the lightning bolt icon, a list of data sources appears. Here’s an example: if you cli...

  • Page 551

    Making activex, flash, and other object parameters dynamic 551 making activex, flash, and other object parameters dynamic you can make the parameters of java applets and plug-ins dynamic, as well as the parameters of activex, macromedia flash, shockwave, director, and generator objects. Before start...

  • Page 552

    552 chapter 34: adding dynamic content to web pages editing dynamic content to edit a server behavior providing dynamic content, double-click the server behavior in the server behaviors panel. The same dialog box you used to define the original data source appears. Make your changes in the dialog bo...

  • Page 553

    Creating dynamic pages in a contribute site 553 creating dynamic pages in a contribute site when a contribute user edits a page containing dynamic content or invisible elements (such as scripts and comments), contribute displays the dynamic content and invisible elements as yellow markers. By defaul...

  • Page 554

    554 chapter 34: adding dynamic content to web pages.

  • Page 555: Chapter 35

    555 chapter 35 displaying database records displaying database records involves retrieving information stored in a database or other source of content, and rendering that information to a web page. Macromedia dreamweaver mx 2004 provides many methods of displaying dynamic content, and provides sever...

  • Page 556

    556 chapter 35: displaying database records server behaviors and formatting elements dreamweaver provides the following server behaviors and formatting elements to let you enhance the display of dynamic data: formats let you apply different types of numerical, monetary, date/time, and percentage val...

  • Page 557

    About displaying database records 557 recordset navigation links require the following dynamic elements: • a recordset to navigate • dynamic content on the page to display the record or records • text or images on the page to serve as a clickable navigation bar • a “move to record” set of server beh...

  • Page 558

    558 chapter 35: displaying database records after you have added a recordset to a page, and have created a navigation bar, you must apply individual server behaviors to each navigation element. For example, a typical recordset navigation bar contains representations of the following links matched to...

  • Page 559

    About displaying database records 559 the following example illustrates how the repeat region server behavior is applied to a table row, and specifies that nine records are displayed per page. The row itself displays four different records: city, state, street address, and zip code. To create a tabl...

  • Page 560

    560 chapter 35: displaying database records simple record counters you can create a simple record counter using the recordset navigation status server object. This server object inserts a complete record counter that you can apply text formatting to using dreamweaver page-design tools. To learn more...

  • Page 561

    About displaying database records 561 the asp.Net datagrid web control the dreamweaver datagrid allows you to insert an asp.Net datagrid web control. The datagrid control renders tables as multi-column grids, and can include different column types (heterogeneous columns) for defining the layout of c...

  • Page 562

    562 chapter 35: displaying database records using predefined data formats dreamweaver comes with several predefined data formats that you can apply to dynamic data elements. The data format styles include date and time, currency, numerical, and percentage formats. To apply data formats to dynamic co...

  • Page 563

    Creating recordset navigation links 563 creating new data formats you can create new data formats to suit any type of dynamic data you want to display. To create a new data format: 1 open a page containing dynamic data in design view. 2 select the dynamic data you want to create a custom format for....

  • Page 564

    564 chapter 35: displaying database records the image version of the recordset navigation bar looks like this: before placing the navigation bar on the page, make sure the page contains a recordset to navigate and a page layout in which to display the records. After placing the navigation bar on the...

  • Page 565

    Creating recordset navigation links 565 creating a custom recordset navigation bar you can create a custom recordset navigation bar that uses more complex layout and formatting styles than that offered by the simple table used by the recordset navigation bar server object. To create your own records...

  • Page 566

    566 chapter 35: displaying database records showing and hiding regions based on recordset results dreamweaver includes a set of server behaviors that let you show or hide a region based on the results returned by a recordset. To learn more about the show region server behaviors, and how they can be ...

  • Page 567

    Creating a table with a repeat region server behavior 567 5 select the number of records to display per page. 6 click ok. In the document window, a thin, tabbed, gray outline appears around the repeated region. In the live data window (view > live data), the gray outline disappears and the selection...

  • Page 568

    568 chapter 35: displaying database records 4 input values for the table border, cell padding, and cell spacing if desired. The dynamic table dialog box retains the values you enter for table borders, cell padding, and cell spacing. If you are working on a project that will need several dynamic tabl...

  • Page 569

    Creating a record counter 569 creating a record counter record counters let users know where they are within a given set of records relative to the total number of records returned. For this reason record counters are a useful behavior that can significantly add to the usability of a web page. To le...

  • Page 570

    570 chapter 35: displaying database records to create a custom record counter: 1 in design view, enter the counter’s text on the page. The text can be anything you want. For example: displaying records thru of . 2 place the insertion point at the end of the text string. 3 open the server behaviors p...

  • Page 571

    Creating asp.Net datagrid and datalist web controls 571 to add a datagrid object to a page: 1 open the server behaviors panel (window > server behaviors), click the plus (+) button and select datagrid. The datagrid dialog box appears. 2 complete the datagrid dialog box and click ok. For more informa...

  • Page 572

    572 chapter 35: displaying database records to add a datalist object to your page: 1 open the server behaviors panel (window > server behaviors), click the plus (+) button, and select datalist. The datalist dialog box appears. 2 complete the datalist dialog box and click ok. For more information, cl...

  • Page 573: Chapter 36

    573 chapter 36 using coldfusion components macromedia coldfusion mx components (cfcs) let you encapsulate application and business logic into self-contained, reusable units. Cfcs also provide a fast, easy way to create web services. You can use macromedia dreamweaver mx 2004 to create and modify cfc...

  • Page 574

    574 chapter 36: using coldfusion components suppose an online store calculates shipping charges based on the price of orders. For orders under $20, the shipping charge is $4; for orders between $20 and $40, the shipping charge is $6, and so on. You could insert the logic for calculating the shipping...

  • Page 575

    Viewing coldfusion components in dreamweaver 575 viewing coldfusion components in dreamweaver dreamweaver provides a way to visually examine the coldfusion components defined for your site. Dreamweaver reads the .Cfc files located on the server and displays information about them in an easy-to-navig...

  • Page 576

    576 chapter 36: using coldfusion components editing coldfusion components in dreamweaver dreamweaver provides a streamlined way of editing the code of the coldfusion components defined for your site. For example, you can add, change, or delete any component function without leaving dreamweaver. To u...

  • Page 577

    Building web pages that use coldfusion components 577 building web pages that use coldfusion components one way to use a component function in your web pages is to write code in the page that invokes the function when the page is requested. You can use dreamweaver to help you write this code. Note: ...

  • Page 578

    578 chapter 36: using coldfusion components.

  • Page 579: Chapter 37

    579 chapter 37 using web services web services are an emerging technology that allow web pages to access distributed applications. By offering both access to information and application functionality as a service, web services can be delivered and paid for as streams of services that allow ubiquitou...

  • Page 580

    580 chapter 37: using web services about web services web services allow applications to communicate and share information across the internet, regardless of operating system or programming language. Examples of web services, and the information and functionality they provide, include the following:...

  • Page 581

    About web services 581 3 after locating and selecting a web service that provides the functionality you need, enter the url of the wsdl in the adding a web service dialog box. 4 generate a proxy for the web service from the wsdl description of the service publisher. To embed a web service into a web...

  • Page 582

    582 chapter 37: using web services communication between the web page requesting the service and the web service itself uses the simple object access protocol (soap). Soap is an xml-based protocol that lets a web client access and invoke the web service’s methods and parameters. Related topics • “ad...

  • Page 583

    Configuring proxy generators for use with dreamweaver 583 configuring proxy generators for use with dreamweaver when you install a web service proxy generator, you must configure it to work with dreamweaver. To learn more about proxy generators, see “about proxy generators” on page 582 . To configur...

  • Page 584

    584 chapter 37: using web services 4 click new, select the proxy generator from the pop-up menu, and click done. If the proxy generator you want to use does not appear in the list, select default proxy generator to display the default proxy generator dialog box. The default proxy generator dialog bo...

  • Page 585

    Adding a web service proxy using the wsdl description 585 adding a web service proxy using the wsdl description after you have specified a proxy generator (see “about proxy generators” on page 582 ) and configured the web service server models you want to support, you need to find a web service that...

  • Page 586

    586 chapter 37: using web services adding a web service to a page after selecting a web service, generating its proxy, and adding it to the components panel, you can insert it into a page. The illustration below shows the components panel with the web service proxy helloworld added. The helloworld p...

  • Page 587

    Adding a web service to a page 587 3 if you want to bind a return value to a visual element, switch to design view and place a visual element on the page that can accept data binding. Then switch back to code view and enter the appropriate code to bind the returned value to the visual element. When ...

  • Page 588

    588 chapter 37: using web services editing the uddi web service site list the web service chooser provides a list of uddi-based web service directories from which you can select web services. You can edit this list to add or delete web service directories. For more information, see “finding web serv...

  • Page 589: Chapter 38

    589 chapter 38 adding custom server behaviors macromedia dreamweaver mx 2004 comes with a set of built-in server behaviors that lets you easily add dynamic capabilities to a site. If you want to extend dreamweaver’s functionality, you can create new server behaviors to suit your development needs, o...

  • Page 590

    590 chapter 38: adding custom server behaviors server behaviors if you are a developer proficient in macromedia coldfusion, asp.Net, javascript, vbscript, php, or java, you can write your own server behaviors. The steps to create a server behavior include the following tasks: • writing one or more c...

  • Page 591

    About custom server behaviors 591 conditions and repeating elements in code blocks if you want the code block, or a portion of a code block, to be executed only if a certain condition or conditions apply, use the following syntax: expression1) @> code block1 [expression2) @> code block2]* [ code blo...

  • Page 592

    592 chapter 38: adding custom server behaviors the code block insert options, and the relative positioning options available for each, are shown in the table below. If you want to specify a custom position, you must assign a weight to the code block. Use the custom position option when you need to i...

  • Page 593

    About custom server behaviors 593 to create a parameter that lets the user supply the necessary value: 1 enclose the formparam string in parameter markers: 2 create a dialog box that prompts the designer to supply the name of the form object. For more information, see “creating a dialog box for a cu...

  • Page 594

    594 chapter 38: adding custom server behaviors if the server behavior uses a recordset from a callable object, it uses the following code instead. @@callablename@@.Execute(); @@rsname@@ = @@callablename@@.Getresultset(); if the server behavior is added for a callable object, the user would enter a v...

  • Page 595

    About custom server behaviors 595 the following example shows how such repeating code blocks can be used to create server behaviors (the example is a coldfusion behavior used to access a stored procedure): datasource=#mm_connection_dsn# username=#mm_connection_username# password=#mm_connection_passw...

  • Page 596

    596 chapter 38: adding custom server behaviors using the loop directive’s _length and _index variables the loop directive includes two built-in variables that you can use for embedded if conditions. The variables are: _length and _index . The _length variable evaluates to the length of the arrays pr...

  • Page 597

    About custom server behaviors 597 related topics • “about custom server behaviors” on page 589 • “server behaviors” on page 590 testing server behaviors the macromedia exchange recommends performing the following tests on each server behavior you create: • apply the behavior from the server behavior...

  • Page 598

    598 chapter 38: adding custom server behaviors installing third-party server behaviors you can download and install server behaviors created by independent developers from the macromedia exchange website. To access macromedia exchange: 1 in dreamweaver select help > dreamweaver exchange. Your browse...

  • Page 599

    Using the server behavior builder 599 5 click ok. The server behavior builder dialog box is displayed. 6 to add a new code block, click the plus (+) button. The create a new code block dialog box is displayed..

  • Page 600

    600 chapter 38: adding custom server behaviors 7 enter a name for the code block you want to create and click ok. The name you entered in the dialog box appears in the server behavior builder, with the appropriate scripting tags visible in the code block text box. 8 in the code block text box, enter...

  • Page 601

    Using parameters in server behaviors 601 11 you can specify additional information about the server you are creating by using the advanced options panel. 12 click the advanced button to display more options. 13 if you need to create more code blocks, repeat steps 7 through 13 as needed. 14 if the se...

  • Page 602

    602 chapter 38: adding custom server behaviors positioning code blocks when you create code blocks using the server behavior builder (see “using the server behavior builder” for more information), you must specify where to insert them in the page’s html code. The insert code and relative position po...

  • Page 603

    Creating a dialog box for a custom server behavior 603 related topics • “about custom server behaviors” on page 589 • “code block positioning within web pages” on page 591 • “using the server behavior builder” on page 598 creating a dialog box for a custom server behavior server behaviors often requ...

  • Page 604

    604 chapter 38: adding custom server behaviors to create a dialog box for a server behavior: 1 in the server behavior builder, click next. A dialog box appears listing all of the designer-supplied parameters you defined in your code. 2 (optional) you can change the display order of the dialog box co...

  • Page 605

    Editing and modifying server behaviors 605 editing and modifying server behaviors you can edit any server behavior created with the server behavior builder, including server behaviors you download from the macromedia exchange website, and other third-party developers. If you apply a server behavior ...

  • Page 606

    606 chapter 38: adding custom server behaviors 5 (optional) if you want, change where the code block is inserted in the page’s html code by choosing another option in the insert code pop-up menu. For instructions, see “positioning code blocks” on page 602 . 6 if the modified code does not contain an...

  • Page 607: Chapter 39

    607 chapter 39 creating forms you can use macromedia dreamweaver mx 2004 to create forms with text fields, password fields, radio buttons, checkboxes, pop-up menus, clickable buttons, and other form objects. Dreamweaver can also write code that validates the information a visitor provides. For examp...

  • Page 608

    608 chapter 39: creating forms client-side role of forms forms support the client side of the client-server relationship. When a visitor enters information into a form displayed in a web browser (the client) and clicks the submit button, the information is sent to the server where a server-side scri...

  • Page 609

    About forms 609 note: passwords and other information sent to a server using a password field are not encrypted. The transferred data can be intercepted and read as alphanumeric text. For this reason, you should always provide encryption for data you want to keep secure. Hidden fields store informat...

  • Page 610

    610 chapter 39: creating forms jump menus are navigational lists or pop-up menus that let you insert a menu in which each option links to a document or file. File fields let users browse to a file on their computer and upload the file as form data. Image fields let you insert an image in a form. Ima...

  • Page 611

    Creating html forms 611 creating html forms this section describes how to create html forms in dreamweaver. You can also use dreamweaver to create asp.Net web forms. For more information, see “creating asp.Net forms” on page 623 . To create an html form: 1 open a page and place the insertion point w...

  • Page 612

    612 chapter 39: creating forms 5 insert form objects. Place the insertion point where you want the form object to appear in the form, and then select the object in the insert > form menu, or in the forms category of the insert bar. For more information, see “inserting html form objects” on page 613 ...

  • Page 613

    Inserting html form objects 613 inserting html form objects you can use dreamweaver to quickly insert html form objects into your forms. If you’re working on an asp.Net web application, you can use dreamweaver to quickly insert asp.Net form controls. For more information, see “adding asp.Net form co...

  • Page 614

    614 chapter 39: creating forms inserting html radio buttons use html radio buttons when you want users to select only one choice from a set of options. Radio buttons are typically used in groups. All radio buttons in a group must have the same name. Note: use checkboxes when you want let users selec...

  • Page 615

    Inserting html form objects 615 related topics • “creating a dynamic html form menu” on page 617 • “making existing html form menus dynamic” on page 618 inserting standard buttons buttons control form operations. Use a button to submit form data to the server or to reset the form. Standard form butt...

  • Page 616

    616 chapter 39: creating forms inserting hidden fields you can use hidden fields to store and submit information not entered by the user. The information is hidden from the user. To create a hidden field: 1 in design view, place the insertion point inside the form outline. 2 select insert > form > h...

  • Page 617

    Inserting dynamic html form objects 617 inserting dynamic html form objects you can insert html form objects whose initial state is determined by the server when the page is requested from the server, not by the form designer at design time. Related topics • “dynamic form objects” on page 610 • “cre...

  • Page 618

    618 chapter 39: creating forms making existing html form menus dynamic you can make an existing html form menu or list menu dynamic. This section deals with html form objects. For asp.Net menu objects such as dropdownlist or listbox controls, see “making an existing asp.Net menu dynamic” on page 624...

  • Page 619

    Inserting dynamic html form objects 619 to dynamically preselect an html checkbox: 1 select a checkbox form object on your page. 2 in the property inspector, click the dynamic button. The dynamic checkbox dialog box appears. 3 complete the dialog box and click ok. For instructions, click the help bu...

  • Page 620

    620 chapter 39: creating forms validating html form data dreamweaver can add javascript code that checks the contents of specified text fields to ensure that the user has entered the correct type of data. Note: this feature only works with html forms. For asp.Net forms, you can insert asp.Net valida...

  • Page 621

    Attaching custom scripts to html form buttons 621 attaching custom scripts to html form buttons some forms use javascript or vbscript to perform form processing or some other action on the client as opposed to sending the form data to the server for processing. You can use dreamweaver to configure a...

  • Page 622

    622 chapter 39: creating forms creating accessible html forms when you insert an html form object and you’ve selected the form object option in accessibility preferences, dreamweaver prompts you to enter information to make the form object accessible. You can also change accessibility attributes aft...

  • Page 623

    Creating asp.Net forms 623 creating asp.Net forms you can create asp.Net forms in the dreamweaver design environment and then modify the properties of the form controls without hand-coding them. Adding asp.Net form controls to a page you can use the visual design environment in dreamweaver to add as...

  • Page 624

    624 chapter 39: creating forms creating a dynamic asp.Net menu you can dynamically populate an asp.Net menu control such as dropdownlist or listbox with entries from a database. Before you begin, you must define a dataset or other source of dynamic content for the menu. For more information, see “de...

  • Page 625

    Creating asp.Net forms 625 displaying dynamic content in an asp.Net textbox control you can display dynamic content in asp.Net textbox form controls. Before you begin, you must define a dataset or other source of dynamic content for the textbox. For more information, see “defining a recordset” on pa...

  • Page 626

    626 chapter 39: creating forms dynamically preselecting an item in an asp.Net radiobuttonlist you can let the server decide whether to select a radio button in a radiobuttonlist control when the page is loaded in a browser. Before you begin, you must insert at least one asp.Net radiobuttonlist contr...

  • Page 627: Part Viii

    Part viii developing applications rapidly web applications often feature pages that let users search a database; pages that let users insert, update, or delete data in a database; and pages that restrict access to a website. You can quickly build any of these pages with macromedia dreamweaver mx. Th...

  • Page 629: Chapter 40

    629 chapter 40 building coldfusion applications rapidly you can use the tools in macromedia dreamweaver mx 2004 to build a coldfusion web application rapidly and with little or no coding. About rapid application development (all servers) rapid application development (rad) is a software development ...

  • Page 630

    630 chapter 40: building coldfusion applications rapidly about master/detail pages a master page is a page that lists records and corresponding links for each record. When the user clicks a link, a detail page opens displaying more information about the record. For example, here’s a master page from...

  • Page 631

    About rapid application development (all servers) 631 when a user clicks one of the linked location names, a detail page opens: a results page is a common type of master page. However, unlike the master page described in this section, the list of records on a results page is determined not by you, t...

  • Page 632

    632 chapter 40: building coldfusion applications rapidly optionally, you can add a detail page. A detail page gives users more information about a particular record on the results page. If you use asp.Net, you can combine both the search page and the results page into one page. If you have only one ...

  • Page 633

    About rapid application development (all servers) 633 asp command objects an asp command object is a server object that performs some operation on a database. The object can contain any valid sql statement, including one that returns a recordset, or one that inserts, updates, or deletes records in a...

  • Page 634

    634 chapter 40: building coldfusion applications rapidly the setstring method assigns the value to the variable and takes two arguments. The first argument specifies the affected variable by its position (here, the first position in the sql statement). The second argument specifies the variable’s va...

  • Page 635

    Building master/detail pages (coldfusion) 635 3 open the master page in design view and select insert > application objects > master detail page set. The master detail page set dialog box appears. 4 complete the dialog box. For more information, click the help button in the dialog box. 5 click ok. T...

  • Page 636

    636 chapter 40: building coldfusion applications rapidly you can also add the building blocks all at once using the master/detail page set application object. For more information, see “building master/detail pages in one operation (coldfusion, asp, jsp, php)” on page 634 . This section covers the s...

  • Page 637

    Building master/detail pages (coldfusion) 637 typically, the recordset on the master page extracts a few columns from a database table while the recordset on the detail page extracts more columns from the same table to provide the extra detail. The recordset can be defined by the user at runtime. Fo...

  • Page 638

    638 chapter 40: building coldfusion applications rapidly creating the links to the detail page (coldfusion) after adding the dynamic table to the master page , you must create links that open the detail page. This section describes how to create the links. The next section describes how to modify th...

  • Page 639

    Building master/detail pages (coldfusion) 639 the expression after the equal sign is the value of the parameter. In this case, the value is generated by a coldfusion expression that returns a record id from the recordset. A different id is generated for each row in the dynamic table. In the coldfusi...

  • Page 640

    640 chapter 40: building coldfusion applications rapidly 5 complete the filter section as follows to find and display the record specified in the url parameter passed by the master page: ■ from the first pop-up menu in the filter area, select the column in the recordset containing values that match ...

  • Page 641

    Building search/results pages (coldfusion, asp, jsp, php) 641 building search/results pages (coldfusion, asp, jsp, php) you can use dreamweaver to build a set of pages to let users search your database. The method you use is identical for coldfusion, asp, jsp, and php pages. For information on build...

  • Page 642

    642 chapter 40: building coldfusion applications rapidly building the results page when the user clicks the form’s search button, the search parameters are sent to a results page on the server. The results page on the server, not the search page on the browser, is responsible for retrieving records ...

  • Page 643

    Building search/results pages (coldfusion, asp, jsp, php) 643 5 in the table pop-up menu, select the table to be searched in the database. Note: in a single-parameter search, you can search for records in only a single table. To search more than one table at a time, you must use the advanced records...

  • Page 644

    644 chapter 40: building coldfusion applications rapidly searching with multiple search parameters if the search page submits more than one search parameter to the server, then you must write a sql query for the results page and use the search parameters in sql variables. Note: if you have only one ...

  • Page 645

    Building search/results pages (coldfusion, asp, jsp, php) 645 6 if you want, click test to create an instance of the recordset using the default variable values. The default values simulate the values that would otherwise have been returned from the search page. Click ok to close the test recordset....

  • Page 646

    646 chapter 40: building coldfusion applications rapidly creating a detail page for a results page your set of search/results pages can include a detail page to display more information about specific records on the results page. In this situation, your results page also doubles as the master page i...

  • Page 647

    Building a record insert page (all servers) 647 building the insert page in one operation you can add the basic building blocks of an insert page in a single operation using the record insertion form application object. The application object adds both an html form and an insert record server behavi...

  • Page 648

    648 chapter 40: building coldfusion applications rapidly building an insert page block by block you can add the basic building blocks of an insert page separately using the form tools and the server behaviors panel. You can also add the building blocks all at once using the record insertion form app...

  • Page 649

    Building pages to update a record (coldfusion) 649 building pages to update a record (coldfusion) your application can contain a set of pages that lets users update existing records in a database table. The pages normally consist of a search page, a results page, and an update page. The search and r...

  • Page 650

    650 chapter 40: building coldfusion applications rapidly creating the links to open the update page (coldfusion) after creating the search/results pages, you must create links on the results page to open the update page and display the selected record in an html form. This section describes how to c...

  • Page 651

    Building pages to update a record (coldfusion) 651 creating a url parameter for update links (coldfusion) the links on the results page not only have to open the update page, they must pass the id of the record the user selected. The update page will use this id to find the requested record in the d...

  • Page 652

    652 chapter 40: building coldfusion applications rapidly retrieving the record to update (coldfusion) after the results page passes a url parameter to the update page identifying the record to update, the update page must read the parameter, retrieve the record from the database table, and store it ...

  • Page 653

    Building pages to update a record (coldfusion) 653 after the application object places the building blocks on the page, you can use the dreamweaver design tools to customize the form to your liking, or the server behaviors panel to edit the update record server behavior. Note: the update page can co...

  • Page 654

    654 chapter 40: building coldfusion applications rapidly to add an html form to an update page: 1 create a new coldfusion page (file > new). 2 lay out your page using the dreamweaver design tools. 3 add an html form by placing the insertion point where you want the form to appear and selecting inser...

  • Page 655

    Building pages to delete a record (coldfusion) 655 to add a server behavior to update the database table: 1 in the server behaviors panel (window > server behaviors), click the plus (+) button and select update record from the pop-up menu. The update record dialog box appears. 2 complete the dialog ...

  • Page 656

    656 chapter 40: building coldfusion applications rapidly creating links to a confirmation page (coldfusion) after creating the results page, you must create links that the user can click to confirm the deletion of the associated record from the database. This section describes how to create the link...

  • Page 657

    Building pages to delete a record (coldfusion) 657 after clicking outside the link text box, the delete string appears linked in the table. If you turn on live data view (view > live data), you can see that the link is applied to the same text in every table row. If live data view is already turned ...

  • Page 658

    658 chapter 40: building coldfusion applications rapidly creating a url parameter to pass to the confirmation page (coldfusion) the links on the results page not only have to open the confirmation page, they must pass the id of the record the user wants to delete. The confirmation page will use this...

  • Page 659

    Building pages to delete a record (coldfusion) 659 displaying the record on the confirmation page (coldfusion) after completing the page listing the records, switch to the confirmation page. The confirmation page shows the record and asks the user if they're sure they want to delete it. When the use...

  • Page 660

    660 chapter 40: building coldfusion applications rapidly 4 complete the filter section as follows to find and display the record specified in the url parameter passed by the results page: ■ from the first pop-up menu in the filter area, select the column in the recordset containing values that match...

  • Page 661

    Building pages to delete a record (coldfusion) 661 to display the record the user wants to delete: 1 select the recordset columns in the bindings panel and drag them to the confirmation page. Make sure you insert this read-only dynamic content within the form boundaries. For more information on inse...

  • Page 662

    662 chapter 40: building coldfusion applications rapidly 5 click ok and save the page. The completed confirmation page should look similar to the following. After displaying the record on the confirmation page, the next step is to add logic to delete the record..

  • Page 663

    Building pages to delete a record (coldfusion) 663 adding logic to delete the record (coldfusion) after displaying the selected record on the confirmation page, you must add logic to the page that deletes the record from the database when the user clicks the confirm deletion button. You can add this...

  • Page 664

    664 chapter 40: building coldfusion applications rapidly 8 in the after deleting, go to text box, specify a page to open after the record has been deleted from the database table. You can specify a page that contains a brief success message to the user, or a page listing the remaining records so tha...

  • Page 665

    Using stored procedures to modify databases (coldfusion) 665 using stored procedures to modify databases (coldfusion) you can use a stored procedure to modify a database. A stored procedure is a reusable database item that performs some operation on the database. Note: mysql and microsoft access dat...

  • Page 666

    666 chapter 40: building coldfusion applications rapidly building pages that restrict access to your site (coldfusion, asp, jsp, php) you can use dreamweaver to build the following pages to restrict access to your site: • a page that requires users to register the first time they visit the site (see...

  • Page 667

    Building pages that restrict access to your site (coldfusion, asp, jsp, php) 667 storing login information about users a registration page requires a database table to store the login information entered by users. Make sure your database table contains a user name and a password column. If you want ...

  • Page 668

    668 chapter 40: building coldfusion applications rapidly the next step in creating a registration page is to add the insert record server behavior to insert records in the table of users in the database. Related topics • “building a registration page” on page 666 updating the table of users in the d...

  • Page 669

    Building pages that restrict access to your site (coldfusion, asp, jsp, php) 669 related topics • “building a registration page” on page 666 building a login page your web application can contain a page that lets registered users log in to the site. For example, the following page asks registered us...

  • Page 670

    670 chapter 40: building coldfusion applications rapidly letting users log in you add an html form to the page to let users log in by entering a user name and password. To let users log in: 1 create a new page (file > new) and lay out your login page using the dreamweaver design tools. 2 add an html...

  • Page 671

    Building pages that restrict access to your site (coldfusion, asp, jsp, php) 671 when a user clicks the submit button on the login page, the log in user server behavior compares the values entered by the user against the values for registered users. If the values match, the server behavior opens one...

  • Page 672

    672 chapter 40: building coldfusion applications rapidly redirecting unauthorized users to another page to prevent unauthorized users from accessing a page, add a restrict access to page server behavior to it. The server behavior redirects the user to another page if the user attempts to bypass the ...

  • Page 673

    Building pages that restrict access to your site (coldfusion, asp, jsp, php) 673 in most database applications, you can set a column to a default value each time a new record is created. Set the default value to the most common access privilege on your site (for example, guest); then manually change...

  • Page 674

    674 chapter 40: building coldfusion applications rapidly.

  • Page 675: Chapter 41

    675 chapter 41 building asp.Net applications rapidly you can use the tools in macromedia dreamweaver mx 2004 to build an asp.Net web application rapidly and with little or no coding. Related topics • “about rapid application development (all servers)” on page 629 building master/detail pages (asp.Ne...

  • Page 676

    676 chapter 41: building asp.Net applications rapidly to create a master page: 1 create a new asp.Net page. Select file > new > dynamic, select an asp.Net page format, and click create. A blank .Aspx page opens in dreamweaver. 2 define a dataset for the page. In the bindings panel (window > bindings...

  • Page 677

    Building master/detail pages (asp.Net) 677 opening a detail page and passing a record id (asp.Net) after adding a datagrid to the master page, you must create links that open the detail page and pass the id of the record that the user selected. The detail page will use this id to find the requested ...

  • Page 678

    678 chapter 41: building asp.Net applications rapidly 4 in the hyperlink text area, specify the text to be displayed in the hyperlink column. If you want to create a generic link such as details for each row in the datagrid, select the static text option and enter the text for the link. Each row in ...

  • Page 679

    Building master/detail pages (asp.Net) 679 the {0} element is a placeholder corresponding to the data field’s value. When the page runs, the values of the dataset’s code field are inserted in the corresponding rows in the datagrid. For example, if the canberra, australia, rental location has the cod...

  • Page 680

    680 chapter 41: building asp.Net applications rapidly 5 complete the filter section as follows to find and display the record specified in the url parameter passed by the master page: ■ from the first pop-up menu in the filter area, select the column in the dataset containing values that match the v...

  • Page 681

    Building a database search page (asp.Net) 681 building a database search page (asp.Net) you can use dreamweaver to build a page that searches a database and displays the results in a datagrid. This section describes the steps to build a database search page: • “adding the search controls (asp.Net)” ...

  • Page 682

    682 chapter 41: building asp.Net applications rapidly searching with only one search parameter (asp.Net) when the user clicks the page’s search button, the search parameter is sent to the server. The server processes the request, builds a filtered dataset based on the parameter, populates a datagrid...

  • Page 683

    Building a database search page (asp.Net) 683 searching with multiple search parameters (asp.Net) if the search page submits more than one search parameter to the server, then you must write a sql query and use the search parameters in sql variables. Note: if you have only one search condition, you ...

  • Page 684

    684 chapter 41: building asp.Net applications rapidly 6 if you want to, click test to create an instance of the dataset using the default variable values. The default values simulate the values that would otherwise have been returned from the search page. Click ok to close the test dataset. 7 if you...

  • Page 685

    Building a record insert page (asp.Net) 685 hiding the datagrid the first time the page loads when the search page first loads, you can hide the datagrid that will be used to display the search results. To hide the datagrid the first time the page loads: 1 open the search page in code view (view > c...

  • Page 686

    686 chapter 41: building asp.Net applications rapidly building pages to update a record (asp.Net) your application can contain a set of pages that lets users update existing records in a database table. The pages normally consist of a search page, a results page, and an update page. The search and r...

  • Page 687

    Building pages to update a record (asp.Net) 687 to create links on the search page to open the update page and pass the record id: 1 open the search page in dreamweaver. 2 double-click the datagrid object listed in the server behaviors panel (window > server behaviors). The datagrid dialog box opens...

  • Page 688

    688 chapter 41: building asp.Net applications rapidly 6 in the linked page area, build the url to apply to the text in the hyperlink column. The url not only has to open the update page, it must uniquely identify the record to display on that page. To identify the record to display on the update pag...

  • Page 689

    Building pages to update a record (asp.Net) 689 retrieving the record to update (asp.Net) after the search page passes a url parameter to the update page, the update page must read the parameter, retrieve the record from the database table, and store it temporarily in a dataset. To retrieve the reco...

  • Page 690

    690 chapter 41: building asp.Net applications rapidly after modifying the update page to retrieve a record from the database and store it in a dataset, you must add a form to let users modify the record data. You must also add the logic needed to update the database. You can accomplish these tasks i...

  • Page 691

    Building pages to update a record (asp.Net) 691 completing the update page block by block (asp.Net) an update page has three building blocks: • a filtered dataset to retrieve the record from a database table (see “retrieving the record to update (asp.Net)” on page 689 ) • an html form to let users m...

  • Page 692

    692 chapter 41: building asp.Net applications rapidly to display the record in the form: 1 make sure you defined a dataset to hold the record the user wants to update. For more information, see “retrieving the record to update (asp.Net)” on page 689 . 2 bind each form object to data in the recordset...

  • Page 693

    Building pages to delete a record (asp.Net) 693 for instructions on creating a page to search for the record to delete, see “building a database search page (asp.Net)” on page 681 . After creating the search page, the next step is to add delete buttons or hyperlinks to the datagrid on the search pag...

  • Page 694

    694 chapter 41: building asp.Net applications rapidly 6 in the format string text box in the linked page area, click the browse button then locate and select your confirmation page. Dreamweaver creates a url to the confirmation page that includes a url parameter identifying the record the confirmati...

  • Page 695

    Building pages to delete a record (asp.Net) 695 displaying the record on the confirmation page (asp.Net) after completing the page listing the records, switch to the delete confirmation page. The confirmation page shows the record and asks the user if they’re sure they want to delete it. When the us...

  • Page 696

    696 chapter 41: building asp.Net applications rapidly 4 complete the filter section as follows to find and display the record specified in the url parameter passed by the search page: ■ from the first pop-up menu in the filter area, select the column in the dataset containing values that match the v...

  • Page 697

    Building pages to delete a record (asp.Net) 697 to display the record the user wants to delete: 1 select the dataset columns (record fields) in the bindings panel and drag them to the confirmation page. Make sure you insert this read-only dynamic content within the form boundaries. For more informat...

  • Page 698

    698 chapter 41: building asp.Net applications rapidly after creating a confirmation page, the next step is to add logic to delete the record. Adding logic to delete the record (asp.Net) after creating the confirmation page, the next step is to add logic to the page that deletes the record from the d...

  • Page 699

    Building pages to delete a record (asp.Net) 699 9 in the on success, go to text box, specify a page to open after the record has been deleted from the database table. You can specify a page that contains a brief success message to the user, or a page listing the remaining records so that the user ca...

  • Page 700

    700 chapter 41: building asp.Net applications rapidly using stored procedures to modify databases (asp.Net) you can use a stored procedure to modify a database. A stored procedure is a reusable database item that performs some operation on the database. Note: microsoft access and mysql databases do ...

  • Page 701

    Building pages that restrict access to your site (asp.Net) 701 building pages that restrict access to your site (asp.Net) you can use dreamweaver to build a set of pages that restrict access to your site. Dreamweaver does not have authentication server behaviors for asp.Net pages. However, since asp...

  • Page 702

    702 chapter 41: building asp.Net applications rapidly.

  • Page 703: Chapter 42

    703 chapter 42 building asp and jsp applications rapidly you can use the tools in macromedia dreamweaver mx 2004 to build an asp or jsp web application rapidly and with little or no coding. Related topics • “about rapid application development (all servers)” on page 629 building master/detail pages ...

  • Page 704

    704 chapter 42: building asp and jsp applications rapidly creating a master page and defining a recordset for it (asp and jsp) the first step in building master/detail pages is to create a blank master page and add a recordset to it. You can define a recordset at design time (see “defining a records...

  • Page 705

    Building master/detail pages (asp and jsp) 705 the first part of the url, http://www.Mysite.Com/customerdetail.Asp, opens the detail page. The second part, ?Id=43, is the url parameter. It tells the detail page what record to find and display. The term id is the name of the url parameter and 43 is i...

  • Page 706

    706 chapter 42: building asp and jsp applications rapidly 5 complete the filter section as follows to find and display the record specified in the url parameter passed by the results page: ■ from the first pop-up menu in the filter area, select the column in the database table containing values that...

  • Page 707

    Building pages to update a record (asp and jsp) 707 building pages to update a record (asp and jsp) your application can contain a set of pages that lets users update existing records in a database table. The pages normally consist of a search page, a results page, and an update page. The search and...

  • Page 708

    708 chapter 42: building asp and jsp applications rapidly dreamweaver inserts a special link in the page. When the user clicks the link, a url parameter containing the record id is passed to the update page. The next step in creating a record update page is to retrieve the record to update. . Retrie...

  • Page 709

    Building pages to update a record (asp and jsp) 709 completing the update page in one operation (asp and jsp) an update page has three building blocks: • a filtered recordset to retrieve the record from a database table (see “retrieving the record to update (asp and jsp)” on page 708 ) • an html for...

  • Page 710

    710 chapter 42: building asp and jsp applications rapidly before you can add the building blocks, your web application must be able to identify the record to update, and your update page must be able to retrieve it. See “searching for the record to update (asp and jsp)” on page 707 , “opening the up...

  • Page 711

    Building pages to delete a record (asp and jsp) 711 to display the record in the form: 1 make sure you defined a recordset to hold the record the user wants to update. For more information, see “retrieving the record to update (asp and jsp)” on page 708 . 2 bind each form object to data in the recor...

  • Page 712

    712 chapter 42: building asp and jsp applications rapidly related topics • “building a record insert page (asp and jsp)” on page 706 • “building pages to update a record (asp and jsp)” on page 707 identifying the record to delete (asp and jsp) when users want to delete a record, they must first find...

  • Page 713

    Building pages to delete a record (asp and jsp) 713 displaying the data to be deleted (asp and jsp) after retrieving the record to delete, it’s good practice to display the record before the user deletes it to confirm that the user wants to delete it. To add a read-only display of the record to be d...

  • Page 714

    714 chapter 42: building asp and jsp applications rapidly deleting the record from the database table (asp and jsp) after adding a button the user can click to delete the record , the final step is to add the delete record server behavior to update the database table after the user clicks the submit...

  • Page 715

    Building pages with advanced data manipulation objects (asp and jsp) 715 running a stored procedure (asp) with asp pages, you must add a command object to a page to run a stored procedure. For more information on command objects, see “asp command objects” on page 633 . To add a stored procedure to a...

  • Page 716

    716 chapter 42: building asp and jsp applications rapidly after you close the callable (stored procedure) dialog box, dreamweaver inserts jsp code in your page that, when run on the server, calls a stored procedure in the database. The stored procedure in turn performs a database operation, such as ...

  • Page 717

    Building pages with advanced data manipulation objects (asp and jsp) 717 4 complete the sql statement. For information on writing sql statements that modify databases, consult a transact-sql manual. 5 use the variables area to define any sql variables. For example, below is an insert statement that ...

  • Page 718

    718 chapter 42: building asp and jsp applications rapidly using jsp prepared statements to modify a database you can use dreamweaver to create jsp prepared statements that insert, update, or delete records in a database. A jsp prepared statement is a reusable server object that contains a sql statem...

  • Page 719: Chapter 43

    719 chapter 43 building php applications rapidly you can use the tools in macromedia dreamweaver mx 2004 to build a php web application rapidly and with little or no coding. Related topics • “about rapid application development (all servers)” on page 629 building master/detail pages (php) with dream...

  • Page 720

    720 chapter 43: building php applications rapidly creating the master page (php) this section describes how to create a master page that lists database records. You can use a dynamic table to list the records on a php page. Before you start, make sure you define a database connection for the site. F...

  • Page 721

    Building master/detail pages (php) 721 3 insert a dynamic table to display the records on the page. Place the insertion point where you want the dynamic table to appear on the page, and select insert > application objects > dynamic data > dynamic table. The dynamic table dialog box appears. 4 comple...

  • Page 722

    722 chapter 43: building php applications rapidly creating the links to the detail page (php) after creating the dynamic table, you must create links that open the detail page. This section describes how to create the links. The next section describes how to modify the link so that it also passes th...

  • Page 723

    Building master/detail pages (php) 723 creating a url parameter for the links (php) the links in the dynamic table on the master page not only have to open the detail page, they must pass the id of the record the user selected. The detail page will use this id to find the requested record in the dat...

  • Page 724

    724 chapter 43: building php applications rapidly finding and displaying the requested record on the detail page (php) after completing the master page, switch to the detail page. You must find the requested record in the database and display it on the page. The procedure consists of defining a reco...

  • Page 725

    Building a record insert page (php) 725 the recordset dialog box should look as follows: 6 click ok. The recordset appears in the bindings panel. 7 bind the recordset columns to the detail page by selecting the columns in the bindings panel (window > bindings) and dragging them onto the page. For mo...

  • Page 726

    726 chapter 43: building php applications rapidly building pages to update a record (php) your application can contain a set of pages that lets users update existing records in a database table. The pages normally consist of a search page, a results page, and an update page. The search and results p...

  • Page 727

    Building pages to update a record (php) 727 creating the links to open the update page (php) after creating the search/results pages, you must create links on the results page to open the update page and display the selected record in an html form. This section describes how to create the links. The...

  • Page 728

    728 chapter 43: building php applications rapidly creating a url parameter for update links (php) the links on the results page not only have to open the update page, they must pass the id of the record the user selected. The update page will use this id to find the requested record in the database ...

  • Page 729

    Building pages to update a record (php) 729 5 configure the filter area so that the value of your key column equals the value of the corresponding url parameter passed by the results page. This kind of filter creates a recordset that contains only the record specified by the results page. For exampl...

  • Page 730

    730 chapter 43: building php applications rapidly to build the update page with the record update form application object: 1 open the update page in design view, then select insert > application objects > update record > record update form wizard. The record update form dialog box appears. 2 complet...

  • Page 731

    Building pages to update a record (php) 731 4 name the html form by clicking the tag at the bottom of the document window to select the form, opening the property inspector (window > properties), and entering a name in the form name box. You don’t have to specify an action or method attribute for th...

  • Page 732

    732 chapter 43: building php applications rapidly building pages to delete a record (php) your application can contain a set of pages that lets users delete records in a database. The pages normally consist of a search page, a results page, and a delete page. The search and results page let users re...

  • Page 733

    Building pages to delete a record (php) 733 3 in the newly created table column, enter the string delete in the row containing the dynamic content placeholders. Make sure you enter the string inside the tabbed repeat region. You can also insert an image with a word or symbol for delete. If live data...

  • Page 734

    734 chapter 43: building php applications rapidly displaying the record on the confirmation page (php) after completing the page listing the records, switch to the confirmation page. The confirmation page shows the record and asks the user if they're sure they want to delete it. When the user confir...

  • Page 735

    Building pages to delete a record (php) 735 4 complete the filter section as follows to find and display the record specified in the url parameter passed by the results page: ■ from the first pop-up menu in the filter area, select the column in the recordset containing values that match the value of...

  • Page 736

    736 chapter 43: building php applications rapidly 4 in the dynamic data dialog box, select the record id column in the recordset and click ok. In the following example, the record id column selected is code. 5 save the page. The completed confirmation page should look as follows: after creating a co...

  • Page 737

    Building pages to delete a record (php) 737 adding logic to delete the record (php) after creating a confirmation page, the next step in building a record delete page is to add logic to the confirmation page that deletes the record from the database when the user clicks the confirm button. You can a...

  • Page 738

    738 chapter 43: building php applications rapidly 7 in the after deleting, go to text box, specify a page to open after the record has been deleted from the database table. You can specify a page that contains a brief success message to the user, or a page listing the remaining records so that the u...

  • Page 739: Part Ix

    Part ix appendixes get more help to develop your web applications or to use flash elements. This part contains the following chapters: appendix a, “beginner’s guide to databases,” on page 741 appendix b, “sql primer,” on page 753 part ix.

  • Page 741: Appendix A

    741 appendix a beginner’s guide to databases this appendix is intended for macromedia dreamweaver mx 2004 users who have little or no experience working with databases or database connections. It explains general concepts, not specific procedures. To see how these concepts apply in practice, see the...

  • Page 742

    742 appendix a: beginner’s guide to databases a subset of data extracted from one or more tables is called a recordset (or a dataset in asp.Net). A recordset is also a table because it’s a collection of records that share the same columns. For example, a hockey team roster listing the names and posi...

  • Page 743

    Database design basics 743 the fractional owners, or shareholders, pay arrow aircraft the following fees: • a monthly management fee proportional to the owner’s share of the aircraft to cover pilot, insurance, and hangaring costs • an “occupied” hourly fee covering all direct costs such as maintenan...

  • Page 744

    744 appendix a: beginner’s guide to databases • how many passengers will accompany the shareholders? • how much luggage will they bring—light (carry-on), normal (one suitcase per passenger), or heavy (more than one suitcase)? • what are the shareholder’s catering needs? • what is the occupied hourly...

  • Page 745

    Database design basics 745 after some thought, you choose the following properties and primary keys for the tables in the arrow aircraft database: defining relationships between the tables after defining the basic columns and primary keys in your tables, you can start defining relationships between ...

  • Page 746

    746 appendix a: beginner’s guide to databases with your knowledge of the client’s feature request and of the company’s business rules and policies, you decide to define the following one-to-many relationships in your database: • each aircraft can have many shareholders • each aircraft has many booki...

  • Page 747

    Understanding database connections 747 creating the database the final design step is creating the database using a database system like microsoft access, sql server, oracle9i, or mysql. Consult your database system’s documentation for more information. Understanding database connections if you plan...

  • Page 748

    748 appendix a: beginner’s guide to databases here’s what the same database looks like in notepad: your web application faces the same problem as notepad or any other application trying to access data in an unknown format: the application can’t decipher the data. A software interface is needed betwe...

  • Page 749

    Understanding database connections 749 note: install mdac 2.5 first, then install mdac 2.7. To find out which odbc drivers are installed on your windows system, see “viewing the odbc drivers installed on a windows system” on page 749 . Some common jdbc drivers include the i-net jdbc drivers for micr...

  • Page 750

    750 appendix a: beginner’s guide to databases invoking database drivers an application must invoke a database driver to establish two-way communications with a database. A web application invokes a driver by using a connection string. A connection string consists of all the information (or parameter...

  • Page 751

    Understanding database connections 751 using a dsn you can specify data source names (dsns) in some connections. A dsn is a type of shortcut you create in windows to represent a connection string. For example, suppose you have a microsoft sql server database called precinct located on a server calle...

  • Page 752

    752 appendix a: beginner’s guide to databases.

  • Page 753: Appendix B

    753 appendix b sql primer this appendix describes how to use structured query language (sql) to create recordsets for your dynamic pages. Sql (pronounced sequel) is a language that lets you read and write data from a database. The language has only a few keywords and simple syntax rules, but still a...

  • Page 754

    754 appendix b: sql primer the following keywords are used to refine sql statements: the following operators specify conditions and perform logical and numeric functions: if the item being compared is text, place it in single quotes as in the following example: ...Where country = 'germany' if the it...

  • Page 755

    Limiting the records in a recordset 755 defining the columns of a recordset you can use sql to define recordsets for your pages. A recordset is a subset of records extracted from a database. For more information, see “about databases” on page 741 . Here’s the basic sql syntax to define the columns o...

  • Page 756

    756 appendix b: sql primer you can express this logic with the following where clause: where columnname = parametervalue parametervalue is a sql variable containing a search parameter. In a web application, the user typically supplies this parameter using an html form. This database query could be e...

  • Page 757

    Limiting the records in a recordset 757 if you want to give users the ability to perform partial-word searches, combine the variable with a wildcard character. The sql wildcard character to use in this case is the percentage sign (%). Here’s an example: ...Where lastname like 'varlastname%' for exam...

  • Page 758

    758 appendix b: sql primer filtering records based on a combination of search conditions this section describe how to include records in the search results recordset based on a combination of search conditions. You combine search conditions in sql using the and , or , and not logical operators. If y...

  • Page 759

    Joining tables 759 joining tables you can use a single select statement to retrieve data from more than one table in the database. The statement joins the tables and returns a single recordset containing selected data from each table. For example, a company database might contain one table with pers...

  • Page 760

    760 appendix b: sql primer.

  • Page 761: Index

    761 index symbols ? In field names 493 @import 297 a absolute bottom alignment 308 absolute middle alignment 308 absolute paths 316 access privileges adding to pages 672 example 671 storing in a database 672 accessibility 26–27 dialog box, activating 53 federal rehabilitation act 26 frames 205, 210 ...

  • Page 762

    762 index applying behaviors to images 313 colors to text 120 css styles 295 custom styles 295 asp application servers 456 command objects 716 command objects, defined 633 connecting to isp 475 database connections 469 delete pages 711 dsn connections 471 dsn-less connections 474 insert pages 646 lo...

  • Page 763

    Index 763 javascript 371–398 library items and 130 links and 336 media and 369 third-party 376 triggering 373 behaviors panel 372 bindings panel adding dynamic text 547 creating a record counter 570 deleting data sources 543 format column 562 making forms dynamic 610, 617 making html attributes dyna...

  • Page 764

    764 index line numbers 403 navigation 428 printing 432 reference 431 rewriting automatically 417 rewriting preferences 404 searching 428 selecting in contribute 553 server behaviors 423 snippets 424 tag editors 426 tag libraries 406 validation preferences 405 viewing 401 viewing preferences 403 word...

  • Page 765

    Index 765 insert column left 176 insert column right 176 make column autostretch 195 make column fixed width 195 remove spacer image 196 select column 169 combining floating panels 46 command objects, asp 716 commands accessing from context menu 46 creating, from history steps 268 recording 269 reve...

  • Page 766

    766 index d data formats applying 562 creating 563 editing 562 data link properties 466 data source name. See dsn data sources about 526 application variables 537 caching 542 coldfusion variables 539 defining in coldfusion 464 deleting 543 editing or deleting 543 form parameters, about 517 javabeans...

  • Page 767

    Index 767 refreshing 402 toggling to code view 39 vbscript, inserting 446 viewing template-based documents 218 viewing templates 217 design-time style sheets, using 300 desktop, accessing files on 81 destroying temporary files, permissions for 491 detach from original option 130 detach from template...

  • Page 768

    768 index dynamic content about 526 adding to pages 545 advanced recordset, creating 532 attributes 549 deleting from a page 513 form checkboxes 618 form menus 617, 618 form text fields 618 forms 610, 617 images 548 objects 551 radio buttons 619 recordset, creating 531 recordset, defining 526 removi...

  • Page 769

    Index 769 media 359 text 412 external links 336 external style sheets creating 296 editing 298 linking to 296 eyedropper 260 f favorites folder 125 favorites list (assets panel) about 117 adding a new color 123 adding a new url 123 adding and removing assets 123 creating a favorites folder 125 creat...

  • Page 770

    770 index searching 301 searching text 301 font characteristics, changing 286 fonts changing characteristics 286 changing combinations 287 encodings, setting fonts for 56 fonts/encoding preferences 56 form controls, asp.Net 623 format column 562 format table command 172 formatting code, applying for...

  • Page 771

    Index 771 grayscale color palette 261 grid as guide 54 showing 160 snapping layers to 160 h head section, viewing and editing 449 help 27 hidden fields 616 hidden files, showing and hiding 94 hidden form fields 609 hide pop-up menu 395 hiding invisible elements 263 links 566 highlighting preferences...

  • Page 772

    772 index sites 96 tabular data 166, 281 text from other documents 281 includes, server-side 419 indenting code 403, 408, 426, 430 insert bar about 34 categories 37 docking 46 inserting code 425 preferences 44 showing categories as tabs 43 using 42 insert e-mail link dialog box 325 insert jump menu ...

  • Page 773

    Index 773 jump menus about 609 adding menu items 331 changing menu items 332 creating a selection prompt for 331 editing 384 go buttons 331, 384 k keyboard shortcut editor 57 keyboard shortcuts, editing 57 l languages reference 431 supported in dreamweaver 416 launch and edit preferences 347 launche...

  • Page 774

    774 index learning dreamweaver 20 left alignment 308 library items about 115 adding to pages 126 as assets. See assets changing highlight color 129 creating 125 deleting 128 editing 127 editing behaviors in 130 making editable in documents 130 overview 115 preferences 129 properties 129 recreating 1...

  • Page 775

    Index 775 master/detail page set application object 634, 675, 703, 719 master/detail pages asp 634, 703 asp.Net 675 coldfusion 634, 635 jsp 634, 703 php 634, 719 mdac (microsoft data access components) 466 media elements, inserting 358 menus 614 merge cells command 178 microsoft access, locked datab...

  • Page 776

    776 index linked documents 339 non-html files 405 text files 73 operating systems, multiuser 38 optimize image in fireworks command 344 optional regions (templates) defined 216 inserting 237 modifying 239 oracle ole db providers 466 oracle thin driver 479 orphaned files 336 overlapping tags 417 p pa...

  • Page 777

    Index 777 preferences changing highlighting 148 code coloring 405 code formatting 403 code hints 404 code rewriting 404 code view 403 dictionary for spell checking 301 external editors 360 file types and editors 413 file types/editors 360 floating panels 48 fonts/encoding 56 general 56 highlighting,...

  • Page 778

    778 index recordsets about 526 caching 542 columns, defining (sql) 755 copying and pasting 543 database items tree 533 defining without sql 531 editing or deleting 543 empty, troubleshooting 494 filtering records (sql) 755, 758 joining tables (sql) 759 limiting records returned (sql) 755 recordset d...

  • Page 779

    Index 779 s save all command 257 save all frames command 210 save command 72 save frame as command 209 save frame command 209 save frameset as command 209 save frameset command 209 saving documents 72 documents with a different name 257 files in frames and framesets 209 reports 114 reverting to last...

  • Page 780

    780 index set text of layer action 389 set text of status bar action 390 set text of text field action 390 setting code coloring 228 default new document type 72 document properties 258 fonts and changing characteristics 286 shared settings files in contribute sites 137 shockwave movies as assets. S...

  • Page 781

    Index 781 selecting in the document window 262 tag styles 290 updating fireworks html placed in dreamweaver 348 see also code source control 78, 97 spaces converting to tabs 430 inserting non-breaking 290 special characters inserting 289 line break 284 question marks in field names 493 in sql accoun...

  • Page 782

    782 index cells, splitting 178 column widths 164 column widths, making consistent 197 columns, clearing widths 175 columns, making widths consistent 175, 197 content, adding to 165 creating 165 data, exporting 166 editing 170 elements, selecting 167 expanded tables mode 170 formatting 170 highlighti...

  • Page 783

    Index 783 nested 241 nesting 222 optional region 216, 237, 239 overview 216 parameters 224 preferences 228, 229 renaming 245 repeating region 216, 234, 250 repeating table 236 tag syntax 220 types of regions 216 undoing application 248 updating contribute sites 244 updating documents 243 xml 246 tem...

  • Page 784

    784 index jsp 707 php 726 update pages command 243 update record behavior 655, 692, 711, 731 updating links 327 records 649 templates 243 uploading files 102 files to a server 616 urls applying to selection 120 as assets. See assets creating url assets 123 see also paths usemap attribute 335 user in...

  • Page 785

    Index 785 x xhtml code 417 converting from html to xhtml 438 creating pages 438 xml dtd files 410 in templates 246 z z-index option (for layers), changing stacking order 155.

  • Page 786

    786 index.