Im vierten Teil dieses Tutorials lernen Sie, wie die Größe von Web-Elementen berechnet wird. Anschließend werden Sie mittels CSS die Elemente und den Text auf der Seite layouten und formatieren.
5496-create-first-website_1408x792

Hinweis:

Über die Download-Buttons können Sie die Creative Cloud-Bibliothek und alle Projektdateien für dieses Tutorial herunterladen. Sie können entweder mit der Datei weiterarbeiten, die Sie im ersten Teil des Tutorials angelegt haben, oder die Version im Ordner für diese Lektion verwenden.

Einführung

Willkommen zu Teil 4 dieses Tutorials zur Erstellung einer einfachen, responsiven Website mit Dreamweaver CC. In den ersten drei Teilen ging es um die Definition einer Site in Dreamweaver und die Erstellung von zwei Seiten mit einer logischen HTML-Struktur. Abbildung 1 zeigt, wie die Homepage „index.html“ aussieht, wenn Sie sie im Browser öffnen.

fig01
Abbildung 1: Die Homepage der Bayside Beat-Website ist funktionsfähig, aber optisch nicht besonders ansprechend.

In den nächsten vier Lektionen werden Sie dieses „hässliche Entlein“ mithilfe von CSS und Bildern in einen eleganten „Schwan“ verwandeln. In diesem Teil lernen Sie, wie Sie die Berechnungen von Breite und Höhe für Elemente vereinfachen, Schriften ändern und mit CSS Designer grundlegende Layout-Merkmale festlegen.

Code-Fragmente zur einfachen Berechnung von Breite und Höhe erstellen

CSS behandelt jedes Element als Box. Beim standardmäßigen CSS Box Model werden Angaben für „width“ (Breite) und „height“ (Höhe) normalerweise nur auf das betroffene Element selbst angewendet. Wenn Sie einen Leerraum als Auffüllung („padding“) um den Inhalt eines Elements hinzufügen, wird dieser in der Berechnung nicht berücksichtigt. Das Gleiche gilt für Rahmen bzw. Ränder. Wenn Sie also die Breite eines Elements als 250px und die Höhe als 100px deklarieren sowie eine Auffüllung von 20px auf jeder Seite und einen Rahmen mit einer Breite von 5px festlegen, ergibt das eine Gesamtbreite von 300px und eine Gesamthöhe von 150px (siehe Abbildung 2).

fig02
Abbildung 2: Das CSS Box Model addiert Auffüllungen und Rahmen zur Breite und Höhe hinzu.

Das kann die Berechnung erschweren, vor allem wenn Sie Pixel- und Prozentangaben mischen möchten. Es fällt leichter, wenn Auffüllungen und Rahmen automatisch bei der Elementgröße mitgezählt werden. Um die Arbeit am Layout einer Seite zu vereinfachen, fügen die meisten erfahrenen Web-Designer zwei kurze CSS-Anweisungen am Anfang ihrer Stylesheets hinzu, die Auffüllungen und Rahmen in der Gesamtbreite und -höhe eines Elements einschließen. Diese Anweisungen sind sehr nützlich, daher sollten Sie sie im Dreamweaver-Bedienfeld „Codefragmente“ speichern, damit Sie sie bei Bedarf auch für andere Web-Projekte nutzen können.

  1. Öffnen Sie die Datei „index.html“ im Dokumentfenster, falls nicht schon geschehen. Klicken Sie in der Leiste „Zugehörige Dateien“ auf responsive.css (siehe Abbildung 3), um das externe Stylesheet in der geteilten Ansicht zu öffnen.
fig03
Abbildung 3: Rufen Sie über die Leiste „Zugehörige Dateien“ die verknüpfte CSS-Datei auf.
  1. Klicken Sie in den Code, und fügen Sie bei Zeile 2 eine neue Zeile ein. Geben Sie /* Simplify width and height calculations */ (Berechnung von Breite und Höhe vereinfachen) ein. Im CSS-Code wird alles zwischen /* und */ als Kommentar behandelt. Sie können so also eine kurze Erklärung zum nachfolgenden Code einfügen.

  2. Fügen Sie eine weitere neue Zeile ein, und geben Sie html gefolgt von einer öffnenden geschweiften Klammer ({) ein. CSS-Anweisungen bestehen aus einem Selektor gefolgt von Property-/Wertepaaren zwischen geschweiften Klammern. Die einfachste Selektorart besteht aus einem HTML-Tag ohne spitze Klammern (<>). Bei allen Web-Seiten ist das oberste Element das HTML-Tag, daher ist „html“ ein CSS-Selektor, der alles auf der Seite beeinflusst.

  3. Drücken Sie direkt nach der geschweiften Klammer die Eingabetaste. Dreamweaver rückt die folgende Zeile ein und blendet Codehints für CSS-Properties ein. Beginnen Sie mit der Eingabe des Wortes box. Während Sie tippen, filtert Dreamweaver die Codehints nach passenden Einträgen in allen zulässigen Properties. Das Wort kann auch mitten im Property-Namen stehen (siehe Abbildung 4).
fig04
Abbildung 4: Codehints in der Code-Ansicht beschleunigen die Bearbeitung von Code.
  1. Die gesuchte Property ist „box-sizing“. Wählen Sie sie mithilfe der Pfeiltasten oder der Maus in den Codehints aus, und drücken Sie die Eingabetaste. Dreamweaver vervollständigt den Property-Namen und fügt einen Doppelpunkt (:) hinzu. Die Codehints werden erneut eingeblendet. Fügen Sie der besseren Lesbarkeit halber ein Leerzeichen hinzu, und wählen Sie „border-box“ in der Liste aus. Beenden Sie die Zeile mit einem Semikolon (;), und drücken Sie die Eingabetaste.
  2. Geben Sie in der nächsten Zeile eine geschlossene geschweifte Klammer (}) ein, um die CSS-Anweisung abzuschließen.

  3. Erstellen Sie folgende CSS-Anweisung in der nächsten Zeile:
*, *:before,
*:after {
    box-sizing: inherit;
}

    Das ist eine Gruppe von Selektoren. Sie besteht aus drei Selektoren, die durch Kommata getrennt sind und auf die dieselben Stile angewendet werden. Das Sternchen (*) selbst ist ein Universalselektor, der für alle Elemente gilt. Die beiden anderen Selektoren verwenden sogenannte Pseudoelemente.

    Diese CSS-Anweisung ist schon eher etwas für Fortgeschrittene. Im Moment müssen Sie nur wissen, dass sie den beabsichtigten Zweck erfüllen wird. Achten Sie nur darauf, dass Sie die Anweisung korrekt eingeben. Auch wenn Sie ein Leerzeichen nach dem Doppelpunkt hinter der Property „box-sizing“ eingeben konnten, darf vor oder nach dem Doppelpunkt bei „*:before“ und „*:after“ kein Leerzeichen stehen.

  1. Öffnen Sie das Bedienfeld „Codefragmente“ (Sie finden es im Arbeitsbereich „Entwurf“ beim Bedienfeld „Dateien“), und wählen Sie den Ordner CSS_Snippets aus (siehe Abbildung 5).
fig05
Abbildung 5: Das Bedienfeld „Codefragmente“ enthält eine Auswahl wiederverwendbarer Codesnippets.
  1. Markieren Sie in der Code-Ansicht den Kommentar und die beiden eben erstellten CSS-Anweisungen, machen Sie einen Rechtsklick bzw. Ctrl-Klick darauf, und wählen Sie im Kontextmenü die Option Neues Codefragment erstellen (siehe Abbildung 6).
fig06
Abbildung 6: Speichern Sie die CSS-Anweisung im Bedienfeld „Codefragmente“.

    Daraufhin wird das Dialogfeld „Codefragment“ geöffnet. Der ausgewählte Code ist in einem der Felder bereits eingetragen.

  1. Geben Sie im Feld „Name“ Box-sizing: border-box ein. Geben Sie Includes padding and borders in width and height (Schließt Auffüllung und Rahmen in Breite und Höhe ein) im Feld „Beschreibung“ ein. Wählen Sie unter „Codefragmenttyp“ die Option Block einfügen. Behalten Sie unter Vorschautyp die Standardeinstellung Code bei. Das Dialogfeld sollte nun wie in Abbildung 7 aussehen.
fig07
Abbildung 7: Speichern Sie den Code für die Property „box-sizing“ als Code-Fragment.
  1. Klicken Sie auf OK, um das Code-Fragment zu speichern. Da Sie vorher im Bedienfeld „Codefragmente“ den Ordner CSS_Snippets ausgewählt hatten, wird das neue Code-Fragment automatisch dort gespeichert.

Durch die Aufnahme dieses Code-Fragments in Ihr Stylesheet können Sie die Auffüllung und Rahmen von Elementen anpassen, ohne deren Gesamtmaße zu verändern.

Sie können Ihre Code-Fragmente mit Creative Cloud synchronisieren. Weitere Informationen über die Arbeit mit Code-Fragmenten finden Sie in der Dreamweaver-Hilfe.

Edge Web Font installieren

Browser zeigen Text standardmäßig in der Serifenschrift Times oder Times New Roman an (Serifen sind kleine dekorative Schnörkel am Ende eines Buchstabenstriches). Über die CSS-Property „font-family“ können Sie die Schrift für Ihren Text bestimmen. Allerdings müssen Sie bedenken, dass nicht alle Schriften auf jedem Zielsystem installiert sind. Wenn Sie einen Webfont verwenden, der mit der Seite heruntergeladen wird, umgehen Sie dieses Problem. Über Dreamweaver haben Sie direkten Zugriff auf eine umfassende, von Adobe gehostete Sammlung von kostenlosen Webfonts. Diese müssen Sie zunächst in Dreamweaver aktivieren.

  1. Wählen Sie Modifizieren > Schriften verwalten, um das entsprechende Dialogfeld zu öffnen (siehe Abbildung 8).
fig08
Abbildung 8: Über das Dialogfeld „Schriften verwalten“ haben Sie Zugriff auf zahlreiche Schriften.
  1. Die gesuchte Schrift heißt „Source Sans Pro“. Beginnen Sie, den Namen im Suchfeld einzugeben. Sie erhalten drei Schriften zur Auswahl. Klicken Sie auf die mittlere Schrift – Source Sans Pro. Ein Häkchen zeigt an, dass die Schrift ausgewählt wurde (siehe Abbildung 9).
fig09
Abbildung 9: Source Sans Pro ist Teil einer Schriftfamilie.

    Source Sans Pro ist eine serifenlose Schrift. Die Buchstaben haben also nicht die vorhin erwähnten dekorativen Schnörkel. Der Unterschied lässt sich an der Vorschau von Source Sans Pro und Source Serif Pro gut erkennen.

  1. Die Verwendung eines Adobe Edge Web Fonts ist kostenlos, unterliegt aber einer Lizenzvereinbarung. Sie können die Nutzungsbedingungen einsehen, indem Sie unten im Bedienfeld auf den Link klicken.

  2. Wenn Sie mit ihnen einverstanden sind, klicken Sie im Bedienfeld auf Fertig.

Edge Web Fonts werden in Ihren lokalen Programmdateien für Dreamweaver im Ordner „configuration“ gespeichert. Damit stehen sie für alle Websites zur Verfügung, die Sie mit Dreamweaver erstellen.

Mit CSS Designer grundlegende Layout-Eigenschaften zur Seite hinzufügen

Wie Sie schon gesehen haben, lassen sich CSS-Anweisungen in der Code-Ansicht dank Codehints rasch erstellen. In Dreamweaver gibt es außerdem das Bedienfeld „CSS Designer“, mit dem Sie Ihre Seite formatieren und das Ergebnis direkt in der Live-Ansicht überprüfen können. In diesem Abschnitt werden Sie mit CSS Designer grundlegende Layout-Merkmale zur Datei „responsive.css“ hinzufügen und ihre Auswirkungen auf die Datei „index.html“ sofort sehen.

  1. Klicken Sie auf Live-Ansicht, sodass die Live-Ansicht der Datei „index.html“ das gesamte Dokumentfenster ausfüllt.

  2. Öffnen Sie das Bedienfeld „CSS Designer“ in der Bedienfeldgruppe auf der rechten Seite des Bildschirms (Sie finden es beim Bedienfeld „Codefragmente“, das Sie im vorherigen Abschnitt verwendet haben). CSS Designer besteht aus vier Bereichen: Quellen, @Medien, Selektoren und Eigenschaften (siehe Abbildung 10).
fig10
Abbildung 10: Mit CSS Designer können Sie CSS-Stile an zentraler Stelle erstellen und verwalten.

Im Arbeitsbereich „Entwurf“ ist CSS Designer standardmäßig in zwei Spalten gegliedert. Auf der rechten Seite sehen Sie den Bereich „Eigenschaften“. Wenn Sie mit einem kleinen Bildschirm arbeiten, können Sie das Layout auf eine Spalte reduzieren. Ziehen Sie dazu einfach den linken Rand der Bedienfeldgruppe nach rechts.

Wenn Sie eine neue CSS-Anweisung erstellen, sollten Sie darauf achten, dass oben im Bedienfeld die Schaltfläche Alle aktiviert ist.

Hier eine kurze Erklärung zu den einzelnen Bereichen:

  • Quellen: Hier wird aufgelistet, woher die auf der aktuellen Seite angewendeten Stile stammen. Stile können in externen Stylesheets (z. B. „responsive.css“), innerhalb eines eingebetteten Code-Abschnitts oder in dynamisch verknüpften Stylesheets definiert sein.

  • @Medien: Dieser Bereich enthält die Medienabfragen (Media Queries), die von den verschiedenen Quellen verwendet werden. Im siebten Teil des Tutorials erfahren Sie mehr darüber.

  • Selektoren: Hier finden Sie alle CSS-Selektoren der ausgewählten Quelle. Über das Suchfeld oben können Sie Selektoren in umfangreicheren Stylesheets schneller finden.

  • Eigenschaften: In diesem Bereich legen Sie die Properties und Werte für Selektoren fest. Wenn das Kontrollkästchen „Nur verwendete“ aktiviert ist, werden nur die von Ihnen eingerichteten Selektoren aufgelistet. Ist das Kontrollkästchen deaktiviert, werden ungefähr 50 der gängigsten Properties für Layout, Text, Rahmen und Hintergrund angezeigt.
  1. Vergewissern Sie sich, dass bei CSS Designer oben die Schaltfläche Alle aktiviert ist.

    Wählen Sie im Bereich Quellen die Datei responsive.css aus.

    Den Bereich @Medien brauchen Sie erst im siebten Teil. Blenden Sie ihn aus, indem Sie den oberen Rand des Bereichs „Selektoren“ nach oben ziehen.

    Der Bereich „Selektoren“ listet alle bisher angelegten Selektoren auf. Für den letzten Selektor („#wrapper“) wurden noch keine Stile eingerichtet. Wenn Sie einen neuen Selektor erstellen, fügt Dreamweaver ihn immer am Ende des Stylesheets ein, es sei denn, Sie haben bereits einen anderen Selektor hervorgehoben. Es empfiehlt sich, Stile in logischer Reihenfolge anzulegen. Wählen Sie also „*“, „*:before“ und „*:after“ aus, und deaktivieren Sie das Kontrollkästchen Nur verwendete rechts oben im Bereich „Eigenschaften“.

  2. Klicken Sie im Bereich „Selektoren“ links oben auf das Pluszeichen, um einen neuen Selektor zu erstellen. Dreamweaver schlägt auf Basis der aktuellen Auswahl in der Live-Ansicht einen Selektornamen vor. Ignorieren Sie den Vorschlag, und geben Sie body ein. Drücken Sie die Eingabetaste zweimal, um die Änderung zu bestätigen. Für den ausgewählten neuen Selektor (siehe Abbildung 11) können Sie nun eine CSS-Anweisung erstellen, die alle Elemente auf der Seite betreffen wird. Im Bereich „Eigenschaften“ legen Sie die entsprechenden Property-Werte fest.
fig11
Abbildung 11: Bereiten Sie die Festlegung von Properties zur Formatierung des BODY-Bereichs der Seite vor.
  1. Im Abschnitt „Layout“ finden Sie ein visuelles Tool, mit dem Sie die Property „margin“ (Rand) festlegen können. Das brauchen Sie aber jetzt nicht. Klicken Sie einfach auf Kurzschrift festlegen, um ein editierbares Feld zu öffnen, und geben Sie den Wert 0 ein. Drücken Sie die Eingabetaste, um die Änderung zu bestätigen.

    Der gesamte Inhalt in der Live-Ansicht sollte sich nun leicht nach oben und links bewegt haben, da der standardmäßige Randwert von 8px für dieses Element aufgehoben wurde.

    Die Property „margin“ wird im Bereich „Eigenschaften“ nun fett angezeigt, d. h., sie wurde festgelegt. Beim visuellen Tool wurden die Werte für alle Seiten ebenfalls auf den Wert 0 gesetzt (siehe Abbildung 12).
fig12
Abbildung 12: Die Property „margin“ wurde für alle Seiten auf „0“ gesetzt.
  1. Klicken Sie im Bereich „Eigenschaften“ oben auf das Symbol für Text , um zum Abschnitt für die Text-Properties zu springen. Die erste aufgeführte Property ist „color“. Sie legt die Textfarbe fest. Sie finden alle Farben für das Projekt in der Creative Cloud-Bibliothek, die Sie zu Beginn des Tutorials installiert haben.

  2. Das Bedienfeld „CC Libraries“ befindet sich in derselben Bedienfeldgruppe wie CSS Designer. Ziehen Sie es heraus ins Dokumentfenster.

  3. Klicken Sie auf das Farbfeld für die Property „color“, um den Farbwähler zu öffnen.

  4. Vergewissern Sie sich, dass rechts unten Hex aktiviert ist. Damit werden Farben als hexadezimaler Code notiert, der von allen Browsern unterstützt wird.

    Wählen Sie die Pipette links unten im Farbwähler aus, und nehmen Sie die Farbe aus dem grauen Farbfeld im Bedienfeld „CC Libraries“ auf (siehe Abbildung 13). Damit wird die Farbe auf den Wert #4B4B4B gesetzt. Diese Farbe ist für das Auge angenehmer als reines Schwarz auf Weiß.

fig13
Abbildung 13: Übernehmen Sie eine Farbe mithilfe der Pipette.

    Klicken Sie außerhalb des Farbwählers, um ihn zu schließen.

  1. Klicken Sie rechts neben der Property „font-family“, um ein Menü mit häufig verwendeten Schriftenstapeln (Font Stacks) aufzurufen. Wählen Sie den vorher installierten Edge Web Font aus. Sie finden ihn unter dem Namen „source-sans-pro“ am Ende der Liste (siehe Abbildung 14).
fig14
Abbildung 14: Webfonts werden unterhalb der häufig verwendeten Schriftenstapeln aufgelistet.

    Schriftenstapel listen gängige Schriftarten nach Präferenz auf. Falls die erste Schrift auf dem Gerät des Anwenders nicht installiert ist, sucht der Browser die nächste Schriftart. Das passiert so lange, bis eine passende Schrift gefunden wurde.

    Durch die Auswahl eines Edge Web Fonts werden neben dem Wert für „font-family“ auch automatisch die Werte für die Properties „font-style“ und „font-weight“ festgelegt. In der Leiste „Zugehörige Dateien“ wird nun eine neue Datei namens „source-sans-pro:n2,n4:default.js“ angezeigt. Außerdem sehen Sie eine (manchmal auch mehrere) schreibgeschützte Quelle im Bereich „Quellen“. Die neue Datei und die schreibgeschützte(n) Quelle(n) laden die Schrift dynamisch von einem Adobe-Server. Sie können sie nicht verändern.

  1. Der Wert „normal“ für die Property „font-style“ ist in Ordnung, aber der Wert „200“ für die Property „font-weight“ macht die Schrift viel zu dünn.

    Klicken Sie auf 200, um ein Menü mit den verfügbaren Schriftstärken zu öffnen, und wählen Sie 400 aus (siehe Abbildung 15).
fig15
Abbildung 15: Die Schriftstärken für Edge Web Fonts sind als numerische Werte definiert.

    Die Property „font-weight“ kann entweder mit einem numerischen Wert zwischen 100 (dünn) bis 900 (sehr fett) in 100er-Schritten festgelegt werden oder durch die Eingabe eines der folgenden Stichwörter: „normal“ (entspricht 400), „bold“ (fett = 700), „bolder“ (fetter) oder „lighter“ (dünner). Edge Web Fonts werden immer über numerische Werte definiert. Die verfügbaren Werte variieren je nach Schriftart. Wie in Abbildung 15 zu sehen, unterstützt „source-sans-pro“ die Werte 100, 500 und 800 nicht.

  1. Klicken Sie rechts neben der Property „font-size“, um ein Menü der Maßeinheiten und Stichwörter für Schriften aufzurufen, und wählen Sie hier em aus (siehe Abbildung 16).
fig16
Abbildung 16: Wählen Sie „em“ als Maßeinheit für die Property „font-size“ aus.

    Die Live-Ansicht wird plötzlich leer. Aber wie es so schön bei „Per Anhalter durch die Galaxis“ heißt: Keine Panik.

    Wenn Sie eine Maßeinheit auswählen, setzt Dreamweaver den Wert zunächst auf 0. Da es sich bei em um ein proportionales Maß auf Basis der Höhe der aktuellen Schrift handelt, verschwindet der Text beim Wert 0.

    Geben Sie einfach 1em ein, und der Text wird wieder sichtbar. Durch die Eingabe von 1em für die CSS-Anweisung für „body“ wird die Verwendung des Browser-Standardwerts für Absätze und Listenelemente (normalerweise 16px) vorgegeben.

  1. Klicken Sie im Bereich „Eigenschaften“ oben auf das Symbol für den Hintergrund, um zu den entsprechenden Properties zu gelangen.

  2. Anstatt den Farbwähler zur Festlegung der Property „background-color“ zu verwenden, klicken Sie einfach auf das hellblaue Farbfeld im Bedienfeld „CC Libraries“ (siehe Abbildung 17). Dabei wird der Hex-Wert der Farbe in die Zwischenablage kopiert.
fig17
Abbildung 17: Klicken Sie auf ein Farbfeld im Bedienfeld „CC Libraries“, um den jeweiligen Hex-Wert zu kopieren.

    Klicken Sie rechts neben dem Farbfeld der Property „background-color“, um ein editierbares Feld zu öffnen. Fügen Sie den kopierten Wert ein, und drücken Sie die Eingabetaste, um die Änderung zu bestätigen. Der Seitenhintergrund ist jetzt hellblau.

  1. Aktivieren Sie im Bereich „Eigenschaften“ rechts oben das Kontrollkästchen Nur verwendete, um alle Properties anzuzeigen, die bisher für den BODY-Bereich der Seite festgelegt wurden (siehe Abbildung 18).
fig18
Abbildung 18: Aktivieren Sie das Kontrollkästchen „Nur verwendete“, um die definierten Stile für einen Selektor zu überprüfen.

Properties direkt im Bedienfeld „CSS Designer“ festlegen

Durch die Auswahl gängiger Properties in den verschiedenen Bereichen von CSS Designer lässt sich die CSS-Sprache ganz gut erlernen. Falls Sie sich aber bereits mit CSS auskennen und Properties und Werte direkt eingeben möchten, navigieren Sie zum Abschnitt Weitere ganz unten im Bereich „Eigenschaften“. Dreamweaver beschleunigt den Vorgang mithilfe von Codehints. Versuchen Sie es. Auch als Einsteiger müssten Sie mit den folgenden Anweisungen keine Probleme haben:

  1. Vergewissern Sie sich, dass bei CSS Designer oben die Schaltfläche Alle aktiviert und im Bereich „Quellen“ die Datei responsive.css ausgewählt ist. Falls nötig, aktivieren Sie das Kontrollkästchen Nur verwendete rechts oben im Bereich „Eigenschaften“.

  2. Wählen Sie im Bereich „Selektoren“ den Selektor „#wrapper“ aus. Das Hash-Zeichen (#) zeigt an, dass es sich um einen ID-Selektor handelt. Er wendet die CSS-Anweisungen also auf Elemente mit der ID „wrapper“ an. Falls er nicht aufgelistet wird, können Sie ihn mit einem Klick auf das Pluszeichen links oben im Bereich „Selektoren“ erstellen und im editierbaren Feld den Wert „#wrapper“ eintragen.

    Da für diesen Selektor noch keine Stile festgelegt wurden, zeigt der Bereich „Eigenschaften“ nur den Titel „Weitere“ und zwei editierbare Felder für eine Property und einen Wert an.

  3. Klicken Sie in das Feld Eigenschaft hinzufügen, und beginnen Sie mit der Eingabe des Wortes width. Während Sie tippen, zeigen Codehints passende Properties an. Wenn die Property „width“ markiert ist, drücken Sie die Tabulator- oder Eingabetaste, um sie auszuwählen.

  4. Der Cursor wandert in das zweite Feld. Geben Sie 100% ein, und drücken Sie die Eingabetaste. Dadurch erstreckt sich der Wrapper über die volle Breite des Bildschirms.

  5. Damit ein solches Element auf großen Bildschirmen nicht zu breit wird, fügen Sie noch die Property „max-width“ mit dem Wert 1000px hinzu.

  6. Richten Sie den Wrapper zentriert aus, indem Sie die Property „margin“ mit dem Wert 0 auto hinzufügen. Das ist die Kurzschrift dafür, dass nach oben und nach unten kein Rand, aber links und rechts automatisch ein Rand angezeigt wird. Wenn das Dokumentfenster breiter als 1.000 Pixel (der Wert der Property „max-width“) ist, wird der Inhalt in der Live-Ansicht mittig ausgerichtet.

  7. Fügen Sie die Property „background-color“ mit dem Wert white hinzu. Dieses Farbstichwort wird von allen Browsern korrekt interpretiert. Der Bereich „Eigenschaften“ müsste nun vier Stildefinitionen für den „#wrapper“-Selektor aufweisen (siehe Abbildung 19).
fig19
Abbildung 19: Sie können CSS-Anweisungen direkt im Abschnitt „Weitere“ des Bereichs „Eigenschaften“ erstellen.
  1. Speichern Sie Ihre Arbeit über den Menüpfad Datei > Alle zugehörigen Dateien speichern. Gewöhnen Sie sich an, das regelmäßig zu tun, während Sie am Layout einer Seite arbeiten.

Der Text ist nun vor einem weißen Hintergrund zentriert ausgerichtet. Wenn das Dokumentfenster breiter als 1.000 Pixel ist, wird der hellblaue Hintergrund des BODY-Elements auf beiden Seiten sichtbar. Am oberen Rand der Seite ist noch eine seltsame Lücke zu sehen, und der Text liegt bündig an der linken Seite des Wrapper-DIV-Elements an. Diese Probleme werden Sie im fünften Teil beheben. Zunächst aber noch ein paar Hinweise zu Pixel-Maßangaben in Web-Seiten.

Pixel und HD-Bildschirme

Pixel sind die winzigen Punkte, die in ihrer Gesamtheit das Bild auf einem Computer-Bildschirm ergeben. In der Anfangszeit des Internets entsprach 1px der Größe eines solchen Bildpunkts. Mit den Jahren und fortschreitender Weiterentwicklung der Technologie wurden diese Bildpunkte immer kleiner. Glücklicherweise haben die Entwickler der CSS-Sprache diese Situation vorausgesehen. Pixel als Maßeinheit hängen nicht von der Größe der physikalischen Pixel ab, die ein Gerätebildschirm verwendet. Somit sollte das Wrapper-DIV-Element mit einer maximalen Breite von „1000px“ auf uralten Monitoren und den neuesten HD-Displays ungefähr gleich aussehen.

Nächste Schritte

Allmählich sieht die Website präsentabel aus, aber es gibt noch einiges zu tun. In Teil 5 – Abstände um Elemente anpassen und Bilder responsiv anlegen werden Sie das Problem mit horizontalen und vertikalen Abständen lösen und die Seite mit responsiven Bildern verschönern.

04/13/2018

Beitrag von: David Powers, Tom Alex Buch

War diese Seite hilfreich?