How to Create a Login Page With Adobe Dreamweaver CS3

Using a Web design program like Adobe Dreamweaver CS3 to create a login page for user accounts involves three elements: an HTML page with a form where remote users can enter their user name or ID and password; design of a server behavior system used to validate the entered information; and a database of authorized users. The third element involves database creation, which is beyond the scope of this article.

Difficulty: Moderate

Instructions

Things You'll Need:

• Adobe Dreamweaver CS3

1. Create a new page in Adobe Dreamweaver CS3 by clicking "File," "New," "Blank Page" and selecting the "HTML" page type. Add a form to the page by clicking "Insert," "Form" and change the default "Form1" name in the Properties box at the bottom of the screen to read "Login."

2. Add a User Name text field to the form by clicking "Insert," "Form," "Text Field." In the box that opens, fill in the blank "ID" and "Label" fields with "username" and "User Name" respectively.

3. Press the "Enter" key to put the next field on a new line. Add a password text field, using "password" for the ID and "Password" for the Label. Leave all the other choices on these text field screens as they are.

4. Press the "Enter" key to create a new line. Click "Insert," "Form," "Button" and fill in "login" for the ID. Leave the Label field empty. Double click on the button, which at this point reads "Submit," to open the Properties window at the bottom of the screen. Type "Log In" in the box for Value. This finalizes the creation of a Login HTML page for user accounts in Adobe Dreamweaver CS3. Save your work.

5. Create the process to verify user information in a database. Click on "Window" and "Server Behaviors" in the Dreamweaver menu. Three steps appear in a pop-up window. If you already have a website, there should be a check mark by the first step. Click on the highlighted "site" anyway to verify the site location. On the next line, click on "document type" to chose the testing server related document type from the list of choices.

6. Click on the third item in the Server Behavior setup, which is "testing server." Here you will have to choose between a testing server on your own PC or on your website. When these items are set, a fourth line will show up, directing you through the process of creating a RecordSet to access the user/password database for user accounts. Assuming the database exists, Dreamweaver will walk you through the process of linking to it to finalize the login process.

Tips & Warnings

• Use a Table to hold the login fields, setting the column widths and cell spacing to pleasing dimensions and add background colors to enhance the appearance of the login form.
• Setting up the server behavior to verify name and passwords requires using a Testing Server in Dreamweaver CS3. While you can test on your remote server, it is more dangerous in regards to security than testing on your own development PC.

References

• Using Dreamweaver CS3

Resources

• University of Wisconsin Online Dreamweaver Documentation