Dreamweaver CS4 Getting Started
Illustration by John Hersey

Styling text


From:

Dreamweaver CS4 Getting Started

with James Williamson

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Styling text

Formatting text in Dreamweaver requires a slightly different approach than other programs that you might be used to. Unlike a page layout program like InDesign or a word processing program like Word, you don't just highlight the text and begin formatting. That's not to say you can't; just that the long-term results won't be what you are hoping for. Styling web pages is controlled through cascading style sheets. These styles can be stored within an external file linked to your web page, inside the web page itself, or a combination of these two techniques. Dreamweaver offers complete support for CSS, with the creation and management of your styles built into all formatting controls. Let's take a look at how Dreamweaver handles style creation when formatting text.
please wait ...
Watch the Online Video Course Dreamweaver CS4 Getting Started
42m 9s Beginner Sep 30, 2008

Viewers: in countries Watching now:

James Williamson provides a practical introduction to Adobe's do-it-all web design and development tool in Dreamweaver CS4 Getting Started. He shows how to generate standards-compliant XHTML and CSS, as well as rock-solid PHP, ColdFusion, ASP, AJAX, and more, using Dreamweaver's developer-friendly Code view and WYSIWYG Design view. From creating basic page layouts to embedding multimedia, James shares techniques for publishing a finished site quickly and efficiently. Example files accompany the course.

Topics include:
  • Defining and structuring new sites
  • Adding and styling text, images, video, Flash, and more
  • Previewing work in progress using multiple browsers
  • Integrating assets from other CS4 applications
  • Uploading and managing finished sites
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Styling text

Formatting text in Dreamweaver requires a slightly different approach than other programs that you might be used to. Unlike a page layout program like InDesign or a word processing program like Word, you don't just highlight the text and begin formatting. That's not to say you can't; just that the long-term results won't be what you are hoping for. Styling web pages is controlled through cascading style sheets. These styles can be stored within an external file linked to your web page, inside the web page itself, or a combination of these two techniques. Dreamweaver offers complete support for CSS, with the creation and management of your styles built into all formatting controls. Let's take a look at how Dreamweaver handles style creation when formatting text.

Here we have our index page open, and you can see that most of the page is styled, but in this section we still need to add a little bit of styling. Well, this is our main content section, and understanding the structure of your page is very important to controlling how it's styled. I am going to click inside my first heading here. I can see in this area called the tag selector; you will notice, it's right down here below our open document. It shows me the structure of the page in relation to where I am. I am inside a heading 1, which is inside of div named mainContent, which is inside another div called container, which is inside the body tag.

Now, understanding this structure means that we can create rules that are very specific for this heading and no other headings. We do that by writing what we call a contextual or descendant selector. Now, if that sounds complicated, don't worry. Dreamweaver help us along the rule creation process by writing these selector for us, which is really nice. So I can go down to my Properties inspector. Notice that it says, your targeted rule, if you started working right now, would be mainContent, but if I highlight some of the heading 1, notice that it would target a new CSS rule. So it responds to where you are focused and what you have highlighted.

I am going to click Edit Rule, and it's going to allow me to create a new one. Now I have to tell it which type of selector I want to use. In this case, I want a compound selector. This creates a descendant selector just like we were talking about. Notice that Dreamweaver goes ahead and resolves that for me. I could make it less specific or I could make it more specific, that's up to me. But here Dreamweaver gives me the option. I can also choose exactly where I want this rule placed and I am going to go ahead and place it in my existing external style sheet. Now, when I click OK, I get a series of formatting options that should be fairly familiar to you if you have ever worked with another program; what font do you want to use, what size do you want it. So here we get back into an area that most people are comfortable with.

Well, for the font-family, I am going to go to pulldown menu and I am going to choose Trebuchet. That's what I want my headings to be. For color, I can grab the color chip here and choose a color from the swatches, or if I happen to know the hexadecimal value of the color I want, I can type that in. So I will type in #1B9D95. I can see that's going to give me sort of an aqua color. Well, I am going to go ahead and click OK and you can see the heading changes to exactly what I want. Now at this point I can edit the selector as well. I didn't change the size, but I think that's a little too big. So I can come down into my Properties inspector and as I click inside of it, I can go ahead and change the size of this. So I can select the targeted rule and I can go ahead and click inside that and say, "No, I want that to be 1.6 ems," and as soon as I do that, the heading changes in size. Perfect.

Now, the Properties inspector is not the only place that Dreamweaver allows you to create style. In fact, most of the work that you do with your styles will be done through this panel, the CSS Styles panel. This panel is considered the central nervous system or hub for all of the style interaction in my document. So I have two tabs; the Current, which shows me what I am currently looking at on my page, and the All, which shows me all the styles. As a matter of fact, you can see the style that we just created. So now I want to create a style that controls the paragraphs and I can do that through the CSS Styles panel just as easily. I can go down here to the New CSS Rule, click, and I see a dialog box that looks very similar to what I saw before. I am just going to go ahead and edit this manually. If our last one controlled our heading 1's, I want this one to control our paragraph. So I'm just going to create a rule that says #mainContent p.

Again, Dreamweaver can sort of help me out with how this rule needs to be structured. I will define that in the external style sheet and I will just go ahead and click OK. Here I see the same exact dialog box I saw earlier. We will go ahead and choose Arial for the Font. We will size it at 0.9 em. Dreamweaver lets you know what units of measurement you have available to you. There's pixels, points, em. You have a lot of choices when deciding exactly which unit of measurement to use. I will also do some line-height; that will give us some line spacing. So, we'll do 1.4 em for that, little bigger. We will go ahead and make the color black, so #000.

Now, soon as I click OK, my paragraph restyles and reformats as well. Now, we have got one little last thing we want to do here. I noticed that the secondary heading hasn't styled either. The past two rules that we have created, we have created from scratch, but if you have got an existing rule, it's very similar to what you need. You don't really need to create it from scratch; you can just duplicate it and change it. So I am going to go to the mainContent rule over in my CSS Styles panel. I am going to right click it, that will be Ctrl+Click on the Mac, and I will just choose Duplicate. Now, when I do that, it says "Okay, well, what selector do you want to have these properties?" I will just choose the h2, which will be my subheadings, and click OK.

It creates a duplicate rule and my h2s now look exactly like my h1s. I can make a very quick edit by clicking on the rule, and then changing the size. Maybe I am going to change this one into 1.2 em. As soon as I do that, my secondary headings are a little smaller. So the mainContent is now formatted and matches the rest of our site stylistically. Well, Dreamweaver makes formatting our text very straightforward and efficient. I think that's easy to see than having a full understanding of CSS is important when planning out the look and feel of your web pages. If you are new to CSS, using Dreamweaver's starter pages and Style Creation dialog boxes can help speed up the learning process. Even better, as you learn more about writing and utilizing CSS, Dreamweaver actually becomes easier to use, since Dreamweaver is built around CSS based workflows.

There are currently no FAQs about Dreamweaver CS4 Getting Started.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

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.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS4 Getting Started.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

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

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

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:

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:

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

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.