Im vierten Teil dieses Tutorials lernst du, wie die Größe von Web-Elementen berechnet wird. Anschließend wirst du mit CSS die Elemente und den Text auf der Seite layouten und formatieren.
Bunte, gemusterte Kacheln schweben in den Himmel.

Hinweis:

Über die Download-Buttons kannst du die Creative Cloud-Bibliothek und alle Projektdateien für dieses Tutorial herunterladen. Du kannst entweder mit der Datei weiterarbeiten, die du im ersten Teil des Tutorials angelegt hast, 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. 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 du sie im Browser öffnest.

Eine schlichte, zweckmäßige Homepage für Bayside Beat ohne Bilder und Textformatierung
Abbildung 1: Die Homepage der Bayside Beat-Website ist funktionsfähig, aber optisch nicht besonders ansprechend.

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

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 du einen Leerraum als Auffüllung („padding“) um den Inhalt eines Elements hinzufügst, wird dieser in der Berechnung nicht berücksichtigt. Das Gleiche gilt für Rahmen bzw. Ränder. Wenn du also die Breite eines Elements als 250px und die Höhe als 100px deklarierst sowie eine Auffüllung von 20px auf jeder Seite und einen Rahmen mit einer Breite von 5px festlegst, ergibt das eine Gesamtbreite von 300px und eine Gesamthöhe von 150px (siehe Abbildung 2).

Das CSS Box Model addiert Auffüllungen und Rahmen zur Breite und Höhe hinzu.
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 du Pixel- und Prozentangaben mischen möchtest. 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 solltest du sie im Dreamweaver-Bedienfeld „Codefragmente“ speichern, damit du sie bei Bedarf auch für andere Web-Projekte nutzen kannst.

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

  2. Füge eine weitere neue Zeile ein. Gib 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ücke direkt nach der geschweiften Klammer die Eingabetaste. Dreamweaver rückt die folgende Zeile ein und blendet Codehints für CSS-Properties ein. Beginne mit der Eingabe des Wortes box. Während du tippst, 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).
Codehints in der Code-Ansicht von Dreamweaver beschleunigen die Bearbeitung von Code.
Abbildung 4: Codehints in der Code-Ansicht beschleunigen die Bearbeitung von Code.
  1. Die gesuchte Property ist „box-sizing“. Wähle sie mithilfe der Pfeiltasten oder der Maus in den Codehints aus. Drücke die Eingabetaste. Dreamweaver vervollständigt den Property-Namen und fügt einen Doppelpunkt (:) hinzu. Die Codehints werden erneut eingeblendet. Füge der besseren Lesbarkeit halber ein Leerzeichen hinzu. Wähle „border-box“ in der Liste aus. Beende die Zeile mit einem Semikolon (;). Drücke die Eingabetaste.
  2. Gib in der nächsten Zeile eine geschlossene geschweifte Klammer (}) ein, um die CSS-Anweisung abzuschließen.

  3. Erstelle 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 musst du nur wissen, dass sie den beabsichtigten Zweck erfüllen wird. Achte nur darauf, dass du die Anweisung korrekt eingibst. Auch wenn du ein Leerzeichen nach dem Doppelpunkt hinter der Property „box-sizing“ eingeben konntest, darf vor oder nach dem Doppelpunkt bei „*:before“ und „*:after“ kein Leerzeichen stehen.

  1. Öffne das Bedienfeld „Codefragmente“ (du findest es im Arbeitsbereich „Entwurf“ beim Bedienfeld „Dateien“). Wähle den Ordner CSS_Snippets aus (siehe Abbildung 5).
Das Bedienfeld „Codefragmente“ enthält eine Auswahl wiederverwendbarer Codesnippets.
Abbildung 5: Das Bedienfeld „Codefragmente“ enthält eine Auswahl wiederverwendbarer Codesnippets.
  1. Markiere in der Ansicht „Code“ den Kommentar und die beiden eben erstellten CSS-Anweisungen. Mache einen Rechtsklick bzw. Ctrl-Klick darauf, und wähle Neues Codefragment erstellen (siehe Abbildung 6).
Für zwei CSS-Anweisungen wird „Neues Codefragment erstellen“ ausgewählt.
Abbildung 6: Speichere 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. Gib im Feld „Name“ Box-sizing: border-box ein. Gib 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ähle unter „Codefragmenttyp“ die Option Block einfügen. Behalte unter Vorschautyp die Standardeinstellung Code bei. Das Dialogfeld sollte nun wie in Abbildung 7 aussehen.
Der Code für „box-sizing“ wird als Code-Fragment gespeichert.
Abbildung 7: Speichere 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.

Einen Adobe 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“ kannst du die Schrift für deinen Text bestimmen. Allerdings musst du bedenken, dass nicht alle Schriften auf jedem Zielsystem installiert sind. Wenn du einen Webfont verwendest, der mit der Seite heruntergeladen wird, umgehst du dieses Problem. Über Dreamweaver hast du direkten Zugriff auf eine umfassende, von Adobe gehostete Sammlung von kostenlosen Webfonts. Diese musst du zunächst in Dreamweaver aktivieren.

  1. Wähle Modifizieren > Schriften verwalten, um das entsprechende Dialogfeld zu öffnen (siehe Abbildung 8).
Das Dialogfeld „Schriften verwalten“ bietet Zugriff auf zahlreiche Schriften.
Abbildung 8: Über das Dialogfeld „Schriften verwalten“ hast du Zugriff auf zahlreiche Schriften.
  1. Die gesuchte Schrift heißt „Source Sans Pro“. Beginne, den Namen im Suchfeld einzugeben. Du erhältst drei Schriften zur Auswahl. Klicke auf die mittlere Schrift – Source Sans Pro. Ein Häkchen zeigt an, dass die Schrift ausgewählt wurde (siehe Abbildung 9).
Die Schrift „Source Sans Pro“ ist Teil einer Schriftfamilie.
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. Du kannst die Nutzungsbedingungen einsehen, indem du unten im Bedienfeld auf den Link klickst.

  2. Wenn du mit ihnen einverstanden bist, klicke im Bedienfeld auf Fertig.

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

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

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

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

  2. Öffne das Bedienfeld „CSS Designer“ in der Bedienfeldgruppe auf der rechten Seite des Bildschirms (du findest es beim Bedienfeld „Codefragmente“, das du im vorherigen Abschnitt verwendet hast). CSS Designer besteht aus vier Bereichen: Quellen, @Medien, Selektoren und Eigenschaften (siehe Abbildung 10).
Mit CSS Designer lassen sich CSS-Stile an zentraler Stelle erstellen und verwalten.
Abbildung 10: Mit CSS Designer lassen sich CSS-Stile an zentraler Stelle erstellen und verwalten.

Im Arbeitsbereich „Entwurf“ ist CSS Designer standardmäßig in zwei Spalten gegliedert. Auf der rechten Seite siehst du den Bereich „Eigenschaften“. Wenn du mit einem kleinen Bildschirm arbeitest, kannst du das Layout auf eine Spalte reduzieren. Ziehe dazu einfach den linken Rand der Bedienfeldgruppe nach rechts.

Wenn du eine neue CSS-Anweisung erstellst, solltest du 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 erfährst du mehr darüber.

  • Selektoren: Hier findest du alle CSS-Selektoren der ausgewählten Quelle. Über das Suchfeld oben kannst du Selektoren in umfangreicheren Stylesheets schneller finden.

  • Eigenschaften: In diesem Bereich legst du die Properties und Werte für Selektoren fest. Wenn das Kontrollkästchen „Nur verwendete“ aktiviert ist, werden nur die von dir 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. Vergewissere dich, dass bei CSS Designer oben die Schaltfläche Alle aktiviert ist.

    Wähle im Bereich Quellen die Datei responsive.css aus.

    Den Bereich @Medien brauchst du erst im siebten Teil. Blende ihn aus, indem du den oberen Rand des Bereichs „Selektoren“ nach oben ziehst.

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

  2. Klicke im Bereich „Selektoren“ links oben auf das Pluszeichen, um einen neuen Selektor zu erstellen. Dreamweaver schlägt auf Basis der aktuellen Auswahl in der Ansicht „Live“ einen Selektornamen vor. Ignoriere den Vorschlag. Gib body ein. Drücke die Eingabetaste zweimal, um die Änderung zu bestätigen. Für den ausgewählten neuen Selektor (siehe Abbildung 11) kannst du nun eine CSS-Anweisung erstellen, die alle Elemente auf der Seite betreffen wird. Im Bereich „Eigenschaften“ legst du die entsprechenden Property-Werte fest.
Die Einrichtung von Properties zur Formatierung des BODY-Bereichs der Seite wird vorbereitet.
Abbildung 11: Bereite die Festlegung von Properties zur Formatierung des BODY-Bereichs der Seite vor.
  1. Im Abschnitt „Layout“ findest du ein visuelles Tool, mit dem du die Property „margin“ (Rand) festlegen kannst. Das brauchst du aber jetzt nicht. Klicke einfach auf Kurzschrift festlegen, um ein editierbares Feld zu öffnen. Gib den Wert 0 ein. Drücke die Eingabetaste, um die Änderung zu bestätigen.

    Der gesamte Inhalt in der Ansicht „Live“ 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).
Die Property „margin“ wurde für alle Seiten auf „0“ gesetzt.
Abbildung 12: Die Property „margin“ wurde für alle Seiten auf „0“ gesetzt.
  1. Klicke 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. Du findest alle Farben für das Projekt in der Creative Cloud-Bibliothek, die du zu Beginn des Tutorials installiert hast.

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

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

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

    Wähle die Pipette links unten im Farbwähler aus. Nimm 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ß.

Mit der Pipette wird eine Farbe ausgewählt.
Abbildung 13: Übernimm eine Farbe mithilfe der Pipette.

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

  1. Klicke rechts neben der Property „font-family“, um ein Menü mit häufig verwendeten Schriftenstapeln (Font Stacks) aufzurufen. Wähle den vorher installierten Edge Web Font aus. Du findest ihn unter dem Namen „source-sans-pro“ am Ende der Liste (siehe Abbildung 14).
Webfonts werden unterhalb der häufig verwendeten Schriftenstapeln aufgelistet.
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 Users 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. Auf der Leiste „Zugehörige Dateien“ wird nun eine neue Datei namens „source-sans-pro:n2,n4:default.js“ angezeigt. Außerdem siehst du eine schreibgeschützte Quelle (manchmal auch mehrere) im Bereich „Quellen“. Die neue Datei und die schreibgeschützte(n) Quelle(n) laden die Schrift dynamisch von einem Adobe-Server. Du kannst 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.

    Klicke auf 200, um ein Menü mit den verfügbaren Schriftstärken zu öffnen. Wähle 400 aus (siehe Abbildung 15).
Die Schriftstärken für Edge Web Fonts sind als numerische Werte definiert.
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. Klicke rechts neben der Property „font-size“, um ein Menü der Maßeinheiten und Stichwörter für Schriften aufzurufen. Wähle hier em aus (siehe Abbildung 16).
Die Maßeinheit „em“ wird für die Property „font-size“ ausgewählt.
Abbildung 16: Wähle „em“ als Maßeinheit für die Property „font-size“ aus.

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

    Wenn du eine Maßeinheit auswählst, 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.

    Gib 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. Klicke 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, klicke einfach auf das hellblaue Farbfeld im Bedienfeld „CC Libraries“ (siehe Abbildung 17). Dabei wird der Hex-Code der Farbe in die Zwischenablage kopiert.
Durch Klicken auf ein Farbfeld im Bedienfeld „CC Libraries“ wird der zugehörige Hex-Code kopiert.
Abbildung 17: Klicke auf ein Farbfeld im Bedienfeld „CC Libraries“, um den jeweiligen Hex-Code zu kopieren.

    Klicke rechts neben dem Farbfeld der Property „background-color“, um ein editierbares Feld zu öffnen. Füge den kopierten Wert ein. Drücke die Eingabetaste, um die Änderung zu bestätigen. Der Seitenhintergrund ist jetzt hellblau.

  1. Aktiviere 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).
Im Bedienfeld „CSS Designer“ ist „Nur verwendete“ ausgewählt, um die definierten Stile für einen Selektor zu überprüfen.
Abbildung 18: Aktiviere 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 du dich aber bereits mit CSS auskennst und Properties und Werte direkt eingeben möchtest, navigiere zum Abschnitt Weitere ganz unten im Bereich „Eigenschaften“. Dreamweaver beschleunigt den Vorgang mithilfe von Codehints. Versuche es. Auch als Einsteiger müsstest du mit den folgenden Anweisungen keine Probleme haben:

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

  2. Wähle 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, kannst du 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. Klicke in das Feld Eigenschaft hinzufügen. Beginne mit der Eingabe des Wortes width. Während du tippst, zeigen Codehints passende Properties an. Wenn die Property „width“ markiert ist, drücke die Tabulator- oder Eingabetaste, um sie auszuwählen.

  4. Der Cursor wandert in das zweite Feld. Gib 100% ein, und drücke 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üge noch die Property „max-width“ mit dem Wert 1000px hinzu.

  6. Richte den Wrapper zentriert aus, indem du die Property „margin“ mit dem Wert 0 auto hinzufügst. 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 Ansicht „Live“ mittig ausgerichtet.

  7. Füge 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).
Im Abschnitt „Weitere“ des Bereichs „Eigenschaften“ werden CSS-Anweisungen erstellt.
Abbildung 19: Du kannst CSS-Anweisungen direkt im Abschnitt „Weitere“ des Bereichs „Eigenschaften“ erstellen.
  1. Speichere deine Arbeit über Datei > Alle zugehörigen Dateien speichern. Gewöhne dir an, das regelmäßig zu tun, während du am Layout einer Seite arbeitest.

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 wirst du 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.

Allmählich sieht die Website präsentabel aus, aber es gibt noch einiges zu tun. Im nächsten Schritt löst du das Problem mit horizontalen und vertikalen Abständen und verschönerst die Seite mit responsiven Bildern.

10/18/2021

Beitrag von: David Powers, Tom Alex Buch

War diese Seite hilfreich?