Tip:
Highlight text to annotate it
X
Since Muse is only available as a subscription, this allows Adobe to release updates as often
as they like, as opposed to having to wait years before pushing out a major release.
This is the first feature-rich update since Muse was released back in May of 2012. Let's
take a quick look at what has changed with this release. The file that I currently have
opened is not in your exercise files, but I will be going over these features in depth
later in this course. Some of the changes in this version of Muse are really hard to
demonstrate on screen. That's because they involve code optimizations. For example, the
HTML, CSS, and JavaScript are now much more efficient and will render better on sites.
A good example of this is CSS Gradients and Drop Shadows. In earlier versions of Muse,
if you used the Drop Shadow or Gradient when you exported your site to HTML, it would automatically
create raster versions of those files. In this version, Muse will create the necessary
code. This will result in smaller, faster, and more efficient websites. Let start by
taking a look at some of the interface elements that have changed. We're going to go down
to the Masters page, and now in the Masters page I am going to select this widget at the
top of the screen of the Menu. When I click down and select the Home button, this Home
button has multiple states. So if I go over to the States Panel, we can see that we've
got Normal, Rollover, Mouse Down, and Active, and I could change any of these by clicking
on it and changing a property, like adding a drop shadow or color. But now instead of
having to go over to the States Panel, we have the States Panel built into the Menu
Bar at the top. You will notice in the upper left-hand corner it says Menu Item: Rollover
with a hyperlink. When I to click on Rollover, I don't have to go to the States panel anymore.
You will also notice that these buttons at the top now are blue with an underline when
they're a hyperlink. In earlier versions they were black, and it wasn't that obvious that
you could click on these to get an option. Now that we've changed the color, it's a lot
easier to see that we can click on them to access additional controls. If you use Muse
on different size monitors, this interface now gracefully degrades. For example, you
see on the upper right-hand corner where it says Align and Text and has the Width and
Height next to it, if I go over here and change the Width of the Muse window, you will see
it will start to collapse. The Width and Height disappeared, but Align and Text is still present.
As I make this smaller, the X and Y coordinates disappear. But as I bring this back, more
options appear again. If you work with Muse on a large or small monitor, now it will still
be useful that you could access these Menu Items, but if you have to use a small one,
you can always go back to the Panels if needed. Let's close the Masters page and go to the
Collections page. On this page I am going to show off one of my new favorite features.
We can now finally add Guides. These Guides are Ruler Guides that we can grab from the
top or the left-hand Ruler on our page. If you've used Photoshop, Illustrator, or InDesign,
you already know how to use these Rulers. Just click and drag them out and put them
wherever you want on the page. One little tip that I can't help but share is if you
go to the Ruler and want it at a certain spot, just double-click your mouse, and it will
put the Ruler right there for you. You can use these Ruler Guides to help Align Objects
to them to help with your design. Another feature to help with aligning is the Align
Panel. Over on our panels, I can click on the Align, and now I can grab two different
objects. I'll just click and grab these two images over here, and I can click Align on
the left-hand side. In earlier versions you actually had to use Smart Guides or just manually
try to do it. This is a lot easier and more intuitive, similar to the other applications.
If you don't want to use this panel, we have the Align button at the top of the screen
that can accomplish the same task. Let's close Collections and go over to the About Us page.
On this page we have a large open area where I want to insert an Adobe Edge animation.
Adobe Edge Animate is a new tool from Adobe which lets you create web graphic animations
without using Flash. In a later movie we'll talk about how to export the animation from
Edge to bring it into Muse, but right now let's just bring one in. We're going to go
to File > Place, and we're going to navigate to our Assets folder. Inside our Assets folder
we're going to go to edge. In the edge folder we'll go into publish and grab logo-animation.oam.
With this selected, we'll click and put it on the page. If we want to see the animation,
all we have to do is either Preview in the web browser or click the Preview button. When
we click Preview, the animation will appear right before us. If you want to see this again,
you have to go back between Design and Preview or just Refresh the page in your web browser
if you use Preview in web browser. Back in Design mode, we'll scroll down a little bit,
and I am going to select this picture of a PDF. If you want to add a PDF to your website,
it wasn't possible in earlier versions unless you uploaded that file to a website and then
provided a link to it. Now if we select any graphic at all, we can link directly to a
file. I am going to go to the Hyperlink menu and choose Link to File. When I do this, Muse
will ask me where is the file we want to link to? In our case, we're going to go to brochure.pdf.
Now that I have this set, when you click on the icon in a web browser, it would download
the PDF for you. This isn't limited to just PDFs. You can use Muse files if you wanted,
zip files, MP3s, or any type of file at all. When you publish your site, it will automatically
upload this file to your server. Let's close that page and go to Contact Us. On Contact
Us, we're going to add a form. Now, it has been possible to add a form via embedded HTML,
but now it's a lot easier since we can use the widgets inside Muse. I am going to go
over to the Widget Library Panel, open up Forms, and drag out a Simple Contact Form.
Now that I have this dragged out, I could modify the properties of this, but we'll cover
that in a later movie. For now we're going to go to Preview, and then I could try this
out. I'll into my Name, Email, and Message, and then you could click Submit if this was
online, and it would send the message to the person that the form was connected to. One
item of note, this Muse form will only work if you're hosting with Adobe Business Catalyst.
If you're using your own solution, you'll have to export this code to HTML and then
modify the code so it can work with your own server. Back in Design mode, there is one
last big feature we're going to talk about, and that's the built-in FTP. If you are using
your own server, in earlier versions you'd have to export the code to HTML and then use
your own FTP client to upload. Now you don't have to worry about that because we can go
to File > Upload to FTP Host. Inside this dialog box you can enter all of your relevant
information and click OK, and then it will upload the files for you. If you ever make
a change to your layout-- be it a small text change or replacing an image--when you upload,
it's not going to re-upload the entire site, it will just load the incremental changes.
This is just a quick overview of some of the changes in this update. There have been additional
movies added to this course that cover each of these new features and changes in greater
detail. For a much more in-depth look at the updates and new features in Muse or to see
a list of the updated movies, please visit lynda.com/museupdates.