Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author James Fritz shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Adobe Photoshop, InDesign, or Illustrator. The course covers the design process from start to finish, from setting up web pages and populating them with graphics and text, to creating dynamic menus and adding special features such as widgets, slideshows, animations, embedded video, social media integration, and more. James also explains how to create an alternate layout for display on mobile devices, publish and update your site, and view analytics on web traffic.
When you're looking for directions, you've probably used an online mapping service like Google or Bing. One of my favorite features of Muse is the ability to use arbitrary HTML to add these types of maps to your website. By embedding a map, it makes it much easier for visitors of your site to find your location. Let's go to the Contact Us page. Now on this page I want to add a map. Before we go to Google or Bing, we should figure out how big of a map we need on our website. So I'm going to grab my Rectangle tool and click and drag a rectangle to determine how big of a map that I want.
After drawing the rectangle, I'll grab my Selection tool and open up the Transform panel. Here it tells me the width of the frame is 526 pixels and it's 333 pixels tall. I'm going to write that down so I can remember it when I go online. I'll switch my web browser. And I've already gone to maps.google.com and entered my address. Once I'm in Google maps and I've found the location, I'm going to go and click on this paper link to open up the embedding options. Next, I'm going to click on Customize in preview embedded map.
Here I can choose the custom radio button, and then enter my Width and Height. My Width was 526 and my Height was 333. As I make those changes, you'll see the map will update below. I'll resize the map to get it just right. When I have it the way that I like it, I'm going to come down and I'm going to select all of this code and copy it to the clipboard. Next, I'll go back to Muse, get rid of the rectangle placeholder and paste in the code. Just like magic, the Google map appears and I can put it on my page.
Now while I'm in Design mode, there really isn't much I can do. We just see a poster frame, and it's not editable. But by going into Preview mode, I can try it out. Here we have an actual working Google map, where I can zoom in and zoom out, and even change the mode to Earth or Satellite. Now that we've seen how to do this with a Google map, let's try it with a Bing map. I'm going to go back to Design mode and get rid of this frame. Next we'll go our web browser, and I can close this window, and I'm going to go to my next tab where I already have Bing located.
To get the Bing maps, you can just go to bing.com/maps and then enter your address. Since I have the location already found, I can click on the Share button and then choose Customize and preview. Now this window is very similar to Google maps. I'll just go down to Custom and enter my numbers: 526 and 333. With that finished, I'll put it at the right size and right zoom level and then Generate the code. Next, I'll copy the code that was been generated, and I'm going to go back into Muse and paste the code in.
Now that I have the map in Muse, we'll go back into Preview and make sure it works. Excellent! I can move it around and zoom in and zoom out. Finally, if I decide that I want to change the size of this map, if I click and drag, it's not going to let me change it. So what I have to do is either go back to the website and type in new dimensions, or if I'm feeling adventurous, I can right-click my mouse and go into HTML and just find the Width and Height fields. Now at first glance, this looks pretty scary.
But if you look at the top, it just says Width 526. I'm going to change it to 500 and Height, I'm going to 300. After you do this, click OK, wait a moment, and Muse will update. Now we have the map at the correct size. If you prefer to use a different mapping service online, it most likely has the ability to let you copy and paste code directly into your website. Just take the time to look for a button that says Embed, Share, or Link. From here, you should be able to copy and paste the code like we've seen in this movie.
Find answers to the most frequently asked questions about Muse Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.