Join James Williamson for an in-depth discussion in this video Defining a new site, part of Dreamweaver CS5 Essential Training.
When you start working on a new project in Dreamweaver, the first thing you should do is define a site. The site management capabilities of Dreamweaver are tied directly into the site's definition. Without defining a site, Dreamweaver won't be able to resolve links, check related files or help you manage your assets. The best part about defining sites in Dreamweaver is how simple the process is. In fact, you only need to know two things to get started: first, where the local root directory is located. Now the local root directory is going to be the folder on your local hard drive or machine where your site is located.
Second, you need to know what you want to name the site, and that's really all you need to get started. So I've got Dreamweaver opened here, and I don't have any sites defined. How do I know that? Well, if I look at the Files panel, I just see a link out to the desktop. My pulldown menu doesn't give me a listing of any sites. Now creating a site in Dreamweaver is extremely easy and there are a lot of different locations for us to do that. First, we could go up to the menu. We could go to Site and choose New Site. So that's one location. Next, we can come to our Application toolbar, to our Site Management, and we can choose New Site there as well.
We also have the ability, on the Files panel, to create a new site. So if I grab the pulldown menu here, notice that one of my options is Manage Sites, where I could choose a New Site option. Probably the easiest way to define a new site is right here in the welcome screen. So right down here where it says Create New, we could choose Create New Dreamweaver Site. I'm going to go ahead and click that. Any of those options will give us the exact same dialog box, which is the Site Setup dialog box. Now this has been simplified a little bit from previous versions, so if you're used to using Dreamweaver, and you've used other versions of it before, this is going to look a little different.
Well, they've streamlined the process, and they've made it a lot easier. So I'm a big fan of this new site dialog box. The first thing I'm going to do is name my site, and I'm going to go ahead and name it Explore California, because that is the site that we're going to be working on. The next thing Dreamweaver wants to know is, "Hey! Where is your local site folder?" Now remember, this is going to be the root folder on My Computer or a Local Network. Wherever I'm going to be doing my local development, that's what I need to point this to. So I'm able to just go ahead and click the Folder icon to browse for that particular site.
Now if you're working with the exercise files like I am, I've copied them over to my desktop. So I'm going to go to my Desktop, find my Exercise Files and open that up. I'm going to open up the Chapter_03 folder and go to 03_03. That's the current movie that we're on, and I'm just going to open that up and hit the Select button. Now on the Mac, it'll say Choose. On the PC, it'll say Select, but they mean exactly the same thing. So I'm just going to go ahead and select. Now believe it or not, that is all I need in Dreamweaver to define a local site.
Now there is more information surely that we can fill out. If you'll notice, we have a set of categories over here on the left-hand side. Servers give us an opportunity to add remote servers. These could be testing servers, production servers or live Web servers. Now we'll cover head and set those up a little bit later on this title, but you'll do it in the exact same dialog box. We also have Version Control. If you're using a product like subversion, for example, to do Version Controls of your site, that's where you would go to set those settings up. We also have the Advance Settings area where we can choose more information, like the Default Images directory, Resolved Links, choose Cloaking to choose which files get uploaded and which files don't.
There's a lot of extra information there. But again, that's not what you need in order to define your first site. You only need those two things. Now we'll talk about most of these settings a little bit later on. I'm going to go back to my initial Site Setup dialog box and choose Save. What Dreamweaver will do now is it'll cache up the site. It'll happen a little quicker for some sites; for larger sites it may take a little bit longer, but now over in the Files panel, I can see there's my Explore California site. Now if I define multiple sites within Dreamweaver, I can use this pulldown menu to switch between one site and the next.
But right now, I simply have the single Explore California Web site defined. You'll also notice, and I'm just going to move this panel up a little bit, you'll notice that I'm seeing the files and folders within a particular directory that we defined when we created the site. So as you can see, defining a site in Dreamweaver is an easy but extremely necessary step required for the start of any new project. You can give Dreamweaver all the site information at the very beginning of the project, or you can do what we just did; wait and define things like Remote Information at a later date.
That's especially helpful, if you don't have those settings when you're starting out with your new site. Just be sure to make defining a site the first step in any new Dreamweaver project.
- Defining and structuring a new site
- Creating new web documents from scratch or from templates
- Adding and formatting text
- Understanding style sheet basics
- Placing and styling images
- Creating links to internal pages and external web sites
- Controlling page layout with CSS
- Building and styling forms
- Reusing web content with templates
- Adding interactivity
- Working with Flash and video
Skill Level Beginner
Q: After creating a website following the instructions in the course, the header background graphic appears correctly in all browsers except Internet Explorer 6 and Internet Explorer 7. The graphic works properly in IE 8. What can be done to make the graphics appear in IE 6 and IE 7?
A: To make the header background graphic appear, wrap the header div tag in another div tag and give it an ID like “mainHeader.” The problem stems from a bug in Internet Explorer that prevents the browser from dealing with absolutely positioned elements that are right next to relatively positioned elements. Following the steps above should solve the problem.
Q: In the tutorial, the author links the Tool Tip to the word "More" at the bottom of the thumbnail photo field. I can't figure out how to place the <a> "More" on the thumbnail photo field.
If you were manually typing the text in, you could select the image, hit the right arrow button, and begin typing. The text should then appear on screen.
Q: In this movie, you are making changes to the HTML in order to customize the text layout on your page (i.e. h1, h2, and h3 tags as well as strong and em tags). I'm wondering why you are not using CSS to do this (i.e. font-size, font-weight). Do you typically use one method, or is it customary to do use both in a layout, and if so, what guidelines would you suggest to determine which to use when?
A: We modify the page's structure through the use of h1, h2, and other heading tags. So when we are choosing heading levels, we're not concerning ourselves with typography; we're establishing page structure. A heading is chosen to denote the level of importance for the heading, not typography.
CSS should always be used for presentation, not HTML.
Q: In the “Understanding ID selectors” movie, the author states that only one ID tag can be used per page, but then he adds two ID tags. Can you please clarify this for me?
A: You can use as many IDs per page as you wish. They just must all use a unique name. Therefore if you assign an element the ID of "header" no other element on THAT page may use the same ID.
Q: I noticed that in this course, the instructor uses this code on his CSS external sheet: @charset "UTF-8"; I was under the impression that this code wasn't necessary. The W3.org site is unclear on the matter. Is it necessary? Is it a best practice? Is it an older form of CSS?
A: The characterset attribute is added automatically by Dreamweaver, and there’s no practical reason to remove it. While it's not needed (the HTML page should indicate which encoding to use for the page) it is helpful if the CSS file is ever imported or used on a page where the characterset isn't specified. Think of it as a safety net for characterset encoding. Not necessary, but not harmful either.
Q: I need to add captions below images that I insert in pages of text. I played all the lessons in Chapter 5 (Adding Text and Structure) but none dealt with captions. I hope the author has an answer or can refer me to a source.
A: In HTML 4 and XHTML 1 (which is what Dreamweaver CS5 uses by default), there wasn't really a way to add captions below your photos. Most web authors would "fake" captions by having paragraphs of text below their images and using CSS to position and style the captions in the desired manner. Many would use a class such as .imgCaption to control the styling. To do this you would essentially position the text underneath the image through CSS (often by grouping the image and the paragraph in a div tag) and italicizing the text.
However in HTML5, there are new elements that allow us to associate images and their captions, the figure and figcaption element. Our author James Williamson just finished a course on HTML5: Syntax, Structure, and Semantics which details how to use it.
HTML5 Doctor also has a nice article on the figure and figcaption elements at http://html5doctor.com/the-figure-figcaption-elements/.
1. Getting Started
2. The Dreamweaver Interface
3. Site Control
4. Creating New Documents
5. Adding Text and Structure
6. CSS Foundations
7. Controlling Typography
8. Working with Images
9. Creating Links
10. Controlling Layout with CSS
11. Working with Tables
12. Working with Forms
Reviewing form design3m 2s
Creating accessible forms7m 33s
Setting form properties4m 6s
The fieldset and legend tags4m 32s
Inserting text fields5m 58s
Inserting list menu items5m 26s
Inserting checkboxes7m 50s
Inserting text areas4m 12s
Inserting submit buttons3m 37s
Form element styling8m 52s
Styling form layout11m 49s
Adding form interactivity2m 47s
Using Spry validation widgets12m 49s
13. Building Templates
14. Adding User Interactivity
15. Working with Flash and Video
16. Managing Sites
- Mark as unwatched
- Mark all as unwatched
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.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.