Probiere diese Tutorials mit Dreamweaver aus
Moderne, responsive Web-Seiten gestalten
Schriften ändern und grundlegende Layout-Eigenschaften festlegen.
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.
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.
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 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-Designerinnen und 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.
Ö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.
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.
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.
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).
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.
Erstelle folgende CSS-Anweisung in der nächsten Zeile:
Öffne das Bedienfeld „Codefragmente“ (du findest es im Arbeitsbereich „Entwurf“ beim Bedienfeld „Dateien“). Wähle den Ordner CSS_Snippets aus (siehe Abbildung 5).
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).
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.
Klicke auf OK, um das Code-Fragment zu speichern. Da du vorher im Bedienfeld „Codefragmente“ den Ordner CSS_Snippets ausgewählt hattest, wird das neue Code-Fragment automatisch dort gespeichert.
Durch die Aufnahme dieses Code-Fragments in dein Stylesheet kannst du die Auffüllung und Rahmen von Elementen anpassen, ohne deren Gesamtmaße zu verändern.
Du kannst deine Code-Fragmente mit Creative Cloud synchronisieren. Weitere Informationen über dieArbeit mit Code-Fragmenten findest du 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.
Wähle Modifizieren > Schriften verwalten, um das entsprechende Dialogfeld zu öffnen (siehe Abbildung 8).
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 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.
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“ mit 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.
Klicke auf Live, sodass die Ansicht „Live“ der Datei „index.html“ das gesamte Dokumentfenster ausfüllt.
Ö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).
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.
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“.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.
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).
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. Sie finden alle Farben für das Projekt in der Creative Cloud-Bibliothek, die Sie zu Beginn des Tutorials installiert haben.
Klicke auf das Farbfeld für die Property „color“ , um den Farbwähler zu öffnen.
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).
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).
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).
Klicken Sie im Bereich „Eigenschaften“ oben auf das Symbol für den Hintergrund, um zu den entsprechenden Properties zu gelangen.
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.
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).
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. Gehe wie folgt vor:
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“.
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.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.
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.
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 Live-Ansicht mittig ausgerichtet.
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).
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.
