Click on any phrase to play the video from that point.
[Classroom] [Basic Site Layout and Navigation in Dreamweaver CS5]
In the previous lesson, we stylized a basic webpage,
and quite frankly, it's looking pretty good.
But I want to go beyond what the Page Properties panel gives me,
and I want really sort of extreme control over my content and how all of my content looks.
And in order to do that, I'm going to have to use cascading style sheets, or CSS, as it's known.
[CSS] [Cascading Style Sheets]
[A language used to describe the design of an HTML document]
What are cascading style sheets?
Well, they are basically a style sheet language
that is used to describe the design of an HTML document.
So, it describes the design.
In that CSS, you can control all visual aspects of the contents,
whether it's fonts, the colors, the layout, position of things.
It's quite robust what it can do, but it goes beyond just that.
What you can also do with that CSS is you can separate it from the content of your page,
and that is really handy because you can actually work on the design,
the CSS, without messing with any of the content that might be on that page.
And this CSS might sort of live at the top of an HTML page,
really nice and easy to edit because it's all in one place,
or it could be in a separate file altogether, a separate CSS file,
which is really powerful because what you can do with that CSS file
is have other HTML pages link to it.
[Site-wide consistency] [Reduces complexity and repetition] [Smaller file size]
So, all of these HTML pages can share that same CSS file,
which means you're going to have consistency with look.
It's not only going to keep it consistent, but it's going to be easier to update
because you'll only have to update the design from one file.
And ultimately, that's going to lead to smaller file size,
since you only have a reference for the design in one location.
But to break it down a little further, if we take a look at a CSS rule, for instance,
a CSS rule basically consists of a selector and declarations.
So in this case, you might have a paragraph tag, and you could have CSS
that redefines that paragraph tag or declares different properties for this paragraph tag,
making the text red, maybe giving it a different font as well.
But just a simple example of controlling that, but again, the nice thing is
is that CSS is separate from the actual content.
And again, the great thing is that Dreamweaver makes controlling this CSS
pretty darn easy through various dialog boxes.
So, let's take a look at where our current files are at.
Now, if you've done the previous lessons,
you should have an index.html and an images folder.
If you're just joining us, you can always go to the Lessons folder, and this is Lesson 7.
Just copy those files and paste it into the MySite folder.
Okay, with that done, I'm going to go ahead and open Dreamweaver,
and in my Files panel down here, notice how I have that index.html page.
I'm going to go ahead and double-click on index.html, and here's the sort of basic styling
that I've already done, and what I want to do is I want to have more control over this content,
and I'm going to do that by using CSS.
But I've kind of tricked you a little bit because
anytime you're editing Page Properties for a page,
you're actually making CSS as you do that.
That's what this means right here,
CSS, cascading style sheets for appearance, for links, for headings.
So, if you do add any of those properties, it actually makes that CSS.
But let's take a closer look at it, so I'll click "Cancel."
And I want you to open up your CSS Styles panel.
In fact, I'll minimize that Insert panel, just kind of stretch out that CSS Styles panel.
If you don't have it open, just go to Window, CSS Styles,
but if you take a look in here, here are all the styles
that are currently associated with this page.
It's pretty darn nice, and what I can do with any one of these is I can go ahead and edit it.
Take, for instance, like the h2, the heading 2,
which happens to be this one right down here, this heading 2.
And again, it says it right here, "Heading 2."
I can just double-click on it.
I have the ability to edit the CSS Rule Definition.
So, from in here, I can sure enough change the color to
just like an orange color and click "Apply."
Now, obviously, you have a lot more control you can do in here,
many more options in dealing with font.
It's definitely pretty powerful, so I really encourage you to
check out these different options, especially in the Type category.
I'll click "Okay."
Let's take, for instance, like the body.
I might want to edit the background and how the background works
because currently, the background scrolls with the content of this webpage,
but if I double-click on "body," and I take a look at the background category,
notice how I have the background color, and it's really just pointing to this image.
But what I want to do is I want to control the background attachment.
Again, this is not available in the Page Properties panel.
What I can do instead is I can click and select "Fixed."
So, what that's going to do is it's going to lock down the background so it doesn't scroll
when you scroll the page for your content.
I'll click "Okay," and I'll just save this page
and preview this in a browser.
So, go to File, Preview in Browser,
select whatever browser is listed, and there's the content.
If I sort of shrink up the browser, I can scroll,
and sure enough, that background is going to be fixed, but the content moves.
But still, I feel like this page needs a lot of work.
So, I'm going to be doing some more styling.
I actually want to stylize this box.
I want to make it to where we have more padding around the text and around the image,
and not only that, but I want to make sure that the content scales with the browser,
so if I shrink it down like this, I want this content to always be centered
and not really get cut off like that.
So, that's the goal, and that's what I want to do with the CSS,
so let me go back into Dreamweaver, and again,
I'm going to go ahead, and I'm going to locate this content div.
So, if I just click in the upper left, just click in the upper left,
notice how this says "Content" right here.
This is the CSS Element, and over here in the CSS Styles panel,
it's right here as well, so I'm going to double-click on it,
and that opens up that CSS Rule Definition.
So, we'll go beyond the type and the background, beyond the block,
and we'll get into this box, so this is a box model we can deal with.
Currently, it's set to 800 pixels wide. That works out great.
But what I want to do is I want to give it some more padding,
so right in here for top, I'm just going to type in "10,"
and it will do the same for all of the sides.
I can click "Apply," and if I just sort of move this out of the way,
you can see how it adds some padding around that text.
Now, for the margin, this is sort of the margin around this box that I want to deal with.
So, I want to make sure it's always in the center, so I want these columns,
these side parts right here, to automatically adjust,
just the left and the right side.
So, I need to uncheck "Margin," and for the right side,
I want it to automatically adjust, so I'll just type in "auto," just like that.
For left, I'll type in "auto" as well, and for the top,
let's just type in "180" pixels just to kind of give it some room at the top.
I can type in "0" in here, but know what's most important is the fact that I type in "auto" in there.
Now, that is going to give me some adjustable space on the sides,
but I need to make sure that there's no absolute positioning
applied to this CSS Rule Definition, so I want to click on down through here.
I encourage you to explore all of these categories,
but I'm going to go down to positioning, so select positioning.
Sure enough, there it is, absolute positioning.
That's what I don't want.
I'll just select that word and delete it.
Notice how it has this placement right here.
It's trying to place it in absolute position.
Select that text and just hit "Delete," so just clear out those 3 dialog boxes there,
and then click "Apply," and you should see that box move down.
That's quite a bit of space up here at the top.
And again, I can always jump back in here and adjust any of this content.
That's that top 180 pixels.
I can drop that back down to 100, click "Apply," and now it moves it up.
But go ahead and click "Okay," and I'd say that's looking pretty good for my page so far
except for--say, for instance, this image, but let's go ahead and view this in a browser,
so I'm going to go to File, Preview in Browser,
and I'm going to select "Safari."
Now, it does ask me to save the page, so I will select "Yes."
And here it is, and I'll just click "Refresh."
But it looks pretty darn good, and sure enough, it scales, and it's always in the center.
That's what I like, like it's a panel that's kind of floating in space.
That looks really good.
In fact, if I sort of shrink up the size of this browser and I scroll,
the content moves but the background doesn't.
This is looking really good. This is what I want to do.
So, I want to make one more edit to this image because obviously,
you can see how that image sort of butts up right against that text,
and I want to give that image more padding.
And in order to do that, I need to make a new CSS rule.
So, it's not about modifying any CSS rules already defined.
I want to make a new CSS rule for images.
I'll close this browser, go back into Dreamweaver.
I'll just select that image, and over in my CSS Styles panel,
I want to go ahead and add a CSS rule,
so down at the bottom of that panel, select that page with the plus sign,
New CSS Rule, and then you'll be given this dialog box.
So, let's take a look at this real fast.
If I just choose a selector type, so let's just take a look at this.
And I want to keep this simple, but really fast, I can make a class,
which can be applied to any HTML element.
Seems pretty powerful.
I can make an ID, which would be applied to only one element on the page.
That's not going to work for me, because what if I have multiple images?
I'm not going to want to select that, and I don't want to select a specific tag
because if I select tag, it will apply it to every image.
So again, just to recap, I don't want to select tags.
That will apply it to every image, and ID will only apply it to one image or one element.
A class seems the most flexible, and that's what I'm going to choose.
I'm not even going to worry about compound either, but again,
I'm going to select a specific class I'm going to make,
and we'll just call this "Content Image."
Okay, so the selector name will apply your rule
to all HTML elements with the class Content Image.
I like how it gives me that note.
I'll click "Okay."
As soon as I do that, I get to define that rule that I'm creating.
And from here, I'll go down to box,
and I can go ahead and adjust the padding for this,
so I can type in, again, 10 pixels.
Click "Apply," and when I click "Apply," notice how it didn't apply it to that image.
Now, did I do something wrong? No, I'm just not done yet.
So, just go ahead and select "Okay," because again,
I've created this CSS rule right here, and what I need to do is make sure this image
has that class applied to it, so select whatever image
you want to add some padding to in this case.
Select that image.
If I have it selected, I will go down to my Properties panel right down here.
And you can see where it says "Class."
I can go ahead and select "Content Image," and this is for--
any class that's created will be listed right in here, in this case, Content Image.
And it just gives it that nice sort of buffer around that image,
and now you can see my page is looking a lot better.
So, you can see the power of CSS giving me more control over the content,
where things are positioned, how they look.
And I really encourage you to check out all the various properties you can do
in that CSS Styles panel.
But another real powerful thing about CSS is it's basically isolated
in its own area on this page, so let's take a look at that now.
If I select any one of these elements--I can even select "Content"--
and I'll just do a right-click on it, so do a right-click or a Control click if you're on a Mac.
And then select "Go to Code."
That will change your Layout view to Split view.
And sure enough, it takes me to that CSS right up there.
It takes me to that specific rule, that rule definition.
But I can scroll down and see all of those various rules,
and this is what I was talking about earlier, separating the style or the design or the page,
as you can see, from the actual content, which is below.
So, this makes it pretty easy to work with.
And again, what I can do is not only view this CSS,
but I can, of course, modify any of this if I wanted to as well.
It's really up to you how you want to manipulate your CSS.
It's nice that it's consolidated right up here for this one page.
But what if I want to use this same CSS style for multiple pages?
That's really what I want to do, so since I've modified this code,
notice how in the CSS Styles panel it says you've made changes, so just hit "Refresh."
But again, I want to move this CSS into a new page.
So, I can select--if I do a Shift click on the bottom one
and then click on the top one, basically just selecting all of these rules.
I can select them all and do a right-click or Control click if you're on a Mac.
And then I want you to select "Move CSS Rules."
Sounds pretty good to me.
Let's move them to a new style sheet.
Select a new style sheet.
Click "Okay," and now I can save it out,
and I'm going to save it out as Paolo.css,
but I don't want to save it just right here in this MySite folder.
I want to create a new folder, and that really is like a best practice
when you're setting up the structure of your site, so I'll create a new folder
by clicking "New Folder," and I'll just type in CSS for the name.
Click "Create," and again, that's where this CSS is going to go.
I'll click "Save," and it moves all of those rules into that other page,
so if you look at my CSS Styles panel,
you'll see that you'll have all of those rules listed out nice and neat.
And it's just subtle differences when you're dealing with an external style sheet.
Obviously, you see this says "Paolo.css."
Even right over here underneath index.html it even separates out the source code.
If I take a look at that source code, I have this source code, and it gives me this link,
and it points to that CSS.
And what's nice about Dreamweaver is it actually lists out
any CSS pages associated with that page.
It will list them out right here.
So again, I can just click on that, and I can see this separate page.
Here's all of the CSS.
Very nice, and really, the last thing I need to do is I can save all the pages,
or I can save all the related files.
Again, since this CSS page is related to that index.html,
I can just save all of them, but really the last step is just the fun part
of previewing it in the browser of your choice
just like that, and I'll just click "Refresh."
Really no change here, but the point is that CSS is external from the site.
I can now create multiple pages and link them all to that CSS page,
making this really flexible, so that's the next step, is to start to really build out this site
with some website navigation, which will be done in the next lesson.
[Adobe TV Productions]
