Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
In the early days of the web, most sites were primarily a collection of Text and Hyperlinks. After the first browsers became popular, graphics soon became an important part of web design. Let's take a look at how we can import graphics into Muse. We'll begin by going to the Home page and to bring in a graphic, we're going to go to File > Place, you can also press Command+D or Ctrl+D. On our Desktop in our Exercise Folder, we have an Assets Folder with a large number of graphics. This graphics are primarily JPEGs, GIFS and Pings, but we can also use SWF files and Photoshop PSDs.
Other formats like AI, EPS, or TIFs are not supported. To create these web graphics it's recommended to use the Save for Web Command out of other applications like Photoshop, Illustrator or Fireworks. The first graphic we're going to grab is about-hero.jpg. When we press Select, we'll get it with a loaded cursor. If you're used to Adobe InDesign, this is very familiar. With my loaded cursor I get a small preview of the image, and when I click, it will be placed at exactly 100% of its actual size.
If I press Undo, Command+Z or Ctrl+Z, I'll get it back to the loaded cursor again, and this time I can click and drag and draw it to whatever size I like. You'll see this small percentage will let me know how big I'm making it. It's not recommended to go beyond 100%, because the photo could become pixelated. So, for now we'll keep it a little smaller. Let's delete this graphic and let's bring in some more. I'm going to go to File > Place again, and this time we're going to bring in more than one image. What we're going to do is I'm going to click on the top image here, hold my Shift key and click on the fourth one.
If I wanted to grab another one, I could hold down Command on the Mac or Ctrl on the PC, to grab any other images that I like that were noncontinous. If I wanted to remove those, hold down the same key, Command or Ctrl, and deselect them, we'll stay with the top four and press Select. Now my loaded cursor has a number 4; this tells me I have 4 images, and the first one is loaded. If I want to switch to another image, I can use my arrow keys on the keyboard to switch between the various images. If I don't want one of them, I can press the Esc key to remove it from my queue.
Now with this three images I can just do a click and drag, click and drag, and a click and drag to quickly bring all three of them in. Another way to bring a graphic into Muse is via drag and drop. On the Mac if I go to the Finder and find an image that I want, I can just drag and drop it directly into Muse. I can click and put it on the page wherever I like. On the PC I'll have to have an Explorer window to do the exact same operation. When you drag and drop an image, it's exactly the same process as doing File > Place or pressing Command+D or Ctrl+D.
Placing graphics as links into Muse is the preferred way of working. While it's technically possible to copy and paste graphics in, it will result in a larger file size and make it harder to make edits down the road. In a later movie we'll discuss Embedding and Editing Links in greater detail.
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.