Cet article couvre les points 3 et 4 de cet article présentant le Design Manager, à savoir les étapes nécessaires à la création d’une masterpage.
Il fait partie d’une série concernant le Design Manager de SharePoint 2013 :
Construisez une page HTML, comme bon vous semble, avec l’outil que vous voulez.
Que vous construisez cette page vous-même, que vous la récupériez d’une agence ou de la voisine n’a aucune importance, ce qu’il vous faut au final c’est un dossier avec :
Ici, j’ai choisi un modèle "Prêt-à-l’emploi":
Une fois sur la page d’accueil du DM, cliquez sur "Upload Design Files" pour télécharger l’ensemble de votre dossier dans la bibliothèque de masterpage de votre collection de site.
C’est ici qu’on passe aux choses sérieuses : SharePoint va convertir votre page HTML en masterpage.
Cliquez sur le lien "Convert …" :
Si vous observez le screenshot ci-dessus, la masterpage est "brute" : il va falloir maintenant insérer les contrôles SharePoint (menus, titre du site, webparts, …).
Le tout en gardant en tête que le div suivant ("ContentPlaceHolderMain" présent en byle:solid;" />
A noter qu’il y a foule de contrôles utilisables, difficile de ne pas trouver son bonheur.
S’affichent alors :
Pour faire simple, utilisez un éditeur et modifiez directement la page HTML en webdav.
D’ailleurs dans la page HTML initiale, SharePoint ajoute le commentaire suivant :
"
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 [....] 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.
"
Et ainsi de suite avec tous vos contrôles, en conservant le div jaune en point central :
La page "Site settings" devient ici (avec juste un contrôle "Top Navigation" et "Site Title") :