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.
You may have noticed that sometimes text in Muse does not have the same line breaks in Preview mode as Design mode. You may have also noticed that some frames contain a strange dashed line in the middle of them. Both of these occurrences work together utilizing a feature called Minimum Height. We're going to go to the Home page. On the Home page, we have two text frames that look pretty much the same. When I select the one on the left, there doesn't seem to be any problems, but when I select the one on the right, you'll notice that there's a thin dashed line in the middle.
This is referred to as the Minimum Height. The reason that's there is because the end user could change the size of the font. If they made the font smaller, the text frame could shrink, but that won't get any smaller than the height that is showing from the minimum height. Let's go in Preview mode and see how this layout looks. At first glance, it may look like nothing's changed; but in fact, the frame on the right is a little shorter than the frame on the left. In addition, the photo on the bottom right is up a little higher than the photo on the bottom left.
Back in Design mode, we can see that they're aligned perfectly. So what's going on here? We've got to figure out this problem. Well, there're actually two reasons that this is happening. The first one is the font. Pay attention to the text on the right-hand side. We'll see that "include regular garden" is still there, but "regular" is up a line, where in the other screen, it was down the line. The reason for that is because the font that we chose. Back in Design mode, if I select this text, you'll see that the font is Franklin Gothic Medium, a Web-safe font, but just because it's a Web-safe font doesn't mean it's on every single computer.
In fact, it actually isn't even on the computer that I'm recording on right now. When you choose a web font and you mouse over the name of it, a tool tip will pop up telling me the alternate fonts, because if I don't have Franklin Gothic Medium, it'll fall back to Arial Narrow, then Arial, and finally, any sans-serif font that's on my computer. In our case, it switched to Arial, and because the appearance of Arial is a little different than Franklin Gothic, the line breaks change. Because the line break changed, the frame ended up getting a little smaller.
So we have to solve this problem; there are two different things that we could do. One would be to change our font to a font that we knew that every single person had. Unfortunately, that really isn't a realistic option. The other option is to remove the Minimum Height from our frame. To do that, select the frame and make it a little taller until the dashed line disappears, and then repeat the process on the left-hand side so they're the same height. Make sure you have Smart Guides enabled to make this easier. Back in Preview mode, we'll see that everything looks the way that it should.
Even though the text may have reflowed slightly different, all of our objects are now the same size and have the same relationships. One of the hardest parts of working in web design versus print design is learning to give up control. As much as you might want to control every single line break by adding a soft return, the end result would be much worse than if you left it alone.
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.