Learning Adobe Muse pot

Learning Adobe Muse

Create beautiful websites without writing any code

Jennifer Farley

BIRMINGHAM - MUMBAI

This material is copyright and is licensed for the sole use by on 7th October 2012

Learning Adobe Muse

Copyright © 2012 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval

system, or transmitted in any form or by any means, without the prior written

permission of the publisher, except in the case of brief quotations embedded in

critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of

the information presented. However, the information contained in this book is sold

without warranty, either express or implied. Neither author, nor Packt Publishing,

and its dealers and distributors will be held liable for any damages caused or alleged

to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the

companies and products mentioned in this book by the appropriate use of capitals.

However, Packt Publishing cannot guarantee the accuracy of this information.

First published: September 2012

Production Reference: 1140912

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-314-1

www.packtpub.com

Cover Image by Artie Ng ([email protected])

This material is copyright and is licensed for the sole use by on 7th October 2012

Credits

Author

Jennifer Farley

Reviewers

Corey Gutch

Ben Harrison

Cristian Radu

Acquisition Editor

Wilson D'souza

Lead Technical Editor

Unnati Shah

Technical Editors

Joyslita D'Souza

Ankita Meshram

Unnati Shah

Zinal Shah

Copy Editor

Alfida Paiva

Project Coordinator

Leena Purkait

Proofreader

Chris Brown

Indexer

Hemangini Bari

Graphics

Aditi Gajjar

Production Coordinator

Nilesh R. Mohite

Cover Work

Nilesh R. Mohite

This material is copyright and is licensed for the sole use by on 7th October 2012

About the Author

Jennifer Farley has over 12 years experience working in the graphic and

web design industry. In 2002, she became a full time educator, teaching Adobe

Photoshop, Illustrator, Dreamweaver, and Design Theory. She runs her own design

business, called Laughing Lion Design but now divides her time equally between

teaching design and freelance illustration work.

Thanks to my husband Jason for his support and love, and for

sometimes staying up very late with me while I wrote this book.

Thanks to my parents for their support and love and for introducing

me to books at a very, very young age.

This material is copyright and is licensed for the sole use by on 7th October 2012

About the Reviewers

Corey Gutch has worked with various web technologies at Adobe Systems

since 1996, and is an Adobe Certified Expert in Dreamweaver and Illustrator. He

is currently the Interactive Director for creative agency Dumb Eyes, designing

and developing standards-compliant websites, the Lead Instructor for the Web

Design with Creative Suite certificate program at the University of Washington,

and Community Manager for Adobe Muse at Adobe Systems. Along with his

knowledge of Adobe products, he is proficient in authoring HTML, XHTML, CSS,

PHP, and JavaScript, and working with open source frameworks such as Wordpress

and Drupal. He has deep knowledge and insight into real-world web design and

development scenarios with both corporate and boutique clients.

Ben Harrison is also known as Mr. Fuddlebunker of Kelso, WA. He is married to

a wonderful woman, has four kids and works at Swanson Bark & Wood Products.

His current responsibilities are Digital Marketing and Brand Management. He

loves to play with his kids, travel with his wife, volunteer in his community, build

websites in his spare time as Fuddlebunker Design, and when he has a free weekend,

he plays paintball.

Cristian Radu is a technically astute IT professional with strong experience

providing support to corporate clients across diverse industries, recognized for his

ability to coordinate special projects, his excellent analytical and problem solving

skills, and his willingness to rise to any challenges. He started his career working for

small local companies then moved to large corporations.

This material is copyright and is licensed for the sole use by on 7th October 2012

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to

your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub

files available? You can upgrade to the eBook version at www.PacktPub.com and as a print

book customer, you are entitled to a discount on the eBook copy. Get in touch with us at

[email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up

for a range of free newsletters and receive exclusive discounts and offers on Packt books

and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book

library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe? • Fully searchable across every book published by Packt

• Copy and paste, print and bookmark content

• On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access

PacktLib today and view nine entirely free books. Simply use your login credentials for

immediate access.

This material is copyright and is licensed for the sole use by on 7th October 2012

Table of Contents

Preface 1

Chapter 1: Welcome to Muse 7

What is this Muse you speak of? 7

Where to find Muse 8

The Muse workspace 8

The Welcome screen 9

To open a recent site 10

To create a new site 10

Views 12

Saving your site 13

Opening a page in Design view 13

The toolbar 15

Using the tools 16

The Control Panel 16

Panels 17

The document window 20

Undoing actions 24

Getting help and more resources 24

Muse updates 25

Summary 25

Chapter 2: The Muse Workflow 27

Print workflow versus web workflow 27

Pre-Muse planning 29

Browser battles 29

Resolution 30

Download speed 30

The Muse workflow 31

Create a site 32

Why 960 instead of 1024? 33

Plan your site 33

Design your site 34

This material is copyright and is licensed for the sole use by on 7th October 2012

Table of Contents

[ ii ]

Preview your site 36

Publish your site 37

Reviewing and testing a website 37

Adobe Business Catalyst 38

A brief overview of publishing 39

Domain names 40

Acquire server space 40

Uploading your site 41

Summary 41

Chapter 3: Planning Your Site 43

Page layouts 43

Bread and butter layouts 44

What appears on a typical web page? 45

Logo 45

Navigation bar 45

Content 45

Footer 46

Wireframes 47

What to include in a wireframe? 48

Wireframes with Muse 50

Site structure with Plan view 50

Working with thumbnails in the Plan view 53

Working with wireframes 54

Saving the graphic style 57

Using placeholder images 61

Updating placeholder images with final site graphics 63

Adding dummy text and paragraph styles 64

Where are the files generated by Muse? 68

Exercise 69

Summary 70

Chapter 4: Powerful Pages 71

Pages 71

Master pages 73

Working with pages within your site 73

Adding a sibling page 74

Adding a child page 74

Creating a duplicate page 74

Deleting a page 75

Renaming a page 75

Rearranging pages 75

Editing page properties 76

Page sizes 79

This material is copyright and is licensed for the sole use by on 7th October 2012

Table of Contents

[ iii ]

Opening, saving, and closing a page 79

Working with Master pages 80

Creating a new Master page 81

Applying a Master page to a web page 82

Header and footer guides 83

Adding text to a page 84

Creating links 85

Creating a link to a page in our site 85

Creating a link to an external web page 86

Creating a link anchor 87

Creating an e-mail link 88

Changing the color of links 88

Editing and deleting links 90

Creating a navigation bar 91

Tips for navigation links 93

Zooming in, out, and about 93

Zooming in 93

Zooming out 94

Fit page to window 94

Making page to its actual size 94

Summary 94

Chapter 5: The Joy of Rectangles 95

Working with rectangles 96

Setting up a master background rectangle 98

Creating a rectangle on individual pages 100

Deleting a rectangle 101

Adjusting a rectangle 101

Rotating a rectangle 102

Cutting, copying, and pasting rectangles 102

Duplicating a rectangle 103

Adding color – fills and strokes 103

Adding a stroke 103

Changing rectangle fill 105

Setting a gradient fill 107

Adding an image to a rectangle 108

Adding effects to rectangles 109

Adding a drop shadow 110

Adding a bevel effect 111

Adding a glow 113

Change stacking order of rectangles 114

Creating a mixture of round and square corners 115

Creating full width rectangles 116

Summary 116

This material is copyright and is licensed for the sole use by on 7th October 2012

Table of Contents

[ iv ]

Chapter 6: Typography, Muse, and the Web 117

The power of text 118

Anatomy of type 118

Creating text frames 123

Clear, compelling, and correct content 124

Editing text 124

Creating and applying paragraph styles 127

Creating and applying character styles 131

Using the Context menu in the Character and Paragraph Styles panels 132

Headings 132

Content organization and hierarchy 133

Headings and accessibility 133

Headings and SEO 134

Creating headings 134

Change text case 136

Text wrapping 137

Web-safe fonts 139

Metadata – the hidden text on your page 140

Summary 141

Chapter 7: Working with Images 143

Hello web-friendly images 144

Choosing the best file format 144

JPEG 145

GIF 146

PNG 147

Web-safe colors – a thing of the past? 147

Getting images onto your page 149

Placing an image 149

Adding alternative text 150

The image context menu 151

Manipulating images 152

Resizing an image 152

Rotating an image 154

Positioning an image 154

Duplicating an image 155

Cropping an image 155

Adding effects to an image 157

Pasting an image from another program 158

Working with background images 158

This material is copyright and is licensed for the sole use by on 7th October 2012

Table of Contents

[ v ]

Adding a logo 158

Adding a link to a logo 159

Using a tiled image as a background 160

Using a photographic image as a background image 161

Pinning an image 164

Taking care of site files with the Assets panel 165

Group objects together to work with them as a single object 166

Grouping objects 166

Summary 166

Chapter 8: Customizing with Widgets—Menus and Panels 167

Working with widgets 168

Adding a widget to the page 168

How menu widgets work 169

Adding a menu bar 169

Selecting the widget and its subelements 171

Setting widget options 172

Formatting each menu item 174

Adding states 176

Transferring a style 178

Horizontal menus 179

Vertical menus 179

Accordion panels 180

Adding a panel 180

Editing Accordion widget elements 182

Editing Accordion widget options 183

Tabbed Panels 183

Deleting a panel 185

Summary 185

Chapter 9: More Widgets—Compositions and Slideshows 187

Composition widgets 187

Creating a simple photo gallery using a blank composition 189

Add content to a target area 190

Changing Composition widget options 191

Another way to create triggers and targets with multiple images 193

Slideshow widgets 194

Creating a slideshow presentation 196

Insert arbitrary HTML 199

Adding a Google Map to your page 199

Adding a Twitter (or any other type of) feed to your site 202

Summary 204

This material is copyright and is licensed for the sole use by on 7th October 2012

Table of Contents

[ vi ]

Chapter 10: Muse, Meet the Adobe Creative Suite 205

Adding a Photoshop rollover button 205

States 206

Creating a rollover button with multiple states in Photoshop 207

Placing the Photoshop button 210

Adding a Photoshop image that's not a button 212

Paste an image from another program 215

Embedding rich media content 216

Summary 216

Chapter 11: Previewing and Testing Your Site 217

Previewing pages 217

Completing the site 218

Preview a page in Muse 218

Preview a page in a browser 219

Preview the entire site in a browser 219

Export HTML for browser testing 219

Viewing your home page on an installed browser 221

What to test for? 221

Test your website on multiple browsers and platforms 222

Which browsers and platforms to test? 222

Test page optimization 223

View pages on a variety of displays 224

View pages on different screen resolutions 224

Check for adequate color contrast 224

Test the functionality of all your widgets 225

Test all links, including navigation 225

Test all downloads 225

Test the site's accessibility conformance 225

Proofread all content 225

Usability testing 225

Creating a device-friendly website 226

Summary 227

Chapter 12: Publishing Your Site 229

Adobe ID 229

Publishing a temporary site 230

Remind me what the .muse file is again 230

Editing and updating a site 233

Upgrading and launching 234

Register a domain name 235

Upgrade to a published site 235

Associating the domain name with your Muse site 237

Re-delegating your domain name 238

This material is copyright and is licensed for the sole use by on 7th October 2012

Table of Contents

[ vii ]

Alternative hosting 239

File Transfer Protocol (FTP) 239

FTP clients 240

Summary 240

Index 241

This material is copyright and is licensed for the sole use by on 7th October 2012

This material is copyright and is licensed for the sole use by on 7th October 2012