Viewers: in countries Watching now:
Discover how to build web sites, prototypes, and more in this course on Adobe Dreamweaver CS6. Author James Williamson shows designers how to take control of their site by properly naming and structuring files and folders; how to create new documents and web pages from scratch or with starter pages; and how to add content such as text, images, tables, and links. James also provides a background on the languages that power projects built in Dreamweaver—HTML and CSS—and introduces the programming features in the application, for developers who want to dig right into the code. The last chapter shows how to finesse your project with interactive content such as CSS3 transitions and Spry widgets.
After defining your site the next logical step in creating websites is to begin creating new webpages. Since it's such a common task Dreamweaver has many different options for creating new pages. Some are designed to be fast and result in a new page based on your default document preferences, while others require more manual input, but give you a wider array of options regarding your new document. In this movie we will store Dreamweaver's new document creation capabilities so that you can make sure the pages you're creating are conforming to the standard required for your site.
So the first option I want to show you guys for creating a new page is one that you've probably already used if you've been watching the title up till now. You can go straight to the Welcome Screen and just choose Create New HTML. Now if I click that notice that I get a brand-new page open up. But Dreamweaver didn't offer me any choices. It basically created a brand-new page based on a set of preferences that, at this point, I didn't have any input in. Now of course, you can set those preferences yourself and I am going to show you how to do that a little bit later on in the chapter.
But what if you want a little bit more input in to the options surrounding the document that you're creating? Well, to do that you are going to use a slightly different method of creating a new page. So I am just going to go ahead and close the page that I just created without saving it. Now I am going to go up to the menu and go to File and choose New and you will notice that the shortcut key for that is Ctrl+N, which on the Mac will be Cmd+N. And I want to point out that, later on when we look at our preferences, I am going to show you an option regarding that keyboard shortcut too. So, remember this for later on in the chapter.
Okay, so I am going to go ahead and select that and that brings up the new document dialog box, at first glance this dialog box is almost overwhelming; there are so many choices here. So I just want to break them down for you a section at a time. If we start on the left side of this dialog box, notice that we have different types of pages that we can create; Blank Pages, new brand-new Template, Fluid Grid Layout, which is new in CS6, Page from an existing Template if your site contains templates, they have a couple of Sample Pages to get you started from.
I am going to stick with just a static HTML page type and then that takes me over to the third column, which in this case, is layout. Anything past this None option right down through here, those are Dreamweaver's starter pages. And I am going to talk about those in more detail a little bit later on in the chapter. But for right now, those just give you sort of a head start, if you will. So if you need a head start on the Layout or your CSS skills aren't particularly strong and you want to make sure that you are using really solid starting point for your styles in terms of your layout.
These are some really good choices, but for right now I'm just going to choose Layout>None. So, you might be saying, well, up till now you really haven't made any choices at all, so what's different than just going to the Welcome screen and hitting New. Well, over there on the right-hand side we have another set of options and these options essentially affect the document itself. So the first option that I want to go down and take a look at is the DocType. Now the DocType is a tag that goes right above the HTML tag and it essentially tells the browser what type of document that it's going to be parsing.
Based upon the standards or the actual version of the HTML used, the browser knows which parsing rules to use. But more importantly, the only thing the DocType really does is it triggers Standards mode or Quirks mode in browsers. There is a whole long convoluted story that I don't think I have time to get into right now. But suffice to say that what Dreamweaver is asking you here is which version of HTML do you want to use? If I grab the pull-down menu I can see that we go all the way from no DocType declaration at all, to from HTML 4.1, all the way up to XHTML.
Now HTML 5 is available as well, that's a new standard from HTML and it's pretty much what I use my default now. So I am just going to go ahead choose HTML 5. The next thing Dreamweaver is asking me is do you want to attach a CSS file? So if you are about the create a brand-new HTML page and you already have part of your site finished and you have some external CSS already written for your site, you could go ahead and attach that CSS file now. Now you could also go ahead and create a stylesheet here as well if you just wanted to go ahead and do both of those things at the same time.
So if I click Attach Style Sheet, now at first it just looks like you can just Browse out for a file, but you are also free to go ahead and create one here as well. So I am just going to Cancel both of those. We will take a look at that process in more detail little bit later on. So in addition to the Attached CSS file, we have a couple of other options down here as well, and the one that I want to point out is Preferences. We are going to take a look at those preferences in the movie later in this chapter, but when you bring a document if you've forgotten to set certain preferences, you can go ahead and access them directly from this dialog box, which is extremely useful.
Okay, I am going to go ahead and click Create and now you can see that the code that's generated by Dreamweaver is actually very different than the code that was generated by the Welcome screen. So you see here it's using the HTML5 document type, it's using HTML5 character encoding. So the choices that I made within the new document dialog box resulted in a dramatically different document. For example, if I close this again, go back to Welcome screen and create a new HTML file, you can see how different that code is. And it's just based upon the DocType Declaration that you want for that document, the character encoding you are doing, those sorts of things.
Now if I close this, I mentioned before that you could use the keyboard shortcut of Cmd+ or Ctrl+N to create a new document. Now if do that if I just hit Ctrl+N, you will notice it's a new document dialog box comes back up again. Now as I am going to show you a little bit later on in Preferences, you can disable that if you'd like. So once you set your Preferences, all the options that I showed you over here in terms of the DocType Declaration and that sort of thing, you can set those as preferences so that every time you create a new document, it's exactly what you're looking for without having to go through this dialog box every single time.
So I am going to go ahead and Cancel that. Now that we understand all the different methods of creating new files in Dreamweaver and some of the choices that we are presented with, in our next movie we are going to explore setting those choices as preferences for any new documents that we create.
There are currently no FAQs about Dreamweaver CS6 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.