IntroductionWelcome| 00:03 | Hi! I am Joe Lowery.
| | 00:05 | Navigation is a critical
component of almost every web site.
| | 00:10 | Whether your nav menus fly out
or just sit there looking pretty,
| | 00:15 | they need to guide your site visitors to what
they're looking for quickly and easily.
| | 00:20 | This course starts by taking a look at
the current trends in web site navigation,
| | 00:25 | so you can get a better idea of what's possible.
| | 00:28 | Then we'll explore Dreamweaver's navigation
solution built with their own Spry framework.
| | 00:35 | This course will also cover a variety
of navigation menu techniques and go
| | 00:39 | over the step-by-step instruction for crafting
both horizontal and vertical navigation bars.
| | 00:46 | Finally, we'll get into some leading-
edge navigation techniques, including
| | 00:51 | animated image menus, as well as
navigation built with HTML5 and CSS3.
| | 00:58 | I am ready to help you
realize your site navigation goals.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium member of the
lynda.com Online Training Library, or if
| | 00:04 | you're watching this tutorial on the
DVD-ROM, you have access to the exercise
| | 00:09 | files used throughout this title.
| | 00:11 | Naturally, the information in this
course is ultimately intended to be applied
| | 00:15 | to your own web pages;
| | 00:17 | however, you might find it helpful to
work with the supplied exercise files to
| | 00:21 | practice the steps safely and
without having to create your own examples.
| | 00:26 | To begin using the files from the site,
download them, extract them, and then
| | 00:31 | store those files in a
convenient location, such as your desktop.
| | 00:35 | The Exercise Files folder
is organized by chapter,
| | 00:39 | and in every chapter it's broken down
into the various videos that you'll see.
| | 00:45 | Within the video chapters, there are a
series of files, typically assets, css,
| | 00:52 | images, and so forth, as well
as a practice file to work with.
| | 00:56 | In most files you'll also find a final folder,
| | 01:00 | and that contains the files showing the
completed lesson, which you can open up
| | 01:05 | and take a look at and explore at your leisure.
| | 01:08 | If you are a Monthly subscriber or
Annual subscriber to lynda.com, you don't
| | 01:12 | have access to the exercise files, but
you can definitely follow along with
| | 01:16 | your own assets.
| | Collapse this transcript |
|
|
1. Trends in Navigation DesignUsing icons in navigation | 00:00 | The simplest form of CSS navigation is
to take an unordered list of words or
| | 00:05 | phrases and convert it to clickable buttons.
| | 00:08 | To make it easier for site visitors
to understand and remember navigation
| | 00:12 | elements, many designers are integrating
small images, or icons, into their nav bars.
| | 00:18 | Let me show you a few examples.
| | 00:20 | Here is the Narwhal Company, and as
you can see in their navigation up top,
| | 00:25 | they have very simple icons hand-drawn which
light up and highlight when you roll over them.
| | 00:34 | And if we go to a specific one, like
Passport here, the icon stays lit up in that
| | 00:42 | color, showing the selected page.
| | 00:45 | Another one is from custom TORONTO,
and here's some side navigation.
| | 00:50 | Very clean, informative icons
showing the various categories.
| | 00:54 | When you roll over it, a highlight
outlines the icons as well as the text and
| | 01:00 | shows the flyout menu in a bright purple color.
| | 01:04 | If you go to a specific page, you can
see that they've reversed that concept to
| | 01:08 | show the current page.
| | 01:10 | Another approach can be
seen on the Carsonified site.
| | 01:13 | Carsonified is a design firm, and as we
roll over the various categories up top,
| | 01:19 | you can see the navigation icons
appear, symbolizing each project.
| | 01:24 | And let's take a look at the
very first one here, Values.
| | 01:28 | And again, they're choosing to reverse
the colors but keep the icon showing, very
| | 01:34 | clearly designating that
this is the current page.
| | 01:37 | Finally, here's a template
from a company called Bogawat.
| | 01:41 | And they have kind of a different
approach to this. Rather than always having the
| | 01:45 | text visible and then
showing the icons on roll-over,
| | 01:49 | they do the reverse.
| | 01:50 | So they have icons and you can go to
a certain page and click on it and
| | 01:55 | then you see the text.
| | 01:57 | They also are using tooltips, as you can
see, using the title tag, so that you don't
| | 02:02 | have to click on it in order to see what it is.
| | 02:05 | All of these icon navigation
techniques are very straightforward to implement
| | 02:09 | and rely on the background image
technique covered later in this course.
| | Collapse this transcript |
| Understanding 3D nav bars | 00:00 | When you want your navigation to really
pop off the page, what better approach
| | 00:03 | than to apply a 3D look and feel?
| | 00:06 | I've seen numerous examples where one or
more elements of a web page appear to be
| | 00:10 | in front of the other page areas.
| | 00:13 | Let's take a look at a number of sites
that incorporate 3D design techniques
| | 00:17 | into their navigation.
| | 00:18 | The first one is from a
company called Mystery Tin.
| | 00:22 | Here on the vertical navigation over
on the left, you can see that the ribbon
| | 00:29 | appears to wrap around the white
rectangle that contains the navigation.
| | 00:34 | And as we scroll down and hover over
the various ones, that pattern is followed
| | 00:38 | with a different-colored ribbon
that's also a little bit shorter,
| | 00:43 | ao it indicates places that you could go
but not necessarily places that you're at.
| | 00:48 | And if we choose one, just to see what
happens when we select the page, you can
| | 00:54 | see that the larger green arrow again
is being applied to show that this is the
| | 00:59 | current page and then everything
else is back to the shorter blue arrow,
| | 01:04 | but always with the appearance
that it is three dimensional.
| | 01:08 | This simple well-executed concept
uses a sprite image to display the
| | 01:12 | two different arrows.
| | 01:13 | We'll cover sprites in the
Navigation Techniques chapter.
| | 01:18 | Now, let's take a look at another
site that uses a similar 3D wrapping
| | 01:21 | technique but takes it a step further.
| | 01:24 | Here you can see the ribbon
wrapping around the top dark-brown element,
| | 01:29 | giving that 3D appearance.
| | 01:31 | And the text itself seems to
be pressed into the ribbon.
| | 01:35 | When you interact with the menus, hovering
over them, they take on a highlight color.
| | 01:39 | While this page is done
with simple image swapping,
| | 01:42 | this could now be accomplished with
enhanced CSS3 effects, like the one shown in the
| | 01:47 | chapter on cutting-edge navigation.
| | 01:50 | Finally, let's take a look at a menu that
adds a touch of movement to the 3D approach.
| | 01:57 | Here down a little bit below you
can see the tabs definitely have the 3D
| | 02:02 | appearance working for them.
| | 02:03 | And when you hover over any of
them, they move up just a tad.
| | 02:08 | This could be accomplished with CSS3
transformations, which is also covered in
| | 02:13 | the chapter on cutting-edge navigation.
| | 02:16 | All of these 3D designs are
accomplished without resorting to using the z-index
| | 02:20 | property in CSS,
although that is also an option.
| | Collapse this transcript |
| Understanding explanatory navigation| 00:00 | Rather then use symbols or icons to
make their navigation buttons more
| | 00:03 | meaningful, some designers take a more
direct approach and say 'more is more'.
| | 00:08 | Here's a number of web sites that
incorporate an explanatory line of text to make
| | 00:12 | their intentions crystal clear.
| | 00:15 | Let's start by taking a look at one
of the more extreme examples in the
| | 00:18 | category from Raka Creative.
| | 00:20 | As you can see, each of their
navigation items here goes into great detail,
| | 00:24 | whether it's elaborating on what they're
thinking under Studio, or really listing
| | 00:30 | out their services, or their client list
under Work, and then even giving specific
| | 00:36 | directions under Contact.
| | 00:38 | The entire navigation takes up a good
fifth of the page, which is pretty extreme.
| | 00:43 | Now they do not carry this approach
over to other areas of their site, such as
| | 00:48 | the Studio area. You can see that the
navigation then breaks down into subitems
| | 00:54 | and then resorts to icons showing
the Services, Work, and Contact areas.
| | 01:01 | Here's a more basic take on the concept
where a single line of additional text
| | 01:05 | helps to flesh out the keyword heading.
| | 01:08 | This same technique is applied a little bit
more elaborately to the link for the sites blog.
| | 01:13 | In this case, this navigation
explanation is visible throughout the entire site.
| | 01:21 | At first glance, this site, Corporate
Risk Watch, uses a similar additional
| | 01:26 | single line approach, but watch what
happens when you roll over any of the nav items.
| | 01:31 | Here the navigation literally takes
over the page, forcing you to take what
| | 01:35 | they've written seriously. While the
approach may be too much for some, it
| | 01:40 | definitely gets the message across.
| | 01:42 | Each of these sites are looking for a
way to reach their audiences quickly and
| | 01:45 | effectively, definitely another
strategy to keep on your designers palette.
| | Collapse this transcript |
| Creating animated navigation | 00:00 | Browser JavaScript engines
keep getting faster and faster.
| | 00:03 | One of the ramifications of this
improvement is that an increasing number of
| | 00:07 | designers are integrating JavaScript
into their navigation in order to integrate
| | 00:12 | a smooth animation. Let's take a look at
some cool examples. This first one from
| | 00:18 | the Celtic Football Club,
| | 00:20 | the navigation is a little bit
further down the page and actually takes the
| | 00:23 | shape of these for somewhat Polaroid-
looking snapshots that you see here, and
| | 00:28 | that might be enough for this site,
but look what happens when I roll over.
| | 00:32 | They move up and an additional
scribble is attached to the text there.
| | 00:37 | Now the text changes according to what
the navigation item is. As I move from
| | 00:42 | side to side, you'll notice that not
only does it ease up, but the previous
| | 00:47 | navigation item bounces down.
| | 00:51 | On this next page, Dragon Interactive,
| | 00:53 | when I roll over the navigation I
get a very smooth fade-up here.
| | 00:58 | Now this is not just the swapping of images.
| | 01:01 | This is actually a JavaScript
routine that is fading in the opacity.
| | 01:06 | You'll notice that the colors are
different. On pages that are not the current
| | 01:12 | one we have a nice blue, but on the
existing page like the homepage here, there
| | 01:17 | is a really bright yellow.
| | 01:19 | This different image that we're seeing
is actually a different part of a sprite
| | 01:24 | that's faded in for the current page.
| | 01:25 | This same technique is applied in a
subtler way to their logo over in the upper-left.
| | 01:32 | This next example, you're going to
have to take your eyes off the kind of
| | 01:35 | compelling Flash animation up top to
you go and look at the navigation that we
| | 01:39 | see down below here.
| | 01:40 | Now the current page is indicated by
a light blue bar that's hovering above
| | 01:46 | it, but as I move from item to item the
blue bar slides along following me, and
| | 01:52 | if I move my mouse off the navigation,
it goes back to the current page, and
| | 01:56 | then when I move to another page it
slides all the way over very quickly to
| | 02:01 | that, and actually even have a
little bit of a bounce to it as well.
| | 02:05 | Finally, here is the example of
animated graphics without a surrounding site,
| | 02:09 | done by designers Aloha Tech Support.
| | 02:11 | This combines big images with
very smooth sliding reveals.
| | 02:16 | So if I move over abstract here, urban,
which was previously the currently
| | 02:21 | viewed image, shows up, and then as I
move along, each image is revealed in turn.
| | 02:27 | And when I move off the menus, they all
slide back to their original position.
| | 02:31 | There's a real nice sense of movement here.
As you move more quickly, you can see
| | 02:36 | some of the nice shifting that goes on
that gives a really solid feel to this menu.
| | 02:42 | All of these examples used jQuery, a
JavaScript framework or library, to
| | 02:47 | achieve their effects.
| | 02:48 | We'll dive deeper into just how
jQuery is used to animate navigation in the
| | 02:53 | "Cutting-Edge Navigation" chapter.
| | Collapse this transcript |
|
|
2. Spry NavigationInserting Spry horizontal menus| 00:00 | A number of years ago Adobe caught
JavaScript framework fever and decided to
| | 00:04 | release their own library of
functions which they called Spry.
| | 00:08 | A good number of Spry widgets were incorporated
into Dreamweaver, including the Spry menu bar.
| | 00:13 | The Spry menu bar is extremely easy to
use and totally integrated into Dreamweaver.
| | 00:18 | As such, it's a solid on-ramp to exploring
the world of CSS navigation in Dreamweaver.
| | 00:25 | In this video, we'll take a look at
implementing a horizontal navigation bar with
| | 00:29 | the original Spry menu bar widget.
| | 00:31 | In another video, "Advanced Spry Menu
Techniques", I'll show you how to work
| | 00:35 | with the 2.0 version.
| | 00:37 | So I will start with the index.html file
open from the Chapter 2 exercise files.
| | 00:43 | As you can see, there is no
navigation currently here.
| | 00:47 | Let's go into Split view, and you can see
I have my div already set up with an ID
| | 00:52 | for nav bar where I want that navigation to go.
| | 00:56 | So let's go over to the Insert panel
and from the Category list choose Spry and
| | 01:05 | then scroll down until you see
Spry Menu Bar and click that.
| | 01:09 | Dreamweaver will ask you if you'd
like a horizontal or vertical menu.
| | 01:13 | In this case we want horizontal, so
with that selected I'll choose OK, and the
| | 01:19 | sample menu is put in.
| | 01:21 | Let me pull back the Insert bar, so you
could take a look at it over here in Live
| | 01:25 | view. And as you can see it's a
little vanilla looking, but very workable.
| | 01:34 | When I scroll over it, I get subitems.
| | 01:36 | If I move to a menu item that does not
have subitems, the menu item itself just
| | 01:42 | highlights and nothing drops down.
| | 01:44 | You can also have multiple levels of subitems.
| | 01:48 | So if I go over Item 3.1 here, you
can see that there are sub-subitems.
| | 01:53 | Now the great thing about the Spry
menu bar is as I said, it's totally
| | 01:57 | integrated into Dreamweaver.
| | 01:59 | I am going to drop out of Live view and
just go into Design view, so you can see
| | 02:03 | some of the integration.
| | 02:04 | If I go ahead and open up the Properties
Inspector, when I have my Spry Menu Bar
| | 02:11 | tab selected, I get a special Property
Inspector here and this makes it really
| | 02:16 | easy to work with the Spry menu bar.
| | 02:19 | Each of the items that we see here can
be selected, and when they're selected, if
| | 02:23 | there is any subitems,
| | 02:24 | they show up here, and if there is any sub-
subitems, they show up in this third column.
| | 02:29 | In each circumstance, when you have an
item selected, the text label of that item
| | 02:34 | shows up, which you can easily modify
here, and you can also change the link, give
| | 02:39 | it a title, even specify a target.
| | 02:41 | Now the first thing we are going to do
is save this page and when you do save
| | 02:47 | it, Dreamweaver displays the Copy
Dependent Files dialog box that shows that
| | 02:52 | there are a number of files which are
being inserted into your site and they're
| | 02:57 | all being put into the SpryAssets folder.
| | 03:00 | When we click on OK and open up the
Files panel, you will see that in the site
| | 03:06 | that I have defined for the exercise
files there is in fact now a new SpryAssets,
| | 03:12 | complete with some JavaScript, GIFs,
and a little bit further on--some CSS.
| | 03:19 | Those files will of course have to be
uploaded when you upload the site to push it live.
| | 03:25 | Let's first start out by customizing the labels.
| | 03:29 | Now, you have a number of
ways that you can do that.
| | 03:31 | You can either do it right from
Design view by selecting the label here
| | 03:36 | and changing that Item 1 to Home, and I'll do
Item 2 here as About and Item 3 as Process.
| | 03:49 | Now you can also, if I select the
Menu Bar tab, accomplish the same thing
| | 03:55 | through the Property Inspector. So if I
choose Item 4 and Item 4 I am going to
| | 03:59 | make Contact--I will change the text of
it here--and there you see that the label
| | 04:06 | was changed, and of course you
can also always do it in Code view.
| | 04:10 | Now, you can just as easily change the subitems.
| | 04:12 | Now my first item here, Home, doesn't
really have any subitems, so I am going to go
| | 04:17 | ahead and remove each of those by
going to the Property Inspector and
| | 04:21 | highlighting the item you want to
remove and then clicking the Remove Menu Item
| | 04:26 | button, or the Minus sign there.
| | 04:28 | With every click, it removes
another one, and there is a third one.
| | 04:33 | Now, there are also subitems under
Process, and we're going to go ahead and
| | 04:37 | remove those right now.
| | 04:42 | So I'll remove the 3.3, 3.2, and notice
that there you have Item 3.1. Watch what
| | 04:48 | happens when I go to remove that one.
| | 04:51 | Dreamweaver will display an alert,
informing you that this will also remove all
| | 04:56 | of the children items, and asking if that's okay.
| | 04:59 | In this case it is.
| | 05:01 | So now we do want to add some submenu items.
| | 05:04 | In this case, I am going to add
some to that same menu process.
| | 05:07 | I could have just changed the name of them,
but I wanted to show you the technique
| | 05:11 | used for adding subitem menus.
| | 05:13 | So, I will go ahead and select the Spry
Menu Bar tab and with Process selected,
| | 05:21 | click on the Add menu Item in the
second column, which will give me the submenu
| | 05:25 | items, and it will first come in as an
untitled item, and I am going to change
| | 05:31 | that to 'Our Oil' and then press Tab.
And let's add another one underneath that,
| | 05:38 | and we'll change that to 'Company' and
press Tab, and let's add a third item.
| | 05:48 | And instead of changing it through here,
you can also go in and change it in Design
| | 05:52 | view, so I am going to make this one
'The Land' and then just click outside of
| | 05:57 | that to cement that.
| | 06:00 | If you decide that this is not in the
proper order--let's say that we want to
| | 06:03 | put Company last here--
| | 06:05 | I'll go ahead and select the Spry menu
bar again, choose Company, and press the
| | 06:10 | Move Item Down widget,
which will then shift it down.
| | 06:15 | Now one of the more interesting things
about this is we're of course building a
| | 06:19 | navigation bar using an unordered list,
and you can see over here in the code
| | 06:25 | that I do have a list tag and
each of the list items is shown.
| | 06:28 | But another way to see this is if you go
to the Spry menu bar Property Inspector
| | 06:33 | and choose Turn Styles Off.
| | 06:35 | Now it's a little hard to see because
of the way that the links are styled
| | 06:40 | here, but each of these, as you can see from the
bullets, is an unordered list or bulleted item.
| | 06:47 | Let's go back and turn those styles back on.
| | 06:50 | So go ahead and save your page again.
| | 06:53 | You'll find that setting up a Spry
horizontal menu is dead simple, and in the
| | 06:57 | "Styling Spry Menus" video, I'll show you
how to change the look and feel so that
| | 07:02 | it will integrate into your site.
| | Collapse this transcript |
| Styling Spry menus| 00:00 | Inserting a Spry menu and configuring
it to get the proper text in subitems is
| | 00:04 | very straightforward. Styling the CSS
so that the menu works with your site
| | 00:09 | takes a little bit more savvy, but once
you get the hang of the basic techniques
| | 00:13 | you'll be surprised at how
flexible Spry menus can be.
| | 00:16 | So I have my index.html file open from
the Chapter 2 exercise files, and we are
| | 00:22 | going to start by getting our
background colors to blend in more.
| | 00:27 | I'm in Live view to get the best
representation, and as I hover over the items,
| | 00:32 | you see that we now have kind of a
bright blue as the default color for the
| | 00:36 | background for both the main navigation
items and the subitems. And we want to
| | 00:41 | change that so that both of the
standard background that we see here blends in,
| | 00:46 | the hover states blend in, and also
the subitems work better with the site.
| | 00:50 | So let's open up our CSS Styles panel,
and I am going to go ahead and select the
| | 00:55 | Home navigation item, just to show me
which CSS styles that are related to that.
| | 01:00 | And first one we want to change is
ul.MenuBarHorizontal a, or anchor, and that
| | 01:07 | sets the default colors for the
background, and here you can see it's a light
| | 01:11 | gray, the triple E of the hexadecimal value.
| | 01:15 | And we want it to blend in.
| | 01:16 | So I am going to go ahead and just
open up the color picker and then sample
| | 01:20 | the header background.
| | 01:22 | Now we also want to change these hover
states, and one of the things I found
| | 01:26 | from working with Spry menus is that
sometimes it's actually better to go ahead
| | 01:31 | and switch over to the All mode rather
than the Current and collapse all the
| | 01:36 | other CSS rules that you may have open,
but leave open the SprymenuBarHorizontal,
| | 01:42 | and then you can actually page down each
of the items in turn and locate various
| | 01:48 | ones that are dealing with the hover states.
| | 01:50 | There are a couple of those.
| | 01:52 | So we'll actually go down to
ul.MenuBarHorizontal a:hover, and it also covers the focus state.
| | 02:00 | So we're going to change this
background to a dark green background, and I'll
| | 02:05 | open up the color picker, and let's
just choose this dark green that's here in
| | 02:09 | this olive, and we need to do the same
thing for the rule below it as well.
| | 02:15 | So we'll do that, and now
let's check our subitems.
| | 02:19 | We can see that the top items look really
good in that new color and so do our subitems.
| | 02:24 | Okay. Next, let's bring the text more into
style alignment with the rest of the site
| | 02:31 | by making the top-level navigation
uppercase, changing the font family, and then
| | 02:36 | we'll also modify the subnavigation.
| | 02:39 | So what controls the top-level
navigation look and feel is the
| | 02:42 | ul.MenuBarHorizontal li, or list item.
| | 02:46 | So I am actually going to open up the
CSS Rule Definition dialog box by clicking
| | 02:52 | Edit Rule there, go to the Type
category, and we'll use the Text-transform
| | 02:57 | property and set that all to Uppercase,
and we'll also change the Font-family to
| | 03:04 | Trebuchet MS, Arial, Helvetica, sans-serif.
| | 03:08 | Now I'll click OK and you can
see an instant change there.
| | 03:12 | Now when I hover over About, our
subitems are looking a little bit too much like
| | 03:16 | the main items, so I want those to
stand out and be a little bit different.
| | 03:20 | So the rule for changing these,
you see here where it says ul-li,
| | 03:24 | that's just changing the top level,
but it also changes any sublevel, unless you
| | 03:29 | specify something for the
sublevel itself, which is here.
| | 03:33 | So we have ul.MenuBarHorizontal ul and
then that pointing to that list item.
| | 03:40 | Let's go ahead and just add the
Text-transform property directly in
| | 03:43 | the Properties pane.
| | 03:47 | If you can't remember the spelling of
it, you can always go into the CSS Rule
| | 03:51 | Definition dialog box by clicking
Edit Rule. And once we've typed in
| | 03:55 | Text-transform, we can choose from
the list, and we'll choose capitalize.
| | 04:01 | So now our subitems are already looking a
little bit different, but that's not quite enough.
| | 04:06 | We really want them to
stand out a little bit more,
| | 04:09 | so let's add a bottom border
and we'll also separate them more.
| | 04:13 | So we are going to go to where the
anchor tag is defined, ul.MenuBarHorizontal a,
| | 04:21 | and let's add a bottom border.
| | 04:23 | I am going to go ahead and just type
this directly in. And we'll make it solid,
| | 04:32 | kind of thick, 2 pixels, and we'll also
pick up the same color that was being used
| | 04:37 | as the darker color, which I
have made a note of is 759B46.
| | 04:47 | Okay, so that gives us a green color here.
| | 04:50 | That's actually this green that we see here.
| | 04:54 | So now you'll see that I do have
some additional borders showing up here.
| | 04:58 | I'm not sure that I want that, so
let's go ahead to ul.MenuBarHorizontal ul.
| | 05:03 | You can see that border there, which is
kind of like a gray border, that's showing
| | 05:07 | up, and that's what that double line is.
| | 05:09 | Let's go ahead and just disable that,
and then when we take a look at it, we have
| | 05:13 | our light-green menu bar showing up there.
| | 05:15 | Now, there is a bit of a overhang on
the subnavigation items you can see
| | 05:19 | right in that corner.
| | 05:21 | We can adjust the width to take care of that.
| | 05:24 | You'll remember that the list items of
the submenu are controlled in this CSS
| | 05:30 | rule, ul.MenuBarHorizontal ul li,
and here's the width at 8.2. So, let's drop
| | 05:37 | that down to just 8 ems,
and now it's lining up beautifully.
| | 05:44 | So if we save this page and preview
it in a browser--let's use Firefox--
| | 05:51 | we'll make sure that we save all of our pages.
| | 05:53 | The reason this alert is coming up is
because the SpryMenuBarHorizontal.css was
| | 05:59 | not saved, so we'll go ahead and save
that now, and now here's our subitems.
| | 06:06 | Let's go to the About page, and you can see
our navigation is in place here and the
| | 06:11 | Process page and even the
Contact page and then back to Home.
| | 06:16 | As you can see, Spry menu pages are very
easy to modify to whatever degree necessary.
| | 06:21 | Best of all, we've really just scratched
the surface of how much you can do to
| | 06:25 | customize the look and feel
of your Spry horizontal menus.
| | Collapse this transcript |
| Adding Spry vertical menus| 00:00 | Spry vertical menus work exactly the
same as their horizontal siblings, except
| | 00:05 | they're on their side.
| | 00:06 | So let's take a look at a design
where Spry vertical menus fit the bill
| | 00:10 | perfectly, and I'll show you some
more styling techniques along the way.
| | 00:15 | First, we'll take a look at the
finished product. So here you see my navigation
| | 00:19 | over on the left--I'll move down so you see
all five items. And as I roll over each
| | 00:24 | of them, the text changes color, but
also the background graphic changes color.
| | 00:29 | This is using a method that
involves sprites, which is covered in the
| | 00:32 | "Navigation Techniques" chapter.
| | 00:34 | Now when I move up to my menu item
that has a submenu, as indicated by the
| | 00:39 | ellipsis, you can see the submenu up
here is to the right with a different
| | 00:43 | background, no background graphics,
and the same orange hover color. Okay.
| | 00:49 | So that's where we're going. Let's get started.
| | 00:51 | I am going to go ahead and close out
this menu, and here as our starting point
| | 00:55 | is the mission.htm file, which is located
in the under Exercise File/Chapter 2/02_03.
| | 01:00 | Now you can see that I don't have any
navigation here over on the left, and if I
| | 01:06 | go into Split View, in fact
I have an open nav tag.
| | 01:10 | Now this is an HTML 5 tag, which is
using the new nav tag, and I wanted to do
| | 01:15 | that in order to show you that Spry
menus work just as well on HTML5 pages as
| | 01:20 | on previous versions.
| | 01:22 | All right, our cursor is
placed just were we want it to be.
| | 01:24 | Let's go over to the Insert
panel and in the Spry category,
| | 01:29 | we will select Spry Menu Bar.
| | 01:33 | Dreamweaver asked if we'd like to have
either a horizontal or vertical menu.
| | 01:37 | In this case, we want a vertical,
so I'll choose that and click OK.
| | 01:42 | And there is our placeholder menu.
| | 01:44 | Let me open up the Properties
Inspector, and you can see, with the Spry Menu
| | 01:48 | Bar tab selected, I have a Custom
Property Inspector that shows off all the
| | 01:53 | various items and submenus.
| | 01:55 | So our first task is to go ahead and
customize the labels of the various menus
| | 02:01 | and make sure they're
working exactly right for us.
| | 02:03 | Now, I can do that right from the
Property Inspector. So here is my first item,
| | 02:07 | which I'm going to change from
Item 1 to Tours and add that ellipsis.
| | 02:12 | Now you can go ahead and
choose one after another.
| | 02:17 | I'll do the second one this way, Mission,
and you can also go ahead and select
| | 02:23 | it, if you're in Design view, right from
the screen there, and we'll change Item 3
| | 02:28 | to Contact, and Item 4 will be Resources.
And I'm going to need to add another item, Explores.
| | 02:38 | So in order to do that, the easiest way
is to go up and click on the Spry menu
| | 02:42 | bar, select Resources down there, and
then click Add menu item, and that will
| | 02:48 | come in as untitled item which I can
change right here in the text field. Okay.
| | 02:56 | Obviously, you would go ahead and
set up all your various links here.
| | 02:59 | I'm not going to takes the time to do
that, but you can keep the hash marks for
| | 03:03 | testing and later replace
those with your actual links.
| | 03:06 | Now, we also have to deal with the submenu items.
| | 03:09 | The first one that I want to
work with is the one Contact.
| | 03:12 | Now Spry puts one in the third item by
default, and I want to get rid of that.
| | 03:16 | So, I'll select my Spry menu bar,
choose Contact, and then I'm just going to
| | 03:22 | choose the last submenu item,
and then select Remove menu item.
| | 03:27 | I choose the last one because I know
the way that Dreamweaver works here is
| | 03:30 | that it will move up the list, so
I'm go ahead and choose that one.
| | 03:34 | Now watch what happens with item
3.1, which has other subitems.
| | 03:38 | When I click the Remove button,
Dreamweaver pops open a dialog and asks,
| | 03:43 | are you sure you want to delete
this, because it does have some sub
| | 03:46 | navigation or children?
| | 03:47 | In this case we do, so I click OK, and
what that does is it not only removes all
| | 03:54 | of the unordered list items, but it
also remove a class that Dreamweaver uses
| | 03:59 | called MenuBarItemSubmenu whenever
there is a submenu item, and that's how
| | 04:05 | Dreamweaver knows to display this
right triangle that we see here.
| | 04:09 | So now let's move on to our Tours
section, and here you can see it's item 1.1,
| | 04:17 | item 1.2, or item 1.3.
| | 04:20 | Now just to show you that you can still
of course work in code, I'm going to go
| | 04:23 | ahead and change these directly in Code
view and make this Northern California.
| | 04:30 | Item 2, we'll make Central
California, and Item 3, Southern California.
| | 04:44 | So we have all different regions of
California covered. And when I switch back
| | 04:49 | to here and then go into a Live view,
I now have all of my correct labels in
| | 04:55 | place for my navigation, both top level
and for the sub navigation, but we've got
| | 05:00 | quite a bit of styling to do.
| | 05:02 | Luckily, that can easily be
done with Dreamweaver and CSS.
| | Collapse this transcript |
| Styling Spry vertical menus| 00:00 | In this video, we are going to go
from this inserted Spry vertical menu,
| | 00:05 | which looks like this by default, to
this vertical menu, which doesn't look
| | 00:12 | anything like it at all.
| | 00:14 | Are you up for the
challenge? Let's get started.
| | 00:17 | So I have now opened my mission.htm
file from the Chapter 2 exercise files and
| | 00:24 | we are ready to start doing some styling here.
| | 00:26 | I am going to start by opening up
the CSS Styles panel, and at the moment
| | 00:32 | going into Current. And let's start by
getting rid of this outer border that
| | 00:37 | you see around here.
| | 00:38 | We don't need that at all.
| | 00:40 | So I'll start by just selecting one of
the Spry menu items, and that will bring
| | 00:45 | into current mode in number of our Spry styles.
| | 00:47 | Now you'll notice that there are a
couple of rules that have the same selector
| | 00:51 | but different properties assigned.
| | 00:53 | The Spry Styles setup as it is by
default tends to do this so that it can
| | 00:58 | separate certain design styles like
borders and font colors and the like that
| | 01:03 | you see here into one area and other
more structural things like font size and
| | 01:08 | margin and padding in another.
| | 01:10 | Sometimes you have to look in two places to
find the property that you want to modify.
| | 01:14 | In this case, what we want to do is just
go ahead and get rid of the border here.
| | 01:17 | Now I could either delete it, or as I
am going to do here, just disable it.
| | 01:22 | And when I am working with Spry styles,
I actually prefer to go to the All mode
| | 01:28 | and use the Spry.css that I see there.
| | 01:31 | It's laid out pretty logically and you
can go actually from the outside of the
| | 01:35 | menu in, as I like to work.
| | 01:37 | So now we are going to go ahead and
try to bring this menu more into keeping
| | 01:41 | with the size and the look and feel
that we are aiming for, and let's change
| | 01:45 | the font size of the list items.
And for that, we will go to ulMenuBarVertical
| | 01:49 | li, and I'm going to click Edit Rule
here to open up the CSS Rule Definition
| | 01:58 | dialog box, and then go to the Type
category, so I can choose a font family.
| | 02:03 | And I will choose Georgia which is used
throughout this site, and then modify the
| | 02:07 | font size from 100% to 2 em.
| | 02:11 | I want to show you a quick trick.
| | 02:12 | When you're working with the CSS Rule
Definition dialog box, if you put in the
| | 02:16 | unit measure right after the value,
and then press Tab, Dreamweaver will update
| | 02:22 | the unit measure list for you.
| | 02:24 | Okay, we are finished with that,
and now as you can see here, that brings
| | 02:27 | our navigation, makes it quite large.
And wait until you see the subnavigation. Even bigger.
| | 02:32 | We will of course address that as we go forward.
| | 02:35 | Now one of the structural things
that I notice is the subnavigation is
| | 02:40 | overlapping the primary navigation,
and I want to move that over and down,
| | 02:45 | so let's attack that now. And that's
going to be in the very next Rule that you
| | 02:50 | see listed here, ulMenuBarVertical ul.
| | 02:55 | Let's change the margin here from -5%
and so forth to 0, 0, 0, 100%, which will
| | 03:03 | put it to the right there. And if I try it, you
can see that it is lined up just to the right.
| | 03:09 | Now we also need to make some other adjustments.
| | 03:12 | I'm going to change the overall width
of it from 8.2 ems to 6 ems to bring that
| | 03:17 | down in size a little bit.
| | 03:19 | Now you won't see that change in size
right away, because the font size is so large.
| | 03:22 | I am also going to add a background
color to it, and I want to make sure that I
| | 03:27 | scrolled down enough so I can sample my
tan area here. And I'll just go ahead and
| | 03:33 | type in background-color, press Tab so
I get my color pickers, and I can open
| | 03:41 | that up and with the
eyedropper sample that color.
| | 03:45 | Now you will have to do this in a
number of places in order to get that effect.
| | 03:50 | I still want to move this
menu item over just a bit,
| | 03:53 | so I'll have to go to the following
rule, which has the position property 'left'
| | 03:58 | that you see here, and now instead
of 0 I am going to make that 5 pixels
| | 04:02 | instead. And once that's locked in, now
you can see that there is a little bit
| | 04:07 | of a separation there.
| | 04:09 | Okay, so most of our structural work is done.
| | 04:12 | Now, it's time to tackle
the font size in the submenu.
| | 04:16 | So for this, it's the rule that follows
| | 04:19 | the last one we worked on, and here
we want to add a couple of properties.
| | 04:24 | We are going to go ahead and change
the font size and bring that down pretty
| | 04:29 | radically to 0.5 em.
| | 04:33 | Now if I go ahead and just preview that
now, you will notice that the font size
| | 04:37 | has changed radically, which is great,
but I still have a wrapping problem.
| | 04:40 | So I am going to go ahead and use a
little-known CSS property called white-space
| | 04:46 | to allow me to stop that
wrapping from happening.
| | 04:49 | So just type in 'white-space' and then
from the dropdown list, choose nowrap.
| | 04:56 | So now if I take a look at it, I have
Northern California, Central, and Southern--
| | 05:01 | each of them in a single line.
| | 05:03 | Now this is one of the other places that
I need to add in that background color,
| | 05:08 | so I am going to go ahead and type in
'background-color', press Tab, and once again
| | 05:14 | sample from the lower-left. All right!
| | 05:17 | It's time to bring in the background
image and adjust the padding so that the
| | 05:20 | text sits neatly on the top.
| | 05:23 | And for that we are going to go down
to the anchor tag, ul.MenuBarVertical a.
| | 05:30 | Typically, the background image
is applied to the anchor tag.
| | 05:33 | So I find bringing in background images
is easiest through the CSS Rule dialog box.
| | 05:39 | So I am going to go up here and I am
going to go ahead and just clear the
| | 05:43 | default color there, so we don't have
that background color. And instead we
| | 05:47 | will browse for an image. And you want
to make sure that you're in the proper
| | 05:52 | folder, which would be 02_04 in the
_images subfolder and navigate down your
| | 05:59 | list until you see nav_bg.gif.
| | 06:06 | We want to make sure that this doesn't repeat,
| | 06:08 | so I will choose no-repeat, and we also want to
position this so that it's at the left and top.
| | 06:15 | Now, this background image is
actually part of a sprite. I'll click OK.
| | 06:20 | So now we can see our background
image is coming in, but the text is
| | 06:23 | obviously overlapping.
| | 06:24 | So we can adjust that by changing the padding.
| | 06:28 | So I'll go over to the padding rule here
and change it to .25 ems for the top,
| | 06:34 | .75 em for the right, .5 em for
bottom, and 1.25 em for the left.
| | 06:45 | When I press Tab, you can
see that all of them line up.
| | 06:49 | Now that we have our background image
on the primary items, if I move over to
| | 06:52 | the subnavigation, you can
see I still have some work there.
| | 06:57 | Let's go ahead and address that.
| | 06:59 | Now in this case, I am
actually going to have to add a rule.
| | 07:02 | There is no anchor tag for
subnavigation addressed here just by itself, so
| | 07:07 | I'm going to right-click on my CSS rule that
we are just working on, and choose Go to Code.
| | 07:12 | I like to group these CSS Rules
together wherever I can, and in this case it's
| | 07:18 | ul.MenuBarVertical ul a, then we will
do an open curly brace and a close curly
| | 07:30 | brace. And we want to get
rid of the background image,
| | 07:33 | make sure that doesn't appear,
| | 07:34 | so I'll type in background-image: URL(none).
| | 07:45 | Now when I go over and click Refresh, my
new tag appears in the CSS Styles panel
| | 07:51 | and I can add a background color
property and sample my tan background.
| | 07:59 | So there's actually about three different
places where you have to put that tan
| | 08:02 | background in to actually make it work right.
| | 08:05 | Okay, we are getting closer.
| | 08:06 | Let's go ahead and close that off.
| | 08:08 | Now it's time to get rid of this right arrow.
| | 08:11 | You'll find that the rule for it is
actually in two places, and it's located
| | 08:16 | below this group of hover
rules that you see here.
| | 08:20 | The first one is ul.MenuBarVertical a.
MenuBarItemsSubmenu, and we also want to
| | 08:25 | change the one right below it.
| | 08:27 | You will notice that they both
have this background image property,
| | 08:31 | so let's see if we can get rid of the
background image properties in all of these.
| | 08:34 | I am going to opt to disable these
background image properties one at a time,
| | 08:42 | and let's go up and do that
in the previous menu as well.
| | 08:48 | Okay, so that has brought us a step closer.
| | 08:52 | As you can see, there's still some
issues where we have the default border
| | 08:56 | bottom appearing here and we want to
get rid of that, and those are located
| | 09:00 | in the hover state, and the rules are
found just above the two we were working with.
| | 09:05 | Choose the first one, which is
ul.MenuBarVertical a:hover, ul.MenuBarVertical a
| | 09:11 | focus, and with that chosen, we want
to disable the background color, and we
| | 09:17 | actually want to change the color of it,
so that it uses the orange in the logo.
| | 09:21 | So I will click the color icon and
then go over and sample the orange.
| | 09:27 | Now we need to add a couple of other properties.
| | 09:29 | I mentioned that it
still has that border bottom.
| | 09:31 | So let's get rid of that by putting in a
border-bottom, and then entering in the
| | 09:40 | value of none, pressing Tab. And the
final thing we need to do here is move the
| | 09:45 | sprite over, and we do that by
changing the background position.
| | 09:48 | So I'll enter in background-position,
and change that to a value of -272 pixels
| | 09:58 | on the left and 0 from top and bottom.
| | 10:03 | So now when we hover over it, you can
see that the background is changing, but
| | 10:06 | we are still losing the other image,
and that can be changed by addressing the
| | 10:11 | second rule that has the
background color of the dark blue.
| | 10:15 | Again, we will go ahead and disable that,
and let's change this color to orange.
| | 10:23 | You have to do the same thing to the two rules.
| | 10:27 | So now when we go over them, you can
see that all of our hover colors are
| | 10:31 | correct, and when we go over the item
with the subnavigation, we also have
| | 10:37 | exactly what we are looking for, which
is the orange color coming up and no
| | 10:41 | background graphics.
| | 10:43 | So all of these style techniques that
we've applied to the vertical menu can
| | 10:46 | also be applied to the horizontal one
as well to create just the type of menu
| | 10:51 | that you are looking for.
| | Collapse this transcript |
| Using Spry tabbed navigation| 00:00 | The Spry Tab panels are great for
consolidating a lot of content into a
| | 00:04 | single area on a page,
| | 00:06 | but did you know you could also use
them to create your primary navigation?
| | 00:10 | Let me show you how it is done,
starting with the content.
| | 00:13 | Now, before we get started, I do want
to show you what the final project is
| | 00:17 | going to look like.
| | 00:19 | So here I have the mission_tab.htm file.
| | 00:22 | This one is opened up from the final
folder of 02_06 in Chapter 2, and here you
| | 00:29 | can see that I have my primary
navigation across the top and when I roll over
| | 00:33 | each of them, they turn orange,
| | 00:35 | a nice roll-over color.
| | 00:37 | If I select one of the ones with the
ellipsis, which indicates that there is a
| | 00:41 | subnavigation there,
| | 00:42 | subnavigation appears horizontally
underneath that item, and each of these of
| | 00:46 | course are selectable.
| | 00:48 | And if I go to resources,
there is another three items there.
| | 00:52 | So this is all built from a Spry Menu
tab and over the course of the next two
| | 00:58 | movies I'll show you how that's done.
| | 01:00 | So we will close out the final one, and
now I have opened mission_tab.htm from
| | 01:07 | the 02_05 folder in Chapter 2 exercise
files. And as you can see, there is no
| | 01:14 | navigation currently here.
| | 01:15 | By going to Split view, you can see the nav tag--
| | 01:19 | this is an HTML5 page--where
the navigation is intended to go.
| | 01:23 | So I have got my cursor right there,
and let's go over to the Insert panel, and
| | 01:29 | from the Spry category, and near the
bottom of the Spry category, you will see
| | 01:35 | the Spry Tabbed Panels object.
| | 01:38 | I click on that once to insert it, and
Dreamweaver puts in two placeholder tabs,
| | 01:44 | and they work just as you would expect them to.
| | 01:47 | When Tab 1 is clicked, you see the
content for that panel with the placeholder
| | 01:51 | text saying Content 1.
| | 01:53 | When Tab 2 is clicked on, the
placeholder Content 2 appears.
| | 01:58 | So you may recall I had five different
top-level options in my navigation, so I
| | 02:04 | want to add additional tabs for that.
| | 02:07 | The easiest way to do that is to open up
the Property Inspector. And I will drop
| | 02:11 | out of Live view, so that I can select
the Spry Tabbed Panels tab up here, which
| | 02:16 | will make the Tab Panels
Property Inspector appear down below.
| | 02:20 | So I'll just select Tab 2 here, so
that I can quickly add three panels by
| | 02:25 | clicking the Add Panel button three
times. And as you can see, all five tabs
| | 02:31 | are listed up top here.
| | 02:33 | So the first thing we want to do is
change the headings for each of these so
| | 02:38 | that they correspond to our links.
| | 02:41 | So I'll click on the eye icon there,
which is used to display the content for a
| | 02:47 | particular tab, and I do that so I can
easily go in and just select the Tab 1
| | 02:53 | entry there and change that to
Tours and put in an ellipsis.
| | 02:58 | Now let's go to Tab 2, and again I'll
click on the eye icon and change Tab 2
| | 03:05 | label to Mission. Tab 3
becomes Contact; Tab 4, Resources.
| | 03:19 | Resources is also one that has subnavigation,
| | 03:21 | so we will add another ellipsis.
And the final one is Tab 5, Explores.
| | 03:27 | So we now finished all of the top-
level navigation, but let's go over and take
| | 03:34 | a look in the code.
| | 03:35 | I want to show you an accessibility
feature that you can implement pretty easily.
| | 03:40 | Dreamweaver puts in a tabindex
attribute in each of the list items of that are
| | 03:45 | used in the Tab menus.
| | 03:46 | Tabindex is an attribute that is used by those
who are using the keyboard to navigate links.
| | 03:52 | Tabindex takes numeric values and the
lowered values are tabbed to first, and
| | 03:59 | then sequentially after that.
| | 04:01 | So right now they're all set at 0,
| | 04:03 | so we are going to start them
at 10 and then increment by 10.
| | 04:08 | So Tours becomes 10, Mission becomes 20,
Contact 30, Resources 40, and Explores 50.
| | 04:19 | So, why do I go up by 10?
Why not just 1, 2, 3, 4, 5?
| | 04:22 | Well, sometimes clients will come in and say,
| | 04:26 | "Oh, we have a new navigation item and we want it
to go between let's say Mission and Contact."
| | 04:32 | So for that to work, I would have
to change the values for a number of
| | 04:36 | different tabindexes.
| | 04:37 | This way, I have got some room to
maneuver, and if I have a new entry, I can
| | 04:41 | come in and put it in as a tabindex of 25,
which would fall in between Mission and Contact.
| | 04:47 | All right, we are ready to actually go
on now to the Content areas, which are
| | 04:52 | down below in different divs, and I'm going
to continue to work in Code view here.
| | 04:57 | You can of course work in
Design view if you like.
| | 05:00 | The first entry is going under Tours,
and this is a Northern California, Central
| | 05:05 | California, and Southern California--
| | 05:08 | three different entries.
| | 05:09 | So I will go ahead and just start typing that.
| | 05:14 | Now, we want these to be separated by bullets.
| | 05:17 | Bullets are a special character,
and if you know what the character entity is,
| | 05:21 | either in its numeric or name
configuration, you can go ahead and enter that.
| | 05:26 | If you don't, go up to Insert > HTML >
Special Characters > Other, and that will
| | 05:37 | open up the Insert Other Character
dialog box, where you will see the bullet
| | 05:41 | on the last row. And I will select
that, and you can see that the numeric
| | 05:45 | character entity is •
| | 05:51 | Now, if you were using the name character
you would just put in •. Let's click OK.
| | 05:59 | Dreamweaver will tell you that these
special characters may not appear in all
| | 06:03 | browsers if the document
doesn't use a Latin1 encoding.
| | 06:06 | You can go ahead and click OK there.
| | 06:09 | So there's our character entity.
| | 06:11 | We will add another space and type in
'Central California', and this time rather
| | 06:17 | than look that up again, I am just
going to go ahead and copy the character
| | 06:21 | entity and the two spaces on either
side and paste that in and the final one,
| | 06:27 | which is Southern California.
| | 06:31 | Let's see how that is looking up here.
| | 06:35 | In Design view, I'll go to Tours and
click on the eye icon, and there you can see
| | 06:42 | it all kind of lined up.
| | 06:44 | That's looking pretty good. Now, we do
want to go ahead and turn these into links,
| | 06:47 | so let's go back down to the code
where that is selected, and I'll choose
| | 06:56 | Northern California,
| | 06:57 | make sure not to get the bullet, and
then go ahead in the Property Inspector
| | 07:02 | and put in nocal.htm.
| | 07:04 | Let's highlight 'Central California'
and we will make that 'centcal.htm' and of
| | 07:15 | course the final one is going to be socal.htm.
| | 07:23 | Okay, so we have all of our
links made now for that area.
| | 07:27 | Let's take a look. And there you can
see using the standard blue links.
| | 07:31 | Now notice that even though this is a
unordered list, we didn't have to go
| | 07:35 | through any CSS configuration in
order to make the bullets disappear in the
| | 07:39 | unordered list, and that's because a
Spry already has them handled because this
| | 07:44 | top series of links is unordered list.
| | 07:47 | Okay, so we are ready to go on to
Mission here, and the Mission content which you
| | 07:52 | will find down below,
| | 07:54 | we are going to go ahead and
just remove because that does not
| | 07:57 | have subnavigation,
| | 07:59 | nor does the next one, number 3,
which corresponds to Contact.
| | 08:04 | The fourth one, which is Resources, does,
| | 08:07 | so, I am going to go ahead and select
that. And these three items are maps, and
| | 08:14 | again we have our Bullet.
| | 08:15 | Now I still have it on my
clipboard because I copied it earlier,
| | 08:18 | so I am going to go ahead and paste that in.
| | 08:21 | Conditions is the second one--
| | 08:24 | again with the bullet.
And the final entry is Equipment.
| | 08:31 | Now let's click Refresh, and now I can go
ahead and select Maps and add in my link,
| | 08:37 | maps.htm, conditions.htm,
and finally equipment.htm.
| | 08:52 | Okay, so let's head back to Design
view and go into Live view, and now you can
| | 08:57 | see the subnavigation is in place for our tabs.
| | 09:02 | I can go to Mission and have no sub
navigation, Contact, no subnavigation.
| | 09:06 | Resources, I do have my three items.
| | 09:08 | Now, Explores I still have one left so
let's go back to Split view and remove that.
| | 09:16 | Let's save our page and come back to Design view
and double-check that last one. Looking good now.
| | 09:22 | The first part of the
transformation is now complete with all the
| | 09:25 | site-specific HTML in place.
| | 09:27 | You are now ready to style the Tab panel
to match the look and feel of the site.
| | Collapse this transcript |
| Styling Spry tabbed menus| 00:00 | Transforming Spry menu tabs from their
default state to one that fits your site
| | 00:05 | requires modifying existing CSS
rules and adding some new ones.
| | 00:10 | Let's start by reconfiguring
the primary navigation labels.
| | 00:14 | So to do that, I am going to go into Live
view and then open up the CSS Styles panel.
| | 00:21 | In this case, I am going to work in the
All mode, which I find to be easier when
| | 00:26 | you're working with Spry CSS.
| | 00:29 | So the first rule that we are going to
work with is one directed at the Tabbed
| | 00:33 | Panels Tab Selector, and the first
thing we are going to do is to go in and
| | 00:38 | change the font family, which I find a
little bit easier to do through the CSS
| | 00:43 | Rule Definition dialog box, which
you can open up by clicking Edit Rule.
| | 00:48 | So here in the Type category, we
will choose Font-family and go down to
| | 00:53 | Trebuchet MS, Arial, Helvetica, sans-serif.
| | 00:57 | Now we also want to increase the size
here, bring it a little bit more than
| | 01:00 | doubling it, going from 0.7 em to 1.5
ems. And I also want to make sure that all
| | 01:07 | the entries are lowercase,
| | 01:08 | so we will use the Text-transform
property here and set that to lowercase.
| | 01:13 | The next thing I want to do is add a
wee bit of air in the type, so that I can
| | 01:18 | increase the letter spacing, and
that's found under the Block category, and
| | 01:23 | let's just bring that in at 0.1 em, and
that will differentiate it a little bit
| | 01:28 | from the text around it.
| | 01:30 | The next thing we want to change is the padding.
| | 01:33 | You do this through the Box category.
| | 01:36 | Now the default padding for tabbed
menus is 4 pixels on the top and bottom and
| | 01:42 | 10 pixels on the right and left.
| | 01:44 | I am going to change the right and left
values and increase that from 10 pixels to 25,
| | 01:51 | just to give a little bit more
distance between each of the items.
| | 01:55 | Now, there still are a couple of changes to make.
| | 01:57 | We have to modify the borders, for example.
| | 02:00 | I want to get rid of three
out of the four borders here.
| | 02:04 | One thing I have found, it is actually
easier to do this in the Properties panel.
| | 02:08 | So let's go ahead and click OK here,
and here you can see some of my text
| | 02:13 | changes have already taken effect.
| | 02:15 | But I want to go ahead and
get rid of border-bottom--
| | 02:16 | I am just going to disable that for the moment--
| | 02:19 | border-left. I do want border-right
to stay so we'll keep that and then
| | 02:24 | let's disable border-top.
| | 02:26 | So now I will just have one line
separating my entries on the right.
| | 02:30 | Now, I also want make sure that the
background color matches the background of the
| | 02:34 | site, which is white.
| | 02:35 | So I am going to go ahead and change the
background color to #FFF, which is the white.
| | 02:40 | You will notice that one of the entries,
the one that is open, still maintains
| | 02:46 | its background color, and we are going
to change that next. That is controlled by
| | 02:49 | TabbedPanelsTabSelected.
| | 02:52 | So if we go there and change the
background color also to white, and let's get
| | 02:59 | rid of the border-bottom here.
| | 03:01 | I will disable that.
| | 03:03 | Now I want to indicate
that this is the selected one,
| | 03:05 | so I am going to add a color.
| | 03:06 | So we will choose Add Property and
type in color. And for navigation, I often
| | 03:13 | sample existing colors from a logo,
| | 03:15 | so let's go ahead and open our color
picker, and we will go over and pick this
| | 03:20 | dark teal, which looks pretty good.
| | 03:23 | And then the last thing I want to do is,
you will notice that if I select any of
| | 03:26 | these entries, when they're
selected I get this outline around it.
| | 03:30 | I want to get rid of that, so I am going to
add another property and this is outline, none.
| | 03:37 | So now we are looking okay.
| | 03:38 | We have to go now and address the hover
state, which is found right above selected.
| | 03:44 | So I'll choose that and the background property,
| | 03:47 | we can again make it
white, and let's add a color.
| | 03:53 | This time, let's use the orange
color that's found in the logo.
| | 03:57 | So we will sample that, and now when
we roll over them they turn orange,
| | 04:01 | looking pretty good.
| | 04:02 | Now, we are ready to move on to the Content area.
| | 04:05 | Here you can see that I have, when I
select it, a light gray background as well as
| | 04:10 | some borders around that.
| | 04:11 | So we are going to go ahead and
remove all of the borders, and this is all
| | 04:15 | handled in the selector
called TabbedPanelsContentGroup.
| | 04:19 | Let me scroll down just a little bit here.
| | 04:23 | So let's take all the borders away by
disabling them, and again we will change
| | 04:29 | that background color to white.
| | 04:30 | We are getting pretty close.
| | 04:32 | All we need to do now is address the
subnavigation states, which you see are
| | 04:37 | still in kind of their default
configuration, and we also want to move
| | 04:41 | things over a little bit.
| | 04:43 | Let's work on the states first.
| | 04:45 | To do this, we are going to
need to create a couple of rules,
| | 04:48 | so I am going to click on a new CSS
rule in the CSS Styles panel, and this will
| | 04:53 | bring it up in a compound option, which
is fine, but let's go ahead and get rid
| | 04:57 | of the selector that
Dreamweaver has chosen for us.
| | 05:01 | Instead, what I want to do is
put in TabbedpanelsContent.
| | 05:08 | Let me make sure that that's a class by
putting a leading period there. And then
| | 05:13 | we want to address the states in that.
| | 05:15 | The first state is the a:link state,
and then I will add a comma so I can group
| | 05:20 | a couple of states.
| | 05:21 | Now, I am just going to go ahead and
copy this first part so I don't have to
| | 05:24 | retype that and then paste that in, and
the second state is the visited state.
| | 05:32 | Now, we want to save this in the
SpryTabbedpanels.css, click OK, and what we are
| | 05:37 | going to change here is the color.
| | 05:41 | Again, I am going to sample this dark
teal, and we want to make sure that there
| | 05:45 | is no text decoration--i.e.
underline--that would appear by clicking
| | 05:49 | Text-decoration>none.
| | 05:52 | Click OK, so that's looking good.
| | 05:54 | It all kind of relates.
| | 05:56 | Now, the next rule we need to add
is basically a duplicate of this but
| | 05:59 | using different states.
| | 06:00 | So as a shortcut, I will right-click
on that entry and then choose Duplicate
| | 06:06 | from the pop-up menu.
| | 06:07 | Now, I am just going to go in and
change the two states from a:link,
| | 06:12 | we will make that a:hover, and then
instead of a:visited, it will be a:active.
| | 06:20 | Click OK, and that will
bring the rule into my list.
| | 06:24 | I can select it, and my hover color I
want to change from the teal to orange.
| | 06:29 | I will just resample that, and
now I should have each of my links
| | 06:35 | working appropriately.
| | 06:36 | Everything is looking good.
| | 06:38 | Now I still have to do some positioning
because now you can see that under Tours, I
| | 06:42 | have Northern California, which is
pretty much acceptable, but it would be nicer
| | 06:45 | if it were kind of lined up more with that.
| | 06:47 | But the real problem is resources.
| | 06:49 | When I go to resources, my
sublevel is all the way over on the left.
| | 06:53 | So let's address that by creating two more
rules, and these will be just applied to IDs.
| | 07:03 | So the first one is for the #toursSubnav
ID, which I will put in, and we are going
| | 07:11 | to make this a margin left.
| | 07:13 | So, I will go to the Box category,
deselect Same for all under Margin, and put in
| | 07:20 | 20 pixels for my margin
left value there. Click OK.
| | 07:25 | You will notice that the subnavigation
did not move at all, and that's because I
| | 07:29 | don't have this ID
toursSubnav placed appropriately yet.
| | 07:32 | I like to do the CSS rules first because
that makes it easier to actually put in the IDs.
| | 07:39 | All right, let's just go ahead and
create one more. And in fact I am going to go
| | 07:42 | ahead and do my duplicate check again.
| | 07:45 | This time instead of toursSubnav, it
will be resourcesSubnav, and the value for
| | 07:55 | that one is going to be a whopping 476 pixels.
| | 08:01 | Now, I determined these values by using
the Dreamweaver Ruler, and a good amount
| | 08:06 | of trial and error.
| | 08:07 | So let's go in and add our IDs, so
we can see our final result here.
| | 08:11 | So we want to add these to the
TabbedpanelsContent, and I am going to go ahead
| | 08:16 | and add an ID attribute, and now you
can see that I actually have the options
| | 08:22 | listed for me because I have already
set up these rules. So if type T for tours
| | 08:26 | here, I have it on my list. I
can just hit Enter and there it is.
| | 08:31 | Let's go in and do the same thing for resources.
| | 08:35 | I'll place my cursor right after div
and hit the Spacebar, which will bring up
| | 08:40 | the code hints, and I can type in
an ID, hit Return, and now type R for
| | 08:47 | resources. There it is.
| | 08:48 | So I am going to go ahead
and save the page again.
| | 08:50 | Let's go to Design view. And now when I
click on resources, the sublevel lines up
| | 08:58 | appropriately. And if I go to
tours, it is lining up over there.
| | 09:02 | So the final step is to go to File,
Save All Related Files, and that will make
| | 09:08 | sure that all of your CSS is stored.
| | 09:11 | Now, there is one last tip:
| | 09:13 | when implementing this type of menu
site wide, you will want to indicate the
| | 09:17 | current main navigation page.
| | 09:19 | You can do this pretty easily,
by changing the default tab.
| | 09:23 | So you will remember, of course,
that we are using tabbed panels.
| | 09:28 | So if I drop out of Live view and
select my tab panel there and reopen the
| | 09:33 | Property Inspector,
| | 09:34 | there is an entry for choosing the
default panel, which is set by default to the
| | 09:39 | first one, which is now tours.
| | 09:41 | But let's say I am on the resources page,
so I can go down and choose resources.
| | 09:46 | And now I want to go back to Live view.
Resources is selected and all my sub
| | 09:51 | menu items are visible. Pretty nifty,
| | 09:53 | don't you think?
| | Collapse this transcript |
| Including Spry accordion panel menus| 00:00 | Spry accordion panels are a cool way
to hide and reveal content on demand,
| | 00:04 | complete with built-in animation.
| | 00:06 | In this video, I'll be begin to show you
how to extend the coolness of accordion
| | 00:10 | panels to your site-wide navigation.
| | 00:13 | Before we start, let's take
a look at the final product.
| | 00:16 | Here I have index.html open from the
final folder, and you can see my navigation
| | 00:23 | elements over here on the
left in the vertical navigation.
| | 00:26 | If I go over and roll over any of them,
I get a little hover color action, and
| | 00:31 | when I click on any of the ones that
have subnavigation, the accordion panel
| | 00:36 | expands, and I see my various elements in there.
| | 00:39 | If I click on another one, it works as
it normally does with accordion panels,
| | 00:45 | where one panel closes and another one opens.
| | 00:47 | And again, I have my
subnavigation available to me.
| | 00:49 | Clicking on the final one, we'll close them
all and take me to whatever page is linked to it.
| | 00:56 | Okay, so let's get started. And now I have
index.html opened from my Chapter 2 exercise files.
| | 01:04 | We're going to make this a vertical
navigation, so it's going in the side here.
| | 01:08 | I'll go to Split view, and we're looking
for div id = "sideWrapper", line 93, and
| | 01:16 | put your cursor in between the opening
and closing div, and then head on over to
| | 01:20 | the Insert panel, choose the Spry
category if you haven't already, and go down
| | 01:27 | towards the bottom, and
you'll find Spry Accordion.
| | 01:30 | Click that once to insert it, and
you'll see that Dreamweaver has put in
| | 01:34 | two accordion panels.
| | 01:35 | Since we are in Live view, we can go
ahead and examine how they work, so I'll
| | 01:38 | roll over them and you'll see that
slight roll-over color change, and I click on
| | 01:42 | the second one and it rolls up.
| | 01:45 | Click on the first one and the second
one rolls down, just as you would expect.
| | 01:48 | So let's drop out of Live view and
I'll open up the Properties Inspector and
| | 01:54 | click on the Spry accordion panel here.
And the first thing we need to do is
| | 01:59 | add a couple of additional panels so that
we can take care of our additional menu items.
| | 02:04 | So in the Accordion Property Inspector
I'll go down and select Label 2 and then
| | 02:09 | click Add Panel twice, and now
we're ready to change our labels.
| | 02:14 | I'm just going to go up in Design view
and select Label 1, and we'll make this
| | 02:20 | Home. Label 2 I'm going to turn into
About with an ellipsis because this has
| | 02:25 | some subnavigation. So dot, dot, dot there.
| | 02:29 | Label 3 is Process--again,
with some subnavigation.
| | 02:35 | And finally, Label 4 is Contact Us.
| | 02:41 | Now all of these need to be turned
into links, so I can just go up and
| | 02:45 | double-click on Home and then in the
Property Inspector, type in index.html, and
| | 02:51 | press Tab to lock that in.
| | 02:54 | Now on About, I'll go ahead and select
it, and then in the Link field, we're not
| | 02:59 | actually going to a separate About page.
| | 03:01 | This is just being used to open up the
subnavigation, so I'll just put in a hash mark here.
| | 03:07 | Same deal with the Process, where I'll
select that and put in a hash mark. Contact
| | 03:13 | Us on the other hand,
| | 03:14 | will be going to its own page,
so we'll type in 'contact.html'.
| | 03:21 | Now we're ready to go ahead and put
in the subnavigation, so we'll take
| | 03:25 | advantage of Dreamweaver's ability
to show different Spry content by
| | 03:30 | choosing the eye icon here.
| | 03:32 | So now we have Content 2.
| | 03:34 | I'm going to select that.
| | 03:36 | We're actually going to use Bulleted
List inside of this as the starting point
| | 03:40 | for our navigation. So I'll change
this to Unordered List, and Content 2, I'll
| | 03:46 | change it to Our Oil.
| | 03:49 | The second entry is the Land,
and the final entry is Company.
| | 03:54 | Again, we want these all to be links,
so I'm going to go ahead and select Our
| | 03:59 | Oil there, and then in the Property
inspector put in oil.html. We'll select
| | 04:06 | the Land and enter land.html,
and then Company, the quick double-click to
| | 04:14 | select, enter company.html.
| | 04:18 | Now we're ready to go on to the next
one, which is Process. And instead of
| | 04:23 | going through that process again--no real pun
intended there, but it just happens sometimes--
| | 04:29 | I'll select the content and get rid of it.
| | 04:32 | Let's go into Split view here.
| | 04:34 | You can see that I'm in the
"accordionpanelContent"></div> under the Process, so
| | 04:38 | I do have a code snippet available for us.
| | 04:41 | If we go to the Files panel and open
up the 02_07 folder, and the Code folder
| | 04:48 | underneath it, you'll see a file called
process.txt. Double-click on that,
| | 04:54 | and you can open it up right in
Dreamweaver, and we'll select all of the code
| | 04:58 | there, do a quick copy with Command+C,
Ctrl+C on the PC of course, and then make
| | 05:05 | sure we're in Code view and paste it in.
| | 05:09 | So now if I go to Design view, I'll see
that put in there as an unordered list.
| | 05:15 | Working with the HTML in Spry
accordion panels for navigation is definitely
| | 05:19 | different from a pure unordered list
approach, but it really does give you a
| | 05:24 | variety of different options to choose
from when it comes to site navigation,
| | 05:29 | and now we're ready to
begin the styling process.
| | Collapse this transcript |
| Styling Spry accordion menus| 00:00 | When styling Spry accordion panels
for navigation, you will find yourself
| | 00:04 | creating more new CSS rules
than modifying existing ones.
| | 00:09 | But in the end, I think
you'll agree it's worth the effort.
| | 00:13 | So now we have our HTML in place, and as
I demonstrate here in Live view, all of
| | 00:18 | the accordion panels are working,
showing the subnavigation, but it's
| | 00:20 | definitely not styled to
fit into the existing site.
| | 00:25 | So let's open up our CSS Styles panel,
and I will go to All mode and then expand
| | 00:32 | the Spryaccordion.css file.
| | 00:35 | The first thing I want to change is
the Tab and Tab label that we see here.
| | 00:40 | Now, initially let's just
change the background color.
| | 00:43 | So I'll choose AccordionPanelTab,
and I am going to scroll down a little bit,
| | 00:47 | so that I can see these
nice green bottle caps here
| | 00:50 | because I am going to sample that color.
And instead of this medium gray, I'll click
| | 00:54 | on the color swatch, get my eyedropper,
and then go over and sample the green for the tabs.
| | 01:02 | Now, why didn't that change?
| | 01:03 | It's because these now have focus, and
as we'll see in just a little bit, there
| | 01:08 | are a couple of specific Spry
rules that handle the focus state.
| | 01:12 | If I take it off focus, everything
turns green except for the Open panel, and we
| | 01:17 | can adjust that by going to
AccordionPanelOpen, AccordionPanelTab, clicking on
| | 01:23 | the color swatch and sampling the panel.
| | 01:25 | Now, we still have a couple of other
things that I want to do with the tab
| | 01:29 | in general, so let's head back there, and I am
going to go ahead and make some changes here.
| | 01:34 | I am going to change the Font-size,
Font-weight, and Text-transform.
| | 01:39 | Those properties are all handled in the CSS Rule
definition box on one page. So let's go there,
| | 01:46 | clicking on Edit Rule, and let's say I
am going to change the Font-size to 14
| | 01:52 | pixels, bring that up a little bit in
space, the Font-weight, we'll make that
| | 01:56 | bold, and Text-transform, we
want everything to be uppercase.
| | 02:00 | So the last thing I want to change is
the padding, which initially is set for 2.
| | 02:06 | Let's go ahead and bump that up to 6.
| | 02:10 | Okay, so I will click OK.
| | 02:11 | Now, you won't see the labels, because
if you'll recall, they are all links now.
| | 02:15 | So we're going to have to create some
specific styles in order to take care of that.
| | 02:19 | But before I do that, I do want to
take care of this focused state that I was
| | 02:23 | talking about, so we can get
away from this bright blue.
| | 02:26 | So if you scroll down the Spry
accordion CSS panel, you'll see there are two
| | 02:30 | rules that start off
AccordionFocused towards the end of the list there.
| | 02:35 | Select the first one and then disable
the background color, and then select the
| | 02:39 | second one and disable its background color.
| | 02:42 | So now we have things more and more
keeping with the way we want to work it,
| | 02:46 | and we're ready to start adding in our CSS
rules that are specific for our navigation.
| | 02:52 | So I am going to go ahead and click on
the New CSS Rule dialog box. And we're in
| | 02:58 | the Compound option which is good,
but we don't need what Dreamweaver has
| | 03:02 | selected for us, so I'll press Delete
to get rid of that. And we want to start
| | 03:06 | to address the unordered list
that's in the navigation, specifically in
| | 03:10 | AccordionPanelContent.
| | 03:12 | So just in case you have some other
accordion panels used throughout your site,
| | 03:17 | go ahead and start off your rule by
targeting the navSide, which is the division
| | 03:24 | that is containing the accordion panel
on the navigation for this vertical menu,
| | 03:30 | and then a class of
AccordionPanelContent, and that will target the accordion
| | 03:39 | panel of course, and then the unordered list.
| | 03:43 | And again we're going to work from
the outside in and make sure that the
| | 03:47 | content, which is unordered list, looks more
like navigation elements than an unordered list.
| | 03:53 | So make sure that it's going to be
saved in Spryaccordion.css so everything is
| | 03:57 | together, click OK, and let's go to the
Box category where we're going to zero
| | 04:03 | out both padding and margins. And then
go to List Style, so we can get rid of
| | 04:10 | the bullets, and go to None. Click OK.
| | 04:16 | So now when I open up one of the items,
you can see that now my bulleted list do
| | 04:20 | not have the bullets.
| | 04:21 | Now, I am going to go into Split view
just so we can code these a little bit
| | 04:26 | more rapidly, and I can use
a little copy/paste action.
| | 04:30 | So the next thing I am going to do is to
highlight that rule there so that I can
| | 04:36 | copy it and then paste it in, and
we're going to drill down a little bit, and
| | 04:41 | instead of going to the ul, we'll go
to the list item that's within the ul.
| | 04:47 | I'll add a closing curly brace here.
And now I just want to change this color
| | 04:52 | here so that it's not the same green,
and I am going to make that kind of a
| | 04:57 | medium gray, so I'll do a color,
and then choose the color swatch, and select
| | 05:04 | 666 here as my medium-gray color.
| | 05:10 | That will give us a base color
for any list item that's not a link.
| | 05:15 | So now we're ready to address the
links, and I am going to go ahead and
| | 05:18 | select this item again, copy that, paste,
and add an anchor tag here after my list item.
| | 05:27 | So we're targeting the anchor tag
that's within the list item,
| | 05:31 | and we want to go ahead and close off
that curly brace. And the property we're
| | 05:38 | going to put in is a display
property, and we'll set display to block.
| | 05:43 | This will turn the entire list item
into a clickable navigation button.
| | 05:48 | We want to add a little
bit of padding around that,
| | 05:50 | so I am going to do a padding: 10px.
We're about halfway done here.
| | 05:56 | So the next rule, we'll
start to address the link states.
| | 06:00 | So I am going to copy this to start,
and then paste that in, and let's go ahead
| | 06:08 | and add a little bit more
room here. That's better.
| | 06:13 | So now we're going to be more specific
and we'll turn the anchor tag into anchor
| | 06:18 | link, and then let's copy that, paste
it in, and add the second state, which is
| | 06:27 | visited. Opening and closing curly brace.
| | 06:32 | And here we want to just go back
to our default color, which is, if you
| | 06:38 | recall, 666, and let's make sure that there is
no text decoration that's going to show up.
| | 06:43 | So we'll put in decoration None.
| | 06:48 | Now I am going to copy the entire rule,
paste that in, and change the two states.
| | 06:55 | We want to change 'link' to
'hover' and 'visited' to 'active'.
| | 07:02 | Now, we also want to change the color,
so I am going to change it from that
| | 07:06 | medium gray to 000, which is black.
| | 07:10 | So now we've handled the content, but we
still have to work with the tabs themselves.
| | 07:16 | So we have a couple of more states to do.
| | 07:18 | This will still be in the
same div, navSide, and instead of
| | 07:22 | AccordionPanelContent, we'll go for the
Class AccordionPanelTab. And we're looking
| | 07:32 | for the a:link state here. And as
before, I can copy the bulk of that and
| | 07:40 | paste that in and then put in the second
state which we want to control, which is visited.
| | 07:49 | Within our opening and closing curly
braces, we'll put in the color white.
| | 07:56 | So one last rule to add in here,
and that's pretty much a duplicate of this with
| | 08:02 | the different states.
| | 08:03 | So I am just going to go ahead and
copy this entire thing, paste this in, and
| | 08:10 | change 'link' to 'hover', and 'visited' to 'active'.
| | 08:16 | Now I do want to make one
change here, and that's because with
| | 08:20 | SpryAccordionPanels whenever you
hover over the Panel tab, it adds in a new
| | 08:25 | class, which is AccordionPanelTabHover.
| | 08:30 | So let's go ahead and add hover to
our existing class name here and here.
| | 08:35 | Okay, let's head back to
Design view and see how we're doing.
| | 08:39 | So now things are looking pretty good.
| | 08:41 | We're having a little bit of issue here
where I still have my underline showing
| | 08:46 | up, and we can quickly address that.
| | 08:49 | But otherwise, everything is
looking just as I expected there.
| | 08:53 | So let's go ahead and
tackle the hover state here.
| | 08:56 | As you might suspect, it's the last
one that we worked with, where we have the
| | 09:01 | AccordionPanelTabHover. And we want
to add in a text-decoration: none.
| | 09:08 | So I am going to save that, go back
to Design view, and now in my hover
| | 09:14 | states, that is all gone.
| | 09:17 | Now, there's one last thing to do.
| | 09:19 | As you can see, whenever I click on any
of the items, including CONTACT US and
| | 09:23 | HOME, the accordion panel
expands to its full height.
| | 09:27 | In fact, when I go to ABOUT, I am
getting a lot of wasted space here, and the
| | 09:31 | same thing, less true, of PROCESS
because that pretty much fills it out.
| | 09:35 | But we want to collapse this accordion
panel, and the way you do that is back to
| | 09:40 | Code, go to the Source Code, and then
go all the way down to the bottom of the
| | 09:46 | page where you'll see the Script icon
that sets up accordion1 initially.
| | 09:53 | And we're going to add in an attribute here
just past where it says accordion1.
| | 09:58 | Make sure that you pass the quotation
marks and then enter a comma, and an open
| | 10:04 | curly brace, and a space, and now we're
going to use a keyword called use--code
| | 10:09 | hints comes up for us where
it says useFixedpanelHeights.
| | 10:13 | So I'll click Return there and
unfortunately this is hiding my view, but I want
| | 10:19 | false. And then I am going to go ahead
and set the default panel which will be
| | 10:25 | the first one, so I enter a comma,
and the keyword 'defaultpanel', and again my
| | 10:32 | code hints pop up and Dreamweaver helps
me out with a colon there, and you put 0
| | 10:36 | because that is the first accordion
panel. And then we close off our curly
| | 10:41 | brace and we're done.
| | 10:43 | So let's save this, head over to
Design view, and see how it works.
| | 10:49 | So as you can see, my HOME does not open
up, even though it is the default panel,
| | 10:54 | and when I go to ABOUT, it
only opens enough for the content.
| | 10:58 | Of course, you could add non-
navigation content to the panels, as well as the
| | 11:02 | links, to provide
additional explanation as needed.
| | 11:05 | You'll find that accordion panel
navigation is extremely flexible.
| | Collapse this transcript |
| Advanced Spry menu techniques| 00:00 | Spry hasn't been standing still, and
the engineering team has improved on the
| | 00:04 | original, with better cross-browser
compatibility and enhanced flexibility.
| | 00:09 | The new Spry menu 2.0 widget is
available now in the Widget Browser.
| | 00:14 | You access the Widget Browser by going
up to the app bar and clicking on the
| | 00:19 | Extension area and choosing Widget Browser.
| | 00:24 | Now if you have never opened the Widget
Browser, it will load and install, and if
| | 00:28 | you don't have Adobe AIR installed on
your system, it will install that as well.
| | 00:32 | As this is a AIR application, we will
need to sign in to the Adobe Exchange in
| | 00:38 | order to use the Widget Browser,
| | 00:39 | so I am going to go
ahead and click Sign In here.
| | 00:41 | So enter your username and your
password and then click Sign In.
| | 00:55 | And once you're signed in, you can take a
look at all the widgets that are available.
| | 00:59 | We are looking for one of the Spry components,
| | 01:02 | so the fast way to do that is to choose
Sort By > Widget Name and then enter in 'Spry'.
| | 01:09 | And here you'll see the Spry Menu Bar 2.0.
| | 01:12 | Go ahead and click on that and it
will give you a brief review and some
| | 01:17 | information about that,
| | 01:18 | show you all the compatible browsers.
And if you click Add to my Widgets, the
| | 01:24 | license will come up. Co ahead and click Accept.
| | 01:28 | There's a little informative dialog box
that appears telling you that it's been
| | 01:32 | added to your My Widgets and you
can also pick it up in Dreamweaver.
| | 01:36 | So we will click on Go to My Widgets, and
now let's do a little configuration, and
| | 01:40 | this is one of the really nice
things about the Spry menu bar 2.0.
| | 01:43 | You can configure it in any number of
ways and then apply those configurations
| | 01:48 | on the various sites.
| | 01:49 | One of the enhancements here is that
here's the standard menu as it was set up
| | 01:54 | before, and you can see that the width of
the submenu is preset to a fixed width.
| | 02:00 | But if I choose AutoWidth, it expands to
whatever the width of the top-level item is.
| | 02:06 | So let's go ahead and use that as our
base, and we will click on Configure so
| | 02:11 | that we can fine-tune this particular preset.
| | 02:15 | So there are a number of different
categories to choose from, and you could start
| | 02:18 | in Binding & Behavior where you could
control how long it takes for each of the
| | 02:22 | menu items to show and hide, but let's
leave those as they are and we are going
| | 02:26 | to go to Fonts now and we are going
to change the Font Family to something
| | 02:31 | that's better suited for my
site, which is Trebuchet MS.
| | 02:35 | Let's up the font size a bit from 16
to 18, and you can see the changes take
| | 02:41 | place over on the
right-hand side in the Live view.
| | 02:44 | I am going to change the font weight to
bold, and now for the submenu, which is of
| | 02:50 | course all the subnavigation,
| | 02:52 | let's change that font again to
Trebuchet MS, Arial, Helvetica, sans-serif.
| | 02:56 | We will leave the size at
14 and the weight at normal.
| | 03:01 | Now, let's move on to the Menu Bar Layout, and
this is where you would switch the orientation.
| | 03:06 | If you had a horizontal menu bar, you
would leave it set to horizontal, and if
| | 03:10 | you had a vertical, you could choose that.
| | 03:12 | So we are working with horizontal,
| | 03:14 | so I'll leave that alone, and there is a
number of different positioning elements
| | 03:18 | that you can choose from.
| | 03:19 | This controls the width of the sub
navigation that I showed you at the beginning.
| | 03:23 | I am going to change the width of
this from 80 ems to 700 pixels, and my
| | 03:31 | label width for the items
I am going to make 40 pixels wide.
| | 03:37 | Now, we have also a submenu
layout, which is pretty robust.
| | 03:42 | As you can see, there's lots of
different types of padding and label attributes
| | 03:46 | that you can work with.
| | 03:47 | Let's leave that as it is, and let's go
ahead and move on to the Colors section.
| | 03:52 | Now I am going to go ahead and open up
Menu bar Background and this color picker
| | 03:58 | not quite as robust as the ones built
within Dreamweaver, so you do have to
| | 04:03 | know your color values, unless you're
choosing from one of the ones here, and you
| | 04:08 | also don't want to put in a leading hash mark.
| | 04:11 | So I am just going to delete the
existing color value, and I am going to put in
| | 04:16 | the one that I have jotted down
for my site, which would be 759B46.
| | 04:23 | I am going to go ahead and copy this
because I am going to need this same value
| | 04:27 | for multiple other ones.
| | 04:29 | Press Return in order to lock that in.
| | 04:32 | Now let's go ahead and add that in to
the others, and I am just going to paste
| | 04:35 | that in and then press Return or Enter.
| | 04:38 | We also want to address the label
background and then the item background: hover.
| | 04:45 | I don't want this to change.
| | 04:46 | I am going to have my colors change instead.
| | 04:50 | Same thing for the label background: hover.
| | 04:54 | So, five changes in all to this nice rich green.
| | 04:57 | Let's take a look at the Menu Bar Borders.
| | 05:00 | Now there is nothing here I really want
to change, but I do want to point out as
| | 05:04 | we go down we have control over a first-
item style and a last-item style which I
| | 05:09 | think is a very nice thing because
often you might have a border, let's say on
| | 05:14 | the right, where you don't want to have
that appear on the right of your last item,
| | 05:19 | and you could use that to make a change
here. And there is also similar sort of
| | 05:24 | attributes and options in Submenu Borders.
| | 05:27 | Okay we are pretty much done
here with our basic configuration.
| | 05:31 | Let's go over to the Live
view side and give it a name.
| | 05:34 | I am going to name this
| | 05:36 | 'OliveNav' and then choose Save Preset,
and that will bring us back to the full
| | 05:42 | preview area where we can take a
look and see how everything is set up.
| | 05:45 | Now of course, it's still got the
default entries used here, but you can see what
| | 05:50 | the style is and how that's all working.
| | 05:53 | Now our widget preset is created and
we are ready to go back to Dreamweaver.
| | 05:56 | Now in Dreamweaver we want to insert
the new widget, but I want to make sure I
| | 06:01 | put it in the right place.
| | 06:03 | So I am going to go ahead and open up
Split view and look for line 57, where
| | 06:08 | it say <div id= "navbar"> and put my cursor
right in there and then open up the Insert menu.
| | 06:16 | Now you could do this through your
Insert panel, but the menu is right here, so
| | 06:20 | let's choose Insert > Widget. And when
the Widget dialog box opens up, the first
| | 06:26 | list displays all the various widgets,
and I'll choose the Spry menu bar 2.0.
| | 06:32 | Then the second one shows the presets
for whatever widget is selected. And if I
| | 06:37 | click on that, I see I have the default
ones as well as my custom one OliveNav.
| | 06:43 | So I will select OliveNav and then click OK.
| | 06:47 | This will put in a lot of code,
including a lot of JavaScript.
| | 06:52 | So let's go up and we'll just select
the unordered list here, because this is
| | 06:59 | content that we need to replace, and
once that's selected, I'll make sure that
| | 07:04 | only the unordered list is selected.
| | 07:07 | I'll open up a file that's in my code
folder called nav.txt within the 02_09
| | 07:16 | folder, and here you see my navigation set
up for my site, all done in unordered list.
| | 07:24 | It is important that you name the ID
menubar, in this case. That is one of
| | 07:28 | the options that you could change in the
configuration module, but I kept it the same.
| | 07:33 | So let's copy that, go to index.html,
and replace one menubar with another.
| | 07:39 | So now let me close off the Files
panel and let's go back to Design view, and
| | 07:46 | here you see my navigation up and
running, complete with all of the subitems
| | 07:52 | exactly as I expected in the Widget Browser.
| | 07:56 | Now, of course you can do a lot more
custom navigation for your CSS. All the
| | 08:01 | Spry menu styles are available for
use in the Spry menu Basic, and the style
| | 08:07 | that is embedded here,
| | 08:09 | these are all the custom CSS ones, so
you would make your changes here and then
| | 08:13 | export that to an external style sheet.
| | 08:16 | With the new Spry menu 2.0 and the
Widget Browser, you can actually create and
| | 08:21 | save a full range of custom
configurations, one for each client, and then
| | 08:25 | apply them quickly and easily with
an even wider range of control and
| | 08:29 | cross-browser support.
| | Collapse this transcript |
|
|
3. Navigation TechniquesConverting lists to menus| 00:00 | One of the most basic navigation
techniques used by modern web designers is to
| | 00:04 | convert an unordered or
bulleted list into a menu.
| | 00:08 | An unordered list is used because it's
really the closest match to a navigation
| | 00:13 | bar, which when you think about
it is just a series of links.
| | 00:18 | Let me show you how to make
the conversion step by step.
| | 00:21 | We'll start by opening up a blank HTML page.
| | 00:24 | I am going to go ahead and save that, and
let's put it in our Chapter 3, 03_01 folder.
| | 00:34 | We'll call it listTomenu.html.
| | 00:40 | Now, the first thing I am going to do
is go ahead and insert a div tag, because
| | 00:44 | quite frequently you want your
navigation to be self-contained, and typically
| | 00:49 | when you're creating the CSS rules for
your unordered list you want to make sure
| | 00:53 | that you're only affecting the unordered
list that's within that particular div.
| | 00:59 | So I am going to insert a div tag by
going to Insert > Layout Objects > Div Tag, and
| | 01:06 | this ID I am going to call nav and
then click OK, and here you see how
| | 01:12 | Dreamweaver inserts a
little placeholder text for me.
| | 01:15 | Let's go ahead and get rid of that,
and now we'll put in our unordered list.
| | 01:20 | So I'll go down to the Property Inspector
and choose Unordered List, and then here in
| | 01:25 | the first item, which is Home, hit
Return or Enter and then put in Products,
| | 01:32 | Services, and About Us--all very quick and easy.
| | 01:37 | Now the next step is to convert this
standard unordered list to a series of links.
| | 01:41 | So let's double-click on Home, and in
the link field of the Property Inspector
| | 01:46 | put in the name of my homepage,
which normally for me is index.htm.
| | 01:53 | We'll double-click Products
and name that products.htm.
| | 02:00 | Services, of course, services.htm, and
About Us will simply be about.htm.
| | 02:13 | So now I have my unordered list within
a specific div called nav, and I am ready
| | 02:18 | to begin creating my CSS rules.
| | 02:20 | So I am going to go ahead and click on
<ul> here because I like working from the
| | 02:24 | outside in when I'm creating these rule sets.
| | 02:27 | Let's open up the CSS Styles panel
where you see we have no styles defined yet.
| | 02:33 | I'll create a new rule, and as you can
see, Dreamweaver recognizes that I probably
| | 02:38 | want to create a compound rule where I
have my div listed first ,followed by the
| | 02:43 | <ul>, and that's exactly what I am going to do.
| | 02:45 | So we'll store this in
this document only for now.
| | 02:48 | I'll click OK, and the first thing I want to
do is get rid of the bullets that we see there.
| | 02:54 | So let's go to the List category of
the CSS Rule definition dialog box, and in
| | 03:01 | the List-style-type field, choose none.
| | 03:06 | Click OK and the bullets are gone.
| | 03:10 | The next thing we want to do is target
the list item for each individual one,
| | 03:14 | so I'll just put my cursor there and
then choose <li> from the tag selector, and
| | 03:20 | here what we are going to do is have
each of the items move from a vertical list
| | 03:24 | to a horizontal list, and you do that
by floating all of the various items.
| | 03:28 | So let's create another
new rule. This is nav ul li.
| | 03:33 | That's correct.
| | 03:35 | Go to OK, and we want to change, in
the Box category, the Float property.
| | 03:41 | We are going to make everything float left.
| | 03:43 | We also want to add some space in
between the various items, which you can see
| | 03:48 | if I click Apply here, they are
just right next to each other.
| | 03:51 | So let's open that up a little bit, and
we'll do that by clearing the Same for
| | 03:56 | all check box in the Margin, and under
Margin Right, we'll add 40 pixels and then
| | 04:04 | go and click Apply, and you can see the
separation has already taken place there.
| | 04:08 | Now the next thing I want to do is make
sure that my text items are centered in
| | 04:12 | my navigation button.
| | 04:13 | So let's go to Block and under Text
Align, choose Center. Click OK and now we are
| | 04:21 | ready to move on to the anchor tag,
which is the next element that we see here.
| | 04:26 | So with that selected, choose New CSS
Rule, and you can see how we're getting
| | 04:34 | finer and finer on our selector. Click OK.
| | 04:39 | Here we want to set up an interactive
area for the button, so rather than making
| | 04:45 | the link just the underlying portion
that you see on the screen, we want to
| | 04:49 | expand that so that it also takes
in the other areas of the button.
| | 04:54 | To do that, we need to go to the
Block category and in the Display
| | 04:58 | Property choose block.
| | 05:01 | Now let's go ahead and put a border
around our button, so we can easily identify it.
| | 05:07 | So I'll go to border and
we'll choose a solid border.
| | 05:13 | Let's just make it one pixel wide, and
let's go ahead and just give it a kind
| | 05:19 | of medium gray of 666.
| | 05:22 | Next, we want to increase the padding
to the left and the right, and that will
| | 05:26 | increase the hit area of the button.
| | 05:29 | So Padding is under Box.
| | 05:31 | I don't want to increase it on the
top, so I'm going to deselect Same for
| | 05:35 | all central, and then under Top and
Bottom, I'll set 0, and in Right and Left, I
| | 05:41 | am going to put 20.
| | 05:46 | We click OK, and you can see how each
button is now centered within a particular area.
| | 05:52 | If we go into Live view and I move my
cursor over it, you can see that the Hit
| | 05:57 | area has expanded into the
full range of the button.
| | 06:00 | All that's left now is
to set up the link states.
| | 06:03 | So let's drop out of Live view.
| | 06:04 | I am going to go ahead and put my
cursor in here and then click on the anchor
| | 06:10 | tag and create another new rule.
| | 06:14 | In this case, we're going to actually
extend what Dreamweaver has chosen for us,
| | 06:19 | and we want to target the first link
state, which is a:link, and then you put a
| | 06:26 | comma because we're going to group that.
| | 06:27 | Now I am just going to copy this first
part here to avoid having to retype it,
| | 06:32 | and after I've pasted it in, I add
the second link state which is visited.
| | 06:37 | While you might want your ordinary
links to change color according to whether
| | 06:43 | they've been visited or not, quite
typically you don't want that to be the case
| | 06:47 | for your navigation buttons.
| | 06:48 | So, we'll keep these both
the same, and I'll click OK.
| | 06:53 | Now, let's set the text of the
color to black, and let's turn off the
| | 06:58 | Text-decoration, and that
will define the initial state.
| | 07:04 | Now we are ready to do the hover state,
and let's take a little shortcut here.
| | 07:09 | I'll click on the last rule that I defined
and then do a right-click and choose duplicate.
| | 07:15 | So now I can just go in and modify
the two states and change 'link' to 'hover'
| | 07:21 | and 'visited' to 'active'. Again, click OK.
| | 07:26 | Now we'll select that rule in the
CSS Styles panel, and this time let's
| | 07:32 | change the color to red.
| | 07:36 | So once I enter into Live view, you can
see that I have a red color whenever I
| | 07:41 | hover over the buttons.
| | 07:43 | Now, from here you can add a ton of
bells and whistles, from background images to
| | 07:49 | JavaScripted animation, but it all
starts with this basic unordered list to
| | 07:53 | menu styling with CSS.
| | Collapse this transcript |
| Working with background images| 00:00 | Straight text will only get you so far
in designing navigation buttons and bars.
| | 00:05 | A primary method for incorporating imagery
is to use the CSS background image property.
| | 00:11 | Let's first look at a basic technique
that uses two images: one for the standard
| | 00:16 | navigation button and
another for its hover state.
| | 00:19 | Before we get underway, let me show you
what the final product will look like by
| | 00:23 | going to this backgrounds.htm file
from the Final folder in the Chapter 3
| | 00:28 | exercise files, 03_02 folder.
| | 00:31 | As you can see here, I have a nice
gradient background, and when I roll over it I
| | 00:35 | get a reverse of that and
the color stays the same.
| | 00:38 | Of course, you could modify
the color if you wanted to.
| | 00:41 | Okay, so let's go back and start
converting our basic navigation bar to
| | 00:46 | something with graphics.
| | 00:47 | So I am going to open up the CSS Styles
panel and extend my existing styles here.
| | 00:53 | Now typically, when you're adding in
background graphics it's going to go to the
| | 00:57 | anchor tag, and the selector that
controls our anchor tag here is this one, the
| | 01:02 | nav ul li a. So once that's selected, I
can click Edit Rule and open up the CSS
| | 01:11 | Rule Definition dialog box.
| | 01:13 | I find it's a little easier when
you're working with background images to use
| | 01:17 | this dialog box so that you can use the
Browse button and all the controls are right here.
| | 01:21 | So let's browse for an image, and
we're going to the images folder that's
| | 01:27 | in 03_02 of Chapter 3 files, and here
you'll see button_bg.gif, so we'll choose that.
| | 01:37 | And because we want this image to
expand to fill out the space of the button
| | 01:41 | no matter how big it is, we'll use the
Background-repeat property and set that to repeat-X.
| | 01:48 | At this point there's no need to
position it using either of the
| | 01:51 | Background-position property, so we'll
just leave those blank and click OK.
| | 01:56 | And now you can see it fills out quite nicely,
| | 01:59 | but it doesn't totally bring
in the full width of the image.
| | 02:03 | Let me show you exactly
what the image looks like.
| | 02:05 | I am going to dropout of Live view
for a second here and hit a couple of
| | 02:08 | Returns, and then let's bring in the
two images, the hover, and the standard
| | 02:15 | state that we're working with.
| | 02:17 | Let's expand that a little bit, so
we can see the full file names there.
| | 02:24 | So first, I'll bring in the button_bg.
No need for putting in our alternate text here.
| | 02:33 | And as you can see, that's just a
small graphic, 10 pixels wide, with a
| | 02:38 | two-tone color there.
| | 02:39 | Let me hit Return so you can see what
the next one looks like. And I'll just
| | 02:46 | drag that onto the screen.
| | 02:50 | And here you see the darker--it's
actually an inverse of that slightly darkened.
| | 02:55 | So these are the images that we're working with.
| | 02:57 | As you can tell, this image is larger
than what I have here, so I am going to
| | 03:01 | need to expand the height of that.
| | 03:03 | Let me go ahead and get rid of these two
images and shorten up my nav bar there.
| | 03:10 | Let's go back to our Style panel,
and now we want to increase the height and
| | 03:15 | actually let's go ahead and increase
the width as well. And that's all handled
| | 03:18 | through the li selector here.
| | 03:21 | So once I have that selected, I am
going to go ahead and increase the width of
| | 03:25 | each list item and set it to 150 pixels.
| | 03:31 | Now I also want to increase the
height, but you don't actually use the
| | 03:35 | Height property as you might think;
instead, because these are text elements,
| | 03:39 | you use line height.
| | 03:43 | So that's line-height, and we'll make it the
full height of the graphic, which is 32 pixels.
| | 03:52 | And now you get the gradient effect.
| | 03:54 | Let me go into Live view, so you
can see that a little bit cleaner.
| | 03:57 | So now if we want the text to stand
out a little bit more, we can add a
| | 04:01 | different color property to the link
and visited hover states. Right now you
| | 04:06 | see that it's black.
| | 04:07 | Let's change that to white, and there
it stands out quite a bit differently.
| | 04:11 | Now let's go to the hover state,
and here you see we have a red color.
| | 04:16 | I think it'd be better if we stick
with white and let the background change
| | 04:19 | instead, so we'll go ahead and choose a
new background image by clicking Edit
| | 04:26 | Rule > Background category > Browse and
we'll go to button_hover_bg, click Choose,
| | 04:34 | and again we want this to repeat-x, and click OK.
| | 04:39 | So now when we hover over it, we get a
nice variation there with the buttons.
| | 04:44 | Now, there is a lot of different
things you can do from this stage.
| | 04:47 | You can even add another background
image to the ul selector to wrap all the nav
| | 04:51 | buttons in a single image.
| | 04:53 | To do that, you would go to the nav ul rule.
| | 04:56 | So let's open up our CSS Rule
Definition dialog box one more time, go to the
| | 05:01 | Background category, and click Browse
next to Background-image, and here we'll
| | 05:06 | choose the image called fullnav.png.
| | 05:11 | Now this one we definitely don't want
to repeat, so I'll choose no-repeat, and I
| | 05:16 | also have to give it a
specific width and height.
| | 05:19 | So let's go to the Box category for that.
| | 05:22 | The width of this image is
672 pixels, and the height is 52.
| | 05:31 | So I'll click OK, and there's my background
image wrapping around all of my buttons there.
| | 05:39 | We've literally just scratched the
surface with what you can do with background
| | 05:42 | images and navigation.
| | 05:44 | Let your imagination go wild.
| | Collapse this transcript |
| Implementing sprites| 00:00 | One technique for incorporating
imagery with navigation is to use multiple
| | 00:04 | graphic files--one for each link
state: link visited, hover, and active.
| | 00:10 | While effective, this method does
require a number of file requests to the host
| | 00:13 | server, which can quickly add up,
increasing the bandwidth and response time.
| | 00:18 | Another technique, referred to as sprites,
uses a single image for all states and
| | 00:24 | is accomplished with just
a little CSS manipulation.
| | 00:28 | Let's take a look at an example.
| | 00:29 | Here I have the mission.htm file
here, and as I roll over each of the main
| | 00:36 | navigation items, you see that the
background image, which is the star and the
| | 00:40 | line, changes and the text also changes.
But it's really the background image that
| | 00:45 | we are looking at here. And this is a
single image that is being repositioned
| | 00:49 | using the CSS background position property.
| | 00:53 | Let's take a look at that
actual image, which I have here.
| | 00:57 | Now, you will notice that this has
actually three different states, and we are
| | 01:01 | only using the first two so far, but as I
will show you in just a moment, you can
| | 01:05 | easily add the third state.
| | 01:07 | You can easily develop sprite images
like this one in your favorite graphics
| | 01:11 | editor, such as Photoshop or Fireworks.
| | 01:13 | Let's go back and take a closer
look at the CSS for the link and hover.
| | 01:18 | Go back to my mission.htm page and
open up our CSS Styles panel, and in the
| | 01:24 | SprymenuBarVertical.css file,
let's go down to the anchor tag called
| | 01:32 | ul.menuBarVerticalanchor. And here you
see the background image, and if I open it
| | 01:39 | up into the Edit Rule, you can see
that it's set up using the background
| | 01:44 | position elements here, setting it to
left and top. And that's going to show the
| | 01:49 | very first image, which is that darker
green gray star that we see here. Okay.
| | 01:56 | Let's take a look now at the hover
state, and here you see that just a couple
| | 01:59 | of rules down at ul.menuBarVertical a:hover,
and it also covers the focus state as well.
| | 02:06 | So, I will select that, and notice
that there's not a second call for the
| | 02:11 | background image here as you
might suspect, but instead there is a
| | 02:15 | background position.
| | 02:17 | Let me see if I can open that up just a
little bit, so you can see the full thing.
| | 02:19 | There is the background-position property
just repositioning the existing graphic.
| | 02:25 | This value here is 272 pixels for
the left, and how do you get that value?
| | 02:32 | Well, let's go over and take
a look at the actual graphic.
| | 02:35 | You can actually size this up either
in your graphics program, or if you don't
| | 02:40 | have that handy, you can
do it within Dreamweaver.
| | 02:42 | So, I have my image
selected and my rulers are on.
| | 02:46 | I am going to pull out a guide and
have that lock to the start of the image.
| | 02:49 | And now as I pull out a second rule, I
am going to hold down the Command key on
| | 02:54 | the Mac and you would hold
down the Ctrl key on the PC.
| | 02:57 | And as I do it, you can see the
measurement there now is at 210-225 and it goes
| | 03:03 | up to the end of the first graphic,
which is 272. And that's the actual
| | 03:09 | measurement that I want to use, but you
set it in negative, because you are going to
| | 03:13 | be pushing the graphic off to left, so
it will actually start right here.
| | 03:17 | So, that's why the orange shows up on hover.
| | 03:20 | So, we can use the same
technique to set up a third state.
| | 03:24 | I am going to go ahead and bring my
guide over and hold down my Command key
| | 03:30 | so I see at the end here, it's 540
pixels. So we see that it has a measurement of
| | 03:35 | 544 pixels, so we'll use -544 pixels
to position it for the third state.
| | 03:43 | Let's switch back to our mission.htm
file, and what we want to do is set it up so
| | 03:48 | that since we are on the mission page
that the Mission navigation item is shown
| | 03:53 | as selected using that
third section of the sprite.
| | 03:57 | So, we are going to create a new rule,
and this will be a Compound rule, and
| | 04:05 | again, we are going to target the
ul.MenuBarVertical class, then look for the
| | 04:14 | list item and the anchor tag.
| | 04:17 | Now, I am going to add an additional
class to this to indicate that it is the
| | 04:21 | currently selected page.
| | 04:22 | I will just call that current and click OK.
| | 04:27 | And we go to the Background category and
in the Background-position, we choose -544.
| | 04:35 | Now I am going to go ahead and put in a 0
here to avoid problems with some browsers.
| | 04:41 | So, the other thing I want to do in
this new rule is change the color for the
| | 04:45 | type to match that background
image, which is a medium gray of 666.
| | 04:51 | So, with that done, let's go ahead and
click OK, and the next step is to add that
| | 04:57 | class that we talked
about to the Mission tag here.
| | 05:01 | So, I'll go into the Split
view, close off the panel.
| | 05:05 | Let's go ahead and click on that to
bring that in to view, and we want to add
| | 05:09 | this as a class here.
| | 05:11 | Now, you can use multiple classes in
Dreamweaver, so I am just going to type a
| | 05:16 | space and add a new class of current.
| | 05:20 | And you can see as I start to type it,
Dreamweaver uses code hints to pinpoint
| | 05:25 | the exact one I am looking for.
| | 05:26 | So I will go ahead and just hit Return.
| | 05:29 | And let's flip back to Design view now,
and because we are in Live view, you can
| | 05:33 | see it's already been updated.
| | 05:35 | I now have my third state showing with
both text and graphics. Thanks to the CSS
| | 05:42 | Background-position property,
integrating different sprite positions into your
| | 05:47 | navigation states is a very clean,
and dare I say refreshing, approach.
| | Collapse this transcript |
| Setting up adjustable backgrounds| 00:00 | One of the most popular types of
navigation buttons are those that use
| | 00:03 | rounded corners--either completely
surrounding the button or just on the top, as with tabs.
| | 00:09 | If all the buttons were the same length
in your navigation, you could simply use
| | 00:13 | a single background image.
| | 00:15 | However, the text in navigation
buttons often varies in length, from the four-
| | 00:19 | character home to a
comparatively lengthy goods and services.
| | 00:23 | A solution for this problem, called the
Sliding Door technique, was developed by
| | 00:27 | Douglas Bowman for A List Apart back in
the stone age of the web, around 2003.
| | 00:33 | The Sliding Door technique separates the
button image into two parts, like this,
| | 00:40 | one part contains the left corner and
most of the expanse of the button and the
| | 00:44 | other part contains just the right corner.
| | 00:48 | Because the first part is set as the
background image of the navigation button,
| | 00:53 | it only displays as much of the graphic
as needed to display the text and merges
| | 00:58 | seamlessly with the second part
to form a single navigation button.
| | 01:03 | Now, the earliest incarnation of the
Sliding Door technique used two different images.
| | 01:08 | More recently, it has been updated to
use sprites, and that's exactly what I
| | 01:12 | am about to show you.
| | 01:14 | So here we have slidingDoors.htm from
the Chapter 3 exercise files in the 03_04
| | 01:22 | folder, and let me just go into
Live view for a quick second.
| | 01:25 | So you can see it's a really basic
navigation bar with just basically
| | 01:29 | hover states in it.
| | 01:31 | And what we're going to do is we are
going to use a single image that has both
| | 01:36 | the standard link states as well as the
hover states in it in a sprite format.
| | 01:42 | So you will see that there are actually
four parts to this one big sprite here.
| | 01:46 | In order to assign the background
graphics appropriately, you need to add
| | 01:50 | another level of markup to your unordered list.
| | 01:54 | Instead of just having an unordered list
where we have the list items and anchor
| | 01:59 | tag and then the text,
| | 02:01 | we need to put a span tag around the text.
| | 02:04 | So that's done pretty easily.
| | 02:05 | If you go into Split view or Code
view and select the text, then press
| | 02:10 | Command+T or Ctrl+T, that will open
the Quick Tag Editor in Wrapper mode.
| | 02:16 | And just type in 'span' and press Return
or Enter and Dreamweaver will wrap the
| | 02:22 | selected text with a span tag.
| | 02:24 | So let's do that for each of these/
| | 02:25 | Command+T or Ctrl+T > span, and let's
select About Us, so we get all of that, and
| | 02:37 | then Command+T or Ctrl+T one more
time to open the Quick Tag Editor in Wrap
| | 02:41 | mode, and now we have spans
for all of our list items.
| | 02:46 | Okay, let's go back to Design mode here, and I
will go over and open up the CSS Styles panel.
| | 02:53 | As I have stated before in this course,
most of the time you're putting your
| | 02:56 | background graphics onto the anchor tag.
| | 02:58 | So I will go ahead and select #nav
ul li a, and we're going to use as a
| | 03:03 | background graphic this section here,
so that will form the right edge of
| | 03:08 | the standard state.
| | 03:09 | I'll go to Edit Rule and open up my
CSS Rule Definition dialog box so I can
| | 03:17 | quickly go to the Browse function
here in the Background category, and I'll
| | 03:22 | choose tab.png, which is our
Sprite image. Click Choose.
| | 03:27 | Now, we don't want this to repeat.
| | 03:28 | So under the Background-repeat
option, you choose no-repeat and
| | 03:33 | background-position is critical here.
| | 03:35 | So on the X axis, we will go to the
right, and on the Y axis, we will enter in
| | 03:42 | -140. And that will move the
sprite image up so that the top of the
| | 03:48 | right-hand side is targeted.
| | 03:50 | Click OK, and there is a
right edge of our buttons.
| | 03:54 | So I do want to show you
how I got that measurement.
| | 03:57 | I have the rule on here and my first
guide is locked down to the top of the image.
| | 04:03 | Now, if I pull out another guide and
hold down the Command key or Ctrl key, I
| | 04:08 | can get an ongoing output of
measurements, and you can see as I get to the top
| | 04:12 | here, it is really at 140.
| | 04:16 | So that value that you see there at 140
pixels you need to set negative so you
| | 04:21 | can shift up the sprite to the right position.
| | 04:25 | Okay, let's go back to our
slidingDoors.htm file, and now we are going to
| | 04:29 | go ahead and put in a new rule so
that we can add a background image for
| | 04:32 | the left-hand side.
| | 04:33 | Well, this new rule goes to the Span tag.
| | 04:38 | It is #nav ul li a span, and we
will save it again in this document.
| | 04:45 | So now we will go to the Background
category and browse and in our Images
| | 04:51 | folder, choose tab.png. Make sure we
set no-repeat and then the position, we
| | 04:57 | want to go to the left and the top.
| | 05:00 | Now to make sure that this background
is applied throughout the length of the
| | 05:03 | text, we need to go to the Block
category and choose Display > block.
| | 05:08 | There is a little bit of
padding that we will need to add.
| | 05:13 | I will go to the Box category and under
padding, deselect Same for all, and this
| | 05:19 | is just to get the text
to line up properly within our image.
| | 05:22 | So we have 10 pixels at top, 15 on the
right, 0 at bottom, and 30 on the left.
| | 05:33 | All right, let's click OK, and now
you see our full buttons there, and the
| | 05:38 | hover states are all active, but we want to
change the background, also for the hover state.
| | 05:43 | So let's go over to the hover state
that we see here, and we will add a
| | 05:49 | background position property.
| | 05:50 | There is no need to add a background
image property here because that is
| | 05:57 | already in place, and now we will be
going to the second tab on the right, which
| | 06:05 | was the one closest to the bottom and
that is positioned on the X axis at right
| | 06:09 | and 210 pixels down.
| | 06:13 | So that handles the hover state on the
right-hand side, and as you can see, when I
| | 06:17 | hover over it, the right
cap shifts and that's fine.
| | 06:20 | But we need to do the same thing for
the left, and that will require a new rule,
| | 06:28 | and this will be a
Compound rule, #nav ul li a:hover.
| | 06:35 | So we are working with the hover
states here, and we are targeting the span tag
| | 06:39 | which if you recall that's where we put
the background image initially for the
| | 06:43 | sprite. And let's do that
for the active state as well.
| | 06:47 | So I will just go ahead and copy this and
paste it in and then change hover to active.
| | 06:58 | I will click OK, go to the Background
category, and choose left, and this time we
| | 07:07 | are only going down to 70 pixels.
| | 07:08 | So -70 is entered there.
| | 07:12 | I'll click OK, so now the entire
button shifts seamlessly, and of course we
| | 07:18 | could do things like changing
the text color and so forth.
| | 07:20 | Now I did want to show you in the code
that there are a few adjustments, a.k.a.
| | 07:28 | hacks and filters, that we need to put
in an order to make sure that this work
| | 07:32 | properly cross-browser.
| | 07:34 | Now the first one addresses the anchor
tag, and this just removes a little extra
| | 07:39 | side padding in Internet Explorer
by setting that to overflow visible.
| | 07:44 | There is a specific way of targeting
Firefox by using this construction of
| | 07:50 | anchor::, and then putting in a Mozilla-
specific property and setting the border
| | 07:57 | to none, which handles the extra padding there.
| | 08:00 | Now Safari and Google Chrome also have
some issues, and this is how you address them.
| | 08:05 | So you can use these three adjustments
in all of your sites whenever you are
| | 08:09 | using the Sliding Door technique and
just forget that they're there because
| | 08:13 | they'll handle all of
these problems automatically.
| | 08:18 | Now one thing I want to point out is the
flexibility of the Sliding Door technique.
| | 08:22 | Let me close off the CSS Styles panel and
we'll go to Split mode, close that
| | 08:28 | down just a bit, so we get to see it.
| | 08:30 | Now if I go to Products and let's say
that the client has decided to redo his
| | 08:35 | navigation and they are going to group
Products and Services together, so we'll
| | 08:40 | put Products and Services. And instead
of a Services page there, they want to
| | 08:44 | make that a Contact page.
| | 08:46 | So we will change the a tag,
and we will change the label.
| | 08:52 | Now when go back to Design view, we
will notice my Sliding Door button works
| | 08:56 | perfectly--even with this longer text--
and I can easily shift things around.
| | 09:00 | It who keeps it very, very flexible.
| | Collapse this transcript |
| Designing accessible navigation| 00:00 | Making your web site accessible is not
only the right thing to do, but for many
| | 00:03 | sites, it's the law.
| | 00:05 | You can help those using assistive
technology navigate around your site by
| | 00:09 | following a few simple practices.
| | 00:12 | First, you need to make sure that
your navigation is available under all
| | 00:15 | conditions, including the lack of CSS.
| | 00:18 | Basing your site navigation on an
unordered list is ideal for this.
| | 00:22 | You can verify its accessibility
with a simple Dreamweaver technique.
| | 00:26 | So here I have opened a mission.htm from the
Chapter 3 exercise files, in the 03_05 folder.
| | 00:33 | As you can see, we have
our navigation showing here.
| | 00:36 | I am going go ahead and bring up the
Style Rendering toolbar by right-clicking
| | 00:41 | on any of the other toolbars and
choosing Style Rendering. And right in the dead
| | 00:46 | center there is the toggle
for displaying the CSS styles.
| | 00:49 | It's currently pressed in, or is on.
| | 00:52 | So let's turn that off, and now you
can see what people would see if they
| | 00:56 | didn't have CSS enabled.
| | 00:58 | Even though this is a Spry menu bar,
it's a nice list of links, including an
| | 01:03 | indented list for the subnavigation.
And this particular page happens to have
| | 01:08 | additional quick nav down below, which
is also set up as an unordered list.
| | 01:12 | I'll toggle the CSS back on.
| | 01:15 | Well of course it's better for you as
a designer for those folks to view your
| | 01:19 | pages the way you intend them with
the CSS to meet accessibility standards
| | 01:24 | you'll need to make sure that
it still works even without CSS.
| | 01:28 | Another important check is to make
sure you're supporting the focus state.
| | 01:32 | Focus is similar to active but subtly different.
| | 01:36 | The active state is triggered when
the mouse button is down, when a link is
| | 01:40 | clicked in other words.
| | 01:42 | Now this also gives the link of focus
until the user clicks elsewhere on the page.
| | 01:48 | However, if a site visitor is using the
keyboard for navigation by pressing Tab
| | 01:52 | to move forward through the links and
Shift+Tab to move backwards, a link can
| | 01:57 | have focus, meaning that the user
has tabbed into it but not be active.
| | 02:02 | It will activate when the
user presses Enter or Return.
| | 02:06 | So it's considered a best accessibility
practice to include the focus states in your CSS.
| | 02:12 | Another technique which is gaining
traction among designers is the inclusion of
| | 02:17 | a list of quick navigation
links at the top of the page.
| | 02:20 | This is an enhancement on the skip
navigation technique, which allows folks using
| | 02:24 | screen readers to jump over the
navigation to get right to the main content.
| | 02:29 | This new technique allows users to move
immediately to multiple key areas, such
| | 02:34 | as your navigation, your
content, and even your footers.
| | 02:37 | Let's take a look at how it works. So I
am going to go into Split view here and
| | 02:42 | put my cursor right after the body tag,
create a new line, and I'm going to go
| | 02:47 | ahead and put in an unordered list.
| | 02:49 | I'm going to use a shortcut by
bringing open the Property Inspector here and
| | 02:52 | clicking Refresh, and that will allow me
to actually set up an unordered list by
| | 02:57 | just clicking the button here--quick
shortcut there to avoid having to write all
| | 03:01 | that code. But now I am going to put in
the anchor tag with an href that will be
| | 03:07 | set to the ID, main content, which
is indicated by a #mainContent.
| | 03:10 | I am going to go ahead and add in an
access key, and we'll make this p, for page,
| | 03:19 | and we'll give it a title,
which will be 'Skip to page content'.
| | 03:26 | Now eventually this will be placed
off screen so that visitors not using
| | 03:31 | assistive technology won't see it, but
those who are will encounter it initially
| | 03:37 | and the screen reader will
read "Skip to page content."
| | 03:41 | So we'll close off that a tag, put in
our label, which is page content, and then
| | 03:47 | close off the anchor tag.
| | 03:48 | All right, I'm just going to copy that, and
we'll paste it once and make some changes here.
| | 03:56 | So the second link will go to the
navigation, so instead of mainContent, it goes
| | 04:02 | to mainNav, and we'll skip to navigation.
| | 04:10 | I'll change the accesskey to n, and instead
of page content, we'll make that navigation.
| | 04:17 | All right, let's copy that one
more time, and we'll change the href to
| | 04:25 | mainFooter, make the accesskey f, and
say Skip to footer and change Navigation
| | 04:36 | to footer of course.
| | 04:38 | So two of our IDs already exist,
mainContent and main Nav, and I'll show you those now.
| | 04:44 | Here is in ID to mainNav, and then once
we get pass the navigation, here is the
| | 04:49 | section with an ID of mainContent.
| | 04:51 | Now I still need to add the ID to my
footer, so I am going to go ahead and
| | 04:59 | scroll down to the footer area here
and just click into that and then choose
| | 05:06 | Footer from the tag selector. And here
you can see it does not have an ID, so
| | 05:10 | let's go ahead and put that attribute in.
| | 05:12 | I'll type ID, hit Return, and
I'm calling this mainFooter.
| | 05:18 | Now if we take a look at the page in
Live view, you can see my navigation is
| | 05:25 | here. And if I press the Command key or
Ctrl key and click on footer, it goes
| | 05:29 | right down to footer.
| | 05:30 | Let's go back up to the top and
the other elements work similarly, so
| | 05:35 | navigation, page content.
| | 05:39 | Now there is an ongoing debate
whether to show or hide your skip links.
| | 05:44 | Many designers feel that since the
main beneficiary are those using screen
| | 05:48 | readers, it's okay to move them off to the
side where that technology will still find them.
| | 05:52 | Other usability experts point out
that many folks could benefit from this
| | 05:56 | navigation shortcut, especially on
lengthy pages and notably on mobile devices.
| | 06:01 | I am going to leave that argument to
the experts and show you how you can hide
| | 06:05 | the links but keep them
accessible should you choose to.
| | 06:08 | It's best to position the unordered
list off screen, rather than use display
| | 06:13 | none, which some assistive
technology ignores completely.
| | 06:17 | So first we'll need to go back into
Split view and give an ID to my unordered
| | 06:23 | list here, and this ID will be skipLinks,
and now we are ready to open up the CSS
| | 06:31 | Styles panel and create a new CSS
rule, and it is an ID for skipLinks here.
| | 06:38 | We'll click on OK, and all we're going
to do is move it to the far left here.
| | 06:43 | So I'll go to the Box category,
deselect Margin Same for all, and in the
| | 06:48 | left field, I'll make this a -2000, which
will move it far over to the left, off screen.
| | 06:56 | I'll click OK back to Design view and
now we don't see our skipLinks, but they're
| | 07:02 | still there for assistive technology.
| | Collapse this transcript |
|
|
4. Horizontal NavigationLooking at the project| 00:00 | Throughout the videos in this
chapter, we're going to build a horizontal
| | 00:03 | navigation bar step by step.
| | 00:05 | The menu will feature dropdown
submenus and background graphics created using
| | 00:09 | some of the methods covered in
the "Navigation Techniques" chapter,
| | 00:13 | so you may want review those
videos if you haven't already.
| | 00:16 | Let's take a look at the menu
we're going to put together.
| | 00:20 | Here I have the index.html file.
| | 00:22 | It's located in the Chapter 04,
exercise files, in the subfolder 04_01.
| | 00:29 | So here we see the main nav, and as I
roll over each of the elements, we have a
| | 00:34 | background graphic that appears.
| | 00:36 | When I roll over a main navigation item
that has a subnavigation, that drops down,
| | 00:41 | and then I can roll in and you can
see the different highlights there.
| | 00:46 | I've maintained the navigation in a
separate external file that we see here.
| | 00:51 | And of course, for our HTML,
we're using an unordered list,
| | 00:57 | all in all a nice highly usable
horizontal menu with a touch of flair.
| | 01:02 | Let's start working on it.
| | Collapse this transcript |
| Building up the basic HTML| 00:00 | The first step in creating a
horizontal navigation bar is to insert the top-
| | 00:04 | level menu items as an unordered list.
| | 00:07 | It's really no different from
creating a bulleted list in the standard
| | 00:10 | content area of the page.
| | 00:12 | So here on my index.html file, from the
Chapter 4 exercise files, you can see
| | 00:18 | that there is no
navigation set up here in Live view.
| | 00:21 | Let's drop out of that and go Design view,
| | 00:23 | and we're going to switch over to
Split view for one second, so that you can
| | 00:27 | see I do have a div set up here
with an id of nav and that's where our
| | 00:32 | unordered list will go.
| | 00:34 | So I'll place the cursor there.
| | 00:35 | Now I am just going to switch back
over to Design view and then click on the
| | 00:39 | Unordered List button down below.
| | 00:42 | And here you can see in the tag
selector I am within the nav div, and I have
| | 00:47 | started my unordered list
with my first list item.
| | 00:49 | So I am going to enter in four items:
Home; About, with an ellipsis; Process,
| | 00:57 | also with subnavigation ellipsis; and Contact.
| | 01:02 | The next step is to convert
all these list items into links.
| | 01:06 | It's best to do this by clicking into
the item and then selecting li--short
| | 01:10 | for list item--in the tag selector.
| | 01:12 | This ensures that all the
text will be properly selected.
| | 01:16 | You want the anchor tag
within the list item tag.
| | 01:20 | All right, so I'll click into Home,
choose li, and then put in index.html in the
| | 01:26 | Link field, press Tab.
| | 01:29 | In the About field, put my
cursor there, choose list item.
| | 01:33 | In this case we're not going to put in a
actual address because there is no About page.
| | 01:38 | This is being used as a
trigger for the subnavigation.
| | 01:42 | So we'll just put in a
pound sign, or a hash mark.
| | 01:47 | And the same thing for Process.
| | 01:49 | Choose that list item, add in a hash mark.
| | 01:53 | Contact of course is a little different.
| | 01:55 | We'll choose that list item and
send that to the contact.html page.
| | 02:02 | Okay, our foundation is laid.
| | 02:04 | Now we're ready to begin
converting the list into navigation buttons.
| | Collapse this transcript |
| Displaying top-level links horizontally| 00:00 | Once you've created your initial
unordered list, it's time to begin the
| | 00:03 | conversion to a series of navigation buttons.
| | 00:06 | As a best practice, the first thing
that I would do is create a new CSS
| | 00:10 | file linked to my main source code to assure
complete separation of content from presentation.
| | 00:16 | With the index.html file from the
Chapter 4 exercise files open, let's choose
| | 00:21 | File > New and then under Page
Type, select CSS and click Create.
| | 00:30 | Now we'll save this file in our CSS
folder, which again is located in 04_03,
| | 00:38 | and name it nav.css.
| | 00:42 | Okay I have saved my CSS file, and I can
go ahead and close that because now the
| | 00:47 | next thing I want to do is link it
to my main source code. And you do that
| | 00:51 | through the CSS Styles panel by going
down and choosing Attach Style Sheet.
| | 00:59 | We'll click Browse and again make
sure you're in the css folder for the
| | 01:04 | appropriate subfolder,
| | 01:06 | choose nav.css, and then create that
link by clicking Choose and click OK.
| | 01:14 | Now you will notice up here in the
Related Files I do have my nav.css.
| | 01:19 | It is, however, separated from the
main.css by just one JavaScript file, which
| | 01:24 | is okay and I could work with that.
| | 01:26 | But if you have a lot of related
files, either JavaScript or other files, you
| | 01:30 | might find it a little bit more
difficult to find all of your various CSS files.
| | 01:35 | So, one thing you can do is group them
together, and this is how you do that.
| | 01:40 | Go to Code. I'll select the linked file
that we just put in, and I'll drag that
| | 01:45 | up. Dreamweaver will scroll through
all the various JavaScript functions, and
| | 01:50 | then I am going to drop it right
after the initial link tag that brings
| | 01:54 | main.css into the document.
| | 01:57 | Now, if I click Refresh, my Related Files
bar shows main.css right next to nav.css.
| | 02:05 | So the first rule that we are going to
create will deal with the nav div itself.
| | 02:09 | If I go into Live view, you can see
that it's definitely not in the right place,
| | 02:13 | and it's wrecking a lot of
havoc with the rest of the page.
| | 02:16 | So let's go into nav.css, and we'll
start our first CSS rule, which will be
| | 02:22 | targeting the nav ID selector there, the
#nav, and I put in my curly brace.
| | 02:30 | Now, let's enter in the width, which I
got from the graphics program that I was
| | 02:35 | using to design the navigation,
and that width is 560 pixels.
| | 02:40 | Now on the next line I am going to add
in the padding, and we are going to put in
| | 02:44 | the 50 pixels of padding at top.
| | 02:46 | This is to handle that background
graphic that you saw appear whenever the main
| | 02:51 | nav items were hovered over.
| | 02:53 | All the others can be set at zero.
| | 02:56 | Next, we want our div to blend in, so I
am going to add in a background color, and
| | 03:05 | this is one of the things that I don't
really like that much about Dreamweaver:
| | 03:08 | If I choose the color to bring up the
color palette, I can only sample the color
| | 03:12 | palette itself or bring
open the extended version.
| | 03:15 | I can't go over into the
Design view and sample it.
| | 03:19 | So what I'll do sometimes is just
choose a placeholder color, like this orange
| | 03:24 | here, and then close that out with a
semicolon. And once I have that, I can go over
| | 03:30 | and click on the CSS Styles panel, and
that will refresh, and you can see that my
| | 03:35 | orange color is now put into the div.
| | 03:37 | Well, if I want to change that, all I
have to do is select the rule and then once
| | 03:43 | I see background color there, I can
click on the color picker and I can go over
| | 03:47 | and sample right from the Design view.
| | 03:51 | Let's go back over to code and
continue entering in our Properties. So I am
| | 03:54 | going to give it a height of 50
pixels and we're going to position this
| | 04:01 | absolutely and put the
left property at 200 pixels--
| | 04:09 | again, these values came from the comp
that I did--and the top property at 50 pixels.
| | 04:18 | So now, if we go over and take a look at
the page--let me close this down just a
| | 04:22 | tad--you can see that's pretty much
in the right place, and best of all, our
| | 04:27 | design is no longer broken up.
| | 04:29 | Next, we'll remove the bullets and any
extra margin by creating a rule that
| | 04:34 | targets the unordered list in the nav div.
| | 04:38 | So I am going to go back to code here,
and we'll start this with nav ul, put in
| | 04:46 | our opening and closing curly braces there.
| | 04:48 | We are going to set the margin to zero
and padding to zero just to make sure
| | 04:54 | that there are no surprises there.
| | 04:57 | Now we also want to get rid of the
bullets, and to do that we use the
| | 05:00 | list-style property.
| | 05:02 | You could list-style-type or just
list-style and set that to none.
| | 05:07 | Now, I am going to set the height of this
to 1.5ems, which will correspond with the
| | 05:16 | line height that we'll set in just a bit.
| | 05:19 | Finally, we are going to add a border
across the bottom with the border-bottom
| | 05:25 | property, and that's going to be one
pixel wide, solid, and the color is a value
| | 05:32 | that I've picked up from my
graphics program, which is #7A9E47.
| | 05:39 | That concludes that rule. So if I
click back into here, you can see that the
| | 05:44 | bullets are now gone and I have kind of
a bright-green line going across there.
| | 05:49 | Now we are ready to create a rule for
the list item itself, which will bring all
| | 05:53 | of these onto a horizontal
configuration rather than vertical.
| | 05:56 | And to do that, we enter in nav ul li.
As you can see, we are just basically
| | 06:04 | drilling down getting more and more specific.
| | 06:07 | We started out with nav, we
went to nav ul, and now nav ul li.
| | 06:15 | The first thing I am going to do is
float everything to the left, and that will
| | 06:18 | bring all the items into
alignment horizontally.
| | 06:23 | If I click over, you can see
them appear one after another.
| | 06:27 | So in order to add a little separation
there, we'll put in some padding, and we
| | 06:32 | want the padding to appear only on one
side, so it's going to be padding right,
| | 06:36 | and I am going to make this 35 pixels,
| | 06:39 | though now if I click over you can see
that it's starting to separate the items.
| | 06:45 | Next, I want to choose the font
that I'm going to be using.
| | 06:48 | So I'll enter in the font property, and I want
the text itself to be 1em as a size, but
| | 06:55 | I want the line height--or the leading
as those designers from the print trades
| | 07:00 | understand--to be 1.5.
| | 07:02 | So you do the font size first
and then the line height size next.
| | 07:09 | So it's 1em over 1.5em.
| | 07:13 | You can then choose the font family,
and we want to choose Arial Helvetica,
| | 07:20 | sans serif here. And once that chosen, I can
go ahead and hit Return. Enter in a semicolon.
| | 07:26 | So this is looking a little bit better,
however, I think I want to distinguish
| | 07:30 | these top items a little bit
more by making them all uppercase.
| | 07:34 | So I am going to go in and add the text-
transform property, and here we'll choose
| | 07:44 | uppercase from the code hints.
| | 07:46 | So the next thing I want to do is to set
the width of the list item itself, and I
| | 07:51 | am going to set that to 100 pixels.
And then the final thing is to align
| | 07:55 | everything to the left specifically.
| | 08:01 | Okay, so let me close Split view here.
| | 08:03 | We'll go to Design and now you can see
that the unordered list is beginning to
| | 08:06 | take shape as a nav bar.
| | 08:08 | You are now in position to
begin customizing the link states.
| | Collapse this transcript |
| Customizing the link states| 00:00 | It's time to add a little more defined
interactivity to our nav bar, including a
| | 00:04 | background image that appears on hover.
| | 00:07 | I now have the index.html file open
from the Chapter 4 exercise files, the 04_04
| | 00:14 | subfolder, and right now, the actual
link that you see here, the hit region if
| | 00:21 | you will, is pretty narrow.
| | 00:23 | Let me turn on Inspect mode, and I will
show you exactly what I'm talking about.
| | 00:26 | So, if I go to the anchor tag, that's
really the full width and size of the hit
| | 00:31 | region. And we are going to use padding
to extend the anchor tag area to be a
| | 00:35 | little larger on the left and the right,
and then also on the top, so we can
| | 00:39 | include that background image--and even
a little bit below, so we can have some
| | 00:43 | separation between our top nav and subnav,
and still keep the active area alive.
| | 00:49 | So, let's drop out of Inspect mode, and I
am going to go over to Split mode here.
| | 00:54 | Now, I've got my nav.css file
selected in the Related toolbar.
| | 01:00 | So, let's add in that new rule, and we
are going to continue to drill down.
| | 01:03 | This time we will address the anchor tag.
| | 01:06 | So I'll choose the first part of the
selector here, copy that, and paste that
| | 01:13 | in, so we have nav ul li, and we add the
A or anchor tag there, and I will do my
| | 01:19 | opening and closing curly braces and head
back to the center, so I can add in my padding.
| | 01:25 | Now, the padding will have a 60 pixels
up top--and that's for that background
| | 01:31 | graphi--40 pixels on the right, 15
pixels below and an equal amount on the left
| | 01:39 | of 40 pixels, so that the
right and the left balance.
| | 01:42 | So, now if I go over and preview and
go back into Inspect mode, when I hover
| | 01:48 | over the link, you can see that
the hit area is greatly expanded.
| | 01:53 | Now, let's fine-tune our basic
link and visited states to remove the
| | 01:58 | underline and set the color.
| | 02:00 | What you are seeing now is the CSS
definition for the standard links, such
| | 02:05 | as this one here in the page,
and we want our navigation bar to be
| | 02:08 | completely different.
| | 02:10 | So, let's go back to the nav.css, and we
are going to enter in two link states.
| | 02:16 | The first one would be nav ul a:
link and then nav ul a:visited.
| | 02:30 | And here, we are going to set the basic color.
| | 02:33 | I think I am going to actually change
the color here to make it more sedate.
| | 02:37 | We will give it a kind of a basic gray,
which will be 424242, and make sure
| | 02:44 | that there is no underline by turning off
the text-decoration, or setting that to None.
| | 02:53 | I forgot to put in the leading hash mark
there for my color, so let me correct that.
| | 02:57 | Now, let's go in and add in the hover
state, which will be almost same rule but
| | 03:04 | with different states. So I am going to
go ahead and just copy that selector and
| | 03:08 | then paste that in and change 'link' to
'hover' and 'visited' to 'active' and then of
| | 03:16 | course put in the curly braces.
| | 03:18 | Now, because I don't want my color to
change, I am going to go ahead and copy
| | 03:22 | these two properties and also paste those in.
But we do want a background graphic to appear,
| | 03:29 | so I am going to go actually over to
the CSS Styles panel and put that in
| | 03:33 | through here, so as to make sure
that I choose the correct file.
| | 03:36 | So, I have chosen the hover and active
rules that you see there, and now I will
| | 03:41 | go to Edit Rule, Background category, and
let's browse for our image. And you want
| | 03:47 | to make sure you are pulling
from the 04_04 images subfolder.
| | 03:52 | And the image select
folder is called olive_bg.gif.
| | 03:58 | Now, this is a background image that we
do not want to repeat, so we will choose
| | 04:01 | no-repeat, and placement wise,
| | 04:04 | we want to put it on the x axis in the
center and at 10 pixels, which will bring
| | 04:12 | it down just a bit. Click on OK.
| | 04:15 | So, now when we hover over it, our
color does not change, but we do have a nice
| | 04:19 | background graphic that
appears, and there is no underline.
| | 04:23 | So, the top navigation is done.
Now you're ready to begin work on the
| | 04:27 | submenu items.
| | Collapse this transcript |
| Adding drop-down menus (HTML)| 00:00 | Just as the first step in creating the
top-level navigation was to enter its
| | 00:03 | HTML, the initial work on the submenu
is to add additional unordered lists, each
| | 00:09 | placed under its respective heading.
| | 00:11 | I have the index.html file from the
Chapter 04 exercise files 04_05 subfolder
| | 00:18 | open and ready to work, and we are
going to add in these unordered lists.
| | 00:23 | I've always found that the fastest way
to work with unordered lists is in Design
| | 00:27 | view, and if you already have
the CSS applied, to disable that.
| | 00:31 | So, in order to do that was open up the
Style Rendering toolbar, and you can get
| | 00:36 | to it by right-clicking on any of the
toolbars that you have already opened, and
| | 00:40 | from the pop-up list, choose Style Rendering.
| | 00:43 | I am going need to drop out of Live view,
and here you see my toggle for turning
| | 00:48 | CSS styles on and off is turned on
currently, so let's turn that off. And now we
| | 00:54 | can quickly add in our
subnavigation as a secondary unordered list.
| | 00:59 | So, I am going to go ahead and open up
the Property Inspector here, just so we
| | 01:02 | can see that in action, and after About,
| | 01:05 | I will hit Return, which initially
makes another list item, and then just
| | 01:10 | press Tab to indent that.
| | 01:12 | Now, let's enter in our new entries,
which is Our Oil, The Land, and Company.
| | 01:21 | And under Process, we have about five
different subitems, so let's go ahead
| | 01:25 | and enter those now.
| | 01:26 | Again, press Return or Enter after
Process and then press Tab to create the
| | 01:32 | nested unordered list, and in the
process is Growing, Harvesting, Milling,
| | 01:42 | Bottling, and Shipping.
| | 01:46 | As before, once you've entered in the text,
we have to convert each of these into a Link.
| | 01:51 | So, I will go through the process of
selecting that, making sure that li is selected
| | 01:55 | here, and then entering in the HTML
address, and we will just step through the
| | 02:03 | process of doing this for each of these.
| | 02:05 | Of course, if you have got single words,
you can just go ahead and double-click
| | 02:12 | on it to select it, which is a
great boon for the Process menu.
| | 02:29 | Milling, bottling, and finally shipping.
| | 02:45 | Now, in order to cleanly target the
nested unordered list, we are going to add a
| | 02:49 | couple of classes to the main
level items About and Process.
| | 02:53 | So, I am going to go ahead and click
into About and then go into Split view,
| | 02:59 | and you can see the list item here,
About, and I will add in a class, and the
| | 03:05 | class I am going to add in is subNav.
| | 03:08 | And we want to do that also for Process.
| | 03:10 | So, we got to skip down to where we
find Process. Or you can just quickly in
| | 03:14 | Design view select it over
there, so you can locate it.
| | 03:18 | And in the list item, I will enter in a
class attribute, and again subNav is the class.
| | 03:26 | Okay, so let's go back to Design view.
| | 03:28 | I will toggle my CSS styles back on,
and things have gone totally crazy.
| | 03:35 | Well, luckily, we now have all of our
HTML for the subnavigation items in place.
| | 03:41 | The very next step is to add in the
appropriate CSS to whip these crazy
| | 03:46 | submenus into shape.
| | Collapse this transcript |
| Working with submenus (CSS)| 00:00 | We are at the stage in the
development of our horizontal navigation bar now
| | 00:03 | where we've added the subnavigation
text and it's time to start styling it.
| | 00:09 | And somewhat perversely, the very
first thing we need to do is hide it.
| | 00:13 | So, as you can see, we have lots
of problems going on here with the
| | 00:16 | subnavigation, including it being
outsized off to one side, and we also have
| | 00:22 | the background image repeating--not to
mention that it's exposed right from the outset.
| | 00:28 | So, let's go over to Split view,
and I have my nav.css file open.
| | 00:34 | I will go down to the bottom here, and
now we will create a rule that will hide
| | 00:38 | the nested unordered list.
| | 00:40 | So, we start off by targeting nav
li.subNav, and that will select only those
| | 00:48 | list items which have a class of subNav,
but we want to target specifically the
| | 00:53 | unordered list found under those.
| | 00:55 | So, I will add in a ul there
and open and close in curly brace.
| | 01:00 | Now, we put in a display none property,
and if I click over into Live view, it disappears.
| | 01:09 | So, of course the next thing to do is
to define a rule that reveals the subnav
| | 01:13 | when the top navigation item--again with
the class of subnav--is hovered over.
| | 01:19 | So, let's add a new rule.
| | 01:21 | It goes nav li class subNav.
| | 01:26 | Now, we are going to put in the hover
state, so we put in colon and then the
| | 01:30 | hover and again the ul tag.
| | 01:36 | So, we want to bring this back into
view and you do that by using a display
| | 01:40 | property set to block.
| | 01:43 | And we want to make sure that
there's no border underneath this ul, so we
| | 01:48 | will type in border: none.
| | 01:51 | And I also want to move over the
subnavigation so that it lines up properly.
| | 01:55 | If you recall, we put in a
left margin of 40 pixels.
| | 01:59 | We are now going to use that value
again by putting in a margin-left of 40
| | 02:04 | pixels and finally a 0 padding.
| | 02:08 | So, let's take a look and
see how things are shaping up.
| | 02:12 | Well, we are getting a little bit better.
| | 02:14 | Things have now a little bit more in
alignment, but we still need to add a
| | 02:19 | background color, so back to the
nav.css, and we are going to target just the
| | 02:26 | list items that are within the nested ul now.
| | 02:30 | So, that's going to be nav li, class of
subNav ul li, and let's shrink down the
| | 02:41 | height a bit by giving
each item a height of 1.2 ems.
| | 02:45 | And I am going to go ahead and set a
darker green background color here, and
| | 02:54 | the value I am going to put in is one
that I picked up from my design. So it
| | 02:58 | starts off with 759B46,
| | 03:03 | and let's add in some padding
to separate each of the items.
| | 03:06 | We will do 3 pixels from the top, 0 on
the right, 3 pixels on the bottom, and 5
| | 03:13 | pixels from the left.
| | 03:16 | Finally, we're going to
align the text to the left.
| | 03:21 | Okay, one more rule that will reduce
the size of the subnav items and give a
| | 03:26 | nice contrasting color, and we are
going to apply this to the anchor tag.
| | 03:30 | So, nav li:subNav:hover ul li a. So, we
will give it an initial color of white
| | 03:48 | and a font size of .75em,
and again zero out that padding. Okay.
| | 03:57 | So let's take a look and
see how things are going.
| | 04:00 | Well, they look a lot more
reasonable now, don't they?
| | 04:02 | So, the next task is to add
some proper interactivity.
| | Collapse this transcript |
| Achieving interactive submenus| 00:00 | The almost-last piece of the puzzle is
to define the subnavigation states the
| | 00:04 | way we want them to look.
| | 00:06 | In this case, we're going to lose the
underline that you see here and go with a darker color.
| | 00:11 | The key is to make sure that you
set up your selectors properly.
| | 00:15 | So let's open up Split view and
down at the bottom of the nav.css file,
| | 00:20 | we'll create a rule.
| | 00:23 | And this will be #nav li.subNav.
| | 00:26 | And we're going to target the anchor link
state, so we go to the ul li a, for anchor,
| | 00:35 | and then link state.
| | 00:37 | And them I am just going to ahead and
copy this first part so I don't have
| | 00:40 | to retype that, add a comma as we group these
selectors, paste in that, and then add visited.
| | 00:48 | Okay, we're ready for our curly braces.
| | 00:50 | Now let's get rid of the underline
first by setting text-decoration to none.
| | 00:58 | Now I want to make sure that the text
of my subnavigation items is white for
| | 01:03 | giving a high contrast when they first
appear, and then on hover we'll change
| | 01:07 | it to a darker color.
| | 01:08 | So I am going to go ahead and enter in
white, which I could either sample or just
| | 01:11 | type in, but let's just do a sampling right now.
| | 01:14 | So that's my initial link and visited states.
| | 01:17 | And we'll copy this rule and paste it,
and then just change the states from link
| | 01:25 | to hover, and from visited to active.
| | 01:29 | And now we're going to go ahead and give
it a darker color instead of the white.
| | 01:35 | And the color that the
designer has specified is 32411B.
| | 01:42 | And let's check that out now.
| | 01:44 | Now you'll notice that I am still
getting what appears to be an underline,
| | 01:47 | but it's actually not.
| | 01:48 | It's actually the background
image that's appearing there.
| | 01:51 | So we'll need to get rid of that.
| | 01:54 | So let's go back over to our hover state and
add in one final property which is background: none.
| | 02:04 | Now when we click over into Live view
and check it out, we just have the simple
| | 02:08 | color change happening.
| | 02:10 | And so I think congratulations are in order.
| | 02:11 | You've completed the
horizontal navigation bar. Good work!
| | 02:15 | You're now ready to set up your nav bar
so that the current page is indicated.
| | Collapse this transcript |
| Marking the current page | 00:00 | Many designers, myself included, like
to offer their visitors overt indicators
| | 00:04 | of the current location within the site.
| | 00:07 | One way of doing that is to
make a recognizable change to the
| | 00:10 | top-level navigation.
| | 00:12 | I'll show you a technique that you can
apply sitewide with minor HTML updates in
| | 00:17 | a series of simple CSS rules.
| | 00:19 | What we are going to do is give each
page a unique identifier as well as
| | 00:24 | each top-level menu item, so that when
you are on a certain page, you'll see
| | 00:29 | the background graphic.
| | 00:31 | So, here we are with the index.html
file from the Chapter 4 exercise files
| | 00:37 | in the 04_08 subfolder, and the first
thing we need to do is to identify this
| | 00:43 | particular page that we are working with.
| | 00:46 | So, this is the homepage, so I
am going to go to the body tag,
| | 00:51 | and I will drop out of a Live view here.
And I am going to go ahead and give it an ID.
| | 00:56 | So, to make sure that we don't
conflict with any existing IDs, I am going
| | 01:00 | to call this homePage.
| | 01:01 | Let's go ahead and put in unique ids
for each of the four main menu items.
| | 01:06 | I will go up and select the home div
there and choose the list item to make sure
| | 01:14 | I have that, and then this one
| | 01:16 | we are going to call homemenu.
| | 01:19 | And let's do the same thing for About.
| | 01:22 | I'll choose the list item there
and add in an ID of aboutmenu.
| | 01:31 | For Process, let's select that
list item and make that processmenu.
| | 01:37 | I think you can see the
method to my madness here.
| | 01:42 | And the final one with the list
item is of course contactmenu.
| | 01:47 | Now, with the HTML in place, you are
ready to write out the CSS, which is
| | 01:51 | basically a duplicate of an existing
rule that causes the background graphic to
| | 01:56 | appear on hover with different selectors.
| | 02:00 | So, let's go back to Split view, and
I'm going to go down to where I find my
| | 02:06 | background graphic appearing here,
and I am going to just copy this entire
| | 02:09 | rule for the moment,
| | 02:11 | move down to the very bottom
of the page, and paste that in.
| | 02:17 | And then I'm going to get rid of both
the color and text-decoration, because
| | 02:19 | don't need that; we just need
the background change there.
| | 02:23 | So, now let's target the anchor tag that's
related to the homePage in the home menu.
| | 02:28 | So, I will change this selector to
pounce sign or hash mark homePage--
| | 02:33 | there is my homePage id--and then a list item
with an id of homemenu and 'a' for anchor tag.
| | 02:42 | So, because we are on the homepage now,
when I go over into Live view, you will
| | 02:48 | see our background graphic
up here even without hover.
| | 02:52 | So, now let's go back, and it's a
simple matter of copying this rule and then
| | 02:57 | modifying the selector for each of the
menu items, and then paste it in, and we
| | 03:02 | will change homePage to the next one,
which is About. And of course, we want to
| | 03:07 | change homemenu to aboutmenu, and then
I'll paste in another copy of that and
| | 03:14 | change homePage to
processPage and homemenu to processmenu.
| | 03:24 | One more copy of the rule, paste it in,
and change homePage to contactPage and
| | 03:33 | homemenu to contactmenu.
| | 03:36 | So, let's save this page, and we
will go back into Design view.
| | 03:41 | Now, I am going to go ahead and turn
on Follow Links Continuously so that
| | 03:45 | we can try this out.
| | 03:46 | I have taken the liberty of copying
our nav bar code to the three other main
| | 03:51 | pages in the site and added the
necessary IDs to the body tag for each.
| | 03:55 | So, we are ready to take this current
page update for spin. I have Home here.
| | 03:59 | If I click and go to the About page,
you can see that I have the background
| | 04:03 | graphic, even when I move off hover.
Same thing with Process and same thing with Contact.
| | 04:09 | Let's head back to Home and
everything seems to be working perfectly.
| | 04:15 | The beauty of this technique is that you
could put your navigation in an include
| | 04:19 | or in a Dreamweaver template
and it would work just as well.
| | Collapse this transcript |
|
|
5. Vertical NavigationLooking at the project| 00:00 | In this chapter we're going to build a
vertical navigation bar from the ground up.
| | 00:04 | The menu will have a flyout submenu
and changing background graphics via the
| | 00:09 | sprite technique, which was covered
in the "Navigation Techniques" chapter.
| | 00:13 | Let's take a tour of the
completed vertical menu.
| | 00:17 | You can see my vertical menu
here over in the side area.
| | 00:21 | When I hover over any of the elements,
the text changes color and the background
| | 00:26 | graphic changes as well.
| | 00:27 | And when I go up to Tours, where a
submenu is indicated, the menu flies out to
| | 00:32 | the side and I can scroll over to there.
| | 00:35 | And you see the text changing color on hover.
| | 00:38 | This menu uses an external style
sheet, nav.css, for all of its styles.
| | 00:44 | And the HTML that we see here
is actually an unordered list.
| | 00:50 | So I think that's a pretty nice-
looking menu. I hope you agree.
| | 00:53 | And best of all, it's all done with CSS.
| | 00:56 | Let's get going.
| | Collapse this transcript |
| Understanding vertical menus| 00:00 | As noted throughout this course, if
you're going to create CSS-based menus--and
| | 00:04 | you should be--you'll need
to start with unordered lists.
| | 00:08 | This initial step is pretty straightforward.
| | 00:11 | So here I have opened the mission.htm file
from the Chapter 5 exercise files 05_02 subfolder.
| | 00:19 | And I want to show you, if I go to
Split view, I do have a nav tag--this is an
| | 00:24 | HTML5 page, by the way--with the id of mainNav.
| | 00:28 | And my cursor is right there in the
middle of it, and that's where our unordered
| | 00:32 | list is going to go.
| | 00:34 | Since it's just a plain unordered
list, let's drop out of Live view, and I'll
| | 00:39 | bring up my Style Rendering
toolbar and toggle off the CSS Styles.
| | 00:44 | And now I can go ahead and to start my
bulleted list pretty quickly by clicking
| | 00:48 | in the Unordered List icon
in the Property Inspector.
| | 00:52 | And let's enter that first name, which is Tours.
| | 00:55 | And if I click over in Design view, you can see
that that's been put in as an unordered list.
| | 01:01 | And even better, now that I am in
Design view, I can just hit Return and it'll
| | 01:06 | create another list item so I
don't have to do that code myself,
| | 01:10 | and type in Mission, Contact,
Resources, and Explorers. How easy is that!
| | 01:20 | So now the next step is to convert
all of the list items into links.
| | 01:23 | We'll do that just by double-clicking
to select it, and then going in to the
| | 01:30 | Property Inspector Link
field and adding in tours.htm.
| | 01:37 | Mission we'll make, of course, mission.htm,
| | 01:41 | contract.htm, resources.htm,
and finally, explorers.htm.
| | 02:02 | We'll hold off putting in the subnav
for now as it makes creating the initial
| | 02:09 | menu more difficult.
| | 02:11 | And now we're ready to start
adding some CSS into the mix.
| | Collapse this transcript |
| Defining width for link elements| 00:00 | With the top-level unordered list HTML
finished, you're ready to start in with the CSS.
| | 00:06 | To keep a clean separation, let's put
all the navigation styles in their own
| | 00:10 | style sheet which you can
quickly create in Dreamweaver.
| | 00:13 | So I'll go up to File > New and from the Page
Type column, choose CSS and then click Create.
| | 00:22 | Now let's save this, and we want to make
sure that were in Exercise Files > Chapter
| | 00:29 | 5 > Subchapter 05_03 in the _CSS
folder, and we'll call this nav.css.
| | 00:42 | Now once you've created the external
CSS file, you can go ahead and close it, and
| | 00:46 | we'll go to our CSS Styles panel to attach it.
| | 00:51 | So I'll go down to the Link symbol here
and choose Attach Style Sheet, and let's
| | 00:57 | browse to the correct folder.
| | 01:00 | Again, Exercise Files > Chapter5 > 05_03_CSS
and there is our just-created CSS file.
| | 01:12 | Click Choose and then OK.
| | 01:15 | So now that's linked and you can
see it here in the Related Files bar.
| | 01:19 | Now you'll notice that my unordered
list is already positioned, and that's
| | 01:24 | because I have a CSS rule for
the ID mainNav already defined.
| | 01:29 | So let's go ahead and I want to move
that over so I can consolidate all of my
| | 01:34 | navigation rules in one place.
| | 01:37 | We'll go to Split view and make
sure that the main CSS is selected.
| | 01:42 | Now you could search for this if you
needed to, but I happen to know it's on line
| | 01:46 | 150. So there is mainNav and I'm just
going to select it, do a Command+X or
| | 01:53 | Ctrl+X, and then go over and paste it
into nav.css. And when I click over into
| | 02:01 | Live view, it goes back to its
original position. Let me close off the CSS
| | 02:06 | Styles panel for now.
| | 02:08 | And next, we're going to create a rule
targeting the unordered list, so we can
| | 02:12 | remove the bullets. So we're going to
be using our ID of mainNav, starting with
| | 02:18 | a hash mark, honing in on the
unordered list. Then we'll do an opening and
| | 02:26 | closing curly brace there to contain
all of the properties, and let's zero out
| | 02:31 | the margins and the padding--very
common to do these sort of thing. And then
| | 02:37 | we'll change the a list style to none,
which will get rid of the bullets. Okay.
| | 02:44 | We can go back to Design view now, and you
can see that the bullets have been removed.
| | 02:50 | Now, I'm still getting the hover
states that are happening, and this is
| | 02:53 | because these are links.
| | 02:55 | It's picking up the same colors and CSS
definitions, including that dashed underline.
| | 03:00 | Well, that's part of my normal site links.
| | 03:03 | So let's go ahead now and set up a
rule for the list item within the
| | 03:08 | navigation that will determine the overall
width of the menu, as well as font characteristics.
| | 03:13 | I'll head back to Split view and put in
our mainNav ul li selector, because we're
| | 03:23 | targeting the list item.
| | 03:24 | Now, I'm going to set this position
as relative, meaning it will sit where
| | 03:33 | it's placed within the div. Establish
our text alignment with a text align
| | 03:39 | property set to left.
| | 03:40 | Now some versions of Internet Explorer--
primarily the earlier ones like 6 and 7--
| | 03:47 | have a problem identifying with list
elements what type of pointer to use, so
| | 03:51 | we're going to be very explicit here,
and I'm going to say cursor use the
| | 03:56 | pointer. And as I said earlier, we'll
set the width and we'll set this to 8ems.
| | 04:03 | And finally, let's go ahead and set the font.
| | 04:07 | I'll enter in the size that I want,
and if you recall, it's a pretty large font.
| | 04:11 | I am giving 2em here. And now we'll
pick our font family, and we're using
| | 04:16 | Georgia, Times New Roman, Times, Serif.
| | 04:19 | So once that selected from the code
hint file, I'll hit Return or Enter and then
| | 04:23 | close out that property with a
semicolon. And we already have our closing brace
| | 04:28 | in place, so let's see how that's
looking now by going over to Live view.
| | 04:32 | Okay, fonts are much larger, and
we're still getting the same type of
| | 04:37 | interactivity, but it's beginning to take shape.
| | 04:39 | We're now ready to add our background graphics.
| | Collapse this transcript |
| Using background graphics with navigation| 00:00 | Background graphics can really make
navigation stand out, and with the touch of
| | 00:04 | CSS finesse, integrate smoothly
into the various links states.
| | 00:08 | I have opened the mission.htm file
from the Chapter 5 exercise folder 05_04
| | 00:16 | subfolder, and as you can see, we have
our top-level navigation items in, and
| | 00:22 | we're ready to add the background ggraphics.
| | 00:25 | Typically, background graphics are
applied to the 'A' or anchor tag in
| | 00:28 | the navigation item.
| | 00:30 | This allows the graphic to be
modified if necessary during hover states.
| | 00:34 | We're going to bring the background
images into our navbar via the sprite method.
| | 00:39 | If you wanted to know more about sprite-
based background images, check out the
| | 00:42 | "Implementing sprites" video in Chapter 3.
| | 00:44 | All right, let's go into Split view.
And I already have nav.css opened, and I'm
| | 00:51 | down at the bottom of the page there,
where I'm going to add a new CSS rule, and
| | 00:55 | this one is # mainNav ul li a, for anchor.
| | 01:03 | And as you can see, we're just getting
more and more specific with each rule.
| | 01:07 | Now I'll do the opening and closing
curly braces, and the first thing we're
| | 01:11 | going to do is put in a display, block-
decoration, and then I will ensure that
| | 01:18 | the entire area of the anchor tag is an
active hit area, including those areas
| | 01:24 | that we extend with padding.
| | 01:26 | Next, I'm going to make sure that
the Internet Explorer versions can all
| | 01:29 | properly display the cursor as a pointer.
| | 01:33 | And now let's add in that
padding that I was referring to.
| | 01:36 | In this case we'll use a .25ems of
padding from the top, .75em from the right,
| | 01:45 | .5em from the bottom, and 1.25em from the left.
| | 01:51 | Now, this will also have the effect of
moving our text up and over so that the
| | 01:57 | graphic will fit properly.
| | 01:58 | You can see what I mean if I move
over and click into Design view, and
| | 02:03 | here's what's happening now.
| | 02:04 | The padding has moved everything
over to the right somewhat so that it
| | 02:08 | lines up with our logo and our
call-out down below. And notice as I move my
| | 02:13 | cursor over to the right, even when I'm
not right over the text it still is an
| | 02:18 | active hit area, and that's
because of the extended padding.
| | 02:22 | Okay, let's go back and add a
few more declarations to this rule.
| | 02:26 | Now, let's go ahead and set up of the
default color, which is going to be a
| | 02:30 | fairly dark gray, put it in as 333, which
you can see there, not quite black but
| | 02:38 | just a little of lightness there.
And we want to make sure that the
| | 02:43 | text-decoration does not appear,
so I'll add in text-decoration:
| | 02:49 | none. And now we're ready for
the background image to appear.
| | 02:54 | So I'm going to type in background:
| | 02:58 | and we want to make sure that we
keep a white background for this, so I'm
| | 03:02 | going to put in the white-color, which is
# FFF. You could also sample that if you want.
| | 03:09 | And now we're ready for a URL, so I'm
just going to click on URL twice there.
| | 03:14 | And we want to make sure that we're
in the Chapter 5 folder in the 05_04
| | 03:19 | exercises folders and from the
_images, go down and choose nav_bg.gif.
| | 03:31 | Now, there are a couple of other properties
that we want to pull into the background.
| | 03:35 | We want to make sure that it doesn't
repeat, so I'm going to do no-repeat, and
| | 03:41 | then finally positioning
is really key with sprites.
| | 03:45 | And the way that our graphic is set
up, I'm going to position it from the
| | 03:48 | left and top. And now I'll close
off that rule. And as you can see the
| | 03:54 | graphic has now been added.
| | 03:55 | So far so good, but one of
these links is not like the others.
| | 03:59 | The Tours link is intended to have a submenu.
| | 04:02 | So let's first switch over to our HTML and
add a class to that list item to indicate that.
| | 04:08 | I'll choose Tours and then go to
Source Code, and now at the List Item, I'll
| | 04:14 | make a space and start typing class.
| | 04:17 | There is our code hint, and the class we
want to put in is called a subNav, okay?
| | 04:22 | So now we're ready to go back to the CSS.
Let's get rid of this extra line and create
| | 04:30 | a new rule that will make that change
for the subnavigation item, so it's going
| | 04:36 | to be very similar to this selector here.
| | 04:40 | I'll just go ahead and
copy that and paste that in.
| | 04:44 | The only difference is instead of all
list items, we want to go with just the
| | 04:48 | list item that has a subNav class.
| | 04:53 | Okay, let's close off the curly brace
and put in the background property, also
| | 04:59 | with the white background, and the
URL that we'll choose is from that same
| | 05:07 | folder in 05_04 images.
| | 05:11 | And instead of it being nav_bg, it is subnav_bg.
| | 05:19 | Again, we don't want that to repeat,
so we'll put in a no-repeat and left-
| | 05:25 | top positioning. Okay.
| | 05:29 | So when I refresh Design view, you can
clearly see that right-facing triangle
| | 05:34 | now that indicates there is something
there that every site visitor should
| | 05:38 | check out. And now we're ready to add
in the HTML and CSS that defines and
| | 05:43 | styles that something.
| | Collapse this transcript |
| Creating pop-out vertical navigation| 00:00 | Submenus are a great way to give your
visitors quick access to key areas of your site.
| | 00:05 | In this video, I'll show you the CSS you
need to create a submenu that flies out
| | 00:10 | of a vertical navigation bar. But before
we can style the submenu, we'll need to
| | 00:15 | add in the HTML. With the mission.htm
file from the Chapter 5 folder of the
| | 00:21 | exercise files 05_05 subfolder
| | 00:25 | now on the screen, let's drop out of
Live view and switch over and bring up our
| | 00:30 | Style Rendering toolbar and toggle off
the CSS so that we can very easily add in
| | 00:36 | our subnavigation HTML. And we do that
by just creating a new entry under Tours,
| | 00:43 | pressing Tab to nest the unordered list,
and let's put in three different regions
| | 00:47 | of California, starting off with
Northern California, Central California, and
| | 00:56 | Southern California.
| | 00:59 | Now, we do want to create links for
these, so I'm going to open up the Properties
| | 01:02 | panel, select Northern California
first, and we'll make that 'nocal', Central
| | 01:11 | California we'll make 'centcal', and
Southern California is of course 'socal'.
| | 01:22 | So, once those links are all done, we
can toggle the CSS back on and turn off
| | 01:28 | our Style Rendering toolbar.
| | 01:29 | Now you'll see that the fonts--
especially when we go into Live view--are pretty
| | 01:35 | enormous for the submenu, and we're
going to deal with that in just a moment.
| | 01:41 | In total, we'll actually need to
create four separate CSS rules.
| | 01:45 | The first one will set up the basic
parameters for the submenu and then
| | 01:49 | by default hide it.
| | 01:52 | So let's go into Split view nav.css,
and we'll create a new rule, still in the
| | 02:00 | mainNav division, and we're going to
target the unordered list that is nested
| | 02:06 | within the first level unordered list.
So we do unordered list, list item, class
| | 02:14 | subNav ul, and I'll do
opening and closing curly braces.
| | 02:20 | So let's go ahead and set up our margin
first,: top, right, bottom and the left I
| | 02:27 | am going to put in as 100% just so
it matches exactly where we are at.
| | 02:31 | Now, padding I am going to zero out.
| | 02:34 | We want to make sure that there are
no bullets here, so I am going to set
| | 02:37 | list-style to none.
| | 02:42 | Again, we'll add in the cursor.
| | 02:43 | This time I am going to make it
default, and we're going to position this menu
| | 02:52 | absolutely so that it is properly set up.
So put in a position absolute, and the
| | 03:01 | Z-index, because I want this to appear in
front of the other content, is going
| | 03:07 | to be set at 1020.
The other content is set at 1000.
| | 03:11 | Now we'll set the top to zero so that
it appears right at the very tippy top.
| | 03:18 | And as I mentioned, we're going to
initially hide it by putting in a display
| | 03:22 | property set to none.
| | 03:25 | So now when I click back in, my submenu is gone.
| | 03:28 | So next we're ready to bring it back
in with another rule, and that of course
| | 03:33 | will be a hover-based rule, mainNav ul
li.subNav, and we use the hover state,
| | 03:46 | again, targeting the unordered list.
So we'll set display this time to block, and
| | 03:56 | I want to also go ahead and set the
border to none and make sure when it
| | 04:01 | appears, it appears just
next to my right triangle there,
| | 04:06 | so I'll set the left position to zero.
| | 04:11 | Now we are ready to style the text
and the background color of the submenu.
| | 04:17 | So mainNav ul li.subNav ul, and we
want to target the list item in that
| | 04:26 | nested unordered lists.
| | 04:30 | So let's set the width of the entire
menu block to 12ems, and the font size,
| | 04:38 | we are going to bring way
down from the 2ems to 0.5em.
| | 04:44 | Finally, let's define the background
color and make sure that the background
| | 04:49 | graphic doesn't show up in the submenu.
| | 04:52 | So for this, we need to target the Anchor
Tag, mainNav ul li.subNav ul li anchor).
| | 05:05 | So our background color is the same tan
that we see there, and I am going to go
| | 05:13 | ahead and choose color here and then
choose a placeholder color for the moment--
| | 05:22 | and you will see why in just a
second--and go ahead and set the background
| | 05:29 | image property to none by typing in url
(none) closing the parenthesis and the semicolon.
| | 05:36 | So now, if I go down and I keep my
cursor in the last rule that I selected and I
| | 05:44 | open up the CSS Styles panel, you can
see I have this background color with the
| | 05:48 | temporary placeholder color that I set in.
| | 05:51 | So now I can go ahead and click on the
color swatch and use the eyedropper to go
| | 05:55 | over and select the actual tan color
that I do want, and you can see the color
| | 06:01 | value that comes in there.
| | 06:02 | So let's go take a look at it in Design view.
| | 06:06 | Now, when I roll over, I get my menu
right next to the right triangle, and I
| | 06:12 | do have Northern California, Central
California, and Southern California all as links.
| | 06:17 | So we're almost home. As you can see, the
submenu is flying out with, well, flying colors.
| | 06:24 | All we need to do now is to
define the CSS for the link states.
| | Collapse this transcript |
| Setting link states| 00:00 | The vertical menu is almost complete.
| | 00:02 | The final step is to
address the hover state styling.
| | 00:05 | If we preview the page at this point,
you'll notice that on hover I am getting
| | 00:10 | a dotted orange line underneath the
link, and I am getting it pretty much
| | 00:15 | everywhere--even in the subnavigation.
| | 00:17 | This is the current default hover state
for standard in-body links, and not what
| | 00:23 | we want for the navigation section.
| | 00:25 | So let's create a final CSS rule
that removes the border and adds a color
| | 00:30 | highlight to both the text
and the background graphics.
| | 00:34 | With my mission.htm file open from the
Chapter 5 Exercise Files folder, I am in
| | 00:41 | the subfolder of 05_06,
| | 00:45 | and we're ready to switch over
to Split view in the nav.css file.
| | 00:51 | And I'm going to go all the way
down to the bottom and add one more rule.
| | 00:55 | And this will be a rule that is
concentrating on the hover and focus states,
| | 01:01 | so let's enter our div, #mainNav, and put
in the anchor tag and its hover state, a
| | 01:09 | comma, and then we'll also do the focus state
| | 01:16 | and one more hover state so that it
addresses the subnavigation as well.
| | 01:22 | And that's going to be #mainNav
ul li class subNav a:hover, okay?
| | 01:34 | Opening curly brace, closing curly brace.
| | 01:37 | And we want the text to change to the
same orange that we see here in the logo.
| | 01:41 | But again, we can't sample
that color from within Code view,
| | 01:45 | so I am going to go ahead and just put
in a placeholder color of orange, and
| | 01:50 | let's get rid of the border that's on
the bottom by putting in a border-bottom
| | 01:55 | property set to none.
| | 01:57 | And finally, we need to adjust the
sprite that we were using over to its
| | 02:02 | new hover position.
| | 02:03 | And so we use the background-position
property and set that to a -272 pixels, 0
| | 02:14 | so it doesn't waver on the top.
| | 02:16 | Let's close that and
then go over to Design view.
| | 02:21 | And now we can see that the orange
is not quite right, but we can open up
| | 02:26 | our CSS Styles panel.
| | 02:29 | And I'll go to the All mode,
and scroll all the way down to my final
| | 02:35 | entered rule there.
| | 02:36 | And instead of orange, I'll go over
and sample the correct color from here.
| | 02:41 | And you can see that that is CC7C29.
| | 02:49 | But now my menu is complete,
including the submenu, and I don't have those
| | 02:53 | underlines appearing unwontedly anywhere.
| | 02:56 | So this vertical menu is now ready for
prime time, complete with a flyout menu
| | 03:01 | and integrated background graphics.
| | Collapse this transcript |
|
|
6. Internal and External NavigationIdentifying anchor tags| 00:00 | Throughout this course, the majority
of the focus has been on navigating from
| | 00:03 | page to page within a site, but
there is another type of navigation that's
| | 00:07 | frequently employed--internal page navigation.
| | 00:11 | Typically, you will need internal
navigation on lengthy pages that require a
| | 00:14 | good deal of scrolling.
| | 00:16 | However, with the rise of cell phone web
browsing, scrolling is very much upon us.
| | 00:21 | The typical solution to handle
internal navigation is named anchors.
| | 00:25 | A named anchor consists of two
parts: a triggering link and a target.
| | 00:29 | Let me show you in a blank
page what that code looks like.
| | 00:34 | So if you go to Dreamweaver > Insert >
Named Anchor, and let's call this myAnchor,
| | 00:39 | Dreamweaver will put in a nifty little
anchor symbol that we see here. And if we
| | 00:46 | go to Code, you can see that it puts
in a empty anchor tag with the name
| | 00:51 | myAnchor, and also an ID of myAnchor.
| | 00:53 | Now, that's the first part of a named anchor.
| | 00:57 | The other part would be to create a
link in a slightly different place in the
| | 01:01 | document, let's say Go to My Anchor,
which you could then select myAnchor and
| | 01:09 | put in the Link with a leading hash sign whatever the
name of the anchor is, in this case myAnchor.
| | 01:18 | So if in Live view I clicked on myAnchor,
it will go to the top of the document
| | 01:23 | here wherever the named anchor is.
| | 01:26 | Now, current web design calls for a
rethinking of named anchors for several reasons.
| | 01:32 | First, the extra markup that you
see here is really unnecessary.
| | 01:36 | You can target links directly to IDs, which
conveniently also use a hash mark as an identifier.
| | 01:43 | Browser support for linking to
IDs is pretty much universal.
| | 01:47 | The last browser that didn't
support it was Netscape Navigator 4.
| | 01:51 | Second, and this is a biggie, support for
the name attribute is being dropped in
| | 01:55 | HTML5, so in this video I am going to
show you to code internal navigation in
| | 02:00 | the right way for now and in the future.
| | 02:02 | All right, so let's go over to
portfolio.htm, and here you can see on this
| | 02:08 | portfolio page, we have kind of a
lengthy page that consists of a number of
| | 02:11 | projects that we worked on. And on top
here there is a listing for each of these,
| | 02:16 | so you can quickly navigate to them.
| | 02:18 | I am going to drop out of Live view
here and then just go right to the list that you see here.
| | 02:25 | So the first thing that we'll do is
make sure that we have all of the IDs that
| | 02:29 | we need. And I'm going to go into Split
view. And the first one goes right to this
| | 02:35 | first section here for the technical
communication suite, and I am going to give
| | 02:40 | this an ID in the h2 tag of tcs, and then
let's scroll down to the next one, which
| | 02:47 | happens to be Captivate. And for
Captivate, we'll do an id of cp, and then the next
| | 02:55 | one is for the Dreamweaver C5 Bible,
and let's give that an id of bible.
| | 03:02 | Now to save time, I have done the last three.
| | 03:06 | Because we've added these IDs,
all of the sections now can be
| | 03:09 | targeted individually.
| | 03:11 | If we wanted to create a link on the
same page, now we are ready to create
| | 03:14 | those internal links.
| | 03:16 | Let's scroll back up to where we see
Adobe Technical Communication Suite, select
| | 03:21 | the text here, and in the Property
Inspector put in a hash mark. And if you recall,
| | 03:27 | the heading for that item was tcs.
| | 03:31 | Now let's do Captivate, which would be hash mark
cp. And finally, for the Dreamweaver CS 5
| | 03:38 | Bible, #bible. And as I said, I went
ahead and already did it for the next three.
| | 03:44 | This one is #dw and so forth.
| | 03:46 | All right, let's give it a spin.
| | 03:48 | We'll go to Design view, enter into
Live view, and I am going to go ahead and
| | 03:53 | make sure that I have
follow links continuously set up.
| | 03:56 | Let's close down my Properties, and
I should be able to go to any of these
| | 04:00 | directly just by clicking on the link.
| | 04:02 | So I'll click on Adobe Technical
Communication Suite, and that works.
| | 04:07 | I'll scroll back up, and let's try
the Dreamweaver CS 5 Bible this time.
| | 04:11 | Yes, that works just as well.
| | 04:14 | And let's go to the one
towards the bottom, the MX 2004.
| | 04:17 | Now the page will only go as far as it
can, and that's why this title doesn't go
| | 04:21 | all the way up to the bottom, because
the page does not extend any further.
| | 04:24 | Now granted, scrolling back up
every time is a bit of a drag,
| | 04:28 | so the solution most designers opt for
is to include another internal link that
| | 04:32 | takes you back to the top of the page.
| | 04:35 | Let's follow that route.
| | 04:36 | Let's go into Split view, and at the end
of the Technical Communication Suite, I
| | 04:42 | am going to put in another paragraph
tag and give this is class of top link so
| | 04:48 | I can style it later. And this will
consist of a anchor tag with an href of
| | 04:54 | #header and I'll close off that tag, put in
the content of top and then close the anchor tag.
| | 05:03 | Now instead of inserting a named anchor,
we'll take advantage of an existing
| | 05:06 | header div and link to that--with
the leading hash mark of course.
| | 05:10 | So let's see how that looks.
| | 05:12 | That's fine. That's showing up there.
| | 05:14 | I am going to go ahead and copy
that, and let's place it after each of
| | 05:18 | these elements here.
| | 05:20 | So after the end of the Captivate one, I will
paste that in. At the end of the Bible quote,
| | 05:27 | I'll paste that in, and let's go ahead
and do it for the remaining three here,
| | 05:31 | two, and then the final one is here.
| | 05:38 | So now I should have little top links there.
| | 05:42 | Notice they are kind of
inconsistently placed along.
| | 05:44 | So let's add in a little CSS rule in
order to move them over to the right, and
| | 05:50 | we'll also kind of
shrink them down a little bit.
| | 05:52 | So I'll open up my CSS Styles
panel and create a new rule.
| | 05:58 | You can see that the
selectors are quite large here.
| | 06:00 | I am going to go ahead and reduce that somewhat.
| | 06:02 | I need a number of these items in order
to maintain the specificity, but I don't
| | 06:07 | need quite that many.
| | 06:08 | So here we have outerWrapper content, and
we're going to go ahead and throw in a p tag here.
| | 06:14 | So this will address the toppling
classes that are found within paragraphs that
| | 06:20 | are within the content class and also
within the otherWrapper. Click OK and
| | 06:25 | let's change the font size to 12, which
is a little bit smaller than my text,
| | 06:30 | switch to the Block category and
let's align that over on the right.
| | 06:34 | Okay, let's see how that works.
| | 06:36 | Now, I have a top link
consistently over on the right.
| | 06:39 | That looks pretty good.
| | 06:40 | Let's give it a try.
| | 06:42 | Let's go to the CS5 Bible and then
click top, and it comes back up to the header
| | 06:46 | div, which is the top of my page. So the
one downside I've found of using this
| | 06:51 | technique rather than inserting a
Dreamweaver named anchor is that it doesn't
| | 06:55 | allow Dreamweaver to display that
wonderful little ship anchor for the name
| | 06:59 | anchor in visible elements in Design view.
| | 07:01 | On the other hand, it's
far better coding all around.
| | Collapse this transcript |
| Identifying external links| 00:00 | For some web sites, especially those
for government and large corporations,
| | 00:04 | it's important to differentiate
between links to pages within the site and
| | 00:08 | links to external sites.
| | 00:10 | In this video, I'll show you how to
set up a single CSS rule that can add an
| | 00:14 | identifying icon to all your
external links in one fell swoop.
| | 00:19 | The icon we'll be using is one that has
gained a good deal of acceptance on the
| | 00:22 | web, from Wikipedia to the Federal
Health and Human Services web site.
| | 00:27 | You can find it here on WIKIMEDIA
COMMONS, and it's this icon here that we see
| | 00:32 | in a larger version.
| | 00:33 | And we're going to be using
one of the smaller varieties.
| | 00:36 | So let's go back to Dreamweaver.
| | 00:38 | And here I have two links that
actually go to external sites: this Take the
| | 00:43 | tour and a little bit further down, Check 'em out.
| | 00:48 | So I want to add a CSS rule that looks
at the value of the href attribute, and if
| | 00:54 | it starts with an http, then apply this rule.
| | 00:58 | So let's go ahead and go to Split view.
| | 01:00 | And I am going to go ahead
and put this in the main.css.
| | 01:03 | I'll put this down at the bottom.
| | 01:05 | And the CSS rule that we're going to
adopt is starting off with the anchor tag,
| | 01:09 | and then you use square brackets
whenever you're trying to reference an
| | 01:13 | attribute within a tag.
| | 01:15 | So I'll do an opening and
closing, just to make sure we have that.
| | 01:18 | And we have to look for the href attribute.
| | 01:21 | And now we need to put in a caret,
which is Shift+6, and then an equal sign.
| | 01:27 | The ^= sign is an advanced selector
used in CSS3 that says just look at the
| | 01:34 | beginning of the value for the attribute.
| | 01:37 | And what we're looking for is
http, and then I'll close that.
| | 01:41 | Notice that I didn't do http://, even though
that would be valid for a number of sites.
| | 01:48 | I initially stopped at the p in order to also
encompass https sites, which are secure HTTP.
| | 01:57 | All right, we have our selector, so I'll
do my opening and closing curly braces.
| | 02:02 | And now we're going to put in a background tag.
| | 02:05 | So this is background:
| | 02:07 | and then double-click on URL to
open up the Select File dialog box.
| | 02:12 | And we want to choose this from
the Chapter 6 > 06_02 > images folder.
| | 02:18 | And you're looking for a
file named external_link.png.
| | 02:23 | I'll click Choose here
and then enter in no-repeat.
| | 02:28 | And we want to center this
on the right of the link.
| | 02:32 | Close off that declaration with a semicolon.
| | 02:35 | And then let's add just a little bit of
padding on the right in order to allow
| | 02:39 | room for the icon itself.
| | 02:41 | And the icon is about 12 pixels wide,
so we'll just do 13 here to give us a
| | 02:46 | little bit more room.
| | 02:47 | So now, when I go to Design view, you
can see that I have my icon appearing
| | 02:53 | right where it says Take the tour.
| | 02:55 | And if I go down to Check 'em out,
there is the other icon automatically added
| | 03:00 | to any external link. Sweet!
| | 03:03 | So hopefully this tip will come in handy
when you land that lucrative government
| | 03:07 | web design contract.
| | Collapse this transcript |
|
|
7. Cutting-Edge NavigationCreating jQuery animated image menus| 00:00 | JavaScript frameworks have created a
revolution in web design by bringing
| | 00:05 | complex functionality within
reach of everyday web designers.
| | 00:09 | In this video, I'll show you how to
combine CSS and one of the most popular
| | 00:13 | frameworks, jQuery, to
create a dynamic, animated menu.
| | 00:17 | Let me show you the final
product that we're aiming for.
| | 00:20 | Here you see five navigation categories up top.
| | 00:23 | When I move over it, four of the
navigation categories move over, and the same
| | 00:28 | thing happens as I scroll
over each of the animated menus.
| | 00:31 | They roll into view, and the other ones
are slightly hidden but still accessible.
| | 00:36 | So if I want to choose one from the
middle and then roll off, everything is
| | 00:39 | animated from left to right,
| | 00:41 | complete with some very nice kind of
easing that you'll see here with the animations.
| | 00:46 | This is hours of fun to
play with. Let me tell you.
| | 00:48 | So let's go ahead and start with the
index.htm file. And as you can see, we have
| | 00:54 | to start with--surprise, surprise--an
unordered lists for the navigation.
| | 00:58 | Now each of these items as I go to
Split view, you can see has its own id,
| | 01:04 | homenav, eventsnav, companynav, and so on.
| | 01:08 | So I've taken the liberty of going
ahead and creating a blank CSS file for us
| | 01:13 | and already linked it, and let's
start by building out the CSS.
| | 01:17 | First, we are going to go ahead and
tackle the nav div itself, and for that we'll
| | 01:24 | start by putting in the width of 630
pixels and we want to make sure that we
| | 01:29 | keep everything within the width,
| | 01:30 | so I am going to add an overflow property
here and then hide that and zero out the margins.
| | 01:38 | I'll just close off the rule here.
| | 01:40 | Now, let's move on to the UL, or
unordered list, tag within the nav div, and as
| | 01:46 | we've done previously in the course,
we're going to get rid of the bullets by
| | 01:51 | going to list-style and
setting that property to none.
| | 01:56 | Now we need to make a margin
adjustment for the unordered list, and I am
| | 02:01 | going to set that 0 0 0, which sets
everything to zero except for the left, which
| | 02:07 | I'll set at -40 pixels.
| | 02:10 | Finally, I'm going to set the width to the
UL element to a whopping 1,600 pixels wide.
| | 02:18 | This is the width of all of the
pictures which are each 320 pixels times five,
| | 02:22 | which is necessary to contain it.
| | 02:24 | Now because we have overflow hidden
up here, you won't see those elements.
| | 02:29 | So let me close out the nav ul rule.
And the next thing to do is address the
| | 02:34 | list item, and all we are going to have to do
with that one is just float it to the left--
| | 02:38 | again, because we want our list items
to appear in a horizontal fashion.
| | 02:42 | So, we'll do nav ul li, and I'll set the float
property to the left and close that rule.
| | 02:51 | Next, we'll work with the anchor tag, and as
usual, it's doing much of the heavy lifting.
| | 02:55 | In addition to hiding the text links, this rule
will also set the width for the closed panels.
| | 03:01 | So I'll go ahead and write out the
selector, nav ul li a, and do my open and
| | 03:08 | closing curly brace here.
| | 03:10 | I mentioned that I was going to hide
the text links, and I'll do that by using a
| | 03:14 | text-indent property set to a -2,000 pixels.
| | 03:19 | Now, let's go ahead and set up the
background, and I am going to set that to white
| | 03:25 | with no image, and I can finish off
this declaration with a semicolon.
| | 03:31 | Next, I want to add a border
separating each of the images,
| | 03:35 | so I am going to choose a border right
and set that two pixels wide, make it
| | 03:42 | solid, and we'll use a white color there.
| | 03:46 | Next, I am going to add in a cursor
specifier for Internet Explorer so that it
| | 03:51 | doesn't have to worry about
what kind of cursor to use.
| | 03:55 | Again, with the anchor tag, as we
often do, we'll put in a display block to
| | 03:59 | increase the size of the hit area.
Now we'll set the width, and this will be
| | 04:04 | the width of each of the
images when they are closed.
| | 04:07 | So that's going to be 78 pixels, and
the height is consistent throughout,
| | 04:12 | and that's 200 pixels.
| | 04:14 | So now if I switch over to Design view,
drop out of Live view here, you can see
| | 04:20 | the shape beginning to take form, and
now it's time to bring in the images.
| | 04:25 | So go back to nav.css and create the
first one, which is going to be nav ul li,
| | 04:33 | and we are going to target the first
list item, which is home. And if you recall,
| | 04:37 | that ID was homenav, and we're looking
exactly at the anchor tag that's in that
| | 04:42 | list item, and we want to bring in the
background URL. And you want to make sure
| | 04:51 | that you're in the exercise files
Chapter 07 folder, in the 07_01, and drill
| | 04:59 | down to the images folder, and here
you'll see a series of images, each starting
| | 05:03 | with the initials dw.
| | 05:05 | We are looking for dw_home.jpg, click
on Choose, and we want this to repeat with
| | 05:14 | a special value of scroll set to 0%.
| | 05:19 | So now this rule is essentially the same one
that we are going to use for all of the pictures.
| | 05:24 | So I am going to go ahead and copy that,
paste it, and let's go ahead and update
| | 05:28 | the selector first, which is events.
And the name of the picture is also
| | 05:34 | dw_events, and then we'll paste in
another copy and change the selector to
| | 05:40 | company and the picture name to dw_company.
| | 05:46 | The fourth one is gallery,
and the final one is booking.
| | 05:59 | Now, we do need to add one more property
to this final one in order for that to
| | 06:04 | be the image that is remaining open,
and we want to give that a minimum width
| | 06:08 | property of 320 pixels.
| | 06:12 | So now let's take a look at
how it's working in Live view.
| | 06:16 | It looks like we've got everything in
place, and of course there is a little magic
| | 06:21 | already buried in the page, and that's
the JavaScript. And I just want to take
| | 06:26 | you through a quick tour of the JavaScript,
just so you see a little bit of what's going on.
| | 06:30 | So let's Code view, and you can see
there are a series of script links here that
| | 06:35 | are bringing in extra code libraries.
| | 06:37 | The primary one is the jQuery code
library that we're hot-linking to, and this is
| | 06:43 | from jquery.com. jQuery 1.5 is the
latest version as of the recording of this
| | 06:49 | course, and then there are a
couple of other easing libraries.
| | 06:52 | Easing is an animation term that
makes movement seem more natural.
| | 06:57 | Here is the open script tag, and this is
a very common thing that you'll see in
| | 07:02 | jQuery where it is the functionality
that says 'wait till the document is ready
| | 07:08 | and fully loaded and then
begin doing your functions'.
| | 07:11 | As you can see, there are a series of
functions that are geared to the hover
| | 07:15 | state, and once something is being
animated, classes are added and animations
| | 07:21 | are begun and the time for the animation is
set and the type of easing is established.
| | 07:27 | Diving too deep into jQuery is beyond
the scope of this course, but if you find
| | 07:31 | the time to do it, you will be richly rewarded.
| | 07:34 | As you can tell, while it takes a bit
of work and stretching your skill set a
| | 07:37 | tad, you can really create some killer
navigation by combining CSS with a
| | 07:42 | JavaScript framework like jQuery.
| | Collapse this transcript |
| Using the HTML5 nav tag| 00:00 | HTML5 is coming fast down the pike and
bringing with it a boatload of changes,
| | 00:05 | including a tag
specifically intended for navigation.
| | 00:08 | The nav tag is one of a group of
what are known as semantic tags.
| | 00:13 | Semantic tags are intended to more
clearly convey what the markup holds.
| | 00:17 | And in the case of the nav tag, that's
primary as well as a secondary and other navigation.
| | 00:23 | Let's take a look at an example.
| | 00:24 | We've used this page in several movies
in the course, including Chapter 5 on
| | 00:28 | vertical navigation.
| | 00:29 | So let me go over to Source Code,
| | 00:32 | and here you see right near the top,
a nav tag with an id of mainNav.
| | 00:37 | Now notice this is not a
div tag with an id of mainNav;
| | 00:41 | it's actually a nav tag.
| | 00:42 | And if I happen to remove it
temporarily, and then type it back in, you'll
| | 00:48 | notice that after I type a couple of
the letters just 'na', Dreamweaver's
| | 00:52 | code hints come up.
| | 00:53 | So we have code hint support in Dreamweaver CS5.
| | 00:56 | And I can add in the id = mainNav,
and that's really all there is to it.
| | 01:02 | There are no additional
syntax to learn for the nav tag.
| | 01:06 | But if you decide to work with
HTML5 tags like nav now, there are a few
| | 01:10 | things you should know.
| | 01:12 | First, you need to declare a
proper DOCTYPEm such as !DOCTYPE HTML.
| | 01:17 | This is the DOCTYPE that's being
recommended currently by the WC3 for HTML5, and
| | 01:22 | web designers all around the
world are applauding its simplicity.
| | 01:26 | Now that you made sure that your pages
are forward compatible, you need to make
| | 01:29 | sure that they are also
compatible with older browsers.
| | 01:33 | Most browsers will basically ignore the
strangeness of any tags they don't know
| | 01:37 | and render them according to
whatever CSS rules are applied.
| | 01:41 | However, because they don't assign any
basic properties, there's one that you
| | 01:45 | have to do yourself, the display property.
| | 01:48 | If you don't include a CSS rule that
specifies a display property and value for
| | 01:52 | the nav and other HTML5 semantic tags,
most of the current crop of browsers--and
| | 01:58 | all of the old ones--will just
assume it's an inline tag, which would be
| | 02:02 | disastrous for your pretty distinct nav bar.
| | 02:05 | Therefore, you have to create a rule like this
one, in the main.css file, found on line 67.
| | 02:13 | Notice what we have here are most of
the semantic tags that are used in HTML5,
| | 02:18 | including the nav tag.
| | 02:20 | And they're all set to
one property, display:block.
| | 02:24 | Now I was careful to say that most
browsers will ignore unknown tags.
| | 02:29 | That's not the case with Internet
Explorer browsers before version 9.
| | 02:33 | They will all totally block if
they encounter an unknown tag.
| | 02:36 | To get around this problem, you need
to include a conditional comment that
| | 02:40 | targets all IE browsers before 9.
| | 02:43 | Like the one that we have in the
source code here, right before the end of
| | 02:46 | the head tag, this conditional
comment looks for versions less than IE9, and
| | 02:53 | if the browser being used by the
site visitor is one of those, a certain
| | 02:56 | script is included.
| | 02:57 | And this is the html5shiv that is
being stored in the Google Code Repository.
| | 03:03 | This JavaScript file, html5.js, is just
enough code to make sure that those older
| | 03:10 | Internet Explorer browsers will
handle the new tags without choking.
| | 03:14 | That's all there is to
working with navigation in HTML5.
| | 03:17 | It'll be really interesting to see
how browsers and other web technologies
| | 03:21 | evolve to put the new nav tag to use.
| | Collapse this transcript |
| Exploring CSS3 enhancements| 00:00 | While the ability to incorporate
background images in navigation gives web
| | 00:04 | designers a great deal of
flexibility, it's also a tad annoying.
| | 00:08 | Any changes mean breaking out your
graphics program, finding the source file, and
| | 00:12 | crafting the updates, and then
exporting the images and testing.
| | 00:16 | Wouldn't it be great if you could just
create tab navigation with rounded corners
| | 00:20 | and complex gradients all in Dreamweaver?
| | 00:23 | Well, with CSS3 you can.
| | 00:25 | In this video, I am going to create
the tab navigation we built using the
| | 00:29 | Sliding Door technique in the
Chapter 03 video "Setting up adjustable
| | 00:33 | backgrounds" that you can see here.
| | 00:36 | We'll start with the css3nav.htm file.
| | 00:40 | Now, I have all the basics in place, so we
can just concentrate on the CSS3 enhancements.
| | 00:45 | Notice that I have hovers happening, and my
background colors changing. Pretty simple.
| | 00:50 | So let's go to Split view and I am
going to go up to the anchor tag here, which
| | 00:56 | is nav li anchor (a) and I am
going to add a couple of rules.
| | 01:00 | Now the nice things about this with
Dreamweaver is it has full code hint support.
| | 01:04 | So if I type in -webkit, you can see
that that first comes up, and if I hit
| | 01:09 | webkit, I get a full list of all the
webkit browser-specific properties.
| | 01:15 | So the one we are looking for is
border and we actually want the top-right
| | 01:21 | so let me scroll down to here, border-
top-right-radius, and we want to set
| | 01:26 | that to eight pixels.
| | 01:27 | This is going to give our top-right
corner a rounded radius of eight pixels, and
| | 01:33 | we want to do the same thing for the top-left,
| | 01:35 | so I am going to do -webkit and then
hit return and just start typing border
| | 01:40 | and locating the top-left radius
and also making that eight pixels.
| | 01:45 | Now, not only does it support the Safari
webkit rendering engine, but Dreamweaver
| | 01:49 | also has support for Mozilla, which
creates of course the Firefox browsers.
| | 01:54 | So it's -moz and the syntax here is
border-radius topright and topleft.
| | 02:04 | We of course want these to match, so I
am going to go ahead and make those eight
| | 02:07 | pixels and then do the one for the
other border radius, which is topright, also
| | 02:15 | making that eight pixels.
| | 02:17 | Now I mention that this is a CSS3
property, so it is in the spec. And if all
| | 02:23 | browsers get around to supporting it, we
want to make sure that we already have
| | 02:27 | that built in so we're not just
targeting Safari and Firefox browsers.
| | 02:33 | So we'll put in the generic, if
you will, CSS3 properties, which is
| | 02:37 | border-top-right-radius, and there is
the code hint support for that. And of
| | 02:43 | course we are going to make that eight
pixels, and we also want to do the same
| | 02:48 | thing for the topleft.
| | 02:51 | Okay, so if we go over to Live view
here--I am going to just shrink down so
| | 02:56 | you can see everything--notice we
have very nicely rounded corners there,
| | 03:00 | without any images. And now we are also
ready to address the gradients without
| | 03:06 | using an actual background image--although we
do need to employ the background image property.
| | 03:10 | So I am going to go to Full Code view
because the syntax for the background
| | 03:14 | image gradient is kind of lengthy.
But this also goes to the anchor tag and
| | 03:19 | after all of our properties that we
used to create the rounded corners, we'll
| | 03:22 | put in a background image property to
start. And then for a value, we'll start by
| | 03:27 | putting in a webkit-specific value,
and unfortunately there is no code hint
| | 03:32 | support here, so you'll have to put in
webkit-gradiant, and this is followed by
| | 03:38 | a set of parentheses.
| | 03:40 | Within the parentheses, we say what type
of gradient it is, and this is going to
| | 03:44 | be a linear gradient. And where does it start?
| | 03:48 | It starts at the left top, comma,
and it goes to the left bottom, comma.
| | 03:56 | Now, what's the color range?
| | 03:57 | Well, it goes from, the keyword, and
then in parentheses, whatever you're
| | 04:02 | starting with, and in this case
we're starting with the white. Close the
| | 04:06 | parentheses comma, to, and then whatever
the final element is, and in this case it
| | 04:12 | is a hexadecimal value of e4e4e4.
| | 04:16 | I need one more parentheses to
complete this and then a semicolon.
| | 04:21 | Now, that will handle the gradients for webkit.
| | 04:24 | There is a different syntax for Mozilla,
but it also uses the background image property.
| | 04:32 | So we start with a -moz and the type is
actually put in the name of the property here,
| | 04:39 | so it is linear-gradient
and we have a parentheses set.
| | 04:45 | Now instead of doing directions left top,
left bottom, Mozilla actually works by degrees.
| | 04:51 | So in order to get a linear gradient
you put in -90 degrees, or deg, followed by the
| | 04:58 | two colors the top color, which is
going to be #fff, and the bottom color, which
| | 05:03 | again will be #e4e4e4.
| | 05:07 | So now let's close that out with a
semicolon, and let's head back to Design view
| | 05:12 | and see how we are doing.
| | 05:13 | Well, you can see the gradient is
already in place, and when I hover over it, I go
| | 05:18 | back to the solid color, so I am going to
have to add another rule to handle that
| | 05:22 | gradient, but it looks pretty good.
| | 05:24 | We are going right from white to this
light tan and pretty effective I think.
| | 05:29 | So let's go back to code and will add in
one more rule to make sure that we take
| | 05:35 | care of the hover state.
| | 05:37 | So you'll notice right below our pretty
lengthy nav li a selector is the nav li
| | 05:44 | a hover selector, and that's exactly
where will need to put in the code for the
| | 05:49 | gradients, so we can get a reverse
gradient here. And I am going to go ahead and
| | 05:53 | just copy this, because it's the same syntax
it's just different values, and paste that in.
| | 05:59 | Now, I am just going to reverse the two colors.
| | 06:02 | So instead of fff here, I'll make this
e4e4e4 and we'll switch this to fff, and
| | 06:10 | then we'll do the same thing for Mozilla.
| | 06:13 | In this case, I'll just cut
that and then paste it in.
| | 06:16 | All right, so let's take a look at it in
Live view, and now you can see that the
| | 06:20 | background gradient switches on hover as well.
| | 06:23 | Now, the cool thing is that these
navigation buttons are just as flexible as
| | 06:27 | those built with the Sliding Door technique.
| | 06:29 | So if I go to Split view, and let's click
on products here and make that Products
| | 06:34 | and Services, and again we'll change
services to the Contact Page and just go
| | 06:43 | strictly to Design view,
| | 06:44 | you can see that the button
stretches the way that we would hope it had.
| | 06:47 | Now granted this CSS3 functionality is
restricted to just the latest Firefox and
| | 06:52 | Safari browsers, but if you need to,
you can replicate it with an Internet
| | 06:56 | Explorer gradient filter.
| | 06:58 | I think this peek into some of the CSS3
features is quite instructive in terms
| | 07:02 | of what's coming in the near future.
| | 07:04 | I hope you agree.
| | Collapse this transcript |
|
|
8. Conclusion Next steps| 00:00 | Thanks for taking the time to
check out Dreamweaver CS5 Building Site
| | 00:04 | Navigation with CSS.
| | 00:06 | I hope you enjoyed watching the
course as much as I did making it.
| | 00:09 | If you're interested in learning more
about designing web site navigation, take
| | 00:13 | a look at Fireworks CS5 Rapid
Prototyping, or Photoshop CS5 for the Web, two
| | 00:19 | other lynda courses that I can recommend--
both of which have great tutorials on
| | 00:24 | creating web site navigation elements.
| | 00:26 | Thanks again for watching.
| | Collapse this transcript |
|
|
