Embedded HTML refers to the source code generated by a third-party website, such as Google, YouTube, Flickr, or Picasa. You can set up an account with these websites, log in, and then copy the embed code from their site and add it to your site.
When you paste embedded HTML into a page, it's like putting a window inside a page on your site that displays the content of a third-party site inside it.
Embedded HTML is a great way to add complex information (such as maps, weather forecasts, stock market quotes) as well as rich media (like digital videos, slideshows, and audio files) quickly and easily. This strategy has the added benefit of enabling you to use a third-party’s site as a hosting service and uploading interface. For example, if you create a free account with YouTube, you can create your own YouTube channel and upload the video content for your site. YouTube includes a web page that simplifies the upload process and hosts the video files on their site. When you want to update your site, simply add more videos to your YouTube channel, copy the embed code, and then paste it into a page to add new videos to your Muse site.
In this section, you’ll copy the source code from Tumblr. This is a free online service that requires you to create an account and sign in, and then post blog entries that are publicly available. Blogs are easy to use and are especially helpful when you want to make it easy for someone who is not technically inclined to update their own site. Most blog sites include an online interface, so you can use any browser to log into your account and post new entries, without any HTML knowledge or additional software.
Note: Visitors that view your website do not need to have a Tumblr account to view the blog you embed on the page. The account is only needed by you as you are designing the site—in order to create a custom blog and generate the embed code you'll add to your website.
- For this tutorial, you do not need to create a Tumblr account to follow along. Simply copy the following code, which was generated by the Tumblr website after creating a free blog:
<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>
- In Plan view, double-click the events page thumbnail to open the page and edit it in Design view.
- Click in the middle of the empty page and use one of the following methods to embed the HTML code:
- Choose Edit > Paste or use the keyboard shortcut (Command+V for Mac or Control+V for Windows) to paste the code directly on the page.
- Choose Object > Insert HTML. Click inside the field of the Edit HTML window that appears and paste the content. Click OK to close the Edit HTML window.
Note: In most cases, Muse will recognize HTML code and will automatically embed the HTML you paste directly on the page. However, if you see the code on the page, instead of the content from the third-party website, then try choosing Object > Insert HTML instead.
After embedding the HTML code, you'll see a blue bounding box with handles surrounding the blog posts that were entered for the Katie's Cafe Tumblr account.
- Use the Selection tool to drag the handles to resize the blog content, so that it spans approximately 80% of the page width. Center the blog content on the page, to allow the tiling background graphic to show through on the left and right sides. Blue measurement rectangles display the distance from other objects. A red alignment guide briefly appears to indicate when the selected object is centered vertically.