Tip:
Highlight text to annotate it
X
Welcome to Dreamweaver CS4 New Features. In this title we'll examine some of the new
features that Adobe has in store for you in Dreamweaver's latest release.
Before diving into the specifics, let's take a brief tour of Dreamweaver's updated interface.
We'll need to start by defining a site that's going to hold all of
our exercise files. So one of the nice new features is we no longer
have a Title bar at the top of program. We have what's know as the Application toolbar
and a lot of the tasks that you perform can be done right up in the Application toolbar
working right off these icon. So if I go up to the Application toolbar and
I go to this icon right here that is our Site icon. If I click the pulldown menu,
I can define a new site without having to go through any type of menu structure, which
is really nice. So let's go ahead and choose New Site.
Now the New Site Definition dialog box comes up and it's pretty much the same as we had
before. We have two tabs, we have the Basic and we have the Advanced tab. The Basic tab
acts just like a widget that walks you through defining a new site
whereas the Advanced tab lets you just go ahead and enter in your own information and
that's what we're going to do. So let's click on the Advanced tab
and we're going to name to this site CS4 New Features and you can name it whatever
you'd like. If you want to name it something else, that's fine.
We'll go to our local root folder and I'm going to click on the Browse icon
and you just need to get it to wherever you copied over your exercise files. Now mine
are out on my desktop so I'm going to go to the desktop and find the exercise files.
I will select them and then we'll just leave everything else
at their defaults and we'll click OK. Now before we get into the new interface and
the look and feel of Dreamweaver, let's take a minute to look at our new
splash screen. Not a whole lot has changed with the splash screen, but there is one small
change. If you notice on the far right-hand side, we have a column that says
Top Features videos and these are videos that go into some of the new top
features of Dreamweaver, such as Related Files, Live view, Code Navigator. All things that
we're about to talk about in this title, but you want to see another video on these,
it'll be on Adobe's website. If you click, it'll go, it'll launch it
and it'll play the video for you which is pretty cool. So now let's take a look at the
new Dreamweaver CS4 interface and we'll do that
by opening up a file. I'm going to go over to my Files panel,
go to the 01 folder and open up the index.htm and I'm just going to click on Design view
so that we see the file in Design view rather than Split Screen view.
Adobe's new look and feel is called OWL, which stands for OS Widget Library and it drives
the look and feel of Dreamweaver CS4. This new look completes the process of bringing
Dreamweaver into the Adobe interface experience. One of the first you'll notice is the minimal
look and feel of the program. It certainly is, you might say to yourself,
gray. Well, the OWL interface is designed to allow
you to focus on the content, not the application, so colors are neutral and toned down.
Branding is also minimal and the Document Title bar has replaced with the Application
bar. Let's examine a few of the new interface elements
that are going to make your life easier and I want to start by talking about workspaces.
We are currently in the Designer workspace and if we look at the Application toolbar
at the very top of the screen, we can see that we have a pulldown menu that
lists all of our different workspaces. And you can see we're currently on the Designer
workspace. Well, there are a lot of preset workspaces inside Dreamweaver now.
We no longer have to go to the Window menu to get them. We can just go right here to
the Application toolbar, click on the workspace and then grab the one we want. For example,
if we were doing a lot of hand coding, we might want the Coder workspace,
which gives us our files on the left-hand side
and a very large Code view in the center and right portion of the screen.
You may have also noticed from looking at this menu that we can now create a new workspace.
So if you like to have a customized workspace where you have certain
palettes open and certain palettes closed, maybe certain palettes sized a certain way
or docked in a new location, you can save that as a workspace. Let's go back to the
Designer workspace for just a moment. You may have noticed one really significant
change to the workspace, which is the Insert toolbar location.
It is now the upper right-hand corner, docked as a panel, and it's not above the document
window as we've had in the past. Well we can still go to all of our different
objects by just clicking on the pulldown menu and going to say our Spry objects or
our Form objects, but it's taking up a lot of screen real estate. Well, if I go to the
Insert panel menu, I can choose to hide my labels and that gives
me just a series of icons. So notice that now is we flip back-and-forth
we actually save a little bit of screen real estate by moving this up a little bit. Of
course there is one problem with this. If you have
a lot of icons, you might inadvertently clip some of those off. So if you're using this
without labels, notice that we don't get any scroll bars and notice that I kind of
hide a couple of those so you want to be really careful about this type of view.
Now if you don't like where its current location is you can undock it and dock in a new location.
To do that we don't have a gripper anymore. We can just grab anywhere.
So it could be the tab here. Could be the gray bar.
Anything you want up here in the Insert toolbar you can simply click and drag
and you can undock it. So can float that as a separate window or if you wanted to you
can dock it in an entirely new location such as this horizontal docking above the
document window. Now that's more what I'm used to. And notice that if it re-docks horizontally
that we get our tabbed structure like we had before. You may say to yourself, Hey, I need
to create a new workspace for myself for the Insert toolbar and thank goodness
I can do that. Well, Adobe has kind guessed that you guys might like it there better
so you notice that we can go to our Classic view and in Classic view the Insert toolbar
is there by default. [00:05:28.1 0] So you may want to do that instead. Now, one of the
things that you're also going to notice is that
if you customize one these existing workspaces, Dreamweaver remembers that. So if I go back
to Designer, it's going to say, "Well, in Designer you
have the Insert toolbar over here so that must be where you want it."
So occasionally you may need to reset these workspaces to their default look and feel
and you can do that by going back up to our Workspace icon and choosing Reset
and whichever workspace you're in, it'll allow you to reset that and it'll just go ahead
and take it back to its default. Notice we go back to a Split Screen Code view and we
go back to the Insert toolbar docked in the upper right-hand corner.
Well for the purpose of this title, I'm actually going to work from the Classic workspace because
it's my favorite. I really like having the Insert toolbar above
everything. I like having the tabs there so that's how we're going to work with that.
If you like the Designer view, if you like that up there in the upper right corner, that's
fine, no problem. Just continue to use it up there.
Another difference you're going to notice right off the bat is the Document toolbar
and because we have index.htm opened up and notice that we have the index.htm tab.
To the right of that we have the path of it, which is really nice.
This used to be up in the Title bar and now it's here. Of course this is going to make
sure that we're working on the right file and
that we're not working on a back up of this file. Somewhere we can actually see the full
path to it. Directly underneath this, which is really nice, we have a couple of
related files. Now if I go into Split Screen view,
right now I'm looking at my source code and underneath that is the actual file itself
rendered out, but if I click on say main.CS the source code is replaced with my cascading
stylesheets. Now how cool is that? That is really nice. That's the Related Files feature,
and we're going to take a closer look at that in just a moment. I've always really hated
the Split Screen view though because in a small monitor size, it doesn't
really give you a lot of room to work and it's very hard to tell exactly what
you're working on, which is not so nice. Well they've changed some things here and now instead
of having just a horizontal Split Screen view- I'm going to go back up to my Application
toolbar and I have this little Layout icon and notice that I can now split my code and
my Design view vertically, which is awesome. I absolutely love this feature.
Now I can work on my CSS on the left-hand side and see real-time rendering updates on
the right-hand side, which is great. And we'll take a closer look at the Related
Files feature in just a little bit. All right. Well, I'm going to go back to my
source code and click back on Design view to get my file back. One other change that
you're going to notice is that just to the right of the Design
view icon, we see a little icon for Live view. Now Live view is new in CS4
and before if we were working on dynamic pages, we always had sort of a dynamic page Live
view. So we could see instead of a placeholder data, actual data on the
page, which was nice. But we could never really see JavaScripts working or
our CSS working in a Live view. Well now we can.
If I click on Live view, the preview window changes and all of my layout
elements go away and I just see my layout. Notice that the CSS-based rollovers
that I have now work and if I scroll down, I've got another CSS menu down here and this
works as well. So any JavaScript that I've got going on, all those things work.
Again this may be a little bit of a cramped view in smaller monitor sizes so we have a
really nice feature. I can hit F4 and that's going to hide all of my panels
and give me kind of a nice little preview mode. Now if you still want to do work, you
can still work in Live view. There's nothing wrong with
this. If I scroll over to the right-hand side I've got a little gray bar over there and
if I scroll over then hover over that, the panels that I have docked will fly out and
you can use these panels and do whatever I need to do with them. I can flip back and
forth between different panels and then when I roll back off of them,
they'll go ahead and hide again. So if you would like to work this way, you could certainly
work this way. And hitting F4
brings all of your panels back, which is really nice.
So if you do want to save a little bit of screen real estate with this you don't have
to have the panels fully expanded the whole time.
Notice that right up here at the top of my panels I have this little Collapse to Icons
and if I click on that, I'll get just solely icons.
I'm not going to get the full panel itself, which is really nice, and I can further collapse
that down so that I now simply just have icons and no labels at all.
So you can expand this out so you get all the labels or you can collapse that in
so you just have icons. Now if I want to use any one of these individual panels,
I'd just simply click on the icon. It expands the panel out. I get to use it
and do whatever I want to do. I can click on the icon again,
and it'll collapse it again. And of course anytime you want to go back to a fully expanded
panel view you simply click on these double arrows up top. It expands the panels
back and you can go back to working. So maybe you just want save a little bit of screen
real estate for a little bit of time and then expand them
back out again when you're done with that. Well, now that we've gotten a peek at what
Dreamweaver CS4 has in store for us, we'll explore these and other new features
in a little more detail.