Exemplarische Vorgehensweise: Arbeiten mit einer vorhandenen CSS-Datei

  • Artikel

Aktualisiert: November 2007

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

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

  • Erstellen einer Dateisystem-Website.

  • Verwenden von CSS-orientierten Features in Visual Web Developer.

  • Erstellen eines zweispaltigen Seitenlayouts mit CSS.

    Hinweis:

    In dieser exemplarischen Vorgehensweise werden zusätzliche Features von Visual Studio 2008 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 2008 oder Microsoft Visual Web Developer Express Edition. Informationen zum Herunterladen finden Sie auf der Microsoft Visual Studio Express Editions-Website.

  • .NET Framework, Version 3.5.

  • Ein Bild, das Sie der Website hinzufügen können. Welches Bild Sie verwenden, spielt keine Rolle, Sie benötigen es lediglich, um sich Positionierungsfeatures 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 mit Visual Web Developer erstellt haben (z. B. indem Sie die Schritte in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer ausgeführt haben), können Sie diese Website verwenden und bei "Hinzufügen von HTML-Elementen und einer CSS-Datei" weiter unten in dieser exemplarischen Vorgehensweise fortfahren. Erstellen Sie andernfalls eine neue Website, indem Sie folgende Schritte ausführen.

So erstellen Sie eine neue Dateisystem-Website

  1. Öffnen Sie Visual Web Developer.

  2. Klicken Sie im Menü Datei nacheinander auf Neu und auf Website.

    Das Dialogfeld Neue Website wird angezeigt.

  3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

  4. Wählen Sie im Feld SpeicherortDateisystem aus, und geben Sie den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

    Geben Sie beispielsweise den folgenden Ordnernamen ein: C:\CSSWebsite.

  5. Klicken Sie in der Liste Sprache auf Visual Basic oder auf Visual C#.

    Die von Ihnen ausgewählte Programmiersprache wird zur Standardsprache für die Website. Sie können jedoch die Programmiersprache für jede Seite einzeln festlegen.

  6. Klicken Sie auf OK.

    Visual Web Developer erstellt den Ordner und eine neue Seite mit dem Namen Default.aspx.

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

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

  2. 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" />
<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>

  3. Speichern Sie die Seite.

  4. 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 Formate und 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

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, und klicken Sie dann auf Neues Element hinzufügen.

    Das Dialogfeld Neues Element hinzufügen wird angezeigt.

  2. Klicken Sie unter Von Visual Studio installierte Vorlagen auf Stylesheet.

  3. 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.

  4. 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;
}

  5. 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

  1. Öffnen Sie die Seite Default.aspx, oder wechseln Sie zu dieser Seite.

  2. Wechseln Sie zur Ansicht Entwurf.

  3. Ziehen Sie die schon erstellte CSS-Datei aus dem Projektmappen-Explorer auf die Seite.

    Auf diese Weise wird die CSS-Datei mit der aktuellen Seite verknüpft. Auf der Seite sind nun die in der CSS-Datei definierten Stile zu sehen.

  4. Wechseln Sie zur Quellansicht.

  5. Löschen Sie das div-Element, das mit <div id="rightsidebar" class="column"> beginnt.

  6. Speichern Sie die Datei.

  7. Klicken Sie im Menü Format auf CSS-Stile und dann auf Stile verwalten.

    Das Fenster Stile verwalten wird angezeigt. (Standardmäßig ist dieses Fenster angedockt.)

  8. 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 Kreis eingeschlossen angezeigt. Das bedeutet, dass es auf der Seite nicht mehr verwendet wird und entfernt werden kann.

  9. 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.

  10. Klicken Sie unter Kategorie auf Feld.

  11. Ändern Sie unter Rand den Wert des Felds Rechts auf 0 (null).

  12. Klicken Sie auf OK.

  13. Wechseln Sie zur Ansicht Entwurf. Das Layout ist nun zweispaltig.

  14. 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

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, und klicken Sie dann auf Vorhandenes Element hinzufügen.

    Das Dialogfeld Vorhandenes Element hinzufügen wird angezeigt.

  2. Wählen Sie eine Bilddatei aus, und klicken Sie auf Hinzufügen.

Nach dem Hinzufügen des Bilds zum Projekt ist es notwendig, das Bild einem Image Steuerelement zuzuordnen.

So weisen Sie ein Bild dem Image-Steuerelement hinzu

  1. Öffnen Sie die Datei Default.aspx, oder wechseln Sie zu dieser.

  2. Wechseln Sie zur Ansicht Entwurf, und wählen Sie das Image-Steuerelement aus.

  3. Legen Sie im Fenster Eigenschaften die ImageUrl-Eigenschaft des Image-Steuerelements auf die URL der neu hinzugefügten Bilddatei fest.

Hinzufügen von Stilregeln zum Formatieren des Bilds

Um das Bild und Text besser aufeinander abzustimmen, können Sie das Bild an den linken oder rechten Rand der Hauptspalte schieben und einen Abstand zwischen Bild und Text einfügen.

So fügen Sie dem Layout Bilder hinzu

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

  2. 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;
}

  3. Öffnen Sie die Datei Default.aspx, oder wechseln Sie zu dieser.

  4. Wechseln Sie zur Ansicht Entwurf, und wählen Sie das Image-Steuerelement aus.

  5. 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.

Nächste Schritte

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

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Erstellen und Ändern einer CSS-Datei

Konzepte

Übersicht über das Arbeiten mit CSS

ASP.NET-Webserversteuerelemente und CSS-Formatvorlagen

Gewusst wie: Verwenden des Fensters "CSS-Eigenschaften"