define-local-root-header-image
Tuesday, April 30th 2013
Dreamweaver
5 comments

Create a New Site (Local Root) – Dreamweaver CS6 Tutorial


Defining a site in Dreamweaver creates the go-to folder for your website when working with Dreamweaver, in fact it is the very first thing you will want to do when creating a new project within Dreamweaver. It gives you organization within Dreamweaver and really allows you to take advantage of the powerful site management tools of Dreamweaver CS6. It’s really a breeze to setup a Site in Dreamweaver. Let’s begin!

Video

 

Written Tutorial Starts:

 

1. Site? Local Root? What?

Dreamweaver provides you with a quick and easy way to organize your files within Dreamweaver and allow you to take advantage of Dreamweaver’s powerful website organizational tools, upload your website to a web server, auto maintain links when pages are moved around, as well as generally managing and sharing files. When you define a site in Dreamweaver, you allow your site to take full advantage of everything Dreamweaver has to offer…

Define Local Root Folder | Dreamweaver CS6 Tutorial

2. Organization Begins With You

Your Dreamweaver site will basically be referencing a folder on your hard drive. With that in mind, I like to create my folder structure first and then link it to Dreamweaver. I like to create a few folders for every website. A “css” folder, an “images” folder, a “js” (JavaScript) folder, and a “fonts” folder just incase we want to use custom fonts on our site (there are multiple ways to serve fonts to your site, this is just one option-we’ll discuss this is a different tutorial). NOTE: The “Root” folder is the “master” folder that we will create to hold all of our website stuff.

Define Local Root Folder | Dreamweaver CS6 Tutorial

3. Create The Folders

Set up a place on your hard drive where you will be organizing your web work and create a new folder for this project. I’m going to name this project “Nameless”. Within that “Nameless” folder I am going to create a folder for “css”, “images”, “js”, and “fonts”. We are now ready to jump into Dreamweaver and setup our Dreamweaver site.

Define Local Root Folder | Dreamweaver CS6 Tutorial

Define Local Root Folder | Dreamweaver CS6 Tutorial

4. Create New Site/Root Folder

There are a few different ways to create a new site, but to keep things simple just navigate to the toolbar at the top of the screen and choose “Site>New Site”.

Define Local Root Folder | Dreamweaver CS6 Tutorial

5. Naming your Site

Dreamweaver will prompt us to name the new site. This can be any name you want. Only you and your web design team will ever see this name, it is never published online. I am naming our new site “Nameless Project”.

Define Local Root Folder | Dreamweaver CS6 Tutorial

6. Find Our Folder

Next, Dreamweaver prompts us to select our “Local Site Folder”. This is the folder that we created to contain our “css”, “images”, etc… folders just a moment ago. Click on the little folder icon to the right and find that folder on your hard drive. Double click the folder to get inside of it and choose the “Select” button.

Define Local Root Folder | Dreamweaver CS6 Tutorial

7. Servers

This could be a topic for an entire tutorial. I’m just going to touch on it very briefly here. Dreamweaver allows you to setup your remote (or local) server here so you can upload files right from Dreamweaver to your web hosting. This is not required to set up a site and start working in Dreamweaver though so we’ll pass over it here. Just know that you have lots of options and can even set up multiple servers for a single web project.

Define Local Root Folder | Dreamweaver CS6 Tutorial

8. Save!

Once you have given your site a name and selected the Local Site Folder, hit the “Save” button to set up your Dreamweaver site. It’s that easy! We’re now ready to add our pages and start adding text, images, video, and anything else your website needs.

Define Local Root Folder | Dreamweaver CS6 Tutorial

9. Create Files, Folders, and Begin Building Your Website

Go Window>Files to open the Files panel. To create a new file or folder, my favorite method is simply right-clicking in the “Files” panel and choosing “New File” or “New Folder”. You can immediately give that new file a name and drag it to whatever folder it needs to be in, or you can leave it right there in the “root” level of your website. Beginner Tip: Your homepage must be in the root level of your site and must be named “index.html” (or index.php, index.aspx, etc… etc… depending on the code you’re writing with.)

Define Local Root Folder | Dreamweaver CS6 Tutorial

Define Local Root Folder | Dreamweaver CS6 Tutorial

 

10. That’s it!

So to recap, Dreamweaver Sites allow you to take full advantage of the management tools Dreamweaver provides. You want to setup your file structure (and it’s great to have a sketch of the pages you expect to be in your website before you even start building) on your hard drive first and connect Dreamweaver to that folder. Create the site, link it to the folder, and build away!

Define Local Root Folder | Dreamweaver CS6 Tutorial

 

Follow Me On Twitter!

Like Tutvid on Facebook!

  • http://webdesy.com/ Kenneth von Rauch

    Thanks a lot for the post and especially the screencast. I’m loving this kind of web dev stuff.

    • http://www.tutvid.com/ Nathaniel Dodson

      Thanks, Kenneth!

  • Chad

    Can you please tell me what image you used to create the blurred background at the beginning of the video?

    • http://www.tutvid.com/ Nathaniel Dodson

      That image is an image I shot off of the Race St. pier in Philadelphia, PA at sunrise one morning.

  • john

    good day sir do you have an e-commerce tutorial sir? can you give me a link?