Build a Website Tutorials

In this blog post we have a series of videos on how to create a website using Dreamweaver CS3.

We made these videos here at Passy World using Techsmith Camtasia 7.1.

These videos are all "HD" fullscreen, and so be sure to use the bottom right hand option in the YouTube player to load each video as HD and watch it in full screen mode.

Also note that whenever we mention pressing the "Return" key, this is the same as pressing the "Enter" key. (Eg. In Dreamweaver, pressing the "Enter" key makes a carriage return to take us to a new line).

Our set of YouTube videos cover the following:

• Intro to "Robbie's Outdoor Services" Website
• Defining the Site
• Making a Template
• Making Rollover Buttons
• Adding the Buttons to the template
• Making the Home Page
• Making a Prices page
• Making a Booking Form page.

So let's get started,

This first video is the introduction for the series of video tutorials where we build a website using Adobe Dreamweaver CS3 for "Robbie's Outdoor Services".



In the following tutorial video we define the site for "Robbie's Outdoor Services" in Dreamweaver CS3. We also set up the Windows folders we need for storing our website components. Finally we put our Google Images and blank button image into these folders.



In the next tutorial we use Adobe CS3 Fireworks to make light and dark images of Buttons that we are going to use for our "Robbie's Outdoor Services" website. The twelve buttons we make are (2 of each, a light green and a dark green), for each of Home, Services, Prices, Bookings, Associates, and Contact.



The following video shows how to use Layout Tables and Cells in Dreamweaver CS3 when building a template for a website.



Now that we have made images for our Rollover buttons, and a template for our site, we are now ready to create the "Rollover Buttons".

The following video shows how to add in Rollover Buttons using Adobe Dreamweaver CS3 when building a template for a website. (Make sure you have first watched the previous video on how we made the images of the rollover buttons using Adobe Fireworks).



Now that we have rollover buttons on the template, we are ready to build our first page, which is the "Index" or "Home" page.

In the tutorial video below, we use the template we have made to build the Home page for "Robbie's Outdoor Services". We then link this new "Index.html" page to the Home button that is on our .dwt Template.



In the next video we build the next page in our Website. This webpage, (built from our existing template), is the "Prices" page for our "Robbie's Outdoor Services" website by using Dreamweaver Tables.



This next video shows how to use Forms in Dreamweaver CS3 when building a "Bookings Page" website. The Bookings page is built incorporating a template we built for our website in a previous tutorial.



This final video is part 2 of our tutorials that show how to use Forms in Dreamweaver CS3 when building a "Bookings Page" on a website.



Note that in the Part 2 video, we have not shown the final step of editing the .dwt template, and linking its "Bookings" button, to our Bookings webpage HTML.

The inspiration for making this set of videos came from doing Greg Bowden's "Guided Computer Tutorials" in Dreamweaver CS3. If you would like to buy great training materials from Greg, then check out his website by clicking the link below:

http://www.gct.com.au/

We hope this set of Video Tutorials are of use to all people who are interested in building websites with Adobe Dreamweaver.

Enjoy,
Big Passy Wasabi