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
  • Project introduction (0:07)
  • Tutorial files (1:35)

Define your sitemap.

Define a sitemap
  • Create new file (0:09)
  • Add your pages (1:45)
  • Page properties (2:34)

Let’s get started by creating a new file so you can explore Plan mode in 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 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.

Build out your Master page.

Create master page
  • Add background image (1:29)
  • Create your header (2:33)
  • Add footer area (5:26)

Open the MasterPage.muse file in Adobe Muse to follow along with this video.

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, footer, page background and logo 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.

Design made easy with widgets.

Use widgets
  • Add a menu (0:26)
  • Apply Styles (2:30)
  • Preview mode (5:27)

Open the Widgets.muse file to follow along with this video.

Some users are experiencing a bug at the step where you preview your work. Ignore this issue and keep working; more detail may be seen on our user forums.

In this next section you’ll do a little “widget magic.”  By that I mean that widgets do so much work behind the scenes that they actually seem a bit, well, supernatural. You’ll use the Widgets Library in 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.

Design the Visit page.

Work with typography
  • Place graphics (1:25)
  • Work with fonts (3:08)
  • Style text (4:16)

Open the VisitPage.muse file to follow along with this video.

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

Add an interactive map.

Embed HTML
  • Generate the code (1:10)
  • Embed map (2:40)

Open the Embed.muse file to follow along with this video

No restaurant site is complete without directions, so let’s generate some code for an interactive map that you can embed on your site.

Take your site live!

Publish your site
  • Host trial sites (0:30)
  • Upload to FTP (2:02)

Open the Publish.muse file to follow along with this video.

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!