Galerie
Profitipps zur Webtechnik
Profitipps zur Webtechnik
Tipps 1: Die Masterpage
Der Einsatz einer Masterpage (Vorlagenseite) vereinheitlicht das Layout aller folgenden Webseiten. Die auf allen Seiten identischen Platzhalter (ContentPlaceHolder) der Masterpage beschreiben Sie mit eigenem Inhalt.
Eine Masterseite fungiert als Vorlagencontainer und führt Inhaltsseiten mit einer ASP.NET-Webanwendung zusammen. Wenn Sie eine Masterseite mit Inhaltsseiten verwenden, fügen Sie nur der Masterseite die erforderlichen XHTML-Dokumenttags (wie html, head und body) hinzu. Die Inhaltsseiten enthalten dann keine weiteren HTML-Tags. Ein ContentPlaceHolder-Steuerelement definiert einen relativen Inhaltsbereich in einer Masterseite und gibt sämtlichen Text, das gesamte Markup und alle Serversteuerelemente aus einem verknüpften Content-Steuerelement in einer Inhaltsseite wieder. Eine Masterseite kann mehrere ContentPlaceHolder enthalten.
Sie verschaffen sich eine Masterpage, indem Sie den Menübefehl Website aktivieren und auf den Befehl Neues Element hinzufügen klicken. Wählen Sie die Vorlage Mastersite aus. Für die Inhalte, die Sie wie Formatierungen selbst gestalten, benötigen Sie das Steuerelement ContentPlaceHolder. Dieses Element, das Sie über die Webseiten mit Inhalt füllen, kann in der Masterpage leer bleiben.
<asp:ContentPlaceHolder ID="ContentPlaceHolder2"
runat="server">
</asp:ContentPlaceHolder>
Tipp 2: Titel, Beschreibung und Metatags
Da die Masterpage Grundlage aller Websites wird, gehören alle wichtigen Informationen auf die Masterpage. Auf den Folgeseiten hinterlegen Sie in Ermangelung der HTML-Tags keine Informationen mehr.
Die wichtigsten Tags für diese Informationen schreiben Sie wie <title>Name Ihres Webauftritts</title> in den Kopfbereich. Um Schwierigkeiten mit den Umlauten zu vermeiden, geben Sie gleich mit <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/> das passende Schema vor. Beschreibungen wie Schlüsselwörter ergeben bessere Treffer in Suchmaschinen:
<meta name="Description" content="Hier steht die Be-
schreibung des Webauftrittes"/>
<meta name="Keywords" content="Schlüsselwörter sollten
auch auf den Seiten Ihres Webauftrittes stehen;"/>
Bei Bedarf fügen Sie weitere Informationen hinzu, welche Ihnen auch in der Datei MasterPage.Master vorliegen:
<meta name="Author" content="Peter Schnoor"/>
<meta name="Copyright" content="PCMagazin"/>
<meta name="Content-language" content="de"/>
Serverfehler: Diese Meldungen werden Ihnen beim Ausführen der Webseite sofort angezeigt.
Tipp 3: Ausrichten mit Tabellen
Damit die Inhalte Ihres Webauftritts immer an der gleichen Stelle erscheinen und die gleiche Struktur aufweisen, legen Sie die Inhalte in einer Tabelle an.
Die Ausrichtung Ihrer Webinhalte richtet sich nach mehreren Kriterien, die Sie schon auf der Masterpage festlegen. Benutzen Sie auch in ASP dazu die gängigen HTML-Befehle.
<table class="style1">
<tr>
<td>
</td>
</tr>
</table>
Zeitansage: Die aktuelle Uhrzeit des Servers wird ermittelt und auf dem Client ausgegeben.
Tipp 4: Startseite
Die Seiten in einem ASP.net-Auftritt haben die Endung .aspx. Standardmäßig arbeiten Sie mit CodeBehind.
Der Ausdruck CodeBehind deutet auf folgenden Sachverhalt hin: Sobald Sie eine Webseite programmieren, wird eine zusätzliche Datei mit der Endung aspx.vb angelegt. Die Startseite bekommt den Namen Default.aspx. Eine aspx-Seite beginnt immer mit einer Page-Direktive. Dieser geben Sie Informationen mit, die für die gesamte Seite gelten. Auch der Bezug auf die Masterpage sowie auf Codebehind-Dateien wird bekanntgegeben:
<%@ Page Title="Willkommen" Language="VB" Master
PageFile="~/PM.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
Durch den Bezug auf die Masterseite brauchen Sie hier keine HTML-Befehle mehr wie <head> und <body>. Sollten Sie versuchen, solche Tags einzugeben, weist dies eine Fehlermeldung zurück. Sie versehen Seiten sehr schnell mit aktivem Inhalt. Fügen Sie zum Beispiel die aktuelle Uhrzeit ein: Sie holen dazu die Daten vom Server. VB-Code und HTML-Markup müssen Sie nicht wild mischen, sondern gekonnt voneinander trennen.
Trotzdem gelingt es recht einfach, vom VB-Code aus das Aussehen der Webseite zu verändern. Der Kniff besteht darin, für jedes HTML-Element, das Sie verwenden, zwei Abweichungen vorzunehmen: Sie hängen das Attribut runat="server" an und vergeben eine eindeutige ID. Wenn der Browser dann die ASP.NET-Seite aufruft, ist die ID weiterhin da, aber das runat="server" ist verschwunden, weil der Browser damit nichts anfangen kann. Aber dafür greift dann das Visual Basic auf das Element zu, und zwar über die ID.
<script runat="server">
Sub Page_Load()
Ueberschrift.InnerHtml = "Hallo Uhrzeit"
Uhrzeit.InnerHtml = DateTime.Now.ToLongTimeString()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Uhrzeit</title>
</head>
<body>
<h1 runat="server" id="Ueberschrift"></h1>
<form id="form1" runat="server">
<div>
Die aktuelle Uhrzeit auf dem Server ist:
<span runat="server"
id="Uhrzeit">00:00:00</span>.
</div>
</form>
</body>
</html>
Editoroptimierung: Durch diese Einstellungen erleichtern Sie sich die Bearbeitung.
Tipp 5: Editor gut eingestellt
Sie entwickeln Webseiten für das ASP.net mit dem kostenlosen Web Developer 2010 Express von Microsoft. Mit dem passend eingestellten Texteditor bearbeiten Sie die Seiten.
Da die Download-Seiten zum kostenlosen Web Developer sich häufig ändern, bringt Ihnen eine Suchmaschine in jedem Fall eine aktuell gültige Adresse. Der Download enthält dann auch den Texteditior. Sie gelangen zu dessen Einstellungen, indem Sie den Befehl Optionen aus dem Menübefehl Extras auswählen.
Wählen Sie hier den Eintrag Texteditor und dann Alle Sprachen. Setzen Sie Häkchen in die Kontrollkästchen Zeilenumbruch in dem Bereich Einstellungen und Zeilennummern in dem Bereich Anzeigen. Dadurch werden Ihre Programme übersichtlicher dargestellt. Ein weiterer Vorteil: Sie können Fehler schneller finden.
Kinderleicht: Mit dem Menüelement-Editor strukturieren Sie selbst ein komplexes Menü.
Tipp 6: Menü hinzufügen
Um auf Ihren Websites zu navigieren, sollten Sie ein Menü hinzufügen. Der Toolbox des Web Developers entnehmen Sie das passende Steuerelement.
Das Steuerelement für das Menü erfordert wenig Programmieraufwand. Denn im Hintergrund wird der benötigte Code automatisch geschrieben, darum brauchen Sie sich also nicht zu kümmern. Gehen Sie folgendermaßen vor: Wählen Sie in der Toolbox den Bereich Navigation aus. Ziehen Sie das Steuerelement Menü auf die Entwurfsansicht Ihrer Webseite. Klicken Sie im Steuerelement auf die Auswahl Menü-Aufgaben, um den Menüelement-Editor einzublenden. Klicken Sie hier auf das Symbol Hinzufügen.
Legen Sie den Namen für den Menüeintrag mit der Eigenschaft Text fest. Aktivieren Sie dann die Eigenschaft NavigateURL. Hier können Sie einen Seitennamen Ihres Webauftritts auswählen oder selbst eine Adresse eingeben. Legen Sie bei Bedarf die Formatierung fest. So verschaffen Sie sich problemlos weitere Menüpunkte, sogar mit Untermenüpunkten. Nach der Fertigstellung Ihres Menüs legen Sie über das Eigenschaftsfenster noch weitere Formatierungen fest, indem Sie beispielsweise das Menüband horizontal ausrichten (Eigenschaft Orientation). Alle benötigten Befehle werden automatisch erzeugt und in Ihre Webseite geschrieben.
