IntroductionWelcome| 00:00 | (Music playing.)
| | 00:06 | Hello! I'm Paul Trani and welcome to
Creating a First Web Site with Dreamweaver CS4.
| | 00:11 | Now have you ever wanted to create
content and then post it on the web, but
| | 00:16 | really weren't sure where to begin or
have you ever wanted to make a full-blown
| | 00:20 | website experience with dynamic content?
| | 00:23 | Well, you've come to the right place.
| | 00:26 | In this title, I'm going to be walking
you through the creation of a website
| | 00:29 | from a concept, clear to
publishing live all using Dreamweaver.
| | 00:34 | I'll cover everything you need to know
and do including designing and setting up
| | 00:39 | your websites, creating various pages,
linking those web pages together, as well
| | 00:45 | as even adding a photo gallery.
| | 00:47 | You'll also see how to create a
contact form so people can get in touch with
| | 00:51 | you to tell you how great your site is.
| | 00:54 | Now let's start creating a
first website with Dreamweaver CS4.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium member of the
lynda.com Online Training Library or if
| | 00:05 | you are watching this tutorial on a disc,
you have access to all the exercise files
| | 00:10 | used throughout this title.
| | 00:12 | Now the exercise files are in an
Exercise Files folder and for some files
| | 00:17 | I have saved a final version as
well just to kind of help you along.
| | 00:22 | So you can really open it at
your leisure to see what we did.
| | 00:26 | Now if you are a monthly or annual
subscriber to lynda.com, you don't have
| | 00:30 | access to the exercise files, but you
can just as easily follow along with your work.
| | Collapse this transcript |
| Overview| 00:01 | I would like to start of by giving you
an overview of the websites that we'll
| | 00:05 | build over the course of this title.
| | 00:08 | And really this is the site and it does
have, if I refresh this page, you can see
| | 00:13 | this Flash integrated at the top.
| | 00:15 | There are some images, some text in
here including some external links to
| | 00:22 | Follow Jane on Twitter.
| | 00:23 | There is also some navigation
allowing me to jump to other pages.
| | 00:27 | On this About Jane Doe page there's this
Spry Accordion, allowing me to view more
| | 00:32 | data without going to a different page.
| | 00:35 | So that works pretty well.
| | 00:36 | There is also a Portfolio section.
| | 00:39 | So this comes in really handy,
the ability to display large images in an
| | 00:44 | effective way and kind of
toggle all through this web gallery.
| | 00:48 | It's a Lightroom Gallery.
| | 00:51 | And no website would be
complete without a contact form.
| | 00:55 | So of course, you are able to drop in
your emails and some comments and hit the
| | 00:59 | Submit button and that
data will be sent as well.
| | 01:02 | So this is a really effective site,
and not only is it structurally sound and
| | 01:07 | technically sound, but it has a good
flow to it as far as design fundamentals.
| | 01:13 | But if this site in particular isn't
really your style, I have included some
| | 01:18 | bonus sites as well.
| | 01:20 | So if you want to go with something
little more designer-y, I guess, there is
| | 01:24 | that included and again
it's fully functional as well.
| | 01:29 | And maybe you want to produce
something entirely different, you can do that.
| | 01:35 | Again, with the same data and pretty
much based on what you'll earn over the
| | 01:38 | course of this title, you will be able
to put together any site you'd like to
| | 01:44 | based on these fundamentals.
| | 01:46 | Really it's an overview and it gives
you the ability to create a structurally
| | 01:51 | sound site and now really is your
chance to take it to the next level.
| | 01:57 | So that should give you a good idea
not only technically what we're going to create,
| | 02:01 | but also you can experience
sort of the flexibility of what can be done
| | 02:06 | in Dreamweaver as you saw with the bonus sites.
| | 02:09 | So it's going to be a lot of fun.
| | 02:10 | Let's go ahead and started.
| | Collapse this transcript |
|
|
1. Understanding Web SitesUnderstanding how web sites work| 00:00 | So I would like to start of by giving an
overview how websites and the web in general works.
| | 00:06 | So this is a tall order, but
I'm just going to simplify it.
| | 00:10 | In general, the web is really made
up of a bunch of websites and you are
| | 00:15 | probably asking yourself, what is a website?
| | 00:16 | A website is just a collection of
related web pages that are linked together and
| | 00:21 | viewed on Internet through a browser.
| | 00:23 | These web pages could have various
items on them, whether they are images,
| | 00:27 | interactive content, even a video.
| | 00:29 | But in general, there are web pages
that are linked together in one way, shape
| | 00:34 | or form and viewable through a web browser.
| | 00:37 | But if we take a closer look at a
webpage, what a page is, is really a document
| | 00:43 | written in plain text with formatting
applied to it and this formatting is
| | 00:48 | called Hyper Text Markup Language. HTML.
| | 00:52 | So what this HTML does is
tell how to display that text.
| | 00:56 | It can not only tell you how to display
text, but also to display images, again,
| | 01:01 | interactive content, or even
videos, if you want to as well.
| | 01:06 | But again, it's just a sort of a plain
text with formatting applied, allowing you
| | 01:10 | to extend the experience of the
page visually and as well as adding
| | 01:14 | additional content.
| | 01:16 | The great thing about Dreamweaver is
Dreamweaver does a lot of this for us.
| | 01:20 | So I could know nothing about HTML, to
be honest, and I can create everything in
| | 01:26 | Dreamweaver, if I want to,
because it really makes it possible for
| | 01:29 | non-programmers or coders to
quickly create robust web pages and sites.
| | 01:34 | Again, Dreamweaver does a lot of the
work. I just tell it what to do and now it
| | 01:39 | magically comes a website or webpage.
| | 01:43 | Once this webpage is created, I can go
ahead and take all those web pages and
| | 01:48 | the ancillary content and upload it to
what's called the web server. All that
| | 01:53 | a web server is a computer that's
connected to an Internet, so big word, but
| | 01:58 | it's just a computer that's
connected to the Internet.
| | 02:01 | The website is then accessed by web
address usually made through a web browser.
| | 02:06 | So the user will type in the web
address or do a search through Google and that
| | 02:12 | request is then made to the web server,
which then sure enough serves up that
| | 02:17 | requested webpage and
displays it in a web browser.
| | 02:21 | The great thing is Dreamweaver really
helps us build these web pages and then
| | 02:24 | upload them to the web server,
so a user can access them.
| | Collapse this transcript |
| Planning a successful web site | 00:00 | To increase the chances of your site
being a success, it helps to do some
| | 00:04 | planning in advance.
| | 00:07 | Of course, planning is all about
determining what my goal is for the website.
| | 00:13 | For example, my goal might be to
tell others about Jane Doe, the travel
| | 00:16 | writer and photographer.
| | 00:17 | So I need to collect that content that
will be on the website that will tell
| | 00:22 | others about Jane Doe.
| | 00:24 | This content that I have collected that
I want to share with others, I need to
| | 00:28 | make sure is appropriate for the audience.
| | 00:30 | It has to give a good impression,
it can be found through search engine such as
| | 00:35 | Google and again appropriate for
the people I want to see the sites.
| | 00:39 | So again that is going to give me some
appropriate content, so it might be a
| | 00:43 | homepage that helps me a little bit
about Jane Doe photography and About page,
| | 00:48 | there might be a Portfolio page that
might show off some of her work as well as
| | 00:51 | a Contact page allowing the
user to get in touch with Jane Doe.
| | 00:56 | So that's really the result of my
business goals is some what of a site map,
| | 01:00 | if you will and not only that, but a web
address. An idea of the web address, so
| | 01:05 | users can find the site.
| | 01:08 | Now there is also is an audience that
has certain goals as well and often it's
| | 01:12 | usually to find, learn, or do something.
| | 01:16 | So they are out on the web, they are
trying to find things, they are trying to
| | 01:19 | learn certain things, and even do
certain things as well, and we want to make
| | 01:22 | sure that they can do that on our site.
| | 01:25 | So for instance, is the
site viewable and accessible?
| | 01:29 | So can they find the site?
| | 01:31 | Once they find it, is it easy to use?
| | 01:34 | Does it deliver the
information that's requested?
| | 01:36 | So if they click on the About link, are
they going to see About Jane Doe on that page?
| | 01:41 | So we'll want to be really
straightforward with what the user expects, make sure
| | 01:46 | that content is useful to them, and of
course is appropriate for that audience.
| | 01:51 | So let's make it easy on the audience
to keep them on our site to learn about
| | 01:56 | Jane Doe in this case.
| | 01:58 | Really, that is the result of all
this appropriate and accessible content.
| | 02:02 | The content might be edited a little bit,
but it's really just appropriate for the web,
| | 02:06 | for the audience,
and is available for them.
| | 02:10 | The result of that is also a viewable
site, and this is really important, which
| | 02:14 | is the technical requirement.
| | 02:16 | So does the site fit on the user's screen
or do they have to scroll to get to content?
| | 02:21 | Is the content compatible with
the major browsers out there?
| | 02:25 | Well, we need to do some
testing to make sure that happens.
| | 02:29 | Do pages download quickly?
| | 02:31 | So when they hit a page, do they see
it immediately or they have to wait?
| | 02:34 | Even before that, is it optimized for search engines?
| | 02:37 | So if they type in Jane Doe
Photography, does the site come up?
| | 02:41 | But all these technical requirements we
need to keep in mind as we move forward
| | 02:44 | in designing our site, because all
decisions should really be made on this,
| | 02:49 | what our user is trying to do, is it
accessible, as well as what we are trying to do,
| | 02:54 | which is promote sort of a product, a
business, or to tell others about someone
| | 02:59 | such as Jane Doe Photography.
| | 03:00 | We need to keep this in mind, moving
forward everything decision we need to make.
| | Collapse this transcript |
| Designing the web site| 00:01 | Before you start creating anything in
Dreamweaver, it's really helpful to have a
| | 00:04 | clear idea of the design
and structure of your site.
| | 00:08 | Really, any design decision should
be made in light of your business
| | 00:12 | and audience goals.
| | 00:13 | So I'm going to keep that in mind as I design.
| | 00:16 | My goal is to talk about and
display content about Jane Doe as a travel
| | 00:20 | writer and photographer.
| | 00:21 | So I'm going to take right information
and I'm going to be able to develop a site
| | 00:26 | map from that information.
| | 00:28 | So here I'm going to have a Home page, an
About page, a Portfolio page and a Contact page.
| | 00:33 | The Portfolio page as you can see is
going to have photos of different places,
| | 00:37 | so that's pretty good.
| | 00:38 | The Home page is going to
link out to an external site.
| | 00:41 | So when I'm designing a website, I'm
going to need the content first and
| | 00:45 | foremost and this is the
content that I'm going to work from.
| | 00:48 | The next step is to determine the navigation.
| | 00:51 | So how would all these pages or all
this content link together, how is it
| | 00:56 | associated together and that's going
to help me come up with the navigation.
| | 01:00 | But I want to make sure it's easy to
learn, make sure it's really consistent
| | 01:03 | across all the pages.
| | 01:05 | I want to clearly differentiate
hyperlinks or buttons from the content itself.
| | 01:10 | So if there is a body copy and I have
a link in the body copy, I want to make
| | 01:13 | sure that links looks different.
| | 01:15 | I want to provide feedback so when
you rollover say for instance the Home button,
| | 01:18 | maybe it changes colors or something,
but this user feedback is really helpful.
| | 01:23 | I want to really have minimal
clicks to get from one place to another.
| | 01:26 | So we don't want the user to do a whole
lot of work when it comes to finding content.
| | 01:32 | Then of course, grouping
navigation into logical units.
| | 01:35 | In this case, it's not a very robust site,
so it's pretty straightforward there.
| | 01:39 | Some other considerations to also
understand and to get familiar with is the
| | 01:44 | hierarchy of information.
| | 01:46 | Is it perfectly clear, is there some
sort of header line and then is there body
| | 01:51 | copy underneath it or do
we have three header lines?
| | 01:55 | We need to make sure we have
a hierarchy of information.
| | 01:58 | We want to make sure the text
is legible and easy to read.
| | 02:00 | I want to make sure my font is
consistent as well across the site and I want
| | 02:06 | each page to look like an
entirely different site.
| | 02:09 | I want to keep all the body copy bite-
sized, because in general people spend a
| | 02:14 | probably less than 30 seconds on a
webpage and concerning this copy and
| | 02:19 | the content in general, I'm going to
make sure these pages are potentially
| | 02:22 | printer-friendly, in case they do
decide to print out this content.
| | 02:25 | Then I want to make sure critical
content is above the fold and that means they
| | 02:31 | don't have to scroll down for
critical information. That is, the fold.
| | 02:35 | The fold is the information
they would have to scroll to get to.
| | 02:38 | So I'm going to take all of that
information into consideration when I design my site
| | 02:44 | and really what you see here is a
sketch of what the site might potentially
| | 02:49 | flow like for the most part.
| | 02:51 | You can see that I want to make sure
this site fits on somebody's browser and on
| | 02:57 | their monitor effectively.
| | 02:59 | So I don't want to make my site
maybe more than 1,000 pixels wide.
| | 03:05 | So if you are designing this in
Photoshop, you probably just want to make a
| | 03:09 | new document and make your canvas,
your document size, about 1,000 pixels wide
| | 03:15 | and then the height will be about 600
pixels high before they have to start scrolling.
| | 03:20 | Again, you can use any software program
you are comfortable with to design the site
| | 03:25 | and you can use Photoshop, you
can use Fireworks, whatever you want, but
| | 03:29 | the result should follow this
sketch that is outlined here.
| | 03:33 | So a site that's going to have sort
of the title at the top. I have defined
| | 03:38 | the page that you are on as well as
the navigation is of course near the top
| | 03:42 | of the page, grouped logically, and the body
copy is legible and for the most part bite-sized.
| | 03:49 | It's getting a little lengthy in
there and of course the links are visually
| | 03:54 | different from the copy.
| | 03:55 | So really based on all of these design
fundamentals, if you will, as well as
| | 04:00 | sort of web fundamentals, you are
able to come up with a really good design
| | 04:03 | that's going to be really effective
and appropriate for your audience.
| | Collapse this transcript |
|
|
2. Creating Web PagesUnderstanding Dreamweaver and HTML| 00:01 | Before you start out in Dreamweaver it's
helpful to have a good understanding of
| | 00:05 | Dreamweaver as well as HTML,
which is the backbone of Dreamweaver.
| | 00:10 | Well first off, what is Dreamweaver?
| | 00:12 | Well, it's a web development
application that makes it really easy for anyone
| | 00:17 | regardless of your background to
create robust web pages and sites quickly.
| | 00:22 | So, whether you are a programmer and
like to sort of write code by hand you can
| | 00:27 | do that in Dreamweaver, or if you want
to create everything visually, you can
| | 00:31 | also do that in Dreamweaver, but the
end result is web pages and websites made
| | 00:35 | quickly all in Dreamweaver.
| | 00:38 | And again Dreamweaver easily creates web
content using HTML but you can also use
| | 00:43 | other leading web technologies if you want to.
| | 00:46 | Dreamweaver will give you the tools to
write this code very easily regardless of
| | 00:52 | the technology you are using.
| | 00:53 | But most importantly, it really
helps us to make HTML content.
| | 00:58 | First off, what is HTML content?
| | 01:00 | Well it's Hypertext Markup
Language that really describes web pages.
| | 01:05 | Okay so it will determine or
decide kind of how to display text.
| | 01:10 | So it's a combination of
markup tags and plain text.
| | 01:15 | And that combination looks like this.
| | 01:17 | There are some HTML tags.
| | 01:19 | So in HTML page, I might have a tag
that works like HTML with sort of angle
| | 01:25 | brackets on either side and that
makes up a tag and tags come in pairs.
| | 01:29 | So, if I wanted to add a title to a
page, I would have this pair of tags on
| | 01:34 | either side of the title of my page,
just like it shows in this example.
| | 01:39 | So, to display a page title between the
HTML title tags, I would have the title
| | 01:46 | for the page as well as this h1, which
is the header or heading, and then the p
| | 01:51 | is for the paragraph.
| | 01:53 | Again HTML tags and
content between those two tags.
| | 01:57 | And that's the format of HTML.
| | 02:00 | This HTML is then taken and
then it's rendered in a browser.
| | 02:03 | So the browsers know what to do with
these tags and how to display the content
| | 02:07 | between those tags, to really give you
sort of the nice appearance which you
| | 02:11 | usually see on a website.
| | 02:12 | It's all driven by HTML.
| | 02:16 | Now, there are some sort of common basic
HTML tags to keep in mind, such as like
| | 02:21 | I mention, the Title tag which will
give me the title of the web page.
| | 02:25 | There will be certain
section headings, h1 to h6.
| | 02:29 | So again the largest one on the page is
going to be h1, this smallest heading is
| | 02:35 | going to be h6, if I have a smaller
handing, and then most of the content is
| | 02:40 | probably going to be Paragraph text.
| | 02:42 | But as you can see there's plenty of
HTML tags that you can go ahead and
| | 02:46 | reference to display your text correctly.
| | 02:48 | So, you take those tags and you put
them on an HTML document, which is
| | 02:53 | structured into three parts.
| | 02:55 | We have the Doctype at the top, which
Dreamweaver writes this for me already but
| | 03:00 | it really tells the browser
how to interpret this HTML page.
| | 03:05 | So there is also the Head, which is
really the non-visual content that's
| | 03:10 | loaded before the Body.
| | 03:11 | So it's going to be sort of a
reference for the actual certain styles of how
| | 03:15 | to display the Body content or even
some additional functionality might be in
| | 03:20 | the Head of the HTML.
| | 03:23 | And really there is the Body copy,
which is the bulk of your web page, which is
| | 03:27 | all of the content for that page that
displayed potentially based on what's in
| | 03:32 | the Head part of the HTML page.
| | 03:34 | But that's the basic structure and
what's again nice is the fact that
| | 03:38 | Dreamweaver writes all of this for me.
| | 03:40 | So, I might not even know that this
is going on in the background because
| | 03:44 | Dreamweaver does all of this work for me,
but it's good to know what's going on
| | 03:48 | behind the scenes as you move forward.
| | 03:51 | And again Dreamweaver does all the work.
| | 03:53 | Whether it's a web page or an entire website,
it can really get you up to speed quickly.
| | Collapse this transcript |
| Reviewing the Dreamweaver workspace| 00:00 | Now I'm going to start out in
Dreamweaver by creating an HTML page and then
| | 00:05 | really just getting familiar
with the Dreamweaver workspace.
| | 00:09 | So, as you can see from the Welcome
Screen I can create many different types of
| | 00:14 | documents, and most importantly
I can create an HTML document.
| | 00:17 | So, I'm going to go ahead and select
HTML and what happens is it shows me this
| | 00:23 | untitled HTML page and
it shows to me in Split View.
| | 00:27 | So here by default Dreamweaver is
going to give you the Split View and what
| | 00:31 | it's doing is it's showing you the Code View
as well as the Design View at the same time.
| | 00:36 | So I can select Code to see all of the
code if there was more or I can select Design.
| | 00:42 | I can work in either one of those views.
| | 00:45 | I personally like Split View and I'll
show exactly why, because even if I'm
| | 00:49 | working in Design view, if I type
something in, 'My first web page,'
| | 00:56 | it will appear also in my Code view.
| | 00:58 | So it really gives me an understanding
of what's going on behind the scenes and
| | 01:03 | conversely I can go ahead and change
that line, give that an exclamation point
| | 01:08 | and it changes in my Design View as well.
| | 01:10 | So you can work in either space but
I encourage you to use the Split View
| | 01:15 | because it's going to be most helpful in
sort of seeing what's going on under the hood.
| | 01:20 | So same thing for instance the title.
I can change this page to Jane Doe
| | 01:25 | Photographer and Travel Writer like that,
and as I hit Enter, you can see that it
| | 01:34 | puts that as the title
right in here in my Code view.
| | 01:37 | So, that's how Dreamweaver is set up between
say Code view and Design view or Split view.
| | 01:42 | Okay. And that's how you are
going to able to see an HTML page.
| | 01:47 | So, let me click the Design View and
let's take a look at some of these other panels,
| | 01:50 | because what we also have going
on here are various panels, usually on
| | 01:55 | the right side in the lower portion of
the screen and I can take any of these
| | 02:00 | panels and pull them out and
display them separately if I want to.
| | 02:04 | And I can just take that
same panel and nest it back in.
| | 02:07 | So this is pretty flexible and
it's like other Adobe programs.
| | 02:11 | It works the same way.
| | 02:12 | If I wanted to expand out the Database
panel, I can just click in that gray bar area
| | 02:17 | and it will expand that out.
| | 02:20 | Say for instance if this panel kind of
scares me a little bit because it is all
| | 02:23 | about databases, maybe I can
pull that out and even close it.
| | 02:27 | So it's looking more friendly but
really what I want to do is I want to change
| | 02:32 | my view to something more appropriate.
| | 02:35 | Since I'm a designer, I might want
to go to my Application Bar and select
| | 02:40 | Designer, to show what a designer's
workspace would look like and this is
| | 02:45 | exactly what it would look like.
| | 02:47 | I can also go to Coder.
| | 02:49 | You can see what a coder would want to
display and the panels they would want to use.
| | 02:53 | As you can see there are lots of
different options that I can go ahead and choose.
| | 02:57 | And again I can go back to Classic and
I can modify this more according to kind
| | 03:02 | of how I'm going to work.
| | 03:04 | Really what I want to do is I
want to focus on three panels.
| | 03:08 | I want to have my CSS Styles panel
because I'm going to use that a lot.
| | 03:12 | I'm also going to have my Files panel
just below that and then below the page
| | 03:16 | I'm going to have this Properties panel.
| | 03:18 | So, this is a really good and clean setup.
| | 03:22 | Also notice at the top,
this is why it's called classic.
| | 03:26 | I have lots of different options for
adding content to HTML page, all grouped
| | 03:32 | and again this is how it shows up in CS3,
so it might be a little more familiar
| | 03:36 | if you are using Dreamweaver CS3.
| | 03:39 | But really it's no different
from any other CS4 program.
| | 03:43 | The panels work the same.
| | 03:44 | The big thing to understand is
using the layouts, the different views.
| | 03:50 | And I'm going to encourage you to
always use the Split View, so you can not
| | 03:54 | only see what you are designing but see
the code that's going on sort of under
| | 03:59 | the hood, if you will.
| | Collapse this transcript |
| Creating web pages| 00:00 | Dreamweaver makes it easy to create many
web pages with the basic HTML structure
| | 00:05 | already in place and I can easily do
that from the Welcome Screen, the middle column,
| | 00:11 | I can create a new HTML document.
| | 00:16 | So, I have selected that and we'll go
ahead and create an HTML document and I'm
| | 00:21 | going to make sure the Split Layout
View is shown and with this new document,
| | 00:27 | I can go ahead and give it a title,
Jane Doe Photography, just like that.
| | 00:33 | I can also give it some page content.
| | 00:36 | This is the homepage.
| | 00:39 | That's what this page is going to be.
| | 00:41 | Then I can even go ahead and save this
page to my Desktop and I'm just going to
| | 00:47 | call this Index HTML and place it on my Desktop.
| | 00:51 | So, that's a quick and dirty way to
make an HTML page but as you can see,
| | 00:56 | I can't get to that Welcome Screen anymore.
| | 00:59 | What I can do is go to File > New.
| | 01:02 | From this New Document dialog box,
I can make sure I'm creating a new HTML
| | 01:09 | page with no layouts.
| | 01:12 | I can just click Create.
| | 01:14 | It does the same thing, so I have
Untitled-2 and I can call this About Jane Doe.
| | 01:20 | So, I'm just going to make a series of pages.
| | 01:24 | This is the About page. I'm going to
save this page as well as About, save it,
| | 01:32 | and now I want to make two more as well.
| | 01:34 | So, I'm going to go to File > New
and each time I do this, I can just
| | 01:39 | double-check for instance the DocType,
which is what it's adding, but for the most part,
| | 01:44 | I don't want to really
worry about any of this stuff.
| | 01:47 | I'm just creating new blank HTML pages.
| | 01:50 | So, for this one, this is going to be
the Portfolio of Jane Doe and this is the
| | 01:57 | Portfolio page, so I'm slowly
setting up my site. Save it on my Desktop.
| | 02:06 | Portfolio and lastly, I'm going to go to File
> New and make sure my layout is set to None.
| | 02:14 | Click Create and make this my Contact Jane Doe.
| | 02:21 | This is my Contact page just like that,
and again, I'll go ahead and save it out.
| | 02:28 | Just on my Desktop is fine. Contact.
| | 02:32 | Save that and there are my four pages.
| | 02:36 | So, if I take a look, if I hide
Dreamweaver, there are my four HTML pages and
| | 02:42 | really at this point, the next step
would be to start adding a content to
| | 02:46 | these HTML pages.
| | Collapse this transcript |
| Adding text content| 00:01 | Dreamweaver not only allows you to
create a webpage from scratch by keying in
| | 00:05 | all the information into a blank page.
| | 00:08 | But what you can also do is copy and paste
text and even images from other locations.
| | 00:14 | For instance, here I have Microsoft Word opened.
| | 00:17 | So, you could have Word open.
| | 00:18 | So, you could have a Word document and
maybe this lists out all the content.
| | 00:20 | So, I have a Home page, About
page content, Portfolio and Contact.
| | 00:25 | Really I want to transfer all of
this information into various web pages.
| | 00:29 | So, I can easily select this text.
| | 00:33 | Go to Edit and copy it and I can go
into Dreamweaver and I know that for my homepage,
| | 00:40 | it's going to be my index.html,
so I'm going to double-click on that.
| | 00:44 | And here I'm in my index.html page.
I can delete this text that's currently there
| | 00:49 | and I can go to Edit and I want
to select Paste Special, just so you can
| | 00:55 | see what's going on and our different options.
| | 00:58 | Because you are given ability to
just paste the text only, that would be
| | 01:03 | appropriate if I didn't want to
paste in any of the formatting.
| | 01:07 | But notice I can paste in text
with structure and even text with
| | 01:11 | basic formatting as well.
| | 01:13 | So again, if I have bold, any italics,
any sort of header text that will paste in
| | 01:19 | and even there is full formatting.
| | 01:21 | But again, I'm going to paste in
this text with basic formatting and
| | 01:26 | sure enough, there it is.
| | 01:29 | In fact, let me go to Design view.
| | 01:31 | You can see here's my text.
| | 01:34 | What this is, is it pasted in this text
as Heading 1 because that's what it was
| | 01:40 | previously formatted as in that Word
document. This line is bold text, or strong,
| | 01:49 | and then there is some italics in here as well.
| | 01:52 | So, let me go to Split View.
| | 01:53 | You can see that say for
instance Los Angeles Times has emphasis.
| | 02:00 | So that's this tag.
| | 02:01 | So, copying and pasting from other
programs, you can maintain the
| | 02:06 | basic formatting of that text and
really it saves me a lot of time because
| | 02:11 | most of this work is done.
| | 02:13 | So, that's looking pretty darn good and
I want to move on to, say for instance,
| | 02:19 | the About page, which currently doesn't
have anything in it, and in fact,
| | 02:23 | I'll just delete that text there and I'll
Hide Dreamweaver and move on down the line.
| | 02:30 | So again, I can select all of this text,
copy it and go into Dreamweaver and
| | 02:38 | paste this text as well.
| | 02:40 | It gives me the same formatting.
| | 02:43 | Everything is looking pretty darn good.
| | 02:44 | Let me go to my portfolio page
and again, I can Hide Dreamweaver.
| | 02:51 | Go out to that section, which is a lot
shorter, but I can take this content and
| | 02:58 | each time I paste it, it's applying my
last option that I have selected here.
| | 03:04 | So, it's always going to paste with
structure plus basic formatting. And perfect.
| | 03:10 | It's looking pretty good so far.
| | 03:13 | And really the whole goal
is to get this content in here.
| | 03:16 | This contact page for instance is
pretty interesting because there is a table
| | 03:20 | with data in it as well.
| | 03:22 | So I can copy all of that and if I'm go
into Dreamweaver to my Contact page, I can
| | 03:30 | paste that in and sure enough,
it pastes it in as a table as well.
| | 03:35 | So, again you can take content from
other sources, whether it's Word or
| | 03:39 | it's your email or any other sort of
format, you can copy and paste it into
| | 03:43 | Dreamweaver and largely for the most
part, keep that formatting in place.
| | 03:48 | So, and really this is basic formatting.
It converts it to HTML formatting.
| | 03:54 | So as we can see even in here we have
some paragraph text, but what I can even do
| | 04:00 | is say for instance if I want to apply
additional formatting, I can go ahead and
| | 04:04 | do that by selecting, say, Vogue Australia.
| | 04:07 | If I want that publication to be in
italics or to give it emphasis, I can select it
| | 04:12 | and then in my Properties panel under
HTML, I can go ahead and make it italics.
| | 04:19 | So, sure enough, it gives it
emphasis and it looks pretty good.
| | 04:23 | So again, whether I'm copying and
pasting text in, I can always go in and apply
| | 04:28 | additional formatting as well.
| | 04:30 | And really the next step is to apply
even more formatting to this page but
| | 04:34 | in general, the content exists and
you can really start to see my site come together.
| | Collapse this transcript |
| Linking to web pages and sites| 00:01 | So once you have some content on your
HTML pages, you really want to start
| | 00:06 | linking these pages together.
| | 00:07 | So, what I want to do now is I want to create
a quick text navigation bar, made up of HTML text.
| | 00:14 | And I also want to link out to
a website externally as well.
| | 00:18 | So, right up here under Home
page, I want to type in Home.
| | 00:23 | So, I'm just creating text that is
then going to link to the different pages.
| | 00:28 | So, I have typed in Home.
| | 00:29 | I want a divider between the Home link
and the Next link, which is the About link.
| | 00:35 | So, I'm just going to use this Pipe key,
so I'm going to select Shift and then
| | 00:40 | hit the Backslash key.
| | 00:41 | It will give you that sort of pipe divider,
which works out pretty well. So, Home About.
| | 00:48 | Again, Shift+Backslash will
give you that pipe. Portfolio.
| | 00:52 | Shift+Backslash and then Contact.
| | 00:56 | So, as you can see, here are my four
different pages and I want them to jump to
| | 01:01 | these pages that currently are already
open but more importantly I want, say for
| | 01:07 | instance, the About page to jump to about HTML.
| | 01:11 | So, in order to link any text to
something else, all you need to do is select it
| | 01:15 | and I'm just going to double-click on
that word and it will select the whole word.
| | 01:19 | And then in the Properties panel,
under HTML, I can go ahead and link to that page
| | 01:25 | and again I want to
link to this About page.
| | 01:29 | So, I really like the
ability to point to a file.
| | 01:32 | So, I'm going to select this Target Looking
icon and you can see it gives me this arrow.
| | 01:38 | This arrow will allow me to click-and-
drag and point to that specific file and
| | 01:44 | then when I release, it points to that file.
| | 01:47 | In fact it says About HTML.
| | 01:49 | Look what it gives me.
| | 01:52 | It gives me this text. It now blue.
| | 01:54 | It has an underline, which is
clearly the signs of a link.
| | 01:58 | So, that's working out well.
| | 02:00 | Portfolio again, double-clicking on that
word, I can use my Point to File button
| | 02:06 | and point to Portfolio like that and Contact.
| | 02:11 | Double-click on that word and maybe
instead of using the Point to File, I can
| | 02:17 | always browse to that file as well.
| | 02:20 | So, browse, 05 Begin, Contact.
| | 02:24 | Okay, so that's exactly what I
want to point to. The contact HTML.
| | 02:29 | Click Choose and there it is.
| | 02:32 | Well, okay lastly the Home word,
I'm going to link that to the index.html
| | 02:38 | because that's my homepage.
| | 02:40 | Select Choose and there is my navigation.
| | 02:43 | So, well, you might be curious as to
whether this is working or not and in order
| | 02:48 | to see this working, I need
to preview it in a browser.
| | 02:51 | So, that's my next step.
| | 02:54 | So, I'm going to go to File and I'm
going save this page first and then I'm
| | 02:59 | going to go to File > Preview in
browser and I'll preview it in Firefox but
| | 03:05 | you can select any browser you have in
here and what it will do is it will launch
| | 03:10 | that browser with that page in it.
| | 03:12 | So, you can see that it is the index.html page.
| | 03:16 | It gives me my links.
| | 03:17 | I get the little hand icon.
| | 03:19 | When I roll over any one of these links and
if I click on it, it will jump to that page.
| | 03:24 | So, here I am on the about.html.
| | 03:26 | I can click the Back browser
button and check all of these out.
| | 03:31 | And look what starts to happen.
| | 03:32 | This is the visited link color.
| | 03:34 | It is by default this purple.
| | 03:36 | So, I visited all these pages
already and it's just this last one.
| | 03:40 | In fact, if I click on it, look what happens.
| | 03:43 | It turns red and then jumps to that page.
| | 03:46 | So, again, really quickly I was able to
add that navigation, pretty effectively
| | 03:51 | for the most part and again it's just
really a matter if I go back into the
| | 03:55 | Dreamweaver, of linking those files and
pointing to those particular files, so
| | 04:00 | they are sort of linked together.
| | 04:02 | That's for making sort of a website,
sort of this linking intertwined pages.
| | 04:07 | In this case, down below,
I have this Follow Jane on Twitter.
| | 04:10 | And what I want to do here is I want
this text to jump out to our Twitter page.
| | 04:16 | So, with that text selected, I can go
down to this Link input field and I can go
| | 04:22 | ahead and type in that web address.
| | 04:27 | In this case http://twitter.com/
janedoephoto and then hit Return. There it is.
| | 04:38 | And let's go ahead and save this file
and preview it in our browser again.
| | 04:44 | Now if I click on Follow Jane on Twitter,
sure enough her Twitter page opens up just fine.
| | 04:52 | In some cases, I might want this page
to open up in a new browser window and
| | 04:58 | I can easily control that.
| | 05:00 | In fact, if I close those windows and
go back to Dreamweaver, I can select this text
| | 05:05 | and right next to where I typed
in the web address, I can select this
| | 05:11 | Target and I can open it up in a blank page.
| | 05:15 | So, this is sort of a best practice.
| | 05:17 | If you are jumping sort of to a different
website, to open that up in a blank window.
| | 05:22 | So, that's what I have just done there.
| | 05:24 | I'm going to click save and I'm
going to preview it in a browser.
| | 05:29 | And if I click Follow Jane on Twitter,
it opens up in a new browser window
| | 05:33 | in this separate tab.
| | 05:35 | So, they never quite lead my site,
which is exactly what I want.
| | 05:38 | I want them to open up that new browser
window and again, behind the scenes or
| | 05:43 | under the hood, I can click Split View
and you can really start to see what's
| | 05:47 | going on and what Dreamweaver does, which
is creates this href, this reference to
| | 05:54 | this page and then targets the new window.
| | 05:57 | But again, it's code I didn't have to write.
| | 05:59 | Dreamweaver did all of this for me
and Dreamweaver does a good job of
| | 06:04 | effortlessly writing all this code for me.
| | Collapse this transcript |
|
|
3. Stylizing ContentApplying style to content| 00:00 | Once you've all the text content you
want on the page, you can then start to
| | 00:05 | style it, including changing the font.
| | 00:08 | Maybe I want to change the background.
| | 00:10 | Maybe I want to put an image in the background.
| | 00:12 | Well, that's really the next step is
applying a basic styling to this page.
| | 00:16 | And this index_html page I can apply
all of those appearance styles to it using
| | 00:23 | the Page Properties button.
| | 00:25 | So in the Properties panel down at the
bottom, if I just click Page Properties,
| | 00:29 | it will open up that Page Properties dialog box.
| | 00:31 | And the first thing I'd like to do in the
Appearance section is change the page font.
| | 00:36 | So I can change the page font to any
sort of system font and again these are the
| | 00:41 | standard fonts that 90+% of the
computers out there have and in this case I'm
| | 00:47 | going to change it to an Arial or Helvetica.
| | 00:49 | So I can change the page font, I can
change the color of the text, I can even
| | 00:55 | change the Background color, and I'll
change it to a medium blue and click Apply,
| | 01:01 | just to see how that's going to look.
| | 01:04 | And that makes a world of difference in
and of itself with just those three changes.
| | 01:09 | But again, I can take this to the
max level by adding abackground image.
| | 01:12 | So that's what I want to do.
| | 01:13 | I'm going to click Browse and I'm
going to go into the images folder and I'm
| | 01:18 | going to select this bkgdHome.jpg.
| | 01:19 | So I'm going to put this big JPEG in the
background, choose it, and I'm going to click Apply.
| | 01:28 | Oh yes.
| | 01:30 | In fact let me move that out of the way.
| | 01:31 | You can see the page is
really coming together now.
| | 01:34 | That's looking really good. Okay.
| | 01:36 | I'm going to select OK.
| | 01:39 | Now if I select this text here, you
can see that this header text has a
| | 01:44 | format of Heading 1.
| | 01:47 | So I want to keep that in mind because if
I want to change this I can change that.
| | 01:53 | Even if I wanted to change this line
underneath it, I can always change the
| | 01:58 | format to say for instance Heading 2 and
it applies that sort of basic style to it.
| | 02:05 | So I bring that up so you've an
understanding of how the hierarchy of
| | 02:09 | information should be.
| | 02:10 | Again your first header line, your
secondary line is Heading 2 and if I go back
| | 02:16 | into Page Properties, I can change
those styles using the Headings CSS.
| | 02:23 | So again in here I can change the page font.
| | 02:27 | I can change the Heading size, so the
size of that text, say for instance,
| | 02:34 | Heading 1 could be 24 pixels.
| | 02:37 | I can change Heading 2 to be about 18 and
I'll click Apply and we can see how that changes.
| | 02:44 | And again, you can adjust that all you want.
| | 02:46 | In fact, I'll go about 28 there and click Apply.
| | 02:50 | But you can see how I can modify the
headings as well in the Page Properties.
| | 02:54 | I can even go in here and change the
color for Heading 2, a gold, and click
| | 02:59 | Apply, something like that.
| | 03:02 | And lastly, what I want to do is
I want to focus on the link color.
| | 03:07 | I'm going to select OK.
| | 03:10 | And right here, you can
see that this text is blue.
| | 03:12 | And the link color really
isn't going to work for this page.
| | 03:16 | So I want to go ahead and change that.
| | 03:18 | So again, Page Properties and I'm going
to the Links CSS and in here again,
| | 03:24 | I can choose the font.
| | 03:25 | I can choose the link color,
so this is what I'm going to do.
| | 03:28 | I'm going to choose the link color and maybe I
want to change that to white. I'll click Apply.
| | 03:36 | That changes the link color to white.
| | 03:39 | I can change the rollover color, so
when you move your mouse over any one of
| | 03:44 | these links, it's going to
change to a different color.
| | 03:46 | In this case, again, I'm going
to change it to that orange color.
| | 03:50 | The visited, for the pages I've already visited,
maybe I want to change that to a medium gray.
| | 03:55 | And then active is when you click on the
link it's going to change to a different color.
| | 04:00 | So I'm going to go to a little more
drastic here. I'm going to go to a red.
| | 04:04 | When you rollover the text would turn orange.
| | 04:07 | When you click on it, it will turn
red briefly and then if you ever view a
| | 04:12 | visited link, it's going
to be in the medium gray.
| | 04:15 | So I'm going to select OK and
now let's see that in action.
| | 04:19 | So in order to do that, I'm going to go
to File, down to Preview in Browser and
| | 04:24 | I'm going to preview this in Firefox.
| | 04:26 | It does ask me to save the file.
| | 04:27 | I'll just go ahead and say Save.
| | 04:29 | Sure enough, when I roll over those
links, I can see that it changes the color
| | 04:34 | and even when I click on a link,
it's going to change it to red.
| | 04:39 | So I'm holding down the mouse button and
then when it goes there, obviously it's
| | 04:43 | going to go to that page, which
currently doesn't have any styles.
| | 04:46 | So you can see that Rollover,
I get a different color.
| | 04:49 | If I click, it's going to go to that page.
| | 04:51 | And this is really good comparison
showing you what a page looks like for adding
| | 04:56 | a style and then what it could look like after.
| | 04:58 | And if I go back in Dreamweaver, again, all
this is done through your Page Properties.
| | 05:04 | You're allowed to and able to
effectively define a whole new style to this page
| | 05:09 | through one dialog box.
| | Collapse this transcript |
| Understanding Cascading Style Sheets (CSS)| 00:00 | Having a really good understanding of
Cascading Style Sheets will really open up
| | 00:05 | a lot of design possibilities for you,
because CSS is really powerful.
| | 00:10 | CSS is Cascading Style Sheets.
| | 00:13 | So you'll hear me say CSS
instead of Cascading Style Sheets.
| | 00:16 | But it really is a style sheet language used
to describe the design of an HTML document.
| | 00:21 | In fact, you can control all the
visual aspects of the content using CSS.
| | 00:27 | So it goes beyond what HTML styles can do.
| | 00:30 | Again modifying the fonts, the colors,
the layout, position of items, it gives
| | 00:35 | you a lot of control.
| | 00:37 | So that's one huge, powerful aspect of CSS.
| | 00:42 | Another big advantage is the ability
to separate the content from the design.
| | 00:48 | So you could have an HTML
page that has HTML content on it.
| | 00:52 | So all the copy and then you can have
CSS on that same page that will control
| | 00:58 | the design of that content, how
that content is being displayed.
| | 01:02 | That's what known as an internal
CSS if the CSS is on the page itself.
| | 01:07 | But you can also have an external
CSS file that exists as a separate file
| | 01:12 | outside of the HTML and what the
HTML does is it points to that CSS and
| | 01:17 | applies that style to it.
| | 01:19 | But again, it's a separate file.
| | 01:21 | This gets to be really powerful when you
get multiple pages involved like a website.
| | 01:26 | It gives you site-wide
consistency across the board.
| | 01:30 | Reduces any sort of complexity or repetition.
| | 01:33 | So all your styles exist in one location.
| | 01:36 | And again, if all your styles exist
in one location, it's going to make
| | 01:39 | your file size smaller.
| | 01:41 | And sure enough, if you change this CSS
style such as some sort of heading tag
| | 01:46 | or a paragraph font, say for instance,
if you have a website you can change the
| | 01:51 | header tag to a different color and it will
propagate and change throughout the entire site.
| | 01:56 | So again, if you have a site with 100
pages it gets to be really helpful.
| | 02:00 | So I really encourage you to use CSS for
its ability to make and change multiple pages.
| | 02:07 | All right, one example and really this
consists of two parts, the basic syntax
| | 02:14 | is either a selector, so you can
have a selector as part of your CSS,
| | 02:18 | and then your declaration and
that's what makes up a CSS rule.
| | 02:22 | So your selector identifies the element,
such as say a paragraph and then your
| | 02:27 | declaration is going to have
your property and value combos.
| | 02:32 | You basically are going to be
able to change your paragraphs.
| | 02:34 | Wherever you use that paragraph,
it's going to change it across the board.
| | 02:39 | And the great thing about Dreamweaver
is it makes creating CSS styles easy.
| | 02:44 | In fact, it gives you dialog boxes, so
you don't have to remember all the code
| | 02:48 | to write, and you can use a dialog box
and modify your various visual elements
| | 02:54 | from one location and again have it
propagate throughout the site because it is CSS.
| | 02:59 | And it really enables you to
leverage all the power involved in CSS.
| | Collapse this transcript |
| Styling with CSS| 00:01 | Up until now, we've been applying
some basic styles to this webpage such as
| | 00:06 | the background, the different link
colors, as I rollover them you can see a
| | 00:11 | change to that orange, and then even some text
styles, but it's been pretty limiting so far.
| | 00:18 | But what I want to do is go beyond the
Page Properties panel, beyond some of
| | 00:24 | these somewhat limiting options.
| | 00:26 | For instance, I can apply
a color to the background.
| | 00:29 | I can apply an image to the background.
| | 00:32 | I can say repeat it for instance, and
that is does the background tile if you will.
| | 00:37 | So, I can control sort of its tiling.
| | 00:40 | But that's about it and what I want to
do is I want to go beyond this and in
| | 00:43 | order to go beyond the Page Properties
panel, I want to use CSS Styles and more
| | 00:50 | specifically, the CSS Styles panel.
| | 00:54 | So, if you don't have it open,
it's under Window > CSS Styles and right here
| | 01:00 | in my CSS Styles panel, you'll see all of
these styles that are currently in this document.
| | 01:06 | In fact these were all applied
using the Page Properties panel.
| | 01:11 | But again, I want to go beyond say
for instance, the typical sort of
| | 01:15 | body background image.
| | 01:16 | So I'm going to select body, double-
click on that and sort of the background for
| | 01:23 | this image, I'm going to select the
category being background and sure enough as
| | 01:28 | you can tell, there are not only my two
options from the Page Properties panel,
| | 01:33 | but there is additional options as well.
| | 01:35 | So this is great, give me more
control over the appearance of my webpage.
| | 01:39 | In fact, again, whether I want the
background to repeat or not, I can apply that
| | 01:42 | here and by default it will repeat,
and also by default the image will always
| | 01:48 | start in the upper left-hand corner
regardless of the size of your browser.
| | 01:52 | What I want to do is I want to
change the background and I want the
| | 01:57 | background to be fixed.
| | 01:59 | And what that means is the background,
if I have content on that page and I
| | 02:03 | scroll that content, the background will
stay fixed, obviously in the background
| | 02:08 | and the text will scroll.
| | 02:09 | So, it creates this nice, sort of depth look.
| | 02:12 | Another thing I want to do is to
change the background X position, so it's
| | 02:17 | positioned from left to right where it appears.
| | 02:20 | And I'm going to go ahead and center the image.
| | 02:22 | In fact, if I click Apply you
can see that it centers the image.
| | 02:27 | I also want to adjust its Y position, so
it's vertical position and I'm going to
| | 02:32 | change that to Top, I'm going to click Apply.
| | 02:36 | And now you can see the image is always
going to start at the top here, and sort
| | 02:40 | of develop on the way down.
| | 02:42 | But it's always going to be centered.
| | 02:43 | So it's going to create this sort of
nice look, I'm always going to have this
| | 02:46 | image centered, starting at the top
and it's always going to be fixed.
| | 02:50 | In fact, let's go ahead and select OK,
and I'm going to save this document and
| | 02:56 | I'm going to go ahead and
preview it in a browser.
| | 02:59 | So again, if I scale this, we
can see the background moves.
| | 03:04 | Again that nice sort of depth look
which works out great and the background is
| | 03:09 | centered, but if I need to scroll the
content, the background stays fixed, but
| | 03:16 | the content scrolls.
| | 03:18 | So again, this nice and depth look that
can really only be done through the CSS
| | 03:22 | Styles panel and not
through the Page Properties.
| | 03:25 | So again, I'll close that browser, go
back here into Dreamweaver and let's
| | 03:29 | extend that to other
things, such as my link color.
| | 03:34 | If I double-click on link, I can
change my link color to say for instance, a
| | 03:39 | gold and I can even more
move the text-decoration.
| | 03:42 | Text-decoration in this case is this
underline, so if I select none and click
| | 03:50 | Apply, it changes the color and removes
that Text-decoration. We will select OK.
| | 03:57 | So, it's looking better but I want
to even again go beyond what Page
| | 04:01 | Properties allows me to do.
| | 04:03 | Say for instance, hover, if I double-
click on that, I can change this CSS Rule
| | 04:08 | definition and again, I can change the
color and what I want to do now is access
| | 04:14 | some of these other categories for this hover.
| | 04:18 | For instance the background, I want to change
the background of that link to black on hover.
| | 04:26 | So, when you rollover any link, the
background is going to turn black and again
| | 04:31 | the Type > Color is going to turn white,
and I'm going to make sure it doesn't
| | 04:35 | have any Text-decoration.
| | 04:36 | So, I'm going to select none there.
| | 04:39 | Select OK, the active color, I can leave as red.
| | 04:44 | The visited, I can change that as well,
I'll change this Text-decoration to
| | 04:49 | none, and click Apply, but again,
full control with what I want to do with
| | 04:54 | this particular item.
| | 04:55 | All right, so that's looking pretty darn good.
| | 04:58 | In fact, let's go to File, let's go
ahead and save this document, and let's
| | 05:04 | preview it in a browser again.
| | 05:06 | Here we are, my background is looking
good, my links, as I rollover them, I can
| | 05:11 | see that it changes the text to white,
and the background changes to black.
| | 05:18 | Wherever there is a link
it's going to act that way.
| | 05:20 | But again, customizing this design
towards sort of your taste or the goals and
| | 05:25 | objectives of your site is
really what we are after here.
| | 05:29 | In fact, just so you know what's going
on behind to the scenes, I can check out
| | 05:34 | the CSS Styles in my document.
| | 05:37 | So I can go ahead and do a right-click or Ctrl-
click if you are on a Mac, and I can Go to Code.
| | 05:43 | So, if I Go to Code, it jumps directly
to that Code and it gives me my color
| | 05:50 | for the visited links.
| | 05:51 | In fact, the body, I can Go to Code
for the body background and again, since
| | 05:58 | there is a background image you'll
never really see this background color.
| | 06:02 | So, if I feel comfortable, I can go
ahead and delete that right in here in my
| | 06:07 | Code view, if I want to.
| | 06:09 | And if I modify anything in Code view,
I might need to refresh this CSS Styles panel.
| | 06:15 | Sure enough, it's removed from
the properties of that body tag.
| | 06:19 | Let me go back to Design view. In
general you can see how we can go beyond
| | 06:24 | what's in Page Properties
using the CSS Styles panel.
| | 06:28 | It has really given us more control
and more flexibility with our design.
| | Collapse this transcript |
| Customizing specific page content| 00:01 | Cascading Style Sheets allow you to go
beyond styling HTML elements such as the
| | 00:06 | paragraph tag for instance.
| | 00:08 | And it allows you to create your own custom
elements to be applied to anything you want.
| | 00:13 | So for instance, if I wanted say
Copyright 2009 Jane Doe Photography, something
| | 00:24 | like this, text that is really
going to be at the base of the page.
| | 00:28 | I'm going to go ahead and sort of move
it down, but in general I can not only
| | 00:33 | insert a special character for this
particular scenario, by going to Insert >
| | 00:38 | HTML > Special Characters
and inserting the Copyright.
| | 00:43 | But once I have this text established,
I can go ahead and apply a specific
| | 00:47 | style to it, because I don't want this
text to have the same visual priority as
| | 00:52 | the paragraph text.
| | 00:54 | I want to maybe decrease the size of the font.
| | 00:58 | Your first inclination is to select that
text and go to the Properties panel and
| | 01:03 | maybe change it down here.
| | 01:04 | And let's watch and see what
happens if I try to do that.
| | 01:07 | If I change the size to 9 to
kind of give it that lower priority.
| | 01:11 | I'm then presented with
this New CSS Rule dialog box.
| | 01:16 | So this is great because Dreamweaver
shows me and helps me with best practices
| | 01:20 | for creating an HTML page.
| | 01:23 | It already says, hey, what type
of selector do you want to use?
| | 01:28 | So what this means is it gives me the
opportunity to select the type of CSS.
| | 01:32 | So I don't want it to be like, say
for instance, the paragraph tag, I don't
| | 01:37 | want to select that because it's going
to change that font for everywhere where
| | 01:42 | I use the paragraph tag.
| | 01:45 | My other options are the ID, which is
only going to apply to one element, and
| | 01:50 | then I even have Compound, which is
going to be based on my selection.
| | 01:54 | What I want to choose and what really
seems to give me the most flexibility is
| | 01:58 | this class, because it can be
applied to any HTML element.
| | 02:03 | But if you are really curious about
say the ID and Compound and advanced CSS,
| | 02:08 | check out the title by James Williamson.
| | 02:11 | His lynda.com title is
Dreamweaver CS4 with CSS Essential Training.
| | 02:16 | Check that out because it's going to
be more robust than what I'm going do
| | 02:19 | here, but in general I can select
class because again it's going to give me a
| | 02:24 | lot of flexibility.
| | 02:25 | In fact, my next step is typing in footer.
| | 02:29 | So this is the name of the selector.
| | 02:31 | So it's going to be applied to all
HTML elements with the class footer.
| | 02:36 | So I just have to remember
this name, and I'll select OK.
| | 02:41 | Look what it does, automatically it
changes the font size and it applies that
| | 02:47 | footer to that text.
| | 02:49 | As you will notice in my CSS Styles
panel right down here, you will see footer.
| | 02:55 | I can double-click on it and I
can change it further if I want to.
| | 02:59 | Such as changing the color, again I want
to give it sort of a lower priority, so
| | 03:03 | I might change it to a
medium gray, and I'll select OK.
| | 03:08 | And it changes it to that medium gray.
| | 03:10 | So again, this could be
applied to any HTML element.
| | 03:14 | So if I have an additional text and for
this additional text if I want to apply
| | 03:21 | that class to it, I can do that.
| | 03:23 | Again, down here in my Properties panel,
my Targeted Rule, I want to apply a class.
| | 03:30 | In this case, it's called footer.
| | 03:32 | I select that and it changes it
to that smaller sort of gray type.
| | 03:37 | I can go ahead and move that down to
the base of the page if I want to as well.
| | 03:42 | But again, I'm given really total
control to define my own CSS style to be
| | 03:47 | applied to any element.
| | 03:49 | Again, CSS gives me the power to do
this and Dreamweaver really teaches me best
| | 03:54 | practices for applying
this to my web page as well.
| | Collapse this transcript |
|
|
4. Creating a CSS-Based LayoutCreating a CSS-based layout| 00:00 | The layout of a web page is really
essential to the design and it's important
| | 00:05 | that we have exact control.
| | 00:06 | And with CSS luckily we have this control.
| | 00:10 | So for instance, what I want to do with
this page is I don't really want to have
| | 00:14 | my copy and my content
floating on the left side here.
| | 00:18 | I want to create a box in the center
that has a dark background and I want to
| | 00:24 | put the content in that box, and
I'm going to do this using CSS.
| | 00:28 | Again, the great thing is
Dreamweaver makes this all really easy for me.
| | 00:33 | So I'm going to go up and keep in mind
I do have this set to Classic View and
| | 00:39 | you will notice in this
Application bar I can go to Layout.
| | 00:43 | So I'm selecting the Layout tab and in there,
there are different options for the Layout.
| | 00:49 | In fact, I can insert a div tag.
| | 00:52 | That's one option and I can also draw
an AP div, which is what I want to do.
| | 00:57 | So I want to draw an absolute
positioned division of content.
| | 01:03 | This is what I'm doing.
| | 01:04 | I'm going to create an AP div.
| | 01:06 | I'm going to draw one.
| | 01:08 | When I have that selected, it's going
to give me those crosshairs and I can
| | 01:12 | just click and drag to create this big box.
| | 01:16 | So there is my box.
| | 01:18 | It's an absolute positioned div.
| | 01:21 | In fact, I can select any edge of this
and move this box around to where I want it
| | 01:28 | and really I'll just keep
it in the center right there.
| | 01:31 | But really I want to have all this
content in this box, so I can just go ahead
| | 01:35 | and click and drag to select all of the text.
| | 01:39 | And then click and drag it into that
box that I have just created, this AP div.
| | 01:47 | That's looking better so far.
| | 01:48 | And again, I can grab sort of
from this upper left-hand corner.
| | 01:51 | It's usually what I do is
position this wherever I want it to.
| | 01:55 | But what I can also do with this AP div
selected, I can go down to my Properties panel.
| | 02:01 | This gives me absolute control
and that's exactly what I want.
| | 02:05 | I'm going to start on the left-hand side
because I really want to give it a more
| | 02:08 | specific name as opposed to apDiv1.
| | 02:11 | I want to call this just Content
because this holds the content for this page.
| | 02:17 | Next up, I want to maybe
change the Width of this div.
| | 02:20 | I'm going to change the Width to 700 pixels.
| | 02:24 | So that's looking better.
| | 02:25 | The Height, I can go ahead and leave alone.
| | 02:28 | But since I'm talking about the layout,
I would like to bring up sort of the
| | 02:31 | Width of items and really I don't want
the Width to go over say 1,000 pixels.
| | 02:36 | In fact, if I have it around 700,
I'm going to be able to print out this
| | 02:40 | page without an issue. So 700 pixels.
| | 02:42 | That's kind of how I arrived at that number.
| | 02:45 | But you can see I can change the Width.
| | 02:47 | I can change the Height.
| | 02:48 | I can change the position,
sort of the left and top.
| | 02:52 | Again, if I move it around,
you can see those numbers change.
| | 02:55 | But again, I want more control than
what this Properties panel gives me.
| | 03:00 | What I can do is go over to my CSS
Styles panel and you will notice right down
| | 03:05 | at the bottom there is this content CSS
style that has been added to the list.
| | 03:11 | So again, I can just double-click on
content and it gives me the CSS rule
| | 03:16 | definition for this item.
| | 03:18 | So from here, again more control.
| | 03:20 | So I can go down to say the Background
for instance and definitely if I move
| | 03:25 | this out of the way, you can see that
it's kind of tough to read that text.
| | 03:28 | So what I want to do, I'm going to go
beyond sort of adding a color back there.
| | 03:33 | I want to add an image in the background.
| | 03:37 | It's kind of a semi-transparent image.
| | 03:39 | So in order to do that, I'm going to
click Browse and in the Images folder
| | 03:44 | I'm going to locate this bkgd.png.
| | 03:47 | So this PNG file is just a graphics file
that has semi-transparency applied to it
| | 03:54 | and then a little design in
the upper left-hand corner.
| | 03:57 | So I'm going to choose that bkgd.png and
again I'm given more control in here if
| | 04:02 | I want it, but really I want
to leave that as a default.
| | 04:05 | But I'm going to go ahead and click Apply.
| | 04:08 | Sure enough you can see
it and it's so much better.
| | 04:10 | I'm finally able to read that text.
| | 04:12 | I can see that little design that's
in the PNG file, which is a nice little
| | 04:16 | accent design up there.
| | 04:19 | And again, I can kind of move on
to manipulating this some more.
| | 04:22 | Because another issue I have with this
is the fact that there is no padding.
| | 04:27 | So there is no padding between say for
instance the edge of this box in the text.
| | 04:32 | So I want to give this padding.
| | 04:34 | So let's go down to Box.
| | 04:37 | And if I select Box in this category list
here, you will notice Padding is right in here.
| | 04:43 | So let me go ahead and give it some padding.
| | 04:45 | Make sure Same for All is selected.
| | 04:47 | But I'm just going to type in 20
and then I'm going to click Apply.
| | 04:50 | Even better, it gives me 20
pixels around sort of all the edges.
| | 04:56 | Next up, what I want to do is I
want to go ahead and change the border.
| | 05:02 | I want give this just a black
border just to give it a nice crisp edge.
| | 05:06 | And I can do that in here, select
Border, I'm going to go ahead and
| | 05:10 | determine the type of border.
| | 05:12 | So the Style is going to be solid and
the Width is going to be about 3 pixels,
| | 05:17 | so I'm just going to type that in.
| | 05:18 | Then I'm going to change the Color to
black but just so you can see it, I can
| | 05:22 | change it to red and you
will see that red appear.
| | 05:25 | But again I want to change it to black.
| | 05:26 | You can see that it's pretty subtle,
but there is a hard sort of black
| | 05:29 | edge around it as well.
| | 05:30 | Lastly, I'm going to
just go down to Positioning.
| | 05:34 | Now again, I have already adjusted
the Width. The Height is going to be
| | 05:39 | determined by content.
| | 05:41 | So I don't want to really control it here.
| | 05:43 | If there is more content, I want to
make sure that this box actually
| | 05:48 | will expand to fit more of that
content, but what I want to do is just
| | 05:52 | delete the Height altogether.
| | 05:54 | Now it's going to be a variable
height depending on the content.
| | 05:57 | So I'm going to click Apply.
| | 06:00 | And now I can go ahead and move on to select OK.
| | 06:04 | So let me just go ahead and save
this page and let's preview this in a
| | 06:10 | browser as our last step. There it is.
| | 06:15 | Sure enough I can go ahead and expand the
browser, sort of decrease the size of the browser.
| | 06:20 | And again, since this is absolutely
positioned, it's an AP div, it will always
| | 06:25 | stay in that location.
| | 06:27 | If I scroll down, you can see that this
height is only going to be the height of
| | 06:32 | the content and no more.
| | 06:34 | So as you can see, I'm really given a
lot of control when it comes to my layout
| | 06:39 | using an AP div in Dreamweaver.
| | Collapse this transcript |
| Creating a liquid CSS-based layout| 00:00 | CSS based layouts are also
extremely flexible, allowing for a lot of
| | 00:05 | creative control that you might want to be
consider including what's called a liquid layout.
| | 00:11 | And that's what I want to do here.
| | 00:13 | Currently this layout is
more of the fixed layout.
| | 00:16 | That means if I'm scaling the browser,
my content is at a fixed position and
| | 00:22 | doesn't scale with the browser and what
I want to happen is I want this content
| | 00:28 | to always be centered in the browser
regardless of the size of the browser.
| | 00:32 | So, not only center the content but
also I want this content to scale based
| | 00:38 | on the size of the browser.
| | 00:39 | So if I have the browser smaller,
I want all of this content to be centered and
| | 00:43 | then scaled down to about 70% of the browser.
| | 00:49 | So that's the size of the Box that I want.
| | 00:51 | If you scale down the browser or scale
it up, it always going to take about 70%
| | 00:56 | of the browser size.
| | 00:58 | So again centering and then
scaling is what I'm going to work on.
| | 01:01 | So I'm going to close this
browser and go into Dreamweaver.
| | 01:06 | And from here what I want to do is I
need to center all of this content, I need
| | 01:11 | to make sure it's centered.
| | 01:12 | So all of this body content, I need to center.
| | 01:15 | So I'm going to go to my CSS Styles panel,
I'm going to go down to body, and I'm
| | 01:21 | going to double-click on the body element.
| | 01:25 | And from the Category area
I'm going to choose Block.
| | 01:30 | From here I'm going to
change the Text-align to center.
| | 01:33 | So that's going to center
all of the body content.
| | 01:37 | In fact if I select OK, you will
see sure enough it centers everything.
| | 01:41 | So that's looking pretty good so far
but I do have an issue with this paragraph
| | 01:46 | text, which I need to fix.
| | 01:48 | I would really like it to be kind sort
of left aligned as opposed to centered.
| | 01:52 | So that means I need to add it because
if I look in my CSS Styles panel, there
| | 01:59 | is no paragraph style, there is no P style.
| | 02:02 | So that's what I need to add.
| | 02:05 | So I'm go to my CSS Styles panel and
down at the base of the panel, you will
| | 02:09 | notice this little New CSS Rule icon.
| | 02:13 | You can just click on it.
| | 02:15 | And that will bring up
this New CSS Rule dialog box.
| | 02:20 | So what I need to do is I
need to redefine the p tag.
| | 02:24 | So I'm going to Tag which is me
just redefining an HTML element.
| | 02:30 | And since my cursor was already in the
paragraph area it automatically populates
| | 02:36 | that with p. So this selector name
will apply your rule to all of the p
| | 02:41 | elements, which is just fine. That's cool.
| | 02:43 | I'm going to select OK, and sure enough
I get the opportunity to define this CSS
| | 02:49 | Rule and really I'm going to go down to
Block and for Text-align, I'm going to
| | 02:56 | go ahead and left align it. I select OK.
| | 03:02 | It left aligns all of that text.
| | 03:05 | This commonly might happen.
| | 03:07 | It might shift other things because
say for instance if you take this nav,
| | 03:11 | I would really want this nav to be centered.
| | 03:14 | But it shifted it to the left and
it's because this is in a P tag.
| | 03:18 | So I can remove any of that
formatting I want using my Properties panel.
| | 03:23 | I'm going to go to Format.
| | 03:25 | You can see it has the p tag or
the Paragraph style applied to it.
| | 03:30 | Well, I can always change that to None
and it's going to center that nav. Perfect!
| | 03:37 | Now everything is centered, in place.
| | 03:40 | It's looking pretty good.
| | 03:41 | But what I want to do now is focus on this Box.
| | 03:46 | This content box is what I need to
change now, so I'm go to Properties and I'm
| | 03:50 | going to change the content element.
| | 03:52 | In my CSS Styles panel, I'm going
to go to content and I'm going to
| | 03:57 | double-click on it.
| | 03:58 | And for this Rule definition
I'm going to modify two areas.
| | 04:03 | I'm going to focus on the Box area
and then we'll work on Positioning.
| | 04:07 | For the Box area, I need to not
necessarily have the Width 700 pixels but I want
| | 04:13 | this to be a percentage.
| | 04:14 | So I'm going to type in 70
and then change pixels to %.
| | 04:20 | So it's going to be 70%,
the Width of the browser.
| | 04:24 | But I also need to modify the Margin area.
| | 04:27 | I don't want it to necessarily scale
from the Top to the Bottom, so I need to
| | 04:32 | un-check Same for all.
| | 04:34 | But in the Margin area I want to
change the Top to 0 and the Bottom to 0.
| | 04:39 | So I don't want there to be any
Margin at the top or at the bottom.
| | 04:43 | But what I do need to modify is I need
to make sure the Margin, which is the
| | 04:47 | space between the Box and the browser.
| | 04:51 | I need this Margin area to
always be automatically adjusting.
| | 04:56 | So what I need to type in this Right
input text field is auto, so it's going to
| | 05:02 | automatically adjust
depending on the Width of the browser.
| | 05:05 | Same thing for the left side,
I'm going to type in auto there.
| | 05:08 | And in effect this is going to be
roughly 15%, and this is going to be 15%.
| | 05:12 | And then the other 70% is
actually the content box.
| | 05:17 | So that's looking pretty good, in fact I'll
click Apply, and it does change it a little bit.
| | 05:24 | But I still need to modify one other area.
| | 05:26 | So I'm going to go to Category, down
to Positioning, and in here you can see
| | 05:31 | that the Width does says 70%.
| | 05:34 | But the Position says absolute,
which is totally unnecessary.
| | 05:38 | So I can actually remove that, just like that.
| | 05:42 | In fact there is some other
positioning elements that I can remove as well
| | 05:46 | because I don't need this absolute positioning.
| | 05:48 | I'm going to remove most of those
fields, click Apply, and then we can see it
| | 05:52 | center of the content.
| | 05:54 | It's looking good so far,
so I'm going to select OK.
| | 05:56 | And I'm going to go to File, and save this page.
| | 06:00 | Then I'm go to File, and
preview this in the browser.
| | 06:04 | And here is the moment of truth.
| | 06:06 | It does the center of the content, oh yes.
| | 06:08 | It not only centers the
content but it scales it.
| | 06:11 | So it's always 70% of the browser.
| | 06:15 | The left and right sides are both about 15%.
| | 06:20 | And really it's working well.
| | 06:21 | Regardless of what's sort of size
monitor you are on, you are going to be able
| | 06:25 | to read this content.
| | 06:26 | So again, CSS is a really effective
way and a real flexible way to create
| | 06:32 | a layout and modify a layout depending
on what you are going for with your website.
| | Collapse this transcript |
| Reviewing the prebuilt layouts in Dreamweaver| 00:00 | Dreamweaver also comes with some great
pre-built layouts you can start using
| | 00:04 | right out of the box.
| | 00:06 | Now, they are not actually
listed here under Create New.
| | 00:10 | You have to go to the File menu, down to New.
| | 00:14 | And when you do that what you will
notice is if I have HTML selected, this
| | 00:19 | center column has all of
the layouts I can choose from.
| | 00:23 | Some I'm just going to use my arrow keys
and kind of arrow down, and I might get
| | 00:26 | somewhat of an idea of some of these layouts.
| | 00:28 | In fact, I might just pick one.
| | 00:30 | I'm going to pick this 2 column
elastic, left sidebar, header and footer.
| | 00:34 | I can click Create.
| | 00:36 | Sure enough, there it is, there is my layout.
| | 00:38 | I can start to manipulate this to
my liking or I can try another one.
| | 00:45 | In fact let's see what else in
here, again I went to File > New.
| | 00:49 | And I'm just using my arrow
keys and I'll locate another one.
| | 00:52 | In fact let's go down here, there is
quite a few in fact, there is a 3 column
| | 00:57 | absolutely positioned
layout. So I click Create.
| | 01:01 | Maybe this is something I want to go with.
| | 01:02 | And again I can change this content.
| | 01:06 | But really you can see there is
quite a slew of designs to choose from.
| | 01:11 | So really the idea is to pick one that's
going to work for you and then edit the
| | 01:16 | content, not only the content
but you can also edit the Style.
| | 01:21 | So in this case, I might potentially
want to change the color of this font
| | 01:27 | of that header there.
| | 01:29 | So I can just go down to the
Properties panel, and make sure CSS is selected,
| | 01:35 | and I can change that color right in here.
| | 01:38 | In fact, I'll change it
to sort of a medium blue.
| | 01:40 | Sure enough it changes it.
| | 01:42 | But if you want to see sort of the long
bragging list of all of the CSS Styles
| | 01:47 | associated with this page, I
can go to my CSS Styles panel.
| | 01:51 | So you can see everything, for the most
part is a CSS Style, which really gives
| | 01:56 | me all the flexibility I need.
| | 01:58 | Again, from anything from the body copy,
whether it's the copy or even say
| | 02:03 | the Background color, I can
change that right in here.
| | 02:07 | So we'll just do this really fast, in
fact I'll change this to blue as well.
| | 02:12 | Click Apply, and it change it across the board.
| | 02:15 | This is just a really effective way
to not only get a design up and running fast,
| | 02:19 | but this design will also have
the flexibility you need since it's
| | 02:24 | built with CSS Styles.
| | Collapse this transcript |
| Creating a Cascading Style Sheet and applying it to multiple pages| 00:00 | The power of CSS not only lies in the
control it gives you over the design but
| | 00:05 | the fact that you have the style
separate from the content, and this separation
| | 00:11 | really gives us flexibility to
apply the style across multiple pages.
| | 00:15 | So currently as you can see, this index
page has a style applied to it, and it's
| | 00:21 | looking pretty good, as opposed to
some of these other pages, the about.html,
| | 00:26 | contact, even the portfolio pages.
| | 00:29 | These other pages if you look in the
CSS Styles panel, I don't have any sort of
| | 00:34 | styles, any rules applied to them, and
what I want to do is I want these other
| | 00:40 | pages to look more like the index page.
| | 00:45 | So, if you will notice, for this index
page, I have all of these various CSS
| | 00:51 | rules, and really I want to take these
and I want to separate this into its own
| | 00:57 | file, all of these rules and I want
to apply that file to the other pages.
| | 01:02 | So, all I need to do is
select all of these rules.
| | 01:06 | So I've just Shift+Selected all of the
rules and I'm going to do a right-click
| | 01:10 | or Control-click if you are on a Mac,
and I want to move all of these rules.
| | 01:15 | I'm going to move all of these
rules to an external style sheet.
| | 01:20 | I'm going to select a new style
sheet. This is what I want to create.
| | 01:24 | I'm going to select OK and I'm going to go
ahead and put it in my CSS folder in here.
| | 01:31 | I am going to give it a name of janedoe.
| | 01:33 | So, it's going in the CSS folder.
| | 01:38 | It's called janedoe.css, because it's going to
sort of define the style for this entire site.
| | 01:44 | I'm going to click Save, and sure
enough this page doesn't look any different,
| | 01:48 | which is exactly what I want to happen.
| | 01:51 | But if you look in CSS Styles panel,
it now says janedoe.css and all of the
| | 01:57 | individual rules are located in this CSS file.
| | 02:02 | In fact, I even have a quick link.
| | 02:05 | Using this File Navigator bar,
I can jump to that CSS as well.
| | 02:11 | So again, it's easy to access that CSS file.
| | 02:16 | But it's still connected to my
Source Code or to this current page.
| | 02:19 | So, now that that's separated out,
it's in that janedoe.css file.
| | 02:24 | I can take this CSS file and I
can apply it to the other pages.
| | 02:28 | So, I'm going to go to the about.html
page, and it's really quite easy because
| | 02:33 | all I need to do is go to my CSS Styles
panel, and I'm going to link by clicking
| | 02:40 | on this Chain-link icon.
| | 02:41 | I'm going to attach this style sheet that
I just had created to this about.html page.
| | 02:47 | So, I can type in a URL, I'm going to
actually click Browse instead of typing
| | 02:52 | any URL, but I can go ahead and
go in my CSS folder and locate the
| | 02:59 | janedoe.css file I just made.
| | 03:01 | So, I have it selected, click and Choose,
and it's just going to link that CSS
| | 03:08 | and that's what I want to do.
| | 03:09 | I don't want to import all of that
content, I want to link to that file.
| | 03:13 | I can also choose the Media type.
| | 03:15 | So, this is just to get you
familiar with some of the other options.
| | 03:19 | I could have a CSS layout for print,
for a handheld, so you can have a lot of
| | 03:24 | flexibility here and you can have sort
of multiple CSS pages associated with
| | 03:30 | sort of one page if you wanted to.
| | 03:32 | But really I'm building this for the
common web browser on sort of a common
| | 03:37 | computer system, so I'm choosing screen.
| | 03:40 | Let's select OK, and let's
see what happens. There we are.
| | 03:43 | Sure enough, it applies that style,
and it's looking pretty darn good.
| | 03:48 | In fact, if I look in my CSS Styles
panel, you can see here is my janedoe.css.
| | 03:53 | I then twirl down and I can see
all the CSS styles are in there.
| | 03:58 | One issue you might notice is that
this content isn't in a box, like I'd
| | 04:04 | really want it to be, and in general,
I don't have to necessarily draw a new
| | 04:10 | absolute position to div.
| | 04:12 | I need to define it as a division
of content and I need to apply this
| | 04:17 | content style to it.
| | 04:20 | So, I have selected all this text,
and I'm going to go to my Layout tab and
| | 04:25 | I'm going to make sure I'm in this
Classic workspace mode, and I'm going to
| | 04:30 | select this first button.
| | 04:31 | I'm going to insert a div tag.
| | 04:34 | So, this is a division of
content that I'm defining.
| | 04:37 | So, I'm going to make sure this div is
wrapped around all of this content and I
| | 04:43 | want to give it an ID of content,
because that's what is in my CSS Styles panel.
| | 04:51 | So, I have given an ID of content, I'm
going to select OK, and there you are.
| | 04:57 | It defines this page and it gives me
that division of all of that content.
| | 05:04 | I want to do that across the board
because I want to go to the contact page and
| | 05:08 | really it's the same process.
| | 05:09 | It's attaching a style sheet, browsing
to that specific style sheet, again, it's
| | 05:17 | in the CSS folder, click Choose, change
my Media type, which technically isn't
| | 05:24 | necessary, but it's a good practice. Select OK.
| | 05:28 | It applies that style and again the
same process of selecting the content and
| | 05:34 | then wrapping it, sort of defining
it as its own area and making sure the
| | 05:40 | content CSS rule is applied to that area.
| | 05:45 | So, it's coming along nicely.
| | 05:47 | The last section is the portfolio section.
| | 05:49 | So again, attach my style sheet, browse
to it, janedoe.css, click Choose, change
| | 06:01 | my Media type to screen,
select OK, and wrap in a content.
| | 06:09 | And making sure it applies the
content CSS rule. Just like that.
| | 06:13 | So, here we have four pages.
| | 06:16 | They all finally look like a complete
site and sort of are all associated to
| | 06:22 | this one janedoe.css.
| | 06:26 | In fact, if I come in here and I
change the h2 rule, for instance, and what I
| | 06:33 | want to do I want to maybe italicize the text.
| | 06:36 | So, I'm going to click Apply,
and it italicized this text.
| | 06:40 | I just need to change it in this one
place and if I go to these other pages,
| | 06:45 | I can see that text is italicized.
| | 06:49 | So not only do you have a lot of
control over your design, but you can easily
| | 06:53 | change your design in one location, and
it will change all of the pages that are
| | 06:59 | associated with that CSS file.
| | Collapse this transcript |
| Overriding a CSS style| 00:00 | Having a style sheet attached to
multiple pages is powerful but that doesn't
| | 00:04 | mean that every page has to look the same.
| | 00:06 | You can add CSS to individual pages
that will then override any CSS rules in an
| | 00:12 | attached style sheet.
| | 00:14 | So currently, I have in this site,
these multiple pages and from page to page,
| | 00:21 | the layouts are exactly the same,
the images are exactly the same.
| | 00:25 | And really I want to add a
little more flavor from page to page.
| | 00:29 | In particular, what I want to do is I want
to change the background from page to page.
| | 00:34 | For this about page, for instance, I
can change the background quite easily by
| | 00:40 | clicking Page Properties.
| | 00:42 | So, in the Appearance (CSS) category, all
I need to do is change my background image.
| | 00:51 | So, I'm going to click Browse and
I'm going to locate this BkgdAbout.jpg.
| | 00:57 | That's in the images folder.
| | 00:58 | I'm going to click Choose, select OK,
sure enough the background changes.
| | 01:05 | So, if I get to expand this CSS
Styles panel a little bit, notice how it's
| | 01:13 | applied this new, sort of
local style to this page.
| | 01:20 | In fact, it's a body style and
this is the image I just added.
| | 01:25 | So this image actually overrides this image in
the body rule established in the janedoe.css.
| | 01:36 | So, since this is an attached style sheet,
it will apply that style but if there
| | 01:41 | is anything local attached solely on
this page, this style will take precedence
| | 01:47 | over anything in an attached style sheet.
| | 01:50 | So that's what does the trick.
| | 01:52 | It applies this particular image in the
background, and it looks pretty darn and good.
| | 01:57 | In fact, I'll go ahead and save this
page and I'll preview it in a browser.
| | 02:02 | Sure enough, there it is, there is
the image, and it's looking pretty good.
| | 02:06 | But still, it keeps the
consistency of the rest of the elements.
| | 02:10 | So it's still sort of part of the
same site, but looks different enough.
| | 02:13 | So, I would want to do that across the board.
| | 02:16 | So, for the portfolio page,
I want to do the same thing.
| | 02:19 | Again it's overriding this background
image just by clicking Page Properties and
| | 02:26 | under the Appearance category CSS, I
want to change the background image, and in
| | 02:32 | the images folder, there is the BkgdPortfolio.
| | 02:36 | Click Choose, select OK, and
again, it does the same thing.
| | 02:42 | It applies this style, and if I can
do one more thing here, I'm going to
| | 02:47 | right-click or Control-click
and I'm going to go to Code.
| | 02:51 | By doing that it will go to that CSS style
just to show you that it exists on this page.
| | 02:58 | So, this style overrides anything that
might be in a style sheet that's attached.
| | 03:06 | Again, I'm going to click on
Design view, there is my page.
| | 03:09 | It's looking really good.
| | 03:11 | I'll save this page.
| | 03:12 | Let me go to the contact page and the
same thing here, I'm going to click Page
| | 03:17 | Properties > Appearance (CSS) section >
Background image, I'm going to browse to
| | 03:24 | the BkgdContact.jpg.
| | 03:25 | I'll choose that, select OK, puts that
image back there, and again it's sort of
| | 03:36 | what you call a local style.
| | 03:38 | And then I'll go ahead and save this page.
| | 03:41 | So, let's check this out in action.
| | 03:43 | If I go back to the index.html and I
preview this in a browser, we can see that
| | 03:49 | here is my home page, I
can go to the about page.
| | 03:54 | Again, we are consistent with
the design, with the layout.
| | 03:57 | It's just the image in
the background that changes.
| | 04:00 | So again, my portfolio page,
and then the contact page.
| | 04:04 | Again, I was able to override any sort
of attached style sheet rule, and really
| | 04:09 | it gives me the flexibility to add more
personality and customization per page
| | 04:14 | while keeping consistent with the entire site.
| | Collapse this transcript |
|
|
5. Creating Reusable ContentCreating and using Library items| 00:00 | CSS really allows you the ability to
have your design exist in one place and
| | 00:08 | have it affect multiple pages, just
like this Janedoe.css affects these
| | 00:14 | multiple pages and applies that
style to it. But what if you want to do
| | 00:18 | something similar with content?
| | 00:21 | So if I have to say for instance,
this navigation, what if I want this
| | 00:25 | navigation to appear across multiple pages
and still have one reference of the navigation?
| | 00:32 | Well, I can easily do that,
converting this into a library item.
| | 00:36 | So I'm going to do that by going to
Window, down to Assets, because in the
| | 00:42 | Assets panel, that's where Library items exist.
| | 00:47 | So that's going to be pressed and what
I want to do is I want to just select
| | 00:53 | this navigation and I want to drag it
to the Assets panel. I'll show you what
| | 00:57 | happens when I'm going to do that.
| | 00:58 | I drag it in there to turn it into an asset.
| | 01:03 | I get this dialog box from
Dreamweaver that says, "Dreamweaver stores
| | 01:07 | library items in the root folder of a
site, but there is no site associated
| | 01:11 | with this document.
| | 01:13 | Please add a site, or save
it into an existing site."
| | 01:16 | So I need to define a site
before I can make a library item.
| | 01:21 | So, I'm going to do that by clicking Manage
Sites, and from here I'm going to click New Site.
| | 01:28 | Then I get this Site Definition Wizard.
| | 01:31 | It's that basic format for making a site.
| | 01:36 | It really asks me, what you
would like to name your site?
| | 01:38 | Well, I want to call it Jane Doe Library,
because that's what I'm going to make
| | 01:44 | just to show you library items.
| | 01:45 | I'm going to click Next.
| | 01:47 | It's asks, do you want to use a sort
of server technology such as ColdFusion,
| | 01:52 | some of these others?
| | 01:53 | I'm going to select No now, but
if I want to take advantage of other
| | 01:58 | technologies, I can do that and
I can always change that later.
| | 02:02 | For now, I'm just going to select No.
| | 02:05 | The next step is, how do you want to
work through files for development?
| | 02:09 | Well, I want to edit local copies,
and then upload them when I'm ready, and
| | 02:14 | really this field is the biggest field
that I want to pay attention to, which is
| | 02:18 | where on your computer do
you want to store your files?
| | 02:21 | So, if I click that folder, I can go in and
define the folder where I want my site to exist.
| | 02:28 | So, Chapter 05, the 01 Begin folder is
where I'm going to define. I'm going to
| | 02:32 | click to Choose and I'm going to click
Next and then it asks me, how do you
| | 02:38 | want to connect to your remote server?
| | 02:40 | Well, I want to select None, because I'm
not going to worry about uploading now.
| | 02:44 | So, all I want to do is create this
library item and have this library exist
| | 02:51 | across multiple pages. I'm going
to click Next. It gives me a summary.
| | 02:55 | Everything looks good.
| | 02:57 | I can click on Done and it appears in this
Manage Sites list, right here. Jane Doe Library.
| | 03:04 | Now that I have a site
defined, I can click Done.
| | 03:07 | Now what I can do is I can click on the
Assets panel, I can select My Navigation
| | 03:12 | and click and drag it over into my
Assets panel with confidence, knowing that
| | 03:18 | it's not going to give me that same dialog box.
| | 03:20 | It tells me that the selection may not
look the same when it's placed in other
| | 03:24 | documents, because the Style Sheet
information is not copied with it.
| | 03:28 | So the Style Sheet information is
separate. Again it's in Janedoe.css.
| | 03:32 | It's just copying the content
over, which is exactly what I want.
| | 03:37 | In fact, I can even say hey,
don't warn me about this again because I'm
| | 03:40 | totally aware of it now.
| | 03:42 | Assets panel automatically highlights
the title, which I want to call Nav.
| | 03:46 | Hit Return and here is my item.
| | 03:51 | So, as you can tell by this preview,
it shows me that there is no style
| | 03:55 | associated with this library item.
| | 03:58 | It's just the text, but
that's exactly what I want.
| | 04:01 | In fact, look what it
does in my Index HTML page.
| | 04:05 | It highlights it, as if
it's highlighter if you will.
| | 04:08 | That might be a little concerning
initially, but if I save my file,
| | 04:15 | and just preview in a browser,
| | 04:17 | I know that it's not really there.
| | 04:20 | Don't worry about that highlighting.
| | 04:21 | It just identifies it as a library item.
| | 04:24 | In fact if I go to Split View, you can
see that it does the same highlighting
| | 04:29 | on the code in here.
| | 04:30 | So I find that very helpful, sort of
defining what a library item is, and
| | 04:35 | sure enough if I select it, it will even tell
me it's a library item in the Properties panel.
| | 04:40 | So now it's now setup as a
library item. It's looking good.
| | 04:42 | I can go to say for instance My About
page, delete that Nav, it goes here, text
| | 04:49 | and replace it by just clicking and
dragging that Nav library item to that
| | 04:54 | page just like that.
| | 04:56 | Notice how it does left justify it.
| | 04:58 | Well I can change that because in my
Properties panel. It's because I have the
| | 05:02 | Paragraph format
associated with that library item.
| | 05:05 | So I'm going to select None
and that will center that.
| | 05:09 | So it's looking good.
| | 05:10 | I can save this page, move on down
the line to the Portfolio page right in here,
| | 05:17 | click and drag my Nav library
item and go to my Properties panel and
| | 05:23 | choose the format to None,
so it centers that content.
| | 05:30 | I'll save this page and my
last page is the Contact page.
| | 05:36 | So I could again make room for it,
click and drag it into that page and remove
| | 05:42 | any sort of formatting
that's making it left justified.
| | 05:46 | That's looking pretty good. I'll save
this page and sure enough, my navigation
| | 05:52 | is across all the pages.
| | 05:54 | And if I want to change this navigation,
all I have to do is double-click that asset
| | 05:58 | and I can change this to Contact Us,
and once I save this library item,
| | 06:09 | it asks me, hey do you want to update all of
these various files that use these library item?
| | 06:14 | Of course I do, because that's
why I made it a library item.
| | 06:18 | I'm going to click Update, and it goes
through lightening fast, and updates all
| | 06:23 | the library items, so I can click Close.
| | 06:25 | But if I go to those other pages, you could
see that it says Contact Us across the board.
| | 06:32 | So, again anytime you make a change in
the library item such as even removing
| | 06:36 | that word again and saving it, it's
going to ask you to update it wherever it
| | 06:40 | exists throughout your entire site.
| | 06:43 | Close and sure enough,
| | 06:47 | it just says Contact again.
| | 06:48 | So, I'll just save these pages one
last time and then go ahead and preview
| | 06:57 | this in a browser and you can see that my
navigation is consistent across all of the pages.
| | 07:03 | So, very powerful. It's similar to
CSS you could say, in that CSS separates
| | 07:09 | that style and really that
style affects multiple pages.
| | 07:13 | In this case, I have my content that
exists in a separate file, that is on
| | 07:19 | multiple pages, and the whole idea of
changing it once will change it in all
| | 07:24 | instances is really powerful and
really makes my workflow efficient.
| | Collapse this transcript |
|
|
6. Adding Visual ContentImporting and editing images| 00:00 | Just like with any design, it's
really a fine balance of images and text.
| | 00:07 | So, imagery versus content, and what's
really great is Dreamweaver gives you the
| | 00:13 | ability to import and position images
pretty anywhere you want and really gives you
| | 00:17 | a lot of control over those images.
| | 00:19 | Really, what I want to do is I want to
break up some of this text by adding an image.
| | 00:25 | So on this homepage I would like to
insert an image maybe on the right side.
| | 00:29 | And also on the About page, I'd
like to break up some of this content
| | 00:33 | within image as well.
| | 00:35 | Back to the Home page, all I need to
do is insert my cursor maybe after this
| | 00:41 | last quote here and to insert an image,
I just need to go to Insert > Image.
| | 00:49 | From there, all I need to do is go to
my Images folder and locate the image
| | 00:56 | I want to import and in this case,
it's going to be JaneDoe.jpg.
| | 01:01 | That's the image I want to import, so
I'm going to click choose, and then
| | 01:06 | I get this dialog box.
| | 01:08 | I get the opportunity to
add accessibility attributes.
| | 01:12 | So, what these are-- for instance, the
alternate text is going to be the text
| | 01:17 | that describes this image.
| | 01:18 | So, again it's an image of Jane Doe,
so it's pretty straightforward there.
| | 01:22 | But really this is the text that's
displayed. Before the image fully loads,
| | 01:27 | you might see this alternate text in place
of where the image will be once it loads,
| | 01:33 | as well as for screen readers.
| | 01:35 | So for the visually impaired, they
might have a screen reader that will
| | 01:40 | read this alternate text or even a long
description if I have it about what this image is.
| | 01:47 | I always want to make sure I
have alternate text for my images.
| | 01:51 | I'm going to select OK, and
sure enough, it inserts this image.
| | 01:57 | It's looking pretty good.
| | 01:57 | It's a good image, but I want to
position it differently on the page.
| | 02:01 | In fact again, I want
to move it to right side.
| | 02:04 | So it's really just a matter of
selecting that image and going down to the
| | 02:07 | Properties panel below. Down here, there
are some various editing options that I can do,
| | 02:14 | but what I want to
focus on is the Alignment.
| | 02:17 | So, I can change the Alignment from
Default to Right, Justified, and
| | 02:23 | we'll move it to the right side, and
don't forget the text in the page in
| | 02:27 | general is scalable.
| | 02:29 | So it has this liquid layout, so
it will wrap around that image.
| | 02:34 | So, it works pretty darn well.
| | 02:36 | I really like the effect that we're
getting there. It kind of breaks up that text.
| | 02:39 | That's just importing a JPEG.
| | 02:41 | I can also import other file formats.
| | 02:45 | In fact, if I go to the About page,
I want to insert an image say further down
| | 02:50 | on this page, down here, and I can
insert an image again and instead locating a
| | 03:00 | JPEG or a GIF or a PNG file or any
one of those sort of web image formats,
| | 03:08 | I can actually go to my Exercise Files,
into my Assets and I can locate a PSD,
| | 03:14 | which is not an image format for the web.
| | 03:18 | It's a Photoshop document.
| | 03:20 | So it's pretty large, but I really
want to use this PSD and if I select this
| | 03:26 | Thailand.psd and click Choose,
Dreamweaver gives me the opportunity to save
| | 03:32 | out this PSD as a JPEG.
| | 03:37 | In fact if I look on the left side,
I can choose which format I want it to be in.
| | 03:42 | I can select JPEG and maybe
adjust the quality and really
| | 03:47 | it's kind of a fine art
determining what the quality will be.
| | 03:50 | What I would also suggest you do is go
to your various saved settings because
| | 03:57 | there are already some pre-built in
here and really I want to go for better
| | 04:01 | quality for this, so I'm
going to select Better Quality.
| | 04:04 | In essence, that gives it a quality
of about 80%, so that's pretty good.
| | 04:08 | The image looks really good too. I would
say that's pretty darn good and that's
| | 04:12 | what I want to go with.
| | 04:13 | In fact it tells me the file size.
| | 04:16 | It would be right up here.
| | 04:18 | Again, I'll just select OK and now
that I have it optimized, so that's what I just did,
| | 04:24 | I optimized it for the web,
I can then save it into my Images folder.
| | 04:31 | I'm going to call it Thailand.
| | 04:34 | Click Save and it saves that JPEG.
| | 04:38 | So again, I get the opportunity to
give it some alternate text, Jane Doe with
| | 04:46 | Long Neck Karen Tribe.
| | 04:51 | Select OK and it puts that image right in there.
| | 04:56 | So again, I have the same issue where
it just drops the image right in there
| | 04:59 | where I have my cursor, but I really
want more control over the positioning.
| | 05:04 | I can change the Alignment from Default,
say for instance to Left if I want to,
| | 05:11 | and I can maybe move it around
or I can even change it to right.
| | 05:18 | I kind of like it on the right side better.
| | 05:20 | In fact I do want to move it down to Travels.
| | 05:23 | That fits pretty darn well in this
section and it's looking pretty good, but
| | 05:28 | I would like to change this image
and that's what's going happen is
| | 05:32 | you might import an image and you might
need to change it and if you import a PSD,
| | 05:37 | and you make the JPEG, there is
still a reference back to the original PSD,
| | 05:45 | the Photoshop file.
| | 05:48 | This is really helpful because this enables
me to do what is called roundtrip editing.
| | 05:53 | With this image selected, I can go to
Edit and I can select this PS icon,
| | 05:59 | which stands for Photoshop, but if I
click on it, it will open up that image.
| | 06:04 | In fact with that image open in
Photoshop, I can go ahead and adjust the image.
| | 06:11 | Maybe I'm going to change the
Hue or Saturation or anything.
| | 06:14 | I can go ahead and adjust and
maybe make it a little bit brighter.
| | 06:18 | Maybe a little more vibrant as well.
| | 06:21 | So, again, the original was like that.
| | 06:23 | Maybe the new image,
something like that. In fact,
| | 06:26 | I could even scale it down if I want to.
| | 06:33 | So, whatever edits you want to make
to it, you can do that all in Photoshop.
| | 06:37 | Shrink it down in the size so we get
sort of more of the environment in there
| | 06:43 | and then all I need to do is save this PSD file.
| | 06:48 | So, with this saved, I can even close
that file and go back into Dreamweaver and
| | 06:55 | with it saved, I then need to update
this image. In fact look what I get here.
| | 07:00 | It says hey, you know what?
| | 07:01 | The original asset was modified.
| | 07:03 | So it gives me the opportunity.
| | 07:05 | It doesn't just update it automatically.
| | 07:07 | I actually get the choice of updating
if I want to and in this case, I do want
| | 07:12 | to update this image.
| | 07:13 | So I'm going to go down to My
Properties panel and just go to this button
| | 07:19 | Update from Original.
| | 07:20 | If I click on it, it updates that image,
gives me two green arrows, kind of hard
| | 07:25 | to see over that tree, but you can see
I'm able to update that from the original
| | 07:30 | and it's looking really good.
| | 07:33 | Last thing, I'm gong to do is I'm
going to save this page and save this
| | 07:37 | Index page and Preview in Browser,
which is a common last step. I can see
| | 07:43 | that image looks really good,
breaks up that text, as well as the About page.
| | 07:47 | This image looks really good.
| | 07:49 | So again, Dreamweaver makes it really
efficient and just really easy to import
| | 07:54 | an image, to really spice up your site,
but not only that. It also builds in a
| | 07:58 | connection to other Adobe programs
like Photoshop, giving you the ability to
| | 08:03 | do roundtrip editing.
| | 08:05 | Really the result is hopefully a rich site,
full of dynamic content and imagery as well.
| | Collapse this transcript |
| Inserting SWF content | 00:00 | Another thing you might consider
adding to your website is Flash content.
| | 00:06 | Since this is the web, I really
would like some movement, maybe some
| | 00:10 | interactivity, whatever the case may be.
| | 00:13 | I want to take advantage of
what Flash brings to the table.
| | 00:18 | Say for instance this page, I want to
really add a Flash file up at the top,
| | 00:22 | an SWF file and again it's made it Flash
CS4 Professional and I want to put it
| | 00:28 | right up at the top, just to add simple
animation that's going to add sort of a
| | 00:32 | nice feeling to this page.
| | 00:34 | In fact, I want to add an SWF file to
all of these pages. There is going to be a
| | 00:40 | different one in the About page,
another one at the top of the Portfolio page,
| | 00:46 | and then another one on top of
the Contact page at the very top.
| | 00:51 | That's what I want to do, really
just jazz up my page with some SWF content
| | 00:56 | and how I'm going to do that
is I actually want that SWF file to
| | 01:05 | appear above this content div.
| | 01:09 | I'm going to go to Split View and
right above this content, right in here,
| | 01:18 | that's where I want to insert SWF.
| | 01:21 | Now, I could just as easily insert it
just like I would an image, but in this
| | 01:25 | particular case, I'm showing you that
you can actually point to a place in the code
| | 01:30 | and insert content as well.
| | 01:33 | So in this case, I'm not going to
insert an image. I'm going to go to down to
| | 01:38 | Media and I'm going to locate SWF.
| | 01:41 | I'm going to select SWF and I'm going
to go out to my Images folder and
| | 01:48 | I'm going to locate this index.SWF,
which is of course going on the Index page.
| | 01:55 | So with that SWF selected, I'm going
to click Choose and then I get a similar
| | 02:01 | dialog box as I do when I import
an image, which is give it a title.
| | 02:06 | What this SWF file says is
"Jane Doe Travel Writer and Photographer."
| | 02:16 | If I needed to have certain access
keys because there is content the user can
| | 02:22 | interact with, I might want to add
access keys or a certain tab index,
| | 02:28 | but there isn't.
There's just an animation.
| | 02:32 | Select OK and what it
does is it adds in the SWF.
| | 02:39 | In fact, look at all of this
code that Dreamweaver wrote for me.
| | 02:43 | It wrote all of this code, but if I switch to
Design View, you can see this SWF right there.
| | 02:50 | Let's check this out and see what it looks like.
| | 02:52 | Let's just go to File >
Preview in Browser and go to Firefox.
| | 03:00 | I'm first asked to save changes to my
page. I'm going to click Save and what I
| | 03:06 | get when I save this page, since there
is SWF content on it, it's telling me
| | 03:12 | that this SWF is also
using these other two files.
| | 03:19 | It creates this Scripts folder and it
puts that content in there, there is SWF
| | 03:24 | and this JS file as well.
| | 03:27 | So, when it comes time to upload this,
I need to make sure I upload these
| | 03:33 | items to my server.
| | 03:34 | So just be mindful that it makes those files
for me and sure enough, there is my animation.
| | 03:42 | In fact you just had this sort of nice
little butterfly that's animating there,
| | 03:46 | but this is SWF and again you get
the alternate text popping up as well.
| | 03:52 | But I'm not crazy about this blue.
| | 03:54 | It kind of breaks the design.
| | 03:55 | It's just a big blue box.
| | 03:58 | This SWF actually has a transparent
background, but I need to tell this webpage
| | 04:05 | to display the background as transparent.
| | 04:10 | So, let me close that browser and
let me select this SWF and down here,
| | 04:20 | for the properties of this SWF, I can
change the Window Mode to Transparent.
| | 04:28 | With that changed to Transparent,
I can save this page and I can preview it
| | 04:33 | in the browser and you can see it
makes the background transparent.
| | 04:37 | It really integrates this
design well with my page.
| | 04:41 | So, that's looking really good.
| | 04:43 | In fact again, I want to do that
across the board for the About page.
| | 04:47 | I want to go to Split View and
make sure I'm dropping in this SWF just
| | 04:53 | above this content div.
| | 04:57 | With my cursor there, I can Insert >
Media > SWF and locate that above.SWF created.
| | 05:05 | Click Choose. About Jane Doe.
| | 05:09 | That's what this SWF says.
| | 05:11 | It adds all of this code and again,
I can go to do Design View and you can see it here.
| | 05:17 | I can change the Window Mode
to Transparent, save my file, preview it
| | 05:24 | in a browser and you can see this animation now.
| | 05:28 | It's beautiful, works out pretty well.
| | 05:31 | You can see these little
dots sort of pulsing as well.
| | 05:34 | So, it works out well as
far as livening up a page.
| | 05:37 | Portfolio again, it's going to be the
same process of just below the Body tag,
| | 05:42 | before the div id content, I'm going
to insert an SWF and I'm going to locate
| | 05:50 | the portfolio.SWF file.
| | 05:54 | Select Choose, give it a title,
Portfolio of Jane Doe, select OK and
| | 06:02 | it writes all of that code.
| | 06:05 | Now notice when I save this file, it
doesn't ask me or tell me that it needs
| | 06:10 | this other two files because those
other two files you saw earlier are already there,
| | 06:15 | but again, I need to select this
and make sure that Window Mode is set to
| | 06:20 | Transparent, save it, preview it in the
browser and we can watch this animation,
| | 06:27 | which cycles through images.
| | 06:29 | Okay, the last one is going
to be the Contact.html. Again.
| | 06:34 | Split View. I want to drop it right
in here, Insert > Media > SWF Contact >
| | 06:44 | Contact. Contact Jane Doe, just like that.
| | 06:48 | For my last this SWF file, I'm going to
change the Window Mode to Transparent,
| | 06:55 | save my file and then preview
it in a browser one last time.
| | 07:00 | And then there is that animation.
| | 07:02 | So, again SWF content is a great way
to liven up any site and really give it
| | 07:08 | not only animation but this SWF file can
have interactivity, whatever I want it to have.
| | 07:15 | So, I encourage you to take advantage
of Flash when it comes to creating a
| | 07:19 | website because it really
will elevate your design as well.
| | Collapse this transcript |
| Improving data presentation| 00:00 | The whole goal of this
website is to deliver information.
| | 00:03 | This particular page throws a lot
of content at the user and although this
| | 00:08 | might work in print, on the web
it really does seem overwhelming.
| | 00:12 | I would rather give the user a page
with collapsed content and allow them to
| | 00:17 | select what they want to view next
and luckily Dreamweaver gives me the
| | 00:21 | ability to do this.
| | 00:22 | So I'll close this browser
and I'll go into Dreamweaver.
| | 00:24 | First thing I'm going to do is
just delete this About page text.
| | 00:29 | And as I scroll down, you can see
all this text but if I look at it more closely,
| | 00:33 | it's really grouped in two sections.
| | 00:35 | In fact, we have Published Writings
and Photographs, we have Employments and
| | 00:40 | then we have Travels.
| | 00:42 | I really need a module that will contain
these three areas and what I'm going to
| | 00:48 | use is I'm going to use what's known as Spry.
| | 00:51 | In Dreamweaver again, I have the
Classic workspace selected and I'm going to go
| | 00:57 | over to the Spry tab and really I'm
given all of these elements and what Spry is,
| | 01:02 | is it's a collection of technologies
that add functionality to my webpage.
| | 01:08 | And in this particular case, what I
want to add is this Spry Accordion.
| | 01:11 | I'm going to mindful of where my
cursor is and it's just going to be below
| | 01:16 | that first paragraph and then I'll
select Spry Accordion and it inserts it
| | 01:22 | wherever my cursor is.
| | 01:23 | All right, it's looking good so far.
| | 01:26 | In fact, if I select that Spry Accordion,
I can see my Properties panel tells me what it is.
| | 01:31 | I can give it a unique name.
| | 01:33 | I'll call it aboutAccordion.
| | 01:38 | All right, looking good so far.
| | 01:41 | But really there is just some
generic labels and generic content in here.
| | 01:45 | So I really want to replace this.
| | 01:47 | So I'm just going to select Label 1.
I want to replace this text with this
| | 01:51 | Published Writings and Photographs.
| | 01:53 | So what I'll do is I'll select this text.
| | 01:55 | I'll go to Edit and I'll cut it and then
I'll just sort of highlight Label 1 and
| | 02:02 | I'll paste the text I just cut
and I'll paste it right in place.
| | 02:06 | Kind of tough to see but I'll fix that later.
| | 02:09 | Okay, the next step is the content.
| | 02:11 | Again, I'll just delete that text here
and select that content for that area and
| | 02:19 | move it right below where it needs to go.
| | 02:22 | Again, I was just able to click-and
-drag that content right in there.
| | 02:27 | Next step is Employment,
where I can select that text.
| | 02:30 | Cut it again and right here
for Label 2, I'll do a paste.
| | 02:35 | All right, looking good so far, but
notice there is no content area for me to
| | 02:41 | paste this content into.
| | 02:42 | So all I really need to do is just roll
over that bar and select this eyeball to
| | 02:49 | expand that content area out.
| | 02:52 | Again, it's just a matter of
deleting that word Content 2 and taking this
| | 02:56 | content, selecting it all
and moving it right in there.
| | 03:01 | You can see I'm nesting all of this
content in there. So far so good.
| | 03:06 | You will notice that I only have two
panels and I really need three sections.
| | 03:12 | Well luckily if I just select this
Spry Accordion, I can go down to the
| | 03:17 | Properties panel and I can add a panel.
| | 03:20 | In fact, here are my first two listed.
What I can do is just hit this plus sign
| | 03:24 | and that will add a third panel.
| | 03:27 | Now, you can see that it adds it
right in here and again, it's the same
| | 03:31 | process of selecting say the word
Travels, cutting that text, selecting Label 3
| | 03:37 | and then pasting it.
| | 03:40 | Next step, Content 3, I'll just delete
that word there and I want to select this
| | 03:45 | content including the photo, and
just click-and-drag it right in there.
| | 03:51 | So far so good. In fact, I'm
going to go ahead and save this page.
| | 03:55 | So I'm going to go to File >
Save and this is what I'm given.
| | 04:00 | It's asking me to copy these dependent files.
| | 04:03 | In general, these files are being
copied to my local site and I need to make
| | 04:08 | sure I upload them to my server in
order for this page to work because this is
| | 04:13 | really not only the functionality to
make this Accordion work, but as well as a
| | 04:19 | cascading style sheet allowing me to
customize the look of this as well.
| | 04:23 | So it's adding those two files in there
and I'm really thankful that I'm given
| | 04:27 | this dialog box, so I know to upload
those and also know that I can actually
| | 04:31 | change the look of this Accordion.
| | 04:33 | And I'm going to select OK.
| | 04:34 | So this file is saved now.
| | 04:35 | I can go ahead and preview it in Firefox.
| | 04:37 | It's my page,. Again, much more user-friendly.
| | 04:43 | I can read this text here.
| | 04:45 | I can click on Employment
and get that information.
| | 04:48 | Scroll through it and
then I can click on Travels.
| | 04:51 | Yeah, not bad but overall I'm not
particularly fond of the color and
| | 04:56 | this will often be the case.
| | 04:58 | You will want to customize this widget more
to and sort of your webpage's look and feel.
| | 05:03 | So that's what I want to do next and in
order to do that, all I really need to
| | 05:08 | do is go into my CSS Styles because
just like that earlier dialog box said,
| | 05:14 | it said that it was adding this SpryAccordion.css.
| | 05:17 | And this is a Style Sheet
that I can also customize.
| | 05:22 | So really, it's just a matter of
selecting the items I want to change and
| | 05:26 | then changing them.
| | 05:28 | Say for instance, the AccordionPanelTab,
if I want to change that background
| | 05:32 | color from that medium gray, which I
really can't read the text at all, I can
| | 05:36 | always change that to, for instance, black.
| | 05:39 | The tab for the open panel, I can
change that. Since it is the open panel,
| | 05:44 | maybe I want to change it to the
gold or that orange color and that's
| | 05:47 | looking better as well.
| | 05:49 | These focused colors as well is when
the user selects this accordion panel,
| | 05:55 | it's going to change colors, if I want it to.
| | 05:58 | But for the most part, I want to keep
this the same, so I want the color to be
| | 06:02 | black for the sort of closed panel tabs
and then for the open panel tabs, I want
| | 06:07 | to change it to that gold or that orange color.
| | 06:11 | Both the focused and these default
accordion panel tabs are changed.
| | 06:16 | And that's all I'm really focusing on.
| | 06:19 | I do want you to also check out the
content area because if you noticed when I
| | 06:25 | viewed this earlier, I had to
scroll for some of that content.
| | 06:28 | Well, I can change the height as well.
| | 06:31 | So if I want this just to be a
little taller, in fact, let's make it 300
| | 06:35 | pixels, just type in 300.
| | 06:37 | You can see it expanded this panel down
and will enable me to view all of this
| | 06:42 | content without scrolling. All right.
| | 06:45 | So, I have modified the SpryAccordion.css
and I'll go to File and I'm going to
| | 06:51 | go ahead and preview this in a browser
and it's going to ask me, do I want to
| | 06:55 | save the CSS that I just modified and
I want to say Yes of course, because I
| | 07:00 | just spent time working on it.
| | 07:02 | Sure enough, this does
match my webpage a lot better.
| | 07:05 | I have this sort of orange color.
| | 07:07 | Still there is that gray
highlight which looks good.
| | 07:10 | Employment, I can click on that.
| | 07:12 | Change its colors as well.
| | 07:14 | Travels and you can see that all my content
fits in here a lot better than the previous size.
| | 07:20 | Again, I was able to quickly add
this functionality and group this
| | 07:24 | information together and it allows
the user to select the content that they
| | 07:29 | want to read without sort of throwing
all of this text at them at once and as
| | 07:33 | you have noticed it was really easy to
implement using Dreamweaver and the Spry Accordion.
| | Collapse this transcript |
| Adding a photo gallery| 00:00 | Dreamweaver has a lot of
functionality built-in but if you are looking
| | 00:04 | for something specific, it might
not be in the box such is the case for
| | 00:10 | this Portfolio page.
| | 00:12 | Really what I would like to add to
this is a photo gallery, something sort of
| | 00:16 | lightbox gallery which allow me to
select images and view them sort of at full size.
| | 00:22 | So that's what I want to add to this
page and really what I want to start doing
| | 00:28 | is looking in Adobe's Exchange site.
| | 00:32 | So adobe.com/exchange,
that's where I'm going to go.
| | 00:36 | And I'm going to select Dreamweaver and
I want to look in Dreamweaver Exchange
| | 00:43 | for a lightbox, for whatever
specific item you might be interested in.
| | 00:48 | So there are many different things in here.
| | 00:51 | Some of them you have to buy, some are
free to download but there is a quite
| | 00:57 | a few things in here.
| | 00:58 | Everything from Flash Video Players to
sort of web carts, all sorts of things.
| | 01:04 | But I'm searching for something specific.
| | 01:06 | In fact I want a lightbox.
| | 01:08 | So a lightbox web gallery.
| | 01:11 | Sure enough my search results return
this lightbox gallery, which looks pretty
| | 01:16 | darn nice and it has pretty high ratings.
| | 01:18 | Luckily, it is absolutely free so
all I need to do is click Download.
| | 01:24 | Now you will have to log in but once
you are logged in, you will get the
| | 01:28 | opportunity to open this file
up with Adobe Extension Manager.
| | 01:34 | So that's what this file gets added to.
| | 01:36 | So I'm going to select OK, I
accept the disclaimer, and it adds this
| | 01:42 | extension to Dreamweaver CS4.
| | 01:45 | And in fact, it gives me a little
description on what this gallery does and I'm
| | 01:50 | going to show you all of this stuff.
| | 01:53 | So with that added all I need to do is
launch Dreamweaver and I need to open
| | 01:59 | up my portfolio page.
| | 02:02 | Here I am, here is my portfolio page,
I'll delete that text on portfolio page.
| | 02:08 | I'll delete that photo gallery text there.
| | 02:12 | And let me look at my Insert menu
up here at the top and I have the
| | 02:16 | Classic workspace selected.
| | 02:18 | And if look through this I'll see TCN
Widgets, I'll select that and I can see
| | 02:24 | this little icon, the lightbox gallery.
| | 02:28 | So all I need to do is be aware of
where my cursor is and click that button and
| | 02:34 | it adds this lightbox gallery down here.
| | 02:38 | Now the first thing I want to do is I
want to save this page and when I do that
| | 02:44 | it tells me, this widget requires
supporting files, and it says that it's going
| | 02:50 | to copy all of these files
into the correct location.
| | 02:54 | But don't forget to upload
them when you upload your site.
| | 02:57 | So I can look through this list.
| | 02:59 | There is a sample lightbox layout.
| | 03:01 | This is a CSS file.
| | 03:03 | So in general, there is not only graphics;
| | 03:05 | there is cascading style sheets.
| | 03:08 | So that means I can change the style of this.
| | 03:10 | And some additional files
to make this lightbox work.
| | 03:15 | So I'm going to select OK. My images appear.
| | 03:17 | In fact that looks pretty good.
| | 03:19 | Let's go ahead and check out
what it looks like in the browser.
| | 03:23 | So File > Preview in Browser. Select Firefox.
| | 03:28 | Here is my lightbox gallery.
| | 03:30 | I can select say that first image and
it opens up and kind of gives this black
| | 03:36 | overlay which looks really good, and I
can go to the next image and again the
| | 03:42 | photo transitions one to the next. Perfect!
| | 03:47 | The only issue is these aren't my photos.
| | 03:50 | That's the first thing I want to change.
| | 03:52 | Let me close that browser and go back
into Dreamweaver and in here this is where
| | 03:58 | I want to change out my photos.
| | 04:00 | I'm going to select this first one
here and if I look in the Properties panel
| | 04:04 | down here at the bottom it
shows me the source image.
| | 04:08 | So all I need to do is change this
source image by clicking Browse for File.
| | 04:12 | In the images folder if I scroll down I
happen to have this portfolio folder and
| | 04:18 | I can select AngkorWat image, AngkorWat_sm.
| | 04:23 | Click Choose and that replaces that thumbnail.
| | 04:26 | I'm mindful of the size of these as well
so of course these images are pre-built
| | 04:31 | at 72 pixels by 72 pixels.
| | 04:35 | So that's the small thumbnail image and
it links to this larger image, so I do
| | 04:39 | need to change out this larger image
by clicking Browse for File and I'll go
| | 04:43 | down to portfolio, and I'll
select this large AngkorWat image.
| | 04:48 | Choose that and really it's the same
process for each which is changing the
| | 04:54 | source to a new photo and then also
changing what it links to as well.
| | 05:01 | Notice-- you are probably
starting to notice this pattern.
| | 05:05 | So I have this _sm and then I
have the full size image and no _sm.
| | 05:12 | Again, change this third one,
so to Morocco_sm, Choose.
| | 05:21 | And here is a little shortcut for you,
what I can do is I can just select this
| | 05:27 | entire source image, copy it.
| | 05:30 | So I'm doing a Command+C on the Mac or
Ctrl+C. And then I'm going to paste it
| | 05:36 | right in here because the only
difference between these two images is the fact
| | 05:40 | that this thumbnail has the _sm.
| | 05:43 | So I have typed that in, hit Enter.
| | 05:45 | So that might be a quick shortcut or
you can always go through these menus,
| | 05:50 | portfolio on down the line.
| | 05:54 | I swapped out all the images but this
still has some other issues, in fact let
| | 06:00 | me go ahead and save this page and
just view it one more time in Firefox.
| | 06:05 | So File > Preview in Browser.
| | 06:08 | Firefox is what I'm going to choose,
these are the correct images and now I
| | 06:13 | can call this my own.
| | 06:15 | Worked out perfect.
| | 06:16 | But I have this issue where I really
want this information to be centered in the
| | 06:24 | space and I might want to even change
the background color for instance because
| | 06:28 | I'm not a huge fan of at
least the majority of this gray.
| | 06:32 | That's the next step, which is going to
be changing the CSS for something which
| | 06:37 | you have downloaded.
| | 06:38 | So I'm going back into Dreamweaver, all I
need to do is select the border for this widget.
| | 06:48 | If I look in my CSS Styles panel I can
change this to current and notice that it
| | 06:55 | does have the background color right here.
| | 06:58 | So really it's just a matter of going
to your CSS Styles panel, selecting what
| | 07:02 | you want to change, in this case my
background color, change it from gray to
| | 07:07 | black just like that.
| | 07:09 | The next thing I want to do is
maybe change the width of this.
| | 07:12 | Now I can change it in
here if I want to as well.
| | 07:16 | So I'm going to change the width to about 95%.
| | 07:19 | Again, not 95 pixels, 95% like that
and that stretches it out and ultimately
| | 07:26 | centers that content.
| | 07:29 | If I click on View All of the CSS
Styles, you can see that here is my sample
| | 07:36 | lightbox layout that I was able to manipulate.
| | 07:39 | And I can go in further, in more
detail and edit some of these other details
| | 07:44 | if I want to as well.
| | 07:45 | I think it looks really good, in fact
let's just preview it in browser once more.
| | 07:49 | And make sure that page is saved, here
is my portfolio of places, has that black
| | 07:55 | background, it's centered
and it looks really good.
| | 07:59 | So again, anytime you want to sort of
extend the functionality of a page in a
| | 08:03 | real specific way but aren't sure where
to begin, I really encourage you to go
| | 08:08 | out to adobe.com/exchange to the
Dreamweaver section and then just look in there
| | 08:14 | for sort of any functionality you might
be needing to really enhance the look of
| | 08:18 | any experience you are
going for, for your website.
| | Collapse this transcript |
|
|
7. Adding a Contact FormAdding input text fields| 00:00 | The great thing about the web is
that it isn't a one way medium.
| | 00:04 | You can communicate with people and
the basic form of this communication is a
| | 00:08 | contact form, and that's exactly
what I want to add to this Contact page.
| | 00:12 | Let's do a little cleanup initially.
| | 00:15 | I'll just delete that
word Contact page at the top.
| | 00:18 | I'll delete this area but note that I
want to add an email and then a message
| | 00:25 | text area as well as an Enter Button.
| | 00:29 | I don't need any of that content
there right now. I can delete that.
| | 00:31 | I can even delete this line as well.
| | 00:34 | So here is my sort of blank area where I
want these text fields to go and I want
| | 00:42 | to go up and make sure I have the
Classic workspace selected because you will
| | 00:47 | notice the third tab in is the Forms tab.
| | 00:50 | And it's gives me this multitude of
selections for form elements, everything
| | 00:56 | from check boxes to radio buttons to sort
of drop-down list items, all sort of things.
| | 01:02 | But if you scroll over here, you will see
that there is a Spry Validation Text Field.
| | 01:07 | So these sort of green tinted items with
the star are Spry elements and they add
| | 01:14 | additional functionality beyond say
a typical text field in this case.
| | 01:20 | Again, I'm going to be mindful where my
cursor is and I'm going to select that
| | 01:24 | Spry Validation Text Field.
| | 01:26 | When I do that I'm given this
Input Tag Accessibility Attributes.
| | 01:32 | So from here I can go ahead and give
it a specific ID name, which is going to
| | 01:37 | be important when I need to start sort of
validating this form and sending the data out.
| | 01:41 | But I'm just going to type an email in there.
| | 01:44 | The Label is going to be your email,
let's type that in, and I'm going to
| | 01:49 | Wrap with the label tag.
| | 01:51 | This gets to be important when I pass
data out but all I'm doing right now is
| | 01:55 | just setting up this form.
| | 01:57 | So I'm going to wrap it with the label
tag, email, and I'm going to make sure
| | 02:04 | the text position is before the form item.
| | 02:07 | I might use it after the form item if
it's a radio button or a check box.
| | 02:11 | And then I can add access keys or tab
indexes, if I want to sort of have a
| | 02:17 | keystroke activate this box,
| | 02:19 | I can do that, such as e or sort of give
this a tab index number if I have a lot
| | 02:25 | of text fields but I don't in this case.
| | 02:27 | I'm going to select OK.
| | 02:29 | It says, hey, you know what,
you want to add a form tag? I do.
| | 02:32 | And what a form tag is, is just a box
where all this form information,
| | 02:37 | all these text boxes will go.
| | 02:39 | Now all that information will exist
inside of a form tag and when I hit the
| | 02:44 | Submit button, everything within that form
tag, all that information will be sent out.
| | 02:50 | It's like defining this sort of a larger group.
| | 02:53 | So the form tag is really just
this red line, so that's what that is.
| | 02:58 | Here is my Spry Text Field and I can
select it and when I select it, I'm given
| | 03:04 | the option of adjusting its properties.
| | 03:07 | So down here in the Properties panel,
I want to start the Type because if I
| | 03:12 | expand that out you can see that I
can make all sorts of different types of
| | 03:17 | texts fields depending on my objective.
| | 03:19 | In this case, I don't need
to add an IP Address or URL.
| | 03:23 | I want to add an Email Address.
| | 03:25 | That's the purpose of this field.
| | 03:27 | And when I select that I'm given
additional options. This is the additional sort
| | 03:33 | of Spry functionality that's added.
| | 03:36 | I can sort of adjust the preview states.
| | 03:39 | The Invalid Format will
actually say Invalid Format.
| | 03:43 | Since, this is an email address,
if they don't type in an email sort of
| | 03:47 | formatted text, then it's going
to give the user this message.
| | 03:52 | And say if it's a required
field, A value is required.
| | 03:58 | Valid, this is sort of the valid state.
| | 04:00 | It's going to give that a green tint.
| | 04:03 | But you might be wondering when this
happens, Invalid Format, when is this
| | 04:08 | message going to appear?
| | 04:09 | It's going to appear not only after
maybe they type something wrong, but
| | 04:12 | it's going to Validate on Blur.
| | 04:15 | So what that means is when they sort
of deselect that text area, it's going
| | 04:19 | to go ahead and check and see if
it's a valid email address and give that
| | 04:23 | message accordingly.
| | 04:25 | I can also add a hint in here so I can
type in email and that would be the text
| | 04:30 | that appears right in here, but
really that's the purpose of the label.
| | 04:33 | So it's not necessary.
| | 04:35 | All right, looks pretty good.
| | 04:36 | I'm going to go ahead and go to File
and Save and it says that this requires
| | 04:42 | some supporting files.
| | 04:43 | So this is a lot of code that is written
that I didn't have to write. This is great.
| | 04:48 | This JavaScript file makes this form
field work and this CSS, Cascading Style Sheet,
| | 04:55 | gives it its style.
| | 04:57 | So I can always go in and modify if I want
to use this Spry Validation Text Field CSS.
| | 05:03 | All right, so that's saved.
| | 05:04 | Now I'll go ahead and preview this in Firefox.
| | 05:08 | There is my text field. I can select it
and I can type in and I'll maybe just my name
| | 05:13 | and then when I click off of it,
it says, hey, you know what?
| | 05:17 | That's not the correct format. Please fix it.
| | 05:19 | So I can go back in here and type in
my correct email address, like that.
| | 05:24 | And again, this is on blur.
When I can click off of it,
| | 05:27 | it says, hey, you know what?
| | 05:29 | You did it correctly.
| | 05:30 | It has that green tint, congratulations.
| | 05:32 | So that's looking pretty good. I have my
email text field and I'm just going to hit Return.
| | 05:37 | And I want to insert another
Spry element, next one over,
| | 05:42 | the Spry Validation Textarea.
| | 05:45 | So I'm going to give the user the
ability to go ahead and write me comments
| | 05:50 | about how great my site is. Hey, why not?
| | 05:52 | So it's going to be a message.
The label will be comment.
| | 05:57 | How about comments?
| | 05:59 | Wrap it with the label tag, make sure the
Position is the label before, select OK.
| | 06:05 | And there it is, the Spry textarea.
| | 06:08 | So let's look at its options.
| | 06:10 | If I select this Spry textarea,
Properties panel down here.
| | 06:14 | The same sort of states. It's
going to be built into this text area,
| | 06:20 | which is good and I want to
make sure it validates on Blur.
| | 06:23 | Well, what am I validating for? I can
validate to make sure they are going to
| | 06:27 | shoot me an email but I
want to make sure they comment.
| | 06:30 | And it will validate it on Blur.
| | 06:32 | And then I could even include say for
instance the maximum number of characters.
| | 06:38 | If I don't want somebody writing me a
novel or I want to make sure there is
| | 06:41 | nothing malicious going on like
somebody just pasted in a ton of information
| | 06:45 | that's going to overload my inbox,
I might want to just cap the maximum
| | 06:50 | number of characters.
| | 06:52 | But not only that, I can include a
Counter which-- this is pretty darn cool.
| | 06:56 | I can give a character count or I
can give the characters remaining.
| | 07:02 | So since, they are only given 400
characters it's going to count down.
| | 07:06 | Definitely pretty handy and again if
I wanted to add a hint in here I could.
| | 07:10 | But it already says comments.
| | 07:13 | It's looking good so far.
| | 07:14 | The last thing I might want to do
with this form is add a submit button.
| | 07:20 | So again, the Forms tab, select Button and
I'll just give it an ID of submit. Select OK.
| | 07:28 | And it says submit right there.
| | 07:30 | Okay, the last thing I want to do is
I want to wrap all of this information
| | 07:35 | in the paragraph tag because notice how the
paragraph tag has everything left justified.
| | 07:42 | Well, I'm going to do that by selecting
all of that information, going to down
| | 07:46 | to my Properties panel, HTML section,
selecting Paragraph like that and then
| | 07:52 | it moves everything over.
| | 07:54 | In fact I can even format this a little
more if I wanted to such as by doing a
| | 07:58 | Return there. Going to stack everything.
| | 08:02 | Much more cleaned up. Gives me room
for the labels off to the side as well.
| | 08:07 | Let's go ahead and save this.
| | 08:10 | And again, it's asking me to save
the Textarea.css, the Textarea.js file,
| | 08:16 | and also remember that these files
need to be uploaded in order for this
| | 08:21 | form to work as well. Select OK.
| | 08:25 | And now let's preview it in Firefox.
| | 08:28 | As I scroll down, here is my form and
I can go ahead and type in my email address.
| | 08:36 | It says it's correct.
| | 08:37 | Comments, I love your site, something like that.
| | 08:46 | But as I typed, you can see that it's
starting to count down all the characters.
| | 08:49 | I have 342 characters left.
| | 08:52 | So if I want to go on and on about
how cool the website is I can do that.
| | 08:56 | But really it's just a matter of
clicking Submit and everything within this form
| | 09:01 | tag will be sent out.
| | 09:03 | But again, since the web is really a
two-way medium I can communicate with people.
| | 09:07 | Really the best way to do that
is with forms and as you just saw
| | 09:11 | they are really pretty easy to set up and
you can add as much functionality or form
| | 09:17 | elements that you want.
| | 09:18 | And really the next step would be to
make this button work and send that data
| | 09:22 | out to an email address.
| | Collapse this transcript |
| Sending data to an email address| 00:00 | In order to send this contact form data,
what I need to do is I need to upload
| | 00:06 | this page and when I click Submit,
I need to send this data to what's called a
| | 00:12 | contact form mailer.
| | 00:15 | First step is to upload this page, so
I do need to find a hosting provider.
| | 00:21 | So for instance, I'm currently using Go
Daddy, but you can use any sort of Web
| | 00:25 | hosting provider you want.
| | 00:27 | But from them you are going to get
three things and these are just three
| | 00:32 | things to remember.
| | 00:33 | You're going to get sort of an IP
address, or an FTP address to upload the site to,
| | 00:40 | but you also need a username and password.
| | 00:43 | It can often be your login name and password.
| | 00:47 | But you need those three things and
then you can go ahead and upload the site
| | 00:51 | and from there, they're going to
provide you a tool in this case, this form mail.
| | 00:58 | That's what they're going to provide
to you to sort of finish the process of
| | 01:02 | sending that contact form
data to an email address.
| | 01:07 | First thing I'm going to do is sort
of based on this information, my login
| | 01:12 | username and password and the FTP
address, I could go ahead and setup my site.
| | 01:18 | So that's the first step, setting up
this site in order to upload this page.
| | 01:23 | From the Files panel, I'll expand that up some.
| | 01:27 | I'll click Manage Sites and I'm going
to create a new site and it's going to
| | 01:34 | walk me through defining a site.
| | 01:36 | So, I'm going to say Jane Doe Contact Form,
because that's what I'm doing in this case.
| | 01:43 | I can call it whatever I want.
| | 01:45 | I could give it an HTTP address if I
want to, but again the purpose of this is
| | 01:51 | just to get my contact form working.
| | 01:54 | Do I want to use any of this server technology?
| | 01:57 | No, I'm just going to upload the page.
| | 01:59 | Where on your computer do
you want to store your files?
| | 02:03 | So again, I want to edit my local
copies and then I want to upload.
| | 02:07 | So let's define my sort of a local
copies and it's going to be in this Chapter
| | 02:12 | 07 > 02 Begin folder.
| | 02:16 | That's where all my files are going
to exist and then, How do you connect
| | 02:21 | to your remote server?
| | 02:22 | And this is the sort of most important part,
because I'm going to change this to FTP.
| | 02:28 | So from here, this is where I'm
going to use that information.
| | 02:31 | It's going to ask me, What's the
hostname or FTP address of your Web server?
| | 02:35 | Well, it happens to be ftp
.janedoephotography.com.
| | 02:42 | So, it's going to be something similar to this.
| | 02:44 | It might be ftp and then
maybe two forward slashes.
| | 02:48 | In this case it's just the dot, but
nonetheless, you are going to get the FTP
| | 02:51 | address from your hosting provider,
and I don't want to store them in any
| | 02:57 | particular server location.
| | 02:59 | It's just going to put it all files at
the root and then I want to provide them
| | 03:04 | with a login and then a password
and I could even Test Connection.
| | 03:14 | So, congratulations you've connected to
your Web server successfully. I'll click Next.
| | 03:20 | I'm not going to worry about checking
in and checking out. Click next again.
| | 03:24 | I get a Summary.
| | 03:25 | Everything looks good.
| | 03:26 | So I can click Done and now it
appears in my Managed Sites list.
| | 03:31 | Jane Doe Contact Form.
| | 03:33 | To keep an eye on, how the Files panel changes.
| | 03:36 | So I'm going to click Done. Okay.
| | 03:39 | So now, what I want to do is
upload this contact.html page.
| | 03:44 | In fact, I can select multiple pages.
| | 03:47 | In this case, the contact.html, the css,
the images, because obviously there
| | 03:52 | are images on this page and SpryAssets,
because there is Spry here as well as Scripts.
| | 03:59 | So any scripts that are in this
folder, I'm going to upload that as well.
| | 04:03 | And lastly the Library because I'm
using this library item at the top.
| | 04:07 | With all of those selected, all I need to
do is come up here and go to Put File(s).
| | 04:14 | I'll click Put.
| | 04:16 | And that also asks me, hey do you
want to put the dependent files, so there
| | 04:20 | might be sort of other files and maybe
I didn't select that this page it might
| | 04:24 | be using, and I'm going to say Yes.
| | 04:28 | There seems to be some other files on
the server and it doesn't have their date,
| | 04:33 | so it's saying hey, do you want
to upload all of these anyway?
| | 04:37 | Even though you're not sure if the
latest ones are on the server or not.
| | 04:41 | Nonetheless, I know I need to upload these
files and that's exactly what's going on here.
| | 04:46 | It's uploading all of these files.
| | 04:49 | The images folder is
probably going to be the largest.
| | 04:52 | But again the idea is just to get this
contact form up there then what I really
| | 04:58 | need to do is test this out.
| | 05:00 | I have that uploaded.
| | 05:02 | In fact I can go to a Web browser and type in
| | 05:06 | janedoephotography.com/
contact.html. Here is my page.
| | 05:16 | Here is my contact form.
| | 05:18 | But the thing is as I
haven't set up this button.
| | 05:21 | So that's my next step is to send
this data to a particularly unique server
| | 05:28 | technology provided by the hosting company.
| | 05:32 | What I need to do is go back to hosting
control center and the hosting company
| | 05:38 | will provide this form mailer form.
| | 05:43 | So any forms that are sent to Go
Daddy or basically through this site, it's
| | 05:51 | going to send that form
data to this email address.
| | 05:55 | And that's all you need to do.
| | 05:56 | Just type that right in there.
| | 05:57 | So that's all the information they need.
| | 06:00 | A lot of times, the hosting
company will provide some Help Center and
| | 06:06 | really you're going to look to this location
for any sort of form you might want to use.
| | 06:12 | And again we're dealing with Windows
Hosting Form Mailer and I'm going to make
| | 06:17 | sure I'm using this PHP.
| | 06:20 | But in general all I have to use, and all
I have to really point to is this PHP page.
| | 06:27 | So, here the hosting company has
provided me with this PHP page and the lot of
| | 06:32 | code that I don't have to write myself.
| | 06:34 | All I really need to know is
this <form action="/gdform.php".
| | 06:40 | I can go ahead and select that I can copy it.
| | 06:44 | So this is the form action that needs
to take place and anything within that
| | 06:48 | sort of form red box, all that data
will be sent to that email address.
| | 06:54 | So, let's go back into
Dreamweaver and here is my form, right here.
| | 07:00 | It's this red box and any of the
forms in here that data will be sent to
| | 07:05 | wherever I tell it to down here in the Action.
| | 07:07 | So the action again is going to be gdform.php.
| | 07:16 | So, it will be same.
| | 07:17 | It's this page and I'm going to
make sure it says post as well.
| | 07:20 | We'll go back in here, gdform.php.
| | 07:24 | In fact, if I'm curious about how this
looks, I can go to Split view and I can
| | 07:31 | see that the action says
gdform.php and the method is post.
| | 07:36 | So that looks good.
| | 07:37 | I'm going to go to Design view, since
I've just changed this contact.html page
| | 07:42 | and I'm going to go ahead and save
it and then go to Contact and Put.
| | 07:51 | In this case, I'm not going to put
dependent files, because they're already
| | 07:53 | uploaded and I can go to Firefox.
| | 08:00 | Go to janedoephotography.com/
contact.html page, Refresh it, type in
| | 08:06 | paul@paultrani.com, whatever comment I
want to send and when you click Submit,
| | 08:18 | it's going to send that data and
just defaults to the home page.
| | 08:21 | Now, the next step is to check my email
that I have defined back in my hosting
| | 08:29 | control center to see if I
have received that email.
| | 08:33 | So, here I'm in my email account.
| | 08:35 | That is the account that the
email was sent to and there it is.
| | 08:39 | Nothing too fancy because it is email,
but in general it lists the content that
| | 08:44 | was sent through that form.
| | 08:46 | Again, this technology was
provided by the hosted company.
| | 08:50 | So as long as my site is uploaded and
I'm passing the data to the form they provide,
| | 08:55 | it will send the email just as expected.
| | Collapse this transcript |
|
|
8. Testing and UploadingChecking for browser compatibility| 00:00 | So once you have your website created, the
next step is really moving into the testing phase.
| | 00:07 | Everything again looks great and
really all I have been doing up till this
| | 00:11 | point is just going to File and
previewing it in a browser and I have actually
| | 00:17 | just been using Firefox and this is
the sort of the extent of my testing so far.
| | 00:22 | I've been able to check out sort of these
different pages, and it seems like a pretty good site.
| | 00:27 | But again, this is just in Firefox 3.0.1
on a Mac and really I want to make
| | 00:36 | sure it's going to look good
in all browsers on all machines.
| | 00:40 | So, that's really my next step is to
check the browser compatibility of this site
| | 00:46 | and I'm just going to go
through page by page and check this out.
| | 00:49 | Instead of previewing in a browser,
I'm going to check the browser
| | 00:53 | compatibility for this page.
| | 00:56 | And what it does is it opens up
this Compatibility panel and it says no
| | 01:01 | issues were detected.
| | 01:02 | So it's working out quite well, and
it does tell me, hey if you want to get
| | 01:05 | started, you can always use this
little arrow over here to check for browser
| | 01:09 | compatibility that way, but in general
I don't get any errors with this page.
| | 01:14 | Let's go to the Contact page.
| | 01:16 | So from here, I can go to this
arrow if I want to and Check Browser
| | 01:20 | Compatibility on the Contact
page, no issues were detected.
| | 01:26 | Let's go to the About page.
| | 01:28 | The About page is a little more complex
because it does have this Spry Accordion.
| | 01:33 | Let's check its browser
compatibility and it doesn't have any issues.
| | 01:38 | You are probably wondering now,
what browsers it's checking against.
| | 01:41 | Well, go down to Settings to view all
of the browsers I'm currently targeting.
| | 01:48 | Everything from Firefox to Internet
Explorer on Mac and PC, Netscape, Opera and Safari.
| | 01:53 | They are all there, even the
versions are there as well.
| | 01:57 | So, this is what I'm checking this against.
| | 01:59 | But this is really nice.
| | 02:00 | I don't have to have all of this
browsers loaded on my Mac, nor do I even need a
| | 02:06 | separate machine to test these
browsers on, this does it for me.
| | 02:11 | I really appreciate this as well.
| | 02:13 | Portfolio page gets a little more
advanced, because again, we have this gallery,
| | 02:18 | so let's see how this one fairs.
| | 02:20 | Check Browser Compatibility, and it
goes through and it finds two errors.
| | 02:25 | The great thing about is
it says, hey you know what?
| | 02:27 | Found two errors on line 17 in the
Lightbox Cascading Style Sheet and this
| | 02:35 | error only affects Netscape 8.0, which let's
be honest not many people use that browser.
| | 02:42 | The second one is on line 17 and
affects sort of multiple browsers.
| | 02:48 | So, let's just check that up.
| | 02:49 | Let's go to lightbox.css.
| | 02:52 | Let's go down to line 17, there we are.
| | 02:56 | And really, this is just
talking about the overlay position.
| | 03:01 | The left is set to 0, which it
automatically defaults the left side to zero
| | 03:05 | anyways, so I would consider
this an unnecessary CSS property.
| | 03:10 | So, I can just remove that entirely.
| | 03:13 | So, let's run this again.
| | 03:15 | See if we get any other errors.
| | 03:17 | We do get a couple more
errors so let's check those out.
| | 03:19 | Line 57, and really this is the
process of finding the error or getting and
| | 03:25 | again, another scenario, this outline
is set to None, but if I'm trying to set
| | 03:30 | an outline, I would set it to something.
| | 03:33 | By default it's set to None.
| | 03:35 | So, I'll just remove that entirely as well.
| | 03:38 | Let's check the browser compatibility
again, and lastly we have this unsupported
| | 03:43 | property, this zoom property on line
61, so right down here, it says zoom.
| | 03:49 | Well, it does affect multiple browsers,
but it's not going to hurt anything if
| | 03:53 | I have this in there.
| | 03:55 | I would rather have this sort of zoom
effect with the gallery, work in some
| | 03:59 | browsers, then remove it completely.
| | 04:02 | The more advanced browsers will get
this experience and the older browsers
| | 04:07 | won't, and I'm totally comfortable with that,
but I just want to be aware of this going on.
| | 04:12 | So, I'm just going to leave that in there
entirely and I can go ahead and save this page.
| | 04:19 | I can go ahead and preview this in a
browser maybe one more time and just make
| | 04:23 | sure everything is going to be fine.
| | 04:25 | But again, that's the job of checking
for browser compatibility, making sure
| | 04:29 | this works without really having
all of those browsers on your system.
| | 04:33 | But really the testing phase is going
to consist of checking this in multiple
| | 04:38 | browsers on multiple machines, and
it's nice that Dreamweaver gives me that
| | 04:43 | capability from within the interface.
| | Collapse this transcript |
| Managing and uploading your site| 00:00 | The very last step you need to
do with any website is upload it.
| | 00:04 | So this is really an exciting step because
this is our chance to show it to the world.
| | 00:10 | What I need to do is I need to manage this
site and then upload all of the content.
| | 00:15 | I'm going to do that using the Files panel.
| | 00:19 | So down here Files panel, this is
currently just set to Computer, and I have
| | 00:25 | drilled down and really I've been
working with these files but what I want to do
| | 00:29 | is I want to click on this Manage Sites link.
| | 00:33 | That brings up this Manage Sites panel
and I can go ahead and create a new site.
| | 00:39 | This takes me through a wizard that enables
me to define a site, Jane Doe Photography.
| | 00:47 | I'm going to give it a URL, the URL I
have registered. So that looks good,
| | 00:55 | so if I do any link checking, it
will compare it against that URL.
| | 01:01 | It asks me if I want to use any
server technology such as ColdFusion, ASP.
| | 01:05 | I'm not writing any of those pages,
so they are not needed but if I wanted
| | 01:10 | to sort of write data to a database I
would want to change this to yes and
| | 01:16 | add those settings.
| | 01:17 | But I can always change that later if
I decide to add a database to the site.
| | 01:22 | All right, the next question.
| | 01:23 | How do you want to work with
your files during development?
| | 01:25 | Well, I want to edit theses local
copies like I have been doing on my machine
| | 01:29 | and then upload them to a server when I'm ready.
| | 01:31 | It's just a matter of defining these
sort of a local root folder, as it's
| | 01:36 | known on my computer.
| | 01:38 | So in this case, Chapter 08 > 02 Begin.
| | 01:41 | That's where I'm going to
define my local root folder.
| | 01:45 | I'm going to click Next.
| | 01:47 | And how do you connect to your remote server?
| | 01:51 | So this is the case where I want to
change this to FTP, and 90% of the time
| | 01:57 | it's going to be FTP.
| | 01:58 | You're connecting by FTP through
an FTP address to the web server.
| | 02:04 | From your hosting provider, such as Go
Daddy or however that might be, they're
| | 02:09 | going to give you an FTP address.
| | 02:12 | And it's going to look something maybe
similar to this, ftp.Janedoe, something
| | 02:20 | like that and then if you want to store
the site in a certain folder, you can do
| | 02:24 | that as well and then you need to
add your FTP login and the password.
| | 02:29 | Just like that login and then
whatever the password is and we can Save As.
| | 02:36 | But really it's this information, these
three items is all you need to be able
| | 02:42 | to upload your site.
| | 02:44 | Click Test Connection.
| | 02:46 | You connected successfully. Good job.
| | 02:50 | Select the OK. Click Next.
| | 02:52 | You can enable checking in and checking
out of files so if a lot of people are
| | 02:57 | working on this site, I can have this
sort of check in and check out features so
| | 03:00 | nobody overwrites anyone else' changes.
| | 03:03 | But since this is my own site,
I'm not going to worry about that.
| | 03:06 | Again, I can change that later if I want to.
| | 03:09 | Last screen just gives me a summary
of everything I have entered, so I can
| | 03:13 | select Done and it puts it
in this list of Manage Sites.
| | 03:17 | So Jane Doe Photography, once I hit
Done, be mindful of the Files panel
| | 03:22 | because it does change.
| | 03:24 | In fact, it shows me all of these
folders in green now, so it's ready to go.
| | 03:30 | And really what I can do is I can
check out all of these files, I can connect
| | 03:37 | to the remote host.
| | 03:38 | So I have clicked that and I have made
the connection to the web server and now
| | 03:45 | I can upload these files.
| | 03:48 | Another way to view this information is
expand it to show the local and remote sites.
| | 03:53 | Now there are already a lot of files
out there but if I click, it's going to
| | 03:57 | open up this Files panel.
| | 03:59 | So again these green files are the files
on my local machine and here is sort of
| | 04:05 | my remote view of the files there as well.
| | 04:09 | If I want to upload anything, all I
need to do is select those multiple files.
| | 04:14 | So I have done a Shift+
Select to select them all.
| | 04:18 | And then I just need to put them up on
the server, so I'm selecting the Up Arrow
| | 04:24 | similar to uploading which is what I'm doing.
| | 04:26 | If I click that, it asks me, hey, do
you want to put all the dependent files?
| | 04:31 | So if I put up an HMTL page, do you
want to put all of the images that are
| | 04:36 | associated with that HTML file?
| | 04:38 | And I want to say sure.
| | 04:40 | I mean I have all the files anyways.
| | 04:41 | And you'll sometimes get this dialog
box which is really helpful because it
| | 04:46 | says it can't find any information on some
of these files over here on the remote server.
| | 04:51 | It can't get the date.
| | 04:52 | So it doesn't know if you are
overwriting a new or a copy.
| | 04:56 | But all I know is I have the latest on my
hard drive because I just made this site.
| | 05:02 | So all I need to do is click Yes to All,
and it takes all of these files and
| | 05:07 | puts them up on the server.
| | 05:09 | Now there are quite a few images so
this might take a little while, but I can
| | 05:14 | also view the details as it goes
through, sure enough they appear over here.
| | 05:21 | So let me just close that Files panel.
| | 05:25 | And again notice if I expanded this out,
I can always, if I want to upload one
| | 05:30 | particular file, I can just hit the Put
button there and it will upload that as well.
| | 05:36 | Again, the same process can be done over here.
| | 05:39 | In fact, I'm also given the ability to
toggle between, say, the Local view and
| | 05:44 | the File view of all these sort
of remote files on the web server.
| | 05:50 | The key thing here is to
remember not to move these files, okay.
| | 05:54 | So if I go to this fly-out menu in the
upper right-hand corner, I'm going to go
| | 06:00 | to Reveal in Finder and what that's
going to do is open up that folder that
| | 06:06 | contains my entire site.
| | 06:08 | So the last thing I want to do is
accidentally, say, move this folder some
| | 06:12 | place else because when I go back into
Dreamweaver, it's going to look like it's broken.
| | 06:18 | It's not going to know where those files are.
| | 06:21 | That's the just of it.
| | 06:22 | Again, all I need to do is select
those files, hit Upload and it will upload
| | 06:25 | all of those files.
| | 06:27 | And really the next step is to go ahead
and not only preview this index page in
| | 06:34 | a browser, I can preview the local
version and I can even preview it against the
| | 06:40 | live version, and check
to make sure it is there.
| | 06:46 | It looks good.
| | 06:50 | In fact, if I look at my local version
again, I can see they look exactly the same.
| | 06:55 | And I can check all of these pages as well.
| | 07:02 | Portfolio page and then even the
Contact page with the contact form.
| | 07:09 | So as you noticed, it was fairly easy
to define a local site and to upload all
| | 07:14 | that content to a web server, and now I
have a complete website that I'm ready
| | 07:19 | to share with the world.
| | Collapse this transcript |
| Making your site search engine-friendly| 00:00 | So once your site is complete and you
have it uploaded and it's looking great,
| | 00:05 | the next step is to make sure people
who want to find you, can find you through
| | 00:11 | search engines and other media.
| | 00:13 | Let's take Google, for instance.
| | 00:15 | The idea is once your site is uploaded,
which it is, we want to be able to go to
| | 00:20 | Google and search on that name.
| | 00:22 | But what you need to do before you can even
consider it coming up in Google is submit it.
| | 00:29 | So you need to add a URL to Google.
| | 00:33 | That's what I want to do.
| | 00:34 | I want to add my
JaneDoePhotography.com to Google, so it comes up.
| | 00:41 | Add your URL to Google.
| | 00:43 | All I need to do is let them know of my site.
| | 00:46 | Tell them here it is, here's the
URL, and here is comments about it.
| | 01:05 | Jane Doe is a travel writer and
photographer, living in Denver, Colorado.
| | 01:09 | And you submit that information to Google.
| | 01:12 | Google will eventually
recognize that information and index it.
| | 01:17 | But while Google is doing that,
Google also gives you some Webmaster
| | 01:22 | guidelines to keep in mind.
| | 01:25 | These are things we should be keeping
in mind and some things we might
| | 01:28 | need to verify, as we have uploaded our site.
| | 01:32 | The first thing is
design and content guidelines.
| | 01:35 | We need to make sure some
technical guidelines are in place and then
| | 01:38 | quality guidelines.
| | 01:40 | When your site is ready, of course
we've submitted it, we might consider making
| | 01:44 | a sitemap using the Google Webmaster tools.
| | 01:47 | We also have to make sure we met
the design and content guidelines.
| | 01:51 | This is everything that I've
talked about prior, which is do we have
| | 01:55 | hierarchy and legible text?
| | 01:58 | Is the information useful and
rich and appropriate for our pages?
| | 02:04 | We've used text where we need to
use text instead of images to display
| | 02:09 | important information.
| | 02:12 | Make sure that your title elements and
all attributes are descriptive and accurate.
| | 02:17 | So let's verify some of that
information in Dreamweaver.
| | 02:20 | Here I am. In fact, I'll go to
Design view on this Index page.
| | 02:25 | So this is my Home page.
| | 02:27 | And I just want to check my title.
In fact, what I can do is I can go to Page
| | 02:32 | Properties, down to Title and Encoding as well.
| | 02:37 | So right here, Jane Doe
Photography. I might want to say Jane Doe
| | 02:41 | Photographer and Travel Writer. Click Apply.
| | 02:50 | So I've applied that to that page.
| | 02:53 | In fact, it's listed in the title up here.
| | 02:56 | So I want to do that across the board.
About Jane Doe, Photographer and Travel Writer,
| | 03:04 | for all of these pages.
| | 03:15 | It might look like I'm repeating
information and I am, but the more information
| | 03:20 | I have about Jane Doe being a
photographer and travel writer, the better chance
| | 03:31 | she'll have of coming up in a search engine.
| | 03:34 | So that looks pretty good for the most
part. All of these pages have a correct title,
| | 03:39 | which it has to be one
of the most important things.
| | 03:41 | Like Google's guidelines, we're saying
make sure the content is relevant,
| | 03:46 | make sure all of my images have Alt tags,
so I can select this image, and down here,
| | 03:51 | the Alt tag is Jane Doe and again,
I can do Photographer and Travel Writer.
| | 04:02 | I need to make sure this has some of
the same words, because Google will come in
| | 04:06 | and it will start scanning this page and
it's able to read all of this information.
| | 04:11 | So if somebody is looking for Jane
Doe, there is a good chance they will
| | 04:14 | find this page, because of the
information here and how there is a
| | 04:20 | hierarchy of information.
| | 04:22 | So this line, for instance,
the format is Heading 1.
| | 04:26 | Well, Google is going to know it's Heading 1.
| | 04:29 | It's going to know that it's a very
sort of prominent line on the page and
| | 04:33 | it's going to count toward this page's
advantage, when someone searches on any
| | 04:37 | of this information.
| | 04:38 | Some other things to remember is just to
remove any extraneous text such as this
| | 04:44 | homepage text down here, and really
just have appropriate content on a page.
| | 04:50 | In fact, not only do I need
appropriate content on all these pages, I need to
| | 04:55 | make sure other people
are linking to these pages.
| | 04:59 | The more people that are linking to my
site, that brings up my page ranking,
| | 05:06 | when somebody searches on Jane Doe.
| | 05:09 | So that looks pretty good.
| | 05:10 | In fact, I'll save this page.
| | 05:12 | I'll go to the About page and again
it's just a matter of going through and
| | 05:17 | double-checking everything and making
sure everything looks good, make sure I
| | 05:20 | have heading tags, whether it's
Heading 1 or additional headings, I want to
| | 05:24 | make sure those are in place, make sure the
title is appropriate for all of these pages.
| | 05:30 | Once you've done that, you've done the
basics as far as content and then imagery.
| | 05:36 | Now, another thing I want to do is I want
to insert HTML, something more descriptive.
| | 05:42 | In fact, I want to insert a description,
because now that I have all this data
| | 05:46 | on this page and search engines might
potentially find this page, I want to make
| | 05:53 | sure the description that's listed is
appropriate and we'll hopefully encourage
| | 05:57 | the user to click on this link.
| | 05:59 | So the page description is the description
that appears in Google when you do a search.
| | 06:06 | For this page, I went to HTML > Head
Tags down to Description and this is where
| | 06:11 | I want to type in the description.
| | 06:16 | Jane Doe is a photographer and travel
writer that has been published in major
| | 06:27 | publications for the past 15
years, something like that.
| | 06:34 | So again, I want to make
sure I have her name in here.
| | 06:36 | It's also in the Heading tag here
as well as the Title of the page.
| | 06:42 | I want her name to come up
if anybody does a search.
| | 06:45 | And really, it's the relevance.
| | 06:46 | Obviously, there is going to be more
people or more sites fighting over the word
| | 06:50 | photographer than there is Jane Doe.
| | 06:53 | So I'm being more reasonable thinking
that this site might come up when somebody
| | 06:57 | searches on Jane Doe,
especially Jane Doe photographer.
| | 07:00 | With that being said, there is that
information and I can just make sure to
| | 07:04 | copy that information and then I'll
save this page, but I want to make sure a
| | 07:09 | description is on every
single one of these pages.
| | 07:13 | I don't really want to copy the same
thing. Google is going to think that I'm
| | 07:18 | trying to trick it to hopefully help
my page ranking, when really Google
| | 07:22 | wants you to be honest and it wants you to
just put in a correct description of each page.
| | 07:28 | We need to fix this.
| | 07:29 | I'm going to still say she is a
photographer and travel writer, living in
| | 07:34 | Denver, Colorado with her
husband and the two dogs.
| | 07:43 | And again, on down the line,
Portfolio page, Insert > HTML > Head Tags >
| | 07:49 | Description. Jane Doe has an extensive
travel portfolio of over 60 countries.
| | 08:09 | Last page, I'll save this one. Insert >
HTML > Head Tags, down to Description,
| | 08:17 | Jane Doe can be reached for any project.
| | 08:34 | So I've repeated a couple of words here
and this is okay. I don't want to really
| | 08:38 | trick Google, but in general, I want
this page to be descriptive still of her
| | 08:43 | and that she can be reached or contacted.
| | 08:46 | So, really it's all about being
honest with your pages and taking all these pages,
| | 08:50 | saving them and then uploading them.
| | 08:54 | Once that's done and I can just come
over here and select these multiple pages
| | 08:58 | that I've just changed and upload them.
| | 09:01 | Again, since I have registered my site
with Google already and have adhered to
| | 09:08 | some of these Webmaster guidelines,
my site should come up or at least have a
| | 09:12 | better chance of coming up in a search engine.
| | Collapse this transcript |
|
|
9. Bonus SitesVisiting the bonus sites| 00:00 | Also included with your exercise
files are some additional bonus sites that
| | 00:05 | you can go ahead and use, sort of pick
apart, sort of see how they were put together.
| | 00:10 | But for the most part, there are three,
definitely different looking sites, all
| | 00:14 | based on the same content.
| | 00:15 | So you can see just one is a little
more feminine than the others you're going
| | 00:19 | to see, but again, it's the same content
just repurposed, mostly through a style sheet.
| | 00:25 | The second one is definitely more Goth
looking and darker, but you can tell it's
| | 00:30 | the same content, just repurposed differently.
| | 00:33 | The last one is just a real clean look
and not only is there different content,
| | 00:37 | but it works slightly differently as well.
| | 00:40 | It's all the idea of sort of taking
this content and applying these different
| | 00:44 | styles and graphics. It gives
you a totally different look.
| | 00:47 | I hope you find these sites helpful and
feel free to use them at your leisure.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | I hope you've enjoyed what you've learned
as well as what's possible in Dreamweaver.
| | 00:04 | I encourage you to be creative and
really just push the limits of Dreamweaver,
| | 00:08 | but most importantly, just have fun with it.
| | 00:11 | I really hope to see your work online
soon. Feel free to send me a link.
| | Collapse this transcript |
|
|
