Utilisation de Dreamweaver et du Gestionnaire de conception avec SharePoint 2013

Article d’origine publié le samedi 28 juillet 2012

SharePoint 2013 comporte un certain nombre de nouvelles fonctionnalités grâce auxquelles la conception et la publication de sites Web n’ont jamais été aussi simples. L’une de ces fonctionnalités est le Gestionnaire de conception ; il vous permet d’effectuer des opérations, telles que la création de différents canaux pour votre contenu (par exemple, un ensemble de pages pour les navigateurs de grande taille, un pour les périphériques mobiles, un autre pour les tablettes, etc.). Vous pouvez associer des pages maîtres différentes à chaque canal. L’une des fonctionnalités les plus intéressantes est que vous pouvez créer une page dans n’importe outil d’édition HTML standard, comme Dreamweaver, la télécharger sur SharePoint et l’utiliser en tant que page maître. SharePoint prend en charge la création automatique d’une page .aspx et la synchronise avec votre fichier .html. Une fois la conversion effectuée, vous n’êtes pas obligé de retourner à un autre outil pour modifier le fichier ; vous pouvez continuer à modifier le fichier .html dans votre outil d’édition favori et à chaque fois que vous l’enregistrez, SharePoint synchronise le fichier .aspx qui est utilisé pour générer votre page maître. 

Nous offrons également ce qui s’appelle des extraits de code qui permettent de prendre des portions de SharePoint pour les intégrer à votre page maître. Il suffit de sélectionner le type d’extrait de code souhaité (zone de recherche, navigation rapide, etc.), de copier le code de la fonctionnalité généré automatiquement, puis de le coller dans votre page maître. Ceci n’est qu’une présentation superficielle de tout ce que vous devez savoir pour effectuer une conversion complète de votre page .html standard en page maître SharePoint.

Dans ce billet, je vais prendre la page de site Web que vous créez à l’aide du didacticiel Dreamweaver (https://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html) pour la convertir en page maître SharePoint et en page d’accueil pour mon site. Donc, pour commencer, voici à quoi ressemble le site Dreamweaver lorsqu’il est terminé :

En regardant la page, vous pouvez constater un certain nombre d’éléments propres à SharePoint sur lesquels nous allons revenir :

  • Les images utilisées pour l’en-tête, pour l’arrière-plan de l’affichage principal de la page et pour chaque histoire
  • Le contenu de la partie principale de la page et des trois zones d’histoire
  • Les fonctionnalités supplémentaires SharePoint qu’il sera probablement nécessaire d’ajouter, à savoir une zone de recherche et la navigation.

Envisageons, tout d’abord, le contenu. Les types de contenu prêt à l’emploi peuvent s’appliquer au contenu principal, mais une personnalisation est nécessaire pour les trois extraits de code d’histoire situés dans le bas de la page. Commençons donc par créer un type de contenu pour leur prise en charge. Les images étant intrinsèquement liées au contenu, nous devons leur ajouter des colonnes de site en même temps que les colonnes de site destinées au texte. Le type de contenu de la Page d’accueil étant probablement une bonne classe de base pour ce type de page, j’ai créé un type de contenu basé sur la Page d’accueil que j’ai appelé Disposition DW. Pour la prise en charge de ma disposition, j’ai ajouté les colonnes suivantes :

  • LeftStoryImage
  • LeftStoryText
  • CenterStoryImage
  • CenterStoryText
  • RightStoryImage
  • RightStoryText

Toutes les colonnes d’image sont définies en tant que Image avec mise en forme et contraintes pour la publication et toutes les colonnes de texte sont définies en tant que Contenu HTML complet avec mise en forme et contraintes pour la publication.

À ce stade, nous pouvons commencer la première étape à l’aide du Gestionnaire de conception, qui consiste à télécharger notre page et feuille de style HTML Dreamweaver pour les convertir en page maître. 

Maintenant, ouvrez votre navigateur sur l’ordinateur sur lequel Dreamweaver (ou votre outil d’édition HTML préféré) est installé et accédez à votre site SharePoint. Cliquez sur le menu Actions du site et sélectionnez Gestionnaire de conception. Dans la liste des tâches sur la gauche, cliquez sur l’option 3, Télécharger des fichiers de conception. Cliquez sur le lien pour mapper un lecteur local au dossier SharePoint dans lequel vos page maître et feuille de style seront stockées. Cette action ouvre le site SharePoint en mode Explorateur pour vous permettre d’envoyer directement les fichiers de SharePoint vers Dreamweaver à l’aide de la fonction Glisser-déplacer. Si cela ne fonctionne pas pour une raison ou une autre, naviguez jusqu’à la bibliothèque de pages maîtres et ouvrez celle-ci en mode Explorateur.

Ensuite, copiez la page maître index.html de votre lecteur local vers la bibliothèque SharePoint qui est ouverte en mode Explorateur. Le didacticiel Dreamweaver suppose que la feuille de style se trouve dans un sous-dossier appelé Styles. Donc, créez ce dossier et copiez la feuille de style dedans.

Maintenant, dans le navigateur, cliquez sur l’option 4, Modifier les pages maîtres dans la liste des tâches du Gestionnaire de conception. Cliquez sur le lien Convertir un fichier HTML en page maître SharePoint. Une boîte de dialogue relative au style de navigateur des fichiers SharePoint s’ouvre dans laquelle doit figurer le fichier index.html qui a été copié dans la galerie de pages maîtres. Cliquez sur ce fichier pour le sélectionner, puis cliquez sur le bouton Insérer. La conversion s’effectue, puis la page Gestionnaire de conception affiche le fichier dans la liste des pages maîtres avec un message indiquant que la conversion est terminée. À ce stade, si vous actualisez le mode Explorateur de la bibliothèque de pages maîtres, vous devez voir un nouveau fichier appelé index.master. Ce fichier est le pendant du fichier index.html que vous avez téléchargé sur le site. Désormais, SharePoint prendra en charge toutes les mises à jour de ce fichier maître. Tout ce qu’il vous reste à faire, c’est de travailler avec le fichier HTML.

Il est recommandé d’ouvrir votre nouvelle page maître maintenant pour déterminer exactement ce qu’elle contient. Pour ce faire, cliquez sur le lien index.html dans le Gestionnaire de conception. Il ouvre la page maître en mode Aperçu pour vous permettre de visualiser son aspect. Dès le départ, cela semble intéressant ; voici à quoi ressemble le fichier à la fin de la conversion :

 

Nous pouvons constater les points suivants :

  • La feuille de style semble fonctionner ; nous avons obtenu les polices et les mises en forme souhaitées.
  • Les images ne s’affichent pas, nous devrons donc résoudre le problème. Toutefois, certaines des images sont du contenu et d’autres font partie de la page maître proprement dite, de sorte qu’il nous faudra en tenir compte lorsque nous poursuivrons la modification de la page maître.
  • Le texte affiché ne doit pas faire partie de la page maître. Par conséquent, nous devrons le retirer et le réinsérer en tant que contenu dans notre page d’accueil.

Tout d’abord, considérons les problèmes que nous avons à résoudre. Nous devons télécharger l’image utilisée pour l’arrière-plan de la section du corps principal et corriger notre lien qui y mène dans la page maître. Mais, nous devons supprimer toutes les autres images situées dans le bas de la page. Nous devons également supprimer l’ensemble du texte figurant sur la page, car c’est du contenu qui doit être associé à une page unique, et non à la page maître. Pour ce faire, refaites glisser les fichiers HTML et CSS du mode Explorateur de la galerie de pages maîtres de SharePoint pour les déposer dans Dreamweaver. Vous verrez tout d’un coup que votre page HTML s’est remplie de code SharePoint. Vous allez vous y habituer. Même si vous pouvez désormais utiliser votre propre éditeur HTML, devez encore faire appel aux contrôles et balises SharePoint pour donner vie à tout cela.

En défilant dans le fichier HTML, nous trouvons les images manquantes qui devraient faire partie de la page maître. Ce sont les fichiers banner.gif (du fichier HTML) et main.jpg (de la feuille de style qui définit l’arrière-plan de main_image DIV) ; nous allons résoudre ce problème en premier.

De retour dans le navigateur, cliquez sur le menu Actions du site, puis cliquez sur le menu Afficher le contenu du site. Cliquez sur le lien Images de la collection de sites pour ouvrir cette bibliothèque de documents. Maintenant, nous allons télécharger nos deux images sur cette bibliothèque. L’URL de la bibliothèque est /sitecollectionimages, si bien que nous allons modifier le chemin de ces deux images pour le faire pointer vers cette bibliothèque à l’aide de Dreamweaver. Si vous actualisez la page d’aperçu, vous pouvez constater que nous avons bien avancé :

 

Une chose que vous allez probablement noter et qui n’était pas visible dans l’image précédente est l’objet DIV de couleur jaune qui figure dans le bas de la page. En fait, il figurait bien dans la première image, mais la taille du navigateur était trop grande pour que vous puissiez le voir. Maintenant, ce qui est important concernant cet objet div jaune c’est que SharePoint l’a ajouté au cours du processus de conversion et qu’il contient l’espace réservé pour le contenu de la page principale. ainsi, nous allons détruire le contenu qui devrait faire partie d’une page de contenu, et non de la page maître. Nous allons supprimer le texte de la section principale, ainsi que les images qui ne s’affichent pas et le texte situé en dessous des images. Nous allons également déplacer cet objet DIV d’espace réservé (sauf le jaune) vers la section principale de la page. Nous allons enfin ajouter des contrôles d’espace réservé pour les trois zones dans lesquelles figurent des images et du texte. Nous lierons tous ces éléments ensemble lorsque nous créerons notre page de disposition.

Le HTML obtenu comporte des commentaires, des balises de traitement SharePoint spéciales et des espaces réservés pour le contenu. Voici à quoi ressemble chacune des sections :

 

Corps principal :

 

Colonne gauche :

 

Colonne centrale :

Colonne droite :

 

La page paraît désormais un peu vide, mais c’est parfait. C’est ce que nous attendons d’une page maître :

 

Nous avons maintenant presque terminé notre page maître. Nous devons encore ajouter des menus et une zone de recherche, mais nous y reviendrons dans un moment. Nous allons maintenant créer une page de disposition. Une page de disposition est l’emplacement dans lequel nous « associons » les champs de données à leur disposition sur la page. Pour ce faire, nous accédons à Paramètres du site...Pages maîtres et dispositions de page. Je clique sur le bouton Nouveau sur le Ruban et sélectionne Mise en page. Lorsque l’écran Nouvelle mise en page s’affiche, je sélectionne le type de contenu que je souhaite associer à cette mise en page. Si vous vous en souvenez, plus haut dans ce billet j’ai décrit la création d’un type de contenu que j’ai appelé Disposition DW. Ainsi, dans le champ Type de contenu associé, il me suffit de sélectionner mon type de contenu Disposition DW. Je lui attribue une URL, un titre et une description, et voilà ; je peux créer ma page de disposition. Dans notre exercice, j’ai créé l’URL pour la page DWLayoutPage.aspx, le titre est Page de disposition Dreamweaver et j’ai ajouté la description Page de disposition basée sur le site didacticiel de Dreamweaver

Ma page de disposition est maintenant créée, mais elle ne comporte encore aucun contrôle. Je dois ajouter les contrôles à la page et les lier aux champs personnalisés dans le type de contenu que j’ai décrit plus haut : LeftStoryImage, LeftStoryText, etc. Je dois, en outre, ajouter des contrôles d’espace réservé qui correspondent aux conteneurs d’espace réservés que j’ai ajoutés à ma page maître. Ainsi, les données de chaque champ seront associées à un conteneur, et ce conteneur sera placé dans l’espace réservé de conteneur correspondant sur la page maître. C’est ainsi que nos données sont générées dans les emplacements appropriés sur la page maître.

Si vous regardez maintenant la page maître, vous pouvez constater que j’ai ajouté quatre espaces réservés de contenu : PlaceHolderMain, PlaceHolderLeft, PlaceHolderCenter et PlaceHolderRight. Je dois ajouter ces espaces réservés à ma page de disposition, puis placer le champ de type de contenu approprié dans chacun d’eux. Pour ce faire, je dois à nouveau faire glisser ma nouvelle page de disposition, DWLayoutPage.aspx, du mode Explorateur de la Galerie de pages maîtres vers Dreamweaver. Par défaut, la page de disposition possède déjà un contrôle d’espace réservé appelé PlaceHolderMain, je n’ai donc pas besoin de l’ajouter. J’ajoute les autres en utilisant des balises de contrôle ASP.NET standard, comme ceci :

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

</asp:Content>

Comme vous pouvez le constater, j’ai simplement attribué un ID PlaceHolderLeft, puis j’en ai ajouté deux, avec les ID PlaceHolderCenter et PlaceHolderRight.

Notre page de disposition n’a en réalité pas besoin d’un si grand nombre de champs que ça. Il y a le champ de contenu principal qui provient de la classe de base dont notre type de contenu personnalisé à hérité. Ce champ est appelé PublishingPageContent. Étant donné qu’il va figurer dans le corps principal de la page, j’ai ajouté un contrôle de publication pour lui dans la section PlaceHolderMain, si bien que la section ressemble désormais à ceci :

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

                <PublishingWebControls:RichHtmlField id="PageContent" FieldName="PublishingPageContent" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

Chacun des trois autres espaces réservés nécessite deux champs : un champ d’image et un champ de texte enrichi. Je les ajoute donc et j’utilise à nouveau le nom de champ de type de contenu dans l’attribut FieldName de la balise. Voici un exemple de ce à quoi ressemble le contrôle PlaceHolderLeft ; Center et Right sont bien sûr très similaires :

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

    <PublishingWebControls:RichImageField FieldName="LeftStoryImage" runat="server"/>

    <PublishingWebControls:RichHtmlField id="LeftTextContent" FieldName="LeftStoryText" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

À ce stade, nous avons presque terminé la page maître et la page de disposition (mais ni les menus ni la zone de recherche que j’ai mentionnés plus haut). Nous devons donc créer une page et lui indiquer d’utiliser notre nouvelle mise en page.

Pour ce faire, nous accédons à la Bibliothèque de pages. Je clique sur Nouveau sur le Ruban et sélectionne Disposition SW ; celle-ci figure désormais dans le menu car elle est basée sur un type de contenu qui a hérité du type de contenu de la Page d’accueil :

Je renseigne les propriétés requises et voici à quoi cela ressemble :

Nous sommes prêts pour faire un essai ! Pour commencer, je retourne à la galerie de pages maîtres pour publier ma page maître (index.html). Tant que je n’ai pas effectué cette opération, je ne pourrai pas la sélectionner en tant que page maître pour mon site. Ensuite, je retourne dans Paramètres du site, puis dans les paramètres de page maître, et je sélectionne ma page maître en tant qu’élément maître de la Page maître du site. Je ne la définis jamais d’emblée pour la Page maître système pour être certain que tout fonctionne correctement. Si vous ratez votre page maître et que vous l’affectez à la Page maître système, vous aurez d’énormes difficultés à remettre tout en ordre.

Je peux désormais retourner à la bibliothèque de pages et cliquer sur la page dwhome.aspx que je viens de créer. Celle-ci s’affiche dans le navigateur, de sorte que je peux la modifier. Comme vous le voyez, cela commence à prendre une bonne tournure :

L’étape suivante consiste à intégrer les données de mon site Dreamweaver initial. Dans la mesure où tous les champs de texte sont du HTML enrichi, il me suffit de copier le HTML brut à partir de cette page Dreamweaver et de le copier dans le champ correspondant en mode HTML. 

Les images sont un peu plus intéressantes à traiter. La première chose à faire est de les télécharger de mon lecteur local vers le dossier Images dans SharePoint. Ensuite, je peux utiliser une autre nouvelle fonctionnalité de SharePoint 2013, appelée Rendu d’image. Elle vous permet de créer une taille personnalisée dans laquelle générer une image. Dans notre exercice, les images du didacticiel Dreamweaver ont toutes la même taille : 316 pixels de large par 130 pixels de haut. Pour simuler ce comportement, j’accède à Paramètres du site…Rendu d’image (sous la section Aspect). Vous pouvez y voir la liste des rendus prêts à l’emploi que vous pouvez obtenir ; je viens juste de cliquer sur le lien pour ajouter un nouvel élément et de créer un rendu avec les dimensions que j’ai décrites, et que j’ai appelé Image de colonne. Lorsque j’ai ajouté l’image à la page j’étais autorisé à sélectionner le rendu d’image devant être utilisé pour afficher l’image sur la page ; j’ai choisi le rendu Image de colonne et c’est tout ce qu’il fallait faire pour que les éléments soient exactement disposés comme ils l’étaient sur le site Dreamweaver.

Une fois cette opération terminée, voici ce que nous obtenons, et qui ressemble de plus en plus au site Dreamweaver d’origine ; voici une image de l’original suivie de la version SharePoint, en dessous :

Site Dreamweaver :

Site SharePoint :

Il paraît vraiment bien ; la seule différence qui apparaît est la couleur et la police de certaines balises intégrées comme H2 et H3 . Je vais résoudre ce problème en réglant les éléments figurant dans ma feuille de style pour ces zones ; vous avez le choix de les modifier individuellement ou une fois pour toutes les balises H2, H3, etc.

Une fois ces petites modifications CSS effectuées, j’obtiens une page qui ressemble à s’y méprendre à mon site Dreamweaver d’origine. La prochaine étape consiste à enregistrer la page dwhome.aspx et en faire la page d’accueil de mon site. La dernière chose dont j’ai envie, c’est bien d’être obligé d’ajouter à ma page maître les fonctionnalités SharePoint que j’ai mentionnées plus haut, à savoir la navigation supérieure et la zone de recherche.

Pour commencer, je fais à nouveau glisser ma page maître du mode Explorateur vers Dreamweaver. Dans le navigateur, j’accède au menu Actions du site et sélectionne Gestionnaire de conception. Je clique sur l’option 4, Modifier les pages maîtres, puis sur index.html qui est la page maître pour cet exercice. Un aperçu s’affiche de nouveau et je vais cliquer sur le menu Extraits de code dans le coin supérieur droit. Cela me permettra d’utiliser cette nouvelle fonctionnalité géniale qui permet d’effectuer une sélection dans différents éléments de page SharePoint standard, comme la navigation supérieure et verticale, le titre et le logo de site, la zone de recherche, les composants WebPart, etc. Pour rendre les choses un peu plus intéressantes visuellement pour l’exercice, j’ai ajouté au site deux nouvelles pages, appelées Produits et Carrières, et créé des liens de navigation vers elles.

De retour dans ma page maître, je viens d’ajouter des nouveaux éléments DIV dans lesquels je souhaite placer ma navigation et ma zone de recherche. Ensuite, j’ai accédé à la page Extraits de code dans laquelle j’ai copié le code de la navigation supérieure et de la zone de recherche, que j’ai ensuite collé dans l’élément DIV approprié. Désormais, ma page maître ressemble à ceci (j’ai supprimé le code des extraits de code pour des raisons de visibilité ; vous pouvez afficher le votre en faisant un copier-coller de votre page d’extraits de code):

<div id="menu_div" style="width: 335px; position: relative; top: -4px;">

                       

<!-- Emplacement des menus -->                        

<div>

< Emplacement de l’extrait de code du menu supérieur -->

</div>

                                                     

</div>

 

<div id="searchbox_div" style="float: left; width: 245px; position: relative; top: -32px; left: 730px;">

 

<!-- Emplacement de la zone de recherche -->

<div>

                <!-- Emplacement de l'extrait de code de la zone de recherche -->

</div>

                   

</div>

 

Voici le produit fini et complet avec les menus et la zone de recherche SharePoint :

Maintenant que nous avons terminé, permettez-moi de souligner deux points importants. Premièrement, cet exemple est particulièrement peu adapté à une page maître. Pourquoi ? Parce que la disposition fonctionne parfaitement pour une page d’accueil, mais pour la plupart de vos pages de contenu, son utilisation n’est pas suffisamment souple. Malgré cela, l’objectif de cette publication était simplement de prendre un exemple familier de l’univers Dreamweaver pour le faire fonctionner dans un univers SharePoint en utilisant l’outil Dreamweaver et les nouvelles fonctionnalités du Gestionnaire de conception de SharePoint 2013. À cet égard, je pense que l’objectif a été atteint. Dans un monde parfait, nous aurions placé dans la page de disposition un plus grand nombre des éléments qui figurent dans la page maître actuellement. Par exemple, si vous faites de cette page maître la Page maître système, vous ne serez probablement pas satisfait ; voici un exemple de ce à quoi vos pages de formulaires et de paramètres ressemblent dans ce cas (il s’agit de la page Paramètres du site) :

 

Aïe ! Il est pratiquement impossible d’essayer de rétablir la page maître dans l’interface utilisateur à ce stade. Heureusement, vous pouvez exécuter le petit extrait de code PowerShell suivant pour revenir à la page maître prête à l’emploi :

$w = Get-SPWeb https://yourWebApp

$w.MasterUrl = "/_catalogs/masterpage/v15.master"

$w.Update()

Pour développer mon deuxième point, je vais changer radicalement en passant à une autre page maître. Regardons mon exemple de page maître Contoso :

Elle est bien, non ? Sans rien d’exceptionnel, elle comporte toutefois tous les éléments de base d’un site. Maintenant, transformons-la en Page maître système, puis accédons aux paramètres d’une liste ou d’une bibliothèque :

 

Vous ne remarquez rien qui manque ? Le fil d’Ariane qui s’affiche généralement au-dessus de la section List Information, sur lequel vous pouvez cliquer à tout moment pour revenir au contenu de la liste, n’est pas présent. Voici la raison pour laquelle j’ai souligné ce point : si vous accédez à la page Extraits de code, vous n’y trouverez pas le code de fil d’Ariane. La page Extraits de code comporte une grande quantité de code utile, mais elle n’est pas destinée à fournir tous les contrôles de chaque cas de figure. Alors, comment faire ? Eh bien, lorsque vous ne trouvez pas ce dont vous avez besoin dans la page Extraits de code, il vous faut forcer l’ouverture du fichier v15.master pour y rechercher vos extraits de code. Voici à quoi ressemble le code dans le fichier v15.master qui fournit ce fil d’Ariane :

 <SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">

                <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">

                  <SharePoint:SPTitleBreadcrumb

                                                  runat="server"

                                                  RenderCurrentNodeAsLink="true"

                                                                  SiteMapProvider="SPContentMapProvider"

                                                  CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">

                                <PATHSEPARATORTEMPLATE>

                                  <span class="ms-pageTitle-separatorSpan">

                                                <SharePoint:ThemedForegroundImage ThemeKey="spcommon" ImageUrl="/_layouts/15/images/spcommon.png" CssClass="ms-pageTitle-separatorImg" runat="server" />

                                  </span>

                                </PATHSEPARATORTEMPLATE>

                  </SharePoint:SPTitleBreadcrumb>

                </asp:ContentPlaceHolder>

  </SharePoint:AjaxDelta>

Si vous tentez de copier et coller ce code dans votre page maître HTML, cela ne fonctionnera pas ; car ce code contient des balises ASP.NET et nous utilisons une page HTML. SharePoint 2013 fait appel à des balises spéciales qui vous permettent d’inclure vos balises ASP.NET dans un wrapper pour qu’il sache comment mettre à jour la page .master qu’il a créé et qui correspond au pendant de votre page HTML. Pour ce faire, placez la balise ASP.NET dans des balises de commentaires ; faites précéder les balises de début de « MS:» et les balises de fin de « ME: ». Voici à quoi ce même code ressemble lorsqu’il est entouré de ces wrappers, et c’est cela que je vais coller dans ma page maître HTML :

<!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">-->

<!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">-->

<!--MS:<SharePoint:SPTitleBreadcrumb runat="server" WelcomePageUsesWebTitle="false" DefaultParentLevelsDisplayed="3" ParentLevelsDisplayedInFolder="3" RenderCurrentNodeAsLink="true" SiteMapProvider="SPContentMapProvider" CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">-->

                                <PATHSEPARATORTEMPLATE>

                                  <span class="ms-pageTitle-separatorSpan">

                                    <!--MS:<SharePoint:ThemedForegroundImage ThemeKey="spcommon" ImageUrl="/_layouts/15/images/spcommon.png" CssClass="ms-pageTitle-separatorImg" runat="server" />-->

                                  </span>

                                </PATHSEPARATORTEMPLATE>

<!--ME:</SharePoint:SPTitleBreadcrumb>-->

<!--ME:</asp:ContentPlaceHolder>-->

<!--ME:</SharePoint:AjaxDelta>-->

Maintenant que j’ai collé ceci dans la page maître, nous pouvons voir comment le file d’Ariane est réintégré dans la page de paramètres de liste :

 

C’est ainsi que je vais conclure ce long billet. Vous avez pu voir comment les nouvelles fonctionnalités du Gestionnaire de conception de SharePoint 2013 vous permettent d’utiliser votre éditeur HTML préféré pour effectuer toutes vos tâches de gestion de contenu quotidiennes. Nous avons réussi à recréer le site didacticiel de Dreamweaver dans SharePoint 2013 à l’aide de Dreamweaver, ce qui représente un grand pas en avant en comparaison des précédentes versions de SharePoint. Je vous ai également montré comment utiliser des fonctionnalités comme la Galerie d’extraits de code pour ajouter des fonctions SharePoint à vos pages maîtres, et également comment faire lorsque vous avez besoin d’une fonction que vous ne trouvez pas dans les Extraits de code. En outre, la même méthodologie pour utiliser votre éditeur HTML préféré peut servir pour une autre fonctionnalité importante de SharePoint 2013, appelée les modèles d’affichage. Ceux-ci sont utilisés généralement avec les résultats de la recherche, mais la fonction de recherche est si bien intégrée à cette version de SharePoint que vous leurs trouverez un grand nombre d’autres utilisations. Pour obtenir une explication détaillée de la création de solution à l’aide des règles de requêtes et des types de résultats, consultez ce site de blog.

 

Dans la pièce-jointe de ce billet, vous trouverez la version Word correctement mise en forme de cette publication, ainsi que les éléments source que j’ai utilisés pour créer la version SharePoint définitive du site didacticiel de Dreamweaver.

Ce billet de blog a été traduit de l’anglais. La version originale est disponible à la page Using Dreamweaver and Design Manager with SharePoint 2013