Adobe Muse CC

How to create a website with Adobe Muse

Learn how to use Adobe Muse by following a step-by-step tutorial for creating a website. (Try it, 34 min)

FromDanielle Beaumont

What do I need?

Get files Sample files to practice with (ZIP, 5 MB)

Get PDF Adobe Muse cheat sheet

Design the Katie’s Café website without writing any code.

Check out this brief introduction to the project you’ll be working on with Adobe Muse CC and take a look at the live version of the Katie’s Café web site you’ll be creating.

Project introduction (0:07); Tutorial files (2:20)

Define your sitemap.

Let’s get started by creating a new file so you can explore Plan mode in Adobe Muse and get your site plan in place. You’ll map out and name the pages you’ll be building for your site, and then you’ll add information such as titles to your pages using metadata. Note that after creating a new Adobe Muse file to start off this video, you’ll need to open a new prepared project file as you begin each step. And, if you have any problems, feel free to ask for help in our forum.

Create new site (0:12); Add pages (2:15); Page properties (4:10)

Build out your Master page.

A Master page holds parts of the design that you’ll use on every page of your website. At this point, let’s add common repeating elements like the header and footer to the Master page. Because all of the pages of your site will be based on this Master page, these elements will show up in the same place on all of your website pages.

Add background color (3:38); Add footer area (3:50); Create a header (9:07)

Design made easy with widgets.

In this next section you’ll use the Widgets Library in Adobe Muse to add a menu widget to serve as the top- level navigation for your site. After adding the menu, you’ll customize the look and feel.

Add a menu (0:51); Preview mode (7:57)

Design the Visit page.

Now let’s build out the site’s Home page and get an introduction to how typography and web fonts work in Adobe Muse.

Place graphics (0:46); Add page content (4:15); Style text (5:00)

Add interactive elements.

Add a dynamic map and a simple contact form to create a useful and engaging experience for your site's visitors.  

Add a map (1:10); Add a contact form (2:52)

Take your site live!

You’re almost finished with the project. In this final section, you’ll get an overview of the publishing options available in Muse and then you’ll actually take your site live with a few clicks so you can show off your work!

Publish a free preview of the site (0:28); Upload to FTP (2:00)

Let us know what you think

That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.

dani-beaumont_83x83

Danielle Beaumont

Dani has been managing innovative applications in the web and design space for more than 20 years. She is currently the Principal Product Manager on Adobe Muse, an application that allows visual designers to build rich HTML and CSS-based web sites without writing any code. Before Adobe Muse, Dani served as Group Product Manager for the Web Segment, and as Senior Product Manager for Adobe Fireworks and Macromedia Director.


Purchase by phone: 800-585-0774