Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Structuring and defining sites

From: Dreamweaver CS4 Getting Started

Video: 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.

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.

Show transcript

This video is part of

Image for Dreamweaver CS4 Getting Started
Dreamweaver CS4 Getting Started

9 video lessons · 42046 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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

Congratulations

You have completed Dreamweaver CS4 Getting Started.

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


OK
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 ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
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 lynda.com 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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com 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 lynda.com.

Sign up and receive emails about lynda.com 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.