Gute Vorlage

Corporate Design mit Masterpages

19.1.2012 von Peter Schnoor

Der erste Eindruck ist oft der entscheidende. Auch bei Ihrem Webauftritt sollten Sie darauf achten. Mit Corporate-Design-Vorlagen in Asp.net schaffen Sie ein einheitliches und überzeugendes Erscheinungsbild aller Seiten Ihres Auftritts.

ca. 1:55 Min
Ratgeber
VG Wort Pixel
  1. Corporate Design mit Masterpages
  2. Layer
  3. Menüelement einfügen
Corporate Design mit Masterpages
Corporate Design mit Masterpages
© Hersteller/Archiv

Alle erfolgreichen Webauftritte legen Wert auf einen einheitlichen Eindruck aller Seiten. Dieses so genannte Corporate Design (kurz CD genannt) zeigt dem Besucher sofort und intuitiv, wo er sich befindet, und es hat einen hohen Wiedererkennungswert. CD setzt sich aus mehreren Elementen zusammen. Zunächst sollten Sie eine einheitliche Schriftart (Corporate Typography) einsetzen, wobei die Auswahl fürs Web recht eingeschränkt ist.

Meist findet sich die Verdana. Reichhaltige Auswahl haben Sie hingegen bei der Farbgebung (Corporate Color). Nicht zu vergessen sind aussagekräftige Bilder und Symbole, zum Beispiel für die Navigation (Corporate Picture). Hierzu gehört auch ein Firmen-Logo auf jeder Seite.

Damit alle Seiten automatisch das gleiche Aussehen bekommen, bietet sich der Einsatz von Masterpages an. Durch diese Vorlagenseiten mit Platzhaltern (ContentPlaceHolder) für die eigentlichen Inhalte haben Entwickler die Möglichkeit, das vorgegebene Layout ohne großen Aufwand auf den Detailseiten immer wieder zu reproduzieren.

Das Programm Microsoft Expression Web bietet optimale Möglichkeiten hierzu. Aber auch das kostenlos erhältliche Microsoft Visual Web Developer Express ist, besonders aus Programmierersicht, sehr gut dazu geeignet.

Am Beispiel von Expression Web erstellen wir nun eine Masterpage. Erzeugen Sie zunächst eine neue leere Website mit Datei/Neu/Website. Im dann eingeblendeten Dialogfenster aktivieren Sie das Registerblatt Website und die Kategorie Allgemein. Anschließend klicken Sie auf den Eintrag Leere Website. Definieren Sie bei Bedarf noch die Adresse der neuen Website, und mit einem Klick auf OK erstellt das Tool eine neue Site noch ohne Inhalte.

software, tools, Microsoft Expression Web
Der Beginn der Masterpage im Urzustand als Quellcode in Microsofts Expression Web.
© Hersteller/Archiv

Die erste Masterpage

Sie sollten die Masterpage gleich zum Beginn anlegen und später alle weiteren Seiten direkt mit dieser verknüpfen. Änderungen im Design führen Sie später nur noch auf der Masterpage durch, sie werden dann automatisch auf alle weiteren Seiten übertragen.

Klicken Sie zum Erstellen der Masterpage noch einmal auf Datei, ziehen den Cursor auf Neu und wählen dann den Befehl Seite aus. Im jetzt eingeblendeten Dialogfenster aktivieren Sie die Kategorie ASP.NET und klicken Sie dann auf den Eintrag Masterseite. Mit einem Klick auf die Schaltfläche OK wird die Masterpage erstellt.

Die Auswahl von Asp.net hat den Vorteil, dass alle Skripte auf dem Server ausgeführt und als Ergebnis im Client als XHMTL-Seite dargestellt werden. Dafür sorgt im Programm der Tag runat=server. Mit Hilfe des Steuerelements ContentPlaceHolder wird Platz für spätere Einträge geschaffen. Die Masterpage muss alle Elemente des Corporate Designs erhalten, die dann an die eigentlichen Webseiten vererbt werden.

Zum Corporate Design gehört selbstverständlich ein aussagefähiger Titel der Website. Tippen Sie deshalb nach dem Tag <title> einen Titel für Ihren Webauftritt ein, in unserem Beispiel Meine Designsite. Speichern Sie die Masterpage aus Sicherheitsgründen gleich einaml. In unserem Beispiel erhält sie den Namen MasterCD.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

So kündigen Sie Ihre ADAC-Mitgliedschaft online per E-Mail.

Automobilclub

ADAC-Mitgliedschaft kündigen: So einfach geht's online…

Wer seine ADAC-Mitgliedschaft kündigen möchte, bekommt hier aktuelle Tipps. Wir zeigen Ihnen, wie das online per Formular oder E-Mail möglich ist.

Netflix

Kosten, Apps, Kündigung und Co.

10 wichtige Fragen zu Netflix in Deutschland

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.

whatsapp alternativen

Für Android, iPhone, iPad & Co.

Whatsapp Alternativen: Die 10 besten Messenger-Apps

Es gibt keine Whatsapp-Alternative? Quatsch! Diese Messenger-Apps für Android, iOS und PC sind der perfekte Ersatz.

Spam-Mails

Sicherheit

Phishing-Mails erkennen: 6 Tipps gegen E-Mail Betrug

Betrüger versenden E-Mails, die es auf Ihre Daten und Ihr Geld abgesehen haben. Wie Sie Phishing-E-Mails erkennen und sich schützen.

Facebook-Betrug mit Fake-Profilen

Gefälschte Facebook-Konten

Facebook-Betrug mit Fake-Profilen - wie Sie sich und Ihre…

Betrüger nutzen gefälschte Facebook-Profile, um Geld zu ergaunern. Wir zeigen, wie Sie sich und auch Ihre Facebook-Kontakte gegen die Betrugsmasche…