IntroductionWelcome| 00:04 | Hello! This is Sue Jenkins, and welcome to
Designing Websites from Photoshop to Dreamweaver.
| | 00:10 | We'll start the training off by
showing you how to set up your Photoshop and
| | 00:13 | Dreamweaver workspaces for
working on a web project.
| | 00:17 | We'll then discover some simple ways
to plan your website effectively and
| | 00:21 | gathering the necessary content.
| | 00:23 | After that, we'll explore some design
ideas related to creating your web mockup
| | 00:27 | in Photoshop, and talk about
slicing and optimizing web graphics.
| | 00:31 | We'll then jump into Dreamweaver to
learn how to construct a webpage template,
| | 00:35 | work with AP div tags, then insert form
fields, followed by some tips and tricks
| | 00:40 | for search engine
optimization and accessibility.
| | 00:44 | We'll then work with some of
Dreamweaver's testing and validation tools to clean
| | 00:48 | up our code and validate our
code against W3C standards.
| | 00:52 | We'll wrap up with a section
dedicated to publishing via FTP and get some
| | 00:57 | suggestions about post-launch site maintenance.
| | 01:00 | So, whether you're brand-new to web
design or looking for ideas on ways to work
| | 01:04 | smarter, welcome to Designing
Websites from Photoshop to Dreamweaver.
| | Collapse this transcript |
| Using the exercise files| 00:01 | If you are a Premium member on
lynda.com, you have access to the exercise
| | 00:05 | files used in this title.
| | 00:07 | You can download a copy of these files
to your desktop, as I've done here, for
| | 00:11 | easy access when working through each lesson.
| | 00:14 | Inside the Exercise Files folder are
individual chapter folders that contain the
| | 00:18 | files used in individual movies.
| | 00:21 | We'll point out which files are being
used by displaying the relevant path to
| | 00:24 | those files at the appropriate time.
| | 00:26 | When you're browsing in Photoshop, you
can use the folders directly, but while
| | 00:31 | you're in Dreamweaver, we recommend that
you browse for files through the Files
| | 00:35 | panel after managing a site
through the Site Setup dialog box.
| | 00:39 | These files are here for your convenience.
| | 00:41 | They're not required, but they will make
your learning process a little easier.
| | 00:45 | If you don't have access to the files,
you can re-create them on your own or
| | 00:49 | simply follow along to grasp
core concepts in each chapter.
| | Collapse this transcript |
|
|
1. Design Tips and ToolsWeb design tips| 00:00 | Designing for the web is a bit
different than designing for print.
| | 00:04 | There's certain principles that you
should keep in mind, as far as the way
| | 00:07 | things are organized, usability,
visitors' browsing habits, and so forth, and you
| | 00:12 | certainly wouldn't want to end up
on this year's worst websites list.
| | 00:16 | So, I've gathered some resources
here that I think should be effective at
| | 00:19 | teaching you some skills if you don't
already don't have them, some principles
| | 00:22 | about designing for the web.
| | 00:24 | The first website has Principles of
Beautiful Typography, and typography on the
| | 00:28 | web has some limitations
compared to working with print.
| | 00:31 | In this article, you'll find
everything you need about learning about
| | 00:35 | typography for the web.
| | 00:37 | It goes into the
different types of web-safe fonts,
| | 00:40 | they talk about type letting,
text replacements, all kinds of things.
| | 00:45 | It's a long read, but it's really
worth the time that you'll spend
| | 00:48 | looking through this.
| | 00:49 | The next site has ten principles for
effective web design, and this is also a
| | 00:55 | really smart article.
| | 00:56 | They talk about usability, principles
of effective design. You try to put your
| | 01:01 | mind in the mindset of the visitor
and how they might understand or not
| | 01:05 | understand your websites, so you
want to have things like logical layout,
| | 01:09 | logical navigation, things like that.
| | 01:11 | The next site is sort of a repeat,
but they cover some different bases.
| | 01:15 | It's 9 Essential Principles for Good Web Design.
| | 01:17 | So, you'll scroll through here.
| | 01:19 | They have some examples about
things like guiding the eye.
| | 01:21 | I always like it when there're
screenshots on there, so that I can refer to it
| | 01:25 | while I'm learning about a
new principle or a new idea.
| | 01:27 | So, you look through here as well.
| | 01:29 | Now, this guy is not necessarily a web
designer, but I wanted to share this with
| | 01:33 | you because I think the principles of
design here can be applicable to anything,
| | 01:37 | including web design.
| | 01:38 | For instance, good design is innovative.
| | 01:40 | So, take a look at this one as well.
| | 01:42 | The last thing is Lost Principles of
Design, and this could really go for web or
| | 01:47 | for print, but I want you to think of
this in terms of web design and also
| | 01:52 | the reason I like this is that there's
visuals, almost like infographics visuals to
| | 01:56 | help you comprehend the different
concepts that are being explained here, such as
| | 02:00 | balance and contrast.
| | 02:04 | So please do spend the time looking
over these web sites and learning as much as
| | 02:08 | you can before you spend some time
going into the web design process.
| | Collapse this transcript |
| Web design tools| 00:00 | There are so many resources out on the Internet.
| | 00:03 | Sometimes it's hard to know where to look.
| | 00:05 | I've gathered several here for you
that I think will enhance your design
| | 00:08 | skills as a web designer.
| | 00:10 | This first one is called a pixel ruler,
and there's tons of them out there. I
| | 00:14 | just happened to grab this particular one.
| | 00:16 | You can use a pixel ruler on your screen
independent of any other software program.
| | 00:21 | So let's say you visit a web site and
you want to know how wide it happens to
| | 00:25 | be, the width of the layout.
| | 00:27 | You can turn on your free pixel
ruler and measure that horizontally or
| | 00:31 | vertically and get those dimensions right away.
| | 00:33 | The next tool that I think is important--
again, this is just a generic tool.
| | 00:37 | If you know of another one, you can go
and grab a different one or if you're on a
| | 00:40 | Mac versus a PC, you may have
heard of a particular color grabber.
| | 00:45 | Anyway, it's great to have an
independent color-picker program that you can have
| | 00:50 | available on your desktop, so that
you can sample colors from other things,
| | 00:54 | other photographs, other web sites,
other resources, rather than having to bring
| | 00:58 | that resource into Photoshop or
Illustrator or some other program that has a
| | 01:02 | built-in color picker.
| | 01:04 | This next tool is called Vector Magic,
and the reason I love this is because it
| | 01:08 | creates really clean conversions of
vector art from bitmap images. And you really
| | 01:14 | have to try it yourself to see how great it is.
| | 01:16 | So, just bookmark this web site and check it out.
| | 01:19 | Here's the web site that will help you
create your favicon if you didn't want to
| | 01:23 | create it in Photoshop or Illustrator.
| | 01:26 | So, this will let you draw it out, and
it shows you the little pixel grid. And
| | 01:30 | then you can output the file in a
variety of different file formats.
| | 01:33 | You should know about Google web fonts.
| | 01:36 | This is something that's sort of
exploding right now on the web design scene.
| | 01:40 | Before we would have to use certain
web-safe fonts, so that we were sure that
| | 01:44 | every visitor would see the same thing.
Now there's fonts hosted on Google's
| | 01:49 | web site that we can refer to and
then have them on our own web site.
| | 01:52 | So, spend some time looking around here
and seeing what's available and consider
| | 01:57 | using some of these on your
web site to really personalize it.
| | 02:00 | Sometimes when you're working you may
not have final copy, especially if you're
| | 02:04 | designing for someone else, in which
case you need placeholder text, which is
| | 02:09 | sometimes called the
Greeking type or Lorem Ipsum.
| | 02:13 | There are ton of generators out there
but I'm showing you this one because I
| | 02:16 | really like the layout and the options
that it provides for you, such as creating
| | 02:20 | numbered and ordered lists and things like that.
| | 02:22 | But there's some funny ones out there
too, like you can have one that gives you
| | 02:26 | all words having to do with beer
or all words having to do with fish.
| | 02:30 | But the nice thing about it is it
looks like English and it'll help you
| | 02:33 | lay out your pages or lay out your mockup while
you're working until you get that final copy.
| | 02:39 | This is a JavaScript encoding tool.
| | 02:42 | It's online, and what it will do is it
will encrypt your web e-mail addresses so
| | 02:47 | that you can plug the encrypted code
into your HTML web page and when it displays
| | 02:53 | in a browser window, it will be
difficult for spammers' spambots to decode it
| | 02:57 | and help protect an e-mail address.
| | 02:59 | Of course there's no real protection
these days anymore but anything that you
| | 03:02 | can do to help hide your e-mail
address from spambots is a good thing.
| | 03:07 | This next site is an online form
builder and what they do is they allow you to
| | 03:11 | create forms really easily.
| | 03:14 | It's a super-nice interface, and you can
even pay to have them host your form on
| | 03:18 | their web site and process
and collect the data for you.
| | 03:21 | It's an interesting option for you.
| | 03:23 | I'd like to tell people about it, depending
on how much data you're going to collect.
| | 03:27 | If it's not that much you can just use
some kind of PerlScript, but if you are
| | 03:31 | going to be collecting a lot
of data, this is a nice option.
| | 03:34 | Speaking of collecting data, you might
want to create a database of all of your
| | 03:38 | customers or have the ability to
create a database and then be able to send
| | 03:42 | newsletters and e-mail updates to that.
| | 03:45 | Mail Chimp is fantastic.
| | 03:47 | I highly recommend it.
| | 03:48 | And then the last tool that I'd
like to tell you about is FileZilla.
| | 03:51 | It's a free cross-platform FTP solution.
| | 03:55 | Dreamweaver does have a built-in FTP
program, and I'll teach you all about using
| | 04:00 | that, but some people prefer to have a
stand-alone software package, and FileZilla
| | 04:05 | is really a great tool to use.
| | 04:07 | So please do take advantage of some
of these ideas and use them in your own
| | 04:10 | web design process.
| | Collapse this transcript |
| Web testing tools| 00:00 | Before you publish any finished web
project on the Internet, it's really
| | 00:04 | important that you make sure that all
of your code is valid, accessible, and
| | 00:10 | renders properly in all of the popular
browsers, even some of the older versions
| | 00:14 | of the popular browsers.
| | 00:15 | I've gathered four web sites here that I
think are important that you should know about.
| | 00:19 | This first one is called the
W3C Markup Validation Service.
| | 00:23 | You can plug in the code, a web
address, or directly input or upload a file of
| | 00:29 | any web page and have it look through
the code and find any issues that might be
| | 00:34 | problematic. Then you can go in and
correct those and then retest until all of
| | 00:39 | your pages are valid.
| | 00:40 | I normally would do something like
this at the template stage before I create
| | 00:44 | all of my template-based pages,
then go back in and check each page
| | 00:48 | individually, because a little
validation issue could really cause broken pages
| | 00:53 | and display issues.
| | 00:55 | This next web site has to do with
accessibility, and it's pretty much the same
| | 00:59 | kind of tool, only in this case it's
looking to see that your code is as
| | 01:03 | accessible as possible to the widest audience.
| | 01:06 | So, it will be looking for things like
title, attributes, and alt the attributes
| | 01:10 | in your tags and your
links and things like that.
| | 01:13 | So you can do the same thing here:
enter a web address, upload a file or
| | 01:16 | actually copy and paste in some HTML code.
| | 01:18 | Now, as far as rendering goes, you may be
on a Mac and not have access to a PC or
| | 01:24 | vice versa, but you really should be
testing on both platforms, in the latest
| | 01:30 | browser versions, and then at least two
or three versions below whatever's the
| | 01:34 | latest. The Spoon.net Browser Sandbox
has this whole capability of showing you
| | 01:40 | how your page would look in
all these different browsers.
| | 01:43 | So you have access to Firefox, to Chrome,
to Safari, Opera, and Internet Explorer,
| | 01:48 | even some mobile browsers.
| | 01:50 | Adobe offers a similar tool in the Adobe
BrowserLab. So you would have to create
| | 01:56 | an Adobe account and then you can log
on here, and you can go directly from
| | 02:00 | Dreamweaver into the BrowserLab to
preview how your pages would look in a
| | 02:05 | variety of different browser situations.
| | Collapse this transcript |
|
|
2. Setting Up Your WorkspaceSetting up Photoshop| 00:01 | Designing for the web is a bit
different than designing for print,
| | 00:04 | so it's important that you set up
your document correctly before you begin
| | 00:07 | designing your web mockup.
| | 00:09 | The first thing you'll do is come
to the File menu and choose New.
| | 00:12 | This opens a New Document dialog
box, and here's where you can choose
| | 00:15 | everything you need.
| | 00:16 | Start with the Preset and choose Web,
and from here you can set your own size.
| | 00:21 | Now, these days designing for the web,
it's almost like anything goes, but you
| | 00:25 | want to appeal to the widest possible audience.
| | 00:27 | So you don't want to make your
web site too narrow or too wide.
| | 00:31 | For this reason, we're going to create
a mockup that's 960 pixels wide by 690
| | 00:39 | pixels high. And of course, if we need
more room we could certainly make it
| | 00:42 | taller while we're building our mockup.
| | 00:43 | But that should be enough space so that
the entire design, or most of the design,
| | 00:47 | fits within the browser window.
| | 00:50 | But of course, we have no control over
what our visitors are looking at, what
| | 00:53 | their monitor resolutions are, but this
is a good starting size for us anyway.
| | 00:57 | Leave the Color mode set to RGB and 8
bit, background Contents is just the
| | 01:01 | background color for your document,
we'll leave it set to white, and we don't
| | 01:04 | even need to mess around
with this whole Advanced area.
| | 01:07 | We'll just leave that alone and click OK.
| | 01:09 | Now, creating a document doesn't mean
that we've saved it yet, so you might want
| | 01:13 | to go ahead and give it a file name and
save it to your desired location. And we
| | 01:18 | can call this one cm_mockup.
| | 01:20 | Let's just save this to the Desktop for now.
| | 01:22 | So, not it's saved.
Now we can start working on it.
| | 01:25 | The other thing is you might
want to do is turn on your rulers.
| | 01:28 | So, you could show your rulers here.
| | 01:30 | Now, rulers should show you in pixels
rather than inches for working on the web,
| | 01:35 | and you can check that by right
clicking on the ruler. And if it's set to Inches
| | 01:40 | just choose Pixels. And of course you
have access to all these other units of
| | 01:43 | measure if you like, but
we're going to stick with pixels.
| | 01:46 | You could also turn on Grids,
if you like to work with a grid.
| | 01:50 | That's also accessible through the View
menu, Show > Grid, and you can toggle that
| | 01:54 | on and off with the keyboard shortcut.
And then another thing you might want to
| | 01:58 | do while you're working is to drag
out some guides to assist you in the
| | 02:02 | placement of your design.
| | 02:03 | So for instance, let's also turn on the
Info panel, so we can see as we're working.
| | 02:08 | So to create a guide, you click on the
Ruler, on the top or the left of Ruler.
| | 02:12 | Click and dragging you bring a guide out.
| | 02:14 | So, if we wanted to put a guide
exactly at, say, 100 pixels down or something
| | 02:17 | like that, we can look over here while
we're dragging to get that measurement.
| | 02:22 | And maybe we want to have a couple in
from the side, 10 or 15, 20 pixels in or
| | 02:27 | whatever it is. I'm not going to measure
these exactly, but this is how you drag guides in.
| | 02:30 | When you bring a guide in you can
reposition it at any time as long as you have
| | 02:35 | your Move tool selected. And of
course, if you want to remove a guide,
| | 02:38 | just click and drag it off
the artboard and it disappears.
| | 02:41 | Now, the choices that we make when
we're creating our documents really
| | 02:46 | help determine the dimensions, the
resolution, and the color space of our working file.
| | 02:50 | Once those are set, we can easily
move ahead with the creation of our web
| | 02:54 | design mockup.
| | Collapse this transcript |
| Setting up Dreamweaver| 00:01 | Before you begin any web project in
Dreamweaver, you need to do what's
| | 00:04 | called managing a site.
| | 00:06 | This process not only creates a
location on your computer for storing files
| | 00:11 | related to your particular web project,
but it also helps you take advantage of
| | 00:15 | Dreamweaver's robust site-wide editing
and site-management features that would
| | 00:19 | otherwise be unavailable.
| | 00:21 | For example, with the Manage Site you
can search for and replace text, tags, and
| | 00:26 | specific source code in all of the
sites' files with the single command, whereas
| | 00:31 | with an unmanaged site, you'd have
to search each file individually.
| | 00:35 | Managed Sites also make it easier to
create links to files and images on other
| | 00:39 | pages within your site.
| | 00:41 | Before I show you how managing a site works,
let's talk for a minute about file management.
| | 00:46 | Now, for a normal web project, you
would create a folder on your computer for
| | 00:50 | your projects and inside that folder you
would have folders for each project. And
| | 00:55 | inside each of those folders you
might have another set of folders, one for
| | 00:59 | graphics, one for invoices and
maybe one for the actual web project.
| | 01:03 | This would be the location here, inside
my Cupcake Mary HTML folder for example,
| | 01:09 | where you would manage a site in Dreamweaver.
| | 01:12 | This would be the location.
| | 01:13 | For our purpose, for training with the
exercise files, you'll be managing a site
| | 01:19 | to the individual chapter
folders, such as 06-01 or 06-02.
| | 01:24 | So, let's go back into Dreamweaver
and I'll show you how to manage a site.
| | 01:29 | There's a few ways that you can
access the site management dialog box.
| | 01:32 | One way is through the Site menu.
You can choose Site > New Site, and that will
| | 01:38 | open up the Site Setup dialog box.
| | 01:40 | You could also choose Site > Manage Sites.
| | 01:43 | This brings up the Manage Sites dialog
box, where you would see a list of all of
| | 01:47 | your managed sites. You could also
create a New manage site, and this brings up
| | 01:52 | the Site Setup dialog box.
| | 01:54 | Another way of getting there is
before you've done anything in Dreamweaver,
| | 01:58 | before you've managed any sites, at the
top of the Files panel is a link to the
| | 02:02 | Manage Sites dialog box.
| | 02:04 | Again, you could click the New and come
into the Site Setup area. Or always when
| | 02:08 | you click the dropdown menu here, at
the very bottom, is a link to the Manage
| | 02:12 | Sites dialog box where again, you can
click the New button to create a new site.
| | 02:16 | So, now that we're here, to create
a new site two steps, really easy.
| | 02:20 | First thing, give your site a name.
| | 02:22 | The name is totally up to you, for
your reference only. It doesn't print
| | 02:26 | anywhere; it's just a management feature.
| | 02:28 | So, we're going to work on
the Cupcake Mary web site.
| | 02:31 | So you could type in Cupcake Mary.
| | 02:33 | And then the next part is the most
important part, Local Site Folder.
| | 02:37 | So, for a typical project you would
have saved it to that project's folder and
| | 02:41 | then the name of your project, and then
the project folder called HTML, for that
| | 02:45 | particular customer's project folder web site.
| | 02:47 | But for us, like I said, we're
going to be managing a site to the
| | 02:52 | individual exercise files.
| | 02:54 | So, I'm going to go back to my Desktop
where I saved a copy of the exercise files.
| | 02:58 | We'll start in Chapter 6 for example,
and now this is the location that I'll
| | 03:02 | be managing the site to.
| | 03:04 | Click Save, click Done.
| | 03:05 | There's my list of Manage Sites, and I
could have as many of them as I want in there.
| | 03:09 | As a matter of fact, I can always come
back in here and edit at anytime, or I
| | 03:14 | can duplicate or I can remove
a site from the listing here.
| | 03:17 | Now, if you remove, you're not
actually deleting files from your hard drive.
| | 03:21 | You're just removing the pointer from
Dreamweaver pointing to the location on
| | 03:26 | your computer. And then of course, when
you're finished, click the Done button.
| | 03:29 | And what's great about a managed site
is that only the files for that location
| | 03:34 | are listed in your Files panel and then
you can double-click at any time to open
| | 03:38 | and close your files.
| | 03:39 | You don't have to go searching through
the File > Open menu, or you don't have to
| | 03:42 | go searching elsewhere on your computer;
everything happens inside Dreamweaver.
| | 03:46 | So, I just want to reiterate that for
the exercise files each time you start a
| | 03:51 | new lesson, you'll come in here,
you'll choose Manage Sites, you'll edit the
| | 03:55 | Cupcake Mary web site, and then you
switch the Local Site Folder from the project
| | 04:00 | that you were working on before
to the next set of exercise files.
| | 04:05 | Click OK, click Done, and you're
good to go for the next project.
| | 04:10 | Managing a site in Dreamweaver gives
you full control over all the files and
| | 04:14 | assets related to your individual web
projects, both while you're building your
| | 04:18 | sites and after they're completed.
| | 04:20 | For best results, manage your site
before you begin each new web project.
| | Collapse this transcript |
|
|
3. Planning Your SiteResearching the competition| 00:00 | Planning your site is one of the single-
most important things you can do to make
| | 00:04 | your web site successful.
| | 00:06 | As part of that process, the first
step should always be to research the
| | 00:10 | competition at the national,
regional, and local levels.
| | 00:14 | This will allow you to figure out what
you need to include on your web site and
| | 00:17 | even more importantly, to learn what not to do.
| | 00:20 | The first step in the process of
sizing up the competition is to do a general
| | 00:24 | web search using keywords that you
think visitors would use to find the web site
| | 00:28 | that you're working on.
| | 00:29 | So for our site, we might use the
words cupcake, organic, and bakery.
| | 00:34 | Take a look at the first several web
links in your results listing, to see how
| | 00:38 | these sites compare with your site's
vision and marketing strategy, and make
| | 00:43 | notes about your favorite parts of each site.
| | 00:46 | Next, narrow your search by adding
the general region or state; in our case
| | 00:50 | we'll add the keyword New York.
| | 00:53 | Again, take a look at the competition and
make notes about what is working and what isn't.
| | 00:59 | Notice any trends?
| | 01:01 | I'm seeing a lot of pink and brown.
| | 01:04 | Your last search should
be for local competitors.
| | 01:07 | So let's add Brooklyn in New
York City to research terms.
| | 01:10 | Notice how each search turns
up slightly different results.
| | 01:14 | You may need to tweak your search terms
or drill deeper into the search results
| | 01:18 | to find competitive sites,
| | 01:19 | but pay attention to things like colors
and font usage, layout orientation, and
| | 01:25 | the types of photos and graphics being used.
| | 01:28 | The slides we find can help guide us
in our quest to design the best site
| | 01:32 | possible that will
appeal to our target audience.
| | 01:35 | At the end of the researching process,
you should have a really good idea about
| | 01:39 | who the competition is and
what kinds of web sites they have.
| | 01:43 | If their sites have a lot of flashing
animations and bright glaring colors
| | 01:46 | or poor-quality photographs that make
it visually difficult to digest, learn
| | 01:51 | from those mistakes to make sure
that your site is well-organized,
| | 01:55 | informative, and easy on the eyes.
| | Collapse this transcript |
| Defining site goals| 00:01 | Every Web project has a set of goals,
whether it's to inform, promote, educate,
| | 00:06 | sell, gather leads, or share ideas.
| | 00:09 | Oftentimes it's a combo of these, and
knowing that can help to define certain
| | 00:13 | design aspects for the site.
| | 00:16 | When I work with clients, one of the
first things I ask them to do is to
| | 00:20 | describe the company's image as
they'd like others to perceive it.
| | 00:24 | Is the company professional or laid back?
| | 00:26 | Are they cutting-edge or traditional?
| | 00:28 | Do they have particular values
that are important to portray?
| | 00:32 | Are they nonprofit or family-owned?
| | 00:34 | What about their vibe?
| | 00:35 | Are they friendly, responsible or innovative?
| | 00:38 | Are they green or organic?
| | 00:40 | What else can you say about them?
| | 00:42 | The second thing that can help define
the goals for a web site is to describe
| | 00:46 | the target audience.
| | 00:48 | What are some of their demographics, such
as age, gender, education, class, race,
| | 00:54 | geographic location, religion,
politics, hobbies, or other interests?
| | 00:58 | Make a list of all the attributes
you'd like your target audience to have.
| | 01:03 | The third thing to do is to
describe a single ideal site visitor.
| | 01:07 | Who is this person?
| | 01:09 | What are their interests?
| | 01:10 | Why would they be visiting this web site?
| | 01:12 | What kind of personality traits do they have?
| | 01:14 | For example, are they into
sports? Do they watch TV?
| | 01:18 | Do they own any pets?
| | 01:19 | List anything about this person that would be
relevant to them wanting to visit your site.
| | 01:25 | For efficiency, you may want to gather
this information in a checklist that you
| | 01:30 | can readily access during the design process.
| | 01:33 | Then, when you finish gathering all
the information, you can create a project
| | 01:37 | profile that outlines what you've
learned, along with some of the content,
| | 01:41 | color, and design notes.
| | 01:43 | The better you can define the company
image, the target audience, and the ideal
| | 01:47 | site visitor, the clearer you can
be about the goals for your site.
| | 01:51 | Not only will this process give you
insight about the kind of information
| | 01:55 | site visitors will be seeking; it
should also clue you in on how the site
| | 01:59 | should look and function.
| | 02:01 | In planning your web site, you may
also find it helpful to check out Jen
| | 02:04 | Cramer's course, Website, Strategy and
Planning, also in the lynda.com Online
| | 02:09 | Training Library.
| | Collapse this transcript |
| Gathering content| 00:01 | If you haven't already figured out the
navigation and site architecture for your
| | 00:04 | new web site, now is the time, as you
will need to gather all the content for
| | 00:09 | your web site and organize it so that
it's easy to retrieve during the web
| | 00:12 | design and development processes.
| | 00:15 | Start by gathering up all the information you
intend to share with visitors on your web site.
| | 00:19 | You may have already pulled
together some brochures and product flyers,
| | 00:23 | service listings, fact sheets, reports and
bios, and other data that you think is relevant.
| | 00:28 | Some of what you gather
should definitely go on the site.
| | 00:31 | But you may not need to publish everything.
| | 00:34 | So, sort through your materials and
determine what to keep and what can go.
| | 00:38 | Next, ask yourself what pages
will be needed on this web site.
| | 00:42 | If you're unsure, look again at
what your competitors have done.
| | 00:46 | How many pages do they
typically have of their sites?
| | 00:49 | Be sure to pay attention to the pages
accessible through a navigation menu, as
| | 00:53 | well as pages only accessible
by a special button or link.
| | 00:57 | Here's a list of common
pages found on most web sites:
| | 01:00 | Home, About Us, Contact, Products/Services.
| | 01:04 | You might also see things like
Portfolio/Menu, Clients/Customers, News, Press
| | 01:11 | Releases, Calendar, Events.
| | 01:13 | Once you determine what pages you need,
organize your content into separate piles.
| | 01:18 | This will become the
basis of your Navigation menu.
| | 01:22 | You may also use the homepage content
for the basis of your web design mockup.
| | 01:26 | At all costs though, avoid redundancies.
| | 01:29 | You can always create multiple
links to the same page of information.
| | 01:33 | As for the order of your navigation, menus
typically start with About Us and end with Contact.
| | 01:39 | But some people like to put the most
important thing first, so maybe you want
| | 01:43 | to put your menu first in this case, or if
you're a designer, maybe your portfolio first.
| | 01:48 | The pages in between are totally up to you.
| | 01:50 | Now that you have your navigation
figured out, you'll create a site map diagram
| | 01:54 | or flow chart, to show how
the site will be structured.
| | 01:58 | This is what we call the site architecture.
| | 02:00 | Site maps typically have the homepage
listed on the top, which is then linked to
| | 02:05 | the main pages that will
appear on the navigation menu.
| | 02:08 | Then any sub-pages, if there are some,
will be listed underneath those main pages.
| | 02:13 | Another helpful step is to determine
what static content will appear on every
| | 02:18 | page of the web site, and this could
include things like your logo, which should
| | 02:23 | be in the same location on every page;
a tagline if you have one; navigation
| | 02:28 | menu; social media icons; a sign-
up form; a search box; and a footer.
| | 02:33 | Now at this stage, you should have all
the text that you need for your web site,
| | 02:37 | organized neatly into
one or more Word documents.
| | 02:40 | What you may not have yet, however, is
everything else you need for your site.
| | 02:45 | So here's a list of other
things to gather for your site:
| | 02:48 | logo and other branding graphics, PDFs
or other downloadable files, photographs,
| | 02:54 | illustrations, graphics, and media
files, such as audio and video files.
| | 02:58 | Now remember, to avoid violating
any copyrights, make sure that all the
| | 03:03 | graphics on your site are either original, or
that you've obtained the rights to use them.
| | 03:08 | There are many wonderful web sites
available where you can download royalty-free
| | 03:12 | artwork for free, or for
as little as one dollar.
| | 03:15 | And above all, choose supporting
graphics that support your site's goals.
| | Collapse this transcript |
|
|
4. Creating a Photoshop MockupCreating the layout and navigation| 00:00 | Starting with a blank canvas in
Photoshop is much the same as staring at a blank
| | 00:05 | canvas as a painter: the
possibilities are endless.
| | 00:09 | Fortunately with the web mockup,
certain elements must be present, such as a
| | 00:13 | header, body, footer, logo, and navigation.
| | 00:17 | Knowing this from the start of the
design process makes it much easier to block
| | 00:21 | out all the elements in a
logical and visually interesting way.
| | 00:24 | So we're starting out here with a document
that's set to 960 pixels wide by 690 pixels tall.
| | 00:31 | These days there is a shift toward
fluid design so that sites can be scalable
| | 00:36 | for multiple devices,
| | 00:37 | but for our purposes, we're going to
stick with a fixed-width design, which is
| | 00:42 | pretty accessible to most
people regardless of their device.
| | 00:45 | The first thing you want to do is make
sure your rulers are visible and make
| | 00:49 | sure your guides are visible, and
those are both accessible through the View
| | 00:51 | menu > Show Ruler > Show Guides.
| | 00:54 | And then the next thing we'll do is
bring out some guides onto the artboard.
| | 00:57 | Now one little tip I'd like to do is
show the Info panel while I'm doing these
| | 01:01 | things, so that I can make sure
that my measurements are precise.
| | 01:05 | I want to start by creating a space at
the top here that's 110 pixels tall.
| | 01:11 | So just looking over at my Info panel,
I'm going to stop when I get to about 110.
| | 01:14 | When I release my mouse, I've got that
selection, and when I drag out a guide,
| | 01:19 | the guide will snap to it.
| | 01:20 | I'm going to use that same measurement,
just dragging that down to the bottom,
| | 01:24 | so that my header and footer are equal
in height. And then I'm going to do the
| | 01:28 | same thing on the left, only this time
I'm going to go 10 pixels in, so there's 10.
| | 01:34 | I'm going to drag that off to the side as well.
| | 01:44 | Now we have our guides in place.
| | 01:46 | I'm going to place a copy of
the logo file into our document.
| | 01:52 | When you place a file, instead of copy
and paste a file, what that does is it
| | 01:57 | pastes your image in as a Smart Object.
| | 02:00 | And the thing about Smart Objects is
that you can scale, position, and transform
| | 02:04 | the placed image without any loss
of resolution or image degradation.
| | 02:08 | Now when it pops in initially, it's
going to have the Bbounding box on it, so you
| | 02:12 | could scale it now if you want to.
| | 02:14 | But to accept the placement, just hit
Enter or Return and then you can position
| | 02:18 | it anywhere on the artboard. And notice
in the Layers panel that it has a tiny
| | 02:23 | little icon here on the bottom part
of its thumbnail. That is a visual
| | 02:26 | indication to you that it's a Smart Object.
| | 02:28 | So you could at any time scale it,
again like I say, without any loss of
| | 02:32 | resolution or quality.
| | 02:34 | You can place a lot of different
kinds of files into a Photoshop document,
| | 02:38 | including other Photoshop files,
PSDs, Illustrator, Files AI, and EPS.
| | 02:44 | You can even do optimize web graphics,
JPEGs, PNGs, GIFs, and even PDFs.
| | 02:50 | For your navigation bar, you need to
decide whether you want a horizontal or a
| | 02:55 | vertical layout, so let's do horizontal.
| | 02:57 | You grab the Type tool, as I've done
here, and click your cursor anywhere
| | 03:01 | and using whatever font you want, and font
size at this point you can change it later.
| | 03:05 | I've got it set to Verdana, Regular, 12 point.
| | 03:08 | Just type in the Main menu items,
leaving about eight spaces between each of them.
| | 03:13 | I'm just going to put my Caps Lock on and do
About Us, Our Menu, Locations, and Contact.
| | 03:21 | All right, we can
position that wherever we like.
| | 03:23 | Its position at this point is really irrelevant;
| | 03:25 | we're just blocking things out onto our page.
| | 03:29 | Next you'll block in the rest of the
text for the homepage, and place the
| | 03:32 | Cupcake of the Month photo,
using the File > Place command.
| | 03:35 | You can find all the content for this
page in the Word file called CM Website
| | 03:40 | Content.doc. Snd I've got that file open here.
| | 03:43 | So I'm going to start by copying in the gooter.
| | 03:46 | I've got three separate lines of
content for the gooter, so I'm just going to
| | 03:49 | place them in one at a
time, Grabbing my Type tool.
| | 03:52 | So back in here, I'll do the next line.
Copying with the keyboard shortcut,
| | 03:56 | coming back to my document
and pasting and so forth.
| | 04:00 | One more to go, from the footer. And
its position, where it is in the Files
| | 04:06 | panel or where it is within the
Footer area, again not that important.
| | 04:11 | I can reposition these. This is just
getting the content on the page. Where they
| | 04:14 | sit at this point doesn't really matter.
| | 04:18 | Let's go grab the rest of the content.
| | 04:20 | So there is this.
That's like the main body area.
| | 04:23 | Now notice before when I was pasting
on my copy text, I was just clicking
| | 04:27 | once and then pasting.
| | 04:29 | But you could also create Area Type or
you click and drag to create a box, that
| | 04:33 | bounding box for your type, so that
when you paste it, it'll wrap within the
| | 04:36 | confines of that box.
| | 04:39 | The last thing I want to grab is some
sidebar content. So copying this, and
| | 04:46 | the Type tool again.
| | 04:47 | Now for this one, actually
I have three little pieces.
| | 04:51 | I'm going to cut that off and do that again.
| | 04:55 | And I don't need the one that says photo,
because I'm going to bring a photo in here.
| | 04:59 | So let's go grab that File > Place, and
that's our Cupcake of the Month picture.
| | 05:06 | We'll put that over here. Enter, moving it over.
| | 05:09 | And this is like roughly how I would
want the page to look, but again, we're not
| | 05:14 | in the design place right now.
We're just blocking out our content.
| | 05:18 | So blocking out all the elements of
your web mockup like this, it's the first
| | 05:22 | step toward creating your design.
| | 05:24 | It also helps you to begin to
visualize how the finished project should look.
| | 05:28 | The last thing that you might want to
do before you begin choosing fonts and
| | 05:32 | colors is to tidy up your Layers panel.
Select the layers and create folders
| | 05:36 | for header, body, and footer. So for
instance, I know where my navigation is up
| | 05:41 | here, and that would be in the
header. So would this, the logo.
| | 05:45 | So I'm going to select both of them,
just click and then Shift+Click.
| | 05:48 | If you go to the Menu option up at the
top, you could say New Group from layers
| | 05:52 | and we'll call this one Header. And
then there's Fair Trade, Cupcake of the
| | 05:55 | Month and Cupcake Mary.
| | 05:56 | That's the body stuff, so I'm
just going to click and Shift+Click.
| | 06:00 | Create a new group called Body.
And then these are my footers.
| | 06:05 | We'll do that as well. And now with
your layers in the Layers panel as well as
| | 06:10 | your actual layers and folders and
things, you can reposition these. So I might
| | 06:13 | want to put my header at the top and
body in the middle, and the footer at the
| | 06:17 | bottom, and there is that
image standing out there.
| | 06:19 | That was part of the body, so I'm
just going to drag and drop it in here.
| | 06:22 | So everything is nice and neat and
organized, and I can expand and collapse as
| | 06:26 | I am working to keep things relatively in place.
| | 06:30 | Once you have the logo, navigation,
and text in place, you can shift your
| | 06:34 | focus to the design.
| | Collapse this transcript |
| Working with fonts and colors| 00:01 | Strong web designs use a cohesive set
of colors and fonts to communicate a
| | 00:06 | person or company's brand
objective to the desired target audience.
| | 00:10 | This means that choosing the right
colors and fonts is an important decision
| | 00:15 | that helps determine the
overall effectiveness of the site.
| | 00:18 | Fortunately, thanks to technological
improvements to video display and access to
| | 00:23 | fonts, today's designers are no longer
limited to the 216-color web-safe palette
| | 00:30 | or the handful of cross-platform web-safe fonts.
| | 00:35 | Let's talk color first.
| | 00:37 | When selecting our colors, it's best to
choose a limited palette that reflects
| | 00:41 | the site's objectives and
conveys the desired mood.
| | 00:45 | For this project, I've already selected
three colors from the logo to accent the
| | 00:50 | navigation bar, page
headers, and graphic elements.
| | 00:53 | These colors are in their own
folder up here in the Layers panel.
| | 00:57 | We'll give the layout a friendly,
happy, warm, and welcoming feel.
| | 01:02 | For a cohesive design, try to limit
the number of colors in your layout to a
| | 01:08 | maximum of three or four.
| | 01:10 | Now on the web, we're using RGB
colors, and RGB colors for the web can be
| | 01:16 | specified as hexadecimal values or hex
numbers, which are made up of three pairs
| | 01:21 | of numbers and/or letters, preceded by
the hash tag, as in #000000 for black
| | 01:28 | or #FFFFFF for white.
| | 01:31 | You can access these hexadecimal
values through the color picker, and you can
| | 01:35 | click on your foreground or background color
and it will pop-up the Color Picker dialog box.
| | 01:40 | In here is where you can have
access to those hexadecimal values.
| | 01:43 | So you can pick any color on the
slider, any shade, and you'll see the RGB
| | 01:48 | values, even CMYK values,
but there's your hexadecimal.
| | 01:52 | So if you're unsure of a color, you can
go in and sample a color, double-click
| | 01:56 | there to copy the hexadecimal value,
then you can use that when you're building
| | 02:00 | your web site if you need the hex value
for something. Or if you have a value in
| | 02:03 | RGB or CMYK value that you need to
specify in your design, you can plug that
| | 02:07 | number in here and then
go ahead and work with it.
| | 02:10 | So let's tackle our navigation bar first.
| | 02:13 | So I'm going to select that so that we
have that layer selected and the changes
| | 02:17 | that we make will modify that layer,
and I'm going to open up the Character
| | 02:21 | palette and then click this color so
that that text color picker comes up rather
| | 02:25 | than the regular color picker.
| | 02:27 | And we want to change it from black to blue.
| | 02:29 | Now I happen to know the
hexadecimal value here and the hash tag is
| | 02:32 | already there for me,
| | 02:33 | so all I need to do is
plug in the appropriate color.
| | 02:36 | Don't worry about lowercase,
uppercase at this point;
| | 02:39 | you just need the letters and the numbers.
| | 02:41 | So that's the color that I'm looking for.
| | 02:43 | It's a color that's sampled from the
cupcake in the logo, and of course I
| | 02:46 | could use the Eyedropper tool, but I happen to
know the hexadecimal value and I've changed it.
| | 02:51 | Now we'll add a header to the body area.
| | 02:53 | So I'm going to go into the body area
and grab my text cursor and click right in
| | 02:59 | here, and we'll type the word welcome.
| | 03:01 | Let's make it all caps, WELCOME.
| | 03:04 | Now we can put these things in position
roughly where we think they'll be at some point.
| | 03:09 | Let's also reconfigure
the layout for our footer.
| | 03:12 | We've got three separate things here going on.
| | 03:15 | Let's put like the social media on the right.
| | 03:18 | For these, maybe we'll end up
making two rows or something like that.
| | 03:22 | We can always play with the actual design of
it later on. And for here, some line breaks here.
| | 03:28 | How about--oops!
| | 03:29 | Just created a new layer
accidentally. All right!
| | 03:32 | So, we'll put e-mail, telephone,
copyright on its own line. That'll do.
| | 03:38 | And while we're at it, let's
add some headers to our footer.
| | 03:43 | Do something like HAVE A LOOK AROUND.
And then we'll make another one. Let's just
| | 03:49 | copy and paste. And that one will be GET
IN TOUCH. And then we'll do that again,
| | 03:56 | slide it over, and modify it.
And this one will say FOLLOW US.
| | 04:02 | Later on, we can bring in
some logos for our social media.
| | 04:07 | Now let's think about fonts.
| | 04:09 | Like colors in a web design, try to
keep your fonts to a maximum of three, like
| | 04:15 | one for the header, one for the body,
and perhaps a third for accent features
| | 04:19 | such as sidebars, footers, or navigation.
| | 04:21 | Now remember, to keep your site as
accessible as possible to visitors using
| | 04:25 | whatever devices that they are using to
access your site and search engines, the
| | 04:30 | menu items and as much body text as
you can allow should be rendered as HTML
| | 04:35 | rather than graphics.
| | 04:37 | There are several web-safe fonts that
you can choose from, such as Arial, Verdana,
| | 04:42 | and Georgia, but with the advent of
Google Fonts and similar services, your font
| | 04:47 | options should have improved dramatically.
| | 04:49 | You can find more information about
Google Fonts at google.com/webfonts.
| | 04:55 | For this project, however, we're going
to stick with web-safe fonts, and we'll
| | 05:00 | use Century Gothic and Arial.
| | 05:03 | Let's change the navigation font.
| | 05:05 | So selecting it here. We'll change the
navigation font from Verdana to Arial, and
| | 05:10 | let's also make it a little bit bigger.
| | 05:13 | How about 23 points and Bold?
| | 05:17 | Let's do the same thing for that WELCOME.
| | 05:19 | Let's change the size on that.
| | 05:20 | Okay, let's change that to 30, but let's
change the font as well to Century Gothic.
| | 05:27 | Let's make it Bold.
| | 05:29 | While we're here, let's also go to the body
text and change that, again to Century Gothic.
| | 05:35 | Bump up the size to 14 and we'll change
the color to a gray that we happen to know
| | 05:40 | the hexadecimal value for.
And we can specify the leading.
| | 05:46 | Now leading on the web is a little bit
different than leading in a web mockup,
| | 05:50 | but you can control that
with cascading style sheets.
| | 05:54 | Let's also change that Fair
Trade and the Cupcake of the Month.
| | 05:59 | Since these two layers aren't
side by side, I am clicking on one, then
| | 06:03 | Ctrl+clicking or Option+clicking
the other one so that they can both be
| | 06:06 | selected at the same time.
| | 06:08 | With them both selected, I can change
them to the same font and font color at
| | 06:12 | once without having to do them individually.
| | 06:15 | Let's change these to Century Gothic
as well, 21 point, and we'll choose a
| | 06:20 | chocolaty brown color.
| | 06:23 | Now, let's make that bold, but we
need to add a little line break there.
| | 06:30 | So, I'm just putting my cursor
into that layer. There we go.
| | 06:34 | Now, if I need to, I can
move things over a little bit.
| | 06:37 | Again, placement at this point,
we're just getting things blocked out and
| | 06:41 | colorizing and changing fonts and everything.
| | 06:43 | This isn't the final design.
We're just getting started.
| | 06:46 | And now, let's also change
the headers for the footer area.
| | 06:51 | I'm going to select all three, just Shift+
clicking back into my Character palette.
| | 06:57 | These will become Century Gothic,
Bold, 14 point, and let's make it blue.
| | 07:04 | Again, I know the hexadecimal
value that I'm going for here,
| | 07:09 | so I'm just plugging it in. And let's do the
same thing for all three layers in our footer.
| | 07:18 | We'll change that to Arial, 13 points, and a
gray to match the body text. There we go.
| | 07:27 | So, it's pretty amazing, from a design
perspective, how simply changing the fonts
| | 07:33 | and colors in a layout can transform a
few blocks of text into the beginnings of
| | 07:38 | a cohesive web layout.
| | 07:40 | Choosing the right fonts and colors for
your project will help communicate ideas
| | 07:44 | and emotions that go beyond the words on
the screen. Plus if you keep your color
| | 07:49 | palette down to two to four colors and
the layout with a maximum of two to three
| | 07:53 | fonts, your web design should
have a strong cohesive vibe.
| | Collapse this transcript |
| Styling the header content| 00:01 | Now that we selected our colors and
fonts, the next piece in the design puzzle
| | 00:04 | is to pull all the graphic
elements together in a cohesive way.
| | 00:09 | Right now, the layout looks pretty
sparse, so we definitely need to add some
| | 00:12 | visual interest with some photos and
buttons and bullets and then move a few
| | 00:16 | things around so that it all goes together well.
| | 00:19 | Let's start by adding a photo banner
across the top, underneath the logo.
| | 00:24 | Now our photos should illustrate something
relevant about the content on the page or
| | 00:28 | about the identity of the site.
| | 00:30 | Since this web site is for a cupcake shot,
I have pre-selected cupcake graphic to
| | 00:35 | use as the banner on the homepage,
and I have saved it into a file called
| | 00:39 | CM_BannersPhotos, which I have open here.
| | 00:41 | Open that file, copy the visible
layer, and paste it back into your
| | 00:45 | other working document.
| | 00:47 | So let's do rectangular marquee, Copy
switch back over, and we will Paste.
| | 00:54 | Drag it up to the guide there and
you should feel it snap into place--
| | 00:59 | one of the reasons I love working with guides.
| | 01:01 | Now everything else is sort
of too close to the top now,
| | 01:04 | so we need to move some elements.
| | 01:06 | So what I might do is actually first
let's drag this header up into the header
| | 01:10 | area, the banner, and call it banner.
And then let's move the navigation down.
| | 01:16 | In fact, let's move everything down.
| | 01:18 | I am just going to click and drag and then
I can move everything all a once, like so.
| | 01:23 | Then we can turn the banner back on
and reposition the navigation menu.
| | 01:28 | That's a little bit better.
| | 01:29 | Actually while we are here, let's turn
off the Colors layer, so we don't see that.
| | 01:33 | So banner is okay, but it kind of looks
a little hard-edged. And you might not be
| | 01:37 | able to tell with the guides on. You can
toggle those on by clicking Command+Semicolon or Ctrl+Semicolon.
| | 01:43 | So it's good, but it's kind of
hard. It's not super friendly.
| | 01:46 | And what I think we should do is go
back into the our photo file--I am just
| | 01:49 | going to deselect the keyboard
shortcut--and we will add a little bit of a
| | 01:53 | rounded edge. And the way you can do that
is with the Rounded Rectangle tool here.
| | 01:58 | And you can set the border Radius.
And I want a really smooth soft edge,
| | 02:02 | so I am going to pump it up to 100.
And then using the guides, I am going to
| | 02:06 | click and drag all the way across the
file. And I really don't care what color
| | 02:11 | it is because what I really
want is the inverse of this.
| | 02:14 | So with my cursor on top of the
thumbnail of the mask, I am going to hold down
| | 02:19 | the Command or Ctrl key and
click right on that thumbnail.
| | 02:23 | That selects that shape for me, and
then I can inverse that shape. And then for
| | 02:28 | this piece, I can fill it
with a solid color, such as white.
| | 02:34 | So now if I Select > All and then do
a Copy Merged, so that I am copying
| | 02:40 | everything that's visible and
come back into my mockup and paste--
| | 02:45 | just drag that right on top. In fact,
let's turn our guides back on, so we can
| | 02:48 | get it to snap right in there
and then hide that old banner.
| | 02:52 | You can see that that's like a softer,
happier, more friendly, more inviting,
| | 02:56 | more appetizing-looking
layout than with a hard edge.
| | 03:00 | Now that the banner is in position, it
kind of seems like the logo is out of
| | 03:04 | place and unbalanced in its current
position, and so does the navigation bar.
| | 03:08 | Let's select all three
of those items. The logo.
| | 03:12 | Actually, let's zap the old banner
and rename this one. And we will grab all
| | 03:17 | three layers. In fact, we can even
grab--I am just going to Ctrl+click here to
| | 03:21 | grab the background as well so that we
can align all three of them to the locked
| | 03:25 | background layer using the Align
tools at the top of our screen.
| | 03:28 | I think that's much better. Okay, great!
| | 03:31 | So at this point, you should start
to think about how you might want your
| | 03:35 | navigation to look and function
when visitors interact with it.
| | 03:37 | So, for instance, you can make the
font change, the font color change, the
| | 03:42 | background color behind the font change
on rollover with each menu item, or you
| | 03:45 | can add graphics. You could even
display your text in all caps or lowercase
| | 03:51 | or a bold, with an underline;
it's totally up to you.
| | 03:54 | So you could play around with your ideas
until you find something that you like.
| | 03:58 | For our web site here, we are going to
make the rollover color be the same dark
| | 04:02 | red as the logo, and then we will add a
little yellow half circle above one of
| | 04:06 | the menu items that, with CSS,
will only appear on mouseover.
| | 04:11 | Let's turn our colors back on so we can
sample the color appropriately and then
| | 04:17 | we will use our Elliptical
Marquee tool to create a circle.
| | 04:21 | If you want precise measurements, turn
on your Info panel and then hold down
| | 04:26 | your Shift key to constrain the
shape so you get a nice perfect circle.
| | 04:29 | So we can make a circle that's about 15
or 16 pixels in diameter, something like
| | 04:33 | that, and then we want to fill it, and
we will use our Eyedropper tool. We will
| | 04:37 | fill it with that yellow. Create a new
layer and then we'll fill it with the
| | 04:43 | foreground color and deselect, and then
we can move it into position up here. And
| | 04:51 | if we really just want a half circle,
then we can select half of it with our
| | 04:56 | Rectangular Marquee tool and just hit
our Delete key to zap it. And I would
| | 05:02 | probably want that nudged down just a
little bit so that there is a little bit
| | 05:05 | of breathing room between the
banner photo and the navigation bar.
| | 05:09 | We can hide our--or actually, let's
leave our colors up now because we do
| | 05:13 | want to change one of our
navigation items so that the color looks like
| | 05:18 | someone is mousing over it. There we go.
| | 05:22 | So we are giving visitors a visual
indication of what things would look like.
| | 05:26 | As a matter of fact, we can even
change the whole navigation bar to blue,
| | 05:30 | so let's do that. I'm going to change
it here. Just change the whole thing and
| | 05:35 | then we'll go back in and reselect
this one and make that red, so that it
| | 05:43 | really has a distinct visual look when
someone is hovering their mouse over it
| | 05:47 | in a browser window. Great!
| | 05:49 | The header area now has style and
personality that reflects the company's image
| | 05:54 | and should be appealing
to their target audience.
| | Collapse this transcript |
| Styling the main content and sidebar| 00:00 | The layout for your main content
area will be repeated throughout your
| | 00:04 | web site, so it's important that you
create a design that will be easy to
| | 00:08 | customize on each page.
| | 00:10 | Let's move some elements around and
add some more formatting to help make the
| | 00:14 | main content area stand out from the sidebar.
| | 00:16 | Let's see about the main text area first.
| | 00:20 | That area is in a text box and so we can
give it a little more breathing room by
| | 00:25 | widening that whole text block.
| | 00:27 | That's a good start.
| | 00:29 | Now the sidebar itself really sort of
gets lost, and we want that to stand out
| | 00:33 | from the regular text.
| | 00:35 | One way we could do that is we can
give it a different-colored background.
| | 00:39 | Let's use the Rounded Rectangle tool
and if you want to use your Info panel to
| | 00:44 | create the appropriately sized
background image, we are looking for a shape
| | 00:48 | that's roughly 220 pixels
wide by 280 pixels tall.
| | 00:53 | As far as the rounded rectangle radius
goes, we probably don't need something as
| | 00:56 | big as 100. something
like 10 pixels would be good.
| | 01:00 | So again, looking to our Info panel so
that we can see if we can get 220 pixels
| | 01:05 | wide by 280 pixels tall.
An approximation is good.
| | 01:10 | I am not going to be a stickler, but
that is the precise measurement that I was
| | 01:14 | using for the layout.
| | 01:16 | One more pixel. Oh, we go it!
| | 01:19 | Now that should go behind everything
else in that body section of our layout,
| | 01:25 | and then we could start to position
everything else on top of it to make it
| | 01:29 | look a little bit better.
| | 01:30 | Let's move that over and have it lock
up against the guide on the right-hand
| | 01:34 | side, and we might need to
add some spaces in here.
| | 01:38 | So just Shift+Clicking Cupcake of the
Month. And we might also need to do this
| | 01:42 | same thing for the
Chocolate and the Moose like so.
| | 01:47 | And I think all the text should be
center-aligned, so just going to use this
| | 01:52 | tool up here to center-align
the type, bring everything over.
| | 01:57 | In fact, we can center-align all of
these elements together, so the Background,
| | 02:02 | the Cupcake of the Month, the Photograph,
the Fair Trade Chocolate, and we will
| | 02:06 | use the Align tools up at the top of the screen.
| | 02:09 | So it's looking okay.
It's still just not there yet.
| | 02:12 | We need some other elements.
| | 02:13 | So let's do a few things.
| | 02:15 | For instance, we can put a border on
our image by clicking the fx button.
| | 02:19 | We will choose Stroke. And when the dialog box
comes open, we can add a border of 10 pixels.
| | 02:27 | We will leave it set, the Position set, to
the Outside but we will change the color.
| | 02:32 | Let's make it flow with the rest of our
web site, and will use FDE 090, a yellow
| | 02:39 | that we've already used before.
| | 02:41 | So that's looking pretty good.
| | 02:43 | The text isn't there yet.
| | 02:44 | We need to do something else for the type.
| | 02:46 | Let's select both lines of type--
Fair Trade and Cupcake of the Month--and
| | 02:53 | let's make them all caps.
| | 02:54 | We can use this button here to do
that. And I think for Cupcake of the Month
| | 02:59 | that should be white.
| | 03:00 | So we are changing that.
| | 03:03 | So it's looking okay, but the
size is wrong still. Let's do this.
| | 03:06 | I'll make the word cupcake a little bit
bigger, so we can open up our Character
| | 03:12 | panel here. And for the word
Cupcake, let's do 29 points.
| | 03:18 | Now, let's select the next line of
the Month and we will make that a little
| | 03:22 | bit smaller. Hopefully we can get
everything to fit in, roughly above the photographs.
| | 03:26 | So 19 pixels should do it, but let's
also change the leading so it's not so far
| | 03:31 | away from the word Cupcake.
| | 03:32 | We will make it 19 points as well.
So that it sort of joins the two lines together.
| | 03:40 | Okay, that's a little bit
better. Let's nudge it down.
| | 03:42 | I am using my arrow keys
to nudge it down a smidge.
| | 03:47 | Now Fair Trade Chocolate, it looks like
there's an extra space there after the E possibly.
| | 03:52 | Yes, so it wasn't center-aligning
properly. And I think fair trade should be
| | 03:56 | a little bit smaller.
| | 03:57 | So selecting the words fair trade, again
coming into the Character panel. Let's
| | 04:02 | make that much smaller.
| | 04:03 | How about 14? And we will
also change the leading there.
| | 04:06 | We have be using 19, so let's keep it
the same. And then for the words Chocolate
| | 04:10 | Mousse, let's go smaller on the leading as well,
| | 04:15 | to 19, and let's see how that's looking.
| | 04:20 | Much better, and then we can
nudge things into position like so.
| | 04:25 | So everything is looking pretty good.
| | 04:27 | We might want to make some fine-tuning
adjustments, like, for instance, I might
| | 04:30 | want to move this whole piece over to
the right edge of the screen and double-
| | 04:36 | check again that everything is center
aligned, just in case things got out of
| | 04:40 | whack. And for my text block, let's see
how big that is actually, because I don't
| | 04:45 | like the words "on earth" all the way at the end.
| | 04:47 | Make it a little bit wider.
78 aught to do it, something like that. Good!
| | 04:53 | And then the last thing is maybe
to tackle this VIEW OUR MENU area,
| | 04:58 | we can make that match our welcome text.
And while you're working, sometimes you
| | 05:03 | might forget what things were.
| | 05:05 | All you need to do is select an item
and then open up the appropriate panel.
| | 05:08 | In this case, we can say, okay that's
Century Gothic, Bold. It's 30 points. And
| | 05:12 | we can come back to that text there,
reselect it, Century Gothic, Bold, 30 points.
| | 05:21 | I think we need to worry about the leading;
| | 05:22 | we can set it back to Auto.
| | 05:24 | I would like to centerline that line though,
| | 05:26 | so let's center it here.
| | 05:29 | Let's get rid of those brackets.
| | 05:31 | That's just a visual indication that
we want to turn that into a button. The
| | 05:35 | color though should be the same.
| | 05:37 | Let's sample from that yellow.
And then to make it look like a button, let's
| | 05:43 | actually add a shape.
| | 05:45 | So we use that rounded rectangle again
since we have used it before. And we'll just
| | 05:51 | click and drag to draw
shape behind there, like so.
| | 05:56 | I don't want it to be yellow.
| | 05:57 | I want to be able to see the text.
| | 05:59 | So let's make it a different color.
| | 06:00 | Let's make it blue.
| | 06:01 | It happened to know what color blue I
wanted to be, 7ac1b7. And then we can add a
| | 06:14 | stroke around the outer edges of there.
| | 06:17 | Let's do five pixels around the outside,
and let's make it yellow. And then since
| | 06:25 | we can't see that, we need to put it
behind the words. We will move it down a
| | 06:30 | little bit. Let's collapse this. And
then we might want to change the text for
| | 06:36 | the word menu to white, so we
can see it little bit better.
| | 06:40 | And if we need to make some fine-tune
adjustments like adding a space or even
| | 06:44 | making that button background a little
bit bigger, we just select everything and
| | 06:50 | adjust it until it looks right to us.
| | 06:53 | So this is a really clean and
simple two-column layout. It's visually
| | 06:57 | appealing, and it gives us the
flexibility to modify both sections as needed on
| | 07:03 | each page of our web site.
| | Collapse this transcript |
| Styling the footer| 00:00 | For our footer, our main concern is
to keep the content organized and easy
| | 00:05 | for visitors to access.
| | 00:07 | Here we have three important sections
of information that need to be separated
| | 00:11 | while still being visually in
sync with the rest of the layout.
| | 00:15 | Now, we've already added headers to
each of the three sections, and that's a
| | 00:18 | visually unifying effect, but there's
still a little bit of pizzazz missing.
| | 00:24 | So what we'll do is we'll add some
little yellow bullets to the Have a Look
| | 00:27 | Around section and then we'll drop in
the actual logo icons for the social media
| | 00:32 | files listed under Follow Us.
| | 00:35 | We can use the Ellipse tool to create
the shapes, and if you want to create a
| | 00:39 | precisely sized shape here--I'm
zooming in--you can use the Info panel up.
| | 00:44 | I would recommend a 10 pixel in
diameter. I'm holding down my Shift key to
| | 00:48 | constrain the shape to make sure it's
exactly 10 pixels. And then I can hold down
| | 00:52 | my Alt or Option key and drag a
copy off, and I'll do that again,
| | 00:57 | so I have three bullets.
| | 00:59 | If I want to make sure that they
are distributed, I can click and then
| | 01:02 | Shift+click to distribute
them evenly, and they were.
| | 01:05 | Then I can have all three selected and
drag a copy off like I'd just done. Try to
| | 01:11 | make sure that they're roughly
the same distance from the type.
| | 01:13 | We'll zoom back outm like so.
| | 01:16 | So that already looks so much better.
| | 01:17 | It's like a clear idea. We know what
those are. Those are links. We'll go and
| | 01:21 | click on them. And then to drop in our
social media icons, we'll do File > Place.
| | 01:27 | All the graphics are there for you
in the appropriate exercise folder.
| | 01:30 | So I created a little icon of a
cupcake, and that would link people back to
| | 01:34 | the web site. And because we're dropping it in,
it becomes a Smart Object when you place a file.
| | 01:39 | So just hit Enter or Return to
accept it and then drag it into place.
| | 01:43 | We'll repeat the process for each of
the remaining icons. And the order is
| | 01:47 | totally up to you here.
| | 01:48 | I think I did Facebook and
then Twitter and then the RSS.
| | 01:53 | So let's place that one. Hitting Enter
or Return to accept the placement. And we've
| | 02:03 | got one more to go, like so.
| | 02:05 | Now that type layer behind
there, I do not need anymore,
| | 02:09 | so I'll select it and hide that or I
can throw it away. And then my icons
| | 02:15 | themselves, I would like to have them
evenly spaced, properly aligned. Maybe
| | 02:20 | align them by their tops and then
make sure that their distributed evenly,
| | 02:24 | horizontally along their left edges, like so.
| | 02:27 | And then I can eyeball it or I can even
drag a guide in to see if the tops are
| | 02:32 | in alignment with the type, and they are.
| | 02:34 | So that looks really good.
| | 02:36 | As you can see, when you take the
right colors, the right fonts, and
| | 02:39 | photographs and graphics and organize them in a
logical way, your whole web site can take shape.
| | 02:46 | Paying attention to the details like
only using rounded-edge shapes instead of
| | 02:49 | hard edge-shapes or showing how the
navigation bar will look when visitors
| | 02:53 | interact with it, can really help you
pull everything you designed together in a
| | 02:57 | meaningful and visually interesting way.
| | Collapse this transcript |
|
|
5. Optimizing Web GraphicsSlicing graphics| 00:00 | Once your web mockup is done, the
next step in the web design process is to
| | 00:04 | determine which parts of the layout will
become web graphics and which parts can
| | 00:09 | be generated with HTML and CSS.
| | 00:12 | This is especially important because
web sites using HTML and CSS tend to be
| | 00:17 | more search-engine friendly and load
faster in a browser window than their
| | 00:21 | graphic-heavy counterparts.
| | 00:23 | One quick way to create these
graphics from your mockup is to use
| | 00:27 | Photoshop's Slice tool.
| | 00:29 | Let me show you how this works.
| | 00:31 | If needed, you'll be dragging guides
into your layout to define the different
| | 00:35 | areas that need to be
separated into web graphics.
| | 00:38 | For this layout, we'll need the logo,
the banner photo, the widget for the nav
[00:00:4.08]
bar, the bullet in the footer,
and the photo for the sidebar.
| | 00:48 | Nearly everything else can
be rendered in HTML and CSS.
| | 00:52 | And if there are any guides at the end
of the process that we don't need, we can
| | 00:56 | remove them by dragging them off the artboard.
| | 00:59 | So, let's drag some guides in.
I already have my logo ready, I already have the
| | 01:03 | banner photo, so I just need one for the
nav widget, the sidebar photo, and the footer.
| | 01:08 | For best results, I'll grab my Zoom
tool and zoom right on in there, select the
| | 01:14 | object with my Move tool, and when the
object is selected, my guides will snap
| | 01:19 | really nicely on there.
| | 01:20 | Zoom back out. Zoom in here
and do the same exact thing.
| | 01:28 | Select the object with my
Move tool, nicely snapping guides.
| | 01:32 | Now some things this snapping feature
doesn't really work that well with is the
| | 01:37 | shapes that we use for our footer.
| | 01:39 | So we're not going to select that one there.
| | 01:42 | Instead, we'll just zoom
in close and eyeball it.
| | 01:46 | That shouldn't be too difficult.
Zooming back out. And now we need the Slice tool.
| | 01:52 | The Slice tool is located
underneath the Crop tool in your toolbar.
| | 01:56 | Any time you see a tool that has a
little tiny black arrow that means that there
| | 02:01 | is a hidden set of tools underneath of it.
| | 02:04 | Click on the tool to get the flyout
menu and then navigate over and select the
| | 02:09 | tool that you want to use.
| | 02:11 | With the Slice tool, all you need to do
is click and drag and release to create
| | 02:15 | a slice and if your guides are on, then
the Slice tool will snap to your guides,
| | 02:20 | which is very handy.
| | 02:21 | So, I've got my logo done.
Now I need one for the banner.
| | 02:24 | You don't have to worry about going
outside the boundary here on the left and right.
| | 02:28 | They will snap too.
| | 02:31 | I'm going to zoom in for my nav widget,
like so, and here for my photo, and then
| | 02:43 | the last one is may be zoom in a little
bit for that bullet. Zooming back out.
| | 02:52 | Notice that each slice has a little
tab at the top-left corner, like here.
| | 02:58 | The tabs that are blue
indicate the slices that I've created.
| | 03:02 | The tabs that are gray are the
slices that Photoshop will create for me,
| | 03:07 | whether I want them or not. But those can be
easily discarded after we optimize the graphics.
| | 03:13 | The other thing I want to point out
is that you can name your slices either
| | 03:17 | after they've been optimized or
before they're optimized, here in Photoshop.
| | 03:22 | To do that, right-click on one of
those little tabs, choose Edit Slice Options,
| | 03:28 | and then change the name here.
| | 03:30 | I'm going to leave that for now.
We can always change them later.
| | 03:33 | Now to optimize your graphics, you'll use
the File > Save for Web & Devices dialog box.
| | 03:40 | Once that opens, all you need to do is
choose the file format that you'd like to save in.
| | 03:47 | Now in this case, most of my graphics
should be saved as a PNG-8 file, with the
| | 03:52 | exception of this banner image.
| | 03:54 | So I'll select that one and
I'll switch it over to a JPEG.
| | 03:58 | Now all I need to do is click on the
Save button and choosing the location of
| | 04:03 | the destination for my files. I'd like
to put them in this images folder. I'm
| | 04:07 | not going to worry about
the filename at this point.
| | 04:10 | As for format, I can choose Images Only,
HTML Only, or HTML and Images, but I
| | 04:16 | really just want the images at
this point, so I'll leave it there.
| | 04:19 | The other settings can stay as they are.
Click the Save button and Photoshop
| | 04:23 | does its thing and optimizes all of my graphics.
| | 04:27 | Let's go, take a look at our images.
| | 04:30 | Notice that the entire file was
optimized, including the slices around the
| | 04:35 | images that I actually wanted.
| | 04:37 | Let's take a look at this in a
different view, so we can actually see
| | 04:40 | the thumbnails here.
| | 04:41 | So some of these I need, some of these I don't.
| | 04:44 | What I will do though is
rename the images while I'm here.
| | 04:47 | So this is my cupcake of the month,
so I can say cupcake of the month. And I
| | 04:51 | might change those every month.
| | 04:53 | So for the month of January, I might put _1 and
as I create them each month, _2 and so forth.
| | 04:59 | There is my footer bullet, so I can
call that one bullet. And there is my nav
| | 05:05 | widget. And then the only other thing I
need is my logo and my banner, and my
| | 05:12 | banner. Let's call this one banner_1,
so that I can create more banners for
| | 05:17 | every page of the web site.
| | 05:19 | There are other workflows available
that you can follow when optimizing web
| | 05:23 | graphics, of course, but this way
allows you to optimize and save several files
| | 05:27 | in a variety of web formats all at once.
| | 05:30 | All around, slicing images is a
very nice way to maximize your time.
| | Collapse this transcript |
| Optimizing web graphics| 00:00 | Sometimes it isn't necessary to use
the Slice tool when optimizing your web
| | 00:04 | graphics; instead, you may simply
optimize graphics that are already sized
| | 00:09 | correctly for your needs, or you may
copy and paste the content into a fresh
| | 00:13 | document and optimize the graphics from there.
| | 00:16 | Not all graphics should be
optimized in exactly the same way.
| | 00:19 | For the best balance of quality and
file size, photos and images with heavy
| | 00:25 | gradients should be saved as JPEGs,
while images with large flat areas of color
| | 00:30 | and lots of text are best
saved as GIF or PNG files.
| | 00:34 | The type of image you have will determine
which optimized image format will work best for you.
| | 00:39 | Take a look at this chart that
describes the difference between the three
| | 00:43 | standard web file formats:
| | 00:45 | JPEG, PNG, and GIF.
| | 00:47 | As you can see, JPEG images will
support millions of colors and are best suited
| | 00:51 | for photographs and complex graphics.
| | 00:54 | Aim to make your file size as small as
possible while still retaining a high quality.
| | 01:00 | Each image should be in the 10K or less
range, though for larger photos, up to 30
| | 01:05 | or even 50 should be fine.
| | 01:07 | GIFs are the original compression
format for the flat images, flat areas of
| | 01:13 | color, and type, but the newer
version, a better compression, is the PNG
| | 01:18 | Graphics, the Portable Network Graphics.
| | 01:20 | GIFs and PNGs support
transparency while JPEGs do not.
| | 01:26 | So if your image has some transparency in it,
you'd be better off saving it as a GIF or a PNG.
| | 01:31 | Now, PNG-24 supports millions of colors
like JPEGs, so if you have complex drop
| | 01:38 | shadows or things where there is lots of
semitransparent and transparent pixels,
| | 01:43 | a PNG-24 would be your best bet.
| | 01:46 | Here we have a photographic file that
contains three layers in the Layers panel,
| | 01:51 | but two of those layers are hidden.
And then of course there's that locked
| | 01:53 | Background layer, which we'll ignore.
| | 01:56 | To optimize this as a web graphic,
we'll go to the File menu, choose Save for
| | 02:01 | Web & Devices, and this opens up
the Save for Web & Devices dialog box.
| | 02:06 | On the left side, you have some icons
that you can use, like to zoom in or to
| | 02:10 | sample a color or to toggle on slices
or select slices, those kinds of things.
| | 02:15 | Now, you could show your Original image
as it was when you first got it--maybe
| | 02:19 | as a high-res image 300 dpi, something
like that--or you can show that image as
| | 02:24 | it's optimized, based on the settings
over here on the right side of the panel.
| | 02:28 | What I prefer to do though is to use
either the two 2-Up or the 4-Up view so
| | 02:33 | that I have a few different
tries to compare it with my original.
| | 02:37 | So for this one I might have JPEG
quality 60; in the middle I might have JPEG
| | 02:42 | quality 30; and then the last, JPEG
quality 15, so that I can compare the
| | 02:47 | quality and the file size and then determine
which one is going to give me the best results.
| | 02:52 | Again, I want to make sure that I maximize
the quality while keeping the file size low.
| | 02:57 | And if you're unsure, if you can't
really tell, use that Zoom tool to zoom
| | 03:01 | into certain areas.
| | 03:02 | If you get in really close, you can
start to see the pixels. We call those the
| | 03:05 | jaggies, and you really want to
avoid pixels if at all possible.
| | 03:09 | So let's zoom back out: just keyboard
shortcut Alt or Option key will zoom me back out.
| | 03:15 | So let's talk about the
settings over on the right.
| | 03:17 | There's a Preset menu and here you
can choose any of these Preset options.
| | 03:21 | You've got GIF, JPEG, and PNG.
| | 03:24 | The number next to the GIFs
represents the numbers of colors that are used.
| | 03:29 | You can have a maximum of 256 colors.
| | 03:32 | Dithering is if you want to have the
computer put two colors together in a
| | 03:37 | checkerboard format to create the
illusion of a third color, so you can have
| | 03:41 | Dithering or No Dither.
| | 03:43 | And then JPEG High, Medium, or Low,
that's the quality of the compression. And
| | 03:48 | then of course PNG, we have 128.
| | 03:50 | Again, that's just like GIFs, 128 colors.
But you can increase or decrease the
| | 03:54 | colors, and you can turn
the dithering on or off.
| | 03:56 | So you can start with one of these settings.
| | 04:00 | You could also choose any of
the options here in this menu.
| | 04:04 | You can even choose a WBMP,
Windows Bitmap format, if you like.
| | 04:09 | And for JPEGs, here's the Quality dropdown.
| | 04:11 | You have Low, Medium, High, Very High,
or Maximum, and that coordinates with the
| | 04:16 | Quality slider here.
| | 04:17 | So if I say Low, it goes down to 10.
| | 04:19 | If I say Maximum, it goes up to 100.
| | 04:21 | So the scale is 0-100, and you can put it
anywhere in between. Totally up to you.
| | 04:28 | So while you have, say, this panel
selected--let's go back to this tool--you can
| | 04:33 | modify the slider and see how the
quality and the file size is changing.
| | 04:38 | So you don't have to stop on a whole
number if you don't want. You can go 79 or
| | 04:42 | 46 or something like that.
| | 04:44 | These options here, if you place your
cursor, hover it right on top, you'll get
| | 04:49 | a little tooltip and it will
tell you what that option will do.
| | 04:52 | I usually go with what Photoshop
is telling me is the best option,
| | 04:56 | so in this case they're saying
go ahead and leave it Optimized.
| | 04:59 | This says it creates smaller but less
compatible files. That's really not an
| | 05:03 | issue these days on the Internet. Most
people have fast connections. But you
| | 05:07 | could deselect that if you want.
| | 05:09 | Progressive is really not an issue
unless you have a file that's super high res
| | 05:14 | that you would really want someone
to be able to download and print.
| | 05:18 | Though for the web you really want to
save your images at 72 pixels per inch;
| | 05:23 | anything over that is sort of wasted file size.
| | 05:26 | No need really to embed a color profile,
an ICC profile unless, again, you're
| | 05:31 | planning on having someone print this
off and make sure that the colors stay
| | 05:35 | true to what you had intended.
| | 05:38 | Leave this Convert to sRGB
on, no need to change it.
| | 05:41 | And then the rest of this is really up to
you whether you want to play around with it.
| | 05:45 | You can change the type of
preview that you're seeing.
| | 05:48 | Again, these things are sort of
deprecated, no need to really go in here.
| | 05:52 | Metadata, totally optional.
| | 05:53 | You can have any metadata that's
embedded in the file transmitted with the
| | 05:57 | graphic if you like.
| | 05:58 | So you can say None, Copyright,
Copyright and Contact, Camera Info, everything.
| | 06:04 | And then the Color Table, we don't deal with
for JPEGs, because it supports 60 million colors.
| | 06:10 | Here is where you can see your image size,
and I would say do not scale in this area.
| | 06:16 | If you need to scale your image, exit
out of the Save for Web & Devices dialog
| | 06:19 | box and scale it there and then
come back into the dialog box.
| | 06:23 | Above all, never scale up;
| | 06:25 | always scale down,
especially for a photographic image.
| | 06:29 | This area, Quality, relates to
resampling if you are scaling.
| | 06:34 | And JPEGs do not support animation, so
that whole area is grayed out for you.
| | 06:39 | So what you would do, again, is select
the option, whichever box here has the
| | 06:43 | optimization settings that you want to
go with, and when you're finished, you
| | 06:47 | click the Save button.
| | 06:48 | You'll choose the location that
you want to save your file into.
| | 06:52 | You can choose the Format.
| | 06:53 | It could be Images Only, HTML Only if
you were doing some slice graphics, or
| | 06:58 | HTML and Images, which would output
all of your image slices, along with some
| | 07:03 | HTML, which can be set to be formatted
with tables or with CSS and div tags. But
| | 07:10 | we're going to stick to just images here.
| | 07:13 | Settings, you don't really need to get
into any of this either, but you could
| | 07:16 | play around and look if you
wanted to see what's there.
| | 07:19 | Click the Save button and you're done.
| | 07:21 | The dialog box closes all by itself.
| | 07:23 | There's nothing else for you to do,
except for maybe hide one layer, show the
| | 07:28 | next, and repeat the optimization process.
| | 07:31 | Now, let's take a look at another graphic.
| | 07:34 | This one has large flat areas of color
and text, so it would be best suited to
| | 07:39 | save it as a GIF or a PNG.
| | 07:42 | To do that, same as before: File > Save for
Web & Devices and the dialog box pops open.
| | 07:49 | Now, the options for GIF
and PNG are pretty similar.
| | 07:52 | So let's take a look at GIF first, like GIF-128.
| | 07:56 | You have Color reduction algorithm.
Selective is the best, but there's other
| | 08:00 | options in here for you.
| | 08:02 | Here's your number of colors, and you can use
the sliding scale or go to any of these presets.
| | 08:06 | 256 colors is the max.
| | 08:09 | You can have Dithering on, and if
Dithering is on, you can choose the type of dither:
| | 08:14 | Diffusion, Pattern, or
Noise, or turn it to No Dither.
| | 08:17 | And here's the amount of
Dithering if it is on and you want it.
| | 08:21 | If your image has Transparency for a GIF,
make sure that that box is selected.
| | 08:26 | And your Transparency can have
dithering or no dithering, and if it is dithered
| | 08:30 | then you can choose, again,
Diffusion, Pattern, or Noise for those
| | 08:33 | semitransparent pixels.
| | 08:36 | Interlacing will download your GIF in
multiple passes. Not really necessary
| | 08:40 | these days, unless your file is massive.
| | 08:43 | And the Matte Color is if you do have
any transparent edges in your graphic,
| | 08:48 | this would be the color that would
toggle between those semitransparent pixels.
| | 08:51 | So usually you want to match the matte
color to the background color that the
| | 08:55 | image will be sitting on top of on your web page.
| | 08:59 | Snapping to Web Safe palette, no longer
really an issue, but you can force it to
| | 09:03 | snap to those 216 web-safe colors if you like.
| | 09:07 | Lossy has to do with the compression
algorithm, and you can increase that, but it
| | 09:12 | will lower the quality of your graphic.
| | 09:15 | The rest of this you
don't really need to change.
| | 09:17 | Convert to sRGB, just leave that checked.
| | 09:20 | Again, Preview settings, like in JPEG.
| | 09:22 | Metadata, just like in JPEG options.
| | 09:24 | The Color Table, this will
show you the number of colors.
| | 09:27 | So this is actually 128 colors
based on this compression algorithm.
| | 09:32 | There's your Image Size and
again, please don't scale in here.
| | 09:35 | If you need to scale, exit out of
this dialog box, make your changes in
| | 09:38 | Photoshop, then come back in.
| | 09:40 | I think you'll have better results.
| | 09:42 | Again, if you want to compare
different algorithms or compression settings or
| | 09:45 | even a GIF compared to a PNG to see
which one is going to give you the better-
| | 09:48 | quality image at the lowest file size,
in this case, PNG might be better.
| | 09:54 | So let's look over at the PNG options.
| | 09:56 | For PNG-8, again, Selective, Colors,
Dither, No Dither, Transparency, Matte,
| | 10:01 | like all these settings are pretty
much the same as they are for GIF, but the
| | 10:04 | compression algorithm is better.
| | 10:06 | Now, if your graphic has areas of
transparency, I'll show you how to do that in
| | 10:11 | a second. But saving, just like JPEG,
click the Save button, select your
| | 10:17 | location, click Save again, and you're done.
| | 10:20 | Now, this graphic over here happens
to have some areas of transparency, and
| | 10:25 | you can tell that there are areas of
transparency if you zoom in. Actually we
| | 10:29 | have the background on.
| | 10:31 | So you can see the checkerboard.
| | 10:32 | You know that if the checkerboard is
visible that there are areas of transparency.
| | 10:36 | So I would want to have those edge
pixels nice and transparent so that I can put
| | 10:40 | this icon on any colored
background on my web page.
| | 10:43 | Again, saving File > Save for Web & Devices.
And I might want to choose the PNG-24
| | 10:50 | option here, because if you choose
PNG-8, sometimes in older versions of
| | 10:54 | Internet Explorer, that transparent area
for PNG-8 will turn grayish-bluish, and
| | 10:59 | if you want to avoid that,
then you would do PNG-24.
| | 11:03 | Here you have a lot less options
in this sidebar, because it supports
| | 11:07 | millions of colors.
| | 11:08 | So you really just choose
whether or not there's transparency.
| | 11:12 | If there is a matte color that you need to
include, you can select through that Matte menu.
| | 11:16 | Interlaced and everything
else you can leave alone.
| | 11:19 | Save just like before. Choose your
location and the dialog box closes.
| | 11:26 | So once you've discovered which file
format will work best for your images,
| | 11:30 | making the optimized graphic for it
is really fast and straightforward.
| | 11:34 | Remember though to name each image
semantically so that they're easy to identify
| | 11:39 | when you build your web pages.
| | 11:40 | For example, with the coffee
photos that we saved, we might call them
| | 11:45 | drinks_.jpg, drinks_iced.
jpg, and drinks_blended.jpg.
| | 11:53 | Using the same prefix, in this case
drinks_, will ensure that similar images
| | 11:58 | will be grouped together in the images folder.
| | Collapse this transcript |
| Creating a favicon| 00:00 | If you have ever noticed that when you
visit some web sites you see a little
| | 00:03 | customized icon in the address bar here
and sometimes also in the tab depending
| | 00:08 | on your browser window,
| | 00:09 | that tiny 16 x 16 pixel is called a favicon.
| | 00:14 | Some people call it favicon.
| | 00:15 | It doesn't matter what you call it, but it's
really easy to create and add to your web site.
| | 00:22 | For simplicity, design your favicon in
250x250 pixel 72 ppi RGB Photoshop file.
| | 00:31 | This should give you enough space to
flex your creativity while keeping the
| | 00:35 | design somewhat simple, so that it won't
degrade too much when you scale it down to 16x16.
| | 00:41 | If you have a company logo or a logo type,
you might want to use that as part of
| | 00:46 | the image for your favicon.
| | 00:47 | Now I happened to have an Illustrator file
with a logo and I am going to place it in here.
| | 00:52 | File > Place and I will select my
cupcake graphic here, place it in.
| | 00:59 | If you get the Place PDF for some reason,
if it was saved as a PDF or some other
| | 01:03 | file, just click OK.
| | 01:05 | It will place your file in a bounding box.
| | 01:07 | You can scale it down or scale it up if
you like without any loss of resolution.
| | 01:10 | Click Enter or Return to accept the placement.
| | 01:13 | I am not going to do anything else
for this, so I can scale it down in the
| | 01:18 | image, Image Size area, and
just bring it on down to 16x16.
| | 01:24 | There it is, teeny tiny, ready to go.
| | 01:26 | Now these days, you can save your
favicon in any file format, PNG or GIF usually
| | 01:33 | for a small flat area of color.
| | 01:35 | It probably wouldn't do a photo, but
you could. Qhere in the past, you used to
| | 01:38 | just have to save it with
the .ico file extension,
| | 01:42 | you don't have to do that anymore.
| | 01:44 | So you'll save it just like you would
any other web graphic, using the File > Save
| | 01:48 | for Web & Devices dialog box. We will do PNG-8;
| | 01:51 | that works for us.
| | 01:53 | I don't need to change any of the settings here.
| | 01:55 | I'll just click Save, choose my location,
make sure I give it the name favicon.
| | 02:01 | I already had one there.
| | 02:03 | I am just going to click it and overwrite it.
| | 02:07 | And now I have saved the graphic.
| | 02:09 | For your favicon file to appear in a
browser's address bar, you will need to do
| | 02:14 | three things once your web site is
built and ready to be uploaded to the host
| | 02:19 | server. Or if you had a placeholder page
and you just wanted to get something up
| | 02:22 | there, you can certainly do that at any time.
| | 02:24 | First thing, save the image in that
same location as your web site, either at
| | 02:29 | the root level or in a subdirectory folder
called images or IMG or something similar.
| | 02:35 | Add a line of link code in between the
opening and closing head tags in all the
| | 02:43 | pages of your web site with references
to the location of your new PNG file.
| | 02:49 | You might also want to modify the
opening head tag with this profile line here.
| | 02:55 | And then number three: upload your HTML and
all of your image files to the host server.
| | 03:00 | If you do these three things, your
favicon will appear in the address bar and
| | 03:06 | possibly in tabs as well.
| | Collapse this transcript |
|
|
6. Creating Dreamweaver TemplatesUnderstanding page structure| 00:00 | Though you may build a web page
template in any order in Dreamweaver, it's
| | 00:04 | often fastest and most logical to
start by blocking out the page structure
| | 00:09 | with HTML and CSS styles, then build
out and style content from top to bottom
| | 00:15 | one block at a time.
| | 00:17 | Let's first start by
taking a look at what we have.
| | 00:19 | Here is our web site mockup.
| | 00:22 | If we were to break it into logical
blocks, it would look something like this.
| | 00:26 | We have got our header at the top,
which includes our logo, our banner image,
| | 00:30 | and our navigation menu.
| | 00:32 | Then we have our main area that
includes the main content on the left, the
| | 00:36 | sidebar on the right, and then a third
block with our footer which has three
| | 00:41 | columns: one for our footer navigation,
one for our contact information, and
| | 00:45 | one for networking.
| | 00:46 | Now let's switch over to Dreamweaver.
| | 00:49 | We're in our Manage Site, so we've
managed to site. We have told Dreamweaver where
| | 00:54 | to find the files for our project.
We will start by creating a new page.
| | 00:59 | We will go to File > New and here you'll
choose the Blank Page category, HTML type.
| | 01:06 | We don't want any pre-existing layout--
we will keep that set to None--and the
| | 01:10 | only other thing we can choose is our Doc Type.
| | 01:13 | This is a line of code that goes at
the top of our page and tells the browser
| | 01:16 | how to interpret the type of
code that it sees in our file.
| | 01:20 | The default right now is XHTML 1.0
Transitional, but you could roll back to
| | 01:26 | HTML 4.01 Transitional or even jump
forward to HTML5. That's totally up to you
| | 01:32 | depending on the type of content and code
that you plan on having on your web site.
| | 01:36 | We will stick with the HTML 4.01
Transitional. Click the Create button.
| | 01:42 | Now I want to show you what's going
on here in Split Code view so you can
| | 01:46 | see where we're at.
| | 01:47 | Here's what Dreamweaver creates for you
automatically when you create a new page.
| | 01:52 | You have got your doctype at
the top above the opening HTML tag.
| | 01:55 | You have your whole head area which has
room for meta tags and your title. And
| | 02:00 | then you have your body
area and your closing HTML tag.
| | 02:04 | On the right side of the screen is our
preview-in-browser-style area, the Design
| | 02:09 | view, which shows you approximately
what your page would look like in a browser
| | 02:12 | window, though it's always best to
double-check multiple browsers while you're
| | 02:15 | building to make sure that it renders properly.
| | 02:18 | But as you can see, there's nothing
there yet because there's nothing inside
| | 02:21 | those opening and closing body tags.
| | 02:23 | Now I usually like to start by plugging
in a title, so for us, we'd like to have
| | 02:28 | Cupcake Mary, the name of our web site.
| | 02:30 | Let's also add a little
bit of a description here.
| | 02:35 | With your titles, you want to keep them
to about 70 characters or less; anything
| | 02:39 | longer might get truncated or cut
off in the browser window title bar.
| | 02:44 | So once we click back into our code,
you'll see that text that we put in the
| | 02:47 | title area up here has updated into our code.
| | 02:50 | Now for our project, we are going to
create our content blocks with div tags.
| | 02:55 | A div tag is a container tag that can
be absolutely or relatively positioned on
| | 03:01 | the page, can be styled with CSS, can
be positioned with CSS, and contain any
| | 03:08 | content which itself can be
styled and positioned with CSS.
| | 03:12 | What's more, div tags can be nested
inside other div tags and even layered one
| | 03:18 | on top of the other as stacked layers,
and you can determine that stacking order
| | 03:23 | with what's called that the Z-index in the CSS.
| | 03:26 | Remember, we need several blocks in
our code in order to support our layout.
| | 03:31 | So the first thing I'll do is put my
cursor right after the opening body tag and
| | 03:36 | insert my first div.
| | 03:38 | There are two ways you can insert them:
one through the Insert menu and one
| | 03:41 | through the Insert panel.
| | 03:42 | They both do the same thing so it
almost doesn't matter which way you do it.
| | 03:46 | If you're going to use the Insert menu,
choose Insert > Layout Objects > Div Tag.
| | 03:52 | There is another AP Div there.
It's another type of Div tags which we will
| | 03:56 | cover in a later movie.
| | 03:57 | So you just click on that.
| | 03:59 | This Insert Div Tag dialog box opens,
and it asks you where you would like
| | 04:04 | to insert this div.
| | 04:05 | You could use the default, At insertion
point, or you can choose After start of
| | 04:09 | tag or Before end of tag. I am just
going to click At the insertion point.
| | 04:15 | You could also set the CSS Class if
you happen to already have a CSS style
| | 04:20 | with a custom class that you'd like to apply
to it, or you can add an ID to this div tag.
| | 04:27 | We want to create all of our divs
with IDs so that when we go into our CSS
| | 04:32 | panel and start creating custom styles,
those styles will automatically apply
| | 04:37 | to these div tags, as long as the style has
the same name as the ID that we give it here.
| | 04:43 | So I want to create an ID style
for something called container.
| | 04:48 | We are going to create a fixed-width
design that will be center-aligned in
| | 04:53 | the browser window.
| | 04:54 | In order to do that, we need a container
that is center aligned and fixed width.
| | 04:58 | This is what we're creating right now.
| | 05:01 | So it drops the div into
our code, div id="container."
| | 05:07 | That's the name, our id. And then in
between there, there are some dummy text and
| | 05:12 | then our closing div tag.
| | 05:14 | That dummy text is there just for your
eyes only, so that you can know where to
| | 05:19 | place your content inside that div container.
| | 05:21 | You could erase it if you wanted,
but know that if you save this page and
| | 05:24 | posted it as it is now on the web, that
content would actually appear because
| | 05:28 | it's inside the body.
| | 05:30 | The other way that you could insert
div tags is through the Insert panel. You
| | 05:34 | will choose the Layout option and then
you can choose Insert Div Tag here, and
| | 05:40 | the same thing happens.
| | 05:42 | You can say Insert to Wrap around
selection, Before, After, Start, et cetera.
| | 05:46 | Again, adding the class,
adding the ID, and clicking Ok.
| | 05:50 | I am just going to click Cancel because
I don't want to add anything there yet.
| | 05:54 | The last thing you would want to do--
and I think this is really important,
| | 05:57 | especially if you are new to coding,--
is to add some comment tags and you will
| | 06:01 | start with a left bracket,
an exclamation point,
| | 06:02 | and two dashes, and then
anything you put in here will not be shown in
| | 06:10 | the browser window.
| | 06:11 | And I like to put comment tags at the
end of each div so that I know in the code
| | 06:18 | where my containers begin and end.
| | 06:20 | The reason I do this is because
containers are often nested one inside the
| | 06:24 | other, and we are going to do that
with our content blocks, and it's good to
| | 06:27 | visually see where your containers
end. That will help you as your page
| | 06:31 | starts to grow.
| | Collapse this transcript |
| Building page structure with divs| 00:00 | Now that we know how to create a
web page, we're going to build out our
| | 00:03 | structural blocks based on our mockup.
| | 00:06 | Before we do that though, we need to make
sure that we're in the properly managed
| | 00:10 | site and choosing the
appropriate exercise folder.
| | 00:14 | So, clicking on this dropdown menu,
choosing Manage Sites, there is our Cupcake
| | 00:18 | Mary managed site, but it's pointing to
folder 06-01, and we want it to point to
| | 00:23 | folder 06-02, so we're
using the appropriate files.
| | 00:26 | From our Files panel, clicking Done.
Now we have the files that we need, so
| | 00:30 | picking up where we left off before.
| | 00:32 | We have our opening and closing div container.
| | 00:35 | I am going to delete that placeholder
text here and drop the closing div tag
| | 00:40 | down to the next line, because we're
going to start building in those content
| | 00:45 | blocks. So we have our container and
we will create a style in another movie
| | 00:50 | that will control its positioning to
be fixed with and center-aligned, but for
| | 00:54 | now, we're just going to focus
on coding the structural blocks.
| | 00:58 | Again, you can insert div tags through
the Insert menu or the Insert panel, or
| | 01:03 | sometimes I think it's faster just to copy
and paste code and edit straight in Code view.
| | 01:09 | I am just going to copy this, the whole
thing, opening and closing tag, using my
| | 01:14 | keyboard shortcuts to copy it, placing
my cursor inside and then dropping
| | 01:18 | down to the next line and then pasting,
so we have a nested div tag, and then
| | 01:24 | I'll change the names.
| | 01:25 | So, the first block that we need is for our
header. And I am just going to copy and
| | 01:29 | paste so this goes nice and smooth.
| | 01:31 | So, now we have our header
nested inside of our container.
| | 01:36 | Then, I'll copy that block, and
I've indented at one space there.
| | 01:41 | We also need a container for our
main area, and a third for our footer.
| | 01:49 | So I am just copying and pasting.
It's going really fast this way, so you can
| | 01:54 | copy and paste or if you're fast typer, like so.
| | 01:57 | So, now we've got our main container
that holds everything together fixed
| | 02:02 | width in the center of the browser
window, and then we have those three blocks:
| | 02:05 | header, main, and footer.
| | 02:07 | Now we're going to have some nested
containers in each of those three blocks.
| | 02:14 | Copy this one and paste it in here.
| | 02:18 | Now inside our header, we want to have the logo.
| | 02:22 | Let's nudge this guy over a little bit.
And then also inside the header, we're
| | 02:27 | going to have our banner. And then
below that, we're going to have our
| | 02:34 | navigation, and we can call that navbar.
| | 02:37 | So now you can see, we've got those
nested div containers and if you're a
| | 02:43 | stickler for spacing, you can adjust that.
| | 02:46 | So, we can the hierarchy happening here.
| | 02:48 | Now I am going to copy all three of
those and go into our main area and paste
| | 02:55 | that in, because in our
main area, we need two.
| | 02:59 | We need one for our content--the stuff
that's going to flow on the left side
| | 03:05 | of the page--and another one for our
sidebar, where we have our cupcake of the
| | 03:12 | month. And we don't need that third one,
because our main area only has two subsections.
| | 03:19 | But our footer has three.
| | 03:21 | So I still have that stuff on my
clipboard. I am just going to paste it in
| | 03:24 | there. And those three, I want to
call the left one footnav, because it's a
| | 03:30 | repeat of our navigation,
but it's in the footer.
| | 03:32 | The middle one, I'll call it our contact,
general contact information. And that
| | 03:41 | last one is where we'll have our
social media, so we'll call it network, like
| | 03:45 | networking. And there is the end of our footer.
| | 03:49 | So, we've built the structural blocks
for our web site in HTML, and we're ready
| | 03:56 | to move on to styling.
| | Collapse this transcript |
| Styling page structure with CSS| 00:00 | Now that we have coded our content
blocks in HTML, we can create the styles that
| | 00:04 | will support our design.
| | 00:07 | Now, some of this may be mechanical.
And especially if you haven't already
| | 00:11 | watched Dreamweaver Essential
Training with James Williamson, if you don't
| | 00:14 | already know CSS, you might want to go
and watch that and then come back here.
| | 00:17 | But before we do anything, let's
make sure that we manage our site to the
| | 00:21 | appropriate exercise files folder.
And here is a quick shortcut that you might enjoy.
| | 00:26 | Double-clicking on the name in the
Files panel will bring you right to the Site
| | 00:30 | Setup dialog box, and you can quickly
adjust your local site folder to the
| | 00:33 | appropriate location.
| | 00:35 | Now we are ready to go. There is our pages.
| | 00:39 | So this is the page that
we were working on before.
| | 00:42 | We have our container with all of our
content blocks, our header, our main, and
| | 00:47 | our footer, and we need to create some styles.
| | 00:49 | I like to work with internal styles
while I am building my master page and before I
| | 00:55 | convert it into a template.
| | 00:56 | Once I have tested everything out,
then I like to externalize the files.
| | 01:00 | I just find that the
working process goes quicker.
| | 01:04 | The first thing I want to do is create
some structural styles that will support
| | 01:08 | the layout for our mockup, in which
case I am going to create the first style here
| | 01:13 | for the HTML Tag redefine.
| | 01:15 | Let's just type that in.
| | 01:17 | And this one I just need
Width and Height, 100% for both.
| | 01:22 | So going into Box, I will just
type in 100, 100, and then go back and
| | 01:27 | change that to percentage.
| | 01:31 | The next style is Tag redefine for the body.
| | 01:36 | I want to zero out the margins.
| | 01:41 | And then the next style after
that is one for the container.
| | 01:45 | If I put my cursor in the code for the
div container with a specific id, when
| | 01:51 | I create the new style, it will
automatically recognize it, and it's just a quick step.
| | 01:57 | And for this one I need my
margin left and right set to Auto.
| | 02:03 | I need my Padding set to 0 all around.
| | 02:06 | My Height will be set to Auto.
| | 02:09 | My Width, we have a 960
pixel fixed-width layout.
| | 02:13 | Let's set the Background color to white.
| | 02:16 | And in the Block area we
want to left-align our text.
| | 02:21 | And lastly, we will do the Font-family,
Century Gothic, and Font-size, we will do 1.2 ems.
| | 02:31 | And the last thing is the
color, 313030. There we go.
| | 02:39 | Now we have got the support for our page here.
| | 02:42 | This will ensure that our container
that holds all of our blocks will be fixed
| | 02:47 | width and center-aligned in the browser window.
| | 02:49 | I would also like to create
a couple of link styles here.
| | 02:52 | I just find that it's handy to have
these done at this stage, and then I can
| | 02:57 | always go back and change them if needed,
or copy and paste them and then create
| | 03:01 | specialized link styles for special
areas, like the navigation or the footer.
| | 03:06 | So in this case, I know what color I need.
I will just plug these in and change
| | 03:12 | the Font-weight to Bold.
| | 03:13 | Do another style for visited.
| | 03:18 | I personally like it when my links and
my visited links are exactly the same.
| | 03:23 | Some people like to change the color or
something else so that they are visually
| | 03:27 | different, as an indication to visitors
that they have been somewhere already.
| | 03:33 | And I also like the hover. And this one will
be bold as well, but we will change the color.
| | 03:39 | There we go.
So that's all the structure.
| | 03:45 | Nothing is changed in Design view.
| | 03:47 | That's because we are building the
structure. And next what we will do is we
| | 03:51 | will create styles for our header, our
main, and our footer. And what I like to
| | 03:55 | do is make the width and height
the appropriate size and then put a
| | 03:59 | background color on there so it's blocked out,
| | 04:01 | kind of like that graphic that I
showed you where we blocked out the content
| | 04:05 | for our mockup, so we know where
everything goes. And then as I am building
| | 04:09 | from top to bottom I will remove that
background color. It just kind of helps me visually work.
| | 04:13 | So starting with the header--and I will
put my cursor here. Let's Save while we
| | 04:19 | are at it, for my header.
| | 04:22 | And you could do a compound
style or not. It's up to you.
| | 04:25 | You can remove that if you want.
| | 04:27 | I would like my margin
left and right set to Auto.
| | 04:35 | Padding 0 all around.
| | 04:38 | Set my Height to 272 pixels. And I know
this because I went into Photoshop and I
| | 04:42 | used my pixel ruler to measure that
space, or you can use the Rectangular
| | 04:46 | Marquee to figure out--and a Guide--to
figure out exactly how high you need it to
| | 04:49 | be. And my Background-color like so.
| | 04:56 | Now you can see that's the exact height
for my header. This will hold my logo,
| | 05:01 | my photographic banner image, and my navigation.
| | 05:05 | We will next create a style for our main
area, and let's do that little shortcut
| | 05:11 | thing again where I put my cursor
here in the code and then it will
| | 05:15 | automatically pull that up for
me so that I can create the style.
| | 05:18 | You don't have to delete that
compound path if you don't want to.
| | 05:22 | For my main, let's do margin
left and right Auto again.
| | 05:29 | For the top, let's add 20 pixels of
padding, and for the bottom let's do Auto
| | 05:33 | there as well. Padding, 0 pixels all around.
| | 05:37 | Now, I need a height, a minimum height,
and that I can't plug in here. We will
| | 05:42 | have to go back into the code and
hand-add it in a little bit later.
| | 05:46 | My position should be relative, and
it's relative to the parent container. In
| | 05:51 | this case, it's a container called container.
| | 05:54 | And then the last thing I want to add is a
background color, and then we can go into the code.
| | 06:03 | For some reason it's not keeping my
height, so let's go back in and add it.
| | 06:06 | Anytime you want to edit a rule,
click the Edit Rule, the little Pencil icon.
| | 06:11 | And we had Height set to Auto.
| | 06:15 | And then I am going to copy
this, paste it in my code.
| | 06:18 | I want the minimum height,
min-height, set to 305 pixels.
| | 06:28 | This will ensure that that container
will be at least that tall, and it can
| | 06:32 | grow taller if it needs to.
| | 06:35 | Refreshing that. Save.
| | 06:39 | We need one more style
for that footer container.
| | 06:43 | Select that here. Let's click OK.
| | 06:47 | And my footer needs to be 100 pixels tall.
| | 06:50 | It doesn't matter what order you
create these in, as long as you have all the
| | 06:55 | attributes in there.
| | 06:56 | I would like my footer text to always
be Arial 13 pixels. And the Position
| | 07:02 | should be relative to the parent container.
| | 07:04 | Padding, 20 pixels on the top.
This will help separate it from the content
| | 07:12 | inside the main block.
| | 07:15 | And the last thing I want to do is add
a temporary background color so that I
| | 07:18 | can see it while I am working.
| | 07:21 | So I am going back into Design view. I
will save my file. And now we can see
| | 07:27 | that there are three blocks of color
representing our header, our main content
| | 07:32 | area, and our footer.
| | 07:33 | You can see that everything has been
coded, everything has been colorized. You
| | 07:37 | really have a much easier time
building out each block within each container
| | 07:42 | with your new content and your CSS.
| | 07:45 | And as you work from top to bottom,
this will help you to test your coding to
| | 07:49 | make sure everything is working
properly in a bunch of different browsers, and
| | 07:52 | if you run into any browser display
issues, you can fix them as you go, rather
| | 07:57 | than have to discover
something a little bit later.
| | 08:00 | If you make sure everything is clean
while you go, that will minimize your
| | 08:03 | testing time later on.
| | Collapse this transcript |
| Building and styling a page header| 00:00 | Before we work on building our header,
I just want to remind you to manage the
| | 00:04 | site to the appropriate exercise folder.
| | 00:06 | Just double-click here on the name of
the file and you can change the location
| | 00:10 | of the local root folder there.
| | 00:12 | We are in folder 06-04, and we'll be
working on a file called 2.buildstructure.
| | 00:20 | It has everything in it that
we had from the last movie.
| | 00:22 | There's a header block, the content,
main content block and a footer block at
| | 00:26 | the bottom. And I'll work in Split Code view,
so you can see what's going on as I work.
| | 00:31 | The first thing I'd like to do
is create a style for the logo.
| | 00:35 | I'd like to put my cursor in the code so I can
go in and create a new style here for the logo.
| | 00:41 | Just set the height, 110 pixels, so
that my container will be the appropriate
| | 00:48 | height that I need it to be. And then I
am going to scroll down to the code for
| | 00:53 | where the logo is and
type in words Cupcake Mary.
| | 00:58 | Now that makes my text appear inside
the container and I want to convert this
| | 01:02 | into a hyperlink that will link to the
actual web site, so that if anyone clicks
| | 01:09 | on this logo, they will be
taken back to the homepage.
| | 01:13 | I also like to make sure that I put
Title and Target in here so that my link is
| | 01:19 | as accessible as it can possibly be.
| | 01:21 | Now before I deselect that text, I
want to do something a little fancy here.
| | 01:26 | I want to give my hyperlink an ID so
that I can create a new style that will
| | 01:31 | style just that link
within this logo div container.
| | 01:36 | In my ID field, on my Properties
Inspector, I am going to call this one CCM
| | 01:41 | (cupcake marry)-logo.
| | 01:43 | So it's a style just for that, and then
I will create the new style for it and
| | 01:49 | Dreamweaver automatically appends that
link with the ID equal to CCM-logo
| | 01:54 | and gives me everything
I need to create that style.
| | 01:56 | So we are going to do about four
different things here that will control
| | 02:00 | the look of the logo.
| | 02:02 | Step one is set the background image
to the logo graphic, which I've already
| | 02:07 | created here in the Images folder for you.
| | 02:09 | There are the image dimensions.
| | 02:12 | So we've got the logo in there,
in the Background category.
| | 02:16 | The container isn't large enough for it
to repeat, so I don't really even have to
| | 02:19 | worry about the repeat. If it
did, that wouldn't be visible.
| | 02:22 | Then in our Box category, number two,
the second thing we would like to do is
| | 02:27 | set the width and height
to match the actual logo.
| | 02:30 | So it's 399 pixels wide by
86 pixels high, so that's good.
| | 02:37 | We have the width and height. And then
to make it center-align the whole block
| | 02:42 | within that space, we're going to set
the margins left and right to Auto.
| | 02:48 | The fourth thing to do here
is to control the block itself.
| | 02:53 | We are going to set the Display to
Block, and in this case to make the logo
| | 02:59 | graphic appear but make the hyperlink
text disappear off the screen so it
| | 03:04 | doesn't appear in the browser window,
we're going to set Text-indent--not
| | 03:08 | Text-align but the Text-indent--
to -9999, and we will set it to pixels.
| | 03:15 | This is just going to move the text
right off the screen and we can click OK,
| | 03:19 | and there's our logo.
| | 03:22 | Next, we would like to drop in the banner image.
| | 03:25 | So back in our code, make sure that we
put our cursor in the appropriate spot.
| | 03:29 | So in between the opening and closing
banner tags, we'll click on the word
| | 03:33 | banner, so that we can create a new
style. And automatically there's our Compound
| | 03:39 | Style Selector name.
| | 03:41 | Here we want to set the style to, under
Block > Text-align > Center, so that this
| | 03:47 | image is centered within its container.
And then the height in the Box area, we
| | 03:53 | want to set it to 128 pixels.
| | 03:56 | That's all we need for this style.
| | 03:57 | So now we have that container right here.
| | 04:01 | For our web site, we want to be able to
change the banner on the different pages
| | 04:06 | of our site, in which case
that area needs to be editable.
| | 04:10 | So rather than insert a banner image as
a background image, we're going to just
| | 04:14 | insert it as a regular image on the page.
| | 04:16 | So insert image, you could
also use the Insert panel.
| | 04:20 | We'll navigate to that;
banner1 is what we need right now.
| | 04:23 | Just call it Cupcake Mary Banner.
And we don't need a Long Description link.
| | 04:28 | Just clicking OK and there it is. And it
looks like I dropped it in the wrong
| | 04:33 | place, so I am going to cut
that and put here in the code.
| | 04:37 | It happens sometimes.
| | 04:38 | Now it's in the right spot. And we
can look at our page in Design view.
| | 04:44 | So now that you've added your logo and
the banner photo, you really no longer
| | 04:49 | need the header background color.
| | 04:51 | So we can go back into our style here,
in the header, and we can just select this
| | 04:56 | and then click the little mini-
trash icon to delete that property.
| | 05:00 | So now it is starting to
look like an actual header.
| | 05:04 | If you would like to test the
clickability of your logo, you can launch your
| | 05:09 | page in a browser window.
| | 05:10 | Let's save while we're at it.
| | 05:12 | You can launch it in the browser window
or you can click the Live View button,
| | 05:16 | which simulates how the page would look
and behave in a browser window. And there
| | 05:20 | is our hand, so we can tell that it's
a clickable link, and if we click it, it
| | 05:24 | would take us to our
actual Cupcake Mary web site.
| | 05:29 | So everything is working
properly the way we want it to.
| | Collapse this transcript |
| Building and styling a navigation menu| 00:00 | Navigation menus come in many flavors
these days, but what they often have in
| | 00:04 | common is an underlying
unordered list structure.
| | 00:08 | With CSS, that structure can
be styled in infinite ways.
| | 00:12 | Here, we'll create a simple
horizontal list menu, where each menu item will
| | 00:18 | change color and display a little
graphic on mouseover and then revert back to
| | 00:23 | its normal color with no graphic on mouse-off.
| | 00:25 | Let's go in Split Code view so we can
see what we're doing while we're working.
| | 00:29 | We want to be inside our navbar container
so we can create a style for that container.
| | 00:34 | Now this, we want to set our Font-
family to Arial, the Font-weight to Bold.
| | 00:42 | Let's choose a color of blue from our
Cupcake logo, and then in the box, we want
| | 00:50 | to set the height to 35 pixels.
| | 00:53 | Let's go back into the type here.
| | 00:55 | I am going to do the size, Font-size.
| | 00:57 | I need it to be specific pixel
dimensions, so I am just going to plug that in, and
| | 01:02 | then in the Block area
with the Text-align > enter.
| | 01:06 | So all the entire navbar will be center-
aligned once we do that. And we're going
| | 01:11 | to create our list menu.
| | 01:13 | So putting our cursor inside that
navigation container--and sometimes I just
| | 01:19 | like to put a little something in
there, so I can see where I am and then I
| | 01:21 | can start typing in.
| | 01:22 | So we need to create a list
for all of our nav menu items.
| | 01:26 | So About Us, and I am just going to hit Enter,
and then Our menu, Locations, and Contact Us.
| | 01:35 | I am going to select all of that
content though and convert it in the Property
| | 01:39 | Inspector into a list.
| | 01:41 | So this is what we want.
| | 01:43 | We also need to create hyperlinks for
each of these, and we can do that through
| | 01:47 | the Link area, in our Properties Inspector.
| | 01:56 | Now to convert this list into a
working navigation menu, we need to create
| | 02:01 | styles for the ul and li tags, as well
as the list link styles that control the
| | 02:07 | normal and over state for the menu items.
| | 02:10 | Let's first create a style for the ul,
so I'll put my cursor here in the HTML
| | 02:16 | and create a new style for the ul.
And here we're going into the List area and
| | 02:21 | were going to set the List-style-type to None.
| | 02:25 | This will remove our bullets.
| | 02:28 | Let's add a little bit of padding for
the top, 12 pixels, and for the Margin we'll
| | 02:35 | do 0 all around, like so.
| | 02:38 | So that removed our bullets, like I said.
| | 02:40 | And next, we need a style for list item.
| | 02:43 | If I put my cursor in any of these
list items here, it should prompt me
| | 02:47 | to create a new list.
| | 02:49 | Let's move the A there, for a
style for the list item style.
| | 02:52 | Now here we have a few
things that we need to accomplish.
| | 02:57 | Let's go to Block, rather, and Display > Inline.
| | 03:01 | Let me apply that so you can see what happens.
| | 03:04 | That changed it from vertical list to
a horizontal list and then Type, we will do
| | 03:09 | Text-transform > Uppercase.
And I'll just click that, so you can see.
| | 03:13 | So we can have all caps.
| | 03:16 | In our Box area, we'll add some Padding.
| | 03:18 | So, on the right, I'll do 40 pixels.
That'll bump things out to the right of each item.
| | 03:24 | For the left, we'll do 0. And these
are pixels. Let's give this a little bit of
| | 03:28 | spacing between the banner photo and
the top of the navigation. Plus, it'll give
| | 03:32 | us some space to put the graphic for
mousing over and 0 Padding on the Bottom.
| | 03:38 | For our background image, I usually
like to put in a blank graphic to hold the
| | 03:45 | space open and then if it's going to appear on
mouseover, then I add that to my link styles.
| | 03:50 | For now I am just putting in this
navwidget that's totally white.
| | 03:54 | I am going to set that to no-repeat and
the Background-position set to center and 0.
| | 04:03 | Back into the Box area. For the
Height, we'll set it to 35 pixels.
| | 04:09 | The Margin, we'll zero those out. There we go.
| | 04:12 | So we have a little space between everything.
And now what we need is a style for our links.
| | 04:19 | But we're going to create four different styles:
| | 04:21 | one for all links--just the a href--and
then specific links for a regular link, a
| | 04:27 | visited link, and a hover.
| | 04:28 | So now that's the correct
compound path for this one.
| | 04:32 | I don't want any of my
navigation links to have that underline,
| | 04:36 | so I am going to make sure
that the underline is set to none.
| | 04:40 | There, now the underline is gone,
so we've taken care of that.
| | 04:44 | And next, we can create
those specific link styles.
| | 04:47 | So we'll do Compound > a:link.
| | 04:52 | Now actually what I need is I need the
full path, because I want these to be
| | 04:56 | specific only to my navigation bar, and
what I'll do is I'll just type in here.
| | 05:02 | So we need container, header, navbar--
you see how all this is nested--and then
| | 05:14 | the unordered list, and then the
list item, and then the a:link.
| | 05:21 | Now for this, we want to make sure that,
again, the Text-decoration is set to none.
| | 05:25 | I don't want to see any
underlines going on here.
| | 05:28 | But I do want to specify that the color
is going to be the same, so it's 7AC1B7.
| | 05:38 | If you're faster working in the
code, you can certainly come in here--
| | 05:41 | I am just going to copy and paste--so
that for my visited, it's exactly the same.
| | 05:47 | I'll just change this to Visited.
And while I'm at it, I can even paste again
| | 05:54 | and change this one to hover and then
I could go back in through the Styles
| | 05:57 | panel and modify it.
| | 06:01 | So back in here, this is the one for hover.
| | 06:04 | Then we can add other styles here,
so things that I want, making sure
| | 06:09 | Text-decoration is set to none. The color
though I want to be different on mouseover.
| | 06:13 | So I want it to be 9E2520.
And then let's go look into the box.
| | 06:20 | For the hover state, I need to mimic
some of these style attributes from the
| | 06:25 | navbar li style so that on mouseover,
the graphic that's going to appear on
| | 06:31 | mouseover will appear in the right spot.
| | 06:35 | And here Padding Top will be 11
pixels. Padding Bottom will be 0.
| | 06:40 | Background image will be a
different background image.
| | 06:43 | In this case, it's my yellow navwidget.
No repeat, center and 0, just like before.
| | 06:51 | We'll set the Height, just like before, to
35 pixels and the Margins to 0 and click OK.
| | 06:57 | Your navigation menu is now complete,
| | 07:01 | so let's save what we've done.
| | 07:03 | Going to Design view and if you want
to preview and test the functionality of
| | 07:07 | your new navigation menu, you can
launch the page in a browser window or click
| | 07:11 | the Live View button here at the top
of the screen. And let's mouse over.
| | 07:16 | Looking good.
| | Collapse this transcript |
| Building and styling main content and a sidebar| 00:00 | With most web pages, the most important
content is that which falls between the
| | 00:05 | header and the footer.
| | 00:06 | This is because the content here is
page-specific and can be indexed by search
| | 00:11 | engines, thereby allowing
more visitors to find it.
| | 00:15 | Let's create a two-column layout
here, and then we'll add some custom
| | 00:18 | content and styles.
| | 00:20 | The content style will set the font size,
the margin spacing, and the width, and
| | 00:25 | the minimum height for the div
container, and that will go on the left.
| | 00:28 | And on the right, we will create a
sidebar style that will have the sidebar
| | 00:32 | floating to the right of the screen, and
it will have a yellow background with an
| | 00:36 | image, and we will center-align
it and add some special fonts.
| | 00:41 | So let's take a look at the code
first, so we can see where we are.
| | 00:44 | There is our main div tag, and then
inside it, we have those two containers:
| | 00:48 | the content and the sidebar.
| | 00:49 | We will create the content style first.
| | 00:54 | So for this, we will go right into the
Box and we can set the Width and the Height.
| | 00:59 | It needs to be 680 pixels wide.
| | 01:03 | For the Height, I want it to be a
minimum height of 282, and since we can't
| | 01:09 | add the min-height attribute here, we will
go back into the CSS and modify that later.
| | 01:15 | Let's do Clear:left, and then back
into the type, we will set the Font-size
| | 01:19 | here. I am just going to go with the
14 pixels, and let's do a Margin Left, while
| | 01:24 | we're at it, of 10 pixels, clicking OK.
| | 01:28 | Now, we can go look at that style here,
and I can modify that to say min-height.
| | 01:36 | Now back in the code, we're going to
create the sidebar. And for this, we will
| | 01:42 | start by setting the
Text-transform to uppercase.
| | 01:48 | We will do Font-weight set to bold.
We will change the color, make sure you put
| | 01:53 | your hash mark in there before
you enter any hexadecimal values.
| | 01:55 | Font-size, Line-height.
Let's go into the Position area.
| | 02:03 | Let's set the Position to absolute,
and the Left to 736, Top set to 18--and I
| | 02:12 | get these measurements from
looking at my Photoshop mockup.
| | 02:16 | Back to the Box, we'll set
the Width and Height here:
| | 02:19 | Width, 219 pixels, Height, 282.
| | 02:25 | We will put a Clear and a Float right
to make sure that the whole thing floats
| | 02:31 | to the side, and then in our Background
area, we will select a Background-image.
| | 02:35 | I have already created this image for
you in the images folder. And we want the
| | 02:39 | Background set to no-repeat and click OK.
| | 02:43 | So if we go back into Design view, we
can see we have those two containers: our
| | 02:50 | main content area on the left, and
our sidebar floating on the right.
| | 02:55 | Let's save what we've done so far.
| | 02:56 | Now we can add some text
and images to both sections.
| | 03:00 | Inside your Layers panel for this
manage site to the appropriate exercise
| | 03:05 | folder is a file, a DOC
fil,e called CM Website Content.
| | 03:09 | We want to open that up. And in the
Home section near the top, copy everything,
| | 03:16 | return to Dreamweaver, and place your
cursor inside the content div, and paste.
| | 03:22 | Now, not everything is going to go here,
so the sidebar content can be pasted
| | 03:27 | into the sidebar div tag.
And I don't need the word sidebar.
| | 03:31 | I have got Cupcake of the Month.
| | 03:33 | We can split that up. We don't need that
comma. I will be inserting a photo. And
| | 03:40 | I can put Moose on its own line, like so.
| | 03:46 | Here, I'll hit Enter so the View Our
Menu is on its own line. And let's put the
| | 03:53 | word Welcome at the top. And we will
turn that into a heading 1 by selecting it
| | 04:01 | and changing it here on
the Properties Inspector.
| | 04:03 | We will do the same thing for this as
well. And we will not need those little
| | 04:09 | brackets. And let's make that center-aligned.
| | 04:14 | So I am just going to come into the
code and append the h1 with the align
| | 04:19 | attribute, set to center, just clean
up that extra space. And we'll save
| | 04:27 | what we've done so far.
| | 04:29 | Next, let's create a style that will
format our heading 1s in the content area.
| | 04:34 | I will place my cursor inside the
word Welcome and create a new style.
| | 04:39 | There is the compound selector.
That's exactly what I want.
| | 04:43 | And for this, we'll do
Font-size: 30, Font-weight:
| | 04:46 | bold, we will make the color
yellow, and we will make it uppercase.
| | 04:53 | And if you want to see what's happening
as you're working, click the Apply button.
| | 04:58 | Oops! Font-size:0. That should be 30.
| | 05:01 | Now I want to do some other things
here, a little bit of Padding, zero all
| | 05:07 | around, and for the Margin we will
do 0 all around as well, clicking OK.
| | 05:13 | Now the text here is cute, but I
could use a little spacing, so let's do a
| | 05:17 | redefine for the p as well.
| | 05:20 | Let's go align the Text to Justify, and
set the Line-height to 2 ems, and in the
| | 05:31 | Box area we will set the Padding to 0.
| | 05:32 | A nice little bit of spacing, that looks good.
| | 05:37 | We probably can get rid of that green
background that's in our main style.
| | 05:42 | If you're unsure, you can always select
the container and go find it in your code.
| | 05:48 | So there it is, the background-
color. I am just going to delete it.
| | 05:53 | And for this word Menu, I have
already created some styles in the CSS that
| | 05:59 | will support creating a hyperlink so that
when you hover over it, it will change colors.
| | 06:04 | So when I turn this into a link--and we'll
call it menu.html, make sure we set the Target--
| | 06:12 | automatically my link style will be
applied to it, and on mouseover, it
| | 06:16 | will change colors.
| | 06:17 | Let's show you in Live view
how this will look, like so.
| | 06:21 | Now this Live view doesn't show you
everything. One thing I want to point out is
| | 06:25 | that in the code for that style,
here, what I've done is I've added a
| | 06:30 | border-radius of 15 pixels, and the
mozilla-border radius, and that's because
| | 06:37 | some browsers interpret this
instruction in slightly different ways.
| | 06:41 | So I had to go in here and type it in myself.
| | 06:44 | And what that will do in a browser
window is it will give my rectangle
| | 06:47 | nice rounded corners.
| | 06:48 | So you would want to hand-apply that yourself.
| | 06:51 | Let's save again what we've done so far,
and we will head on over to the sidebar.
| | 06:56 | With my cursor after the word Month,
I will hit Enter and insert an image.
| | 07:03 | That's my Cupcake of the
Month one, for the first month.
| | 07:08 | Always enter alternate text for your
images. And now I'd like to create a
| | 07:13 | style for my images.
| | 07:16 | So in order to do that, I want to
just make it a style that's applied to
| | 07:19 | this particular image.
| | 07:20 | I'll give it an ID, Cupcake of the
Month (ccom), so that I can now create a
| | 07:25 | style for that specifically.
| | 07:27 | So I will select that here. And I'd
like to give it a nice little border,
| | 07:34 | a solid line, 10 pixels, with a
yellow color. And I can apply that to see
| | 07:41 | how that's looking. Very nice!
| | 07:44 | And then we'll just change the margin
a little bit here. Padding set to 0.
| | 07:48 | I will say zero all around, and I will
go in and modify that, because I'd like
| | 07:53 | the Top to be 5 and the Bottom to be 5.
And I can apply that to see how that's looking.
| | 07:59 | Very nice!
| | 08:00 | Now I'd like everything in my sidebar to
be center-aligned, so I'll go back into
| | 08:05 | the Sidebar style and we will add
the attribute for Text-align: center.
| | 08:11 | There we go. Looking good!
| | 08:15 | Now, all I really need to do is create
some styles to format the type here so
| | 08:21 | that it looks like my mockup.
| | 08:22 | We will do a new custom class, and the
first one, we will call it, sidebar cupcake
| | 08:28 | (.sbcc). And for this, we will just
choose the Font-size to 29 pixels, and we
| | 08:36 | will change the color to white.
And then I can select the word Cupcake and
| | 08:43 | apply that style in the Class area.
| | 08:47 | We can duplicate this style, change
the name here, so we will call it sidebar
| | 08:53 | cupcake of month (sbom).
| | 08:55 | Now, when you create a duplicate, pay
attention to the CSS Styles panel, because
| | 09:00 | it will stay on the
original one, not the new one.
| | 09:04 | So change that, and then we
can go in and modify it here.
| | 09:07 | I would like it to be 19 pixels, but
still white, so that I can select Of The
| | 09:12 | Month and apply that one, the sbom.
Everything is nice and center aligned. And
| | 09:19 | then we will do that again.
| | 09:20 | Let's duplicate, and this one will be my
sidebar fair trade (.sbft). Clicking OK.
| | 09:26 | Now, we can go look at that style,
coming and choosing Fair Trade and change the
| | 09:32 | Font-size to 14, and we will remove the
color, because I like that brown. And then
| | 09:40 | we can select the words Fair
Trade and apply it like so.
| | 09:47 | So now the Type looks good, but we can
tighten up that space if we go into the code.
| | 09:53 | Scroll on over and see
what we've got going on here.
| | 09:55 | I could remove these Ps, opening and
closing p tags, and replace that with a
| | 10:00 | break, and copying that. And do the
same thing here, get rid of that guy.
| | 10:08 | That should tighten everything up nice and easy.
| | 10:13 | So the page is looking really wonderful now.
| | 10:15 | To preview your progress so far, you
can launch the page in the browser window
| | 10:19 | or click the Live View button at
the top of the document window.
| | 10:23 | If you need to cross-check your work,
you can take a look at the code in the
| | 10:26 | file in the Files panel here called buildmain.
| | Collapse this transcript |
| Building and styling the footer| 00:00 | Looking again at the footer for our web
mockup, we can see that the content at
| | 00:05 | the bottom of the layout is divided
into three columns of information.
| | 00:10 | The best way for us to recreate this in
our web site, in Dreamweaver, is to use
| | 00:15 | div tags that are absolutely
positioned relative to the containing div tag
| | 00:20 | with the id of footer.
| | 00:22 | Let's head over to Dreamweaver
so we can create those styles.
| | 00:26 | I've already taken the time to plug in
all of the content that will go in our
| | 00:31 | footer into the three div
containers that are there at the bottom.
| | 00:35 | The footer nav, the contact, and the
network divs will be absolutely positioned
| | 00:40 | inside that parent container.
| | 00:42 | We just need to now create the styles for them.
| | 00:44 | We will start with the
first one, the navigation.
| | 00:48 | So I will select that here, footnav.
| | 00:54 | We need it to be a specific width, and
you can check your measurements inside
| | 00:58 | your Photoshop layout.
| | 00:59 | I want this one to float to the left of the
other two, so we'll do a Clear and a Float: left.
| | 01:07 | For the Padding we will give it 10 pixels on
the left, and its Position needs to be absolute.
| | 01:13 | Let's click OK.
We have the first one in place.
| | 01:18 | For the second one, for the
contact, select that here,
| | 01:21 | we need to make sure that
that's the appropriate size.
| | 01:27 | In this case, it's 340 pixels.
| | 01:29 | And then the Positioning, again,
absolute. And its Left Position is relative to
| | 01:36 | that first container, so we
need to bump it over 360 pixels.
| | 01:40 | So now we have got two in place.
Let's do that third one for the network.
| | 01:51 | This network Box will be 190 pixels wide,
its Position will be absolute, and its
| | 01:59 | Left Position will be 750 pixels.
| | 02:02 | Let's click OK. Now everything is in
place, and we just have to add some styles.
| | 02:08 | So I have added heading 1s above
each of the little sections there.
| | 02:13 | We will start by creating a style for
footer heading 1, the compound style.
| | 02:18 | Now, I don't want this style to just
before the footnav; I want this to span
| | 02:24 | across all of the heading 1s in the entire
footer, so I just modified the selector name.
| | 02:30 | I would like them to display in Century Gothic.
| | 02:34 | We will make it 14 pixels,
with the Font-weight bold.
| | 02:40 | I would like a specific Color, 7ac1b7.
And I can apply this while I am working,
| | 02:48 | to see how it's looking.
| | 02:49 | Let's do a Text-transform so everything
is uppercase. And it's difficult to see
| | 02:53 | on that purple background. We will
get rid of that in just a second.
| | 02:56 | Let's also modify the Margin, 0 all around,
and then we will edit the Top and Bottom.
| | 03:02 | The Top can be 5 pixels, the Bottom
can also be 5 pixels, and click OK.
| | 03:09 | So that parent container is our footer.
| | 03:11 | I will go all the way up to find
it and remove the background-color.
| | 03:15 | So now those headings look good.
| | 03:20 | Let's also create a style for
paragraph text in the footer.
| | 03:24 | I am just going to change that here to a p,
and we will 0 out the margins so that
| | 03:31 | there isn't any extra spacing anywhere.
| | 03:34 | That will take care of
some formatting issues for us.
| | 03:37 | Now, I do have these little images
over here, and I would like to add a little
| | 03:41 | bit of space between all of them.
| | 03:44 | So I will create a general style for
all linked images in the footwork in that
| | 03:49 | section. That gives them a
little bit of padding on the right.
| | 03:52 | How about 4 pixels?
| | 03:55 | And then the last thing we can
do is create some footer links.
| | 03:59 | I've got links here, links here.
| | 04:03 | Now, I would like these to be
links for anywhere in the footer.
| | 04:06 | I'll use a special selector type
here, but I am going to modify it.
| | 04:12 | After the a, I will put a period and
then type in the name of the container.
| | 04:17 | So this is for any link in the footer container.
| | 04:21 | Here we can specify the color. We can
turn that underline off, and we can set
| | 04:28 | the Font-weight to normal. In case
there was any bold applied anywhere else,
| | 04:31 | that will strip it down.
| | 04:34 | I can Duplicate this, but instead
of link, I can call this one visited.
| | 04:41 | And I am just going to leave those
attributes exactly the same, so they are identical,
| | 04:46 | and then Duplicate again to create a
hover state. And for this, make sure you
| | 04:53 | select that before you modify it,
I will change the color like so.
| | 05:00 | Sometimes when you create links you
have to hand-apply the style to them, so
| | 05:05 | I'll double-click here. And in the class
area just make sure that the style that
| | 05:10 | you just created is selected. So all
these look like they are good to go, but
| | 05:15 | you may have to hand-apply
those on your own at some point.
| | 05:17 | For instance, like this one, Class
is None, if we want it to have the same
| | 05:22 | styling, just hand-apply it like so.
| | 05:25 | The building portion of our web site
master page is nearly complete. To
| | 05:30 | preview your progress so far, save
your work, launch the page in a browser
| | 05:34 | window, or click the Live View button
at the top of the screen, so you can
| | 05:40 | track your progress.
| | 05:41 | And if you need to cross-check your work,
take a look at the code in the file, in
| | 05:45 | your Files panel called 6.buildfooter.html.
| | Collapse this transcript |
| Adding metadata and externalizing the CSS| 00:00 | Before we convert our master page
into a template, there are two important
| | 00:04 | things that we still need to do:
| | 00:06 | we want to embed some valuable
metadata into the head of our page and then
| | 00:10 | relocate our CSS from inside the
page to a linked external CSS file.
| | 00:17 | Metadata refers to the so-called hidden
coder tags that go into the head of your
| | 00:22 | web pages, and they define the page
content, but more importantly, this
| | 00:27 | information is used by search engines
to index your page and by web browsers to
| | 00:32 | properly display and route visitors to
the appropriate sections of your site.
| | 00:35 | So I have a file of metadata that I've
already created here. It's a text file,
| | 00:40 | and I've opened it up in Dreamweaver.
| | 00:42 | Let's just take a look and talk
about what's going on here, briefly.
| | 00:45 | We have a profile in the head code, and
that will help browsers understand what
| | 00:51 | they're seeing here and it will
also help display our favicon.
| | 00:56 | There's a typical Content-Type meta
tag, and that usually just describes the
| | 01:00 | character set that's being used within the page.
| | 01:02 | There's our title for Cupcake Marry.
| | 01:05 | Keywords are important, search
terms that people would use in Google to
| | 01:09 | search for your site.
| | 01:10 | They're not widely used anymore, but
they're sometimes used, and I think it's a
| | 01:14 | valuable thing to stick it in there.
| | 01:15 | They don't take up that much room.
| | 01:17 | Your Description, description can
either be the same on every page of your site
| | 01:23 | or unique to individual pages.
| | 01:25 | That's a little bit more work, but we
have our description there, just a brief
| | 01:28 | statement about who we are and what we do.
| | 01:30 | There's your publisher and
your copyright information.
| | 01:33 | The author, the language--
| | 01:35 | we're English, United States.
| | 01:36 | The distribution is global.
| | 01:38 | We want everyone to be able to access this.
| | 01:40 | In fact, if we think we're going to
have new content regularly, we can say
| | 01:44 | revisit after a certain number of days.
| | 01:47 | We have our robots. That's really important.
| | 01:49 | We want all of our content to always
be indexable at all times, and we would
| | 01:54 | want people to follow us
if they could follow us.
| | 01:56 | There's our link to our shortcut favicon,
| | 02:00 | if we had a .ico file, but right
below that there's one for our PNG file.
| | 02:05 | That's one we'll be using.
| | 02:06 | And then I always like to put in here
a link to the index page, as well as a
| | 02:10 | link to a site map page, so that
people using assistive devices can use their
| | 02:14 | Tab keys to browse to those.
| | 02:16 | So we are going to copy this whole thing
using a keyboard shortcut, popping into
| | 02:21 | our code, and then paste it right in.
| | 02:24 | So I will remove the title, meta,
and head and just replace it with
| | 02:29 | everything that I have.
| | 02:31 | Most of this is optional, but at
minimum I would recommend having your title in
| | 02:35 | there, your keywords, your description,
and the robots, and then if you want the
| | 02:39 | favicon, good, and
definitely index and site map.
| | 02:43 | That's taken care of.
| | 02:44 | The other thing we want to do
is externalize our CSS code.
| | 02:47 | Actually, let's pop back over to our
CSS section. There's all these styles.
| | 02:53 | Our master page is almost ready
to be converted into a template.
| | 02:56 | We want to be able to use that
template for multiple pages on our web site and
| | 03:00 | not have to go into individual
template-based pages to modify code. We want one
| | 03:04 | style sheet that will be accessible everywhere.
| | 03:07 | So you could select these styles, all
of them, right-click, choose CSS Styles,
| | 03:13 | and then Move CSS Rules, but when
there's a lot of styles, I find it's easier
| | 03:17 | just go to the CSS Styles panel,
click on the top style, scroll down,
| | 03:23 | Shift+Click on the bottom style so
you've selected all of them, right-click
| | 03:27 | anywhere, choose Move CSS Rules.
| | 03:31 | This dialog box pops open.
| | 03:33 | If there was an existing style sheet,
you could select it here, but we want to
| | 03:36 | create a brand-new style sheet.
| | 03:39 | Click the OK button.
| | 03:41 | Tell Dreamweaver what we want to call this.
| | 03:43 | I usually name my style sheets after my
customers or my projects, so this could
| | 03:47 | be ccm.css. Save it and Dreamweaver
will automatically relocate all of those
| | 03:54 | styles for me and create that new file
for me, dropping it here into my Files
| | 03:59 | panel over on the side.
| | 04:00 | It does leave the style tags here in
case I did need to create some custom
| | 04:04 | styles for any of my template-based
pages later on, but if you scroll back up to
| | 04:09 | the top, we no longer see the style tag
that coordinates with this one. We see a
| | 04:13 | link to our ccm.css, and
there's all of our styles.
| | 04:18 | Another thing that Dreamweaver did is it
dropped in this link tag, and this tells
| | 04:23 | the browser window to go find this
external file and use the contents of that
| | 04:28 | file when displaying this
page in a browser window.
| | 04:32 | The other thing you might want to do
at this stage is, if your page had any
| | 04:37 | JavaScript in it--and some people
use JavaScript to control buttons like
| | 04:41 | rollover buttons, or maybe they would
use it to control visibility of some div
| | 04:46 | tags--you can externalize your
JavaScript in the same fashion.
| | 04:50 | And to do that, you go to your Commands
menu and choose Externalize JavaScript.
| | 04:55 | It will recognize if you have any
JavaScript in your code, and then you can
| | 04:59 | click that button and it will send it to an
external file and create that file for you.
| | 05:04 | And this is great. Just like working
with CSS, having an externalized JavaScript
| | 05:09 | file will give you access to the
same code across multiple pages.
| | Collapse this transcript |
| Creating templates with editable regions| 00:00 | Templates are a great way for
taking control over your code across a
| | 00:04 | multipage web site.
| | 00:05 | What makes them so robust is that they
have both editable and locked regions.
| | 00:11 | That way, when you create a template-
based page, you can only modify the content
| | 00:15 | inside those editable regions.
| | 00:18 | Even better though, for site-wide
changes to those locked areas, you only have
| | 00:22 | to modify the template and Dreamweaver
will automatically take care of updating
| | 00:27 | all of the template-based pages for you.
| | 00:29 | To convert a regular HTML file like we
have here into a Dreamweaver template,
| | 00:35 | all you need to do is go to your File
menu and choose Save as Template--not Save
| | 00:41 | As, not Save All but Save as Template--
and you just have to give it a name. So
| | 00:46 | we can call this ccm or call it
whatever you like. This is just for you.
| | 00:51 | As is the Description field, you can
fill it out or not, click the Save button.
| | 00:55 | Now Dreamweaver asks you if
you would like to update links.
| | 00:59 | Always say Yes, because what it does in
the process of converting your file into
| | 01:06 | a template is it creates a folder here
in your Files panel called Templates and
| | 01:12 | it moves the template file
inside that Templates folder.
| | 01:17 | And when it moves the file, it changes
the link's structure, so that an image that
| | 01:22 | was previously linked to the images
folder, now it has this ..- so that it
| | 01:27 | tells you that you have to go outside
the folder and then go back into the
| | 01:31 | folder called images and then find the image.
| | 01:33 | So it changes the link structure for you.
| | 01:35 | So always say yes, unless you
have a really good reason to say no.
| | 01:40 | Templates have by default no editable
regions, so you need to create those yourself.
| | 01:46 | For our project, we really only need
two regions: one for the banner so we can
| | 01:50 | change the banner photo on the
different pages of our site, and one for the
| | 01:54 | middle part of the page that includes
both the main content and the sidebar.
| | 01:58 | That will give us the flexibility to
update those areas for the individual
| | 02:02 | template-based pages of our site,
while everything else will remain locked.
| | 02:06 | We won't be able to access the logo.
We won't be able to access the navigation
| | 02:10 | bar or the footer area in those template-
based pages. But if we ever did need to
| | 02:15 | modify those, we would do
that through our actual template.
| | 02:19 | To create an editable region, the first
thing you need to do is select the area
| | 02:23 | that you want to convert
into that editable region.
| | 02:25 | I already have my banner selected, so
all I need to do is create the region.
| | 02:29 | So you will choose Insert >
Template Objects > Editable Region.
| | 02:36 | When you click on that, this dialog box
pops open and it asks you what you want
| | 02:40 | to call that region.
Use semantic naming and you'll do fine.
| | 02:45 | So I will call this banner
image, just banner, and click OK.
| | 02:49 | And you can identify an editable region
in your template by this little blue tab
| | 02:54 | here. And when you select the blue tab,
you can see the name of that region in
| | 02:59 | the Properties Inspector.
| | 03:01 | If you click away, sometimes you can
also see there's a tiny little blue line
| | 03:05 | around the outside of that region, and
that will also appear in your template-
| | 03:09 | based pages to quickly help you see
which parts you can change and which parts
| | 03:14 | you can't. The second editable region
that I'd like to create is for my main
| | 03:18 | content area, and I am just
clicking that entire area.
| | 03:22 | Sometimes it might be difficult to
select the place that you want while you're
| | 03:27 | in Design view. For instance, I might
click here or click here and I'm not
| | 03:31 | actually getting the region that I want.
| | 03:33 | So you could always go down to the
quick tag selector--this little area right
| | 03:37 | here--and if you're clicking inside
of an area, it will tell you where you
| | 03:41 | are within the code.
| | 03:42 | So I'm in the body. I am in a
container called div, inside a container called
| | 03:46 | main, inside a container called content,
inside a heading that happens to be a link.
| | 03:51 | So if I know I want to create an editable
region for this tag, I can click it here.
| | 03:56 | This is like a great shortcut.
| | 03:59 | Insert > Template Objects > Editable
Region, and for this one I will just call it
| | 04:04 | MainArea and click Ok.
| | 04:09 | And let's take a look at the
code of what's happening here.
| | 04:12 | Dreamweaver will drop in opening and
closing tags like this, so it will mark the
| | 04:17 | beginning and the end of those editable
regions for you. They are in comment tag
| | 04:23 | so they will not print out, and they
are used exclusively by Dreamweaver to
| | 04:28 | identify the areas that are locked
versus the areas that are editable.
| | 04:33 | Now creating templates is a really
smart way of working in Dreamweaver to
| | 04:37 | maintain control over your
pages in multipage web sites.
| | 04:41 | Anytime you need to make site-wide
changes, simply open up your template, make
| | 04:47 | your edits, and say yes when Dreamweaver
offers to update all the files in your
| | 04:51 | template-based pages.
| | Collapse this transcript |
|
|
7. Building Template-Based PagesCreating pages and adding content with CSS| 00:01 | Creating template-based pages from a
Dreamweaver template is quick and easy, and
| | 00:05 | it really helps to
streamline the site-building process.
| | 00:08 | Once you create a page, you can update
the content inside the editable regions.
| | 00:12 | Let me show you how it works.
| | 00:13 | Start by choosing File > New, and
here you'll choose Page from Template.
| | 00:18 | Your managed sites should be listed
under the Site category, and any templates
| | 00:22 | for the selected managed site
will appear in that middle category.
| | 00:26 | So everything is selected and ready to go.
| | 00:28 | I'll just click the Create button.
| | 00:30 | This page was based on my homepage, and
even though it's a template now, it has
| | 00:35 | everything I need for my homepage.
| | 00:36 | So all I really need to do is
choose File > Save and call it index.html.
| | 00:42 | To create my next page on my web site,
I usually work from the navigation
| | 00:45 | menu from left to right.
| | 00:47 | So I could either do File > New and
then choose the template again or I can
| | 00:50 | even File > Save As and call this one
About and then just come in here and
| | 00:56 | change the content.
| | 00:58 | Now, we do have a file in the Files
panel, a Word document, called CM Website
| | 01:02 | Content that you can open up to
gather all of the content for each page.
| | 01:07 | So, let me toggle over there and we'll
get the content for the About Us page.
| | 01:10 | Just scroll down here and select
everything that's supposed to go on that page,
| | 01:15 | copy it, and switch back to Dreamweaver.
| | 01:18 | So I don't need any of this.
| | 01:22 | I'll delete it and just
paste everything else in.
| | 01:26 | Now, I can just go in and modify the text.
| | 01:29 | So, for instance, if I needed to create
some hyperlinks in the second paragraph,
| | 01:33 | we say they have two shops, one
in Manhattan and one in Brooklyn,
| | 01:38 | so I can make this a link to the Locations page.
| | 01:42 | In fact, if my Locations page
has two sections for each location,
| | 01:47 | I can create anchor links on that page and then
make this link jump directly to those anchors.
| | 01:52 | So even though the page isn't
created yet, I can still hard-code some of
| | 01:57 | these links, and to use the anchor, I
just use the hash symbol and then
| | 02:02 | the name of the anchor.
| | 02:03 | So, I could do the same thing for
Brooklyn, but let's finish this one out.
| | 02:07 | We'll call this Manhattan.
| | 02:09 | Make sure we put the target in there.
And so I could copy this and then select
| | 02:15 | Brooklyn and paste it in there
and then just change this, like so.
| | 02:27 | Other things that are in here,
there could be a link to the coupons.
| | 02:30 | Now, sometimes you might not know
what the page is supposed to be called.
| | 02:34 | In those cases, you just put a hash tag
in the Link field and it will make
| | 02:38 | it look like a link.
| | 02:39 | Just remember before you publish your
site to go back in the code and look for
| | 02:43 | any hash tags and
update that before you publish.
| | 02:45 | Let's add a photo in here too.
Scrolling back up to the top.
| | 02:49 | We'll put a photo at the
beginning of the second paragraph.
| | 02:52 | Insert > Image, and you'll choose the
file called owners. Drop that in like so.
| | 03:01 | Now, I want my image to float to the
left of all the text rather than being
| | 03:04 | part of that paragraph,
| | 03:05 | so we'll need to create a style
for it and we can do a custom style.
| | 03:11 | This way we can selectively apply it to
any image, but it won't automatically be
| | 03:15 | applied to all images.
| | 03:16 | Create a new class.
| | 03:18 | Let's call this semantically
imgalignlef, and we'll give it a blue border, as
| | 03:25 | opposed to a yellow border or something else.
| | 03:27 | So, for this, I want to make sure that the
image will float to the left of the content.
| | 03:32 | So, we'll do a Clear and a Float left.
| | 03:35 | I would like to give the image a border.
| | 03:37 | Let's do a solid 10-pixel border with a blue.
| | 03:41 | So I know the color that I want to use
here, just pop in the hexadecimal value.
| | 03:47 | And let's give it a little bit of a
margin so that the text isn't right up
| | 03:51 | against that right edge on the right
side, but we do want the left side to remain
| | 03:55 | flush with the rest of the text.
| | 03:57 | Now, I would like to apply
this here to alignleft. Oh!
| | 04:01 | I've picked the wrong one.
We want the one that says blue.
| | 04:04 | I would like to have that
rounded corner for this.
| | 04:07 | So, I am going to go into my CSS and I
can access it here by clicking on it, and
| | 04:13 | there's my style. And I want to
append this with that border radius.
| | 04:17 | Again, I can always access this through the
CSS panel, but I'll just type it in border-radius:,
| | 04:22 | and then I want to give it 15 pixels
and then I am going to copy and paste that
| | 04:30 | line and we will append that with the -moz
for Mozilla browsers, like so, and come
| | 04:37 | back to the source code so we can see our page.
| | 04:40 | We're not going to see a preview of that
in the browser window here or in Design
| | 04:43 | view or even in Live view.
| | 04:44 | That will show up when we launch it in
a real browser and have it going live.
| | 04:49 | So, we're done with this page now.
| | 04:50 | The next thing you'll do is save your work.
| | 04:53 | When you go to Save, typically you're
prompted to save all of your files or you
| | 04:57 | can also choose Save All, so that will
save not only your document but any other
| | 05:02 | files that you may have modified,
like your cascading style sheet.
| | 05:04 | So, on your own, what I'd like you to
do is create the rest of the sample pages
| | 05:09 | using the copy from that Word document.
And the graphics for the entire site will
| | 05:13 | be provided for you in the Images folder.
| | 05:15 | Now, some of the other pages for this
web site, like Locations, Menu, and Contact
| | 05:19 | will have custom styles that will
help you format and position the content.
| | 05:23 | You'll find these styles
already embedded in the ccm.css file.
| | Collapse this transcript |
| Using absolutely positioned (AP) div tags| 00:01 | In addition to working with regular
div tags, Dreamweaver lets you work with
| | 00:04 | what they call AP div tags.
| | 00:06 | Those are absolutely positioned divs
that come with their own CSS, which will
| | 00:12 | allow you to position a
container relative to a parent container.
| | 00:16 | So if you look at this sample coupon
page, we see one parent container with a
| | 00:21 | dotted gray line. Nested inside of it
are three additional containers that are
| | 00:26 | absolutely positioned relative to the parent.
| | 00:29 | So let me show you how we can
build this page working with AP divs.
| | 00:33 | You can insert your AP divs either
through the Insert menu or the Insert panel.
| | 00:39 | Choose Insert > Layout Objects > AP Div,
and it'll drop in an AP div tag for you
| | 00:45 | right onto the page.
| | 00:46 | It will be named apDiv1 or any
additional ones that you add, they'll be apDiv2,
| | 00:50 | apDiv3, et cetera. And it comes with its own CSS.
| | 00:55 | And we're working with our style sheet
in the page here, so I can quickly go in
| | 00:59 | and modify any of the attributes, so
we can see what it's given us already.
| | 01:03 | It's absolutely positioned. It is 115
pixels high, it's 200 pixels wide, and its
| | 01:11 | Z-index, its stacking order, is set to number 1.
| | 01:13 | Now I want this to be my parent
container, so I am going to give it some
| | 01:16 | additional attributes.
| | 01:19 | Opening up the Rule definition dialog box,
let's go through here and add a few things.
| | 01:25 | So under Box, I need it to be 680
pixels wide and 330 pixels high.
| | 01:35 | I don't have to mess with the Z-index;
| | 01:35 | that's already taken care of. But as
far as its positioning in the browser
| | 01:40 | window, I'd like to make sure that
I have it exactly where I need it.
| | 01:43 | So I want 9 pixels on the Left and 162
pixels down from the Top-Left edge of
| | 01:49 | the browser window, and I also want to give
it a nice dashed border or a dotted border.
| | 01:55 | Let's do dotted here and make it 3
pixels. And the color, instead of black, we'll
| | 02:02 | make it darker gray, like so.
| | 02:04 | So it's dropped in that parent
container for me. And then to create a nested
| | 02:09 | container, I'll put my
cursor inside of that container.
| | 02:12 | So now--we can even look at the
code. You can see where my cursor is.
| | 02:15 | It's between the opening
and closing div tag there.
| | 02:17 | Now when I insert my next AP div, I
am assured that it's nested inside
| | 02:23 | its parent container.
| | 02:25 | Now for this one, I can do the same
thing, but make sure you have the new
| | 02:29 | container selected in the CSS panel
before you go and modify its contents.
| | 02:34 | So this time, I want to make it
170 pixels wide by 265 pixels high.
| | 02:41 | I'll leave the Z-index the way it is,
but as far as its positioning, I would
| | 02:45 | like to position this one 9 pixels in from
the left and 13 pixels down from the tTop.
| | 02:52 | The Background Color, I will either
sample it from the logo or I can pop in a
| | 02:57 | color that I know, like so, and click OK.
| | 03:01 | So now we have this container
and we can add content to it.
| | 03:06 | Now I did provide you with a file
called demo text, so you can copy the
| | 03:11 | content that will go in each of the three
containers. And I'll just paste that in there, like so.
| | 03:16 | But another thing that you could do is
create a custom style, and I've already
| | 03:20 | created this custom style called couponbox.
| | 03:23 | And the neat thing about creating a
custom style is that you can apply it over
| | 03:27 | and over and over again to different containers.
| | 03:29 | So to apply that style to this container,
I'll have it selected, and I just go to
| | 03:34 | my Properties Inspector and select it.
| | 03:36 | Now that style has a background
image, it has a dashed border, some
| | 03:42 | formatting, padding, et cetera.
| | 03:44 | And in order for my text to drop down,
I'll just put to a paragraph return to
| | 03:48 | add some p tags there, and
now everything looks good.
| | 03:52 | So another quick shortcut about
working with AP divs is that you can copy and
| | 03:56 | paste them. And you can tell that it's
selected when you see that little tab
| | 03:59 | there at the top of the screen.
| | 04:02 | And Edit > Copy, put your cursor to the right
side of that div tag, and then you can paste.
| | 04:11 | That'll paste it right on top, so you
just drag it off to the side. And then you
| | 04:15 | can select that AP div, in this case
now it's apDiv3, and you can change the
| | 04:20 | background color, and maybe I'll sample
something from the logo. And you would
| | 04:25 | just repeat the process.
| | 04:26 | Here is what the finished page
looks like in Dreamweaver anyway.
| | 04:30 | We've got all three nested AP
divs inside the parent container.
| | 04:34 | Not only can you position and style
AP divs, but you can place any contents
| | 04:38 | inside of them, which can be
further styled and positioned with CSS.
| | 04:42 | AP divs give you the flexibility
you need when creating complex layouts
| | 04:47 | without the use of tables.
| | Collapse this transcript |
| Inserting form fields| 00:00 | In addition to providing information to
web site visitors, we sometimes need to
| | 00:04 | collect information from them.
| | 00:07 | That's when we add a form to our web site.
| | 00:09 | Forms can be used for all kinds of
things like surveys, sign-ups, logins,
| | 00:14 | searches, feedback, and
orders for products and services.
| | 00:18 | What's more, each form can be custom
designed so that you only request the
| | 00:23 | specific information that you need.
| | 00:26 | On our web site, we will be adding a
simple one-field sign-up form to our
| | 00:30 | contact page here using a spry and
validation form field that has this self-
| | 00:35 | validating JavaScript.
| | 00:37 | Let's scroll down to the place on the
page where we'll be adding our form, and I
| | 00:40 | usually like to put forms inside
containers and then style those containers.
| | 00:45 | I am going to select this reminder text,
and we will insert a regular div tag and
| | 00:51 | give it the ID of signupform, and
then we can go create the style for it.
| | 00:55 | I don't want strong. I am going to
delete that text in the second. And make sure
| | 00:59 | that you are choosing your existing
external style sheet here before you click
| | 01:03 | OK. And then I will just pop in some
things like Background color, Border color,
| | 01:08 | things like that. And I've already
preselected the colors that I want to use, and
| | 01:13 | of course, if this was your own
project, you can deviate from this.
| | 01:18 | Let's do a solid border, 10 pixels, de090.
| | 01:25 | Let's give it a specific size. We will
go 450 pixels wide by 80 pixels tall. That
| | 01:31 | should accommodate our needs--and then
zero out all the Padding in and we can
| | 01:35 | add some specific Padding, give it a
little bit of space on the top, a little
| | 01:39 | bit of space on the bottom.
| | 01:40 | We can always come in
here and adjust it if needed.
| | 01:43 | Now sometimes there is rendering issues
in Dreamweaver with recording software,
| | 01:47 | so we're not seeing our style applied
here, but if you click into the Live view,
| | 01:52 | you should be able to
preview what it looks like.
| | 01:54 | That's what it'll look like.
| | 01:55 | But we'll continue working without it.
In fact, I do want to modify the style
| | 01:59 | because I would like it to have that border-
radius and we will have to hand-code that in.
| | 02:04 | So border-radius and : 15 pixels;
| | 02:10 | and I will copy that line again right
below and then modify it for Mozilla, so
| | 02:16 | -moz- and we are good to go. And I
will switch back over to my source code.
| | 02:21 | Let's just to go Design view.
| | 02:23 | So now we have our container styled and
ready to go, and we can add our form inside of it.
| | 02:29 | So instead of having INSERT FORM HERE,
which I don't need--I will delete it--we
| | 02:34 | do need to insert a form field.
| | 02:36 | So we will go to Insert > Form.
| | 02:37 | I like to use the menus. You can
use the Insert panel if you like.
| | 02:41 | Insert > Form, that puts in a simple
form field for us, the opening and closing
| | 02:47 | Form tabs. And we will put our
Form field inside that Form tag.
| | 02:52 | Now take a look at the
Properties Inspector with that Form field.
| | 02:56 | We can give our form an ID, an
action, a target, and a method.
| | 03:01 | Let's click on here so we can see that.
| | 03:04 | The action you enter here will tell
the browser what to do with the form data
| | 03:08 | after the visitor clicks the Submit button.
| | 03:10 | For example, you might input the URL of
the file, script, or software that will
| | 03:15 | collect and process the data.
| | 03:17 | There are tons of different kinds of options,
| | 03:20 | so check with your host provider
or email marketing service for the
| | 03:23 | correct action code.
| | 03:25 | We are going to leave it blank for now,
but again, you'll check with your host
| | 03:28 | provider and you'll put the
appropriate content in there.
| | 03:31 | The next thing we need to do is put our
cursor in between the opening and closing
| | 03:35 | tags and we will insert that Form Field.
| | 03:37 | Insert > Form, and there are all these
regular Form fields but then at the bottom
| | 03:42 | of this listing, there are
all the spry validations fields.
| | 03:45 | We just need a Text Field area and we
will drop that in. And most of these forms
| | 03:50 | are connected with the Accessibility
dialog box and they are prompt to help you
| | 03:54 | make sure that your pages are as
accessible as possible, both to people using
| | 03:59 | assistive devices and other devices.
| | 04:00 | So it's important that you fill out
these fields to the best of your ability.
| | 04:04 | Here you have the option of entering an
ID, like for assigning JavaScript, and a
| | 04:09 | label to identify the input tag
for this field, along with these other
| | 04:13 | accessibility attributes.
| | 04:15 | For the Label field, you might want to
enter Email with a colon and a space and
| | 04:21 | that will put that text right before
the form field for you. aAd then for your
| | 04:26 | Access key, you can put in an A, and
for the tab index key you can put a 1.
| | 04:31 | This would allow people to use keyboard
shortcuts to navigate through your form
| | 04:35 | and this is especially
important for multifield forms.
| | 04:39 | If you wanted to bypass all of this,
of course, you can click the OK button
| | 04:42 | without filling anything in.
| | 04:44 | So there's my spry field, and spry
fields are identified by that blue tab and a
| | 04:49 | blue outline. And if you look at the
code off to the left, you'll see that
| | 04:53 | everything is inside of a span with
an ID of sprytextfield1. There is the
| | 04:57 | label with the text, email and
colon and then there is the input field
| | 05:02 | et cetera, et cetera.
| | 05:03 | We can modify the field in
our Properties Inspector.
| | 05:08 | Lets customize our spry text field here.
| | 05:11 | Under Type, let's choose Email address.
In the spry text field off to the left
| | 05:17 | instead of having this boring,
generic name, we will call that one email.
| | 05:22 | This will help us identify the
collected information as well.
| | 05:25 | Let's now select the form field itself,
because that will change the properties
| | 05:29 | on the Properties Inspector,
and we can modify this too.
| | 05:33 | In the text field, we want to
change that to emailaddress.
| | 05:37 | For the Initial value, we can actually put
something in there before they start typing.
| | 05:42 | So we can say Enter your email address.
And then for the Character width we can
| | 05:48 | say how wide we want that to be.
| | 05:50 | So we can say 35 pixels wide, or it could be
narrower or wider. It's totally up to you.
| | 05:54 | Now placing your cursor at the end of
this spry field but before the closing
| | 06:00 | form tag, I want to insert a break so
I am Shift+Enter or Shift+Return to add
| | 06:05 | that break. And we need to insert a
button for a form so that they can
| | 06:09 | actually submit it.
| | 06:10 | Going back to the Insert menu, Form.
| | 06:12 | There is no spry button so we will just
use the regular Button. And again, here
| | 06:16 | we can choose whether or not to use the
label or the ID access key and tag key.
| | 06:21 | Let's enter b, 2 for those at the
bottom and click OK, and that will be added to
| | 06:26 | our code on the left side here.
| | 06:28 | And now with our button selected,
let's change the Value from Submit to SIGN
| | 06:34 | UP, and I'll use all caps. And we will
change the Button name from button to
| | 06:41 | signup, all one word.
| | 06:43 | If our form needs more input fields, we
can simply add them from the Insert > Form
| | 06:48 | menu and then style them
appropriately as needed.
| | 06:51 | We could even create custom CSS
styles for individual form input fields.
| | 06:55 | When we save our file, Dreamweaver will
prompt us to save some special support
| | 07:01 | files that go along with this spry field.
And if you say yes or OK here, what it
| | 07:07 | will do is it will create a
folder in your Files panel--
| | 07:09 | you might have to refresh to see
it--a folder called SpryAssets.
| | 07:14 | The only other thing you need to do to
insure that your forms works properly is
| | 07:18 | to upload that SpryAsset folder to the
host server, along with any pages on your
| | 07:24 | site that include forms
made with spry form fields.
| | 07:27 | Now because of our rendering
issue, we can't see how that looks,
| | 07:30 | so let's go to Design view and choose
Live view and then we can take a look
| | 07:35 | at our finished form.
| | 07:37 | In fact, if we were to preview this in
a actual web browser, we would see our
| | 07:40 | form container with the rounded corners.
| | Collapse this transcript |
| Exploring SEO, metadata, and accessibility| 00:00 | One of the underlying goals for most
web sites is to reach as many people as
| | 00:05 | possible so that you can market and
hopefully sell your products and services
| | 00:10 | and other offerings.
| | 00:12 | To do that well, however, you need to
ensure that your web site is both human- and
| | 00:17 | search-engine-friendly.
| | 00:19 | Thankfully, with some simple coding
tricks, you can make that happen by
| | 00:22 | following these simple guidelines.
| | 00:24 | We're going to talk about search engine
optimization, meta tags, and accessibility.
| | 00:29 | With search engine optimization, or SEO
for short, the main goal is to make your
| | 00:34 | content as indexable as possible by
search engines, and especially Google.
| | 00:39 | Here are the four most important things you
can do to make your site more SEO-friendly.
| | 00:44 | The first thing is to use
keyword-rich content in headings.
| | 00:48 | That's any text styled with
heading 1, heading 2, heading 3.
| | 00:52 | For example, "We sell fresh-from-the-
oven, warm and gooey delicious chocolate
| | 00:57 | chip cookies and other baked treats at
our West Village Bakery in New York City"
| | 01:01 | is much more compelling and informative
and keyword-rich than, "We sell cookies
| | 01:06 | and other treats at our store".
| | 01:08 | So use lots of keywords embedded
in your content and your headings.
| | 01:13 | The second thing is to use semantic
naming for all of your files, folders,
| | 01:19 | downloadable assets, and images.
| | 01:21 | For instance, an image named 15997.jpg
doesn't tell anybody anything about the
| | 01:28 | image, but a file named drinks_hot.jpg does.
| | 01:34 | The third thing to do is to
externalize all of your JavaScript and CSS files.
| | 01:40 | This will not only make your pages
smaller in size so they load faster, but will
| | 01:44 | also put the focus on the page
content, rather than its functionality and
| | 01:48 | presentation, which is mainly
what search engines care about.
| | 01:52 | The fourth thing to do for SEO is to be sure
to link to related pages within the web site.
| | 01:58 | Think of these internal links as
roadmaps that tell search engines which parts
| | 02:03 | of the web site are most important.
| | 02:06 | With meta tags, which you've learned
about in Chapter 6, these are those hidden
| | 02:10 | tags that go into the heads of your pages.
| | 02:13 | Be sure to include these on all of
your pages throughout your entire web site.
| | 02:17 | The three most important meta tags are
the description, keywords, and title.
| | 02:22 | Meta descriptions provide search engines
with a description of the whole site's contents.
| | 02:29 | Meta keywords are the seven most
important words or terms or phrases that you
| | 02:34 | think visitors might use to
find the site in a search engine.
| | 02:38 | Unique page titles will display at the
top of the browser window and generally
| | 02:43 | tell visitors and search
engines what the page is about.
| | 02:47 | To make your pages even more SEO-friendly,
consider having unique metadata on every page.
| | 02:54 | Now as far as accessibility goes, not
everyone cruises through the web through a
| | 02:58 | browser with a mouse.
| | 03:00 | To make your pages as accessible
as possible, to the widest possible
| | 03:04 | audience, including those using
handheld or other assistive devices, follow
| | 03:08 | these four suggestions.
| | 03:10 | Number one: keep your site's
navigation accessible by using a combination of
| | 03:15 | HTML and CSS instead of
rollover graphics with JavaScript.
| | 03:21 | Number two: make sure that all of
your image tags include ALT attributes.
| | 03:26 | This is another opportunity for you
to use short, keyword-rich descriptions
| | 03:32 | about what's in the photo or graphic.
| | 03:35 | Images that don't need descriptions
should still include the ALT attributes, but
| | 03:39 | they should be empty as in this example,
"images/corner.png" alt="". Number three:
| | 03:48 | make sure that all of your hyperlinks,
those href tags, include title attributes.
| | 03:53 | Again, create short, keyword-rich titles to
describe each hyperlink, as in this example.
| | 04:00 | You've got a link to a menu page, and
the title is Check out our Cupcake menu!
| | 04:05 | And then the link text itself is our menu.
| | 04:08 | Number four: use social media
to increase traffic to your site.
| | 04:12 | At minimum, consider joining Facebook,
Twitter, and LinkedIn, and provide links
| | 04:17 | to those business account pages on your web site.
| | 04:19 | In addition, try to include share
links from services like ShareThis or
| | 04:23 | AddThis so that your visitors can easily share
or tweet about what they find on your web site.
| | 04:29 | While it might take a day or two to
review and improve the code on all of your
| | 04:33 | pages, spending that time to make your
pages more SEO-friendly and accessible
| | 04:38 | should pay off with better
search engine rankings and traffic.
| | 04:41 | Stay realistic about the results, though.
| | 04:44 | These changes will not catapult you
to the number one spot in search engine
| | 04:47 | results or bring you so many new
customers that you can't keep up with sales.
| | 04:51 | Rather, these changes will make your
site easier and faster to access, providing
| | 04:56 | a clearer avenue to
communicate with a larger audience.
| | 05:00 | For additional information on search
engine optimization and accessibility,
| | 05:04 | see Morten Rand-Hendriksen's
lynda.com course, Improving SEO Using
| | 05:10 | Accessibility Techniques.
| | Collapse this transcript |
|
|
8. Testing and ValidationChecking links| 00:01 | One of the things that makes web sites,
well, web sites, is the fact that multiple
| | 00:06 | pages are virtually tied together by hyperlinks.
| | 00:09 | Smart web sites use links everywhere.
| | 00:12 | There are in our navigation menu,
behind our logos, in our sidebars and footers,
| | 00:17 | and embedded strategically
throughout the pages on our site.
| | 00:21 | But are they all correctly coded and
functioning properly? Let's find out before
| | 00:26 | we publish our site on the Internet,
using Dreamweaver's Link Checker tool.
| | 00:30 | As long as you've already managed your
site in Dreamweaver, you can run the Link
| | 00:35 | Checker on your entire managed site.
| | 00:37 | To launch the Link Checker,
select Site > Check Links Sitewide.
| | 00:43 | This opens the Results panel, open to
the Link Checker tab at the bottom of your
| | 00:48 | screen. And as you scroll through the
Results panel listing, you'll see a list of
| | 00:53 | pages, listed by its file name, along
with any corresponding links that might be
| | 00:57 | broken under that Broken
Links category on the right.
| | 01:01 | So to edit a broken link, you can
double-click the file name--so if I
| | 01:05 | double-click here, I will launch the
About page--and then you can go to the place
| | 01:09 | in the source code, update the text
yourself. Or if you happen to know what the
| | 01:13 | link is or what it should be changed to,
you can actually edit it right here.
| | 01:16 | Now I'm not sure what this is and
where it is, so I might want to go into the
| | 01:21 | source code and find it.
| | 01:23 | So I could scroll through here looking,
see if I can find it, or for needle-in-a-
| | 01:28 | haystack-type things, you can use the
Find and Replace tool, and we will look for
| | 01:33 | it, but we won't actually
modify it at this point.
| | 01:36 | So we can say Find All instances of
newsletter. That will switch us over to the
| | 01:40 | Search tab in the Results panel and it
will identify where this is. So this is,
| | 01:46 | if I double-click it here, it's in the
blocked area of our template, which means
| | 01:50 | that it's not working on all of the
pages throughout our entire web site, but we
| | 01:54 | can fix it in one step
by modifying our template.
| | 01:57 | But let's go back to the Link
Checker and look at the second one.
| | 02:01 | Now the second one is like a bad link.
| | 02:04 | It should be contact.html and then hash
mark list, so let's look for that one as well.
| | 02:11 | We will go to Find and Replace and we
will put in contact#list and see if we
| | 02:17 | can find where that is.
| | 02:19 | That, too, is in our footer under the locked area.
| | 02:23 | So we can quickly fix both of these at
once by opening up our template and going
| | 02:28 | into the footer. Let's see if we can
find where those are, scrolling down here.
| | 02:33 | Let's look at the code while we are here.
So the Join Mailing List, that's where
| | 02:38 | one of our mistakes is so, we will type
in html, so that's fixed. And that other
| | 02:45 | link, a little bit higher up here,
it's one of our icons here, this one.
| | 02:51 | There's no page called newsletter.
| | 02:53 | There is just a link to the Contact
page and the list to join our mailing list.
| | 02:59 | So now both of those are fixed.
| | 03:02 | We can do a File > Save. Dreamweaver will
prompt us to update all of our pages and
| | 03:08 | if you want to see what's happening,
you can choose Show Log, and it will just
| | 03:11 | tell you which pages it
modified and when it's complete.
| | 03:14 | Then we can close that down, and then
come back to our Link Checker, rerun it by
| | 03:21 | clicking this button here for the
Entire Local Site, and any link that was
| | 03:26 | previously broken would now be fixed.
| | 03:30 | Perfect, no more broken links!
| | 03:32 | Now let's also look to see if there
are any listings for external links.
| | 03:38 | This will give us the opportunity to
review the links that are going outside of
| | 03:42 | our web site. What we can't do though, is
verify that they're accurate. But if we
| | 03:47 | look them over, look for typos,
spelling errors, that kind of thing, we might be
| | 03:51 | able to ensure that they are corrected.
| | 03:53 | Best case scenario, you would spend
the time to go through all the links on
| | 03:57 | every page on your web site, either
through the Link Checker or within the
| | 04:00 | individual pages, to ensure that
everything is pointing to the right direction.
| | 04:04 | The last thing you might want to
look for in the Link Checker area is
| | 04:08 | for orphaned files.
| | 04:09 | Those are files that you've created and
added assets to your web site. They could
| | 04:14 | be images, they could be external
files like CSS or JavaScript, things that
| | 04:18 | haven't been used even though
they are there in your managed site.
| | 04:22 | From here you can choose whether or
not you want to leave them there, for
| | 04:25 | later use, or remove them and have your
whole site be a little bit lighter in file size.
| | 04:31 | So, great work!
| | 04:32 | When you're finished using the
Results panel, you can close it using this
| | 04:35 | dropdown menu here, choosing Close Tab Group.
| | 04:39 | Remember, properly checking all the
links on your site and fixing any that are
| | 04:43 | broken before you put your site on
the Internet will go a long way toward
| | 04:47 | giving visitors the impression of
a professionally organized web site.
| | Collapse this transcript |
| Spell-checking| 00:00 | Despite our best efforts, spelling errors
sometimes happen, even to the best of us.
| | 00:05 | Thankfully, Dreamweaver offers a
quick and easy way, to check for spelling
| | 00:09 | errors, fix any that we find, and
even add new words to our Dreamweaver
| | 00:13 | dictionary for future reference.
| | 00:15 | Here's how it works.
| | 00:16 | Start by choosing the Commands
menu, and select Check Spelling.
| | 00:21 | This launches the Check Spelling dialog
box, and immediately you should see the
| | 00:25 | first misspelled word listed in the
Word not found in dictionary field, and a
| | 00:29 | suggested replacement word
highlighted in the Suggestions menu.
| | 00:33 | Now this happens to be these people's
last name, so we can choose to either add
| | 00:39 | this word to the personal dictionary,
ignore it, change it, ignore all instances
| | 00:44 | in this document, or change
all instances in this document.
| | 00:47 | We are going to ignore this
one and move on to the next word.
| | 00:52 | Each time you respond to an item in
the list, Dreamweaver will continue
| | 00:55 | searching through the text until it finds the
next item, or it reaches the end of the document.
| | 01:00 | If the search began in the middle of
your page, you may see a dialog box asking
| | 01:04 | if you'd like Dreamweaver to
continue checking from the start.
| | 01:07 | So you can always click Yes to
continue. And when Dreamweaver has finished
| | 01:11 | checking the file, it will display
a Spell Check Complete dialog box.
| | 01:15 | So rather than going through the
entire document here, I'll just click Close.
| | 01:19 | Keep in mind that this
feature only works on open files.
| | 01:23 | So my recommendation is that you start
checking your pages from the top of your
| | 01:28 | Files panel and work on them
one at a time from the top down.
| | 01:32 | Though this takes a little bit longer
to go one page at a time, publishing a
| | 01:37 | web site without any spelling
errors is well worth the extra effort.
| | Collapse this transcript |
| Site cleanup| 00:01 | When it comes to finding those common
coding errors that sometimes happen when
| | 00:04 | we do a lot of cutting and pasting
to build our pages, nothing can beat
| | 00:09 | Dreamweaver's three easy-
to-use cleanup commands.
| | 00:11 | Let me show you how to use them.
| | 00:12 | The first one is called Reports.
| | 00:15 | You can access the Reports through
the Site menu, and it brings up this
| | 00:18 | Reports dialog box.
| | 00:20 | We want to do the HTML Reports, so I am
just going to click on all of those buttons.
| | 00:25 | Now notice that my Run command is grayed out.
| | 00:27 | That's because we are asking it to do
a report on the current document and
| | 00:31 | there is no file open.
| | 00:32 | The nice thing about this one though
is we can ask it to run on our entire
| | 00:37 | current local managed site.
| | 00:39 | Selecting that option,
clicking Run, let it do its thing.
| | 00:43 | The Results panel opens to the Site Reports tab,
listing the two errors that it happen to find.
| | 00:50 | In fact, the only thing it found was
two errors inside the About page, which we
| | 00:55 | can easily double-click on here to
open up the About page. And if we
| | 01:00 | double-click on the Description, it
will bring us right to the problem area, in
| | 01:05 | which case, it's an image without
and alt attribute and we can add that
| | 01:09 | easily in the Properties Inspector.
| | 01:12 | And the other one is an empty span tag.
| | 01:14 | It's just a tag that just got left over
in there somewhere, and all we need to do
| | 01:18 | is come into the code here and remove it.
| | 01:20 | It's not doing anything for us.
| | 01:22 | You can save your file and then re-run
that command, and when there's nothing
| | 01:29 | else to find, you'll see that it
says Complete at the bottom of the page.
| | 01:34 | The next thing is the Cleanup command, and
that's also up here at Commands > Clean Up.
| | 01:40 | Now there is Clean Up HTML, but, if you
were in XHTML page, it would say Clean
| | 01:45 | Up XHTML. Dreamweaver will read your
DTD and then display the appropriate clean
| | 01:51 | up extension there.
| | 01:52 | When you click on that button, this
dialog box comes open, and you can choose
| | 01:56 | which things to clean up.
| | 01:58 | Now sometimes when you're copying
things and pasting, redundancies happen,
| | 02:03 | nested things happen. You want to
just have clean code, as clean as possible.
| | 02:07 | So if you wanted to remove specific
markup, you can turn that option on, or a
| | 02:13 | specific tag. You can type in that tag,
looking for one thing and then removing
| | 02:18 | them all, like old I tags for italic.
| | 02:20 | People aren't using those anymore, so
you could search for those and remove them.
| | 02:24 | Click OK and it will run the Clean Up
command on your open document. And if
| | 02:29 | there's nothing to clean up, you get
this summary that says there's nothing to
| | 02:32 | clean up, so you can click Ok.
| | 02:34 | Now this command only works on one
page at a time, so keep that in mind.
| | 02:39 | The third thing is a tool in
Dreamweaver called Clean Up Word, and it's in the
| | 02:43 | same location, under that Clean Up.
| | 02:45 | And what this does is it will help
you remove any word formatting that
| | 02:50 | sometimes gets caught up in your page
when you paste, or especially if you saved
| | 02:55 | a Word document as an HTM file and
then brought that into Dreamweaver, which
| | 02:59 | we have not done, but sometimes people
do that. A lot of the time there is Word-
| | 03:03 | specific markup that has no bearing for us in
our web site and we would want to remove that.
| | 03:09 | I mean, it's an awful lot of code.
| | 03:11 | So you could just leave
everything selected here and click Ok.
| | 03:15 | There are two options here. You can go
for super-old Word documents 97/98 or
| | 03:20 | 2000 and newer, or if you wanted to
look at some of the detailed things that
| | 03:23 | it could remove and maybe choose not
to remove some of them, you can modify
| | 03:28 | the check boxes here.
| | 03:29 | We will just click OK and let it run.
| | 03:31 | It says you may have made some changes
to code that is not marked as editable
| | 03:36 | and if you make any changes here,
they won't be saved when you save them.
| | 03:39 | And what this means is some changes
might be in our template, so we would want
| | 03:43 | to make sure that we have run this on
our template as well, just to make sure
| | 03:47 | that everything is nice and clean.
| | 03:48 | And if we run it on our template
and any changes are found, when we save
| | 03:52 | our template file it will
automatically update those locked areas in our
| | 03:55 | template-based pages.
| | 03:58 | So in this case, it found one meta
tag that wasn't being needed. It wasn't
| | 04:02 | necessary, so it removed it, and if
there were any tags that were miscoded, like
| | 04:07 | break tags or things like that,
source formatting would have been applied.
| | 04:11 | And this one too, it needs to be
run on individual pages one at a time.
| | 04:16 | So though these tools might take some time
to perform, the results are well worth it.
| | 04:21 | Having clean code not only makes your
pages smaller in file size, but it also
| | 04:25 | makes your pages load
faster in a browser window.
| | Collapse this transcript |
| Validation| 00:00 | The W3C Validation tool in Dreamweaver
will check your code for tag and syntax
| | 00:06 | errors against the official
recommendations by the W3C.
| | 00:10 | This gives you the opportunity to
fix any problems before you publish.
| | 00:14 | In addition, you can use Dreamweaver's
browser-compatibility tool to identify
| | 00:19 | any coding issues that can be
improved for better browser rendering and
| | 00:23 | visitor accessibility.
| | 00:24 | Be advised that the Validation feature is only
available in Dreamweaver 4 and 5.5, but not 5.
| | 00:31 | If you happen to be using Dreamweaver 5,
you can still validate your pages by
| | 00:35 | going to validator.w3.org.
| | 00:39 | To start running the validation tool,
open the file you'd like to validate and
| | 00:44 | select Window > Results > W3C
Validation, or choose File--we will go up here--
| | 00:50 | Validate, and then choose
Validate Current Document(W3C).
| | 00:55 | This opens up the Validation panel, or
the Results panel opened to the validation
| | 01:00 | tab, and it will list all of the
errors and warnings that it finds.
| | 01:05 | If you're unsure of what an error means,
you can select it and right-click to
| | 01:10 | open the Context menu and
choose More Information.
| | 01:14 | This will bring you an error
console and identify the error.
| | 01:18 | In this case, we have some coding for
XHTML in our HTML 4.01 transitional page.
| | 01:27 | And it's telling us that that
backslash before the end of some of our tags in
| | 01:31 | our meta tag area is
unacceptable for this particular doctype.
| | 01:35 | And because that area is inside of a
template, we would need to go in and modify
| | 01:40 | our template in order to update all of
the rest of our pages on our web site.
| | 01:45 | What's nice about this panel is that
you'll see the name of the file, it will
| | 01:48 | identify the line within the file
that the error exists, and then give you a
| | 01:52 | short overview, or description,
of what the error happens to be.
| | 01:55 | So all of those are exactly the
same. We will scroll up to the top.
| | 01:58 | And some of these are a little bit
different, but they're all related to using
| | 02:02 | XHTML tags within an
HTML 4.01 transitional file.
| | 02:07 | This sometimes happens when you copy
and paste. For instance, in this instance,
| | 02:11 | all of our meta tags were copied and
paste from another source file, which
| | 02:15 | included that XHTML backslash.
| | 02:17 | And again, we can easily correct for
this by going into our templates file.
| | 02:21 | Let's take a look at another
file, and we will rerun the search.
| | 02:26 | Clicking on this little green button
here, one of the options is Settings.
| | 02:30 | So if we click on the word Settings, it
brings us to our Preferences dialog box.
| | 02:34 | And here is where we could choose the
doctype against which the Validator will check.
| | 02:39 | We could switch over to HTML 4.01
transitional or XHTML transitional. The option
| | 02:46 | is totally up to you, just know that you
need to match your doctype to the type
| | 02:50 | of code that's being used.
| | 02:51 | We will just leave it here for now.
| | 02:53 | Actually let's switch over to HTML 4.
01 transitional, and we will run this
| | 02:57 | search again on this other page.
| | 02:58 | Validate Current Document. And in
this case, it's saying that no errors or
| | 03:02 | warnings were found; everything is good to go.
| | 03:05 | While you're in the Results panel,
you want to click on that next tab for
| | 03:08 | Browser Compatibility, and you can
verify whether your open document will cause
| | 03:13 | any rendering issues in certain
browsers, or include any CSS properties or
| | 03:18 | values that aren't
supported by specific browsers.
| | 03:21 | So clicking on this little button here,
you say Check Browser Compatibility.
| | 03:25 | It will run through everything and if
there's no problems, it will say No issues detected.
| | 03:30 | But let's switch back over to our
other file and run that report again, Check
| | 03:34 | Browser Compatibility, give it a few
minutes or few seconds, and it will tell you
| | 03:38 | if there are any issues detected.
| | 03:39 | In this case, there are no issues, but
if there were, we would see the listing
| | 03:43 | over on the right side. It would
tell us what the problem was. It would
| | 03:46 | identify which browser and browser type,
such as Internet Explorer 6, and we can
| | 03:52 | choose whether or not we want to live
with it or we'd like to write additional
| | 03:55 | code in order to support that
particular browser, or atl east modify the CSS so
| | 04:00 | that it fails acceptably.
| | 04:03 | This tool can also be run directly on
CSS files, so if we wanted to open up our
| | 04:08 | cupcakemary.css, we can run that here.
| | 04:13 | Again, no issues were detected
so we are in really good shape.
| | 04:16 | With both of these tools, you'll need to run
them individually on each page in your web site.
| | 04:22 | But if most of the pages use the same
template, the process should go quickly.
| | Collapse this transcript |
|
|
9. Publishing via FTPFTP setup| 00:00 | When you're finally ready to
publish your web site on the Internet,
| | 00:03 | Dreamweaver has you covered. With its
built-in file transfer protocol tools,
| | 00:09 | you can setup your FTP account and
start transferring your files to your host
| | 00:13 | server in a matter of minutes.
| | 00:16 | To use Dreamweaver's FTP features, you
will need to have already registered your
| | 00:21 | domain name and secured a
hosting plan from a host provider.
| | 00:26 | Your host provider will give you the
FTP access information you need to set up
| | 00:31 | your account in Dreamweaver.
| | 00:33 | FTP access information usually
consists of a URL, a username, and a password.
| | 00:41 | To set up your FTP account in
Dreamweaver, select Site > Manage Sites > Edit or
| | 00:47 | double-click on the site name to open
up the Site Setup dialog box. You'll
| | 00:51 | go into the Servers category and then click
on the Plus button to create a connection.
| | 00:57 | In the Server Name field, that can be
anything you like. My web site Cupcake Mary
| | 01:03 | is only for your reference.
| | 01:06 | In the Connect using, we're going to be
using an FTP connection, but there are
| | 01:11 | other options that you can
choose from. FTP is the most popular.
| | 01:17 | In the FTP Address field, you'll type
in the name of the FTP address, which can
| | 01:22 | either be an FTP or HTTP address
that your host provider gave to you.
| | 01:28 | Enter your username and password.
Your username can either be an e-mail
| | 01:35 | address or an actual username. Your
password will always show up with those
| | 01:41 | dots, with hidden characters.
| | 01:44 | The Root Directory, you can leave that
blank and only enter something if your
| | 01:48 | host provider gave you something.
It could be something like public_html or www.
| | 01:55 | In the More Options area, you
probably won't really need to use that unless
| | 02:00 | you're behind a firewall, in which
case you might want to use passive FTP. I
| | 02:04 | really only go in this area if
there's some problem making a connection, and
| | 02:09 | that's where we'll go to this test button.
| | 02:12 | If you click on the Test button,
Dreamweaver will go out on your Internet
| | 02:15 | connection and validate the connection,
validate the FTP access information
| | 02:19 | that you just added.
| | 02:21 | If it was a nice fit, you'll get this
dialog box that says Dreamweaver did
| | 02:25 | connect to your web server successfully.
| | 02:28 | If there was a problem, you'll get an
error message, and you can go into the More
| | 02:31 | Options section or make sure that
you've typed everything in accurately.
| | 02:35 | Sometimes a little typo will be the
reason why you can't get in, so sometimes
| | 02:40 | I'll just erase and retype everything in fresh.
| | 02:43 | The Save option here is so that
Dreamweaver will save all of this FTP access
| | 02:49 | information for you for this managed site,
so you never have to go in there and
| | 02:53 | manage it again. And when you're finished,
just click the Save button and then you
| | 02:57 | can see that FTP connection is there,
and click the Save button again to close
| | 03:02 | the Site Setup dialog box.
| | 03:04 | Dreamweaver is now configured to make an
FTP connection between your managed site
| | 03:09 | and your remote host. You may create as
many managed sites with FTP connections
| | 03:14 | as you like, and toggle
between each account as needed.
| | 03:18 | Dreamweaver will keep track of each
site's FTP access information, so you're
| | 03:22 | always assured of sending the correct
files to their correct remote server.
| | Collapse this transcript |
| Transferring files| 00:00 | Once you've established an FTP
connection with your remote host through
| | 00:04 | Dreamweaver's Site Setup dialog box, the
next step is to transfer copies of your
| | 00:10 | files from your local copy to
your site's remote host server.
| | 00:15 | The remote server is the live
Internet version of your web site.
| | 00:19 | The first thing to do is expand your
Files panel by clicking on the Expand
| | 00:25 | Collapse button, which is located here.
| | 00:28 | Remote files will be shown on the left
side of your screen, and local files are
| | 00:33 | listed on the right.
| | 00:35 | To establish a connection with the
remote host server, you'll click the Connect
| | 00:39 | button, which is right here. Click that once and
| | 00:43 | give it a second to make a connection.
| | 00:46 | Transferring your files goes two ways.
You can put files onto the server and you
| | 00:53 | can get files from the server.
| | 00:57 | If you ever forget which way is which,
hover your cursor over the blue and green
| | 01:02 | arrows here. They only light up
when you hover on top of them.
| | 01:06 | So, I like to think of it like putting
something up on a shelf. I'm taking my
| | 01:11 | local files and then putting them up
on the remote server versus getting
| | 01:16 | something down from the shelf. I'm
getting something down from the remote server
| | 01:20 | onto my local files.
| | 01:22 | In our case, we want to put our
entire site onto the remote server.
| | 01:28 | The only thing that's there now are
some custom error pages, those number
| | 01:33 | pages, as well as a placeholder page
that I previously created for my domain.
| | 01:39 | The placeholder page is called
index.html, and the graphic being used on it is
| | 01:44 | called placeholder JPEG.
| | 01:45 | So, before I transfer any of my files,
I might want to save that file for later,
| | 01:51 | and I'll just change the
file name to placeholder.
| | 01:55 | Now there is nothing happening on my
web site, so if somebody went there at
| | 01:58 | this very moment, they wouldn't see anything.
They would get one of those error pages instead.
| | 02:04 | To transfer my files, I need to select
everything. Do not select this one here.
| | 02:09 | What I like to do is click and Shift+
Click to select everything and then I can
| | 02:14 | click my Put button to put all of my
files up on the remote server. You could
| | 02:19 | also drag and drop the files over
into this blank space if you like.
| | 02:24 | When you click on this button, this
dialog box opens. You can click on this arrow
| | 02:29 | to expand and see what's happening.
| | 02:31 | It asks you if you want to put dependent files.
| | 02:35 | A dependent file is any asset that
goes with the files, so for an HTML file,
| | 02:41 | the dependent could be a CSS, an external
JavaScript, some spry assets, anything else.
| | 02:46 | I'm going to say no at this point,
because I'm already transferring everything
| | 02:51 | over and if I say yes, it will do the
transfer of all those dependent assets
| | 02:55 | again and again for each HTML file.
| | 02:59 | When you're finished transferring
your files, click the Connect button to
| | 03:03 | disconnect and then click the Expand
Collapse button to put the files panel back
| | 03:09 | to its collapsed state.
| | 03:11 | Transferring your files to the remote
server via FTP is one of the quickest and
| | 03:16 | easiest ways to update the
live version of your web site.
| | 03:20 | For best results, always double-check
your work on the Internet to verify that
| | 03:26 | you can see all your recent changes.
| | Collapse this transcript |
| Post-launch site maintenance| 00:00 | Because search engines give extra
weight to pages that contain fresh page
| | 00:05 | content, keeping your live web site up
to date is crucial if you want to stay
| | 00:10 | competitive and keep
visitors coming back regularly.
| | 00:14 | Anytime you make a change to your site,
no matter how big or how small, send the
| | 00:19 | changes to the server right away.
| | 00:21 | As part of your business plan, you may
want to schedule regular updates to your
| | 00:26 | product or service offerings.
| | 00:28 | For our web site that might mean
updating the menu, cupcake of a month, coupon
| | 00:33 | offerings, every 30 days. Let's say
for example we've decided to add two new
| | 00:39 | blended drinks to our menu page, so
we'll scroll down here and take a look at
| | 00:43 | our Drinks section in here.
| | 00:46 | So I'll add a bullet and we'll add
the Chai FrappaMary, and we will also add a
| | 00:52 | Chocolate FrappaMary.
| | 00:56 | And let's say on our Locations page,
we want to change the banner image. I'm
| | 01:00 | just double-clicking to launch the
Select Image Source dialog box, and I'll
| | 01:04 | choose banner number 9 and click OK.
| | 01:07 | We can save both of our pages, so I'll
do Save All. And then if we want to send
| | 01:12 | those files to the server, we'll make
our connection. We can expand the files
| | 01:18 | panel or not; it doesn't matter. We
just have to remember which two pages that
| | 01:22 | we just made changes to and
put them onto the remote server.
| | 01:27 | Now in this case I may have created a
new graphic for the banner, and I'm going
| | 01:32 | to say Yes, go ahead and include
those dependents, and I'll say Yes to All.
| | 01:36 | So, this might take another second or
two for all the files to get transferred
| | 01:41 | over, those assets that go along with
the two files that I'm sending, but that's
| | 01:45 | good. I'm making sure that any files
that go along with those changes are
| | 01:49 | definitely over on the remote server.
| | 01:53 | When you're finished transferring your
files, disconnect and collapse the Files
| | 01:57 | panel. And remember that SEO study show
that sites with fresh regularly updated
| | 02:03 | content are indexed faster and more
regularly by search engines, and they tend to
| | 02:09 | generate more traffic than
sites with old static information.
| | 02:13 | To keep your visitors coming to your
site often, try to make daily, weekly,
| | 02:19 | or monthly updates.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Web design is a field that's
constantly evolving. To stay on top of current
| | 00:05 | trends and keep your skills fresh,
you may want to check out the following
| | 00:08 | recommended web sites for tutorials,
news, freebies, and other goodies.
| | 00:13 | For web tutorials, my favorite
resource is w3schools.com. Here you can learn
| | 00:19 | about HTML, browser scripting, XML,
server scripting, web services, web building,
| | 00:26 | and a whole bunch of other things.
| | 00:28 | Another really great site for tutorials,
as well as web-related news, is SitePoint.
| | 00:34 | And another great site for news and
information about web-related things is
| | 00:38 | Smashing Magazine. This is definitely
one to follow on Facebook and on Twitter.
| | 00:43 | More advanced designers might
appreciate the articles on alistapart.com, and you
| | 00:49 | can find some really great Photoshop
tutorials and goodies at psd.tutsplus.com.
| | 00:57 | For design inspiration, definitely
check out Vandelay Design in their
| | 01:02 | Blog Galleries category.
| | 01:05 | You can also find some really decent
freebies, like textures and background files,
| | 01:10 | here on the BittBox web site. And if
you're looking for up-to-date resources for
| | 01:16 | web designers, check out Webdesigner Depot.
| | 01:19 | As far as training goes, you might find
exactly what you're looking for on lynda.com.
| | 01:25 | I hope you've enjoyed this
Designing Web Sites from Photoshop to
| | 01:28 | Dreamweaver course.
| | 01:29 | It's now your job to take
these skills and run with them.
| | 01:33 | The truly best way to learn
is with hands-on practice.
| | 01:36 | Thanks for watching! See you next time.
| | Collapse this transcript |
|
|
