1. Creating a Web Site with MuseSite planning and wireframes| 00:00 | When you first start to plan a web site
it is a good idea to create a site map
| | 00:04 | or structure of your site.
| | 00:06 | A site map is an outline that shows
all of the pages of your web site and how
| | 00:10 | they can interact with each other.
| | 00:11 | A simple site map might only have
five pages, but a complex site could have
| | 00:16 | hundreds or even more.
| | 00:17 | Let's take a look at how we
can create a site map with Muse.
| | 00:21 | Inside of Muse, to create a new site,
we can press the New Site button inside
| | 00:24 | the Welcome screen.
| | 00:25 | We can also go to the File menu and
choose New Site or press Command+N or
| | 00:29 | Ctrl+N. In the New Site dialog box,
we can change the width and height and also
| | 00:35 | center-horizontal the web site,
control our margins and columns and padding.
| | 00:39 | But for right now we're
going to stick to defaults.
| | 00:41 | When you create a site, your first
view is a Plan view. This as an overlay of
| | 00:47 | the entire web site. Think of this
as the Pages panel inside InDesign.
| | 00:52 | Right now, we only have one page, the homepage,
| | 00:54 | but if I want to add more, I can come
over to this page and press the plus
| | 00:58 | button to make an additional web page.
| | 00:59 | I'm going to keep adding a few more;
| | 01:02 | in fact, I'm going to add a
total four more for a total of five.
| | 01:05 | Now to name these, I can go to Home
and just double-click, and I'm going to
| | 01:10 | rename this in capital letters HOME.
| | 01:13 | The next one, I'm going to call
THE KOFFEE with a capital K, KART MAP,
| | 01:21 | ABOUT, and CONTACT.
| | 01:24 | So right now I have my top-level pages,
but I want to have some sub-pages, or
| | 01:30 | children pages, underneath these.
| | 01:32 | So underneath KOFFEE I'm going to add
another page and one next to this, and
| | 01:37 | we're going to call this
one PREPARATION and ORIGINS.
| | 01:46 | Now if I decide I want to add any more
pages to this, I can go up to the top and
| | 01:50 | add another one to the left up here,
and if I call this one SOCIAL MEDIA,
| | 01:53 | at any point I can reorder these.
I can drag it and if I want to put it
| | 01:58 | underneath CONTACT, when I drag,
you see this blue box shows up.
| | 02:02 | That means it's going go
right underneath CONTACT.
| | 02:05 | If I change my mind and want to put it
next to it, I can drag up and on either
| | 02:08 | the left or the right,
| | 02:09 | I can put it where I want it to be.
| | 02:11 | If I no longer need this page,
I can hit the X and remove it.
| | 02:15 | As you add pages to your site,
eventually you might not be able to see
| | 02:18 | everything all at once.
| | 02:19 | In order to see everything, at the top
of our screen we have a size scrubber.
| | 02:22 | As I drag this smaller, I'll be able to
see all the pages, and if I want to
| | 02:27 | see them bigger, I can
just drag it to the right.
| | 02:29 | For now I'm going to leave it a
little bit smaller, and I'm going to remove
| | 02:33 | these additional pages.
| | 02:39 | At the bottom of the page,
we have a Master Page section.
| | 02:42 | A master page is very similar to the
master pages inside Adobe InDesign and
| | 02:46 | Microsoft PowerPoint.
| | 02:47 | What a Master page is is a way to put
consistent content on every single page.
| | 02:51 | For example, if I want the background
to be blue on every page, I can just
| | 02:54 | change it on the master, so let's do that.
| | 02:56 | I'm going to double-click on the master
| | 02:57 | called A-Master and when I do
this, I'm going to be in a brand-new view
| | 03:01 | called the Design view.
| | 03:03 | Now in this view I want to change the
background page color, so up here there
| | 03:07 | is an option called Fill, and I'm going to
change the fill of the page to a dark blue.
| | 03:11 | Now that I've done this, I'm going to
close the A-Master and back in our Plan
| | 03:16 | view you're going to see every single
page updates and is now blue, because it's
| | 03:20 | connected to the A-Master.
| | 03:21 | You can see right
underneath we have the word A-Master.
| | 03:25 | If I go to any of these pages and I
try to edit, I can't select anything,
| | 03:30 | because it is locked from the master.
| | 03:32 | And now let's go and create another master page.
| | 03:34 | I'm going to add another master page
over here, and I'm going to call this one
| | 03:37 | Red, and I'm going to
back and name this one Blue.
| | 03:40 | So I'll double-click down
here and call this Blue.
| | 03:43 | On the Red master page, I'm going to
go and change the background to be red.
| | 03:50 | Back in the Plan view we'll see that
I've got a blue page and a red master page.
| | 03:54 | If I decide that I want any of my pages
to be red, all I have to do is drag the
| | 03:58 | red page on top of the blue page,
and those pages will update.
| | 04:04 | There is also another way to do it.
| | 04:06 | If I want this page to be red, I can
just right-click and change it from Master to Red.
| | 04:11 | You'll notice that I have
the master name underneath.
| | 04:15 | If I don't want to see these anymore,
I can uncheck the Master Badge check box
| | 04:18 | at the top, and this frees up a little more
space. And I'm going to leave this on for now.
| | 04:23 | You'll also see that there is a
thumbnail preview in all of these pages.
| | 04:26 | If I don't want to see this, I can just
turn this off, and this will turn off the
| | 04:30 | preview, but it will also increase performance.
| | 04:33 | If you're working in a web site with
lots of lots of pages, it might seem a
| | 04:36 | little slow in the Plan view,
so you can always turn this off.
| | 04:39 | But for now, it's a pretty simple
site, so we're going to leave that on.
| | 04:41 | Now if I go to this KOFFEE page and put
content on it--so I'm going to grab this
| | 04:46 | Rectangle tool and I'm just going to
draw another frame, this white frame here--
| | 04:50 | and if you go back to the Plan view again,
we can see that I see this white frame.
| | 04:55 | If I change it from blue to red,
it's only the background that's
| | 04:59 | changing, nothing else.
| | 05:00 | This actual box didn't change at all.
| | 05:02 | So you can change the background elements
at any time by just changing your masters.
| | 05:08 | Be sure to take your time to create at
least one master page for your web site.
| | 05:12 | This will ensure
consistency between all of your pages.
| | 05:15 | Master pages are also a great location
to put information that needs to be on
| | 05:18 | every page, like menus, links,
and even headers and footers.
| | Collapse this transcript |
| Creating a header and footer| 00:00 | When building web sites, individual
pages often vary in length based on the
| | 00:04 | content on each page.
| | 00:06 | In order to maintain a consistent
appearance across pages of unique content, it
| | 00:10 | is important to establish header
and footer regions on each page.
| | 00:15 | Inside this file we're going to
begin by going to the master page.
| | 00:18 | So I'm going to come down to
the A-Master and double-click.
| | 00:21 | On the master page there are series of
guides that we need to take a look at so
| | 00:25 | we can understand how each
of them works with each other.
| | 00:27 | At the top of the page we have a
guide that says it's the top of the page.
| | 00:31 | Whenever I drag this, it's going
to move to actual top of the page.
| | 00:35 | You can see that the white
background here, that's the page itself.
| | 00:39 | So as I drag this, I can decide how far
from the top of the browser I want this to be.
| | 00:43 | The next guide is our header guide.
So I'm going to drag this down and when I
| | 00:48 | release, this area is where at the top
of the header of the page is going to be.
| | 00:53 | That means on every single page of the
web site, this is where the content will be.
| | 00:57 | For example, you would put the menus up here.
| | 00:59 | Now my next step is to grab the
top of the page and bring this down.
| | 01:03 | With the top guide a little lower,
I'm going to grab this top graphic and stick
| | 01:07 | it near the top of the page.
| | 01:09 | In fact, I'm going to bring this down a
little lower, and put KOFFEE KART up here.
| | 01:12 | Now that I have this up here, I'm going
to click on this menu and hold the Shift
| | 01:16 | key to grab the drops, and I'm just going to
drag and put this right up here. There we go.
| | 01:21 | That looks pretty good!
| | 01:22 | Now I'm going to put this guide at
this position for our header, which means
| | 01:26 | everything above this will be the
header and the same on every single page.
| | 01:30 | If I go back to my Plan view and go
to another page, for example maybe the
| | 01:34 | ABOUT page, on the ABOUT page, we'll
see that we have the header showing up at
| | 01:39 | the top of the page.
| | 01:40 | Down here is the actual content.
| | 01:42 | I could select any of this to move this around.
| | 01:45 | You notice the guide right here.
| | 01:46 | This is the header.
| | 01:48 | If I go back to our A-Master and lower
the header to this position, watch what
| | 01:53 | happens on the ABOUT page.
| | 01:55 | This content automatically got pushed down.
| | 01:58 | So this header guide just moves the
content on the body of the page down or up
| | 02:02 | depending on where its location is.
| | 02:04 | Back on A-Master, I'll put this to a good spot.
| | 02:07 | We're going to just drag
this right up to about here.
| | 02:10 | That looks pretty good.
| | 02:12 | Next, we'll come down and take a
look at the bottom of the page.
| | 02:14 | At the bottom of the page
we have a few more guides.
| | 02:17 | Our first guide is our footer guide.
| | 02:20 | The footer will determine the
area at the bottom of the page.
| | 02:23 | Let me kind of put this up a little higher.
| | 02:25 | That looks pretty good.
| | 02:26 | Down here is another guide
which is the bottom of the page.
| | 02:30 | So as I drag this around, we can see
this is the bottom of the page itself,
| | 02:33 | where we want that to be.
| | 02:35 | If I go a little lower--I'm just going
to click the little guide to come down
| | 02:37 | a little bit further--
| | 02:38 | we'll see way at the bottom we have a
guide called the Bottom of the Browser.
| | 02:42 | We can determine where the actual
bottom of the browser is going to be.
| | 02:45 | In fact, I can have these snugged in
next to each other if I want the Bottom of
| | 02:48 | the Browser and Bottom of the
Page to be at the exact same spot.
| | 02:51 | Well, for now I want to
establish this brown area as the footer.
| | 02:56 | I first have to select this.
| | 02:57 | I'm going to close these panels,
| | 03:00 | move this out of the way, and I'm going
to hold my Shift key and grab the other
| | 03:03 | elements like these little
triangles and the copyright.
| | 03:07 | I want all these items to be at the
footer so they show up at the bottom
| | 03:10 | of every single page.
| | 03:11 | So I'm going to center this on the
page and if I just drag this and put this
| | 03:15 | right up here, you would think that
this area will be in the footer, and you're
| | 03:18 | right, because we can see it
adds this little Footer check box.
| | 03:22 | Whenever you have something with either
a Footer check box or have it completely
| | 03:26 | underneath the footer, it will
become a part of the footer forever.
| | 03:29 | I'm going to drag this down so it
snugly fits the bottom of the page and
| | 03:33 | bring the footer down.
| | 03:34 | Now that I have this set,
let's take a look at another page.
| | 03:38 | When I go back to ABOUT, everything looks good.
| | 03:41 | We have the header set up here correctly,
and as I scroll down, here is the body
| | 03:45 | of our content and our footer,
but here's where it gets really interesting.
| | 03:49 | Let's say just I decide I want to
put this picture underneath this text.
| | 03:53 | In most programs you would have to
change the size of the page to make it
| | 03:57 | taller so this picture could fit
underneath here, but because this is set as a
| | 04:01 | footer, it's going to
dynamically add content to the page.
| | 04:05 | So there is no need to be
constantly resizing the height;
| | 04:08 | it will just take care of itself.
| | 04:09 | As I bring content down, it makes it bigger;
| | 04:12 | as I bring it up, it makes it smaller.
| | 04:14 | It's a really, really useful feature.
| | 04:17 | Over time, as you begin to modify or
add additional content to your site, it's
| | 04:20 | a good idea to make sure that your header and
footer regions are still working with your layout.
| | 04:24 | You may find it as you add
more pages to the web site
| | 04:27 | your header will have to increase
in size to make room for all of the
| | 04:31 | additional links.
| | Collapse this transcript |
| Setting up menus| 00:00 | If you're going to be creating a web
site with more than one page, it is
| | 00:03 | critical to build the menu or
navigation system to what users go back and forth
| | 00:08 | in between the pages.
| | 00:10 | While it would be possible to manually
create a hyperlink to each page, there's
| | 00:13 | a much more efficient way
to do this automatically.
| | 00:16 | Using the Widget Library, you can
create a variety of layout elements, like
| | 00:20 | slideshows, pop-up windows,
or in this case, a menu.
| | 00:23 | We're going to begin by going
down to the A-Master page again.
| | 00:27 | I'm going to double-click, and on the
A-Master I want to create a menu system to
| | 00:32 | go up here inside our header.
| | 00:34 | So I'm going to begin by
opening up the Widget Panel menu.
| | 00:37 | If you don't have this open,
just go to Window > Widgets Library.
| | 00:42 | Inside here we have a variety of widgets.
| | 00:44 | There is Compositions and Slideshows
and panels, and we'll be taking a look at
| | 00:48 | these in a later video, but for
now we're going to open up Menu,
| | 00:52 | and inside the menus I've a Bar,
Horizontal, and a Vertical menu.
| | 00:57 | When I choose any of these, you even get
a thumbnail preview of what it looks like.
| | 01:01 | In this case we're going
to use the Horizontal menu.
| | 01:04 | All I have to do is just drag
and drop to put this on the page.
| | 01:08 | Now that this is on the web site,
I'm going to put this right up here inside
| | 01:11 | the header, and you're going to see that it's
auto-populated with the names of each of my pages:
| | 01:16 | HOME, THE KOFFEE, KART MAP, ABOUT, and CONTACT.
| | 01:20 | These come from the Plan stage.
| | 01:22 | Here we have our top-level pages,
and these are automatically, or dynamically,
| | 01:27 | built when you use the menu system.
| | 01:30 | In fact, if I decide to add or remove a
page, my menus will update dynamically.
| | 01:35 | So let's go back to the Plan view,
and I'm going to add one more page.
| | 01:39 | This page I'm going to call Social Media.
| | 01:42 | When I do this, when I go back
to the A-Master, we'll see it's
| | 01:45 | automatically updated.
| | 01:46 | There is no need to try to
manually make another page.
| | 01:50 | If I go back and I delete it, we'll see
right over here it's gone automatically.
| | 01:57 | At this point we only have our
top-level pages. Back in our Plan view, we'll see
| | 02:01 | that here HOME, KOFFEE, and so on are
the top pages, but what if I want these
| | 02:06 | additional pages in our menu system?
| | 02:08 | To do that, I need to go to the
menu and click on this little triangle.
| | 02:12 | When I click on this, I get a variety
of Options, and right here where it says
| | 02:16 | menu Type, currently it's the Top Level Pages.
| | 02:19 | If I want all of my pages
included, I need to choose All Pages.
| | 02:23 | If there are a lot of children pages,
I could manually decide which pages I
| | 02:27 | wanted to see, but in this case
all the pages are perfectly fine.
| | 02:30 | As soon as I choose this,
we'll see I get my dropdown menu.
| | 02:35 | I can click off, and if I want to
preview what this is going to look like, there
| | 02:39 | is a new feature up here called Preview.
| | 02:42 | When I click on Preview, it will
automatically render the page inside Muse, and
| | 02:47 | as I mouse over this, you'll see
that there is a rollover and a dropdown.
| | 02:52 | In fact, if I click on any of these,
it brings me to that actual page.
| | 02:57 | When I'm done with the Preview mode,
I'm just going to click Design to go
| | 03:00 | back to the Design view.
| | 03:03 | If I want to change something about
these dropdown menus, for example if I hit
| | 03:06 | Preview again, you'll see when I mouse
over and drop down, it has a nice gray.
| | 03:10 | Well, the gray doesn't really go with the
design. Maybe I want a darker brown color.
| | 03:15 | So back in the Design view I need
to change something about these.
| | 03:18 | My first step is to select it.
| | 03:20 | When I click down here it's going to
select the whole group of the dropdown menus.
| | 03:24 | I'm going to click to select just the first one.
| | 03:27 | Now that I have the first one
selected, I want to change its appearance.
| | 03:32 | Up here I have my Fill and my Stroke.
| | 03:35 | I'm going to keep the 1-point stroke,
but I'm going to change the fill to
| | 03:38 | a darker brown color.
| | 03:39 | So when I click on this menu,
we'll see right here is a nice dark brown.
| | 03:45 | When I do this, both of them changed,
even though I just have this one selected.
| | 03:49 | The reason for that is because when I
click on this menu, there is an option
| | 03:54 | called Edit Together.
| | 03:55 | That means anything I do to this one
it also affects the other one, so it
| | 04:00 | really saves you a lot of time so you
don't have to manually change each button.
| | 04:05 | Now that this is dark brown, I can't
read the text, so I'm going to click again
| | 04:09 | to select just the text, and I'm going
to come over to my Text panel and inside
| | 04:14 | my Text panel I can change the
Color from black to white, there.
| | 04:20 | Now that's a little more readable.
| | 04:21 | Let's preview again to see what this looks like.
| | 04:23 | When I mouse over THE KOFFEE, we see
I've got Preparation, but I still see that
| | 04:30 | rollover of that gray,
and I don't really want that.
| | 04:33 | To change it, I'm going to go back
to my Design view, and with this frame
| | 04:37 | selected, there is a new panel I need to go to.
| | 04:40 | It's called the States panel.
| | 04:41 | When I go to the States panel,
it's going to show each individual state, or
| | 04:46 | version of that particular widget or button.
| | 04:49 | Right now, it's Normal.
| | 04:50 | That means that's how it looks all the
time. But when I roll over it, I want it
| | 04:54 | to look a little different.
| | 04:55 | So right now the Rollover State is this gray.
| | 04:57 | If I select this, this will
update, and now I can make my change.
| | 05:02 | And maybe I want this to be a darker brown.
| | 05:05 | Now when I hit Preview, when I
roll over, it goes darker. So we can make our
| | 05:12 | changes to the States panel to affect
each individual state of that button.
| | 05:17 | For now I'm going to go back
and select the top-level group.
| | 05:20 | In the menu I'm going to change it from
All Pages just to the Top Level Pages,
| | 05:24 | because I actually don't
want to see the dropdown menus.
| | 05:27 | With this set, now I want to change the
format of all of these. To begin with,
I
| | 05:32 | want this to be spaced out a little more.
| | 05:34 | So with the whole group selected, there
is another panel called the Spacing panel.
| | 05:37 | When I select this, I have my
Gutter, or the space between them.
| | 05:42 | I can change the Height of this
and it will space all of them out.
| | 05:45 | I'm going to bring this to about 30.
| | 05:49 | Now that they're spaced out a little
more, my next step is to change the
| | 05:52 | appearance of these.
| | 05:54 | Right now, it's a little dark.
| | 05:55 | I can't really read the text when it's
black on brown, so I'm going to select
| | 05:59 | the first one for HOME, and I'm going to
go back to my Text panel, and I'm going
| | 06:02 | to change the Color of the text to white.
| | 06:06 | Next, I'm going to choose the font
Helvetica and we'll make this be a little bigger.
| | 06:11 | I'll go to 14 points, and we'll make it bold.
| | 06:14 | That's looking pretty good.
| | 06:15 | If I hit Preview, you'll see HOME still has
that gray, and I don't really like that gray.
| | 06:22 | So back in the Design view I'm going
to go to my States panel and I'm going
| | 06:26 | to say for the Rollover I don't want gray.
In fact, I don't want to have any Fill at all.
| | 06:30 | We're just going to make that be
transparent. Same thing for Mouse Down and Active.
| | 06:43 | But what I do want to happen is a
color when I roll over on this, so in the
| | 06:46 | Rollover I'm just going to
change the color to a nice yellow.
| | 06:52 | Let's preview and see how it looks.
| | 06:55 | Now each page has a nice yellow rollover.
| | 06:57 | Now, looking at my States, there is
one more that's a little interesting.
| | 07:03 | Normal means this is how it looks all the time.
| | 07:06 | Rollover is when your
mouse rolls over the button.
| | 07:09 | Mouse Down is when you're
clicking and it changes its appearance.
| | 07:12 | But Active is a little unique.
| | 07:14 | What this means is when you're actually
on the HOME page, it can look different.
| | 07:18 | So if I was on the KART MAP page, it
would look different, and if I was on the
| | 07:21 | HOME page, it could look different.
| | 07:22 | It lets you know that you're
visiting that particular page.
| | 07:25 | Now, rather than changing the color, I'm
going to change the appearance of this.
| | 07:30 | With this selected, I'm going to go up to Fill.
| | 07:32 | Now, in Fill I could have a
background color around the square, but I'm
| | 07:36 | not going to do that.
| | 07:37 | I'm going to use something a little different.
| | 07:39 | There is an option for an Image.
| | 07:41 | When I click on Image I can link
to an actual image and put a picture
| | 07:46 | underneath the text.
| | 07:47 | I'm going to go into the Exercise
folder/links, and look for top-nav-over.png
| | 07:53 | and I'm going to select it.
| | 07:54 | As soon as I do this, it shows up inside here.
| | 07:56 | But right now it doesn't really fit,
because there isn't enough room.
| | 07:59 | So what I need to do is I need to
deselect and select the whole group again, and
| | 08:05 | I'm going to change the
Height of this to 60 pixels.
| | 08:08 | As you drag, you'll see a little tooltip there.
| | 08:10 | I'm going to get it to around 60 pixels.
| | 08:12 | That looks pretty good.
| | 08:13 | Drag this up a little higher and center this.
| | 08:17 | Now that I have this set, let's
preview and see how it looks. The rollover is
| | 08:21 | working correctly, and if I go to the
ABOUT page, when I click, here's the badge
| | 08:26 | letting me know I am on ABOUT,
and THE KOFFEE, that I'm on THE KOFFEE.
| | 08:31 | But it's not looking right.
| | 08:33 | You see how it's aligned to the
left? Maybe I want this centered.
| | 08:36 | Back in the Design view, if I select any
one of these and I go down to Active, I
| | 08:41 | want to change its position from
the top-left corner to the center.
| | 08:45 | Now that it's centered, that looks good.
| | 08:47 | That's what I'm looking for.
| | 08:49 | So inside Preview, when I click,
it's behaving the way that I expect.
| | 08:55 | By taking advantage of the Widget
Library to create your menus, you can save a
| | 09:00 | lot of time and frustration by
having your menus correct and up to date.
| | 09:03 | It is possible to have more than
one menu system in your layout.
| | 09:07 | For example, you could have a
vertical menu at the side of your page and a
| | 09:10 | horizontal at the top.
| | 09:12 | Try experimenting to see what
other types of menus you can create.
| | Collapse this transcript |
| Placing graphics| 00:00 | When it comes to working with web
graphics most designers are already familiar
| | 00:04 | working with Photoshop,
Illustrator, and Fireworks.
| | 00:07 | The good news is that you can continue
to use these programs to create and edit
| | 00:11 | your graphics, then place them into
Muse just like you would with InDesign.
| | 00:15 | So when we're talking about web-graphic
formats for Muse we need to decide what
| | 00:20 | type of formats we can use inside here.
| | 00:23 | So the first one we can use is JPG.
| | 00:24 | JPG is probably the
universally most common image format.
| | 00:28 | JPGs are generally used for photographs,
| | 00:31 | so it's great for just the
representation of any photo.
| | 00:34 | They are very small files, but you
should realize they are lossy. That means
| | 00:38 | whenever you reset the file again and again
inside Photoshop it will degrade over time.
| | 00:44 | The next format is GIF.
| | 00:46 | GIF is great for logos and
artwork with a flat color.
| | 00:48 | Since you can see the logo on the
right-hand side, it'll work great as a GIF,
| | 00:53 | because it's type and has lots of flat color.
| | 00:56 | They can even support some basic
animation inside Photoshop or Fireworks, and
| | 01:00 | they do have limited transparency support.
| | 01:03 | The next format is PNG.
| | 01:04 | PNGs are great because they have
amazing transparency. That means if you have a
| | 01:09 | drop shadow or images fading into
another image, odds are it's a PNG file.
| | 01:13 | PNG file are a little larger than
both JPEGs and GIFs, but that's okay,
| | 01:19 | because they are lossless.
| | 01:21 | That means they don't degrade over time.
| | 01:23 | You can keep re-editing that file
and it will not recompress itself.
| | 01:27 | Another great feature is the fact that
you can roundtrip the Fireworks. Because
| | 01:31 | PNG is the native format of Fireworks,
I can place a PNG Fireworks file inside
| | 01:36 | Muse, edit original, make a
change, and it updates back inside Muse.
| | 01:40 | The last format, PSD. PSD files are
Photoshop documents, and they work with buttons.
| | 01:47 | So if you create a button inside
Photoshop, you can have a different layer for
| | 01:51 | each state inside Muse.
| | 01:52 | Then when you bring it in, you can
map the layer to the particular state.
| | 01:57 | When you're done if you ever want to
make a change, you can edit the original
| | 02:00 | inside Muse, go to Photoshop, make a
change, and it updates back in Muse again.
| | 02:05 | Now that we understand the graphic formats,
let's take a look at how they work inside Muse.
| | 02:09 | We're going to begin by going to the About page.
| | 02:14 | On the About page, I'm ready to bring
in a picture, so I'm going to go to File >
| | 02:18 | Place, or Command+D or Ctrl+D, and in fact
this is the same shortcut as inside InDesign.
| | 02:24 | When I do this I'm going to go to my Links
folder and I'm going to look for MeetKevin.
| | 02:31 | Now I'll have loaded cursor and I can click
and release and it will get placed at 100%.
| | 02:34 | If I try to click and drag from
any corner, it will scale the picture
| | 02:39 | automatically--there is no
need to hold the Shift key.
| | 02:42 | If I decide I want to crop my image,
I'm going to go up to the top of the page
| | 02:46 | and grab my Crop tool, and I
can click and drag to crop it.
| | 02:49 | Well, I still have my Crop tool, I can
even grab the content and position it again.
| | 02:55 | To back to my Selection tool, I could
hit V or just click on the Selection
| | 02:58 | tool and reposition it.
| | 03:00 | At any point with my Selection tool I
can double-click to select the content,
| | 03:04 | reposition, and even change it's
scaling. And then when I'm done I'll just
| | 03:09 | deselect and select it again.
| | 03:11 | If I want to use this image as text wrap,
in InDesign you could just place this
| | 03:16 | over here and apply Text Wrap.
| | 03:18 | But inside Muse it works slightly different.
| | 03:20 | I'm first going to select my image, cut
it to the clipboard, and then paste in
| | 03:25 | the beginning of this text flow.
| | 03:26 | Well, now it's part of the flow as an
anchored object, but it doesn't look very
| | 03:30 | good. But to fix that I'll go over to
my Wrap panel and align it to the left.
| | 03:37 | Now that's looking a little better,
and I'm going to put a little offset on
| | 03:39 | the right-hand side and then reposition this
down a little bit. There we go, that looks good.
| | 03:46 | We're going to go to another page,
the Contact page, and we are going to create
| | 03:51 | a Photoshop button.
| | 03:52 | Underneath Get Social, I want
to bring in a Photoshop button.
| | 03:56 | Now I can't press Command+D because
that's a regular place; instead I'm going to
| | 04:00 | go to File > Place Photoshop
button, or Command+B or Ctrl+B on the PC.
| | 04:05 | When I do this everything is
grayed out except for PSD files.
| | 04:09 | When I select this button, I get my
Import options that will let me map the
| | 04:13 | particular layers to particular states.
| | 04:15 | So the Normal State is going to be
the up state, the Rollover State will be
| | 04:20 | rollover, and the Down State will be down.
| | 04:23 | When I click OK I have my loaded cursor
and I can place my Facebook button. When
| | 04:28 | I click Preview--scroll down a
little bit and we can test this--the rollover
| | 04:32 | seems to be working, and when
I click, that's working too.
| | 04:37 | At any point if I ever want to edit
this I can go over to my Assets panel, which
| | 04:41 | is like my Links panel inside
InDesign, and when I go down and find this
| | 04:45 | particular image, you'll see here is my
Facebook button and if I select this, I
| | 04:49 | could right-click and choose Edit Original.
| | 04:51 | When I Edit Original it would go into
Photoshop, I can make my change, hit Save,
| | 04:55 | and it would update.
| | 04:56 | If you would ever be missing for some
reason, I could choose Relink and relink
| | 05:00 | to the original file or even reveal
in the Finder or Explorer.
| | 05:07 | Back in the Plan view, I'm going
to go down to the Preparation page.
| | 05:09 | I want to take one final look at
another way to create graphics.
| | 05:13 | Rather than bringing in a graphic, this time
we're going to do something a little different.
| | 05:18 | I'm going to draw this frame and change it
so there's no stroke or fill. That looks good.
| | 05:25 | Next, I want to put a picture inside here.
| | 05:27 | Now inside InDesign you could just do
File > Place and put it in there.
| | 05:31 | Muse is slightly different.
| | 05:32 | What we're going to do is we're going
to fill this frame with an image. With
| | 05:36 | this still selected, I'm going to go
over to the Fill panel and click on Image.
| | 05:41 | In Image, I'm going to look for
tile-dash.png. I'll click Select and at first you
| | 05:47 | might not even notice anything
happening, but if I deselect, you'll see a tiny
| | 05:50 | little dot here--it is very small.
But what I want to do is change it's Fitting
| | 05:55 | from Original, which means it just
going to put in there once where it is, I'm
| | 05:59 | going to say Tile Horizontal.
| | 06:01 | Now when I do this it's going to
repeat horizontally all the way across.
| | 06:06 | I want this to be centered, so I'm going
to hit the position centered button and
| | 06:09 | now that look pretty good.
| | 06:11 | Now the beauty of this is I can change
the width, and all is going to do is keep
| | 06:15 | tilling and repeating it as much as I want.
| | 06:18 | So this is a great way to have a very
small file and use it to repeat a pattern.
| | 06:21 | I'm going to resize this and
put this in between 1 and 2.
| | 06:26 | I'm going to cut it to my clipboard and
then with my Type tool, I'm just going to
| | 06:31 | paste and put it right here. Then I can
repeat the process as I go in between
| | 06:35 | each of this, put it between
3 and 4 and finally, 4 and 5.
| | 06:42 | Now that I have this done, this is one
big long flow and if I ever make any
| | 06:47 | changes to this, you can
see it flows along with it.
| | 06:52 | File size is much more important on
the web than it is in print design.
| | 06:55 | It is always a good idea to take the
time to optimize your web graphics using to
| | 06:59 | Save for Web command from programs like
Photoshop rather than doing a Save As.
| | 07:03 | For example, the difference between
saving a copy of the photo as a JPG versus
| | 07:08 | saving for the web can be over 400K.
Taking the time to save smaller graphics
| | 07:13 | will significantly increase
the performance of your web site.
| | Collapse this transcript |
| Working with text| 00:00 | Working with text inside Muse is
very similar to other Creative Suite
| | 00:04 | applications, like InDesign or Illustrator.
| | 00:07 | It even has a panel that lets you
control the font, style, and alignment, but
| | 00:11 | there are some web-centric
settings that you need to be aware of.
| | 00:14 | I'm going to begin by going to ABOUT
page, and on the ABOUT page I want to
| | 00:19 | bring in some text.
| | 00:20 | Now, I could copy and paste this from Word or
an email and it would come in perfectly fine.
| | 00:25 | But I can also place text just like you
do inside InDesign, although if you are
| | 00:29 | going to place text,
it does have to be a .txt file.
| | 00:32 | You can't have a DOC or a .rtf file.
| | 00:36 | So we'll go to File > Place, and inside my
Links folder I'm going to look for Text-koffee.
| | 00:44 | With my loaded cursor, I'll get a
preview of the text, and I'll click and
| | 00:47 | place it over here.
| | 00:48 | Now when I select my text, I can
click and drag to select anything that I
| | 00:53 | want or do a double-click to grab a
word, triple for a paragraph, and a quad
| | 00:59 | click for everything.
| | 01:01 | For now let's start with this paragraph.
| | 01:04 | At the top of the screen, I can change the Font.
| | 01:07 | At the top we have something called
Web Safe Fonts and then System Fonts.
| | 01:11 | A Web Safe Font is a Font that appears on
pretty much every computer, Mac or PC.
| | 01:16 | If the Font is Arial,
there's also some alternate fonts.
| | 01:19 | That means if the computer wouldn't
have Arial, it would switch to Helvetica
| | 01:23 | Neue, Helvetica, and finally, Sans-Serif.
| | 01:26 | If I would choose something else, like a
System Font, it would appear fine in my
| | 01:30 | layout, but it would export as a picture.
| | 01:33 | So if I leave this as Arial and hit
Preview, in the Preview mode I'm able to
| | 01:40 | select all of this text, just
like you'd expect in a web site.
| | 01:43 | But if I go back to Design and switch
this text to a System Font, like Adobe
| | 01:49 | Caslon Pro or any other font in this
list, I'm going to get this badge down
| | 01:54 | here, which lets me know that this
particular frame is going to export as a
| | 01:58 | picture, or an image.
| | 02:00 | When I go to Preview, if I try to
select this, it's just one big picture, and
| | 02:05 | when you're doing web design, this is a no-no.
| | 02:08 | You should try to avoid this.
| | 02:09 | It's fine for a subhead, but for the
actual text, it's better if it's text,
| | 02:14 | because then people can select
it and search engines can find it.
| | 02:18 | Back in the Design view, I'm going to
select this paragraph and change it to the
| | 02:21 | Font Georgia, under the Web Safe Fonts.
| | 02:25 | In Georgia, I'm going to make this be
19 point and change my Leading to 150%.
| | 02:36 | Next, we'll change the color of this
font to this gray, and if I want to save
| | 02:40 | this formatting so I can use it again
and again throughout the web site,
| | 02:43 | I'm going to make a paragraph style.
| | 02:46 | Over in my Paragraph Style panel, I'll
create a new style, apply it, and then
| | 02:51 | I'll double-click and give it a new name.
| | 02:54 | We'll call it body text.
| | 02:58 | After making this style, I can
apply it to the other text in the layout.
| | 03:01 | I'll select this paragraph, apply body
text, and then apply it to the last one.
| | 03:14 | Next, we have some subheads that I want to
apply a paragraph style to. So we'll make one.
| | 03:18 | We're going to make this be Helvetica,
22 point, and we'll make it gold.
| | 03:26 | We'll make a paragraph style called
subhead, and then apply it to the rest.
| | 03:37 | Now, if I decide I want to make a
change to one of these, let's say I go to
| | 03:49 | ESPRESSO and I change its color,
and inside my Text panel I add a little bit of space before.
| | 03:58 | If I like what this looks like, you're
going to see there's a plus next to the subhead.
| | 04:04 | That means that there's a style change.
| | 04:06 | Well, if I want to remove that,
I can right-click and I could clear the
| | 04:10 | override, which will make it go back to
the way that it was, but if I like what
| | 04:13 | I did, I can redefine the style and
every instance of that inside my entire
| | 04:17 | layout would update.
| | 04:18 | If I want to make a local change inside a
paragraph, we can create a character style.
| | 04:22 | So I'm going to change this color to a
gold and italic and go to my Character
| | 04:29 | Style panel, and we'll call this koffee kart.
| | 04:33 | Then I'll come down here
and apply it to another spot.
| | 04:45 | As you can see, working with character
and paragraph styles is very similar to
| | 04:48 | InDesign and Illustrator.
| | 04:49 | Now, there is one more web-centric
feature that we should be aware of.
| | 04:53 | When this web site gets exported, I want
to make a change to each of these styles.
| | 04:57 | When I right-click on Character Style,
I have an option called Style Options.
| | 05:01 | This tells me the export tag for the style.
| | 05:04 | Because this means emphasis,
I want to apply an emphasis tag to it.
| | 05:08 | This will help with search engine
optimization and standards-based web design.
| | 05:12 | Over in my Paragraph Styles, my body text,
when I right-click and go to Style
| | 05:16 | Options, is already set to a
default paragraph style, which is perfect.
| | 05:20 | But my subhead has a different option.
| | 05:23 | I don't want this to be a paragraph style.
| | 05:25 | I want this to be an h3, because it's
the third most important thing on the page.
| | 05:31 | Now that I have that set, I'm done
setting my character and paragraph styles.
| | 05:35 | Some people may think that creating
paragraph and character styles is too much
| | 05:38 | work, so they would rather
just be lazy and not create them.
| | 05:42 | However, I highly recommend that you
take the time to create styles, because
| | 05:46 | they'll end up saving you a lot of
time in the long run as you make changes
| | 05:49 | throughout your web site.
| | Collapse this transcript |
| Setting hyperlinks| 00:00 | Hyperlinks are the backbone of the
Internet, and without them you would be
| | 00:03 | forever alone on one web page.
| | 00:05 | With Muse, it is very easy to create
and style hyperlinks in between web pages
| | 00:10 | and within your own sites.
| | 00:12 | When you use the Menu function
inside Muse, it automatically creates
| | 00:16 | hyperlinks to each page.
| | 00:18 | So if I grab my Selection tool on this
master page, you can see that it says a
| | 00:22 | hyperlink to the homepage and to the KOFFEE page.
| | 00:25 | These are dynamically built,
and I don't need to do this at all,
| | 00:29 | so that's one more reason
to use the menu function.
| | 00:31 | But what if you want to create a
hyperlink to something other than each page?
| | 00:35 | Well, for that we're going to get to the
ABOUT page and create our own hyperlinks.
| | 00:39 | What I want to do here is create a
hyperlink to the San Francisco government page.
| | 00:44 | So when I select San Francisco, up here
is an option for Hyperlink, and I'm just
| | 00:50 | going to type in http://www.sfgov.org.
| | 00:56 | And when I hit Enter, it will apply a
hyperlink to that. So if I go into the
| | 01:04 | Preview mode, when I click, it
will go to that actual web page.
| | 01:09 | But what if I don't like how this looks?
| | 01:12 | You can see that this is a dark blue
and when I click Preview and I click on
| | 01:17 | this link, you can see on the roll over,
it's changing to this white color, and
| | 01:21 | that doesn't look very good.
| | 01:23 | I want to control this.
| | 01:25 | So back in my Design view I'm going to
select this hyperlink, and rather than
| | 01:30 | change the URL, there is a Hyperlink option.
| | 01:34 | When I click on this, I have Link Styles.
| | 01:37 | So when I hit, Edit Link Styles, in
this dialog box, I can choose what I want
| | 01:42 | each link style to look like.
| | 01:43 | I'm going to create a new link style,
and I'm going to call this San Francisco.
| | 01:47 | And for the Normal view, I
don't want this blue normal look.
| | 01:54 | I'm going to have gold,
and I don't want an underline.
| | 01:59 | But on roll-over, I'm going to make this be
a slightly darker color and an underline.
| | 02:06 | And for Visited, which means I've
already been to the site, we'll have a dark
| | 02:10 | brown without an underline. And for
Active, we'll choose the same color.
| | 02:18 | Now that I have this finished,
it's still not working as expected.
| | 02:21 | That's because I have to apply
that style to this actual link.
| | 02:25 | So back in Hyperlink, I can choose to
apply the San Francisco style, and now it
| | 02:30 | looks the way that I expect.
| | 02:32 | So now I can go back to the page and
apply that same link to this San Francisco.
| | 02:37 | So I'll click on Hyperlink > San
Francisco, and then if I click on this menu, I
| | 02:42 | have Recently Used Links, so here is
that one that I've already typed in.
| | 02:46 | These are other links that I've
typed in and links to other pages.
| | 02:50 | So I'll choose the one I already
have made, and now it's good to go.
| | 02:54 | If I want to preview it, we can see I
have, on roll-over, that nice behavior.
| | 02:59 | Now there is another type of
hyperlink that we can talk about.
| | 03:05 | It's called an in-page
hyperlink or an anchored link.
| | 03:07 | I'm going to go the Plan view
and then go to Preparation page.
| | 03:12 | What I want to happen is when I click on DRIP
COFFEE I want the page to scroll to DRIP COFFEE,
| | 03:19 | when I click on FRENCH PRESS I want to go
all the way down the FRENCH PRESS, and so on.
| | 03:24 | Well, in order to do that, I have to
first create an anchor or a position on the
| | 03:28 | page that this will be.
| | 03:29 | So I'm going to come up here and
click my anchor to select my Anchor
| | 03:33 | tool, and then I'll click and put this in the
top left, and this is going to be DRIP COFFEE.
| | 03:41 | Next, I want one for FRENCH PRESS, s
o I'm going to come down to the FRENCH PRESS and
| | 03:46 | this time I'm going to go to
Object > Insert Link Anchor.
| | 03:49 | I get the same tool, and I'll put one right here,
lined up, and we'll call this one FRENCH PRESS.
| | 03:59 | And finally, for ESPRESSO I'm just
going to hit the letter A to get the
| | 04:02 | anchor, click, then we'll type in ESPRESSO.
| | 04:10 | Now that I have each of those anchors
set, I have to create the hyperlink, so
| | 04:13 | this can jump down to go to that anchor.
| | 04:16 | So for DRIP COFFEE I'll go on my
hyperlink and here we have Anchors, or in-page
| | 04:22 | links, and I want that to go to DRIP COFFEE.
| | 04:24 | We'll repeat the process
for FRENCH PRESS and ESPRESSO.
| | 04:34 | Now that I have this finished,
we'll preview this in the browser, so I'm going
| | 04:37 | to go to File > Preview Page in Browser.
| | 04:40 | I'm going to maximize this to fill
the screen, and then I'll click on
| | 04:47 | FRENCH PRESS and it will slide down to that
page, and then ESPRESSO will go down to that.
| | 04:53 | Clicking on DRIP COFFEE brings
me right back to the front again.
| | 04:57 | When you're creating hyperlinks on your
web site, be sure that you're including
| | 05:00 | the 'http://www' part.
| | 05:03 | Well, you don't always have to normally
enter that to visit a web site in a web browser,
| | 05:07 | it's always a safest way to ensure
that anyone who is visiting your site,
| | 05:11 | regardless of the browser, will
be able to use your hyperlinks.
| | Collapse this transcript |
| Creating a slideshow| 00:00 | Slideshows are commonly found on a
variety of web sites, including personal
| | 00:04 | portfolios, news sites,
and even online shopping.
| | 00:08 | However, at first glance they may seem
like they would be really hard to make.
| | 00:12 | Luckily, this isn't the case because
Muse has a variety of widgets that help
| | 00:16 | make their creation easy.
| | 00:18 | Let's go to the Slideshow page and
open up our Widgets Library panel.
| | 00:22 | Inside here, we have a variety of widgets,
and let's take a look at a few of them,
| | 00:26 | the first one is Blank.
| | 00:28 | When I drag this over here, you
can see when I click on each color,
| | 00:33 | it jumps to that particular color.
| | 00:34 | If I go into my Preview mode, you'll see
there is actually a small transition of
| | 00:38 | a fade going in between each one.
| | 00:40 | Now, I could replace each of these with
a picture if I wanted to, but let's take
| | 00:46 | a look at a few more. I am going to delete this widget
and back in Compositions, let's take a look at Featured News.
| | 00:57 | Featured News is a little different.
| | 00:59 | You can see on rollover the content is
changing, so you can combine text and
| | 01:03 | images for a different rollover
effect underneath each heading.
| | 01:07 | We'll get rid of this one,
and let's take a look at Lightbox Display.
| | 01:13 | Now the Lightbox Display looks like
a normal slideshow and when I click on
| | 01:19 | each of these, it goes to that image,
but it has a slightly different twist.
| | 01:24 | When I go to Preview and click on
any one of these, you see the whole page
| | 01:28 | goes dark, and now I can just focus on
this image, and when I use these arrow
| | 01:33 | buttons, it goes to each one.
| | 01:35 | In fact, there's even a caption
that's available underneath here.
| | 01:38 | When you're done with this,
just click off to the side and the page
| | 01:41 | becomes normal again.
| | 01:43 | So whenever you see Lightbox,
that's referring to a pop-up where the
| | 01:46 | background is faded out.
| | 01:47 | Let's get rid of this, and we're going
to go into Slideshows and bring up the
| | 01:53 | Thumbnail slideshow.
| | 01:54 | Now let's see what this looks like.
| | 01:58 | In Preview mode, when I click to each
one, it jumps to that particular image
| | 02:02 | and we have the Next and Previous buttons.
| | 02:05 | Well, what we're going to do is we're
going to add some additional pictures to
| | 02:08 | this, because I really don't want to
use these flower pictures, I have my own
| | 02:11 | pictures I want to use.
| | 02:12 | So I am going to go to File > Place,
Command or Ctrl+D, and inside here, I am
| | 02:17 | going to select 01Origins, hold my
Shift key, and click on number 10.
| | 02:23 | That means I am going to
get a range of 10 images.
| | 02:26 | When I click Select, I'll get a
loaded cursor with all 10 images, just like
| | 02:30 | you do in InDesign.
| | 02:32 | I can mouse over this image and click
and we'll have to wait a moment, but it's
| | 02:36 | going to automatically add all of those
pictures to this particular slideshow.
| | 02:40 | When I click on Preview, I can try it out.
| | 02:44 | Clicking on any image jumps to that
particular image, and I can still use my Next
| | 02:48 | and Previous buttons.
| | 02:50 | I don't want these three images
included, because I have my own images.
| | 02:54 | I need to remove them.
| | 02:55 | So to remove them from the
list I have to select them.
| | 02:58 | So my first click selects everything.
| | 03:00 | When I click again it will drill down
and grab just the thumbnails on the side.
| | 03:04 | When I click again it will
actually grab that final little thumbnail.
| | 03:08 | When I press Delete it will remove
not only that thumbnail, but the big
| | 03:12 | image inside the queue.
| | 03:14 | I am going to just need to repeat this
process for the other thumbnails that I don't want.
| | 03:18 | So I'll hit Delete, and then we will
repeat it one more time. There we go.
| | 03:26 | Now that I have this set up, I don't
really like seeing this tall list of thumbnails.
| | 03:30 | I want to have it 2-up on the side over here.
| | 03:32 | So if I click slowly and grab the
thumbnails, I can grab the side and as I drag
| | 03:37 | this, when it becomes wide enough,
they will all show up in a nice list.
| | 03:41 | I can come down to the bottom and clean
this up by making this a little more tidy.
| | 03:45 | There we go.
| | 03:46 | Next, I want this to be a little
higher so it lines up with the top.
| | 03:49 | So I click to select just them,
and I can drag that up a little higher.
| | 03:55 | If I want to remove anything--let's say
the caption--I can just click slowly and
| | 03:59 | eventually select it and hit Delete.
| | 04:01 | Now, my Next and Previous and the page
number, I am going to select these, hold
| | 04:07 | my Shift key to grab the other ones,
and I bring them down a little lower.
| | 04:10 | The reason for that is I am going to
select just the big image, or the hero image,
| | 04:14 | and click and drag and make this bigger.
| | 04:17 | Remember, there is no need to hold Shift
because it will not stretch my picture.
| | 04:21 | That looks good, nice and big.
Then I can click slowly and reposition the
| | 04:26 | information, so it fits
underneath the position of my choosing.
| | 04:30 | If at any point I want to change the
font of the size of these, I could use the
| | 04:34 | Text panel to do that.
There we go. That looks good.
| | 04:39 | Now, to preview, let's see what it looks like.
| | 04:44 | As I click on each one, it goes to
that particular image and my Next and
| | 04:47 | Previous buttons work, but if I am not
doing anything, you will notice that the
| | 04:52 | pictures are going from picture to picture.
| | 04:54 | That's because there is an
Autoplay functionality built in.
| | 04:58 | Let's go back into Design view
and see if we can modify this.
| | 05:02 | When I select my slideshow and I go to the
menu, there is an option here for Auto Play.
| | 05:06 | I am going to change this to
None so that is no longer happening.
| | 05:10 | But I have some other controls.
| | 05:12 | I can change the
transition from Fade into a Slide.
| | 05:16 | Now that I have that done and we hit Preview,
| | 05:22 | when I click on each of these, you will
see there slide to that particular image.
| | 05:25 | It's kind of fun.
| | 05:28 | The last thing that I want to set up,
are some rollover states for each of these
| | 05:31 | because as I roll over each thumbnail,
I can't really tell which one I am on.
| | 05:36 | So back in the Design view, I am going to
click slowly until I select one of these.
| | 05:40 | With this thumbnail selected, I will
open my States panel, and right now I am
| | 05:44 | in my Normal state.
| | 05:45 | I am going to change the
Normal state to a 50% opacity.
| | 05:49 | When I change this one,
you notice all of them change.
| | 05:52 | That's because by default Edit
Together is turned on, which is really useful
| | 05:56 | because I don't have to
manually change each of these.
| | 05:58 | So I am going to leave the
default state of Normal, 50% Opacity,
| | 06:02 | but on rollover, I want it to
be 100%, so it looks normal.
| | 06:08 | By doing this, when I hit Preview,
I am able to roll over these and see
| | 06:12 | that picture come alive and if I click on any
one of them, it jumps to that particular image.
| | 06:18 | Take the time to explore the other
slideshow and composition widgets.
| | 06:22 | They are not all just for images,
and in fact some of them are created for
| | 06:25 | large areas of text.
| | 06:27 | If you're adventurous, try putting
widgets inside other widgets and see what
| | 06:31 | creative designs you can come up with.
| | Collapse this transcript |
| Embedding arbitrary HTML| 00:00 | You probably have noticed that some
web sites have included an actual Google
| | 00:03 | map, YouTube video, or Twitter status
on their site instead of just linking to
| | 00:08 | each of those services.
| | 00:10 | If you have never worked on a
web-design project before, you might think that
| | 00:13 | this would be really difficult and maybe
the designer had to partner with Google
| | 00:17 | or another company in order to make this happen.
| | 00:19 | In reality, this type of information
was just added to the web site by a
| | 00:23 | technique called
arbitrary HTML, or HTML embedding.
| | 00:27 | To add this type of content, it is
just as easy as a simple copy and paste.
| | 00:32 | We're going to go to the Kart Map page
and on the Kart Map page, we want to
| | 00:37 | include a Google Map directly on here.
| | 00:40 | So what I want to do is grab my
Rectangle tool and draw out an area that I want
| | 00:44 | it to be, and once I have drawn this,
let's say I want it about this big or
| | 00:48 | maybe a little bigger.
| | 00:49 | We can see from our Width and
Height that it's about 435x397.
| | 00:54 | Let's simplify this a little bit, and I am
just going to make it be 450x400, there.
| | 01:02 | Now, I have a frame that's
450x400, and this looks pretty good.
| | 01:05 | I am going to remember these coordinates.
| | 01:09 | I can delete that frame,
and let's go over to our web browser.
| | 01:11 | I've already gone to www.maps.google.com,
and I have searched for a location of
| | 01:17 | San Francisco, California,
and this is location of the Koffee Kart.
| | 01:20 | Now I am going to zoom in here a little bit
and get it to the spot that I want it to be.
| | 01:24 | That looks pretty good.
| | 01:26 | Now what I want is this
actual position inside my web site.
| | 01:32 | In order to do that, I am going to
go click this little Link icon in the
| | 01:34 | upper right-hand corner.
| | 01:36 | When I click on this, I could copy and
paste this link and just email it to someone
| | 01:41 | and when they click on that, they
would go to this web site, but instead, I can
| | 01:44 | include this HTML code to
embed it inside our web site.
| | 01:47 | I am going to click on Customize
and when I do this, I can type in the
| | 01:51 | dimensions that I want.
| | 01:53 | We remember that we had our
custom dimensions of 450x400.
| | 02:01 | Once I type in those dimensions,
I can come down here and select this code,
| | 02:05 | copy it to my clipboard, then we're going to go
back into Muse and we're going to paste it in.
| | 02:12 | Once I have pasted this in, you will see
it looks exactly like it did on the web
| | 02:16 | site, but I can't interact with it right now.
| | 02:19 | To do that, I have to go to my Preview mode.
| | 02:21 | So I am going to click on Preview,
and inside the Preview mode it looks
| | 02:27 | exactly like a web site.
| | 02:29 | In fact, it interacts just like that.
| | 02:31 | I can switch to a Satellite view,
and I can even zoom in and zoom out.
| | 02:36 | If I click on View Larger Map, it will
actually go to the Google site and I can
| | 02:40 | work with it some more.
| | 02:43 | If at any point I want to change the
dimensions of this, I can't really resize
| | 02:47 | this by clicking and dragging.
| | 02:48 | It's not going to work.
| | 02:49 | What I can do is I could go back to the
Google site, change the dimensions, get
| | 02:53 | new code, and copy and paste it in.
| | 02:55 | But I do have the option of right-clicking
or Ctrl+Clicking and choosing HTML.
| | 03:01 | When I do this, I will see all of
the code that I copy-and-pasted.
| | 03:04 | Now even if you're squeamish at the
site of code, you can just go in here
| | 03:07 | and change the numbers.
| | 03:09 | Let's say I want this 400x400.
| | 03:11 | That's all I have to do.
| | 03:13 | When I click OK, give it a
moment and it will update,
| | 03:17 | now when I click Preview, it's
the correct size that I wanted.
| | 03:21 | Let's get rid of this and try
bringing in a YouTube video.
| | 03:26 | We're going to go back to our web
browser, and I am on YouTube right now, and I
| | 03:32 | want to include this
Explore California Weekly Podcast.
| | 03:35 | Well, on here, there is an option called Share.
| | 03:38 | When I click on Share that gives me
the link I could email to someone.
| | 03:42 | But instead of that, what I
want to do is I want to embed this.
| | 03:46 | When I click on the Embed button, I will
get some code that I can copy and paste.
| | 03:50 | If I wanted to type in my own dimensions,
I could do it down here, but for now, this is fine.
| | 03:55 | So I am going to copy that to the clipboard,
| | 03:57 | we're going to go back into Muse,
and then I am going to paste it in.
| | 04:00 | Now, I have my video and to preview it
| | 04:03 | I need to go under Preview,
and I can hit Play.
| | 04:08 | (video playing)
| | 04:11 | If you want to include video inside
your web site, it doesn't have to be from
| | 04:14 | YouTube; you can do it from
practically any site that allows you to embed it.
| | 04:18 | It could be from Video, Flickr, or even Hulu.
| | 04:21 | Just go to those web sites, look for
Embed HTML or Widgets, copy the code,
| | 04:25 | and paste it into Muse.
| | 04:28 | Let's delete this, because now I want
to bring in a Twitter status widget.
| | 04:31 | So I am going to go over
here to Google Chrome again.
| | 04:34 | If you want to embed a
Twitter widget, you have to go to
| | 04:36 | twitter.com/about/resources/widgets.
| | 04:40 | Once you are here, click on My Website,
and we are going to make a search widget.
| | 04:45 | A search widget will be a little box
that will give me a real-time update for a
| | 04:49 | particular keyword that
people are searching for.
| | 04:51 | So we're going to switch our keyword
for coffee, and now I want to change the
| | 04:56 | title and the caption at the top.
| | 04:58 | So for the title we're going to put in
Kevin's Koffee Kart, and for the Caption
| | 05:05 | we will put Coffee Talk.
| | 05:09 | Now that I have that set,
we can even change its appearance.
| | 05:12 | For the Appearance we can
say, what is the color up here?
| | 05:14 | Well, we will change the widget color
to a nice brown and then the links to a gold.
| | 05:24 | Now that this is set, we're
going to finish and grab the code.
| | 05:28 | We will just come in here, select all of
that code, copy it to our clipboard, go
| | 05:35 | back into Muse, and paste it in.
| | 05:41 | Now that I have that in here,
when I hit Preview, we can see that it's
| | 05:45 | working as expected.
| | 05:48 | arbitrary HTML is a very
powerful tool inside Muse.
| | 05:51 | While you can use it to embed widgets
like a Facebook Like button, you can also
| | 05:56 | use it to create forms and other
functions beyond the capability of Muse.
| | 06:00 | Take some time to experiment and see
how far you can push the boundaries
| | 06:04 | of arbitrary HTML.
| | Collapse this transcript |
| Previewing the site| 00:00 | As you spend time designing with Muse,
you will find yourself wanting to test
| | 00:03 | how your web site will work in a web browser.
| | 00:06 | This might be to check hyperlinks, test
the slideshow's timing, or to ensure that
| | 00:10 | everything is rendering correctly.
| | 00:11 | Let's take a look at a variety of
methods that you can use to preview your site,
| | 00:15 | ranging from a quick in-app
preview to a complete export.
| | 00:18 | Let's go to the KOFFEE site, and on
the KOFFEE page we want to preview this.
| | 00:24 | So at the top of the screen
there is a little Preview button.
| | 00:27 | When I click the Preview button, this
page will be quickly rendered using the
| | 00:30 | built-in WebKit preview.
| | 00:32 | Now I can preview everything
about this particular page.
| | 00:34 | If I come down here, we can see that
this is a slideshow and when I click, it
| | 00:39 | slides to show particular sections.
| | 00:41 | In fact, the entire site is being rendered.
| | 00:43 | So if I clicked on the ABOUT button,
it would also bring me to this page.
| | 00:46 | Now if I want to go back to the
Design view, I can just hit Design again.
| | 00:51 | There is a faster way to do this.
| | 00:53 | Underneath the View menu, we can see
that there's a shortcut to switch between
| | 00:57 | the different modes.
| | 00:58 | The Plan mode, or Outline mode, is
Command+M or Ctrl+M, Design is Command+L and
| | 01:02 | Ctrl+L, and Preview is Command+P or Ctrl+P.
So if I want to quickly go to the
| | 01:07 | Preview mode, I can just press
Command+P or Ctrl+P and jump to that mode,
| | 01:11 | to go back to Design, Command+L or Ctrl+L.
Now when you are previewing inside the
| | 01:16 | app, it can sometimes render a
little slow, depending on the amount of
| | 01:20 | complexity that's on that particular page.
| | 01:23 | To get a true sense of how it's going to
work, you want to do a preview in a browser.
| | 01:27 | So under the File menu I can choose
Preview Page in Browser or use the shortcut
| | 01:31 | Command+Shift+E or Ctrl+Shift+E on the PC.
| | 01:35 | When I do this, it'll do temporary export
and open up inside your default web browser.
| | 01:39 | In my case, this is Google Chrome.
| | 01:41 | So as I come in here, I can
scroll down and try out my slideshow.
| | 01:45 | You can see it moves quite smoothly.
| | 01:47 | However, if I try to go to another
page, I am getting an error saying this
| | 01:51 | page can't be found.
| | 01:53 | The reason for that is I only
exported that particular page.
| | 01:56 | If I want to test everything, I am going
to have to do a preview of the entire site.
| | 02:00 | So I am going to go to the File menu
and choose Preview Site in Browser.
| | 02:05 | The keyboard shortcut is Command+Option+E
on the Mac or Ctrl+Alt+E on the PC.
| | 02:10 | When I do this I have to wait a moment
because it will take a little while,
| | 02:13 | since every single page
will have to be exported.
| | 02:16 | Now that I'm in here, I can click and
go to any particular page that I want.
| | 02:21 | What if I don't want to test inside
Chrome, which is my default web browser?
| | 02:24 | What if I want to test in something else,
like Internet Explorer, Firefox, or Safari?
| | 02:28 | In that case, I can't use
the built-in Preview function.
| | 02:32 | So what I am going to do is go back
into Muse and I need to do an export.
| | 02:35 | So I am going to go to File and
export the entire site as HTML.
| | 02:40 | By pressing Command+E on the Mac,
Ctrl+E on the PC, it will ask me, where do
| | 02:44 | I want to put this?
Right here I need to choose the directory.
| | 02:47 | So I am going to press this button and it's
going to ask me, where do I want to put it?
| | 02:50 | On my desktop I am going to
make a folder called Export Test.
| | 02:53 | Then I will select this folder and click Export.
| | 02:57 | Now this may take a moment, depending on
the size and the complexity of your web site.
| | 03:01 | When you're done, it may not be
obvious that your site is done exporting.
| | 03:05 | The way you'll know is it will say, the Status:
| | 03:07 | Upload is complete, and there
will be a View Site button.
| | 03:11 | If I hit the View Site button, it will
just open in my default browser again.
| | 03:14 | So I am going to hit Close
and go to a different browser.
| | 03:18 | I'm going to open up Firefox, and I
will do a File > Open, and I am going to
| | 03:25 | browse to my desktop and go
into the export test folder.
| | 03:29 | Inside it I will find index.html.
| | 03:31 | That is the first page.
| | 03:34 | When I click Open, I'll see the web
site, and now it will work as expected and I
| | 03:38 | can test to make sure everything looks correct.
| | 03:41 | You can also export your site to HTML
if you use your own server and want to
| | 03:45 | upload your site yourself.
| | 03:47 | However, using Muse's built-in
publishing tools is much easier.
| | 03:51 | In the next movie, we will take a
look at how to publish your site using
| | 03:53 | Muse's built-in tools.
| | Collapse this transcript |
| Publishing the site| 00:00 | When it really comes down to it, the reason
that you would use Muse is to create a web site.
| | 00:05 | But having a web site sitting in your
computer doesn't let other people see it.
| | 00:09 | So how do you put it online?
| | 00:11 | You might have heard web developers
throw around words like hosting, domains, or
| | 00:15 | FTP and probably felt some confusion.
| | 00:18 | Thankfully, Muse makes uploading a
web site very easy, even if you've never
| | 00:22 | heard of a domain before.
| | 00:25 | When you're finished testing your web
site and you're ready to put it online,
| | 00:28 | the first step is to
sign in to Business Catalyst.
| | 00:31 | In the upper right-hand
corner there is a Sign In button.
| | 00:33 | When we click on this, we can choose Sign In.
| | 00:35 | If you already have an Adobe Business
Catalyst account, feel free to log in with
| | 00:41 | your user name and password.
| | 00:42 | If you don't have an account, just click
the Sign-Up button and register with them.
| | 00:46 | It's completely free.
| | 00:47 | You just need a user name and an email address.
| | 00:49 | I am going to sign in with my
user account and click Next.
| | 01:01 | After successfully signing in, you can
finish, and now we're ready to upload our web site.
| | 01:06 | It's even going to greet you
that you already logged in.
| | 01:09 | When you're ready to publish
online hit the Publish button.
| | 01:12 | Because we've never published the site
before, we are going to make a new trial site.
| | 01:16 | I am going to click New trial site and
click Next, and we need to give it a site name.
| | 01:21 | So we are going to call
it kevins_koffee_kart_test.
| | 01:32 | Now you can name this whatever you like.
| | 01:34 | It's going to be located the United
States, and I am going to choose my Time
| | 01:38 | Zone of Pacific Time.
| | 01:39 | Then you get to create your own custom URL.
| | 01:42 | Now this isn't the actual URL or
address that it's going to be online;
| | 01:45 | this is a temporary site where you can
look it at yourself online or share it with
| | 01:50 | an associate or client.
| | 01:51 | So I am going to put in kevinskoffeekarttest.
I hope this is available.
| | 01:58 | If the starting address isn't
available, you will have to come up with
| | 02:01 | another starting address.
| | 02:03 | Now that I'm ready, I will hit the
Next button and it will publish.
| | 02:07 | Depending on the size of your site, this may
take anywhere from a few moments to a few minutes.
| | 02:12 | What's happening is in the background
Muse is exporting and optimizing every
| | 02:16 | portion of the site, from the text to
the images, and then uploading it online to
| | 02:20 | Adobe Business Catalyst.
| | 02:22 | Now that we are done, we can hit
View Site and view it online ourselves.
| | 02:27 | Now at this point everything is live.
| | 02:29 | If I was at another web browser on
another computer in the world, I would see
| | 02:32 | the exact same thing.
| | 02:35 | Back in Muse I can hit Finish.
| | 02:37 | Now at any point if I decide to make a change--
| | 02:40 | Let's say a client looked at the site
and want to make a change to it, for
| | 02:43 | example, on the About page let's say we
had the date wrong and it opened in 1986.
| | 02:51 | When I am done with this and I save the
site, it still hasn't been updated online.
| | 02:56 | So I am going to hit the Publish
button again and I'm going to publish it to
| | 02:59 | the associated content.
| | 03:03 | When I hit Next, I just
want to update the changes.
| | 03:05 | I don't need to update every single thing again.
| | 03:08 | If I click this button it would take longer,
because every single portion will be uploaded.
| | 03:13 | By hitting Next and not clicking this,
just the small change will happen.
| | 03:17 | In this case, because it was so
small, it'll just take a moment.
| | 03:20 | When I view the site and I go to
the About page, we'll see that it's
| | 03:25 | been updated to 1986.
| | 03:27 | You could just tell your client over
the phone to refresh your browser and it
| | 03:30 | would automatically be there for them.
We will go back into Muse.
| | 03:37 | When you publish a trial site Muse it
used hosted online for free for 30 days.
| | 03:41 | That should be enough time for
you and your client to work out any
| | 03:44 | discrepancies with the design.
| | 03:46 | After 30 days you can transfer it to
your own domain's web site, or you can
| | 03:51 | upgrade and pay a monthly fee
to host it on Business Catalyst.
| | 03:54 | If you like, you could transfer it
to your own custom URL or keep the
| | 03:58 | Business Catalyst one.
| | 04:00 | If you don't want to use Adobe Business
Catalyst, you can export the content
| | 04:03 | yourself and upload it to your web server.
| | 04:05 | To export it, just go to File > Export,
and we are going choose the directory on
| | 04:10 | our Desktop, final export and
choose Select and then hit Export.
| | 04:21 | When this is finished and I minimize
Muse to see my Desktop, we will see in the
| | 04:25 | final export folder is all of the HTML and CSS.
| | 04:29 | This content you could give to your
web developer to make changes to or just
| | 04:33 | upload it yourself to your own web site.
| | 04:36 | While you have the choice to use
whatever hosting provider you like, Adobe
| | 04:39 | Business Catalyst has some
significant advantages due to its close
| | 04:43 | relationship with Muse.
| | 04:45 | Anytime you need to make any edits, it is
simple as publishing your site again from Muse.
| | 04:50 | Plus, you will even get email analytic
reports about your site, including the
| | 04:53 | number of visitors, links clicked, and more.
| | 04:56 | For more information about Adobe
Business Catalyst visit businesscatalyst.com.
| | Collapse this transcript |
|
|
