Hallo, alle willkommen zurück.
Es ist Zeit für uns, mit dem Programmieren zu beginnen.
Eines der Dinge, die ich in den letzten paar Jahren des Unterrichts bemerkt habe
, ist, dass sich die Schüler in der Art und Weise unterscheiden, wie sie
mit verschiedenen Arten von Codierklassen umgehen.
Einige werden sich an den Computer setzen, nie das Buch lesen und einfach hacken,
hacken und hacken.
Einige von euch sind vielleicht ein bisschen schuldig, alle Lesungen zu machen, alle
Vorträge anzuhören, aber nie wirklich etwas auszuprobieren, über das wir gesprochen haben.
Dafür sind diese Hausaufgaben.
Eine Chance für Sie, endlich etwas von diesem Code abzulegen und zu
sehen, was passiert, wenn Sie versuchen, Styling auf Ihren HTML anzuwenden.
Das Ziel dieser Hausaufgabe ist also, dass Sie mir zeigen, dass Sie
eine CSS-Datei schreiben können, die drei verschiedene HTML-Dateien formatieren kann.
Ich werde Ihnen ein paar Beispiele von unserem Vorher und Nachher für
diesen Auftrag zeigen.
Ich habe die Links hier auf die Seite gestellt, aber
es wird wirklich viel klarer sein, wenn ich dir die Hausaufgaben in Aktion zeige.
Lassen Sie uns einen Blick darauf werfen.
Wenn wir anfangen,
werde ich Ihnen drei HTML-Dateien geben, die wirklich nicht gut gestylt sind.
Sie beginnen,
sie haben eine Navigation, sie haben drei sehr große Bilder, einige sind kleiner.
Und dann haben sie den Inhalt.
Alle drei Seiten, die Sie sich ansehen, Zuhause, Teams und Geschichte haben unterschiedliche Inhalte.
Was ich möchte, dass Sie Ihre eigenen CSS-Regeln schreiben, die
diese Art von Seiten annehmen und sie in etwas verwandeln, das so aussieht.
Nun, ich weiß, dass das kein großer Sprung
ist, aber genau so möchte ich, dass du mit dem Programmieren beginnst.
Ich möchte, dass Sie kleine, inkrementelle Änderungen vornehmen, die Sie von etwas
, das schwer zu lesen ist, zu etwas führen können, das viel einfacher zu lesen ist.
Lassen Sie uns also voran gehen und Schritt durch die verschiedenen Dinge, die Sie
ändern müssen, um diesen separaten Look zu erreichen.
Das Wichtigste zu verstehen ist, dass Sie den HTML-Code in Ruhe lassen müssen.
Ich möchte nicht, dass Sie es überhaupt ändern,
stattdessen möchte ich nur, dass Sie Dinge stylen und Dinge innerhalb des Stylesheets bearbeiten.
Und die Dinge, die Sie hinzufügen müssen, sind Stile für
die Kopfzeile, die Überschriften, den Abschnitt, die Links und die Bilder.
Also, lassen Sie mich durchmachen und Ihnen genau zeigen, was Sie sehen müssen.
Für Ihren Header ist es ziemlich unkompliziert.
Ich möchte, dass du reingehst und ich möchte, dass du eine Hintergrundfarbe hinzufügst.
Für Ihre Überschriften, sowohl h1 als auch h2, möchte ich, dass Sie die Schriftfarbe ändern.
Denken Sie nun daran, dies unterscheidet sich von der Hintergrundfarbe.
Es ist die Farbe, in der der Text angezeigt wird.
Als nächstes möchte ich, dass Sie sicherstellen, dass alle Überschriften in Großbuchstaben angezeigt werden.
Also, wenn du zurückgehst, werfen wir einen kurzen Blick.
Sie können sehen, dass Ihr Kopf und ultimative Frisbee in Großbuchstaben sind,
während in der ursprünglichen HTML-Version, sie sind in Kleinbuchstaben.
Also möchte ich, dass Sie CSS verwenden, um diese Änderung vorzunehmen.
Das nächste, was ich will, ist nur für
die h1-Überschrift, die ich möchte, dass Sie den Text zentrieren.
Als nächstes machen Sie eine schnelle Änderung in den Abschnitt Teil Ihres HTML.
Ich möchte, dass Sie den verschiedenen Abschnitt so gestalten, dass
er eine andere Hintergrundfarbe als die anderen Elemente auf Ihrer Seite hat.
Als nächstes werfen wir einen Blick auf die Links.
Die Änderungen, die Sie hier vornehmen werden, sind sehr subtil.
Sie sind nicht sehr offensichtlich, wenn ich Ihnen nicht ausdrücklich gesagt habe, wonach
Sie suchen.
Und ich möchte, dass du die Hintergrundfarbe und
die Schriftfarbe für deine Links änderst.
Nachdem Sie das getan haben, gehen Sie hinein und zentrieren Sie den Text,
ähnlich der Art, wie Sie die Texte für die h1-Überschriften in die Mitte gehen.
Schließlich ist das letzte, was unsere HTML-Seite anfängliches Beispiel wirklich durcheinander bringt,
diese riesigen Bilder, die nur im Weg stehen.
Also für jetzt, da wir nicht über den besten Weg zum Stylen von Bildern gesprochen haben,
möchte ich, dass Sie sie einfach von der Seite entfernen.
Aber denken Sie daran, dies könnte der schwierigste Teil der gesamten Aufgabe sein, weil ich
nicht möchte, dass Sie den HTML-Code ändern.
Ich will, dass diese Bilder da sind.
Ich möchte nur, dass Sie CSS3 verwenden, um sie von der Seite zu entfernen.
Ich hoffe also zwischen dem Betrachten dieses Beispiels und dem Online-Blick und dem Betrachten
meiner Vor- und Nachher-Schüsse, dass Sie diesen Hausauftrag erledigen können.
Wenn du fertig bist, werden wir Peer-Grading verwenden.
Wenn wir das machen, werden die Noten im Grunde darauf basieren, wie gut du in der Lage warst, das zu
beenden, was wir getan haben.
Wenn ich über Ästhetik spreche,
ich spreche von haben Sie ziemlich Hintergrundfarben und Schriftfarben gewählt. Das ist
uns nicht wirklich wichtig.
Das ist unsere erste Hausaufgabe.
Ich will wirklich nur, dass du nur Erfolg fühlst. Es
gelten jedoch angemessene Standards.
Und was ich damit meine, ist, dass Sie keine Farbnamen verwenden, hexadezimal oder
RGB verwenden und nicht alle Ihre Regeln in einer Zeile setzen.
Stellen Sie sicher, dass Ihr CSS-Stylesheet leicht zu lesen ist.
Abgesehen von den Stilen, die ich aufgelistet habe, ändern Sie bitte nicht andere Dinge für jetzt.
Es macht es viel schwieriger zu bewerten.
Aber mach dir keine Sorgen.
Während wir diesen Kurs durchlaufen, haben Sie die Möglichkeit, Ihre eigenen einzigartigen
Looks als Ihre Styling-Elemente zu setzen.
Denn im Moment alles, was ich sagen kann, ist viel Glück und
stellen Sie sicher, dass Sie in diesen Diskussionsforen gehen, wenn Sie irgendwelche Fragen haben.