Create Websites Without Writing Code Using Adobe Muse

thumb_muse

There are many graphic designers who want to create websites. However, some of them even don’t try to do maybe because they think writing code is too difficult for beginners. Today I will share how to use “Adobe Muse” which you can create HTML websites without writing code.

What is Adobe Muse?

Adobe Muse” is a software enables designers to create websites without writing code provided by Adobe. You don’t have to learn HTML or JavaScript before starting. You can focus on design, not technology. Combine imagery, graphics, and beautiful typography with all the control you expect from Adobe.

Adobe Muse is not part of the Adobe CS6 release, but it is available as part of the Adobe Creative Cloud membership. If you want to try it before you purchase, you can download a free trial of Adobe Muse.

Adobe Muse creates cross-browser-compatible code for you so that you can focus on your design. The Adobe Muse team currently tests and optimizes output for the following browsers:

  • Firefox 11(Mac OS/Windows)
  • Internet Explorer 7, 8, 9(Windows)
  • Safari 5(Mac OS)
  • Chrome(Mac OS/Windows)

Adobe Muse
There are 4 steps to create websites using Adobe Muse, which are Plan, Design, Preview and Publish. Let’s get started!

1. Plan

Adobe Muse

First, setting page size from File > New Site. Let’s use default value this time.

You will create a sitemap from “Plan” first. Sitemap is a structure of your website. In this example, I created 2 more pages which are “About” and “Photo”.

2. Design

マスターページの作成


After you finished to create a sitemap, let’s design a master page. Master page is a template of common site elements. You’ll see a design view when you double click on “A-Master” page.

Background Image

Background Image
You’ll find background setting palette when you click on “Fill” above. If you want to use background image, click on a folder icon and select an image that you’d like to use. Choose “Tile” under “Fitting” area if you want to repeat an image.

Navigation Menu


It’s very easy to insert a navigation menu. Object > Insert Menu and choose how you’d like to display. Then place a navigation menu wherever you’d like and change a colour or size.


Let’s see State panel to change hover colour. Click on an action that you want to change and edit setting from Fill or Text panel. You don’t need any decoration? Just remove that action by clicking on a trash bin icon.

Design Each Page

Once you’ve done to create common elements, go back to “Plan”. You’ll see all pages have the same design template. From here, you’ll double click on each page and edit them because each page has different contents.

Text

Click on “T” sign to insert texts. It’s the same way as the other Adobe software!

You can use fancy and beautiful web fonts from Font – Web Fonts – Add Web Fonts!

To use text link, just drag a text and type URL in a text field on right top of a screen. If you want to change a text link colour, edit from Hyperlink – Edit Link Style.

Insert Images

Insert images from File – Place. You can adjust an image size by dragging square on the corners.

You can also crop an image!

Wrapping Text


To wrap text, place an image and cut it by right click menu or command + X key. Then paste it inside of text box. Click on a centre icon of Wrap panel. Change offsets value for margin.

Looks perfect!

Image Gallery

The most “Wow!” thing of Adobe Muse is this image gallery using JavaScript. Drag “Thumbnails” from Widgets Library – Slideshows.

Select images from File – Place. You can select multiple images at the same time. Then drag that images to image gallery. You’ll see your image gallery is created easily!


You can customize slideshow setting from blue arrow icon.

3. Preview

Preview
You can check how your page is working from “Preview”. Buttons or image gallery also works as you see on your web browser.

4. Publish

You can publish your website from here. However, hosting service is used “Adobe Business Catalyst”. If you want to use your rental server, export files from File > Export as HTML (Command + E) and upload to your server.

HTML code

This is an exported HTML source code… hmm….

First time that I thought building website is fun was when I created my first website using this kind of software. So I didn’t started to create a website by writing HTML code. Adobe Muse is a good way to know how it’s fun. Yes, if you think it’s fun, you can start to learn how to code. It won’t be too late!

Photos by iKatchan

Share

Comments