Hallo!
In diesem Video geht es um das Layouten einer Web-Seite mithilfe von CSS.
Und zwar von dieser Seite.
Die grundlegenden HTML-Elemente sind bereits definiert, wie diese Navigationsliste, ein paar Überschriften und einige Bilder.
In diesem Video geht es nicht darum, wie man HTML-Text hinzufügt.
Es gibt ein anderes Video, das dieses Thema detailliert abdeckt.
Damit dieses Video interessant und nicht allzu lang wird, habe ich die ersten CSS-Layout-Elemente schon erstellt.
Als Ausgangspunkt.
Ich wechsle zu Dreamweaver und füge das vordefinierte CSS-Stylesheet zur Web-Seite hinzu, damit wir anfangen können.
Meine Datei habe ich bereits in Dreamweaver geöffnet.
Für dieses Tutorial werde ich nicht im Standard-Modus arbeiten, sondern im Modus „Entwickler“ (Developer).
Ich habe die Site außerdem in Dreamweaver definiert, zur Verwaltung der Projektdateien.
Sie müssen dasselbe tun, damit Sie mir hier folgen können.
Wählen Sie dazu „Site > Neue Site“ (Site > New Site).
In einem anderen Video wird die Definition von Sites erläutert, falls Sie dabei Hilfe benötigen.
Ich füge nun das CSS-Sheet hinzu.
Und zwar hier.
Das CSS-Sheet wird immer im HEAD-Abschnitt referenziert, irgendwo zwischen dem öffnenden HEAD-Tag und dem schließenden HEAD-Tag mit dem Schrägstrich.
Ungefähr hier.
Ich gebe einen Tabstopp ein, damit es besser aussieht.
Um die Syntax für das CSS-Sheet hinzuzufügen, die recht lang ist, gibt es einen simplen Trick in Dreamweaver.
Ich gebe „link“ ein und drücke die Tabulatortaste, nicht die Eingabetaste.
Die benötigte Syntax wird automatisch eingetragen, um das CSS-Stylesheet zu verknüpfen.
Ich habe ja bereits eines erstellt, und das hilft mir hier.
Wenn ich „s“ eingebe, wird das vorhandene CSS-Stylesheet vorgeschlagen und eingetragen.
Dreamweaver ist sehr hilfreich und sucht gleich nach Dateien, die infrage kommen.
Ich drücke die Eingabetaste und prüfe das Ergebnis im Browser.
Cool!
Die Seite hat sich im Vergleich zu vorher völlig verändert, aber die HTML5-Elemente sind dieselben.
Diese Liste war vorhin nur eine Aufzählung in blauer Schrift.
Dieser Text hier ist jetzt formatiert.
Weiter unten ist der Intro-Text – noch unformatiert.
Das ändere ich gleich.
Die Bilder wurden neu positioniert und skaliert.
Und hier sind die Social-Media-Icons.
Was bis jetzt hinzugefügt wurde, ist nur der Anfang.
Ich werde nun einige dieser CSS-Elemente anpassen und dann eigene Anweisungen erstellen.
Zurück zu Dreamweaver.
Ich befinde mich wieder im HTML-Code der Seite.
Das erkenne ich an der aktiven Ansicht „Quellcode“ (Source Code).
Die ersten Formatierungen werde ich für den Header vornehmen.
Anschließend formatiere ich das H1-Tag.
Das HEADER-Element ist ein strukturierendes Tag im HTML-Code, das in der HTML5-Sprache bereits vordefiniert ist und den Header-Bereich beschreibt, also den Kopf der Seite.
Er enthält meist Elemente wie das Logo, die Navigation etc.
Hier ist der Header im HTML-Code.
Um ihn zu formatieren und z.
B. eine Hintergrundfarbe hinzuzufügen oder die Höhe festzulegen, muss sein Name im CSS-Sheet exakt gleich geschrieben sein, damit die Formatierung wirksam wird.
Nach dem Header werde ich dieses H1-Element formatieren.
Das H1-Tag beschreibt die Überschrift oberster Ebene, also die Hauptüberschrift einer Seite.
Sie wird auch gleich formatiert.
Ich wechsle zum vorbereiteten CSS-Sheet, indem ich oben in der Dokumentleiste auf „styles-start.css“ klicke.
Die Namen sind exakt gleich, d. h., „header“ und „h1“ passen.
Zwischen den geschweiften Klammern stehen die CSS-Properties, die ich bereits angelegt habe.
Die möchte ich nun verändern.
Ich arbeite aktuell in der Code-Ansicht, möchte aber auch überprüfen können, wie meine Änderungen im Browser aussehen.
Dazu verwende ich die Echtzeitvorschau im Browser.
Sie befindet sich in Dreamweaver hier rechts unten.
In dieser Auswahl klicke ich auf „Google Chrome“.
So sieht die Seite, die ich in Dreamweaver offen habe, in Chrome aus.
Das Tolle an der Echtzeitvorschau im Browser ist, dass alle Änderungen in Dreamweaver automatisch im Browser umgesetzt werden.
Ich arbeite normalerweise mit zwei Monitoren und zeige dieses Fenster auf dem anderen Monitor an.
Für dieses Tutorial aber werde ich Dreamweaver öffnen und so positionieren, dass das Programm im Hintergrund zu sehen ist.
Zuerst möchte ich nun den Header anpassen.
Er nimmt nur ca. 50 % der Bildschirmbreite ein.
Hier ist das HEADER-Element mit einer Breite (width) von 50 %.
Die ändere ich in 100 exakt.
Jetzt wird der Header über die ganze Breite angezeigt.
Perfekt.
Nun möchte ich den oberen Rand ändern.
Die Property „padding“ definiert einen Abstand von 100 Pixel, den ich nicht haben will.
Ich setze ihn runter auf 0 Pixel.
Der Header springt nach oben.
Ich ändere den Wert von 0 in 1,5 und verwende „em“ als Maßeinheit.
Ein absolutes Maß wie Pixel funktioniert auch, aber „em“ ist ein relatives Maß, das sich an anderen Seitenelementen orientiert und die Anpassung für unterschiedliche Bildschirme erleichtert.
Zuletzt ändere ich die Property „position“, die noch auf „absolute“ gesetzt ist.
Die Einstellung „absolute“ bewirkt, dass beim Scrollen nach unten die absolut positionierte Kopfzeile oben bleibt und beim Scrollen nach oben verschwindet.
Der neueste Trend ist aber, den Header mit „fixed“ zu fixieren.
Beim Scrollen bleibt er oben fest verankert.
Nun werde ich diese Schrift per CSS formatieren.
Bisher habe ich im CSS-Code das Layout festgelegt, die Breite definiert und den Header fixiert.
Jetzt möchte ich mithilfe von CSS eine Schrift definieren, z.
B.
Schriftgröße und -farbe.
Hier in Dreamweaver sehen wir das H1-Element.
Die Property „color“ ändere ich in „#fff“, also Weiß.
Dreamweaver öffnet einen kleinen Farbwähler.
Ich kann jede Farbe wählen und mit der Eingabetaste bestätigen.
Ich bleibe aber bei „#fff“ für Weiß.
Die Property „text-transform“ setze ich auf „uppercase“.
Dazu gebe ich nur das Wort „up“ bzw. die Buchstaben U und P ein, und der Wert wird vorgeschlagen.
Ich drücke die Eingabetaste.
So spare ich Zeit und erhalte die korrekte Syntax.
Die Property „font-size“ ist auf 2 em festgelegt.
Den Wert erhöhe ich auf 8,5 em.
Für „letter-spacing“ gebe ich 0,85 em ein, damit die Laufweite der Buchstaben meinem Entwurf entspricht.
So also passt man vorhandenen CSS-Code an.
Jetzt werde ich neuen Code schreiben.
Und zwar für welches Element?
Für diesen Intro-Text hier.
Im Moment ist es nur reiner Text ohne Formatierung.
Zunächst muss ich seinen Namen herausfinden.
Ich wechsle zurück zum HTML-Code, indem ich auf „Quellcode“ (Source Code) klicke.
Und hier ist er.
Der Text hat den Klassennamen „intro“, also lege ich eine Anweisung für „intro“ an.
Ich wechsle zum CSS-Sheet.
Um eine Klasse zu erstellen, muss ich zuerst einen Punkt eingeben.
Das ist die Regel für Klassen.
Die Tags hier oben haben keinen Punkt.
So lassen sich Klassen und Tags im CSS-Stylesheet gut unterscheiden.
Ich nenne die Klasse „intro“.
Jeder Name ist erlaubt.
Leerzeichen gehen nicht.
Sie müssen Binde- oder Unterstriche verwenden, wenn ein Name aus mehreren Wörtern besteht.
Diese Klasse muss der Bezeichnung im HTML-Code entsprechen.
Die restliche Syntax ähnelt der für die Tags.
Ich füge eine geschweifte Klammer ein.
Dreamweaver setzt die zweite geschweifte Klammer automatisch.
Dann erstelle ich eine neue Zeile.
Jetzt definiere ich die Anweisung für die Klasse.
Alle Angaben zwischen den geschweiften Klammern notieren die CSS-Properties.
Zunächst bestimme ich die Position über „padding“.
Sobald ich mit der Eingabe von „padding“ beginne, wird mir die Property vorgeschlagen.
Ich übernehme sie mit der Eingabetaste.
Der Doppelpunkt wurde auch schon eingefügt.
Als Wert wähle ich 12 em für die obere Auffüllung.
Die Angaben funktionieren im Uhrzeigersinn.
Ich gebe also 12 em, dann 6 em, wieder 12 em für die untere und 6 em für die linke Auffüllung ein.
Wann immer Sie CSS-Properties definieren, setzen Sie am Ende ein Semikolon.
Überprüfen wir das im Browser.
Voilà!
Ich habe eigenen CSS-Code erstellt.
Ich habe einen passenden Klassennamen festgelegt und Auffüllungen hinzugefügt.
Mehr Abstand oben und unten, weniger links und rechts.
Ich könnte auch cleverer vorgehen.
Wenn ich nur die Werte für die obere und rechte Auffüllung eingebe, greift das CSS Box Model und nimmt an, dass ich diese Werte auch für die Auffüllung unten und links möchte.
Das sieht doch ganz gut aus.
Diesen neuen CSS-Code nennt man, wie gesagt, eine Klasse.
Nun möchte ich den eigentlichen Text formatieren.
Ich kehre zur Ansicht „Quellcode“ (Source Code) zurück.
Im HTML-Code sehen Sie hier oben meine P-Tags.
Wir haben die Klasse namens „intro“ formatiert.
Jetzt möchte ich den Text formatieren, der darin enthalten ist.
Ich möchte die Schrift ändern, die Farbe, Schriftgröße u. a.
Ich könnte im CSS-Stylesheet einfach nur das P-Tag formatieren, aber das P-Tag wird sehr häufig verwendet und ist auf vielen Seiten zu finden.
Wenn ich dieses erste P-Tag formatiere, werden alle P-Tags auf allen Seiten ebenfalls geändert.
Das möchte ich nicht.
Die Formatierung soll spezifischer sein.
Ich werde daher einen sogenannten „verbundenen Selektor“ verwenden.
Und los.
Ich möchte ein P-Tag formatieren, aber nur das P-Tag innerhalb der Klasse „intro“.
Wie soll es aussehen?
Sehen wir uns den Photoshop-Entwurf an.
Ich muss die Schriftart anpassen, die Farbe ändern und die Schriftgröße.
Zwischen den Zeilen brauche ich größere Abstände, und der Text erfordert eine größere Laufweite der Buchstaben.
Ich zeige Ihnen, wie Sie diese CSS-Properties definieren.
Es geht also um das P-Tag innerhalb der Klasse „intro“.
Das ist mein verbundener Selektor.
Ich füge die geschweiften Klammern hinzu und definiere zunächst die Schrift.
Schon bei der Eingabe des Buchstaben „f“ wird „font-family“ vorgeschlagen.
Das passt.
Ich wähle diese Schrift und schließe die CSS-Property mit einem Semikolon ab.
Im Browser sieht man die neue Schrift schon.
Machen wir mit der Farbe weiter.
Ich muss nur „color“ eingeben.
Das Programm weiß, dass das für die Schrift gilt.
Ich gebe ein Hash-Zeichen ein.
Der Farbwähler wäre eine Option, aber ich weiß, welchen Farbwert ich definieren muss: „#343144“.
Und ich beende die Anweisung mit einem Semikolon.
Die Property „text-align“ steht direkt hier oben.
Ich wähle den Wert „center“ und schließe mit einem Semikolon ab.
Dann wieder die Property „text-transform“ – ich wähle wieder „uppercase“.
Wie Sie sehen, mache ich alles mit dem Cursor.
Ich muss kaum tippen, denn Dreamweaver bietet mir ständig viele Optionen an und nimmt mir die Schreibarbeit ab.
Ich kann einfach mit den Pfeiltasten durch die Liste scrollen, „uppercase“ auswählen und die Eingabetaste drücken.
Wie immer ganz wichtig: das Semikolon am Ende.
Als Nächstes „font-size“.
Als Maßeinheit für die Schriftgröße verwende ich wieder „em“.
Ich gebe 2,5 em ein – und ein Semikolon.
Was noch?
Die Property „line-height“.
Die setze ich auf 1,8 em.
Dann noch die Property „letter-spacing“ mit dem Wert 0,325 em.
Fertig!
Werfen wir einen Blick in den Browser.
Sieht gut aus!
Das Tolle daran ist, dass der verbundene Selektor nur das P-Tag im Intro-Abschnitt formatiert – sonst nichts.
Allmählich dürften Sie einen Überblick über die Arbeit mit CSS bekommen haben.
Wir haben vorhandenen Code angepasst und eine einfache Klasse neu erstellt.
Sie begann mit einem Punkt.
Wir haben einen verbundenen Selektor erstellt, was schon fortgeschrittenes Niveau und dennoch einfach ist.
Wir haben also eigenen CSS-Code für diese Seite erstellt.
Wie Sie sehen, ist hier einiges an CSS-Code vorhanden, den ich für das Projekt schon erstellt hatte, damit wir nicht von Grund auf neu beginnen müssen.
Ich zeige Ihnen kurz den vorhandenen Code in Dreamweaver.
Daran haben wir gerade gearbeitet.
Weiter unten sehen Sie aber noch weitere Einstellungen für die Website.
Da ist einiges definiert.
Wenn Sie eine bestehende Website überarbeiten sollen und sich nicht sicher sind, was einzelne CSS-Properties bedeuten, z.
B. „display: block“, machen Sie einen Rechtsklick darauf.
Sie können dann „Schnelldokumente“ (Quick Docs) aufrufen.
Diese neue Dreamweaver-Funktion erklärt dann z.
B. das „display“-Element und die damit verwendbaren Werte.
„Display“ und „float“ sind fundamentale Konzepte von Layouts mit CSS.
Es ist sehr wichtig, dass Sie sie verstehen.
Falls Sie als Einsteiger unsicher sind, was einige dieser CSS-Properties bewirken, rufen Sie einfach die Schnelldokumente auf.
Einer meiner Lieblinge unter den neuen Funktionen ist die Schnellbearbeitung.
Ich wechsle zur Ansicht „Quellcode“ (Source Code) und navigiere zum Footer.
In der Browser-Vorschau ist er links ausgerichtet.
Im Entwurf ist ein Teil links und ein Teil rechts ausgerichtet.
Dazu werde ich jetzt die Property „float“ im Modus „Schnellbearbeitung“ erstellen.
Hier ist die Klasse „footer-credit“ mit dem Text, der rechtsbündig sein soll: „Website design by“.
Ich könnte die Notation wie vorher oben beim „intro“-Text anlegen.
Für den „intro“-Abschnitt hatte ich einen Punkt und den Klassennamen „intro“ angegeben und dann alle Properties festgelegt.
Es geht aber auch schneller.
Ich klicke mit der rechten Maustaste auf „footer-credit“ und wähle „Schnellbearbeitung“ (Quick Edit) aus.
Ich erhalte die Meldung, dass noch keine Anweisung dafür vorhanden ist und ob ich eine neue Regel anlegen möchte.
Ja, das möchte ich.
Das hier ist eigentlich mein CSS-Sheet.
Das Programm bietet also eine kleine Abkürzung.
Punkt und „footer-credit“ sowie die geschweiften Klammern sind bereits eingetragen worden.
Sehr praktisch.
Das ist die Schnellbearbeitung in Dreamweaver.
Ich möchte den Text rechtsbündig ausrichten und verwende dafür die Property „float“ mit dem Wert „right“.
Dreamweaver fügt alles für mich ein, nur an das Semikolon muss ich denken.
Und wenn ich schon dabei bin, setze ich noch die Property „width“ auf 40 %.
Wann immer Sie mit „float“ arbeiten und den Wert „right“ verwenden, müssen Sie meist auch die Property „position: relative“ setzen.
Die relative Position im Container zeigt der Browser jetzt auch brav an.
Klasse!
Gut zu wissen, wie das funktioniert.
Und wie die Schnellbearbeitung funktioniert.
In der Ansicht „Quellcode“ sieht man den HTML-Code, kann aber direkt am CSS-Stylesheet arbeiten.
Wenn ich zum CSS-Stylesheet wechsle, ist hier unten tatsächlich die neue Klasse „footer-credit“.
Ich verwende die Schnellbearbeitung sehr oft, damit ich nicht dauernd zwischen den Dateien umschalten muss.
Sehen wir uns das Ergebnis im Browser an.
Sehr gut.
Sie haben die Property „float“ kennengelernt, wissen, wie man die Schnellbearbeitung verwendet, und Sie haben die Formatierung per CSS sowohl für den Footer als auch für den Kopfbereich mit der Navigation gesehen.
Den haben wir oben fixiert und mit Auffüllungen versehen.
Hier oben haben wir die H1-Tags definiert.
Beim Absatz hier unten haben wir den Text per CSS formatiert.
Lassen Sie mich nun zum Schluss das CSS-Stylesheet komplett entfernen, sodass wir den Anfangszustand zu Beginn des Videos sehen, als nur der HTML-Code vorhanden war.
Im HTML-Code suche ich die Referenz zum Stylesheet, markiere und lösche sie.
Im Browser ist wieder alles auf Anfang.
Ist doch erstaunlich, was mit CSS alles möglich ist, oder?
Ich habe den HTML-Code während des Videos nicht ein einziges Mal geändert.
Er ist genau so wie am Anfang.
Die Navigation, die Überschriften, die Bilder ...
Wir konnten aber erhebliche Veränderungen über unser CSS-Stylesheet realisieren.
So weit diese kurze Einführung in CSS.
Sehen Sie sich auch die anderen Videos an, die das Thema ausführlicher behandeln.
Liebe Zuschauer, nutzen Sie Ihre neuen CSS-Kenntnisse nun zur Erstellung Ihrer eigenen, beeindruckenden Web-Seiten!
