IntroductionWelcome| 00:03 | Hi! I am James Williamson,
lynda.com Senior Author and an Adobe
| | 00:08 | Certified Instructor.
| | 00:09 | Welcome to Dreamweaver CS5 Essential Training.
| | 00:12 | My focus in creating this course
was not only to teach you how to use
| | 00:15 | Dreamweaver, but to introduce you
to how to approach Web design using a
| | 00:19 | standards-compliant workflow as well.
| | 00:21 | In this title, you will learn best
practices for creating new Web sites and
| | 00:25 | files, the fundamentals of HTML and CSS,
and how to use other programs like Word
| | 00:30 | and Photoshop to speed up your
workflow, and how to make sure your code is
| | 00:34 | created in a clean and accessible manner.
| | 00:36 | You will also learn how to properly
create and style forms and tables, how to
| | 00:40 | save time by using templates properly,
and ways to add user interactivity to
| | 00:44 | your pages that creates
truly compelling content.
| | 00:47 | You will also learn how to get your finished
Web site from Dreamweaver to being live online.
| | 00:52 | I hope you will have fun working
with Dreamweaver CS5 Essential Training.
| | 00:56 | Web design is fun and Dreamweaver
makes it more fun by taking care of many of
| | 01:01 | the small details, so that you can
concentrate on doing what you do best,
| | 01:05 | creating awesome content.
| | 01:06 | Let's get started.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium subscriber to the
lynda.com Online Training Library, you
| | 00:05 | have access to the
exercise files for this title.
| | 00:08 | I recommend downloading the exercise
files and placing them in a central
| | 00:11 | location while you work, such as your
Desktop or your Documents directory.
| | 00:16 | For this course, I recommend defining
an overall site for working with the
| | 00:19 | exercise files and then redefining
that site for each individual exercise.
| | 00:25 | To illustrate this, I am going to walk you
through the Site Setup process in Dreamweaver.
| | 00:28 | So here I am in Dreamweaver.
| | 00:30 | To begin working on my exercise files,
I am just going to go right down to the
| | 00:33 | Welcome Screen and
create a new Dreamweaver Site.
| | 00:37 | Now, for this title, I recommend
naming the Site Explore California, but in
| | 00:42 | truth, you could name it
anything that you would like.
| | 00:44 | Now, for the Local Site Folder, I am
going to Browse, and I am going to go out
| | 00:48 | on the Desktop where I
have placed my Exercise_Files.
| | 00:51 | I am going to open those up, and I will see
a listing of all the chapters in this course.
| | 00:55 | Now, I certainly recommend starting
from the beginning of the title and
| | 00:58 | working your way through,
| | 00:59 | but if you would like to jump to
a specific exercise, that's fine.
| | 01:03 | Whatever exercise you are interested in
working on, you are going to go inside
| | 01:06 | that Chapter, find the folder number
that corresponds to your exercise, open
| | 01:11 | that up, and choose Select.
| | 01:14 | At that point, we will Save the Site Setup,
and your Exercise_Files will appear in
| | 01:18 | your Files panel ready to use.
| | 01:20 | When you are done with this exercise and
ready to begin another one, you just go
| | 01:24 | right back to the Files panel, double-
click on the Site Name, in this case
| | 01:27 | Explore California, and that will
bring back your Site Setup dialog box.
| | 01:31 | You can now Browse for another
directory and move on to the next movie or the
| | 01:36 | next exercise that you are interested in.
| | 01:39 | Just repeat that process for every
exercise that you will be working with.
| | 01:43 | Now that you have seen how to manage
the Exercise_Files for this course, you
| | 01:46 | are ready to begin.
| | 01:47 | Let's get started.
| | Collapse this transcript |
|
|
1. Getting StartedWhat is Dreamweaver?| 00:00 | Adobe Dreamweaver is the most the
most popular Web Development Application
| | 00:03 | on the market today.
| | 00:04 | It offers a robust feature set that
allows users to quickly design, develop,
| | 00:09 | and deploy Web sites.
| | 00:10 | One of the main reasons for
Dreamweaver's popularity is its powerful visual
| | 00:14 | workflow that allows designers to
create sophisticated, standards-compliant Web
| | 00:18 | sites without having to write a lot of code.
| | 00:21 | Dreamweaver is used in almost every
aspect of Web design and development.
| | 00:25 | Rather than just being a page creation
tool, the program was designed from the
| | 00:28 | very beginning to help designers
create and manage entire sites.
| | 00:32 | This focus allows designers to use
Dreamweaver to build Web pages, create and
| | 00:36 | manage CSS, manage external assets,
work with related technology, such as
| | 00:41 | JavaScript and XML, and even build
dynamic sites driven by technologies such as
| | 00:45 | PHP, ColdFusion and .Net.
| | 00:49 | Dreamweaver is also used to upload
sites to live servers, run reports that
| | 00:53 | ensure proper site management, and manage
the file and folder structure within sites.
| | 00:57 | Dreamweaver's focus on Web standards
also ensures that pages will be created
| | 01:01 | with standards-compliant valid markup.
| | 01:04 | Now, Dreamweaver is probably best
known for its powerful page design tools.
| | 01:08 | Dreamweaver features both a Design and a
Code View that allows designers to work
| | 01:12 | in the environment that
they are most comfortable with.
| | 01:15 | Those that prefer to hand-code their
sites will find a powerful Code Editor that
| | 01:18 | speeds the process of writing code
and features tools that ensure that code
| | 01:22 | syntax and structure are correct.
| | 01:24 | For those that prefer to design
visually, Dreamweaver's Design view offers a
| | 01:28 | WYSIWYG, or What You See Is What You Get
Editor, that allows designers to create
| | 01:33 | pages visually while
generating the code for you.
| | 01:36 | Additional tools, such as the Insert
panel, the CSS Styles panel, and the
| | 01:41 | Properties Inspector makes it easy to
insert objects such as images, links, and
| | 01:46 | tables, build forms, style pages in
text, and even insert complex Ajax-driven
| | 01:51 | user-interface widgets without
having to generate the code yourself.
| | 01:55 | There is even a Split View that allows
you to see both the visual layout and the
| | 02:00 | code simultaneously.
| | 02:01 | Dreamweaver also features
a number of starter pages.
| | 02:04 | Now, these are pre-built CSS driven
page layouts designed to get new designers
| | 02:09 | up and running or to simply speed
up the process of designing pages by
| | 02:13 | providing standards-compliant, fully
CSS driven layouts that designers can use
| | 02:18 | for their own content.
| | 02:19 | Dreamweaver templates allow designers
to rapidly build and maintain sites by
| | 02:23 | creating custom template pages, build
pages based on these templates, and then
| | 02:28 | update entire sections, site-wide, by
making a single edit to the template on
| | 02:32 | which those pages are based.
| | 02:34 | As part of the creative suite,
Dreamweaver also enjoys a high degree of
| | 02:38 | integration with other
creative suite applications.
| | 02:41 | Photoshop users can import a fully
layered Photoshop file into Dreamweaver.
| | 02:45 | Dreamweaver will export an optimized Web
graphic based on the Photoshop file and
| | 02:49 | create a link to the parent PSD file.
| | 02:52 | Designers can then simply update the
Photoshop file to update the Web graphic,
| | 02:55 | no matter how many times
it's used within the site.
| | 02:58 | Dreamweaver's integration with Flash
makes embedding Flash content and deploying
| | 03:02 | video on your site as easy as
dragging and dropping a file.
| | 03:06 | Regardless of your experience level, if
you have never used Dreamweaver before,
| | 03:10 | you are going to be impressed with the
tools it offers to efficiently build and
| | 03:13 | maintain standards-compliant Web sites.
| | Collapse this transcript |
| Learning web design| 00:00 | If you are brand new to Dreamweaver, chances
are you are brand new to Web design as well.
| | 00:04 | Now, this can make for somewhat of a
steep learning curve as you try to learn a
| | 00:08 | new discipline and a new
program all at the same time.
| | 00:11 | In this movie, I would like to offer some
advice designed to make that path a little easier.
| | 00:16 | I also want to make sure that you
have the proper expectations about
| | 00:19 | Dreamweaver's capabilities and where it
fits into a proper Web design workflow.
| | 00:24 | First, I recommend strongly starting
by learning basic HTML, followed by
| | 00:29 | learning the basics of CSS.
| | 00:32 | Those two technologies are the core
of Web design, and without a solid
| | 00:35 | foundation and how they both work, your
skills as a Web designer will always be incomplete.
| | 00:41 | Dreamweaver is an amazing tool and much,
if not all, of the Web design process
| | 00:45 | in Dreamweaver can be performed
without ever touching the code.
| | 00:49 | This doesn't mean that you don't need to
know what's going on behind the scenes.
| | 00:53 | Without a proper understanding of the
code itself, you won't be able to tweak
| | 00:56 | minor errors or go beyond the
capabilities of Dreamweaver's visual tools.
| | 01:01 | Look at it this way. A talented
mechanic might use pneumatic tools on you car
| | 01:05 | because they help him work
faster and more precisely.
| | 01:08 | Those same tools, however, don't just
automatically make anyone a good mechanic.
| | 01:13 | Dreamweaver is a tool and to use it
properly, you need to understand the
| | 01:16 | processes and technology behind Web design.
| | 01:18 | Now, there is no reason that you
can't learn both at the same time.
| | 01:22 | As you build your pages in Dreamweaver,
take time to examine the code being generated.
| | 01:27 | This is a great way to learn the
structure and syntax of both CSS and HTML.
| | 01:32 | Remember, too, that Web design is a huge field.
| | 01:35 | There are many areas of specialization,
and you will probably find yourself
| | 01:38 | drawn to one aspect of Web design over others.
| | 01:41 | I recommend making those your initial focus.
| | 01:44 | By learning the basics and then
focusing on specific areas of design, you will
| | 01:48 | pick up and retain more than
trying to learn everything all at once.
| | 01:52 | There are a number of titles in the
lynda.com Online Training Library that focus
| | 01:56 | on core Web design skills.
| | 01:58 | I recommend completing both the HTML
and CSS Essential Training as a way of
| | 02:02 | building a solid foundation.
| | 02:04 | I have also recorded a title
designed specifically for new Web designers.
| | 02:08 | Web Design Fundamentals gives an
overview of Web design, explores best
| | 02:12 | practices, and defines much of the
terminology you will hear in this title.
| | 02:16 | If you are brand new to Web design, I
recommend completing that title first
| | 02:19 | before moving forward with this one.
| | Collapse this transcript |
| Current web standards| 00:01 | Throughout this title, you will hear me
refer to the practice of designing our
| | 00:04 | site around Web Standards.
| | 00:06 | Now, if you are new to Web design, that's
obviously going to provoke the question:
| | 00:09 | well, what are Web Standards?
| | 00:11 | Well, technically, Web Standards
refer to the set of standards and
| | 00:14 | recommendations produced by the World
Wide Web Consortium and other related
| | 00:18 | Web technology groups.
| | 00:19 | These standards were created in
response to the uneven nature of early browsers
| | 00:24 | and their proprietary features.
| | 00:26 | This made designing sites that looked
and functioned the same across multiple
| | 00:29 | browsers very difficult.
| | 00:31 | By having a set of standards to follow,
designers could be assured that their
| | 00:34 | sites would work properly in
any standards-compliant browser.
| | 00:38 | Over time, the term Web Standards has
also evolved to refer to a set of Web
| | 00:42 | design best practices. Separating style
and content, using CSS for layout, and
| | 00:49 | making content accessible, are all
often included in the discussion of working
| | 00:53 | within Web Standards.
| | 00:55 | Currently, Web Standards refers to
writing clean, valid HTML, providing styling
| | 01:00 | and layout through CSS, and making
sure that the content represented by
| | 01:04 | interactive page elements and
animations be accessible to all devices, even
| | 01:08 | those that lack the capability
to handle complex interactivity.
| | 01:12 | Dreamweaver supports
several standards-based workflows.
| | 01:15 | When creating pages, Dreamweaver
generates clean, valid HTML based on the
| | 01:20 | chosen document type.
| | 01:22 | Any styling options in Dreamweaver,
even those found within the Properties
| | 01:25 | Inspector, are designed to create
valid CSS, properly separated from the
| | 01:29 | content, either through
embedded or external styles.
| | 01:33 | Dreamweaver even has Accessibility
options that ensure objects being placed on
| | 01:37 | the page are following
proper accessibility guidelines.
| | 01:40 | Throughout this title, I will be
exploring these workflows and discussing how
| | 01:44 | they fit into the overall
discussion of Web Standards.
| | 01:48 | Finally, I recommend learning as much as
you can about the current Web Standards
| | 01:52 | and how they are evolving.
| | 01:54 | Due to the ever-changing nature of the
Web, what we refer to currently as Web
| | 01:58 | Standards will likely evolve into
entire new workflows, based on the spread of
| | 02:02 | Web technology and how our
content is being consumed.
| | 02:06 | Staying current and keeping your eye on
new recommendations will make adopting
| | 02:09 | new workflows easier.
| | Collapse this transcript |
|
|
2. The Dreamweaver InterfaceThe Welcome screen| 00:00 | Before we get started building pages,
we should take a closer look at the
| | 00:04 | Dreamweaver interface.
| | 00:05 | Being comfortable with the interface
and knowing where things are located will
| | 00:08 | make it easier to concentrate on the
concepts and workflows being presented,
| | 00:12 | rather than trying to find
a specific toolbar or icon.
| | 00:15 | Now, first, I want to take a
look at the Welcome Screen.
| | 00:19 | When you open up Dreamweaver for the
first time, the Welcome Screen is the first
| | 00:22 | thing you see, showing up right in the
middle of the screen, where you would
| | 00:25 | normally see an open file.
| | 00:27 | You can think of the Welcome Screen
as Dreamweaver's homepage, as it gives
| | 00:31 | you quick access to a lot of common tasks
that you will be performing in Dreamweaver.
| | 00:36 | Now, opening a file will replace the
Welcome Screen, but it will appear again as
| | 00:40 | soon as there are no remaining open files.
| | 00:43 | So as soon as you close all your
files, it comes right back again.
| | 00:46 | Let's take a closer look at the Welcome Screen
and some of the things that we can do with it.
| | 00:50 | As you just saw, one of the best things
about the Welcome Screen is its ability
| | 00:54 | to open up recent files.
| | 00:55 | The first column, right here on the
left-hand side, is Open a Recent Item.
| | 00:59 | Any files that you have been working on
will be listed here, and a single click
| | 01:03 | is going to take you right to that file.
| | 01:05 | Now, of course, the first time you
open up Dreamweaver, that list is
| | 01:08 | probably going to be empty.
| | 01:09 | But as you start working on a
project, that list is going to fill up.
| | 01:12 | It's going to give you quick access
to the files in your current project.
| | 01:15 | There is also a folder just
underneath that called Open.
| | 01:18 | If you really do need to browse to find
a file, clicking that will allow you to
| | 01:22 | browse to any place within your
current site to open up a file.
| | 01:26 | In the middle column, we have Create New.
| | 01:29 | This gives us a list of all sorts
of different pages: HTML, PHP pages -
| | 01:34 | if you are building a dynamic Web
site, XML, CSS, there is a ton of
| | 01:38 | different file types here.
| | 01:39 | So if you click on that, it will create a
brand new page using the default settings.
| | 01:44 | Now, in a little while, we will go into
Dreamweaver's Preferences, and we will
| | 01:47 | show how to set those, but just know
that when you click that, you are going to
| | 01:50 | get the default settings for
that particular type of file.
| | 01:52 | Now, we also have very quick access
to creating a new Dreamweaver Site.
| | 01:56 | That's probably the first thing that
you need to do whenever starting a new
| | 01:59 | project in Dreamweaver.
| | 02:01 | Again, in just a little bit, we will
be talking about how to define sites in
| | 02:03 | Dreamweaver as well.
| | 02:05 | Now, just like opening a recent item,
there is a folder down here called More.
| | 02:08 | If you need more options when creating a
new file type, you can simply click that.
| | 02:12 | That will give you the New Document
dialog box, which has considerably more
| | 02:15 | options than just your default settings.
| | 02:18 | On the right-hand side, we see
a column called Top Features.
| | 02:21 | Now, notice that these are all videos.
| | 02:23 | Clicking on one of these will take you
out to Adobe TV, where you can watch a
| | 02:26 | video on that new feature.
| | 02:28 | They have highlighted some of the
top new features in Dreamweaver CS5.
| | 02:31 | So if you want to learn a little bit
more about BrowserLab or CSS Enable, this
| | 02:35 | is a nice way to do that.
| | 02:37 | In the lower left-hand corner, we have a
set of links that will take you to some
| | 02:40 | online documentation,
| | 02:41 | documentation about Getting Stated
within Dreamweaver, highlighting some of the
| | 02:45 | New Features, or Resources, if you
need more detailed help information.
| | 02:49 | Just underneath that, there is
a link to Dreamweaver Exchange.
| | 02:52 | The Dreamweaver Exchange will allow
you to download widgets and resources to
| | 02:56 | make Dreamweaver a little bit
more powerful and extend some of the
| | 02:58 | functionality within the program.
| | 03:01 | Now, if for some reason, you don't want
to show the Welcome Screen, and I really
| | 03:04 | can't think of why you wouldn't, but if
you don't, there is a little check box
| | 03:07 | right down here that says Don't show again.
| | 03:09 | Now, if you click that - let me just say
OK to the warning message that comes up
| | 03:13 | from Dreamweaver - but if you
click it, the next time you will launch
| | 03:15 | Dreamweaver, you won't see the Welcome Screen.
| | 03:17 | So what happens if somebody plays a
prank on you, and you really use the
| | 03:20 | Welcome Screen a lot?
| | 03:21 | Well, it's easy to get it back.
| | 03:23 | If you go to your Preferences, and you
can go to Edit > Preferences, or if you
| | 03:27 | are on the Mac, you can go
to Dreamweaver > Preferences.
| | 03:29 | Just go to the General Category, and it's
the very first setting, Show Welcome Screen.
| | 03:33 | Just click that again, click OK, and
the next time you will launch Dreamweaver,
| | 03:37 | the Welcome Screen will come
right back to where it was before.
| | 03:39 | Now, I love how the Welcome Screen
unobtrusively gives me access to recently
| | 03:44 | opened files, allows me to create new
files with a single click, and gives me a
| | 03:47 | way to explore some of the
new features found in CS5.
| | 03:50 | Now, although some people tend to let
the Welcome Screen sort of blend into the
| | 03:53 | background, I think you will find
that if you begin to use it regularly, it
| | 03:57 | really speeds up the process of opening
up current files, creating new ones, or
| | 04:01 | a lot of the common tasks that you
will be performing within Dreamweaver.
| | Collapse this transcript |
| Windows and Mac interface differences| 00:00 | Dreamweaver is designed
for both the Mac and the PC.
| | 00:04 | Although Adobe does the best they can in
making the program the same in both platforms,
| | 00:09 | there are a few slight
differences between the two versions.
| | 00:12 | Let's take a quick glance at those
differences, in case you ever have to move
| | 00:16 | from one platform to the other.
| | 00:18 | The first thing I want to point out
is the slight differences in menus
| | 00:22 | between the platforms.
| | 00:23 | The PC integrates the Application
toolbar with the main menu, while the Mac
| | 00:28 | version treats the Application toolbar
as a separate floating panel that can be
| | 00:32 | docked and integrated
with other horizontal panels.
| | 00:36 | Another slight toolbar difference
involves the Style Rendering toolbar.
| | 00:41 | On the PC, you can float it as a separate
panel, or you can dock it in various locations.
| | 00:47 | On the Mac, it will dock with the
Document toolbar and cannot be moved.
| | 00:51 | Adjusting your Preferences will
require you to look in different places on
| | 00:55 | the PC versus the Mac.
| | 00:57 | On the PC, we'll go to
Edit and choose Preferences.
| | 01:02 | On the Mac, we'll go to Dreamweaver and
choose Preferences, same panel, just two
| | 01:07 | different locations.
| | 01:08 | Like most Adobe applications,
Dreamweaver is very keyboard shortcut rich.
| | 01:13 | These Keyboard Shortcuts can
change based on the platform.
| | 01:16 | Most of the time, it's simple changes,
like using the Command key on the Mac in
| | 01:20 | place of the Ctrl key on the PC.
| | 01:23 | But occasionally, there will be bigger
shortcut differences due to the operating systems.
| | 01:27 | Just be sure to check out the shortcut
keys, if you have to switch platforms.
| | 01:32 | Keyboard Shortcuts can be found
under the Edit menu on the PC and under
| | 01:36 | Dreamweaver for the Mac.
| | 01:39 | One of the biggest differences between
the Mac and the PC is how the Files panel
| | 01:43 | is handled when expanded.
| | 01:45 | The Files panel handles all of your
site management in Dreamweaver, and acts as
| | 01:49 | an FTP client for uploading and
downloading files on your site.
| | 01:53 | In the PC, when you expand the Files
panel, the panel takes over the entire
| | 01:57 | interface, even replacing the menu
with its own limited Files panel menu.
| | 02:03 | On the Mac, it remains a floating palette.
| | 02:06 | All menu options continue to
come from the Dreamweaver menu.
| | 02:10 | So while these are subtle differences,
they're important to know in case you
| | 02:14 | find yourself working on a different
operating system than what you're used
| | 02:17 | to, or in this case, watching a
tutorial that uses a different OS than your
| | 02:22 | current one.
| | Collapse this transcript |
| The Application toolbar| 00:01 | The Application toolbar in Dreamweaver
is designed to give you quick access to
| | 00:04 | program options, such as workspaces,
document views and site management.
| | 00:09 | It's also where you'll find panels
that can extend the functionality of
| | 00:12 | Dreamweaver by downloading
interactive widgets or accessing many of Adobe's
| | 00:16 | new online services.
| | 00:17 | So here we are in Dreamweaver.
| | 00:20 | The Application toolbar is found in
slightly different locations on the Mac
| | 00:23 | versus the PC.
| | 00:24 | Here I'm on the PC.
| | 00:25 | The Application toolbar can found
docked with the menu at the very top
| | 00:30 | right-hand corner of Dreamweaver.
| | 00:32 | Now on the Mac, you guys are going to find
it right down here in your Document toolbar.
| | 00:36 | So it's a slightly different
location on the two platforms.
| | 00:40 | Now you can turn it off.
| | 00:41 | If you go up to Window, you'll find a
little checkmark besides Application Bar.
| | 00:46 | You can turn that off on both the Mac and
the PC, slight difference there as well.
| | 00:49 | When you turn it off on the Mac, it all
goes away, but when you turn on the PC,
| | 00:53 | you'll see that this row
of icons only went away.
| | 00:56 | So there is really no saving in terms of
interface real state unless you're on the Mac.
| | 01:01 | So on the PC, now you can
just go ahead and leave that on.
| | 01:03 | So let's talk about what the
Application toolbar does for us.
| | 01:07 | Well, one of the most common uses
for the Application toolbar is to
| | 01:10 | switch between workspaces.
| | 01:11 | Workspaces, which we'll talk about in a
little bit more detail, little bit later
| | 01:14 | on, allows you to rearrange panels
very quickly and switch from one task to
| | 01:19 | another in Dreamweaver very rapidly.
| | 01:21 | So you'll notice that right now, we're
currently using the Designer Workspace.
| | 01:25 | But if I grab this pulldown menu, I can
switch to the Coder one if I need to do
| | 01:28 | a lot of hand-coding.
| | 01:30 | I can go back to a Dual Screen layout.
| | 01:32 | I can go to what they call a Classic
mode, which looks like some of the earlier
| | 01:36 | versions of the Dreamweaver.
| | 01:37 | Now I can head right back
to the Designer Workspace.
| | 01:40 | So it's very quick and easy way to
access layouts for different tasks
| | 01:43 | within Dreamweaver.
| | 01:44 | You'll also notice this
row of icons right up here.
| | 01:48 | Now the first row of
icons has to do with Layout.
| | 01:51 | If you click that, you'll notice that
we can switch between our Code View,
| | 01:55 | Design view, a Split Code, which
allows us to have code on both sides,
| | 02:00 | which is really handy if you want your CSS on
one side and your Code view on the other side,
| | 02:05 | Code and Design, which will put Code on
one side and the Design view on the other.
| | 02:10 | We'll go right back to Design.
| | 02:12 | This same functionality is available
right here on the Document toolbar, but I
| | 02:15 | kind of like the fact that we can
access it quickly up here through the
| | 02:17 | Application toolbar.
| | 02:18 | We also have the ability to Extend Dreamweaver.
| | 02:21 | If you click on the Extend Gear icon up
here, you'll notice that we can access
| | 02:24 | our Extension Manager, which allow us
to load our extensions into Dreamweaver,
| | 02:28 | or widget browser or Browse
for other Dreamweaver Extensions.
| | 02:31 | Now I cover the Widget browser and
its own movie little bit later on,
| | 02:35 | but what this allows us to do is
extend the functionality of Dreamweaver by
| | 02:38 | going out and getting third party tools
or tools that Adobe provides us that are
| | 02:42 | going to give us extra
functionality within Dreamweaver.
| | 02:44 | So it's definitely something
you want to keep your eye on.
| | 02:47 | Right beside that, we have the Site
Management icon that allows us to create
| | 02:51 | New Sites or manage some of our existing sites,
so it's a very quick way to access those.
| | 02:55 | We also have Search dialog box.
| | 02:57 | If you type in a search term CSS or
JavaScript, or whatever it is that you're
| | 03:02 | trying to learn within Dreamweaver,
it's going to take you to Adobe's
| | 03:05 | Community Help portal.
| | 03:06 | This is going to have articles
from all over the Web, maybe even some
| | 03:10 | user submitted articles.
| | 03:11 | So it's a really nice
sort of Community Help portal.
| | 03:14 | Right beside that, we have
the brand new CS Live panel.
| | 03:18 | Now this is not the only place where you
can access CS Live Services, but it's a
| | 03:21 | really central location for those.
| | 03:23 | If I click on the CS Live icon, it's
going to open up the CS Live panel.
| | 03:28 | It's going to take us to extended
services, such as Adobe's BrowserLab
| | 03:32 | integration, SiteCatalyst, which allows
you to view Web Analytics of your site,
| | 03:37 | and even share your screen with Acrobat.com.
| | 03:41 | So you can get into a connect session
with other designers or even clients and
| | 03:45 | share your screen, so that you can
show them what you have going on.
| | 03:47 | So there is a lot of really
cool stuff right in that one place.
| | 03:51 | Now it may be a little small in size,
but the Application toolbar puts
| | 03:55 | considerable power in your hands.
Being able to switch between workspaces,
| | 03:59 | toggle Design views, and access
all those external services makes it an
| | 04:03 | incredibly handy toolbar to have around.
| | Collapse this transcript |
| The Document toolbar| 00:00 | The Document toolbar is such an
important part of Dreamweaver, I doubt you'll
| | 00:04 | think of it as just a toolbar.
| | 00:06 | More than likely, you'll think of it as
an extension of the document that you're
| | 00:09 | currently working on.
| | 00:10 | Now, the Document toolbar can be
found just above any open document.
| | 00:14 | It allows you to access different views,
preview your pages, upload files, title
| | 00:19 | your page and a host of other capabilities.
| | 00:22 | Now, we're just going to do a
quick overview of the Document toolbar.
| | 00:25 | Many of the features and
functionalities that we're going to show off here are
| | 00:28 | described in more detail later in the title.
| | 00:30 | Now, I have got our index.htm file
opened here, and we're going to use the
| | 00:34 | Document toolbar to kind of show off
some other things that it can do with any
| | 00:38 | document that you're working in.
| | 00:39 | Now, the first thing I'm going to show
you guys is probably the feature that is
| | 00:42 | used most frequently by Web designers,
and that is to change your document view.
| | 00:48 | In the upper left-hand corner,
you're going to see three icons:
| | 00:51 | Code, Split and Design.
| | 00:54 | If I click Code, our Document window is now
going to show us the source code for our document.
| | 00:59 | We're also able to access any of
the related files' source code as well.
| | 01:04 | So stylesheets, any external
JavaScript files, or really, the code for any of
| | 01:09 | our related files we can access
simply by clicking on them, just above the
| | 01:13 | Document toolbar itself.
| | 01:14 | Now, we also have a Design view.
| | 01:17 | And that's going to take you to
Dreamweaver's WYSIWYG, or What You See Is
| | 01:20 | What You Get Editor.
| | 01:21 | Here we see a nice visual display of
our page, and it represents, more or less,
| | 01:26 | what our page would look
like within our browser.
| | 01:28 | We also have a Split View, which shows
you both the Code and the Design view.
| | 01:33 | Now, you're able to customize this.
And if you go up to the View menu, notice
| | 01:37 | that you can turn Split Vertically
off so that it splits the Code and the
| | 01:41 | Design view horizontally.
| | 01:42 | And there is also an option for
moving Design view on Top or to the left,
| | 01:47 | depending upon whether you're looking
at, horizontal or vertically split code.
| | 01:51 | So feel free to go ahead and change
that to your personal preferences as well.
| | 01:53 | Now, I'm going to switch this back to
Design view, because I want to talk about
| | 01:57 | this set of icons here on the right-hand side:
| | 01:59 | Live Code, Live View and Inspect.
| | 02:02 | Now, those all have to do with
Dreamweaver's WebKit Integration.
| | 02:05 | WebKit is an open source browser-
rendering engine used to power such browsers as
| | 02:11 | Apple's Safari browser and Google's Chrome.
| | 02:14 | So if I click Live View, my Design view
changes to a rendered view of our page,
| | 02:19 | and we see that as it's rendered
with the WebKit rendering engine.
| | 02:23 | So it's a nice sort of preview as to what
it's going to look like in one of those browsers.
| | 02:28 | Now, there is a lot more to that feature,
and we're going to be covering that a
| | 02:31 | little bit later on.
| | 02:32 | But I'm going to toggle Live View off now,
and the Document toolbar allows us to
| | 02:36 | preview our pages in a
slightly different way as well.
| | 02:39 | Let's say you wanted to see your
page actually within the browser.
| | 02:42 | This little planet icon just to the
right of that, if you click that, it's going
| | 02:46 | to show you a list of any browsers
that you have installed or that you have
| | 02:49 | added through Dreamweaver.
| | 02:50 | You'll notice the first listing we
have here is the Preview in Firefox.
| | 02:54 | So if I click on that, it's going to
launch my page within the Firefox browser,
| | 02:58 | and I can see how it's going to
look like live online as well.
| | 03:03 | Now we have a lot of other
options that we can do here as well.
| | 03:05 | We have Visual Aids, for example,
which can show us things like CSS Layout
| | 03:08 | Backgrounds that shows
specific regions of our pages,
| | 03:11 | the Box model properties, which will
show you padding and margin if you click on
| | 03:16 | an object, or even these Layout
Outlines that gives us this nice sort of dotted
| | 03:20 | lines or dashed lines around
different elements on the page.
| | 03:23 | So feel free to going in and tinker
around with those and see which Visual Aids
| | 03:27 | tend to help you, and which ones
tend to be a little distracting.
| | 03:30 | So you can sort of modify
those to your own liking.
| | 03:33 | Now, just beside that, we
also have the Title dialog box.
| | 03:36 | So if you create a new page, and you
need to give it a title, or if you open
| | 03:40 | an existing page that somebody forgot to title,
this is a very quick and easy way to do that.
| | 03:44 | So I'm just going to click inside my
Title page here, and I'm going to say,
| | 03:47 | "Come Explore California."
| | 03:51 | Now our document has a title, and it
says exactly what we want it to say.
| | 03:54 | Now, as you're working on your
document, once it's finished, and it's ready
| | 03:58 | to go online, you can also use the
Document toolbar to very quickly and
| | 04:02 | easily upload your file, or even download the
latest copy of your file, from your Web server.
| | 04:06 | So once we're finished, we can choose
Put, and it will go ahead and upload our
| | 04:11 | file to our remote server as long as we
have one defined, and we'll talk about
| | 04:15 | defining remote servers a
little bit later on in the title.
| | 04:18 | Now, more than likely, you're going to
use the Document toolbar most frequently
| | 04:22 | to switch between Code and Design view.
| | 04:24 | However, don't forget to take
advantage of features, such as file uploading,
| | 04:28 | previewing your pages within browsers,
or Live View, or all these other options
| | 04:32 | that we've taken a look at.
| | 04:34 | These options are located in a nice
central location, and they're really going to
| | 04:37 | speed up your workflow once
you're used to using them.
| | Collapse this transcript |
| Arranging panels| 00:01 | In any program as complex as
Dreamweaver, one of the biggest challenges is
| | 00:04 | keeping the workspace organized.
| | 00:07 | There are multiple panels, views
and panel groups to keep track of and
| | 00:10 | access when needed.
| | 00:12 | In this movie, we'll take a closer look
at managing and arranging those panels so
| | 00:16 | that you're taking control
of the Dreamweaver workspace.
| | 00:20 | So here I just have the index file open
as the sample document, but really, our
| | 00:23 | focus is on the panels in this particular movie.
| | 00:26 | Now, one of the easiest ways to arrange
panels is to use the preset workspaces.
| | 00:31 | If I go up to my Application toolbar,
I can see that I have a full listing
| | 00:35 | of default workspaces.
| | 00:37 | So I can go to the Classic workspace.
| | 00:39 | Notice that it rearranges a lot of my panels.
| | 00:41 | I can go to the Designer one, which is
the one we're just looking at, Coder one.
| | 00:45 | There is even a workspace for Dual
Screen setup if you want to move all of your
| | 00:49 | panels to one monitor and have
your file working on another.
| | 00:53 | So that's a very quick and easy
ways to arrange those panels, but how do
| | 00:56 | they actually get them in those locations?
| | 00:59 | Now, let's take a look at what we can do
to modify and work with these different
| | 01:03 | panels and panel groupings.
| | 01:05 | Now, one of the first things you'll
want to point out is that you're free to
| | 01:08 | dock and undock these
panels as much as you want.
| | 01:11 | You'll notice, for example, that
here I have a panel called AP Elements.
| | 01:14 | If I click on that tab, it's going
to bring that tab to the forefront.
| | 01:17 | So when you're working with these
groups, simply clicking on the name of the
| | 01:21 | panel activates that panel and hides
all the other panels within that group.
| | 01:25 | Well, you can create new groups or
rearrange groups anywhere that you want.
| | 01:29 | I can take this AP Elements panel, for
example, and by clicking on this tab and
| | 01:33 | holding the mouse down, I can drag it
away from that group and even away from
| | 01:37 | that panel dock, and float it
as its own individual panel.
| | 01:41 | Now, when we open up Dreamweaver for
the first time, we don't see all of the
| | 01:44 | panels that are available to us.
| | 01:46 | In fact, if you go up to the menu and
go to Window, you're going to see a full
| | 01:50 | listing of all the panels
that Dreamweaver has to offer.
| | 01:52 | The ones with the checkmarks beside them
are the ones that are currently active.
| | 01:56 | So if I chose the Tag Inspector, for example,
notice that it opens up the Tag Inspector.
| | 02:01 | Most panels do have a default location,
so the Tag Inspector opened up right
| | 02:05 | here beside the CSS Styles panel.
| | 02:07 | Now there is nothing to prevent me from
taking that and undocking that as well.
| | 02:12 | Now, if you have two panels, and you
want to combine them within a group, again,
| | 02:15 | you simply click the tab, move it over to
that other panel, and you'll see a nice
| | 02:19 | blue outline all the way around it.
| | 02:21 | As soon as you let go of that,
we now have a new panel grouping.
| | 02:26 | Now, panel groupings can either be
floating panel groups, like this one, or
| | 02:31 | they can fit into this area right over
here on the right-hand side, which is
| | 02:34 | what we call a panel dock.
| | 02:36 | The panel dock is a collection of different
panels sort of all arranged in this vertical row.
| | 02:41 | There are a very nice and efficient way
of arranging your panels, and saving a
| | 02:45 | good bit of screen real estate.
| | 02:46 | I'm going to go ahead and
take this panel grouping.
| | 02:48 | Notice that I'm clicking on the
top sort of darker bar of this.
| | 02:52 | I'm just going to move that
over here into my panel dock.
| | 02:56 | Notice that I can either add it to an
existing set of panels - this is the blue
| | 03:00 | outline that I get all the way around
the CSS Styles panel - or if I just go up
| | 03:04 | slightly more, notice that I get a
blue insert line between those panels now.
| | 03:09 | If I let go there, now our new
group is right here in its own grouping, but
| | 03:15 | still within that dock.
| | 03:16 | Now, your dock can get crowded pretty
quickly, so one of the ways of sort of
| | 03:21 | reducing the space that different
panels are taking up within the dock, is to
| | 03:24 | double-click their tab.
| | 03:26 | Notice for the AP Elements panel, if
I double-click this tab, it collapses
| | 03:30 | it, and so I can sort of close all the panels
that I'm not using to focus on a single panel.
| | 03:35 | If I want a CSS Styles, for example,
I can double-click to open that up.
| | 03:39 | I can double-click the Files panel to
close it, and now I'm just looking at
| | 03:43 | my CSS Styles panel.
| | 03:45 | So the panel dock is a really nice and
efficient way of organizing all of the
| | 03:49 | panels that you need to work with.
| | 03:50 | Having floating palettes,
unfortunately, is not all that effective.
| | 03:53 | Now, what happens if you do get
it a little too crowded over here?
| | 03:57 | Well, let's say we want to take
out this whole AP Elements grouping.
| | 04:01 | If you hold-down the Option key on the
Mac, or the Alt key on the PC, when you
| | 04:05 | click on one of the tabs, instead of
taking out an individual panel, you take
| | 04:08 | out the entire group.
| | 04:10 | Well, as I mentioned before, having
floating groups really isn't an effective
| | 04:14 | way to tackle your workspace,
because you end up with a lot of clutter.
| | 04:18 | But if you've got too many panels in
one dock, it's okay to go ahead and create
| | 04:21 | an entirely new dock.
| | 04:22 | Notice that if I grab this group and
drag it all the way over to the left edge
| | 04:27 | of the screen, I get a nice little
highlight over here, and when I release, I've
| | 04:31 | created an entirely new panel dock on
this side, which I could then populate
| | 04:35 | with as many panels as I want.
| | 04:36 | So you're free to create new docs in
different locations, float panel groups
| | 04:41 | all by themselves, or dock
everything together in one big group.
| | 04:46 | It's really up to you how
you want to arrange these.
| | 04:49 | Now, there's also other ways to save a
little bit of screen real estate as well.
| | 04:53 | If you notice at the very top of this
panel dock there are these two little dual
| | 04:58 | arrows right there. That is collapsed icons.
| | 05:01 | If I click on that, it's going to collapse
all these panels down to a series of icons.
| | 05:05 | The initial view has the
icon and a label out beside it.
| | 05:09 | This is a really handy way of learning
what these different little icons mean,
| | 05:13 | so that you know that this icon, for
example, represents the CSS Styles panel.
| | 05:17 | Now, accessing that panel is as
simple as clicking on the icon.
| | 05:21 | The panel floats out, we're able to interact
with it, and we can simply click on the
| | 05:24 | icon again to close the panel back.
| | 05:27 | If you want to save even more screen
real estate, you can place your cursor
| | 05:30 | between the Document window and the panel dock.
| | 05:33 | You get this nice sort of dual arrow,
which allows you to move that to the right
| | 05:37 | and collapse that down to
a single series of icons.
| | 05:40 | This is an amazingly efficient way to
save a lot of screen real estate, but
| | 05:44 | still allow yourself quick
and easy access to your panels.
| | 05:47 | Now there is even a quicker way to hide that.
| | 05:49 | I'm going to go ahead and expand
these back out from icons, and I want to
| | 05:53 | show you a way to quickly hide all of your
panels that might be located within a dock.
| | 05:58 | If you click F4, all of your panels
will suddenly collapse, and you won't even
| | 06:03 | see icons, but you will notice on the
right-hand side of the screen where our
| | 06:06 | dock used to be, we do have a gray bar.
| | 06:09 | If I hover over that gray bar, our
panels come right back, allow me to access
| | 06:14 | these panels and use them, and then when
I mouse off of the panels, they go back
| | 06:18 | to being in that collapsed gray bar state.
| | 06:21 | Hitting F4 again will toggle the
collapsed panels back again so they come
| | 06:24 | back, and we can access them.
| | 06:26 | Now, I know that's a lot to take in,
but there's actually one more thing that
| | 06:30 | I wanted to show you.
| | 06:31 | Some of your panels don't
work well as vertical panels.
| | 06:34 | Take the Insert panel, for example.
| | 06:36 | I'm just going to go ahead
and undock that and float it.
| | 06:39 | The Insert panel allows us to access
a lot of objects, such as our Common
| | 06:43 | objects, Form objects, and even
common text objects, like building text or
| | 06:49 | adding an Emphasis tag.
| | 06:50 | Now, you have to do a lot of scrolling
when this panel is in its vertical state.
| | 06:54 | It actually works a lot
better as a horizontal panel.
| | 06:57 | There is nothing wrong with that.
| | 06:59 | And if we grab the Insert panel and
drag it up, notice that we can create a
| | 07:05 | horizontal dock, so all the
panels can be docked horizontally.
| | 07:09 | And now the Insert panel becomes a
tabbed panel that we can go through and see
| | 07:13 | all of those icons at the
same time, which is pretty cool.
| | 07:17 | Now, if you experiment with this - and I
encourage that, go ahead and play around
| | 07:21 | with it, move your panels around,
dock them, undock them, trust me.
| | 07:25 | You can't break them, okay?
| | 07:27 | You might close the panel and not mean to.
| | 07:29 | You might have too many of them out
there, but that's okay, because at the end
| | 07:32 | of the day, you can go right back up
to our workspace, which are right here.
| | 07:36 | And you can grab that pulldown menu,
and I can choose to reset whatever
| | 07:39 | workspace I'm currently on.
| | 07:41 | As soon as I do that, it's going to take me
back to the default panel layout for that set.
| | 07:45 | So if you guys are experimenting a
little bit, things get a little wild,
| | 07:49 | don't worry about it.
| | 07:49 | You can just go right back up there, reset
it, and you're going to be in good shape.
| | 07:54 | I hope that illustrates how
flexible the Dreamweaver workspace is.
| | 07:57 | Now, you might have said yourself,
"Wow, that's a lot of work moving those
| | 08:00 | "panels around. If I get it where I
like it, I don't want to have to do that
| | 08:03 | every single time I open up
Dreamweaver," well, I'd agree with you, and that's
| | 08:07 | where our workspaces come in.
| | 08:08 | So what we're going to do in our next
movie is show you guys how to use your
| | 08:12 | newfound ability to move all these
panels around to save your own custom
| | 08:16 | workspaces, and we'll do that next.
| | Collapse this transcript |
| Managing workspaces| 00:00 | It is very common to switch back and
forth between tasks in Dreamweaver.
| | 00:04 | On one occasion you might be working
heavily in code, while other days you might
| | 00:08 | be working with dynamic data,
or building your CSS Layout.
| | 00:11 | Often, this is going to require using
panels and toolbar layouts that differ
| | 00:16 | from each other significantly.
| | 00:18 | Rather than having to constantly open
and close panels and rearrange them, we
| | 00:22 | can use workspaces to quickly switch
between interface setups and even create
| | 00:27 | your own when the presets don't suit our needs.
| | 00:30 | So as you've probably seen in a couple of
movies so far, we have these preset workspaces.
| | 00:35 | You can switch back and forth between
them pretty easily, and if you've changed
| | 00:39 | anything dramatically from one
workspace to the next, let's say, I go in
| | 00:42 | Designers, for example, and for
whatever reason, undock my CSS Styles.
| | 00:47 | Well, if I switch back to Designer, guess what?
| | 00:49 | It's going to remember that it's right
there, but anytime I want, I can go up to
| | 00:53 | Designer, and I can go ahead and reset that.
| | 00:56 | Then I'm just going to
switch back on Design view here.
| | 00:59 | One of the things that you may have
noticed, when you're resetting your
| | 01:01 | workspace, that there is the
ability to create a new workspace, okay.
| | 01:06 | So if none of these workspaces are
exactly what you need for your current task,
| | 01:11 | you can go ahead and build your own.
| | 01:13 | And what I want to do now is play
around with the interface a little bit,
| | 01:18 | and have that result in a brand-new
workspace that I'm going to be using for
| | 01:21 | the rest of the title.
| | 01:22 | There's a certain way that I really
like to use Dreamweaver, and I tend to go
| | 01:27 | ahead and set that up whenever I open
up a new copy of it, or wherever I am on
| | 01:29 | somebody else's machine, so the
ability to save a new workspace is really handy,
| | 01:35 | because I only have to do
that really once. All right.
| | 01:36 | I'm actually going to start with the
Classic workspace, so a lot of times
| | 01:41 | you can take one of the existing workspaces,
and just kind of build off of that a little bit.
| | 01:45 | You'll notice, in the Classic workspace, the
Insert panel is no longer in the panel dock.
| | 01:50 | It's docked right up here in its
own little toolbar. I love that
| | 01:55 | because even though it does take up
a little bit more screen real estate
| | 01:57 | that way, those icons are a lot easier to
access, and I don't have to do a lot of scrolling.
| | 02:02 | So I kind of like having them up there.
| | 02:04 | Now the next thing that I like to do
is to kind of play around a little bit
| | 02:07 | with my panel dock.
| | 02:08 | For example, we have Databases,
Bindings, and Server Behaviors.
| | 02:13 | Well, if I'm not really using those
all that much, don't really need them.
| | 02:17 | So I can take this grouping and close it.
| | 02:20 | One of the easiest ways to do that is
if you go right over here to this little
| | 02:23 | pulldown menu, I can choose Close Tab
Group, and that's a very quick and easy
| | 02:27 | way to close any groupings that
you're not currently working with.
| | 02:31 | Now, if you want to open up some panels
that aren't currently open, remember we
| | 02:34 | can go right up to Window.
| | 02:36 | We can see all of the panels that are
available to us, and we can choose which
| | 02:39 | ones we want to open up.
| | 02:41 | Right now, I've got almost all
of the panels that I want open,
| | 02:44 | but there is one panel grouping that I
really use a lot, and I want to go ahead
| | 02:49 | and get that opened.
| | 02:50 | If I go down through the Window menu,
I can find one area called Results.
| | 02:54 | This has Search, Reference,
Browser Compatibility, FTP Log.
| | 02:59 | So there are some really valuable
panels in here for your day-to-day
| | 03:02 | tasks within Dreamweaver.
| | 03:03 | So I'm going to go ahead and open that up,
| | 03:05 | and you're going to see why a lot of
people don't keep it open all the time.
| | 03:09 | It takes up a lot of room.
| | 03:11 | Look at this thing.
| | 03:12 | It's down here at the bottom.
| | 03:13 | Its default position is to dock
at the very bottom of the screen.
| | 03:16 | But here we have Search.
| | 03:18 | We have our Reference guides, our
Code Validation, Browser Compatibility
| | 03:23 | checks, Link Checkers.
| | 03:24 | There is a lot of really cool panels
in here, and I like being able to access
| | 03:28 | all of that power and have
that open while I'm working.
| | 03:31 | But, of course, the downside is, as we
mentioned before, it takes up a lot of
| | 03:35 | screen real estate, so what's the solution?
| | 03:37 | The solution is we can create our own
dock using the Properties Inspector.
| | 03:42 | Properties Inspector is probably the
single most powerful panel in Dreamweaver.
| | 03:46 | It allows you quick access to the HTML,
and CSS-based properties of whatever it
| | 03:51 | is you're currently working on.
| | 03:53 | Chances are that's a panel that
you're going to want to have opened all the
| | 03:56 | time inside Dreamweaver.
| | 03:57 | So notice that what I can do here is
I can grab the tab of the Properties
| | 04:01 | panel, and I can drag it down until I
see a nice blue outline all the way around
| | 04:07 | your panel grouping just underneath that.
| | 04:08 | It may take a little work so, just
kind of hover until you see that.
| | 04:12 | Now, as soon as you see that blue
outline, you just let to, and now the
| | 04:15 | Properties Inspector becomes
docked with all those other panels.
| | 04:18 | Notice that that's really not taking up
any more screen real estate than what we had before.
| | 04:23 | Now the downside is that the
Properties Inspector is now all the way over on
| | 04:26 | the right side, so you can see on these tabs,
it takes a little bit longer to get to it.
| | 04:30 | Well, that's okay too, because in any
panel grouping, doesn't matter whether it
| | 04:34 | is in the dock or when it's in the horizontal dock -
| | 04:36 | it really doesn't matter -
| | 04:37 | you can select the tab and simply drag
it to the left, so that it shows up in
| | 04:42 | the order that you want it.
| | 04:43 | I just kind of like having the
Properties Inspector being the first tab, so I'm
| | 04:46 | going to grab that tab and
drag it all the way over.
| | 04:50 | So we've done a good bit of modification here.
| | 04:52 | The Insert toolbar is now at
the very top of our window.
| | 04:55 | The Properties Inspector is now docked with
a lot of other properties that are going
| | 04:58 | to give us quick and easy access to a
lot of the functions we need to perform.
| | 05:02 | And our dock is kind of cleaned up.
| | 05:04 | We don't have a lot going on in there,
except for our CSS grouping, and our Files
| | 05:08 | panel grouping, which is going to make
it a little bit cleaner, and a little bit
| | 05:11 | easier to access some of those
features without a lot of clutter.
| | 05:14 | Okay, so I want to save this.
| | 05:16 | I don't want to have to reset this
every single time I come into Dreamweaver.
| | 05:20 | Oh, and one more thing, your Design
View, whether you're in Code View, Split
| | 05:25 | View, which we're in now, our Design
View, matters when you save a workspace.
| | 05:28 | I'm going to click on Design view because
I kind of like that being my default view.
| | 05:32 | If I want to go to Split View or Code
View, it's pretty easy for me to do, but
| | 05:36 | everytime I switch my workspace, I'd
really like to see that Design view.
| | 05:39 | So you want to make sure that that is set
before you save a workspace as well. Okay.
| | 05:44 | So now I'm ready to go
ahead and save this workspace.
| | 05:46 | So I'm going to go right up here to my
workspace switcher, grab that pulldown
| | 05:50 | menu, and I'm going to choose New Workspace.
| | 05:54 | And I'm going to name this one
the thing that I always name it.
| | 05:56 | I'm going to call it The James, click
OK, and now you can see the workspace
| | 06:00 | up here is The James Workspace, because it is,
after all, my favorite workspace in Dreamweaver.
| | 06:06 | Now, at this point, I can grab that
workspace switcher, and I noticed something.
| | 06:11 | Any custom workspaces that I've
created show up at the very top of the list.
| | 06:14 | That's really nice, because now I don't
have to search through all the presets.
| | 06:18 | I know that any of my workspaces
are going to be at the very top.
| | 06:21 | Notice again, I can continue to jump
back and forth between Designer, Classic
| | 06:26 | or my very own workspace.
| | 06:28 | Now your workspaces have the
same capabilities as the presets.
| | 06:32 | So if for some reason you came in and
decided to come in and kind of modify it
| | 06:37 | a little bit or move some things around,
at anytime you can come right back to
| | 06:41 | your workspace switcher, and say Reset,
and it will take you right back to the
| | 06:45 | very saved version of that.
| | 06:46 | Now, you could also go into Manage
Workspaces, and this would allow you to
| | 06:50 | rename or delete any
workspaces that you had created.
| | 06:53 | I like what I have got, so I'm just
going to go ahead and click OK there.
| | 06:56 | Now remember, workspaces give us the
ability to switch from task to task in
| | 07:00 | Dreamweaver without spending a lot of time
rearranging panels and resetting views.
| | 07:04 | My advice to you would be to be very
absorbent as you start using Dreamweaver. Watch out.
| | 07:10 | Frequently, you'll find yourself
opening and closing specific panels or
| | 07:13 | accessing specific groups.
| | 07:15 | If you find yourself constantly going
back and arranging the same panels over
| | 07:19 | and over based on common tasks, well,
consider building a workspace around those panels.
| | 07:25 | You'll find that it is the small
things, like utilizing workspaces, that will
| | 07:28 | dramatically speed up
your workflow in Dreamweaver.
| | Collapse this transcript |
| The Properties Inspector| 00:01 | Without a doubt, the Properties Inspector is
one of the most important panels in Dreamweaver.
| | 00:06 | It displays and allows you to edit the
properties of whatever you happened to be focused on.
| | 00:10 | It's contextually sensitive, so it
changes to display the properties of any
| | 00:14 | object that you select.
| | 00:16 | The Properties Inspector
has two tabs: HTML and CSS.
| | 00:21 | The HTML tab allows you to control the
properties of HTML elements on the page,
| | 00:26 | while the CSS tab allows you to
create and edit existing styles.
| | 00:30 | So let's take a closer look
at the Properties Inspector.
| | 00:33 | I have the tour_detail_bigsur
file open from the 02_07 folder.
| | 00:40 | And let's first take a look at the HTML tab.
| | 00:42 | So I am just going to
click inside of our HTML tab.
| | 00:45 | And you can see that we have areas for
Formatting HTML elements, and performing
| | 00:49 | common tasks like Bolding text,
Italicizing it, or even creating Bulleted Lists.
| | 00:54 | Working with it is very familiar to
anybody that has ever worked with, say, a
| | 00:58 | word processing program.
| | 00:59 | Let me show you what I mean.
| | 01:00 | I am going to scroll down, and
towards the bottom of the page, right
| | 01:04 | underneath Tour Highlights,
| | 01:05 | I can see the first item in what
needs to be a Bulleted List, Stay at the
| | 01:10 | historic Big Sur River Inn.
| | 01:12 | Well, if I start highlighting here and
go all the way down to the end of this
| | 01:16 | content, I can simply
click Bulleted List, and boom.
| | 01:20 | We now have a bulleted list on our page.
| | 01:22 | It has actually changed the HTML Source Code.
| | 01:25 | If I do a Split View, this is
now found within an unordered list.
| | 01:30 | We can obviously use it to change the
formatting attributes of HTML elements.
| | 01:35 | So if I click inside Tour Highlights,
for example, I can come right down here
| | 01:38 | to the Format menu, grab that pulldown
menu, and change that to a Heading 2.
| | 01:43 | So quick and easy changes to
the HTML structure of our page.
| | 01:47 | That's what the HTML tab allows us to do.
| | 01:50 | Let's do one more example.
| | 01:52 | If I scroll up, I can see that I have
this little quote right here, "Big Sur is
| | 01:57 | the greatest meeting of
land and sea in the world."
| | 01:59 | Well, I want that italicized.
| | 02:01 | So I am going to go ahead and highlight that.
| | 02:03 | And in the HTML tab, I am going to
click this little Italic button here, which
| | 02:08 | will italicize my text.
| | 02:09 | Now, this is one of the things about the
Properties Inspector that you have to be aware of.
| | 02:14 | It's a lot like using a word processing
program, so lot of people just sort of
| | 02:17 | dive in and start clicking, oh, Bold, oh,
Italic, without really understanding
| | 02:21 | what's happening behind the scenes.
| | 02:23 | If I switch over to Split Views, so
that I show both the Code and the Design
| | 02:27 | View, I can see that that text that I
highlighted is now surrounded by a brand new tag.
| | 02:33 | This is the em tag.
| | 02:34 | And it stands for emphasis, which is
typically within browsers italicized.
| | 02:39 | So because I did that in
the HTML tab, I got an em tag.
| | 02:43 | But had I done it looking at the
CSS Properties, I would have gotten an
| | 02:47 | entirely different result.
| | 02:49 | So let's switch over to the CSS Properties
and take a look at the options that it gives us.
| | 02:54 | Okay. So here I am.
| | 02:55 | I have clicked on CSS, and now I see an
entirely different set, although there
| | 02:59 | are some commonalities.
| | 03:00 | Notice, for example, here is
the Bold and Italic button.
| | 03:03 | I no longer see my List
items or things like that.
| | 03:06 | If I click inside of a paragraph, I
can quickly see a couple of formatting
| | 03:10 | options for that paragraph:
| | 03:11 | Font, Size, Color. Those are
all things that I can change,
| | 03:16 | but you need to be really aware of what
you are doing if you make those changes.
| | 03:21 | Take a look right over here.
| | 03:23 | We have a little pulldown
menu that says Targeted Rule.
| | 03:25 | That is going to tell you which
selector within your CSS you are actually
| | 03:30 | going to be changing.
| | 03:31 | Now, the CSS that we have written for this
particular site controls the entire site.
| | 03:35 | So if I make a change here locally
on this page, chances are it's going to
| | 03:39 | affect my entire site.
| | 03:41 | So I need to be very, very
aware of exactly what I am changing.
| | 03:45 | Now, notice that the Targeted Rule is a
pulldown menu, so if I grab that, I can
| | 03:50 | choose any of the Classes
and Rules that I have defined.
| | 03:55 | I can choose anything within the
Cascade that's affecting the current element
| | 03:59 | that I have selected.
| | 04:01 | And I can even create a brand new CSS
Rule to do what I want to do or create
| | 04:05 | a new Inline style.
| | 04:06 | Now, that can be really handy if you
guys are doing HTML Emails, as Inline
| | 04:10 | Styles are a great way of formatting
that without worrying about the HTML e-mail
| | 04:15 | client that's going to be
reading your file. Okay.
| | 04:17 | So make sure, for example, here that
we have clicked inside the paragraph.
| | 04:20 | We want to be targeting that
#mainContent #mainArticle p Rule.
| | 04:25 | And that's what we are targeting, by default.
| | 04:27 | Now, if I go down to these properties, I
could change the color of this, for example.
| | 04:31 | Let's say I am going to
make it #333, which is a gray.
| | 04:34 | I will just hit Enter and now
our text gets a little lighter.
| | 04:37 | It's kind of a gray now.
| | 04:38 | The thing is I have just made a site-
wide change to my document, because I have
| | 04:42 | actually edited the CSS itself.
| | 04:45 | In addition, the Italic and the Bold
tag no longer do what they did before in
| | 04:50 | the HTML Properties.
| | 04:52 | In the HTML Properties, the Bold
tag would give you a strong tag.
| | 04:55 | The Italic would give you an em tag, as we saw.
| | 04:58 | But within CSS, if I highlight some
text, let's say I want to focus on an
| | 05:03 | optional 4th day, and italicize that.
| | 05:06 | Well, if I am in the CSS Properties
and I click Italic, you will notice that
| | 05:09 | Dreamweaver is prompting me
to create a brand New CSS Rule.
| | 05:13 | So instead of modifying the
structure of my code, now I would be modifying
| | 05:17 | the Styles of my site.
| | 05:18 | I am just going to go
ahead and hit Cancel there.
| | 05:20 | So remember, the Properties Inspector
is an incredibly efficient way to make
| | 05:24 | quick edits to elements within your pages.
| | 05:26 | But you need to keep in mind that changes
made to CSS can likely cause site-wide changes.
| | 05:32 | So you should be sure you know
exactly which Rule you are editing and how it
| | 05:36 | fits into your overall CSS structure.
| | 05:39 | Also, pay close attention to which of these
two tabs, HTML and CSS, is the active tab.
| | 05:45 | Remember the edits to the HTML tab
changes the structure of the code, and
| | 05:49 | changes in the CSS tab
changes the styles of your page.
| | Collapse this transcript |
| The Insert panel| 00:01 | One of the things that Dreamweaver is
known for is its ability to handle many of
| | 00:04 | the complex tasks of creating Web pages
visually, with Dreamweaver automatically
| | 00:09 | generating the code behind the scenes.
| | 00:12 | Even when working with objects that
are relatively simple to code, such as
| | 00:15 | tables, Dreamweaver speeds up the process
of generating the code into a single click.
| | 00:20 | The secret behind much of
this success is the Insert panel.
| | 00:24 | And in this movie, I want to take a
moment to explore the Insert panel in a
| | 00:27 | little bit more detail.
| | 00:29 | Now, in my current Workspace, you are
going to find the Insert panel at the very
| | 00:33 | top, docked as this horizontal bar.
| | 00:35 | And you may experience it in different ways.
| | 00:38 | It doesn't have to stay this way.
| | 00:39 | It can undock and float as a vertical panel.
| | 00:44 | It can dock inside the panel dock.
| | 00:46 | Or as we had it, it can
dock as a horizontal panel.
| | 00:50 | Now, I like the horizontal panel
approach better myself, because I am able to
| | 00:53 | see more of these icons at the same time.
| | 00:56 | Now, your icons can either display in
color, as they are dong here, or if I
| | 01:00 | right-click the panel, I can turn off
that and make them appear in black and white.
| | 01:05 | Notice that it also affects some of the
other icons in your interface as well.
| | 01:08 | So if you like that sort of color
approach to let you know exactly what
| | 01:12 | those icons are, or if you like sort
of the subdued black and white version,
| | 01:16 | you can go that way.
| | 01:17 | I kind of tend towards color myself,
because when you are working with Spry
| | 01:21 | sets, for example, the blues represent
widgets and the green represents things
| | 01:26 | like your Form elements.
| | 01:27 | So it's kind of nice
sometimes to have that color-coding.
| | 01:29 | Now, you will notice that the Insert panel
is broken up into these different groups.
| | 01:34 | So you have Common objects.
| | 01:36 | We have Layout objects,
Form objects, Data, Spry.
| | 01:40 | We have a whole list of objects
here that we can switch back and forth.
| | 01:44 | Now, depending upon what type of page
you are working on, let's say you are
| | 01:47 | working on a Dynamic Page, you
are working with PHP or ColdFusion,
| | 01:50 | you are going to see additional groups show up.
| | 01:52 | We do have a data grouping, but you
are going to see, if you are working on
| | 01:55 | ColdFusion, for example, you are
going to see a ColdFusion tab show up that
| | 01:59 | gives you access to a lot of ColdFusion objects.
| | 02:01 | Now, to insert any of these objects on
the page, you simply click on a certain
| | 02:05 | location and, say, insert a
Table, or a Div Tag, or an Image.
| | 02:10 | So it can really speed up a lot of the
common day-to-day processes that you are
| | 02:14 | going to be doing when building Web pages.
| | 02:15 | Well, the Insert panel can do a lot of
things for you, some things that aren't
| | 02:19 | even visual, that you have to hand-
code, for example. Let me show you.
| | 02:22 | If I go right over here to our Head
objects, I can grab that pulldown menu.
| | 02:28 | And I can see that I have Meta tags,
Keywords, Descriptions, all sorts of things.
| | 02:33 | So I am going to go in and choose Keywords.
| | 02:36 | And maybe for my Explore California
Web site, for example, I want to type in
| | 02:40 | tours, California, explore, snowboarding,
hiking. The list could go on and on.
| | 02:50 | I think you get the idea.
| | 02:51 | You could just go in and type in any of
the Keywords that represent your site.
| | 02:54 | I am going to go ahead and click OK.
| | 02:56 | And now if I switch over to Code View,
you can see, in the head of my document, I
| | 03:00 | now have a nice Meta tag here,
giving all the Keywords for my site.
| | 03:05 | So I can use the Insert panel to do
a lot of those common tasks that don't
| | 03:09 | require me to go into Code and
do, which I really, really like.
| | 03:11 | Now, you may notice this little
grouping on the end called Favorites.
| | 03:15 | Now, if you click on that tab,
initially, Favorites is going to be empty.
| | 03:19 | Well, Favorites is really a place for
you to access the objects that you use
| | 03:22 | over and over and over again.
| | 03:23 | So you probably really won't know
your Favorites until you start using
| | 03:26 | Dreamweaver for a little while.
| | 03:28 | But once you do, and you notice that you
commonly have to keep clicking back and
| | 03:32 | forth between these tabs, you can just
locate them all in Favorites and save
| | 03:36 | yourself a little bit of time.
| | 03:37 | Let me show you what I mean.
| | 03:39 | If we right-click the Insert panel,
you notice we have the option to
| | 03:43 | Customize our Favorites.
| | 03:44 | And when we do that, we are going to
get a menu that comes up showing all of
| | 03:48 | these different objects, and then what
we are going to add to our Favorites.
| | 03:52 | So if we are going to do things like
Named Anchors a lot, for example, I can
| | 03:56 | select that, click this arrow.
| | 03:57 | It will move it over into our
Favorites. Insert Div Tags.
| | 04:00 | I do that a lot, so I am
going to go ahead add that.
| | 04:03 | Maybe inserting Images, inserting a Table.
| | 04:06 | Notice that there is no set
order that you have to go in.
| | 04:08 | You can do these in any way that you want.
| | 04:10 | What's really nice about this is you
are going to see some options that you
| | 04:13 | don't normally see up in the menu.
| | 04:15 | Inserting FlashPaper, although, I doubt a lot of
people are doing that anymore, it's still there.
| | 04:20 | We can go down through this entire listing.
| | 04:23 | And if you finish one grouping,
you can actually add a separator.
| | 04:26 | So maybe after that, I
want to do some Flash objects.
| | 04:30 | So maybe I am going to insert
Flash Video and just a SWF file, and
| | 04:34 | insert another separator.
| | 04:35 | Now, remember earlier I told you that
working on different types of pages would
| | 04:39 | cause those panels to come up.
| | 04:41 | Well, if you scroll down through
here, you can find some of those.
| | 04:44 | So for example, there are my Form objects.
| | 04:46 | Now, this is CFML, which has
to do with ColdFusion pages.
| | 04:49 | I could add those to my Favorites if I
wanted to and they would be up, even if I
| | 04:53 | wasn't working on a ColdFusion page.
| | 04:55 | So I could just keep going through
these and find XSLT, Data. There is some
| | 05:00 | really cool stuff in here.
| | 05:01 | So make sure you go through and say,
"You know what, I do a lot of Spry
| | 05:05 | work, so maybe Spry Data Set, Spry Regions,
maybe some of the Spry Validation objects."
| | 05:12 | And as I go through my HTML, maybe
Table Tags, Table Rows, Table Header Cells.
| | 05:19 | Those allow you to build
individual items within your table. Okay.
| | 05:23 | So we have got quite a
list here for our Favorites.
| | 05:25 | I am going to go ahead and click OK.
| | 05:26 | You will notice that now I get an
entirely new section here that combines a lot
| | 05:31 | of these groups together.
| | 05:32 | It gives me quick access for my Spry
Sets, my Flash Objects, and Common objects
| | 05:37 | like Tables and Div Tags that I am
going to be inserting day-to-day.
| | 05:41 | So if you like working visually or if
you are just looking for a really quick
| | 05:44 | way to generate standards-compliant,
clean HTML for complex objects, the Insert
| | 05:49 | panel is your likely panel of choice.
| | 05:51 | For new Web designers, the Insert
panel is a great way to learn how specific
| | 05:55 | objects are structured by
examining the code that they create.
| | 05:59 | By creating a Favorites section, you
could easily customize the Insert panel to
| | 06:03 | organize the objects that you use the
most and create an efficient way for you
| | 06:07 | to work within Dreamweaver.
| | Collapse this transcript |
|
|
3. Site ControlBasic site structure| 00:00 | From the time it was released, one of
the things that made Dreamweaver different
| | 00:03 | from other HTML editors was its
focus on managing sites, not just pages.
| | 00:09 | While other editors were designed to
create Web pages, Dreamweaver was designed
| | 00:13 | to create Web sites.
| | 00:14 | This focus is one of the reasons that
Dreamweaver's Site Management tools are so powerful.
| | 00:19 | In this chapter, we will discuss basic
site management within Dreamweaver, and
| | 00:23 | some of the tools you can use
to take control of your site.
| | 00:26 | No matter how powerful a program's tools
are, unless you understand the concepts
| | 00:30 | behind them, you won't be
effective when using them.
| | 00:34 | That's why the first concept I wanted
to discuss you is Basic Site Structure.
| | 00:38 | To those new to Web design, the task
of creating an entire Web site can be
| | 00:41 | intimidating at first.
| | 00:43 | The truth of the matter is the
most Web sites are quite simple.
| | 00:46 | Websites, at their core, are simply a
collection of files and folders just like
| | 00:50 | any other project on your computer.
| | 00:52 | Although every Web site is different,
some standards have emerged when
| | 00:55 | structuring your site that can help
keep your site organized and run smoothly.
| | 00:59 | To create your Web site, you'll first need
a folder on your hard drive to put it in.
| | 01:03 | This folder is referred to as your Root folder.
| | 01:06 | And later, when you define your
site, this is the folder that you'll
| | 01:09 | point Dreamweaver to.
| | 01:10 | Inside the root folder, you'll
structure your files and folders based on how
| | 01:14 | they need to appear online.
| | 01:15 | If you have a small site, for example,
all your HTML files might go right
| | 01:19 | into the root directory.
| | 01:21 | As your sites get larger, or more
complex, it's uncommon to create
| | 01:24 | subdirectories to create
more structure within your site.
| | 01:27 | You can easily see the
structure when browsing online.
| | 01:31 | If we go to lynda.com, for example, and
look at the podcasting page of the Web
| | 01:35 | site, we can see that the URL is
http://www.lynda.com/home/podcast.aspx that
| | 01:48 | means inside the Root directory
there's a folder named Home, and inside that
| | 01:52 | folder there's a file named podcast.aspx.
| | 01:56 | In addition to structuring pages this
way, most Web designers will place site
| | 02:01 | assets into their own folders as well.
| | 02:03 | It's a good way to organize the site
and make additional assets easier to find
| | 02:07 | images, css, external scripts,
videos and other assets are
| | 02:12 | routinely placed within their own folders.
| | 02:15 | For the Explore California site, our
assets will also have an underscore placed
| | 02:20 | in front of the folder name.
| | 02:21 | This helps to move these assets
folders to the top of any directory structure
| | 02:25 | and makes it easy to identify them as assets,
rather than mistaking them for a subdirectory.
| | 02:30 | The homepage of the site will sit
directly within the root directory, and is
| | 02:34 | usually named index or default
depending upon the Web server's preferences.
| | 02:38 | After that, how you structure and
organize your site is entirely up to you.
| | 02:42 | It is, however, very important to
structure your site logically and plan your
| | 02:47 | site structure in detail before you
begin creating the files for your site.
| | 02:51 | Understanding site structure
is key to managing it properly.
| | 02:54 | Most designers will map out, or wireframe
their site before creating even the first file.
| | 03:00 | This will ensure that files are created
in the right place, limit the amount of
| | 03:04 | movement site files will undergo
during the creation process, and help ensure
| | 03:08 | that the site is properly organized.
| | Collapse this transcript |
| File naming conventions| 00:00 | As you create files for the Web,
understanding the rules governing their naming
| | 00:04 | is vitally important.
| | 00:06 | If your files are not named correctly,
certain pages might become inaccessible
| | 00:09 | or just not work properly.
| | 00:11 | Remember that Web pages contain
links to other Web pages and assets.
| | 00:14 | If file naming isn't handled correctly,
your site's functionality can really suffer.
| | 00:19 | Fortunately, the rules for Web file
naming conventions are pretty easy to follow.
| | 00:24 | First, don't use any spaces in your file names.
| | 00:27 | If you have a file that is longer than
one word, use an underscore or hyphen to
| | 00:31 | separate those words.
| | 00:33 | Most Web servers will allow file
names with spaces, but when the link is
| | 00:36 | resolved, the special character
%20 is used in place of the space.
| | 00:41 | This is really messy, and can lead to
a lot of confusion when sending links
| | 00:45 | or displaying URLs.
| | 00:47 | Second, shorten the file names when you can.
| | 00:49 | Rather than aboutus.htm, how about just about?
| | 00:53 | Shorter names are easier to remember
and make URLs easier for clients to type.
| | 00:58 | Next, avoid using special characters,
no dollar signs, no exclamations
| | 01:02 | points, forward or backslashes,
question marks, periods or any other special
| | 01:07 | character or punctuation.
| | 01:09 | Many of these symbols are used to
denote things like directory structure, URL
| | 01:13 | parameters, or other meanings that
you could just unwittingly trigger.
| | 01:17 | Numbers are okay to use in file names,
just avoid using them as the first character.
| | 01:21 | Also, avoid uppercase letters, if possible.
| | 01:25 | Most Web servers won't care, but some
UNIX servers are case sensitive, and
| | 01:29 | links could not be resolved
correctly even ifspelled correctly.
| | 01:32 | When using extensions, just be
consistent. For non-dynamic Web sites, it's okay
| | 01:37 | to use either .htm or .html.
| | 01:41 | To avoid having to worry about it,
you can set up a default extension in
| | 01:44 | Dreamweaver's preferences and
Dreamweaver will resolve the extension for you.
| | Collapse this transcript |
| Defining a new site| 00:00 | When you start working on a new
project in Dreamweaver, the first thing you
| | 00:04 | should do is define a site.
| | 00:06 | The site management capabilities of
Dreamweaver are tied directly into
| | 00:10 | the site's definition.
| | 00:11 | Without defining a site, Dreamweaver
won't be able to resolve links, check
| | 00:15 | related files or help you manage your assets.
| | 00:18 | The best part about defining sites in
Dreamweaver is how simple the process is.
| | 00:22 | In fact, you only need to
know two things to get started:
| | 00:25 | first, where the local
root directory is located.
| | 00:28 | Now the local root directory is going
to be the folder on your local hard drive
| | 00:32 | or machine where your site is located.
| | 00:34 | Second, you need to know what you want
to name the site, and that's really all
| | 00:38 | you need to get started.
| | 00:39 | So I've got Dreamweaver opened here,
and I don't have any sites defined.
| | 00:43 | How do I know that?
| | 00:44 | Well, if I look at the Files panel,
I just see a link out to the desktop.
| | 00:48 | My pulldown menu doesn't
give me a listing of any sites.
| | 00:51 | Now creating a site in Dreamweaver is
extremely easy and there are a lot of
| | 00:55 | different locations for us to do that.
| | 00:57 | First, we could go up to the menu.
| | 00:59 | We could go to Site and choose New Site.
| | 01:01 | So that's one location.
| | 01:02 | Next, we can come to our Application
toolbar, to our Site Management, and we can
| | 01:06 | choose New Site there as well.
| | 01:08 | We also have the ability, on the
Files panel, to create a new site.
| | 01:11 | So if I grab the pulldown menu here,
notice that one of my options is Manage
| | 01:14 | Sites, where I could choose a New Site option.
| | 01:17 | Probably the easiest way to define a new
site is right here in the welcome screen.
| | 01:21 | So right down here where it says
Create New, we could choose Create
| | 01:24 | New Dreamweaver Site.
| | 01:25 | I'm going to go ahead and click that.
| | 01:26 | Any of those options will give us
the exact same dialog box, which is the
| | 01:30 | Site Setup dialog box.
| | 01:32 | Now this has been simplified a little
bit from previous versions, so if you're
| | 01:35 | used to using Dreamweaver, and you've
used other versions of it before, this is
| | 01:39 | going to look a little different.
| | 01:40 | Well, they've streamlined the process,
and they've made it a lot easier.
| | 01:43 | So I'm a big fan of this new site dialog box.
| | 01:46 | The first thing I'm going to do is
name my site, and I'm going to go ahead
| | 01:49 | and name it Explore California, because that
is the site that we're going to be working on.
| | 01:54 | The next thing
Dreamweaver wants to know is, "Hey!
| | 01:56 | Where is your local site folder?"
| | 01:58 | Now remember, this is going to be the
root folder on My Computer or a Local
| | 02:01 | Network. Wherever I'm going to be
doing my local development, that's what I
| | 02:05 | need to point this to.
| | 02:06 | So I'm able to just go ahead and
click the Folder icon to browse for
| | 02:09 | that particular site.
| | 02:11 | Now if you're working with the
exercise files like I am, I've copied them
| | 02:15 | over to my desktop.
| | 02:16 | So I'm going to go to my Desktop,
find my Exercise Files and open that up.
| | 02:19 | I'm going to open up the
Chapter_03 folder and go to 03_03.
| | 02:25 | That's the current movie that we're on,
and I'm just going to open that up and
| | 02:29 | hit the Select button.
| | 02:30 | Now on the Mac, it'll say Choose.
| | 02:32 | On the PC, it'll say Select, but
they mean exactly the same thing.
| | 02:35 | So I'm just going to go ahead and select.
| | 02:37 | Now believe it or not, that is all I
need in Dreamweaver to define a local site.
| | 02:41 | Now there is more information
surely that we can fill out.
| | 02:44 | If you'll notice, we have a set of
categories over here on the left-hand side.
| | 02:47 | Servers give us an
opportunity to add remote servers.
| | 02:51 | These could be testing servers,
production servers or live Web servers.
| | 02:55 | Now we'll cover head and set those up
a little bit later on this title, but
| | 02:59 | you'll do it in the exact same dialog box.
| | 03:01 | We also have Version Control.
| | 03:03 | If you're using a product like
subversion, for example, to do Version Controls
| | 03:06 | of your site, that's where you
would go to set those settings up.
| | 03:09 | We also have the Advance Settings
area where we can choose more information,
| | 03:13 | like the Default Images directory,
Resolved Links, choose Cloaking to choose
| | 03:18 | which files get uploaded and which files don't.
| | 03:20 | There's a lot of extra information there.
| | 03:22 | But again, that's not what you need
in order to define your first site.
| | 03:25 | You only need those two things.
| | 03:28 | Now we'll talk about most of
these settings a little bit later on.
| | 03:30 | I'm going to go back to my initial
Site Setup dialog box and choose Save.
| | 03:35 | What Dreamweaver will do now
is it'll cache up the site.
| | 03:38 | It'll happen a little quicker for some
sites; for larger sites it may take a
| | 03:42 | little bit longer, but now over in
the Files panel, I can see there's my
| | 03:46 | Explore California site.
| | 03:47 | Now if I define multiple sites within
Dreamweaver, I can use this pulldown menu
| | 03:51 | to switch between one site and the next.
| | 03:53 | But right now, I simply have the
single Explore California Web site defined.
| | 03:57 | You'll also notice, and I'm just
going to move this panel up a little bit,
| | 04:00 | you'll notice that I'm seeing the
files and folders within a particular
| | 04:04 | directory that we defined
when we created the site.
| | 04:07 | So as you can see, defining a site in
Dreamweaver is an easy but extremely
| | 04:11 | necessary step required for
the start of any new project.
| | 04:16 | You can give Dreamweaver all the site
information at the very beginning of the
| | 04:19 | project, or you can do what we just
did; wait and define things like Remote
| | 04:23 | Information at a later date.
| | 04:24 | That's especially helpful, if you don't
have those settings when you're starting
| | 04:28 | out with your new site.
| | 04:29 | Just be sure to make defining
a site the first step in any new
| | 04:33 | Dreamweaver project.
| | Collapse this transcript |
| Managing sites| 00:00 | If there is one constant in this
world, it's that things change.
| | 00:03 | It's not uncommon to need to add or modify
the information of a site as you work on it.
| | 00:08 | It's also not uncommon to have your
Files panel crowded with older sites that
| | 00:12 | are archived or no longer current projects.
| | 00:14 | To deal with these types of situations,
you'll need to understand a little about
| | 00:18 | site management in Dreamweaver.
| | 00:20 | Managing your sites in Dreamweaver is
extremely easy, and all the information is
| | 00:24 | right there at your finger tips.
| | 00:25 | We are going to examine a few ways to
access the Site Management dialog box,
| | 00:29 | take a look at its capabilities and then talk
about what we can do when we edit our sites.
| | 00:34 | To access Site Management, one of
the easiest ways is to use the menu.
| | 00:38 | So if I go up to the menu and I got
to Site, we'll notice that we have the
| | 00:41 | option to Manage Our Sites.
| | 00:42 | We can also find that in
the Application toolbar.
| | 00:45 | So if I go right over to the
Application toolbar, grab the pulldown menu,
| | 00:48 | you'll also see Managing Sites there.
| | 00:50 | The Files panel gives us another option.
| | 00:52 | So if we go to our Files
panel, grab the pulldown menu,
| | 00:55 | you'll notice that down there, at the very
bottom, we have a link for Managing Our Sites.
| | 00:58 | So whichever way you
want to access that is fine.
| | 01:01 | It will open up the exact same dialog box.
| | 01:04 | Now when you open up the Manage Sites
dialog box, you are going to see a listing of all
| | 01:07 | the sites you have currently
defined within Dreamweaver.
| | 01:10 | At this junction, I don't have a
single site, but it's not uncommon to see an
| | 01:13 | entire list of sites there, depending
upon exactly what you are working on.
| | 01:17 | Now, we have a lot of options for these sites.
| | 01:19 | Notice that we can create a New site.
| | 01:21 | We can Edit an existing one.
| | 01:22 | We can Duplicate it.
| | 01:24 | We can Remove it entirely.
| | 01:25 | So if its old site, you can archive it,
if you are not working on it anymore,
| | 01:28 | you can remove it from your definitions.
| | 01:30 | Then you have these two very
interesting options here: Export and Import.
| | 01:34 | If you are moving from one machine to
another, this is a really nice way of working.
| | 01:38 | You can Export out your Site
definition and then import that site definition.
| | 01:41 | As long as your root directory remains
in the same place, Dreamweaver is going
| | 01:44 | to pull in all that
information and keep everything constant.
| | 01:47 | Now, let's say you want to edit a site.
| | 01:49 | I am going to select my Export
California site and click the Edit button.
| | 01:53 | Now, this is going to bring the
Site Setup dialog box back up again.
| | 01:56 | So this is exact same dialog box
that we saw when we defined this site.
| | 02:00 | Now, let's say, at this point, we
want to change some information or add
| | 02:04 | some information to it
| | 02:05 | because when we define the site, we
really only gave it a name and pointed it to
| | 02:09 | the local root folder.
| | 02:10 | So I am going to click on the Advanced
Settings category over here on the left-hand side.
| | 02:15 | There are a couple of
things that we can do here.
| | 02:16 | The first thing, for example, is to
define where the Default Images folder is.
| | 02:20 | You want to do that because if
Dreamweaver ever has to create some graphics for
| | 02:24 | you based on some widgets that you
placed on the page, for example, or some of
| | 02:28 | the other objects that you can place on a page,
| | 02:30 | Dreamweaver now knows
where to place those images.
| | 02:33 | So I am just going to click my Browse icon.
| | 02:35 | It will go right into my root directory,
and I could find the _images directory.
| | 02:39 | I am going to double-click that, and
I'll hit the Select button. Again, on the
| | 02:42 | Mac, that button will say Choose.
| | 02:44 | I can also choose whether I want to make
my Links Document or Site Root relative.
| | 02:48 | We'll talk more about
that in the chapter on Links.
| | 02:49 | But right now, I am just going
to leave it as document relative.
| | 02:53 | We can also set a Web URL.
| | 02:55 | For our Web site, I am going to
type in www.explorecalifornia.org.
| | 03:01 | It's going to be the URL of our Web
site when we are finished with it and ready
| | 03:05 | to upload it online.
| | 03:06 | If you don't have that information
yet, it's okay to leave that blank.
| | 03:09 | That's just going to help us resolve the
absolute links that we might add to our site later on.
| | 03:14 | Now, let's talk briefly about some
of the other categories in the Advanced
| | 03:17 | Settings here on the left-hand side.
| | 03:19 | We have Cloaking, and you can use
Cloaking to hide certain file types when you
| | 03:22 | upload your sites, so that your
Photoshop files, for example, or your Word
| | 03:25 | documents don't get uploaded to the Web server.
| | 03:28 | We have Design Notes that allows to
work in a collaborative environment
| | 03:31 | with other team members.
| | 03:32 | We can pass notes back and forth
to each other through our pages.
| | 03:35 | And Below File View Columns, we
have Contribute, Templates and Spry.
| | 03:39 | Now, these are fairly proprietary.
| | 03:40 | Contribute, for example, is companion
product to Dreamweaver and allows you to
| | 03:43 | edit your site through the Contribute client.
| | 03:46 | This would allow you to manage those settings.
| | 03:48 | It is really only applicable
if you are using that product.
| | 03:51 | We also have options for Templates.
| | 03:53 | We can also tell Dreamweaver exactly
where to place any Spry Assets, such as
| | 03:58 | External JavaScript in CSS files
necessary for any Spry widgets we add to our site.
| | 04:02 | So yeah, there is a lot of information there.
| | 04:04 | Well, once you are done making your changes,
| | 04:06 | we are just going to click Save,
and it's going to re-cache our site.
| | 04:11 | We can click Done, and we are
finished with our editing process.
| | 04:14 | Now, if you are looking for a faster
way to bring that dialog box back up, you
| | 04:18 | don't have to go through all those
menu structures that I showed you earlier.
| | 04:21 | In fact, you can go right over to your
Files panel, find the name of your site
| | 04:24 | and simply double-click it.
| | 04:25 | That's a very quick and easy way
to access the Site Setup dialog box.
| | 04:30 | I think, like me, that's
probably what you'll do most frequently.
| | 04:33 | I am just going to hit Cancel because we
are not going to make any additional edits.
| | 04:36 | Now, chances are you will need to
do a lot of work managing your sites,
| | 04:40 | but knowing that Dreamweaver makes any
changes you need to make to your site
| | 04:43 | definitions quick and easy allows you
not too worry about updating your
| | 04:47 | site and concentrate,
instead, on creating your content.
| | Collapse this transcript |
| Managing files and folders| 00:00 | If you are like me, when you work on
a site, you're constantly creating new
| | 00:03 | files and folders, renaming files,
and moving files around within your
| | 00:07 | directory structure. Now let's face it.
| | 00:10 | No matter how well you plan your site,
chances are you are going to modify the
| | 00:14 | directory structure at one time or another.
| | 00:16 | To make these kinds of changes to your site,
I strongly recommend using the Files panel.
| | 00:21 | The Files panel can be used to create
new files and folders, rename files, move
| | 00:26 | files and folders, copy and
paste files. You name it.
| | 00:29 | Now, the Files panel is part of
almost every single workspace, but it's
| | 00:34 | available in the Windows menu.
| | 00:35 | So you can just go to Window and
choose Files, if for any reason it closes.
| | 00:39 | You'll also notice that the hotkey for it is F8.
| | 00:43 | Now for our Files panel for this lesson,
what I'm going to do is I'm going to
| | 00:46 | expand this out a little bit.
| | 00:47 | You can grab the dividing line
| | 00:49 | if you have a File open, but right there,
I'm just going to expand this out a little bit more.
| | 00:52 | You can see there's a lot more
information out here on the side, but it also
| | 00:55 | allows me to change these dividers, so
that I can read the file name a little
| | 00:58 | bit better, or maybe choose what type of
file it is. So you've got the option to
| | 01:03 | change these columns any way that you want.
| | 01:05 | I'm just going to make my File panel a
little bit beefier for what we're doing here.
| | 01:09 | Now, I recommend using the Files
panel because not only is it the most
| | 01:12 | efficient way to make these changes within your
site, it's also the safest way to do it as well.
| | 01:16 | Websites, by their very nature, rely
on understanding where other files are.
| | 01:22 | When you place an image on the page
or a link to another file, Dreamweaver
| | 01:26 | places code on your page that tells
the browser where it can find that
| | 01:30 | particular file to resolve
the link or display the image.
| | 01:34 | If you move a file and don't update the
links to it, those links will no longer
| | 01:38 | work, or in the case of an image,
the image will no longer display.
| | 01:42 | That's especially problematic for
larger sites, where dozens of pages might
| | 01:46 | link to a single page.
| | 01:48 | Making all those changes
manually would take considerable time.
| | 01:52 | But if you remember to use the Files
panel to make these changes, Dreamweaver
| | 01:56 | will automatically update all of the
links on that page, as well as any pages in
| | 02:00 | your site that link to it.
| | 02:01 | Let's take a closer look
at using the Files panel.
| | 02:04 | So one of the cool things that the
Files panel can do for us is create new
| | 02:07 | pages and new folders directly
from within the Files panel itself.
| | 02:11 | Let me show you what I mean.
| | 02:13 | If I go up to the root folder, which
is at the very top of your directory
| | 02:16 | listing, and right-click, notice that my
top two options are New File and New Folder.
| | 02:20 | Let's say I create a new file.
I get an untitled .html file down here.
| | 02:25 | Now I'm just going to call it test.
| | 02:28 | It's a totally empty file.
| | 02:29 | If I double-click it, for example,
you'll notice that it's a brand new document,
| | 02:32 | nothing on the page, and if I go to
Code View, it's based on the preferences
| | 02:36 | that we have for our new documents,
which I'll show you guys how to set those a
| | 02:40 | little bit later on.
| | 02:41 | Now in addition to creating files,
you can manage them from here as well.
| | 02:44 | You don't really need this page, so I
can go right back to my Files panel,
| | 02:48 | right-click the brand new page that we created.
| | 02:49 | I can choose Edit > Delete.
| | 02:53 | Now that is going to physically
delete it off of your computer, not just remove
| | 02:56 | it from Dreamweaver.
| | 02:57 | So any time that you do that, remember
that you are dragging that to your Trash
| | 03:00 | or your Recycle Bin.
| | 03:01 | You are literally getting rid of that file.
| | 03:03 | Now let's say you need to do some basic file
management like renaming a file, for example.
| | 03:08 | I'm going to go over to my Files panel,
and I'm going to open up the tours directory.
| | 03:13 | Inside that, I can see that this page,
tourDetail_bigsur, is a little different
| | 03:19 | than the other ones.
| | 03:20 | It's using camel case naming for tour detail.
| | 03:22 | I want to avoid doing that. Just in case
this is ever placed on a UNIX server,
| | 03:26 | I don't really want to deal
with any case sensitive links.
| | 03:29 | So I'm going to click once on the
file name and then once on it again.
| | 03:33 | Now if you double-click too fast, it,
of course, is going to open the file.
| | 03:36 | So you just want to be
very careful about doing that.
| | 03:39 | I'm going to click right inside that
and change that to tour_detail with
| | 03:43 | lowercase D, and as soon as you hit
Return, it's going to make that change.
| | 03:47 | Watch what else it does.
| | 03:49 | So I just want to hit Return, and now
Dreamweaver is saying, "Hey, wait a second.
| | 03:52 | "There were other files linking to that page
and they're going to be linking to the old name.
| | 03:58 | "Do you want me to go ahead and update
links on those pages, so that they reflect
| | 04:02 | the name that you just gave it?"
| | 04:03 | Well, yes, of course, I want to do
that, so I'm going to click Update, and
| | 04:06 | that's going to go ahead and update all
those links automatically for me, and I
| | 04:09 | didn't have to lift a finger.
| | 04:11 | That was extremely handy.
| | 04:13 | Now, I notice, looking at my directory
structure here, there is one more thing I need to do.
| | 04:17 | The gallery page and the join page are
all part of the explorer's section and
| | 04:23 | once you start getting two or three
pages that relate to a section, it's not a
| | 04:27 | bad idea to go ahead and create a
directory to store those in, just like we've
| | 04:30 | done with tours here.
| | 04:32 | So I'm going to go right back up to
my Files panel, right-click the root
| | 04:35 | directory, and I'm going to choose
New Folder, and after New Folder,
| | 04:39 | I'm going to go ahead and
title this folder explorers.
| | 04:41 | Notice I use the lowercase E, and I
didn't put an underscore in front of it,
| | 04:45 | indicating that it is a
subdirectory of the site and not an asset
| | 04:49 | subdirectory, as we have here.
| | 04:51 | Okay, so here's my explorer folder.
| | 04:53 | It's totally empty right now.
| | 04:54 | I need to add some things to it.
| | 04:56 | So I'm going to choose the gallery
page, and I will hold my Ctrl key down.
| | 04:59 | That would be the Command key on the Mac,
and selected the join page as well, so
| | 05:03 | that I'm selecting those non-contiguous pages.
| | 05:05 | I'm going to go ahead and grab
those and move them into my brand-new
| | 05:09 | explorers directory.
| | 05:11 | Once again, when I do this,
Dreamweaver is going to say, "Wait a second."
| | 05:14 | When you move those, all the pages
that link to that, and indeed the links on
| | 05:18 | those pages, are no longer being
resolved correctly, because now, they have to
| | 05:22 | go inside a folder to find it, and now,
any links from those pages have to go
| | 05:25 | outside of the folder to find those.
| | 05:27 | So Dreamweaver offers me the
opportunity to go ahead and fix all of those
| | 05:31 | problems site-wide right now.
| | 05:33 | So I'm going to go ahead
and do that and choose Update.
| | 05:35 | Now why would you choose Don't Update?
| | 05:37 | Well, sometimes you might be moving
a file or a folder around that uses a
| | 05:41 | different type of link, for example, a
site root-relative link, or maybe you're
| | 05:45 | just moving assets, and you don't
need Dreamweaver to update it for you.
| | 05:48 | So sometimes that is a viable option,
although in this case, we definitely
| | 05:52 | want to choose Update.
| | 05:53 | So I'm going to go and choose Update.
Now it's going to go ahead and fix all
| | 05:56 | that for me. Now I have a subdirectory,
gallery and join are inside that, and
| | 06:00 | now all the links to those files will
work, and the links coming out of those
| | 06:03 | files will work as well.
| | 06:05 | So as you can see, the Files panel
can save you a tremendous amount of
| | 06:09 | time when managing your files and folders, as
well as save you from making costly mistakes.
| | 06:14 | Of course, that's not
all the Files panel can do.
| | 06:17 | Later in this title, we'll discuss
using the Files panel to upload files and
| | 06:20 | manage site synchronization.
| | 06:22 | For now, however, concentrate on making
sure that you practice discipline when
| | 06:26 | needing to make changes on your site.
| | 06:28 | Make those changes from within
Dreamweaver using the Files panel, and you'll be
| | 06:33 | confident of making those changes correctly.
| | Collapse this transcript |
| Working with browsers| 00:00 | As a Web designer, one of the toughest
things to learn is that your design is
| | 00:04 | always at the mercy of the users' browsers.
| | 00:06 | Your site's visitors have a lot of
browsers to choose from, like Internet
| | 00:09 | Explorer, Firefox, Safari,
Opera, and Google's Chrome.
| | 00:14 | Knowing that so many different
browsers will render your pages, it's always a
| | 00:17 | smart idea to test them in
as many browsers as you can.
| | 00:21 | This can prevent rendering errors
from one browser to the next and help you
| | 00:24 | ensure a consistent experience
for all visitors to your site.
| | 00:28 | Dreamweaver allows you to set up
multiple browsers for testing and also gives
| | 00:32 | you an internal testing
environment using Live View.
| | 00:35 | So here, I have our Index Page open, and
I want to talk about using Live View first.
| | 00:40 | Now, Live View uses the integrated WebKit
rendering engine directly inside of Dreamweaver.
| | 00:45 | WebKit is an Open Source browser-
rendering engine, used to power such browsers
| | 00:50 | as Google's Chrome and Apple's Safari browser.
| | 00:53 | So if I click on the Live View icon,
what that's going to do is it's going to
| | 00:57 | take my page, render it using WebKit
and preview it in the Design view.
| | 01:01 | So this is almost like previewing
it in the browser directly within
| | 01:05 | Dreamweaver, and it's a really nice feature.
| | 01:07 | But it still doesn't replace
actually testing within the browser itself.
| | 01:11 | To do that, we have a couple of options.
| | 01:14 | First, on the Document toolbar, we have
this little Planet icon here that allows
| | 01:18 | us to preview in any browser that we've set up.
| | 01:21 | You can see currently, I really only
have Firefox and Internet Explorer set up.
| | 01:25 | Certainly, there are more browsers
than that, and really, any browser that you
| | 01:29 | have installed on your system you can
go ahead and add to that list, and there
| | 01:32 | are a couple of different ways to do that.
| | 01:34 | You'll notice that we have a link
right here that says Edit browser List.
| | 01:37 | That's probably the quickest and
fastest way to get there, but you could also
| | 01:41 | go through Dreamweaver's Preferences.
| | 01:43 | So if I go up to the menu and I go to
Edit and choose Preferences, on the Mac,
| | 01:47 | you'll go to Dreamweaver and choose Preferences,
| | 01:50 | I notice that right down to my
Category list, here's Preview in browser.
| | 01:55 | This actually gives me more options
than just adding new browsers, but that's
| | 01:59 | the first thing I want to do.
| | 02:00 | I want to add Google's Chrome browser.
| | 02:03 | Now, for you guys following along at
home, if you don't have Google's Chrome,
| | 02:06 | you can just go download it and install it.
| | 02:08 | I want to do the same thing for Apple's
Safari's browser, or really, any browser you want.
| | 02:13 | It doesn't matter which browser you're
using; all it's required is that it's
| | 02:16 | installed on your system.
| | 02:17 | So I'm going to click the Plus symbol
right here to add a new browser, and I'm
| | 02:22 | just going to call it Chrome,
and I'm going to browse for it.
| | 02:25 | Now, Google makes this work for this one.
| | 02:27 | Instead of being in the Program Files,
where we would normally find this, I'm
| | 02:31 | going to have to browse.
| | 02:33 | So I need to browse up to my user
name, James Williamson, and I'll find a
| | 02:37 | folder called Application Data.
| | 02:38 | Now if you're using Windows,
that may be hidden from you.
| | 02:40 | You going to have to go find that.
| | 02:42 | This, of course, is only if
you are using Google's Chrome.
| | 02:44 | I'm going to go to Application Data/Local/
Google/Chrome/Application, and there it is.
| | 02:52 | For the engineers in Google, thank you
for putting it there on the hard drive,
| | 02:56 | rather than in the Program Files.
| | 02:58 | I'm going to go ahead and click Open,
and notice that I can make this my primary
| | 03:02 | or my secondary browser.
| | 03:04 | I'm going to click OK, but I want
to talk about that for a moment.
| | 03:07 | With your browser listings here, you
can have primary and secondary browsers.
| | 03:11 | Really, all that does for you is assign hotkeys.
| | 03:14 | Notice, for example, that Firefox has
the hotkey of F12, and if I wanted to make
| | 03:18 | Chrome, for example, my secondary
browser, now that would be Ctrl+F12 or
| | 03:23 | Command+F12 on the Mac.
| | 03:25 | Now we do have an option to preview
using a temporary file, but that really is
| | 03:28 | only something you need to worry about
if you're working with dynamic files like
| | 03:32 | PHP or ColdFusion-based files.
| | 03:34 | For static HTML files, you never have
to worry about that particular option.
| | 03:38 | I'm just going to go ahead and click OK,
and now if I go up to my Preview Debug
| | 03:43 | in browser listing, there's Chrome.
| | 03:46 | So I could choose to Preview it in
Chrome, and there's my next page in Chrome,
| | 03:50 | or I can come back and
choose Preview in Firefox.
| | 03:53 | It's going to open it up in Firefox.
| | 03:55 | Of course, remember, you
did assign those hotkeys.
| | 03:58 | So if I just go back into
Dreamweaver and press F12, it's going to
| | 04:02 | automatically launch the current page
that I'm working on in Firefox for me,
| | 04:05 | so that's pretty cool.
| | 04:07 | Now previewing your pages as you're
working on them, that's going to help you
| | 04:10 | prevent small errors from
becoming bigger errors later on.
| | 04:14 | It helps ensure a consistent
experience for all your users.
| | 04:17 | Adobe does have one more trick up in
its sleeve for previewing your pages.
| | 04:21 | You may have noticed in this listing
that we also have this option to Preview
| | 04:25 | in Adobe BrowserLab.
| | 04:27 | browserLab is a new online service by Adobe.
| | 04:30 | That allows you to test your pages in
multiple browsers at once, and it's great
| | 04:34 | for testing across multiple platforms
and browsers you may not have access to.
| | 04:38 | It's a more robust feature, and it's
one that we're going to explore later on
| | 04:41 | in its own movie.
| | Collapse this transcript |
|
|
4. Creating New DocumentsCreating new documents| 00:00 | After defining your site, the next
logical step in creating Web sites is to
| | 00:04 | begin creating new Web pages.
| | 00:06 | As a common task, Dreamweaver has
many different ways to create new pages.
| | 00:11 | Some are designed to be fast and
result in a new page, based on your default
| | 00:14 | document preferences.
| | 00:16 | Others require more manual input,
but give you a wider array of options
| | 00:20 | regarding your new document.
| | 00:22 | In this movie, we'll explore
Dreamweaver's New Document creation capabilities,
| | 00:26 | so that you can make sure the pages
you're creating are conforming to the
| | 00:29 | standards required for your site.
| | 00:31 | Now one of the easiest ways to create a
brand-new page in Dreamweaver is just to
| | 00:35 | use the Welcome Screen.
| | 00:36 | This middle column right here
gives us an option of creating array of
| | 00:40 | different page types.
| | 00:41 | Let's say we want a new HTML page.
| | 00:43 | We're a single click away from getting that.
| | 00:45 | So I'm going to say Create New
HTML, and there is my brand-new page.
| | 00:49 | You'll notice that there really isn't
anything there except for some basic structure,
| | 00:53 | but we have a brand-new page that we've
created that we could begin adding content to.
| | 00:57 | Now I'm not going to save that.
| | 00:59 | I'm just going to go ahead and close
it out and cover some of the other ways
| | 01:02 | that we can create new
pages in Dreamweaver as well.
| | 01:05 | If we go over to the Files panel, I can
right-click our root directory, and one
| | 01:09 | of the first options is New File.
| | 01:12 | I can go ahead and click on that, and
this time, instead of just opening up that
| | 01:15 | page, what happens is that we get a
brand-new page over in our Files panel, and
| | 01:20 | we get an opportunity to name that file.
| | 01:22 | So I'm just going to go
ahead and name it index.html.
| | 01:25 | Now you'll notice that it didn't
ask us to choose the extension.
| | 01:28 | It went ahead and placed
the .html on there for us.
| | 01:31 | Well, that had everything to do
with our new document preferences.
| | 01:34 | We're going to explore how to
set those a little bit later on.
| | 01:37 | So now we have a brand-new
blank page named index.html.
| | 01:40 | That didn't require us to
open up a page and then save it.
| | 01:43 | So that might be a little faster.
| | 01:45 | Now you'll notice that both of those
options didn't really give us any chances
| | 01:49 | to customize this page or
change any of the settings.
| | 01:52 | It just opened up a brand-new page.
| | 01:54 | So what you do if you need
a little bit more control?
| | 01:57 | Well, let's go up to the menu.
| | 01:58 | Let's go to File and choose New.
| | 02:00 | Now this gives us a much larger dialog box.
| | 02:04 | Now, this can be a little intimidating at first.
| | 02:06 | So let's just take it a bit at a time.
| | 02:08 | We're going to start on left-hand inside
and take a look at some of the options here.
| | 02:12 | Notice that we can open up a Blank Page,
choose a Blank Template, which will
| | 02:16 | create a new template for us,
create a new page from Template.
| | 02:19 | So in this case, if your site already
had some templates created, you could
| | 02:22 | generate a new page based on those templates.
| | 02:24 | We also have Sample pages in
Dreamweaver that you can build pages off of.
| | 02:29 | Now, don't think of these so much as
starter pages, more of just sort of a
| | 02:32 | default style sheet.
| | 02:33 | It's already created with
some elements on the page.
| | 02:35 | We have this very curious Other category.
| | 02:38 | Now this allows you to create
some pretty interesting Page Types.
| | 02:42 | If you're programming C#, for example,
or writing some ActionScript remote
| | 02:46 | files, you can do that directly in
Dreamweaver by creating those Page Types.
| | 02:50 | So that's pretty cool.
| | 02:51 | Now I'm going to go back to Blank Page.
| | 02:54 | Then I notice in the second column
that I can choose which Type of Page:
| | 02:57 | HTML, CSS, JavaScript, PHP.
| | 03:01 | We have a lot of different
Page Types available to us here.
| | 03:03 | We're going to stick with HTML.
| | 03:06 | Then that moves us to the third column
where we have choices for our Layout.
| | 03:10 | Now if you're brand-new to CSS, or if
you're just looking for way to sort of
| | 03:14 | speed up creating page layouts, this is
a nice way to go, because we have choices
| | 03:19 | of 1 column, 2 column,
and 3 column page designs.
| | 03:23 | So if you click on one of those
categories, you can actually see a preview of
| | 03:25 | what that Page Layout is going to look like.
| | 03:27 | Now we're going to talk about the CSS
starter pages in more detail a little later on.
| | 03:31 | So for right now, I'm just
going to None for the Layout.
| | 03:34 | Now some people don't pay a whole lot of
attention to what's available to us in the
| | 03:38 | fourth column, but it's probably the
most important choice that we're making.
| | 03:42 | Notice that down here in the lower
right corner, we have a pulldown menu for
| | 03:45 | DocType declaration.
| | 03:47 | Now if you're new to Web Design, you are
probably unfamiliar with the term DocType.
| | 03:52 | So if I grab that pulldown menu,
notice that we can assign a Document Type
| | 03:56 | Declaration spanning all the way
from HTML 4.0 through XHTML to HTML 5.
| | 04:02 | So what does the Document Type
Declaration do for you anyway?
| | 04:05 | We'll, it's a line of code at the very
top of your page that essentially tells
| | 04:09 | whatever user agent you're using
what type of code to expect.
| | 04:14 | That way, it knows the rules for your code.
| | 04:16 | It's going to make sure that it
displays it correctly based on
| | 04:19 | correct formatting.
| | 04:20 | Now, the most common Document Type
Declaration at the moment is XHTML 1.0
| | 04:24 | Transitional, although,= we are
trending to an HTML 5.0 Document standard,
| | 04:29 | so it's really nice to see
Dreamweaver CS5 supporting that.
| | 04:33 | So I'm just going to
choose XHTM 1.0 Transitional.
| | 04:36 | Now, there is a one more
option that we can choose here.
| | 04:39 | If you're working with a site
that's already been established, you may
| | 04:42 | already have external style sheets that
you're going to be using for your site.
| | 04:46 | You could use this link to quickly
Attach that Style Sheet to your page before
| | 04:50 | you actually to put content on it.
| | 04:51 | So it's a nice way of
saving a little bit of time.
| | 04:54 | I'm just going to go ahead and hit Create.
| | 04:55 | Now we have a brand-new page.
| | 04:57 | If I switch over to Code view, I can
see there is the Document Type Declaration
| | 05:01 | that we chose when we created our new file.
| | 05:03 | So now that we understand all the
different methods of creating new files in
| | 05:06 | Dreamweaver, and the choices that we're
presented with, we're going to explore
| | 05:10 | setting those choices as preferences
for any new documents in our next movie.
| | Collapse this transcript |
| New document preferences| 00:00 | Based on the method used for creating
new documents, Dreamweaver often makes a
| | 00:04 | lot of the key decisions for
you as it creates a new page.
| | 00:07 | Whenever starting a new project or when
page requirements in your site changes,
| | 00:12 | it's a good idea to take a few moments
to set up your New Document Preferences,
| | 00:16 | so that Dreamweaver will create new
pages to the proper specification.
| | 00:20 | So to find our New Document
Preferences, we're going to open up
| | 00:22 | Dreamweaver's Preferences.
| | 00:24 | Now on the PC, you can find this under
Edit > Preferences and on the Mac, you'll go
| | 00:28 | to Dreamweaver > Preferences.
| | 00:30 | From the categories on the left
-hand side, just go to our New
| | 00:33 | Document Preferences.
| | 00:35 | Now there aren't very many options
here, but the options that we have are
| | 00:38 | extremely important.
| | 00:40 | One of the first options
we see is Default document.
| | 00:43 | If you happen to work on a different
type of site, such as a dynamic site, for
| | 00:46 | example, you can choose PHP or ColdFusion.
| | 00:50 | We're going to stick with HTML, because
we're going to be creating static HTML
| | 00:53 | documents for our Explore California site.
| | 00:55 | The next choice is Default extension.
| | 00:58 | You'll notice that, currently, it set to .html.
| | 01:01 | Now there is nothing wrong with
.html versus .htm, but I really prefer to
| | 01:06 | do .htm for my sites.
| | 01:08 | So I'm going to go ahead and
remove the L, and just leave it as .htm.
| | 01:13 | We can also choose a Default Document Type.
| | 01:15 | So if you've decided that you are
going to work with HTML 4.0 Transitional
| | 01:20 | or HTML 5, you could choose one of
those and the proper Document Type
| | 01:24 | Declaration will be added.
| | 01:26 | For Explore California, we're going to
used XHTML 1.0 Transitional, which is
| | 01:30 | pretty much the most common
Document Type Declaration used.
| | 01:33 | Now we also have some choices below that
that probably won't be used quite as much.
| | 01:38 | For example, our Default encoding is
Unicode (UTF-8), and really, the only time
| | 01:45 | you're going to need to change that is
if you're working in a foreign language
| | 01:48 | site, such as Kanji, or Cantonese, or something
that requires a different encoding.
| | 01:53 | Now the only other option that you're
probably going to want to set is right down here.
| | 01:57 | We have little check box that says,
Show New Document dialog box on Ctrl+N. So,
| | 02:03 | Ctrl+N or Command+N is the
keyboard shortcut to create a New Page.
| | 02:07 | If you leave that checked, every time
you hit the keyboard shortcut, you're
| | 02:11 | going to get the New Document dialog box,
which gives you all of those choices
| | 02:15 | and options for creating a New Document.
| | 02:17 | If you'd rather just go ahead and
quickly create a New Document based on the
| | 02:21 | Preferences that you've set here,
you could uncheck that check box.
| | 02:24 | So now with that deselected, if I
click OK, now if I choose Ctrl+N or Command+N,
| | 02:31 | I get a brand new document
based off of those specifications.
| | 02:35 | That's a very quick and easy way to get
a new document, if you don't need to go
| | 02:39 | through all of those options that the
New Document dialog box provides us.
| | 02:43 | So setting these Preferences at the
start of our project will really speed up
| | 02:48 | new document creation by having
Dreamweaver create new documents that fit your
| | 02:52 | specifications without requiring your input.
| | 02:56 | When you switch projects or change
standards, it's equally as easy to make a
| | 02:59 | few minor preference changes to ensure
that Dreamweaver is creating documents
| | 03:03 | the way you need it to.
| | Collapse this transcript |
| Setting accessibility preferences| 00:00 | Before starting any new project, there are
few settings that you want to review and set.
| | 00:05 | They're going to be specific to that site.
| | 00:07 | None of those settings are as
potentially important as Accessibility.
| | 00:11 | In simple terms, Accessibility refers to how
your site's content is accessed by all users.
| | 00:17 | It's easy to get in the mindset of
designing specifically for browsers, but the
| | 00:22 | truth of the matter is that
browsers are only one of the client types
| | 00:25 | potentially accessing your site's content.
| | 00:28 | Mobile devices, tablets, and screen
readers are just a few of the devices that
| | 00:32 | can access your content.
| | 00:33 | While it's obviously a good idea to
provide your content to everyone who
| | 00:37 | tries to access it,
| | 00:39 | in some cases, it's also the law.
| | 00:41 | Section 508 of the Americans with
Disabilities Act states that any Web site
| | 00:46 | paid for with federal funds needs to
meet standard accessibility guidelines.
| | 00:50 | Now the good news is that making
your content accessible isn't difficult.
| | 00:55 | It just requires your attention
throughout the design process.
| | 00:58 | To make it even easier for you,
Dreamweaver has many built-in preferences that
| | 01:03 | assist you in making your documents accessible.
| | 01:05 | In this movie, we're going to take a
quick look at setting your Accessibility
| | 01:09 | Preferences in Dreamweaver to
automate many of the accessibility-related
| | 01:13 | tasks for your site.
| | 01:15 | So we're going to go back to our Preferences.
| | 01:17 | So I'm just going to go up
to Edit and choose Preferences.
| | 01:19 | On the Mac, you go to
Dreamweaver and choose Preferences.
| | 01:23 | I want to click on the Accessibility
Category, right up here towards the top.
| | 01:27 | You can see, it's not many choices.
| | 01:29 | As a matter of fact, we basically just
have check boxes that tell Dreamweaver,
| | 01:34 | "Yes. Go ahead and show me the
Accessibility attributes when I'm inserting any
| | 01:38 | "type of a Form object, Frame, any
type of a Media object, such as video, or
| | 01:44 | any Images on the page."
| | 01:46 | So I'm going to go ahead and just
leave the default settings, which are
| | 01:49 | actually all those guys checked.
| | 01:51 | I'm going to click OK.
| | 01:53 | I'm just going to scroll down a little
bit further down the page and click right
| | 01:57 | after our last paragraph.
| | 01:59 | I'm going to go ahead and
insert an image on the page.
| | 02:01 | There are a lot of different ways to do
that, but one of the easiest is just to
| | 02:04 | come up to our Common
objects in the Insert panel.
| | 02:07 | I'm going to choose Insert > Image.
| | 02:10 | Then I'm going to browse
to my _images directory.
| | 02:13 | So let's say we want to
place an image on the page.
| | 02:15 | Let's say this beach_yoga.jpg.
| | 02:18 | So I'm going to click OK, but
notice before I see the image on the page,
| | 02:23 | Dreamweaver is going to bring up the
Accessibility Attributes for that image.
| | 02:27 | One of the things it would like to know is
what Alternate Text would I like for that image.
| | 02:31 | So I could type in
something such as beach yoga.
| | 02:33 | That's going to help me meet
Accessibility requirements for that image.
| | 02:38 | Now if those are turned off, I'm
going to go ahead and delete the image.
| | 02:41 | Go back to my Preferences, and turn that off.
| | 02:44 | Now again, if I want to insert that
image on the page, and this time when I
| | 02:48 | click OK, I get no dialog
box, or no warning whatsoever.
| | 02:53 | Now it's incredibly important that
all of your Images have what's called
| | 02:56 | Alternative, or Alt Text.
| | 02:58 | So we want to Alt tag all of our
images, so that we're meeting those
| | 03:02 | Accessibility requirements.
| | 03:04 | Alt text is the text that the Screen
Reader will use or the browsers will show
| | 03:08 | us Alternate Text, if images aren't
read by that particular user client.
| | 03:12 | So they're really important for us to do,
but you might say to yourself, "Well,
| | 03:15 | "I don't really need that prompt.
| | 03:17 | I'll go back and do it." Trust me.
| | 03:19 | This is the voice of experience talking here.
| | 03:21 | You don't always go back and do that.
| | 03:23 | So yes, I could simply click on the image,
go to my Properties, and type in Beach Yoga,
| | 03:30 | but likely, you're not going to be doing
that for every image you place on the page.
| | 03:33 | So there is no good reason to
ever turn those Preferences off.
| | 03:38 | So again, you might just want to
double check that, make sure that all of your
| | 03:41 | Accessibility Preferences are turned on.
| | 03:43 | Now anytime you insert an object on the
page, the Dreamweaver can assist you with,
| | 03:47 | it's going to do that
based on those Preferences.
| | 03:50 | Now for the most part, the Accessibility
Preferences are the type of preferences
| | 03:54 | you just set and forget. You let
| | 03:56 | Dreamweaver prompt you for any
necessary Accessibility information.
| | 04:00 | I can't think of a compelling reason
ever to turn them off, unless you just
| | 04:03 | don't like being prompted
for certain information.
| | 04:06 | Now I'll also want to stress, very
clearly, that while these settings will save
| | 04:09 | you tons of time and potential errors,
| | 04:12 | they do not guarantee that your site
will meet Accessibility requirements.
| | 04:17 | You should look at these settings
more of as a way to save some time.
| | 04:20 | The responsibility to create
accessible sites is still your own.
| | 04:24 | There are Accessibility requirements
that are not met by these Preferences.
| | 04:27 | I recommend visiting the
government's Web site on Section 508
| | 04:31 | www.section508.gov to learn more about
Accessibility, and how to ensure your
| | 04:37 | site meets those requirements.
| | 04:39 | I would also like to mention that I
will continue to focus on Accessibility
| | 04:43 | throughout this title. As we discuss
Images, Forms, Tables, and other Page
| | 04:48 | elements, we will discuss their
Accessibility requirements and any assistance
| | 04:52 | Dreamweaver can give you in
ensuring the elements are accessible.
| | Collapse this transcript |
| Working with starter pages| 00:00 | There are going to be times when
creating a new page from scratch is simply
| | 00:03 | not your best option.
| | 00:05 | If you are new to using CSS for Layout,
or you are simply looking for a head
| | 00:09 | start for the structure and layout
of your new files, Dreamweaver starter
| | 00:13 | pages offer over a dozen standards-compliant,
cross-browser-compatible layouts to choose from.
| | 00:19 | These layouts render consistently in
Internet Explorer for Windows, versions
| | 00:22 | 5 through 8, Firefox for Mac
and Windows, versions 1 through 3,
| | 00:27 | Opera, versions 8 and 9 for both Mac
and Windows, and Safari 2 through 4,
| | 00:32 | really, any browser out there.
They're fantastic layouts and
| | 00:35 | they're designed to be cross-
browser compatible. All right.
| | 00:38 | So where do we find these?
| | 00:40 | Well, to access our New Pages, just
go to the New Document dialog box.
| | 00:44 | When selecting a new Blank Page, the
starter pages appear in the Layout panel,
| | 00:49 | offering choices based off
of 1, 2, and 3 column layouts.
| | 00:55 | Now when you're creating a new Page
using one of those starter pages, let's say
| | 00:59 | that we use this 2 column fixed,
left sidebar, header and footer.
| | 01:04 | Now when you choose one of those,
Dreamweaver allows you to create a new
| | 01:07 | external style sheet, add the layout
styles to an existing style sheet, or embed
| | 01:12 | the styles in a new page.
| | 01:13 | Now we'll do that right down here
in this lower right-hand corner.
| | 01:17 | So notice that it's asking us, "Hey, what do
you want to do with the CSS for this Layout?"
| | 01:22 | We could Add them to the Head of the
new document that we're creating, we can
| | 01:26 | Create a brand-New File, or we
can Link to an Existing File.
| | 01:29 | So if you already have an external CSS
file, you could go ahead and place these
| | 01:33 | styles directly in that file
as well, which is pretty cool.
| | 01:36 | Now, for what we're doing here.
| | 01:37 | We're just going to add it
to the Head of our document.
| | 01:40 | If you already have an existing CSS
file that might control something else, say
| | 01:43 | typography, you're free to go ahead and
attach that to the page as well at this
| | 01:47 | point, which is pretty cool.
| | 01:49 | Now which option you'll choose will
depend on your larger CSS strategy.
| | 01:53 | The CSS created this Layout Only well
commented and easy to customize for your own uses.
| | 01:59 | So I'm going to go ahead and Create the page.
| | 02:01 | Now as you can see, placeholder
information and neutral background colors
| | 02:06 | clearly mark content areas and are simple
enough to easily replace with your own content.
| | 02:12 | In fact, most regions have
instructions on how to either control the CSS or
| | 02:17 | which content should go where.
| | 02:19 | So they're really, really easy to use.
| | 02:21 | Now I'm going to switch over to Code
view, because I want to take a closer
| | 02:24 | look at the CSS itself.
| | 02:26 | Now if you want to examine how the
Layout works, just go into Code view
| | 02:29 | and check out the CSS.
| | 02:31 | I'm going to scroll down
until I find it. There it is.
| | 02:33 | Now the CSS is fully commented with
clear, concise descriptions of how the page
| | 02:38 | structure, class structure,
and layout styles work.
| | 02:42 | Additional comments point out
properties and styles focused on creating Web
| | 02:45 | standards compliant code.
| | 02:47 | All this is great information for those
learning how to control layouts with CSS.
| | 02:52 | Now starter pages aren't for everyone,
| | 02:54 | however, if you've never used CSS for
Layout before, and want to make sure
| | 02:58 | you're using solid standards compliant cross-
browser CSS, they are great place to start.
| | 03:04 | If you already have a strategy for
using CSS in place, and one of the starter
| | 03:07 | pages fits your Layout requirements,
it can save you a lot of time in the
| | 03:12 | creation of your CSS, as you'll simply
tweak the existing CSS to be more in line
| | 03:16 | with your specific needs.
| | 03:18 | Now keep in mind that the CSS and Page
structure generated from starter pages is
| | 03:23 | entirely customizable.
| | 03:25 | You can add to, take away, and tweak
the code in whatever manner you want.
| | 03:29 | Just make sure to approach using
starter pages with a clear strategy, so that
| | 03:33 | the overall implementation of
them into your site is seamless.
| | 03:37 | Now in our next movie, we're going to
discuss strategies for customizing starter
| | 03:42 | pages and adopting them as
part of your overall workflow.
| | 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.
| | 00:06 | They are, by nature,
designed to be individual pages.
| | 00:10 | Using the CSS within a starter page to
control an entire site can be a bit of a
| | 00:15 | challenge to somebody who
is not familiar with CSS.
| | 00:18 | In this movie, I want to show a workflow
based on creating sites through starter
| | 00:22 | pages. By no means is it the only way
you starter pages, nor am I suggesting
| | 00:27 | that this is the preferred
way of establishing site layout.
| | 00:30 | It does, however, offer somebody new to
Web design a way to quickly establish a
| | 00:34 | solid site-wide layout and
introduces new designers to the concepts of
| | 00:39 | controlling sites through external styles.
| | 00:41 | So the first thing I am going to do
is create a brand-new page using one of
| | 00:44 | Dreamweaver's starter pages.
| | 00:46 | So I am going to File and choose
New, and I am going to choose from a
| | 00:50 | blank page HTML, and I want choose this 2
column fixed, left sidebar, header and footer.
| | 00:57 | Now unlike we did in the last movie,
this time I want to change where the Layout
| | 01:01 | CSS is going to be located.
| | 01:04 | Instead of adding it to the head of
the document, I want to place it in a new
| | 01:08 | external cascading stylesheets file.
| | 01:12 | Externalizing your CSS is a really
great way of controlling your site, because
| | 01:16 | now every single HTML page
can link to that CSS file.
| | 01:20 | And any change that you need to make to
your site's typography, layout, colors,
| | 01:24 | can be done by modifying a single file.
| | 01:27 | So it's a really nice way of working.
| | 01:30 | Okay, now I am going to choose Create
and when I do that, because of the fact
| | 01:33 | that I've told Dreamweaver to create a
new file for the CSS, I'm going to be
| | 01:37 | prompted to create a brand-new CSS file.
| | 01:41 | Now within my 04_05 folder, I am going
to create a brand-new folder for my CSS.
| | 01:48 | It's always a good idea to keep all
of your styles in a single folder.
| | 01:53 | So I am going to name this folder
_CSS. The underscore identifies it as an
| | 01:57 | asset folder instead of subdirectory
and makes sure that it displays towards the
| | 02:01 | top of any directory list.
| | 02:03 | Now inside that, I am going to
save this file, not as twoCol
| | 02:07 | FixLtHdr, which
is nice and descriptive,
| | 02:10 | but I just want to call it main.css.
Now, you are free to name your style sheets
| | 02:15 | anything you want to name them.
| | 02:17 | I usually use main, because, well, it's
the main styles of the page, but really,
| | 02:21 | you can come up with
your own naming conventions.
| | 02:23 | You don't have to follow what I've done here.
| | 02:25 | So I going to choose Save, and now
I have my brand-new starter page - I am
| | 02:29 | going to switch over to Design view - and it
is being driven by this external style sheet.
| | 02:34 | Now I can prove that by going over here
to my CSS Styles panel, clicking on the
| | 02:38 | All Styles and sure enough,
there is my external main.css.
| | 02:43 | So this time if I go into Code View,
you'll notice that in the head of the
| | 02:46 | document there are no styles whatsoever.
| | 02:49 | They are all in this external main.css,
and you can click right up here in the
| | 02:53 | document toolbar, and you could see
they're all now been externalized in that
| | 02:57 | one file and they are being linked to the page.
| | 02:59 | Now if you're wondering how that works,
notice that here in the source code of
| | 03:04 | our HTML file, on line number six, we have
this link, right here, that's linking to this file.
| | 03:11 | Now this is a weird link right now,
because it's pointing to some place on my
| | 03:13 | computer instead of a document-relative link.
| | 03:16 | The reason for that, we haven't saved our
file yet, so let's go ahead and do that.
| | 03:19 | I am going to File and choose Save.
| | 03:21 | I am going to save this into my root
directory, and I am going to save it as index.htm.
| | 03:28 | Now notice that that link tag
resolves itself to something that's a little
| | 03:32 | bit more manageable.
| | 03:33 | Now, as I've mentioned before,
you're free to tweak these layouts and do
| | 03:37 | anything you want to them.
| | 03:38 | So let's say that while we agreed that
this is a great place to start, maybe it
| | 03:43 | wasn't exactly the layout or
the color scheme that we want.
| | 03:46 | So what we are going to do is make
some quick changes to our CSS to affect the
| | 03:49 | width of the page, maybe width
of some columns, things like that.
| | 03:53 | Now in order to do that, it's very important
that you understand the structure of the page.
| | 03:57 | And Dreamweaver can help you do that as well.
| | 03:59 | Notice, for example, if I click
inside this heading called Instructions,
| | 04:03 | right down here underneath, our document
window, we have what is known as the tag selector.
| | 04:07 | Now if you've never used the tag selector
before, I really want to encourage you
| | 04:10 | to take a closer look at this.
| | 04:13 | Your tag selector is going to tell you the
structure of exactly the area that you are in.
| | 04:17 | So for example, by clicking in here, I
see that that I am inside of an H1 Tag,
| | 04:21 | which is inside of a div with a class
of content, which is inside another div
| | 04:26 | with a class of container,
which is inside the body tag.
| | 04:29 | Now if I click on Code View, I can see
that very clearly. There is my div for
| | 04:35 | content, there is a div for a sidebar, there
is my container div, and there is my body tag.
| | 04:40 | So there we were seeing the tag
structure that the tag selector was telling us.
| | 04:44 | Now why is that important?
| | 04:45 | Well, if you don't understand what
the name or the ID or the class of that
| | 04:49 | element is, you won't know
which rule in your CSS to change.
| | 04:53 | Now we are going to be talking a lot
more about CSS later in this title, so for
| | 04:57 | right now, if some of this is
confusing for you, that's okay.
| | 05:00 | We'll be talking a lot more about
classes, IDs and these selectors as we go.
| | 05:05 | Okay, so what I want to do is I want
to change the overall width of my page,
| | 05:09 | and the best way to do that is find
the top level parent tag, which in this
| | 05:12 | case is the div with the class of container,
and then go find the selector that drives that.
| | 05:17 | So I am going to go
over to my CSS Styles panel.
| | 05:19 | There it is right there, .container.
| | 05:21 | Now if collapse my Files panel by double
-clicking on the tab, I get to see all
| | 05:25 | those properties currently for my container.
| | 05:28 | Notice that right now the width is
960 pixels. Well, maybe I want it to be
| | 05:33 | shorter than that, so I could click
right here for the value, and just type in
| | 05:37 | 920 pixels, and when I do that
it shirks the page size down.
| | 05:41 | I also notice that I don't see
my main content region anymore.
| | 05:45 | Well, the reason for that is the main
content region is now too wide to fit in this area.
| | 05:50 | The width of the sidebar plus the width of
the main content region need to add up till 920.
| | 05:55 | So I am going to go and
find that content region.
| | 05:57 | Once again, I am going down the list
of my selectors until I find content.
| | 06:01 | I notice that the width
given for this is 780 pixels.
| | 06:04 | I am going to change that to 740. There we go.
| | 06:08 | My content is back again.
| | 06:09 | So now we have a much narrower page
that fits what we want for our site.
| | 06:13 | We can continue to make changes here.
| | 06:15 | For example, we could change color.
| | 06:16 | We could change typography.
| | 06:18 | We could change the width of the sidebar
and the main content region so that the
| | 06:22 | sidebar was a little wider,
and it's entirely up to us.
| | 06:26 | Okay, so I'm pretty happy
with what we have done here.
| | 06:29 | So I am just going to go ahead and
do a Save All, and close my index file.
| | 06:33 | Now once again, as I mentioned before,
CSS starter pages are typically designed
| | 06:38 | to be single pages, but what if we want
to create an entirely new page for our
| | 06:42 | site using all those
modifications that we just made?
| | 06:45 | Well, let's see how we would do that.
| | 06:46 | So I am going to go to File, and choose New.
| | 06:48 | Once again, I am going to choose this 2
column fixed, left sidebar, header and footer.
| | 06:53 | I can go ahead and click Create, but
before I do that, I want to verify something.
| | 06:57 | Notice, again, that Layout CSS is
saying, "Okay, create the New file."
| | 07:01 | Well, that wouldn't be very efficient.
| | 07:03 | You'd be creating a new external
stylesheet for every single page in your site.
| | 07:08 | It's not really what you want to do.
| | 07:10 | So instead of that option, I am just
going to say Link to an existing file.
| | 07:15 | After all, I want to use that
style sheet that we just created.
| | 07:18 | Now when you do that, you have to go
over here and tell Dreamweaver which
| | 07:21 | stylesheet you want to use.
| | 07:23 | Some sites have multiple stylesheets, so
don't assume that it's just going to go
| | 07:26 | ahead and pick up the
stylesheet that you just did.
| | 07:29 | So I am going to click that little
link to Browse, and again, I am going to
| | 07:32 | Browse out to the 04_05 CSS folder
that we created earlier, choose main.css.
| | 07:41 | And that little warning that you got is
just Dreamweaver saying, "Hey, make sure
| | 07:44 | you save this file."
| | 07:45 | Next thing we are going to do is
we are going to add that head of the
| | 07:48 | document as a Link.
| | 07:49 | And we'll talk more about the difference
between Link and Import in the later movies.
| | 07:53 | For right now, we just want to use Link,
so I'll click OK, and I'll click Create.
| | 07:57 | Now I am going to go ahead and save
this file, and I am going to save this
| | 08:01 | as about.htm. Perfect.
| | 08:04 | Now we are getting the proper width, and
we're using the styles that we modified earlier.
| | 08:08 | So we didn't have to create a whole
new section of files, but because of the
| | 08:11 | fact that we use the same starter page,
the structure of HTML was the same, and
| | 08:16 | that means that the styles we
had earlier can drive this page.
| | 08:19 | Now if I choose a one-column layout
or a three-column layout, it probably
| | 08:23 | wouldn't have been as effective because those
styles are designed for this particular layout.
| | 08:28 | So if you are going to use a one
column, a two column, and a three column
| | 08:31 | within your site, you may need to have
separate external style sheets to drive those.
| | 08:36 | Now, I want to take just one last
moment here and prove to you that those
| | 08:41 | external styles are driving both pages.
| | 08:44 | I am going to go right over here to our
CSS Styles, and I'm going to choose the
| | 08:48 | header selector. The header is this top region.
| | 08:51 | I can see that I have background
color for that, so I am going to highlight
| | 08:54 | these hex values here, and I am going to
change it to a different color, maybe one
| | 08:58 | for more Explore California site.
| | 08:59 | So I am going to choose #193742.
| | 09:05 | When I Return, I can see that the
header is now sort of that dark blue.
| | 09:08 | Now if I do a Save All, go over to my
Files panel, and open up the index file, I
| | 09:15 | can see that it's using
that same exact blue color.
| | 09:18 | So both of those are getting their
layout, their color, their typography, all
| | 09:23 | of that from that external stylesheet
that we created when we first created
| | 09:26 | our first starter page.
| | 09:28 | Now this workflow is going to allow
newer Web designers to quickly establish
| | 09:32 | a basic page structure and an external CSS
file that can be used to control the entire site.
| | 09:37 | The CSS is lightweight.
| | 09:39 | It can be modified as much as the site requires.
| | 09:42 | It's also a great way to learn CSS, as
you can experiment with the styles to
| | 09:46 | see how it affects multiple pages
and add rules to the CSS to control
| | 09:50 | additional elements within the page.
| | 09:52 | Of course, there are other ways to
achieve the same results, but this is one of
| | 09:55 | the quickest and easiest
ways for you new users to adopt.
| | 09:58 | And one last thing:
| | 10:00 | this in no way lessens the need for new
designers to learn CSS as quickly as possible.
| | 10:05 | CSS is used to control almost
all modern Web sites, and without
| | 10:10 | understanding how it works, and how
to control it, your Web design skills
| | 10:14 | will always be needlessly limited.
| | Collapse this transcript |
|
|
5. Adding Text and StructureBasic tag structure| 00:01 | Before we begin structuring the content
of our Explore California site, I want
| | 00:04 | to take a moment to explore some of
the basic HTML structural elements and
| | 00:08 | discuss how they should
be used within your pages.
| | 00:12 | There are two basic types of HTML
elements: Block level and Inline.
| | 00:18 | Block level elements are considered to
occupy their own line within the normal
| | 00:22 | document flow, and are typically
displayed this way within a browser.
| | 00:27 | Block level elements that you might
use frequently include the heading tags,
| | 00:31 | paragraph tags, unordered or ordered lists,
and the div tags that help divide content.
| | 00:38 | Inline level elements usually occur
within a block level element, and are often
| | 00:42 | used to identify content within that element.
| | 00:45 | Common Inline level elements include the
Strong tag, the Emphasis tag, the Image
| | 00:50 | tag, and the Span tag.
| | 00:51 | So what do these tags do
and why do we need them?
| | 00:54 | Well, each of these tags have an
inferred logical meaning, and they are used to
| | 00:58 | identify the contents of the tag itself.
| | 01:00 | The H1 tag represents a top-level
heading, while text surrounded by an em tag
| | 01:06 | represents text that is being emphasized.
| | 01:09 | HTML has a wide range of available tags,
but often there won't be a tag that is
| | 01:13 | as descriptive as you need.
| | 01:15 | In those cases, it's worth noting that
the meaning of tags can be changed or
| | 01:19 | expanded on as you begin
to construct your pages.
| | 01:23 | For this reason, it's very important
have a site-wide strategy for when certain
| | 01:27 | structural elements are going
to be used within your site.
| | 01:30 | Will every page contains just one H1 tag,
or is there a reason to have multiple
| | 01:35 | H1s across your pages?
| | 01:37 | If you are dividing the site into
regions, like headers, sidebars and
| | 01:40 | footers, does each of those regions
get their own H1, or do they start with
| | 01:45 | a lower-tiered heading?
| | 01:46 | Now in truth, it doesn't
matter which strategy that you use.
| | 01:50 | It just matters that you are
consistent across your site.
| | 01:53 | If you always use headings one way in
your main content, and one way in your
| | 01:56 | sidebar, it's much easier for you to
write styles that control them, and much
| | 02:01 | easier for user agents to discern their meaning.
| | 02:03 | Again, here consistency is key.
| | 02:06 | Now that we have explored some of the
structural elements we're to be using on
| | 02:09 | our pages, in our next movie, we'll
focus on using Dreamweaver to define your
| | 02:13 | document's structure.
| | Collapse this transcript |
| Adding structure to text| 00:01 | When designing a new page, one of the
first tasks you'll need to do is to create
| | 00:05 | the basic structure of your page's HTML.
| | 00:08 | If you're typing in your content
directly into Dreamweaver, you can add that
| | 00:12 | structure as you type.
| | 00:13 | If you are importing content from
programs like Word, you can either preserve
| | 00:18 | the text's structural formatting or
reassign content to specific tags.
| | 00:23 | Whatever approach you take,
Dreamweaver makes it incredibly easy to add basic
| | 00:27 | structure to your HTML.
| | 00:29 | In this exercise, we'll take a
resource file, which has been stripped down
| | 00:33 | to the barebones, and add meaning to the
text by formatting it within specific tags.
| | 00:39 | Keep in mind that in this exercise we
are focusing on the main content region of
| | 00:43 | the page, not the layout or the secondary areas.
| | 00:47 | The markup we would use for page layout
will be covered a little bit later on.
| | 00:51 | So here I have my resource
file open from the 05_02 folder.
| | 00:55 | Now it would be really easy to look at
this file and say it doesn't have any
| | 00:58 | structure at all right now.
| | 00:59 | But that wouldn't be exactly true.
| | 01:01 | If I click inside this first paragraph
right here, if you have questions about
| | 01:05 | an upcoming trip, you'll notice that
in the tag selector - and this is that
| | 01:10 | little status bar right down here below
the document window - you'll notice that
| | 01:13 | the tag selector tells me that this is
inside of a paragraph tag, and in fact,
| | 01:17 | if I click on the paragraph tag,
it selects all of the text.
| | 01:21 | Now, if I begin typing and I hit Enter,
so if I hit Enter or Return, then I go
| | 01:25 | down to next line and type in, This is a
new paragraph, indeed, looking down the
| | 01:30 | tag selector, I do have a new paragraph.
| | 01:33 | So Dreamweaver will place the
previous line inside of a paragraph tag, and
| | 01:37 | create a brand-new empty
paragraph to hold the next line.
| | 01:40 | Now, don't just assume that if you see a
line of text that it is in a paragraph.
| | 01:45 | Notice the first line of text here.
| | 01:47 | When you click inside of it, you can see,
looking at the tag selector, that is not tag.
| | 01:50 | It's just sitting there in the body tag.
| | 01:52 | This is even more obvious if
I switch over to Code View.
| | 01:56 | You can see that while everybody else
has opening and closing paragraph tags,
| | 02:01 | which identifies the content inside
of it as belonging to a paragraph, this
| | 02:05 | headline Got Questions is inside no tags.
| | 02:08 | Now, that's really, really important.
| | 02:10 | Within an HTML document, all content
must be tagged so that user agents know
| | 02:16 | what type of content it is.
| | 02:19 | Now with this in mind, let's
restructure our page using Dreamweaver's
| | 02:23 | Property Inspector.
| | 02:24 | Now I am going to change my view a little bit.
| | 02:27 | I am going to click on the Split
Screen view, so that my code is on the
| | 02:31 | left-hand side, and my Design
View is on the right-hand side.
| | 02:34 | You can then grab the little dividing
bar between them and allow more room for
| | 02:38 | your Design view or more room for
your Code View, whichever one you're
| | 02:41 | currently interested in.
| | 02:43 | Now whichever one of these windows
you click in, that's the one you are
| | 02:45 | currently focused on.
| | 02:46 | So if I click inside the code,
I'll be working in my Code View.
| | 02:49 | If click inside my Design view,
I'm working in my Design view.
| | 02:53 | So what this allows us to do, let's
say you are somebody that's brand-new
| | 02:56 | Dreamweaver, and you've never
worked never worked with HTML before.
| | 02:59 | You can make changes in the Design
view and just to left of you, you can see
| | 03:03 | what changes that you're
actually making to your code.
| | 03:06 | This is a great way to learn how to
structure your content and which tags
| | 03:10 | are being added as you create or import
content in, so it's really nice way of working.
| | 03:14 | The other thing this does for you
is it reinforces the concept that
| | 03:18 | you're creating code.
| | 03:20 | If you work just in Design view, and you
are brand-new to Dreamweaver, you might
| | 03:23 | get the mistake and impression that
you're almost working in a Word processor.
| | 03:27 | I think it's really important for you
to understand everything that you do in
| | 03:30 | Dreamweaver is, in fact, generating code. Okay.
| | 03:33 | Let's do some structuring here.
| | 03:34 | I am going to click inside the headline
Got Questions over here in the Design pane.
| | 03:39 | I am going to go down to my
Properties Inspector, and of the two tabs, I am
| | 03:43 | going to make sure that I've clicked
the HTML tab, because remember, we want to
| | 03:46 | change the HTML structure.
| | 03:48 | I am going to grab the Format pulldown
menu, and I can see a listing of all the
| | 03:52 | tags that I can choose from here.
| | 03:53 | I have got my paragraph, all of my
headings, and this little odd choice
| | 03:57 | called Preformatted.
| | 03:59 | I get asked about that a lot.
| | 04:00 | Well, what that actually is is it wraps
the content in a pre tag, which causes
| | 04:04 | browsers to display the text in a
monospace font, and retain any line breaks or
| | 04:08 | whitespace within the text.
| | 04:10 | It's really good for displaying
computer code or scripting examples, and that's
| | 04:14 | what it's primarily used for.
| | 04:15 | In this instance, however, we want
a Heading1 for our Got Questions.
| | 04:19 | So I'll got ahead and choose that.
| | 04:21 | Notice that in the Design view it gets bigger.
| | 04:23 | It's bolder, and over there in the Code View
it's surrounded by an opening and a closing H1 tag.
| | 04:28 | So that is exactly what we want.
| | 04:31 | We have a few other headings to structure,
so let's go ahead and take care of those.
| | 04:34 | Now I am going to get rid of my This
is a new paragraph. I don't need that.
| | 04:37 | So I am going to highlight that, and
then hit Delete, and then hit Delete again
| | 04:41 | to get rid of the paragraph.
| | 04:43 | You'll notice that the first time I
deleted, I just deleted the content of the
| | 04:46 | paragraph and not the tag itself.
| | 04:48 | So now I am going to click inside
General Tour Information, and using my Format
| | 04:52 | pulldown menu, I am going
to make that a Heading2.
| | 04:55 | So it's sort of secondary or subheading.
| | 04:57 | Now I'll click in the Customer notifications.
| | 05:00 | I'll make that Heading3.
| | 05:02 | And then I am just going to scroll
down my page, and for each of the other
| | 05:05 | headings, Tour Voucher, Trip Planning,
all those guys are going to be Heading3s.
| | 05:10 | So H3s, Tour Checklist, it's
going to be a Heading3 as well.
| | 05:16 | Now I've got some more content
underneath here that we are going to restructure,
| | 05:19 | but we'll be doing that in our next movie.
| | 05:21 | Now as we structure our headings,
we've used a very logical progression:
| | 05:25 | H1, then H2, and then H3s.
| | 05:29 | Now you might infer from this that you
always should go in that order, but the
| | 05:32 | truth is you can use any approach
you want to structuring your content.
| | 05:36 | In the Explore California site, each
main content region will have one H1 tag
| | 05:40 | that identifies the content.
| | 05:42 | Any other main headings will be
assigned as H2s, and any paragraph
| | 05:46 | subheadings will be H3s.
| | 05:49 | You're certainly free to develop
your own strategy for your content;
| | 05:52 | just make it logical and be
consistent with how you use it.
| | 05:56 | By coming up with a logical structural
framework early on, you can ensure that
| | 06:00 | all of your pages use a
consistent structure throughout your site.
| | 06:04 | That makes the content easier for user
agents to parse, and easier for you to style.
| | 06:08 | Now we are almost done, but they're just
a couple more things we need to do here
| | 06:11 | before we can move on.
| | 06:13 | So far, we've been using Block level elements:
| | 06:15 | headings and paragraphs.
| | 06:17 | Now we need use some Inline level
elements to add structure within the
| | 06:20 | paragraphs themselves.
| | 06:22 | So what am I going to do is I am going
to go down to the second paragraph here,
| | 06:25 | customer notifications, and there are
couple items in there that really want to
| | 06:28 | stand out to the user:
| | 06:29 | for example, tour confirmation.
| | 06:32 | I want them to know that they really
ought to be looking for a tour confirmation
| | 06:35 | that this is an important article.
| | 06:36 | So I am going to highlight the text,
tour confirmation, and again, using the
| | 06:40 | Properties Inspector I am going to
click the B tag, which indeed, it says Bold.
| | 06:44 | Now it's true that browsers will
render that text as bold, but in reality,
| | 06:49 | what we've done is we've surrounded that
text with an opening and a closing strong tag.
| | 06:54 | Strong tags strongly emphasize text,
so any user agent will make sure that
| | 06:59 | this text stands out.
| | 07:01 | Next, we need to do the same
thing to reminder notifications.
| | 07:03 | So I am going to go ahead and highlight
reminder notification, click the B tag,
| | 07:08 | and surround it with a strong tag as well.
| | 07:11 | Now there is another line in this
paragraph that I want to make sure people are
| | 07:14 | paying attention too as well.
| | 07:15 | This sentence right here, "If you do not
receive a confirmation within 24 hours,
| | 07:19 | or the reminder notification two
weeks out, contact us immediately."
| | 07:23 | All right, I am going to
highlight that and click the I tag.
| | 07:26 | So what does that Italic icon do?
| | 07:29 | It surrounds text with an em tag,
an opening and closing em tag.
| | 07:33 | So what's the difference?
| | 07:34 | Well, the em tag is an emphasis tag, and
it denotes text that is being emphasized.
| | 07:39 | The strong tags denotes text
that is being strongly emphasized.
| | 07:42 | So if you are looking for the logical
structural definition of that, that's what it is.
| | 07:46 | We've got one more.
| | 07:48 | Let's scroll in just a little bit more
down to our Trip Planning, and I've got a
| | 07:53 | sentence here that says, "a list of any
required equipment for the tour that is
| | 07:56 | not provided by Explore California."
| | 07:58 | I want to emphasize that point, so I am
just going to highlight "not provided"
| | 08:02 | and click the I tag there as well to
just does emphasize that text too. Cool!
| | 08:07 | Now our page is on its way, but
structurally, it's not quite done yet.
| | 08:12 | In our next exercise, we are going to
explore another fundamental structural
| | 08:16 | element as we work with Lists.
| | Collapse this transcript |
| Creating lists| 00:00 | Most people think of lists as simply
a way of displaying related items in a
| | 00:05 | numbered or unordered listing. Now
that's certainly true, but lists can do so
| | 00:08 | much more than that.
| | 00:10 | Lists allow us to group related content
together and then structure that content
| | 00:14 | in a way that denotes
importance, rank, or similarity.
| | 00:18 | When used for navigation, lists offer a
way to group links together so that user
| | 00:22 | agents know that those links are all related.
| | 00:24 | HTML offers us three main types of lists:
| | 00:28 | Ordered, Unordered and Definition lists.
| | 00:31 | Ordered lists use some type of a
numbering system - numbers, letters, Roman
| | 00:35 | numerals - to display the listed items.
| | 00:38 | Unordered lists use bullets or icons
to denote a listed item, and Definition
| | 00:42 | lists display a term followed by a definition.
| | 00:46 | While Ordered lists and Unordered
lists follow the same basic structure,
| | 00:50 | Definition lists uses a
slightly different structure.
| | 00:53 | Well, here I have a list_example
opened, and I want to show you the basic
| | 00:57 | structure of Unordered and Ordered
lists, and those are two most common list
| | 01:01 | types that you're probably
going to be using in HTML.
| | 01:04 | So I'm going to scroll down through my
code, and you can see, in the Design view,
| | 01:07 | that this is just a simple
bulleted or Unordered list.
| | 01:10 | But in Code View, let's
take a look at the structure.
| | 01:13 | Every list is surrounded by an
opening and a closing list tag.
| | 01:17 | In this case, the </ul> tag
denotes an Unordered list.
| | 01:21 | Then the list items themselves are surrounded
by an opening and closing </li> or list item tag.
| | 01:28 | That's really as complex as it gets.
| | 01:30 | It's a very, very basic structure, very clean.
| | 01:32 | Now, if I wanted to change this
listing from an Unordered list to an Ordered
| | 01:37 | list, all I would really need to do is
change the opening tag to an <ol> tag and
| | 01:41 | the closing tag to a closing </ol> tag.
| | 01:44 | Now if I click back over here in Design
View, you can see I now have an Ordered list.
| | 01:48 | So very, very close in structure
between Ordered and Unordered lists.
| | 01:52 | Well, now that we have examined the
structure of that, let's go ahead and create
| | 01:55 | a few lists of our own in our Resource page.
| | 01:58 | I'm going to close this file, and then
from the 05_03 folder, I'm going to open
| | 02:04 | up our resources.htm.
| | 02:06 | Now we've added a good bit of
structure to this page already.
| | 02:09 | But if I scroll down to the bottom
of it, I can see that we have single
| | 02:14 | paragraphs down here that need to be
structured maybe a little bit better.
| | 02:18 | These are all related items, and
they fit very nicely within a list.
| | 02:22 | So what I'm going to do is
start with the first item.
| | 02:24 | Have you arranged for your mail/paper delivery?
| | 02:27 | I'm just going to highlight all
the way down to our last item.
| | 02:31 | We recommend packing a small first-aid kit.
| | 02:34 | So with that highlighted, I'm going
to go down to my Properties Inspector.
| | 02:37 | Again, I'm going to be making sure
that I'm on the HTML tab, not the CSS tab.
| | 02:42 | And I'm going to choose to go ahead
and make this, initially, an Ordered list.
| | 02:46 | So very similar to any type of a
Word Processing program that you've been
| | 02:50 | using, but notice, again, on the left-
hand side in the Code View, we're actually
| | 02:54 | structuring our list.
| | 02:56 | In Design view, we can see we have items
1 through 21 listed in a numbered list.
| | 03:02 | Now, are there things that we can change via
the HTML, to change how our list displays?
| | 03:07 | Absolutely.
| | 03:08 | If you click inside any of the list
items - I'm just going to click inside the
| | 03:11 | first one here in the Design view -
| | 03:13 | you'll notice that our Properties
Inspector has a button on it that it didn't
| | 03:16 | have before, List Item.
| | 03:18 | If I click on that, that's going to
bring up a dialog box that allows me to
| | 03:22 | change some of the properties of my list.
| | 03:24 | For example, I could change
the type of lists that I have.
| | 03:28 | In this case, I'm going to change the style.
| | 03:30 | I'm going to grab the Style pulldown
menu, and I notice that I can choose
| | 03:33 | between numbers, Roman Numeral Small
and Large, and Alphabets Small and Large.
| | 03:38 | I'm going to choose Alphabet Small. Click OK.
| | 03:40 | Now that I can see instead of starting
with the number 1, it starts with an "a".
| | 03:44 | Also, notice, in Code View, that now
our opening </ol> tag has an attribute.
| | 03:49 | An attribute is a property inside of a
tag that gives more information about
| | 03:53 | that particular element.
| | 03:54 | In this case, it's saying there is an Ordered
list, and its type should be small alphabet.
| | 04:00 | Now, you can also make changes
directly in the code as well.
| | 04:03 | So what I'd like you to do is
switch over to the Code View.
| | 04:05 | I'm going to remove that
attribute and change the ol to a ul.
| | 04:11 | So scroll all the way down, find the
opening tag, and then find the closing tag.
| | 04:15 | The closing tag has that little forward
slash right at the front of it.
| | 04:18 | And again, I'm going to just change
the o to u. Now when I click back over in
| | 04:22 | Design view, now we have
bullets instead of numbers.
| | 04:26 | And bullets are going to be better for
this type of list, because we're really
| | 04:29 | denoting any sequential information;
we're just organizing grouped information.
| | 04:33 | Now occasionally, you're going to
need nested lists, that is a list
| | 04:37 | appearing inside of a list.
| | 04:38 | For example, if I look inside of our
existing list, I have this entry here:
| | 04:43 | Is your trip an outdoor adventure?
| | 04:45 | If so, we recommend the following.
| | 04:47 | So we have another group of
information that pertains to just that item.
| | 04:51 | So what I'm going to do is I'm going
to start with Comfortable hiking shoes,
| | 04:54 | and I'm going to go all the way down to
Sunscreen, because that is part of the
| | 04:58 | group, so Comfortable hiking shoes to Sunscreen.
| | 05:01 | Now how do we nest one list inside of another?
| | 05:03 | It's actually very, very simple.
| | 05:05 | We're going to go right down to the
Properties Inspector, and I'm just going to
| | 05:08 | click this little icon here that says Indent.
| | 05:11 | As soon as I do that, it goes ahead and
indents that lists in, and now it is a nested list.
| | 05:16 | Now how does that look in the code?
| | 05:18 | Well, this is pretty interesting.
| | 05:20 | Notice that the lists item that this
pertains to - Is your trip an outdoor adventure -
| | 05:24 | here is the opening <li> tag, but
before that lists item can close, there's an
| | 05:29 | entirely new Unordered list inside of it.
| | 05:32 | After that Unordered list closes,
the listsitem can finally close.
| | 05:35 | Now, that's a very important
structural point I want to make here.
| | 05:39 | If you open up one tag inside of
another tag, the nested tag must close first
| | 05:45 | before its parent tag can close.
| | 05:47 | If it were the other way around, and
that ul came after the </li> tag, that will
| | 05:52 | be non-valid HTML, and in fact, you'd
be basically interrupting one list and
| | 05:56 | putting another one in its
place, so we don't want to do that.
| | 06:00 | The nice thing is
Dreamweaver does all that for you.
| | 06:03 | Okay, I'm going to go ahead and Save this file.
| | 06:05 | And I want to talk very
briefly about Definition lists.
| | 06:08 | Now Definition lists aren't as widely
used as Unordered or Ordered lists, but
| | 06:13 | they are very handy in several situations.
| | 06:15 | I'm going to go over to my Files panel and
open up the faq.htm file found in the 05_03.
| | 06:22 | So this is our site's
frequently asked questions.
| | 06:26 | And if I scroll down, I see that each
of our frequently asked questions has a
| | 06:29 | question followed by an answer.
| | 06:31 | That structure is repeated
over and over and over again.
| | 06:36 | It'd be really nice if, structurally, we
could tell any type of user agent that
| | 06:40 | these items were related.
| | 06:41 | A Definition list allows us to do just that.
| | 06:45 | So what I'm going to do is I'm
going to start with our first question in
| | 06:47 | the Backpack Cal area.
| | 06:49 | What does "tour difficultly"
in the tour description mean?
| | 06:51 | I'm going to start with that, and I'm
going to begin to highlight all the way
| | 06:55 | down to the last answer inside
Backpack California, Yes, we can.
| | 07:00 | Take a look at our tour
guide gear recommendations.
| | 07:03 | Now that can be a little tricky, so you
want to double-check your highlighting
| | 07:08 | and make sure that you have questions
and answers highlighted entirely, and that
| | 07:13 | you didn't get any of the
lines above, or lines below.
| | 07:16 | Definition lists can be a little tricky,
and you want to make sure that you have
| | 07:19 | all the elements selected that
you need for that Definition list.
| | 07:22 | Okay, so now we're ready to format this.
| | 07:24 | Now, if we go down to our Properties
inspector, there is nothing down here
| | 07:28 | for Definition lists.
| | 07:29 | There is Bulleted lists.
| | 07:30 | There is an Ordered lists, but
nothing for a Definition list.
| | 07:33 | Well, you won't find them
on the Properties Inspector.
| | 07:36 | You will find them, however, up in the menu.
| | 07:38 | So I'm going to go up to my menu, I'm
going to go to Format > List and right
| | 07:43 | there is Definition list.
| | 07:46 | Now if this is something you're going to
be doing a lot, you might want to map a
| | 07:49 | keyboard shortcut to that so that you
don't have to keep coming up to the menu.
| | 07:52 | But if you're just doing it once or twice,
it's probably not that big of deal to
| | 07:56 | come up to the menu and select that.
| | 07:58 | So as soon as I select Definition list,
we see a little bit of a change here.
| | 08:03 | Our answers are now indented in a
little bit and give us a little bit of
| | 08:06 | separation between our questions.
| | 08:08 | Now, this isn't the best rendering in the
world, but remember, that's what our CSS is for.
| | 08:12 | We're going to style this later on with our
CSS to make this look the way we want it to.
| | 08:16 | I'm going to take just a moment to
go over to the code, because I want to
| | 08:20 | examine the structure of this lists and
compare it with what we were doing with
| | 08:23 | our Unordered or Ordered lists.
| | 08:26 | Notice at the very top of any
Definition lists is the <dl> tag.
| | 08:30 | From there, it alternates between a
<dt> tag for the term, and a <dd> tag
| | 08:35 | for the definition.
| | 08:36 | So each time out we have a <dt> for
the term, and we have an opening and
| | 08:41 | closing <dd> which encases the definition.
| | 08:45 | And that just repeats until
the Definition list closes out.
| | 08:50 | So it's really important that you
have an equal number of items, terms and
| | 08:54 | definitions, and that you don't
partially select a line above or partially
| | 08:57 | select a line below.
| | 08:58 | That can really mess up your structure.
| | 09:00 | Well, to go ahead and practice this, we've
got facts for each of these tour packages:
| | 09:05 | California Calm, California Hotsprings,
Cycle California, all the way down the page.
| | 09:12 | Take some time, go ahead and pause
the movie, take some time and add that
| | 09:15 | additional structure to
each one of those elements.
| | 09:18 | As you do that, you'll get a little bit more
comfortable with creating a Definition list.
| | 09:22 | Now, creating and editing lists
inside Dreamweaver is extremely simple.
| | 09:26 | It's similar to using several popular
text editing programs, so a lot of what
| | 09:30 | you're doing here you're
going to be quite familiar with.
| | 09:32 | What's really important to remember is
that any changes made to the list, and
| | 09:36 | all of the text in Dreamweaver for
that matter, is in reality generating and
| | 09:39 | modifying code, the underlying
structure for all of your content.
| | 09:44 | As such, you want to make sure that
you understand how this code should be
| | 09:47 | structured in case you ever
need to go in and modify yourself.
| | 09:51 | I recommend monitoring the code as you
create it, just as we're doing here, so
| | 09:55 | that you're ensuring that
you're formatting your code correctly
| | Collapse this transcript |
| Getting text into Dreamweaver| 00:00 | Although you can type to your hearts
content in Dreamweaver, chances are that
| | 00:04 | most of the copy that you work with
will be created by you or another person in
| | 00:08 | a program other than Dreamweaver.
| | 00:10 | Getting text from those documents into
Dreamweaver is a fairly straightforward
| | 00:14 | process, but like most processes in
Dreamweaver, there are some options that you
| | 00:19 | really need to know about to
make the most of your workflow.
| | 00:22 | Let's examine this process
in a little bit more detail.
| | 00:25 | So I have our resources.htm file open.
| | 00:28 | Now, you may have noticed, if we're
looking over the Files panel, that we also
| | 00:32 | have an _assets directory that has a
resources.doc in it as well, that, of
| | 00:36 | course, is a Word document.
| | 00:37 | I'm just going to switchover to Word
really quickly, and this is the document
| | 00:41 | that we're going to be
importing into our Dreamweaver file.
| | 00:44 | Now, notice that it has some built-in structure.
| | 00:47 | It has some formatting.
| | 00:48 | It has some bold text, some italicized text.
| | 00:51 | It has got some lists down here at the bottom.
| | 00:53 | So all of our text is formatted and
structured really kind of the way that we want it.
| | 00:58 | Well, I'm just going to go ahead and
select all of my text, so it either is a
| | 01:02 | Ctrl+A or Command+A, and then I'm going
to copy it, Ctrl+C, Command+C depending
| | 01:06 | upon what platform you're on, and now I'm
going to switch back to Dreamweaver. All right.
| | 01:10 | Now that I'm back in Dreamweaver, I'm
just going to go ahead and click at the
| | 01:13 | top of the page, and I'm just going to paste,
Ctrl+V, or I can go up to Edit > Paste, wow!
| | 01:20 | Well, that wasn't really
exactly what I was hoping for.
| | 01:22 | Now notice all my text came in, so at
least I'm that far ahead, but it came in
| | 01:27 | as one big, old block of text.
| | 01:30 | I was hoping for slightly better results.
| | 01:33 | So I'm going to undo that and
take a closer look at my preferences.
| | 01:37 | So I'm going to go up to
Edit and choose Preferences.
| | 01:39 | If you're on the Mac, you want to go
to Dreamweaver and choose Preferences.
| | 01:43 | And I want to take a look
at the Copy/Paste category.
| | 01:46 | Now I've always equated this to like
Goldilocks and the Three Bears, some
| | 01:51 | porridge is too hot, some porridge is
too cold, and you're looking for the
| | 01:54 | setting for you that's going
to be just right. All right.
| | 01:56 | Let's go through our options here.
| | 01:59 | Currently, my preference was set to
Text only, and that is why I got one big,
| | 02:04 | humongous block of text with no structure.
| | 02:07 | I also can choose Text with structure.
That would be paragraphs, lists, and tables.
| | 02:10 | Those would come over.
| | 02:11 | Text with structure plus basic
formatting (bold and italic), and we'll
| | 02:16 | check this option out, Text with
structure plus full formatting (bold,
| | 02:19 | italic and styles).
| | 02:20 | Now you might think to yourself,
"That's going to save me a lot of time.
| | 02:23 | "I can go ahead and style all my text
the way I want it in Word and just paste
| | 02:27 | that directly in a
Dreamweaver and my job is finished."
| | 02:29 | Well, let's take a look at that option.
| | 02:31 | If I choose Text with structure plus
full formatting, again, I get some options
| | 02:36 | down here that come open: Retain line
breaks that would be any Shift, Enters
| | 02:39 | that you've done in Word,
| | 02:40 | and Clean up Word paragraph
spacing. And what does that mean?
| | 02:43 | Well, if you guys use Word a lot, you
know it's very common to hit Enter twice
| | 02:47 | to get space between paragraphs.
| | 02:48 | That's kind of a no, no,
because you end up actually with blank
| | 02:51 | paragraphs between your text.
| | 02:53 | So Dreamweaver would go through
and just sort of strip all those out.
| | 02:56 | So those are two nice, little options.
| | 02:57 | I'm just going to leave them selected.
| | 02:59 | So I'm going to go ahead
and click OK and paste my text.
| | 03:03 | This time when it comes in,
notice that all the structure came in.
| | 03:06 | There are my lists, although
something weird is going on there.
| | 03:09 | I have all my headings.
| | 03:11 | I've got text size coming in, wow.
| | 03:13 | This is looking great!
| | 03:15 | Well, sometimes things that look great
on their surface aren't so great when you
| | 03:19 | dig underneath it a little bit.
| | 03:21 | So I'm going to go switch over to Code
View, and I see something going on that
| | 03:23 | I'm not too pleased about. Look at this.
| | 03:26 | I have some embedded
styles that came in from Word.
| | 03:28 | Now obviously, if I were working
within a larger site, these styles might
| | 03:32 | conflict with my other styles, but
certainly they are going to add extra weight
| | 03:36 | to my pages that I don't need.
| | 03:37 | And then I've got some really weird
stuff going on here, Span style, so I have
| | 03:41 | some in-line styles going on.
| | 03:44 | I have a lot of formatting going on
that really shouldn't be driven this way.
| | 03:47 | It should be driven by my styles.
| | 03:48 | A lot of these classes
are Word-specific classes.
| | 03:51 | So I've really cluttered
up my code by doing that.
| | 03:53 | So that's really not the option I wanted to do.
| | 03:55 | So I'm going to go ahead and undo that as well.
| | 03:57 | So now I'm going to go back to my
Preferences, and let's see if we can find the
| | 04:00 | ones that is just right for us.
| | 04:02 | I'm going to try this one, Text
with structure plus basic formatting.
| | 04:06 | That will retain all paragraphs, all
headings that you've created, that sort of
| | 04:10 | thing, but it's also going to keep
your bold and italic text as well, but it
| | 04:14 | won't bring over all those messy
styles from Word that we don't really need.
| | 04:18 | Again, we still retain these options
down here, so I'm going to select those, and
| | 04:22 | I'm going to click OK again.
| | 04:24 | So one more time, paste the text
that we've copied. Now, look at this.
| | 04:27 | That looks a little better, although it
still have this little weird thing going on here.
| | 04:32 | Sometimes you're just going to see a
couple of things that you're going to get
| | 04:35 | to clean up manually, and usually going
in a Code View will help you with that.
| | 04:40 | So I can see in Code View, for some
reason, Dreamweaver thinks this is two uls,
| | 04:44 | Unordered lists, so I'm just going to
remove the opening and closing Unordered
| | 04:49 | List tag, go back in Design view,
and now that looks a lot better.
| | 04:54 | So again, I hope that reinforces the
concept that I was talking about earlier.
| | 04:57 | It's really important to know how
to modify the structure of your HTML.
| | 05:01 | If you're not familiar with HTML, that
would have been a very difficult edit to make.
| | 05:06 | Going back up through here,
I can see all my structure.
| | 05:08 | When I click inside of the tag, I can see
that that's a heading three, just like I wanted.
| | 05:12 | Here's a heading one, here's a heading two.
| | 05:14 | If I click inside my bold tag, I notice
it's being bolded through the use of the <strong>
| | 05:18 | tag, which is structurally sound.
| | 05:20 | And my italicized text is being
italicized through an <em> tag, which again, is
| | 05:24 | structurally sound HTML.
| | 05:26 | So the integration between Word
and Dreamweaver is pretty good.
| | 05:30 | If you use some of the basic styling
in Word and choose heading one, heading
| | 05:34 | two, Dreamweaver is going to retain
that and actually map that to tags.
| | 05:37 | If you italicized text in Word, you
bring it over, Dreamweaver is going to
| | 05:41 | convert that to an <em> tag or bold tag
is going to convert to a <strong> tag.
| | 05:45 | So there is a pretty
tight integration between them.
| | 05:47 | Now, copying and pasting your text in
the Dreamweaver is likely to work fine
| | 05:51 | for most of the stuff you'd need to do,
but there is another way to bring text
| | 05:55 | into Dreamweaver from Word, and we're
going to take a closer look at that in
| | 05:58 | our next movie.
| | Collapse this transcript |
| Importing Word documents| 00:01 | In an effort to create efficient
workflows, Adobe has integrated Dreamweaver
| | 00:04 | with many other programs that you, or
your team members, are likely to use.
| | 00:09 | Most integration is understandably
within the Creative Suite, but other programs,
| | 00:14 | like Word, feature differing
levels of integration as well.
| | 00:19 | Now, it's not often that I have to break
bad news to the Mac folks, but this is
| | 00:23 | sadly one of those times.
| | 00:25 | The integration between Word and
Dreamweaver that I'm about to show you only
| | 00:29 | works on the PC version of
Dreamweaver. Still, you Mac folks should keep
| | 00:33 | watching, don't turn this off because
there is one option in the following
| | 00:37 | example that does work for you, and
it's something you might want to take
| | 00:41 | advantage of later on.
| | 00:43 | Okay, so I want to bring in my Word file.
| | 00:45 | So I'm going to go up
to File and choose Import.
| | 00:49 | And I notice that I have options for
importing Word and Excel documents, so if
| | 00:52 | you're importing tables, it's
a nice way to do that as well.
| | 00:55 | Now again, on the Mac, you guys are
just going to see the first two options.
| | 00:58 | You won't see Word and Excel.
| | 01:00 | So I'm going to choose Import Word, and
then I'm going to browse into the 05_05
| | 01:04 | _assets folder, and there is our resources.doc.
| | 01:09 | Now, before I click Open, I'm going
to check out some of the formatting
| | 01:11 | options I have down below.
| | 01:13 | If you watch the previous movie, these
formatting options are going to be very
| | 01:16 | familiar to you, Text only, Text
with structure, Text with structure plus
| | 01:21 | basic formatting, such as bold, italic text,
or you can bring in those word specific styles.
| | 01:25 | I'm going to choose the third option,
Text, structure, basic formatting, and I
| | 01:29 | definitely want it to clean up Word's
paragraph spacing, so if there are extra
| | 01:33 | paragraph breaks in there,
I want those cleaned up.
| | 01:35 | I'm going to go ahead and click Open, and
in comes our text with structure and tag.
| | 01:40 | Again, notice that our heading one is
here, heading two, heading threes, our
| | 01:44 | strong tags, or em tags.
| | 01:45 | If we scroll down a little bit,
| | 01:47 | we can see that our Tour checklist is there,
so everything is there that we're expecting.
| | 01:51 | Now, I'm going to undo that, because as
easy as that is, there's actually even
| | 01:56 | an easier way to do this.
| | 01:59 | With any document, blank or one that
already has some content in it, I can go
| | 02:03 | over to my Files panel.
| | 02:05 | I can open up this _asset directory,
and there is my resources.doc just sitting
| | 02:09 | in there, and I can literally select the
file and simply drag it to the location
| | 02:13 | on the page that I wanted to paste that text.
| | 02:15 | That is insanely easy.
| | 02:17 | Now, when I do that I get the dialog box
that comes up with a couple of choices.
| | 02:21 | Again, I'm going to go with the Text
with structure plus basic formatting, but I
| | 02:25 | notice there's one option
here that we didn't have before.
| | 02:28 | So here we have an option to
create a link. Now, what does that do?
| | 02:32 | Well, if I select that and click OK, notice
that Dreamweaver creates a link to that file.
| | 02:38 | So here's some text called resources,
and if I click on that I can see in the
| | 02:41 | Link dialog box, it's
actually linking to that doc.
| | 02:44 | So if you wanted to give your users an
option of clicking and downloading that
| | 02:48 | file, that's a really
quick and easy way to do that.
| | 02:51 | For you guys on the Mac, that is
exactly what option you're going to have.
| | 02:54 | You won't have all the other
integration options, but you will have that.
| | 02:57 | So whether you're wanting to create
a link or whether you want to bring in
| | 03:01 | the entire file, that's up to you, and
you have all those formatting options
| | 03:07 | as well, so you bring in the text exactly
the way that you want to bring in that text.
| | 03:13 | So there you go.
| | 03:15 | What's easier than dragging and dropping?
| | 03:17 | Now, again, I'm sorry to say that
this feature doesn't work on a Mac, but
| | 03:20 | do take note of the fact that if you
want to link to an external Word file
| | 03:24 | for users of your site to
download it, it's as easy as dragging and
| | 03:27 | dropping as well.
| | Collapse this transcript |
|
|
6. CSS FoundationsUnderstanding style sheets| 00:00 | CSS is short for Cascading Style Sheets,
and the name is actually a pretty good
| | 00:04 | description of how they work.
| | 00:06 | A CSS style is merely a collection of
formatting attributes that is then used to
| | 00:11 | style an element on the page.
| | 00:13 | A style sheet is a collection of these
styles that can either apply to a single
| | 00:16 | page in your site, a range
of pages, or your entire site.
| | 00:20 | Understanding some simple rules about
CSS will help you write more efficient
| | 00:24 | styles and help you create
more manageable Web sites.
| | 00:28 | If you have ever used styles in a
program like Word or InDesign, you already
| | 00:31 | have a pretty good idea as to how styles work.
| | 00:35 | Say, for example, that you want all
of your headlines to look the same way.
| | 00:39 | You wouldn't want to
format each one individually.
| | 00:41 | It's faster and more efficient to
simply write a single style that controls
| | 00:46 | all of your headings.
| | 00:47 | Later, modifying that style will then
update all of your headings making your
| | 00:52 | document even more efficient to manage.
| | 00:54 | CSS works this way, but
does it on a site-wide basis.
| | 00:58 | So you can literally control the look
and feel of your entire site with one file.
| | 01:03 | By placing your CSS in an external
file and linking it to all the pages in
| | 01:07 | your site, you can control any updates to
your site's formatting through that single file.
| | 01:13 | CSS doesn't have to be placed
in an external file, however.
| | 01:16 | When you are creating your CSS, you
have several options about where the
| | 01:20 | styles should be placed.
| | 01:22 | You can place styles in external
files and then link them to pages.
| | 01:25 | You can embed the styles within an
individual Web page, or you can create inline
| | 01:30 | styles that are actually part of
the single element in your code.
| | 01:33 | Now for the most part, inline styles
are discouraged, but are occasionally very
| | 01:37 | useful for items that will be used in
basic user agents, such as HTML Emails.
| | 01:43 | Deciding where to place your styles
has a lot to do with how you wish to take
| | 01:47 | advantage of the cascade itself.
| | 01:49 | As a general rule, inline styles will
overwrite embedded styles, which will, in
| | 01:54 | turn, overwrite external styles.
| | 01:57 | That makes it possible to have global
styles in external documents, and then use
| | 02:01 | the cascade to overwrite some of
those styles locally in specific pages.
| | 02:06 | Now that we have a basic understanding
of how styles work, we will examine a
| | 02:10 | style rule in detail in our next movie,
so that we can understand the structure
| | 02:14 | and syntax of the CSS rule.
| | Collapse this transcript |
| The anatomy of a CSS rule| 00:00 | Styles in CSS are made up of two parts:
| | 00:03 | the selector and the declaration.
| | 00:05 | The selector comes first and describes
the element on the page that is to be
| | 00:08 | controlled through this rule.
| | 00:10 | Here we see what is known as an element
selector, and it will be controlling all
| | 00:14 | heading 1s in our current document.
| | 00:16 | Next, we have the declaration.
| | 00:18 | The declaration is contained within
these curly braces, which essentially tell
| | 00:22 | the browser that all properties
contained within should be applied to the
| | 00:26 | element identified by the selector.
| | 00:29 | Inside the declaration, we
have properties, and values.
| | 00:32 | Notice that they are separated by a
colon and then ended with a semicolon.
| | 00:36 | This tells the browser to move on to the
next property if there are any available.
| | 00:40 | In this case, our rule will take all
heading 1s on the page, make them Arial,
| | 00:45 | 1.4 ems in size, and red.
| | 00:49 | Now if you are brand-new to CSS,
the syntax is going to look a little
| | 00:52 | intimating, but by breaking down the
syntax into its individual parts, it's easy to
| | 00:57 | see how simple a CSS rule actually is.
| | 01:01 | The nice thing about creating CSS within
Dreamweaver is the various options that
| | 01:05 | you have when generating styles.
| | 01:07 | If you were the type that really likes
to hand-code, Dreamweaver gives you a
| | 01:11 | lot of support, including code hinting for
CSS that really speeds up the coding process.
| | 01:17 | If, on the other hand, you don't like
the hand-code, or you have never done it,
| | 01:20 | Dreamweaver does a great job of
creating the CSS for you, so that you don't
| | 01:24 | really need to worry about the syntax.
| | 01:27 | Just like any other automated process,
it's a really good idea to know how to
| | 01:31 | manually tweak your styles just in case you
need to make minor adjustments here and there.
| | 01:36 | So my advice is that even if you use
Dreamweaver to generate your styles for
| | 01:40 | you, be sure that you understand the
rules and syntax of CSS, just in case you
| | 01:45 | have to go under the hood
and work on the code yourself.
| | Collapse this transcript |
| Setting CSS preferences| 00:00 | As you begin to work with more and
more sites, you will find that you have a
| | 00:03 | specific way that you want your
styles to be presented and formatted.
| | 00:08 | If you are like me, those preferences
might change over time as you get more
| | 00:11 | comfortable with doing things by hand.
| | 00:13 | Fortunately, Dreamweaver has multiple
preferences that allow customization of
| | 00:17 | exactly how your styles are
created, presented, and formatted.
| | 00:22 | Let's take a moment to go over these
preferences and customize how Dreamweaver
| | 00:25 | goes about creating your CSS.
| | 00:28 | So I have the main.css file opened,
and if I just scroll down, I can see that
| | 00:32 | there are a lot of styles in this document.
| | 00:35 | Hundreds and hundreds of lines of them
actually, and these are the styles that
| | 00:38 | are driving our Explore California site.
| | 00:40 | Now before we get into creating these
styles, I think it's useful to take a
| | 00:43 | look at some of the preferences that govern
how these styles are displayed in our Code view.
| | 00:48 | So I am going to go out to my Preferences.
| | 00:50 | Again, you can go to Edit > Preference on
the PC, Dreamweaver > Preferences on the
| | 00:53 | Mac, and the first preference I
want to go to is Code Coloring.
| | 00:57 | Now some people complain about the magenta,
and I think it's a little hard to see.
| | 01:01 | Well, you can change that if you like.
| | 01:03 | So if I go to Code Coloring, I can
select the CSS Document type, and click on
| | 01:07 | the Edit Coloring Scheme.
| | 01:09 | We have a little preview down here
that shows you any changes that you make
| | 01:12 | and what they are going to look like
within your structure, but you can come
| | 01:15 | right down here and choose CSS Selector, for
example, and you can change the color of that.
| | 01:20 | So maybe you might want to
make them red, for example.
| | 01:23 | Now just be consistent with that
because if you using red for Selector, and a
| | 01:27 | friend of yours is using green for
Selector, it's going to be really different.
| | 01:30 | Also, recognize that some
colors are pretty common.
| | 01:33 | For example, green is typically used to
denote literal strings like you see here.
| | 01:37 | So changing that to something else
might actually throw somebody that's used to
| | 01:40 | seeing in the green.
| | 01:41 | So just be sure that what you change
is going to be consistent for you and any
| | 01:45 | team that you are on.
| | 01:46 | I am going to switch that back to magenta.
| | 01:48 | I actually don't mind it, to be honest with you.
| | 01:50 | Now there is another setting
that you can change as well.
| | 01:53 | If I go into the Code Format preference,
and for the Advanced Formatting choose
| | 01:58 | CSS, I can choose exactly
how my CSS is formatted.
| | 02:03 | Right now, each property is on a separate line.
| | 02:06 | That makes it extremely easy to read,
and as you are writing your CSS code
| | 02:10 | for the first time,
| | 02:11 | I really recommend that.
| | 02:12 | However, it also takes up more lines of code.
| | 02:15 | So if you turn that off later on, you
can shorten the lines of code that your
| | 02:18 | CSS is taking up, and that might
actually make it a little bit easier to deploy.
| | 02:22 | So that's usually something I change
once I am ready to go ahead and make
| | 02:25 | this code live online.
| | 02:26 | I am going to go and click OK here.
| | 02:29 | Now there are a couple of other
preferences that you can change, but I want to
| | 02:32 | show you why you might want
to change those preferences.
| | 02:34 | So I am just going to go ahead and
click OK, and I am going to write a rule for
| | 02:38 | you that shows off what I was talking about.
| | 02:40 | Oh - they changed to red anyway. Well that's okay.
| | 02:43 | Again, it's so easy to change that preference.
| | 02:44 | I can go and change it in just a little bit.
| | 02:46 | Okay, so, just anywhere on here, I am
going to create a rule for my heading 1s.
| | 02:51 | Now if I open up my curly brace and hit
Return to go down to the next line, I am
| | 02:54 | just going to do some margins here.
| | 02:56 | So I am going to do a margin-top.
| | 02:58 | So that's going to add a top
margin to my headings of 10 pixels.
| | 03:02 | Then I am going to add a
margin to the right of 10 pixels.
| | 03:08 | Then I am going to add a
margin to the bottom of 10 pixels.
| | 03:13 | Then I am going to add a
margin to the left of 10 pixels.
| | 03:18 | Now don't worry about doing this with me.
| | 03:20 | I am just trying to show you one of the
things that Dreamweaver can do to speed
| | 03:24 | up the creation of your CSS and make
your CSS a little bit more efficient.
| | 03:27 | But what I have done here is I have
created a rule for heading 1s that
| | 03:31 | contain both the top, right, bottom, and left
margin, and you can see they are all 10 pixels.
| | 03:36 | Well, that's four lines of code.
| | 03:38 | That's adding a good bit of weight.
| | 03:39 | I could have actually written
the exact same rule this way.
| | 03:43 | I could have just typed in margin:
| | 03:45 | 10px, much shorter, right?
| | 03:49 | Well, this is what we call shorthand
notation, and if you are having Dreamweaver
| | 03:53 | generate your code for you, it's not a
bad idea to go ahead and tell Dreamweaver
| | 03:57 | that you would like to use the
shorthand notation so that your code becomes as
| | 04:00 | efficient as possible.
| | 04:01 | Let me show you where to set that.
| | 04:04 | If you go to Edit > Preference or again,
Dreamweaver > Preferences on the Mac, you
| | 04:08 | can now go down to the category CSS Styles.
| | 04:11 | You will notice that we have some
check boxes here for creating shorthand
| | 04:16 | notation, Background properties,
Margins like I was just working on, and
| | 04:20 | padding, Border, border widths, List-
Styles, Fonts. All of those have an ability
| | 04:26 | to create shorthand notation.
| | 04:27 | Well, I am going to go ahead and check
everybody except for Fonts, and why is that?
| | 04:32 | Well, if you do a font shorthand notation,
and if you are brand-new to CSS, this
| | 04:36 | might not really make whole lot of
sense right now, but trust me, as you learn
| | 04:40 | more about CSS, this will
make a whole lot of sense.
| | 04:42 | But if you do font shorthand notation,
you have to set properties for font
| | 04:47 | weight, font size, font style, font
family, and you have to do it in the proper
| | 04:53 | order, font variant, all that stuff.
| | 04:55 | The main problem with that is that if
you don't state one of those, let's say
| | 04:58 | you left out font weight, or you left
out font variant, what would happen is
| | 05:02 | the default would be used for that, and it
might actually overwrite one of your other styles.
| | 05:06 | So I typically don't use font
shorthand notation unless I am really sure of
| | 05:10 | where I want to use it.
| | 05:11 | So I typically turn that off and
do font shorthand notation by hand.
| | 05:15 | So I have got those four items checked.
| | 05:18 | Notice that we can also tell
Dreamweaver exactly when to do that.
| | 05:21 | Notice that we can say, "Hey, only
change it if the original uses shorthand, or
| | 05:25 | change it based on all these
settings that we have above."
| | 05:27 | So we are going to do that.
| | 05:29 | Then finally, we have an option of what to do
if we double-click the CSS file in the CSS panel.
| | 05:36 | Now if we edit a rule, for example,
let's say, I was to double-click on an h1
| | 05:40 | rule in the CSS panel, it would open
up the CSS dialog box that we are going to
| | 05:44 | be seeing in just a moment, or I have
the opportunity of editing it within
| | 05:48 | the Properties Pane,
| | 05:49 | I will show you that option in a just a moment,
or the opportunity to jump into Code view.
| | 05:53 | This is all about personal preference.
| | 05:55 | If you are brand-new to CSS, I
recommend leaving this as Edit using CSS dialog.
| | 06:00 | That dialog box is typically a little
bit easier for people who are new to CSS
| | 06:04 | to use because it just presents you
with certain options, and you don't have to
| | 06:07 | worry about any of the syntax.
| | 06:09 | So with those options set, I am going
to go ahead and click OK, and now I know
| | 06:13 | that my CSS is set up to the preferences
that I want for my particular workflow.
| | 06:17 | Now, not everybody likes to work with
CSS the same way, and I think it's great
| | 06:21 | that Adobe makes it so easy for us to
get Dreamweaver's workflow to match our
| | 06:25 | own personal preferences.
| | 06:27 | I would advise you to monitor how you
work with Dreamweaver over time, so that
| | 06:31 | you can make sure that Dreamweaver's
workflow reflects the way that you like
| | 06:35 | to work.
| | Collapse this transcript |
| The CSS Styles panel| 00:00 | The CSS Styles panel acts as the
central hub for all things CSS in Dreamweaver,
| | 00:05 | providing you with both a global
view of all document styles, as well as
| | 00:09 | allowing you to focus on
individual rules and style applications.
| | 00:13 | So for this exercise, I have our
resources.htm file open in the 06_04 folder.
| | 00:21 | Now, you are going to find the CSS
Styles panel in the CSS panel Grouping.
| | 00:25 | That's usually located at the top of the
panel Dock, although you can reposition
| | 00:29 | it in Custom Workspaces if you would like.
| | 00:31 | Now, I am going to give myself a little
bit more room here by double-clicking on
| | 00:35 | the Files panel tab.
| | 00:36 | That will collapse that, and that will
give us a full dock to work here with the
| | 00:40 | CSS Styles panel, because depending upon
the view you are looking at with, it
| | 00:43 | can take up a lot of room.
| | 00:45 | Now, at the very top of the panel, you will
find buttons for two views: All and Current.
| | 00:51 | The All View gives you an overview
of all of the CSS Styles applied to
| | 00:55 | the current document,
| | 00:57 | while the Current View gives you a
detailed view of the rules applied to
| | 01:01 | a selected element.
| | 01:02 | Before we start creating our styles in
earnest, let's take a moment to get a
| | 01:06 | little bit more comfortable with finding
our way around and using the CSS Styles panel.
| | 01:11 | Now, if I click on All and I scroll
all the way up to the top of my rules
| | 01:15 | listing, I can see that I have a
external style sheet link to this file.
| | 01:18 | How do I know it's an external style sheet?
Because it says main.css; I can see the extension.
| | 01:24 | I can collapse all these rules.
| | 01:26 | If you had multiple style sheets or
embedded styles, you would see all of those
| | 01:29 | guys listed as well.
| | 01:30 | But for this particular file, we just
have the one external style sheet linked.
| | 01:34 | Now, we do have some
parentheses right up beside it that says,
| | 01:37 | screen, projection.
| | 01:40 | Those are referring to the
media type for the style sheet.
| | 01:42 | If I switch over to the Code View of the page,
you can see, right here in this Link file,
| | 01:48 | we have an attribute that says
media = "screen, projection".
| | 01:52 | That means that these styles are to be
applied to any devices that request the
| | 01:56 | screen or projection media type.
| | 01:58 | So these styles wouldn't apply to
screen readers or other user agents like that.
| | 02:03 | I am going to switch back to Design view.
| | 02:05 | Let's take a look at specific rules.
| | 02:08 | I am going to click right here
in the single rule, Got questions.
| | 02:11 | Now, I can see, by looking at the
structure of my page and my Tag Selector, that
| | 02:15 | this is inside of a <h1>, which is
inside of a div with the ID of mainArticle,
| | 02:19 | which is inside of a <div#mainContent>.
| | 02:23 | So I can look for some specific
rules that are controlling that element,
| | 02:27 | however, it's a lot easier to find if I click
inside that and switch over to Current mode.
| | 02:32 | Current mode tells me exactly
the rule that I am targeting.
| | 02:35 | I am just going to expand this out a
little bit, so you guys can see this a
| | 02:38 | little bit better, because
sometimes that's a little hard to see.
| | 02:42 | I may need to rearrange
this panels a little bit.
| | 02:43 | So notice that you can take the CSS
Styles panel, and you can begin to move
| | 02:47 | these dividers to give
yourself a little bit more room.
| | 02:49 | Let's examine the Current
rule in a little bit more detail.
| | 02:53 | The top pane gives us a
Summary for the current Selection.
| | 02:56 | Here we see all of the properties that
are styling our currently selected content.
| | 03:00 | Now, not all these properties
necessarily come from the same rule.
| | 03:03 | That's one of the things about CSS.
| | 03:05 | You will notice that if you hover over
one of the properties, it will tell you
| | 03:08 | exactly which rule they are coming from.
| | 03:10 | Notice that they are not
all coming from the same rule.
| | 03:13 | Now, if we look down below that,
we can see all of the rules that are
| | 03:16 | affecting this element.
| | 03:18 | I can scroll back and forth to see
which rules are affecting it the most.
| | 03:22 | The ones at the bottom are the most
specific styles and any content set here
| | 03:26 | would overwrite content
set in the styles above it.
| | 03:30 | Finally, down below that, if I select
any of these individual rules, I get the
| | 03:34 | properties for those specific rules.
| | 03:37 | If I want, I could even Add
Additional Properties to those.
| | 03:40 | So let's say that I wanted a little bit
of extra spacing down below this headline.
| | 03:45 | I could select the rule that
I want to affect, in this case,
| | 03:47 | #mainContent #mainArticle h1.
| | 03:51 | I could just click right here to Add a Property.
| | 03:52 | Now, you can grab that pulldown list, if
you are not as familiar with property names,
| | 03:56 | or if you know what you want to
do, you could just type it in.
| | 03:59 | In this case, I am going
to choose margin-bottom.
| | 04:00 | Just going to add a little
bit of space underneath this.
| | 04:04 | So I am going to type in .4 em, and that's em.
| | 04:07 | So I can just type in .4 em and hit Return.
| | 04:10 | That's going to increase the spacing.
| | 04:12 | You can see the text here
went down by just a little bit.
| | 04:14 | So anytime you want, you can use the CSS
Styles panel to add to an existing rule
| | 04:19 | without having to go to any code or
open up any additional dialog boxes.
| | 04:23 | Now, I am going to switch back to All
for just a moment and talk about what
| | 04:26 | types of things we can display in the All View.
| | 04:29 | First off, we get all of our rules
that are in our external style sheet.
| | 04:32 | So a lot of times here, you have to
scroll down until you find the rule that
| | 04:35 | you are looking for.
| | 04:37 | So if I scroll down, I can find
right here, #mainContent #mainArticle h1.
| | 04:43 | That's the rule that we just changed.
| | 04:44 | If I click on that, I can see that
now I have the same summary of the
| | 04:48 | properties in that rule.
| | 04:49 | I have the ability to Add
Properties here as well.
| | 04:52 | Well, you can change how
this panel displays these rules.
| | 04:55 | If you notice in the CSS Styles panel,
there are three icons in the lower
| | 04:59 | left-hand corner of the All View.
| | 05:02 | The first icon gives us what
is known as a Category View.
| | 05:05 | It's going to be a listing of all the
categories, such as Fonts, Backgrounds,
| | 05:08 | Block level changes, Borders, Box model.
| | 05:12 | So if you are familiar with these
categories, you can quickly access them and
| | 05:15 | change properties directly
through this Category listing.
| | 05:18 | We also have a listing that Shows List
View of every single CSS property that
| | 05:23 | you can change, and there are a lot of them.
| | 05:26 | So if you like that view, you get
a nice alphabetical list of those.
| | 05:30 | Any properties that are being used and
set on the rule will appear at the very
| | 05:33 | top of the listing, and they are
highlighted and colored in blue.
| | 05:36 | Finally, we have my Favorite view.
| | 05:37 | The Favorite view shows only
the properties that you have set.
| | 05:41 | It reduces the amount of
clutter that you have to look at.
| | 05:44 | That's my preferred view, and
that's typically what I will do.
| | 05:47 | Now, the CSS Styles panel
can be used for a lot more too.
| | 05:49 | Let's say we want to create a different rule.
| | 05:51 | In this case, maybe we want to create a
rule that's going to control this heading too.
| | 05:55 | It's going to be very
similar to what we had before.
| | 05:58 | So I am just going to scroll
down and click inside that heading 2.
| | 06:00 | I am going to go down to me CSS
Styles panel, and in the lower right-hand
| | 06:04 | corner, there is another set of icons.
| | 06:06 | The one that has the page with the Plus
symbol on it, if you hover over that, it
| | 06:09 | will tell you that's a New CSS Rule.
| | 06:11 | I am going to click on that.
| | 06:12 | Now, we are going to cover this dialog
box in a little bit more detail later on.
| | 06:16 | Suffice it to say that this dialog box is
going to assist you in creating your rules.
| | 06:21 | In this case, notice that it
automatically came up with what we call a Compound
| | 06:24 | Selector, because it knows that there
are a lot of factors identifying that
| | 06:28 | element on the page.
| | 06:29 | So we are seeing here #
wrapper #mainContent #mainArticle h2.
| | 06:33 | Well, I am going to get a little less
specific with it, because if you remember,
| | 06:36 | our previous rule that had the h1 had
the #mainContent and #mainArticle, but it
| | 06:40 | didn't have wrapper, so
that's not really necessary.
| | 06:42 | So I am going to choose Less
Specific, and that resolves itself to say
| | 06:45 | #mainContent # mainArticle h2. Perfect!
| | 06:49 | I can also tell Dreamweaver
where to place these styles.
| | 06:51 | In this case, I am going to place it in
main.css, which is that external style sheet.
| | 06:56 | Your other choice is to place it in
(This document only), which would embed it
| | 07:00 | in the head of the file.
| | 07:01 | Or you can create a brand New
Style Sheet to place that in as well.
| | 07:04 | I am going to leave that
as main.css and click OK.
| | 07:07 | Now, this is a great dialog box.
| | 07:09 | What we get now is the CSS
Rule Definition dialog box.
| | 07:13 | This is a dialog box
that's separated by Categories:
| | 07:16 | Typography, Background, Block properties,
Box model properties, that you can go
| | 07:20 | through and set each one of those
properties for this specific rule.
| | 07:24 | So again, if you are not that familiar
with CSS, this is a great dialog box to
| | 07:27 | access, because it gives you an ability
to go ahead and choose all these items
| | 07:31 | for your particular element.
| | 07:33 | In this case, Font-size.
| | 07:35 | I am going to click in Font-size and say 1.6 em.
| | 07:38 | You can just type in em, or you can grab ems
from the pulldown menu right there. So 1.6 em.
| | 07:45 | For Color, I am going to type in #51341a.
| | 07:53 | If you hit Tab, you can see that that's
going to be that brown color that we are
| | 07:56 | using throughout our site.
| | 07:57 | Now, CSS can either use RGB values or
Hexadecimal notation for color values.
| | 08:03 | Most people use hexadecimal values,
| | 08:05 | although with the advent of CSS3 and
HTML5, RGB values are starting to be used
| | 08:10 | in an increasing amount.
| | 08:11 | Font-weight, I am going to grab
that pulldown menu and choose Normal.
| | 08:15 | Most headings are Bold be default,
but I want this heading to not be bold.
| | 08:19 | So I am going to change Font-weight to Normal.
| | 08:21 | I am also going to go down and set a
couple of other properties in my Box category.
| | 08:26 | The Box category is where you choose
things like Padding and Margins, so it's
| | 08:30 | primarily used for spacing.
| | 08:31 | For Margin, I am going to deselect
Same for all, and for Top Margin, I am
| | 08:35 | going to type in 1.2 em.
| | 08:37 | For Bottom Margin, I am
going to just type in 1 em.
| | 08:41 | Now, if you are curious about what an
em is, we will have a movie a little bit
| | 08:44 | later on that describes unit of measurements.
| | 08:46 | But an em is a unit of measurement
typically used in relation to type.
| | 08:50 | Finally, we are going to do one more
thing that might be a little confusing for
| | 08:54 | those of you who are new to CSS.
| | 08:55 | We are going to grab this Clear
Property, and we are going to choose Both.
| | 08:59 | What that will do is it tells
Dreamweaver, "Don't allow objects to float to my
| | 09:03 | left or float to my right."
| | 09:05 | It's basically going to make sure that
this heading is on its own line and not
| | 09:09 | effected by any floats that we
may have replaced into our file.
| | 09:11 | I am going to go ahead and click OK, and
I can see right there my heading changes.
| | 09:16 | Now, you will notice that it placed
that rule right underneath the h1 tag.
| | 09:20 | How did it know to do that?
| | 09:21 | Well, it wasn't guessing.
| | 09:23 | It was the fact that I actually had the h1
rule selected in my styles before I created it.
| | 09:28 | So if you want to control the
placement of where your rules go, make sure you
| | 09:32 | highlight the rule just
above where you want it to be,
| | 09:35 | although you can certainly select
rules and drag them up and down the order to
| | 09:39 | organize them if you would like.
| | 09:41 | Now, I know it seems like we have
covered a lot of ground, but to be honest, we
| | 09:45 | have just scratched the surface of what we
can do with the CSS Styles panel. Don't worry.
| | 09:49 | You will be using the CSS Styles
panel throughout the rest of this title.
| | 09:53 | That's going to give you plenty of
time to familiarize yourself with those
| | 09:56 | capabilities, as well as exploring
some of its additional functionality a
| | 10:00 | little bit later on.
| | Collapse this transcript |
| Controlling CSS through the Properties Inspector| 00:00 | While the CSS Styles panel is where
you are going to be doing the majority of
| | 00:03 | the work on your CSS, the Properties
Inspector allows you to do a fair amount of
| | 00:08 | CSS-based work directly through it,
without having to go to the Styles panel.
| | 00:13 | It is important to note, however,
that without understanding what the
| | 00:16 | Properties Inspector is doing, in
regards to CSS, you can cause some major
| | 00:21 | issues within your site.
| | 00:22 | So let's take a moment to examine how the
Properties Inspector works with your site's CSS.
| | 00:29 | So I have the index.htm
opened here in the 06_05 folder.
| | 00:35 | Let's scroll down just a little bit so
that I can focus on this first paragraph,
| | 00:39 | Explore our world your way, and we
are going to explore how the Properties
| | 00:43 | Inspector allows us to interact
and change the CSS of this paragraph.
| | 00:47 | So I am just going to click to focus
inside that paragraph, anywhere inside of it.
| | 00:52 | Now, in the Properties Inspector, I
need to focus on my CSS Properties.
| | 00:56 | So I am going to click the CSS tab and make
sure that's highlighted and not the HTML tab.
| | 01:01 | It's a pretty easy to tell because we
get some formatting attributes here in
| | 01:05 | place of the other items
that we were seeing in HTML.
| | 01:08 | Now, we are presented with some
formatting options, but they are fairly limited.
| | 01:12 | Notice that we get Font, Size, and Color.
| | 01:15 | We also have Bold and Italic, but
remember, those two are going to trigger the
| | 01:20 | creation of a brand-new style.
| | 01:22 | We also have text alignment, so
Align Left, Center, Right, Justified.
| | 01:26 | Those are some of the things
that we can change here in the
| | 01:29 | Properties Inspector.
| | 01:30 | Now, I want to show you something that's
really, really important, and when most
| | 01:34 | people first start using the
Properties Inspector to change their formatting,
| | 01:38 | they don't really pay
attention to this, and it's a big deal.
| | 01:41 | Notice that as soon as I clicked inside
this paragraph, right over here in this
| | 01:44 | pulldown menu, Targeted Rule changed.
| | 01:46 | If I click inside the heading,
for example, notice that it's
| | 01:49 | targeting #mainContent h1.
| | 01:51 | If I click inside the paragraph, it's
targeting the #mainContent p. Now, what is that?
| | 01:57 | Well, that's a CSS rule
that has already been created.
| | 02:00 | That means that that rule is in
existence right now in our external style sheet.
| | 02:04 | If you were to browse through your CSS
Styles, you would eventually find that.
| | 02:08 | There is the rule, #mainContent p.
| | 02:11 | So how did it know which rule to target?
| | 02:13 | Well, it picks the closest rule to that element.
| | 02:16 | So the most specific rule that's
affecting the element is going to show up
| | 02:20 | within your Targeted Rule.
| | 02:21 | Sometimes that's a really
specific rule, like the one we see here.
| | 02:25 | Sometimes it's a really
generic rule, such as a paragraph.
| | 02:27 | Now, what that means is that any
change that you make to these formatting
| | 02:32 | properties over here will affect that rule.
| | 02:36 | Now, that's not always
going to be what you want.
| | 02:39 | So you do have the ability to grab
this pulldown menu and choose any rule.
| | 02:43 | You will find classes down here.
| | 02:45 | Those would allow you to actually
apply the class to the paragraph, by the
| | 02:47 | way, not change it.
| | 02:49 | But if you go up from that, you can see all
of the rules that are affecting this paragraph.
| | 02:54 | There's #mainContent p. Well, I could
shift that, so that it was affecting just
| | 02:58 | that generic Targeted p Rule as well.
| | 03:01 | So it's up to you to either use the
default when it comes up or to choose your own.
| | 03:05 | Now, there's another thing
that's really important here as well.
| | 03:09 | A lot of people assume that based on the
Targeted Rule they are seeing here that
| | 03:12 | these properties come from that
specific rule. That's not true.
| | 03:16 | Notice if I hover over the Font, I get
a little tooltip that comes up that says
| | 03:20 | "Hey, the property "font-family" is
inherited from the rule "body"." Size,
| | 03:24 | if I hover over that, it says, "That's coming from
#mainContent p," and that's our Targeted Rule.
| | 03:29 | Finally, if I hover over Color, notice that
that says, "Hey, that's coming from the Rule p."
| | 03:34 | So those three values are
coming from three different selectors.
| | 03:39 | So if you were to change one of
those properties, it's not going to be
| | 03:43 | guaranteed to be changed in the Targeted Rule.
| | 03:45 | It's going to be changed in
whichever rule it's found in.
| | 03:48 | So in this case, if I change Color,
it's going to go back and change that
| | 03:51 | within the paragraph rule.
| | 03:52 | It's not going to add
that to the #mainContent p.
| | 03:55 | Let's see that in action.
| | 03:57 | So if I go here and click on this
Color Chip, I can choose any color I want.
| | 04:00 | I can even type in a color.
| | 04:02 | But there's something really cool you can
do here in Dreamweaver. Check this out.
| | 04:05 | Let's say I wanted to use one
of the colors in my interface.
| | 04:08 | I could click on the Color Chip, move
my mouse, and I could move it over any
| | 04:11 | area of the interface, even photographs.
| | 04:13 | So let's say I want to pick up
the purple color from her shirt.
| | 04:16 | I could go ahead and choose that, and
now my paragraphs are that purple color.
| | 04:20 | Well, notice again, that if I hover
over that Color Chip, it tells me that the
| | 04:24 | property color is being inherited from
the Rule p. So instead of just changing
| | 04:29 | all my main content paragraphs -
let me scroll, and I will show
| | 04:32 | you what I am talking about -
| | 04:34 | I changed the color of all my
paragraphs, so all my paragraphs have that
| | 04:38 | purple color to it.
| | 04:39 | So using the Properties Inspector to
speed up your CSS workflow does make a lot
| | 04:44 | of sense, but as you can see, you really
need to be aware of how the changes you
| | 04:49 | are making might be affecting
styles elsewhere in your site.
| | 04:53 | As your command over CSS grows and
you get more comfortable structuring the
| | 04:57 | styles within your site, you will find
the Properties Inspector an indispensable
| | 05:01 | part of your day-to-day workflow.
| | 05:03 | Initially, however, I really want to
caution you to be careful when using it, so
| | 05:07 | that you don't make unintended changes,
either throughout your site or perhaps
| | 05:11 | in targeting the wrong selector.
| | Collapse this transcript |
| Using the Code Navigator| 00:00 | The creation and modification of CSS is
central to almost everything you do when
| | 00:05 | designing Web pages.
| | 00:06 | We see this focus reflected in the
number of panels and tools that Dreamweaver
| | 00:10 | provides us to work with our CSS.
| | 00:13 | Of those tools, I count the Code
Navigator as one of the most important.
| | 00:17 | The Code Navigator gives you an easy
way to access and modify your styles from
| | 00:21 | anywhere in your document, without
having to know exactly which rule is
| | 00:25 | controlling the element from within your styles.
| | 00:27 | As your site gets more complicated,
it's not unusual to have styles in
| | 00:31 | various places throughout your site
all coming together at runtime to
| | 00:34 | determine final rendering.
| | 00:36 | Because of this, it can often be
difficult to know exactly which rule to modify
| | 00:41 | to achieve the desired results.
| | 00:43 | Let's take a moment and explore the
Code Navigator and how it can help you
| | 00:47 | quickly assess and access your styles.
| | 00:50 | So here I have the tours.htm open.
| | 00:53 | If I scroll down to the page, I
can see something is a little amiss.
| | 00:57 | So here we have our tour description
text, and the font size is a little large,
| | 01:02 | and the line spacing is a little large as well.
| | 01:05 | I would like this text to be a little
smaller, so that it would fit a little bit
| | 01:08 | more neatly right beside
each of the graphics there.
| | 01:12 | So right now, we are having some text
sort of flow down there and break, and
| | 01:15 | it's a little too big, so I want
to change that up a little bit.
| | 01:18 | Now, if you look over in our CSS Styles
panel, you can see how many selectors we
| | 01:23 | have driving this page.
| | 01:25 | There's a tremendous amount of selectors.
| | 01:27 | So it would probably take us a fair
amount of time to comb through all those
| | 01:30 | selectors to figure out exactly
which one is driving this text.
| | 01:35 | Now, knowing the structure of what
you are working with really helps.
| | 01:37 | If I click inside this text, I
notice that it's inside of a div with the
| | 01:42 | class, tour description.
| | 01:43 | So that is probably a nice
indicator of exactly what's controlling this.
| | 01:48 | Now, this is where the Code
Navigator can really help us.
| | 01:52 | If you click inside of an element, if
you just wait for a second or two, you are
| | 01:55 | going to see this little icon come up.
| | 01:57 | It looks kind of like the
steering wheel of a ship.
| | 02:00 | If you hover over that icon, it will
tell you that this is the Code Navigator.
| | 02:05 | Clicking on that is going to open up
another window, sort of like a tooltip.
| | 02:09 | You are going to see this listing of all
the styles that are affecting this element.
| | 02:12 | So what we are looking at right now
is a list of all of the selectors in our
| | 02:16 | CSS, that is, in some way or
another, styling that particular element.
| | 02:21 | This means that every time you click
on an element, you are going to see a
| | 02:24 | totally different list, based off of
that element and the styles driving it.
| | 02:28 | These styles are arranged in the
order of farthest from the element to the
| | 02:31 | closest of the element.
| | 02:32 | Now, what that means is any property
at the bottom of the list that conflicts
| | 02:37 | with the property above
it, bottom property wins.
| | 02:39 | So if you are wondering, "What size
is this? What line-height?" you can just
| | 02:43 | start at the bottom, hover over the rule.
| | 02:45 | You will see a summary of that rule's
properties, and you can just go sort
| | 02:49 | of all the way up to determine exactly
which rules are controlling which properties.
| | 02:52 | So in this case, we have this
#mainContent .tourDescription p, very
| | 02:56 | descriptive, very specific rule, and all
its doing is setting font-size to 1 em.
| | 03:02 | The rule just above that,
#mainContent p, is giving us both font-size and
| | 03:07 | line-height, and then finally, the rule
just above that is giving us our color.
| | 03:11 | So you might think to yourself,
"Well, I probably should modify this one
| | 03:15 | for line-height and this one for
size, and if I wanted to change color,
| | 03:18 | maybe refine that one,"
| | 03:20 | but here's the problem with that.
#mainContent p is going to be controlling all
| | 03:25 | paragraphs found within the mainContent.
| | 03:27 | We need to be a little bit more
specific, because remember, we only want
| | 03:31 | to change this text.
| | 03:32 | So really the rule that we are going
to be changing is the targeted rule at
| | 03:35 | that very bottom of the list.
| | 03:37 | Now, before we get into how to use the
Code Navigator to make changes to your
| | 03:40 | CSS, I want to talk a little bit more
about the Code Navigator's functionality.
| | 03:45 | You will notice that every time you
click on an element, that icon comes up.
| | 03:48 | Well, if you are not in the mood to work
with a Code Navigator or that's not the
| | 03:52 | task at hand, that can be
more than a little annoying.
| | 03:56 | So I know a lot of people out there
that don't like the Code Navigator, just
| | 03:59 | because it seems to always get in the way.
| | 04:00 | Well, notice, in the lower right-hand
corner of this dialog box, we have a
| | 04:04 | little checkmark that says Disable.
| | 04:06 | I am going to go ahead and check that.
| | 04:08 | Now, that also might bring up the
question, well, if you disable it, then how in
| | 04:12 | the world do you use it?
| | 04:12 | Well, just to the left of that you will
see a keyboard shortcut indicating how
| | 04:16 | to bring up the Code Navigator.
| | 04:17 | On the PC, you will Alt+
Click an item and on the Mac,
| | 04:21 | you will Option+Command+Click an item.
| | 04:23 | So now with that disabled, let me
click off of my element again, and now no
| | 04:26 | matter where I click, or how long I pause,
the Code Navigator icon doesn't come up anymore.
| | 04:32 | So if we are not actually trying to use it,
it's not going to get in the way. I like that.
| | 04:37 | But now, to bring it up, all I have to do is
hold down my Alt key and click on the element.
| | 04:42 | Remember, if you are on a Mac, you are
going to hold down your Command and your
| | 04:45 | Option key while you click.
| | 04:46 | That brings up the exact same dialog
box, and now you control when the Code
| | 04:50 | Navigator appears, and for me,
that's a lot more efficient. Okay.
| | 04:54 | Well, let's see how we can actually
change this selector so that the text is
| | 04:57 | doing what we want it to do.
| | 04:58 | I am going to go all the way down
and find that last rule, # mainContent
| | 05:03 | tourDescription p. I will hover over
that, and I am just going to click it.
| | 05:07 | You will notice, as soon as you
hover over it, that it becomes a link.
| | 05:09 | I am just going to go ahead and click that.
| | 05:11 | Now, that's going to take me to
this rule in two separate locations.
| | 05:15 | On the left-hand side, it takes
me directly into my CSS Code.
| | 05:19 | So if you prefer hand-coding, it's
going to jump you right to your CSS Code.
| | 05:23 | It's going to jump to that specific
spot, and you can just begin adding
| | 05:26 | properties or modifying the
ones that you already have there.
| | 05:28 | If hand-coding is not your cup of tea,
you will notice on the right-hand side
| | 05:34 | that if I look at my CSS Styles panel,
that rule is highlighted right there.
| | 05:38 | So it's very easy for me
to go ahead and select that.
| | 05:41 | So that's a pretty nice way of just
sort of jumping to that particular rule in
| | 05:44 | the CSS Styles panel without
having to browse all the way through it.
| | 05:48 | Now, to give myself a little bit more
room here, I am going to go ahead and
| | 05:50 | close my Files panel.
| | 05:52 | I can do that by double-clicking the tab here.
| | 05:54 | And now I can go in and modify the
properties for this particular rule.
| | 05:58 | Now, remember, I wanted to do two
things here, make the text a little smaller.
| | 06:02 | So I am going to change font
size from 1 em to 0.9 ems.
| | 06:06 | The next thing I wanted to do is adjust
the line height so that the lines were
| | 06:09 | a little closer together.
| | 06:11 | So I am going to click here to add a property.
| | 06:13 | Now, I can either type in the line
height property, or I can grab the pulldown
| | 06:17 | menu, scroll through the
list and find line height.
| | 06:20 | So if you are not exactly sure how
that's written out, feel free to use that list.
| | 06:25 | Next, I am going to type
in 1.5 for my line height.
| | 06:28 | That's a little shorter than 1.8,
which is what it was before.
| | 06:31 | And I am going to go ahead and make
sure we are doing a multiple there, rather
| | 06:33 | than a unit of measurement.
| | 06:34 | We will talk about line height in the
chapter on Typography, so we are going to
| | 06:38 | go into that in more
detail a little bit later on.
| | 06:40 | I am going to go ahead and hit Return
or Enter to make sure I make that change.
| | 06:43 | And if I switch over to Design view,
now we can see that our text is a lot
| | 06:47 | closer together, and it
fits within that space nicely.
| | 06:50 | I am going to go ahead and do a Save All, so
that my CSS is saved as well. And there we go.
| | 06:56 | We have used the Code Navigator to
target a specific element on the page and
| | 07:00 | modify its styles in order to achieve
the styling that we were looking for.
| | 07:04 | So as you can see, when working with
really complex sites, the Code Navigator
| | 07:09 | can greatly speed up the process of
identifying where a property is being set,
| | 07:13 | which properties from other rules are
being applied, and then targeting and
| | 07:17 | modifying the proper
rule for the desired change.
| | Collapse this transcript |
| Using CSS Enable| 00:00 | Sometimes, some of the best changes to
a program are their small, incremental
| | 00:04 | updates that just make
existing features work better.
| | 00:07 | A prime example of this, in CS5,
is the addition of CSS Enable to
| | 00:12 | Dreamweaver's CSS Workflow.
| | 00:15 | CSS Enable allows you to enable and
disable specific properties of a CSS rule.
| | 00:20 | This allows you to quickly
troubleshoot rules, asses the effectiveness of a
| | 00:24 | specific property, and experiment with design.
| | 00:27 | Let's take a quick look at CSS Enable, and the
different ways we can utilize it in Dreamweaver.
| | 00:32 | So here we have the tour_
detail_bigsur.htm file open.
| | 00:37 | Now, I'm going to scroll down just a tad bit.
| | 00:40 | I'm focusing on this little area
right here, the name of the tour and then
| | 00:44 | the price and the days.
| | 00:45 | Not crazy about that styling.
| | 00:47 | I don't really like what we have going on there.
| | 00:49 | But before we get into working with
the CSS of this, I want to take a closer
| | 00:53 | look at the actual source code of this,
so that we understand the structure
| | 00:57 | that we're styling.
| | 00:58 | I'm going to go to Split screen view,
and I'm look at the Source Code.
| | 01:01 | I may need to move this over
little but more, so it's less confusing.
| | 01:04 | What we're looking at is we're looking
at a heading two, so both of these lines
| | 01:09 | are single heading, heading two (h2)
Big Sur Retreat, and then 3 days $350.
| | 01:13 | You'll notice that the 3
days $350 is in a span tag.
| | 01:18 | Then that span tags class is tourCost.
| | 01:20 | So we're going to have two
selectors that we're dealing with here.
| | 01:23 | One is going to target the
h2 within the man article.
| | 01:26 | The other one is going to
target the span tag inside that h2.
| | 01:29 | So again, we need to modify both of
those in order to get the styling that
| | 01:33 | we're looking for, or at least the span
tag anyway, because it's the one that, to
| | 01:37 | me, doesn't look all that great.
| | 01:39 | So if I go ahead and click inside this
headline, Big Sur Retreat, I can go over
| | 01:44 | to my CSS Styles panel and click on Current.
| | 01:46 | Remember, that's going to show
me the current targeted style.
| | 01:49 | I'm going to go down to my Files panel,
double-click the tab, so I get a little
| | 01:53 | bit more room for my CSS Styles panel.
| | 01:55 | I see something that's a little
different from previous versions of Dreamweaver.
| | 01:59 | Notice that there is a
property called margin-bottom.
| | 02:02 | Margin-bottom has this little no
symbol right beside it here and here.
| | 02:07 | Well, that is CSS Enable.
| | 02:10 | So prior to working on this file,
margin-bottom has been disabled, and it
| | 02:14 | displays with that little
circle with a line through it.
| | 02:17 | Well, let's say that I actually
do want that margin on the bottom.
| | 02:20 | Enabling it is extremely easy.
| | 02:22 | I can just come right beside that,
wherever I find that, and click on it.
| | 02:25 | It's going to turn that property right back on.
| | 02:28 | So you use CSS Enable/Disable in
a number of different locations.
| | 02:32 | For example, you can
come up here to the Summary.
| | 02:36 | In the Summary, you can
Enable and Disable Properties.
| | 02:39 | You can highlight one of the
Properties down here in the bottom Summary.
| | 02:43 | You can use the Disable/Enable CSS
Property icon, which is right down here at
| | 02:48 | the bottom of your CSS Styles panel,
or you can go right beside the Property
| | 02:53 | itself here, and enable
and disable it here as well.
| | 02:56 | As we'll see in just a moment,
that works in the All view of the CSS
| | 02:59 | Styles panel as well. All right.
| | 03:01 | So I'm going to leave that turned on.
| | 03:03 | So I'm going to remember to enable that.
| | 03:05 | Now I'm going to go down to this 3 days $350.
| | 03:07 | So I'm just going to click right
there in that little subsection.
| | 03:10 | I see another listing of properties.
| | 03:13 | Again, I see one that's
already been disabled. Okay.
| | 03:16 | Let's change a couple of things here.
| | 03:18 | First off, I'm going to change color.
| | 03:19 | So I'm going to find the color property.
| | 03:21 | I'm going to change it from
#FFF to #333, which is a gray.
| | 03:27 | Now it really looks bad, but I am
going to play around with disabling some of
| | 03:30 | these other Properties.
| | 03:32 | I'm going to go ahead and
Disable the background color.
| | 03:35 | Then I'm going to go ahead and Disable padding.
| | 03:40 | Then I'm going to go ahead and Disable width.
| | 03:42 | So now, that looks a
little bit more reasonable.
| | 03:45 | In fact, I want to see what the bottom
border is going to look like on this.
| | 03:48 | So I'm going to turn that on.
| | 03:50 | In order to kind of preview how this is really
going to look, I'm going to turn Live View on.
| | 03:54 | I can go right up to my Document toolbar
right here, click on Live View to turn that on.
| | 03:59 | I like that formatting a lot
better than what we had before.
| | 04:03 | So one of the things that you can do
with CSS Enable is kind of play around
| | 04:07 | with various properties, find the ones
that give you the styling you're looking
| | 04:11 | for, and just kind of go with those.
| | 04:13 | Now, there are other things that you
need to be aware of with CSS Enable.
| | 04:17 | One of the things I'm going to do is
I'm going to go ahead and open up my CSS
| | 04:20 | file, and look at the code of that.
| | 04:22 | One of the easiest ways to do
that is bring up the Code Navigator.
| | 04:25 | So once again, I'm just
going to Alt+Click my text.
| | 04:28 | If you're on the Mac, you're
going to be Command+Clicking that.
| | 04:30 | I'm going to go right down here to the
bottom selector, click on that, check this out.
| | 04:35 | When you're in the Code Navigator,
and you hover over Property, if it has
| | 04:39 | disabled properties, it'll
show you that here as well.
| | 04:41 | So CSS Enable/Disable displays almost
anywhere that you'll see your CSS code.
| | 04:46 | Well, I'm going to click on that
to jump to that particular item.
| | 04:50 | Now if I look at this rule in particular,
I will see that these properties have
| | 04:54 | been disabled with a comment.
| | 04:57 | It's a very special type of comment,
because you'll notice it has this
| | 05:00 | bracket notation disabled.
| | 05:01 | Now you do not want to modify that in
Code view, because if you turn the comment
| | 05:06 | off, it's going to leave that bracket behind.
| | 05:09 | This property will not be re-enabled.
| | 05:10 | So make sure any enabling or
disabling using CSS Enable is done within
| | 05:16 | the CSS Styles panel.
| | 05:18 | I'm going to switch back to
Design view really quickly.
| | 05:21 | As I mentioned before, all of
those Properties that we disabled,
| | 05:24 | we really don't want them anymore.
| | 05:26 | So I'm going to switch over to my All view,
just to kind of preview how that looks.
| | 05:32 | If I scroll down, I can find
this selector. There it is:
| | 05:35 | #mainContent #mainArticle h2 span.tourCost.
| | 05:39 | Now, I see that all of those
disable Properties are listed.
| | 05:42 | Well, this is a nice, little feature.
| | 05:44 | I can right click that selector,
and I have the choice of enabling all
| | 05:49 | disabled properties.
| | 05:50 | So if you just wanted to turn
them all back on, you could do that.
| | 05:52 | You also have this really cool option.
| | 05:54 | So if you play around with it for a little
while and you decide, "You know what? The ones that
| | 05:57 | I've disabled I really don't need them anymore,"
| | 05:59 | you can choose Delete All
Disabled in Selected Rule.
| | 06:02 | As soon as I do that, it's literally going
to go into your CSS and just delete all those.
| | 06:06 | So all those commented areas are
ripped out of that particular property,
| | 06:09 | leaving me with the styling that
I was really looking for, which is
| | 06:13 | really, really cool.
| | 06:14 | So CSS Enable can speed up the process
of troubleshooting Rules, experimenting
| | 06:19 | with different styling, or the
process of modifying any CSS Rule.
| | 06:23 | While it is a great way to quickly try
out various Rule combinations or check
| | 06:27 | to see if a specific
Property is causing trouble,
| | 06:30 | remember that leaving a CSS Rule disabled
does leave a proprietary comment in your CSS file.
| | 06:36 | This may confuse some team members
or add unwanted weight to your code.
| | 06:40 | So make sure you get rid of any
disabled properties when you're done working
| | 06:44 | on a particular rule.
| | Collapse this transcript |
| Understanding element selectors| 00:00 | Now that we have a better
understanding of how Dreamweaver works with and
| | 00:03 | creates CSS, it's time to
focus on learning the CSS itself.
| | 00:08 | Now we won't be able to
cover every detail of CSS.
| | 00:11 | It's a really, really big subject, but
we're going to cover the basics, so that
| | 00:16 | this foundation can carry you
for the remainder of the title.
| | 00:19 | I recommend checking out the other CSS
titles on the lynda.com Online Training
| | 00:23 | Library for a more thorough exploration of CSS.
| | 00:27 | Now the most basic and fundamental
Selector in CSS is the Element Selector.
| | 00:32 | Put simply, the Element Selector allows
us to restyle an element based on its tag.
| | 00:37 | To restyle our paragraphs, for
example, we simply use the P Selector.
| | 00:41 | Now there are pros and cons
to using Element Selectors.
| | 00:44 | One of the things that make them so
powerful is that by using them, we're
| | 00:47 | affecting all of those
elements, not just specific ones.
| | 00:51 | That means that restyling the p
tag changes all paragraphs site-wide.
| | 00:56 | This can save a tremendous amount of
time, but rarely do we need all paragraphs
| | 01:00 | to look exactly the same.
| | 01:02 | Thankfully, to deal with that, we have
additional Selector types that can help us out.
| | 01:06 | Before we move on to those, let's
practice creating a few Element Selectors.
| | 01:10 | So I've opened up the
element_selectors.htm file.
| | 01:14 | We have a couple of elements on
the page that we want to style.
| | 01:17 | We have a heading 1 tag, we have some
paragraphs, and we have another heading 1
| | 01:20 | tag a little further down the page.
| | 01:22 | Well, one of the things that I want to
explore, in addition to creating paragraph
| | 01:26 | tags, is the concept of inheritance.
| | 01:29 | It's certainly easier to
understand once you see it.
| | 01:31 | So let's just go ahead and
write our first Element Selector.
| | 01:34 | I'm going to go over to my CSS Styles panel.
| | 01:38 | The little page icon down here in the
lower right-hand corner of it with a plus
| | 01:40 | symbol is New CSS Rule.
| | 01:42 | I'm going to go ahead and click.
| | 01:44 | Now the New CSS Rule dialog box
allows us to write styles based on which
| | 01:48 | Selector Type we're looking for.
| | 01:50 | Notice, for example, at the very top we
have a pulldown menu that allows us to
| | 01:53 | create Class selectors, ID
selectors, Tag, and Compound selectors.
| | 01:59 | Well, Element selectors are
often referred to as Tag selectors.
| | 02:04 | So that's the one I want to
choose for what we're doing here.
| | 02:06 | So I'm just going to choose Tag Selector.
| | 02:08 | Now you may have noticed
something different come up in this little
| | 02:11 | pulldown menu below that.
| | 02:12 | I had heading 1 come up.
| | 02:13 | You may see a paragraph or some other element.
| | 02:16 | Whatever you're currently selected
on, or whatever you're focused on in
| | 02:20 | Dreamweaver, that element is going to show up.
| | 02:22 | Actually, I'm going to style a tag
that's much higher up in the page order.
| | 02:26 | I'm going to style the body tag.
| | 02:27 | Now I could either type that in, or
I can grab it from the pulldown menu.
| | 02:31 | You can go through a list of all your
available tags and choose it that way.
| | 02:35 | Now the body tag is the parent
tag around all visual elements.
| | 02:39 | So by writing a style for the body tag,
we're going to use the concept of inheritance.
| | 02:44 | Inheritance says that any property placed on
a parent tag is inherited by its child tags.
| | 02:51 | What that means is if we applied a
color, for example, to a body tag or a
| | 02:56 | font-size or a font-family, then
everything inside of it would be that family,
| | 03:00 | the size and that color.
| | 03:02 | Now that sounds great, but it can a
little tricky because not all properties
| | 03:06 | are going to inherit.
| | 03:07 | They're not all going to
inherit exactly the same way.
| | 03:09 | So it takes a little getting used to
before you feel like you're fully in
| | 03:13 | control of inheritance.
| | 03:14 | Now I can define this Rule in an external
style sheet, or I can embed them in this document.
| | 03:19 | For this particular lesson, we're
going to do it in This document only.
| | 03:23 | That will embed the styles on this page,
meaning they will only apply to this document.
| | 03:27 | I'm going to go ahead and click OK.
| | 03:30 | From the CSS Rule Definition dialog
box that comes up, the first option I'm
| | 03:34 | going to change here is some typography options.
| | 03:36 | So I'm going to stay
right within this Category.
| | 03:40 | For Font-family, I'm going to
grab the pulldown menu there.
| | 03:42 | I'm going to choose Georgia,
Times New Roman, Times, and Serif.
| | 03:47 | You might be wondering why
we've chosen five fonts there.
| | 03:50 | This is something called a font stack.
| | 03:51 | In the chapter on controlling
typography with CSS, I'll talk about font
| | 03:55 | stacks in more detail.
| | 03:57 | For Font-size, I'm going to choose 100%.
| | 04:00 | Now again, I typed that in, 100%,
| | 04:02 | but you can also use this unit of
measurement pulldown menu beside it to choose
| | 04:07 | from all these available units of measurements:
| | 04:08 | pixels, points, ems.
| | 04:11 | We typically use percentage for the
body tag, because what that will do is it
| | 04:15 | sets the entire page's Font-
size relative to the user agent.
| | 04:19 | So if a browser has its default Font-
size set to 16 pixels, that's what our
| | 04:23 | default Font-size is going to be.
We're just saying 100%.
| | 04:25 | It also helps us get around some tricky
rendering errors in Internet Explorer.
| | 04:29 | So it's a good idea to go ahead and use
percentages when you're working with the body tag.
| | 04:34 | Now for Color, I'm just going to go
ahead and #666, which is a dark gray.
| | 04:40 | So now we're going to have Georgia,
Times New Roman, Times, or Serif as our Font.
| | 04:45 | Our Font-size is going to be 100%
of whatever the user agent's default
| | 04:48 | Font-size is going to be.
| | 04:49 | Then for Color, we're using sort of a dark gray.
| | 04:52 | I'm going to go ahead and click OK, and
notice how everything on my page changed.
| | 04:56 | The headings and the paragraphs,
they all inherited those values.
| | 05:01 | So our headings are 100% of the
size that they would normally be. Our
| | 05:04 | paragraphs are 100% of the
size that they would normally be.
| | 05:07 | They're all using the Font Georgia.
| | 05:08 | They're all that dark gray.
| | 05:10 | So now we get a little bit more
specific by targeting those specific elements
| | 05:14 | that are still on the page.
| | 05:16 | In this case, we're going to do the heading 1.
| | 05:18 | So I'll go right back to my CSS Styles panel.
| | 05:20 | I'll click on New CSS Rule.
| | 05:22 | Once again, I'm going to
Tag for my Selector Type.
| | 05:26 | Once again, I'm going to choose h1
or type in h1 for my Selector Name.
| | 05:30 | So all you have to know is the name
of the tag that you're controlling, and
| | 05:33 | type in right there after you've
chosen Tag from the pulldown menu.
| | 05:36 | Once again, for Rule Definition, make sure
it says This document only, and click OK.
| | 05:40 | Now here, we're going to make some changes.
| | 05:43 | Maybe I would like my document site-
wide to be in Georgia, but for my headings,
| | 05:47 | I might want those to be in a sans-serif Font.
| | 05:51 | So I can actually overwrite what the body
tag is doing by telling the heading one tags,
| | 05:56 | "No, no, no. You need to be Arial."
| | 05:58 | So go ahead and grab your font-
family pulldown menu, and choose Arial.
| | 06:02 | Currently, right now, we're telling
your headings to be their default size,
| | 06:05 | because the body tag just basically said,
"Be 100% of what you would normally be."
| | 06:09 | But if you want to take more
control over that, you can.
| | 06:12 | For a Font-size, for my headings, for
example, I'm going to tell it to be 1.2.
| | 06:16 | Then I'm just going to type in em for ems.
| | 06:19 | If you hit Tab, you can see
that in the pulldown menu there.
| | 06:23 | So we're going to discuss ems in
more detail when we talk about units of
| | 06:26 | measurement in just a little bit.
| | 06:28 | Just understand that ems are a
relative unit of measurement that, once again,
| | 06:31 | is basically telling a heading,
"Be relative to the size that you would normally
| | 06:35 | be in the user agent."
| | 06:36 | We're also going to change
the color of our headings.
| | 06:38 | So I'm going to go right in the Color
dialog box and type in #600, which is
| | 06:44 | sort of a deep burgundy color.
| | 06:45 | I'm going to go ahead and click OK.
| | 06:48 | Now take a look at what happens to my headings.
| | 06:49 | They shrink down a little bit.
| | 06:51 | They change color, and they change fonts.
| | 06:53 | So we're still inheriting some of the
things from the body tag, but for the
| | 06:56 | most part, we almost did a total
overwrite with our heading 1 styles.
| | 06:59 | Now the whole concept of using
inheritance means that you don't have to write a
| | 07:02 | lot of styles for your child tags.
| | 07:04 | So we're going to write a style for
our paragraph selector, but we're really
| | 07:07 | not going to have to do a lot with it.
| | 07:08 | So I'm going to go right over on my
CSS Styles panel, choose New CSS Rule.
| | 07:13 | Once again, I'm going to
choose Tag from the pulldown menu.
| | 07:15 | I'm just going to type in p, for paragraph.
| | 07:17 | Make sure it's referring to
This document only and click OK.
| | 07:21 | Now our paragraphs are the font we
need them to be, and they're the color
| | 07:24 | we need them to be. They're
inheriting that from the body tag.
| | 07:26 | So all we need to do is change the size.
| | 07:28 | So I'm going to make the size 1.2
ems, e-m, and go ahead and click OK.
| | 07:34 | Now our headings are 1.2 ems and
our paragraphs are 1.2 ems as well.
| | 07:39 | They're pretty much the same size.
| | 07:41 | That's kind of cool.
| | 07:42 | You get to take control
over the sizing of elements.
| | 07:44 | As a matter of fact, if you really
felt like it, you can make your paragraphs
| | 07:47 | larger than your headings.
| | 07:49 | It's really up to you,
when you're working with CSS.
| | 07:52 | If you've taken a moment to scan and
read the text that's on the page, you can
| | 07:56 | see that some of the text needs styling
that doesn't match what we've just done.
| | 08:00 | If we were limited to just Tag or Element
selectors, we wouldn't be able to achieve this.
| | 08:05 | Now thankfully, we have
additional selectors available to us.
| | 08:08 | We'll use one of those, the
Class Selector, in our next movie.
| | Collapse this transcript |
| Understanding class selectors| 00:00 | If you're used to using Word,
InDesign or Quark to create styles,
| | 00:04 | you are going to be really familiar
with the concept of using Class Styles.
| | 00:07 | Class selectors allow you to create
a style with any name that you want.
| | 00:11 | Any element that has that name as a class
attribute is then styled with that formatting.
| | 00:16 | The pros of using class selectors are
that you can use them as often as you
| | 00:20 | need, as many times as you
need them, on any given page.
| | 00:24 | The downside is that you
have to apply them manually,
| | 00:26 | so they take a little bit more
effort to apply at first, when compared
| | 00:30 | to element selectors.
| | 00:32 | Usually, when most graphic designers
begin working in Web design, this is the
| | 00:35 | type of selector they most often
turn to to achieve targeted formatting.
| | 00:39 | You need to be careful when
using class selections, however.
| | 00:42 | Often, designers will use them simply
because they don't know of another, and
| | 00:46 | usually more efficient, way to
achieve the desired styling.
| | 00:49 | This can cause an overabundance of
class attributes in your code that don't
| | 00:53 | really have any identifiable logic to them.
| | 00:56 | So here we have the class
selectors.htm, from 06_09 folder opened up.
| | 01:01 | And there are a couple of things on the
page that it's telling me it wants to do.
| | 01:05 | For example, this paragraph right here
says, "This is also a paragraph, but I want
| | 01:10 | it to look different than the other two."
| | 01:11 | We will have to see how we can do that.
| | 01:12 | Well, class selectors are an
excellent way of doing that.
| | 01:15 | And the paragraph right below it says
"This is another paragraph, and I want it
| | 01:19 | "to look as same as all my other
paragraphs, but I want the word "alone" to
| | 01:23 | look a little different."
| | 01:24 | So we are going to figure
out how to do that as well.
| | 01:26 | Well, let's target our paragraph first.
| | 01:29 | Now again, class selectors
are kind of a two-part process:
| | 01:33 | You create the class
selector, and then you apply it.
| | 01:36 | So I am going to right
over to my CSS Styles panel.
| | 01:38 | I am going to click to create a New CSS Rule.
| | 01:41 | And this time, from the Selector
Type, I am going to choose Class.
| | 01:45 | And if Class didn't come up
automatically, you can just grab the pulldown menu
| | 01:48 | and choose it. It's the first option there.
| | 01:50 | Okay, so now we need to
create our Selector Name.
| | 01:53 | Now before, when we were creating
Element selectors, we had a pulldown menu that
| | 01:56 | we could choose from.
| | 01:57 | But now that pulldown menu
doesn't do anything for us.
| | 02:00 | The reason for that, our
class names are defined by you.
| | 02:03 | You come up with them.
| | 02:04 | So I want to create a class called greenText.
| | 02:08 | That's fairly descriptive.
| | 02:09 | So I am going to type in .greenText, okay.
| | 02:17 | So let's talk about the naming
conventions of class selectors.
| | 02:20 | First, class selectors need to
start with this period right there.
| | 02:25 | Please don't forget that.
| | 02:27 | If you forget it, Dreamweaver will often
save you a little bit by going ahead and
| | 02:31 | placing it there for you.
| | 02:32 | But you do not want to get in the habit
of doing that, because if you began to
| | 02:36 | hand-code your text, and you leave it off,
well, you just don't have a selector at all.
| | 02:40 | So remember, class
selectors start with that period.
| | 02:43 | The next thing that you are going to
is make sure that your names
| | 02:46 | don't have any spaces in them.
| | 02:48 | You can use underscores.
| | 02:49 | You can use numbers, but you don't
want to start off with the number.
| | 02:52 | But avoid punctuation.
| | 02:54 | Basically, just follow your
standard naming conventions, no spaces.
| | 02:57 | Don't use any punctuation.
| | 02:59 | And you can either use CamelCase naming,
which I have named here, lowercased g
| | 03:03 | uppercase T, or underscores.
| | 03:05 | Now again, I am going to apply this
rule to this document only, and I am just
| | 03:08 | going to go ahead and click OK.
| | 03:10 | I am going to change my Font-size to 1 em.
| | 03:14 | And then I am going to
change my Color to a green.
| | 03:16 | And the easiest green for me is just #060.
| | 03:20 | If you type in some hexidecimal values
and hit tab, you can see the color that
| | 03:24 | you are going to get.
| | 03:25 | You may be wondering why I am using
like three characters, because if you
| | 03:29 | peruse through the Swatch panel that
they give us, we get three characters, but
| | 03:33 | often you are going to see hexadecimal values
represented as six characters, so what gives there?
| | 03:38 | While these three characters,
060, is exactly the same as 006600.
| | 03:46 | So it's just a way of short handing
those hexadecimal values, if you're
| | 03:49 | working with similar pairs.
| | 03:51 | You can just type in 060
to represent those pairs.
| | 03:54 | Okay, so I am going to go ahead and
click OK, and nothing on my page changes.
| | 03:59 | Well, remember, class
selectors are two part process.
| | 04:02 | In the first part, you create the
selector, second part you apply it.
| | 04:06 | So let's take a look at how we can do that.
| | 04:07 | So I am going to go ahead and select
that paragraph that says, "This is also a
| | 04:11 | paragraph, but I want it to
look different than the other two."
| | 04:14 | Just clicking in it will focus on that
element, but if you want to be absolutely
| | 04:17 | sure that you have selected the
paragraph, use the Tag Selector.
| | 04:22 | Remember, the Tag Selector can be found
right down here below the Document Window.
| | 04:25 | Hover over your paragraph and click once.
| | 04:28 | All of your text will highlight, but more
importantly, you've selected the actual tag itself.
| | 04:33 | Okay, now I an actually going to
switch over to my HTML Properties.
| | 04:36 | That may seem a little weird to you,
like why are we switching to that?
| | 04:39 | Well, because the class
attribute is actually an HTML Property.
| | 04:43 | You are going to see, as soon as we
apply this and when we look at the
| | 04:46 | code, that what's going to happen is our
paragraph is now going to have a class attribute.
| | 04:51 | The value of that will match what you
have in your styles, and that's what's
| | 04:54 | going to give your styling.
| | 04:56 | So for my Class pulldown menu here, I
am going to grab that, and the only thing
| | 05:00 | that I see is the only class that
we have created so far, greenText.
| | 05:02 | So I am going to go ahead and create that.
| | 05:03 | So you can see this paragraph is a
little larger than the other ones, but
| | 05:08 | it's also greenText.
| | 05:09 | So now it looks totally different from
the rest of the paragraphs, and that's
| | 05:13 | all due to the class that we've applied to it.
| | 05:15 | Now let's take a look at code
to see exactly what happened.
| | 05:19 | I am going to switch to a Split Screen View.
| | 05:22 | And here I can see my Source Code and
right there is my paragraph, and right
| | 05:26 | there is the class attribute.
| | 05:27 | So that's how your browser is going
to know which class selector you are
| | 05:32 | wanting to apply there,
so in that case, greenText.
| | 05:35 | Now let's do this one more time so that we
can see a slightly different way to apply styles.
| | 05:39 | I am going to go ahead and
create another New CSS Rule.
| | 05:42 | Again, I am going to do a Class, and
this time I am going to do .highlight.
| | 05:48 | So .highlight, all one word,
make sure it's This document only.
| | 05:52 | And by the way, there is no space
between the dot and the selector name.
| | 05:55 | So .highlight is all one word.
| | 05:56 | We're going to go ahead and click OK.
| | 05:58 | And here, I'm really going
to change some things up.
| | 06:01 | And feel free to play around with these Styles.
| | 06:03 | If you want to experiment with the Property to
see what's it going to do, no harm, no foul.
| | 06:07 | You're not to break anything. Just go
in there and have a little bit of fun.
| | 06:10 | I am going to change Font-style to Italic.
| | 06:12 | I am going to set Color to #000, which is black.
| | 06:17 | And then I am going to switch
over to the Background category.
| | 06:21 | So in my Background category, I am
going to choose a Background-color of
| | 06:24 | #FF0, and that's yellow.
| | 06:29 | So this is going to put yellow
background behind that text to make it look like
| | 06:31 | it has been highlighted.
| | 06:32 | We are going to put a little bit of
padding, so that we have a little bit of
| | 06:36 | space all around our text as well.
| | 06:37 | So I am going to go down to the Box
category on the left-hand side there.
| | 06:41 | And for Padding, I am
going to turn off Same for all.
| | 06:43 | I am going to do 2 pixels of Padding to
the Top and to the Bottom, and 5 pixels
| | 06:48 | of padding to the right and to
the Left, so 2/5 2/5. All right.
| | 06:52 | Again, I am going to click OK,
and once again, as we have mentioned
| | 06:55 | before, nothing changes.
| | 06:57 | And that's, of course,
because we have to apply the Class.
| | 07:00 | Now before, we want to do it to an
entire paragraph. Well, those are pretty easy.
| | 07:04 | We just take the paragraph tag,
and we apply a class attribute to it.
| | 07:08 | But what about this word?
| | 07:09 | This word, this word
"alone." It's all by itself.
| | 07:12 | It's actually part of the paragraph.
| | 07:14 | So if we apply the Class highlight
to that paragraph, the entire paragraph
| | 07:19 | will get highlighted.
| | 07:20 | So how can we choose just that one
word and apply that class? Well, let's see.
| | 07:25 | If I go down to my Properties Inspector
- and once again, I'm looking at my HTML
| | 07:29 | Properties - I can now grab on the
pulldown menu for Class and choose highlight.
| | 07:34 | Now if I deselect that,
I can see that it worked.
| | 07:36 | Our word "alone" is no
highlighted with a yellow highlight color.
| | 07:40 | It's italicized and black.
| | 07:41 | So we were entirely successful,
but what happened behind the scenes?
| | 07:46 | Well again, I am going to switch over to
Code View, and I can see that that word "alone"
| | 07:50 | was surrounded by a span tag.
| | 07:53 | Now spans are generic inline-level tags.
| | 07:56 | Browsers don't render them at all,
| | 07:58 | but what they allow us to do is surround
words, individual characters or entire passages
| | 08:04 | and then use the Class or ID
attribute to set that word apart, and say that
| | 08:08 | there is something special about it.
| | 08:10 | In this case, we apply the
Class attribute highlight to it.
| | 08:13 | So as you can see, Class Styles are
great for targeting specific instances of
| | 08:18 | styling and addressing them.
| | 08:20 | Now as I previously mentioned,
and this is really important,
| | 08:22 | you want to be careful about overusing Classes.
| | 08:26 | Classes should be used either when no
other means of styling the text exists
| | 08:31 | or when the Class attribute is being used
to add a meaningful name to the element.
| | 08:36 | So learning how to target styles
through descendant selectors - that we are
| | 08:40 | going to cover in just a little bit -
| | 08:41 | and ID selectors will be extremely
helpful in making sure that you're not using,
| | 08:46 | or overusing, your class selectors.
| | Collapse this transcript |
| Understanding ID selectors| 00:00 | ID selectors are very similar to Class
selectors, so similar, in fact, that many
| | 00:05 | people get them confused.
| | 00:06 | Class selectors, as we've
seen, target the class attribute.
| | 00:11 | And ID selectors, on the other
hand, target the ID attribute.
| | 00:14 | Unlike Class selectors, which can be
used as many times on a page as you need,
| | 00:19 | ID selectors can only be used once per page.
| | 00:23 | That stems from the fact that
each ID on a page must be unique.
| | 00:28 | This is one of the reasons that people use
IDs to typically identify areas of content.
| | 00:33 | You'll probably only have, for example,
one header, one footer, that sort of thing.
| | 00:37 | Now it could seem like ID selectors
are less powerful than Class selectors
| | 00:42 | due to the fact that they can only be used
once per page, but that's actually wrong.
| | 00:46 | ID selectors are much more
powerful than Class selectors
| | 00:50 | and will overwrite the Class selectors
if their styles conflict with each other.
| | 00:54 | This is a concept called Specificity.
| | 00:56 | And it basically says that the most
specific rule wins in the event of a conflict.
| | 01:02 | Since there can be only one element
with an ID of header, for example, ID
| | 01:07 | selectors tend to be very, very specific.
| | 01:10 | So here we have id_selectors
from the 06_10 folder opened.
| | 01:15 | And I want to talk about some of the
structure that we have existing on the page already.
| | 01:20 | So I'm just going to go ahead
and switch to Split Screen View.
| | 01:23 | And I notice when I place my cursor into
this area, I see a little dotted line around it.
| | 01:27 | Now typically, that means that this is a div tag.
| | 01:30 | If I select that in my code, I can see
that we have a div, and it has an id of top.
| | 01:35 | Well, we also have another div tag down
here at the bottom, and it has an id of,
| | 01:39 | you guessed it, bottom.
| | 01:41 | So we have an id of top and an id of bottom.
| | 01:44 | And we can use those ID attributes to
write ID selectors that are going to style
| | 01:49 | those particular areas.
| | 01:52 | And we can take advantage of those ID
attributes by writing ID selectors that
| | 01:55 | are going to style those regions on our page.
| | 01:58 | I'll switch back to Design view, go
over to my CSS Styles panel, and go ahead
| | 02:03 | and click to create a New CSS Rule.
| | 02:05 | Now, again, this time we need
to choose our Selector Type.
| | 02:08 | I am going to grab the pulldown menu,
and I am going to choose ID.
| | 02:11 | Now if you remember for my Class
selectors, Class selectors need to be
| | 02:15 | preceded by a period.
| | 02:16 | Well, IDs need to be preceded by
character as well, but they need to be
| | 02:20 | preceded by the hash mark.
| | 02:22 | That's also called an octothorpe
character, but I prefer hash mark.
| | 02:26 | So I am just going to type in pound,
or hash mark, or octothorpe, whatever you
| | 02:29 | want to call it, that
character, and then the word top.
| | 02:32 | So that's how we write an ID selector to
target to that particular area on the page, #top.
| | 02:38 | Now remember, we are going to define
it in This document only, and I'll go
| | 02:41 | ahead and click OK.
| | 02:43 | Now because the ID attribute top is
applied to a div tag, any styling we do here
| | 02:48 | is going to affect the entire div tag,
and some of the content inside of it.
| | 02:52 | So first thing I am going to do
is switch to my Background category.
| | 02:56 | And I am going to give this
div tag a Background-color.
| | 02:58 | I am going to type in #cc9.
| | 03:03 | Now because our div tag already has
the ID attribute applied to it, if you
| | 03:07 | wanted to see what that was going to
look like, you can go right down here to
| | 03:10 | this Apply button and click,
| | 03:12 | you could see the Background-
color show up within that div tag.
| | 03:14 | So it's kind of nice that you can
preview these before you commit them.
| | 03:17 | Now I am also going to go to my Box category.
| | 03:20 | And for Padding, I am going
to use Same for all checked.
| | 03:23 | And I am going to type in 10 pixels.
| | 03:24 | Now if you noticed, if we click Apply,
Padding basically gives you a little bit
| | 03:28 | of cushion between the edge of the
element and the content side of it.
| | 03:32 | So that creates a more of a box look
to this, and the text isn't budding up
| | 03:36 | right against the edge of the div tag.
| | 03:38 | We can also set a Width here.
| | 03:40 | And I am going to set the Width
of this div tag to 450 pixels.
| | 03:43 | It's going to shorten it a little bit, and
again, make this look more like a little box.
| | 03:47 | Now I am going to go to my Border
category, and for my border, I am going to
| | 03:51 | choose this Style, Width and Color Same for all.
| | 03:53 | I am going to go ahead and do a Style
of solid, a Width of 1 pixel, and for
| | 04:00 | Color, I am going to type in #600, which
if you remember, is that burgundy color.
| | 04:05 | I'll go ahead and click OK, and that
finishes the styling of that region.
| | 04:09 | If I switch over to Live View, so we
can see this a little bit better, you see
| | 04:12 | that the div tag now is smaller in
size because we gave it a fixed width.
| | 04:16 | We gave it a border all the way around
it, a Background-color and some Padding
| | 04:19 | to keep the text away from it.
| | 04:20 | This is a really a good way to create
sidebars, or callout tags, or things like that.
| | 04:24 | I am going to turn Live View off.
| | 04:26 | And now let's go ahead and create
the selector for the bottom div tag.
| | 04:31 | So again, I am going to create New CSS Rule.
| | 04:33 | I am going to do an ID selector.
| | 04:35 | And the ID selector is
going to be named #bottom.
| | 04:39 | And we are going to define
it in This document only.
| | 04:41 | Remember, there is no space between the pound
symbol and the name, so #bottom. Go ahead and click OK.
| | 04:47 | And here, we are going to make some
changes that are little bit more specific
| | 04:50 | than the changes we made above us.
| | 04:52 | First off, we are going to
change the Font-family to Arial.
| | 04:55 | We are going to change the
foreground Color to #FFF, which is white.
| | 04:59 | Then we are going to go our Background,
change the Background-color to #666,
| | 05:05 | which is that dark gray.
| | 05:06 | And then we are also going to
give it Width and Padding as well.
| | 05:09 | I am going to go to my Box properties,
and I am going to go ahead and give it a
| | 05:12 | Width of 450 pixels, and give it a
Padding of 10, just like we did before.
| | 05:16 | Now if I click Apply, I can preview
what this is going to look like, then I
| | 05:19 | am going to click OK.
| | 05:21 | Now notice that we have a
slightly different change here.
| | 05:23 | Do you see how our paragraphs went
from being Times New Roman to Arial?
| | 05:26 | That is because they are now inheriting
that font value, not from the body tag,
| | 05:31 | which is further up the documentary,
but now from this div tag, which is much
| | 05:34 | closer to them and has a
higher degree of Specificity.
| | 05:37 | So we have styled two distinct
regions using the power of ID selectors.
| | 05:42 | Note how the Specificity overwrote
some of the existing styling, and how
| | 05:46 | inheritance cascaded the
formatting down into the child elements.
| | 05:49 | In this case, the Arial
font is a good example of that.
| | 05:53 | These are both extremely important
concepts to understand as you begin
| | 05:56 | writing your own CSS.
| | Collapse this transcript |
| Understanding descendant selectors| 00:00 | So far, we have used all
three basic selector types:
| | 00:03 | Element, Class and ID.
| | 00:05 | Now, while those three will serve as
the building blocks for almost every style
| | 00:09 | you write in your CSS, their
application will be incomplete without also
| | 00:13 | understanding how to write descendant selectors.
| | 00:15 | I do not exaggerate when I say that
over 90% of the styles in your site will be
| | 00:20 | descendant selectors.
| | 00:21 | Descendant selectors target rules
based on where an element is found
| | 00:25 | within another element.
| | 00:27 | To target every span tag inside of a
paragraph tag, you would only need to write
| | 00:32 | the selector p span, for example.
| | 00:35 | Descendant selectors are typically
used in conjunction with ID selectors.
| | 00:40 | This allows you to style all
paragraphs in the sidebar, so that they look
| | 00:44 | different than the main content.
| | 00:46 | Let's create a couple of descendent
selectors to finish styling our sample page.
| | 00:50 | So here we have the
descendent_selector.htm file.
| | 00:53 | Now, just to kind of refresh your
memory about the structure of the page,
| | 00:57 | remember we have a div tag
up top with an ID of top.
| | 01:00 | Then we have a div tag down at the
bottom of the page with an ID of bottom.
| | 01:04 | In between those, we have two
paragraphs, one that has a class attribute of
| | 01:08 | greenText and one that is
just a normal paragraph.
| | 01:11 | Well, let's say we want to target
the paragraphs just in this top region;
| | 01:15 | style these guys separately
without affecting any other content.
| | 01:20 | If we didn't know about descendant
selectors, we would probably be trying to use
| | 01:23 | a class selector to do that.
| | 01:25 | So this is one of those instances
where I want to point out how much more
| | 01:29 | efficient a descendant
selector is over a class selector.
| | 01:33 | So we're going to do a brand-new CSS
Rule, and this time we're not going to
| | 01:37 | choose any of the first
three options of selector type.
| | 01:39 | We're going to choose the
last one, which is Compound.
| | 01:42 | Now, Compound is Dreamweaver's way of
basically just saying, "Whatever you want to write."
| | 01:46 | Now, you will notice that my
selector has already resolved itself for me.
| | 01:50 | That was nice of Dreamweaver, #top p. That's
exactly the descendant selector I need to write.
| | 01:56 | Now, how did it know to do that?
| | 01:57 | Well, because I selected this
paragraph within this region.
| | 02:01 | So when I selected Compound,
Dreamweaver basically wrote the compound selector
| | 02:05 | for me, based on that area.
| | 02:07 | Now, it's not always going to get it
right, so don't rely on Dreamweaver to
| | 02:11 | write these selectors for you. Look at it
more of a way of saving a little bit of time.
| | 02:15 | Now, if you need to write that yourself,
remember just do #top, and this is the
| | 02:19 | important part, space, p.
| | 02:22 | That space indicates that you're
moving from one element to another.
| | 02:25 | So we're looking for any paragraph
inside of any region with an ID of top.
| | 02:31 | Again, we're going to do it in This
document only, and we're going to go
| | 02:33 | ahead and click OK.
| | 02:35 | So for Color here, I'm going to type
in #000. For Font-size, I'm going to
| | 02:40 | type-in 1 em, and then for Font-
style I'm going to Italicize that text.
| | 02:46 | I'm going to go ahead and click OK,
and notice that my paragraphs in the
| | 02:50 | top-region restyled.
| | 02:52 | So unlike a class selector,
I don't have to do any manual
| | 02:55 | application whatsoever.
| | 02:56 | I'm just telling my browser, "Look
inside any region with an ID of top.
| | 03:01 | If you find a paragraph
inside that, style it like this."
| | 03:04 | So we're targeting very specific areas.
| | 03:07 | Now, let's tackle the
heading 1 in our bottom region.
| | 03:11 | Now, if we looked at this on a page
again, and we said, "Hey. We want this
| | 03:14 | heading to look slightly different
than any other heading on the page,"
| | 03:17 | again, a lot of people would resort
to a Class Selector, but we can use the
| | 03:21 | structure of the page to our advantage.
| | 03:23 | We notice that this is the only heading
1, and the only one inside of a region
| | 03:27 | with an ID of bottom.
| | 03:29 | So we're going to use that to
write our descendant selector.
| | 03:32 | Once again, I'm going to choose New CSS Rule.
| | 03:34 | I am going to make sure it says
Compound, and once again, because I placed
| | 03:37 | my cursor into that element, you'll notice
that Dreamweaver resolved it for me, #bottom h1.
| | 03:42 | I'm going to go ahead and click OK,
making sure it's being defined in
| | 03:47 | this document only.
| | 03:49 | For Color, I'm going to choose #FF0,
which is the yellow color. For Font-size,
| | 03:54 | I'm going to choose 1.6 ems.
| | 03:57 | So maybe a good bit larger there.
| | 03:59 | Font-weight is going to be normal.
| | 04:01 | So headings are normally bold, so
by changing Font-weight to normal this
| | 04:04 | particular heading will not be bold.
| | 04:07 | For Line-height, I'm going to choose
1.2, and we're going to do a multiple.
| | 04:11 | Now, again, later on in Chapter 07 when
we do typography, we'll go into what a
| | 04:17 | multiple, what an em is, those
things in a little bit more detail.
| | 04:20 | So I'm going to go ahead and click
OK, and now I see the heading looks
| | 04:24 | totally different than the one above it, and
no class selectors are involved in that at all.
| | 04:29 | Now, finally, we've been using IDs for
our descendant selectors, and they are
| | 04:32 | commonly found within descendant
selectors, but you don't have to use them.
| | 04:36 | You can use any selectors you
want to do a descendant selector.
| | 04:40 | You can also do more than two.
| | 04:41 | You can have as many elements as you
want in a row, so you could say, body,
| | 04:45 | space form, space table, space
paragraph, and that would target any paragraph
| | 04:50 | inside of a table, inside of a
form, inside of the body tag.
| | 04:52 | So you can go as deep into that as you want.
| | 04:55 | Let's go ahead and do another New CSS Rule.
| | 04:57 | Now, again, this time I'm going to
choose Compound, and because I didn't have
| | 05:01 | anything focused on the page, I now have
to write this compound selector myself.
| | 05:05 | Now, again, don't be confused by
the term Compound versus Descendant.
| | 05:08 | Descendant selectors are also
sometimes referred as Contextual Selectors.
| | 05:13 | The word Compound here really
doesn't have any meaning to CSS.
| | 05:17 | In Dreamweaver, it just basically
means you can do something beyond the basic
| | 05:21 | three types of selectors.
| | 05:23 | So for Selector Name here, I'm going to
type in body, and then space, remember
| | 05:27 | that space is important, and then p, and
then space, and then span.
| | 05:33 | Now, I want to point out something else
that Dreamweaver is doing for us here.
| | 05:36 | If you're learning how to write these
selectors, there is a really nice tool
| | 05:39 | that Dreamweaver has given you guys
right below the name of the selector.
| | 05:43 | Notice that it says, This selector
name will apply your rule to all <span>
| | 05:46 | elements that are within any paragraph
elements, that are within any body elements.
| | 05:52 | So if you write a descendant selector,
you're going to get a description down
| | 05:55 | below it of what you're going to be targeting.
| | 05:57 | If that reads a little bit different
than your intent, then perhaps your
| | 06:01 | selector needs a little bit of refining them.
| | 06:03 | Now, again, I'm going to go ahead and click OK.
| | 06:04 | I'm going to make a very simple change to this.
| | 06:06 | I'm just going to change the Font-
weight to bold, and then click OK.
| | 06:10 | Again, notice the word "alone" is now
bold, because it is in a <span> tag, which
| | 06:15 | is also inside the <body> tag. Perfect!
| | 06:17 | Now, this page is not going to win any
design contest, but we've successfully
| | 06:22 | created individual looks for each
element, based on its position and type.
| | 06:27 | Once you do a few descendant selectors,
it's very easy to see how powerful, and
| | 06:31 | how useful they are.
| | 06:33 | You'll find they control an
overwhelming majority of the styling in your sites.
| | 06:37 | Properly structuring, and
naming elements inside your site,
| | 06:40 | and consistently using those
standards, makes it easy to create descendant
| | 06:44 | selectors that do all the work for you,
eliminating the need to rely on class
| | 06:49 | selectors for everything that you do.
| | Collapse this transcript |
| Attaching external style sheets| 00:00 | So how do you go about getting your
styles into an External Style Sheet and
| | 00:04 | then attaching them to the page?
| | 00:06 | Dreamweaver makes the process pretty
seamless and gives you a tremendous amount
| | 00:09 | of flexibility and control.
| | 00:11 | Whenever you create a New Rule,
Dreamweaver gives you the option of where
| | 00:15 | to place those rules.
| | 00:16 | You can place them in a new style sheet,
which will then prompt you to create a
| | 00:20 | new one, place the rule in an
existing style sheet, if you already have one
| | 00:23 | attached, or simply embed the rule in
the current page, which would restrict it
| | 00:28 | to only the current document.
| | 00:29 | In this movie, we'll start by attaching
an existing style sheet to our page and
| | 00:34 | then experiment with ways to move a
rule from one style sheet to another.
| | 00:38 | So I have the Index page from the
06_12 folder opened up, and it looks
| | 00:42 | un-styled except for one thing.
| | 00:45 | This headline, "Explore our world
your way," looks like it's been styled.
| | 00:50 | If I look over at the CSS Styles
panel, indeed I can see that I have a
| | 00:54 | rule #mainContent h1.
| | 00:57 | This is an embedded style.
| | 00:58 | I know that because instead of the name
of the External Style Sheet, I just have
| | 01:02 | that <style> tag right there.
| | 01:03 | I can also look at my Source Code.
| | 01:05 | If I scroll up, there's my embedded style
right in the head of the document. Okay, cool!
| | 01:10 | So how do we create External Style Sheets?
| | 01:13 | Well, one of the easiest ways to do it is
just in a normal process of creating your CSS.
| | 01:18 | So let's say we were going to
create an overall rule for our <body> tag.
| | 01:21 | If I come over here to the CSS Styles
panel, and I choose New CSS Rule, and I
| | 01:26 | do Tag, and I choose body, notice that one
of my options is to do a New Style Sheet File.
| | 01:31 | So if I choose New Style Sheet File
and click OK, instead of bringing up the
| | 01:35 | CSS Rule Definition dialog box, what I
get is something prompting me to save a
| | 01:40 | brand-new style sheet.
| | 01:42 | So here I could browse to where I
wanted to put it, give it a name, and I
| | 01:45 | would click OK or Save.
| | 01:47 | Now, what that's going to do for me
is it would create a brand-new External
| | 01:50 | Style Sheet, it would link it to this
page, and it would place the new rule
| | 01:54 | inside that style sheet, and
it would do it all in one step.
| | 01:57 | So that's pretty cool.
| | 01:58 | Now, we happen to have an existing
External Style Sheet that we need to use.
| | 02:02 | So we don't really need to do this
step, so I'm just going to select Cancel,
| | 02:06 | and we'll go back to our
page the way it was. Okay.
| | 02:09 | So if I look over at the CSS Styles
panel, another option that I have is this
| | 02:14 | little Link option, and it's
right beside the New CSS Rule icon.
| | 02:18 | If you hover over it, you'll get a
little tooltip that comes up that tells you
| | 02:21 | that that is Attach Style Sheet.
| | 02:23 | So I'm going to go ahead and click
on that, and that brings up a dialog
| | 02:27 | box that says, "Okay.
| | 02:28 | "You want to attach an External Style Sheet.
| | 02:30 | Where can I find this?"
| | 02:31 | So I'm going to go ahead and select Browse.
| | 02:34 | So I'm going to browse inside my 06_12
folder, and I will find my _css folder,
| | 02:40 | open that up, and I want
to link to this main.css.
| | 02:44 | I'm going to click OK there.
| | 02:45 | I'm going to bring it in and add it as a link.
| | 02:49 | I've got two choices there: Link and Import.
| | 02:51 | Import brings it in using at import,
which was great for really old browsers
| | 02:55 | that we don't use anymore, or as a way
of creating more modular style sheets.
| | 02:59 | The more common means of doing this is
with Link, and that's what we're going to do.
| | 03:02 | We're also able to choose a Media type
here, and I find this pretty interesting.
| | 03:07 | You have a pulldown menu, and
then you can choose between all these
| | 03:09 | different Media types.
| | 03:10 | Now, since we're going to be doing this
for our Web browser, we're going to use
| | 03:14 | the Screen Media type.
| | 03:16 | But I'm also going to type
in comma, projection
| | 03:20 | So you can actually string multiple
media types together if you'd like.
| | 03:23 | These styles will apply to any device
that asks, that requests for the Screen
| | 03:27 | Media type or the Projection Media type.
| | 03:29 | I'm going to go ahead and click OK,
and it attaches our style sheet.
| | 03:33 | Now, I noticed a problem, just by
looking over at my CSS Styles panel.
| | 03:38 | The CSS Styles panel gives us a lot of
information that you might not really
| | 03:42 | understand unless you're paying attention to it.
| | 03:45 | Notice, for example, the <style>
tag is on top of the main.css.
| | 03:50 | That means that our embedded styles are
literally on top of the External Style Sheet.
| | 03:55 | You're probably saying
to yourself, "Yeah, so what?"
| | 03:58 | Well, those styles are applied
in the order that they're found.
| | 04:00 | So if your external styles are found
prior to your embedded styles, that means
| | 04:06 | that the external styles are actually
going to overwrite the embedded styles if
| | 04:10 | those two don't agree with each other.
| | 04:11 | That would be a problem.
| | 04:13 | So we're going to need to
move those around a little bit.
| | 04:15 | Now, I do want you to pay
attention to what happened to our page.
| | 04:18 | We went from the sort of bland, ugly
just sort of text to a fairly nice layout,
| | 04:23 | and all that happened just by
attaching that External Style Sheet.
| | 04:26 | Now, if I go over to the Code View of
my page, you can see why our main.css is
| | 04:32 | listing under <style>.
| | 04:33 | Now, this is one of the things that I
wish they would change in Dreamweaver.
| | 04:36 | I love the program, but occasionally
there are some things that you are like, I
| | 04:39 | really wish it did a different way.
| | 04:41 | We really ought to have the option of
choosing where within the head to place
| | 04:45 | that <link> tag, but we don't. So one of
the things you might want to do, create
| | 04:48 | a blank line above your embedded styles.
| | 04:51 | You can grab that <link> tag and
just drag it up, so that it's actually
| | 04:55 | above the embedded style.
| | 04:56 | That is how you want that.
| | 04:58 | You want any external styles to come
first in your code, and then your embedded
| | 05:02 | styles come after that.
| | 05:03 | So take a moment or two to do that in Code
View. Just be really careful about doing it.
| | 05:07 | Make sure you're not leaving behind
any of the tags. Make sure you're not
| | 05:10 | replacing any of the existing tags.
| | 05:12 | I'm going to switch back to
Design view, save my file.
| | 05:17 | Now if I look over my CSS Styles
panel, there are my external styles.
| | 05:20 | There are my embedded styles.
| | 05:22 | Now, what happens if you decide that
you wanted an embedded style to literally
| | 05:26 | become something that is global
throughout your site? It's not uncommon, for
| | 05:29 | example, let's say I've a
site with 100 pages on it.
| | 05:32 | And you just want to test something
locally on a page before committing it
| | 05:35 | to your entire site.
| | 05:36 | So maybe you write an embedded style
or two, kind of play around with it on
| | 05:40 | that page, and then suddenly
somebody might say, or I might even say
| | 05:43 | yourself, "You know what?
| | 05:45 | That really ought to look
that way across the entire site."
| | 05:47 | Well, does that mean you have to
rewrite those selectors? Absolutely not.
| | 05:51 | You can move selectors from
one style sheet to another.
| | 05:54 | Let me show you how to do that.
| | 05:55 | I'm going to go ahead and collapse
the Files panel by double-clicking that.
| | 05:59 | Again, that's just going to give me a
little bit more room, and I can even
| | 06:02 | grab this divider, move it down a little bit,
so that I can see the styles a little better.
| | 06:06 | Then there's a lot going on here, but
you can kind of see the way that these
| | 06:10 | selectors are arranged,
| | 06:12 | we have our mainContent selectors,
our base navigation selectors,
| | 06:17 | so they are all sort of grouped together.
| | 06:18 | Honestly, the #mainContent h1 that we've
got would probably fit right around this area.
| | 06:23 | So it'd be kind of nice
if it was there. All right!
| | 06:25 | So how can we do that?
| | 06:27 | Well, I'm going to scroll down, grab
this mainContent h1, literally just hold my
| | 06:34 | mouse down on it and drag, and I'm
just going to scroll up without letting go
| | 06:38 | the mouse, until I find - I am not quite
there yet - that mainContent p selector
| | 06:46 | that I was talking about. There we go.
| | 06:47 | So I would like it to appear
either right above or right below that.
| | 06:50 | So I'm just going to
drag it to right above that.
| | 06:52 | I'm going to let go. There it is.
| | 06:55 | So I've moved it to my External
Style Sheet, placed it exactly where I
| | 06:59 | wanted it in that style sheet, in
terms of organization, and moved it away
| | 07:04 | from my embedded style.
| | 07:05 | So you can see the
embedded styles are now empty.
| | 07:07 | The rule has physically been
removed from our page and placed in that
| | 07:10 | External Style Sheet.
| | 07:11 | I can collapse the External Style Sheet,
select my now empty and unused embedded
| | 07:15 | <style> tag, and when I have that
selected and focused on, I can click the
| | 07:19 | Trashcan to go ahead and
delete that from our code.
| | 07:22 | So now the only thing that we have in our
page is our External Style Sheets. Pretty cool!
| | 07:26 | So as you can see, creating new style
sheets, attaching them to your pages, and
| | 07:31 | moving styles from one style sheet to
another, is extremely easy in Dreamweaver.
| | 07:35 | The power of the CSS Styles panel makes
it simple to deploy your styles across
| | 07:40 | your site exactly as
your site strategy dictates.
| | Collapse this transcript |
|
|
7. Controlling TypographyWorking with units of measurement| 00:00 | When working with either typography or
layout, it is crucially important that
| | 00:05 | you understand the different units of
measurement that CSS allows you to use,
| | 00:09 | and when you would use one over the other.
| | 00:12 | When you discuss units of measurement
in CSS, there are two general categories:
| | 00:17 | Absolute and Relative.
| | 00:19 | Absolute, which can also be referred to
as fixed units, delineate a fixed size,
| | 00:25 | one that does not change
based on any other factors.
| | 00:29 | Relative units of measurement look for
either a parent element or the user agent
| | 00:33 | itself for a base value to begin with.
| | 00:36 | With those two categories in mind, let's
take a look at the options available to
| | 00:40 | you when specifying sizes in your styles.
| | 00:43 | So here we have measurement.htm opened
up, and we're just going to go through a
| | 00:48 | couple of these units of measurement.
| | 00:49 | Let's talk about points first.
| | 00:52 | Now points are units of
measurement that are designed for print.
| | 00:55 | They are, in fact, 1/72 of an inch.
| | 00:59 | So what does that translate to on the screen?
| | 01:02 | Now that's a very good question.
| | 01:03 | You need to know the resolution the
monitor is set to, as well as the operating
| | 01:06 | system, to answer that one.
| | 01:08 | Avoid using points for onscreen font
measurement and restrict its use to print
| | 01:13 | stylesheets where it belongs.
| | 01:16 | Now what about inches and
centimeters? Well, again,
| | 01:20 | they're just what you think they are.
| | 01:22 | They're useful for other media types,
but really probably shouldn't be used
| | 01:25 | for onscreen media.
| | 01:28 | Let's move on, and talk about Relative
units of measurement. What about ems?
| | 01:32 | Well, ems are, hands down, the most
popular relative measurement for onscreen sizing.
| | 01:37 | An em is best described as being the
equivalent of the size of a capital M for
| | 01:43 | that particular font.
| | 01:45 | An ex is equal to the x-
height of that specific font.
| | 01:49 | The size of the font can change
dramatically as font-families are substituted.
| | 01:53 | So it should be used with care.
| | 01:57 | Now percentages, values
are pretty straightforward.
| | 02:01 | A percent value sizes the text to the
percentage of its inherited or default value.
| | 02:07 | Now pixels, they're based on the
current resolution of the viewing device.
| | 02:13 | Because it relies on the resolution
of the user agent, pixels are sometimes
| | 02:17 | referred to as a relative unit.
| | 02:19 | Now in truth, setting units to
pixels fixes them at that size.
| | 02:24 | There are several reasons to avoid
using pixels for font measurement.
| | 02:27 | Internet Explorer, prior to Version 7,
did not allow the onscreen resizing of
| | 02:33 | pixel-based font sizing.
| | 02:34 | So users of earlier versions of
Internet Explorer will not be able to change
| | 02:38 | their font size based on their own
viewing preferences if you use pixels.
| | 02:43 | Also, pixel sizes that might look good
on a monitor might be far too large for
| | 02:48 | the mobile environment.
| | 02:49 | Pixel-based font sizes don't
scale too well between environments.
| | 02:53 | It's best to avoid using pixels
for font sizing when possible.
| | 02:58 | Now most browsers do start
with the default font size.
| | 03:02 | And for the majority of browsers
that default font size is 16 pixels.
| | 03:06 | We're going to do a really quick
exercise where we take advantage of our
| | 03:10 | browser's default font size and
compare a relative unit of measurement with a
| | 03:13 | fixed unit of measure.
| | 03:14 | So I'm going to scroll down to the
bottom of this page, and I can see that
| | 03:19 | I have one paragraph that says, "Make
this paragraph 16 pixels tall," and then
| | 03:23 | there's another paragraph right
below that that says, "Make this one 16
| | 03:26 | pixels tall too, please."
| | 03:29 | Now both of these are paragraphs
that have classes applied to them.
| | 03:32 | You'll notice that the
first paragraph says <p.resize>.
| | 03:36 | The second one is <p.resize2>, so we
have classes resize and resize2, okay.
| | 03:42 | I'm going to go over to my CSS Styles
panel, and I'm going to go scroll down
| | 03:46 | until I find those two
selectors, <p.resize> and <p.resize2>.
| | 03:51 | The first one, I'm going to go
ahead and add a property to that.
| | 03:55 | And I'm going to add the font size property.
| | 03:57 | So font-size, again you can get that
through the pulldown menu if you'd like.
| | 04:01 | If I hit Tab, I get to go over and
set the unit of measurement here.
| | 04:04 | So for the first one, I'm going
to go ahead and set that to pixels.
| | 04:07 | So I'm just going to type in 16 pixels.
| | 04:10 | Okay, mission accomplished. Hey!
| | 04:12 | Nothing really changed here. Hm, okay.
| | 04:14 | Well, I'm going to go down to
<p.resize2>, add a property there.
| | 04:18 | And again, I'm going to do font-size,
and here, instead of 16 pixels, I'm
| | 04:22 | going to type in 1em.
| | 04:25 | No change. Interesting. Okay.
| | 04:27 | Let's preview this in our browser
and see if we have any change, or if we
| | 04:30 | notice the difference between the pixels, which
are on top, and the em, which is on the bottom.
| | 04:35 | So we're going to go ahead and Save
that and Preview that in my browser, and
| | 04:39 | I'm using Firefox, but feel free to
use any browser you want with this.
| | 04:43 | Now if I scroll down, you can see
you can't really tell a difference
| | 04:46 | between the two of them.
| | 04:47 | The top one is being sized using pixels.
The bottom one is being sized using ems.
| | 04:51 | So you might say, "Well, okay.
So then what's the big deal?"
| | 04:54 | Why do we even care which one we're using?
| | 04:57 | Well, the reason that they're both
the same size is because my browser is
| | 05:01 | currently set to a
default font-size of 16 pixels.
| | 05:05 | So the 1em that the second paragraph is
doing is sizing to one times or 100% of
| | 05:12 | that size, which equates to 16 pixels.
| | 05:14 | Well, let's take a look at what happens if
your user changes that within your browser.
| | 05:19 | So I'm going to go up to Tools, and
if you're in a different browser, you
| | 05:23 | might find this in a different location,
but for Firefox, I'm going to go to
| | 05:26 | Tools and choose Options.
| | 05:29 | And if I click on the Content tab,
notice that I have a Default Font and a
| | 05:33 | Default Size, and sure enough,
there it is set to 16 pixels.
| | 05:36 | Now if I change that, let's say I go
down to say 14, if I click OK, notice that
| | 05:42 | now we can see the difference.
| | 05:44 | The font up top that is sized as 16
pixels remains 16 pixels, whereas the one on
| | 05:49 | the bottom changes to
reflect the new browser settings.
| | 05:52 | So because it says 14 pixels,
now 1em is equal to 14 pixels.
| | 05:58 | So that relative unit of measurement
is very handy for users that might have
| | 06:02 | set different preferences for their browsers.
| | 06:05 | They're still going to get everything
scaled to the relative size that you need it.
| | 06:09 | So let's say somebody has a vision
disorder, goes in their Options and cranks
| | 06:14 | that up to say around 18 pixels.
| | 06:16 | Well, they can read your text just fine,
whereas if you'd set it explicitly at
| | 06:21 | 16 pixels that would override the
browser, and we would force them to look at a
| | 06:25 | size that they don't really want to look at.
| | 06:27 | So as a general rule ems are the
preferred unit of measurement for online type.
| | 06:32 | As always, there are exceptions to
this rule. Older versions of Internet
| | 06:35 | Explorer seemed to have problems with font-
size values that are defined strictly as ems.
| | 06:41 | As a workaround, most designers will
size the body selector using a percentage
| | 06:45 | value and then define all
other measurements in ems.
| | 06:49 | This seems to fix those IE-specific problems.
| | 06:52 | Now since font size is by and large
inherited, meaning if you apply a font-size
| | 06:58 | to a parent tag, all the tags
inside of it gets the same size,
| | 07:01 | it makes sense to carefully plan a
sizing strategy for your site, pick a unit of
| | 07:06 | measurement, and take care to
stay consistent throughout your site.
| | Collapse this transcript |
| Declaring font families| 00:00 | Using CSS gives you an amazing
amount of control over your Web site's
| | 00:04 | typography, but it doesn't change that
the fact that we're still restricted to
| | 00:08 | using standard font-families.
| | 00:10 | Since HTML does not store font
information, your Web page relies on the client's
| | 00:16 | machine to have the requested font installed.
| | 00:18 | If it's not available,
another one is substituted.
| | 00:22 | With CSS, not only can you control
which font is initially requested but which
| | 00:27 | ones should be used for substitution as well.
| | 00:31 | The way this works is that if you only
request one font-family, if the client
| | 00:36 | machine doesn't have it installed, the
browser will then substitute its default font.
| | 00:41 | Since you have no control over what
someone has selected as their own default
| | 00:45 | font, a better approach is to declare
multiple fonts which will continue to go
| | 00:50 | down the list until an installed font is found.
| | 00:54 | Your final declaration should be a generic
font-family, such as serif or sans serif.
| | 01:00 | That way, in the unlikely event that
none of your requested fonts are loaded, at
| | 01:04 | least the text will display
in the desired type of font.
| | 01:08 | In CSS terminology, this is
what we call a font stack.
| | 01:13 | Let's take a look at how Dreamweaver
tackles the process of declaring font
| | 01:16 | stacks and then create our own
custom stacks to use within our site.
| | 01:20 | So here we have the mission.htm opened up.
| | 01:23 | So one of the things we want to do is
take all of the heading 1s in our main
| | 01:26 | content region and change that font.
| | 01:29 | Currently, if I click inside this
heading, Who we are, I can see down at the
| | 01:33 | Properties Inspector that's being defined
as Georgia, Times New Roman, Times and Serif.
| | 01:38 | Now it's inheriting that value from the
body tag, but what's going to happen is
| | 01:42 | a browser is going to open this page,
and this page is first going to say,
| | 01:45 | "Excuse me. Do you have Georgia installed?"
| | 01:48 | If the answer is yes, it will
display the font in Georgia.
| | 01:50 | If not, it'll then say, "Well, what
about Times New Roman? What about Times?"
| | 01:54 | Or finally, it might say, "Okay, well,
just give me your default serif font if
| | 01:57 | none of those other fonts are available."
| | 01:59 | So we have several fallback fonts here. Okay.
| | 02:02 | We want to use the font that's a
little bit less of the standard font.
| | 02:06 | One of the interesting things that have
happened over the past few years is that
| | 02:10 | the numbers of installed fonts that
are broadly installed on computers all
| | 02:14 | across the world are increasing.
| | 02:16 | So we are increasingly not limited to just
Georgia, Arial, Verdana, Times New Roman.
| | 02:22 | We have a few fonts now that are
widely accepted enough to where we can start
| | 02:27 | using them in our font stacks.
| | 02:29 | Now one of the fonts that I'm going to
use here is called Chaparral Pro, and
| | 02:32 | that's a font that's installed with the
Creative Suite and widely installed in
| | 02:36 | the machines all across the world.
| | 02:38 | Of course, it's not as widely
installed as Georgia or other fonts.
| | 02:42 | So it's one of those fonts where
you're going to need to declare within the
| | 02:46 | font stack some common
fonts as a fallback for this.
| | 02:50 | So how do we go about
declaring a custom font stack?
| | 02:52 | Well in Dreamweaver if we grab the
pulldown menu for our font here, we can see
| | 02:57 | that Dreamweaver actually comes with a lot
of pre-installed stacks. Look at all these:
| | 03:01 | Verdana, Geneva, sans serif, Georgia,
Courier, Arial. There is a whole list of
| | 03:06 | these things that are predefined.
| | 03:08 | Well, Chaparral is not one of them.
| | 03:09 | So we need to go ahead and add this,
but I want to do this in the course of
| | 03:13 | defining something for our
heading 1s in our main content.
| | 03:16 | Right now, we'd be editing the font
stack for the body, and that's not
| | 03:19 | something I want to do.
| | 03:20 | So I'm going to make sure, again,
I've clicked inside this heading 1.
| | 03:23 | I'm going to go over to my CSS Styles
panel, and I'm going to scroll down, not
| | 03:27 | too far, until I find #mainContent h1. Cool.
| | 03:32 | I'm just going to double-click on that to
bring up my CSS Rule Definition dialog box.
| | 03:37 | And now I can return to that dropdown
menu for the font family, and we'll be
| | 03:41 | affecting the proper selector.
| | 03:43 | Okay, so since I don't see any of these
presets that really do what I need it to
| | 03:47 | do, I'm going to go right down here to
the last option, which is Edit Font List.
| | 03:51 | Now this gives me the ability to
delete font stacks, add new ones, move font
| | 03:56 | stacks up, move them down the list,
that sort of thing, rearrange them.
| | 04:00 | What I want to do is I want to
go through the Available Fonts.
| | 04:03 | So right here all the fonts are
installed on my machine, and if I just type in
| | 04:07 | C, that's going to move me down to my Cs,
and I'll just keep browsing down until
| | 04:11 | I find Chaparral Pro. There it is.
| | 04:13 | I'm going to hit the right arrow after
highlighting it, and it's going to add it right there.
| | 04:18 | Now the first font you add is the
first font in the font stack, so you want
| | 04:22 | to do them in order.
| | 04:23 | Now I'm going to keep scrolling up
and down, and I'm going to find Cambria.
| | 04:28 | That's another font that's starting to gain
popularity in systems all across the world.
| | 04:32 | And now I need a fallback font that's
a little bit more of a standard font.
| | 04:36 | So for this I'm going to switch down
to my Gs, and I'm going to find Georgia.
| | 04:42 | Now there're some systems that don't
even have Georgia installed on it, but it's
| | 04:45 | clear from these three
fonts that I need a serif font.
| | 04:49 | So if I scroll all the way down to the
bottom of my Available Fonts stack, I'm
| | 04:53 | going to find my generic font families right
down there, and fantasy might be my favorite.
| | 04:57 | That sounds pretty out there, doesn't it?
| | 04:59 | So I'm just going to go ahead and choose
serif and add that to the end of the font stacks.
| | 05:04 | So here we have Chaparral Pro,
Cambria, Georgia and serif.
| | 05:09 | I can also move that stack up the list
a little bit, so that I don't have to
| | 05:12 | scroll as far if I'm
going to be using this a lot.
| | 05:15 | I'm going to go ahead and click OK, and
now when I grab that pulldown menu, it
| | 05:20 | is the very first option.
| | 05:22 | So I'll go ahead and select that. Click OK.
| | 05:23 | Now when we close that we notice that
both of our headlines are now formatting
| | 05:28 | in the Chaparral font.
| | 05:29 | Now obviously, I have that installed on
my machine, so that was pretty easy to
| | 05:33 | do, but what about fonts that
aren't installed on your machine?
| | 05:37 | Well, you won't be able to use that
particular tool to do it, but you could
| | 05:40 | still hand-code those if you wanted to.
| | 05:43 | So if I scroll down, I see that we
have some divs down here, and they have a
| | 05:47 | class called callOut.
| | 05:49 | So what if I wanted these headings to
be a slightly different font than all the
| | 05:53 | other headings in my file?
| | 05:55 | I could use that callOut h1 selector to do that.
| | 05:58 | So I'm going to use my tag
selector to go find that in my source code.
| | 06:01 | Now remember, I can hold my Alt key down.
| | 06:04 | If you're on a Mac, you'll hold your
Command+Option key down key and click.
| | 06:07 | That brings up the Code Navigator,
and I'm just going to find this
| | 06:10 | mainContent .callOut h1.
| | 06:14 | That's the one I want to use.
| | 06:16 | So when I click on that, over here in Code
View, that should jump me right to that selector.
| | 06:20 | I'm going to create a blank line
right after the last line's semicolon.
| | 06:25 | So I'll create a blank line
between it and the curly brace.
| | 06:28 | And I'm just going to type
in font-family, font-family.
| | 06:33 | Not if this is your time hand-
coding, you'll notice Dreamweaver does
| | 06:36 | something pretty nice for us.
| | 06:37 | As we started typing, it gave us this
really nice long list of properties that
| | 06:41 | could set for our CSS.
| | 06:43 | By continuing to type, that list gets
smaller and smaller and smaller till when
| | 06:47 | we get to this point, the only
available option is font-family.
| | 06:50 | If I hit Return, notice that it's going
to go ahead and autocomplete that for me.
| | 06:54 | And it's going to complete the
syntax of the colon there for me.
| | 06:57 | So I don't really
necessarily have to remember to do that.
| | 07:00 | The other thing that it does for me is it
starts giving me other pieces of my interface.
| | 07:04 | So you see here, we have all
those predefined font stacks.
| | 07:07 | Now I want to custom font stack here.
| | 07:09 | So I'm going to do this on my own.
| | 07:10 | What I'm going to do now is in
quotation marks I'm going to type in "Franklin
| | 07:17 | Gothic Medium," all capitalized
there and then close my quotation marks.
| | 07:23 | So why the quotation marks?
| | 07:24 | Well, if your font name includes more
than one word, it needs to be in quoted in
| | 07:28 | quotation marks. Otherwise, you don't need them.
| | 07:30 | Then I'm going to do a comma
and then Arial Narrow Bold.
| | 07:37 | Now spelling and capitalization count here.
| | 07:40 | When your machine looks for this font,
it's going to look for a font that is
| | 07:42 | spelled exactly the same way,
capitalized exactly the same way, so you want to
| | 07:46 | be really careful with that.
| | 07:48 | Then another comma. Then I'm just going
to do Arial and then another comma, and
| | 07:52 | then I'm going to do sans_serif.
| | 07:55 | So that's a custom font stack.
| | 07:56 | That's me building one.
| | 07:57 | I'm not necessarily sure whether I have
Franklin Gothic Medium installed on my machine.
| | 08:01 | It does not matter.
| | 08:02 | It's going to add that
as the first option there.
| | 08:05 | So I'm going to go ahead and do a Save All.
| | 08:07 | Switch back to Design view.
| | 08:09 | And now I notice my headlines here
changed to that sans serif font.
| | 08:12 | So that's exactly what I wanted.
| | 08:14 | Now we have our items displaying in
exactly the font we want while giving
| | 08:18 | ample options for users who might not have
that exact font installed on their machine.
| | 08:23 | Notice how easy Dreamweaver makes this
process by giving us multiple default
| | 08:27 | family declarations, and giving us an
easy way to create our own font stacks.
| | 08:32 | Now I just want to pass on a little
bit of additional information here.
| | 08:36 | If you're looking for some good online
resources, the site codestyle.org has a
| | 08:41 | great article on building better
font stacks, where they list commonly
| | 08:45 | installed fonts on systems, and list
a few examples of font stacks that go
| | 08:49 | really well together.
| | 08:50 | So I definitely advise reading more about that.
| | 08:52 | The other thing that I want to mention
is that there are other options for using
| | 08:57 | fonts that you want.
| | 08:58 | CSS3, which is the new
specification of CSS, contains a property
| | 09:04 | called @font-family.
| | 09:06 | That allows you to point to a font that
is hosted on a server online so that it
| | 09:11 | doesn't have to be
installed on the client machine.
| | 09:14 | There have been some various murky legal
issues surrounding that, and one of the
| | 09:18 | things that's starting to come out is
that we're seeing a brand-new service
| | 09:22 | online, where companies are hosting
fonts for you to use for a small fee that
| | 09:27 | you can use within your site.
| | 09:29 | So if you're interested in a
different approach, I would definitely advise
| | 09:32 | you to read up on @font-face, so you
can learn what it can do for you within
| | 09:37 | your CSS.
| | Collapse this transcript |
| Controlling font sizing| 00:00 | Embracing a Web standards-based
approach to Web design means designing your
| | 00:05 | pages to give as much control to the
user as you can, while maintaining the
| | 00:09 | integrity of your original design.
| | 00:11 | Remember, your users might be using
different browser Agents, hand-held devices,
| | 00:16 | or they may have accessibility issues
that require the default font size to be
| | 00:21 | set a little higher than normal.
| | 00:23 | Without a doubt, one of the challenges
in Web design is anticipating how your
| | 00:27 | users will be accessing your site.
| | 00:29 | By using relative units of
measurement when sizing text, you control how
| | 00:34 | elements relate to each other relative
to size, but leave the ultimate control
| | 00:38 | of the text size to the user or the user agent.
| | 00:41 | This helps your site become more
accessible and more readable across a
| | 00:45 | wider array of devices.
| | 00:46 | We'll accomplish this in our Explore
California site by first sizing the body
| | 00:52 | tag to a baseline size for our site,
and then using ems to size our text
| | 00:56 | relative to the value sent
into the page from the body tag.
| | 01:01 | Since the font size property of parent
elements is inherited by the elements
| | 01:04 | inside of it, we should be able to
control the sizing of our fonts with
| | 01:08 | relatively few styles.
| | 01:10 | So here I have the resources.htm open.
| | 01:13 | Now, this is interesting.
| | 01:15 | If I click inside my headline here,
Got questions, and I bring up my Code
| | 01:20 | Navigator, remember that's Alt+Click
or Command+Option+Click on the Mac.
| | 01:23 | If I start at the very first rule and
just sort of work my way up, I notice
| | 01:28 | something. Nowhere along this list
is anything said about font sizing.
| | 01:34 | Um-huh, Interesting!
| | 01:35 | Let's try our paragraph, same thing.
| | 01:39 | I am not getting any font sizing.
| | 01:42 | Okay, so if we are not getting any
font sizing, why are they different sizes?
| | 01:46 | Why is the headline bigger
than the paragraph, for example?
| | 01:49 | Well, that's because every single user
agent out there has its own default style sheet.
| | 01:54 | So headings already have sort of the
default style sheet within a browser.
| | 01:58 | Paragraphs already have a
default size within a browser.
| | 02:01 | That's what you are going to get if you
don't explicitly set a sizing for your
| | 02:05 | fonts within your page.
| | 02:07 | So you need to be aware of that as well. Okay.
| | 02:09 | Let's go over to our CSS Styles panel.
| | 02:11 | What I am going to do is collapse
my Files panel just to give myself a
| | 02:14 | little bit more room.
| | 02:16 | I can change these dividing lines, so
that I can see more of one area versus the
| | 02:20 | other if you'd like.
| | 02:21 | Make sure you're in the All
Styles area and select the body tag.
| | 02:25 | We are going to go ahead and add a
property here, and you can do that simply
| | 02:28 | by clicking that link.
| | 02:29 | I find this to be the easiest and
fastest way to edit your style sheets.
| | 02:33 | So I am going to click right in there.
| | 02:34 | I am going to type in font, so
just the shorthand notation font.
| | 02:38 | I am going to hit Tab.
| | 02:40 | That's going to take me over to the other side.
| | 02:42 | We have to do this in a specific order here.
| | 02:45 | I am going to type in 100%
Georgia, "Times New Roman" here.
| | 02:54 | Make sure those are all
capitalized the T, the N and the R.
| | 02:58 | Another Quotation Mark, Times, serif,
lower case, and then just hit Return.
| | 03:05 | So as you can see, I really like to hand-code.
| | 03:08 | I just like to type stuff in.
| | 03:10 | You certainly could have double-clicked
the body selector typed 100% here, and
| | 03:14 | grabbed Georgia, "Times New Roman"
Times and serif from the pulldown menu.
| | 03:18 | That would work just as well.
| | 03:21 | Okay, so a few things changed here.
| | 03:23 | Did you notice how the paragraph seems to get
a little larger in relation to the headlines?
| | 03:27 | So what we are doing now is we are
basically telling any user agent, "Hey!
| | 03:31 | "Whatever your default size is, that's what
we want for all our elements inside the page.
| | 03:36 | "So make the paragraph the size you'd
normally make them, make the headings the
| | 03:39 | size you'd normally make
them." Well, that's fine.
| | 03:42 | But now we can take a more granular
level of control over these elements.
| | 03:46 | We are going to focus first on our headlines.
| | 03:50 | So the first thing I am going to
do is go over to my CSS Styles panel.
| | 03:54 | Scroll down until we find #
mainContent #mainArticle h1.
| | 03:59 | So that's the selector you are
looking for, #mainContent #mainArticle h1.
| | 04:04 | That's going to target
this little guy right there.
| | 04:06 | So I am going to click on that to highlight it.
| | 04:09 | I am going to add a property here.
| | 04:10 | Here, we are going to add
font-size, so font-size.
| | 04:15 | Hit Tab to move over to the Values pane.
| | 04:18 | Here we are just going to type in 2em.
| | 04:22 | If you want, you can just type in the
number 2 and then follow directly by an em.
| | 04:26 | You don't have to grab it from the unit of
measurement pulldown menu to the right of it.
| | 04:30 | I am going to hit Return.
| | 04:31 | It's going to resize our headings.
| | 04:33 | You might not notice any
huge changes right now.
| | 04:36 | All right. Well, if I scroll down the page, here are my h2s.
| | 04:40 | Just underneath the selector
that we just set, we will find the
| | 04:43 | #mainContent #mainArticle h2.
| | 04:46 | Go ahead and highlight that.
| | 04:47 | We are going to add font-size
to that as well, so, font-size.
| | 04:51 | Yes, you can grab that from the pulldown
menu if you don't feel like typing that in.
| | 04:54 | Then I am going to do on 1.6ems, hit Return.
| | 04:58 | It got a little larger. I mean I don't know if you
can't see that, but it got a little bit bigger.
| | 05:02 | Then finally, I am going to find
that #mainContent #mainArticle h3,
| | 05:08 | add a Property to it, and
change its font size to 1.3ems.
| | 05:15 | It definitely got a
little bigger there. Perfect.
| | 05:16 | Now, what about our paragraphs?
| | 05:19 | Well, I would like our paragraphs
to be the normal size of a paragraph
| | 05:22 | within that user agent.
| | 05:24 | Now, I could go ahead and set that
explicitly to say 1em or even 100%.
| | 05:30 | But truth be told, because I told my
body tag to be 100%, that's going to be
| | 05:35 | inherited by everybody, and
that tells my paragraphs, "Hey!
| | 05:37 | Just go ahead and been a default size."
| | 05:39 | In that instance, we really don't
need to set any type of sizing for
| | 05:43 | the paragraph at all.
| | 05:44 | So what we did on the body tag
has saved us a little bit of time.
| | 05:48 | Okay, now if we were to preview this in a
browser, and I think we'll go ahead and do that.
| | 05:51 | So I am just going to do
Save All, Preview in our browser.
| | 05:56 | All of our headlines and paragraphs
are relating to each other based on
| | 05:59 | that sizing information.
| | 06:01 | Now, you know that we can increase or
decrease the size of the text within our browser.
| | 06:06 | As a matter of fact, for Firefox, if
we go into the Zoom, notice that we
| | 06:10 | have Ctrl+Plus and Ctrl+Minus.
| | 06:13 | We can even set it to Only Zoom The Text.
| | 06:15 | I am going to do that.
| | 06:15 | I am just going to say OK.
| | 06:16 | I just want you to Zoom Text Only.
| | 06:19 | Now, if I do a Ctrl+Plus or Command+
Plus on the Mac, you'll notice my text
| | 06:23 | goes up or goes down.
| | 06:25 | But did you notice how
the sizing remains relative?
| | 06:28 | They have the same relation to each
other, even as they are larger or smaller.
| | 06:33 | That's because of the fact that we are
using those relative units of measurement.
| | 06:36 | Now, you don't need to
preview that within your browser.
| | 06:39 | In CS5, we can now actually
preview this directly within Dreamweaver.
| | 06:44 | Let me show you what I mean.
| | 06:45 | I am going to go back in the
Dreamweaver, and I am going to right-click
| | 06:47 | my Document toolbar.
| | 06:49 | There is a little toolbar
called the Style Rendering toolbar.
| | 06:52 | I am going to go ahead and open that up.
| | 06:53 | This has gotten a little beefier in CS5.
| | 06:56 | You'll notice on the PC, I am moving this
around, but you can't move this around on the Mac.
| | 07:01 | Okay, so what does this toolbar allow us to do?
| | 07:04 | Well, the first section in the toolbar
allows us to turn on specific media styles.
| | 07:09 | So if you want to look at your Print
Style Sheets, which we really don't have
| | 07:12 | any, but if you had some defined, you
can click on that and you would see those
| | 07:15 | instead of your Screen Media Type.
| | 07:16 | We'll also have a very quick way right
here to toggle your styles on and off.
| | 07:20 | So just clicking that will disable them.
Clicking on that again will turn that
| | 07:24 | back on again, so that you can preview them.
| | 07:25 | We'll also have pseudo-selectors
like Length, Visit, Hover and Active.
| | 07:29 | Very useful, if you have links that
have different selectors based on whether
| | 07:32 | somebody is these hovering over them.
| | 07:34 | We will be doing that a little bit later on.
| | 07:35 | Then we have this selection.
| | 07:37 | I want you guys to pay close attention to this.
| | 07:39 | This is new as well. I like this.
| | 07:41 | We can Increase the Text Size or Decrease
the Text Size directly here in Dreamweaver.
| | 07:45 | So if you really want to see what
this is going to look like when somebody
| | 07:49 | increases the text size or decreases
the text size, you can just sort of click
| | 07:53 | these buttons until you get what you
are looking for, which is really cool.
| | 08:00 | Now, this doesn't work with Live View turned on.
| | 08:02 | So if you turn Live View on,
this is all going to be disabled.
| | 08:05 | This needs to work within the
context of your regular Design view.
| | 08:08 | Now, you are also going to notice there
is a little button right in the middle
| | 08:11 | that says Reset Text Size.
| | 08:13 | So let's say you have increased and
decreased a little bit, and you can't
| | 08:16 | remember what the size
actually is supposed to look like.
| | 08:19 | You can just click that and say Reset
Text Size, and it will take you back to
| | 08:22 | where you are supposed to be.
| | 08:24 | If it's grayed out, that should mean
that your font sizing is at 100%, but I've
| | 08:28 | noticed that to be a
little buggy here and there.
| | 08:31 | So sometimes it will appear grayed out,
sometime it won't, but just click that,
| | 08:35 | and it will reset your text right back to 100%.
| | 08:38 | Now, one more thing: While we have used
the resources.htm page to help us format
| | 08:42 | our font-sizes, we know that because we
are using an External Style Sheet, that
| | 08:46 | our styles are now being
used throughout the site.
| | 08:49 | If we've planned properly and
structured our pages well, the rest of our site
| | 08:53 | should use these rules without
us having to do any modifications.
| | 08:57 | So there you have it.
| | 08:59 | Our site's font-sizing is well defined.
| | 09:01 | It draws its initial value from the
user's default font size, and then any
| | 09:05 | scaling is done in relation to that value.
| | Collapse this transcript |
| Controlling weight and style| 00:00 | You wouldn't think that you'd have to put too
much thought into making text bold or italic.
| | 00:05 | But in reality, there are several ways
to control text weight and style, and how
| | 00:11 | you choose to do it depends largely
upon your individual site strategy.
| | 00:15 | From a pure HTML standpoint, you can
use the emphasis and strong
| | 00:20 | tags to render text
as italic and bold, respectively.
| | 00:24 | You should keep in mind, however, that
these tags carry a logical meaning to them.
| | 00:29 | Both tags are part of a group of
elements referred to as phrase elements.
| | 00:34 | An <em> represents text being emphasized
and is usually rendered as italicized text,
| | 00:40 | whereas the <strong> tag represents
text that is more strongly emphasized than
| | 00:45 | tags contained within an <em> tag.
| | 00:47 | So using these tags should be done within
the larger context of your structural markup.
| | 00:53 | So what you do if you want to bold or
italicized text without using structural markup?
| | 00:58 | CSS allows you to take
advantage of two properties:
| | 01:02 | Font-weight for bolding and
Font-size for italicizing.
| | 01:06 | Let's examine the approach of
using each of these techniques.
| | 01:09 | Now by default, all of your headlines,
| | 01:11 | your heading 1, your heading
2, those are going to be bold.
| | 01:14 | But if I scroll down a little bit, I
find some heading 2s down here, and I
| | 01:19 | really don't want those
to be bold for this layout.
| | 01:22 | I think that makes them a little strong there.
| | 01:24 | So what I am going to do here is I
am going to modify our #mainContent
| | 01:27 | #mainArticle h2 rule so that the font-
weight is told not to be bold. All right.
| | 01:32 | So what I am going to do is
go over to my CSS Styles panel.
| | 01:35 | I am going to scroll down
through my styles, until I find my
| | 01:41 | #mainContent #mainArticle h2.
| | 01:43 | I am just going to double-click
that to open it up in my CSS Rule
| | 01:47 | Definition dialog box.
| | 01:49 | Here, I am going to change font-
weight from no declaration to normal.
| | 01:54 | Now, if you don't declare a font-
weight or a font-style, or really any
| | 01:58 | value, what you're basically saying
to the user agent is, "Whatever you would
| | 02:02 | normally do, just do that."
| | 02:04 | Well, headings are normally bold, so
leaving that blank is just going to make
| | 02:08 | all of our headings bold.
By choosing normal, click OK,
| | 02:12 | we can see that that takes our
headlines and says, "Okay. For that particular
| | 02:15 | heading, don't make it bold."
| | 02:17 | Now, we discussed structural
bolding and italicizing just a minute ago.
| | 02:22 | If I scroll down into the Customer
notifications area, notice that we have a
| | 02:27 | couple of areas that we
want to sort of stand out here.
| | 02:30 | Now, I can highlight Tour
Confirmation, and then down in my Properties
| | 02:34 | Inspector, I can click either
the Bold or Italic tag to do those.
| | 02:38 | But I have to pay close
attention to which tab I have selected.
| | 02:42 | Currently, I am looking at my CSS Properties.
| | 02:45 | If I do that, it's going to modify a CSS rule.
| | 02:49 | If I want to add structural content,
I'll go to the HTML Properties and
| | 02:55 | click the Bold tag there.
| | 02:56 | That, as you can see right here in the
tag selector, added a <strong> tag.
| | 03:01 | I want to do the same thing to the
reminder notification and the sentence:
| | 03:08 | If you do not receive a confirmation
within 24 hours, contact us immediately.
| | 03:13 | We'll go ahead and italicized that.
| | 03:14 | That's going to add an <em> tag.
| | 03:16 | So while visually we get a bold and
italics, what we've really done is we've
| | 03:21 | added structural markup
that has logical meaning.
| | 03:24 | So other user agents are going to
be sort of able to infer that from us
| | 03:28 | that this is emphasized.
| | 03:29 | This text is strongly emphasized.
| | 03:32 | But what if you just want
to make a visual change?
| | 03:34 | You don't really want to add any
structural markup to your code or any
| | 03:38 | structural markup that can be interpreted.
| | 03:40 | Take the company name here:
| | 03:41 | Explore California.
| | 03:44 | What if everywhere we find the company name,
| | 03:46 | maybe we would want it
bold and a blue color, okay?
| | 03:50 | Well, number one, the <em> tag or the
<strong> tag wouldn't do that for us.
| | 03:53 | But maybe also we didn't really want to
pass on any type of meaning to user agent.
| | 03:58 | We just wanted to do something visual.
| | 04:00 | Well in this case, we can create a class
and then encase this in a <span> tag.
| | 04:05 | That doesn't necessarily pass along
any structural meaning or any inferred
| | 04:09 | meaning, but it does give us a
chance to do that visual styling.
| | 04:12 | So I am going to highlight
the text, Explore California.
| | 04:15 | Down in my Properties Inspector, I am
going to click on my CSS properties.
| | 04:19 | I am going to make sure that this
Targeted Rule is <New CSS Rule>.
| | 04:23 | I am going to click Edit Rule.
| | 04:25 | That's another way to
create a brand-new CSS rule.
| | 04:28 | That's the exact same process as if we
had gone over the CSS Styles panel and
| | 04:34 | clicked on the New CSS Rule there.
| | 04:36 | So we are going to do a Class.
Notice that comes up automatically here.
| | 04:39 | We are just going to call
it dot - remember the period.
| | 04:42 | It's very important - company,
so .company. There we go.
| | 04:45 | We are going to define it
in our main.css and click OK.
| | 04:49 | Now, for Color, we are
going to use #193742, so 193742.
| | 04:59 | If you hit Tab, it will show you that
sort of a dark - sort of teal blue, a
| | 05:02 | common accent color throughout our site.
| | 05:04 | Now, what about Font-weight?
| | 05:05 | Well, let's go ahead and make it bold.
| | 05:07 | But if you grab that pulldown menu,
you may have noticed earlier,
| | 05:10 | there are a lot of choices there, and that
was just bold or normal. What's going on?
| | 05:14 | Well, using CSS, you can go from the
lightest possible value, which is 100, to
| | 05:20 | the heaviest possible value, which is 900.
| | 05:23 | Now, truth be told, most user agents
cannot show the amount of subtlety between,
| | 05:29 | say, 700 and 800. You'll
never notice the difference.
| | 05:32 | The way it really sort of plays out is
400 is more normal, 900 his bold and 100
| | 05:37 | is a light, if that is available.
| | 05:39 | So we are just going to go ahead and say Bold.
| | 05:42 | We are going to click OK.
| | 05:44 | Now, we can see that we have a <span>
tag surrounding that text right here in
| | 05:48 | tag selector showing us that.
| | 05:50 | Our text is now blue and bold, pretty cool.
| | 05:53 | Now, I can just scroll down
through our text, find more instances of
| | 05:58 | Explore California.
| | 06:00 | I could use my Properties Inspector now
to apply company everywhere I find that.
| | 06:04 | Now, notice you can do that in
both the CSS and HTML properties.
| | 06:08 | So if I switch to HTML and
highlighted Explore California, I find Class
| | 06:13 | association right here.
| | 06:14 | I could grab that and choose company.
| | 06:17 | I get the same result. Cool!
| | 06:18 | Now, let's do one more thing.
| | 06:21 | If I look over here in the sidebar, I
want all of our paragraph text over here:
| | 06:26 | Day Spa Package and the price,
| | 06:27 | I want that to be italicized.
| | 06:29 | Again, that's something
that CSS can help us with.
| | 06:32 | It really wouldn't make a whole lot
of sense to have to highlight every
| | 06:35 | single one of those lines and
surround them with an <em> tag.
| | 06:38 | This is a purely visual
style that we want to do.
| | 06:41 | So we can go ahead and
modify one of the existing rules.
| | 06:43 | So I am going to, again, come over to
my CSS Styles panel, and I am going to
| | 06:47 | scroll through that until I
start finding my sidebar styles.
| | 06:50 | They are down there always.
| | 06:51 | I am going to find #sidebar #
specials p. That the one I want.
| | 06:58 | I am going to go ahead
and double-click that again.
| | 06:59 | When we are dealing with italics, we
are dealing with the Property Font-styles,
| | 07:03 | so Font-weight for bolding,
Font-styles for italics.
| | 07:07 | If I grab the pulldown menu, you
notice we have normal, italic and oblique.
| | 07:11 | Now, what's the difference
between italic and oblique?
| | 07:14 | Now, italic will actually use
the italic version of the font.
| | 07:18 | Oblique will sort of skew the font a
little bit, and is useful if that font
| | 07:23 | doesn't actually have an
italicized version of it.
| | 07:26 | I recommend using italic instead of
oblique because they are some times when
| | 07:29 | oblique just does not look good at all.
| | 07:32 | So we are going to choose italic. Click Ok.
| | 07:34 | Now, we notice that all those guys has
format as italicized text. So there we go.
| | 07:39 | You know, having options, that's a good thing.
| | 07:41 | When stylizing text, keep your options
in mind and make sure that the solution
| | 07:46 | that you use is going to fit
your overall site strategy.
| | 07:49 | Don't use structural markup
unless the situation calls for it.
| | 07:54 | Make sure that your styles are written
so that the proper weight and style is
| | 07:56 | passed on based on the rendering intent.
| | Collapse this transcript |
| Controlling line height| 00:00 | As a designer, one of the things that I
absolutely love about CSS is the amount
| | 00:05 | of control that it gives me over my typography.
| | 00:08 | Prior to using CSS, there were aspects
of my type that I had no control over,
| | 00:12 | like Line Height, for example.
| | 00:13 | Now, whether you refer to it as Line
Spacing, Line Height or Leading, the Line
| | 00:19 | Height CSS Property lets you adjust the
amount of space between lines of text.
| | 00:24 | While that, in and of itself, is great,
if you have a full understanding of how
| | 00:29 | the Line Height property works, you can
make it do a great deal of work for you
| | 00:34 | inside your layouts.
| | 00:35 | The value that you assign to an
element's Line Height become the distance
| | 00:39 | between the baselines of
lines of text. Now, what's more,
| | 00:44 | the calculated value is one of the
values used in calculating the height of an
| | 00:48 | element's Inline box, which allows us
to do some pretty cool things outside of
| | 00:53 | just controlling typography, as
we're going to see in this example.
| | 00:57 | So here we have the explores.htm open,
and I want to scroll down and talk about
| | 01:03 | a few of the things that we're going to do here.
| | 01:05 | Scrolling down and looking at our
paragraph text, it is a little too jammed together.
| | 01:09 | I want to space that out a little bit
more, so it's a little bit easier to read.
| | 01:12 | Now, if I scroll down a little bit
further, I can see that I have a box down
| | 01:16 | here where I have some of the
benefits of being an explorer member listed.
| | 01:21 | What I'd like to do is kind of center
this text, Explorer Member Benefits.
| | 01:25 | I would like to center that
within that space vertically.
| | 01:28 | Now, most people would use padding to
do that, but as we're going to see, Line
| | 01:32 | Height can help us do that as well.
| | 01:34 | Well, let's first tackle the Line
Height of our paragraph right up here.
| | 01:39 | Remember, one of the easiest ways to
target this is just go ahead, hold down the
| | 01:43 | Alt key on the PC or the Command+Option
Key on the Mac and click on it, and you
| | 01:47 | can go right to the
selector that you're looking for.
| | 01:49 | Now, we are looking for
the #mainContent p selector.
| | 01:54 | So I'm going to go ahead and click on that.
| | 01:55 | Now, it does open you up in a Split Screen
View, but more importantly, look at that.
| | 01:58 | It jumps right over here to the
CSS Styles panel to that rule.
| | 02:01 | I'm going to double-click that to open
that up in my CSS Rule Definition dialog box.
| | 02:06 | Okay, well, here is where
we get to set a Line-height.
| | 02:10 | Notice that we do have
units of measurement for that.
| | 02:13 | We have a unit of measurement that we
don't have anywhere else, and I want
| | 02:15 | to talk about that.
| | 02:17 | So I'm going to type in 1.8.
| | 02:20 | Now, just a little plug for
online typography here, guys:
| | 02:23 | Online typography typically needs
a little bit more white space than
| | 02:28 | traditional print typography.
| | 02:29 | So whereas your Leading values in
print might be set to, say, 120% of your text
| | 02:35 | size, online, you should think
more that as 140% of your font size.
| | 02:41 | However, it is not a hard and a fast rule.
| | 02:44 | In this case, we're going to do more.
| | 02:45 | So when we do 1.8, if I grab the
pulldown menu, we have all of our normal
| | 02:49 | units of measurement.
| | 02:50 | There are percentages. There's ems.
| | 02:52 | There's pixels.
| | 02:53 | There's whatever you want to use.
| | 02:54 | But at the very bottom, we have a
unit of measurement called multiple.
| | 02:57 | Now, that's not going to be available
in any other property, only Line-height.
| | 03:02 | So what is multiple?
| | 03:03 | Well, essentially multiple means
1.8 times the size of your font.
| | 03:09 | So if our font is at 1 em, which can
translate to, say, 16 pixels, then it's
| | 03:13 | going to be 1.8 times 16 pixels, or
whatever the size of your font is.
| | 03:18 | So you could also think of that as
180%, and you can certainly type in 180% and
| | 03:23 | get something very similar.
| | 03:25 | Most people, for Line-height, use
multiples for one very important reason,
| | 03:29 | and that's inheritance.
| | 03:30 | Let's say we put a Line-
height of 1.5 ems on our body tag.
| | 03:35 | Now, the Line-height's value inherits.
| | 03:37 | So you would think that everybody in your
site would get 1.5 ems as their Line-height.
| | 03:42 | That's not entirely true.
| | 03:44 | What would happen is the
value would be calculated first.
| | 03:48 | So you'd have 1.5 times whatever the
size of the body text is, and then that
| | 03:52 | fixed value would then be inherited
by all of your paragraphs and headlines
| | 03:57 | and things like that.
| | 03:58 | That's not desired.
| | 04:00 | However, if you use a multiple,
then the multiple itself is inherited,
| | 04:04 | so everybody would get that 1.5, or 1.2, or
1.8, or whatever it is that you're going for.
| | 04:09 | So as a general rule, if you're really
using it simply for sizing and you want
| | 04:15 | to make sure the proper value is inherited
down the line, use multiples instead. All right.
| | 04:19 | So I'm going to go ahead and
click OK, click on Design view,
| | 04:22 | and sure enough, now we get a little
bit more vertical spacing between our text.
| | 04:26 | That certainly does look a lot better to me.
| | 04:29 | Okay, well, I'm going to scroll down
a little bit further to our Explorer
| | 04:32 | Member Benefits box.
| | 04:33 | So remember, I want to center that
text in that box, that sort of dark blue
| | 04:37 | background that we've got going on there.
| | 04:40 | Now, most people, when they first
start trying to tackle something like that,
| | 04:43 | typically will use padding to do this.
| | 04:45 | They'll put the same amount of padding
at top and the same amount of padding in
| | 04:48 | the bottom to get what they want.
| | 04:50 | However, there's a much easier way to do this.
| | 04:53 | Every single line of text that you use is
inside of something that we call an Inline box.
| | 05:00 | Let me demonstrate that for you really quickly.
| | 05:02 | You guys don't have to do this along with me.
| | 05:05 | This is just me wanting to show you guys
this concept maybe a little bit more clearly.
| | 05:09 | All right.
| | 05:10 | So if I take this and I give this a
background color of, say, yellow, ff0 -
| | 05:14 | there we go - and I go back over to my page,
| | 05:19 | now every single one of these lines of
text is considered to be inside what we
| | 05:24 | call an Inline box.
| | 05:26 | So this isn't one solid, big block.
| | 05:29 | Each one of these lines of
text is in their own box.
| | 05:34 | Now, Line-height is actually the
space between the top and the bottom area
| | 05:39 | between this box, and the text
is centered in the middle of it.
| | 05:42 | So 1.8, we are getting 1.8 times the
size of this text and then the text is
| | 05:46 | centered inside that.
| | 05:47 | So the distance from baseline to
baseline is actually centered within that.
| | 05:52 | Now, we're going to use that
particular fact to our advantage in this
| | 05:55 | Explorer Member Benefits.
| | 05:57 | So what we're want to do here is
target, and once again, I can just bring
| | 06:01 | up the Code Navigator,
| | 06:02 | I'm going to target this rule:
#mainiContent #mainArticle .memberBenefits h2.
| | 06:08 | So by selecting that, I
just bring that right over here.
| | 06:11 | I'm going to double-click that.
| | 06:13 | And now, we're going to go into our Line-height.
| | 06:15 | Now, here we could do a relative unit
of measurement, or I could do a fixed
| | 06:18 | unit of measurement, because we are not
really worried about inheriting this anywhere.
| | 06:22 | We're more worried about the
size of our actual text box.
| | 06:25 | So if I give it a Line-height of, say, 2
and give it a multiple there, click OK,
| | 06:32 | and I'm just going to go
ahead and flip that back over,
| | 06:34 | you can see over here in Design
View we get a much taller structure.
| | 06:37 | Of course, it can't be that precise
with that, because if somebody increases or
| | 06:41 | decreases the size of the text, that's
going to increase or decrease with it.
| | 06:44 | That may be the desired result, but
what if you just wanted to make it, say, 40
| | 06:48 | pixels tall, and have it stay 40 pixels tall.
| | 06:51 | Well you can do that as well.
| | 06:52 | So I'm going to go back and edit that again.
| | 06:55 | And this time, instead of leaving the Line-
height as 2 - and I'm just going to hand-code this.
| | 06:59 | You can bring up that
dialog box again, if you'd like -
| | 07:01 | I am just going to type in
40px for pixels. Do a Save All.
| | 07:06 | Flip back over to Design view.
| | 07:08 | You can it doesn't make a
whole lot of difference.
| | 07:10 | And that's based off of the default size.
| | 07:13 | So it's going to be about the same.
| | 07:14 | But now, if I increase or
decrease the size of my text -
| | 07:18 | so let me increase that -
| | 07:20 | you can see that the size of the box is
actually increasing because of the line breaks.
| | 07:25 | But if I decrease the size of my text,
the line box itself stays exactly the
| | 07:30 | same size at 40 pixels.
| | 07:32 | If I'd used a relative unit there, say
2 or 1.8, that would continue to resize
| | 07:38 | even if the text shrunk down a little bit.
| | 07:39 | So it's really a personal preference,
and it's up to you whether you want to
| | 07:43 | use a fixed unit of measurement for
the Line-height in those instances or a
| | 07:47 | relative unit of measurement.
| | 07:48 | So Line-height, that's a
pretty straightforward concept.
| | 07:51 | But just like anything else with CSS,
you must fully understand how it works in
| | 07:56 | order to take full advantage of it.
| | 07:58 | Using relative units allow you to
create line spacing that relates to the text
| | 08:02 | size, allowing the line spacing to scale
with the text if the font size changes.
| | 08:08 | Now, keep in mind that using multiples
for line spacing is encouraged if the
| | 08:11 | Line-height property is going to be inherited.
| | 08:14 | Although not a good idea for the
majority of your site's typography, using
| | 08:18 | absolute values for Line-height both
centers text vertically inside its line box
| | 08:22 | while also setting the height of the
box itself, which is ideal for menus and
| | 08:27 | other single-use structures.
| | Collapse this transcript |
| Controlling vertical spacing with margins| 00:00 | When controlling typography in layout,
one of the biggest challenges is in
| | 00:04 | dealing with vertical spacing.
| | 00:06 | Block level elements like
paragraphs, headings, and lists are spaced
| | 00:10 | vertically by using margins.
| | 00:12 | On the surface, that sounds
pretty straightforward and simple,
| | 00:16 | however, there are two things that
typically trip people up when attempting to
| | 00:19 | control spacing through margins.
| | 00:22 | First, vertical margins collapse.
| | 00:24 | If you set a bottom margin on an
element and a top margin on the element below
| | 00:29 | it, instead of getting space equal to
the two margins, you get spacing equal
| | 00:33 | to the highest value.
| | 00:35 | At first, this seems pretty
counterintuitive until you realize that without
| | 00:39 | margin-collapse, all paragraphs, headings,
and other elements would be double spaced.
| | 00:45 | Now the other small little detail is
that every browser has its own default
| | 00:49 | style sheet with its own preset values
for vertical margins between elements.
| | 00:54 | Without compensating for, or even
eliminating, these default values, your spacing
| | 00:59 | can be hard to predict and inconsistent.
| | 01:01 | We will control our vertical margins
by first reviewing how we eliminate any
| | 01:05 | default margins that browsers might have,
and then by setting margins that take
| | 01:10 | into account vertical margin collapse.
| | 01:13 | So here I have the very longly
named tour_detail_bigsur_trails.htm.
| | 01:20 | One of the toughest things to do is
sort of get rid of the default margins and
| | 01:24 | padding that come inherent within a browser.
| | 01:28 | There are a lot of
different opinions about doing this.
| | 01:30 | And if you want to read more about this, go
out to Google and do a search for CSS Reset.
| | 01:37 | That's what this technique
is typically referred to.
| | 01:39 | There are any number of blogs, pages
out there, where people are talking about
| | 01:44 | the pros and cons of CSS Resets.
| | 01:47 | Some people do these really detailed ones,
| | 01:49 | some people don't do them at all, and
some people do sort of a small flavor of one.
| | 01:53 | Essentially, what
they're designed to do is this:
| | 01:55 | They're designed to allow you to have
control over the vertical spacing of your
| | 01:59 | element, because if you leave the
browser's default margins in there, chances
| | 02:04 | are that margin might overwrite yours
or might be larger than the one that you
| | 02:08 | called for, and you don't
achieve your desired spacing.
| | 02:11 | But the downside of this is if you
zero out all the default margins for a
| | 02:15 | browser, that means that you have to
manually put them back in for every single element.
| | 02:21 | And sometimes you could forget to
do that, and you end up with really
| | 02:24 | weird-looking spacing.
| | 02:25 | So what we're doing in our file is
what I like to call a limited CSS Reset.
| | 02:31 | That means that only a few of the
elements that we're going to be using
| | 02:34 | throughout our site are reset, and that
they're really just the ones that we're
| | 02:37 | going to use over and over and over again.
| | 02:38 | Now, let's take a look at our reset.
| | 02:40 | I'm going to go right over here to our
tour_detail_bigsur_trials.htm document,
| | 02:45 | and I'm going to click on the main.css link.
| | 02:48 | That's going to take me to my main style
sheet and notice that it opened up in Split View.
| | 02:52 | I'm going to scroll down,
and at about line number 48,
| | 02:56 | we can see our limited CSS reset.
| | 02:59 | We're doing all of our headings, our
paragraphs and address tag, blockquote -
| | 03:05 | those are both common and block level elements -
| | 03:07 | div tag, the unordered list, and list item.
| | 03:10 | Notice that we didn't do unordered list,
maybe we're not using a lot of those.
| | 03:13 | The key here is that we're
only doing select elements.
| | 03:18 | It's a much shorter list.
| | 03:20 | We don't have to remember to
do it for every single element.
| | 03:23 | We just have to remember to do it for
all of our headings, our paragraphs, if
| | 03:27 | we're using addresses or blockquotes,
any div tag that we want - which by the way
| | 03:31 | that's kind of a just-to-be safe,
because most div tags don't have a default
| | 03:35 | margin in browsers - and then
unordered list and list items.
| | 03:39 | Since those now have zero padding and
zero margins, we're going to have to
| | 03:43 | explicitly set those in our styles.
| | 03:44 | I'm going to switch back over to Design view,
and we can see the result of that CSS Reset.
| | 03:49 | You can these headlines:
| | 03:51 | Backpack Cal, Big Sur Retreat,
Hiking Trail Information.
| | 03:55 | All those guys are right on top of each other.
| | 03:57 | Now, these paragraphs have some
spacing, but that is due to Line-height,
| | 04:01 | not vertical margins.
| | 04:03 | And you might also say, "Well, wait a second.
| | 04:05 | I see some vertical spacing
between this paragraph and this heading."
| | 04:08 | Well, that's true, but that's
being caused by this graphic.
| | 04:12 | It has a float applied to it, which
moves it to the right, and then this heading
| | 04:16 | has a clear property applied to it,
which says, "No I have to go below you."
| | 04:20 | So that's why we are seeing the spacing there.
| | 04:22 | You can see our lack of spacing
returns again, between this heading and this
| | 04:26 | paragraph, that paragraph and that
list, and all of those list items.
| | 04:30 | So those are elements that if we want
to control their spacing, we need to put
| | 04:34 | those vertical margin values in there
manually, and that is our next task.
| | 04:39 | Now, what we're going to do first
is target our main article heading
| | 04:42 | right there, Backpack Cal.
| | 04:44 | Now you can do this
in the CSS Styles panel,
| | 04:46 | you can hand-code it, whatever you'd like to do.
| | 04:48 | I'm going to scroll through here
until I find #mainContent #mainArticle h1.
| | 04:55 | Now, I'm going to collapse my Files panel
by double-clicking the tab there. It's going to
| | 04:59 | give me a little bit more room here and
here, and it's going to make it easier
| | 05:03 | for us to find these selectors.
| | 05:04 | So I highlight the #mainContent #
mainArticle h1, and I'm going to add a property to this.
| | 05:10 | I want to add a margin-bottom.
| | 05:14 | So we can target just the margin
on the bottom of our elements by
| | 05:18 | saying margin-bottom.
| | 05:20 | You could also grab the pulldown menu,
and you could see you have values for
| | 05:23 | overall margin, margin-bottom, margin-left,
margin-right and margin-top as well. All right.
| | 05:29 | So for the margin-bottom here,
| | 05:30 | we want to set a value of .4ems. We'll hit Return.
| | 05:36 | We can see that now we get some
additional vertical spacing between Backpack Cal
| | 05:41 | and Big Sur Retreat.
| | 05:42 | So we've adequately spaced that
out for what we're looking for.
| | 05:46 | Now remember, 1em would be 100% of the
size of that heading. .4 means not quite
| | 05:53 | as far down as the size of the heading. Okay.
| | 05:55 | Let's keep going.
| | 05:56 | I am going to go down to the next selector,
which is #mainContent #mainArticle h2.
| | 06:01 | That's going to target our headings 2s.
| | 06:02 | We're going to add a property here.
| | 06:05 | Here, we want to add the margin-top.
| | 06:08 | So margin-top of 1.2ems, and I
want to add the margin-bottom of 1em.
| | 06:17 | Okay, so what in the
world was I just doing there?
| | 06:20 | Well, the 1.2em basically says, "I
want more space above me than below me."
| | 06:27 | And that's going to give a nice visual
separation to let folks know that you are
| | 06:31 | starting a section or a new subheading.
| | 06:34 | So we increase the space that we see here.
| | 06:36 | Now, that's not cumulative.
| | 06:38 | We didn't do 1.2+.4ems.
| | 06:41 | In actuality, we're only
getting 1.2ems there because of that\
| | 06:45 | collapsing vertical margin.
| | 06:47 | Now remember, Hiking Trail
Information is still inside that heading 2.
| | 06:51 | That's all one heading 2.
| | 06:53 | We're using a Span tag to move
that down to the line below it.
| | 06:56 | So the 1em bottom margin is occurring
between this paragraph and between that heading.
| | 07:02 | Now speaking of this, this little span right
here, it can have its own margin if you'd like.
| | 07:07 | We need a little bit of space
between this text and the Span tag.
| | 07:11 | So I'm going to go right down to the
next selector, which is #mainContent
| | 07:15 | #mainArticle h2 span.tourCost.
| | 07:19 | I know that seems really long, but
it's just descriptive of where that is.
| | 07:22 | Now, here I'm going to add a property to
this, and I'm going to add a margin-top.
| | 07:30 | So I want to give it a little bit of
spacing between the Big Sur Retreat text
| | 07:34 | and the Hiking Trail Information.
| | 07:35 | So margin-top is going to let me to do that.
| | 07:38 | And I'm just going to do a margin-top of .25ems,
| | 07:41 | so a quarter of the available font size.
| | 07:44 | You can see that it gives us a
little bit of spacing but still keeps
| | 07:47 | them together as a unit. Let's keep going.
| | 07:50 | Let's go down to #mainContent #
mainArticle h3, and here I'm going to add
| | 07:55 | a property to that.
| | 07:56 | I'm going to add margin p - now,
here is something interesting.
| | 08:00 | I want to do some short-hand
notations so you guys can see that.
| | 08:03 | If you need more than just top or bottom,
right, left, that sort of thing, it's
| | 08:07 | a little bit tiring to always have to
go margin-top and then margin-bottom.
| | 08:10 | Well, you can do shorthand notation.
| | 08:12 | So instead of saying margin-top, margin
-bottom, margin-right, margin-left, you
| | 08:16 | can just say margin, and then you can
pass along any values that you want.
| | 08:19 | Let me show what I mean.
| | 08:20 | So I'm going to type in margin, hit
Tab to go over to the value section of that,
| | 08:25 | and then I'm going to type in 1.25em,
then a space, and the space is very
| | 08:30 | important, then a zero, then another
space and then do .5em and hit Return.
| | 08:35 | Now, what does that mean?
| | 08:37 | Let's talk about this for a moment.
| | 08:38 | In the margin value, you can pass one
value, two values, in our case three
| | 08:44 | values, or four values.
| | 08:45 | Let's talk about what those would do for you.
| | 08:47 | If you pass a single value, that's a
margin all the around the element.
| | 08:51 | So you're looking at top, right,
bottom and left being all the same value.
| | 08:56 | If you have two values, the first two
values represent the top and the bottom.
| | 09:00 | The second of the two values
represents the right and the left.
| | 09:03 | Well, what if you do three
values, like we've done here?
| | 09:06 | The first value 1.25em is the top margin.
| | 09:10 | The middle value here
represents the right and the left.
| | 09:14 | And finally, the .5ems is the bottom margin.
| | 09:17 | Well, what if you have four all the way around?
| | 09:19 | Well, just imagine a clock.
| | 09:21 | You do top-margin first, then
right, then bottom, and then left.
| | 09:26 | Some people remember that with the
mnemonic TRBL, top, right, bottom, left.
| | 09:31 | But I just remember the hands of a clock.
| | 09:33 | So it works for me.
| | 09:34 | So essentially, what we've done,
and I'm going to scroll down and find
| | 09:37 | where heading 3 is. There we go.
| | 09:38 | Notice that we have more space
above the heading 3 than below it.
| | 09:42 | And again, that gives us a nice
separation between the section above it and then
| | 09:45 | the section below it.
| | 09:46 | Now finally, for our main body
text, let's choose our paragraph,
| | 09:49 | so #mainArticle p. I'm going to
add a property to that as well.
| | 09:53 | Margin-bottom of 1em and that's going to
control the spacing below the paragraph.
| | 10:01 | Now you might have noticed that
while it affects the spacing between the
| | 10:04 | paragraph and the list,
| | 10:05 | it didn't affect the spacing
between the paragraph and the heading.
| | 10:08 | Again, the reason for that is margin-collapse.
| | 10:11 | This value of the heading top is
actually higher than the value of the
| | 10:16 | margin-bottom for the paragraph.
| | 10:18 | Because of that, the higher
value wins. They don't add up.
| | 10:21 | It's not cumulative, and we're left
with the same spacing we had before.
| | 10:25 | That's a really neat technique,
because you can assure that paragraphs have a
| | 10:28 | default spacing below them.
| | 10:30 | But then any subheading that comes
along, you could add a little bit extra
| | 10:33 | margin above it, and give yourself
that separation within your text.
| | 10:37 | Okay we're almost done.
| | 10:38 | The last thing we have to
do are these list items.
| | 10:40 | Those guys are all jammed together.
| | 10:42 | So we're going to give those a
little bit of extra spacing as well.
| | 10:45 | So I'm going to scroll down until
I find #mainContent #mainArticle li.
| | 10:51 | Once I find that, I'm going to go ahead
and add another property here, and the
| | 10:54 | property that I'm going to add here is margin.
| | 10:56 | Once again, we're just going
to do margins all the way round.
| | 10:58 | So remember that four values I talked about?
| | 11:00 | The top value is going to be zero, and
then do a space, right value is going to
| | 11:04 | be zero and then add a space.
| | 11:05 | So no top margin, no right margin.
| | 11:07 | But for bottom margin, we're going
to do 1.2ems and then another space.
| | 11:13 | And for left margin, what this is
going to do is its just going to indent our
| | 11:16 | entire list for us, so that's
it's a little bit more like a list.
| | 11:20 | We're going to 2.4ems.
| | 11:22 | And when I hit Return, there's our list.
| | 11:24 | We're getting 1.2ems
worth of space between them.
| | 11:27 | And then right here, we're getting
2.4ems of space, which is sort of pushing
| | 11:31 | that list over and indenting that. Sweet!
| | 11:33 | So now our typography looks a little better.
| | 11:36 | If I switch over to Live View, I can
see a more fully rendered version of that.
| | 11:41 | We have some spacing that's making
that a little bit easier to read.
| | 11:44 | Now, making sure the elements are
spaced property is fairly easy to achieve by
| | 11:48 | using vertical margins.
| | 11:49 | Just make sure you account for both
browser default margin values, which we
| | 11:53 | did earlier on by zeroing those guys out,
and margin collapse when planning your styles.
| | 11:58 | If you do that, you should be able
to achieve consistent element spacing
| | 12:01 | throughout your site.
| | Collapse this transcript |
| Controlling spacing with padding| 00:00 | Most of the time, if I need to control
spacing in my typography, I use margins.
| | 00:05 | However, there are times that padding is
required to achieve the desired result.
| | 00:09 | While margins control
the space between elements,
| | 00:12 | padding handles the spacing within the element.
| | 00:15 | Each element is contained within its own box.
| | 00:18 | Increasing the Padding increases
the distance from the contents of an
| | 00:21 | element to its edge.
| | 00:23 | Keep in mind that this can also increase
the total width and height of elements,
| | 00:26 | and that needs to be factored in
when determining the relationship of
| | 00:29 | surrounding elements.
| | 00:30 | In this movie, we'll use Padding to achieve
nicer spacing for our Tour Resource links.
| | 00:34 | Then control the amount of inset that is
frequently asked questions answers have.
| | 00:38 | We'll also modify the relationship
between a headline and its border.
| | 00:42 | So I have the faq.htm opened up.
| | 00:45 | Let's just to scroll down so we can see the
elements that we are going to be affecting.
| | 00:50 | So here we have a couple of links
that will jump us down the page to our
| | 00:54 | frequently asked questions.
| | 00:56 | They're inside these list items.
| | 00:59 | You can see they have a background
color and a border applied to them.
| | 01:01 | So to give that little bit more spacing,
open them up a little bit, make them
| | 01:05 | look a little bit better,
| | 01:06 | we're going to use padding to help us with that.
| | 01:08 | The answer portions of our frequently
asked questions really need to be sort of
| | 01:12 | offset a little bit.
| | 01:13 | So what we're going to do is we're
going to inset those, so that they have a
| | 01:17 | little bit of space over
here on the right-hand side.
| | 01:19 | That's going to give us a nice little
visual separation between the answers and
| | 01:23 | the questions themselves.
| | 01:25 | Then finally, Monthly Specials has a
border applied to the bottom of it,
| | 01:29 | but the border and the text are almost touching.
| | 01:32 | So we're going to use padding to open
that up a little bit more so we get a
| | 01:35 | higher degree of space between there.
| | 01:38 | So let's start with our links up top.
| | 01:40 | Now what I'm going to do is just
go ahead and use my Code Navigator.
| | 01:45 | So remember, I can Alt+Click that on
the PC, Option+Command+Click on the Mac,
| | 01:49 | and there are a lot of rules here.
| | 01:52 | The one that we're looking for is this one,
#mainContent #mainArticle ul.faqNav li.
| | 02:02 | So that's targeting any List Item
inside of an unordered list with a class
| | 02:06 | faqNav, inside of the
mainArticle, inside of the mainContent.
| | 02:11 | Okay, I'm going to go ahead and click on that.
| | 02:12 | Once again, if you want to be able to
see this while you're doing this, you can
| | 02:16 | just sort of move that divider so that
you're seeing less code, more design, but
| | 02:20 | I'm really using that to find it
over in my CSS Styles dialog box.
| | 02:24 | I'm going to go ahead and double-click
that Rule to open that up in my CSS Rule
| | 02:29 | Definition dialog box.
| | 02:31 | Now remember, you want to look right
up here to make sure you got the right
| | 02:34 | Rule, li ul.faqNav
mainArticle mainContent. Cool!
| | 02:39 | So now I'm going to go to my Box Category.
| | 02:41 | You can see we're controlling Padding
and Margins through our Box Properties.
| | 02:45 | I'm going to deselect Same for all.
| | 02:47 | I'm going to do a Top Padding of 0.5ems.
| | 02:49 | I'm going to do a Right Padding of
0.5ems, a Bottom Padding of 0.5ems, and
| | 02:59 | finally, a Left Padding of 1 em. There we go.
| | 03:02 | So Top, Right, Bottom all of 0.5
ems, and then a Left Padding of 1 em.
| | 03:08 | When I click OK, I can see I have an
increased amount of spacing all the
| | 03:12 | way around, and these links are now getting
a lot more attention, visually, on our page.
| | 03:16 | Let's scroll down to take a look
at our frequently asked questions
| | 03:19 | answer portion of it.
| | 03:20 | If I click inside of that, I can see
that this is part of a Definition List.
| | 03:24 | So I have a dl there.
| | 03:25 | We're going to be targeting that dd tag.
| | 03:28 | So once again, I'm just
going to go ahead and Alt+Click or
| | 03:31 | Option+Command+Click on that.
| | 03:32 | I'm going to bring up my Code Navigator.
| | 03:35 | I want to find the
#mainContent mainArticle dl.faq dd.
| | 03:41 | When I select that, I can go right over
to my CSS Styles panel, double-click the
| | 03:45 | one that's highlighted.
| | 03:46 | It's a very fast and easy way to find
your targeted Rule within all those styles.
| | 03:50 | I'm going to click on the Box category.
| | 03:52 | Again, I'm going to
deselect Same for all for Padding.
| | 03:55 | I'm going to do 0 Padding for the Top,
0 Padding for the Right, and 0 Padding
| | 04:00 | for the Bottom, because all we're
really wanting to do is move this over a
| | 04:03 | little bit to the left.
| | 04:04 | Now if I wanted to, I
could have left all that blank.
| | 04:06 | I could have just left Top, Right and
Bottom with no values and given it a Left value.
| | 04:11 | For Left value, we're going to give
it a Padding of 2em with no spacing.
| | 04:15 | Now you can also write that this way.
| | 04:16 | You can say 2, and then you can
grab the pulldown menu, choose ems.
| | 04:19 | I just find that to be a little faster.
| | 04:21 | When I click OK, click back into my
file in Design view, and we can see now we
| | 04:25 | have a little
indentation for each of those guys.
| | 04:27 | There is a nice separation between
the answer and the question itself.
| | 04:31 | Now let's take a look, finally, at our
headline right here, Monthly Specials.
| | 04:36 | If I Alt or Option+Command+Click that,
what I'm looking for here is this
| | 04:41 | callOut h1 selector.
| | 04:42 | So I'm going to go ahead and select that.
| | 04:44 | Again, I can just com right over to the
CSS Styles panel and double-click that.
| | 04:48 | It's going to open up my CSS
Rule Definition dialog box.
| | 04:51 | I can go right down to the Box
category and set some padding.
| | 04:54 | Now here, I just need padding on the bottom.
| | 04:56 | So I'm going to deselect Same for all.
| | 04:58 | On the Bottom, I'm going to do a
padding of 0.25 em, so 0.25 em.
| | 05:04 | I'm not even going to set these other ones.
| | 05:05 | I'm just going to click OK.
| | 05:07 | If I click back in here, you can
see, now we've added a little bit of
| | 05:10 | spacing between that headline and
little bit of spacing between this
| | 05:13 | headline and its border as well.
| | 05:15 | By using padding, we can control the
space between an element's content and
| | 05:19 | the edge of an element.
| | 05:20 | This is particularly useful when
dealing with elements that have background
| | 05:23 | colors, just like our links right up
here, or background graphics, or when we
| | 05:28 | need to control elements that have borders.
| | 05:30 | I will discuss Margins and Padding
in more detail later in the chapter on
| | 05:34 | layouts since they're also used
heavily in controlling CSS-based layouts.
| | Collapse this transcript |
| Aligning text| 00:00 | Although aligning text with CSS gives
you more choices than HTML, it is still a
| | 00:05 | fairly basic procedure.
| | 00:07 | To align text, you'd use the text-align
property and have the option of choosing
| | 00:11 | left, center, right, or justified as your value.
| | 00:15 | Alignment is inherited,
| | 00:17 | so if you align the parent element,
all elements inside of it should have
| | 00:21 | the same alignment.
| | 00:22 | If you don't specify a text-align
property, most user agents use
| | 00:26 | left-align as the default,
| | 00:28 | so not specifying it is often
the same as choosing left-align.
| | 00:31 | We'll also take a moment to
explore vertical alignment.
| | 00:35 | Although vertically aligning text is
somewhat best handled using padding or line height,
| | 00:39 | there is a vertical-align
property that does more to confuse people
| | 00:43 | than anything else.
| | 00:44 | So as we align our text, we'll also
explore that property, hopefully, to
| | 00:48 | clarify what that value can do for you.
| | 00:51 | So here we have our frequently asked
question file, faq.htm, and that is opened
| | 00:56 | from the 07_08/resources folder.
| | 01:00 | The first thing what we're going to do
is we're going to add a little bit of
| | 01:03 | alignment to our sidebars.
| | 01:04 | Now currently, our Day Spa Package
and the price, 2 Day Salton Sea and the
| | 01:09 | price, Big Sur retreat and
the prize are all left-aligned.
| | 01:13 | We want those right-align so that
they're lining up with the name of the tour.
| | 01:17 | Now we notice that those are all paragraphs.
| | 01:19 | They're all in the div
tag with an ID of specials.
| | 01:22 | So we're going to use to out
advantage in targeting this.
| | 01:25 | Now just to prepare this a little bit,
I'm going to over to my Files panel,
| | 01:29 | double-click the tab.
| | 01:30 | That's going to collapse it.
| | 01:32 | It's going to give us a little bit
more space over here so that as we're
| | 01:34 | targeting those Rules,
| | 01:35 | we can see them and modify
them a little bit easier.
| | 01:38 | So I'm going to go right
over to my Day Spy Package.
| | 01:40 | I'm going to click in there and hold
my Option+Command on the Mac, Alt key
| | 01:44 | on the PC, click that.
| | 01:45 | I'm going to target that very bottom Rule,
#sidebar #specials.p. I'm going to click on that.
| | 01:52 | That's going to jump me down
in my CSS Styles to that Rule.
| | 01:55 | So it's an easy way of finding that.
| | 01:58 | I can see the existing Properties.
| | 01:59 | Now we're just going to add some
properties here and modify the existing Rules.
| | 02:03 | So instead of double-clicking to open
up the CSS dialog box, we'll just make a
| | 02:07 | very quick little edit right here.
| | 02:08 | So I'm going to Add a Property.
| | 02:10 | I'm going to add the text-align property.
| | 02:14 | That is the property that we use
when we're setting text alignment.
| | 02:18 | Now if you hit Tab, it'll move you over.
| | 02:21 | You can type in the value if you want,
but you get a nice little pulldown menu
| | 02:24 | here and take a look at our values here:
| | 02:26 | We have left, right,
center, justify and inherit.
| | 02:30 | Now the only one that might be a little
confusing to you there is probably inherit.
| | 02:34 | What you're doing there is you
basically saying, "Hey, go up to your parent
| | 02:37 | "element, whatever that may be,
whether it's a div tag or the body tag or
| | 02:40 | "whatever, find out what its text
alignment is and go ahead and inherit that.
| | 02:44 | Now text alignment does inherit,
| | 02:46 | so typically you don't have
to specifically tell it that.
| | 02:49 | Now for what we're doing here,
we want to choose right-align.
| | 02:52 | So when we click back into our Design
view, we can see that we get our nice
| | 02:55 | right-alignment for all of our paragraphs.
| | 02:57 | So that worked out perfectly. All right.
| | 02:59 | Well, what about these headings?
| | 03:00 | They look okay left-aligned, but
I'd kind of like to see what they look
| | 03:04 | like center-aligned.
| | 03:05 | So I'm going to do the same thing here.
| | 03:07 | I'm going to use my Code Navigator.
| | 03:08 | So that's Alt+Click or Option+Command+
Click. Go find the last rule here, callOut h1,
| | 03:13 | that's the one we're targeting. And
then right over here in our CSS Styles,
| | 03:18 | highlight that. Go right
down here in our Properties.
| | 03:21 | I'm going to add the text-align and hit
Tab, and then choose center from that.
| | 03:29 | Now when we click back in Design view,
we see all of our headings in our sidebar
| | 03:34 | there, are centered.
| | 03:35 | It doesn't look that bad.
| | 03:36 | I think we'll keep it.
| | 03:37 | Now one last thing here, until we get
to vertical alignment, are these answers.
| | 03:42 | They have a ragged left edge, which
isn't too bad, but I'm kind of wondering
| | 03:45 | what they would look like justified.
| | 03:47 | So again, I'm going to use my Code
Navigator to target the mainContent
| | 03:52 | mainArticle dl.faq dd rile, select that.
| | 03:57 | Then I'm going to go ahead and add the
text-align property to that just like
| | 04:01 | we have been doing.
| | 04:02 | But this time, the text-align
property that we want to add is justify.
| | 04:07 | So we want to do text-align justify.
| | 04:09 | This time when I click back in
Design view, we could see that all of our
| | 04:12 | frequently asked question
answers are justified alignment.
| | 04:17 | That looks pretty cool.
| | 04:18 | So we're going to leave
it like that. All right!
| | 04:20 | Now let's talk about
vertical alignment for a moment.
| | 04:22 | I'm going to do a Save All.
| | 04:23 | I'm going to scroll down.
| | 04:25 | One of my questions is Can I use your backpack?
| | 04:29 | Notice the answer is No, bring your own.
| | 04:31 | We will provide all the H2O you can drink.
| | 04:34 | Well, in this case, I would like the 2
to be subscript rather than being aligned
| | 04:37 | with the rest of it,
| | 04:38 | just like the formula H2O.
| | 04:40 | Now we do have a
subscript and a superscript tag.
| | 04:44 | That's sup and sub.
| | 04:46 | The problem with that is we can't
really control how far down or how far up the
| | 04:51 | characters go. It's totally up to the user agent.
| | 04:54 | So lot of people would rather use
a property known as vertical-align.
| | 04:58 | So as we write a custom class selector
for this, we're going to take a look
| | 05:01 | at the vertical-align property and
talk about some of its limitations.
| | 05:05 | So highlight the letter 2, and with
that highlighted, come down to your
| | 05:10 | Properties Inspector.
| | 05:12 | Make sure you're on the CSS tab.
| | 05:14 | Make sure your Targeted Rule is a New CSS Rule.
| | 05:17 | Click Edit Rule to create a brand-new
class based on what you have selected.
| | 05:22 | So here my Selector Type needs to be Class.
| | 05:24 | We're just going to go ahead and
call this .subscript. There we go.
| | 05:32 | I'm going to click OK.
| | 05:34 | In our CSS Rule Definition dialog box,
you'll find the Text-align properties
| | 05:38 | in the Block category.
| | 05:40 | So here's all the text-
aligns that we've been doing:
| | 05:42 | left, right, center and justify.
| | 05:44 | We're wanting to take a
look at the Vertical-align.
| | 05:46 | Now when you grab that pulldown menu,
it looks like, man, you've got just a
| | 05:49 | tremendous amount of options here:
| | 05:51 | Align to the baseline, subscript,
superscript, top, text-top, middle,
| | 05:55 | bottom, text-bottom.
| | 05:56 | That's a lot of choices.
| | 05:58 | Well, in reality, this property is
designed more for table cells than anything else.
| | 06:03 | So text-top, top, middle, bottom,
those are applying to table cells.
| | 06:07 | So if you ever apply that to a line
of text inside of a div tag and you're like
| | 06:10 | "Why isn't it centered within the
div tag vertically." That's why.
| | 06:14 | That's not the best way to do that.
| | 06:16 | However, notice that we do have
a sub, and we do have a super.
| | 06:18 | Well, let's do the sub,
and see what it does for us.
| | 06:21 | So I'm going to choose sub.
| | 06:21 | I'm going to click Apply.
| | 06:23 | Let's see if we can see any
changes here, and let's hit OK.
| | 06:27 | Now we've got a span that says subscript.
| | 06:29 | Well, no change there.
| | 06:30 | But if I turn Live View on and render
that using the WebKit rendering engine,
| | 06:35 | you can see that the 2 is
positioned down below the line. Cool.
| | 06:39 | That's a little far, don't you think?
| | 06:41 | So that sub value didn't really allow
me to control up adding numeric value.
| | 06:45 | It just went ahead and subscripted it
down. Maybe that's not what I was looking for.
| | 06:48 | So I'm going to go back to my CSS Styles panel.
| | 06:51 | I'll just find my subscript
selector, which is right there.
| | 06:54 | Now, it's wherever you last were
selected in your CSS Styles panel.
| | 06:59 | Remember, you can always find that
by clicking on your Code Navigator and
| | 07:04 | finding it that way.
| | 07:05 | So you may need to select that, bring
up the Code Navigator and find it, but
| | 07:08 | you should be able to find it right
over here in your CSS Styles panel.
| | 07:11 | Again, I'm going to double-
click that, go to my Block category.
| | 07:14 | Now, instead of Vertical-align saying
sub, I'm going to take that to -.2em.
| | 07:21 | So you can actually use
any explicit value you want.
| | 07:24 | Positive values will
move you above the baseline.
| | 07:27 | Negative values are going to
move you below the baseline.
| | 07:30 | So now when I click OK, I get this
little warning about how, hey that's not
| | 07:35 | valid, but it really is.
| | 07:37 | It just wasn't valid for older
versions of CSS, the CSS 1 specification.
| | 07:41 | So if I do a Save All, and make sure
Live View is still turned on, you can see
| | 07:46 | that's a little bit more manageable.
| | 07:47 | It's not shoving it all the way down to
where it looks like it's on a separate line.
| | 07:51 | You can play around with that value
and get that exactly where that you want.
| | 07:54 | Now aligning text is fairly easy, but
remember to account for inheritance
| | 07:59 | when aligning text.
| | 08:00 | It can lead to more efficient style application.
| | 08:02 | If you tell a parent tag to left-align,
there is no reason to tell anything
| | 08:05 | inside of it to left-align as well.
| | 08:07 | Keep in mind, also, that the Vertical-align
property only applies to inline elements.
| | 08:12 | So in this case, that one letter, or a
span tag, or something of that nature is
| | 08:16 | not going to apply to a Block level element.
| | 08:18 | To vertically align Block level elements,
you'll have to use margins, padding,
| | 08:22 | line-height, or a
combination of those techniques.
| | Collapse this transcript |
| Transforming text| 00:00 | The level of control that CSS allows
you to have over your text is pretty
| | 00:04 | remarkable and in this movie, we're
going to talk about transforming text,
| | 00:08 | that is forcing the text to conform
to capitalization rules for your site,
| | 00:13 | regardless of how the original text was typed.
| | 00:16 | This is particularly valuable in
situations where you can't control the text input,
| | 00:20 | say when the text is coming
from a database, or when text is being
| | 00:24 | updated by a third party.
| | 00:25 | If you need the name of the product to
always be capitalized, for example, the
| | 00:29 | text-transform property
allows you to specify that.
| | 00:33 | In addition to examining the text-
transform property, we'll also take a look
| | 00:37 | at the font-variant property,
which allows you to choose stylized
| | 00:40 | capitalization like small caps.
| | 00:43 | So here I've opened our faq.htm file again.
| | 00:46 | This is found in the 07_09 resources folder.
| | 00:50 | Now I'm just going to scroll down a
little bit and talk about what it is that
| | 00:53 | we're going to be doing.
| | 00:55 | Down here, all of our tour
names really should be capitalized.
| | 00:58 | Currently, they're not.
| | 01:00 | There is a wide variety of
capitalization going on there.
| | 01:03 | So we need to fix that.
| | 01:04 | If I scroll down, I can see
that at the bottom of each section,
| | 01:08 | there is a link that returns
people to the top of the page.
| | 01:10 | Sometimes it's capitalized, sometimes it's not.
| | 01:13 | It doesn't seem to be very consistent.
| | 01:15 | Frankly, I would like for
them to be all lowercase.
| | 01:18 | So I'm going to new use text-
transform to do that for me.
| | 01:21 | Then finally, at the very bottom of
the page in our footer, we have our
| | 01:24 | company name right there.
| | 01:26 | Frankly, I would like a more
stylized treatment of that.
| | 01:29 | So I might want to see what
that looks like in small caps,
| | 01:33 | so I could see if I wanted to treat
it that way throughout my entire site.
| | 01:36 | So let's scroll back up and
tackle those one at a time.
| | 01:39 | Let's go ahead and tackle these guys first.
| | 01:42 | So again, I'm going to go to
target a rule by using my Code Navigator.
| | 01:46 | I'm going to hold down the Alt key.
| | 01:47 | That's Command+Option on
the Mac. Click on that Rule.
| | 01:50 | The one that we're looking for
is not all the way at the bottom.
| | 01:53 | This time, it's #mainContent
#mainArticle ul.faqNav li.
| | 02:00 | So I'm going to go ahead and select that.
| | 02:03 | Again, remember, I can use the CSS Styles
panel, or I can hand-code it if I wanted to.
| | 02:07 | I will double-click the Files panel
to give myself a little bit more room.
| | 02:10 | Then I'm going to make sure that is indeed
the selector that I have selected. There we go.
| | 02:15 | So I'm going to go down
and add a property to that.
| | 02:17 | I'm going to add the text-
transform property, so text-transform.
| | 02:22 | If you're worried about spelling and
then the dash and all that, remember, you
| | 02:27 | can grab that through the
pulldown menu, text-transform.
| | 02:29 | Now let's take a look at the
options that text-transform gives us.
| | 02:33 | We have capitalize, which is going to
make sure that each word is capitalized.
| | 02:37 | We have uppercase, which is
going to make it all caps.
| | 02:40 | We have lowercase, which is going
to make sure it's all lowercase.
| | 02:42 | We also have none, which
basically means leave it alone.
| | 02:46 | We have inherit the basically says, "Hey,
what's the parent object doing? Let's do that."
| | 02:50 | Well, we're going to choose capitalize.
| | 02:51 | So when we can click back in the
Design view, we can see that each of our tour
| | 02:55 | packages is now capitalized,
regardless of whether it was before or not.
| | 03:00 | So that's really allowing
me to cover my bases on that.
| | 03:03 | Now I'm going to scroll down a little bit,
find one of these links Return to top.
| | 03:08 | Now if I target that with my Code
Navigator, what I'm looking for is this
| | 03:13 | selector right here,
#mainContent #mainArticle p a.top.
| | 03:18 | So that is any a tag which is an anchor,
which is the link tag with the class
| | 03:23 | top applied to it, found inside of a
paragraph, found inside of mainArticle,
| | 03:27 | found inside of mainContent.
| | 03:28 | I know those can get little long.
| | 03:30 | So I'm just going to click on that
and with that targeted and highlighted,
| | 03:33 | this time let's double-click that, so
you can see where text-transform is in the
| | 03:37 | CSS Rule definition dialog box.
| | 03:39 | Well, here it is right here, Text-transform.
| | 03:42 | I'm going to grab that pulldown menu.
| | 03:45 | This time, I'm going to
say lowercase. Click OK.
| | 03:48 | Now when I click in Design view, I can
see that each of those is now all lowercase.
| | 03:53 | Perfect. Exactly what I wanted.
| | 03:56 | Now let's scroll all the way down, and
take a closer look at Explore California.
| | 04:01 | Once again, I'm going to go ahead and
bring up my Code Navigator for that.
| | 04:05 | The very bottom rule, #footer #
footerBody #footerRightColumn heading 1,
| | 04:09 | that's the one we want.
| | 04:10 | I'm just going to double-click that as
well, because I want to show where this
| | 04:14 | is in the CSS Rule definition dialog box
if you are ever creating a Rule and you
| | 04:18 | want to use Font-variant.
| | 04:20 | Right above Text-transform is Font-variant.
| | 04:21 | If I grab that pulldown menu,
notice I have two options here:
| | 04:26 | normal and small-caps.
| | 04:27 | Normal is the default,
| | 04:28 | so unless you're trying to overwrite
something that's been done earlier, you're
| | 04:32 | probably only going to use this
if you ever just want small-caps.
| | 04:34 | So I'm going to just choose small-
caps, click OK, and click back into my
| | 04:40 | Design environment.
| | 04:41 | Now, Dreamweaver doesn't do the best
job of previewing what small-caps are
| | 04:45 | going to look like.
| | 04:46 | So what I want to do is do a Save All,
| | 04:48 | click back on Design view and
| | 04:49 | I'm going to click Live View to render
this page with the WebKit rendering engine.
| | 04:54 | If I scroll down to my footer now, I can
see that actually looks a little bit better.
| | 04:59 | You might also want to preview that in
another browser, say Firefox, for example.
| | 05:03 | Now when I scroll down, all the way down to
the footer, I can see my small-caps there.
| | 05:08 | I kind of like the way that looks,
| | 05:10 | so I think I'm going to
leave it like that. All right.
| | 05:12 | Excellent.
| | 05:13 | Now all the tour names, return links,
and the footer text is displaying
| | 05:16 | following our sites specifications,
regardless of how the text was entered.
| | 05:21 | Whether you use the text-transform
and font-variant properties to ensure
| | 05:24 | proper text display or to create
stylized displays that vary from the actual
| | 05:29 | content, you'll find these
properties an indispensable technique in
| | 05:33 | controlling your site's CSS.
| | Collapse this transcript |
| Writing global styles| 00:00 | Our final movie in this chapter will
focus on putting a little bit of everything
| | 00:04 | we've covered so far together, while
focusing on the concept of using the
| | 00:08 | cascade to control styling.
| | 00:10 | When creating the CSS for your sites,
your focus should be on writing the
| | 00:14 | cleanest and most efficient styles possible.
| | 00:17 | By utilizing the cascade, you can write
generic styles that handle the bulk of
| | 00:22 | your styling work, leaving you to write
just a few very specific selectors when
| | 00:26 | styling in one area varies from
the global standards that you've set.
| | 00:31 | This method requires that you spend a
good bit of time planning a site-wide
| | 00:35 | strategy for typography for your site.
| | 00:38 | To be honest, that's a really good idea.
| | 00:40 | It helps your site be more consistent,
requires less code to achieve the desired
| | 00:44 | results, and saves development time
since you won't be constantly overwriting
| | 00:48 | and rewriting your styles.
| | 00:49 | Now, we've got opened an unstyled page here.
| | 00:52 | Yes, it has some layout.
| | 00:53 | Yes, it's got some graphics in it, but
the typography of this page is totally
| | 00:58 | unstyled at the moment.
| | 00:59 | So the first thing that we're going to
do, and that's what we'll be do in this
| | 01:01 | movie, is to create our global styles.
| | 01:04 | And then in the next movie, we'll
follow that with just a few area-specific
| | 01:08 | styles that are required to
finish up our desired formatting.
| | 01:12 | So what we have opened is the
resources.htm, and this is found in the 07_10 folder.
| | 01:19 | Now, the first thing we're going to do is I'm
going to switch this to a Split screen view.
| | 01:23 | I want my code on the left, and I want
my design on the right. Just to give us a
| | 01:27 | little bit more screen real estate,
| | 01:28 | I'm going to take our panels, and I'm
going to collapse those panels down.
| | 01:32 | So I can do that in the other
upper right-hand corner of the dock.
| | 01:33 | I can collapse those icons and then I
can grab the separator and just sort of
| | 01:38 | push them a little further over
so I only have icons over there.
| | 01:41 | Now, why am I doing all that?
| | 01:43 | Because we are going to do a little bit of
hand-coding in this movie. Now don't panic.
| | 01:48 | It's not that hard.
| | 01:49 | You've had a lot of experience so far
in this chapter by using the CSS Styles
| | 01:53 | panel. You've had a lot of experience
go-ahead and opening up the CSS Rules
| | 01:56 | Definition dialog box, and entering in
values there, so now it's time to do a
| | 02:01 | little bit of hand coding.
| | 02:02 | I promise we'll go slow.
| | 02:04 | We'll get through it.
| | 02:05 | It's going to be okay, and I guarantee
you you're going to think to yourself
| | 02:09 | after you are done with this, "Hey,
that's not so bad." All right.
| | 02:12 | So what I need to do is, up here
underneath the name of the file resources, I
| | 02:15 | need to click on my
main.css, so I have that open.
| | 02:19 | So we're looking at our
CSS on the left-hand side.
| | 02:22 | We're looking at our design on the
right-hand side, and we'll be able to kind
| | 02:25 | of focus back and forth between the two in
order to do what it is that we need to do.
| | 02:30 | So the first thing we need to do -
| | 02:31 | I'm going to scroll down - is around
line 55 I'm going to place my cursor right
| | 02:35 | there, and I'm going to
do our limited-scale reset.
| | 02:38 | Now remember, earlier we take a look at
this, and that's basically zeroing out
| | 02:42 | all the margins in the paddings, so
that instead of the default margins of
| | 02:46 | paddings that the browser
might give our elements,
| | 02:48 | we are in-charge of writing those.
| | 02:49 | So it sort of resets everything
so that we're in control of it.
| | 02:53 | So the first line I'm going to type in h1,h2.
| | 02:56 | Now I want to talk about that
comma for just a moment. Spaces between
| | 03:00 | selectors mean that you're looking for
one selector inside of another one, but
| | 03:04 | the commas are way of grouping
selectors together, so that comma is a way of
| | 03:08 | saying, both the h1 and the h2. All right.
| | 03:10 | So we're going to do another comma.
| | 03:12 | We're going to do h3,h4,h5 so
it's a pattern, ,h6. There we go
| | 03:18 | ,p,address,blockquote,div,ul,li and if it
breaks on you don't worry. It's okay. All right.
| | 03:30 | So we're good there.
| | 03:31 | Now, I'm going to open up a curly brace.
| | 03:33 | Now, where do I found those?
| | 03:33 | Well, on your keyboard, just at
the right of the P key, you have your
| | 03:37 | opening and your closing curly braces, and
you have to hold down the Shift key to get them.
| | 03:41 | So I want to open in curly brace.
| | 03:42 | Now as soon as you do that,
Dreamweaver is trying to help you out.
| | 03:45 | It's giving you a full list of
properties that you can set for this particular
| | 03:49 | selector that we've just created.
| | 03:50 | I'm going to hit Return, so that we go
down in the next line, just in keeping
| | 03:54 | with the formatting options
that they've already been doing.
| | 03:56 | Here I'm going to type an m. It
will jump down to margin, and that's
| | 03:59 | exactly what I want.
| | 04:00 | So this is a process called code-
hinting, and it helps you rapidly write code.
| | 04:05 | By just hitting m, I jumped down this
list to margin, and now when I hit Return,
| | 04:09 | Dreamweaver finishes it for me.
| | 04:11 | It not only finishes typing it, but
notice that it typed in a colon for me as
| | 04:15 | well, so it's helping me with the
syntax too, which is really cool.
| | 04:18 | Now, I'm going to type in
0 and then a semicolon.
| | 04:21 | Semicolons are used to say
"Okay, this property is over.
| | 04:24 | Let's move on to the next one."
| | 04:25 | Go down to the next line, and here you
want to type in padding, or actually you
| | 04:30 | can just type in p. It's
going to jump down the padding.
| | 04:32 | You can hit Return, and once again,
I can type in 0 and the semicolon.
| | 04:37 | Here is the tricky part of handwriting CSS.
| | 04:39 | Usually where people get themselves in
trouble they just sort of forget to do something.
| | 04:43 | In this case, we've opened up our
curly brace, but we haven't closed it yet.
| | 04:47 | So right after padding, I'm going to hit
Return, and then I'm going to close my curly brace.
| | 04:52 | There we go.
| | 04:52 | So every single CSS selector and rule
needs to have that opening and closing
| | 04:58 | curly brace. Don't forget those.
| | 04:59 | Okay, so if I save my file, I can just
do a Save All, and if I click over in
| | 05:04 | Design view, everything sort of
shifts and get closer together.
| | 05:06 | So that's us removing all
that default spacing, so there we go.
| | 05:10 | Now remember, we're
writing our global styles here.
| | 05:13 | We're not targeting any one specific area.
| | 05:15 | We're writing the styles that are going
to pertain to the entire site globally.
| | 05:20 | So we're going to be writing a lot of
element selectors, a lot of really basic
| | 05:24 | selectors that are going to be
driving the look and feel of our site.
| | 05:27 | So I'm going to go down on just a
little bit further in my code and just below
| | 05:31 | my scale reset that we just did on our
blank line there, I'm going to type in p.
| | 05:36 | That is an element selector
that targets the paragraph tags.
| | 05:39 | So the first thing we're going to do
is we're going to tell our browsers what
| | 05:42 | we want our paragraphs to look like.
| | 05:44 | Again, I'm going to open my curly
brace and hit Return, and now I'm going to
| | 05:47 | start styling my paragraph.
| | 05:48 | The first thing I want to do is
change the color of my paragraphs.
| | 05:51 | The default color is black.
| | 05:52 | I want something a little bit different.
| | 05:54 | So I'm going to type in co,
and it jumps right down to color.
| | 05:57 | So sometimes you have to type almost
the whole word, sometimes a single letter
| | 06:01 | will do it, but I'm going to get
right down the color and hit Return.
| | 06:03 | And now I'm going to type in that #333.
| | 06:07 | Notice that even here in Code
View the color picker comes up.
| | 06:10 | And if we wanted to, we could have gone
right there to find #333, and select it
| | 06:17 | from the Swatch panel that comes up.
| | 06:19 | So now I'm going to type in a
semicolon, hit Return to go down to the next
| | 06:22 | line, and here I'm going to do line-height.
| | 06:23 | I'm letting code hinting finish a lot
of this stuff for me, so line-height: 1.8.
| | 06:30 | Now, you'll notice that I'm going to
type in a semicolon and not pick any unit
| | 06:34 | of measurement, no percentages here, no ems.
| | 06:37 | Now, the reason for that is because for
line-heights we're using a multiple and
| | 06:41 | multiples don't require any
type of unit a measurement after it.
| | 06:44 | Remember, the only property that
we can do that with is line-height.
| | 06:46 | I'm going to go down to the next line,
and here I'm going to type in margin-bottom.
| | 06:53 | So margin-b, and you should be able
to just hit Return and let Dreamweaver
| | 06:57 | finish that for you.
| | 06:58 | Margin-bottom:1 em;
| | 07:02 | Once again, don't forget to close your
curly brace and when you see the rule
| | 07:06 | below you turn magenta again,
| | 07:07 | you know you have done the right thing.
| | 07:08 | Now if I click over in Design view, you
can see that our paragraphs are formatting.
| | 07:13 | They get their line spacing.
| | 07:14 | They get the color we
want - looking pretty good.
| | 07:17 | Okay, we have a few links to write.
| | 07:19 | And this time you're going to be
exposed to something that you haven't seen
| | 07:22 | before, and that is what
we call a pseudo-selector.
| | 07:25 | Now CSS can respond to user interactions,
so when somebody hovers over a link,
| | 07:29 | when they click on that link, if it's
an active link, you can actually style
| | 07:34 | different settings based on that.
| | 07:35 | That's how a lot of people will create
rollover effects based on their links,
| | 07:39 | and that's how we're going to do that.
| | 07:40 | So right underneath your paragraph rule,
I want you to type in a:, so no space
| | 07:45 | here just a and a colon and
then word link. Then a comma, a:visited.
| | 07:52 | Now, what are we doing there?
| | 07:53 | Well, we're making sure that our active links
and our visited links look exactly the same.
| | 07:59 | Normally, with the link if you click on
it, and you go back to that page again,
| | 08:03 | instead of an underlined blue text, you
see sort of that purple text indicating
| | 08:06 | that you've been there before.
| | 08:08 | Well, for our site we don't want to show
anything visually different for visited
| | 08:12 | links, so we're just going
to group those two together.
| | 08:15 | Once again, I'm going to open our curly
brace, hit Return to go down in the next
| | 08:18 | line, and now we need to
go ahead and style these.
| | 08:20 | We're going to change their color, so
I'm going to type in color, and here I'm
| | 08:23 | going to type in pound, so I'm going to get my little
hash mark here, 952, which is an orange color.
| | 08:30 | I'm going to hit Return to go down in
the next line, and here I'm going to
| | 08:33 | type in text-decoration: none.
| | 08:38 | As soon as you're done with that, you
can hit Return and close your curly brace.
| | 08:42 | So this is the only two
properties we're setting there.
| | 08:43 | So what is text-decoration: none?
| | 08:45 | Well, watch my links over here,
right here, once I click on Design view.
| | 08:50 | You notice what goes away? So that
underline that you have under your links is
| | 08:53 | going to go away if you
tell it text-decoration: none.
| | 08:56 | Now, most people just assume that I do that
because I hate the underline. I don't really.
| | 09:00 | I mean underline text lets you users
know, "Hey, click on me. I'm a link."
| | 09:04 | But there are other things that
you can do to let people know.
| | 09:07 | In this case, the color is
significantly different from the surrounding text.
| | 09:11 | So it does kind of leave the user to say "Hey.
| | 09:13 | I can probably click on that."
| | 09:15 | We can reinforce that concept by
changing the styling if somebody hovers over
| | 09:20 | that link, and let's do that now.
| | 09:21 | Now, I'm going to click back in the Code
View right after the last selector I just wrote.
| | 09:26 | I'm going to hit Return, and here
I'm going to do a:hover, a:active.
| | 09:31 | So just like our link in visited, hover
and active are going to look the same as well.
| | 09:35 | What's an active link?
| | 09:37 | Well, that's one that you're
currently clicking on or that you focused on.
| | 09:40 | So I'm going to open up my curly brace, hit
Return, and here we're not going to do a whole lot.
| | 09:44 | I'm going to change the color, so I'm going
to do color and here I'm going to do
| | 09:47 | #cb7d20.
| | 09:54 | It's a lighter orange.
| | 09:55 | So cb7d20 and the semicolon,
go down in the next line.
| | 10:01 | And I'm going to add an
underline, but I'm not going to do it
| | 10:03 | through text-decoration.
| | 10:04 | I'm going to do it through my border
property, which gives me a little bit
| | 10:07 | more control over this.
| | 10:08 | So I'm going to type in border-bottom,
border-bottom and here we can do some short annotation.
| | 10:14 | We can tell it 1 pixel and then a space, dashed, for a
dashed line instead of a solid line, and
| | 10:20 | then another space, and then
we need to give it the color.
| | 10:23 | So here we're going to do #cb7d20, a
little semicolon there, close your curly brace.
| | 10:32 | And now we can't see that right now
unless we turn on Live View, so I'm going to
| | 10:35 | turn on Live View, and
now when I hover one links,
| | 10:38 | I can see that underline
text and little dashed line.
| | 10:42 | We get enough of a color change to make a
slight difference, but it's nice and subtle.
| | 10:46 | Okay. I'm going to turn Live View off again,
and let's finish up by doing our headings.
| | 10:51 | So I'm going to scroll down in our
code a little bit, just underneath all of
| | 10:55 | our accents and things like that to
about line 79, and then I'm going to create
| | 10:59 | an empty line here that I
can create my first heading.
| | 11:02 | So here I'm going to do h1, so a big
global element selector, open up your
| | 11:06 | curly brace, and after that I'm going to
choose font-size, so font-size of 2 ems.
| | 11:13 | Hit Return, and I'm going to do color: #193742.
| | 11:20 | So again, 193742. Type in a
semicolon, and then one last little thing.
| | 11:27 | We're going to increase the spacing.
| | 11:29 | We're going to do margin-bottom of .4 ems.
| | 11:32 | Again, I'm going to close my curly
brace on the next line, and I can see the
| | 11:38 | styling changed here.
| | 11:39 | We get a little bit more spacing
between that margin and the paragraph, color
| | 11:42 | changes. The font-size
changes a little bit. There we go.
| | 11:45 | Let's continue on with our headings.
Now we're going to do an h2 heading,
| | 11:50 | open our upper curly brace, and here
we're going to do font-size, so font-size
| | 11:53 | 1.6 em. Notice there's no space between the
unit of measurement and the type of measurement.
| | 12:01 | So you want to keep that
consistent. Do a semicolon there.
| | 12:04 | For color, we're going
to do #51341a, so #51341a.
| | 12:14 | Now you might be wondering, "How
does he remember all these colors?"
| | 12:17 | I don't have to memorize.
| | 12:17 | I have it written down them, and I
am reading them off the sheet, but I'm
| | 12:20 | going to show you guys a way to
maybe make those a little bit easier to
| | 12:24 | remember here in just a moment.
| | 12:24 | Let's go down to the next line and here
I'm going to type in font-weight: normal.
| | 12:31 | So remember that's going to remove the
bold off of that heading, and it's going
| | 12:34 | to make it a little bit more normal.
| | 12:35 | And then I'm going to do a margin property.
| | 12:38 | And I'm going to do a top-margin of
1.2 ems, and then a space, 0 for right
| | 12:44 | and left, and then another space, and then
from our bottom-margin I'm going to do 1 em.
| | 12:48 | So we're doing some shorthand
notation there just to make that a little
| | 12:50 | bit easier to write.
| | 12:52 | And if I click in Design view and
maybe scroll down a little bit, I should be
| | 12:55 | able to see a heading 2, and I can see
it format, so that's looking pretty good.
| | 13:00 | Two more selectors to write, guys.
I hope your hands aren't cramping on you.
| | 13:03 | We're moving along right along.
| | 13:03 | We're going to do h3, open up a curly brace,
and below that, we're going to do font-size:
| | 13:10 | 1.3 ems;.
| | 13:13 | For color, we're, again, going to do #51341a.
| | 13:21 | Again, we're going to do font-weight:
| | 13:23 | normal, so font-weight: normal.
| | 13:28 | And then after that we're going to a
margin of 1.25 ems for the top-margin,
| | 13:33 | 0 for right and left, and this time .5 ems
for bottom, so that's a little different.
| | 13:40 | And then I'm going to click,
and we can see our styling.
| | 13:42 | So you might have notice that,
hey, h2 and h3 was very similar.
| | 13:45 | They are using the same color, same
font-weight, margins almost the same and
| | 13:50 | font-sizes almost the same.
| | 13:51 | What if they were both exactly the same?
| | 13:53 | Well, if they were exactly the same,
we could have grouped them together the
| | 13:56 | same way we did our CSS reset.
| | 13:58 | However, I'm going to show you a
grouped selector here that's going to allow us
| | 14:01 | to do something else.
| | 14:02 | We're using floats throughout our layout.
| | 14:05 | Now, we cover floats in the chapter on
layout a little bit later on, but what
| | 14:10 | floats really do is they move objects to
the left, or to the right of an object.
| | 14:14 | Well, we don't want that to
ever happen to one of our headings.
| | 14:16 | We always want our headings to be on
their own line and not have anything
| | 14:19 | aligned to the left or to the right of them.
| | 14:21 | It's sort of allows them
to stand apart, if you will.
| | 14:24 | So we do have our property called
Clear that allows us to do just that.
| | 14:27 | So I'm going to go down on the next
line, and I'm going to write a selector
| | 14:30 | that says, h1,h2,h3.
| | 14:34 | So it's grouping all of those
main headings h1, h2 and h3 together.
| | 14:38 | I'm going to open up my curly brace, and then
I'm going to type in clear both.
| | 14:44 | That says, "Don't allow anything to
float to my left, don't allow anything to
| | 14:47 | float to my right," and again, make
sure that you have your opening and your
| | 14:50 | closing curly braces.
| | 14:51 | You probably won't notice a change if
you click into the Design view, because we
| | 14:54 | don't really have anything
like that going on in this page.
| | 14:57 | Now, I promised that I would show you
one of the tricks I use for making sure I
| | 15:01 | remember what colors I'm using.
| | 15:02 | If I go all the way up to the top of
my stylesheet, notice that right up top
| | 15:07 | I have a color guide.
| | 15:08 | So here I tell which colors I'm going
to be using for the site, what colors
| | 15:12 | those are, and often I'll just copy and
paste those colors wherever I need them.
| | 15:16 | So it's a quick and handy way to do that.
| | 15:18 | So our global styles are now fairly complete.
| | 15:21 | Now the page's typography is not
finished, but the global styles that we've
| | 15:25 | written have completed much of the work for us.
| | 15:28 | Now more importantly, they are going
to provide the foundation for the entire
| | 15:32 | site's typography for every single page.
| | 15:35 | In our next movie, we're going to
expand on these global styles by writing
| | 15:38 | targeted styles for specific regions.
| | Collapse this transcript |
| Writing targeted styles| 00:00 | In our previous movie, we
wrote our site's global styles.
| | 00:04 | Global styles give you the baseline
styling for your site, and provide the
| | 00:08 | foundation for the remainder of
your site's styles to be built off of.
| | 00:12 | In this movie, we are going to tackle
the next step in styling your site's
| | 00:15 | typography, writing targeted
styles for specific regions of the page.
| | 00:20 | Now very rarely will you want all
paragraphs in the headings, sidebars, footers
| | 00:24 | and main content regions to look the same.
| | 00:27 | To accomplish this, we're going to use
descendant selectors to target specific
| | 00:32 | elements within page regions.
| | 00:34 | It will help first to review the
structure of our site and talk about how this
| | 00:37 | is going to allow us to
style each area separately,
| | 00:40 | so I am going to do that now.
| | 00:42 | I have our resources.htm file opened,
and this is found in the 07_11 folder.
| | 00:50 | So if I go over to Code View, we can see
that inside of our wrapper we have a header.
| | 00:56 | So we have our header region,
then we have a region called mainNav.
| | 01:00 | After the mainNav region, we
have a region called mainContent.
| | 01:04 | Inside mainContent, we have
another div tag called mainArticle.
| | 01:09 | After our mainContent region is finished,
we have another div with an id of sidebar.
| | 01:14 | So we have a sidebar region, and finally,
we have a region with the id of footer.
| | 01:19 | So if we are looking at that in
Design view, we have the header.
| | 01:23 | We have our mainContent, which is that region.
| | 01:27 | We have our main
navigation, which is that region.
| | 01:30 | We have our sidebar, which is this
region, and finally, we have our footer,
| | 01:36 | which is that region.
| | 01:38 | So we have those distinct areas, and
we can use those areas to target specific
| | 01:43 | styling for the content inside of them.
| | 01:46 | Now, in the last movie, I made you hand-code.
| | 01:48 | I'm sorry, but I hope you enjoyed it and
notice that it really isn't that hard. Trust me.
| | 01:54 | If you're really adverse to code,
forcing yourself to do that a few times
| | 01:58 | would really make you feel like, it's
really not that bad, but I am going to
| | 02:02 | let you off easy this time.
| | 02:03 | We are going to go back to the CSS
Styles panel, and we are going to use that to
| | 02:06 | make the majority of our changes.
| | 02:08 | Okay, so let's just go down through our
page in order, and start targeting those
| | 02:12 | areas that are global
styles that didn't fully style.
| | 02:15 | The first thing I want to turn my
attention to is, right up at the top of
| | 02:17 | the page, Resources.
| | 02:19 | Now, this is a heading1
that has an ID of page ID.
| | 02:24 | Every single page in our site has this.
| | 02:26 | We have a little heading at the very
top that identifies which page that is.
| | 02:30 | This is especially helpful when we
have something like Resources, where there
| | 02:34 | are multiple files in the resources section.
| | 02:36 | It really helps to identify that
this is indeed that section of the site.
| | 02:40 | Okay, so what I am going to do now is I am
going to write a selector that targets this.
| | 02:45 | So I am going to go over
to the CSS Styles panel.
| | 02:48 | Again, I am going to collapse the
Files panel, just to make this a little bit
| | 02:50 | easier for me, and I am going to use
the CSS Styles panel to help me focus
| | 02:54 | exactly where I want this to be placed, okay?
| | 02:58 | So what I'm going to do is I am going
to come right over here and find this
| | 03:01 | #mainConten h1 tagline rule.
| | 03:04 | I am going to click that to highlight it.
| | 03:06 | Now why am I doing that?
| | 03:07 | Because now when I create a new rule,
the new rule is going to go directly
| | 03:11 | underneath that one, so it's a really
easy way of making sure that your styles
| | 03:15 | remain organized as you create new ones.
| | 03:17 | Okay, I am going to create a New CSS
Rule, and here I want to create the
| | 03:22 | mainContent space pageID.
| | 03:26 | Now that came up automatically. How in the
world did Dreamweaver know to do that?
| | 03:29 | Well, remember, I was clicked inside
that heading, when I chose New CSS Rule.
| | 03:34 | Dreamweaver is going to try to write a
selector for you that targets that region.
| | 03:39 | Now it doesn't always get it right.
| | 03:40 | So what I'm going to do is I am
going to place my cursor in front of the
| | 03:44 | #pageID, and I'm going to type in h1.
| | 03:46 | So now what I'm doing is I am
saying hey, any heading one with an ID or
| | 03:52 | pageID - and notice there is no space
between h1 pageID - that's found within
| | 03:56 | mainContent, I want to affect.
| | 03:59 | Now here you need to make sure that there
is a space between the h1 and mainContent.
| | 04:04 | So if you don't have a space
there, make sure there is one there.
| | 04:07 | Okay. I am going to click OK.
| | 04:10 | Now one of the first things I could
do here is set the color for this, but
| | 04:13 | remember, we wrote our global styles
| | 04:15 | where all heading once have
that sort of deep teal color.
| | 04:18 | That's the color I want,
| | 04:19 | so I don't need to set it again here.
| | 04:21 | Now for Font-size I am going to
choose 1.4em, so I am going to change that.
| | 04:25 | Now I want my Font-weight to remain
Bold, so I am going to be very explicit
| | 04:28 | about that, and then I am going to
go and set some Box model properties.
| | 04:32 | So I am going to go to my Box category.
For Margin Top, I am going to do 20 pixels.
| | 04:37 | Now you'll notice here I'm not
doing ems. I am doing pixels.
| | 04:40 | That's because I want to make sure it
stays exactly that far away from the
| | 04:44 | top edge of the page.
| | 04:44 | Ems would change if somebody changed
the Font Size, whereas 20 pixels will
| | 04:49 | always remain the same.
| | 04:51 | And for Padding, I am going to turn off Same
for all. For Bottom, I am going to type in .25 em.
| | 04:57 | There we go.
| | 04:58 | Now one last little thing here;
| | 04:59 | I want a border underneath it to
act as sort of a rule between it and
| | 05:03 | the content below it.
| | 05:04 | So I am going to go to my Border
category, deselect Same for all, and then we
| | 05:08 | are going to do a Bottom border.
| | 05:09 | I am going to do a Solid border, 2
pixels, and for Color, I am going to do the
| | 05:13 | same color, #193742.
| | 05:18 | If I hit Tab, I can make sure it's that
teal color that I am looking for. It is.
| | 05:22 | Then I am going to click OK.
| | 05:24 | So just like that, my header up top
styles itself exactly the way we want, and
| | 05:28 | again, we use the region and the ID
that has to target that specific element.
| | 05:32 | Now I am going to scroll down a little
bit because I want to style this list
| | 05:37 | that we have down here.
| | 05:38 | It doesn't look like a list right now,
but if I click inside of it, I can
| | 05:42 | indeed see that it is inside of the UL tag,
and each of these guys are inside list item tags.
| | 05:47 | Remember, in our global styles we did a
reset that told all unordered lists and
| | 05:51 | list items to have no margins and no padding.
| | 05:54 | So it pretty much just made it
look like not a list. All right.
| | 05:56 | so let's go ahead and make
it look more like a list.
| | 05:59 | I am going to go ahead and scroll down a
little bit more in my styles, and find
| | 06:04 | this mainArticle ul selector, right there.
| | 06:07 | I am going to select that because I
want my next rule to go just below that.
| | 06:11 | So I am going to choose a New CSS Rule,
and my Compound Selector is coming up
| | 06:15 | pretty much the way that I want, except
for a couple of things here. Number one:
| | 06:19 | I don't need this #wrapper at the beginning.
| | 06:21 | So I am just going to choose less
specific, and it will get rid of that.
| | 06:24 | Even though it's not hurting anything, I
don't really need the ul there either, so I
| | 06:27 | am going to get rid of the ul, but I
am going to be very careful to make sure
| | 06:30 | there's still some spacing
between mainArticle and li.
| | 06:33 | To be honest with you, once you get use
to writing these descendant selectors,
| | 06:36 | it's easier, a lot of times, just to
write them yourself rather than trying to go
| | 06:40 | through this sometimes complex
dialog box that Dreamweaver has.
| | 06:43 | So I am going to go ahead and
click OK, and here I am going to switch
| | 06:47 | immediately to my Box category
because Margins and Paddings are what we are
| | 06:50 | going to use here to control this.
| | 06:52 | So for Margins, I am going to
choose deselect Same for all.
| | 06:56 | My Top margin is going to be zero. My
Right margin is going to be zero. My
| | 07:01 | Bottom margin, on the other hand,
that's going to be 1.2ems, and then finally,
| | 07:06 | the Left margin is going to be 2.4ems,
and that's going to push it away from the
| | 07:10 | edge of the parent
container by a good amount there.
| | 07:13 | I am going to go back to my Type
category, and in my Type category, I am going
| | 07:17 | to change Font size to 1em, and then for
Color I am going to go ahead and choose #51341a;
| | 07:27 | and that's that sort of brown color
that we were using elsewhere in the site.
| | 07:31 | So I am going to go ahead and click OK,
and now our list is looking a little
| | 07:34 | bit more like a list.
| | 07:35 | Now you might notice that we don't
have any bullet points. Now that's okay.
| | 07:39 | We are going to go in and set those bullet
points as graphics a little bit later on.
| | 07:44 | Okay, so that's our mainContent region.
| | 07:45 | Let's turn our attention to our sidebar,
which right now is not looking that good.
| | 07:50 | So we need to go ahead and fix that.
| | 07:52 | I am going to scroll down through my
styles, and eventually I am going to find
| | 07:59 | one of the sidebar styles right there.
| | 08:01 | Well, I am actually going to click
on the mainContent rule just above it,
| | 08:03 | because I am going to write a very
generic sidebar rule, and I want that to be
| | 08:07 | the first of all my sidebar rules.
| | 08:09 | So again, I am just going to
highlight that and then click the Plus symbol,
| | 08:13 | and now this time I could just do an
ID selector really, because I am just
| | 08:17 | going to do #sidebar.
| | 08:19 | Make sure it's defining in main.css.
| | 08:21 | I'll go ahead and click OK.
| | 08:23 | Now here we are going to write
really what amounts to a global style.
| | 08:26 | Everything in our sidebar should be
a little smaller than the rest of our
| | 08:30 | content, just by the very nature
of the sidebar being so narrow.
| | 08:33 | So for my sidebar's Font-size,
I am going to type in 90%.
| | 08:35 | That's going to shrink down any text
inside of the sidebar to 90% of what it
| | 08:42 | would've been originally.
| | 08:43 | It's just going to make the text
in the sidebar a little bit smaller.
| | 08:45 | When I click OK, you can see exactly
what I am talking about. It took all your
| | 08:49 | headlines, all your paragraphs,
shrunk them down just a little bit.
| | 08:52 | That also means that if I now say 1em
for one of those, they're actually going
| | 08:56 | to be 1em of 90% of what the body tag would be.
| | 09:00 | So those values are cumulative as you
go down the order, and that's something
| | 09:03 | you really need to remember. Okay.
| | 09:06 | Let's target some of those specific areas.
| | 09:08 | So once again, with that rule selected,
I am going to choose New CSS Rule.
| | 09:12 | I am going to do a Compound Selector and
remember when I said it was just easier
| | 09:16 | to type these yourself
sometimes? This is one of those times.
| | 09:18 | I am going to type in #sidebar space p.
So #sidebar p, so any paragraph inside
| | 09:26 | of a sidebar. Click OK. And for that, we
just need a Line-height. I am going to
| | 09:30 | do a Line-height of 1.2, make sure I
am doing multiples there, and that just
| | 09:35 | means a smaller Line-height
than the remainder of our page.
| | 09:38 | I'll go ahead and click that, and it does
tend to move things up a little bit,
| | 09:41 | although we've got so much
going on there right now
| | 09:44 | you can't really see that change.
| | 09:46 | Okay, now, I want to affect these
specials. Notice that this is still
| | 09:50 | rather crowded in here.
| | 09:51 | So what I am going to do is I am going
to use the fact that this is a div tag
| | 09:55 | within ID of specials inside sidebar.
| | 09:57 | I am going to write a rule that targets
that element specifically, and targets
| | 10:01 | the h2 inside of it first.
| | 10:03 | So again, I am going to come right
over to my CSS Styles panel, click on New
| | 10:07 | CSS Rule, and I am going to
type in #sidebar #specials h2.
| | 10:15 | So #sidebar #specials h2. Now
remember, this is targeting any heading two
| | 10:22 | found inside of an element with an ID
of specials, found inside of an element
| | 10:26 | with an ID of sidebar.
| | 10:27 | So please don't get overwhelmed
with these really long selectors. All
| | 10:32 | they really are is saying, "Hey,
when you find this, inside of this, go
| | 10:35 | ahead and style it that way."
| | 10:37 | We make those increasingly more
specific so that they don't really work or
| | 10:41 | overwrite any of the other
styles we have on our page.
| | 10:43 | I am going to go ahead and click OK,
and now we have got a little bit of
| | 10:46 | work ahead of us here.
| | 10:47 | Our Font-size is going to be 1em, so
we have got that. Our Font-family is
| | 10:52 | going to be Arial, Helvtica, sans-serif.
Our Font-weight is going to be bold.
| | 10:57 | It's going to ensure that that heading is bold,
no matter what else is going on around it.
| | 11:02 | For Color, I am going to go ahead and
click inside that dialog box, so I am
| | 11:05 | going to type in #193742. Remember,
that's that teal color we have been using.
| | 11:12 | And again, if you ever want to see what
this is doing, just click Apply, and you
| | 11:15 | can see all of our
headings right there changing.
| | 11:17 | Now there are a couple of
things we still need to do here.
| | 11:19 | I am going to click on the Block category,
and for Text-align, I am going to choose Right.
| | 11:24 | I am also going to click on my Box
properties, and I am going to deselect
| | 11:27 | Same for all for Margin.
| | 11:29 | For my Bottom margin, I
am going to type in 0.
| | 11:31 | I am also going to click off Padding
Same for all, and for Padding Top, I am
| | 11:36 | going to type in 1em, so
1em for Padding on the top.
| | 11:41 | Now why did I do a little bit of Top padding?
| | 11:43 | Because we are going to do a border
that's going to separate all of those elements.
| | 11:46 | So I am going to go to my Border
category, deselect Same for all, and for
| | 11:50 | Border Top, we're going to do Solid,
1 pixel, and we're going to do that
| | 11:55 | same color, #193742.
| | 12:00 | I am going to go ahead and click OK, and
now you can see exactly what's going on there.
| | 12:05 | That border up top is acting as a
nice separator between those guys, and
| | 12:08 | the text is aligned.
| | 12:10 | Now we have got a little bit of work to do,
and you might say to yourself, "You know what?
| | 12:14 | "I don't like that top one having that line.
| | 12:17 | I would rather have my monthly specials
and not have that separator between them."
| | 12:20 | Well, if you click inside that heading,
you can see that there is actually a
| | 12:23 | class already applied to it called Top,
and that's going to allow us to tell
| | 12:27 | that one, "Hey, by the way, top
one, you shouldn't have a border."
| | 12:30 | So let's go ahead and write
that selector while we are at it.
| | 12:32 | So I am going to go right over to my
CSS styles > New CSS Rule, and here we are
| | 12:37 | just going to select Compound Selector,
type in #sidebar #specials h2.top.
| | 12:48 | And I am going to click OK, go down
to Border, and I am just going to tell
| | 12:52 | Border, None, and that's
all we really need to do.
| | 12:55 | I am going to go ahead and click OK,
and you can see that border is going to go
| | 12:57 | away for the top one, but still gives us
a nice separator between the bottom two
| | 13:01 | there, so that's cool.
| | 13:03 | Now believe it or not, I know this
thing still looks kind of messy, but we
| | 13:06 | really only have two more selectors to write.
| | 13:08 | So let's go ahead and
write those selectors for us.
| | 13:11 | I am going to go ahead and choose
New CSS Rule, and I want to target the
| | 13:14 | paragraphs within that particular element,
| | 13:17 | so I am going to type in #sidebar
#specials p. So #sidebar #specials p, so any
| | 13:28 | paragraph inside of a div tag with an
ID of specials, inside of the other div
| | 13:32 | tag with an ID of sidebar.
| | 13:34 | I am going to go ahead and click OK,
and this one is going to be fairly easy.
| | 13:38 | The Font-style is going to be italic.
The Text-align is going to be right.
| | 13:42 | So I am going to go over to my Block category,
and for Text-align I am going to choose Right.
| | 13:46 | I am going to go down to my Box
category and deselect Same for all for Margin.
| | 13:51 | Now for Top margin, I am going to type
in .5ems, and for Bottom margin, I am
| | 13:55 | going to type in .5ems.
| | 13:55 | I am going to leave the Right and
the Left alone, because I really don't
| | 13:59 | want them to have one.
| | 14:00 | So I could type in zero, or I could just
kind of leave them alone like I am doing.
| | 14:03 | One more thing, let's go back to
our Type category and let's set a
| | 14:05 | Line-height for that.
| | 14:06 | I am going to set the Line-height at 1.6.
| | 14:08 | That's going to control the amount of
space between one paragraph and the next.
| | 14:13 | Remember, for Line-height, we are
going to be using multiples, so now when I
| | 14:16 | click OK, I get the spacing I want
between those guys, and I get the
| | 14:19 | alignment that I want.
| | 14:21 | They're italicized.
| | 14:22 | They're looking exactly
the way I want them to do.
| | 14:24 | Now the last thing I need to do
right here is our Monthly Specials. That
| | 14:28 | headline along with Did You Know
headline really don't fit those regions.
| | 14:33 | So right now they are getting all their
styling information from the global h1,
| | 14:36 | so we need to overwrite that.
| | 14:38 | So we notice, by the way, that they're
in a div tag with the class of callOut.
| | 14:43 | Because callOuts can be used within
our mainContent and within our sidebar, I
| | 14:46 | want to write a selector that really
isn't specific to the sidebar, and having
| | 14:50 | that class callOut is
going to allow me to do that.
| | 14:52 | I am going to go to my CSS Styles and
scroll up, and go all the way up and find
| | 14:59 | this callOut Selector.
| | 15:00 | Now that's controlling the div
tag itself, but I want to target the
| | 15:03 | headings inside of it.
| | 15:04 | So with that selected, I am going to
choose New CSS Rule, and I am going to do
| | 15:08 | a Compound Selector, and
I am going to do .callOut.
| | 15:14 | So callOut with a capital O, space, h1.
| | 15:16 | So again, that's going to target
any h1 inside of an element with the
| | 15:20 | class name callOut.
| | 15:21 | I am going to go ahead and click OK,
and then just make a few minor changes
| | 15:25 | here. The Font-size is going to be 1.2em,
so we are going to make it little bit
| | 15:28 | smaller. Color for that we can leave
unchanged, because that teal color is going
| | 15:32 | to work out just fine for us.
| | 15:34 | Let's go ahead and put a border on the
bottom of it, so deselect Same for all.
| | 15:37 | We are going to do Bottom Border, Solid,
1 pixel and the Color for that's
| | 15:42 | going to be the same teal color, so #193742.
| | 15:47 | So after a while you do kind of get
them memorized. And you know what?
| | 15:51 | Let's make that a little bit
thicker, how about 2 pixels?
| | 15:53 | That will offset it a little
bit from that line underneath it.
| | 15:55 | So feel free to make
changes as you're doing this.
| | 15:58 | You are like, what if we did this,
| | 15:59 | or what if we used something other than a
solid line? What if I used a double line?
| | 16:03 | Yeah, feel free to go ahead and do that,
kind of experiment with it, and see if
| | 16:06 | you get something that you
like a little bit better.
| | 16:07 | Now I am going to go to the Box category,
and here I am going to deselect Same
| | 16:11 | for all for both Margin and Padding.
| | 16:13 | For my Margin Bottom, I
am going to type in .5ems.
| | 16:17 | That's going to add a little bit of
space below it, but for my Padding on the
| | 16:21 | bottom, I am going to do .25ems, and
that's going to push the border away from
| | 16:25 | the text a little bit.
| | 16:26 | I am going to go ahead and apply that,
click OK, and there are our headlines. Cool!
| | 16:32 | So I am going to save the file.
| | 16:33 | We have done a lot of work here,
preview that in my browser, and now we see the
| | 16:38 | result of our global styles and our
targeted styles coming together to format
| | 16:43 | that page the way that we
wanted it to be formatted. Cool!
| | 16:46 | Now writing our global styles first, and
then focusing on specific areas, that's
| | 16:51 | a really good practice, and it's one
that's going to ensure that you are styling
| | 16:54 | is consistent throughout your site.
| | 16:56 | It also means that when you're writing
styles for specific areas, you don't need
| | 17:00 | to define the same properties
over and over and over again.
| | 17:03 | If all headings are going to be Arial,
for example, you don't need to define the
| | 17:06 | Font Family property in every heading
style, just the global one. Even better,
| | 17:11 | your typography is now much easier to
update and maintain, because most of your
| | 17:15 | edits will be made to the global styles,
not the area specific styles, which can
| | 17:19 | be harder to locate and more numerous.
| | 17:21 | Now in the end, each designer
develops a strategy that fits their site and
| | 17:26 | their workflow the best.
| | 17:27 | As you develop your own styles, pay
attention to the techniques that can save
| | 17:30 | you time, create smaller code, and still
give you the power and flexibility that
| | 17:34 | you require for your design.
| | Collapse this transcript |
|
|
8. Working with ImagesUnderstanding image types| 00:00 | When creating images for the Web, it is
important to understand which types of
| | 00:04 | images you can use online and when it's
appropriate to use one over the other.
| | 00:09 | Determining which file type to use is
usually a decision made after considering
| | 00:13 | file size and functionality.
| | 00:15 | For online graphics, your goal is
always going to be obtaining the best image
| | 00:19 | quality in the smallest file size possible.
| | 00:22 | Understanding how file types are
compressed and best practices for creating them
| | 00:27 | will help you keep your image
quality high or keeping file size down.
| | 00:31 | Before we discuss how Dreamweaver
manages images, let's first examine the three
| | 00:35 | file types you'll be using when creating
your Web graphics: JPGs, GIFs and PNGs.
| | 00:40 | JPG is short for Joint Photographic
Experts Group and is a standard that has
| | 00:47 | been around in one form or
another since about 1992.
| | 00:51 | The JPG file format allows you to
create images with millions of colors,
| | 00:55 | which makes it an ideal choice for
photographs or images with subtle color differences.
| | 01:00 | The downside to using JPGs is that,
when saved, a lossy compression is used to
| | 01:05 | save file size, resulting in
image data being thrown away.
| | 01:09 | Although, you can choose the amount of
compression when saving a JPG, data is
| | 01:13 | discarded each and every time it is saved.
| | 01:16 | For that reason, it's a good idea
to save your original image in a file
| | 01:20 | format other than JPG and simply
overwrite the original JPG when a change is
| | 01:25 | made to the source graphic.
| | 01:27 | Also, JPGs do not support
transparency or animation, which may make them
| | 01:32 | unsuitable for certain uses.
| | 01:34 | The GIF, short for Graphics Interchange
Format, file format was first introduced
| | 01:39 | by CompuServe in 1987 and quickly
became a staple for online graphics.
| | 01:45 | Unlike the 24-bit JPG format, GIFs are 8-
bits, which limits the color palette of
| | 01:51 | GIF files to a maximum of 256 colors.
| | 01:55 | Now GIFs do have the advantage of
using a lossless compression format, which
| | 01:59 | reduces file size
without damaging image quality.
| | 02:03 | GIFs also support animation and
transparency, making them the favorite file
| | 02:07 | format of icons and dancing babies worldwide.
| | 02:11 | Due to their limited palette, GIFs
are not well suited for images that have
| | 02:15 | subtle tonal shifts or a wide range of color.
| | 02:18 | They are however, ideal for smaller
thumbnails or images that have large
| | 02:22 | areas of solid colors.
| | 02:24 | PNG stands for Portable Network
Graphics and owes its existence to the very
| | 02:29 | curious case of Unisys, holding the patent for
the compression algorithm used in GIFs in 1995.
| | 02:35 | PNGs were designed to replace GIFs
and share many of the GIF file format
| | 02:41 | strings, but they have added functionality.
| | 02:44 | PNGs, like GIFs, support
transparency and use lossless compression to
| | 02:49 | achieve smaller file sizes.
| | 02:51 | Unlike GIFs however, PNGs files are 24-
bit graphics, which allow them to display
| | 02:56 | millions of colors and subtle tonal
shifts without using dithering or banding.
| | 03:01 | So which file format should you use?
| | 03:03 | Well, honestly it depends on each
individual image and how that image is going
| | 03:08 | to be used within your files.
| | 03:10 | As a general rule, JPGs are best for
large images and photographs, specifically
| | 03:15 | images that have lots of color and detail.
| | 03:17 | High compression settings can cause
serious image degradation, so it's best to
| | 03:21 | compare image quality and compression
for each image before deciding on an
| | 03:26 | export setting for your JPG.
| | 03:28 | As a best practice, remember to keep a
source image for your JPG so that you're
| | 03:32 | not editing and overwriting the JPG itself.
| | 03:35 | JPG image quality degrades each time
it saved, and this could result in an
| | 03:39 | unusable image over time if
saved over and over itself.
| | 03:43 | GIFs are great for thumbnails, small icons or
images that contain large areas of solid colors.
| | 03:50 | They're also a standard image type for any
image needing transparency or limited animation.
| | 03:54 | Now keep in mind that GIFs do have a
limited palette, so complex images with
| | 03:59 | lots of color or tonal shifts like
gradients, can suffer when saved as GIFs.
| | 04:03 | PNGs also have all the advantages
of GIFs, without the liabilities.
| | 04:07 | PNGs feature full 24-bit support, so millions
of colors can be saved along with transparency.
| | 04:13 | The downside to using PNGs is they
tend, on average, to be a little bit bigger
| | 04:17 | than GIFs and JPGs, so heavy use of
them throughout your site tends to add to
| | 04:22 | the site's overall weight.
| | 04:24 | Older browsers support was spotty at best.
| | 04:26 | So for Legacy sites or sites that target
older browsers, PNGs files are not a good choice.
| | 04:32 | Also, Internet Explorer 6 did not
support transparency for PNGs, resulting in
| | 04:37 | having to write some pretty fancy
CSS to force PNG transparency support.
| | 04:42 | As a whole, PNG usage is rapidly
increasing on the Web, but if used, the file
| | 04:47 | format is usually used to supplement
graphics on sites or to do things that
| | 04:51 | JPGs and GIFs just can't. In the end,
the file format you use for Web graphics
| | 04:56 | is totally up to you.
| | 04:58 | Knowing more about the file types and
their capabilities will help you make
| | 05:02 | an informed choice.
| | Collapse this transcript |
| Managing assets in Dreamweaver| 00:00 | Before we discuss placing and modifying
images, I want to take a moment to talk
| | 00:04 | about managing your images in
Dreamweaver using the Assets panel.
| | 00:08 | The Assets panel provides you with a
nice central location to manage and control
| | 00:12 | a number of assets including images.
| | 00:15 | It allows you to organize your images,
place images directly on the page by
| | 00:18 | dragging and dropping them, gives you
a thumbnail preview of your images and
| | 00:22 | displays additional image information.
| | 00:25 | So I have the gallery.htm opened from
the 08_02 Explorers folder, and I'm just
| | 00:30 | going to take a moment to rearrange my
workspace a little bit so that we can
| | 00:33 | focus on the Assets panel
a little bit more clearly.
| | 00:36 | The first thing I am going to do is
close my CSS Styles panel, or at least
| | 00:39 | collapse it by double-clicking on the tab there.
| | 00:41 | And you're going to find the Assets
panel just next to the Files panels.
| | 00:45 | So you can just click on that tab, and the
Assets panel will become the active panel.
| | 00:49 | Now, I am going to take you on a
brief tour before we focus on image
| | 00:52 | capabilities of the panel itself and
kind of where everything is located.
| | 00:56 | Now, on the left-hand side, you're
going to see a series of categories.
| | 00:59 | These little icons represent different
things like Templates, Library Items,
| | 01:02 | Movies and QuickTime movies,
Flash Files, Links, Images.
| | 01:06 | And if any of those are highlighted,
you're going to see that content, if you
| | 01:10 | have it within the site,
rather than your images.
| | 01:12 | So the images are the very top category.
| | 01:14 | You want to ahead and select that.
| | 01:15 | Now, as soon as you do that, you're going
to see a list of all the images in your site.
| | 01:20 | Clicking on one of those images, and
trust me, you only want to click on it once
| | 01:24 | - I'll show you why that is in just a
little bit - but if you click on one of
| | 01:28 | the images, you'll see a little
thumbnail of it right above the Assets panel,
| | 01:31 | and that's probably my
favorite part of this panel.
| | 01:33 | You know, a lot of times you can
forget exactly what you've named an image,
| | 01:36 | especially if a lot of
your image names are similar.
| | 01:39 | So being able to click on the image and
literally see a thumbnail of it is very, very handy.
| | 01:45 | Now, this is going to show you a
listing of every single image in your site.
| | 01:49 | So it's not just the images
directory that this is scanning.
| | 01:52 | It's scanning every folder and
subdirectory within your entire site.
| | 01:55 | And any image, any JPG, PNG file,
GIF file that it finds, it's going to
| | 02:00 | list here and display.
| | 02:01 | Now, you can see in my Assets panel,
I have two of each of these guys.
| | 02:05 | What's going on there?
| | 02:06 | Well, remember we have our Exercise
Files folder, and we also have a Finished
| | 02:10 | Files folder that's an exact duplicate
of this, just with Finished Files and
| | 02:14 | that's why we are seeing two of these.
| | 02:15 | So I would like to
organize these a little better.
| | 02:18 | And that's an important task with the
Assets panel, because based on the size of
| | 02:22 | your site, as the larger it gets,
the more images you get, and obviously
| | 02:26 | scrolling through all these images
and trying to find exactly the one that
| | 02:29 | you're looking for can be a little daunting.
| | 02:31 | So let's talk about how we can use the
Assets panel to organize your information
| | 02:35 | a little bit more clearly.
| | 02:36 | Well, one of the things I'm going to
do here is expand the Assets panel out.
| | 02:39 | I'm just going to sort of drag that divider
out so that I can see more content and wow!
| | 02:44 | You can see that there's actually a lot
more to the Assets panel than we could
| | 02:47 | see in the narrow viewer
we were looking at before.
| | 02:49 | So we have columns for the Name of the
image, the Dimensions, the Size of the
| | 02:53 | image, the File Type, the Path, and
you can actually sort by all those.
| | 02:56 | So what I'm going to do right Now is
I'm going go over to Full Path, and I'm
| | 03:00 | going to click and what that's going to
allow me to do is it's going to put all
| | 03:03 | of my main images in one place and the
Finished Files images in another list.
| | 03:08 | So I'm essentially
looking at two lists here now:
| | 03:10 | one of the images in the Exercise
Files and the other one, the images in
| | 03:14 | the Finished Files.
| | 03:15 | So that's going to help me help me sort
through just a single version of these
| | 03:17 | and not have to deal with the multiple
versions that I was seeing just a minute ago.
| | 03:21 | That's nice but even then,
there is still a ton of images here.
| | 03:24 | And if I'm looking for just the
images that are going to be in my gallery,
| | 03:27 | that's going to make it a
little bit harder on me.
| | 03:28 | So one of the things that we can do to
add a little bit more organization to our
| | 03:31 | assets is to take advantage of favorites.
| | 03:35 | You can see at the very top of the
Assets panel, there are two radio buttons:
| | 03:38 | one for Site and one for Favorites.
| | 03:41 | Now, Site is just indicating hey,
these are all of the images in your site.
| | 03:44 | Favorites is your way of sort of
making sure that you're only looking at the
| | 03:48 | ones you want to look at.
| | 03:49 | It's a way of sort of
filtering the results of this site.
| | 03:53 | And I'm going to show you a couple of
different ways to add images to your
| | 03:55 | favorites, and then we'll do a few
things over on our favorites to organize
| | 03:59 | those images as well.
| | 04:00 | Well, I'm really interested in the
images that are going to be going into my
| | 04:03 | gallery, because that is the page
that we are currently working on.
| | 04:07 | So I'm very curious as to where
these images are and what they are.
| | 04:10 | So I happen to know, by just
scrolling through here, that this bird image
| | 04:14 | is part of my gallery.
| | 04:16 | So I really would like to
add that over to my Favorites.
| | 04:19 | Well, there is a couple of
different ways for me to do that.
| | 04:21 | First, I can right-click or Ctrl+Click
that object and choose Add to Favorites.
| | 04:25 | I'll go ahead and do that.
| | 04:27 | Now, as soon as you do that,
Dreamweaver is going to give us this nice little
| | 04:29 | message that says "Hey!
| | 04:30 | "I've added that to the Favorites.
| | 04:31 | If you want to take look at it, choose
favorites at the top of the Assets panel."
| | 04:34 | This can get kind of annoying because
every single time you add something to
| | 04:38 | Favorite, this message is going to come up.
| | 04:40 | So it does have this Don't
show me this message again.
| | 04:42 | And now, you can go ahead and check that,
and you won't have to worry about that
| | 04:45 | sort of confirmation message every
single time you add something to that.
| | 04:49 | Now, I also notice I've got this golden
_gate image, and I know that's part of
| | 04:52 | my Favorites as well.
| | 04:53 | So I can select that and in the lower
right-hand corner of my Assets panel
| | 04:57 | there's a little ribbon with the
plus symbol beside it, and that says Add
| | 05:00 | to Favorites as well.
| | 05:01 | And I can go ahead and click on that.
| | 05:03 | So that's yet another way to add
those images to the Favorites as well.
| | 05:06 | And the thing that that confirmation
message does for you is it makes sure that
| | 05:10 | you don't click that ribbon like two or
three times because you can keep adding
| | 05:13 | this to the Favorites if you'd like. All right.
| | 05:14 | so I'm going to switch over to my
Favorites now, and now, I can see just the
| | 05:18 | bird and just the golden_gate.
| | 05:19 | Now, you'll notice that it didn't
remove them from the overall view.
| | 05:23 | What you're really looking at
here is just a filtered results view.
| | 05:26 | You're just saying "Hey!
| | 05:27 | I just want to display these types of images."
| | 05:29 | Now, the more you do that, obviously the
more crowded this area you can get as well.
| | 05:33 | So I'm going to talk about a way in
just a moment to organize your Favorites a
| | 05:36 | little bit better than we're doing currently.
| | 05:38 | Now, you are free over in the
Favorites to actually change the name of the
| | 05:42 | image, and it won't physically
change the name of the image.
| | 05:44 | This is what's known as a nickname.
| | 05:46 | So you could say, for one of these,
bird_large, if it's not the thumbnail and
| | 05:52 | golden gate large if it's not the thumbnail.
| | 05:55 | So just by clicking the name one
time, you can go ahead and give that
| | 05:58 | whatever nickname you want.
| | 06:00 | Now, that does not change the name of the image.
| | 06:02 | You're not physically renaming an image.
| | 06:04 | You can see in the Full Path.
| | 06:05 | It's still bird.jpg.
| | 06:06 | It's still golden_gate.jpg.
| | 06:07 | You're just giving it what's known as
a nickname over here in the Favorites,
| | 06:11 | and that's really helpful if you have
several different versions of an image or
| | 06:14 | images that are located in different
folders that are doing similar things for you.
| | 06:18 | You can go ahead and name those
something that makes a little bit more sense to
| | 06:21 | you but doesn't actually change
the name of the image itself. Okay.
| | 06:24 | I'm going to show you maybe a faster way
to organize images within your Favorites.
| | 06:27 | So what I'm going to do here is
select both of these guys, and I'm going to
| | 06:31 | remove them from my favorites.
| | 06:32 | So that way we won't have duplicates,
and I could do that very quickly by
| | 06:35 | selecting both of them, going down to
the Assets panel and in the Favorites,
| | 06:38 | you Now, have that ribbon with a minus
symbol on it, and that will remove them
| | 06:42 | from the Favorites.
| | 06:43 | So I can add things to the
Favorites from several different locations.
| | 06:47 | For example, I'm going to switch over
to the Files panel again and in the Files
| | 06:50 | panel, I'm going to open up my images
directory, and I can see that I have a
| | 06:54 | folder here solely for my gallery images.
| | 06:57 | So they're located in their own subdirectory.
| | 06:59 | I'm going to go ahead and open up
that subdirectory, and I'm going to start
| | 07:02 | with the first graphic in the gallery
directory, hold my Shift key down and
| | 07:06 | click on the last one.
| | 07:07 | So I just want to select all of those
images that are currently part of my gallery.
| | 07:11 | I'm going to go ahead and right-click
those and when I right-click them, one
| | 07:15 | of the things that I can do, down here
towards the bottom of this contextually
| | 07:18 | sensitive menu and of course, that's Ctrl+
Click on the Mac, I can say Add to Image Favorites.
| | 07:23 | So as soon as I do that, switch back to
my Assets panel, now when I look at my
| | 07:28 | favorites, I have all of
those images already there.
| | 07:31 | So you can do it in the Files panel.
| | 07:32 | You can do it from the
Site view of the Assets panel.
| | 07:35 | It's really up to you, in
terms of how you want to do that.
| | 07:38 | Now, you can see, at this point, we
have a lot of images here in our Favorites.
| | 07:41 | Well, what if we had multiple galleries,
or maybe we wanted to start putting
| | 07:45 | banner ads in here or larger
photographs in here, all sharing similar themes?
| | 07:50 | Well, all of a sudden, you would end up
with exactly the problem that you have
| | 07:54 | here in the Site view.
| | 07:55 | You've got to scroll through all of
these guys and try to figure out who's who.
| | 07:59 | So you do have some organizational tools
available to you here in the Favorites.
| | 08:03 | If you look at a lower right-hand
corner of the Assets panel, you're going to
| | 08:07 | see this little orange
icon that looks like a folder.
| | 08:10 | It is indeed a Favorites folder and if
I click on that, it's going to create a
| | 08:13 | brand-new untitled folder.
| | 08:14 | I'm just going to type in this gallery,
because these are all of our gallery images.
| | 08:18 | And Now, I am free to select all of these
images and place them in the gallery folder.
| | 08:23 | That folder can then be opened
and closed whenever I need to view
| | 08:26 | those particular assets.
| | 08:27 | Now, let me be very clear about this.
| | 08:30 | This does not create a
folder within your site directory.
| | 08:34 | We did not move these images anywhere.
| | 08:36 | This is merely a tool for organizing
these images here within the Favorites view.
| | 08:40 | So that's the only place you'll
ever see those particular folders.
| | 08:44 | So I could add logos over here, banner
ads, larger images, create folders for
| | 08:49 | them, and then that allows me to very
quickly and easily access those images,
| | 08:54 | which is really, really cool.
| | 08:56 | Okay, now, so other than organizing
our images and being able to click on one
| | 09:00 | and see a little thumbnail of it, what
does the Assets panel really do for us?
| | 09:03 | Well, in addition to organizing your
assets, it allows you to place them on the
| | 09:07 | page very quickly and very easily.
| | 09:09 | Let me show you what I mean.
| | 09:10 | I'm going to switch back over here
to my gallery page, and I'm just going
| | 09:13 | to scroll down, and I can see that
within the gallery there are all these
| | 09:16 | photographs beside the descriptive text,
but the last one is lacking the photographs.
| | 09:21 | So it doesn't have its image.
| | 09:23 | And the image that we're looking for is
this oranges image, so the oranges.jpg.
| | 09:26 | I can select that once right here in
the Assets panel, and I can see the image.
| | 09:30 | Now, there are a few ways to
insert this image on the page.
| | 09:33 | The first one would be just go ahead
and place your cursor wherever you would
| | 09:36 | want your image, maybe
right in front of the M there.
| | 09:38 | Highlight the oranges in the Assets
panel and then click the Insert button.
| | 09:41 | So if you highlight an image and you
click Insert, wherever your cursor is
| | 09:46 | within your page, it's going
to place in that exact location.
| | 09:49 | That's really handy if you've got a
very precise layout or if you have a
| | 09:52 | really tight area, and you want to
make sure that you're placing it exactly
| | 09:56 | where you need it, you can just place
your cursor in there, click Insert, the
| | 09:59 | image is going to show up.
| | 10:01 | There is another way to do it, and
this way might be maybe a little bit more
| | 10:04 | fun, and that's dragging and dropping.
| | 10:06 | So I can go right over here to the
Assets panel, find this oranges image.
| | 10:09 | I'm going to click once on this icon, hold
the mouse down, and I'm just going to drag.
| | 10:12 | And I'm going to drag that right in
front of the M where it says Max. Let go.
| | 10:18 | And I'm just going to give it some Alt text.
| | 10:20 | I'm just going to type in Orange
groves because we have our accessibility
| | 10:23 | attribute is turned on, and then
I'm going to go ahead and click OK.
| | 10:27 | And in comes my image,
shows up exactly where I wanted.
| | 10:30 | And although we're going to cover this
a little bit later on, just to make sure
| | 10:33 | that it looks the same, I'm going
to select the image, go down to the
| | 10:36 | Properties Inspector, and I'm going to
grab the class pulldown menu and choose
| | 10:40 | gallery image, there we go.
| | 10:41 | Now, it looks like the other two.
| | 10:42 | And we're going to learn how to do that
in just a little bit but now, our image
| | 10:45 | is inserted on the page,
very quickly, very easily.
| | 10:48 | We do that in a visual way.
| | 10:50 | And in that way the Assets panel is a
really efficient way of sorting through
| | 10:53 | your images, organizing those images
and then getting those images on the page.
| | 10:58 | So it's a really nice tool for doing that.
| | 10:59 | Now, the Assets panel does allow us to do one
more thing, and let me show you what that is.
| | 11:04 | Now, if you notice, in the lower right-
hand corner of the Assets panel, we have
| | 11:08 | another little icon down here, looks
like a page with a pencil on top of it.
| | 11:11 | If you hover over that, it says Edit.
| | 11:13 | Now, what that's going to do for you,
if you select an image and you click that
| | 11:16 | icon, it's going to open up that image
in whatever program you've specified to
| | 11:21 | be the image editor for that file type.
| | 11:23 | So you can set Fireworks, Photoshop,
GIMP, whatever program you like, and we're
| | 11:27 | going to do that a little
bit in one of our movies.
| | 11:29 | But I'm going to do right now is
show you another way of doing that.
| | 11:32 | If you go to your image, let's say this
oranges image, for example, and you just
| | 11:36 | highlight it and double-click it and
trust me you will probably find this by
| | 11:40 | mistake, it's really easy to double-
click an image without meaning to.
| | 11:43 | When you do that, you're going to be
taken on a little trip and out of Fireworks
| | 11:46 | to Photoshop then you have to
come back in the Dreamweaver.
| | 11:48 | So you want to be careful about that.
| | 11:50 | But sometimes you mean to do that.
| | 11:51 | So if I double-click the oranges here,
it's going to launch Photoshop. There we go.
| | 11:55 | And it's going to open that
image up directly in Photoshop.
| | 11:57 | So that's really nice.
| | 11:58 | I don't have to go
hunting through any directories.
| | 12:00 | I don't have to open up Photoshop
first and then do a file open and search
| | 12:04 | for that that image.
| | 12:05 | I can just double-click right in
the Assets panel, open that up.
| | 12:07 | So that's pretty cool.
| | 12:09 | Now, the Assets panel isn't for everyone.
| | 12:11 | I know several designers that
don't use it at all in their workflow.
| | 12:14 | However, for a site that is very image
heavy, using the Assets panel to organize
| | 12:18 | and manage your image assets can
really speed up your image-related tasks.
| | 12:22 | Searching through hundreds of images is
a lot easier if you've taken advantage
| | 12:25 | of categorizing them using the
Favorites feature. What's more?
| | 12:29 | The Assets panel makes placing those
images on the page once you've found them
| | 12:32 | as simple as dragging and dropping.
| | 12:34 | I personally love the ability to see a
thumbnail of the image in the Assets panel.
| | 12:38 | That allows me to confirm that I've got the
right image before I place it on the page.
| | 12:41 | Whether you use it a little bit or a
lot, you owe it to yourself to try out
| | 12:45 | the Assets panel and see how it can
assist you when working with images in
| | 12:49 | Dreamweaver.
| | Collapse this transcript |
| Setting image accessibility preferences| 00:00 | By now, you're probably itching to get
started and actually working with some
| | 00:03 | images on your pages.
| | 00:05 | However, before we do that, there is one
more little detail we need to take care of.
| | 00:09 | Dreamweaver allows us to set
Accessibility Preferences for several types of
| | 00:13 | objects, images among them.
| | 00:15 | By setting those Preferences before
we begin working, we can control how
| | 00:18 | Dreamweaver responds when we
place an image on our page.
| | 00:21 | Although, just how strict you are
with accessibly standards is a personal
| | 00:24 | decision, and often driven by the type
of site you are working on, there are
| | 00:28 | certain baseline standards that need
to be met when designing Web sites.
| | 00:32 | At a minimum, each of your
images should have Alternative Text.
| | 00:36 | Alternative Text often referred to as
Alt tagging your images, allows screen
| | 00:41 | readers, and other devices to offer
brief descriptions or comments regarding
| | 00:45 | the images on the page.
| | 00:46 | This text can be as short as
one word or longer if required,
| | 00:49 | although it's not recommended
that you go past a single sentence.
| | 00:52 | The basic idea behind alt text is that
it should offer a brief description of
| | 00:56 | the image or pass along some meaning,
especially if the image is a link or
| | 01:00 | represents data of some type.
| | 01:02 | After placing an image on the page in
Dreamweaver, you can select the image and
| | 01:06 | enter the alt text using
the Properties Inspector.
| | 01:08 | However, in a busy environment and often
pressed for time, it's not uncommon for
| | 01:13 | designers and developers to forget to
Alt tag their images when they are placed.
| | 01:17 | This area is often compounded by
the amount of images on the page, and
| | 01:21 | sometimes goes unfixed.
| | 01:23 | I'd venture to say that missing
alt text is probably the most common
| | 01:26 | accessibility error.
| | 01:28 | Fortunately, Dreamweaver's
Accessibility Preferences allows us to have
| | 01:32 | Dreamweaver prompt us for alt text each and
every time an image is placed on the page.
| | 01:36 | This gentle reminder helps make sure
each time an image is inserted, that we
| | 01:41 | type in some alt text.
| | 01:42 | So let's set our Accessibility
Preferences and see them in action.
| | 01:46 | So to set your Preferences you are
just going to go to Edit, and choose
| | 01:49 | Preferences, and if you are on the Mac
you are going to go to Dreamweaver and
| | 01:52 | choose Preferences, and you want to
go to your Accessibility category.
| | 01:55 | Now I am betting that you already have a
checkmark right here where it says Images.
| | 02:00 | The reason that I say that is because
that is the default setting in Dreamweaver.
| | 02:03 | So unless you went in, and turned that
off, I am betting that's turned on.
| | 02:08 | You just want to verify that indeed
images does have a checkmark beside them.
| | 02:13 | I am going to go ahead and click OK.
| | 02:14 | Now, I am just going to switch over to my Assets
panel because I'm looking for a specific asset.
| | 02:18 | I'm looking for the flag_photo.jpg.
| | 02:21 | So the flag_photo.jpg is going to go
right here, right before the sentence, are
| | 02:26 | you looking for an exciting adventure?
| | 02:27 | So I am just going to drag and drop
that right there to, are you looking for
| | 02:31 | an exciting adventure?
| | 02:32 | As soon as I let go of my
mouse, up comes our Image Tag
| | 02:36 | Accessibility Attributes.
| | 02:38 | I am going to go ahead and alt text this.
| | 02:40 | I am just going to type in, in the
Alternate Text Area right here, The Great
| | 02:44 | State of California, and I am going to
put the exclamation point there, because
| | 02:49 | I am pretty excited about that.
| | 02:51 | Now, there is a Long Description field
here, and if you have an image that is a
| | 02:55 | pie chart or a graph, or something that
contains some more information of that,
| | 02:58 | then you can enter in to your alt text.
| | 03:00 | You can point that to another file that
has descriptive information about that image.
| | 03:05 | All right. I am going to go ahead and
click OK, and sure enough, there is my image.
| | 03:10 | We need to make sure that the
text is going to flow around it.
| | 03:12 | So let's apply a Class Style to that.
| | 03:14 | Select the image, and the Class
pulldown menu in the Properties Inspector is
| | 03:18 | right here on the right-hand side.
| | 03:20 | Grab that, and we want to use one of
the classes that is up top, articleImage.
| | 03:24 | That is going to format that, so
that the text wraps around it. Perfect!
| | 03:30 | More importantly, take a look in
the Properties Inspector right here.
| | 03:33 | This is our alt text, The
Great State of California.
| | 03:36 | So if you for some reason forgot, or if
you just change your mind, and you want
| | 03:40 | to change what's typed in there, at
any point in the cycle, you can select an
| | 03:44 | image and go ahead and enter in
that alt text for it. Okay.
| | 03:48 | So I mean that was pretty
easy, but you know what?
| | 03:50 | Even with Accessibility Preferences
turned on, you could ignore them, and you
| | 03:54 | could just continue to place your images
right on the page without entering any alt text.
| | 03:58 | But with this dialog prompt, that the
Preference is giving us, you're less
| | 04:02 | likely to forget or ignore
this extremely important property.
| | 04:05 | Now, it may seem annoying at first, and hey!
| | 04:08 | I'll even grant that it might seem
annoying from then on, but the truth is if
| | 04:12 | it's going to help me create more
accessible Web sites, it is definitely worth
| | 04:17 | the brief intrusion into my creative process.
| | Collapse this transcript |
| Setting external image editing preferences| 00:00 | One of the nice things about
working with Dreamweaver is how seamlessly
| | 00:03 | it integrates with other Creative Suite
applications such as Photoshop and Fireworks.
| | 00:08 | When working with the images for your
site, it's inevitable that you're going to
| | 00:11 | occasionally need to tweak or edit those images.
| | 00:14 | Dreamweaver makes editing
your images remarkably easy.
| | 00:17 | Often all that is required is a single
click, which will then open your image in
| | 00:21 | your favorite image editing software.
| | 00:23 | So how does Dreamweaver know which
program to use when editing your images?
| | 00:27 | In this movie, we are going to take a
look at how you can set exactly which
| | 00:31 | programs Dreamweaver uses
for image editing purposes.
| | 00:34 | So I have the tours.htm opened here.
| | 00:37 | And the first thing we need to go
take a look at are our Preferences.
| | 00:40 | So I am going to go up to Edit > Preferences.
| | 00:42 | Of course, if you are on the Mac,
you are going to go to Dreamweaver and
| | 00:44 | choose Preferences.
| | 00:46 | The category that we are
looking for is File Types/Editors.
| | 00:48 | Now what you are going to see down
here in the lower left-hand corner of this
| | 00:52 | pane is a list of extensions.
| | 00:55 | This obviously relates to more than
just images, but for this chapter that is
| | 00:58 | exactly what we're interested in.
| | 00:59 | You'll notice for PNGs, for example,
that Fireworks and Photoshop are listed,
| | 01:03 | but Photoshop is listed as
being the primary editing software.
| | 01:06 | <
|
|
