Hallo, alle.
Willkommen zurück, es ist Zeit für ein weiteres Hausaufgaben-Beispiel.
Was wir diese Woche tun werden, ist,
den Seiten, die Sie letzte Woche angefangen haben, noch mehr Stil hinzuzufügen.
Also wieder das Ziel dieser Aufgabe ist, dass ich
nicht möchte, dass Sie den HTML-Code überhaupt ändern.
Ich möchte, dass Sie entweder ein neues Stylesheet erstellen oder das Stylesheet der letzten Woche aktualisieren, damit
es für drei verschiedene HTML-Dateien verwendet werden kann.
Wenn Sie beginnen, ist es sehr wichtig, dass Sie die erste
Peer-Grad-Zuweisung abgeschlossen haben.
Ich gehe davon aus, dass du es getan hast und so,
wenn ich in diesem Video über die verschiedenen Änderungen spreche, die ich von dir machen möchte.
Sie können entweder die vorherige Hausaufgabe ändern, oder Sie
können wirklich ganz von Grund auf neu beginnen, wenn Sie mit Ihrer früheren Arbeit nicht zufrieden waren.
Lassen Sie uns also einen Blick auf das Vorher und Nachher für
diese Aufgabe werfen, die ich möchte, dass Sie versuchen zu erreichen.
Das war unsere Seite, als wir anfingen.
In Hausaufgaben eins hast du es von hier nach hier mitgenommen.
Immer noch sehr einfach, aber nur viel sauberer, weil wir einige Hintergrundfarbe,
einige Farbschriftarten hinzugefügt haben und wir diese Bilder losgeworden sind.
Was ich möchte, dass Sie in dieser Woche arbeiten, ist wirklich Dinge zu ändern und
es wirklich gestylt zu machen, anstatt nur sauber.
Werfen wir einen Blick darauf, woran ich möchte, dass du in Woche drei arbeitest.
Wie Sie sehen können, sieht dies wie eine völlig andere Seite aus.
Die Bilder sind wieder in, ich habe ein Hintergrundbild für eine Navigationsleiste hinzugefügt und
etwas, das nicht unbedingt leicht zu sehen ist, wenn Sie nur Papier betrachten,
ich habe eine neue Klasse hinzugefügt, die hervorhebt, auf welcher Seite wir gerade sind.
Wenn Sie also schauen,
wird der Home-Link hervorgehoben, weil wir auf der Homepage sind.
Wenn ich auf Geschichte klicke, ist der Verlaufslink, wie es,
weil wir auf der Verlaufsseite sind und dann auf die gleiche Weise, die Teamseite.
Das ist also, was wir die aktuelle Seite nennen, die wir betrachten.
Und so wirst du dies so gestalten, dass deine Zuschauer wissen lassen,
wo sie auf dieser Seite sind.
Also werde ich voran gehen und über jedes der Tags sprechen, auf die
du schauen sollst, um diese Aufgabe abzuschließen.
Also, wenn Sie anfangen, werden Sie diesen HTML-Code in Ruhe lassen,
und Sie werden entweder ein neues Stylesheet erstellen, oder Sie werden fortfahren und den,
den Sie zuvor verwendet haben, aktualisieren.
Was Sie benötigen, um speziell zu arbeiten, sind diese Elemente.
Sie müssen am Körper arbeiten, dem Header, dem h, den Links, und
dann habe ich drei Klassen namens aktiv, links und rechts, und schließlich werden Sie
diese Bilder wieder einfügen wollen, die auf der linken Seite der Seite waren.
Lassen Sie uns zuerst über die Leiche sprechen.
Standardmäßig setzen Ihre Browser eine Art Padding und Marge ein, aber ich möchte,
dass Sie das überschreiben und etwas einfügen, das in allen Browsern konsistent aussieht.
Sie können auch fühlen sich frei, um die Größe des Textes anzupassen, aber das ist nicht erforderlich.
Ich weiß, dass ich das getan habe, weil ich den Text nur ein bisschen zu klein fand.
Als nächstes gehen Sie zur Kopfzeile.
Der erste Schritt besteht darin, die Hintergrundfarbe zu ändern und zu sehen, ob Sie das zum Laufen bringen können.
Als Nächstes möchten Sie ein Hintergrundbild hinzufügen.
Und um ehrlich zu
sein, das wird der schwierigste Teil des gesamten Hausauftrags sein.
Denn manchmal ist es nicht immer klar, wo Sie die Bilder finden können und
wo Sie nicht können, also
stellen Sie sicher, dass Sie einige der anderen Ressourcen einchecken, wenn Sie an diesem Teil hängen bleiben.
Als nächstes möchte ich,
dass Sie die Schriftfarbe ändern und diese Schriftgröße ein wenig mehr erhöhen.
Jetzt ist hier wieder etwas Neues, das du vorher nicht gelernt hast.
Ich möchte, dass Sie die Links formatieren, die sich im Navigationsbereich befinden, aber
nur diese Links.
Nicht alle Links auf der Seite.
Sie müssen mein Beispiel nicht genau neu erstellen, aber
ich möchte, dass Ihre Links schön auseinander liegen,
sie sollten eine Hintergrundfarbe, abgerundete Ränder und keine Unterstreichung haben.
Lass sie schön aussehen.
Als nächstes stellen Sie sicher, dass Sie die aktive Klasse gesehen haben, über die ich gesprochen habe Auf
diese Weise können die Leute wissen, auf welche Seite sie schauen,
ohne auf die URL schauen zu müssen.
Eine andere Sache, an der Sie arbeiten müssen, ist diese Idee, dass unsere Seite
eine linke und eine richtige Klasse dazu hat.
Jetzt, um Dinge nebeneinander zu gehen, müssen Sie sich mit dem
Display verwirren und möglicherweise schweben, je nachdem, wie Sie dies implementieren.
Stellen Sie also sicher, dass Sie sie so ändern, dass sie nebeneinander stehen, und
ändern Sie diese Hintergrundfarbe für die linke Klasse. Das
haben Sie vielleicht schon in den vorherigen Hausaufgaben gemacht, aber
wenn Sie nicht dafür gesorgt haben, dass es jetzt erledigt wird.
Schließlich wollen wir auf diese Bilder zurückkommen.
Zuerst müssen Sie die Bilder wieder hineinlegen, denn
hoffentlich in Hausaufgaben 1, stellen Sie ihre Anzeige auf keine, was bedeutet, dass sie weg sind.
Also lege sie wieder in etwas, so dass sie sich übereinander stapeln. Stellen
Sie als Nächstes sicher, dass sie innerhalb dieser linken Klasse zentriert sind.
Ich will nicht, dass die Bilder bis zur einen oder anderen Seite sind.
Und während Sie sie zentrieren, stellen Sie sicher, dass Sie etwas Platz zwischen ihnen,
oben und unten, auch.
Wieder einmal werden wir den Peer Grader verwenden, um Ihre Arbeit zu bewerten.
Im Gegensatz zu früheren Versionen basieren die Noten auf dem Grad der Fertigstellung und
etwas mehr davon, wie Ihre Seite aussieht.
Wir wollen sicherstellen, dass Sie nicht Dinge setzen, die schwer zu lesen sind oder
die wirklich irgendwie zusammengequetscht sind.
Wenn Sie also die Chance haben, stellen Sie
sicher, dass Sie Ihre Seite durch einige verschiedene Barrierefreiheits-Evaluatoren ausführen.
Also gab es Welle und es gibt Gurtband.
Es gibt verschiedene Orte, an denen Sie gehen können.
Aber das ist der wirklich schöne Teil über Peer-Grading, Ihre
Kollegen können Ihnen sagen, ob die Dinge nicht wirklich den besten Farbkontrast haben oder nicht.
Auch jetzt werden die richtigen Standards gelten.
Und das ist besonders wichtig, wenn wir anfangen, über fortgeschrittene Selektoren zu sprechen.
Ich fand, dass manchmal Leute alles werfen, was sie sich vorstellen können,
in ihr Stylesheet, und sie hoffen einfach, hoffen, dass es funktioniert.
Wir werden Punkte abnehmen, wenn Sie versuchen, das zu tun.
Das letzte, was ich erwähnen möchte, ist, dass
ich weiß, dass Leute auf verschiedenen Geräten codieren.
Wenn Sie also Ihren Code einreichen, stellen Sie sicher, dass Sie sich frei fühlen, zu sagen
, dass mein Code nur auf einem großen Bildschirm oder auf einem Telefon oder so gut aussieht.
Die Pflege der verschiedenen Bildschirmgrößen ist etwas, das Responsive Design genannt wird
, das wir in diesem speziellen Kurs nicht behandeln.
Also erwarte ich nicht, dass Sie eine Website erstellen, die auf jeder Plattform gut aussieht.
Was ich erwarte, dass Sie wirklich den Code besitzen, den Sie dieses Mal einreichen.
Stellen Sie sicher, dass Sie genau wissen, was jede Zeile tut, und
fühlen Sie sich wohl, wenn Sie kleine Teile ändern und fühlen, als würde Ihre Seite nicht brechen.
Wenn Sie Probleme haben, stellen Sie sicher, dass Sie diese Diskussionsforen treffen.
Sie haben Klassenkameraden waren wirklich hilfreich, und
ich möchte diese Kommunikation wirklich fördern.
Viel Glück.