Join Dani Beaumont for an in-depth discussion in this video Export to HTML, part of Muse Essential Training.
- [Instructor] We've talked about previewing in the browser, creating a temporary site, and FTPing your site up to a third party hosting platform. There's one additional way you can actually use Muse to publish out of site. Let's say you are a developer and you understand code and you enjoy using Muse to build out a mock up but you want to hand code the finished site, or in turn you work with a bunch of developers and you do build out the design of the site, you validate it with the client, but you hand it off to those developers to hand code the site.
Even if you're going to use your own web coding you may want to leverage some of the advantages Muse offers around optimizing images and creating what's known as CSS, or style sheets. The way to take advantage of that is when you publish. In the dropdown select export as HTML. The first question you're asked here is to give the site URL. When Muse publishes to an FTP third party or to a folder, it creates what's known as a site map.
That site map is used by search engines to determine if the content on that site changes from time to time. So the request here for a URL is so that that site map will have the correct absolute paths. If you don't have a site URL yet, it's fine you can just put in test.com and then you're going to go ahead and select where you want to put the site. So you can choose the path for where you want that to go.
I'm going to go ahead and put it in a nothing site folder, because this is just a test for me and I'll click okay. Muse will then come in as though it were publishing to the web but it's going to create a local instance of all your content in that folder. We'll give it a couple seconds to complete the process. Because it's not uploading to the web it's really copying content from one directory on my machine to another and then rendering all the HTML, CSS, and Javascript, it happens a lot more quickly.
When that export process is finished I can click okay. I'm going to go ahead and browse over to my desktop and find the folder where I saved out that content. You'll notice there's some nice stuff here. If you know web assets well. I have a folder of Javascript scripts. I can ignore that if I'm doing my own coding. There are CSS style sheets for each of the pages in the site, and you're welcome to look at that CSS style. There's also an assets folder. There's the video file that's going to be uploaded and lastly there's an images folder.
This is kind of magical. What Muse does is when it is optimizing an image, you may have a 10 megapixel high resolution photo that you placed within Muse and scale down to a smaller size. Muse automatically sub samples that image to the resolution of the device that you're working with. That includes multiple break points and background fills and such. It does a very good job of optimizing your content, so all of the images in this folder have been optimized for the web.
Even if you want to go off and hand code your content, leveraging these images gets you that much quicker towards the finished design.
Author
Released
1/26/2017- Creating a site plan
- Working with master pages
- Adding elements from CC Libraries to master pages
- Adding web fonts
- Creating and overriding text styles
- Placing images
- Working with image blocks and hyperlinks
- Configuring slideshows
- Adding new sections
- Creating a contact form
- Adding breakpoints
- Creating a responsive master page
- Publishing and exporting your Muse site
Skill Level Intermediate
Duration
Views
Related Courses
-
Creating a One-Page Scrollable Website in Muse
with Paul Trani1h 5m Intermediate -
Creating a Responsive Web Design
with Chris Converse3h 47m Beginner
-
Introduction
-
Welcome49s
-
Setup and exercise files1m 38s
-
-
1. Muse Overview
-
The power of Muse2m 1s
-
Tour the finished website4m 41s
-
-
2. Create Your Site with Muse
-
New site settings1m 14s
-
3. Master Pages
-
Muse interface overview6m 27s
-
CC Libraries tour6m 23s
-
The Layers panel3m 35s
-
4. Home Page
-
Image file types7m 34s
-
Images: Place vs. fill1m 56s
-
Create paragraph styles4m 38s
-
Override styles8m 56s
-
-
5. Preparation Page
-
Reuse headers4m 19s
-
Image blocks7m 22s
-
Image block variants4m 28s
-
Hyperlinks8m 15s
-
-
6. Product Detail Pages
-
7. Buyer's Guide
-
Format text7m 46s
-
Add separator lines2m 40s
-
Add and format new sections7m 28s
-
Add anchor tags3m 27s
-
-
8. Preorder Page
-
Add and scale images3m 13s
-
Configure a contact form4m 30s
-
Form states3m 15s
-
Form styling5m 1s
-
-
9. FAQ Page
-
10. Prepare for Responsive Design
-
Tools review6m 40s
-
11. Responsive Master Page
-
Add a mobile menu widget12m 22s
-
12. Responsive Pages
-
Responsive home page, part 16m 22s
-
Responsive home page, part 27m 35s
-
Responsive buyer's guide11m 52s
-
Responsive preparation steps11m 15s
-
Responsive FAQ page2m 46s
-
-
13. Finishing Touches
-
SEO optimization5m 43s
-
-
14. Publish and Export Your Site
-
Test in browsers2m 52s
-
Create a trial site2m 23s
-
Use FTP44s
-
Export to HTML3m 20s
-
-
Conclusion
-
Next steps1m 4s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Export to HTML