SharePoint 2013 : ​​Personnalisation de l'identité visuelle de vos sites​​

Utiliser les extraits de code

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Indiquez à SharePoint la localisation de certains emplacements réservés. Il s'agit notamment de la navigation globale et de la zone de recherche de votre page HTML.
05:35

Transcription

Dans cet exercice, vous allez indiquer à SharePoint la localisation de certains emplacements réservés comme le logo du site, la navigation globale, et la zone de recherche de votre page html. Par exemple ici vous avez une zone de recherche. Alors pour cela, vous allez utiliser ce qu’on appelle les « extraits de code de la page maître ». Alors il y a d’autre emplacement réservé comme par exemple titre, ici, du site. Vous avez le filtrage de sécurité, les composants WebPart, etc. Donc pour l’instant vous ouvrez donc votre site racine. Vous allez dans les paramètres du site. Et là vous cliquez sur Gestionnaire de conception. Vous allez directement sur Modifier page maître. Et là vous cliquez sur La conversion réussie, ou sur Fleurs, ça revient au même, comme vous voulez. Et là vous avez effectivement l’affichage de votre page maître. Dans le bandeau noir, vous avez plusieurs possibilités qui sont proposées. Nous, ce qui nous intéresse là, ce sont les extraits de code. Donc vous cliquez sur Extraits de code. Donc là il y a un onglet qui apparait. C’est l’onglet Galerie d’extraits de code. Il s’ouvre et en fait son fonctionnement est très simple. Vous avez le ruban de conception qui se trouve ici. Et vous avez à chaque fois un aperçu, plus la possibilité de faire des personnalisations plus ou moins importantes, plus ou moins détaillées. Oui, il y a pas mal de paramètres. Donc si par exemple vous cliquez sur Navigation supérieure, Navigation verticale, on voit ici l’aperçu qui évolue : Titre du site, Logo du site, etc., etc. Donc à chaque fois évidemment la page se met à jour en fonction de ce que vous recherchez. Alors justement, nous ici, ce qui nous intéresse, c’est la zone de recherche. Donc on clique sur Zone de recherche. Donc là on voit la petite zone de recherche, et vous avez directement maintenant sous la section Extrait de code HTML, le code qui correspond à la section de recherche. Si vous aviez fait des personnalisations ici, eh bien vous auriez un code qui aurait été modifié. Donc vous pouvez ici copier dans le presse-papier le code. Autoriser l’accès. Donc on peut vérifier tout de suite qu'on a bien copié, parce que c’est vrai qu’on a toujours un petit doute : est-ce que ça a bien été copié ? On va vérifier, Contrôle-V, voilà on vérifie qu’effectivement on a bien le code qui est identique, ce n’est pas la peine de l’enregistrer, à celui-ci. Donc il n’y a pas de souci. Donc maintenant vous allez ouvrir le fichier fleurs.html du mappage. Donc là vous êtes dans le mappage, ok, fleurs.html, toujours. Vous l’éditez avec un outil comme Notepad++ par exemple. Et là vous allez chercher dans le code, eh bien la classe que je vais vous indiquer, donc la classegenerale4. Alors encore une fois, il faut bien comprendre que cette classe correspond dans mon code html justement à la zone de recherche. Donc ce n’est pas une valeur absolue. C’est simplement lié à mon code qui est dans ma page html. Donc là si vous double-cliquez sur classegenerale4, vous voyez effectivement que vous avez, c’est assez court mais c’est : le contenu se trouve entre 112... Voilà, donc c’est 112 à 115 inclus. Donc ça vous pouvez l’enlever. Vous gardez bien la balise, par contre. Donc vous ne supprimez les lignes qu’entre les balises. Et vous collez tout simplement le contenu du presse-papier. Donc vous collez, et du coup ça permet de cette façon-là d’avoir le code qui correspond à la zone de recherche. Vous enregistrez. On va vérifier bien évidemment. Vous revenez sur le site SharePoint. Donc là ici vous allez directement dans l’onglet Aperçu. Donc là faites attention à ce qui va se passer ici. Vous faites simplement un rafraichissement, et hop, vous voyez en fait la superposition de la zone de recherche au sens SharePoint avec la zone de recherche graphique. Après, libre à vous si vous le souhaitez de faire coïncider parfaitement ces deux zones, ou bien autre solution : c’est d’enlever la partie graphique pour ne laisser que la partie purement SharePoint. Donc pour l’instant on va procéder de même pour modifier la navigation globale. Là ici en réalité ce n’est pas une navigation globale. Donc vous retournez sur Galerie d’extraits de code, et là dans le ruban conception, vous cliquez sur Navigation supérieure. Donc si vous descendez, vous voyez apparaitre une fois de plus le code qui apparait bien là. Donc là aussi vous copiez tout simplement dans le presse-papier. Ok, bon on a vu que c’est fonctionnel, on ne va pas le refaire. Vous retournez dans l’édition du fichier fleurs.html, et là en fait il suffit d’aller dans classenavigation1 qui est juste en dessous, qui contient, bah justement, fleurs, plantes, ça correspond visuellement à cet affichage-là. Donc là, ça se termine ligne 138. Donc vous ne prenez là aussi que le contenu, donc 137 jusqu’à 120, vous supprimez. Et vous allez tout simplement coller, eh bien l’extrait de code que vous avez pris pour la navigation supérieure. Vous sauvegardez effectivement le fichier. Vous revenez sur Aperçu. Vous actualisez et là vous retrouvez bien effectivement la navigation avec le bouton MODIFIER LES LIENS. Là vous commencez vraiment à rentrer dans un cadre de fonctionnement qui est typique de SharePoint.

SharePoint 2013 : ​​Personnalisation de l'identité visuelle de vos sites​​

Devenez autonome dans la personnalisation et la modification de l’aspect de sites SharePoint. Créez des sites basés sur différents modèles, apprenez à les alimenter, etc.

2h02 (29 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
IT
Gestion des documents
Spécial abonnés
Date de parution :10 nov. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !