Make Your Own Site Using Dreamweaver CC (A Step-by-Step Guide)

When working on any web development project, you may find bottlenecks. In order to eliminate the bottlenecks, you'll have to identify that gets bogged down in your project.

Well, bottlenecks can vary from one project to another, however, one of the most common ones that you might experience is the performing transformation from design to the coding part.

In simple words, PSD to HTML conversion seem challenging to a lot of users, especially when they need to work on the coding part. In fact, any designer will find coding their PSD daunting task, who lack the programming knowledge, as well as, skills.

A lot of tools have been created in an attempt to auto-generate the code that is clean just like the one you've created manually. But most of them fail to generate clean and uncluttered code for the design. But, Dreamweaver CC helps to bridge the design code gap. More importantly, the tool “Insert Panel” helps speed up the process of building web pages, as it created the HTML code for your design.

This post is written, so as to help you understand how you can use the Dreamweaver CC tool for building your own site, following some simple steps such as the ones discussed below:

Step 1:

To create your site start up Dreamweaver CC, and you'll be able to see a window that should look like at the following image:

Note: Keep in mind that the window may appear to be different when viewed on some different system (such as Mac OS X) rather than Windows. But, you don't need to worry, as the differences will be minor, regardless of the system you're using.

Step 2:

Now for creating your site, the first thing you need to do is to click on the "Site" option given on the menu bar, and from the drop down menu click on the "New Site" option as shown below:


This will open up a dialog box such as the one given below:

Step 3:

As you can see in the above image with the title “Site Setup for Unnamed Site 2” contains two text boxes: one for “Site Name” and the other one for “Local Site Folder”. Simply replace the Site Name (i.e. Unnamed Site 2) with your own. If you don't have one saved on your computer, simply create a folder on the desktop with the name of your site, for example, MyWebsite (or any other name as you deem perfect).

Step 4:

Next, the "Local Site Folder" helps display the location where all of your website files are or will be stored on your system. The text area of this option, by default, contains text like "C:\Users\christopherheng\Documents\Unnamed Site 2\" (the full name can be different on your computer system based on whether you're using Mac or Windows, also the username will be the one saved on the computer).

One thing you should remember is that, make sure not to delete the preceding text from your folder, such as: "C:\Users\christopherheng\Documents\". Also, ensure to keep the backslashes ("\") intact. If you delete any of these things, your folder won't be saved within the subfolder in your Documents folder, instead it might get saved on a location on the hard disk that might not be known to you.

Step 5:

So, once you are fine with the changes that you have made so far to the “Site Name”, as well as, the “Local Site Folder” fields, simply hit the "Save" button – from your opened dialog box – given at the bottom. This will save all your changes and will make you return to the main Dreamweaver window. That's it, now you can get started with the process of creating your first web page.

Let's Wrap Up!

Dreamweaver is a highly popular web design tool created by Adobe that is used by both beginners, as well as, experienced webmasters for web design projects. With the help of this tool, you can create your site visually. The best part is that, you can view the results in real-time on your computer screen as you continue to work using Dreamweaver. The new version of this tool named as Dreamweaver CC released last year introduced many upgrades and improvements, to speed up the web development workflow. So, if you plan on creating a website using Dreamweaver CC, then this post will serve as an excellent starting guide for you.

About the Author:

Samuel Dawson is very old professional associated with Designs2HTML from last so many years. He is working as Sr. Front End Developer in this company and is perfect in converting PSD to HTML files in effective manner but not much like Dreamweaver. He is sharing here the perfect building of a website in Dreamweaver CC.

Find Me On GooglePlus