Exemplarische Vorgehensweise: Arbeiten mit einer vorhandenen CSS-Datei

Artikel
11/15/2012

In dieser exemplarischen Vorgehensweise werden die CSS-Funktionen (Cascading Stylesheet) von Visual Studio vorgestellt. Hier erfahren Sie, wie Sie ein zweispaltiges Seitenlayout erstellen und ändern. Darüber hinaus werden die grundlegenden Techniken zum Erstellen einer Webseite und eines neuen Stylesheets veranschaulicht.

Hinweis

Die Beispiele in diesem Thema sind für ASP.NET-Web Forms-Seiten spezifisch.Sie können die Ansicht Quelle zum Bearbeiten von Seiten in ASP.NET MVC (Model View Controller)- oder ASP.NET Web Pages-Anwendungen (.cshtml-Dateien) verwenden, die Ansicht Entwurf wird jedoch nur für Web Forms-Seiten vollständig unterstützt.

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

Erstellen einer Dateisystem-Website
Verwenden von CSS-orientierten Funktionen von Visual Studio.
Erstellen eines zweispaltigen Seitenlayouts mit CSS.

Hinweis

In dieser exemplarischen Vorgehensweise werden zusätzliche Funktionen von Visual Studio dargestellt, die in Exemplarische Vorgehensweise: Erstellen und Ändern einer CSS-Datei nicht behandelt wurden.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

Visual Studio oder Visual Studio Express for Web muss auf dem Computer installiert sein.

Hinweis

Wenn Sie Visual Studio verwenden, wird in der exemplarischen Vorgehensweise angenommen, dass Sie beim ersten Start von Visual Studio die Einstellungsauflistung Webentwicklung ausgewählt haben.Weitere Informationen finden Sie unter Gewusst wie: Auswählen von Umgebungseinstellungen für die Webentwicklung.
Allgemeine Kenntnisse über das Arbeiten in Visual Studio.

Eine Einführung zum Erstellen von Webseiten in Visual Studio finden Sie unter Exemplarische Vorgehensweise: Erstellen einer einfachen Web Forms-Seite in Visual Studio.
Ein Bild, das Sie der Website hinzufügen können. Welches Bild Sie verwenden, spielt keine Rolle, Sie benötigen es lediglich, um sich Positionierungsfunktionen vor Augen zu führen.

Erstellen einer Website

In diesem Teil der exemplarischen Vorgehensweise erstellen Sie eine Website und fügen dieser eine Seite hinzu.

Wenn Sie bereits eine Website in Visual Studio erstellt haben (z. B. mit den Schritten in Exemplarische Vorgehensweise: Erstellen einer einfachen Web Forms-Seite in Visual Studio), können Sie diese Website verwenden und mit „Hinzufügen von HTML-Elementen und einer CSS-Datei“ unten in dieser exemplarischen Vorgehensweise fortfahren. Erstellen Sie andernfalls eine neue Website, indem Sie folgende Schritte ausführen.

Hinweis

Die Standardprojektvorlage für ASP.NET-Websites und ASP.NET-Webanwendungen enthält die Datei "Site.css".Diese Datei enthält CSS-Regeln, die das Aussehen der Gestaltungsvorlage ("Site.master") und der Inhaltsseiten ("Default.aspx" und "About.aspx") definieren.In dieser exemplarischen Vorgehensweise wird erläutert, wie Sie mit einem leeren ASP.NET-Websiteprojekt beginnen und dann der Website CSS-Funktionen hinzufügen.

So erstellen Sie eine Dateisystem-Website

Öffnen Sie Visual Studio oder Visual Studio Express for Web.
Wählen Sie im Menü Datei den Befehl Neue Website aus.

Das Dialogfeld Neue Website wird angezeigt.
Wählen Sie unter Installierte Vorlagen den Eintrag Visual Basic oder Visual C# aus, und wählen Sie dann Leere ASP.NET-Website aus.
Wählen Sie im Feld Webspeicherort die Option Dateisystem aus, und geben Sie den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

Geben Sie zum Beispiel den Ordnernamen C:\WebSites ein.
Klicken Sie auf OK.

Visual Studio erstellt ein Websiteprojekt, das die Web.config-Datei, aber keine weiteren Seiten oder Dateien enthält.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, und wählen Sie dann Hinzufügen und anschließend Neues Element hinzufügen.
Wählen Sie Web Form aus, geben Sie der Seite den Namen "Default.aspx", und klicken Sie dann auf Hinzufügen.

Visual Studio erstellt die Seite Default.aspx und öffnet sie in der Quellansicht.

Hinzufügen von HTML-Elementen und einer CSS-Datei

Damit Sie sich auf die Formatierungstools konzentrieren können und sich nicht mit dem Erstellen der zu formatierenden Elemente beschäftigen müssen, wird in diesem Abschnitt ein Satz von Elementen bereitgestellt. Sie können diese Elemente kopieren und in eine Seite einfügen. Der Code enthält Abschnitte, die mit div-Elementen definiert werden. Hierzu gehören ein Banner, eine linke und eine rechte Randleiste, ein Abschnitt für den Hauptinhalt und eine Fußzeile. Diese einfachen Elemente enthalten Text, mit dem Sie arbeiten können, und Element-IDs. In einigen Fällen enthalten die Elemente CSS-Klassen, mit denen Sie bestimmte Elemente auf einer Seite formatieren können.

Hinzufügen von HTML-Elementen

In diesem Abschnitt wird Inhalt hinzugefügt, mit dem Sie später arbeiten können. Die Seite besteht aus einem Banner, das Text und ein Suchfeld enthält, einer Fußzeile und drei Textabschnitten. Der Hauptinhalt der Seite befindet sich im letzten Textabschnitt.

So fügen Sie der Seite HTML-Elemente hinzu

Öffnen Sie in der Ansicht Quelle die Seite Default.aspx.

Fügen Sie den folgenden Code nach dem <form>-Element ein:

<div id="pagecontainer">
<div id="banner">
<h1>AdventureWorks Styling Page</h1>
<h2>Making CSS Styling Easier in Design View</h2>
<div id="search">Find:<input id="searchbox" type="text" />
<input id="searchbutton" type="button" value="Go" />
</div>
</div>
<div id="leftsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="rightsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="maincontent" class="column">
<h2>Matters of the Web</h2>
<p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
tincidunt.</p>
<asp:Image ID="Image1" runat="server"/>
<p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
convallis venenatis, auctor vitae, justo. In at massa.</p>
</div>
<div id="footer">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
</div>
</div>

Speichern Sie die Seite.
Wechseln Sie in die Ansicht Entwurf, um die Standardformatierung anzuzeigen.

Hinzufügen einer CSS-Datei

In diesem Abschnitt fügen Sie ein Cascading Stylesheet (CSS-Datei) hinzu, mit dem Stile für die im vorangegangenen Abschnitt hinzugefügten Elemente festgelegt werden. Das Stylesheet verwendet sowohl ID-basierte als auch klassenbasierte Stilregeln.

So fügen Sie eine CSS-Datei hinzu

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, und wählen Sie dann Hinzufügen und anschließend Neues Element hinzufügen.

Das Dialogfeld Neues Element hinzufügen wird angezeigt.
Wählen Sie im Bereich "Installierte Vorlagen" Stylesheet aus.
Geben Sie im Feld Name den Namen Layout.css ein, und klicken Sie dann auf Hinzufügen.

Im Editor wird ein neues Stylesheet geöffnet, das eine body-Stilregel enthält.

Entfernen Sie die body-Stilregel, und fügen Sie dann die folgenden Regeln in die Datei ein:

#pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

Speichern Sie die Datei.

Hinzufügen von Stilregeln zum Stylesheet

Wenn Sie mit einem bereits vorhandenen CSS-Stylesheet arbeiten, können Sie die Stilregeln im Stylesheet mithilfe des Fensters Stile verwalten ändern. In dieser exemplarischen Vorgehensweise ändern Sie das ursprünglich dreispaltige Layout der Seite in ein zweispaltiges. Danach entfernen Sie die Stile, die für das ursprüngliche Layout gegolten haben.

Entfernen der rechten Spalte und Zuweisen neuer Stile

Durch Entfernen des Codes für die rechte Spalte können Sie zu einem zweispaltigen Seitenlayout wechseln. Danach können Sie die anderen Elemente neu formatieren, um ein zweispaltiges Layout zu entwerfen.

So entfernen Sie Code und Formatierungen der rechten Spalte

Öffnen Sie in der Ansicht Entwurf die Seite "Default.aspx", oder wechseln Sie zu dieser.
Ziehen Sie die schon erstellte CSS-Datei aus dem Projektmappen-Explorer auf die Seite.

Durch diese Aktion wird die CSS-Datei mit der aktuellen Seite verknüpft. Auf der Seite sind nun die in der CSS-Datei definierten Stile zu sehen.
Wechseln Sie zur Quellansicht.
Löschen Sie das div-Element, das mit <div id="rightsidebar" class="column"> beginnt.
Speichern Sie die Datei.
Wählen Sie im Menü Ansicht den Befehl Stile verwalten.

Das Fenster Stile verwalten wird angezeigt. (Standardmäßig ist dieses Fenster angedockt.)
Klicken Sie im Fenster Stile verwalten mit der rechten Maustaste auf den #rightsidebar-Stil, und klicken Sie dann auf Löschen.

Hinweis

Das Symbol für den #rightsidebar-Stil wird nicht in einem zweifachen Quadrat eingeschlossen angezeigt. Das bedeutet, dass es auf der Seite nicht mehr verwendet wird und entfernt werden kann.
Klicken Sie im Fenster Stile verwalten mit der rechten Maustaste auf den #maincontent-Stil, und klicken Sie dann auf Stil bearbeiten.

Das Dialogfeld Stil bearbeiten wird angezeigt.
Klicken Sie unter Kategorie auf Feld.
Ändern Sie unter Rand den Wert des Felds Rechts auf 0 (null).
Klicken Sie auf OK.
Wechseln Sie zur Ansicht Entwurf. Das Layout ist nun zweispaltig.
Speichern Sie die Datei.

Hinzufügen eines Bilds

Bevor Sie den Stil eines Bilds festlegen können, müssen Sie es dem Projekt hinzufügen und die ImageUrl-Eigenschaft des Bilds festlegen.

So fügen Sie dem Projekt ein Bild hinzu

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, und wählen Sie dann Hinzufügen und anschließend Vorhandenes Element.

Das Dialogfeld Vorhandenes Element hinzufügen wird angezeigt.
Legen Sie im Dialogfeld den Dateityp Bilddateien fest.
Wählen Sie eine Bilddatei aus, und klicken Sie auf Hinzufügen.

Nachdem das Bild dem Projekt hinzugefügt wurde, müssen Sie das Bild dem Image-Steuerelement zuweisen, das bereits auf der Seite vorhanden ist.

So weisen Sie ein Bild dem Image-Steuerelement hinzu

Öffnen Sie in der Ansicht Entwurf die Datei "Default.aspx", oder wechseln Sie zu dieser.
Wählen Sie das Image-Steuerelement auf der Seite aus.
Wählen Sie im Fenster Eigenschaften neben ImageUrl die Schaltfläche mit den Auslassungspunkten (...) aus, um die ImageUrl-Eigenschaft des Steuerelements festzulegen.

Das Dialogfeld Bild auswählen wird geöffnet.
Wählen Sie das Bild aus, das Sie dem Projekt hinzugefügt haben, und klicken Sie dann auf OK.

Hinzufügen von Stilregeln zum Formatieren des Bilds

Um den Textfluss um das Bild zu verbessern, können Sie das Bild an den linken oder rechten Rand der Hauptspalte schieben. Sie können auch einen Abstand zwischen Bild und Text einfügen.

So fügen Sie dem Layout Bilder hinzu

Öffnen Sie die Datei Layout.css, oder wechseln Sie zu dieser.

Fügen Sie dem Stylesheet den folgenden Code hinzu:

img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

Speichern Sie das Stylesheet.
Wechseln Sie in der Ansicht Entwurf zur Datei "Default.aspx".
Wählen Sie das Image-Steuerelement aus, das nun das Bild anzeigt, dass Sie dem Projekt hinzugefügt haben.
Weisen Sie dem Image-Steuerelement entweder den floatright-CSS-Stil oder den floatleft-CSS-Stil zu, indem Sie im Fenster Stile verwalten mit der rechten Maustaste auf den entsprechenden CSS-Stil klicken und Stil übernehmen auswählen.

Der von Ihnen ausgewählte CSS-Stil wird dem img-Stil zugewiesen.

Hinweis

Wenn das Bild zu groß ist, kann das Anwenden des Stils keine sichtbaren Auswirkungen auf die Bildposition und den Textfluss haben.In diesem Fall reduzieren Sie die Bildgröße, bevor Sie den Stil anwenden.

Nächste Schritte

Diese exemplarische Vorgehensweise hat die grundlegenden Techniken beim Arbeiten mit CSS-Stilen mithilfe der Benutzeroberfläche in Visual Studio veranschaulicht. Sie können auch die folgenden Methoden verwenden, um die Darstellung von Webseiten zu steuern:

Arbeiten mit einem neuen Stylesheet. Weitere Informationen hierzu finden Sie unter Exemplarische Vorgehensweise: Erstellen und Ändern einer CSS-Datei.
Programmgesteuertes Festlegen von Formatinformationen für HTML-Elemente. Weitere Informationen finden Sie unter Gewusst wie: Programmgesteuertes Festlegen der Eigenschaften von HTML-Serversteuerelementen.
Erstellen von Designs und Skins, mit denen nicht nur CSS-Stile, sondern fast alle Eigenschaften von ASP.NET-Steuerelementen festgelegt werden können. Weitere Informationen finden Sie unter ASP.NET-Designs (Themes und Skins).

Siehe auch