User Guide Cancel

Understand web applications

  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

 

 

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 web applications

A web application is a website that contains pages with partly or entirely undetermined content. The final content of a page is determined only when the visitor requests a page from the web 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.

Web applications are built to address a variety of challenges and problems. This section describes common uses for web applications and gives a simple example.

Common uses for web applications

Web applications have many uses for both site visitors and developers, including the following:

  • Let visitors find information quickly and easily on a content-rich website.

    This kind of web application gives visitors the ability to search, organize, and navigate content as they see fit. 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 analysis. Examples include online banking pages, store check-out pages, surveys, and user-feedback forms.

  • Update websites that have constantly changing content.

    A web application frees the web designer from continually updating the site’s HTML. Content providers such as news editors provide the web application with content, and the web application updates the site automatically. Examples include the Economist (www.economist.com) and CNN (www.cnn.com).

Web application example

Janet is a professional web designer and longtime Dreamweaver user responsible for maintaining the intranet and Internet sites of a medium-sized company of 1000 employees. One day, Chris from Human Resources comes to her with a problem. HR administers an employee fitness program that gives employees points for every mile walked, biked, or run. Each employee must report his or her monthly mile totals in an e‑mail to Chris. At the end of the month, Chris gathers all the e‑mail messages and awards employees small cash prizes according to their point totals.

Chris’s problem is that the fitness program has grown too successful. So many employees now participate that Chris is inundated with e‑mails at the end of each month. Chris asks Janet if a web‑based solution exists.

Janet proposes an intranet-based web application that performs the following tasks:

  • Lets employees enter their mileage on a web page using a simple HTML form

  • Stores the employees’ mileage in a database

  • Calculates fitness points based on the mileage data

  • Lets employees track their monthly progress

  • Gives Chris one-click access to point totals at the end of each month

    Janet gets the application up and running before lunchtime using Dreamweaver, which has the tools she needs to build this kind of application quickly and easily.

How a web application works

A web application is a collection of static and dynamic web pages. A static web page is one that does not change when a site visitor requests it: The web server sends the page to the requesting web browser without modifying it. In contrast, a dynamic web page is modified by the server before it is sent to the requesting browser. The changing nature of the page is why it’s called dynamic.

For example, 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.

Process 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 server is software that serves web pages in response to requests from web browsers. A page request is generated when a visitor clicks a link on a web page, selects a bookmark in a browser, or enters a URL in a browser’s address text box.

The final content of a static web page is determined by the page designer and doesn’t change when the page is requested. Here’s an example:

<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
    </body> 
</html>

Every line of the page’s HTML code is written by the designer before the page is placed on the server. Because the HTML doesn’t change once it’s on the server, this kind of page is called a static page.

Strictly speaking, a “static” page may not be static at all. For example, a rollover image or Flash content (a SWF file) can make a static page come alive. However, this documentation refers to a page as static if it is sent to the browser without modifications.

When the web server receives a request for a static page, the server reads the request, finds the page, and sends it to the requesting browser, as the following example shows:

Process static web page

A. Web browser requests static page. B. Web server finds page. C. Web server sends page to requesting browser. 

In the case of web applications, certain lines of code are undetermined when the visitor requests the page. These lines must be determined by some mechanism before the page can be sent to the browser. The mechanism is discussed in the following section.

Process 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 reads the code on the page, finishes the page according to the instructions in the code, and then removes the code from the page. The result is a static page that the application server passes back to the web server, which then sends the page to the requesting browser. All the browser gets when the page arrives is pure HTML. Here’s a view of the process:

Process dynamic pages

A. Web browser requests dynamic page. B. Web server finds page and passes it to application server. C. Application server scans page for instructions and finishes page. D. Application server passes finished page back to web server E. Web server sends finished page to requesting browser 

Access a database

An application server lets you work with server-side resources such as databases. For example, a dynamic page may instruct the application server to extract data from a database and insert it into the page’s HTML. For more information, see www.adobe.com/go/learn_dw_dbguide.

Using a database to store content allows you to separate your website’s design from the content you want to display to site users. Instead of writing individual HTML files for every page, you only need to write a page—or template—for the different kinds of information you want to present. You can then upload content into a database and then have the website retrieve that content in response to a user request. You can also update information in a single source, and then populate that change throughout the website without having to manually edit each page. You can use Adobe Dreamweaver to design web forms to insert, update, or delete data from the database.

The instruction to extract data from a database is called a database query. A query consists of search criteria expressed in a database language called SQL (Structured Query Language). The SQL query is written into the page’s server-side scripts or tags.

An application server cannot communicate 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 intermediary of a database driver: software that acts like an interpreter between the application server and the database.

After the driver establishes communication, the query is executed against the database and a recordset is created. A recordset is a set of data extracted from one or more tables in a database. The recordset is returned to the application server, which uses the data to complete the page.

Here’s a simple database query written in SQL:

SELECT lastname, firstname, fitpoints 
FROM employees

This statement creates a three-column recordset and fills it with rows containing the last name, first name, and fitness points of all employees in the database. For more information, see www.adobe.com/go/learn_dw_sqlprimer.

The following example shows the process of querying a database and returning data to the browser:

Access a database

A. Web browser requests dynamic page. B. Web server finds page and passes it to application server. C. Application server scans page for instructions. D. Application server sends query to database driver. E. Driver executes the query against the database. F. Recordset is returned to driver. G. Driver passes recordset to application server H. Application server inserts data in page, and then passes the page to the web server I. Web server sends finished page to requesting browser. 

You can use almost any database with your web application, as long as the appropriate database driver for it is installed on the server.

If 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 systems so that your web application can operate quickly and efficiently.

Author dynamic pages

Authoring a dynamic page consists of writing the HTML first, and then adding the server-side scripts or tags to the HTML to make the page dynamic. When you view the resulting code, the language appears embedded in the page’s HTML. Accordingly, these languages are known as HTML embedded programming languages. The following basic example uses ColdFusion Markup Language (CFML):

note: CFML support is removed from Dreamweaver and later.

 

<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
        <!--- embedded instructions start here ---> 
        <cfset department="Sales"> 
        <cfoutput> 
        <p>Be sure to visit our #department# page.</p> 
        </cfoutput> 
        <!--- embedded instructions end here ---> 
    </body> 
</html>

The embedded instructions on this page perform the following actions:

  1. Create a variable called department and assign the string "Sales" to it.

  2. Insert the variable’s value, "Sales", in the HTML code.

The application server returns the following page to the 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 scripting or tag-based language to use depending on the server technology available on your server. Here are the most popular languages for the server technologies supported by Dreamweaver:

Server technology

Language

ColdFusion

ColdFusion Markup Language (CFML)

Active Server Pages (ASP)

VBScript

JavaScript

PHP

PHP

Dreamweaver can create the server-side scripts or tags necessary to make your pages work, or you can write them by hand in the Dreamweaver coding environment.

Web application terminology

This section defines frequently used terms relating to web applications.

An application server

Software that helps a web server process web pages containing server-side scripts or tags. When such a page is requested from the server, the web server hands the page off to the application server for processing before sending the page to the browser. For more information, see How a web application works.

Common application servers include ColdFusion and PHP.

A database

A collection of data stored in tables. Each row of a table constitutes one record and each column constitutes a field in the record, as shown in the following example:

A database

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 database management system

(DBMS, or database system) Software used to create and manipulate databases. Common database systems include Microsoft Access, Oracle 9i, and MySQL.

A database query

The operation that extracts a recordset from a database. A query consists of search criteria expressed in a database language called SQL. For example, the query can specify that only certain columns or only certain records be included in the recordset.

A dynamic page

A web page customized by an application server before the page is sent to a browser.

A recordset

A set of data extracted from one or more tables in a database, as in the following example:

A recordset

A relational database

A database containing more than one table, with the tables sharing data. The following database is relational because two tables share the DepartmentID column.

Relational database

A server technology

The technology that an application server uses to modify dynamic pages at runtime.

The Dreamweaver development environment supports the following server technologies:

  • Adobe® ColdFusion®

  • Microsoft Active Server Pages (ASP)

  • PHP: Hypertext Preprocessor (PHP)

    You can also use the Dreamweaver coding environment to develop pages for any other server technology not listed.

A static page

A web page that is not modified by an application server before the page is sent to a browser. For more information, see Processing static web pages.

A web application

A website that contains pages with partly or entirely undetermined content. The final content of these pages is determined only when a visitor requests a page from the web 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 text box.

Popular web servers include Microsoft Internet Information Server (IIS) and Apache HTTP Server.

 Adobe

Get help faster and easier

New user?