Join James Williamson for an in-depth discussion in this video Structuring and defining sites, part of Dreamweaver CS4 Getting Started.
Although you could just open up Dreamweaver and begin creating new pages, it wouldn't be very long before you realize you have a mess on your hands. Like any new project, the success of a new website has a lot to do with the planning you put into it beforehand. Websites, at their most simple, are merely a collection of files and folders. The topmost folder is referred to as the root folder, and contains all the files necessary for the site to function. Often sites will have subfolders that contain asset files, such as images or external scripts, or they could contain a subsection of the entire site. Wwhile you don't have to have the entire site mapped out prior to starting it in Dreamweaver, it doesn't hurt to have as much of the site planned out as you can, and have an existing directory structure ready at the beginning of the process.
So before we define a site in Dreamweaver, let's take a look at the directory structure I have already established for our sample site. I'm going to minimize Dreamweaver, and then on the Desktop, I have a folder here called Groundswell; that's going to be our root directory. It doesn't really matter what you name this folder, just so that you name it something descriptive that tells you what it is. Now, once I open up this folder, notice that we have a collection of HTML pages in here. We have some existing Flash movies that are being used. We have a folder for external scripts, a folder for images, and then we have these other folders, _source and _CSS, that are holding other assets for us. So we are categorizing all these. Now, we don't have any subdirectories on our site yet, so this is a really basic site structure.
Now, a lot of the sites you will develop won't be quite this structured to begin with. You may even just start off with an empty folder and then begin to create your folder structure in Dreamweaver. That's fine. Approaching it this way, where you already have some existing files and there is already a structure in place, is fine as well. It doesn't really matter. What matters is that the first step in working on any project in Dreamweaver should be to define a site. So I am going to jump back into Dreamweaver, and we will talk a little bit more about defining a site. Defining a site lets Dreamweaver know where your development files are located.
It allows Dreamweaver to manage and control those files. Without a defined site, Dreamweaver won't be able to resolve links or add certain types of functionality to your pages. Defining a site also allows you to instruct Dreamweaver as to which type of testing server you are using, if you are building dynamic pages, and lets Dreamweaver know where you need to upload the files when you want pages to go live online. So let's define our site. This is very easy to do, and there are lot of places to do it inside Dreamweaver. Notice for example on the welcome screen, we are able to define a new Dreamweaver site right from here. We can also go up to our Application bar menu, and choose New Site from here. We could go our Files panel and click on Manage Sites and choose a New Site from there, or we could also go to the Site icon on the Application bar and choose New Site.
So there are a lot of different places where we can do this. So I will choose New Site, and the New Site dialog box comes up. Now, here we have two tabs; we have the Basic tab and we have the Advanced tab. The Advanced tab offers us a few more items of functionality than the Basic tab does, but there is nothing really to help a person who is just getting started go through this, so we are going to use the Basic tab. This gives us almost a wizard-like interface, where it's asking us questions and we are answering it and it will go ahead and define the site for us. So it wants us to name our site, and I am going to go ahead and name it groundswell.
Now, you can name your site anything you want it to be named; it doesn't matter. Just something that's descriptive for you. Now, I don't know the http address of my site yet, so this is actually optional. If I knew it, it would help me resolve absolute links on my site, but since I don't know it, it's not a big deal really. I am going to go to Next, and now its saying, "Do you want to use a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP?" This site is not going to be a dynamic site, so I am going to say no. The next question is, how do I want to work with these files? Do I want to edit them locally on my machine, or do I want to edit them on a server using a local network? Well, I am going to be developing the site locally on my machine, so that's what I am going to choose. Once I have made that decision, I have to tell it where to find these files.
So I am going to browse out to the Desktop, and as soon as I do that I find my folder Groundswell. I am going to open this up, and then choose Select. Now, on the Mac, you would highlight the folder and select Choose; on the PC you open the folder up and you choose Select. So I hit Next, and here it's asking me, how do I connect to my remote server? So if I had that information from my IT department or from my hosting company, I could enter in my FTP information, like my login and my password and the FTP address. That's all the information you will get from your hosting company or from your IT department. Or if your company was hosting its own website, you could connect across a local network as well. But since I don't know any of that information for this site, again, it's optional, and I am just going to choose None.
I will hit Next, and it gives me a summary of my site. Here is the name of your site, here is the local root folder. I will set this up later for my remote info, and notice for testing server it says, "I'll set this up later." That doesn't mean you have to; we will never have a testing server for this site, but it's just giving you the option of doing it later. So I will choose Done, and there is our site. Now, once you have defined a site, the view in Dreamweaver changes dramatically. Notice over here on the right hand side, how in the Files panel, we now have access to all those files that we saw earlier. We can now manage and organize our site through Dreamweaver. In fact, if you plan on moving files around, do it through Dreamweaver and not your operating system.
If you do it through Dreamweaver, Dreamweaver will automatically update any links or assets contained in your pages. If you move the page around through the operating system, Dreamweaver can't track it and won't prompt you to update the page. So let's see that in action. I am going to go ahead and create a new folder, and I will call this new folder, legal. We have some legal documents in our site, like our privacy statement and our terms of service. So we are going to create a little subdirectory to put those in. Go ahead and grab both of those and simply drag them into our brand new folder. Now watch what Dreamweaver does. Dreamweaver says well, all these pages are linked to that, the link won't work anymore. Do you want me to go ahead and update it? And we'll go ahead and click Update. So again, this is just something that Dreamweaver takes care of for us.
Now, that we have defined the site, we can begin working on our web pages and building our site around the established structure. Again, defining a site is the first step in any project within Dreamweaver and as we can see, it's incredibly easy to do.
- Defining and structuring new sites
- Adding and styling text, images, video, Flash, and more
- Previewing work in progress using multiple browsers
- Integrating assets from other CS4 applications
- Uploading and managing finished sites