Adobe® Muse Fundamentals

Lesson 16 of 17

Adding HTML Content

 

Adobe® Muse Fundamentals

Lesson 16 of 17

Adding HTML Content

 

Lesson 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.

Class Description

Take a deep dive into creating a responsive website—without writing code—with this complete step-by-step walkthrough of Adobe® Muse. You'll walk away with a solid foundation for building a responsive website and see how easy it is to create a truly unique, expressive responsive website.

Join author, speaker, and web developer Brian Wood as you create a unique responsive website from start to finish, in Adobe® Muse.

In this Fundamentals class Brian will show you:

  • A typical web workflow, from start to finish
  • Best practices for setting up your fully responsive website and add pages
  • How to setup and work with master pages (and understand why you want to)
  • Adding master content like page navigation, logo, and more
  • How to ensure that your design content works across all screen sizes using responsive features
  • Best practices for adding image and graphics to your pages
  • How to add and style text using styles and fonts like Typekit and self-hosted
  • A deep dive into the powerful widgets available to you, including slideshows, adding a map, and much more
  • How to work smarter with your site content using CC Libraries
  • Add a form for collecting basic user information
  • Incorporate social content like a twitter follow and more
  • Best methods for Search Engine Optimization (SEO)
  • The different methods for sharing a trial site, and publishing your project for the world to see.

This course is for you if you need a deep dive into Adobe® Muse CC version 18.0.

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.