Gestionnaire de conception dans SharePoint 2013: Mises en page et Pages Maîtresses Plus faciles

Dans toutes les versions précédentes, la création de pages maîtresses et de mises en page n’était certainement pas facile pour un concepteur compte tenu des aspects techniques de l’informatique. Les concepteurs devraient comprendre SharePoint et quels composants sont obligatoires sur la page maître et comment ils s’affichent pour donner vie à leurs conceptions.

Dans SharePoint 2013, il existe une nouvelle fonctionnalité appelée Design Manager qui aidera à séparer les aspects de conception des exigences techniques pour créer une page maître. Le concepteur n’a pas besoin de savoir quels composants sont nécessaires sur une page maître. Le gestionnaire de conception aide à créer la page maître à partir de simples fichiers HTML et CSS. Le concepteur n’a plus qu’à se soucier de son design et à le convertir en HTML, CSS et Images. Une fois ces artefacts prêts, le gestionnaire de conception peut les traiter pour générer une page maître.

Le processus de création d’une page maître est très simple :

1. Créez la mise en page que vous souhaitez à l’aide de l’éditeur HTML de votre choix.

2. Créez le fichier CSS qui prend en charge votre conception.

3. Ajoutez les images qui font partie de votre conception.

image

4. Téléchargez tous les fichiers dans la galerie de la page maître. (Il existe un moyen très pratique de le faire et de faire des modifications tout en développant et en peaufinant votre code HTML).

a. Ouvrez votre galerie de pages maîtres dans l’explorateur Windows.

d. Copiez le dossier html, CSS et Images dans la galerie de la page maître.

5. Lorsque vous téléchargez le fichier HTML, attribuez la page maître HTML comme type de contenu. (facultatif)

6. Tous les autres fichiers peuvent recevoir le type de contenu des fichiers de conception. (facultatif)

7. Accédez à la page Paramètres du site.

8. Cliquez sur Design Manager dans la catégorie « Look & Feel ».

9. Ou vous pouvez cliquer sur le bouton Actions du nouveau site à droite et cliquer sur Gestionnaire de conception.

image

image

10. Accédez aux pages maîtres d’importation.

11. Cliquez sur le lien « Convertir un fichier HTML en page maître SharePoint ».

a. Cela ouvrira une boîte de dialogue pour vous permettre de sélectionner un fichier html dans la galerie de la page maître.

b. Sélectionnez le fichier html que vous venez de télécharger.

12. Une fois que vous avez sélectionné un fichier, SharePoint générera une page maître pour cette conception. Si des erreurs sont rencontrées pendant le processus de conversion, il vous en informera.

13. À ce stade, la page maître a été générée.

14. Pour personnaliser la page maître, cliquez sur le lien « Conversion réussie ».

a. Cela vous mènera à une page d’aperçu. Comme vous pouvez le voir sur la capture d’écran ci-dessous, SharePoint a converti et créé la page maître.

image

Ajout de composants SharePoint à la page maître à l’aide du gestionnaire d’extraits :

1. Avant de personnaliser la page maître, dans la fenêtre de l’explorateur Windows où vous avez ouvert la galerie de pages maîtres, ouvrez le fichier Html que vous avez téléchargé dans l’éditeur de votre choix.

2. Pour ajouter les composants SharePoint tels que la navigation supérieure et d’autres contrôles, les composants web, cliquez sur le lien Extraits dans le coin supérieur droit de la page d’aperçu.

image

3. Cela ouvrira la page de la galerie d’extraits.

4. Supposons que vous souhaitiez ajouter la navigation supérieure à votre page maître.

a. Cliquez sur le bouton de navigation supérieur dans le ruban.

b. Cela créera l’extrait de code HTML dont vous avez besoin.

c. Copiez l’extrait de code dans le presse-papiers.

d. (Vous pouvez personnaliser les propriétés du contrôle de navigation supérieur et cliquer sur « Mettre à jour » pour générer le nouvel extrait.

5. Passez au fichier html que vous avez ouvert dans un éditeur à l’étape 1.

6. Collez l’extrait de code HTML à l’endroit où vous souhaitez que la navigation supérieure apparaisse dans votre conception.

7. Enregistrez le fichier html.

8. Actualisez la page d’aperçu dans votre navigateur et vous verrez que la page maître a été générée à nouveau et que vos modifications sont visibles.

9. De cette façon, vous pouvez rapidement créer et travailler sur votre page maître.

10. Pour publier la page maître, sélectionnez le fichier html dans la galerie de la page maître et publiez-le. Cela publiera également automatiquement le fichier de page maître et vous pourrez définir la page maître pour le site.

Capture d’écran: La page principale générée avec la navigation en haut.

image

Conseils:

1. Le fichier html et la page maître sont associés l’un à l’autre.

2. SharePoint ne vous permettra pas de supprimer la page maître tant que l’association est toujours là.

3. Pour supprimer l’association, accédez à la galerie de la page maître.

a. Sélectionnez le fichier Html

b. Modifier les propriétés

c. Décochez la case « Fichier associé ».

d. Sauvegarder

4. Vous pouvez maintenant travailler directement sur la page principale en la modifiant.

5. De plus, alors que les fichiers html et les fichiers maîtres sont associés, vous ne pouvez pas publier directement le fichier de page maître. Vous devez sélectionner le fichier html et le publier. Cela publiera la page maître et vous pourrez définir la page maître pour le site.

6. Suggestion: Une fois que vous avez créé la page maître à votre satisfaction, dissociez le fichier HTML, emballez la page maître dans un wsp, puis déployez-la dans vos environnements de test et de production.

À propos de l’auteur

Plus de cet auteur

Leave a Reply

Votre adresse e-mail ne sera pas publiée.