IntroductionWelcome| 00:00 |
(MUSIC).
| | 00:04 |
Hi, I'm Paul Trani, and I'm really
excited to show you the latest version or Dreamweaver.
| | 00:08 |
In the latest version of Dreamweaver, the
focus has been in a couple of areas.
| | 00:12 |
First, simplification.
As you'll notice with the new, modern user-interface.
| | 00:17 |
Also creating CSS, I'll show you what I
think is a more intuitive way to create
| | 00:21 |
CSS with the new CSS Designer panel.
And even implement the latest in CSS
| | 00:27 |
standards, like box shadows, rounded
corners, and gradients.
| | 00:31 |
There's also the implementation of modern
technologies, like jQuery and jQuery Mobile.
| | 00:38 |
So, if you're using nose technologies,
it's easy to implement and customize
| | 00:41 |
those components using Dreamweaver.
It is a very exciting release and I'm
| | 00:45 |
honored to show you these features and
many more.
| | 00:49 |
So let's get started.
| | 00:50 |
| | Collapse this transcript |
|
|
1. Streamlined UISimplified UI| 00:00 |
Dreamweaver has been around since 1997.
And, over the years, many features have
| | 00:05 |
been added.
But, it actually has resulted in a
| | 00:08 |
somewhat cluttered interface.
So you can see, buttons up here.
| | 00:12 |
We have buttons right here dealing with
the document.
| | 00:15 |
So if I wanted to change the size of the
document, I can do that this way or I can
| | 00:18 |
do it through these buttons or even this
drop-down.
| | 00:22 |
You can see there are multiple ways to do
one thing.
| | 00:24 |
Even going through you have the ability
to validate your current document right
| | 00:28 |
here by selecting this button but you can
see how cluttered this interface has
| | 00:32 |
gotten in fact even as I take a look at
these menus in this case on this
| | 00:36 |
resolution I actually have to scroll to
get to this other items.
| | 00:42 |
So you can see how long these menu items
have gotten even as I go down to Window
| | 00:45 |
you can see how long that is.
So the biggest visual update that you'll
| | 00:50 |
see to the latest version of Dreamweaver
is the simplified UI.
| | 00:54 |
So I'm gonna minimize Dreamweaver CS6,
and here I am in the latest version of Dreamweaver.
| | 00:59 |
Look, no buttons cluttering up the
interface.
| | 01:02 |
Really just allows me to focus on my
content.
| | 01:06 |
Now, those options are still there, in
fact, if I go into File?> Validate, you
| | 01:10 |
can see I can still validate my current
document very easily.
| | 01:16 |
It's just not cluttering up my view, as
you can see, right in here.
| | 01:19 |
In fact, a total of ten panels, 14
dialogs and 62 menu items have been removed.
| | 01:26 |
Again, those features are still there,
it's just there's one way to do things.
| | 01:30 |
Really, resulting in this nice, clean
interface, allowing me to focus on my content.
| | 01:35 |
| | Collapse this transcript |
| The New Document dialog| 00:00 |
In previous versions of Dreamweaver
including Dreamweaver CS6, you're given a
| | 00:05 |
lot of options when it came to creating a
new document.
| | 00:09 |
Even right up front, you can tell, you
can create a new document or a new Fluid
| | 00:13 |
Grid layout.
So if I select New, you'll see this
| | 00:17 |
category as well as that Fluid Grid
layout again.
| | 00:20 |
You have all of these various Options,
you have blank page, blank template,
| | 00:24 |
Fluid Grid layout, page from template,
page from sample, it's quite robust.
| | 00:30 |
And you can tell even as you dive in to
each one of these sections, it gets a
| | 00:33 |
little overwhelming.
Because you have all of these templates,
| | 00:37 |
but all of these are written in XHTML.
And really there's only two that are HTML 5.
| | 00:42 |
Even as I go into the from sample, I have
all these various samples that really are
| | 00:48 |
all part of these templates.
And really with the latest version of
| | 00:53 |
Dreamweaver, this New Document dialogue
has been simplified greatly.
| | 00:59 |
In fact I'm gonna select Cancel, and I'm
gonna go to the latest version of Dreamweaver.
| | 01:04 |
Going in to File, New being my only
choice here, I can go in much simpler,
| | 01:08 |
cleaner as I select HTML, you can see
those two templates.
| | 01:14 |
That really have styles, CSS properties,
all of that content that I'd expect in a template.
| | 01:21 |
Notice there's different page types.
Again, dealing with the modern web
| | 01:25 |
designer and developer, giving you less
SCSS, SCSS, the latest.
| | 01:31 |
Again, this SVG isn't in another
category.
| | 01:33 |
It's right here, easy to access.
We have Fluid Grid layout, starter
| | 01:38 |
templates, really focusing on jQuery
mobile.
| | 01:42 |
And then you have site templates that you
can add as well.
| | 01:45 |
So you can see the New Document dialogue
has been drastically cleaned up, allowing
| | 01:50 |
you to focus on creating content using
the latest front end and back end web technologies.
| | 01:57 |
| | Collapse this transcript |
| The updated Insert panel| 00:00 |
The biggest UI update to take place in
the latest version of Dreamweaver has to
| | 00:04 |
do with the Insert Panel.
So here I am in Dreamweaver CS6 and
| | 00:08 |
Dreamweaver CS6 as well as previous
versions have more of this layout.
| | 00:13 |
I have common selected and you can see
all of these various items notice how I
| | 00:17 |
can insert a comment.
From this Insert Panel.
| | 00:21 |
When I might want to actually do that
when I'm in Code View.
| | 00:26 |
I don't even know how often you insert
server side includes, but again, that's a
| | 00:30 |
common feature according to Dreamweaver
CS6, as well as previous versions.
| | 00:35 |
In fact, as I take a look at these other
areas, we have Forms, we have Data, we
| | 00:39 |
have Spry.
And again Spry might not be as popular as
| | 00:43 |
JQuery these days for instance.
You will see JQuery Mobile here.
| | 00:47 |
We also have InContext Editing.
Again, another feature that might not be
| | 00:52 |
tremendously popular compared to JQuery.
But this is the layout, these are the items.
| | 00:58 |
Even as I go into say Forms for instance,
you'll notice all of these various
| | 01:01 |
options including that Spry again right
down here.
| | 01:05 |
Well, let's take a look at the Comment
section in Dreamweaver CS6 compared to
| | 01:09 |
the new version of Dreamweaver, which I
have running right behind it, and you can see.
| | 01:16 |
The Common section all of those various
items, not as many but its nice and
| | 01:20 |
cleaned up in fact notice how I can
insert a div tag here while here its just
| | 01:24 |
called div.
Nice and simple and is really one of the
| | 01:29 |
first items that I'd actually use on a
webpage but again its simplified I have
| | 01:33 |
HTML5 video.
Let's take a look at some of these other
| | 01:37 |
categories, so I'm gonna minimize
Dreamweaver CS6.
| | 01:41 |
And in this new version, as we take a
look at these different sections, we have Structure.
| | 01:46 |
So I can go into the Structures section
and a lot of this is HTML5 Tags that I
| | 01:51 |
can insert.
This is HTML5 in here.
| | 01:56 |
Let's take a look at Media.
Notice in here, again, more HTML 5 tags.
| | 02:01 |
Even inserting an edge anime compliation
avalible in media.
| | 02:04 |
I'll go into forms, simplified.
A lot of this content is HTML 5 as well
| | 02:11 |
and now I have JQuery mobile and JQuery
UI.
| | 02:16 |
So, I have this section allowing me to
easily insert JQuery components into my page.
| | 02:24 |
As I move on you can see templates and
then favorites as well.
| | 02:27 |
Going back to common, know that you
really have access to the latest in front
| | 02:32 |
end and back end web technologies when it
comes to using the insert panel.
| | 02:39 |
| | Collapse this transcript |
|
|
2. Integration with Creative CloudSyncing your settings| 00:00 |
As a Creative Cloud member, you have the
option of installing Dreamweaver on up to
| | 00:04 |
two computers, Mac or PC.
But setting up that second computer you
| | 00:08 |
like does take some time.
Which is why I like how the latest
| | 00:11 |
version of Dreamweaver allows you to sync
your settings.
| | 00:15 |
So your computer at home, for instance,
will have the same settings as your work computer.
| | 00:20 |
Or if you get a new computer, setting up
that new computer can be done easily by
| | 00:24 |
selecting Sync Settings.
So, let's first take a look at how
| | 00:28 |
Dreamweaver is set up here.
On my work computer, I'll go into
| | 00:32 |
Preferences, cuz usually what I do is.
In my CSS styles section, I make sure
| | 00:37 |
everything's checked down here, which
it's not set up that way by default.
| | 00:42 |
But I've customized my Preferences and
I'll select OK.
| | 00:46 |
The next thing I want to point out are my
site definitions because it took some
| | 00:50 |
time to set up these various site
definitions.
| | 00:54 |
And I want to make sure those get synched
up to my home computer.
| | 00:58 |
So with those set up, all I need to do is
go in here and I can sync settings now.
| | 01:03 |
But before I hit that button, I just want
to point out the preferences.
| | 01:08 |
So I can go in here to my Manage Sync
settings, just so you can see how this is
| | 01:13 |
set up.
So I can sync the application
| | 01:17 |
preferences, site settings and any
conflict resolution will ask me my preference.
| | 01:23 |
Whether it's going to sync the Cloud
settings or take my local settings, which
| | 01:26 |
is whatever computer I'm on, and sync
them to the Cloud.
| | 01:30 |
So, that's how that's set up.
But really, all I need to do is sync
| | 01:34 |
settings now, and it will sync those
settings to the Cloud.
| | 01:38 |
You can see that little check box says
hey, you know what?
| | 01:41 |
Everything is great for your work
computer.
| | 01:44 |
Now, what I want to do is I want to go
ahead and switch to my home computer.
| | 01:49 |
So, here I am on my home computer,
happens to be a Mac.
| | 01:52 |
This could just as easily be a PC, you
can see I'm logged in.
| | 01:56 |
In fact, right up here, I can sync my
settings.
| | 02:00 |
In fact, that's what I'm going to do,
sync settings now.
| | 02:03 |
And we'll go through and sync my
settings.
| | 02:05 |
And any conflict that might arise, it'll
give me this warning.
| | 02:09 |
It says, do you want to sync this
settings that are stored on the Cloud or
| | 02:12 |
use the local settings on this machine?
Well, there are no settings on this
| | 02:18 |
machine even there are no site
definitions.
| | 02:21 |
So, what I want to do is I just want to
sync my Cloud preferences to this local machine.
| | 02:27 |
I'm going to select Sync Cloud, and it
will sync those settings as it's doing now.
| | 02:32 |
Even if I go into my Files panel and take
a look at my sites, you'll see these
| | 02:37 |
sites that were just synced up.
In fact, if I take a look in my
| | 02:42 |
Preferences, you'll see CSS styles has
everything checked.
| | 02:46 |
So, it's synced to my preferences as
well.
| | 02:49 |
So as you can see, it's easy to sync your
settings allowing you to get up and
| | 02:53 |
running fast.
| | 02:54 |
| | Collapse this transcript |
| Using Typekit fonts| 00:00 |
As a Creative Cloud member, you have
access to TypeKit, allowing you to add
| | 00:04 |
really rich high quality fonts to your
website.
| | 00:07 |
So I'm gonna use this in conjunction with
Dreamweaver to really liven up my site.
| | 00:12 |
In fact, you'll notice that I'm already
logged in, I logged in with my Creative
| | 00:16 |
Cloud username and password.
And now I can dive into selecting the
| | 00:21 |
font I want.
Now, I could sort anyway I want by classification.
| | 00:26 |
So, I can sort by Sans Serif, maybe check
out all the paragraph text.
| | 00:30 |
And these are just fonts that are good
for paragraph text like Museo Sans.
| | 00:35 |
And I can add Museo Sans to my kit, so
I'm gonna select Create a kit.
| | 00:40 |
And it asks me to create a kit.
So I'd want to add domains as well as a
| | 00:44 |
name, and I can just say Paul's site.
And then for domain, this is where I want
| | 00:50 |
to make sure I'm adding localhost.
In my case, I'm using localhost and then 8888.
| | 00:56 |
But you can add a couple different
domains if you want to, just like I'm doing.
| | 01:02 |
I might add Paultraining.com.
However many domains I want.
| | 01:07 |
And it just makes the font available to
these domains.
| | 01:10 |
And since I'm testing this on my local
computer, that's why I wanna include a localhost.
| | 01:16 |
So I'm gonna select Continue.
And now it says you wanna copy this code
| | 01:20 |
below and paste it into your page.
So that's what I'm gonna do.
| | 01:23 |
I'm gonna copy this code.
And then I'm gonna go into Dreamweaver.
| | 01:28 |
Here I am in the latest version of
Dreamweaver, and I'm gonna go to the code
| | 01:31 |
of this page and up at the top, just
before the closing head tag, I'm gonna
| | 01:34 |
paste in those two lines of JavaScript
right there as you can see.
| | 01:40 |
I will save this page.
Now, what I'm gonna do is, I'm gonna go
| | 01:44 |
to Design view, and notice that these are
the fonts that I want to change.
| | 01:50 |
Not only the body text, but also this Big
Five text here.
| | 01:54 |
Alright, so that's what I wanna change,
but I have to locate the font.
| | 01:58 |
Now that I have Permission to use Typekit
fonts, I wanna go ahead and pick the
| | 02:02 |
fonts that I want to use, which is really
the fun part.
| | 02:06 |
So going back in here, I've installed the
JavaScript, I'm selecting Continue and
| | 02:11 |
Museo Sans is the font that I've added.
Now, with that done, I can click Publish.
| | 02:18 |
And it will go ahead and make that font
available to me.
| | 02:21 |
But I'm gonna go ahead and pick out some
other fonts to, because there's a lot we
| | 02:24 |
can do.
I can go into the slab serif, maybe add
| | 02:27 |
the headings, see what's good for
headings.
| | 02:31 |
Turning that on or off.
Let's get into decorative, taking a look
| | 02:35 |
at the decorative font.
Sure enough, big is the word I've used, I
| | 02:39 |
typed that in because it's for that text
big five.
| | 02:43 |
This could be anything you want, but in
my case I'm using big.
| | 02:48 |
I'm gonna add this to my kit, and now I
have those two fonts available.
| | 02:52 |
So I'm gonna start with Museo Sans.
And it does, tell me how to use it right
| | 02:57 |
here if I wanna implement it using CSS, I
can copy this line right here.
| | 03:02 |
Musao Sans and then Sans Serif is just my
fallback.
| | 03:05 |
So I'm gonna copy that line right there
and I'm gonna close that.
| | 03:08 |
And I'm gonna select Publish just to make
sure both fonts are available, and now
| | 03:12 |
I'm gonna go back into Dreamweaver.
Here I am in Dreamweaver.
| | 03:18 |
Now, I could just click on the font
family and now if I go into manage fonts,
| | 03:22 |
you have access to Edge Web Fonts.
But in this case, I want to add that font
| | 03:28 |
from TypeKit.
So, I'm gonna select Done.
| | 03:30 |
And if I just double-click right here, I
can replace that name with the name that
| | 03:34 |
I just copied, which is Museo Sans and
then Sans Serif.
| | 03:38 |
So hitting enter, that will now be my
font available to my page.
| | 03:43 |
It'll be that nice Sans Serif font.
And the thing is, I'm gonna do this also
| | 03:48 |
for my Big Five text right here.
Again going beyond Arial and adding that
| | 03:55 |
font there.
So let me go back to TypeKit.
| | 03:58 |
Here I am in my TypeKit editor.
I'm selecting this Acta Poster Swashes.
| | 04:04 |
And as I take a look at that font, I
wanna do the same thing.
| | 04:08 |
Copying that font family, those two names
and I've already published but I can
| | 04:12 |
always hit Publish again just to be on
the safe side.
| | 04:17 |
And now I'm gonna go into Dreamweaver,
instead of Arial, I'm gonna double-click
| | 04:21 |
and replace that name with my new TypeKit
font Acta.
| | 04:25 |
Alright, and one thing you'll immediately
notice is you don't see your font.
| | 04:30 |
And you actually won't see it running in
Dreamweaver, because you actually need to
| | 04:35 |
test this through the domains that you've
given TypeKit permission to give these
| | 04:39 |
fonts to.
Okay, so I actually already have this
| | 04:44 |
site set up to test on my local machine.
So if I go into Site > Manage Sites and I
| | 04:51 |
take a look at this site profile, and go
into the servers, you'll see right here
| | 04:56 |
as I double-click this one, you can see
I'm using this local network and this is
| | 05:02 |
my localhost 888Wildlife.
This is what i'm giving Permission to
| | 05:10 |
TypeKit to test from.
Okay.
| | 05:13 |
So I'm just highlighting that, that's the
server that it's gonna be tested on, is
| | 05:19 |
this URL which has permission to use
TypeKit.
| | 05:24 |
And from there I'm going to save all my
pages, and then preview in Safari.
| | 05:32 |
Now I'm previewing in Safari, you can see
that Museo font as well as this gorgeous
| | 05:36 |
Acta font.
I'll scroll down, you can see that font
| | 05:39 |
being implemented down here as well.
So, that's how you can implement TypeKit
| | 05:44 |
fonts into your site, really allowing you
to use high quality fonts in your web project.
| | 05:50 |
So I encourage you to check out all of
the gorgeous fonts available in TypeKit today.
| | 05:55 |
| | Collapse this transcript |
|
|
3. CSS DesignerStyling content using CSS Designer| 00:00 |
In Dreamweaver CS6, which I have open
here, as well as previous versions of
| | 00:04 |
Dreamweaver, if you wanted to change the
visual aspect of the page is you'd
| | 00:08 |
actually do that through the CSS styles
panel by adding CSS.
| | 00:14 |
And really it's just a matter of adding
properties from this long list.
| | 00:18 |
And to be honest with you, it's not
terribly intuitive.
| | 00:22 |
Which is why in the latest version of
Dreamweaver this CSS styles panel has
| | 00:27 |
been replaced by the much more intuitive
CSS designer panel.
| | 00:34 |
So, here I am in the latest version of
Dreamweaver and I notice the CSS designer
| | 00:38 |
panel off to the side.
I'll go to split view just to point out
| | 00:43 |
that there is no CSS on this particular
page, but I want to show you how to add
| | 00:47 |
selectors, add properties to some CSS.
But I want to show you how to add your
| | 00:54 |
own CSS to a page.
So, I'm going to start off right up here
| | 00:58 |
with the sources and just like it says I
need to add a new CSS source by selecting
| | 01:01 |
this plus sign.
And then I can create a new file, attach
| | 01:05 |
an existing one, or define in page which
is what I'm going to select.
| | 01:10 |
So, I've added that style tag.
You can see it gets added over here.
| | 01:14 |
So, I can minimize that and go down to
media where I can add some media queries.
| | 01:20 |
I'm going to skip this for now, because I
want to just keep this simple and I want
| | 01:23 |
to go into selectors.
So from here I can start to add a selector.
| | 01:28 |
Which ever selector I want, whether I
want it to be.
| | 01:31 |
Paragraph or maybe body, I can add that
body selector.
| | 01:36 |
Selecting that by hitting Return and then
hitting Return again, to create that selector.
| | 01:42 |
You can see it gets created over here and
I can take a look at my Properties Panel,
| | 01:45 |
check this out, look at all of these
properties that I can add.
| | 01:50 |
I can add them intuitively.
Visually in a lot of cases, as I scroll
| | 01:54 |
down, this is much more intuitive, and
just easier to add properties.
| | 01:59 |
In fact, you can see there's quite a few,
which is why, we have the ability to jump
| | 02:03 |
down to particular sections.
Whether it's, the text section, the
| | 02:08 |
border section.
The background, or other.
| | 02:11 |
You can see I can jump around, in this
case, the body of my page I can select
| | 02:16 |
text and I can change the default font to
Gil Sans, basically that font family.
| | 02:23 |
It changes it for all the text on the
page.
| | 02:28 |
And I can change the color, just to a
medium gray, just like that.
| | 02:33 |
I'd say that looks, pretty good so far.
I can add some more, selectors as well, I
| | 02:38 |
can press the plus sign, and then add in
say, h one in this case, selecting it.
| | 02:44 |
Hitting Return, and jumping down to Text,
and maybe making my H1 a orange color.
| | 02:52 |
Just like that.
In fact, let's change the weight to a
| | 02:55 |
lighter font, just like that.
I think that looks pretty good.
| | 03:00 |
In fact, I can save this page, and just
select Live View, and just see everything
| | 03:05 |
rendered out.
You can see have those two selectors,
| | 03:09 |
being show there, and as I select even
this text right here, look what happens.
| | 03:15 |
In my selectors area, it gives me this
computed.
| | 03:19 |
Whatever properties that were used to
make up that element.
| | 03:24 |
It gives me all of those properties.
Okay, so I can jump in here.
| | 03:28 |
It doesn't matter that this color was
defined in my h one, I can jump in here
| | 03:32 |
and change that color easily as I'm doing
right now.
| | 03:37 |
So, I can change the color, really
doesn't matter where it is.
| | 03:41 |
I can change it to what I want.
All by selecting it right in here.
| | 03:45 |
So in this case, I'll just change it to
sort of a green, kind of like that.
| | 03:49 |
And again, that's what Compute It does,
it'll take all the properties and give
| | 03:52 |
them to you in this list.
Same thing even if I select, say for
| | 03:57 |
instance, the body or h one selector, I
can just show the set properties.
| | 04:03 |
So this just also makes it easier, rather
than scrolling down that long list, I can
| | 04:07 |
show the set properties just by checking
that box, and now I get the set
| | 04:11 |
properties for those items.
So there's multiple ways to view, as well
| | 04:17 |
as change your CSS properties when it
comes to the latest version of Dreamweaver.
| | 04:23 |
I encourage you to check out the CSS
Designer Panel.
| | 04:26 |
You will notice that it will be much more
intuitive when you start adding as well
| | 04:30 |
as manipulating CSS properties.
| | 04:33 |
| | Collapse this transcript |
| Adding advanced CSS properties| 00:00 |
The CSS Designer panel also allows you to
design for the modern web by giving you
| | 00:05 |
access to some more Advanced CSS
features.
| | 00:10 |
I'll show you what I mean, in fact for
this page I wanna add just a nice gradient.
| | 00:15 |
And, that's not gonna require an image,
putting that in the background, cuz I can
| | 00:18 |
do that in CSS.
So let's take a look, as I select a style
| | 00:22 |
tag, I can go to body.
I can select that, and you will notice a
| | 00:25 |
lot of those properties I just mentioned.
Whether it's Text shadow, Border radius,
| | 00:31 |
you'll start to see some of them.
But I'm gonna go down to Background
| | 00:35 |
image, going beyond an image and I'm
gonna Add a Gradient.
| | 00:39 |
So from here, notice how I get, these
color stops that I can manipulate, I can
| | 00:43 |
manipulate the angle.
I can change this second color stop just
| | 00:48 |
to be a medium gray, kind of like that.
And then I'm gonna hit Enter and it
| | 00:54 |
applied it.
You might not see it yet, because I need
| | 00:57 |
to select Live View.
But I also get these little warnings.
| | 01:01 |
This information that says Gradient
control syntax's that are not supported
| | 01:05 |
by Dreamweaver will be overridden.
Okay, so if you wrote your own gradients,
| | 01:10 |
then it'll just override those.
But this is just a brand new page
| | 01:14 |
overall, there's no gradients in there
just yet.
| | 01:18 |
But as I go to the next item it says for
gradient control Dreamweaver generates
| | 01:22 |
vendor specific syntax's based on the
settings in preferences.
| | 01:28 |
And it's great that changes to the values
result in changes to all of these syntax's.
| | 01:33 |
Well, let's take a look as I go to
Dreamweaver > Preferences to CSS Styles
| | 01:38 |
right down here.
Use Vendor prefixes for Webkit.
| | 01:43 |
In fact, I can check Firefox and Opera,
selecting OK.
| | 01:48 |
Now, anytime I change these properties,
it'll change all of these specific
| | 01:54 |
syntax's for various browsers.
So I'm gonna Close that.
| | 02:00 |
What is meant by that as I close up both
of those?
| | 02:03 |
If I go into Split view, in fact let's go
into full on code view as I scroll up you
| | 02:06 |
can see.
We have Web Kit, Mozilla Firefox, Opera,
| | 02:11 |
it adds all of those various vendor
specific prefixes.
| | 02:15 |
And all I need to do is I need to change
that one property in the Properties panel
| | 02:19 |
and it changes all these various vendor
specific prefixes.
| | 02:24 |
Let's go ahead and see it in action as I
select Live view.
| | 02:27 |
You can see that gradient, right there.
In fact if I go back into Body, down to
| | 02:30 |
my Background, I can see that Gradient,
and I can start changing it.
| | 02:35 |
I can change that, you know to be more of
a gold if I want to, to be something
| | 02:39 |
subtle, kind of like that, sort of that
brown color, a taupe color.
| | 02:45 |
I hit Return, and you can see how it adds
some of that color there.
| | 02:49 |
Now I wanna go beyond the Gradient
background, and I wanna add some
| | 02:52 |
additional properties.
In fact, in this case I'm just gonna open
| | 02:55 |
up a current website that I've been
working on.
| | 02:59 |
In the website folder, I'll open up this
index HTML.
| | 03:02 |
As I select Live View, you can see what
this page looks like so far, and it looks
| | 03:06 |
pretty good.
But I wanna add some of these advanced properties.
| | 03:11 |
In fact, for this text for instance.
I can go to my Styles CSS and for my
| | 03:16 |
Heading 1 through 3, I can add a Drop
Shadow.
| | 03:22 |
And that's what I wanna do to offset that
text.
| | 03:24 |
So, I'm going to the Text area.
I'll scroll down a little further, you
| | 03:28 |
can see Text Shadow right there.
I can add a text shadow that's black, and
| | 03:33 |
I can start to offset it.
Now, notice how I have Live View selected.
| | 03:38 |
But I can add that drop shadow, that text
shadow.
| | 03:42 |
Give it a little bit of an offset and
lets blur it a little bit and now you can
| | 03:45 |
see how it kind of sets that off from
that background image there.
| | 03:50 |
So that looks pretty good, that's the
first property I'm gonna change.
| | 03:53 |
I'm going to move on cause I want to
start to take a look at some additional properties.
| | 03:57 |
In fact for these images, I can take a
look at those and even for this
| | 04:00 |
background image I can change the
properties for it as well.
| | 04:05 |
So, going into my Grid CSS, I'm going to
change the hero image.
| | 04:12 |
So, I'm selecting this hero ID and I'm
gonna scroll down.
| | 04:19 |
And in this case I'm gonna round the
corners cuz I think that would look
| | 04:22 |
pretty good so right down here it's
underneath Border, Border Radius is what
| | 04:25 |
I'm changing.
In fact, i can lock down all four corners
| | 04:30 |
so I'm gonna click there to change the
properties, now I just need to scrub.
| | 04:36 |
And as I move to the left while clicking,
move to the right, you can see how it's
| | 04:41 |
curving those corners.
So I can just give it a nice curved
| | 04:45 |
corner look, just like that.
In fact, I don't want these bottom
| | 04:49 |
corners curved.
So I can easily click to unlock those
| | 04:52 |
properties from one another.
And I can take that corner down to 0,
| | 04:57 |
take that corner down to 0, or even,
Delete it or Disable it entirely if I
| | 05:01 |
want to.
In this case since it's really not
| | 05:05 |
needed, I'll just delete it, just like
that, and now I have that nice look, I
| | 05:08 |
think that looks pretty good.
So I've added a Border Radius.
| | 05:12 |
That looks pretty good.
Let's come down here to these images.
| | 05:16 |
And really, as I start to take a look at
this, you can see how complex your panel
| | 05:20 |
gets after a while.
After you start adding multiple CSS
| | 05:25 |
files, even some media queries.
In fact, as I select this image, any one
| | 05:29 |
of these images, it gives me all of those
properties.
| | 05:33 |
And this is where computed comes in
really handy.
| | 05:37 |
Because I can take a look, it's all the
computed properties.
| | 05:40 |
You can see all of these IDs and classes
are applied to make-up this one element
| | 05:45 |
but computed gives me all of those
properties right in here.
| | 05:50 |
So if I need to change a property,it
makes it easy, cause I don't need to
| | 05:53 |
worry about where those properties are.
Computed gives me everything right in here.
| | 05:59 |
So computed comes in really handy.
And if I want to change any one of these
| | 06:03 |
properties, or add additional properties.
I can go down to this promo class, and
| | 06:08 |
here's where I want to add an additional
property.
| | 06:11 |
This promo class will affect all four
images.
| | 06:14 |
And in this case, what I wanna do for
this promo class is I want to just give
| | 06:18 |
it a box shadow.
So I'm gonna jump down to Background,
| | 06:22 |
scroll down a little further.
You can see Box Shadow right here.
| | 06:26 |
Sounds like a great idea.
Give it a nice shadow, a drop shadow.
| | 06:31 |
That's black in this case, and I can
start to change that vertical and
| | 06:34 |
horizontal shadow directions.
You can see how I can manipulate that and
| | 06:39 |
you can see it change right in here.
Since I have Live View selected, I'm
| | 06:43 |
gonna blur it a little bit as well.
Actually a lot, just to give it that nice
| | 06:49 |
sort of glowing look in this case to make
them stand out, a little more.
| | 06:56 |
So I love how that looks, you can see
that it's added that box shadow, and I
| | 07:00 |
added that property through this promo
class.
| | 07:04 |
And I can always take a look at that code
by right clicking, and going to the code.
| | 07:09 |
Just like that you can see how it's added
that web kit box shadow and that box shadow.
| | 07:15 |
So if I go into preferences CSS Styles
you can see that it's added that web kit 1.
| | 07:20 |
And the reason you don't see Firefox or
Opera is because the default box shadow
| | 07:24 |
is actually implemented in those
browsers.
| | 07:28 |
So, that looks good I will go back to
design view.
| | 07:32 |
Save all my files, but you can easily see
how you can add advanced CSS properties
| | 07:38 |
very easily using the CSS Designer panel.
| | 07:42 |
| | Collapse this transcript |
| Implementing media queries| 00:00 |
These days we not only need to be
concerned about how our content looks in
| | 00:04 |
a desktop browser, but also how it looks
if it's on a tablet or even a mobile device.
| | 00:10 |
So we need to make sure our content
responds appropriately.
| | 00:14 |
And luckily the CSS designer panel makes
it really easy to implement media
| | 00:18 |
queries, because that's how creating a
responsive design is usually done.
| | 00:24 |
So the first thing I need to do as is
says here, you need to select a source,
| | 00:27 |
which will be my style tag, right here.
And then I can click the Plus sign, to
| | 00:31 |
add a media query.
Now I'm gonna do that in a second, but
| | 00:34 |
know that the property here that I'm
gonna manipulate is gonna be this article.
| | 00:38 |
So I want this article to always be
centered, on the tablet device as well as
| | 00:42 |
on a mobile, device, and then be off to
the right hand side on my desktop.
| | 00:47 |
So again selecting style, adding a media
query by clicking that Plus button.
| | 00:52 |
And you'll see that it says media, query,
screen is what I'm gonna implement.
| | 00:56 |
So I'm just gonna add a condition.
So, if you're viewing it on a screen, as
| | 01:00 |
opposed to being printed, and as well as
an additional property, in this case it's
| | 01:05 |
gonna be maximum width.
Say, in this case, 768 is what I'm gonna
| | 01:12 |
add because if the maximum width is 768
pixels and it's on a screen, then
| | 01:16 |
implement whatever CSS properties I add.
Alright, I'm gonna select OK and you'll
| | 01:23 |
see it right over here screen.
And maximum width 768 and doing this
| | 01:28 |
right down here I have these controls as
well so I can preview this 768 desktop
| | 01:32 |
even down to a mobile device.
Alright, so taking a look with this media
| | 01:39 |
query selected I can start to add
properties.
| | 01:42 |
Now again what I want to manipulate is
gonna be a article so I'm gonna add a selector.
| | 01:47 |
And it's gonna be the article.
That's the property I want to change for
| | 01:51 |
this media query.
So hitting Enter, and then Enter again,
| | 01:55 |
and now I can change the margin.
So I can change the margin to be a
| | 02:00 |
percentage, and maybe it will be 10% on
either side.
| | 02:05 |
So that's what I'm gonna add, 10% on
either side.
| | 02:10 |
So those are basically overrides that
I've added.
| | 02:13 |
So when I go to desktop, I still have all
that padding.
| | 02:16 |
Again, if I go to global, and I take a
look at the article, you can see it says
| | 02:20 |
40% and 10%.
And then what if I select the 768
| | 02:25 |
article, it's gonna be 10% and 10%.
If I go into Code view, you can see the
| | 02:31 |
global and then that override for a
tablet device.
| | 02:38 |
I'll go back into the Design.
I will come up here, select that style tag.
| | 02:42 |
Add an additional media query.
In this case, it's gonna be four screen.
| | 02:47 |
And the maximum width is gonna be about,
say, 600 pixels, okay?
| | 02:52 |
I'm adding that property just by hitting
Enter.
| | 02:54 |
And now I can add various selectors.
So it's gonna be that same process of
| | 02:59 |
adding an article, in this case cuz
that's what I want to have the override for.
| | 03:04 |
So I'm hitting Enter a couple times.
An then I can change the margin to
| | 03:07 |
something even smaller.
So the margin in this case, literally
| | 03:11 |
might be, roughly say ten, pixels.
So 10% clear down to ten pixels.
| | 03:18 |
So it's really gonna be pretty tight
right in there.
| | 03:22 |
And, keep in mind, this is for that
width.
| | 03:25 |
So I can go from my desktop to my tablet
size with that 10% there, as you can see,
| | 03:31 |
that 10%.
Clear down to my, mobile size as well,
| | 03:36 |
you can see, as I select that, mobile
media query, making that 10 pixels.
| | 03:43 |
So I'm gonna save this page and I'm gonna
preview it, in a browser.
| | 03:48 |
As I scale it down, again its still
desktop, you'll see it pop at 768 pixels wide.
| | 03:54 |
So I know its gonna look good on a
tablet, scale it down further and you can
| | 03:57 |
see it pop for a mobile device just
getting rid of all that extra space.
| | 04:03 |
And it gives me that mobile device
orientation.
| | 04:06 |
So let me just switch to a project that
is in the website folder.
| | 04:10 |
It's the index.html.
And you can see this page in action, done
| | 04:14 |
in a similar fashion.
In this case, it's the minimum width
| | 04:18 |
that's being defined, the 600 pixels and
769.
| | 04:22 |
So you do it multiple ways.
There's plenty of different media queries
| | 04:25 |
that you can add.
Whether it's the height orientation
| | 04:29 |
aspect ratio whatever the case may be,
even resolution.
| | 04:32 |
Alright so that's how that's implemented.
So let's take a look at this project
| | 04:36 |
because more properties are being changed
even as I select that particular media
| | 04:40 |
query you can see all of these various
properties that are changing.
| | 04:45 |
So let's preview it.
In Safari, and we have desktop scaling it down.
| | 04:53 |
You see that pop, as we eliminte some of
that space for this hero image.
| | 04:58 |
And then we go down to mobile, where sure
this is still pretty small but you have
| | 05:02 |
these four images laid out appropriately
as well, not taking up so much space.
| | 05:08 |
And then you have the contents down
below.
| | 05:11 |
So that's how you can use the CSS
Designer panel, by adding media queries
| | 05:15 |
to your page, ultimately making a nice
responsive design.
| | 05:20 |
| | Collapse this transcript |
|
|
4. Responsive Design in DreamweaverFluid grid layout updates| 00:00 |
The latest version of Dreamweaver
actually has some updates when it comes
| | 00:04 |
to creating content using the new fluid
grid layout.
| | 00:09 |
So, I'm gonna go to File> New, and right
here I can create a new Fluid Grid layout.
| | 00:16 |
Cosmetically, the columns are actually
now grey instead of that pink color but I
| | 00:20 |
can just click Create and then Save.
The CSS file.
| | 00:25 |
And what's in this CSS file are the media
queries for mobile, tablet, and desktop, okay?
| | 00:31 |
And as I select save, you'll see that its
actually added a div right in here on my page.
| | 00:37 |
And this is what's great, and this is the
update.
| | 00:39 |
'Cuz I could jump in here, and I can
start duplicating this div.
| | 00:42 |
And I have these wonderful controls that
I can really start manipulating this
| | 00:46 |
content with.
So, I can duplicate that a couple times,
| | 00:49 |
maybe I can have a header at the top.
This next one might be my hero image.
| | 00:53 |
I'll put a hero image in there.
Maybe there's a promo here.
| | 00:58 |
But, I'm quickly able to create a layout,
literally using these controls.
| | 01:03 |
So, I used a duplicate.
I can hide the div if I want to.
| | 01:07 |
I can also delete it.
But I can also even reorder them so I can
| | 01:11 |
move the promo up.
Or promo it down.
| | 01:13 |
And what I'm doing is swapping the Div 3
with Div 2.
| | 01:17 |
This isn't the only way to create content
when you're using the Fluid Grid Layout.
| | 01:22 |
Because you can use your insert panel.
And in Structure, I can maybe select
| | 01:26 |
Navigation, so.
An HTML5 tag I can insert.
| | 01:31 |
and I will just give it a quick class
called Nav.
| | 01:33 |
And this is the cool part, I'm gonna
insert this as a fluid element.
| | 01:38 |
This is really nice because this gives me
control when it comes to these different
| | 01:42 |
layouts that I'm about to show you.
So I'm gonna select OK.
| | 01:47 |
Created this nav right here, and again
navigation.
| | 01:52 |
I'll add that later, but I can move that
up like that, okay?
| | 01:56 |
Now let's take a look as I go to Design
View.
| | 01:59 |
I can click on tablet, I can go to
desktop, and I can really start
| | 02:03 |
manipulating this layout for each one of
these screen sizes.
| | 02:09 |
So if I go back to split-view and take a
look at the grid CSS, this is the cool part.
| | 02:16 |
If I start modifying the Navigation DEV
in the desktop view, it will add those
| | 02:21 |
properties right in here.
Okay, because this happens to be my
| | 02:28 |
desktop layout media query if I go to
tablet you can see its already set up for
| | 02:33 |
me to start manipulating or adding
properties for my tablet layout here.
| | 02:41 |
And then mobile is the first one as well.
So when you insert an element and you
| | 02:45 |
have that Fluid Grid Checkbox checked its
gonna add this element.
| | 02:49 |
Makes it easy I didn't have to duplicate
that three times.
| | 02:52 |
That's ready to go.
And really the last thing I'm gonna do at
| | 02:56 |
this point, is just save, this file.
And I'll just save this as index HTML.
| | 03:01 |
And when I save it, notice that there are
two dependent files that I didn't have to
| | 03:05 |
write, but are also included, to make
sure, that this layout will work for
| | 03:08 |
multiple screens.
| | 03:11 |
| | Collapse this transcript |
| Adjusting content for different screen sizes| 00:00 |
When you create a page and element using
the new fluid grid layout you really have
| | 00:04 |
control over those elements across
different screen sizes allowing your
| | 00:07 |
content to be responsive to the screen
size that it's on.
| | 00:13 |
In this case, I have some fluid grid
divs.
| | 00:16 |
And notice as I select Desktop, we can
see everything that stretches across,
| | 00:20 |
tablet and then mobile.
So I can start to manipulate these divs
| | 00:26 |
based on this screen size.
So, I can take this promo down to about 3
| | 00:31 |
columns wide.
Just like that.
| | 00:34 |
And if I want to add additional promos, I
can just duplicate this div.
| | 00:39 |
And if I want to move it next to that
promo, I can move it up a row, just like that.
| | 00:43 |
In fact, let's duplicate this two more
times.
| | 00:46 |
You can see I have four promos in this
layout for my desktop.
| | 00:52 |
If I select Tablet size, you can see I
now have control over this layout as well.
| | 00:57 |
So I can have each promo maybe it'd be
about two columns wide just like that.
| | 01:02 |
So I'll take them down, maybe move this
up a row just like I was doing before.
| | 01:07 |
Taking it down to two columns, moving it
up a row and really this allows me to
| | 01:11 |
control the layout for this desktop
screen size.
| | 01:16 |
And notice there's additional controls
like if I want to swap this promo one
| | 01:20 |
with promo two, I can do that.
You also have the ability to lock the div
| | 01:25 |
so it won't be flexible, it would be a
fixed position, which is also available
| | 01:29 |
and then as we go down to mobile, I can
make this again two columns wide but in
| | 01:33 |
this case, I'm just gonna move this up a
row.
| | 01:39 |
Just one promo.
So, I basically have two rows and two
| | 01:44 |
columns for this mobile layout.
So it's the same content, it's just
| | 01:50 |
organized and laid out differently.
So that looks pretty good.
| | 01:55 |
You can see I have the full control over
this layout, and what's going on behind
| | 01:59 |
the scenes if I select Split View, you
can see right in here for this grid CSS,
| | 02:04 |
you can see the code that is written.
As I scroll up we can see this is the
| | 02:11 |
desktop layout, if I select this button
here for my desktop layout, all these
| | 02:15 |
media queries will be in effect.
Scrolling up you can see the tablet
| | 02:20 |
layout, which is in effect when I select
that tablet button right there.
| | 02:24 |
And then we have the default, which is
our mobile.
| | 02:29 |
And keep in mind, this is CSS so it
cascades down.
| | 02:32 |
So, it starts with the mobile CSS and
then these are.
| | 02:36 |
The overrides for tablet and then
desktop.
| | 02:40 |
As I select my Design View, you can see
how that content looks there.
| | 02:44 |
And in fact, what I'm gonna do now is I'm
just gonna save all these files.
| | 02:49 |
But I also wanna just open up the
website, the final website.
| | 02:55 |
It just shows this in a more real-world
fashion.
| | 02:57 |
You can see as I roll over each one of
these elements you can see there's images
| | 03:02 |
in here as I go from desktop to tablet.
You can see how that content changes as
| | 03:07 |
well as for mobile you can see how that
content adjusts as well.
| | 03:12 |
And as you start to work you might notice
that maybe the columns or the
| | 03:15 |
highlighting might get in the way what
you can always do.
| | 03:20 |
Is you can just turn off that Fluid Grid
View, just like that and lastly what I
| | 03:25 |
can do is select Live View and now you
can see Live View, shows, the content.
| | 03:32 |
Basically this is a browser a version of
a browser that is running in DreamWeaver
| | 03:37 |
and lastly I can always Preview it in the
browser of my choice, in this case I'll
| | 03:42 |
just launch this is Safari.
Here's my content.
| | 03:50 |
I can see that everything looks good and
as I scale down the browser, you can see
| | 03:54 |
how that content adjusts.
It goes from those three columns wide to
| | 03:59 |
two columns and that pop right there
means that the height of this image has
| | 04:03 |
changed for that media query.
Scaling it down further, and this is the
| | 04:09 |
mobile view.
And you can see how that's laid out, two
| | 04:12 |
rows, two columns, and then my content
beneath, as well.
| | 04:16 |
Fluid Grid layouts allow you to make a
responsive site pretty easily.
| | 04:20 |
| | Collapse this transcript |
|
|
5. HTML5 and jQueryAdding HTML5 content| 00:00 |
The latest version of Dreamweaver has
robust support for HTML 5.
| | 00:04 |
Now, in Dreamweaver CS6, your support for
HTML 5, if I go to File > New, was really
| | 00:09 |
this DOC type, as well as a couple
templates.
| | 00:14 |
And that's a great place to start.
In fact, I'm just going to start with a
| | 00:17 |
blank page.
Select Create, and I'll just save this page.
| | 00:25 |
And I'll just call this Index.
Because what I want to do with this page
| | 00:29 |
is I want to insert HTML 5 elements, and
various HTML 5 tags.
| | 00:34 |
So, right in here, in my body right here,
I can go to the Insert panel.
| | 00:38 |
I can go to structure, and this has been
reorganized.
| | 00:42 |
It's nice and clean.
It gives me all of these HTML5 tags that
| | 00:45 |
I can start inserting right away.
So if I need to insert a header, I can
| | 00:49 |
select Header.
I can give it a class or ID, or I could
| | 00:52 |
just click Okay and leave those blank.
You can see right in here.
| | 00:56 |
I have that content and I can replace it
with whatever I want.
| | 01:02 |
The header for my page.
Moving on from that, I can insert
| | 01:05 |
navigation the same way, adding that nice
HTML 5 tag.
| | 01:10 |
Easy to read, and this is where my
navigation will go for this page.
| | 01:16 |
So, you can see how easy it is to start
to insert HTML 5 content into any page,
| | 01:20 |
whether it's a new page or a current page
that you already have created.
| | 01:27 |
Go ahead and insert one last thing here,
which will be an article.
| | 01:32 |
An article tag just like that, you can
see how that's set up.
| | 01:36 |
So, I have an article, I have an aside
and whether I'm using this Insert panel
| | 01:40 |
or not.
What I can also do is I can hand code this.
| | 01:44 |
So, I can start typing in article.
There it is, selecting it.
| | 01:49 |
And you guessed it, we have code
completion.
| | 01:52 |
Because as I do that forward slash, you
can see it completes that closing tag for
| | 01:56 |
me, and this will be my article number
two.
| | 01:59 |
So there's HTML 5, easy to insert into a
new page, or a page that you already have.
| | 02:06 |
In fact, if I open up this website that
I've been working on, this index HTML,
| | 02:10 |
you can see it in action.
Because as I scroll down, you can see
| | 02:16 |
here I have the heading, I have the NAV
scrolling down.
| | 02:21 |
You can see figure various HTML 5
elements that I've implemented and even
| | 02:25 |
going beyond that.
If I just take a look in media you also
| | 02:30 |
have HTML file and video audio which is
being used in here as well.
| | 02:35 |
And lastly, if we just Preview this, you
can see that it looks great not only is
| | 02:39 |
the code easy to read, but you can see
how the contents laid out everything
| | 02:43 |
looks clean.
All using HTML 5 tags easily insertable
| | 02:48 |
using the Insert panel or just typing it
directly in Code View.
| | 02:55 |
| | Collapse this transcript |
| Adding HTML5 audio and video| 00:00 |
Now that most modern browsers allow you
to play HTML 5 audio and video, the
| | 00:04 |
latest version of Dreamweaver allows you
to easily insert this content into your page.
| | 00:12 |
So, what I'm going to do is go to Insert
panel, go down to Media, and I'll see
| | 00:15 |
HTML 5 Video and Audio.
So, let's just scroll down on this page,
| | 00:19 |
right down here is where I want to insert
a video.
| | 00:22 |
So selecting HTML5 video, what it does is
it adds this square, but it really adds
| | 00:27 |
all of these various properties.
So from here, it's just a matter of
| | 00:31 |
filling in the blank, starting with the
source.
| | 00:34 |
So, I can browse to a certain file.
This is going to be an MPEG4 file in my
| | 00:40 |
Video folder.
Notice also, there's an OGV file and a
| | 00:44 |
WEBM file as well.
I want to make sure I have those
| | 00:48 |
additional formats so this video plays
across multiple browsers.
| | 00:53 |
So, with that mMPEG4 selected, I can
select Open.
| | 00:56 |
And it actually recognizes those
additional videos in that folder.
| | 01:01 |
Fills it in for me, that's nice.
I'm also going to select a poster image.
| | 01:06 |
And this is going to be a JPEG that will
be be displayed before the user presses
| | 01:10 |
the Play button.
So, here's the JPEG I'm selecting.
| | 01:15 |
Select Open.
And you can see it actually gives me the
| | 01:17 |
default size of that JPEG.
And what I can also do is I can go to
| | 01:22 |
Split view, and you'll see what has been
written, all of this HTML 5 video.
| | 01:27 |
In fact, the width is one thing you'll
notice.
| | 01:30 |
It was a little wider.
Maybe I want to make that 100% so it scales.
| | 01:33 |
I can do that.
Notice my different sources as well as controls.
| | 01:38 |
So, let's take a look at that.
As I go back to Design view, you can see
| | 01:42 |
it fits in there nice and neat, right
down here at the bottom I'm displaying
| | 01:45 |
the controls.
I can have it auto-play, you get quite a
| | 01:48 |
few options right down here.
And the last thing I'm going to do is
| | 01:52 |
pick my Flash fallback in case none of
these video formats work.
| | 01:57 |
Allow them to play this FLV file.
So, selecting that, and now this is ready
| | 02:03 |
to go.
So I will save this page and preview it
| | 02:07 |
in a browser.
As I scroll down, you can see there's the video.
| | 02:13 |
They will expand and contract, fits in
nice and neat.
| | 02:17 |
I can see the poster image here, press
Play.
| | 02:24 |
(MUSIC) See that works out great.
I also have the ability to go full screen
| | 02:27 |
here as well.
So, that's HTML 5 video, pretty easy to implement.
| | 02:32 |
And my next step is just to insert some
audio.
| | 02:35 |
So, I'm going to close the browser, go
back in the Dreamweaver and again, write
| | 02:39 |
down here HTML 5 Audio.
Selecting that gives me that icon.
| | 02:44 |
And again, it's a case of just filling in
the blank pointing to that source,
| | 02:48 |
happens to be a MPEG3, and I have the
additional files in here as well.
| | 02:53 |
Those are to support additional browsers.
And when I select that, it automatically
| | 02:58 |
fills that in and give me the controls.
You can have it auto-play if you want to,
| | 03:02 |
probably not the best idea to have it
auto-play.
| | 03:05 |
But nonetheless, that's available to me.
I'll save this page, and then preview
| | 03:09 |
this in a browser.
As I scroll down, you can see the Sabi
| | 03:14 |
Song, (MUSIC) plays just fine, and we
still have the video.
| | 03:19 |
So, you can see how easy it is to
implement HTML 5 video and audio in
| | 03:23 |
latest version of Dreamweaver.
| | 03:26 |
| | Collapse this transcript |
| Updated jQuery integration| 00:00 |
The latest version of Dreamweaver has
support for the most popular front end
| | 00:04 |
and back end technologies, including
JQuery.
| | 00:09 |
In fact, if I create a new page and first
thing I'm gonna do is just save it to my desktop.
| | 00:15 |
As index.
And now I can add these components to any
| | 00:19 |
web page.
But notice if I go to my Insert Panel I
| | 00:22 |
have JQuery mobile.
Allowing me to create a mobile website.
| | 00:26 |
Or even an app.
An i have JQuery UI.
| | 00:29 |
So selecting JQuery UI, notice all these
components I can add to my website.
| | 00:35 |
So in this case I might want to insert a
dialogue box.
| | 00:39 |
So I'm gonna do theirs.
Select Dialogue.
| | 00:42 |
And it inserts that component, right
there.
| | 00:45 |
Alright, you'll notice some controls down
here, but the first thing I'm gonna do
| | 00:48 |
is, I'm gonna save this page.
Now, when I do that, after adding a
| | 00:52 |
JQuery component.
It's basically gonna save all these PNG
| | 00:56 |
files, JavaScripts, CSS, all this code
that I didn't have to write.
| | 01:00 |
So, we'll copy everything over and now
I'm good to go.
| | 01:04 |
In fact, the first thing I'm gonna do is
just select Live View.
| | 01:08 |
Again, this is after saving.
I've selected Live View, and you can see
| | 01:11 |
the default functionality.
Notice how this is re-sizable.
| | 01:17 |
I can also close it.
And there's more we can do as well.
| | 01:21 |
Again, with this selected down here in
the properties panel.
| | 01:24 |
It's resizable, it's dragable, and auto
opened.
| | 01:28 |
And I can close on escape when I hit the
escape key.
| | 01:31 |
I can even make it modal.
That's some of the functionality I can do.
| | 01:35 |
I can go beyond that.
I can say hey, you know what, when you
| | 01:39 |
first reveal his object make sure it
comes in with a fold.
| | 01:44 |
Which will be nice.
Over the course of, say, 1000
| | 01:48 |
milliseconds, which is one second.
And then I can have it fade out.
| | 01:52 |
So on hide, just have it fade out over
the course of one second.
| | 01:56 |
So I've changed a couple of parameters
right down there.
| | 01:59 |
I'm gonna save this page, selecting Live
View, and you can see it expand out, just
| | 02:04 |
like that.
That background is actually a little more
| | 02:08 |
gray, so that's the modal window, and,
again, re-sizable, drag-able.
| | 02:14 |
I'll close it, and we'll see it fade out,
just like that.
| | 02:19 |
Alright, so that looks pretty good, but
you probably wouldn't have that dialogue
| | 02:23 |
box pop up immediately.
So what I want to do now, is just turn
| | 02:28 |
off Auto-Open and I'm gonna add another
JQuery UI.
| | 02:34 |
Component, in this case it's gonna be a
Button.
| | 02:37 |
So, I'm adding that button right here and
with it selected, notice how I get some
| | 02:41 |
options down here as well.
I can include icons and primary just
| | 02:46 |
means it's going to be on the left hand
side, the icon will, and secondary means
| | 02:50 |
it will be on the right hand side.
So, I can add a star for instance, but
| | 02:56 |
really what I want to do is when you
click on this button.
| | 03:01 |
That is labeled join.
I want to open up that dialog box.
| | 03:04 |
So going back to that, dialog box, right
there, with it selected, I can trigger
| | 03:08 |
it, based on button one, which I really
just added.
| | 03:13 |
So selecting that, it will trigger that
event on click, okay?
| | 03:18 |
So that's the functionality I've
implemented, pretty straight forward.
| | 03:23 |
I'll save this content, an notice how
it's gonna include the button scripts as
| | 03:27 |
well; the JavaScript, the CSS.
An with that in place, selecting Live View.
| | 03:33 |
I can select Join, an you can see that
dialogue box popup, that I can customize
| | 03:38 |
the content for.
An notice how I can close it as well.
| | 03:44 |
I'm gonna go ahead and open up the
website that I've been working on.
| | 03:48 |
So if I open up the index.html, I'm going
to select live view.
| | 03:51 |
So, in this case, you can see the Join
button right here.
| | 03:53 |
As I select it, you can see that modal
dialogue box pop up.
| | 04:03 |
An then I can start filling in these
various fields.
| | 04:06 |
I can also close it, an you can see it
fade out.
| | 04:09 |
Behind the scenes, if I go to code view,
notice you'll see that dialogue box right
| | 04:16 |
here, as well as, the call, to open up,
that particular dialogue box right here.
| | 04:25 |
So this is embedded with a basically a
href on click open up dialogue one is how
| | 04:31 |
that works.
So that's just a simple example of how
| | 04:35 |
you can embed JQuery UI components into a
website.
| | 04:38 |
| | Collapse this transcript |
|
|
6. Edge Tools and ServicesEdge web font integration| 00:00 |
The introduction of web fonts has to be
one of the most exciting areas for web designers.
| | 00:06 |
Because it allows you to go beyond system
fonts and pick your own custom font that
| | 00:10 |
fits your project.
In this case, if I just select Live View.
| | 00:14 |
You'll see these fonts, it's pretty
straightforward.
| | 00:17 |
I mean, it's not bad but it's not
particularly interesting either.
| | 00:20 |
So, I'd want to go beyond these system
fonts by adding by adding my own web font.
| | 00:25 |
So, I'm going to select Page Properties
cuz, quite frankly, this is just the
| | 00:28 |
easiest way to do it.
Selecting Page Properties, I can go
| | 00:32 |
beyond these system fonts and select
Manage Fonts.
| | 00:37 |
And this is the exciting part because I
can add Adobe Edge Web Fonts to my
| | 00:40 |
project, they're free.
There's hundreds and hundreds of them.
| | 00:46 |
As you'll see, as you scroll through,
there's so much to choose from.
| | 00:49 |
But in this case, I really want to pick a
nice like script font for South Africa.
| | 00:55 |
So, I'm selecting Script sorting by the
Script fonts.
| | 00:59 |
I can add Alex Brush, I can scroll down,
maybe add Meddon, or I can even take a
| | 01:03 |
look at these fonts recommended for
headings.
| | 01:08 |
So, in here, so I go, I like Miama, so
I'll select that one as well.
| | 01:12 |
I can turn off that sorting, I can search
as well Source, Sans Pro is a font I like
| | 01:17 |
cuz it has different weight and I can add
that quickly.
| | 01:21 |
So, I've added them to this page.
I'm going to select Done.
| | 01:25 |
And if I use this drop down, notice how
they're listed right down here.
| | 01:30 |
So, I can select Source Sans Pro to be
the font that gets used on my page.
| | 01:35 |
And I can change the weights to maybe a
300 weight.
| | 01:39 |
You also have Normal and Italic, but I'm
going to select OK.
| | 01:43 |
I'm going to save my page, and I'm going
to select Live View.
| | 01:47 |
Now I have that nice, elegant font that
looks really good there.
| | 01:51 |
As I scroll down, I can see that font
being used down here as well.
| | 01:55 |
But again, I want to change this word
South Africa as well as all of the
| | 01:58 |
headings to be a nice script font.
So, what I can do there is turn off Live
| | 02:04 |
View and go to my CSS Designer panel, and
I'll just expand this out.
| | 02:09 |
Because if you notice right down here the
targeted rule is my H1 span, H2 span, H3 span.
| | 02:16 |
So, you'll see that right here as I
select it.
| | 02:20 |
I can sort my properties by text, and it
gives me the font family right here.
| | 02:25 |
So, going beyond that default font that
I've added, and I can pick Miama, right there.
| | 02:31 |
Selecting that, I can change the font
style, the font weight, if their applicable.
| | 02:36 |
And in this case, that's all I'm going to
do.
| | 02:39 |
Just apply it that way, and it will apply
it to all of my headings that have a span
| | 02:43 |
to them.
So, I'll save all my pages.
| | 02:49 |
Go to Live View, and you can see that
nice elegant font right there, looks
| | 02:53 |
good, that script font being implemented
across all my H1, H2, and H3 spans.
| | 03:01 |
But you can see how easy it is to add web
fonts.
| | 03:06 |
In fact, as I go up to modify manage
fonts, you'll see my edge web fonts, I
| | 03:10 |
can check out the ones that I've added.
I can add local web fonts as well, so I
| | 03:17 |
can go beyond what edge web fonts
provides, and I even have custom font stacks.
| | 03:23 |
So, that's how you can get to the fonts
to manage them.
| | 03:27 |
And lastly, if we go into our Code View,
you'll look right here.
| | 03:31 |
These are the fonts that I've added.
So, you can see them right there, it's
| | 03:36 |
just these JavaScript lines that add
those fonts to my page and allows me to
| | 03:40 |
use them anywhere I want.
Adding Edge Web Fonts is easy, so I
| | 03:46 |
encourage you to try it out for yourself.
| | 03:49 |
| | Collapse this transcript |
| Inserting Edge Animate compositions| 00:00 |
As a Creative Cloud member, you get
access to Edge Animate.
| | 00:05 |
Edge Animate allows me to do animation
using web standards, using HTML, CSS, and
| | 00:09 |
Java Script, as well as add interactivity
to that as well.
| | 00:14 |
So here's my project, notice that it is
an HTML file, and I can, preview it in a
| | 00:18 |
browser, just to see what it looks like.
And this is what I need to implement in
| | 00:24 |
to, my, website, that I'm working on in
Dreamweaver.
| | 00:28 |
So, what I'm gonna do, is, I want to
package up all of the assets.
| | 00:34 |
Not only the HTML file, but also the CSS,
the JavaScript, the images, everything
| | 00:39 |
and implement it into my site.
So, in order to do that, I'm gonna go to
| | 00:45 |
Publish settings, I'm gonna go to Animate
Deployment Package, because I wanna
| | 00:49 |
package all of this up as an OAM file.
It's gonna be called South Africa.
| | 00:57 |
And all I'm gonna do here is select
Publish.
| | 01:00 |
It will create that OAM file that will
make it easy to implement in Dreamweaver.
| | 01:07 |
Here I am in Dreamweaver, and I want to
insert that animation right beneath this
| | 01:11 |
navigation, but before these promo
images.
| | 01:14 |
So, I'm gonna go to the code and just
beneath that nave, right there about line
| | 01:19 |
52, is where I need to insert that AOM
file or that Edge Animate piece.
| | 01:25 |
So, I will even go to split view, so we
can see it in action, and now I'm going
| | 01:30 |
to insert the edge animate piece.
So, going to the Insert panel, to media
| | 01:36 |
and I'm gonna select Edge Animate
Composition.
| | 01:39 |
I can select SouthAfrica.oam, that same
OAM file that has come from this
| | 01:44 |
SouthAfrica animation files.
It's taken all of these various files,
| | 01:49 |
packaged them up into this one file.
So, all I need to do is select it and
| | 01:53 |
select Open.
And you'll notice, it actually puts it in
| | 01:56 |
right in here.
You can see, this is my edge animate
| | 02:00 |
embed code.
So, if we take a look at that particular
| | 02:03 |
code, you'll notice that what it did is
it unzipped everything and put it in this
| | 02:08 |
edge animate assets folder and points to
that HTML file.
| | 02:14 |
So, all I need to do is Save this file,
and I'll preview it in a browser, and you
| | 02:18 |
can see that Edge Animate piece with
everything else.
| | 02:23 |
This is dynamically controlled, you can
make animation, as well as add
| | 02:27 |
interactivity with Edge Animate.
And you notice how easy it is to
| | 02:32 |
implement, using Dreamweaver.
| | 02:35 |
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 |
Thank you so much for watching and
learning about the latest feature in the
| | 00:03 |
newest version of Dreamweaver.
I love how it helps me use the latest in
| | 00:07 |
web technologies like jQuery, as well as
allowing me to create CSS using the new
| | 00:11 |
CSS Designer panel.
It really is helpful.
| | 00:15 |
But please, try it out for yourself, and
together, I think we can make the web a
| | 00:18 |
beautiful place.
As Adobe updates, Dreamweaver will also
| | 00:23 |
be updating this course.
So, be sure to check back for updated content.
| | 00:27 |
And follow me on Twitter for the latest
under the username Paul Trani.
| | 00:33 |
| | Collapse this transcript |
|
|
