Erstellen von HTML-Editor-Formatvorlagen

Mit einer Microsoft Office SharePoint Server 2007-Veröffentlichungssite können Inhaltsbesitzer Webseiten in der Website nur mithilfe eines Webbrowsers erstellen und aktualisieren. Ein Abteilungsleiter kann beispielsweise mithilfe eines Browsers Ankündigungen und andere Informationen, wie in der folgenden Abbildung dargestellt, direkt auf seiner Website veröffentlichen.

SharePoint-Seite mit veröffentlichten Informationen

Durch das Erstellen von Formatvorlagen, die auf Teile von Seiten angewendet werden können, die wiederum auf Grundlage von Seitenlayouts erstellt wurden, kann der Entwickler oder Designer einer Website den Inhaltsersteller dabei unterstützen, attraktivere Seiten zu erstellen. Das Erstellen von benutzerdefinierten Formatvorlagen trägt außerdem dazu bei, das Erscheinungsbild solcher Seiten zu vereinheitlichen. In diesem Artikel wird beschreiben, wie Webentwickler und -designer mit Microsoft Office SharePoint Designer 2007 benutzerdefinierte Formatvorlagen erstellen können, die im Browser erstellt oder bearbeitet werden.

Wichtig : Dieser Artikel bezieht sich ausschließlich auf Websites, die sich auf einem Server befinden, auf dem Office SharePoint Server 2007 ausgeführt wird. Darüber hinaus muss die Veröffentlichung in der Website der oberste Ebene in der Websitesammlung aktiviert sein. Außerdem sind Autorberechtigungen für die Website der höchsten Ebene erforderlich, um Seitenlayouts öffnen und bearbeiten zu können.

Inhalt dieses Artikels

Wie wird der HTML-Editor in einer Veröffentlichungssite verwendet?

Erstellen von Formatvorlagen für den HTML-Editor

Wie wird der HTML-Editor in einer Veröffentlichungssite verwendet?

Für das Erstellen von benutzerdefinierten Formatvorlagen müssen Sie mit einigen grundlegenden Konzepten in Office SharePoint Server 2007 vertraut sein. Im Folgenden finden Sie eine kurze Übersicht.

Wie hängen Veröffentlichungsseiten mit Seitenlayouts zusammen?

Bei Seitenlayouts handelt es sich um Seitenvorlagen, mit denen gesteuert wird, wie eine Seite aussieht, welche Seiten- und Inhaltsfelder verfügbar sind und welche Elemente (z. B. Listen und Bibliotheken) auf der Seite angezeigt werden sollen. Sie können beispielsweise ein Seitenlayout für Reiseberichte einrichten, ein weiteres für Newsletterartikel und ein drittes Seitenlayout für geplante Aktualisierungen. Autorisierte Benutzer können dann neue Veröffentlichungsseiten erstellen, die auf diesen Seitenlayouts basieren. Jede erstellte Seite weist das Format für den jeweiligen Inhaltstyp auf. Die Benutzer können dann Veröffentlichungsseiten in ihren Browsern erstellen. Dabei haben sie die Möglichkeit, jedes Mal beim Erstellen einer Seite ein Seitenlayout auszuwählen.

Dialogfeld mit Liste der Layouts für Veröffentlichungsseiten

Seitenlayouts können in Office SharePoint Designer 2007 bearbeitet werden. Weitere Informationen finden Sie im Artikel Anpassen eines Seitenlayouts für die Veröffentlichung.

Woher stammen die Formatierungen für die Seitenlayouts?

Die Formatierungen von Seitenlayouts stammen von Masterseiten, d. h. aus Seitenvorlagen, die Bereiche mit freigegebenen Inhalten definieren (z. B. Kopf- und Fußzeilen und der linke Navigationsbereich) und mithilfe von Stylesheets die Formatierung von Text, Hyperlinks, Zellen, Tabellen und vielen anderen Elementen steuern. Die Formatierung von Seitenlayouts kann auch auf Grundlage von Stylesheets erfolgen, die direkt angewendet werden. Für ein Seitenlayout können beispielsweise die anfänglichen Formatierungsregeln aus einer Masterseite übernommen werden, Sie können jedoch jederzeit weitere Stylesheets mit dem Seitenlayout verknüpfen, um die Formatierung der auf Grundlage des Layouts erstellten Seiten genauer zu definieren. Für die Masterseite, die als Grundlage für ein Seitenlayout verwendet wird, könnte beispielsweise angegeben werden, dass normaler Text in der Schriftart Verdana formatiert wird. Sie können dem Seitenlayout dann ein Stylesheet hinzufügen, in dem angegeben wird, dass auf allen verknüpften Seiten Arial als Schriftart für normalen Text verwendet wird. Alle Formatierungen und Markups auf einer Veröffentlichungsseite – mit Ausnahme von Inhaltsfeldern – stammen direkt aus dem Seitenlayout, auf dessen Grundlage sie erstellt wurde.

Wie werden Inhalte auf Veröffentlichungsseiten bearbeitet?

Wenn Sie eine Veröffentlichungsseite erstellen, verwenden Sie hierzu den Browser. Nach dem Erstellen der Seite können Sie sie bearbeiten, indem Sie zu ihr navigieren, auf das Menü Websiteaktionen und anschließend auf Seite bearbeiten klicken.

Menü 'Websiteaktionen' mit Befehl 'Seite bearbeiten'

Nach dem Öffnen der Seite können Sie auf Inhalt bearbeiten klicken und so den HTML-Editor zum Bearbeiten von Rich-Text-Feldern öffnen.

Befehl 'Inhalt bearbeiten' für geöffnete Seite

Hinweis : Felder ohne Text im Rich-Text-Format werden in einem eigenen Editor bearbeitet – für Datumsfelder gibt es beispielsweise einen eigenen Editor.

Der HTML-Editor wird geöffnet, und Sie können Inhalte hinzufügen oder bearbeiten, manuell Schriftarten und Formatierungen ändern oder aus einer Reihe von anderen Optionen auswählen. Wenn Sie eine Formatvorlage auf Text anwenden möchten, markieren Sie den entsprechenden Text, klicken Sie auf Formatvorlagen, und klicken Sie dann auf die anzuwendende Formatvorlage.

Dialogfeld 'Webseite' im HTML-Editor mit Standardeinstellungen

Woher stammen die Formatvorlagen im HTML-Editor?

Die im HTML-Editor verfügbaren Formatvorlagen stammen aus zwei Stylesheets im Verzeichnis _layouts der Website oder Unterwebsite:

  • In HtmlEditorCustomStyles.css wird die Formatierung für benutzerdefinierte Formatvorlagen definiert. Die Datei befindet sich an folgendem Speicherort:

    http://Ihre_Website/_layouts/1033/styles/HtmlEditorCustomStyles.css

  • In HtmlEditorTableFormats.css wird die Formatierung für Tabellen definiert. Die Datei befindet sich an folgendem Speicherort:

    http://Ihre_Website/_layouts/1033/styles/HtmlEditorTableFormats.css

Da sich diese Stylesheets im geschützten Verzeichnis _layouts der Website befinden, können sie nicht in Office SharePoint Designer 2007 geändert werden. Sie können die Formatvorlagen in diesen Stylesheets jedoch überschreiben, indem Sie dem Seitenlayout, mit dem Sie Veröffentlichungsseiten erstellen, zusätzliche Formatvorlagen hinzufügen.

Seitenanfang

Erstellen von Formatvorlagen für den HTML-Editor

Sie können für den HTML-Editor neue Formatvorlagen erstellen, indem Sie die Website in Office SharePoint Designer 2007 öffnen und dann wie folgt vorgehen.

Suchen und Öffnen des Seitenlayouts

Wenn Sie bereits ein Seitenlayout erstellt haben und nun neue Formatvorlagen erstellen möchten, damit diese für die Verwendung im HTML-Editor im Browser verfügbar sind, suchen Sie zunächst das Seitenlayout, und öffnen Sie es. Sie können das Seitenlayout öffnen, indem Sie auf das Seitenlayout oder auf eine Veröffentlichungsseite doppelklicken, die auf Grundlage dieses Seitenlayouts erstellt wurde.

  1. Öffnen Sie in Office SharePoint Designer 2007 die Website mit dem Seitenlayout, das Sie ändern möchten.

  2. Suchen Sie in der Ordnerliste eine Seite, für die das Seitenlayout verwendet wird, auf das Sie eine neue Formatvorlage anwenden möchten. Doppelklicken Sie dann auf diese Seite.

    Hinweis : Veröffentlichungsseiten werden in der Website in der Dokumentbibliothek Seiten gespeichert. Das Doppelklicken auf eine Veröffentlichungsseite ist eine schnelle Möglichkeit, um das Seitenlayout zu ermitteln und öffnen, mit dem die Veröffentlichungsseite verknüpft ist. Wenn Sie den Namen des Seitenlayouts, für das Sie eine neue Formatvorlage erstellen möchten, bereits kennen, können Sie auch auf das Seitenlayout und nicht auf die Seite klicken.

    Ordnerliste mit Meldung zum Bearbeiten einer Seite oder des zugrunde liegenden Seitenlayouts

    Da Veröffentlichungsseiten nur im Browser bearbeitet werden können, werden Sie in einer Meldung gefragt, ob Sie die Seite im Browser bearbeiten oder das zugrunde liegende Seitenlayout bearbeiten möchten.

  3. Klicken Sie auf Seitenlayout bearbeiten.

    Das Seitenlayout wird geöffnet.

Überschreiben einer vorhandenen Formatvorlage

Wenn Sie eine vorhandene Formatvorlage überschreiben möchten, können Sie die vorhandene Formatvorlage aus HtmlEditorCustomStyles.css oder HtmlEditorTableFormats.css in ein anderes Stylesheet kopieren, das von der Seite verwendet wird, und dann die Formatvorlage bearbeiten. Da die Stylesheets im Verzeichnis _layouts zuerst angewendet werden, überschreiben die Formatvorlagen in allen anderen Stylesheets, die von dem Seitenlayout verwendet werden, die Formatvorlagen aus HtmlEditorCustomStyles.css oder HtmlEditorTableFormats.css.

  1. Wechseln Sie im Webbrowser zum Speicherort des Stylesheets, aus dem Sie eine oder mehrere Formatvorlagen kopieren möchten, indem Sie in der Adressleiste des Browsers einen der folgenden Speicherorte eingeben:

    http://Ihre_Website/_layouts/1033/styles/HtmlEditorCustomStyles.css

    – oder –

    http://Ihre_Website/_layouts/1033/styles/HtmlEditorTableFormats.css

  2. Wenn Sie in einer Meldung gefragt werden, welche Aktion Sie für die Datei ausführen möchten, klicken Sie auf Öffnen.

    Das Stylesheet wird in Office SharePoint Designer 2007 geöffnet.

  3. Wählen Sie die Formatvorlage aus, die Sie ändern möchten, klicken Sie mit der rechten Maustaste darauf, und klicken Sie dann im Kontextmenü auf Kopieren.

    Stylesheet mit Kontextmenü und Befehl 'Kopieren'

  4. Öffnen Sie in Office SharePoint Designer 2007 das Seitenlayout, für das die Formatvorlage überschrieben werden soll, bzw. wechseln Sie dorthin zurück, und klicken Sie dann im Aufgabenbereich Formatvorlagen verwalten auf Optionen.

    Hinweis : Wenn der Aufgabenbereich Formatvorlagen verwalten nicht angezeigt wird, klicken Sie im Menü Aufgabenbereiche auf Formatvorlagen verwalten.

  5. Stellen Sie sicher, dass In der aktuellen Seite verwendete Formatvorlagen anzeigen ausgewählt ist.

    Menü 'Optionen' mit ausgewähltem Befehl 'In der aktuellen Seite verwendete Formatvorlagen anzeigen'

  6. Doppelklicken Sie im Aufgabenbereich Formatvorlagen verwalten auf eines der in dieser Seite verwendeten Stylesheets, z. B. pageLayout.css, um es zum Bearbeiten zu öffnen.

    Alle auf die aktuelle Seite angewendeten Formatvorlagen werden als Abschnittsüberschrift in der Liste CSS-Stylesheets im Aufgabenbereich Formatvorlagen verwalten angezeigt. Sie können auf die Überschrift für ein Stylesheet doppelklicken, um es zu bearbeiten.

  7. Führen Sie im Stylesheet einen Bildlauf nach unten aus, klicken Sie mit der rechten Maustaste an die Stelle, an der die Formatvorlage eingefügt werden soll, und klicken Sie dann im Kontextmenü auf Einfügen.

  8. Bearbeiten Sie die Formatvorlage wie gewünscht.

    Hinweis : Der Aufgabenbereich CSS-Eigenschaften bietet eine visuelle Darstellung der Bearbeitung der Formatvorlage. Wenn dieser Aufgabenbereich nicht angezeigt wird, klicken Sie im Menü Aufgabenbereiche auf CSS-Eigenschaften.

  9. Klicken Sie zum Speichern des Stylesheets im Menü Datei auf Speichern.

Wenn Sie das nächste Mal im HTML-Editor einen auf Grundlage dieses Seitenlayouts erstellten Artikel bearbeiten, ist die geänderte Formatvorlage verfügbar und wird in der Liste Formatvorlagen angezeigt.

Liste 'Formatvorlagen' mit geänderter Formatvorlage

Erstellen einer neuen Formatvorlage

Sie können auch eine neue Formatvorlage erstellen und diese in der Liste Formatvorlagen im HTML-Editor verfügbar machen. Da das Arbeiten mit einer vorhandenen Formatvorlage einfacher ist als das Erstellen einer neuen Formatvorlage, wird in diesem Abschnitt beschrieben, wie Sie eine vorhandene Formatvorlage kopieren und dann umbenennen.

  1. Wechseln Sie im Webbrowser zum Speicherort des Stylesheets, aus dem Sie Formatvorlagen kopieren möchten. Geben Sie dazu in der Adressleiste des Browsers einen der folgenden Speicherorte ein:

    http://Ihre_Website/_layouts/1033/styles/HtmlEditorCustomStyles.css

    – oder –

    http://Ihre_Website/_layouts/1033/styles/HtmlEditorTableFormats.css

  2. Wenn Sie in einer Meldung gefragt werden, welche Aktion Sie für die Datei ausführen möchten, klicken Sie auf Öffnen. Das Stylesheet wird in Office SharePoint Designer 2007 geöffnet.

  3. Wählen Sie die Formatvorlage aus, die Sie ändern möchten, klicken Sie mit der rechten Maustaste darauf, und klicken Sie dann im Kontextmenü auf Kopieren.

    Stylesheet mit Kontextmenü und Befehl 'Kopieren'

  4. Öffnen Sie in Office SharePoint Designer 2007 das Seitenlayout, dem Sie die neue Formatvorlage hinzufügen möchten, bzw. wechseln Sie dorthin zurück, und klicken Sie dann im Aufgabenbereich Formatvorlagen verwalten auf Optionen.

    Hinweis : Wenn der Aufgabenbereich Formatvorlagen verwalten nicht angezeigt wird, klicken Sie auf Aufgabenbereiche und dann auf Formatvorlagen verwalten.

  5. Stellen Sie sicher, dass In der aktuellen Seite verwendete Formatvorlagen anzeigen ausgewählt ist.

    Menü 'Optionen' mit ausgewähltem Befehl 'In der aktuellen Seite verwendete Formatvorlagen anzeigen'

  6. Doppelklicken Sie im Aufgabenbereich Formatvorlagen verwalten auf eines der in dieser Seite verwendeten Stylesheets, z. B. pageLayout.css, um es zum Bearbeiten zu öffnen.

    Alle auf die aktuelle Seite angewendeten Formatvorlagen werden als Abschnittsüberschrift in der Liste Css.styles im Aufgabenbereich Formatvorlagen verwalten angezeigt. Sie können auf die Überschrift für ein Stylesheet doppelklicken, um es zu bearbeiten.

  7. Führen Sie im Stylesheet einen Bildlauf nach unten aus, klicken Sie mit der rechten Maustaste an die Stelle, an der die Formatvorlage eingefügt werden soll, und klicken Sie dann im Kontextmenü auf Einfügen.

  8. Bearbeiten Sie die Formatvorlage wie gewünscht.

    Sie müssen den Namen der Formatvorlage ändern, wenn Sie die vorhandene Formatvorlage, die Sie kopiert haben, nicht überschreiben möchten. Wenn der Name der neuen Formatvorlage beispielsweise redHeadline lauten soll, ändern Sie den folgenden CSS-Code:

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

Der neue Code sollte wie folgt lauten:

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

Hinweis : Im Aufgabenbereich CSS-Eigenschaften wird eine visuelle Darstellung für die Bearbeitung der Formatvorlage ermöglicht. Wenn dieser Aufgabenbereich nicht angezeigt wird, klicken Sie im Menü Aufgabenbereiche auf CSS-Eigenschaften.

  1. Klicken Sie zum Speichern des Stylesheets im Menü Datei auf Speichern.

    Wenn Sie das nächste Mal im HTML-Editor einen auf Grundlage dieses Seitenlayouts erstellten Artikel bearbeiten, ist die geänderte Formatvorlage verfügbar und wird in der Liste Formatvorlagen angezeigt.

    Liste 'Formatvorlagen' mit geänderter Formatvorlage

Seitenanfang

Teilen Facebook Facebook Twitter Twitter E-Mail E-Mail

War diese Information hilfreich?

Sehr gut. Noch anderes Feedback?

Was können wir verbessern?

Vielen Dank für Ihr Feedback!

×