Subtitles of the Movie

We now arrive at Step 5 of the course Project, Adding Text. If you'd like to skip to this point and avoid all the work that's been done previously go ahead and open up this file, project step5.htm from the project folder which is inside the Work Files folder. The first thing you want to do is make sure that you've laid out all of your DIV Tags correctly over your template. If you're using my template it would look like this. Also make sure that your backgrounds are colored. This one here is not colored. The way you would do that is just click on the upper left-hand corner of the square there to select the DIV Tag and then here in the Bg color chip move over right on top of the Tracing Image Template and notice that it changes to the blue color and then you can fill that with the correct color. So I have the blue here from the header. I have the magenta purple for my menu. Also make sure that your DIVs are labeled like mine are here. Makes them easier to work with. I have colLeft header, menu, header, column, bodytext is here, image, bodytext is actually down here. Just label these so you know what they are. It looks like this is the byline right here. You can also click in the upper left-hand corner, that's actually the page title, the byline is this one. Click on the upper left-hand corner and the name is right there in the Properties Inspector. That's where you can rename these if needed, so go ahead and name those, color them. Also, in terms of adjusting the size, you can use the Properties Inspector. Notice, for example, these two DIVs are off a little bit so I'm going to select the header. I can also double-click on it here in the CSS Styles Panel and go to Positioning and notice that this header is 1000 pixels wide and it's 325 pixels from the left edge. So let's go ahead and use that as a guide to adjust this menu. Notice that this one is 1003 pixels wide. You can either use the CSS Styles Panel or, more conveniently here, the Width Property in the Properties Inspector. Let's set its left coordinates to 325 to match the other one. 325, 1000 and now notice that those line up perfectly. You can see that I have a mismatch here in these two, the page title and the byline are a little bit off. Let's use the page title as the guide here. This one is 300, 572 pixels wide and let's make this 535. Make it nice rounded numbers. 535 and 572. This one here is - let's actually make that 575, how's that. 575. You can see that I'm just adjusting these numerically and the left edge on this one is 530. Those are more rounded numbers so let's use that one. Let's do 530 here. 530, 575 are the two numbers and notice that those also now line up. Let's go ahead and save our file. So if you'd like to start at this point so you don't have to do all the DIV work go ahead and open up the project step5 file. Better, however, to run through the project step4 movie and get yourself to this point and practice working with these DIV Tags, coloring them, laying them out, positioning them and so on. Once you have all of your divs colored, aligned and arranged and sized correctly and everything is in its proper place here, you're ready to start adding content. Let's start by adding text content. There are several ways to get text into your Dreamweaver documents. The most straightforward way is just to type the text directly into your divisions or table cells or whatever other element you want to add the text to. Type right into here. This is actually my page title. Notice the formatting is plain. Actually, it's the default browser font styling which is Times Roman 12 point, I believe, but notice that my Properties Inspector says Format: None, Class: None. The idea is the page title here, the division it's going into, that's OK. So you want to have very plain formatting when typing in your text. Now that's not very efficient if you have a lot of text to type in. Maybe it's fine for a title or a heading, but to get the majority of your text in you're going to want to use a text editor like Notepad or SimpleText. Open up your text editor. All the text that you're going to be cutting and pasting, which is the other way to get text into Dreamweaver, should go through your text editor. That will clean out any formatting that may be coming in with the text from a word processor or even from the browser. There's a variety of ways to get this text from a word processor from a website, or you can generate placeholder text by going to Google and typing in the search box lorem ipsum. That will take you to a series, a collection of text generators, lipsum generator, these are really convenient for generating as much placeholder text as you need. Here's a paragraph of lorem ipsum text. Let's go ahead and take the first little bit there by Edit, Copying and Pasting that, or using the keyboard command Ctrl-C. Let's go back here to the Notepad and Ctrl-V or Cmd-V and there's my text. I'm putting it in here just to strip it out of any formatting that you might have. I don't think there was any formatting coming from this particular Web Page, but it's better to be safe than sorry. Once this is in memory and saved from your text editor - let's go ahead and let's cut it out to make sure that I get all of it. Now I'm going to open Dreamweaver back up and right here in my bodytext here I'm going to choose Edit, Paste Special is probably the best way to do this and let's just do, again, just to double check that there's no formatting, Text Only, click OK. There is my text. If you want you can break this up into smaller paragraphs, but all other formatting you want to wait until we start to use CSS to style this text which will be covered later in the tutorial. For example, notice that there's probably too much space up here at the top and not enough space over on the left edge and the right edge, but try to refrain from doing much formatting at all and certainly don't use the Properties Inspector to format anything. I'll be covering in detail later exactly how you should be formatting all this text. For now, simply get the text into the various sections that you've laid out by either typing, or cutting and pasting, adding your paragraphs if needed, but very little else if any other formatting. Go ahead and fill out each of the sections of the page as I've done here. Feel free to use lorem ipsum placeholder text. I've also used placeholder text, notice, for form elements that will go in here, graphic elements as well as menus and links, all this just holding the place of more content that will come later. So once all your text content is in go ahead and save this document as project underscore step6.htm, close the file and then proceed on to the next movie.