Join James Williamson for an in-depth discussion in this video Creating new documents, part of Dreamweaver CS5 Essential Training.
- View Offline
After defining your site, the next logical step in creating Web sites is to begin creating new Web pages. As a common task, Dreamweaver has many different ways to create new pages. Some are designed to be fast and result in a new page, based on your default document preferences. Others require more manual input, but give you a wider array of options regarding your new document. In this movie, we'll explore Dreamweaver's New Document creation capabilities, so that you can make sure the pages you're creating are conforming to the standards required for your site.
Now one of the easiest ways to create a brand-new page in Dreamweaver is just to use the Welcome Screen. This middle column right here gives us an option of creating array of different page types. Let's say we want a new HTML page. We're a single click away from getting that. So I'm going to say Create New HTML, and there is my brand-new page. You'll notice that there really isn't anything there except for some basic structure, but we have a brand-new page that we've created that we could begin adding content to. Now I'm not going to save that. I'm just going to go ahead and close it out and cover some of the other ways that we can create new pages in Dreamweaver as well.
If we go over to the Files panel, I can right-click our root directory, and one of the first options is New File. I can go ahead and click on that, and this time, instead of just opening up that page, what happens is that we get a brand-new page over in our Files panel, and we get an opportunity to name that file. So I'm just going to go ahead and name it index.html. Now you'll notice that it didn't ask us to choose the extension. It went ahead and placed the .html on there for us. Well, that had everything to do with our new document preferences. We're going to explore how to set those a little bit later on.
So now we have a brand-new blank page named index.html. That didn't require us to open up a page and then save it. So that might be a little faster. Now you'll notice that both of those options didn't really give us any chances to customize this page or change any of the settings. It just opened up a brand-new page. So what you do if you need a little bit more control? Well, let's go up to the menu. Let's go to File and choose New. Now this gives us a much larger dialog box. Now, this can be a little intimidating at first. So let's just take it a bit at a time.
We're going to start on left-hand inside and take a look at some of the options here. Notice that we can open up a Blank Page, choose a Blank Template, which will create a new template for us, create a new page from Template. So in this case, if your site already had some templates created, you could generate a new page based on those templates. We also have Sample pages in Dreamweaver that you can build pages off of. Now, don't think of these so much as starter pages, more of just sort of a default style sheet. It's already created with some elements on the page. We have this very curious Other category.
Now if you're brand-new to CSS, or if you're just looking for way to sort of speed up creating page layouts, this is a nice way to go, because we have choices of 1 column, 2 column, and 3 column page designs. So if you click on one of those categories, you can actually see a preview of what that Page Layout is going to look like. Now we're going to talk about the CSS starter pages in more detail a little later on. So for right now, I'm just going to None for the Layout. Now some people don't pay a whole lot of attention to what's available to us in the fourth column, but it's probably the most important choice that we're making.
Notice that down here in the lower right corner, we have a pulldown menu for DocType declaration. Now if you're new to Web Design, you are probably unfamiliar with the term DocType. So if I grab that pulldown menu, notice that we can assign a Document Type Declaration spanning all the way from HTML 4.0 through XHTML to HTML 5. So what does the Document Type Declaration do for you anyway? We'll, it's a line of code at the very top of your page that essentially tells whatever user agent you're using what type of code to expect.
That way, it knows the rules for your code. It's going to make sure that it displays it correctly based on correct formatting. Now, the most common Document Type Declaration at the moment is XHTML 1.0 Transitional, although,= we are trending to an HTML 5.0 Document standard, so it's really nice to see Dreamweaver CS5 supporting that. So I'm just going to choose XHTM 1.0 Transitional. Now, there is a one more option that we can choose here. If you're working with a site that's already been established, you may already have external style sheets that you're going to be using for your site.
You could use this link to quickly Attach that Style Sheet to your page before you actually to put content on it. So it's a nice way of saving a little bit of time. I'm just going to go ahead and hit Create. Now we have a brand-new page. If I switch over to Code view, I can see there is the Document Type Declaration that we chose when we created our new file. So now that we understand all the different methods of creating new files in Dreamweaver, and the choices that we're presented with, we're going to explore setting those choices as preferences for any new documents in our next movie.
- 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