Solved

Convert a Master Page to HTML

Posted on 2016-10-04
16
232 Views
Last Modified: 2016-10-07
Usually folks want to take an HTML file and convert it to a Master Page file.  However,  I have  a master page that I want to work in with Design Manager.  To do so,  I need to upload an "HTML" file and modify it with the Design Manager Editor.

I haven't found how to convert from a Master Page to an HTML file to allow me to use the Design Manager Editor.
0
Comment
Question by:Howard Bash
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 8
16 Comments
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41829307
Why not just view source in the browser?
1
 
LVL 1

Author Comment

by:Howard Bash
ID: 41830489
The reason is that there is a tool in SharePoint 2013 called the Design Manager.  It allows you to noodle around with among other page types,  master pages.  However,  it only edits the HTML file and upon saving and uploading that HTML file,  SharePoint checks and if the page is valid,  creates the associated .master file.

I didn't start with an HTML file, so to use the Design Manager,  I have to convert the .master page somehow to HTML.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41830505
I have to convert the .master page somehow to HTML.
... which is what the browser does. If you view the page with your browser. Right click, select view source you will have the html.
0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 1

Author Comment

by:Howard Bash
ID: 41830511
It's not the same HTML that the Designer uses.  If you look at a sample HTML file that has an associated .MASTERPAGE file,  you will see that the rendered page and that HTML file differ greatly.  SharePoint has placeholders and the like for example that would be in the HTML file and not in the rendered page.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41830526
that would be in the HTML file and not in the rendered page
Maybe we are missing each other on terminology - the rendered page is HTML.

From what I am hearing there are three possibilities
- Master page - which I imagine is using some sort of templating markup that SharePoint uses
- A file that Designer users - that looks different from a Master page but not the same as a browser rendered page
- An rendered html page in the browser.

I am trying to get a handle on what the middle one looks like.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41830534
The Design Manager allows you to edit HTML.  That HTML differs from the source you view of a rendered page.  So,  taking that source and using it like the HTML that the Designer works with, won't produce the same results.

The designer, via a "Snippet Editor"  allows you to insert SharePoint specific tags for assorted widgets which will be converted to Master Page format if the special HTML page uploads and is valid.

I will paste a sample of one of these special HTML pages here:
<?xml version="1.0" encoding="utf-8"?><!--SPG:

This HTML file has been associated with a SharePoint Master Page (.master file) carrying the same name.  While the files remain associated, you will not be allowed to edit the .master file, and any rename, move, or deletion operations will be reciprocated.

To build the master page directly from this HTML file, simply edit the page as you normally would.  Use the Snippet Generator at https://bashcomputing.sharepoint.com/sites/PublishingSandbox/_layouts/15/ComponentHome.aspx?Url=https%3A%2F%2Fbashcomputing%2Esharepoint%2Ecom%2Fsites%2FPublishingSandbox%2F%5Fcatalogs%2Fmasterpage%2FMyMiniMasterPage%2Emaster to create and customize useful SharePoint entities, then copy and paste them as HTML snippets into your HTML code.   All updates to this file will automatically sync to the associated Master Page.

-->
<!-- _lcid="1033" _version="16.0.5715" _dal="1" -->
<!-- _LocalBinding -->
<!DOCTYPE html[]>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <!--CS: Start Head Snippet-->
        <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SID:00 -->
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0" />
        <!--SPM:<SharePoint:RobotsMetaTag runat="server"/>-->
        <!--MS:<SharePoint:PageTitle runat="server">-->
            <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
            <!--SPM:<SharePoint:ProjectProperty Property="Title" runat="server"/>-->
            <!--SPM:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:PageTitle>-->
        <!--SPM:<SharePoint:StartScript runat="server"/>-->
        <!--MS:<SharePoint:CssLink runat="server" Version="15">-->
            <!--PS: Start Preview--><link href="https://bashcomputing.sharepoint.com/_layouts/15/1033/styles/Themable/corev15.css" rel="stylesheet" type="text/css" /><link href="https://bashcomputing.sharepoint.com/_layouts/15/1033/styles/OLD/Themable/layouts.css" rel="stylesheet" type="text/css" /><link href="https://bashcomputing.sharepoint.com/_layouts/15/1033/styles/Themable/searchv15.css" rel="stylesheet" type="text/css" /><!--PE: End Preview-->
        <!--ME:</SharePoint:CssLink>-->
        <!--SPM:<SharePoint:CacheManifestLink runat="server"/>-->
        <!--SPM:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard"/>-->
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false"/>-->
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false"/>-->
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false"/>-->
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false"/>-->
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false"/>-->
        <!--SPM:<SharePoint:CustomJSUrl runat="server"/>-->
        <!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
            <!--PS: Start Preview--><link href="https://bashcomputing.sharepoint.com/_vti_bin/spsdisco.aspx" rel="alternate" type="text/xml" /><!--PE: End Preview-->
        <!--ME:</SharePoint:SoapDiscoveryLink>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
            <!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
            <!--ME:</SharePoint:DelegateControl>-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->
        <!--SPM:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
        <!--SPM:<WebPartPages:SPWebPartManager runat="server"/>-->
        <!--SPM:</SharePoint:AjaxDelta>-->
        <!--CE: End Head Snippet-->
        <!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>

<mso:ContentType msdt:dt="string">Design File</mso:ContentType>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://bashcomputing.sharepoint.com/sites/PublishingSandbox/_catalogs/masterpage/MyMiniMasterPage.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->
    </head>
    <body>
        <div id="ms-designer-ribbon">
            <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
            <div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
                    <!--MS:<SharePoint:EncodedLiteral runat="server" text="&#60;%$Resources:wss,master_turnonaccessibility%&#62;" EncodeMethod="HtmlEncode">-->
                    <!--ME:</SharePoint:EncodedLiteral>-->
                </a>
            </div>
            <div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
                    <!--MS:<SharePoint:EncodedLiteral runat="server" text="&#60;%$Resources:wss,master_turnoffaccessibility%&#62;" EncodeMethod="HtmlEncode">-->
                    <!--ME:</SharePoint:EncodedLiteral>-->
                </a>
            </div>
            <!--SID:02 {Ribbon Snippet}-->
            <!--PS: Start Preview--><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">In true previews of your site, the SharePoint ribbon will be here.</div><!--PE: End Preview-->
        </div>
        <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
            <!--SPM:<wssucw:Welcome runat="server" EnableViewState="false"/>-->
        <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
        <div id="s4-workspace">
            <div id="s4-bodyContainer">
                <div>
                    <!--CS: Start PlaceHolderMain Snippet-->
                    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                    <!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
                            <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black;">
                                This area will be filled in by content you create in your page layouts.
                                <div class="myNav">
                                
                                
                                
                                
                                <div class="myMenu">
<div data-name="TopNavigationNoFlyoutWithStartNode"><!--CS: Start Top Navigation Snippet--><!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxDelta runat="server" CssClass="ms-displayInline ms-core-navigation ms-dialogHidden" BlockElement="True" ID="DeltaTopNavigation">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:DelegateControl runat="server" Id="topNavigationDelegate" ControlId="TopNavigationDataSource">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span style="display:none"><table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow"><tr><td nowrap="nowrap"><span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span><!--PE: End of READ-ONLY PREVIEW--><!--MS:<Template_Controls>--><!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">--><!--ME:</asp:SiteMapDataSource>--><!--ME:</Template_Controls>--><!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a><!--MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">--><!--MS:<SharePoint:AspMenu runat="server" UseSeparateCss="false" AdjustForShowStartingNode="False" StaticDisplayLevels="2" AccessKey="1" SkipLinkText="" EnableViewState="False" MaximumDynamicDisplayLevels="0" UseSimpleRendering="True" DataSourceID="topSiteMap" Orientation="Horizontal" ID="TopNavigationMenu">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link id="CssLink-52a7953ed1d54f839910808d2e75b584" rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" href="/sites/PublishingSandbox" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Publishing Sandbox</span><span class="ms-hidden">Currently selected</span></span></a><ul class="static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/Test-Page.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Test Page</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/MoreTesting.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">MoreTesting</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/anjularJSForm.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">anjularJSForm</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/ExperimentingWithCQWPBug.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">ExperimentingWithCQWPBug</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/Another-Test-Page.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Another Test Page</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/LastTestForNow.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">LastTestForNow</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/FromWelcome.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">FromWelcome</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PublishingSandbox/Pages/Maps.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Maps.aspx</span></span></a></li></ul></li><li class="static ms-verticalAlignTop ms-listMenu-editLink ms-navedit-editArea"><span class="ms-navedit-editSpan" id="zz7_TopNavigationMenu_NavMenu_Edit"><a id="zz7_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-editLinksText" href="#" onclick="g_QuickLaunchMenu = null; EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode', 'zz7_TopNavigationMenu', 1, 0, 0, '\u002fSITES\u002fPUBLISHINGSANDBOX'); cancelDefault(event); return false;" title="Edit Links"><span class="ms-displayInlineBlock"><span class="ms-navedit-editLinksIconWrapper ms-verticalAlignMiddle"><img class="ms-navedit-editLinksIcon" src="/_layouts/15/images/spcommon.png?rev=44#ThemeKey=spcommon" alt="Edit Links" /></span><span class="ms-metadata ms-verticalAlignMiddle">Edit Links</span></span></a><span id="zz7_TopNavigationMenu_NavMenu_Loading" class="ms-navedit-menuLoading ms-hide"><a id="zz7_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears(); return false;" title="This animation indicates the operation is in progress. Click to remove this animated image."><img id="zz7_TopNavigationMenu_NavMenu_GearsImage" src="/_layouts/15/images/loadingcirclests16.gif?rev=44" alt="This animation indicates the operation is in progress. Click to remove this animated image." /></a></span><div id="zz7_TopNavigationMenu_NavMenu_ErrorMsg" class="ms-navedit-errorMsg"></div></span></li></ul></div><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:AspMenu>--><!--ME:</asp:ContentPlaceHolder>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:AjaxDelta>--><!--CE: End Top Navigation Snippet-->
</div>                                
                                </div>
                                
                                
                                
                                
                                <div class="leftNav">
                                </div>
                                
                                
                                
                                <div class="rightNav" style="float:right">
<div data-name="SearchBox"><!--CS: Start Search Box Snippet--><!--SPM:<%@Register Tagprefix="SearchWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SearchWC:SearchBoxScriptWebPart UseSiteCollectionSettings="true" EmitStyleReference="false" ShowQuerySuggestions="false" ChromeType="None" UseSharedSettings="true" TryInplaceQuery="false" ServerInitialRender="true" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-webpart-chrome ms-webpart-chrome-fullWidth "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBody noindex " OnlyForMePart="true" allowDelete="false" style=""><div componentid="ctl00_ctl03_csr" id="ctl00_ctl03_csr"><div id="SearchBox" name="Control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_ctl03_csr_sboxdiv"><input type="text" value="Search..." maxlength="2048" accessKey="S" title="Search..." id="ctl00_ctl03_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);return Srch.U.cancelEvent(event);}})" onkeydown="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.activateDefaultQuerySuggestionBehavior();})" onfocus="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.hidePrompt();ctl.setBorder(true);})" onblur="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr'); if (ctl){ ctl.showPrompt(); ctl.setBorder(false);}})" class="ms-textSmall ms-srch-sb-prompt ms-helperText" /><a title="Search" role="button" class="ms-srch-sb-searchLink" id="ctl00_ctl03_csr_SearchLink" onclick="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);})" href="javascript: {}"><img src="/_layouts/15/images/searchresultui.png?rev=44#ThemeKey=searchresultui" class="ms-srch-sb-searchImg" id="searchImg" alt="Search" /></a></div></div></div><noscript><div id="ctl00_ctl03_noscript">It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.</div></noscript><div id="ctl00_ctl03"></div><div class="ms-clear"></div></div></div><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SearchWC:SearchBoxScriptWebPart>--><!--CE: End Search Box Snippet-->
</div>                                
                                
                                
                                </div>
                                
                                
                                
                                </div>
                                <div class="main"> 
                                
<!--CS: Start Web Pages Snippet--><!--SPM:<%@Register Tagprefix="af25e94ec"  Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>--><!--MS:<af25e94ec:ContentBySearchWebPart runat="server" AlwaysRenderOnServer="False" ResultType="" DataProviderJSON="{&quot;QueryGroupName&quot;:&quot;Default&quot;,&quot;QueryPropertiesTemplateUrl&quot;:&quot;sitesearch://webroot&quot;,&quot;IgnoreQueryPropertiesTemplateUrl&quot;:false,&quot;SourceID&quot;:&quot;5DC9F503-801E-4CED-8A2C-5D1237132419&quot;,&quot;SourceName&quot;:null,&quot;SourceLevel&quot;:null,&quot;CollapseSpecification&quot;:&quot;&quot;,&quot;QueryTemplate&quot;:&quot;{searchboxquery}&quot;,&quot;FallbackSort&quot;:null,&quot;FallbackSortJson&quot;:&quot;null&quot;,&quot;RankRules&quot;:null,&quot;RankRulesJson&quot;:&quot;null&quot;,&quot;AsynchronousResultRetrieval&quot;:false,&quot;SendContentBeforeQuery&quot;:true,&quot;BatchClientQuery&quot;:true,&quot;FallbackLanguage&quot;:-1,&quot;FallbackRankingModelID&quot;:&quot;&quot;,&quot;EnableStemming&quot;:true,&quot;EnablePhonetic&quot;:false,&quot;EnableNicknames&quot;:false,&quot;EnableInterleaving&quot;:true,&quot;EnableQueryRules&quot;:true,&quot;EnableOrderingHitHighlightedProperty&quot;:false,&quot;HitHighlightedMultivaluePropertyLimit&quot;:-1,&quot;IgnoreContextualScope&quot;:false,&quot;ScopeResultsToCurrentSite&quot;:false,&quot;TrimDuplicates&quot;:true,&quot;Properties&quot;:{&quot;Scope&quot;:&quot;{Site.URL}&quot;,&quot;ContentTypeId&quot;:&quot;0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39*&quot;},&quot;PropertiesJson&quot;:&quot;{\&quot;Scope\&quot;:\&quot;{Site.URL}\&quot;,\&quot;ContentTypeId\&quot;:\&quot;0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39*\&quot;}&quot;,&quot;ClientType&quot;:&quot;&quot;,&quot;ClientFunction&quot;:&quot;&quot;,&quot;ClientFunctionDetails&quot;:&quot;&quot;,&quot;UpdateAjaxNavigate&quot;:true,&quot;SummaryLength&quot;:180,&quot;DesiredSnippetLength&quot;:90,&quot;PersonalizedQuery&quot;:false,&quot;FallbackRefinementFilters&quot;:null,&quot;IgnoreStaleServerQuery&quot;:false,&quot;RenderTemplateId&quot;:&quot;&quot;,&quot;AlternateErrorMessage&quot;:null,&quot;Title&quot;:&quot;&quot;}" BypassResultTypes="True" ResultsPerPage="3" SelectedPropertiesJson="null" HitHighlightedPropertiesJson="[&quot;Title&quot;,&quot;Path&quot;,&quot;Author&quot;,&quot;SectionNames&quot;,&quot;SiteDescription&quot;]" AvailableSortsJson="null" UseSimplifiedQueryBuilder="True" PreloadedItemTemplateIdsJson="null" QueryGroupName="Default" StatesJson="{}" ServerIncludeScriptsJson="null" Title="&lt;%$Resources:Microsoft.Office.Server.Search,CBS_WebPage_Title;%&gt;" FrameType="None" SuppressWebPartChrome="False" Description="&lt;%$Resources:Microsoft.Office.Server.Search,CBS_WebPage_Description;%&gt;" IsIncluded="True" ZoneID="" PartOrder="0" FrameState="Normal" AllowRemove="True" AllowZoneChange="True" AllowMinimize="True" AllowConnect="True" AllowEdit="True" AllowHide="True" IsVisible="True" DetailLink="" HelpLink="" HelpMode="Modeless" Dir="Default" PartImageSmall="" MissingAssembly="&lt;%$Resources:core,ImportErrorMessage;%&gt;" ImportErrorMessage="&lt;%$Resources:core,ImportErrorMessage;%&gt;" PartImageLarge="" IsIncludedFilter="" ExportControlledProperties="True" ConnectionID="00000000-0000-0000-0000-000000000000" ID="g_182485a7_7342_49f4_94d3_f3e4c2e7eb47" ChromeType="None" ExportMode="All" __MarkupType="vsattributemarkup" __WebPartId="{182485a7-7342-49f4-94d3-f3e4c2e7eb47}" WebPart="true" Height="" Width="">--><!--ME:</af25e94ec:ContentBySearchWebPart>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
		<div class="ms-webpart-chrome ms-webpart-chrome-fullWidth ">
	<div class="ms-WPBody noindex " id="WebPartWPQ1" allowdelete="false" onlyformepart="true" width="100%" haspers="true" webpartid="00000000-0000-0000-0000-000000000000"><div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_csr" componentid="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_csr"></div><noscript>&lt;div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_noscript"&gt;It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.&lt;/div&gt;</noscript><div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47">
		<div class="display-none">
			<div class="ms-webpart-chrome-title" id="WebPartWPQ2_ChromeTitle">
				<span title="" class="js-webpart-titleCell" id="WebPartTitleWPQ2"><h2 class="ms-webpart-titleText" style="text-align: justify;"><nobr><span></span><span id="WebPartCaptionWPQ2"></span></nobr></h2></span>
			</div><div class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " id="WebPartWPQ2" allowdelete="false" onlyformepart="true" width="100%" haspers="true" webpartid="00000000-0000-0000-0000-000000000000"><div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_ctl00_csr" componentid="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_ctl00_csr"></div><noscript>&lt;div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_ctl00_noscript"&gt;It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.&lt;/div&gt;</noscript><div id="ctl00_ctl00_PlaceHolderMain_ComponentMain_ComponentPropertyGrids_g_182485a7_7342_49f4_94d3_f3e4c2e7eb47_ctl00">

			</div><div class="ms-clear"></div></div>
		</div>
	</div><div class="ms-clear"></div></div>
</div><!--PE: End of READ-ONLY PREVIEW--><!--CE: End Web Pages Snippet-->                                
                                
                                
                                </div>
                            </div>
                        <!--ME:</asp:ContentPlaceHolder>-->
                    <!--ME:</SharePoint:AjaxDelta>-->
                    <!--CE: End PlaceHolderMain Snippet-->
                </div>
            </div>
        </div>
        <div id="navBarContainer">
            <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server"/>-->
        </div>
    </body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41830537
Here is a smaller fragment.  This snippet will make the markup for a search button:
<div data-name="SearchBox"><!--CS: Start Search Box Snippet--><!--SPM:<%@Register Tagprefix="SearchWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SearchWC:SearchBoxScriptWebPart UseSiteCollectionSettings="true" EmitStyleReference="false" ShowQuerySuggestions="false" ChromeType="None" UseSharedSettings="true" TryInplaceQuery="false" ServerInitialRender="true" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-webpart-chrome ms-webpart-chrome-fullWidth "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBody noindex " OnlyForMePart="true" allowDelete="false" style=""><div componentid="ctl00_ctl03_csr" id="ctl00_ctl03_csr"><div id="SearchBox" name="Control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_ctl03_csr_sboxdiv"><input type="text" value="Search..." maxlength="2048" accessKey="S" title="Search..." id="ctl00_ctl03_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);return Srch.U.cancelEvent(event);}})" onkeydown="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.activateDefaultQuerySuggestionBehavior();})" onfocus="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.hidePrompt();ctl.setBorder(true);})" onblur="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr'); if (ctl){ ctl.showPrompt(); ctl.setBorder(false);}})" class="ms-textSmall ms-srch-sb-prompt ms-helperText" /><a title="Search" role="button" class="ms-srch-sb-searchLink" id="ctl00_ctl03_csr_SearchLink" onclick="EnsureScriptFunc('Search.ClientControls.js', 'Srch.U', function() {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);})" href="javascript: {}"><img src="/_layouts/15/images/searchresultui.png?rev=44#ThemeKey=searchresultui" class="ms-srch-sb-searchImg" id="searchImg" alt="Search" /></a></div></div></div><noscript><div id="ctl00_ctl03_noscript">It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.</div></noscript><div id="ctl00_ctl03"></div><div class="ms-clear"></div></div></div><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SearchWC:SearchBoxScriptWebPart>--><!--CE: End Search Box Snippet-->

Open in new window


Here is that markup pulled from the associated master page:
                                                <!-- ===== STARTER: Search Control ==================================================================================== -->
                                                <div class="ms-dialogHidden">
                                                    <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
                                                        <SearchWC:SearchBoxScriptWebPart UseSiteCollectionSettings="true" EmitStyleReference="false" ShowQuerySuggestions="true" ChromeType="None" UseSharedSettings="true" TryInplaceQuery="false" ServerInitialRender="true" runat="server" __MarkupType="vsattributemarkup" WebPart="true" Height="" Width="" __WebPartId="{F7DBFEDF-D871-41F9-B91F-448BE21E6584}" id="g_f7dbfedf_d871_41f9_b91f_448be21e6584"/>
                                                    </asp:ContentPlaceHolder>
                                                </div>										

Open in new window

0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41830649
Ok so the HTML is decorated with html comments that are syntactically meaningful to SP.

The Master Page is a standard .Net page with .Net controls.

How are the Designer pages usually generated - I am assuming you wouldn't code them by hand?
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41830700
If you want to "brand" the out of the box SharePoint Site, there are simple themes (skins) that you can apply.  If you want more exotic changes like responsive, multiple columns, custom views and other changes to the layout, you probably would start with an existing master page, copy it and it's associated html file and using the Design Manager,  modify the html file until you achieve the desired look and content layout.

Also, you might design custom page layouts for how widgets reside on pages (by type) or build custom delegate controls to replace or supplement the OOTB controls.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41831247
Ok but I meant the mechanics of how it is done. The Design Manager page looks like it is generated by something. You need to upload the page in a particular format that DM understands. In other circumstances how would you create a DM page.

If I look at this page I see the following
With Design Manager, you can create a visual design for your website by using whatever web design tool or HTML editor you prefer, using only HTML and CSS, and then upload that design into SharePoint. Design Manager is the central hub and interface where you manage all aspects of a custom design.
Specifically create a visual design for your website by using whatever web design tool or HTML editor you prefer, using only HTML and CSS
Which is telling me that the upload to DM is just plain old HTML.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41831940
I take an HTML template which is a minimal SharePoint compliant page and edit it in Dreamweaver.  At the same time I open that file in DM editor.  In the DM editor is a snippet tool that allows you to select from a catalogue of snippets SharePoint compliant "widget" definitions.  Once you select the piece of interest,  you copy the generated HTML fragment from a textbox displayed in DM and paste it to a valid section of your Dreamweaver edit session for that HTML page.

After doing so,  you upload the HTML file to its folder and SharePoint generates the associated MasterPage or you receive an error indication that you broke something and you must go back to your Dreamweaver session, review/backout/fix what you've broken.

That's pretty much the dance.
0
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41831982
And you want this to go in reverse - from the MasterPage back to the DM generated HTML?

I think you might need to consider a manual reconstruction - I am not aware of any tools that will do this but based on what you have told me it sounds like it might be a one way function. I did do a minimalist search to see if I could find anything but as you stated in the OP lots about HTML to Master Page - not so much the other way around.

I suggest you delete this post and try again just in case there are experts who will pick it up the second time around - I doubt they will but it can't hurt. I don't think I can contribute anything more at this stage.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41833613
Thanks.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41833708
@hbash, thank you for the points however I don't believe I answered the question. Would you like me to reopen so you can request a delete?
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41833873
No problem.  It's all good.  I appreciate the help.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41833973
Thank you and you are welcome.
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Need advice on an App idea......but who do I ask? 2 69
CSS overflow problem 21 41
return to same tab when data is posted 6 29
Check for Numeric Phone Field 14 47
This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question