Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Structuring and defining sites


Dreamweaver CS4 Getting Started

with James Williamson

Video: Structuring and defining sites

Structuring and defining sites provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS4 Getting Started
please wait ...
Watch the Online Video Course Dreamweaver CS4 Getting Started
Video Duration: 6m 9s42m 9s Beginner Sep 30, 2008

Viewers: in countries Watching now:

View Course Description

James Williamson provides a practical introduction to Adobe's do-it-all web design and development tool in Dreamweaver CS4 Getting Started. He shows how to generate standards-compliant XHTML and CSS, as well as rock-solid PHP, ColdFusion, ASP, AJAX, and more, using Dreamweaver's developer-friendly Code view and WYSIWYG Design view. From creating basic page layouts to embedding multimedia, James shares techniques for publishing a finished site quickly and efficiently. Example files accompany the course.

Topics include:
  • 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
James Williamson

Structuring and defining sites

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.

There are currently no FAQs about Dreamweaver CS4 Getting Started.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Dreamweaver CS4 Getting Started.

Return to your organization's learning portal to continue training, or close this page.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts. provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now

A trusted source for knowledge.


We provide training to more than 4 million people, and our members tell us that helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.