Lessons
Class Introduction
03:46 2What Muse Can Do
03:30 3Getting Started with your Document
22:18 4Adding Master Page Elements
16:23 5Organize Content with Layers
04:23 6Introduction to Responsive Design
18:19 7Adding Images and Working with the Asset Panel
27:22 8Adding Text and Creating Styles
21:01Advanced Text Styling
11:25 10Apply Effects
05:19 11Adding Links
27:30 12Adding a Button and Working with States
09:20 13The Power of Widgets
17:29 14Adding and Formatting a Contact Form
20:46 15Leveraging the CC Libraries Panel
10:31 16Adding HTML Content
05:11 17Final Testing and Publishing
11:12Lesson Info
Adding HTML Content
One of the last things I want to do here is I want to go to the portfolio page and we're going to put in another object for our portfolio, so we're going to add some HTML content, this is something that you can do really easily but it really depends on what the code is as to if it will work. In Muse we're not looking at code (mumbles) we're looking at design, we're doing our design, doing that kind of thing, at the end when we go to publish we're going to create code or Muse is going to create or generate code for us. If we want, we can add external HTML, CSS, JavaScript code and put it in here if we really want to. Now if you go to a site like Google Maps for instance, I'm going to go out there and just show this to you, you can stay where you want, stay where you're at if you want. If you guys go to a social site and you find some content you want to bring in, a social site being something that's already posted right something like a YouTube video or a widget, like I want to do this ...
video right here for instance. If I go to Share, a lot of these sites are actually going to have code called embed, so if I go to Embed here you're going to see that we have this code called iframe a lot of different types of social sites you can get to this, if you copy this you can paste it right into Muse and 90% 95% of the time, it's going to work. It really depends on the social site you're bringing it from, Twitter, Facebook, all these different sites, this stuff will work, so if I copy this content right here. Click Copy if I were to go over to Muse and just Paste right now Edit Paste I'm not doing anything special just Paste, I'm going to have a video that's it. So what it's doing is it's actually pulling it from the YouTube server basically. So it's putting in some code and the code I don't see, I don't need to see it 'cause Muse has already taken care of it for me. If you want, you can right click on that object and you can actually edit the HTML. If you know that you need to do something to it and you're familiar with the HTML code you can edit it. So if I click Edit HTML, there's the code have at it go to town (laughs). You don't know code, don't go for it, but this is where also if you have code that maybe needs to be updated, I do this a lot, you could delete this and replace it with the old code or you can also just delete the thing off the page and re-paste it that's fine that works too. But you're going to find that you are going to be able to see stuff like this all over the place. I'm going to go to Adobe XD I don't know how many of you have used Adobe XD before but I'm going to go in here and what I'm going to do is I'm going to open up a final thing that I go hopefully I've shared it already let's see. Adobe XD just to give you a heads up is a prototyping tool it's the ability for us to be able to create app and web design, we can basically go in and design something like app and web, we can go in and prototype it, we can test it out, you can make it so that if you tap on something it moves, screens that kind of thing. And then you can share it with people and you can share this experience this prototype with them. Well in XD just like a lot of programs you're going to find that if I do something like share this thing, like I go and share, I'm actually going to get code. So I could if I wanted to embed it somewhere, so you can see right here it says copy embed code that's the key word right there embed, so embed code, I copy it, I go to Muse, I paste and I actually have a working prototype now. So you'll find that, and there it is. If I go out to the browser I'll be able to actually tap through it, you'll be able to go through the prototype. Some of this code you're going to find if you do paste it from external sources it may not be responsive and it may not work very well responsive wise so you may end up doing things like taking an object like this and just pinning it to the center so it stays in the center and then let the page get narrower around it that kind of thing 'cause it's not going to respond this way. But that's awesome, HTML bringing it in here is really pretty cool. The other thing you can do is if you are hardcore if you want to bring in your own HTML and you know about JavaScript libraries and CSS files and all that kind of stuff, here's what you can also do. If I come up to Page, and come to Page Properties you'll see that we have metadata we have description and keywords that's something you can use for search engine optimization, keywords not as much anymore, a lot of search engines just ignore it, but down here you're going to see HTML for head. You can actually put content in the head code of the document, so if you have a library hosted or if you want to put in a link to a hosted library like JQuery or something you could do that, you could paste it in here. I'm not saying you got to know what you're doing, but if you do, this is a place where you can do it.
Ratings and Reviews
MikeD
This is part 2 of a 3 part course covering basics, fundamentals and some advanced properties. The three programs combined make a complete course in Adobe Muse. I am very pleased someone finally made a decent and complete course in how to use use Muse. As a photographer who has fairly simple needs for for building and maintaining a website, I needed something much less complicated than Dreamweaver. Brian Wood does an excellent job as he usually does. He is very detail oriented and he speaks technically to most operations within a program. He does work a little too hard at dumbing it down, but he is much better than those that skip over the details or those ewho don't even know the details. If you want to learn Muse, I highly recommend this course, in fact, all three parts.
wendy fite
Very efficient introduction to the basics in Muse. I did the Muse CC Quick Start course and then followed up with this Muse course on the fundamentals. This course is a little more technical that the quick start. Both courses give you what you need to do a website. The fundamentals talks briefly about HTML,JavaScript, etc.; while the quick start course does not. Recommend this class for using Muse for web design.
Student Work
Related Classes
Design Projects