Create HTML Pages in Dreamweaver CS3 and Insert Content/ Forms

Step 8: Dreamweaver CS3 Tutorial - Create HTML Pages, Insert Content & Forms

[This is Step 8 of the Dreamweaver CS3 Tutorial]

Now it is time to use Dreamweaver to create the HTML pages and insert content and forms if any.

Once you have your template, css stylesheet and server site includes/ library items ready, you can begin creating the actual pages of your site as per your site plan.

Keep in mind that if you are using server side includes you will need to create .shtml or .shtm pages.

Create HTML/ SHTML Pages in Dreamweaver

To create the HTML/ SHTML pages:

File > New > Page from Template > Project Name > Template Name > Create]
Name and save the file into the project folder. Name the homepage index.shtml if using SSI and if your remote hosting server is a UNIX server. If it is a NT server most likely the homepage will need to be named 'default.shtml'. If you are not using SSI, leave the file extensions as .htm.
Change the HTML page title to something more appropriate [ Modify > Page Properties >Title/ Encoding > Title]
Put in appropriate meta data for the page i.e. keywords and description of the page
- Insert > HTML > Head Tags > Keywords
- Insert > HTML > Head Tags > Description
Type or paste the Heading and content of the page into the appropriate edible region. Apply the styled formatting (e.g. H1 tag or custom style) from the Properties Panel
Insert any images/ flash assets etc. into the editable region and and align them
- Insert > Image
- Insert > Media > Flash
Replace any library items/ SSI e.g. sub menus
Similarly create all the other HTML/ SHTML pages you need.

Forms in Dreamweaver

Some pages might require form elements such as the "contact us" form:

Insert > Form > select the form element of choice. A form must be within a form tag so select "Form" first, then insert the other form fields like Text field etc. within the form tag that appears.

form

To make a form work you will need a php, asp or cgi script. You can also make use of free services available.

Go to Step 9 >>

Dreamweaver CS3 Tutorial for Beginners

Step 1: Define a new site in Dreamweaver

Step 2: Create a Dreamweaver Template

Step 3: Create the Page Layout in the Dreamweaver Template

Step 4: Create the CSS Style Sheet

Step 5: Insert Common Elements into the Dreamweaver Template:Text & Images

Step 6: Create Libraries or Server Side Includes

Step 7: Define the Editable Regions of the Template

Step 8: Create the HTML Pages of the Site with Content/ Forms

Step 9: Link the Pages

Step 10: Test the Site Locally and Upload Online to the Hosting Server

Project 1: Table Based Layout Website

Project 2: DIV/ CSS/ Tableless Layout Based Website

Project 3 : Website with Server Side Includes

Spry Tutorial

Free Dreamweaver CS3 Templates

Dreamweaver CS4 Tutorial

Suggestions for Improvement? If you have a suggestion to improve this tutorial please contact us. We would love to hear from you.

Dreamweaver is part of Creative Suite 3 Web Standard
Streamline web design, development, and maintenance. Order Now!