How to Design a Website with Dreamweaver CS6
Dreamweaver is a well-known web editor (a type of computer program) used by both experienced and novice webmasters to design websites. It uses what is known as a “WYSIWYG” interface (where “WYSIWYG” stands for “What You See Is What You Get”), meaning that you can create your website visually and see the results on your computer monitor as you work.
Things You Need
- Dreamweaver CS6
If you have a different version of Dreamweaver, you’ll probably have an easier time if you follow the tutorial appropriate for that particular version, since my description of the things you need to do, as well as the pictures showing what you see on the screen, will match your experience as you create your site. For example, use the Dreamweaver CS5.5 if you have CS5.5, the Dreamweaver CS5 Tutorial if you use CS5, the Dreamweaver CS4 or the Dreamweaver CS3 if you have CS4 or CS3 respectively. If you have some other version not listed here, take a look at the complete list of Dreamweaver to see if it’s there. Note though that if you use a version of Dreamweaver earlier than CS3, such as Dreamweaver 8, you will not be able to follow any of these tutorials, since those early versions lack the features used in these articles.
- A Web Host and (Optionally) a Domain Name
Unless you are a student referred to this article by your lecturer as part of a course, you will need to get a domain name and sign up with a web host. A domain name is basically your website’s name, while a web host is a company that has computers (called web servers) running special software (confusingly, also called web servers) that are permanently connected to the Internet. When you put the website you design on those computers, it will be accessible to everyone on the Internet.
I state that a domain name is optional in the section title above, it’s only “optional” in a technical and ivory tower (theoretical) sense. In practice (ie, real life), everyone (except students following this article to fulfill a course requirement) should get one. If you don’t, you’ll regret it later when you lose everything you’ve worked hard for.
How to Set Up Your Site in Dreamweaver’s Site Manager
Before you begin designing your web page, you will need to provide Dreamweaver some information about your website. This is done through its Site Manager.
- Start up Dreamweaver.
You should be able to spot a line of text at the top of the Dreamweaver window that says something like “DW File Edit View Insert Modify Format Commands Site Window Help” and some icons. This line is known as the menu bar. Each word or icon in the menu bar is clickable. In fact, if you were to hover your mouse over each of the words on that bar, you’ll notice that the word is highlighted, indicating that it can be clicked.
Note: if you accidentally (or deliberately) clicked one of the words, a drop down menu will appear. To get rid of it, just click that same word again.
You will be using this menu bar extensively in the course of this tutorial.
- Click “Site” on the menu bar. A drop down menu will appear. Click the “New Site…” line in that menu.
Important: from this point onwards, for the sake of brevity, I shall refer to such a sequence of clicking items in the menu bar and in the drop down menus that appear as “Site | New Site…”. For example, if I say click “File | New…”, it means to click “File” in the top menu bar, followed by the item “New…” in the drop down menu that appears. (Please don’t actually click “File | New…” at this time. It’s just an example.)
- A dialog box will appear. It will probably have a title of “Site Setup for Unnamed Site 2”. Don’t worry if the title says “Unnamed Site 3”, or some bigger number. The exact number shown depends on the number of times you’ve invoked the Site Manager before, and is unimportant. In any case, you’ll be changing the words “Unnamed Site 2” (or whatever it currently says on your computer) to the name of your site in just a moment.
Look for the field labelled “Site Name” in the main body of the dialog box. The default text in the field will match what you saw in the title of the dialog box. That is, it will say something like “Unnamed Site 2”. Replace the words in this field with the name of your website. If you don’t know what to put here, type in your domain name. For example, if your domain is “example.com”, just enter that into the field.
To allay your fears further, let me explain that the “Site Name” you type here will not actually be displayed anywhere on your website. It is just an internal name used by Dreamweaver to refer to your website. It’s intended to help you identify which website you’re working on. It is particularly helpful if you, say, create 100 websites using Dreamweaver. If you leave the “Site Name” at the default text of “Unnamed Site [number]”, you’re going to end up with a long list of sites called “Unnamed Site 2”, “Unnamed Site 3”, up to “Unnamed Site 101”. The next time you want to update one of your sites, you’re going to have a hard time trying to remember which is which (“Was it Unnamed Site 61? Or was it 85?”). Like I said, if you don’t know what to enter into this field, just use your domain name.
- The “Local Site Folder” shows where your website files will be saved on your current computer. By default, it probably says something like “C:\Users\christopherheng\Documents\Unnamed Site 2\” (the exact full name will be different on your computer depending on whether you use Windows or Mac, the specific version of Windows that you’re using, and your username on the computer). That is, the web pages you create will end up in a folder called “Unnamed Site 2” in your Documents directory.
Click your mouse pointer somewhere in that field. This will put a text cursor somewhere in the location currently displayed there. Use the arrow keys on your keyboard to move the text cursor to the part of the text that says “Unnamed Site 2” (or whatever number it shows on your computer).
Make sure that the field is not highlighted before you do the next part. If it is, click somewhere in the field and use your arrow keys to move the cursor like I said in the paragraph above; this will remove the highlighting. Now replace the part of the text that says “Unnamed Site 2” with your domain name or website name. Do NOT remove the other letters on that line. For example, if your suggested folder name is the same as mine (which is of course highly unlikely), do not delete the preceding “C:\Users\christopherheng\Documents\” or any of the backslashes (“\”). If you do, your website files will end up being saved on some obscure location on your hard disk instead of being in a subfolder of your Documents folder.
If you find the instructions for this step too confusing or difficult to follow, just skip the step and move on to the next point. Like the “Site Name” field earlier, the renaming of the folder in this step is merely meant to help you to locate your own files in the future (otherwise the folder will end up being given an unhelpful name like “Unnamed Site 2”). It is completely optional and not worth getting stressed over.
- Once you’re satisfied with the changes you made to the Site Name and Local Site Folder fields, click the “Save” button at the bottom of the dialog box. This will save your site definition, dismiss the “Site Setup” dialog box and return you to the main Dreamweaver window. You’re now ready to create your first web page.
How to Create a Two Column Web Page with Dreamweaver CS6
You will be creating a two column web page for the purpose of this tutorial. Many webmasters like this layout because it is space-efficient, simultaneously yielding high functionality and user-friendliness. Both your content and navigation aids (the links/buttons to the other pages on your site) are immediately obvious to your visitors, making it easy for them to read your content as well as access the other pages on your site.
- Click “File | New…” from the menu. As I mentioned above, this means that you are to click the word “File” from the menu bar, followed by the line “New…” in the menu that appears.
A dialog box with the title “New Document” will appear.
- Click “Blank Page” in the leftmost column to select it. Actually, if this is the first time you’re using Dreamweaver, “Blank Page” will probably already be selected, but there’s no harm clicking it again to make sure.
- Click “HTML” (the topmost line) in the “Page Type” column (the second column from the left). Again, for those using Dreamweaver for the first time, this line will probably already be selected, but click it again just to be sure.
- Click “2 column liquid, left sidebar, header and footer” in the “Layout” column (the third column from the left). This line is somewhere near the middle of that column.
- Click the drop down box (the one that probably says “Add to Head” at the moment) next to the field labelled “Layout CSS” somewhere in the lower half of the rightmost column (see picture). Click the “Create New File” line in the list that appears.
- Click the “Create” button near the bottom right of the dialog box.
- A dialog box with the title “Save Style Sheet As” will appear. Click the “Save” button.
You will now see a 2-column web page containing some placeholder text (with a heading of “Instructions”) in the main Dreamweaver window.
For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.
Helpline: 9814666333, 8699444666