Adobe 38040334 - Dreamweaver CS3 User Manual Download Page 5

Page: 5 / 738

Working with Flash

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

Working with Bridge

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383

Working with Device Central

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385

Chapter 14: Creating and managing templates

About Dreamweaver templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387

Recognizing templates and template-based documents

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392

Creating a Dreamweaver template

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395

Creating editable regions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398

Creating repeating regions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399

Using optional regions

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

Defining editable tag attributes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

Creating a nested template

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405

Editing, updating, and deleting templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408

Exporting and importing template content

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

Applying or removing a template from an existing document

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 413

Editing content in a template-based document

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414

Template syntax

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Setting authoring preferences for templates

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418

Chapter 15: Displaying XML data

About XML and XSLT

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420

Performing XSL transformations on the server

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427

Performing XSL transformations on the client

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

Missing character entities

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446

Chapter 16: Building Spry pages visually

About the Spry framework

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449

Adding Spry widgets

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449

Working with the Accordion widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451

Working with the Menu Bar widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453

Working with the Collapsible Panel widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458

Working with the Tabbed Panels widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461

Working with the Validation Text Field widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464

Working with the Validation Text Area widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469

Working with the Validation Select widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472

Working with the Validation Checkbox widget

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475

Displaying data with Spry

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478

Adding Spry effects

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486

Chapter 17: Preparing to build dynamic sites

Understanding web applications

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491

Installing a local web server

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498

Setting up a web application

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501

Database connections for ColdFusion developers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508

Database connections for ASP developers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510

Database connections for PHP developers

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517

September 4, 2007

Summary of Contents for 38040334 - Dreamweaver CS3

Page 1: ...USER GUIDE ADOBE DREAMWEAVER CS3 September 4 2007 ...

Page 2: ...rk in the United States and other countries licensed exclusively through X Open Company Ltd All other trademarks are the property of their respective owners This product includes software developed by the Apache Software Foundation http www apache org The Graphics Interchange Format is the Copyright property of CompuServe Incorporated GIF sm is a Service Mark property of CompuServe Incorporated MP...

Page 3: ...les Creating and opening documents 68 Managing files and folders 77 Getting and putting files to and from your server 87 Checking in and checking out files 91 Synchronizing files 94 Comparing files for differences 96 Rolling back files Contribute users 99 Cloaking folders and files in your site 99 Storing file information in Design Notes 102 Testing your site 104 Chapter 5 Managing assets and libr...

Page 4: ...reviewing pages Previewing pages in browsers 298 Previewing pages in mobile devices 300 Chapter 11 Working with page code About coding in Dreamweaver 301 Setting up your coding environment 307 Customizing the coding environment 308 Writing and editing code 313 Collapsing code 324 Optimizing and debugging code 326 Editing code in Design view 330 Working with head content for pages 336 Working with ...

Page 5: ...forming XSL transformations on the server 427 Performing XSL transformations on the client 444 Missing character entities 446 Chapter 16 Building Spry pages visually About the Spry framework 449 Adding Spry widgets 449 Working with the Accordion widget 451 Working with the Menu Bar widget 453 Working with the Collapsible Panel widget 458 Working with the Tabbed Panels widget 461 Working with the V...

Page 6: ...er 20 Building applications visually Building master and detail pages all servers 614 Building search and results pages ColdFusion ASP JSP PHP 624 Building a database search page ASP NET 629 Building a record insert page all servers 633 Building pages to update a record all servers 637 Building pages to delete a record all servers 643 Building pages with advanced data manipulation objects ColdFusi...

Page 7: ...ssibility Dreamweaver and accessibility 704 Dreamweaver accessibility features 705 Designing pages for accessibility 707 Chapter 24 Shortcuts and extensions Keyboard shortcuts 708 Extensions 710 Index 711 September 4 2007 ...

Page 8: ...llation disc Activate the software If you have a single user retail license for your Adobe software you will be asked to activate your software this is a simple anonymous process that you must complete within 30 days of starting the software For more information on product activation see the Read Me file on your installation disc or visit the Adobe website at www adobe com go activation 1 If the A...

Page 9: ...iple products Topics may also contain links to relevant content on the web or to topics in the Help of another product Think of Help both in the product and on the web as a hub for accessing additional content and communities of users The most complete and up to date version of Help is always on the web Adobe PDF documentation The in product Help is also available as a PDF that is optimized for pr...

Page 10: ...n the two products or describes cross product workflows You can search across the Help systems of multiple products If you search for a phrase such as shape tool enclose it in quotation marks to see only those topics that include all the words in the phrase Adobe Help A Back Forward buttons previously visited links B Expandable subtopics C Icons indicating shared topic D Previous Next buttons topi...

Page 11: ...this list to find the Help system that will answer your question Dreamweaver Help called Using Dreamweaver intended for all users gives comprehensive information about all Adobe Dreamweaver CS3 features Extending Dreamweaver which describes the Dreamweaver framework and the application programming interface API is intended for advanced users who want to build extensions or customize the Dreamweave...

Page 12: ...ite 3 Video Workshop offers over 200 training videos covering a wide range of subjects for print web and video professionals You can use the Adobe Video Workshop to learn about any Creative Suite 3 product Many videos show you how to use Adobe applications together September 4 2007 ...

Page 13: ...obe Video Workshop includes training for novices and experienced users You ll also find videos on new features and key techniques Each video covers a single subject and typically runs about 3 5 minutes Most videos come with an illustrated tutorial and source files so you can print detailed steps and try the tutorial on your own Using Adobe Video Workshop You can access Adobe Video Workshop using t...

Page 14: ...ations Adobe application The application folder may contain the following resources Plug ins Plug in modules are small software programs that extend or add features to your software Once installed plug in modules appear as options in the Import or Export menu as file formats in the Open Save As and Export Original dialog boxes or as filters in the Filter submenus For example a number of special ef...

Page 15: ...s up to date information on all your Adobe Creative Suite 3 software in one convenient location Start Adobe Bridge then click the Bridge Home icon at the top of the Favorites panel to access the latest tips news and resources for your Creative Suite tools ET VERO EOS ET ACCUSAM ET JUSTO DUO DOLORES ET EA REBUM STET CLITA KASD ET COSE TETU R SADI PSCI NG 01 PelletirInc CORE INVESTMENT SPECTRUM Vel ...

Page 16: ... Design Center offers articles inspiration and instruction from industry experts top designers and Adobe publishing partners New content is added monthly You can find hundreds of tutorials for design products and learn tips and techniques through videos HTML tutorials and sample book chapters September 4 2007 ...

Page 17: ... developers who develop plug ins for Adobe products In addition to sample code and tutorials you ll find RSS feeds online seminars SDKs scripting guides and other technical resources Visit Adobe Developer Center at www adobe com go developer Customer support Visit the Adobe Support website at www adobe com support to find troubleshooting information for your product and to learn about free and pai...

Page 18: ... blogs are posted in a wide range of languages To participate in forums or blogs visit www adobe com communities What s new Top new features of Adobe Dreamweaver CS3 Spry framework for Ajax With Adobe Dreamweaver CS3 you can visually design develop and deploy dynamic user interfaces using the Spry framework for Ajax The Spry framework for Ajax is a JavaScript library for web designers that allows ...

Page 19: ...page up and running quickly and help you learn about CSS page layout by providing extensive inline comments in the code Most site designs on the web can be categorized as one two or three column layouts each with a number of additional elements such as headers and footers Dreamweaver now offers a comprehensive list of essential layout designs that you can customize to fit your needs See Create a p...

Page 20: ...ontribute sites See Managing files and folders on page 77 and Managing assets and libraries on page 108 Lay out your web pages Choose the layout technique that works for you or use the Dreamweaver layout options in conjunction with one another to create your site s look You can use Dreamweaver AP elements CSS positioning styles or predesigned CSS layouts to create your layout The table tools let y...

Page 21: ...o display one record or many records at a time display more than one page of records add special links to move from one page of records to the next and back and create record counters to help users keep track of the records You can encapsulate application or business logic using technologies such as Macromedia ColdFusion from Adobe and web services If you need more flexibility you can create custo...

Page 22: ... which each document appears 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 sides of the screen and to the Document window as you drag or resize them A Insert bar B Document toolbar C Document window D Panel groups E Tag selector F Property inspector G Files panel For a tutorial on s...

Page 23: ... the File and Edit menus New Open Save Save All Cut Copy Paste Undo and Redo To display the Standard toolbar select View Toolbars Standard The Coding toolbar Displayed in Code view only Contains buttons that let you perform many standard coding operations The Style Rendering toolbar Hidden by default Contains buttons that let you see how your design would look in different media types if you used ...

Page 24: ...grated workspace layout Windows only it has no title bar in that case the page title and the file s path and filename appear in the title bar of the main workspace window When a Document window is maximized tabs appear at the top of the Document window showing the filenames of all open documents To switch to a document click its tab See also Working in the Document window on page 24 About coding i...

Page 25: ...endent such as the ability to select a code block s opening or closing tags View Options Allows you to set options for Code view and Design view including which view should appear above the other Options in the menu are for the current view Design view Code view or both Visual Aids Lets you use different visual aids to design your pages Validate Markup Lets you validate the current document or a s...

Page 26: ...o Set window size and connection speed on page 26 Zoom in and out on page 223 Resize the Document window on page 25 Set download time and size preferences on page 225 Insert bar overview The Insert bar contains buttons for creating and inserting objects such as tables AP elements and images When you roll the pointer over a button a tooltip appears with the name of the button The buttons are organi...

Page 27: ...ry Lets you group and organize the Insert bar buttons you use the most in one common place Server code categories Available only for pages that use a particular server language including ASP ASP NET CFML Basic CFML Flow CFML Advanced JSP and PHP Each of these categories provides server code objects that you can insert in Code view See also Use the Insert bar on page 28 Building Spry pages visually...

Page 28: ...g media dependent style sheets see the World Wide Web Consortium website at www w3 org TR CSS21 media html By default Dreamweaver displays your design for the screen media type which shows you how a page is rendered on a computer screen You can view the following media type renderings by clicking the respective buttons in the Style Rendering toolbar Render Screen Media Type Shows you how the page ...

Page 29: ...the workspace by default but you can dock it at the upper edge of the workspace or make it a floating panel in the workspace See also Dock and undock panels and panel groups on page 32 Use the Property inspector on page 30 Files panel overview Use the Files panel to view and manage the files in your Dreamweaver site When you view sites files or folders in the Files panel you can change the size of...

Page 30: ... Current mode the CSS Styles panel displays three panes a Summary for Selection pane that displays the CSS properties for the current selection in the document a Rules pane that displays the location of selected properties or a cascade of rules for the selected tag depending on your selection and a Properties pane that lets you edit CSS properties for the rule defining the selection In All mode th...

Page 31: ...snap to the closest grid point when moved or resized Other objects such as images and paragraphs do not snap to the grid Snapping works regardless of whether the grid is visible See also Using visual aids for layout on page 173 GoLive users If you have been using GoLive and want to switch to working with Dreamweaver you can find an online introduction to the Dreamweaver workspace and workflow as w...

Page 32: ... layouts on page 35 Cascade Document windows Select Window Cascade Tile Document windows Windows Select Window Tile Horizontally or Window Tile Vertically Macintosh Select Window Tile Resize 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 predeterm...

Page 33: ...ht To set the Width or Height only simply leave one field empty 4 Click the Description field to enter descriptive text about the size you added For example you might type SVGA or average PC next to the entry for an 800 x 600 pixel monitor and 17 in Mac next to the entry for an 832 x 624 pixel monitor Most monitors can be adjusted to a variety of pixel dimensions Set window size and connection spe...

Page 34: ...nd broken external and orphaned links on page 295 Put files on a remote server on page 89 Get files from a remote server on page 88 Use the ColdFusion debugger Windows only on page 329 Using toolbars inspectors context menus and panels Display toolbars Use the Document and Standard toolbars to perform document related and standard editing operations the Coding toolbar to insert code quickly and th...

Page 35: ... Design view option are dimmed because you cannot insert items into these code files Show the buttons in a particular category Click the category names at the top of the Insert bar Display the pop up menu for a button Click the down arrow beside the button s icon Show Insert bar categories as a menu Right click Windows or Control click Macintosh a category tab in the Insert bar and then select Sho...

Page 36: ...ialog box deselect Show Dialog When Inserting Objects to suppress dialog boxes when you insert objects such as images tables scripts and head elements or by holding down the Control key Windows or the Option key Macintosh while creating the object When you insert an object with this option off the object is given default attribute values Use the Property inspector to change object properties after...

Page 37: ...e expander arrow in the lower right corner of the Property inspector View and change properties for a page element 1 Select the page element in the Document window You might have to expand the Property inspector to view all the properties for the selected element 2 Change any of the properties in the Property inspector Note For information on specific properties select an element in the Document w...

Page 38: ...Note When a panel group is floating undocked a narrow blank bar appears at the top of the panel group In this documentation the term panel group s title bar refers to the area where the panel group s name appears rather than to this narrow blank bar View panels and panel groups You can display or hide panel groups and panels in the workspace as necessary Expand or collapse a panel group Click the ...

Page 39: ...workspace while others such as the Property inspector and the Insert bar can be docked only to the upper or lower edge of the integrated window Note You cannot undock the Files panel if you are in Expanded mode To collapse the Files panel before undocking click the Expand Collapse button the right most button at the top of the panel If you close the Files panel while it s undocked it disappears fr...

Page 40: ...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 Resize and rename panel groups You can change the size and name of panel groups depending on your needs Change the size of the panel groups For floating panels drag to resize the set of panel groups just as you would drag to resize any window in your...

Page 41: ... by Adobe HomeSite and ColdFusion and with the Document window showing Code view by default Note You can dock panel groups on either side of the workspace in either layout Dual Screen Lets you organize a layout if you have a secondary monitor This layout puts all panels on the secondary monitor and keeps the Document window and Property inspector on the primary monitor Choose the workspace layout ...

Page 42: ...layout Windows on page 34 Save a custom workspace layout 1 Arrange the panels as desired 2 Select Window Workspace Layout Save Current 3 Enter a name for the layout and click OK Switch to another custom workspace layout Select Window Workspace Layout and select your custom layout Rename or delete a custom workspace layout 1 Select Window Workspace Layout Manage 2 Select a layout and do one of the ...

Page 43: ...hen you start Dreamweaver or when you don t have any documents open Reopen Documents on Startup Opens any documents that were open when you closed Dreamweaver If this option is not selected Dreamweaver displays the Welcome screen or a blank screen when you start depending on your Show Welcome Screen setting Warn When Opening Read Only Files Alerts you when you open a read only locked file Choose t...

Page 44: ...e or color is defined for a text selection a new document specific style is created which is then available from the Property inspector s Style pop up menu The only exceptions are for bold and italic fonts for which Dreamweaver uses HTML tags instead of CSS Even if the document links to an external style sheet new style declarations are written to the head of the document not in the CSS file This ...

Page 45: ... encoding type such as Western European or Japanese from the Font Settings list Note To display an Asian language you must be using an operating system that supports double byte fonts 4 Select a font and size to use for each category of the selected encoding Note To appear in the font pop up menus a font must be installed on your computer For example to see Japanese text you must have a Japanese f...

Page 46: ...ry 2 Beside the object you want to change the highlighting color for click the color box and then use the color picker to select a new color or enter a hexadecimal value Activate or deactivate highlighting for an object 1 Select Edit Preferences and select the Highlighting category 2 Beside the object you want to activate or deactivate highlighting color for select or deselect the Show option Sept...

Page 47: ...mweaver features Note To define a Dreamweaver site you only need to set up a local folder To transfer files to a web server or to develop web applications you must also add information for a remote site and testing server A Dreamweaver site consists of as many as three parts or folders depending on your development environment and the type of website you are developing Local root folder Stores the...

Page 48: ...le would not apply and you would instead create different remote folders within the public_html folder and then map them to their corre sponding local root folders on your local machine When you first establish a remote connection the remote folder on the web server is usually empty Then when you use Dreamweaver to upload all of the files in your local root folder the remote folder populates with ...

Page 49: ...u didn t use Dreamweaver to create the original site Note You don t need to specify a remote folder if your local root folder is on the system running your web server This implies the web server is running on your local computer 1 Select one of the following To set up a new site Select Site New Site To edit the setup of an existing site on your local disk or a remote site or a branch of a remote s...

Page 50: ...local browser unless you specify a testing server or select the Preview Using Temporary File option in Edit Preferences Preview In Browser This is because browsers don t recognize site roots servers do HTTP Address The URL that your website will use This enables Dreamweaver to verify links within the site that use absolute URLs or site root relative paths Dreamweaver also uses this address to make...

Page 51: ... Web based Distributed Authoring and Versioning Use this setting if you connect to your web server using the WebDAV protocol For this access method you must have a server that supports this protocol such as Microsoft Internet Information Server IIS 5 0 or an appropriately configured installation of Apache web server Note If you select WebDAV as your access method and you are using Dreamweaver in a...

Page 52: ...lect Use Extended Data Connection Type IPv6 if you are using an IPv6 enabled FTP server With the deployment of version 6 of the Internet Protocol IPv6 EPRT and EPSV have replaced the FTP commands PORT and PASV respectively Thus if you are trying to connect to an IPv6 enabled FTP server you must use the extended passive EPSV and the extended active EPRT commands for your data connection For more in...

Page 53: ...ettings 7 Click Save if you want Dreamweaver to remember your password each time you start a new session 8 Select Maintain Synchronization Information if you want Dreamweaver to automatically synchronize your local and remote files This option is selected by default 9 Select Automatically Upload Files To Server On Save if you want Dreamweaver to upload your file to your remote site when you save t...

Page 54: ... t know your user name and password check with your system administrator Select the Save option if you want Dreamweaver to remember your settings 5 Click OK to return to the Site Definition dialog box 6 Select Automatically Upload Files To Server On Save if you want Dreamweaver to upload your file to your remote site when you save the file 7 Deselect Check Out Files When Opening if you do not want...

Page 55: ...up of an existing site on your local disk or a remote site or a branch of a remote site whether it was created in Dreamweaver or not select Site Manage Sites select your site from the list and click Edit Note If you haven t defined any Dreamweaver sites the Site Definition dialog box appears and you don t need to click New 2 Select Testing Server in the Advanced tab of the Site Definition dialog b...

Page 56: ...n time connection to provide you with useful information about the database such as the names of the tables in your database and the names of the columns in your tables A URL prefix comprises the domain name and any of your website s home directory s subdirectories or virtual direc tories Note The terminology used in Microsoft IIS may vary from server to server but the same concepts apply to most ...

Page 57: ...ven if you didn t use Dreamweaver to create the original site 1 Create a local folder to contain the existing site and set up the folder as the local folder for the site Note You must locally duplicate the entire structure of the relevant branch of the existing remote site 2 Set up a remote folder using the remote access information about the existing site You must connect to the remote site to do...

Page 58: ...e you want to save the site and click Save Dreamweaver saves each site s settings as an XML file with an ste file extension 4 If you want to back up your site settings select the first option and click OK Dreamweaver saves remote server login information such as the user name and password as well as local path information 5 If you want to share your settings with other users select the second opti...

Page 59: ... pages open a page for editing add new pages to the site create links between files and change page titles The site map is ideal for laying out a site structure You can set up the entire structure of the site and then create a graphic image of the site map Note The site map applies to local sites only To create a map of a remote site copy the contents of the remote site into a folder on your local...

Page 60: ... by doing one of the following Select Site Manage Sites choose the site and click Edit In the Files panel select Manage Sites from the menu where the current site server or drive appears and click Edit 2 In the Site Definitions dialog box select Site Map Layout from the Category list on the left and set the options Number Of Columns Sets the number of pages to display per row in the site map windo...

Page 61: ... Create a new file and add a link in the site map 1 Select a file in the site map or Right click Windows or Control click Macintosh and then select Link To New File 2 Enter a name title and text for the link and click OK Dreamweaver saves the file in the same folder as the selected file If you add a new file to a hidden branch the new file is also hidden Modify the title of a page in the site map ...

Page 62: ...l Window Files click the options menu in the upper right corner then select View Site Map Options Show Hide Link Show or hide hidden files in the site map In the collapsed default Files panel Window Files click the options menu in the upper right corner and select View Site Map Options Show Files Marked As Hidden Show dependent files in the site map 1 In the collapsed default Files panel Window Fi...

Page 63: ...reamweaver Managing Contribute sites Adobe Contribute CS3 combines a web browser with a 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 can add and update basic web content including formatted text images tables and links Contribute site administrators can limit wha...

Page 64: ...ML tags and name your CSS styles clearly If the Contribute users use a standard set of styles in Microsoft Word use the same names for the CSS styles so that Contribute can map the styles when a user copies information from a Word document and pastes it into a Contribute page To prevent a CSS style from being available to Contribute users change the name of the style so that the name starts with m...

Page 65: ...ss For more information about Contribute permissions see Administering Contribute in Contribute Help Contribute special files Contribute uses a variety of special files that aren t intended to be viewed by visitors to your site The shared settings file which has an obfuscated filename with a CSI extension appears in a folder named _mm in the root folder of the site and contains information that Co...

Page 66: ...r connection with Contribute users When you enable Contribute compatibility Dreamweaver automatically enables Design Notes including the Upload Design Notes For Sharing option and the Check In Check Out system If Contribute Publishing Server CPS is enabled on the remote site you are connecting to Dreamweaver notifies the CPS every time you trigger a network operation such as checking in rolling ba...

Page 67: ...u give Contribute users the connection information they need to edit pages use Dreamweaver to create the basic folder hierarchy for your site and to create any templates and CSS style sheets needed for the site 1 Select Site Manage Sites 2 Select a site click Edit and click the Advanced tab 3 Select the Contribute category from the category list on the left 4 Click the Administer Site in Contribut...

Page 68: ...you can t give users read access to the Templates folder you can still make the templates available to users 1 Set up the Contribute site so that its root folder is the folder you want users to see as the root 2 Manually copy the template folder from the main site s root folder into the Contribute site s root folder using the Files panel 3 After you update templates for the main site recopy the ch...

Page 69: ...inistrator for help Troubleshoot Contribute administration tools 1 On the server make sure that you have read and write permissions and executable permissions if necessary for the _mm folder 2 Make sure that the _mm folder contains a shared settings file with a CSI extension 3 If it doesn t use the Connection Wizard Windows or Connection Assistant Macintosh to create a connection to the site and t...

Page 70: ...ure FTP SFTP for secure FTP authentication and click OK SFTP uses encryption and public keys to secure a connection to your testing server Note Your server must be running an SFTP server 12 Click OK The Files panel displays the contents of the remote server folder you connected to and the server name appears in the pop up menu at the top of the panel See also Set up a remote folder on page 43 Conn...

Page 71: ...t folder you should enter the URL in the HTTP Address text box to ensure that the path to the linked image on the remote server is SalesApp images Set Basic tab Editing Files Part 2 options The purpose of this dialog box is to indicate whether you are building a web application A web application is a collection of web pages that interact with the user with each other and with various resources on ...

Page 72: ...ick Test URL to ensure that your URL works See also Set up a testing server on page 48 About the URL prefix for the testing server on page 49 Set Basic tab Testing Files options remote access The purpose of this dialog box is to select an access method for Dreamweaver to access your testing server Dreamweaver works with a testing server to generate and display dynamic content while you work The te...

Page 73: ...er Dreamweaver works with a testing server to generate and display dynamic content while you work The testing server can be your local computer a development server a staging server or a production server As long as the server can process the kind of dynamic pages you plan to develop the choice doesn t matter Select an access method from the pop up menu and fill out the appropriate text boxes None...

Page 74: ... doesn t check the file out even when this option is selected 3 Enter your name Your name appears in the Files panel alongside any files that you checked out this enables team members to commu nicate when they are sharing files If you work alone from several different machines use a different check out name on each machine for example AmyR HomeMac and AmyR OfficePC so you ll know where the latest ...

Page 75: ...le and background colors and several other page properties in either Design view or Code view Dreamweaver file types You can work with a variety of file types in Dreamweaver The primary kind of file you will work with is the HTML file HTML files or Hypertext Markup Language files contain the tag based language responsible for displaying a web page in a browser You can save HTML files with either t...

Page 76: ... of columns Fixed Column width is specified in pixels The column does not resize based on the size of the browser or the site visitor s text settings Elastic Column width is specified in a unit of measurement ems relative to the size of the text The design adapts if the site visitor changes the text settings but does not change based on the size of the browser window Liquid Column width is specifi...

Page 77: ...e To do this click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet 7 Click Preferences if you want to set default document preferences such as a document type encoding and a file extension 8 Click Get More Content if you want to open Dreamweaver Exchange where you can download more page design content 9 Click the Create button 10 Save the new document File S...

Page 78: ...e an HTML document XHTML compliant by selecting XHTML 1 0 Transi tional or XHTML 1 0 Strict from the menu XHTML Extensible Hypertext Markup Language is a reformulation of HTML as an XML application Generally using XHTML gives you the benefits of XML while ensuring the backward and future compatibility of your web documents Note For more information about XHTML see the World Wide Web Consortium W3C...

Page 79: ... pages with CSS on page 145 Creating and managing templates on page 387 Setting up a Dreamweaver site on page 40 Set default document type and encoding on page 74 Create a page based on an existing template You can select preview and create a new document from an existing template You can either use the New Document dialog box to select a template from any of your Dreamweaver defined sites or use ...

Page 80: ...document s design elements in the New Document dialog box In the case of CSS style sheets you can copy a predesigned style sheet and apply it to your documents Note If you create a document based on a predefined frameset only the frameset structure is copied not the frame contents additionally you must save each frame file separately 1 Select File New 2 In the New Document dialog box select the Pa...

Page 81: ...d for other file types Default Document Type DDT Select one of the XHTML document type definitions DTD to make new pages XHTML compliant For example you can make an HTML document XHTML compliant by selecting XHTML 1 0 Transitional or XHTML 1 0 Strict from the menu Default Encoding Specify the encoding to be used when a new page is created as well as when a document is opened that does not specify ...

Page 82: ...ments You can define the default file extension of HTML documents created in Dreamweaver For example you can use an htm or html extension for all new HTML documents 1 Select Edit Preferences Windows or Dreamweaver Preferences Macintosh You can also click the Preferences button in the New Document dialog box to set new document preferences when you create a new document 2 Click New Document from th...

Page 83: ...display the HTML file Retain a copy of your original Word doc file as a backup because you may not be able to reopen the HTML document in Word once you ve applied the Clean Up Word HTML feature To clean up HTML or XHTML that was not generated by Microsoft Word use the Cleanup HTML command 1 Save your Microsoft Word document as an HTML file Note In Windows close the file in Word to avoid a sharing ...

Page 84: ...her customize the Remove All Word Specific Markup and Clean Up CSS options and then click OK See also Clean up code on page 326 Import Microsoft Office documents Windows only on page 234 Managing files and folders About managing files and folders Dreamweaver includes a Files panel that helps you manage and transfer files to and from a remote server When you transfer files between local and remote ...

Page 85: ...ory lists Use this button to manually refresh the directory lists if you deselected either Refresh Local File List Automatically or Refresh Remote File List Automatically in the Site Definition dialog box Get File s Copies the selected files from the remote site to your local site overwriting the existing local copy of the file if any If Enable File Check In And Check Out is enabled the local copi...

Page 86: ... customize the Files panel by changing the view either your local or remote site that appears by default in the collapsed panel Or you can switch the content views in the expanded Files panel using the Always Show option See also Set up a remote folder on page 43 Set up a testing server on page 48 Working with a visual map of your site on page 52 Open or close the Files panel Select Window Files E...

Page 87: ...tton for the remote site Testing Server button or Site Map button in the toolbar A Site Files B Testing Server C Site Map If you click the Site Map button you can choose to view the site map with site files or to view the site map only Note Before you can view a remote site or a testing server you must set up a remote site or testing server Before you can view a site map you must set up a home pag...

Page 88: ...lect the file or folder you want to delete 2 Right click Windows or Control click Macintosh then select Delete Rename a file or folder 1 In the Files panel Window Files select the file or folder you want to rename 2 Do one of the following to activate the name of the file or folder Click in the filename pause then click again Right click Windows or Control click Macintosh the file s icon then sele...

Page 89: ...ver 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 Checked Out Files Dreamweaver selects the files in the Files panel Find a selected file in your local or remote site 1 Select the file in the Local or Remote view of the Files panel Window Files 2 Right click Windows or Control click Macintosh then select L...

Page 90: ...are running the report for more than one site this option is not available Other Location if you want to enter a path in the text box 5 Click OK to save your settings Dreamweaver highlights the files that were modified within the selected time frame in the Files panel Identify and delete unused files You can identify and delete files that are no longer used by other files in your site 1 Select Sit...

Page 91: ...Access a local drive or your desktop 1 In the Files panel Window Files select Desktop Local Disk or CD Drive from the menu where the current site server or drive appears 2 Navigate to a file then do any of the following Open files in Dreamweaver or another application Rename files Copy files Delete files Drag files When you drag a file from one Dreamweaver site to another or to a folder that is no...

Page 92: ... uploading and checking in files no need if up to date copies are already at the destination If you deselect these options your dependent files are not transferred Therefore to force the Dependent Files dialog box to appear even when these options are deselected hold down Alt Windows or Option Macintosh while choosing the Get Put Check In or Check Out commands FTP Connection Determines whether the...

Page 93: ...stom columns only Change the order of the columns Select a column name and then click the up or down arrow button to change the position of the selected column Note You can change the order of any column except Name which is always the first column Add delete or change detail columns 1 Select Site Manage Sites 2 Select a site then click Edit 3 Select File View Columns from the Category list on the...

Page 94: ...ere s no need to download them again This is also true for uploading and checking in files no need if up to date copies are already at the remote site Library items are treated as dependent files Some servers report errors when putting library items However you can cloak these files to prevent them from being transferred See also Checking in and checking out files on page 91 Enable and disable sit...

Page 95: ... select these files in the Remote view but you can select the corresponding files in the Local view if you prefer If the Remote view is active then Dreamweaver copies the selected files to the local site if the Local view is active then Dreamweaver copies the remote versions of the selected local files to the local site Note To get only those files for which the remote version is more recent than ...

Page 96: ... checked out status There are two common situations in which you might use the Put command instead of Check In You re not in a collaborative environment and you aren t using the Check In Check Out system You want to put the current version of the file on the server but you re going to keep editing it Note If you put a file that didn t previously exist on the remote site and you re using the Check ...

Page 97: ...d to upload them again To stop the file transfer click Cancel in the status dialog box The transfer may not stop immediately A lock symbol appears beside the local file s icon indicating that the file is now read only Important If you check in the currently active file the file may be automatically saved before it s checked in depending on the preference options you ve set Put files on a remote se...

Page 98: ...se the Check In Check Out system with a testing server Checking out a file is the equivalent of declaring I m working on this file now don t touch it When a file is checked out the name of the person who checked out the file is displayed in the Files panel along with a red check mark if a team member checked out the file or green check mark if you checked out the file next to the file s icon Check...

Page 99: ... each machine for example AmyR HomeMac and AmyR OfficePC so you ll know where the latest version of the file is if you forget to check it in Email Address If you enter an e mail address when you check out a file your name appears in the Files panel as a link blue and underlined next to that file If a team member clicks on the link their default e mail program opens a new message with the user s e ...

Page 100: ...les along with the selected files or click No to refrain from downloading dependent files The default is to not download dependent files You can set this option at Edit Preferences Site Note It s usually a good idea to download dependent files when checking out a new file but if the latest versions of the dependent files are already on the local disk there s no need to download them again A green ...

Page 101: ...ptions you ve set Undo a file check out If you check out a file then decide not to edit it or decide to discard the changes you made you can undo the check out operation and the file returns to its original state To undo a file check out do one of the following Open the file in the Document window then select Site Undo Check Out In the Files panel Window Files right click Windows or Control click ...

Page 102: ...only select Selected Local Files Only or Selected Remote Files Only if the Remote view of the Files panel was where you made the most recent selection 5 Select the direction in which you want to copy the files Put Newer Files To Remote Uploads all the local files that don t exist on the remote server or have changed since the last upload Get Newer Files From Remote Downloads all the remote files t...

Page 103: ... two remote files is also useful if you keep previous renamed versions of your files If you ve forgotten the changes made to a file from a previous version a quick comparison will remind you Before you start you must install a third party file comparison tool on your system For more information on file comparison tools use a web search engine such as Google Search to search for file comparison or ...

Page 104: ...ver by selecting Remote View from the right pop up menu 2 Control click Windows or Command click Macintosh the two files to select them 3 Right click one of the selected files and select Compare Remote Files from the context menu Note If you have a one button mouse Control click one of the selected files instead The file comparison tool starts and compares the two files Compare a local file to a r...

Page 105: ...ation with the option of seeing the differ ences 2 To view the differences click the Compare button The file comparison tool starts and compares the two files If you haven t specified a file comparison tool you are prompted to specify one 3 After you ve reviewed or merged the changes in the tool you can proceed with the Put operation or cancel it Compare files when synchronizing You can compare th...

Page 106: ...site About site cloaking Site cloaking enables you to exclude folders and file types from operations such as Get or Put You can cloak individual folders but not individual files To cloak files you must select a file type and Dreamweaver cloaks all files of that type Dreamweaver remembers your settings for each site so that you don t have to make selections each time you work on that site For examp...

Page 107: ...ing With to enable or disable cloaking for specific file types You can enter or delete file suffixes in the text box that you want to cloak or uncloak 4 Click OK Cloak and uncloak site folders You can cloak specific folders but you cannot cloak all folders or an entire site When you cloak specific folders you can cloak multiple folders at the same time 1 In the Files panel Window Files select a se...

Page 108: ...cintosh then select Cloaking Settings 3 In the Advanced Site Definition dialog box do one of the following Deselect the Cloak Files Ending With option to uncloak all the file types listed in the box Delete specific file types from the box to uncloak those file types 4 Click OK The red lines disappear from the affected files indicating that they are uncloaked Uncloak all folders and files You can u...

Page 109: ...use gif might contain the following line fw_source file Mydisk sites assets orig myhouse png A similar Flash Design Note might contain the following line fl_source file Mydisk sites assets orig myhouse fla Note To share Design Notes users should define the same site root path for example sites assets orig When you import the graphic into Dreamweaver the Design Notes file is automatically copied in...

Page 110: ...ou create with the template do not inherit the Design Notes 1 Do one of the following Open the file in the Document window and select File Design Notes In the Files panel right click Windows or Control click Macintosh the file and select Design Notes Note If the file resides in a remote site you must first check out or get the file and then select it in the local folder 2 In the Basic Info tab sel...

Page 111: ...ew status value appears in the Status pop up menu Note You can have only one custom value in the status menu at a time If you follow this procedure again Dreamweaver replaces the status value you entered the first time with the new status value you enter Delete unassociated Design Notes from your site 1 Select Site Manage Sites 2 Select the site and click Edit 3 In the Site Definition dialog box s...

Page 112: ...sists of one large table in some browsers visitors will see nothing until the entire table finishes loading Consider breaking up large tables if this is not possible consider putting a small amount of content such as a welcome message or an advertising banner outside the table at the top of the page so users can view this material while the table downloads 5 Run a few site reports to test and trou...

Page 113: ...rts in Dreamweaver on page 26 Test links in Dreamweaver on page 289 Add and manage extensions in Dreamweaver on page 710 Run reports to test a site 1 Select Site Reports 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 2 Select what to report on from the Repor...

Page 114: ...ing all the untitled documents found within the selected parameters Dreamweaver reports all documents with default titles duplicate titles or missing title tags 5 Click Run to create the report Depending on the type of report you run you might be prompted to save your file define your site or select a folder if you haven t already done so A list of results appears in the Site Reports panel in the ...

Page 115: ...ce in your web pages The assets in a library are called library items Items that you can store in a library include images tables sounds and Flash files You can automatically update all the pages that use a library item whenever you edit the item For example suppose you re building a large site for a company that wants a slogan to appear on every page You can create a library item to contain the s...

Page 116: ...you insert the library item into a document Dreamweaver automatically inserts the appropriate JavaScript functions into the head section of that document if they aren t already there Note If you hand code JavaScript that is if you create it without using Dreamweaver behaviors you can make it part of a library item if you use the Call JavaScript behavior to execute the code If you don t use a Dream...

Page 117: ...e Movies QuickTime or MPEG files Scripts JavaScript or VBScript files Scripts in HTML files rather than in independent JavaScript or VBScript files do not appear in the Assets panel Templates Master page layouts used on multiple pages Modifying a template automatically modifies all pages attached to it Library items Design elements that you use in multiple pages when you modify a library item all ...

Page 118: ...he Refresh Site List button Dreamweaver creates the site cache or updates it as necessary To refresh the Site list and manually rebuild the site cache right click Windows or Command click Macintosh in the Assets list then select Refresh Site List Add an asset to a document You can insert most assets into a document by dragging them into the Code view or Design view in the Document window or by usi...

Page 119: ...d in the Sites view by default The Favorites view holds URLs that you have added yourself 3 Select the URL 4 Do one of the following Drag the URL from the panel to the selection in the Design view Select the URL then click Apply Select and edit assets The Assets panel allows you to select multiple assets at once It also provides a quick way to begin editing assets See also Start an external editor...

Page 120: ...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 individual assets or an entire Favorites folder at once You may need to locate the file in the Files panel that corresponds to an asset in the Assets panel before you transfer the asset to or from your remote site Note The Files panel might show a different site from t...

Page 121: ...ways to add assets to your site s Favorites list in the Assets panel Adding a color or URL to the Favorites list requires an extra step You can t add new colors or URLs to the Site list the Site list contains only assets that are already in use in your site Note There are no Favorites lists for templates and library items See also Assets panel overview on page 109 Use the color picker on page 223 ...

Page 122: ...nstance PageBackgroundColor rather than 999900 to assets only in the Favorites list The Site list retains their real filenames or values in the case of colors and URLs 1 In the Assets panel Window Assets select the category that contains your asset 2 Select the Favorites option at the top of the panel 3 Do one of the following Right click Windows or Control click Macintosh the asset s name or icon...

Page 123: ... If something is selected it will be placed in the new library item 2 In the Assets panel select the Library category 3 Click the New Library Item button at the bottom of the panel 4 While the item is still selected enter a name for it then press Enter Windows or Return Macintosh Insert a library item into a document When you add a library item to a page the actual content is inserted in the docum...

Page 124: ...e local site that use the library item Select Update to update immediately If you select Don t Update documents won t be updated until you choose Modify Library Update Current Page or Update Pages Update the current document to use the current version of all library items Select Modify Library Update Current Page Update the entire site or all documents that use a particular library item 1 Select M...

Page 125: ...ighlighting by setting Highlighting prefer ences See also Use the color picker on page 223 Change the highlight color of library items 1 Select Edit Preferences Windows or Dreamweaver Preferences Macintosh 2 Select the Highlighting category from the list on the left of the Preferences dialog box 3 Click the Library Items color box then select a highlight color using the color picker or enter the h...

Page 126: ...ary item replacing the item in the library with the edited item from your document 1 Open a document that contains the library item Note the name of the library item as well as the exact tags it contains You ll need this information later 2 Select the library item and then click Detach From Original in the Property inspector Window Properties 3 Select the element that has the behavior attached to ...

Page 127: ...ic fonts and font sizes bold italics underlining and text shadows text color and background color link color and link underlining and much more By using CSS to control your fonts you can also ensure a more consistent treatment of your page layout and appearance in multiple browsers In addition to text formatting you can use CSS to control the format and positioning of block level elements in a web...

Page 128: ... is immediately updated Advanced styles redefine the formatting for a particular combination of elements or for other selector forms as allowed by CSS for example the selector td h2 applies whenever an h2 header appears inside a table cell Advanced styles can also redefine the formatting for tags that contain a specific id attribute for example the styles defined by myStyle apply to all tags that ...

Page 129: ...mes New Roman Medium font by default As the author of a web page however you can create a style sheet that overrides the browser s default style for paragraph font and font size For example you can create the following rule in your style sheet p font family Arial font size small When a user loads the page the paragraph font and font size settings set by you as the author override the default parag...

Page 130: ...ent You can also use the CSS Styles panel to create and edit CSS rules and properties The CSS Styles panel is a much more robust editor than the Property inspector and displays all CSS rules defined for the current document whether those rules are embedded in the head of the document or in an external style sheet Adobe recommends that you use the CSS Styles panel rather than the Property inspector...

Page 131: ...oblems caused by a shorthand rule overriding a longhand rule If you open a web page that was coded with shorthand CSS notation in Dreamweaver be aware that Dreamweaver will create any new CSS rules using the longhand form You can specify how Dreamweaver creates and edits CSS rules by changing the CSS editing preferences in the CSS Styles category of the Preferences dialog box Edit Preferences in W...

Page 132: ... dividers The Summary for Selection pane displays a summary of CSS properties and their values for the item currently selected in the active document The summary shows the properties for all rules that directly apply to the selection Only set properties are shown For example the following rules create a class style and a tag in this case paragraph style foo color green font family Arial p font fam...

Page 133: ... the Summary for Selection pane will display all of the properties defined by the maintext rule in the Properties pane as well as the selected maintext rule in the Rules pane Additionally selecting any rule in the Rules pane displays that rule s properties in the Properties pane You can then use the Properties pane to quickly modify your CSS whether it is embedded in the current document or linked...

Page 134: ...tyle sheet By default the Properties pane shows only those properties that have been previously set and arranges them in alphabetical order You can choose to display properties in two other views Category view displays properties grouped into categories such as Font Background Block Border and so on with set properties at the top of each category List view displays an alphabetical list of all avai...

Page 135: ...ne an HTML tag or to define a CSS selector Edit Style Opens a dialog box in which you can edit the styles in the current document or in an external style sheet Delete CSS Rule Removes the selected rule or property from the CSS Styles panel and removes the formatting from any element to which it was applied It does not however remove class or ID properties referenced by that style The Delete CSS Ru...

Page 136: ...ers and numbers for example myhead1 If you don t enter a beginning period Dreamweaver automatically enters it for you To redefine the default formatting of a specific HTML tag select the Tag option and then enter an HTML tag in the Tag text box or select one from the pop up menu To define the formatting for a particular combination of tags or for all tags that contain a specific Id attribute selec...

Page 137: ...efault setting for links is Underline When you set the link setting to none you can remove the underline from links by defining a special class The decoration attribute is supported by both browsers Weight Applies a specific or relative amount of boldface to the font Normal is equivalent to 400 Bold is equivalent to 700 The weight attribute is supported by both browsers Variant Sets the small caps...

Page 138: ...en the CSS Styles panel Shift F11 if it isn t already open 2 Double click an existing rule or property in the top pane of the CSS Styles panel 3 In the CSS Rule Definition dialog box select Block then set any of the following style properties Leave the property blank if it is not important to the style Word Spacing Sets the spacing between words To set a specific value in the pop up menu select Va...

Page 139: ...d an element Other elements wrap around the floating element as usual The Float attribute is supported by both browsers Clear Defines the sides that do not allow AP elements If an AP element appears on the clear side the element with the clear setting moves below it The Clear attribute is supported by both browsers Padding Specifies the amount of space between the content of an element and its bor...

Page 140: ...yles panel Shift F11 if it isn t already open 2 Double click an existing rule or property in the top pane of the CSS Styles panel 3 In the CSS Rule Definition dialog box select List and set any of the following style properties Leave the property blank if it is not important to the style Type Sets the appearance of bullets or numbers Type is supported by both browsers Bullet Image Lets you specify...

Page 141: ...ontents of a container for example a DIV or a P exceed its size These properties control the expansion as follows Visible increases the container s size so that all of its contents are visible The container expands down and to the right Hidden maintains the container s size and clips any content that doesn t fit No scroll bars are provided Scroll adds scroll bars to the container regardless of whe...

Page 142: ...lect an effect from the pop up menu 4 When you are finished setting these options select another CSS category on the left side of the panel to set additional style properties or click OK Edit a CSS rule You can easily edit both internal and external rules that you have applied to a document When you edit a CSS style sheet that controls the text in your document you instantly reformat all of the te...

Page 143: ...et Properties view is selected in the Properties pane click the Add Properties link and add a property If Category view or List view is selected in the Properties pane fill in a value for the property you want to add Apply remove or rename class styles Class styles are the only type of CSS style that can be applied to any text in a document regardless of which tags control the text All class style...

Page 144: ...to rename and select Rename Class You can also rename a class by selecting Rename Class from the CSS Styles panel options menu 2 In the Rename Class dialog box make sure that the class you want to rename is selected in the Rename Class pop up menu 3 In the New Name text box enter the new name for the new class and click OK If the class you re renaming is internal to the head of the current documen...

Page 145: ...he rules you want to select In Code view select the rule or rules you want to move Then right click the selection and select CSS Styles Move CSS Rules from the context menu Note Partial selection of a rule will result in the relocation of the entire rule 2 In the Move To External Style Sheet dialog box select an existing style sheet from the pop up menu or browse to an existing style sheet and cli...

Page 146: ...ight corner of the panel 3 Do one of the following Click Browse to browse to an external CSS style sheet Type the path to the style sheet in the File URL box 4 For Add As select one of the options To create a link between the current document and an external style sheet select Link This creates a link href tag in the HTML code and references the URL where the published style sheet is located This ...

Page 147: ... code formatting preferences apply to CSS rules in external or embedded style sheets only not to in line styles See also Change the code format on page 309 Set CSS code formatting preferences 1 Select Edit Preferences 2 In the Preferences dialog box select the Code Format category 3 Next to Advanced Formatting click the CSS button 4 In the CSS Source Format Options dialog box select the options th...

Page 148: ...tial bug that it finds Dreamweaver also provides a direct link to documentation about the bug on Adobe CSS Advisor a website that details commonly known browser rendering bugs and offers solutions for fixing them By default the BCC feature checks against the following browsers Firefox 1 5 Internet Explorer Windows 6 0 and 7 0 Internet Explorer Macintosh 5 2 Netscape Navigator 8 0 Opera 8 0 and 9 0...

Page 149: ... select the checkboxes next to those browser names and select 5 0 from the Internet Explorer pop up menu and 7 0 from the Netscape pop up menu Exclude an issue from the browser compatibility check 1 Run a browser compatibility check 2 In the Results panel Right click Windows or Control click Macintosh the issue that you want to exclude from future checking 3 Select Ignore Issue from the context me...

Page 150: ... disable styles for an entire page using the Style Rendering toolbar To display the toolbar select View Toolbars Style Rendering The Toggle Displaying of CSS Styles button the right most button works independently of the other media buttons on the toolbar To use a Design time style sheet follow these steps 1 Open the Design Time Style Sheets dialog box by doing one of the following Right click in ...

Page 151: ...f that folder does not exist Dreamweaver creates it You can save the file to another location by clicking Browse and browsing to another folder 7 When you find a style sheet whose formatting rules meet your design criteria click OK Update CSS style sheets in a Contribute site Adobe Contribute users can t make changes to a CSS style sheet To change a style sheet for a Contribute site use Dreamweave...

Page 152: ...akes it easy for you to build pages with CSS layouts by providing over 30 pre designed layouts that work across different browsers Using the pre designed CSS layouts that come with Dreamweaver is the easiest way to create a page with a CSS layout but you can also create CSS layouts using Dreamweaver absolutely positioned elements AP elements An AP element in Dreamweaver is an HTML page element spe...

Page 153: ...vallis luctus rutrum erat nulla fermentum diam at nonummy quam ante ac quam p div div In the above example there is no styling attached to any of the div tags Without CSS rules defined each div tag and its contents fall into a default location on the page However if each div tag has a unique id as in the above example you can use the ids to create CSS rules that when applied change the style and p...

Page 154: ...ackground a top and bottom padding of 15 pixels a right padding of 10 pixels and a left padding of 20 pixels Additionally the rule positions the sidebar div tag with float left a property that pushes the sidebar div tag to the left side of the container div tag The results of applying the rule to the sidebar div tag are as follows Sidebar div float left A Width 200 pixels B Top and bottom padding ...

Page 155: ... the mainContent div are as follows Main Content div left margin of 250 pixels A 20 pixels left padding B 20 pixels right padding C 20 pixels bottom padding The complete code looks as follows head meta http equiv Content Type content text html charset iso 8859 1 title Untitled Document title style type text css container width 780px background FFFFFF margin 0 auto border 1px solid 000000 text alig...

Page 156: ...out When creating a new page in Dreamweaver you can create one that already contains a CSS layout Dreamweaver comes with over 30 different CSS layouts that you can choose from Additionally you can create your own CSS layouts and add them to the configuration folder so that they appear as layout choices in the New Document dialog box Dreamweaver CSS layouts render correctly in the following browser...

Page 157: ... needed for the layout This option is particularly useful when you want to use the same CSS layout the CSS rules for which are contained in a single file across multiple documents 7 Do one of the following If you selected Add to Head from the Layout CSS in pop up menu the default option click Create If you selected Create New File from the Layout CSS pop up menu click Create and then specify a nam...

Page 158: ...ement specifically a div tag or any other tag that has an absolute position assigned to it AP elements can contain text images or any other content that you can place in the body of an HTML document With Dreamweaver you can use AP elements to lay out your page You can place AP elements in front of and behind each other hide some AP elements while showing others and move AP elements across the scre...

Page 159: ...ows AP Div or any AP element outlines by disabling both AP Element Outlines and CSS Layout Outlines in the View Visual Aids menu You can also enable backgrounds and the box model for AP elements as a visual aid while you design After you create an AP Div you can add content to it by simply placing your insertion point in the AP Div and then adding content just as you would add content to a page Se...

Page 160: ...h nested AP Divs A nested AP Div is an AP Div that has code contained within the tags of another AP Div For example the following code shows two AP Divs that are not nested and two AP Divs that are nested div id apDiv1 div div id apDiv2 div div id apDiv3 div id apDiv4 div div The graphical depiction for either set of AP Divs might look as follows In the first set of div tags one div is sitting on ...

Page 161: ...ify the default settings for new AP elements you create 1 Select Edit Preferences Windows or Dreamweaver Preferences Macintosh 2 Select AP elements from the Category list on the left and specify any of the following preferences and then click OK Visibility Determines whether AP elements are visible by default The options are default inherit visible and hidden Width and Height Specify a default wid...

Page 162: ...retch when the AP element appears in a browser unless the Overflow property is set to Visible The default unit for position and size is pixels px You can instead specify the following units pc picas pt points in inches mm millimeters cm centimeters or percentage of the parent AP element s corresponding value The abbreviations must follow the value without a space for example 3mm indicates 3 millim...

Page 163: ...per left corner of the AP element set L to 0 T to 0 R to 50 and B to 75 Note Although CSS specifies different semantics for clip Dreamweaver interprets clip the way that most browsers do 4 If you entered a value in a text box press Tab or Enter Windows or Return Macintosh to apply the value View or set properties for multiple AP elements When you select two or more AP elements the Property inspect...

Page 164: ...acintosh to apply the value AP Elements panel overview You use the AP Elements panel Window AP Elements to manage the AP elements in your document Use the AP Elements panel to prevent overlaps to change the visibility of AP elements to nest or stack AP elements and to select one or more AP elements Note An AP element in Dreamweaver is an HTML page element specifically a div tag or any other tag th...

Page 165: ...Change the stacking order of AP elements using the AP Elements panel 1 Select Window AP Elements to open the AP Elements panel 2 Drag an AP element up or down to the desired stacking order A line appears as you move the AP element indicating where the AP element will appear Release the mouse button when the placement line appears in the desired place in the stacking order Change the stacking order...

Page 166: ...o resize the AP element To resize by dragging drag any of the AP element s resize handles To resize one pixel at a time hold down Control Windows or Option Macintosh while pressing an arrow key The arrow keys move the right and bottom borders of the AP element you can t resize using the top and left borders with this technique To resize by the grid snapping increment hold down Shift Control Window...

Page 167: ... of the last selected AP element highlighted in black Converting AP elements to tables Instead of using tables or Layout mode to create your layout some web designers prefer to work with AP elements Dreamweaver enables you to create your layout using AP elements then if you want convert them into tables For example you might need to convert your AP elements to tables if you need to support browser...

Page 168: ...ion is enabled you cannot edit the resulting table by dragging its columns When this option is disabled the resulting table will not contain transparent GIFs but the widths of the columns may vary from browser to browser Center On Page Centers the resulting table on the page If this option is disabled the table starts at the left edge of the page Convert tables to AP Divs 1 Select Modify Convert T...

Page 169: ...eate page layouts by manually inserting div tags and applying CSS positioning styles to them A div tag is a tag that defines logical divisions within the content of a web page You can use div tags to center blocks of content create column effects create different areas of color and much more If you re unfamiliar using div tags and Cascading Style Sheets CSS to create web pages you can create a CSS...

Page 170: ...text When you move the pointer over the edge of the box Dreamweaver highlights it If the div tag is absolutely positioned it becomes an AP element You can edit div tags that aren t absolutely positioned See also About AP elements in Dreamweaver on page 151 Create a page with a CSS layout on page 149 Edit div tags After you insert a div tag you can manipulate it or add content to it Note Div tags t...

Page 171: ...lowing changes and click OK To change the highlighting color for div tags click the Mouse Over color box and then select a highlight color using the color picker or enter the hexadecimal value for the highlight color in the text box To enable or disable highlighting for div tags select or deselect the Show checkbox for Mouse Over Note These options affect all objects such as tables that Dreamweave...

Page 172: ...del that is padding and margins of the selected CSS layout block View CSS layout blocks You can enable or disable CSS layout block visual aids as necessary View CSS layout block outlines Select View Visual Aids CSS Layout Outlines View CSS layout block backgrounds Select View Visual Aids CSS Layout Backgrounds View CSS layout block box models Select View Visual Aids CSS Layout Box Model You can al...

Page 173: ...not require any ActiveX controls plug ins or Java applets but do require JavaScript Note The word dynamic can mean different things in different web related contexts Don t confuse Dynamic HTML with the idea of a dynamic web page which means a web page generated dynamically by server side code before being served to a visitor Timelines allow you to change the position size visibility and stacking o...

Page 174: ...ps The default setting of 15 frames per second is a good average rate to use for most browsers running on common Windows and Macintosh systems Note Faster rates may not improve performance Browsers always play every frame of the animation even if they cannot attain the specified frame rate The frame rate is ignored if it is higher than the browser can manage Context menu Contains various timeline ...

Page 175: ... Select Modify Timeline Add Object To Timeline or simply drag the selected AP element into the Timelines panel A bar appears in the first channel of the timeline The name of the AP element appears in the bar 5 Click the keyframe marker at the end of the bar 6 Move the AP element on the page to where it should be at the end of the animation A line appears showing the path of the animation in the Do...

Page 176: ...r or later move the keyframe marker left or right in the bar To change the start time of an animation select one or more of the bars associated with the animation press Shift to select more than one bar at a time and drag left or right To shift the location of an entire animation path select the entire bar and then drag the object on the page Dreamweaver adjusts the position of all keyframes Makin...

Page 177: ...elements on page 158 Use multiple timelines Instead of trying to control all the action on a page with one timeline it s easier to work with separate timelines that control discrete parts of the page For example a page might include interactive elements that each trigger a different timeline To create a new timeline select Modify Timeline Add Timeline To remove the selected timeline select Modify ...

Page 178: ...nimation sequence once and apply it to each of the remaining AP elements in your document 1 In the Timelines panel click the animation sequence to select it 2 Select Edit Copy to copy the sequence 3 Click any frame of the Timelines panel and paste the sequence Edit Paste at that frame 4 Right click Windows or Control click Macintosh the pasted animation sequence and select Change Object from the c...

Page 179: ...s to improve speed but be aware that most browsers running on average systems cannot animate much faster than 15 fps Test the animation on different systems with different browsers to find the best settings Don t animate large bitmaps Animating large images results in slow animations Instead create composites and move small parts of the image For example show a car moving by animating only the whe...

Page 180: ...ulers They help you place and align objects more precisely You can also use guides to measure the size of page elements or emulate the folds visible areas of web browsers To help you align elements you can snap elements to guides and snap guides to elements Elements must be absolutely positioned in order for the snap feature to work You can also lock guides to prevent them from being accidentally ...

Page 181: ...atch and select a color from the color picker or type a hexadecimal number in the text box Distance Color Specifies the color of the lines that appear as distance indicators when you hold the mouse pointer between guides Click the color swatch and select a color from the color picker or type a hexadecimal number in the text box Show Guides Makes guides visible in Design view Snap to Guides Makes p...

Page 182: ...imal number in the text box Show Grid Makes the grid visible in Design view Snap to Grid Makes page elements snap to the lines of the grid Spacing Controls how far apart the grid lines are Enter a number and select Pixels Inches or Centimeters from the menu Display Specifies whether the grid lines appear as lines or dots Note If Show Grid is not selected the grid does not appear in the document an...

Page 183: ... 0 0 Align the tracing image to a selected element 1 Select an element in the Document window 2 Select View Tracing Image Align with Selection The upper left corner of the tracing image is aligned with the upper left corner of the selected element 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 ...

Page 184: ...ground color or alignment is set to one value for the whole table and another value for individual cells cell formatting takes precedence over row formatting which in turn takes prece dence over table formatting The order of precedence for table formatting is as follows 1 Cells 2 Rows 3 Table For example if you set the background color for a single cell to blue then set the background color of the...

Page 185: ...he table with no border padding or spacing set Cell Padding and Cell Spacing to 0 Cell Padding Determines the number of pixels between a cell s border and its contents None Does not enable column or row headings for the table Left Makes the first column of the table a column for headings so that you can enter a heading for each row of the table Top Makes the first row of the table a row for headin...

Page 186: ...f the table Select Fit to Data to make each column wide enough to fit the longest text string in the column Select Set to specify a fixed table width in pixels or as a percentage of the browser window s width Border Specifies the width in pixels of the tables borders Cell Padding The number of pixels between a cell s content and the cell boundaries Cell Spacing The number of pixels between adjacen...

Page 187: ... edge of the table or on a row or column s border Note The pointer changes to the table grid icon when you can select the table unless you click a row or column border Click in a table cell then select the table tag in the tag selector at the lower left corner of the Document window Click in a table cell then select Modify Table Select Table Click in a table cell click the table header menu then s...

Page 188: ... category list on the left make either of the following changes and click OK To change the highlighting color for table elements click the Mouse Over color box then select a highlight color using the color picker or enter the hexadecimal value for the highlight color in the text box To enable or disable highlighting for table elements select or deselect the Show option for Mouse Over Note These op...

Page 189: ...sets the width of the whole table to its current width in pixels Convert Table Widths To Percent and Convert Table Heights To Percent set the width or height of each column in the table to its current width expressed as a percentage of the Document window s width also sets the width of the whole table to its current width as a percentage of the Document window s width Bg Color The table s backgrou...

Page 190: ...eader cells are bold and centered by default You can specify widths and heights as either pixels or percentages and you can convert from pixels to percentages and back Note When you set properties on a column Dreamweaver changes the attributes of the td tag corresponding to each cell in the column When you set certain properties for a row however Dreamweaver changes the attributes of the tr tag ra...

Page 191: ...wer right corner and change properties as necessary 3 Change the properties as necessary For more information on the options click the Help icon on the Property inspector Note When you set properties on a column Dreamweaver changes the attributes of the td tag corresponding to each cell in the column When you set certain properties for a row however Dreamweaver changes the attributes of the tr tag...

Page 192: ...ragging the borders of the column or row If you have trouble resizing you can clear the column widths or row heights and start over Note You can also change cell widths and heights directly in the HTML code using Code view Dreamweaver displays column widths along with column header menus at the tops or bottoms of columns when the table is selected or the insertion point is in the table you can ena...

Page 193: ...er resets the width specified in the code to match the visual width Clear all set widths or heights in a table 1 Select the table 2 Do one of the following Select Modify Table Clear Cell Widths or Modify Table Clear Cell Heights In the Property inspector Window Properties click the Clear Row Heights button or the Clear Column Widths button Click the table header menu then select Clear All Heights ...

Page 194: ...fies whether the new rows or columns should appear before or after the row or column of the selected cell Delete a row or column Do one of the following Click in a cell within the row or column you want to delete then select Modify Table Delete Row or Modify Table Delete Column Select a complete row or column then select Edit Clear or press Delete Add or delete rows or columns using the Property i...

Page 195: ...d cell The properties of the first cell selected are applied to the merged cell Split a cell 1 Click in the cell and do one of the following Select Modify Table Split Cell In the expanded Property inspector Window Properties click Split Cell Note If you don t see the button click the arrow in the lower right corner of the Property inspector so that you see all the options 2 In the Split Cell dialo...

Page 196: ...e row or column and you select Edit Cut the entire row or column is removed from the table not just the contents of the cells 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 block of cells you can select ...

Page 197: ...ou cannot sort tables that contain colspan or rowspan attributes that is tables that contain merged cells 1 Select the table or click in any cell 2 Select Commands Sort Table set the options in the dialog box and click OK Sort By Determines which column s values will be used to sort the table s rows Order Determines whether to sort the column alphabetically or numerically and whether to sort it in...

Page 198: ...mmon method for creating a page layout is to use HTML tables to position elements Tables were originally created for displaying tabular data not for laying out web pages Dreamweaver provides Layout mode to streamline the process of using tables for page layout 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 o...

Page 199: ... Aids Hide All Sometimes the width might not appear for a column you might see any of the following No width If you do not see a width for the table or for a column then that table or column does not have a specified width in the HTML code Two numbers If two numbers appear then the visual width as it appears in Design view doesn t match the width specified in the HTML code This can happen when you...

Page 200: ...window Spacer images A spacer image also known as a spacer GIF is a transparent image that s used to control spacing in autostretch tables A spacer image consists of a single pixel transparent GIF image stretched out to be a specified number of pixels wide A browser can t draw a table column narrower than the widest image contained in a cell in that column so placing a spacer image in a table colu...

Page 201: ...dow This full window default layout table allows you to draw layout cells anywhere in Design view You can set the table to a specific size by clicking the table border then dragging the table s resize handles When you move the pointer over a layout cell Dreamweaver highlights it You can enable or disable highlighting or change the highlight color in preferences You can also create a nested table b...

Page 202: ...able only below the bottom of the existing content If you try to draw a layout table below existing content and the no draw pointer appears try resizing the Document window to create more blank space between the bottom of the existing content and the bottom of the window Note Tables cannot overlap each other but a table can be completely contained inside another table The Layout table appears outl...

Page 203: ...tent 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 that appears in the code followed by the visual width of the column the width as it appears on your screen in parentheses See also Adding and formatting text on page 226 Add text to a layout cel...

Page 204: ...gn with other cells edges 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 2 Do one of the following Drag the cell to another location within its layout table Press the arrow keys to move the cell 1 pixel at a time Hold down Shift while pressing an arrow key to move the cell 10 pixels at a time Resi...

Page 205: ...tered a value in a text box press Tab or Enter Windows or Return Macintosh to apply the value Set layout table properties 1 Select a table by clicking the tab at the top of the table 2 Open the Property inspector Window Properties set the table s formatting properties and press Tab or Enter Windows or Return Macintosh to apply the value Fixed Sets the table to a fixed width in pixels Autostretch M...

Page 206: ...column autostretch before your layout is complete might have unexpected effects on table layout To prevent columns from growing wider or narrower create your complete layout before making a column autostretch and use spacer images when making a column autostretch However if each column contains other content that will keep the column at the desired width you don t need spacer images If you see two...

Page 207: ...ge and allows you to select a folder in which to store the spacer image file such as your site s images folder This is the recommended option unless you ve already created a spacer image file for your site Use An Existing Spacer Image File Allows you to specify an existing spacer image file to use in autostretch tables The spacer image should be a single pixel transparent GIF Don t Use Spacer Imag...

Page 208: ...e or even disappear completely from Design view when they do not contain content The columns still exist in the code even if they don t appear in Design view Spacer Image Sets the spacer image file for your sites Select a site from the For Site menu then click the Create button to create a new spacer image file or click the Browse button to locate an existing spacer image file in that site Cell Ou...

Page 209: ...ument In this example the document displayed in the top frame never changes as the visitor navigates the site The side frame navigation bar contains links clicking one of these links changes the content of the main content frame but the contents of the side frame itself remain static The main content frame on the right displays the appropriate document for the link the visitor clicks on the left A...

Page 210: ...frame to change they can be very useful for a site 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 You might also provide an explicit link to a frameless version of the site Advantages to using frames A visitor s browser does...

Page 211: ...le of its own Each predefined frameset in Dreamweaver defines all of its framesets in the same file Both kinds of nesting produce the same visual results it s not easy to tell without looking at the code which kind of nesting is being used The most likely situation in which an external frameset file would be used in Dreamweaver is when you use the Open in Frame command to open a frameset file insi...

Page 212: ...ckly You can insert a predefined frameset only in the Document window s Design view You can also design your own frameset in Dreamweaver by adding splitters to the Document window Before creating a frameset or working with frames make the frame borders visible in the Document window s Design view by selecting View Visual Aids Frame Borders See also Designing pages for accessibility on page 707 Cre...

Page 213: ...meset appears in the document but Dreamweaver does not associate accessibility tags or attributes with it Create a frameset Select Modify Frameset then select a splitting item such as Split Frame Left or Split Frame Right from the submenu Dreamweaver splits the window into frames If you had an existing document open it appears in one of the frames Split a frame into smaller frames To split the fra...

Page 214: ...ds each frameset each frame is surrounded by a thin gray line and is identified by a frame name 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 dotted line Note Placing the insertion point in a document that s displayed in a frame is not ...

Page 215: ... File Open in Frame 3 Select a document to open in the frame and click OK Windows or Choose Macintosh 4 Optional To make this document the default document to display in the frame when the frameset is opened in a browser save the frameset Save frame and frameset files Before you can preview a frameset in a browser you must save the frameset file and all of the documents that will display in the fr...

Page 216: ...Click a frame in the Frames panel Window Frames 2 In the Property inspector Window Properties click the expander arrow in the lower right corner to see all of the frame properties 3 Set the frame Property inspector options Frame Name The name used by a link s target attribute or by a script to refer to the frame A frame name must be a single word underscores _ are allowed but hyphens periods and s...

Page 217: ...rame 1 In the Frames panel Window Frames select a frame by placing the insertion point in one of the frames 2 Select Modify Edit Tag 3 Select Style Sheet Accessibility from the category list on the left enter values and click OK Edit accessibility values for a frame 1 Display Code view or Code and Design views for your document if you re currently in Design view 2 In the Frames panel Window Frames...

Page 218: ...ates to each frame select from the following choices in the Units menu Pixels Sets the size of the selected column or row to an absolute value Choose this option for a frame that should always be the same size such as a navigation bar Frames with sizes specified in pixels are allocated space before frames with sizes specified as percent or relative The most common approach to frame sizes is to set...

Page 219: ...urrent window untouched _parent opens the linked document in the parent frameset of the frame the link appears in replacing the entire frameset _self opens the link in the current frame replacing the content in that frame _top opens the linked document in the current browser window replacing all frames Frame names also appear in this menu Select a named frame to open the linked document in that fr...

Page 220: ...To URL Opens a new page in the current window or in the specified frame This action is particularly useful for changing the contents of two or more frames with one click Insert Navigation Bar Adds a navigation bar to a page after inserting a navigation bar you can attach behaviors to its images and set which image displays based on a visitor s actions For example you may want to show a button imag...

Page 221: ...font family and font size background color margins link styles and many other aspects of page design You can assign new page properties for each new page you create and modify those for existing pages By default Dreamweaver formats text using CSS Cascading Style Sheets You can change the page formatting preferences to HTML formatting using the Preferences dialog box Edit Preferences When using CSS...

Page 222: ...nt by calling JavaScript functions in an external file Dreamweaver creates this external file AC_RunActiveContent js and places it in a new folder called Scripts at the root of your site when you save the updated file You must upload the AC_RunActiveContent js file when you upload the updated page either manually or by clicking Yes in the Dependent Files dialog box Note When inserting an Active X ...

Page 223: ... in a meta tag in the head of the document it tells the browser and Dreamweaver how the document should be decoded and what fonts should be used to display the decoded text For example if you specify Western European Latin1 this meta tag is inserted meta http equiv Content Type content text html charset iso 8859 1 Dreamweaver displays the document using the fonts you specify in Fonts Preferences f...

Page 224: ... e Both forms result in the same visual typography but what is saved in the file is different for each form Normalization is the process of making sure all characters that can be saved in different forms are all saved using the same from That is all ë characters in a document are saved as single e umlaut or as e combining umlaut and not as both forms in one document For more information on Unicode...

Page 225: ...nk text By default Dreamweaver uses the font family specified for the entire page unless you specify another font Size Specifies the default font size to use for link text Link Color Specifies the color to apply to link text Visited Links Specifies the color to apply to visited links Rollover Links Specifies the color to apply when a mouse or pointer hovers over a link Active Links Specifies the c...

Page 226: ...ument A BOM is 2 to 4 bytes at the beginning of a text file that identifies a file as Unicode and if so the byte order of the following bytes Because UTF 8 has no byte order adding a UTF 8 BOM is optional For UTF 16 and UTF 32 it is required Reload Converts the existing document or reopens it using the new encoding Use a tracing image to design the page You can insert an image file to use as a gui...

Page 227: ...ction or insertion point The next tag is contained in that outermost tag and so on the rightmost tag is the innermost one that contains the current selection or insertion point In the following example the insertion point is in a paragraph tag p To select the table containing the paragraph you want to select select the table tag to the left of the p tag View the HTML code associated with the selec...

Page 228: ... invisible elements only the code defining the AP element is invisible Select the icon to select the AP element you can then see the contents of the AP element even if the AP element is marked as hidden Anchor Points For Aligned Elements Displays an icon showing the location of HTML code for elements that accept the align attribute These include images tables ActiveX objects plug ins and applets I...

Page 229: ...14 Specify HTML instead of CSS on page 221 Web safe colors In HTML colors are expressed either as hexadecimal values for example FF0000 or as color names red A web safe color is one that appears the same in Netscape Navigator and Microsoft Internet Explorer on both Windows and Macintosh systems when running in 256 color mode The conventional wisdom is that there are 216 common colors and that any ...

Page 230: ...here you clicked However if you switch to another application you may need to click a Dreamweaver window to continue working in Dreamweaver To expand your color selection use the pop up menu at the upper right corner of the color picker You can select Color Cubes Continuous Tone Windows OS Mac OS Grayscale and Snap To Web Safe Note The Color Cubes and Continuous Tone palettes are web safe whereas ...

Page 231: ...re page Select View Fit All Fill the Document window with the entire width of a page Select View Fit Width Using JavaScript behaviors to detect browsers and plug ins You can use behaviors to determine which browser your visitors are using and whether they have a particular plug in installed Check Browser Sends visitors to different pages depending on their browser brands and versions For example y...

Page 232: ...ialog box and then click OK 3 To delete a browser from the list select the browser and then click the Minus button 4 To change settings for a selected browser click the Edit button make changes in the Edit Browser dialog box and then click OK 5 Select the Primary Browser or the Secondary Browser option to specify whether the selected browser is the primary or secondary browser F12 Windows or Optio...

Page 233: ...cument when you restart Dreamweaver Adding and formatting text About inserting text Dreamweaver lets you add text to web pages by typing the text directly into a page copying and pasting text from another document or dragging text from another application You can also import text from or link to other document types including ASCII text files rich format text files and Microsoft Office documents A...

Page 234: ...y browsers especially older browsers and browsers other than Netscape Navigator and Internet Explorer don t properly display many of the named entities 1 In the Document window place the insertion point where you want to insert a special character 2 Do one of the following Select the name of the character from the Insert HTML Special Characters submenu In the Text category of the Insert bar click ...

Page 235: ...er 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 Unordered bulleted List Ordered numbered List or Definition List The leading character for the specified list item appears in the Document window 2 Type the list item text the...

Page 236: ...e List Item menu displays Bulleted List only bullet options are available in the New Style menu Reset Count To Sets a specific number from which to number list item entries 4 Click OK to set the options Search for and replace text You can use the Find And Replace command to search for text and for HTML tags and attributes in a document or a set of documents The Search panel in the Results panel gr...

Page 237: ...the search to text that exactly matches the case of the text you want to find For example if you search for the brown derby you will not find The Brown Derby Ignore Whitespace Treats all whitespace as a single space for the purposes of matching For example with this option selected this text would match this text and this text but not thistext This option is not available when the Use Regular Expr...

Page 238: ...ith Attribute Specifies an attribute that must be in the tag for it to match You can specify a particular value for the attribute or select any value Without Attribute Selects an attribute that must not be in the tag for it to match For example select this option to search for all img tags with no alt attribute Containing Specifies text or a tag that must be contained within the original tag for i...

Page 239: ...b tag Not Containing Specifies text or a tag that must not be contained within the original tag for it to match Inside Tag Specifies a tag that the target tag must be contained in for it to match Not Inside Tag Specifies a tag that the target tag must not be contained in for it to match 6 Optional To limit the search further repeat step 4 Define abbreviations and acronyms HTML provides tags that l...

Page 240: ...The Full Formatting option cannot retain CSS styles that come from an external style sheet nor can it retain styles if the application from which you are pasting does not retain styles upon pasting to the Clipboard Retain Line Breaks Lets you keep line breaks in pasted text This option is disabled if you have selected Text Only Clean Up Word Paragraph Spacing Select this option if you selected Tex...

Page 241: ... file s size after Dreamweaver receives the converted HTML must be less than 300K Instead of importing the entire contents of a file you can also paste portions of a Word document and preserve the formatting Note If you use Microsoft Office 97 you cannot import the contents of a Word or Excel document you must insert a link to the document 1 Open the web page into which you want to insert the Word...

Page 242: ...and alignment of selected text or apply text styles such as bold italic code monospace and underline By default Dreamweaver formats text using Cascading Style Sheets CSS CSS gives web designers and developers greater control over web page design while providing improved features for accessibility and reduced file size As you format and align text using Dreamweaver formatting commands CSS rules are...

Page 243: ...HTML instead of CSS on page 221 Using the Property inspector to format text The text Property inspector lets you format the currently selected text You can change the formatting by setting new options The style is immediately applied to the text As you format text using the Property inspector Dreamweaver keeps track of the formatting properties you assign to each text element and assigns each a la...

Page 244: ...e Preferences dialog box Edit Preferences For a tutorial on formatting text with the Property inspector see www adobe com go vid0147 See also Creating and managing CSS on page 124 Create a new CSS rule on page 129 Set General preferences for Dreamweaver on page 36 Set text properties in the Property inspector You can use the text Property inspector to apply HTML formatting or Cascading Style Sheet...

Page 245: ...nation Applies the selected font combination to the text Use the pop up menu to select the font combi nation you want to apply or select Edit Font List to create or edit a font combination Size Applies either a specific font size 1 through 7 or a font size or 1 through or 7 relative to the basefont size the default is 3 Text Color Displays the text in the selected color Select a web safe color by ...

Page 246: ... a paragraph format for example Heading 1 Heading 2 Preformatted Text and so on The HTML tag associated with the selected style for example h1 for Heading 1 h2 for Heading 2 pre for Preformatted text and so on is applied to the entire paragraph Select None to remove a paragraph format When you apply a heading tag to a paragraph Dreamweaver automatically adds the next line of text as a standard par...

Page 247: ... select an alignment command Center page elements 1 Select the element image plug in table or other page element you want to center 2 Select Text Align Center Note You can align and center complete blocks of text you cannot align or center part of a heading or part of a paragraph Indent text Using the Indent command applies the blockquote HTML tag to a paragraph of text indenting text on both side...

Page 248: ...ted text You can set the font type style such as bold or italic and size 1 Select the text If no text is selected the option applies to subsequent text you type 2 Select from the following options To change the font select a font combination from the Property inspector or from the Text Font submenu Select Default to remove previously applied fonts Default applies the default font for the selected ...

Page 249: ... field and click OK Modify font combinations Use the Edit Font List command to set the font combinations that appear in the Property inspector and the Text Font submenu Font combinations determine how a browser displays text in your web page A browser uses the first font in the combination that is installed on the user s system if none of the fonts in the combination are installed the browser disp...

Page 250: ...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 dialog box are not the current date nor do they reflect the dates times that a visitor sees when they display your site They are examples only of the way you want to display this information 1 In the Document window place the insertion point where you want ...

Page 251: ...n image When you insert an image into a Dreamweaver document a reference to the image file is generated in the HTML source code To ensure that this reference is correct the image file must be in the current site If it is not in the current site Dreamweaver asks whether you want to copy the file into the site You can also insert images dynamically Dynamic images are those images that change often F...

Page 252: ...descriptions consider providing a link in the Long Description text box to a file that gives more information about the image In the Long Description box enter the location of a file that displays when the user clicks the image or click the folder icon to browse to the file This text box provides a link to a file that is related to or gives more information about the image Note You can enter infor...

Page 253: ...e Add space in pixels along the sides of the image V Space adds space along the top and bottom of an image H Space adds space along the left and right of an image Target Specifies the frame or window in which the linked page should load This option is not available when the image isn t linked to another file The names of all the frames in the current frameset appear in the Target list You can also...

Page 254: ... the area of the image Typically you ll want to crop an image to place more emphasis on the subject of the image and remove unwanted aspects surrounding the center of interest in the image Brightness and Contrast Modifies the contrast or brightness of pixels in an image This affects the highlights shadows and midtones of an image You typically use Brightness Contrast when correcting images that ar...

Page 255: ...mage placeholder select the placeholder in the Document window then select Window Properties to display the Property inspector To see all properties click the expander arrow in the lower right corner Use the Property inspector to set a name width height image source alternate text description alignment and color for a placeholder image In the placeholder Property inspector the gray text box and th...

Page 256: ... window do one of the following Double click the image placeholder Click the image placeholder to select it then in the Property inspector Window Properties click the folder icon next to the Src text box 2 In the Image Source dialog box navigate to the image you want to replace the image placeholder with and click OK See also Use Fireworks to modify Dreamweaver image placeholders on page 368 Align...

Page 257: ...age appear at the same size use an image editing application to scale images When you resize an image in Dreamweaver you can resample it to accommodate its new dimensions Resampling adds or subtracts pixels from a resized JPEG and GIF image files to match the appearance of the original image as closely as possible Resampling an image reduces its file size and improves download performance See also...

Page 258: ... pixel in the selected bitmap outside the bounding box is removed but other objects in the image remain 5 Preview the image and ensure that it meets your expectations If not select Edit Undo Crop to revert to the original image Note You can undo the effect of the Crop command and revert to the original image file up until the time that you quit Dreamweaver or edit the file in an external image edi...

Page 259: ...age that when viewed in a browser changes when the pointer moves across it You must have two images to create the rollover a primary image the image displayed when the page first loads and a secondary image the image that appears when the pointer moves over the primary image Both images in a rollover should be the same size if the images are not the same size Dreamweaver resizes the second image t...

Page 260: ...t window You can set up Fireworks as your primary external editor You can also set which file types an editor opens and you can select multiple image editors For example you can set preferences to start Fireworks when you want to edit a GIF and to start a different image editor when you want to edit a JPG or JPEG See also Working with Photoshop on page 374 Working with Fireworks on page 367 Start ...

Page 261: ...eferences Windows or Dreamweaver Preferences Macintosh and select File Types Editors in the Category list on the left Select Edit Edit with External Editor and select File Types Editors 2 In the File Types Editors Preferences dialog box click the Add button above the Extensions list A text box appears in the Extensions list 3 Type the file extension of the file type you want to start an editor for...

Page 262: ...lash content About Flash file types Dreamweaver comes with Flash objects you can use whether you have Flash installed on your computer or not Before you use the Flash commands available in Dreamweaver you should know about the different Flash file types The Flash file fla The source file for any project and is created in the Flash program This type of file can only be opened in Flash not in Dreamw...

Page 263: ...also set properties for Flash content in the Property inspector For a tutorial on adding Flash content to web pages see www adobe com go vid0150 See also Working with Flash on page 382 Edit a SWF file from Dreamweaver in Flash on page 382 Insert Shockwave movies on page 273 Adding Flash Video content on page 264 Insert a SWF file Flash content 1 In the Design view of the Document window place the ...

Page 264: ... the movie when the page loads V Space and H Space Specify the number of pixels of white space above below and on both sides of the movie Quality Controls anti aliasing during playback of the movie A movie looks better with a high setting but it requires a faster processor to render correctly on the screen Low emphasizes speed over appearance whereas High favors appearance over speed Auto Low emph...

Page 265: ...ts on page 277 Add and manage extensions in Dreamweaver on page 710 Modify Flash object properties in the Property inspector 1 In the Document window click the Flash button object to select it 2 Open the Property inspector if it is not already open Click the expander arrow in the lower right corner to see more properties 3 Set the options in the Property inspector Name Specifies the name to identi...

Page 266: ...object Click Edit in the Property inspector Right click Windows or Control click Macintosh and select Edit from the context menu 2 Select a button style from the Style list You can view an example of the button in the Sample text box Click the sample to see how it functions in the browser Note While you are defining the Flash button for example changing text or font choices the Sample box does not...

Page 267: ...lash text object The Flash text object lets you create and insert a Flash SWF file that contains just text This allows you to create a small vector graphic movie with the designer fonts and text of your choice 1 In the Document window place the insertion point where you want to insert the Flash text 2 To open the Insert Flash Text dialog box do one of the following In the Common category of the In...

Page 268: ...Image Viewer The Save Flash Element dialog box appears 2 Enter a filename for the Flash element and save it to an appropriate location within your site 3 Click OK The Flash element placeholder appears in the document You can modify the properties of the Flash element using the Tag and Property inspectors 4 Select File Preview in Browser to preview the Flash element Edit Flash elements You edit Fla...

Page 269: ...s must have Flash Player 7 or later installed to see any Image Viewers in your pages 1 Place the insertion point in your page where you want the Image Viewer to appear and select Insert Media Image Viewer 2 In the Save Flash Element dialog box browse to a location in your site to save the element enter a name and click Save Note It s a good idea to save the Flash element in the same Dreamweaver si...

Page 270: ...tained in imageCaptions captionSize Indicates the point size of the image captions contained in imageCaptions imageCaptions Contains the captions for each image specified in imageURLs Captions can be used for some all or none of the images imageLinks Contains a URL for each image specified in imageURLs LinkURLs can be used for some all or none of the images imageURLs Contains the location of the i...

Page 271: ...d then click the Play button in the Property inspector 6 Click Stop to end the preview You can also preview the document in a browser by pressing F12 The FlashPaper toolbar is fully functional in the browser To preview all Flash content in a page press Control Alt Shift P Windows or Shift Option Command P Macintosh All Flash objects and SWF files are set to Play 7 If you want set other properties ...

Page 272: ...r You can insert video files created with two kinds of codecs compression decompression technologies Sorenson Squeeze and On2 If you created your video with the Sorenson Squeeze codec site visitors will need Flash Player 7 from Adobe or later to play progressive download video they will need Flash Player 6 0 79 or later to play streaming video If you created your video with the On2 codec site visi...

Page 273: ...f Dreamweaver cannot determine the height you must type a height value Note Total With Skin is the width and height of the FLV file plus the width and height of the selected skin Constrain Maintains the same aspect ratio between the width and height of the Flash Video component This option is selected by default Auto Play Specifies whether to play the video when the web page is opened Auto Rewind ...

Page 274: ...to Play and Auto Rewind options have no effect Auto Play Specifies whether to play the video when the web page is opened Auto Rewind Specifies whether the playback control returns to starting position after the video finishes playing Buffer Time Specifies the time in seconds required for buffering before the video starts playing The default buffer time is set to 0 so that the video starts playing ...

Page 275: ... the Flash Player version 1 When inserting a Flash Video in a page select the option Prompt Users To Download Flash Player If Necessary in the Insert Flash Video dialog box If the Flash Video is already in your page delete it and insert it again with the option selected Note If you insert another Flash Video that requires a higher version of Flash Player than the first video the detection code pro...

Page 276: ...hone and so on However the large file size severely limits the length of sound clips that you can use on your web pages mp3 Motion Picture Experts Group Audio or MPEG Audio Layer 3 A compressed format that makes sound files substantially smaller The sound quality is very good if an mp3 file is recorded and compressed properly its quality can rival that of a CD mp3 technology lets you stream the fi...

Page 277: ...s Always provide a control to either enable or disable the playing of the sound in the event that visitors don t want to listen to the audio content 1 In Design view place the insertion point where you want to embed the file and do one of the following In the Common category of the Insert bar click the Media button and select the Plugin icon from the pop up menu Select Insert Media Plugin 2 In the...

Page 278: ...es by selecting the object and editing the HTML code in Code view or right clicking Windows or Control clicking Macintosh and selecting Edit Tag Code Title Enter a title for the media object Access Key Enter a keyboard equivalent one letter in the text box to select the form object in the browser This lets a visitor to the site use the Control key Windows with the Access Key to access the object F...

Page 279: ...Select Edit Preferences and select File Types Editors from the Category list Filename extensions such as gif wav and mpg are listed on the left under Extensions Associated editors for a selected extension are listed on the right under Editors 2 Select the file type extension in the Extensions list and do one of the following To associate a new editor with the file type click the Plus button above ...

Page 280: ...documents Adobe Shockwave a standard for interactive multimedia on the web is a compressed format that allows media files created in Macromedia Director from Adobe to be downloaded quickly and played by most popular browsers 1 In the Document window place the insertion point where you want to insert a Shockwave movie and do one of the following In the Common category of the Insert bar click the Me...

Page 281: ...int where you want to insert the content then do one of the following In the Common category of the Insert bar click the Media button and select the Plugin icon from the menu Select Insert Media Plugin 2 In the dialog box that appears select a content file for a Netscape Navigator plug in and click OK 3 Set the plug in options in the Property inspector Name Specifies a name to identify the plug in...

Page 282: ...ith a particular plug in consider adding it to this file Check that you have enough memory Some plug ins require an additional 2 to 5 MB of memory to run Insert an ActiveX control You can insert an ActiveX control in your page ActiveX controls formerly known as OLE controls are reusable components somewhat like miniature applications that can act like browser plug ins They run in Internet Explorer...

Page 283: ...mbed option is turned on If you don t enter a value Dreamweaver attempts to determine the value from the ActiveX properties entered already V Space and H Space Specify the amount of white space in pixels above below and on both sides of the object Base Specifies the URL containing the ActiveX control Internet Explorer downloads the ActiveX control from this location if it has not been installed in...

Page 284: ...e below and on both sides of the applet Parameters Opens a dialog box for entering additional parameters to pass to the applet Many applets respond to special parameters Using behaviors to control media You can add behaviors to your page to start and stop various media objects Control Shockwave Or Flash Play stop rewind or go to a frame in a Shockwave movie or Flash SWF file Play Sound Lets you pl...

Page 285: ...Document window 2 Open the dialog box using one of the following methods Right click Windows or Control click Macintosh the object and select Parameters from the context menu Open the Property inspector if it isn t already open and click the Parameters button found in the lower half of the Property inspector Make sure the Property inspector is expanded 3 Click the Plus button and enter the paramet...

Page 286: ...n add the links Another way to manage links is to create placeholder pages in which you add and test links before completing all your site pages See also Using site maps on page 52 Test links in Dreamweaver on page 289 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...

Page 287: ...ment are in the same folder and are likely to remain together You can also use a document relative path to link to a document in another folder by specifying the path through the folder hierarchy from the current document to the linked document The basic idea of document relative paths is to omit the part of the absolute path that is the same for both the current document and the linked document p...

Page 288: ...equently move HTML files from one folder to another in your website When you move a document that contains site root relative links you don t need to change the links for example if your HTML files use site root relative links for dependent files such as images then if you move an HTML file its dependent file links are still valid However when you move or rename the documents targeted by site root...

Page 289: ...ump Menu Edits a jump menu You can change the menu list specify a different linked file or change the browser location in which the linked document opens Set Nav Bar Image Customizes the display of images in a navigation bar For example you can use this behavior to display a certain image in the navigation bar or page when the pointer is over a certain portion of the navigation bar See also Applyi...

Page 290: ... visible anchor in an open document or a document in the Files panel Shift drag from the selection and point to another open document a visible anchor in an open document or a document in the Files panel Note You can link to an open document only if your documents are not maximized in the Document window To tile documents select Window Cascade or Window Tile When you point to an open document that...

Page 291: ...ed file loads into the full browser window _self loads the linked file into the same frame or window as the link This target is the default so you usually don t need to specify it _top loads the linked file into the full browser window thereby removing all frames 5 In the Tab Index box enter a number for the tab order 6 In the Title box enter a title for the link 7 In the Access Key box enter a ke...

Page 292: ...new path setting applies only to the current site See also Document locations and paths on page 279 Set up and edit a local root folder on page 42 Link 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 ...

Page 293: ... window using the mail program associated with the user s browser when clicked In the e mail message window the To box is automatically updated with the address specified in the e mail link Create an e mail link using the Insert Email Link command 1 In the Document window s Design view position the insertion point where you want the e mail link to appear or select the text or image you want to app...

Page 294: ...omatically Dreamweaver can update links to and from a document whenever you move or rename the document within a local site This feature works best when you store your entire site or an entire self contained section of it on your local disk Dreamweaver does not change files in the remote folder until you put the local files on or check them in to the remote server To make the updating process fast...

Page 295: ...You can modify the structure of the site in the site map by adding changing and removing links Dreamweaver automatically updates the site map to display the changes to the site See also Working with a visual map of your site on page 52 Change a link 1 In the site map select a page containing the target link you want to change so that the document that currently links to this page will point to ano...

Page 296: ...t the new file to link to If you are changing an e mail FTP null or script link type the full text of the replacement link 4 Click OK Dreamweaver updates any documents that link to the selected file making them point to the new file using the path format already used in the document for example if the old path was document relative the new path is also document relative After you change a link sit...

Page 297: ... 2 Do one of the following Select Insert Form Jump Menu In the Forms category of the Insert bar click the Jump Menu button 3 Complete the Insert Jump menu dialog box and click OK Here is a partial list of options Plus and Minus buttons Click Plus to insert an item click Plus again to add another one To delete an item select it and click Minus Arrow buttons Select an item and click the arrows to mo...

Page 298: ...rame There are two ways to work around this problem Use a menu selection prompt such as a category or a user instruction such as Choose one The menu selection prompt is reselected automatically after each menu selection Use a Go button which allows a user to revisit the currently chosen link When you use a Go button with a jump menu the Go button becomes the only mechanism that jumps the user to t...

Page 299: ...are accessed 1 Do one of the following Select Insert Image Objects Navigation Bar In the Common category of the Insert bar click the Images button and select Insert Navigation Bar 2 Complete the Insert Navigation Bar dialog box and click OK Here is a partial list of options Plus and Minus buttons Click Plus to insert an element click Plus again to add another one To delete an element select it and...

Page 300: ...does not need to interpret where the visitor clicked Client side image maps are supported by Netscape Navigator 2 0 and later versions NCSA Mosaic 2 1 and 3 0 and all versions of Internet Explorer Dreamweaver does not alter references to server side image maps in existing documents you can use both client side image maps and server side image maps in the same document However browsers that support...

Page 301: ...nto the full browser window thereby removing all frames Note The target option isn t available until the selected hotspot contains a link 7 In the Alt box type alternative text for display in text only browsers or browsers that download images manually Some browsers display this text as a tooltip when the user moves the pointer over the hotspot 8 Repeat steps 4 through 7 to define additional hotsp...

Page 302: ... report appears in the Link Checker panel in the Results panel group 3 In the Link Checker panel select External Links from the Show pop up menu to view another report The External Links report appears in the Link Checker panel in the Results panel group You can check for orphaned files when you check links across an entire site 4 To save the report click the Save Report button in the Link Checker...

Page 303: ...s column not the Files column of the Link Checker panel in the Results panel group select the broken link A folder icon appears next to the broken link 3 Click the folder icon next to the broken link and browse to the correct file or type the correct path and filename 4 Press Tab or Enter Windows or Return Macintosh If there are other broken references to this same file you are prompted to fix the...

Page 304: ...the Refresh button to reset the height and width values 4 Save the file As links are fixed their entries disappear from the Link Checker list If an entry still appears in the list after you enter a new path or filename in the Link Checker or after you save changes in the Property inspector Dreamweaver cannot find the new file and still considers the link broken September 4 2007 ...

Page 305: ...reamweaver Preferences Macintosh and then select the Preview In Browser category on the left to select a browser Press F12 Windows or Option F12 Macintosh to display the current document in the primary browser Press Control F12 Windows or Command F12 Macintosh to display the current document in the secondary browser 2 Click links and test content in your page If you use Internet Explorer on a Wind...

Page 306: ...r previewing You can define up to 20 browsers for previewing and you can designate primary and secondary browsers It s a good idea to preview your site in the following browsers Internet Explorer 6 0 Netscape Navigator 7 0 and the Macintosh only Safari browser In addition to these more popular graphical browsers you may want to test your pages in a text only browser such as Lynx 1 Do one of the fo...

Page 307: ...stalled but the preview can give a good impression of how content will look and behave on a selected device 1 Start Dreamweaver 2 Open a file 3 Do one of the following Select File Preview in Browser Device Central On the document window toolbar click and hold the Preview Debug In browser button and select Preview In Device Central The file is displayed in the Device Central Emulator tab To continu...

Page 308: ...ported by the language specific coding features in Dreamweaver for example you can create and edit Perl files but code hints don t apply to that language See also Automatic code modification in Dreamweaver on page 302 Use code hints on page 313 About fixing invalid markup If your document contains invalid code Dreamweaver displays that code in Design view and optionally highlights it in Code view ...

Page 309: ...ditors even if the code is invalid unless you enable code rewriting options Dreamweaver does not change tags it doesn t recognize including XML tags because it has no criteria by which to judge them If an unrecognized tag overlaps another tag for example MyNewTag em text MyNewTag em Dreamweaver marks it as an error but doesn t rewrite the code Optionally you can set Dreamweaver to highlight invali...

Page 310: ...nd attribute names must be lower case Forces HTML element and attribute names to be lower case in the XHTML code that it generates and when cleaning up XHTML regardless of your tag and attribute case preferences Every element must have a closing tag unless it is declared in the DTD as EMPTY Inserts closing tags in the code that it generates and when cleaning up XHTML Empty elements must have a clo...

Page 311: ...attribute is set by a Property inspector in the code that Dreamweaver generates and when cleaning up XHTML For attributes with values of an enumerated type the values must be lowercase An enumerated type value is a value from a specified list of allowed values for example the align attribute has the following allowed values center justify left and right Forces enumerated type values to be lowercas...

Page 312: ... a hyphen for example a f is equivalent to abcdef e g matches e in bed f in folly and g in guard abc Any character not enclosed in the brackets Specify a range of characters with a hyphen for example a f is equivalent to abcdef aeiou initially matches r in orange b in book and k in eek b A word boundary such as a space or carriage return bb matches b in book but nothing in goober or snob B Anythin...

Page 313: ...pecific patterns in the page code to detect server behaviors and display them in the Server Behaviors panel If you change a code block s code in any way Dreamweaver can no longer detect the server behavior and display it in the Server Behaviors panel However the server behavior still exists on the page and you can edit it in the coding environment in Dreamweaver See also Automatic code modificatio...

Page 314: ...View Options menu on the Document toolbar 3 To adjust the size of the panes in the Document window drag the splitter bar to the desired position The splitter bar is located between the two panes Code view is updated automatically when you make changes in Design view However after making changes in Code view you must manually update the document in Design view by clicking in Design view or pressing...

Page 315: ...r instructions see Customize keyboard shortcuts on page 708 See also Work with code snippets on page 315 Open files in Code view by default When you open a file type that normally doesn t contain any HTML for example a JavaScript file the file opens in Code view or Code inspector instead of Design view You can specify which file types open in Code view 1 Select Edit Preferences Windows or Dreamwea...

Page 316: ...at isn t valid When you select an invalid tag the Property inspector displays information on how to correct the error Syntax Coloring Enables or disables code coloring For information on changing the coloring scheme see Set the code colors on page 312 Auto Indent Makes your code indent automatically when you press Enter while writing code The new line of code indents to the same level as the previ...

Page 317: ...your external editor and use CR Macintosh if SimpleText is your external editor Note For servers that you connect to using FTP this option applies only to binary transfer mode the ASCII transfer mode in Dreamweaver ignores this option If you download files using ASCII mode Dreamweaver sets line breaks based on the operating system of your computer if you upload files using ASCII mode the line brea...

Page 318: ...Spacebar Close Tags Specifies how you want Dreamweaver to insert closing tags By default Dreamweaver inserts the closing tag automatically after you type the characters You can change this default behavior so that the closing tag is inserted after you type the final angle bracket of the opening tag or so that no closing tag is inserted at all Enable Code Hints Displays code hints while you enter c...

Page 319: ...de Special Characters Prevents Dreamweaver from changing URLs to use only legal characters This option is enabled by default Encode Special Characters In URL Using Ensures that when you enter or edit URLs using Dreamweaver tools such as the Property inspector those URLs contain only legal characters Encode Special Characters In URL Using Operates the same way as the preceding option but uses a dif...

Page 320: ...Open In Code View Specifies the filename extensions that automatically open in Code view in Dreamweaver External Code Editor Specifies the text editor to use Reload Modified Files Specifies the behavior when Dreamweaver detects that changes were made externally to a document that is open in Dreamweaver Save On Launch Specifies whether Dreamweaver should always save the current document before star...

Page 321: ...reated CSS style doesn t appear in a code hints list of CSS styles select Refresh Style List from the code hints list If Design view is showing some invalid code might appear in Design view temporarily after you select Refresh Style List to remove that invalid code from Design view after you finish inserting the style press F5 to refresh Design view again 4 To insert a closing tag type slash Note ...

Page 322: ...lashes or special characters or double quotes 3 Optional Enter a text description of the snippet This makes it easier for other team members to use the snippet 4 For Snippet Type select Wrap Selection or Insert Block a If you chose Wrap Selection add code for the following options Insert Before Type or paste the code to insert before the current selection Insert After Type or paste the code to ins...

Page 323: ...om a pop up menu in the toolbar To find out what each button does position the pointer over it until a tooltip appears The Coding toolbar displays the following buttons by default Open Documents Lists the documents that are open When you select one it is displayed in the Document window Collapse Full Tag Collapses the content between a set of opening and closing tags for example the content betwee...

Page 324: ...and applies it to your selection Remove Comment Removes comment tags from the selected code If a selection includes nested comments only the outer comment tags are removed Wrap Tag Wraps selected code with the selected tag from the Quick Tag Editor Recent Snippets Lets you insert a recently used code snippet from the Snippets panel For more information see Work with code snippets on page 315 Move ...

Page 325: ...er to insert in your page any tag in the Dreamweaver tag libraries which include ColdFusion and ASP NET tag libraries 1 Position the insertion point in the code right click Windows or Control click Macintosh and select Insert Tag The Tag Chooser appears The left pane contains a list of supported tag libraries and the right pane shows the individual tags in the selected tag library folder 2 Select ...

Page 326: ...ifting it right or left by one tab Indent the selected block of code Press Tab Select Edit Indent Code Unindent the selected block of code Press Shift Tab Select Edit Outdent Code Copy and paste code 1 Copy the code from Code view or from another application 2 Place the insertion point in Code view and select Edit Paste See also Paste and move collapsed code fragments on page 325 Insert HTML comme...

Page 327: ...e submenu To see the functions listed in alphabetical order Control right click Windows or Option Control click Macintosh in Code view and then select the Functions submenu In the Code inspector click the Code Navigation button on the toolbar 3 Select a function name to jump to the function in your code Search for tags attributes or text in code You can search for specific tags attributes and attr...

Page 328: ...on dwq Recall a search pattern 1 Select Edit Find And Replace 2 Click the Load Query button the folder icon 3 Navigate to the folder where your queries are saved Then select a query file and click Open 4 Click Find Next Find All Replace or Replace All to initiate the search Change code selections 1 In Code view select some code and right click Windows or Control click Macintosh 2 Select the Select...

Page 329: ...are removed Remove Caio Hack Removes comment tags from the selected CSS code If a selection includes nested comments only the outer comment tags are removed Convert Tabs to Spaces Converts each tab in the selection to a number of spaces equal to the Tab Size value set in Code Format preferences For more information see Change the code format on page 309 Convert Spaces To Tabs Converts runs of spac...

Page 330: ...all arrow at the upper right of the panel Paste example code into your document 1 Click anywhere in example code in the reference content The entire code example is highlighted 2 Select Edit Copy and then paste the example code into your document in Code view Browse the reference content in the Reference panel 1 To display tags objects or styles from another book select a different book from the B...

Page 331: ...selection When the code is collapsed the collapse buttons change to an expand button a Plus button in Windows a horizontal triangle on the Macintosh Sometimes the exact fragment of code that you selected is not collapsed Dreamweaver uses smart collapse to collapse the most common and visually pleasing selection For example if you selected an indented tag and then selected the indented spaces befor...

Page 332: ...r on page 316 Clean up code on page 326 Copy and paste a collapsed code fragment 1 Select the collapsed code fragment 2 Select Edit Copy 3 Place the insertion point where you want to paste the code 4 Select Edit Paste Note You can paste into other applications but the collapsed state of the code fragment is not preserved Drag a collapsed code fragment 1 Select the collapsed code fragment 2 Drag th...

Page 333: ... report to include 6 Select items the Validator should check for Quotes In Text Indicates that Dreamweaver should warn you about each use of quotation marks in the text of the document you should use the quot entity instead of quotation marks in the text of HTML documents Entities In Text Indicates that Dreamweaver should recommend changing certain characters such as ampersand less than and greate...

Page 334: ... the adjacent text box Use this option to remove custom tags inserted by other visual editors and other tags that you don t want to appear on your site for example blink Separate multiple tags with commas for example font blink Combine Nested font Tags When Possible Consolidates two or more font tags when they control the same range of text For example font size 7 font color FF0000 big red font fo...

Page 335: ... and XML You can set preferences for the Validator such as specifying the tag based languages against which the Validator should check the specific problems that the Validator should check for and the types of errors that the Validator should report For more information see Set the Validator preferences Note To validate your document for accessibility see Testing your site on page 104 1 Do one of ...

Page 336: ...rame and select File Convert and then select one of the XHTML document type definitions 2 To convert the whole document repeat this step for every frame and the frameset document Note You can t convert an instance of a template because it must be in the same language as the template on which it s based For example a document based on an XHTML template will always be in XHTML and a document based o...

Page 337: ...ew View Code or Design view View Design and fix the error 5 Save the file and click the Server Debug icon again Dreamweaver renders the page in the internal browser again and updates the Server Debug panel If there are no more problems with the page the Exceptions category does not reappear in the panel 6 To leave debug mode switch to Code view View Code or Design view View Design See also Using C...

Page 338: ...k the Content button to edit the content The Content button appears only if the selected tag is not an empty tag that is if it has both an opening and a closing tag 3 If the tag contains a conditional expression make changes to it in the Expression box Change attributes with the Tag inspector Use the Tag inspector to edit or add attributes and attributes values The Tag inspector lets you edit tags...

Page 339: ...he Quick Tag Editor to quickly inspect insert and edit HTML tags without leaving Design view If you type invalid HTML in the Quick Tag Editor Dreamweaver attempts to correct it for you by inserting closing quotation marks and closing angle brackets where needed To set the Quick Tag Editor options open the Quick Tag Editor by pressing Control T Windows or Command T Macintosh The Quick Tag Editor ha...

Page 340: ...t existing attributes or edit the tag s name 4 Press Tab to move forward from one attribute to the next press Shift Tab to move back Note By default changes are applied to the document when you press Tab or Shift Tab 5 To close the Quick Tag Editor and apply all the changes press Enter 6 To exit without making any further changes press Escape Wrap the current selection with HTML tags 1 Select unfo...

Page 341: ...ion in the Code Hints menu jumps to the first item that starts with the letters you typed Use the Up and Down Arrow keys to select an item Use the scroll bar to find an item 2 Press Enter to insert the selected item or double click an item to insert it 3 To close the hints menu without inserting an item press Escape or continue typing Disable the hints menu or change the delay before it appears 1 ...

Page 342: ...ct View Visual Aids Invisible Elements to ensure that script markers appear on the page Write a client side script 1 Place the insertion point where you want the script 2 Select Insert HTML Script Objects Script 3 Select the scripting language from the Language pop up menu If you are using JavaScript and are unsure of the version select JavaScript rather than JavaScript1 1 or JavaScript1 2 4 Type ...

Page 343: ...ty inspector click the Edit button 3 Edit the ASP server side script and click OK Edit scripts on the page by using the Property inspector 1 In the Property inspector select the scripting language from the Language pop up menu or type a language name in the Language box Note If you are using JavaScript and are unsure of the version select JavaScript rather than JavaScript1 1 or JavaScript1 2 2 In ...

Page 344: ...copyright or keywords These tags can also be used to give information to the server such as the expiration date refresh interval and PICS rating for the page PICS the Platform for Internet Content Selection provides a method for assigning ratings such as movie ratings to web pages Add a meta tag 1 Select Insert HTML Head Tags Meta 2 Specify the properties in the dialog box that appears Edit an exi...

Page 345: ...dd a Keywords meta tag 1 Select Insert HTML Head Tags Keywords 2 Specify the keywords separated by commas in the dialog box that appears Edit a Keywords meta tag 1 Select View Head Content 2 Select the Keywords marker that appears at the top of the Document window 3 In the Property inspector view modify or delete keywords You can also add keywords separated by commas Specify descriptions for the p...

Page 346: ...nishes loading enter 0 in this box URL or Action Specifies whether the browser should go to a different URL or refresh the current page after the specified delay To make a different URL open rather than refreshing the current page click the Browse button then browse to and select the page to load Set the base URL properties of the page Use the Base element to set the base URL that all document rel...

Page 347: ...llows Href The URL of the file that you are defining a relationship to Click the Browse button to browse to and select a file or type a path in the box Note that this attribute does not indicate a file that you re linking to in the usual HTML sense the relationships specified in a Link element are more complex ID Specifies a unique identifier for the link Title Describes the relationship This attr...

Page 348: ...lict with the tags in the original document and Dreamweaver won t display the page properly 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 Any changes to the external file are automatically reflected in every document that includes it There are two types of server side includes Virtual and...

Page 349: ... a file from a folder higher in the folder hierarchy on an IIS server ask your system administrator if the necessary software is installed For other kinds of servers or if you don t know what kind of server you re using ask your system administrator which option to use Change which file is included 1 Select the server side include in the Document window 2 Open the Property inspector Window Propert...

Page 350: ...g Library editor in one of the following ways To save changes click OK To close the 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 restored Add libraries tags and attributes You can use the Tag Library editor to add tag libraries tags and attributes to the tag libraries i...

Page 351: ...determine which document types provide code hints for the given tag library For example if the HTML option is not selected for a given tag library code hints for that tag library don t appear in HTML files 3 Optional Enter the prefix for the tags in the Tag Prefix box Note A prefix is used to identify a tag in the code as part of a particular tag library Some tag libraries don t use prefixes 4 Cli...

Page 352: ...aries select a tag library tag or attribute in the Tags box 2 Click the Minus button 3 Click OK to permanently delete the item The item is removed from the Tags box 4 Click OK to close the Tag Library editor and complete the deletion See also Customizing the coding environment on page 308 Importing custom tags into Dreamweaver About importing custom tags into Dreamweaver You can import custom tags...

Page 353: ...s 3 Click the Plus button and select JSP Import From File tld jar zip or JSP Import from Server web xml 4 Click the Browse button or enter a filename for the file that contains the tag library 5 Enter a URI to identify the tag library The URI Uniform Resource Identifier often consists of the URL of the organization maintaining the tag library The URL is not used to view the organization s website ...

Page 354: ...Adobe Shockwave movie The actions provided with Dreamweaver provide maximum cross browser compatibility After you attach a behavior to a page element the behavior calls the action JavaScript code associated with an event whenever that event occurs for that element The events that you can use to trigger a given action vary from browser to browser For example if you attach the Popup Message action t...

Page 355: ...a null link to the selected page element and attaches the behavior to that link instead of to the element itself The null link is specified as href javascript in the HTML code Show Events For Specifies the browsers in which the current behavior should work this is the submenu in the Events menu The selection you make from this menu determines which events appear in the Events menu Older browsers g...

Page 356: ...t an action from the Actions menu Actions that are dimmed in the menu can t be chosen They may be dimmed because a required object doesn t exist in the current document For example the Control Shockwave or Flash action is dimmed if the document contains no Shockwave or Flash SWF files When you select an action a dialog box appears displaying parameters and instructions for the action 4 Enter param...

Page 357: ... manage extensions in Dreamweaver on page 710 See also Add and manage extensions in Dreamweaver on page 710 Applying built in Dreamweaver behaviors Using built in behaviors The behaviors included with Dreamweaver have been written to work in modern browsers The behaviors fail silently in older browsers Note The Dreamweaver actions have been carefully written to work in as many browsers as possible...

Page 358: ...iors panel Use the Check Browser behavior to send visitors to different pages depending on their browser brands and versions For example you may want to send visitors using Netscape Navigator 4 0 to a different page than visitors using Internet Explorer 4 0 It s useful to attach this behavior to the body tag of a page that is compatible with practically any browser and that does not use any other ...

Page 359: ...e page 4 In the Otherwise Go To URL box specify an alternative URL for visitors who don t have the plug in If you leave the field blank visitors will stay on the same page 5 Specify what to do if plug in detection is not possible By default when detection is impossible the visitor is sent to the URL listed in the Otherwise box To instead send the visitor to the first If Found URL select the option...

Page 360: ...ects AP Div or click the Draw AP Div button on the Insert bar and draw an AP Div in the Document window s Design view 2 Click body in the tag selector at the lower left corner of the Document window 3 Select Drag AP Element from the Actions menu of the Behaviors panel If Drag AP Element is unavailable you probably have an AP element selected 4 In the AP Element pop up menu select the AP element 5 ...

Page 361: ...JavaScript code or a function name for example evaluateAPelementPos in the second Call JavaScript box to execute the code or function when the AP element is dropped Select Only If Snapped if the JavaScript should be executed only if the AP element has reached the drop target 13 Click OK and verify that the default event is correct If not select another event or change the target browser in the Sho...

Page 362: ...here are no frames the main window is the only option Note This behavior may produce unexpected results if any frame is named top blank self or parent Browsers sometimes mistake these names for reserved target names 3 Click Browse to select a document to open or enter the path and filename of the document in the URL box 4 Repeat steps 2 and 3 to open additional documents in other frames 5 Click OK...

Page 363: ...ehavior you can make the new window the exact size of the image If you specify no attributes for the window it opens at the size and with the attributes of the window from which it was opened Specifying any attribute for the window automatically turns off all other attributes that are not explicitly turned on For example if you set no attributes for the window it might open at 1024 x 768 pixels an...

Page 364: ...when you select the Preload Images option in the Swap Image dialog box so you do not need to manually add Preload Images when using Swap Image 1 Select an object and choose Preload Images from the Actions menu of the Behaviors panel 2 Click Browse to select an image file or enter the path and filename of an image in the Image Source File box 3 Click the Plus button at the top of the dialog box to ...

Page 365: ... Image in step 4 you have an additional option In the If Down To Image File box click Browse to select the image file or type the path to the image file Apply the Set Text Of Frame behavior The Set Text Of Frame behavior allows you to dynamically set the text of a frame replacing the content and formatting of a frame with the content you specify The content can include any valid HTML code Use this...

Page 366: ...this behavior to describe the destination of a link in the status bar instead of showing the URL associated with it Visitors often ignore or overlook messages in the status bar and not all browsers provide full support for setting the text of the status bar if your message is important consider displaying it as a pop up message or as the text of an AP element Note If you use the Set Text Of Status...

Page 367: ...ly the Show Hide Elements behavior The Show Hide Elements behavior shows hides or restores the default visibility of one or more page elements This behavior is useful for displaying information as the user interacts with the page For example as the user moves the pointer over an image of a plant you could show a page element giving details about the plant s growing season and region how much sun i...

Page 368: ...nd choose Deprecated Show Pop Up Menu from the Actions menu of the Behaviors panel 2 Use the following tabs to set options for the pop up menu Contents Set the name structure URL and target of individual menu items Appearance Set the appearance of the menu s Up State and Over State and the font of menu items Advanced Set the properties of the menu cells For example you can set cell width and heigh...

Page 369: ...for the menu item text Note If the font you want is not in the font list use the Edit Font List option to add it 3 In the Up State and Over State boxes use the color picker to set the text and cell colors of the menu item buttons 4 When you finish click OK or select another Show Pop Up Menu tab to set additional options Advanced appearance options Cell Width and Cell Height Set the width or height...

Page 370: ... Insert Spry Spry Menu Bar or click the Spry Menu Bar icon on the Spry tab of the Insert bar For more information see Working with the Menu Bar widget on page 453 To open an existing HTML based pop up menu 1 Select an object and choose Deprecated Show Pop Up Menu from the Actions menu of the Behaviors panel 2 Make your changes in the dialog box and click OK Apply the Swap Image behavior The Swap I...

Page 371: ...ields at once when the user clicks the Submit button Attaching this behavior to a form prevents the submission of forms with invalid data 1 Select Insert Form or click the Form button in the Insert bar to insert a form 2 Select Insert Form Text Field or click the Text Field button in the Insert bar to insert a text field Repeat this step to insert additional text fields 3 Choose a validation metho...

Page 372: ...ds check that the default event is onBlur or onChange If not select one of those events Both events trigger the Validate Form behavior when the user moves away from the field The difference is that onBlur occurs whether or not the user has typed in the field and onChange occurs only if the user changed the contents of the field The onBlur event is preferred if the field is required September 4 200...

Page 373: ...eamweaver and these other appli cations for example to preserve rollover behaviors or links to other files Design Notes are small files that allow Dreamweaver to locate the source document for an exported image or Flash file When you export files from Fireworks Flash or Photoshop directly to a Dreamweaver defined site Design Notes containing references to the original PSD PNG or Flash authoring fi...

Page 374: ...ee also About Photoshop Flash and Fireworks integration on page 366 Edit a Fireworks image or table from Dreamweaver When you open and edit an image or an image slice that is part of a Fireworks table Dreamweaver starts Fireworks which opens the PNG file from which the image or table was exported Note This assumes that Fireworks is set as the primary external image editor for PNG files Fireworks i...

Page 375: ...ttings animation settings and the size and area of the exported image 1 In Dreamweaver select the desired image and select Command Optimize Image 2 Make your edits in the Image Preview dialog box To edit optimization settings click the Options tab To edit the size and area of the exported image click the File tab 3 When you finish click OK See also Choose image optimization settings on page 378 Us...

Page 376: ... named the image placeholder when you inserted it in the Dreamweaver document Fireworks populates the File Name box with that name You can change the name 7 Click Save to save the PNG file The Export dialog box appears Use this dialog box to export the image as a GIF or JPEG file or in the case of sliced images as HTML and images 8 For Save In select the Dreamweaver local site folder The Name box ...

Page 377: ...s sends the edited pop up menu back to Dreamweaver If you created a pop up menu in Fireworks MX 2004 or earlier you can edit it in Dreamweaver using the Show Pop Up Menu dialog box available from the Behaviors panel See also About Fireworks pop up menus on page 369 Edit a pop up menu created in Fireworks MX 2004 or earlier 1 In Dreamweaver select the hotspot or image that triggers the pop up menu ...

Page 378: ...lets you insert Fireworks generated HTML code complete with associated images slices and JavaScript into a document 1 In Dreamweaver document place the insertion point where you want to insert the Fireworks HTML code 2 Do one of the following Select Insert Image Objects Fireworks HTML In the Common category of the Insert bar click the Images button and choose Insert Fireworks HTML from the popup m...

Page 379: ... want to update and click Open 5 Navigate to the folder destination where you want to place the updated image files and click Select Windows or Choose Macintosh Fireworks updates the HTML and JavaScript code in the Dreamweaver document Fireworks also exports updated images associated with the HTML and places the images in the specified destination folder If Fireworks cannot find matching HTML code...

Page 380: ...he large images because original image formats other than GIF and JPEG might not be displayed properly on all browsers If your original images are JPEG files the large images may have larger file sizes or be of lower quality than the original images 7 Select a Scale percentage for the large size images Setting Scale to 100 creates large size images the same size as the originals The scale percenta...

Page 381: ...low to insert an image created in Photoshop into a web page In Photoshop save your image as a regular Photoshop file PSD You don t have to convert the image to JPEG GIF or PNG first In Dreamweaver select the PSD file and insert it into the web page Dreamweaver lets you optimize the image for the web and then inserts it in the page Use the following workflow for using a slice or layer in a Photosho...

Page 382: ...ettings and places a web ready version of your image in your page Information about the image such as the filename and location of the original PSD file is saved in a Design Note regardless of whether you have enabled Design Notes for your site The Design Note allows you to return to edit the original Photoshop source file from Dreamweaver Note If you decide later that you want to change the optim...

Page 383: ...settings and places a web ready version of your image in your page Information about the image such as the location of the original PSD source file is saved in a Design Note regardless of whether you have enabled Design Notes for your site The Design Note allows you to return to edit the original Photoshop file from Dreamweaver For a tutorial on copying and pasting between different applications i...

Page 384: ...click the plus above the left hand panel To add or change the external editor for a file type select that type in the left hand panel and click the plus above the right hand panel This puts you into the Select External Editor file locator dialog box 2 Select an image that originated in Photoshop and do one of the following Press Alt Windows or Option Macintosh as you double click the file Right cl...

Page 385: ...Image Preview dialog box 1 In the Image Preview dialog box choose the Preview option if you want to see what the image looks like with your settings If performance is an issue you may want to deselect this option 2 Select one of the saved color palette settings from the pop up menu if you want to use a preset set of options 3 Use the pointer tool to grab the previewed image and pan it to see diffe...

Page 386: ...eoptimize click the Optimize button in the Property inspector and the Image Preview dialog box appears If the image was derived from Photoshop the Photoshop image is reimported and you can reapply optimization settings to it If there is no Photoshop PSD file associated with the image the web ready image is displayed Optimization settings When you insert an image file or copy part of an image from ...

Page 387: ...and they vary depending on the file format you choose Several sets of GIF and JPEG image options available for your convenience in the Saved Settings pop up menu of the Image Preview dialog box JPEG image options You can optimize a JPEG image by setting its compression and smoothing options You cannot edit its color palette Quality Use the slider to increase or decrease the quality of the image Be...

Page 388: ...d maximum number of colors Palette Tools Click on any pixel in the palette and then click on these icons to change add or delete color or to make a color transparent web safe or locked Select Transparency Color Icons These buttons allow you to select add or remove a palette color For example if you choose the Select Transparency Color option you can click on any pixel in the palette or on a point ...

Page 389: ... color palette contains up to 128 colors See also Choose image optimization settings on page 378 Working with Flash Edit a SWF file from Dreamweaver in Flash If you have both Flash and Dreamweaver installed you can select a SWF file in a Dreamweaver document and use Flash to edit it Flash does not edit the SWF file directly it edits the source document FLA file and re exports the SWF file 1 In Dre...

Page 390: ...in the dialog box To update all instances of the link select Site Change Link Sitewide In the Change All Links To text box browse to the link you are changing or type its path In the Into Links To text box browse to the new URL or type its path 5 Click OK Any links updated by Dreamweaver in the SWF file are conveyed to the FLA source document when you start Flash to edit Dreamweaver automatically ...

Page 391: ...amweaver displays an error message and you will need to install the appli cation before you can use these features Placing files into Dreamweaver from Bridge You can insert files into Dreamweaver pages by inserting them or by dragging them from Bridge into your page The Dreamweaver document in which you want to insert the file must be open and in Design view to use this feature You can insert most...

Page 392: ... sibility Attributes dialog box is displayed when you insert web safe images such as JPEG and GIF Note If your insertion point is in Code view Bridge starts as usual but cannot place the file You can only place files in Design view Start Dreamweaver from Bridge Select a file in Bridge and do one of the following Select File Open With Adobe Dreamweaver Right click Control click on Macintosh and the...

Page 393: ...JavaScript correctly in Device Central link href SpryAccordion css media screen rel stylesheet type text css link href SpryAccordion2 css media handheld rel stylesheet type text css Opera s Small Screen Rendering does not support frames pop ups underlining strikethrough overlining blink and marquee Try to avoid these design elements Keep web pages for mobile devices simple In particular use a mini...

Page 394: ... document that is created from a template remains connected to that template unless you detach the document later You can modify a template and immediately update the design in all documents based on it Note Templates in Dreamweaver differ from templates in some other Adobe Creative Suite software in that page sections of Dreamweaver templates are fixed or uneditable by default See also Managing a...

Page 395: ...ths are correct Later when you create a document based on that template and save it all the document relative links are updated again to continue to point to the correct files When you add a new document relative link to a template file it s easy to enter the wrong path name if you type the path into the link text box in the Property inspector The correct path in a template file is the path from t...

Page 396: ...rence You would only do this if for example you had a Cascading Style Sheets CSS page main css in your Templates folder and you wanted a template based document to contain the link href Templates main css but this is not recommended practice as only Dreamweaver template DWT files should reside in the Templates folder To have Dreamweaver update document relative paths to non template files in the T...

Page 397: ...ue of a parameter such as Param or complex enough to compute values which alternate the background color in a table row such as _index 1 red blue You can also define expressions for if and multiple if conditions When an expression is used in a conditional statement Dreamweaver evaluates it as true or false If the condition is true the optional region appears in the template based document if it is...

Page 398: ...st entry in the region _parent In a nested repeated region this gives the _repeat object for the enclosing outer repeated region It is an error to access this property outside of a nested repeated region During expression evaluation all fields of the _document object and _repeat object are implicitly available For example you can enter title instead of _document title to access the document s titl...

Page 399: ...parameters are automatically passed to it The template user determines which image to display See also Modify template properties on page 415 Recognizing templates and template based documents Recognizing templates in Design view In Design view editable regions appear in the Document window surrounded by rectangular outlines in a preset highlight color A small tab appears at the upper left corner ...

Page 400: ...e td td font color FFFFFF Address font td td font color FFFFFF Telephone Number font td tr TemplateBeginEditable name LocationList tr td Enter name td td Enter Address td td Enter Telephone td tr TemplateEndEditable table Note When you edit template code in Code view be careful not to change any of the template related comment tags that Dreamweaver relies on See also Customize code coloring prefer...

Page 401: ...es for template regions on page 419 Recognizing template based documents in Code view In Code view editable regions of a document derived from a template appear in a different color than code in the non editable regions You can make changes only to code in the editableregions or editable parameters but you cannot type in locked regions Editable content is marked in HTML with the following Dreamwea...

Page 402: ...rosoft Active Server Pages document or you can create a template from a new document After you create a template you can insert template regions and set template preferences for code color and template region highlight color You can store additional information about a template such as who created it when it was last changed or why you made certain layout decisions in a Design Notes file for the t...

Page 403: ...reate a blank template on page 70 Creating and opening documents on page 68 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 2 Click the New Template button at the bottom of the Assets panel A new untitled template is added to the list of templates in the Assets panel 3 While the template is still selected...

Page 404: ...r templates or non Dreamweaver templates Contribute users can edit pages that use any encoding but when a Contribute user creates a new blank page it uses the Latin 1 encoding To create a page that uses a different encoding a Contribute user can create a copy of an existing page that uses a different encoding or can use a template that uses a different encoding However if there are no pages or tem...

Page 405: ...the editable region affects only content inside the cell AP elements and AP element content are separate elements making an AP element editable lets you change the position of the AP element as well as its contents but making an AP element s contents editable lets you change only the content of the AP element not its position 1 In the Document window do one of the following to select the region Se...

Page 406: ...in template based documents again use the Remove Template Markup command 1 Click the tab in the upper left corner of the editable region to select it 2 Do one of the following Select Modify Templates Remove Template Markup Right click Windows or Control click Macintosh then select Templates Remove Template Markup The region is no longer editable Change an editable region s name After you insert an...

Page 407: ...ion In the Common category of the Insert bar click the Templates button then select Repeating Region from the pop up menu 3 In the Name box enter a unique name for the template region You cannot use the same name for more than one repeating region in a template Note When you name a region do not use special characters 4 Click OK See also Insert an editable region on page 398 Insert a repeating tab...

Page 408: ...s the row number entered as the last row to include in the repeating region Region Name Lets you set a unique name for the repeating region Set alternating background colors in a repeating table After you insert a repeating table in a template you can customize it by alternating the background color of the table rows 1 In the Document window select a row in the repeating table 2 Click the Show Cod...

Page 409: ...al region to control content that may or may not be displayed in a template based document There are two types of optional regions Non editable optional regions which enables template users to show and hide specially marked regions without enabling them to edit the content The template tab of an optional region is preceded by the word if Based on the condition set in the template a template user c...

Page 410: ...ements and expressions In the Advanced tab you can link multiple optional regions to a named parameter In the template based document both regions will show or hide as a unit For example you can show a closeout image and sales price text area for a sale item You can also use the Advanced tab to write a template expression that evaluates a value for the optional region and shows it or hides it base...

Page 411: ...olor for pages they create Users can update only the attributes you specify as editable You can also 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 Creating an editable tag attribute inserts a template parameter in the code An initial value for the a...

Page 412: ...lue of the selected tag attribute in the template Enter a new value in this box to set a different initial value for the parameter in the template based document 8 Optional If you want to make changes to another attribute of the selected tag select the attribute and set the options for that attribute 9 Click OK See also Modify template properties on page 415 Make an editable tag attribute uneditab...

Page 413: ...plate unless new template regions are inserted in these regions Changes to a base template are automatically updated in templates based on the base template and in all template based documents that are based on the main and nested templates In the following example the template trioHome contains three editable regions named Body NavBar and Footer September 4 2007 ...

Page 414: ...the nested template or passed through from the base template remain editable in documents that are based on the nested template Template regions that do not contain an editable region pass through to template based documents as editable regions Create a nested template Nested templates let you create variations of a base template You can nest multiple templates to define increasingly specific layo...

Page 415: ...ough editable regions have a blue border You can insert template markup inside an editable region so that it won t pass through as an editable region in documents based on the nested template Such regions have an orange border instead of a blue border 1 In Code view locate the editable region you want to prevent from passing through Editable regions are defined by template comment tags 2 Add the f...

Page 416: ... a template file 1 In the Assets panel Window Assets select the Templates category on the left side of the panel The Assets panel lists all of the available templates for your site and displays a preview of the selected template 2 In the list of available templates do one of the following Double click the name of the template you want to edit Select a template to edit then click the Edit button at...

Page 417: ...pens the template for editing 4 Click in another area of the Asset panel or press Enter Windows or Return Macintosh for the change to take effect An alert asks if you want to update documents that are based on this template 5 To update all documents in the site that are based on this template click Update Click Don t Update if you do not want to update any document based on this template See also ...

Page 418: ... Contribute users can t make changes to a Dreamweaver template You can however use Dreamweaver to change a template for a Contribute site Keep these factors in mind when updating templates in a Contribute site Contribute retrieves new and changed templates from the site only when Contribute starts up and when a Contribute user changes their connection information If you make changes to a template ...

Page 419: ... Export a document s editable regions as XML 1 Open a template based document that contains editable regions 2 Select File Export Template Data As XML 3 Select one of the Notation options If the template contains repeating regions or template parameters select Use Standard Dreamweaver XML Tag If the template does not contain repeating regions or template parameters select Use Editable Region Names...

Page 420: ...applying a revised version of one of your existing templates the names are likely to match If you apply a template to a document that hasn t had a template applied to it there are no editable regions to compare and a mismatch occurs Dreamweaver tracks these mismatches so you can select which region or regions to move the current page s content to or you can delete the mismatched content You can ap...

Page 421: ...o move the existing content to Select Nowhere to remove the content from the document 5 To move all unresolved content to the selected region click Use For All 6 Click OK to apply the template or click Cancel to cancel the application of the template to the document Important When you apply a template to an existing document the template replaces the document s contents with the template s boilerp...

Page 422: ...te parameters on page 390 Using optional regions on page 402 Defining editable tag attributes on page 404 Modify an editable tag attribute 1 Open the template based document 2 Select Modify Template Properties The Template Properties dialog box opens showing a list of available properties The dialog box shows optional regions and editable tag attributes 3 In the Name list select the property The b...

Page 423: ...r change the order of a repeating region 1 Open the template based document 2 Place the insertion point in the repeating region to select it 3 Do one of the following Click the Plus button to add a repeating region entry below the currently selected entry Click the Minus button to delete the selected repeating region entry Click the Down Arrow button to move the selected entry down one position Cl...

Page 424: ...ple in a TemplateParam you can specify the type before the name Comment and attribute names are case sensitive All attributes must be in quotation marks Single or double quotes can be used Template tags Dreamweaver uses the following template tags TemplateBeginEditable name TemplateEndEditable TemplateParam name type value TemplateBeginRepeat name TemplateEndRepeat TemplateBeginIf cond TemplateEnd...

Page 425: ...horing preferences for templates Customize code coloring preferences for a template Code color preferences control the text background color and style attributes of the text displayed in Code view You can set your own color scheme so you can easily distinguish template regions when you view a document in Code view 1 Select Edit Preferences Windows or Dreamweaver Preferences Macintosh 2 Select Code...

Page 426: ...on the left 3 Click the Editable Regions Nested Regions or Locked Regions color box then select a highlight color using the color picker or enter the hexadecimal value for the highlight color in the box For information about using the color picker see Use the color picker on page 223 4 Optional Repeat the process for other template region types as necessary 5 Click the Show option to enable or dis...

Page 427: ...standing XML title author John Thompson author book mybooks In this example each parent book tag contains three child tags pubdate title and author But each book tag is also a child tag of the mybooks tag which is one level higher in the schema You can name and structure XML tags in any way provided that you nest tags accordingly within others and assign each opening tag a corresponding closing ta...

Page 428: ...rver For a tutorial about understanding XML see www adobe com go vid0165 Server side XSL transformations Dreamweaver provides methods for creating XSLT pages that let you perform server side XSL transformations When an application server performs the XSL transformation the file containing the XML data can reside on your own server or anywhere else on the web Additionally any browser can display th...

Page 429: ...a new document in which the formatted contents of the fragment appear instead of the placeholder You use the XSL Transformation server behavior to insert the reference to an XSLT fragment in a dynamic page When you insert the reference Dreamweaver generates an includes MM_XSLTransform folder in the site s root folder that contains a runtime library file The application server uses the functions de...

Page 430: ...t side transformations require manipu lation of the XML file that contains the data you want to display Additionally client side transformations will only work in modern browsers Internet Explorer 6 Netscape 8 Mozilla 1 8 and Firefox 1 0 2 For more information on browsers that do and don t support XSL transformations see www w3schools com xsl xsl_browsers asp First create an entire XSLT page and a...

Page 431: ...ode that links the two pages When you own the XML file the XSL transformations performed by the client are fully dynamic That is whenever you update the data in the XML file any HTML output using the linked XSLT page will be automatically updated with the new information Note The XML and XSL files you use for client side transformations must reside in the same directory If they don t the browser w...

Page 432: ...rming XSL transformations on the client on page 444 XML data and repeating elements The Repeating Region XSLT object lets you display repeating elements from an XML file within a page Any region containing an XML data placeholder can be turned into a repeated region However the most common regions are a table a table row or a series of table rows The following example shows how the Repeating Regio...

Page 433: ...item table width 500 border 1 tr td xsl value of select title td tr tr td xsl value of select description td tr table xsl for each In the previous example Dreamweaver has updated the XPath for the items that fall within the Repeating Region title description to be relative to the XPath in the enclosing xsl for each tags rather than the full document Dreamweaver generates context relative XPath exp...

Page 434: ...roach however makes it more difficult to debug your page because the browser transforms the XML and generates the HTML internally If you select the browser s View Source option to debug the generated HTML you will only see the original XML that the browser received not the full HTML tags styles and so forth respon sible for the rendering of the page To see the full HTML when viewing source code yo...

Page 435: ... binding the data to the XSLT fragment or to the entire XSLT page 7 If appropriate add a Repeating Region XSLT object to the table or table row that contains the XML data placeholders 8 Insert references To insert a reference to the XSLT fragment in your dynamic page use the XSL Transformation server behavior To insert a reference to the entire XSLT page in the dynamic page delete all of the HTML ...

Page 436: ...eate an entire XSLT page Select XSLT Fragment to create an XSLT fragment 3 Click Create and do one of the following in the Locate XML Source dialog box Select Attach A Local File click the Browse button browse to a local XML file on your computer and click OK Select Attach A Remote File enter the URL of an XML file on the Internet such as one coming from an RSS feed and click OK Note Clicking the ...

Page 437: ...new XSLT page with Dreamweaver you must attach an XML data source using the Bindings panel 1 In the Bindings panel Window Bindings click the XML link Note You can also click the Source link at the upper right corner of the Bindings panel to add an XML data source 2 Do one of the following Select Attach A Local File click the Browse button browse to a local XML file on your computer and click OK Se...

Page 438: ...ceholder is highlighted and in curly brackets It uses the XPath XML Path language syntax to describe the hierarchical structure of the XML schema For example if you drag the child element title to the page and that element has the parent elements rss channel and item then the syntax for the dynamic content placeholder will be rss channel item title Double click the XML data placeholder on the page...

Page 439: ...containing an XML data placeholder can be changed to a repeated region However the most common regions are tables table rows or a series of table rows 1 In Design view select a region that contains an XML data placeholder or placeholders The selection can be anything including a table a table row or even a paragraph of text To select a region on the page precisely you can use the tag selector in t...

Page 440: ... path of the repeating element See also Use the XPath Expression Builder to add expressions for XML data on page 440 XML data and repeating elements on page 425 Set Repeating Region XSL properties In the Property inspector you can select a different XML node to create the repeating region In the Select box enter a new node and then press the lightning bolt icon and select the node from the XML sch...

Page 441: ... And Design Views button after placing the insertion point on the page so that you can ensure that the insertion point is in the correct location If it isn t you might need to click somewhere else in Code view to place the insertion point where you want it 3 In the Server Behaviors panel Window Server Behaviors click the Plus button and select XSL Transfor mation 4 In the XSL Transformation dialog...

Page 442: ...1 In the Server Behaviors panel Window Server Behaviors double click the XSL Transformation server behavior that you want to edit 2 Make your changes and click OK Create a dynamic link You can create a dynamic link on your XSLT page that links to a specific URL when the user clicks a specified word or group of words from your XML data For full instructions see the Dreamweaver errata at www adobe c...

Page 443: ... the style sheet is only valid while working in Dreamweaver and the fragment will still display the appropriate styles in Design view Additionally all of your styles will be applied to both the fragment and the dynamic page when you view the dynamic page in Design view or preview the dynamic page in a browser Note If you preview the XSLT fragment in a browser the browser does not display the style...

Page 444: ...g box You can do this by double clicking an XSL Transformation server behavior in the Server Behaviors panel Window Server Behaviors or by adding a new XSL Transformation server behavior 2 Select a parameter from the XSLT parameters list 3 Click the Edit button 4 Make your changes and click OK Delete an XSLT parameter 1 Open the XSL Transformation dialog box You can do this by double clicking an X...

Page 445: ... statement in other languages The element provides a way for you to test a condition and take a course of action based on the result The xsl if element allows you to test an expression for a single true or false value 1 Select Insert XSLT Objects Conditional Region or click the Conditional Region icon in the XLST category of the Insert bar 2 In the Conditional Region dialog box enter the condition...

Page 446: ...nsert bar 2 In the Multiple Conditional Region dialog box enter the first condition In the following example you want to test to see if the context node s price subelement is less than 5 3 Click OK In the example the following code is inserted in your XSLT page xsl choose xsl when test price lt 5 Content goes here xsl when xsl otherwise Content goes here xsl otherwise xsl choose 4 To insert anothe...

Page 447: ...e XPath language specification on the W3C website at www w3 org TR xpath The XPath Expression Builder is a Dreamweaver feature that lets you build simple XPath expressions for identifying specific nodes of data and for repeating regions The advantage of using this method instead of dragging values from the XML schema tree is that you can format the value that is displayed The current context is id...

Page 448: ...de in your XSLT page xsl value of select price 3 Optional Select a formatting option from the Format pop up menu Formatting a selection is useful when the value of your node returns a number Dreamweaver provides a predefined list of formatting functions For a complete list of available formatting functions and examples see the Reference panel In the following example you want to format the price s...

Page 449: ...ot selected content the xsl for each block will be entered at the insertion point of your cursor 1 Double click the XML data placeholder on the page to open the XPath Expression Builder 2 In the XPath Expression Builder Repeating Region dialog box select the item to repeat in the XML schema tree The correct XPath expression is written in the Expression box to identify the node Note Repeating items...

Page 450: ... from the pop up menu or you can enter your own XPath expression in this field to identify children that exist deeper within the schema tree Operator Specifies the comparison operator to use in the filter expression Value Specifies the value to check for in the Filter By node Enter the value If dynamic parameters are defined for your XSLT page you can select one from the pop up menu 5 To specify a...

Page 451: ...l for each select provider store id 1 items item price gt 5 Content goes here xsl for each For more information and examples of repeating regions see the xsl for each section in the Reference panel Troubleshooting XSL transformations If you can t get your XSL transformations to work look at the troubleshooting guide available at www adobe com go dw_xsl_faq It provides answers to many frequently as...

Page 452: ...ntains the XML data placeholder s 7 Attach the XSLT page to the XML page 8 Post both the XML page and the linked XSLT page to your web server 9 View the XML page in a browser When you do so the browser transforms the XML data formats it with the XSLT page and displays the styled page in the browser See also Setting up a Dreamweaver site on page 40 Choosing your application server on page 502 Link ...

Page 453: ...t to link to select it and click OK 4 Click OK to close the dialog box and insert the reference to the XSLT page at the top of the XML document Troubleshooting XSL transformations If you can t get your XSL transformations to work look at the troubleshooting guide available at www adobe com go dw_xsl_faq It provides answers to many frequently asked questions Missing character entities Specify a mis...

Page 454: ... p To correct the error in your page you must add the entity definition to your page manually Specify a missing entity definition 1 Look up the missing character in the character entity reference page on the W3C website at www w3 org TR REC html40 sgml entities html This web page contains the 252 allowed entities in HTML 4 and XHTML 1 0 For example if the character entity Egrave is missing search ...

Page 455: ...amweaver application folder and open it in any text editor Configuration DocumentTypes MMDocumentTypeDeclarations xml 2 Locate the declaration called mm_xslt_1 documenttypedeclaration id mm_xslt_1 3 Enter the new entity tag or tags in the list of entity tags as follows ENTITY entityname entitycode 4 Save the file and restart Dreamweaver September 4 2007 ...

Page 456: ...on the Spry framework see www adobe com go learn_dw_spryframework For a tutorial about using Spry to build web pages see www adobe com go vid0166 Adding Spry widgets About Spry widgets A Spry widget is a page element that provides a richer user experience by enabling user interaction A Spry widget comprises the following parts Widget structure An HTML code block that defines the structural composi...

Page 457: ...f the widget Edit a Spry widget Select the widget to edit and make your changes in the Property inspector Window Properties For details on making changes to specific widgets see the appropriate sections for each widget Style a Spry widget Locate the appropriate CSS file for the widget in the SpryAssets folder of your site and edit the CSS according to your preferences For details on styling specif...

Page 458: ...mprises an outer div tag that contains all of the panels a div tag for each panel and a header div and content div within the tag for each panel An Accordion widget can contain any number of individual panels The HTML for the Accordion widget also includes script tags in the head of the document and after the accordion s HTML markup For a more comprehensive explanation of how the Accordion widget ...

Page 459: ...e an accordion that is styled to your liking For a more advanced list of styling tasks see www adobe com go learn_dw_spryaccordion_custom All CSS rules in the following topics refer to the default rules located in the SpryAccordion css file Dreamweaver saves the SpryAccordion css file in the SpryAssets folder of your site whenever you create a Spry Accordion widget This file also contains commente...

Page 460: ...a compact space and also give visitors to the site a sense of what is available on the site without having to browse it extensively Dreamweaver lets you insert two kinds of Menu Bar widgets vertical and horizontal The following example shows a horizontal Menu Bar widget with the third menu item expanded Text to change Relevant CSS rule Example of properties and values to add Text in the entire acc...

Page 461: ...on top of other sections If your page contains Flash content this might cause a problem because Flash movies are always displayed on top of all other DHTML layers so the Flash content might be displayed on top of your submenus The workaround for this situation is to change the parameters for the Flash movie to use wmode transparent For more information see www adobe com go 15523 Add or delete menu...

Page 462: ...anges in the Text box Link a menu item 1 Select a Menu Bar widget in the Document window 2 In the Property inspector Window Properties select the name of the menu item to which you want to apply a link 3 Type the link in the Link text box or click the folder icon to browse to a file Create a tool tip for a menu item 1 Select a Menu Bar widget in the Document window 2 In the Property inspector Wind...

Page 463: ...ar widget 2 Insert a vertical Menu Bar widget Insert Spry Spry Menu Bar and save the page This step ensures that the correct CSS file for a vertical menu bar is included in your site Note If your site already has a vertical Menu Bar widget somewhere else you don t need to insert a new one You can simply attach the SpryMenuBarVertical css file to the page instead by clicking the Attach Style Sheet ...

Page 464: ...tag contains the information for text styling There are also several relevant text styling class values attached to the a tag that pertain to different menu states To change the text styling of a menu item use the following table to locate the appropriate CSS rule and then change the default value Change the background color of a menu item The CSS attached to the a tag contains the information for...

Page 465: ...2 Change the margin 5 0 0 95 default values to the desired values Working with the Collapsible Panel widget About the Collapsible Panel widget A Collapsible Panel widget is a panel that can store content in a compact space Users hide or reveal the content stored in the Collapsible Panel by clicking the tab of the widget The following example shows a Collapsible Panel widget expanded and collapsed ...

Page 466: ... Design view and click the eye icon that appears at the right of the tab Select a Collapsible Panel widget in the Document window and then select Open or Closed from the Display pop up menu in the Property inspector Window Properties Set the default state of a Collapsible Panel widget You can set the default state open or closed of the Collapsible Panel widget when the web page loads in a browser ...

Page 467: ... Collapsible Panel widget container or by setting properties for the components of the widget individually To change the text format of a Collapsible Panel widget use the following table to locate the appropriate CSS rule and then add your own text styling properties and values Change Collapsible Panel widget background colors To change the background colors of different parts of a Collapsible Pan...

Page 468: ...ccordingly as the visitor clicks different tabs In a Tabbed Panels widget only one content panel is open at a given time The following example shows a Tabbed Panels widget with the third panel open A Tab B Content C Tabbed Panels widget D Tabbed panel The HTML code for the Tabbed Panels widget comprises an outer div tag that contains all of the panels a list for the tabs a div to contain the conte...

Page 469: ...the Document window 2 In the Property inspector Window Properties select the panel you want open by default from the Default panel pop up menu Customize the Tabbed Panels widget Although the Property inspector enables you to make simple edits to a Tabbed Panels widget it does not support customized styling tasks You can alter the CSS rules for the Tabbed Panels widget and create a widget that is s...

Page 470: ...he main container element of the Tabbed Panels widget You can also locate the rule by selecting the Tabbed Panels widget and looking in the CSS Styles panel Window CSS Styles Make sure the panel is set to Current mode 2 Add a width property and value to the rule for example width 300px Text to change Relevant CSS rule Example of properties and values to add Text in the entire widget TabbedPanels f...

Page 471: ... when the user has entered information correctly and the form can be submitted Invalid state The widget state when the user has entered text in an invalid format For example 06 for a year instead of 2006 Required state The widget state when the user has failed to enter required text in the text field Minimum Number Of Characters state The widget state when the user has entered fewer than the minim...

Page 472: ... 2 In the Property inspector Window Properties select a validation type from the Type menu 3 If applicable select a format from the Format pop up menu Most validation types cause the text field to expect a standard format For example if you apply the integer validation type to a text field the widget won t validate unless the user has entered numbers in the text field Some validation types however...

Page 473: ...ats vary Make your selection from the Format pop up menu of the Property inspector Phone Number Text field accepts phone numbers formatted for U S and Canada 000 000 0000 or custom formats If you select custom format as an option enter the format for example 000 00 00 in the Pattern text box Social Security Number Text field accepts social security numbers formatted as 000 00 0000 If you want to u...

Page 474: ...int for a text field Because there are so many different kinds of formats for text fields it is helpful to give your users a hint as to what format they need to enter For example a text field set with the Phone Number validation type will only accept phone numbers in the form 000 000 0000 You can enter these sample numbers as a hint so that the text field displays the correct format when the user ...

Page 475: ...es Change Validation Text Field widget background colors To change the background colors of the Validation Text Field widget in various states use the following table to locate the appropriate CSS rule and then change the default background color values Text to change Relevant CSS rule Relevant properties to change Error message text textfieldRequiredState textfieldRequiredMsg textfield InvalidFor...

Page 476: ...s to submit the form Initial state The widget state when the page loads in the browser or when the user resets the form Focus state The widget state when the user places the insertion point in the widget Valid state The widget state when the user has entered information correctly and the form can be submitted Required state The widget state when the user has failed to enter any text Minimum Number...

Page 477: ...date On option that indicates when you want validation to occur You can select all of the options or none of them Blur Validates whenever the user clicks outside the text field Change Validates as the user changes text inside the text field Submit Validates when the user tries to submit the form Specify a minimum and maximum number of characters 1 Select a Validation Text Area widget in the Docume...

Page 478: ...o accept no more than 20 characters the user will not be able to type more than 20 characters in the text area 1 Select a Validation Text Area widget in the Document window 2 In the Property inspector Window Properties select the Block Extra Characters option Customize the Validation Text Area widget Although the Property inspector enables you to make simple edits to a Validation Text Area widget ...

Page 479: ...ctions and divided by horizontal lines If the user accidentally selects one of the divider lines as opposed to one of the states the Validation Select widget returns a message to the user stating that their selection is invalid The following example shows an expanded Validation Select widget as well as the collapsed form of the widget in various states Text to change Relevant CSS rule Relevant pro...

Page 480: ...HTML container for the widget at run time For example if a user tries to submit a form but has not selected an item from the menu Spry applies a class to the widget so that it displays the error message Please select an item The rules that control the style and display states of error messages reside in the CSS file that accompanies the widget SpryValidationSelect css The default HTML for the Vali...

Page 481: ...he Property inspector Window Properties select or deselect the Do Not Allow Blank Values option depending on your preference Specify an invalid value You can specify a value that will register as invalid if the user selects a menu item that is associated with that value For example if you specify 1 as an invalid value and you assign the value to an option tag the widget will return an error messag...

Page 482: ...lidation Checkbox widget About the Validation Checkbox widget A Spry Validation Checkbox widget is a check box or group of check boxes in an HTML form that display valid or invalid states when the user selects or fails to select a check box For example you can add a Validation Checkbox widget to a form in which a user might be required to make three selections If the user fails to make all three s...

Page 483: ...ed Whenever a Validation Checkbox widget enters one of these states through user interaction the Spry framework logic applies a specific CSS class to the HTML container for the widget at run time For example if a user tries to submit a form but has made no selections Spry applies a class to the widget that causes it to display the error message Please make a selection The rules that control the st...

Page 484: ...of check boxes that you want the user to select Display widget states in Design view 1 Select a Validation Checkbox widget in the Document window 2 In the Property inspector Window Properties select the state you want to see from the Display state pop up menu For example select Initial to see the widget in its initial state Customize Validation Checkbox widget error messages By default error messa...

Page 485: ...urce files the Spry data set that contain your data and then insert one or more Spry data objects to display this data When the user opens the page in a browser the data set loads as a flattened array of XML data that looks like a standard table containing rows and columns For example suppose you have the following XML data structure in your XML file products product name Adobe Photoshop CS2 name ...

Page 486: ...ct s information Neither of these actions sorting a table or updating a detail region when a user clicks it require the browser to do a full page refresh You can incorporate Spry data objects into your Dreamweaver pages in many ways some of which require a deeper knowledge of the Spry framework For more information about the framework visit www adobe com go learn_dw_spryframework For more informat...

Page 487: ...ata displayed in the associated detail region Define a Spry XML data set Before you can add Spry regions tables or lists to an HTML page you need to identify the data that you want to work with Note If you don t already have an XML data set to use for testing the Spry assets available at www adobe com go learn_dw_spryframework includes several sample data sets 1 Select Insert Spry Spry XML Data Se...

Page 488: ...s data set should be displayed Note XPath XML Path Language is a syntax for addressing portions of an XML document It is used mostly as a query language for XML data just as the SQL language is used to query databases For more information on XPath see the XPath language specification on the W3C website at www w3 org TR xpath 8 To see how your data will look in a browser click the Preview button Th...

Page 489: ...f the file to design your page separately from the database development To use a design time feed you must complete the Testing Server category of the Site Definition dialog box To obtain a design time feed browse to locate the file and click OK You arrive at this dialog box by clicking the link in the Define Spry Data Set dialog box Note When you upload your final file remember to change the data...

Page 490: ...list or with dynamic data from the Bindings panel 7 To replace the placeholder text with a Spry data object for example a Spry Table click the appropriate Spry data object button in the Spry category of the Insert Bar 8 To replace the placeholder text with dynamic data use one of the following methods Drag one or more elements from the Bindings panel on top of the selected text Note In the Binding...

Page 491: ... to the right 4 To define a column to sort on select it in the Columns panel and choose Sort Column When Header Is Clicked Repeat this for each column you want to sort on 5 If you have CSS styles associated with your page either as an attached style sheet or as a set of individual styles in your HTML page you can choose a CSS class for one or more of the following options Odd Row Class Changes the...

Page 492: ...l list the data is checked at the li level If you choose the Repeat option the data is checked at the ul level The Repeat Children option may be especially useful if you use conditional expressions in your code 4 Choose your Spry data set from the menu 5 If you already have text or elements selected you can wrap or replace them 6 Click OK to display a repeat region on your page Note All Spry data ...

Page 493: ...ou can create a list of states and show users Alabama and Alaska but send AL or AL to the server You can also use the SELECT as a navigational tool and show product names such as Adobe Dreamweaver and Adobe Acrobat to users but send URLs such as support products dreamweaver html and support products acrobat html to the server 3 Choose your Spry data set from the menu 4 Choose the columns you want ...

Page 494: ...ny HTML objects except applet body iframe object tr tbody or th 1 Optional Select the content or layout object you want to apply the effect to 2 In the Behaviors panel Window Behaviors click the Plus button and select Effects Appear Fade from the menu 3 Select the object s ID from the target element menu If you already selected an object choose Current Selection 4 In the Effect Duration box define...

Page 495: ...he Grow Shrink To box define the object s size when the effect ends This is a percentage of the size or a pixel value 8 If you choose pixels for either the Grow Shrink From or To boxes the wide high field becomes visible Depending on the option you choose the element will grow or shrink proportionately 9 Select whether you want the element to grow or shrink to the upper left corner of the page or ...

Page 496: ... choose Current Selection 4 In the Effect Duration field define the time it takes for the effect to occur in milliseconds 5 Select the effect you want to apply Slide Up or Slide Down 6 In the Slide Up From box define the sliding starting point as a percentage or as a pixel number 7 In the Slide Up To box define the sliding end point as a percentage or as a positive pixel amount 8 Select Toggle Eff...

Page 497: ...or layout object you want to apply the effect to 2 In the Behaviors panel Window Behaviors click the effect you want to delete from the list of behaviors 3 Do one of the following Click the Remove Event button in the subpanel title bar Right click Windows or Control click Macintosh the behavior and select Delete Behavior September 4 2007 ...

Page 498: ... Examples include company intranets Microsoft MSDN www msdn microsoft com and Amazon com www amazon com Collect save and analyze data provided by site visitors In the past data entered in HTML forms was sent as e mail messages to employees or CGI applications for processing A web application can save form data directly into a database and also extract the data and create web based reports for anal...

Page 499: ... you could design a page to display fitness results while leaving certain information such as employee name and results to be determined when the page is requested by a particular employee The next sections describe how web applications work in greater detail Processing static web pages A static website comprises a set of related HTML pages and files hosted on a computer running a web server A web...

Page 500: ...ction Processing dynamic pages When a web server receives a request for a static web page the server sends the page directly to the requesting browser When the web server receives a request for a dynamic page however it reacts differently It passes the page to a special piece of software responsible for finishing the page This special software is called an application server The application server...

Page 501: ...cate directly with a database because the database s proprietary format renders the data undecipherable in much the same way that a Microsoft Word document opened in Notepad or BBEdit may be undecipherable The application server can communicate with the database only through the inter mediary of a database driver software that acts like an interpreter between the application server and the databas...

Page 502: ...f you plan to build small low cost applications you can use a file based database such as one created in Microsoft Access If you plan to build robust business critical applications you can use a server based database such as one created in Microsoft SQL Server Oracle 9i or MySQL If your database is located on a system other than your web server make sure you have a fast connection between the two ...

Page 503: ...he web server html head title Trio Motors Information Page title head body h1 About Trio Motors h1 p Trio Motors is a leading automobile manufacturer p p Be sure to visit our Sales page p body html The web server sends the page to the requesting browser which displays it as follows About Trio Motors Trio Motors is a leading automobile manufacturer Be sure to visit our Sales page You choose a scrip...

Page 504: ...in tables Each row of a table constitutes one record and each column consti tutes a field in the record as shown in the following example A database driver Software that acts as an interpreter between a web application and a database Data in a database is stored in a proprietary format A database driver lets the web application read and manipulate data that would otherwise be undecipherable A data...

Page 505: ...server Because the final content of the page varies from request to request based on the visitor s actions this kind of page is called a dynamic page A web server Software that sends out web pages in response to requests from web browsers A page request is generated when a visitor clicks a link on a web page in the browser selects a bookmark in the browser or enters a URL in the browser s address ...

Page 506: ...ocalhost For example the following URLs open the same page in a browser http mer_noire gamelan soleil html http localhost gamelan soleil html Note Another expression you can use instead of the server name or localhost is 127 0 0 1 for example http 127 0 0 1 gamelan soleil html See also Installing a local web server on page 498 Choosing your web server To develop and test web applications you can c...

Page 507: ...ion Server IIS 1 Create a simple HTML page called myTestFile html and save it in the Inetpub wwwroot folder on the computer where the web server is running The HTML page can consist of a single line p My web server is working p 2 Open the test page in a web browser with an HTTP request If IIS is running on your local computer enter the following URL in your web browser http localhost myTestFile ht...

Page 508: ...g up a web application What you need to build web applications To build web applications in Adobe Dreamweaver CS3 you need the following software A web server An application server that works with your web server Note In the context of web applications the terms web server and application server refer to software not hardware If you want to use a database with your application you require the foll...

Page 509: ...m the Help menu To learn more about ASP NET visit the Microsoft website at http msdn microsoft com asp net To learn more about ASP visit the Microsoft website at http msdn microsoft com library default asp url library en us dnanchor html activeservpages asp To learn more about JSP visit the Sun Microsystems website at java sun com products jsp To learn more about PHP visit the PHP website at www p...

Page 510: ...ed and follow the onscreen installation instructions 4 At the Choose Items To Install screen click the Plus button next to Extensions locate MySQL in the list and then select the Will Be Installed On Local Hard Drive option With PHP 5 the MySQL extension that allows PHP to work with a MySQL database server is not installed or enabled by default by the Windows installer 5 In the PHP installation fo...

Page 511: ...typing mistake Check for errors and make sure the filename is not followed by a slash such as http localhost timetest php The page code contains a typing mistake After installing and testing the server software create a root folder for your web application See Creating a root folder for the application on page 506 To install the PHP application server on the Macintosh 1 If applicable log into your...

Page 512: ...t the page does not use any client side JavaScript to achieve this effect If the page doesn t work as expected check for the following possible errors The file does not have a php extension The URL contains a typing mistake Check for errors and make sure the filename is not followed by a slash such as http localhost your_user_name timetest php Also make sure you included the tilde before your user...

Page 513: ...a mdac downloads Macintosh users can use a web hosting service with an ASP NET plan or install the NET Framework and SDK on a remote Windows 2000 or Windows XP Professional computer running IIS 5 or later After installing the NET Framework and SDK create a root folder for your web application Installing a JSP application server To run JSP pages you need an application server that supports JavaServ...

Page 514: ...tp localhost 8500 testpage htm in the browser s address text box The URL contains a typing mistake Check for errors and make sure the filename is not followed by a slash such as http localhost 8080 testpage htm After creating a root folder for your application define a Dreamweaver site to manage your files See also Installing a local web server on page 498 Setting up a Dreamweaver site on page 40 ...

Page 515: ... computer a development server a staging server or a production server As long as it can process the kind of dynamic pages you plan to develop the choice doesn t matter After the Dreamweaver site is defined you can start building your web application See also Setting up a Dreamweaver site on page 40 Set up and edit a local root folder on page 42 Set up a remote folder on page 43 Set up a testing s...

Page 516: ...pt the name of the data source For more information see the driver vendor s documentation or consult your system administrator Create or modify a ColdFusion data source if running ColdFusion MX 6 1 or 6 0 1 Open any ColdFusion page in Dreamweaver 2 In the Databases panel Window Databases in Dreamweaver click Modify Data Sources in the panel toolbar 3 Log in to ColdFusion MX Administrator and creat...

Page 517: ... UID wiley PWD roadrunner Note You can also use a connection string if you re connecting through an ODBC driver installed on a Windows system but using a DSN is easier See also Accessing a database on page 494 About OLE DB connections You can use an OLE DB provider to communicate with your database OLE DB is available only on Windows NT 2000 or XP Creating a direct database specific OLE DB connect...

Page 518: ...y Provider Microsoft Jet OLEDB 4 0 Provider SQLOLEDB Provider OraOLEDB For the parameter value of your OLE DB provider see your provider vendor s documentation or consult your system administrator If you don t include a Provider parameter then the default OLE DB provider for ODBC is used and you must specify an appropriate ODBC driver for your database Driver Specifies the ODBC driver to use if yo...

Page 519: ...ft Knowledge Base Article 300596 at http support microsoft com default aspx scid kb en us 300596 If the computer runs Windows XP see Microsoft Knowledge Base Article 305599 at http support microsoft com default aspx scid kb en us 305599 2 Open an ASP page in Dreamweaver and then open the Databases panel Window Databases 3 Click the Plus button on the panel and select Data Source Name DSN from the ...

Page 520: ... Databases 3 Click the Plus button on the panel and select Data Source Name DSN from the menu 4 Enter a name for the new connection without spaces or special characters 5 Select Using DSN On Testing Server Note Macintosh users can ignore this step because all database connections use DSNs on the application server 6 Enter the DSN or click the DSN button to connect to the server and select the DSN ...

Page 521: ...nnecting to a ColdFusion database on page 508 Restrict database information displayed in Dreamweaver on page 540 Troubleshooting database connections on page 525 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...

Page 522: ...method to obtain a value for the stringvariable argument Here s an example Response Write Server MapPath jsmith index htm 4 Switch to Design view View Design and enable Live Data View Live Data to view the page The page displays the physical path of the file on the application server for example c Inetpub wwwroot accounts users jsmith index htm For more information on the MapPath method consult th...

Page 523: ...ill not work with Microsoft Access Driver 3 5 You need Microsoft Access Driver 4 0 or later 7 Update the database connection of existing dynamic pages open the page in Dreamweaver double click the recordset name in the Bindings panel or Server Behaviors panel and select the connection you just created from the Connection menu and use the new connection with any new page you build Edit or delete a ...

Page 524: ...alog box Enter a name for the new connection without spaces or special characters In the MySQL Server box enter an IP address or a server name for the computer hosting MySQL If MySQL is running on the same computer as PHP you can enter localhost Enter your MySQL user name and password In the Database box enter the name of the database or click Select and select the database from the list of MySQL ...

Page 525: ...Connecting to an ASP NET database Before you can connect to a database you must obtain an OLE DB provider for your database If you want to connect to a Microsoft SQL Server database you can use the Managed Data Provider for SQL Server that is supplied by the NET Framework Software Development Kit SDK Before connecting to the database you must set up an ASP NET application Also the database must be...

Page 526: ... OK 4 Replace the placeholders in the string with the requested information click Test and then click OK See also Sample OLE DB connection parameters for ASP NET on page 520 Troubleshooting database connections on page 525 Create a connection using data link properties After obtaining an OLE DB provider for your database you can create a database connection by using the Data Link Properties dialog...

Page 527: ...re are the parameters to create the connection string Provider Microsoft Jet OLEDB 4 0 Data Source d users tara projects MtnDrivingSchool data mtnSchool mdb Case 3 You use the NET Framework on a networked development server called Savant and you want to connect to a Microsoft SQL Server database called pubs on the server Your SQL Server user name is sa and there is no password If you use the Manag...

Page 528: ...When you create a JSP database connection in Dreamweaver you usually need to enter JDBC connection param eters JDBC connections usually consist of four parameters the driver user name password and URL which specifies the location of the database Generally the values of the driver parameter and the URL parameter depend on the driver type This example shows how to define connection parameters in Dre...

Page 529: ...he Sun JDBC ODBC Bridge driver on page 523 Create a JSP database connection After installing an appropriate JDBC driver for your database on the computer running your application server you can create a database connection in Dreamweaver 1 Open a JSP page in Dreamweaver then open the Databases panel Window Databases 2 Click the Plus button and select your driver from the menu If your driver is not...

Page 530: ...ndows computer An ODBC driver for your database must be installed on the Windows computer running the application server A JDBC ODBC bridge driver must be installed on the Windows computer running the application server If you meet these requirements you can connect through an ODBC driver Checking for the ODBC driver Make sure an ODBC driver for your database is installed on the Windows computer r...

Page 531: ...nel Window Databases 3 Click the Plus button on the panel and select Sun JDBC ODBC Driver ODBC Database from the menu 4 Enter a name for the new connection without spaces or special characters 5 Replace the odbc dsn placeholder in the URL box with the DSN you defined in step 1 The URL box should look like this jdbc odbc myDSN 6 Specify the user name and password to access the database If you don t...

Page 532: ...gs panel and choosing a new connection in the Recordset dialog box Troubleshooting database connections Troubleshooting permissions problems One of the most common problems is insufficient folder or file permissions If your database is located on a Windows 2000 or Windows XP computer and you receive an error message when you try to view a dynamic page in a web browser or in Live Data mode the erro...

Page 533: ...r and select Properties 3 Select the Security tab Note This step applies only if you have an NTFS file system If you have an FAT file system the dialog box won t have a Security tab 4 If the IUSR_computername account is not listed among the Windows accounts in the File Permissions dialog box click the Add button to add it 5 In the Select Users Computers or Groups dialog box select the computer nam...

Page 534: ...inting to the same database file delete the DSN to prevent the error in the future Reboot the computer after making any changes Reference 80004005 Couldn t use unknown file already in use This error occurs when you use a Microsoft Access database and attempt to view a dynamic page in a web browser or in Live Data mode Another variation of this error message is 80004005 Microsoft Jet database engin...

Page 535: ... must be set to read write The permissions on the database file itself does not have full read write privileges in effect The database might be located outside the Inetpub wwwroot directory Though you can view and search the data you might not be able to update it unless the database is located in the wwwroot directory The recordset is based on a non updateable query Joins are good examples of non...

Page 536: ...ot conform to the mask To fix the problem avoid using reserved words such as date name select where and level when specifying column names in your database Also eliminate spaces and special characters 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...

Page 537: ...se scripts are only needed for design time authoring in Dreamweaver When you select the Using Driver On Testing Server option or the Using DSN On Testing Server option in the Database Connections dialog box Dreamweaver uploads an MMHTTPDB script file to the testing server This allows Dreamweaver to manipulate the remote database driver with the HTTP protocol which in turn allows Dreamweaver to get...

Page 538: ... most website applications be aware that Access has a file size limitation of 2 gigabytes GB and is limited to 255 concurrent users Access is a reasonable choice for website development and corporate workgroups However if you anticipate a large user community accessing the site use a database designed to support your site s intended user base For websites requiring greater flexibility in their dat...

Page 539: ...ameters 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 can use Dreamweaver to quickly design HTML forms that send form parameters to the server Be aware of the method you use to transmit information from the ...

Page 540: ...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 example shows a URL parameter with two name value pairs http server path document name1 value1 name2 value2 In this example workflow the application is a web based storefront Because the developers of the site want to reach the widest possible audience the s...

Page 541: ...terms to SQL variables in a web application to generate search results Creating URL parameters using HTML links You create URL parameters within an HTML link by using the href attribute of the HTML anchor tag You can enter the URL parameters directly in the attribute in Code view View Code or by appending the URL parameters at the end of the link URL in the Property inspector Link box In the follo...

Page 542: ... can access The information can be as diverse as the user s name preferred font size or a flag indicating whether the user has successfully logged in Another common use of session variables is to keep a running tally such as the number of questions answered correctly so far in an online quiz or the products the user selected so far from an online catalog Session variables can only function if the ...

Page 543: ... The HTML syntax for each appears as follows form action destination html method get name myform form param name href value destination html Both the server technology used and the method you use to obtain the information determines the code used to store the information in a session variable The basic syntax for each server technology is as follows ColdFusion CFSET session variable_name value ASP...

Page 544: ...href resort cfm fontsize small Normal Text a Store the user s text preference in a session variable and use it to set the font size on each page the user requests Near the top of the destination page enter the following code to create a session called font_pref that stores the user s font size preference ColdFusion CFSET session font_pref url fontsize ASP and ASP NET Session font_pref Request Quer...

Page 545: ...ion bars If you switch to Code view View Code additional panels might appear in their own Insert bar category allowing you to insert code in the page For example if you view a ColdFusion page in Code view a CFML panel becomes available in the CFML category of the Insert bar Several panels provide ways for you to create dynamic pages Select the Bindings panel Window Bindings to define sources of dy...

Page 546: ...ct View Data from the pop up menu See also Setting up a web application on page 501 Previewing dynamic pages in a browser Web application developers often debug their pages by checking them often in a web browser You can quickly view dynamic pages in a browser without first manually uploading them to a server press F12 To preview dynamic pages you must complete the Testing Server category of the S...

Page 547: ... or catalog in Dreamweaver if you re developing a ColdFusion application or using Microsoft Access 1 Open a dynamic page in Dreamweaver then open the Databases panel Window Databases If the database connection exists right click Windows or Control click Macintosh the connection in the list and select Edit Connection from the pop up menu If the connection does not exist click the Plus button at the...

Page 548: ...te a source of dynamic content Dynamic websites require a content source from which to extract data before they can display it on a web page Before you can use content sources in a web page you must do the following Create a connection to the dynamic content source such as a database and the application server processing the page Create the data source by using the Bindings panel then you can sele...

Page 549: ...elect either an entire table or individual cells or rows that contain dynamic content and specify the number of records to display on each page view Create and insert a dynamic table into a page and associate the table with a recordset You can later modify both the tables appearance and the repeating region by using the Property inspector and Repeating Region Server Behavior respectively Insert a ...

Page 550: ...the page to meet the needs of users Any content source that you define in Dreamweaver is added to the list of content sources in the Bindings panel Then you can insert the content source into the currently selected page About recordsets When using a database as a content source for a dynamic web page you must first create a recordset in which to store the retrieved data Recordsets serve as an inte...

Page 551: ...ft SQL Server using the Managed Data Provider for SQL Server supplied with the NET Framework all parameters must be named For example SELECT FROM Employees WHERE HireDate hireDate Insert 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 quer...

Page 552: ...d for the lifetime of the application and persists from user to user The application s lifetime lasts from the time the first user requests a page in the application to the time the web server is stopped An application is defined as all the files in a virtual directory and its subdirectories Because application variables last for the lifetime of the application and persist from user to user they r...

Page 553: ... pages on page 564 Change or delete content sources on page 563 Use predefined data formats on page 578 Attach XML data sources on page 430 Display XML data in XSLT pages on page 431 URL parameters on page 533 Define session variables on page 558 Define application variables for ASP and ColdFusion on page 558 Define server variables on page 559 Cache content sources on page 563 Copy a recordset fr...

Page 554: ...ions to inspect databases and to insert database related code in your pages You can view and connect to your database with this panel View your database within Dreamweaver on page 539 Database connections for ColdFusion developers on page 508 Database connections for ASP NET developers on page 518 Database connections for ASP developers on page 510 Database connections for JSP developers on page 5...

Page 555: ... names in the code for example rsPressReleases Recordset names can only contain letters numbers and the underscore character _ You cannot use special characters or spaces 2 Select a connection from the Connection pop up menu If no connection appears in the list click Define to create one 3 In the Table pop up menu select the database table that will provide data to the recordset The pop up menu di...

Page 556: ... function 3 Select a data source from the Data Source pop up menu If no data source appears in the pop up menu you must create a ColdFusion data source 4 In the Username and Password boxes enter the user name and password for the ColdFusion application server if required Data sources in ColdFusion may require a user name and password to access them If you do not have the user name and password to ...

Page 557: ...ist 5 To include only some of the table s records complete the Filter section as follows From the first pop up menu select a column in the database table to compare against a test value you define From the second pop up menu select a conditional expression to compare the selected value in each record against the test value From the third pop up menu select Entered Value In the box enter the test v...

Page 558: ...ndings panel See also Create SQL queries using the Database Items tree on page 555 Database connections for ASP developers on page 510 Database connections for PHP developers on page 517 Defining sources of dynamic content on page 547 Add a stored procedure ColdFusion on page 654 Options for the advanced Recordset dialog box PHP ASP JSP Define a recordset as a source of dynamic content by writing ...

Page 559: ...If the SQL statement contains variables make sure the Default Value column of the Variables box contains valid test values before clicking Test If successful a table appears displaying the data in your recordset Each row contains a record and each column represents a field in that record Click OK to clear the recordset 6 If satisfied with your work click OK Options for the advanced Recordset dialo...

Page 560: ...t Ensure the SQL text area is blank Expand the branches of the tree until you find the database object you need for example a column in a table Select the database object and click one of the buttons on the right side of the tree For example if you select a table column the available buttons are Select Where and Order By Click one of the buttons to add the associated clause to your SQL statement I...

Page 561: ... buttons on the right side of the tree For example if you select a table column the available buttons are SELECT WHERE and ORDER BY Click one of the buttons to add the associated clause to your SQL statement You can also use a predefined SQL statement in a stored procedure by selecting the stored procedure from the Database Items tree and clicking the Procedure button Dreamweaver automatically fil...

Page 562: ...that the parameter should use if no run time value is returned 1 Enter a parameter name in the Name box 2 Enter a default value for the parameter in the Default Parameter box 3 Enter a run time value for a parameter in the Run time Value box and click OK Create SQL queries using the Database Items tree Instead of manually typing SQL statements into the SQL box you can use the Database Item s point...

Page 563: ...ob by clicking the Plus button in the Variables area and entering the following values in the Name Default Value and Run Time Value columns varJob CLERK Request job 5 Click OK to add the recordset to the Bindings panel Define 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 After you define the URL va...

Page 564: ... value in your page 1 In the Document window open the page that will use the variable 2 Select Windows Bindings to display the Bindings panel 3 In the Bindings panel click the Plus button and select one of the following from the pop up menu 4 In the Form Variable dialog box enter the name of the form variable and click OK The form parameter name is normally the name of the HTML form field or objec...

Page 565: ...rom the pop up menu 4 Enter the name of the variable you defined in the application s source code and click OK See also Collecting data submitted by users on page 532 Accessing data stored in session variables on page 535 How session variables work on page 535 Collecting storing and retrieving information in session variables on page 535 Define application variables for ASP and ColdFusion In ASP a...

Page 566: ...click OK 6 Initialize the variable Dreamweaver does not initialize the variable for you so that you can initialize it how and where you want You can initialize the variable in the page code before the cfquery tag in an include file or in some other file as a session or application variable Define server variables You define server variables as sources of dynamic content for use within a web applic...

Page 567: ...m information included in the body of the HTTP request by an HTML form using the POST method The ServerVariables collection Retrieves the values of predefined environment variables The collection has a long list of variables including CONTENT_LENGTH the length of content submitted in the HTTP request which you can use to see if a form is empty and HTTP_USER_AGENT provides information about the use...

Page 568: ...e is the name of the form field or object used to obtain its value 3 In the Request Variable dialog box enter the name of the variable and click OK Define a ColdFusion client variable Define a ColdFusion client variable as a source of dynamic content for the page The newly defined ColdFusion client variables appear in the Bindings panel In the Client Variable dialog box enter the name of the varia...

Page 569: ...e For HTTP this is Get Head Post and so on PATH_INFO The extra path information as given by the client Scripts can be accessed by their virtual pathname followed by extra information at the end of this path The extra information is sent as PATH_INFO PATH_TRANSLATED The server provides a translated version of PATH_INFO which takes the path and does any virtual to physical mapping to it SCRIPT_NAME ...

Page 570: ... source of content for the page Change a content source in the Bindings panel 1 In the Bindings panel Window Bindings double click the name of the content source you want to edit 2 Make your changes in the dialog box that appears 3 If satisfied with your work click OK Delete a content source from the Bindings panel 1 In the Bindings panel Window Bindings select the content source from the list 2 C...

Page 571: ...e dynamic you can use the Bindings panel the Property inspector or the Image command in the Insert menu By default an HTML page can display only one record at a time To display the other records in the recordset you can add a link to move through the records one at a time or you can create a repeating region to display more than one record on a single page See also Defining sources of dynamic cont...

Page 572: ...of the placeholders for dynamic text distorts the page s layout in the Document window You can solve the problem by using empty curly braces as placeholders as described in the next topic Display placeholders for dynamic text 1 Select Edit Preferences Invisible Elements Windows or Dreamweaver Preferences Invisible Elements Macintosh 2 In the Show Dynamic Text As pop up menu select and click OK Mak...

Page 573: ... Bind To box select an HTML attribute from the pop up menu 6 Click Bind The next time the page runs on the application server the value of the data source will be assigned to the HTML attribute Make HTML attributes dynamic with the Property inspector 1 In Design view select an HTML object and open the Property inspector Window Properties For example to select an HTML table click inside the table a...

Page 574: ...operties 2 Click the Parameters button 3 If your parameter does not appear in the list click the Plus button and enter a parameter name in the Parameter column 4 Click the parameter s Value column and then click the lightning bolt icon to specify a dynamic value A list of data sources appears 5 Select a data source from the list and click OK The data source should hold data that s appropriate for ...

Page 575: ... dynamic content Add edit or delete server behaviors To achieve this effect Dreamweaver runs the dynamic page on your server before displaying it in the Live Data window Whenever you switch to the Live Data window a temporary copy of the open document is sent to your application server for processing The resulting page is returned and displayed in the Live Data window and the temporary copy on the...

Page 576: ...outside of the server tags For more information see Administering Adobe Contribute 1 Select Site Administer Contribute Site 2 If certain required options for Contribute compatibility aren t enabled a dialog box appears asking if you want to enable those options Click OK to enable those options and Contribute compatibility 3 If prompted enter the administrator password and then click OK The Adminis...

Page 577: ...displays a number using two decimal places If the number has more than two decimal places the data format rounds the number to the closest decimal If the number has no decimal places the data format adds a decimal point and two zeros Repeating Region server behaviors let you display multiple items returned from a database query and let you specify the number of records to display per page Recordse...

Page 578: ...ject or you can add them separately by using the design tools and the Server Behaviors panel Create a recordset navigation bar You can create a recordset navigation bar in a single operation using the Recordset Navigation Bar server behavior The server object adds the following building blocks to the page An HTML table with either text or image links A set of Move To server behaviors A set of Show...

Page 579: ...l server behaviors to the navigation links Create and assign server behaviors to a navigation link 1 In Design view select the text string or image on the page you want to use as a record navigation link 2 Open the Server Behaviors panel Window Server Behaviors and click the Plus button 3 Select Recordset Paging from the pop up menu then select a server behavior appropriate to that link from the l...

Page 580: ...the user that no records were returned This is especially useful when creating search pages that rely on user input search terms to run queries against Similarly you can display an error message if there is a problem connecting to a database or if a user s user name and password do not match those recognized by the server The Show Region server behaviors are Show If Recordset Is Empty Show If Reco...

Page 581: ...up menu 5 Select the number of records to display per page and click OK In the Document window a thin tabbed gray outline appears around the repeating region In the Live Data window View Live Data the gray outline disappears and the selection expands to display the number of records you specified See also About database records on page 570 Edit dynamic content on page 568 Modify repeating regions ...

Page 582: ...e server object is not available when using ASP NET document types 1 Do one of the following to insert a dynamic table Select Insert Data Objects Dynamic Data Dynamic Table to display the Dynamic Table dialog box From the Data category of the Insert bar click the Dynamic Data button and select the Dynamic Table icon from the pop up menu 2 Select the recordset from the Recordset pop up menu 3 Selec...

Page 583: ...set navigation bar See also About recordsets on page 543 Create a recordset navigation bar on page 571 Display multiple recordset results on page 574 Create a dynamic table on page 575 Create simple record counters 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 c...

Page 584: ...ext 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 panel Window Server Behaviors 4 Click the Plus button in the upper left corner and click Display Record Count Within this submenu select Display Total Records The Display Total Records behavior is inserted into the page and a placeholder is inser...

Page 585: ...c content 1 Select the dynamic content in either the Live Data window or its placeholder in the Document window 2 Select Window Bindings to display the Bindings panel 3 Click the down arrow button in the Format column If the down arrow is not visible expand the panel 4 From the Format pop up menu select the data format category you want Ensure that the data format is appropriate for the type of da...

Page 586: ...he new format in the Name column and click OK Note If you are a ColdFusion PHP or ASP NET extension developer you can download formats that other developer created and create server formats and post them to the Dreamweaver Exchange For more information on the Server Format API see Extending Dreamweaver Help Extending Dreamweaver Server Formats Viewing live data View live data in Design view Dreamw...

Page 587: ...porary copy of the open document is sent to the folder for processing The resulting page is returned and displayed in Design view and the temporary copy on the server is deleted If the page displays an error message when you enable Live Data make sure the URL prefix in the Site Definition dialog box is correct Copy related files if any to the folder Provide the page with any parameters a user woul...

Page 588: ... pages Dreamweaver does not automatically copy dependent files to the folder when you enable Live Data in Design view Note Live Data supports code in server side includes and application files such as global asa ASP and application cfm ColdFusion Make sure to upload these files to the server before enabling Live Data 1 Open the Site panel Window Site Files and click the Expand button the last icon...

Page 589: ... content Select the Auto Refresh option in the toolbar to refresh the page whenever you make a change affecting dynamic content If you have a slow database connection you might want to leave this option off when working in the Live Data window Troubleshooting Live Data view Many problems with Live Data view can be traced back to missing or incorrect values in the Site Definition dialog box Site Ed...

Page 590: ...age Examples of web services and the information and functionality they provide include the following User authentication and authorization Credit card validation Financial markets services that return stock prices associated with specified ticker symbols Purchasing services that allow users to order products online Information services that provide news or other information types based on a selec...

Page 591: ...ovides the functionality you require 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 you must create a proxy The proxy provides the web page with the necessary information to communicate with the web service and access the methods the web service provide...

Page 592: ...unication between the web page that requests 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 See also Add a web service proxy using the WSDL description on page 587 Web service references To learn more about web services and the underlying technologies ...

Page 593: ...select Web Services from the pop up menu in the upper left corner of the panel then click the Plus button and select Add Using WSDL 3 In the Add Using WSDL dialog box select Edit Proxy Generator List from the Proxy Generator pop up menu 4 Click New select the proxy generator from the pop up menu and click Done To delete a proxy generator from the list select it in the list and click Remove To modi...

Page 594: ...e a directory of web services select one of the listed web service registries or copy and paste the URL of the web service into the WSDL edit box Note You can edit the list of web service registries to include additional web service directories or specific web service providers 4 Select a proxy generator that supports your web services server model from the Proxy Generator pop up menu 5 Ensure tha...

Page 595: ...rvice The web service provides descriptions of the data types and parameter values In the following ColdFusion example the web service is enclosed by the cfinvoke tags When developing a web service in ColdFusion use cfinvoke to instantiate the web service and invoke its methods html head title Web Service title meta http equiv Content Type content text html charset iso 8859 1 head cfinvoke webserv...

Page 596: ...ment framework 1 Select Window Components to open the Components panel 2 In the Components panel select Web Services from the pop up menu in the upper left corner of the panel then click the Plus button and select Add Using Proxy Classes 3 Enter the location of the proxy class reader in the box or browse for the file 4 Select a proxy reader from the pop up menu and click OK There are two default p...

Page 597: ...at a value be specified for a parameter create a dialog box that prompts the web developer applying the behavior to supply an appropriate value Test the server behavior before making it available to others See also Request a parameter for the server behavior on page 597 Testing server behaviors on page 600 Use the Server Behavior Builder Use the Server Behavior Builder to add the code block or blo...

Page 598: ...pts param eters from the person applying the behavior See the link below 14 After you perform the required steps to create the server behavior click OK The Server Behaviors panel lists the server behavior 15 Test the server behavior and ensure that it functions properly See also Repeating code blocks with the loop directive on page 595 Coding guidelines on page 599 Request a parameter for the serv...

Page 599: ...ock is the selected one Creating code blocks The code blocks you create in the Server Behavior Builder are encapsulated in a server behavior that appears in the Server Behaviors panel The code can be any valid run time code for the specified server model For example if you choose ColdFusion as the document type for your custom server behavior the code you write must be valid ColdFusion code that r...

Page 600: ...or callableName then the conditional code block is replaced with the following statements callableName execute rsName callableName getResultSet Otherwise the code block is replaced with the following statement rsName Statement rsName executeQuery See also Repeating code blocks with the loop directive on page 595 Positioning a code block When you create code blocks using the Server Behavior Builder...

Page 601: ...haviors on page 600 Position a code block general instructions 1 Using the Server Behavior Builder write a code block 2 In the Server Behavior Builder dialog box select a position in which to insert the code block from the Insert Code pop up menu 3 In the Server Behavior Builder dialog box select a position relative to that which you selected in the Insert Code pop up menu 4 If you complete the au...

Page 602: ...block a number of times use the following syntax loop param1 param2 code block endloop When creating server behaviors you can use looping constructs to repeat a code block a specified number of times loop param1 param2 param3 param_n code block endloop The loop directive accepts a comma separated list of parameter arrays as arguments In this case parameter array arguments allow a user to supply mu...

Page 603: ...procedure datasource MM_ conn _DSN username MM_ conn _USERNAME password MM_ conn _PASSWORD loop paramName value type CFPROCPARAM type IN dbvarname paramName value value cfsqltype type endloop CFSTOREDPROC Note New lines after each are ignored If the user entered the following parameter values in the Server Behavior Builder dialog box procedure proc1 conn connection1 paramName CategoryId Year ISBN ...

Page 604: ...e inserted before the server behavior s code is inserted into the page You create the dialog box by defining the designer supplied parameters in the code Then you generate a dialog box for the server behavior which prompts the page designer for a parameter value Note A parameter is added to your code block without your intervention if you specify that your code should be inserted relative to a spe...

Page 605: ...r custom server behavior from the pop up menu Edit the dialog box you created for the server behavior 1 In the Server Behaviors panel Window Server Behaviors click the Plus button and select Edit Server Behaviors from the pop up menu 2 Select your server behavior from the list and click Open 3 Click Next A dialog box appears listing all the designer supplied parameters that you defined in your cod...

Page 606: ...r s code should be compact and robust Web application developers are very sensitive to the code added to their pages Follow generally accepted coding practices for the document type s language ColdFusion ASP NET JavaScript VBScript PHP Visual Basic or Java When writing comments consider the different technical audiences that might need to understand the code such as web and interaction designers o...

Page 607: ...his book After successfully applying your server behavior to the page verify the following Check the Server Behaviors panel to make sure the name of the server behavior appears in the list of behaviors added to the page If applicable verify that server side script icons show up on the page The generic server side script icons are gold shields To see the icons enable Invisible Elements View Visual ...

Page 608: ...e text can be displayed as a single line multiple lines and as a password field where entered text is replaced by asterisks or bullets to hide the text from onlookers 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 wa...

Page 609: ...ut must display many items or to control the values returned to the server Unlike text fields where users can type anything they want including invalid data you set the exact values returned by a menu Note A pop up menu on an HTML form is not the same as a graphical pop up menu For information on creating editing and showing and hiding a graphical pop up menu see the link at the end of this sectio...

Page 610: ... be bookmarked because all the values needed to regenerate the page are contained in the URL displayed in the browser s Address box In contrast dynamic pages generated by parameters passed by the POST method cannot be bookmarked If you collect confidential user names and passwords credit card numbers or other confidential information the POST method may appear more secure than the GET method Howev...

Page 611: ...e structure for form objects and field labels When using tables in forms make sure all the table tags are included between the form tags For a tutorial on creating forms see www adobe com go vid0160 For a tutorial on styling forms with CSS see www adobe com go vid0161 See also Building ASP NET forms on page 686 Building ColdFusion MX 7 forms on page 674 About dynamic form objects on page 608 Attac...

Page 612: ...o their original values respectively Src Specifies the image you want to use for the button Alt Lets you enter descriptive text in case the image fails to load in the browser Align Sets the align attribute of the object Edit Image starts your default image editor and opens the image file for editing Class Lets you apply CSS rules to the object 5 To attach a JavaScript behavior to the button select...

Page 613: ...so on If you leave the Max Chars box blank users can enter any amount of text If the text exceeds the character width of the field the text will scroll If a user exceeds the maximum number of characters the form produces an alert sound Num Lines Available when the Multiline option is selected Sets the height of the field for multiple line text fields Wrap Available when the Multiline option is sel...

Page 614: ...c Lets the server dynamically determine the initial state of the check box For example you can use check boxes to visually present the Yes No information stored in a database record At design time you don t know that information At run time the server reads the database record and selects the check box if the value is Yes Class Applies Cascading Style Sheets CSS rules to the object Single radio bu...

Page 615: ...e is passed to the server when the form is submitted Class Applies CSS rules to the object About dynamic form objects A dynamic form object is a form object whose initial state is determined by the server when the page is requested from the server not by the form designer at design time For example when a user requests a PHP page that contains a form with a menu a PHP script in the page automatica...

Page 616: ...a browser or when a record is displayed in the form enter a value equal to the menu item s value in the Select Value Equal To box You can enter a static value or you can specify a dynamic one by clicking the lightning bolt icon beside the box and selecting a dynamic value from the list of data sources In either case the value you specify should match one of the menu item values Make existing HTML ...

Page 617: ...r the check box to appear selected For example for the check box to appear selected when a specific field in a record has a value of Yes enter Yes in the Equal To box Note This value is also returned to the server if the user clicks the form s Submit button Dynamically preselect an HTML radio button Dynamically preselect an HTML radio button when a record is displayed in the HTML form in a browser...

Page 618: ...e contents of specified form elements For more information consult the Spry topics listed below You can also build ColdFusion and ASP NET forms in Dreamweaver that validate the contents of specified fields For ASP NET forms you can insert ASP NET validation controls in Code view For more information consult the ColdFusion and ASP NET chapter listed below 1 Create an HTML form that includes at leas...

Page 619: ...aScript function to run when the user clicks the button and click OK For example you can enter the name of a function that doesn t exist yet such as processMyForm 4 If your JavaScript function doesn t exist in the head section of the document yet add it now For example you could define the following JavaScript function in the head section of the document to display a message when the user clicks t...

Page 620: ...ption for accessibility however the functionality may vary depending on the browser No Label Tag Does not use a label tag as follows input type radio name radiobutton value radiobutton RadioButton3 Access Key Uses a keyboard equivalent one letter and the Alt key Windows or the Control key Macintosh to select the form object in the browser For example if you enter B as the Access Key users with a M...

Page 621: ...nd restrict access to certain users Building master and detail pages all servers About master and detail pages Master and detail pages are sets of pages used to organize and display recordset data These pages provide a visitor to your site with both an overview and a detailed view The master page lists all of the records and contains links to detail pages that display additional information about ...

Page 622: ...start ensure that you define a database connection for your site 1 To create a blank page select File New Blank Page select a page type and click Create This page becomes the master page 2 Define a recordset In the Bindings panel Windows Bindings click the Plus button select Recordset ColdFusion PHP or DataSet ASP NET and choose options If you want to write your own SQL statement click Advanced En...

Page 623: ...on PHP Insert a dynamic table to display the records Place the insertion point where you want the dynamic table to appear on the page Select Insert Data Objects Dynamic Data Dynamic Table set the options and click OK If you don t want to show record IDs to users you can delete the column from the dynamic table Click anywhere on the page to move the focus to the page Move the cursor near the top of...

Page 624: ...ing the master page and adding the recordset you create links that open the detail page You then modify the links to pass the IDs of the records the user selects The detail page uses this ID to find the requested record in the database and display it Note You create links to update pages using the same process The results page is similar to a master page and the update page is similar to a detail ...

Page 625: ...ues of the recordset s CODE field are inserted in the corresponding rows in the dynamic table For example if the Canberra Australia rental location has the code CBR the following URL is used in the Canberra row in the dynamic table locationDetail cfm recordID CBR 6 PHP In the Link field in the Property inspector add the following string at the end of the URL recordID php echo row_recordsetName fie...

Page 626: ...d s ID number 43 Open a detail page and pass a record ID ASP NET 1 Double click your DataGrid in the Server Behaviors panel Window Server Behaviors 2 In the Columns box select the title of the column to apply links to 3 Click the Change Column Type button and select Hyperlink from the pop up menu The Hyperlink Column dialog box appears 4 In the Hyperlink Text area specify the text to be displayed ...

Page 627: ...etail page In order to display the record requested by the master page you must define a recordset to hold a single record and bind the recordset columns to the detail page 1 Switch to the detail page If you don t have a detail page yet create a blank page File New 2 In the Bindings panel Window Bindings click the Plus button and select Recordset Query or DataSet Query from the pop up menu The sim...

Page 628: ...formation about the selected record See also Set up a testing server on page 48 Create a link to open a related page ASP JSP You can create a link that opens a related page and that passes existing parameters to that page The server behavior is only available when using the ASP or JSP server models Before adding a Go To Related Page server behavior to a page make sure the page receives form or URL...

Page 629: ...rs 5 In the Matches URL Parameter box enter the name of the URL parameter passed by the other page For example if the URL the other page used to open the detail page is id 43 enterid in the Matches URL Parameter box 6 Click OK The next time the page is requested by a browser the server behavior will read the record ID in the URL parameter passed by the other page and move to the specified record i...

Page 630: ... you created or enter a name and let the data object create one for you 12 In the Detail Page Fields area select the columns to be displayed on the detail page By default all the columns in the master page s recordset are selected If the recordset contains a unique key column such as recordID select it and click the Minus button so that it is not displayed on the detail page 13 To change the order...

Page 631: ...ing SQL queries and variables Simply design your pages and complete a few dialog boxes If you have more than one search parameter you need to write a SQL statement and define multiple variables for it Dreamweaver inserts the SQL query in your page When the page runs on the server each record in the database table is checked If the specified field in a record meets your SQL query conditions the rec...

Page 632: ... image shows 6 In the Action box in the form s Property inspector enter the filename of the results page that will conduct the database search 7 In the Method pop up menu select one of the following methods to determine how the form sends data to the server GET sends the form data by appending it to the URL as a query string Because URLs are limited to 8192 characters don t use the GET method with...

Page 633: ... be to a database containing data you want the user to search 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 Recordset dialog box and define a SQL query 6 To include only some of the table s columns in the recordset click ...

Page 634: ... the value that would otherwise have been returned from the search page Click OK to close the test recordset 6 If you re satisfied with the recordset click OK A server side script is inserted on your page that checks each record in the database table when it runs on the server If the specified field in a record meets the filtering condition the record is included in a recordset The script builds a...

Page 635: ...equest getParameter LastName and request getParameter Department 6 Optional 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 7 If you re satisfied with the recordset click OK The SQL query is inserted in your page The next step ...

Page 636: ...is created on the page You may have to enable Invisible Elements View Visual Aids Invisible Elements to see the form s boundaries which are represented by thin red lines In the form s Property inspector you should select POST as the form s Method attribute You don t need to specify an Action attribute for the form The ASP NET page posts back to itself and the search results are displayed on the sa...

Page 637: ...y the search page For example if the value sent by the search page is a city name select the column in your table that contains city names 2 From the pop up menu beside the first menu select the equal sign it should be the default This choice states that the user wants only those records in which the selected table column is exactly the same as the one specified on the search page You can use a le...

Page 638: ...a and entering the parameter s name type and value The parameters must be listed in the same order they appear in the SQL statement In the Name box enter any valid parameter name The name cannot contain any spaces or special characters In the Type pop up menu select a data type For example if the parameter will hold text select WChar In the Value box enter the server variable that will contain the...

Page 639: ...e following example shows a DataGrid dialog box that creates a DataGrid with three columns and ten rows and links to previous and next pages of results The DataGrid appears the first time the search page loads even if the user hasn t conducted a search yet You can hide the DataGrid when the page loads the first time See also Search with only one search parameter ASP NET on page 630 Search with mul...

Page 640: ...s Your application can contain a page that lets users insert new records in a database For a tutorial on creating a record insert page see www adobe com go learn_dw_webapp An insert page consists of two building blocks An HTML form that lets users enter data An Insert Record server behavior that updates the database When a user clicks Submit on a form the server behavior inserts records in a datab...

Page 641: ...d entering a new value in the Label box Add a server behavior to insert records in a database table ColdFusion 1 In the Server Behaviors panel Window Server Behaviors click the Plus button and select Insert Record from the pop up menu 2 Select a form from the Submit Values From pop up menu 3 In the Data Source pop up menu select a connection to the database 4 Enter your user name and password 5 In...

Page 642: ...l Window Server Behaviors click the Plus button and select Insert Record from the pop up menu 2 Select a form from the Submit Values From pop up menu 3 In the Connection pop up menu select a connection to the database Click the Define button if you need to define a connection 4 In the Insert Into Table pop up menu select the database table to insert the record in 5 Specify a database column to ins...

Page 643: ... one operation 1 Open the page in Design view and select Insert Data Objects Insert Record Record Insertion Form Wizard 2 In the Connection pop up menu select a connection to the database Click Define if you need to define a connection 3 In the Insert Into Table pop up menu select the database table into which the record should be inserted 4 If you use ColdFusion enter a user name and password 5 I...

Page 644: ...g box to set the properties For options select the Checked or Unchecked option If you use ASP NET you can choose to use web form control 9 Click OK Dreamweaver adds both an HTML form and an Insert Record server behavior to your page The form objects are laid out in a basic table which you can customize using the Dreamweaver page design tools Make sure all the form objects remain within the form s ...

Page 645: ...e advanced dialog box has a text area to enter SQL statements the simple one does not 3 Name the recordset and specify where the data you want to update is located using the Connection and Table pop up menus 4 Click Selected and select a key column usually the record ID column and the columns that contain the data to be updated 5 Configure the Filter area so that the value of your key column equal...

Page 646: ...tton The Update Record server behavior sets these attributes for you 5 Add a form object such as a text field Insert Form Text Field for each column you want to update in the database table The form objects are for data entry Text fields are common for this purpose but you can also use menus options and radio buttons Each form object should have a corresponding column in the recordset you defined ...

Page 647: ... accepts text values 8 In the After Updating or On Success Go To box enter the page to open after the record updates in the table or click the Browse button to browse to the file 9 ASP NET In the On Failure Go To box enter the location of a page to display if the server behavior fails or click the Browse button to browse to the location 10 ASP NET Select the Display Debugging Information On Failur...

Page 648: ...es but sometimes it accepts text values 6 In the After Updating Go To box On Success Go To box for ASP NET enter the page to open after the record updates in the table 7 ASP NET If the update fails choose to display a web page or debugging information about the failure Use the debugging option during development and use the On Failure Go To option when your site is live When you select the debuggi...

Page 649: ...ord server behavior to your page The form objects are laid out in a basic table which you can customize using the Dreamweaver page design tools Make sure all the form objects remain within the form s boundaries To edit the server behavior open the Server Behaviors panel Window Server Behaviors and double click the Update Record behavior See also Retrieve the record to update on page 638 Insert or ...

Page 650: ...624 Building a database search page ASP NET on page 629 Create links to a delete page ColdFusion PHP ASP NET After creating the search and results pages you must create links on the results page to open the delete page You then modify the links to pass the IDs of the records the user wants to delete The delete page uses this ID to find and display the record See also URL parameters on page 533 Ope...

Page 651: ...urns a record ID from the recordset A different ID is generated for each row in the dynamic table In the ColdFusion expression replace recordsetName with the name of your recordset and replace fieldName with the name of the field in your recordset that uniquely identifies each record In most cases the field will consist of a record ID number In the following example the field consists of unique lo...

Page 652: ...links by clicking the Plus button and selecting Hyperlink 3 In the Title box enter a column title such as Delete The title appears in the column heading 4 Select the Static Text option and enter the text of the link such as delete record Each row in the DataGrid displays the same text in the hyperlink column 5 In the Linked Page area build the URL to apply to the text in the hyperlink column The U...

Page 653: ...this page consists of creating an HTML form retrieving the record to display in the form displaying the record in the form and adding the logic to delete the record from the database Retrieving and displaying the record consists of defining a recordset to hold a single record the record the user wants to delete and binding the recordset columns to the form Note The delete page can contain only one...

Page 654: ...in the list Make sure to include the record ID field even if you won t be displaying it 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 the URL parameter passed by the page with the Delete links ...

Page 655: ...u must bind the record ID column to the hidden form field 2 Make sure Invisible Elements are enabled View Visual Aids Invisible Elements and then click the yellow shield icon that represents the hidden form field The hidden form field is selected 3 In the Property inspector click the lightning bolt icon beside the Value box 4 In the Dynamic Data dialog box select the record ID column in the record...

Page 656: ...ase 5 In the Table pop up menu select the database table that contains the records that will be deleted 6 In the Primary Key Column pop up menu select the table column that contains record IDs The Delete Record server behavior searches this column for a match The column should contain the same record ID data as the recordset column you bound to the hidden form field on the page If the record ID is...

Page 657: ... 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 button 1 In the Server Behaviors panel Window Server Behaviors click the Plus button and select Delete Record from the pop up menu 2 In the Connection pop up menu select a connection to the database Click the Define button if you need to ...

Page 658: ... having a single compiled version of the object can make database operations more efficient Note Not all database providers support prepared commands If your database does not support it it might return an error when you set this property to true It might even ignore the request to prepare the command and set the Prepared property to false A command object is created by scripts on an ASP page but ...

Page 659: ...e lists the sizes for your fields For example it might say ADDRESS WChar 50 In this example 50 is the size You can also find the size in your database appli cation Note Numeric Boolean and date time data types always use 1 as the size To determine the Type value see the following table For more information on the type and size of SQL variables see www adobe com go 4e6b330a 6 Close the dialog box T...

Page 660: ...ory A prepared statement object is created by a Java scriptlet on a JSP page However Dreamweaver lets you create prepared statements without writing a single line of Java code If you re interested in the code the following scriptlet creates a prepared statement String myquery SELECT FROM EMPLOYEES WHERE DEPARTMENT PreparedStatement mystatement connection prepareStatement myquery The first line sto...

Page 661: ...bjects or JSP prepared statements to build the pages A stored procedure is a reusable database item that performs some operation on the database A stored procedure contains SQL code that can among other things insert update or delete records Stored procedures can also alter the structure of the database itself For example you can use a stored procedure to add a table column or even delete a table ...

Page 662: ...then enter a name for the recordset if the stored procedure returns a recordset click the Test button to see the recordset that the stored procedure returns Dreamweaver runs the stored procedure and displays the recordset if any Note If the stored procedure returns a recordset and takes parameters you must enter a value in the Default Value column in the Variables box to test the stored procedure ...

Page 663: ...ues output values or both Enter a test value Click the Build button to build the value In the Build Value dialog box select a source from the pop up menu enter a default value and click OK Click OK to close the Edit Stored Procedure Variable dialog box and accept your changes 9 In the On Success Go To box back in the Stored Procedure dialog box enter the location of a page to display after the sto...

Page 664: ...f the object every time the stored procedure is run If you know the command will be executed more than a few times having a single compiled version of the object can improve the efficiency of database operations However if the command will only be executed one or two times using one might actually slow down your web application because the system has to pause to compile the command To change the s...

Page 665: ... PHP About registration pages Your web application can contain a page that requires users to register the first time they visit your site A registration page is made up of the following building blocks A database table to store login information about the users An HTML form that lets users select a user name and password You can also use the form to obtain other personal information from users An ...

Page 666: ...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 the form to tell it where and how to send the record data when the user clicks the Submit button The Insert Record server behavior sets these attributes for you 4 Add text fields Insert Form Text Field to let the user enter ...

Page 667: ...ton and select User Authentication Check New Username from the pop up menu 2 In the Username Field pop up menu select the form text field that your visitors use to enter a user name 3 In the If Already Exists Go To box specify a page to open if a matching user name is found in the database table and click OK The opened page should alert the user that the user name is already taken and let the user...

Page 668: ...ton The Log In User server behavior sets these attributes for you 4 Add a user name and a password text field Insert Form Text Field to the form Add labels either as text or images beside each text field and line up the text fields by placing them inside an HTML table and setting the table s border attribute to 0 5 Add a Submit button to the form Insert Form Button You can change the label of the ...

Page 669: ...ization level too and click OK A server behavior is added to the login page that ensures the user name and password entered by a visitor are valid See also Redirect unauthorized users ColdFusion ASP JSP PHP on page 663 Building a page only authorized users can access ColdFusion ASP JSP PHP on page 662 Building a page only authorized users can access ColdFusion ASP JSP PHP About protected pages You...

Page 670: ...L pages It does not protect other site resources such as image files and audio files If you want to give many pages on your site the same access rights you can copy and paste access rights from one page to another Redirect unauthorized users to another page 1 Open the page you want to protect 2 In the Server Behaviors panel Window Server Behaviors click the Plus button and select User Authenticati...

Page 671: ...inistrator 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 the exceptions for example changing Guest to Administrator The user now has access to all administrator pages 2 Make sure each user in the database has a single access privile...

Page 672: ...following authentication types Simple Authentication Secures your application with a single user name and password for all users Windows NT Authentication Secures your application using NT user names and passwords LDAP Authentication Secures your application with user names and passwords stored on an LDAP server c Specify whether you want users to log in using a ColdFusion login page or a pop up m...

Page 673: ...page but that would mix HTML presen tation code and CFML logic code and generally make the code difficult to maintain and reuse You decide to create a CFC called Pricing that has among other things a function called ShippingCharge The function takes a price as an argument and returns a shipping charge For example if the value of the argument is 32 80 the function returns 6 In both the shopping car...

Page 674: ...loading the files ensures that Dreamweaver features such as Live Data view and Preview In Browser work properly Dreamweaver writes a CFC file and saves it in the folder you specified The new component also appears in the Components panel after clicking Refresh 5 To remove a component you must delete the CFC file manually from the server See also Build web pages that use CFCs on page 669 About Cold...

Page 675: ... does not work 5 Click the Plus button beside the package name to view the components stored in the package To list the functions of a component click the Plus button beside the component name To see the arguments a function takes as well as the arguments type and whether they are required or optional open the function s branch in the tree view Functions that take no arguments have no Plus button ...

Page 676: ...nd double click the component name in the tree view The component s file opens in Code view 4 To edit a specific function argument or property double click the item in the tree view 5 Make your changes by hand in Code view 6 Save the file File Save 7 To see any new function in the Components panel refresh the view by clicking the Refresh button on the panel toolbar See also View CFCs in Dreamweave...

Page 677: ...n button enter a name for the function in the dialog box that appears and then click OK The name must contain only alphanumeric characters and underscores _ 5 To define a recordset for the function complete the Recordset dialog box options The new function is inserted into the CFC that defines the recordset See also Create or delete a CFC in Dreamweaver on page 666 Use a CFC recordset as a source ...

Page 678: ...hanumeric characters and underscores _ b In the Component Directory box enter the location for your CFC or browse to locate the folder Note The folder must be the relative path to the site root folder 5 From the Function pop up menu select the function that contains the recordset definition The Function pop up menu contains only the functions defined in the currently selected component If no funct...

Page 679: ...that contains the bean class must reside in the following locations On the system running Dreamweaver a copy of the bean class must reside in the Dreamweaver Configu ration classes folder or in the system s class path Dreamweaver uses this copy of the class at design time On the system running the JSP application server the bean class must reside in the application server s class path Your applica...

Page 680: ...l 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 3 In the JavaBean Collection dialog box select the collection s class from the Collection Class pop up menu The class is expressed in the following format packagename classname To list the classes in a ZIP or JAR file click...

Page 681: ...ccess to a computer running ColdFusion MX 7 or later Enable the ColdFusion enhancements Some of these enhancements require that you define a computer running ColdFusion MX 7 or later as a testing server for Dreamweaver For example the Property inspectors for form controls are available only if you specify the correct testing server You define a testing server only once Dreamweaver then automatical...

Page 682: ...ng the form data Note Encoding type does not refer to character encoding This attribute specifies the content type used to submit the form to the server when the value of method is post The default value for this attribute is application x www form urlen coded Format Determines what kind of form is created HTML Generates an HTML form and sends it to the client The cfgrid and cftree child controls ...

Page 683: ...form that is you cannot overlap tags but you can include more than one ColdFusion form in a page If you re creating a Flash based form use Cascading Style Sheets CSS styles to lay out your form ColdFusion ignores any HTML in the form Remember to label the ColdFusion form fields with descriptive text to let users know what they are responding to For example create a Type your name label to request ...

Page 684: ... id attribute of the cfinput tag Value Lets you specify text to be displayed in the field when the page first opens in a browser The information can either be static or dynamic To specify a dynamic value click the lightning bolt icon beside the Value box and select a recordset column in the Dynamic Data dialog box The recordset column supplies a value to the text field when you view the form in a ...

Page 685: ... the lightning bolt icon beside the Value box and select a recordset column in the Dynamic Data dialog box The recordset column supplies a value to the text field when you view the form in a browser Validate Specifies the type of validation for the current field Validate At Specifies when the field is validated onSubmit onBlur or onServer Label Lets you specify a label for the control This propert...

Page 686: ... see the ColdFusion documentation Height Lets you specify the height of the control in pixels This property is ignored by the ColdFusion server at run time Width Lets you specify the width of the control in pixels This property is ignored by the ColdFusion server at run time Display Tag Editor Lets you edit properties not listed in the Property inspector 4 To label the text area click beside it an...

Page 687: ...you specify a value to be returned by the check box if the user checks it Initial State Lets you specify whether the check box is checked when the page first opens in a browser Validate Specifies the type of validation for the check box Validate At Specifies when the check box is validated onSubmit onBlur or onServer Label Lets you specify a label for the check box Pattern Lets you specify a JavaS...

Page 688: ... the height of the control in pixels This property is ignored by the ColdFusion server at run time Width Lets you specify the width of the control in pixels This property is ignored by the ColdFusion server at run time Size Lets you specify the size of the control This property is ignored by the ColdFusion server at run time Required Lets you specify whether the radio button must be checked before...

Page 689: ...dset property Value Column Lets you specify the recordset column to supply the value of each list element Used with the Recordset property Flash Label Lets you specify a label for the select box Flash Height Lets you specify the height of the control in pixels This property is ignored by the ColdFusion server at run time Flash Width Lets you specify the width of the control in pixels This property...

Page 690: ...ify the size of the control This property is ignored by the ColdFusion server at run time Required Lets you specify whether the control must contain data before the form is submitted to the server Display Tag Editor Lets you edit properties not listed in the Property inspector See also Modify ColdFusion form controls on page 685 Validate ColdFusion form data on page 685 Insert ColdFusion file fiel...

Page 691: ...ed by the ColdFusion server at run time Width Lets you specify the width of the control in pixels This property is ignored by the ColdFusion server at run time Size Lets you specify the size of the control Required Lets you specify whether the file field must contain data before the form is submitted to the server Display Tag Editor Lets you edit properties not listed in the Property inspector See...

Page 692: ...els Width Lets you specify the width of the control in pixels Size Lets you specify the size of the control Required Lets you specify whether the date field must contain a value before the form is submitted to the server Display Tag Editor Lets you edit properties not listed in the Property inspector See also Validate ColdFusion form data on page 685 Modify ColdFusion form controls You can visuall...

Page 693: ...ust be inserted inside a form that has an runat server attribute in its tag If your page does not have a form Dreamweaver automatically creates one with a runat server attribute when you insert the first ASP NET form control If your page contains an HTML form Dreamweaver automatically adds the runat server attribute to the existing form tag when you insert the first form control 3 Do one of the fo...

Page 694: ... The ID is required DataSet Specifies the data source you want to use to populate the items of the list control If you don t specify a DataSet you can specify one later or set the list items statically by clicking the List Items button in the Property inspector Get Labels From Specifies the field in the selected DataSet to provide the labels of the list items Get Values From Specifies the field in...

Page 695: ...x controls 1 In Design view select the DropDownList or ListBox object that you want to make dynamic 2 In the Property inspector click the List Items button 3 Select Manually or From Database depending on how you plan to populate the list 4 If you select Manually do the following To add a list item click the Plus button and specify a label and value in the Label and Value boxes To delete a list ite...

Page 696: ... OK For more information on ASP NET CheckBox properties see the documentation on the Microsoft website at http msdn microsoft com library en us cpgenref html cpconcheckboxwebservercontrol asp See also Dynamically preselect an HTML check box on page 610 Defining sources of dynamic content on page 547 Insert an ASP NET CheckBoxList control 1 Select Insert ASP NET Objects asp CheckBoxList 2 In the as...

Page 697: ... in a browser The server compares each item s value to the specified value If the values match the matching item is selected Access Key creates a keyboard shortcut that allows users to quickly navigate to the form control in a browser For example if you enter K the user can navigate to the control by typing Alt K The access key can only consist of a single character Auto Postback indicates whether...

Page 698: ...ns and so on DataList displays items from a data source using templates You can customize the appearance of the control by manipulating the templates that make up its different components About 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 type...

Page 699: ...box with bound columns for all of the fields in the selected DataSet 4 Specify the number of records to be displayed 5 Select the type of page navigation links to implement The Links To Previous And Next Pages item adds Next and Prev links The Numbered Links To Every Page item adds page number links for example 1 2 3 4 5 n 6 Remove the grid columns you don t want by selecting them in the Grid Colu...

Page 700: ...NET formatting expression For more information see Specify and format a data source field in a DataGrid on page 695 Free Form Referred to as a template column in ASP NET the Free Form column lets you create combinations of HTML text and server controls to design a custom layout for a column The controls within a free form column can be data bound Free form columns give you great flexibility in def...

Page 701: ...bject is displayed with a tabbed gray outline surrounding it In the Live Data window View Live Data the gray outline disappears and the object s placeholder is replaced with the specified DataList Modify an ASP NET DataGrid or DataList control You can always modify the DataGrid and DataList controls to suit your page design needs In Design view click the icon on the upper left corner of the DataGr...

Page 702: ... 692 Modify an ASP NET DataGrid or DataList control on page 694 Design a custom layout for a free form DataGrid column When creating or editing a DataGrid use the Free Form option called a template column in ASP NET to create combinations of HTML text and server controls to design a custom layout for a column The controls within a free form column can be data bound Free form columns give you great...

Page 703: ...T documentation for the String Format Method for DataGrids 6 Click OK See also Add an ASP NET DataGrid control to a page on page 692 Modify an ASP NET DataGrid or DataList control on page 694 Allow users to edit in DataGrid rows When creating or editing a DataGrid use the Edit Update Cancel Button column called the Edit Command Column in ASP NET to let users perform in place editing of information...

Page 704: ... the Button Type pop up menu select either link or push buttons At run time this column displays a button labeled Delete Link buttons use text links for the buttons and push buttons use images 4 From the Delete From pop up menu select the database table whose data the user will delete 5 From the Primary Key pop up menu select a primary key associated with the table 6 From the Submit As pop up menu...

Page 705: ...n with a small red X appears in the History panel Saved commands are retained permanently unless you delete them while recorded commands are discarded when you exit from Adobe Dreamweaver CS3 and copied sequences of steps are discarded when you copy something else Use the History panel The History panel Window History shows a list of the steps you ve performed in the active document since you crea...

Page 706: ...e current document In the History panel s context menu select Clear History This command also clears all undo information for the current document after choosing Clear History you can t undo the steps that are cleared Clear History does not undo steps it merely removes the record of those steps from memory Repeat steps Use the History panel to repeat the last step you performed repeat a series of ...

Page 707: ...edure demonstrates this principle in a specific scenario setting the vertical and horizontal spacing of a series of images Apply steps to one other object 1 Select the object 2 Select the relevant steps in the History panel and click Replay Apply steps to multiple objects 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...

Page 708: ... in the History panel is different from the Copy command in the Edit menu You can t use Edit Copy to copy steps although you do use Edit Paste to paste them Be careful when you copy steps that include a Copy or a Paste command Don t use Copy Steps if one of the steps is a Copy command you may not be able to paste such steps the way you want If your steps include a Paste command you can t paste tho...

Page 709: ... 1 Select Commands Edit Command List 2 Select a command to rename enter a new name for it and then click Close Delete a name from the Commands menu 1 Select Commands Edit Command List 2 Select a command 3 Click Delete and then click Close Record and save commands Record a temporary command for short term use or record and save a command to use later Dreamweaver retains only one recorded command at...

Page 710: ...DREAMWEAVER CS3 User Guide 703 3 Enter a name for the command and click OK The command appears in the Commands menu September 4 2007 ...

Page 711: ...ription Dreamweaver also provides sample web pages that were designed for accessibility and an accessibility report that you can run to test your page or site against the Section 508 accessibility guidelines Note For more information about two significant accessibility initiatives see the World Wide Web Consortium Web Accessibility Initiative www w3 org wai and Section 508 of the U S Federal Rehab...

Page 712: ...ialog boxes and panels appear with a white foreground color and black background Code view uses the system and window text color For example if you set the system color to White on Black and then change text colors in Edit Preferences Code Coloring Dreamweaver ignores those color settings and displays the code text with a white foreground color and black background Design view uses the background ...

Page 713: ... through choices for an option 3 If the dialog box has a Category list press Control Tab Windows to shift focus to the category list and then use the arrow keys to move up or down the list 4 Press Control Tab again to shift to the options for a category 5 Press Enter to exit the dialog box Navigate frames If your document contains frames you can use the arrow keys to shift focus to a frame Select ...

Page 714: ...ces 1 Select Edit Preferences Windows or Dreamweaver Preferences Macintosh 2 Select Accessibility from the Category list on the left select an object set any of the following options and click OK Show Attributes When Inserting Select the objects for which you want to activate accessibility dialog boxes For example form objects frames media and images Keep Focus In The Panel Maintains focus on the ...

Page 715: ... set of shortcuts in the Keyboard Shortcut Editor See also Work with code snippets on page 315 Create a keyboard shortcut Create your own shortcut keys edit existing shortcuts or select a predetermined set of shortcuts 1 Select Edit Keyboard Shortcuts Windows or Dreamweaver Keyboard Shortcuts Macintosh 2 Set any of the following options and click OK Current Set Allows you to choose a set of predet...

Page 716: ...s Macintosh 2 From the Commands pop up menu select a command category 3 In the Commands list select a command and then select a shortcut 4 Click the Remove Item button Add a shortcut to a command 1 Select Edit Keyboard Shortcuts Windows or Dreamweaver Keyboard Shortcuts Macintosh 2 From the Commands pop up menu select a command category 3 In the Commands list select a command To add a keyboard sho...

Page 717: ...all users have access to in a multiuser operating system you must be logged in as Admin istrator Windows or root Mac OS X To find the latest extensions for Dreamweaver use the Adobe Exchange website at www adobe com go dreamweaver_exchange Once there you can log in and download extensions many of which are free join discussion groups view user ratings and reviews and install and use the Extension ...

Page 718: ...e Contribute Adobe CSS Advisor 141 Adobe Design Center 9 Adobe Device Central integration 366 Adobe Dreamweaver integration with Contribute 56 integration with Fireworks 367 integration with Flash 382 integration with Photoshop 374 optimizing Dreamweaver content for mobile devices 386 testing mobile content created in 300 using with Device Central 385 Adobe Fireworks Design Notes in 102 integratio...

Page 719: ...without DSN 513 database connections 510 DSN connections 512 editing scripts 336 insert pages building 633 login pages 660 master and detail pages 622 OLE DB connections 510 search pages building 624 stored procedures 657 ASP NET CheckBox controls 689 database connections 518 DataGrid column types 691 DataGrid control 691 692 DataGrid Delete Buttons 691 DataGrid web control 691 DataList control 69...

Page 720: ...rom a selection 137 setting background properties 130 setting preferences 128 setting type properties 130 shorthand properties 123 shorthand rules 128 updating rules in a Contribute site 144 using class rules 136 Case option CSS Rule Definition 130 case changing 309 321 case sensitive links 43 catalogs database 540 categories assets 110 cells See layout cells CFForm 675 CFML ColdFusion Markup Lang...

Page 721: ...rting fields 682 684 installing 502 languages used with 496 login pages 660 665 master and detail pages ColdFusion ASP JSP PHP 622 pages that use components 669 pages debugging 329 password fields 677 radio buttons 681 search pages building 624 select boxes 681 stored procedures 654 text areas 678 update pages 637 validating form data 685 ColdFusion Markup Language CFML 495 debugging 187 329 editi...

Page 722: ... form parameters about 532 JavaBeans 672 JSP variables 561 recordsets about 543 recordsets creating simple 547 session variables 535 558 submitted by users 532 URL parameters about 533 data types mismatched 528 529 database connections ASP 510 ASP NET 518 ColdFusion 508 connection strings 511 for web applications 501 JDBC 521 MySQL 517 OLE DB 510 518 OLE DB parameters 520 PHP 517 Database Items tr...

Page 723: ... resizing 25 searching for text 229 selecting elements 219 status bar 18 tag selector 19 title bar 17 viewing code 25 Window Size pop up menu 19 zooming 223 document relative paths about 280 setting 284 documents applying a template 413 cascading 25 checking links 295 cleaning up Word HTML 76 creating 69 73 creating a blank template 70 creating based on a design file 74 creating based on a templat...

Page 724: ...examples of web applications 491 Excel See Microsoft Excel files Expanded Tables mode 183 Export Table command 179 exporting connection keys for Contribute 60 saving optimized Photoshop images 379 sites 51 table data 178 Expression Object Model templates 391 extensibility third party behaviors 350 Extension Manager 710 extensions creating 590 installing 590 managing 710 external editors HTML 313 i...

Page 725: ... style 132 floating panels combining 31 folders 100 cloaking and uncloaking 100 Favorites for assets 115 searching 229 working with 81 fonts basic settings 130 changing combinations 242 changing styles 241 encoding preferences 38 encodings setting fonts for 38 preferences setting 38 form controls ASP NET 686 formatting code setting preferences for 308 tables and cells 181 184 text with CSS and HTM...

Page 726: ...ltiple in an image map 294 HTML See also code attribute reports 106 attributes making dynamic 566 converting to XHTML 328 embedded programming languages 495 formatting and inserting 226 non breaking space 227 roundtrip editing 302 setting file extension 75 source code searching 229 HTML attrbutes binding to data 566 HTML forms See forms HTML head tags setting links to same target 283 HTML tags cle...

Page 727: ...rts 357 attaching to form objects 612 behaviors 347 executing 350 files 76 inserting code in Design view 335 pop up menu behavior 361 processing form data 612 JavaServer Pages See JSP JDBC connection parameters 521 drivers 522 JPEG images as tracing image 175 uses for 243 JRun 346 506 JRun application server 506 JRun tags 346 JSP JavaServer Pages application servers 506 Callable server behavior 65...

Page 728: ...288 properties 340 Relative to Document option 282 Relative to Site Root option 282 removing 288 to script files 335 setting relative paths 284 site map 288 to style sheets 139 targeting 281 updating 287 links setting color Page Properties 239 list menus 602 list properties 133 228 ListBox control 687 lists creating 228 defining styles 133 Live Data Settings dialog box 582 Live Data window about 5...

Page 729: ... AP elements preferences for 154 162 framesets about 204 tables 190 templates about 405 templates creating 407 templates working with 407 Netscape Enterprise Server 498 Netscape Navigator 4 AP element compatibility 162 compatibility with AP elements 154 Netscape Navigator plug ins playing in Document window 275 properties 274 troubleshooting 275 network activity logging 59 new document default typ...

Page 730: ...hooting 525 write permissions on servers 58 photo albums creating for web 372 photographs 243 Photoshop See Adobe Photoshop PHP database connections 517 insert pages 633 installing PHP 503 login pages 660 Mac OS X 503 master and detail pages 622 search pages 624 server technology 496 troubleshooting Macintosh 505 troubleshooting Windows 504 pixels transparent in background 217 placeholder image 24...

Page 731: ... object 640 recording commands 702 records building a counter 576 displaying more than one 574 inserting 633 navigation links 571 updating 637 Recordset dialog box advanced 550 simple 548 Recordset Navigation Bar live object 571 Recordset Navigation Status live object 576 recordsets See also databases about 543 caching 563 copying and pasting 563 Database Items tree 555 defining without SQL 547 ed...

Page 732: ...4 scrolling background image 131 Search For options 230 search pages building ASP 624 ASP NET 629 ColdFusion 624 JSP 624 PHP 624 searching code 320 for files 229 finding and replacing 229 regular expressions 304 saving search patterns 321 tags and attributes 320 text within files 229 security password protecting a folder 665 setting database permissions for 526 Select Newer Remote command 95 selec...

Page 733: ...ite views in Files panel changing 80 Site window searching for text 229 sites assets reusing 113 broken links fixing 296 cache file 287 cloaking 99 100 creating new Site Definition wizard 42 Design Notes using with 102 editing existing websites 42 50 Files panel display changing 86 files working with 80 folder structure 41 importing and exporting 51 large assets in 114 links changing sitewide 289 ...

Page 734: ...endering toolbar 21 style sheets Design Time using 143 Edit Style Sheet dialog box 140 editing 135 external 139 Style submenu 241 styles See also style sheets alignment options 131 applying removing and renaming custom CSS styles 136 converting inline CSS 138 CSS Cascading Style Sheets 129 defining borders 132 element placement 132 moving CSS rules 137 spacing options 131 submit buttons 601 Sun JD...

Page 735: ...colors 419 checking syntax 418 clicking in locked regions 415 in Code view 393 creating 395 creating for Contribute sites 396 deleting 411 in Design view 392 detaching document from 414 editable regions 398 399 editable tag attributes 404 405 editing 409 editing code in 389 editing server scripts 389 expressions 390 finding editable regions 399 making region noneditable 399 modifying properties in...

Page 736: ...ers 100 underline 241 underscores in SQL account names 528 undoing Crop commands 251 file checkouts 94 Sharpen commands 252 Unicode Normalization Form 74 Universal Access 705 Unmark Editable Region command 399 Update Current Page command 117 411 Update HTML command in Fireworks 372 Update Links When Moving Files option 36 Update Pages command 411 update pages building ColdFusion 637 Update Record ...

Page 737: ...ng up a web server and application server 499 workflow for setting up 14 web pages See pages web photo albums creating 372 web servers 498 See also servers application servers web services about 583 adding to a page 588 AXIS proxy generator 585 proxy generators additional 585 proxy generators configuring 586 proxy generators installing 585 SOAP 585 UDDI directories 584 UDDI site list editing 587 w...

Page 738: ...ansformations 421 creating conditional regions with 437 dynamic links 435 fragments 421 434 435 page linking to XML files 446 pages 421 423 429 430 435 Repeat Region XSLT object 425 432 433 using with dynamic pages 422 Z Z Index option for AP elements changing stacking order 158 style definition 133 Zoom tool 223 September 4 2007 ...

Search results

Summary of Contents for 38040334 - Dreamweaver CS3

Reviews:

Related manuals for 38040334 - Dreamweaver CS3

Brands by name

Popular brands

Adobe 38040334 - Dreamweaver CS3, User Manual

Search results

Summary of Contents for 38040334 - Dreamweaver CS3

Reviews:

Related manuals for 38040334 - Dreamweaver CS3

Brands by name

Popular brands