Dreamweaver CS3: Preview in Browser & File Upload/ FTP

[This is Step 10 of the Dreamweaver CS3 Tutorial]

Step 10: Dreamweaver CS3 Tutorial - Test & Upload to Hosting Server

Once the site is complete in Dreamweaver you are ready to upload/ FTP the files to your server and go live. Before that however, you should preview the site in various browsers (at least FireFox and Internet Explorer) to make sure it is working all right.

Preview in Browser

  1. File > Preview in Browser > select the browser of choice
  2. View each page
  3. Click on all the links

Note: If you use Site Relative paths (as you must in server side includes), the "Preview in Browser" feature will not work. You will need to test on a web server locally or upload to your remote hosting server and test.

Other tools that Dreamweaver provides :

  • Site > Check Links Sitewide
  • Text > Check Spelling

Going Live

After you have developed and tested your site it is ready to go live. You will need to sign up with a hosting server. I recommend Hostgator which I use to host this site.

Once you sign up with a hosting server you they will provide you with your server details:

  1. IP address or www.yoursitename.com
  2. username
  3. password

You can use Dreamweaver or any FTP software e.g. Filezilla to upload your files to the remote hosting server.

File Upload/ FTP in Dreamweaver

To enter your hosting details into Dreamweaver:

  1. Fill in these details in the Remote Info Panel of the Site Definition [Files Panel > Last in the site name drop down - Manage Sites > Select the Site > Click Edit > In the Advanced Tab > Click the category "Remote Info"
  2. Access = FTP (from drop down menu)
  3. FTP host = enter your site url e.g. www.yoursitename.com
  4. Enter your login and password
  5. Click "Test" to check the connection

ftp

To upload your files into the remote hosting Server:

  1. Click the "Expand to show local and remote sites" icon expand to show local and remote sites in the Files Panel
    Expand to show local and remote sites
  2. In the expanded files panel click the 'connects to remote host' icon.
  3. Once you connect you should see the remote folder and files on the left window.
  4. To upload your files click the 'Put Files' Arrow icon in the site manager.
  5. After uploading all the files test the site online using your site url e.g. www.yoursitename.com.

remote server

Your site is live now! Congratulations!

Go to 'Project' 1 >>

 

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!



God Loves You! "For God so loved the world that he gave his one and only Son (Lord Jesus Christ),
that whoever believes in him shall not perish but have eternal life." - John 3:16, Bible