Video: Inserting text

Adding text to your web page is pretty simple in {italic}Dreamweaver CS3.{plain} Just like with a regular word processor you just start typing text and the text appears on your page. This movie we're going to add some text to the page we were working on in the previous movie. I'm going to click my cursor on the image that we added, and hit the right arrow key on my keyboard to put my cursor to my immediate right of that image, and then I'm going to press Enter or Return on my keyboard to create a paragraph break. So you can see my cursor is now flashing down here. Now we'll type some text and I want to type a decent amount of text because we want to have a good amount of text to work with later.

In Dreamweaver CS3 Essential Training, instructor Garrick Chow delves into the many powerful features of the latest version of this powerful web design application. He covers everything from the simplest basics of using Dreamweaver CS3 to applying it to develop a fully interactive, accessible site. Garrick explains the new interface features, and demonstrates how to create, edit, manage, design, and publish a professional website with Dreamweaver CS3 and complementary applications. Exercise files accompany the training.

Inserting text

Adding text to your web page is pretty simple in {italic}Dreamweaver CS3.{plain} Just like with a regular word processor you just start typing text and the text appears on your page. This movie we're going to add some text to the page we were working on in the previous movie. I'm going to click my cursor on the image that we added, and hit the right arrow key on my keyboard to put my cursor to my immediate right of that image, and then I'm going to press Enter or Return on my keyboard to create a paragraph break. So you can see my cursor is now flashing down here. Now we'll type some text and I want to type a decent amount of text because we want to have a good amount of text to work with later.

I'll add one more line as its own paragraph by pressing enter again and let's type one more line here. Okay, so there we have a good amount of text. Now, you might be wondering why I didn't have to specify font or font sizes, yet the text cam out looking the way that it did. That's because the appearance of this text is being defined by the cascading style sheet that we dragged in, in the previous movie. In fact, you can see the files sitting right here in my Files panel, that styles.css file. That's the file that's telling this page how to display text. We'll talk a lot more about CSS in the chapters on Typography and Cascading Style Sheets.

Alright, let's add a little bit more text to this page. Let me scroll down a little bit here. I'm going to click outside that table so I can see the box down here. What I want to add here is some text navigation. Now, even though we have the buttons at the top of our page, here it will eventually become links to other pages in our site. It's still usually a good idea to have redundant text links on your front page, just incase someone is visiting your site with images turned off or if your images don't load for some reason. With text links, your visitor will always be able to quickly navigate your site. So I'm going to click my cursor down here next to the Site Design by lynda.com.

Now, I want to add a line of text links above this credit line here, but I want the two lines of text to stay close together for aesthetic reasons. Now if I press Enter and I create a line here, I get a paragraph break, which means I have all this extra space between the two lines. Notice that there's all this gap of space in here, just like I have up here when I pressed Enter. Which is what I wanted in this case, but down here I want these two lines of text to stay closer together. Let's delete that and delete again. So, instead of just pressing Enter there this time I'm going to hold Shift and then press Enter.

This creates what called a line break. You can see that the lines of text are much closer together. So, there's my flashing cursor and let's go ahead and type "About Us |," and I'm going to use what's called a pipe character, which is that vertical line that usually appears above the back slash key. There's our vertical line there. Another space, we'll type "About Us | Our Products | About Tea | Brewing Tea".So, because I used a line break, the second line is directly below the first one instead of there being, in this case unwanted space between them.

Just to expand on this point a little, if I go and look at the Code I can see that the tag used here to denote a line break is this tag right here. While the tag to denote a paragraph break is a p tag, which we can see right here, there's a closing

tag, there's another opening

tag.

So, a paragraph break is denoted with a

. A line break is denoted with a tag right there.

This is an important distinction to make. Every time you press the Enter key, you are creating a new paragraph, but when you press Shift, Enter {italic}Dreamweaver{plain} considers the next line to be part of the same paragraph just on a new line.

This distinction becomes especially important when you start formatting your text and we'll check that out in the Typography chapter. For now that's how easy it is to add text to your pages. In the next movie we'll start playing around with aligning your text and images.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.