Design Manager in SharePoint 2013: Einfachere Layouts und Masterseiten
In allen früheren Versionen war das Erstellen von Masterseiten und Layouts für einen Designer angesichts der technischen Aspekte definitiv nicht einfach. Die Designer müssten verstehen, was und welche Komponenten auf der Masterseite obligatorisch sind und wie sie rendern, um ihre Designs lebendig werden zu lassen.
In SharePoint 2013 gibt es ein neues Feature namens Design Manager, mit dem die Designaspekte von den technischen Anforderungen zum Erstellen einer Masterseite getrennt werden können. Der Designer muss nicht wissen, welche Komponenten auf einer Masterseite erforderlich sind. Der Designmanager hilft bei der Erstellung der Masterseite aus einfachen HTML- und CSS-Dateien. Der Designer muss sich jetzt nur noch um sein Design kümmern und dieses in HTML, CSS und Bilder umwandeln. Sobald diese Artefakte fertig sind, kann der Designmanager diese verarbeiten, um eine Musterseite zu generieren.
Der Prozess zum Erstellen einer Masterseite ist wirklich einfach:
1. Erstellen Sie das gewünschte Layout mit dem HTML-Editor Ihrer Wahl.
2. Erstellen Sie die CSS-Datei, die Ihr Design unterstützt.
3. Fügen Sie die Bilder hinzu, die Teil Ihres Designs sind.
4. Laden Sie alle Dateien in die Masterseitengalerie hoch. (Es gibt eine sehr bequeme Möglichkeit, dies zu tun und Änderungen vorzunehmen, während Sie Ihren HTML-Code entwickeln und optimieren).
a. Öffnen Sie Ihre Masterseitengalerie im Windows Explorer.
Geb. Kopieren Sie den Ordner HTML, CSS und Bilder in die Masterseitengalerie.
5. Wenn Sie die HTML-Datei hochladen, weisen Sie die HTML-Masterseite als Inhaltstyp zu. (fakultativ)
6. Allen anderen Dateien kann der Inhaltstyp Designdateien zugewiesen werden. (fakultativ)
7. Gehen Sie zur Seite Site-Einstellungen.
8. Klicken Sie auf Design Manager unter der Kategorie „Look & Feel“.
9. Sie können auch auf die Schaltfläche Neue Websiteaktionen rechts klicken und auf Design Manager klicken.
10. Wechseln Sie zu den Import-Masterseiten.
11. Klicken Sie auf den Link „HTML-Datei in SharePoint-Masterseite konvertieren“.
a. Dadurch wird ein Dialogfeld geöffnet, in dem Sie eine HTML-Datei aus der Masterseitengalerie auswählen können.
b. Wählen Sie die HTML-Datei aus, die Sie gerade hochgeladen haben.
12. Sobald Sie eine Datei auswählen, generiert SharePoint eine Masterseite für dieses Design. Wenn während des Konvertierungsprozesses Fehler auftreten, werden Sie benachrichtigt.
13. Zu diesem Zeitpunkt wurde die Masterseite generiert.
14. Um die Masterseite anzupassen, klicken Sie auf den Link „Konvertierung erfolgreich“.
ein. Dadurch gelangen Sie zu einer Vorschauseite. Wie Sie dem Screenshot unten entnehmen können, hat SharePoint die Masterseite konvertiert und erstellt.
Hinzufügen von SharePoint-Komponenten zur Masterseite mit Snippets Manager:
1. Bevor wir die Masterseite anpassen, öffnen Sie im Windows Explorer-Fenster, in dem Sie die Masterseitengalerie geöffnet haben, die HTML-Datei, die Sie im Editor Ihrer Wahl hochgeladen haben.
2. Um die SharePoint-Komponenten wie die obere Navigation und andere Steuerelemente, Webparts, hinzuzufügen, klicken Sie auf den Snippets-Link in der oberen rechten Ecke der Vorschauseite.
3. Dadurch wird die Snippets-Galerie-Seite geöffnet.
4. Angenommen, Sie möchten die obere Navigation zu Ihrer Masterseite hinzufügen.
a. Klicken Sie im Menüband auf die obere Navigationsschaltfläche.
b. Dadurch wird das HTML-Snippet erstellt, das Sie benötigen.
c. Kopieren Sie das Snippet in die Zwischenablage.
gest. (Sie können die Eigenschaften des oberen Navigationssteuerelements anpassen und auf „Aktualisieren“ klicken, um das neue Snippet zu generieren.
5. Wechseln Sie in Schritt 1 zu der HTML-Datei, die Sie in einem Editor geöffnet haben.
6. Fügen Sie das HTML-Snippet an der Stelle ein, an der die obere Navigation in Ihrem Design angezeigt werden soll.
7. Speichern Sie die HTML-Datei.
8. Aktualisieren Sie die Vorschauseite in Ihrem Browser und Sie werden sehen, dass die Masterseite erneut generiert wurde und Ihre Änderungen sichtbar sind.
9. Auf diese Weise können Sie Ihre Masterseite schnell erstellen und bearbeiten.
10. Um die Masterseite zu veröffentlichen, wählen Sie die HTML-Datei in der Masterseitengalerie aus und veröffentlichen Sie sie. Dadurch wird auch die Masterseitendatei automatisch veröffentlicht, und Sie können die Masterseite für die Site festlegen.
Screenshot: Die generierte Masterseite mit der oberen Navigation.
Tipps:
1. Die HTML-Datei und die Masterseite sind miteinander verknüpft.
2. SharePoint lässt Sie die Masterseite nicht löschen, solange die Zuordnung noch vorhanden ist.
3. Um die Zuordnung zu entfernen, wechseln Sie zur Masterseitengalerie.
ein. Wählen Sie die HTML-Datei
b. Eigenschaften bearbeiten
c. Deaktivieren Sie das Kontrollkästchen „Zugehörige Datei“.
d. Speichern
4. Jetzt können Sie direkt an der Masterseite arbeiten, indem Sie sie bearbeiten.
5. Während die HTML- und die Masterdateien verknüpft sind, können Sie die Masterseitendatei nicht direkt veröffentlichen. Sie müssen die HTML-Datei auswählen und veröffentlichen. Dadurch wird die Masterseite veröffentlicht und Sie können die Masterseite für die Site festlegen.
6. Vorschlag: Nachdem Sie die Masterseite zu Ihrer Zufriedenheit erstellt haben, trennen Sie die HTML-Datei, verpacken Sie die Masterseite in einem WSP und stellen Sie sie dann in Ihren Test- und Produktionsumgebungen bereit.
Über den Autor
Mehr von diesem Autor