Adobe DreamweaverWhat is Dreamweaver?| 00:00 |
Adobe Dreamweaver is an application used
by web designers and developers to create
| | 00:05 |
websites and applications for use across
multiple targets.
| | 00:09 |
Including browsers, devices, and tablets.
Web designers use Dreamweaver for creating
| | 00:14 |
website prototypes using web-friendly artwork.
| | 00:17 |
Visually tweaking semantic web elements
using CSS inspectors and tools.
| | 00:21 |
Creating standards-based websites and
applications that easily flow across
| | 00:25 |
multiple screens.
Web developers use Dreamweaver for writing
| | 00:28 |
clean, organized code using the powerful IDE.
| | 00:31 |
Creating flexible mobile applications that
can be deployed both online and across
| | 00:36 |
devices.
Easily working with complex content
| | 00:39 |
management systems, like Wordpress and Drupal.
| | 00:42 |
And developing and deploying native mobile
applications using web standards-based
| | 00:47 |
frameworks and services.
Dreamweaver allows designers and
| | 00:50 |
developers to create websites and mobile
applications like the ones you see here.
| | 00:54 |
In short, Dreamweaver gives designers and
developers the ability to create and
| | 00:58 |
manage websites and mobile applications in
a user friendly environment.
| | 01:03 |
| | Collapse this transcript |
|
|
IntroductionWelcome| 00:00 |
(music playing
| | 00:04 |
Hi, I'm James Williamson, lynda.com senior
| | 00:06 |
author, and I wan to to welcome you to
Dreamweaver Creative Cloud Essential
| | 00:09 |
Training.
In this course, we're going to be focusing
| | 00:13 |
on introducing you to the tools and
workflows in Dreamweaver that help you
| | 00:16 |
build standards compliant websites.
We'll start by becoming comfortable in the
| | 00:21 |
Dreamweaver environment, and exploring how
to properly manage your sites.
| | 00:25 |
From there, we'll look at creating new
pages, structuring content properly, and
| | 00:29 |
making sure code is generated in a clean
and accessible manner.
| | 00:33 |
We'll also cover Dreamweaver's powerful
CSS tools, how you can use other programs
| | 00:38 |
like Word and Photoshop to speed up your workflows.
| | 00:41 |
And how to perform common tasks, such as
integrating images into your site, and
| | 00:45 |
properly creating and styling tables.
There's a reason that Dreamweaver has
| | 00:49 |
enjoyed such a long and sustained position
as the premier website creation and
| | 00:54 |
editing tool.
It's an incredibly powerful program and
| | 00:57 |
I'm really looking forward to showing you
much of what it can do.
| | 01:00 |
Let's get started.
| | 01:01 |
| | Collapse this transcript |
| Using the exercise files and a local site| 00:00 |
If you're a Premium member of the
Lynda.com online training library, you
| | 00:04 |
have access to the exercise files used
throughout this title.
| | 00:08 |
Exercise files for this course are
arranged by chapter.
| | 00:11 |
And are located in folders that are named
based on the movie numbers they represent.
| | 00:16 |
Since each exercise is self contained,
you'll want to work with each of these
| | 00:19 |
folders individually.
I recommend copying the exercise files
| | 00:23 |
folder to your desktop, and then
redefining your local Dreamweaver site
| | 00:27 |
using the new exercise folder as the root folder.
| | 00:30 |
Hm, now since we haven't even really
introduced Dreamweaver yet, much less
| | 00:34 |
discusses how to set up a Dreamweaver site.
| | 00:36 |
I'll go ahead and demonstrate the basics
of this for you.
| | 00:40 |
So, here I am in Dreamweaver, and I went
ahead and copied over my exercise folders
| | 00:44 |
to my Desktop.
So, the only thing that you have to know
| | 00:47 |
about Dreamweaver at this point is how to
define a local site.
| | 00:51 |
And we're going to go into that in a lot
more detail a little bit later on in the
| | 00:54 |
title.
So, I'm just going to show you the very
| | 00:56 |
basics of it.
So starting with the Welcome screen right
| | 00:58 |
here in the center of your screen, I'm
just going to click on create new
| | 01:01 |
Dreamweaver site.
And I only need to do this once when I
| | 01:05 |
initially set up the course.
I'll go ahead and give this a site name,
| | 01:08 |
and just for what we're doing I'll just
type in DW for Dreamweaver CC Essential.
| | 01:14 |
Course name is really up to you.
It doesn't matter what you call it, just
| | 01:19 |
something that's going to remind you what
it is you're doing.
| | 01:22 |
Now, here's the important part this little
dialog box right here for the local site
| | 01:25 |
folder.
This is essentially Dreamweaver asking you
| | 01:28 |
which files you want to work on.
So, I'm going to click the Browse Folder.
| | 01:31 |
I come right here to the right of that and
go out to my Desktop.
| | 01:36 |
I'll find my Exercise folder, and
depending on which exercise I'm working
| | 01:40 |
on, I'd look for that folder.
So, for example, if I was going to be
| | 01:44 |
working on the exercise 0103, I'd go in
the Chapter 1 directory.
| | 01:49 |
Find that folder and select it.
Now on the PC, you'll highlight that
| | 01:53 |
folder and you'll click the Select button
on the Mac you'll highlight folder and
| | 01:59 |
click the Choose button, so slight
difference there.
| | 02:01 |
That's all you have to do, as soon as you
hit that, you hit Save.
| | 02:05 |
And then in the Files panel, Dreamweaver
will make those Exercise files available
| | 02:09 |
to you.
Now when you're finished with one exercise
| | 02:12 |
and ready to move onto another, you don't
need to redefine another site.
| | 02:16 |
All you have to do is edit your existing
site, and I want to show you the easiest
| | 02:19 |
way to do that.
One you can go up and double-click on the
| | 02:23 |
name of the site.
Or you can just grab this pull-down menu
| | 02:26 |
and select it from the list of sites, and
it'll bring up the same dialog box we were
| | 02:32 |
just in.
After you get that, all you have to do is
| | 02:34 |
redefine where the local site folder is.
Just point it to the very next exercise.
| | 02:39 |
Choose that, save it.
Dreamweaver will update everything and
| | 02:43 |
your new files will be available for you
right here in the Files folder.
| | 02:47 |
Now, that's just the very basics of how to
define a site, so that you can work with
| | 02:51 |
all of our exercise files.
Later on, I'll go into site definitions
| | 02:55 |
and site structure in a much more detailed
fashion.
| | 02:57 |
| | Collapse this transcript |
| Approaches to learning web design| 00:00 |
If you're brand new to Dreamweaver,
chances are you're also brand new to web
| | 00:04 |
design.
This can make for somewhat of a steep
| | 00:07 |
learning curve, as you're trying to learn
a new discipline and a new program all at
| | 00:12 |
the same time.
In this movie, I'd like to offer some
| | 00:16 |
advice that can hopefully make that path a
little easier.
| | 00:20 |
I also want to make sure that you have the
proper expectations about Dreamweaver's
| | 00:23 |
capabilities where it fits into a proper
web design workflow.
| | 00:28 |
And what your expectations about this
course should be.
| | 00:31 |
First, if you're new to web design, I
really recommend starting by learning the
| | 00:37 |
basic of HTML and CSS.
Those two technologies are the core of web
| | 00:42 |
design.
And without a solid foundation in how they
| | 00:45 |
both work, your skills as a web designer
will always be incomplete.
| | 00:48 |
Dreamweaver is an amazing tool.
And much of the web design process in
| | 00:53 |
Dreamweaver can be preformed without ever
touching the code.
| | 00:56 |
This doesn't mean, however, that you don't
need to know what's going on behind the
| | 01:00 |
scenes.
Without a proper understanding of the code
| | 01:03 |
itself, you won't be able to tweak minor
errors, or go beyond the capabilities of
| | 01:08 |
Dreamweaver's visual tools.
Look at it this way, a talented mechanic
| | 01:12 |
might use really expensive tools when
working on your car because they help and
| | 01:17 |
work faster and more precisely.
Well, you know if I go out and buy those
| | 01:21 |
same tools however, that's not going to
automatically make me a great mechanic.
| | 01:26 |
And that's really how you really ought to
view Dreamweaver.
| | 01:29 |
It's a tool.
And to use it properly, you need to
| | 01:32 |
understand the processes and the
technology behind web design.
| | 01:35 |
Now, that doesn't mean that you can't
learn both at the same time.
| | 01:39 |
As you build your pages in Dreamweaver,
take time to examine the code that's being
| | 01:45 |
generated.
This is a great way to learn the structure
| | 01:48 |
and syntax of DSS and HTML.
I do want to stress however, that the
| | 01:51 |
focus of this course is to teach the
basics or Dreamweaver, not the basics of
| | 01:57 |
HTML and CSS.
To learn those, I recommend exploring the
| | 02:03 |
many titles in the Lynda.com online
training library that focuses on core web
| | 02:09 |
design skills.
Now, I recommend starting with my web
| | 02:12 |
design fundamentals course, as it gives an
overview of web design.
| | 02:16 |
Explores best practices, and defines much
of the terminology that you're going to
| | 02:20 |
hear in this course.
If you're brand new to web design, I
| | 02:24 |
really recommend that you complete that
course first before moving forward with
| | 02:28 |
this course.
And after that I recommend also exploring
| | 02:31 |
the HTML 5 essential training title and my
CSS series which includes CSS core
| | 02:37 |
concepts and CSS page layout.
Those courses will broaden your
| | 02:42 |
understanding of HTML and CSS, and help
you utilize Dreamwearver to its fullest
| | 02:47 |
potential.
| | 02:48 |
| | Collapse this transcript |
|
|
1. The Dreamweaver InterfaceWindows and Mac interface differences| 00:00 |
Dreamweaver is designed for both the Mac
and Windows.
| | 00:03 |
And although Adobe does the best they can
in making the program the same in both
| | 00:07 |
platforms, there are a few slight
differences between the two versions.
| | 00:11 |
Let's take a quick glance at those
differences in case you ever have to move
| | 00:14 |
from one platform to the other.
So, here we are on Windows.
| | 00:18 |
And the first thing I want to point out is
a slight difference in menus between the
| | 00:22 |
two platforms.
Now, in order for you to see the interface
| | 00:25 |
in all its glory, you have to open up a file.
| | 00:27 |
So, I'm just going to go right here, this
is the Welcome screen, and I'm going to go
| | 00:31 |
right here and click Create New HTML.
So, it's just going to create a new
| | 00:34 |
document and sort of build out the rest of
the interface, if you will.
| | 00:37 |
Okay, so I want to go up top to the menu.
Now, on a Windows machine, you'll notice
| | 00:41 |
that the Dreamweaver menu is up top.
And then, docked right beside that are
| | 00:46 |
these icons right up here in the same sort
of bar, and this is what's known as the
| | 00:51 |
Application toolbar.
Now, it has the workspace switcher, which
| | 00:54 |
is this menu right here that we're looking at.
| | 00:56 |
And it has Dreamweaver's cloud sync
settings, and a little help icon which
| | 01:01 |
will take you out to Dreamweaver's help.
So, that's all part of the Application
| | 01:04 |
toolbar.
And as you can see on the Windows
| | 01:06 |
platform, it's docked up top as part of
the menu.
| | 01:10 |
Now if I switch over to the Mac, you can
see that there's a slight difference here.
| | 01:14 |
In the Mac, the menu is up top all by itself.
| | 01:18 |
And this has to do more with the
constraints of the operating system than
| | 01:21 |
Dreamweaver, but the Application toolbar
is underneath it.
| | 01:24 |
You can see right here there's a longer
sort of bar and over here on the far right
| | 01:28 |
hand side, we have the workspace switcher
and the sync icons.
| | 01:32 |
Now, that's not that big of a difference,
but it is one of those things where if you
| | 01:36 |
go from one platform to the other.
You might be confused as to where those
| | 01:39 |
particular icons are.
There's one more thing on the Mac that I
| | 01:42 |
want to point out to you that we don't
have on the PC.
| | 01:45 |
If I go to the menu and I go to Window,
you can see right here I have an option
| | 01:49 |
for turning the Application Frame on and off.
| | 01:52 |
I want to talk about what that is.
I'm going to turn it off.
| | 01:54 |
First, if I turn the application frame
off, it sort of if you will unlocks all of
| | 02:00 |
the components of the interface.
Notice that I can take the document window
| | 02:04 |
now and just sort of move it around like a
floating palette.
| | 02:07 |
Notice that I can grab the Application bar
and move it around as kind of like a
| | 02:11 |
floating palate.
In fact, I can go up to window and turn
| | 02:14 |
the Application bar off, if I have the
Application Frame off.
| | 02:18 |
If on the other hand, I go back to window
and choose Application Frame again, notice
| | 02:22 |
that if I turn that on, it goes in and
snaps everything in place.
| | 02:25 |
The Application bar is up here.
I can no longer undock that Application
| | 02:29 |
toolbar.
The whole frame kind of moves around, all
| | 02:32 |
by itself.
So, that's another big difference between
| | 02:35 |
the Windows and the Mac operating system
is that in the Mac operating system I get
| | 02:39 |
to control the Application Frame.
Whereas in Windows, the Application Frame
| | 02:43 |
is just sort of locked in.
Alright, so let me go back to Windows now.
| | 02:47 |
And in Windows, I want to show you the
location of a couple of preferences.
| | 02:51 |
Most of the menu structures are the same,
but there's one really big difference.
| | 02:54 |
And you'll notice, if I go up to the menu
and choose Edit, I've got a few choices
| | 02:58 |
down at the bottom that aren't in edit
menu on the Mac.
| | 03:01 |
I have my Adobe ID log in, I have my
keyboard shortcuts, and my preferences.
| | 03:06 |
So, when I call out those individual
items, especially preferences, on the
| | 03:10 |
Windows machine, you're going to look
under the edit menu.
| | 03:12 |
Now if I switch over to Mac, if I go to
the Dreamweaver Menu option, which is a
| | 03:17 |
Menu option we don't have on the Windows machine.
| | 03:20 |
You'll notice there is the Adobe ID log
in, there are my keyboard shortcuts and
| | 03:25 |
there are my preferences.
All right, switching back to the Windows
| | 03:29 |
machine for just a moment.
The last sort of major change or major
| | 03:33 |
difference between interfaces that I want
to show you guys has to deal with the File
| | 03:36 |
panel.
So, I'm going to click over to the Files
| | 03:38 |
panel.
And, your Files panel probably looks a
| | 03:42 |
little different than mine.
Your Files panel, for example, you may not
| | 03:45 |
see the same directory structure that I'm
looking at, or the same files.
| | 03:48 |
And that's okay, because I have a site defined.
| | 03:51 |
If you don't have a site defined, the only
thing you're really going to see is
| | 03:54 |
probably all of this stuff up here, the Desktop.
| | 03:57 |
Your local drive, those sorts of things.
So, if that's what you're seeing, don't
| | 04:00 |
panic.
No big deal.
| | 04:01 |
If you want to see that same directory
structure, we're going to be defining a
| | 04:04 |
site in a little while and you'll see them then.
| | 04:06 |
You can also go back and watch the
Exercise files movie, which explains that
| | 04:10 |
process in detail, as well.
Okay, so the bit difference in the Files
| | 04:14 |
panel comes when we expand the Files panel.
| | 04:17 |
So, over here on the far right-hand side,
I have this little icon right here that
| | 04:20 |
says, Expand to Show Local and Remote Sites.
| | 04:23 |
When I click on that in the Windows
environment, you'll notice that this takes
| | 04:26 |
up the entire screen.
It just sort of of takes over the
| | 04:29 |
application, if you will.
I have my remote files on the left-hand
| | 04:32 |
side.
My local files on the right-hand side.
| | 04:34 |
And I get a menu up top that's a sort of
stripped down version of the menu.
| | 04:37 |
You'll notice that we have File, Edit,
View, and then we have this Site menu,
| | 04:42 |
alright?
Well, there is a little bit of a
| | 04:44 |
difference on the Mac when we expand this
panel, and let me show you what I mean.
| | 04:48 |
So here, I am on the Mac.
And I'm going to switch over to the Files
| | 04:51 |
panel and once again, I'm going to click
this Expand icon right here.
| | 04:55 |
And you'll notice that now what it does is
it sort of takes the Files panel and
| | 04:59 |
floats it as its own separate Floating panel.
| | 05:02 |
Now this is a panel that I can
re-position, I can expand it if I want to
| | 05:05 |
take up a bit more room.
But I don't get those menu options up top,
| | 05:09 |
that File, Edit, View, Site.
The menu stays the same.
| | 05:12 |
You'll notice, however, that we do have a
site menu option.
| | 05:16 |
And all of the things that are available
in the Windows-based site menu are
| | 05:20 |
available under this menu option as well.
And just like on Windows, when I click the
| | 05:25 |
Collapse icon, it collapses back into the
panel grouping.
| | 05:29 |
Let me switch back into Windows.
And you can see that when I click the
| | 05:32 |
Collapse icon, it does the same thing.
It collapses back into the same paneled
| | 05:36 |
grouping that you had before.
So, there are a few differences with the
| | 05:39 |
files panel there, but the main difference
there is on the Mac, it's going to expand
| | 05:43 |
into a floating panel.
But once you click the Expand view,
| | 05:45 |
whereas on the Windows machine, when you
click that, it's basically going to take
| | 05:48 |
over the entire interface.
So, those are, you know, most of the
| | 05:52 |
changes or the differences that I've show
you are really subtle.
| | 05:55 |
But they are important differences to note
in case you find yourself working on a
| | 05:59 |
different operating system than what
you're used to.
| | 06:01 |
Or, in this case, if you're watching a
tutorial that uses a different operating
| | 06:05 |
system than the one that you're currently
using.
| | 06:07 |
| | Collapse this transcript |
| The Welcome screen| 00:00 |
Before we get started building pages, we
should take a closer look at the
| | 00:03 |
Dreamweaver interface.
You know, being comfortable with the
| | 00:05 |
interface and knowing where things are located.
| | 00:07 |
Will make it a lot easier to concentrate
on the concepts and workflows being
| | 00:11 |
presented, rather than, you know, trying
to find a specific toolbar or icon.
| | 00:16 |
So, first, I want to take a look at the
Welcome screen.
| | 00:19 |
When you open up Dreamweaver, the welcome
screen is the very first thing that you
| | 00:23 |
see.
If shows right up here in the middle of
| | 00:25 |
the screen where you would normally see an
open file.
| | 00:27 |
Now, on a Windows machine, it's just part
of the background of the application
| | 00:32 |
frame.
So it has that sort of grey background all
| | 00:34 |
the way around it.
But as you can see, on the Mac here.
| | 00:37 |
The welcome screen just kind of floats
around as its own window.
| | 00:40 |
But either way, it just sort of shows up
right here in the middle of the screen
| | 00:43 |
when you don't have a document open.
Now if you do open up a document, I'm just
| | 00:47 |
going to click to create a new one here
really quickly, the welcome screen will go
| | 00:51 |
away.
It'll disappear, but as soon as you close
| | 00:54 |
the last remaining open document, it shows
right back up again.
| | 00:57 |
So, if you're ever wondering, oh no, where
did my welcome screen go?
| | 01:00 |
As long as you close any open documents,
it'll come right back.
| | 01:03 |
So what is the welcome screen and what
does it do?
| | 01:05 |
Well, you can kind of think of it as
Dreamweavers Homepage, if you will.
| | 01:09 |
Because it gives us really quick access to
a lot of the common tasks that you need to
| | 01:14 |
perform inside Dreamweaver.
So the first thing I want to do, is just
| | 01:17 |
sort of go over the Panel section by
section if you will.
| | 01:21 |
On the left hand side, we have a column
here that says Open a Recent Item.
| | 01:25 |
My guess, is, that my section over here
looks a lot different than yours.
| | 01:30 |
And the reason for that is that this is
going to have a list of all of the files
| | 01:34 |
you've been working on recently.
It will keep probably about eight of them
| | 01:37 |
or so if you will, and then as you open
them up it will replace them.
| | 01:40 |
So, I'm seeing a list of the files that
I've worked on.
| | 01:42 |
If you've opened some files and kind of
played around with them on Dreamweaver a
| | 01:45 |
little bit you'll probably see those files there.
| | 01:48 |
Now, if you're opening up Dreamweaver for
the very first time, and you haven't
| | 01:52 |
opened a file up recently, you'll at least
see this little open folder here.
| | 01:56 |
So, here's how this works.
Let's say, I want to go back and, finish
| | 02:00 |
working on this program's .htm file that I
was working on, just a little bit ago.
| | 02:05 |
Simply clicking on the link gives me a
very quick, and easy way to open that file
| | 02:09 |
up.
I can resume working on it, finish up what
| | 02:12 |
I'm doing, and then close out of it.
All without having to go the menu and
| | 02:17 |
browse for that folder or go to the files
panel and manage it that way.
| | 02:20 |
So it's a very quick and easy way to
access that.
| | 02:23 |
Now, if I don't have any recent files and
but I still need to open something up.
| | 02:27 |
I do have this option to click on the Open
folder which gives me a nice quick easy
| | 02:31 |
way to get into the Open file dialog box.
So that's kind of a fast way to access
| | 02:36 |
that too.
And that's really what the welcome screen
| | 02:38 |
is about.
Its about speed its about doing things
| | 02:40 |
quickly, and not having to go through a
lot of menu options.
| | 02:43 |
Take for example the middle column here,
the Create New column.
| | 02:47 |
So, in this one, we've got all sorts of
documents to choose from.
| | 02:51 |
We can create new HTML files, new CSS files.
| | 02:54 |
If you're using pre-processors in
Dreamweaver Creative Cloud, we have the
| | 02:58 |
new option of choosing LES and SAS files,
JavaScript, things like that.
| | 03:02 |
And if you go a little further down, there
are some options that are Dreamweaver
| | 03:05 |
specific.
Like we have fluid grid layouts that give
| | 03:07 |
you the option to create responsive
layouts that work across mobile devices
| | 03:11 |
and tablet screen sizes as well as desktop
screen sizes.
| | 03:14 |
So it's kind of nice to have a very quick
and easy way to open up and start working
| | 03:18 |
on one of those layouts as well.
Now, it's not all just documents.
| | 03:21 |
We will notice also we have a link here to
create a new Dreamweaver site.
| | 03:25 |
So, when we start a new project and we
need to define a new project and we need
| | 03:29 |
to define a new Dreamweaver site.
Which we'll do in just a little bit,
| | 03:31 |
actually, a little later on in the course.
The welcome screen gives us another quick
| | 03:34 |
and easy way to to do that.
There's also a little folder icon down
| | 03:37 |
here that says More.
If I open, for example, if I choose to
| | 03:40 |
create a new HTML file, you'll notice that
it just opens a file up.
| | 03:43 |
It doesn't give me any options, I'm just
getting the default HTML file based on my
| | 03:48 |
preferences.
However, let me close this, if I go back
| | 03:52 |
and click on the More, I actually get the
New Document dialog box.
| | 03:56 |
And this allows me to make some choices
about the document that I'm creating.
| | 04:00 |
So if I need something that's a little bit
different than the default or my default
| | 04:05 |
preferences for a document.
This is a nice quick and easy way to get
| | 04:08 |
to this dialog box.
So I'm going to hit Cancel to close out of
| | 04:11 |
that and I'm going to focus on the column
on the far right-hand side.
| | 04:15 |
Now this features a few links to some of
the videos that are on Adobe's tv.adobe
| | 04:21 |
website.
For example, this one What's New in
| | 04:23 |
Dreamweaver.
If I click on this it's going to launch my
| | 04:25 |
browser.
It's going to take me out to Adobe's
| | 04:28 |
website, and it's going to take me
straight to this What's New in
| | 04:31 |
Dreamweaver's Creative Cloud.
Which is a nice, short little video put
| | 04:35 |
together by my buddy Paul Trinee/g.
>> (SOUND), Adobe Dreamweaver.
| | 04:39 |
>> There's Paul.
>> Is the all in one tool.
| | 04:42 |
>> And it just basically gives you a
overview of some of the new features in
| | 04:45 |
Dreamweaver Creative Cloud.
So this is a nice way to learn a little
| | 04:48 |
bit more about the program.
And even dive deeper into some of the
| | 04:52 |
features that you might be interested in
learning more about.
| | 04:55 |
And that's not the only reference that the
welcome screen gives us quick access to.
| | 05:00 |
You'll notice in the bottom left hand
corner, we have these links, Getting
| | 05:03 |
Started, New Features, and Resources.
And if you click on those, they're going
| | 05:08 |
to take you out to Adobe's website, to
Dreamweaver documentation.
| | 05:12 |
So, here you're going to find more Help
files, Tutorials, References, a lot more
| | 05:16 |
information about the program itself.
So, that's a nice quick and easy way to
| | 05:20 |
get to some more detailed documentation
about the program.
| | 05:26 |
Now to the right of that, we have this
little area that includes the Dreamweaver
| | 05:31 |
logo in it.
And you know based on when you're viewing
| | 05:32 |
this title of the text that's next to it,
may be a little different from what you're
| | 05:35 |
saying from me.
Right now, you know it just sort of has
| | 05:37 |
this generic text in here about finding
the latest tips, podcasts and things like
| | 05:41 |
that.
But this is a message that, at least in
| | 05:43 |
past versions of Dreamweaver, has changed
over time.
| | 05:46 |
If updates come out, if new features are
added to it, within the Creative Cloud, I
| | 05:50 |
expect to see those in this little section.
| | 05:53 |
Because this usually ties back to Adobe's
website, and notifications are pushed
| | 05:57 |
through the program in this pane.
So keep your eye on that spot.
| | 06:00 |
It's easy to sort of ignore it, cause it
just kind of looks like marketing speak,
| | 06:03 |
but a lot of times, they'll push some very
useful information into that space.
| | 06:07 |
So you want to at least kind of keep track
of what that is saying.
| | 06:09 |
Now, there's only one more thing left on
the welcome screen.
| | 06:12 |
And that is this little check box in the
lower left hand corner that says, Don't
| | 06:15 |
Show Again.
If I choose that, Dreamweaver's going to
| | 06:18 |
say, okay, are you positive about this?
And give you some information on how to
| | 06:22 |
get it back if you change your mind.
If I say OK, for example, and I Close the
| | 06:26 |
welcome screen, then it's not going to
bother me ever again.
| | 06:29 |
So if you find it annoying, if you don't
like it, if it's something you don't find
| | 06:32 |
particularly useful you can close out of
it and not have to really deal with it
| | 06:36 |
again.
I on the other hand find it extremely
| | 06:38 |
useful, so if I wanted to get it back, to
do that I would just go to my preferences.
| | 06:42 |
Now on the Mac this is Dreamweaver
preferences, on the PC it would be Edit
| | 06:46 |
Preferences.
And I want to go to the General category,
| | 06:49 |
and there's a check box right here that
says Show Welcome Screen.
| | 06:53 |
Now its not just going to bring it back
automatically, its actually going to bring
| | 06:56 |
it back the next time I open up Dreamweaver.
| | 06:58 |
So when we quit Dreamweaver and then once
I really open Dreamweaver, you can see the
| | 07:04 |
welcome screen comes right back again.
Now personally I love how the welcome
| | 07:08 |
screen really sort of unobtrusively gives
me all this access to like recently opened
| | 07:13 |
files.
Gives me the ability to create new files
| | 07:15 |
with just a single click and you know I
even like kind of going out and exploring
| | 07:20 |
some of the new features of the program as well.
| | 07:23 |
Now some folks tend to let the welcome
screen just sort of blend into the
| | 07:26 |
background, they kind of ignore it.
But I think that you'll find that if you
| | 07:30 |
begin to use it regularly you'll find it
really speeds up the process of opening up
| | 07:35 |
current files or when you need to create
new ones.
| | 07:38 |
| | Collapse this transcript |
| Toolbars| 00:00 |
In Dreamweave Creative Cloud, toolbars
have become a less important part of the
| | 00:04 |
interface.
As several of the toolbars have either
| | 00:07 |
seen features removed from them or have
the toolbar itself removed entirely in an
| | 00:13 |
effort to streamline the application.
Toolbars do remain an important part of
| | 00:17 |
working within Dreamweaver so let's
explore the different toolbars that
| | 00:21 |
Dreamweaver has to offer.
Now I have the index.htm file open here
| | 00:26 |
from the 01_03 directory.
It's not important that you have just that
| | 00:31 |
file open because we're not really going
to do anything to it.
| | 00:33 |
But, you won't really see your toolbars
unless a document is open.
| | 00:37 |
So, I went ahead and opened this one up so
that we can see all of our toolbars.
| | 00:40 |
Now, you really only have about, I don't
know, four toolbars total inside
| | 00:45 |
Dreamweaver now, if you count the
Application toolbar.
| | 00:48 |
Now, again, the Application tool bar can
be found sort of up top, on the PC or the
| | 00:52 |
Windows version, if you will.
It will be docked horizontally along with
| | 00:56 |
the menu.
Whereas, on the Mac, as you can see here,
| | 00:59 |
it's directly underneath the menu.
There's only two options on this.
| | 01:02 |
Well, three, really, if you count the Help
file option.
| | 01:05 |
But we have our Workspace, which we'll
talk about later on.
| | 01:08 |
We have the Creative Cloud Sync settings,
so if you have, say, multiple computers
| | 01:14 |
that you have Dreamweaver installed in.
Maybe you have one at home and one at
| | 01:17 |
work, you could sync the settings between
the two of them so that the preferences
| | 01:21 |
and site definitions updated.
Once you got home, for example, from
| | 01:24 |
working, you could pull those back up again.
| | 01:25 |
So that's a nice feature.
And then we have a little bit of a
| | 01:28 |
information or quick help file if you will.
| | 01:30 |
But that's really the only thing that
you'll find on the Application toolbar.
| | 01:32 |
So is it really a toolbar?
Maybe in name only.
| | 01:36 |
Alright, so let's turn out attention to
the three toolbars that you'll probably be
| | 01:41 |
using a good bit and you can find them.
There's one that's always open and it's
| | 01:45 |
this one, this is the Document toolbar.
You'll find this toolbar just above any
| | 01:49 |
open file and the other two you'll find
depending upon which view you're in.
| | 01:54 |
Right now I'm in what we call Design View
and we'll talk more about those views and
| | 01:58 |
editing them a little bit later on.
But if I'm looking for my toolbars, I can
| | 02:02 |
go up to View toolbars, and right now it
looks like you only have two, Document and
| | 02:07 |
Standard.
We'll talk about why we only see two here
| | 02:10 |
in just a moment.
I'm going to choose Standard so I can open
| | 02:12 |
this one up.
And the Standard toolbar will come in the
| | 02:15 |
Mac interface, it'll open up just below
the document toolbar, on the PC interface.
| | 02:19 |
If you have enough room, it'll show up
side by side.
| | 02:23 |
But, if you don't have enough room, then
it'll show up below it, as well sort of
| | 02:27 |
stacked the way you are seeing it here.
But that's another interesting interface
| | 02:29 |
difference.
On the PC you're able to actually dock and
| | 02:33 |
un-dock toolbars and dock them side by
side, whereas on the Mac they stay sort of
| | 02:37 |
locked within the Frame.
So, the Standard toolbar includes icons to
| | 02:41 |
open up a new file, open existing files,
save files, cut and paste things to the
| | 02:46 |
clipboard, undo items, redo items.
So it's very much a, if you will pardon
| | 02:51 |
the term, a standard toolbar that you'll
find in other programs like Microsoft Word
| | 02:55 |
and things like that.
If its a toolbar you use a good bit you
| | 02:58 |
can have it open then you can work with it
but as you can see it takes up a good bit
| | 03:01 |
of screen illustrated.
Its really nothing I use on a consistent
| | 03:04 |
basis because those are tasks that I
typically perform through keyboard
| | 03:07 |
shortcuts or menu items.
So I don't typically use it but if you
| | 03:11 |
find it useful its available for you now.
If you want to turn a toolbar on and off,
| | 03:16 |
and you don't want to always go up to the menu.
| | 03:17 |
A very quick and easy way to do this is to
simply either right-click or control-click
| | 03:21 |
on any open toolbar.
And you'll get a check box that allows you
| | 03:25 |
to turn that toolbar on or off, which is
kind of nice.
| | 03:27 |
Now, I mentioned before that we had really
kind of three of these types of tool bars,
| | 03:31 |
but we only see two right now.
And the reason for that is the view that
| | 03:35 |
we are in.
So, I'm going to go right over here on my
| | 03:38 |
Document toolbar, and click on Code View.
Now, that's going to change the way I'm
| | 03:42 |
viewing the open document.
I'm going to actually view the code for
| | 03:45 |
that file, instead of preview of it.
And this allows me, of course, in Code
| | 03:48 |
View to edit code and work with the code
in my file.
| | 03:51 |
I actually prefer to hand code, so this is
the view that I see typically when I'm
| | 03:55 |
working inside Dreamweaver.
Well, there's another toolbar available to
| | 03:58 |
us now.
And in fact, if I right-click on the
| | 04:01 |
toolbar, you can see that the Coding
toolbar is now an option, whereas, it
| | 04:05 |
wasn't before.
The Coding toolbar is a little different.
| | 04:07 |
It's this little vertical toolbar, right
here to the left of the code.
| | 04:11 |
And it does this that make it a little bit
easier for you to edit your code.
| | 04:14 |
It'll show you syntax errors, it'll allow
you to place comments and uncomment things
| | 04:19 |
out.
It will allow you to auto format your
| | 04:21 |
code, expand and collapse code down.
So, it's a very handy too bar for those of
| | 04:26 |
you who like to, to hand code.
But of course if you're not in Code View
| | 04:29 |
there's no reason for it to show up.
So if I were to click back, for example,
| | 04:32 |
on Design View the Coding toolbar goes away.
| | 04:35 |
Now, what that tells us is the only
toolbar that's really going to be
| | 04:39 |
consistently visible to you.
No matter how you like to work inside
| | 04:43 |
Dreamweaver, that's the document tool bar.
And that's what you're seeing right here.
| | 04:47 |
Now the document tool bar used to have a
ton of stuff on it and in the Creative
| | 04:52 |
Cloud.
They've sort of pulled some of the
| | 04:53 |
features off of it.
Now the reason for that was the engineers
| | 04:56 |
really just felt like it was getting too cluttered.
| | 04:58 |
And so, instead of having all those icons
up there and having it be a little bit
| | 05:02 |
confusing, they decided to go a little bit
more minimal on it.
| | 05:06 |
Now the Document toolbar still changes
based from the way you're viewing the
| | 05:09 |
file.
In fact, I'm betting there are a couple of
| | 05:11 |
you out there right now that are looking
at the Document toolbar.
| | 05:14 |
And saying to yourself, no, no, no, mine
doesn't look like that.
| | 05:17 |
I'm missing some of that stuff.
How do you get that stuff on there?
| | 05:20 |
Well let me show you.
I'm going to turn off this Live View
| | 05:23 |
option that I have right now.
And you'll notice that a lot of the stuff
| | 05:26 |
disappeared.
My page rendering also changed as well,
| | 05:30 |
but I noticed a lot of the options up here disappeared.
| | 05:33 |
So, let's go over, just a really brief
overview, of the document toolbar.
| | 05:37 |
One of the first things, and probably one
of the most useful things in all of
| | 05:41 |
Dreamweaver, is just above all these icons.
| | 05:44 |
It's these two little links right here.
Now, this is what we call the Related
| | 05:48 |
Files feature inside Dreamweaver.
What this means is, let's say you're
| | 05:52 |
linking to an external Cascading Style
Sheet file, or JavaScript file.
| | 05:56 |
In the past and in other programs, you've
actually had to go out and open up those
| | 06:00 |
documents separately and work on them.
Well, starting with the previous version,
| | 06:05 |
I think Dreamweaver CS5 started it, I
think, my memory may be faulty there.
| | 06:09 |
But basically, since then, you've been
able to open up any related file to the
| | 06:13 |
file you're working on without having to
go out and find that file.
| | 06:17 |
Notice if I click, for example, on
main.css, which is the external style
| | 06:20 |
sheet attached to this file.
I can start to edit all my CSS code,
| | 06:25 |
without actually having to open that file separately.
| | 06:27 |
So that's a huge time saver.
It also allows me to see at a very quick
| | 06:31 |
and easy glance how many files are
relinked or related or, how many
| | 06:35 |
dependencies if you will, I have for a
specific file.
| | 06:38 |
So that's really nice, and anytime I want
to go back to editing the file at hand,
| | 06:42 |
all I have to do is click Source Code.
And then go right back to editing that
| | 06:45 |
file which is really nice.
Now you'll notice that a lot of the
| | 06:48 |
changes that we make when I click on these
Icons change how the document actually
| | 06:51 |
looks in the open window.
And that's really based on these 4 icons
| | 06:55 |
right here.
We have Code, Split, and Design.
| | 06:58 |
As I've shown you before, the Code View
gives you just a window on how the code
| | 07:02 |
looks.
Design View gives you a visual rendering
| | 07:05 |
of the page.
Now, I need to be really careful here when
| | 07:07 |
I say this.
This is a very, very old feature in
| | 07:10 |
Dreamweaver and it hasn't been updated in
a long time.
| | 07:13 |
It does a very poor job of rendering your
CSS files.
| | 07:16 |
So when you're looking at the Design view,
it does give you a very quick and easy way
| | 07:20 |
to highlight elements on the page and edit them.
| | 07:22 |
But you should in no way, shape, or form
look at this as a representation of how
| | 07:28 |
the page is going to render within the browser.
| | 07:29 |
Because this is a very, very old rendering
engine that just doesn't support a lot of
| | 07:34 |
the newest CSS properties.
So you're not going to get a good feel for
| | 07:38 |
how your page is going to look within the
browser by looking at this.
| | 07:41 |
Now, however, it is a nice way of learning
certain things.
| | 07:45 |
For example, if I click on the Split View
I see the code on the left hand side and I
| | 07:49 |
see sort of the design view rendering on
the right hand side.
| | 07:52 |
Now this is very valuable for those of you
who maybe don't know so much about code or
| | 07:57 |
you're just learning HTML.
And the reason for that is if you make a
| | 08:00 |
change on one side you'll see that change
update on the other side.
| | 08:03 |
Let me give you an example.
Let's say you want to know where this
| | 08:06 |
programs is within the code.
If I just simply highlight it, notice
| | 08:11 |
that, in the code view it jumped right to
that and highlighted that text.
| | 08:14 |
So it's a very quick and easy way of
finding where something is within the
| | 08:17 |
code.
It works both ways too.
| | 08:18 |
If I go over to the code and highlight
something in the code, in Design View I
| | 08:23 |
get to see exactly where that element is.
It's also true of editing things.
| | 08:27 |
So, if I edited programs for example and
just changed it to program, notice that if
| | 08:32 |
I click over into Design View, it makes
that change.
| | 08:34 |
In Design View, if I change it back, by
adding an S to this.
| | 08:38 |
I can see that it adds it right there to
Code View, so you can sort of work in
| | 08:42 |
either side and see it update in real time.
| | 08:44 |
It's a real nice way of finding things.
And figuring out exactly you know, what it
| | 08:49 |
is you're doing to the file, what's that
doing to the code.
| | 08:51 |
Or if you edit code what's that doing to
the visual side, so it's a very nice view.
| | 08:55 |
Now if you don't like the default way that
this is setup you can go up to View and
| | 09:00 |
you can change how the Split View looks.
If I choose Split Vertically for example
| | 09:04 |
and turn that off, then I get sort of this
sort of horizontal stacking of the two
| | 09:08 |
views.
I don't like that, so I'm going to turn
| | 09:10 |
that back on.
And you can also change it so that the
| | 09:12 |
Design View switches and is on the left if
you'd rather have it over there.
| | 09:16 |
So it's really about personal preferences.
Now, the last little icon that I want to
| | 09:20 |
cover right here is Live, and this turns
on Live View.
| | 09:24 |
Now, I'm going to talk more about Live
View later on.
| | 09:26 |
But what Live View is, it's a web kit
rendering within the Dreamweaver
| | 09:31 |
environment.
So this is a much more truer
| | 09:33 |
representation of what it might look like
in the browser.
| | 09:35 |
It's not 100% accurate, but it's certainly
a lot more accurate than the Design View
| | 09:40 |
itself.
The problem is, you can't edit in this
| | 09:42 |
view, at least not yet.
It's one of the things that I understand
| | 09:46 |
they're going to be adding to Dreamweaver
a little bit later on.
| | 09:49 |
But for right now, we can't.
Now, we also get some additional things
| | 09:53 |
that show up, when you turn Live View on.
These two things, like for example
| | 09:56 |
allowing you to Freeze JavaScript if your
interacting with elements on the page.
| | 09:59 |
And you want them to freeze in that
particular state.
| | 10:02 |
You could navigate back and forth between
the pages that you're looking at.
| | 10:06 |
I mean this is actual a real browser
inside of Dreamweaver.
| | 10:09 |
So if I wanted to I could use this address
bar to even to browse out to any website
| | 10:16 |
that I wanted to go to.
For example, Lynda.com and then just hit
| | 10:19 |
the Back button to the page I was working on.
| | 10:21 |
This allows me to actually navigate
through pages within my site and even
| | 10:25 |
click on external links and see if my site
is wired up the way that I'm wanting it
| | 10:29 |
to.
Now some of these don't belong to Live
| | 10:32 |
View.
If I turn Live View back off, for example,
| | 10:34 |
you'll notice that we have a little planet
icon, this allows us to preview our files
| | 10:38 |
in our browsers.
I'm going to go over that a little bit
| | 10:40 |
more later on.
We have title, which allows us to title
| | 10:43 |
our pages, for example, I could title it
Welcome to Roux Academy.
| | 10:48 |
That's going to add a title to our page.
And as a matter of fact, if I switch over
| | 10:52 |
to Split View, and scroll up into the head
of my document, you can see exactly what
| | 10:57 |
that's done for us within the code.
And then finally, I have these little
| | 11:01 |
icons right here that allow me to upload
and download files to my remote servers.
| | 11:05 |
Now, I don't have one defined right now,
so those are grayed out, but that's an
| | 11:08 |
option that this allows me to do.
Okay, I know that's a very quick overview
| | 11:12 |
of what the Document toolbar allows us to do.
| | 11:15 |
And I'm going to cover those features in
more detail as we go throughout the
| | 11:18 |
course.
I just wanted to give you a quick overview
| | 11:20 |
of all of the toolbars that are available
to you in Dreamweaver.
| | 11:23 |
And how, you know, they put a lot of the
functionality within Dreamweaver right at
| | 11:28 |
your fingertips.
Now, if you focus on how these toolbars
| | 11:31 |
can make you more efficient as you learn Dreamweaver.
| | 11:34 |
You're going to develop a more efficient
workflow when performing common tasks.
| | 11:38 |
So, pay attention to the toolbars, and
when it's appropriate to use them.
| | 11:42 |
| | Collapse this transcript |
| The Insert panel| 00:00 |
One of the things that Dreamweaver is
known for is its ability to handle many of
| | 00:04 |
the complex tasks of creating webpages visually.
| | 00:07 |
With Dreamweaver automatically generating
the code behind the scenes for you.
| | 00:12 |
Even when working with objects that are
relatively simple to code such as table,
| | 00:17 |
for example.
Dreamweaver really speeds up the process
| | 00:20 |
in generating that code into a single click.
| | 00:24 |
Now, the secret behind much of this
success is the Insert panel and in this
| | 00:29 |
movie, I want to take a moment to explore
the insert panel in a little bit more
| | 00:33 |
detail.
So here, I have the index.htm file opened
| | 00:36 |
from the 01_04 folder.
The first thing I want to show you is the
| | 00:41 |
Insert panel itself.
Now I'm looking at the default Workspace
| | 00:45 |
of Dreamweaver.
So if you don't make any changes to it,
| | 00:48 |
and you open up Dreamweaver, this is kind
of thte layout that the program is going
| | 00:51 |
to take.
By default, the Insert panel is docked
| | 00:54 |
right up here on the right-hand side with
the Files panel.
| | 00:57 |
So if I click on this little Insert tab
right here, I switch over to the Insert
| | 01:02 |
panel.
Now this is a view of the Insert panel as
| | 01:05 |
a vertical panel docked in what we called
the Panel Dock.
| | 01:09 |
There's actually several different
versions or sections of it if you will.
| | 01:12 |
There's a little pull down menu that it
first reads Common.
| | 01:15 |
But if I grab it, I can see that I can
also switch back and forth between
| | 01:18 |
structural elements and media elements,
and that sort of thing.
| | 01:22 |
Now, the Insert panel actually used to be
called the Object panel, and it was how
| | 01:26 |
you inserted certain objects on the page,
if you will.
| | 01:29 |
It's morphed over time into the Insert
panel, but the functionality is really the
| | 01:33 |
same.
Now, just like anything else in
| | 01:35 |
Dreamweaver, a lot goes into what your
personal preferences are in terms of how
| | 01:39 |
you work with a panel.
I really don't like using the Insert panel
| | 01:44 |
as a Vertical panel.
A lot of the people that I know and
| | 01:46 |
respect do, so if it doesn't bother you
being over here, you can simply leave it
| | 01:51 |
over here.
However, I really like to use the Insert
| | 01:53 |
panel as a horizontal, almost like a
toolbar really, and that's the way I
| | 01:57 |
prefer to do it so I'm going to show you
how to do that.
| | 02:00 |
If I grab this tab for the Insert panel
and drag to the left and release, you'll
| | 02:05 |
notice that it sort of floats it all by itself.
| | 02:07 |
Now this is not really what I want, I
don't want a floating panel but it's nice
| | 02:11 |
to know that if you wanted to undock it
and move it around you certainly can.
| | 02:15 |
Instead, I'm going to grab that tab again
and move it up just above the Document
| | 02:18 |
tool bar.
And you'll see that when I get it in the
| | 02:22 |
right place, I see this little blue
highlight, and when I release, it docks
| | 02:26 |
itself up top and it becomes a horizontal panel.
| | 02:30 |
Now to me, even though this takes up a
good bit more screen real estate.
| | 02:33 |
It's a lot more useful.
So now, instead of that pull-down menu, we
| | 02:37 |
have tabs that allow us to go back and
forth between these different sections.
| | 02:41 |
To me, it's just easier to access, it's
easier to scan and see what you're about
| | 02:45 |
to place onto the page, it's a little
easier to find things.
| | 02:48 |
Okay, so, what do these tabs do for us,
well they give us different sections of
| | 02:53 |
objects, if you will.
The first one that we're looking at right
| | 02:56 |
now is the Common Objects, and if you
hover over one of these icons it will tell
| | 02:59 |
you what it is.
A DIV tag for example HTML 5 video, Canvas
| | 03:04 |
Tag, Tables things like that.
So the common objects are just that.
| | 03:08 |
They're common objects, things that you
need on a routine basis.
| | 03:11 |
They're sort of assembled almost as a
Favorites, if you will.
| | 03:14 |
You know, these are the things that we
think you'll be using a good bit.
| | 03:17 |
Now a lot of these you can find in the
other sections.
| | 03:19 |
For example, if I go to Structure, you'll
notice that the first option here is Div.
| | 03:23 |
So, sometimes you'll find them in more
than one place.
| | 03:26 |
The Common Objects serves more as a
collection of objects you're going to use
| | 03:29 |
all the time rather than a distinct section.
| | 03:32 |
Other sections such as structure, media,
and form, they give you objects that are
| | 03:35 |
distinct to that section.
So structural elements for example, you
| | 03:38 |
get DIV tags and unordered lists, things
like headers, things like that.
| | 03:43 |
Media is going to give you video and audio.
| | 03:45 |
The forms section is obviously going to
give you all the elements that you'll need
| | 03:48 |
to forms, things like that.
Now at the very end you'll find Favorites
| | 03:52 |
and when you click on that, that's going
to be blank.
| | 03:54 |
It actually tells you, hey, Ctrl+click to
customize your favorite objects.
| | 03:58 |
So what does this allow you to do?
Well, it allows you to go a little bit
| | 04:01 |
further than just the common objects, and
really collect the elements and objects
| | 04:05 |
that you need on a routine basis.
Your favorites, for example.
| | 04:09 |
So if I right-click or Ctrl+click this, I
could choose customize favorites and then
| | 04:14 |
what I see is all of the available objects.
| | 04:16 |
And if I scroll through there you'll see
there's a lot of them.
| | 04:19 |
In fact, if I grab the pull-down menu here
that allows us to sort of filter through
| | 04:24 |
those.
You'll notice that there are a few of
| | 04:26 |
these that we don't see by default in the
Insert panel, such as ASP and ColdFusion
| | 04:31 |
Markup Language and things like that.
These would only be available if you were
| | 04:35 |
working on that type of document.
So at least in this if you know you're
| | 04:38 |
going to work on say ASP files for a lot
you can bring over some of those objects.
| | 04:43 |
And store them up in your Favorites, so
that you can have them available to you
| | 04:45 |
all the time.
Alright, so let me show you how this
| | 04:48 |
works.
If I click on an Object and I click the
| | 04:51 |
right arrows here, it's going to add it to
my favorites.
| | 04:53 |
So I could do DIV for example, I could go
down to more of the structural elements,
| | 04:57 |
such as, Headers and Paragraphs and
Sections, all right?
| | 05:04 |
And then, if I wanted to, I could add a
separator to create sections within my
| | 05:10 |
favorites.
And now, let's say I wanted some Media
| | 05:12 |
Objects, so I could go to Media and say
okay, I want HTML5 Video, I want Flash
| | 05:16 |
Video.
I want HTML audio you know I want to be
| | 05:20 |
able to insert those easily.
And I might Add another separator for
| | 05:23 |
example I might go to something like Form
objects and add a Form element.
| | 05:28 |
So you get the idea essentially you don't
really know what your favorite elements
| | 05:33 |
are.
Or the elements that you're going to be
| | 05:34 |
using a lot until you've used Dreamweaver
for a while.
| | 05:36 |
So my advice to you is after you, you
know, you've been using Dreamweaver for a
| | 05:40 |
few months.
See if there are a lot of elements and
| | 05:42 |
objects that you use all the time that are
in different sections.
| | 05:45 |
If there are, go ahead and create a
favorites section.
| | 05:47 |
And it's going to look just like this now.
And that gives me very quick and easy
| | 05:51 |
access to this.
Okay, one last little thing that I wanted
| | 05:54 |
to show you.
I'm going to click back on Common Objects.
| | 05:56 |
I want to show you really how the Insert
panel works and how some of the things
| | 05:59 |
that it can do for you behind the scenes.
If I wanted a table on the page for
| | 06:02 |
example.
I could simply click anywhere on the page
| | 06:05 |
and click on the Insert Table and it would
give me a dialog box to add a table to the
| | 06:09 |
page.
It also gives you access to the page that
| | 06:12 |
you might not have visually.
Otherwise you have to go into the code.
| | 06:16 |
For example if I go right beside menu I
notice that there's a pull down menu for
| | 06:21 |
head.
Now what is Head?
| | 06:23 |
Now if I go into Code view, I can see that
above the body of my document, there is
| | 06:28 |
this Head Tag.
Inside the Head tag, there are all the
| | 06:30 |
things that make our page work, but aren't visible.
| | 06:33 |
Things like the title of the page, meta
characters, descriptions, keywords links
| | 06:38 |
to external things like style sheet files.
So I always kind of described this as you
| | 06:41 |
know stuff that makes the page work but
you can't really see it.
| | 06:44 |
Alright, if I click back in design view if
you're not comfortable going in and adding
| | 06:48 |
those things.
Or if you really don't want to take the
| | 06:50 |
time to do that, you want maybe a faster
way to do it.
| | 06:52 |
You can use head objects, so if I click
pull-down menu, notice that I can create
| | 06:56 |
custom Meta tags, Keywords, Descriptions, Viewport.
| | 06:59 |
So if I want to control how the page is
going to be controlled on mobile devices
| | 07:03 |
in terms of the initial view, the
Viewport, Meta tag allows me to do that.
| | 07:06 |
I'm just going to add a quick description,
so I'm going to add description, and then
| | 07:10 |
it gives me a dialogue box that says,
okay, what do you want to do?
| | 07:12 |
Well, I'm going to save you, haven't
watched me type, because I'm not a very
| | 07:15 |
good typist.
And I'm just going to Paste this in.
| | 07:17 |
So here's what I'm pasting in, I'm saying,
The Roux Academy provides fine art
| | 07:21 |
education across multiple disciplines in
an environment that encourages growth and
| | 07:25 |
nurtures creativity.
That's a great mission statement, it's
| | 07:28 |
certainly as good a mission statement as
I've ever heard.
| | 07:31 |
So you can just pause the video and type
that in if you want to do the same thing,
| | 07:34 |
or you could make up your own.
Mission statements are fun.
| | 07:36 |
Alright, if I click OK, it doesn't really
look like anything's happened to my page.
| | 07:41 |
But if I switch over to Code View, you'll
notice that now, in the head of the my
| | 07:45 |
document, I have a new Meta tag right here.
| | 07:48 |
That gives me a name of description, and
in the content section, it gives that nice
| | 07:52 |
little description that I just typed in.
So, you can see how the Insert panel
| | 07:56 |
allows you to do that without having to go
in, and actually edit the code itself,
| | 07:59 |
which is pretty cool.
So, you know, if you prefer to work
| | 08:02 |
visually or if you're just looking for a
quick way to generate standards-compliant,
| | 08:06 |
clean HTML for complex objects.
The Insert panel is really going to be
| | 08:10 |
your tool of choice.
And for new Web designers, the Insert
| | 08:13 |
panel is a great way to learn how specific
objects are structured.
| | 08:17 |
By placing elements on the page and then
examining the code that they create.
| | 08:21 |
Now, we're going to be working a lot with
the Insert panel over the course of this
| | 08:25 |
title.
So You're going to have plenty of
| | 08:26 |
opportunities to become comfortable with
how it works.
| | 08:29 |
| | Collapse this transcript |
| The Properties inspector| 00:00 |
One of the most important panels inside of
Dreamweaver is the Properties Inspector.
| | 00:05 |
And you can find the Properties Inspector
docked right down here at the bottom of
| | 00:09 |
your interface.
It's this long, sort of horizontal panel
| | 00:12 |
down there.
Now, just like in the other panel inside
| | 00:14 |
Dreamweaver, you can undock it, move it
around, collapse it or expand it.
| | 00:17 |
And it does take up a good bit of screen
real estate, but it's such a valuable
| | 00:20 |
panel.
That I tend to like to just leave it
| | 00:22 |
docked down there and just leave it
exactly the way that it comes.
| | 00:26 |
So, once you start using it a little bit
you'll probably feel the same way.
| | 00:29 |
Okay, so what is the Properties Inspector
and what does it allow us to do.
| | 00:32 |
Well, it's going to display for you and
then allow you to edit the properties of
| | 00:37 |
whatever element that you happened to be
focused on.
| | 00:39 |
So, for example, if I highlight some text,
I'm seeing the properties of that text.
| | 00:43 |
If I click on an image, I get to see the
properties of that image.
| | 00:46 |
So from there, you can see that it's
contextually sensitive.
| | 00:49 |
It's going to change to display the
properties of any object that you select.
| | 00:53 |
Now if you're working with text, for
example, and I'm just going to click
| | 00:56 |
inside this top paragraph.
When you're working with text, the
| | 01:00 |
Properties Inspector's going to have two
sort of tabs over here on the left-hand
| | 01:03 |
side of it, HTML and CSS.
The HTML tab is going to allow you to
| | 01:08 |
control the properties of HTML elements on
the page.
| | 01:11 |
While this CSS tab is going to allow you
to create and edit existing styles, which
| | 01:16 |
is extremely handy.
Alright, so I just want to give you a
| | 01:19 |
brief overview of some of the capabilities
of the Properties Inspector.
| | 01:23 |
We're going to be using it a lot
throughout the course, so there's no real
| | 01:26 |
reason to go over every single option on it.
| | 01:28 |
But, I do want to show you just some of
the things that it's capable of.
| | 01:31 |
And to really show it off, I'm going to
change my view to Design view to this
| | 01:35 |
Split view so that we can see both the
code and the Design view at the same time.
| | 01:40 |
Now, the reason I want to do that is I
want to show you very clearly what you're
| | 01:43 |
doing when you use the Properties Inspector.
| | 01:45 |
People that use for the first time
sometimes get sort of the wrong idea about
| | 01:49 |
it because, you know, if you look at it
right now, it’s got some icons that are
| | 01:52 |
very familiar.
You know, bold, italic, unordered list,
| | 01:55 |
ordered list, indent, outdent, that sort
of thing.
| | 01:57 |
And it gives the impression that maybe
using it is very similar to using Word or
| | 02:02 |
similar word processing software but
actually nothing could be further from the
| | 02:06 |
truth.
Let me show you what I mean.
| | 02:07 |
I’m going to go up to this first paragraph
and I'm going to highlight, but age hasn't
| | 02:11 |
slowed us down.
Now, I'd like that to be italicized.
| | 02:14 |
So, of course, I just go to the HTML tab
on my Properties Inspector and click the
| | 02:19 |
Italics button.
Now when I do that, in Design view, sure
| | 02:22 |
enough, the text is italicized.
But, if I look over here in Code view, I
| | 02:26 |
can see that I've actually surrounded that
text with a new tag.
| | 02:30 |
In this case, the em or emphasis tag.
So when you use your HTML properties, you
| | 02:35 |
have to keep in mind that you're making
physical edits to the code.
| | 02:39 |
For example, if I click on the About Roux
Academy, I don't have to highlight the
| | 02:42 |
text.
I just want to click inside that
| | 02:44 |
paragraph.
Currently right now, it's surrounded by a
| | 02:47 |
p tag, which tells any user agent that
this is a paragraph.
| | 02:50 |
But what if I want to change that?
What if this needs to be, for example, a
| | 02:53 |
Heading 1?
It's very easy to do using the Properties
| | 02:57 |
Inspector.
I can just grab this Format pull-down menu
| | 03:00 |
and I can choose Heading 1.
That makes About Roux Academy heading 1.
| | 03:04 |
It makes it very easy to structure pages.
We're going to do this a little bit later
| | 03:07 |
on.
But notice that if I click in Our
| | 03:09 |
Continuing Mission, and just Heading 2.
And if I click on Transportation, I can
| | 03:15 |
also choose Heading 2.
So, using the Properties Inspector is a
| | 03:18 |
very quick and easy way to structure your page.
| | 03:20 |
You can also do things like create lists.
Actually, a lot of times when you're
| | 03:24 |
coding those by hand can be, you know,
really time-consuming.
| | 03:27 |
So these three elements right here, we
believe all the way to take an active part
| | 03:31 |
in shaping their learning paths.
If I highlight those paragraphs and click
| | 03:35 |
on the unordered list, now I have a list
and all this code has been formatted for
| | 03:40 |
me.
And I didn't have to take time to do that
| | 03:42 |
by hand.
So, it's a much faster way of doing
| | 03:44 |
certain things.
Now, using the Properties Inspector also
| | 03:48 |
allows us to affect the styles of our text.
| | 03:50 |
So if I click inside this paragraph, and I
switch to my CSS, I get a quick overview
| | 03:56 |
of what is currently formatted.
Now, you don't see everything that's
| | 04:00 |
applied via your styles, you just get some
basic reporting.
| | 04:03 |
For example, Font, Font Style such as
Italic, Font Weight such as Bold or
| | 04:08 |
Normal, Size, Color, that sort of thing.
So if I change the size, for example,
| | 04:14 |
change it to 0.9 em, for ems, I'm disco
type that in, you can see the text
| | 04:19 |
resizes.
It gets a little smaller.
| | 04:20 |
Now, what I've actually done here is I've
modified this rule, the targeted paragraph
| | 04:26 |
rule.
Now, in previous versions of Dreamweaver,
| | 04:29 |
if you wanted to create a new rule, it was
pretty easy to do using the Properties
| | 04:33 |
Inspector.
They kind of remove that functionality,
| | 04:36 |
except for the one instance.
And there's a reason that they did this,
| | 04:39 |
let me kind of show you what I'm talking about.
| | 04:41 |
If I highlight this text, we exist to
educate, alright?
| | 04:45 |
And I tell it that I want to do a new
rule, the only option for me is a new
| | 04:49 |
inline style.
So, in this case, if I were to come right
| | 04:53 |
here to this drop down menu and say okay,
I want to make that bold.
| | 04:56 |
Notice what Dreamweaver did threw a span
tag around the text itself, and then gave
| | 05:01 |
it an em line style, Font Weight Bold.
It doesn't go to my CSS, whether it be an
| | 05:05 |
external or even embedded CSS and change it.
| | 05:08 |
It writes an inline style directly inside
the HTML.
| | 05:12 |
Now you might be thinking to yourself,
that's useless, why in the world would I
| | 05:15 |
ever want to do that?
Well, for the most part you would be
| | 05:18 |
right.
But if you're doing HTML emails, this is
| | 05:20 |
actually a very common way of doing
styling is to use inline rules.
| | 05:24 |
So, because of that Adobe left it in there
and it's actually a nice easy way to
| | 05:28 |
create HTML emails.
So, that feature is something you probably
| | 05:32 |
won't be using a lot.
It's just good to know it's in there.
| | 05:35 |
Now, another thing that you can do when
using the Properties Inspector is you can
| | 05:39 |
do a lot more than just formatting text.
If I click on the image, for example,
| | 05:43 |
notice that I'm getting all the properties
of the image.
| | 05:45 |
I can make this image a clickable link, I
could quickly go back and edit this image
| | 05:49 |
in Photoshop with a single click of the button.
| | 05:51 |
I could change the width and the height of
the image, although I don't recommend
| | 05:54 |
that.
And I can do thinks like improve the
| | 05:56 |
accessibility of the image by adding an
Alt text or enhancing the Alt text like
| | 06:00 |
this, North Campus main building.
So, that's a little bit more descriptive.
| | 06:05 |
So, there are a lot of things that the
Properties Inspector allows you to do.
| | 06:08 |
We're going to be using it all the way
throughout this course, so I'll be going
| | 06:12 |
over some of these aspects and how they
work in a little bit more detail later on.
| | 06:16 |
I think it's worth mentioning that it's
not always the best choice for editing
| | 06:19 |
elements on your page.
But the Properties Inspector does make
| | 06:22 |
live a lot easier by being a central
location for inspecting and editing your
| | 06:27 |
page content.
| | 06:27 |
| | Collapse this transcript |
| Working with panels| 00:00 |
In any program, as complex as Dreamweaver,
one of the biggest challenges is keeping
| | 00:05 |
your workspace organized.
Now, there are multiple panels and views,
| | 00:09 |
and panel groups that you're going to need
to keep track of, and then access when you
| | 00:12 |
need them.
So, in this movie, we're going to take a
| | 00:15 |
closer look at managing and arranging
those panels so that you're really taking
| | 00:19 |
control of the Dreamweaver interface.
So, I've opened up the Index file from the
| | 00:24 |
01_04 folder, but it doesn't really matter.
| | 00:27 |
We're not going to do anything with that.
The only reason I have the file open is so
| | 00:30 |
that I'm seeing sort of this default
Dreamweaver interface.
| | 00:34 |
As a matter of fact, if you open up
Dreamweaver for the very first time, this
| | 00:36 |
is kind of the panel grouping and
arrangement that you're going to see.
| | 00:39 |
If your interface looks a little different
than mine, don't worry, no big deal.
| | 00:44 |
We're really just focused on how panels
work in this particular exercise.
| | 00:48 |
So, if you have a different panel
configuration, doesn't really matter.
| | 00:51 |
Okay, now currently I'm looking at four panels.
| | 00:53 |
I have the Insert panel, the Files panel,
the CSS Designer, and the CSS Transitions
| | 00:59 |
panel.
Now, you can see each one of these looks
| | 01:02 |
really different from each other, and
they're just designed to perform different
| | 01:05 |
tasks for us.
They're all arranged right now in what we
| | 01:08 |
call a Panel Doc.
So, this sort of groupings of panels over
| | 01:13 |
here on the right hand side is what we
call a Panel Doc.
| | 01:16 |
Now, Panel Doc's are very flexible.
If I want, I can expand them or shrink
| | 01:20 |
them.
There is a minimum width, as you can see,
| | 01:22 |
that I can't sort of get it past, but I
can also collapse these Panel Docs down to
| | 01:27 |
icons.
If for example I go up to the top right
| | 01:30 |
hand corner of the doc, there's this
little toggle that says Collapse to Icons.
| | 01:33 |
When I click on this, it's going to take
them down so that there's just an icon,
| | 01:37 |
and a label that represent the panel.
Well, I can go in further than that.
| | 01:41 |
I can shrink it even more to where I just
see the icons.
| | 01:45 |
Now, this is extremely handy because it
allows me to sort of collapse those
| | 01:48 |
panels, get them out of the way, and focus
on the document I'm working on.
| | 01:53 |
When I need one of these panels, all I
have to do is click on the icon.
| | 01:55 |
The panel shows up I'm able to work with
it, and then if I click on the icon again,
| | 02:00 |
the panel goes away.
So, it's a nice way of showing and hiding
| | 02:03 |
those panels.
If I ever need access to all of the panels
| | 02:06 |
at the same time again, I can simply click
the Expand Panels and the doc comes back.
| | 02:11 |
Now, as I mentioned before, not all panels
are created equal.
| | 02:14 |
They don't all act the same, either.
Now, in addition to being able to collapse
| | 02:17 |
the entire doc at the same time, I can
collapse individual panels as well.
| | 02:21 |
If I double-click on a tab, you'll notice
that it collapsed that particular panel.
| | 02:26 |
Doesn't really matter which panel I do it
to, double-clicking on a tab is going to
| | 02:31 |
collapse it.
That allows me to expand collapse, expand,
| | 02:34 |
and collapse any of these panels.
Now, not all panels really work the same,
| | 02:37 |
either.
Take this CSS Designer panel, for example.
| | 02:40 |
This is new in Dreamweaver Creative Cloud.
One of the very interesting things about
| | 02:45 |
this panel is, and one, there's a lot of
stuff going on and I have sections within
| | 02:49 |
it.
Those individual sections can be collapsed
| | 02:51 |
and expanded just like individual panels,
but there's even more to this particular
| | 02:56 |
one.
If I expand the size of this panel, notice
| | 02:59 |
that it jumps to a two column layout.
Now, this is extremely handy for the CSS
| | 03:04 |
Designer panel and we're going to go over
CSS Designer more a little bit later on
| | 03:08 |
when we focus on CSS.
But this is the only responsive panel that
| | 03:11 |
Dreamweaver currently has.
Meaning, it responds to the width of the
| | 03:14 |
doc that it's inside of.
If I get it wide enough, it's certainly a
| | 03:18 |
lot easier to use because the properties,
which is, you know, kind of cluttered.
| | 03:22 |
Shows up over here on the right-hand side
and it's a lot easier to navigate.
| | 03:25 |
But however, if I don't have enough room
for my document, I can just go ahead,
| | 03:29 |
shrink the doc back down again, and get it
down to a single column.
| | 03:32 |
Now the panels that we've been working
with so far are not the only panels that
| | 03:35 |
Dreamweaver has to offer.
If I go up to the menu and I go to Window,
| | 03:39 |
I see a listing of all the panels that
Dreamweaver has.
| | 03:42 |
Now, there are fewer in Dreamweaver
creative cloud than there have been in
| | 03:46 |
previous versions, but there's still a lot
of panels going on.
| | 03:49 |
For example, if I open up the Assets
panel, you'll notice that it opens this up
| | 03:54 |
as sort of a floating panel.
Any panel that's not a default part of
| | 03:59 |
Dreamweaver's panel doc will open up as a
Floating panel.
| | 04:02 |
For example, if I go to Windows and choose
jQuery Mobile Swatches, it opens up as a
| | 04:06 |
floating panel as well.
Now even though I don’t have that many
| | 04:09 |
panels open, you can see that having a
panel float really takes up a lot of your
| | 04:14 |
interface.
So, one of the things that you can do is
| | 04:16 |
you can combine panels together.
If I take this jQuery Mobile Swatch panel
| | 04:20 |
and grab it by its tab and move it over
the Assets panel, you’ll notice see a blue
| | 04:25 |
outline all around it.
When I release, it actually is going to
| | 04:28 |
group these two together.
And it kind of makes another Panel dock,
| | 04:32 |
if you will, even though it's floating.
Now, once I have a panel grouping, I can
| | 04:36 |
also move those around and do what I want
to with them.
| | 04:38 |
For example, if I move them between the
Insert and CSS Design panels, it adds it
| | 04:44 |
to the dock as another set of panels.
If I were to move it over the Insert and
| | 04:49 |
Files panel, it now adds this to that
grouping, and I now have a brand new
| | 04:55 |
grouping.
So, anytime I want to I can grab the tab
| | 04:58 |
of a panel and undock it, or the tab of
another panel and dock it, so that I have
| | 05:03 |
floating groupings.
You really can customize this anyway that
| | 05:06 |
you want.
As a matter of fact, you can even create
| | 05:09 |
new panel docks, so I can have multiple docks.
| | 05:13 |
And I can take those docs and place them
anywhere that I want.
| | 05:16 |
So if I wanted this doc on the left hand
side for example, instead of the right
| | 05:19 |
hand side, that's easy enough to do.
Now as you can see, you can really
| | 05:23 |
customize this interface and get crazy
with it.
| | 05:26 |
If you find that you have too many panels
open, and things are going kind of crazy,
| | 05:30 |
you can hit the F4 key.
That's a shortcut key that sort of hides
| | 05:33 |
all the panels.
Just hovering over where those panels used
| | 05:36 |
to be will cause them to pop back up allow
you to use them again, and then moving
| | 05:40 |
your mouse off of them hides those panels again.
| | 05:42 |
The F4 is a toggle, so hitting the F4 key
again brings all my panels right back.
| | 05:47 |
Now if you've been doing this along with
me, and all of a sudden your panels are
| | 05:51 |
all over the place and you've got things
rearranged and you didn't mean to do that.
| | 05:55 |
You realize that your interface is totally
messed up and you can never work this way.
| | 05:59 |
And you start to panic and you think
you've broken Dreamweaver and you can't
| | 06:02 |
find the panel you're looking for.
Don't panic, it's okay.
| | 06:05 |
You can never break Dreamweaver's interface.
| | 06:08 |
The reason I say that is because you could
always do this.
| | 06:10 |
You can go right back up to what we call
workspaces, and we're going to talk more
| | 06:14 |
about workspaces in our next exercise.
But if I grab this pull down menu that
| | 06:18 |
says compact, notice I have the option to
reset it and as soon as I do that, my
| | 06:23 |
panels go right back to the way they were before.
| | 06:25 |
So, anytime you feel like things have
gotten a little out of hand, just go up to
| | 06:28 |
the workspace that you are currently
working on.
| | 06:30 |
Choose Reset, and your panels are going to
go right back where they were before.
| | 06:33 |
So, as you can see, Dreamweaver’s
workspace is incredibly flexible.
| | 06:37 |
You can really modify it to suit your own
personal workflow.
| | 06:41 |
And as we’re going to see in our next
movie, which focus on what we call
| | 06:45 |
workspaces, you can save these customer
interface layouts to make switching
| | 06:49 |
between tasks quick and easy.
| | 06:52 |
| | Collapse this transcript |
| Managing workspaces| 00:00 |
It's very common to need to switch back
and forth between certain tasks in
| | 00:05 |
Dreamweaver.
On one occasion, you might really be
| | 00:08 |
working heavily in code, while on other
days, you might be working with dynamic
| | 00:13 |
sites or building a CSS layout.
And often, this is going to require using
| | 00:17 |
panels in Toolbar layouts that differ from
each other significantly.
| | 00:22 |
Now, rather than having to constantly
opening and closing panels and rearranging
| | 00:27 |
them.
We can simply use what we call Workspaces
| | 00:30 |
to switch quickly between interface setups.
| | 00:33 |
And even create our own when the presets
that we have don't suit our own needs.
| | 00:38 |
So I'm looking, currently, at the
index.htm file, from the 01_06 folder,
| | 00:44 |
again it doesn't really matter.
The only reason I have this particular
| | 00:47 |
document open is because how you view your
document is actually part of your
| | 00:51 |
Workspaces.
Alright, so for Dreamweaver Creative
| | 00:54 |
Cloud, they have reduced the number of
work spaces.
| | 00:56 |
We used to have a ton of these presets but
now we only have two.
| | 01:00 |
We have Compact, and Expanded, and again
you can find these right up here on the
| | 01:04 |
Application toolbar.
On the PC that's going to be docked, eh
| | 01:08 |
horizontally with the menu, but on the
Mac, you can see it's going to be just a
| | 01:10 |
little bit below the menu.
So again Expanded and Compact.
| | 01:15 |
Alright, now, chances are, the way that
the screen looks right now, isn't the way
| | 01:19 |
that you're going to want to work with it
all of the time.
| | 01:22 |
And you might actually have several
different types of panel layouts that you
| | 01:26 |
need to use based on one task versus the other.
| | 01:29 |
So I'm going to show you how to create
your own custom work space.
| | 01:33 |
And in doing that I'm going to build the
work space that just is kind of my default
| | 01:38 |
work space in Dreamweaver it's how I like
to work with Dreamweaver.
| | 01:41 |
And it's actually the work space I'll use
for the remainder of the course.
| | 01:45 |
So you can feel free to follow along with
me or you can build your own.
| | 01:49 |
Now in terms of building your own custom
work space, if you've never worked with
| | 01:52 |
Dreamweaver before.
I really advise you to kind of work with
| | 01:56 |
it for a few months you know sort of get
comfortable with it.
| | 01:58 |
You'll find which panels you use a lot and
which panels you never use.
| | 02:02 |
And its going to help you understand and
figure out which Workspace really works
| | 02:06 |
best for your own personal workflow.
Alright, so here are a few things I'm
| | 02:10 |
going to do.
Number one, I like the CSS stuff up top.
| | 02:14 |
I'm just used to it, because in older
version of Dreamweaver, the CSS Styles
| | 02:18 |
panel was at the top of the panel box.
So I really kind of like that.
| | 02:22 |
So what I'm going to do, is I'm going to
take this bottom grouping, and I'm just
| | 02:25 |
going to drag it using this gray bar.
Right up here, and when it gets on top of
| | 02:30 |
the insert in the Files panel, I'll
release it.
| | 02:33 |
And the other thing I like to do is I like
to have the Insert panel above the open
| | 02:37 |
document window as a horizontal panel.
It just works better for me, I can access
| | 02:43 |
the objects that I want a little quicker
that way.
| | 02:46 |
So I'm just going to move this up right
above the open document window and create
| | 02:51 |
this sort of horizontal bar.
Okay, so now I have the CSS Designer, CSS
| | 02:55 |
T ransitions right beside each other.
And then below that, I have the Files
| | 03:00 |
panel.
And again, you can click these tabs to
| | 03:03 |
collapse and expand these panels.
So I can sort of make sure that I'm
| | 03:09 |
looking at exactly the one that I want.
Now, in addition to the Files panel, there
| | 03:13 |
are a couple other panels I use a good bit
as well.
| | 03:15 |
So I'm going to go up to window, and I'm
going to choose Snippets, I love code
| | 03:19 |
snippets.
Code Snippets allow us to copy code into a
| | 03:24 |
sort of saved snippet, and then reuse it
any time that I want.
| | 03:27 |
So, you know, if you have things that
you're going to be using over and over
| | 03:30 |
again, like lists or certain menu
configurations or CSS code that you use
| | 03:34 |
over and over again.
You can store them as Snippets.
| | 03:37 |
So I'm going to take the snippet panel, an
I'm just going to dock it with the Files
| | 03:40 |
panel, alright?
And that just gives me quick an easy
| | 03:43 |
access to snippets.
I'm also going to go ahead an open up the
| | 03:46 |
assets panel, an make it part of that
group as well.
| | 03:49 |
I don't use the assets panel that much,
but it's kind of nice to have it at my
| | 03:54 |
fingertips.
And, making it part of this particular
| | 03:56 |
panel grouping, doesn't really take up any
additional screen real estate, so, there's
| | 04:01 |
no reason for me really not to do that.
Now there are a lot of things that I'll do
| | 04:05 |
inside Dreamweaver that brings up a panel.
For example, if I go to find and replace,
| | 04:10 |
and let's say I've spelled somebody's name wrong.
| | 04:12 |
And I do a find and replace where I fix
the spelling throughout my entire site,
| | 04:16 |
for example.
Dreamweaver is going to automatically pop
| | 04:19 |
up the results panel to show me, you know,
kind of what's been done.
| | 04:24 |
You know, the first time I started working
inside Dreamweaver and that panel kept
| | 04:27 |
opening up.
And I kept having to close it and it would
| | 04:29 |
open up again and I'd close it again.
And it just got kind of annoying.
| | 04:32 |
But then I found that I could actually
have it open all the time, not take up any
| | 04:37 |
additional screen real estate.
And then I had access to it and a wide
| | 04:40 |
range of panels whenever I need them.
So this is another thing that I usually do
| | 04:45 |
in my own custom Workspace.
So I'm going to go up to Window and I'm
| | 04:48 |
going to go down to Results.
And I'm just going to choose one of these.
| | 04:51 |
It doesn't matter which one you choose,
because choosing one, will open all of
| | 04:55 |
them.
Now, you'll notice that, much like the
| | 04:57 |
Properties Inspector.
These are a set of horizontal panels that
| | 05:01 |
take up a good bit of screen real estate.
This is one of the things about this
| | 05:05 |
particular panel grouping.
Whenever it would come up, you know, based
| | 05:08 |
on, something I did inside Dreamweaver.
Takes up a lot of space and then you're
| | 05:12 |
like, oh man and then you close it and
then it comes up again and it's just kind
| | 05:15 |
of annoying.
So, one of the things that you can do, is
| | 05:18 |
I can take the properties inspector, which
is another horizontal panel and just dock
| | 05:22 |
it with these guys.
Now if you have a panel, within a panel
| | 05:26 |
group, you can reorder them as well.
So I can take tab and very carefully slide
| | 05:31 |
it to the left, until it's the first one.
And now I could go to Search, Validation,
| | 05:37 |
Link Checker, Site Report, FTP log and the
Properties Inspector.
| | 05:41 |
And it doesn't take up any addition screen
real estate but it gives me a lot more
| | 05:45 |
options, right down there.
So, you can see the work space that we
| | 05:49 |
have right now, really isn't anymore
cluttered than what we started out with.
| | 05:53 |
But in my opinion, it's a little bit more
functional, and this is just a way that I
| | 05:56 |
like to work personally.
You'll find the configuration you like to
| | 05:59 |
have 'em in and that will become your own
personal Workspace.
| | 06:02 |
Now, I want to point out one more thing
about work spaces before we save this one
| | 06:05 |
as a custom Workspace.
Whatever you have in terms of your default
| | 06:10 |
view, so if I'm in Code View, and Save a
Workspace, that's the default view of that
| | 06:15 |
particular Workspace.
If I'm in Split View, that's the default
| | 06:18 |
view.
If I'm in Design View, that's the default
| | 06:21 |
view.
So, kind of figure out how you like to
| | 06:23 |
look at documents, it's easy to switch
them, obviously.
| | 06:26 |
But once you switch to a Workspace, this
is what the view of the page is going to
| | 06:30 |
be as well.
So that's an important thing to consider
| | 06:32 |
when you're creating a new Workspace.
Okay, so any time that I want, I can go up
| | 06:36 |
to my work spaces, and I can just say, you
know what?
| | 06:40 |
I like this configuration, I like this
layout, I'm going to save this as a
| | 06:43 |
Workspace.
So I'm just going to call this one the
| | 06:45 |
James, because that's what I always call
my Workspace, and I'll click OK.
| | 06:49 |
Although, if you're somewhat smarter than
me, you'll probably name them based upon
| | 06:53 |
the task that you're doing.
So, for example, if you were to create a
| | 06:57 |
work space that focuses on code.
Where you have, you know, the Code View of
| | 07:01 |
your page, and maybe you have, the Code
Inspector panel.
| | 07:05 |
And the Snippets panel docked with that
and, and maybe make this you know kind of
| | 07:11 |
its own panel dock.
And you collapse these guys, so that
| | 07:15 |
you're working with the code inspector
while you code.
| | 07:18 |
You know, at this point, I could come up
and choose a new work space and I could
| | 07:22 |
call this Code View.
Here we go, and now, this allows me to
| | 07:27 |
just switch back and forth between the
Default Compact.
| | 07:31 |
My Default Workspace and this Code view.
And it very quickly and easily lets me
| | 07:38 |
switch tasks and switch focus inside Dreamweaver.
| | 07:42 |
Now you'll notice one thing about these
Workspaces, if you start working in one,
| | 07:46 |
and you start changing some things.
Let's say for example I move CSS Designer
| | 07:51 |
out Let's say I now go to James and I go
back to Code view.
| | 07:55 |
Oh, well CSS designer panel's out, a, and
Code view wasn't like that when I started
| | 08:00 |
it, huh.
Well, it's okay, because anytime you want
| | 08:02 |
to you can reset a Workspace.
It'll go back to exactly as it was when
| | 08:07 |
you saved it.
So what do you think?
| | 08:09 |
Work spaces are pretty cool, right?
You know, if you find yourself constantly
| | 08:13 |
going back and arranging the same panels
over and over again based upon the task
| | 08:17 |
that you're performing.
You should consider building a Workspace
| | 08:19 |
around those tasks.
You'll find it's the small things, like
| | 08:22 |
utilizing Workspaces, that really,
dramatically speeds up your workflow
| | 08:27 |
inside of Dreamweaver.
| | 08:29 |
| | Collapse this transcript |
|
|
2. Managing ProjectsBasic site structure| 00:00 |
From the time it was released, one of the
things that made Dreamweaver different
| | 00:04 |
from other html editors, was it's focus on
managing entire sites.
| | 00:08 |
And not just single pages, while other
editors were really designed to create a
| | 00:12 |
single page.
Dreamweaver was designed to create an
| | 00:15 |
entire site and this focus is one of the
reasons that dream weavers site management
| | 00:20 |
tools are so powerful.
In this chapter, we're going to discuss
| | 00:23 |
basic site management within Dreamweaver.
And some of the tools that you can use to
| | 00:27 |
take control of your site.
Now, no matter how powerful a program's
| | 00:31 |
tools are unless you understand, and I
mean really understand the concepts behind
| | 00:35 |
them.
You're not going to be effective when
| | 00:37 |
using them.
And that's why the first concept I want to
| | 00:40 |
discuss here is Basic site structure.
To those new to web design, the task of
| | 00:46 |
creating an entire website can be, maybe a
little bit intimidating at first.
| | 00:50 |
Well, the truth of the matter Is that most
websites are really quite simple.
| | 00:54 |
Websites at their core are simply a
collection of files and folders, just like
| | 00:59 |
any other project on your computer.
Although every website is different, some
| | 01:03 |
standards have emerged when structuring
your site that can help keep your site
| | 01:07 |
organized and running smoothly.
To create your website, you'll first need
| | 01:11 |
a folder on your hard drive to put it in.
And this folder is referred to as your
| | 01:15 |
Root folder.
And later, when you define your site, this
| | 01:18 |
is the folder that you're going to point
Dreamweaver to.
| | 01:21 |
Now, inside the Root folder, you're
going to structure your files and folders
| | 01:25 |
based on how they need to appear online.
If you have a small site, for example, all
| | 01:30 |
your html files might go right into the
root directory.
| | 01:33 |
But, as your sites get larger or more complex.
| | 01:36 |
It's not uncommon to create subdirectories
to create more structure within your site.
| | 01:42 |
You can easily see this structure when
browsing online.
| | 01:45 |
If we go to the lynda.com site, for
example, and look up the Frequently Asked
| | 01:51 |
Questions page.
You can see right here in the address bar
| | 01:53 |
the url is www.lynda.com/support/faq.aspx.
Now, this is the file we're looking at
| | 02:03 |
faq.aspx.
However, if we go back a little bit, this
| | 02:08 |
support/ is a folder.
So that file is found in the directory
| | 02:13 |
with the name, support.
Now that means that inside the Root
| | 02:17 |
directory of the lynda.com site,there's a
folder named support.
| | 02:21 |
And inside that folder, there's a file
named FAQ.aspx.
| | 02:27 |
In addition to structuring pages this way,
most web designers will place site assets
| | 02:31 |
into their own folders as well.
It's a really good way to organize a site,
| | 02:35 |
and make additional assets easier to find.
Images, CSS, external scripts, videos, and
| | 02:41 |
other assets like that.
Are routinely placed within their own
| | 02:45 |
folders.
Now, for the Roux Academy website, you'll
| | 02:48 |
notice that our assets are going to have
an underscore, placed in front of their
| | 02:52 |
folder name.
Now, this helps to move these asset
| | 02:55 |
folders to the top of any directory structure.
| | 02:57 |
And it also makes it easier to identify
them as assets, rather than mistaking them
| | 03:01 |
for a subdirectory.
So you can see here, we have a
| | 03:04 |
subdirectory of About, which is going to
have pages in it , Admissions.
| | 03:07 |
However a folder with _assets, for example
is simply assets that we need for the
| | 03:12 |
site, _images is going to have all of the
site images inside of it.
| | 03:17 |
Now the homepage of the site is going to
sit directly within the Root directory.
| | 03:21 |
And it's usually named index as it is
here, or default, depending on your web
| | 03:26 |
server's preferences.
After that, how you structure and organize
| | 03:29 |
you site is entirely up to you.
It is however, very important to structure
| | 03:33 |
your site logically.
And plan your site structure in detail
| | 03:37 |
before you begin creating the files for
your site.
| | 03:39 |
Understanding site structure is the key to
making sure that you're managing your site
| | 03:44 |
properly.
| | 03:44 |
| | Collapse this transcript |
| The Files panel| 00:00 |
As you create files for the web,
understanding the rules governing their
| | 00:03 |
naming is vitally important.
If your files aren't named correctly,
| | 00:07 |
certain pages might become inaccessible or
just not even work.
| | 00:11 |
And remember that web pages contain links
to other web pages and assets, so if the
| | 00:16 |
file naming isn't handled correctly, your
site's functionality can really suffer.
| | 00:20 |
Now, fortunately, the rules for web file
naming conventions are pretty easy to
| | 00:23 |
follow.
First, don't use any spaces in your file
| | 00:27 |
names.
If you have a file that is longer than one
| | 00:30 |
word, use an underscore or a hyphen to
separate those words.
| | 00:34 |
Most web servers will allow file names
with spaces.
| | 00:37 |
But when the link is resolved, the special
character percent 20, is used in place
| | 00:42 |
that space.
Thats really messy and can lead to a lot
| | 00:45 |
of confusion when sending links or
displaying URLs.
| | 00:48 |
Second, shorten the file names when you can.
| | 00:51 |
Say, rather than aboutus.htm why not just
use about.htm.
| | 00:56 |
Shorter names are easier to remember, and
make URL's a lot easier for people to
| | 01:00 |
type.
Next, avoid using special characters.
| | 01:04 |
No dollar signs, exclamation points,
forward or backslashes, questions marks,
| | 01:08 |
periods, or any of thsoe other special
characters or punctuation.
| | 01:11 |
You know, many of these symbols are
actually used to denote things like
| | 01:14 |
directory structure, URL parameters or
other meanings that you could unwittingly
| | 01:19 |
trigger.
Numbers are okay to use in file names,
| | 01:22 |
just avoid using them as the first character.
| | 01:24 |
Also, avoid uppercase letters if possible.
Most web servers won't care, but some Unix
| | 01:29 |
servers are case sensitive and links could
not be resolved correctly even if they're
| | 01:34 |
spelled correctly.
When using extensions, just be consistent.
| | 01:38 |
For non-dynamic websites, it's okay to use
either .htm or .html.
| | 01:43 |
To avoid having to worry about it, you can
set up a default extension in
| | 01:46 |
Dreamweaver's preferences.
And Dreamweaver will then resolve that
| | 01:50 |
extension for you.
| | 01:51 |
| | Collapse this transcript |
| Defining a new site| 00:00 |
When you start working on a new project in
Dreamweaver, the very first thing you
| | 00:04 |
should do is to define a site.
The site management capabilities of
| | 00:08 |
Dreamweaver are tied directly in to a
sites definition.
| | 00:12 |
So if you don't define a site Dreamweaver
is not going to be able resolve links,
| | 00:16 |
check related files, or help manage your
assets, at all.
| | 00:20 |
Now, the best part about defining sites
inside Dreamweaver is, really, just how
| | 00:24 |
simple that process is.
In fact, you only really need to know two
| | 00:28 |
things to get started, where the local
root directory is, and what you want to
| | 00:33 |
name your site.
Okay, so I'm in Dreamweaver and I don't
| | 00:36 |
have any sites to find whatsoever.
So if your files panel looks a little
| | 00:39 |
different from mine, it's no big deal.
I just don't have any sites to find at
| | 00:43 |
all.
So I don't have anything showing up over
| | 00:45 |
there.
I just wanted to show you that default
| | 00:46 |
view as well.
Now you can define the site in several
| | 00:49 |
different locations in Dreamweaver, it's
pretty easy to access.
| | 00:52 |
I can go up to the menu, I can choose Site
> New Site from there.
| | 00:55 |
I can also go over to my Files panel and I
can click on this little Manage Sites link
| | 01:00 |
here or I can grab it from the pull down menu.
| | 01:02 |
And if I choose manage sites it brings up
an entirely new dialog box, where creating
| | 01:07 |
a new site is one those options.
But I think the most efficient way to do
| | 01:10 |
it is right here off the welcome screen.
So if you don't have a page open, if you
| | 01:13 |
don't have a site to find.
You can come right down here and choose
| | 01:16 |
Create New Dreamweaver site.
Really doesn't matter which method you
| | 01:20 |
chose.
You're going to end up right here at this
| | 01:23 |
dialog box.
Now as I mentioned earlier, you only need
| | 01:26 |
to know two things.
And that is what you want to name the
| | 01:28 |
site, and where the local root folder is.
And those are the two things that come up
| | 01:33 |
first within the sight definition dialog box.
| | 01:35 |
So the first thing you want to do is just
name the sight.
| | 01:37 |
And I'm just going to call it Roux Academy.
| | 01:39 |
Now if you want you could just go ahead
and name yours, like, Dreamweaver or CC
| | 01:44 |
essential training, Roux Academy.
It doesn't matter.
| | 01:47 |
You'll notice that here, we're not really
adhering to any of those file naming
| | 01:50 |
conventions.
We don't worry about spaces, or
| | 01:52 |
capitalization.
This is really what you want to name the
| | 01:56 |
site.
So this needs to be meaningful to you.
| | 01:58 |
It's not really going to impact the site
at all, or how its uploaded, or how it
| | 02:02 |
looks online.
This is just for you to be able to keep
| | 02:04 |
track of this in Dreamweaver.
Now the next thing is, Dreamweaver wants
| | 02:07 |
to know, okay, where are the folders and
the files for this particular site?
| | 02:12 |
The easiest thing to do is just click on
the little browse icon right here, Browse
| | 02:16 |
for folder.
And then use your directory structure to
| | 02:19 |
go browse to this.
Now, I'm going to go to the Desktop, where
| | 02:21 |
I've copied over my exercise files.
I click on Exercise Files and we're in
| | 02:25 |
Chapter two, so I'm going to go to
Chapter_02 > 02_03.
| | 02:28 |
Now, let me back up here, when you're
working on one of your projects inside of
| | 02:33 |
Dreamweaver or just any website.
You're probably going to keep it someplace
| | 02:37 |
in your hard drive other than the desktop.
I don't recommend that.
| | 02:40 |
But, since I copied my exercise files out
there, and since I'm using them as an
| | 02:43 |
example, that's really why I'm doing this.
I would expect, you know, me personally, I
| | 02:46 |
have a folder on my harddrive called
Projects, and I keep all my sites in
| | 02:50 |
there.
Okay, so, 02_03, I'm going to highlight
| | 02:54 |
that.
And then I'll click on the Choose button,
| | 02:56 |
on the PC, your button will be called Select.
| | 02:58 |
But really, you're doing exactly the same thing.
| | 03:00 |
Okay, now, if I wanted to, I could just
hit Save.
| | 03:03 |
And it would go ahead and define the site
for me.
| | 03:05 |
But I wanted to go over some of the other
options that Dreamweaver gives us when we
| | 03:09 |
define our site.
Everything that I show you from this point
| | 03:12 |
forward is optional.
You don't have to know it when you start
| | 03:15 |
your project in order to define a site.
Alright, you'll notice that we have a
| | 03:19 |
column over here on the left hand side,
and the first option is Site which is what
| | 03:22 |
we're looking at right now.
Next is Servers, now we're going to go
| | 03:25 |
over this later when we talk about
establishing a remote server for our site.
| | 03:30 |
If you know your remote server's address,
you could go ahead and add this.
| | 03:32 |
And this is going to allow you to upload
and download files from your live web
| | 03:36 |
server.
Now since we don't have that information
| | 03:38 |
right now, we're not going to give it.
You can certainly develop an entire site
| | 03:41 |
without this information.
Go find out where your remote server is
| | 03:44 |
and then upload it at the end of the
process, or you can do it at the
| | 03:47 |
beginning, it doesn't really matter.
Now Version Control Dreamweaver ties in to
| | 03:50 |
the version control program subversion, so
if your team or you are using subversion.
| | 03:54 |
You can hook directly into it through
dream weaver.
| | 03:56 |
Now, it's the advanced settings that I
really want to pay attention to.
| | 04:00 |
Okay, so, first we have Local Info, and
this allows us to establish things like a
| | 04:05 |
default images folder.
Whether we want our links to resolve
| | 04:08 |
either relative to the document itself or
to site root.
| | 04:11 |
What the URL of the site that we're
working on is, which will help in
| | 04:15 |
Dreamweaver when we test these links.
And whether we want it to Enable Caching.
| | 04:19 |
The only reason you wouldn't enable
caching is if your site was huge, you
| | 04:22 |
know, like thousands of files, which would
really slow Dreamweaver down.
| | 04:25 |
For the most part, you're going to want to
keep that.
| | 04:27 |
Now, you're probably wondering what all
these things mean, and as we go through
| | 04:31 |
and work throughout this course.
We're going to come back and reset some of
| | 04:35 |
these elements.
So, rather than going through all of them
| | 04:37 |
right now, just keep these in mind and
we're going to come back and talk about
| | 04:40 |
most of these a little bit later on.
Now, the remaining categories here, things
| | 04:44 |
like cloaking design note file, view
columns those are all optional and they
| | 04:48 |
deal with very specific things.
Cloaking for example let's you hide
| | 04:51 |
certain file types from unloading.
So maybe you know for example you don't
| | 04:55 |
upload your Photoshop files things like that.
| | 04:57 |
I just want to point out a couple of these
that are going to be probably relevant to
| | 05:01 |
you when you're working.
This jQuery one, if you're going to use
| | 05:04 |
any of the jQuery user interface widgets
or the JQuery mobile things.
| | 05:07 |
This is where Dreamweaver is going to
place the assets required for those and
| | 05:12 |
I'll just sort of mouse over.
You can see It's going inside my root
| | 05:14 |
directory and then it's going to create a
folder called jQuery Assets.
| | 05:18 |
So, if I was going to do that and I was
okay with that then that'd be fine.
| | 05:21 |
But if I had a specific folder that I
wanted those assets to go in I could
| | 05:25 |
browse for that specific folder.
We also have things like web fonts where
| | 05:29 |
should (INAUDIBLE) replace web fonts when
it copies them over.
| | 05:32 |
And if you're using a program like Edge
Animate for example where should those
| | 05:36 |
assets go?
Okay, so again, really the only two things
| | 05:40 |
we set for this one remember are just the
site name and the local site folder.
| | 05:43 |
Everything else over here is optional.
I'm just going to go ahead and click Save.
| | 05:46 |
Dreamweaver is going to introspect that
Root directory and cache those files up.
| | 05:51 |
And now over in the Files panel, and I'm
just going to expand this so you can see
| | 05:54 |
what I'm talking about.
You can see now all the files and folders
| | 05:57 |
inside of our root directory that go to
make up our site.
| | 06:00 |
So, there you have it, that's defining a
site inside Dreamweaver.
| | 06:03 |
It's a very easy, but incredibly necessary step.
| | 06:06 |
And it's really required, any time you
start a new project in Dreamweaver.
| | 06:09 |
You can give Dreamweaver all a that site
information stuff at the very beginning of
| | 06:13 |
the project.
Or you can wait and define things like
| | 06:15 |
remote servers at a later date, if you
don't have those settings when you're
| | 06:18 |
first starting out.
And for some of the optional settings, you
| | 06:21 |
may never go in and set anything for them.
And it's okay if you're not going to be
| | 06:24 |
using them.
Just be sure to make the finding site the
| | 06:26 |
very first step that you take in any new
Dreamweaver project.
| | 06:30 |
| | Collapse this transcript |
| Managing files and folders| 00:00 |
If you're like me, when you work on a
site, you're constantly creating new files
| | 00:04 |
and folders.
Renaming files and probably moving files
| | 00:08 |
around within your directory structure.
Let's face it.
| | 00:11 |
No matter how well you plan your site,
chances are you're going to modify the
| | 00:15 |
directory structure at one time or another.
| | 00:17 |
And to make these changes to your site, I
really strongly recommend using the Files
| | 00:23 |
panel.
The Files panel can be used to create new
| | 00:26 |
files and folders, rename files, move
files and folders, copy and paste files.
| | 00:31 |
You name it.
And what's better it's actually going to
| | 00:34 |
help you, and it's a safer way of doing
those things.
| | 00:36 |
Because if any of those actions that I
just talked about, when you perform them,
| | 00:40 |
if they would impact how your files in
your site relate to each other.
| | 00:43 |
Dreamweaver will simply update them on the fly.
| | 00:46 |
And that's something that won't happen if
you modify them outside of Dreamweaver.
| | 00:49 |
So, let's take a closer look at the Files
panel and how it helps us manage the files
| | 00:54 |
and folders within our site.
So, I have the Files panel over here and
| | 00:57 |
I'm going to do something that I'm not
going do for the rest of the title.
| | 01:01 |
And that is basically showing you how I
switch from one set of exercise files to
| | 01:06 |
the next for each movie.
So currently, we're in the managing files
| | 01:09 |
and folders movie, which is Chapter 2
Movie 4 Exercise 4.
| | 01:13 |
Okay, so those are the exercise files I
want to use.
| | 01:15 |
Now, I know some of you guys probably
skipped the exercise files movie at the
| | 01:19 |
very beginning of the title.
And that's why I want to do this here,
| | 01:21 |
okay?
So, to quickly edit a site, all I have to
| | 01:24 |
do is simply double-click the name of it.
Roux Academy.
| | 01:26 |
And that's going to bring up the site
setup for Roux Academy.
| | 01:29 |
Now, I'm going to point the local site
folder from the 02_3 folder to the 02_4
| | 01:35 |
folder.
I'm going to do that as my first step.
| | 01:40 |
And I'm really going to do this for every
single exercise we do.
| | 01:43 |
You're just not going to see me do it.
So, this is what I recommend that you do
| | 01:46 |
prior to every exercise as well, alright?
So I'm going to choose that, save it, it's
| | 01:50 |
going to recache the site.
And there we go.
| | 01:52 |
So, that's one of the first things about
managing files and folders.
| | 01:55 |
If you point to a different folder, it's
going to recache the entire site.
| | 01:59 |
Now, currently this site already has a lot
of files and folders in it.
| | 02:03 |
But you might be starting from scratch.
You might point it to an empty folder when
| | 02:06 |
you're starting a project.
That's entirely possible.
| | 02:09 |
So, the Files panel actually allows us to
do a lot of really cool things.
| | 02:13 |
We can create folders from it, and we can
create files from it.
| | 02:16 |
Let me show you what I mean.
If I go up to the route directory and I
| | 02:18 |
right-click it, notice the options I have.
The very first option from the menu that
| | 02:23 |
comes up is new file.
When I select that I have a brand new HTML
| | 02:27 |
file that's created and I'm just going to
name this test.
| | 02:30 |
Now you notice it adds the .html
extension, I could change that by just
| | 02:34 |
mousing out there, and then getting rid of
the L.
| | 02:37 |
So if you like using .htm, you can do it
that way, if HTML, you can do it the other
| | 02:42 |
way.
A lot of people ask, me you know, which
| | 02:43 |
way is best and it really just depends on
they way your server is set up and what
| | 02:46 |
your personal preference is.
Okay, so we have a brand new file here
| | 02:49 |
called test.htm.
To open up a file using the Files panel, I
| | 02:53 |
simply double-click that file's icon.
Doing that opens up the file for me and I
| | 02:58 |
can see it's just an empty HTML file.
Nothing special about it, but it saved me
| | 03:02 |
the process of having to go through the
new document dialog box by just creating
| | 03:06 |
it directly inside the Files panel.
Now, we can also if we figure out that we
| | 03:10 |
don't need a file, we can delete it.
I'm going to close the test file here.
| | 03:14 |
Go right back over to that in the Files
panel, right-click it, and I'm just going
| | 03:18 |
to choose Edit and Delete.
It says, do you really want to delete it?
| | 03:22 |
I say, yeah, I sure do, and its gone.
And its not just removed from the Files
| | 03:27 |
panel, its really putting it in your
trash, its deleting it from your hard
| | 03:30 |
drive.
So, this is definitely something that you
| | 03:32 |
want to make sure you want to do this.
Now, we can also modify file names any
| | 03:36 |
time we want.
For example, I have this student spotlight
| | 03:39 |
here, and if I'm thinking that's too long,
and it doesn't really need to be that
| | 03:43 |
long.
I can simply click once on the file name
| | 03:45 |
and click again, and that's going to
highlight the name.
| | 03:48 |
And then, I can go ahead and edit that.
And I'm just going to remove the student
| | 03:52 |
spotlight, just name it Spotlight.
Clicking off the file again, we'll go
| | 03:56 |
ahead and change that.
Now as soon as you click off this and make
| | 03:58 |
this change, Dreamweaver's going to give
you a dialog box that's going to say,
| | 04:02 |
okay, hang on.
Wait a second, there are files that are
| | 04:05 |
out there linking to this file.
Changing the name of it is going to make
| | 04:08 |
that link no longer work.
So somebody clicking on that link in the
| | 04:12 |
browser, for example, would no longer take
you to that page, because there's no page
| | 04:15 |
that's named that anymore.
So, one of the really nice things that
| | 04:18 |
Dreamweaver will do for you is Dreamweaver
will go ahead and update all of the links
| | 04:23 |
all throughout your site that point to
this file if you change its name.
| | 04:26 |
Now, in this case, there's only one file,
the index page that's linking to it.
| | 04:29 |
But in most sites, you might have, you
know, dozens of files that do that.
| | 04:32 |
So, just by clicking Update, Dreamweaver
is going to go ahead and modify all those
| | 04:36 |
links for you.
That's why it's so important that you use
| | 04:38 |
the Files panel to make these kind of
changes, rather than your finder or your
| | 04:42 |
explorer panel outside of Dreamweaver.
Because if you make this change say, out
| | 04:45 |
in the Finder window or out in the
Explorer panel in Windows, and you make
| | 04:48 |
that change when dream weaver's not open.
When you come back to Dreamweaver, those
| | 04:51 |
links are going to be broken.
And Dreamweaver's not going to prompt you
| | 04:54 |
to automatically update them, so that's
definitely something you want to do here
| | 04:57 |
within the Files panel.
Now, you can also reorganize your
| | 05:00 |
directory structure as well.
If we look in the about folder, and in the
| | 05:05 |
Admissions folder, we have pages that are
distinct to those sections.
| | 05:09 |
Well, we have a couple of pages here, the
graphic design page and the programs page.
| | 05:13 |
That really needs to be in a program's subdirectory.
| | 05:17 |
So, I'm going to go up to the root directory.
| | 05:19 |
I'm going to right click that, and I'm
going to choose new folder.
| | 05:22 |
So, it's going to create a new directory
folder for me and I'm going to call this
| | 05:26 |
Programs.
To move files into them, all you have to
| | 05:28 |
do is highlight the files.
In this case, I'm going to do programs.
| | 05:31 |
And then, I'm going to hold down the Ctrl
or the Cmd key and select graphic design.
| | 05:35 |
So, I've got both of them highlighted,
then I'm just going to drag them into the
| | 05:38 |
program directory.
Once again, Dreamweaver's going to say,
| | 05:40 |
hey, wait a second, there are files that
are linking to this.
| | 05:44 |
And these two pages also have links that
link out to other files.
| | 05:47 |
Now, if you change the directory structure
again, those links are broken.
| | 05:50 |
They're no longer going to work.
But by doing it in the Files panel, I'm
| | 05:52 |
able to say Update, so Dreamweaver's going
to do that for you, which is incredibly
| | 05:56 |
powerful.
And this is also going to save you a
| | 05:59 |
tremendous amount of time when you need to
manage files and folders within your site.
| | 06:03 |
And as you can see, doing it here is going
to save you from making some pretty costly
| | 06:08 |
errors, too.
So, you don't have to modify your whole
| | 06:09 |
site again.
Now that's not everything the Files panel
| | 06:12 |
can do.
Later on in this course, we're going to
| | 06:14 |
discuss using the Files panel upload files
and manage remote sites.
| | 06:18 |
Things like that.
For now, however, concentrate on making
| | 06:21 |
sure that your practicing discipline when
you need to make changes to your site.
| | 06:25 |
Go ahead and make sure that you're making
those updates from within Dreamweaver
| | 06:28 |
using the Files panel.
And that's going to allow you to be
| | 06:30 |
confident that you're making those changes
correctly.
| | 06:33 |
| | Collapse this transcript |
| Testing files in browsers| 00:00 |
As a web designer, one of the toughest
things to learn is that your design is
| | 00:04 |
really at the mercy of the browser that
your user is using.
| | 00:08 |
Your site's visitors have a lot of
browsers to choose from, like Internet
| | 00:12 |
Explorer, Firefox, Opera, and Google's Chrome.
| | 00:16 |
Knowing that so many different browsers
are going to be used to render your pages,
| | 00:20 |
it's always a smart idea to test your site
as you're working in as many browsers as
| | 00:26 |
you can.
This can prevent rendering errors from one
| | 00:29 |
browser to the next and help you ensure a
consistent user experience for all the
| | 00:33 |
visitors to your site.
And Dreamweaver allows you to set up
| | 00:36 |
multiple browsers for testing and also
gives you an internal testing environment
| | 00:41 |
using live view.
So, here I have the index.htm page opened
| | 00:44 |
from the 02_05 directory.
And I first want to show off live view
| | 00:50 |
before we get into previewing in browsers.
Right now, I'm looking at the page in
| | 00:54 |
Design view and I'm just going to minimize
the Properties Inspector so you can see a
| | 00:57 |
little bit more of it.
Now, Design view is something you should
| | 01:00 |
never, ever, ever, never, ever, never,
ever trust because it's not a very good
| | 01:06 |
rendering view.
It's just, it's old, it doesn't really
| | 01:09 |
understand most of the CSS properties that
we take for granted now.
| | 01:12 |
It's really just there to give you a
visual view of your page without looking
| | 01:16 |
at code.
It doesn't try to show you any type of
| | 01:19 |
design fidelity whatsoever.
So for that, with this live view right
| | 01:23 |
here, and if click on this, the rendering
surface changes.
| | 01:26 |
And I see my page rendered pretty much the
way its going to look in the browser.
| | 01:31 |
Even better, things like roll-overs, and
any type of interactivity I have built
| | 01:36 |
into it will work as well.
So, I can kind of preview how my page is
| | 01:41 |
not only going to look, but how people are
going to be able to interact with it as
| | 01:44 |
well.
Now, I want to say a couple of words about
| | 01:46 |
this Live view.
Number one, you can't edit inside of it,
| | 01:49 |
so if you're highlighting text and trying
to change it, that's not going to work.
| | 01:52 |
That's something that they're going to be
adding to Dreamweaver Creative Cloud, but
| | 01:55 |
it's not here yet or at least as of this
recording it's not here yet.
| | 01:58 |
Now, the other thing about it is, too,
it's an older version of the web kit
| | 02:02 |
rendering engine.
It really sort of translate backs to more
| | 02:05 |
around Safari 4.0.
So, some of the newer CSS features even
| | 02:09 |
though this is a web kit rendering engine
some of the newer CSS features aren't
| | 02:13 |
supported here.
So, there are certain things that you
| | 02:15 |
might do, like gradients and things like
that, that might not actually make this
| | 02:18 |
live view rendered properly.
Now, they're going to be updating that as
| | 02:21 |
well, so that's something that will get
better over time, also.
| | 02:24 |
Okay, I'm going to turn Live view off, and
it's just a toggle, and I want to talk
| | 02:29 |
about previewing your pages in your browsers.
| | 02:31 |
Now, the first thing that you want to do
is set up the browsers that you want for
| | 02:36 |
your testing environment.
And to do that, we're going to go to
| | 02:39 |
Dreamweaver's preferences.
So, I'm on a Mac.
| | 02:42 |
So, I'm going to go up to Dreamweaver, and
I'm going to choose Preferences on your
| | 02:45 |
own PC or a Windows-based machine.
You're going to go to Edit, and choose
| | 02:48 |
Preferences.
And then, I'm going to go right down in
| | 02:51 |
Category settings over here to preview in browser.
| | 02:54 |
And you can see that currently, I have
three browsers set up.
| | 02:57 |
You might have more, you might have less
depending upon whether you've done this
| | 03:00 |
before, or how many browsers Dreamweaver
detected as it installed.
| | 03:05 |
Okay, so I have Firefox, Chrome, and Safari.
| | 03:07 |
I want to add Opera, okay?
So, what I'm going to do is I'm going to
| | 03:11 |
go right up here and click the Plus button.
| | 03:13 |
And it's going to say, okay, what do you
want to add?
| | 03:14 |
I'm going to say, I want to add Opera.
And it's going to say, okay, well where is
| | 03:18 |
that?
So, I'm going to browse out and because
| | 03:20 |
I'm on a Mac, I'm going to go to my Applications.
| | 03:22 |
On a PC, you'd go to your Program files,
and I'm going to go find where Opera is
| | 03:26 |
installed.
And there it is, so I'm just going to
| | 03:29 |
highlight that and click Open, it's that simple.
| | 03:32 |
Now, you're going to notice also that we
have some check boxes here for primary
| | 03:35 |
browser and secondary browser.
I'm going to leave those blank and I'm
| | 03:38 |
going to click OK.
I want to talk about those.
| | 03:40 |
So, when you're setting up your browsers,
you can set primary browsers and secondary
| | 03:45 |
browsers and those give you keyboard
shortcuts to access those.
| | 03:48 |
So, for example, if I hit Firefox and said
I want that to be my primary browser, and
| | 03:53 |
I want Google's Chrome to be my secondary browser.
| | 03:56 |
You'll notice that it gives me a pair of
shortcut keys on the Mac that's Option+F12
| | 04:00 |
for Firefox and that would be Cmd+F12 for
Google Chrome.
| | 04:04 |
And that would be Alt+F12 on the PC and
Ctrl+F12 for the secondary.
| | 04:09 |
So, you just kind of remember those.
And simply it's just giving you hot keys
| | 04:13 |
for two of your browsers.
Now, I definitely recommend testing in all
| | 04:16 |
browsers.
And not just, you know, waiting on those
| | 04:19 |
two.
So, the shortcut keys are handy in the
| | 04:21 |
fact that it allows you to put them up
very quickly and easily.
| | 04:24 |
But, don't let it detract you from testing
in all the browsers that you have
| | 04:28 |
installed.
Alright, I'm going to click OK.
| | 04:31 |
And now, if I go back to my Document
toolbar, you'll notice this little planet
| | 04:35 |
icon.
If I grab that pull-down menu, I notice
| | 04:38 |
that I get to see my Firefox, Chrome,
Opera and Safari.
| | 04:41 |
So if I choose Firefox, it's going to go
ahead and open the page in Firefox and I
| | 04:45 |
can see how it's going to render there and
how it's going to function.
| | 04:49 |
But go back to Dreamweaver, I can use the
keyboard shortcuts.
| | 04:52 |
So, if I do Cmd+F12, it's going to open up
the page in Google Chrome because again,
| | 04:57 |
that was my secondary browser.
And I can go back in and Opera and Safari
| | 05:04 |
aren't listed as primary or secondary, so
I have to use this icon to preview those.
| | 05:10 |
And there's my site opened up in Opera.
So, I think you get the idea.
| | 05:13 |
It's pretty easy to go from Dreamweaver
and preview one of your pages in as many
| | 05:18 |
browsers as you want.
Now honestly, there's no excuse for you
| | 05:22 |
not to do this as you're doing your development.
| | 05:24 |
Don't wait 'till the end of creating a
page before you start testing it in your
| | 05:28 |
browsers.
Test early.
| | 05:29 |
Early and often, that's one thing that I
always say to new web designers.
| | 05:33 |
Testing your pages as often as you can is
going to help prevent smaller errors from
| | 05:37 |
becoming bigger problems later on.
And it's going to assist you as you try to
| | 05:41 |
ensure a consistent experience for all
your users.
| | 05:44 |
| | Collapse this transcript |
| Editing sites| 00:00 |
Things change, and it's not uncommon to
need to add or modify the information of a
| | 00:04 |
site as you work on it.
Well thankfully, editing a site in
| | 00:08 |
Dreamweaver is just as easy as defining one.
| | 00:11 |
So let's take a moment to examine exactly
how we can edit our sites inside
| | 00:15 |
Dreamweaver.
So I'm working on this with the exact same
| | 00:18 |
site definition that I had in the previous exercise.
| | 00:21 |
So if you didn't redefine one for this
one, that's fine.
| | 00:24 |
I'm working on the old one as well.
Alright, there are a few ways that we can
| | 00:27 |
bring up site managements which allows us
to edit our sites.
| | 00:30 |
I can go up to the menu, and I can go to
Site > Manage Sites, or from my Files
| | 00:35 |
panel I can grab this pull down menu that
shows the current active site.
| | 00:39 |
And I can choose Manage Sites as well.
Either way, I am going to bring up this
| | 00:43 |
dialog box.
Now, we're going to talk more about this
| | 00:45 |
dialog box a little bit later on in the course.
| | 00:48 |
The Manage Site Dialog box allows us to
manage as many sites as you have and,
| | 00:52 |
trust me, you can have a lot.
I probably have over 20 in my version of
| | 00:55 |
Dreamweaver.
Here I just have three, you may only have
| | 00:58 |
one.
It's okay, don't worry about it, because
| | 01:00 |
we're interested in editing the Roux
Academy site.
| | 01:03 |
So, once I select a site, in this case,
Roux Academy, I can go right down here to
| | 01:07 |
these sets of icons.
And there's a little pencil icon here that
| | 01:09 |
says Edit the currently selected site, I'm
going to go ahead and click that.
| | 01:13 |
And that's going to bring up the site
setup dialogue box.
| | 01:16 |
Now, editing a site this way is a little
inefficient, because you have to bring up
| | 01:19 |
the manage site dialogue box, you have to
click on the icon, you make your changes.
| | 01:24 |
You hit Save and then you have to hit Done
and that's a lot of round tripping, to
| | 01:28 |
make a simple edit, so let me show you an
easier way.
| | 01:30 |
If you grab the pull down menu, and select
the site that you want to edit by clicking
| | 01:34 |
on it one more time, it'll bring up the
exact same site setup dialog box.
| | 01:39 |
And you don't have to go through that sort
of lengthy manage sites dialog.
| | 01:43 |
Okay, so by the way, once you bring up a
site you can change it any time.
| | 01:46 |
For example if I just wanted to change the
name of the site to Roux, instead of Roux
| | 01:50 |
Academy I could change that.
If I wanted to redefine where the local
| | 01:54 |
site folder was I could change that.
I could add Remote Servers if I wanted to.
| | 01:58 |
I'm going to click on the Advanced
settings though because the thing that I
| | 02:01 |
want to do here is I want to choose the
Default Images Folder.
| | 02:04 |
That's something that we didn't set up at
the very beginning of this.
| | 02:06 |
So I'm going to click Browse, and inside
my Root Directory I'm going to find the
| | 02:11 |
_images folder and choose that.
Sow what does this do for you?
| | 02:15 |
Well occasionally you might do something
within Dreamweaver that actually creates
| | 02:19 |
an image asset.
Some kind of widget or something for
| | 02:21 |
example that needs to put an arrow or a
certain icon on the page.
| | 02:25 |
In that case Dreamweaver wants to know,
hey, where should I copy those assets over
| | 02:29 |
to?
And in this case, we're telling it that
| | 02:31 |
the _images directory is the default directory.
| | 02:34 |
So that's the only edit I really want to
make right here.
| | 02:37 |
What I'm going to do is go ahead and click Save.
| | 02:39 |
It'll re-cache the site and now, my site
is changed.
| | 02:42 |
And editing a site is just that easy.
And chances are, you won't need to edit
| | 02:47 |
your sites a lot while you're working in Dreamweaver.
| | 02:49 |
But it is nice to know that Dreamweaver
makes the process quick and easy.
| | 02:53 |
| | Collapse this transcript |
|
|
3. Creating New DocumentsCreating new files| 00:00 |
After defining your site, the next logical
step in creating web sites is to begin
| | 00:04 |
creating new web pages.
Since it's such a common task, Dreamweaver
| | 00:08 |
has many different options for you when
creating new pages.
| | 00:12 |
Some are designed to be really quick and easy.
| | 00:14 |
While others require a little bit more
manual input from you, but give you a
| | 00:18 |
wider array of options regarding your new document.
| | 00:21 |
In this exercise, we're going to explore
Dreamweaver's new document creation
| | 00:24 |
capabilities.
So that you can make sure the pages you're
| | 00:27 |
creating are conforming to the standards
required for your site.
| | 00:30 |
Now, we've actually used a couple of the
methods already that Dreamweaver gives us
| | 00:34 |
for creating new pages.
For example, if we go to the Welcome
| | 00:37 |
screen and click Create New HTML, we get a
new page.
| | 00:40 |
If I go over to the Files panel and
right-click a folder and choose New File,
| | 00:45 |
and let's just say I give that a name, I
get a new page.
| | 00:49 |
Now, both of these methods are designed to
be very quick and very fast.
| | 00:53 |
If I open up this index page for example,
and compare it to the page that I created
| | 00:58 |
using the welcome screen.
By toggling back and forth, you can see
| | 01:01 |
they're exactly the same.
Now, the reason for that is that anytime
| | 01:04 |
you use one of those options in
Dreamweaver that makes a page very
| | 01:07 |
quickly.
It uses uses your new document preferences
| | 01:11 |
to determine how to structure that.
Now, we're going to take a closer look at
| | 01:14 |
those preferences in just a moment.
But for right now, I want to show you
| | 01:18 |
another method that you have for creating
new pages in Dreamweaver.
| | 01:21 |
And one that gives you considerably more options.
| | 01:23 |
If I go to the menu and I choose File >
New, I open up the new document dialog
| | 01:30 |
box.
And as you can see, this does give us a
| | 01:32 |
much bigger array of options.
Now, I'm going to start over here on the
| | 01:35 |
left-hand side.
You first have to choose between which
| | 01:38 |
type of page you want to create.
You can work with Dreamweaver templates,
| | 01:40 |
if you'd like a template based workflow.
The starter templates gives you a starting
| | 01:46 |
point for any jQuery mobile project, and
then we also have fluid grid layouts.
| | 01:50 |
I want to take just a moment to talk about these.
| | 01:52 |
Now, fluid grid layouts are new to
Dreamweaver, they've been around for about
| | 01:55 |
a version or so.
And this is a workflow that helps you
| | 01:58 |
create responsive websites or websites
that change based upon the screen size
| | 02:02 |
they're being viewed on.
You'll see here, for example, that we set
| | 02:05 |
up preferences for mobile layouts and
tablet layouts and desktop layouts.
| | 02:09 |
Now, responsive design is an increasingly
more important part of web design.
| | 02:14 |
It's definitely something you want to
focus on.
| | 02:15 |
But to be honest with you, this workflow
is not going to be right for everyone.
| | 02:20 |
So, it's definitely one of the things that
I would encourage you to check out more
| | 02:23 |
documentation on and experiment with.
But it may not be right for you right off
| | 02:28 |
the bat.
Alright, now if I choose blank page, this
| | 02:30 |
isn't what I want to focus on for this exercise.
| | 02:32 |
If I choose blank page, the first thing
that Dreamweaver wants me to do is tell it
| | 02:37 |
which type of page I'm going to be working on.
| | 02:39 |
Is it going to be HTML?
Is it going to be an external CSS file?
| | 02:42 |
Am I writing some JavaScript?
That sort of thing.
| | 02:44 |
Alright, if I choose HTML, this third
column here, layout gives me a couple of
| | 02:49 |
options here.
Now these are Dreamweaver starter pages,
| | 02:52 |
and they help sort of jump start your
layout process.
| | 02:55 |
Now, we're going to be looking at starter
pages in more detail a little bit later
| | 02:58 |
on.
So, for right now, I'm just going to
| | 03:00 |
choose None.
Now that brings us over here on the right
| | 03:02 |
hand side for the HTML document options.
The first thing and probably most
| | 03:07 |
important thing that we get to choose is
the document type declaration.
| | 03:11 |
Now, if you're new to HTML, this can
appear a little technical and maybe even a
| | 03:14 |
little overwhelming.
But, don't get alarmed by this at all this
| | 03:18 |
is something very simple.
This is what we call a document type
| | 03:21 |
declaration, or DTD for short.
This is a single line of code at the very
| | 03:26 |
top of your HTML page, that essentially
tells the user agent.
| | 03:30 |
That it's number one, an HTML document,
and number two, which version of HTML
| | 03:34 |
you're going to be using.
You'll notice we can choose between a
| | 03:37 |
couple flavors of HTML 4.0, HTML 5, and a
couple flavors of XHTML.
| | 03:42 |
If you're wondering which one to use, I'd
recommend using HTML 5 since it's the
| | 03:46 |
latest standard, and it's what most people
are going to be using going forward.
| | 03:49 |
HTML 4.0 Transitional and XHTML 1.0
Transitional are also fairly popular
| | 03:55 |
document types.
Now, I'm going to choose XHTML 1.0
| | 03:57 |
Transitional for this page, just because I
want to show you how it affects the code
| | 04:02 |
of the page that you create.
Now, we have another option right here as
| | 04:05 |
well, which is to attach an external CSS file.
| | 04:08 |
If you're working on a site that's already
established, and you've already written
| | 04:12 |
some CSS for it, this is a fantastic
option, because it allows me to do two
| | 04:16 |
things at once.
It allows me to create my HTML page and
| | 04:19 |
link out to my external CSS file all at
the same time.
| | 04:22 |
So in a lot of ways, this can be the most
efficient way to create a new page if your
| | 04:26 |
site is already established and you're
already working with your styles.
| | 04:29 |
Now, I'm going to go ahead and create, and
as you can see, the code in this little
| | 04:35 |
different from my last one.
And that's because the document type
| | 04:38 |
declaration.
So, this is the DTD for HTML 1.0.
| | 04:40 |
You can see it's a little longer and it's
a little bit more complex than HTML 5.
| | 04:47 |
We also have a couple of attributes, like
for example this one on the HTML element
| | 04:51 |
that we didn't have in HTML 5.
And the character encoding for UTFA is
| | 04:56 |
declared differently in XHTML versus HTML 5.
| | 05:00 |
You can see HTML 5 is just a little easier.
| | 05:02 |
So, it really doesn't matter which one you
use, unless your project has a specific
| | 05:07 |
requirement.
So, if a client has requested XHTML 1 or
| | 05:10 |
HTML 4.0, or you're already working with a
system that is set up for that, then I
| | 05:16 |
would just go ahead and continue to use those.
| | 05:17 |
If you've never worked with them before,
and it doesn't really matter one way or
| | 05:20 |
the other, I would stick with HTML 5.
There are some syntax differences between
| | 05:25 |
XHTML and HTML as well.
So if you commit to using one over the
| | 05:29 |
other, you should research what those
syntax differences are so that you're
| | 05:32 |
formatting your code properly.
Alright, I'm just going to close out of
| | 05:35 |
that.
Now, there is one more method of creating
| | 05:37 |
a new page that I wanted to mention to you
guys, and it's using the keyboard
| | 05:40 |
shortcut.
If you're on a Mac, it's going to be
| | 05:43 |
Cmd+N.
If you're on a PC, it's going to be
| | 05:45 |
Ctrl+N.
So, I'm going to go ahead and select that.
| | 05:48 |
And you'll notice that as soon as I hit
that keyboard shortcut, my new document
| | 05:51 |
dialog box comes right back up.
Now, this is actually something that you
| | 05:55 |
can choose, whether you want to see this
or not.
| | 05:57 |
When you use a keyboard shortcut in your
new document preferences, which we're
| | 06:01 |
going to look at in just a moment.
So again, you can go through your options
| | 06:04 |
here.
Choose what you want.
| | 06:05 |
Hit Create, and you get a brand new page, okay?
| | 06:08 |
Now that we understand all of the
different methods that we have of creating
| | 06:12 |
new files in Dreamweaver.
And the choices that we're presented with
| | 06:15 |
when we create it.
We're going to explore setting those
| | 06:17 |
choices as default preferences for any new
documents in our next exercise.
| | 06:22 |
| | Collapse this transcript |
| New document preferences| 00:00 |
Based on the method that you use for
creating new documents, Dreamweaver often
| | 00:04 |
makes a lot of the key decisions for you
as it creates a new page.
| | 00:08 |
Whenever you start a new project, or when
your page requirements in your site
| | 00:12 |
changes, it's a really good idea to take a
few moments to set up your New Document
| | 00:16 |
Preferences, so that Dreamweaver is
going to create new pages the way that you
| | 00:19 |
want them.
All right, so I'm just going to be picking
| | 00:22 |
up right where we left off in our last exercise.
| | 00:25 |
And I'm just going to go up to my New
Document Preferences.
| | 00:28 |
To do that, I'm going to go up to
Dreamweaver and choose Preferences and if
| | 00:32 |
you own a PC, you're going to go to Edit
and choose Preferences and from the
| | 00:36 |
Category, I want to make sure I'm looking
at New Document.
| | 00:38 |
Now, there aren't a lot of choices here,
but the choices that you make are actually
| | 00:42 |
really important.
The first thing that Dreamweaver wants to
| | 00:44 |
know is what type of documents are you
going to be working on the most.
| | 00:48 |
If you just create a new document, using,
say a keyboard shortcut, what type of
| | 00:51 |
document should it be?
HTML, PHP, JavaScript, CSS files, that
| | 00:56 |
sort of thing.
The next thing it wants to know is what
| | 00:58 |
default extension.
You may have remembered from last exercise
| | 01:01 |
for example, that when I right-clicked in
the Files panel and created a New file, it
| | 01:05 |
placed a .html extension on the document.
If I didn't want that, if for example I
| | 01:10 |
wanted .htm, I could simply remove that L.
Now, is that a big deal?
| | 01:15 |
It's sort of tomato-tomato.
Whether you want the HTML or HTM
| | 01:19 |
extension, it doesn't really matter, but
my personal preference is .htm, so that's
| | 01:22 |
what I use.
Allright, the next thing it wants to know
| | 01:25 |
is what your default type declaration is
going to be.
| | 01:28 |
And depending upon what site you're
working on, or the team you're working
| | 01:32 |
with, you may have that specification or
that standard already set.
| | 01:36 |
I'm going to choose HTML 5, because again,
it's the latest version of HTML, and it's
| | 01:40 |
the one most people are going to use going forward.
| | 01:42 |
Now, unless you're using non-English as a
language, you'll probably use UTF-8
| | 01:47 |
encoding.
And Dreamweaver picks that by default, but
| | 01:50 |
you can change that to any encoding that
you want based upon what your needs are.
| | 01:54 |
Now, the other thing that Dreamweaver
wants to know here is, hey if you're
| | 01:56 |
getting a file form somebody else and the
character encoding is not specified in
| | 02:01 |
that file, what should I use?
And you're just going to use UTF-8 because
| | 02:05 |
more than likely if you're writing English
encoding file you're going to be receiving
| | 02:09 |
that as well.
Now, the only other thing I really wanted
| | 02:11 |
to point out here in the new document
preferences, right here, this little
| | 02:15 |
checkbox, for showing new document dialog
box on Cmd or Ctrl+N based on your
| | 02:20 |
platform.
So, your keyboard shortcut for creating
| | 02:23 |
new files in Dreamweaver is going to be
Cmd+N on the Mac and Ctrl+N on the PC.
| | 02:28 |
You can choose whether you want a new
document dialog box to show up or not.
| | 02:32 |
If its selected as it is here, click OK.
If I do my keyboard shortcut for Ctrl or
| | 02:37 |
Cmd+N, we''ll see that it brings up the
new document dialog box.
| | 02:41 |
On the other hand and this is nice, there
is are quick little link to your new
| | 02:45 |
document preferences right here.
On the other hand, if I turn that off and
| | 02:48 |
click OK, then I hit cancel.
Now if I hit my keyboard shortcut again.
| | 02:53 |
So it's either Ctrl or Cmd+N.
Notice I just get a brand new document
| | 02:57 |
without that dialogue box, so it's up to you.
| | 03:00 |
You have that sort of preference whether
you want to go through those options or
| | 03:03 |
whether you just want your default document.
| | 03:05 |
We'll also notice a change in the document
in terms of how they're created if I go
| | 03:09 |
over to the Files panel.
if I right-click now and choose New file,
| | 03:13 |
notice that now I have about.htm and not .html.
| | 03:18 |
So changing that preference allows me to
change exactly how Dreamweaver handles the
| | 03:22 |
way dot files are created within the Files
panel itself.
| | 03:26 |
By going ahead and setting these
preferences at the very beginning of a
| | 03:29 |
project, you can really speed up new
document creation by making sure that
| | 03:33 |
Dreamweaver is creating new documents that
fits your specifications without really
| | 03:37 |
requiring any additional input from you.
When you switch projects, or change
| | 03:41 |
standards, it's equally as easy to make a
few minor preference changes to insure
| | 03:45 |
that Dreamweaver is creating documents
exactly the way you need it to.
| | 03:49 |
| | Collapse this transcript |
| Exploring starter pages| 00:00 |
There are going to be times when creating
a new page from scratch is not your best
| | 00:04 |
option.
If you're new to CSS for layout, or you're
| | 00:07 |
simply looking for a head start for the
structure and layout of your new files,
| | 00:11 |
you should give Dreamweaver's starter
pages a look.
| | 00:14 |
Now although Adobe has currently paired
down the number of starter pages
| | 00:18 |
available, the remaining layouts are built
on standards compliant codes.
| | 00:22 |
And they offer cross browser, compatible
layouts, that render consistently in
| | 00:27 |
almost all versions of Internet Explorer,
Firefox, Opera, Safari and Chrome.
| | 00:31 |
So, they can be a really great place to start.
| | 00:34 |
Now, I want to show off some starter
pages, so I'm going to go to File and
| | 00:37 |
choose New.
Now, I choose blank page HTML I have two
| | 00:41 |
choices here.
I have a two columned fixed right sidebar
| | 00:44 |
header and footer, and you see sort of a
little preview of that.
| | 00:47 |
So that would give me a header, footer,
sidebar over on the right hand side and a
| | 00:52 |
main column of content.
Now when both of these layouts are what we
| | 00:56 |
call fixed layouts, meaning they're not
going to flex based upon the size of the
| | 01:00 |
screen.
We also have a three column fixed header
| | 01:02 |
and footer that gives you a sidebar on
either side of the content.
| | 01:06 |
Now since the two column fixed right
sidebar, header, and footer is the more
| | 01:09 |
common layout used with websites.
I'm just going to go ahead and select that
| | 01:14 |
one.
Now, when you've chosen one of these, one
| | 01:16 |
of the really nice things about starter
pages is how it deals with the CSS.
| | 01:20 |
You'll notice that if I go down here to
Layout CSS, I've got a few options here.
| | 01:24 |
I can either add the CSS for the layout to
the head of the document, I can create a
| | 01:29 |
new file, and that's going to create a new
external CSS for me.
| | 01:33 |
Or I can link into an existing file.
Meaning, if I already have a file out
| | 01:38 |
there that's holding other style like
typography for example, I can go ahead and
| | 01:43 |
link to that one as well.
And it'll add the layout code to that.
| | 01:46 |
Now, just for the sake of looking through
the code quickly, for this one I'm
| | 01:49 |
going to going to Add to Head.
So, that'll place the CSS directly in the
| | 01:53 |
head of the document.
Alright, I'm going to go ahead and choose
| | 01:55 |
Create.
And as soon as I do that, I get my new
| | 01:59 |
starter page.
Now I'm going to switch over to Design
| | 02:01 |
view, so you can kind of see what this
page looks like.
| | 02:05 |
Now, as you can see this page has page
holder information, and it's got some
| | 02:08 |
neutral background colors.
So, those background colors really help
| | 02:12 |
you mark the content areas, and there's
simple enough to easily replace with your
| | 02:16 |
own content in your own style.
It's very easy to kind of see where
| | 02:20 |
everything is and figure out how you're
going to configure this for yourself.
| | 02:23 |
Now, if I switch over to Code view and I
start looking through the CSS.
| | 02:28 |
One of the things that you're going to
notice is that the CSS is fully commented
| | 02:32 |
with clear, concise description of how the
page structure, class structure, and all
| | 02:37 |
the little layout styles work.
Additional comments are going to point out
| | 02:40 |
properties and styles that are focused on
created web standards-compliant code.
| | 02:44 |
So, this is all just fantastic information
for those of you that are learning how to
| | 02:49 |
control layout with CSS.
So, even if you're not going to use
| | 02:53 |
starter pages, it's worth it just to sort
of read through this to learn a little bit
| | 02:57 |
more about how layout works with CSS.
And how to properly write your styles so
| | 03:03 |
that they work across multiple browsers.
Now, I'll admit, starter pages aren't for
| | 03:07 |
everyone.
However, if you've never used CSS for
| | 03:10 |
layout before and you want to make sure
that you're using solid,
| | 03:12 |
standards-complient cross-browser code,
they're really a great place to start.
| | 03:17 |
Now, if you already have a strategy for
how you want to use CSS in place, and one
| | 03:21 |
of the starter pages fits your layout requirements.
| | 03:23 |
It really can save you a lot of time in
the creation of your CSS, as you'll just
| | 03:27 |
simply tweak the existing styles to be
more in line with your specific needs.
| | 03:32 |
Now, keep in mind that the CSS that you're
looking at here and all the page structure
| | 03:36 |
itself that's generated from these starter
pages is entirely customizable.
| | 03:41 |
You can add to it, you can take away from
it, you can tweak the code in whatever
| | 03:44 |
manner you want.
Just make sure that your using starter
| | 03:47 |
pages with a very clear strategy in mind
so that the overall implementation in them
| | 03:51 |
into your site is seamless.
With that in mind, our next exercise is
| | 03:56 |
going to be focused on discussing
strategies for customizing starter pages.
| | 04:00 |
And then, adopting them as part of your
overall workflow.
| | 04:04 |
| | Collapse this transcript |
| Managing starter pages| 00:00 |
While starter pages can do a great job of
giving new designers a head start on
| | 00:04 |
controlling page layout with CSS, they are
by nature designed to be individual pages.
| | 00:11 |
Using the CSS within a starter page to
control entire site can be a bit of a
| | 00:16 |
challenge to someone who's not familiar
with CSS.
| | 00:18 |
In this exercise, I want to show you a
workflow based on creating sites through
| | 00:23 |
using starter pages.
Now, by no means is it the only way to use
| | 00:27 |
starter pages and I'm not suggesting that
this is the preferred or perfect way of
| | 00:32 |
establishing site layout.
It does, however, offer someone that is
| | 00:36 |
new to web design, a way to quickly
establish a solid site wide layout and
| | 00:41 |
introduces new designers to the concepts
of controlling sites through external
| | 00:45 |
styles.
So, I'm going to go back to creating a
| | 00:47 |
starter page, I'm just going to go up to
File and choose New and I'm going to
| | 00:53 |
choose an HTML page type.
And again, we only have two starter pages
| | 00:57 |
here in Dreamweaver creative cloud and I'm
going to choose the 2 column fixed right
| | 01:01 |
side bar header and footer.
Now, in the last exercise, when we were
| | 01:04 |
sort of taking a first quick look at
starter pages.
| | 01:08 |
We placed the styles in the head of the document.
| | 01:11 |
This time, however, I want to separate
them out.
| | 01:13 |
So where it says layout CSS, I'm going to
grab that pull down menu and I'm going to
| | 01:17 |
choose Create New File.
So now when I click Create, the first
| | 01:22 |
thing it's going to ask me is where do you
want to place the CSS for this file.
| | 01:26 |
Now, I'm going to be using for this
exercise 03_ 04 folder.
| | 01:30 |
So I'm going to select that, but I want to
create a new folder inside of this.
| | 01:35 |
And the new folder is going to be named _css.
| | 01:38 |
So create a new folder in the 03_04 directory.
| | 01:41 |
Name it _css.
Now, this is a very common technique.
| | 01:45 |
Most designers place their styles in a
single folder.
| | 01:49 |
It just allows you to keep them organized.
You know where they're at, and all the
| | 01:52 |
files are going to point to that folder.
So the default name for this would be
| | 01:57 |
HTML5_twoColFixRtHdr.css.
Now, that's very descriptive, but it's
| | 02:03 |
probably not what you want for your entire
site, so I'm going to change this name and
| | 02:06 |
I'm just going to change it to main.css.
Or, you know, since it's layout, if you
| | 02:11 |
wanted to keep it separate and have the
rest of your styles in yet another
| | 02:14 |
external file, you could call it Layout.
All right, I'm going to choose Save.
| | 02:19 |
And then it creates my new page for me.
Now, if I save this page, and place it in
| | 02:25 |
03_04, and just name it index.htm, we can
start experimenting this file and kind of
| | 02:31 |
seeing what's going on here.
Now, if I switch over to Code View, I'm
| | 02:38 |
going to notice one very big change from
the last exercise.
| | 02:42 |
In the last exercise when we took a look
at our starter page, and placed the CSS
| | 02:46 |
actually in the head of the document,
there were a lot of styles here.
| | 02:49 |
Now, there are no styles, however we do
see this, right here.
| | 02:53 |
This is an external link to that main.css
file that was created.
| | 02:58 |
From this point editing your styles,
you'll need to go edit them and that
| | 03:01 |
external style sheet.
And on some programs, that's a bit of a
| | 03:04 |
chore, but Dreamweaver makes that
incredibly easy.
| | 03:08 |
The first thing that it does to make it
easy for you is, it gives you what we call
| | 03:12 |
related files.
If you'll notice, just above the Document
| | 03:15 |
toolbar, I have a little link right here
to main.css.
| | 03:18 |
If I click on that, it's going to jump me
right to the code, so whether I'm in split
| | 03:22 |
screen view or just pure Code View, If I
click on main.css, it takes me to that
| | 03:28 |
external CSS file without ever having to
actually open it.
| | 03:31 |
That means that I can make, tweak some
edits to my cascading style sheets.
| | 03:35 |
And then come right back here to source
code, and keep working on my HTML file.
| | 03:38 |
It really essentially allows me to work on
both of them at the same time.
| | 03:41 |
And it's one of the amazing work flows
that Dreamweaver gives you.
| | 03:44 |
So I'm a big big fan of that. Okay.
| | 03:46 |
The other thing that we have that helps us
work on our CSS is the CSS designer panel.
| | 03:50 |
So I'm going to go ahead and open this up.
Now, this is a new panel to Dreamweaver
| | 03:55 |
creative cloud.
And I'm going to have a full chapter a
| | 03:58 |
little bit later on, where I talk about
creating and managing styles using the CSS
| | 04:03 |
designer panel.
So this is just going to be a brief
| | 04:05 |
introduction to that.
Now, I have found that the most efficient
| | 04:09 |
way to use this CSS designer panel is to
kind of expand it out a little bit.
| | 04:13 |
So I'm actually going to drag this panel out.
| | 04:16 |
Until it jumps to a 2 column layout.
As soon as I find that 2 column layout,
| | 04:20 |
I'm going to leave it sitting like this.
Now, that leaves me a little less space
| | 04:24 |
over here on the left hand side for my
page design and for my code, but it makes
| | 04:29 |
up for it by making it very, very easy and
efficient for editing this CSS.
| | 04:34 |
So in order for me to start tweaking my
styles, I'm going to switch to Design
| | 04:39 |
view.
Again, if you're a brand new designer.
| | 04:41 |
One of the most confusing things about
working with HTML and CSS is, how do you
| | 04:45 |
know what to edit?
How do you know which rule to change to
| | 04:49 |
get what you want?
Well first, let's take a look at the HTML
| | 04:52 |
itself.
More than likely, you're not going to be
| | 04:55 |
using this content.
Now, I love the fact that part of the
| | 04:58 |
content that they have in the starter
pages Tells you a little bit about how to
| | 05:02 |
use them.
It sort of gives you some advice, which is
| | 05:04 |
really nice.
But more than likely, you're going to
| | 05:07 |
replace this content with your own.
For example, I would change this header
| | 05:11 |
here instructions to.
Welcome to Roux Academy.
| | 05:15 |
Alright, so eventually you would come in
here and you'd just replace all of this
| | 05:21 |
with the content that you want.
However, the colors, they're driven by the
| | 05:25 |
styles and that's not what I want either,
nor is this layout exactly the way that I
| | 05:30 |
want it.
You know, before I started working on this
| | 05:32 |
site, for example, I probably went into
Photoshop, or Illustrator, or Fireworks,
| | 05:36 |
or some program like that and created a
mock-up for this.
| | 05:39 |
So, I probably already know the colors I
want to use and how wide certain elements
| | 05:44 |
should be, things like that.
And, it's very doubtful that the starter
| | 05:47 |
page that you're using is going to conform
to that, so I want to go ahead and change
| | 05:50 |
some things.
But again, I have to know what it is that
| | 05:53 |
I want to change.
Now, an important part of that is
| | 05:56 |
understanding the structure of the page,
so if I switch back to Code view and I
| | 06:00 |
make sure I'm looking at source code.
I can kind of browse through this document
| | 06:04 |
and I can see for example this is a header
and I have a DIV with a class of container
| | 06:09 |
that wraps everything.
After the header, I have a DIV with a
| | 06:12 |
class of side bar and inside that I have
it a side.
| | 06:17 |
And after the sidebar I have an article.
It has a class of content.
| | 06:22 |
So, you know, it's not that hard even for
somebody that's brand new to HTML and CSS
| | 06:26 |
to scroll through here and get a pretty
good feel for how everything is
| | 06:31 |
structured.
Now, if you're one of those people that
| | 06:33 |
seems kind of adverse to code, Dreamweaver
gives you another option too.
| | 06:37 |
If I click on Design view.
Notice that I can click around my file,
| | 06:41 |
anywhere inside of it, and the status bar
on the bottom of my document window
| | 06:46 |
changes.
Let me show you what I mean.
| | 06:47 |
Let's say I click inside the Welcome to
Roux Academy header.
| | 06:51 |
If I go right down here to the status bar,
I can see down here in the status bar
| | 06:55 |
what's called the document tag header.
Essentially, this is almost like bread
| | 06:59 |
crumbs, and it really tells you where you are.
| | 07:01 |
It reads, actually, from right to left, so
what it's telling me is it says, hey,
| | 07:04 |
you're in an h1 element, which is inside
an article with a class of content.
| | 07:09 |
And you can see, if I hover over the tag,
it'll give me sort of a nice little tool
| | 07:13 |
tip of that tag.
Which is inside of a DIV with a class of
| | 07:16 |
container, which is inside the body.
If, on the other hand, I click to select
| | 07:20 |
this placeholder image, you'll notice it
says, image insert logo.
| | 07:23 |
So it's an image with an ID of insert
logo, which is inside the link which is
| | 07:27 |
inside the header, which is inside that
div with a class of container.
| | 07:31 |
So you can very quickly sort of figure out
where you are and which elements you want
| | 07:34 |
to modify by simply clicking around your page.
| | 07:37 |
Now, I'm going to start.
And I'm just going to modify a few things
| | 07:40 |
here.
Now, if this is going to be something that
| | 07:41 |
you were doing for real.
You what you would do at this point is you
| | 07:44 |
would start going into every single
section and modifying it so that it was
| | 07:47 |
exactly the way you wanted it stylistically.
| | 07:50 |
Layout wise, color wise, that sort of thing.
| | 07:52 |
Because what we're doing here is we're
laying the foundation for the rest of the
| | 07:56 |
site.
Everything that's going to follow this is
| | 07:58 |
going to look like this page or at least
share those visual elements.
| | 08:02 |
All right, I'm going to get rid of this
placeholder logo, I don't really need
| | 08:05 |
that.
And then I'm going to focus on editing
| | 08:07 |
this header.
Now, you will notice that as soon as I got
| | 08:09 |
rid of that placeholder image that the
header sort of collapse a little bit And
| | 08:13 |
that's because the height of the header is
being controlled by the content.
| | 08:16 |
But what if you want that header to be a
specific size and have that background a
| | 08:20 |
specific color?
All right, what you can see that I clicked
| | 08:22 |
inside of it and then I went down here to
the tag editor and I chose the header.
| | 08:26 |
So if you click inside of it and it
doesn't select the appropriate element,
| | 08:29 |
you can always go to the tag selector and
just go ahead and choose header.
| | 08:33 |
Okay, so now if I go over to my CSS
designer panel, I can see exactly what I
| | 08:37 |
have selected, right now it's telling me
the computed styles for that element.
| | 08:41 |
Now, what that means is all the selectors
that go into styling that one area,
| | 08:46 |
sometimes there's multiple selectors that
control it that this is the styles that
| | 08:49 |
you're getting.
I want to be more specific in that, I want
| | 08:52 |
to work on just that header itself.
So, I can click on main.css, global
| | 08:58 |
styles, that means everybody.
And I can start to filter out the styles.
| | 09:02 |
Now, I can scroll through the selectors to
find the one I'm looking for.
| | 09:05 |
And since I want to modify the header, I'm
going to find the rule that controls the
| | 09:09 |
header.
As soon as I select that, my properties
| | 09:12 |
pane over here changes and I can set new
properties for this.
| | 09:16 |
I want to set two properties.
I want to set a height for it, and I
| | 09:19 |
want to set a background color.
So here's height right here.
| | 09:22 |
I'm going to click inside height.
And the first thing it wants to know from
| | 09:24 |
me is what unit of measurement I'm
going to use.
| | 09:26 |
I'm just going to use pixels.
And I'm going to go ahead and choose 192
| | 09:31 |
pixels.
And now, when I hit Return, you can see
| | 09:33 |
that header gets a lot taller.
The next thing I want to do is set a
| | 09:36 |
background color for the header.
Now, you can scroll through your
| | 09:39 |
properties if you want.
But the CSS designer also allows you to
| | 09:41 |
jump to a specific section.
So I'm going to jump to the background
| | 09:44 |
section which will really just sort of
scroll me down, and here I can choose to
| | 09:48 |
set a new background color.
Now, I can use the color chip and kind of
| | 09:51 |
use he color picker to select a color, or
I can type a color in.
| | 09:55 |
Since I know the color I want I'm just
going to type it in.
| | 09:58 |
Now their using hexadecimal notation here,
I'm going to change that to RGB, it
| | 10:01 |
doesn't matter which one you use, it's
more of a personal preference.
| | 10:04 |
So I'm just going to type in RGB and in
parenthesis I'm going to type in 251, 174,
| | 10:12 |
44.
Then I'm going to close the parentheses,
| | 10:16 |
and hit Return or Enter.
Soon as I do that, you can see the actual
| | 10:21 |
background color change, which is pretty cool.
| | 10:22 |
All right?
Now, the other thing that I want to change
| | 10:25 |
is the width of the content and the width
of the sidebar.
| | 10:28 |
The content is a little too wide, the
sidebar's not wide enough, so I'm going to
| | 10:32 |
change that.
All right, I'm first going to click inside
| | 10:35 |
the content region, and you can see that
I'm in an article with a class of content,
| | 10:40 |
and there's actually right over here in
the selector is a content selector and
| | 10:43 |
that's who I want.
So I'm going to select that, just going to
| | 10:45 |
click on content to isolate and make sure
that the changes that I'm making are
| | 10:49 |
occurring to that selector.
Now, you'll notice that right now, it sort
| | 10:53 |
of has a width with a strike through and
if you hover over that the CSS designer
| | 10:57 |
panel is trying to tell me why this isn't applying.
| | 11:01 |
This all has to do with inheritance an the
fact that I'm focused actually on the
| | 11:04 |
paragraph, an not the content article itself.
| | 11:07 |
So if you see things like this, an you're
not quite sure what's going on, just go
| | 11:11 |
back an change your focus.
I'm going to make sure again that I'm
| | 11:14 |
focused on that article itself.
Okay, and I'm going to go into my main.css
| | 11:19 |
global, and I'm going to find that content.
| | 11:21 |
It doesn't mean that you can't edit your
styles the way I just showed you, you can.
| | 11:25 |
But sometimes it can be confusing, because
Dreamweaver might be giving you some
| | 11:29 |
feedback that hey this isn't applying,
when actually it is.
| | 11:31 |
And that all has to do with where your
focus was established.
| | 11:35 |
Okay, I want to make sure that I'm editing
content, and I'm going to change the width
| | 11:38 |
of this.
First thing I'm going to do is change the
| | 11:41 |
width to 640 pixels.
When I hit Enter, it's going to change the
| | 11:45 |
width but maybe in a way that you didn't expect.
| | 11:47 |
Rather than making it shorter and
expanding the sidebar over, it created a
| | 11:52 |
lot of empty space over here on the right
hand side.
| | 11:54 |
Well, the reason for that, If I kind of
scroll down a little bit, I can see that
| | 11:59 |
this is floated to the right.
So by floating to the right, Dreamweaver's
| | 12:02 |
moving all the way over and giving me this
empty space.
| | 12:05 |
It's one of the nice things about some of
Dreamweaver's visual aids.
| | 12:08 |
Is they give you a lot of nice feedback, okay?
| | 12:11 |
So next I want to focus on the sidebar.
So I'm going to click on this div sidebar
| | 12:15 |
1 down here in the tag selector.
And, I'm going to make sure I'm looking at
| | 12:19 |
the sidebar 1 selector over here in the
CSS designer panel.
| | 12:22 |
So, for the sidebar, I'm going to change
its width as well.
| | 12:25 |
I'm going to give it a width of 318 pixels.
| | 12:27 |
That's going to make it a good bit wider.
And it's going to give me a little bit
| | 12:30 |
more room here for the content in the side bar.
| | 12:33 |
I also want to change the background color
for this as well.
| | 12:36 |
So I'm going to click on background, go
down to background color, and I'm going to
| | 12:39 |
change this to RGB.
And then in parenthesis, 2 comma 99 comma
| | 12:44 |
174.
Don't forget the closing parenthesis.
| | 12:49 |
Hit Return and you should get a blue.
All right, so if I do a Save all, and
| | 12:53 |
preview this on my browser, you could see
this is my starter page, it's got the
| | 12:57 |
orange color for the header, it's got the
blue color for the sidebar, and the
| | 13:01 |
content in the sidebar are the widths that
I want them to be.
| | 13:07 |
I'm going to go back into Dreamweaver and
while this is certainly, you know, not
| | 13:10 |
exactly the way I want the page to look, I
think you've got a pretty good idea at
| | 13:13 |
this point.
You can go through and make any of these
| | 13:17 |
edits and modifications that you want to
your styles.
| | 13:20 |
To make sure that the layout is conforming
to the way you want it to, and not the way
| | 13:23 |
that the starter page starts with.
So, you're not tied to that.
| | 13:27 |
You can change it, you can modify it.
You can change any of the code you want.
| | 13:31 |
It really is just a starting point. Okay?
| | 13:35 |
So, what does that have to do with using
it site-wide?
| | 13:38 |
I mean, it's going to be really
problematic if you have to open up every
| | 13:41 |
single new page with a starter page and do
this each time, right?
| | 13:44 |
I mean that wouldn't be worth it.
So, if I go up to choose File > New, and I
| | 13:49 |
go back to my starter pages, I can stick
with the same structure, which is that 2
| | 13:53 |
column fixed right sidebar.
It's going to give me the same HTML, the
| | 13:57 |
same class names, the same IDs, the same
structure, that sort of thing.
| | 14:00 |
However, instead of creating a new CSS file.
| | 14:03 |
I can actually choose Link to Existing
because at this point, I can browse out,
| | 14:07 |
find that CSS file that we created
earlier, that main.css and go ahead and
| | 14:16 |
make sure I'm linking to that.
I could even choose a media type and I'll
| | 14:19 |
go with screen and click OK.
All right.
| | 14:23 |
So now, when I create this new file, let's
say I save this one in the 034 as, say,
| | 14:29 |
about.htm.
And I replace the instructions placeholder
| | 14:35 |
with About Roux Academy.
All right, cool, I'm going to Save this.
| | 14:39 |
Okay.
So now, what this has done is it's used
| | 14:42 |
the CSS that we modified earlier.
So it gets the same exact colors for the
| | 14:47 |
header an the sidebar, the same width, the
same height for this.
| | 14:50 |
So although we made just very simply
changes to our layout, we changed the
| | 14:54 |
height of the header, we changed the color
of the sidebar, that sort of thing.
| | 14:57 |
We certainly could have gotten a lot more
complex with this, in terms of the exact
| | 15:02 |
placement of things, typography, color, layout.
| | 15:04 |
We could have made any changes that we want.
| | 15:06 |
And now, that starter page give us sort of
a default structure that we know we're
| | 15:10 |
going to be styling properly.
So this is really not a bad workflow to
| | 15:14 |
use if you're new to HTML and CSS.
And you want to quickly and rapidly build
| | 15:19 |
pages based on standards compliant code.
Now, the really nice thing about this
| | 15:22 |
workflow, is it allows you guys that are
newer web designers, to really quickly
| | 15:26 |
establish that basic page structure, and
have an external CSS file that is used to
| | 15:31 |
control the entire site.
Now, the CSS that you're using, it's very
| | 15:35 |
lightweight.
You can modify it as much as the site
| | 15:37 |
requires, and it's also a really great way
for you guys to learn CSS, as you can
| | 15:42 |
experiment with a style to see how
changing them affects all of your multiple
| | 15:46 |
pages.
You can keep adding rules to the CSS to
| | 15:49 |
control additional elements that you
placed within the page, and all sorts of
| | 15:52 |
things.
So you can really just go crazy with it
| | 15:54 |
and have a lot of fun.
Of course, there are other ways that you
| | 15:57 |
can achieve the exact same results, but
this, using the Starter Pages, is
| | 16:01 |
certainly one of the quickest and easiest
for new users to adopt.
| | 16:05 |
Now, I have to point out that in this
workflow in no way lessens the need For
| | 16:10 |
those of you that are new to learn CSS as
quickly as possible.
| | 16:14 |
CSS is used to control almost all modern
websites, and without understanding how
| | 16:19 |
CSS works, and how to control it, your web
design skills will always be needlessly
| | 16:24 |
limited.
| | 16:25 |
| | Collapse this transcript |
|
|
4. Authoring OptionsDocument view options| 00:00 |
When authoring files in Dreamweaver, you
have several options to choose from in
| | 00:04 |
terms of your authoring environment.
Most of the time, the option that you're
| | 00:08 |
going to choose will be probably be based
on your own personal preferences.
| | 00:12 |
But occasionally, the task at hand will be
best suited to one option over another.
| | 00:18 |
Now, before we get into the details of
each of these environments, let's take a
| | 00:22 |
quick look at the options you have when
editing documents in Dreamweaver.
| | 00:26 |
So I have the index.htm file open from the
04_01 directory.
| | 00:31 |
And I just want to talk about the
different environments and some of the
| | 00:33 |
things that are available to us.
So the first one would be Design View as
| | 00:37 |
your looking at now.
So I've got the document open and I have
| | 00:40 |
the Design View turned on This is a very
visual editing environment.
| | 00:43 |
And if I make a change, it changes
directly on the screen, and although
| | 00:47 |
there's definitely some limitations.
As you can see here, to the rendering
| | 00:51 |
environment itself, it's still a nice
visual workflow.
| | 00:54 |
Now, if we want a little more fidelity, we
go to Live View, and what's interesting
| | 00:59 |
about Live View is it's not really an
authoring environment.
| | 01:02 |
For example, if I wanted to come over here
and change some of this text, even though
| | 01:05 |
I can highlight it, if I start typing,
nothing happens.
| | 01:09 |
So, currently, within Dreamweaver, a Live
View, although it certainly it certainly
| | 01:12 |
is a preview mode for us, it's not really
an authoring mode.
| | 01:15 |
Although, we're going to talk about in
greater detail in terms of what we can do
| | 01:19 |
in live view here in just a little bit.
All right, I'm going to turn Live View
| | 01:22 |
off.
And, I want to switch over to Code View.
| | 01:26 |
Now, when we're in Code View, we're
authoring the HTML, or the CSS, or the
| | 01:31 |
JavaScript, or whatever code we're working
on, directly within the code itself.
| | 01:35 |
Now, if I scroll up and through this code,
you can see that the code itself sort of
| | 01:39 |
changes color in certain places.
And that's one of the nice things about
| | 01:43 |
the code editor inside of Dreamweaver.
There's Code Hinting, and Code Coloring
| | 01:47 |
and Code Formatting, and also makes
working with the code that much easier.
| | 01:51 |
We also have this really nice Code toolbar
over here on the left-hand side that makes
| | 01:56 |
it easy for us to do things.
Like Insert a comment and Collapsing and
| | 02:00 |
Expanding sections of code.
So when we start looking at the code
| | 02:03 |
authoring environment, we'll go over a lot
of those options.
| | 02:07 |
Now, you've probably seen this before, but
we also have this Split View.
| | 02:11 |
And this is a really interesting authoring
environment, because if I'm working in
| | 02:14 |
Split Screen View and I scroll down.
And let's just say I highlight some text
| | 02:19 |
here in Code View.
We can see that the element that that's
| | 02:22 |
associated with highlights, even if
through my CSS.
| | 02:25 |
Which I'm doing here with the Roux Academy
headline, is hiding the headline and
| | 02:29 |
showing a graphic.
I can still see which element on the page
| | 02:32 |
that corresponds to.
That's extremely powerful in terms of
| | 02:36 |
workflow.
Because if you're working on somebody
| | 02:38 |
else's file, maybe you're picking up where
somebody left off or you're helping
| | 02:41 |
somebody out on a project.
Split View would make it very easy for you
| | 02:45 |
to correlate what's going on in the code,
with what's happening on the page.
| | 02:49 |
Likewise, if I'm on the page itself and I
highlight an element, notice that that
| | 02:54 |
element shows up within the Code View, too.
| | 02:55 |
So, it's a really nice way to sort of go
back and forth and see how the changes in
| | 02:59 |
code are affecting the page.
And see how changes that you make in the
| | 03:02 |
Design Viewer, the visual environment, is
effecting the code.
| | 03:05 |
All right, so those are our main authoring environments.
| | 03:08 |
You know, everybody's personal preference
is different.
| | 03:11 |
Although I will say that most new
designers favor this Design View, while
| | 03:17 |
more experienced designers tend to stick
with Code View.
| | 03:21 |
Now there's nothing wrong with that.
But I really want to encourage each of
| | 03:24 |
you, to become familiar with all of the
authoring environments that Dreamweaver
| | 03:29 |
has to offer.
As each one of them has its own unique
| | 03:32 |
benefits that you're going to miss out on,
if you simply restrict yourself to a
| | 03:36 |
single authoring mode.
| | 03:38 |
| | Collapse this transcript |
| Editing in Design view| 00:00 |
For most new web designers, the default
editing view in Dreamweaver is the Design
| | 00:05 |
view.
While Design view doesn't do the best job
| | 00:08 |
of rendering how your page is actually
going to look in the browser, it does
| | 00:11 |
provide you with a reliable way to
visually edit your files.
| | 00:15 |
So, let's take a closer look at it.
Now, here I have the index.htm file open
| | 00:19 |
from the 04_02 directory.
Now, I'm going to go over to my panels
| | 00:23 |
here and I'm just going to collapse those
down to icons.
| | 00:27 |
Just so we have maybe a little bit better
or more room, I should say, for our Design
| | 00:32 |
view.
Now, Design view, there's no good way for
| | 00:35 |
me to say this.
It's a mess.
| | 00:36 |
Notice as I scroll through the page,
hopefully this file isn't actually going
| | 00:41 |
to look like this because if it is, I'm
not that great of a designer.
| | 00:45 |
I mean, I know I'm not that great of a
designer but I'm certainly not this bad,
| | 00:48 |
right?
If I preview the page in our browser,
| | 00:50 |
okay, yeah, yeah, that does, that looks a
lot better, okay?
| | 00:55 |
So, the first thing that you learn when
working with Design view is that you can't
| | 00:58 |
trust it.
You can not trust what you're seeing here
| | 01:00 |
in terms of how it's going to render with
in the browser.
| | 01:04 |
The sooner you divorce that thought from
your head, you know, like hey, what I'm
| | 01:08 |
seeing here is how it should look.
Soon as you sort of get rid of that, then
| | 01:11 |
Design view becomes a lot more efficient,
and a lot more effective for you as an
| | 01:16 |
editing environment.
For me, it's more about being able to
| | 01:19 |
select visual elements on the page, and
then edit them through to the properties
| | 01:24 |
inspector or typing them in.
Or any other methods that we have of
| | 01:27 |
actually offering our content.
Now, let me show you what I mean.
| | 01:30 |
If I scroll down, I can see that I have
this sort of rabbit image on the page and
| | 01:35 |
I can just simply click on it.
Now, in certain cases, you're going to
| | 01:38 |
have to click on things more than once.
And you'll notice that when I clicked on
| | 01:41 |
this the first time, in the Properties
Inspector, I have this CSS-P Element.
| | 01:46 |
That stands for Cascading Style Sheet
Positioned Element.
| | 01:49 |
This is actually sort of a hold over from
some of the things that Dreamweaver used
| | 01:52 |
to allow us to do, in terms of being able
to visually draw these types of elements
| | 01:56 |
on the page.
All it really means is that this element
| | 01:59 |
is using positioning, in this case
relative positioning.
| | 02:02 |
So, when something like that happens to
you, don't worry.
| | 02:04 |
You can simply double click that element.
And then, you get to access the content
| | 02:08 |
inside of it.
So, sometimes you have to click something
| | 02:10 |
a little more than once to get a hold of it.
| | 02:12 |
Now if you double-click the image, you're
going to have this dialog box comes up
| | 02:17 |
because Dreamweaver thinks you want to go
out and actually choose a new image for
| | 02:20 |
it.
So, if that happens, don't worry.
| | 02:21 |
Just hit Cancel.
Okay, so now that I have my image slected,
| | 02:25 |
I can look down here in the Properties
Inspector and visually just sort of tell
| | 02:28 |
what's going on with it.
I can see the source of it, I can see the
| | 02:31 |
width and the height, I can see if it has
any classes applied to it.
| | 02:34 |
I can also see if it has any Alt text.
And all of your images on your page that
| | 02:38 |
are not just decorative in nature should
have Alt text so that they're accessible,
| | 02:42 |
and this one does not.
So, I'm just going to very quickly type in
| | 02:46 |
featured student spotlight, and hit Return.
| | 02:52 |
So in that instance, I didn't have to go
in the code.
| | 02:54 |
I didn't have to find that attribute, or
add that attribute to the tag.
| | 02:57 |
It was something I could just do very
quickly and easily, visually.
| | 03:00 |
Now, if I scroll down even more.
Now you can see that most of these
| | 03:04 |
spotlight areas have a link that says more info.
| | 03:06 |
Well, this one does, but it's not really a link.
| | 03:09 |
It's just text.
So if I highlight this text, again, using
| | 03:13 |
the properties inspector.
There are certain things that I can do
| | 03:16 |
very very quickly without having to go to
the code.
| | 03:18 |
In this case, I want to make a link.
Now, I have an entire chapter on creating
| | 03:22 |
and editing links a little bit later on in
the course.
| | 03:25 |
For right now, we're just going to make a
link very, very easily by typing in where
| | 03:29 |
I want this to link to.
So, I want it to link to the Spotlight.htm
| | 03:34 |
page, and when as soon as I type that in
and hit Return, it goes ahead and makes
| | 03:37 |
the link for me.
So it added the anchor element, it gave it
| | 03:40 |
an h: or f:attribute and it did all of
that without me having to go into the
| | 03:44 |
code.
I can also go and give this a title, so
| | 03:47 |
for title, I'm just going to type in
Student Spotlight.
| | 03:51 |
That makes it, again, a little bit more
accessible, and it's also going to give us
| | 03:55 |
a nice little tool tip to this link if
somebody mouses over it.
| | 03:58 |
Now, you'll notice that it doesn't look
like the other more info link, which is
| | 04:03 |
down sort of on its own line.
That has everything to do with the class
| | 04:06 |
that's applied to it.
Once again, here's where design view makes
| | 04:09 |
things pretty easy on us.
Using the Properties Inspector, I can grab
| | 04:13 |
that pull-down menu, and I can just choose
the class I'm looking for, which in this
| | 04:17 |
case is more.
Now, one of the things I really like about
| | 04:20 |
working in this sort of visual
environment, is that when I have class
| | 04:23 |
styles that are already written in my CSS.
When I see those sort of represented here
| | 04:28 |
in this list, Dreamweaver does a pretty
nice job of actually sort of showing me
| | 04:33 |
what these are going to format like.
You can see orange, and the text is
| | 04:36 |
orange.
Lavender, the text is lavender.
| | 04:38 |
You can see the headers are a little bit bigger.
| | 04:39 |
So, there's some nice sort of visual
queues here for you that let you know
| | 04:43 |
what's going on with some of the styling.
So, I'm going to choose more.
| | 04:46 |
And as soon as I do that, more info breaks
down on its own line and it looks just
| | 04:49 |
like that one as well.
Alright, so I’m going to save the file and
| | 04:53 |
there’s one more thing that I want to show
you about Design view that I really like.
| | 04:56 |
You know, there are times when I’m not
going to kid you, this rendering problem
| | 05:01 |
becomes so problematic.
That it just doesn't work anymore.
| | 05:05 |
Not only that a lot of times visually you
might hide content.
| | 05:08 |
This headline right here Roux Academy is
being replaced by this logo by CSS, so the
| | 05:13 |
text is actually being hidden and then the
logo is put in its place.
| | 05:17 |
The reason that you might want to do that
is you might want the text of the headline
| | 05:20 |
to show up for search results.
You might want to show up for
| | 05:23 |
accessibility purposes, but visually, you
want that logo to appear.
| | 05:26 |
So, that's a common technique in Design
view, it still doesn't let you, sort of,
| | 05:30 |
access that text.
You can't always tell the way things are
| | 05:33 |
formatted either.
If I scroll down into those coming events,
| | 05:36 |
these coming events right here where I
have dates and the event itself, I'd
| | 05:41 |
really like those formatted as a list.
Based on the way my lists are styled into
| | 05:46 |
CSS, I can't really tell if it's part of
the list or not.
| | 05:48 |
If I click inside of it, I can kind of
tell that it's in a paragraph, so it's
| | 05:52 |
not.
Okay, so when you're working in this
| | 05:55 |
environment, sometimes it's very hard to
select and edit things.
| | 05:58 |
And sometimes, it's very hard to tell what
formatting you have or what structural
| | 06:02 |
formatting you have for your content.
Well thankfully, Dreamweaver gives us a
| | 06:06 |
way to sort of get rid of the clutter of
our visual formatting.
| | 06:09 |
If we go up to view and we go down to
style rendering, which is about midway
| | 06:14 |
down, notice that I can turn off display styles.
| | 06:18 |
When I do that, I look at just the content.
| | 06:20 |
I don't see any of the CSS rendered at all.
| | 06:22 |
This way I get my headline back.
So if I wanted to edit that, I could.
| | 06:27 |
And if I scroll down to my current events,
here's all the current events listed in
| | 06:31 |
paragraphs.
And if I highlight them starting from the
| | 06:34 |
first paragraph all the way to the end, I
can simply click the Unordered List button
| | 06:39 |
to format them as a list.
So, now they're structured the way I want
| | 06:42 |
them to.
If I save this and then turn Style
| | 06:46 |
Rendering back on, I can see that it
really doesn't change the way it looks.
| | 06:51 |
The only thing it really changed for me
was the way that this is formatted.
| | 06:55 |
So structurally, its the way that I wanted
it to be.
| | 06:58 |
Okay, I'm going to go ahead and save this.
And that's a quick overview of editing
| | 07:02 |
your pages in design view.
I know a lot of designers out there,
| | 07:06 |
professional designers, that just ignore
Dreamweaver's Design view altogether
| | 07:10 |
simply due to its incorrect rendering,
which can be.
| | 07:13 |
A little maddening, I know.
Simply, they don't take it seriously, but
| | 07:17 |
that's okay.
While they're stuck hand coding complex
| | 07:20 |
structures like lists and things like
that, I'm formatting them with a single
| | 07:24 |
click and then getting on with my work.
While it does have its limitations, I
| | 07:28 |
implore you not to ignore Dreamweaver's
Design view.
| | 07:31 |
There's plenty of instances where it's
actually the faster and more efficient
| | 07:35 |
authoring mode to work in.
| | 07:36 |
| | Collapse this transcript |
| Using Live view| 00:00 |
While not technically in Authoring mode,
Live view allows you work with your
| | 00:04 |
documents in ways that makes them easier
to edit.
| | 00:07 |
And gives you a more accurate preview of
how your file is actually going to look in
| | 00:11 |
the browser.
So, to take a closer look at Live view,
| | 00:14 |
I've opened up two files here.
One is the index.htm found in 04_03
| | 00:17 |
directory, and the other one is the
graphic-design.htm, which you can find in
| | 00:23 |
the 04_03/programsdirectory.
Okay, so I'm going to turn my attention to
| | 00:26 |
the index page first.
Now, we know that Design view has its
| | 00:33 |
shortcomings.
We've talked about them in our last
| | 00:36 |
exercise, and we know that it just doesn't
render the page very well at all.
| | 00:39 |
Alright, I'm going to collapse these
panels down to icons just so that we can
| | 00:43 |
see a little bit more of our page.
And then, I'm going to turn Live view on.
| | 00:46 |
Now, a couple of things happen when I do this.
| | 00:49 |
First off, the page rendering gets
markedly better.
| | 00:51 |
This looks a lot more like what we're
going to see within our browsers.
| | 00:55 |
The second thing that it does for us.
As you've probably noticed, that as a good
| | 00:59 |
bit of chrome over here, a new elements,
to our Document toolbar.
| | 01:03 |
So, we're going over those in just a moment.
| | 01:05 |
Alright, one of the neat things about Live
view is that it uses the Web Kit rendering
| | 01:09 |
engine to render your, your pages.
So, it's kind of like a browser baked
| | 01:13 |
right into Dreamweaver, which is pretty cool.
| | 01:15 |
Now, the Web Kit rendering engine is
extremely popular.
| | 01:18 |
It's used in browsers like Safari.
Opera now uses Web Kit.
| | 01:22 |
It used to use Presto, but now it uses Web Kit.
| | 01:25 |
And Google, for their Chrome browser, it's
based off Web Kit.
| | 01:29 |
But they've since forked the Web Kit
rendering engine.
| | 01:31 |
And now they're calling it Blink, and
they're sort of developing it on their
| | 01:34 |
own.
But it just gives you some idea as to the
| | 01:36 |
scale or the amount of browsers out there
that use Web Kit.
| | 01:39 |
So, it's pretty standard.
Now, the Dreamweaver version of the Web
| | 01:43 |
Kit rendering engine is actually pretty old.
| | 01:44 |
If you had to correlate it to a browser,
it would be around Safari 4.
| | 01:48 |
So, there are certain properties in CSS
that are still aren't supported by it.
| | 01:52 |
But I will say this, with Dreamweaver
Creative Cloud being updated as frequently
| | 01:56 |
as they're going to be updating it.
And with the knowledge that I have that I
| | 01:59 |
know that Adobe's team is hard at work at
updating the version of Web Kit, I would
| | 02:04 |
expect to see that changed pretty soon.
Okay, this gives us a pretty picture.
| | 02:07 |
It gives us an idea of how this is
supposed to be rendered in the browser.
| | 02:10 |
But, is it really helping us?
Well, yeah, actually it is.
| | 02:14 |
It's more than just a static image.
For example, if I start interacting with
| | 02:18 |
these links by hovering over them, I can
see that I get to the title attribute
| | 02:22 |
comes up.
I can see the hover that I've styled, and
| | 02:24 |
here's something really cool.
Remember what I told you about this sort
| | 02:27 |
of being a browser baked into Dreamweaver?
If I hold down the Cmd key on the Mac or
| | 02:32 |
the Ctrl key on the PC, and I click one of
these links, Dreamweaver will follow it.
| | 02:37 |
It's actually going to go and jump to that
page to show you whether that link is
| | 02:41 |
working or not.
And it's resolving that using the files in
| | 02:44 |
your root folder.
So, because my link from the index page,
| | 02:47 |
the About page, works it actually renders
the about page which is really cool.
| | 02:51 |
And that's where all this chrome sort of
comes into play.
| | 02:54 |
I have an address bar, just like a
browser, and I have a Forward button and a
| | 02:58 |
Backward button just like a browser, as
well as a Refresh page.
| | 03:01 |
So if I hit the Back button, it takes me
back to the Index page.
| | 03:03 |
So you can use this to actually check your links.
| | 03:05 |
If I hold down the Cmd or Ctrl key and
click on Programs, and I get the dreaded
| | 03:10 |
404 not found, and that tells me that
link's not working.
| | 03:14 |
Unfortunately, we can't edit things
directly in Live view, at least not yet.
| | 03:19 |
So, in order to make that change, I'm
going to turn Live view off for just a
| | 03:22 |
moment.
Make sure I'm focused on that link and I
| | 03:24 |
can see, yup, there it is It says programs.htm.
| | 03:28 |
Actually, that's in a subdirectory, so it
should say programs/programs.htm.
| | 03:32 |
So if I save that, turn Live view back on,
and then check the link again, now its
| | 03:42 |
working, excellent, excellent.
Now, in addition to being able to check
| | 03:47 |
all of your local files, what's really
interesting about Live view is it also
| | 03:52 |
allows you to check absolute links.
Let me show you what I mean.
| | 03:54 |
If I scroll down the page where it says,
fall registration is now open, I can see
| | 03:59 |
that there's a link, right here, to Lynda.com.
| | 04:02 |
Now, this is an absolute link.
It's actually going out to the Lynda.com
| | 04:05 |
website, and linking to the homepage.
Well, lets see if we can follow that.
| | 04:09 |
I'm going too hold the Cmd key down, hold
the Ctrl key down if you're on a PC, and
| | 04:13 |
click the link.
And boom, there is the Lynda.com website.
| | 04:18 |
And this is Lynda.com, you could, you
know, you guys are members.
| | 04:21 |
So, you can go log in and browse around
and see what's going on here.
| | 04:25 |
You can type in whatever address you want.
This is a browser baked into Dreamweaver.
| | 04:29 |
It's really cool that you can do this.
Now, I'm going to hit the Back button
| | 04:33 |
because there's not too much I want to do
on Lynda.com at the moment.
| | 04:36 |
But it's nice to know that that absolute
link is working.
| | 04:39 |
That's another thing that you can do, you
can check these and make sure that your
| | 04:41 |
links are all resolving.
Now, in addition to being able to check
| | 04:44 |
your styles and make sure they're
rendering the way you want them to.
| | 04:47 |
And, in addition to being able to check
the lengths to make sure they're going
| | 04:50 |
where you want them to.
Live view also allows us to kind of check
| | 04:53 |
our JavaScript and make sure that any type
of interactive behaviors are functioning
| | 04:57 |
properly, as well.
I'm going to click over to
| | 04:59 |
graphic-design.htm, and I'm going to turn
Live view on here as well.
| | 05:03 |
If I scroll down, I can see that I have
some tabs on the page.
| | 05:08 |
And these tabs are actually created with
the jQuery UI elements that you can find
| | 05:13 |
baked into Dreamweaver.
So, it's just a tab that gives an overview
| | 05:17 |
of the bachelors program and the masters program.
| | 05:19 |
And if I click on them, you can see I'm
just tabbing back and forth between those.
| | 05:23 |
Well, you might want to check your styles.
You might want to check and make sure
| | 05:26 |
everything in functioning the way that
it's supposed to.
| | 05:29 |
But, a lot of times, when you have
interactive widgets on the page.
| | 05:32 |
It's very difficult to understand what
they're going ti look like in a certain
| | 05:36 |
way or a certain point when you're
interacting with them.
| | 05:39 |
Well, one of the things that live view
allows us to do with elements that use
| | 05:42 |
JavaScript, you'll notice that I have this
little pull-down menu here that says Live
| | 05:45 |
view options.
Well, I can choose to freeze that
| | 05:48 |
JavaScript, and there's even a keyboard
shortcut, F6.
| | 05:51 |
Because when you're interacting with
something, you can't always stop what
| | 05:54 |
you're doing and going over here to this menu.
| | 05:55 |
So, let's say I have Masters as my active
tab, and then I'm hovering over the other
| | 06:02 |
tab, right?
If I hit F6, it's going to freeze the
| | 06:06 |
JavaScript.
You can see there's a little warning up
| | 06:08 |
here that says, JavaScript is frozen.
Okay, that means that I can start to
| | 06:11 |
interact with all of these elements and go
over, to say, My Styles panel or the even
| | 06:16 |
the Job Descript.
And make sure everything is running the
| | 06:18 |
way they're suppose to be running or
styled the way that they're supposed to be
| | 06:21 |
styled when this widget is in a certain state.
| | 06:24 |
So, that's extremely handy.
Now, all I have to do to get Job Descript
| | 06:28 |
going again is to hit F6, JavaScript comes back.
| | 06:32 |
Interacting with it brings my jQuery UI
elements right back to where there were
| | 06:37 |
supposed to be.
Now, I can also disable JavaScript.
| | 06:40 |
So, if I come up to this menu and choose
Disable JavaScript, I get to see what the
| | 06:45 |
widget's going to look like if somebody
has JavaScript turned off.
| | 06:48 |
This is extremely helpful if I'm trying to
create a fallback element or fallback
| | 06:54 |
styling or even fallback functionality.
For somebody that's browsing with
| | 06:58 |
JavaScript turned off.
Again, I get this nice warning up here
| | 07:01 |
that says JavaScript is disabled.
This allows me to preview my fallbacks.
| | 07:05 |
I can click on Enable, and it goes right
back to working again.
| | 07:08 |
So, even though we can't really
technically edit inside Live view, once
| | 07:13 |
you get used to using it, you're really
not going to be able to edit without it.
| | 07:16 |
It's just that important of a piece in
your working with files.
| | 07:20 |
Now later on, I'm going to show you guys
how important Live view is when you're
| | 07:25 |
working on and editing your CSS.
So, we're going to get a little deeper in
| | 07:28 |
the Live view a little bit later on as well.
| | 07:30 |
For now, just keep in mind that Live view
allows us to preview and troubleshoot our
| | 07:35 |
pages in a way that the other authoring
modes just aren't capable of.
| | 07:39 |
And that makes it an invaluable part of
any Dreamweaver workflow.
| | 07:43 |
| | Collapse this transcript |
| Editing in Code view| 00:00 |
My favorite Dreamweaver authoring mode is
Code View.
| | 00:04 |
So I have the index.htm page open from 04_04.
| | 00:08 |
And I'm going to switch right over here by
clicking Code, and go into Code View.
| | 00:14 |
I'm also going to go ahead and close or at
least my collapse my panels down to a set
| | 00:18 |
of icons, so that I have a little bit more
room for their code.
| | 00:20 |
Now, for those of you that are new to Web
Design you may be hoping to avoid Code
| | 00:26 |
View.
But I'm here to tell you that embracing it
| | 00:29 |
is going to speed up your development as a
professional web designer.
| | 00:32 |
As good as Dreamweaver's Visual tools are,
there's really no avoiding the fact that
| | 00:37 |
in some cases there's simply no faster way
to edit files than in Code View.
| | 00:41 |
And, in fact, in some cases, it's going to
be the only way to edit them.
| | 00:45 |
Take for example, if I scroll up, this is
the head of my document.
| | 00:51 |
Now, I like to describe the head of the
document as being where all the stuff goes
| | 00:55 |
that makes the page work but you can't see it.
| | 00:58 |
So the title is there.
Right now we have character setting
| | 01:00 |
coding.
We have a couple of conditional comments,
| | 01:03 |
if somebody is viewing the page on a
browser that is Internet Explorer Version
| | 01:08 |
8 and below.
That help it understand responsive web
| | 01:11 |
design, media queries and HTML 5 elements.
So those are two things that are happening
| | 01:16 |
for us there.
And then we also have a link out to our
| | 01:18 |
external style sheet.
Now you can do the majority of that in
| | 01:21 |
design view But it takes a little leap of
faith and a lot of dialog boxes.
| | 01:26 |
A lot of times it's easier just to come in
and code it yourself.
| | 01:29 |
Let me show you what I mean.
All right, so just above the title, I'm
| | 01:34 |
going to hit enter to create a brand new line.
| | 01:36 |
Now one of the things that's really nice
about working with Code inside
| | 01:40 |
Dreamweaver, is that Dreamweaver's coding
environment has what we call Code Hints.
| | 01:45 |
Meaning, its going to help you not only
write your code but its going to help you
| | 01:49 |
write it a lot faster.
So I'm just going to go ahead and open up
| | 01:52 |
an angle bracket, which you can find right
next the M key, and I'm going to start
| | 01:57 |
typing the word Meta.
As soon as I start typing that,
| | 02:00 |
Dreamweaver gives me a list.
And when I type in M, E, it filters it
| | 02:04 |
even further, type in a T and just about
the only thing left is meta.
| | 02:07 |
If I hit Return or Enter.
It's going to go ahead and finish that for
| | 02:11 |
me.
Now, I know that happened really slow.
| | 02:12 |
But the faster you get at using these Code
Hints, you can literally type just one or
| | 02:17 |
two letters, hit Return and you've got
your tag.
| | 02:19 |
So, this can certainly speed up the
process of hand coding.
| | 02:23 |
Now, I need some attributes in here.
So I'm going to hit Space and the next
| | 02:27 |
thing I'm going to do is type in H, TTP equivalent.
| | 02:30 |
Again, I really can type that all out
myself, but I don't have to, because
| | 02:33 |
Dreamweaver's going to do it for me.
By just typing in H, it filters out that
| | 02:37 |
attribute and makes it available for me
and I can hit Enter.
| | 02:39 |
Now, Code Hinting is awesome, because not
only did it finish typing that for me, and
| | 02:43 |
look, I'm a notoriously bad typist, so I
have typos all the time.
| | 02:47 |
It not only gave me that, but notice that
it placed the cursor in between two
| | 02:50 |
quotation marks.
So, anytime that you have an attribute,
| | 02:53 |
and you need to add a value for it, in
HTML 5, that value needs to be inside
| | 02:56 |
quotation marks.
So that's another thing that was really
| | 03:00 |
nice of it.
Now, in this case, I'm going to type in
| | 03:02 |
capital X, and this showcases that
Although code handling is awesome is not
| | 03:05 |
always going to give you what you need.
So I'm going to do capital X dash capital
| | 03:10 |
UA dash, the word compatible.
All right, now, I'm going to hit my right
| | 03:16 |
arrow key so that I can go outside of the
quotation marks.
| | 03:22 |
And the next thing I'm going to do is type
in the word content.
| | 03:25 |
Again I'm going to let Code Hinting do
that for me.
| | 03:28 |
And then inside content, I’m going to type
in a capital IE equals edge comma Chrome
| | 03:36 |
equals 1 and then I have to remember to
close the tag.
| | 03:40 |
In this case since the meta tag doesn't
really have a closing tag, I just do the
| | 03:44 |
closing angle bracket there.
Which is the greater than symbol, if you
| | 03:47 |
want to know how I refer to them and there
you go.
| | 03:49 |
Okay, now what the heck does this do?
This is a neat little line of code that
| | 03:53 |
enables what we call the Google Chrome frame.
| | 03:56 |
What does that mean?
Well in certain browsers, and by that read
| | 03:59 |
in, Internet Explorer, if this plugin is
enabled, what will happen if this line of
| | 04:05 |
code is detected by the browser?
It'll go ahead and wrap all the content in
| | 04:10 |
a Chrome rendering frame.
So, it's essentially using the Chrome
| | 04:14 |
rendering within the Internet Explorer browser.
| | 04:17 |
As the line of text on Google Chrome's
website says, it just makes the web better
| | 04:22 |
without you having to do anything.
I don't know that I'd go that far, but it
| | 04:26 |
is kind of cool.
Well, you know, to be honest with you, if
| | 04:29 |
I didn't know what that was, I wouldn't
know what that was.
| | 04:32 |
(LAUGH).
And I'm sure a lot of people that might
| | 04:34 |
work on your file after you are finished
with this might look at a line of code
| | 04:37 |
like this and say, I have no idea what
that does.
| | 04:40 |
And that's where comments come in.
Any time that you do a lot of hand coding,
| | 04:44 |
you might want to comment your code to
either let you know what you just did.
| | 04:48 |
because I know I can't remember something
six months, you know, from now, or your
| | 04:51 |
team members.
And again, Dreamweaver makes that very,
| | 04:54 |
very simple to do.
So, I'm going to create a new line.
| | 04:57 |
And on line number five, I'm just going to
type in enable Google Chrome Frame, okay,
| | 05:04 |
great.
Now this is not really good code.
| | 05:08 |
If I left this, this would be a parsing
error, because this is not wrapped in any
| | 05:13 |
type of tag or element or anything like that.
| | 05:16 |
So I can just highlight this text, and I
can go right over here to, this is the
| | 05:19 |
coding toolbar.
So the same way we have a document
| | 05:22 |
toolbar, we have a toolbar dedicated to code.
| | 05:24 |
And if I look down towards the bottom of
this, I can see that I have two little
| | 05:28 |
word balloons.
One is Apply Comment and the other one is
| | 05:31 |
Remove Comment.
If I click the Apply comment, I get to
| | 05:34 |
choose from different types of comments
based upon the language that I'm offering
| | 05:38 |
at the time.
Since I'm working on HTML I'm going to
| | 05:41 |
choose Apply HTML comment.
As soon as I do that Dreamweaver turns it
| | 05:45 |
gray.
Now this is another nice thing that
| | 05:48 |
Dreamweaver does for us, it uses code
colouring as well to kind of let you know
| | 05:52 |
what a section of code is doing.
If I see code is gray like this, I know
| | 05:57 |
it's a comment.
So here it says enable Google Chrome Frame
| | 06:00 |
and there is the meta tag just below that.
Now I'm going to scroll down and using the
| | 06:06 |
same process that we just did I'm going to
add another link to my unordered list.
| | 06:11 |
So down to about line 26.
Now again, code hinting allows us to do
| | 06:15 |
things very quickly and very easily but it
actually goes beyond just helping us
| | 06:19 |
finish text.
Let me show you what it means.
| | 06:21 |
So you can use this as a reference if
you'd like and honestly there's nothing
| | 06:25 |
wrong with copying and pasting.
But because I want you to sort of
| | 06:28 |
experience some of the power that code
heading has, type this along with me.
| | 06:31 |
I'm going to go ahead and do an a, which
is an anchor tag that stands for link and
| | 06:36 |
then I'm going to hit Space.
Now as soon as I do that I'm going to type
| | 06:39 |
in an h.
The href attribute, you know I'm just
| | 06:41 |
going to type in r so it will jump to
href, the The href attribute is what your
| | 06:45 |
browser uses to resolve the link.
It's essentially you telling the browser
| | 06:49 |
when somebody clicks this, I want you to
go here.
| | 06:52 |
So typically you have to resolve that link
by yourself if you're hand-coding, meaning
| | 06:57 |
you have to remember the path.
To that link or to that page from where
| | 07:01 |
you are right now.
But if you're hand coding inside
| | 07:04 |
Dreamweaver, you don't have to know that.
You'll notice that as soon as I typed in
| | 07:07 |
hr, the Code Hint came up, but there's a
little link beside.
| | 07:11 |
And that's Dreamweaver being very
intelligent and saying oh, oh, oh you want
| | 07:15 |
to create a link.
Okay, well what would you like to link to?
| | 07:18 |
If I hit Return or Enter, while that's
highlighted, check out what Dreamweaver
| | 07:22 |
does for me.
It places the quotation marks around the
| | 07:25 |
blinking cursor and it gives me the option
right there, to browse.
| | 07:29 |
And again if I hit enter one more time,
that brings up a dialog box that says,
| | 07:33 |
okay, go find the page that you want.
In this case I'm going to go into page
| | 07:37 |
04_04 about, and find the about.htm.
I can click Open, as soon as I do that
| | 07:45 |
Dreamweaver goes ahead and resolves it for me.
| | 07:46 |
That is very nice, very simple.
Now I'm going to go ahead and give it a
| | 07:51 |
title as well.
In this case I 'm going to give it a title
| | 07:55 |
of about Roux Academy then I'm going to
close that and then inside that link I'm
| | 08:00 |
going to type in the word about.
And then to close my link tag, because in
| | 08:05 |
most tags you have an opening tag and a
closing tag I can just hit the left angle
| | 08:09 |
bracket and the forward slash.
And Dreamweaver's going to finish it for
| | 08:12 |
me, awesome.
Now a lot of times you're going to be hand
| | 08:15 |
coding the process from the very beginning
all the way through, like we did here with
| | 08:19 |
the link.
But other times you're going to want to,
| | 08:22 |
to say wrap an element.
For example, this anchor tag, I can see
| | 08:25 |
that each of them are wrapped with this
list item element.
| | 08:28 |
So, this one needs to be wrapped with a
list item as well.
| | 08:31 |
Now, I can add an opening list item here
and a closing list item here, but it
| | 08:34 |
wouldn't be the most efficient way to do that.
| | 08:36 |
If I simply highlight the entire link from
the start to the end of it.
| | 08:41 |
I can go right over to my Coding toolbar,
right down here to the end.
| | 08:44 |
And there's this little icon that looks
like a tag with a pencil, like it's
| | 08:48 |
editing it.
And if I hover over that you'll notice
| | 08:50 |
that I get a little tool tip that says
Wrap Tag.
| | 08:52 |
When I click that, it says okay, what tag
do you want to wrap this with?
| | 08:55 |
I'm going to type in li, for list item,
hit Return.
| | 08:58 |
Sometimes you have to hit it twice, and
there we are.
| | 09:02 |
Now it goes ahead and hounds that for you.
Now that's not that big of a deal, when
| | 09:05 |
you're dealing something here as small as
just this link.
| | 09:08 |
But if you have an entire section of code,
you know, several say DIV tags and
| | 09:12 |
paragraphs and headings.
That you want to wrap with another DIV tag
| | 09:15 |
or section or article tag, that's an
extremely handy capability to have.
| | 09:20 |
Now I'm going to go ahead and save that,
and I want to point out that even though
| | 09:24 |
we're just sort of looking at editing HTML here.
| | 09:26 |
Dreamweaver gives you Code Hinting and
Code Completion in, regardless of what
| | 09:31 |
code you're working with.
Whether it's JavaScript, or CSS, and it
| | 09:33 |
gives you all sorts of really cool tools.
When you're working with CSS for example,
| | 09:37 |
if you type in a color, it's going to
bring up a color picker that allows you to
| | 09:40 |
visually choose color.
So there are a lot of really neat features
| | 09:44 |
within the coding environment inside of Dreamweaver.
| | 09:47 |
Now, if you love to code, Dreamweaver is
just chocked full of amazing features like
| | 09:52 |
that.
It's going to make writing your code a lot
| | 09:53 |
easier, and a lot faster.
Now, if you're the type of person that's a
| | 09:56 |
little bit hesitant about learning code.
If you're a little intimidated by it,
| | 09:59 |
don't be.
It's a necessary step in becoming a web
| | 10:02 |
designer, and thankfully, Dreamweaver has
plenty of these tools to help make that
| | 10:06 |
transition a lot easier for you.
| | 10:08 |
| | Collapse this transcript |
| Using the Quick Tag Editor| 00:00 |
Although, it often seems as though you
have to pick between working either in
| | 00:04 |
Design view or editing code in Code view.
Dreamweaver actually has a fantastic
| | 00:09 |
little feature that makes it possible for
you to do both (LAUGH) at the same time.
| | 00:14 |
So, I want to take a look at using what
might actually be my favorite feature in
| | 00:19 |
Dreamweaver, and that would be the Quick
Tag Editor.
| | 00:23 |
So here, I'm working on the index files.
This time, from the 04_05 directory.
| | 00:29 |
And, there's a few things going on here
that I want to change.
| | 00:31 |
For example, right here I have this link About.
| | 00:35 |
And you'll notice it's gray.
And it's gray because it has the class
| | 00:39 |
current applied to it.
How do I know that?
| | 00:41 |
Well, if I go down here to the tag
selector, again down here at the very
| | 00:45 |
bottom of the document window, I see a.current.
| | 00:48 |
Now, if you've never seen this before,
when you see a period like the element a
| | 00:53 |
anchor.current, the dot represents a class.
| | 00:57 |
If you see a pound symbol or octothorp if
you really want to get technical about it,
| | 01:00 |
if it's like a#current, that would be an ID.
| | 01:03 |
So, that's a nice visual representation of
that for you.
| | 01:05 |
Okay, so let's say I click on this, alright?
| | 01:08 |
Just to select that.
Let's say I want to get rid of that class.
| | 01:11 |
Well, I could certainly use the properties
inspector to do that.
| | 01:13 |
But there are a lot of times when I might
want to edit multiple attributes.
| | 01:17 |
Maybe I want to edit a title at the same
time, or even add another attribute that's
| | 01:21 |
not found on the Properties Inspector.
That's where the Quick Tag Editor comes
| | 01:25 |
in.
So to access the Quick Tag Editor on a PC
| | 01:28 |
or on a Windows machine, you're going to
do Ctrl+T.
| | 01:31 |
And on the Mac, you're going to do Cmd+T.
Now as soon as you do that near the
| | 01:36 |
element that you have selected, you're
going to see this quick tag editor come
| | 01:40 |
up.
What's so cool about this, is it's kind of
| | 01:42 |
like a little tiny code window and it
gives you access to the code and allows
| | 01:46 |
you to do whatever you want.
So for example, you can come in here and
| | 01:49 |
highlight that class equals current, and I
can just go ahead and get rid of that.
| | 01:53 |
If I wanted to capitalize the word about
in the title, I could do that.
| | 01:58 |
And when I'm done editing this tag,
editing all the attributes, or adding
| | 02:01 |
attributes, taking attribute away,
resolving the length.
| | 02:04 |
Whatever I want to do, all I have to do is
hit Return or Enter.
| | 02:07 |
It's going to close that out.
It's going to make the change for me.
| | 02:09 |
So, that's very fast and very simple.
Now editing existing tags is really only
| | 02:14 |
one feature of the Quick Tag Editor.
Let's say I've got this word innovation
| | 02:19 |
right here.
And innovation needs to have a class
| | 02:21 |
applied to it as well.
Well, you can't apply a class to just a
| | 02:25 |
word inside of HTML.
You have to surround it with a tag.
| | 02:29 |
In this case, I'm going to have to
surround it with a span tag.
| | 02:31 |
Now, I could use the Properties Inspector
to do that.
| | 02:34 |
But a very fast, and easy way to do it
would also be to use the Quick Tag Editor.
| | 02:39 |
So if I highlight the word innovation and
then use my keyboard shortcut, which is
| | 02:43 |
again either Cmd+T or Ctrl+T.
You'll notice that now instead of editing
| | 02:48 |
an existing tag it's saying oh, okay, you
want to surround this with a tag, what
| | 02:52 |
would you like to do?
Well, I'm going to type S and then a P,
| | 02:54 |
you'll notice I get code denting here the
same way I do in Code view.
| | 02:58 |
So, it is a very fast way of working once
you get used to doing it.
| | 03:02 |
So if I hit Return or Enter, it is going
to finish span and I'm going to hit Space
| | 03:06 |
and type in a C.
Now as soon as I do that, it says, oh, you
| | 03:09 |
want to add an attribute to this.
Okay, what attribute do you want?
| | 03:12 |
Because I typed in C, class is the first
the that comes up.
| | 03:15 |
And I hit Return and I get all my code hinting.
| | 03:17 |
Now here's what's really cool about this.
It's now going to go into my CSS and it's
| | 03:21 |
going to take a look at all the class
definitions I have in there.
| | 03:24 |
And it's going to make them available to
me here in the Quick Tag Editor.
| | 03:28 |
If I type in O, for example, it jumps
right down to orange and I can hit Return,
| | 03:32 |
hit Return again, and it goes ahead and
applies that.
| | 03:37 |
Now, I know if you were doing that along
with me and you'd never done that before,
| | 03:40 |
you're probably looking at that going,
okay, that was kind of cool.
| | 03:44 |
But wouldn't it have been just as easy for
me to go down to the Properties Inspector?
| | 03:48 |
Grab that class pull-down menu and choose orange.
| | 03:50 |
Now, sure, it would've, but you've got to
remember, too, that I was doing that
| | 03:53 |
really slow.
Once you get used to doing it, let me show
| | 03:56 |
you.
So, I'm going to undo that.
| | 03:58 |
Once you get used to doing this, look how
quick this can be.
| | 04:00 |
I can highlight this, do my Cmd+T type in
span class orange, boom done.
| | 04:07 |
And what's really handy about that, and I
know that time I really blazed through it,
| | 04:11 |
but it is just something I'm used to doing.
| | 04:12 |
The more you work with the Quick Tag
Editor, the faster you'll get.
| | 04:16 |
But what I really like about it is that it
exposes the code to you.
| | 04:19 |
So, you can be in Design view and still
work on code at exactly the same time,
| | 04:23 |
even without going into Split view.
So, that's really kind of neat.
| | 04:26 |
The other thing is the Properties
Inspector will sometimes do a lot of this
| | 04:30 |
stuff for you.
But there are going to be times when you
| | 04:32 |
need to edit code in a way that the
Properties Inspector can't do.
| | 04:35 |
And in that case, if you're working in
Design view rather than having to switch
| | 04:39 |
over to Code view, you can quickly
highlight an element or place your cursor
| | 04:43 |
in the right place.
Hit Cmd or Ctrl+T, and you're editing the
| | 04:46 |
code without ever leaving this view.
Now I will say, if you've never used it
| | 04:50 |
before, it's going to take a little
getting used to.
| | 04:53 |
But once you're comfortable using it, the
Quick Tag Editor dramatically speeds up
| | 04:57 |
the process of working on your sites.
| | 04:59 |
| | Collapse this transcript |
|
|
5. Structuring DocumentsCreating basic page structure| 00:00 |
In this chapter, we're going to discuss
using Dreamweaver to add text and
| | 00:04 |
structure to your HTML, and I want to
start with our pages basic structure.
| | 00:08 |
Now, regardless of what type of project
I'm working on every time I start a new
| | 00:12 |
HTML file, I always start with the basic
structural elements first.
| | 00:17 |
Things like headers, footers, sidebars,
main articles.
| | 00:21 |
And I do that before I put any actual
content in my file.
| | 00:24 |
Now there's a couple of reasons for this
but the most important is the ability it
| | 00:28 |
gives me to review my overall documents structure.
| | 00:30 |
And to make sure that semantically the
content is going to relate to each other
| | 00:34 |
the way that I need them to.
And it also allows me to make sure that my
| | 00:37 |
plans for things like page layout are
going to work within the page's basic
| | 00:41 |
structure.
So, we're now going to take a look at a
| | 00:44 |
few ways that you can add these basic
structural elements to your page.
| | 00:48 |
And before we do that, I want to review
the page structure that we're going to be
| | 00:51 |
building.
So, here we have a little wireframe that
| | 00:55 |
kind of shows the basic structural
elements of our index page that we've been
| | 00:59 |
working with.
The very top we have a header with the
| | 01:02 |
class of page header applied to it.
Now, you may remember from earlier in the
| | 01:05 |
course when I discussed this, the
difference between classes and IDs when
| | 01:08 |
they're shown this way.
Classes will have a .syntax or that
| | 01:13 |
period, if you will, whereas IDs are going
to use that pound symbol or octothorpe, if
| | 01:18 |
you will, between the actual element and
the name of the class or ID.
| | 01:21 |
Okay, so we have header.pageHeader which
is header with a class of page header
| | 01:25 |
applied to it.
Now nested inside that, we're going to
| | 01:28 |
have a Nav element with an ID of page Nav.
So, that's going to be the pages
| | 01:32 |
navigation nested within that header.
Directly following the header, we're going
| | 01:37 |
to have four sections.
Three of them with class of spotlight and
| | 01:41 |
one of them with a class of events.
After that, we're going to find, the pages
| | 01:46 |
main content.
That's going to be inside of an article
| | 01:48 |
with an ID of main content.
Directly after that, we have an aside and
| | 01:53 |
that aside is going to have three sections
inside of that.
| | 01:55 |
Nested inside the aside and those sections
are going to have a class of info.
| | 02:00 |
And then finally, at the very bottom of
our content.
| | 02:03 |
We're going to have footer#pageFooter.
So, it's footer with an ID of page footer.
| | 02:07 |
Alright, so essentially we've got 1, 2, 3,
4, 5, 6, 7, 8 main page elements.
| | 02:13 |
And then, we have some nested elements
inside the aside and header.
| | 02:17 |
So, that's the basic page structure that
we're going to be building.
| | 02:20 |
Now, it would be very easy for me to go
into Dreamweaver and go into Code view and
| | 02:24 |
hand code this pretty quick and easy.
But I want to showcase some of the
| | 02:29 |
features that Dreamweaver has when you're
adding structural elements like this to
| | 02:32 |
your page.
So, here we are back inside Dreamweaver,
| | 02:36 |
and I want to focus on the Insert toolbar.
Now, you'll notice that my Insert toolbar
| | 02:40 |
is docked up top in sort of this
horizontal mode.
| | 02:44 |
Yours might be vertical over in the panel doc.
| | 02:46 |
And that's fine, it works either way.
Just make sure that if you have that view
| | 02:50 |
going on.
Make sure you grab the pull-down menu, and
| | 02:52 |
choose Structure.
If you have it horizontally like I do,
| | 02:55 |
make sure you're clicking on the structure tab.
| | 02:57 |
So, this structure tab gives us access to
a lot of common tags, or elements within
| | 03:03 |
HTML, div tags, unordered lists, ordered lists.
| | 03:06 |
But we also have some new additions to this.
| | 03:08 |
And that's these HTML5 sectional elements.
Headers, Navigation, Asides, Articles,
| | 03:15 |
Sections, Footers, things like that.
A lot of the building blocks that we're
| | 03:18 |
going to use for this page.
So, it's kind of neat.
| | 03:20 |
I'm just going to place my cursor
somewhere in the page, in Design view
| | 03:24 |
here, and I'm going to go find the Header element.
| | 03:27 |
Now I'm looking for Header, not Heading,
and they're right beside each other, so
| | 03:31 |
make sure you hover over them and make
sure you're getting the right one.
| | 03:34 |
So, I'm going to choose Header, and I'm
going to click on that now this brings up
| | 03:37 |
a dialog box that says okay, you're going
to place a header on the page.
| | 03:40 |
Where do you want to put it?
And notice that I can choose before
| | 03:43 |
certain tags or after tags, or at the
insertion point itself.
| | 03:47 |
I can also choose classes and IDs if I'm
linked out to an external style sheet all
| | 03:51 |
of the classes.
And IDs in the style sheet will be
| | 03:53 |
available to me here in a pull down menu.
Of course, I don't have one attached.
| | 03:56 |
So, now I just have to type them in.
In this case, for the class, I'm going to
| | 04:00 |
go ahead and use pageHeader, all one word,
lower case p, upper case H.
| | 04:05 |
Now what I really like about this dialog
box is its sort of all-in-one nature.
| | 04:10 |
Not only will it place the element on the
page, but it also gives me the ability to
| | 04:13 |
create a new CSS rule at the same time.
Now, we're not going to get that complex
| | 04:18 |
in this exercise.
But it is nice to know that you can place
| | 04:21 |
an element on the page.
Put it where you want it.
| | 04:23 |
Give it the class or ID attribute you need
or both, frankly.
| | 04:26 |
And then, write a new CSS rule all at the
same time.
| | 04:29 |
That's an extremely powerful feature, and
not a lot of people know that it's
| | 04:32 |
available inside Dreamweaver because they
kind of ignore the insert toolbar.
| | 04:36 |
Alright, I'm going to go ahead and click OK.
| | 04:38 |
And it creates.
And, as a matter of fact, I'm going to go
| | 04:40 |
in Split view so you can kind of see
what's happening here.
| | 04:42 |
I'll collapse these panels down, so that
we can see a little bit more of our code,
| | 04:46 |
and still see what's going on in Design
view here.
| | 04:49 |
So, here we have a new header on the page.
There is its class.
| | 04:52 |
And it places this placeholder content.
Content for class page header goes here.
| | 04:56 |
And that's fine.
There's nothing wrong with that.
| | 04:58 |
Now, you can continue to work like this.
Remember, inside our header, we wanted a
| | 05:02 |
NAV element.
So, I can take my cursor and just place it
| | 05:06 |
directly inside the header element.
Now I can do this either in code view or
| | 05:11 |
Design view.
You'll notice I'm doing it here in Design
| | 05:13 |
view.
Now if I'm focused in Design view, I can
| | 05:15 |
go right back up to my structural elements
and choose Navigation.
| | 05:19 |
As soon as I do that, I'm going to say
that, I want to insert this at an
| | 05:22 |
insertion point.
And I'm going to go ahead and give this an
| | 05:24 |
ID of pageNav.
There we go.
| | 05:28 |
Click OK.
Now, you can see that it created a nested
| | 05:31 |
element inside the header and content for
ID pageNav goes here.
| | 05:35 |
Now, the reason that I like working with
these in Split view is because if I
| | 05:40 |
deselect this, you can see it's really
difficult to tell the visual relationship.
| | 05:44 |
You don't know for example just by
glancing at this that the Nav element is
| | 05:48 |
actually inside the page header element.
I wouldn't know that unless I actually go
| | 05:52 |
to the code and I can see the Nav element
is fully inside of the header element
| | 05:57 |
itself.
So, this is one of those things that's
| | 05:59 |
actually a little bit more helpful to have
the code and the Design view visible at
| | 06:04 |
the same time.
Now, I'm a big fan of this workflow, but
| | 06:07 |
I've got to tell you, in Dreamweaver, it's
kind of broke currently.
| | 06:12 |
Now, this functionality was created before
these HTML5 elements were ever around.
| | 06:17 |
And although they've placed the HTML5
elements inside of this workflow, they
| | 06:22 |
didn't quite implement it all the way.
Let me show you what I mean.
| | 06:25 |
If I place my cursor inside pageNav, okay?
And I go up, and let's say I need the
| | 06:31 |
sections that we were talking about earlier.
| | 06:33 |
If I click on Section to insert a section,
notice that we have the ability, of
| | 06:37 |
course, to place it at the insertion point.
| | 06:38 |
But that's not where I want it.
I actually want it outside of the page
| | 06:41 |
header.
So notice that I have Before tag after the
| | 06:45 |
start, before the end of or after tag.
The ideal here, would be for me to say,
| | 06:50 |
after tag and after my page header.
But guess what?
| | 06:54 |
It doesn't introspect that.
For whatever reason, there are certain
| | 06:57 |
elements that it doesn't pick up on.
Section elements are one of them, header
| | 07:01 |
elements are another.
It picks up on Nav as you can see here,
| | 07:04 |
picks up on articles, so those two it does.
| | 07:07 |
But for the other ones, it doesn't really
work all that well.
| | 07:10 |
So, I'm going to hit Cancel, and I'm going
to take advantage of Code view here.
| | 07:15 |
I'm going to hit Enter and go down the
next line right after header, and place my
| | 07:19 |
cursor right there.
Now again, this workflow still works in
| | 07:22 |
Code view.
So if you don't feel like typing, let's
| | 07:24 |
say you just want to give yourself a break.
| | 07:26 |
You can go right up here and say I want to
insert a section.
| | 07:28 |
It's going to be at the insertion point
because I've created an empty line where I
| | 07:31 |
want this.
In this case, I'm going to go ahead and
| | 07:34 |
give it a class of spotlight.
As soon as I do that, it goes ahead and
| | 07:39 |
places it on the page and I can also see
it visually.
| | 07:42 |
But there's nothing wrong with copying and
pasting, I know that I'm going to use four
| | 07:45 |
of these guys.
Some going to go ahead and copy this in
| | 07:47 |
code and then each time I'm going to just
paste this so that I have four of them.
| | 07:51 |
Now of course, I don't need four with
spotlight, remember the fourth one was
| | 07:56 |
supposed to have a class of events.
So, I'm going to highlight that class and
| | 07:59 |
I'm going to change it to events, and just
so that I'm doing it everywhere.
| | 08:02 |
I'm also going to change it here so that
when I save this and go over to Design
| | 08:07 |
view, it looks okay as well.
So, there's really nothing wrong with
| | 08:11 |
going back and forth between Design view
and Code view and just doing this as
| | 08:15 |
quickly as you can.
If hand coding is your thing, and that's
| | 08:18 |
what you want to do, there's absolutely
nothing wrong with that as well.
| | 08:21 |
Alright, I'm going to continue going here,
I'm going to go right down below this last
| | 08:24 |
section.
And this time, I'm going to insert an
| | 08:27 |
article and you can see that right there.
Again, I'm going to do it at the insertion
| | 08:30 |
point and at this point I'm going to give
it an id of main content.
| | 08:35 |
Now as I mentioned before, there are
certain tags like the Nav element, and the
| | 08:38 |
article element that this workflow
actually picks up on.
| | 08:41 |
So now, if I wanted to go back to design
view, it doesn't really matter where I
| | 08:45 |
click.
I could click anywhere in design view, and
| | 08:47 |
I could still place an aside right after
that article.
| | 08:50 |
I do that by going up and finding the
aside, which is right there.
| | 08:55 |
Sometimes I have to hunt and peck for him
a little bit.
| | 08:58 |
And when I click on that, and this time
instead of at insertion point, I'm going
| | 09:01 |
to say after tag, and then I'm going to
tell it after the article.
| | 09:05 |
Now I wish that worked for everything,
because it would make it so simple to do
| | 09:09 |
this in just Design view.
But unfortunately, it doesn't yet.
| | 09:13 |
Hopefully, it'll update that soon so that
unction alley kind of goes away.
| | 09:16 |
So, in this case, the aside is not getting
any class or ID.
| | 09:19 |
I'm just going to go ahead and click OK.
And there's my aside.
| | 09:23 |
I'm going to get rid of this placeholder content.
| | 09:25 |
If I hit Backspace, it just gets rid of
the content, and the tag itself is left
| | 09:29 |
there.
Now, if I'm just in Design view, I can't
| | 09:32 |
see that.
It looks like it got rid of it altogether,
| | 09:34 |
but if I look in Code view, I can see the
aside is still there.
| | 09:37 |
So again, this is one of the benefits of
working in the sort of Split view, if you
| | 09:40 |
will.
Inside the aside, I need three sections.
| | 09:43 |
So, I'm going to go up and find those
sections again.
| | 09:46 |
This time, I'm going to place the section
right in the assertion point, and I'm
| | 09:49 |
going to give it a class of info.
I need three of these inside my aside.
| | 09:53 |
So, I'm just going to copy them right here
in Code view and just paste two more of
| | 09:57 |
them in.
So copying, and pasting repeating
| | 10:00 |
elements, very quick, and very easy to do,
and then finally I have my footer.
| | 10:05 |
Now, as I mentioned before, it doesn't
pick up on things like sections and
| | 10:08 |
asides, it only picks up on articles and Navs.
| | 10:10 |
But a lot of times, if you have an element
that's the very last element on the page,
| | 10:14 |
you can still work in Design view.
Let me show you what I mean.
| | 10:17 |
Click over here somewhere in Design view,
and then I'm going to go right up and find
| | 10:21 |
my footer and click on that.
And this time, instead of at insertion
| | 10:25 |
point, I'm going to say before the end of
a tag, and it's going to be before the end
| | 10:29 |
of the body tag.
So, the body tag is the very last tag of
| | 10:32 |
all of this visual.
And this way, I'm assured the footer is
| | 10:35 |
going to be right down here at the bottom
of the page, and this time I'm going to
| | 10:38 |
give it an ID of page footer.
I'm going to go ahead and click OK, and
| | 10:43 |
then I'll save my page.
Now if I switch just back to the Design
| | 10:46 |
view, this doesn't look like much, but
I've got every single element on my page
| | 10:49 |
that I need.
I've got my page header, I've got my Nav,
| | 10:52 |
I've got three spotlights to put spotlight
content into.
| | 10:55 |
Actually four, counting the events.
I have the article for all my main
| | 10:58 |
content.
I have an aside that has three sections
| | 11:01 |
for info inside of it, and then I have my
page footer, which corresponds to the
| | 11:05 |
structure you're seeing here.
So, while I had to do a little bit of back
| | 11:09 |
and forth, you can see that adding this
basic structure to your pages in
| | 11:13 |
Dreamweaver isn't that difficult.
I like to go ahead and get this step out
| | 11:17 |
of the way so that now I'm free to go
ahead and place my content directly where
| | 11:21 |
it needs to be placed.
As a matter of fact, a lot of times, I'll
| | 11:24 |
start doing the layout of my page now
before I even put content on there so that
| | 11:28 |
I get the main elements where I need them.
And the main layout where I need them
| | 11:31 |
before content goes into them.
Now, I really do like the fact that Adobe
| | 11:35 |
has added all those new HTML5 section
elements to the Insert panel.
| | 11:40 |
But I really hope they update the insert
dialog box soon, so we can really take
| | 11:44 |
advantage of the efficiency that this work
flow gives us.
| | 11:46 |
| | Collapse this transcript |
| Getting text into Dreamweaver| 00:00 |
Now that we've explored working with the
structural elements of our pages, we need
| | 00:04 |
to turn our attention to the actual
content itself.
| | 00:07 |
Although you can certainly type to your
hearts content inside Dreamweaver, chances
| | 00:12 |
are, most of the copy that you're going to
work with will either be created by you or
| | 00:16 |
another person in a program other than Dreamweaver.
| | 00:19 |
So we're going to start by discussing how
to get that text from those documents into
| | 00:24 |
Dreamweaver.
Now, to do that, I've opened up the
| | 00:27 |
programs.htm file, which you can find in
the 05_02 folder.
| | 00:33 |
And then, also inside the programs
directory, inside that.
| | 00:37 |
Now, I've not only got that file open
here, but also in Microsoft Word, I have
| | 00:44 |
the programs.doc file that's available in
the underscore assets directory.
| | 00:49 |
So, this is the Word document.
And chances are, you're probably going to
| | 00:53 |
be getting content from Word that people
want to place inside your webpages.
| | 00:58 |
You know, and it's actually a pretty easy
way for clients to get to, body copy to
| | 01:02 |
you, and other people that you might be
working with, within your office, that
| | 01:04 |
sort of thing.
So there are a few things that they can do
| | 01:07 |
for you to make life a little bit easier.
Now, one of those things is not saving the
| | 01:11 |
page as Word or HTML document.
That'll create more problems than it'll
| | 01:15 |
solve.
But I'm going to show you a few tricks
| | 01:17 |
that can make life a little bit easier for
you if you are moving text from Word into
| | 01:21 |
Dreamweaver.
The first thing I want to do is I'm just
| | 01:24 |
going to select all of the text on my page
and I'm going to copy it.
| | 01:27 |
Okay?
So pretty standard.
| | 01:28 |
Copy and paste, right?
But Dreamweaver has some workflows built
| | 01:32 |
into it that make this copy and paste
workflow a lot more efficient.
| | 01:36 |
Okay.
So, I'm going to go back into Dreamweaver
| | 01:39 |
and I'm going to place my cursor here in
Design view in sort of this empty area
| | 01:42 |
below the header because this is where I
want my main content to go.
| | 01:45 |
I'm going to go ahead and paste that,
which is either Command or Control+V.
| | 01:50 |
And when I do that, hmm, well, that
doesn't look good at all.
| | 01:56 |
If I go back to my Word document, I had
all this structure built into it and
| | 02:00 |
everything was formatted.
Maybe not visually the way that I want,
| | 02:03 |
but at least structurally the way I wanted it.
| | 02:06 |
But when I pasted inside Dreamweaver it
just came in as just text.
| | 02:10 |
(INAUDIBLE).
Now that's hardly what I wanted and I'm
| | 02:13 |
betting that if you did this along with me
that you didn't see this.
| | 02:16 |
Now the reason for that is Dreamweaver has
a set of preferences that control how
| | 02:21 |
pasted text into the page is formatted, alright?
| | 02:24 |
So, I'm going to undo that and I want you
to undo that along with me.
| | 02:27 |
And I'm going to go up to my Dreamweaver
preferences, again on the PC you would go
| | 02:31 |
to Edit > Prefferences.
And I want to go right here to Copy and
| | 02:35 |
Paste.
So I had text only selected, I doubt you
| | 02:38 |
did because it's not the default.
But text only gives you just that, only
| | 02:42 |
text, no structure, no formatting.
Now there are going to be times when you
| | 02:45 |
want that option, so it's nice to know
it's available to you.
| | 02:48 |
Let's take a look at some of the other
things we have here.
| | 02:50 |
We also have text with structure.
And that would give us not only the text
| | 02:53 |
itself, but structural elements like
paragraphs, lists, tables, things like
| | 02:58 |
that.
Then we also have text with structure plus
| | 03:00 |
basic formatting.
That's all the above plus things like bold
| | 03:04 |
and italic.
And then finally we have this one.
| | 03:06 |
And I'm going to try this one.
Text with structure plus full formatting.
| | 03:10 |
That's not only bold and italics and all
that stuff.
| | 03:12 |
But also the styles that somebody may have
style detected with inside Word or another
| | 03:16 |
program.
If it understands them it'll bring those
| | 03:19 |
in as well.
Now, when you bring in text with
| | 03:21 |
formatting like this, you also get a few
options down here.
| | 03:24 |
For example, retaining line breaks.
If somebody hits Enter they get a new
| | 03:27 |
paragraph inside Word, but if they hold
down the Shift key and hit Enter, they get
| | 03:30 |
a line break.
It's very handy for creating addresses,
| | 03:33 |
for example, where you have a line break
but you don't want a paragraph, so you can
| | 03:36 |
retain those.
And then, we also have this cleanup word
| | 03:38 |
paragraph spacing, which I really love
because it's very common for people in
| | 03:42 |
word to hit Return twice to get space
between their paragraphs rather than
| | 03:46 |
formatting the spaces.
And if you leave that, you end up with a
| | 03:50 |
lot of empty paragraphs in your
Dreamweaver documents, or your HTML files.
| | 03:54 |
So I want to turn that off.
You can also convert smart quotes to
| | 03:57 |
straight quotes if you like.
That's going to give you the pipes
| | 04:00 |
characters instead of the actual encoded
smart quotes.
| | 04:03 |
So I'm not going to choose that.
Alright, so I'm going to go ahead and
| | 04:05 |
click OK.
And then I'm going to go back to that same
| | 04:09 |
area.
And I'm going to paste again.
| | 04:11 |
So I didn't need to copy it again.
I just needed to paste it.
| | 04:14 |
Now this time when I did that, notice that
not only did I get structure.
| | 04:17 |
And if I go to split screen view here and
minimize my panels and icons, I can see
| | 04:23 |
that the structure came over.
Here's my paragraph.
| | 04:25 |
Here's some headings.
Here's another paragraph.
| | 04:28 |
But in addition to that, I got this weird formatting.
| | 04:31 |
I got this sort of gold color for my text
and I've got these weird things like MSO
| | 04:36 |
normal.
So those were the styles that were applied
| | 04:39 |
inside Word.
Now, I really didn't want those, so I'm,
| | 04:42 |
again, going to go back and undo that.
And this time, I'm going to go back to my
| | 04:46 |
Preferences.
And I'm just going to choose Text with
| | 04:50 |
structure plus basic formatting.
So bold, italic, plus all the structural
| | 04:54 |
elements.
Again, I'm going to click OK.
| | 04:57 |
Make sure I'm in design view.
Click where I want the copy, and I'll
| | 05:00 |
paste it again.
So notice, we didn't change, really,
| | 05:04 |
copying the text.
We only copied it once.
| | 05:07 |
But based on all the preferences that we
selected, we got the copy formatted
| | 05:11 |
exactly the way we wanted to.
Now how did all this work?
| | 05:14 |
Well if I go into Code view or Split view,
you'll notice that academic programs came
| | 05:19 |
in with an H1.
And the rest of them came in with their
| | 05:22 |
paragraphs or H2.
That sort of thing.
| | 05:25 |
Now some of the text like the names of the
chairs, for example, came in with the
| | 05:29 |
strong element around it, which now means
they're bolded.
| | 05:34 |
And we have things like headings that go
all the way down to an H3.
| | 05:38 |
Okay, so the formatting of them is being
done by the CSS that we have for our site.
| | 05:42 |
So that's no great mystery.
But what you might be curious about is,
| | 05:45 |
how did DreamWeaver know which headings
that you wanted and where you wanted
| | 05:49 |
paragraphs, that sort of thing.
How did it know?
| | 05:52 |
Well, if I go back into Word it's actually
fairly simple.
| | 05:54 |
If I click inside of Academic Programs,
for example, you can see that I've applied
| | 05:57 |
the style of header one to it.
If I click in Academic Departments it has
| | 06:01 |
a Heading 2.
If I go down to Animation, it has a
| | 06:05 |
Heading 3.
So those sort of default formatting styles
| | 06:08 |
inside Word.
Dreamweaver's going to recognize those and
| | 06:12 |
use those inside your documents.
So when you're creating a document in
| | 06:15 |
Word, if you can use these structural
styles like Heading 1, Heading 2, Heading
| | 06:20 |
3, Dreamweaver is going to take care of
the paragraphs for you, so that's just
| | 06:23 |
normal body copy.
But if you can do that in any bold and
| | 06:27 |
italics that you apply will come in a
strong tag of emphasis tags.
| | 06:30 |
If you can either do that or you can train
your co-workers or clients to do that for
| | 06:34 |
you, you're going to save yourself a lot
of work because all those structural
| | 06:38 |
elements are going to come over into Dreamweaver.
| | 06:39 |
So, it's kind of nice that you can bring
over the structure as well as the text.
| | 06:44 |
Now, if somebody gives you just a regular
dot, txt or text file, you can open that
| | 06:49 |
directly up inside Dreamweaver and copy
and paste, but be aware that the structure
| | 06:52 |
of the file isn't going to come through.
You're just going to get the text and then
| | 06:55 |
you'll have to structure it yourself after
you paste the text in.
| | 06:59 |
Now, for the most part, this copying and
pasting workflow that I'm showing you here
| | 07:02 |
is going to work just fine within
Dreamweaver, whenever you need to bring
| | 07:06 |
text in from Word.
However, there is yet another way to bring
| | 07:10 |
text into Dreamweaver from Word, and I'm
going to take a look at that in our next
| | 07:14 |
exercise.
| | 07:15 |
| | Collapse this transcript |
| Importing Word documents| 00:00 |
In an effort to create efficient workflows.
| | 00:02 |
Adobe has integrated Dreamweaver with many
other programs that you or team members
| | 00:07 |
that you work with are going to be likely
to use.
| | 00:09 |
Now most integration is understandably
within other Adobe products, like
| | 00:13 |
Dreamweaver and Photoshop, but some other
programs like Word.
| | 00:17 |
Featured differing levels of integration
as well.
| | 00:20 |
Now, (LAUGH) the astute amongst you, have
noticed that my interface doesn't quite
| | 00:25 |
look the way it did in the previous exercise.
| | 00:27 |
And you're probably wait a minute, wait a
minute, wait a minute.
| | 00:29 |
He just switched to a PC.
What's going on here?
| | 00:32 |
Well, I don't often have to break bad news
to those of you that work on Macs.
| | 00:37 |
But this is going to be one of those times.
| | 00:40 |
The integration between Word and
Dreamweaver that I'm about to show you
| | 00:43 |
only works on the PC or the Windows
version if you will of Dreamweaver.
| | 00:48 |
Still for those of you, the folks on Mac.
don't just like exit out of this movie
| | 00:51 |
right now keep watching because there is
one option in the following example that
| | 00:56 |
does work for you.
And its something that you might want to
| | 00:58 |
take advantage of later on.
So I have the programs that HTM file
| | 01:02 |
opened from the 05_03 directory.
And you'll notice I also have my files
| | 01:07 |
panel open and I've got programs.doc here
opened up as well.
| | 01:12 |
Now just to kind of show you what I'm
starting off from, I'm going to over to
| | 01:15 |
Edit and choose Preferences,on a Mac I'd
be doing Dreamweaver Preferences.
| | 01:19 |
And I'm going to go to my Copy and Paste
and I want to make sure that I'm going to
| | 01:24 |
be bringing in text with a structure plus
the basic formatting.
| | 01:28 |
I'm also going to retain any line breaks,
and clean up any empty paragraphs.
| | 01:32 |
Alright, I'm going to go ahead and click OK.
| | 01:33 |
Now, we did this last movie, right?
We opened it up in Word, we did a Copy, we
| | 01:36 |
did a Paste, and it shows up right on the screen.
| | 01:39 |
Well, one of the great things on Windows
machines is I don't even have to copy and
| | 01:43 |
paste.
I can just go right over here to my
| | 01:45 |
document, grab it.
If from the Files panel drag it to the
| | 01:49 |
page where I want it and when I release
notice that Dreamweaver still gives me
| | 01:53 |
those options.
So even if I just set them in my
| | 01:55 |
preference doesn't really matter because I
could change them here if I wanted to.
| | 01:59 |
Notice that I don't get all the options
that had before.
| | 02:02 |
I still get the clean up paragraph forward
spacing but I don't get the option to
| | 02:05 |
retain line break.
And that's one of reasons why you might
| | 02:07 |
want to go in and set that as a preference earlier.
| | 02:10 |
So right now I'm saying okay, yeah, go
ahead and give me the contents of the
| | 02:13 |
entire document.
Now that is one thing for you to keep in
| | 02:16 |
mind, this is all or nothing.
You're getting everything that that
| | 02:19 |
document has.
If it's a 500 page essay on War and Peace,
| | 02:23 |
you may not want that.
Alright so, Text with structure plus basic
| | 02:27 |
formatting, I'm going to click OK.
And just like that, incomes my word
| | 02:33 |
document formatted exactly the way I want
it structurally, and of course my CSS has
| | 02:37 |
taking care of the rest.
Now, I don't know if you noticed this or
| | 02:40 |
not, but there was another option.
Bulges do this really quickly, I'm going
| | 02:46 |
to just go down to the bottom of the page
and create and say would you like a print
| | 02:54 |
version of this?
Now, (LAUGH), this doesn't exactly lend
| | 02:59 |
itself to that.
But a lot of times, you want to give your
| | 03:02 |
users the option of clicking a link, and
then downloading a document.
| | 03:05 |
And typically, that's going to be a PDF file.
| | 03:07 |
But if you have a Word document available,
you might want to give them that option as
| | 03:10 |
well.
Well, this is where you Mac folks can come
| | 03:14 |
right back in.
If you were to do the same thing, to grab
| | 03:17 |
this word document and drag it to the page.
| | 03:19 |
Instead of seeing all of this you only see
this, Create a link.
| | 03:24 |
If I click Create a link and click OK.
Then right there it becomes a link to that
| | 03:31 |
document.
Now it links it to the folder that its in
| | 03:34 |
so if later when I upload my site to the
remote server the Live Web Server.
| | 03:39 |
This has to go along with it in exactly
the same directory with exactly the same
| | 03:43 |
relationship to this file, or that link
won't work.
| | 03:46 |
Now, by default, it just gives you the
name of the file.
| | 03:48 |
But you could replace that with click to
download, or something like that.
| | 03:53 |
And there is your link to the actual Word
document itself.
| | 03:57 |
Now, on the Mac if you drag over the Word
document, that's the only option you're
| | 04:01 |
going to get, but on the PC, you can
choose between those two options.
| | 04:05 |
Yup, there you go.
I mean really what is easier dragging and
| | 04:08 |
dropping right?
You know, I'm sorry for you Mac guys it
| | 04:10 |
doesn't work on there.
But, do take note of the fact that if you
| | 04:13 |
want to link to an external word file for
your users, then that is as easy as
| | 04:17 |
dragging and dropping as well.
| | 04:19 |
| | Collapse this transcript |
| Adding structure to text| 00:00 |
When authoring a new page one of the first
tasks that you're going to need to perform
| | 00:04 |
is to create the basic structure of your
pages HTML content.
| | 00:09 |
Now, although we've seen how to import
text from programs like Word and retain
| | 00:13 |
the default structure that you might
establish there.
| | 00:16 |
Most of the time, you're going to need to
structure the content yourself.
| | 00:19 |
Thankfully Dreamweaver makes it incredibly
easy to add basic structure to your HTML
| | 00:24 |
content.
Now in this exercise, we're going to take
| | 00:26 |
our program file, which is you can see here.
| | 00:28 |
Has been kind of stripped down to bare
bones and add a little meaning to the text
| | 00:33 |
by formatting it within specific tags.
Now, keep in mind in this exercise, we're
| | 00:38 |
just focusing on the main content region
of the page, not on the layout, or the
| | 00:42 |
secondary areas or anything like that.
So, that's why you're only seeing just the
| | 00:45 |
text that we have here.
Alright, so I've got the programs.htm file
| | 00:50 |
open from the 05_04 directory.
And if I just scroll through this you can
| | 00:56 |
kind of see all of the content that we
need on that page.
| | 00:59 |
But there's no real structure or at least
it doesn't appear that there's any
| | 01:03 |
structure.
In reality, there is structure going on
| | 01:05 |
here.
If I click inside one of these passages of
| | 01:08 |
text, and I look at the text selector down
here, I can see that these are in
| | 01:12 |
paragraphs.
So, you can sort of think of paragraphs as
| | 01:16 |
the default element, or default tag of not
of just Dreamweaver but all of HTML.
| | 01:21 |
If in Dreamweaver, let's say I hit Return
and begin typing again, you know, whatever
| | 01:26 |
it automatically creates a new paragraph
for me.
| | 01:29 |
So, anytime that you're typing and you hit
Return, you get a brand new paragraph
| | 01:33 |
which is a very quick and easy way to
enter content into Dreamweaver.
| | 01:37 |
Since paragraphs are the elements that
you're going to be using the most.
| | 01:40 |
However, its not always what you need.
And even though we can use the tag
| | 01:43 |
selector to kind of see what's going on, I
really do recommend viewing both design
| | 01:48 |
and Code view while you do this.
So, I'm going to minimize my panels over
| | 01:52 |
here down to icons.
And I'm going to click on Split so that I
| | 01:56 |
can turn Split view on.
Now, there's a couple of reasons for doing
| | 01:58 |
that.
One, when you're editing your content and
| | 02:01 |
structuring it, you want to double-check
the code and make sure you're getting what
| | 02:04 |
you think you're getting.
The second thing is, you really shouldn't
| | 02:07 |
make any assumptions.
You can see by clicking through these
| | 02:10 |
different passages of text, they're all in paragraphs.
| | 02:13 |
And it might make it very easy for you to
look at all this text and think, well
| | 02:16 |
okay, they're all in paragraphs, but you
can't assume that.
| | 02:19 |
Notice that if I click on the Roux Academy
of Art and Design, right up here, up top,
| | 02:23 |
it's not in any element whatsoever.
It is not within a tag.
| | 02:27 |
So, just because it appears on its own
line and Design view, don't assume that
| | 02:31 |
it's in a tag.
Now, HTML stands for Hyper Text Mark-up
| | 02:35 |
Language.
Your text needs to be marked up in order
| | 02:38 |
for browsers and user agents to determine
exactly what type of content it is.
| | 02:42 |
Is it a heading?
Is it a paragraph?
| | 02:44 |
If you don't wrap it in an element, it
doesn't know.
| | 02:47 |
Now, most user agents will, you know,
treat something, if it's not in an
| | 02:51 |
element, as if it were in a paragraph, but
that's really not a best practice.
| | 02:55 |
All right, so let's take a look at how
Dreamweaver's Properties Inspector can
| | 02:59 |
make it extremely simple for us to give
basic structure to our elements.
| | 03:03 |
All right, so I'm just, in Design view,
going to click right here in this Roux
| | 03:07 |
Academy of Art and Design, that first line.
| | 03:09 |
I don't need to highlight the text, which
is really nice in terms of formatting.
| | 03:13 |
As long as you are in a contiguous passage
of text, Dreamweaver will go ahead and
| | 03:18 |
wrap the content in whatever element you
tell it to.
| | 03:20 |
Now, there's also a clue going on the in
the properties inspector that there's no
| | 03:25 |
formatting here.
You can see in the HTML properties for
| | 03:29 |
format right now it says none.
If I grab that pull-down menu, I can
| | 03:33 |
choose paragraph any one of my headings or pre-formatted.
| | 03:37 |
Alright, so I want this to be a heading 1.
This is the main heading of my page it's
| | 03:41 |
the very first thing people are going to encounter.
| | 03:43 |
So, I'm just going to go ahead and use
heading one, and now not only is the text
| | 03:46 |
changed a little bit of formatting.
But the really important thing is over
| | 03:50 |
here on the left-hand side, in the Code
view, it's wrapped in an H1 tag.
| | 03:54 |
Now I'm not concerned at all about what
the text looks like.
| | 03:57 |
I'm not concerned about its size.
I'm not concerned about color, boldness or
| | 04:01 |
anything like that.
All of that I control through CSS styles.
| | 04:04 |
What I'm concerned about is at what format
is it in, in this case, we have an H1
| | 04:09 |
here.
Okay, now, next up, I'm going to click
| | 04:11 |
inside Academic Programs.
And once again, I'm going to go to Edit
| | 04:14 |
Format, and I'm going to choose H1 here as well.
| | 04:18 |
Now, this may go counter to what some of
you folks have read.
| | 04:22 |
There are plenty of tutorials out there
that you tell you only use one H1 per
| | 04:25 |
page, because Google gets really mad if
you don't.
| | 04:28 |
Now, to be honest with you, HTML 5 has
some semantic rules that allow you to use
| | 04:32 |
more than one H1.
As a matter of fact, every sectional
| | 04:36 |
element inside of HTML 5 can include its
own heading hierarchy, which means you can
| | 04:41 |
have as many H1s as you want.
Now, even with that, most people are still
| | 04:46 |
sticking to the one H1 per page.
And if that's the way you want to do it,
| | 04:50 |
then that's fine.
There's nothing wrong with that.
| | 04:52 |
But in this case, the Roux Academy of Art
and Design, that heading one will be up in
| | 04:56 |
the page header.
Whereas, Academic Programs will be the
| | 04:58 |
heading one in the main content.
So, I kind of like to mix and match them
| | 05:02 |
sometimes.
Sometimes, I'll only do one H1 per page.
| | 05:05 |
Sometimes, if I feel like content's
important enough, I'll give it another H1
| | 05:08 |
as well.
A lot of purists out there will disagree
| | 05:10 |
with me about that, and that's fine.
That's part of the beauty of web design.
| | 05:14 |
You can kind of make your own decision up
in terms of how you want structure
| | 05:18 |
headings as well.
Alright, we have got other headings that
| | 05:20 |
need to be done as well.
And I'm just going to stay in Design view,
| | 05:23 |
I am going to scroll and for Academic Departments.
| | 05:26 |
I'm going to select that and go down and
make that Heading 2.
| | 05:31 |
For animation, I'm going to make that
heading three.
| | 05:36 |
And as I scroll through, I'm going to take
Fashion and Textile Design, give that a
| | 05:40 |
Heading 3.
Fine Art and Visual Culture is going to be
| | 05:44 |
a Heading 3.
And notice how easy Dreamweaver makes
| | 05:48 |
this.
I mean, you're literally just clicking,
| | 05:50 |
grabbing from a menu and choosing Heading 3.
| | 05:53 |
And there's also some keyboard shortcuts
that can help you with this as well.
| | 05:56 |
So, if you go in and take a look at your
keyboard shortcuts, you can find the
| | 06:00 |
keyboard shortcuts for those formattings, too.
| | 06:02 |
because in addition to using the
Properties Inspector, and I'm just going
| | 06:04 |
to show you this real quick.
I can click inside Academic Links right
| | 06:07 |
there, and I want this one to be in H2.
So, I can go up to Format Paragraph format
| | 06:12 |
Heading 2, and you can see the keyboard
shortcut for that.
| | 06:16 |
It's Ctrl or Cmd+2.
So if I just click inside of it, I can do
| | 06:20 |
Cmd+2.
Boom, it's a heading, too.
| | 06:22 |
It's much faster.
So, if you learn those keyboard shortcuts,
| | 06:25 |
you can literally click in a line of text.
Hit a keyboard shortcut, and it formats
| | 06:29 |
exactly the way that you want it to, which
is really, really nice.
| | 06:32 |
Now, the other things that we have going
on here are the undergraduate degrees and
| | 06:35 |
things like that.
We're going to format those in just a
| | 06:38 |
little bit using lists.
But before we get into that, there's some
| | 06:41 |
additional formatting that I want to do here.
| | 06:43 |
Each department chair, I would like those
to be bold.
| | 06:47 |
So if I highlight one of these, and I go
down to my Properties Inspector, I can
| | 06:51 |
choose Bold.
Now, what's interesting about this is
| | 06:54 |
instead of using the b tag, I'm getting a
strong tag.
| | 06:58 |
Now the bold and italic tag, those were
actually removed from HTML 4.
| | 07:02 |
Or I should say, they were removed from
XHTML 1 because they were deemed
| | 07:06 |
presentational tags.
The thinking here is that HTML should
| | 07:09 |
really identify structure.
It should have a semantic meaning behind
| | 07:13 |
the code itself, but the argument that a
lot of people used was okay.
| | 07:17 |
So, what meaning does strong have that
bold doesn't?
| | 07:20 |
And the answer to that well, it's strongly
emphasized, and the response to that was
| | 07:25 |
and.
So, bold is still in though you can use
| | 07:28 |
bold now to back an HTML file is, I guess
is where I'm going with this.
| | 07:32 |
You get to choose which of the two tags
you want to use.
| | 07:35 |
Strong and emphasis or bold and italic.
If you go up to your Preferences and again
| | 07:39 |
you're going to go Dreamweaver
Preferences, or you can go to Edit
| | 07:42 |
Preferences and I go to General.
Right here, we have a check box that says
| | 07:46 |
use strong and em in place of bold and italics.
| | 07:49 |
If you'd rather use the old standby bold
and italics instead of strong and em, you
| | 07:53 |
can just deselect that.
And then, anytime you choose bold or
| | 07:56 |
italics, you're going to get those tags
instead of the strong tags or the italics
| | 08:00 |
tags.
Okay, so just take a moment, go in and
| | 08:03 |
highlight each one of these names.
Be very careful when you do it and then
| | 08:06 |
click Bold.
Do remember you do have your menu up top
| | 08:10 |
so you can highlight the text and you can
go up and choose Format > HTML Style >
| | 08:14 |
Bold.
Notice that we have some keyboard
| | 08:16 |
shortcuts there, Cmd or Ctrl+B and Cmd or Ctrl+I.
| | 08:19 |
And I really do like using those keyboard shortcuts.
| | 08:22 |
So, if I highlight the text, I can just
say Cmd+B, then I get my strong tag and I
| | 08:27 |
can just do that all the way up.
So really, it's personal preference.
| | 08:30 |
It's whatever you like the best.
Just go ahead and go up and grab all of
| | 08:35 |
those.
Now, one of the things that I didn't talk
| | 08:37 |
about earlier was this last setting when
you're formatting pre-formatted.
| | 08:40 |
Now, I get a lot of questions about that.
When I go out and speak at conferences and
| | 08:44 |
thing people were like, what is that
pre-formatted option?
| | 08:46 |
Well, what that's going to do is it would
wrap the content in a pretag.
| | 08:50 |
And the pretag or preformatted tag, most
browsers are going to render that text in
| | 08:56 |
a mono font and retain any line breaks or
white space that you have within the text
| | 09:01 |
itself.
Most of the time, HTML will ignore white
| | 09:03 |
spaces past like, one white space character.
| | 09:06 |
So, that's a really good tag to use, or
element to use, for displaying things like
| | 09:10 |
computer code or scripting examples.
And that's primarily what people are going
| | 09:13 |
to use it for.
Alright, so let me save this.
| | 09:17 |
And if we preview this in our browser,
it's not going to look great.
| | 09:22 |
But at least the underlying structure of
the page is there.
| | 09:25 |
So, our page is on its way.
But, we're not structurally finished yet.
| | 09:28 |
We still have this little area down here,
for example.
| | 09:31 |
So next up, we're going to explore another
fundamental structural element as we begin
| | 09:34 |
working with lists.
| | 09:36 |
| | Collapse this transcript |
| Creating lists| 00:00 |
Most people think of lists as simply a way
of displaying related items in a numbered
| | 00:05 |
or unordered listing.
Now, that is certainly true, but lists can
| | 00:08 |
do so much more than that.
Lists allow you to group related content
| | 00:13 |
together, and then structure that content
in a way that denotes importance, rank, or
| | 00:18 |
similarity.
When used for navigation, lists give you a
| | 00:22 |
way to group links together so that user
agents know that all of those links are
| | 00:26 |
related.
Now, HTML offers us three main types of
| | 00:30 |
lists, ordered, unordered, and definition list.
| | 00:34 |
Now ordered and unordered lists are the
two most common, so we're going to take a
| | 00:37 |
look at those first.
Now to do this, I'm opened up the
| | 00:40 |
programs.html file from the 05_05 directory.
| | 00:44 |
But really, we're just kind of picking up
where we left off in the last exercise.
| | 00:48 |
So, if you still have that file open,
that's fine.
| | 00:50 |
It'll still work just fine.
Now, I have scrolled down towards the
| | 00:54 |
bottom of the page where I see some
academic links.
| | 00:56 |
Now each one of these, undergraduate
degrees, BA Programs, all that stuff.
| | 01:01 |
These guys are all kind of right here in
individual paragraphs.
| | 01:05 |
Now, that's actually perfect for me
because it's going to allow me to format
| | 01:09 |
as, this as a list extremely simply.
I'll be honest with you, in terms of
| | 01:13 |
hand-coding, lists are a rank right up
there in the chores that I don't really
| | 01:18 |
want to do.
Having to hand code a list, especially a
| | 01:21 |
list of links is very very tedious.
So, being able to do this visually inside
| | 01:25 |
Dreamweaver is actually really awesome.
So, I'm going to start with the first
| | 01:29 |
item, which is undergraduate degrees, and
I'm going to highlight all the way down
| | 01:32 |
through academic calender.
I want to make sure I get all of those.
| | 01:34 |
And then, using the Properties Inspector,
you know, I'm first going to talk about
| | 01:38 |
ordered list so I'm going to go ahead and
click that icon first.
| | 01:41 |
As soon as I do that in the Design view, I
can see that starting with undergraduate
| | 01:45 |
degrees, I get list item number 1.
And I go all the way down to Academic
| | 01:49 |
Calendar, which is list item 13.
Now, it's important for you to understand
| | 01:53 |
how HTML structures list.
So, I'm in Split view, and I want to click
| | 01:58 |
over and take a closer look at the list itself.
| | 02:01 |
Now, most lists are structured in a very
similar fashion.
| | 02:05 |
You'll notice we have an opening list tag,
which in this case is OL, for ordered
| | 02:08 |
list.
And then, each of the items in that list
| | 02:11 |
are surrounded with an LI element, or list item.
| | 02:14 |
So we have our ordered list, and then we
have the individual list items inside of
| | 02:19 |
them.
At the end of the list, we have a closing
| | 02:21 |
ordered list tag right there, perfect.
Now there are options I can set for these
| | 02:26 |
lists.
Let's say I click inside one of these list
| | 02:28 |
items, this undergraduate degrees, on the
Properties Inspector.
| | 02:31 |
I had this little button that says List
Item, by clicking on that is going to
| | 02:35 |
bring up the list properties itself.
Now this is a numbered list, but one of
| | 02:39 |
the things that you can do when using this
menu is you can choose what style of
| | 02:44 |
numbers you want to use.
Let's say you want to use Roman numerals
| | 02:46 |
small.
No problem.
| | 02:47 |
Let's say you want to start the count at,
say, four.
| | 02:50 |
Again, no problem.
When I click OK, you can see it starts
| | 02:53 |
there at four and goes all the way through.
| | 02:55 |
Now, that's probably not what you want to
do, so you can remove those pretty simply.
| | 02:59 |
But, let's take a look over in the code
view to see exactly what it did for us.
| | 03:03 |
Notice that those two things added an
attribute to my ordered list, in this
| | 03:07 |
case, start of four and a type of Roman
letter I.
| | 03:10 |
Okay, I'm going to get rid of those attributes.
| | 03:13 |
And in fact, I want to change the list
type entirely.
| | 03:16 |
Now I can certainly use the Properties
Inspector to do that, but working with
| | 03:19 |
code is pretty simple, too.
I'm going to change that ordered list by
| | 03:23 |
highlighting the O, and I'm going to
change that to an unordered list by simply
| | 03:27 |
giving it a U.
Now, if you're going to do this along with
| | 03:29 |
me in code, you have to remember to not
only do the opening tag, right here.
| | 03:32 |
But you have to remember to go down to the
closing tag, and changing that O to a U as
| | 03:37 |
well.
So really, that's the only difference
| | 03:40 |
between an ordered list, and an unordered
list inside HTML.
| | 03:43 |
It's an ol or a ul.
The rest of the structure, these list
| | 03:48 |
items, remain exactly the same.
And in fact, if I click back over here in
| | 03:51 |
Design view, notice that it will refresh
that for me.
| | 03:54 |
And I'll go ahead and get a bulleted list
or unordered list for my items.
| | 03:58 |
Now as you can probably tell by looking at
the text in the list, it's not structured
| | 04:03 |
probably the way that we want it to.
At the moment, I've got some categories
| | 04:07 |
here.
Undergraduate degrees and graduate degree
| | 04:10 |
programs.
After that, I have just some regular
| | 04:13 |
elements, but I would like to be nested.
So, that's really easy to do.
| | 04:17 |
If I highlight the elements that I want to
nest, and then I go right down here to my
| | 04:21 |
Properties Inspector and choose Indent.
Notice that now I get nested lists, and
| | 04:25 |
I'm going to do that for both of these,
the MFA and MS programs.
| | 04:29 |
Okay, so now I have my main list items
under graduate degrees, graduate degrees.
| | 04:34 |
And then, the rest of these guys.
And then, each of these have in turn their
| | 04:38 |
nested item.
Now, one of the things that I love about
| | 04:40 |
the fact that I can do do this visually is
not only it's quicker.
| | 04:43 |
But if you're not familiar with doing it,
or if you're not familiar with the actual
| | 04:46 |
structure of a nested list, it's very easy
to go over here to my code.
| | 04:50 |
And see what that structure is.
And it's also very instructive, so this is
| | 04:54 |
a great way of learning.
Notice that when you have a nested list,
| | 04:58 |
here I have another unordered list, for example.
| | 05:00 |
Notice that that entire unordered list is
inside of the related list item.
| | 05:05 |
Now, it'd be very tempting for you if you
were doing this for the first time by
| | 05:09 |
hand, to instead do this.
Have the undergraduate degrees, and then
| | 05:15 |
put the unordered list after it.
But in fact, that would not be correct, in
| | 05:19 |
terms of HTML.
That would be an error in your code.
| | 05:22 |
The reason for that is because to every
brwoser that parses this.
| | 05:26 |
It would think, okay, you've opened up an
unordered list, and then you have one list
| | 05:29 |
item, and then you forgot to close it.
So, most browsers, especially the ones
| | 05:34 |
that, you know, are rather forgiving about
syntax errors in HTML, would instead close
| | 05:39 |
the first list and open up a brand new one.
| | 05:41 |
So, instead of getting a nested list, you
get two lists back to back.
| | 05:44 |
So, you've got to remember to structure
that correctly.
| | 05:47 |
Now again, if you're not familiar with how
to do that, here's the nice thing.
| | 05:50 |
Dreamweaver does it for you.
All right, I'm going to go ahead and save
| | 05:53 |
that, preview that in my browser.
And I'm just going to check to make sure
| | 05:57 |
the list is displaying the way that I want
it to.
| | 06:00 |
So, you know, creating and displaying
those lists inside of Dreamweaver, as you
| | 06:03 |
saw, pretty simple to do, and it's really similar.
| | 06:06 |
If you use Word a lot, or those types of
word processing programs, it's pretty
| | 06:09 |
similar to that.
The important thing to remember though,
| | 06:12 |
and the thing that I really want you to
focus on here, is that any changes that
| | 06:16 |
you make to that list.
And really any other text in Dreamweaver
| | 06:18 |
for that matter is in reality actually
generating and modifying code, the
| | 06:23 |
underlying structure for all of your content.
| | 06:26 |
Now, as such, you really want to make sure
that you understand how this code should
| | 06:30 |
be structured in the first place, in case
you ever need to go in and modify it
| | 06:34 |
yourself.
I also highly recommend monitoring the
| | 06:37 |
code as you create it, as well.
Just as we were doing there with a Split
| | 06:40 |
view up, to ensure that you're formatting
your code correctly as you're generating
| | 06:45 |
it.
| | 06:45 |
| | Collapse this transcript |
| Creating definition lists| 00:00 |
In our last exercise we focused on two of
the most common type of lists that you are
| | 00:04 |
going to be using for your projects.
Which would be the ordered and the
| | 00:07 |
unordered list.
Well, in this exercise I want to talk
| | 00:10 |
about a third type of list, and that would
be the Definition List.
| | 00:15 |
Now a definition list might not be used as
widely as ordered and unordered lists.
| | 00:20 |
But they do offer us an extremely powerful
way to organize structure and group
| | 00:26 |
contents.
So I want to talk about not only the list
| | 00:27 |
itself and kind of how it's structured.
But, what some of the possible uses for it
| | 00:32 |
might be as well.
And so to kind of experiment with the
| | 00:35 |
definition list, I'm going to work on a
new file here.
| | 00:37 |
So, this one is the Alumni.htm file.
You can find this in the 05_06/alumni.
| | 00:44 |
So, it's in that one as well.
So, we're not working on programs this
| | 00:49 |
time.
Now, this page is going to look a little
| | 00:52 |
different than some of the pages that
we've been working on.
| | 00:54 |
The reason for that is this is a Fluid
Grid Layout.
| | 00:57 |
You may remember from earlier in the title.
| | 00:59 |
We talked about that when you go to File >
New and you choose Fluid Grid Layout,
| | 01:03 |
well, this is what you get.
And you get these sort of columns on the
| | 01:07 |
page that allow you to take an element
like this DIV tag for example here.
| | 01:11 |
I'm just going to show you this real
quick, because this is not the focus of
| | 01:14 |
this exercise.
But I could resize this DIV to a smaller
| | 01:17 |
size.
where then I could go back in.
| | 01:20 |
And notice that the other parts of the
layout, you know, change size to sort of
| | 01:23 |
take advantage of that.
But the real benefit of this particular
| | 01:27 |
technique is if I go out to my browser,
you can see that this Fluid Layout does
| | 01:32 |
just that.
It responds to me resizing the screen, and
| | 01:36 |
even changes the layout based on screen size.
| | 01:39 |
So, that makes it easier for you to create
layouts that work on tablets and phones
| | 01:43 |
and things like that.
Again fluid grid's pretty cool its not a
| | 01:47 |
workflow that a lot of people are going to
embrace simply because its a little
| | 01:50 |
restrictive.
But its a nice way maybe even to learn how
| | 01:53 |
to do these types of layouts so that you
can adopt them in your own work.
| | 01:57 |
The only reason I really talked about
Fluid Grids at the beginning of this.
| | 02:00 |
It's not really because it has nothing to
do with definition list, but simply
| | 02:03 |
because you're going to be seeing all
these visual elements.
| | 02:05 |
And you're probably going to want to know
what they are.
| | 02:07 |
It can also be pretty hard to select
content on the page and work with it when
| | 02:12 |
fluid grids is turned on.
So if you go right up here to the document
| | 02:15 |
toolbar this little icon right here that
says Switch to Fluid Grid View its a
| | 02:19 |
toggle.
So I'm going to turn that off and now all
| | 02:21 |
that stuff goes away and I'm able just to
select and work with my content.
| | 02:25 |
Okay that aside now let's focus on
Definition Lists.
| | 02:28 |
This middle column has an interview.
And that includes questions and answers
| | 02:33 |
from the interviewer and then Arnie Palmer himself.
| | 02:36 |
And, yes, this guy's name is Arnie Palmer.
Okay, so we've got questions and answers
| | 02:40 |
here, and I would really like to format
this, a little differently.
| | 02:44 |
But, not only that, I'd like to structure
it in a way that's semantically.
| | 02:48 |
This interview is related to each other.
because right now they're only in
| | 02:51 |
paragraphs, and these individual
paragraphs give no hint at all that
| | 02:55 |
there's a relationship between the
question and the answers.
| | 02:58 |
But a definition list could give me that relationship.
| | 03:01 |
Okay, now, when you create a Definition
list inside Dreamweaver, especially
| | 03:05 |
visually like we're doing here, the way
that you select your content matters.
| | 03:09 |
I'm going to start in the first question
up top, and I'm going to drag all the way
| | 03:13 |
down, to the last answer.
That might be a little difficult for you
| | 03:19 |
to do.
But make sure that you have the first
| | 03:21 |
questions highlighted, all the way down to
the content in the last answer, and the
| | 03:26 |
direction that you selected it matters.
If you would have selected from the bottom
| | 03:30 |
up, then your Definition List in itself
would be actually flipped.
| | 03:34 |
Let me show you what I mean.
I'm going to go up to Format List, and I'm
| | 03:38 |
going to choose Definition List.
Now this is pretty much the only place
| | 03:41 |
that you can find this visually inside Dreamweaver.
| | 03:43 |
You're going to notice that it's not on
the Properties Inspector.
| | 03:46 |
Now as soon as I do that, I get additional formatting.
| | 03:49 |
Now the formatting is actually being
controlled through my CSS.
| | 03:53 |
The definition list itself, or the
structure of the HTML has absolutely
| | 03:57 |
nothing to do with that.
But the structure is important so I
| | 04:00 |
want to take a look at it.
I'm going to switch to Split View.
| | 04:02 |
Again I'm going to collapse my panels down
so that I can see this a little bit
| | 04:06 |
better.
And then I'm just going to highlight a
| | 04:07 |
portion of the list so I can jump to it.
Okay, let's see what we've got here.
| | 04:10 |
Well the same way that a ordered list or
unordered list start s off with a ul or an
| | 04:16 |
ol tag.
A Definition list starts off with a dl
| | 04:19 |
tag.
So that lets you know that there's a
| | 04:21 |
Definition list coming.
But unlike the other lists that have li or
| | 04:25 |
list items, Definition lists have two
elements that you can use, a dt and a dd.
| | 04:33 |
That stands for Term and Definition.
So, in this case, with the interview, we
| | 04:38 |
have a term followed directly by a definition.
| | 04:42 |
So the questions themselves are in the dt
and the answers are in the dd.
| | 04:47 |
And that structure follows all the way down.
| | 04:50 |
Now had I highlighted it going the other
way, then I would have actually flipped
| | 04:56 |
the dds and the dts.
I know that's confusing, right?
| | 04:59 |
But what would have happened was the last
answer would have been a term and then the
| | 05:03 |
question above it would have been a definition.
| | 05:05 |
So the order in which you select them does matter.
| | 05:08 |
Now, if definition lists intrigue you, I
invite you to go out to the HTML5 or HTML4
| | 05:13 |
specification, and read more about them.
Because, you can do some pretty
| | 05:17 |
interesting things with them in terms of
like combining multiple definitions
| | 05:20 |
together.
And basically how these elements relate to
| | 05:24 |
each other.
But something I really want you remember
| | 05:26 |
about definition lists is that they're a
really nice way of structuring.
| | 05:30 |
A lot of the complex content that you
might have within your files.
| | 05:34 |
Just to give you some examples, I've seen
people use them to structure product
| | 05:38 |
details.
Well, they'll have like the title of a
| | 05:40 |
product and a definition term.
And then they would have the description
| | 05:43 |
of the product, including images and
everything else, within the definition.
| | 05:47 |
I've also see it used a lot for interviews
like I used it here, things like that.
| | 05:51 |
So these complex structural elements
really lend themselves well to definition
| | 05:55 |
lists.
They are also really easy to style through
| | 05:57 |
cascading style sheets, because you have
the Definition list element to style.
| | 06:01 |
You have the terms to style.
You have the definitions themselves to
| | 06:04 |
style.
You get a lot of options there.
| | 06:06 |
This makes them extremely logical choices
to use when you need to group content
| | 06:10 |
together.
In a complex way that doesn't necessarily
| | 06:13 |
lend itself to a simpler list, like
ordered or unordered lists.
| | 06:17 |
| | Collapse this transcript |
|
|
6. Creating LinksOverview of links| 00:00 |
Without links, the worldwide web would be
a pretty boring place.
| | 00:04 |
Instead of being able to click to jump
from page to page, you'd have to type in
| | 00:08 |
each unique address, every single time you
wanted to view another page.
| | 00:12 |
It's no exaggeration to say that, without
the ability to create links, there would
| | 00:16 |
be no Internet.
So knowing how to create links in
| | 00:19 |
Dreamweaver is pretty important to any web designer.
| | 00:22 |
It's also, you'll be glad to know, pretty easy.
| | 00:25 |
Before we get into how to create a link
inside Dreamweaver.
| | 00:29 |
Let's take a moment to learn the basics of
links and a few of the different link
| | 00:33 |
types that you can create.
Links are nothing more than an address
| | 00:37 |
that points the browser to another location.
| | 00:39 |
Now here's an example of a Basic link.
The a or anchor tag is used to create the
| | 00:45 |
link itself and the href attribute is used
by the browser to resolve the link's
| | 00:50 |
destination.
So in this example, any time somebody
| | 00:52 |
clicked on the text home, they would
navigate to the page index.htm, which is
| | 00:58 |
found here in the href attribute.
Now, there are a lot of other attributes
| | 01:02 |
that you can use for your anchor tags.
And some of them are going to help with
| | 01:05 |
accessibility or give the user maybe a
little bit more information.
| | 01:09 |
But for the most part, if you want to
navigate from one page to another, this is
| | 01:12 |
really the only syntax you need to learn.
Now there are different types of links.
| | 01:17 |
And those different types of links simply
use a different means to resolve the path
| | 01:22 |
of the link itself.
In this case think of the index.htm.
| | 01:25 |
That's the path to the file that you're
trying to navigate to.
| | 01:29 |
How the browser resolves that path is
basically determined by the type of link.
| | 01:34 |
So we have three basic types of links that
I want to talk about.
| | 01:37 |
Absolute links, Document relative, and
Site Root relative.
| | 01:42 |
And here's an example of an Absolute link.
Now these links contain the entire path to
| | 01:46 |
the desired page, including the HTTP
protocol, or whatever protocol you're
| | 01:51 |
using.
They're primarily used to resolve links
| | 01:54 |
outside of the current site, although in
some complex sites, or blogs or things
| | 01:58 |
like that.
It's not uncommon to see them used to
| | 02:01 |
navigate internally within those types of sites.
| | 02:03 |
Now this practice is discouraged, as a
general rule, since it actually takes
| | 02:07 |
absolute links a little longer to resolve.
For links outside of your site however,
| | 02:12 |
absolute links are required.
Now the two types that really tend to
| | 02:16 |
confuse people are the Document and Site
Root relative.
| | 02:19 |
And these link types are typically used
when you need to navigate around within
| | 02:24 |
your own site.
All right, so I'm going to hover over
| | 02:26 |
Document relative and just kind of scroll
down a little bit.
| | 02:29 |
And I want to talk about the rules used
when resolving document relative links.
| | 02:33 |
Now, the metaphor I always like to use
when describing Document relative links is
| | 02:36 |
one of being in a mall.
So, document relative links can be thought
| | 02:41 |
of as where you want to go from where you
current location is.
| | 02:44 |
So if I'm in a mall, and I don't know how
to get to a certain store.
| | 02:47 |
I can call a friend of mine up who's
familiar with that mall.
| | 02:50 |
And I might say, hey, you know, I'm trying
to get to Macy's.
| | 02:52 |
How do I get there?
The first thing my friend's going to ask
| | 02:54 |
me is.
Well, where are you right now in the mall?
| | 02:57 |
And I might say, well, you know, I'm in
front of that cookie store and he's like,
| | 02:59 |
oh okay, go up an escalator, hang a right,
there's Macy's.
| | 03:03 |
So basically, it's where you want to go
from where you're currently at.
| | 03:07 |
Now if you take a look at the differnt
examples I have here.
| | 03:10 |
You can see exactly what I'm talking about.
| | 03:12 |
So let's say we want to navigate to the
Home page, and we're in the exact same
| | 03:16 |
directory.
In that case, I don't have to really type
| | 03:18 |
in anything other than the name of the
page itself.
| | 03:20 |
Here, index.htm, they're in the same
directory, the browser's going to look for
| | 03:24 |
it in the same folder, and it's going to
navigate right to that resource.
| | 03:27 |
On the other hand, what if it's up a directory?
| | 03:30 |
What if I'm say in a page that is in a
subdirectory, maybe I'm in about.html and
| | 03:36 |
it's in a sub directory, well for that I
use ../.
| | 03:40 |
Which means basically, go up one directory
and then find this resource.
| | 03:44 |
If you have to go up more than one folder,
you can simply chain those together, ../,
| | 03:48 |
../ and so forth.
What if instead of going up a directory,
| | 03:52 |
you want to go down a directory?
That's actually pretty easy.
| | 03:55 |
All you have to do then is the name of the
directory, forward slash, and then the
| | 03:59 |
resource that you want.
In this case, if for example we were going
| | 04:02 |
from the About page, which might be the
root directory to photos .htm, I would
| | 04:06 |
simply say lifestyles/photos.
It would tell the browser, go in the
| | 04:10 |
Lifestyles directory, find photos.htm, and
navigate to that resource.
| | 04:14 |
So, the thing that you have to keep in
mind about Document relative links is
| | 04:18 |
they're resolved based on where you want
to go from your current location.
| | 04:22 |
Now that's almost the same as Site Root
relative, but not quite.
| | 04:27 |
You'll notice that if I hover over the
Site Root relative link it seems like it's
| | 04:30 |
a little bit simpler.
Essentially what Site Root relative does,
| | 04:33 |
is it says where you want to go, relative
to the Root folder.
| | 04:37 |
If I go back to my mall metaphor for example.
| | 04:40 |
If I call my friend up and I say, hey, I'm
trying to get to Macy's and my friend says
| | 04:45 |
okay where are you right now inside the mall.
| | 04:46 |
And I say well I'm in front of that cookie store.
| | 04:49 |
He might not know where that is and he
might say you know what.
| | 04:51 |
I don't really know where that cookie
store is, so I'm going to tell you what to
| | 04:53 |
do.
Go back out to the front entrance where
| | 04:55 |
the food court is.
Right at the front entrance.
| | 04:57 |
When you come in that, go up the
escalator, hang two lefts, and you're
| | 05:01 |
there.
So it's pretty much the same thing.
| | 05:03 |
You're essentially telling the browser,
look, don't worry about where I am right
| | 05:06 |
now, go up to the root directory and then
navigate to this resource.
| | 05:10 |
That forward slash that you see in front
of index, that's indicative of the Root
| | 05:14 |
directory.
So, anytime you see that in a link, this
| | 05:17 |
is a Site Root relative link.
You probably won't use them that often.
| | 05:20 |
There are some systems in blog software
that use them primarily.
| | 05:24 |
Because, you know, pages might move around
a good bit and it's always nice to know
| | 05:27 |
that you link's going to work regardless
of where the page is moved.
| | 05:30 |
But for the most part you probably wont be
doing a lot of site relative links
| | 05:34 |
yourself.
Alright so that's some of the basic link
| | 05:37 |
types that we are going to be working with.
| | 05:38 |
As we continue on in this chapter we were
going to explore creating external and
| | 05:42 |
internal links in our pages as well as
alternate link types like email and anchor
| | 05:46 |
links
| | 05:47 |
| | Collapse this transcript |
| Setting site link preferences| 00:00 |
In many of the techniques used to create
links inside Dreamweaver, the link is
| | 00:04 |
actually resolved for you, automatically,
without asking you what type of link you
| | 00:09 |
want.
Now, this can sometimes lead to sites use
| | 00:11 |
one type of link, when in fact the author
actually requires the other type.
| | 00:16 |
Well, this is preference you can set in
Dreamweaver, but it's not located where
| | 00:20 |
you might think.
Now, most people that are new to
| | 00:23 |
Dreamweaver keep searching, in vain I
might add, in Dreamweaver's preference
| | 00:27 |
dialog box for this setting.
So, let's just go check it out.
| | 00:30 |
If I go to Dreamweaver's Preferences, and
on PC you'd go to edit Preferences.
| | 00:34 |
If I look in general preferences, nope.
Nope, nothing but links there I don't see
| | 00:41 |
any link category.
File Types is not going to give it to me.
| | 00:45 |
If I go down to site and start looking, no.
| | 00:48 |
Well, you know what?
I'll save you the suspense.
| | 00:50 |
I know for a fact it is not in these Preferences.
| | 00:53 |
Okay, so if there is a preference for how
Dreamweaver should resolve your links, and
| | 00:57 |
it's not in the Preferences, where is it?
Well, actually this is something that you
| | 01:02 |
do when you first define your site.
So, it's in the site definition dialog
| | 01:07 |
box.
Now, if you're defining your site for the
| | 01:08 |
first time, and your needs change.
One of the nice things about this is that
| | 01:13 |
you can go back and edit that site
definition any time that you want.
| | 01:16 |
So, you can do that by going up to Manage
Sites, but really the easiest way is just
| | 01:20 |
to go over to your Files panel.
Find the name of your site right here in
| | 01:23 |
this pull down menu and just double-click it.
| | 01:25 |
When you do that, it's going to bring up
the site definition dialog box again.
| | 01:28 |
And the category we're looking for over
here on the left-hand side, click to
| | 01:32 |
expand the Advanced Settings and you're
looking right here for Local Info.
| | 01:36 |
when I click on Local Info, I have these
two radio buttons right here that I can
| | 01:40 |
choose from.
I can choose to make my links relative to
| | 01:42 |
either document, or site root.
What that means is, if there's a technique
| | 01:47 |
that I use in Dreamweaver, or Dreamweaver
resolves the link for me, its going to use
| | 01:52 |
one of these two methods based on the one
I have selected.
| | 01:55 |
So if I need root I'll select that, if I
need document, I'll set that.
| | 01:59 |
Now, document is actually the default, and
its far more common than site relative
| | 02:03 |
links.
So, chances are, you'll never notice this
| | 02:05 |
setting or even need to edit it.
But if for whatever reason, you do want
| | 02:09 |
Dreamweaver to do site relative links instead.
| | 02:12 |
Then, I would select that.
Now, I'm going to go ahead and hit Save.
| | 02:14 |
Now it's worth noting that every single
time you create a link inside Dreamweaver,
| | 02:19 |
Dreamweaver doesn't automatically set that
for you.
| | 02:22 |
There are going to be instances where you
have an opportunity to choose whether you
| | 02:25 |
want to use a document or a site with
relative links.
| | 02:27 |
So, as we go over the different techniques
of creating links inside Dreamweaver when
| | 02:31 |
that's available as an option, I'll point
it out to you.
| | 02:34 |
That way, if you ever just need, you know,
one link resolved to site root, but you
| | 02:38 |
don't feel like and going changing your
entire site definition.
| | 02:40 |
Then, you can just use the appropriate
technique.
| | 02:43 |
| | Collapse this transcript |
| Creating site links| 00:00 |
By far one of the easiest things to do in
Dreamweaver is to create links.
| | 00:04 |
And that's a good thing.
Because you're going to be doing so much
| | 00:08 |
of it.
You know, I can think of at least six
| | 00:11 |
different ways to create links in
Dreamweaver, just right off the top of my
| | 00:14 |
head.
And I'm probably forgetting a couple, in
| | 00:17 |
fact yep, I did, I just thought of a seventh.
| | 00:19 |
You know, honestly though, no matter how
many different techniques there are.
| | 00:23 |
You're going to probably, like, most of
the designers, just have a few favorite
| | 00:27 |
core techniques that you use when creating
links in your page.
| | 00:30 |
I doubt you're going to go an use every
single one of them, every time you define
| | 00:33 |
a site.
However, it's important to understand the
| | 00:37 |
different methods used to create links and
when they're appropriate.
| | 00:39 |
So in this movie, we're going to explore a
few of those core techniques, and talk
| | 00:43 |
about their pros and cons.
So I have the index.htm file open here,
| | 00:47 |
from the 06_03 directory.
And I'm just going to scroll down a little
| | 00:53 |
bit, til I find our body copy, right down
here, where it says Fall registration is
| | 00:58 |
now open.
So we need to create a couple of links
| | 01:00 |
here.
First off the bat/g, I'm finding a
| | 01:02 |
sentence here that doesn't read quite
right, alright, this one right here.
| | 01:06 |
Be sure to visit our if you have questions
about the process.
| | 01:10 |
Okay, so obviously, there's some text
missing here, so I'm going to place my
| | 01:13 |
cursor.
Directly after the word our and hit space
| | 01:16 |
to give myself a little white space there.
And here we're going to insert a link.
| | 01:20 |
Now, typically you're going to have two
scenarios happening when you're putting
| | 01:24 |
links on the page.
Either you're going to have some existing
| | 01:26 |
text, that you need to make into a link.
Or, in this case, you're going to need to
| | 01:30 |
insert the text and the links at the same time.
| | 01:33 |
Now that matters because the techniques
that you'll use for both differs slightly.
| | 01:37 |
Okay, so, if you don't have the text
already on the page, probably the easiest
| | 01:42 |
way to get the link on the page, is to use
either the Menu or the Insert panel.
| | 01:47 |
If we go up to the Menu, I can go to
Insert and I can choose Hyperlink.
| | 01:51 |
Now choosing that'll bring up this dialog box.
| | 01:54 |
Now, this dialog box is really powerful,
and a lot of designers just kind of ignore
| | 02:00 |
this method.
They just type the text in that they need
| | 02:02 |
on the page, highlight it and attach a
link to it.
| | 02:04 |
But I'm going to show you that there are
some things going on here that you don't
| | 02:07 |
get using other methods.
I'm going to hit Cancel, because there are
| | 02:11 |
multiple ways to get this dialog box up,
that's one of them.
| | 02:14 |
The other way is if you go to the Insert
panel and you chose your Common Objects,
| | 02:18 |
this little icon right there is insert Hyperlink.
| | 02:21 |
And notice if I click that, I get exactly
the same dialog box.
| | 02:24 |
Okay, so the first thing this dialog box
wants to ask me is, what text do I need?
| | 02:29 |
What text do I want on the page where this
link is?
| | 02:32 |
What clickable text do I want?
In this case, I'm going to type in faq for
| | 02:36 |
faq, because it going to go to our
frequently asked questions page.
| | 02:40 |
And then the next thing it wants to know
is, okay, where can I find the page that I
| | 02:44 |
need to link to?
Now, in this case, if you're really
| | 02:47 |
familiar with your site, and you just want
to type that path in yourself, if you want
| | 02:51 |
to resolve that link yourself.
You can go ahead and do that.
| | 02:53 |
Most of the times that's actually a quick
way to do it.
| | 02:56 |
But there are going to be some times when
you don't quite remember or you're not
| | 03:00 |
100% sure exactly how you spelled something.
| | 03:03 |
Well the easiest way to do that is just to
browse, so I'm going to click this Browse
| | 03:07 |
folder right there.
And in the 06_03 directory, it should take
| | 03:10 |
you right into your root directory.
I'm going to go into the Admissions folder
| | 03:14 |
and I'm going to find the faq.htm, so faq.htm.
| | 03:18 |
I'm going to highlight that.
Now before I click the open button there
| | 03:23 |
in the lower right-hand corner.
I want to go over a few things here with
| | 03:27 |
you.
One of the things I love about this
| | 03:28 |
technique is that it previews the link for you.
| | 03:30 |
It shows you how this link is going to be resolved.
| | 03:33 |
In this case it's admissions/faq, the next
thing that allows you to do is actually to
| | 03:38 |
attach Parameters to the URL.
So this is going to be the URL that the
| | 03:43 |
browser follows.
You can actually attach Parameters to
| | 03:46 |
that.
Now what does that mean?
| | 03:47 |
Well let's say that you're going to link
to a product detail page.
| | 03:52 |
And you just happen to know the value that
that product detail page needed.
| | 03:56 |
Maybe you're using an ID of five for a
certain widget, for example.
| | 04:00 |
Well, if you know what the variable, the
name value pair is, you could say ID
| | 04:04 |
equals 5 and the appropriate one would
show up.
| | 04:07 |
Of course you'd need to know that
beforehand, but it's kind of nice to know
| | 04:10 |
that you can go ahead and hardcode that
directly in through this URL.
| | 04:13 |
That's pretty cool.
The next thing is whether the link should
| | 04:17 |
be resolved as a Document relative link or
as a Site Root relative link.
| | 04:20 |
And you can see the differance.
Switching back and forth.
| | 04:23 |
Now again, remember when we set our site
up, we can choose that as a preference.
| | 04:27 |
But this is one of the methods that allows
you to choose exactly what you want.
| | 04:31 |
Alright, I'm going to click Open, and
it'll go ahead and resolve that for me.
| | 04:34 |
Now, I could do a target if I wanted to
open it up in a brand-new window, or a
| | 04:38 |
blank window, I could do that.
So I could get a new tab or a blank window
| | 04:42 |
If I was using framesets, I could also
refer to one of the framesets.
| | 04:44 |
I'm just going to leave that blank.
I can also give the link a title, and this
| | 04:47 |
is a really good idea.
Giving a link a title helps with
| | 04:50 |
accessibility, and if somebody hovers over
it that title will actually popup.
| | 04:55 |
So, I'm just going to type in, Frequently
Asked Questions.
| | 05:00 |
Now, the one thing that this dialog box
gives you that the Properties Inspector or
| | 05:04 |
other methods don't, are these last two
options here.
| | 05:09 |
Access Key and Tab Index.
And if you're looking to make your links a
| | 05:13 |
little bit more accessible, you could go
ahead and put something like a tab index
| | 05:17 |
in there, for example.
And giving something a tab index basically
| | 05:20 |
tells the browser in what order to move
through items if somebody's hitting the
| | 05:25 |
Tab key.
So it's really nice to do, it's a nice
| | 05:27 |
little accessibility option, and it's
available only through this dialogue box.
| | 05:31 |
If you don't do it here, you have to do it
by hand.
| | 05:32 |
Alright, I'm going to go ahead and click
OK, and there's my link.
| | 05:35 |
So there's my frequently asked questions,
I might give it a little more white space
| | 05:39 |
on the right-hand side.
And that's method number one down, okay
| | 05:43 |
method number two.
We have this visit our admissions page for
| | 05:46 |
more information.
I'm going to go ahead and highlight that
| | 05:49 |
entire line, because I want all of that to
be clickable.
| | 05:53 |
So using this method you can determine how
much of the text is going to be clickable.
| | 05:57 |
In this case, I want to say visit our
admission page for more information.
| | 06:01 |
Now at this point, I want to turn our
attention down here to the properties
| | 06:04 |
inspector.
You can see if we're looking at the HTML
| | 06:06 |
properties, we have this little dialog box
right here for links.
| | 06:10 |
All right, now, as I mentioned before, if
you happen to know the path, you can type
| | 06:14 |
it in yourself.
Sometimes that's the fastest and easiest
| | 06:18 |
way to resolve the link.
In this case, I'm going to type in
| | 06:20 |
admissions, admissions/admissions.htm.
Of course, typing this yourself means you
| | 06:29 |
have to remember, did I pluralize that or not?
| | 06:31 |
And honestly, I had to take a second to
remind myself whether I did or not.
| | 06:36 |
I can also go ahead and give this a title,
so I'm just going to type in admissions.
| | 06:41 |
For the title, and, one thing the Property
Inspector gives us, that the previous
| | 06:46 |
method didn't, is I can go ahead and apply
a class to this link now if I want as
| | 06:50 |
well.
Since I want it on its own line, I'm going
| | 06:52 |
to grab that Class pull-down menu, and I'm
going to choose the class of more, which I
| | 06:59 |
created earlier, alright.
So I'm going to do a save all and now we
| | 07:03 |
have our second link.
Notice that visit our admissions page has
| | 07:06 |
changed color, it's down there on it's own
line and now this is all clickable.
| | 07:10 |
Anytime I click in any link that's already
on the page, I can also look at the
| | 07:13 |
properties inspector and see the link
itself, whether it has a title, that sort
| | 07:17 |
of thing.
So you can sort of visually check those
| | 07:19 |
things as you're creating them.
Now I've got a couple more links that I
| | 07:22 |
want to do.
I'm going to scroll up and find this
| | 07:25 |
student spotlight spot.
And I'm going to go ahead and highlight
| | 07:28 |
the text more info.
Now because of the fact that this element
| | 07:31 |
has relative positioning on it, it can
sometimes be kind of hard to click into.
| | 07:34 |
If you're having difficulty clicking into
it, sometimes a double click helps, that
| | 07:38 |
sort of thing.
But if it just, doesn't work for whatever
| | 07:40 |
reason, you can always go right up to View
> Style Rendering and turn your styles
| | 07:47 |
off.
Sometimes, that's the quickest and easiest
| | 07:49 |
way to get into a section of text that
you're having a hard time getting into in
| | 07:53 |
Design View.
In this case, I'm going to highlight the
| | 07:55 |
more info again.
And I want to show you another technique
| | 07:59 |
for creating links, that I'm a huge fan of.
| | 08:01 |
And this is called the Point to File technique.
| | 08:03 |
So I'm going to go down to my Properties
Inspector, and this time instead of typing
| | 08:06 |
something in inside this link dialog box,
I had this little icon that says Point to
| | 08:10 |
File.
If I click and hold the mouse down, I can
| | 08:13 |
literally just Point this right over to
the page inside my files panel that I
| | 08:18 |
wanted to link to.
This could be inside another directory.
| | 08:21 |
So if I hover over directory, directories
will open up and let me access those
| | 08:24 |
files.
Or if it's right there in the root
| | 08:26 |
directory I can just point direct to that.
When I point to a file, in this case
| | 08:31 |
spotlight, I notice the link is going to
resolve for me right there in that
| | 08:34 |
dialogue box.
When I let go, it now resolves to
| | 08:37 |
spotlight.htm, so I've got a document
relative link right there.
| | 08:41 |
I'm also going to apply a Class of more to
it as well, so that it shows up on it's
| | 08:45 |
own line.
All right, I'm going to do a Save All, and
| | 08:49 |
then I'm going to turn my style rendering
back on, excellent.
| | 08:53 |
I can see the link is resolving and it's
positioning itself exactly the way I want
| | 08:58 |
it to.
Alright, I've got one more link left to
| | 09:00 |
do.
I'm going to go up to the admissions,
| | 09:01 |
right up here, in my menu, and I'm
going to highlight the text Admissions.
| | 09:05 |
This might be a little hard to do, so
double-clicking the text is going to
| | 09:09 |
highlight all of the text itself.
I'm just going to double-click the text to
| | 09:13 |
highlight the text, and the next thing I'm
going to do is come down to the Properties
| | 09:15 |
Inspector.
Dreamweaver keeps track of all the links
| | 09:19 |
that you make.
And if you want to reuse those links,
| | 09:21 |
instead of having to type it over again.
Or use the point to file icon or even
| | 09:25 |
browse icon here that gives you a similar
dialogue box that we used before.
| | 09:29 |
You could just grab the pull-down menu and
right there is the link I'm looking for,
| | 09:33 |
admissions/admissions.htm.
As soon as I select that, I can do a Save
| | 09:39 |
All, and preview that in my browser.
Now I could test my lengths I happen to
| | 09:47 |
know that I don't have an Admissions page
in the site right now.
| | 09:50 |
So if I click on that you know I'm going
to get that.
| | 09:53 |
But if I scroll down just do the spotlight
I do have the student spotlight.
| | 09:57 |
I've hit my Back button, I can go down to
the frequently asked questions and I've
| | 10:01 |
got that one as well, excellent.
Now we've covered a lot of different
| | 10:05 |
techniques there, in fact I think we
covered four or five so there's actually a
| | 10:09 |
couple more we didn't even cover.
And it's easy to see why there's so many
| | 10:14 |
different ways to create links in
Dreamweaver though if you really think
| | 10:17 |
about it.
Some are designed to allow you to create
| | 10:19 |
links really quickly, very fast.
And that's usually when simple links are
| | 10:23 |
required.
Some of the other methods are designed to
| | 10:25 |
accept more input from you, based on the
current needs of your link.
| | 10:29 |
So, when you need to apply a little bit
more thought to it you might want to use
| | 10:31 |
those methods.
You're probably going to find yourself
| | 10:34 |
using multiple techniques based on the
link requirements and frankly your own
| | 10:38 |
personal preferences.
Be sure to practice creating links with
| | 10:41 |
each of these techniques, so that you'll
know which method to use based on the
| | 10:45 |
current situation.
| | 10:46 |
| | Collapse this transcript |
| Building absolute links| 00:00 |
The methods that you use to create
absolute links are actually rather
| | 00:03 |
limited.
Since you can't really browse your hard
| | 00:06 |
drive for external websites, you're going
to have to know the exact link.
| | 00:10 |
That can be really tough at times,
especially for some of those longer
| | 00:14 |
generated links that websites are using.
So, copying and pasting can be a real
| | 00:19 |
lifesaver.
Let's just go ahead and explore our
| | 00:21 |
building absolute links with in Dreamweaver.
| | 00:23 |
So to do that, I have the index file open
from the 06_04 directory, and you can see
| | 00:28 |
I've already navigated down the page a
little bit.
| | 00:31 |
So, this is the Victor Stuesse wins Lacie Award.
| | 00:34 |
Alright, so in that this first paragraph
here, we have the Metropolitan Museum's
| | 00:39 |
docent program.
And I'm going to highlight the
| | 00:41 |
Metropolitan Museum because we would like
to give them a shout out and then link out
| | 00:45 |
to them.
So, I'm going to highlight that text and
| | 00:48 |
then going down into my Properties
Inspector, I'm going to click right there
| | 00:51 |
for my link.
Now the first thing that you need to
| | 00:53 |
remember when you're typing in an absolute
link is that you have to type in the
| | 00:57 |
protocol.
I can't just type in MetMuseum.org.
| | 01:00 |
And honestly, in today's browsing age
where, you know, you can do that within
| | 01:04 |
browsers now, a lot of people forget about
the protocol, forgot to put that there.
| | 01:08 |
So make sure you remember this, it's http://.
| | 01:14 |
You also can assume that its this so, you
know, when you're looking at resolving
| | 01:18 |
this link, make sure that you understand
which protocol is being used.
| | 01:21 |
Some of them are going to use HTTPS, there
me be some other protocols that come into
| | 01:26 |
play here.
So, make sure you look at the protocol
| | 01:28 |
carefully before you resolve this link.
Alright, the next thing I'm going to do
| | 01:31 |
here is www.metmuseum.org.
And the chances that I spelled museum
| | 01:37 |
right are probably pretty slim, so we'll
have to test that out.
| | 01:43 |
Now, the next thing that I want to do is
do a title for this one.
| | 01:47 |
You know, as I mentioned before, it's
always a really good idea to give your
| | 01:50 |
links titles.
That way, for accessibility purposes, it's
| | 01:54 |
very nice.
And it also gives that nice little hover
| | 01:56 |
effect where, you know, you get a little
tool tip about where this link goes.
| | 01:59 |
So, I'm just going to type in, visit the
Metropolitan Museum, and hit Return or
| | 02:10 |
Enter to make sure that's accepted.
And then finally, I'm going to use this
| | 02:13 |
Target pull-down menu.
Now, we talked a little bit about this
| | 02:16 |
earlier, but I didn't really showcase how
this works.
| | 02:18 |
Basically with targets, you can choose
_blank or New, and I'm going to choose
| | 02:23 |
_blank.
Now, targets way back in the day dealt
| | 02:27 |
with frame sets, and we don't really do a
whole lot of frame sets anymore.
| | 02:30 |
But what _blank will do is when a browser
sees that as a target, is they'll either
| | 02:35 |
open this up in a new window or in a new
tab based upon the browsers preferences.
| | 02:39 |
Now, this is both a good and a bad thing.
Some people love being redirected into a
| | 02:43 |
new browser window a tap and some don't.
So, you really need to think about the
| | 02:47 |
usability, do you really want to direct
them to a new tap?
| | 02:50 |
On the other hand, it does allow them to
browse through the site and then simply
| | 02:54 |
close that tap and go right back to your site.
| | 02:56 |
So sometimes, you're actually doing people
a favor, right?
| | 02:58 |
So, I'm going to do a save and preview
this in my browser.
| | 03:02 |
I'll scroll down.
Find the link, click on it.
| | 03:06 |
And there is our Metropolitan Museum of Art.
| | 03:10 |
Now all you have to do is hover over the
link and the link comes up.
| | 03:15 |
As you can see the links are just as easy
to create as any other link type outside
| | 03:19 |
of Dreamweaver.
You just have to make sure you remember
| | 03:24 |
that protocol on the front end of it.
And, of course, you do have to type the
| | 03:28 |
whole thing out.
If you leave that protocol off it'll
| | 03:30 |
create a broken link.
And it'll really frustrate your users.
| | 03:33 |
So, be sure to remember that.
Also, remember that using the _blank for
| | 03:37 |
target allows people to browse in a new
tab or new window, without ever leaving
| | 03:42 |
your site.
And, remember that could also be both a
| | 03:44 |
good or a bad thing, so you have to think
carefully about usability before
| | 03:48 |
committing any link to a new window.
| | 03:50 |
| | Collapse this transcript |
| Linking to named anchors| 00:00 |
While linking to other pages is usually
the norm, there are times when you need to
| | 00:04 |
link to places within the same page.
Usability is an important consideration
| | 00:09 |
when designing websites and, although
people will tolerate having to scroll a
| | 00:12 |
little bit for your information.
If they have to scroll a lot, you usually
| | 00:16 |
end up with people who are, less than happy.
| | 00:19 |
Named anchors allow us to link to places
within the same page, which allows you to
| | 00:23 |
have your users jump further down the page
or back up the page.
| | 00:26 |
Depending upon what you're looking to do.
Now, named anchors are aptly named,
| | 00:30 |
because instead of the normal HREF
attribute that links use links to named
| | 00:35 |
anchors reference an ID value.
And that allows you to link to any element
| | 00:39 |
on the page that has an id attribute.
You might also hear these referred to as
| | 00:44 |
fragment identifiers, so, if you ever hear
that phrase, it's basically the same thing
| | 00:49 |
as a named anchor.
Alright, so let's see how we can use that
| | 00:51 |
to enhance our navigation.
Okay, so to do this, I have the faq.htm
| | 00:55 |
file open from the 06_05 admissions folder.
| | 01:00 |
Okay, so go into the Admissions folder and
06_05 and you'll find the faq page.
| | 01:04 |
Now just to give you a brief overview of
the page structure, I've got some text
| | 01:09 |
right there that's going be used to link
down the page to certain sections.
| | 01:12 |
Because each section has their own
frequently asked questions.
| | 01:15 |
So we have Housing, we have Portfolio, we
have Financial Sid, and we have Programs.
| | 01:20 |
So this is a lot of scrolling.
And it would be nice if people could just
| | 01:23 |
sort of jump down the page.
Now you'll notice that each one of these
| | 01:26 |
also has a link for back, and that allows
you to jump back up to the top of the
| | 01:29 |
page.
And this is one of those nice things that
| | 01:31 |
you can do for people.
If you're going to allow them to jump down
| | 01:33 |
to the bottom of the page, then also allow
them to jump back up.
| | 01:36 |
Alright, so this is a two step process.
The first thing that you need to do is to
| | 01:41 |
create what's called the Fragment Identifiers.
| | 01:43 |
Or just make sure that the elements that
you want to link to or jump to have an ID
| | 01:47 |
attribute.
So let's say Common Questions for example,
| | 01:50 |
this h1.
I want that h1 to be where people jump
| | 01:53 |
back up to when they jump to the top of
the page.
| | 01:56 |
So I'm going to ahead and give that an ID.
And I can use the Properties Inspector to
| | 01:59 |
do that.
Now, right here, we see ID.
| | 02:01 |
And I'm just going to go ahead and give it
an ID of top.
| | 02:05 |
Now, one of the things that you have to
remember is what you've used.
| | 02:08 |
Spelling counts, capitalization counts.
I like to keep these short and sweet.
| | 02:12 |
I also like to use all lower case or camel
case naming if I happen to shove two of
| | 02:16 |
them together.
Because you don't want to have to sort of
| | 02:19 |
search your memory banks, and try to
remember what you've done.
| | 02:21 |
So, the shorter, the better.
Alright, now I'm going to scroll down and
| | 02:24 |
do that for each one of these different sections.
| | 02:26 |
For Housing, for example, I'm going to
select that h2, and I'm going to give that
| | 02:30 |
an ID value of housing.
And, you can use the tag selector right
| | 02:36 |
here.
You can see that ID was applied.
| | 02:39 |
So every time you do that, its not a bad
idea to look up there and make sure that
| | 02:42 |
it's where you think it should be.
For Portfolio, I'm going to do Portfolio.
| | 02:50 |
(SOUND), here we go.
The Financial Aid.
| | 02:53 |
I'm going to go ahead and do aid.
And for Programs, I'm going to do
| | 02:59 |
programs.
I'm guessing you already figured that out.
| | 03:03 |
Programs, alright, there we go.
Now, I'm going to go ahead and Save this
| | 03:06 |
page.
And, now I need to scroll back up to the
| | 03:09 |
top, and actually makes the links themselves.
| | 03:13 |
So, if I highlight this text, Housing, so
this is, you know, just, I'm going to
| | 03:17 |
preview this in Live View so you can see
what I'm talking about here.
| | 03:19 |
These guys are going to link down to those
individual sections.
| | 03:22 |
So, turning off Live View, just going to
highlight the word, Housing, and here's
| | 03:26 |
how we do that link.
All we have to do is remember what we
| | 03:28 |
named it, and then just type in #housing,
and that's it.
| | 03:33 |
That's all you have to do to resolve that link.
| | 03:35 |
So you use the pound symbol, or that
octothorpe, and then the same exact ID
| | 03:39 |
that you gave it.
So, for Portfolio review, we would do
| | 03:42 |
portfolio.
For Financial Aid We would do aid, and for
| | 03:50 |
Programs, we would do, of course, programs.
| | 03:57 |
Now the other thing that you want to do
here, and I'm going to go ahead and Save
| | 03:59 |
this.
Is again, we wanted to give people the
| | 04:02 |
option of jumping back up to the top of
the page.
| | 04:04 |
And you can see that I have this text
right here that says back.
| | 04:06 |
Now this is not a link right now, so I
need to make it one.
| | 04:09 |
And again I"m just going to link that to #top.
| | 04:11 |
Now it doesn't take much to type that in, right?
| | 04:13 |
But remember if you've used a link once
you can use the drop down menu to grab it
| | 04:17 |
again.
So if you want instead of having to type
| | 04:20 |
that in every time, and this helps prevent
spelling errors too which I'm notorious
| | 04:24 |
for.
You know I can just go ahead and grab
| | 04:26 |
that, and choose top.
There we go.
| | 04:29 |
Alright, so I'm going to test this out.
I want to save this, and preview this in
| | 04:33 |
one of my browsers.
All right, and once this comes up, let's
| | 04:37 |
just say I click on Programs.
Notice it jumps me right down to the page
| | 04:41 |
and it takes me right to Programs.
Now, where ever that named anchor is, is
| | 04:44 |
going to show up at the very top of the page.
| | 04:47 |
Now if I hit Back, notice that it goes
right to common questions.
| | 04:50 |
It doesn't go all the way back up to the
top, and I did that on purpose.
| | 04:53 |
Because instead of having people scroll
down to get down to the section, it just
| | 04:56 |
sort of jumps right to that section.
So I'm going to test these all out,
| | 04:59 |
Portfolio review, Financial Aid, then
finally housing.
| | 05:06 |
Housing doesn't jump down very far, but it
does give you that nice little jump.
| | 05:10 |
Now you may have also noticed with
programs that it managed to give you all
| | 05:13 |
the way down to programs, but sometimes it won't.
| | 05:15 |
If I didn't have this really large footer
at the bottom, if the programs was the end
| | 05:19 |
of it.
This is as far as it would go.
| | 05:21 |
So if that ever happens to you and you
expect to see the section up at the top of
| | 05:24 |
the page, but it's down here.
Just think about the fact that you just
| | 05:28 |
don't simply have any other room left to scroll.
| | 05:30 |
That way, if you really wanted it to go
back up, you could make the page a little
| | 05:33 |
taller.
Okay, so that works great.
| | 05:35 |
Now, one of the really nice things about
using these sort of named anchors or
| | 05:38 |
fragment identifiers.
Is that you are not limited to linking
| | 05:42 |
them on the single page, you can also link
to them from another page.
| | 05:46 |
Let me show you what I mean, if I go into
the programs.htm file which is found by
| | 05:51 |
the way.
You go into the 06_05 file and into the
| | 05:54 |
programs folder you will find
programs.htm, so this is where I found
| | 05:58 |
this file.
There's actually, about halfway down,
| | 06:01 |
there's some text that says, please
contact the department chairs for more
| | 06:05 |
information or view our FAQ on programs.
Okay, so I could link this directly to the
| | 06:10 |
FAQ page.
But I'd really also like it to jump right
| | 06:13 |
down to the program section.
So all I would have to do right now is
| | 06:16 |
just type this link in, if I wanted to.
I would resolve the link, and then, after
| | 06:20 |
that, I would put the pound symbol.
And then the name of the fragment ID that
| | 06:23 |
I wanted to browse right down towards.
So if I remembered the path that would be
| | 06:27 |
great.
But what if I don't remember the path?
| | 06:29 |
What if I don't remember if these two are
in the same directory or not?
| | 06:32 |
Well, here's something that you can do
that's actually pretty cool.
| | 06:34 |
I'm going to go up to Window and I'm going
to choose Tile.
| | 06:38 |
Now what that's going to do for me is it's
going to put both of my open documents,
| | 06:41 |
right, side by side.
So, this is pretty cool.
| | 06:43 |
And the next thing I'm going to do is, I'm
going to highlight again, this FAQ text,
| | 06:50 |
and I'm going to grab the point to file
icon, and I'm going to point it right
| | 06:53 |
here, programs.
Now here's what's intresting about this.
| | 06:56 |
Take a look in the link dialogue box.
Do you see how it's resolving the link?
| | 07:00 |
It's going ../, so up a directory,
admissions, go into the admissions folder,
| | 07:04 |
find FAQ.htm, and then right after that,
there's your identifier, #programs.
| | 07:10 |
So if I release my mouse, it's going to go
ahead and resolve that for me correctly.
| | 07:14 |
So that's again something I didn't really
need to type in.
| | 07:17 |
So I'm going to go ahead and Save this,
preview this in my browser.
| | 07:20 |
And now if I scroll down and click on it,
it jumps right down to the location that I
| | 07:26 |
wanted.
Now obviously not every page is going to
| | 07:29 |
need a name danker.
However, when your data requires a lot of
| | 07:32 |
scrolling or if you just want to give
people a way to quickly access a specific
| | 07:37 |
location.
These fragment identifiers allow you to
| | 07:40 |
add a lot of functionality to your pages.
| | 07:42 |
| | Collapse this transcript |
| Creating an email link| 00:00 |
Email links allow users to click on a link
and automatically generate an email to the
| | 00:05 |
specified address.
And Dreamweaver makes creating email links
| | 00:08 |
incredibly simple and just like most
options in Dreamweaver there are a couple
| | 00:12 |
of different ways to do it.
Now before we dive into the specifics of
| | 00:15 |
creating email links in Dreamweaver.
I want to talk for just a moment about the
| | 00:19 |
pros and cons of using the technique that
I'm about to show you.
| | 00:23 |
Now the default method of creating email
links in Dreamweaver is dead simple, and
| | 00:27 |
it makes giving your users the ability to
contact you even easier.
| | 00:31 |
Dreamweaver's going to insert a link,
including the text of your choice,
| | 00:34 |
surrounded by anchor links that links to
the email that you define.
| | 00:38 |
From there all our user has to do is just
click the link that you provide them and
| | 00:41 |
there our email client will come up.
And they're going to be authoring the
| | 00:44 |
email to the address of your choice.
Now, the downside of inserting email links
| | 00:48 |
this way is that spam box find and catalog
your email address even easier than
| | 00:53 |
before.
And your spam folder is going to receive a
| | 00:56 |
work out from that day going forward.
Now, to combat this several techniques
| | 01:01 |
have evolved and are continuing to evolve
that hide your email address from spam
| | 01:05 |
bots.
Now the most effective technique is to use
| | 01:07 |
a Contact Form, so they're not really
sending email.
| | 01:10 |
The other thing that you can do is you can
use JavaScript or some kind of server side
| | 01:14 |
code, to kind of hide those email address.
They'll process the link for you, without
| | 01:19 |
exposing it to the spam bots.
Now, those techniques are a little outside
| | 01:23 |
the scope of this course, but you could
easily find full descriptions of them by
| | 01:26 |
just doing a quick Google search.
They are definitely worth researching if
| | 01:30 |
you plan on having email links on your page.
| | 01:32 |
Okay, back into the technique at hand.
Here I have the about.htm page opened up
| | 01:36 |
from the 08_06 folder.
And it's actually also in the about folder
| | 01:41 |
here.
And if I scroll down to our continuing
| | 01:43 |
mission.
The last line here says, Feel free to
| | 01:46 |
email us directly to request a perspective
student packet, fair enough.
| | 01:51 |
I'm going to highlight the text email us
and this is what I want to use for my
| | 01:54 |
email link.
Now again there are a couple of different
| | 01:56 |
ways to do this.
Number one if I know the protocol, and I
| | 01:58 |
do I can just type it here directly inside
the link dialogue box.
| | 02:02 |
If I don't know the protocol and I want
Dreamweaver to do it for me, I can go
| | 02:06 |
right up here to my Insert panel and click
on the email link.
| | 02:09 |
Now because I already highlighted the
text, it's going to go ahead and
| | 02:12 |
pre-populate that text field there.
In this case, I can type in any email
| | 02:17 |
address I want, and I'm just going to type
in admissions@rouxacademy.com.
| | 02:24 |
There we go.
I'm going to click OK, and it's going to
| | 02:28 |
resolve that link for me.
Now one of the things that this technique
| | 02:31 |
allows me to sort of get away with, I
didn't put in the mail to protocol right
| | 02:37 |
here.
So right here where it says mail to, and
| | 02:40 |
then the email link, I didn't have to
remember to do that, Dreamweaver did that
| | 02:43 |
for me.
If you're going to type an email link
| | 02:45 |
manually, you've gotta remember that.
Now that would work, but you can actually
| | 02:48 |
take this default email link a little bit further.
| | 02:50 |
What if you have two links that are going
to the same email address?
| | 02:54 |
You know, for example, I doubt that
admissions@rouxacademy is only going to
| | 02:57 |
get.
You know just email from this but this is
| | 03:00 |
a very specific email.
This is where they want to request a
| | 03:03 |
student packet.
Well one of the things you can do is you
| | 03:06 |
can sort of force a subject line.
And this is kind of nice because you can
| | 03:09 |
put a filter on your email that says hey
all emails that come in with this subject
| | 03:12 |
line put them in this folder for me.
And its a nice way of sort of catching all
| | 03:15 |
of these.
So what I'm going to do.
| | 03:17 |
Is, I'm going to go down here to my link.
And I'm just going to click right after
| | 03:21 |
the rouxacademy.com.
And I'm going to type in a question mark.
| | 03:24 |
So that question mark is a little separator.
| | 03:26 |
And then, directly after that, I'm going
to type in subject equals.
| | 03:30 |
And now I can type in student packet request.
| | 03:33 |
That way, any time this email would come
in, the subject line number one, it's
| | 03:38 |
going to pre-populate for the user, which
is nice because they click on it.
| | 03:42 |
Their email client comes up and already
has a subject line, so they don't have to
| | 03:45 |
type it in and figure out, you know, how
they're going to do it.
| | 03:47 |
But for you, it's even better, because you
can create a filter that puts all of those
| | 03:51 |
in one folder.
And now everybody that's requesting a
| | 03:53 |
student packet for you is going to come
through that single folder.
| | 03:56 |
Alright, I'm going to go ahead and Save this.
| | 03:57 |
And, you know, I don't have an e-mail
client set up on this machine, but feel
| | 04:01 |
free to test that out.
Click, and, you'll notice that your email
| | 04:04 |
client comes up, and thesubject line will
be pretty populated.
| | 04:07 |
Now, these email links are a great way to
help clients or users get in touch with
| | 04:11 |
you, but you do have to think about
exposing your email link on the page.
| | 04:15 |
That's a risk, and you really need to
consider it before adding them or using
| | 04:19 |
them using this default Dreamweaver method.
| | 04:21 |
Keep in mind that you can customize your
email links as well, if you want that
| | 04:25 |
added functionality.
| | 04:26 |
| | Collapse this transcript |
|
|
7. Managing CSSSetting CSS preferences| 00:00 |
In this chapter we're going to explore
Dreamweaver's powerful CSS Authoring and
| | 00:04 |
Management tools.
Dream Weaver has made working with CSS a
| | 00:08 |
fundamental part of almost every work flow
in Dreamweaver.
| | 00:11 |
As such, the options around creating and
modifying your CSS can sometimes be a
| | 00:16 |
little bit overwhelming to new users.
Unfortunately, Dreamweaver has multiple
| | 00:20 |
preferences that allow you to cusomize
exactly how your styles are created
| | 00:24 |
presented and formatted.
I want to take a moment to go over those
| | 00:28 |
preferences.
And then maybe customize a little bit of
| | 00:31 |
how Dreamweaver goes back creating your
CSS before we get into the actual tools
| | 00:35 |
themselves.
So I have the main.css file opened from
| | 00:39 |
the 07_01 directory and as you can see,
this is a, it only has a single rule in it
| | 00:44 |
but it's a big one.
So we have an heading one here.
| | 00:48 |
That has some font shorthand notation.
Some margin properties Padding and Border.
| | 00:53 |
You can see somebody, and that somebody
would be me of course.
| | 00:56 |
Went through a lot of trouble to write all
that stuff out because certainly not the
| | 00:59 |
most efficient way to write that
particular selector.
| | 01:02 |
So, I did this because I wanted to
illustrate for you how the preferences
| | 01:06 |
that you set in Dreamweaver, really modify
and change.
| | 01:10 |
How Dreamweaver writes your styles for you
when you use some of the tools.
| | 01:14 |
So I'm going to go up to my Preferences,
I'm going to go Dreamweaver, choose
| | 01:17 |
Preferences, again if you're on a PC, you
want to go to Edit Preferences.
| | 01:21 |
And before I get into CSS Styles, I want
to go into Code Coloring.
| | 01:24 |
I spend a lot of time in my code,
especially within my CSS, I do a lot of
| | 01:29 |
hand coding.
I do a lot of editing, manual editing
| | 01:32 |
within my styles, and so I spend a lot of
time looking at the actual code itself.
| | 01:36 |
Well, I actually, I'm pretty used to the
default coloring scheme for styles.
| | 01:41 |
But you may find it a bit jarring or, you
may be coming from a program that has a
| | 01:45 |
slightly different color scheme.
And you want to sort of make it look the
| | 01:49 |
way that you're used to seeing it.
That's very easy to do.
| | 01:52 |
If I highlight CSS and choose Edit
Coloring Scheme.
| | 01:55 |
You get a selection here of different
items within your CSS.
| | 02:00 |
So, for example, the selectors are sort of
a Magenta color.
| | 02:02 |
If you wanted to change those you can
highlight this, grab the text color and
| | 02:06 |
then choose anything you want.
So say something like a Burgundy for
| | 02:09 |
example or maybe an Orange or something.
It's really up to you.
| | 02:13 |
Now I like the default coloring scheme so
I'm going to change any of this stuff.
| | 02:16 |
I'm just going to hit Cancel.
And then I want to go down to my CSS
| | 02:20 |
Styles Preferences.
But if prefer to go ahead and customize
| | 02:23 |
that, feel free, go right ahead.
You can theme the code coloring any way
| | 02:26 |
that you want.
So I want to look at the CSS styles
| | 02:29 |
category.
And it looks like there's a lot going on
| | 02:31 |
here, but there's really not.
Let me go over each of these categories,
| | 02:34 |
and what they're doing.
The first one, and the one that we want to
| | 02:37 |
focus on in this particular exercise, is
the shorthand values.
| | 02:41 |
Use shorthand when creating the certain rules.
| | 02:44 |
So notice we have Fonts, Margins and
padding, Border Radius, Border and border
| | 02:48 |
width, List-styles, and Transitions.
Okay, so what is this all about?
| | 02:53 |
Well instead of doing all of these, say,
padding rules, where I'm individually
| | 02:57 |
writing out the padding for top, right,
left, and bottom, I could use shorthand
| | 03:01 |
notation.
Which will allow me just to make one
| | 03:03 |
padding declaration.
It's a lot easier to write and sometimes
| | 03:07 |
it's a little easier to read and it just
saves a little bit of space.
| | 03:10 |
So, I have a preference within Dreamweaver
that allows me to tell Dreamweaver, hey,
| | 03:15 |
anytime you create these rules yourself.
Or anytime you modify one of these rules
| | 03:20 |
for me, I want you to use shorthand
instead of writing them all out.
| | 03:25 |
I usually turn them all on, except for one.
| | 03:28 |
And the one exception I leave is the font property.
| | 03:30 |
And the reason for that, is the font
shorthand notation has a lot of stuff
| | 03:34 |
going on.
It has Font Weight, it has Font Style, it
| | 03:37 |
has size, it has line height, it has the
font family itself.
| | 03:40 |
And if you leave any of them off.
Then it will go ahead and it will default
| | 03:45 |
to the default value, normal for bold,
normal for font italics.
| | 03:49 |
And that can be bad, because if you do
font shorthand notation for say a heading
| | 03:54 |
one, and you declare a size.
And, well, like I'm doing here, you
| | 03:58 |
declare a size In a font family but you
don't declare the weight well you might
| | 04:02 |
with a font weight a unexpected font weight.
| | 04:05 |
So if you have short hand notation turned
on for font and lets say you just do size.
| | 04:10 |
There's no guarantee that the short hand
is going to be written properly for you
| | 04:14 |
and not over write something you do so
it's just safer to leave that off.
| | 04:17 |
The rest of these guys are going to turn on.
| | 04:19 |
Now, this second little section here.
When editing CSS rules, it says, okay.
| | 04:24 |
So you've turned on certain shorthand properties.
| | 04:26 |
When do you want me to follow them?
You can say, only if they originally used
| | 04:30 |
shorthand should you use it, or, based on
the settings I have above.
| | 04:34 |
Now, I'm definitely going to have it based
on the settings I have above.
| | 04:36 |
If I was lazy and my styles were,if I
wrote them incorrectly, or if I'm getting
| | 04:40 |
styles from somebody else and I modify it.
I really want that shorthand notation to
| | 04:44 |
be used.
So I'm going to go ahead and leave that
| | 04:46 |
according to the settings above.
I also like this option here, open CSS
| | 04:50 |
file when modified.
What that will do for you is, if through
| | 04:54 |
your actions or through a tool inside
Dreamweaver, the CSS gets modified.
| | 04:58 |
It will automatically open the CSS file
and jump to it.
| | 05:01 |
I like that because, again, I like to
spend a bit of time in the code and I like
| | 05:05 |
to verify that a change has been made the
way I wanted it to be made regarding the
| | 05:09 |
code.
If that's not something you care about, or
| | 05:11 |
if you find that distracting, you can
easily turn that off.
| | 05:15 |
The, next section here, when
double-clicking in the CSS Panel.
| | 05:18 |
Okay, let me go ahead and tell you, these
options don't do anything for you anymore.
| | 05:23 |
In the old versions of Dreamweaver where
we had the CSS Styles panel they actually
| | 05:26 |
did something for you, and up until recently.
| | 05:29 |
The Dreamweaver Creative Clouds beta
builds had that panel still in it.
| | 05:33 |
So, thats why these preferences are still around.
| | 05:35 |
I fully expect, by the time Creative Cloud
is updated a few times, for those options
| | 05:40 |
to be pulled out.
Because currently they don't really do
| | 05:42 |
anything for you because that panel,
doesn't exist anymore.
| | 05:45 |
And then finally we have something about
vendor prefixes.
| | 05:48 |
Those are applying to gradients later on
when we talk about styling backgrounds.
| | 05:53 |
So for right now I'm going to ignore those
sets of preferences, because we're
| | 05:56 |
going to come back to this later.
All right, I'm going to go ahead and click
| | 05:59 |
OK.
And just to kind of show you that
| | 06:01 |
Dreamweaver's going to do what I asked it
to do, I'm going to go ahead and modify a
| | 06:04 |
couple of these properties.
I'm going to go into h1, and let's just
| | 06:07 |
say I'm going to modify my margin, okay?
So, I'll go in and I'll modify the top
| | 06:13 |
margin and make it 2 em's.
And I'll modify the bottom margin and make
| | 06:17 |
that 2 em as well.
Notice that as soon as I do that It's
| | 06:21 |
modified my rule, and it's now, instead of
having four margin declaration, I only
| | 06:25 |
have the one.
Same thing for padding, if I link all
| | 06:28 |
those together, and I just say, okay, I'm
going to choose pixels, and just do 0.
| | 06:32 |
You'll notice that it'll go ahead and
update padding for me.
| | 06:34 |
And now I have a single padding
declaration instead of all of those.
| | 06:38 |
Same thing for borders.
I'll jump down to borders.
| | 06:40 |
And for my border, let's say I, double
click that.
| | 06:45 |
I can say, one pixel, just type that in.
Let's say for Border color, I change the
| | 06:51 |
border color to gray and let's just say I
do that for the whole thing.
| | 06:56 |
So let's just say I do gray, for the whole
enchilada, if you will.
| | 06:59 |
Same thing for Border Style, maybe a solid.
| | 07:01 |
Now again, you notice that it's really
cleaned up that rule.
| | 07:04 |
Now if I change my font font, though.
Let's say I go to my Font Properties, and
| | 07:09 |
I tell the font weight to be bold.
Watch what Dreamweaver does now.
| | 07:12 |
Now, instead of continuing along with the
font shorthand notation It breaks each one
| | 07:18 |
of those out into font family, font size
and font weight.
| | 07:21 |
That may look a little less efficient but
you've got to remember that's what I told
| | 07:25 |
Dreamweaver to do.
I told it not to use shorthand notation,
| | 07:27 |
so as soon as I changed some of those type
properties it went ahead and separated
| | 07:31 |
those out, just the way I asked it to.
Now you may not like the same things I
| | 07:35 |
like, that's fine, not everybody likes to
work with CSS the same way.
| | 07:40 |
personally, I think it's great that Adobe
makes it so easy for us to get
| | 07:43 |
Dreamweaver's workflow.
To match your own personal preferences
| | 07:47 |
when it comes to how styles are authored.
| | 07:49 |
| | Collapse this transcript |
| CSS Designer overview| 00:00 |
Perhaps the biggest change in Dreamweaver
Creative Cloud is the new CSS Designer
| | 00:05 |
panel, has replaced the older CSS Styles panel.
| | 00:09 |
Now, for those of you that are used to
working with the Styles panel, the CSS
| | 00:13 |
Designer will take a little getting used to.
| | 00:16 |
If you're using Dreamweaver for the first
time, I think you're going to find the CSS
| | 00:19 |
Designer fairly intuitive.
Now either way, the CSS Designer is the
| | 00:24 |
main tool for creating and editing CSS in Dreamweaver.
| | 00:27 |
So, before we focus on the specifics of
managing and creating CSS.
| | 00:31 |
We really need to take a quick look at the
new panel, to become familiar with how its
| | 00:35 |
organized.
So, here I have the alumni.htm open.
| | 00:39 |
From the 07_02 /alumni directory, and I
had this one open because as so many CSS
| | 00:47 |
sources, let me show you what I'm talking about.
| | 00:49 |
If I go over to Code view, I'm just
going to scroll up here.
| | 00:52 |
You can see we have one, two, three, four
separate external files attached to this.
| | 00:57 |
Now normally I would never do that, but
again, this is just an exercise, right?
| | 01:00 |
And if I scroll down, I also have one
style that's embedded on the page, and the
| | 01:05 |
reason I'm doing all of this on this file,
is I really want to put the CSS Designer
| | 01:09 |
panel through its paces.
All right, so I can find the CSS Designer
| | 01:13 |
panel right over here in the panel dock
you can also open it by going to Window
| | 01:17 |
and choosing CSS Designer.
And this panel, it takes up a lot of
| | 01:22 |
screen real estate, it's very easy for it
to get cluttered, which is why.
| | 01:25 |
I have all of the other panels collapsed
when I use it.
| | 01:29 |
Now there are four main sections, sources,
media, selectors, and properties.
| | 01:34 |
These can be collapsed as well.
So, if I wasn't using sources, for
| | 01:38 |
example, I can click once on that and
collapse it.
| | 01:40 |
So, I can just look at properties.
Or I could just look at selectors, I can
| | 01:44 |
filter these out too.
Clicking them once again brings them all
| | 01:48 |
back.
So, anytime you're trying to look at all
| | 01:51 |
of them at once, you know, this vertical
panel is, is really, really cluttered,
| | 01:55 |
very hard to do.
Well, one of the nice things about this is
| | 01:58 |
that the panel's actually responsive.
Notice that if I place my cursor between
| | 02:03 |
the panel and the application frame.
And just drag that to the left a little
| | 02:08 |
bit.
As soon as it gets to a certain break
| | 02:10 |
point, it's going to go ahead and become a
two column panel.
| | 02:14 |
And this makes using it a lot easier
because it allows me to have my sources,
| | 02:19 |
my et media, and my selectors over on the
left-hand side.
| | 02:23 |
While my properties, which honestly takes
up a tremendous amount of room, is over
| | 02:27 |
there on the righthand side, kind of all
by itself.
| | 02:30 |
Now, flip side of this is, I have less
room over there on the left hand side for
| | 02:33 |
the actual document itself, but in most
cases, you'll have a big enough monitor
| | 02:38 |
for it not to be a huge problem.
On smaller monitors, it may be a little
| | 02:43 |
bit of a liability, but this is something
that you'll learn to kind of work within
| | 02:47 |
in terms of a constraint.
Let's go through kind of what we're
| | 02:50 |
looking at here, and I'm going to start in
this sources section.
| | 02:53 |
Within the sources section, you're
going to see a listing of all of the
| | 02:57 |
sources.
For the CSS for this particular file.
| | 03:00 |
In this case, we can see the main CSS,
boilerplate, alumni, typography and style.
| | 03:06 |
Typography has something beside it that
the others don't.
| | 03:09 |
If I switch over to Code view and scroll
up you'll see why.
| | 03:13 |
You can see right here that the
typography.css has immediate declaration
| | 03:17 |
whereas the other ones don't.
So, one of the nice things about the CSS
| | 03:21 |
Designer panel is right beside the
external CSS files you'll get whatever
| | 03:25 |
media declaration they have attached to
them as well.
| | 03:28 |
And that's pretty cool.
Now this style tag right here is referring
| | 03:32 |
to the embedded styles that we have on our page.
| | 03:35 |
So essentially, you can filter through
these sources and when I click on one
| | 03:39 |
source versus another the items below it change.
| | 03:43 |
In terms of et media, what it's looking
for are media queries.
| | 03:47 |
It's looking for media queries that are
applied within the styles themselves.
| | 03:51 |
So, if I click on alumni, for example, I
notice that this one has two media
| | 03:55 |
queries.
Only screen and a minimum width of some
| | 03:58 |
sort.
Now, here's what really nice.
| | 04:00 |
Notice that even though that this is a
responsive panel, I can drag the divider
| | 04:04 |
between these two sections as well, so I
can continue to resize this.
| | 04:10 |
And then begin to resize the divider.
So that I can read all of this too.
| | 04:14 |
Again you're taking up a little more space.
| | 04:17 |
But at least I can see these now.
So, I know the alumni has two media
| | 04:21 |
queries.
One that's restricting styles that are
| | 04:24 |
applied only to a minimum width of 481 pixels.
| | 04:27 |
And the other a minimum width of 769.
Now, in addition to being able to filter
| | 04:34 |
my styles by where they're coming from, I
can use these media attributes to filter
| | 04:39 |
out the styles by media querries as well.
So, if I click on alumni.css and then
| | 04:45 |
click on only screen.
Notice that the list of selectors down
| | 04:48 |
here are filtered to display only the
styles that are written for that section
| | 04:53 |
of the external style sheet.
That is a really powerful feature, and
| | 04:57 |
it's something that I've been wanting in
Dreamweaver for quite some time.
| | 05:00 |
Now it's really easy for me to tell which
styles are contained within which media
| | 05:05 |
query.
Now, also, if I click on global, I get all
| | 05:08 |
the styles that are outside of the media
queries, and that's also very useful.
| | 05:11 |
Now, it's not restricted.
This media declarations, they're not
| | 05:15 |
restricted to just media queries.
You'll notice if I click on boilerplate, I
| | 05:19 |
also have a print declaration inside of that.
| | 05:22 |
And so I can look at print styles as well. Alright.
| | 05:24 |
Now I'm going to go back to all sources.
And I'm going to go back to global, so I'm
| | 05:28 |
looking at everybody.
And now, I get a list of all the selectors
| | 05:32 |
in my file.
Now, these are all the selectors from
| | 05:35 |
every single one of these external style
sheets, and the embedded style.
| | 05:39 |
So, if I want to be that broad, and look
for everybody, I can.
| | 05:43 |
Now, one of the things that always kind of
frustrated me in the past about looking
| | 05:46 |
through selectors, was having to find a
specific selector.
| | 05:49 |
You've got to scroll through them all and
one of the things that dream weaver does,
| | 05:53 |
is it doesn't put them in alphabetical order.
| | 05:54 |
That's actually a good thing, because you
want to see the selectors in the order
| | 05:58 |
that they're found because that's going to
impact how certain selectors override
| | 06:03 |
others.
So, Dreamweaver is actually doing the
| | 06:05 |
right thing there, but it can make it
really hard to find some things.
| | 06:08 |
So they've added this nice little feature
right here, that allows me to search for a
| | 06:12 |
selector so, if I click inside of that and
I type in say article, notice that it's
| | 06:16 |
going to filter down.
And it's going to only show me the
| | 06:19 |
selectors that contain article inside of them.
| | 06:22 |
Now that can still be pretty broad as you
can see here I have a lot of selectors
| | 06:25 |
that have some form of the word article in
them, but it's still less than (UNKNOWN)
| | 06:29 |
before.
It's also very sensitive in terms of what
| | 06:32 |
you type in.
If I type in the word caption for example,
| | 06:35 |
you can see that I get not only these
classes of captions, but also the caption
| | 06:40 |
selector itself.
If I refine that, however, by doing
| | 06:43 |
.caption, notice it's only going to show
me the elements that have the class
| | 06:48 |
caption selector applied to them.
So, you can refine this search anyway that
| | 06:52 |
you want and anytime you want to clear it,
you can simply click the X and it will go
| | 06:56 |
ahead and clear that as well.
Once you actually focus on a selector,
| | 07:00 |
let's say I focus on p.branding here for example.
| | 07:03 |
If I click on this the Properties pane
here on the right hand side now populates,
| | 07:08 |
and I can see all of the properties that
are applied to this one.
| | 07:12 |
And I can modify and apply new properties
at this time if I'd like.
| | 07:15 |
Now, I like the Properties pane but I've
gotta, I've gotta be honest about this.
| | 07:20 |
It's not the most efficient thing in the
world to scan through.
| | 07:24 |
As you can see, it's very visual.
Things like margins, padding, border
| | 07:28 |
radiuses, things like that, they have
dialog boxes that are really a lot more
| | 07:32 |
visual in nature than what we're used to
using inside Dreamweaver.
| | 07:36 |
Now when you're creating styles from
scratch, that's nice because you get sort
| | 07:40 |
of this visual representation of it.
But when you're trying to scan through,
| | 07:43 |
and figure out which properties you have
applied, it's not he easiest thing in the
| | 07:46 |
world.
That's one of the reasons why they gave us
| | 07:49 |
this little Show Set up here.
If I click this checkbox.
| | 07:53 |
Notice that it now restricts these
properties to only the ones that are
| | 07:57 |
currently set on the rule.
For complicated rules like this one, it
| | 08:00 |
still a lot to sort through, but it's
better than it was.
| | 08:03 |
And for most rules, it's going to
dramatically lower what you have to scan
| | 08:08 |
through.
And you're going to be able to very
| | 08:09 |
quickly and easily tell what you have.
Now in addition to you being able to sort
| | 08:13 |
of scan through the sources, your media
attributes and filtering things out that
| | 08:17 |
way.
In addition to being able to select
| | 08:20 |
individual selectors and seeing their properties.
| | 08:22 |
You can go the other way with this, as well.
| | 08:23 |
Let's say I switch to Design view, and I
click on this element, the Roux Academy
| | 08:28 |
Alumni Profile.
If I go down to the tag selector just to
| | 08:31 |
make sure I have the h1 selected, look
what happens over in the CSS Designer
| | 08:35 |
panel.
Now in the selector area it says,
| | 08:37 |
computed, so what I'm looking at in the
properties, is I'm looking at all of the
| | 08:42 |
computed rules that are applied to this,
and basically, they're values.
| | 08:45 |
So, I'm seeing sort of the finished
version of this, if you will.
| | 08:49 |
What's neat about this is I can see all of
the rules that are applying, and I can see
| | 08:53 |
them in the order that they're applying.
If I hover over this, each rule tells me
| | 08:58 |
where it's defined and what's going on
with it.
| | 09:01 |
That way I can sort of filter through
these find the properties that are being
| | 09:04 |
set see if they are actually applying or
not and if they are not it will have a
| | 09:08 |
strike through and they'll tell me why.
And then modify the ones that need to be
| | 09:11 |
modified, so its kind of a neat workflow
and it allows you to see very quickly and
| | 09:16 |
very easily whats happening with an
element style wise.
| | 09:18 |
And what you'll need to do to modify it,
so that's just a brief overview of the CSS
| | 09:24 |
Designer.
I know it seems like that's a lot to
| | 09:26 |
remember, but trust me, that's not
everything the CSS Designer panel can do.
| | 09:31 |
Don't worry, though.
If you seem a little overwhelmed, don't
| | 09:33 |
worry about it.
We're going to be using this panel
| | 09:35 |
throughout the rest of the chapter, and
indeed, really, the rest of the course,
| | 09:39 |
which is going to give you plenty of time
to familiarize yourself with these
| | 09:42 |
capabilities.
As well as exploring some of the
| | 09:44 |
additional functionality a little bit
later on.
| | 09:46 |
| | Collapse this transcript |
| Creating a new CSS rule| 00:00 |
Creating a new CSS selector using the CSS
Designer panel is incredibly simple.
| | 00:05 |
You can do it in just a single click.
Now, that wasn't always the case with
| | 00:09 |
Dreamweaver.
So if you've used previous versions,
| | 00:12 |
you're going to find the process of visual
creating CSS rules a welcome change.
| | 00:17 |
To show this off, I have the index.htm
file open from the 07_03 directory.
| | 00:23 |
And just scrolling down a little bit is
going to show you guys that these
| | 00:27 |
headlines do not look the way they really should.
| | 00:30 |
So we're going to style those over the
next couple of exercises using the CSS
| | 00:35 |
Designer panel.
And this exercise, we're just going to
| | 00:37 |
focus on creating the selector for them.
Okay, so, I want to focus on these to
| | 00:41 |
kind of figure out what they are.
So if I double-click on one of these
| | 00:45 |
headings, I can see it's a heading 2.
And using the Tag selector I can see it's
| | 00:49 |
in a section with the class of both show
info and condense on it.
| | 00:54 |
I think I'm going to use the show info.
Because if I'm looking through my
| | 00:58 |
selectors, let's say I go to, up here to
all sources.
| | 01:01 |
And, and just hit the main.css, if I kind
of scroll through these, you can see I
| | 01:07 |
have a lot of section info.
I have some section condenses, as well.
| | 01:11 |
But mainly, most of this stuff is section
info, and since I structured the file I
| | 01:16 |
know that each one of these has a class of
info applied to it.
| | 01:20 |
So that would allow us to be pretty consistent.
| | 01:22 |
I'm going to do that.
Now, creating a new selector is really
| | 01:25 |
just as easy as clicking the plus button
here, but there are a couple of things
| | 01:28 |
that you want to think about.
Number one is where do you want this rule
| | 01:32 |
placed within your styles?
If you want it at the very bottom, then
| | 01:35 |
you don't need to worry about selecting anything.
| | 01:37 |
You just click the plus button and it will
be placed at the very bottom of your
| | 01:40 |
styles, easy.
However, in this case, I want to sort of
| | 01:44 |
make sure it's grouped with these
selectors as, as well.
| | 01:47 |
Number one, it's going to help keep my
styles organized, but number two, there
| | 01:50 |
might actually be some things going on
within the cascade.
| | 01:53 |
That cause me to want it to be placed here.
| | 01:55 |
So in order to make sure that your
selector's going to be written the way
| | 01:59 |
that you want.
And placed where you want, there are two
| | 02:01 |
things that you're going to be doing.
Number one, we've already done.
| | 02:04 |
You selected the element on the page.
So we've focused on that element, and
| | 02:07 |
Dreamweaver now knows what we're trying to
style, or at least has an idea of what
| | 02:11 |
we're trying to style.
Over in the Selectors panel, however, now
| | 02:14 |
what I want to do is I want to select on
the rule that I want my new selector to
| | 02:19 |
appear underneath.
So I'm going to click one time, not twice
| | 02:22 |
but just one time, on this section.info.
That's going to establish focus there.
| | 02:26 |
So now whenever I create a new CSS rule,
It's going to appear directly underneath
| | 02:32 |
the rule that I have highlighted, all right?
| | 02:34 |
So now I click the plus button and I get a
brand new selector.
| | 02:37 |
Now, Dreamweaver's going to do the best it
can to resolve that based on what you have
| | 02:43 |
selected.
Because I have that h2 selected, you'll
| | 02:46 |
notice it's doing show, info, condense.
All three of those classes.
| | 02:50 |
Mmm, that's not really what I want.
In fact you might actually be seeing
| | 02:54 |
something a little different, based on
what you have selected, and how you've
| | 02:57 |
selected it.
What Dreamweaver's going to do is it's
| | 02:59 |
going to take a look at the element, that
you're inside of or the element that
| | 03:02 |
you're focused on.
And its going to try to give you the best
| | 03:05 |
possible selector.
It doesn't always do the greatest job, so
| | 03:09 |
what I like about this is, I'm not tied to
this in any way.
| | 03:12 |
I don't have to hit any buttons to modify
this, I don't have to go through any type
| | 03:17 |
of dialog box, I just type.
So, what I'm going to do is I'm going to
| | 03:21 |
highlight everything except for the h2.
And I'm just going to type in
| | 03:26 |
section.info, and notice that as I begin
typing, I get code hinting.
| | 03:31 |
This is so cool.
Dreamweaver realizes, oh, you want
| | 03:34 |
something a little different, okay, cool.
And if I start typing in different types
| | 03:37 |
of elements, different selectors, or
classes and IDs that it knows are on the
| | 03:41 |
page.
It's going to bring those up for me, so I
| | 03:44 |
don't even have to finish typing that myself.
| | 03:45 |
As soon as info comes up, I can just hit
enter or return, and it'll finish it for
| | 03:49 |
me.
So I want to make sure that it says
| | 03:51 |
section.info, no spaces, and then a space
between the section info and the h2.
| | 03:57 |
This is a descendant selector, this is
going to target any heading 2 found inside
| | 04:01 |
of a section with a class of info.
So it's a pretty specific selector.
| | 04:06 |
When I hit Enter or Return, it's going to
go ahead and create it for me.
| | 04:09 |
Now, the first time I saw Dreamweaver do
that, I had a little bit of a heart
| | 04:13 |
attack.
Because I was like, wait a second, I told
| | 04:15 |
you to put it in a specific location.
And all of a sudden It visually looks like
| | 04:19 |
you jumped down to the bottom of your
styles, it hasn't.
| | 04:21 |
For whatever reason, Dreamweaver decides
to go ahead and place that at the bottom
| | 04:25 |
of the visible Selector panel, but it's
still right where you want it, okay.
| | 04:29 |
So I wish it didn't do that, give you a
little bit of a heart attack, but don't
| | 04:32 |
worry it's not a big deal, it's right
where it's supposed to be.
| | 04:35 |
Now, if you're curious about how the
selector was created, just go over to the
| | 04:40 |
main.css file, scroll up through your
styles until you find that one.
| | 04:48 |
There we go.
And there is my section.info h2 selector
| | 04:52 |
or my heading two inside of a section with
a class of info.
| | 04:55 |
Now, it's an empty selector right now.
We haven't added any properties
| | 04:59 |
whatsoever.
So the next step after creating a rule, is
| | 05:02 |
to define the properties and the values
that you need for that rule.
| | 05:05 |
Now, since that process is a little bit
more complicated, it does deserve a closer
| | 05:10 |
look.
So we're going to explore setting rule
| | 05:12 |
properties through the rule definition
dialogue boxes to the right of that in our
| | 05:16 |
next series of exercises.
| | 05:18 |
| | Collapse this transcript |
| Styling type properties| 00:00 |
Whether you're creating a CSS rule or
editing an existing one, the process of
| | 00:06 |
using the CSS Designer panel is exactly
the same.
| | 00:09 |
So with that in mind, I want to turn our
focus on to the specific areas of
| | 00:14 |
properties within the CSS Designer
Properties pane.
| | 00:18 |
We're going to start by looking at setting
type properties for our rules.
| | 00:22 |
I'm working on the Index file.
In this case I've opened it up from the
| | 00:25 |
07_04 directory, however, we're just
picking up right where we left off on the
| | 00:30 |
last exercise.
So if you still have that file open that's
| | 00:33 |
cool, no big deal.
So what I'm looking at is, I'm going to
| | 00:35 |
either go to All Sources, or main.css,
doesn't matter which.
| | 00:39 |
And I'm going to scroll down until I find
that section info h2 selector that we
| | 00:45 |
created in the last exercise.
Now, I just want to click on it once.
| | 00:48 |
If you click on something twice,
Dreamweaver lets you edit the rule, which
| | 00:51 |
is awesome.
Because you can rename it, if you've made
| | 00:54 |
a typo, you can fix it.
It's kind of neat, but that's not what
| | 00:57 |
we're trying to do.
We're actually trying to set the property.
| | 00:59 |
So I just want to click on it once.
You just want that sort of light grey
| | 01:02 |
highlighting.
Now if I look, if I click on that and I
| | 01:05 |
look over here in the Properties pane, I
don't see anything.
| | 01:08 |
Now you might see something a little
different than me because I have this
| | 01:11 |
little checkbox, Show Set, I have that selected.
| | 01:15 |
Now what that does is it lets you filter
out the selectors, so that you're only
| | 01:18 |
seeing the properties that have been set
on it.
| | 01:20 |
Since this selector's empty, doesn't have
any properties, it's totally empty.
| | 01:24 |
I'm going to deselect that, and that gives
me access to all of the properties, the
| | 01:29 |
available properties.
And now I can start creating this rule or
| | 01:32 |
at least filling it with some properties.
Now you can see, just by scrolling through
| | 01:36 |
this, that there's a lot to this
Properties pane.
| | 01:39 |
And if you are trying to do all of these
just by scrolling through and figuring out
| | 01:43 |
what's where It might take you a little
bit of time.
| | 01:45 |
It's worth noting that all these
properties have been organized into
| | 01:49 |
sections.
And you can actually see those sections if
| | 01:52 |
you go right up here to the top, there's
some icons up here.
| | 01:54 |
We have Layout, we have Type, we have
Borders, we have Backgrounds, and then the
| | 01:59 |
nebolously named Others.
All right, I just want to click on Text.
| | 02:04 |
Now, that actually doesn't filter out the
properties that I've seen.
| | 02:07 |
The only thing that this does for me, is
it just sort of navigates me down to that
| | 02:10 |
text area.
So, it's not that clicking on one of these
| | 02:14 |
isn't going to filter out the rest of the
properties, it's just going to navigate
| | 02:17 |
you to that particular section.
So, let's take a look at what we're
| | 02:20 |
going to do for our heading 2.
The first thing I want to do is choose a
| | 02:23 |
color for this.
Now, I can grab the color chip and set the
| | 02:25 |
color that way.
That gives you a color picker and you even
| | 02:28 |
have this color wheel that you can come
into and choose for your system.
| | 02:33 |
Cancel out of that, and you can also when
you click on this, choose the Format you
| | 02:36 |
want.
Rgb, hexadecimal, three or six digit hex,
| | 02:40 |
so you can really choose whatever format
that you like the best.
| | 02:43 |
Now frankly, if I'm using something like
white, which I'm using, I just like to
| | 02:48 |
type in the keyword, so if that's the case.
| | 02:50 |
You can just type in the keyword right
beside it (SOUND) and there you go, there
| | 02:53 |
we have white, excellent.
Now the next thing I want to do is declare
| | 02:56 |
a font family for this, and here I have a
little bit of a quandary.
| | 03:00 |
Because one of the things I'm doing is I'm
using a custom at font-face.
| | 03:04 |
I’m using the font-face bidder for this,
and I want to provide some fallbacks for
| | 03:08 |
this.
Well, if you know what font you need, you
| | 03:10 |
can click and all of your font stacks that
you have defined in Dreamweaver come up.
| | 03:15 |
Now you can define your own custom font
stack, and in this case, that’s definitely
| | 03:19 |
what I want to do.
You could also double-click if you wanted
| | 03:22 |
to.
And I just want to show you this.
| | 03:23 |
You can double-click an type in your own
if you'd like.
| | 03:27 |
I find this to be extremely inefficient,
because chances are if I want to set this
| | 03:30 |
font stack on one rule, I probably want to
do it on multiples.
| | 03:34 |
So actually what I want to do is just
click one time.
| | 03:37 |
And they go to Manage Fonts.
Now this is nice, this gives me the
| | 03:41 |
opportunity to use Adobe's Edge Web Fonts
if I want to go out and browse for some
| | 03:45 |
web fonts to use.
I can also specify local web fonts if I
| | 03:49 |
want to use those here or, in my case I've
already written rules for them.
| | 03:53 |
So I can just go to Custom Fonts stacks
and start making my own.
| | 03:57 |
Now one of the things you can do is you
can just sort of browse through all of the
| | 04:01 |
fonts that you have installed on your system.
| | 04:03 |
And of course yours is going to look a
little different than mine.
| | 04:06 |
Well, that's great.
But what if you're using a custom font
| | 04:09 |
like Bitter for example.
It's not installed on this system but I
| | 04:13 |
know they have already written the rules
for it.
| | 04:14 |
I know what I need to use, that sort of thing.
| | 04:16 |
Well, that's easy enough.
I can just come right down here.
| | 04:19 |
And I can just type in the font exactly as
I need it.
| | 04:23 |
Now in the case of bitter, the way I
defined it was with a capital B.
| | 04:26 |
So I want to use that capital B.
And then I can just click the arrow.
| | 04:30 |
And it's going to add it to this
particular stack.
| | 04:32 |
I can then customize that stack any way
that I want.
| | 04:35 |
So for example I could type in G to browse
down to G's.
| | 04:40 |
And that makes it easier for me to find Georgia.
| | 04:42 |
I'll just add that.
I'm also going to go down into my T and
| | 04:46 |
find Times or Times New Roman, and I'll
add that.
| | 04:51 |
And then finally at the very bottom of
these stacks you're going to find your
| | 04:55 |
sort of default font families.
And in this case I'm going to add Serif to
| | 04:59 |
the end of it.
So those are my fallbacks, I'm telling you
| | 05:01 |
to use Bitter.
If it can't use Bitter, find Georgia.
| | 05:03 |
If it can't find Georgia, use Times New Roman.
| | 05:05 |
If it can't find that, just use the
default Serif font.
| | 05:09 |
I'm going to click Done.
And that process took me a little time.
| | 05:13 |
But the beauty of this is, is now, when I
click, I have that font stack available to
| | 05:18 |
me.
And I'll have it available to me from now
| | 05:20 |
on.
So, that's, that's going to be something I
| | 05:22 |
can use over and over again.
Now, you'll notice all the rest of the
| | 05:25 |
stuff we have here.
We have things like font styles, font
| | 05:28 |
variants, font weight.
For font weight, I'm going to go ahead and
| | 05:31 |
click that and choose a 100.
I could also choose bolder, but since this
| | 05:34 |
is a custom web font, 100 is using
actually the lighter version of that.
| | 05:39 |
We have font size, and for font size, if I
click this, notice that I can choose any
| | 05:43 |
of the keywords, or, I can choose which
unit of measurement that I want.
| | 05:47 |
If you don't want to go through that
process of choosing a unit of measurement
| | 05:50 |
first, you can simply double-click, and
then you could type in whatever you want.
| | 05:54 |
In this case I'm going to type in 1.6em's.
Now be sure not to put a space between the
| | 06:00 |
value an the and the unit of measurement.
Then I'm going to hit Enter or Return, and
| | 06:04 |
its going to finish that for me.
I also want to give it a line-height.
| | 06:08 |
So I'm going to go ahead and type in 45 pixels.
| | 06:11 |
And thats going to pretty much do it for
the type properties that I want for this
| | 06:16 |
particular rule.
You'll also notice that we have things
| | 06:18 |
like text-align, text-decoration,
text-indent, we're not going to be using
| | 06:22 |
any of those.
Below that a little bit further down we
| | 06:24 |
have text-transform, letter-spacing, word-spacing.
| | 06:27 |
So you've got a lot of really common
typographic properties here, but we also
| | 06:31 |
have text-shadow.
And that's something that isn't as common,
| | 06:35 |
so its kind of nice that they're grouping
all that stuff together for us within
| | 06:38 |
these Type Properties.
You know, for the most part, setting these
| | 06:41 |
text properties is fairly straightforward.
You just sort of click on something, type
| | 06:45 |
in the value you want.
Or, you know, there are certain instances
| | 06:48 |
where you can use one of the menus if you
need to do that.
| | 06:50 |
And, for the most part, the CSS Designer
panel gives us almost all of the text
| | 06:56 |
properties that we might need right here
at our fingertips within the panel.
| | 07:00 |
Now later on we're explore how we can set
properties that don't show up in a
| | 07:03 |
specific section, and if you're looking
for those.
| | 07:06 |
But before we do that, we are going to
explore setting Basic Layout Properties in
| | 07:10 |
our next exercise.
| | 07:11 |
| | Collapse this transcript |
| Styling basic layout properties| 00:00 |
When creating or modifying styles, the CSS
designer's layout property grouping gives
| | 00:06 |
you an organized way of setting properties
regarding layout and box model properties.
| | 00:10 |
Let's take a closer look.
In this case, I have the index file from
| | 00:14 |
the 07_05 folder and I've just previewed
it on one of my browsers, in this case
| | 00:19 |
Opera.
Things don't look all that good.
| | 00:22 |
(LAUGH) As you can see, our layout appears
to be broken, none of these info sections
| | 00:27 |
are collapsing the way they're supposed to collapse.
| | 00:29 |
They're certainly lined up against each
other the way they're supposed to be lined
| | 00:32 |
up against each other.
So, you know, we have some real layout
| | 00:35 |
issues here.
Alright, I'm going to jump back into
| | 00:36 |
Dreamweaver, and let's see what's going on.
| | 00:38 |
Now, the first thing I want to show you
guys is kind of how the layout properties
| | 00:43 |
are structured, and kind of what's
available to us.
| | 00:45 |
I'm still on the main.css, and right now
I'm still focused on the section infoh2,
| | 00:48 |
although it doesn't really matter which
selector you're focused on right now.
| | 00:54 |
I just kind of want to go over what's
included in the layout area.
| | 00:58 |
So, we have things like width, height.
They've also added, and I love this,
| | 01:01 |
minimum and maximum width and height to, I
like that.
| | 01:04 |
We have our box model staples, if you
will, margin and padding.
| | 01:09 |
And these are arranged in sort of a visual way.
| | 01:11 |
We have different settings for top, right,
bottom and left, and we can link all those
| | 01:16 |
together if we'd like.
For padding for example, you'll notice
| | 01:20 |
that we have a left padding on this
section infoh2 of 0.6 ems.
| | 01:25 |
Now, when I hover over one of these
properties, I can either delete, which
| | 01:29 |
would remove that CSS property, I can also
disable it for a moment.
| | 01:32 |
So, let's say I'm in Live View, and I just
want to preview.
| | 01:35 |
Is that margin being effective for me, is
it something that you know, is really
| | 01:39 |
working for me.
Well, if I go in and find that selector.
| | 01:42 |
Let me go scroll down and find that again.
I can come in to padding, and I can just
| | 01:47 |
disable that for a moment.
As soon as I do that, I can see that
| | 01:50 |
indeed that heading is just, doesn't look
good without it.
| | 01:52 |
So, I'm going to turn it back on, and
that's just enabling it.
| | 01:55 |
So, that's kind of neat that you can do that.
| | 01:57 |
Now, in addition to the box model
properties of margins and padding if I
| | 02:01 |
scroll down, we also have positioning.
So, absolute positioning, relative
| | 02:05 |
positioning, fixed, that sort of thing.
We have offsets for top, right, bottom and
| | 02:09 |
left.
we have floating properties, clearing
| | 02:12 |
properties.
And then we have individual overflow, x
| | 02:15 |
and y.
We have the display, so block in line that
| | 02:19 |
sort of thing.
Visibility z index and opacity, so there's
| | 02:22 |
a lot going on here in sort of this layout grouping.
| | 02:25 |
Alright.
So, let's start putting all of this to
| | 02:27 |
use.
So, I'm going to turn Live View off.
| | 02:30 |
And there are certain selectors I need to
look for.
| | 02:32 |
I'm going to again, go to my All Sources,
and I'm going to scroll down.
| | 02:36 |
Although wait a minute, I don't need to
scroll down.
| | 02:38 |
I've got this search feature, which I love.
| | 02:40 |
So, I'm going to type in section.
And what I'm looking for is this one right
| | 02:44 |
here, section.info.
And one of the things that I have found
| | 02:48 |
getting used to using the CSS designer, is
I use that search a tremendous amount.
| | 02:53 |
Even if it's just typing in the first two
or three letters of selector, it allows me
| | 02:58 |
to jump down to it so fast and so easy.
I just, I love that feature.
| | 03:02 |
Okay.
Now, what I want to do these section info,
| | 03:04 |
is in there are all of those boxes, is I
want them to the left.
| | 03:07 |
And to do that, I'm just going to come
down here to my floats, and I have three
| | 03:10 |
icons: left, right and none.
And I'm going to go ahead and click left,
| | 03:15 |
and now they're floating them left.
If I do a Save All; go back in my browser
| | 03:21 |
and refresh my page.
Okay, that's looking a little better.
| | 03:24 |
Everything's not fixed yet, but we're,
we're gettin' there.
| | 03:27 |
Alright, so back inside Dreamweaver, what
I want to do next is I want to deal with
| | 03:31 |
the fact that those sections that have
condense apply to them.
| | 03:34 |
They all should be condensed down with a
transition applied to them that opens them
| | 03:38 |
up when you hover over them.
So to find that, I'm going to deal with
| | 03:41 |
the section dot condense.
Now, because I'm already filtering out the
| | 03:44 |
selectors through the search, should be
pretty easy for me to scroll down and find
| | 03:48 |
that selector.
So again, this search feature is awesome,
| | 03:51 |
and it's persistent.
So, if I leave it up there, I'm going to
| | 03:54 |
filter it to just these section selectors.
So, with that selected, I'm going to go
| | 03:59 |
back up.
And this time, I'm going to take advantage
| | 04:02 |
of the fact that I have minimum and
maximum height values available to me
| | 04:05 |
right here.
I'm going to go ahead and constrain the
| | 04:07 |
height of this and give it a maximum height.
| | 04:10 |
And again, I can just double click into
that section of 308 px or pixels.
| | 04:15 |
Again, if I hit Enter or Return, it's
going to do that for me.
| | 04:17 |
I'm going to do a save all, and then go
back out to my browser and refresh the
| | 04:23 |
page.
Now, when I scroll down, I can see that
| | 04:26 |
indeed, they're all condensed to that 308
pixels, which is awesome.
| | 04:30 |
Now, our layout is still broken, and I
don't see these guys beside each other.
| | 04:33 |
And it's not immediately apparent what is
going on, but the problem is, this header
| | 04:39 |
logo up here, it has a margin bottom
applied to it right now or actually I
| | 04:43 |
think this has a margin top.
But essentially, this is still in normal
| | 04:46 |
document flow, which means that these two
are interacting with each other and it's
| | 04:49 |
pushing this down.
So, I'd like to remove this from normal
| | 04:53 |
document flow and the easiest way to do
that Is to use absolute positioning.
| | 04:57 |
So, I'm going to go back into Dreamweaver,
and I need to find the selector for page
| | 05:03 |
one header, because that's what that is.
And in fact, if you don't know what it is
| | 05:06 |
on the page, you can always click into
something and see okay, this is an h1 and
| | 05:11 |
its inside of a header with a value of
page header.
| | 05:14 |
So, you can sort of filter that out, but
the other thing that you can do is simply
| | 05:18 |
by clicking inside of this or on that logo.
| | 05:21 |
Look what happens to my selectors over here.
| | 05:22 |
They sort of self filter, and I get all of
the selectors that apply to that
| | 05:27 |
particular element.
In this case, I can click on that page one
| | 05:30 |
header to focus on that, I can begin to
make changes to it as well.
| | 05:33 |
So, you're not always going to have to
filter through every single selector or
| | 05:36 |
use the search feature, a lot of times,
you can click directly on an element and
| | 05:40 |
go ahead and get values that way.
So, what I want to do here, is I want to
| | 05:43 |
change position to absolute.
So, I just click on that menu right there,
| | 05:47 |
choose Absolute.
And for top and left, I'm just going to
| | 05:51 |
turn on these values for zero.
I don't really need to enter anything
| | 05:53 |
there because I want them to be arranged
to the top left.
| | 05:57 |
I could have just left those off because
that's kind of the default, but I like to
| | 06:00 |
be thorough.
Again, I'm going to do a Save All, go out
| | 06:02 |
to my browser and refresh.
Now, the layout looks the way I want it
| | 06:07 |
to. Perfect.
| | 06:08 |
Now, having all of these layout properties
grouped together makes them incredibly
| | 06:12 |
easy to find, and makes it even easier for
you to modify or apply those changes.
| | 06:17 |
The visual nature of some of those
properties like margins and padding, and I
| | 06:21 |
want to go back to that for just a moment.
This, this visual manner right here of
| | 06:26 |
margins and padding, and having to set
those individually or link them together,
| | 06:30 |
that takes a little getting used to.
You're going to have to adapt that if
| | 06:34 |
you're used to simply writing that out
like I am.
| | 06:36 |
It's still taking me a little time to get
used to them.
| | 06:38 |
But overall, I think you're going to find
the editing process of CSS using the CSS
| | 06:43 |
designer a little faster.
| | 06:45 |
| | Collapse this transcript |
| Styling borders| 00:00 |
Much like type and layout properties, the
CSS Designer also has a section for
| | 00:05 |
setting border properties.
So, I want to take a closer look at the
| | 00:08 |
border properties and kind of how they're
organized, because it takes a little
| | 00:12 |
getting used to, to be honest with you.
This time I'm going to be working in the
| | 00:15 |
request.htm, and you can find this file in
the 07_06 /admissions.
| | 00:23 |
Now, there's two things I want to do here
in terms of playing around with borders.
| | 00:26 |
I'm going to scroll down, and you can see
in this bottom footer section; oh,
| | 00:30 |
(INAUDIBLE) let's just go ahead and
preview this in a browser.
| | 00:34 |
You see if I scroll down, those dividers
that were used to seeing here insider our
| | 00:40 |
footer they're gone.
So, I was saying I'm using a boarder to
| | 00:43 |
use those divider.
so, I'm going to go ahead and style that
| | 00:45 |
using the CSS Designer. Okay.
| | 00:47 |
So, the selector I'm looking for, I can
just click on all sources here.
| | 00:50 |
And again, you can either click inside
that and choose like the column that is
| | 00:57 |
inside of and find this, or I can just
search through here.
| | 01:00 |
So I like, actually I like looking at
main.css and searching.
| | 01:04 |
And what I'm going to do here is footer.
So I'm looking for all the footers, and I
| | 01:08 |
want to do footer.call, there we go.
So, sometimes it's a little hard to find,
| | 01:13 |
but doing a nice search there makes it a
little bit easier to filter those out.
| | 01:17 |
Now, I'm going to click on the border
properties, which is this third icon right
| | 01:20 |
here.
I agree with most of what they've done in
| | 01:22 |
terms of organizing properties, but I'm
going to be honest with you guys.
| | 01:27 |
Border takes a little while to get used
to, and I'm just going to expand this over
| | 01:31 |
a little bit so you can see this a little better.
| | 01:32 |
Notice, it starts with border collapse,
and that's a property that tables use to
| | 01:37 |
determine whether or not the adjoining
cells, abortion table cells should
| | 01:41 |
collapse into a single value or get a
double value.
| | 01:45 |
Then we have border spacing, and then we,
we start with the border properties that
| | 01:49 |
you're probably more used to using.
We have border color.
| | 01:53 |
And then we go right to border top, border
right, border bottom, and border left
| | 01:57 |
color.
I understand why they were organized in
| | 01:59 |
this way.
All the widths are together, all the
| | 02:02 |
colors are together, and all the styles
are together.
| | 02:04 |
The thing that's hard though, is that if
you want to set a border using shorthand
| | 02:08 |
notation where you're setting it for the
whole thing, you have to kind of jump
| | 02:12 |
through and go.
Okay, here's overall border color, here's
| | 02:15 |
overall width and here's overall style.
And when you're sort of scanning through
| | 02:21 |
them, they're kind of hard to find.
So, you have to be really, really careful.
| | 02:24 |
If you're trying to do it just to one side
or you know, the top or bottom, it's a
| | 02:29 |
little easier because you're looking for
that sort of keyword write.
| | 02:33 |
But it's really easy to click here instead
of here and not understand what you've
| | 02:37 |
done, or to click here instead of here.
So, when you're setting border properties
| | 02:42 |
be very, very careful about this.
You know, they had two choices here.
| | 02:45 |
They could have taken the generic ones and
sort of put them up top, and then put the
| | 02:48 |
side-specific ones toward the bottom.
Or they could do what they did here, which
| | 02:52 |
is put all the colors, all the widths, and
all the styles together.
| | 02:54 |
And honestly, people would've complained
either way, so I kind of don't blame their
| | 02:58 |
decision.
Now, all I need for these columns is a
| | 03:00 |
border on the right hand side.
So, in this case, I am looking for this
| | 03:04 |
border right color.
So, what I want to do here is I'm going to
| | 03:07 |
type in a value, because I happen to know
what this is.
| | 03:09 |
I'm going to type in RGBA.
So, this dialog box supports any color
| | 03:13 |
format you want to use.
In this case, I'm using RGB with an alpha
| | 03:16 |
transparency.
So RGBA, and then a, a little bit of a
| | 03:19 |
comment here.
And I'm going to type here 191, 191, 191
| | 03:26 |
yes it's gray, 0.8 so that's my transparency.
| | 03:30 |
Then I gotta remember to close my
parenthesis and hit Return or Enter.
| | 03:34 |
Now, if I'm successful, I'm not only
going to see this here but I'm going to
| | 03:37 |
see a little preview of the color as well.
So, you should see the color that you're
| | 03:41 |
expecting.
I'm going to double check to make sure I
| | 03:44 |
was doing border right right there, and
now I'm going to focus on width.
| | 03:47 |
Again, I'm going to get a border right
width, and this time, I'm going to type in
| | 03:51 |
2 pixels.
The first time you click on this, it's
| | 03:54 |
tempting to start typing, but what you get
is you sort of get this list.
| | 03:57 |
And this list gives you a preset, keywords
that you can use.
| | 04:00 |
Or, if you want to go ahead and choose the
unit of measurement, you can select that
| | 04:03 |
as well.
Don't feel like you have to select that
| | 04:06 |
unit of measurement off the bat.
If you want, let me take focus off of it
| | 04:09 |
for a moment.
If you want you can simply double-click,
| | 04:12 |
and double-clicking that's going to allow
you type in whatever you want.
| | 04:15 |
In this case, I'm going to type in 2
pixels, 2px.
| | 04:19 |
Alright.
An then finally, I want to choose the
| | 04:21 |
style.
And again, I'm going to make sure that I'm
| | 04:23 |
choosing Border Right Style.
I'm going to grab that Pull-down menu, and
| | 04:26 |
in this case, I'm going to choose Solid.
So, I'll do a Save All.
| | 04:31 |
Go out to my browser, and refresh the page.
| | 04:34 |
Okay, cool.
Now, I'm seeing those borders show up in
| | 04:37 |
the right hand side, and they're exactly
the way I'm looking for.
| | 04:40 |
Now, in addition to just your normal
border properties, one of the things that
| | 04:44 |
this section also has is the border radius property.
| | 04:47 |
Border radius is very widely supported
now, so this is one of those things that
| | 04:50 |
we can begin to start using.
And I've got this little Request Info
| | 04:54 |
button over here, and I kind of like it
flat like this.
| | 04:57 |
But, let's just for exercise sake go ahead
around those corners.
| | 05:01 |
So, I need to find the selector first.
Again, I'm just going to use the search
| | 05:05 |
feature here, because that makes it nice
and easy.
| | 05:07 |
I'm going to type in input, and there are
all my input selectors.
| | 05:10 |
And input the type of submit.
That's my Submit button, so that's what I
| | 05:14 |
want right there.
Alright, I'm going to again, filter down
| | 05:17 |
and jump down to border, and I'm going to
scroll down to Border Radius.
| | 05:20 |
Now, this can look a little complex.
So, I want to show you how kind of what's
| | 05:23 |
going on here.
We have this 4r and ar, what does that
| | 05:27 |
mean?
Well, 4r means four radiuses, or radii I
| | 05:30 |
suppose.
That would mean the top left, top right,
| | 05:35 |
bottom right, and bottom left.
But if you hit 8, you get to set each one
| | 05:39 |
this individually.
Border top left and border top left you
| | 05:43 |
get two of them.
And that's actually, the CSS syntax allows
| | 05:47 |
us to do that, and that allows you to
create some really funky border radiuses.
| | 05:50 |
Now, I'm going to stick with the four
radius, and I'm actually going to do a
| | 05:55 |
consistent radius all the way through.
So, If I wanted to set each corner
| | 05:58 |
individually, I could do that.
But if I do this in the middle, it sort of
| | 06:01 |
links all those guys together.
And in this case, it doesn't really matter
| | 06:04 |
which one I click inside of, I can just go
and double click any of those.
| | 06:07 |
And in this case, I want to set it to 5 pixels.
| | 06:11 |
Now, when I do that, if I save this.
I will do a Save All, and then preview
| | 06:16 |
that in the browser.
It doesn't look horrible, it looks okay.
| | 06:18 |
I could also go in there and set up a
little bit more padding, if I wanted
| | 06:19 |
paddng on this.
In a certain browser you might not think
| | 06:20 |
it looks that great.
Honestly, one of the things I've noticed
| | 06:23 |
about formatting those Submit buttons is
sometimes it doesn't look all that swift.
| | 06:28 |
So if you want, you good go back in and up padding.
| | 06:38 |
You could take it to, like 0.4 top and
bottom, or 0.6 left and right.
| | 06:42 |
It's really up to you, you could just make
it look however you want.
| | 06:44 |
But it's nice to know that border radius
is supported right along with all the
| | 06:48 |
individual border properties.
Now, although you might wish that the
| | 06:52 |
border properties themselves were
organized a little bit differently.
| | 06:55 |
I think, if you're like me and once you
start using them, you'll get used to it,
| | 06:58 |
and it'll make a lot of sense.
It is nice to have this sort of central
| | 07:01 |
location, where we can set border and
border radius properties from.
| | 07:06 |
You know, I just wanted to advise you, be
sure to double check which border property
| | 07:10 |
you're setting in order to make sure that
you don't inadvertently set the wrong one.
| | 07:14 |
| | Collapse this transcript |
| Styling background properties| 00:00 |
Of all the CSS properties, background
property support in Dreamweaver created
| | 00:04 |
cloud has probably improved the most.
So I'm really anxious to show you guys
| | 00:09 |
what Dreamweaver can do now with
background properties.
| | 00:12 |
So I'm back working on the index file, in
this case I'm in the 07_07 folder.
| | 00:18 |
And you'll notice in my styles, I've
jumped down in my, in my selectors to the
| | 00:22 |
section info h2.
And that's that header we were working on
| | 00:26 |
earlier.
We're not quite done with that.
| | 00:28 |
Alright.
So I want to go play around with the
| | 00:31 |
background properties and if I click right
there, it shows me or at least takes me
| | 00:36 |
down to those background properties.
Now what's neat about this, you're going
| | 00:40 |
to see, you know, kind of already, the
preview of background.
| | 00:43 |
There's a gradient there.
And that sort of is a nice little
| | 00:45 |
foreshadowing there that Dreamweaver now
supports creating these background
| | 00:50 |
gradients or at least linear gradients
visually, which is really really cool.
| | 00:53 |
Alright.
Before we get into doing that.
| | 00:55 |
Let's take a look at just a overview of
some of the background properties that we
| | 00:59 |
can set.
We have background color.
| | 01:01 |
We have background image where we can set
a URL and a gradient.
| | 01:05 |
We have things that are relevant to
background image such as position, size,
| | 01:09 |
clipping, repeating, origin, attachment.
We also have box shadow, which is not
| | 01:15 |
technically part of the background, but it works.
| | 01:17 |
So, box, we have box shadow as well.
Now, let's just see how we set a generic
| | 01:21 |
background color.
You can go ahead and click this color
| | 01:23 |
chip.
You can set a color.
| | 01:25 |
And then quickly and easily you realize
you've made a horrible, horrible mistake.
| | 01:29 |
Once again, you can type in any value you want.
| | 01:31 |
And again, removing properties is
extremely simple.
| | 01:34 |
You just click on the property, click the
Trash Can icon, property goes away.
| | 01:38 |
Perfect.
So now let's get into defining a gradient.
| | 01:42 |
Now, these are a lot of fun to do and
you're going to find yourself probably
| | 01:45 |
doing them more than you should.
So remember everything in moderation
| | 01:49 |
folks.
Now before we go in and create the
| | 01:51 |
gradient, there are a couple of
preferences that I want to show you inside
| | 01:54 |
of Dreamweaver.
So I'm going to go up to Dreamweaver >
| | 01:57 |
Preferences.
Again, if you're on the PC, you're
| | 01:59 |
going to go to Edit > Preferences.
And, we want to stick with the CSS styles
| | 02:02 |
preferences. Okay.
| | 02:04 |
So right down here in the bottom we have a
preference that we looked at earlier but
| | 02:07 |
we didn't really talk too much about.
And that is use vendor prefixes.
| | 02:11 |
One of the things about gradients is their
syntax has changed so much over the years
| | 02:16 |
and there's so many different flavors of it.
| | 02:18 |
That in a lot of browsers, it's still
supported only through the use of vendor
| | 02:22 |
prefixes.
So I'm going to go ahead and turn these
| | 02:24 |
on.
And basically what this is doing is it's
| | 02:27 |
saying, hey I want it to work in these browsers.
| | 02:29 |
Now for some browsers like Firefox, for
example, we don't necessarily need that
| | 02:33 |
vendor prefix but it's going to help us
support the gradient in older versions of
| | 02:37 |
Firefox.
Then we have this very curious one, which
| | 02:40 |
is Dreamweaver Live View.
Now what is that?
| | 02:43 |
Well, that's the really, really, really,
really, really old web kit vender prefix.
| | 02:48 |
Nobody's really using that anymore.
It's like the, only use this if somebody's
| | 02:52 |
still using Safari 4.
The only reason that's even there, to be
| | 02:55 |
honest with you, is so that when you turn
on Live View and dream, it'll actually
| | 03:00 |
render out the gradient.
If you don't really care about that and
| | 03:03 |
you want to drop that prefix, which you
really probably don't need any more, then
| | 03:08 |
you can just deselect that.
You could also use it for testing
| | 03:10 |
purposes, deselect it at the very end and
sort of redefine it and it'll go away.
| | 03:15 |
For the time being I'm going to click all
of them because I really want to show you
| | 03:18 |
those vender prefixes in action.
I'm going to click OK and now I'm going to
| | 03:22 |
go create a gradient.
Now if you've ever worked with a program
| | 03:25 |
like Illustrator or Photoshop or In Design.
| | 03:28 |
You're going to know exactly how to do this.
| | 03:30 |
If I click on this color chip up comes the
color picker that has a great editor
| | 03:34 |
inside of it.
It's really neat.
| | 03:35 |
I don't know why Adobe has decided that
red is their default color.
| | 03:40 |
Oh, that's why Adobe's decided that.
Their logo's red.
| | 03:44 |
Alright, never mind.
So at any rate, almost every time you pick
| | 03:48 |
a color picker up and you haven't changed
something Adobe makes it red.
| | 03:51 |
So here's how this works, we have color
stoppers over here on the left hand side.
| | 03:55 |
And you can move these around and you can
also add new ones.
| | 03:58 |
So if you want multiple colors within your
gradients you can certainly do that.
| | 04:01 |
You want to get rid of them?
Just click them and move them to the left.
| | 04:04 |
No harm, no foul.
So what I'm going to do is I'm going to
| | 04:06 |
set this top gradient to white.
Now I'm also going to take the alpha
| | 04:11 |
setting, which is this slider and slide it
all the way down.
| | 04:14 |
That's going to make that particular part
of the gradient totally transparent.
| | 04:18 |
Then I'm going to click on the bottom
color stopper and I'm going to make that
| | 04:21 |
black.
Now, I'm also going to make this
| | 04:24 |
semitransparent.
So, I'm going to take this, slide it down
| | 04:27 |
'til its about 50%.
Really I'm sort of doing this visually.
| | 04:30 |
And, if I have any complaint about the
gradient picker myself, it would be that I
| | 04:36 |
don't have any numeric values.
I would love to be able to set the color
| | 04:40 |
slots numerically or set these values numerically.
| | 04:43 |
And even though I can sort of see these
values right here color wise.
| | 04:46 |
So .52 is going to be right at 50%.
But even though I can see that, I would
| | 04:51 |
really love to be able to see these.
One of my favorite features is that as
| | 04:55 |
your editing with these colors you can
actually store them as swatches.
| | 04:58 |
It's the only place in Dreamweaver where
we actually have swatches and it gives me
| | 05:02 |
hope that swatches might be coming a
little bit later down the line.
| | 05:06 |
Now I also can save these gradients themselves.
| | 05:08 |
I get slots here for five of them.
So if I like this gradient and I know I'm
| | 05:13 |
going to use it a lot, I can go ahead and
add it as a swatch and that gradient's
| | 05:16 |
there now.
So I'll tell you how I've used this.
| | 05:19 |
I've created gradients for buttons before.
And then if somebody hovers over it, I
| | 05:22 |
want the gradient to invert.
So I will save the gradient and then on
| | 05:26 |
the hover, I'll apply the same gradient
and change the angle of rotation to zero.
| | 05:30 |
Which will flip it, and now I'll have an
inverted gradient.
| | 05:33 |
So it's a really nice and quick and easy
way to use this.
| | 05:35 |
So once I'm done with my gradient, I just
hit Enter or Return and it goes ahead and
| | 05:39 |
applies it for me.
Now again, we placed the syntax in there
| | 05:42 |
and it's going to allow us to see this in
Live View.
| | 05:44 |
So I'm going to do a Save All and then I'm
going to turn Live View on, and there's my
| | 05:49 |
gradient.
If I were to preview this in my browser,
| | 05:51 |
now I can see the gradient here.
It doesn't look bad but it doesn't look
| | 05:56 |
all that great either.
I mean I could change it up a little bit,
| | 05:59 |
I could modify the color.
But after all, even though it's really
| | 06:03 |
cool and it's nice that I can use a
gradient inside Dreamweaver.
| | 06:05 |
It doesn't really fit with my design.
So I don't think I'm going to keep it.
| | 06:08 |
Before I get rid of it though, I want to
show you the syntax involved with this.
| | 06:12 |
So what I'm going to do is I'm going to
find that selector inside my main.css.
| | 06:18 |
Again, I'm going to scroll up and I happen
to have a good idea as to where this might
| | 06:24 |
be.
it's right.
| | 06:27 |
Down below the headers.
There we go.
| | 06:29 |
And I'm just going to switch to Code view
and shrink this down so you can see this.
| | 06:34 |
There we go.
So what you're seeing is you're seeing all
| | 06:40 |
of these background images.
You're seeing all five of these.
| | 06:43 |
And each one of them is using a different
vendor prefix.
| | 06:46 |
So we have our webkit gradient.
This is the old syntax.
| | 06:49 |
Then we have the newer webkit syntax.
The Mozilla for Firefox, Opera for Operah
| | 06:55 |
and then we have just the default linear
gradient syntax, which is rapidly becoming
| | 06:59 |
supported as vendor prefixes are dropped
for this.
| | 07:02 |
Now there are two things that this does
not have.
| | 07:04 |
It does not have a default background
color applied to it.
| | 07:07 |
So you might want to do that.
You might want to have a background color
| | 07:10 |
applied, which should show up in case the
gradient's not supported.
| | 07:13 |
And there's also net support for Internet
Explorer with this.
| | 07:15 |
Internet Explorer gradient support is
really dodgy.
| | 07:18 |
And you have to apply all weird these
alpha filters and things.
| | 07:22 |
So Dreamweaver doesn't to that syntax for you.
| | 07:24 |
But if you're interested in doing that,
there's plenty of tutorials out on the web
| | 07:27 |
or you can Google that and go to Internet
Explorer's developer site and they've got
| | 07:31 |
some information on that as well.
Now a like I said this is not exactly the
| | 07:36 |
way I want to end this.
So I'm going to go back over to my CSS
| | 07:40 |
styles and I'm going to again select that
section info h2 and I'm going to get rid
| | 07:45 |
of that gradiant.
Alright, so again I'm going to go down to
| | 07:48 |
my background properties.
And I'm just going to delete.
| | 07:50 |
Again, I don't have to go through and try
to redefine this.
| | 07:52 |
I can just click the trash can icon.
It's going to get rid of that.
| | 07:56 |
Now what I do want to set for this is a
background image.
| | 07:59 |
So instead of having the gradient as the
background image, I actually have a url.
| | 08:03 |
So I'm going to click on this.
Now again, I can type in this file path,
| | 08:06 |
but who knows that?
So anytime I want to use an image, all I
| | 08:10 |
have to do is click the Browse button and
I'm going to go into the 7, 7 underscore 0
| | 08:15 |
directory images.
And I'm going to scroll down until I find
| | 08:19 |
this one diagonal pattern.png.
I'm going to go ahead and click OK or
| | 08:24 |
Open.
And it's going to apply that.
| | 08:27 |
Now I could go ahead and set some
repeating on this if I want.
| | 08:29 |
I actually want it to repeat along the x
axis, so I'll click on that, it's just a
| | 08:33 |
little icon and it'll go ahead and apply
that property as well.
| | 08:36 |
So I'll do a Save All, preview that in my
browser and now instead of the gradient,
| | 08:42 |
I've got that sort of diagonal pattern
that I was looking for all along.
| | 08:47 |
Alright, so great support for background
properties and that ability to visually
| | 08:51 |
create those linear gradients in dream
weaver creative crowd and it's support for
| | 08:55 |
those vendor prefixes that go along with it.
| | 08:58 |
That's really, if you ask me, a big leap
forward in dream weavers css capabilites.
| | 09:03 |
Now, hopefully because Dreamweaver is a
creative cloud product, so updates will be
| | 09:07 |
hopefully pretty regularly.
As those updates are released, we will
| | 09:10 |
probably see some support extended for
radial gradients as well, as hopefully
| | 09:14 |
some further refinements to that gradient
editor.
| | 09:17 |
| | Collapse this transcript |
| Styling additional properties| 00:00 |
While the CSS designer will be able to
handle your most common CSS property
| | 00:04 |
needs.
There are going to be times when you need
| | 00:07 |
to set a property that's just not included
in one of those default sections.
| | 00:11 |
Well, that's okay.
As you can still add properties manually
| | 00:14 |
through the designer as well.
So, I have the index page from 07_08
| | 00:20 |
opened here, and I'm just going to scroll
down a little bit to show you what kind of
| | 00:23 |
the problem is here.
So these info spotlights, they have a
| | 00:27 |
transition applied to them.
But right now, it's not working so well.
| | 00:31 |
The text is overflowing the container, the
transition itself isn't actually
| | 00:36 |
happening, there are some problems there
the need to address.
| | 00:39 |
The reason for that is, I'm not doing any
of the actual transitions themselves.
| | 00:43 |
All I've got is the hover property written
as well as the default value.
| | 00:46 |
So, I'm not doing any transitioning.
So, I'm going to go back into Dreamweaver.
| | 00:50 |
And in Dreamweaver, I need to find the selector.
| | 00:52 |
So, I'm going to go to main.css.
And the selector I'm looking for is the
| | 00:56 |
section dot condense selectors.
So again, just a quick section.c and I can
| | 01:02 |
jump right down to it.
It makes it very, very simple and easy to
| | 01:05 |
get to.
All right, now I do, I want to point out a
| | 01:09 |
CSS transitions panel inside of
Dreamweaver that would help me write this.
| | 01:13 |
So there is some help for CSS transitions.
But I do want to point out that none of
| | 01:17 |
these sections, Layout, Typography,
Border, Background, they don't really have
| | 01:22 |
anything to do with that.
So, we have this last section which is
| | 01:25 |
called Others.
And this is really just a way to say okay,
| | 01:29 |
if you need another property that's not in
any of those sections, and its not a list
| | 01:33 |
property which, you know, we just have
three list properties down here.
| | 01:36 |
You're free to type anything in that you want.
| | 01:39 |
You know, the trick is, you're not going
to find the little area down here to start
| | 01:42 |
typing in.
In order for you to put something in the
| | 01:45 |
other area, you first have to go up to
Properties and click this little Plus
| | 01:49 |
symbol right there, which is to add a CSS property.
| | 01:52 |
Now most of the time, again, you'll just
use one of the presets up here, but this
| | 01:56 |
is very handy.
And what it does, it creates a new empty
| | 01:59 |
list for me.
Now the first thing I want to do is I want
| | 02:01 |
to take care of the text that's
overflowing this.
| | 02:04 |
So, I'm going to type in O.
Now, here's another thing that I'm really
| | 02:06 |
happy about.
Whenever I'm entering one of these custom
| | 02:10 |
properties, Dreamweaver goes ahead and
gives me code hinting, right here.
| | 02:12 |
So, if I type in OVR, I get overflow.
I hit enter.
| | 02:16 |
It transitions me over to the actual value itself.
| | 02:18 |
In this case, I'm going to type in hit.
And unfortunately, code hitting doesn't go
| | 02:22 |
as far as giving me values like it does
when I'm actually writing code.
| | 02:28 |
But it's nice to know that it sort of
gives me hints on the properties
| | 02:31 |
themselves.
That's, that's kind of nice.
| | 02:33 |
When I'm going doing this I don't tend to
move my mouse, I leave my mouse right
| | 02:35 |
there.
Because that allows me to just come back
| | 02:37 |
to my mouse and click and then I can start typing.
| | 02:40 |
At first, when you see this workflow, you
think oh great, I've got to go back and
| | 02:43 |
forth all the time.
But you actually end up not going back and
| | 02:45 |
forth.
You just leave your cursor right there.
| | 02:47 |
Alright, so now I'm going to do the
transition and I'm going to add all the
| | 02:50 |
vendor prefixes, too, to show you that it
supports those.
| | 02:53 |
I'm going to do web kit transition.
And then, I'm going to type in max-height,
| | 03:03 |
because that's the property I'm transitioning.
| | 03:06 |
A space, a 0.75s for seconds, that's how
long I want it to occur, ease, that's the
| | 03:10 |
easing I want, or the speed if you will,
and then 0s for delay, alright?
| | 03:15 |
Now again, I'm going to hit the mouse and
just click Plus, adds me another one, in
| | 03:24 |
this case I'm going to MOZ Transition.
And for this one, I'm going to do exactly
| | 03:29 |
the same thing.
Now, you can copy and paste if you like.
| | 03:33 |
So, I can come right up here, copy this,
go down to transition and paste it.
| | 03:38 |
So, that's a bit of a faster way of
working with that, if you want to do that.
| | 03:43 |
I'm going to keep going, going to hit Plug.
| | 03:45 |
In this case, I'm going to do dash MS transition.
| | 03:52 |
And once again, I'm going to paste it, hit
Return, keep going.
| | 03:57 |
I'll do dash O for Opera, dash transition.
Again, I'm going to paste that value in
| | 04:05 |
just to speed up that process a little bit.
| | 04:07 |
And then finally, when it's plus again.
And this time, I'm going to do it without
| | 04:11 |
a vendor prefix, so transitioned and I'll
paste that value in again.
| | 04:15 |
Alright, there we go.
Now, let me do a Save All, go back out to
| | 04:21 |
my browser, refresh the page.
Now, my content is hidden the way I want
| | 04:25 |
it to.
And now that actual, the transition is
| | 04:27 |
actually animating, which is exactly what
I was going for.
| | 04:31 |
Now, while most of the properties that
aren't a part of a specific section are
| | 04:35 |
still supported through code hinting.
Unfortunately, code hints for the
| | 04:38 |
corresponding property values themselves
aren't as well supported.
| | 04:42 |
So, this means that even though the CSS
designer will give you some measure of
| | 04:46 |
support for those properties.
For the most part, you're going to need to
| | 04:49 |
be familiar with necessary syntax and
values before you begin to add them to
| | 04:54 |
your styles.
| | 04:54 |
| | Collapse this transcript |
| Styling links| 00:00 |
The process of styling links isn't
particularly different from styling any
| | 00:05 |
other element or selector inside Dreamweaver.
| | 00:07 |
But working with them is going to give us
an opportunity to not only explore
| | 00:11 |
pseudo-class selectors and writing those,
but also some of the best practices around
| | 00:17 |
developing a link styling strategy for
your site.
| | 00:20 |
So to talk about that, I have the index
file open from the 07_09 directory.
| | 00:25 |
As you can see here our links are, are,
are lacking style links, so I've stripped
| | 00:28 |
all the link styling out, to start off with.
| | 00:30 |
And I want to talk about the way that I
usually approach styling links on my site.
| | 00:34 |
One of the things I like to do is to come
up with a link strategy that's going to
| | 00:37 |
drive the entire site and I like to come
up with it very early.
| | 00:41 |
The reason for this is I want to find the
most generic styling I can possibly have
| | 00:47 |
for all the links on my site and then put
those in sort of global link rule, so
| | 00:52 |
you're going to drive as much of the
content within my site as possible.
| | 00:56 |
I, I really want to write extremely
generic link selectors and put as much
| | 01:00 |
styling as I can into them, this is
going to be consistent across the site.
| | 01:03 |
And then and only then when I need to go
into those specific areas and tweak those
| | 01:08 |
link styles just a little bit if those
individual areas are a little bit
| | 01:12 |
different.
The flip side of that would be each time
| | 01:15 |
you're going to a section, you'd have to
write new Link Styling for that section.
| | 01:18 |
You really don't want to do that, that's
not that effecient.
| | 01:20 |
I'm going to come over here to the CSS
Designer panel, I'm going to click on the
| | 01:24 |
main.css, so that I'm sort of looking at
my external styles.
| | 01:27 |
And in those styles I can go right down
here to my selectors and I find a link
| | 01:32 |
selector.
So, this is a generic anchor element
| | 01:35 |
selector.
This is going to to apply to every single
| | 01:38 |
link within my site, which is perfect.
That's exactly what I want.
| | 01:41 |
So, I love these global type selectors.
I put them very high up in my styles.
| | 01:45 |
They're going to style all the elements
within my site but because they're such a
| | 01:49 |
low in terms of specificity, they're not
very specific selectors, they're very easy
| | 01:53 |
to overwrite.
So I establish my baseline styling like
| | 01:56 |
this and then can come and overwrite them
with more specific selectors in the
| | 02:00 |
individual areas and regions. Okay.
| | 02:02 |
By focusing on this, I can look over in
the Properties pane and I see that no
| | 02:06 |
properties are set on this yet.
So I'm going to deselect Show Set and I'm
| | 02:10 |
going to to Type because we're going to do
some really basic styling here.
| | 02:14 |
For color I'm just going to type in white.
You know I like using the key words for
| | 02:17 |
white and black.
But if you wanted to use #FFF or some
| | 02:21 |
other RGB value feel free, go ahead and do that.
| | 02:24 |
But as soon as I do that I can see that
the links in the menu have changed.
| | 02:26 |
And now I'm just going to go to the text
decoration and I'm going to strip that out
| | 02:30 |
as well.
I'm going to remove the underline from all
| | 02:32 |
my links.
Now that's something that I thought about
| | 02:34 |
very early on in terms of this site.
Did I want links to have underline or not?
| | 02:38 |
You know, it's a personal choice.
The thing is if you're going to strip away
| | 02:42 |
text decoration like those underlines,
then you're removing the visual cue that
| | 02:46 |
hey, this is clickable, this is a link.
So if you do that, you need to have some
| | 02:50 |
other method of letting people know that
this is clickable.
| | 02:54 |
And one of the things that can do that is
controlling the placement of links and how
| | 02:57 |
they are viewed and how they fit into the
flow of the rest of your content.
| | 03:00 |
But you can also use pseudo class selectors.
| | 03:02 |
And pseudo-class selectors are essentially
additions to selectors that deal with user
| | 03:08 |
interactions.
So, things like focus and hover, whether
| | 03:11 |
it's an active element or link or not.
Things like that.
| | 03:14 |
All right?
So we're going to add a selector to our
| | 03:17 |
styles.
And to do that, I'm going to make sure I'm
| | 03:19 |
focused on main.css and I'm going to make
sure that the anchor element is
| | 03:23 |
highlighted.
Now, I'm going to be honest with you, this
| | 03:25 |
is one part where the CSS designer panel
is a little touchy.
| | 03:28 |
Your goal is to make sure that your new
selector shows up directly underneath this
| | 03:33 |
one but that can be a little tricky.
I'm going to click off of that once and
| | 03:37 |
then click back on it to reestablish focus.
| | 03:40 |
I have found that it's a little touchy
about where focus is established.
| | 03:43 |
And if you try this technique and your
selector jumps to the bottom of your
| | 03:48 |
styles instead of right underneath this.
Here are a couple of things that you can
| | 03:51 |
take a look at, number one make sure your
sources is set to main.css, number two
| | 03:55 |
make sure you've established focus on that.
| | 03:57 |
You don't need to double click it because,
again if you double click it, it thinks
| | 04:00 |
you want to rename it.
You simply have to just click off of it
| | 04:03 |
once, click on it again and make sure
focus is established on that, alright?
| | 04:07 |
I'm going to click the plus right up here
for selectors to add another one you can
| | 04:10 |
see it adds it right below that one so
that's perfect, that's what I was going
| | 04:12 |
for.
And this type I'm going to type in a.
| | 04:15 |
And then a colon.
Now, as soon as you type a colon in,
| | 04:18 |
Dreamweaver's going to give you these code
hints right here for pseudo-class
| | 04:21 |
selectors and you can read through some of
these really quickly.
| | 04:24 |
And it gives you an idea of what these
will target.
| | 04:27 |
Links, which is essentially an anchor
element with an href attribute.
| | 04:31 |
Visited links, links that have already
been visited.
| | 04:32 |
Hover, active, focus, target.
So, these all have to do with some type of
| | 04:37 |
user interaction or some type of state for
that particular element.
| | 04:42 |
Now, I'm going to choose hover because
that's what I'm looking for.
| | 04:44 |
And I'm going to hit Return, which is
going to write the selector for me.
| | 04:47 |
So now, directly underneath my anchor and
selector, I have a :hover.
| | 04:51 |
This is going to handle how the links
react when somebody mouses over them.
| | 04:54 |
What I'm going to do with this one is
again, something really, really simple.
| | 04:57 |
I'm going to go to my background and I'm
going to give it a background image.
| | 05:02 |
So I'm going to click right here for URL,
I'm going to browse out.
| | 05:04 |
Now, this should take you to the root
directory, which in this case is 07_09.
| | 05:09 |
You might want to double check that.
Sometimes Dreamweaver will take you to
| | 05:12 |
your last destination that you went too,
not the actual route folder.
| | 05:15 |
So, you might want to make sure that
you're looking in 07_09.
| | 05:18 |
I'm going to choose Images and I want to
scroll down to that diagonal pattern.
| | 05:23 |
I'm going to click Open.
There we go.
| | 05:26 |
And I'm not going to worry about setting
any type of repeat.
| | 05:28 |
If you don't set one then the default is
for the background to repeat.
| | 05:31 |
And that's exactly what I want. Alright.
| | 05:33 |
So I'm going to do a Save All.
And now every link in my site is going to
| | 05:39 |
have white text.
No text decoration.
| | 05:41 |
When somebody hovers over it, you're
going to see that repeating diagonal
| | 05:44 |
pattern.
Now that's not what I want for every
| | 05:47 |
single link in my site.
That's just I want, what I want from my
| | 05:50 |
generic styling.
There's going to be specific regions where
| | 05:53 |
that type of styling is not going to be
effective at all.
| | 05:56 |
So what I need to do is go into those
sections themselves and start working with
| | 06:00 |
them and overriding them when I have to.
So what I'm going to do, is I'm going to
| | 06:04 |
go to main.css and I'm just going to
search for a selector.
| | 06:06 |
It makes it a lot easier.
I'm going to look for pageHeader and what
| | 06:09 |
I'm looking for is this one right here,
page header space a.
| | 06:12 |
So any link inside of pageHeader.
Now, when I click on that, I want to click
| | 06:17 |
on the Show Set.
And I can take a look at these and really
| | 06:20 |
determine whether or not I need to add
anything else to these.
| | 06:23 |
Notice that the font size, I'm sort of
shrinking the font size down, 0.9 amps.
| | 06:27 |
I'm giving them a line height of 45 pixels
and by the way, if you're wondering which
| | 06:31 |
links these are, it's the links within the navigation.
| | 06:33 |
And the text transform, I'm making them
all lower case.
| | 06:36 |
That looks great.
So, as far as that goes, I don't really
| | 06:39 |
need to overwrite that.
The color is fine.
| | 06:40 |
The, the lack of text decoration is fine
as well.
| | 06:43 |
What's not fine is when people hover over
these links, I really don't want that
| | 06:47 |
background pattern to show up.
You can see, if I go to Live View, for
| | 06:50 |
example, and hover over it, you can see
the background pattern is showing up.
| | 06:54 |
It's not bad but it's not really want I
want for these.
| | 06:57 |
So in that case I do have to override that.
| | 07:00 |
So I need to write a new selector, so
again I'm going to go to main.css.
| | 07:03 |
I'm going to scroll down until I find that
pageHeader a and I'm going to establish
| | 07:08 |
focus by clicking on it one time.
Right after that I'm going to click Plus
| | 07:12 |
to add a new selector.
And here, I'm just going to do
| | 07:15 |
.pageHeader.
And notice that it knows the class and it
| | 07:20 |
actually offers that as a code hint.
And then I'll a, colon:hover.
| | 07:24 |
Now that's selected, I'm going to deselect
show set and I'm just going to go to my
| | 07:31 |
text properties.
And in my text properties I"m going to go
| | 07:35 |
ahead and give this a color, and I'm
going to pass it a RGB value.
| | 07:38 |
And this is going to be kind of an organe,
so its 251,174,44.
| | 07:46 |
Now there's nothing wrong with using the
color picker to find that color.
| | 07:49 |
unfortunately Dreamweaver does not have a
Swatch panel built into it when your
| | 07:53 |
choosing colors.
So whatever color you choose, if you
| | 07:56 |
want to remain consistent with that,
you're going to need to write that down
| | 07:59 |
somewhere or make a note of it in your
code, so that you can access that pretty
| | 08:03 |
easily.
Now the next I want to do is I want to go
| | 08:05 |
to background and I want to get rid of
that background image.
| | 08:08 |
But one of the things about this you can't
really get rid of it here because it's not
| | 08:12 |
part of that selector, so I need overwrite that.
| | 08:15 |
In overwriting that I have to use the
background value of none or background
| | 08:19 |
image of none.
Unfortunately, the way that this panel is
| | 08:22 |
set up I can't really do that.
At least not here within these particular
| | 08:26 |
properties, so what I have to do is I have
to go down to the others or just click
| | 08:30 |
plus and then I can type in the short hand notations.
| | 08:33 |
I can just type in background and then
give it a value of none.
| | 08:37 |
So sometimes you're not going to be able
to use those property panes exactly the
| | 08:41 |
way that you would want to, even though
that's a well supported property.
| | 08:45 |
that, that particular part of interacting
with it isn't exactly going to work.
| | 08:49 |
By setting background to none, what I've
done there is I've removed that background
| | 08:53 |
image.
So now if I do a Save All.
| | 08:55 |
Go to Live view, hover over it, I can see
that the color is changing and I'm not
| | 09:00 |
getting the background graphic that I had before.
| | 09:02 |
That's awesome.
Alright, I got one more section that I
| | 09:05 |
need to style and that's the article.
And the reason for that is the main
| | 09:09 |
article, if I just sort of scroll down
here the main article as you can see
| | 09:13 |
appears on a white background.
So anytime I have a link I definitely
| | 09:16 |
don't want that link to have sort of that
white background applying to it.
| | 09:19 |
So again I'm going to go to main.css and
I'm looking for the article a selector.
| | 09:25 |
So I'm going to type in article and
there's article a, perfect, exactly what I
| | 09:30 |
was looking for. Alright?
| | 09:31 |
Now for this one again I'm going to go to
my type properties.
| | 09:34 |
And for color I'm going to add a blue value.
| | 09:37 |
So, RGB and then in parentheses, 2 comma
99 comma 174.
| | 09:46 |
Don't forget to close the parenthesis, hit
Return and you should see that blue color
| | 09:49 |
show up. Perfect.
| | 09:51 |
I don't need to tell it no text decoration
because it's going to be pulling that from
| | 09:54 |
the generic one so I'm sort of building on
that style, if you will.
| | 09:57 |
And then I need to go to the article
a:hover which is, already exists but
| | 10:01 |
doesn't have any properties defined on that.
| | 10:03 |
And all I'm going to do there is replace
the blue value with an orange value.
| | 10:07 |
So again, rgb and this is where a Swatch
panel would really come in handy, 251,
| | 10:12 |
174, 44.
So the same values we used before.
| | 10:17 |
Alright?
Now I'll do a Save All.
| | 10:20 |
And I'm just going to preview this in a
browser and now that I got it in my
| | 10:24 |
browser I can check my links.
So these are links that we have up here in
| | 10:28 |
the navigation.
You can see the diagonal background
| | 10:31 |
pattern isn't showing up but the orange
color is.
| | 10:33 |
If I look at links in one of these side
bars, you can see that the default link.
| | 10:39 |
The white text with the background is
showing up and that's exactly what I want
| | 10:42 |
over here.
And them if I look in the article itself,
| | 10:46 |
I can see the link of the blue text.
No decoration and the orange background.
| | 10:51 |
Now, honestly styling links can be a bit tricky.
| | 10:53 |
You know, especially if you have a lot of
different styling requirements based on
| | 10:57 |
different sections within your site.
Just make sure that you have a strategy
| | 11:01 |
mapped out for how links should be styled.
So that you can write the most efficient
| | 11:05 |
link styles possible and don't forget to
take advantage of pseudo-class selectors
| | 11:10 |
like hover.
| | 11:11 |
| | Collapse this transcript |
| Organizing styles| 00:01 |
It's not uncommon to add styles throughout
a project.
| | 00:04 |
It's actually quite rare for a designer to
sit down and write all the styles for a
| | 00:09 |
site in one sitting.
I mean, that doesn't really happen.
| | 00:12 |
Most of the time, it's a very organic
process and because of this, it's also
| | 00:17 |
very easy for styles to become unorganized
or for them to gain a lot of unnecessary
| | 00:23 |
size.
The organization of styles is incredibly
| | 00:26 |
important.
Not only will it help you maintain and
| | 00:30 |
update the site later on but it'll also
prevent style conflicts from causing major
| | 00:35 |
problems in your files.
So, in this exercise I want to show you
| | 00:38 |
how to use the CSS Designer to keep your
styles organized.
| | 00:43 |
Now, for this I'm working in the 07_10
folder and I just have the index file
| | 00:47 |
open.
In this one, our styles are a little less
| | 00:50 |
organized than they have been in previous versions.
| | 00:52 |
For example, if I go over to CSS Designer.
I notice that I have embedded styles,
| | 00:56 |
that's what this little style tagger here represents.
| | 00:58 |
And clicking on that I can see that I have
five classes that are defined for this
| | 01:02 |
page.
Now, that's not very efficient.
| | 01:05 |
If they're embedded in this document and I
need to use them in other documents
| | 01:08 |
throughout my site, well I'll have to
embed them there too.
| | 01:11 |
And that's really inefficient.
So, if I go to the source code, I'll show
| | 01:14 |
you what I'm talking about.
We have these styles that are just sort of
| | 01:19 |
built right into the HTML and that is not
going to be efficient for using them in
| | 01:23 |
our site at all.
So, what I want to do is I want to move
| | 01:27 |
those from this page into my external
style sheet.
| | 01:30 |
And that's actually something that you'll
need to do from time to time when you're
| | 01:33 |
working on other people's files.
Maybe somebody gave you a page and says,
| | 01:37 |
hey I need this added to the site.
Or maybe somebody else authored a document
| | 01:40 |
and the authoring system they were using
injected styles on the page.
| | 01:44 |
I've had that happened before.
And you get to style, you started working
| | 01:47 |
on it, and you're like oh, okay well this
need to be moved from my main style sheet.
| | 01:50 |
So, most of the time, you'll open up the
page, you'll find a code, you'll highlight
| | 01:54 |
the code, you'll copy or cut it.
And then you'll go to your external CSS
| | 01:57 |
file, find where you want it and you'll
paste it.
| | 01:59 |
And that works just fine, there's nothing
wrong with that.
| | 02:01 |
But, we can do that exact same operation
through the CSS Designer panel.
| | 02:07 |
So, if I click right here on this style, I
don't need to do any right clicking or
| | 02:11 |
contextually sensitive things, all I have
to do is this.
| | 02:14 |
I go down to the list of selectors, click
on the first one, hold my shift key down,
| | 02:19 |
click on the last one.
Now, that's going to select all of these
| | 02:21 |
for me.
So, if you only want to move one or two,
| | 02:23 |
you could do that as well.
I want to move all of these.
| | 02:26 |
So, with them all highlighted, I'm
going to grab them and I'm going to drag
| | 02:29 |
them up and hover over main.css.
As soon as main.css highlights, I'm
| | 02:36 |
going to let go, and then it moves them.
Now, here's the thing, Dreamweaver doesn't
| | 02:40 |
do anything to let you know hey, you've
moved these styles.
| | 02:42 |
There's not a whole lot of visual clue
that you just did something.
| | 02:45 |
So, you want to always do that very, very carefully.
| | 02:48 |
But, now when I click on this embedded
style tag, there are no selectors in
| | 02:52 |
there.
If I go over the source code, it's now
| | 02:54 |
empty.
So, that's great and, since it's empty, I
| | 02:56 |
don't really need it any more.
So, another thing that Dreamweaver does
| | 03:00 |
that allows us to organize our styles a
little bit, is it can cleanup some of
| | 03:03 |
these things.
So, if you, if you have this and you don't
| | 03:05 |
need it any more and it's empty, you can
simply click on it, go up to your sources,
| | 03:08 |
click the Minus button and it's going to
remove it.
| | 03:10 |
Now, be really careful about that because
if you hit it twice, it's going to get rid
| | 03:14 |
of main.css as well.
So, that's one of those icons that you
| | 03:17 |
want to be really careful about clicking.
We know how to move these classes into
| | 03:22 |
this external style sheet.
That's easy enough to do.
| | 03:24 |
You just drag and drop.
But, now what?
| | 03:26 |
Well, if I scroll through all the
selectors in main.css and go down to the
| | 03:30 |
bottom, there are those classes.
So, every time you do this operation,
| | 03:34 |
where you take styles from one style sheet
and move them to another.
| | 03:37 |
And by the way this would work from
external to external.
| | 03:41 |
So if I had two external style sheets
linked to this, I could move styles from
| | 03:44 |
one to the other.
That would be fine.
| | 03:46 |
But, every time you do that operation
using the CSS Designer panel, by default
| | 03:50 |
it's going to put those selectors at the
very bottom of your styles.
| | 03:54 |
Sometimes that's what you want.
Sometimes it's not.
| | 03:56 |
These first four classes for example,
course through lavender.
| | 04:00 |
These are actually what I like to call
global classes.
| | 04:03 |
And I like to keep all of my global
objects and classes at the very top of my
| | 04:07 |
style sheets.
So I'm going to move these.
| | 04:09 |
Now, this operation can be a little tricky too.
| | 04:12 |
So, one of the things I'm going to do is
I'm going to try to give myself a little
| | 04:15 |
bit more room.
The easiest way to do this is I'm going to
| | 04:17 |
collapse these panels above it by clicking
once on their titles and that's going to
| | 04:21 |
collapse them down.
That gives me a little bit more room for
| | 04:23 |
my selectors.
The next thing I'm going to do is make
| | 04:25 |
sure I have all four of them selected,
click and hold the mouse down, and just
| | 04:29 |
kind of drag up.
Now, I get a, a horizontal line as I begin
| | 04:32 |
to drag.
And that horizontal line represents where
| | 04:35 |
those classes are going to be moved to.
All right?
| | 04:38 |
So, it takes a little while.
So, just be a little patient.
| | 04:40 |
It's going to go all the way up towards
the top.
| | 04:42 |
There we go.
And once I'm at the top, I can sort of go
| | 04:45 |
down and find.
Oh, there it is.
| | 04:47 |
All right, so here are my global classes
right here.
| | 04:50 |
So, I'm going to make sure that horizontal
line shows up right there and release.
| | 04:53 |
When I do that, you'll notice that those,
those classes now are right there.
| | 04:58 |
And if you ever want to just double check
that, you can go right over to your code.
| | 05:02 |
I can scroll up.
Let me switch to Code view, so this is a
| | 05:05 |
little easier for you to see.
Scroll up towards the top, and right there
| | 05:10 |
are those guys that have just moved.
So there's orange, blue, lavender, of
| | 05:12 |
course you'll notice that they're just
below more right there.
| | 05:15 |
Now, I've got one more that I want to move
so, I'm going to go to Sources, click
| | 05:19 |
main.css, so I'm looking at everybody.
Scroll down and I find a class called home
| | 05:31 |
header.
Now, the other thing I like to do with my
| | 05:34 |
styles is I like to group them by region.
And I'll go really from the top of the
| | 05:37 |
page all the way to the bottom.
So, you can see the footer selectors are
| | 05:40 |
on the bottom.
If I went towards the top, that's where
| | 05:42 |
the header would be.
And that's where this belongs.
| | 05:45 |
So, what I'm going to do is I'm going to
take this particular style, and I'm
| | 05:48 |
going to move it up.
And I'm going to find a class called
| | 05:52 |
program header.
That's where I want it underneath of.
| | 05:55 |
So, as you organize your own styles,
you'll have a way to organize them.
| | 05:58 |
A lot of people will organize and there's
program header right there.
| | 06:01 |
I want it just below that one.
A lot of people choose to organize their
| | 06:04 |
styles by type.
So, they'll put, for example, all the
| | 06:07 |
layout styles in one place.
And all the typography in another place.
| | 06:09 |
I tend to like to organize it by region.
So, it's really a personal choice.
| | 06:13 |
Find out what works best for you and
that's the strategy you're going to use
| | 06:17 |
and you'll probably evolve that over the
course of learning web design and working
| | 06:20 |
with it.
There's one more thing I want to do here,
| | 06:22 |
I like to keep my selectors as minimal as possible.
| | 06:26 |
You can make selectors more specific by
making really long descendant selectors,
| | 06:30 |
for example, by adding a lot of IDs to them.
| | 06:32 |
But that also slows down your CSS a little
bit in terms of rendering.
| | 06:36 |
So, I like to keep them as lean as
possible and still be effective and make
| | 06:39 |
sure that I don't have a lot of conflicts.
So, I'm going to scroll back to the top
| | 06:42 |
here and I'm just going to scroll down and
as I scroll down, there's going to be one
| | 06:46 |
selector that just kind of stands out a
little bit.
| | 06:50 |
There it is, right here, body article main
content 2.
| | 06:54 |
That's really, really specific.
It's got one, two, three, element
| | 06:58 |
selectors and an ID selector so that has a
specificity of like 103.
| | 07:03 |
I don't need that much, to be honest with you.
| | 07:05 |
I mean if I look at the selectors around
the article h1, article h2 and then I have
| | 07:09 |
this thing.
That's way too specific.
| | 07:11 |
So, again one of the nice things about
Dreamweaver is if I just click twice on
| | 07:16 |
this I can modify this and I can make this
a little less specific.
| | 07:20 |
I can just get rid of all of the, the
other cruft, if you will, and just leave
| | 07:24 |
it with article h2.
Now, of course, you have to be careful in
| | 07:27 |
doing that.
You want to make sure you leave that space
| | 07:29 |
between it.
You want to make sure you don't take off
| | 07:31 |
any of the letters between article and h2
and you just want to double-check it.
| | 07:35 |
But now it's in line with the rest of 'em,
it's just as specific as I need it to be.
| | 07:38 |
Now we did all of this in the CSS Designer
panel without going to the code.
| | 07:43 |
But, one thing that you do need to keep in
mind as you're doing this is that you are
| | 07:46 |
changing your code.
You can see if I look over to the main CSS
| | 07:49 |
file I see this little asterisk above the
name of the file and related files.
| | 07:53 |
Any time you see that, or any time you see
a little asterisk here, that's Dreameaver
| | 07:58 |
telling you that, hey, you've made changes
to this file and you haven't saved it
| | 08:02 |
recently.
So, I'm going to go up to File, do a Save
| | 08:04 |
All, make sure I change those and now our
styles are modified.
| | 08:08 |
I noticed lot of you guys out there might
prefer to hand code.
| | 08:11 |
I'm certainly more of a hand coder myself.
And even for, for you guys that like to
| | 08:15 |
hand code and enjoy it, honestly the CSS
Designer, you know managing and organizing
| | 08:20 |
your styles through the CSS Designer.
It's actually often faster than doing it
| | 08:24 |
by hand.
All of us are going to strive to author
| | 08:27 |
our styles with a clear strategy and
you're probably going to make a good
| | 08:31 |
attempt at making them organized as you work.
| | 08:33 |
Or at least you should.
But it's nice to know that even if things
| | 08:36 |
get a little out of hand and they do sometimes.
| | 08:39 |
That Dreamweaver can help you bring order
back to your chaos without requiring an
| | 08:43 |
all night coding session.
| | 08:44 |
| | Collapse this transcript |
| Attaching an external style sheet| 00:00 |
For new designers, figuring out how you go
about getting your styles actually into an
| | 00:05 |
external style sheet and then attaching
them to the page is actually a pretty
| | 00:09 |
common question.
Thankfully, Dreamweaver makes the process
| | 00:13 |
pretty seamless, and it gives you a
tremendous amount of flexibility and
| | 00:17 |
control over it.
To explore that, I'm working with the
| | 00:20 |
programs.html file.
You can find this in 07_011 folder, and
| | 00:26 |
it's actually in the programs sub directory.
| | 00:27 |
Now as you can see, there are no styles
applied to the page.
| | 00:31 |
And if I look over to CSS designer panel
up in sources, there are no styles
| | 00:35 |
anywhere to be found.
And so, we need to make some.
| | 00:37 |
And one of the things I want to point out
here is, there's a little bit of a change
| | 00:41 |
in the workflow from the previous version;
in the older versions of Dreamweaver, but
| | 00:44 |
you could create a new rule.
And then, as you were in the process of
| | 00:47 |
creating the new rule, Dreamweaver would
ask you, okay, well, where do you want to
| | 00:49 |
put this?
That workflow has been streamlined and
| | 00:52 |
changed a little bit.
Now, before you can start creating any
| | 00:55 |
type of CSS rules or selectors, you have
to first define a source.
| | 01:00 |
So that's step number one.
And you can see, everything else is greyed
| | 01:03 |
out, you can’t click to add anything else
until you add a source first.
| | 01:07 |
So, I’m going to go up to sources and
click the plus symbol.
| | 01:10 |
And I can see that I have three choices here.
| | 01:11 |
I can either create a new CSS file, if I
don’t already have one.
| | 01:16 |
I can attach an existing CSS file if I do
have one.
| | 01:19 |
Or I can define the styles directly inside
the page itself.
| | 01:23 |
Now, for defining it in the page that’s
going to create a style tag, and it's
| | 01:27 |
going to create selector's that are local
to this page only.
| | 01:30 |
So, they won't apply to your entire site.
So, that's one of the things you need to
| | 01:33 |
think about before you do that.
If you only want styles to be local for
| | 01:37 |
this page, that's the choice you would use.
| | 01:39 |
Well, I'm going to create a new CSS file.
And when I do that, I get a dialogue box
| | 01:44 |
that comes up and says okay, well, where
would you like to put this file and what
| | 01:47 |
do you want to name it.
So, I'm going to browse and I want to make
| | 01:50 |
sure I'm looking in the 0 7_11 folder, _CSS.
| | 01:53 |
So I'm going to place it in my CSS folder.
And this is just something for
| | 01:58 |
organizational purposes that I really
recommend, placing all of your styles in
| | 02:02 |
external assets directory.
And I use an _CSS, but if you want to use
| | 02:06 |
something else that's fine to.
Alright, I'm going to call this temp.css,
| | 02:11 |
because this is going to be temporary.
And you'll notice that inside the same
| | 02:15 |
folder there is a main.css, so we're
going to be attaching that one a little
| | 02:18 |
bit later on.
Alright, I'm going to hit Save.
| | 02:20 |
And when I do that, I get to choose
whether I want to bring this in via a link
| | 02:25 |
element or importing it.
The difference there, link is going to use
| | 02:28 |
an actual HTML link element to bring in
the external style resource.
| | 02:33 |
Or the import option is going to create a
style tag in the head of your document and
| | 02:37 |
then use an et import rule to bring it in.
It's actually kind of an older way of
| | 02:41 |
doing it, not many people use that anymore.
| | 02:43 |
So, I recommend just sticking with the link.
| | 02:45 |
Now, we could also do conditional usage.
What does that mean?
| | 02:48 |
Well, the first thing is you can declare a
media type.
| | 02:51 |
So, you might do Screen, Print, Handheld,
that sort of thing.
| | 02:54 |
I'll just stick with Screen.
But you can also if you want, you can go
| | 02:57 |
ahead and define a media query.
Now, media query's are relatively new, and
| | 03:03 |
they help us create sites that are more
responsive, because you can filter out
| | 03:07 |
when styles are applied.
For example, I could choose plus and then
| | 03:11 |
I could do any time of minimum width,
maximum width, things like that.
| | 03:16 |
Now, if you choose to do a media query
here, the media query is actually added as
| | 03:21 |
part of the link tag.
It just becomes part of the media
| | 03:24 |
attribute on the link tag.
There's nothing wrong with doing it that
| | 03:27 |
way, but you actually have more
flexibility defining a media query inside
| | 03:32 |
the external style sheets.
So I'm going to show you that method.
| | 03:34 |
So what I'm going to do is I'm just
going to get rid of that, and just keep
| | 03:37 |
media screen. Alright.
| | 03:38 |
But you go and click OK, and it's go ahead
and create the external style sheet for
| | 03:44 |
us.
So, it saved the file and it linked to the
| | 03:46 |
page.
If you want to see how I did that, I'm
| | 03:48 |
going to do a Save All.
And I’m going to switch over to Code view,
| | 03:51 |
and right here you can see there’s the
link that’s bringing that in.
| | 03:55 |
Href, it’s pointing to the temp style
sheet, and it’s also going out declaring a
| | 03:58 |
media type of screen.
So those were the choices that we made.
| | 04:01 |
Now, we’ve created the external style
sheet, but it doesn’t have any styles in
| | 04:04 |
it yet.
So now, you can go ahead and start
| | 04:06 |
creating selectors.
Or if you want a media query, you can go
| | 04:09 |
ahead and create one of those as well.
So, I'm going to select the temp.css, and
| | 04:13 |
I want to create a media query so that the
selector that I apply here only applies in
| | 04:18 |
a certain instance.
So, if I add a media query, I can say
| | 04:22 |
okay, I want to do, let's just do a
maximum width of let's say 480 pixels, 480
| | 04:30 |
pixels.
So, what that's going to do for us is it's
| | 04:32 |
going to say, hey, only apply these styles
if the screen size is 480 pixels or below.
| | 04:38 |
So anything over that they won't apply, it
will only apply the smaller screens.
| | 04:41 |
This is a good way of filtering out styles
that are only applied say for mobile
| | 04:45 |
devices.
So I'm going to click OK, and there is my
| | 04:48 |
media query, it shows up right here.
Now, had I attached the media query to the
| | 04:52 |
media attribute, it would've shown up here.
| | 04:54 |
Alright.
So now, when I write a selector, if I want
| | 04:56 |
it to apply inside that media query, I
would highlight this when I write the
| | 05:00 |
selector.
If I want it to appear outside of that
| | 05:02 |
media query, I would apply it here.
So, if I go to temp.css, you can see
| | 05:06 |
there's the media query just sitting
inside of the external style sheet.
| | 05:09 |
Alright, let me do a Save all, and then
I'm going to go back to Design view.
| | 05:14 |
Now, when we create a rule, we get to choose.
| | 05:16 |
This is the source I want, and do I want
it to be global or do I want it to appear
| | 05:21 |
inside the media query.
I'm going to place it inside the media
| | 05:24 |
query.
I'm going to do a new selector, and I'm
| | 05:27 |
just going to do a paragraph selector.
So, I'm going to do P and I'm going to
| | 05:32 |
just do something really simple.
I'm going to go to text and I'm going to
| | 05:34 |
change the color to, say red.
So now, if I do a Save All and preview
| | 05:40 |
this page in my browser, I can see that it
looks the same.
| | 05:44 |
Nothing's changed, until I reduce the
width below 480 pixels then I get that red
| | 05:49 |
color. Excellent.
| | 05:51 |
Now, you are not limited to simply
creating style sheets.
| | 05:53 |
If you already have an existing style
sheet, it's very easy to attach one.
| | 05:56 |
I'm going to do that next.
I'm going to go up to my sources, I'm
| | 05:59 |
going to click Add, and this time I'm
going to choose Attach an Existing CSS
| | 06:03 |
File.
I'm going to browse out, find in the _CSS
| | 06:05 |
directory find that main.css.
Go ahead and open that up.
| | 06:10 |
Again, I'm going to link it, and I'm just
going to make sure that the media type is
| | 06:16 |
screen.
I'm going to click OK, and do a Save All.
| | 06:22 |
Now, here's what's interesting about this.
I now have this temp.css which has a media
| | 06:26 |
query in it and I have main.css that does
not have any media queries.
| | 06:31 |
Interestingly enough, if I save this and
preview this in my browser, you'll notice
| | 06:36 |
that now we're getting all the styling
applied to it.
| | 06:38 |
But notice now, if I shrink my window
down, ooh, it doesn't change color
| | 06:42 |
anymore.
And the reason for that is the order in
| | 06:44 |
which these are applied, and that's really important.
| | 06:46 |
So, I want to go back to Dreamweaver here
for just a moment.
| | 06:49 |
You can see that in terms of my external
sources, temp shows up first and main.css
| | 06:53 |
shows up after that.
That order actually does matter.
| | 06:56 |
If I go into Code view and I go to my
source code, you can see that these link
| | 07:00 |
tags are appearing in the same order that
they display here.
| | 07:03 |
Now, that matters because CSS is basically
applied in the order in which it's found.
| | 07:08 |
So, if I have selectors in main that would
overwrite or, or conflict with the
| | 07:13 |
selectors found in the temp file, they're
going to overwrite them, and that's what's
| | 07:17 |
happening there.
Main.css' does have a paragraph selector
| | 07:21 |
and the color of the text is black.
So, that's going to overwrite anything in,
| | 07:25 |
in temp.css now.
Unfortunately, we can't drag these and
| | 07:29 |
reorder them.
That would be awesome, it would be nice if
| | 07:31 |
we had that capability but we don't.
So the order in which you attach your
| | 07:35 |
stuff is really matters.
You want to pay attention to that.
| | 07:38 |
Now, nothing is going to prevent you from
going into the code.
| | 07:40 |
For example, I can go into the code here
and cut the main.css, and then paste it
| | 07:44 |
above temp.
Now, not only is that going to work for
| | 07:50 |
me, but if I do a save all.
Notice that in my CSS designer, it
| | 07:56 |
updates.
And now temp is in front.
| | 07:59 |
And now, if I were to go back to my
browser and refresh my page, and re-size
| | 08:02 |
it again.
Now that red text shows up, and it's
| | 08:03 |
showing up because the order of the
external style sheets.
| | 08:04 |
So you can't use the CSS designer to
reorder those sources, you're going to
| | 08:12 |
have to do that manually.
But CSS designer will pick up on the
| | 08:17 |
change and it'll represent that.
Now, there's one more thing that I want to
| | 08:20 |
show you about managing some external
style sheets.
| | 08:22 |
You can get rid of your media queries, but
there's something really important about
| | 08:26 |
this if you do that.
So I've selected this media query here.
| | 08:29 |
What if I decided that hey, I want all my
text to be red I really don't want to
| | 08:32 |
worry about what size the screen is.
If I select this and get rid of it, notice
| | 08:36 |
that it says hey, all the CSS selectors
defined in the media query are going to be
| | 08:40 |
deleted, are you sure you want to do that.
If I click OK, that's not only going to
| | 08:45 |
get rid of the media query, but all of the
selectors inside of it.
| | 08:47 |
Not a big deal because I only had one.
But if you have a ton of selectors inside
| | 08:51 |
of media query and you want to get rid of
the media query, it's nice to know that
| | 08:55 |
you can select it and delete it.
But that might not be the most efficient
| | 08:58 |
way.
In those cases, you may want to go in and
| | 09:01 |
just delete the media query by hand if you
don't need it.
| | 09:04 |
Because that'll at least save all the
selectors inside of it.
| | 09:06 |
One last thing here, temp.css is now empty.
| | 09:09 |
We don't need it anymore.
Any time you want to get rid of a source,
| | 09:12 |
that's easy enough to do as well.
I can click once on the source.
| | 09:15 |
Go up here and you just click this little
minus symbol to remove it, and it's gone.
| | 09:19 |
It'll actually strip out the link tag. Alright.
| | 09:21 |
I'll do a save all, and there's our
external CSS.
| | 09:25 |
Now of course, you could always hand code
that link to the external style sheet as
| | 09:29 |
well.
It's a very simple element.
| | 09:31 |
If we go over to code view and look at it.
Yeah, let me collapse this.
| | 09:35 |
You could see there's not a lot to this,
so hand coding it really isn't that
| | 09:39 |
difficult.
And frankly, Dreamweaver's code hinting is
| | 09:42 |
even going to help you browse out, and
find the correct CSS file.
| | 09:45 |
So in the end, like a ton of the options
inside of Dreamweaver, the method that you
| | 09:50 |
choose to attach and manage external style
sheets is largely going to be based on
| | 09:54 |
your own personal preferences.
| | 09:56 |
| | Collapse this transcript |
| Controlling CSS through the Properties inspector| 00:00 |
While the CSS Designer is where you're
going to be doing the majority of your
| | 00:05 |
work on CSS, the Properties Inspector also
allows you to do a fair amount of CSS
| | 00:11 |
based work directly through it.
Without actually having to open up the CSS
| | 00:14 |
Designer panel.
It is extremely important to note however,
| | 00:19 |
that without understanding what the
Properties Inspector is doing regarding
| | 00:23 |
your CSS, you can really cause some major
issues within your site.
| | 00:27 |
So, we need to take a moment to examine
how the Property Inspector works with your
| | 00:32 |
site's CSS.
So, I have the programs file open and this
| | 00:36 |
time it's coming from the 07_12 folder in
the programs sub-directory.
| | 00:41 |
Alright, so the first thing I want to do,
I'm in Design view and I want to scroll
| | 00:45 |
over.
To this sidebar right here.
| | 00:47 |
This says academic links.
Let's say, for example, we wanted to
| | 00:50 |
modify some of the styling of these links. Alright.
| | 00:52 |
So, I'm going to click inside, just one of
the links to focus on it.
| | 00:56 |
And, in my Properties Inspector.
Remember, you can switch back and forth
| | 00:59 |
between HTML and CSS.
Make sure you're on CSS.
| | 01:02 |
And the Properties Inspector changes a
little bit, and it tells us a little bit
| | 01:06 |
about the styling.
Now, we don't have a lot of properties
| | 01:09 |
going on.
I'm going to hover over each one of these
| | 01:11 |
properties and show you what's happening here.
| | 01:13 |
We have the font family, we have the font
style, we have font weight.
| | 01:18 |
So, italic or bold.
We have color and then we have size.
| | 01:21 |
We also have text alignment to, so there's
not a lot here and obviously we're looking
| | 01:26 |
at typographic properties because we're
focused on text.
| | 01:29 |
You may have noticed also that when I
hover over these.
| | 01:32 |
I'm getting a little bit of feedback about
where this value is coming from.
| | 01:35 |
It's sort of showing me, like, you know,
the size is 0.9 (UNKNOWN).
| | 01:38 |
The color is white, I don't have anything
defined for weight or style, but if you
| | 01:42 |
hover over it, it shows you where this is
coming from.
| | 01:45 |
And this is an incredibly important part
of this process.
| | 01:48 |
For example, you can see that font, it
says the property font family is inherited
| | 01:51 |
from this rule and it gives you that
really long rule that it's pulling that
| | 01:54 |
from.
If I look at font style it's inherited
| | 01:58 |
from this rule as well.
If I look at font weight it's inherited
| | 02:00 |
from this.
If I look at size, it says okay font size
| | 02:03 |
is coming from this rule.
Section info li.
| | 02:05 |
And then color is coming from the rule A.
Now this is really important because if I
| | 02:13 |
modify one of these properties, it's not
actually going to go modify one of those
| | 02:17 |
rules.
And that's important because if it did,
| | 02:19 |
that would be a problem.
If I change the color from white to
| | 02:22 |
something else, for example.
If it modified the A selector that would
| | 02:25 |
change every single link, not what I'm
focused on alright, so what is this
| | 02:29 |
going to change?
Well, look over here to the left, and it
| | 02:33 |
shows you your targeted rule.
Right now it says section info li a, so
| | 02:36 |
this is a rule in my CSS and this is what
it's going to change.
| | 02:41 |
So, if I change any of these things it's
going to effect this rule, not the rules
| | 02:44 |
that it's inheriting from and that's
actually a good thing.
| | 02:47 |
If I grab this pull-down menu for Font,
for example, and choose the font stack
| | 02:51 |
that we defined earlier, this Bitter /g,
Georgia, Times New Roman, and Serif.
| | 02:54 |
If I select that, notice that it modified
this rule.
| | 02:58 |
If I hover over this now, it says, the
property font family is coming from
| | 03:02 |
section info lia.
So, it did modify the appropriate rule.
| | 03:06 |
And I'm getting the font that I wanted for this.
| | 03:08 |
So, if I do a save all, look at that in
Live view, I can see that it is bringing
| | 03:14 |
in the appropriate font.
Perfect, I'm going to turn the Live view
| | 03:17 |
off, and I'm going to go back to this.
Now, the reason that this is important is
| | 03:21 |
because anytime you make a change, or
before you make a change to any of these
| | 03:24 |
type properties right here, you first need
to check targeted rule.
| | 03:27 |
If you grab that pull-down menu, wow.
You get this huge list and what's
| | 03:31 |
happening here and your list may not be as
big on certain files.
| | 03:35 |
Because what you're looking at is you're
looking at the cascade.
| | 03:37 |
The cascade is, what different rules are
applying here?
| | 03:41 |
You know, what, this element is pulling
styling from how many different rules?
| | 03:45 |
And it just goes right up the chain.
So, you can see, section info lia is being
| | 03:50 |
applied.
And then you have a hover a.
| | 03:52 |
And if I wanted to target one of those rules.
| | 03:55 |
Let's say I did want to make a global
change to my links.
| | 03:57 |
I could click this.
And then, now, if I change this, it would
| | 04:02 |
actually target that rule, and change that.
| | 04:04 |
I don't want to do that because that would
make a global change.
| | 04:06 |
Be very careful.
And notice that every time you focus, it
| | 04:10 |
refocuses that targeted rule.
So if you click anywhere in your file.
| | 04:14 |
It's going to go to the closest rule that
applies to that particular element.
| | 04:19 |
If it's not the rule you're expecting, you
should always double check that and then
| | 04:23 |
select the rule that you were expecting to
see there, and then a change would occur
| | 04:26 |
to that rule.
So, this targeted rule drop-down,
| | 04:29 |
incredibly important, you want to make
sure you double check that every single
| | 04:32 |
time.
You work within the Properties Inspector.
| | 04:35 |
Now, what if you wanted to change a
property that's not listed over here.
| | 04:39 |
Let's say you wanted to add a little bit
of padding or something like that.
| | 04:42 |
Well the obvious choice would be to go
over to the CSS Designer panel.
| | 04:45 |
But what if you wanted to do it from here?
Well, there is this little Edit Rule
| | 04:49 |
dialog right here.
And if I click on this, you're going to
| | 04:52 |
see the CSS Rule Definition dialog pop-up.
Now folks that have used Dreamweaver
| | 04:56 |
before, you've probably seen this.
This is one of the last holdouts.
| | 05:00 |
There's a couple places in Dreamweaver
where you can still bring this up.
| | 05:03 |
And this is one of them.
This is one of the last so, I expect this
| | 05:06 |
actually to go away in further releases of
Dreamweaver or CC /g, but notice that here
| | 05:10 |
I could go to Box and I could go ahead and
set some padding if I wanted to do that.
| | 05:14 |
So, you do still have this ability, but
again, I don't know how much longer this
| | 05:19 |
is going to be around.
Alright, I'm going to hit cancel.
| | 05:22 |
So, I mentioned before that actually, it
would be better if I wanted to do a little
| | 05:25 |
bit of padding or something like that, to
go over to the CSS Designer, but what if
| | 05:30 |
your panel (INAUDIBLE) up?
Maybe you have it hidden.
| | 05:32 |
In this case I'm looking at the Files panel.
| | 05:34 |
Well, in that case, if I click CSS panel,
right here, it's going to focus on the
| | 05:38 |
designer for me.
Now, it also because I have this selected,
| | 05:43 |
it gives me the computed styles for that
and I get to choose a selector and now I
| | 05:48 |
can over to say layout.
And set a little bit of padding on this if
| | 05:52 |
I wanted to so you could make that change
that way too.
| | 05:54 |
You, you can use either the Properties
Specter to make some pretty focused
| | 05:58 |
changes on your Type properties or you can
use it as sort of a gateway if you will,
| | 06:03 |
to the larger CSS Designer panel.
So, in certain situation, using the
| | 06:09 |
Properties Inspector to speed up your CSS
workflow will actually make sense.
| | 06:13 |
But I do want to remind you, I really feel
like I need to point this out.
| | 06:16 |
You really do need to be aware of which
rule you're targeting.
| | 06:20 |
So, double check this targeted rule dialog
box every single time you edit, or, or add
| | 06:25 |
some properties to your CSS.
It's really easy to add a property to the
| | 06:29 |
wrong selector, if you're not paying
attention.
| | 06:32 |
| | Collapse this transcript |
| Using Live view and CSS Inspect| 00:00 |
In this exercise, I want to focus on how
LiveView can help us when we're working
| | 00:04 |
with and editing our CSS.
Now we've used LiveView before, and we
| | 00:09 |
know its amazing at helping us understand
how layouts are going to look in most
| | 00:12 |
browsers or at least some of them anyway.
But, you're often going to want to
| | 00:17 |
troubleshoot your CSS while in LiveView,
because it's then that you're going to
| | 00:20 |
notice some of the issues and problems.
Well, that's where another feature that
| | 00:25 |
works in conjuction with LiveView comes
in, and that's CSS Inspect.
| | 00:29 |
CSS Inspect let's us do well, really what
it says.
| | 00:33 |
It let's us inspect the elements on the
page and visually explore the box model
| | 00:36 |
properties that have been set on those elements.
| | 00:38 |
As you're going to see, it is an
invaluable way to troubleshoot layout
| | 00:41 |
issues.
So, I'm here in the Spotlight.htm, and I
| | 00:45 |
can find this in the 07_13 folder.
I'm just going to turn on LiveView, there
| | 00:51 |
we go.
And everything looks okay for the most
| | 00:55 |
part, but there are a couple of issues.
One, I don't like the spacing of this
| | 00:59 |
text, both the headline and the student's name.
| | 01:02 |
That spacing needs to be fixed, it's too
close to the bottom.
| | 01:05 |
And there's equal spacing among all these
elements except for down here on the
| | 01:10 |
bottom.
So, I've gotta, I've gotta track down kind
| | 01:12 |
of what's going on there.
Well, you know, in a typical workflow if I
| | 01:15 |
didn't have inspect available to me, I
would sort of see what's going on here and
| | 01:19 |
then I'd have to go back in, find all the
selectors that are applying to those and
| | 01:23 |
sort of figure out who the culprit is by
just doing some math and looking at, at
| | 01:27 |
who's effecting what.
Now, that would be very problematic, that
| | 01:30 |
would take forever.
So, I can turn inspect on by simply
| | 01:33 |
clicking right here, Turn on Inspect Mode.
And when I do that I can begin to mouse
| | 01:38 |
aronnd my elements.
Now, I want to be very careful and not
| | 01:41 |
click on anything because as soon as I
click on something, I actually focus on
| | 01:44 |
that element and I turn inspect off.
It's actually one of the side effects of
| | 01:48 |
inspect because, it, it figures that hey,
when you select something, you want to
| | 01:51 |
focus on that, and then use some of the
others tools to modify it.
| | 01:54 |
So, I'm just really careful right now to
sort of mouse around.
| | 01:58 |
Now, as I mouse around, you're seeing
different colors show up.
| | 02:00 |
Let me explain to you what those mean.
That sort of light blue highlight
| | 02:03 |
indicates the content of the element itself.
| | 02:06 |
The yellow indicates margin.
And then any time you see sort of a purple
| | 02:10 |
or magenta value, that, that's padding.
So, those are things that we can look at
| | 02:15 |
and sort of tell what's going on.
We can tell when an element has padding,
| | 02:19 |
we can tell when an element has margin,
and we sort of get a feel for that.
| | 02:22 |
Now, if I look at these headlines.
When I hover over student spotlight, I can
| | 02:26 |
see that bottom margin, and I it's
identified in that yellow.
| | 02:29 |
And if I go to the actual text, then I can
see that there's a few things happening
| | 02:34 |
there, it has a lot of padding above it.
So, if I wanted to move those two closer
| | 02:38 |
together, I would either remove the margin
from student spotlight or remove or modify
| | 02:43 |
the padding from the name as well.
Right now, I mentioned that I also want to
| | 02:47 |
go down and figure out what's happening
with my footer.
| | 02:51 |
So, if I go down to the footer.
If I hover over the footer itself, I see
| | 02:54 |
that it has a fair amount of padding at
the top of it, but there's no margin above
| | 02:58 |
it.
If I go to one of these pods, I can see
| | 03:01 |
that the pod itself has some margins, but
it's not touching.
| | 03:04 |
So, sometimes it's kind of baffling.
Sometimes you're like, wait a minute,
| | 03:08 |
that's not touching, that's not touching.
And so, what's causing the problem?
| | 03:11 |
Well, let me show you a really cool feature.
| | 03:13 |
Let's say I go over an interior element,
like this text out with it, and just hover
| | 03:17 |
over that, and just let go of my mouse for
a second.
| | 03:20 |
Here's where your arrow keys can help you.
And if I hit the right arrow key, I go
| | 03:23 |
down and inspect children, but if I hit
the left arrow key, notice it goes up.
| | 03:29 |
So, now I'm going up, and if you look at
the tag selector, you can actually watch
| | 03:32 |
your progress.
Look at the tag selector.
| | 03:34 |
If I hit the left arrow key I go to the paragraph.
| | 03:36 |
Hit the next left arrow key, I go to the
Div that contains the artwork.
| | 03:39 |
Notice the margin on the bottom, and then
if I hit left one more time, aha, there's
| | 03:43 |
the article spotlight.
Now, you can't always find these by
| | 03:46 |
hovering over these parent elements,
because a lot of times it focuses on the
| | 03:50 |
children.
So, by using your arrow keys, right goes
| | 03:53 |
in left those out, you can create a more
static environment where you really being
| | 03:58 |
detailed about who you're taking a look at.
| | 04:00 |
So now, I can tell that the bottom margin
on that article spotlight is the one
| | 04:05 |
that's actually causing the problem.
So, there's my culprit.
| | 04:08 |
So now, I know which properties will need
elements that I'm interested in fixing are
| | 04:13 |
causing the issue.
Correcting them should actually be pretty
| | 04:16 |
easy.
Now, before we go and correct these, I
| | 04:18 |
want to focus on another feature.
But before we talk about that, I want to
| | 04:21 |
go back for a minute and talk about this
CSS Inspect feature that we've been using
| | 04:25 |
here.
I know seems like I might be hyping it a
| | 04:27 |
little bit, and a lot of times people hype features.
| | 04:30 |
And you're think, wow, you're really
hyping that more than it deserves.
| | 04:32 |
But, I'm actually being honest when I say
I view that CSS Inspect feature that we're
| | 04:37 |
using here as an invaluable part of my
styling workflow.
| | 04:40 |
I use it all the time.
If you've ever gone out and the tools
| | 04:43 |
within browsers like Firebug or Dragonfly
or Web Inspector Kit, you know they all
| | 04:47 |
have similar features to this.
However, when I take Dreamweaver CSS
| | 04:51 |
Inspect and combine it with another
feature, the code navigator, they become
| | 04:56 |
an indispensable tool for inspecting and
troubleshooting your style directly within
| | 05:00 |
Dreamweaver.
So I'm going to show you that code
| | 05:02 |
navigator, and how it works with the CSS
inspect in our next exercise.
| | 05:07 |
| | Collapse this transcript |
| Using the Code Navigator| 00:08 |
In our last exercise, I showed off the CSS
Inspect feature, which allows you to
| | 00:10 |
preview the Box Model properties of
elements while you're in Live view.
| | 00:12 |
In this exercise, I want to show another
feature that I consider to be equally, if
| | 00:16 |
not more important, to your daily styling
workflow, and that would be the Code
| | 00:19 |
Navigator.
The Code Navigator gives you an easy way
| | 00:23 |
to access and modify your styles from
anywhere in your document, without having
| | 00:26 |
to know exactly which rule is controlling
the element from within your styles.
| | 00:31 |
As your site gets more complicated it's
not unusual to have styles in various
| | 00:34 |
places, all throughout your site.
All coming together at run time to
| | 00:38 |
determine the final rendering of the element.
| | 00:41 |
And because of this, it can be really
difficult to know exactly which rule to
| | 00:44 |
modify to achieve the desired results.
And that's where the Code Navigator comes
| | 00:49 |
in.
So I'm working with Spotlight again but
| | 00:51 |
this time, from the 07_14 folder.
I've got Live View turned off, we're going
| | 00:54 |
to turn it on in just a moment because I
want to show you something about the Code
| | 00:57 |
Navigator.
That tends to annoy people, for whatever
| | 01:00 |
reason, let's say that any time I click on
an element, you've probably noticed this,
| | 01:03 |
if you've been working with me throughout
the title, you've noticed this.
| | 01:06 |
You see this little icon that comes up
right there?
| | 01:08 |
The one that looks like a little sternwheeler?
| | 01:10 |
All right, that's the Code Navigator.
If I click on that indicator, it brings up
| | 01:13 |
the Code Navigator and you get this list.
Now, most people that are new to
| | 01:17 |
Dreamweaver, they don't know what this is
and it annoys them.
| | 01:20 |
And so, they view the Code Navigator as
this annoying little thing that won't go
| | 01:23 |
away.
And it shows up all the time.
| | 01:26 |
And they're like I want to get rid of it.
All right, so if that's been bothering
| | 01:28 |
you, you've probably also been looking at,
at my screen going, why doesn't he have
| | 01:31 |
that?
That comes up all the time and it's
| | 01:34 |
ticking me off, why doesn't he have that
come up?
| | 01:37 |
Well, if I click on this, notice that you
can go right down here and you can disable
| | 01:40 |
it.
And that's one of the first things I
| | 01:43 |
always do when I open up Dreamweaver for
the first time on a machine, I disable
| | 01:46 |
that.
And it's because it is kind of annoying,
| | 01:49 |
you focus somewhere and that comes up, but
now if you disable it, it turns off.
| | 01:53 |
Now, (LAUGH) I just spent some time
telling you how wonderful this feature is
| | 01:56 |
and then I just disabled it.
And you're probably like wait a minute, if
| | 02:00 |
its great, why did you disable it?
Well, because I only want the Code
| | 02:04 |
Navigator when I want the Code Navigator.
I don't want it all the time, I just want
| | 02:08 |
it when I need it.
And so there's a keyboard shortcut that
| | 02:10 |
can allow you to bring it up and it's very
quick and easy to do.
| | 02:14 |
Let me just show you how that works.
Now, if you're on a PC, you're going to
| | 02:16 |
hold the ALT key down and you going to
click on an element.
| | 02:19 |
If you're on a Mac, you're going to hold
the Cmd and the Option key down and click.
| | 02:23 |
So, either way, so either Cmd+Option+Click
or Alt+Click, depending upon which
| | 02:27 |
platform you're on.
And then, as soon as I do that, notice the
| | 02:30 |
Code Navigator comes up.
So I just clicked on this paragraph right
| | 02:32 |
here in the center of the screen.
Now, what is that doing for me.
| | 02:35 |
Well what I'm seeing is I'm seeing a list
of all the rules that apply to this
| | 02:38 |
element, everything.
And if I hover over that, and I'm also
| | 02:42 |
seeing them in the order that they're applied.
| | 02:44 |
So these are applied first and then these
come later.
| | 02:47 |
And anything in this one that, say,
conflicts with this one, this one wins and
| | 02:50 |
overrides it.
So I can literally just go up and see
| | 02:54 |
what's being applied from that rule.
How cool is that?
| | 02:58 |
That is really awesome.
I can see in this one for example, that I
| | 03:01 |
have a margin of 0 set.
And here, I see a margin bottom of 1m so I
| | 03:05 |
know that this one wins, so there's no
margin bottom on this one.
| | 03:09 |
Because that margin bottom is being
overridden which is really neat.
| | 03:12 |
Now, if all it did was give me this list,
that would still be pretty effective, but
| | 03:16 |
actually if I decide that I need to modify
one of these, I can simply click on it,
| | 03:20 |
and watch what Dreamweaver does.
It does two things for me.
| | 03:25 |
If I have the CSS Designer Panel open, it
jumps right to that rule in the designer
| | 03:28 |
panel, or it jumps over here in the code
as well so if you like to hand code, it
| | 03:32 |
gives you that option.
If you like to work with it visually, it
| | 03:36 |
gives you that option.
That is really, really, neat.
| | 03:39 |
Alright, I'm going to go back to Designer,
and I mentioned earlier how this is
| | 03:43 |
extremely powerful if you combine it with
CSS Inspect.
| | 03:47 |
All right, so let me show you that
workflow and how this works.
| | 03:49 |
I'm going to turn my Live View back on.
And then I'm going to turn Inspect on.
| | 03:53 |
Now, remember earlier we were looking at
these and we were like, okay what is
| | 03:56 |
causing the problem?
Okay, there's your bottom margin.
| | 04:00 |
That doesn't look that bad but, there's
way too much top padding going on here and
| | 04:03 |
that's what's causing this one to be
pushed down.
| | 04:06 |
So, if I hold down my Option key and my
Command key.
| | 04:10 |
Alt key on the PC and click, that again
brings up my Code Navigator.
| | 04:15 |
And if I go down to div.student p, there's
that padding top that I want to get rid
| | 04:19 |
of.
I simply click on that one time.
| | 04:21 |
It's going to jump me to here, and I can
come right here to this padding and I can
| | 04:24 |
just go ahead and get rid of that.
As soon as I do that, I can go back to
| | 04:29 |
design view, make sure Live View is turned
on, and now, spacing is exactly the way I
| | 04:33 |
want.
With Inspect turned on, I can see that the
| | 04:37 |
only thing keeping them apart is that margin.
| | 04:40 |
Perfect.
Now, I'm going to scroll down and again,
| | 04:42 |
I'm going to keep Inspect turned on and I
remember last time it was that article.
| | 04:48 |
And sometimes its really hard to hover
over that right element.
| | 04:51 |
So remember, you can always hover over an
element and then just use your left arrow
| | 04:54 |
keys to go get the one you're looking for.
In this case, I'm looking for the
| | 04:58 |
article#spotlight.cf.
Holding down my Command Option, I can
| | 05:02 |
click That one comes up right there.
There's that margin bottom of three pixels
| | 05:07 |
that I want to get rid of.
All I've gotta do is click on that one
| | 05:09 |
time.
Jumps me right to that rule, I can find
| | 05:12 |
that margin.
I can get rid of it.
| | 05:14 |
And now if I go back to Design View, and I
turn Live View, let's do the Save all real
| | 05:18 |
quick, I haven't done that.
Turn on Live View back on, all right.
| | 05:23 |
So I'm going to preview this in my browser.
| | 05:25 |
The spacing of the text looks more or less
the way I want it to, and if I go back
| | 05:29 |
into Dreamweaver and make sure Inspect is
turned back on, you'll notice as I mouse
| | 05:33 |
around now we don't have that padding
around on top of the text.
| | 05:39 |
We only have, the only spacing we're
getting is by the bottom margin on the
| | 05:41 |
headline above it, which is exactly what
we want.
| | 05:44 |
All right, now, I've got one more element
I want to fix, so I'm going to scroll
| | 05:47 |
down, and I want to fix this little extra
bit of spacing we have here on the bottom.
| | 05:52 |
And, you know it's pretty easy to find the element.
| | 05:55 |
Again, remember, we did this in the last exercise.
| | 05:56 |
If you can't hover over it directly,
remember you can always hover over one of
| | 05:59 |
it's children.
And then you can just use your Arrow keys
| | 06:02 |
to go back up the chain, if you will.
And I'm looking at the
| | 06:05 |
article#spotlight.cf.
Now, here's where the code navigator
| | 06:08 |
really comes in handy.
We've sort of identified who needs to be
| | 06:11 |
modified and what needs to be modified
more or less.
| | 06:14 |
But if I use the Code Navigator, so again.
Option+Cmd on the Mac, Alt+Click on the
| | 06:19 |
PC.
So Option+Cmd+Click, or Alt+Click,
| | 06:21 |
depending on which platform you're on.
You'll notice that I get my Code Navigator
| | 06:25 |
to come up.
And I can find, there's that
| | 06:27 |
article#spotlight.
Now, you might be tempted to just go ahead
| | 06:30 |
and remove the margin bottom.
Because that is what's causing the
| | 06:32 |
problem, right?
There's 3 pixels.
| | 06:34 |
But using the Code Navigator, it's always
a good idea to go back up the chain and
| | 06:37 |
see what's happening.
I noticed that the article selector itself
| | 06:41 |
has a margin bottom of 3 pixels.
So just removing the bottom margin from
| | 06:45 |
this one isn't going to get it done for me
because this article would still be
| | 06:48 |
applying.
That's what I love about the Code
| | 06:51 |
Navigator, you can just do a quick scan of
all your selectors and say okay, not only
| | 06:54 |
is this one is causing a problem but this
one probably would, too.
| | 06:59 |
So instead of just getting rid of the
bottom margin here, I need to modify it.
| | 07:02 |
So I'm going to click on this rule, I'm
going to go to my bottom margin here, and
| | 07:05 |
I'm going to change that from 3 pixels to
0 pixels.
| | 07:09 |
So I want to be very clear about that.
And that's going to overwrite my other
| | 07:12 |
article.
So if I go back to Design View, if I do a
| | 07:14 |
little Save All here, it looks good in
Live View.
| | 07:17 |
I can go back to my browser and Refresh
the page.
| | 07:20 |
Now, when I scroll down, I see that I'm
getting equal spacing everywhere as well.
| | 07:24 |
Awesome.
You know, you don't need a CSS Inspect to
| | 07:27 |
use the Code Navigators.
You can see, you can turn Code Navigator
| | 07:31 |
on at any time.
But when you combine those two, they are
| | 07:34 |
extremely powerful CSS debugging tools.
So if you get into the habit of using the
| | 07:39 |
Code Navigator to investigate page
elements and determine their overall
| | 07:43 |
styling, I think you're going to find, as
I have that it becomes an invaluable part
| | 07:46 |
of the CSS workflow, especially when you
use it in conjunction with the CSS
| | 07:49 |
Inspector.
| | 07:49 |
| | Collapse this transcript |
|
|
8. Working with ImagesManaging images and other assets in Dreamweaver| 00:00 |
In this chapter, I want to explore working
with images in Dreamweaver.
| | 00:04 |
Before we discuss placing and modifying
images, I want to take a moment to talk
| | 00:09 |
about managing your images in Dreamweaver
using the Assets panel.
| | 00:13 |
So, I've got my Assets panel right here
docked with the Files panel in a grouping.
| | 00:18 |
But if you don't have 'em like that,
that's fine.
| | 00:20 |
You can go up to the window, choose Assets
and the panel will show up.
| | 00:24 |
Now, it typically shows up as a floating panel.
| | 00:26 |
So if you want to dock it over here the
way I have it on the Files panel, thats
| | 00:30 |
fine, whatever works for you.
Alright, so what does the Assets panel do?
| | 00:33 |
Well, it gives you a nice, sort of central
location where you can manage and control,
| | 00:39 |
really, any number of assets.
So, it's not just talking about images.
| | 00:42 |
You'll notice, if I go on the side here,
I've got colors, I've got different links
| | 00:46 |
or URLs that are used in your site
library, items, templates, things like
| | 00:49 |
that.
Now, we, of course, in this chapter, are
| | 00:51 |
focusing on images so that's really what I
want to talk about in terms of the assets
| | 00:55 |
panel's capability.
In terms of images if gives you a place to
| | 00:59 |
organize them it allows you to place
images directly on the page by just
| | 01:02 |
dragging and dropping them.
And, it also, as I click through these
| | 01:05 |
images, you can see, it gives you a nice
thumbnail image up top, which allows you
| | 01:09 |
to preview the image and make sure you're
using the right one.
| | 01:12 |
So, you can see that I don't have any
files open, but I've defined the 08_01
| | 01:18 |
exercise folder as a site.
And if you're seeing a lot more images
| | 01:22 |
than I do here, or you're seeing double
copies of images, just take a moment to
| | 01:26 |
re-define your site and make sure 08_01 is
defined as a site.
| | 01:31 |
Because when you first define a site, the
Dreamweaver caches all the information in
| | 01:35 |
that site, and it's going to catalog all
of the images regardless of where they're
| | 01:39 |
from.
So, most of the time people will put
| | 01:42 |
images in a central location, you know,
single folder in their site.
| | 01:45 |
But, if you don't or if there are several
different places in your site where images
| | 01:49 |
are stored, the assets panel is going to
show you all of them regardless of where
| | 01:53 |
they're from.
So, it's not just introspecting any one
| | 01:55 |
folder, it's every single image in your
site which is pretty cool.
| | 01:58 |
Now, that's nice but, it also leads to the
problem that there are a lot of images
| | 02:03 |
that you're looking at.
Now In this case, this is a fairly small
| | 02:06 |
representation of the size.
So there are not that many images here but
| | 02:09 |
in even for small to moderate sites, it's
not uncommon to have dozens, if not over
| | 02:14 |
100 images and, in that sense, it can be
kind of difficult to filter through all of
| | 02:19 |
them and find exactly what you're looking for.
| | 02:21 |
Well, if you'll notice, the very top of
the Assets panel when you're looking at
| | 02:25 |
images and if you don't see images Just be
sure to click this icon right up here, up
| | 02:29 |
top for images.
Well, at the very top of the Assets panel
| | 02:32 |
when you're working with images, you get
to choose between whether you want to look
| | 02:35 |
at all the images in the site or just the
favorites that you've defined.
| | 02:39 |
Now, if I click on Favorites right now, I
don't see any.
| | 02:41 |
The reason for that of course, is I
haven't defined any favorites yet, so, I
| | 02:45 |
want to do that now.
Before I define some images as favorites,
| | 02:49 |
the first thing I want to do is organize
my favorites a little bit.
| | 02:51 |
There are two things that I want to focus on.
| | 02:54 |
I have banners that are going to be
throughout the entire site.
| | 02:57 |
Every page gets a banner of some sort and
that 's just a banner graphic.
| | 03:00 |
And I have a spotlight page where the
student spotlight is being shown and there
| | 03:05 |
are a lot of images in that and I would
like to sort of segregate those images and
| | 03:08 |
work with those as well.
So what I'm going to do is I'm going to
| | 03:10 |
create two folders.
I'm going to go down to the very bottom of
| | 03:12 |
the assets panel And there's this new
favorites folder icon.
| | 03:15 |
I'm going to click that twice, and it's
going to create two folders for me.
| | 03:20 |
Now, I could name them any time I want, so
it doesn't really matter.
| | 03:22 |
So, I'm going to click the first one and
I'm going to name this one, Banner, and
| | 03:27 |
then I'm going to name the second one Spotlight.
| | 03:32 |
Now, this is not creating a directory on
your hard drive.
| | 03:35 |
It's not creating any type of folder, it's
not adding any structure to your site, all
| | 03:39 |
it's doing is helping you organize things
within this panel.
| | 03:42 |
And that's something really important to remember.
| | 03:44 |
You're not changing the structure of your
site at all.
| | 03:47 |
Now I'm going to go back to my site
images, and I'm going to add some of these
| | 03:51 |
images to my favorites.
All these accent images I want to add all
| | 03:54 |
of those, so I'm going to highlight all of those.
| | 03:56 |
I can click on one, hold the shift key
down, and click on the last one, and then
| | 04:00 |
I'm also going to find, lemme scroll down
a little bit, I'm going to find this main
| | 04:05 |
back right here.
So this time I'm going to hold down the
| | 04:07 |
control or the command key, and click that one.
| | 04:10 |
Now the reason I'm doing that is so that
the rest of 'em will remain highlighted as
| | 04:13 |
well.
If I scroll up, I can see I still have all
| | 04:15 |
those highlighted.
Alright, there are actually a couple of
| | 04:17 |
different ways that you can define an
image as being a favorite.
| | 04:21 |
You could right-click, and you could
choose Add to favorites.
| | 04:25 |
Or down there at the bottom of the asset
panel, you're going to see that little
| | 04:28 |
ribbon icon with a plus symbol on it.
If you have an image highlighted, and you
| | 04:32 |
click on that, that's going to add it to
favorites as well.
| | 04:34 |
So both of them will do exactly the same thing.
| | 04:36 |
I'm just going to say add to favorites and
Dreamweaver gives a meth, (COUGH) give me
| | 04:40 |
a message that's kind of confusing, but
the message is basically, hey you just
| | 04:43 |
added these to Favorites, and I'm like
okay, great.
| | 04:46 |
The assets panel isn't the only place
where you can define something as a
| | 04:49 |
favored image.
If I go over to my Files panel and I open
| | 04:53 |
up the Images directory, I can let me,
let's give this a little bit more room so
| | 04:56 |
that we can read the titles.
Let me just expand that out.
| | 04:59 |
Expand this column out, there you go.
A little easier to see, right?
| | 05:03 |
I'm going to highlight starting with
feature one, all the way down to feature
| | 05:08 |
nine.
So I'm going to grab those and I'm
| | 05:11 |
going to right click those and right down
towards the bottom of the menu that comes
| | 05:15 |
up when I do that, I can choose add to
image favorites.
| | 05:18 |
So I'm going to select that.
Now that allows me to go back to the
| | 05:21 |
assets panel and click on favorites.
When I do that here are all of the images
| | 05:26 |
that I brought over.
Now one of the things that you'll quickly
| | 05:28 |
see is that you know the more images you
add to favorites the more cluttered it
| | 05:32 |
becomes and.
Then all of a sudden, you've defeated the
| | 05:34 |
purpose of putting 'em over here anyway.
So what I'm going to do, is I'm going to
| | 05:37 |
highlight all of these accent images.
And I'm going to drag them into the banner
| | 05:40 |
folder.
And then I'm going to highlight all of
| | 05:42 |
these feature images.
And then I'm going to drage them into the
| | 05:46 |
Spotlight folder.
Okay, so now, what does this do for me?
| | 05:49 |
Well, as I'm looking through the images in
my site, if I want to find one of those
| | 05:54 |
banner graphics, all I have to do now is
come to the Assets panel, go to Favorites,
| | 05:58 |
and just open up that folder.
There they all are.
| | 06:00 |
I don't have to go hunting through the
Files panel.
| | 06:02 |
I don't have to go searching through all
of the images within my site.
| | 06:05 |
They're organized here in a nice central location.
| | 06:08 |
Then it makes it very easy for me to find them.
| | 06:10 |
Now if you want to remove something from
Favorites, you can.
| | 06:13 |
You can jjust highlight it.
And you can click the little Remove From
| | 06:15 |
Favorites, and it'll get rid of it.
Now, just because you've placed something
| | 06:18 |
over here in the favorites doesn't mean
that you've removed it from sight.
| | 06:22 |
You really haven't done anything other
than adding it to favorites, so you're not
| | 06:25 |
physically moving the images in any way,
you're not changing them in any way,
| | 06:29 |
you're not removing them from other views
within the site.
| | 06:32 |
You're just isolating them here so that
you can see them as well.
| | 06:36 |
Now, I'm going to expand this panel out a
little bit because I want to show you some
| | 06:39 |
of the things, and sometimes I have to
hide the welcome screen in order to do
| | 06:42 |
this.
I want to show you some of the things that
| | 06:44 |
the SS panel will show you, notice it has
the name of the image, has dimensions, the
| | 06:50 |
size, the type of images that it is and
the full path for that.
| | 06:54 |
So if it's located somewhere else in your
file, it will show you that it somewhere
| | 06:57 |
else as well.
You can also give these nicknames while
| | 07:00 |
your favorites, which is something that's
kind of interesting.
| | 07:03 |
If I rename this, let's say this one is
going to be my I don't know, programs
| | 07:07 |
banner.
I can type in programs banner.
| | 07:10 |
And it's going to change that, it just
gives it a nickname.
| | 07:14 |
It did not physically change the name of
the image.
| | 07:16 |
If I go back to my files panel, and I look
in my images.
| | 07:19 |
And let's just refresh the site so we make
sure of that.
| | 07:22 |
If I go up, accent one is still there.
In assets it just says programs banner.
| | 07:26 |
It's just a nickname that you give it here.
| | 07:28 |
And this is the only place that you're
changing it.
| | 07:30 |
Now some people find that confusing, and
tend not to do that but on the other hand,
| | 07:34 |
it's a lot easier to understand what
programs banner means than accent1 through
| | 07:39 |
six, so, I don't know, it's just a
personal preference I suppose in terms of
| | 07:43 |
what you want to do organizing your images.
| | 07:46 |
So that's one of the things that you can do.
| | 07:47 |
Now throughout this whenever we've
selected an image some of you may have
| | 07:52 |
been a little bit over zealous and
double-clicked an image.
| | 07:54 |
And if you did that I'll bet this happened
to you and I'm just going to double click
| | 07:57 |
one of these to show you what I mean.
So what Dreamweaver's going to do is by
| | 08:06 |
double-clicking this you're physically
launching this image in whatever editing
| | 08:10 |
program you specified for it.
Now if you haven't specified one for it
| | 08:13 |
and you own Photoshop, that's going to be
your default.
| | 08:15 |
But you can change it anytime you want by
going into the Preferences.
| | 08:18 |
So now you can see the images opened up
directly here inside Photoshop.
| | 08:21 |
That's a nice way to edit an image if you
know which image you're looking for and
| | 08:24 |
you need to go into Photoshop and make
some tweaks to it or changes to it.
| | 08:27 |
You can simply double-click and it'll go
ahead and open it up you can make your
| | 08:30 |
change save it out and come back into Dreamweaver.
| | 08:33 |
So we've covered a lot of ground here.
Now I know the Assets panel isn't for
| | 08:36 |
everyone.
As a matter of fact I know a lot of
| | 08:38 |
designers don't use it at all in their workflow.
| | 08:41 |
However, if you have a site that's really
very image-heavy, using the assets panel
| | 08:45 |
to organize and manage those assets can
really speed up a lot of your
| | 08:49 |
image-related tasks.
If you have to search through hundreds of
| | 08:52 |
images, well, it's a lot easier if you've
taken advantage of categorizing them using
| | 08:57 |
this favorites feature.
And what's more is you're going to see in
| | 09:00 |
our next exercise The assets makes placing
those images on the page once you've found
| | 09:05 |
them as simple as dragging and dropping them.
| | 09:07 |
Now I'm a big fan of the ability to see a
thumb nail of the image in the assests
| | 09:11 |
panel.
Now that allows me to confirm that I've
| | 09:13 |
got the right image before I place it on
the page.
| | 09:16 |
Whether it a little or a lot you a least
owe it to yourself to try out the assets
| | 09:20 |
panel and see if it can assist you when
working with images in dream weaver.
| | 09:25 |
| | Collapse this transcript |
| Placing images on the page| 00:00 |
Regardless of what you're doing, having
multiple options for completing the task
| | 00:03 |
at hand is a good thing.
And when it comes to placing images on the
| | 00:07 |
page, you have a lot of different options
inside Dreamweaver to choose from.
| | 00:11 |
In this exercise, we're going to examine
different methods for getting images onto
| | 00:15 |
your web pages and then discuss some of
the pros and cons of each technique.
| | 00:19 |
So I actually have two files opened here.
I have the index file in the
| | 00:23 |
spotlight.html file open, and both of
these can be found in the 08_02 directory,
| | 00:27 |
so I went ahead and defined that as my
root directory.
| | 00:31 |
I'm going to start in the assets panel.
And I want to start by grabbing an image
| | 00:34 |
over here and just dropping it on the
page, which is pretty much one of the
| | 00:37 |
easiest ways to get an image on the page.
You'll notice, though, the image that I'm
| | 00:41 |
looking for is the award image, and you'll
notice I see two of 'em, and that might
| | 00:44 |
perplex you a little bit.
Remember, when I talked about the Assets
| | 00:49 |
panel in the previous exercise, one of the
things I mentioned is that when you define
| | 00:53 |
a site inside Dreamweaver.
It scans the entire thing, and it's going
| | 00:57 |
to show you every single image.
So because we not only have all the
| | 01:01 |
exercise files, but we also have a folder
that has all the finished files in it, so
| | 01:05 |
that as you're working you can open up,
say, one of the finished files and compare
| | 01:08 |
it to your work.
There's really two copies of the images
| | 01:10 |
directory.
There's one in the root, and then there's
| | 01:12 |
one in the finished file, so that's what
we're seeing here.
| | 01:14 |
Any time you have something like that
going on, let me show you a trick with the
| | 01:17 |
assets panel.
You can also sort things by not just name
| | 01:21 |
but things like size, type and full path.
So if I click on Full Path, now all the
| | 01:26 |
images in the Images directory are up top,
and all the images in the Finished Files
| | 01:30 |
will be in the bottom.
So now, I can make sure that that award is
| | 01:34 |
the one I'm looking for.
So you want to make sure you get the one
| | 01:36 |
in the Images directory and not the one in
the Finished Files directory.
| | 01:41 |
Lemme move that back a little bit.
I'm going to scroll down the index page
| | 01:44 |
until I get down here to the bottom.
To Victor Stuesse wins the Lacie Award.
| | 01:49 |
Now, I don't know if that's how you
pronounce his name or not, but that's how
| | 01:51 |
I'm going to do it.
All right.
| | 01:52 |
So I'm going to grab the award.jpg.
And I'm literally just going to drag and
| | 01:56 |
drop it right there in front of the V for Victor.
| | 01:59 |
Boom.
Image shows up on the page.
| | 02:01 |
Now, the first thing you're going to
notice is that the properties inspector is
| | 02:04 |
now showing you all of the properties for
this particular image.
| | 02:07 |
And that's because we have the image
selected, obviously.
| | 02:10 |
But there are some things that I want you
to get in the habit of doing right away.
| | 02:14 |
The first moment when you put an image on
the page, the very first thing you should
| | 02:18 |
do is to go into this dialogue box right
here and type in all alt text.
| | 02:23 |
So what is alt text?
Alt text is the text that will be inside
| | 02:27 |
the Alt attribute for that image, and
accessibility devices use it to describe
| | 02:32 |
the image, or to add additional
information about the image.
| | 02:35 |
In this case I'm just going to type in
Professor Victor Stuesse.
| | 02:41 |
Victor Stuesse.
There we go.
| | 02:43 |
I'm going to hit Enter or Return and click
off the image, and Save the file.
| | 02:49 |
Now, it may not look exactly the way you
want it to look right now, the text may
| | 02:54 |
not be wrapping around it the way you
want, but that's not important.
| | 02:57 |
What's important is that currently the
image is on the page.
| | 03:00 |
Now, there are other ways to drag and drop
images as well.
| | 03:02 |
Let's just say, let me delete this one and
go to the files panel and open up the
| | 03:08 |
images folder in the files panel.
So you'd, dragging and dropping works from
| | 03:12 |
here as well, not just in the Assets directory.
| | 03:14 |
I go over to the Files panel, open up the
images folder, grab the award dot JPEG and
| | 03:20 |
drag it to the stage, I get exactly the
same result.
| | 03:23 |
And of course now I have to type this in
again, Professor Victor Stuesse.
| | 03:30 |
There, now we've saved that.
So, dragging and dropping images on the
| | 03:35 |
page are pretty, it's pretty simple,
pretty easy, and for most people, it's the
| | 03:39 |
preferred method of putting images within
your files.
| | 03:42 |
Especially if you use the Assets panel a
lot yeah, but it's also really simple to
| | 03:45 |
do from the Files panel as well.
But it doesn't always work.
| | 03:48 |
You know one of the problems that we have
in Dreamweaver in the Design view.
| | 03:51 |
I'm going to click over on spotlight to
open this one up.
| | 03:54 |
One of the problems that we have in design
view is that first.
| | 03:57 |
Complex CSS layouts, things get really
weird really quickly.
| | 04:02 |
All right.
For example, I want to place an image of
| | 04:05 |
the student on the page, and I want it to
appear over here on the right-hand side,
| | 04:10 |
and I'm using CSS to do that.
So I need to actually place the image In
| | 04:14 |
front of this div tag right here.
I need to place it in front of that.
| | 04:19 |
Now, you can imagine how difficult that
would be to drag and drop on the page,
| | 04:23 |
right?
Dragging and dropping, while effective,
| | 04:26 |
isn't always the best method to use.
So let's take a look at how you can place
| | 04:30 |
an image on the page if you need to put it
in a precise location.
| | 04:34 |
And it might be something that's difficult
to do based on the visual aspect of the
| | 04:38 |
page.
So I want you to go in, you can just click
| | 04:41 |
anywhere inside the student spotlight, it
doesn't matter, the headline, that's fine.
| | 04:45 |
Go down to the Tag Selector and you'll
find a div down here that says
| | 04:48 |
div.student.
Click on that.
| | 04:50 |
That's going to select the entire div tag.
Now, using your arrow keys, you can place
| | 04:55 |
your cursor to the right, which would be
immediately after...
| | 04:58 |
Or to the left, which would be immediately before.
| | 05:00 |
I want you the hit your left arrow key.
And then don't touch anything else.
| | 05:05 |
Your cursor is currently lying to you.
You see that your cursor is blinking in
| | 05:09 |
front of the word student.
It's not where your cursor is.
| | 05:12 |
Your cursor is actually in front of the
div tag.
| | 05:15 |
Design view doesn't always give us the
most accurate preview of exactly where we
| | 05:18 |
are.
Now, in order for this to work properly
| | 05:21 |
make sure that you do not move your cursor
at all, and don't click any where else.
| | 05:25 |
It's important that you leave your cursor
right there.
| | 05:27 |
Alright, I'm going to go over to my Assets
panel, and I want to find this one right
| | 05:32 |
here, chow.jpg, when I find that I'm going
to select it.
| | 05:37 |
And then I can go right down here to the
bottom left-hand corner of the Assets
| | 05:41 |
panel, and I can click Insert.
Now, I know it looks grayed out, but it's
| | 05:44 |
just one of the weird things about
Creative Cloud's interface.
| | 05:47 |
Certain things look grayed out, but
they're not.
| | 05:49 |
So if I click that, it's going to place
the image right there on the page.
| | 05:52 |
Perfect.
Now, I'm going to undo that because I
| | 05:55 |
want to show you multiple ways to do the
same thing.
| | 05:57 |
Now, as long as you don't click anywhere
else, your cursor's going to remain right
| | 06:01 |
where you wanted it to be.
If you did happen to click somewhere else
| | 06:04 |
just by accident, remember you can
reestablish focus by clicking inside the
| | 06:08 |
Student Spotlight, clicking on the div
tag, and hitting the left arrow.
| | 06:12 |
So the next thing I want to do is I
want to go up and use my Insert menu.
| | 06:15 |
So I'm going to go up to the menu, I'm
going to say Insert Image > Image.
| | 06:24 |
Now, for this one, I'm going to make sure
I'm in the 08_02 directory, go in the
| | 06:29 |
images folder and find chow.
Now, what I like about this technique is
| | 06:33 |
it also allows me to resolve the link any
way that I want, either document or site
| | 06:36 |
relative.
Because when you place an imagine on the
| | 06:39 |
page, what you're really doing is linking
to that external resource via the image
| | 06:42 |
tag.
All right.
| | 06:43 |
I'm going to go ahead and click Open, and
it's going to place it on the page as
| | 06:46 |
well.
Now, you can get the exact same results by
| | 06:49 |
using the Insert panel.
You can go up to the Insert panel, right
| | 06:52 |
there is Image, you can choose Image.
It will give you the exact same dialog
| | 06:56 |
box.
So it's really whichever method suits your
| | 06:58 |
own personal preferences.
That's one way to put an image in a
| | 07:02 |
precise location.
Click inside of something and use your
| | 07:05 |
arrow keys to move your cursor right where
it needs to be.
| | 07:08 |
But it's not always the most precise way
to do it.
| | 07:10 |
If you really want to be 100% sure that
your image is going exactly where you want
| | 07:15 |
it to be You go to the code.
So if I click on the code and scroll down
| | 07:20 |
a little bit, I can see that I have this
div tag right here on line 34 that has an
| | 07:24 |
empty line in it and I need an image to go
right there.
| | 07:27 |
So I need an image to go inside this div tag.
| | 07:30 |
Now, if I was in Design view, here's this
div tag, right here.
| | 07:34 |
Trying to place my cursor inside this and
in front of that paragraph, that's really
| | 07:39 |
difficult to do visually, but if I go into
code view, it's pretty simple.
| | 07:43 |
It's just this sort of empty line right here.
| | 07:44 |
And once you do that, you can use any
technique that you want.
| | 07:48 |
You can drag and drop.
As a matter of fact, the image that we're
| | 07:51 |
looking for here is feature 1, so I can
grab feature 1.jpeg, I can go ahead and
| | 07:55 |
drag and drop that right into the code.
And Dreamweaver resolves that for me,
| | 07:59 |
which is awesome.
I'm going to Undo that, I could also go up
| | 08:03 |
to Insert Image from either one of these menus.
| | 08:05 |
Browse and find feature 1 and do it that way.
| | 08:10 |
It doesn't really matter which technique
you use, you're always going to get pretty
| | 08:13 |
much the same results.
Now, with this text selected, I can still
| | 08:17 |
go into my Properties Inspector and type
in my Alt text, if you're more comfortable
| | 08:20 |
doing it there, or I can place my cursor
directly in the alt attribute, and type
| | 08:25 |
that in here.
So I could just say Thataway image.
| | 08:29 |
Which describes, I guess, the, the
painting itself.
| | 08:32 |
So I'm going to save that, and go back
into Design view.
| | 08:35 |
And there is my image.
I know we went over a lot of those
| | 08:39 |
techniques.
And some of them sort of mix themselves
| | 08:42 |
together.
Like, you know, dragging and dropping in
| | 08:44 |
code.
And dragging and dropping in Design View.
| | 08:47 |
And chances are, you're not going to
utilize every single one of these
| | 08:50 |
techniques, but it really is worth
understanding how they all work.
| | 08:54 |
And paying attention to the strengths of
each one of them so that you can use the
| | 08:58 |
technique that best fits your current situation.
| | 09:01 |
Having a choice is a good thing.
And thankfully, Dreamweaver provides
| | 09:04 |
plenty of those when you want to get
images on the page.
| | 09:08 |
| | Collapse this transcript |
| Controlling image properties| 00:00 |
One of the constant challenges in working
with sites built around clean HTML and CSS
| | 00:05 |
is precisely, what to control with CSS and
what to control through your HTML.
| | 00:12 |
Working with images is a particularly grey
area, since there are many properties that
| | 00:16 |
you can control.
Either through CSS or directly through the
| | 00:20 |
image itself.
In this exercise we're going to discuss
| | 00:23 |
the image properties that you can change
using Dreamweaver's property inspector and
| | 00:28 |
the benefits of controlling those
properties through the image tag or.
| | 00:31 |
Through cascading style sheets.
So I have the index file open from the 0,
| | 00:35 |
8, 0, 3 folder.
And I scroll down on the page.
| | 00:38 |
And I just want to click on this image of
Victor Stuesse again.
| | 00:42 |
So that we can take a look at the
properties for that.
| | 00:44 |
So I'm looking in my properties inspector.
And I just, I'm just going to go through
| | 00:47 |
these properties, and show you kind of
what you can do here.
| | 00:50 |
Through the properties inspector and some
of the things that you might want to
| | 00:53 |
consider doing through cascading style sheets.
| | 00:55 |
One of the first things I can do is give
the image an ID.
| | 00:58 |
The only reason I would ever really need
to do that is if I was trying to control
| | 01:02 |
this image through a style and I wanted to
use something as specific as an ID, or and
| | 01:07 |
this is more likely, I was controlling it
through some type of Javascript widget.
| | 01:11 |
Say I was using some jquery to find this image.
| | 01:14 |
And then reposition it or resize it based
on user interaction or making it part of a
| | 01:18 |
image gallery.
Then I would probably need to use an ID,
| | 01:20 |
but for the most part, you probably will
not need to do that.
| | 01:23 |
We also have a source and a link, and this
is something that's kind of neat about
| | 01:27 |
this.
I want to show you something.
| | 01:28 |
If I go to my images folder and open this
up, and this is going to look really weird
| | 01:32 |
at the beginning so give me a second here,
if I grab this little point to file icon,
| | 01:36 |
let's say somebody comes in and says,
wait, that's not the image of Victor we
| | 01:39 |
wanted to use.
We actually wanted to use one of his
| | 01:42 |
paintings.
So you can grab this point to file point
| | 01:45 |
to another image in the Files panel, and
it will bring it in.
| | 01:48 |
How cool is that, that's really neat, right?
| | 01:51 |
Well, that actually was the images I want
to use, so lemme go back to Award, there
| | 01:54 |
we go.
Now, everything else updates for you when
| | 01:57 |
you do that, which is nice.
You can also make this image a clickable
| | 02:00 |
link by either typing in, using the point
to file icon to point to the page you want
| | 02:05 |
it to link to or you can browse if you like.
| | 02:07 |
So any time you want an image, so for
example, you want the company's logo to
| | 02:12 |
navigate back to the index page or
something like that.
| | 02:14 |
You can just type that in use the point to
file or you can just browse.
| | 02:19 |
Now your far more likely instead of an ID,
to apply classes to images.
| | 02:23 |
Some images you, you might want to border
around them or you might want to float
| | 02:28 |
text around them is matter of fact we were
going to be doing that to this very image
| | 02:31 |
in, in little while and one of the easiest
way to do that if you don't wanted to
| | 02:35 |
happen to every single image in your site
is to simply create a class for it.
| | 02:40 |
And you style that, and then the image
gets the styling.
| | 02:42 |
So a lot of times you'll apply class
because of that.
| | 02:46 |
Now I also wanted to show you the width
and the height over here.
| | 02:48 |
You'll notice that they're locked.
That means that if you change one, the
| | 02:51 |
other one is going to change and that's
essentially the constraints this.
| | 02:55 |
Oddly enough, I have handles on this image
and I always wonder why they haven't taken
| | 02:59 |
them away yet but this does, it allows me
to actually change this image In a bad
| | 03:05 |
way.
(LAUGH) So those handles allow you to
| | 03:08 |
re-size this image, and they allow you to
re-size it in a way that is not
| | 03:12 |
constrained in any way, shape or form, and
it really is going to damage the quality
| | 03:16 |
of the image.
You can also come in and change them as I
| | 03:20 |
mentioned before, directly here.
So if I knew I wanted that 400 pixels wide
| | 03:23 |
for example, I could do it that way too.
Now, there's a bit of an issue here.
| | 03:28 |
You can either reset to the original size
or you can commit.
| | 03:31 |
Now I should tell you, if you commit to
that image size.
| | 03:34 |
It's actually going to go out and
physically change that image, so it's
| | 03:38 |
going to go out and reoptimize that image
and change it and in most cases it's going
| | 03:42 |
to damage the image quality.
I like that this feature's here, you know
| | 03:45 |
there are times when you just want to make
something a little smaller or maybe even a
| | 03:49 |
little bigger.
But I'm not sure this is the right place
| | 03:51 |
to do it.
If you want your image to be a certain
| | 03:53 |
size my advice to you is to go ahead and
make it that size, so I'm going to just go
| | 03:57 |
ahead and reset that..
Back to the original size.
| | 04:00 |
No harm, no foul.
We also have our alt text, which we talked
| | 04:03 |
about earlier.
If I wanted to, I could modify this any
| | 04:05 |
time I want.
So if I want to add professor to the front
| | 04:08 |
of that, I could certainly do that.
Oddly enough, this dialog box, if you hit
| | 04:12 |
Enter or Return, you go down to the next line.
| | 04:13 |
Which is weird, because if you look at the
split-screen view and you look at the code
| | 04:17 |
of this.
You can see there's no multi-line thing
| | 04:21 |
here.
So that confounds me a little bit.
| | 04:23 |
I'm not really sure why they'll let you do
that, but then they do.
| | 04:25 |
So just a couple more things here that I
want to cover.
| | 04:28 |
Sometimes you might want to create an
image map.
| | 04:30 |
There aren't too many image maps going
around these days.
| | 04:33 |
But they are still supported by all browsers.
| | 04:36 |
If you're wondering, what's an image map?
Well, for those of us that have been
| | 04:39 |
around for a long time doing web design,
we used to have to do image maps to make
| | 04:44 |
clickable areas.
Let's say you have a map, for example,
| | 04:46 |
that's an image, and you want people to be
able to click on various portions of the
| | 04:51 |
map, and then navigate to the page.
That represents that section of say a park
| | 04:55 |
or a zoo or something.
That was a very common use case.
| | 04:57 |
Well you can make an image map.
And essentially shape areas, they allow
| | 05:00 |
you to draw on the image and it creates a
clickable hot spot that that hot spot
| | 05:05 |
links.
So I can his head to one page, I can link
| | 05:08 |
this little sculpture that he's working on
to another page, that sort of thing.
| | 05:11 |
Again not a lot of people are doing those
anymore, but it's nice to know that those
| | 05:15 |
tools are still inside Dreamweaver and I
really hope they don't pull them out
| | 05:18 |
because.
There are times when you do need to create
| | 05:20 |
one.
All right, now I've saved the best for
| | 05:22 |
last.
I've got these little guys right here,
| | 05:24 |
these little image icons.
And these are editing icons, so if you
| | 05:27 |
want to edit your image in some way You
have a couple of choices.
| | 05:31 |
Now, I'm actually going to start from the
right, and work my way over.
| | 05:34 |
the first one that we have here is
Sharpen, and then we have Brightness and
| | 05:37 |
Contrast.
I'm actually going to do one of these so
| | 05:38 |
you can see what happens.
I'm going to click on sharpen.
| | 05:40 |
Dreamweaver's going to give me a nice
little warning that says okay, look, your
| | 05:44 |
about to permanently alter this image.
Are you sure you want to do this?
| | 05:48 |
Yes.
No, I want to do it.
| | 05:50 |
Absolutely, and I get a very rudimentary
dialog box.
| | 05:53 |
And it goes all the way from one to ten.
Now ten might be a little much, although
| | 05:59 |
it's pretty cool, right?
I'm just going to stick to one and of
| | 06:02 |
course, I can preview and toggle this off
and on to kind of see what type of
| | 06:05 |
sharpening I'm going to get.
I like that so I'm going to click OK.
| | 06:08 |
Now what Dreamweaver is doing in the
background is it's going out to this
| | 06:12 |
image.
It's performing that sharpening operation,
| | 06:14 |
and then it is optimizing the JPEG again,
and saving it.
| | 06:18 |
So obviously, the more I do this, the more
image degradation I'm going to have.
| | 06:22 |
Again, it's nice to know that I have these
little, these, these options here.
| | 06:26 |
I also have cropping.
You can crop your image.
| | 06:29 |
And again, if you crop it, it's going to
physically change it.
| | 06:33 |
You know, maybe I just thought it needs to
be a little bit more narrow.
| | 06:36 |
And as soon as I hit Return it's going to
physically change that.
| | 06:41 |
Now, at any time if you make one of those
choices and you realize, oh, I've screwed
| | 06:44 |
up.
That was the only copy of that image I had
| | 06:46 |
and I don't need to crop that one down.
You can just do a Cmd + Z and it will
| | 06:50 |
undue it; however, I want to warn you, I'm
going to do a Save All.
| | 06:53 |
If you close this file out, that's it, the
change is permanent, so its one of the
| | 06:57 |
things you really want to think about.
We also have edit the image settings,
| | 07:00 |
which allows you to reoptimize this image.
So, if somebody saved this too large a
| | 07:05 |
file size, it's what, like 12K now.
If that was too big, you could optimize it
| | 07:09 |
again.
But really, honestly, I'm still a firm
| | 07:12 |
believer in the fact that if you really
want to edit an image, you need to go to a
| | 07:16 |
program that's designed to edit images, right.
| | 07:18 |
And that's what this link does for you.
So if you click on that, it's going to
| | 07:21 |
open up this image in photoshop.
I could sharpen it.
| | 07:24 |
I could change the contrast.
I could crop it down.
| | 07:26 |
And I can just save a copy of it so that
I'm not overwriting the same one over and
| | 07:30 |
over again.
And that might actually be the best choice
| | 07:32 |
here.
And honestly most of the time, a best
| | 07:34 |
practice would be to keep a high res
version of the image, like a Photoshop
| | 07:38 |
file.
Make those changes to that, and then
| | 07:40 |
re-export it every single time.
You really don't want to keep working with
| | 07:43 |
a JPEG over and over and over again,
because over time.
| | 07:46 |
The image quality is going to degrade.
So there are a few properties, not a lot
| | 07:50 |
actually, but there are a few properties
that you can change once an image has been
| | 07:53 |
placed on your page.
Again, I think the biggest thing that you
| | 07:56 |
need to think about here is being very
careful about resizing or editing the
| | 08:01 |
image directly from the properties inspector.
| | 08:03 |
As I mentioned that image quality might
degrade, so my advice is to just test,
| | 08:08 |
test thoroughly before committing any of
those changes and making sure the image
| | 08:11 |
looks the way you want it to look.
Also, you're probably going to want to
| | 08:15 |
control most of the presentational
properties with images with cascading
| | 08:18 |
style sheets which we're going to cover a
little later on in this chapter.
| | 08:22 |
| | Collapse this transcript |
| Integration with Photoshop| 00:00 |
One of the benefits of working in a suite
of software, such as, Adobe's Creative
| | 00:04 |
Cloud is the powerful integration that you
get between programs within that suite.
| | 00:10 |
Dreamweaver features a very streamlined
integration with Photoshop, which can make
| | 00:14 |
working with images in your site a lot easier.
| | 00:16 |
The most powerful integration between the
two programs is Dreamweaver's support of
| | 00:21 |
Photoshop's Smart Objects.
Smart Objects allow you to insert
| | 00:25 |
Photoshop files directly onto your pages
in Dreamweaver.
| | 00:29 |
And then, makes editing and updating those
images between the two programs a snap.
| | 00:33 |
So I have spotlight.htm open from the
08_04 folder.
| | 00:38 |
Just like we did before, we're going to
place that image of the student on the
| | 00:41 |
page.
Before we talked about how difficult it is
| | 00:44 |
to make sure your cursor is in the right
spot, and there are a couple of other
| | 00:47 |
things you can do too.
I'm going to go up to View > Style
| | 00:50 |
Rendering and turn Display Styles off.
So that's going to make it a little bit
| | 00:53 |
easier to select some things.
once again, I'm going to click inside this
| | 00:56 |
div tag, use the tag selector to highlight
it that way the whole thing is selected,
| | 01:00 |
then hit my Left Arrow key.
And so that's exactly what we did before.
| | 01:04 |
Another way, of course, if you go into
Code view, you can just place your cursor
| | 01:08 |
right here between the article that has
the ideal spotlight and a div with a class
| | 01:13 |
of student.
It doesn't matter, either way, as long as
| | 01:15 |
your cursor is there and that's where your
focus is, it does not matter.
| | 01:19 |
We're about to insert a Photoshop file
directly onto the page.
| | 01:22 |
Now you could go over to the files panel
and drag and drop.
| | 01:25 |
That would work.
But, of course, this is such a tight fit,
| | 01:28 |
the dragging and dropping is probably not
the right technique here.
| | 01:31 |
So I'm going to go up to my menu.
I'm going to go to Insert > Image > Image,
| | 01:36 |
and I want to make sure I'm going to the
08_04 folder.
| | 01:41 |
And this time, instead of going in the
Images directory, I'm going to go to the
| | 01:44 |
Assets directory.
Inside of that, I have the chow.psd.
| | 01:47 |
So this is the Photoshop file that's
going to be the source file for the
| | 01:52 |
graphic that's on the page.
And this is a pretty common thing for me
| | 01:55 |
to do.
If I'm going to be working with an image a
| | 01:57 |
lot and I know I need to refine that image.
| | 01:58 |
Instead of just saving it as PNG file or a
GIF file or a JPEG, I will, in fact, save
| | 02:05 |
it as a Photoshop file.
That way, I can modify it all day long, it
| | 02:08 |
doesn't hurt the image quality, and then I
can re-export it out every single time I
| | 02:11 |
need the new web graphic. Alright.
| | 02:13 |
So I'm going to click Open...
And when I do that, Dreamweaver's going to
| | 02:17 |
say, okay, hang on a second.
You're trying to put a Photoshop file on
| | 02:21 |
the page, and notice the browsers don't
support Photoshop.
| | 02:24 |
The first thing it's going to do is
optimize it out for you in terms of what
| | 02:28 |
type of web graphic you want it to be.
Notice you can do PNG files, you can do
| | 02:33 |
JPEG's, you can do GIF's.
It doesn't really matter.
| | 02:36 |
I'm going to do a JPEG.
It even lets you play around with the
| | 02:38 |
image quality settings.
So, if I go down to 60, for example, it
| | 02:41 |
really actually does hurt the image
quality a good bit.
| | 02:44 |
So, I think I'm going to keep this up at
about 80 or so.
| | 02:46 |
That looks pretty good.
I'm going to go ahead and click OK.
| | 02:48 |
And then the next thing it does, is it's
going to prompt me, and it's going to say,
| | 02:52 |
hey, wait a second, where do you want to
place this?
| | 02:54 |
I'm going to go ahead and place this in
the images directory.
| | 02:56 |
So I'm going to select the images
directory, in 08_04.
| | 03:00 |
Click Save.
And if I scroll down, I can see right
| | 03:04 |
there.
There's the JPEG that was just created.
| | 03:06 |
So I'm going to save that again.
And it goes ahead and places the image on
| | 03:10 |
the page, and saves it.
So what have I done all at one time here?
| | 03:13 |
What I've done is I've gone out to Photoshop.
| | 03:15 |
I said, I want to take this image, export
it as a JPEG.
| | 03:18 |
Export it as a JPEG, and place it on the page.
| | 03:20 |
Now, that, alone, would be neat.
Because, you know, it would save me a lot
| | 03:23 |
of time.
I wouldn't have to open up Photoshop.
| | 03:25 |
Export graphics as web graphics, and come
back into Dreamweaver.
| | 03:28 |
That, alone, is going to save me a little
bit of time.
| | 03:30 |
However, there is even more to this.
Notice, for example, that I have this
| | 03:34 |
little symbol in the upper corner.
And that symbols indicates that this work
| | 03:38 |
flow has created what we call a smart object.
| | 03:41 |
So now there is an actual relationship
between the JPEG that's been created and
| | 03:45 |
the source Photoshop file.
Now, before we get in to doing that, I'm
| | 03:49 |
going to apply a class to this.
I'm going to grab the pull down menu here
| | 03:51 |
in the Properties Inspector and I want to
apply the class of student to this.
| | 03:55 |
There we go.
Now, what's that going to do to it?
| | 03:58 |
Well, if I do a Save All and put this in
Live view, you can see it places the image
| | 04:02 |
in the right spot.
So even though the image is in front of
| | 04:05 |
this, it appears to the right of it.
Crazy, huh?
| | 04:08 |
That's CSS for you.
So I'm going to turn live view off, and I
| | 04:11 |
want to show you guys what this round
tripping feature can do for you.
| | 04:15 |
So with the image selected, I'm going to
go down here, and I notice from the
| | 04:18 |
Properties Inspector already, there's a
path pointing to the Photoshop file.
| | 04:21 |
So now, if I click Edit, it's going to go
right back and open that image up in
| | 04:26 |
Photoshop.
But what image does it open up?
| | 04:28 |
Notice that it opens up the Photoshop file.
| | 04:30 |
It doesn't open up the JPEG, it opens up
the Photoshop file.
| | 04:33 |
So I could increase the contrast, I could
do all sorts of cool things.
| | 04:37 |
I'm going to go over here to the Layers
panel and I'm going to turn on the
| | 04:39 |
visibility of the Type layer.
Chow, I kind of like that.
| | 04:43 |
So here, I'm going to save the Photoshop file.
| | 04:46 |
Now notice that I'm not exporting it out.
I'm not saving it as a JPG I'm doing
| | 04:49 |
anything in itself.
I'm just saving the Photoshop file and
| | 04:51 |
closing it.
When I go back into Dreamweaver,
| | 04:54 |
Dreamweaver changes that icon.
It says wait a second, the original asset
| | 04:57 |
has been modified.
What do you want me to do?
| | 04:59 |
If I right-click this, I can say update
from original.
| | 05:03 |
It's going to go out grab the new version
of that and if I turn Live view on, you
| | 05:07 |
can see that it brings that in.
So that's a really powerful feature.
| | 05:10 |
This allows me to go back and forth, back
and forth, between Dreamweaver and
| | 05:13 |
Photoshop.
And it's going to save me a tremendous
| | 05:16 |
amount of time.
Now, that worked because we placed the
| | 05:19 |
Photoshop file directly on the page.
But what if you have a Photoshop file but
| | 05:25 |
you didn't do the same process?
You just placed the image itself on the
| | 05:28 |
page.
Well, if I scroll down (BLANK_AUDIO) I can
| | 05:32 |
select this image right here.
This is feature1.jpg.
| | 05:34 |
Well, if I go in the assets directory, I
can see that there's also a feature1.psd.
| | 05:41 |
So, you can get this workflow to work any
time you want it to.
| | 05:44 |
If I select this image, I've got right
down here in my Properties Inspector, this
| | 05:48 |
original.
And I have a little point to file icon, so
| | 05:50 |
I can point this to the feature image, and
say that is the parent Photoshop file.
| | 05:56 |
As soon as I do that, notice that it goes
ahead and says, oh, okay, you want to do
| | 06:00 |
the same workflow that we did before.
I'm going to go ahead and optimize the
| | 06:04 |
image.
It's going to prompt me to save it, which
| | 06:06 |
is weird, but you really gotta think about it.
| | 06:08 |
It's going through this all over again.
In this case, when I choose the Images
| | 06:12 |
directory and choose Save, it's going to
ask me if I want to replace the old one.
| | 06:15 |
I'm going to say yes, I do want to replace
the old one.
| | 06:17 |
And now it's synced with the Photoshop file.
| | 06:20 |
And the same way I did before, I can come
down and click Edit, I can do all sorts of
| | 06:24 |
crazy stuff like this Vibrance adjustment.
I could come in and make it even more
| | 06:29 |
vibrant, and even more saturated.
Well, that doesn't look so great, but you
| | 06:34 |
get the idea.
So I can do that.
| | 06:36 |
Save the file, close it.
And once again, when I go back into
| | 06:41 |
Dreamweaver, Dreamweaver's going to prompt
me to update it, which I will.
| | 06:46 |
Now the other thing about this is if you
happen to be outside of Dreamweaver.
| | 06:49 |
Let's say Dreamweaver is closed.
You go into Photoshop, you make a few
| | 06:52 |
changes to the images, you save them, and
then you close out of Photoshop.
| | 06:55 |
The very next time you open Dreamweaver,
Dreamweaver’s going to give you that
| | 06:58 |
broken link icon and says wait a minute,
the original one’s been modified.
| | 07:02 |
You want the latest version of it and you
can go ahead and update that.
| | 07:04 |
So it’s a really cool way of working, you
know, from a time-saving standpoint, this
| | 07:08 |
smart object integration really, it’s compelling.
| | 07:11 |
It’ll save you a ton of time.
But one size does not fit all.
| | 07:15 |
And you need to really think about this
workflow before you adopt it into your own
| | 07:20 |
site.1 It might work for one image or two
images, but maybe not every image.
| | 07:23 |
It's really up to you.
The way to look at it is that its simply
| | 07:26 |
one of the many options that you have
available when you create and edit images
| | 07:31 |
for your sites.
| | 07:32 |
| | Collapse this transcript |
| Styling images| 00:00 |
Usually placing the image on the page is
just the beginning of making sure that
| | 00:05 |
it's going to fit within the design of
your site.
| | 00:08 |
Well, there are certain properties you can
set mainly on an image, for the most part,
| | 00:12 |
you're going to want to customize the look
and the feel of your images through
| | 00:15 |
cascading style sheets.
Using Styles, allows you to create
| | 00:18 |
different looks and behaviors based on
where the image is going to be found, the
| | 00:22 |
context on which it's going to be used, or
even what type of image it is.
| | 00:26 |
The other rather obvious advantage to
using Styles for images is the ease in
| | 00:31 |
updating them.
Rather than having to find dozens or even
| | 00:33 |
hundreds of images and then modifying all
of their properties individually, you can
| | 00:37 |
just update their specific style and have
the change occur sitewide.
| | 00:41 |
So I have the index file open.
This time, from the 08_5 directory and, as
| | 00:47 |
you can see, I'll scroll down and we're
back with our old friend here Victory
| | 00:50 |
Stuesse.
I've selected the image and I'm looking at
| | 00:53 |
the CSS Designer panel because we're
going to be working with Styles.
| | 00:56 |
I want to show you a little trick.
It's true that if you turn Live view on,
| | 01:00 |
you can't select elements on the page and
interact with them.
| | 01:03 |
You can't do that.
But what you can do, however, is if you
| | 01:06 |
know the selector that you're going to be
working with, you can modify that selector
| | 01:10 |
and Design view will update it for you in
real time, which is pretty neat.
| | 01:13 |
Now, oh, I forgot to point something out
to you.
| | 01:16 |
This image, Victor Stuesse.
You 'll notice that, this time, a class
| | 01:20 |
has been applied to it.
And this class is Article Image.
| | 01:23 |
So, articleImg.
That's the class that's applied to this
| | 01:26 |
and that's the selector that we're
going to need to update.
| | 01:28 |
So, I'm going to turn Live view back on.
Unfortunately, it always kicks you back up
| | 01:31 |
to the top of the page but doesn't take
too long to scroll down.
| | 01:33 |
Alright.
So I'm just going to look for my CSS
| | 01:37 |
Designer.
I'm going to look for all sources and then
| | 01:39 |
I'm just going to search for that
particular selector image.
| | 01:42 |
There it is, img.articleImage.
So what I had that one selected, if I show
| | 01:48 |
set, there are no properties going on.
So we're just going to apply some.
| | 01:51 |
so the first thing I want to do is I
want to go into my backgrounds.
| | 01:53 |
And I'm going to give it a background
color of #ccc, which is sort of a gray
| | 02:00 |
color.
Now, when you do that, every now and then
| | 02:04 |
you're going to have to scroll back
through, because Dreamweaver kind of goes
| | 02:07 |
nutty on you there.
So you may want to apply a few of these
| | 02:09 |
properties before you scroll back down
again, but occasionally, Dreamweaver will
| | 02:13 |
just scroll all over the place at random
when you update things.
| | 02:16 |
So just take it in stride.
Alright, I'm going to go up to Layout
| | 02:19 |
properties and I'm going to apply some padding.
| | 02:21 |
I'm going to do padding all the way
around, so I'm going to click that middle
| | 02:24 |
one there.
And I'm just going to do 10 pixels worth
| | 02:27 |
of padding.
(SOUND) Alright.
| | 02:30 |
And you can see now the background color
is showing through.
| | 02:32 |
And you can kind of see the padding.
It's almost creating like a border around
| | 02:35 |
it which it looks kind of neat.
Now I do want to float this as well.
| | 02:38 |
So I'm going to go over here to my properties.
| | 02:40 |
And I'm going to float this to the left.
(SOUND) By clicking that it's going to
| | 02:43 |
wrap the text around it.
That's very handy.
| | 02:45 |
I need to keep the text away from it.
So to do that I'm going to use margin.
| | 02:49 |
So I'm going to go up to my margins.
I don't want to do the same for all.
| | 02:52 |
I do want to do individual margins, and
for this one for the right margin, I'm
| | 02:56 |
going to type in 1emm.
Emms are a unit of measurement that are
| | 03:00 |
relative.
So it's essentially the same size that my
| | 03:02 |
text is, I want that amount of space there.
| | 03:04 |
That works great.
I mentioned borders, I wouldn't mind
| | 03:07 |
putting a border on it as well.
So I'm going to click on the border
| | 03:10 |
properties, go down there.
I want to do a border to the right and a
| | 03:13 |
border to the bottom.
So, border right here.
| | 03:17 |
Now, here's something that's kind of
interesting too.
| | 03:19 |
In addition to doing just normal border
shorthand notation, you can also do border
| | 03:25 |
right, and border bottom, or border left
shorthand notation, but these properties
| | 03:29 |
don't allow you to do that.
So I'm going to click the plus, which will
| | 03:32 |
jump me down to the bottom, and I'm just
going to hand code this.
| | 03:34 |
I'm going to do border-right.
And you can see, it knows about it.
| | 03:39 |
It just doesn't have enough in the
property pane.
| | 03:41 |
And I'm going to do 1 pixel solid, there
are spaces between these, by the way #999
| | 03:46 |
and hit Return.
And then, I'm going to go plus again here,
| | 03:51 |
and I'm going to type in border-bottom and
I want to do the same thing, 1 pixel,
| | 03:58 |
solid (SOUND) and then #999.
You can see, it kind of gives it a little
| | 04:04 |
bit of a bevel or drop shadow, if you
will, kind of embosses it a little bit.
| | 04:07 |
That looks kind of neat.
Now, those are just a few properties
| | 04:11 |
thrown on to an image, just to give you
some idea of what you can do with images
| | 04:15 |
in CSS.
Part of the fun of using styles, to be
| | 04:18 |
honest with you, is just the creative
exploration that it can lead to.
| | 04:21 |
Feel free, I encourage you.
Experiment with your images.
| | 04:24 |
Combine borders, background colors,
paddings, margins, all sorts of things,
| | 04:29 |
and create really, creative effects for
your images.
| | 04:31 |
You know, the important thing to remember
is that you can use CSS to control the
| | 04:35 |
visual presentation of images as well,
making sure that they conform to the
| | 04:39 |
overall design strategy of your site.
| | 04:41 |
| | Collapse this transcript |
| Using background images| 00:00 |
An alternate way for you to display images
on your pages is through the use of CSS
| | 00:05 |
Background Images.
Every element on your page has the ability
| | 00:08 |
to display a background color or image, or
both if you prefer.
| | 00:12 |
Now, this allows you to display images on
the page without using an image tag and
| | 00:17 |
creates the opportunity.
For presentation only images, this allows
| | 00:22 |
you to use images for your design without
cluttering up your HTML with unnecessary
| | 00:25 |
image tags.
In this example, we're going to play a
| | 00:29 |
background image to both the page header
region and use a background image to
| | 00:33 |
replace a textural headline with the
actual logo of the school.
| | 00:38 |
So I've, had the index page open from zero
eight underscore zero six.
| | 00:41 |
As you can tell, this does not look even
as good as some of the previous files.
| | 00:44 |
If I preview this one in my browser, you
can see we're missing a few things.
| | 00:47 |
We're missing the big banner, and we're
missing the school logo.
| | 00:50 |
So those are problems.
Well, I'm going to go back into
| | 00:52 |
Dreamweaver, and, I want to turn style
rendering off for just a moment here.
| | 00:56 |
I'm going to go up to View > Style Rendering.
| | 00:59 |
Turn that off, because there's something I
want to point out here.
| | 01:02 |
At the very top of the page is a headline:
Roux Academy of Art and Design.
| | 01:06 |
And it shows up at the top of the page for
a very good reason.
| | 01:09 |
I want search engines to find that first,
it's a heading one.
| | 01:11 |
I want accessibility devices, screen
readers and things like that to be able to
| | 01:15 |
see that at the very top so they know what
the page is about.
| | 01:18 |
They know what the subject of the page is.
I mean, it's sort of a branding issue, if
| | 01:22 |
you will.
So it just makes this machine readable.
| | 01:25 |
However, I don't want to display that headline.
| | 01:27 |
I would rather have the logo of the school
show up.
| | 01:30 |
And this is one of the really neat things
about background graphics that allows me
| | 01:33 |
to do that.
So I'm going to go in and turn my style
| | 01:36 |
rendering back on again.
And you can actually see that headline
| | 01:41 |
goes away.
Just to give you some idea why that's
| | 01:43 |
happening, if I bring up the code
navigator and I go to page header H1,
| | 01:48 |
notice that it has a text indent of
negative 9000Ms.
| | 01:53 |
That means, that the text that's inside of
it is being sent somewhere over in the
| | 01:57 |
next room, nobody's actually going to see that.
| | 02:00 |
Okay, now I'm going to open up my CSS
designer panel.
| | 02:03 |
And you guys know how I like to work with it.
| | 02:05 |
I'm going to expand it out until I get two
panes, there we go.
| | 02:07 |
And there are two elements that I want to
apply this background image to.
| | 02:11 |
One is the logo that we were just talking about.
| | 02:14 |
The other one is the overall page header
where I want the really large graphic,
| | 02:17 |
that branding graphic to show up.
So what I'm looking for is this home
| | 02:20 |
header Selector, so that's great, I found
it right off the bat.
| | 02:24 |
Now if you're having a hard time finding
it, remember you can go to Main CSS right
| | 02:28 |
up here, and you can just filter out, you
can use the word home to filter out and
| | 02:32 |
find Home Header, perfect.
Alright, for Home Header, I want to click
| | 02:36 |
on the background category over here in my
Properties, and then I'm just going to
| | 02:39 |
enter a URL for this.
I'm going to browse out.
| | 02:42 |
I'm going to browse out to the 08
underscore 06 images directory.
| | 02:46 |
And the one I'm looking for is the main
underscore back.
| | 02:50 |
So if I scroll down, right there's the one
I'm looking for main_back.
| | 02:57 |
Now, when I open this one up there is
additional property that I want to put on
| | 03:00 |
this.
When you place a background image into an
| | 03:03 |
element, the default for that background
image is for it to tile.
| | 03:06 |
I's just going to repeat over and over and
over again until it fills up the whole
| | 03:10 |
thing.
This is one of the reasons why Myspace
| | 03:12 |
pages.
Had kittens that filled up the entire
| | 03:15 |
page.
Someone would just tell the html element
| | 03:17 |
to have a kitten as the background and it
would just do it.
| | 03:20 |
Alright, so we want to prevent that from
happening, so what we want to do is right
| | 03:24 |
down here where it says background repeat.
If I hover over this you'll see the
| | 03:27 |
options, repeat, repeat along the x axis,
the y axis, or no repeat and that is
| | 03:33 |
exactly what we want to do.
We want to choose no repeat from that,
| | 03:36 |
alright?
If I do a save all and go back to my
| | 03:39 |
browser and refresh the page.
Now that image shows up and again the
| | 03:44 |
beautiful thing about this is I'm not
using an image tag to do that.
| | 03:47 |
That image is entirely presentational.
Google doesn't need to know this image is
| | 03:51 |
here.
A screen readers don't need to read that
| | 03:52 |
image it's just presentational for
branding purposes only.
| | 03:56 |
Okay, let's keep moving and I'm going to
filter out my selectors by looking for
| | 04:00 |
Page and I'm going to find this page
header H1, page header H1, okay?
| | 04:05 |
So I'm selecting that one, and again, if I
show just the set properties, you can see
| | 04:09 |
it has the defined width and height.
That defined width and height is exactly
| | 04:13 |
the same size as the image that I want to
display, and that's something that's very
| | 04:17 |
important that I haven't really talked
about yet.
| | 04:19 |
Same thing's going on with that page header.
| | 04:21 |
It's very tall and it's of course very wide.
| | 04:24 |
And it's the same size that the image
needs to be.
| | 04:26 |
So a lot of times, if you want the entire
image to show up, and you don't want to
| | 04:31 |
tile the image, and you don't want to crop
the image in any way, you make the element
| | 04:35 |
exactly the same size as the image.
I'm also using absolute positioning, and
| | 04:39 |
positioning it in the top left corner of
its parent, which is the header.
| | 04:43 |
That's not really so much about the image
itself, as the overall layout.
| | 04:47 |
So that's not that big of a deal.
And then the text indent here, remember
| | 04:50 |
what that's doing is taking the text
that's inside of it and it's hiding it.
| | 04:53 |
Now I could have also told it to display
none, but that would have been a problem
| | 04:56 |
because it would have turned the whole
thing off, and that's not what I'm
| | 04:59 |
wanting.
So by doing a text indent, it gets the
| | 05:02 |
text out of the way, but it still lets
everything else show up.
| | 05:05 |
Alright, I'm going to turn off the Show Set.
| | 05:07 |
I'm going to go down to my background and
once again I'm going to browse here.
| | 05:11 |
Same folder, and this time what I'm
looking for is the RA logo, so I'm going
| | 05:15 |
to scroll down, find the RA logo, click
open, and again, I don't want it to
| | 05:22 |
repeat, I only want it to show up one time.
| | 05:23 |
When I place that in there, you might say
to yourself "well, this looks a little
| | 05:27 |
different.
Let me do a save all, this looks a little
| | 05:29 |
different.
I remember in previous versions, we
| | 05:31 |
couldn't see through the logo.
And as a matter of fact, if I go to the
| | 05:33 |
browser.
Just to, to guarantee that Dreamweaver is
| | 05:36 |
not pulling my leg.
Indeed, it just sits up there.
| | 05:39 |
Now, you might look at that, and go,
perfect, I love that.
| | 05:41 |
It looks great.
But what I want to show you is that you
| | 05:43 |
can have both a background image and a
background color in an element.
| | 05:46 |
And sometimes you can combine them for
really nice effects.
| | 05:49 |
So if I go back into my CSS Designer here,
I can go ahead and set this background
| | 05:53 |
color.
Let's just say, I use black and hit
| | 05:56 |
Return.
If I do a Save All, go out to my browser,
| | 06:00 |
refresh the page, now the element is
filling with black the image is sitting on
| | 06:04 |
top of it.
So that's another thing that you have to
| | 06:06 |
remember.
The way that these elements are painted,
| | 06:09 |
the background color comes first and then
the image sits on top of it.
| | 06:12 |
And sometimes you can combine those with
some pretty neat effects.
| | 06:15 |
There's also recent support for multiple
background images as well.
| | 06:20 |
So you could apply multiple gradients in
background colors and images.
| | 06:23 |
And you can really do some cool stuff with it.
| | 06:25 |
We just made two small changes to the CSS,
but we made a very dramatic impact on the
| | 06:29 |
page, all without modifying the original
HTML, which is important as well.
| | 06:33 |
These background images can add a lot to
your site's visual design without adding
| | 06:38 |
additional weight to the actual HTML code itself.
| | 06:40 |
That's extremely helpful for media
queries, because when you go down to a
| | 06:43 |
smaller screen, maybe that large branding
image doesn't get sent down to the mobile
| | 06:47 |
phone, because you're not sending it as a
background image.
| | 06:49 |
So these are all things, that you can do
with background images that's very
| | 06:53 |
powerful.
Of course, this leads to a question, which
| | 06:56 |
is when should you use a background image
versus using an actual image tag?
| | 07:01 |
Well everybody's a little different, but
my answer is that for me If the image has
| | 07:05 |
to be encountered by other user agents.
If somebody was using a screen reader, and
| | 07:09 |
I would want them to know that that image
was there.
| | 07:11 |
Maybe it's a chart or something that's
important for them to know about.
| | 07:14 |
If all text needs to be passed on, then
I'm going to use an image tag.
| | 07:18 |
Otherwise, if it's just presentational,
almost every single other image on my page
| | 07:23 |
is displayed using background images using CSS.
| | 07:26 |
Every rule, has exceptions and I try to
define a strategy at the very beginning of
| | 07:32 |
working with a site as to what's going to
be a background image and what's not.
| | 07:35 |
And that's a strategy you're going to have
to come up with on your own.
| | 07:38 |
Now, we're almost done talking about
background images, but I've got one more
| | 07:42 |
thing I want to cover, and in our next exercise.
| | 07:44 |
I'm going to explore using the positioning
attribute of background images to further
| | 07:48 |
enhance our design and make our site a
little bit more efficient.
| | 07:51 |
| | Collapse this transcript |
| Positioning background images| 00:00 |
We saw in our previous exercise how
effective background images can be in
| | 00:04 |
enhancing your visual design.
So, I want to take that a little further
| | 00:08 |
in this exercise and explore how you can
exert a little bit more control over your
| | 00:12 |
background images through positioning
those images within their container
| | 00:15 |
elements.
This allows us to create images that
| | 00:19 |
change based on things like user
interaction or, as we're going to do in
| | 00:22 |
this example, use a single image for
several different elements on the page.
| | 00:28 |
So we're going to be working in the 08_07
directory for this one, and I want to show
| | 00:31 |
you the source image for what we're
working in.
| | 00:34 |
And if you go in the assets directory of
this, and open this up in Photoshop, you
| | 00:37 |
can see this along with me.
This is a file that we're working with.
| | 00:41 |
This is called Social Sprite.psd.
So this is a what's known as a CSS Sprite,
| | 00:45 |
that's what this technique is called, and
you can see this is not just one image,
| | 00:48 |
it's a collection of images.
It's four social media icons.
| | 00:53 |
We have Twitter, Google+, Facebook, and LinkedIn.
| | 00:56 |
And then we have a second version of them
underneath it that's kind of a rollover
| | 00:59 |
version.
So a little darker, the highlights in
| | 01:01 |
double are flipped so that when somebody
rolls over it will be a nice, subtle
| | 01:04 |
change to them.
Now, obviously, we could have done each
| | 01:07 |
one of these as an individual image.
And then, inside the element that is
| | 01:11 |
corresponds to, we could have placed the
image, and then did a hover attribute
| | 01:13 |
calling for the new one.
But that's very inefficient.
| | 01:17 |
And we would be requesting from the server
eight images instead of just one.
| | 01:21 |
So this CSS Sprite technique is really
neat because what it's going to allow us
| | 01:24 |
to do is the parent image itself is only
going to be large enough to show one icon
| | 01:27 |
at a time.
And then we're going to use the Background
| | 01:31 |
Positioning property to move these around
inside of that element, so that the proper
| | 01:35 |
one is shown.
This is a pretty neat technique.
| | 01:38 |
Let's take a look. Alright.
| | 01:40 |
So I'm back in Dreamweaver, I have the
index file opened up, and if I preview
| | 01:43 |
this page in my browser right now, if I
scroll down I can see these elements all
| | 01:46 |
have just the Twitter icon showing up.
The reason for that is the elements
| | 01:52 |
themselves all those social media elements
are designed, their their size right now
| | 01:55 |
only allows one icon to show through at a time.
| | 01:59 |
So they're sort of restricted that way.
And any time you place a background image
| | 02:02 |
in an element, if you don't tell it where
to line up, it lines its top left corner
| | 02:06 |
with the element's top left-hand corner,
which is why each of these is seeing the
| | 02:09 |
Twitter icon, alright?
So we just have to modify a couple of
| | 02:14 |
properties to change that.
I'm going to go into my CSS Designer.
| | 02:17 |
I'm going to click on main.css.
And then, just to make life a little bit
| | 02:20 |
easier for me, I'm going to search for
connect space a.
| | 02:24 |
It's going to filter out all the rest of
my selectors and it's going to leave me
| | 02:27 |
with the four that I really need to work with.
| | 02:29 |
All right.
I'm going to click on .connect a.twitter,
| | 02:32 |
and just to give you an idea of what all
of them have going on.
| | 02:35 |
Well, not a lot.
And the reason for that is they have a
| | 02:38 |
parent selector, let me find that one.
If you look, there's a parent selector
| | 02:42 |
right here, that has .connect li a.
Notice that it will plot all four of them.
| | 02:46 |
It has a width and a height of 45 pixels
and if I go to just show set, you can see
| | 02:50 |
that text is being hidden.
So again, that's the same technique we
| | 02:55 |
used in the headline.
Screen readers will still pick up on the
| | 02:57 |
text, which will say something like, click
here to connect with us on Twitter, that
| | 03:00 |
sort of thing.
And then the background image is
| | 03:04 |
connecting to that social sprite.png file.
So the PNG file has been exported from the
| | 03:08 |
Photoshop file and showing up for every
single one of these guys.
| | 03:12 |
Okay.
Let me go back and filter those out again,
| | 03:14 |
so I'm just looking at these.
So the only thing we need to do for these
| | 03:18 |
is change the background positioning.
That's it, we don't need to change any
| | 03:22 |
other property.
So I'm going to go right here to
| | 03:24 |
background and you can see right here we
have background positioning set up.
| | 03:28 |
The way this is set up, you have two
positions right here.
| | 03:31 |
You have the horizontal and you have vertical.
| | 03:33 |
And there are keywords that, that will
work with this.
| | 03:36 |
So, for example, for Twitter, which is the
one I'm working on right now, I can grab
| | 03:39 |
this pull-down menu, and I can say left
and then top.
| | 03:43 |
Now, to get the keywords, you have to
click where the percentage symbol was.
| | 03:46 |
Left and top.
All right.
| | 03:49 |
So that takes care of that one.
So I'm going to do a Save All.
| | 03:52 |
And now I'm going to click on the Google one.
| | 03:55 |
And this time, I don't want left and top.
Now I need to be specific about where this
| | 03:59 |
is going to show up.
The first value that comes through is
| | 04:02 |
horizontal, so what I'm going to do for
this one is I'm going to type in pixels
| | 04:05 |
and I'm going to do negative 45 pixels.
Negative values are going to move me
| | 04:09 |
essentially to the right, so I'm going to
the very next one.
| | 04:13 |
Remember, they're 45 by 45.
And then for vertical, again, I'm going to
| | 04:16 |
go with pixels and I'm going to choose 0
because I don't want it to move up or
| | 04:20 |
down. Alright.
| | 04:22 |
For connect Facebook, I need to do the
same thing.
| | 04:25 |
And really, it's just math, and I'll be
honest with you, I'm an art major, I'm not
| | 04:28 |
good at math, but this is math I can handle.
| | 04:31 |
I'm going to do negative 90 pixels and
then I'm going to do zero pixels for
| | 04:35 |
vertical because, again, I don't want this
to up or down.
| | 04:40 |
And then for LinkedIn, I could go ahead
and continue to do the math, but since
| | 04:44 |
LinkedIn is going to be the far right one,
I can actually use keywords here too.
| | 04:50 |
I could use right (SOUND) and top.
(SOUND) And that's going to line the top
| | 04:55 |
right-hand corner of the background
graphic with the top right hand corner of
| | 04:58 |
that particular element.
In this case, the LinkedIn element.
| | 05:01 |
So I'll do a Save All.
Refresh my browser, and now I can see each
| | 05:06 |
of the individual icons are showing up. Perfect.
| | 05:09 |
Looks like four separate images, but we
know it's only one.
| | 05:12 |
What we're going to do now is we're
going to go back into Dreamweaver, and
| | 05:15 |
we're going to create Hover events for these.
| | 05:18 |
So I'm going to select each one of these
and re-click to create a new hover just
| | 05:22 |
below it.
And I'm just going to do the same one, a
| | 05:25 |
connect and it has to be a dot.
So dot connect space a dot Twitter and
| | 05:30 |
then colon hover.
And again, Dreamweaver will give you some
| | 05:34 |
code ins to help you do that.
So, it should be dot connect space a dot
| | 05:39 |
Twitter colon Hover.
So this is saying, okay, anytime you find
| | 05:43 |
a link with the class of Twitter inside of
of an element with a class of connect,
| | 05:46 |
when somebody hovers over it, I want you
to do something.
| | 05:50 |
And the only thing that we're going to do
here (SOUND) I'm going to hit Enter to
| | 05:52 |
make sure that it takes it and all I have
to do for properties is I'm going to go up
| | 05:54 |
to my Background properties and again I'm
going to change the background position.
| | 05:59 |
This time, however, for the Twitter when
it hovers over it, instead of left-top, I
| | 06:03 |
want to do left-bottom, because I want to
go down to those bottom sets of icons.
| | 06:09 |
Alright?
Now, what's really interesting is, if you
| | 06:11 |
don't feel like typing these in every
single time, I can right-click one of
| | 06:14 |
these, and I can choose Duplicate.
And when I duplicate this, instead of it
| | 06:20 |
being Twitter, I can just change Twitter
to Google.
| | 06:28 |
(SOUND) And when I do that (SOUND) I have
to remember to go to my Background
| | 06:32 |
properties.
And this time, I can isolate them by Show
| | 06:36 |
Set and just change these as well.
And for Google, I'm going to do pixels
| | 06:41 |
again here and I'm going to do negative 45.
| | 06:44 |
So that's again going to move it over.
And then, I'm going to do pixels here.
| | 06:49 |
And this time I'm going to go down as
well, another negative 45 pixels.
| | 06:55 |
So again, that's horizontally going over
to the right 45 pixels, and then going
| | 06:58 |
down vertically 45 pixels. Alright?
| | 07:01 |
Now, I'm going to go ahead and duplicate
this one.
| | 07:06 |
And instead of Google this time, I'm
going to change that to Facebook.
| | 07:17 |
And all I have to do is change these values.
| | 07:19 |
Instead of negative 45 right here, I'm
going to change that to negative 90.
| | 07:24 |
(SOUND) I'll duplicate this one, and for
this one it's going to be linked.
| | 07:36 |
(SOUND) We're just going through all of them.
| | 07:41 |
I tend to like to click off of it and
click back onto it to make sure that it
| | 07:44 |
was typed in the right way and that I'm
establishing focus on it.
| | 07:48 |
And for linked, again I can use keywords
for this.
| | 07:50 |
So I'm going to grab these keywords, I'm
going to do right and I'll do bottom.
| | 07:53 |
So last time I did right and top, this
time I'm doing right and bottom.
| | 07:57 |
So let's do a Save All.
Go back in my browser and refresh and now
| | 08:01 |
as I hover over them i get those nice sort
of subtle hover indicators, which is
| | 08:05 |
really cool.
If you've never worked with CSS Sprites
| | 08:10 |
before, I can understand if you watch this
video and you go what?
| | 08:14 |
Wait, what?
But just do a little bit of research of
| | 08:17 |
CSS Sprites.
Check out some of the techniques out there
| | 08:20 |
that people are using for them.
Check out some of my other CSS titles
| | 08:23 |
where I talk about and cover CSS Sprites
in more detail because once you start
| | 08:27 |
learning how to really control this
background image positioning, you can
| | 08:30 |
become a lot more creative with how your
background images are integrated into the
| | 08:33 |
actual site's visual design.
You can add some compelling techniques
| | 08:39 |
like this CSS-based image rollover that we
just did here.
| | 08:42 |
And you're also a lot more efficient with
how you're serving images for your site.
| | 08:47 |
| | Collapse this transcript |
|
|
9. Working with TablesBasic table structure| 00:00 |
Believe it or not, I occasionally get the
question, hey, we shouldn't be using
| | 00:04 |
tables anymore, right?
Well, not for creating layouts.
| | 00:07 |
I mean, we haven't done that for quite
some time.
| | 00:09 |
But tables are actually very well suited
and should be called on to do what they
| | 00:13 |
were designed to do, and that is to
display tabular data.
| | 00:17 |
Tables have a very unique structure that's
designed to present data to the user and
| | 00:22 |
in that regard they succeed extremely well.
| | 00:24 |
Tabular data is accessible, and the
structure can assist in both styling and
| | 00:28 |
clarity.
Understanding table structure, and when
| | 00:31 |
they should be used, is absolutely
critical to making sure that your content
| | 00:34 |
remains structured correctly.
So before we move on to building and
| | 00:38 |
styling tables, we're going to take a
moment to review the basic structure of
| | 00:42 |
tables, to make sure that we have a clear
understanding of the meaning behind the
| | 00:46 |
tabs that make up basic tables.
We're going to create a table on the page,
| | 00:50 |
and then explore its structure to learn a
little bit more about it.
| | 00:53 |
So I had the table.htm from 09_01 folder
and really this could be any page because
| | 00:59 |
there's no content on this page whatsoever.
| | 01:02 |
And I'm just going to go, I'm in
DesignView, I'm going to go up to my
| | 01:04 |
common objects and right there, it's the
icon that I've always thought looks a
| | 01:08 |
little like a waffle.
It's that table.
| | 01:10 |
I'm just going to click on that.
And that brings up an insert table dialog
| | 01:13 |
box.
And what I like about this again Tables
| | 01:16 |
are another one of those structures that,
it's have a pain to code by hand because
| | 01:20 |
you have so many tags to go through and,
using Dreamweaver, I can just pop one on
| | 01:23 |
the page and, and tell it exactly the size
I needed and how many rows and how many
| | 01:28 |
columns, that sort of thing. Alright.
| | 01:29 |
So I'm going to go with ten rows and I'm
going to go with six columns.
| | 01:33 |
I'm going to give it a width of 85%.
Now, one of the things I want to point out
| | 01:37 |
to you guys is that some of the properties
that you're going to set here are better
| | 01:41 |
controlled through CSS.
But I want to give you an overview of what
| | 01:44 |
all these properties are doing.
Border thickness, let's give it zero, and
| | 01:48 |
then for Cellpadding, I'm going to give it
zero, and for Cellspacing, I'm going to
| | 01:52 |
give it zero.
Now, for the Header, well actually, you
| | 01:55 |
know what, cellpadding, let's do two.
Just so you can kind of see what that
| | 01:57 |
does. Alright?
| | 01:58 |
For the Header, let's do a header of Top.
There we go.
| | 02:03 |
And we can give the table a caption, let's
type in required course load for graphic
| | 02:11 |
design and the we'll give this a summary;
required courses for BFA Graphic Design.
| | 02:24 |
Perfect.
All right.
| | 02:26 |
I'm going to go ahead and click Okay, and
there's my new table.
| | 02:29 |
So, you know, within Dreamweaver, if I
needed to start entering information into
| | 02:33 |
this table, I could simply click into any
one of these cells, and, and start typing.
| | 02:37 |
So I could type in, you know, Freshman.
You know, I could come over here and type
| | 02:41 |
in Sophomore.
And you get the idea as you begin click
| | 02:45 |
and typing these columns are going to
re-size because I haven't through CSS or
| | 02:49 |
any other means told these table cells to
be specific size.
| | 02:54 |
Now before we get into the actual
properties of the table itself.
| | 02:57 |
I'm going to switch over to code view to
show you guys what exactly was created
| | 03:01 |
alright.
let me scroll up and you'll notice that
| | 03:04 |
inside the body tag we have a table tag.
And a lot of the properties that we set
| | 03:09 |
with that dialog box where applied to the
table tag as attributes.
| | 03:13 |
So we have width, border, cellspacing,
cellpadding, and summary.
| | 03:16 |
Now, I should point out that a couple of
these options have been deprecated in
| | 03:21 |
HTML5.
For example, they recommend that you
| | 03:24 |
control cellspacing and cellpadding
through CSS.
| | 03:27 |
That's all well and good, for cell
padding, you can do regular padding for
| | 03:31 |
that, but cell spacing is a different
animal all together.
| | 03:35 |
Most browsers don't allow margins to
affect table cells, so I'm not really sure
| | 03:39 |
where they're going with that.
I still use cellspacing from time to time.
| | 03:43 |
border, I love leaving that at 0, or just
leaving it off altogether and controlling
| | 03:47 |
that through CSS.
The width of the table I think probably
| | 03:50 |
should be controlled through cs in terms
of the size of it.
| | 03:53 |
Although it's nice to know you can do a
specific value, like, you know, 480 pixels
| | 03:57 |
or a percentage like we've done here.
And then the summary attribute.
| | 04:00 |
This ones actually called a lot of controversy.
| | 04:02 |
HTML five initially ripped out the summary
attribute but accessibility people kind of
| | 04:07 |
squawked about that because there's an
issue here.
| | 04:09 |
How else are you supposed to make your
table accessible?
| | 04:12 |
I actually still recommend using it,
because it's supported in a lot of the
| | 04:16 |
screen readers and other accessibility
devices, and what it does for you is it
| | 04:20 |
basically gives us exactly that, a summary
of the table.
| | 04:22 |
So before somebody with a screen reader
goes through and looks at every single
| | 04:27 |
table cell to figure out what's going on
there, this summary can give them a nice,
| | 04:30 |
condensed, version of this.
Now one of the reasons why summaries have
| | 04:34 |
been depricated is because of captions.
Captions, are just that, they're captions
| | 04:38 |
for the table, they usually go above it
but they can also be placed below it, its
| | 04:42 |
up to you.
And, again, the caption just gives a nice
| | 04:45 |
headline, if you will, or title for that
particular title.
| | 04:48 |
The reason that I still like using
summaries is that summaries can be longer,
| | 04:51 |
so you could have like a whole paragraph
of text for the summary.
| | 04:53 |
Whereas the caption's typically shorter,
maybe one line or something like that.
| | 04:57 |
Now, inside every table, each row is
represented with a table row tag, so every
| | 05:03 |
single row within the table has a tr tag,
and inside that tr tag are going to be the
| | 05:07 |
actual contents of the table itself.
Now, these could be td, which stands for
| | 05:11 |
table data.
Or th, which stands for table header.
| | 05:15 |
And you can kind of see as I go through
this, that same structure just repeats
| | 05:19 |
itself over and over and over again.
So, this is a very simple table, but
| | 05:23 |
there's a lot going on here in terms of
the actual A size of it because I have so
| | 05:27 |
many rows and so many columns.
So those tags the table tag the table row
| | 05:31 |
tag and then either table header th or
table data td tags form the basic building
| | 05:36 |
blocks of any table that you're going to
work with.
| | 05:39 |
Working with tables in Dreamweaver, it's
actually fairly simple, and it's a lot
| | 05:42 |
like some of the other programs you might use.
| | 05:44 |
You'll notice if you move your mouse
around to different areas--for example, if
| | 05:48 |
I go right above a column, I'll see a
downward arrow.
| | 05:51 |
And if I click, I select the entire column.
| | 05:53 |
If I go right beside a row--and I have to
be very careful--but I see the arrow.
| | 05:57 |
I'll position myself again.
I've selected the whole row.
| | 06:00 |
And if I go in the upper right-hand corner
of the table I can select the entire
| | 06:04 |
table.
This, again, can be kind of problematic.
| | 06:07 |
There we go.
Finally got it.
| | 06:09 |
Now, an easier way to select the entire
label or row, in my opinion, is just to
| | 06:12 |
click inside of it, and then use the tag selector.
| | 06:15 |
Sometimes, moving things around can be
really difficult, in terms of getting your
| | 06:19 |
cursor positioned in exactly the right spot.
| | 06:22 |
Okay, now when you have a table selected,
your properties inspector is going to
| | 06:25 |
reflect the properties of that table.
And I'm going to switch over to the html
| | 06:28 |
properties, so I can see these.
You can see that it has ten rows, six
| | 06:32 |
columns.
I could update those if I wanted to.
| | 06:34 |
I could give it an ID.
I could change it's width.
| | 06:37 |
I could change cell padding and cell spacing.
| | 06:38 |
Change it's border, all sorts of things
that I could do here, apply classes to it.
| | 06:43 |
And I've also got these little options
down here which can clear out any column
| | 06:47 |
widths, covert widths to pixels,
percentages, and if you interact with the
| | 06:51 |
individual cells themselves.
Let say, for example, that I wanted to
| | 06:55 |
merge these together.
I could highlight all of those.
| | 06:59 |
And I could just merge those cells together.
| | 07:01 |
And now, that particular table header is
spanning, those four columns.
| | 07:06 |
So there's a lot of things that you can
adjust and change with your tables right
| | 07:10 |
here within the Properties Inspector.
The thing that you have to really start to
| | 07:14 |
think about, though, is how many of these
properties you want to set via the HTML
| | 07:18 |
and how many things you want to control
through CSS.
| | 07:20 |
And once you've had a little bit more
experience working with tables and working
| | 07:24 |
with styles, you'll have a better
understanding of when it's appropriate to
| | 07:27 |
control something through styles versus
controlling it through the HTML itself.
| | 07:31 |
And so, now that we've reviewed the basic
table structure, we can work on displaying
| | 07:36 |
tabular data on our site in an attractive,
accessible, and structurally sound manner.
| | 07:41 |
And we'll focus on that for the rest of
the chapter.
| | 07:43 |
| | Collapse this transcript |
| Importing tabular data| 00:00 |
While it's perfectly acceptable to create
tables and populate them with data
| | 00:04 |
yourself inside Dreamweaver, it's not
always the fastest way to get your data
| | 00:08 |
into your pages.
Now, if your table already exists in a
| | 00:11 |
Word or Excel document, you can simply
import that file directly into
| | 00:16 |
Dreamweaver.
Dreamweaver will build the table structure
| | 00:18 |
from the available data just leaving you
to add any of the accessibility features
| | 00:22 |
or additional structure that your table
might require.
| | 00:25 |
In my opinion, it's the fastest, most
efficient way to get data into Dreamweaver
| | 00:30 |
and into a table.
Now, if you're working on a PC, or a
| | 00:33 |
Windows machine, you can use the import
Word or import Excel document option to
| | 00:37 |
import straight from that program.
However, on the Mac, you'll need to first
| | 00:41 |
save the file out as a comma or
tab-delimited file, and then use the
| | 00:45 |
import tabular data option Now I'll be
honest with you.
| | 00:48 |
I actually prefer the second way of doing that.
| | 00:52 |
The reason that I prefer the Import
Tabular Data is, number one, it's
| | 00:55 |
available on both platforms, and number
two, if you're bringing in data from
| | 00:59 |
either a Word or Excel document, those can
often contain lot of unwanted formatting.
| | 01:05 |
So I really recommend going ahead and
sending that out as a delimited file and
| | 01:09 |
|
|
