Setting up a new website in Dreamweaver CS6 Part 1/2

Building a new website for the first time can be a daunting task. Some people prefer to code by hand using tools such as Notepad, Frontpage or even Adobe Edge. Most web developers prefer to use Dreamweaver however to design and code html, css, and javascript websites. The software includes an option to view your work as you code to help aid in the development process. Dreamweaver also includes several shortcuts and menu commands that enable coders to add in code without having to remember the exact snippets.

You won't need any prior knowledge of html or css to complete this lesson but it will help you understand certain concepts if you know a little of these languages. There are plenty of good resources online to help you hone your coding skills such as www.w3schools.com/. Furthermore, we'll also be using the Classic view of Dreamweaver. This can be changed by changing the view in the top-right hand corner of Dreamweaver such as seen in the screenshot below.


To begin setting up a site in Dreamweaver, it's usually a good idea to create a root folder on your computer. For this exercise we'll place it on the desktop. This folder will contain all of the associated files for the website and will make things easier when placing the site on a live server. As you can see below, we started a root folder with the name of “Our site” which includes folders for css, fonts and assets. You may have more or less folders depending on the complexity of your website. It's also a good idea to keep the names of your folders lower case as this is the standard for labelling web folders.

2q (2)

Now we'll open up Dreamweaver which gives us several options including  the command to create a new html document. For the purpose of this exercise we'll select the “HTML” option under “Create New” which will open up a new blank document in Dreamweaver. To be sure you're using the newest version of html (which is HTML 5), look under the FILE command at the top of Dreamweaver for the CONVERT command and in here make sure the HTML 5 option is selected.

2q (1)

You should now see a screen that resembles this:


Now before doing anything else it's a wise idea to make sure this document is pointing towards your site's root folder (the one we created on the desktop). This will make building a website much easier as all of the assets for the site will be located in one folder. To do this select the SITE option from the top of Dreamweaver and click the third option under this menu called “Manage Sites”. This will open up a screen where you can manage the sites you've built using Dreamweaver. If this is your first site then the white box will be empty. At the bottom of this panel select the NEW SITE command which will open up a screen like this one:


In this panel be sure to call your website something appropriate and also click the small folder beside the Local Site Folder box and locate your site's root folder to select it. Linking this properly is crucial to keeping things organized.


After you've done this, hit the SAVE button in this panel and then the DONE button at the bottom of the Manage Sites screen to return to the blank Dreamweaver document.

It's probably a good idea to save your new Dreamweaver file now as well by going into File>Save at the top of Dreamweaver and saving this file in your root folder. If it's your homepage then it should be saved as”index” as this is the standard name given to homepages on the internet. If it's a subpage then it should be saved under the name of the page you plan to build such as “News” or “Contact”.

In the next article we'll take a look at finishing the setup of your Dreamweaver document so you can start building the page. We'll also take a look at creating an external CSS style sheet to store the rules that style your page.



Leave a Reply

Your email address will not be published. Required fields are marked *

To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image