How To Create A Basic Web Site With Adobe Dreamweaver

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’s always a good idea to sketch out a plan of how the site will work and what kind of user experience it will offer. Dreamweaver will not give you any assistance at this stage, so just use pen and paper. Start by building a basic site, one that you know you can complete without getting bogged down in technologies that you do not understand.

Next, create a folder somewhere on your hard disk or desktop which will contain all of the files which will make up your site. Dreamweaver refers to this folder as the “local root folder”. It should contain nothing but the files pertaining to your web site and will become a mirror image of your actual site when the site goes live.

You should also add an images folder inside the “local root folder”. It can have any name you like but later, when you set up the Dreamweaver site, it will be designated as the default images folder and will help to ensure that your visitors don’t see any blank image icons on your pages.

Now we can open up Dreamweaver and create a new web site. To do this, find the Site menu and choose New Site. When the New Site window appears, be sure to click on the Advanced tab at the top of the screen. Ironically Advanced mode makes it easier to select only the key options you need to enter. Of the categories displayed on the left, we will need to enter Local Info and Remote Info.

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.

Before you start entering content in your pages, it is useful to create and save all the sub-directories and pages your site will need. Create each page (leave it blank) and save it in the appropriate folder with the appropriate name. Creating and naming every page in your site offers the benefit that you will now be less likely to have problems with links since, whenever you want to link to a file, the file will already be there; you can just browse for the file and Dreamweaver will automatically create the link for you.

Before you start work on the page content proper, you should consider creating one or more templates to achieve a consistent layout across all your pages. You create the basic design with all the elements that will repeat on every page (fixed regions) and then click in each area which needs to have unique content on each page and choose Insert – Template Objects – Editable Region. You can even have a hierarchy of master templates and sub templates.

When you have finished your template, you can finally begin entering content into your web pages. When you open each page, begin by applying the template to the page. Then enter the page content into the editable regions. If you spot an error on the main layout, just go back to the template to correct it.

About the Author:
Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks