How to Create Dynamic Websites in Dreamweaver

Found This Helpful

Adobe Dreamweaver is arguably the best web-building product on the market, but sometimes quality increases complexity. While it provides a range of tools for building dynamic websites--which are database-driven websites that use a scripting language such as PHP--it can be tough finding just where the tools are, or how to use them well. If you have a little patience and like to problem-solve, you'll be on your way.

Things You'll Need

  • Adobe Dreamweaver

Instructions

  1. Open Dreamweaver and select the appropriate project under the "Create New" list. Because you're trying to build a dynamic website, you'll want to select a scripting language with database-connection capabilities, namely PHP, ASP.NET or ColdFusion.

  2. Familiarize yourself with the basic Dreamweaver screen. By default, you should have a toolbar at the top of the screen for basic File, Edit, View, etc. functions. Below that should be a screen showing the current page's code, and below that should be a screen showing the current page's design--what it will actually look like in a browser.

    At the top of the sidebar on your right should be an "Insert" panel that lists a series of common tasks like hyperlinking and inserting images. If you click the drop-down menu at the top that says "Common," you'll see a list of more specialized categories. For example, if you're making a PHP page, one of the options will be PHP; select it and you'll be given a list of common PHP-specific tasks.

    Below the Insert panel is a CSS Styles panel and a file manager; there's also a bottom toolbar used for inserting HTML and CSS properties.

  3. Create a page design and figure out where the dynamic elements of the page will go; as the Adobe website says, "the design of the page becomes crucial to its usability." For example, if you're pulling an article from a database, you should create a layout that allows space for the article's title and content--and perhaps author and date as well. If you're pulling data such as a member list, you should create a table- or list-based layout that can display a member's information such as their username, contact info, or location.

  4. Open the Bindings panel. If it doesn't display by default on the right sidebar of your workspace, select the drop-down menu on the top right-hand-corner of the screen that displays "Designer." Of the choices, select "Classic." The Bindings panel should now appear as one of the boxes on the right sidebar.

  5. Follow the instructions on the Bindings panel to use dynamic data; you'll be taken through a wizard asking you for your site name and your server information. The purpose of this is to connect to a database that you can pull information from. To do this, you'll need to set up a private server on your computer outside of Dreamweaver. Probably the easiest way to do this is to download Xampp (see Resources), a free and open-source private server that works with PHP and the MySQL database.

  6. Click on the plus ("+") button in the top-left corner of the bindings panel and select "Recordset." You'll be asked to input the database information to finish connecting to the database; this includes the server (which will be "localhost" on Xampp), and the database's name, username and password. When finished, you'll have completed a connection and can use the recordset to insert data on your page directly from the database.

References

Comments

Resources

  • Photo Credit Alexander Hassenstein/Getty Images News/Getty Images

You May Also Like

  • How to Create a Dynamic Website

    How to Create Dynamic Websites in Dreamweaver. Adobe Dreamweaver is arguably the best web-building product on the market, but sometimes quality increases...

  • How to Create a Web Page With Dreamweaver

    With Dreamweaver, you can create a Web page using a visual approach ... How to Create a Dynamic Web Page With Dreamweaver...

  • How to Make a Website in Dreamweaver

    Websites created in Dreamweaver can be adapted for personal or business use. Dreamweaver provides a combined HTML editing and WYSIWYG editing base...

Featured

Watch Video

#eHowHacks: Open a Wine Bottle With a Shoe