O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

'Adobe Muse: Create Graphically Rich Websites Without Writing Code'

Video Description

If you are a graphic designer and want to design and create Web sites without using code, then Muse is for you. Muse is a new tool from Adobe that allows you to create professional HTML Web sites using familiar tools like those found in Adobe InDesign. With Muse, simply design your site as easily as you would create a print layout. This allows you to produce user-friendly, interactive sites that you and your clients will love. Never hand off your design to a developer to code a site for you again! But Muse isn't just for graphic designers--it's for anyone who wants to build and publish Web sites to the latest Web standards without writing code.

Table of Contents

  1. Getting Started
    1. Welcome 00:02:00
    2. Welcome to Adobe Muse 00:02:00
    3. Using the lesson files 00:02:40
  2. An introduction
    1. What is Muse for? 00:04:10
    2. Where to get Muse help 00:01:26
    3. Typical Muse web workflow 00:07:13
  3. Create Your Site
    1. The welcome screen 00:02:59
    2. Create a new site 00:05:12
    3. Edit site properties 00:04:00
    4. Understanding the modes 00:04:08
  4. Plan Your Site
    1. Understanding Plan mode 00:03:26
    2. Add pages to your site 00:06:30
    3. Name your pages 00:02:43
    4. Organizing pages 00:03:47
    5. Set page properties 00:06:58
  5. Work with Master Pages
    1. Understanding master pages 00:03:56
    2. Editing A-master properties 00:03:02
    3. Editing the page guides 00:05:18
    4. Changing the background color and image of the master page 00:07:19
    5. Editing the page area 00:05:27
    6. Inserting images into the header 00:04:37
    7. Assigning content to the footer 00:04:25
    8. Creating 100% width content 00:02:44
  6. Navigating and testing
    1. Zooming 00:04:02
    2. Panning 00:01:43
    3. Understanding the workspace 00:06:21
    4. Test your pages 00:03:55
  7. Add a menu to your page
    1. Insert a menu widget 00:03:21
    2. Edit the menu widget properties 00:05:17
    3. Select the menu parts 00:04:12
    4. Style the menu text 00:03:03
    5. Style the menu appearance 00:06:41
    6. Edit the spacing in a menu 00:06:33
    7. Add rollovers to the menu 00:08:39
    8. Edit the submenu appearance 00:07:42
    9. Exclude pages from the menu 00:05:17
    10. Include pages with or without links 00:02:56
    11. Insert a manual menu into the footer 00:08:42
  8. Edit masters
    1. Create a new master page 00:02:31
    2. Duplicate and edit a new master page 00:03:45
    3. Apply the new master page 00:02:28
  9. Working with text
    1. Understanding text frames 00:04:01
    2. Adding text 00:02:18
    3. Copy and paste text from InDesign 00:02:15
    4. Placing text (.txt) 00:03:21
    5. Working with guides and grids 00:03:52
  10. Format text
    1. Understanding text styling: the Control panel vs Text panel 00:02:59
    2. Understanding the types of fonts you can use in Muse 00:03:14
    3. Using Web Safe fonts 00:03:30
    4. Using System fonts 00:05:12
    5. Using Web fonts 00:08:20
    6. Change type size 00:02:12
    7. Aligning text 00:03:31
    8. Adjust leading 00:03:06
    9. Changing letter spacing 00:03:22
    10. Adjust the space before and after 00:02:24
    11. Change the color of the text 00:02:26
    12. Using text indents 00:03:01
    13. Changing text case 00:01:24
  11. Work with text styles
    1. What are paragraph and character styles? 00:02:48
    2. Create a paragraph style 00:03:37
    3. Edit a paragraph style 00:04:01
    4. Practice: create a “body” paragraph style 00:01:50
    5. Duplicate and delete a style 00:03:48
    6. Unlink text from a style 00:03:08
    7. Create a character style 00:02:52
    8. Edit a character style 00:03:05
    9. Editing tags and styles 00:05:44
  12. Working With Shapes
    1. Create a rectangle 00:05:45
    2. Create and edit a “line” 00:05:45
    3. Create a dashed “line” 00:03:55
    4. Create a circle 00:03:49
  13. Creating color
    1. Understanding web color 00:04:25
    2. Create a fill and stroke color 00:06:42
    3. Sample color 00:02:16
    4. Save and edit swatches 00:06:34
    5. Create a gradient fill 00:04:59
  14. Working with Images
    1. What types of images can I use? 00:04:34
    2. Import JPEG, GIF, or PNG 00:03:21
    3. Place multiple images 00:03:08
    4. Crop, rotate, resize, and fitting images 00:09:24
    5. Understanding upsampled images 00:04:14
    6. Add alternative text and title 00:04:09
    7. Importing Photoshop images 00:06:20
    8. Copy/paste from Photoshop or Fireworks 00:07:03
    9. Understanding the Assets panel 00:08:04
    10. Replace images 00:03:22
    11. Fixing missing and modified links 00:06:49
    12. Edit original 00:04:51
    13. Wrapping text around an image 00:04:13
    14. Grouping content 00:03:51
    15. Locking content 00:02:22
    16. Inline images 00:07:18
  15. Working with buttons
    1. About buttons in muse 00:03:04
    2. Use the States panel to add states 00:03:51
    3. Create and place a Photoshop button 00:04:03
    4. Align content 00:05:18
    5. Add a link to the Photoshop button 00:02:32
  16. Applying effects
    1. Add a Shadow effect 00:02:46
    2. Add a Bevel effect 00:02:58
    3. Add a Glow effect 00:01:53
    4. Adjust transparency 00:05:18
    5. Round corners 00:02:47
  17. Using Graphic Styles
    1. About graphic styles 00:02:17
    2. Create a graphic style 00:06:40
    3. Edit a graphic style 00:04:18
    4. Finish the footer menu 00:03:50
  18. Adding links
    1. Add links to text 00:02:50
    2. Create an email link 00:04:16
    3. Add a link to an image 00:01:44
    4. Editing the default link style 00:05:44
    5. Creating a new link style 00:02:49
    6. Link extras 00:05:41
  19. Working with anchors
    1. Add text 00:02:45
    2. Pinning content 00:03:05
    3. Create anchors 00:02:49
    4. Link anchors 00:03:37
  20. Inserting HTML and multimedia
    1. Insert HTML (a Google map) 00:04:23
    2. Edit the HTML 00:04:09
    3. Add a Twitter feed 00:06:20
    4. Insert Google Driving Directions 00:03:34
    5. What multimedia can you insert into Adobe Muse? 00:01:40
    6. Insert a SWF file 00:03:09
    7. Insert a YouTube video 00:06:04
    8. Insert a Vimeo video 00:06:15
  21. Inserting HTML and multimedia
    1. Understanding widgets 00:05:09
    2. Understanding the different slideshow widgets 00:03:15
    3. Adding a thumbnail slideshow and changing the options 00:04:34
    4. Editing the appearance of the slideshow 00:13:18
    5. Inserting the widget and changing the options 00:05:32
    6. Adding content 00:10:08
    7. Editing the appearance of the lightbox 00:05:46
    8. Adding a Tabbed panel to the page and changing the options 00:04:13
    9. Adding content to the panel 00:07:49
    10. Editing the appearance of the panel 00:17:08
    11. Adding an Accordion panel to the page and changing the options 00:03:24
    12. Adding content to the panel 00:08:54
    13. Editing the appearance of the panel 00:06:58
    14. Inserting a tooltip widget and editing the options 00:04:58
    15. Insert your own content 00:05:08
    16. Change the appearance of the tooltip widget 00:04:21
    17. Add an Accordion panel to the page and change the options 00:02:20
    18. Add content to the panel 00:06:33
    19. Edit the appearance of the panel 00:06:27
  22. Publish or Export your site
    1. Understanding publishing options 00:02:51
    2. Clean up your site (exclude pages from export) 00:02:02
    3. Upload your site to Business Catalyst as a temporary site 00:04:58
    4. Making changes to your site and publishing changes to Business Catalyst 00:03:03
    5. Convert temporary site to a paid site 00:06:10
    6. Associate a domain with your site 00:09:16
    7. Export your site to HTML 00:02:52