Créer des styles d'éditeur HTML

Important :  Cet article a été traduit automatiquement, voir l’avertissement. Vous pouvez consulter la version en anglais de cet article ici.

Avec un site de publication Microsoft Office SharePoint Server 2007, les propriétaires de contenu peuvent créer et mettre à jour des pages Web du site simplement à l'aide d'un navigateur Web. Par exemple, un chef de service peut utiliser un navigateur pour poster des annonces et d'autres informations, comme celles illustrées dans l'image suivante, directement sur son site Web.

Page de publication dans le navigateur

Le développeur ou le créateur d'un site Web peut aider les créateurs de contenus à améliorer au niveau visuel les pages qu'ils créent en définissant des styles applicables à des parties des pages créées à partir des mises en page. La création de styles personnalisés contribue également à uniformiser l'apparence de ces pages. Cet article indique comment un développeur Web ou un concepteur Web peut utiliser Microsoft Office SharePoint Designer 2007 pour créer des styles personnalisés applicables aux pages de publication créées ou modifiées dans le navigateur.

Important : Cet article s'applique uniquement aux sites hébergés par un serveur exécutant Office SharePoint Server 2007. En outre, la publication doit être activée dans le site de niveau supérieur de la collection de sites. Enfin, vous devez disposer des autorisations d'auteur pour ce site de niveau supérieur afin d'ouvrir et de modifier les mises en page.

Contenu de cet article

Comment l’éditeur HTML est utilisée dans un site de publication ?

Créer des styles pour l’éditeur HTML

Comment l'éditeur HTML est-il utilisé dans un site de publication ?

La création de styles personnalisés pour des pages de publication nécessite une compréhension de certains concepts clés de Office SharePoint Server 2007. Une révision rapide est exposée ci-dessous.

Quelle est la relation entre les pages de publication et les mises en page ?

Les mises en page sont des modèles de page qui gèrent l'apparence d'une page, les champs de page et de contenu disponibles et les éléments exacts (tels que les listes et les bibliothèques) qui doivent figurer sur la page. Vous pouvez par exemple définir la disposition d'une page pour des rapports de voyage, une autre disposition pour les articles de bulletins d'information, ainsi qu'une troisième disposition pour les mises à jour de plans. Les utilisateurs autorisés peuvent ensuite créer de nouvelles pages de publication reposant sur ces mises en page. Chaque page qu'ils créent respecte un format uniforme pour le type de contenu spécifique qu'elle contiendra. Les utilisateurs peuvent créer des pages de publication dans leur navigateur, où ils ont la possibilité de choisir une mise en page pour chaque page créée.

Boîte de dialogue répertoriant les mises en page de publication

Mises en page peuvent être modifiées dans Office SharePoint Designer 2007. Pour plus d’informations, voir l’article Personnaliser une mise en page de publication.

D'où les mises en page tirent-t-elle leur mise en forme ?

Les mises en page tirent leur mise en forme des pages maîtres. Ces pages maîtres sont des modèles de page définissant des zones de contenu partagé (telles que les en-têtes, les pieds de page et le volet de navigation à gauche), qui utilisent des feuilles de style pour gérer la mise en forme du texte, des liens hypertexte, des cellules, des tableaux et de nombreux autres éléments. Les mises en page peuvent également tirer leur mise en forme de feuilles de style qui leur sont directement appliquées. Par exemple, une mise en page peut obtenir ses règles initiales de mise en forme à partir d'une page maître, mais vous pouvez toujours lier des feuilles de style supplémentaires à la mise en page pour définir plus précisément la mise en forme des pages créées avec elle. Ainsi, la page maître sur laquelle repose une mise en page peut spécifier que tout le texte normal est en police Verdana, mais vous pouvez lier à la mise en page une feuille de style qui spécifie que toutes les pages liées utilisent Arial comme police de texte normal. L'ensemble de la mise en forme et des marques d'une page de publication, à l'exception des champs de contenu, est directement issu de la mise en page à partir de laquelle est créée la page.

Comment le contenu est-il modifié dans les pages de publication ?

Créer une page de publication dans le navigateur. Après la création de la page, vous pouvez la modifier en y accédant et en cliquant successivement sur le menu Actions du site et sur Modifier la page.

Menu Actions du site affichant la commande Modifier la page

Une fois la page ouverte, vous pouvez cliquer sur Modifier le contenu pour ouvrir l'éditeur HTML et modifier les champs de texte enrichi.

Commande Modifier le contenu sur une page ouverte

Remarque : Les champs ne contenant pas de texte enrichi possèdent leurs propres éditeurs ; par exemple un champ de date a son propre éditeur.

L'éditeur HTML s'ouvre, vous permettant d'ajouter ou de modifier du contenu, de changer manuellement la police et la mise en forme et de choisir parmi de nombreuses autres options. Pour appliquer un style au texte, sélectionnez le texte, cliquez sur Styles, puis cliquez sur le style que vous souhaitez appliquer.

Éditeur HTML affichant la liste Styles

D'où l'éditeur HTML tire-t-il ses styles ?

Les styles disponibles dans l'éditeur HTML proviennent de deux feuilles de style placées dans le répertoire _layouts de votre site ou sous-site :

  • HtmlEditorCustomStyles.css définit la mise en forme des styles personnalisés et se trouve à l'adresse suivante :

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.CSS

  • HtmlEditorTableFormats.css définit la mise en forme des tableaux et se trouve à l'adresse suivante :

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.CSS

Comme ces feuilles de style sont situées dans le répertoire protégé _layouts de votre site, vous ne pouvez pas les modifier dans Office SharePoint Designer 2007. Toutefois, vous pouvez remplacer les styles de ces feuilles de style en appliquant des styles supplémentaires à la mise en page utilisée pour créer les pages de publication.

Haut de la Page

Créer des styles pour l'éditeur HTML

Vous pouvez créer de nouveaux styles pour l'éditeur HTML en ouvrant le site dans Office SharePoint Designer 2007 et en effectuant les procédures suivantes.

Rechercher et ouvrir la mise en page

Si vous avez déjà créé une mise en page et souhaitez maintenant créer de nouveaux styles pour les utiliser dans l'éditeur HTML du navigateur, vous commencez par rechercher et ouvrir la mise en page. Vous pouvez ouvrir la mise en page en double-cliquant sur la mise en page proprement dite ou sur n'importe quelle page de publication créée à partir de cette mise en page.

  1. Dans Office SharePoint Designer 2007, ouvrez le site contenant la mise en page à modifier.

  2. Dans la Liste des dossiers, recherchez une page reposant sur la mise en page à laquelle vous souhaitez appliquer un nouveau style, puis double-cliquez sur la page.

    Remarque : Les pages de publication sont stockées dans la bibliothèque de documents Pages du site. Un moyen rapide de trouver et d'ouvrir la mise en page liée à une page de publication consiste à double-cliquer sur cette dernière. Si vous connaissez déjà le nom de la mise en page pour laquelle vous souhaitez créer un nouveau style, vous pouvez double-cliquer sur la mise en page au lieu de la page.

    Liste des dossiers avec un message relatif à la modification de la page ou de la mise en page sous-jacente

    Comme les pages de publication peuvent être modifiées uniquement dans le navigateur, un message vous demande si vous souhaitez modifier la page dans le navigateur ou modifier la mise en page sous-jacente.

  3. Cliquez sur Modifier la mise en page.

    La mise en page s'ouvre.

Remplacer un style existant

Pour remplacer un style existant, vous pouvez le copier à partir de la feuille de style HtmlEditorCustomStyles.css ou HtmlEditorTableFormats.css dans une autre feuille de style utilisée par la page, puis modifier le style. Comme les feuilles de style du répertoire _layouts de style sont appliquées en premier, les styles des autres feuilles de style utilisées par la mise en page remplacent les styles d'HtmlEditorCustomStyles.css ou HtmlEditorTableFormats.css.

  1. Dans votre navigateur Web, accédez à l'emplacement de la feuille de style à partir de laquelle copier un ou plusieurs styles en tapant l'un des emplacements suivants dans la barre d'Adresse du navigateur :

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.CSS

    -ou-

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.CSS

  2. Lorsque vous recevez un message vous demandant ce que vous souhaitez faire du fichier, cliquez sur Ouvrir.

    La feuille de style s'ouvre dans Office SharePoint Designer 2007.

  3. Sélectionnez le style à modifier, cliquez dessus avec le bouton droit, puis cliquez sur Copier dans le menu contextuel.

    Feuille de style avec le menu contextuel ouvert et la commande Copier sélectionnée

  4. Toujours dans Office SharePoint Designer 2007, ouvrez ou revenez à la mise en page pour laquelle remplacer le style, puis cliquez sur Options dans le volet Office Gérer les styles.

    Remarque : Si le volet Office Gérer les styles est affiché, cliquez sur Gérer les styles dans le menu Volets Office.

  5. Vérifiez que l'option Afficher les styles utilisés dans la page active est sélectionnée.

    Menu Options avec l'option Afficher les styles utilisés dans la page active sélectionnée

  6. Dans le volet Office Gérer les styles, double-cliquez sur une des feuilles de style utilisées dans cette page, telle que pageLayout.css, pour l'ouvrir et la modifier.

    Chaque feuille de style appliquée à la page active s'affiche sous forme de titre de section dans la liste Styles CSS du volet Office Gérer les styles. Vous pouvez double-cliquer sur le titre de n'importe quelle feuille de style pour la modifier.

  7. Faites défiler jusqu'en bas de la feuille de style, cliquez avec le bouton droit sur l'endroit où coller le style, puis cliquez sur Coller dans le menu contextuel.

  8. Modifiez le style comme il convient.

    Remarque : Le volet Office Propriétés CSS offre une approche plus visuelle de la modification du style. Si ce volet Office n'est pas affiché, cliquez sur Propriétés CSS dans le menu Volets Office.

  9. Pour enregistrer la feuille de style, dans le menu Fichier, cliquez sur Enregistrer.

À la prochaine utilisation de l'éditeur HTML pour modifier un article créé à partir de cette mise en page, le style modifié est utilisable et disponible dans la liste Styles.

Liste Styles contenant le style modifié

Créer un style

Vous pouvez également créer un nouveau style et le mettre à disposition dans la liste Styles de l'éditeur HTML. Comme il est plus facile de partir d'un style existant que de taper un nouveau style, cette section indique comment y parvenir en copiant un style existant, puis en lui donnant un nouveau nom.

  1. Dans votre navigateur Web, accédez à l'emplacement de la feuille de style à partir de laquelle copier un ou plusieurs styles en tapant l'un des emplacements suivants dans la barre d'Adresse du navigateur :

    http://your_site/_layouts/1033/styles/HtmlEditorCustomStyles.CSS

    -ou-

    http://your_site/_layouts/1033/styles/HtmlEditorTableFormats.CSS

  2. Lorsque vous recevez un message vous demandant ce que vous souhaitez faire du fichier, cliquez sur Ouvrir. La feuille de style s'ouvre dans Office SharePoint Designer 2007.

  3. Sélectionnez le style à modifier, cliquez dessus avec le bouton droit, puis cliquez sur Copier dans le menu contextuel.

    Feuille de style avec le menu contextuel ouvert et la commande Copier sélectionnée

  4. Toujours dans Office SharePoint Designer 2007, ouvrez ou revenez à la mise en page à laquelle ajouter le nouveau style, puis cliquez sur Options dans le volet Office Gérer les styles.

    Remarque : Si le volet Office Gérer les styles n'est pas visible, cliquez sur Volets Office, puis sur Gérer les styles.

  5. Vérifiez que l'option Afficher les styles utilisés dans la page active est sélectionnée.

    Menu Options avec l'option Afficher les styles utilisés dans la page active sélectionnée

  6. Dans le volet Office Gérer les styles, double-cliquez sur une des feuilles de style utilisées dans cette page, telle que pageLayout.css, pour l'ouvrir et la modifier.

    Chaque feuille de style appliquée à la page active s'affiche sous forme de titre de section dans la liste Styles CSS du volet Office Gérer les styles. Vous pouvez double-cliquer sur le titre de n'importe quelle feuille de style pour la modifier.

  7. Faites défiler jusqu'en bas de la feuille de style, cliquez avec le bouton droit sur l'endroit où coller le style, puis cliquez sur Coller dans le menu contextuel.

  8. Modifiez le style comme il convient.

    Vous devez modifier le nom du style si vous ne voulez pas remplacer le style existant que vous avez copié. Par exemple, si vous souhaitez nommer votre nouveau style redHeadline, modifiez le code CSS suivant.

.ms-rteCustom-ArticleTitle, .ArticleTitle{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

Remplacez-le par le code suivant.

.ms-rteCustom-redHeadline, .redHeadline{font-weight: bold;font-family: Arial;font-size: 14pt;color: #8C0000;text-transform: capitalize;}

Remarque : Le volet Office Propriétés CSS offre une approche plus visuelle de la modification du style. Si ce volet Office n'est pas affiché, cliquez sur Propriétés CSS dans le menu Volets Office.

  1. Pour enregistrer la feuille de style, dans le menu Fichier, cliquez sur Enregistrer.

    À la prochaine utilisation de l'éditeur HTML pour modifier un article créé à partir de cette mise en page, le style modifié est utilisable et disponible dans la liste Styles.

    Liste Styles contenant le style modifié

Haut de la Page

Remarque : Avertissement traduction automatique : cet article a été traduit par un ordinateur, sans intervention humaine. Microsoft propose cette traduction automatique pour offrir aux personnes ne maîtrisant pas l’anglais l’accès au contenu relatif aux produits, services et technologies Microsoft. Comme cet article a été traduit automatiquement, il risque de contenir des erreurs de grammaire, de syntaxe ou de terminologie.

Développez vos compétences
Découvrez des formations
Accédez aux nouvelles fonctionnalités en avant-première
Rejoignez le programme Office Insider

Ces informations vous ont-elles été utiles ?

Nous vous remercions pour vos commentaires.

Merci pour vos commentaires. Il serait vraisemblablement utile pour vous de contacter l’un de nos agents du support Office.

×