Convert an HTML file to a master page in SharePoint 2013

Original: Convert an HTML file to a master page in SharePoint 2013

SharePoint 2013 offers many new features, and let's look at the ability to convert HTML pages to master pages. This feature makes it easier for designers to design Master pages and implement them in SharePoint, which is a great feature. Come on, get to the chase! ~

1, first, create a new HTML page, the effect such as:

Preview Effect:

2, upload this HTML page to SharePoint, I choose to upload to the "master Page style library";

3, I choose as "Design file" Upload, of course you can also choose other file types;

4. After the upload is successful, click "Settings"-"Design manager", left navigation to select "Edit Master Page";

5. Select "Convert HTML file to SharePoint master page" to find the HTML file you just uploaded;

6, select the HTML file we uploaded, click Insert (if you upload is not a design file, choose your upload file type, to find your HTML page, default is the design file);

7, after inserting, wait a moment, you can see the conversion success (of course, your HTML also conforms to the standard, otherwise, it may fail to convert);

8, the following start to apply our successful master page conversion;

Open Site Settings, site master page settings, found that the drop-down box is not our conversion success, but only the system comes with, it is strange, open the SPD to see a look!

9, open the SPD, find the master page, found that we have a new conversion of the master page, I am very gratified ah;

Guess: Maybe it's because the ASP is a master page, so the drop-down list can't be found?

10, since can not find, I was in the SPD directly set to the master page to try;

The middle will pop up if it changes to 15, yes or No.

11, I set the default master page in SPD, open the homepage;

Unexpectedly no response, as before, refreshed several times, all this! Well, there's another one set to customize the master page, try it, and take a look at the effect!

12, set as a custom master page, open, finally appeared I want to the thing!!

Something: Who translated the SPD, set the default master page, actually changed the system master page, and the custom master page, change is the page, this translation really enough pit Dad!!

13, set up the System master page, found a problem, our content heart is not in the middle, and the style is not the same as before. Later check the data, the style before conversion, can not uninstall head tag, otherwise it will be overwritten. Now, let's change the master page and put the PlaceHolderMain in the middle. In particular, we want to modify the HTML file, do not modify the master page (for developers to use), HTML is used by designers, the changes will overwrite the master, easy to design.

For example, put PlaceHolderMain div all in the place where we put the content. Then look at the effect, such as:

Finally see the head and tail of our master page! I'm glad to add the lost style!

14, add the style of time, found that the original style is just commented out, actually still in (as shown), OK, restore back!

When I try to restore the style, I find that the style is not working either in the head tag or the body tag, and I don't know if you are the same, so you have to change to an external reference.

Looking for a long time, find the style sheet location, with 10 seemingly not the same position, such as:

Join our own style, such as:

Of course, we can also customize a style sheet and then reference it.

15, finally see the effect of the master page, not easy AH! Such as! The effect is general, haha, is the test, need to adjust the adjustment again ~ ~ ~

Aside from this, we can modify the HTML page directly, then the SPD will change the master automatically, if we modify the master and then the HTML will overwrite the previous changes.

Convert an HTML file to a master page in SharePoint 2013