Wednesday, June 3, 2009

Basic Web Site Creation With Adobe Dreamweaver CS4

By Andrew Whiteman

Adobe Dreamweaver is a great piece of software which demystifies the business of creating a web site. However, it is also packed with a whole host of features which can seem a little daunting when you first start using the program. This article aims to explain how create a basic web site, where to start and which tools to use.

It is very important that you design and sketch out how you want the site to work and what information will be available for users to navigate their way through. It is also a good idea to keep your first project simple. Once you have completed a basic version of your site, you can look to expand your knowledge and expertise and then add enhancements to the site.

Another step you should complete before you even go into Dreamweaver is to create a folder to hold all of the files which will comprise your site: the "local root folder", as Dreamweaver calls it. Don't put anything in this folder but the files relating to your site. Once you have completed your project, it will mirror the live version of your site.

Next, create a folder inside the "local root folder" which will hold your images. This will help you to avoid ending up with "broken images" on your site, where visitors are presented with an empty box instead of the actual image.

Having created the site folders, you are ready to complete the Dreamweaver site definition. Launch Dreamweaver and click on New in the Site menu. When the New Site dialogue appears, click on the Advanced tab. This will allow you to complete the two essential categories required for a basic site: Local Info (relating to your version of the site) and Remote Info (the live version of the site.

Local Info relates to your version of the site. In this window, first enter a name for the new site. Next, click on the yellow folder icon next to the box marked "Local Root Folder" and browse for the folder you created earlier. Repeat this step to identify the "Default Image Folder".

Next you need to click on the Remote Info category on the left of your screen. This is where you tell Dreamweaver how to connect to the server that contains your web pages. For a public website, choose FTP as the access method and ask your web hosting company for the other details required. For an intranet, choose Local/Network as the access method and navigate to the server and sub-directory containing your company intranet.

The next step is to create all of the pages in your website arranged in the appropriate sub-directories. Don't put any content in the pages at this stage, just create and save each page into your local root folder. This is done, so that later, when you create links on any page, the page that you link to will already exist, so you can just point to it and automatically create the correct link.

There's still one more step that you should do before you are ready to actually start work on the page content; you should create at least one template. Templates allow you to maintain a consistent look and feel throughout the site. It consists of fixed elements, such as logo and navigation links and what Dreamweaver calls "Editable Regions". These are the areas of the page which can be altered each time you use the template.

Having finished your template or templates, you are ready to build the web pages that will constitute your site. Simply open each page, choose Modify - Templates - Apply Template to Page and then add the text, images etc. that make up the page.

About the Author:

No comments: