Enter your Sign on user name and password.

Forgot password?
Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Creating an Internal or Embedded Rule

  • We will create internal style rules for the about us page on our website
  • Create a new page called about-us.html
    • Open about-us.rtf in the text folder
    • Copy the text & paste it onto the new about-us.html page
    • We will look over the structure and begin to create styles for this page
    • Add the title About Wanderlust Travel
    • Save the page
    • Make the first line read About Wanderlust Travel
    • Convert that line to an H1
  • Note what happens when we do that, the entire content becomes an H1
  • We need to add P tags to the content first
  • Use ctrl/cmd-z
  • Make 3 paragraphs & an H1 on the page
  • We will start by creating a style for the h1 tag
    • Click the + in the CSS styles panel
    • Choose Tag from the first dropdown
    • Show the list of all the HTML tags to choose from
    • Choose 'this document only'
    • Set up our styles within this dialog box & Dreamweaver takes care of adding all the proper brackets, colons, semi-colons and other syntax needed to create a perfect rule
    • Add styles & complete the H1 rule
  • Do the same for the p tag

Creating an Internal or Embedded Rule

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Create New and Save 0:35
  • Add Title 0:45
  • Adding Text Content 1:26
  • Add New CSS Style Rule 5:44
  • Assigning Style Properties 6:56
  • Duplicate Style Rule 8:12
  • Modify Style Rule 8:46
  • Summary 10:17

Transcription: Creating an Internal or Embedded Rule

We are now going to take a look a look at creating internal or embedded style rules for your page.0000

And an internal or embedded style rule only a single page has access to; so the page I place them on--that is the only page that can use those specific styles.0007

This is a great style rule for a marketing page, and there is no reason to clog up your regular style sheet with a whole bunch of extra rules if only one page is going to use them.0021

Let's take a look at how to do that.0033

First of all, we are going to create a new page: so Ctrl/Command+N to do that; we'll keep it in Design View; and our title is going to be about-wanderlust-travel--I'll add that as my title.0035

Now, I am going to go over and do a Save As, and we are going to name this about.0055

Now, I could add -us, and maybe I will do that: let's do about-us.html.0063

Notice, I am adding a dash: that is my styling for our website--any time there are two words, it's lowercase for both of them, with a dash in between.0071

There is our about-us page: now, what I want to do is add some text in here; and within the Text folder in the Course Files for either this lesson or...if you downloaded the Start Files for the entire course, there is a Text folder within that.0083

And within that Text folder, there is an about-us.rtf document: this is the document that we are going to open, and we are going to use that text from there and copy it onto this page, and then we'll add our formatting.0104

Let's go ahead and open that up: it happens to open in Word on my system; most of you should have something available in order to open an .rtf file (which stands for Rich Text Format).0120

What that is going to do is allow me to use Paste Special to copy this information over: so I am going to select the text, copy it, move over to my HTML page, and I'm going to do a Paste Special.0134

This allows me to control how much formatting comes in; an RTF file does contain formatting within it--all I want are the paragraphs, lists, tables, etc.: I don't want any other styles to come in with that file.0151

I'll click OK, and there it is.0169

Now, you can see that this didn't officially get the paragraphs pulling in from that RTF, and that can happen; so I'll go ahead and organize it.0173

Things aren't always perfect when you pull them in, but that is OK: I am just hitting Enter or Return, and then hitting my forward Delete key (if you are on a Mac, not the one that has a little backwards arrow, but the one that deletes forwards).0183

You will find yourself using both of those Delete keys on the Mac; if it is a PC you are working on, you have an official-named Backspace key--so that is what I am using.0200

I'll do the same thing down here; so, I have separated them out into nice, neat paragraphs.0211

I want to make my first line a Header 1: put your cursor in it and hit Ctrl or Command and the number 1--that makes it a Heading 1.0220

Everything we are looking at is default; I now want to save my page; I'll close up the folder.0230

I tend to find people new in the program tend to leave things open, have too many files open, and then it starts getting very confusing: try and keep your Dreamweaver interface very neat initially.0238

Now, I should see this about-us.html file within this folder; notice, I don't, so I'll do a Refresh...where did that end up?--it is clearly not where it is supposed to be.0252

Let me do a File, Save As; and notice, it did not end up in the correct folder; so what I am going to do is back up a little bit here and go out to my C drive, and I'll go down to my Wanderlust Travel and make sure it ends up in this folder.0266

This can happen to you: any time you create a new page and save it, always double-check that it's in that Files panel before you start doing too much with it.0288

In classes, I tend to have people lose their files quite often and have issues: if you just get in the habit of always double-checking...0299

Now, if you end up getting this message, what this means is: if there are hyperlinks or images or other things within your page, Dreamweaver would correct them for you.0307

I'm going to say no, because I don't know where this page was, and I don't have anything on the page anyway; so, I'm just going to say, "No, don't change this page at all."0319

There is my correct about-us; notice, I have two files now with the same name; I will close the first one--otherwise you will find yourself working on that other one accidentally.0330

There is our file: now, let's open up the CSS Styles panel, and what I am going to do within the Styles panel is click the + sign down at the bottom.0343

Now, in case yours isn't quite so handy, you can always go up to Window, and there is that panel for you.0356

So, we have it open: let's hit the + sign here, and what you do at this interface is just start at the top and work your way down.0363

I want to create a tag selector: it is an H1 tag I am going to modify.0373

So now, I need to choose the tag in this dropdown; and I always recommend, until you are extremely familiar with Dreamweaver: use this dropdown.0381

Tag does not show up by default: normally it's a class, and it's very easy, if you just type this in--you end up with a class called H1, not a tag type rule; and all of a sudden, it is not working.0392

I want a tag--I want an H1; and then, I am going to say This Document Only; I'll click OK, and now it's a matter of building the styles we want.0408

Let me go up here; and I'll use...let's see, we want a...let me try Georgia: we'll start out with Georgia.0420

Now, in the font sizing, I am going to use something called an em; and what an em has is 1.0 as the default number; and it may seem to be an odd unit, but that is what we are going to use.0428

I am going to do 1.4 em; and what an em represents is the width of the letter m for the default size for that font.0444

So, this one is going to be quite a bit larger than the default size for a font; we'll take a look at it.0457

Now, I also need to choose a color; so I am just going to click the Color chip; I'll go down here, and I'll make this a...why don't I do a dark orange?--let's see, where can we choose here?--I'll do a dark orange for my heading.0465

That is about all I need; and I'll click OK.0481

You can see, it instantly applies, and I can see my font over here in the CSS Styles.0485

Now, what I am going to do is: I want something very similar for my p tag, just smaller, so--I'll select that H1, and instead of having to go through that whole process one more time, I am going to right-click and say Duplicate.0492

I'll choose a tag; the tag I am going to choose is my p tag for these three paragraphs; so, when we are done, all three should change.0510

This Document Only...and you will see, they did change, and they are rather large...so let's select the p tag, and what I am going to do is set my p tag to .95 ems, a little bit smaller than that 1.0 default size.0521

And .85 to .95 are pretty common sizes in the em category, or em unit, for a paragraph.0539

Now, it has the same color as my other font; and I don't really want that either--I can just click here and adjust it, and let me make it a little bit more of an orange.0549

Now, that is getting pretty hard to read, so I will just put it back to black: there we are.0561

We just created two internal styles; now, how do I know these are internal styles?--this is the giveaway: any time you see the word style with angle brackets in your style panel, that means those are only available for that single page.0567

Now, this says Wanderlust Travels, and I wrote about Wanderlust Travel up here; so let's fix that--I am going to have this say About Wanderlust Travel.0587

Now, I can always take these style rules and move them out onto an external style sheet; Dreamweaver makes that a pretty easy process.0600

But for now, I am just going to style this as it is; we can always adjust it later--that is the nice thing about CSS style rules.0608

We just created two internal or embedded style rules for two HTML tags on our page, using the Dreamweaver interface; and we can now view them in the Styles panel.0617