(lebhafte Musik) Willkommen zum KnowledgeCity-Kurs auf Intermediate Cascading Style Sheets. Ich heiße Cliff Brozo. Ich bin dein Professor und heute werden wir das Layout von Seiten untersuchen mit Cascading Style Sheets. Wir werden uns ansehen, wie man einige klebrige Überschriften macht. Wir werden herausfinden, wie Sie eine Navigationsleiste erstellen. Wir werden über verschiedene Bereiche sprechen der Seite, das Inhaltsfenster, die Seiten, das Hauptfenster, Fußzeilen, die Überschriften. Füge all das Zeug auf der Seite zusammen. Wir werden über Artikel sprechen und wir werden sehen, wie die gesamte Seite formatiert wird damit es von seiner besten Seite aussehen kann. Lass uns anfangen. Das erste, worauf wir hinweisen sollten ist, dass wir Software namens Atom verwenden werden, ATOM, und Sie können es finden und lade es auf atom.io herunter. Der Grund, warum wir Atom verwenden ist es nicht wirklich wichtig ob Sie einen Windows-Computer haben oder eine Apple-Maschine, Atom funktioniert auf beiden und es wird uns erlauben um Code und Ergebnisse zu sehen zur gleichen Zeit, weil es eine Live-Vorschau-Funktion hat. Also, was du siehst ist eine Webseite, die wir erstellt haben um die Lektionen zu veranschaulichen dass wir in dieser Sitzung lernen werden. Zuerst werden wir über klebrige Header sprechen. Und durch klebrige Überschriften, Wir meinen einen Header, der sich beim Scrollen nicht bewegt. Also, wenn ich nach unten scrolle, Der Bildschirminhalt ändert sich aber der Header bleibt dort, wo er sein soll. Was uns das erlaubt Geben Sie dem Benutzer eine Navigation das bleibt auf der Seite egal wo sie auf der Seite suchen. Die andere Sache, die wir uns gerade angesehen haben ist die Navigationsleiste und es gibt eine Menge verschiedener Möglichkeiten Navigation zu tun. In diesem Fall haben wir nur einige Farben getauscht wenn der Benutzer den Mauszeiger bewegt über diesen bestimmten Gegenstand. Werfen wir einen Blick auf den Code das schafft diese Seite. Der HTML-Code ist ziemlich einfach. Ich habe einen Link zu meinem Stylesheet das ist in einem CSS-Ordner. Dann fange ich mit meinem Körper an und ich erstelle einen Header-Bereich das enthält eine Abteilung das regelt wie der klebrige Header wird schauen und ich erstelle eine Klasse namens stick_top. Und regelt auch den Navigationsbereich. Stick_top ist also etwas dass wir innerhalb unseres CSS-Programms deklarieren und wir werden uns das gleich ansehen. Aber deshalb, wenn wir den Code Sticky Headers schreiben, Wir sehen den blauen Text hier. Wir können sehen, dass es einige Unterstreichungen gibt. Wir haben einen orangefarbenen Hintergrund. All diese Dinge werden in der CSS-Datei behandelt. Während wir die Seite nach unten gehen, Wir kommen zu unserer Hauptabteilung und der MAIN-Abschnitt enthält alle des Inhalts, den wir setzen werden auf der Seite. Und wieder erkläre ich eine Klasse in CSS namens main_content Das formatiert diesen bestimmten Bereich. Ich beginne mit einem H1. Das bringt nur eine Überschrift auf die Seite, gefolgt von einem Textabschnitt das ist hoffentlich etwas interessant zu lesen. Dann erstelle ich etwas, das man beiseite nennt und wenn Sie noch nie beiseite gelegt haben, Sie sind ein schöner Weg um Ihre Aufmerksamkeit auf einen Bereich des Bildschirms zu lenken. Jetzt habe ich das beiseite formatiert eine schöne grüne Leiste enthalten das hat eine Überblendung. Ich habe den Text kursiv geschrieben und ich habe die Breite eingestellt, und wieder werden wir sehen, wie das im CSS-Code gemacht wird. Dann fahre ich mit meinem Thema fort und über einen anderen Absatz sprechen und dann komme ich zu etwas, das man Artikel nennt wo der Text angezeigt wird in einem speziell formatierten Bereich. In diesem Fall schaue ich mir Baseball-Ergebnisse an. Die Informationen am Ende dieses Artikels ist nur eine Reihe von H1 und H2 und was Sie hier sehen, ist der Unicode zum Drucken eines kleinen Baseballs. Wir gehen die Seite weiter und wir kommen zur Fußzeile. In der Fußzeile habe ich einige E-Mails mit Informationen eingegeben das schwebt genauso dass die Navigationsleisten tun und in diesem speziellen Fall Ich habe wieder Unicode verwendet. Das erste Mal, dass ich einen kleinen, schnellen Umschlag bekomme. Und ich weiß, dass Umschläge nicht die E-Mail-Mode sind aber die Idee ist, dass wir eine Art Post senden. Und dann habe ich einen weiteren Link für ein Telefon gesetzt und ja, ich habe das & Telefon benutzt, welches eine benannte Unicode-Funktion hat das gibt mir ein schwarzes Telefon das wird sich wieder in weiß ändern. Schließlich habe ich einen Copyright-Hinweis eingefügt mit dem © und ich werde das kleine c dort bekommen. Und ich schließe meine HTML-Tags in der gleichen Reihenfolge, in der sie geöffnet waren. Schauen wir uns also das CSS an das geht mit dieser speziellen Seite einher. Was ich für dich getan habe Ich habe fast jede einzelne Zeile kommentiert von CSS, damit Sie wissen, was die Zeile tut. Zuerst stelle ich die Codierung ein und die Formatierung für drei grundlegende HTML-Tags, das Body-Tag, das in Zeile eins beginnt, die Navigation, die in Zeile sechs beginnt und die horizontale Regel, die in Zeile 12 beginnt. Für den Körper setze ich den gesamten Körper zu einer Schrift, die etwas skurril ist und wenn aus irgendeinem Grund Comic Sans MS nicht verfügbar ist auf dem PC des Benutzers, Ich werde jede serifenlose Schrift nehmen und wieder haben wir vor langer Zeit etwas über Serifen gelernt in der Anfängerstunde. Ich benutze MidnightBlue als Farbe und ich verwende gerne benannte Farben, wann immer ich kann. Wenn es sich um eine Hexadezimalzahl handelt, Die Leute müssen dann die Farbe nachschlagen. Was Sie auch bemerken werden, ist, dass ich mir die Zeit genommen habe um meinen Code auszurichten und ich stellte alle meine Doppelpunkte auf wo ich sie schön und sauber aussehen lassen konnte. Im Körper alles was ich tun musste Diese auszurichten ist Platz frei, so dass meine Doppelpunkte ausgerichtet sind und dann etwas mehr Platz so dass meine Semikolons ausgerichtet sind. Der Punkt, dies zu tun ist das, wenn der Code nicht funktioniert, und es kann Zeiten geben, in denen Sie irgendwo einen Fehler gemacht haben auf dem Weg und Ihren Code läuft nicht so, wie Sie es erwarten, Es ist viel einfacher, das Problem zu lösen wenn Sie gut formatierten Code betrachten. Und wenn Sie alle Ihre Doppelpunkte ausgerichtet halten können und Sie können alle Ihre Semikolons ausgerichtet halten, Sie werden eine viel glücklichere Person sein.
