IntroductionWelcome| 00:00 | (Music playing.)
| | 00:04 | Hi! I'm Garrick Chow and welcome to
iWeb '09 Essential Training. If you use any
| | 00:09 | of the other iLife programs like iPhoto,
iTunes, iMovie, or GarageBand, chances
| | 00:14 | are good that you wanted to post the
photos, movies, or music from these
| | 00:17 | programs on the web, and that's pretty
much where iWeb is there for. It gives
| | 00:20 | you an easy way to share your media files
on your own professional looking website.
| | 00:24 | But of course, you are not limited to
just sharing your personal photos and
| | 00:27 | videos. iWeb '09 is a powerful and
flexible enough tool to use to build just
| | 00:31 | about any kind of site you need. In
this training video, I'll be showing you
| | 00:35 | how to create and publish everything
from simple web pages containing text and
| | 00:38 | basic shapes to more intricate pages
containing photos, music, and video as
| | 00:43 | well as how to create blogs and podcast pages.
| | 00:46 | iWeb '09 is the third version of iWeb
that Apple has released and they have added
| | 00:49 | some very cool new features to the
program like FTP publishing, Facebook
| | 00:53 | notifications, and adding and
customizing widgets for your site. And I'll be
| | 00:57 | sure to point out these features
and other new stuff along the way.
| | 01:00 | Now let's get started and see what iWeb can do.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of
lynda.com Online Training Library, or if you are
| | 00:04 | watching this tutorial on a DVD-ROM,
you have access to the exercise files used
| | 00:07 | throughout this title.
| | 00:08 | Now for this title, it's important to
pay attention here, especially if you
| | 00:12 | want to work along with me but might not
plan on watching all the videos in order.
| | 00:16 | In the exercise files folder, we have
three folders whose name start with iWeb,
| | 00:20 | iWeb photos, iWeb movies, and iWeb audio,
and they are pretty straightforward.
| | 00:25 | They contain the pictures, movies, and
audio files we'll be using and I'll tell
| | 00:29 | you when we need them throughout this course.
| | 00:31 | The other folder in here is the
domain files folder. And before we look in
| | 00:35 | there, let me explain how iWeb stores
the websites you create. When you create
| | 00:39 | a website in iWeb, the site and all of
its related photos, videos, and other
| | 00:43 | necessary support files are stored in
your personal home folder, in Library, in
| | 00:49 | Application Support, and in iWeb, and in
here, you'll find a single file called domain.
| | 00:56 | This single file contains your entire
site or sites if you've created multiple
| | 01:01 | sites. And normally, you never have
to touch or do anything with this file.
| | 01:05 | I'll be talking about this file near
the end of this training course, but for
| | 01:09 | now, just know that if you want to
work along with me throughout these
| | 01:11 | exercises, and you want to jump in
various lessons instead of following through
| | 01:15 | from beginning to end, you'll need
to replace this domain file with a
| | 01:18 | corresponding domain file
found in the domain files folder.
| | 01:22 | So again, if I look in exercise files
> domain files; in here, you'll find a
| | 01:28 | separate domain file for each lesson
of this tutorial. If you already have an
| | 01:32 | iWeb site you've created and you don't
want to lose it, but you still want to
| | 01:35 | work along with me in this tutorials,
first copy or move your existing domain
| | 01:39 | file to another location on your Mac,
and make sure iWeb is not opened before
| | 01:43 | you do this. So I'm just going to drag
mine out on to my Desktop, and there it is.
| | 01:49 | So now let's say I want to jump in for
the fourth movie of Chapter 3. I'm going
| | 01:52 | to open the 03_04 folder and in here
we find a domain file, and then you just
| | 01:58 | drag it into the iWeb
folder in your home folder.
| | 02:00 | I suggest holding down the Option Key
on your keyboard when you drag the file
| | 02:04 | over to make a copy of that domain file.
That way you have an unaltered version
| | 02:08 | of the file, in case, you mess up and
you want to start over from scratch.
| | 02:12 | After you copy that domain file over,
you can then open iWeb, and you'll see
| | 02:22 | the site setup exactly as it's shown in
the video you are watching. If you want
| | 02:25 | to work along with another movie, quit
iWeb and then copy the domain file of a
| | 02:32 | new movie into your home folder.
| | 02:34 | So if I wanted to jump from there to
the second video in Chapter 4, I just copy
| | 02:38 | that domain file over, again holding
the Option Key, replacing the one that's
| | 02:42 | in here and there it is. None of our
file where iWeb began, and when you're
| | 02:47 | finished with this entire course, you
can revert back to any sites you have
| | 02:50 | previously created by dragging your old
domain file back into the iWeb folder.
| | 02:57 | Now again, you only really need to
worry about the domain file, if you plan on
| | 03:00 | jumping around the course. If you
follow through from beginning to end, you'll
| | 03:03 | be building the sample website
progressively with me, and the changes we make
| | 03:06 | in one movie will carry over into the next one.
| | 03:09 | Now if you are a monthly or annual
subscriber to lynda.com, you don't have
| | 03:13 | access to the exercise files. But you
can still easily follow along with me
| | 03:16 | just by watching, or feel
free to use your own media files.
| | 03:19 | None of what I'm going to be showing
you in these videos requires you to be
| | 03:22 | using the exact same files that I am,
to understand how to take advantage of
| | 03:25 | iWeb's capabilities. You just need a couple of
photos, a video or two, and some audio files.
| | 03:30 | All right, so with that said, let's get
started with the basics of working with iWeb.
| | Collapse this transcript |
|
|
1. Getting StartedWhat is iWeb?| 00:00 | The purpose of iWeb is to make it
super easy for anyone to use media from the
| | 00:04 | other iLife applications to
create and publish personal web pages.
| | 00:08 | With a few clicks, you can create a
page with some text telling the world all
| | 00:11 | about yourself, add a few pictures,
maybe a video or a song, and then publish
| | 00:15 | it to the web. And you don't need to
know a thing about web design, or how to
| | 00:19 | write HTML, or how to use more
complex web design programs to do it.
| | 00:23 | Now with that said, iWeb isn't even
remotely as powerful or flexible a web
| | 00:26 | design program as say Adobe
Dreamweaver. So if you are an experienced web
| | 00:30 | designer who is used to working with
more advanced programs, you're probably
| | 00:33 | going to feel limited by iWeb.
| | 00:36 | iWeb does come with some great looking
page templates that fit the needs for
| | 00:39 | just about any type of page you might
want for your site and they really look
| | 00:42 | great. But they are templates and even
though you can customize them to suit
| | 00:46 | your taste, there are certain things
that can't be changed at all, like where
| | 00:49 | your navigation bars appear on your page.
| | 00:52 | So iWeb isn't for someone who is
looking to make a career out of web design.
| | 00:56 | But if you are a person who doesn't
know and probably doesn't want to know
| | 00:59 | about web design, HTML, or CSS, you're
probably mainly interested in sharing
| | 01:03 | information about yourself, your
friends and family, or photos and videos from
| | 01:07 | your recent vacation, you won't find
an easier to use program than iWeb that
| | 01:11 | produces better looking
pages that are a snap to manage.
| | 01:14 | All you have to do is import your
pictures into iPhoto, or edit your videos in
| | 01:18 | iMovie like you normally do, and then
from directly within iWeb, add your media
| | 01:22 | files to your web pages.
| | 01:23 | Now if you are not familiar with using
the other iLife apps, I suggest to you,
| | 01:27 | check out those tutorials on the
lynda.com Online Training Library first
| | 01:31 | because iWeb is really about talking
all the content from those other iLife
| | 01:34 | applications and putting them onto web pages.
| | 01:36 | Sure, you can create all-text web
pages but who wants to spend time just
| | 01:39 | reading about your vacations? The web
is a multimedia experience, so you should
| | 01:43 | definitely spice up your pages with
photos and videos. All right, so that just
| | 01:47 | a quick one down of what
iWeb is and what it's for.
| | Collapse this transcript |
| Using MobileMe| 00:00 | I realize that if you are watching
these videos, you might be completely new to
| | 00:03 | the world of web publishing. So, in
this video, I just want to take some time
| | 00:07 | to briefly go over the basic concepts
of publishing a website and I also want
| | 00:11 | to discuss setting up a MobileMe account.
| | 00:13 | Basically, when you create a website
on your computer, be it in iWeb or any
| | 00:17 | other web design program, the website
is only on your computer and it is not
| | 00:21 | accessible to others until you
publish it to the World Wide Web. When you
| | 00:25 | publish your site, you are essentially
copying the files you have made on your
| | 00:27 | Mac to another computer called a
server and the server is connected to the
| | 00:31 | internet 24 hours a day, 7 days a week.
This server has an address called a URL
| | 00:36 | or Uniform Resource Locater, not that
you really need to know what URL stands for,
| | 00:40 | but it is with this URL
that people can find your website.
| | 00:45 | Now, if you make any changes to your
website, that doesn't immediately affect
| | 00:48 | what visitors to your site see on
their computers because they are still
| | 00:51 | seeing the version of your site that
is on the server. You have to republish
| | 00:55 | those pages to the servers so that
people will be able to see the most recent
| | 00:57 | version and that's basically it in a
nutshell. You create your web pages on
| | 01:01 | your Mac, you copy them to a server,
you make changes to the pages on your Mac
| | 01:05 | and you copy the new versions to the
server. But how do you can access to this
| | 01:08 | server thing? Where does it come from?
Well, your server is supplied to you by
| | 01:12 | a web hosting provider. This is the
company that you usually pay money to and
| | 01:17 | in exchange, they will give you
server space and a username and password to
| | 01:20 | access your allotted portion of their server.
| | 01:22 | Now, there are thousands of reliable
of web hosting providers out there and
| | 01:26 | iWeb '09 does make it easy to publish
your site to adjust about any hosting
| | 01:29 | provider servers but if you are going
to be primarily using iWeb to create and
| | 01:33 | publish your web pages, your best choice is
to go with Apple's MobileMe hosting service.
| | 01:39 | If you host your site on another service,
you will find some iWeb features like
| | 01:43 | password protection, blog and photo
comments and the hit counter won't work.
| | 01:47 | Now, if you can live without these
features, you can host your site on just
| | 01:50 | about any server out there. But if
you want the full range of iWeb's tools
| | 01:54 | available for your use, you should get
a MobileMe account. MobileMe is Apple's
| | 01:58 | online subscription service that
provides online tools like web space hosting,
| | 02:02 | email accounts, online storage,
data syncing and lots more. The cost of
| | 02:07 | MobileMe is $100 a year, so it will be
up to you to determine whether or what
| | 02:11 | MobileMe offers is worth its price to you.
| | 02:13 | Fortunately, you can sign up for a
60-day free trial that let's you create a
| | 02:16 | fully working MobileMe account. With
the trial account, your online storage
| | 02:20 | space will me limited to only 10
gigabytes but that should be plenty of space
| | 02:24 | for you to see if you
like how the service works.
| | 02:27 | Bear in mind that MobileMe is not just
web hosting; it provides you with all
| | 02:30 | sorts of other tools too like your
own MobileMe email address, a system for
| | 02:34 | backing up your Mac and much more.
| | 02:35 | So, now I'm going to show you how to
sign up for MobileMe. To sign up for a
| | 02:39 | trial account, just go to mobileme.com
or apple.com/mobileme and click Free Trial.
| | 02:48 | And you just have to fill
out two pages of information here.
| | 02:51 | First thing is type in your desired
member name and you want to hope you will
| | 02:54 | get a name that nobody else has already
chosen. I'll just use garrickchowiweb09
| | 03:00 | and come up with a password. Retype it
to make sure you have typed it correctly
| | 03:06 | the first time and then enter some
personal information, your First Name,
| | 03:12 | your Last Name, Current Email Address
and then you can enter some security
| | 03:20 | information like your birth date.
Mine is November 17th in case if anybody
| | 03:24 | wants to know and then come up with
your own secret question that you only know
| | 03:28 | the answer to just in case you ever forget your
password and need to confirm that you are you.
| | 03:37 | Under Contact Preferences, you can
decide whether you want to receive emails
| | 03:40 | about MobileMe and Apple, I'm just
going to uncheck that and click Continue.
| | 03:44 | You do have to enter your credit card
information and this is partially to
| | 03:50 | prevent people from just creating as
many free trial accounts as they want to.
| | 03:54 | So, I'm going to choose my Card Type,
Card Number and do note that it says
| | 04:02 | here, after your 60-day free trial, you
will be charged the annual subscription
| | 04:06 | fee of $99 plus applicable taxes and
to avoid these charges, you can cancel
| | 04:10 | your membership at any
time during the trial period.
| | 04:12 | So, just be aware that if you don't
want to keep this trial account, be sure to
| | 04:15 | cancel the account before the trial
period ends. Then just check that you have
| | 04:19 | read and agreed to the MobileMe Terms
of Service and Apple's Privacy Policy.
| | 04:22 | Make sure you click on those and read those
as well. When you are done here, click Sign Up.
| | 04:30 | If everything checks out, you will get
this message saying your account has
| | 04:33 | been created. You will see your member
name and your MobileMe email address.
| | 04:37 | At this point, you can either Log In
to your account if you want to start
| | 04:40 | exploring MobileMe or if you want to
Continue Setup, you can click that and
| | 04:43 | this will give you instructions on how
to setup your MobileMe account with your
| | 04:46 | iPhone or your Mac or your PC.
| | 04:48 | Let's just take a look at Mac Setup so
you can see what we find in here. To use
| | 04:54 | your account with iWeb, the important
thing here is what you find under Sign in
| | 04:58 | to MobileMe on your Mac. It's telling
you here to open up System Preferences,
| | 05:02 | choose MobileMe and sign in with your
MobileMe username and password. So, let's
| | 05:06 | go ahead and do that.
| | 05:07 | Open up my System Preferences, go to
MobileMe and in here enter the member name
| | 05:14 | and password you have just created
and sign in. I see my account status.
| | 05:24 | I'm a Free Trial account. I can see how much
mail storage and iDisk storage space I have.
| | 05:28 | Now, this is an important step if you
want to be able to host your site on
| | 05:32 | MobileMe. iWeb will access this
information in your MobileMe System Preferences
| | 05:36 | in order to access your iDisk storage space.
| | 05:39 | Okay, so now I have a trial MobileMe
account setup, which means I now have
| | 05:42 | server space ready to host my iWeb
pages. Again, you don't absolutely need to
| | 05:47 | have a MobileMe account to publish iWeb
pages but it is so much easier if you do.
| | 05:51 | So, I highly suggest at least signing
up for the 60-day free trial so you can
| | 05:54 | run MobileMe and iWeb through
their paces and see if it's the right
| | 05:57 | combination for you. Okay, now that
that's taken care of, next we'll take a
| | 06:01 | look at the basics of
creating a new website in iWeb.
| | Collapse this transcript |
| Creating a site| 00:00 | All right, let's go ahead and fire up
iWeb. You should have its icon in your
| | 00:04 | dock but if you have removed it, you
will find iWeb in the Applications folder
| | 00:07 | on your hard drive.
| | 00:10 | Now, if this was the first time you are
opening up iWeb, you might get a dialog
| | 00:13 | asking you to sign in to your MobileMe account,
which we discussed in the previous movie.
| | 00:17 | Again, MobileMe is Apple's online
hosting service and it is the best choice for
| | 00:20 | hosting your iWeb sites if you want to
be able to use all the features of iWeb.
| | 00:24 | So, if you see that dialog box, you can
either sign in to your MobileMe account
| | 00:27 | or sign up for a MobileMe account or
just click out of it if you don't want to
| | 00:30 | anything about it right at that moment
but I have opened iWeb before in this Mac
| | 00:34 | so I don't see that dialog box this time.
| | 00:36 | Now, to have a website, you need at
least one web page. When you open iWeb,
| | 00:40 | you need to select a template for your
first page. iWeb comes with plenty of
| | 00:43 | templates in lots of different themes
to fit just about any options from
| | 00:47 | Plain Jane white or black to fancy-schmancy
themes like Goldenrod, Modern Frame,
| | 00:54 | Playtime, Comic Book,
Elegant, Notebook and so on.
| | 00:59 | In all, there are 20 themes in this
version of iWeb, two of which are new to
| | 01:03 | iWeb '09 and those two being Leaf
Print and Fine Line. And don't worry about
| | 01:09 | your choice here too much. You are free
to change your site's theme at any time
| | 01:12 | if you decide you don't like the one you picked.
| | 01:14 | So, go ahead and experiment with
different themes. Working with them will give
| | 01:18 | you a better idea of what they really
look like than just their thumbnails will.
| | 01:22 | Also, be aware that you can select a
separate theme for each page of your site
| | 01:25 | but bear in mind that most web
designers agree that it is a good practice to
| | 01:28 | keep the appearance of the pages in
your site consistent with each other.
| | 01:31 | If you pick a different theme for each
page, you might confuse visitors into
| | 01:35 | thinking they have suddenly jumped to
someone else's site after clicking one of
| | 01:38 | your links. Mostly though, you want to
consider what your website is going to
| | 01:42 | be about. For instance, if you are
keeping a journal of your vacations,
| | 01:45 | you might want to pick one of the Travel
themes or maybe the Road Trip theme or if
| | 01:53 | you are creating a website tracking
your new baby's progress, in which case you
| | 01:57 | are probably done with vacations and
travel for the time being, you might want
| | 02:00 | to pick the Baby theme or one of the
Kids Blue or Kids Pink themes. If you
| | 02:05 | don't particularly like any of these
themes, you might want to start with
| | 02:08 | either the basic Black or White
themes which are pretty basic with no flashy
| | 02:13 | designs and then you can
customize and build your pages from there.
| | 02:17 | Throughout this tutorial, I'm going to
be creating a website for documenting my
| | 02:20 | recent trips and vacations. So, let's
see. I think I'll go with one of the new
| | 02:23 | themes in iWeb '09 and let's go with
Fine Line and once I have selected my
| | 02:29 | theme, I can choose from eight
different types of pages. We have got the
| | 02:32 | Welcome page, About me, Photos, My
Albums, Movie, Blog, Podcast and Blank.
| | 02:40 | The Blank page is for those times when you
don't want to work with a pre-designed
| | 02:43 | layout other than the pre-selected colors and
look of the particular theme you have selected.
| | 02:47 | I will start of with the Welcome page.
I'll select that and click Choose. So,
| | 02:55 | here is the Welcome page in the Fine
Line theme. Everything you see here is a
| | 02:58 | placeholder. All the text can be
changed and images here can be swapped out for
| | 03:03 | your own and you can also adjust the
positioning of elements on the page.
| | 03:07 | So, it is pretty customizable. Let me
just undo that move. In the sidebar,
| | 03:12 | you see the page's name which is currently
set to Welcome. This is the title of the
| | 03:16 | page that will eventually appear in
your visitor's browser's title bar. You can
| | 03:20 | keep the title the way it is or you can
customize it by double-clicking it and
| | 03:25 | retyping a name of your choice. My
suggestion is to keep the names as short as
| | 03:28 | possible and avoid using spaces in the
name. Now, spaces work but they give you
| | 03:33 | some not so user-friendly addresses for
your pages when you publish them to the web,
| | 03:36 | which we'll see a little bit later.
So, in this case, I'm just going to
| | 03:39 | leave this as Welcome.
| | 03:40 | Now, instead of creating and working
on pages one by one, you might want to
| | 03:44 | start creating additional pages before
you start personalizing them. So, to add
| | 03:48 | another page, click the Add Page
button and let's add an About me page.
| | 03:54 | I'll just double-click that. Again, I now
have a page with a bunch of placeholders
| | 03:59 | for adding my own text to the images
and I can see About me appear in my
| | 04:03 | sidebar. Notice at the top of the page
that the beginnings of a navigation bar
| | 04:07 | now appearing. Each page you create in
your site will automatically have a link
| | 04:11 | created in the navigation bar so that
all of your pages will be linked together.
| | 04:15 | Now there may be cases where you
don't want certain pages to appear in the
| | 04:18 | navigation bar. I'll be showing you how to
prevent pages from appearing here a little bit later.
| | 04:22 | So, that's how you add pages to your
website in iWeb. It really doesn't get
| | 04:26 | much easier than that. I'm going to
make sure I save the work I have done so
| | 04:29 | far by choosing File > Save.
| | 04:31 | All right, in the next chapter, we'll
take a look at how to go about replacing
| | 04:33 | this placeholder content on your pages
with your own text, images and links.
| | Collapse this transcript |
|
|
2. The BasicsWorking with text| 00:00 | So once you have picked your
website's theme and have created at least one page,
| | 00:03 | it's time to personalize
it with your own text and images.
| | 00:07 | In the previous movie, I created a
Welcome page and an About me page.
| | 00:11 | Let's start with the Welcome page, which I
already have selected here in my sidebar.
| | 00:15 | Now as a side note, bear in mind that
you don't need to create a Welcome page on
| | 00:18 | your website. You can start
with any type of page you want.
| | 00:20 | So this page has a couple of blocks of
placeholder text and some placeholder
| | 00:24 | images. Every page designed in iWeb
has placeholders for you to swap out with
| | 00:28 | your own content. If you don't need
or want a particular piece of text or
| | 00:32 | image, you can just delete that
placeholder in most cases. But there are some
| | 00:35 | placeholders that can't be deleted and I'll
talk about those in just a couple of moments.
| | 00:39 | But even in those cases you can just
delete the placeholder text or images
| | 00:42 | within them. You are also free to
move placeholders around and to add
| | 00:46 | additional blocks of text
or images to your pages.
| | 00:48 | So to add my own text to this block
where it currently says Welcome, all I need
| | 00:52 | to do is click anywhere on the block
and start typing and I'll call this My Travels.
| | 00:57 | And then I'll click the block
that says Snippets of My Life and
| | 01:01 | I'll change this to A Record of My Trips
and underneath that we have a large block
| | 01:10 | of text and again I'll select that
and I'll just type a couple lines here.
| | 01:14 | Hello friends. All right, so I
have just entered some text here.
| | 01:18 | Now there is one more block of text
right here, but if I don't need any
| | 01:21 | additional text, I can just click it
once to select it and hit the Delete key
| | 01:24 | on my keyboard. And since I got rid
of that, I probably don't need this
| | 01:28 | horizontal placeholder anymore. So again
I'll select that and delete that as well.
| | 01:32 | Okay, so I have now added my own text
to this Welcome page. Now you are not
| | 01:36 | limited to just using the provided
text placeholders. If you want to add
| | 01:39 | another text block somewhere on your
page, just click the Text Box button.
| | 01:42 | Now before I do so, I'm going to click
outside of my page just to make sure I
| | 01:45 | don't have any other text boxes selected.
Otherwise I'll create an inline text box,
| | 01:49 | which we'll talk about later, but
it's not something that I want right now.
| | 01:52 | So I click Text Box and right away a
text block appears right here in the
| | 01:57 | center of my page. I'll type 'site
created by Garrick Chow.' And I'm going to
| | 02:04 | click outside of the box to tell iWeb
I'm done typing. And then I'll click on
| | 02:08 | that box again to select it. And now
I'll just move this to lower right hand
| | 02:12 | corner of my page; I'm just going to
drag down up to the bottom a little,
| | 02:15 | so I can scroll the page down a bit.
And I'm going to resize the text box by
| | 02:19 | grabbing a corner and dragging up.
| | 02:21 | So I'll just reposition that a little
bit more, there we go, and that should
| | 02:28 | feed my ego for a while.
| | 02:30 | Now what I just did might seem like
it was no big deal; just moving a text
| | 02:33 | block around on my page, but if you
are familiar with the other web design
| | 02:36 | programs, you know that's not something
that you can easily do in applications
| | 02:40 | like say Adobe Dreamweaver.
| | 02:42 | Placing images and text anywhere you
like on the page is actually a fairly
| | 02:45 | involved task in other programs.
Just in case you are familiar with more
| | 02:48 | advance web design concepts, and you
are interested in what's going on here,
| | 02:51 | iWeb uses Cascading Style Sheets or
CSS to manage the placement of the pages
| | 02:56 | elements using DIV tags. But you
will never see the code here in iWeb.
| | 03:00 | Now there are some things you will
have to keep in mind as you place objects
| | 03:03 | around your page but I'll get into
more detail about those things in the
| | 03:06 | upcoming movie on working with
object placement and stacking order.
| | 03:09 | Let's take a look at the About me page next.
And here again we have several text and
| | 03:15 | image placeholders. So my plan here is
to have a page for each of the places
| | 03:19 | I have traveled to and I'm going to start
by modifying this page to cover my trip
| | 03:22 | to Melbourne, Australia. Let's change
About Me to Melbourne. And let's change
| | 03:30 | the text that reads The New Kid on
the Block to Energy and Sophistication,
| | 03:40 | which is what I think
when I think about Melbourne.
| | 03:42 | Now I should probably also change the
name of the page itself in my sidebar.
| | 03:45 | It still currently says About Me. So I'll
just double-click on that and change it
| | 03:50 | to Melbourne. And notice that also changes
the name of the page here in my Navigation bar.
| | 03:55 | Now let's go over to the right side of
the page here where it currently says
| | 03:58 | My Info and I'll change My Info to City
Info, keep Name there, and for name we'll
| | 04:05 | type Melbourne. Let's change Age. Just
double-clicking on the word to select
| | 04:10 | them here. I'll say Established 1835.
Maybe I'll change Birthday to Population,
| | 04:25 | 3.8 million and for Hometown
I'll change it to Visited by me. I'll say
| | 04:35 | September 2008. And right now, I really
don't need the rest of the placeholder text.
| | 04:40 | So I'm going to select it all just by
dragging down and just delete of all of that.
| | 04:45 | So you can see it's really easy to
replace placeholder text and delete the
| | 04:52 | stuff you don't need on the page. Now
you can always delete the text in a text
| | 04:55 | placeholder and you can delete the
placeholder itself as well as most image
| | 04:59 | placeholders. Basically any objects
with white handles, when you click on
| | 05:03 | an object and you see white
handles around it, whether it's an image
| | 05:06 | placeholder or text placeholder, you
can delete it off the page. Objects with
| | 05:10 | gray handles like the Navigation bar,
you can see this actually has a gray
| | 05:14 | handle on the left and right side,
those objects cannot be deleted. As much as
| | 05:18 | I press the Delete key it will stay on page.
| | 05:20 | Now you can still hide the Navigation
bar and I'll talk about how to do that in
| | 05:24 | a later movie in this chapter.
| | 05:25 | All right that's probably enough text
for now. You should have the idea about
| | 05:29 | how to change placeholder text and how
to add and position your own text too.
| | 05:32 | Next we are going to a look at how
to change the appearance of your text.
| | Collapse this transcript |
| Changing the appearance of text| 00:00 | Now that we have some text on a couple
of pages, let's talk about how to change
| | 00:03 | the look of the text in terms of size,
color, and font face. To change the
| | 00:07 | appearance of text we need to
take our first look at the Inspector.
| | 00:10 | If you have used the other Apple
applications like Keynote or Pages, you are
| | 00:14 | probably already familiar with the
Inspector. Now if it's not already open,
| | 00:17 | click the Inspector button and it will pop open.
| | 00:20 | The Inspector is the panel that you use
to specify the properties of just about
| | 00:23 | the all the objects on your
page including the page itself.
| | 00:26 | From the Inspector you can change
your pages background color, flip images
| | 00:30 | around, create Hyperlinks, and change
the appearance of the text. We are going
| | 00:34 | to focus on changing text right now.
| | 00:36 | Let's go back to the Welcome page, and
let's say I want to make this text site
| | 00:40 | created by Garrick Chow, a little bit smaller
and a little lighter so it's not so distracting.
| | 00:44 | All I have to do is select the text
block since I want to change the entire
| | 00:47 | block of text I select the whole box.
I I only wanted to change a word or two,
| | 00:51 | I would just select those words.
| | 00:52 | So I select the text box and I click
the T for Text Inspector. And then I'll
| | 00:57 | click the Color button. This gives me
access to the standard Apple color picker
| | 01:02 | and from here I can use any of these
color picker to select the color for my
| | 01:06 | text. I'm just going drag the
Brightnesses slider in this color picker to a
| | 01:12 | light gray to make the text a
little less obtrusive, right about there.
| | 01:17 | Now when it comes to changing colors
technically you can bypass the Inspector
| | 01:20 | and just open the Color Palette. So if
I have add the Colors Palette close, I
| | 01:24 | can click Colors to open the Colors
Palette and from here you can even just
| | 01:28 | pick a color, say, and drag it on top
of your text box to change it to that
| | 01:33 | color; let me undo that.
| | 01:36 | So that's just another way you can
change the color of text. Let's say I wanted
| | 01:39 | to show you some other options in the
Inspector, so that's I went through the
| | 01:42 | Inspector to do that.
| | 01:44 | Now notice in the Text Inspector I can
change other properties of the text and
| | 01:47 | many of these properties are the
things that you can't normally or easily
| | 01:49 | change in other web design programs;
things like the Spacing between the
| | 01:53 | characters and lines of text or the
amounts of space before and after or all
| | 01:57 | things that normally require you to
create Cascading Style Sheet to accomplish.
| | 02:01 | Here in iWeb, you can just select your
text and move a slider. So if I want a
| | 02:05 | little more space between the lines
in this main block of text, all I do is
| | 02:09 | select the text, and then I can drag
the Line slider, until I see something I
| | 02:14 | like, great about there. Or if I wanted
to create space between the characters
| | 02:22 | I would just drag the Character slider,
like so. I don't really like that as
| | 02:28 | much so I'm just going to undo that.
| | 02:28 | Of course, another common property of
text you want to play around with is the
| | 02:32 | Text Font Face. Let's switch over to
the Melbourne page so we have something
| | 02:36 | different to look at as we talk about fonts.
| | 02:38 | So changing the text font in iWeb is
really no different than changing the font
| | 02:41 | in any other word processing
application. All you have to do is to select the
| | 02:51 | text you want to change, open the Font
panel by clicking the Fonts button, just
| | 02:58 | move that out of the way here, and
then browse through the Font panel to find
| | 03:02 | font that you want to use.
| | 03:03 | I am going to select the Modern
Collection, go with Optima and let's make that
| | 03:11 | Italic and I'm actually okay with that
Size. So you can see you can change the
| | 03:14 | size of the font form here as
well as the color of the font.
| | 03:18 | Now at this point I can almost hear
you experienced web designers out there
| | 03:22 | sputtering hey! You just can't choose
any font on your computer when you are
| | 03:25 | designing a web page. And yes you are
right. Normally when you select fonts for
| | 03:30 | a web you are kind of limited because
you when you publish a web page, you are
| | 03:33 | basically telling the page to bring up
a certain font on the visitors computer
| | 03:36 | to use to display the text. But if
you pick some of absurd fonts that the
| | 03:40 | visitor doesn't have installed on
his or her computer, your text won't be
| | 03:43 | displayed in that font and it will
instead be displayed in some default font
| | 03:46 | usually an Arial or Times variation.
| | 03:49 | But in effort to make things as easy as
possible iWeb gets around this problem
| | 03:53 | by being tricky. It let's you go ahead
and pick any font you want, but if you
| | 03:57 | pick a font that's outside it's list
of pre-approved web safe fonts, it will
| | 04:01 | actually convert your entire text
block into an image. Basically it creates a
| | 04:05 | picture of your text.
| | 04:06 | The upside of this is that your text
will appear on your web page exactly as
| | 04:09 | you see it in iWeb. The downside is
that your text will not be selectable
| | 04:13 | meaning visitors won't be able to copy
and paste the text from your web page.
| | 04:17 | Also since your text is really an image,
search engines like Google won't be
| | 04:20 | able to read your text and your page
might not appear when people perform a
| | 04:24 | search for it or similar websites. And
also images are much larger than text in
| | 04:28 | terms of file size.
| | 04:30 | Now iWeb does a pretty good job of
keeping a size of these text images pretty
| | 04:33 | low. But if you have a lot of text
blocks with custom fonts in them it's going
| | 04:37 | to start taking up a lot more space on
your web server. So you should try to
| | 04:40 | avoid any weird or rare fonts for
your pages, except maybe for headings or
| | 04:44 | other smaller text blocks where
you may want some style or flair.
| | 04:47 | But definitely try to avoid using
uncommon fonts for large blocks of text.
| | 04:51 | But how do you tell an
uncommon font from a common one?
| | 04:54 | Well if you look in the Fonts panel
under the Collections column you will find
| | 04:57 | a collection called Web. By selecting
that you can see a list of the fonts that
| | 05:02 | are most likely going to be installed
on other people's computer. Just select
| | 05:06 | from this list and then just choose
the Typeface for that font and a Size.
| | 05:10 | Now you can also take advantage of
an iWeb feature that's let's you know
| | 05:12 | exactly which blocks of text are going
to be converted to an image. Go to iWeb
| | 05:17 | Preferences and check Show text imaging
indicator. We go and close that and let
| | 05:23 | me pick a font that's obviously not
web safe let's go to Fun and I'll choose
| | 05:28 | Marker Felt and you see this little
yellow icon that's popped up here that's
| | 05:31 | indicating to you that's block of text
is going to be converted into an image.
| | 05:35 | So right there I can tell right away
if I don't want this to be an image.
| | 05:38 | I'll have to pick a different font. So I'm
going to go back my Modern Collection
| | 05:42 | here I go back to Optima, go with
Italic and I believe I had 49 as the size.
| | 05:49 | And even though that's not listed in
the web safe fonts, it looks like this one
| | 05:51 | is going to be okay. I don't
see the text image indicator here.
| | 05:55 | So that's the gist of the working with
the Fonts panel. Now as a reminder in
| | 05:58 | case you are not too familiar with
working with this Fonts panel from other
| | 06:01 | applications, you can also add things
like Underlines or Glows or Strike Outs,
| | 06:07 | of course you have to have a text
selected. If I have an effect like a Text
| | 06:11 | Shadow, that will definitely turn your
text into an image. So use these effects
| | 06:15 | sparingly. Go ahead turn that off.
And I'll close the Fonts panel.
| | 06:23 | Okay so that about does it for
working with text for now. Next let's take a
| | 06:26 | look at how to work with images in iWeb.
| | Collapse this transcript |
| Working with images| 00:00 | As you are going to quickly realize in
this movie, replacing placeholder images
| | 00:03 | in iWeb with your own images is not
that much different than replacing
| | 00:06 | placeholder text with your own text.
| | 00:08 | Now when you add images to web pages in
other web design programs, you have to
| | 00:12 | be concerned about the format of the
images. For the most part, the two common
| | 00:16 | image types for the web are JPEG and
GIF. GIFs are generally used for flat
| | 00:21 | colored images with no graduation
between the colors, while JPEG is commonly
| | 00:25 | used for photographs.
| | 00:26 | You may have also heard of the P-N-G
format or PNG format, which is growing in
| | 00:30 | popularity and sort of incorporates
the best qualities of the GIF and JPEG
| | 00:34 | formats. But in iWeb, you don't
really need to worry about image formats at all.
| | 00:37 | iWeb can accept just about any
type of image format you drag into it and
| | 00:41 | it will automatically convert
the image into a web-ready format.
| | 00:44 | By default, iWeb automatically reduces
the size of large images, so they don't
| | 00:48 | take up a lot of space on your server
and don't take forever to download on to
| | 00:51 | your visitor's computer. You just need
to make sure that you have the correct
| | 00:54 | Preferences checked to do so.
| | 00:56 | So go to iWeb > Preferences, and
make sure Optimize images on import is
| | 01:01 | checked. This doesn't give you any
control over how it reduces the image size
| | 01:05 | but I wouldn't suggest turning this
option off unless you know how to optimize
| | 01:07 | web-ready images in another program
like Adobe Photoshop, for instance. Another
| | 01:13 | advantage of working with images in
iWeb is that you don't need to keep track
| | 01:16 | of an images folder like you
do in other web-design programs.
| | 01:19 | When you add an image to a web page,
you are essentially creating a reference
| | 01:22 | to that image in the web page with code
that tells the browser in which folder
| | 01:26 | to find the images specified, and if
you were to move or delete that folder,
| | 01:29 | the image on your page would go
missing. But iWeb automatically imports any
| | 01:33 | image you add intro your site folder,
and you never have to worry about
| | 01:36 | managing an images folder.
| | 01:38 | When you are ready to publish, iWeb
takes care of everything and makes sure all
| | 01:41 | your images are in the right place.
Okay, so how do we replace one of these
| | 01:44 | placeholder images? Let's start here on
the Melbourne page. For this exercise,
| | 01:48 | I have copied the folder called iWeb
photos to my Desktop, and if you don't
| | 01:53 | have the exercise files, you will just need
some of your own pictures to try this out.
| | 01:56 | Later on, I'm going to be showing you
how iWeb integrates with iPhoto and how
| | 02:00 | you can add pictures from iPhoto
directly into iWeb, but for now, I'm just
| | 02:03 | going to show you how you can add an image
from anywhere on your hard-drive into your page.
| | 02:07 | So I want to replace this big
placeholder image with one of my own. I'll open
| | 02:11 | up my iWeb photos folder and find the
picture I want, and in this case I'm
| | 02:16 | going to go into the Melbourne folder,
and I know the photo I want in this case
| | 02:20 | is called train station.
| | 02:21 | So I'm going to drag that over the
selected placeholder. Now I'm going to make
| | 02:26 | sure that I see this blue outline
around the placeholder image; that tells me
| | 02:30 | that I'm going to replace the image.
If I drag the picture around, you will see
| | 02:33 | that different areas on the page highlight.
| | 02:35 | If I drag down towards the bottom of
the page, an outline appears around the
| | 02:42 | entire page, so when I release my mouse,
that image gets added to the page and
| | 02:47 | it doesn't replace anything in
the process. Let me undo that.
| | 02:50 | So now I'm going to drag that image
over the image placeholder. And there it is.
| | 03:00 | Now depending on the dimensions of
your image, there will be times when it
| | 03:03 | doesn't match the exact dimensions of
the placeholder, and this will probably
| | 03:06 | happen more often than not because
many of the placeholders have dimensions
| | 03:09 | different than standard
photos you shoot on your camera.
| | 03:12 | Once you insert an image into a
placeholder, you can resize the image or
| | 03:15 | reposition it to suit your taste. Now
if I try to drag this image around right now,
| | 03:19 | the entire image moves. Let me
undo that. But if I double-click the image,
| | 03:26 | now I see the entire image including
the parts at the right and the left that
| | 03:29 | are hidden by the frame. So you can see them
kind of ghosted to the left and to the right.
| | 03:34 | Now I can drag the image around and
position it as I like. Notice that iWeb
| | 03:39 | automatically lets you know when your
image is centered in the frame or aligned
| | 03:43 | with other objects on your page. You
can also use the slider that makes it easy
| | 03:49 | to resize the image.
| | 03:50 | Now you could also drag the handles to
resize the image, but I find the slider
| | 03:57 | much easier to use and maybe I'll
just drag this down so we can see a little
| | 04:01 | bit more of the sky,
kind of like that right there.
| | 04:06 | Once you have done adjusting the image,
you can click outside of it and that
| | 04:10 | shows you the cropped or masked version
again. A little later, we'll talk about
| | 04:14 | how to adjust the properties of the frame
or mask as it's called around the image.
| | 04:18 | So that's how you add images to your
iWeb pages. You can either drag them over
| | 04:21 | existing placeholders or just drag
them on to the page to add new images.
| | 04:25 | I'm going to go ahead and replace the other
placeholders on this page with some of
| | 04:28 | my own photos from Melbourne.
| | 04:30 | I will grab skyline for this one,
drag this to the left so that we can see
| | 04:35 | what's going on, and maybe the next one,
I'll grab lamp. That's kind of a tall photo,
| | 04:39 | so I'll just grab lamp for that.
It probably needs to be resized.
| | 04:43 | I'll double-click on that and let's just
reposition that and maybe make it a little
| | 04:48 | bigger like that and let's grab tram.
Make that a little bit bigger as well,
| | 05:03 | and the last image here we'll use is bird.
| | 05:10 | Once again, I'll double-click, make
it a little bit bigger, reposition it,
| | 05:17 | maybe a little smaller. Here we go.
I like that. While we are at, let's go
| | 05:29 | and replace the images on the Welcome
page. So let's switch over to the Welcome page
| | 05:32 | and again, we have got a bunch of
image placeholders here and I have got a
| | 05:36 | bunch of other images in my iWeb photos.
| | 05:39 | Let's go ahead and get rid of the
sidebar there, so we can see this little bit better.
| | 05:42 | I'm just going to pop all
these open here, and maybe for the large
| | 05:47 | placeholder image, I'm going to grab
grand_canyon01 and we'll just work our way
| | 05:54 | down the other side here.
| | 05:55 | I will grab opera_house. Pagoda.
It needs to be repositioned a bit, so
| | 06:04 | I'll double-click and make it a little
bigger. Go grab the Chicago buildings and
| | 06:20 | from the Taiwan photo, I'll grab grand_
hotel and maybe make that a little bit
| | 06:24 | bigger. So it's a lot easier
to replace placeholder images.
| | 06:33 | One last thing about adding images to
your pages, in case you didn't notice
| | 06:35 | this in the Inspector Palette earlier,
let me open up the Inspector Palette,
| | 06:39 | is that you can also add images as the
background of text boxes or to the entire page itself.
| | 06:44 | So for example, if I click anywhere
on this page and then select the Page
| | 06:48 | Inspector, and go to Layout, I can
choose Fills for both the page background
| | 06:54 | and the browser background, and for
both of those I can actually choose images.
| | 06:59 | You can even select text blocks, and
under the Graphic Inspector, you can
| | 07:05 | choose images to fill those as well.
This is entirely up to you and your sense
| | 07:10 | of design style, but one thing I'll say
is that if you are going to play around
| | 07:13 | with background images behind text,
make sure there's enough contrast between
| | 07:17 | your text and your background color or image
so that you can still read the text on top.
| | 07:21 | So for example, with this text-block
selected, if I chose to fill that with an
| | 07:24 | image and I want to choose, say my
other grand_canyon photo here. It will look
| | 07:31 | something like this. Now I can choose
how it's going to fit that particular box
| | 07:35 | but still, it's not that easy
to read the text over that image.
| | 07:38 | Now we do have options as far as maybe
choosing a Tinted Image Fill, which will
| | 07:42 | fade it back a little bit. So it's
something you are going to have play around with
| | 07:44 | if you are going to have an image behind
text. I'm just going to choose None again.
| | 07:50 | Okay, so that's adding images to your
web page. Again, I'm going to get further
| | 07:53 | into working with iPhoto pictures and
photos in general, including how to edit
| | 07:57 | them directly in iWeb in the chapter
on adding photos and movies. But next,
| | 08:01 | I want to show you some other cool
things you can do with your images.
| | Collapse this transcript |
| Changing the appearance of images| 00:00 | Once you have added an image to your
web page in iWeb, they are some pretty
| | 00:03 | cool things you can do to enhance or
alter its appearance. Again, if you are
| | 00:06 | experienced with web design, you are
going to find that iWeb gives you the
| | 00:09 | ability to quickly accomplish some
effects that would normally take a long time
| | 00:12 | with other web design programs or that would
have required you to use separate applications.
| | 00:17 | So let's start with the Image options
in the Inspector. I'm going to go ahead
| | 00:20 | and select this image here on my
Welcome page, and I'll go to the Graphic
| | 00:24 | Inspector, which is already selected.
And we'll just work our way through it.
| | 00:28 | The first available option here is to
add a stroke to the object. That simply
| | 00:32 | means putting a line of some
sort around it as a border.
| | 00:35 | If you don't want to stroke around the
image, you can choose None, but that's
| | 00:37 | kind of boring. Now if you select Line,
you have 10 different styles of strokes
| | 00:42 | to choose from, add a simple hairline,
dash line, and you can watch the changes
| | 00:49 | around the image, dotted line. So all these
different types of lines you can check out.
| | 00:58 | You can also select a color for the
stroke and a thickness setting. Each line
| | 01:03 | has it's own default thickness setting
but if you wanted to make it super thick
| | 01:06 | line, you can do that as well. There
are also Endpoint menus here, but those
| | 01:10 | aren't available right now because I'm
working with a closed object that has no endpoints.
| | 01:13 | A little later, we'll see that you can
draw other shapes and objects like lines
| | 01:17 | and you can add endpoints like
arrowheads to them. We also have the option of
| | 01:21 | 18 different picture frames. So if I
choose Picture Frame, and I click the
| | 01:25 | Frame menu down below, you can see
all the different options we have.
| | 01:28 | So these are for those times when you
think simple straight-line borders are
| | 01:31 | just too boring. So I'll just click
around here and see what the different
| | 01:35 | frames look like. I may want to click
off the image to get the full effect and
| | 01:46 | then select it again to pick
something different, kind of like this make it
| | 01:56 | look like it's taped on to your page
or held on to your page by a push pin.
| | 02:01 | I'll just select this one here.
| | 02:02 | Now you can also use the Scale slider
to adjust the size of the frame.
| | 02:09 | So if you don't want quite to stick a border
around it, you can drag that down a bit.
| | 02:13 | Notice that, it pretty much disappears
at that point. Next, we have the Shadow
| | 02:17 | settings, which allow you to create
the effect of your image appearing to be
| | 02:20 | sitting slightly above the surface of your page.
| | 02:22 | This is commonly called a drop shadow.
But if I turn this effect on, I can then
| | 02:26 | adjust the appearance of the shadow by
clicking the Offset arrows to make the
| | 02:30 | image look further away or even closer
to my page. I can use the Blur arrows to
| | 02:36 | soften the shadow or to make it more
definite, and you can use the Opacity
| | 02:45 | slider to determine how
strong the shadow appears.
| | 02:47 | And you can use the Angle dial to
determine where the virtual light sources are
| | 02:54 | placed to cast that shadow off. So
you can see as I move that around, the
| | 02:58 | direction of the shadow changes. Be
aware though that if you are using a
| | 03:02 | Picture Frame around your image, a
lot of them already have drop shadows
| | 03:05 | built-in as part of their design, for
example, this picture frame here. Let me
| | 03:09 | turn-off the Shadows, so you can see it. So
it already kind of has a shadow underneath it.
| | 03:13 | So you might not want to combine a
Picture Frame Stroke with a shadow, it might
| | 03:17 | ruin the effect. But as you can see,
it's easy to experiment with all sort of
| | 03:21 | looks. With other web design
applications, you would normally have to create
| | 03:24 | your images' drop shadows in some
other image editing program before bringing
| | 03:27 | them into your web design program.
| | 03:29 | But here in iWeb, we can do it all on
the fly and see if you like the effect
| | 03:32 | within the context of your page. And
you can turn them on and off at a whim.
| | 03:35 | Let me just switch back to No stroke
for now, and No shadow, so I can show you
| | 03:42 | the next area which is the
Reflection slider. Checking the Reflection box
| | 03:46 | places the appearance of the photos
reflection below it making it look as it
| | 03:50 | were propped up on a big shiny table.
| | 03:52 | Again, for the full effect, you
probably don't want have your stroke or shadow
| | 03:54 | turned-on, and then you can use the
slider here to determine how strong the
| | 03:58 | Reflection is. I can have a very
strong reflection or just a hint of a
| | 04:03 | reflection. I can click off to see the
full effect. So that looks okay in this
| | 04:11 | theme, but I don't really like it all
that much for my website, so I'm just
| | 04:14 | going to uncheck Reflection to turn
that off and maybe I'll just turn the
| | 04:17 | Picture Frame stroke back on.
I'll go with that one there.
| | 04:23 | Now the last effect we have in the
Graphic Inspector is the Opacity slider.
| | 04:27 | This lets you set how transparent or
opaque your image is. Now in most cases,
| | 04:31 | you are going to want full opacity,
but there may be times when you will have
| | 04:34 | images and objects stacked on top of
each other, which we'll talk about in a
| | 04:37 | little while. And you want to be able
to see through one image into another.
| | 04:40 | That's where the Opacity slider comes
in. You can just drag it to the left to
| | 04:44 | make the image a little more transparent.
| | 04:46 | Again, I'll show you more about that in
the next movie. So that's what you will
| | 04:49 | find under Graphic Inspector. But what
else can you do with your images? Well,
| | 04:54 | another very cool and useful tool you
will find in iWeb is the Adjust panel.
| | 04:58 | You can open that by clicking the
Adjust button, and that's useful for color
| | 05:01 | correction and fixing your photos from
right here in iWeb. But I'm going to be
| | 05:05 | showing you this panel in detail in the
chapter on working with photos and movies.
| | 05:08 | So I'm going skip that for now and
just go ahead and close that. Now the last
| | 05:12 | thing I want to mention in this movie
about changing the appearance of your
| | 05:14 | images is the idea of masking or
cropping that I was talking about earlier.
| | 05:19 | If you only want to use a portion of one
of your images, for example, if you have
| | 05:22 | a photo of yourself on vacation, and
you want to crop out that stranger walking
| | 05:25 | pass behind you, you can bring the
picture into iWeb as is and then use the
| | 05:30 | Mask tool to crop the image.
| | 05:31 | Let me show you what I mean. So this
image on my Welcome page, it's a photo of
| | 05:36 | the Grand Canyon, but I don't really
like the composition as it is right now.
| | 05:39 | You see a lot of the ground in the
foreground here, and you've got this railing
| | 05:43 | right here. What I really want to
focus on is the Canyon in the distance.
| | 05:47 | Now we have already seen that you can
resize an image simply by dragging its
| | 05:50 | handles like so, and you can
reposition it just by dragging it around on your
| | 05:55 | page. Let me undo that. But I want to
focus again on the top portion of the
| | 06:01 | image. All I have to do with the
photo selected is click Edit Mask. Now it
| | 06:06 | doesn't look like anything has happened, but
watch what happens when I drag a handle now.
| | 06:09 | Notice I'm increasing the size of the
mask itself. And we already know that I
| | 06:18 | can resize the photo inside the mask, I
just need to double-click it, and then
| | 06:23 | dragging its handles to fill out
the rest of the mask and I can drag to
| | 06:28 | reposition it. I'll make that even
larger, something like so. And then I can
| | 06:41 | click outside the image to
complete the mask, and there it is.
| | 06:44 | Now if you want to use an image
completely unmasked, just select it and then
| | 06:48 | click the Unmask button. But that's
not what I want in this case. So let me
| | 06:52 | undo that. Okay all right, there is
one last thing I want to show you. In the
| | 06:58 | Inspector panel, if you click the little
ruler icon, you will bring the Metrics Inspector.
| | 07:03 | This area just gives you some info
like the images name. So if I select the
| | 07:06 | image, you can see the name on the
file here and it tells me its current
| | 07:10 | dimensions. In this case, it's 440
pixels wide and 205 pixels tall. You can
| | 07:15 | click the Original Size button if you
want to see the image at full resolution,
| | 07:20 | but iWeb usually does a pretty good
job of sizing images when you bring them
| | 07:23 | in. so let's undo that.
| | 07:24 | So you probably won't need the
Original Size button too much. You can use the
| | 07:28 | Position fields if you would want more
precise control over exactly where the
| | 07:32 | image sits on your page. The first
field here is for its upper left hand corner
| | 07:37 | distance from the left side of the
page, and the second field is the corner
| | 07:40 | distance from the top of the page.
| | 07:42 | So currently in my selected image is 30
pixels form the left side of the page,
| | 07:46 | and 170 pixels from top of the page.
If I move the image around, you can see
| | 07:51 | those numbers change. So undo that,
and finally, you can use the controls at
| | 07:57 | the bottom of the Metrics Inspector to
rotate the image, and you can set it to
| | 08:03 | any angle you like, or you can
flip it horizontally or vertically.
| | 08:14 | So as you can see, there are a lot of
very different and very cool things you
| | 08:17 | can do to your image inside iWeb. Make
sure to take some time and play around
| | 08:21 | these effects on your own, and try out
lots of combinations of effects to see
| | 08:24 | what you can come up with.
| | Collapse this transcript |
| Working with shapes| 00:00 | In addition to making it easy to work
with text and images, iWeb also has a
| | 00:04 | full collection of shapes and objects
that you can place on your pages. With a
| | 00:08 | few clicks and drags, you can add
rectangles, circles, stars, lines, arrows,
| | 00:12 | and any number of multi-sided
polygons to your pages with relative ease.
| | 00:16 | But what, you may be asking, are these
shapes and things for? Well, pretty much
| | 00:20 | anything you want to use them for. You
might want to color a rectangle in which
| | 00:23 | you place some text, or you might want
to draw an arrow from some text to an
| | 00:26 | image to illustrate a point.
| | 00:28 | It's really up to you to decide what to
do with these tools. But iWeb makes it
| | 00:32 | so easy to use them that I'm sure you
will come up with lots of things to do.
| | 00:35 | And again, if you are an experienced
web designer, you are going to see that
| | 00:38 | you will be able to add things to
pages that you normally can't do without
| | 00:41 | writing a lot of code.
| | 00:42 | Now there are two main ways you can
use a shape object on your page, as an
| | 00:46 | inline object or as a fixed object.
An inline object is placed inline with
| | 00:51 | text, meaning if you move the text block,
the shape moves with it and keeps it
| | 00:55 | relative position to the text. A
fixed object on the other hand is its own
| | 00:59 | object and you can move it
independently around the page wherever you like.
| | 01:03 | So let's take a look at some examples.
At the bottom of the iWeb window, we
| | 01:07 | have the Shapes button, and by
clicking it, I can see all the types of shapes
| | 01:10 | available to me. So as nothing is
selected on my page, I'm going to select the
| | 01:15 | arrow shape, and that places a fixed
object on my page. Now the term fixed
| | 01:19 | might sound like you can't move anywhere, but
you can actually move a fixed object anywhere.
| | 01:24 | Fixed just means that the object won't
move in relation to the other objects or
| | 01:27 | text on the page. So you can see I can
place this anywhere on the page that I
| | 01:31 | like. And again, iWeb tries to help
me out by displaying these guidelines
| | 01:36 | anytime I line up with other objects
on the page. I'll just place the arrow
| | 01:42 | here for now. And that's where it
will stay unless I move it again.
| | 01:46 | Now as for the shape itself, I can
resize it by dragging a corner, or I can
| | 01:53 | stretch it into any proportions
that I want. Now some shapes have extra
| | 01:57 | controls for making specific change to
that shape. For instance, on an arrow,
| | 02:01 | you have this blue dot, which lets you
control the width of the arrow's tail by
| | 02:04 | dragging it up and down or the width of
the arrowhead by dragging it left and right.
| | 02:12 | You might have already seen that you
can drag the left handles to change the
| | 02:16 | length of the tail, so I can drag
this left handle. Oops! I got to grab it
| | 02:19 | first. So I can drag the left handle to
change the length of the tail. Now the
| | 02:24 | middle one will just change the length
of the tail but if I grab the left upper
| | 02:28 | or lower handle, I can change the
length of the tail as well as the height of
| | 02:32 | the arrow, and dragging the middle
right handle on the arrow will change the
| | 02:36 | position of the head of the arrow without
changing the starting point of the tail.
| | 02:41 | Similarly, on rounded rectangles, let
me add one. We've also got this blue dot
| | 02:47 | here. And that allows you to change the
roundness of the corners of the rounded
| | 02:50 | rectangle. You can go all the way to a
regular square or drag all the way to
| | 02:54 | the right to make a circle.
| | 02:55 | We have shapes like stars, they come
with a slider to determine how many points
| | 03:04 | a star will have, as well as a dot for
changing the angle of the arms of the
| | 03:13 | star. And the polygon shape has a
slider for determining how many sides the
| | 03:21 | polygon has, you can go up to 11 sides.
Let me pull that down here so you can see it.
| | 03:29 | And as for the rest of the shapes,
you can drag their individual handles to
| | 03:32 | make them bigger, smaller, or to
change their proportions. And as with most
| | 03:36 | shape drawing programs, holding the
Shift key on your keyboard while you drag a
| | 03:40 | corner allows you to keep the shape in
proportion as you make it bigger or smaller.
| | 03:45 | If I let go off the Shift key, you can
see I can flatten the polygon or stretch
| | 03:49 | it really tall, but holding the Shift
key allows me to keep it proportional.
| | 03:54 | And holding the Option key keeps
the shape centered around its original
| | 03:57 | location so you can change its size
from the center out. And if you hold down
| | 04:02 | the Option and the Shift key together, it
will keep a proportion all from the center out.
| | 04:08 | And again, that's the way shapes
usually behave in most drawing tools. Let's go
| | 04:11 | and delete some of these off the page
here. Now shapes can also be customized
| | 04:16 | using the Graphics Inspector. So
with my shape selected, I can select the
| | 04:21 | Graphics Inspector, and a shape can be
filled with a color or an image, and you
| | 04:26 | can add a stroke to it.
| | 04:29 | Let me increase the side. Change it to
black, so you can see it a little bit
| | 04:33 | better. So you can pick any kind of
stroke you want to put around the shape as
| | 04:38 | well. You can add a drop shadow like we
saw earlier, and you can change its opacity.
| | 04:45 | Do keep in mind that you can use an
image to fill your shape. So you can
| | 04:50 | essentially make the shape into a
custom frame for your photo. So let me just
| | 04:53 | pick one here to show you. You can
see now I have a sort of a weird looking
| | 05:00 | frame for my photo. Let me
undo that a couple of times.
| | 05:05 | Now you may be wondering why the
Endpoints menus are still unavailable here,
| | 05:14 | even though I have an arrow as my shape.
It's because even though this shape is
| | 05:18 | in the form of an arrow, it's still a
closed shape with no endpoints in the
| | 05:21 | stroke around it. But if I click the
Shapes button and choose one of these
| | 05:25 | arrows at the top here, these top three
items are actually lines, not closed shapes.
| | 05:29 | Let me just choose the double headed
arrow to show you this. And now I can
| | 05:34 | choose from a variety of endpoints
for the line that I just created. Let me
| | 05:38 | thicken this up so you can see it.
So you can see we can choose different
| | 05:42 | endpoints for that arrow.
And I'll just delete that.
| | 05:47 | Another thing you can do with shapes
is to place text within them. It's going
| | 05:51 | to be a little neat way to make a
little banner or button on your page. All you
| | 05:54 | have to do is just create a shape,
and type some text in it. I'll just move
| | 06:07 | that up there, I'll change the shape a
little bit. Oops! That flips up the picture there.
| | 06:20 | Now if you remember from earlier, I see
the icon telling me that this text will
| | 06:23 | be turned into an image, which makes
sense because I'm putting this text over
| | 06:27 | an image inside of a shape. I'll just
turn that preference off, so we don't see
| | 06:31 | that. Here we go, so now I have a
little balloon shape on my page.
| | 06:38 | So this is something that you can do
with a fixed shape object. Now there may
| | 06:41 | be times when you want your shape to
be inline with some text. If you have an
| | 06:44 | inline shape, first place your cursor
where you want the shape to be. So I'll
| | 06:48 | click and place my cursor at the beginning of
this paragraph of text, and then pick a shape.
| | 06:52 | I will just select the star. So there
is the star and notice if I select this
| | 06:57 | block of text to move it, the star
moves along with it. Also notice the default
| | 07:05 | behavior of the text is to align to
the bottom of the star. When you have an
| | 07:09 | inline object, and inline objects can
be shapes but they can also be photos or
| | 07:13 | movies, you might want the text to
wrap to the object. To make that happen,
| | 07:16 | select the object, then go to the Text
Inspector, and under Wrap, check Object causes wrap.
| | 07:23 | Now you can see the text aligns itself
to the top of the star and comes down.
| | 07:28 | If I make the star smaller, notice that
the text flows around it. I'll make it
| | 07:33 | so small you can see the text actually
starts appearing beneath it. And I can
| | 07:39 | have the star aligned to the left or
to the right. I can also decide how far
| | 07:43 | away the text is going to be from the
star with the extra space setting here.
| | 07:47 | I can add more space or less space. But
notice that it not only adjusts the space
| | 07:57 | between the star and the text but also
the amount of space between the star and
| | 08:00 | the box containing it. So as I add more space,
notice it's moving away from the top of the box.
| | 08:05 | Now unfortunately the text is always
going to wrap to the box holding the shape
| | 08:13 | and not to the shape itself, so there
is no way to get the text to run along
| | 08:16 | the edges of the star. I'm just going
to delete that and go to the other shapes
| | 08:20 | that I have added here. So that's a little
bit on working with shapes on your web page.
| | Collapse this transcript |
| Object placement and stacking order| 00:00 | With the ability that iWeb gives you to
overlap text, images, and shapes on top
| | 00:04 | of each other, there will naturally be
times when you want to change the order
| | 00:07 | in which certain items are stacked.
| | 00:09 | For example, let's say I want to add a
smaller picture of the Grand Canyon on
| | 00:12 | top of the large image that's
already here on the Welcome page.
| | 00:14 | Let me go to my iWeb Photos folder and
I'm going to select grand_canyon02 and
| | 00:23 | drag that to my page. Now make sure
not to drag it on top of the main image
| | 00:27 | just yet, otherwise iWeb thinks I
want to replace the current image. Let me
| | 00:31 | undo that. So I'm just going to drag
it to an empty portion of my page first.
| | 00:39 | And there it is on my page.
| | 00:43 | So notice that this image sits on top
of the large image. If I drag it on the
| | 00:47 | page, also notice that it covers the
text and other images that were already on
| | 00:51 | the page. In terms of stacking order,
my new image is on top of the stack.
| | 00:55 | Basically, each new item you add to
your page becomes the king of the hill or
| | 00:59 | the top of the stack. But it's a simple
matter to change the stacking order if you need to.
| | 01:04 | For example, I'll just place image
over the text-blocks here. And now I'll
| | 01:07 | right-click the image and choose
Send Backward. Now it doesn't look like
| | 01:11 | anything has happened but the image
has moved one level down in the stacking
| | 01:15 | order. If I drag it around a bit,
I'll find the object that it's currently
| | 01:18 | under. And there it is. It's
actually under the title there, My Travels.
| | 01:27 | So the stacking order applies to every
object on the page. Therefore, you might
| | 01:31 | have to select Send Backward a few
times to get your object at the desired
| | 01:35 | level in the stacking order. Or if
you want it on the very bottom of the
| | 01:39 | stacking order, choose Send to Back and
now it's underneath every other object
| | 01:43 | on my page. So with this image
currently on the very bottom of my stack, a
| | 01:48 | problem you might run into is
accidentally completely hiding your object behind
| | 01:52 | a larger object on the page.
| | 01:53 | For example, let me make this a
little bit smaller. So if I drag this image
| | 01:58 | under the large image here and release,
my smaller one is now just stuck under
| | 02:03 | the big one and there is no way for me
to click it to bring it back forward.
| | 02:06 | The only thing I can do is select the
large one at this point and maybe move
| | 02:09 | that out of the way. But maybe I have
that large image exactly where I want it
| | 02:12 | to be, so I don't want to move it out of the
way just to get to the smaller image behind it.
| | 02:18 | But an easy fix for this is to just
right-click the larger image and choose
| | 02:22 | Send to Back which instantly sends
that object to the very bottom of the
| | 02:26 | stacking order and now I can grab my
smaller image again. Now bear in mind, you
| | 02:32 | also have the ability to choose Bring
Forward or Bring to Front which of course
| | 02:36 | moves objects up in the stacking order
or all the way to the top respectively.
| | 02:41 | If you have worked with web design
programs before, you may never have worked
| | 02:43 | with stacking objects, unless you
are heavy into CSS layouts. But unlike
| | 02:47 | working with CSS, iWeb makes it really
easy to place objects anywhere you want
| | 02:51 | or in any stacking order that you require.
| | 02:53 | And now that we have some overlapping
images, I can show the effect of the
| | 02:57 | Opacity slider that we talked about
earlier. Let me open the Inspector again.
| | 03:01 | Go to the Graphics Inspector. With
our image selected, we can reduce the
| | 03:05 | Opacity. And you notice that we can now
see through that image. So that's when
| | 03:10 | the Opacity slider might come into play when
you have images stacked on top of each other.
| | 03:15 | Now as far as placing objects anywhere
you want, we have already seen that iWeb
| | 03:18 | tries to anticipate where you want to
place your objects by highlighting the
| | 03:21 | areas into which you drag your objects.
So if I take this picture and drag it
| | 03:27 | down, we have got these blue lines and
you can see now it's aligned with the
| | 03:30 | center of that picture of the buildings.
If I continue dragging down, it looks
| | 03:33 | like it's now aligned to the bottom of
that text box. You could see here now I
| | 03:38 | have it aligned with the middle of
the large picture, and so on. So we have
| | 03:43 | seen these guidelines before.
| | 03:44 | Now also be aware that each iWeb page
has a header and a footer section. If I
| | 03:48 | drag this object down, you can see
this box highlight, see right there.
| | 03:54 | This box highlighting at the bottom of
the page is the footer section. Currently,
| | 03:58 | the Made on a Mac button is in the
footer. Now if I place image just outside
| | 04:02 | that box, maybe right here and then
make this text box a little bit taller,
| | 04:07 | notice the footer section moves down
but my image stays where it is. I'll make
| | 04:11 | this smaller again. But if I move
this image into the footer section, even
| | 04:17 | though you can't see the whole thing,
it is in the footer section. And now if I
| | 04:20 | make this text box bigger, notice the image
moves along with the rest of the footer section.
| | 04:27 | And the same thing goes for the header
section. If I drag all the way to the
| | 04:30 | top, we have got a box that
highlights at the top and if I drag my image in
| | 04:35 | there, and then move the header section,
or resize, you can see the image stays
| | 04:39 | in the same place. Or if I move the
image down here and then increase the
| | 04:44 | header, you can see the image
moves along with the rest of the page.
| | 04:51 | Now if you are having trouble figuring
out where the boundaries of different
| | 04:53 | sections of your page lie, you can
choose View > Show Layout, and iWeb will
| | 04:58 | display these gray lines representing
the borders of the page areas as well as
| | 05:05 | the borders of the objects on your
page. I generally like to keep those off
| | 05:09 | unless I'm having trouble
placing objects into a certain area.
| | 05:11 | So that's a little bit about stacking
and arranging objects on your page, and
| | 05:18 | what I have shown you here applies to
pretty much every object, be it a text
| | 05:21 | block, image, or shape. I'm going to go
ahead and delete that image as I don't
| | 05:24 | really need it anymore. And
we'll move on to the next movie.
| | Collapse this transcript |
| Creating links| 00:00 | Now let's talk about creating links.
After all that's really the point of
| | 00:03 | creating a website right, to be able to
click on links on one page to jump to a
| | 00:07 | different page. The good news is iWeb
actually creates most of your site links
| | 00:11 | for you. Unless you specify otherwise,
all pages created in your site appear in
| | 00:15 | the navigation bar. When viewed on the web
clicking any of these links takes you to that page.
| | 00:21 | Now by default links don't
automatically work in iWeb because it seems that
| | 00:24 | when you click on an object you want to
work with, it's not easy to go to a page.
| | 00:27 | So if I click on Melbourne here, it's
not going to take me anywhere. But if you
| | 00:32 | do want to test the link, go to the
Inspector and click the Link Inspector and
| | 00:36 | in here you want to check Make
hyperlinks active. Now notice when I roll over
| | 00:41 | Melbourne, it change colors, which is
the effect the visitors to my page will
| | 00:44 | see when they roll over the link.
And when I click that link, I'm taken to that page
| | 00:49 | just as I were reviewing this site
on the web instead of locally on my Mac
| | 00:53 | and clicking the Welcome link
takes me back to the Welcome page.
| | 00:56 | So as you can see, we have already
created a couple of links without even
| | 00:59 | trying. I'm going to talk a little
bit more about the navigation bar in the
| | 01:03 | next movie, but for now let's take a
look at how to create non-navigation bar
| | 01:06 | links and as you are about to see,
it's a pretty easy task.
| | 01:09 | Now there are a couple of different
types of links that you might want to add
| | 01:12 | to your web pages. Most commonly you
probably want to link the pages within
| | 01:15 | your site so visitors can easily
jump from one page to another and we have
| | 01:18 | seen that iWeb pretty much does that
for you with the navigation bar.
| | 01:22 | Other times you want to link to some other
site out in the web. For instance if you
| | 01:26 | want to link to a related site, or to a site
that you think your visitors might also find useful.
| | 01:30 | There may also be times when you
want to provide a file for visitors to
| | 01:33 | download like an audio file or a
document and you can easily do so by creating
| | 01:38 | a link to that document. And finally
you may want to provide an email link so
| | 01:42 | visitors can easily send you an email.
| | 01:43 | So let's take a look at how to create
these different types of links. First of all
| | 01:47 | you have to choose that and that
is going to be a link on your page.
| | 01:50 | In other words the item that visitors
will click to go to another page or to
| | 01:53 | download a file or to send you an email.
| | 01:55 | Let's go to the Melbourne page. I'm
going to change Visited by me to More Info
| | 02:03 | and underneath it, I'm going to
type Wikipedia and Official Site.
| | 02:11 | So I want to provide links to both the
Wikipedia entry on Melbourne, Australia
| | 02:15 | and the official City of Melbourne
website. And just a side note here,
| | 02:19 | Wikipedia and Official Site are
separated by what's called a paragraph break,
| | 02:23 | meaning that there is some space
between the two lines which is the default
| | 02:26 | occurrence when you hit the Return key.
| | 02:28 | But since both of these fall under the
More Info category, I want to keep them
| | 02:32 | a little bit closer together. So
I'm going to put my cursor in front of
| | 02:35 | Official Site and hit the Delete key to
get rid of the paragraph break and then
| | 02:39 | I'm going to hold the Shift key as I
hit Return and that creates what's called
| | 02:43 | a line break, which lets you separate
words or sentences into separate lines
| | 02:46 | but keeps them in the same paragraph so
you don't have all that space between them.
| | 02:50 | Okay, so let's create our links.
The first step of creating link again is to
| | 02:53 | select the text that you want to make clickable.
I'm going to select all the text of Wikipedia.
| | 02:58 | Now as general rule you want to be
fairly conservative when selecting text to
| | 03:01 | turn into a link. Try to pick the word
of phrase that best suits to the link.
| | 03:04 | You want to avoid selecting entire
sentences or paragraphs and turning the
| | 03:08 | whole thing into a link. But I don't
really need to worry about that here since
| | 03:11 | I have only one word to select. With
my text selected, I'm going to go to the
| | 03:15 | Link Inspector and check Enable as a
hyperlink. That activates the rest of the
| | 03:20 | items here in the Link Inspector.
| | 03:22 | Now I just have to specify what type of
link this will be. If I want to link to
| | 03:26 | one of the pages on my own site or any
other pages in other site I might have
| | 03:29 | created in iWeb, I would choose one of
my pages and then I could choose which
| | 03:34 | page I want to link to. Now if I had
multiple sites in iWeb, I would see them
| | 03:38 | all listed here and I could link to other
pages and other sites that I might have created.
| | 03:42 | So it's pretty easy to link to any
other page in your site, but since I want to
| | 03:45 | link to a site out on the web, I'm
going to select an External Page. Now I have
| | 03:50 | this URL field down here. URL stands
for Universal Resource Locater,
| | 03:54 | not that you need to know that, all you
need to know is that URL is the exact
| | 03:58 | address of a page or file on World Wide Web.
| | 04:01 | Now I just happen to know that the
address for the Wikipedia entry for
| | 04:04 | Melbourne is en.wikipedia.org/wiki/
Melbourne. iWeb had already added http:// in
| | 04:17 | the field for me so I just had to type
from en.wikipedia on. Even if that weren't
| | 04:22 | there and I just type my address, iWeb
would have automatically added http://
| | 04:27 | which is required in order for the
visitor's web browser to know that this is
| | 04:30 | the website you are linking to.
| | 04:31 | In other design programs you usually
have to note to type http:// in front of
| | 04:36 | all links to other websites and here
in iWeb it will do it for you in most
| | 04:39 | cases. Now if you don't know that
exact address of a website or you're just a
| | 04:43 | horrible speller, it's probably better
to first visit the site you want to link to
| | 04:47 | in your browser, copy the address from
the browser and then paste it into iWeb.
| | 04:50 | For example if I'm not sure what the
exact address for the official Melbourne
| | 04:54 | City site is, I would open my web
browser and let's just do a Google search for
| | 05:00 | City of Melbourne and we have got
Melbourne, Florida, Melbourne, Arkansas, and
| | 05:08 | here is City of Melbourne.
| | 05:10 | All right, so here is the official
City of Melbourne site and its address is
| | 05:13 | right up here in the address bar and I
don't want to have type all of that into iWeb.
| | 05:17 | So I'm just going to select that,
choose Edit > Copy or press Command+C,
| | 05:22 | go back to iWeb and I'm going to select
Official Site on my page, Enable it as
| | 05:28 | a hyperlink. It's already set to an
External Page and notice I didn't have to
| | 05:32 | actually have to type anything in here.
Because I already had it copied,
| | 05:37 | iWeb assumed that's the address that I
wanted to replace in there. How easy is that?
| | 05:41 | Now the other option we have here is
Open link in new window. If you check that
| | 05:46 | when somebody clicks on say Wikipedia
or Official Site, it will actually open a
| | 05:49 | new browser window on top of your
website so that people can browse that
| | 05:53 | website you linked to but when they close
that window and your site will still be
| | 05:56 | opened beneath it. I usually recommend
checking that when you are linking to an
| | 05:59 | external website. So now I can test
my links by making sure Make all
| | 06:03 | hyperlinks active is checked and now
when I click on those links, they open up
| | 06:09 | my browser and take me to the proper
pages. So there is the Wikipedia entry for
| | 06:13 | Melbourne and here is the Official
Site link and they are both working.
| | 06:18 | So that's pretty easy to do.
| | 06:19 | There is actually even an easier way
to create an external link on an iWeb page.
| | 06:23 | There is a website called
visitmelbourne and perhaps I want to create a
| | 06:31 | link to this site as well. Now instead
of copying and pasting the address,
| | 06:35 | you could actually drag the URL right into
iWeb. So if I just move this slightly
| | 06:38 | out of the way here and from Safari I
can just select the URL and just drag it
| | 06:43 | into iWeb and release.
| | 06:46 | Now that puts a whole bunch of text on
my page, so let me just click in between
| | 06:50 | there. Now this is where it might get
difficult to actually click your text so
| | 06:53 | you want to uncheck Make hyperlinks
active so you can actually click in here
| | 06:56 | and again I'm just going to
hold Shift and hit Return to create a
| | 07:00 | paragraph break and I'm going to
select all that text and just type
| | 07:04 | visitmelbourne.com so that will be the
text of that link. But notice that it's
| | 07:11 | already enabled as a hyperlink and
it's linking to an external page and
| | 07:15 | the address is already right in here. And
maybe I'll check Open link in new window again.
| | 07:20 | Let me just close my browser window
and again I can test that link by making
| | 07:27 | hyperlinks active and
clicking it and there it is.
| | 07:31 | So that's how you create external
links and it works pretty much the same for
| | 07:34 | images to. To turn an image into a link,
just select the image you want to use
| | 07:39 | and then check Enable as a hyperlink
and then create your link. It is the same
| | 07:42 | way as if you are creating a text link.
| | 07:43 | All right, now let's take a quick look
at the other two types of links.
| | 07:47 | I mentioned that you can also link to a
file, and I'll just use this image as an
| | 07:49 | example. I'm not really going to
link to a file here but with the image
| | 07:52 | selected, I'll click Enable as a
hyperlink and I'm going to choose Link To A File.
| | 07:57 | So iWeb prompts me to locate the
file I want to link to and really I can
| | 08:02 | choose any type of file I want. I can
link to an audio file, an image, a PDF
| | 08:06 | document or even a Microsoft Word document.
| | 08:09 | Linking to a file is no different that
linking to a web page. The only thing
| | 08:12 | you need to keep in mind is that your
visitor must have the necessary program
| | 08:15 | to open the file you are linking to. So
if you are linking to a PDF, they need
| | 08:19 | to be running either Mac OS X or if
they are on Windows they need Adobe Reader.
| | 08:23 | If you are linking to Word document
they need Microsoft Word installed or some
| | 08:26 | program that can read Word documents.
But this is how you link to a file or a
| | 08:29 | document. I'm just going to cancel out of there.
| | 08:32 | Now the final type of link you can
create is an email link. Again this is the
| | 08:36 | link that opens your visitors email
program with a new message already
| | 08:39 | addressed to you. All they have to do
is fill in the body of the email and send
| | 08:42 | it off. Let's go back to the
Welcome page to look at this.
| | 08:46 | I am going to click the Text Box button,
which adds the Text Box you can barely
| | 08:49 | see it there, so I'm just going to
type first 'email me' and let me just click
| | 08:54 | on it and drag to a place where you can
see it. Just put it there for a moment.
| | 08:59 | So, I'm going to select that text and
with that text selected I can now enable it
| | 09:03 | as a hyperlink and from the Link
To menu, I'm going to choose an email
| | 09:06 | message. And here is where you add
the email address you want to receive
| | 09:10 | messages at. So maybe I want to
set this to my lynda.com address.
| | 09:15 | iWeb even provides a subject field so
you can fill out the email subject for
| | 09:18 | the person sending the email. This is
actually a great way to quickly identify
| | 09:22 | messages originating from this link.
Just type a subject of something like,
| | 09:27 | Message from travel site, and that way
anytime you receive a message that it
| | 09:33 | came from this site, you will be able
to identify right away by looking at the
| | 09:36 | subject line. So with hyperlinks active,
I'll click that email me link and
| | 09:41 | you can see that it pops open my mail
program. You could see my address is already
| | 09:45 | in the To field and the Subject line
is 'message from travel site.' So as the
| | 09:49 | sender of the email all I have to do
is write my message and hit Send.
| | 09:52 | Pretty cool. I'll just quit out of there.
| | 09:57 | Now iWeb does include an Email Me
button that you can add to your pages but
| | 10:01 | that only works for one email address.
If you want to be able to include
| | 10:04 | multiple email addresses on your web
pages, for example, if you run a small
| | 10:08 | business and you want to provide
separate email addresses for, say customer
| | 10:11 | service and orders, you have to do
what we just did here with either selected
| | 10:15 | text or selected images and
turn them into email links.
| | 10:18 | In the couple of movies from now I'll
talk about the email me button and some
| | 10:21 | of the other special items
you can add to your page.
| | 10:24 | Now one last thing worth mentioning
about creating links in iWeb is that iWeb
| | 10:27 | can automatically detect certain
types of text as links. For example if I
| | 10:33 | delete that Text Box, let's add
another one here. And if I start typing
| | 10:40 | www.lynda.com and hit Return, notice
that iWeb has automatically turned it into
| | 10:46 | a link. It's highlighting, acts like
a link. Let me uncheck Make hyperlinks active.
| | 10:51 | You can see that the address has
already been added here in the Link Inspector.
| | 10:56 | Anytime text that you are typing
starts with www or http, iWeb automatically
| | 11:01 | turns it into a link. Similarly if
I type in email address, like in the
| | 11:05 | sentence Email me at garrick@lynda.com
that also automatically becomes an email link.
| | 11:14 | With it selected you can see
it's enabled as a hyperlink, Link To An
| | 11:18 | Email Message, and there is my address.
This can be a big time saver but if you
| | 11:22 | prefer that iWeb not do this for you,
go to iWeb > Preferences and uncheck
| | 11:27 | Automatically detect email and web
addresses. I like to leave that on though.
| | 11:31 | All right, I'll just delete that Text Box.
| | 11:36 | Okay for now that's the gist of
adding links to your iWeb pages. Again it's
| | 11:40 | pretty simple. Just select the text or
graphic you want to turn into a link,
| | 11:43 | enable it as a hyperlink in the Inspector
and decide what type of link it's going to be.
| | Collapse this transcript |
| About the navigation bar| 00:00 | In the previous movie we looked at the
various types of links you can create in
| | 00:03 | iWeb. We saw that you can select any
text or graphic, enable it as a hyperlink
| | 00:07 | and then specify it as an internal
link to one of your own pages and external
| | 00:11 | link to any page out on the web, or you
could link to a file or create an e-mail link.
| | 00:15 | In this movie I want to look at the
built-in Navigation Bar which iWeb
| | 00:19 | automatically updates with links to
every page in your site. In actuality,
| | 00:22 | there is not too much to say about the
Navigation Bar. By default it appears on
| | 00:27 | every page of your website and every page
you create appears in the Navigation Bar.
| | 00:31 | Right now I only have the Welcome page
and the Melbourne page on my site.
| | 00:34 | I'm going to click the Add Page button to
add another page and I'll just pick the
| | 00:39 | Photos template for now. Notice
that Photos is immediately added to the
| | 00:46 | Navigation Bar on all pages. So on the
Welcome page I see it on the Navigation
| | 00:51 | Bar, on the Melbourne page in the
Navigation Bar and its right there on the
| | 00:55 | Photos page as well.
| | 00:56 | So this is pretty convenient in most
cases. You don't have to worry about
| | 00:59 | manually creating links to the various
pages in your site each time you create
| | 01:02 | a new page. Now the Photos page
appears as a second item in my Navigation Bar
| | 01:07 | because I had the Welcome page
selected when I created my new page. So the
| | 01:10 | Photos page appears right
underneath it here on the sidebar.
| | 01:12 | If you want to rearrange the order of
the pages in the Navigation Bar, just
| | 01:16 | drag their order here in the sidebar.
So if I drag pages down till I see that
| | 01:20 | line up appear and release, you can see
it immediately switches to be the last
| | 01:23 | item in the Navigation Bar.
| | 01:25 | But there will be times when you don't
want a page to appear in the Navigation
| | 01:28 | Bar. For example maybe you've created a
page that you only want certain people
| | 01:32 | to see which you will allow them to do
by providing them with the exact address
| | 01:35 | of the page, maybe in a e-mail rather
than clicking a link on the Navigation
| | 01:38 | Bar that every visitor in your site can see.
| | 01:40 | To prevent a page from showing up in
the Navigation Bar, select the page in the
| | 01:44 | sidebar, then go to the Page Inspector
and go to Page. By default every page
| | 01:51 | has Include page in navigation menu
checked. Simply uncheck it and it's
| | 01:56 | immediately removed from the
Navigation Bar. That's all there is to it.
| | 02:00 | Now as I said in most cases the
Navigation Bar is your friend. It creates all
| | 02:04 | the links to all the pages in your
site and you can choose not to include
| | 02:06 | specific pages in the Nav Bar. But
there may be times when you want to get rid
| | 02:10 | of the Navigation Bar entirely.
Unfortunately there is no easy way to do this.
| | 02:14 | You can't just select the Navigation
Bar and hit Delete. Instead you have to
| | 02:18 | select each page and uncheck in the
Page Inspector, Display Navigation menu and
| | 02:23 | that actually does get rid of
the Navigation Bar entirely.
| | 02:26 | It's not that big of deal or that time
consuming to uncheck each page but would
| | 02:30 | be nice if there were a global way to
get rid of the Navigation Bar. But as of
| | 02:33 | this recording, there is no way to do
this. You can't even change the location
| | 02:36 | in the Navigation Bar. You can move it
up and down, but you can't place it at
| | 02:40 | the bottom of the main content of your
page for example. So if I go back to the
| | 02:43 | Melbourne page here, you can see I can
select the Navigation Bar and move it
| | 02:48 | down but I can't move it into
the main portion of the page.
| | 02:52 | So there are some aspects of control
you have to give up in exchange for the
| | 02:55 | overall ease of use of working with iWeb.
I'm going to go ahead and delete that
| | 02:59 | Photos page I created by selecting it
in sidebar and hitting Delete. I'll just
| | 03:03 | save my site and we can
move on to the next movie.
| | Collapse this transcript |
| Adding buttons| 00:00 | In this video, I want to quickly go
over the special buttons you can add to
| | 00:03 | your pages in iWeb. Let's
go back to the Welcome page.
| | 00:07 | Under the Insert menu, under Button,
you will find three items you can add to
| | 00:12 | any location on any page in your site,
Email Me, Hit Counter and Made on a Mac.
| | 00:16 | Now, the first one, Email Me, when I
select it adds a button that when a
| | 00:21 | visitor clicks it, will open his or
her email program with your email address
| | 00:25 | already entered in the To field.
| | 00:27 | Now this is different than the type of
email link I showed you how to create
| | 00:30 | earlier in the movie on Links. How this
email link behaves depends on where you
| | 00:34 | are publishing your iWeb site to.
Basically, if you publish your site to your
| | 00:38 | MobileMe account, clicking the Email
Me button opens a new mail message with
| | 00:42 | your MobileMe email address
already filled in a To field.
| | 00:45 | If you publish your site to any server
other than MobileMe, the Email Me button
| | 00:48 | opens a new message using the MeCard
in your Address Book. So if you open up
| | 00:53 | your Address Book application, the
email address list for you here will be the
| | 00:56 | email address that will appear
when people click your Email Me link.
| | 01:01 | There's also a third option for setting
where the Email Me button goes. You can
| | 01:04 | select the site in your iWeb sidebar
and fill out the Contact Email address
| | 01:08 | field and then that will become the
address that the Email Me button emails to,
| | 01:12 | overwriting your MobileMe address if you
have one and the address in your Address Book.
| | 01:18 | So the main difference between the
Email Me button and creating an Email link
| | 01:21 | manually is that the Email Me button
has one default address. While creating a
| | 01:26 | manual link let's you determine the
address on a link-by-link basis, which can
| | 01:30 | be useful when you want to link to
email addresses other than your own, like if
| | 01:33 | you want to provide a link to a
friend or a co-worker's email address for
| | 01:37 | example and that's how
the Email Me button works.
| | 01:39 | The next special button you can add is
Hit Counter. This is an item that keeps
| | 01:46 | track of how many visitors your site
has received. You have probably seen
| | 01:50 | something like this on other sites. So
if you want to add a Hit Counter, just
| | 01:53 | insert it on your page and then just
drag it anywhere on your page you like and
| | 01:56 | once your site has been published, the
Counter will automatically keep track of
| | 01:59 | the number of visitors to your page.
| | 02:00 | The final button we have here is Made
on a Mac and by default, that's already
| | 02:05 | been added and you can see that right
down here at the bottom of the page and
| | 02:08 | this serves no other purpose than to
inform visitors that your site was proudly
| | 02:12 | made on a Mac, so proudly in fact that you
want to advertise this little bit of information.
| | 02:16 | If the users click on that button,
they will be taken to Apple's Mac website
| | 02:19 | and that's really all
there is to say about that.
| | 02:21 | Now incidentally, if you do have all
three buttons down here like I do, you
| | 02:24 | might want to select them all by
dragging a marquee through them and then
| | 02:28 | choosing Arrange > Distribute
Objects > Horizontally just to spacing out
| | 02:33 | equally, just for a static purposes. But you
can also drag them anywhere in the page you like.
| | 02:38 | So if you wanted your Hit Counter,
like right there and your Email Me link
| | 02:44 | here, you could do that as well. But be
aware that you can only move or delete
| | 02:47 | the three types of buttons, you can't
resize them or change them in any way and
| | 02:51 | you can only have one
instance of each on a page.
| | 02:54 | So it's not possible to have more than
one Email Me button or to plaster your
| | 02:57 | page with Made on a Mac buttons, no
matter how much you might want to do so.
| | 03:01 | Now there are other items that appear
under Insert button that are currently
| | 03:05 | grayed out and there's a more
specialized buttons that can only be added to
| | 03:08 | certain types of pages.
We'll talk about those later.
| | 03:11 | To delete these buttons from my page, I
can either uncheck them from the Insert
| | 03:14 | menu or just select them and
hit the Delete key on my keyboard.
| | 03:19 | So I don't really think I need them
on this particular page but on your own
| | 03:22 | site, you can place these
items on as many pages as you like.
| | Collapse this transcript |
| Adding widgets| 00:00 | iWeb '09 comes loaded with a new
collection of easy to use widgets that you can
| | 00:03 | drag into your web pages to enhance
your site with items like YouTube videos,
| | 00:07 | Google Maps, Countdown Timers and more.
To access iWeb's Widgets open the Media
| | 00:12 | browser by clicking the Show Media
button and select Widgets. So these are all
| | 00:17 | the Widgets available to
you to add to your site.
| | 00:19 | Now in the previous version of iWeb
you could add items like Google Maps and
| | 00:22 | HTML Snippets, but here on iWeb '09
all the widgets are located here in one
| | 00:27 | place and adding them to your site is
simply a matter of dragging the widget
| | 00:30 | onto your page. So widgets are an
easy way to add dynamic and interactive
| | 00:33 | content to your web pages.
| | 00:34 | There are widgets here for adding a
MobileMe Gallery, video clips from YouTube,
| | 00:40 | Google Maps, Google AdSense. If you
have an iSight camera built into your Mac
| | 00:44 | you can take a photo snapshot or even
a movie from right here in iWeb and add
| | 00:48 | it to your page. And we also have Countdown
Timer, RSS Feed and HTML Snippets Widgets too.
| | 00:52 | Let me show you a couple of examples of
how easy these are to use. I'm going to
| | 00:57 | go back to my Melbourne page and lets
say I want to add a map of Melbourne to
| | 01:01 | my Melbourne page, maybe right down at
the bottom. So I'm going to grab Google
| | 01:05 | Maps and it expands as soon as I drag
it on to my page and I'll just drag it
| | 01:12 | towards the bottom here and there it is.
Let me scroll down a bit. Just going
| | 01:18 | to drag it down below the text.
| | 01:20 | Now the great thing about most of these
widgets is that you can customize their
| | 01:24 | size. So right now it's at its default
size, so I'm just going to drag it out a
| | 01:29 | little bit, covers the width of the
page and I can use that blue guideline that
| | 01:34 | tell me when it's wide enough that
it's actually centered on the page and we
| | 01:37 | are just going to make that a
little bit shorter, to be like so.
| | 01:43 | Each Widget has a control panel that
opens up and in this case I just need to
| | 01:47 | plug-in an address. Just type Melbourne,
Australia. See if Google Maps can find
| | 01:54 | that and there it is. Now within this
Google Maps widgets I can drag the map to
| | 02:01 | reposition it, I can zoom out, I can
even switch to the Satellite view or I can
| | 02:09 | choose the Hybrid view which show
Satellite with street names. We'll zoom in
| | 02:14 | just a little bit more.
| | 02:18 | In this control panel we also have some
options. We can decide what we want to
| | 02:20 | show or hide in terms of the controls.
We can hide or show the Zoom controls.
| | 02:25 | Usually I like to keep those on.
Don't really need the Address Bubbles, I'm
| | 02:28 | going to uncheck that and we can also
decide to keep or remove the Search Bar,
| | 02:33 | which is this item down in the lower
left hand corner. Just going to turn that
| | 02:36 | off and I can close the control panel and
there is my Google Map right on my page.
| | 02:43 | So it really doesn't get much easier
than that. Let's go back to the Welcome
| | 02:46 | page and let's say I want to let my
visitors know how long it's going to be
| | 02:50 | until my next trip. I'm going to come
down here into the Text Box, hit Return.
| | 02:54 | I'll say "Time until my next trip:"
and now I'll drag the Countdown Timer
| | 03:02 | widget onto my page and I'll place it
right there and you can see this has its
| | 03:08 | own control panel that pops up.
| | 03:10 | I can choose different Styles of
Countdown Timers. I kind of like the default
| | 03:14 | one. I can choose what I'm Displaying,
Years, Days, Hours, Minutes or Seconds.
| | 03:18 | All I have to do is drag out to
the left or to the right to make that
| | 03:24 | determination. I can turn Labels on
and off. Kind of make sense to leave them
| | 03:29 | on in this case and then I just have
to say what Date we are counting down
| | 03:32 | until. Let's say we are counting down
till October 26, 2009 at 1:30 PM and you
| | 03:41 | can see the timer is now rolling.
So that's the Countdown Timer Widget.
| | 03:48 | Let's go back to Melbourne. Another
widget I like is the HTML Snippet Widget.
| | 03:54 | It also just runs the same. Some
websites offer you little snippets of HTML
| | 03:58 | codes so you can place their contents
onto your website. For example, let me
| | 04:03 | open up Safari. One of my favorite
weather websites is Weather Underground,
| | 04:07 | which is wunderground.com. Okay so here
is the Weather Underground site and I'm
| | 04:15 | going to Search for Melbourne's weather.
So here I see the Current Conditions,
| | 04:27 | not really interested in that right now,
but I'm going to scroll down. And here
| | 04:32 | they have Free Weather Stickers for
Your Homepage. We want to click Get Your
| | 04:36 | Weather Sticker! and Weather
Underground actually offers several different
| | 04:40 | types of Web Stickers that
you can add to your web pages.
| | 04:45 | They have Searchable HTML Stickers,
Dynamic Minis, Static Minis. I'll choose
| | 04:50 | the Dynamic Mini just so we can see
how that works. Go and click on that and
| | 04:55 | you can see now it's giving me HTML
code that I can paste into my web page.
| | 05:00 | Now the only way to do this with an iWeb
web page is to use the HTML Snippet
| | 05:04 | Widget. So I'm going to select the text,
the HTML code, choose Edit > Copy and
| | 05:14 | then return to iWeb and I'm going to
drag the HTML Snippet Widget onto my page
| | 05:20 | and here, all I can do here is just
paste in that code. So I'm going to click
| | 05:24 | in there, choose Edit > Paste, hit
Apply and there it is. So there is the
| | 05:32 | weather for Melbourne right now. Just
place that right there. So that's the
| | 05:39 | HTML Snippet Widget.
| | 05:41 | So as you can see there is an
incredibly diverse range of widgets available for
| | 05:44 | your use here in iWeb '09 and be sure
to take the time to explore some of these
| | 05:47 | other widgets on iWeb, like the iSight
Photo and iSight Movie widgets, which
| | 05:51 | can be a fun and quick way to get
snapshots and short videos on to your page.
| | 05:54 | Or the YouTube widget, which lets you
embed videos you find on YouTube right
| | 05:58 | into your web pages, and that could be
pretty useful too. And don't be afraid
| | 06:02 | to experiment. If you decide you don't
need a widget, you drag on to your page,
| | 06:04 | just select it, hit the Delete key and
it's gone. But do at least give widgets
| | 06:10 | a try, because they represent a lot
of fun and useful things you could be
| | 06:13 | adding to your iWeb sites.
| | Collapse this transcript |
| Changing your theme| 00:00 | I mentioned earlier that iWeb '09
allows you to easily change the theme of your
| | 00:04 | web pages. So if you ever get bored
with the look of your site or you are
| | 00:07 | thinking you pick the wrong theme to begin
with, it's a simple matter to change themes.
| | 00:11 | Let's start with the Melbourne page.
One downside of changing a theme is that
| | 00:15 | you have to do it on a page by page
basis. You can't globally change the theme
| | 00:19 | over every page. But in my opinion
that's kind of a good thing because
| | 00:22 | depending on what items you have
placed on a page you might find that things
| | 00:25 | have shifted around unexpectedly,
specially if you have added extra images,
| | 00:29 | text boxes or other objects that
weren't part of the original template.
| | 00:33 | So it's kind of a good idea to have to
open each page and make sure things are
| | 00:35 | placed where you want them to be. So
to change the theme of a page just click
| | 00:40 | the Theme button and choose the one you want.
| | 00:42 | I will go with the other theme that's
new to iWeb '09, Leaf Print and just like
| | 00:50 | that I have a brand new and radically
different look for my page. I have a
| | 00:54 | different color scheme, different
colors for my links, and entirely different
| | 00:58 | layout. And iWeb did a pretty good job
of keeping things where they need to be
| | 01:02 | considering that it rearrange the
entire page in a matter of seconds.
| | 01:06 | Now this theme has a few less image
placeholders than the one I started with.
| | 01:09 | So two of my images are just kind of
here in the middle of the page.
| | 01:12 | I can either try to find the place for them
on the page or if I don't really need
| | 01:15 | them I can just select and Delete them both.
| | 01:19 | My Google Map also got shifted to the
left a bit, but I can just select that
| | 01:22 | and drag that back into place. And
since it seems to be a little wide for this
| | 01:27 | theme, I can just make
it little bit more narrow.
| | 01:30 | But for the most part the changes are
pretty minor, but it's really all going
| | 01:34 | to depend on which theme you choose.
Let's try another one. I'll go with Main
| | 01:39 | Event. Now this one definitely needs
some fixing. We have some text overlapping
| | 01:47 | other text down here. We have images
overlapping other images and so on.
| | 01:52 | This template obviously had only one
placeholder image, the large image right
| | 01:56 | here. So my two other images are just
kind of hanging out up here. Let me just
| | 02:00 | Delete those for a moment. And this
placeholder image here is in more of a
| | 02:04 | vertical orientation, so I'm seeing a different
crop of my image than I was in my original theme.
| | 02:10 | So you can see that changing the theme
is easy, but in most cases you are going
| | 02:13 | to have to do a little work,
rearranging things once you make the change.
| | 02:16 | Even if you switch back to your original
theme, which in my case was Fine Line, you
| | 02:20 | are going to find that you will
still need to fix a few things to get
| | 02:24 | everything back to the way it was,
because I deleted all those images, now I
| | 02:28 | just have the standard
default placeholder images here.
| | 02:32 | Now as long as you haven't quit iWeb or
published your site since changing your
| | 02:35 | themes, you can choose Edit > Undo
multiple times until you are back at the
| | 02:42 | original version of your page. So if I
use the keyboard command, the Command+Z
| | 02:45 | just keep pressing that, I eventually
end up back at the version I started with.
| | 02:55 | Now if you are not exactly sure what
affect the theme changes is going to have
| | 02:58 | on your page, and really how could you?
One thing you might want to try is to
| | 03:01 | duplicate the page by right clicking
it and choosing Duplicate and then using
| | 03:06 | that copy of the page to mess around
with. So now I have a copy of Melbourne
| | 03:09 | page. It's labeled Melbourne 2, so now
I can just play around with by picking
| | 03:14 | different themes and seeing how they look.
| | 03:19 | Now if you decide not to make any
changes you can always just delete the
| | 03:24 | duplicate or if you manage to get the
copy looking the way you want, you can
| | 03:28 | delete the original and then just
rename the copied version. But in this case,
| | 03:32 | I'm going to delete the duplicate by
right clicking on it and choosing Delete Page.
| | 03:35 | So that's how you can change the theme
of an existing site here in iWeb '09.
| | Collapse this transcript |
| Publishing to MobileMe| 00:00 | In this last movie of this chapter I
want to go over the basics of publishing
| | 00:04 | your site. Now there is a whole
chapter on publishing iWeb sites later on but
| | 00:08 | in this movie I want to talk about
some concepts that will be helpful to
| | 00:11 | understand before we move on to
other topics. Remember a website is not
| | 00:14 | accessible to other people until
you publish it to the World Wide Web.
| | 00:17 | When you're working in iWeb the only
place your site exists is on your Mac.
| | 00:22 | When you publish your site you're
essentially copying the version that's on
| | 00:25 | your Mac to a serve that's connected
to the web. So you can publish your site
| | 00:29 | at any time. In most cases you're going
to want to have a completed version of
| | 00:32 | your site before you make it live
on the web where anyone can see it.
| | 00:35 | But there is nothing wrong with
publishing a few pages first and then adding to
| | 00:38 | them as time goes by. So in this basic
example, I'm just going to show you how
| | 00:42 | to publish to your MobileMe account. If
you are not planning on publishing the
| | 00:45 | MobileMe, just wait for the chapter on
publishing where I'll be talking about
| | 00:49 | how to publish your site via FTP, so you
can publish it to a third party server.
| | 00:53 | So the first thing I want to do is make
sure all of your pages are looking the
| | 00:55 | way you want your visitors to see them.
So you want to go through and make any
| | 00:58 | last minute rearrangements. Like maybe
on the Welcome page I don't want this
| | 01:03 | timer here, decided not to advertise
on my trip is going to be, so I could
| | 01:07 | delete that. But I'm not going to
make a bunch of changes right now.
| | 01:12 | So basically when you're ready to
share your website with the world, meaning
| | 01:15 | that your pages are looking exactly
the way you want people to see them when
| | 01:17 | they visit your site, all you have to
do is click the Publish Site button at
| | 01:21 | the bottom of the iWeb window.
| | 01:22 | Now before I do so notice that the
Site and the two pages in my site have red
| | 01:27 | icons. In iWeb red icons indicate
pages that haven't yet been published.
| | 01:31 | Once you have published them the pages turn
blue and again before you publish your
| | 01:35 | site you need to have a subscription to
MobileMe or at least the trial MobileMe
| | 01:39 | account to work with. I showed you
how to set up a MobileMe account in the
| | 01:42 | previous chapter. So you want to go to
System Preferences if you haven't done
| | 01:45 | so already. Click MobileMe and then
enter your MobileMe Member Name and Password.
| | 01:52 | Okay so we're all set up here. I'm
going to go back to iWeb. If you see this
| | 01:59 | message saying, iWeb wants to use your
confidential information stored in your
| | 02:03 | keychain, iWeb basically wants to
access that information that you just entered
| | 02:07 | so it can connect to your MobileMe site.
So I'm just going to say Always Allow.
| | 02:11 | Now if you click your Site in your
sidebar here is where it will determine
| | 02:15 | where you're going to be publishing
your site to and by default it set to
| | 02:17 | MobileMe. This is also where we can
choose FTP Server or Local Folder.
| | 02:21 | But again I'm not going to get into
those until the chapter on publishing.
| | 02:24 | Now one thing you might want to do if
you haven't done so already is to give
| | 02:27 | your site a simple name. Its default
name right now is simply Site. You can see
| | 02:31 | my site name is Site, which also
appears here on the sidebar. This is fine if
| | 02:36 | this is the only site you're going to
be publishing on your MobileMe account
| | 02:39 | but you might want to give your site
a more logical name especially if you
| | 02:41 | might be creating more than one site.
| | 02:44 | Also of utmost most importance if you
want a site address that people might
| | 02:47 | actually have a chance of being able to
correctly type into their web browser,
| | 02:50 | name your site with only a single
word and try not to use any spaces if you
| | 02:54 | need to use more than one word. So I'm
going to name this site travel and we'll
| | 02:58 | see the result of this in just a few moments.
| | 03:00 | All right, so now I'm going to click
Publish Site. So now iWeb is logging into
| | 03:06 | my MobileMe account and it's copying
my pages to my MobileMe server space.
| | 03:10 | Once it gets everything in order it will
tell you the publishing will continue in
| | 03:13 | the background and could take a few
minutes depending on the size of your site.
| | 03:17 | It says you can continue to work, but
you can't quit the application. And you
| | 03:20 | can actually watch the progress of you
upload by looking at the icon next to
| | 03:23 | this site in your sidebar. So I'll
click OK and I'm not going to work on my
| | 03:28 | site, I'll just wait for
the site to finish publishing.
| | 03:30 | All right so now my site has been
published. If you want to see your site live
| | 03:35 | on the web, click Visit Site Now. You
can also click Announce to send an email
| | 03:39 | to your friends to give them a link to
your site or just click OK to continue
| | 03:42 | working in iWeb. I'm going to click
Visit Site Now. That opens up my Safari
| | 03:46 | browser and now we're looking at my
site live on the web. So once you have
| | 03:51 | published your site you can check it
out to make sure everything looks and acts
| | 03:55 | the way you intended. So I click
Melbourne. The page seems to be working
| | 03:59 | properly. Here's the Google Map widgets.
And I'll go back to the Welcome page,
| | 04:06 | test that link and that's working as well.
| | 04:10 | Notice the address or URL of my site.
You can point anyone to your site by
| | 04:14 | having them type web.me.com/your
MobileMe account name/your site's name,
| | 04:21 | travel. So notice that my site's name.
Being Travel it appears right here in
| | 04:25 | the address. This is why I suggested
that you keep your site name short and
| | 04:29 | simple. In a moment I'll show you what
you get if your site name is more complex.
| | 04:33 | Now by default typing in my site's
address even if I just type in web.me.com/my
| | 04:39 | account name/travel, try that. Notice
it defaults to my Welcome page. Later I'm
| | 04:45 | going to talk about how to change your
site's default page and again, that will
| | 04:47 | be covered in the chapter on publishing.
| | 04:49 | All right, let's go back to iWeb.
Notice that the pages and icons in my sidebar
| | 04:53 | now are blue indicating that they
have been published. Now after you have
| | 04:56 | published your site, if you make any
changes to your pages you have to publish
| | 05:00 | them again in order for the most
current version to be visible on the web.
| | 05:03 | For example, let's go to the Melbourne
page and let's say I need to change the
| | 05:07 | Population information here. It
actually says 3.9 million instead of 3.8.
| | 05:13 | Notice that my Page icon is now turned
red. I have made a change to the page,
| | 05:16 | which means I now need to republish
it to my site so that the most current
| | 05:20 | version of the page is
available to all my visitors.
| | 05:22 | So iWeb does keep track of and only
publishes the pages that have changed since
| | 05:26 | you last publish your site. So you
don't have to republish your entire site if
| | 05:30 | you have only changed one page. So
I'll click Publish Site again. I get the
| | 05:38 | Background Publishing menu again but
the upload is very quick because I only
| | 05:42 | have that one change. So again, now I
see the message telling me my site has
| | 05:46 | been published and I can visit it again.
And if I go and click the Melbourne
| | 05:51 | link, there is my change.
| | 05:54 | So it's that easy to make a change
and republish it to your site. Okay so I
| | 05:59 | said, I would show you what happens
when you have spaces in your site name.
| | 06:02 | Let's go back to iWeb again and I'll
click my site in my sidebar here and I'm
| | 06:06 | going to change the Site name to My Travel Site.
| | 06:12 | Notice that only the site's icon now
has turned red. The other two pages don't
| | 06:16 | need to be republished. So I'll click
Publish Site, click OK there again and
| | 06:25 | now I'll visit my site. So notice my
site's name is now My_Travel_Site.
| | 06:32 | So if you have to give your address to
someone they would have to type all those
| | 06:35 | characters into bring up your site.
It's much more complex when you have a
| | 06:39 | longer site name with spaces in it.
| | 06:41 | Also notice what happens if I change
this to a lowercase m, that to a lowercase
| | 06:47 | t and that to a lowercase s. That page
can actually not be found. So iWeb site
| | 06:55 | addresses are actually case sensitive.
This is why I suggest keeping your site
| | 06:59 | and page names as short as possible
and to use lowercase letters. So let's go
| | 07:04 | back to iWeb. I'm just going to
change my site name back to travel all
| | 07:09 | lowercase and I'll publish the site.
Visit my site and now we have the much
| | 07:20 | simpler address here /travel,
all one word, all lowercase.
| | 07:24 | All right, so that covers some
important basic concepts about publishing your
| | 07:30 | site. In the next chapter we'll look
at how to work with photos and movies in
| | 07:34 | your iWeb pages.
| | Collapse this transcript |
|
|
3. Photo and Movie PagesCreating and examining a photo page| 00:00 | In this section of movies we're going
to take a look at working with media like
| | 00:03 | photos and videos. In the previous
chapter we looked at the basics of working
| | 00:07 | with images. But now I would like to
look specifically at topics like creating
| | 00:10 | a photo gallery page, importing photos from
iPhoto and adjusting images directly in iWeb.
| | 00:15 | So let's start by taking a look at how
to create a photo page. A Photo page is
| | 00:19 | simply a page designed to display a
photo gallery or a photo slide show.
| | 00:23 | A photo page is a great way to share a
large or even a small collection of photos
| | 00:26 | on the web and you can do so quite
easily by simply using one of the Photo Page
| | 00:30 | Templates in iWeb. So let's create a photo page.
| | 00:33 | I am going to click the Add Page button,
to add a new page to my site and now I
| | 00:38 | can see my collection of page
templates again. Now there is only one type of
| | 00:42 | photo page per template theme. But
remember there is no absolutely hard and
| | 00:46 | fast rule that you have to stick
with one theme for all of your pages.
| | 00:50 | It certainly helps to maintain a sense
of design consistency throughout your
| | 00:52 | site if you do, but if you don't like a
particular template, browse through the
| | 00:55 | other ones to find one that better
suits your visions for your photo page or
| | 00:59 | whatever type of page you're working on
for that matter. But for this example,
| | 01:02 | since I'm already using the Fine Line
theme I'm going to stick with that and
| | 01:05 | I'll select the Photos page and click Choose.
| | 01:11 | And just like previously, I'm now
presented with a page containing text and
| | 01:14 | image placeholders that I can swap out
for my own. Also notice Photos has been
| | 01:19 | added to my Navigation Bar and you
can see the page here in my sidebar.
| | 01:23 | Now some of the placeholders on this page
work just like they did before in the
| | 01:26 | previous two pages we worked with. So
if I wanted to select the title here My
| | 01:29 | Photos and change that to something
else, I just need to type and I could
| | 01:36 | select this text here and maybe I'll
make this, Have camera, will travel, and I
| | 01:43 | can select this text.
| | 01:44 | So yeah those items work just like
before but on the Photo page you have an
| | 01:49 | area of placeholders that work a
little differently than normal placeholders.
| | 01:52 | Notice when I click on any of these
three images, all three get selected.
| | 01:57 | I also get this new Photo Grid control
panel where I can determine how many
| | 02:00 | columns of photo thumbnails I want.
So I can select one column or up to six
| | 02:05 | columns. Kind of like three.
| | 02:09 | I can use the Spacing slider to
determine how close the thumbnails should be
| | 02:12 | together or how far away from each
other they should be. And you can see that's
| | 02:17 | actually just resizing the thumbnails.
You can choose how many Photos you want
| | 02:21 | to have per page and you can actually
add up to 300 photos per page. Although,
| | 02:26 | I think that's a little much myself
and a page like that will take forever to
| | 02:29 | load and it would be hard to navigate through
that many photos on a single page in my opinion.
| | 02:34 | Caption Lines is for choosing how many
lines of text you will have for captions
| | 02:37 | below your thumbnails. I think see we
have some placeholder captions here as
| | 02:40 | well. And to the left of this control
panel we have our Album Style menu and
| | 02:45 | you can select from a wide variety of
Frame styles for the images. And I'll
| | 02:49 | just choose this one here in
the upper right hand corner.
| | 02:51 | I am going to leave everything else
the way it is right now. Now that doesn't
| | 02:54 | mean that I have to have 102 photos on
my page or whatever this number happens
| | 02:58 | to read on your screen. That just
limits me to that particular number. So let's
| | 03:02 | have some of our own images. Now
notice that I can't select any of these
| | 03:05 | individual thumbnails, they are just here as
placeholders for the gallery I'm going to create.
| | 03:08 | Let me go to the iWeb Photos Folder on
my desktop, just pull this down a little
| | 03:13 | bit and I'm going to drag in some
photos. I'm going to use the photos in the
| | 03:17 | Taiwan folder, let's go ahead and open
that up. Let's look at those and I'll
| | 03:23 | grab pagoda. I'm just going to drag
that in. So notice as soon as I do that
| | 03:27 | those other three placeholders have
disappeared. Now I only see the thumbnail
| | 03:31 | for the image I dragged in. Its name
appears below it but I can easily change
| | 03:35 | that to a different caption just by clicking it.
| | 03:42 | And I can continue dragging in pictures.
I can drag them in one at a time like
| | 03:46 | this or I can select several images and
drag them in at once. Let's open those
| | 03:55 | photos again. I'll grab these Chicago
photos. Drag them in. And there they are
| | 04:05 | and as you drag photos in, iWeb moves
the other photos around so you can place
| | 04:09 | your pictures anywhere you want. So if
I wanted to reorder these I simply just
| | 04:11 | need to drag them around.
| | 04:17 | So that's all there is to adding
photos to a Photo Page template. Now let's
| | 04:20 | talk a little bit about what happens
when you publish a photo page. Photo pages
| | 04:23 | are very, very cool. They go far
beyond basic web page design where you just
| | 04:27 | put up a bunch of photos for people
to see. What we have just built here is
| | 04:31 | actually a very
sophisticated web based photo viewer.
| | 04:34 | For this page there will be two ways,
visitors can be your photos. But you will
| | 04:37 | be able to click on individual
thumbnails or they will be able to click the
| | 04:40 | Play Slideshow button to view an
interactive slide show that advances each
| | 04:44 | picture after few seconds and also
allows the visitor to manually control the
| | 04:48 | picture playback. Now I could continue
to sit here and describe this to you or
| | 04:52 | we can publish this photo page and
you can actually see what it's doing.
| | 04:54 | So I'm going to click Publish Site,
or iWeb continue publishing in the
| | 05:04 | background, which will only take a
couple seconds. All right let's click Visit
| | 05:08 | Site Now and see what we have got.
I'll click my Photos link to go to the
| | 05:12 | photos page. And here is the page just
as it looked in iWeb. And I can click a
| | 05:18 | thumbnail to view the photo. Nice
thing about this is I can also navigate by
| | 05:23 | either clicking Next or Previous and I
can also see the thumbnails of the other
| | 05:30 | images in this gallery along the top.
So I can click on them to jump ahead.
| | 05:35 | Visitors to your site can turn that option
on and off by using these buttons at the top.
| | 05:39 | The one icon looks like a photo with
thumbnails above it. The other one looks
| | 05:42 | like just the photo itself. And there
is also the Play Slideshow button, which
| | 05:46 | I'll click and this is very cool. I
see each picture one at a time and then
| | 05:52 | it's automatically advanced to the next
photo after about four or five seconds.
| | 05:56 | If I want to linger on a particular
photo all I have to do is move my mouse to
| | 05:59 | the area below the photo to get the
controller to appear, so I can pause the
| | 06:04 | Playback or click the arrows to go
forward or backwards in the slideshow.
| | 06:07 | Now it's the cool cross dissolve
transition between pictures. If I move my
| | 06:12 | mouse above the photo I get a display
of thumbnail so I can jump right to a
| | 06:16 | particular picture. And you can't
imagine how much work it would take to get a
| | 06:20 | slideshow like this going in other web
design programs. But all we needed to do
| | 06:24 | here was drag pictures into iWeb. Go
ahead and close that and all these ways of
| | 06:30 | viewing the pictures, whether it's
using the thumbnails or viewing a slideshow,
| | 06:33 | they all work regardless of whether
you're publishing to a MobileMe account or
| | 06:36 | not. So it's nice to know you won't
have to give up this functionality if you
| | 06:39 | choose the Publish your site to
a service other then MobileMe.
| | 06:43 | So that's how the Photo Gallery page
works in iWeb '09. Next we'll take a look
| | 06:46 | at how to import photos directly from iPhoto.
| | Collapse this transcript |
| Creating photo pages from iPhoto| 00:00 | So far all the images I have been
adding to my iWeb pages have come from a
| | 00:03 | folder of images on my desktop. But one
of the main advantages of working with
| | 00:08 | iWeb is its tight integration with
the other iLife applications. So in this
| | 00:12 | video, I want to take a look at how to
import images into your pages from iPhoto.
| | 00:16 | So let's leave iWeb for just a minute
and open iPhoto. Now I don't currently
| | 00:21 | have any photos in iPhoto, so I'm just
going to select the ones on my desktop
| | 00:24 | inside the iWeb Photos folder. I'm
just going to hit Command+A to select all
| | 00:29 | and just drag those into iPhoto. All
right, so now I have some photos in iPhoto.
| | 00:35 | Now if you haven't used iPhoto '09
yet, you will probably want to spend
| | 00:39 | sometime with it because it's
packed with new features and new ways of
| | 00:42 | organizing your photos like the Faces
and Places features, but I'm not going to
| | 00:46 | get into that here. That would
be a totally different tutorial.
| | 00:48 | But let's say you have been organizing
your pictures in iPhoto and you have put
| | 00:52 | together a collection of pictures that
you would like to share on the web.
| | 00:55 | But because of the tight integration
within the iLife Suite, you can send photos
| | 00:58 | directly from iPhoto into iWeb and
generate a photo page automatically and you
| | 01:02 | can do this in one of two ways.
| | 01:04 | First let me create a small album by
dragging some pictures into the Source
| | 01:07 | pane. So I'm just going to hold down
the Command key and just select some
| | 01:10 | pictures here. And just drag them into
the Source pane and I'll call that album
| | 01:22 | Scenery. Now you don't have to create
an album before you send photos to iWeb
| | 01:27 | but I just find it's a good
way to keep yourself organized.
| | 01:30 | Now with the album selected and when I
click the iWeb button and notice I have
| | 01:36 | the choice of creating a photo page or
a blog page. We're going to be talking
| | 01:39 | about blogs in the next chapter,
so I'm going to select Photo Page.
| | 01:45 | I'm automatically taken back to iWeb and
asked to choose a template for my page.
| | 01:48 | Notice I'm only given the choice of a
Photo Page. If I wanted I could select
| | 01:53 | the Photo Page in another theme but I
can only select the Photo Page no matter
| | 01:56 | which theme I choose. So I'll select
the Fine Line theme and click Choose.
| | 02:03 | iWeb will take a moment to import the
images and now I have a new Scenery page
| | 02:08 | in my site. You can see it listed
here in the Navigation Bar and this works
| | 02:12 | just like the Photo Page we created in
the previous movie. I can arrange these
| | 02:16 | in any order I like. I can write or
correct captions and I could even add
| | 02:22 | additional photos. So that just shows
you the type of integration you have
| | 02:25 | between iPhoto and iWeb.
| | 02:27 | Now the only thing you can't do is add
photos from iPhoto to an existing photo
| | 02:31 | page in iWeb. Anytime I come from
iPhoto I have to create a new Photo Page.
| | 02:35 | So if I had more photos in iPhoto that I
wanted to add to this particular gallery,
| | 02:39 | I couldn't do that from iPhoto using
the iWeb button. But if my photos are
| | 02:42 | already in iPhoto I can get to them
in iWeb by opening the Media Gallery by
| | 02:47 | clicking Show Media and here under
Photos I have access to my entire iPhoto
| | 02:51 | Library which I can search by Events
or Photos or Last Import and I can drag
| | 02:57 | additional photos into an
existing photo page from here.
| | 03:03 | So basically that's it. When you are
in iPhoto, just select the pictures that
| | 03:07 | you want to import into an iWeb Photo
Page. Again I like to create albums but
| | 03:12 | if you just want to select individual
images and then click iWeb Photo Page,
| | 03:16 | you can do that as well. You can also
select entire events. So if you have an
| | 03:19 | entire event of photos and you want to
send all of those photos over into iWeb
| | 03:23 | Photo Page, just select the event,
click iWeb photo page, pick your theme, and
| | 03:33 | there it is. So that's how we
work between iPhoto and iWeb.
| | Collapse this transcript |
| Adding a MobileMe web gallery| 00:00 | Another photo related feature of iWeb
'09 is the ability to embed MobileMe Web
| | 00:04 | galleries directly into your pages. But what
is a MobileMe web gallery? I'm glad you asked.
| | 00:10 | So the ability to create a MobileMe
web gallery is a feature of iPhoto that
| | 00:14 | works in conjunction with a MobileMe
account. It allows you to quickly and
| | 00:17 | easily share pictures with friends and
family by posting them to your MobileMe
| | 00:20 | account in an attractive
and easy to use interface.
| | 00:24 | You can even set it up so that others
can add their own photos to your gallery,
| | 00:27 | which can be really useful if you know
that several people have pictures from
| | 00:29 | same event. For example, say you're
taking pictures at a party. You could post
| | 00:33 | your photos from the party and invite
others who might have taking pictures
| | 00:36 | there to post their photos to the
same MobileMe web gallery. So all the
| | 00:39 | pictures will be in the same place.
| | 00:41 | And it's really easy to do. Let me
switch over to iPhoto and I'm just going to
| | 00:46 | use my Melbourne event as an example.
So with that entire event selected, I'm
| | 00:50 | going to click MobileMe. Now I have
some choices to make here. I could say the
| | 00:54 | album is viewable by everyone, only me
and I could actually password protect
| | 00:59 | it, if I wanted to. I'm just going to
say everyone in this case. And I can
| | 01:01 | choose to allow Downloading of the
photos or the entire album, Uploading photos
| | 01:06 | via web browser and Adding photos via email.
| | 01:08 | These last two are methods for people
who may visit your MobileMe gallery to
| | 01:12 | upload their own photos to that gallery.
So I'll click Publish. So iPhoto is
| | 01:19 | going to take a moment to publish these
photos to my MobileMe gallery. You can
| | 01:23 | see the progress over here on the
Source pane and again the iLife application
| | 01:27 | pull your MobileMe account
information from what you have entered in System
| | 01:30 | Preferences under MobileMe. So I'm
currently logged in as garrickchowiweb09.
| | 01:37 | So it's done publishing my photos. I
can go visit it by clicking the link at
| | 01:40 | the top of the window. So what I have
created here with a single click is a
| | 01:48 | completely interactive photo gallery
that can be viewed in several different
| | 01:51 | ways. I can click on any of these
thumbnails to see a larger version of the
| | 01:55 | photo. I can navigate through the photos.
Let's go back to album and you'll see
| | 02:04 | in the lower left-hand corner we have
different ways of viewing the thumbnails.
| | 02:07 | We can view them in a Mosaic, as a
Carousel, which is pretty cool. I need to
| | 02:16 | scroll through the photos like this or
you can even view a Slideshow. So this
| | 02:27 | is a full screen slideshow we're
looking at now. And again we have controls to
| | 02:34 | navigate our way through the
slideshow manually, if we so choose too.
| | 02:37 | So this is pretty cool, but what does
this have to do with iWeb? Well, in iWeb
| | 02:44 | you can instantly display MobileMe web
gallery photo albums you published to
| | 02:48 | your account. And anytime your web
gallery is updated by you or someone else,
| | 02:52 | your iWeb version of the page
is automatically updated too.
| | 02:55 | Let me show you how this works. I'm
going to hide iPhoto and go back to iWeb,
| | 03:00 | create a new page by clicking Add Page.
And you see it's a Blank template.
| | 03:04 | Now let's change this to MobileMe Galleries.
I don't really need any text there.
| | 03:14 | I basically just wanted some blank space
to work with here. Let's change the name
| | 03:19 | of this page while I'm at it. So to
add a MobileMe gallery to a web page in
| | 03:25 | iWeb, you want to open your Media
browser, go over to Widgets, which we've
| | 03:30 | already looked at, and I'm going to
grab the MobileMe gallery widget and drag
| | 03:33 | that on to our page.
| | 03:37 | Now because I only have one gallery
so far in my MobileMe Galleries, it's
| | 03:43 | automatically displaying my Melbourne
gallery. If I had more albums I could
| | 03:46 | pick them from this menu. But that's
pretty much all there is to it.
| | 03:51 | I can position this anywhere on my page that
I like. I can make it larger or smaller
| | 03:55 | by grabbing a corner. And I can drag as
many different MobileMe gallery widgets
| | 04:01 | onto my pages as I like. So if I
wanted to have a gallery of MobileMe
| | 04:04 | galleries, I can put them
all in one page like this.
| | 04:07 | Notice that as I skim over my widget
here and it shows me the thumbnails.
| | 04:12 | Very cool. This is exactly how it will work
when I publish the page too. And that's
| | 04:20 | how you add a MobileMe gallery
using the MobileMe gallery widget.
| | 04:23 | Now just to be clear you don't create
MobileMe web galleries in iWeb you create
| | 04:28 | them in iPhoto. But once you've done
that you can display your galleries on
| | 04:31 | your iWeb pages. Now little later in
this chapter I'll be showing you a feature
| | 04:35 | called My Album Pages which lets you
gather your photo pages into a single
| | 04:39 | page, kind of like how the album
pages work on your MobileMe account.
| | 04:42 | But before we do that I want to talk
a little more about adjusting images
| | 04:45 | directly on iWeb and we'll
do that in the next movie.
| | Collapse this transcript |
| Adjusting images directly in iWeb| 00:00 | In the previous movie we looked at how
you can work between iPhoto and iWeb to
| | 00:03 | create your photo pages. Now if you are
an iPhoto user, you may also already be
| | 00:07 | using iPhoto to adjust and correct
your photos. If so you'll be happy to know
| | 00:12 | that many of the same adjustment
tools in iPhoto can be found in iWeb.
| | 00:15 | So if you need to tweak a photo on a
webpage or even if you want to drastically
| | 00:19 | change the appearance of a photo on
your page without altering the original in
| | 00:22 | your iPhoto library, you can do all your
image adjustments from right here in iWeb.
| | 00:26 | I am going to create another new
blank page by clicking Add Page, selecting
| | 00:30 | Blank and Choose. I just want a blank
canvas so that I can put a larger version
| | 00:35 | of an image on screen to work with. I'm
not going to bother changing the movie
| | 00:39 | text placeholders here. In fact, I'm
just going to delete that one, so I have
| | 00:41 | some more room to work with. I'm going
to click Show Media, go to My Photos,
| | 00:47 | and I'm going to find the image called
Grand Hotel and drag that on to my page.
| | 00:53 | And I'm just going to make this larger,
so you can see it better. I'll just
| | 01:00 | hide the Media Browser again. All right,
so this is a nice image, but it could
| | 01:04 | definitely use some fixing up. Let's
click the Adjust button to open the Adjust
| | 01:09 | image window, which we use to adjust
and improve our images. So we have all
| | 01:12 | these things we can adjust in here, but
where to start. Well, it really depends
| | 01:15 | on what you think you need to improve
on in your picture. If you think the
| | 01:18 | colors are off, you probably want to work with
the Saturation, Temperature and Tint sliders.
| | 01:22 | If we think the lighting in the picture
is too dark or light, you want to play
| | 01:26 | around with the Brightness and
Contrast sliders as well as the Exposure and
| | 01:30 | Level sliders. We also have a Sharpness
slider, if you think the image needs a
| | 01:33 | little bit of sharpening. But when
adjusting your pictures probably the first
| | 01:36 | thing you want to acquaint yourself
with is the Histogram, which is this sort
| | 01:39 | of graph looking thing down at
the bottom of the Adjust window.
| | 01:43 | The Histogram represents the dark and
the light tones of the Red, Green, and
| | 01:46 | Blue channels that make up your pictures.
Essentially, darker shades appear on
| | 01:50 | he left side and lighter shades appear
on the right. Generally, a good picture
| | 01:54 | has data appearing across the entire
histogram with some of these mountain
| | 01:58 | shapes spikes appearing around it. The
peaks represent the darker spots of your
| | 02:01 | image and it's fine to have them in there.
| | 02:03 | What you want to try to do is make sure
your histogram is spread fairly evenly
| | 02:07 | all the way across. Having large peaks
together at one end or the other, very
| | 02:11 | likely means your picture is either
very under or overexposed. So it's a good
| | 02:16 | idea to keep an eye on the
histogram as you make your adjustments, but
| | 02:18 | ultimately your eye is going to be
the best judge of how a picture looks.
| | 02:22 | A good place to start in the Adjust
panel is the Exposure slider. Ideally, you
| | 02:26 | want to drag the sliders of e picture's
midtones look acceptable. Midtones are
| | 02:30 | the parts of the pictures that aren't
really shadows and aren't really hot
| | 02:33 | white spots. Notice if I drag the
slider all the way to the left, the picture
| | 02:37 | gets much darker and looks underexposed. All the
way to the right and it looks very over exposed.
| | 02:44 | You want to try to find a place in
between where the contrast in the picture
| | 02:46 | starts to look good to you. Use the
histogram as a guide to make sure the peaks
| | 02:50 | aren't bunched together at one end.
Personally, I think this photo could use a
| | 02:55 | little bit more exposure.
| | 02:57 | Now if you want to be able to make fine
adjustments you can click the icons on
| | 03:01 | either side of any slider in the
Adjust panel. So I can click to advance one
| | 03:06 | step at up at a time. And I think
that looks pretty good. And you may have
| | 03:11 | notice that the histogram now looks like it
slightly shifted to the right or lighter side.
| | 03:16 | Keep in mind that this is only the
first step of the adjustment. Chances are
| | 03:19 | you are not going to be able to
completely improve your picture by just
| | 03:21 | changing the exposure settings.
| | 03:23 | Next, let's take a look at the Level
sliders. As you just saw the Exposure
| | 03:26 | slider lets you adjust the mid-tones of
your picture, the Level slider lets you
| | 03:30 | adjust the dark and light areas of the
picture. The right slider adjusts the
| | 03:34 | light color areas. Notice as I drag it
to the left, the brightest areas of the
| | 03:37 | picture get wider and wider. But the
dark areas remain relatively unchanged.
| | 03:44 | Similarly, if I drag the left slider
to the right, the dark areas get blacker
| | 03:48 | and the light areas don't change as
much. The trick you use usually to drag
| | 03:53 | both sliders inward until they reach
the base of the first mountain peak and
| | 03:57 | the left slider or the dark slider is
pretty much just about there. Let me just
| | 04:01 | drag in a little bit and I can drag
the right slider in a little bit as well.
| | 04:05 | Now if you drag any further than the
base of the first mountain peak, you start
| | 04:10 | losing the picture's data. One
technique I like to use is the purposely drag
| | 04:14 | into too away, I know it looks bad,
and then I start dragging out again until
| | 04:17 | it looks good to me. Again, your eye
should be the best judge. Don't get too
| | 04:21 | caught up in the numbers.
| | 04:23 | Once you adjusted the Exposure and
Level settings your picture should be
| | 04:25 | looking better. Now we also have the
Brightness and Contrast settings at the
| | 04:29 | top of this window. In older versions
of iPhoto these used to be the only way
| | 04:33 | to manually adjust your images. Now
that you have the Exposure and Level
| | 04:36 | sliders both in iPhoto and iWeb, you
probably won't even need the Brightest and
| | 04:40 | Contrast sliders most of the time.
| | 04:42 | But there will be pictures in which
you might find slightly tweaking these
| | 04:45 | sliders can improve your results.
Changing the brightness essentially moves the
| | 04:48 | entire histogram to the lighter or
darker side. You are basically moving the
| | 04:53 | midtones, highlights, and shadows all
together. So you can see it doesn't give
| | 04:57 | you nearly as much control as the
individual Exposure and Level sliders have.
| | 05:02 | Even in this picture I have this very
slight brightness adjustment to lighten
| | 05:07 | the whole picture up a bit. Now the
Contrast slider takes histogram and
| | 05:10 | stretches it out. So if you drag it to
the right, you are getting yourself more
| | 05:14 | contrast or dragging to the left,
sort of smooshes the histogram together
| | 05:20 | giving you less contrast. I'll just add
a little bit of contrast until I think
| | 05:24 | it's a little too bright, now I'm just
going to back the Level slider off a little bit.
| | 05:29 | Now another thing Adjust panel lets
you do is to correct the colors of your
| | 05:32 | pictures. Depending on your camera you
may find your pictures tend to be little
| | 05:35 | on the reddish side or they might look
a little green or blue. You can usually
| | 05:39 | fix these sort of issues with the
Saturation, Temperature, and Tint sliders
| | 05:43 | found in the Adjust window. You will
probably find you get the best results if
| | 05:46 | you start with the Tint
slider and move upwards from there.
| | 05:49 | The Tint slider adjusts the overall
colorcast of the picture. Moving it to the
| | 05:52 | right, moves things towards the
green into the spectrum; to the left, and
| | 05:57 | everything gets redder. How you use
this is going to depend on your subject.
| | 06:01 | In this particular picture the tint
actually looks a little on the red side to me.
| | 06:05 | But if you are not sure about your
picture's tint, just drag the slider to the
| | 06:08 | extreme and see what the effect is. I'm
going to just drag mine slightly to the right.
| | 06:13 | Next, the Temperature slider adjusts
the photo in the Blue/Orange spectrum.
| | 06:17 | Dragging to the left makes the picture
bluer or cooler; dragging to the right
| | 06:21 | makes it warmer or more orangish red.
Now dragging to the left brings up the
| | 06:25 | blue of the sky a little more, but
also gives the whole image a blue cast.
| | 06:29 | I think it looks better in this case, if I drag
to the right a little bit to warm the picture up.
| | 06:34 | Last, you can use the Saturation
slider to increase or decrease the intensity
| | 06:38 | of the color tones that you just set.
Dragging to the right really makes the
| | 06:41 | colors pop. And in many cases it can
make it look unnatural, if you drag too
| | 06:46 | far. Dragging to the left eventually
drains the picture of all color and you
| | 06:50 | end up with a grayscale image. I'm
just going to add a little bit of
| | 06:52 | saturation. All right, looking good.
I'm going to reset the image back to its
| | 06:58 | original settings. Hit the Rest
Image button to see the original.
| | 07:03 | So if you are not comfortable with
moving all these sliders around just yet,
| | 07:06 | you can try using the Enhance button,
which is another feature from iPhoto.
| | 07:09 | And you can see by the tool tip that
appears there, this enhances colors
| | 07:12 | automatically. So let me go ahead
and click that. So the enhance feature
| | 07:17 | examines among other things the
picture's light levels, color balance and
| | 07:20 | saturation and adjusts everything to give
you a better-looking version of your picture.
| | 07:25 | Sometimes that results in no
significant change in your picture, but more often
| | 07:28 | or not the results are better than what
you started out with. So it's going to
| | 07:31 | be up to you to determine whether you
want to manually adjust your image or hit
| | 07:35 | the enhance button or you could do both.
Hit the enhance button first and start
| | 07:38 | playing with the sliders. Now the last slider
we hadn't looked at yet is the Sharpness slider.
| | 07:43 | Basically, this slider works by
increasing the overall contrast of individual
| | 07:46 | pixels in your picture giving you the
illusion of improved focus. As I drag to
| | 07:50 | the right notice that image starts
look a lot crisper. You want to avoid
| | 07:54 | dragging too far to the right, or else
you will start seeing weird hallows and
| | 07:57 | another strange looking pixels in your
picture. Just drag enough to the right
| | 08:00 | to make your picture look a little sharper.
| | 08:02 | Now don't be fooled by its name though.
If you have a blurry or out of focus
| | 08:05 | picture, there is a very little the
Sharpness slider can do. But you can also
| | 08:09 | use the sharpness slider in the other
direction too. If you want to make a
| | 08:12 | background picture blurry, so that the
text on top of it shows up, better just
| | 08:15 | drag this slider all the way to the
left or just as far as you want it to look
| | 08:18 | the way you want it to look. But in this
case I'm just going to make it a little sharper.
| | 08:23 | For the most part the Sharpness slider
should be the last tool you use when you
| | 08:26 | are adjusting your pictures. When
you perform certain edits like color
| | 08:29 | adjustments or hitting the Enhance
button you might end up slightly blurring
| | 08:33 | your image. So it makes sense to wait
until you are done with all of your edits
| | 08:36 | before adjusting the sharpness.
| | 08:38 | So that's in the Adjust Image window.
Go ahead and save this page and next
| | 08:43 | we'll take a look at
adding movies to a web page.
| | Collapse this transcript |
| Creating a movie page| 00:00 | In this day and age of inexpensive video
cameras, webcams and videophones, there is
| | 00:05 | bound to be sometimes when you are
going to publish a movie on your website to
| | 00:07 | share with other people. And it turns
out to adding a movie to a page on iWeb
| | 00:11 | is no tougher than adding a photo.
| | 00:13 | Now the actual task of getting the
movie on your Mac in a first place is up to
| | 00:16 | you. I can't really go into all the
ways here, because you could be using a
| | 00:20 | video camera or capturing the video
through an iSight webcam, or downloading
| | 00:24 | the video from the Internet or even
importing a movie you edited in iMovie.
| | 00:27 | I'll talk about importing photos from
iMovie in the next video, but for now
| | 00:31 | let's pick up the things from a point
where you already have a movie on your
| | 00:34 | computer. I've copied the folder iWeb
movies to my desktop and it contains a
| | 00:38 | couple of short movie clips. Now being
an Apple product, iWeb is happy as to
| | 00:42 | have QuickTime compatible movies. But
QuickTime can work with just about any
| | 00:46 | video format these days, so most
movies you import should work. You can also
| | 00:50 | check out apple.com/
quicktime for supported file types.
| | 00:53 | Now also worth noting, since you're
going to be adding your movie to a webpage,
| | 00:57 | you don't want the file size to be too
large or else your visitors are going to
| | 01:00 | spend a lot of time just downloading
your movie. Apple recommends that your
| | 01:03 | movies not be much larger than 10
megabytes, but you'll be a better judge of
| | 01:07 | what your visitors will be able to tolerate.
| | 01:08 | Technically, you can drag a movie file
into any page, but your best bet is to
| | 01:12 | create a movie page which gives you a
nice page layout to display your movie
| | 01:15 | and also write a little bit of text
describing the clip. So in iWeb, let's
| | 01:19 | click the Add Page button and I'm going
to choose the Movie template and click
| | 01:24 | Choose. And just like with the other
templates I have some text placeholders
| | 01:31 | and I also have this Movie placeholder
here. Now this Movie has also been added
| | 01:34 | to my navigation bar. I'm going to
change its title to Southern Utah and I'm
| | 01:39 | not going to bother replacing
any of the Southern text right now.
| | 01:42 | So to add my video clip, I just need to
replace this movie placeholder with the
| | 01:45 | Movie in the folder on my desktop. So
I'm going to grab Southern Utah.m4v, drag
| | 01:49 | right over the placeholder, and there
it is. That's really all there is to it.
| | 01:56 | And now I can play the movie right
here on iWeb. And you get the idea.
| | 02:14 | Now the movie I've just added is in
wide screen format, while the placeholder
| | 02:18 | was in standard 4:3 format. So I
might want to raise this movie up a bit to
| | 02:22 | line it up with the top of this
headline here. Now once way I can do it is to
| | 02:26 | click the Movie, hold down Shift and
click the Headline and go to the Arrange
| | 02:31 | menu and choose Align Objects > Top.
| | 02:34 | But in this case, if I deselect, you
can see that the top of the text box is
| | 02:38 | not only the top of the letter, so the
movie to me kind of looks like it's a
| | 02:42 | little too high right now. So I can
select that movie and just tap it down with
| | 02:45 | the Arrow key on my keyboard until it looks
good to me. And right about there should be fine.
| | 02:50 | So it's pretty darn easy to add a movie
to an iWeb page. And you do have a few
| | 02:53 | customization options you can apply
once you've embedded your movie onto your
| | 02:56 | page. You can resize the movie by
selecting it and dragging its corner handles.
| | 03:01 | But try not to make the movie bigger
than its actual size, because it will
| | 03:05 | probably look pixelated and its quality
won't be that great. Let me just undo that.
| | 03:10 | If you want your movie to be in a
different dimension, you really should create
| | 03:13 | and save it that way before bringing
it in to the iWeb. You can also open up
| | 03:17 | the Inspector and go to the Metrics
Inspector to see the current size of the
| | 03:22 | video and you can click Original
Size to see the movie in its native
| | 03:25 | dimensions, but that's probably just
too large for this particular example, so
| | 03:29 | I'm just going to choose Undo Original
Size, set it back to the size that looks
| | 03:32 | better on this page.
| | 03:33 | And also with your movie selected, you
can go to the QuickTime Inspector and
| | 03:37 | here you'll find controls for adjusting
where the movie starts and stops.
| | 03:40 | So if you wanted to just start, say, 10
seconds into the video, you can drag the
| | 03:44 | Start slider over and you wanted to end,
27 seconds in the video, you can drag
| | 03:49 | the End slider in. But I think it'll
be better to just edit out the parts you
| | 03:53 | don't want before you bring a movie into iWeb.
| | 03:56 | But if that's not an option, you can
use the Start and Stop sliders. And you
| | 04:00 | can also set a Poster Frame, which is
a still frame that represents the movie
| | 04:03 | on your page before your visitors click
the Play button. So as you can see the
| | 04:07 | first frame of this movie is just a
black screen, which isn't very interesting.
| | 04:11 | So you can use the Poster Frame slider
to scrub through your movie to find the
| | 04:14 | shot that better
represents what the movie is about.
| | 04:17 | Kind of like that shot there. And you
also have options like Autoplay, which
| | 04:23 | means the video will start playing as
soon as the page loads. Loop, which means
| | 04:26 | it will play in a continue loop,
meaning once it gets to the end of the video,
| | 04:29 | it'll go to the beginning and play it all
the way through again, and on and on and on.
| | 04:33 | And the one that's checked by default
is Show movie controller. If you want to
| | 04:36 | give your visitors ability to pause the
movie or fast forward or jump to other
| | 04:40 | sections, you can leave that checked.
If you want to force them to watch the
| | 04:43 | movie start to finish, uncheck your movie
controller. But I'm going to leave that on.
| | 04:48 | Now one last thing to mention about
adding movies in this way is that you
| | 04:51 | should try to avoid placing objects
on top of the movie. So for example, I
| | 04:54 | could just grab shape here and add
something like that. Now that's okay here in
| | 05:00 | iWeb, well, I'm not actually obscuring
my movie, but this is just to illustrate
| | 05:04 | that you should not put objects on
top of your movies, even though you can,
| | 05:07 | because most web browsers consider
movies to be the top layer object on the
| | 05:10 | page. So even if you place a shape or
photo over the movie it might not show up
| | 05:14 | like that in the visitors web browser.
| | 05:16 | Now you might want to get fancy and
maybe add a frame around this by maybe
| | 05:20 | drawing a rectangle, around or like
so, going to your Graphics Inspector,
| | 05:28 | turning off Fill, then turning on
Picture Frame, something like that. Now this
| | 05:35 | is okay, because the object is not
actually overlapping the movie, or you just
| | 05:40 | have to make sure it doesn't overlap the movie.
| | 05:41 | So you can do certainly do something
like that if you wanted to do, but just
| | 05:44 | make sure you don't try to design
your page in such a way that objects are
| | 05:47 | overlapping the movie, because chances
are the movie will still pop to the top.
| | 05:50 | I'm just going to select
the frame and delete it.
| | 05:54 | So that's how easy it is
to add a movie to iWeb page.
| | Collapse this transcript |
| Importing movies from iMovie| 00:00 | In this movie I would like to show
you how to get videos you have edited in
| | 00:03 | iMovie into an iWeb page. And it's
actually a really simple process, but
| | 00:07 | it's not completely obvious how to do it.
So let's take a look by firing up iMovie.
| | 00:11 | And I'm going to create a new project
and call this one Southern Utah, leave it
| | 00:20 | at Widescreen for aspect ratio and
I'm going to have no theme and I'll click
| | 00:24 | Create. This is not a tutorial on
iMovie, so I'm not going to get into great
| | 00:30 | detail here about that. But let's
assume that we have three clips that we want
| | 00:33 | to import into iMovie and then send to iWeb.
| | 00:36 | Now inside the iWeb movies folder on my
desktop that I copied from my Exercise
| | 00:40 | Files folder, there's a folder called
SU clips for Southern Utah clips. And in
| | 00:44 | here are the three clips that I want to
import. So I'll choose File > Import >
| | 00:51 | Movies and on my desktop I'll go into
iWeb movies and SU clips. Now I'll just
| | 00:58 | hold Shift key to select all three of
these clips. I'll create a new event
| | 01:02 | called SU and I'm going to copy these
file in the iMovie and click Import to do so.
| | 01:12 | So now I have these three clips in iMovie.
I'm just going to click in my Event browser,
| | 01:16 | hit Command+A to select all
three clips and drag them into my project.
| | 01:21 | Now iMovie is going to give me this tip
saying, I'll achieve better results by
| | 01:24 | individually adding only the best
segments of my video, which is true.
| | 01:27 | In most cases you don't want to drag in your
clips in their entirety. But I've already
| | 01:31 | set up these clips to contain the
parts of the video that I want to show.
| | 01:35 | So I'll click Continue. I already have my
transitions area open here so I'm going
| | 01:39 | to add Fade to Black at the end. Maybe
one at the beginning and maybe couple of
| | 01:46 | Cross Dissolves between the clips.
And let's see what that looks like.
| | 01:56 | Let's jump ahead a little bit here.
Jump ahead again to check out my transitions.
| | 02:10 | Now I'm going to show this movie on an
iWeb page. Under the Share menu,
| | 02:15 | we've options to send the movie to iTunes,
to iDVD, but no iWeb. So what we're going
| | 02:19 | to choose in this case is Share >
Media Browser. Now we've already seen the
| | 02:24 | Media Browser in action in iWeb.
It stores your photos from iPhoto, your music
| | 02:28 | from iTunes and your movies from
iMovie. But it will also find other media
| | 02:32 | files from other locations on your
computer by default and you can specify
| | 02:35 | other locations if you want.
| | 02:36 | But in this case we've chosen Share. So
when you choose Share > Media Browser,
| | 02:41 | you get this handy-dandy chart that
will figure out which settings to use.
| | 02:44 | If you roll your mouse over the Info
icon, you'll get a little bit of more
| | 02:48 | information about the file size that
it'll be generating depending upon which
| | 02:52 | size you choose. I'm going to go with
Medium, which is already selected here.
| | 02:56 | That's a good size to view the movie on
iPods, Apple TVs, on your computer, on
| | 03:01 | a MobileMe web page or on YouTube.
| | 03:03 | We could choose multiple sizes, if we
want. In fact, I've click Mobile one as
| | 03:07 | well so that you can see what it looks
like in the Media Browser and I'll click
| | 03:11 | Publish. So now our movie is creating
the Medium version of the movie. And now
| | 03:17 | it's generating the Mobile version of the movie.
| | 03:19 | So for each different size option
that you've chosen, iMovie will have to
| | 03:24 | generate that size movie individually.
So the more size options you choose,
| | 03:28 | the longer the process will take.
But now the movie is in my Media Browser,
| | 03:32 | let's go back to iWeb and take a look.
| | 03:34 | I am on the movie page that I created
previously. I'm going to click Show Media
| | 03:39 | to show the Media Browser, and I'm
going to go over to the Movies. I notice
| | 03:43 | here under iMovie, in the Media Browser
we can actually see projects that we've
| | 03:49 | created in iMovie. But some of these,
in fact, most of these in my case,
| | 03:54 | you will notice it says this iMovie
project can't be used because it hasn't been
| | 03:58 | prepared for showing yet. To prepare
for showing, open it in iMovie and choose
| | 04:01 | Share > Media Browser. That's
exactly what we did with our Southern Utah
| | 04:04 | project, which is why those videos are
now available. Notice I have both the
| | 04:08 | Medium version and the Mobile
version available at this point.
| | 04:10 | So you'll be only be able to grab your
iMovie from the Media Browser, if you've
| | 04:13 | chosen Share > Media Browser in iMovie
and if chosen at least in one size to
| | 04:17 | output. So in this case I'm going to go
with the Medium size and to add this to
| | 04:21 | an iWeb page, I'll simply drag it onto my page.
| | 04:25 | There it is. I'll just line it up with
previous one. And now this is just like
| | 04:30 | having any other movie on my page.
I can open my Inspector. I go to my
| | 04:35 | QuickTime Inspector where you can pick a
different Poster Frame, right there, and
| | 04:41 | I've all these options available to
me that we talked about in the previous movie.
| | 04:44 | I can even play it right here in iWeb.
| | 04:53 | So that's how we add movies from
iMovie to an iWeb '09 page. It's not as
| | 04:56 | direct as the option to, say, create
an iWeb photo page directly from iPhoto
| | 05:00 | like I showed you earlier in this
chapter, but the nice thing is that the movie
| | 05:04 | is now stored in the Media Browser and
you can reuse it on other pages or drag
| | 05:08 | it back into another iMovie project or
even use it in GarageBand or iDVD.
| | 05:12 | The media that you find in the Media
Browser is usually available to all the other
| | 05:16 | iLife applications.
| | 05:17 | So take some time, play around with
exporting movies to the Media Browser and
| | 05:20 | you'll be used to the workflow in no time.
| | Collapse this transcript |
| Adding album pages| 00:00 | So over the course of these movies
we've now created several pages for our
| | 00:03 | website and you might have noticed that
the navigation bar is starting to get a
| | 00:07 | little crowded. Not to worry though.
The navigation bars in iWeb templates all
| | 00:11 | expand, if you create enough
pages to warrant another line of links.
| | 00:14 | But there's a feature in iWeb that you
can use to better organize some of your
| | 00:17 | pages together. And what am I referring
to is the My Albums Page templates.
| | 00:22 | In a nutshell My Albums Pages allow you to create
an index page for your photo and movie pages.
| | 00:28 | So instead of having links for each
separate photo and movie page, you can have
| | 00:31 | a single page with interactive
thumbnails linking your visitors your various
| | 00:35 | photo galleries or movies.
| | 00:36 | I'm going to show you how to do this.
I'm going to click New Page and within
| | 00:42 | Fine Line template or whatever template
you happen to be using, you'll find My
| | 00:45 | Albums. I'll go ahead and choose that.
| | 00:48 | So you can see, this is what I was
talking about. Now that I have added another
| | 00:54 | page, the navigation bar has
expanded into a second line, because there's
| | 00:58 | simply not enough room in one
line to contain all my pages.
| | 01:00 | What does My Albums page allows me to
do is to drag all my other photos and
| | 01:05 | movies pages to My Albums to organize
them. So with My Albums selected, I'm
| | 01:09 | actually going to move this down to
the bottom of the list here, in the
| | 01:12 | sidebar. I can now drag Movie and
Photos pages. And so I have this Photo page,
| | 01:17 | here is my favorite photos, I'm going
to drag that down and again you can see
| | 01:20 | this line that appears which allows you
to reposition your pages. But if I drag
| | 01:24 | that over My Albums, notice that My
Album highlights. Now I can either allow it
| | 01:29 | to highlight or it can drag down and
to the right and you see that the lines
| | 01:33 | still appears down below My Albums.
| | 01:35 | Now you want to make sure you don't
drag it all the way to the left, otherwise
| | 01:38 | iWeb will just think, you're trying to
move the page like so and that's just
| | 01:42 | below My Albums. And it's still
listed here in the navigation bar.
| | 01:46 | What I want to do is put Photos into
My Albums like so. So now I notice that
| | 01:51 | the Photos is indented in there and
it's not been removed from my navigation
| | 01:54 | bar. If I go back to My Albums page,
notice that Photos has now been added as
| | 01:59 | an album on this page. And I'll
continue doing this with say Chicago, drag that
| | 02:03 | over My Albums. Grab Scenery, drag
that over My Albums. Generally, any page
| | 02:11 | that has this sort of book icon next
to it, you can drag into My Albums.
| | 02:16 | So I can drag my MobileMe album in
there, I can drag my Blank page in here.
| | 02:21 | I've got a movie page here that can go
into My Albums. So if I go look down,
| | 02:26 | here are the four items listed in My
Albums and notice that skimming over my
| | 02:32 | photos, allows me to quickly preview
each gallery and my visitors will be able
| | 02:36 | to do the same thing.
| | 02:39 | Within My Albums you can also rearrange
the order of these items so if I wanted
| | 02:43 | Movie to be last, I can drag that down,
you can see that rearranged the items
| | 02:47 | here. Selecting any of these thumbnails
gives me my Media Index options.
| | 02:52 | I can choose how many Columns of thumbnails
I want between one, two, three and four.
| | 02:56 | Spacing, in terms of how large or
small I want those thumbnails to be.
| | 02:59 | We can even choose different Animations,
what happens when we place our mouse
| | 03:03 | over the thumbnails. By default, as we
saw, it was the Skim Animation, but I
| | 03:07 | can choose something like Fade Through
Black, which fades the images to black
| | 03:13 | and then fades the next one in. And
you can play around with some of these
| | 03:18 | different animations that are
available. Here is the Push animation.
| | 03:22 | I kind of like the Skim capability.
That's why I keep that selected. And here
| | 03:29 | we can also choose to show the title
of the album, show the number photos
| | 03:34 | within that album or in the case of
movies, the duration of the movie. And we
| | 03:38 | can allow subscriptions. Now we'll
talk about subscriptions in the next
| | 03:41 | chapter. And we also have Index style,
so we can choose different photo frames
| | 03:48 | for the thumbnails. Now
I'll go ahead and close that.
| | 03:55 | So notice that any pages that are
listed in the My Album page are not displayed
| | 04:00 | in the navigation bar. So you can
greatly unclutter your navigation bar by
| | 04:03 | using My Albums pages.
| | 04:05 | So if your navigation bar starting
to look a little crowded, consider
| | 04:08 | organizing your photo and movie pages
into a single album page. Or if you want
| | 04:12 | to be even more organized, maybe
create a My Albums page just for your photo
| | 04:16 | galleries and a My Albums
page just for your movie pages.
| | 04:19 | It's entirely up to you, but again if
your website is starting to grow, this is
| | 04:23 | a great way to organize them and make
it easier for your visitors to navigate
| | 04:26 | through your site.
| | Collapse this transcript |
|
|
4. Blogging and PodcastingWhat is a blog?| 00:00 | In this chapter we are going to talk
about blogs and podcasts. I'm hoping that
| | 00:04 | you have at least heard of these two
terms before and don't think I'm just
| | 00:06 | making up words. But just in case you
don't know what they are, I'm going to
| | 00:09 | spend a little bit of time explaining
blogs and podcasts. The two are actually
| | 00:13 | sort of similar. We'll start by talking
about blogs. What they are. How to set
| | 00:16 | one up in iWeb and how to publish and
update it, then we'll move on to podcast.
| | 00:21 | So let's begin with blogs. Blog is
short for web log, but nobody really says
| | 00:26 | that anymore these days, everybody just
says blog. And it's basically a journal
| | 00:29 | that's posted online for people to read.
These days it seems like just about
| | 00:33 | everyone has a blog, and that's really
one of the great things about the web.
| | 00:36 | Anyone can post their own opinions and
thoughts on just about any topic they
| | 00:40 | want, and anyone interested in reading
those journals can do so. What makes a
| | 00:44 | blog different than a basic webpage?
Glad you asked. True, you could open up
| | 00:48 | just about any page template in iWeb,
type a couple of paragraphs of your
| | 00:52 | thoughts and call it a journal, but
blogs are special in that they allow people
| | 00:55 | to subscribe to them. Meaning if
someone is interested enough in your blog,
| | 00:59 | they can use special software to
subscribe to your blog, so they'll know there
| | 01:02 | is a new entry as soon as you update your blog.
| | 01:04 | This ability for people to subscribe to
your blog makes blog attractive to not
| | 01:08 | just individuals, but also to
companies and businesses who more and more are
| | 01:12 | taking advantage of the interactive
aspects of the web, and doing things like
| | 01:15 | maintaining their own blogs to keep in
touch with their customers or to draw in
| | 01:19 | new business. Now typically blog
entries are organized on a single page with
| | 01:23 | the newest entries at the top of the
page. Visitors to your blog can quickly
| | 01:26 | scan the entry titles, and maybe the
first few sentences of the entry. If they
| | 01:30 | want to keep reading they can
click a link to read the entire entry.
| | 01:33 | For example, if I go to apple.com/
mobileme/news, here you will find a blog
| | 01:39 | about using MobileMe. So here you can
see a list of all the entries in this
| | 01:44 | blog. Notice that each entry is dated
and actually this is a great site to
| | 01:48 | visit for news and tips on using
MobileMe and iLife apps in general. Now the
| | 01:52 | articles in this particular blog are
kind of a typical of other blogs in that
| | 01:56 | all the entries are short enough that
they appear in their entirety on the main
| | 01:59 | blog page. Blogs longer entries
typically displayed just the first few
| | 02:03 | sentences or paragraphs of an entry,
and then provide a link to read the entire
| | 02:06 | article on its own page. Usually you
will see something at the bottom of the
| | 02:10 | entry that says something like read more,
or continue reading, or something like that.
| | 02:14 | Now the MobileMe blog here still
works in that way in that I can click in
| | 02:17 | entries headline, and then read that
article on its own page, but I had already
| | 02:23 | seen this article in its entirety on
the front page. But the advantage of each
| | 02:26 | article having its own page is that
you can bookmark this page so you can
| | 02:29 | always find this exact article again.
Due to the nature of blog pages pushing
| | 02:33 | older entries down the main blog page
until they are moved into an archive, you
| | 02:37 | probably won't always be able to find
this article on the front of the MobileMe
| | 02:40 | blog. But now that I have it on its
own page, I can bookmark this permanent
| | 02:44 | page and come back to it anytime I
want. You can see this is the permanent
| | 02:48 | address for this entry.
Let's go back to the main page.
| | 02:52 | Notice this button that says Subscribe
to Updates with the RSS icon next to it.
| | 02:57 | When you create a blog with iWeb it
automatically creates what's known as an
| | 03:00 | RSS feed. RSS stands for Really Simple
Syndication, and RSS feeds provide the
| | 03:06 | titles and summaries for each blog
entry in a simple list format without any
| | 03:10 | special formatting or presentation.
It's basically the quickest way to scan a
| | 03:13 | blog's entry to see if there is
something you want to read. So when I click
| | 03:16 | Subscribe to Update here in Safari,
I'm taken to the RSS feed. Unlike some
| | 03:22 | other web browsers, Safari is actually
an RSS reader as well as a web browser.
| | 03:26 | So I can view and subscribe to any RSS
feed I want without a separate program,
| | 03:30 | and just to give you a brief rundown
of Safari's RSS capabilities, I can use
| | 03:34 | the Article Length slider to determine
how much of an article I want to see on
| | 03:38 | this page. Right now it's at the maximum,
but if I drag to the left you can see
| | 03:42 | the entries are getting shorter, and
if I drag all the way to the left, I'll
| | 03:47 | only see the article headlines and the
first sentence or so of the article itself.
| | 03:52 | Seeing less of the articles can make
it easier to get an overview of all the
| | 03:55 | entries. Let's drag that back up. I can
also sort the list of entries by Date,
| | 04:01 | which is the default, Title, Source
or just the newest entries. We can also
| | 04:07 | search by articles that were published
today, which are none. Yesterday still
| | 04:11 | no articles. In the last seven day,
one article, this month and last month.
| | 04:17 | I'm going to switch it back to the defaults
of All and Sort By Date. There is even
| | 04:21 | a Search Article's field up here to
search the articles for specific words or
| | 04:25 | phrases. So for instance, if I wanted
to find any articles on the iPhone, I
| | 04:28 | could type that in, and now I see all
the articles that mention the iPhone, and
| | 04:35 | I'll clear that search field.
| | 04:38 | But the real power of RSS feeds is the
ability to subscribe to them. When you
| | 04:42 | subscribe to a blog or any website with
an RSS feed, it means you don't have to
| | 04:46 | remember to check back periodically to
see if there is new content available.
| | 04:50 | Safari will check for you and
automatically display the number of new entries
| | 04:53 | or articles that have been posted since
your last visit. Subscribing to an RSS
| | 04:57 | feed in Safari is as easy as
bookmarking the page. So if I want to subscribe to
| | 05:01 | this blog, all I have to do is add it
to my Bookmarks Bar. First I have to see
| | 05:05 | my Bookmarks Bar. First I'll choose
View > Show Bookmarks Bar, and I can just
| | 05:09 | drag its address icon into my
Bookmarks Bar, and I'll leave its default name,
| | 05:15 | click OK, and you can see it's now been added.
| | 05:18 | Then I can go to Safari's RSS
preferences by choosing Safari Preferences, RSS,
| | 05:25 | and here I can specify how often I want
Safari to check for new articles.
| | 05:29 | I can check for updates Every 30 minutes,
Every hour, Every day or Never, meaning I
| | 05:33 | would manually choose the check for new
articles. I can specify how Safari will
| | 05:37 | determine whether articles have been
read or not. I can choose as soon as view
| | 05:41 | them are in the RSS page they have
been read, or after actually clicking them
| | 05:44 | to go to their permanent pages that
would mark them as read. By default Safari
| | 05:47 | will highlight unread articles making
them easier to find, and I can choose to
| | 05:51 | remove articles after two weeks, after
one day, after a week, and so on and so
| | 05:55 | on. I'll go ahead and close preferences.
| | 05:58 | So now anytime a new article is added
to the MobileMe blog, I'll see the number
| | 06:02 | of new articles appear next to the
icon in my bookmarks bar. Kind of like you
| | 06:06 | see next to the New York Times
technology blog that I have previously
| | 06:09 | subscribed to, let me go ahead and
click on that. This is the view that you
| | 06:13 | will find at tech.nytimes.com. So this
is the technology page of the New York
| | 06:20 | Times, and in the address bar again I
can see an RSS icon, clicking that shows
| | 06:25 | me the feed that we were just looking
at. Now I previously subscribed to this
| | 06:28 | technology blog simply again by
dragging its icon down into my bookmarks bar,
| | 06:33 | don't need to do that again since it's
already right here, and you can see that
| | 06:36 | I have 114 articles that I haven't read,
so I'm kind of behind on reading my
| | 06:39 | New York Times articles here. But again,
this is a great way to quickly scan
| | 06:43 | through headlines without having to
scan around an entire webpage, and be
| | 06:46 | distracted by blinking ad banners.
| | 06:50 | Anytime I see that a number of new
articles have been added, I can visit the
| | 06:53 | site to scan through them. Now this
feed actually contained advertisements as
| | 06:57 | you can see here Melt my Wrinkles Away,
2009 Credit Score, and so on, and that
| | 07:01 | just gives me an opportunity to demo
how great it is that you can easily
| | 07:04 | customize your feed display by
dragging the Article Length slider to the left
| | 07:09 | until those adds disappear. So this may
seem like I have been talking a little
| | 07:12 | bit more about RSS feeds and
subscribing to them, than about blogs, but really
| | 07:17 | the two go hand in hand.
| | 07:18 | Basically you set up your blog in iWeb
then you update it whenever you like and
| | 07:22 | publish your updates. People who
visit your blog in Safari or another RSS
| | 07:26 | browser can subscribe to your blog to
be alerted anytime you post a new entry,
| | 07:30 | or they can just choose to skip
subscribing and visit your blog whenever they
| | 07:33 | remember to do so on their own, and
that's the gist of it. In the next video
| | 07:37 | we'll actually setup a blog in our iWeb
site and add a couple of entries to see
| | 07:41 | how this whole thing works.
| | Collapse this transcript |
| Setting up a blog| 00:00 | Adding a blog to your iWeb sites starts
off like adding any other page to your
| | 00:03 | site. Click the Add Page button to get
a list of the page themes and templates,
| | 00:09 | and then select a blog template of your
choice. I'm going to go with Fine Line,
| | 00:12 | since that's what I have been using this
whole time, and then I'll select Blog and Choose.
| | 00:19 | Now notice what's happened here. I now
have a blog page listed in the sidebar,
| | 00:23 | and underneath that I have Entries and
Archive. I also have this new pane at
| | 00:27 | the top of the window, which lists
all of my blog entries. I only have one
| | 00:31 | entry so far, so only one item is
listed. So let's make a blog entry and see
| | 00:35 | how this all works. I'm going to
replace the default placeholder text here with
| | 00:40 | "A Long Afternoon in Chicago". Now iWeb
automatically enters the current date,
| | 00:47 | so I don't have to enter that myself,
and then this is just regular placeholder
| | 00:50 | text down here, so I can replace with
my entries for today's blog. So there is
| | 00:58 | my entry, of course, you can make your
entry as long or short as you like, you
| | 01:01 | don't have to type exactly what I
typed here if you are following along.
| | 01:03 | So let's go ahead and add a picture to
replace the placeholder. I'm going to go
| | 01:07 | to my iWeb photos folder and pop up on
Chicago, and I'm going to grab the one
| | 01:13 | called buildings, and drag that over
to the placeholder, and there it is.
| | 01:19 | And there is my first entry, and you can
see it listed here at the top of the
| | 01:22 | window. I want to add my next entry,
to do so, I'll click Add Entry for a new
| | 01:27 | blog page, and then I'll start typing.
Then we'll replace the placeholder text,
| | 01:36 | and I'm going to add tomorrows date
here by double clicking the date field, and
| | 01:41 | just select the date, and I can
select it up here or I can use the arrow
| | 01:45 | buttons down here. So I'll chose April 8th
and then I'll replace the placeholder text.
| | 01:54 | All right, so there is my text, and
again let's drag in another photo.
| | 01:58 | I'll drag in opera_house this time. Okay,
so there is entry number two. So both of
| | 02:04 | these entry pages are the individual
pages that people will see when they click
| | 02:07 | on the links on the main blog page.
So let's go over and take a look at the
| | 02:10 | main blog page. This is a page that
will come up when a visitor clicks on the
| | 02:14 | blog link in my navigation bar. So
here I see a list of the entries I've made
| | 02:19 | so far, very similar to what we saw in
the previous movie when we checked out
| | 02:22 | the blog at apple.com. We see the
title, the date and the few paragraphs or
| | 02:27 | lines of the articles, and those are
the articles that are listed with the most
| | 02:30 | recent entry on top.
| | 02:32 | So you'll probably want to spend some
time customizing this page too. I'm going
| | 02:34 | to change this title to My Travel Blog,
maybe change this text to a sub title,
| | 02:44 | and maybe I'll grab another photo,
I'll open the Taiwan folder and will grab
| | 02:49 | Grand Hotel, drag that in there,
looks good. And I can even customize the
| | 02:55 | layout of the blog listings by
clicking any of the entries down here. Notice
| | 02:58 | that opens up the blog summary panel,
and here I can choose whether I want to
| | 03:02 | show photos or not. I can choose the
Photo size, the Proportion for the photos,
| | 03:10 | whether I want them in their
Original proportions, Square, Landscape or
| | 03:16 | Portrait, and I prefer Landscape in this case.
| | 03:19 | I can choose how much space is going
to be between the text and the Photos
| | 03:22 | using the Extra space menu. You can see
by adding it pushes the text away, or I
| | 03:27 | can move them closer, and we also have
several Placement options here. So as I
| | 03:33 | choose different Placement options,
you will see some changes. This moves the
| | 03:38 | picture to the right, like so. The
bottom selection shows you the large photo
| | 03:49 | with the text underneath.
| | 03:52 | So this is totally up to you, just
choose whichever layer you like the best for
| | 03:55 | your blog. Now the main blog page
will display a summary of up to 50 blog
| | 04:01 | entries. Although you can determine
exactly how many will appear here in the
| | 04:04 | RSS Inspector, so if you pop in the
Inspector and click RSS, you can choose how
| | 04:11 | many excerpts to show on one page, so
you can up that all the way to 50 if you
| | 04:14 | like. Here is where you can also
determine how long the excerpt from each
| | 04:18 | article is. If I want to make that
shorter or longer I can do so here.
| | 04:23 | Depending on how many excerpts you are
showing, let's say I only want to show
| | 04:26 | ten, but I have 20 entries. Older
entries are always automatically moved to the
| | 04:30 | blog archive, which has this convenient
Go to Archive link on your main blog page.
| | 04:35 | So you can select your Archive page
take a look at that, and here you can see
| | 04:39 | just the two articles that I have
created so far. So visitors to your site will
| | 04:42 | have access to all of your entries to
the archive unless you decide to delete
| | 04:46 | them. But your entries aren't set in
stone, if you do want to go back and
| | 04:49 | change an entry, just click Entries,
and then select the one that you want to
| | 04:53 | change. For example, I didn't replace
this placeholder text next to the Photos
| | 04:57 | on either of the entry pages. Then I
might type something like or I might go to
| | 05:03 | the other entry here and type Chicago
really is my kind of town. Changing an
| | 05:11 | entry doesn't alter the date or time
of the entry, iWeb only notes the time
| | 05:15 | when you first create the entry, I
should actually drag this pane over, so I
| | 05:20 | can see the time there.
| | 05:21 | So if you make a simple mistake like
misspelling someone's name in the entry,
| | 05:25 | going back to change it, doesn't
make a new entry or place it out of
| | 05:28 | chronological order. And now we have
pretty much have our blog set up. All you
| | 05:31 | need to do now is publish it, add new
entries whenever I feel like it, and then
| | 05:34 | publish those as well.
| | 05:36 | So let's click Publish Site, and now I
can check on my blog by clicking Visit
| | 05:44 | Site Now, and when I click the blog
link in my navigation bar here in my Safari
| | 05:51 | browser, I see the main blog page,
and then I can click anyone of these
| | 05:59 | articles to read more. Let's go back
to the main blog page, and here on the
| | 06:04 | main blog page, I can click the
Subscribe link, so I can see the RSS feed like
| | 06:09 | so. And again, this is just another
example of the RSS feed like we saw
| | 06:13 | previously, and if I want to subscribe
to this blog in Safari, all I have to do
| | 06:16 | is add it as Bookmark like I did
previously, just drag it to my bookmarks bar,
| | 06:21 | click OK, and there it is. You can see
there are two entries that I have yet to read.
| | 06:25 | Let's go back to the main blog page.
Another convenient feature of iWeb's blog
| | 06:30 | is a built in search feature which
your visitors can use to search through
| | 06:33 | entries for specific words or phrases.
So we have the search field here, and
| | 06:37 | maybe I can search for Opera, and here
is my search results page, and of course
| | 06:43 | out of my two entries, I only
mentioned the word Opera once, but I can click
| | 06:46 | that link and go right to that entry.
| | 06:48 | Now if you didn't see the search bar
in your copy of your page, go back to
| | 06:53 | iWeb, go to the RSS Inspector, and
make sure you have the blog page selected,
| | 06:57 | and make sure display search field is
checked, if I uncheck it, you will notice
| | 07:00 | that it will disappear from the page,
so I'm going to make sure that's checked.
| | 07:03 | All right, so back here in iWeb, now
whenever I have something new to say I can
| | 07:07 | create a new entry by going to my
entries page, clicking Add Entry, and then
| | 07:12 | just start typing. Now bear in mind
that you aren't required to have a picture
| | 07:15 | in each entry either. I can select the
picture and delete that. I don't need to
| | 07:19 | type something in that placeholder
here if I don't want to. I can modify the
| | 07:22 | page anyway I like, so if I wanted to
drag that up some more, and then drag the
| | 07:28 | date up as well in the placeholder text,
I can do that. And of course, you are
| | 07:33 | also free to reformat the look of the
text, by opening up fonts, and choosing
| | 07:36 | different fonts for the text that you
choose to do so. Actually, I'm not going
| | 07:41 | to create another entry at this point,
so I'm just going to select that entry,
| | 07:44 | and click Delete Entry.
| | 07:46 | So that's how easy it is to create a
blog with iWeb, and you are not limited to
| | 07:49 | creating just one blog, you can have
as many blogs in your site as you like.
| | 07:53 | All you have to do is click the Add
Page button, add another Blog Page, and
| | 07:58 | there is my second blog. I'm just
going to delete that. But you can see that
| | 08:03 | it's no more difficult to set up a
second blog than it was to create the first
| | 08:06 | one, which is nice if you want to have
different blogs for different topics in
| | 08:10 | a single iWeb site.
| | Collapse this transcript |
| Allowing blog comments| 00:00 | Many people believe a blog isn't
really a blog unless you allow comments from
| | 00:04 | your readers, which lets you to truly
interact with your public and find out
| | 00:07 | what they really think about you. And
if you want to hear what your readers
| | 00:10 | have to say, you can turn on comments
in your blog. With your blog selected,
| | 00:13 | open the Inspector, and then under
the RSS Inspector, check Allow comments.
| | 00:20 | iWeb gives you this notice telling you,
or some might say warning you, that
| | 00:23 | allowing comments gives your visitors
the power to post messages at the bottom
| | 00:26 | of your blog entries. So basically,
anyone can say anything they want but as
| | 00:31 | the blogger, you can manage and delete
the comments if necessary. Notice that
| | 00:35 | you can delete unwanted comments using
iWeb or by visiting your site directly.
| | 00:38 | So you can do that either directly
here from iWeb or going to your site.
| | 00:41 | Also note that the comments feature is only
available when you are publishing your
| | 00:45 | site to MobileMe. So this won't work if
you are publishing your site to a third
| | 00:48 | party hosting service. So I'll click OK.
Now the other option we have when you
| | 00:53 | allow comments is Allow attachments,
which allows your visitors to include
| | 00:56 | files like music or videos when they
make their comments. Just be aware that
| | 01:00 | the attachments that do take up space
on your MobileMe account although iWeb
| | 01:04 | does limit attachments to 5 MB. But
if you don't want people eating up your
| | 01:08 | server space, just leave this
unchecked. So let's publish the site with our
| | 01:12 | changes and see how it looks. I will
visit my site. I'll go to Blog. Notice now
| | 01:24 | on the main blog page, next to each
entry I have a display that says No
| | 01:28 | comments, meaning nobody has left any
comments on this blog yet. Let's go to
| | 01:32 | one of these entries, and down at the
bottom of the entry, we have the Add a
| | 01:39 | Comment link. So if I click on that,
it opens up a new window and anyone who
| | 01:44 | visits my blog can type in a comment.
Person leaving the comment can leave a
| | 01:56 | name of their choice, and if they have
a website or a link they want to add,
| | 02:03 | they can put that in the URL field.
And to prove that the person leaving the
| | 02:07 | comment is actually a human and not
some spam robot, they have to look at the
| | 02:10 | image here and type in the letters and
numbers that they see and then click Add
| | 02:16 | Comment. I will close that window. And
now you can see how the comments will
| | 02:23 | appear on your blog pages. Now let's
go back to iWeb, and iWeb usually checks
| | 02:29 | for comments anytime you start the
program up. So I'm going to quit iWeb and
| | 02:35 | restart it. Notice the little dot has
appeared next to the blog page, this
| | 02:41 | tells me that it has found a comment,
and right here on my main blog page,
| | 02:44 | I see 1 comment listed here. If I go to
the Entries, if you select that entry,
| | 02:50 | you can see there is a dot there
telling me that a comment has been added to
| | 02:52 | this page. And right here in iWeb, I
can see the comment. Now if I don't like
| | 02:58 | that comment or I just don't want it
on my page, I can just click the X to
| | 03:02 | delete it and now if I go back to
Safari, notice I don't even have to publish
| | 03:06 | my site, notice that Publish Site isn't
even an option right now. If I go back
| | 03:09 | to Safari, and click the Refresh
button to reload this entry page, notice the
| | 03:15 | comment has been deleted just like
that of the live website. Okay, so now you
| | 03:19 | know how the commenting capabilities or
your iWeb blog work. It's up to you to
| | 03:23 | decide whether to use it or not, but
if you are like most bloggers, you will
| | 03:26 | relish to the feedback from your readers
and you will keep the commenting turned-on.
| | Collapse this transcript |
| Creating blog entries from iPhoto| 00:00 | I want to show you the Photo blogging
feature in iPhoto because it does tie
| | 00:03 | into iWeb. Let's switch over to iPhoto.
So here in iPhoto, I have some pictures
| | 00:08 | that I want to add to my blog. Now we
saw earlier that with Photo selected, you
| | 00:12 | can easily create an iWeb photo gallery by
clicking iWeb and then choosing Photo Page.
| | 00:18 | The other option here is Blog. iPhoto
takes some moment to prepare the photos.
| | 00:25 | Back in iWeb, let's see what happened.
I now have a separate blog entry for
| | 00:29 | each photo I sent over. Now depending
on what you are trying to do, this could
| | 00:34 | be either good or bad. It's bad if you
wanted to provide a gallery of photos
| | 00:38 | for people to check out. If that's
what you want, you should select the Photo
| | 00:41 | Page option in iPhoto.
| | 00:42 | But if you want to quickly set up
several blog entries at once or even a single
| | 00:46 | blog entry with a single photo you
are working with an iPhoto, Blog is the
| | 00:49 | right choice. iWeb automatically
creates a blog entry in your existing blog, or
| | 00:54 | if you have more than one blog in your
iWeb site, you will get a menu asking
| | 00:57 | you to select which blog you want
the photos to go into. And if you don't
| | 01:01 | currently have a blog in iWeb, you will
get a prompt asking you to pick either
| | 01:03 | a blog template or a podcast template.
| | 01:05 | So if I intended to create all these
entries, I would now go through and start
| | 01:09 | typing a little bit about each
picture, or making some kind of entry, or
| | 01:12 | otherwise customizing each one of
these different entries. In fact, I don't
| | 01:16 | really want all of these entries in
here right now, so I'm just going to select
| | 01:18 | them and delete them.
| | 01:23 | That's just another way to create a
blog entry or multiple blog entries from
| | 01:27 | iPhoto. It would be a nice feature to
take advantage of, if you were going
| | 01:30 | through your photos in iPhoto while
on a trip. If you realize one of your
| | 01:33 | photos would make a great picture to
accompany a blog entry, you could can just
| | 01:37 | select it, choose iWeb blog, and
then just start typing your entry.
| | 01:41 | That is opposed to how having to switch
to iWeb, create a new entry by choosing
| | 01:46 | Add Page, choosing the blog page, and
then navigating through, and finding that
| | 01:50 | photo in your iPhoto library. It's much
quicker just to go directly from iPhoto into iWeb.
| | Collapse this transcript |
| What is a podcast?| 00:00 | Now let's talk about podcasts. You have
probably heard the term already and we
| | 00:03 | could go into great detail about the
ins and outs of podcasts. In fact,
| | 00:07 | you will find a couple of tutorials on
just podcasting on the lynda.com Online
| | 00:11 | Training Library. But for the purposes of this
movie on iWeb, let's just go over the basics.
| | 00:15 | And the most basic definition of a
podcast is that it's an audio or video file
| | 00:20 | comparable to a radio or TV show that
you can download over the Internet and
| | 00:24 | listen to or watch on your computer.
What makes the podcast different from a
| | 00:28 | regular audio or video file is that
you can subscribe to a podcast, just like
| | 00:32 | you can subscribe to a blog.
| | 00:33 | When you subscribe to a podcast, you
don't have to worry about visiting the
| | 00:36 | website on your own to see if a new
episode has been published. Special
| | 00:40 | software, sometimes called podcatching
software, automatically checks it
| | 00:44 | for you. And when it sees that a new episode
has been published, it downloads it for you.
| | 00:48 | And whether you know it or not, you
already have great podcatching software on
| | 00:51 | your computer in the form of iTunes.
The iTunes Store offers thousands of free
| | 00:57 | podcast listings, which you will find
under the iTunes Store menu > Podcasts.
| | 01:05 | So you can browse through the different
podcast that are available here, check out
| | 01:08 | some of the top podcasts, and
essentially just search around and find some of
| | 01:12 | the ones that you like.
| | 01:13 | And then you can subscribe to the
podcast and have iTunes automatically
| | 01:16 | download each episode. Now again,
I'm not going to get into all the details
| | 01:20 | about making and subscribing to
podcast here. You can't actually record a
| | 01:24 | podcast with iWeb but you can record a
podcast with GarageBand, which comes as
| | 01:27 | part of the iLife '09 package.
| | 01:29 | So if you have iWeb, you have GarageBand,
and you can find out more about using
| | 01:33 | GarageBand and creating podcasts on
the lynda.com Online Training Library.
| | 01:37 | But recording the podcast is just the first
part of podcasting. After you have your
| | 01:40 | audio or video file, the next thing you
need to do is post it online in a form
| | 01:44 | that people can subscribe to.
| | 01:46 | In many cases, this requires you to
sign up with a web hosting company to host
| | 01:49 | your website and related files, and to
create that RSS feed we were looking at
| | 01:53 | in the previous movies on blogging.
| | 01:55 | Fortunately for you, you have iWeb,
which makes it super easy to publish your podcast.
| | 01:59 | iWeb is your one-stop podcast
publishing shop, and in the very next movie,
| | 02:04 | we'll take a look at how it's done.
| | Collapse this transcript |
| Adding a podcast episode| 00:00 | In reality, creating a podcast in iWeb
is almost exactly the same as publishing
| | 00:04 | a blog. The only difference is with a
podcast you are attaching an audio or
| | 00:08 | video file to your blog entry.
| | 00:10 | So let's create our podcast pages by
clicking the Add Page button, to view our
| | 00:14 | page templates, and here we have our
podcast template. I'll select that and
| | 00:19 | click Choose, and it really looks a lot like
the blog pages we created a few movies ago.
| | 00:25 | Here we have our main podcast page that
will list all of your podcast episodes,
| | 00:30 | which is just like the main blog page
that will list all of your blog entries.
| | 00:34 | And you have the listing of entries
for a podcast, which displays all of your
| | 00:38 | recent podcast episodes, and we
also have the Archive page, which gives
| | 00:41 | visitors access to all
the episodes you've posted.
| | 00:44 | So now all you really need to do is
start adding podcast episodes. Again, this
| | 00:48 | requires you to have already recorded
an audio or video file. So we are going
| | 00:51 | to assume we've already done so. And
again, a podcast can be either audio or
| | 00:55 | video, or you can have a
combination of both if you like.
| | 00:58 | One entry can be audio, the next can be
video, and so on. You just have to make
| | 01:02 | sure that your file is in a format
supported by iTunes and QuickTime. So audio
| | 01:06 | files should be MP3s, MP4s and so on.
| | 01:09 | If you are not sure try opening the
file in QuickTime. If it works, then you'll
| | 01:12 | be able to post it as a podcast. Let
me go to my Podcast Entries page, and
| | 01:17 | customize to this default entry for
the first episode of my podcast about my
| | 01:21 | various trips, which I'm
going to call The Travelcast.
| | 01:25 | So right now I have a bunch of
placeholder items as usual and I want to replace
| | 01:28 | them with my own content. Now when you
publish a podcast it's not a requirement
| | 01:32 | for you to have a page with pictures,
text, navigation, and so on. If you are
| | 01:35 | going to subscribe to your podcast,
they are not necessarily going to see this
| | 01:38 | stuff anyway. They are going to mostly be
interested in downloading your audio or video file.
| | 01:42 | But it is nice to have a page to host
each of your episodes so casual browsers
| | 01:46 | can checkout your show before deciding
to you subscribe to it. So on this page,
| | 01:51 | I'm going to change My Podcast to The
Travelcast. For the title I call this
| | 02:00 | Episode 1: On The Road Again, and
we can add a little bit of text.
| | 02:07 | Now depending on which theme you choose,
some of the other podcast templates
| | 02:14 | might have other text or image
placeholders. So fill them out or delete them as
| | 02:17 | you see fit. For example, maybe I don't need
this placeholder up here, so I'll just delete that.
| | 02:23 | Now notice this placeholder has a
little player bar that looks like QuickTime
| | 02:27 | controls. This is the placeholder for
your actual podcast audio or video file.
| | 02:32 | So don't confuse this with
a regular image placeholder.
| | 02:35 | If you want your listeners to
actually be able to see or hear your podcast,
| | 02:38 | this is where you need to drag your
podcast file. And again, this can be any
| | 02:42 | audio or video file, so you can grab a
file out at the media browser, if your
| | 02:46 | podcast is stored in iTunes,
iPhoto, or in your movies folder.
| | 02:49 | But the file I want in this case is in
the iWeb audio folder I've copied to my
| | 02:53 | desktop from my exercise files. I'm
going to grab the file travelcast_01.mp3,
| | 03:00 | which is an MP3 audio file. I'm going
to drag that over the placeholder on my
| | 03:03 | page. And again, that's an important
part. The audio or video file that you add
| | 03:08 | has to be placed in the placeholder
area in order for people to be able
| | 03:10 | download the file when they subscribe
your podcast. If you drag it to any other
| | 03:14 | area on your page, it just becomes a
regular audio or video file that you've
| | 03:17 | embedded on your page, but people won't be able
to get that when they subscribe to your podcast.
| | 03:23 | iWeb likes if you have an image to go
along with your podcast episode, so you
| | 03:26 | see this big drag image here area.
You can make this smaller if you like by
| | 03:30 | selecting and just reducing the size,
and again, you can hold down Shift to
| | 03:34 | keep your proportional, and maybe I'll
grab an image. I'll go to iWeb photos
| | 03:38 | and I'll just grab street_lamp, drag
that in there, and maybe now that it's
| | 03:44 | that small I can make it a little bit
bigger. I'll just pop that over there and
| | 03:49 | that's all there is to it.
| | 03:50 | Now I can actually preview and play my podcast
right here in iWeb by clicking the Play button.
| | 03:56 | (Music plays.)
| | 04:00 | (Recording: Hey, Garrick here
and welcome to my Travelcast podcast.)
| | 04:03 | (Recording: This is the way I've chosen to pass
the time while stuck in hotel rooms on the road.)
| | 04:07 | (Recording: And fortunately for you,
I tend to witness a lot of crazy stuff on my trips.)
| | 04:10 | (Recording: So be sure to subscribe to my
podcasts so you don't miss a single episode.)
| | 04:15 | (Music playing.)
| | 04:18 | (Recording: This week I found myself in the windy city
of Chicago during what turned out to be an extended layover.)
| | 04:23 | (Recording: And Chicago certainly lives up to
its name this time of year. Case in point.)
| | 04:27 | (Recording: I was out walking along Lake Shore Drive
this morning when a huge gust of wind blew out from...)
| | 04:32 | Okay, so we get the point there.
After you publish this, I'll show you what
| | 04:35 | this page looks like live on the web,
and how they go about subscribing to it.
| | 04:39 | But let's add one more entry or add it.
Let's click the Add Entry button, and
| | 04:44 | I'll title this one, A Taste of
Southern Utah, and instead of an audio file,
| | 04:53 | we'll publish a movie to this episode.
| | 04:54 | Now I'll go to the iWeb movies folder,
and grab the Southern Utah movie that we
| | 04:59 | used earlier, and again, I'm just going
to drag that over the placeholder on my
| | 05:03 | page. And there it is. And again, we
saw this movie before, like this, and of
| | 05:13 | course we can customize this. So I'm
going to actually open up my Inspector, go
| | 05:17 | to the Metrics Inspector, and with the
movie select, I'm going to hit Original
| | 05:21 | Size, so we can see it at four
resolution, and I can just reposition this on
| | 05:26 | the page a bit, here we go.
| | 05:29 | And while I'm add it, I'm going to go
to the QuickTime Inspector and just pick
| | 05:32 | a Poster frame, so we don't want to
see a black frame on my page, here we go.
| | 05:40 | So there is my second episode, and of
course I should enter my own text in the
| | 05:43 | text placeholders, but you get the
idea. So it's really very easy to add
| | 05:46 | podcast episode to your iWeb site.
| | 05:48 | Now let's go to the main podcast page,
and customize that a bit. There you can
| | 05:53 | see the listings of the two podcast
episodes I have created so far. And again,
| | 05:57 | we get pretty much of the same options
that we had on the main blog page. If I
| | 06:01 | select the entries I can choose the
Photo size, for the entry I can choose a
| | 06:05 | proportion, whether to even show the
photos or not, or choose a different Placement.
| | 06:09 | Notice the Subscribe button here, now
we'll take a look at how that works in a
| | 06:12 | little bit, but I should probably
mention while I'm here that if you
| | 06:14 | accidentally delete this button, say
you select it and hit the Delete Key, and
| | 06:19 | you want to bring it back, you can
always find it under the Insert menu button,
| | 06:23 | and then choose Subscribe. Now in
this case we are doing a podcast, so I'm
| | 06:26 | going to choose Subscribe to Podcast.
And I'll place this right back on the
| | 06:30 | page, and I'll just further
customize this with A Travelcast, a podcast
| | 06:40 | recorded on the road.
| | 06:43 | Actually I like this default image here on
the page, so I'm just going to leave that there.
| | 06:47 | Now we'll be publishing this very
shortly, so you can see how it all works
| | 06:50 | online, but before we do so, I'm
going to show you how to send a podcast
| | 06:53 | directly from GarageBand to iWeb,
which we'll take a look at next.
| | Collapse this transcript |
| Importing a podcast from GarageBand| 00:00 | In this video we are going to take a
quick look at how to send a podcast
| | 00:03 | directly to iWeb after recording it in
GarageBand. We are not going to spend
| | 00:07 | much time talking about GarageBand
itself. That's really something you should
| | 00:10 | checkout in one of the other
podcasting or GarageBand titles on the lynda.com
| | 00:13 | Online Training Library, but
we'll play around with it a little bit.
| | 00:17 | In the iWeb audio folder on my
desktop, there is a file in here called
| | 00:20 | travelcast_02, which I'm going to open
up in GarageBand by double-clicking.
| | 00:26 | All right, so here in GarageBand this
file already includes a recording of my voice,
| | 00:29 | and we are going to use this for a
podcast example. Let me just play it for you.
| | 00:33 | (Recording: Hey, Garrick here
with Episode 2 of the Travelcast...)
| | 00:37 | (Recording: ...the podcast I record anytime I find
myself in a hotel room with nothing else to do.)
| | 00:44 | (Recording: This week I'm in Taipei, Taiwan, the Far East.
In fact, it's so far east I traveled west to get here.)
| | 00:50 | Okay, so that's just a quick clip of
some audio there. Let me just go back.
| | 00:54 | Now before we export it, let's add some
music to this. GarageBand comes with tons
| | 00:58 | of music and sound effects
specifically designed for use in a podcast.
| | 01:01 | I am going to open the Loop browser
and take a look. And let's browse under
| | 01:06 | Jingles and we'll go to World since
this is a travel show, and in the pane
| | 01:11 | below we can actually click on any
of these to get a sample of jingles.
| | 01:15 | (Music plays.)
| | 01:32 | I kind of like that Vino clip, so
I'm going to drag that into the already
| | 01:36 | existing Jingles track here in my
podcast. So I'm just going to drag that right
| | 01:39 | out to the Loop browser, put it on
that track and just make sure it's flush
| | 01:42 | to the far left of that track. And there it is.
| | 01:46 | Now notice this blue arrow on this track
that's pointing down. This is a feature
| | 01:50 | in GarageBand called ducking. Basically
GarageBand will automatically turn down
| | 01:54 | the volume on this track as soon as
it detects any sound coming from one of
| | 01:57 | these two voice tracks. That way,
you'll able to hear my voice over the
| | 02:01 | background music. Check it out!
| | 02:02 | (Music plays in background.)
| | 02:07 | (Recording: Hey, Garrick here
with Episode 2 of the Travelcast...)
| | 02:11 | (Recording: ...the podcast I record anytime I find
myself in a hotel room with nothing else to do.)
| | 02:15 | (Music plays.)
| | 02:18 | (Recording: This week I'm in Taipei, Taiwan...)
| | 02:20 | So you should have been able to hear
the music go down in volume when my voice
| | 02:23 | (Recording: Hey, Garrick here with Episode 2 o...)
| | 02:24 | came in and then in the space between
the two clips of my voice when music
| | 02:28 | came back up. And you can also control
the amount of ducking that occurs.
| | 02:32 | So if the volume drop is too drastic,
you can choose a different setting by clicking
| | 02:36 | the Info button, going to Master Track,
Edit, and here you will find the Ducker,
| | 02:42 | currently it set to the Manual
setting, but you see we have several
| | 02:46 | different settings we can choose from.
We can choose a Fast duck with Maximum
| | 02:50 | Music Reduction, meaning the volume
of the music will be at its lowest.
| | 02:53 | You can choose Fast with Moderate Music
Reduction, or Fast with Slight Music
| | 02:56 | Reduction. And then you have the same three
options for Slow ducking and the Slowest ducking.
| | 03:01 | So just pick one that works for you.
You can play around with it.
| | 03:04 | So that's pretty cool. That's all I'm really
going to do here in GarageBand. Let's just
| | 03:08 | pretend this is a complete podcast episode,
and I'm ready to send it to my iWeb site.
| | 03:12 | Now one thing I should do before I
export it is scroll to the very end of the
| | 03:17 | podcast and here you'll see a purple
marker. This is the end of song marker.
| | 03:22 | And basically this tells GarageBand
where the song or the podcast is over.
| | 03:25 | So I'm going to drag that back to the left
and just place this at the end of the track here.
| | 03:32 | That way, I don't have a track
with several second of the silence
| | 03:35 | at the end of it. With the end of song
marker here, the podcast file will stop
| | 03:39 | playing right when this music ends.
| | 03:40 | Now I'm going to choose File > Save, so
I don't lose any of my work and now to
| | 03:45 | send to iWeb I just choose Share
> Send Podcast to iWeb. Now I have the
| | 03:51 | choice here, do I want to Compress
Using the MP3 Encoder or the AAC Encoder?
| | 03:56 | MP3 is generally more compatible with
more plug-ins, so people who aren't using
| | 04:00 | iTunes subscribe to your podcast they will
most likely to be able to play the MP3 Encoder.
| | 04:04 | AAC I would generally use if you are
doing what's called an enhanced podcast.
| | 04:08 | That includes links and images and
chapter markers. But here I'm just going to
| | 04:12 | stick with the MP3 Encoder and we
have the choice of Good, High or Higher
| | 04:16 | Quality. I'm just going to
choose High Quality and click Share.
| | 04:24 | So now iWeb pops back to the front and
asks me which blog I want to send the
| | 04:28 | podcast to. Because remember a
podcast is really just a blog with audio or
| | 04:32 | video files attached to it. So
I can choose my blog or my podcast.
| | 04:35 | And it's getting these names from the
actual names that I have used here, Blog or
| | 04:38 | Podcast. If I'd named those something else,
those names would appear here in this menu.
| | 04:42 | So I do want to send this to the
podcast and I'll click OK, and now I have a
| | 04:49 | new entry in my podcast. iWeb
automatically adds to this podcast icon,
| | 04:54 | which I can swap out with one of my own
if I like. I'll just leave that image.
| | 04:57 | But I'm going to make it a little bit smaller.
And I'll change some of this text around.
| | 05:05 | I'll call this Made in Taiwan,
and maybe just a little bit of text here.
| | 05:15 | And of course, if I want to hear
my podcast here in iWeb, I can just by
| | 05:18 | clicking the Play button.
| | 05:19 | (Music plays.)
| | 05:25 | So that's taking a podcast you
recorded and edited in GarageBand and moving
| | 05:29 | it into iWeb; pretty darn easy.
| | 05:31 | In the next movie we'll get this all
online and I'll show you how to subscribe
| | 05:34 | to your podcast.
| | Collapse this transcript |
| Subscribing to podcasts| 00:00 | In the previous movie, we looked at
how to create a podcast in GarageBand and
| | 00:04 | import it into iWeb. Now let's see
what a podcast looks like from your
| | 00:07 | visitor's point of view.
| | 00:08 | You can see by the red icons on my
sidebar that I haven't yet published my
| | 00:13 | podcast pages. Now before I do so, I
suggest changing the name of your podcast
| | 00:17 | from podcast to whatever your podcast
happens to be called. So I'm going to
| | 00:20 | change mine to Travelcast. That's just to
distinguish it from just a generic podcast.
| | 00:26 | All right, so now we are going to
publish the site by choosing Publish Site,
| | 00:37 | and now we'll visit the site and
I'll click my Travelcast link in the
| | 00:41 | navigation bar. And here is the main
podcast page, which if you recall from the
| | 00:46 | earlier movies looks a lot like a
blog, and from here I can click on the
| | 00:50 | various entries to read them and to
view the podcast, or listen to the podcast,
| | 00:53 | depending on what the case might be. So
I can listen right here on the website,
| | 01:01 | go back to the main podcast page, and
maybe check out a couple more of them.
| | 01:06 | Do you get the idea? But again the
real appeal of a podcast is that you can
| | 01:17 | subscribe to it. So how do we do that?
Let's go back to the main podcast page
| | 01:22 | and here's where we find that
Subscribe button. Now if I roll my mouse over
| | 01:26 | this button, you can see that this
is linking to the RSS feed that iWeb
| | 01:29 | automatically generated. You can see
it in the little pop-up there, or if you
| | 01:33 | look down in the status bar area when I roll
over it, you can see that it ends with rss.xml.
| | 01:38 | This is just like the RSS feed we
were looking at earlier in the movie on
| | 01:41 | blogs, and like before, Safari to text,
up there is an RSS feed associated with
| | 01:45 | this, and it displays an RSS button
in the address bar. If I click the RSS
| | 01:49 | button here, I can see the RSS feed
just like I could with my blog. So here are
| | 01:55 | the three episodes in this particular feed.
| | 01:57 | Now for people who don't have iTunes
installed on their computers, you'd tell
| | 02:02 | them to subscribe to this address. So
at the address bar, address starts with
| | 02:06 | feed:// and then the address of the
feed. That's how you know this is an RSS
| | 02:11 | feed, because it has feed://, but for
people who do have iTunes installed, and
| | 02:16 | that's pretty much all Mac users and even lots
of Windows users have iTunes have these days.
| | 02:23 | iTunes users should click the Subscribe
button, but even though the link looks
| | 02:27 | like it takes to the RSS feed, the
computer of the person clicking this button
| | 02:30 | will actually open iTunes and
automatically subscribe to your podcast. That's
| | 02:34 | the beginning of this address. It's
not feed://, but itpc://. itpc stands for
| | 02:41 | iTunes Podcast. Click Subscribe.
| | 02:44 | So notice iTunes open automatically and
podcast is now selected in my library,
| | 02:49 | and here is my podcast. If I toggle
that open, I can see all three episodes.
| | 02:54 | Now iTunes by default is only
downloading the most recent episode, in this
| | 02:58 | case, Made in Taiwan. If I wanted to
download any of the other ones, I would
| | 03:01 | simply click the Get button,
and I could download that episode.
| | 03:05 | Notice also the Description column,
which displays the text from the
| | 03:08 | description on my iWeb page. So I have
Greetings from Taipei, Taiwan in this
| | 03:12 | episode. I have the placeholder text
in this one, which is why it's always a
| | 03:16 | good idea to replace the placeholder
text with their own text. And then in my
| | 03:19 | first episode I have the text that I
typed there. Clicking the I for Info
| | 03:22 | button, watch. That will
give you the entire description.
| | 03:24 | But now I'm subscribed to this
podcast in iTunes, and depending on how each
| | 03:29 | users of iTunes preferences are set,
iTunes will periodically check for new
| | 03:33 | episodes of your podcast and download
them when they appear, without these
| | 03:36 | having to do that manually him or herself.
| | 03:39 | For people who don't use iTunes, will
have to copy and paste the address of the
| | 03:42 | RSS feed in their podcasting programs.
So for example, if I hide iTunes and go
| | 03:46 | back to my website and click the RSS
button, again this gives me the address of
| | 03:52 | the feed in my address bar. I can
select that and copy it and then open the
| | 03:58 | software of my choice for downloading
podcast. And I'll just show you how to
| | 04:01 | manually add feed addresses to iTunes
as an example, because not all podcast
| | 04:05 | you might want to subscribe to, use
that iTunes podcast link. Many podcasts
| | 04:09 | only provide you with this feed
address, so it's important to know how to
| | 04:11 | manually subscribe to a podcast in iTunes.
| | 04:14 | So with that address copied, I'm going
to back to iTunes, and first I'm going
| | 04:18 | to delete this podcast out of iTunes.
I'm going to say Unsubscribe, and then
| | 04:23 | Delete, by hitting the Delete key on my
keyboard, and I'll say Remove, Move to
| | 04:28 | trash and they are gone. So now it's
manually subscribed to the podcast.
| | 04:32 | Each program is going to work a little
differently, but they all need you to
| | 04:35 | provide the RSS address. Now in
iTunes, we go to Advanced > Subscribe to
| | 04:41 | Podcast. And all you do here is paste
in that feed that we copied from the
| | 04:45 | browser, there it is feed:// and then
the address. We'll click OK. I have now
| | 04:51 | subscribed to the Travelcast podcast
and it's currently downloading, and has
| | 04:54 | now downloaded the most recent episode.
| | 04:56 | So that's how someone would manually
subscribe to your podcast. All you have to
| | 04:59 | worry about is producing new episodes
of your podcast and posting them to your
| | 05:03 | website. Anyone subscribe to your
podcast will automatically get the episodes
| | 05:07 | when iTunes or whatever program they happen
to be using, notices that they've been posted.
| | 05:11 | So that's how to publish and subscribe
the podcasts, but in order for people to
| | 05:15 | be able to find your podcast, you
also have to announce it to the world by
| | 05:19 | submitting it to the iTunes store, and
we'll take a look at how to do that in
| | 05:22 | the very next movie.
| | Collapse this transcript |
| Publishing podcasts to iTunes Store| 00:00 | In this movie I'm going to show you
how to submit your podcast to the iTunes Store.
| | 00:04 | You do this if you want your
podcast to be found by total strangers out
| | 00:07 | there browsing the list of podcast on the
iTunes Store. It's a really simple process.
| | 00:12 | People who create podcasts without iWeb
actually have to go to the iTunes Store
| | 00:16 | in iTunes. Click on Podcasts. I'm
already here, and then click on Submit a
| | 00:22 | Podcast, and from here they have to
paste in their feed, and then follow
| | 00:26 | through several other screens of
adding information. I'm not going to do that
| | 00:30 | now, because I'm using iWeb, so I
don't need to go through this process.
| | 00:34 | If you are using iWeb, submitting
your podcast to the iTunes Store is super
| | 00:37 | easy. Let me close the iTunes for a
moment, and hide my browser. With your
| | 00:42 | podcast selected in iWeb, open the
Inspector, go to the RSS Inspector, make
| | 00:47 | sure podcast is selected, and then just
make sure Allow Podcast in iTunes Store
| | 00:52 | is checked. Now actually I disabled
this before I started recording this movie
| | 00:55 | or watching, because I don't want
people thinking this is a real podcast, but
| | 00:59 | you will want to keep this checked, if
you want to make it easier for people to
| | 01:02 | find your podcast. Now I'm going to
unchecked mine, but again you leave yours checked.
| | 01:06 | And then you just have to fill out the
rest of the information here. For Series
| | 01:09 | Artist, you can put your name or the
name of your show. You can put an email
| | 01:14 | address in here. Now the email address
you enter here is not seen on the iTunes
| | 01:18 | Store, it's just use d by the iTunes
Administrators if they need to contact you
| | 01:22 | about your podcast. So be sure to add
your email address here, so they can get
| | 01:25 | in touch with you if need be.
| | 01:27 | Personally, if you are serious
about podcasting, I suggest setting up a
| | 01:30 | dedicated email address just for
handling podcast correspondence.
| | 01:34 | Next, if your podcast is a little blue
or not for people of all ages, you might
| | 01:38 | want to select Explicit under the
Parental Advisory menu. The people of iTunes
| | 01:43 | take this very seriously and if they
find that you haven't marked an explicit
| | 01:46 | podcast as such, they might kick your
listing off the store. So you can choose
| | 01:50 | between Clean, Explicit or None. Just
make sure whichever you choose is accurate.
| | 01:55 | Now this section under Podcast Episode,
these are the items that pertain to the
| | 01:59 | specific episodes of your podcast.
Notice that they are currently grayed out
| | 02:02 | right now, because they don't have any
specific episode selected. If I go to
| | 02:05 | Entries and I select one, notice
that as I click back and forth among the
| | 02:11 | different entries, the duration is changing, so
you can see these are specific to each episode.
| | 02:17 | All you really have to do here is fill
out the Episode Artist, which can be the
| | 02:20 | same as the Series Artist in most cases,
but if you have, say, a special guest
| | 02:25 | host or something like that, you can
add his or her name here. And again you
| | 02:28 | want to choose the Parental Advisory
selection, if necessary. Allow Podcast in
| | 02:32 | iTunes Store is grayed out right now,
because they don't have a lot of podcasts
| | 02:35 | in iTunes Store checked up here, but
if I do check that, you can see that it
| | 02:38 | appears down here as well.
| | 02:40 | But if you'll allow the podcast on
the store as a whole, and you want to
| | 02:43 | dis-clude a particular episode, you do
have the option to uncheck that option
| | 02:46 | here, and this one episode
will not appear on the store.
| | 02:50 | Again, I'm going to keep those all off
in my case. Now you want to fill all the
| | 02:54 | stuff out before you publish your
podcast for the first time, but if you forget
| | 02:57 | or if the information changes, you
can always make your changes, and then
| | 03:00 | republish your podcast. iTunes does
periodically check your RSS feed for
| | 03:04 | changes, including whether or not you
want to allow your podcast in the iTunes
| | 03:06 | Store, but sometimes it takes several
hours or even a day or two before your
| | 03:10 | changes show up. So it's best to have
things the way you want them before you
| | 03:13 | publish your podcast.
| | Collapse this transcript |
|
|
5. PublishingAbout MobileMe storage| 00:00 | In this final chapter of movies,
I'd like to go over some issues that
| | 00:03 | specifically concern uploading or
publishing your iWeb pages to the Web.
| | 00:07 | Most of these movies are going to deal
with publishing to MobileMe, but I've
| | 00:11 | included a movie on how to publish to a
Non-MobileMe hosting service using FTP.
| | 00:15 | Now I already went over the basics of
publishing to a MobileMe account in the
| | 00:18 | first chapter, but I'll go over them
again here quickly just as a review.
| | 00:22 | First of all, you of course need to have a
MobileMe account, and you can sign up for
| | 00:26 | a trial account by going to mobileme.com.
And that will give you enough storage
| | 00:32 | space to test that iWeb and other
MobileMe offerings, and if you decide later
| | 00:36 | on that you'd like what the service
has to offer, you can convert over to a
| | 00:39 | full MobileMe account.
| | 00:40 | Once you have account activated,
whether it's a trial or full account, open up
| | 00:44 | your System Preferences, go to the
MobileMe pane, and be sure to enter your
| | 00:50 | user name and password here. I have
already entered mine in here, my trial
| | 00:54 | account is garrichchowiweb09, and I can
see my account status information here.
| | 00:59 | Once you have your MobileMe account
information filled in, start up iWeb, and
| | 01:04 | begin building your pages. When you are
ready to publish, you click the Publish
| | 01:07 | Site button, and that's pretty much
the process we have covered up until this
| | 01:10 | point. And honestly that's pretty much
all there is to publishing to a MobileMe
| | 01:14 | account at least in operational terms.
| | 01:16 | What I want to do in this movie is take
a closer look at where MobileMe sticks
| | 01:20 | your website on its server. In case you
are not aware of this, when you sign up
| | 01:23 | for a MobileMe account, one of the
services you get is your own 10 Gigabyte
| | 01:26 | iDisk. Your iDisk is sort of a
virtual hard drive. You can mount it to your
| | 01:31 | desktop like any other hard drive
except the contents of the iDisk are actually
| | 01:34 | stored on the MobileMe servers, so
it's kind of like a slow hard drive.
| | 01:38 | But the advantage is that you have
access to this drive from anywhere.
| | 01:40 | So if you have a file stored on it and you
are hundreds of miles from home, all you
| | 01:44 | need is a computer with Internet access,
and you can get your files off your iDisk.
| | 01:47 | Now when you create and publish an
iWeb Website, guess where your website is
| | 01:51 | stored? That's right, on your iDisk.
Now you can get to your iDisk from the
| | 01:55 | Finders, let me click on my Desktop to
bring the Finder forward, and from here
| | 02:00 | you can choose Go, iDisk, My iDisk.
This eventually mounts your iDisk on your
| | 02:07 | desktop. So now I'm looking at
my iDisk and all of its contents.
| | 02:11 | If you have your Mac's preferences
setup to display hard drives and Disk images
| | 02:15 | on your desktop, you will see an
iDisk icon on your desktop as well.
| | 02:18 | After you publish your iWeb site,
you'll find a folder on your iDisk called Web
| | 02:23 | and inside that folder you will find
folder called Sites. And this is where
| | 02:27 | you'll find all the iWeb sites and
their pages that you have published, and
| | 02:31 | that's why you can have multiple
iWeb created sites on a single MobileMe
| | 02:34 | account, and we'll be taking a look at
that a little bit later in this chapter.
| | 02:37 | You can see here I have a Travel
folder, and that connects all the files of
| | 02:42 | folders that iWeb generated for my site.
Now I only show you this, because I
| | 02:46 | want you to know where your iWeb
files are stored, so if you ever go poking
| | 02:49 | around in your iDisk, you'll
know where this Web folder is.
| | 02:52 | I don't recommend you move anything
around or go changing anything inside this
| | 02:55 | folder. iWeb manages everything that
goes on in here, so there is very little
| | 02:59 | reason for you to do anything yourself.
Just do all of your management from
| | 03:02 | iWeb. If you change a page name or
delete a page, iWeb dutifully renames the
| | 03:07 | page or deletes it when you hit the
Publish button. You don't have to worry
| | 03:10 | about all the pages sitting on your
iDisk and taking up space. So again, don't
| | 03:13 | make it a habit of touching anything in
this folder and just let iWeb do the work.
| | 03:17 | Okay, so that's a little bit about
where iWeb actually stores the files when
| | 03:20 | you publish your site here in MobileMe account.
| | Collapse this transcript |
| Changing your default page| 00:04 | When you publish your site to your
MobileMe account, the default address for it
| | 00:07 | is web.me.com/user name. And currently
that automatically brings up my Welcome
| | 00:19 | page, which in this case is fine. You
can see up here the address has been
| | 00:23 | forwarded to web.me.com/
user name/travel/Welcome.html.
| | 00:30 | What if I want a different page to
show up first? There may be times when you
| | 00:32 | want a special announcement page to
come up first or something like that.
| | 00:36 | And in other web design programs, this can
be a surprisingly difficult or tedious
| | 00:39 | task to accomplish, but it's super
easy to do on iWeb. Let's go back to iWeb,
| | 00:46 | and let's say that my podcast has
become so popular that I want the main
| | 00:50 | podcast page to be the first thing
that people see when they visit my site.
| | 00:52 | All I have to do is drag the podcast
page up, and again we see this blue line
| | 01:00 | up here. Wherever that line is, when I
let go off my mouse, that's where the
| | 01:03 | page will be moved to. So I'm going
to move that just under the name of my
| | 01:06 | site, like so. That makes the first
page of my site. You can see it also
| | 01:10 | changed positions of navigation bar. So
having moved to the podcast to the top
| | 01:14 | of the sidebar, I'm going
to click publish site again.
| | 01:16 | I am not going to click visit now.
I'm going to manually enter that address
| | 01:27 | again in Safari. Let me just
delete that. So again I'm going to
| | 01:33 | web.me.com/username, hit Return. So
now when I visit my website, the podcast
| | 01:39 | page is the first thing that shows up.
This is one of those things that's
| | 01:42 | probably not that impressive if you
haven't done much web design before, but if
| | 01:46 | you have, you know how of a pain
something like switching to default page
| | 01:48 | around can be.
| | Collapse this transcript |
| Using a personal domain name| 00:00 | When you publish your iWeb site to
MobileMe, the default address of your site
| | 00:03 | is web.me.com/ your MobileMe account name.
But what if you want to use your own
| | 00:09 | personal domain name? And what I mean
by that is instead of giving people your
| | 00:12 | web site address as web.me.com/ your
MobileMe account name, you can give them a
| | 00:18 | unique domain name like lynda.com or
garrricchow.com, but not those two of course,
| | 00:23 | since they are already taken.
Well, one option is to purchase your own
| | 00:26 | domain name and then host your site on
a third party hosting service, but the
| | 00:30 | downside of doing that is that some
iWeb features just aren't available when
| | 00:33 | you host your iWeb site
on a non-MobileMe account.
| | 00:36 | Fortunately, iWeb and MobileMe give
you the ability to direct your own domain
| | 00:40 | name at your MobileMe hosted site,
thereby letting you to take advantage of all
| | 00:44 | the MobileMe and iWeb features, all at
the same time, avoiding having to give
| | 00:48 | your visitors the long web.mac.com/ your
username web address. The first thing to do
| | 00:53 | is to purchase your own domain name
and you can do so with domain registrars
| | 00:57 | like networksolutions, register.com
or godaddy.com and there are many other
| | 01:05 | registrars out there, but you would
just go to any one of these sites to
| | 01:08 | purchase your own domain name.
| | 01:10 | Now of course, many of the best domain
names have been taken at this point, but
| | 01:13 | if you can think of a domain name that
hasn't been taken yet, you can purchase it,
| | 01:16 | and then direct that domain and
name at your MobileMe hosted site.
| | 01:19 | Let's take a look at how to do this.
| | 01:21 | In iWeb, we choose use File > Set up
Personal Domain on MobileMe. That will
| | 01:28 | take you to your browser. You have to
log in, if you aren't logged in already.
| | 01:38 | And once you are logged in, you will
see a link on the left-hand side of the
| | 01:41 | interface for personal domain. And then
here on the first screen, you will find
| | 01:46 | some more information telling you
that to use MobileMe with your personal domain,
| | 01:50 | you will need a registered
domain name that you control. They say to
| | 01:53 | use the domain registrar of your choice,
Again I mentioned three of them, but
| | 01:56 | there are many more out there. And you have to
have at least iWeb '08 installed on your Mac.
| | 02:01 | Once you have those two things,
you can click Add Domain, and then enter your
| | 02:05 | domain name below. In my case, I have
a website called garrickcentral.com.
| | 02:11 | We have to type it again to confirm that it's our
domain name that we typed right the first time.
| | 02:17 | And then once you have done that, click
continue, and then you will get further
| | 02:20 | instructions here on how to setup
your domain names information with your
| | 02:24 | registrar, so that it
points to your MobileMe account.
| | 02:27 | So you can see it says, go to your
registrar's website to find web.me.com as
| | 02:32 | "www" CNAME or (alias) of your domain.
If you need help creating CNAME, contact
| | 02:38 | your registrar. Now this process will
be slightly different with the registrar.
| | 02:41 | They each have different interfaces,
and account management system setups.
| | 02:45 | So it's going to be different. But just to
give you an example, just creating new a
| | 02:48 | tab here. I have mine registered
with godaddy.com. So I would log into my account.
| | 03:04 | Now I see the list of all the
domain names that I own. I'm going to
| | 03:06 | click the details for garrickcentral.com
and here at godaddy.com to change my
| | 03:12 | CNAME information, I click Total DNS
Control and MX records, and here I would
| | 03:19 | check www, and then edit that
information, and here's where I entered that
| | 03:26 | information that was given
to me on the MobileMe page.
| | 03:28 | It tells me to enter web.me.com as the
"www" CNAME information for my domain.
| | 03:35 | So here I'll type in web.me.com, and again,
this process is going to be different
| | 03:41 | for every registrar. Be sure you read
this instructions thoroughly on how to
| | 03:46 | edit your CNAME, but basically once you
have entered that information here,
| | 03:49 | you click OK, and then it could take
anywhere from couple of hours to maybe a
| | 03:53 | full day before that information gets
changed with your registrar. But once
| | 03:59 | you have done that, return back to your
MobileMe account, click Done, and you will
| | 04:03 | get the message saying MobileMe is
configured to host your domain.
| | 04:06 | In this case it is garrickcentral.com.
| | 04:08 | By the way, this also where you would
come to remove that domain information,
| | 04:12 | but I'll leave that for now. I can
return to summary and here is the summary
| | 04:17 | for my MobileMe account and you can see
I now have garrickcentral.com listed as
| | 04:21 | my personal domain. Once the
information gets updated at my registrar,
| | 04:25 | from that point on, anytime anybody
visits garrickcentral.com, will be taken
| | 04:29 | directly to my MobileMe account
without having to type web.mac.com/
| | 04:33 | my MobileMe account name. So you can see
that the whole process is actually pretty easy.
| | 04:37 | All you do to start things
off is go to iWeb, choose File > Set Up
| | 04:44 | Personal Domain on MobileMe,
and just follow the instructions
| | Collapse this transcript |
| Publishing via FTP| 00:00 | iWeb, being an Apple product, is
definitely designed to work best with the
| | 00:03 | MobileMe hosting service, but you can
take sites you create in iWeb and publish
| | 00:07 | them to other hosting services. And
you can pretty much go about creating a
| | 00:10 | website in iWeb, as you would, even if
you were planning on using a MobileMe
| | 00:13 | account for hosting. But there are
few things you need to be aware of.
| | 00:17 | First of, certain features of iWeb
pages are only available when published on a
| | 00:20 | MobileMe account. For example, the
Hit Counter, which tracks the number of
| | 00:23 | visitors to your site will only
function on a MobileMe hosted website. If you
| | 00:27 | are planning on hosting your site
elsewhere, don't bother adding the Hit
| | 00:30 | Counter to your pages. Other features
like blog comments or password protecting
| | 00:34 | your site, also only work if you are
hosting the site on a MobileMe account.
| | 00:37 | And I'll be talking about
password protection in the next movie.
| | 00:40 | So how does it work when you want to
publish your iWeb Site to a third party
| | 00:43 | hosting service? Well basically, when
you sign up with a web hosting company,
| | 00:47 | they'll provide you with a user name
and a password to access the service base
| | 00:50 | you are renting from them. They will
also provide you with the address of the
| | 00:53 | server space, so you can transfer
your website files to the sever. The most
| | 00:57 | common method for transferring your files to a
server is through FTP or File Transfer Protocol.
| | 01:02 | And a brand new feature of iWeb '09
is the ability to publish your sites to
| | 01:05 | non-MobileMe hosting services by FTP.
In previous versions of iWeb, you had to
| | 01:10 | go through a process that involved
exporting your site to a folder, and then
| | 01:13 | using a third party FTP program to
transfer the site to your hosting service.
| | 01:17 | But here in iWeb'09, the FTP
process is built-in and super easily used.
| | 01:21 | And before I publish my site, I'm just
going to a little bit of clean up here.
| | 01:25 | To make the uploading go a little bit
quicker in this for example, I'm just
| | 01:28 | going to delete my podcast out of here,
and so I'll get rid of the blog as
| | 01:35 | well, don't need the blank page, and
let's get over to the movie page and
| | 01:41 | insert some larger movies on
there as well. Just delete those.
| | 01:47 | And again, the only reason I'm doing
this is just to make the upload process go
| | 01:50 | a little bit quicker for this example.
But in general, it is a good idea to go
| | 01:53 | through your entire site and get rid
of any pages that you do not need in it,
| | 01:57 | before you upload your site live to the web.
| | 01:59 | Once you are ready to publish your
site, select the name of the site in the
| | 02:01 | iWeb sidebar, and then from the Publish
To menu, you can select FTP sever, and
| | 02:07 | as we have already seen, this is also
where you can choose to publish to your
| | 02:10 | MobileMe account or to a local folder
on your Mac, but since we are looking at
| | 02:13 | the new FTP options, in this example,
I'll choose FTP server. Then you can
| | 02:17 | enter your site's name, if you want it
to be different than the name you have
| | 02:20 | already given it, and you also have
the option of entering a contact email
| | 02:23 | address. So if you have added an email
me button to one of the pages in your
| | 02:27 | website, the address you enter in this
contact email field, will be the address
| | 02:31 | that receives messages
sent to you from the website.
| | 02:33 | Next under FTP server settings, you
want to enter your FTP sever settings.
| | 02:37 | Now these settings are provided to
you by your site's hosting provider.
| | 02:40 | This information is going to be unique
for everyone. So if you do not know what
| | 02:43 | information to enter in these fields,
be sure to call or email your hosting
| | 02:46 | service for this specific
information you need for your site.
| | 02:50 | Now in my case, I'm going to host my
iWeb site on a website I already own
| | 02:53 | called garrickchow.com. So I'm going to
enter my hosting info here, and again,
| | 02:56 | this is completely unique to my
particular website. You'll be entering your own
| | 03:00 | information, then I'll enter my
Username and a Password. Now in my case I'm
| | 03:09 | going to enter a folder called travel
in the directory path field, and the only
| | 03:15 | reason I'm doing this is because I
have already created a folder on my sever
| | 03:17 | called travel, because I really do have
a website at garrickchow.com, and I do
| | 03:21 | not want to replace it
with this example iWeb site.
| | 03:24 | When you are entering your own FTP
server settings, you won't have to put
| | 03:27 | anything in the directory path field,
unless your hosting provider has
| | 03:30 | specified that you do so. And if that's
the case, I'll tell you what to put in
| | 03:33 | this field. Under Website URL, you
should put the address for your site,
| | 03:37 | http://www.your site's name, and
again, so I'm putting this in the travel
| | 03:45 | folder, I'm going to add </travel > ,
although you probably will not have to do
| | 03:49 | that when you enter your own website
URL here. You can click test connection to
| | 03:53 | have iWeb try to connect to your site
using the information you have entered
| | 03:57 | here. It tells me testing has succeeded,
and I can now publish my site to the
| | 04:02 | selected FTP server, I'll click OK.
| | 04:05 | If you get a message saying that there
is some sort of problem connecting to
| | 04:07 | your site, just double check
your information here and try again.
| | 04:10 | So now when we are ready to publish,
I'm just going to Save any of my
| | 04:13 | information here, and with my site
selected, I'm just going to click publish
| | 04:17 | site to send my entire site to my iWeb
hosting service by FTP. Our publishing
| | 04:27 | continues in the background. So my site
has been published, and just like when
| | 04:33 | we publish to a MobileMe account, we
have the option of clicking the Announced
| | 04:36 | button to send an email to your friends,
letting them know about my site and
| | 04:39 | sending them a link. I can click Visit
Now to Visit the Site, or just click OK
| | 04:43 | to dismiss this dialog and continue
working on my site, but let's click To
| | 04:46 | Visit Now. So here I'm in my
web browser and you can see I'm at
| | 04:51 | garrickchow.com/travel. That's the
folder I put my site into, and of course
| | 04:55 | travel is also the name of my iWeb site,
which is why you see travel twice in
| | 04:58 | here, but here we're looking at my site live
on the web on a non-MobileMe hosting service.
| | 05:04 | I can see even the features like
skimming over my photos in my album still
| | 05:13 | work. So now that my FTP connection
is all setup, if I make any changes or
| | 05:21 | edits to my pages, uploading these
changes is a simple matter of just clicking
| | 05:24 | the publish site button again. So
that's how we setup and use the new FTP
| | 05:28 | publishing capability of iWeb '09.
| | Collapse this transcript |
| Password-protecting your site| 00:00 | We're almost done with our iWeb
tutorials here, just a few more odds and ends
| | 00:03 | to cover. In this movie I want to show
you iWeb's password protection feature.
| | 00:08 | This is a really useful feature if you
have a site that you only want certain
| | 00:10 | people to access. Because when you
publish your site to the web, you're putting it
| | 00:14 | out there for anyone to stumble
across. Lots of times that mabe what
| | 00:17 | you want, to have total strangers come
and browse your site, but there may be
| | 00:21 | times when you only want certain
people to be able to access your site.
| | 00:24 | To password protect your site, select
your site in the iWeb sidebar. Now as I
| | 00:28 | mentioned earlier, password protection
is only available if you're publishing
| | 00:31 | your site to MobileMe. So select
Publish to MobileMe from the Publish To menu.
| | 00:36 | That gives us this Privacy area and I
can check Make my published site private.
| | 00:42 | Notice that says site, not page. When
you add password protection, you add it
| | 00:46 | for your entire site. So only people
with the right username and password will
| | 00:50 | be able to see any pages at all
within your site. So you're going to need
| | 00:53 | to enter a username and a password.
| | 00:55 | Now, these are items that you're going
to be sharing with other people who want
| | 00:58 | to see your site. So you're warned here
not to use your MobileMe username and
| | 01:02 | password or else you're basically
giving everyone complete access to your
| | 01:05 | MobileMe account. Generally not a good idea.
| | 01:07 | So I'll stick with a username and
password I'm comfortable distributing to a
| | 01:10 | select group of people. Let's make
it garrickis / awesome. I have no problem
| | 01:17 | with people typing that information in.
| | 01:19 | Note that you do have to enter both
the username and a password and they are
| | 01:22 | case-sensitive. So if you use capital
letters, be sure to let your visitors
| | 01:26 | know which letters are uppercase. Now
usernames have to be between 3 and 20
| | 01:30 | characters and your password has to
have a minimum of six characters and
| | 01:33 | it's limited to a total
of 20 characters by iWeb.
| | 01:36 | That's there is to that. To put the
password protection into effect, click Publish Site.
| | 01:45 | iWeb will republish my site
to my MobileMe account and now when
| | 01:51 | I click Visit Site now, I'm presented
with this dialog box asking me for my
| | 01:55 | username and password. If I don't know
the username and password, I can't get
| | 02:01 | into the site. So let me type the
proper username and password in here, and
| | 02:10 | there is my site, pretty cool!
| | 02:12 | This is another feature that often
times isn't the easiest thing to implement
| | 02:15 | on other web design programs, but iWeb
makes it a snap to password-protect your site.
| | 02:18 | Just remember that password
protection is only available if you publish
| | 02:22 | your site to a MobileMe account.
| | 02:24 | To remove password protection, just
uncheck Make my published site private,
| | 02:28 | and then click Publish Site again, and
then visitors will no longer be required
| | 02:34 | to enter a username and password to see
your site. So if I visit my site now,
| | 02:41 | no username and password are required.
| | Collapse this transcript |
| Facebook notifications| 00:00 | If you're one of the millions of
people in the world who have Facebook
| | 00:03 | accounts, you're probably familiar
with the concept of Facebook updates.
| | 00:07 | In most cases, unless you've changed your
Privacy settings, Facebook alerts your
| | 00:10 | friends when you have made changes
to your profile or performed other
| | 00:13 | activities that your
friends may want to know about.
| | 00:16 | iWeb '09 comes with ability to notify
Facebook when you've made changes to your
| | 00:19 | iWeb sites, thereby letting your
friends know that there is new content on your
| | 00:23 | site for them to check out. Although
iWeb also has the ability to generate an
| | 00:26 | email for you in which you can let
friends know about your changes, using
| | 00:30 | Facebook alerts can be much quicker
and doesn't require any other interaction
| | 00:33 | on your part once you've linked your
iWeb site here to Facebook account.
| | 00:37 | To link your site to your Facebook
account, select the site in the iWeb
| | 00:40 | sidebar. You might have to scroll down
to see the Facebook area and just check
| | 00:46 | Update my Facebook profile
when I publish this site.
| | 00:51 | Next you will be asked to enter your
Facebook account information and confirm
| | 00:54 | that you really want to give iWeb the
ability to update your Facebook account info.
| | 00:58 | So I'm going to enter my email
address and my password. I suggest
| | 01:03 | checking Keep me logged in to iWeb, so
you don't have to enter that information
| | 01:05 | each time. Then click Login. Then
when you see the message that you can now
| | 01:14 | close the window, go ahead and click Finish.
| | 01:18 | So now, any time I update my site, a
new message will appear in my Facebook
| | 01:21 | profile and on my friend's Facebook
home pages, letting them to know that I've
| | 01:24 | made changes to my site and giving them
a link to the site right there on their
| | 01:27 | Facebook pages. You can see here it's
telling me Updates will be published to
| | 01:31 | 'Garrick Chow', my account.
| | 01:33 | So let me just make a minor change
to my site here. I'll just add an
| | 01:39 | exclamation point at the end of the
sentence. That should be enough of a change.
| | 01:43 | Then I click Publish Site.
| | 01:54 | My site has been published.
I'm not going to bother
| | 01:56 | looking at right now, but if I go out
to my Facebook page, this is a Facebook
| | 02:00 | profile I've set up and you can see I
just have some minor information in here,
| | 02:04 | but let's refresh this now.
| | 02:07 | You can see right here under Recent
Activity, it tells me Garrick's iWeb site
| | 02:11 | travel has been updated. So this
message will appear not only on my profile page,
| | 02:14 | but on the pages of all of my
Facebook friends as well. When they click
| | 02:18 | the link, they'll be taken right to my site
where they can check out the changes I've made.
| | 02:24 | So if you do have a Facebook account,
you'll probably want to link your iWeb
| | 02:27 | site to your Facebook account, so your
friends will be able to know when you've
| | 02:30 | updated your site as soon as you've
updated your site and they can go check it out.
| | Collapse this transcript |
| Managing multiple sites| 00:00 | I've mentioned a couple times
throughout these movies that you can create and
| | 00:03 | manage more than one website in iWeb, and in
this movie I want to explore that topic a little.
| | 00:08 | Now depending on how you have your
websites setup, you may or may not need a
| | 00:11 | second site. If, for instance, your
website is a general, all-purpose site
| | 00:15 | about you, then you can probably just
continue to add more pages about yourself
| | 00:18 | and your personal activities to your
existing site. But if you want to start
| | 00:21 | posting pages that have little to
nothing to do with your current site, for
| | 00:25 | example, maybe you want to start a
business related site that's separate from
| | 00:27 | your personal site; it makes
sense to create a second site.
| | 00:31 | To create a new site in iWeb, simply
select File > New Site. And just like the
| | 00:36 | first time you opened iWeb, you're
presented with all the page themes and their
| | 00:39 | templates. I'll go with Leaf Print
this time around. That's the other new
| | 00:43 | template in iWeb '09 in addition to Fine
Line. Let's start with the About Me page.
| | 00:52 | Remember, you can change your theme
at any time if you change your mind.
| | 00:54 | Now I'm on my way with creating the second
site. The process is exactly the same as
| | 00:59 | working with my previous site, just
create new pages, pick a template and
| | 01:02 | customize the pages. Notice both
sites are listed in the sidebar.
| | 01:05 | So remember to name your site with a
unique name. I'm going to call this one
| | 01:11 | photojournal. Notice changing the name
in the sidebar also changes the name in
| | 01:17 | the Site name filed. So you
could type in either one here.
| | 01:22 | For this example, I'm just going to
publish this single page as is so you can
| | 01:25 | see how this works when I visit my site.
I'll just click Publish Site and I'm
| | 01:31 | publishing to my MobileMe account, which was
the default setting, and now I'll visit my site.
| | 01:41 | So the URL or address for new site is
web.me.com/ my user name /photojournal,
| | 01:48 | which is the name of my site and then
the page I'm on is About_Me.html. Now if
| | 01:52 | I just go to web.me.com/ my account name,
like so, the default site that still
| | 02:00 | comes up is the Travel site.
| | 02:01 | Now if at any time I want my
photojournal site to be the default site for this
| | 02:05 | address, all I've to do is go back to
iWeb and drag my photojournal site up
| | 02:11 | until it's the top item in the sidebar. Then
I republish the site. Click Visit Site Now.
| | 02:25 | Now again, that still takes me to the
default URL here, but now if I get rid of
| | 02:29 | the photojournal/About_Me.html and just
have web.me.com/garrickchowiweb09, now
| | 02:36 | my photojournal site is the
default site for that basic address.
| | 02:38 | So that's how you work with multiple
iWeb sites. You can create as many iWeb
| | 02:43 | sites as you like or have room for on
your hosting service. Also bear in mind
| | 02:46 | that you're not limited to publishing
all your sites on your MobileMe account.
| | 02:50 | If you need or want to host one of your
sites on a third party hosting service,
| | 02:54 | just select that site and then choose
FTP server for that particular site, and
| | 02:59 | then fill out the information that your
hosting provider provides to you as we
| | 03:01 | discussed in a previous movie.
| | 03:02 | Now if you didn't watch that movie on
publishing via FTP, be sure to go back
| | 03:06 | and watch it for the
necessary information and details.
| | Collapse this transcript |
| Deleting and unpublishing sites| 00:00 | There may come a time when you want to
completely remove your site from your
| | 00:03 | MobileMe hosted account. Maybe you
don't feel like working on the site any more
| | 00:06 | or maybe you are going to be creating
a brand new site and you just want to
| | 00:09 | remove all traces of current site from
your MobileMe account. You have already
| | 00:12 | seen that deleting a page from your
site is as easy as selecting it in the
| | 00:15 | sidebar and hitting the Delete
key on your keyboard. The pages are
| | 00:19 | automatically removed and it also
disappears from all the navigation bars on
| | 00:22 | the other pages as well. And then when
you click the Publish Site button, iWeb
| | 00:26 | will delete that page from the
published version of your site.
| | 00:29 | Now if you have multiple sites like
iWeb like I do here, deleting your second
| | 00:33 | site is super easy. Just select the site,
hit the Delete key and it's gone.
| | 00:39 | If you do this by accident which isn't
that hard to do, because you just have to
| | 00:42 | select it and hit the Delete key on
your keyboard. Getting your site back is
| | 00:45 | just a matter of choosing Edit > Undo
Delete Site. But make sure you don't quit
| | 00:49 | iWeb before you select Undo or else
your site will really be gone. But in this
| | 00:53 | case, I do want to get rid of it so I'll
just hit the Delete key again and it's gone.
| | 00:57 | But if I try to delete my travel site
now, I can't do it. iWeb doesn't allow
| | 01:03 | you to delete your only site. To get
rid of all of these pages you will have to
| | 01:06 | select each of them one at a
time and press the Delete key.
| | 01:09 | Now before we do so, let me show you
how to make a backup of your site, just in
| | 01:12 | case you change your mind later. I'm
going to go to the Finder and in your Home
| | 01:16 | folder in Library, Application Support,
iWeb, you will find a single file in
| | 01:24 | here called domain. This file actually
contains all of your sites pages, images
| | 01:28 | and all of its other related files.
Before you delete your site, I suggest
| | 01:32 | making a copy of this file and storing
it somewhere else on your Mac. This is
| | 01:36 | also how you would go about copying
your iWeb site to another Mac or simply
| | 01:39 | backing up your iWeb site.
| | 01:40 | If, for example, you are upgrading Mac
and you want to move your entire site to
| | 01:44 | your new computer, just copy this
domain file into the same folder on your new
| | 01:47 | Mac and then fire up iWeb.
Everything should look exactly the same.
| | 01:51 | I don't suggest working on your
website on two Macs simultaneously though and
| | 01:55 | Apple doesn't recommend that either.
Only copy this file as a backup or to move
| | 01:58 | it to another Mac. So I'm going to
hold down Option key on my keyboard, just
| | 02:02 | drag this to my desktop and that
will make a copy of the file there.
| | 02:06 | You might also want to do this if you
are about to try something drastic to
| | 02:09 | your website in terms of its design.
By making a copy of the domain file to
| | 02:13 | your Desktop or somewhere else you
are free to do whatever you want to your
| | 02:16 | current site and if you completely
mess it up just drag the earlier copy back
| | 02:19 | into the iWeb folder and you will
have reverted back to the original.
| | 02:23 | So with this copy sitting safely on my
Desktop, I can now go back to iWeb and
| | 02:27 | start deleting pages. I'll just start
with the bottommost page, although I
| | 02:31 | should say that if you do delete an
album page and again, in this case it holds
| | 02:35 | three different photo galleries. If I
delete the album page, those three photo
| | 02:39 | galleries remain but they are now on
their own separate pages and they appear
| | 02:42 | in the Navigation bar. Just a little
side note there but to delete these pages
| | 02:46 | I just keep hitting Delete.
| | 02:48 | Now when I try to delete the final page,
the problem here is that iWeb won't
| | 02:52 | let me have a completely blank site. It
deleted that Welcome page but now it's
| | 02:56 | telling me I have to choose another
template. So I need to choose at least one
| | 02:59 | template page. I'm just going to select
the White template and choose the Blank
| | 03:04 | page there. And now just type a message
saying, This site is closed. It's been
| | 03:13 | fun! Or something like that.
| | 03:15 | So now these people visiting your
old address will know that the site was
| | 03:18 | purposely removed and the problem
isn't on their end. So when I click Publish
| | 03:22 | Site, all those pages that I manually
deleted will be removed from my MobileMe
| | 03:27 | service space and just the single
page will be up there letting people know
| | 03:31 | that the site is gone.
| | 03:31 | So I'll click Visit Site Now and you
can see this is the only page that's
| | 03:38 | available on the site now. But if you
are in a situation where you want to
| | 03:42 | completely remove a site all together
from your MobileMe account, what you will
| | 03:46 | have to do is go to your iDisk and
again, we can do that by going to the
| | 03:49 | Finder, choosing Go, iDisk, My iDisk.
Go into the Web folder and inside the
| | 03:56 | Sites folder again, this is where iWeb
stores all of the files related to your
| | 04:01 | iWeb sites and what's you want to do is
just drag everything in here into the Trash.
| | 04:05 | Now you might not have authorization
to drag everything out of here but go
| | 04:09 | ahead and just drag everything and it
won't delete the things that you don't
| | 04:12 | have the option to. But notice it says
these items will be deleted immediately.
| | 04:15 | So I'll say Delete.
| | 04:17 | Now depending on how large your site
is it could take a while to delete all
| | 04:20 | these files. So I'm getting this
message saying "The operation can't be
| | 04:24 | completed" because I don't have
sufficient privileges for some of the items.
| | 04:27 | So I'll OK. So some of these items do have
to remain like this _gallery folder and
| | 04:32 | the index.html file. But now if I go
back and choose to visit my site again,
| | 04:37 | notice I get this page not found
message. So that site really is gone.
| | 04:43 | So I know I said earlier I don't
recommend that you dig around in your iDisk
| | 04:47 | Web folder, but this is really the
only way to completely get rid of all your
| | 04:54 | iWeb files from your MobileMe account.
Just remember to make that backup of the
| | 04:58 | domain file before you do so, because
you never know when you might want to
| | 05:01 | bring back a site you previously deleted.
| | 05:04 | Again, if I made a horrible mistake
here... Let me quit iWeb and I have my
| | 05:09 | changed my mind, all I need to do is
go back to my Home folder, Library,
| | 05:13 | Application Support, iWeb and I can
replace this current domain file with the
| | 05:18 | one I copied previously. And now when I open up
iWeb again, everything is back to the way it was.
| | 05:29 | And if I wanted to republish my site to
the web, all I have to do is click the
| | 05:32 | Publish Site button. Now its current
grayed out but iWeb hasn't detected that I
| | 05:35 | made any changes to my site. But if
I just come in here and make a quick
| | 05:39 | change, that immediately activates
the Publish Site icon so now I can click
| | 05:45 | that to republish my entire site to the
web and all those files that I deleted
| | 05:50 | from my iDisk will be automatically regenerated.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | And that does it for iWeb '09 Essential
Training. I hope you have enjoyed these
| | 00:04 | movies on iWeb and that you will be
able to use what you have learned here to
| | 00:06 | create web pages filled with
your own pictures, music or videos.
| | 00:10 | For more information on the other iLife
applications be sure to check out the
| | 00:13 | training titles on iPhoto, iMovie, iDVD,
GarageBand and iTunes on the lynda.com
| | 00:19 | Online Training Library.
| | 00:21 | So until next time, have fun
with iWeb. We'll see you soon.
| | Collapse this transcript |
|
|
