IntroductionWelcome| 00:00 | (Music playing.)
| | 00:06 | Hi! I'm James Williamson and I'd like to
welcome you to Dreamweaver CS4 with
| | 00:10 | CSS Essential Training.
| | 00:12 | In this course, I'll explore the
process of managing and creating CSS
| | 00:16 | using Dreamweaver CS4.
| | 00:18 | Focusing on the tools within
Dreamweaver that allow you to create
| | 00:21 | standards-compliant valid CSS.
| | 00:24 | I'll show you how to use Dreamweaver
starter pages as a way to jump-start your
| | 00:27 | CSS designs and even how to
create your own custom starter pages.
| | 00:32 | We'll also explore the fundamental
concepts of controlling your pages with CSS
| | 00:37 | including typography, backgrounds, and
layout, which will give you the solid
| | 00:41 | foundation you need for
properly designing pages with CSS.
| | 00:45 | I'll also show you how to style your
site navigation with CSS, to build rich
| | 00:50 | interactive menus that require
no JavaScript for functionality.
| | 00:53 | We'll explore some deeper concepts as well.
| | 00:56 | Like serving up alternate styles for
multiple devices and controlling Ajax
| | 01:00 | widgets through custom CSS styles.
| | 01:02 | Whether you're brand new to CSS or an
experienced web designer, this title will
| | 01:07 | help ensure that you're using
Dreamweaver's tools in the most efficient way
| | 01:10 | possible to build standards-
compliant CSS driven sites.
| | 01:14 | Now let's get started with
Dreamweaver CS4 with CSS Essential Training.
| | Collapse this transcript |
| Do I need to know CSS to use Dreamweaver?| 00:01 | One of the most frequently asked
questions I get from students in my Dreamweaver
| | 00:04 | classes is do I have to
know CSS to use Dreamweaver?
| | 00:08 | My answer is always the same, yes, you do.
| | 00:10 | Now don't be mad at Adobe for this.
| | 00:13 | Current web standards tell us that
presentation in layout should be controlled
| | 00:16 | through a cascading style sheets.
| | 00:17 | If you want to become a professional
web designer, you need to know CSS.
| | 00:22 | The good news is that once you know
CSS, Dreamweaver makes creating and
| | 00:25 | controlling it incredibly easy.
| | 00:27 | With each new Dreamweaver release,
Adobe continues to focus on creating
| | 00:31 | efficient workflows for
building web standards-compliant pages.
| | 00:35 | With CS4, almost everything you do
regarding formatting and page layout is tied
| | 00:39 | directly into the
creation or modification of CSS.
| | 00:43 | So if you don't know CSS, making your
pages look and behave the way you want
| | 00:47 | them to would be like finding your
way around a new city with no map.
| | 00:51 | In this title, we'll examine how
Dreamweaver integrates CSS into your web
| | 00:55 | development and how you can customize
the workflow to your personal preferences.
| | 00:59 | The exercises are designed for both
beginner and intermediate CSS users.
| | 01:04 | So if you're a web design professional
that already knows CSS and is looking to
| | 01:08 | add Dreamweaver to your existing
workflow, you'll find plenty of movies that
| | 01:12 | detail how you create and
control your CSS using Dreamweaver.
| | 01:16 | You may want to start by focusing on
Chapter 4, Controlling your CSS with
| | 01:20 | Dreamweaver, for a thorough overview
of Dreamweaver's CSS capabilities.
| | 01:24 | For those of you that are brand
new to CSS, I focused on many of the
| | 01:28 | fundamental concepts of CSS.
| | 01:30 | So this should be a great place for your start.
| | 01:33 | I would recommend starting with
Chapter 1, XHTML and CSS Fundamentals.
| | 01:37 | Some knowledge of CSS is assumed in
other chapters so if you find yourself
| | 01:42 | getting a little lost, I recommend
checking out some of the other CSS titles on
| | 01:46 | the lynda.com Online Training Library
to solidify your knowledge of CSS before
| | 01:50 | completing this course.
| | 01:52 | If you are brand new to both Dreamweaver
and CSS, I would recommend checking out
| | 01:56 | my Dreamweaver CS4 Essentials
Training title before completing this course.
| | 02:00 | The goal of this title is to teach CSS
using standards-compliant best practices
| | 02:05 | while showing you how Dreamweaver can
assist you by speeding up the development,
| | 02:10 | deployment and maintenance of your styles.
| | 02:12 | With that in mind, let's get started.
| | Collapse this transcript |
| Using the exercise files| 00:01 | If you're a Premium member of the lynda.
com Online Training Library or if you're
| | 00:05 | watching this tutorial on disk, you
have access to the Exercise Files used
| | 00:10 | throughout this title.
| | 00:11 | Exercise files for this title are
arranged by chapter and each exercise has its
| | 00:16 | own folder structure
within the chapter directory.
| | 00:19 | You should copy the exercise files
to your desktop and work from there.
| | 00:23 | I recommend defining a site for each
chapter as you go to the exercises.
| | 00:27 | It's the best way to keep your
files organized as you focus on the
| | 00:30 | current chapter's topic.
| | 00:32 | If you've never defined a site
before in Dreamweaver, it's easy.
| | 00:35 | I'll just walk you to through the process.
| | 00:37 | In Dreamweaver, go to the
Site menu and choose New Site.
| | 00:42 | The Site Definition dialog box
has two tabs, Basic and Advanced.
| | 00:47 | For what we are doing,
we'll use the Advanced tab.
| | 00:50 | You can go ahead and
enter any site name you want.
| | 00:52 | If we are starting with our first
chapter, I'll name it chapter01.
| | 00:54 | Now the next thing we need to
do is choose a Local Root folder.
| | 00:58 | I'm going to select the Browse icon.
| | 01:00 | I'm going to go to my
Desktop and find my exercise_files.
| | 01:04 | From there, I'll go into the
specific chapter, in this case,
| | 01:06 | chapter 01_Fundamentals.
| | 01:07 | I'll double-click on that to select it.
| | 01:10 | Now on the PC, I'll choose Select but
on the Mac I'll click the Choose button.
| | 01:15 | That's all you need to do, go ahead and
click OK and there is your newly defined site.
| | 01:21 | As we go to the exercises, be sure to
keep track of the current directory that
| | 01:24 | you're working in as each
exercise has its own folder.
| | 01:27 | Let's get started.
| | Collapse this transcript |
| Setting up a custom workspace| 00:00 | Throughout this title, I use a custom
workspace that I find makes me faster and
| | 00:04 | more efficient when working in
Dreamweaver, although it's certainly not required
| | 00:08 | to complete this title.
| | 00:09 | If you've never used Dreamweaver before,
knowing how to set up your own custom
| | 00:13 | workspaces is extremely helpful.
| | 00:15 | So I'm going to take just a moment to
show you how to set up my custom workspace.
| | 00:18 | So I usually start off with the Classic view.
| | 00:21 | In the upper right-hand corner of
the interface, you are going to find
| | 00:23 | the workspace switcher.
| | 00:24 | You can switch between any of the preset
workspaces and of course, you can build your own.
| | 00:28 | I recommend starting off with the
Classic because my favorite layout is to have
| | 00:32 | the Insert toolbar right up here at
your top instead of docked to the right
| | 00:36 | hand side as a panel.
| | 00:38 | You can also start by either using
a Split Screen view for your default
| | 00:41 | screen or a Design view.
| | 00:43 | I typically start in the Design view so
that I can toggle back and forth between
| | 00:46 | Code or Split view when necessary.
| | 00:48 | So I'm going to set that to Design view,
and there is just one more change that
| | 00:52 | I make to the default workspace.
| | 00:54 | At the bottom of the interface, you're
going to find your Properties Inspector.
| | 00:57 | It takes up a good amount of screen
real estate down at the bottom of the panel,
| | 01:01 | but if you run certain commands
like searches or browser compatibility checks,
| | 01:05 | you're going to have an entirely
new set of panels that show up below it,
| | 01:09 | taking up even more space.
| | 01:11 | So I tend to like to dock those
together so that I have one long panel
| | 01:15 | grouping along the bottom.
| | 01:16 | So I'm going to go up to Window
> Results and just choose Search.
| | 01:21 | They are all in one large panel
grouping and there as you can see it sort of
| | 01:24 | pushes the Properties Inspector up.
| | 01:26 | So I'm going to take the Properties
Inspector and just drag its tab down over that
| | 01:31 | existing panel group.
| | 01:32 | You can redock or undock
panels as often as you'd like.
| | 01:37 | I like the Properties Inspector to be
all the way over the left as well, so I
| | 01:40 | can grab that and slide it to the left
along this group until it is the first
| | 01:44 | panel within the group.
| | 01:45 | So you're also free to go ahead and
rearrange any of these groups that you'd like.
| | 01:49 | You can do this with any of
the panel groupings that you see.
| | 01:52 | You can add panels, take
panels away, float panels.
| | 01:55 | It's really is a customizable workspace and
you can do anything you'd like with it.
| | 01:59 | Well, after you've done all these
modification, you're probably going to want to
| | 02:02 | save this, so that you don't have to
continue to open and close panels to get
| | 02:06 | the same look and feel.
| | 02:07 | So I'm going to go up to my workspace
and instead of choosing Classic or another one,
| | 02:11 | I'm going to choose New Workspace.
| | 02:14 | I will name mine The James, go ahead and
click OK and now the workspace switcher
| | 02:18 | gives me that is an option along with
all of my prepackaged workspaces as well.
| | 02:24 | So to switch between workspaces, I
simply grab the pulldown menu and I can
| | 02:27 | choose between mine and
any presets at any point.
| | 02:31 | So that's all there is to
setting up custom workspaces.
| | 02:34 | The more you work with Dreamweaver,
the more you'll get a feel for the panels
| | 02:37 | that you use on a day-to-day basis and
some of the panels that maybe you don't
| | 02:40 | use quite as frequently.
| | 02:41 | That way you can set up the interface
to make sure it's the most efficient for
| | 02:44 | the way that you like to work.
| | Collapse this transcript |
|
|
1. CSS/XHTML FundamentalsSeparating structure from presentation| 00:01 | The focus of this title is on using
Dreamweaver to properly manage and create your CSS.
| | 00:05 | Although it's tempting to simply jump
in a Dreamweaver and get started, I think
| | 00:09 | the best place to start would be a
thorough overview of some of the fundamental
| | 00:12 | concepts behind CSS and XHTML.
| | 00:15 | In fact, if you are brand new to CSS
and you find yourself getting a little
| | 00:18 | lost at times in this title, I
recommend checking out some of the other CSS
| | 00:21 | titles on the lynda.com Online
Training Library to solidify your knowledge of
| | 00:25 | CSS before completing this course.
| | 00:28 | If on the other hand, you are an
experienced CSS designer, you may still want to
| | 00:31 | consider going through this chapter
since we'll be covering how Dreamweaver can
| | 00:34 | help you resolve style
conflicts and speed up style deployment.
| | 00:37 | One of the keys to understanding a CSS
XHTML based workflow is understanding the
| | 00:43 | role of XHTML versus the role of CSS.
| | 00:45 | XHTML stands for Extensible Hypertext
Markup Language and marks a transition
| | 00:51 | from HTML to XML on the web as
such the text are structural only.
| | 00:56 | They contain no
presentational information at all.
| | 00:59 | That's why older HTML tags such as the font,
body, and italic tag are now deprecated.
| | 01:04 | When using XHTML, our tag should
indicate the logical structure of our content
| | 01:08 | and inform us as to what the
contents are, not how it should look.
| | 01:12 | That's the job of CSS.
| | 01:13 | In XHTML, we have many meaningful tags
like the H1, H2, paragraph, table,
| | 01:19 | and list tags that give
structure to our page content.
| | 01:22 | We can pass along additional meaning
by using the Div tag, which divides our
| | 01:26 | content in the logical regions.
| | 01:28 | By using a logically structured XHTML,
we can pass meaning to all users agents
| | 01:33 | that consume our content, not just browsers.
| | 01:35 | So, our first exercise is going to be
the take a page and add some additional
| | 01:39 | structure to it, so here we have the
structure.html file open and you can see
| | 01:43 | we have a main heading, and
we have a main content heading.
| | 01:46 | The main heading is an h1 tag and
the main content heading is an h2 tag.
| | 01:51 | So, right off the bat we
see something structural here.
| | 01:53 | The main page heading is more
important than the content heading and that's
| | 01:56 | denoted by the h1 and the h2 tag.
| | 01:58 | Then we have some paragraphs and
some lists, but they are telling us
| | 02:01 | something about them.
| | 02:02 | Notice that we have a main content
region and we have this heading that says
| | 02:06 | 'I am a subheading' and indicates the
beginning of a secondary area of content.
| | 02:11 | Then we have another section that has
this 'I am information that is not crucial
| | 02:13 | to the rest of the page and as such,
I'm the last element on the page.'
| | 02:16 | So there are distinct regions of
content here. We have the heading, a content
| | 02:21 | region, a secondary region which is
usually referred to as the sidebar and
| | 02:25 | information that sort of down there
at the bottom of the page and that's
| | 02:27 | typically referred to as the footer.
| | 02:29 | So we need to be able
structurally to separate this content.
| | 02:33 | Now how can we do that?
| | 02:34 | The best way to do that using XHTML is
to use Div tags, so what I'm going to do
| | 02:39 | is I'm going to select the first heading up top.
| | 02:41 | Now you can click inside that
heading and then click on the h1 tag and in
| | 02:46 | Dreamweaver's Common objects, which
you can find right up here in the Insert
| | 02:49 | toolbar, you want to go ahead
and choose the Insert Div Tag.
| | 02:53 | If you have content selected, one of
the options that Dreamweaver gives you is
| | 02:57 | the ability to wrap it around the existing
selection and that's exactly what we want to do.
| | 03:01 | Now later on, we'll talk about
passing additional meaning using classes and
| | 03:04 | IDs, but for right now we just need the
structure that the Div tag is going to give us.
| | 03:08 | So I'm going to choose OK.
| | 03:09 | The next thing I want to do is select
all of my main content, so I'm going to go
| | 03:14 | all the way down to that list from 'I am
the main page content heading' down to
| | 03:17 | 'I am the third, I include the word independent.'
| | 03:20 | So we are going to highlight that.
| | 03:21 | Insert another Div tag, and again,
wrap it around the selection.
| | 03:26 | Next we need to do our sidebar
area, so I'm going to go ahead and
| | 03:28 | highlight those two lines.
| | 03:30 | Insert a Div tag and wrap around the
selection and then finally, highlight
| | 03:35 | the last remaining line and insert
a Div tag by wrapping it around that
| | 03:40 | selection, perfect.
| | 03:42 | Now if I switch over to Code view, you
can see that each one of those areas is
| | 03:46 | separated by a Div tag
indicating that area of content.
| | 03:51 | It's not specific about what that
content is and certainly notice that we haven't
| | 03:54 | done anything to style it
but the structure is now there.
| | 03:57 | So we've taken our basic structure and
added some additional meaning to it by
| | 04:00 | wrapping the content in these Div tags.
| | 04:02 | So we haven't discussed what the
content should look like or how it should be
| | 04:05 | formatted. We are going
to leave that up to CSS.
| | 04:07 | Next up, we'll take a look at making
our content even more meaningful by
| | 04:11 | using IDs and classes.
| | Collapse this transcript |
| Adding meaning with ID and class attributes| 00:01 |
Although XHTML has many meaningful tags,
it doesn't have enough to convey all of
| | 00:05 |
the meaning we are trying to convey in our code.
| | 00:08 |
The one advantage about XML, for example,
is that if I need a tag to describe my trips,
| | 00:12 |
I can just make one.
| | 00:13 |
In XHTML we have a fixed set of
meaningful tags to work from. There is no
| | 00:17 |
Header, Footer, or Photo Gallery tags
even if I have those elements on my page.
| | 00:23 |
To pass along additional meaning we
can use the class and ID attributes to
| | 00:27 |
provide more information about specific content.
| | 00:30 |
While similar in functionality, ID and
classes have different rules about when
| | 00:34 |
and how they can be used.
| | 00:36 |
IDs can only be used once per page, and are
usually used to define unique areas of content.
| | 00:42 |
Although any element can have an ID attribute,
| | 00:44 |
they are most commonly used to give
additional meaning to the generic div tag.
| | 00:48 |
Classes can be used as often as
desired on a page and are generally used to
| | 00:52 |
identify information that could
repeat on the page but aren't tied to any
| | 00:56 |
specific element type.
| | 00:57 |
In this exercise, we'll take our
previously structured file and add additional
| | 01:01 |
meaning to it by using IDs and classes.
| | 01:03 |
We'll see how Dreamweaver makes this
very easy to do, even if we didn't add these
| | 01:07 |
attributes originally.
| | 01:09 |
So I'm working on a structure file
and we've got the div structure that we
| | 01:12 |
assigned in the last exercise, but now we need
to give these guys a little bit more meaning.
| | 01:16 |
Now, there are a couple of different
ways that you can IDs and let's take a
| | 01:20 |
look at some of those.
| | 01:21 |
So what I'm going to do is I'm going
to click inside the first element,
| | 01:24 |
'I am the page's main heading.'
| | 01:26 |
If I notice down on the tag selector I can
click on the div tag and it selects that.
| | 01:32 |
In the Properties Inspector now I
get a section right here, where I can
| | 01:36 |
assign an ID for that div.
| | 01:38 |
Now if I have an attached style sheet
I could go ahead and grab that from the
| | 01:41 |
pulldown menu, but of course I don't.
| | 01:43 |
So I'm just going to type
in header and hit Return.
| | 01:46 |
Now take a look at the tag
selector right down here.
| | 01:49 |
Do you see where it says div#header?
| | 01:52 |
So anytime you see that pound symbol,
that's an ID of that particular element.
| | 01:56 |
If you would look in Code View, and
I'm just going to switch over to Split
| | 01:59 |
Screen View, you can see
that it says div id="header".
| | 02:03 |
So Dreamweaver just went
ahead and added that for us.
| | 02:06 |
Now if you are the type of person that
really likes to hand-code a little bit
| | 02:10 |
more than you like using
the Properties Inspector.
| | 02:12 |
Let me show you a couple of different
ways that you can approach adding IDs.
| | 02:16 |
One of the things I can do, I'm going to
go ahead and click in the div below our
| | 02:18 |
main div and I'll use the tag
selector to select that div tag,
| | 02:23 |
is there's something that
we call the Quick Tag Editor.
| | 02:25 |
I'm a big fan of this.
| | 02:26 |
If you select an element and use the
Command or Ctrl+T keyboard shortcut,
| | 02:31 |
that's going to bring up a Quick Tag
Editor that lets you edit and hand code
| | 02:35 |
here in Design View.
| | 02:36 |
So notice that brings up my div tag and
I can simply type in id. Hit Return and
| | 02:41 |
it will finish the equals
and the quotation marks.
| | 02:43 |
And in this case, we are
going to type in content.
| | 02:46 |
So now we have applied that ID.
| | 02:49 |
If I switch over to Code View, you can
see where that says div id="content".
| | 02:54 |
Now if you really like to hand
code, you can simply do just that.
| | 02:58 |
I can click on line 18 in another div
tag that I have here, and this one is my
| | 03:02 |
Sidebar, and here I can
just type in id="sidebar".
| | 03:06 |
Whenever you are doing code hinting, if
you already had some CSS styles attached
| | 03:09 |
that had id selectors in it, you'd
be able to choose those from a list.
| | 03:13 |
Since we don't have any of those,
we have to manually type those in.
| | 03:15 |
So I'm going to go back to Design View
and I'm going to finish up assigning IDs
| | 03:19 |
by assigning the Footer ID.
| | 03:21 |
And you can use your favorite way of doing this.
| | 03:22 |
I really do, if I'm in Design View,
love to use the Property Inspector
| | 03:26 |
because it's just so easy to click inside
there and type in the word footer and hit Return.
| | 03:30 |
Now a little information about naming
convections for IDs, you don't want any
| | 03:34 |
spaces, you don't want to begin it
with a number and try to avoid using
| | 03:37 |
punctuation. Other than that you can use
pretty much anything that you want to do.
| | 03:41 |
Okay, now the next thing we need to do,
we are done assigning all of our IDs, so
| | 03:44 |
these structural div elements now pass
along a little bit more meaning about the
| | 03:48 |
content inside of them.
| | 03:49 |
This is our Header region, this is our
Content region, this is our Sidebar region.
| | 03:53 |
And all these different user agents
that might consume your content will at
| | 03:57 |
least know that much about this area.
| | 03:59 |
Later on when we start working with CSS,
we can use that information to style
| | 04:03 |
that area and do layout as well.
| | 04:05 |
So we get a lot of benefit
from using IDs and classes.
| | 04:08 |
Now speaking of classes,
that's what we have to do next.
| | 04:11 |
What we want to do is we want to make
sure that the word independent sort of
| | 04:14 |
stands out and is identified
everywhere it appears in the content.
| | 04:17 |
You can see as a matter of fact this
line is telling us to do just that.
| | 04:19 |
The word independent needs to be
identified everywhere appears in my content;
| | 04:22 |
something I can't currently do even
though I can emphasize in text or make it
| | 04:26 |
stand out from the text around it.
| | 04:27 |
Now what does that mean?
| | 04:29 |
Well, if I click inside the emphasized
word, I can see that it's using an em tag
| | 04:33 |
just around the text.
| | 04:34 |
If I click-in stand out,
I see that it's using strong.
| | 04:37 |
These two tags are now used
instead of the bold and italics tag.
| | 04:41 |
The em tag stands for emphasized text.
| | 04:43 |
The strong tag stands for
strongly emphasized text.
| | 04:46 |
So although they do help us convey a
little bit of meaning, they don't actually
| | 04:50 |
identify the content inside of it.
| | 04:52 |
So I'm going to go in and highlight
the word independent where it's found
| | 04:55 |
within that sentence.
| | 04:56 |
Now in this case if I do the Quick
Tag Editor, remember it's a Ctrl or
| | 04:59 |
Command+T, since this isn't one specific
element selected, it says oh, you want
| | 05:04 |
to wrap this with a tag.
| | 05:06 |
One of the best ways of identifying
content is to use the generic inline
| | 05:09 |
level tag, the span tag.
| | 05:12 |
The way that the div tag gives us a
generic block level element, the span tag
| | 05:15 |
gives us a generic inline level element.
| | 05:17 |
So I'm just going to use Code Hinting
to find the span tag, and then I'm going
| | 05:21 |
to pass along a class attribute.
| | 05:22 |
So right through span, I'm going
to hit Space and type in class.
| | 05:25 |
And then the class we are going to
give this is independent and hit Return.
| | 05:32 |
Now I need to do that everywhere this is found.
| | 05:34 |
I could use Find and Replace to do
that and that would be pretty easy.
| | 05:38 |
But we really don't have that many, so
I'm just going to go ahead and highlight
| | 05:41 |
that word wherever I find it and I'm
going to do pretty much the same thing.
| | 05:45 |
Command or Ctrl+T, span class="independent".
| | 05:51 |
And I notice I have one more area that
has independent so I'm going to highlight
| | 05:54 |
that one more time, Command or
Ctrl+T, span class="independent".
| | 06:01 |
Code Hinting can really help us out with that.
| | 06:03 |
Now again if I look in Code View, I can
see that that class has been applied now
| | 06:06 |
in multiple locations.
| | 06:08 |
So we are using the class independent
multiple times on the page but all the IDs
| | 06:12 |
we are using, we are only using it once.
| | 06:14 |
Now one more thing that passing along
this additional meaning allows us to do
| | 06:18 |
code-wise is to sort of
equalize our tags if you will.
| | 06:21 |
Let me switch back to Design View
and explain this a little further.
| | 06:24 |
If I click inside 'I am the
page's heading,' that's an h1 tag.
| | 06:28 |
And if I click inside 'I am main
content heading,' that's an h2 tag.
| | 06:32 |
Well, it was done that way before
because the page's main heading was more
| | 06:35 |
important than the main content heading,
so the h1 was used and then the h2 was used.
| | 06:39 |
Well, now that they are in separate
regions I can pass along that meaning in
| | 06:42 |
other ways. This is the heading's main
headline and this is the content's main headline.
| | 06:46 |
So I'm going to give these guys an
equal standing now and click inside 'I'm the
| | 06:50 |
main content heading' and
change that to an h1 tag.
| | 06:53 |
I do that by going down to the
Properties Inspector and clicking on the HTML tab.
| | 06:57 |
I'm going to click inside that heading
and then using the Format pulldown menu
| | 07:01 |
I'm going to choose an h1.
| | 07:03 |
Now it's exactly the same size, but
again, we don't worry about presentation
| | 07:07 |
right now. We can control that through CSS.
| | 07:09 |
At the moment we now have a main
headline inside the heading, we also have a
| | 07:12 |
main headline inside the content. Which one
we make more important is going to be up to us.
| | 07:18 |
So our content now has meaningful
structure that allows any user agent accessing
| | 07:21 |
the code to interpret the code and
display it based on the structure.
| | 07:24 |
The important point now is that we use this
structure consistently across our entire site.
| | 07:29 |
This isn't to say that every page in our
site has to be structured exactly the same way.
| | 07:33 |
We just need to follow the rules
that we have established site-wide.
| | 07:36 |
Not only does this keep your code
structure consistent, it makes writing the
| | 07:40 |
eventual CSS much easier.
| | 07:42 |
Now that we've covered structuring our
XHTML properly, we need to examine how to
| | 07:46 |
control the presentation of that code with CSS.
| | 07:50 |
| | Collapse this transcript |
| Understanding basic selectors| 00:01 | If you are new to CSS, the syntax behind
the code can look a bit intimidating at first,
| | 00:05 | but in reality CSS syntax
is very easy to learn and decipher.
| | 00:09 | In this movie, we'll examine the
structure of CSS syntax and break down the
| | 00:13 | basic selector types that will
become the building blocks of your more
| | 00:17 | complex selectors later.
| | 00:18 | Now in our slide, here we have a sample
CSS rule and this one is pretty basic.
| | 00:23 | So each rule is broken down into
specific parts and if you know what these parts are,
| | 00:27 | it's a lot easier to
decipher what's going on.
| | 00:29 | So the first part of any CSS based
rule is going to be the selector.
| | 00:33 | The selector identifies the element
or elements on the page that you are
| | 00:36 | targeting with this particular style.
| | 00:38 | Some selectors are really basic and
general in nature and others can be more
| | 00:42 | complex and a lot more specific
regarding the targeted element.
| | 00:46 | Here we have what we call an element
selector and it's just targeting any h1 tag
| | 00:50 | that it finds in your file.
| | 00:51 | Now next you are going to
have the declaration block.
| | 00:54 | The declaration block is in those curly
braces and they are going to contain all
| | 00:57 | of the instructions for how your
heading 1s or whatever targeted element should
| | 01:01 | be formatted within your file.
| | 01:03 | Now inside the declaration block,
you're going to find individual rules
| | 01:06 | themselves, and those rules
are broken up into two parts.
| | 01:09 | You have the property and a value.
| | 01:12 | The property comes first and it's
followed immediately by a colon.
| | 01:15 | Just after that you have the Value.
| | 01:17 | You can have as many of these Property/
Value pairs as you need within your rule,
| | 01:21 | although you really only need to have one.
| | 01:23 | However, after an individual rule, use
a semi-colon to tell the browser or the
| | 01:27 | user agent to go on and start
rendering the next property.
| | 01:30 | Here you can see we are setting
some font properties for the heading 1.
| | 01:32 | We are setting the Font to Arial
and setting the Size to 1em, and we're
| | 01:37 | assigning the Color to
#000, which will be black.
| | 01:40 | So this entire rule is targeting heading
1 tag, setting the Font to Arial at 1em
| | 01:46 | and changing the Color to black.
| | 01:47 | So now that you understand the basic
pieces of this CSS rule syntax, it's a good
| | 01:52 | idea to go ahead and get your
basic selectors under your belt.
| | 01:54 | So here are basic CSS selectors.
| | 01:57 | We have element selectors and to
identify an element, all you have to do is
| | 02:01 | type-in the element itself.
| | 02:02 | So h1 would target heading 1s, h2
would target heading 2s, p would target
| | 02:07 | paragraphs, TD would target
table cells, so forth and so on.
| | 02:10 | You just have to know the name of the tag
and you type it in free of any tag braces.
| | 02:14 | It's just the element itself.
| | 02:16 | Next step we have class selectors,
and in this case, you can see I'm
| | 02:19 | representing that with .author.
| | 02:21 | Class selectors target anything with
that particular class attribute and notice
| | 02:25 | that they are preceded by a period.
| | 02:27 | After that they have to be named
exactly the same thing as the class attribute
| | 02:30 | on your page and capitalization
and spelling most certainly counts.
| | 02:34 | Next, we have ID selectors and again,
this is going to target any element with
| | 02:38 | an ID specific to what you have here.
| | 02:40 | IDs are preceded by the pound symbol
just like classes are preceded by the dot.
| | 02:44 | So if you ever see a dot, that's a class.
| | 02:47 | If you ever see a pound symbol, that's an ID.
| | 02:49 | So they are pretty easy to identify when
you are seeing them within the CSS syntax.
| | 02:53 | If you don't see any of those things,
chances are it's probably an element
| | 02:56 | selector and just to check that, make
sure it's representing an actual HTML tag
| | 03:00 | like h1 or block quote or the A tag.
| | 03:03 | Well, now we have that under our belt,
let's go ahead and take an existing page
| | 03:07 | and write some of those basic selectors for it.
| | 03:10 | This also gives us a really good
opportunity to see how we create new CSS
| | 03:14 | rules in Dreamweaver.
| | 03:15 | So here we have a page that has pretty much
the same structure we have been working with.
| | 03:18 | There is just more content in it now.
| | 03:20 | We have a Header region, we have our
Content region, we have our Sidebar region
| | 03:24 | and down the very, very bottom we have
our Footer region, but note we also have
| | 03:29 | paragraphs, we have list items.
We have all sorts of stuff going on here.
| | 03:32 | And if I look over at my CSS Styles
panel and if you don't see this opened,
| | 03:36 | you can go to Window and choose CSS Styles,
but it's usually in the top panel grouping here.
| | 03:41 | We see that we have some
existing styles already on the page.
| | 03:44 | We have an element selector.
| | 03:45 | It's targeting our paragraphs, and I'm
going to expand my CSS Styles panel so I
| | 03:49 | can see what's going on here.
| | 03:50 | So it's assigning a color of #333 and
it's setting a font family of Georgia
| | 03:54 | or Times New Roman.
| | 03:55 | We also have a class selector called
.author, and you can see it's going to
| | 03:59 | change that color of that text to green
and give it a font weight to Bold and
| | 04:03 | you can see that in action in
a couple of different places.
| | 04:06 | And finally, we have the #header
selector, so that's targeting any element
| | 04:10 | with an ID of header.
| | 04:11 | Now remember, IDs can only be used
once per page, so I've given this a
| | 04:14 | background color and a little bit of
padding. What we've done is we have
| | 04:17 | separated the Header region from the
rest of the page, not only with structure
| | 04:20 | but with also style as well.
| | 04:22 | So let's go ahead and style some of the
other basic elements we have on the page.
| | 04:26 | We have a couple of headers that we want
to style, so we're going to use element
| | 04:28 | selectors for those.
| | 04:29 | We also have a list.
| | 04:31 | We'd like to reformat our list so we are
going to use the list item selector for those.
| | 04:34 | So I'm going to go over to CSS
Styles panel and the easiest way to add a style
| | 04:38 | to my document is to simply go down to
the row of icons on the bottom right-hand corner.
| | 04:43 | The one that has the page with the
plus symbol on it is New CSS Rule and
| | 04:46 | you want to go ahead and click that.
| | 04:47 | Now the first thing that's going to ask you
to do is what type of selector do you want?
| | 04:51 | Well, we are covering those three basic
selectors, so notice that they come up as choices.
| | 04:55 | We have Classes, IDs or Tags.
| | 04:58 | Tag is another way of saying an
element selector, so I'm going to choose tag.
| | 05:01 | Now I want to target the h1 tag, and
if I had been smart enough to click
| | 05:05 | inside an h1 tag, Dreamweaver would
have populated that for me, which would
| | 05:08 | have been really nice.
| | 05:09 | Notice that you could
also grab that from a list.
| | 05:12 | So if you forget exactly what that tag
is you can usually use that list to find
| | 05:16 | exactly the tag you are looking for.
| | 05:18 | Now I could also choose to define this
rule in this document only or if I have
| | 05:22 | an external style sheet file, I
could move it over to my external rules.
| | 05:25 | We don't have that yet, so I'm just
going to keep it in this document.
| | 05:28 | So I'm going to go ahead and click OK.
| | 05:29 | And up comes my CSS Rule Definition dialog box.
| | 05:33 | This is separated by categories.
| | 05:35 | You can see the
categories on the left-hand side.
| | 05:37 | We have some Typography categories,
categories referencing the background and
| | 05:40 | borders, so generally, you can
find what you are looking for here.
| | 05:43 | Now I'm going to set my font family,
a pull-down menu and choose Arial,
| | 05:47 | Helvetica, and sans-serif.
| | 05:49 | I also want to set a color, so I'm going
to click in the Color Chip, and you can
| | 05:53 | do this one of two ways.
| | 05:54 | One, you can click the actual Color
Chip itself and then sample the color
| | 05:58 | from the Swatches, or from anywhere in your
file, or you can literally just type it in.
| | 06:02 | I'm going to go ahead and sample #000.
| | 06:04 | That's a black, and I certainly could
have typed that in right there as well.
| | 06:07 | I am going to go ahead and click OK, and I
notice that all my heading 1s change font.
| | 06:13 | The color was already black.
| | 06:14 | That's just me making sure.
| | 06:15 | I am going to go ahead and choose
another New CSS Rule, and this time I'm going
| | 06:19 | to do a tag selector and
I'm going to do the h2 tag.
| | 06:22 | So you can see this dialog box gets a
lot easier to manage once you kind of
| | 06:25 | know your way around it.
| | 06:26 | I am going to go ahead and click OK and we
are going to do something very similar here.
| | 06:29 | For font-family, I'm going to choose Arial,
and for Color, I'm going to type-in #060.
| | 06:35 | If you hit Tab, anything that you type-
in there you'll actually see and 060 is a green,
| | 06:39 | so I'm going to click OK.
| | 06:41 | Any of my heading 2s will change
color and the font changes as well.
| | 06:45 | Right, we have one more element
selector left to do, so I'm going to choose New
| | 06:48 | CSS Rule, I'm going to choose
Tag, and I'm going to type in li.
| | 06:53 | I could also have chosen from the list
obviously and that's going to target
| | 06:56 | any of my list items.
| | 06:58 | I am going to leave it in this
document only. Go ahead and click OK.
| | 07:01 | I'm going to change my font-family to
Arial, Helvetica, sans-serif and that's all
| | 07:05 | I really wanted to do there.
| | 07:06 | I'm going to go ahead and click OK and I can
see the list, updates, and changes. Perfect!
| | 07:10 | Now that's an element selector and you
can see that it's very global in nature.
| | 07:14 | It really didn't discriminate
into what it was formatting.
| | 07:16 | It formatted everything.
| | 07:18 | So the heading 1 is targeting the
heading 1s inside the header as well as
| | 07:21 | the content region.
| | 07:22 | If I had multiple lists, it would
format those no matter where they are and
| | 07:25 | we can actually see that we have a list
in our content region and a list in our sidebar
| | 07:29 | and they are both using the same font.
| | 07:30 | So we know that these styles are very
global, they're very general in nature and
| | 07:33 | they're likely to affect your entire page.
| | 07:36 | Now you can do more targeted
selectors by using ID or classes.
| | 07:39 | So what we want to do is we want
to change the way our sidebar looks.
| | 07:43 | We want to give it a background
color and a little bit of padding all the
| | 07:45 | way around it as well.
| | 07:47 | So what I'm going to do is create a new CSS
rule and this time, I'm going to choose ID.
| | 07:52 | I can grab the pull-down menu and I
would find any previously populated IDs
| | 07:56 | but I don't have any.
| | 07:57 | So I need to type this in, so I'm going
to type-in #sidebar. Notice the no space
| | 08:02 | there, just #sidebar and I'm going to click OK.
| | 08:04 | I am going to give it a background
color, so I'm going to click on the
| | 08:07 | Background category and I'm
going to give it a color of #999.
| | 08:10 | Now if you hit Tab, you can see what
color is going to be entered there.
| | 08:15 | In this case, it's going to
get sort of a neutral gray.
| | 08:17 | I am going to go to my Box
category and give it some padding.
| | 08:21 | I'm going to give it 10 pixels
worth of padding all the way around it.
| | 08:24 | So I'm going to leave Same for all
selected and just choose 10 pixels there.
| | 08:28 | Now when I click OK, I could see that
now my Sidebar has turned gray and
| | 08:31 | the text isn't butting right up against
the edge like it was before. Perfect!
| | 08:35 | So now that we have done element
selectors and ID selectors, the only one that
| | 08:39 | we have left to do is a class selector.
| | 08:41 | Now remember class selectors are going
to target any element that has the class
| | 08:45 | attribute applied to it.
| | 08:46 | In this case, we can use the class
attribute of title, something that really
| | 08:49 | hasn't been applied yet in the code.
| | 08:51 | So it doesn't matter whether you apply
the class attribute first within the code
| | 08:54 | or whether you create the style
first. Either way works fine for you.
| | 08:57 | It's just whatever workflow you'd like to do.
| | 08:59 | So I'm going to choose New CSS Rule,
I want a class selector and remember class
| | 09:04 | selectors are preceded by periods.
| | 09:05 | I'm going to type-in period or dot,
whatever you want to say, .title.
| | 09:09 | Notice there is no space before that.
| | 09:10 | There is no space after it.
| | 09:11 | It's just .title, all one word.
| | 09:13 | Again, we are going to define it in
this document only. I'm going to go
| | 09:16 | ahead and click OK.
| | 09:17 | So I'm going to stay in the Type
category and choose font-style Italic.
| | 09:19 | I'm going to go ahead and
click OK and save our file.
| | 09:22 | Now I don't know about you, but
I don't see anything change here.
| | 09:25 | Well, that's because it's only going
to target elements that have that class
| | 09:28 | applied to it and
currently on our page nothing does.
| | 09:31 | So what I'm going to do is find
everywhere the text Animal Farm is.
| | 09:35 | I'm going to go ahead and highlight that text.
| | 09:37 | Now in the previous exercise, if we
wanted a class attribute, we would go into
| | 09:40 | either Code or we would
use the Quick Tag Editor.
| | 09:43 | But if you already have some existing CSS,
your class application becomes a lot simpler.
| | 09:48 | So with that highlighted, I'm going to
go down to my Properties Inspector and
| | 09:51 | where it says Class of None right now,
I'm going to grab that pull-down menu and
| | 09:55 | I can see every single
class that I have in my styles.
| | 09:57 | I am going to choose Title
and it's going to apply that.
| | 10:00 | It does it by wrapping that text in a
span tag and then giving it the title
| | 10:04 | attribute, so that's automating
that process and it's doing a lot for me.
| | 10:08 | The next thing I'm going to do is
highlight Animal Farm in my list and apply
| | 10:12 | exactly the same class to it.
| | 10:14 | And I'm pretty sure that's all we have
on the page as far as the book title but
| | 10:18 | I want to make sure.
| | 10:19 | Yup, and our book review is done.
| | 10:21 | So I'm going to go ahead and save that.
| | 10:23 | And just to review our structure, we
have three selectors driving all the
| | 10:27 | formatting on our page right now.
| | 10:29 | We have an element, ID, and class
selectors, and these guys can be counted on
| | 10:33 | to style almost any
content that you need them to.
| | 10:36 | I should point out that they are
extremely generic however, and they are not
| | 10:39 | going to be right for every situation.
| | 10:40 | For example, if you write an element
selector that targets the paragraph tag,
| | 10:44 | that's going to target every
single paragraph in your entire site.
| | 10:47 | I really doubt that you can have a very
many sites where every single paragraph
| | 10:50 | needs to look the same.
| | 10:51 | So instead of being what you use to
format everything on the page, these three
| | 10:56 | basic selectors are in actuality going
to form the building blocks for the more
| | 11:00 | complex selectors that you'll
be using a little bit later on.
| | 11:03 | So next up, we need to focus on
those advanced selectors and how they allow you
| | 11:07 | to target more specific items on the page.
| | Collapse this transcript |
| Understanding complex selectors| 00:01 | It is doubtful that your pages will
ever be simple enough to just rely on
| | 00:04 | the three selectors we learned about in our
last exercise, ID, element and class selectors.
| | 00:10 | It's quite common for example to want to
style the same element type differently
| | 00:14 | depending upon the region it's contained within.
| | 00:17 | Many people who are learning CSS for the
first time will rely on class styles to
| | 00:21 | achieve the needs of styling.
| | 00:22 | This creates more code than
necessary and styles that are just harder to
| | 00:26 | maintain and update.
| | 00:27 | A better solution is to use selectors
that are just a little bit more complex.
| | 00:31 | So in this exercise we are going to
learn to group selectors together to save
| | 00:34 | time, we'll learn about descendant
selectors that allow us to target specific
| | 00:38 | instances of elements, and how to use
pseudo-class selectors to make styles
| | 00:42 | react to user interaction.
| | 00:44 | So one of the first things I want to do
, we've got a slide up here, I want to
| | 00:47 | talk about these different what we
call advanced selectors, although advanced
| | 00:50 | is really just a word.
| | 00:51 | The first thing I want to
examine are the group selectors.
| | 00:54 | Notice that we have h1, h2, address.
| | 00:57 | Now, that's not three different selectors;
| | 00:59 | this is one group of selectors.
| | 01:01 | So, what this allows you to do is if
you have separate elements that are going
| | 01:04 | to have exactly the same styling,
you can simply group them together.
| | 01:08 | So, instead of writing a selector for h1
, and then another one for h2, and then
| | 01:11 | another one for address, we
are just grouping them together.
| | 01:14 | Notice that they are separated using the commas.
| | 01:16 | That's a really a big point.
| | 01:17 | You don't want to forget those commas
or you are going to write what we call a
| | 01:21 | descendant selector, and
you can see that below it.
| | 01:24 | Here we have a descendant selector that
says #mainContent space and that space
| | 01:28 | is very important, h1.
| | 01:29 | Okay, so what does that mean?
| | 01:30 | Well, unlike the group selectors which
is basically taking multiple elements and
| | 01:34 | styling them exactly the same way all
at once, the descendant selector instead
| | 01:38 | targets a specific selector and you
are going to find yourself using this one
| | 01:41 | probably more than any other.
| | 01:43 | So, in this particular instance this is
targeting a heading 1 tag that's found
| | 01:47 | within any element that
has the ID of main content.
| | 01:51 | So, that's what that space does.
| | 01:52 | It basically says hey, any tag or any
element like this, in this case the h1
| | 01:56 | tag, inside of this I want you to style.
| | 02:00 | That's a very intelligent selector.
| | 02:02 | That allows you to say hey, my
paragraphs in the footer should look very
| | 02:05 | different than my paragraphs in the sidebar.
| | 02:07 | And you can do that using just one selector.
| | 02:09 | So, that is really cool.
| | 02:11 | Now the other thing that I want to
point out is that you can have as many of
| | 02:14 | these as you want sort of strung together.
| | 02:16 | So, I could have h1 #mainContent #wrapper.
| | 02:21 | So, you could do it that way too.
| | 02:23 | You can make them as specific or as
general as you need to based upon how many
| | 02:27 | elements need to be combined.
| | 02:28 | Now, the last selector type I
want to address in this exercise are
| | 02:31 | pseudo-class selectors.
| | 02:33 | Pseudo-class selectors are really
cool, although their support varies
| | 02:37 | from browser-to-browser.
| | 02:38 | But when you use them in conjunction
with links and that's probably how you guys
| | 02:42 | may have seen them used before.
| | 02:43 | They allow us to style different states
of that link based upon user interaction.
| | 02:46 | So, these are just a couple of the
pseudo-class selectors, these aren't all
| | 02:49 | of them, but you can notice that we
have link, visited, hover, and active,
| | 02:53 | and of course that's describing the status of a
current element as the user interacts with it.
| | 02:58 | Link indicates any element
that has an href attribute.
| | 03:02 | Visited would be a visited link,
hover would be any element or link that
| | 03:05 | somebody is hovering over, and active
would be one they are currently clicking on.
| | 03:09 | You'll notice that there is
no selector in front of them.
| | 03:12 | Essentially using a pseudo-class selector is
appending these to the end of your selector.
| | 03:15 | So, it says if we are going to target a
link for example, it would say a:link,
| | 03:19 | or a:visited, or a:hover, and a:
active, so that would work out fine.
| | 03:24 | If that seems a little confusing and
you are brand new to CSS, don't worry.
| | 03:28 | We are going to do it in this exercise and
hopefully it will make a lot more sense then.
| | 03:31 | So, let's jump back into
Dreamweaver and let's use these.
| | 03:33 | So, we are working with our Advanced
Selectors file and we are kind of where
| | 03:37 | we left off before.
| | 03:39 | We have some individual selectors, we
have mixing of element selectors, classes,
| | 03:44 | IDs, but we are still not
targeting anything really specifically.
| | 03:47 | Now, one of the first things I notice
that if we click on the h1 tag, and the h2
| | 03:51 | tag, is they are almost the same.
| | 03:53 | The only thing that differs is the color.
| | 03:55 | Well, what if we decide that that
green color is something we want to use for
| | 03:57 | every single header?
| | 03:59 | We also want to make sure we have those fonts.
| | 04:01 | In that case we don't need multiple selectors.
| | 04:03 | So, what I'm going to do
is select the h2 selector.
| | 04:05 | Highlight it in my CSS
Styles panel and delete it.
| | 04:08 | Now, initially that takes away
the formatting from the h2 tag.
| | 04:11 | So, what I'm going to do is I'm going
to the select the h1 tag, I'll click it
| | 04:14 | again and that allows me to rename this.
| | 04:16 | I'm going to type in ,h2,h3.
| | 04:21 | So that same formatting is going to
apply to all of my h1, h2, and h3 tags now.
| | 04:27 | If I hit Return I can further modify
this by coming in and changing the color to
| | 04:31 | 060, and now notice that all of my
headers including my h1s are now green. Cool!
| | 04:38 | So that's one selector that's doing
a lot of work for me now, wonderful!
| | 04:42 | Let's talk about
targeting more specific elements.
| | 04:45 | Now, if I click inside, 'it was the name
about something animals taking over the
| | 04:48 | farm,' I can see that this passage
of text is wrapped in a strong tag.
| | 04:53 | Now, I could go ahead and define an
element selector for the strong tag
| | 04:57 | to format this text.
| | 04:58 | But what if I wanted my text to look
different if the strong tag were inside a
| | 05:01 | heading versus inside of a paragraph?
| | 05:03 | Well, that's where a descendant
selector can really help me out.
| | 05:06 | So, I'm going to go ahead and
select that element, just like I did.
| | 05:08 | I clicked inside of it and then used
the tag selector to choose the strong tag.
| | 05:12 | Then I'm going to go over
and choose New CSS Rule.
| | 05:15 | Because of the fact that I had that
selected, one of the things Dreamweaver does
| | 05:19 | is say, "oh, you must want a compound
selector," and then it gives me what it
| | 05:23 | thinks I need in the compound selector.
| | 05:25 | Now, I could be less specific or I
could be more specific based on the content.
| | 05:29 | I'm going to click Less Specific and
you'll notice that it says p strong.
| | 05:34 | It even gives you a description
of what's going to happen there.
| | 05:36 | This selector name will apply a rule
to all strong elements that are within
| | 05:40 | any paragraph elements. Perfect!
| | 05:42 | So I'm going to say this document only.
| | 05:44 | So, I'm going to go ahead and click OK.
| | 05:44 | I'm going to change my font-weight to
normal, because by default strong tags
| | 05:49 | bold their text, and then I'm going to
go ahead and give it a background, of
| | 05:53 | #FF0, and if I hit Tab, I could see
it's kind of a bright yellow so it's going
| | 05:57 | to be the equivalent of sort of
highlighting this with a highlighter.
| | 06:00 | So what I'm going to do is I'm going to
click on the Background category and I'm
| | 06:03 | going to give it a background color,
which is going to make it look like this
| | 06:05 | text has been highlighted.
| | 06:07 | And then I'm going to type in #FF0.
| | 06:10 | Now if you hit Tab, you can see it's
yellow, and if I click OK, now that text
| | 06:14 | looks like is being highlighted by a
highlighter and I don't see that happen
| | 06:17 | anywhere else in my file.
| | 06:19 | But if I were to scroll down and I
want to emphasize this 'long time ago,' I
| | 06:25 | could highlight and using the
Properties Inspector, making sure I was on the
| | 06:28 | HTML and not the CSS tab,
I can click the Bold icon.
| | 06:32 | Again you can see it
goes ahead and applies that.
| | 06:34 | Now, that's now a class application
that's looking at the structure to target that.
| | 06:38 | Let's do a couple more of these
descendant selectors so that we get a
| | 06:41 | really thorough overview. We have two lists.
| | 06:44 | One is an unordered list,
and notice that's a UL tag.
| | 06:47 | The other one is an ordered
list, and that's an OL tag.
| | 06:50 | Well, we can use that to our advantage
because inside of them each one of them
| | 06:54 | has a List Item tag.
| | 06:56 | If we write just a generic list item
selector, then the formatting would
| | 06:59 | apply to both lists.
| | 07:01 | What if I only wanted to target
list items inside of my numbered list?
| | 07:04 | Well, that's where the
OL tag can come into play.
| | 07:07 | So again I'm going to choose New CSS
Rule and I'm going to do a compound
| | 07:10 | selector and you can't always
trust Dreamweaver to populate this with
| | 07:14 | exactly what you need.
| | 07:15 | So sometimes it helps to
really know what you want.
| | 07:17 | I'm going to type-in OL,
then a space and then LI.
| | 07:20 | So, that's targeting any List Item
element inside of an ordered list.
| | 07:25 | So I'm going to go ahead and click OK,
I now change my font-style to Italic.
| | 07:29 | When I click OK, I notice that the one
list changes but the other does not that
| | 07:33 | has everything to do with the
descendant selector that we wrote.
| | 07:36 | Now, I'm going to scroll back up to
find our content and I'm going to target
| | 07:39 | this heading to look a little
different than the heading above it.
| | 07:42 | Remember, these are both h1 tags, but
I'd like the content heading to look a
| | 07:46 | little different than my main heading.
| | 07:48 | Maybe to note a series of importance or to
focus the user's eye on a specific passage.
| | 07:52 | So, I'm going to choose New CSS Rule, and
this is indeed going to be a compound selector.
| | 07:57 | Now, sometimes it doesn't get it right
, sometimes it gets it exactly right,
| | 08:00 | and by clicking inside that heading
and choosing compound selector, it goes
| | 08:04 | ahead and populates that with #content h. If
it didn't get that, feel free to type it in.
| | 08:08 | Remember #content h1, this document only.
| | 08:12 | Let me go ahead and click OK, and for
font-size I'm going to take that to 1.6em.
| | 08:18 | Notice that I don't have
to grab pull- down menu.
| | 08:20 | I can just go ahead and
type an em right beside it.
| | 08:22 | When I hit Tab, it moves it
over for me, which is really nice.
| | 08:26 | Our color is going to be white
, so I'm going to type in #fff.
| | 08:29 | I'm going to go to my Background
category to give it a background color of #996,
| | 08:35 | and then finally I'm going to go to my
Box category and give it the same padding
| | 08:40 | all the way around it and
give it a padding of 5 pixels.
| | 08:42 | So, I'm going to go ahead and click OK
, and you can see these two headlines,
| | 08:46 | even though they are exactly the same
structural element are now very different
| | 08:50 | based on context, based on where they are.
| | 08:52 | And the last thing we want to do is just
do a couple of pseudo selectors, and we
| | 08:56 | have a link right here which says
George Orwell and that is appearing exactly
| | 08:59 | has link text normally
appears, underlined and blue.
| | 09:03 | We are going to change that and we
are even going to target specific states
| | 09:06 | based on user interaction.
| | 09:07 | So, I'm going to click the New CSS
Rule and this time I'm going to use a
| | 09:11 | compound selector, but I'm going
to use my pseudo-class selectors.
| | 09:14 | And these are actually
available to you in a pull-down menu.
| | 09:16 | If you don't feel like typing them in,
so you can grab the pull-down menu and
| | 09:19 | choose a link for example.
| | 09:20 | So, I'm going to do that. Click OK.
| | 09:23 | I'm going to set my Text-decoration to none.
| | 09:25 | It's going to remove the underline
from it, and then I'm going to move
| | 09:28 | the font-weight to Bold, and give it a
Color of #600, which is a nice burgundy color.
| | 09:37 | And when I click OK, I can see what happens.
| | 09:39 | All my links are now no longer
underlined, they are bold and they are sort of
| | 09:43 | that burgundy color.
| | 09:44 | Now, keep in mind that if you are going
to remove the Text-decoration underline
| | 09:48 | from your links, you need to give really
clear styling information that there is
| | 09:52 | something different about this.
| | 09:53 | One of the things that you can do to
really help yourself is to create a
| | 09:56 | hover for that as well.
| | 09:58 | That means if anybody hovers over it,
it will change its style and formatting
| | 10:01 | and it will appear like a rollover.
| | 10:02 | So, I'm going to go ahead
and choose a New CSS Rule.
| | 10:05 | Once again I'm going to do a
compound selector and I'm going to grab the
| | 10:08 | pulldown menu and choose the a:hover. Perfect!
| | 10:10 | Now I'm going to go ahead and click OK
, and in this case I'm just going to
| | 10:14 | give it a bottom border.
| | 10:15 | So I'm going to go to Border, de-select
Same for all, I'm going to use a solid 1
| | 10:20 | pixel border on the bottom, and then
I'm going to make the Color to #600.
| | 10:24 | So it is actually going to
be the same color as the text.
| | 10:28 | So I'm going to go ahead and click OK.
| | 10:29 | I'm going to save the file and just
to check to make sure that's working.
| | 10:32 | I'm going to preview this on my browser.
| | 10:34 | Notice now when I hover over any
link, the outline shows up again.
| | 10:38 | So it's giving sort of that
rollover effect and that's using our
| | 10:40 | pseudo-class selectors.
| | 10:42 | So, the selectors that we've covered in
the past couple of movies are far from
| | 10:46 | all of the selector types available to you.
| | 10:47 | They are attribute selectors, first
child selectors, and even other pseudo
| | 10:51 | selectors that you can use to
target specific page elements.
| | 10:54 | Some of the more exotic selectors
aren't supported very well in older browsers
| | 10:58 | or even most versions of Internet Explorer.
| | 10:59 | So, use them with care and learn which
browser supports selectors you want to use.
| | 11:04 | These core selectors, element, class, ID
, descendant, pseudo-selectors, and the
| | 11:08 | time-saving techniques that we've
learned such as grouping selectors together
| | 11:12 | will usually serve as all you need to build
complex and efficient CSS styles for your pages.
| | 11:17 | Now, that we have an understanding of
the selectors that are going to be used to
| | 11:19 | construct our styles, we need to
understand the rules that browsers use when
| | 11:23 | determining how they rendered.
| | 11:25 | So next up, we'll explore the concept
that gives CSS its name, the cascade.
| | Collapse this transcript |
| Examining the Cascade| 00:01 | Cascading Style Sheets get their name
from the nature of how styles are applied
| | 00:04 | to the page: in a cascading order.
| | 00:07 | Styles can be applied either externally,
embedded within the page, or applied
| | 00:11 | inline in individual tags.
| | 00:13 | The order in which they are
encountered by the browser determines the
| | 00:17 | element's final rendering.
| | 00:18 | If you really want to break it down to
them as simplest term, you could phrase
| | 00:21 | that as the last style applied wins.
| | 00:25 | In this exercise we'll examine the
cascade in action, and take advantage of it
| | 00:28 | to control the rendering of our styles.
| | 00:30 | So in this slide example, we have some
code over here on the right hand side.
| | 00:34 | Notice that we have an HTML page, we
have in the head of the document, we have a
| | 00:38 | link to an external style sheet.
| | 00:40 | We also have some embedded styles and
if you look a little further down,
| | 00:42 | you can find some inline styles too.
| | 00:45 | We don't know exactly
where that stuff is, right.
| | 00:46 | We are going to highlight that.
| | 00:47 | So what happens when a
browser first opens up your web page?
| | 00:51 | Well, the first thing it does is
it looks for any external styles.
| | 00:54 | If it finds those, it will apply
them and render them on the page.
| | 00:57 | So in this case we are
linking to our external main.css.
| | 01:00 | Now next, it looks for any embedded styles.
| | 01:03 | If it finds those, in which case you
will find them here, it will go ahead and
| | 01:06 | apply those as well.
| | 01:07 | Now, there is something
I want to point out here.
| | 01:09 | If the styles in our embedded styles
disagree in any way with the styles are in
| | 01:13 | our main.css, the
embedded styles are going to win.
| | 01:17 | They are going to overwrite any
property that disagrees with something set in
| | 01:21 | main.css, and we are going to
see that in detail in our exercise.
| | 01:24 | Now the final thing it looks
for is in the inline styling.
| | 01:27 | If it finds an inline styling and that
style is written directly into the code
| | 01:30 | as an attribute, it will apply that
and again, it's going to overwrite any
| | 01:34 | embedded styles, as well as any
external styles, and that's where the name
| | 01:38 | cascade comes from, the styles
are applied in a cascading order.
| | 01:41 | Now as we are going to see in just a
moment, this can be turned upside down if
| | 01:45 | you are not careful about
how your code is structured.
| | 01:48 | So we'll take a close look at
that towards the end of the exercise.
| | 01:51 | Okay, so back in Dreamweaver, we have
our cascade.htm file open and right now
| | 01:55 | there is no styling going on whatsoever.
| | 01:57 | So the first thing I want to do
is attach my external style sheet.
| | 02:00 | Now the easiest way to do that
is to use the CSS Styles panel.
| | 02:03 | So I'm going to open that up and I
notice on the lower right hand corner I have
| | 02:07 | what looks to be a little chain link
symbol. I'm going to go ahead and click on
| | 02:09 | that to attach a style sheet.
| | 02:10 | Now the easiest way to find this is to browse.
| | 02:12 | So I'm going to go ahead and
browse and I'm going to find main.css.
| | 02:16 | I'm going to go ahead and click OK, and
although I could go ahead and assign a
| | 02:20 | media type to that -- we'll
talk more about that later.
| | 02:22 | Notice right here I'm adding it
as a link and not importing it.
| | 02:26 | We'll import a style sheet in just a moment,
and you will get to see the difference.
| | 02:28 | So when I click OK, we see our
formatting occurring and if I open up my
| | 02:33 | main.css, I can see all of
the styles contained within.
| | 02:37 | So, so far so good.
| | 02:38 | Now let's say this is our global style
sheet and maybe this is one section of
| | 02:42 | our website, maybe just a single
section that deals with the reviews of books
| | 02:45 | and things like that.
| | 02:46 | So I would like some styles to be
sectional styles that would apply not only
| | 02:50 | to this page, but also other pages within the
section, but not necessarily all of my main styles.
| | 02:55 | Well, that's what import
is really good for doing.
| | 02:58 | Let me show you what I mean.
| | 02:58 | Go and attach another style sheet and
this time we are going to browse and
| | 03:02 | we are going to find that
sectional.css and click OK.
| | 03:05 | But whereas last time we added it as a
link, this time we are going to import it.
| | 03:11 | Now when I click OK this time,
take a look at your CSS Styles panel.
| | 03:14 | It brought in the external
sectional.css, but in a very odd way.
| | 03:18 | It's got it inside the style tag.
| | 03:19 | Well, the best way to figure out what
happened here is to switch over to our code.
| | 03:23 | So I'm going to switch to Code view,
and I can see that just underneath my
| | 03:26 | external link tag, I now have a style tag
opened up, just like if I had embedded styles.
| | 03:31 | But instead of seeing
embedded style, I see @import.
| | 03:33 | So @import is another way of bringing
in external styles, but it brings it in
| | 03:37 | within a style tag, and this is
important because in most workflows this is
| | 03:42 | going to treat these external
styles as if they were embedded styles.
| | 03:45 | So based upon the cascade, anything
found in the sectional CSS will now
| | 03:49 | overwrite anything in our global or main.css.
| | 03:52 | So we are seeing the cascade in action,
and as a matter of fact, let's see
| | 03:55 | the cascade in action.
| | 03:57 | In our main.css we have a class
selector called Title, and the only thing it's
| | 04:01 | doing is applying an italic font style.
| | 04:03 | Now if I look in my sectional.css, I
also have a title and it's changing the color,
| | 04:08 | it's applying font-weight to bold, and
it also has a text transform to upper case.
| | 04:12 | So you can see all these additional
styling that is taking place, but notice
| | 04:15 | that it is still italic.
| | 04:17 | Well, let's make those two disagree
with each other and see what happens.
| | 04:19 | So I'm going to grab the pulldown menu
and I'm going to choose Normal, and when
| | 04:22 | I do that, notice that it's my
embedded style or my imported style that wins,
| | 04:27 | and we see the cascade actually working there.
| | 04:29 | And so we see a nice physical
example of the cascade in action.
| | 04:33 | So in our external style sheet, title
is told to italicize, whereas in our
| | 04:37 | imported style sheet,
title is told to be normal.
| | 04:40 | Notice that it doesn't
affect the rest of our formatting.
| | 04:43 | So really when you have multiple
selectors that are targeting an element,
| | 04:46 | they sort of combine, and you see
an aggregate of all of the different
| | 04:50 | selector properties.
| | 04:51 | However, if there are two properties
that have a conflict, the cascade is
| | 04:54 | typically used to resolve that.
| | 04:55 | In this case, it's
changing it from italic to normal.
| | 04:59 | Now let's see that on a much larger scale.
| | 05:02 | If I look in my main.css, I can see
that I have a sidebar ID selector.
| | 05:07 | It's giving in a background color and
setting some padding for it and if I
| | 05:10 | scroll down, I can see what the
background color looks like and I can see the
| | 05:14 | padding is holding it away from the edge.
| | 05:15 | Well, let's write an embedded style.
| | 05:17 | So this isn't going to be in our
sectional CSS and it's not going to be on our
| | 05:20 | external style sheet.
| | 05:21 | The easiest way to do this is to just
go ahead and click the style tag and
| | 05:25 | I'm going to choose New CSS Rule.
| | 05:27 | So in the New CSS Rule dialog box comes
up I'm going to choose ID and I'm going
| | 05:31 | to type in #sidebar.
| | 05:33 | So it's going to directly
compete with our external sidebar rule.
| | 05:36 | In this case, I'm going to
do it in this document only.
| | 05:39 | That makes sure that this is
embedded within the style tag.
| | 05:41 | I'm going to go ahead and click OK and
we are simply going to change a few things.
| | 05:45 | Like I'm going to change the
background color for example.
| | 05:46 | I'm going to click on the Background
category, and just pick another color.
| | 05:49 | I'll go ahead and pick orange, but
feel free to pick any color that you want.
| | 05:52 | It doesn't really matter.
| | 05:54 | And in my Box category, I'm going to
set the width to 500 pixels, and I'm going
| | 05:59 | to go ahead and give it a border as well.
| | 06:00 | So I'm going to give it a solid
border all the way around, 1 pixel, and
| | 06:04 | I'm going to use #333, which
is sort of a gray for that.
| | 06:09 | I'm going to click OK and you see
a dramatic change in our sidebar.
| | 06:12 | So all of those things that were set
in our external style sheet, main.css, are
| | 06:17 | now being overwritten by sidebar.
| | 06:19 | But not everything.
| | 06:20 | Notice that for example, the padding
is still being honored, so we are still
| | 06:24 | getting 10 pixels of padding all the way around.
| | 06:26 | Only where we have a conflict, in this
case background, are we seeing a change.
| | 06:30 | The other styling was added to this,
giving us the ability to combine styling
| | 06:33 | from several different places
to create our final rendering.
| | 06:37 | Now the last thing I want to do here
is to really drive home the point that
| | 06:40 | the cascade can be summed up
"the last style applied wins."
| | 06:43 | Right now we are playing by the rules.
| | 06:45 | We have external styles, we have
styles that we are bringing in and using at
| | 06:49 | import, and we have embedded styles.
| | 06:51 | And if I switch over to Code view, you
can see that they are occurring exactly
| | 06:54 | in the order they are supposed to:
external, imported, and embedded.
| | 06:59 | So right now the cascade is
acting in a very predictable manner.
| | 07:03 | Doesn't always happen that way.
Let me show you what I mean.
| | 07:06 | So if I look in my external style sheet,
I can see that currently I have an ID
| | 07:10 | selector for header.
| | 07:12 | It has a background color and a padding as well.
| | 07:14 | There is nothing really to prevent me
from creating another header selector.
| | 07:18 | So what I'm going to do is select the
very last rule in my external style sheet,
| | 07:23 | and choose New CSS Rule.
| | 07:24 | I'm going to do another ID selector,
and I'm going to choose #header.
| | 07:30 | Now, I know what you are thinking, Hey,
wait a minute, you have already got that,
| | 07:32 | and why would you add it again?
| | 07:34 | That's a really good question, but
in larger style sheets, sometimes it's
| | 07:37 | actually easier than you
would think to write a rule twice.
| | 07:39 | You may not remember that
you did this for example.
| | 07:42 | So we are going to do that main.css,
and I'm going to go ahead and click OK.
| | 07:46 | The only thing we are going to do here
is change the background color, so that
| | 07:49 | we have a big conflict between the existing one.
| | 07:52 | So in this case I'm going to type in
#996 and you will notice that that's sort
| | 07:57 | of a darker tan color.
| | 07:58 | So I'm going to go ahead and click
OK and I notice that it changes.
| | 08:02 | So the cascade takes place
even within the style sheets.
| | 08:05 | If I browse to the main.css, I can see
that the header on the bottom is actually
| | 08:10 | overwriting the header on top
in terms of background color.
| | 08:13 | So remember, last rule applied wins.
| | 08:17 | Now what if you said to yourself, I meant
for that to be part of my embedded styles.
| | 08:21 | Well, we can use the CSS Styles panel
to move styles around pretty easily.
| | 08:24 | So I'm going to go back to Design view,
click on my CSS Styles panel, and notice
| | 08:29 | that I have expanded both the
main styles and my embedded styles.
| | 08:32 | I am going to grab the header, drag it
down below #sidebar, and now it becomes
| | 08:38 | part of our embedded styles, perfect.
| | 08:40 | So now the cascade is doing exactly
what we expect it to do, but again, remember
| | 08:45 | the last style applied wins.
| | 08:47 | If I switch over to Code view and look
at my source code, I can see that the
| | 08:51 | link tag is appearing above my embedded styles.
| | 08:54 | It doesn't have to. If I cut this
and place it below my embedded styles,
| | 09:00 | now when I switch back in
the Design view and do a Save All,
| | 09:03 | I can see that that original color
is coming back again. Why is that?
| | 09:07 | Because the styles are being
applied in the order that they are found.
| | 09:11 | The embedded styles are found first.
They are being applied. Now my external
| | 09:14 | styles are being found and they are applied.
| | 09:16 | Now, that's not really following the
proper structure for applying CSS, so why
| | 09:19 | would I even show you this?
| | 09:20 | Well, you are going to run into plenty
of places where Dreamweaver is going to
| | 09:24 | do that for you by mistake.
| | 09:26 | If you have some existing styles on
your page, and you attach an additional
| | 09:30 | style sheet, Dreamweaver always puts
that just above the closing head tag.
| | 09:33 | This can often lead to conflicts within
the cascade that aren't resolved the way
| | 09:37 | that you think they should be.
| | 09:38 | So any time you attach a style sheet,
be sure to come back in, check the code,
| | 09:42 | and make sure it was placed in the right place.
| | 09:44 | So as you can see, understanding and
executing the cascade is absolutely
| | 09:49 | essential to writing
efficient properly rendered styles.
| | 09:52 | By placing styles in external style
sheets, we take advantage of the cascade and
| | 09:55 | control a large number of
pages with a single document.
| | 09:58 | By importing styles or using embedded
styles, we can begin to control specific
| | 10:03 | page instances independently
of the global external styles.
| | 10:06 | While mastering the cascade is crucial
to understanding CSS, it's just one of
| | 10:10 | the three core rendering principles we'll cover.
| | 10:12 | So next up, we'll take a
closer look at inheritance.
| | Collapse this transcript |
| Understanding order of inheritance| 00:01 | Of all the CSS rendering rules,
Inheritance is probably the easiest to
| | 00:04 | understand and control.
| | 00:05 | Properties of rules applied to parent
tags will be inherited by their child
| | 00:09 | tags, as long as those
specific properties values inherit.
| | 00:13 | The trick is understanding which
properties inherit, and how to overwrite
| | 00:16 | inheritance when it's not the desired result.
| | 00:18 | Well, I'm going to use this slide to
sort of demonstrate how inheritance works.
| | 00:22 | We have some source code on left hand side.
| | 00:24 | There is a div that surrounds a paragraph.
| | 00:27 | The paragraph says "I'm feeling blue."
| | 00:29 | The word blue is surrounded with an
emphasis tag, and the div has an ID of content.
| | 00:34 | The render text would look exactly
as it does here. I'm feeling blue.
| | 00:37 | The only difference is most browsers
would italicize blue, but for the purpose
| | 00:40 | of this exercise we are leaving it normal.
| | 00:43 | Okay, so let's take a look at our first rule.
| | 00:46 | Our first rule is going to target any
element within an ID of content, and what
| | 00:50 | we are setting as font-family to Georgia.
| | 00:52 | So anything inside of any element
with an ID of content should get the
| | 00:56 | font-family Georgia, and we are going to
check to see how that would render, and
| | 01:00 | sure enough now we are seeing the font Georgia.
| | 01:02 | Our next rule is going to target paragraphs.
| | 01:05 | Our paragraph selector is telling our font-
size to be 1.4ems, and our color to be red.
| | 01:11 | Once again if I click on that, I notice
that everything inside the paragraph is
| | 01:15 | being re-sized and the color is red.
| | 01:17 | So currently the text is inheriting the
font-family from the content selector,
| | 01:22 | and it's getting its sizing and
color information from the paragraph tag.
| | 01:26 | Now, we still have the word blue in the em tag.
| | 01:28 | So if I write at em selector, notice
here we are just changing the color of the
| | 01:31 | em selector to blue.
| | 01:33 | So, if we do that, we notice that the
word blue renders blue, while the rest of
| | 01:37 | the text remains red.
| | 01:39 | So essentially you are going to
inherit these values down, but your child
| | 01:43 | elements are allowed to
overwrite the parent elements.
| | 01:46 | In fact, if it didn't work that way, it
would be pretty hard to do any type of
| | 01:49 | specific styling, wouldn't it?
| | 01:50 | So we can take our em tag over anything
that the paragraph and content selectors
| | 01:55 | are doing for us, while still
inheriting those other values.
| | 01:59 | So it's a very efficient way of working.
| | 02:00 | Well, let's put that to
practice in our exercise.
| | 02:03 | So here we have the inheritance file
open, and if I take a look at my CSS
| | 02:08 | Styles, I have a few embedded styles,
and if I just sort of go through them in
| | 02:11 | the CSS Styles panel, by looking at
the properties down there, I can see that
| | 02:15 | there really aren't any
font-family declarations.
| | 02:17 | But we have got some sizing, a couple
of font-weights here and there, but there
| | 02:20 | is really nothing that says
what font people should be using.
| | 02:25 | Well, for the most part, everything on
our page needs to be Arial and Helvetica.
| | 02:29 | A good way to approach this is instead
of assigning that font-family to every
| | 02:33 | single selector like headings and
paragraphs and list items and all that.
| | 02:36 | We can just go ahead and
put it up on the body tag.
| | 02:38 | The body tag is the main parent element,
and anything that you place on that
| | 02:41 | that can be inherited by everything in the page.
| | 02:44 | So let's give that a try.
| | 02:45 | I am going to go up my embedded styles
and click the Style tag, and I'm going to
| | 02:48 | choose New CSS Rule.
| | 02:50 | In this case I'm going to do a tag selector,
and I'm going to type in body for the body tag.
| | 02:55 | Now remember, you can grab that from
the pull down menu if you don't really
| | 02:58 | want to type that in.
| | 02:59 | We are also going to
define it in this document only.
| | 03:01 | So there is no need to put
this into an external style sheet.
| | 03:04 | So I'm going to go ahead and click OK,
and I'm going to choose Arial and
| | 03:07 | Helvetica for my font-family.
| | 03:09 | Now if I want to see if this is going
to work, I can click the Apply button,
| | 03:12 | and as soon as I do that, notice that
every single piece of text changes so
| | 03:16 | that the font is now Arial. Well that's cool.
| | 03:18 | What other things can we sort of
send down the line if you will?
| | 03:22 | Well, one of the things we can do is font-size.
| | 03:24 | What if I wanted my font-size to a
little smaller than whatever device I'm on,
| | 03:28 | maybe a little smaller than its default font?
| | 03:30 | Well, I can certainly do that and
I can use percentage to do that.
| | 03:33 | So maybe I'll type in 85
and then choose percent.
| | 03:37 | Now remember I can choose that from the
pull down menu, but if I type it in with
| | 03:40 | no spaces and hit Tab, it
will go and do it for me.
| | 03:43 | Again, I'll hit Apply, and I notice
that all of my text shrinks sort of
| | 03:46 | proportionally, now that's really cool.
| | 03:48 | So again, I'm sort of broadcasting
this if you will, down to every single
| | 03:51 | element in the page.
| | 03:52 | I'm going to go ahead and click OK.
| | 03:54 | Well, as you can see that's a very general
way to apply styles across your entire page.
| | 03:59 | But what if I wanted to
change it in a specific location?
| | 04:02 | Well, as we saw just a moment ago on
our slide, we can use inheritance to do.
| | 04:06 | I can go ahead and write any selector
that I want for these child elements, and
| | 04:09 | it will overwrite what it
just did on the body tag.
| | 04:11 | Let's take a look at that.
| | 04:12 | So I'm going to go to my paragraph
selector, that's the one right up top, and
| | 04:16 | right now the only thing that
that's doing is assigning a color.
| | 04:19 | Well, let's do something else to it.
| | 04:21 | Let's give it a font-family.
| | 04:21 | So I'm going to double click that
to edit it, and I'm going to use the
| | 04:24 | font-family drop down menu to go
ahead and choose Georgia, Times New
| | 04:27 | Roman, Times, serif.
| | 04:28 | Now remember that directly contrary of what
the body tag is sending down which is Arial.
| | 04:33 | When I click OK, I can see that that
nested tag is now overwriting its parent
| | 04:37 | tag where they disagree, in
this case, the font-family.
| | 04:39 | So inheritance can do more than any
other rendering rule to make your styles
| | 04:43 | efficient and lightweight by allowing
global styles to be applied to top level
| | 04:47 | elements, and then overwriting
them with specific child selectors.
| | 04:50 | When needed, you can eliminate the
need for weighty repetitive code.
| | 04:54 | In our next exercise we are going to
tackle probably the most perplexing of all
| | 04:58 | the rendering rules,
Specificity, and that's coming up next.
| | Collapse this transcript |
| Understanding specificity| 00:01 | Of the three rendering concepts that we
are covering, the one that seems to give
| | 00:04 | people the most amount
of trouble is Specificity.
| | 00:07 | Usually if I'm helping somebody
troubleshoot their CSS, or having trouble with
| | 00:10 | my own, and a certain selector just
won't render correctly, the problem is
| | 00:14 | usually Specificity.
| | 00:16 | On the surface, Specificity seems pretty simple.
| | 00:18 | When two rules are in conflict,
the more specific rule wins.
| | 00:22 | Sounds simple, right?
| | 00:24 | All you need to do is learn what
makes one rule more specific than another,
| | 00:27 | and you should be fine.
| | 00:29 | In reality however with more
complex embedded and external style sheets
| | 00:33 | interfacing with intricate page
structure, it can be really difficult to
| | 00:36 | diagnose the problem.
| | 00:37 | So later on, we'll take a look at some
of the tools that Dreamweaver provides us
| | 00:41 | to help troubleshoot our rendering
issues, but for the time being we need to
| | 00:44 | take a closer look at the rules for
specificity, and examine it in action.
| | 00:49 | So one of the first things I want to do
is talk about what makes a rule specific.
| | 00:53 | First off, inline rules
are the most specific rules.
| | 00:57 | If you have inline level formatting,
it's going to be just about everybody else
| | 01:00 | when specificity comes into play.
| | 01:02 | IDs are a little less specific than
inline rules, but still more specific than
| | 01:06 | classes, and element selectors, which
come in dead last in the specificity race.
| | 01:11 | So if you were to arrange these in a
line like what I have done here, we could
| | 01:15 | create a table, and when we look at
certain rules, we can determine their
| | 01:18 | specificity by counting how many
inline attributes they have, IDs that make
| | 01:23 | their selector, classes and elements.
| | 01:26 | Once you know the makeup of the
selector, calculating the specificity is
| | 01:30 | actually pretty easy. Let me show you.
| | 01:32 | So our first selector
here is p style ="color:red".
| | 01:35 | That's an inline style if you
have never seen one of those.
| | 01:38 | The style is applied as an attribute.
| | 01:39 | So, that's 1 inline style.
| | 01:41 | 0 ID, 0 classes, 0 elements, but that's
okay, because you can concatenate those
| | 01:46 | together and you get a Total of 1000.
| | 01:49 | That's pretty specific.
| | 01:50 | Now, check out the next rule,
just a simple paragraph selector.
| | 01:54 | That's a 0 inlines, 0 IDs, 0 classes,
1 element, and yes we have a small
| | 02:00 | little Specificity of 1. Take this example.
| | 02:03 | Here is h1.special.
| | 02:05 | Now, you may not have seen
this type of selector before.
| | 02:07 | What this is is an
element specific class selector.
| | 02:10 | So in this case you are saying, any
heading1 tag with the class special applied to it.
| | 02:15 | So of course that's no inlines, no IDs,
1 class, 1 element and that gives us a
| | 02:21 | Total Specificity of 11.
| | 02:22 | Let's take a look at one more example.
| | 02:25 | So here we have #mainContent h2.
| | 02:27 | This is a descendant selector
targeting any heading2 tag inside of an element
| | 02:31 | with an ID of mainContent.
| | 02:33 | So, that's 0 inline, 1 ID, 0 classes, 1
element for a Total Specificity of 101.
| | 02:42 | So it's pretty easy to calculate the
specificity once you know how these rules work.
| | 02:46 | That way, any time you are writing a
selector, if there is a selector that's
| | 02:50 | going to come in conflict with, and you
absolutely positively need that selector
| | 02:53 | to win, well, just up the specificity,
either add element to it or another ID,
| | 02:59 | based upon your page structure.
| | 03:00 | Most of the time you will be able to
do that and if you can't, you should
| | 03:03 | to employ another rule like Inheritance
where the cascade in order to get it to work.
| | 03:07 | Enough theory, let's go put this into practice.
| | 03:10 | Okay, so back in Dreamweaver, I have
our specificity.htm file open, and let's
| | 03:14 | talk about what my specific goals are here.
| | 03:18 | Throughout my entire site in the
sidebar, I have an h2 and an h3.
| | 03:22 | That's just the way the site is set up.
| | 03:24 | And currently my external style sheet
is driving all of those styles, but for
| | 03:28 | just this page I want that heading3 in
the sidebar to look a little different.
| | 03:33 | What it like to do is have no
background color whatsoever, and be slightly
| | 03:36 | smaller than what we have got there.
| | 03:38 | So we learned earlier with the cascade
that I could write in embedded style that
| | 03:42 | would overwrite this external style.
| | 03:44 | So that's what we are going to do.
| | 03:45 | So I'm going to go over to my CSS
Styles panel and choose New CSS Rule, and I'm
| | 03:51 | just going to choose a tag selector,
and we are going to do the h3 tag.
| | 03:54 | And instead of defining it in my main.
css, I want it in this document only.
| | 03:59 | So I'm going to go ahead and click OK, and for
background I'm going to type in, transparent.
| | 04:05 | That's actually going to remove any
type of background color or background at
| | 04:09 | all actually, and then for type, I'm
going to give it a font size of 1.2ems.
| | 04:16 | So I can make it a little
smaller than it is right now.
| | 04:20 | So I'm going to go ahead and also
change the foreground color, because I don't
| | 04:23 | think white is going to look really good.
| | 04:24 | So why don't we just go ahead and
change the foreground color to #063, perfect.
| | 04:30 | That is a -- that's sort of dark green
that we were using for the background.
| | 04:32 | So I'm going to go ahead and click OK.
| | 04:34 | And nothing, nothing happened. Now why is that?
| | 04:39 | Well, think about this for a moment.
| | 04:40 | In our external style sheet we are
using #sidebar h3, and if you remember our
| | 04:45 | chart from earlier that's 1 ID,
0 classes, 1 element, 101.
| | 04:49 | And if we look at our
embedded style, we just have h3.
| | 04:53 | That's a single only
selector, and that's only one.
| | 04:55 | So, 101 versus 1, 101 wins.
| | 04:58 | So what I need to do now is if I want
to take advantage of the cascade, I need
| | 05:02 | to make this at least the same specificity.
| | 05:04 | So I'm going to go ahead and do that
by going up to my CSS Styles panel,
| | 05:08 | clicking on the h3 selector, and
then in front of it placing #sidebar h3.
| | 05:14 | Now, they have exactly the same specificity,
and the cascade is allowed to do its thing.
| | 05:19 | So regardless of where it's found
within the cascade, the more specific rule is
| | 05:24 | always going to win.
| | 05:26 | It's very rarely that simple, because
most conflicts involve understanding
| | 05:30 | specificity, the cascade, and
inheritance, all working together.
| | 05:34 | So next, we'll put the three
rendering concepts together, and explore ways
| | 05:38 | that Dreamweaver makes finding and
resolving those rendering conflicts quick and easy.
| | Collapse this transcript |
| Using Dreamweaver to resolve conflicts| 00:01 | Now that we have a better
understanding of the rules that govern our CSS
| | 00:04 | rendering, let's take a look at all
three concepts in action, while we'll review
| | 00:08 | the tools that Dreamweaver provides us
with for resolving these conflict,
| | 00:12 | the CSS Styles panel's Cascade view.
| | 00:15 | So we are working in our rendering.htm file,
and we have got a couple of goals here.
| | 00:20 | Our first goal is to have the sidebar
on the left be a different color for
| | 00:24 | this page only, and we have written a
sidebar rule that's going to do just that for us.
| | 00:29 | But for some reason we have got to
figure out why that's not happening.
| | 00:33 | So I'm going to click inside my sidebar and
use the tag selector to choose the div#sidebar.
| | 00:38 | That's going to select my entire
sidebar and kind of focus on that.
| | 00:41 | Now in the CSS Styles panel,
we have two tabs up top.
| | 00:44 | We have an All View, which is what we
have been using, and we have a Current View.
| | 00:48 | Now the current selection mode allows us
to focus on the currently selected items.
| | 00:52 | So it's a way of sort of taking a closer
look at anything that you have selected.
| | 00:57 | So I'm going to go ahead and choose
that and as soon as I do that, I'm going
| | 01:00 | to close my Files panel because I really
wanted to have enough space for all of this.
| | 01:04 | We have three areas now.
| | 01:05 | We have a Summary section, an area that
describes either the rules or a summary
| | 01:10 | of all rules, and then the Properties.
| | 01:12 | Now, in the middle
section here we have two icons.
| | 01:15 | The first icon shows us the
information about a selected property.
| | 01:19 | So if you want to learn more about
what that property is, that's a really
| | 01:21 | good way to do that.
| | 01:23 | The second option is the one that I
typically have turned on, and that shows the
| | 01:27 | cascading of rules for the selected tag.
| | 01:29 | Now when I select that, I can see that
here are two sidebar selectors, and the
| | 01:33 | first one is setting the background
color, giving it a margin like, and setting
| | 01:38 | some padding on the bottom of the element.
| | 01:40 | Now by going up the cascade, and
click on this sidebar, and I see that its
| | 01:45 | background property has a strikethrough.
| | 01:46 | So that means that that's not being applied.
| | 01:48 | Notice that if I hover over that,
Dreamweaver is giving me a reason why.
| | 01:51 | I'll go back over to that for just a
moment and notice that it doesn't apply to
| | 01:54 | your selections, because it has
been overwritten by the rule #sidebar.
| | 01:58 | Now if I go up to these two rules,
it will tell me where it's defined in,
| | 02:02 | main.css, and what its
specificity is, in this case 100.
| | 02:05 | And this one is telling me exactly the
same thing. It's defined in main.css with
| | 02:09 | exactly the same specificity.
| | 02:11 | So if the specificity isn't what's causing
the problem, then it has got to be the cascade.
| | 02:16 | So I'm going to switch back to All,
and I can see now looking through my list
| | 02:20 | that indeed I have a sidebar
selector here and a #sidebar selector here.
| | 02:26 | So the one up top is the
one that's being overwritten.
| | 02:28 | Remember the cascade
says last rule applied wins.
| | 02:31 | So I'm going to take this and I'm going
to drag it all the way down and move it
| | 02:36 | into my embedded styles.
| | 02:37 | Now notice that I want to move that
over the embedded style tag, and I want to
| | 02:40 | move it down far enough to
where I can see that line.
| | 02:42 | When I release, now within the cascade
this is an embedded style and you can
| | 02:47 | see that we are getting the
background color that we want.
| | 02:50 | So in this case using the cascade was
the proper way of resolving that conflict.
| | 02:55 | Now let's turn our
attention to our main content.
| | 02:59 | We have two heading two tags in here,
one says to summarize, and the other
| | 03:03 | one says more reviews.
| | 03:05 | Now the second one that has more
reviews. It's kind of a secondary
| | 03:08 | subheading and so I would like it
to be smaller, underlined, and have a
| | 03:12 | slight color change.
| | 03:13 | Now I could have used an h3 tag, but
structurally I wanted it to be the same.
| | 03:18 | The best way to handle that formatting is
probably through the use of a class style.
| | 03:21 | So what we have done is we have created
a class selector of .secondary, and you
| | 03:26 | can see it's giving a border on the
bottom, setting color, setting a font size
| | 03:30 | and changing the width.
| | 03:31 | So changing a couple of things here.
| | 03:33 | I am going to go ahead and select
the heading2, using the tag selector.
| | 03:37 | So I'll just click inside the heading2,
chosen a tag selector, and in the
| | 03:41 | Properties Inspector I can
apply a class extremely easily.
| | 03:44 | I'm going to make sure I'm clicking
on the HTML tag, and for the class,
| | 03:47 | I'm going to grab the pull down menu,
and I'm going to choose Secondary.
| | 03:50 | Now as soon as I do that, I expect to
see the whole thing to restyle, and I don't.
| | 03:55 | All I get is that
border and the width changing.
| | 03:58 | So what we are seeing is we are
seeing these styles combining right now.
| | 04:01 | I'm not seeing the
secondary style overwrite that.
| | 04:03 | Well, let's turn back to our CSS Styles
panel and figure out what's going on there.
| | 04:07 | So I'm going to make sure to have this
element selected and in my CSS Styles
| | 04:11 | panel I'm going to switch to Current.
| | 04:12 | So now I can see right off the
bat in the order of the cascade that
| | 04:17 | .secondary class selector is a little
further up the list, you want it to be
| | 04:21 | the very bottom thing.
| | 04:22 | And if I hover over these, I can tell why.
| | 04:25 | The main rule that's rendering
it right now is this #content h2.
| | 04:28 | Again, if I hover over this, I can see
that it has a Specificity of 101 in main.css.
| | 04:34 | The secondary rule on the other hand,
notice that color is not applying,
| | 04:38 | font-size is not applying, and the
reason for that is because it is being
| | 04:42 | overwritten by a much more specific rule.
| | 04:44 | Notice the Specificity of this is just 10.
| | 04:47 | So, if I switch back to All, I can increase
the specificity of this rule and get to work.
| | 04:52 | So what I'm going to do now is
type in #content h2.secondary.
| | 05:00 | So instead of 101, this is now 111, and
when I select that, I notice that I get
| | 05:06 | the rendering that I want.
| | 05:07 | So there, I didn't have
to worry about the cascade.
| | 05:09 | I had to worry about
writing a more specific selector.
| | 05:12 | Now when most people learn about that,
what they will do is they will start
| | 05:15 | writing selectors that are far
more specific than they really need.
| | 05:19 | Sometimes you need that amount of
specificity and sometimes you don't.
| | 05:22 | Let me show you exactly what I'm talking about.
| | 05:25 | Notice that if I scroll down into this
More reviews section, I have different
| | 05:28 | types of books, drama,
comedy, and that sort of thing.
| | 05:32 | If I highlight them, I can again go
down to my Properties Inspector and I can
| | 05:36 | apply the class type.
| | 05:38 | I can see that it formats and changes
even though the rest of the text is being
| | 05:43 | driven by a much more specific selector.
| | 05:44 | Now, how do I know that?
| | 05:46 | Well again, I'm going to go ahead and
select that, choose span type, and go to Current.
| | 05:51 | I can see that there is a
selector that says #content ol li.
| | 05:55 | That has a specificity of 102.
| | 05:57 | It's currently being overwritten by a
selector that has a specificity of 10.
| | 06:01 | So, what's going on here?
| | 06:03 | Well, the cascade is not any issue,
because they are both in the same style sheet,
| | 06:06 | and specificity isn't coming into play.
| | 06:09 | So here we're seeing inheritance.
| | 06:11 | If I switch to Code view, you will
see exactly what I'm talking about.
| | 06:14 | Notice that the word drama is
being surrounded by a span tag.
| | 06:18 | So although it is normally inheriting
all those values from the parent list
| | 06:22 | item, in this case we are able to
overwrite what the list item is doing by
| | 06:26 | writing a simple class selector.
| | 06:28 | Understanding that prevents you from
having to write really, really specific
| | 06:31 | selectors and applying these sort of
generalized selectors where you need them.
| | 06:35 | Clearly having a solid understanding
of these three rendering concepts is
| | 06:39 | crucial to writing
efficient and flexible styles.
| | 06:42 | I feel very strongly that unless
someone really understands how the cascade,
| | 06:46 | specificity, and order of inheritance
works, that they will never really be able
| | 06:49 | to write organized
efficient or effective styles.
| | 06:52 | If you are new to CSS, I recommend
spending as much time as you can on these
| | 06:56 | concepts as you begin to
master cascading styles.
| | 07:00 | Your code will be much cleaner and
easier to maintain in the long run.
| | Collapse this transcript |
|
|
2. Using Dreamweaver's Starter PagesWorking with starter pages| 00:01 |
A great way to get started with CSS in
Dreamweaver or simply jump start your
| | 00:04 |
design is by using Dreamweaver's starter pages.
| | 00:08 |
Dreamweaver's starter pages offer over
30 standards compliant, cross-browser
| | 00:11 |
compatible layouts to choose from.
| | 00:13 |
These layouts, which were created by
Stephanie Sullivan, render consistently in
| | 00:17 |
almost any standards compliant browser,
including Internet Explorer for Windows,
| | 00:20 |
Versions 5.5, 6, and 7, Firefox for Mac,
and Windows version 1, 1.5, 2, and 3,
| | 00:26 |
Opera 8 and 9, and Safari 2.0,
and Google Chrome for that matter.
| | 00:30 |
So if there is any browser that's
relatively standards compliant, these guys are
| | 00:33 |
going to render perfectly within them.
| | 00:35 |
To access your starter pages, you
just go to the New Document dialog box.
| | 00:39 |
I'm just going to go to File and choose New.
| | 00:41 |
When you a select a new blank page, the
starter pages appear in this layout column.
| | 00:45 |
Notice that we get choices based
off of 1, 2, and 3 column layouts.
| | 00:50 |
So you can simply choose one of those.
| | 00:51 |
You can see a preview over to the side.
| | 00:53 |
You answer a couple of questions about
what type of document you would like and
| | 00:57 |
where you want your CSS placed, and
just hit Create, there is your design.
| | 01:01 |
The CSS that's created is layout only.
| | 01:03 |
It's very well commented and it's
really easy to customize for you own uses.
| | 01:07 |
Placeholder information and your
neutral background colors that you are seeing
| | 01:10 |
here are clearly marking these content
areas and it's really simple to replace
| | 01:13 |
them with your own content or
change the colors to what you want.
| | 01:15 |
Now, if I switch to Code View, you are
going to notice something about the CSS.
| | 01:20 |
To make sure that you really understand
how this layout is working, the CSS is
| | 01:24 |
fully commented, with really clear,
really concise description of how the page
| | 01:29 |
structure, class structure,
and layout styles are working.
| | 01:32 |
Additional comments point out
properties and styles focusing on creating
| | 01:35 |
web standards compliant code, and
we'll take a closer look at those a
| | 01:39 |
little bit later on.
| | 01:40 |
Now, when you create a starter page,
you can choose to add to CSS to a new
| | 01:44 |
external style sheet, append it to an
existing style sheet, if you already
| | 01:47 |
have one for your site, or to keep
the styles embedded in the new page, and
| | 01:51 |
that's what I chose here.
| | 01:52 |
In this chapter we are going to discuss
the benefits of using starter pages and
| | 01:56 |
some strategies that you can use when
adding them to your existing CSS workflow.
| | 02:01 |
| | Collapse this transcript |
| Defining fixed, elastic, liquid, and hybrid| 00:01 | When creating a new page based off
of a starter page, you can choose from
| | 00:04 | several layout options like 1, 2 or 3
column layout, and whether or not the page
| | 00:09 | should have headers or footers.
| | 00:11 | In addition to these specific element
choices, you also need to choose which
| | 00:14 | type of layout you want.
| | 00:16 | starter page come in four types.
| | 00:18 | We have fixed, elastic, liquid, and hybrid.
| | 00:22 | In this movie, we'll explore those
layout choices and when it's appropriate to
| | 00:26 | use one over another.
| | 00:28 | We are going to start by looking
at a fixed layout, and I have the
| | 00:30 | fixed.htm page open.
| | 00:33 | So with the fixed layout, these have
column widths that are set to a specific
| | 00:37 | pixel size, and they are not going to
change or resize based on either changes
| | 00:41 | in screen resolution, browser
window resizing, or font size changes.
| | 00:45 | So I'm going to go ahead and
demonstrate that by previewing this on my browser.
| | 00:48 | Now, I'm going to preview this in Firefox.
| | 00:50 | So some of the things that I'm going
to be doing here, like changing font
| | 00:53 | sizing, it's specific to Firefox, so
if you are using a different browser, be
| | 00:56 | sure to look up in its options or menus to
see how you would do it within your browser.
| | 00:59 | Now, if I resize the browser window, I
notice that my layout doesn't change at all.
| | 01:04 | Now, it's centered to the viewport, so
it's staying centered the whole time, but
| | 01:07 | you will notice that the widths of my
columns aren't being affected at all.
| | 01:10 | Now, what if I increase font size?
| | 01:12 | Well, I'm going to go up to View > Zoom.
| | 01:15 | I can also set an option to make sure
that I'm only changing the text size and
| | 01:19 | not zooming the entire layout.
| | 01:21 | So I want to make sure
that's turned on in Firefox.
| | 01:23 | Again, if you are using a different
browser, be sure to see how you can change
| | 01:26 | your font size up or down if you are
doing this little example along with me.
| | 01:29 | So if I increase the size of my font,
notice that although areas are getting
| | 01:34 | taller or skinnier, because the height
isn't fixed, notice that the width of the
| | 01:38 | columns is staying exactly the same.
| | 01:40 | So it doesn't matter if I resize my
browser window or increase and decrease the
| | 01:43 | size of my text, my columns are staying
exactly the same size and the width of
| | 01:47 | my layout is staying exactly the same size.
| | 01:50 | So a fixed layout is really great for
any time that you need fixed layouts,
| | 01:54 | or you are targeting a specific
browser window, or you are targeting a
| | 01:58 | specific resolution.
| | 01:59 | So I'm going to go ahead and close
Firefox, come back into Dreamweaver, and I'll
| | 02:02 | close the fixed design.
| | 02:03 | Now, the next one I want to open up is the
elastic file, so that we can see an elastic layout.
| | 02:09 | Elastic layouts have column
widths that are set to ems.
| | 02:11 | Now, an EM is a relative unit of
measurement based on the size of the font.
| | 02:16 | So resizing the browser won't really
change the layout, but the layout is going
| | 02:20 | to react to any adjustments that we make
in text size, and that of course can be
| | 02:24 | set by the client within the browser.
| | 02:26 | Now, this layout is ideal for
accessibility driven layouts or layouts that are
| | 02:31 | designed for smaller screen sizes.
| | 02:33 | So I'm going to go ahead and preview
that in my browser, and again, changing the
| | 02:37 | browser size doesn't really affect
the layout at all, other than just moves
| | 02:41 | where it's centered.
| | 02:42 | But watch what happens when I
increase or decrease the size of the text.
| | 02:45 | So if I increase the size of the text,
notice that the sidebar and the main
| | 02:49 | content region are getting
larger to accommodate that text.
| | 02:52 | If I shrink the size of the text,
notice that the main content regions and the
| | 02:56 | sidebar regions are shrinking down as well.
| | 02:58 | So this is a nice scalable
layout based on font size.
| | 03:03 | So this layout is great for
accessibility driven sites, layouts for smaller
| | 03:06 | screen sizes, or layouts for different
devices where the screen size is going to
| | 03:10 | change based upon the device that you are using.
| | 03:12 | So I'm going to go ahead and close
that and we'll close our elastic file.
| | 03:16 | Next up, I want to take a
look at the liquid layouts.
| | 03:20 | Liquid layouts have column widths
that are set to percentages of the total
| | 03:24 | browser or viewport width.
| | 03:25 | So these layouts are going to resize
based on browser size, and they are really
| | 03:29 | good for situations where there is no
one specific target resolution, or in
| | 03:33 | environment where the viewport
size is going to change frequently.
| | 03:36 | So I'm going to go ahead and
preview that in my browser.
| | 03:39 | This time I notice that increasing or
decreasing the font size doesn't really
| | 03:43 | change the width at all, and
it pretty much stays the same.
| | 03:46 | But I did notice that the width of this
was different from my other pages right
| | 03:49 | off the bat, because it's
based off of a percentage.
| | 03:51 | So if I resize the browser, notice
that the page widths are changing as well.
| | 03:57 | Now, there is something that
you need to be aware of here.
| | 04:00 | When you set something like a sidebar to a
percentage, let's say you make it 20 or 30%.
| | 04:04 | When you size that down far enough, you
are going to finally eventually get to a
| | 04:08 | part where the content can't fit
within that percentage anymore.
| | 04:11 | When you do that, you are going to
see something like this, where we have
| | 04:14 | content that's sort of overlapping each other.
| | 04:16 | Now, there are certain ways to deal
with that, such as setting up a minimum
| | 04:19 | width for our sidebar.
| | 04:20 | But that is something you need to be aware
of if you are going to use a liquid layout.
| | 04:25 | Next up, let's take a look at a hybrid layout.
| | 04:27 | Now, these are really interesting.
| | 04:28 | Hybrids layouts are a
combination of elastic and liquid layouts.
| | 04:32 | In a hybrid layout, certain columns
may be based on percentages, while others
| | 04:36 | could be based on text size.
| | 04:38 | In this particular example, our
content region is based off of a percentage,
| | 04:41 | where the sidebar is based off of an em.
| | 04:44 | This type of layout is usually used to
keep smaller columns from shrinking too
| | 04:47 | much as the screen is resized, while
allowing the larger columns to scale based
| | 04:51 | upon the available screen size.
| | 04:53 | So let's check that out.
| | 04:54 | So if I preview this in my browser,
I can see that resizing the browser
| | 04:59 | allows the main content to shrink or expand,
but that the sidebar stays exactly the same.
| | 05:05 | But notice that if I increase the font
size, the sidebar changes along with that.
| | 05:10 | So increasing or decreasing the font
size gives me more or less room for the
| | 05:13 | sidebar, where changing the browser
window size affects the main content only.
| | 05:19 | So it's a really nice flexible
layout that offers a lot of functionality.
| | 05:23 | It's a little bit more difficult to
maintain, because you have to keep track
| | 05:27 | of all those percentage values and EM values
and know exactly what they are pertaining to.
| | 05:31 | Now, I do want to mention that in
addition to these four layout choices, there
| | 05:34 | are several absolutely
positioned layouts to chose from.
| | 05:37 | Absolutely positioned elements are
removed from normal document flow and
| | 05:41 | they're positioned based on values that you give
to either top, left, right, or bottom positions.
| | 05:47 | Since these absolutely positioned
elements don't react to the elements around
| | 05:50 | them, they are typically only
used for static fixed size layouts.
| | 05:55 | Now that we have examined the
different types of layouts available, we'll
| | 05:57 | explore opening a starter page and
customizing the CSS for your own specific usage.
| | Collapse this transcript |
| Understanding starter page structures| 00:01 | While it's doubtful that any of the
starter pages will offer you exactly what
| | 00:04 | you need for your CSS based layouts,
they do offer you an easy way to jump
| | 00:08 | start your own designs.
| | 00:09 | Now that we have looked a few examples
of the page layout style options that
| | 00:13 | starter pages give us, let's choose a
layout and examine how the code and styles
| | 00:17 | are structured in
preparation for customizing the layout.
| | 00:20 | So I'm just going to go to File and choose New.
| | 00:23 | From our New document dialog box, I
want to make sure I'm focusing on a blank
| | 00:26 | HTML page, and from our CSS starter pages,
I'm going to scroll down and find the
| | 00:30 | 2 column fixed left sidebar, header and footer.
| | 00:34 | When you select that, you should see
the preview showing you that padlock,
| | 00:38 | letting you know that's a fixed layout,
and then you are going to have a nice
| | 00:41 | description to make sure that you are
getting the proper one with the left
| | 00:44 | sidebar header and footer.
| | 00:46 | Now, we need to tell it
where to place the layout CSS.
| | 00:49 | Our three choices of course are to
create a brand new file, link to an
| | 00:52 | existing file, which we don't have an existing
external style sheet, or add them to the head.
| | 00:58 | For the time being, let's keep them
embedded on the page and we'll move them later on.
| | 01:01 | So I'm going to go ahead and click
Create and the first thing I'm going to do
| | 01:04 | is go ahead and save this file.
| | 01:05 | I'm going to save it as 2col_layout.htm, and
I'm going to go ahead and save. There we go.
| | 01:13 | Now before we explore the CSS that's
controlling our page, let's take a look at
| | 01:16 | the structure that's been added.
| | 01:18 | At the top of the document, I can
click in the header and using the Tag
| | 01:22 | Selector I'm going to choose
the closest parent div tag.
| | 01:24 | I can see that has a div with an ID of header.
| | 01:27 | I have the sidebar directly
underneath that and it has a div with an ID of
| | 01:31 | sidebar 1, and beside that we
have a div with an ID of mainContent.
| | 01:35 | Now, how do I know what these IDs are?
| | 01:37 | Well, if you use the Tag Selector to
select a div tag or really any element
| | 01:41 | that has an ID, the Properties Inspector is
going to have an area that shows you that ID.
| | 01:45 | Honestly though, you can tell it
just from looking at the Tag Selector.
| | 01:48 | That pound symbol indicates an ID, so
by seeing div# mainContent, we know that
| | 01:54 | div tag's ID is main content.
| | 01:56 | If I scroll down, I can see I have one last
structural element, and that is the footer.
| | 02:01 | Now, all of these div tags are
contained within a div tag that's very
| | 02:05 | aptly named container.
| | 02:07 | So when we look at the CSS styles,
now we know what all those selectors are
| | 02:10 | going to be driving and which
elements they are controlling.
| | 02:13 | There is one more thing I want
to point out about this as well.
| | 02:16 | If we look at the body tag, the
body tag has a class applied to it.
| | 02:19 | So the same way that pound symbol
means ID, that period indicates a class.
| | 02:24 | We can see that this class is twoColFixLtHdr.
| | 02:28 | So very descriptive as to what this layout is.
| | 02:30 | Well, if go up to my CSS Styles panel,
I can see that that is being used to
| | 02:34 | create descendant selectors that
target those specific elements.
| | 02:37 | Now, this technique of applying a class
attribute to the body tag to help drive
| | 02:42 | layout is a really cool technique.
| | 02:44 | So what it allows you to do is write
different styles based on which layout you
| | 02:48 | are using, and you can just
use the class to trigger that.
| | 02:51 | So if you have multiple layouts,
which we eventually will with ours, you
| | 02:54 | can simply trigger that by changing the
class tag on the body, boom, brand new layout.
| | 02:59 | So it's a really, really neat technique.
| | 03:00 | Well, let's take a closer look at the CSS
to kind of figure out what's going on here.
| | 03:04 | So I'm going to switch to Code View,
and I'm going to scroll up till I get to
| | 03:09 | the start of my CSS.
| | 03:11 | One of the things I want to point out
again is how well commented the CSS is.
| | 03:15 | So it's pretty easy to try
to figure out what's going on.
| | 03:18 | One of the first things I want to
talk about is what's driving this layout.
| | 03:21 | This is a float-based layout, and if we
go up and find our container selector.
| | 03:26 | So this is what's driving that parent
div tag around everybody, we can see that
| | 03:29 | we have a width of 780 pixels.
| | 03:32 | So if you wanted that to be wider or
skinnier, you could just change that value
| | 03:36 | and your whole layout is
going to get wider or skinnier.
| | 03:38 | Now, if I scroll down and take a look
at the sidebar and the mainContent, I get
| | 03:43 | a feel for how we are getting our two columns.
| | 03:45 | The sidebar is being floated to the left.
| | 03:48 | That's a very common technique for
laying out pages, and in our chapter on
| | 03:51 | Layout we talk a lot more about floats.
| | 03:54 | That has a fixed width of 200 pixels.
| | 03:56 | So if you modify the width of the
container, you would probably want to go in
| | 04:00 | and modify these widths as well.
| | 04:01 | Now, our mainContent isn't being
floated, but take a look at this margin.
| | 04:06 | We have a left margin on that of 250 pixels.
| | 04:09 | That's pushing the mainContent away
from the sidebar, allowing the two of them
| | 04:13 | to appear side by side.
| | 04:14 | So if you adjust one value, you
pretty much have to adjust another one.
| | 04:18 | Now, those are the things that you
really have to look out for and make sure
| | 04:21 | that you don't modify.
| | 04:22 | One more thing that I would like to
point out is that, if I look in the source
| | 04:25 | code itself, if I go all the way down
to the footer, I can see that just above
| | 04:29 | that there is a little
bit of non-semantic markup.
| | 04:32 | So we have a line break with
the class clear float applied.
| | 04:35 | Going back up to take a look at the CSS,
we can see that the class clear float
| | 04:40 | is doing something that's called clearing.
| | 04:43 | Now again, we are going to talk a lot
more about this in the chapter on Layout,
| | 04:45 | but essentially what clearing does
is it stops the float processes and
| | 04:49 | reestablishes normal document flow.
| | 04:51 | That's going to keep our footer
down at the bottom of the page.
| | 04:53 | So while you should feel free to modify
some of these things, you want to make
| | 04:57 | sure that you know what they are doing
so that you know what type of an effect
| | 05:00 | your modifications will have.
| | 05:02 | Now, these styles are for the most part
pure layout, but there are a few things
| | 05:06 | that we are probably going to takeoff,
these backgrounds for example, in order
| | 05:09 | to customize our own layout.
| | 05:11 | So our goal is going to be to take
this CSS and make sure that it's pure
| | 05:14 | structural layout and nothing else.
| | 05:16 | Now, there is one more thing that
we need to fix before we can move on.
| | 05:19 | I notice that in my styles, our
sidebar is identified as sidebar1.
| | 05:25 | Now, that opens up the possibility
obviously of having multiple sidebars.
| | 05:28 | For our particular site layout, we are
only going to have one sidebar, so we
| | 05:32 | don't really need the 1 there.
| | 05:33 | It's not as descriptive as it could be.
| | 05:35 | I'm going to remove that and just have
the selector be twoColFixLtHdr #sidebar.
| | 05:41 | You will find that on line 31.
| | 05:42 | Now, if I'm scrolling up or down, I
notice that I don't really have any other
| | 05:47 | selectors that are targeting the sidebar,
but it doesn't mean that I'm finished.
| | 05:51 | I need to go down into my code and find
on line 84, where my div is being given
| | 05:56 | the idea of sidebar1 as well.
| | 05:58 | We need to change that in both places.
| | 06:00 | So I'm going to go ahead and
replace sidebar1 there with sidebar.
| | 06:04 | So we can go ahead and save that,
switch back to Design View to make sure
| | 06:08 | that no changes occurred and we didn't spell
anything incorrectly, and we are ready to continue.
| | 06:13 | So now that we have examined our page
structure, we are free to modify our
| | 06:17 | styles to better fit our desired layout.
| | 06:19 | In our next exercise, we'll highlight
some of the ways that Dreamweaver makes
| | 06:22 | editing those styles globally a snap.
| | Collapse this transcript |
| Modifying CSS globally| 00:00 | Now that we have decided on our layout
style and made some small modifications
| | 00:04 | to the CSS and the structure, we need
to modify the code so that it will work with
| | 00:08 | our site layout strategy.
| | 00:10 | One of the big pluses of using starter
pages is the flexibility they give us by
| | 00:14 | placing a class style on the body tag.
| | 00:17 | Our plan is to have two
versions of our 2 column layout.
| | 00:20 | One with a wider sidebar than the other.
| | 00:23 | Now, the current class name doesn't
really relay information about how our site
| | 00:27 | will be setup. Notice that
it just says twoColFixLtHdr.
| | 00:32 | To fix this, we are going to rename
the class style so that it accurately
| | 00:34 | reflects our layout.
| | 00:36 | Additionally, the starter page CSS does
focus mainly on layout, but there are a
| | 00:40 | few presentation properties we want
to remove, specifically borders and any
| | 00:44 | background colors that they might have.
| | 00:45 | Now, we could overwrite those
properties with other selectors later on, but
| | 00:49 | leaving behind properties that you plan
to overwrite isn't really a good idea,
| | 00:53 | and since we'll be merging these
styles with our presentation styles later,
| | 00:57 | we'll go ahead and rid of them.
| | 00:58 | So I'm going to go ahead and do that now.
| | 01:00 | So I have opened up our 2col_
layout file, found in the 02_04 folder.
| | 01:04 | There are a couple of different ways that I could
go ahead and get rid of these presentation properties.
| | 01:08 | One I could go into Code View and
scroll through my code and delete all those,
| | 01:11 | or I'm going to use the CSS Styles
panel, because we don't really have that many.
| | 01:15 | So I'm going to go over to the CSS Styles panel.
| | 01:18 | I'll double click the Files tab to close that.
| | 01:20 | That way I can grab this dividing
line and go down and see all my styles.
| | 01:23 | Now, if I click on the body tag, I
get a nice summary of all the properties
| | 01:26 | that are being set.
| | 01:27 | Most of the properties are okay, but
this background property, I want that
| | 01:31 | removed, because that's more
of a presentation property.
| | 01:33 | So I'm going to click on that and after
I click on the background property, I'm
| | 01:38 | going to go down to the Trash Can icon,
which is in the lower right hand corner
| | 01:41 | of the CSS Styles panel and I'm
going to click to delete that property.
| | 01:44 | Now, I cannot caution you enough about that.
| | 01:48 | First, you want to make sure that you
click on the property that you want to
| | 01:51 | delete, because if you are focused on
the rule, you will delete the rule, if
| | 01:55 | you are focused on the style tag, you will
delete all the rules, so you want to be careful there.
| | 01:59 | The second thing is you want to avoid
double clicking it, click it just once,
| | 02:03 | because if you keep clicking it, you
are just going to go down to the list and
| | 02:06 | delete all of the properties.
| | 02:08 | So with that being said, let's keep going.
| | 02:09 | If I go down to the container selector,
I see that it has both a background and
| | 02:14 | a border, so I want to get rid of both of those.
| | 02:18 | If go to the header, I want to get rid
of the background. Header h1 is fine.
| | 02:24 | Sidebar has a background but no border, so
we are going to get rid of the background.
| | 02:28 | MainContent is okay.
| | 02:31 | Footer also has a background.
| | 02:33 | Now, these other selectors, the
paragraph inside the footer and some of these
| | 02:36 | classes don't have
anything that we need to change.
| | 02:39 | So that goes in and strips out all
the presentation markup, although there
| | 02:42 | really wasn't that much of it, so
that was pretty quick and easy to do.
| | 02:45 | Well, not all your changes
are going to be quite that easy.
| | 02:48 | For example, we are going to need to
rename the class style driving a layout.
| | 02:51 | Their current style name,
twoColFixLtHdr, is very descriptive, but it doesn't
| | 02:56 | really reflect what our site is going to need.
| | 02:58 | Our site is actually going to use three layouts.
| | 03:00 | One with a wider sidebar, one with the
skinnier one, and then we are going have
| | 03:04 | one that's just a single column layout.
| | 03:06 | With that in mind, the class name
needs to identify which layout this is.
| | 03:11 | So we are going to use three class
names, two col large side, two col small
| | 03:16 | side, and one column.
| | 03:19 | These names will identify the
number of columns that we have in case we
| | 03:21 | ever need to change or add another
column layout to the site, so you want
| | 03:24 | to keep them descriptive.
| | 03:25 | Now, there are a couple of different
ways that we could rename this manually.
| | 03:28 | One is we could go into our CSS Styles
panel, highlight all of them, copy and
| | 03:32 | paste them and get them all fixed,
and then find wherever on our code class
| | 03:35 | it's being applied.
| | 03:36 | As you can imagine, that's
really not that efficient.
| | 03:38 | We could also go and do a Find or Replace.
| | 03:41 | Find that in source code, and find
that as an attribute and replace it and
| | 03:45 | again, not all that efficient, although
certainly more efficient than doing it by hand.
| | 03:48 | Well, we do have another option.
| | 03:51 | If you go up to the CSS Styles panel,
I'm going to click on any of the rules
| | 03:54 | that have that twoColFixLtHdr class on it.
| | 03:57 | It doesn't matter which one.
| | 03:58 | It could be any of these guys.
| | 04:00 | I am just going to go ahead and right
click the rule, and when I do that, I
| | 04:04 | notice I have an option for renaming the class.
| | 04:06 | Now, this is very different than what
you would get if you just double click the
| | 04:10 | rule and change the name this way.
| | 04:12 | This is not the same thing.
| | 04:14 | This would change that rule
independently of everybody else, and it wouldn't
| | 04:18 | prompt any type of automation from Dreamweaver.
| | 04:20 | However, right clicking on the element
or Ctrl clicking on the Mac is going to
| | 04:23 | give you this Rename Class option.
| | 04:25 | So again, that's going to bring
up a dialog box, and it's going to
| | 04:28 | self-populate, because we were focused
on that particular rule, and it's going
| | 04:32 | to self-populate with twoColFixLtHdr.
| | 04:34 | Now, it gives us a pull-down menu, and we
could browse through any available class.
| | 04:38 | So if you don't have the one that you
are looking for focused, you could still
| | 04:41 | grab that from the pull-down menu.
| | 04:43 | Now, it wants to know what we want to name this.
| | 04:45 | So we are going to go ahead and name
this again twoColLgSide, so this is
| | 04:52 | actually the larger of the two
sidebars we are going to use.
| | 04:54 | Now, you will notice that that's all
one word, and I have used capital case
| | 04:57 | naming, capital C, capital L, capital,
S as I'm putting those words together.
| | 05:01 | So you want to follow some pretty
standard naming conventions, and if you are
| | 05:04 | working on a team, you want to come up
with a standard convention of how you
| | 05:07 | guys should name these classes so that
everybody kind of knows what's going on here.
| | 05:12 | Now, when I click OK, something really
cool is going to happen, not only is it
| | 05:15 | going to go into all my CSS and make
all of my changes for me, but it's also
| | 05:20 | going to go down into the code and
change it wherever the class is found
| | 05:23 | applied in the code.
| | 05:24 | Now, that was only applied in one place, in
this particular page, which is the body tag.
| | 05:28 | But imagine a class that
you have got everywhere.
| | 05:31 | It can really do a nice job of that.
| | 05:32 | As a matter of fact, you can see the
Results panel opens up and it tells me
| | 05:36 | where it changed all of that at.
| | 05:38 | Take a look at my CSS Styles panel, now
it says two column large size instead of
| | 05:41 | the two column fixed, which it said before.
| | 05:43 | That's really cool.
| | 05:44 | Now, you are saying, hey,
that's really neat. It automated it.
| | 05:47 | It did all that.
| | 05:48 | That was wonderful, but what if I
have used this class in say 200 pages?
| | 05:52 | Well, there is a really cool little
feature in Dreamweaver called Find or
| | 05:55 | Replace that can help you with that.
| | 05:56 | What's really neat about this, if
I go up to Edit and choose Find and
| | 06:00 | Replace, it saves any query that you
do, even if you are not really aware
| | 06:04 | that you are doing a query.
| | 06:05 | Usually, any time you do any type of a
global modification, Dreamweaver just
| | 06:09 | kind of runs a Find and Replace command
for you, and it uses something known as
| | 06:13 | Regular Expressions to
help filter the stuff out.
| | 06:16 | Regular Expressions can be kind of tricky.
| | 06:17 | So if you can find a command that
will do this for you, notice that it will
| | 06:21 | populate this with the
Regular Expression that you need.
| | 06:24 | Now, even more powerful is the fact
that currently it says Find in Current
| | 06:27 | Document, but if I grab the pull-down
menu, notice that I could do that to a
| | 06:31 | selected Folder or my Entire Current Local
Site if I needed to make that change site-wide.
| | 06:36 | I could also save this query by
clicking here and then load it up later on.
| | 06:39 | So if you run that command once and
it's something you need to do multiple
| | 06:43 | times, you could just bring this up,
load the query up, and run it on the page
| | 06:47 | or folders that you need to apply this to.
| | 06:48 | So I'm just going to not do anything
here and close that out. I just wanted to
| | 06:51 | show you that, because I think that
is a really cool way of doing things.
| | 06:56 | Now, automating these features really
does help, but you shouldn't assume that
| | 06:59 | it's going to get everything.
| | 07:00 | As a matter of fact, you know exactly
what happens when assumptions are made, we
| | 07:03 | typically leave things
behind and mess things up.
| | 07:06 | So I want to switch over to Code View
real quick and scroll up into my code,
| | 07:10 | because I'm going to find
something out really fast.
| | 07:13 | Notice that we have a few conditional comments.
| | 07:16 | So this is a conditional comment that
passes along selectors only if Internet
| | 07:19 | Explorer 5 is the browser being used.
| | 07:22 | We also have another conditional comment
that's passing along a few selectors if
| | 07:26 | it's just generic Internet Explorer.
| | 07:28 | So what these are doing is they are
passing specific selectors to Internet
| | 07:31 | Explorer Version 5 and then any version
of Internet Explorer to kind of fix some
| | 07:35 | of the browser bugs or browser
peculiarities that Internet Explorer has.
| | 07:39 | Well, that's great, but our Find and
Replace that we just did, that global
| | 07:43 | command that we just ran, did not work for that.
| | 07:47 | So I want to make sure that
those are being changed as well.
| | 07:49 | I'm going to go up, and because I'm a
bad typist, and I want to make sure I have
| | 07:53 | got this exactly right, I'm going to
copy that class from an existing selector,
| | 07:57 | and then I'm just going to paste it
right in wherever I find them in these guys.
| | 08:02 | Now, we don't have very many of these,
so it's not taking us a long time or a
| | 08:07 | lot of work to do that, but if we did
have a lot of them, we still could make
| | 08:11 | this work with the Find and Replace.
| | 08:12 | Instead of searching for a specific tag,
we could search for a source code, and
| | 08:16 | it would find this and it
would replace it properly.
| | 08:18 | So you always want to double check, but
usually there is a way to sort of maybe
| | 08:22 | combine a couple of Find and Replaces
to make sure that you get everything.
| | 08:26 | Specifically, that would work
really well if you were doing this change
| | 08:29 | globally or site-wide.
| | 08:30 | So now we have got what we need.
| | 08:32 | Our CSS is pretty much purely layout,
and by clarifying on isolating this
| | 08:38 | layout CSS, we are going to make it a
lot easier to right our presentation
| | 08:41 | styles independently of the layout, or to
merge these guys together a little bit later on.
| | 08:46 | That's what we are going to do next.
| | 08:47 | We are going to integrate the layout
styles with some existing presentation CSS
| | 08:51 | that we have already written and learn
how to efficiently move styles from one
| | 08:54 | file to another using the CSS Styles panel.
| | Collapse this transcript |
| Moving CSS between files| 00:00 | Often, you will decide that where
your styles were originally placed is not
| | 00:04 | where you would like to deploy them.
| | 00:05 | In this case, all of our layout styles
are currently embedded within this file.
| | 00:10 | Well, that works great for this page.
| | 00:11 | For our entire site to be driven by
this layout, we need to place the styles in
| | 00:15 | an external style sheet.
| | 00:17 | Let's see just how easy it is to
move styles from one location to another
| | 00:21 | within Dreamweaver.
| | 00:22 | So here we have our 2col_layout file open,
and you can find this in the 02_05 folder.
| | 00:26 | So I'm going to go into my CSS Styles
panel and I notice that at the very top
| | 00:31 | that I see the style tag, so that
means that these are embedded styles.
| | 00:34 | I need to move them to an external style sheet.
| | 00:36 | Now, in some cases you are not going
to have an external style sheet that you
| | 00:40 | already want to move these to, so you
are just really migrating these styles
| | 00:43 | from here to an empty CSS file.
| | 00:45 | But what if you already
have some presentation styles?
| | 00:47 | For example, maybe you have an
existing layout and you are changing this to
| | 00:51 | another layout, so you need new layout
styles, but your presentation styles are
| | 00:55 | going to stay the same.
| | 00:55 | So you need to merge those two together.
| | 00:57 | Well, that's kind of the
situation we find ourselves in.
| | 01:00 | If I look over in the Files panel, at
the 02_05 folder, and I open up the CSS folder,
| | 01:04 | I see that there is an
external style sheet named main.css.
| | 01:08 | If I double click that, I can see
that inside of this file we have a lot of
| | 01:13 | presentation styles, but no layout styles.
| | 01:16 | So I would like to move everything
that's currently embedded in the head of my
| | 01:20 | layout document into that external style sheet.
| | 01:22 | Now, that would work just fine, but
there is a couple of things you need to know
| | 01:26 | about moving styles from
one location to another.
| | 01:28 | There is a lot of different ways to do this.
| | 01:30 | One way would be to go ahead and copy and
paste the styles from one document to another one.
| | 01:34 | As you can imagine, that's pretty
much the least efficient way to do that.
| | 01:38 | Another way would be to
use the CSS Styles panel.
| | 01:41 | If I select the top body tag, hold my
Shift key down, and click on the last
| | 01:47 | selector, which in this case is
clear float, you will notice that I have
| | 01:50 | them all highlighted.
| | 01:51 | So we switch back over to our 2col_layout page.
| | 01:54 | We'll go in the CSS Styles panel, and you
are going to highlight all of these selectors.
| | 01:58 | Now, if I Right click or Ctrl click on
the Mac, I'm going to get the option to
| | 02:03 | move these CSS rules.
| | 02:05 | That's what I want to do, but I need to
know something about how this process works.
| | 02:10 | Currently, if I take these selectors and
move them into my main.css file, we are
| | 02:14 | going to have a few conflicts.
| | 02:16 | There is a few selectors
that are exactly the same.
| | 02:19 | So maybe I have got more than one
twoColLgSide header selector, or maybe more
| | 02:23 | than one twoColLg sidebar selector.
| | 02:25 | At any rate, even if I don't have a
conflict, it's going to try to place these
| | 02:29 | rules close to each other.
| | 02:30 | So if it sees another sidebar rule, for
example, it's going to take the sidebar
| | 02:33 | rule and move it there.
| | 02:35 | Dreamweaver in that case
is trying to do you a favor.
| | 02:37 | It's trying to keep your styles organized.
| | 02:40 | But in this case, in terms of an
organizational standpoint, I would really like
| | 02:43 | to have my layout styles
separated from my presentation styles.
| | 02:47 | There is a way to do that, but we have
just going to have to trick Dreamweaver
| | 02:50 | into thinking that it's
moving into an empty style sheet.
| | 02:53 | Let me show you what I mean.
| | 02:55 | Go back to main.css and starting on
line number four with the body selector,
| | 02:59 | highlight all the way down to the
very last line of code on the page.
| | 03:04 | It should be about line 72.
| | 03:05 | What we are going to do is we are going
to comment out all of our presentation
| | 03:09 | styles, move the layout styles over,
make sure they are maintained in discreet
| | 03:13 | blocks, and then uncomment
out the presentation styles.
| | 03:16 | It's a little bit of extra work, but
it allows us to keep the organizational
| | 03:19 | flow that we want for our CSS.
| | 03:21 | So I'm going to go over to my Code
toolbar, I'm going to find the Apply Comment,
| | 03:25 | I'm going to click on that and I'm
going to choose my multi line CSS comment.
| | 03:30 | So now it has the comment
text all the way around them.
| | 03:32 | If I deselect them and scroll, I make
sure that they are all sort of light gray.
| | 03:36 | I'm sure they are all commented out.
| | 03:38 | I'll save this file, and I'll
move back to my 2col_layout.
| | 03:40 | So now I'm ready to go ahead and move my styles.
| | 03:43 | So you may need to reestablish
focus on your selectors again.
| | 03:47 | Once you have that, Right click or Ctrl
click on the Mac and choose Move CSS Rules.
| | 03:52 | Now, within this dialog box we have two choices.
| | 03:55 | We can move the rules to an existing
style sheet, or we can create a new
| | 03:58 | style sheet on the fly.
| | 04:00 | That's extremely handy, and we'll take
advantage of that in just a little bit.
| | 04:03 | Right now however, I'm going to
browse, I'm going to go into 02_05 css
| | 04:08 | folder, and find main.css.
| | 04:10 | I'm going to go ahead and
click OK, and click OK again.
| | 04:14 | Now, if we had skipped the previous
step of commenting out main.css, right now
| | 04:18 | we would have a dialog box that would
essentially tell us if we had conflicts
| | 04:22 | between the rules that we are moving
based on the rules that were already in our
| | 04:25 | external style sheet.
| | 04:26 | This is a great way to identify whether
you have rules that are competing with
| | 04:30 | each other, and Dreamweaver is going to
ask us which one we would rather have.
| | 04:34 | Now, if I switch over to main.css, I
can see that the rules we moved have come
| | 04:39 | in to the bottom of the page.
| | 04:40 | Now, that's not really where I want
them, I want them up towards the top.
| | 04:43 | So what I'm going to do is
highlight all these guys.
| | 04:45 | I have to be very careful about this,
because you can see where it placed it.
| | 04:49 | It placed it right at the beginning of
the end comment tag, so I want to make
| | 04:52 | sure I don't mess that up.
| | 04:53 | I can cut these or I could just drag
them if I wanted to, but cutting them is a
| | 04:57 | little bit more precise.
| | 04:59 | Then you will notice that there is a
comment up here for presentation styles.
| | 05:02 | I'm going to paste it above that comment.
| | 05:05 | I'm then going to copy the
presentation styles comment, paste it in front of
| | 05:10 | my layout styles and I'm going to change
that, so that this now reads layout styles.
| | 05:15 | Now, I have two blocks of selectors.
| | 05:17 | The first block are my layout selectors,
and the second block beneath them are
| | 05:22 | my presentation styles.
| | 05:23 | Now, currently our presentation styles
are still commented out, so I'm going
| | 05:27 | to go ahead and highlight all of those guys,
and then I'm just going to remove the comment.
| | 05:32 | So now I have got my style sheet
organized the way I want, in two blocks of
| | 05:35 | code, layout styles and presentation
styles, and Dreamweaver handled moving all
| | 05:39 | those around for me.
| | 05:40 | So I'm going to go ahead and save main.css.
| | 05:43 | Part of you is probably saying, well,
wait a minute, you could just have copied
| | 05:46 | and pasted it anyway, because
you did have to reorganize them.
| | 05:48 | You are right, I could have, but
another very important step was taken by me
| | 05:52 | doing it through the use
of the CSS Styles panel.
| | 05:54 | If we switch back to our 2col_layout,
you will see what I'm talking about.
| | 05:57 | So if I switch back to that and
save the file, I notice that those
| | 06:00 | external styles are applied.
| | 06:01 | So in addition to moving the styles,
notice in the CSS Styles panel that it also
| | 06:06 | linked the style sheet for us.
| | 06:07 | So it's moving them and linking the
external style sheet all at the same time.
| | 06:11 | Now you are seeing that in addition to
our layout, we are also getting all of
| | 06:14 | our presentation styles.
| | 06:16 | All our formatting is coming in.
| | 06:17 | Our headlines look the way we wanted to.
| | 06:19 | We have got our background graphics.
| | 06:20 | This is starting to look really like we
want our layout to look, so that's fantastic.
| | 06:24 | If I switch over to Code View, I can
see towards the very top of my code that
| | 06:29 | all those embedded styles have been
replaced with this link tag on line number 10.
| | 06:32 | That is where it's bringing in our main.css.
| | 06:36 | Now, looking in Code View has
shown me one more thing too.
| | 06:39 | We have some conditional comments.
| | 06:41 | So if I look just below those, on lines
11 through 23, I can see that I have a
| | 06:46 | couple of conditional comments for
if IE 5 and just a general if IE.
| | 06:51 | Now, whenever you create or use a starter
page, you are going to see some of these.
| | 06:55 | What these are going to do is pass
certain selectors into different versions of
| | 06:58 | Internet Explorer to fix certain layout
bugs that Internet Explorer is notorious for.
| | 07:03 | Now, that's wonderful, but again, I
brought them in as embedded styles, and it
| | 07:07 | would be a real pain if I had to embed
these on every single page on my site.
| | 07:11 | It would be a lot better if I could
do the same thing I did with my layout
| | 07:14 | styles and externalize those.
| | 07:16 | I also don't want to have
to keep track of my main.css.
| | 07:18 | It would make a lot more sense if I had
separate style sheets for my browser hacks.
| | 07:22 | So we are going to use the same process
we just used, and again, a little bit of
| | 07:25 | slide of hand to make sure all of our
Internet Explorer specific styles are in
| | 07:29 | the proper location.
| | 07:31 | So what I'm going to do is I'll
do my Internet Explorer 5 first.
| | 07:34 | So you can see on line 11, we have a
conditional comment that says if IE 5, so
| | 07:38 | that's going to pass styles
just to Internet Explorer 5.0.
| | 07:42 | What I'm going to do is highlight the
comment above the selector, as well as the
| | 07:46 | selector twoColLgSide #sidebar.
| | 07:48 | So that's the only thing that's in
this particular conditional comment.
| | 07:52 | I'm going to cut it, and then this may
seem a little weird to you, I'm going to
| | 07:55 | paste it inside our embedded style tag.
| | 07:59 | Now, why did I do that?
| | 08:00 | Why not just go ahead and copy and
paste it into another external style sheet?
| | 08:03 | Again, it's the whole process of
creating the style sheet, at the same time
| | 08:07 | moving the rules and
having it linked all at once.
| | 08:09 | So I'm really performing about
three tasks here at one time.
| | 08:13 | If I go to my CSS Styles panel, I
can hit the Refresh button, and now in
| | 08:17 | addition to our main.css, I can see
towards the top I have that embedded style.
| | 08:22 | So I'm going to go ahead and
select that, only that selector.
| | 08:25 | I'm going to right click it
and choose Move CSS Rules.
| | 08:28 | When I do that, this time instead of
moving it to main.css, I'm going to move it
| | 08:33 | to a brand new style sheet.
| | 08:34 | I'm going to click OK, and then in the
02_05 css folder, I'm going to go ahead
| | 08:40 | and save this and I'm going
to save it as IE5_hacks.css.
| | 08:48 | That way any additional browser hacks
or browser irregularities that I need to
| | 08:52 | fix with selectors can go into
this Internet Explorer 5 file.
| | 08:57 | I am going to hit save.
| | 08:58 | I notice that I now have a link to that IE5_
hacks, and you just move the style from there.
| | 09:02 | So we need to create one more.
| | 09:04 | So what I'm going to do now is go
down to my general Internet Explorer
| | 09:08 | conditional comment, so if IE, so
that's not really version specific.
| | 09:12 | I'm going to go ahead and
select starting with the comment.
| | 09:14 | Notice that I'm not
selecting the style tags inside that.
| | 09:16 | I'm going to go all the way down,
select this comment, and again, I'm going to
| | 09:20 | move that up into my existing embedded styles.
| | 09:23 | Again, you can choose to copy and paste
it, or you can do what I have just done
| | 09:26 | here, which is drag it.
| | 09:27 | I'm going to hit Refresh, and now
I see both of those guys show up.
| | 09:31 | Now, this is interesting, because we
have comments both above and below the
| | 09:35 | rules, and I don't know if you noticed
it last time, but it took the comments
| | 09:39 | with it, so it didn't just move the selectors.
| | 09:41 | It also moved the comments as well.
| | 09:43 | A lot of that has to do with how these
are structured within the code, and if
| | 09:47 | the comment comes above or after the rule.
| | 09:49 | Let me show you what I mean.
| | 09:51 | So again, what I have done is I have
placed the selectors and their comments
| | 09:54 | on their own lines.
| | 09:56 | I'm going to go ahead and select both
of these guys, the twoColLgSide sidebar
| | 10:00 | and twoColLgSide mainContent.
| | 10:02 | Right-click them, or Ctrl-click them
on the Mac, and choose Move CSS Rules.
| | 10:07 | Now, this time I'm going to move it to
another new style sheet and this time I'm
| | 10:11 | just going to title it IE_hacks.
| | 10:14 | So this one is generic.
| | 10:15 | It's not version specific.
| | 10:17 | Again, I'm going to
place that in the CSS folder.
| | 10:20 | Now, notice that all of my selectors went,
but this particular comment stayed behind.
| | 10:25 | Why is that?
| | 10:26 | Well, it stayed behind because it will
take a comment above a selector, but a
| | 10:30 | comment underneath it.
| | 10:31 | It doesn't know which selector
it belongs to, so it leaves it.
| | 10:34 | So I can simply cut that and using my related
files, I can click on IE_hacks and paste it.
| | 10:40 | I am going to do a Save All, and I
just have one last thing to do, and that's
| | 10:45 | clean up a little bit of our source code.
| | 10:47 | So if I go back into our source code,
you can see that I have a style tag here
| | 10:50 | that's now empty and we are not using it.
| | 10:52 | Now, it will be very easy for me
to go ahead and remove the style tag
| | 10:55 | manually, right here in code view,
but I do want to show you how you can do
| | 10:58 | this in the CSS Styles panel.
| | 11:00 | If I go to my CSS Styles panel and
click on the style tag, I can highlight that
| | 11:04 | and then click the Trash Can.
| | 11:05 | It's going to go ahead and remove that and
notice that it deletes that from the code.
| | 11:08 | Now, I also need to make sure that my
Internet Explorer specific CSS isn't being
| | 11:14 | read by every single browser.
| | 11:15 | I mean that's what this conditional
comments were for in the first place.
| | 11:19 | So I'm going to remove the embedded
style tags within those comment tags, and if
| | 11:23 | it helps you to separate them on
different lines, you can go ahead and do that.
| | 11:27 | Notice that these conditional comments
begin with an if and they end with an
| | 11:30 | endif, so I have created some
empty space between those guys as well.
| | 11:35 | Next thing I'm going to do
is grab the specific links.
| | 11:38 | So IE_hacks is going to go into the
generic IE conditional comment, and
| | 11:43 | IE5_hacks is going to go into the
specific IE5 conditional comment.
| | 11:48 | So our cleaned up CSS looks like this.
| | 11:51 | We have one external link to main.css,
and then we have two more external links,
| | 11:55 | one to IE5_hacks and one to IE_hacks.
| | 11:58 | But they are only going to be read by
that specific version of IE, thanks to the
| | 12:02 | conditional comment.
| | 12:03 | I will do a Save All, and just to
make sure this is working properly,
| | 12:07 | I'll preview it in my browser.
| | 12:08 | Indeed, here is my layout, along with all
the presentational markup that I have had.
| | 12:13 | So by using Dreamweaver's CSS
Styles panel we are able to repurpose and
| | 12:17 | combine CSS files together to deploy the
styles the way that our particular site requires.
| | 12:22 | These capabilities make it even easier
to start from preexisting pages, like our
| | 12:25 | starter pages, or templates, and
migrates styles into new sites or files.
| | Collapse this transcript |
| Preparing custom starter pages| 00:01 | As good as the starter pages are, the nature
of their usage forces them to be quite generic.
| | 00:06 | Often, you may wish to have a starter
page designed that's more specific to your workflow
| | 00:10 | or one that has more
complex structure than the existing ones.
| | 00:14 | Dreamweaver makes creating custom
starter pages quick and easy and in this
| | 00:17 | exercise, we'll begin the creation
of a custom starter page by taking an
| | 00:21 | existing XHTML/CSS layout and modifying
it so that it will work as a starter page.
| | 00:27 | Now the only restriction for your
starter pages is that they need to have all of
| | 00:30 | the CSS contained within the document itself.
| | 00:33 | So we are going to have to move our
external rules in as embedded styles.
| | 00:37 | Other than that, they can contain
pretty much any content you want them to.
| | 00:40 | Now although your starter pages can be
as complex as you need them to be,
| | 00:44 | you should take care to make sure you are
using them how CSS-based starter pages
| | 00:48 | are intended to be used.
| | 00:50 | Dreamweaver templates offer a lot more
functionality if you are looking for a
| | 00:53 | template-based workflow.
| | 00:54 | So you really should do this to
give yourself a starting point from the
| | 00:57 | standpoint of your
CSS-based layout and styles.
| | 01:00 | So here we have our layout file opened
and the first thing I'm going to do is
| | 01:04 | change it to a much more descriptive name.
| | 01:06 | If I'm going through my starter pages
list, the layout starter pages isn't going
| | 01:10 | to be too descriptive about what's going on.
| | 01:12 | So I'm going to go to File and choose
Save As and remember I'm going to save
| | 01:15 | this in the 02_06 folder.
| | 01:17 | I'm going to go ahead and save this as
2colFixedLgImg.htm and we want to make
| | 01:31 | sure that the extension is the three-
digit .htm extension and not the .html.
| | 01:36 | starter pages use the .htm and it is
the default but if you are in a habit
| | 01:40 | of typing in yourself, you want to make
sure that you use the three-digit extension.
| | 01:44 | So we are going to go ahead and save
that and now we are well on our way.
| | 01:49 | Now one of things that we are going to
have to sort of tone down a little bit is
| | 01:53 | some of the page-specific
elements that we have in here.
| | 01:55 | We have some background graphics and
foreground image and some things like that,
| | 01:59 | that we want to make generic so
that we can replace them with anything
| | 02:03 | we want in our new layout.
| | 02:05 | So I need to go through my
styles and turn certain things off.
| | 02:09 | Now it's going to be a lot easier for
me to make edits and to make my content
| | 02:13 | generic if I turn my Style
Rendering off for a moment.
| | 02:16 | That's something that
Dreamweaver makes very easy for us to do.
| | 02:19 | Now I could go up to View and choose
Toolbars and you got to scroll down a
| | 02:24 | little bit to get to it and find the
Style Rendering toolbar, or if you are
| | 02:28 | looking for a quicker way to get to the
Style Rendering toolbar, you can simply
| | 02:32 | right-click the Document
toolbar and choose Style Rendering.
| | 02:35 | If you have never seen the Style
Rendering toolbar ever, this is an
| | 02:38 | extremely powerful toolbar.
| | 02:40 | It allows you to toggle your Style
Rendering on or off and it allows you to
| | 02:44 | choose which styles to render,
if you have multiple media types.
| | 02:48 | It even allows you to define design-
time style sheets and that's something that
| | 02:52 | we'll take a look at a little bit later on.
| | 02:53 | Now on the PC, I could float this
anywhere that I want and in fact,
| | 02:57 | as you'll notice, if I move it up here,
you can pretty much dock it wherever you want to.
| | 03:01 | On the Mac, it docks on the
document toolbar and it doesn't really move
| | 03:05 | from that location.
| | 03:06 | So whether you keep it open or
not is really kind of up to you.
| | 03:10 | Okay, so I'm just going to place it
into a location up here and using this
| | 03:14 | little stair-step icon, I'm
going to toggle my CSS display off.
| | 03:18 | Now I see totally unstyled content.
| | 03:20 | It's pretty much just not rendering my styles.
| | 03:22 | Well, I do have a headline up top
that says Desolve Photography.
| | 03:26 | I need to make all of that page-
specific content generic content.
| | 03:29 | So I'm going to highlight that and I'm
going to replace that with Page Identity
| | 03:35 | Header and then I'm going to scroll down and
find the headline, Passionate about photography.
| | 03:41 | I'm going to highlight that and I'm
going to change that to Content Header.
| | 03:46 | And then even though we can't really
see that unless we'll place our cursor
| | 03:49 | inside of it, the first line, 'Passion and
professionalism is at the heart of all that we do.'
| | 03:54 | You can see that that's in a
<span> tag with the class of accent.
| | 03:57 | So every time there is a first line of
that paragraph, it's going to be styled a
| | 04:00 | little bit differently.
| | 04:01 | So I'm going to go ahead and
just call that Accent text.
| | 04:06 | Now when you do that, you
may want to do it in code view.
| | 04:08 | Make sure you have it between <span> tags,
but you should be able to use the tag
| | 04:11 | selector to look down and make sure
you didn't replace the <span> tag.
| | 04:14 | So you want the text, Accent text, to
be within that span with the class of
| | 04:18 | accent applied to it. Okay great!
| | 04:20 | That looks pretty good.
| | 04:21 | One last thing to do,
let's go down to the footer.
| | 04:23 | I'll leave the copyright symbol
because I don't know about you but most of my
| | 04:26 | sites at least have some type of a
copyright information down there in the
| | 04:30 | footer and I don't want to
keep putting that back in there.
| | 04:32 | But for the rest of that, I'm just
going to replace the Desolve Photography
| | 04:35 | with footer content.
| | 04:38 | All the rest of the text is just
generic placeholder text so we can leave it.
| | 04:41 | So I'm going to save that file and scroll up
and I need to do something about this image.
| | 04:47 | Now this is a great image but it's
obvious I'm not going to need this image in
| | 04:50 | every single site I built of the starter page.
| | 04:52 | So I would rather replace
it with a placeholder image.
| | 04:55 | Placeholder image is going to give sort
of a generic containing box that you can
| | 04:59 | use to replace with a specific image
once you decide what you want to use there.
| | 05:03 | So I'm going to go ahead
and select that and delete it.
| | 05:06 | Now I'm going to be very careful not to
click anywhere else because right now,
| | 05:09 | my cursor is blinking exactly
where the image would use to be.
| | 05:12 | And then I'm going to go up to my
Insert toolbar and I'll click on the Common
| | 05:15 | objects and right here, under the
Insert Image icon, if I click the down arrow,
| | 05:21 | I see that one of my choices is
to create an Image Placeholder.
| | 05:24 | So I'm going to go ahead and click to
create an Image Placeholder and you can
| | 05:27 | name it whatever you want.
| | 05:28 | I'm just going to go ahead and name it large
_img and for the width and height on this--
| | 05:34 | Now I got this from the original image.
| | 05:35 | So you definitely want to check that
out before you do this, but it's 460 pixels wide
| | 05:40 | and it's 500 pixels tall.
| | 05:43 | Another thing you get to
do is pick a color for it.
| | 05:46 | I'm going to keep it sort of a generic
gray but if I wanted to, I could choose
| | 05:49 | any color I would like.
| | 05:50 | You could go ahead and alt text that as
well, but since I don't know what image
| | 05:53 | I might be putting in there later
on, I'm going to leave that off.
| | 05:55 | So I'm going to go ahead and click OK
and now I have this very large placeholder
| | 05:59 | image where my image used to be. Fantastic.
| | 06:03 | Now, I'm going to save this file and I'm
going to turn my Style Rendering back on again.
| | 06:07 | I can kind of see that all of those
specific areas of content have been
| | 06:11 | replaced, with just these generic items.
| | 06:14 | The one thing that I still need to
do though is modify some of my styles.
| | 06:17 | Some of my existing styles have
background graphics and things like that that
| | 06:21 | are again specific to the site.
I want to make them a lot more neutral.
| | 06:24 | So what I'm going to do is go through
a few of the rules and just edit them
| | 06:28 | so that they have sort of a generic
background color instead of a specific
| | 06:31 | background graphic.
| | 06:32 | I am going to start with the body
selector and I'm going to use the CSS
| | 06:35 | Styles panel to do this.
| | 06:36 | I'm going to sort of move the Files
panel down a little bit so I have got a
| | 06:39 | little bit more room and if I
highlight the body selector, I can see that it
| | 06:43 | has a background property and the
background property is currently a background image.
| | 06:47 | If I highlight the value of the URL, I
can change that and I can just type in
| | 06:51 | #ccc, so I can replace that
background graphic with the background color.
| | 06:54 | #ccc, as you can see, is
sort of a neutral light gray.
| | 06:57 | Now I'm going to find the #wrapper ID
selector and I'm going to replace its
| | 07:02 | background graphics.
| | 07:03 | So I'm going to go ahead and highlight
that value and replace that with #666,
| | 07:08 | which is another neutral gray.
| | 07:11 | Finally, we are going to go the
#header selector and replace its background
| | 07:15 | graphic with #333 and now, if I scroll
back up a little bit, you can see that
| | 07:22 | all of those specific background
images have been replaced with that just
| | 07:25 | really generic color.
| | 07:26 | You can choose any color scheme you want.
| | 07:28 | I tend to make it neutral and generic
so that when you are creating your page
| | 07:32 | off of it, it's a little bit easier
for you to put in whatever you would like
| | 07:34 | and you are not
predispositioned to any specific color.
| | 07:36 | All right, so let's save this.
| | 07:39 | Well, if you have watched the
previous movie, you know that you can move
| | 07:41 | styles from one style sheet to
another and we have a Move CSS Rules command
| | 07:45 | that does that for us.
| | 07:46 | But if you have already got both of
the areas that you want the styles to be
| | 07:50 | visible, all you really
have to do is drag and drop.
| | 07:52 | So notice that we have an external main
.css file and what I'm going to do is
| | 07:56 | select the first rule there, scroll
all the way down, hold the Shift key down
| | 08:01 | and select the last rule.
| | 08:03 | So now I have all of the rules in
that external style sheet highlighted.
| | 08:07 | I also have an empty embedded <style>
tag right there and so that's something
| | 08:11 | that already exists within my code.
| | 08:13 | So what I can do rather than right-
clicking and use the Move CSS Rule,
| | 08:16 | I can simply click and hold my mouse
down and drag those styles into that
| | 08:20 | embedded <style> tag.
| | 08:22 | Notice how it changes. It sort of
highlights and grows in size to let me know
| | 08:26 | that I'm going to locate the
styles within that particular area.
| | 08:29 | You have to be little careful here
when you are dragging and dropping styles.
| | 08:32 | Notice that when I move right over the
<style> tag, it does get bigger and
| | 08:35 | it has a box around it and that would
lead you to believe that you are about to
| | 08:38 | move those, but in fact, that wouldn't them.
| | 08:40 | What you want to do is you want to drag
that down a little bit further and
| | 08:42 | you will see that sort of
line show up underneath it.
| | 08:45 | When you see both of those things,
you are in good shape and you can let go.
| | 08:49 | So now we have moved our rules
from our external style sheet to our
| | 08:53 | embedded <style> tag.
| | 08:55 | We don't need the external style sheet
any more, so I'm going to select that link,
| | 08:58 | main.css, and then select the Trash Can
and that's going to go ahead and delete that.
| | 09:03 | One last thing, I want to comment my
rules out the same way to some extent that
| | 09:07 | the existing CSS starter
pages are commented out.
| | 09:10 | So I'm going to switch over to Code view
and I'm going to scroll all the way up,
| | 09:14 | till I find the top of my CSS code.
| | 09:17 | When I do that, I find that there is a comment
up there that refers to Desolve photography.
| | 09:21 | I'm going to get rid of that and
I'm going to replace it with sort of a
| | 09:24 | descriptive comment
about this particular layout.
| | 09:27 | So what I'm going to do is I'm going
to type in 2 column layout, and notice I
| | 09:32 | replaced the existing comment with
this that targets 1024x768 browsers,
| | 09:47 | large image in left column.
| | 09:49 | So I want to be as descriptive as I can there
and I'm going to go ahead and save that file.
| | 09:55 | So now our layout is ready to
become a custom starter page.
| | 09:58 | In our next exercise, we are going to
move it into the custom starter page
| | 10:01 | directory and give our design a
thumbnail and a description that's going to
| | 10:05 | display when we are choosing it
in the New Document dialog box.
| | Collapse this transcript |
| Creating custom starter pages| 00:01 | Now that we have prepared a custom
starter page, all that remains is to add it
| | 00:04 | to the proper folder within
Dreamweaver's directory structure.
| | 00:07 | Adding the HTML file by itself will
add the desired functionality but we are
| | 00:11 | going to take it a step further, by
adding a thumbnail and a description for the
| | 00:15 | New Document dialog box preview.
| | 00:17 | Now, before we do all this, it really
helps I think if you understand kind of
| | 00:21 | what's going on here.
| | 00:22 | When you go to File and you choose
New and you choose one of the existing
| | 00:26 | starter pages, you can see a preview
of that starting page, you can see a
| | 00:29 | description of it and of course, all the
CSS and the HTML are in the same place,
| | 00:34 | so it can either keep it that way or
it notice that you can create a new file
| | 00:37 | and export the CSS out to a new file.
| | 00:40 | Well that's all well and good but where is
it finding those and how do you add your own?
| | 00:44 | All right, so let me show you a little bit
about the directory structure of Dreamweaver.
| | 00:48 | What I'm going to do is I'm going to
bring up a dialog box that I have got here
| | 00:52 | and I have navigated to my Adobe
Dreamweaver CS4 directory on my hard drive.
| | 00:56 | Now if you are on the Mac, you are
going to go in your Applications directory
| | 00:59 | and if you are on the PC, like I am,
you are going to go into Program Files.
| | 01:02 | But after that, we are all
looking in the same place.
| | 01:04 | So go to your Adobe Dreamweaver CS4
and you want to go and look inside the
| | 01:08 | configuration folder.
| | 01:09 | You are going to find a folder called
BuiltIn and inside of that, you are going
| | 01:13 | to find a folder called Layouts.
| | 01:14 | So it's a little deep within there and
when you get there, you will find that
| | 01:18 | you have got two documents for
almost all of the starter pages.
| | 01:21 | One is the HTML file itself.
| | 01:23 | So feel free to open those
guys up and take a look at them.
| | 01:25 | Another is a PNG file and the PNG file
is what is being used as the thumbnail.
| | 01:30 | Now, you don't have to use a PNG, you
could use a JPEG or a GIFF file as well,
| | 01:35 | but the only thing that needs to be
consistent is size and it's kind of an odd size,
| | 01:38 | 227 pixels x 193 pixels, and if I
switch over to Fireworks, you can see
| | 01:43 | what we are going to use as our preview.
| | 01:45 | So we have a little image here that
we have made from a screenshot of our
| | 01:48 | previous page and just shrunk it
down so that fits in with this size.
| | 01:51 | All right, so I'm going to
minimize Fireworks and come back.
| | 01:54 | So this is where we need to copy those
files ever, but there is one more thing I
| | 01:57 | want to look at as well.
| | 01:59 | I notice that at the top of this
directory, there is a little folder here
| | 02:01 | called notes and if I open that up, I
can see that each one of those layouts is
| | 02:06 | accompanied by a file that has the name of the
file, plus the .htm, plus the .mno extension.
| | 02:12 | So what in the world is that?
| | 02:13 | Well, an mno stands for Macromedia Design Note.
| | 02:17 | So a little bit of the way back
machine there and if you open one of these up,
| | 02:21 | I'm just going to go ahead and right-click
on one and choose Edit with Adobe Dreamweaver,
| | 02:25 | you can see in reality it's just
simply an XML file and that XML file talks
| | 02:31 | about the document type, what the name
of the document is, a description of it
| | 02:35 | and the image that you
should be using for your preview.
| | 02:38 | So we are going to go
ahead and do that for ours.
| | 02:41 | The first thing I'm going to do is
open up any mno file from that notes
| | 02:44 | directory and I chose this one to
open up but you can choose any of them.
| | 02:47 | It doesn't really matter which one you
open up because what you are going to do
| | 02:50 | is you are going to change it
and save it as something else.
| | 02:53 | So the first thing I'm going to do is
do a Save As because I don't want to
| | 02:56 | change one of these
existing ones and have it be wrong.
| | 02:58 | So I'm going to go to File and choose Save As.
| | 03:01 | Now I'm going to save this in the notes
directory at the same exact place and if
| | 03:07 | you have trouble finding it, remember
it's Adobe Dreamweaver CS4 that is either
| | 03:10 | going to be in your Program
Files or your Application Directory.
| | 03:13 | Configuration > BuiltIn > Layout and
then notes, and I'm going to go ahead and
| | 03:18 | change this and I'm going to title it,
2colFixedLgImg.htm.mno, and that's exactly
| | 03:33 | the same as any of the HTML file.
| | 03:35 | I'm just adding an .mno extension to it.
| | 03:37 | So I'm going to go ahead and save it and now,
I can come in and change some of these values.
| | 03:42 | So one of the first things I'm going to do
is I'm going to change the document name.
| | 03:46 | Right now, it says 3 column fixed.
| | 03:47 | I'm going to change that.
| | 03:48 | I'm going to say 2 col
fixed, lrg image, 1024x768.
| | 04:01 | So that gives me a lot of information
about this file. It's two columns.
| | 04:04 | It's a fixed layout.
| | 04:05 | There is a large image
and it targets the 1024x768.
| | 04:08 | So I'm getting a lot of information
there, but I do have a description so I can
| | 04:11 | get a little bit more descriptive with that.
| | 04:13 | So I'm going to highlight that and I'm
going to type in, Two column fixed layout
| | 04:20 | with large image in left column.
| | 04:25 | Now, this is a description and it
can be anything you want it to be.
| | 04:28 | So, if it's a really specific layout, you
can be as specific as you need to there.
| | 04:33 | The other thing I need to do is
change the value of the thumbnail graphic.
| | 04:37 | So I'm going to highlight that and I'm
going to type in the 2colFixedLgImg.png.
| | 04:46 | Now that's going to be the name of
whatever the PNG file or GIFF file or JPEG
| | 04:50 | file that you are going to use as a preview.
| | 04:52 | I'm going to go ahead and save
that again and I'm going to close it.
| | 04:55 | So now we do have our design note but
we don't have our two files moved over it.
| | 05:00 | So what I'm going to do is bring out
my 02_07 directory and if you want to
| | 05:03 | minimize Dreamweaver and navigate to your
desktop to find those files, you can do that.
| | 05:08 | But inside 02_07, I see that I have my
2colFixedLgImg.htm file and my thumbnail file.
| | 05:15 | Then I'm going to browse out
and find that Layouts directory.
| | 05:20 | Now remember, we can find this in
your Adobe Dreamweaver CS4 folder.
| | 05:25 | Go in the configuration folder,
BuiltIn > Layouts and that's where we are
| | 05:29 | going to copy this.
| | 05:30 | So that's either going to be
in your Program Files or your
| | 05:32 | Application directory.
| | 05:33 | All I'm going to do is select both of
those files and simply copy them over.
| | 05:38 | I usually like copying rather than
dragging them that way in case something goes wrong,
| | 05:41 | I can always replace them.
| | 05:42 | All right, so I'm going to go ahead
and close both of those directories and
| | 05:46 | what I'm going to do is I'm going go ahead and
exit out of Dreamweaver and open a backup again.
| | 05:51 | You want to go ahead and do that so
that Dreamweaver will recognize and cache all
| | 05:54 | the changes that you have
made in your CSS starter pages.
| | 05:57 | So now I can go to File and choose New
and if I look Blank Page > HTML,
| | 06:02 | if I look first on my starter pages,
I'm going to scroll down and hey!
| | 06:06 | there is one that I didn't see before.
| | 06:08 | 2 col fix, lrg image, 1024 x 768.
| | 06:11 | That's the one we made.
| | 06:12 | If I click on that, I can see that I
have the thumbnail preview right over there
| | 06:16 | on the right-hand side.
| | 06:17 | Again, I can choose to create a new
file with the CSS or just add it to the
| | 06:21 | existing head of the document.
| | 06:22 | So if I click Create, there is my
menu layout using my custom layout.
| | 06:28 | As you continue to work with CSS-
based layout, so you will eventually find
| | 06:31 | yourself using the same layouts over
and over again and just kind of tweaking
| | 06:35 | them for individual projects.
| | 06:36 | By creating layout starter pages, you
can speed up this process considerably.
| | Collapse this transcript |
|
|
3. Planning Your CSSDesigning with CSS in mind| 00:01 | My background is in graphic design
for print so as I started designing web pages
| | 00:05 | in the mid 90s I found myself going
through a transformation regarding my design process.
| | 00:10 | I had no desire to learn how to code
HTML but since there weren't any programs
| | 00:15 | like Dreamweaver I really
didn't have any other options.
| | 00:18 | After programs like GoLive and
Dreamweaver came on to the scene, I quickly
| | 00:22 | left hand coding behind for the
WYSIWYG functionality that I was getting from
| | 00:25 | Dreamweaver and Fireworks working together.
| | 00:27 | The workflow was actually pretty simple.
| | 00:29 | You would lay your page out visually
using Fireworks, then you would use the
| | 00:32 | Slice tool to slice up the layout in
the table cells, and you would export that
| | 00:36 | as HTML and images for use in Dreamweaver.
| | 00:39 | If you were working on a simpler site,
you really had very little editing at all
| | 00:42 | to do once you reached Dreamweaver.
| | 00:44 | You can even tweak the page layout by
using roundtrip editing to return to
| | 00:47 | Fireworks, make the changes, and update
the HTML and images in a single click.
| | 00:52 | Well, regardless of how easy this
workflow was, as a designer you still had a
| | 00:56 | frustrating lack of
control over the visual elements.
| | 00:59 | I could use tables to force a certain
layout but I had almost next to no control
| | 01:04 | over typography or other design decisions.
| | 01:07 | Getting control of my designs back is one
of the reasons that I absolutely love CSS.
| | 01:12 | CSS allows me to control the design
of my page elements the way I want to.
| | 01:16 | The extension of CSS and XHTML as
web standards opens new doors for us as
| | 01:21 | designers but it also forces
us to adopt different workflows.
| | 01:25 | So currently, I still can use
Fireworks to mock my pages up but essentially
| | 01:29 | what I'm doing now is exporting out
these images as assets and then combining
| | 01:33 | them into my HTML in CSS that
I'm creating in Dreamweaver.
| | 01:37 | Now Fireworks continues to evolve as a
site markup and asset creation tool, and
| | 01:41 | in CS4 they have introduced a CSS and
images export feature that offers some
| | 01:46 | intriguing possibilities, but for
the most part we are still better off
| | 01:49 | generating our XHTML and CSS ourselves.
| | 01:53 | To be honest, I really don't
see hand coding as a chore.
| | 01:55 | It gives me a level of control over the
structure and presentation of my designs
| | 02:00 | that I just can't get any other way.
| | 02:02 | If you are a graphic designer making
the transition from print to the web,
| | 02:06 | the best advice I can give you is to
immerse yourself in web standards, learn CSS
| | 02:11 | and XHTML without reservation.
| | 02:13 | And don't expect web design to marry
your experiences in Quark, InDesign, or any
| | 02:18 | other page layout programs.
| | 02:19 | CSS gives you the visual control that
you want as a designer, but you have to
| | 02:23 | understand the structure of the
elements in your file and how CSS can control
| | 02:27 | those elements to really get
the most out of your designs.
| | 02:30 | I find myself now designing for the web
environment and its many possibilities
| | 02:34 | rather than trying to force the web
to conform to my design aesthetic.
| | 02:38 | In the end this creates cleaner, more
portable, and more accessible designs.
| | 02:42 | Training yourself to think in CSS as
it were and developing a workflow for
| | 02:47 | getting your vision from concepts to code.
| | 02:49 | We'll do this as we explore working
with Fireworks to design site markups and
| | 02:53 | create assets for your finished site.
| | 02:55 | If you don't have Fireworks, you can
download a free 30-day trial from adobe.com.
| | 02:59 | I would also like to point out that
although a few programs possess the robust
| | 03:03 | exporting and prototyping features that
Fireworks does, the concepts of planning
| | 03:07 | for CSS covered in this chapter are
the same, whether you are working in
| | 03:10 | Fireworks, Photoshop, or
on the back of a napkin.
| | Collapse this transcript |
| Using Fireworks to create site prototypes| 00:00 | Now, I know this title is about CSS and
Dreamweaver but for this chapter, we'll
| | 00:05 | be spending a lot of time in Fireworks.
| | 00:07 | If you were like me, your initial site
designs will be sketched out by hand,
| | 00:11 | either on a napkin or a sheet of paper.
| | 00:13 | For me, it's usually
whatever I can get my hands on.
| | 00:15 | I once did an entire site wireframe
using post-it notes. It can be done.
| | 00:20 | Usually the next step is to jump into
Illustrator, Photoshop, or Fireworks, and
| | 00:24 | refine the design and give
the client something to look at.
| | 00:27 | My site prototypes tend to be a little
bit more on the polished side, looking
| | 00:30 | almost exactly like the finished site.
| | 00:33 | That's due to the fact that I used my
prototypes to generate my site assets such
| | 00:37 | as images and background graphics and
to play around with the sites typography
| | 00:40 | before generating the actual CSS.
| | 00:43 | I'd be willing to bet that most people
use Illustrator or Photoshop more than
| | 00:47 | Fireworks to create site mock-ups.
| | 00:49 | That's due to the fact that most
designers are already familiar with those
| | 00:52 | programs and find them easier to add
to their site design workflow, starting
| | 00:56 | with CS3 and certainly
continuing with the CS4 release.
| | 00:59 | Adobe is giving us some compelling
reasons to take another look at using
| | 01:02 | Fireworks to create site prototypes.
| | 01:05 | You can import native Photoshop and
Illustrator files directly into Fireworks
| | 01:09 | allowing you to design to your
heart's content in those programs before you
| | 01:12 | begin your actual prototype.
| | 01:14 | Fireworks also allows you to generate
multiple file types from your prototypes,
| | 01:18 | including interactive HTML and PDFs.
| | 01:21 | These will allow your clients to get a
feel for not only how the site is going
| | 01:24 | to look, but to preview functionality as well.
| | 01:27 | Let me show you what I mean by
taking a look at the finished interactive
| | 01:30 | prototype that we're going to
creating a little bit later on.
| | 01:32 | So here is our site prototype and
this is generated from a single Fireworks file,
| | 01:37 | and you are probably like, well,
okay, what's the big deal? Check it out!
| | 01:42 | This is a true site prototype.
| | 01:44 | I did the entire site mock-up in one
file and I'm able to navigate to each of
| | 01:49 | the pages and even
preview certain functionality.
| | 01:53 | So we have a spry widget and I can use
Fireworks to preview the function of that
| | 01:56 | spry widget without
generating a single line of code.
| | 02:00 | Now that's pretty impressive.
| | 02:01 | Fireworks generated this entire
working prototype from just one file.
| | 02:05 | As a designer, it certainly makes
my job easier when going through
| | 02:08 | revisions with the client.
| | 02:10 | I can get my design and functionality
locked down prior to generating any code.
| | 02:14 | For the rest of this chapter, we're
going to focus on using Fireworks to create
| | 02:17 | our prototype, paying particular
attention to how the design process will be
| | 02:20 | influenced by our style sheet considerations.
| | 02:23 | Along the way, we'll explore some of the
features and tools that Fireworks gives
| | 02:27 | us to make generating our
prototypes easier and more efficient.
| | 02:30 | Now again, if you don't have Fireworks,
you can download a 30-day trial from
| | 02:34 | adobe.com for these exercises.
| | 02:37 | If you've never used it, I think
you're in for a pleasant surprise.
| | Collapse this transcript |
| Defining page structure| 00:00 | Almost every webpage design starts out
somewhere as a mock-up, whether you are
| | 00:05 | sketching out the design on a blank
piece of paper or using powerful tools like
| | 00:08 | Illustrator, Photoshop, or Fireworks.
| | 00:10 | Mocking up the page design not only
gives you the ability to experiment with
| | 00:14 | the design before creating your code,
it helps you understand what the precise
| | 00:17 | structure of the page, and thereby what the
structure of the code itself is going to be.
| | 00:22 | In this exercise, we are going to take
an empty Fireworks file and set up the
| | 00:26 | basic structure of the page.
| | 00:28 | When creating a CSS-based layout,
this is often the first step I take.
| | 00:32 | It allows me to identify the basic
block elements of my code as well as
| | 00:36 | experimenting with positioning, width,
and composition before any visual
| | 00:39 | elements are added to the mix.
| | 00:41 | Now, throughout these exercises, we are
going to be using some of the tools and
| | 00:44 | techniques that Fireworks gives us.
| | 00:46 | I want to say it upfront,
this is not a Fireworks title.
| | 00:49 | So if you are looking for a place to
get a blow-by-blow detail of how all these
| | 00:53 | tools are going to work, this is not it.
| | 00:55 | But Jim Babbage has a fantastic
Fireworks CS4 Essentials title on the lynda.com
| | 01:00 | Online Training Library.
| | 01:01 | And I can't recommend highly enough
going through that title if Fireworks is
| | 01:05 | something you're really interested in.
| | 01:07 | So, we've got a typical webpage
layout that we're going to be building.
| | 01:10 | It's going to have a Header, a
Sidebar, a Content region, and a Footer.
| | 01:15 | Is this site design going to be a
fixed layout versus a liquid layout, or we
| | 01:18 | going to have two columns or three
columns, and all of these things are going to
| | 01:22 | come into play as I'm
designing these content regions.
| | 01:25 | I am also thinking about what browser
resolution I'm going to be targeting.
| | 01:28 | Right down here in the lower right-hand
corner, you can see that our canvas is
| | 01:31 | currently 780 pixels wide by 2000 pixels tall.
| | 01:35 | The 780 is what I want to concentrate on there.
| | 01:37 | If I create a layout at 780 pixels
wide, I'm really targeting 1024x768 or
| | 01:44 | 800x600 browser resolution.
| | 01:46 | Now, Monitor sizes keep getting
bigger and the average resolution keeps
| | 01:50 | getting larger as well.
| | 01:51 | So your page designs can be
a good bit larger than that.
| | 01:54 | You just have to know who your audience
is going to be and what type of devices
| | 01:57 | they are going to be using, so
that you can target that resolution.
| | 02:00 | Now, for our layout, we're going to
do a fixed layout, and as I mentioned
| | 02:04 | before, we're going to have Header
elements, Sidebar elements, a Content region,
| | 02:08 | and a Footer element.
| | 02:09 | And the best thing for us to do is
just go ahead and block those regions out,
| | 02:12 | the rectangles and that way we can
change their width, their height, and move
| | 02:16 | them around and get them where we want them.
| | 02:18 | So the first thing I'm going to do is
just grab the Rectangle tool, and if
| | 02:20 | I look over in the Layers panel here in the
dock, I can see that I'm on the structure layer.
| | 02:25 | That is currently the only unlocked layer.
| | 02:27 | So make sure you're on that structure layer.
| | 02:29 | You can choose whatever color you want.
| | 02:31 | So using the Properties Inspector,
I could choose a color for this.
| | 02:33 | And since it's my Header, I'm just going to
give it red, and I'm going to give it no stroke.
| | 02:37 | So the stroke is this little pencil
icon right there, and I'm just going to
| | 02:40 | choose None, which is that white
box with the red line through it.
| | 02:43 | Now, you can make use of any color you want.
| | 02:44 | That's fine, I'm just going to use
separate colors for each element.
| | 02:47 | So, I'm just going to draw
a rectangle out on the page.
| | 02:49 | Now at this point, if I'm designing
this visually, I can begin to move
| | 02:53 | this rectangle around.
| | 02:54 | Since it's my Header, I'm going to put
it at the top of the page, and then use
| | 02:57 | our Pointer tool or Selection tool
that's called, to resize the element.
| | 03:00 | I can just grab that bottom right-hand
corner and I can resize this and move
| | 03:04 | this anywhere that I want.
| | 03:05 | And you can just visually say, well, I
think that's not tall enough for my Header.
| | 03:09 | This may be too tall, maybe that's too skinny.
| | 03:12 | You can just basically
block this area of content in.
| | 03:15 | Now, I find that once you have a
general idea as to how large you want this to
| | 03:19 | be, a good practice is to go back to
the Properties Inspector and really start
| | 03:23 | typing in these values so that you have a
specific widths, heights, and X and Y coordinates.
| | 03:27 | I want to make sure that my Header
Rectangle is 780 pixels wide and I'm going to
| | 03:32 | set the height to 200 pixels.
| | 03:34 | I think that's a good height for the
Header that we are going to need because
| | 03:36 | it's going to have to have a tag line,
and a logo, and our navigations are going
| | 03:40 | to be contained within here.
| | 03:41 | So I want to give it
enough height to achieve that.
| | 03:43 | I'm also going to position it at
an X and Y coordinate of 0 and 0.
| | 03:46 | I would put the top left-hand corner
above the top left-hand corner of the page.
| | 03:50 | One more thing that's really
interesting about what we can do here with these
| | 03:53 | primitive shapes in
Fireworks is that we can name them.
| | 03:56 | So, I'm going to take this Rectangle
and in the Properties Inspector, in the
| | 03:59 | upper left-hand corner, I'm going to name
this Header because it is the Header region.
| | 04:03 | Now later on, when I start exporting these
things out, this name can come into play.
| | 04:07 | For example, if I'm using the CSS
Exporting feature out of Fireworks that
| | 04:11 | can become a div tag.
| | 04:12 | So that's pretty cool and is
definitely worth your while to do that.
| | 04:15 | It identifies this as an actual region and
not just another shape that you have drawn.
| | 04:19 | All right, so now I'm going to go
ahead and create my next shape, and I
| | 04:23 | deselected the rectangle, and that
allows me to choose the Rectangle tool
| | 04:26 | and change the color.
| | 04:27 | For that I have no worry
about modifying this one.
| | 04:29 | I'll draw my Sidebar next.
| | 04:31 | So, I'm just going to go ahead
and choose a blue color for that.
| | 04:34 | Again you can choose any color that you want.
| | 04:36 | And in this case, I'm going to go
ahead and draw a Sidebar and I can position
| | 04:39 | this where I think the Sidebar needs to be.
| | 04:41 | And again I kind of play around a
little bit with the width of this and get it
| | 04:45 | to where I think yeah, that looks
pretty good, or should be skinnier or wider.
| | 04:50 | Somewhere around in this
range is probably pretty decent.
| | 04:53 | In terms of the height of this, I'm not
really too worried about the height and
| | 04:56 | my webpage design content will drive the height.
| | 04:59 | Here, I'm more concerned about width.
| | 05:01 | So I'm going to go ahead and select
this and now that I've got kind of an idea
| | 05:04 | of what I want here.
| | 05:05 | I'm going to go ahead and refine the width.
| | 05:07 | So just drawing this out, I
got it to width of 232 pixels.
| | 05:10 | I'm going to change that to 230, just so I
can have some nice even numbers to work with.
| | 05:15 | In terms of height, I want to make this
really tall so that later on I could do
| | 05:18 | a mock-up and have a lot of room for content.
| | 05:20 | So I'm going to make it 1200 pixels tall.
| | 05:22 | It's going to take a little bit
off the screen, but that's okay.
| | 05:25 | For my X coordinate, I'm going to give it 0.
| | 05:27 | That'll line it up against the edge of the file.
| | 05:29 | That's exactly what I need.
| | 05:31 | But for my Y coordinate,
I'm going to give it 200, why?
| | 05:33 | Well 200 lines it up with a very bottom of
that Header, and that's exactly what I want.
| | 05:37 | I want these two guys lined up.
| | 05:39 | So now here's my Header, here's my Sidebar.
| | 05:42 | Now don't forget to name this.
| | 05:43 | So, I'm going to select the Rectangle, and
I'm going to go ahead and name that sidebar.
| | 05:46 | We've got a couple of more regions to do.
| | 05:49 | So I'm going to de-select that, grab
my Rectangle tool, and I think I'm going
| | 05:52 | to create a content region next, and I'm going
to go ahead and just assign that a green color.
| | 05:57 | So, I'm going to go ahead and click-and-
drag to draw that and what I'm going to
| | 06:02 | do is create a little bit of spacing
between the Content region and the Sidebar.
| | 06:07 | Here I'm just using these block
elements to sort of visually do that.
| | 06:10 | I'm then going to stretch this out a
little bit till it reaches the end, there
| | 06:12 | we go, and try to figure out kind of
exactly where I would like to have that.
| | 06:18 | And if I'm looking at the distance
between the two of them, that's a nice
| | 06:20 | gutter between them.
| | 06:21 | So I think that's the one I'm going to keep.
| | 06:23 | So I'm going to go ahead and stretch that out.
| | 06:25 | So you can see you can do this very visually.
| | 06:27 | Once I get it visually kind of where I
want it, I'll look down on the Properties
| | 06:31 | Inspector and see if I need to change anything.
| | 06:33 | Well, right now, my width is at 530 pixels.
| | 06:36 | That's a nice even number, and
my X coordinate is at 250 pixels.
| | 06:40 | So that's kind of nice.
| | 06:41 | Remember our Sidebar is 230.
| | 06:44 | So by giving this an X coordinate of
250, that means that we have 20 pixel
| | 06:48 | gutter between these two,
and I like that relationship.
| | 06:51 | So I'll carry that through to my webpage.
| | 06:53 | The next thing I'm going to
do is just increase the height.
| | 06:55 | So, I'll go ahead and make the
height 1200 pixels here as well.
| | 06:58 | And that will make it
equal to what my Sidebar is.
| | 07:01 | So I'll click inside that dialog
box and we'll name that one content.
| | 07:05 | Now the last region we need to do
is our Footer and it's sort of been
| | 07:08 | pre-defined for us if you will,
because the Footer is going to show up right
| | 07:12 | below the Sidebar, and
right below the Content region.
| | 07:15 | So I'm going to de-select that, grab my
Rectangle tool, and this time I'll just
| | 07:19 | choose orange for my Footer.
| | 07:20 | Again feel free to use whatever you want.
| | 07:22 | And I'm just going to draw a rectangle.
| | 07:24 | This is going to be the width of the page.
| | 07:25 | So as long as that rectangle turns out to
be 780 pixels wide, that works just fine.
| | 07:30 | And my Footer will probably be
a little bit skinnier than this.
| | 07:33 | It's just going to contain some
copyright information, so it will probably be a
| | 07:36 | little bit skinnier than that.
| | 07:37 | Exactly how tall you make is really up to you.
| | 07:39 | I'm going to move this up and one of
the nice things about Fireworks is it will
| | 07:43 | help you line these guys up.
| | 07:44 | So it's just going to snap right to the
bottom of that and I can verify that by
| | 07:48 | seeing that the Y coordinate is 1400 pixels.
| | 07:51 | So it's 780 pixels wide.
| | 07:53 | It's 64 pixels tall.
| | 07:54 | I mean I could refine that and make it
65 pixels or 70 pixels, but I just did
| | 07:58 | the Footer visually.
| | 07:59 | So I'm just going to leave it that way.
| | 08:01 | And for my Rectangle, I'm going to go
ahead and type-in Footer as the name. Cool!
| | 08:05 | So I'm going to go ahead and save
that and there is a nice little keyboard
| | 08:08 | shortcut, Ctrl+0, let's
you see what you've done.
| | 08:11 | Basically, all we've really done here
guys is create our basic page structure.
| | 08:15 | Now that we have that, we could begin
coding this page in Dreamweaver focusing
| | 08:19 | on the order of our basic
elements and their identification.
| | 08:22 | We'd have a Header followed by a
Sidebar, followed by a Content region,
| | 08:26 | followed by a Footer.
| | 08:27 | One of the most common workflows that I
do is I hand code the basic structure of
| | 08:31 | the page before the first line
of text or graphics are added.
| | 08:34 | So this makes sure I have the built-in
framework for all my content, and a basis
| | 08:38 | for the rest of my pages,
if the layouts are similar.
| | 08:40 | Although this file only contains
content indicators currently, we now at least
| | 08:44 | have the structure that we need
to start designing our layout.
| | 08:46 | In our next exercise, we're going to
add some more content to this page and
| | 08:50 | start to flesh out the first mock-up.
| | Collapse this transcript |
| Creating the initial layout| 00:01 | Now that we've defined our basic
structure it's time to design our initial page
| | 00:05 | layout using these content regions.
| | 00:07 | We're going to design a fictitious
photography blog called desolve.org based on
| | 00:11 | my traveling around the country with my camera.
| | 00:13 | In the header we're going to
display our logo, tagline, and navigation.
| | 00:17 | In the sidebar we're going to indicate
the Current Months Contest, which is a
| | 00:20 | contest based on guessing
the location of a photo.
| | 00:22 | Under that we'll display the past months
contest answer and finally, have a list
| | 00:26 | of recommended rating for our site.
| | 00:28 | In the mainContent, we'll display the
latest two gallery articles abridged and
| | 00:32 | linked to the full article, and
underneath that we're going to design a short
| | 00:35 | and sweet footer to give copyright information.
| | 00:37 | To save time some of the layers are
already in place; we've just turned
| | 00:40 | off their visibility.
| | 00:41 | Other content we're going to import
from separate PNG files, while some
| | 00:44 | contents we'll have to start from scratch.
| | 00:47 | For those of you that are new to
Fireworks, this is going to be a really good
| | 00:49 | chance to familiarize yourself with the program.
| | 00:52 | So, I have the mockup_02.png opened.
| | 00:55 | You can find that in 03_04 folder.
| | 00:57 | What I'm going to do is turn the
visibility of the structure layer off.
| | 01:01 | We'll come back to that a little
bit layer on to see how well we met
| | 01:04 | our structural goals.
| | 01:05 | But for right now we're going to
focus on creating a more robust mockup.
| | 01:09 | So, one of the first things that I
want to do is scroll down and find
| | 01:13 | this background layer.
| | 01:14 | I'm going to select that and I'm going
to turn the visibility of that layer on,
| | 01:17 | and unlock that layer.
| | 01:18 | So, now the background
layer should my active layer.
| | 01:21 | Now, a lot of web pages will utilize
a tiled a background, and our page is
| | 01:26 | going to be no exception.
| | 01:27 | We've got this sort distressed concrete
looking tile that we're going to use for
| | 01:32 | the entire background of our site.
| | 01:33 | I'd really like to show that in my
prototype so that a client or coworker has a
| | 01:38 | really good idea of what I'm talking about.
| | 01:39 | So, what I'm going to do is I'm going
to grab the Rectangle tool and I'm just
| | 01:43 | going to draw a rectangle out on the page.
| | 01:45 | That's one of the nice things about
Fireworks you'll notice I didn't really
| | 01:48 | concern myself too much with the
fill color, or any of that stuff.
| | 01:51 | Just make sure it doesn't have a stroke.
| | 01:52 | What I'm going to do is draw a rectangle,
and use the Properties Inspector right
| | 01:57 | down here to assign it a width of 780
pixels, and I'm going to give it a height
| | 02:01 | of 2000 pixels, you might remember
that that is the exact size of our canvas.
| | 02:06 | Next, I'm going to set the X and Y
coordinates to 0 and that's going to fill
| | 02:09 | up the entire page.
| | 02:10 | So, now we have a rectangle that's
going to serve as our background graphic.
| | 02:13 | That's taking up the entire page.
| | 02:16 | So, if you created a seamless tile,
you can load that into any shape inside of
| | 02:20 | Fireworks as a pattern.
| | 02:21 | Let me show you how to do that.
| | 02:22 | I'm going to go down to the Properties
Inspector and I'm going to grab
| | 02:25 | the pulldown menu, where it's describing
the fill. Currently it's Solid.
| | 02:28 | I'm going to choose Pattern and it
comes with a lot of pre-built patterns, but
| | 02:33 | I want to go and use my own custom pattern.
| | 02:35 | So, I'm going to scroll down and use
this little arrow where I can choose Other.
| | 02:39 | This is going to prompt
to browse for this image.
| | 02:42 | So, we're going to the 03_04
folder and look in the assets folder.
| | 02:47 | Inside that we can find
this background_tile.png.
| | 02:50 | So, this is the seamless tile
that's being created earlier.
| | 02:53 | I'm going to click Open and there we go.
| | 02:55 | Now, we have our background pattern that's
going to serve for the remainder of our page.
| | 03:00 | Now, I'm going to lock down the
background layer once I'm done working on it.
| | 03:02 | That's something I really try to do.
| | 03:04 | I have that discipline.
| | 03:05 | You'll notice that's a
discipline I really try to enforce.
| | 03:08 | That way I make sure things are placed
on the right layer and I don't edit or
| | 03:12 | delete something unintentionally.
| | 03:14 | Now, I do want you to notice that for
the layers we've created the different
| | 03:16 | layer for each area of content.
| | 03:18 | We have a footer layer, a sidebar layer,
a mainContent layer, and a header layer.
| | 03:22 | What we're going to do now is
we're going to build our header.
| | 03:24 | So, I'm going to unlock the header
layer and turn the visibility of it on.
| | 03:29 | I'm going to go ahead and lock the
structure layer too, just in case.
| | 03:31 | So, I'm going to unlock the header layer, and
if I click the arrow beside that layer folder.
| | 03:36 | Then I'm going to close this Styles panel, so
I can see a little bit more of my Layers panel.
| | 03:41 | I can see that the header also
has some sub-layers inside of it.
| | 03:44 | One for the tagline, and one for navigation.
| | 03:46 | Those guys are locked.
| | 03:47 | So, I'm going to go unlock them as well.
| | 03:49 | So, our header is going to contain
our logo, tagline, a header background
| | 03:55 | graphic, and a navigation bar.
| | 03:57 | So, those are all elements that
we're going to have to either create or
| | 04:00 | bring in from external assets.
| | 04:02 | So, the first thing I'm going to do
is import our header graphic itself.
| | 04:06 | So, I'm going to go to File and choose Import.
| | 04:10 | You could import a lot of different
file types in the Fireworks, JPEG, PNGs,
| | 04:14 | GIFF files, Photoshop files, Illustrator files.
| | 04:17 | So, if you're more comfortable creating
in those programs, you can create your
| | 04:21 | files and then bring them in
later on, like we're doing here.
| | 04:23 | So, I'm going to 03_04/assets.
| | 04:24 | Then I'm going to select the header_graphic.png.
| | 04:31 | Let me go ahead and open that up and
what I get is this little icon that asks me
| | 04:35 | where I want to place this.
| | 04:36 | I'm going to move it up to the upper left-
hand corner and click and there is my graphic.
| | 04:41 | Cool! Once again I'm going to go
ahead and position that at 0, and 0.
| | 04:45 | So, this is a nice transparent PNG
file that's going to blend with our
| | 04:48 | background, and give us an idea of
what our finished site design is going
| | 04:52 | to look like, as well.
| | 04:53 | Now, I can see that brought that in
to the top of the layer, and I'm just
| | 04:56 | going to move that down.
| | 04:57 | So that it is going to behind
our taglines and our navigation.
| | 05:01 | So, you can arrange things in your
layers simply by clicking and dragging them
| | 05:04 | to where you want them to be.
| | 05:06 | Next step, we're going to tackle our tagline.
| | 05:08 | So, I'm going to go ahead and
go to File and choose Import.
| | 05:11 | Once again, we're going to go our to
Assets panel and here we have our tagline.png.
| | 05:15 | So, I'm going to open that up.
| | 05:17 | I'm just going to click to import that as well.
| | 05:20 | Now, currently these are separate assets.
| | 05:22 | So, what I'm going to do is I'm
going to group these guys together.
| | 05:24 | So, without clicking anywhere else,
I'm just going to up to Modify and choose Group,
| | 05:28 | or I could do the Command+G
or Ctrl+G keyboard shortcut.
| | 05:31 | That means that these guys will be
move around as one element and I have
| | 05:34 | less worries about separating them, because
their relationship is exactly the way I want them.
| | 05:39 | Now, I also wanted to make sure
that those guys are imported into the
| | 05:42 | tagline subdirectory.
| | 05:43 | So, what I did was before I placed it,
I actually highlighted the tagline folder.
| | 05:47 | That works almost all the time,
but sometimes it might not.
| | 05:51 | So, be prepared to move that around if
you need to, and if you need to go ahead
| | 05:54 | and move that into that tagline
folder, go ahead and do that now.
| | 05:57 | Now, I need to position it and you could
do this visually and since we're doing
| | 06:01 | a design, you can just sort of move
this around until you get the tagline where
| | 06:04 | you think it needs to be.
| | 06:06 | In this case, I'm going to move it to an
X coordinate of 13 and Y coordinate of 12,
| | 06:11 | because I want it more
towards the top of the page.
| | 06:13 | Now, we've got another graphic that we
want to bring in as well and what I'm
| | 06:16 | going to do is select the Bitmap
graphic that's in the header layer.
| | 06:20 | Remember selecting these items
before hand can control the placement of
| | 06:23 | any imported objects.
| | 06:25 | So, by selecting this I'm saying I want
to bring my logo in and it will bring
| | 06:28 | it in just above this.
| | 06:29 | So, I'm going to go to File and choose
Import and I'm going to choose the logo.png.
| | 06:34 | So, this is another separate
Firework file that was created separately.
| | 06:38 | Now, as a strategy you can do it either way.
| | 06:40 | You can create these assets individually
and then bring them into the prototype.
| | 06:44 | Or you can create your prototype
and then use them to export out
| | 06:47 | those individual assets.
| | 06:48 | It is really two separate workflows and
sometimes I use one versus the other, or
| | 06:53 | I'll combine the two.
| | 06:54 | I'll talk a little bit more about
that at the end of this exercise.
| | 06:57 | So, I'll go ahead and click Open and I want
my logo to be on the right side of the page.
| | 07:01 | So, I'm just going to click and
it's already grouped. So that's good.
| | 07:06 | I made sure it came on top of
the Bitmap, so that's even better.
| | 07:09 | I'm just going to move this around until I
visually sort of get that where I want it.
| | 07:13 | Once I do that, I might refine
that a little bit by using the X and Y
| | 07:15 | coordinates to position it.
| | 07:17 | I think what I want to do here is keep
the X coordinate close to where it is.
| | 07:21 | Maybe 498, somewhere around there.
| | 07:24 | Then the Y coordinate is pretty good too.
| | 07:26 | I'll set that to 11.
| | 07:27 | A little bit more towards the top of
the page and a little bit further over.
| | 07:30 | So, the last element that our
header needs is our navigation.
| | 07:35 | That's also available to us as a separate asset.
| | 07:38 | So, I'm going to select the navigation
folder. Go to File and choose Import.
| | 07:42 | I'm going to find navbar.png.
| | 07:44 | I'm going to open that up and
I'm going to click to position that.
| | 07:47 | Now, this is another really
good item to go ahead and group.
| | 07:50 | So, I'm go ahead and group that together
using the Ctrl+G or Command+G keyboard shortcut.
| | 07:55 | You could keep it as individual pieces.
| | 07:57 | Just be aware that moving one around
you might leave another one behind.
| | 08:01 | So, I'm going to grab this and this going
to sit right on the bottom of that guideline.
| | 08:06 | So, just drag it down to the bottom of
that guideline and we'll go ahead and
| | 08:10 | give that an X coordinate of around
404 and that'll just move that over to
| | 08:17 | where the shop is right on the edge.
| | 08:20 | The Y coordinate of 176 should be fine;
you should be able to get that simply
| | 08:23 | by dragging it down.
| | 08:25 | There is our header.
| | 08:25 | Now, I'm going to close the header
layer and lock it and then turn on the
| | 08:29 | visibility for mainContent, sidebar, and footer.
| | 08:33 | So, these regions were
constructed in a very similar way.
| | 08:36 | Most of these assets were imported in
from separate files and then combined
| | 08:40 | together to create the prototype.
| | 08:41 | Now, before I go a little bit more into
the actual prototype creation, I go want
| | 08:45 | to take just second to revisit our structure.
| | 08:47 | I'm go ahead and select the structure
layer, unlock it, and I'm go to change the
| | 08:51 | opacity of this to about 50%.
| | 08:55 | Now, we can see that those individual
content regions that were created earlier,
| | 08:59 | are now evolving into
much more complex structures.
| | 09:03 | So, once we get our basic structure down,
and then we start adding the designs to it,
| | 09:07 | we have to start evaluating
what needs to happen inside of this
| | 09:11 | particular element to get this layout.
| | 09:14 | That's one of the more challenging
aspects of CSS based design, because you have
| | 09:18 | to decide, do I want
individual div tags to do this?
| | 09:20 | Am I going to do a float based layout?
| | 09:22 | Am I going to do positioning?
| | 09:24 | That's where mastering the techniques
that we're talking about in this title are
| | 09:27 | really, really important.
| | 09:28 | After a while, it will become very
obvious to you how you're going to approach that
| | 09:32 | and you'll start laying out
your pages based on the techniques that
| | 09:35 | you know you're going to use.
| | 09:37 | I'll go ahead and delete the structure layer.
| | 09:39 | We're done with that.
| | 09:40 | We just wanted to make sure
we're identifying those regions.
| | 09:42 | I want to go ahead and answer a question
that has probably come up with some of you guys
| | 09:45 | that are brand new to Fireworks.
| | 09:47 | We imported all these assets.
| | 09:49 | They were already created
for us, and that works great.
| | 09:51 | But what if you have to
create it from the scratch?
| | 09:53 | Well, if you're designing in
Fireworks, it's very similar to designing in
| | 09:56 | Illustrator and Photoshop.
| | 09:57 | If you're comfortable in those
programs, I'm willing to bet that you're
| | 10:01 | going to find yourself picking up
working in Fireworks really, really quickly.
| | 10:04 | However, if you need a more detailed
look at Fireworks, its tools, and how to
| | 10:08 | create assets, I would really recommend
checking out Jim Babbage's Fireworks CS4
| | 10:13 | Essential Training title, on the
lynda.com Online Training Library.
| | 10:16 | Well now that we've finished our
initial mockup of our web page design,
| | 10:19 | we're going to turn or attention to creating a
full site prototype, including multiple pages.
| | Collapse this transcript |
| Page creation and asset sharing| 00:01 | One of Firework's strongest
prototyping feature is its ability to create
| | 00:04 | multiple pages, allowing us to simulate the
different pages of a website within a single document.
| | 00:09 | Fireworks takes this even further by
allowing us to create links between pages,
| | 00:13 | simulate interactivity, and sharing
common assets between those pages.
| | 00:17 | In this exercise we're going to
explore creating multiple pages and some
| | 00:20 | techniques for sharing
common assets between those pages.
| | 00:24 | This is going to lead to faster
development times and allow for quicker updates
| | 00:27 | or changes within your prototype.
| | 00:29 | So, here we have the prototype_01.png file open.
| | 00:34 | One of the things I'm going to do is
introduce a new panel to our workflow, and
| | 00:38 | this is the Pages panel.
| | 00:39 | So, I'm going to go ahead and click on that.
| | 00:40 | It's usually docked by your Layers panel,
but if you don't see it there, you can
| | 00:43 | go up to Window and you can find
the Pages panel through the menu.
| | 00:47 | You can see that we already have
some preexisting pages in here.
| | 00:50 | We have a home page, a galleries page,
a gear page, a contact, and a shop page.
| | 00:54 | While we've got the majority of our
pages in here, we are going to have to
| | 00:58 | create a couple of more pages
to finish out our prototype.
| | 01:00 | Now, I want to talk for just a
moment about the names of the pages.
| | 01:03 | They are very important.
| | 01:04 | Whatever you name your page is what
Fireworks is going to use as it exports out
| | 01:09 | your HTML prototype.
| | 01:10 | So, the home page will become
home.html, and galleries will become
| | 01:14 | galleries.html, and so forth.
| | 01:17 | You want to be very careful about how
you name your pages, and make sure they
| | 01:20 | follow your standard web naming conventions.
| | 01:22 | Now, if I browse through the pages,
I can see that I've got different content on
| | 01:26 | the galleries page, and the gear page,
the contact page has got a form on it,
| | 01:31 | and the shopping page has what is
eventually going to become a nice and Spry
| | 01:35 | tabbed panel widget.
| | 01:36 | I also want to point out that we've
got different layouts happening here too.
| | 01:39 | So, we have a one column
layout on the shopping page.
| | 01:43 | Then we have a smaller sidebar on the
content, gear, and galleries page that we
| | 01:47 | have on our home page.
| | 01:49 | So, we're starting to see the strategy
for our website coming to focus, we're
| | 01:52 | going to have three different layouts,
a large sidebar, a small sidebar, and a
| | 01:56 | single column layout as well.
| | 01:58 | We also know is that the font
choices that we'll use are standard fonts.
| | 02:01 | So you are going to see Georgia,
you're going to see Times New Roman, or
| | 02:05 | Helvetica, or Verdana.
| | 02:06 | I like to play around with those
particular fonts in my prototypes because then
| | 02:10 | I get used to how the text is
actually going to look inside the browser.
| | 02:14 | So, I stay away from fonts that aren't
standard fonts that browsers can't display.
| | 02:18 | Now, text is going to eventually become an
image like our headers here. That's fun.
| | 02:22 | I can go and play around that a little
long but I do need to realize that that
| | 02:25 | will have to export out as an
image, rather then just text.
| | 02:28 | Okay, there's one more
thing that you may have noticed.
| | 02:31 | As we browse through the galleries,
gear, and contact page, it's missing our
| | 02:35 | header information, and
it's missing our background.
| | 02:38 | Both of those are assets that
really don't change from page to page.
| | 02:42 | The header remains the same, and
the background remains the same.
| | 02:45 | Well, rather than creating five, or six, or
seven, or eight different copies of these graphics.
| | 02:49 | We're just going to share them across
multiple pages that's going to make our
| | 02:52 | life a little bit easier.
| | 02:54 | That way if we ever edit the background
or change the header we'll only have to
| | 02:57 | change it once, and it
updates on all the different pages.
| | 03:00 | So, let's talk about a couple of
different ways that we can make this happen.
| | 03:03 | One way would be to create
what's known as a master page.
| | 03:06 | You can create a master page.
| | 03:07 | Link that to whatever pages in your
document you want to display the master page items.
| | 03:12 | Then anything that you put on the master page
automatically shows up on those other pages.
| | 03:16 | The really cool thing about that is
that you can decide which pages are linked,
| | 03:19 | which pages aren't and you
can change that at anytime.
| | 03:22 | Updating something on the master page,
automatically updates it everywhere.
| | 03:25 | So, that's a pretty unique feature.
| | 03:27 | Now, I want to show another
technique, and that is the ability to share
| | 03:30 | layers across pages.
| | 03:32 | This is equally useful, and
sometimes it's more useful if you have some
| | 03:36 | secondary content or maybe a subsection
within your site, where you just need to
| | 03:40 | share objects across
certain range, or set of pages.
| | 03:43 | One of the first things I need to do
is go ahead and share my header layer.
| | 03:46 | So, what I'm going to do is
switch to the Layers panel.
| | 03:48 | I'm going to click on the header
layer and make sure it's not locked.
| | 03:51 | There are a couple of different ways
that you can share your layers, and I want
| | 03:54 | to show you the
differences between those approaches.
| | 03:56 | If I right-click the header layer, I
notice that I do have the ability to share
| | 04:00 | layers to all the pages.
| | 04:01 | Well, that would be great if I wanted
the header layer to show up on every
| | 04:05 | single page, but as our
prototype it's more complex.
| | 04:08 | We're going to have some pages that
don't really need the header information.
| | 04:11 | So, what I'm going to do and instead
of doing that I'm going to go up to the
| | 04:15 | menu and I'm going to
choose Share Layer to Pages.
| | 04:19 | Now, I get to choose exactly which pages
this information should be shared with.
| | 04:23 | Right now, I'm just going to add
everybody over there to the right hand side.
| | 04:26 | So, I'm going to highlight all those
pages, click the Add button, and now I see
| | 04:30 | them over here as well.
| | 04:31 | Now, I can remove pages from this as
well, so if you ever add too many, or you
| | 04:35 | make the decision later on that you
don't want that information on that page,
| | 04:38 | you can change that.
| | 04:39 | That's why I like this approach a little
better than sharing them across all pages.
| | 04:43 | I'm going to go ahead and click OK.
| | 04:45 | Now, I see an icon right beside that.
| | 04:47 | Now, I need to share the
background layer as well.
| | 04:49 | So, I'm going to make sure the
background layer is unlocked, click on that.
| | 04:52 | Again, I'm going to go my Layer palette menu.
| | 04:54 | I'm going to go to Share Layer to Pages.
| | 04:56 | I'm going to do exactly the same thing.
| | 04:58 | I'm going highlight all those pages,
add them over here, and click OK.
| | 05:02 | Now, when I browse through my Pages
palette now, I might not get exactly
| | 05:05 | what I'm expecting.
| | 05:06 | As a matter of fact, that is
certainly not what I was expecting.
| | 05:10 | Every single page now, has this
background way up on top, what happened there?
| | 05:14 | Well, that's one of the things that you
kind of need to know about when you're
| | 05:16 | sharing these layers.
| | 05:17 | I'm going to flip back over to Layers panel.
| | 05:19 | You are going to notice that the header
and the background layer move up to the top.
| | 05:23 | That's because if they didn't exist on
those before those layers are added to
| | 05:26 | the top of the stacking order.
| | 05:28 | I'll select the background layer, and
I'll just move it down to the bottom.
| | 05:31 | Now, I'll need to that for each of my pages.
| | 05:33 | So, I'm going to the gear page,
drag that down to the bottom.
| | 05:36 | Go to the contact page.
| | 05:40 | Drag the background layer down to the bottom.
| | 05:41 | Now go to the shopping page,
and drag that down to the bottom.
| | 05:45 | It kind of annoying, I agree and it's just
one of those things that you have take care of.
| | 05:49 | So, you want to double check anytime you
share a layer, and make sure that layer
| | 05:53 | show up within the content
where you want it as well.
| | 05:56 | So, now that we've got those assets
shared across those pages let's talk
| | 06:00 | about creating new pages.
| | 06:02 | I'm going to go down to our shopping page.
| | 06:04 | We have this shopping area that's
going to display content for us.
| | 06:07 | Now, in our finished site this is
going to a Spry tabbed panel widget.
| | 06:10 | This is going to give us a nice
interface that allows clients to click on each
| | 06:14 | category and display those products.
| | 06:16 | We'll we need to mock that up in our
prototype, so that our client or our
| | 06:19 | teammates know what we're sort of
envisioning for the Spry widget.
| | 06:23 | Now, when you create new pages, there are a
couple of different ways that you can do this.
| | 06:27 | If I go into the Page palette, there is
a New Page icon right there, but notice
| | 06:31 | that if I hover it says New/Duplicate page.
| | 06:35 | So, it can perform two tasks for us.
| | 06:37 | If I were to click on this, it would
just create a new blank page with the same
| | 06:41 | dimensions as the rest of your canvass.
| | 06:42 | Then your free to go ahead and add
layers, artworks, share layers across these
| | 06:46 | pages, do whatever you'd like to do
from that to speed up your development.
| | 06:50 | Well, another way to really speed up
your development is to duplicate a page.
| | 06:54 | Our shopping page for example, really
the only thing that changes on it is the
| | 06:58 | current tab, and the
content inside the tab region.
| | 07:01 | So, that way if I were to duplicate
this page, all the rest of the stuff would
| | 07:05 | already be added, and I wouldn't have
to do any copying and pasting, cutting
| | 07:08 | pasting, or the recreation of assets.
| | 07:11 | So that's what I'm going to do.
| | 07:12 | I'm going to take the shop page, and I'm
going to select the page thumbnail, and
| | 07:16 | drag that down and over
the New/Duplicate Page icon.
| | 07:20 | So, I'm going to let go, and now I have
a brand new page that's called shopCopy.
| | 07:24 | I'm going to change the name to shop_hang.
| | 07:30 | I'm going to duplicate that page as
well, and change that to shop_carry.
| | 07:37 | So, notice that I'm naming the pages,
what the content is going to be, carry
| | 07:42 | it, and hang it, and of course our original
shop page should probably be renamed as well.
| | 07:46 | So, I'm going to rename that shop_wear.
| | 07:49 | So, notice that to rename a page all that
you really to do is double-click on the name.
| | 07:53 | Also the number that you guys are seeing,
out to the left of those, 01, 03, 04,
| | 07:58 | that doesn't really show
up in the name of the page.
| | 08:00 | It's not going to show up
when you export the page out.
| | 08:02 | That's simply here in Fireworks, so that you
can keep track as to which page you are on.
| | 08:06 | So, now we have three brand new pages,
shop_wear, shop_hang, and shop_carry.
| | 08:12 | Now, shop_wear, shop_hang, and
shop_carry look exactly the same.
| | 08:15 | So, a really nice way of speeding up
your development is duplicating these
| | 08:19 | pages, and then just replacing the
artwork that you need to replace on those pages.
| | 08:23 | So, I'm going to go the shop_hang page.
| | 08:25 | I'm going to switch my Layers palette.
| | 08:27 | Notice that all of my shopping
information is on this mainContent layer.
| | 08:31 | So, I'm going to go ahead and expand that layer.
| | 08:33 | It might be a good idea to go ahead and lock
down those other layers before you do that.
| | 08:36 | And that way, you're not going to
replace anything that you don't want to.
| | 08:38 | Now, the first thing to do is just delete
the content here that we don't need anymore.
| | 08:43 | So, I'm going to use the Selection tool,
and holding the Shift key down, I'm
| | 08:46 | going to go ahead and click on each
one of these assets, and I'm being very
| | 08:49 | careful not to select the
background graphic behind all of this.
| | 08:52 | Let's going to go ahead
and delete those guys out.
| | 08:54 | Now, the next thing I'm going to
do is import our Hang it asset.
| | 08:58 | So I'm going to go to File and choose
Import, and in the 03_05 folder I can go
| | 09:03 | in the assets directory.
| | 09:05 | I can find that hang.png. Click Open.
| | 09:09 | And I'm just going to place
that in our content region.
| | 09:11 | You can just use your arrow keys to
nudge it around, to get it where you
| | 09:14 | think it looks best.
| | 09:15 | It's totally up to you, but I want
it center of within that. Perfect.
| | 09:18 | Now, there's one more thing I need to
it here, the Wear it tab is the active
| | 09:22 | tab, but really the Hang it
tab needs to be the active tab.
| | 09:25 | What's interesting about this is that I
can simply just kind of swap there places.
| | 09:29 | This one is at an X coordinate of
38, while the Hang it one is in the
| | 09:33 | X coordinate of 182.
| | 09:35 | So, what I'm going to do is select
the background underneath the Hang it
| | 09:39 | one, and I'll swap that.
| | 09:40 | I'll send it to 38.
| | 09:43 | I'll select the red tab,
and I'll send that to 182.
| | 09:47 | So, that was a lot easier than having
to import those guys every single time.
| | 09:50 | Now, we're going to save that and go to
our Page palette and switch to the carry
| | 09:55 | page, we'll need to the same thing here.
| | 09:58 | So, I'll just go ahead and
select all these assets, delete them.
| | 10:04 | Now, it would have been easier had I
created a sublayer for those, because I
| | 10:07 | could have just selected
a sublayer and deleted it.
| | 10:09 | Now, I'm going to go ahead and import
my carry assets, and once again I'm going
| | 10:14 | to place them in a similar location.
| | 10:17 | So, again you can just sort of use your own
judgment where you'd like those guys to be placed.
| | 10:21 | Now, obviously you need to start
thinking about how this is going created in
| | 10:24 | your XHTML page with CSS.
| | 10:26 | So, I'm thinking in terms of how much
padding do I want on this side versus this side,
| | 10:30 | and you may want to make that
consistent all the way throughout.
| | 10:33 | I'll do the same thing here.
We're going to swap these guys out.
| | 10:35 | So, my active tab is at an X
coordinate of 38 and my other tab is at an X
| | 10:40 | coordinate of 325, So, I'm going to
switch this one to 38, then I'll switch this
| | 10:46 | one to 325, and it shows up in
the right place as well. Cool!
| | 10:51 | So, I'm going to save that.
| | 10:53 | Now, I have three pages for shopping:
| | 10:55 | one representing the Carry it items, one
representing the Hang it items, and one
| | 11:01 | representing the Wear it items, really cool!
| | 11:03 | So, our basic site prototype is almost finished.
| | 11:06 | What's really powerful about this
workflow is that it allows clients or team
| | 11:10 | workers to visualize your design,
as the pages relate to each other.
| | 11:14 | By sharing assets and duplicating pages,
we speed up our development and make
| | 11:18 | editing our layout faster.
| | Collapse this transcript |
| Using common libraries to create site prototypes| 00:00 |
One of the trickier design challenges in
creating web prototypes is representing
| | 00:04 |
common HTML elements such as form
elements and user interface elements.
| | 00:09 |
Many designers will create these
objects in separate files, and store them for
| | 00:12 |
use in multiple projects.
| | 00:14 |
Fireworks helps us eliminate that step
by providing a large library of common
| | 00:18 |
user interface elements.
| | 00:19 |
Even more impressive, Fireworks has
several export options that allow you to
| | 00:22 |
export those elements as
fully functioning controls.
| | 00:25 |
Obviously, our focus is on XHTML and CSS.
| | 00:28 |
But for those of you doing Flex and
AIR development, this can save you a
| | 00:32 |
tremendous amount of time in
building and scaling components.
| | 00:35 |
Back to the task at hand.
| | 00:36 |
We need to finish out our form design.
| | 00:38 |
Rather than draw these form elements
ourselves, we'll use Fireworks Common
| | 00:42 |
Library to grab the appropriate form elements.
| | 00:44 |
So the first thing I'm going to
do is browse to my contact page.
| | 00:48 |
Here we have the prototype_02 opened up.
| | 00:52 |
Well, our form is almost finished.
| | 00:53 |
We already have some form elements on the page.
| | 00:55 |
We have some text fields, some
checkboxes, but we lack some radio buttons here,
| | 01:01 |
we need a pull-down menu here, and we
need a submit button at the bottom of it.
| | 01:05 |
So I'm going to grab
those from my Common Library.
| | 01:07 |
Now you can find out by going up to
Window and choosing Common Library, but
| | 01:12 |
you have the default Fireworks
workspace, you'll find it docked at the very
| | 01:15 |
bottom of the panel doc.
| | 01:16 |
Now, it's get a little crowded down
there, so for the purpose of this lesson,
| | 01:20 |
I'm going to undock it and float it
and I'm actually going to undock the
| | 01:23 |
Document Library at the same time.
| | 01:24 |
So I'm going to hold down my Alt key.
| | 01:26 |
That will be the Option key on the Mac.
| | 01:27 |
I'm going to click on one of those
tabs and just drag out to undock those.
| | 01:32 |
By holding the Alt or the Option key down,
when you click a panel, you bring the
| | 01:35 |
entire group and not just one panel.
| | 01:37 |
So I'm going to go ahead and open up my
Document Library and I can see the form
| | 01:40 |
elements that I already have in it.
| | 01:42 |
Well, if I switch over the Common
Library, expand that a little bit, I can
| | 01:46 |
see all sorts of different types of
objects including Flex components,
| | 01:49 |
buttons, animations.
| | 01:50 |
There is some really cool stuff in here.
| | 01:52 |
Well, I'm going to go under the Windows
directory since I'm going to simulating
| | 01:56 |
the way my form would look in the
Windows environment, and the first thing I
| | 01:59 |
want to do is put in a radio button.
| | 02:01 |
So I'm going to find my RadioButton
and just drag that right to my form, just
| | 02:06 |
below our question here.
| | 02:07 |
So that's really cool.
| | 02:08 |
That's a graphic that I do not have to
create and looks exactly the way my radio
| | 02:12 |
button would look normally in my HTML form.
| | 02:15 |
Now, when you select one of these,
you'll see in the Properties Inspector it
| | 02:19 |
tells you that's a radio button.
| | 02:20 |
You'll see its properties, but one of
the nice things that you can do is now
| | 02:23 |
click over to the panel Symbol Properties.
| | 02:25 |
This is where I can set the label
for my form elements and sort of modify
| | 02:29 |
their appearance as well.
| | 02:30 |
So I'm going to change my Label to Yes
and you can see it updates right there.
| | 02:35 |
Now, I can drag another one of these
out from the Common Library, but now if
| | 02:39 |
I look at my Document Library, I can
see that the RadioButton is sitting in
| | 02:42 |
my Document Library.
| | 02:43 |
So once you add something to your file
from the Common Library, automatically
| | 02:47 |
added to your Document Library and you
don't really need to go grab it again.
| | 02:51 |
As a matter of fact, if we did, it would
prompt us and ask us if we wanted it replaced.
| | 02:54 |
So now I'm going to drag another
RadioButton, this time from my Document Library
| | 02:59 |
and I'm going to line it
up with my first button.
| | 03:01 |
Something that these nice, little, smart
guides that we have in Firework give us
| | 03:04 |
now and I'm going to change
this Label to No, there we go.
| | 03:08 |
So now we have two RadioButtons, Yes and No.
| | 03:10 |
Now, if I scroll down to the What do you want?
| | 03:13 |
section, I have a place here that
needs kind of a pull-down menu, because you
| | 03:17 |
want to give people the option
of selecting from multiple cities.
| | 03:20 |
So I'm going to go to Common Library
and again I'm going to go to my Windows
| | 03:23 |
folder and I'm going to find a ComboBox.
| | 03:26 |
So, pull-down menus are
typically referred to as ComboBoxes.
| | 03:30 |
So I'm going to drag that up beside
that text and here I have an opportunity
| | 03:34 |
again to change some of its properties.
| | 03:36 |
So I'm going to go ahead and change
the Label and I'm going to change the
| | 03:40 |
default Label to Charlotte, making that
the default city and of course if this
| | 03:44 |
were a full HTML control, we could add
data and labels to it, things like that.
| | 03:49 |
For this, we're just creating a prototype.
| | 03:51 |
Now the last thing I need to do is
go ahead and add a submit button.
| | 03:54 |
So again I may go to my Common Library
objects, find Button, drag that to the
| | 03:58 |
page, place it just below here and
then type in whatever label I would like.
| | 04:02 |
I'm going to go and type in Tell Me About It,
because submit is played out as they say.
| | 04:10 |
Now, you can see I've
typed in a longer label here.
| | 04:12 |
So it doesn't fit in the button anymore.
| | 04:14 |
Well, that's not a problem at all.
| | 04:16 |
I'm going to go up and choose my Scale
tool and I'm just going to stretch this
| | 04:20 |
button out until the label
fits inside of it. Perfect.
| | 04:24 |
Remember I can increase the size of that too.
| | 04:26 |
Make it larger, change the font,
whatever I want in terms of my default button.
| | 04:31 |
So that looks great.
| | 04:32 |
Now, I'm going to go ahead and save
the file and you can see how much time I
| | 04:36 |
saved by using those Common Library
objects, rather than having to draw those
| | 04:39 |
form elements myself.
| | 04:41 |
So now our basic site prototype is
finished and ready for our client or our team
| | 04:45 |
members to review it.
| | 04:46 |
We've successfully created multiple pages,
represented variations on our initial
| | 04:50 |
layout and built a form, all
rather quickly I might add.
| | 04:53 |
At this point, we could export the
prototype out to a PDF file, or to an HTML
| | 04:58 |
file for our client or team to review.
| | 05:00 |
Before we do that, however, we're going
to add a touch of interactivity to our
| | 05:03 |
prototype by making our navigation
functional and by simulating our spry widgets
| | 05:08 |
functionality for a more
full featured prototype.
| | 05:11 |
| | Collapse this transcript |
| Building interactive prototypes| 00:00 | The final task that we need to tackle
on our prototype will be to add a little
| | 00:04 | interactivity to simulate how our
pages will look and behave as the user
| | 00:09 | interacts with our site.
| | 00:10 | I'm always amazed at how it is often
much more effective to give the client the
| | 00:13 | ability to see and interact with the
preview, rather than showing your intent by
| | 00:17 | using wireframes and renderings.
| | 00:19 | It helps to remember that not everybody
is a web designer, and visualizing what
| | 00:22 | you have in mind isn't always the
easiest thing for non-web people to do.
| | 00:27 | In this exercise, we are going to add
some interactivity by exploring using
| | 00:30 | slices and some basic JavaScript
behaviors that will increase the
| | 00:33 | effectiveness of our prototype.
| | 00:35 | So here we have the
interactive_01.png file open.
| | 00:39 | The first thing we want to do
is take care of our navigation.
| | 00:42 | Now, you may have noticed this in
previous exercises using the same png file
| | 00:46 | that there's this little translucent
green square over the Archives area.
| | 00:50 | Now, what in the world
is that? That is a slice.
| | 00:53 | Slices contain little pieces of web
information, and in fact, they are stored on
| | 00:57 | their own web layer.
| | 00:59 | So your slices are
always found on the web layer.
| | 01:02 | They can be created by using the Slice
tool or by generating a slice based on
| | 01:06 | the object that you have selected.
| | 01:07 | So what are slices used for?
| | 01:09 | Well, primarily slices are used to let
Fireworks know what type of a graphic
| | 01:14 | you want to export out.
| | 01:15 | You will notice that by selecting
this slice, we are telling it we want a
| | 01:18 | Foreground Image, we want it to
be a GIF, and we can even name it.
| | 01:21 | Here we have named the graphic as well.
| | 01:23 | Later on when we discuss Optimization,
we'll take a look at having multiple
| | 01:26 | slices on the page, so that we can
export out multiple graphics, and even using
| | 01:31 | different Optimization
settings for each graphic.
| | 01:33 | So slices really help us out with that.
| | 01:35 | But for this lesson, we are interested in
another thing that slices allow us to do.
| | 01:39 | Slices also allow us to attach
JavaScript behaviors to certain elements.
| | 01:43 | Now, these JavaScript behaviors can do
things like swap images, link to specific
| | 01:47 | pages, all sorts of really cool things.
| | 01:49 | So what we are going to do is we are
going to make our navigational functional.
| | 01:52 | Now, we are not going to do the
rollover of our navigation or indicate the
| | 01:56 | current page, I'm going to show you
guys how to do interactive behaviors like
| | 01:59 | that when we do our Spry widget.
| | 02:00 | But what I'm interested here is how
do I link from page to page within my
| | 02:04 | prototype, so that when I export it out
it's a clickable prototype that somebody
| | 02:07 | can actually walk through.
| | 02:09 | So what I'm going to do
is grab my Selection tool.
| | 02:11 | I'm going to click on the rectangle
surrounding the home link, and holding my
| | 02:15 | Shift key down, I'm going to very,
very carefully hover over and click on the
| | 02:21 | rectangles surrounding each of the other links.
| | 02:24 | Now, you have to be really careful about that.
| | 02:26 | You don't want to select a text
and you don't want to select this
| | 02:28 | header background graphic.
| | 02:29 | Just those rectangles.
| | 02:31 | Now, why did I go to that much trouble?
| | 02:33 | Well, here's one of the
neat things about doing slices.
| | 02:35 | One of the hardest things to do when
using the Slice tool is to draw exactly
| | 02:40 | around an item and get the slice exactly
the same size and exactly in the same spot.
| | 02:44 | Well, if you select the item instead,
you can just go ahead and have Fireworks
| | 02:48 | insert a slice for you,
and that is so much easier.
| | 02:50 | So what I'm going to do now is go up
to Edit > Insert > Rectangular Slice.
| | 02:56 | Because I have multiple objects selected,
Fireworks is going to ask me, hey, do
| | 02:59 | you want just one big slice, or do you
want multiple slices for each element?
| | 03:03 | I want multiple slices, and just like that
I get slices around each one of those guys.
| | 03:08 | That's really, really easy.
| | 03:10 | Now, here is where we go
ahead and add our interactivity.
| | 03:12 | I'm going to deselect the rest of the slices
and click on the slice above the home link.
| | 03:17 | You can see in the Properties Inspector,
in addition to choosing an image type
| | 03:21 | for this, we can go ahead and give it a name.
| | 03:23 | I'm going to just call this one homeLink,
and then we can link it to a specific page.
| | 03:28 | Now, what's really interesting about
this is that if I grab the pull-down menu,
| | 03:32 | I see a list of pages.
| | 03:33 | Now, how in the world did
Fireworks know that I needed those pages?
| | 03:37 | Well, if you remember from our
earlier exercise, when I go back to the Page
| | 03:40 | palette, that's exactly
what we have named those pages.
| | 03:43 | So it knows that it's
going to be using those names.
| | 03:46 | So what I'm going to do is just grab
that pull-down menu and I'm going to choose
| | 03:50 | from this bottom set of links, the index
page for home, and galleries, I'm going
| | 03:56 | to type in galleryLink for the name of
the slice, and then that of course is
| | 04:01 | going to link to the galleries page.
| | 04:02 | Gear is going to be gearLink.
| | 04:06 | Of course it's going to link to our gear.htm.
| | 04:13 | Contact will be contactLink and
it is going to link to contact.htm.
| | 04:19 | Finally, shop will be shopLink
and it's going to link to shop.htm.
| | 04:28 | But I'm guessing that you
probably already figured that out.
| | 04:31 | So we are going to save that.
| | 04:34 | One of the things I noticed right
off the bat is I was on the galleries
| | 04:36 | page when I did that.
| | 04:37 | You will notice I wasn't really that
explicit about what page that needed to be
| | 04:40 | done on, but for this to really work, those need
to be on every single page, not just one page.
| | 04:48 | It doesn't really seem very
efficient to have me do it all over again.
| | 04:51 | Well, if you remember from one of our
earlier exercises, we can share layers.
| | 04:55 | So I can share those
slices across multiple layers.
| | 04:58 | But there is a bit of a problem
with doing that on the web layer.
| | 05:01 | So let me show you what I mean.
| | 05:03 | Make sure you are on the page.
| | 05:04 | I was on the galleries page, but
make sure you are on the page where you
| | 05:07 | created your slices.
| | 05:08 | I'm going to switch back to my Layers panel.
| | 05:10 | If I open up my Web layer, I can see
that I have shopLink, contactLink, all
| | 05:14 | these guys, but then I have this archives_head.
| | 05:17 | That slice does not need to be
shared across multiple pages.
| | 05:21 | But if I were to share the Web layer,
the entire layer would be shared.
| | 05:24 | So what do I do there?
| | 05:26 | Well, one of the nice things is you
can create a sub layer that can be shared
| | 05:30 | without sharing the entire layer, and that's
going to make our life a little bit easier.
| | 05:33 | So what I'm going to do is highlight
the Web layer, and using the Layers panel
| | 05:37 | I'm going to click right down
here on the New Sub Layer icon.
| | 05:40 | I'm going to call this sub layer nav.
| | 05:42 | Then I'm going to select all of my links.
| | 05:45 | That's all slices except for the
archives_head, and I'm just going to move them
| | 05:48 | into that nav layer.
| | 05:49 | Now, this is unfortunately a little tricky.
| | 05:52 | You have got to position it directly
over that and when you see this line show
| | 05:55 | up underneath it, let go, and
now they are inside your nav.
| | 06:00 | So it may take a couple of trials
for you to get that right. Okay.
| | 06:03 | I'm going to go ahead and deselect
everything, and now what I'm going to do is
| | 06:05 | I'm going to select this nav layer, and
going up to my Layer palette menu, I'm
| | 06:09 | going to choose Share Layer To Pages,
and this time I'm going to go ahead and
| | 06:13 | add everybody again, and click OK.
| | 06:16 | Now when I browse my Pages palette,
notice that those links have been added
| | 06:20 | to every single page. Perfect!
| | 06:23 | Well, let's go to our shop page, because
here we have got another change as well
| | 06:26 | from our earlier prototype.
| | 06:28 | Go ahead and save the file, and on the
shop page, one of the things that you are
| | 06:32 | going to notice is that we no
longer have three shopping pages.
| | 06:35 | Remember we set that up in our last exercise.
| | 06:37 | We had Shop, Wear, Carry, and Hang it.
| | 06:40 | So why the one now?
| | 06:42 | Well, we are going to be simulating
interactivity with this and one of the ways
| | 06:46 | to stimulate interactivity is to use
something in Fireworks called States.
| | 06:49 | You will notice that just beside the Page
palette, there is indeed a States palette.
| | 06:53 | Now, I have already added some states
for you, but let's click through these and
| | 06:57 | see what they will do for us.
| | 06:59 | So we have, our wear state is our
default one, and then we have hang and carry.
| | 07:03 | So you can see now, instead of being in
separate pages, these are in separate states.
| | 07:07 | Now, what does that mean?
| | 07:08 | Well, think about a Rollover link
that you might have on a web page.
| | 07:11 | You might have the up state of an
image, and then you rollover it and you
| | 07:13 | have the over state.
| | 07:14 | Well, the State panel in Fireworks
allows us to create as many states as we
| | 07:19 | want, and essentially we can change
anything on the page or anything within an
| | 07:23 | area that we want to change based on
user interactivity or links being clicked.
| | 07:27 | In this case, people are going to click on
the Wear tab and they will see the wear state.
| | 07:31 | They will click on the Hang tag
and they will see the hang state.
| | 07:34 | They will click on the Carry tag,
and they will see the carry state.
| | 07:37 | We can do that through the use of
something called Behaviors, and that's
| | 07:39 | actually been around in Fireworks for a
very long time, but now we are able to
| | 07:43 | use it to create these really
cool interactive prototypes.
| | 07:46 | Now, we need to simulate one
more piece of functionality as well.
| | 07:49 | The tabs should change as we hover over,
and the tab should change color, and
| | 07:53 | then the active tab should show up as red.
| | 07:55 | So we are going to need three
additional states to showcase the up, over, and
| | 08:00 | down states of our menu.
| | 08:02 | So what I'm going to do is go to my
States palette, and you can see you have the
| | 08:05 | option of creating a New/Duplicate State.
| | 08:08 | So if I were to choose a New State,
notice it comes in totally blank.
| | 08:11 | That's not something I really want, so
I'm going to delete that and instead I'm
| | 08:15 | going to take the wear state and I'm
going to go ahead and duplicate that once,
| | 08:20 | twice, and then a third time.
| | 08:23 | Now, I definitely want these duplicate
states to be the first three states, and
| | 08:28 | I'm going to change the name of them.
| | 08:29 | So I'm going to double click on the
first one and I'm going to name it up.
| | 08:32 | I'll double click on the second one and
I'll name it over, and I'll double click
| | 08:35 | on the third one and I'll name it down.
| | 08:37 | Now, those names are descriptive, they
are describing the state that the tabs
| | 08:41 | are going to be in as a
user interacts with them.
| | 08:43 | So we have an up state, we have an
over state, and we have a down state.
| | 08:47 | Now, we have made the wear our
default content here, but it really doesn't
| | 08:50 | matter, because the only thing we are
going to be exchanging for up, over, and
| | 08:54 | down are these tabs.
| | 08:55 | So our goal is to go ahead and replace
the existing tabs with all up tabs, all
| | 09:01 | over tabs, and all down tabs.
| | 09:03 | The up and the down are going to be
pretty easy because we already have those,
| | 09:06 | but for the over, we are going to
need to import some assets. Okay.
| | 09:09 | The first thing I'm going to
do is go to my up tab for Wear.
| | 09:12 | I notice that it is in the X
coordinate of 38, so I don't need that anymore,
| | 09:16 | I'm going to delete it.
| | 09:17 | But I'm going to take the one beside it,
and holding the Option key down or the
| | 09:20 | Alt key on the PC, I'm going to
make a copy of that and drag that out.
| | 09:25 | Again, I remember that my X coordinate
is 38, and that's going to position that
| | 09:29 | in exactly the right spot.
| | 09:31 | Now, you want to be
extremely careful about this.
| | 09:33 | You don't want any shifting to
occur from one state to another.
| | 09:37 | So these need to be positioned in
exactly the same X and Y coordinates.
| | 09:40 | So now notice in the up state,
we have three up graphics. Okay.
| | 09:44 | Now, I'm going to go to the down state,
because it's going to be the easiest
| | 09:47 | one to tackle next.
| | 09:48 | Our Hang is an X coordinate of 182.
| | 09:52 | So I'm going to grab this, again, hold
down the Option key so that I can make a
| | 09:55 | copy of it, and I'm going to
position its X coordinate at 182.
| | 09:59 | I'm also holding the Shift key down so
that it doesn't move up or down, so I'm
| | 10:03 | constraining it as I drag it.
| | 10:05 | Now, Carry it is an X coordinate of 325.
| | 10:07 | So I'm going to go ahead and move
that to 325 after I copy it. Perfect!
| | 10:15 | So now my down state is done.
| | 10:17 | Well, now I need to do my over state,
and in the over state, this is going to be
| | 10:21 | a little bit trickier, because we
don't have an over tab yet, we are going to
| | 10:24 | have to bring that in.
| | 10:25 | So what I'm going to do is I'm going
to go to File and choose Import and I'm
| | 10:29 | going to go to our 03_07 directory, assets,
and there's a file in there called over_tabs.
| | 10:34 | Now, this file has all three over tabs
lined up together, so that's going to
| | 10:38 | make our life a little bit easier, definitely.
| | 10:41 | So I'm going to click Open, and I'm just
going to click to place those on the page.
| | 10:45 | Now, an easier way to move these around
together is going to be to group them together.
| | 10:48 | So I'm just going to hit Ctrl+
G to group those guys together.
| | 10:51 | Then all I need is the X and Y
coordinates from my first tab here, and its
| | 10:55 | X coordinate is 38.
| | 10:57 | Its Y coordinate is 341.
| | 10:59 | Knowing that, I can delete the other
tabs, and then assign it 38, 341, and now
| | 11:07 | our tabs move in the right location.
| | 11:08 | You might say to yourself, yes,
but you can't see your stuff anymore.
| | 11:11 | Well, I'm going to go to Layers palette,
go to the mainContent layer, and I'm
| | 11:14 | just going to drag this down till it's
below those items, there we go, perfect.
| | 11:21 | So now if I go to the States, now I
have an up state, an over state, and a down
| | 11:26 | state, and that's going to go along
with my wear, hang, and carry. Okay.
| | 11:30 | Let's save our file.
| | 11:31 | The last thing we need to do is go
ahead and add some slices and add our
| | 11:35 | interactivity, so let's
go ahead and do that now.
| | 11:37 | I am going to go ahead and select
my Wear tab, hold the Shift key down,
| | 11:40 | and click Hang, Carry it, and the large
rounded rectangle behind all of your content.
| | 11:47 | I'm selecting all those items because
we need to have slices around those items
| | 11:51 | if we are going to attach any type of behaviors.
| | 11:53 | So if you are going to do behaviors,
slices are absolutely necessary.
| | 11:56 | So I'm going to go ahead and go
to Edit > Insert, and I'm going to
| | 12:00 | choose Rectangular Slice.
| | 12:01 | Once again, I'm going to choose Multiple,
so that I have multiple items selected.
| | 12:05 | Now, it's a good idea to go
ahead and name these as well.
| | 12:07 | So I'm going to name the first slice wearTab.
| | 12:08 | I'm going to name the second slice hangTab.
| | 12:14 | Now notice, I'm using one word, and then the
third slice will be carryTab, all one word.
| | 12:20 | Then finally, for my content area down, here
I'm just going to go ahead and call this content.
| | 12:25 | That seems to make sense as well. All right.
| | 12:26 | So now we need to start adding our behaviors.
| | 12:29 | So I'm going to go to Window and
choose Behaviors to open this up.
| | 12:33 | Now, the Behaviors panel, I'm going
to just tear this off and let it float.
| | 12:37 | I'll close those other guys.
| | 12:38 | The Behaviors panel has been around
for a while and it allows us to add
| | 12:41 | JavaScript to our interactive prototypes.
| | 12:43 | It's extremely easy to use, you just
have to know what all these different
| | 12:47 | little pieces do, and let
me show you what I mean.
| | 12:48 | I am going to click the slice above
Wear it, and I'm going to go to the
| | 12:51 | Behaviors panel and click the + symbol.
| | 12:53 | Here we are going to do what
we call a Set Nav Bar Image.
| | 12:56 | Now, what does that do?
| | 12:57 | Well, Set Nav Bar basically creates a
navigation bar out of multiple links.
| | 13:02 | So you can indicate the current state,
the down state, and it's going to choose
| | 13:05 | those things from your states.
| | 13:08 | So I'm going to choose Set Nav Bar
Image, and I'm going to tell it to Show
| | 13:11 | Down image upon load.
| | 13:13 | That's because the Wear tab is the default tab.
| | 13:16 | I'm going to go ahead and click OK.
| | 13:18 | That was pretty simple.
| | 13:20 | So exactly what have we done there?
| | 13:21 | Well, the Nav Bar Image is a really
complex behavior, and basically what it
| | 13:25 | says, it says, okay, you
are part of a navigation bar.
| | 13:28 | When somebody hovers over you, I'm
going to grab whatever graphic is below this
| | 13:31 | slice on the over state, and
that's what I'm going to display.
| | 13:34 | When you are clicked on, or when
you are the active link, I'm going to
| | 13:37 | display the down state.
| | 13:38 | So that's why we have these
three states on top of each other.
| | 13:41 | They are the first, second, and third.
| | 13:43 | The up, over, and down
names are not really required.
| | 13:46 | It really just requires
that you have three states.
| | 13:50 | But up, over, and down
is a lot more descriptive.
| | 13:52 | So now I'm going to go ahead
and do that for all these guys.
| | 13:54 | For Hang it, I'm going to Set Nav Bar Image.
| | 13:56 | Only this time I'm not going to show the Down
image upon load, because it's not the default.
| | 14:00 | For Carry it, I'm going to
turn On Set Nav Bar Image. Okay.
| | 14:05 | I'm going to preview how
that's going to work for us.
| | 14:07 | So what I'm going to do is I'm going to
toggle off the Hide slices and hotspots,
| | 14:11 | and I'm going to click
right here for image preview.
| | 14:13 | Now, when I do that, notice that the
Wear it down tab already shows up, and then
| | 14:17 | Hang it and Carry it now
have that hover attribute.
| | 14:19 | They are pulling those from the over frame.
| | 14:21 | If I click on those guys, notice
that they display their down state based
| | 14:25 | upon the current click.
| | 14:27 | So they are pulling all of that
from the up, over, and down states,
| | 14:32 | really, really cool.
| | 14:33 | I'm going to click back to Original and
turn Preview off and turn Slices back on.
| | 14:38 | Well, we have got half of our Spry
widget working, but we want all of it working.
| | 14:41 | What we would really like to see is
that when we click one of these tabs, the
| | 14:45 | content down here changes as well.
| | 14:46 | Well, that's why we have these
states, the Wear, Hang, and Carry.
| | 14:50 | When these are clicked on, we are
going to pull new content from those states
| | 14:54 | in the content region.
| | 14:56 | We do that through the use of
another behavior called Swap Image.
| | 14:59 | So I'm going to click on the wearTab slice.
| | 15:01 | I'm going to go up to my + symbol
Add Behavior and I'm going to add the
| | 15:05 | Swap Image behavior.
| | 15:06 | Now, this time it's asking me,
well, what do you want to swap out?
| | 15:10 | I don't actually want to swap the Wear Tab out.
| | 15:12 | The Set Nav Bar Image is handling that.
| | 15:14 | I want to swap out the content region.
| | 15:16 | So I can from the list over here or from
this preview thumbnail, choose content,
| | 15:21 | and then I tell it which state I
want when that one is clicked on.
| | 15:24 | In this case, I want wear.
| | 15:25 | Now, I can also preload the images
and I can restore an image onMouseOut.
| | 15:29 | Great for rollovers but not great for what
we are doing, so I'm going to turn that off.
| | 15:32 | Notice you can also load up
an external file for that too.
| | 15:36 | So there is a lot of stuff you can do here.
| | 15:38 | I'm going to go ahead and click OK, and
we'll just finish this up by doing our other two.
| | 15:42 | Now, I do want to point
one more thing out though.
| | 15:44 | Right now the default behavior
for Swap Image is onMouseOver.
| | 15:48 | I only want that to happen on a click.
| | 15:50 | So I'm going to select that event, grab
that pulldown menu and choose onClick.
| | 15:53 | So these things can get really complex.
| | 15:55 | I am going to select Hang
it and do the same thing.
| | 15:58 | We need to do a Swap Image.
| | 15:59 | We are going to swap the content region
out, so make sure it says content, and
| | 16:03 | we are going to swap that out with hang.
| | 16:05 | Again, I'm going to deselect Restore
image onMouseOut, and then I'm going to
| | 16:09 | change the event to onClick.
| | 16:11 | So once you get the hang of it,
you can do this pretty quickly.
| | 16:13 | I will do the same thing
for Carry it. Swap Image.
| | 16:16 | Make sure you are doing content, turn
the Restore image onMouseOut off, and then
| | 16:23 | make sure you are doing that onClick.
| | 16:24 | I am going to go ahead and save that
and I'm going to preview it using our
| | 16:27 | preview states again.
| | 16:28 | I find the best way to do a preview
is to go right here to this icon,
| | 16:31 | Hide slices and hotspots.
| | 16:33 | That way things don't really sort of dim
out and then I'm going to hit Preview.
| | 16:37 | My navigation bar behaves the same as
it did, but now when I click Hang it and
| | 16:40 | Carry it, that content
shows up, and so does Wear it.
| | 16:43 | So I'm getting a perfect simulation of
what my Spry Tab widget is going to look like.
| | 16:47 | Now, this is working fine, but we are
not going to have a truly interactive
| | 16:51 | prototype until we export it out,
which we'll do a little bit later on.
| | 16:54 | First, I want to focus on optimizing
and exporting graphics out of Fireworks,
| | 16:58 | which is an extremely important
part of your web design workflow.
| | 17:01 | Then once we have those items set,
we'll export out our entire HTML prototype.
| | Collapse this transcript |
| Optimizing images in Fireworks| 00:00 | In most programs, you will set the image
format and optimization settings at the
| | 00:04 | same time you export the images.
| | 00:06 | In Fireworks, however, you set the
optimization settings in the Optimization
| | 00:09 | panel, well before any exporting.
| | 00:12 | This functionality allows you to set
export settings for each individual slice.
| | 00:16 | Those settings are then saved with the file.
| | 00:19 | You're free to edit them at any point and the
images will be exported based on those settings.
| | 00:23 | Fireworks also has a Preview option
that allows you to see how the optimization
| | 00:27 | settings affect the graphic prior to exporting.
| | 00:30 | Another item that I want to discuss
here is how to properly export out images
| | 00:33 | for a CSS based workflow.
| | 00:35 | Now, often your CSS-driven pages are
going to rely heavily on background images.
| | 00:40 | Some that might repeat and others that
will interact with images in a way that
| | 00:43 | you really can't directly export
out from a prototype like this.
| | 00:47 | To make sure images are exported out
properly, I recommend creating what I
| | 00:51 | called pasteboard pages, where
transparent or tiled images can be placed and
| | 00:55 | exported out as required
for proper CSS deployment.
| | 00:59 | As we go through this exercise, we'll
cover not only the basics of setting
| | 01:02 | multiple optimization settings, but
also how to make sure your graphics export
| | 01:07 | the way you need them to,
based on your CSS design.
| | 01:10 | So, here we have our optimize_01.png
file open and we're going to start on the
| | 01:15 | Index page, which is where we're at right now.
| | 01:18 | Now, slicing lets us target specific
areas and then control its Export settings.
| | 01:22 | We saw a little bit of
that in the previous movie.
| | 01:25 | We want each one of these headers
to export out as its own graphic.
| | 01:28 | We have Current Contest,
Previous Contest and Required Reading.
| | 01:33 | So, what we're going to do is I'm going
to switch over to Layers panel and I'm
| | 01:36 | going to unlock my sidebar.
| | 01:37 | Now, I really recommend avoiding
using the Slice tool if you can.
| | 01:41 | There is nothing wrong with manually
drawing a slice, but it's really hard to
| | 01:45 | get as precise as you need it to be.
| | 01:47 | A lot of times, you're going
to want pixel-level precision.
| | 01:50 | So, what I'm going to do instead of
using the Slice tool is I'm going to
| | 01:54 | highlight the Subselection tool, this
is my White Arrow tool and all these guys
| | 01:58 | are grouped, so what this is going to
allow me to do is to mouse over that
| | 02:02 | rectangle and select it, scroll down,
holding my Shift key, mouse over this
| | 02:07 | rectangle and select it.
| | 02:09 | Mouse down, keep my Shift key held
down, mouse over the third rectangle and
| | 02:13 | select that one as well.
| | 02:14 | You want to make sure that those three items
are the only rectangles that you have selected.
| | 02:19 | I'm now going to go up to Edit
> Insert > Rectangular Slice.
| | 02:23 | Because I have more than one item
selected, Fireworks is going to say, would you
| | 02:27 | like multiple slices and I'm going
to say, yes, I want multiple slices.
| | 02:30 | The slices will be sized and
positioned in exactly the same location as
| | 02:35 | the selected element.
| | 02:36 | Now that makes life a lot easier for me.
| | 02:39 | You might also say, well hey, wait a minute.
| | 02:41 | Those were grouped inside a larger thing.
| | 02:43 | Isn't it a problem putting
the slice on top of that?
| | 02:46 | No, absolutely not.
| | 02:47 | Slices exist on the Web layer, right here.
| | 02:50 | So, if I turn the visibility back
on and off, they're right there.
| | 02:54 | They have nothing to do
with the grouped element.
| | 02:55 | They're just sort of
floating above the entire layout.
| | 02:57 | Anything that's underneath them is
what's going to be optimized out.
| | 03:00 | Okay, now I need to go in and change
some properties on each individual slice.
| | 03:05 | So, if I grab the Selection tool and
click my first slice, I can come down
| | 03:09 | here and name this.
| | 03:11 | Right now, it's just using this generic
file name, so there is the file name and
| | 03:14 | then it has this really
generic row and cell name on it.
| | 03:18 | They are hearkens back to when we use
to export these pages out as table cells.
| | 03:21 | Well, we're going to rename
each one of these obviously.
| | 03:23 | So, I'm going to call this one current_head.
| | 03:27 | Now, by naming the slice, you're
choosing what name you want for that graphic
| | 03:32 | when it exports out.
| | 03:33 | So, this is a very important step obviously.
| | 03:36 | The next thing is we choose what
type of image we want, whether we want
| | 03:39 | foreground image, background image, if
we're exporting out CSS in images or HTML.
| | 03:44 | HTML would allow us to go ahead and
export this out as an HTML prototype and
| | 03:48 | have selectable, editable
text in within that region.
| | 03:51 | Okay, since this is going to be a
foreground image, we'll also get to choose
| | 03:54 | what export setting we want to use on that.
| | 03:56 | The pull-down menu just below that
allows us to choose from a bunch of presets.
| | 04:00 | I'm going to choose the GIF Adaptive 256.
| | 04:03 | Now, once I select that, I can look
over the Optimize panel and I see that I
| | 04:07 | have a lot more options available to me.
| | 04:09 | So, if you're thinking, well, is
there anything more than just as defaults,
| | 04:12 | there is and we'll
examine that in just a moment.
| | 04:14 | Now, I need to take care of
the rest of my slices too.
| | 04:16 | So, I'm going to select the Previous
Contest and rename that previous_head and
| | 04:23 | Required Reading and I'm going
to rename that required_head.
| | 04:28 | I'm just going to accept the defaults
and make those GIF Adaptive 256 as well.
| | 04:33 | I'm going to go ahead and save the file.
| | 04:34 | Now, I've identified how those graphics
should export out and what they should
| | 04:37 | be named when Fireworks exports this file out.
| | 04:40 | So, that's really cool.
| | 04:41 | Now, I'm going to go to my Page palette
and I want to browse to the gear page.
| | 04:45 | I'm going to scroll up and
I'm going to find our camera ad.
| | 04:48 | We use the Selection tool and I'm
just going to go ahead and select that.
| | 04:51 | Now, instead of going up to the menu, a
faster way to insert a rectangular slice
| | 04:55 | would be to right-click and
choose Insert Rectangular Slice.
| | 04:58 | Note that there is also a hotkey for that.
| | 05:00 | So, if you're doing a lot of that, you can
insert the slice by just using the hotkeys.
| | 05:04 | All right, I'm going to insert
the rectangular slice. There we go.
| | 05:07 | This time we only have one object
selected, so it didn't ask us for multiples.
| | 05:10 | Now, I'm not really sure what
setting I should use on this.
| | 05:13 | First off, I'm going to name the slice
camera_ad and I'm not really sure which
| | 05:19 | setting I should use.
| | 05:21 | So, one of the things I want to
do is take advantage of the preview
| | 05:23 | functionality that Fireworks gives me.
| | 05:26 | So, I'm going to turn-off my Slice
Preview, right over your Hide Slices and
| | 05:30 | Hot-Spots and then I'm going to go to a 4-Up.
| | 05:33 | Now at a 4-Up view, I could grab the
Hand tool and hold the Shift key down and
| | 05:38 | I could move this up in a place so I can
kind of see what these settings would give me.
| | 05:42 | So, I'm looking at my original in
the upper-left hand corner and then I
| | 05:45 | can click on each one of these windows, choose
New > Optimization Settings and preview them.
| | 05:50 | I am going to go ahead and choose
JPEG and leave the Quality to 80.
| | 05:54 | In the lower-left hand corner, I'm
going to change it to JPEG and set the
| | 05:58 | Quality to 60 and then in the lower-
right hand corner, I'm going to set the Type
| | 06:03 | to JPEG and set the Quality to 40.
| | 06:05 | So, I really just want to compare these
guys, I think the JPEG is probably the
| | 06:08 | best solution because of the nice
subtle gradient and the camera itself.
| | 06:11 | But I want to know which quality setting to use.
| | 06:14 | At 80, I can see that it'll export out as
a 255K graphic with really nice quality.
| | 06:20 | At 60, the quality begins
to fall off a little bit.
| | 06:22 | I can see a lot of archiving around here,
a lot of banding in the color, and I
| | 06:26 | only go down to 136K.
| | 06:26 | So, it's not like it's huge amount of savings.
| | 06:30 | At 40, the quality is just unusable,
there's just way too much archiving, you
| | 06:33 | can't really read the text
and the quality is only 89.
| | 06:36 | So, I think I'm going to keep the JPEG at 80.
| | 06:39 | So, now I'm going to go back to my
Original, turn my Slice Preview back on
| | 06:43 | again, select my slice and make sure that my
JPEG quality is at 80 and it is. Wonderful!
| | 06:49 | So, now I'm going to save that file.
| | 06:51 | Now, if I go to the Page palette and I
scroll down, I can see that I have added
| | 06:55 | a few pasteboard pages.
| | 06:56 | So what's going on there?
| | 06:57 | Well, several of our images need to be
transparent GIFs or created in a way that
| | 07:01 | can't be displayed properly
in a prototype composition.
| | 07:03 | For example, we've got this background
graphic that has multiple states or in
| | 07:09 | the case of this photo drop shadow here,
we have a graphic that actually needs
| | 07:12 | to be a lot larger than the
images within the prototype.
| | 07:15 | So, these images aren't going to look
right in our prototype and if we export
| | 07:18 | them out, we are not going to
be able to use them in our CSS.
| | 07:20 | This page is simply for exporting.
| | 07:22 | You'll notice that here we have a
couple of graphics that are going to be
| | 07:25 | employing in our CSS Sprites technique.
| | 07:27 | We have a large drop shadow graphic,
we have a tab background graphic and
| | 07:31 | we have our multi-tab states, but we also
have some pages that are using transparency.
| | 07:37 | When you create a transparent GIF,
you're going to often need to choose a
| | 07:40 | matte color and you can see here, if
I click my slice in my Optimization
| | 07:44 | panel, I see a matte color.
| | 07:45 | You're going to need that matte
color to ensure proper blending with an
| | 07:48 | element's background color, but one of
Firework's greatest shortcomings in my
| | 07:52 | opinion is that if you choose a matte
color for one of your GIF images, it's set
| | 07:56 | for the entire page, and to me,
that's not exactly the best option.
| | 08:00 | So, unfortunately, every time we
want a new matte color, we create a
| | 08:04 | new pasteboard page.
| | 08:06 | That's not the most efficient way to
do that and if you're wondering why they
| | 08:10 | are all positioned to such
different locations, usually when I create a
| | 08:12 | pasteboard page, I'll simply duplicate
the page, delete everything else on it
| | 08:16 | and just leave that one element
behind, but it doesn't really matter.
| | 08:19 | Now, let's practice a little bit
by creating our own pasteboard.
| | 08:23 | All right, I'm going to go down
to my Page panel and I'm going to
| | 08:26 | choose New/Duplicate Page.
| | 08:27 | I'm going to call this one pasteboard_footer.
| | 08:32 | So, this is where my
footer graphic is going to be.
| | 08:34 | Now, right now, this page has a white canvas.
| | 08:36 | So, I'm going to go up to Modify >
Canvas > Canvas Color and I'm going to tell
| | 08:41 | it to be Transparent.
| | 08:42 | So, that is a really nice feature.
| | 08:43 | It allows you to have some
pages with the background color, but
| | 08:46 | others transparent.
| | 08:47 | Now, I need my footer graphic, so I'm
going to go to my homepage, I'm going to
| | 08:50 | scroll down and find my footer graphic.
| | 08:53 | This is all I'm looking for.
| | 08:54 | I don't need the text.
| | 08:55 | I don't need that background color.
| | 08:56 | Now, speaking of that background color,
that footer graphic is going to need to
| | 08:59 | use that as a matte color.
| | 09:01 | So, it's not a bad idea to go
ahead and store that in your swatches.
| | 09:04 | Now, the easiest way for me to do that
is to go ahead and select that graphic
| | 09:08 | with the brown color on it,
and go to my Swatch palette.
| | 09:10 | Now, you may want to expand your Swatch
palette up just a little bit and throw
| | 09:14 | that color in there. So there we go.
| | 09:16 | So, now I'm going to make sure that my
graphic is being copied and I'm going to
| | 09:21 | collapse the Swatch panel and scroll
down to our new pasteboard_footer page
| | 09:25 | that we have created.
| | 09:26 | Now, it doesn't really
matter where you paste this.
| | 09:28 | I'm just going to go ahead and do
a Ctrl+V to paste it on the page.
| | 09:32 | You're not really going to be able
to see it that well, but that's okay.
| | 09:35 | Remember, this is a transparent graphic.
| | 09:36 | I'm going to go ahead and put a slice on this.
| | 09:38 | So, I'm going to go to Edit > Insert >
Rectangular Slice and I need to go ahead
| | 09:43 | and set some optimization settings for that.
| | 09:45 | So, using my Optimization panel, I'm
going to choose GIF and I want that to be
| | 09:48 | Adaptive, Colors 256.
| | 09:51 | Currently, it says No Transparency.
| | 09:53 | I want to set that up so that it's
using the Alpha Transparency and then for my
| | 09:57 | matte color, I'm going
click and use my Swatch color.
| | 10:00 | Now, unfortunately, your
swatch colors don't come up.
| | 10:02 | So, let me show you how you
are going to need to do this.
| | 10:05 | I'm going to expand my Swatch palette out again.
| | 10:07 | I'm going to click on the matte color
and then I'm going to go all the way down
| | 10:09 | here to my Swatches, hover over that and click.
| | 10:12 | It's kind of a long way
about it, but it works out okay.
| | 10:16 | Now, this is going to be a background
graphic and it's really important that you
| | 10:18 | make it the size that you need it.
| | 10:20 | I want this to stay right off the top
of my own a little bit, so I need to make
| | 10:24 | the slice a little bit larger so that
this is inside the slice and not right up
| | 10:28 | against the edge of it.
| | 10:29 | So, what I'm going to do is I'm
going to resize this slice using the
| | 10:32 | Properties Inspector.
| | 10:33 | So I'm going to grab my Selection tool,
click on the slice and I'm going to
| | 10:36 | resize this and I'm going to give it 140
pixels wide and give it a height of 35 Pixels.
| | 10:40 | I am also going to need to sort of re-
center that as well and actually, if
| | 10:45 | you highlight both items, you can use your
Align panel and go ahead and align them up.
| | 10:52 | There we go.
| | 10:52 | Now, that is directly in the middle of that.
| | 10:55 | You may want to label this by
setting this as footer background graphic.
| | 10:58 | It's not necessary but for somebody else
that might be coming along, it might be
| | 11:01 | helpful to let him know what this
graphic is and what this is going to be doing.
| | 11:04 | In the last step and this is a really
important one and we don't want to forget this.
| | 11:07 | We need to name the graphic.
| | 11:09 | Right now, it's that really
sort of obtuse slice name.
| | 11:11 | So, we are going to go ahead and name
this footer_bkg for background and that's
| | 11:17 | the name it will be when that exports out.
| | 11:19 | So, you definitely want to make sure
you don't skip the step of naming that, so
| | 11:22 | that when you export to graphic out,
you don't end up with a bunch of images
| | 11:25 | named _r2, _c2 or c3.
| | 11:29 | That's really confusing to remember
exactly what those guys are, and who
| | 11:32 | they are supposed to be.
| | 11:33 | So, now our images are
all prepared for exporting.
| | 11:36 | Since we have multiple pages with
multiple image types, it would be really nice
| | 11:39 | if we could just go ahead and export them
all out at the same time with just one click.
| | 11:43 | Well, guess what? In our next
exercise, we are going to do just that.
| | Collapse this transcript |
| Exporting web graphics from Fireworks CS4| 00:01 | Fireworks makes exporting your sliced
images easy and it gives you a tremendous
| | 00:05 | amount of control over the process.
| | 00:06 | You can choose to export HTML along with
your images, export out both sliced and
| | 00:11 | non-sliced areas, export only selected
slices and choose whether to export an
| | 00:15 | entire multi-page document
or just one page at a time.
| | 00:18 | Usually, I'll export my images out,
once the prototype and revision portion of
| | 00:22 | the design are finished.
| | 00:24 | By using a single command on my finished
prototype, I'll have all the graphics I
| | 00:28 | need to start creating my design in Dreamweaver.
| | 00:30 | In this exercise, we'll export our sliced
images into a target directory for later use.
| | 00:35 | So, we have the optimize_02.png file
open and this one has been sliced up to
| | 00:41 | give us all the graphics that we
need, including our pasteboard pages.
| | 00:44 | So, I'm going to go to File and choose
Export and we are going to browse to the
| | 00:48 | 03_09 folder and I'm going to open up
the images directory because I want them
| | 00:53 | to go ahead and export there.
| | 00:55 | Now, notice that I have a few choices here.
| | 00:57 | I can export a PDF file, HTML and Images,
Dreamweaver Library items, there are lot
| | 01:03 | of things that you can do here.
| | 01:05 | We want to choose Images Only.
| | 01:06 | Whenever you choose a format, you are
going to see the choices specific to that
| | 01:10 | format show up just below that.
| | 01:12 | In this case, notice that we can say
don't export slices, Slice Along Guides,
| | 01:16 | so if you have done page guides and you want to
use those to create slices, you could do that.
| | 01:20 | We are going to choose Export Slices
because we went to the trouble of slicing
| | 01:23 | up specific graphics.
| | 01:24 | If you choose Include areas without
slices, what it will do is any non-sliced
| | 01:29 | area will be exported out as a graphic.
| | 01:32 | It'll have a generic name and it'll
have a generic optimization setting but
| | 01:36 | it will export out.
| | 01:37 | I don't recommend doing that unless
you are doing some type of a table based
| | 01:40 | layout, where you have to
have all those things come out.
| | 01:42 | Now, another thing I'm going to
do is deselect Current page only.
| | 01:44 | I want every graphic that's going to make up
my site including the ones in the pasteboard.
| | 01:48 | So, that's really all we have to do.
| | 01:51 | I'm going to go ahead and hit Save.
| | 01:52 | It's going to take it a moment but
not that long and let's go and see if
| | 01:56 | we've got our images.
| | 01:57 | And if I browse in to my exercise files, I can
see all of the graphics that I've exported out.
| | 02:01 | These are all assets that are absolutely
necessary for me to build my pages in Dreamweaver.
| | 02:06 | I have got some JPEGs, I have got GIF
files, I have transparent GIF files,
| | 02:10 | all with different matte background colors.
| | 02:12 | That was an extremely efficient process.
| | 02:14 | Although we do lack an automated
integrated workflow between Fireworks and
| | 02:17 | Dreamweaver, you can create a
Fireworks Dreamweaver workflow based on rapidly
| | 02:21 | creating these types of prototypes
and then generating assets from them.
| | 02:25 | Now, if we need to edit or replace an
image within our site, we have a single
| | 02:28 | source document from which to
edit and re-export the asset.
| | 02:32 | And any change to our site layout
can be experimented with in a visual
| | 02:35 | environment such as Fireworks, making
comps for clients easier to create without
| | 02:39 | having to change our
source code or source graphics.
| | Collapse this transcript |
| Exporting interactive prototypes| 00:00 |
Now that we've gone through the process
of image optimization and exporting,
| | 00:04 |
we can discuss exporting
out interactive prototypes.
| | 00:07 |
To do this, we'll use the setting that
has been around in Fireworks for quite
| | 00:10 |
some time, Export HTML and Images.
| | 00:13 |
This setting will generate a table
based HTML page filled with images and
| | 00:17 |
text from your pages.
| | 00:19 |
Any interactive behaviors will export
out as embedded JavaScript functions,
| | 00:23 |
which will control the selected interactivity.
| | 00:25 |
Clearly, from a standards based and
proper accessibility standpoint,
| | 00:28 |
this is less than ideal.
| | 00:30 |
However, for quickly showing a client
what you had in mind and allowing them
| | 00:34 |
to interact with your design, it's great.
| | 00:36 |
You can post your results online making
sure that they know the code isn't what
| | 00:39 |
you'll actually generate and then tweak
the design without generating the first
| | 00:43 |
line of code in Dreamweaver.
| | 00:44 |
So, here we have our desolve_prototype.
png file open and it's all sliced up,
| | 00:49 |
optimized, all the behavior has been
added to it, it's ready to be exported.
| | 00:53 |
So, we're going to go to File and choose Export.
| | 00:55 |
We're going to export it
out in this prototype folder.
| | 00:59 |
So, I'm going to double click on that
to open up prototype and that's the one
| | 01:01 |
that you want to choose.
| | 01:03 |
Now, we're going to choose HTML and
Images for our Export option and that's
| | 01:07 |
going to open up a lot of
additional choices for us.
| | 01:10 |
The first thing we're going to do is
export HTML and for slices, I want to make
| | 01:13 |
sure we're exporting slices.
| | 01:14 |
I'm also going to include
the areas without slices.
| | 01:17 |
Most of our slicing was done, so that
we'll get the proper images to work within
| | 01:21 |
Dreamweaver, but here, we want to make
sure that everything is visible, so we're
| | 01:24 |
going to include those.
| | 01:25 |
That's going to export out a lot of
our graphics using sort of the generic
| | 01:28 |
naming convention and
generic optimization settings.
| | 01:31 |
Now, I'm going to deselect Current page only.
| | 01:32 |
I want to export out my entire prototype,
not just as one page, although that's
| | 01:36 |
certainly an option.
| | 01:37 |
I'm also going to put the images in a subfolder.
| | 01:40 |
Notice that it will create one
for you if one doesn't exist.
| | 01:43 |
So, I'm going to go ahead and let it
create the Images subdirectory for me.
| | 01:46 |
Okay, that's all you need to do.
| | 01:47 |
I'm going to hit Save and it will take
a second or two, because it's exporting
| | 01:51 |
out all these pages and all
these images at the same time.
| | 01:54 |
Now that our export is complete, I'm
going to switch over to Dreamweaver and
| | 01:57 |
see what we've got.
| | 01:58 |
So, I'm going to go into the 03_10
folder, prototype and here's the file that
| | 02:03 |
I just exported out.
| | 02:04 |
When I open up the Index page, it's a good
place to start, right, and there we have it.
| | 02:08 |
If I preview this in my browser, you can
see here's my interactive prototype and
| | 02:13 |
I can click on the pages and navigate to
each page and if I go to the shop page,
| | 02:17 |
I can see that my tabbed widget
prototype is working as well, cool!
| | 02:22 |
So, a couple of things
didn't translate very well.
| | 02:24 |
For example, the design isn't
centered on the page and we don't have that
| | 02:28 |
repeating background graphic everywhere.
| | 02:30 |
But it would be really, really simple
for us in Dreamweaver to add that
| | 02:33 |
and center it on the page.
| | 02:34 |
Remember, this is exporting out as a
table based design, so I could select the table,
| | 02:38 |
hold the entire page
and align that to the center.
| | 02:41 |
That's really easy to do.
| | 02:42 |
If I save it and test it, now the
Index page is aligned to the center and
| | 02:47 |
it wouldn't be that difficult to do the same
thing to galleries, gear, contact and shop.
| | 02:51 |
So, is this standards-
compliant? Absolutely not.
| | 02:55 |
That's why there's no way I'd
recommend this as your finished product.
| | 02:59 |
However, for testing functionality and
engaging teams or clients in the design
| | 03:03 |
review process, this prototype
export functionality is hard to beat.
| | 03:07 |
It is a really, really cool feature and
I think you're going to enjoy using it.
| | 03:11 |
| | Collapse this transcript |
| When to export XHTML and CSS from Fireworks CS4| 00:01 | From the moment web design workflows
switch to CSS based layouts, most designers
| | 00:05 | have been looking for a way to
export their mock-ups as fully functional
| | 00:09 | standards-compliant XHTML and CSS.
| | 00:11 | In CS4, Fireworks has added a CSS and Images
export capability that attempts to do just that.
| | 00:17 | Although I personally feel this
feature isn't quite ready to be adopted into
| | 00:21 | most XHTML CSS workflows, I do want
to take a moment to preview Firework's
| | 00:26 | CSS and Images export feature and talk about
how this process might evolve in the future.
| | 00:32 | So I have opened up our css_export.png file.
| | 00:36 | I know it looks a little different
compared to what we are normally used to
| | 00:39 | seeing in a prototype, but I just
wanted to point out on the Layers panel, all
| | 00:42 | layer visibility has been turned off,
except of the Structure layer, who has
| | 00:45 | made another appearance.
| | 00:46 | So when you are designing a page to
be exported out using this feature, one
| | 00:50 | of the things you want to do is create sort of
a base level structure out of primitive shapes.
| | 00:55 | In this case rectangles.
| | 00:56 | Those primitive shapes will export
out as div tags, and if you name these
| | 01:00 | shapes, they will go ahead and assign the
ID and write their styles based on those.
| | 01:04 | So you can see up top we have a header,
then we have our content rectangle, footer.
| | 01:12 | We have one over here that needs to be
named sidebar, so go ahead and click on
| | 01:15 | that one, and give it the name sidebar so
that div tag will also have the proper ID.
| | 01:20 | So one of the things I also want you to
notice about these is the use of color.
| | 01:24 | In earlier prototype, we were
changing our color so we could identify these
| | 01:28 | areas, but now we are using colors
either similar to the background, or a
| | 01:33 | separate color based upon what we want
the background of that div tag to be.
| | 01:36 | So here we are being
very color specific with it.
| | 01:39 | Another thing is these guys are not overlapping.
| | 01:41 | Some of them are touching and
butting up right against each other.
| | 01:44 | In the export process, if structural
elements overlap, it's going to trigger
| | 01:47 | absolute positioning, then all the
elements on your page will be absolute
| | 01:51 | positioned, and that's not
going to work for most layouts.
| | 01:53 | As long as the elements don't overlap,
you are going to get a float-based
| | 01:56 | layout, and that's going to
give you a better result. Okay.
| | 01:58 | Well, I'm going to go ahead and
turn on these other layers, and bring
| | 02:01 | our content into focus.
| | 02:03 | We can see, for the most part, it looks
pretty much the same as it looked before.
| | 02:07 | We have made a couple of modifications
that are necessary due to this export
| | 02:11 | process, and I do want to talk about
the whole larger theory behind this.
| | 02:15 | We are doing some things within our XHTML
and CSS design that you simply can't do here.
| | 02:21 | For example, we have a background
graphic assigned to the HTML tag, and another
| | 02:25 | background graphic assigned to the
body tag, and it's giving a nice composite
| | 02:29 | background for our XHTML CSS design.
| | 02:33 | It's simply impossible to do here
through this export feature, and I'm not
| | 02:37 | really being too harsh on
Fireworks when I say that.
| | 02:39 | That would be extremely difficult to
automate as part of an export process,
| | 02:43 | because there is no real way for me to
communicate to Fireworks exactly what I
| | 02:47 | want this graphic to be doing and
which tag I want it to assign it to.
| | 02:51 | So hopefully that will be
something that we see in future releases.
| | 02:54 | So we are almost ready to export this out.
| | 02:56 | But I'm going to turn on the Web layer.
| | 02:58 | The Web layer allows us again to export
out images, but control certain things
| | 03:01 | about these images as well.
| | 03:03 | In a CSS based export, you only
use slices to export out foreground
| | 03:07 | and background images.
| | 03:09 | You don't use slices to define regions.
| | 03:11 | You use primitive shapes
like rectangles for that.
| | 03:13 | Well, here we have a background
graphic for our footer, or at least it's
| | 03:17 | supposed to be a background graphic.
| | 03:19 | So I can use my Slice tool to ensure
that it exports out as a background graphic
| | 03:23 | and not a foreground graphic.
| | 03:24 | So I'm going to go ahead and select the
Slice tool, and I'm just going to draw a
| | 03:27 | rectangular slice around that image.
| | 03:30 | Now, I have to be very, very careful with this.
| | 03:33 | I want to make sure that
there is no overlapping.
| | 03:35 | So I'm going to zoom up on the slice
and make sure that it doesn't overlap with
| | 03:39 | the element above it.
| | 03:40 | So I may even just reposition that to
be doubly sure of that, to make sure that
| | 03:44 | guides are in the right place too.
| | 03:45 | I am going to zoom back out, and
I'll need to do a couple of things here.
| | 03:49 | Number one, I need to name this.
| | 03:50 | So I'm going to name it footer_bkg.
| | 03:54 | For Type of graphic, I'm going to
change it from Foreground Image.
| | 03:56 | I want to change that to Background Image.
| | 03:59 | As a matter of fact, I just noticed this.
| | 04:00 | I want to center that a
little bit better. There we go.
| | 04:02 | So just make sure that
horizontally the footer background graphic is
| | 04:05 | centered within that slice.
| | 04:08 | But now that I have set that as a
Background Image, I can do certain things with it.
| | 04:11 | For example, I'm going to tell it
not to repeat within my footer div tag.
| | 04:14 | I'm also going to give it a background
attachment property of scroll, and set a
| | 04:18 | couple of positioning properties.
| | 04:20 | Horizontal Position, I'm going to
leave it Center, but Vertical Position, I'm
| | 04:23 | going to set to Top.
| | 04:24 | Notice that you can also
use calculated values as well.
| | 04:27 | So that's pretty cool.
| | 04:27 | We can set these CSS properties here
before we ever start exporting the file out.
| | 04:32 | That's pretty neat.
| | 04:32 | Let's scroll back up, save the
file, and we are ready to export.
| | 04:38 | So I'm going to go to File and choose
Export, and I'm going to browse to the
| | 04:42 | 03_11 folder, because that's where
we are going to export our file out.
| | 04:45 | Now, from the Export options, I'm
going to choose CSS and Images, and I'll go
| | 04:49 | ahead and give this a name.
| | 04:50 | I'm going to name it dissolve.htm.
| | 04:54 | I notice that I don't have quite
as many options as I had before.
| | 04:57 | As a matter of fact,
Current page only is grayed out.
| | 04:59 | Using the CSS and Images export feature
you can only export out one page at a time.
| | 05:04 | I can't put my images on a subdirectory though.
| | 05:05 | So I'm going to browse, I'm going to go
to 3_11, open up the images directory,
| | 05:10 | and I want to select that.
| | 05:11 | So now I can see that I'm
exporting that out to _images.
| | 05:14 | Now, if I click the Options button in
the lower right hand corner, I can set
| | 05:18 | some pretty interesting options for my page.
| | 05:20 | First, I can control whether the CSS
is added as embedded styles or is an
| | 05:23 | external style sheet.
| | 05:24 | We are going to keep the default, which is
to write them into an external style sheet.
| | 05:28 | You can also choose your extension.
| | 05:29 | So if you want HTML instead
of HTM, you can choose that.
| | 05:32 | You can make sure that you are using the
right document type declaration by choosing that.
| | 05:37 | We are going to make this Dreamweaver XHTML.
| | 05:39 | Now, one really cool thing here
that we can do is we can set some basic
| | 05:42 | document properties.
| | 05:43 | I talked earlier about how our
body tag or HTML tag has a background
| | 05:47 | image applied to it.
| | 05:48 | We can apply a background image to the body tag.
| | 05:51 | So I'm going to go ahead and do that.
| | 05:52 | I am going to choose Browse and I'm going
to browse into the 03_11 assets directory.
| | 05:58 | I see that inside that I
have the background.jpeg.
| | 06:00 | That is our seamlessly
tiled image for our background.
| | 06:03 | I'm going to select that.
| | 06:05 | I can choose to repeat it, and give it any
type of background attachment that I would want.
| | 06:10 | I'm going to leave the default as scroll.
| | 06:11 | The other nice thing I can do is
align the page within the browser, and I'm
| | 06:14 | going to choose to center
align my pages, and click OK.
| | 06:17 | Well, now I'm ready to export,
and I'm just going to hit Save.
| | 06:21 | After exporting, I'm going to switch
over to Dreamweaver and we'll take a
| | 06:24 | look at our results.
| | 06:25 | I'm going to go ahead and
open up the dissolve.htm file.
| | 06:29 | Not bad, certainly not bad
for an automated process.
| | 06:33 | If I preview this in my browser, you
can see what came over well and what
| | 06:36 | didn't come over well.
| | 06:37 | What's really interesting to me is all
my text came over and it formatted the
| | 06:41 | same way that I had the text
formatted inside of Fireworks.
| | 06:45 | It's not really being
controlled through structure through.
| | 06:47 | Instead of being an H1 or H2 tag for
example, this has a class style applied to
| | 06:51 | it that's doing the formatting.
| | 06:53 | So I'm going to have to go back
in and add a lot more structure.
| | 06:55 | I notice that some of the graphics
didn't come over, and that's mainly because
| | 06:59 | I didn't slice them.
| | 07:00 | I didn't slice them because they are
background images, and I didn't want to
| | 07:02 | delete all these image tags.
| | 07:03 | So I have got a lot of work ahead of me if
I want to make this fit my normal workflow.
| | 07:07 | If I look in Code View, for example, I
can see that here I have div tags, no
| | 07:11 | tables, which is nice.
| | 07:13 | But there is a lot of classes going
on here, and that's based upon the way
| | 07:16 | Fireworks generates its formatting.
| | 07:18 | It does a lot of class based assignments.
| | 07:21 | If I look in my external CSS
file, you can see what I mean.
| | 07:23 | We have a class for our paragraphs.
| | 07:26 | We have a class for Absolute Wrap,
rowWrap, clearfloat, we have got lot of
| | 07:30 | stuff going on in there.
| | 07:31 | You are also going to see a lot of
properties that you wouldn't normally see.
| | 07:33 | For example, almost every item is
floated to the left, displayed in line,
| | 07:38 | and overflow hidden.
| | 07:39 | That's going to prevent float collapse.
| | 07:41 | This is going to prevent double
float margin bugs in Internet Explorer.
| | 07:45 | They just float items because they are
not really sure exactly how you want to
| | 07:48 | structure the layout.
| | 07:49 | So it's a nice sort of generic option,
but unfortunately this feature just
| | 07:53 | isn't ready to be adopted into the majority
of the web design workflows that I have seen.
| | 07:58 | While it will work perfectly for
really specific designs, those designs would
| | 08:02 | probably be created faster by hand.
| | 08:04 | It also leaves a little bit to be desired.
| | 08:06 | You would end up cleaning up the XHTML
and rewriting the CSS to a level where it
| | 08:10 | would have just been better to
do it from scratch to begin with.
| | 08:13 | However, the point of this
movie is not to bash this feature.
| | 08:16 | It is to show you what the feature
currently does, and more importantly, to show
| | 08:20 | the direction that Adobe is taking Fireworks in.
| | 08:23 | Keep in mind that this is merely
the first release of this feature.
| | 08:25 | If history is any indication, this
feature will continue to be improved
| | 08:29 | with every release, and it's
definitely something you want to keep an eye
| | 08:32 | on for future adoption.
| | Collapse this transcript |
|
|
4. Controlling Your CSS with DreamweaverCSS workflows in Dreamweaver| 00:00 | In this chapter we'll be focusing on
the tools inside of Dreamweaver that allow
| | 00:04 | us to create, modify, and control our CSS.
| | 00:08 | The goal is not just to teach you what
these tools do, although that certainly
| | 00:11 | is something we'll focus on, but to
discuss how these tools fit together to
| | 00:15 | create efficient ways of
working with your styles.
| | 00:18 | We will explore the CSS Styles panel,
and how it can act as a central hub for
| | 00:22 | all your CSS based tasks.
| | 00:24 | Ways to set Dreamweaver's
Preferences to better control your styles, and
| | 00:29 | explore a few new features in
Dreamweaver CS4 that make working with styles
| | 00:34 | quick and intuitive.
| | 00:36 | If you are brand new to CSS, there are
going to be some parts of this chapter
| | 00:39 | that use terms and techniques that might
still be a little new to you. That's okay.
| | 00:43 | I would rather you focus on how the
tools in Dreamweaver work, rather than
| | 00:47 | focusing on exactly
what's going on with the CSS.
| | 00:50 | These are all techniques that will be
discussed in more detail in other chapters.
| | 00:54 | If you are an experienced web designer,
this chapter will help you see how
| | 00:57 | Dreamweaver can help you create
personal workflows that dramatically speed up
| | 01:00 | your code development and maintenance.
| | 01:02 | Focus not just on how these tools work, but
focus on how these tools can work together.
| | 01:07 | By combining all of Dreamweaver's CSS
capabilities based on the way you like
| | 01:11 | to work, you can truly personalize the way
Dreamweaver creates and controls your CSS.
| | Collapse this transcript |
| Using the CSS Styles panel| 00:00 | The key to creating, managing, and editing
your CSS in Dreamweaver is the CSS Styles panel.
| | 00:06 | Acting as a central hub for all things
CSS in Dreamweaver, it provides you with
| | 00:10 | both a global view of document styles,
as well as allowing you to focus on
| | 00:14 | individual rules and style applications.
| | 00:16 | You will find the CSS Styles panel in
the CSS panel group, usually located here
| | 00:20 | at the top of the panel dock.
| | 00:22 | At the top of the panel, you will see
buttons for two views, All and Current.
| | 00:27 | The All view gives you an overview of all
CSS styles applied to the current document,
| | 00:31 | ehile the Current view gives you a
detailed view of the rules applied to
| | 00:34 | a selected element.
| | 00:35 | In this movie, we'll take a sample file
and get comfortable with using the CSS
| | 00:39 | Styles panel to control our styles.
| | 00:41 | So we are in the galleries file, and
one of the things that I want to do is I
| | 00:44 | want to be able to see everything
that CSS Styles panel has to offer.
| | 00:47 | So I'm going to switch over to All.
| | 00:49 | One of the other things I'm going to
do is I'm going to go down to the Files
| | 00:51 | panel, and I'm going to double
click the Files panel tab to close it.
| | 00:55 | The CSS Styles panel needs a lot of
vertical space, so I want to go ahead and make
| | 00:58 | sure it's the only panel currently open.
| | 01:00 | Well, starting in the All view, one of
the first things I notice is that I have
| | 01:03 | an external style sheet called
main.css attached to the page.
| | 01:06 | I can also see that the media types
screen and projection have been assigned to it.
| | 01:10 | So media types will be shown in
parenthesis beside the name of the
| | 01:13 | external style sheet.
| | 01:14 | If the style sheet is open, you
will see a listing of every single rule
| | 01:18 | inside the style sheet.
| | 01:19 | Now, if I go up and collapse the
style sheet, I can also see that I have an
| | 01:23 | additional style sheet for print
and some embedded rules as well.
| | 01:27 | Now, let's take a moment to go
back and open up the main.css again.
| | 01:31 | The CSS Styles panel let's us view
these properties in three different ways.
| | 01:35 | Let's choose the blockquote selector.
| | 01:37 | I can see that below that I see a list
of all the properties that are applied to
| | 01:40 | that particular selector.
| | 01:42 | Now, there are three different
ways to view these properties.
| | 01:44 | If you look in the lower left hand corner of
the CSS Styles panel, you will see three icons.
| | 01:49 | The first one is a Category view.
| | 01:51 | It organizes all of your
properties by specific categories.
| | 01:54 | The second choice is a List view.
| | 01:56 | It's going to display all assigned
properties in blue at the top of the
| | 01:59 | listing, and then give you an alphabetical
listing of every other CSS property below that.
| | 02:04 | Now, my favorite one is the third
one, the Show Only set properties.
| | 02:07 | That's going to filter everything else
out and just show you the properties that
| | 02:10 | have been applied to this particular rule.
| | 02:12 | It's also going to let you
add properties at this point to.
| | 02:14 | Notice that I have a little link here.
| | 02:16 | I can say Add Property, and I'll say
just add font-style, and we'll go ahead and
| | 02:21 | use the pull-down inspector to
apply italic, and if I scroll down to my
| | 02:25 | blockquote in the page, I can
see that I have also italicized it.
| | 02:29 | So you can edit your rules directly
from this panel without having to go into
| | 02:32 | any code or any additional dialog boxes.
| | 02:35 | That's really, really cool.
| | 02:36 | Now, if I look in Current view, I'm going
to see properties of a selected element.
| | 02:40 | So I'm going to go back up my page and
click inside this main heading, New York City.
| | 02:43 | As soon as I do that, the CSS Styles panel
refreshes to show me a new set of information.
| | 02:48 | Now, here there are actually three
sections to the CSS Styles panel.
| | 02:51 | So I'm going to separate these out a
little bit, so that we can see them
| | 02:53 | a little bit better.
| | 02:54 | Up top we have a Summary
for the existing selection.
| | 02:57 | Down below that we have a set of rules.
| | 02:59 | Now, this one can actually change.
| | 03:00 | You can see information about an
individual selected property, or you can
| | 03:04 | view the cascade of rules as it's applying to
this particular element, which is really neat.
| | 03:10 | Little bit later on we'll show how
to use this view to resolve style
| | 03:13 | conflicts inside Dreamweaver.
| | 03:14 | Well, you can also modify rules here as well.
| | 03:17 | If I go down to the most specific rule
and click on that, I can see that the
| | 03:19 | font-style is italic, and
indeed the text is italicized.
| | 03:22 | Well, if I click, I can grab the pull-
down menu, and choose normal, so that's
| | 03:26 | yet another place for me to edit my styles.
| | 03:28 | That's going to go and update
my external style sheet as well.
| | 03:31 | Notice that we have another set of
icons down here as well that allow us to
| | 03:34 | attach style sheets, create new rules,
edit existing rules, and that's going to
| | 03:38 | bring up a separate dialog box, and of
course we have a Trash Can, which allows
| | 03:42 | us to delete an entire rule
or merely a selected property.
| | 03:45 | Now, there is one more thing I want
to show you that I think is really neat
| | 03:47 | about the CSS Styles panel.
| | 03:49 | I'm going to click back on the All view,
and I'm going to expand this divider,
| | 03:52 | so that I can see more of the
rules and less of the Properties.
| | 03:55 | I'm going to scroll all the way
down until I find my embedded styles.
| | 03:59 | So in the embedded style sheet, I
really only have one rule, and maybe
| | 04:03 | that should go up here.
| | 04:04 | In the past, we have had to cut or
copy and paste, and now I can simply
| | 04:08 | select this rule, drag up into my
style sheet exactly where I want the rule
| | 04:12 | to be placed, and let go.
| | 04:14 | It's going to move it.
| | 04:15 | It's going to cut it from my embedded
styles, actually move it to my external
| | 04:18 | style sheet, and place it in the
flow, exactly where I have told it to.
| | 04:21 | I could now grab my embedded style tag,
which is now empty, and delete it.
| | 04:26 | If I go into Code View, go up to the
head of the document, no style tag.
| | 04:32 | So it went ahead and got rid of that.
| | 04:33 | Style is still applying.
| | 04:35 | It's just where it should be
in this external style sheet.
| | 04:37 | Now, this is a pretty thorough overview
of the capabilities of the CSS Styles panel,
| | 04:41 | but if you are not really familiar
with working with CSS, I could see
| | 04:44 | where a lot of the stuff that
we did here would confuse you.
| | 04:47 | Moving styles, modifying properties,
looking at the cascade, that's a lot for
| | 04:50 | somebody who is new to CSS to take in.
| | 04:52 | What I want you to take away from
this is exactly how powerful this is.
| | 04:55 | This is a place where we can manage
everything that we do with our CSS and
| | 04:59 | to be honest, the set of capabilities I
showed you here is by no means complete.
| | 05:02 | Now, you will be using the CSS Styles
panel throughout this title, giving you
| | 05:06 | plenty of opportunities to familiarize
yourself with the techniques we have just
| | 05:09 | covered here, as well as
exploring its additional features.
| | Collapse this transcript |
| Setting CSS preferences| 00:01 |
If you are like most web designers, you
have your own personal preferences for
| | 00:04 |
how your CSS should be created and formatted.
| | 00:07 |
Fortunately, Dreamweaver has multiple
preferences that allow customization of
| | 00:10 |
how styles are created,
presented, and formatted.
| | 00:14 |
In this movie, we'll explore these
preferences and customize how Dreamweaver
| | 00:18 |
presents your CSS, formats it,
and control shorthand notation.
| | 00:22 |
Now before we get started, I want
to make sure I mention two things.
| | 00:25 |
First all the Dreamweaver's CSS
preferences simply deal with how you like
| | 00:30 |
to work with your CSS.
| | 00:32 |
You can complete this title, and work in
Dreamweaver for years without touching them.
| | 00:36 |
Second, if you are new to CSS you
might not know what settings to choose for
| | 00:41 |
some of the preferences we are going
to take a look at, or even know what they do,
| | 00:44 |
but that's okay.
| | 00:46 |
For the most part, it will be
fine accepting Dreamweaver's default
| | 00:48 |
preferences, until you have worked with CSS long
enough to establish your own personal workflow.
| | 00:53 |
I have got a couple of items
here that I'm going to style.
| | 00:57 |
Our paragraph already has a selector,
the h2 needs one and by changing our
| | 01:01 |
preferences, we are going to change how
Dreamweaver writes the CSS for these rules.
| | 01:06 |
So if you are on the PC you are going
to go up to Edit and choose Preferences,
| | 01:09 |
and if you are on the Mac, you are going
to go Dreamweaver > Preferences, but
| | 01:11 |
we'll both end up the same place,
which is the Preferences panel.
| | 01:15 |
Now of course Dreamweaver has a lot of
preferences, and they don't all apply to
| | 01:19 |
CSS, but a lot of them do.
| | 01:21 |
So let's take a look at our first
CSS Preferences and that is going to be
| | 01:25 |
found in Code Coloring.
| | 01:27 |
Now when you hand code your CSS
or just look at it in Code view,
| | 01:31 |
you are going to notice that certain
tags and elements are of different colors.
| | 01:34 |
Well that's going to be driven by
Dreamweaver's CSS Code Coloring settings.
| | 01:38 |
If you don't like the defaults or if you
just find them hard to read, you can go
| | 01:41 |
ahead and change them.
| | 01:42 |
I'm going to scroll down until I
find CSS, then hit Edit Coloring Scheme.
| | 01:47 |
I can see a block of sample code below me.
| | 01:49 |
And a couple of elements up
here at the top that I can change.
| | 01:52 |
If I click in one of my selectors for example,
I see that it jumps right to CSS selector.
| | 01:57 |
So you can either click here or you can
click in the code block to make sure you
| | 02:00 |
are targeting the proper element.
| | 02:02 |
So let's say I don't like the
magenta color for CSS selector.
| | 02:05 |
I can grab the pull-down menu there and I
could change that to any color that I want.
| | 02:09 |
But beware if you do that and you get
to used to seeing code one way, it really
| | 02:12 |
throws up some red flags in your
mind, if the code coloring changes.
| | 02:16 |
So if you have to move machines or you
do another install, you're always going
| | 02:19 |
to have constantly remember
to go back and change that.
| | 02:22 |
If you do that to somebody else's machine you
are really going to throw them for a loop too.
| | 02:25 |
So be sure that you want to change
that before you commit to it, and I'm not
| | 02:29 |
going to change any of that.
| | 02:30 |
I'm just going to hit Cancel.
| | 02:31 |
That's again something that's really more
of a personal preference than anything else.
| | 02:35 |
Now the next preference I want to go
ahead and take a look at is Preview in Browser.
| | 02:39 |
That's an incredibly
important part of your CSS workflow.
| | 02:42 |
You want to be able to
preview in multiple browser types.
| | 02:45 |
I notice here that I
really just have two listed.
| | 02:47 |
Firefox and the Internet Explorer,
based upon your platform or your machine you
| | 02:52 |
may have a larger list than I have here,
a different list or a smaller list.
| | 02:56 |
But in reality you can add or take
away as many browsers as you want.
| | 03:00 |
I recommend testing in as many browsers as
you can possibly install on your machine.
| | 03:04 |
So one of browsers I'm
going to add is Google Chrome.
| | 03:08 |
Obviously, I'm on the PC and
Google Chrome has been out for a while.
| | 03:11 |
If you are on Mac, by the time this
title comes out it will probably be in Beta
| | 03:15 |
so you could go and grab it.
| | 03:16 |
But honestly feel free to use any
browser that you have Safari, Opera, Camino,
| | 03:21 |
any of those browsers will work just fine.
| | 03:23 |
And adding a browser is the same, no matter
whether you're using Chrome or something else.
| | 03:27 |
First thing that we do is we go up and click
the plus symbol to say we want a new browser.
| | 03:31 |
Well, then we get to name it and really this
is just whatever name you want to come up with.
| | 03:35 |
I'm just going to say Chrome.
| | 03:36 |
You don't have to type in Google Chrome.
| | 03:37 |
It doesn't have to be anything that specific.
| | 03:40 |
Then you have to go browse for the application.
| | 03:42 |
Now Chrome is unlike other files,
you would usually go in either of your
| | 03:46 |
Application folder or your Program Files,
but Google Chrome, if you are on the
| | 03:49 |
PC you are going to go your Settings,
Application Data, Local and you are
| | 03:55 |
going to find Google.
| | 03:56 |
Inside that you'll find a folder
called Chrome, and inside that you will find
| | 04:00 |
another folder called Application.
| | 04:02 |
That's where the Chrome executable file resides.
| | 04:05 |
Now it doesn't matter whether you are going
for Chrome or Safari or some other browser.
| | 04:08 |
You want to find the executable file.
| | 04:10 |
You want to find application file for that.
| | 04:11 |
Now I'm going to grab this pull-down
menu so that you guys on the PC can see
| | 04:15 |
exactly where to find this.
| | 04:17 |
It's a quite convoluted a path.
| | 04:18 |
But once you found it, I can
click Open and then I can click OK.
| | 04:23 |
Now I could set this as my Primary
or Secondary browser, but really what
| | 04:26 |
that does is it allows the F12 or
that Command+Ctrl+F12 key to launch the
| | 04:32 |
page in that browser.
| | 04:34 |
Based upon how long your list is, you
really only going to have one Primary and
| | 04:37 |
one Secondary browser.
| | 04:38 |
So you get to choose which browsers
you want right there at your fingertips.
| | 04:42 |
Chrome is not there yet.
| | 04:44 |
So I'm just going to click OK.
| | 04:46 |
Now I have got Chrome added to my list.
| | 04:48 |
Now the next set of preferences we
are going to take a look at is the CSS
| | 04:51 |
Styles Preferences.
| | 04:53 |
I'm actually going to focus on
this list here on the bottom first.
| | 04:56 |
Notice that it says When
double-clicking in the CSS panel.
| | 04:58 |
Well there are a lot of
different ways to edit your CSS Styles.
| | 05:01 |
But one of the easiest is to go to the CSS
panel and simply double-click on the rule.
| | 05:06 |
Now if you do that, you get to choose
exactly what you want to have happen.
| | 05:10 |
Number one you can have it, Edit using
the CSS dialog box that's the default.
| | 05:14 |
And the same dialog box that you
use when you create styles visual in
| | 05:17 |
Dreamweaver comes right back up and you get
to go through all those dialog boxes again.
| | 05:21 |
You can also choose Edit using
Properties pane, if you would rather stay in the
| | 05:24 |
CSS Styles panel and edit from there.
| | 05:27 |
We also have the option of
editing the style using code view.
| | 05:29 |
So if you are a person that likes to
hand code, if that's selected and you
| | 05:32 |
double-click on a rule it's going to
open up the style sheet that that rule is
| | 05:35 |
found in and jump right to the rule.
| | 05:37 |
So it makes finding that code a lot simpler.
| | 05:39 |
I'm going to leave the default
Edit using CSS dialog box selected.
| | 05:43 |
And the last set of preferences we are
going to take a look are the shorthand rules.
| | 05:47 |
Shorthand notation allows you
to greatly simplify your code.
| | 05:50 |
Instead of using four lines for
example for top, right, bottom, and left
| | 05:54 |
margin, you can simply use one line for
margin and have everything spelled out
| | 05:58 |
on that particular line.
| | 05:59 |
So shorthand notation is a really good
idea to set, because it helps to create
| | 06:03 |
more efficient code.
| | 06:04 |
Although all the preferences we are
going through, these are the ones that I'm
| | 06:07 |
going to set and I
recommend you setting them as well.
| | 06:09 |
Now I'm just going to use shorthand
notation for Background, Margin and padding,
| | 06:14 |
Border and border width and List-Style.
| | 06:15 |
When we get to the chapter on typography,
I'll go more into the font shorthand
| | 06:19 |
notation, and explain why I don't
recommend using it for everyday use.
| | 06:23 |
The next setting I'm going to set when
editing your CSS rules use shorthand.
| | 06:27 |
Only if there is original used
shorthand or based on the settings above.
| | 06:30 |
I definitely want to use based on the
settings above because if I've older rules
| | 06:35 |
and I edit them I would really like
them to be made a little bit more efficient
| | 06:38 |
by shorthanding those as well.
| | 06:40 |
So I'm going to set all those
preferences Background, Margin and padding, Border
| | 06:43 |
and border width, List-Style.
| | 06:44 |
I'm going to make sure that I'm using
shorthand notation based on the settings
| | 06:47 |
above and I'm going to click OK.
| | 06:49 |
Well let's see that preference in action.
| | 06:51 |
Currently, we have a single rule styling
this paragraph, flip over in Code view.
| | 06:55 |
You can see exactly how
much code that's taking up.
| | 06:58 |
Every single one of these, all this
settings for my padding, for my margins all
| | 07:02 |
that stuff is taking up an individual line.
| | 07:05 |
So I'm going to create a rule for the
h2 and see if we can do a better job, now
| | 07:09 |
that our preferences are
set to do shorthand notation.
| | 07:12 |
So I'm going to go CSS Styles panel and
down in the lower right-hand corner of
| | 07:16 |
that I can see there is an icon that's
a page with little plus symbol on it.
| | 07:19 |
That allows us to create a new CSS rule.
| | 07:21 |
I'm going to go ahead and click that.
| | 07:23 |
Now the selector type that we want is Tag.
| | 07:25 |
Now this is the New CSS Rule dialog box.
| | 07:27 |
So I'm going to go over this in a
lot more detail little bit later on.
| | 07:30 |
So you want choose Tag.
| | 07:32 |
You want to place h2 and we are also
going to place the rule in this document only.
| | 07:36 |
That will keep it as an embedded style.
| | 07:37 |
When I click OK, we get our
CSS Rule Definition dialog box.
| | 07:42 |
Well let's set some
general Type properties for it.
| | 07:44 |
First thing I'll do is Arial,
Helvetica, and sans-serif.
| | 07:48 |
For font-size we'll do 1.8ems, font-
weight we'll set to normal, and for Color
| | 07:54 |
we'll do #f00 which will be a red,
and by the way if you hit Tab you'll
| | 07:59 |
actually see the color preview in the
color chip right beside it, whatever
| | 08:02 |
you've typed in there.
| | 08:03 |
Now we'll also set some Box Model properties.
| | 08:05 |
So I'm going to click on Box, and
we'll deselect Same for all for Padding.
| | 08:09 |
Let's go ahead and do a Top padding
of 1em, and you can just type in em.
| | 08:13 |
You don't have to grab it
from the pull-down menu.
| | 08:15 |
Just make sure that there is no spaces
and when you hit Tab notice that it goes
| | 08:18 |
and sets the unit of measurement for you.
| | 08:20 |
I just find that to be a little quicker.
| | 08:21 |
I will also set 1em for Bottom and
then for Right, Left we'll have .5 ems.
| | 08:26 |
Now over on our Margins, we'll go
ahead and leave Same for all selected and
| | 08:30 |
we'll just do 1em worth of
margin all the way around.
| | 08:34 |
One last property to set, let's go ahead and
choose Border and we'll leave that Same for all.
| | 08:39 |
We'll just do a solid border 1 pixel,
and we'll use that same red color #f00 and
| | 08:45 |
I hit Tab to make sure
that I got the color right.
| | 08:47 |
Okay, I'm going to go ahead and click OK.
| | 08:48 |
I notice that it styles and
I'm going to save the file.
| | 08:52 |
If I look over in my Code view, I can
see how much more compact that selector is
| | 08:57 |
than the one above it.
| | 08:58 |
Notice that we are not using shorthand
notation for our font settings, but we
| | 09:01 |
are using them for margin, padding and border.
| | 09:06 |
So that one preference has made our
code a lot more efficient, and I really
| | 09:09 |
would recommend setting that.
| | 09:10 |
Not only does it write more efficient
code, but that's what we'll be using for
| | 09:13 |
the remainder of class as well.
| | 09:15 |
One last thing to do here is that we
added Chrome to our list of browsers
| | 09:19 |
that we can preview in.
| | 09:20 |
So let's take a look and see
if we can preview in Chrome.
| | 09:23 |
It's going to go ahead and preview that
in Chrome and let us know that indeed we
| | 09:27 |
haven't set Chrome to our
default browser yet. That's okay.
| | 09:29 |
We'll tell it don't bother us with that.
| | 09:31 |
So there is our page.
| | 09:32 |
Now Dreamweaver recognizes that not
everyone likes to work with CSS the same way.
| | 09:37 |
The preferences you've seen here
are just the tip of the iceberg.
| | 09:40 |
Almost all panels and CSS related
tasks can be customized to several options,
| | 09:45 |
allowing you to make sure that Dreamweaver's
workflow matches your own personal preferences.
| | 09:50 |
| | Collapse this transcript |
| Understanding Dreamweaver's CSS visual aides| 00:01 | Dreamweaver's Design view is a
popular option with most web designers,
| | 00:04 | especially those with
graphic design backgrounds.
| | 00:07 | When working with CSS based layouts,
it can sometimes be challenging to
| | 00:10 | identify specific regions and see how your
styles are controlling the elements box properties.
| | 00:15 | In this movie, we'll explore a few
of Dreamweaver's visual aids that are
| | 00:19 | designed to give you more visual
control over your content regions.
| | 00:23 | I know starting in Code view seems
kind of weird when I'm talking about Design view,
| | 00:26 | but I really want to talk a
little bit about the structure of the page.
| | 00:29 | You can see that the current page has
a few distinct areas that are separated
| | 00:34 | with div tags, and ids, and they
are nested inside of each other.
| | 00:37 | So these are regions that we want to be
able to control and kind of know where
| | 00:40 | they are within our layout.
| | 00:42 | But if I flip back on to Design view,
I can't really see where those regions
| | 00:46 | start and stop, and what they encompass.
| | 00:48 | If I click inside of an element, I can
certainly use the tag selector here to
| | 00:52 | tell which element it's inside of and
which element that's inside of, but I
| | 00:56 | don't get a nice overall picture of this.
| | 00:59 | So I can go up to View > Visual Aids and this
is where we find a lot of our CSS visual aids.
| | 01:05 | The first one I want to take a
look at is the CSS Layout Outlines.
| | 01:09 | So I'm going to go ahead and turn that on.
| | 01:10 | Now it may already be on for you.
| | 01:12 | It's a default setting in Dreamweaver,
so unless you have turned it off,
| | 01:15 | you probably already had it on.
| | 01:17 | Well now as soon as I turn that on,
notice that all those div tags that we were
| | 01:21 | looking at now have dotted
lines that surround them.
| | 01:23 | And it's really easy to tell.
| | 01:25 | Here is my sidebar.
| | 01:26 | You can even hover over that
dotted line and click on it to select
| | 01:30 | that particular element.
| | 01:31 | So not only is it a nice a visual aid,
| | 01:33 | it helps you in selecting elements as well.
| | 01:36 | Now let's take a look at our next one.
| | 01:37 | If I go up to View > Visual Aids and I
choose CSS Layout Backgrounds, I get a
| | 01:43 | nice background color
behind every content region.
| | 01:46 | Now if you were doing that along with
me, you probably see a different set of
| | 01:49 | colors and that's kind of weird.
| | 01:51 | But what happens is there is a random
algorithm that's used to determine where
| | 01:55 | the sections are, and then just
assigns random colors to those.
| | 01:58 | So this is different
every single time you use it.
| | 02:01 | It's also only seen here in Dreamweaver.
| | 02:03 | If I preview this on my browser, you can
see that we don't see those background colors.
| | 02:08 | In fact, if I were to go up in and turn
my Backgrounds off, and then turn them
| | 02:15 | right back on again, notice that I
get a totally different set of colors.
| | 02:19 | So this is really only to help you
determine exactly where those regions are and
| | 02:23 | maybe how much room they have between
regions, or just a faster and easier way
| | 02:28 | of finding those regions.
| | 02:29 | Now the next thing I want to take a
look at, and to do this I'm going to turn
| | 02:32 | off my Layout Backgrounds, is the Box Model.
| | 02:35 | So as soon as I turn my Layout
Backgrounds off, I'm going to go into Visual Aids
| | 02:39 | and turn on my CSS Layout Box Model.
| | 02:41 | Typically what I'll do is I'll have
the CSS Layout Outlines and the CSS Box
| | 02:45 | Model properties turned on.
| | 02:47 | So if I go back up to my Visual
Aids, that's typically how I work.
| | 02:50 | The Layout Box Model is turned
on and the Layout Outlines is on.
| | 02:52 | Okay, so what does the Box Model do for you?
| | 02:55 | Well let's say I click inside my content
region and I choose the content div tag.
| | 03:00 | You can see now not only does
it show the selected content,
| | 03:03 | it also shows the margin.
| | 03:04 | Now margins are indicated by the
less slanted pattern that we see on the
| | 03:07 | left-hand side, and if you hover over
that, it will tell you exactly how much
| | 03:11 | margin you are getting.
| | 03:12 | On the inside the element we have a
right slanted pattern and that of course
| | 03:15 | is padding, and if I hover over that it will
tell you exactly how much padding I'm getting.
| | 03:19 | It will even tell me how much of a
calculated value I'm getting, if I'm using
| | 03:23 | something like ems based on
a browser's default settings.
| | 03:26 | So that is really cool and extremely
helpful, and that's a visual aid that I
| | 03:29 | like to have turned on all the time.
| | 03:32 | So while Design view will not always
accurately represent how your styles will render,
| | 03:35 | it does offer you a variety
of options to display structure and
| | 03:39 | container region properties.
| | 03:41 | These views can help you review
document structure and show a proper region
| | 03:44 | placement and visualize how
margins and padding control your elements'
| | 03:48 | placement and relationships.
| | Collapse this transcript |
| The Code Navigator| 00:00 | Every now and then I have to go back and
train people on older versions of Dreamweaver.
| | 00:05 | Usually when I train on older
software that I haven't used in a while,
| | 00:08 | I find myself constantly looking for
that one feature that's been added that
| | 00:11 | I just can't do without.
| | 00:12 | Well for me in Dreamweaver
CS4 that's the Code Navigator.
| | 00:16 | The Code Navigator is the fastest and
easiest way to locate and find CSS for
| | 00:20 | selected page elements.
| | 00:22 | It gives you quick access to not only
external and embedded CSS, but also allows
| | 00:27 | you to access server-side includes,
external scripts, template files, library
| | 00:29 | items, and iframe source files.
| | 00:32 | I've read some reviews where people find
the Code Navigator little annoying, and
| | 00:36 | truthfully if you leave it at its
default settings, you probably will too.
| | 00:40 | Let me share with you however how the
Code Navigator works and how you can use
| | 00:44 | it to speed up your CSS workflow.
| | 00:46 | What I'm going to do is scroll down a
little bit and talk about some of the
| | 00:48 | problems that we have here on
the page that I need to fix.
| | 00:51 | This heading 2 is far too small.
| | 00:53 | The sidebar is too wide.
| | 00:55 | It's spilling over into the main
content, and we don't have anything going on
| | 00:59 | for the page background, which is
making our header look a little lost.
| | 01:02 | So these are things that I need to
fix and I want to fix them quickly.
| | 01:06 | Now, I could use the CSS Styles panel,
and that would allow me to peruse
| | 01:10 | through all of my embedded styles or external
styles and take a look at what's affecting it.
| | 01:15 | But then I would have to look at the
structure of the content and figure out
| | 01:18 | exactly what it is and
which selector is driving it.
| | 01:21 | So I would rather go ahead and
use the Code Navigator to do that.
| | 01:25 | So what I'm going to do is just click
inside that header 2 and I'm just going
| | 01:29 | to wait for a second and you are
going to see this little paddle wheel or
| | 01:33 | navigation wheel icon come up.
| | 01:34 | This is the Code Navigator.
| | 01:36 | Now this is what people find little annoying.
| | 01:38 | I'm going to show you a secret about this.
| | 01:40 | If I click this, it brings
up the Code Navigator window.
| | 01:43 | Now more on what this is going to
allow us to do in just a moment, I want to
| | 01:46 | talk about how to maybe get rid of
that annoying icon from showing up every
| | 01:50 | single time you click on something.
| | 01:52 | You'll notice in the lower right-hand corner
we have a little checkbox that says Disable.
| | 01:56 | If we turn that off, Code Navigator
indicator won't just come up automatically.
| | 02:00 | We'll have to request it and that's
typically the workflow I like to use.
| | 02:05 | That way you don't need to worry
about that item getting in your way,
| | 02:07 | when you are not using it.
| | 02:08 | Now, how do you bring this up?
| | 02:10 | Well, it tells us right over
here on the left-hand side.
| | 02:12 | You will notice it says Alt-
click to show, because I'm on a PC.
| | 02:15 | So I would hold the Alt key down and click.
| | 02:17 | That would be Command+Option-click on the Mac.
| | 02:19 | Well I'm going to take focus off of
that for moment and click back on my h2.
| | 02:24 | Now if I wait for a second, no indicator icon.
| | 02:27 | The annoying aspect of
the Code Navigator is now dealt with.
| | 02:30 | Now let's talk about the functionality of it.
| | 02:33 | If I hold down my Alt key and I
click on that heading 2, I see the Code
| | 02:37 | Navigator window comes up. Now look at this.
| | 02:39 | This is really cool.
| | 02:41 | What I'm seeing is I'm seeing a cascade
of styles as they are being applied and
| | 02:46 | as I hover over them, I get
information about that selector.
| | 02:48 | So if I'm looking for a specific thing,
like say font-size, I can just come on
| | 02:53 | down until I found the
closest font-size that's being set.
| | 02:56 | In this case it's being set to the
#mainContent .article h2, and I can see a
| | 03:02 | whole summary of what's going on there.
| | 03:04 | Now if I want, I can simply click once
on that and it's going to jump right to
| | 03:08 | that selector within my code.
| | 03:10 | That is really, really cool.
| | 03:12 | I didn't have to worry about
exactly where I need to define this.
| | 03:16 | It just jumps right down to that.
| | 03:18 | So here I'm inside my mainContent
.article h2, and I'm just going to change
| | 03:21 | my font-size to 1.6 ems.
| | 03:23 | Now you'll notice I really didn't
point out which style sheet this is.
| | 03:28 | It's the main.css, but
truthfully, it doesn't really matter.
| | 03:31 | It's going to jump you to the
rule that you have requested.
| | 03:34 | So as long as you have click on the
right rule it's going to take you to
| | 03:37 | the right style sheet.
| | 03:37 | You're probably always going to
want a double check that though.
| | 03:40 | So look up in related files and make
sure that you are in the right place.
| | 03:43 | I am going to go ahead and save that
and then I'll go back to Design view.
| | 03:47 | Now before I go back to Design view,
| | 03:48 | I do want to point something out,
in case you have never seen this.
| | 03:51 | We have a new split screen
| | 03:53 | view here in Dreamweaver.
| | 03:55 | Instead of a horizontal split
screen, we now have a vertical one.
| | 03:58 | If you are not seeing that, you can go
up to View and choose Split Vertically.
| | 04:03 | Once you turn that on, trust me,
you'll never want to turn off it again.
| | 04:06 | It's a great way of working. Right.
| | 04:07 | I'm going to flip back to Design view,
and you can see that my heading now looks
| | 04:10 | the way that I wanted to. Perfect.
| | 04:12 | Now that's just one way to get
the Code Navigator to come up.
| | 04:15 | It's available to you almost everywhere.
| | 04:17 | Let me show you what I mean.
| | 04:18 | If we click over in the sidebar, I can
go down to the tag selector and find my
| | 04:22 | div with an id of sidebar.
| | 04:24 | If I right-click that or Command+Option-click on
a Mac, notice that one of the options
| | 04:29 | from the contextual menu is Code Navigator.
| | 04:32 | So if I click Code Navigator, once
again I get the window that comes up.
| | 04:36 | I can identify the two column large
side sidebar selector and click on that.
| | 04:41 | Again that's going to jump me to that
exact spot in the code, and what I can do
| | 04:44 | now is lower the width of that
from 250 pixels to 230 pixels.
| | 04:49 | I can save that, go back to Design
view, and I made the change. Awesome.
| | 04:55 | Now, that's just a couple of
different ways to access the Code Navigator.
| | 04:58 | There are a lot more.
| | 04:59 | In fact, you don't have to be in Design
view to take advantage of the Code Navigator.
| | 05:03 | Let me show you what I mean.
| | 05:04 | If I switch to my Source Code, so in my
related files, I'm switching to Source Code.
| | 05:08 | And then click the Code view.
| | 05:09 | I'm going to scroll up and find my body tag.
| | 05:13 | So I'm just going to go ahead and
highlight my body tag, and when I do
| | 05:16 | that you'll notice that one of the
icons here on our Coding toolbar is
| | 05:20 | Show Code Navigator.
| | 05:21 | When I click on that, I get the
related styles to the body tag.
| | 05:24 | So I can find the body tag, click on that,
and then for the background property,
| | 05:29 | I'm going to go ahead and give
it a background color of #333.
| | 05:32 | So I'm going to go ahead and do a Save
All, switch back to Design view, and now
| | 05:38 | we have got a background color.
| | 05:39 | I am going to preview that in my
browser and I can see that all my changes are
| | 05:43 | rendering the way I wanted them to. Perfect.
| | 05:45 | Honestly, I don't think it's going to
take you very long to get the hang of
| | 05:48 | using the Code Navigator, and once you
do get used to it, you are go find it's
| | 05:52 | the quickest and easiest way to
track down and edit your CSS.
| | 05:55 | I think you'll probably find like I do
that you rely on it all the time to make
| | 05:59 | those really quick fast edits.
| | Collapse this transcript |
| Controlling CSS with the Properties Inspector| 00:01 | One of my main concerns with the
earlier versions of Dreamweaver was the way
| | 00:04 | that CSS was automatically generated
when a code was formatted using the
| | 00:07 | Properties Inspector.
| | 00:08 | It gave new designers the mistaken
impression that they could work in
| | 00:11 | Dreamweaver like they
worked in InDesign or Quark.
| | 00:13 | Now what's worse, the resulting CSS
was either poorly named, poorly placed,
| | 00:19 | separate from other page styles, or
a combination of all of those things.
| | 00:22 | Okay, enough beating up Dreamweaver CS3.
You'll be happy to know that in CS4,
| | 00:27 | the Properties Inspector has now
joined the rest of Dreamweaver in assisting
| | 00:31 | your CSS workflow and gives you
new ways to add and modify styles.
| | 00:35 | In CS4, when you use the Properties
Inspector to format elements, you're either
| | 00:39 | promoted to create a new rule
or you modify an existing one.
| | 00:43 | Knowing how to control this
process is key to using the Properties
| | 00:46 | Inspector properly.
| | 00:47 | Here we have our gear file open, and
there is a couple of things that we need to
| | 00:50 | do here in terms of formatting.
| | 00:52 | You can see our paragraphs are little
too large, and if I scroll down a little bit,
| | 00:55 | this heading 3 doesn't
really look the way we want to either.
| | 00:59 | So we need to do two things here.
| | 01:01 | In the case of the paragraph, we need
to edit an existing rule and in the case
| | 01:05 | of the h3 tags, we'll need to create
a brand new rule and we'll use the
| | 01:09 | Properties Inspector to do both.
| | 01:11 | Let's start with our paragraphs.
| | 01:12 | Now, I'm going to go ahead
and click inside the paragraph.
| | 01:14 | Now as soon as I do that, notice that
the Properties Inspector changes and
| | 01:18 | by the way, there are two tabs
now on the Properties Inspector.
| | 01:21 | If you look on the left-hand
side, you'll see one HTML tab.
| | 01:24 | This allows us to access and change our
HTML attributes and the CSS properties,
| | 01:29 | and this of course allows us to
modify or create new CSS rules.
| | 01:33 | Now click on the CSS tab and notice
that after you've clicked inside the
| | 01:36 | paragraph, it tells you that the
targeted rule is #mainContent p. So it lets you
| | 01:42 | know the closest rule to affecting
that element, where that is and which rule
| | 01:45 | that is within your style sheets.
| | 01:47 | Now to the right of that,
I see some formatting attributes.
| | 01:49 | Font, Size, Color, and it would be
really tempting to just go ahead and start
| | 01:53 | changing those, but you really want
to know where those settings are being
| | 01:57 | inherited from, because you can't take it for
granted that it's this rule that's doing here.
| | 02:01 | If I hover over the text for example,
notice that the Properties Inspector is
| | 02:05 | telling me that font family is
being inherited from the body rule.
| | 02:08 | Now that means that there is being a
font assigned at the body rule, which is
| | 02:12 | now being inherited by
everybody else in my document.
| | 02:15 | So if I change the body rule,
everybody else is going to change.
| | 02:18 | So I have to make a decision now, as
to whether I want to add a font family
| | 02:22 | declarations to my main content paragraph
rule, or whether I want to do it site wide.
| | 02:26 | If I wanted to target the body rule,
I can grab the Targeted Rule pulldown menu,
| | 02:30 | and scroll through all of my CSS
rules to choose which one I wanted to change.
| | 02:35 | If I want to add it to the #mainContent p,
and that's exactly what I want to do.
| | 02:39 | I'll leave that listed as my targeted rule.
| | 02:42 | Now I'm going to grab the pull-down
menu, and choose Georgia, Times New
| | 02:46 | Roman, Times, and Serif.
| | 02:47 | As soon as I do that, notice that I
can hover over the rule and see that now
| | 02:51 | it's been added to #mainContent p.
It no longer tells me this is being
| | 02:54 | inherited from the body rule. So, perfect.
| | 02:56 | I know it's added it to exactly
the rule that I wanted it to.
| | 02:59 | I also need to go ahead
and change the font size too.
| | 03:02 | And if I hover over that, I can see that
is also coming from #mainContent p, perfect.
| | 03:06 | So I'm going to highlight that value and
type in 0.95 em to go ahead and edit that rule.
| | 03:12 | So you can see you can make some
pretty quick edits here using the
| | 03:15 | Properties Inspector.
| | 03:16 | If you look up at your related files,
you can see that main.css has a little
| | 03:20 | asterisk beside it, and that tells
me that changes have been made to that
| | 03:23 | document, and I haven't saved yet.
| | 03:25 | So I'm going to go up to
File and choose Save All.
| | 03:28 | Now let's turn our attention to the h3 tag.
| | 03:30 | If I click inside that, notice that the
nearest targeted rule is way up top and
| | 03:35 | it's actually what we called our zeroing rule.
| | 03:37 | So we've got it clear.
| | 03:39 | That's clearing out all the margins.
| | 03:40 | There really isn't anything
targeting the h3 specifically.
| | 03:43 | So we would really like to do that.
| | 03:45 | You'll notice that I mention
clicking inside the h3 tag.
| | 03:48 | Anytime you are creating new styles or
editing styles, it's a really good idea
| | 03:52 | to go ahead and focus on the element
that you want to write the rule for.
| | 03:55 | That way, Dreamweaver knows where
you're trying to focus, and it's going to try
| | 03:58 | to help you write this rule.
| | 03:59 | Let me show you what I mean.
| | 04:01 | Go to your Targeted Rule pull-down
menu. In addition to choosing all of the
| | 04:05 | other rules that you want, notice that we
have the choice to create a new CSS rule.
| | 04:10 | So I'm going to go ahead and click that.
| | 04:11 | Once that's showing up in your Targeted
Rule pull-down menu, when you click Edit Rule,
| | 04:16 | instead of changing an existing
rule, what you're going to do is go ahead
| | 04:19 | and create a brand new one.
| | 04:20 | So I'm going to go ahead and choose
Edit Rule, and that brings up our New
| | 04:23 | CSS Rule dialog box.
| | 04:25 | Now at first glance, this
may look a little confusing.
| | 04:27 | So let's break down what's going on here.
| | 04:29 | The first thing we have is a pulldown menu
that asks what type of selector we want to use.
| | 04:34 | We can write a class selector, an
ID selector or an element selector.
| | 04:38 | So those are your three most basic
types and of course, in Dreamweaver
| | 04:42 | it refers to an element selector as a tag selector.
| | 04:44 | The fourth choice and the one that we
are going to use is a compound selector.
| | 04:47 | The compound selector tries to take a
look at your existing focus on the page,
| | 04:51 | and write a rule for you that targets that.
| | 04:54 | Typically, this is the descendant selector.
| | 04:56 | In reality though, it allows
you to type in anything you want.
| | 04:59 | So if you have a rule that's a little
outside one of these three basic rules,
| | 05:02 | you're going to use compound.
zzzyou'll find that you use that a lot.
| | 05:06 | Now below that, we have the selector name,
and you can see that what Dreamweaver
| | 05:09 | is doing is it's trying to write a
selector based on our current focus.
| | 05:13 | Well, it goes as specific as it
possibly can, so this is going to overwrite any
| | 05:17 | other rules that you might have.
| | 05:19 | Notice that we have two buttons here,
Less Specific and More Specific.
| | 05:22 | You can literally take things away
from the selector or add things to the selector
| | 05:26 | simply by clicking on these buttons.
| | 05:28 | That is an extremely valuable thing
because it can save you a lot of time when
| | 05:32 | you want to write a really specific
rule or a rule that's not so specific.
| | 05:36 | And in fact, we can go all the way
down to just the h3 tag if we wanted to.
| | 05:40 | I want you to hit either the Less
Specific or More Specific until you get what
| | 05:44 | you see here, #mainContent.article h3.
| | 05:48 | This is a compound selector.
| | 05:49 | It's targeting any heading 3 tag inside
of any element with the class of article
| | 05:54 | inside of any element
with an ID of main content.
| | 05:57 | To keep this selector consistent with
what we have in our style sheet, I'm going
| | 06:01 | to remove the article.
| | 06:03 | We just don't need it, and you can
manually change anything you want to up here.
| | 06:07 | You can even type in any rule all by yourself.
| | 06:09 | So you just want to make sure that
it says #mainContent h3
| | 06:13 | and the space is really important.
| | 06:15 | Now once we have that, Dreamweaver
wants to know where should I put this rule.
| | 06:20 | Notice that our choices are:
| | 06:21 | in this document only, that will
create an embedded rule; a new style sheet file,
| | 06:25 | if we wanted to add it to another
style sheet file that we don't have yet;
| | 06:29 | or main.css, which is our
existing external style sheet.
| | 06:32 | And that's where we want to add that.
| | 06:34 | So I'm going to go ahead and click OK
and we're just going to go ahead and do
| | 06:37 | some basic formatting here.
| | 06:38 | For font-family, I'm going to grab the
pull-down menu, and choose Georgia, Times
| | 06:42 | New Roman, Times, serif, and for font-
size, I'm also going to type in 0.95 em.
| | 06:47 | Now if I hit Tab, it will go ahead and
choose the unit of measurement for me.
| | 06:51 | So you'll notice here by going to this
route and we can do this to either edit
| | 06:54 | a rule or create a rule
| | 06:55 | by clicking on the Edit Rule button down
here on Properties Inspector, we have a
| | 06:59 | lot more formatting attributes than we
do just inside the Properties Inspector.
| | 07:04 | So if what you are looking for
isn't listed here in the Properties
| | 07:07 | Inspector, make sure you click the
Edit Rule button and that's going to give
| | 07:10 | a lot more options.
| | 07:12 | Okay, just a couple of more things here.
For Color, I'm going to type in #600
| | 07:16 | and hit Tab to see that it's sort of a
garnet color, and then I'm going to go to
| | 07:21 | my Box category, because I
want to set some margins for this.
| | 07:24 | And what I'm going to do is I'm
going to deselect Same for all.
| | 07:27 | And I'm going to do 1 em worth of margin
on top and 1 em worth of margin on the
| | 07:32 | bottom and then for the right and
for the left, I'm going to do 0.5 ems.
| | 07:38 | So for right and left, type in 0.5 em and
you can tab through those if you would like.
| | 07:45 | As soon as I get all that finish,
I'm going to go ahead and click OK.
| | 07:47 | Notice that my heading 3 reformats
and more importantly, take a look at the
| | 07:50 | Properties Inspector.
| | 07:51 | Now our targeted rule is #mainContent h3.
| | 07:54 | That's the rule that we just created.
| | 07:57 | Another thing I want to point out to
you guys, I don't know if you caught this,
| | 07:59 | but when you grab the Targeted
Rule pull-down menu and you click on that,
| | 08:02 | in addition to being able to
create a new rule, notice that you can also
| | 08:06 | create a new inline style.
| | 08:07 | That's one of the only ways that you can
have Dreamweaver automate inline styles for you.
| | 08:11 | So if you guys are creating some HTML
emails and you need to do inline styling,
| | 08:16 | that's a really good place to find that
and have Dreamweaver automate that for you.
| | 08:19 | Otherwise, you are pretty much
stuck with hand coding those guys.
| | 08:23 | Now, using the Properties Inspector
for your CSS is probably not going to
| | 08:26 | replace your normal CSS editing and
creation methods, but it's nice to know
| | 08:30 | that formatting with the Properties
Inspector will create styles that fit
| | 08:34 | nicely into your workflow.
| | 08:35 | The ease at which it allows you to make
simple edits or create new rules is also
| | 08:39 | a really nice touch.
| | 08:41 | As always though, I urge to be
vigilant when using the Properties Inspector.
| | 08:44 | Since it can change a different rule than
the one you think you are targeting, if
| | 08:48 | you are not really paying
attention to exactly what you are editing.
| | Collapse this transcript |
| Using Related Files| 00:01 | One of the biggest workflow
improvements in the CS4 version of Dreamweaver is
| | 00:04 | the addition of what is known as related files.
| | 00:07 | In previous versions of Dreamweaver,
if you wanted to work on associated or
| | 00:10 | linked files, you have to open them
separately and then tab between them.
| | 00:14 | This was becoming an
increasingly inefficient way of working.
| | 00:17 | Evolving standards and practices have
made it common to externalize certain
| | 00:21 | aspects of your web pages.
| | 00:23 | Most scripts and styles are now stored
in external documents and then brought in
| | 00:28 | at runtime to control
presentation and functionality.
| | 00:31 | By giving us related files, Adobe has made
working on these types of pages much easier.
| | 00:36 | And we are going to examine related
files by taking a look at our shopping page,
| | 00:40 | and figuring out why it's not working.
| | 00:41 | So I have got shop.htm open, and the
first thing I want to point out to you is
| | 00:45 | where to find related files.
| | 00:46 | You can see just above the Document
toolbar that we have the shop.htm file
| | 00:50 | open, and then underneath that, as almost like
sub-navigation, we have all of our related files.
| | 00:54 | So that's where you're going to find those.
| | 00:56 | Now, what if you don't see those?
| | 00:58 | So if you've got Dreamweaver open
and you have this file opened up, and
| | 01:01 | you don't see the same thing I do here, you
probably have a preference that's turned-off.
| | 01:05 | Let me show you.
| | 01:06 | If you go to Edit and choose
Preferences, and on the Mac you'll go to
| | 01:10 | Dreamweaver and choose Preferences, as
part of the general category, one of the
| | 01:14 | things you are going to find is a
checkbox that says Enable Related Files.
| | 01:18 | If that's turned-off, you won't see those.
| | 01:20 | Now by default, it's turned-on.
| | 01:21 | So if you don't have it turned-on, that
means that somebody was in there earlier
| | 01:25 | messing with your preferences.
| | 01:26 | So I'm going to go ahead and click OK,
and we'll jump back into Dreamweaver.
| | 01:29 | All right, well, let's take
a look what's not working.
| | 01:32 | I'm going to go ahead and preview this
in my browser, and well the functionality
| | 01:36 | of my Spry Tabbed Panels widget is working okay.
| | 01:39 | But one of the problems is that the
content is no longer fitting inside of it.
| | 01:43 | It's just not wide enough.
| | 01:44 | So we need to go increase that width,
and related file is just going to make
| | 01:47 | that task a lot faster.
| | 01:49 | Now all those styles for my Spry
widget are actually handled in an external
| | 01:54 | Spry assets CSS file.
| | 01:56 | So it's something that's being linked
to my page in addition to my main.css.
| | 02:00 | Well, if I look over at my related files
feature, I can just scroll over until I
| | 02:04 | find my SpryTabbedPanels.
css and I can click on that.
| | 02:08 | Clicking on it enables a Split Screen
view, showing the code of the CSS on the
| | 02:12 | left-hand side and the design of
my page on the right-hand side.
| | 02:15 | So I get to manage my code, and
look at my design all at the same time.
| | 02:19 | I am going to go ahead and scroll
all the way down and find the selector
| | 02:23 | TabbedPanelsContent.
| | 02:25 | That's the one that's
driving the width of my widget.
| | 02:27 | So as soon as I find that,
I can change its width.
| | 02:31 | Currently, its width is 500 pixels.
| | 02:33 | We are going to increase that.
| | 02:34 | So go ahead and highlight that and
increase the width to 726 pixels.
| | 02:38 | Now I can do a Save or Save All, and if
I just switch back to Design view, I can
| | 02:44 | see right off the bat that now
everything is fitting inside the widget.
| | 02:47 | Well, that's fantastic.
| | 02:49 | However, there is nothing only
change I want to make on the page.
| | 02:50 | I also notice that my top
header isn't the right color.
| | 02:54 | Now if I want to set that style, I can
go up to the appropriate related files,
| | 02:58 | click, and browse to find it, but a
much faster way to do this is to use the
| | 03:02 | Code Navigator that we saw in an earlier movie.
| | 03:04 | So I'm going to hold down the Alt key,
and if you are on the Mac, you hold down
| | 03:07 | the Option and the Ctrl key, and I'm
just going to click on our main heading.
| | 03:11 | So the Code Navigator comes up.
| | 03:13 | I can go down and select the
oneCol #mainContent article h1.
| | 03:17 | That's the selector that's driving or styling.
| | 03:19 | Now if I click on that, Code Navigator is
going to take advantage of related files.
| | 03:23 | Notice that it goes as Split Screen view and
it jumps right to the related file main.css.
| | 03:28 | So it still gives us that nice split view.
| | 03:30 | We still get to change our code and
see the design at the same time, but the
| | 03:33 | beauty of this is that the Code
Navigator assists me in locating where that is
| | 03:38 | in my related files.
| | 03:39 | So I want to change the color of this.
| | 03:40 | I'm going to change the color to 78320E.
| | 03:42 | If I wanted to see what that looks like,
I click over on Design view, and it
| | 03:50 | goes ahead and updates the preview, wonderful.
| | 03:53 | Now of course, this title focuses on
CSS, but related files does allow you to
| | 03:58 | do more than just CSS.
| | 03:59 | If I switch to up here to Code view,
notice that I do have access to the
| | 04:03 | JavaScript that's
controlling our Spry Tabbed Panels.
| | 04:06 | So if you are a web developer and
you want quick access to your external
| | 04:09 | scripts, notice how much related
files is going to assist you as well.
| | 04:13 | And just to make sure that everything
work properly, I'm going to do a Save All,
| | 04:16 | and preview that in my browser, the
headlines are the right color, and now all
| | 04:21 | of my content is fitting inside
my Tabbed Panels widget, perfect.
| | 04:24 | So, I think it's pretty easy to see
how much time related files can save you,
| | 04:28 | especially if you are using server-
side includes or external scripts in
| | 04:31 | conjunction with your styles.
| | 04:33 | It's fast, it's intuitive, and you'll
find yourself relying on it in no time.
| | Collapse this transcript |
| Working with Live view| 00:00 | Another new feature in Dreamweaver CS4
that can dramatically assist your CSS
| | 00:05 | development is Live View.
| | 00:07 | Live View allows you to preview CSS
and JavaScript based interactivity within
| | 00:11 | the Dreamweaver environment,
| | 00:13 | eliminating the need to preview pages within the
browser simply to test interactivity.
| | 00:17 | Live View also gives you the option to
see generated Source Code or to freeze
| | 00:21 | JavaScript interactivity while previewing it.
| | 00:23 | Pairing Live View with the Split Code
View of your CSS or external scripts,
| | 00:27 | means that you can edit your code
and see the changes in real-time.
| | 00:30 | Which dramatically speeds up development.
| | 00:32 | So, here we have our shop.htm page open,
and there are few things I want to check.
| | 00:36 | For example, I want to check the
functionality of the Spry widget and I'd
| | 00:39 | like to check and make sure that my
main navigation up top is interacting the
| | 00:43 | way I would like it to.
| | 00:44 | Now normally I would preview that in a
browser, but what I'm going to do this
| | 00:47 | time is I'm going to go up to the
Live View icon right here on our document
| | 00:51 | toolbar and click on that.
| | 00:52 | When I do that, notice that all
the visual aids kind of go away.
| | 00:55 | Any guides you have there, any dotted
lines indicating div tags, you're getting
| | 00:59 | a rendering of this page now.
| | 01:00 | Well, you're getting more than that.
| | 01:02 | Notice as I hover over my menu items, I
get to see my CSS based interactivity,
| | 01:07 | and one of the things I noticed is
that the text isn't changing color.
| | 01:11 | It's staying white and with our background.
| | 01:13 | Now that's not really giving
us the option that we need.
| | 01:15 | Now, what I'm going to do is right
here with Live View still turned on, I'm
| | 01:19 | going to hold down my Alt key,
Command+Option on the Mac.
| | 01:22 | It's going to bring up my Code Navigator.
| | 01:24 | So Code Navigator works as I'm
interacting with the elements on the page.
| | 01:28 | That is really cool.
| | 01:29 | I am going to scroll down to find the
hover selector that's controlling the
| | 01:32 | color of our text while we're hovering over it.
| | 01:34 | I can click on that.
| | 01:36 | Again, we get that coming up in split
screen view, and I'm going to scroll down
| | 01:40 | just a little bit to find out hover.
| | 01:41 | There it is and I want to change the color.
| | 01:43 | Right now, it's #fff.
| | 01:45 | So you want to find this
#header li a:hover selector.
| | 01:49 | This is a pseudo class selector and it's
controlling the hovering over these elements.
| | 01:54 | We're going to change this to AE760D.
| | 01:59 | And what's really nice about this, I'm
going up and do a Save All and check this out.
| | 02:04 | When I go back into Design View,
notice it updates in real-time.
| | 02:08 | So you make changes to your code.
| | 02:10 | Live View goes ahead and reflects those changes.
| | 02:12 | That is really cool.
| | 02:13 | Now, one of the benefits of using
Live View obviously is seeing states of
| | 02:17 | objects that you can't normally
see in the Dreamweaver environment.
| | 02:20 | Take our Spry tabbed widget for example.
| | 02:22 | I'm going to scroll down just a little
bit and notice that I can interact with
| | 02:26 | my widget, the same way I would
interact with it within the browser.
| | 02:29 | My hovering is working, all the clicking,
all the interactivity is working as well.
| | 02:33 | Well, obviously for this title I'm focusing
on the CSS, not so much on the JavaScript.
| | 02:36 | I'd love to make sure that all my tabs
were appearing the way that I wanted them to.
| | 02:41 | So one of the nice things that you can
do is freeze the JavaScript at a certain
| | 02:45 | point of interaction.
| | 02:46 | Let me show you what I mean.
| | 02:47 | I'm going to hit the F6 key.
| | 02:49 | When I hit the F6 key,
that freezes the JavaScript.
| | 02:52 | If your keyboard shortcut isn't working
for you, you can go right up here to the
| | 02:56 | Live View pulldown menu and you
can freeze JavaScript that way.
| | 03:00 | Now, when you've frozen your JavaScript,
any type of interactivity is frozen at
| | 03:04 | that particular state.
| | 03:05 | So you'll notice that my hovering is
not working, my clicking is not working.
| | 03:08 | What this allows me to do is either find
the selector and target it based on its
| | 03:12 | current state, or use it like I'm
doing here, which is just to make sure that
| | 03:16 | my, up, over, and down states
look the way that I want them to.
| | 03:20 | This allows me to preview all three at the same
time without having to force any interactivity.
| | 03:24 | That's really, really cool.
| | 03:25 | Now, I can go right back up to the
menu and turn Freeze JavaScript off or I
| | 03:30 | could just hit F6 again. It's a toggle.
| | 03:32 | Now, Live View goes and takes over again
and the interactivity is turned back on.
| | 03:36 | Now, one more thing I'd like to mention
is that Dreamweaver uses the open source
| | 03:41 | WebKit rendering engine for Live View.
| | 03:43 | That's the same engine more or
less that Safari and Chrome uses.
| | 03:47 | So if everything looks good in Live View,
you know you'll have less of a chance
| | 03:50 | of rendering errors, at least in those browsers.
| | 03:53 | If you take Live View, the Code
Navigator, and related files, and look at them
| | 03:57 | separately, they promise to speed
up development in a noticeable way.
| | 04:01 | Taken together, they present you with a CSS
based workflow that we haven't seen until now.
| | 04:05 | Once you get used to using these
features in conjunction with each other,
| | 04:08 | you won't want to go back
to working any other way.
| | Collapse this transcript |
| Working with the Reference panel| 00:00 | Dreamweaver has a multitude of ways to
get help, check your CSS, and find out
| | 00:04 | information about
specific properties or selectors.
| | 00:08 | In this exercise, we'll take a quick look
at one of those options, the Reference panel.
| | 00:12 | The Reference panel gives you a quick
reference tool for information on CSS as
| | 00:17 | well as other scripting languages such as
JavaScript, ASP, ColdFusion, and many more.
| | 00:22 | The information in the Reference
panel is organized into a series of books.
| | 00:25 | Many of them pulling information
from the O'Reilly reference series.
| | 00:29 | When looking at any pre-built CSS or
trying to find specific style information,
| | 00:33 | the Reference panel
offers a great place to start.
| | 00:35 | So I have my index file opened and
one of the things I'm noticing is I'm
| | 00:39 | not getting the spacing that I was expecting,
especially in my headers and other regions.
| | 00:44 | And I'd love to find out why.
| | 00:45 | Well, I know that the property
that's driving a lot of the spacing is the
| | 00:49 | line-height property, but maybe I don't
know that much about it, and I certainly
| | 00:53 | might not know some of the
peculiarities that are triggering issues.
| | 00:56 | So what I'm going to do is switch over
to my Code View and I'm going to scroll
| | 01:00 | down and on the body selector, on
about line 36, I can find that I've got
| | 01:06 | So I'm just going to highlight line-height.
| | 01:07 | line-height set right there.
| | 01:08 | Now, there are a couple of different
ways to open up your Reference panel.
| | 01:12 | One, you can go up to Window >
Results, and you can choose Reference.
| | 01:17 | But another way to open up the
Reference panel is to either right-click and
| | 01:21 | choose Reference or notice that we
also have the hot key option of Shift+F1.
| | 01:27 | Now, if you open the Reference panel
through one of these means when you've some
| | 01:30 | code highlighted or you've focused on
an element, the Reference panel is going
| | 01:34 | to search through, find that term or
element, and display information about it.
| | 01:38 | So this is a nice way of sort of
having the Reference panel guide you to
| | 01:41 | the exact location.
| | 01:42 | I am going to click Reference and I
notice that my Reference panel opens up, and
| | 01:46 | it's displaying the line-height information.
| | 01:48 | Now, I usually keep mine docked
down here on the Properties Inspector,
| | 01:51 | but chances are that your
Reference panel is going to open up in a
| | 01:54 | different location.
| | 01:55 | Well, that's okay, because I need
to display it in a much larger area.
| | 01:59 | So, what I'm going to do is grab it by
its tab and just drag it out here to the
| | 02:03 | middle of the screen.
| | 02:04 | When I do that, I can resize this
and I can read a lot more about that.
| | 02:08 | Now, if during the process of resizing
your Reference panel you lost focus and
| | 02:13 | line-height no longer displays, that's okay.
| | 02:16 | What we are going to do is if you grab
the Book pull-down menu, you can see all
| | 02:20 | of the different books of information
that we have here in the Reference panel.
| | 02:23 | We want to make sure we're
still in our CSS Reference.
| | 02:26 | And for Style, you can grab the pull-down
menu and choose any property that you want.
| | 02:30 | So you can see I just lost focus on line
-height, but that's okay, because I can
| | 02:33 | scroll down, find line-height, and
I'm right back to where I was before.
| | 02:37 | So, let's take a look at how the
information is structured and what it's telling us.
| | 02:41 | The first thing that we get is a
description of what line-height is.
| | 02:44 | It says the height of the inline
box and under normal circumstances the
| | 02:47 | line-height of the tallest font in a
line of text or the tallest object governs
| | 02:51 | the line-height for that content line.
| | 02:52 | It's giving us a nice description of
what line-height is doing property wise.
| | 02:57 | In the upper right-hand corner, I'm
getting some information about which
| | 03:00 | versions of the browser first supported this.
| | 03:02 | So Netscape Navigator 4, Internet Explorer 4.
| | 03:05 | This is a little dated, that's true,
but it does give you an idea of how long
| | 03:09 | that property has been supported.
| | 03:10 | We also are told whether this
property is inherited or not.
| | 03:14 | And that's a very bid deal.
| | 03:15 | You'll notice that our line-
height is applied to the body selector.
| | 03:18 | So in this case, because inheritance
is happening, we know that every single
| | 03:22 | element is inheriting that value.
| | 03:24 | Now, if I scroll down to little further,
I actually get some code examples and
| | 03:28 | I can see how settings different settings of
my line-height can affect our page differently.
| | 03:32 | Notice for example, if somebody has
put in 1.1, that's a numeric value.
| | 03:37 | The number value is inherited.
| | 03:38 | So that's using a multiple, and that's
going to pass down that multiple value
| | 03:42 | not a fixed calculated value.
| | 03:45 | We see that by using ems here, the
length value is calculated and then that
| | 03:49 | actual value is inherited down.
| | 03:51 | That's what's happening to
our page. We have ems set.
| | 03:53 | So what's happening is the body tag
is calculating its line-height and then
| | 03:57 | using that value to pass down.
| | 03:59 | We are not getting say 110% or 1.1
times what an element's font size is and
| | 04:05 | that's what's causing our
sort of generic spacing issues.
| | 04:08 | So now armed with that knowledge, I'm
going to close the Reference panel, go
| | 04:12 | back into my code, and
change that from 1em to just 1.
| | 04:17 | Now, if I save my file and flip
back to Design View, I can see that my
| | 04:20 | spacing has been corrected.
| | 04:22 | Although the information in the
Reference panel is not as complete as the full
| | 04:26 | O'Reilly CSS Reference guide, it does
offer an extremely quick reference to
| | 04:29 | various CSS styles and properties and
can certainly further your understanding
| | 04:33 | of the code that you're generating.
| | Collapse this transcript |
|
|
5. Online TypographyDeclaring font families| 00:01 |
Although CSS gives us a tremendous
amount of control over our online typography,
| | 00:04 |
for the most part, we're still
limited to using basic system fonts.
| | 00:08 |
Since HTML cannot store font
information, your webpage relies on the client
| | 00:12 |
machine to have the requested font installed.
| | 00:14 |
If it's not available,
another one is substituted.
| | 00:17 |
Just what is substituted is totally up to you.
| | 00:19 |
Well, at least for the most part.
| | 00:21 |
If you only request one font-family,
the browser substitutes its default font.
| | 00:26 |
Since you have no control over which
font has been set as the client's default font,
| | 00:30 |
a better approach is to declare
multiple fonts, which will continue to go
| | 00:34 |
down the list until an installed font is found.
| | 00:37 |
Your final declaration should be a
generic font-family such as Serif or San-Serif.
| | 00:42 |
In the unlikely event that none of your
requested fonts are loaded, at least
| | 00:46 |
the text will display
in the desired type of font.
| | 00:48 |
Let's take a closer look at how font
-family requests are made, examine
| | 00:52 |
the different family types, and explore how
browsers can override what you've requested.
| | 00:57 |
So one of the first things I want to focus
on is how these requests are actually made.
| | 01:01 |
You can see on this page that we have
the different font family listed in
| | 01:04 |
some of those sample fonts.
| | 01:05 |
Well, I'm doing that through class
selectors and if I look over my CSS Styles,
| | 01:10 |
I can select the timesNew and see that
I'm requesting Times New Roman and then
| | 01:15 |
the default Serif font.
| | 01:17 |
Since Times New Roman is made of more
than one word, notice that is encased
| | 01:20 |
in quotation marks.
| | 01:21 |
That's not always necessary.
| | 01:23 |
Notice that I also have one for Times,
and it just requests Times and then Serif.
| | 01:28 |
Now, I've listed five of the major
font families, serif, sans-serif, if we
| | 01:33 |
scroll down we can see
monospace, cursive, and fantasy.
| | 01:36 |
Go really get an accurate portrayal of
how these are going to look in the browser.
| | 01:40 |
We need to go look and at them in the browser.
| | 01:41 |
So what I'm going to do is go up and
preview this and I'll preview this in Firefox.
| | 01:45 |
Now, the first font-family I want to
talk about is the Serif font family and
| | 01:49 |
it's definitely one of the
most widely font-families.
| | 01:52 |
Common serif fonts are Times, Times
New Roman, Georgia, even New Century
| | 01:56 |
Schoolbook is fairly well distributed.
| | 01:58 |
Next will be Sans-Serif, and some
common Sans-Serif fonts will be Arial,
| | 02:02 |
Helvetica, Verdana, and Trebuchet
has certainly been used a lot recently.
| | 02:06 |
Now your monospace fonts are going to be fonts
like Courier, Courier New, Lucida Typewriter.
| | 02:11 |
Typically you're going to use that is
for code snippets or things like that,
| | 02:14 |
that you need to display in your page.
| | 02:17 |
The last two font-families are two that
you probably haven't seen much, and I'm
| | 02:20 |
not sure if you'll use them a
whole lot, Cursive and Fantasy.
| | 02:24 |
Honestly with those guys, you never
really know what you're going to get,
| | 02:27 |
because every single browser seems to
have different fonts setup for those.
| | 02:31 |
Comic Sans, Zapf Chancery, Coronet,
those are some of the fonts that you might
| | 02:35 |
find when you request a cursive font.
| | 02:37 |
In the Fantasy fonts we've
Impact, Western, and Papyrus.
| | 02:41 |
I see Papyrus used a lot, actually.
| | 02:43 |
Now, one of the things I want to point
out is that even if fonts are in the same
| | 02:46 |
family, they are not necessarily
going to give you the same spacing.
| | 02:49 |
For example, compare Georgia with Times.
| | 02:53 |
Now both of these fonts have been
requested at the same size, but you'll notice
| | 02:56 |
that Georgia looks much bigger than Times.
| | 02:59 |
That's something that I need to take
into consideration when I'm making my
| | 03:01 |
font-family request.
| | 03:03 |
If I request Georgia, and they don't
have it, and the second request is Times,
| | 03:07 |
my text is going to look a little
smaller than it would, if they were seeing my
| | 03:10 |
page the way I had intended to.
| | 03:12 |
So when I'm working with typography,
that's something I want to be aware of.
| | 03:15 |
I not only want to pick fonts that are
in the same family, but I want to pick
| | 03:18 |
fonts to have the same
type of proportional spacing.
| | 03:21 |
Now, I mentioned that you can go
through all these trouble of requesting
| | 03:24 |
specific fonts and still not get what you want.
| | 03:26 |
Now, how is that possible?
| | 03:28 |
Well, every single user has the
ability to go into their browser and set Font
| | 03:33 |
Preferences that totally
disable what you've requested.
| | 03:36 |
I'm using Firefox, and let me show
you what I'm talking about in Firefox.
| | 03:39 |
I am going to go to Tools, and choose Options.
| | 03:41 |
Now, if you're using a different
browser, trust me, you have these
| | 03:44 |
capabilities, just go into your
Preferences or your Options and nose around,
| | 03:48 |
and you'll find your font options.
| | 03:50 |
So I'm going to go to Content > Fonts & Colors.
| | 03:53 |
Now, right now Times New
Roman is my default font.
| | 03:55 |
I do have an Advanced button here, though.
| | 03:57 |
I can request different
default fonts for different families.
| | 04:00 |
Now, another thing that I can do is
I have a little checkbox right here.
| | 04:03 |
This says Allow pages to choose their
own fonts, instead of my selections above.
| | 04:07 |
So if I feel like my personal
selections are way better than anybody is ever
| | 04:11 |
going to choose for their webpage, I can
turn that off, and there is nothing the
| | 04:14 |
designer can do about that.
| | 04:16 |
So for Serif for example, I could say,
you know what, I want to see Adobe
| | 04:19 |
Caslon Pro from now on.
| | 04:21 |
I can click OK, OK again, and notice that
all my text are displaying in Adobe Caslon Pro.
| | 04:27 |
If I go back to my Options, I can turn
that option back off again, and I got to
| | 04:32 |
make sure I reset my Serif font.
| | 04:34 |
Something that I tend to
forget from time to time.
| | 04:36 |
So we'll reset the Times New Roman, click
OK, click OK again, and now we get it back.
| | 04:42 |
So one of the things you want to do
before you start trying to control your
| | 04:45 |
typography online is get a really good
handle on which fonts are common system fonts,
| | 04:50 |
what families they belong to,
and how those fonts relate to each other,
| | 04:54 |
so you can know how to make
really good font requests.
| | 04:57 |
| | Collapse this transcript |
| Creating custom font family declarations in Dreamweaver| 00:01 |
When creating styles to control your
typography, the best strategy for declaring
| | 00:04 |
font families in CSS is to use
multiple family declarations with the generic
| | 00:09 |
font family as the last possible choice.
| | 00:11 |
Using this method ensures that your
design looks as close as what you've
| | 00:15 |
intended as you can get.
| | 00:17 |
Your multiple font families should
relate to each other and you should keep in
| | 00:20 |
mind that just because two fonts are
of the same family, for example, they
| | 00:24 |
both may be Serif fonts, there may be
sizing and spacing differences that can
| | 00:28 |
affect your design.
| | 00:29 |
As we discuss setting font-family
declarations, we'll also take a look at how
| | 00:32 |
Dreamweaver makes it easy to create and
access custom multi-font declarations.
| | 00:37 |
So, here I have the 05_02 file open and
the only selector we have right now on
| | 00:42 |
our CSS is the body tag.
| | 00:44 |
And if I select that, I notice that I
have a font-family declaration of Georgia.
| | 00:48 |
Well, you know, you can't even really see that.
| | 00:49 |
So, let's go in Code view.
| | 00:51 |
We have Georgia, Times
New Roman, Times, and Serif.
| | 00:53 |
So let's break down the CSS syntax here.
| | 00:56 |
For a multiple font-family
declaration, use commas to separate the fonts.
| | 01:01 |
Now, some fonts have more
than one word in their name.
| | 01:04 |
So to avoid confusing the browser,
we pass those as a literal value by
| | 01:08 |
surrounding them in quotation marks.
| | 01:10 |
And then of course, just like any
other CSS rule you would end it with a
| | 01:13 |
semicolon and that is exactly how
you do a font-family declaration.
| | 01:17 |
Now, you can make these on your own,
or you don't have to go to the specific.
| | 01:21 |
You can just leave a generic
font declaration like Serif.
| | 01:24 |
Let me show you what I mean.
| | 01:26 |
So, what you want to do is go down
to the next line and just type in h1.
| | 01:29 |
So, let's do a little hand coding here.
| | 01:30 |
I'm going to open up our curly brace,
you can find them to the right of the P
| | 01:33 |
key, just hold the Shift key down to get them.
| | 01:35 |
I'm going to hit Enter, so that my code
looks similar to that one and I'm just
| | 01:39 |
going to do a font-family declaration
and I can use code hinting, to kind of
| | 01:43 |
help me out with this.
| | 01:44 |
Now, I get this listing of fonts that
come up and I could choose one of those if
| | 01:47 |
I wanted to, but I don't have to.
| | 01:48 |
For example, I could just type
in sans-serif and that's a generic
| | 01:55 |
font-family declaration.
| | 01:56 |
And if I close out my rule and save my
file, when I go back in the Design view,
| | 02:01 |
I can see that I'm indeed getting
a sans-serif font for my heading.
| | 02:04 |
Now that's basically just telling the
browser, whatever sans-serif font you want
| | 02:08 |
to use is fine by me.
| | 02:09 |
You may want to have a little
bit more control over that though.
| | 02:12 |
So, let's take a look at using
Dreamweaver's built in font-family declaration to
| | 02:15 |
make this a little bit easier on this.
| | 02:17 |
So, I'm going to go over to my
CSS Styles panel and I'm going to
| | 02:19 |
double-click the h1 selector.
| | 02:21 |
It's going to open that up in my
CSS rule definition dialog box.
| | 02:24 |
So, I can see there is my
font-family, sans-serif.
| | 02:26 |
Well, if I grab the pull-down menu, I
get to see that listing all over again.
| | 02:31 |
What Dreamweaver has done for us is
it has created multiple font-family
| | 02:34 |
declarations and you'll notice that
they're all grouped together by family.
| | 02:37 |
So Verdana, Geneva, sans-serif,
those are all sans-serif fonts.
| | 02:41 |
Tahoma, Geneva, sans-serif,
Arial Black, Gadget, sans-serif.
| | 02:44 |
So, there are some really interesting
mixtures in there, but notice that at the
| | 02:47 |
very end of each one of those, we
do have the default font-family.
| | 02:50 |
So serif, monospace, sans-
serif, that sort of thing.
| | 02:54 |
I'm going to chose Arial, Helvetica,
and sans-serif for my heading one.
| | 02:58 |
So, I can just grab the pull-down menu,
find the listing that I want, go ahead
| | 03:02 |
and choose it and click OK.
| | 03:04 |
Now, I didn't see anything changed in my
rendering of my heading 1, and that's okay.
| | 03:08 |
But I've been more specific about the
fonts and now I would rather use this
| | 03:12 |
Arial, and if it doesn't have Arial,
I would rather use this Helvetica.
| | 03:15 |
If it doesn't have Helvetica, I'm just
telling the browser fine, at least makes
| | 03:18 |
sure it's sans-serif.
| | 03:18 |
So I'm being a lot more specific there.
| | 03:21 |
Now, I know that you I noticed that
there were a lot of choices there when we're
| | 03:24 |
choosing our font-family declarations,
but you are not always going to have
| | 03:27 |
exactly what you need.
| | 03:28 |
So, Dreamweaver also makes it
easy for you to add your own.
| | 03:31 |
So, I'm going to create a new CSS rule
and this time I'm going to use the CSS
| | 03:35 |
Styles panel to do this.
| | 03:36 |
I'm just going to click on New CSS Rule
and I'm going to do a tag selector and
| | 03:41 |
let's do the Paragraph tag, there we go.
| | 03:44 |
And we're also going to do
that in this document only.
| | 03:46 |
So, I'm going to click OK and now
when I grab the font-family declaration
| | 03:49 |
pull-down menu, I've got all these listings.
| | 03:52 |
Now, I'll be honest with you.
| | 03:53 |
If you are doing one such as Times
New Roman, Times, and serif, or one of
| | 03:57 |
these ones that appear down in the
bottom, it can take a while to always drag
| | 04:00 |
that down and find it.
| | 04:02 |
Maybe you've got a certain one you're
using like Times New Roman and you wanted
| | 04:05 |
it up towards the top.
| | 04:06 |
So, if I choose Edit Font List, one of the
things that I can do is I can reorder these.
| | 04:11 |
So if I'm always using Arial, for
example, I could move it up to the top and
| | 04:15 |
then if I'm using Georgia, second, I
can move it and maybe I'm using Courier
| | 04:19 |
third, so I'll move that up.
| | 04:21 |
And so now when I click OK and I come
back in here, notice I reordered these and
| | 04:26 |
the ones that I'm going to be using
more frequently are closer to the top.
| | 04:29 |
Dreamweaver will remember that and
it will keep that listing that way,
| | 04:32 |
regardless of how long you work
in the program until you reset it.
| | 04:35 |
Now, you can also build your own, so
I'm going to go back to Edit Font List
| | 04:38 |
and let's say I'm building a print style
sheet and I want to specify the use of Garamond.
| | 04:44 |
That's certainly not a system font, but it
may be prevalent on some people's machine.
| | 04:48 |
So, I can find my Available fonts on this side.
| | 04:51 |
So, I'm going to scroll down and find
Add fonts in list below and this allows
| | 04:55 |
me to create my own.
| | 04:55 |
I'm going to click Adobe Garamond Pro
from my listing, you can choose any font
| | 04:59 |
that you want and I'm going to move it over.
| | 05:02 |
Now, I can continue to add fonts, so if
they don't have an Adobe Garamond Pro, I
| | 05:07 |
can scroll down, and say will the
default Garamond would work just fine.
| | 05:12 |
And if they don't have the default
Garamond, maybe I would rather they use Georgia.
| | 05:16 |
Now, at the very bottom of this, I
do need to have that sort of default
| | 05:19 |
family declaration.
| | 05:20 |
So, the nice thing about those listing
is if you scroll all the way down, the
| | 05:24 |
very bottom you're going to
have those generic font families.
| | 05:27 |
So, here this would be a serif font, so
I'm going to add that to the bottom and
| | 05:30 |
you can see I now have this new list
and I can go ahead and click OK and now
| | 05:33 |
that's available to me
anytime I want to chose that.
| | 05:37 |
Click OK again and now I would get Garamond.
| | 05:39 |
Not so great for screen reading, but if
this is a print style sheet that would
| | 05:42 |
work out pretty well.
| | 05:43 |
Obviously careful thought should be
given when choosing which font-families to
| | 05:46 |
use for your site and how those
fonts are going to relate to each other.
| | 05:50 |
Thankfully, Dreamweaver gives you a
multitude of prebuilt font declarations to
| | 05:54 |
choose from, and it makes it easy to
build custom font-family declarations
| | 05:58 |
when the need arises.
| | 06:00 |
| | Collapse this transcript |
| Understanding units of measurement| 00:01 | Although not used strictly for text,
it's crucially important that you
| | 00:04 | understand the different units of
measurement the CSS allows and the
| | 00:07 | ramifications behind using them.
| | 00:10 | Since units of measurement affect so
many aspect of your pages from layout to
| | 00:14 | font sizing, understanding how these
units work will go a long way to helping
| | 00:18 | you control not just your typography, but how
all objects on that page relate to each other.
| | 00:23 | You may recall in our earlier movie
on starter pages, some of the prebuilt
| | 00:27 | started pages come in what
we call elastic layouts.
| | 00:30 | That is to say, layouts based on font-size.
| | 00:33 | By properly understanding units of
measurement, and how they make items relate
| | 00:37 | to each other, you can go so far as
to make your entire layout rely on the
| | 00:41 | sizing of your type.
| | 00:42 | There are two general categories
when discussing units of measurement.
| | 00:46 | Fixed and Relative.
| | 00:48 | Fixed units delineate a fixed size
that does not changed based on other factors.
| | 00:54 | Relative units of measurement usually
relate to other elements on the page or
| | 00:57 | look to the user agent for
a base value to begin with.
| | 01:01 | With those two categories in mind,
let's take a look at a few of the options
| | 01:04 | available to you in specifying sizing in CSS.
| | 01:08 | So, we are going to take a
look at the fixed values first.
| | 01:11 | First, we're going to talk about points.
| | 01:12 | Now, points are units of
measurement that are designed for print.
| | 01:15 | Most of the people that are trained
with CSS are graphic designers and when
| | 01:19 | they see that they can use points, they are
very happy because they are used to using points.
| | 01:23 | They are dependable unit of
measurement for them in printed page, so I think
| | 01:27 | that's going to translate well on the screen.
| | 01:28 | Well not really, they are in
fact 170 second of an inch.
| | 01:33 | So what does that translate to on screen?
| | 01:35 | That's a good question.
| | 01:36 | You need to know the resolution the
monitor is set to, as well as, the operating
| | 01:39 | system to answer that one.
| | 01:41 | So, we really should avoid using
points for on-screen font measurements and
| | 01:45 | restrict its use to prints style sheets.
| | 01:47 | The same is true for inches and centimeters.
| | 01:49 | And again, those guys are
just what you think they are.
| | 01:52 | They are useful for other media types but
really should not be used for on screen media.
| | 01:56 | Now, when you move to Relative units
of measurement, the first one I want
| | 02:00 | to talk about are ems.
| | 02:01 | Now, ems are hands down the most
popular relative unit of measurement
| | 02:05 | for on-screen sizing.
| | 02:07 | An em is described as being relative
to the nearest parent font-size and a
| | 02:12 | practically identical to using percentages.
| | 02:14 | exs are very similar to ems, only they're
equal to the ex height of a particular font.
| | 02:20 | The size of the font can change
dramatically as font families are substituted,
| | 02:24 | so you should use that one with care.
| | 02:26 | Now, percentage values are very straightforward.
| | 02:29 | A percentage value sizes the text to a
percentage of its inherited or default
| | 02:33 | value and finally, we have pixels.
| | 02:36 | Now, pixels are based on the
current resolution of your viewing device.
| | 02:39 | Because it relies on the resolution of
your user agent, pixels are sometimes
| | 02:43 | referred to as a relative unit.
| | 02:45 | But in truth, setting units to
pixels fixes them to that size.
| | 02:49 | There are several reasons to avoid
using pixels for font measurement.
| | 02:53 | Internet Explorer, prior to version
7 did not allow on screen resizing of
| | 02:58 | pixel based font sizing.
| | 02:59 | So, users of earlier versions of
Internet Explorer will not be able to change
| | 03:03 | their font-size based on
their own viewing preferences.
| | 03:07 | Also pixels sizes that might look good
on a monitor might be far too large for
| | 03:11 | the mobile environment.
| | 03:12 | Pixel-based font-sizes don't
scale too well between environments.
| | 03:16 | So, it's best to avoid using
pixels for font sizing when possible.
| | 03:20 | Now, let's take a look at using both
pixels and ems and how the use of one is
| | 03:25 | different than the use of the
other within the browser environment.
| | 03:28 | So, I'm going to find in our CSS
styles, the paragraph rule and one
| | 03:32 | another things that I need to do is change
to this paragraph so that it's 16 pixels tall.
| | 03:36 | Well, the easiest way to that,
of course, would be to use pixels.
| | 03:39 | So, I'm going to select the Add Property
link and I'm going to type in font-size.
| | 03:45 | Now, if you're ever wondering, where
do I find a list of all these properties
| | 03:49 | that you're talking about, or
when you do this you have a list.
| | 03:52 | You can just grab that pull-down menu
and you can choose anything that you
| | 03:55 | want and so from here, we could have easily
chosen font-size and seen which one we needed.
| | 04:00 | Now, the next thing I want to do is
I'm going to type in 16 and pixels is the
| | 04:05 | default, but I could also grab the pull-
down menu and choose any of those units
| | 04:08 | of measurement that we've
just been talking about.
| | 04:10 | So we'll do 16 pixels.
| | 04:11 | I'm going to go ahead and save that
and I'm going to preview that in Firefox.
| | 04:17 | So, it looks exactly 16 pixels tall.
| | 04:19 | Well, at least it does to me.
| | 04:20 | Now, what I'm going to do is I'm going
to leave this open and I'm going to go
| | 04:23 | back in the Dreamweaver.
| | 04:24 | The reason being is because I want to
compare to using ems for sizing and see
| | 04:29 | kind of what the pros and corns of this are.
| | 04:31 | So I'm going to select my Paragraph rule
and I'm going to click in the font-size
| | 04:34 | and I'm going to type in 1em.
| | 04:35 | If I just say Return, I see that it
goes in and makes it change and that saves
| | 04:39 | me the step of having to go to the pull-
down menu and choosing em from the list.
| | 04:43 | All right, so I'm going to save that and
I'm going to preview that also in my browser.
| | 04:47 | So now, you'll notice I have two tabs open here.
| | 04:50 | One is using ems and the other is
using pixels and if I toggle back and forth
| | 04:54 | between them, they look exactly the same.
| | 04:57 | So, how did I know that 1em
was going to equal 16 pixels?
| | 05:01 | Well, because this is my browser and
if I go to Tools and choose Options and
| | 05:07 | look under my Fonts & Colors, I can see that
the Size I have chosen for it is 16 pixels.
| | 05:12 | Now, that's the default of most browsers.
| | 05:14 | Although it's certainly not the
default of every single browser client.
| | 05:18 | So, when I use an em, it is a
relative unit of measurement.
| | 05:21 | If I was somebody that has maybe a
vision disorder or somebody who had a very
| | 05:25 | large monitor, I might want to change this size.
| | 05:28 | So, maybe I'm going to up that say 20 pixels.
| | 05:31 | Now, when I click OK, notice the
difference between using ems, versus using a
| | 05:35 | fixed unit of measurement.
| | 05:37 | You can see here it's still 16 pixels
tall, whereas with ems, I'm getting the
| | 05:41 | font sizing from the parent
element itself, in this case, the default
| | 05:45 | font-size of the browser.
| | 05:47 | So as a general rule, ems are the
preferred unit of measurement for online type.
| | 05:50 | As always, there are exceptions to this
rule. There are times, for example, when
| | 05:54 | you're going to want to fix
it at a specific pixel size.
| | 05:57 | Also, older versions of Internet
Explorer seem to have problems with font-size
| | 06:01 | values that are defined strictly as ems.
| | 06:03 | As a work around, most designers will
size the body selector using a percentage
| | 06:08 | and then define all other measurements in ems.
| | 06:10 | This seems to fix those
pesky Internet Explorer problems.
| | Collapse this transcript |
| Controlling font sizing| 00:01 | One of the basic tenets of adhering to
web standards is to give as much control
| | 00:04 | to the user as you can within
the structure of your design.
| | 00:08 | By using Relative units of
measurement when sizing text, you control how
| | 00:11 | elements relate to each other relative
to size but leave the ultimate control of
| | 00:16 | the text size to the user or the user agent.
| | 00:18 | This helps your site become more
accessible and more readable across a
| | 00:22 | wider array of devices.
| | 00:24 | We'll begin this exercise by
examining how the body tag can help us prevent
| | 00:28 | certain browser rendering issues and
then look into the strategy behind using
| | 00:33 | relative measurements.
| | 00:34 | So, here we have the font_sizing.htm
file open and the first thing I want to
| | 00:38 | do is tell the user agent that I'll accept
its default font-size as my starting point.
| | 00:43 | The best place for me to do
that is with the body tag.
| | 00:45 | So, what I'm going to do is go over
to my CSS Styles panel and I'm going to
| | 00:48 | choose my body tag selector.
| | 00:50 | I'm going to go ahead and add the
property font-size and again you can just type
| | 00:55 | that in, font-size or you could grab it
from the pull-down menu and when I hit
| | 00:59 | Tab, I'm going to type in 100%.
| | 01:04 | Let's talk about what that
100% is going to do for us.
| | 01:06 | Internet Explorer has a problem
rendering all em-based layouts.
| | 01:12 | So, if on the parent tag I say that my
font-size should be 100%, underneath that
| | 01:17 | I'm free to go ahead and now define
everything in relative units of measurement,
| | 01:21 | knowing the Internet
Explorer will render it just fine.
| | 01:24 | Another little quirk that I have to be
aware of too is that for whatever reason
| | 01:28 | Opera has trouble rendering 100%.
| | 01:31 | So, for Opera's benefit, I'm going
to go ahead and pass along 100.01%.
| | 01:41 | It actually doesn't matter, I could do
also 100.1% and that would work just fine.
| | 01:45 | Essentially everything other browser ignores
that and renders them at 100% and Opera goes oh!
| | 01:50 | You wanted 100%.
| | 01:51 | Welcome to cross-browser compatibility.
| | 01:53 | It's a fun, fun subject.
| | 01:55 | The next thing we want to do is go in
and start defining font-sizes for our
| | 01:58 | specific regions of
content and specific elements.
| | 02:01 | Now remember, we are basically going
to whatever user agent is consuming this
| | 02:05 | content and saying give us your
default font-size and we want to size
| | 02:09 | everything relative to that.
| | 02:10 | So, one of the first things we are
going to do is tackle our heading 1.
| | 02:13 | I'm going to go up to my CSS Styles
panel, choose the h1 selector and I'm going
| | 02:18 | to add the font-size property.
| | 02:20 | In this case, we are going to start
switching to ems as our unit of measurement.
| | 02:24 | So, I'm going to type in 1.4em.
| | 02:28 | Remember that's about the same thing as
saying you want 140% of the default font-size.
| | 02:33 | So, that's going to make our headings
larger than our default font-size but only
| | 02:37 | by 140%, you can see that it sort of
looks like it shrunk it down a little bit.
| | 02:41 | Now, I'm going to do the same thing
for our paragraphs, but I'm going to make
| | 02:45 | them smaller than the default font-size.
| | 02:47 | So, I'm going to go ahead and add a new
CSS rule and I'm just going to choose a
| | 02:51 | tag selector and I want to do the paragraph tag.
| | 02:54 | Now, it's self-populated that because I
had clicked inside of a paragraph prior
| | 02:58 | to creating a rule but I could have
certainly have typed that in, if it was
| | 03:01 | already focused on that element.
| | 03:03 | So, I wanted to define this rule in this
document only and I'm just going to click OK.
| | 03:07 | So, for font-size here, I'm going
to go ahead and type in 0.85ems.
| | 03:13 | Again, it's going to be about 85% of the
default font-size and I'm going to click OK.
| | 03:17 | You can see that my paragraphs
are getting a good bit smaller.
| | 03:20 | Now, I need to go ahead and create font
sizing for my heading 2s and my heading
| | 03:25 | 3s and I'd really like to not have to go
through that long process of opening up
| | 03:29 | that dialog box every
single time I need a new rule.
| | 03:32 | Especially since I have a heading 1
rule that already has a font-size in it
| | 03:36 | that's going to be very close
to what I need for those guys.
| | 03:39 | So, what I'm going to do is instead of
creating a new rule, I'm simply going to
| | 03:42 | duplicate an existing one.
| | 03:43 | This is a really cool technique in
Dreamweaver for rapidly creating rules that
| | 03:47 | are similar to each other.
| | 03:48 | So, I'm going to right-click the h1
selector, and I'm going to choose Duplicate.
| | 03:51 | Now, I'm going to type in h2 instead
of h1 and when I click OK, notice at the
| | 03:57 | bottom of my rules, I have h2,
and it has exactly the same value.
| | 04:00 | I am just going to modify that
value slightly, and in h2 I'm going to
| | 04:04 | change that to 1.2.
| | 04:05 | Now, for more complicated rules,
that can save you a lot of time.
| | 04:09 | I'm going to right-click the h2,
choose Duplicate again and this time I'm
| | 04:13 | going to type in h3 and for my h3 selector,
I'm going to change that from 1.2em to 1em.
| | 04:19 | So, very similar values, just getting
gradually smaller with those guys and
| | 04:24 | duplicating those rules was certainly
a lot easier than creating each one of
| | 04:27 | those guys from scratch.
| | 04:28 | So, I'm going to go ahead and save my
file and I'm going to move on to talking
| | 04:32 | about the sidebar and here's where we really
examine inheritance in a little bit more detail.
| | 04:37 | Now our sidebar content, I'd like
that to be just a little bit smaller than
| | 04:41 | the rest of the elements on the page, sort
of indicating its importance, if you will.
| | 04:45 | So, I'm going to go up to my sidebar
selector, I'm going to add the font-size
| | 04:50 | property to that and I'm going to size
that to 0.85ems and you will notice that
| | 04:55 | everything inside of it gets a little
bit smaller by about 85% of what the
| | 04:59 | default font-size is going to be.
| | 05:01 | Now, you might think well, that's fine.
| | 05:03 | I'll just leave it at 0.85 ems but I want
to talk about strategy here for a moment.
| | 05:07 | There are two things
that we need to think about.
| | 05:09 | Number one, 0.85 ems isn't being that
descriptive about what I want to have
| | 05:13 | happen in that sidebar.
| | 05:14 | If another one of my team members was
coming along and taking a look at my style
| | 05:18 | sheets or if I were looking at them six
months from now, I wouldn't really know
| | 05:22 | the strategy that hey!
| | 05:23 | I'm trying to make everything in
the sidebar a little bit smaller.
| | 05:25 | The other thing that I want to talk
about is how values are inherited?
| | 05:29 | If I do 0.85ems, the sidebar is going to
calculate that value and then pass that
| | 05:34 | value down into the elements.
| | 05:36 | But if I say 85%, it's going to ask
each one of those elements to be 85% the
| | 05:41 | size of the parent element.
| | 05:42 | So it's a little bit better when you
are going for this type of a result to use
| | 05:46 | percentages instead of ems and
that's exactly what I'm going to do here.
| | 05:49 | I'm going to type in 85% instead.
| | 05:51 | It doesn't look like I have any
rendering differences but now structurally
| | 05:55 | that's a lot more correct.
| | 05:56 | Now, one last thing that we want to
tackle here and that's dealing with
| | 06:00 | inheritance when it has
sometimes unintended side effects.
| | 06:03 | Let me show you what I mean.
| | 06:05 | I'm going to go to the ul selector and
we have a couple of unordered lists and
| | 06:09 | I'm going to add the font-size property to that.
| | 06:11 | So, I'm going to type in font-size and
just like the paragraphs, I'd like them
| | 06:16 | to be a little bit smaller.
| | 06:18 | So, I'm going to type in 0.85ems.
| | 06:18 | Now that worked just fine but I don't
know if you can see this or not but you
| | 06:24 | see how the nested list got just a
little bit smaller than my parent list.
| | 06:28 | Well, that's because that 0.85em
value is inheriting down each time.
| | 06:33 | So, the more nested you get within a
complex structure, the smaller something is
| | 06:38 | going of get and that can be
really, really problematic.
| | 06:41 | So, really if you are using relative
units of measurement, there is not much
| | 06:45 | that you can do to prevent that.
| | 06:46 | You just have to write rules every now
and then to sort of correct it and let me
| | 06:49 | show you what I mean.
| | 06:51 | I can go up and create a brand new CSS
rule and this time I'm going to make it
| | 06:55 | a compound selector.
| | 06:56 | I'm going to use a descendant
selector to target any unordered list already
| | 07:00 | inside of an unordered list.
| | 07:02 | So, you can see ul.
| | 07:05 | Again, I'm going to do it in
this document only and click OK.
| | 07:08 | What I'm going to do is I'm going to reset that.
| | 07:10 | I'm going to set that to 1em.
| | 07:13 | Now, what that's going to do is it's
just going to go up to its parent element
| | 07:15 | and it's going to say whatever size
you are, that's the size I want to be.
| | 07:19 | So as our first unordered list
calculates down to 0.85ems, this one is saying,
| | 07:24 | make me that size too.
| | 07:25 | That seems confusing at first, but
once you really understand inheritance and
| | 07:29 | you know that the child element is
getting that information from the parent
| | 07:32 | element, it makes a lot more sense.
| | 07:33 | I'm going to go ahead and click OK
and notice that our nested list is now
| | 07:37 | exactly the same size as our parent list.
| | 07:39 | Now if I save this and preview it in the
browser, we are going to see one of the
| | 07:43 | advantages to using
relative units of measurement.
| | 07:46 | Right now, I'm getting all the font-
sizing information directly from my client.
| | 07:50 | But if I go up and choose Options and
change my font sizing and I go down to say
| | 07:55 | 13 pixels and click OK, notice
that everything shrinks relatively.
| | 08:00 | So, the sizing and the spacing is
maintained even though the font size itself shrinks.
| | 08:05 | By the same token, if I go back up to say a
font-size of 16 pixels, I'm now getting that.
| | 08:09 | So, I now have a very flexible design
that's going to change based upon the
| | 08:14 | user agent settings.
| | 08:15 | So, using relative units of measurement,
particularly ems and percentages, helps
| | 08:19 | your pages become more accessible
across a wider range of devices.
| | 08:23 | When using relative units for font
sizing, it's a good idea to plan your styles
| | 08:27 | with inheritance in mind.
| | 08:29 | If done properly, inheritance can save
you a lot of time when sizing text and
| | 08:32 | create more efficient style sheets.
| | 08:34 | If handled incorrectly or ignored,
inheritance is bound to cause some unwanted
| | 08:38 | problems in the size of your text.
| | Collapse this transcript |
| Controlling line spacing| 00:01 |
I started working on websites in the
mid 1990s and as a graphic designer I
| | 00:05 |
remember the constant struggle of
trying to get around the formatting
| | 00:08 |
limitations of standard HTML.
| | 00:10 |
One of the more frustrating
limitations was the complete lack of control
| | 00:14 |
over the line spacing.
| | 00:15 |
Some of you might recognize that by
the term leading, and no matter what
| | 00:18 |
you call it, you are still talking about
controlling the space between lines and text.
| | 00:22 |
Now don't confuse this with the space
before or after a paragraph or heading.
| | 00:26 |
That's controlled through the use of
vertical margins and we'll discuss it shortly.
| | 00:29 |
Now, we are talking about the CSS
property line-height and how it will allow us
| | 00:33 |
to control the space between
line boxes within an element.
| | 00:37 |
Unless an absolute value is used,
the line-height property is calculated
| | 00:41 |
relative to the font-size of the element.
| | 00:44 |
Much like the font-size property,
it's advisable to use relative units when
| | 00:48 |
specifying line-height, especially if you
use relative values for the size of the text.
| | 00:53 |
Imagine if you will, you size a
paragraph to 1em and then give the same
| | 00:56 |
paragraph a line-height of 20 pixels.
| | 00:59 |
That might look fine at first but if
the user adjusts the browser's text size,
| | 01:03 |
the size of your font will
change but not the line-height.
| | 01:05 |
Now, that's not ideal.
| | 01:08 |
So, let's experiment with
some line-height settings.
| | 01:10 |
We have got the line_height.htm file
open here and one of the first things that
| | 01:13 |
we are going to do is we are going to
set our font-size to be relative to this
| | 01:18 |
10 pixel grid that we've got set up here.
| | 01:20 |
So, I know it's not pretty but we've
set this up so that we can really see how
| | 01:24 |
much line-height is being added.
| | 01:27 |
Each one of those grid lines is 10
pixels, so what I'm going to do is I'm going
| | 01:30 |
to go to the body tag and I'm
going to set its font-size to 62.5%.
| | 01:39 |
Why 62.5% you asked?
| | 01:42 |
Well, if your browser's default font-
size is 16 pixels, like most are, and you
| | 01:47 |
can check that and set it while you are doing
this exercise, that will reset it to 10 pixels.
| | 01:52 |
So there you go.
| | 01:53 |
All right, well, the first thing we are going
to do is change our font-size of our heading 1.
| | 01:57 |
So, if I click on the h1 and I'm going
to add the font-size property and I'm
| | 02:02 |
going to size that to 3ems.
| | 02:04 |
So, our heading is now roughly 30 pixels tall.
| | 02:08 |
The line-height property
gets its value from that size.
| | 02:12 |
So unlike font-size, which looks to
the parent element or the user client
| | 02:16 |
for sizing information, line-
height is going to go directly to that
| | 02:19 |
element's font-size.
| | 02:21 |
So, if I add the line-height property,
I'm going to click the Add property and
| | 02:25 |
type in line-height.
| | 02:27 |
Once again, you can grab that from the
pull-down menu if you are not exactly
| | 02:31 |
sure how that's written out and what
I'm going to do here is I'm going to
| | 02:34 |
type in a value of 1em.
| | 02:37 |
What that's going to do for me is
it's going to set the line-height of the
| | 02:40 |
box to exactly 3ems.
| | 02:41 |
Now, I know you are sitting here
and saying well, wait a minute.
| | 02:44 |
I thought you set it to 1em.
| | 02:45 |
Yes, but 1em is equal to whatever
the font-size is and in this case,
| | 02:50 |
the font-size is 3em.
| | 02:51 |
So, notice if I change it to 1.5 ems
or even 2ems, notice our line-height
| | 02:59 |
now goes up to 60 pixels, again because
it's relative to the font-size itself at 3ems.
| | 03:03 |
Well, I'm going to go to the paragraph
rule, what we are going to do here is we
| | 03:07 |
are going to set our font-size to 1em.
| | 03:10 |
By the way, I know I haven't really
mentioned this that much but, see how it is
| | 03:15 |
to modify and add styles using the CSS
Styles panel without having to go into
| | 03:19 |
any code or without having
to open up the CSS dialog box.
| | 03:22 |
I just love this Properties section down here.
| | 03:24 |
It really saves me a tremendous amount of time.
| | 03:26 |
So, I'm setting my font-size to 1 em.
| | 03:29 |
Now based upon what our body text
size is set to, in most browsers at this
| | 03:33 |
point, that's going to give
me text that's 10 pixels tall.
| | 03:36 |
Now, I'm going to add a property
to this and I'm going to give it a
| | 03:39 |
line-height of 120%.
| | 03:44 |
Now, a lot of people prefer to use
percentages rather than ems for their line-height.
| | 03:48 |
Again, you are roughly getting pretty
much the same thing, but it's a lot more
| | 03:52 |
descriptive of what we are actually asking for.
| | 03:54 |
At this point, we are asking for a line
-height that's 120% of the text-size.
| | 03:58 |
So, you can see a little bit of spacing there.
| | 04:00 |
Now, online typography really requires a
little bit more spacing than print typography.
| | 04:06 |
If you were to take a look at the
automated leading value for most printed
| | 04:09 |
publications, it's around 120%.
| | 04:12 |
For screen reading however, we
typically like to start at a value of 140% and
| | 04:17 |
when I do that, notice the increased
spacing and it's getting a little bit
| | 04:21 |
easier to read on the screen.
| | 04:23 |
Now that's not a hard and fast rule.
| | 04:25 |
That's just a basic general starting point.
| | 04:27 |
Every font is a little bit different
and each font-size changes that as well,
| | 04:31 |
but if you are looking for a starting
point for online typography, 140% is a
| | 04:35 |
good place to start.
| | 04:36 |
Now, one last thing I want to talk
about with line-heights is how line-heights
| | 04:40 |
are inherited and
understanding that is extremely important.
| | 04:43 |
So, I'm going to save my file and the
next thing I'm going to do is strip out
| | 04:47 |
all of the line-heights I have set.
| | 04:48 |
So, I'm going to select the paragraph
selector, choose the line-heights property
| | 04:53 |
by clicking on it and then click the Trash Can.
| | 04:55 |
Again, be really careful about that.
| | 04:56 |
You want to make sure you have
highlighted the property and not just the rule.
| | 04:59 |
You want to delete the whole rule.
| | 05:00 |
I am going to do the
same thing for my heading 1.
| | 05:02 |
I'm going to take the line-height
and I'm going to delete that properly.
| | 05:06 |
Okay, so now I can go back to the body
tag and we can explore a little bit more
| | 05:10 |
about inheriting line-heights.
| | 05:12 |
What I'm going to do is I'm going to add
the line-height property to my body selector.
| | 05:16 |
So, I'm going to type in line-height.
| | 05:19 |
And I'm going to give it a line-height of 2ems.
| | 05:22 |
So notice that is an explicit value.
| | 05:26 |
Now, if I save this and preview this in
my browser, I'm going to leave that up,
| | 05:31 |
so that we can see what happens
when I use something other than ems for
| | 05:34 |
line-height on the body.
| | 05:36 |
So, back in Dreamweaver, I'm
going to go in and change this.
| | 05:39 |
Instead of 2ems, I'm just going to use
2 and then for unit of measurement, I'm
| | 05:44 |
going to choose a multiple.
| | 05:45 |
Now line-height is the only thing that
we can use a multiple on, and you will
| | 05:49 |
notice as soon as you select it, the
unit of measurement goes away beside it.
| | 05:52 |
You can literally just type in 2.
| | 05:54 |
Now, it's a multiple, so it's 2
times whatever the body size is.
| | 05:58 |
So, if I save this and preview this, I
notice a very dramatic difference between
| | 06:03 |
passing an em value versus a multiple
when line-height is being inherited.
| | 06:08 |
So, what's the difference?
| | 06:10 |
Well, when you use an em, that value
is calculated and then the calculated
| | 06:14 |
value is passed down.
| | 06:16 |
Since our font-size is currently at 10
pixels, 2ems is calculated to 20 pixels
| | 06:21 |
and then that was passed down
to each one of the elements.
| | 06:24 |
Notice that the 20 pixels look
very different when applied to the
| | 06:27 |
paragraph versus the heading.
| | 06:29 |
The heading doesn't really
have that much space to give.
| | 06:32 |
On the other hand, when I pass down
the multiple, what happens is instead of
| | 06:36 |
passing a calculated value, what it
does is it passes down the multiple values.
| | 06:41 |
So now, I'm getting twice the headings
size and twice the paragraph size equally
| | 06:47 |
on both of those elements.
| | 06:48 |
So when you are dealing with
inheritance, it's a lot better to pass down a
| | 06:52 |
percentage value or a multiple
than it as a calculated em value.
| | 06:57 |
Understanding how line-heights are
calculated will give you an amazing amount of
| | 07:00 |
control over the readability of your
text and how your textual elements relate
| | 07:04 |
to each other on the page.
| | 07:05 |
Like most CSS properties,
it's fairly easy to use.
| | 07:09 |
But unexpected results like we've seen
here with inheritance underscores the
| | 07:13 |
importance of having a complete
understanding of how these properties work and
| | 07:17 |
relate to the elements on your pages.
| | 07:20 |
| | Collapse this transcript |
| Controlling vertical margins| 00:01 | Another example of typographic
control you would probably like to have is
| | 00:05 | controlling the space before and after
a paragraph, something quite common in
| | 00:09 | most page layout programs.
| | 00:10 | Unfortunately, there isn't a space before
and space after a paragraph CSS property.
| | 00:15 | The space between XTML elements is
controlled by vertical margins, and to use
| | 00:20 | anything outside of the browser's
default spacing, we need to understand how to
| | 00:24 | control vertical margins. Like
many spacing and measurement concepts,
| | 00:28 | vertical margins affect
both typography and layout.
| | 00:32 | The first and main concept you need
to understand when controlling vertical
| | 00:36 | spacing is how vertical margins collapse.
| | 00:39 | Essentially, if two elements are on
top of each other, and both have vertical
| | 00:43 | margins set to 10 pixels, instead of
having 20 pixels worth of space between them,
| | 00:48 | the margins collapse, so that only
10 pixels worth of space is being used.
| | 00:52 | If the two measurements differ,
the higher measurement is used for the
| | 00:55 | final spacing value.
| | 00:57 | Now, that seems pretty simple, but
there are a lot of rules that determine when
| | 01:01 | margin collapse occurs.
| | 01:03 | To better understand this concept,
checkout the movie on margin collapsing in
| | 01:07 | the Layout chapter of this title.
| | 01:09 | In this movie, we are going to focus on
techniques you can use to take control
| | 01:12 | over the vertical spacing between elements.
| | 01:15 | We'll do this by clearing out the
browser default margins and replacing them
| | 01:19 | with margins that give us the desired spacing.
| | 01:21 | Now, please keep in mind that
executing these techniques in a more complex
| | 01:25 | layout requires a thorough
understanding of margin collapse.
| | 01:28 | I have got 05_06 opened in Dreamweaver,
and one of the first things we want to
| | 01:33 | do is clear out the vertical
margins of specific elements.
| | 01:36 | Now, you may have heard this
referred to in some circles as a CSS reset.
| | 01:41 | Most web designers will have a
strategy for approaching this.
| | 01:45 | Some people use the wild card selector.
| | 01:47 | They will say wild card margin 0,
padding 0, to wipe out all of the margins and
| | 01:52 | padding of the elements.
| | 01:53 | Now, I don't recommend this for two reasons.
| | 01:56 | Now, first it means that you have
to reset margins and padding for all
| | 01:59 | elements in the page. Here is the thing.
| | 02:01 | If you take an element's margin down to 0,
that means whenever you use it on the
| | 02:05 | page, you have to reset that to
something else, and if you forget, you have no
| | 02:10 | vertical margins between them.
| | 02:11 | Second, the wild card character can
sometimes cause form elements to not work
| | 02:15 | properly, especially in Mozilla browsers.
| | 02:18 | So I'm going to go up to my CSS Styles,
and I'm going to create a brand new style.
| | 02:24 | So I'm going to click the style tag
and choose New CSS Rule, and in this case
| | 02:28 | we are going to do a compound selector,
because we are going to group a lot of
| | 02:31 | selectors together.
| | 02:33 | So I'm going to type in h1, h2, h3, h4.
| | 02:40 | You can see right off the bat that I'm
stringing together and grouping a lot of
| | 02:44 | block level elements.
| | 02:45 | So I'm just going to keep going
with my headings, h5, h6, p for my
| | 02:52 | paragraphs, blockquote, ul, ol, so
both of my unordered and ordered list, and
| | 03:00 | finally, dl and address.
| | 03:04 | Now, those are two lesser used tags,
but I want to throw them in there because
| | 03:08 | they are block level elements that
you might use within document flow.
| | 03:12 | Now, this seems like a really long
group selector, but in reality if you look
| | 03:15 | at some of the CSS resets out there, there
are some that are a lot longer than this.
| | 03:20 | You have to come up with your
own personal strategy for this.
| | 03:23 | The way that I look at it is I want to
clear out all the elements that I'm going
| | 03:26 | to be using frequently.
| | 03:28 | If I clear out an element that I'm not
going to use that often, that means that
| | 03:31 | sometimes I'll forget that I have
cleared it out and I won't have a default
| | 03:35 | value to fall back on.
| | 03:36 | So I really just like to take control
over the specific elements that I want to
| | 03:40 | clear out and control visually myself.
| | 03:43 | Now, to actually reset the values on
these, I'm going to click OK, go to my Box
| | 03:47 | model, and I'm going to set 0 for
Padding, 0 for Margin, Same for all.
| | 03:52 | I'm going to go ahead and click OK,
and now I can see in the selector, I have
| | 03:56 | got 0 margin, 0 paddings, and
that's reflected over here on our design.
| | 03:59 | You can see the default margins that
were holding these elements apart and
| | 04:02 | allowing the background color to
show through are now gone, they have all
| | 04:06 | collapsed in on themselves, and we have no
spacing whatsoever between these elements.
| | 04:11 | So now what we want to do is we want
to create consistent spacing between the
| | 04:14 | paragraphs, and put a little bit more
space above our headings than below them.
| | 04:18 | So we are going to have to
plan our CSS accordingly.
| | 04:20 | That's one of the benefits of stripping
all this out and resetting those values,
| | 04:24 | we now get to rebuild them with
exactly the settings that we want.
| | 04:27 | So now what I'm going to do
is create a brand new CSS rule.
| | 04:30 | Let's choose a compound selector.
| | 04:33 | We want to group the h1, h2 together,
and do it in this document only.
| | 04:39 | Go ahead and click OK.
| | 04:40 | I'm going to flip straight
to my Box model properties.
| | 04:43 | I'm going to deselect Same for all for
Margins, and what I'm going to do is I'm
| | 04:47 | going to select margin Top of 1.2 ems,
and I'm going to do a Bottom margin of 0.
| | 04:52 | Now, why would I do that?
| | 04:54 | Well, what this is going to do is
it's going to use the 1.2 em margin for
| | 04:58 | anything above my headings.
| | 04:59 | But below my headings, my paragraphs
and other elements are going to control
| | 05:03 | that vertical spacing.
| | 05:04 | So essentially lowering that value to
0, and that's going to allow whatever
| | 05:08 | value I set for my paragraphs or any
other item to control that spacing.
| | 05:12 | So now I have more space above the
heading than I'm going to have below it.
| | 05:16 | So I'm going to go ahead and click OK,
and you can see the result of that.
| | 05:19 | We still have no space below the heading,
but we have a lot of space above it.
| | 05:22 | So now I'm going to go ahead and choose
New CSS Rule, and I'm just going to do a
| | 05:27 | tag selector, and we'll do the paragraph tag.
| | 05:31 | Again, we are going to choose this
document only and I'm going to click OK.
| | 05:33 | Now, with the paragraph I want a
little bit more consistent spacing.
| | 05:36 | So what I'm going to do now is go
to my Box property and I'm going to
| | 05:40 | deselect Same for all and I'm going to do a
Top margin of 1 em and a Bottom margin of 1 em.
| | 05:45 | So notice that we are really concerning
ourselves with the vertical margins, not
| | 05:48 | the right and left margins.
| | 05:49 | We are going to click OK.
| | 05:50 | Now you can see I have consistent
spacing between all my paragraphs, but my
| | 05:54 | heading has the space above it
that I want for this look and feel.
| | 05:57 | So I'm going to save this and I have got one
more quote on the page, this is a blockquote.
| | 06:03 | So I want to go ahead and
change its vertical spacing as well.
| | 06:07 | Here I'm actually going to affect the
right and left margin to make sure the
| | 06:10 | blockquote is getting the
proper amount of spacing.
| | 06:13 | So I'm going to choose New CSS Rule,
this can be a tag selector as well, and I'm
| | 06:17 | just going to do the blockquote.
| | 06:18 | So if you didn't have it highlighted,
you can just type in blockquote or you can
| | 06:22 | grab it from the pull-down menu.
| | 06:23 | I am going to go ahead and click OK.
| | 06:25 | Now, for my Box properties here, I'm
going to deselect Same for All, and
| | 06:28 | I'm going to do 2 ems worth of margin for
Top and 2 ems worth of margin for the Bottom.
| | 06:33 | So my blockquotes are going to have
double spacing between any paragraphs that
| | 06:37 | they are inside of, and for the Right
and Left margin, I'm going to type in 10%.
| | 06:42 | So it's okay to mix values.
| | 06:45 | So why percentages rather than ems?
| | 06:48 | That's going to control the horizontal
inset of my blockquotes, and by using
| | 06:52 | percentages, I'm basically saying, hey,
go ahead and give me 80% of the parent
| | 06:56 | element and split that
between the right and left side.
| | 06:59 | So I'm going to go ahead and click OK,
save the file, and preview that in my browser.
| | 07:05 | So notice that I'm getting
consistent spacing between my paragraphs.
| | 07:08 | I'm getting extra
spacing between my blockquotes.
| | 07:11 | My spacing right and left are
exactly the same size, and I get a lot more
| | 07:16 | spacing above my headline than
I do below it. That's perfect.
| | 07:20 | So resetting the vertical margins of
specific elements makes writing your CSS
| | 07:24 | more efficient and more predictable.
| | 07:26 | Based on your own personal preferences
or the anticipated complexity of your files,
| | 07:30 | the elements you need to
clear could be greater or less than the
| | 07:33 | example I have shown here.
| | 07:35 | Note for example that list items and
form elements were left off this example.
| | 07:39 | In most sites, you will also need to have a
strategy for resetting those values as well.
| | 07:44 | Gaining control over your vertical
margins is an important step in ensuring that
| | 07:48 | your site's typography looks and
behaves exactly the way you want it to.
| | Collapse this transcript |
| Horizontally aligning text| 00:00 | Aligning text using CSS is pretty easy.
| | 00:03 | In fact, there are only four possible
values for horizontal alignment in CSS,
| | 00:08 | right, center, left, and justify.
| | 00:12 | The old HTML attribute had exactly the same
values other than justify, which is new to CSS.
| | 00:18 | Using justify brings with it the same
spacing issues that justifying text in
| | 00:22 | print presents as well.
| | 00:24 | Using CSS to align text does free us
up from having to use the cumbersome
| | 00:28 | align attribute, and allows us to specify
different alignment options for different media.
| | 00:33 | In this exercise, we'll explore the
text align property and then later move on
| | 00:37 | to solving some more complex alignment issues.
| | 00:40 | So here we have the 05_07 file open,
and the first thing I want to do is set an
| | 00:45 | alignment option for my main content header.
| | 00:48 | So I'm going to go to my CSS Styles
property, and I'm going to find content h1.
| | 00:53 | Highlighting that, I'm going to add
a property and I'm going to add the
| | 00:57 | text-align property.
| | 01:01 | Now, notice I can grab the pull-
down menu and I can choose left, right,
| | 01:05 | center, justify, or inherit, which
would force it to inherit from its parent,
| | 01:09 | which it does by default.
| | 01:10 | So I'm going to choose left, and
unless I'm actually overriding an inherited
| | 01:16 | value, I usually don't have to do
left align, because that is the default.
| | 01:19 | Now, I'm going to go to my sidebar
p selector, and there I'm going to
| | 01:25 | double-click this, because if you are
in the CSS rule definition dialog box, I
| | 01:29 | want you to know where to find this.
| | 01:30 | You won't find it in this Type category.
| | 01:32 | It's actually in the Block category.
| | 01:34 | So you want to go to Block and
there you will find Text-align.
| | 01:37 | I'm going to grab that pull-down menu,
and this time I'm going to choose justify.
| | 01:41 | I'm going to click OK, and you can
see the spacing issues coming into play.
| | 01:46 | Not so bad when you have a wider
column of tags, but for shorter columns,
| | 01:50 | that justified alignment isn't always going
to look maybe the way that you want it to.
| | 01:54 | I also noticed that the second heading
in my content would like to be centered,
| | 01:58 | so I'm going to oblige it.
| | 01:59 | I'm going to go to my #content h2, I'm
going to add the text-align property.
| | 02:04 | So text-align, and I'm just going to
type in center, so if you know the value,
| | 02:09 | you can also type that in as well.
| | 02:10 | Sure enough, it center aligns.
| | 02:13 | The last thing we want to do, if I
scroll all the way down to the footer, I want
| | 02:17 | to go ahead and right-align that.
| | 02:18 | It also mentions being vertically
centered, and that's something we'll have to
| | 02:21 | take care of little bit later on.
| | 02:23 | So I'm going to go down to footer.
| | 02:27 | I don't really have a selector that
targets the paragraph inside of the footer,
| | 02:30 | so I need to go ahead and make one.
| | 02:31 | If you go down and click inside that
paragraph, and then choose New CSS Rule,
| | 02:38 | if you have compound selector chosen, and if
you don't, you can just go ahead and grab that.
| | 02:42 | Dreamweaver should go ahead and populate
that with #footer p. So again, that can
| | 02:46 | save you a little bit of time.
| | 02:47 | Make sure we are going to
define this in the main.css.
| | 02:50 | I'm going to go ahead and click OK.
| | 02:52 | Switching to the Block category, I'm going
to choose Text-align, right, and click OK.
| | 02:58 | I can go ahead and save that
and that's all there is to it.
| | 03:01 | For the most part, you really shouldn't have
any trouble setting horizontal text alignment.
| | 03:05 | Keep in mind that this property does inherit.
| | 03:07 | So you will want to watch closely
any text alignment applied to a parent
| | 03:11 | element, so that you can undo that if
it's not what you want for the child element.
| | Collapse this transcript |
| Vertically aligning text| 00:01 | Unlike horizontally aligning text,
there is no vertical text align property.
| | 00:05 | Now, there is the property vertical
align, and because a lot of people
| | 00:09 | aren't really sure exactly how it works,
it's either usually misused or ignored entirely.
| | 00:15 | It can in fact be used to
help vertically align text.
| | 00:17 | It just has to be used correctly.
| | 00:19 | The vertical align property is designed
to apply to inline elements or table cells.
| | 00:25 | When used with inline elements, you
can use keywords such as top, middle, and
| | 00:29 | baseline, and you can also use
computed length values and percentages.
| | 00:32 | If you use it with table cells, you
are limited to just those keywords.
| | 00:36 | Another way to vertically align
text is a method that we have already
| | 00:39 | discussed, using line height.
| | 00:41 | For single line text, line height
centers the text inside the given value.
| | 00:47 | If the line height equals the
height of the container, your text will
| | 00:50 | automatically be centered inside of it.
| | 00:52 | This is a great way of
centering vertical menu bars.
| | 00:55 | In this exercise, we'll explore using
both techniques to vertically align our text.
| | 01:00 | So we are in the 05_08 file, and one of
the first things I'm going to do is try
| | 01:06 | to center my header text
vertically within the header elements.
| | 01:08 | So I'm going to go to my CSS Styles
panel, and I'm going to click #header.
| | 01:12 | Now, I notice that #header has a height of 5ems.
| | 01:17 | Now, if I want to let my line height
drive that, I need to remove this property.
| | 01:21 | So I'm going to choose the height property,
and then click the Trash Can to get rid of it.
| | 01:25 | Of course the header now
collapses into the h1 tag.
| | 01:29 | So let's reset that height using line height.
| | 01:32 | So grabbing the #header h1, I'm going
to add a property, and I'm going to add
| | 01:37 | line-height, and I'm going to set that to 5ems.
| | 01:42 | Now, when I do that, it recessed
the height of the header to 5ems.
| | 01:46 | Now the text is vertically
centered within the element.
| | 01:48 | That's a really cool way of not only
setting the height of something, but
| | 01:52 | centering the text inside of it.
| | 01:54 | Now, if our header were multiple lines,
this wouldn't work quite as well for a
| | 01:58 | single line header or
element that works perfectly.
| | 02:00 | Now, I'm going to do the
same thing with our footer.
| | 02:02 | If I scroll down, I can see that
my paragraph footer is more or less
| | 02:07 | centered vertically in that.
| | 02:08 | I just need to make that a little bit taller.
| | 02:10 | So I'm going to go down and find #footer
p, and I'm going to add the line-height
| | 02:15 | property to that and this time, we
are going to go ahead and give this a
| | 02:19 | line-height of 3ems.
| | 02:21 | So now again, it's vertically
centered within that and a good bit taller.
| | 02:27 | We are going to go do a Save All
and preview that in our browser.
| | 02:31 | The nice thing is by using ems for
height here, we are making it relative to the
| | 02:35 | size of the text itself.
| | 02:37 | That way even though it's vertically
centered in that, it's always going to
| | 02:40 | relate to the height of the element.
| | 02:42 | Now, if I scroll up just a little bit
more, I can see that I have a headline
| | 02:47 | that says Please Center the 2nd Heading.
| | 02:49 | I would really like to use an ordinal for the
nd rather than just the nd that I have here.
| | 02:54 | Now, there are some structural XHTML
tags that I want to talk about here.
| | 02:58 | You have the SUP or superscript tag
and the SUB, which is the subscript tag.
| | 03:04 | Those will move your text up or down on the
baseline, based on a super or subscript text.
| | 03:10 | Now, structurally, if you want to use
those, those are great, but in terms of
| | 03:14 | just rendering in the browser itself,
you are not in control of how far up it's
| | 03:19 | going or how far down it's
going or how the text is resized.
| | 03:22 | A lot of times you are not going
to be happy with the visual results.
| | 03:26 | So if you would rather control that
manually, you can write a class selector to
| | 03:30 | change that or you can zero out
what's happening with the superscript or
| | 03:34 | subscript tags and add your own measurements.
| | 03:36 | We are going to go the
route of using a class selector.
| | 03:39 | I am going to create a new CSS rule.
| | 03:41 | This is going to be a class, so make
sure you choose that from this menu, and
| | 03:45 | I'm going to type in .ordinal.
| | 03:47 | So remember that period precedes every
single class selector, so a .ordinal.
| | 03:52 | I'm going to define that
in main.css and click OK.
| | 03:55 | Now, there's a couple of
things we want to do here.
| | 03:57 | For font-size, I'm going to type in 60%.
| | 03:59 | So that's going to be 60% of
whatever the parent element is.
| | 04:04 | In this case that will be whatever
heading or whatever paragraph that's inside of.
| | 04:07 | The next thing I want to
choose is Letter-spacing.
| | 04:10 | So I'm going to go to my Block category,
and for Letter-spacing, I'm going to
| | 04:14 | tighten this up a little bit,
I'm going to do -0.05em.
| | 04:20 | So that's just going to pull those
letters together a little bit tighter.
| | 04:24 | Just underneath that is the vertical-
align property that we are going to be using.
| | 04:28 | Now, again, I have these keywords,
baseline, sub, super, top, text-top, and
| | 04:32 | you could those, but again, you are relying
on the browser's default settings for those.
| | 04:37 | So I want to take a little bit more
active control over that and I'm going to
| | 04:40 | type in 50%, so that's going to shift
it up the baseline by 50% of its value.
| | 04:46 | So we are going to go ahead and
click OK, and now we need to apply it.
| | 04:50 | So I have got the nd in 2nd
highlighted, and using the HTML part of the
| | 04:55 | Properties Inspector, I'm going to grab
the Class pull-down menu, and choose ordinal.
| | 05:00 | When I do that, it looks like it
didn't work, but that's just because the
| | 05:03 | Dreamweaver rendering
environment isn't always 100% accurate.
| | 05:06 | So I'm going to do a Save All,
and preview that in my browser.
| | 05:11 | Indeed, now I can see that I have a
nice placement of the ordinal using that
| | 05:15 | vertical-align property.
| | 05:17 | While these techniques help us when
vertically aligning our text, they won't
| | 05:21 | work in all instances.
| | 05:22 | For example, vertical aligning block
level elements is considerably trickier,
| | 05:27 | and we are going to have to tackle that next.
| | Collapse this transcript |
| Vertically centering block-level elements| 00:01 |
One of the most challenging things to
accomplish in CSS is to vertically center
| | 00:05 |
block level elements inside parent containers.
| | 00:08 |
If you don't know the dimensions of
the containing element, things get a lot
| | 00:11 |
easier as you can just use margins
and/or padding to do the job for you.
| | 00:15 |
But if you don't know the
dimensions of the parent element though?
| | 00:18 |
In those cases, while there is no
bulletproof method, you can turn to a pair of
| | 00:22 |
techniques that will get the job done for you.
| | 00:24 |
The first technique we are going to
look at involves using the vertical align
| | 00:28 |
property we learned about previously.
| | 00:30 |
Instead of using the vertical align on
adjust inline elements, we can also use it
| | 00:35 |
on block level elements, if the block
level elements are inside a table cell.
| | 00:39 |
You would think that would require a
lot of unnecessary table elements clogging
| | 00:43 |
up a code structure but you'd also be wrong.
| | 00:46 |
We can use the display property to tell
standard compliant browsers to display
| | 00:49 |
the container elements as
if they were table cells.
| | 00:52 |
Doing this allows us to employ the vertical
align property to anything contained within.
| | 00:57 |
There are, as we'll see, some
drawbacks to using this method.
| | 01:00 |
So open up the vertical_centering1.htm.
| | 01:03 |
So there are two vertical centering files.
| | 01:05 |
You want to make sure you have the first
one, vertical_centering1.htm, opened up.
| | 01:10 |
Now I'm going to turn my attention to
the sidebar because this is what we are
| | 01:14 |
going to want to center.
| | 01:15 |
There has been a little
structural change to the sidebar.
| | 01:17 |
I'm going to show what I mean.
| | 01:19 |
So we still have our parent sidebar tag
but inside that we have a brand new div
| | 01:23 |
tag with an id of verticalAlign and
inside that is our sidebar content.
| | 01:29 |
In this case, the block
level element of a paragraph.
| | 01:32 |
So we want to take the paragraph and
vertically center it within the sidebar and
| | 01:36 |
it's the div tag that's going to
be the key to getting this done.
| | 01:39 |
So that's a little extra structural
markup but for the results we are going to
| | 01:43 |
get, I think you will agree that it is worth it.
| | 01:44 |
Now the first thing I want to do is
horizontally center the paragraph within the
| | 01:49 |
sidebar and that's pretty easy to achieve.
| | 01:51 |
What we are going to do is I'm going to
go to my CSS Styles panel, and I'm going
| | 01:55 |
to find my #sidebar p selector.
| | 01:58 |
We are just going to go ahead
and center this using auto margins.
| | 02:01 |
So I'm going to add a property and I'm
going to add the margin property and we
| | 02:06 |
want to give it a top and bottom margin of 0.
| | 02:08 |
So we are going to use a little
shorthand notation here, then I'm going to do a
| | 02:11 |
space and type in auto.
| | 02:13 |
All right, so let's talk
about what this is doing.
| | 02:15 |
So whenever you use shorthand notation
for margins, and you pass two values,
| | 02:20 |
the first value is used for top and bottom,
the second value is used for right and left.
| | 02:24 |
So by saying 0 top and bottom, we
are not adding any additional margin
| | 02:28 |
vertically to our paragraph but by
using auto margin left and right, what we
| | 02:32 |
are basically saying is based on the
width of the paragraph, the remaining
| | 02:36 |
width inside the parent element should be
split equally between the left and the right side.
| | 02:41 |
This results in the centering of the element.
| | 02:42 |
It's the same technique we use to
center our pages so there is a lot more about
| | 02:46 |
this technique in the chapter on layout.
| | 02:48 |
Okay, so let's turn our attention back
to vertically centering this element now.
| | 02:53 |
So the next thing we need to do is that
in our parent element rule, in this case
| | 02:56 |
that's the #sidebar rule.
| | 02:58 |
Now normally we have been editing our
rules using the CSS Styles panel but
| | 03:02 |
this time I'm going to double-click this to
open up our CSS Rule Definition dialog box.
| | 03:07 |
The reason is I want you guys to know
where this property is found in case you
| | 03:11 |
are creating this rule from scratch.
| | 03:13 |
So in the Category, I'm going to
click on the Block category because that's
| | 03:16 |
where we can find the Display property.
| | 03:18 |
Now normally when people use the
Display property, they are either changing
| | 03:21 |
something from an inline to a block
level element or back to an inline element,
| | 03:26 |
or just saying none so that
something doesn't display all together.
| | 03:29 |
But as you can see from this pull-down
menu, there are a lot of other choices.
| | 03:33 |
Now since the sidebar is the
parent element, we are going to make it
| | 03:36 |
display like a table.
| | 03:38 |
So choose table, and click OK.
| | 03:41 |
Now you will note that there is no
visual change to our sidebar but the
| | 03:45 |
structural change to it is now within
the browser, we can make things inside
| | 03:49 |
of it behave as if they were inside of
a table, and that's going to lead us to
| | 03:53 |
our vertical centering.
| | 03:54 |
So I'm going to go ahead and create a
brand new CSS rule and this can be an ID
| | 03:59 |
selector, and we are going to do #verticalAlign.
| | 04:06 |
So we got to spell that exactly
the same way that it is spelled and
| | 04:09 |
capitalized in the code itself.
| | 04:11 |
We are going to define that in
main.css, and I'm going to click OK.
| | 04:16 |
Now there is not going to be a lot to this rule.
| | 04:18 |
We are concentrating mainly
on that vertical alignment.
| | 04:20 |
So I'm going to click on the Block category.
| | 04:22 |
Now this time, when I grab the pull-down
menu for Display, instead of going down
| | 04:27 |
to table, what I'm going
to choose is table-cell.
| | 04:29 |
So we are making the parent element
behave as a table, we are making this
| | 04:33 |
interior block level
element to behave as a table cell.
| | 04:36 |
Now because this is a table cell,
certain properties now apply to it.
| | 04:40 |
One of those properties would be vertical align.
| | 04:42 |
So I'm going to grab the Vertical-align
pull-down menu and I'm going to choose
| | 04:46 |
middle, I click OK and I'm going to do Save All.
| | 04:49 |
Now just because it doesn't look right
in Dreamweaver, it doesn't mean that it
| | 04:52 |
isn't going to work in our browsers.
| | 04:54 |
So what I'm going to do is I'm
going to go pull-down menu and choose to
| | 04:56 |
preview that in Firefox.
| | 04:59 |
Sure enough, I now have a
vertically aligned element, perfect.
| | 05:04 |
Now in the perfect world, I wouldn't
really need to use any other technique but
| | 05:08 |
unfortunately, while this technique
works in the standard compliant browsers,
| | 05:12 |
Internet Explorer can be
decidedly none-standards compliant.
| | 05:16 |
The Display table-cell property is not
supported in Internet Explorer meaning
| | 05:19 |
this technique won't work for that browser.
| | 05:21 |
So I'm going to go ahead and go
back in the Dreamweaver and close
| | 05:25 |
vertical_centering1.
| | 05:27 |
Over in the 05_09 folder, I'm going to
open up vertical_centering2 because for
| | 05:33 |
Internet Explorer we are
going to use another technique.
| | 05:36 |
This one works fine in IE but
unfortunately it doesn't work in other
| | 05:39 |
standard compliant browsers.
| | 05:40 |
And for those of you who are new to CSS,
I'm sorry to say that this is not an
| | 05:44 |
isolated occurrence.
| | 05:45 |
Welcome to the wonderful
world of browser support.
| | 05:48 |
In this technique, we'll use
positioning to achieve our centering.
| | 05:52 |
Now if you don't know a lot about
positioning, you might want to check out the
| | 05:55 |
chapter on layout where we talk
about positioning in greater detail.
| | 05:58 |
For the time being, we are going to
focus on structure and how this positioning
| | 06:02 |
attribute allows us to vertically
center without knowing the exact height of
| | 06:06 |
the container element.
| | 06:08 |
So if I look over my sidebar, I can
see and in this example, the structure
| | 06:12 |
is exactly the same.
| | 06:13 |
So at least the good news about
these two techniques is that it can use
| | 06:16 |
exactly the same structure.
| | 06:18 |
So we have a paragraph, we have a
verticalAlign div tag that's going to help us
| | 06:22 |
with our centering and then
we have the parent sidebar.
| | 06:25 |
So the first thing I'm going to do is go
in and use auto margins to horizontally
| | 06:29 |
center our sidebar paragraphing.
| | 06:31 |
So go to #sidebar p, we'll add this
property and again we are just going to add
| | 06:35 |
the same shorthand notation, margin 0
for top and bottom, space and then the
| | 06:40 |
word auto to center it horizontally, okay.
| | 06:43 |
Go ahead and do a Save All.
| | 06:46 |
And now let's get into the
meat of this particular technique.
| | 06:48 |
What we are going to do is go up to
your sidebar selector and you can just go
| | 06:52 |
ahead and double-click that if you
would like to bring that up in the CSS Rule
| | 06:55 |
Definition dialog box.
| | 06:56 |
And again, I just want you to see
where the positioning attributes are set
| | 07:00 |
within this rule, in case
you are creating a new one.
| | 07:03 |
In fact, we have a category for Positioning.
| | 07:05 |
So I'm going to click on the
Positioning category and we'll go ahead and set a
| | 07:08 |
couple of attributes here.
| | 07:10 |
The first thing I'm going to do is set
the Position to relative, and I'm going
| | 07:14 |
to set Overflow to hidden now.
| | 07:15 |
Let's talk about what that does for us.
| | 07:17 |
By setting Position to relative, we
cause any elements nested inside of it to be
| | 07:22 |
positioned relative to it, and
not the view or other parent tags.
| | 07:27 |
So really we are just setting the
sidebar as the boundaries for where the
| | 07:30 |
paragraph inside of it
is going to be positioned.
| | 07:32 |
The reason that we did hidden is just
in case the paragraph has more content in
| | 07:37 |
it than the sidebar can hold, the
paragraph will be clipped off and will spill
| | 07:41 |
over and ruin the layout.
| | 07:43 |
So go ahead and click OK, and the
next thing we need to do is add our rule
| | 07:48 |
for vertical align.
| | 07:49 |
So I'm going to choose New CSS Rule,
once again this is an ID selector, and we
| | 07:54 |
are going to type in #verticalAlign.
| | 07:58 |
Make sure you are defining this one in
the main2.css, and go ahead and click OK.
| | 08:03 |
Now here is where our techniques really differ.
| | 08:05 |
I'm going to go to the Positioning
category again, and this time I'm going to
| | 08:08 |
position it using absolute positioning.
| | 08:11 |
Now we cover positioning in the
chapter on layout, so to learn a lot more
| | 08:15 |
about how these positioning attributes work,
please be sure to check out the layout chapter.
| | 08:20 |
So we are setting this to position absolute,
and we are setting our Top position to 50%.
| | 08:24 |
All right, so what is that going to do for us?
| | 08:27 |
Well, what that's going to do is it's
going to move the entire verticalAlign div
| | 08:32 |
down, so that the top of it
is halfway down the sidebar.
| | 08:36 |
So if I click Apply, you
can literally see that happen.
| | 08:39 |
Remember it uses this point as a
starting point because we set our sidebars
| | 08:43 |
positioning attribute to relative.
| | 08:45 |
So it moves it down to halfway, 50%.
| | 08:48 |
Now that gets us close
but it doesn't get us there.
| | 08:51 |
So I'm going to click OK and there is
still one more rule we have to modify.
| | 08:55 |
I am going to go up and find the
#sidebar p, double-click that and we are going
| | 09:00 |
to do a little
positioning on this element as well.
| | 09:02 |
So I'm going to click on Positioning
and I'm going to change the Position from
| | 09:05 |
absolute this time to relative.
| | 09:08 |
Relative positioning allows it to
stay within this normal document flow and
| | 09:10 |
allows us to offset it and that is
exactly what we are going to do here.
| | 09:14 |
For Placement, for Top,
I'm going to type in -50%.
| | 09:16 |
Now let's talk about what that's going to do.
| | 09:21 |
It's going to move it halfway between
the top of its parent container element,
| | 09:24 |
that's a sidebar, and its current position.
| | 09:26 |
So that's going to move the top of the
paragraph to here, which is going to give
| | 09:30 |
us our vertical centering.
| | 09:31 |
I'm going to go ahead and
click OK, do a Save All.
| | 09:35 |
Now sort of kind of looks centered here
but it's not rendering correctly, and
| | 09:39 |
if I tested this in any other browser
than Internet Explorer, it wouldn't look
| | 09:42 |
right to begin with.
| | 09:43 |
But if I preview this in Internet
Explorer, we can see that our paragraph is
| | 09:47 |
vertically centered within the sidebar.
| | 09:49 |
So there you have it.
| | 09:50 |
One technique that works in standard
compliant browser and another one works
| | 09:53 |
in Internet Explorer.
| | 09:55 |
Now as you'll learn in our chapter on
deploying CSS, we could pass the Internet
| | 09:59 |
Explorer specific markup in
using a conditional comment.
| | 10:03 |
In a perfect world, we could just use
one technique and stick with it but in the
| | 10:07 |
very real world of CSS, you'll often
have to find multiple ways of dealing with
| | 10:12 |
different browsers and devices.
| | 10:14 |
It's a frustrating but necessary
skill when creating your styles.
| | 10:18 |
In truth, there is even a simpler
solution to the problem: design around it.
| | 10:22 |
One of the things that learning CSS will teach
you is the beauty of simple and elegant code.
| | 10:27 |
Designing towards that will
often avoid problems such as this.
| | 10:31 |
| | Collapse this transcript |
| Setting column width| 00:01 | While it's true that online typography
differs from the printed page, some rules
| | 00:05 | translate really well including
those that relate to column width.
| | 00:08 | From Robert Bringhurst's classic book,
The Elements of Typography Style, we get
| | 00:12 | the following passage.
| | 00:14 | Anything from 45 to 75 characters is
widely regarded as a satisfactory length of
| | 00:18 | line for a single-column page set in
a serifed text face in a text size.
| | 00:23 | The 66-character line counting both
letters and spaces is widely regarded as ideal.
| | 00:29 | For multiple column work, a
better average is 40 to 50 characters.
| | 00:33 | Now, if we are measuring our types in
ems, it's pretty easy to calculate the
| | 00:37 | length of a character.
| | 00:38 | A character usually takes
up about one-half of an em.
| | 00:41 | So setting column width at 33 ems would give
you the "ideal column width" for readability.
| | 00:47 | Now obviously a lot of
things come into play here.
| | 00:49 | You have got the page layout to
consider, the font you are using, how much
| | 00:53 | spacing is involved.
| | 00:54 | But honestly, having text that stretches
the length of the screen creates a very
| | 00:58 | difficult reading environment for your viewers.
| | 01:00 | The majority of the time, you'll
handle the width of columns in the layout
| | 01:04 | of container elements. When
required however you can set it using the
| | 01:07 | elements themselves.
| | 01:09 | In this exercise, we'll set our main
column of text to a readable length and
| | 01:13 | then deal with the alignment issues
that are going to crop up based on that.
| | 01:16 | So the 05_10 file open and the first
thing that I'm going to target is my
| | 01:20 | content regions paragraph.
| | 01:22 | So I'm going to scroll over to my CSS
Styles, and I'm going to find #content p.
| | 01:26 | Now I think I'm going to close my
Files panel, so that I can access these
| | 01:30 | properties a little bit easier and
you can see that for #content p there is
| | 01:34 | nothing in it right now whatsoever.
| | 01:35 | So what we are going to do is we are
going to go ahead and set the width of this
| | 01:39 | to 33 ems, and boom!
| | 01:41 | Now we have an ideal column width.
| | 01:43 | There is a bit of a problem however.
| | 01:46 | Notice our heading1 just looks fine
but if I scroll down, the heading2 is no
| | 01:49 | longer centered over the paragraph.
| | 01:51 | It's centered based on
the entire content div tag.
| | 01:53 | So now we need to kind of offset this
over a little bit,= and one of the ways
| | 01:55 | we can do that is set giving it a defined
width that is the width of our paragraphs.
| | 02:00 | Now you might say, well fine, sure.
| | 02:01 | We'll just go ahead and set heading2's
width to 33 ems as well but hang on a
| | 02:05 | second. The heading2 is bigger than
the paragraphs, which are set to 1 em.
| | 02:09 | So we need to do a little math here.
| | 02:11 | So I'm going to find #content h2 and
I see that its font size is 1.4 em.
| | 02:16 | So what we do is take the 33 ems divide
it by 1.4 and then you have got your width.
| | 02:22 | Now I don't profess to be a math major
and there are plenty of calculators out
| | 02:26 | there to help you do that but we are
going to add a property and we are going to
| | 02:29 | assign our #content h2 a width of 23.5
ems because that is exactly what we come
| | 02:36 | up with when we divide 33 by 1.4.
| | 02:40 | Okay, it's not looking bad but there is
still a bit of an optical illusion going on here.
| | 02:44 | Because our paragraph is left aligned, we
have a bit of a ragged edge on the side.
| | 02:49 | That's actually causing this to still
look a little offset even though it's in
| | 02:52 | the exact center of it.
| | 02:53 | So we are going to go ahead and move
that back a little bit and sometimes you
| | 02:56 | can just do this visually.
| | 02:58 | I'm going to set that width now to 22 ems
instead of 23.5, and that looks a little better.
| | 03:03 | I'm going ahead and save this,
preview that in my browser.
| | 03:08 | And as we can see we have a column of
text that really is a lot more readable
| | 03:13 | than it was before,
stretching all the way across the page.
| | 03:16 | That's just going to be a
lot nicer for your users.
| | 03:18 | So obviously setting the width of the
parent element would eliminate the need
| | 03:21 | to focus on the individual elements like
we have here but that's not always possible.
| | 03:25 | Knowing the theory behind this
technique will help in ensuring the column width
| | 03:29 | and resulting alignments are executed properly.
| | Collapse this transcript |
| Using font shorthand notation| 00:01 | In an earlier movie on setting up CSS
preferences, we instructed Dreamweaver
| | 00:05 | to use shorthand notations for margins, padding,
background, list and borders but not for font.
| | 00:10 | At the time I mentioned how
incorrect application of the font shorthand
| | 00:14 | can cause problems.
| | 00:15 | So I tend to like
implementing it on a case by case basis.
| | 00:18 | In this movie, we'll take a closer
look at the properties that we can set for
| | 00:21 | the font shorthand notation and the
problems that its careless use can cause.
| | 00:25 | So here we have a file, notation.htm,
opened and this has a few examples of
| | 00:30 | font shorthand notation.
| | 00:31 | So here are all the properties that we
can set through font shorthand notation.
| | 00:35 | We have style, variant, weight, size,
which has the optional ability to pass
| | 00:42 | line height into it, and finally family.
| | 00:46 | Unlike margins and padding, you can
arrange the notation in almost any order
| | 00:50 | that you want. In fact, there are only
two values you must have and they must
| | 00:55 | be in a certain order.
| | 00:56 | Each font notation must contain
both a size and a font family.
| | 01:01 | They have to be in that order and they
have to be the last two values submitted.
| | 01:05 | This type of flexibility allows us to
write shorthand notation in several ways.
| | 01:09 | Let's take a look at the three
examples that we have listed here.
| | 01:12 | So our first example would pass an
italic, small-caps, bold, a font of 1.2
| | 01:19 | ems in size and a line height of 2 along with
Arial and sans-serif as the font declaration.
| | 01:26 | Now let's spend a little bit
time looking at line height.
| | 01:29 | Notice that the font size and the line
height are separated by that forward slash.
| | 01:35 | And in this case, for the line height, we are
passing a multiple value and not an em value.
| | 01:39 | Line height is actually the only
property that's not a specific font property
| | 01:43 | that can be passed with
the font shorthand notation.
| | 01:47 | So if we don't have a lot of information
to pass to the user agent on a specific
| | 01:50 | element's font properties, it's really
easy just to shorten things up a bit.
| | 01:55 | For example, in the one below this
we are passing bold, italic, 2 ems in
| | 01:58 | Arial and sans-serif.
| | 02:00 | We are leaving off things like
small-caps that we are not setting.
| | 02:03 | But take a look at Example 3.
| | 02:05 | Here we are just passing
a size and a font family.
| | 02:08 | And in reality, that's all we really need to do.
| | 02:11 | However, there is one problem with
shortening the shorthand notation the way
| | 02:15 | you are seeing here.
| | 02:16 | Any problem that's left out is a side,
its default value for that element
| | 02:21 | regardless of what is
inherited or previously assigned.
| | 02:24 | To explore this concept a
little further, we'll practice with font
| | 02:28 | shorthand notation and experience
how it can get you in to trouble.
| | 02:31 | So I'm going to switch over to my
galleries.htm file and there are a couple of
| | 02:35 | things I want to point out.
| | 02:36 | We have some headings that we are going
to start to style, and we would like to
| | 02:39 | reduce the weight of the heading
selectors by using font shorthand notation.
| | 02:43 | Well, if I look inside my galleryArticle
divs, inside the mainContent, I can see
| | 02:47 | that I have several headings.
| | 02:48 | We have these h1 tags, followed by h2
tags and if I scroll down through the article,
| | 02:53 | I can see that I have a few h3 tags.
| | 02:56 | So I want to go ahead and rewrite
their styles so that they are maybe not
| | 03:00 | taking up quite as much code and
shorthand notation offers us a really
| | 03:04 | intriguing way of doing that.
| | 03:06 | Well I'm going to go ahead and
switch to a Split Screen view.
| | 03:09 | Notice that we are using a Vertical
split screen. You can get that by going up
| | 03:12 | to View and making sure
that it says Split vertical.
| | 03:15 | And for my related files I'm going to
click on the main.css, so I'm focusing
| | 03:19 | on the style sheet.
| | 03:20 | You might also want to reposition your
Design view so that you are looking at
| | 03:25 | least at one of the headings,
if not as many as you can.
| | 03:27 | I am going to go ahead and scroll all
the way down to the very bottom of my code,
| | 03:31 | because I have
stored some styles down there.
| | 03:33 | So if you go all the way down to about
line 626, you are going to see a comment
| | 03:39 | that says Add CSS exercise code here,
and that's what we are looking for.
| | 03:43 | So let's take a moment to review
what's going on here before we talk about
| | 03:47 | customizing the CSS with
font shorthand notation.
| | 03:50 | And I'm just going to resize that out
a little bit so I can see these a little better,
| | 03:53 | there we go.
| | 03:54 | Okay, so our first rule is a group
selector that's grouping the h2 and the h3s
| | 03:59 | together and italicizing them.
| | 04:00 | You can see that's happening, those h3s are
italicizing, this h2 is italicized but the h1 is not.
| | 04:07 | And then each individual selector,
we have the h1 selector, the h2, and the h3.
| | 04:11 | They all have specific font
information that they don't necessarily share.
| | 04:17 | So what we are going to do is we are
going to ahead and edit these, and
| | 04:19 | the first thing I'm going to do is just
remove some of the existing font styling so
| | 04:22 | that I can replace it with one line of code.
| | 04:24 | So I'm going to go to my mainContent
.galleryArticle h1 and I'm going to
| | 04:29 | start from the bottom.
| | 04:30 | And I'm going to remove font weight,
notice that's being set to normal and
| | 04:34 | I'm going to remove line height, notice
that's set to 1.75 ems, and I'm going to
| | 04:41 | remove font size which is 2.5 em.
| | 04:43 | So you got to remember all that.
| | 04:44 | You may say, why did I start from the bottom?
| | 04:46 | Well, if there is one thing that I try
to avoid typing if I can, it's all these
| | 04:50 | font family declarations.
| | 04:51 | They take a lot of typing, you might
misspell something by mistake, maybe forget
| | 04:55 | to put quotation marks around something.
| | 04:57 | So I kind of like to let those settings
handle that and what I'm going to do is
| | 05:00 | just remove font-family and just make that font.
| | 05:03 | So this will become my font shorthand notation.
| | 05:06 | All right, so the next thing I'm going
to do is go ahead and place in all the
| | 05:09 | things that I just took out.
| | 05:10 | So I'm going to type in normal, so we
don't get any bolding then I'm going to do
| | 05:13 | a space. Notice we don't put
commas between these, we put spaces.
| | 05:16 | And then font size was 2.5 ems.
| | 05:17 | I'll do a forward slash to pass
along the line height of 1.75.
| | 05:23 | I need to make sure also that I have a
space here between Georgia and line height.
| | 05:27 | So I'm going to go ahead and Save All.
| | 05:28 | Then I can see my heading1 doesn't
change at all but the font shorthand notation
| | 05:33 | is doing exactly what I
asked it to do. Wonderful!
| | 05:35 | Now I'm going to scroll down and do the
same thing to the galleryArticle h2 and
| | 05:39 | the galleryArticle h3.
| | 05:42 | So in a very similar fashion I'm
going to go through and remove font weight
| | 05:45 | normal, line height of 0,
and a font size of 1.2.
| | 05:49 | And then it will modify our font
family declaration to just be the
| | 05:53 | font shorthand notation.
| | 05:54 | So again, remember, we took out normal,
and then we just passed in 1.2 ems for
| | 06:00 | the size, forward slash 0 for the line height.
| | 06:04 | And again make sure that you add some
space between that value and Georgia,
| | 06:08 | and then save the file.
| | 06:10 | The last one we need to modify is the
mainContent h3, and this one really does
| | 06:13 | not have a lot being passed into it.
| | 06:15 | Just the size and a family.
| | 06:16 | Well that's all we really need for
font shorthand notation so I'm going to
| | 06:19 | remove the size, I'll go ahead
and shorten that down to just font.
| | 06:24 | And then in front of the font I'm going to
pass the size, and it's .95 em and then a space.
| | 06:30 | So then I'm just going to do a Save All.
| | 06:33 | And before we test this there is one
more thing that I need to change here.
| | 06:36 | Notice that the mainContent h3 rule is not
as specific as the other two heading rules.
| | 06:42 | We have mainContent .galleryArticle
h1, mainContent .galleryArticle h2.
| | 06:46 | Well, dealing with specificity and font
shorthand notation is something that you
| | 06:49 | really need to take serious consideration about.
| | 06:51 | So I want to make sure that the
values that I'm passing here are
| | 06:54 | definitely passed along.
| | 06:55 | So I'm going to make this a
little bit more specific by typing in
| | 06:58 | .galleryArticle h3, and then we'll go
ahead and do a Save All. Okay, cool.
| | 07:06 | Let's go ahead and preview that
in our browser and see how we did.
| | 07:10 | Everything looks pretty much the same
except for the fact that h2, and all of
| | 07:15 | my h3s are not italicized even though I'm
explicitly asking that those guys be italicized.
| | 07:22 | All right, so what's happening here?
| | 07:24 | Well, let's review our font shorthand
notation because that's what causing the problem.
| | 07:27 | All right, if I go down to my
mainContent .galleryArticle h2 selector, you can
| | 07:32 | see what I'm passing.
| | 07:32 | I'm passing normal so that it's not
bold and then 1.2 ems, 0 for line height,
| | 07:38 | and then the font family.
| | 07:39 | So where is the problem?
| | 07:40 | Well you will notice I didn't
pass anything in for italic.
| | 07:43 | For your font styles, you can either
have italic or you could have normal.
| | 07:46 | And for font weight, you can
either have bold or you can have normal.
| | 07:49 | But I just passed one normal value here.
| | 07:51 | So the browser doesn't know which one
I wanted, whether it was font style or
| | 07:54 | font weight, so it does both.
| | 07:57 | So in this case, I also need
to add an italic to it, perfect.
| | 08:02 | So now I have italic and normal.
| | 08:04 | Now if I go down to my h3,
I face a similar problem.
| | 08:08 | I didn't explicitly specify whether
I wanted it to be italicized or not.
| | 08:13 | Now for a header, its
default is not to be italicized.
| | 08:15 | So I shouldn't have assumed that it was.
In fact, because of its specificity
| | 08:19 | it is now overwriting this because a normal
declaration is being passed along with that.
| | 08:24 | So you can see that not declaring a
value can sometimes get you in trouble so
| | 08:29 | now I'm going to go ahead and
type in italic and then a space.
| | 08:34 | So now we don't really need
the group selector above it.
| | 08:36 | So I'm going to go ahead and get rid of
that just to clean up my code a little bit.
| | 08:40 | Let's do a Save All, and we'll
preview that in our browser. Okay, great.
| | 08:45 | Now we are seeing both of those guys
italicized and they are looking the
| | 08:49 | way that we want them.
| | 08:49 | So you can see that using font
shorthand notation can save a lot of time and
| | 08:54 | code when specing your type in CSS.
| | 08:57 | But improper use can cause some
unintended side effects, especially for nested
| | 09:01 | elements or group selectors that
overwrite previously set properties.
| | 09:05 | Take great care when deciding to use
the font shorthand and double check to
| | 09:09 | make sure you are not adversely affecting the
desired element or any of its related elements.
| | Collapse this transcript |
|
|
6. Working with BackgroundsBackground properties| 00:00 | Of all the properties that CSS affords us,
the one property that probably does
| | 00:04 | more for visual designers than any
other is the background property.
| | 00:08 | Using backgrounds, any XHTML element
can have a solid background color,
| | 00:12 | a background image, or both.
| | 00:14 | In HTML we could apply a background
image to the page or to a table and assign
| | 00:19 | background colors to table cells or
table rows, but this limited visual palette
| | 00:23 | was often all designers had when
creating layered looks or using large blocks of
| | 00:27 | color in their designs.
| | 00:28 | Now freed from those constraints
designers can look forward to adding visual
| | 00:32 | sophistication to any
element throughout their design.
| | 00:35 | In this chapter, we'll examine using
background images and colors, showcase
| | 00:39 | techniques and best practices when using
background properties, and discuss what
| | 00:43 | using background images can mean
to separating structure and design.
| | 00:47 | When assigning background properties,
in addition to assigning colors and
| | 00:50 | images to backgrounds, you can
control the way images repeat, position
| | 00:54 | themselves relative to the element,
and even choose how the background image
| | 00:57 | relates to the viewing area.
| | 00:59 | The background of an element is
defined as extending behind the foreground
| | 01:02 | content up to the outer
edge of the element border.
| | 01:05 | The element's size defines how much
of the background the viewer will see.
| | 01:09 | We'll demonstrate that by assigning
background colors to some of our page
| | 01:12 | elements to identify these
elements and determine their boundaries.
| | 01:16 | So I have the 06_01 file open and the
first thing I'm going to do is assign a
| | 01:19 | background color to the body tag.
| | 01:21 | So I'm going to go to my CSS Styles
panel, I'm going to select the body
| | 01:24 | selector and I'm going to click Add Property,
and I'm going to go ahead and add background.
| | 01:29 | Now there is a background-color property,
but you can use the generic shorthand
| | 01:33 | background notation without worrying
about anything being substituted other than
| | 01:38 | just what you specify.
| | 01:39 | So here hit Tab and go over and type in a color.
| | 01:41 | I'm just going to type #333 which is
a gray and hit Return and you can see
| | 01:46 | exactly what happens.
| | 01:47 | Our entire page's background is now gray.
| | 01:50 | Now notice some of our elements already
have background colors setup and that's
| | 01:53 | why we can't see the gray through them.
| | 01:54 | Now speaking of that, our header
element that's up top could use a background
| | 02:00 | color as well. It helps to sort of
identify it against this background.
| | 02:03 | I'm going to scroll down and find the
group selector twoColSmlSide #header,
| | 02:07 | twoColLargSide #header, oneCol #header.
| | 02:10 | So this is a group selector.
| | 02:12 | It's going to drive our header
regardless of which lap we are choosing.
| | 02:14 | I'm going to go ahead and add a
property to it and again we'll do
| | 02:18 | background, and this time I'm going
to set it to #999 which is another gray
| | 02:23 | but a little lighter.
| | 02:24 | Now we can see the header region
very clearly. Let's keep going.
| | 02:27 | I'm going to select my footer selector
and add the background property to it,
| | 02:32 | and we'll give it a background color of #8C7E62.
| | 02:41 | If I scroll down, you can see that our footer
now has sort of a tan background color.
| | 02:46 | Well, let's do one more.
| | 02:48 | Our sidebar really could use a
background color, and I think what we are
| | 02:52 | going to do is instead of giving a
background color to the sidebar itself,
| | 02:55 | we notice that the sidebar is full of
little regions, like this contents region
| | 02:59 | and a navigation region.
| | 03:01 | So we'll just go ahead and assign
background colors to those regions themselves.
| | 03:05 | Those regions are div tags, so we have a
very generic selector that we can do that with.
| | 03:10 | Right above our footer selector we'll
find the twoColSmlSide #sidebar div selector.
| | 03:15 | So we are targeting the divs inside the sidebar.
| | 03:18 | Once again I'm going to go ahead
and add a background property to it.
| | 03:21 | And the background of our sidebar div
is going to be the same color, #8C7E62.
| | 03:30 | Now if you are like a lot of people
you're probably wondering, hey, couldn't I
| | 03:33 | have just put that in
the Swatch panel somewhere?
| | 03:34 | Well, that will be great.
| | 03:36 | And if you ever talked to any of
the product managers from Adobe about
| | 03:38 | Dreamweaver, please ask
them to add the Swatch panel.
| | 03:40 | That would be really, really nice.
| | 03:42 | As it is you've just got to remember
what those are or write them down and
| | 03:45 | then type them by hand.
| | 03:47 | So hopefully one day we'll get a
Swatch panel to store our custom colors.
| | 03:51 | So if I save the file, and
preview that in my browser, we can more
| | 03:57 | clearly identify those specific regions of
content now based upon those background colors.
| | 04:02 | And in fact for some of the elements
like the footer, that's going to be the
| | 04:05 | design that we use by placing that
background color to make that element stand out.
| | 04:10 | In this case using background colors has
helped us really sort of identify those
| | 04:13 | regions, but it can also be
used to assist in navigation.
| | 04:16 | We can use it to direct the viewer to
important content and a lot of other tasks.
| | 04:20 | Although it's nice that we've made our
page a little easier to read and to find,
| | 04:23 | it's still lacking a lot
in terms of overall design.
| | 04:26 | So, next, we'll turn over attention to
properly using background images as a way
| | 04:30 | of continuing the evolution of our page design.
| | Collapse this transcript |
| Using background images| 00:01 |
Before we get into how to use
background graphics, I want to talk for just a
| | 00:04 |
minute about when to use them.
| | 00:06 |
Often my students will ask questions
about when the use of background images
| | 00:09 |
are appropriate or whether
background images should replace image tags
| | 00:13 |
altogether in their designs.
| | 00:14 |
Well, like many CSS techniques a lot of
it comes down to personal taste and goals.
| | 00:19 |
Understanding how background images
work and their limitations will go a long
| | 00:23 |
way to determining what role
they will play in your designs.
| | 00:26 |
First, I want to talk about their limitations.
| | 00:28 |
By default most browsers choose
not to print background graphics.
| | 00:32 |
This can actually work to your
advantage by allowing you to display graphics
| | 00:35 |
that you have no intention of printing.
| | 00:37 |
Users can set their browsers to print
background graphics, but few will choose
| | 00:41 |
to do so and there is really no
good way to force them to do this.
| | 00:44 |
There are some CSS gymnastic tricks
that you can do to print background
| | 00:47 |
images, but this requires slightly
more advanced skill set and it results in
| | 00:51 |
increased code weight.
| | 00:52 |
Another limitation, if you will, of
background images is that they don't have
| | 00:56 |
any properties normally associated
with website images, including alt text.
| | 01:00 |
This is a problem for any image that needs
to meet accessibility standards on your page.
| | 01:04 |
Although as we'll see later, image
replacement techniques can provide a
| | 01:08 |
separation of accessible
content in background images.
| | 01:11 |
The rule of thumb that I use is that
any image that is important to the content
| | 01:15 |
of the page deserves an image
tag and to be part of that content.
| | 01:19 |
Any image that is pure designed is
usually handled with a background graphic,
| | 01:23 |
and of course as always there
are exceptions to this rule.
| | 01:26 |
Now I want to demonstrate this approach by
showing you a finished version of our design.
| | 01:30 |
So here we have our index page, and
if I scroll through, you can see that
| | 01:33 |
it's very visually rich.
| | 01:34 |
There is a lot of
graphics going on in this file.
| | 01:36 |
So how many of these images are
actually image tags versus background images?
| | 01:40 |
Well, let's find out.
| | 01:41 |
I am going to go up to my browser and
I'm going to go to View > Page Style and
| | 01:46 |
I'm going to turn my style rendering off.
| | 01:47 |
Now if you are not using Firefox, there
are usually other ways of turning your
| | 01:51 |
style rendering off.
| | 01:52 |
But in Firefox it's very, very easy.
| | 01:54 |
So I'm just going to say No Style.
| | 01:55 |
And here is my page. So, wow!
| | 01:58 |
Look at all the graphics that went away.
| | 02:00 |
So we do have our images in the
sidebar that were there and we have the
| | 02:04 |
images that were as part of our main article
there, but all other images were purely decorative.
| | 02:09 |
So they are being used as background images.
| | 02:12 |
So I'm going to go ahead and turn the Page
Style back on so you can see that. Okay.
| | 02:15 |
Well, with that in mind let's open
up our first exercise in dealing with
| | 02:19 |
background graphics and start learning a
little bit more about their properties.
| | 02:22 |
So I'm going to jump back into
Dreamweaver, and I have the 06_02 file opened.
| | 02:28 |
Now one of the first things that
I'm going to do is go ahead and set a
| | 02:30 |
background image on the body tag.
| | 02:32 |
That's one of easiest ways to get a little
texture and some nice feeling in your page.
| | 02:37 |
By applying it to the body tag, the entire
background of the page will be this graphic.
| | 02:41 |
So I'm going to go to my CSS Styles
panel and I'm going to find my body selector
| | 02:45 |
and I can see that I have the
background property of #333.
| | 02:47 |
That's the background color that we set earlier.
| | 02:51 |
I'm going to double-click that though,
because I want to show you how to assign
| | 02:54 |
background images using the
CSS Rule Definition dialog box.
| | 02:57 |
I am going to click on Background and
you will notice that just underneath where
| | 03:01 |
we could set the Background-color we
have a pull-down menu for Background-image.
| | 03:05 |
We can browse for this as well.
| | 03:06 |
So I'm going to choose Browse and I'm
going to go in the 06_02 folder, _images,
| | 03:12 |
and I'm going to find this background.jpg.
| | 03:15 |
You can see this is a seamlessly tiled pattern.
| | 03:18 |
So I'm going to click OK, and click OK again.
| | 03:21 |
Now that sort of textured concrete look
comes in all throughout the body tag. Very nice.
| | 03:28 |
Note that we didn't have to tell it to tile.
| | 03:30 |
It did that automatically, and
that's something that we going to turn our
| | 03:32 |
attention to a little bit more later on.
| | 03:34 |
Now I want to go find our header selector.
| | 03:37 |
So I'm going to scroll down and find
this twoColSmlSide #header group selector,
| | 03:41 |
and once again I'm going to
go ahead and double-click that.
| | 03:44 |
Now if I go into background, I can set a
Background-image for this and again I'm
| | 03:48 |
going to browse and I'm going to go
in that same _images directory, and I'm
| | 03:53 |
going to scroll down to
find my header_skyline.jpg.
| | 03:59 |
I'm going to click OK, click OK again.
| | 04:01 |
Now notice that the size of this
background graphic hid the background color.
| | 04:06 |
We don't have to remove the background color.
| | 04:08 |
The background image will show up on top of it.
| | 04:10 |
If there is extra room, we'll see
the background image and the color.
| | 04:14 |
But in this case, the background image
is taking up the entire element space.
| | 04:18 |
Now let's do one more.
| | 04:19 |
I'm going to scroll down and
find #mainContent .article h1.
| | 04:26 |
Currently, there are no
background properties set for this at all.
| | 04:29 |
So I'm going to double-click
that, open that up in the CSS Rule
| | 04:32 |
Definition dialog box, and for
Background I'm again going to browse for
| | 04:35 |
the Background-image.
| | 04:36 |
I am going to go to the same directory,
the _images directory, and I'm going to
| | 04:41 |
scroll down until I find the skull_icon.gif.
| | 04:46 |
So I'm going to highlight that,
click OK, click OK. Oh wow!
| | 04:53 |
That worked, but maybe wasn't
exactly what you were expecting.
| | 04:56 |
So you can see that the default behavior for
the background images is to have them tiled.
| | 05:00 |
While this can be very advantageous
when creating background patterns and
| | 05:04 |
similar items like we see in our body tag,
| | 05:06 |
it's rare that you are going to
want this behavior all the time.
| | 05:09 |
So next up, we'll examine
controlling tiling and making sure that your
| | 05:12 |
background image is
repeating the way you need it to.
| | 05:16 |
| | Collapse this transcript |
| Controlling background image tiling| 00:00 | By default background images tile
themselves as many times as space
| | 00:04 | allows within the element.
| | 00:06 | More often than not, you won't need the
image to tile or you may only need it to
| | 00:09 | tile in one direction.
| | 00:11 | Controlling tiling is done through
the Background-repeat property, of which
| | 00:15 | there are four specific values, repeat,
repeat-x, repeat-y, and no-repeat.
| | 00:21 | As we have seen repeat is the default value.
| | 00:24 | So if a tiled image is the desired
result, the Background-repeat property
| | 00:28 | doesn't really need to be specified.
| | 00:30 | Repeat-x and repeat-y allows us to
repeat an image only along one axis.
| | 00:36 | This is incredibly useful when creating
columns, drop shadows, or custom border
| | 00:40 | effects on elements.
| | 00:41 | No-repeat instructs the browser to
display the image only once with no tiling.
| | 00:47 | So we have the 06_03 file open and you
may notice a slight visual change here
| | 00:52 | from where we ended up in our last exercise.
| | 00:54 | It appears as if the background graphic
that we had applied to the body tag is gone.
| | 00:59 | It's not gone.
| | 01:00 | We've just moved it.
| | 01:02 | Instead of applying it to the body
tag, we've applied it to the HTML tag.
| | 01:06 | The HTML tag is actually the body tag's
parent element and you can apply styling to it.
| | 01:12 | Dreamweaver has trouble rendering that.
| | 01:14 | So if I turn on Live view and let the
WebKit rendering engine take over,
| | 01:18 | you can see that it shows up just fine and
it will show up just fine in our browsers too.
| | 01:22 | So why?
| | 01:23 | What's the point of moving it to the
HTML tag when having it on the body
| | 01:27 | tag worked just fine?
| | 01:29 | Well, let me preview this page in the
browser and talk a little bit about the
| | 01:32 | technique that we are going to do here.
| | 01:34 | Currently, this seamlessly tiled
background is on the HTML element.
| | 01:39 | That leaves us the body tag as
another parent element that we could apply a
| | 01:42 | background graphic to.
| | 01:44 | In this case, we are going to combine two
background graphics for our finished effect.
| | 01:48 | Currently, in our header we have this
sort of skyline graphic that we would like
| | 01:52 | to have at the top of our file.
| | 01:54 | Well, the width of our header is being
defined by our container and you will
| | 01:56 | notice that it does not stretch all the way
over to the right and left sides of the page.
| | 02:01 | Now I have two options here.
| | 02:03 | I could take the header outside of
my normal structure and then move the
| | 02:07 | container element down, but I
really don't want to do that.
| | 02:10 | It would damage the
structual integrity of my file.
| | 02:12 | So, the second choice is to have a
repeating background graphic repeating only
| | 02:17 | along the X axis and if I apply
that to the body tag, now I'll have two
| | 02:21 | background graphics for my page.
| | 02:23 | One located at the top of the page, and one
that seamlessly tiles down the rest of the page.
| | 02:27 | By combining these we are going to
create a really interesting effect.
| | 02:31 | I am going to close my browser
and go back into Dreamweaver.
| | 02:34 | So the first thing I want to do is get
rid of that skyline graphic on the header.
| | 02:38 | So I'm going to go to my CSS Styles
panel and I'm going to find my twoColSmlSide
| | 02:44 | #header group selector and I can
see there is my background graphic.
| | 02:48 | I'm going to go ahead and choose
that background property and click the
| | 02:51 | Trash Can to delete it.
| | 02:52 | Once again, be very careful with this.
| | 02:54 | You want to make sure you click on
the property first, before you click the
| | 02:56 | Trash Can. Otherwise you might end
up deleting the entire rule. Okay.
| | 03:00 | Now I'm going to go back to the body tag
and this time I'm going to double-click that.
| | 03:04 | This is going to open this up in the CSS
Rule Definition dialog box and it gives
| | 03:07 | us an opportunity to look at
the Background-repeat property.
| | 03:11 | So the first thing I'm going to do is
browse for a background image in the
| | 03:15 | 06_03, _images directory, and I want
to go down to the header_skyline.png.
| | 03:25 | Now the reason I'm using a .png here is
because this has transparency applied to it
| | 03:29 | and I'm using the 24 bit
transparent PNG file to create a really nice
| | 03:33 | interactive effect with the background.
| | 03:35 | So I'm going to go ahead and click OK.
| | 03:38 | Since I only want that to stretch
across the top of the page, I'm going to go
| | 03:41 | ahead and do a Background-repeat, repeat-x.
| | 03:45 | So that will tile it along the X
axis, but not along the Y axis.
| | 03:48 | If I click Apply, you can see it showing up.
| | 03:51 | So I'm going to go ahead and click OK, do
a Save All, and preview that in my browser.
| | 03:56 | Now you can see our skyline is
tiling all the way across the top of our
| | 04:00 | page regardless of where the header
element ends and we get this really
| | 04:04 | nice transition effect.
| | 04:06 | We get a glow around the skyline
that's blending in with that background and
| | 04:09 | that is our PNG's Alpha transparency at work.
| | 04:12 | Now some of you might be
saying, well, wait a minute.
| | 04:13 | I read that doesn't work in Internet Explorer.
| | 04:15 | And you are 100% right.
| | 04:17 | So earlier versions of Internet
Explorer did not support PNG's Alpha
| | 04:21 | transparency and later when we
discussed deployment of styles we'll talk about
| | 04:25 | how to deal with that.
| | 04:27 | So I'm going to go ahead and close that
browser window, come back in and let's
| | 04:31 | add one more repeat property
on another one of our elements.
| | 04:33 | What we are going to do is scroll down
and find our #mainContent .article h1
| | 04:39 | because we need to take care of this skull
which is repeating over and over and over again.
| | 04:43 | Now just like any other property you
can set Background-repeat directly here
| | 04:46 | from the CSS Styles panel.
| | 04:47 | So I'm going to add the property and
I'm going to type in Background-repeat.
| | 04:54 | Now feel free to grab that from the
pull-down menu, if you don't feel like
| | 04:56 | typing it in, but notice that there is
a dash between background and repeat.
| | 05:00 | Now if I grab the pull-down menu,
I can see all of those possible values.
| | 05:03 | We don't really want to
repeat it along any of the axes.
| | 05:06 | So I'm going to choose no-repeat.
| | 05:07 | When I do a Save All and
preview that in my browser,
| | 05:11 | you can see that we only see
one of the skull icons now.
| | 05:13 | It's not positioned in the
right place, but that's okay.
| | 05:16 | But at least now we only see one
and we can work on positioning.
| | 05:19 | So it's not positioned correctly but
at least it's no longer repeating all
| | 05:22 | across the background of our header.
| | 05:24 | Now that we have our background
graphics repeating correctly, it's time to
| | 05:27 | explore positioning so that we can gain
full control over how background images
| | 05:30 | interact with other elements.
| | Collapse this transcript |
| Positioning background images| 00:01 |
When you assign a background image to
an element the image is positioned with
| | 00:04 |
this top left-hand corner aligned with
the top left-hand corner of the element.
| | 00:08 |
Although this is the default, you have
a lot of control over exactly how and
| | 00:11 |
|
|
