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.
If you've already created a Muse site for the desktop, you may want to adapt this content for viewing on tablets, like the iPad or Kindle Fire. While your content could be viewed on these devices, you can create a better user experience by building specific layouts for these sites. We are looking at a finished desktop site, but what we want to do is add a tablet version of it, so at the top of the screen we are going to click on the +Tablet. When we do this, it will say Add Tablet Layout, and we have to decide, do we want to copy anything from an existing site? In this case, yes, I want to copy it from the desktop.
And what it is going to do is copy the site plan or the structure of the individual pages and any page attributes or browser fills. In this case, the first two is what I want. So I am going to click OK, and it will take a moment, and we can see all of the pages get added to the Tablet page. Now looking at these pages, it looks rather blank, and that is because it doesn't copy over any of the content. So what we have to do is manually copy and paste that over. So what we will do is go to our Desktop, and I am going to go down to the Master page on the Desktop, and I am going to do Select All, Command+A or Ctrl+A on the PC, and copy it.
Next, we are going to go to the Tablet page and go down to that Master and paste it in. I am going to zoom out a little bit so I can see everything, and we are just going to kind of position this down here. And at the top, we are just going to resize the logo so it fits a little better on this page. And the Menu, we are going to put right down here, and I am going to resize this to just get a little tighter so it looks good. There we are. And then for the Footer, we can bring this top area down. And we are going to zoom in so we can see this, and we will just resize each of these individual pieces so it fits the page.
I want to make sure it snaps to the edge, so we don't have any gaps, and then we will get rid of these repeating tile, put this here. It looks like we have some extra text we do not need, so I am just going to get rid of that back there, and we will resize this. There we go. That looks pretty good. And then we will just center this right at the bottom. There. Now if I zoom back out--and I will lower this right here--we have a nice master page set up for all of our tablet pages.
If we go back to the Plan view, everything looks good. Our next step is to copy and paste over all the individual content. So we are going to go over our desktop page and I am going to go to Volunteer. I will do a Select All and copy to the clipboard. Because I am on a page, we do not have to worry about the actual master page content, because remember, that's locked. We can only access that on a master page. We will go back to the Tablet section, go to Volunteer, and we will paste it in. It usually helps to zoom out a little bit, so we can start to position things a little better.
I am thinking that's pretty good. I am going to hold down the Command or the Ctrl key on the PC to crop this image a little bit and then we will resize this to line this up, grab these other items, and position them right here. Now, you have to be careful when you are moving your items, because in this case, it is hard to see, but I actually missed this little image right here. So I am going to do an Undo, and I am going to click and drag to make sure I grab everything in that section and then drag it over. One thing you might want to do is make sure you group your items before you copy and paste them.
That way you do not miss any individual little items. Back to the Plan view, we can see that I have that one page finished, and now I will just have to repeat this process for the rest of the layout. Depending on the complexity of your site, the difficulty of converting your desktop site to a tablet site may vary; however, it shouldn't be too much work, because the size of tablet screens is pretty similar to the size of a desktop.
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.