User Guide Cancel

Build master and detail pages in Dreamweaver

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Learn how to build a master page in Dreamweaver and create links to a detail page.

Note:

The user interface has been simplified in Dreamweaver and later. As a result, you may not find some of the options described in this article in Dreamweaver and later. For more information, see this article.

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 each record.

Master page

Detail page

You can build master and detail pages by inserting a data object to create a master page and detail page in one operation or by using server behaviors to build the master and detail pages in a more customized way. When using server behaviors to build master and detail pages, you first create a master page to list the records and then add links from the list to the detail pages.

Build a master page

Before you 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, and choose options. If you want to write your own SQL statement, click Advanced.

    Ensure that the recordset contains all the table columns you need to create your master page. The recordset must also include the table column containing the unique key of each record—that is, the record ID column. In the following example, the Code column contains the unique key of each record.

    Recordset columns selected for a master page

    Typically, the recordset on the master page extracts a few columns from a database table while the recordset on the detail page extracts more columns from the same table to provide the extra detail.

    The recordset can be defined by the user at run time. For more information, see Building search and results pages.

  3. 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 the column in the dynamic table until the column cells are outlined in red, and then click to select the column. Press Delete to delete the column from the table.

Create links to the detail page

After building 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.

Open the detail page and pass a record ID (ColdFusion, PHP)

  1. In the dynamic table, select the content placeholder for text that will serve as a link.
    Links applied to placeholder selected.

  2. In the Property inspector, click the folder icon beside the Link box.
  3. Browse and select the detail page. The detail page appears in the Link box in the Property inspector.

    In the dynamic table, the selected text appears linked. When the page runs on the server, the link is applied to the text in every table row.

  4. On the master page, select the link in the dynamic table.
  5. (ColdFusion) In the Link box in the Property inspector, add the following string at the end of the URL: 
    ?recordID=#recordsetName.fieldName#

    The question mark tells the server that what follows is one or more URL parameters. The word recordID is the name of the URL parameter (you can make up any name you like). Make a note of the name of the URL parameter because you'll use it in the detail page later.

    The expression after the equal sign is the value of the parameter. In this case, the value is generated by a ColdFusion expression that returns a record ID from the recordset. A different ID is generated for each row in the dynamic table. In the 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 location codes.

    locationDetail.cfm?recordID=#rsLocations.CODE#

    When the page runs, the values 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['fieldName']; ?>

    The question mark tells the server that what follows is one or more URL parameters. The word recordID is the name of the URL parameter (you can use any name you like). Make a note of the name of the URL parameter because you’ll use it in the detail page later.

    The expression after the equal sign is the value of the parameter. In this case, the value is generated by a PHP expression that returns a record ID from the recordset. A different ID is generated for each row in the dynamic table. In the PHP 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 location codes.

    locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

    When the page runs, the values 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.php?recordID=CBR
  7. Save the page.

Open the detail page and pass a record ID (ASP)

  1. Select the dynamic content to double as a link.
  2. In the Server Behaviors panel (Window > Server Behaviors), click the Plus (+) button, and select Go to Detail Page from the pop‑up menu.
  3. In the Detail Page box, click Browse and locate the page.
  4. Specify the value you want to pass to the detail page by selecting a recordset and a column from the Recordset and Column pop‑up menus. Typically the value is unique to the record, such as the record’s unique key ID.
  5. If desired, pass existing page parameters to the detail page by selecting the URL Parameters or Form Parameters options.
  6. Click OK.

    A special link surrounds the selected text. When the user clicks the link, the Go To Detail Page server behavior passes a URL parameter containing the record ID to the detail page. For example, if the URL parameter is called id and the detail page is called customerdetail.asp, the URL looks something like the following when the user clicks on the link:

    http://www.mysite.com/customerdetail.asp?id=43

    The first part of the URL, http://www.mysite.com/customerdetail.asp, opens the detail page. The second part, ?id=43, is the URL parameter. It tells the detail page what record to find and display. The term id is the name of the URL parameter and 43 is its value. In this example, the URL parameter contains the record’s ID number, 43.

Find and display the requested record on the detail 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 simple Recordset or DataSet dialog box appears. If the advanced dialog box appears instead, click Simple.

  3. Name the recordset, and select a data source and the database table that will provide data to your recordset.
  4. In the Columns area, select the table columns to include in the recordset.

    The recordset can be identical to or different from the recordset on the master page. Usually a detail page recordset has more columns to display more detail.

    If the recordsets are different, make sure the recordset on the detail page contains at least one column in common with the recordset on the master page. The common column is usually the record ID column, but it can also be the join field of related tables.

    To include only some of the table’s columns in the recordset, click Selected and choose the desired columns by Control‑clicking (Windows) or Command-clicking (Macintosh) them in the list.

  5. Complete the Filter section as to find and display the record specified in the URL parameter passed by the master page:

    • From the first pop‑up menu in the Filter area, select the column in the recordset containing values that match the value of the URL parameter passed by the master page. For example, if the URL parameter contains a record ID number, select the column containing record ID numbers. In the example discussed in the previous section, the recordset column called CODE contains the values that match the value of the URL parameter passed by the master page.

    • From the pop‑up menu beside the first menu, select the equal sign (it should already be selected).

    • From the third pop‑up menu, select URL Parameter. The master page uses a URL parameter to pass information to the detail page.

    • In the fourth box, enter the name of the URL parameter passed by the master page.

  6. Click OK. The recordset appears in the Bindings panel.
  7. Bind the recordset columns to the detail page by selecting the columns in the Bindings panel (Window > Bindings) and dragging them onto the page.

    After uploading both the master and detail pages to the server, you can open the master page in a browser. After clicking a detail link on the master page, the detail page opens with more information about the selected record.

Find a specific record and display it on a page (ASP)

You can add a server behavior that finds a specific record in a recordset so that you can display the record data on the page. The server behavior is only available when using the ASP server model.

  1. Create a page that has the following prerequisites:
  2. Add the server behavior to find the record specified by the URL parameter by clicking the Plus (+) button on the Server Behaviors panel (Window > Server Behaviors) and selecting Recordset Paging > Move to Specific Record.
  3. In the Move To Record In pop‑up menu, select the recordset you defined for the page.
  4. In the Where Column pop‑up menu, select the column that contains the value passed by the other page.

    For example, if the other page passes a record ID number, select the column containing record ID numbers.

  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 in the recordset.

Build master and detail pages in one operation

When developing web applications, you can quickly build master and detail pages using the Master Detail Page Set data object.

  1. To create a blank dynamic page, select File > New > Blank Page, select a dynamic page from the Page Type list, and click Create.

    This page becomes the master page.

  2. Define a recordset for the page.

    Make sure the recordset contains not only all the columns you’ll need for the master page, but also all the columns you’ll need for the detail page. Typically, the recordset on the master page extracts a few columns from a database table while the recordset on the detail page extracts more columns from the same table to provide the extra detail.

  3. Open the master page in Design view, and select Insert > Data Objects > Master Detail Page Set.
  4. In the Recordset pop‑up menu, make sure the recordset containing the records you want to display on the master page is chosen.
  5. In the Master Page Fields area, select the recordset columns to display on the master page.

    By default, all the columns in the recordset are selected. If your recordset contains a unique key column such as recordID, select it and click the Minus (-) button so that it is not displayed on your page.

  6. To change the order in which the columns appear on the master page, select a column in the list and click the up or down arrow.

    On the master page, the recordset columns will be arranged horizontally in a table. Clicking the up arrow moves the column to the left; clicking the down arrow moves the column to the right.

  7. In the Link To Detail From pop‑up menu, select the column in the recordset that will display a value that also serves as a link to the detail page.

    For example, if you want each product name on your master page to have a link to the detail page, select the recordset column containing product names.

  8. In the Pass Unique Key pop‑up menu, select the column in the recordset containing values identifying the records.

    Usually, the column chosen is the record ID number. This value is passed to the detail page so that it can identify the record chosen by the user.

  9. Deselect the Numeric option if the unique key column is not numeric.
    Note:

    This option is selected by default; it does not appear for all server models.

  10. Specify the number of records to display on the master page.
  11. In the Detail Page Name box, click Browse and locate the detail page file 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 in which the columns appear on the detail page, select a column in the list and click the up or down arrow.

    On the detail page, the recordset columns are arranged vertically in a table. Clicking the up arrow moves the column up; clicking the down arrow moves the column down.

  14. Click OK.

    The data object creates a detail page (if you didn’t already create one) and adds dynamic content and server behaviors to both the master and detail pages.

  15. Customize the layout of the master and detail pages to suit your needs.

    You can fully customize the layout of each page by using the Dreamweaver page-design tools. You can also edit the server behaviors by double-clicking them in the Server Behaviors panel.

    After creating master and detail pages with the data object, use the Server Behaviors panel (Window > Server Behaviors) to modify the various building blocks the data object inserts into the pages.

More like this

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy