How to Make a Website With Dreamweaver CS4

Designing a website in Adobe Dreamweaver CS4 requires some understanding of web concepts but is a straightforward activity explained in the steps below. Dreamweaver CS4 provides users with scalable functionality that supports the design of a site that is capable of taking advantage of emerging Internet technology. With Dreamweaver, a user can create a simple personal or family site or a complex site with ecommerce functionality that meets the needs of a moderate-sized business.

Difficulty: Moderate

Instructions

Things You'll Need:

• Images for use in the site Planned text to insert FTP location and credentials

Designing A Site

1. 
    
   Image 1: Designing a New Site

   Open Dreamweaver CS4 and click Site and New Site as in Image 1. This will bring up a dialogue box titled "Site Definition for Dreamweaver..." Ensure that the Basic button is selected in the dialogue box also visible in Image 1.

2. 
    
   Image 2: Entering the Site Definition

   Begin the Site Definition process by clicking the Next button. Fill in the required information and complete the process. The final step of the Site Definition process displays a Done button at the bottom of the screen as in Image 2. Click Done.

3. 
    
   Image 3: First page of the design

   Click File then click New to add a page to the Dreamweaver Site. Select HTML from the available options as in Image 3. Click Create in the bottom right corner of the Dialogue Box.

4. 
    
   Image 4: Root directory layout

   Populate the blank page with the information that users should see first when visiting the site. This page is often referred to as the "Home" or "Index" page. Save the file as index.html. Once saved, the file will appear in the site directory in the bottom right corner of the screen as in Image 4.

5. 
    
   Image 5: Including the folders needed for the design

   Create the folders that will be used for other file types to keep the site organized. Right click on the site to see the drop down list with the New Folder option as in Image 5. Create a folder for other Pages, Images, .PDF Files and any other folder needed for the site also visible in Image 5.

6. 
    
   Image 6: Linking pages

   Click File then click New to add additional pages to the site. Link pages together with the "Point to File" utility at the bottom of the program. A personal site could include a "Contact" page, an "Interests" page and an "About Me" page. Other pages can be added in the same way.

7. Upload the files to the web hosting directory by selecting the files to upload. Right click on the selected files and click Put from the drop down menu.

Tips & Warnings

• Files that have been changed can be configured to upload to the FTP site automatically upon being saved. This change is made in the Advanced Site Management area. Large sites can be configured to synchronize so that all changed pages are kept track of by the program. When the user orders the synchronize function, only the pages that have been changed will be updated. The synchronize function is located under the Site menu option. The Synchronize function can be used site wide or for individual files.

Resources

• Adobe provides an exchange area for Dreamweaver that has a number of different tools and assets that can be used on almost any Dreamweaver site.