Join James Williamson for an in-depth discussion in this video Creating new documents, part of Dreamweaver CS5 Essential Training.
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
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/.