Mit Premiere Pro und Dreamweaver 2017 eine Website mit Hintergrundvideo erstellen

1. 01 Einführung Video: Hallo, mein Name ist Dan, und in diesem Kurs werden wir ein Video erstellen, dann werden wir eine Website erstellen und ein Video als Hintergrund hinzufügen. Es sieht wirklich schick aus, aber es ist ziemlich einfach zu tun. Ich habe diesen Kurs für Anfänger gebaut. Es gibt keine Notwendigkeit zu wissen, wie man kodiert oder mit Video arbeitet, ich beginne direkt bei den Super-Basics. Dies könnte völlig Ihre allererste Website überhaupt sein. Es würde eine ziemlich genial erste Website machen. Wir werden den gesamten Prozess durchlaufen. Ich zeige Ihnen, wie Sie ein Video finden, wir gehen durch, wie Sie in Premiere Pro bearbeiten. Wir werden coole Videoeffekte wie Unschärfen, Tönungen und Übergänge machen. Ich zeige Ihnen, wie Sie das Video exportieren, damit Sie die Dateigröße super klein erhalten können. Sobald wir unser Video erstellt haben, werden wir gemeinsam eine grundlegende Website erstellen und unser Video cool und vollbildlich aussehen lassen. Wir werden auch eine zweite Option mit den Video-Picks durch eine kleine spezifische Box auf Entwicklern erstellen. Ich helfe Ihnen auch gerne. Ich bin ziemlich praktisch mit der Beantwortung der Kommentare, die auf den verschiedenen Seiten sind. Strecken Sie aus, ich gebe Ihnen eine Hand. Es gibt auch einen Spickzettel, den Sie ausdrucken können, weitermachen, und wenn Sie ein Lehrer sind, gibt es auch ein paar Lehrmittel zur Verfügung. Das Beste daran? Ist es eigentlich nicht so schwer, aber das Endergebnis ist ziemlich beeindruckend. Also, wie wär's damit? Ich, du und ein paar Videos, und wir machen zusammen ein bisschen Internetzauber. Ja, aber ich glaube, ich sagte cool und genial über 100 Mal in diesem Intro, das bekommt eine neue Platte. 2. 02 Ressourcen und was im Kurs behandelt wird: Hi, da. Reden wir über die Sache, die wir herstellen, und über die Ressourcen, die ich habe. Zunächst ist, was wir machen ist, dass es ein Video-Hintergrund mit Text und Bildern sein wird , im Grunde eine ganze Website über der Spitze. Es wird nicht wie diese kleinen eingebetteten Videos wie YouTube oder Udemy mit Play-Buttons und solchen Dingen als Teil einer Website sein , es ist definitiv wie ein abstrakter Hintergrund, wie ein großer Effekt im Hintergrund und auf der Website über die Oberseite. Wir werden auch das eigentliche Video machen, anstatt nur zu überspringen, um die Website zu machen, wir zeigen Ihnen, wie Sie wirklich dieses Video schön und klein bearbeiten, beheben, all das Zeug, und Premiere Pro. Die gleichen Techniken funktionieren in After Effects, aber wir werden Premiere Pro in dieser Version verwenden, also tun wir das und ich gehe einfach zum Website-Ende. Jetzt gibt es Übungsdateien, so dass Sie mitspielen können. Es gibt einen Link auf dieser Seite, Sie können sie herunterladen und zusammen mit den Videos spielen. Es gibt auch etwas, das die fertigen Dateien genannt wird. Es bedeutet nur, wenn ich zum Ende jedes Videos komme, gibt es ungefähr 15 ungerade in dieser Serie, aber am Ende des Videos, was ich tun werde, ist, ich werde mein Projekt speichern, ich werde Code, dass ich schreiben will, so dass Wenn Sie Probleme haben, mithalten zu wollen oder etwas nicht so funktioniert wie meine, können Sie diese fertige Datei herunterladen und einfach Ihre gegen meine überprüfen, und mal sehen, wo Sie vielleicht falsch gelaufen sind, also wird es eine Link auch auf dieser Seite. Wenn Sie fertig sind, könnten Sie Ihr Projekt posten? Nur auf einem Link irgendwo auf der Seite, eine Möglichkeit, mit mir in Kontakt zu treten, oder Screenshots. Es muss keine vollständige Arbeitsstelle sein. Ich will nur sehen, was du getan hast. Ich habe erwähnt, dass Sie wirklich stolz darauf sein werden, denn wenn Sie neu sind, ist es viel schwieriger, aber ich sehe es gerne als Lehrer. Ich sehe gerne, was Sie getan haben und es ist gut für andere Leute zu sehen, wie Sie es gemacht haben und sich an den Kurs anzupassen, also posten Sie Ihre Projekte. Die andere Sache, die ich wirklich möchte, ist, mir eine Rezension zu geben. Es ist ein bisschen früh im Video, mir zu sagen, geben Sie mir eine Rezension, aber je nach verschiedenen Seiten, werden sie früh, manchmal spät am Ende, über das Angebot einer Rezension. Nur damit Sie es wissen, diese Bewertungen sind, wie sie den Erfolg eines Kurses messen, Sie könnten bis zum Ende kommen, viele Leute kommen zum Ende und oder besser gesagt [unhörbar] überprüfe ich lieber, und das ist auch in Ordnung. Aber wenn Sie eine Bewertung schreiben, ehrlich, ich will nichts über Ehrlichkeit, aber diese Art von Dingen half meinem Ranking und mein Kurs könnte ein wenig tun und mir ein wenig mehr Einnahmen für mich als Lehrer bringen. In diesem Kurs habe ich auch einen Spickzettel gemacht. Es wird eine Video-Version und eine druckbare PDF-Version geben. Es wird auch einen Link auf der Seite geben, diese Spickzettel. So können Sie losgehen und ausdrucken und neben Ihren Computer kleben, nur so dass Sie, wenn Sie neu sind, sich an Dinge gewöhnen, diese Dinge auch teilen und sie zum Teilen bringen können. Also posten Sie sie und teilen Sie sie, wenn Sie sie mögen. Letztes bisschen ist, wenn Sie ein Lehrer sind, beobachten dies, um es zu unterrichten, Sie haben eine Klasse morgen und Sie müssen Video-Hintergründe unterrichten, Ich habe Lehrer-Ressourcen Seite, wo Sie gedruckte Notizen bekommen können, sehen Sie diese Kurse, tun die gedruckten Notizen, überprüfen Sie, dass auch, es gibt einen Link auf der Seite, es gibt viele Links auf dieser Seite. Das ist es für Ressourcen und Dinge, die wir in diesem Kurs tun werden. 3. 03 Coole Beispiele von vollständigen screen auf Websites: Hi, da. In diesem Video werden wir uns coole Orte ansehen, um Beispiele für Vollbild-Hintergrundvideos zu erhalten , und dies ist wahrscheinlich die beste Website, die ich benutze. Es heißt Awwwards, aber es hat Dub-Dub-Dub, also sind es die Dub-Dub-Dub-Auszeichnungen. Es gibt viele Sachen hier und KEnten Inspiration. Der einfachste Weg ist, sehen Sie diese Suche in der oberen linken Seite? Sie können einfach Video eingeben, in den Hintergrund stellen und es wird durch seine Tresore nach all denen suchen. Dann öffnen Sie ein paar von ihnen, schauen Sie sich einfach an. Um sie zu öffnen. Wenn Sie über dem Mauszeiger schweben, können Sie diesen kleinen Pfeil hier sehen? Das wird diese Website öffnen? Ok, ich weiß. Was Sie tun können, ist, dass Sie darauf klicken können und es springt auf diese Seite. [ Unhörbar] Wenn Sie die Befehlstaste auf einem Mac oder die Steuerungstaste auf einem PC gedrückt halten, sehen Sie sich dies vor dem Klicken mit der Maus an. Kannst du sehen, dass sie in einer separaten Registerkarte geöffnet werden. Ich mache das gerne, ich gehe einfach durch, gehe und klicke, klicke. Ich eröffne nur einen Haufen von ihnen. Okay. Ja, nur durchmachen und sehen, was Sie mögen und verwenden, um nach inspirierenden Videos, Stilen zu suchen , wie sie sie gemacht haben, sie ausgewaschen oder verschiedene Effekte. Ja, nur um deine kreativen Säfte fließen zu lassen. Jetzt pass auf, wie diesen Kerl hier sehen, sehen Sie die kleine sprechende Sache hier. Er spielt Musik, Northy. Tun Sie das nie. Ok. Sie haben standardmäßig keinen Ton. Ok. Weil du bestraft wirst, indem du ausgeschaltet und nicht beobachtet wirst. - Ja. Also suchst du jetzt nur danach. Die Sache ist, dass einige von ihnen ein bisschen alt sind. Sie können sehen, dass das Video nicht mehr abgespielt wird. Okay, also bezahle, das ist nicht. Oh, noch eine mit Sound. Geh weg. In Ordnung, also schließen Sie die, das war's. So finden Sie wirklich coole Hintergrundvideos. Jetzt ist die Website hier, nicht nur offensichtlich tun Video-Sites. Ich liebe die Website, es hat nur wirklich coole Sachen und es bekommt Seiten des Tages und einfach schönes Web-Design landet an diesem Ort. Also musst du es nicht einfach für unsere Video-Sachen verwenden. Ich benutze es für alle möglichen Dinge. In Ordnung. Wir sehen uns im nächsten Video. 4. 04 Wo du Videos für deinen Hintergrund hernimmst: Jetzt werden wir anfangen, die Videos zu machen, bevor wir gehen und anfangen, es zu programmieren. Wenn Sie direkt in die Codierung gelangen möchten, können Sie diesen Abschnitt überspringen. Nun, ob Sie Ihre Videos von bekommen, natürlich, können Sie selbst schießen. Es wird immer einfacher. Ich erschieße eine Menge von meinen Sachen. Aber ich mache auch, was vor uns ist und benutze Dinge wie Stock Library vorgefertigtes Material. Das ist der, den ich für dieses Tutorial verwenden werde. Nun, es ist Material, das von jemand anderem gemacht wurde, und wir können es kaufen. Die Kosten sind eigentlich ziemlich gut, wie ein Video von hier zu bekommen, entweder diese Website, Adobe Stock oder von iStock. Sie scheinen eine der beliebtesten zu sein. Sie werden Sie zwischen $50 und $200 kosten, je nach Video. Was ich getan habe, ist, dass ich einen von Adobe Stock ausgewählt habe. Es ist wie ein designarisches, es ist eher eine Fotografie, aber ich mag die alten Gestaltungseinheiten darüber. Nachdem Sie es ausgewählt haben, können Sie mit der rechten Maustaste klicken und speichern. Oder wenn Sie Adobe-Bibliotheken verwenden, die großartig sind, können Sie darauf klicken und es entweder in Ihre Bibliothek herunterladen oder auf Ihren Computer herunterladen. Es gibt ein paar Optionen, wenn Sie wissen, wie Sie Bibliotheken verwenden, andernfalls drücken Sie einfach Download und speichern Sie es einfach auf Ihrem Desktop. Das ist das Video, das wir benutzen werden. Wenn Sie Adobe Stock noch nie verwendet haben und möchten, und Sie gehen es versuchen, werde ich hier einen Link auf den Bildschirm stellen. Da ist er. Ich werde hier unten einen Link in die Notizen setzen. Es ist nichts anderes als, wenn Sie mit meinem Link auf die Website gehen, bekomme ich eine kleine Baby-Provision dafür, Sie zu ihnen zu schicken. Sie können direkt auf die Website gehen, es ist stock.adobe.com. Aber wenn du mir helfen willst, klicke darauf, bevor du gehst. Es kostet dich nicht mehr. Großartig. Nun, da wir ein Video haben, mit dem wir arbeiten können, werden wir einige grundlegende Bearbeitung durchführen und es für unsere Website vorbereiten. Wir werden Adobe Premier verwenden. Also lasst uns gehen und das aufladen. 5. 05 Richte deinen Videohintergrund und die Grundbearbeitung in Premiere Pro ein: In Ordnung. Hallo an alle. In diesem Video werden wir einige grundlegende Bearbeitung in Premiere Pro durchführen. Wir werden das schaffen. Zu Beginn meiner Timeline, drücken Sie „Leertaste“. Es wird verblassen. Ich werde das auf den Kopf stellen. Dieses Ding spielt, es geht für ungefähr 15 Sekunden. Es spielt, und es taucht zu schwarz. Lass uns das machen. Alles klar, jetzt ist es Zeit, unser Video zu machen. Wir haben Premiere Pro geöffnet. Jetzt können Sie Ihre Videobearbeitung und alles, was Sie wollen, tun. Speziell für Video-Hintergründe machen wir nicht eine ganze Menge Dinge. In unserem Fall werden wir nur etwas bekommen, das Schleifen enthält Daher werden wir Premiere Pro verwenden. Wenn du mit After Effects mehr zu Hause bist, erledigt es genau die gleiche Arbeit für das, was wir jetzt brauchen. Was wir tun werden, ist, dass wir ein neues Projekt erstellen werden. Dieses Fenster öffnet sich, wir geben ihm einen Namen. Die Spitze hier, ich werde meinen Designer Hintergrund nennen. Location, geben wir ihm einen Platz zum Leben. Ich werde meinen auf meinen Desktop stellen. Ich werde es in einen neuen Ordner legen. Ich werde meinen anrufen, Premiere Pro-Designer Hintergrund. Großartig. Klicken Sie auf „Auswählen“ und machen Sie sich keine Sorgen um diese anderen Dinge. Klicken wir einfach auf „Okay“. Großartig. Wir sind in Premier Pro. Jetzt, damit Sie mitverfolgen können, stellen Sie einfach sicher, dass Sie sich unter Fenster, Arbeitsbereiche, Sie sind auf Bearbeiten. Wenn Ihre immer noch anders aussieht als meins, gehen Sie zu einem, der „Reset Save Workspace“ sagt, und es wird ablehnen und wie mein aussehen. Premiere sieht entmutigend aus. Wenn du es aufmachst, werden die Leute verängstigt. Es ist eigentlich nicht so schwer. Es sieht so aus, als sollte es sein, aber es ist nicht. Wir werden unser Video importieren. Gehen wir zu Datei-Import. Importieren. Nun, dies wird nicht ein vollständiges Tutorial, wie Sie alles in Premiere Pro tun. Dafür habe ich noch einen Kurs. Es ist wie eine Corporate Videobearbeitung Sache, also gehen Sie und schauen Sie sich das an, wenn Sie einen vollständigen Satz davon machen möchten. Dies wird nur die schnelle Version sein, um unsere Videos zu machen, sie nett und klein bekommen und sie dann auf unsere Seite zu bekommen. Datei Importieren und checken Sie die Übungsdateien aus, wenn Sie sie noch nicht heruntergeladen haben. Ich habe sie heruntergeladen. Dies sind die Übungsdateien. Dann hier drin, was ich suche, ist Video, und wir werden dieses hier benutzen. Ich werde es importieren. Es ist die, die wir von Adobe Stock bekommen haben. Lassen Sie uns auf „Importieren“ klicken. Toll, also haben wir unser Video importiert. Das erste, was wir tun müssen, ist etwas zu schaffen, das eine Sequenz genannt wird. Eine Sequenz ist genau wie die Seite im Dokument. Du kannst nicht einfach ein Video herumsitzen lassen. Es muss auf etwas oder in etwas gehen, einem Container, und das wird eine Sequenz genannt. Wie eine Seite in einem Dokument, brauchen wir diese Seite, um unsere Worte zu kleben. Du mein Video bist die Worte, irgendwie. Um eine Sequenz zu tun, Datei , Neu, und Sie könnten zur Sequenz gehen, aber es ist viel einfach, weil Sie dann versuchen müssen, zu erraten, was die Sequenz sein sollte. Du hast eine Sequenz und du meinst : „Heiliger Moly, welche dieser Einstellungen sollte ich für meine Sequenz verwenden? Es wird ein bisschen verwirrend.“ Der einfache Weg ist, mit der rechten Maustaste darauf zu klicken und zu sagen, können Sie hier sehen? Es steht „Neue Sequenz aus Clip“. Das coole daran ist, dass es alle Einstellungen, die aus diesem Video stammen, verwenden und die Sequenz erstellen und auf meine Timeline ablegen wird. Dieses kleine Symbol hier, sehen Sie das hier? Das ist meine Sequenz. Dies ist das Video, das ich importiert habe. Was passiert ist, sie haben den gleichen Namen, was ein wenig verwirrend sein kann, wenn Sie beginnen, das ist der Halter, und das ist das Video, das auf der Timeline stecken bleibt. Da ist meine Sequenz, und das ist das Video, das da ist. Ich kann jetzt eine Sequenz haben, und ich kann viele Videos importieren und sie weiter zu dieser Timeline hinzufügen. Ich könnte 10 Videos in einer Sequenz haben. Denken Sie daran, das sind die Grundlagen. Drücken Sie „Leertaste“, es wird anfangen, es zu spielen. Ihr könnt meinen kleinen Führer dort sehen. Sie werden feststellen, dass meins den Adobe Stock durch die Mitte hier hat, weil ich dafür noch nicht bezahlt habe, hauptsächlich weil, wenn ich es kaufe und das mit diesen Klassendateien aussehe, ich bin mir ziemlich sicher, dass ich viele Gesetze breche und ich werde in Schwierigkeiten. Ich werde nur den Platzhalter verwenden, und es ist einfach zu gehen und offensichtlich dafür zu bezahlen, und Sie arbeiten vielleicht auf die gleiche Art und Weise. Sie arbeiten vielleicht mit einem Client, Sie können durch und verspotten vielleicht drei verschiedene Hintergründe mit dieser verspotteten Version mit dem Adobe Stock, und wenn ein Kunde einen auswählt, dann können Sie gehen und dafür bezahlen. Es ist wirklich einfach, hier in Premiere zu aktualisieren. Da ist mein Video. Es dauert etwa wie lange? Es dauert etwa 15 Sekunden. Nun, sagen wir, ich möchte es trimmen, es ist ziemlich einfach, entweder am Anfang oder am Ende, alles, was Sie tun, ist über Ihrer Maus zu schweben. Sie können sehen, dass ich das hineinziehen kann, und es trimmt es. Es hat es nicht gelöscht. Es hat es irgendwie getrimmt. Es ist immer noch hier, sieh mal. Hallo. Aber ich kann einfach die Enden hier zuschneiden, und ich könnte am Anfang trimmen und das an den Anfang bewegen. Was ich getan habe, ist, dass ich es um ein paar Sekunden reduziert habe. Es liegt an dir und deinem Clip. Nun, wie lange sollte es dauern? Es liegt ganz an Ihnen, aber je länger es ist, wird die Dateigröße größer. Vielleicht machen Sie einen schnellen Durchlauf und sehen Sie einfach, wie größer die Dateigrößen sind. Dateigrößen werden immer größer, wenn sie in der Nähe von 10 Megabyte kommen. Sie sind klein, wenn sie ein Megabyte sind. Wenn Sie etwas haben, das 30 Sekunden lang ist, wird es in Bezug auf die Dateigröße dorthin kommen. Ich werde diese nette kleine kurze benutzen. Die coole Sache an diesem hier ist, ich ein paar Mal „Undo“ drücken werde, ist, dass, ein bisschen mehr rückgängig machen, nicht zu viele, ist, dass es eine schöne Art von Schleife hat. Ich brauche die letzten Sekunden nicht, weil seine Hände losgehen. Dieses bisschen hier, ich könnte abschneiden, nur weil ich die Hand nicht mehr sehen kann, also spielt es keine Rolle. Die Haltung geht um, Schleifen. Großartig. Sagen Sie, Sie wollen das Stück loswerden, in dem er anfing zu schreiben. Ich will nur zu dem Bit kommen, wo er sich gerade bewegt. Ich werde das Biss rausschneiden. Was ich tun kann, ist, dass du dieses Tool hier benutzen wirst. Ihre Werkzeugleiste ist in diesem mittleren Teil hier, und die, die Sie verwenden werden, ist dieses Ding namens Razor Tool. Sein Job ist, sieh dir das an. Mein Spielkopf da, ich klicke auf ihn, und ich habe es irgendwie in zwei Stücke geschnitten. Ich gehe zurück zu meinem Auswahlwerkzeug, und Sie können sehen, dass es zwei Stücke sind. Habe nicht wirklich auf das Video geschnitten. Es ist alles noch da drin, schau zu. Hallo. Ich habe gerade etwas bearbeitet. Ich gehe zurück zu meinem Razor Tool hier, und ich werde gleiten, bis er das Schreiben beendet hat. Genau da werde ich das Stück rausschneiden. Dann habe ich mein Auswahlwerkzeug geschnappt. Ich kann darauf klicken, drücken Sie „Löschen“. Ich kann entweder ziehen Sie es über oder einen netten Trick in Premiere, ist, dass ich darauf klicken kann. Sie sehen, es wird weiß und ich habe einfach „Löschen“ auf meiner Tastatur gedrückt und es trimmt es. Nun, ich habe dieses Ding, es ist durch. Beginnt zu schreiben, aber eigentlich springt es nur zu dem Bit, wo er mit dem Schreiben fertig ist. Eigentlich ist es etwas seltsam, also werde ich das rückgängig machen. Es war eher ein Beispiel. Ich werde rückgängig machen, rückgängig machen, bis ich diesen schönen Teil hier habe. Denken Sie daran, es zu schneiden, ziehen Sie einfach diese Einsätze und das Rasierwerkzeug, um Bits herauszuschneiden. Wenn du ein zweites Video hast, schau dir das an. Ich gehe zu Datei-Import. Dieses Video, ich werde importieren. Sie können hier unten sehen, ich habe noch ein Video. Sie können den Unterschied zwischen diesen beiden Symbolen sehen? Dieser hier hat beides, wir werden hier ein wenig zoomen, ist dieser hat Video, aber kein Audio, dieser hat Video und Audio. Sie können die beiden kleinen Icon dort sehen. Es spielt keine Rolle, aber was ich tun werde, ist, dass ich das hier rüber ziehen werde. Nun, ich habe das hier und es wird sich irgendwie in diesen einmischen. Wenn Sie mehr als ein Video haben, möchten Sie sie zusammenfassen, weil es viele verschiedene Schnitte gibt, Sie importieren sie einfach weiter und ziehen sie weiter in dieser Timeline. Ich kann das Ende hier nicht sehen, also werde ich etwas verkleinern. Drücken Sie einfach „Minus“ auf Ihrer Tastatur. Jetzt kannst du diese blaue Linie hier draußen sehen? Dies bedeutet nur, dass dies das Bit ist, das aktiv ist, und wenn ich „Minus“ drücke, können Sie sehen, dass es verkleinert. Wenn ich hier oben klicke, Ich kann Sie sehen, die blaue Linie ist um diese, Es heißt Ihr Programmfenster. Das ist genau das, was exportiert wird. Wenn ich hier auf „Minus“ klicke, kann ich die Timeline in diesem Bereich vergrößern. Du musst nur sichergehen, wenn du hier unten bist, plus und minus Arbeit. Wenn du hier oben bist, zoomt Plus und Minus dieses ein und aus. Jetzt, da ich mehr sehen kann, kann ich weiterhin Videos hinzufügen. Nun, was die Bearbeitung betrifft, werden wir nur noch ein oder zwei weitere Dinge abdecken. Der nächste ist Übergänge. Im Moment ist dies nur ein Sprung Cut. Es geht einfach und springt in die andere. Das ist in Ordnung, nur ein schlichter alter Schnitt. Was wir tun wollen, ist zu betrachten, vielleicht ein Kreuz auflösen oder übermischen. Was du tun wirst, ist, dass du dein Effektfenster findest. Gehen Sie zu Fenster, gehen Sie zu Effekte. Es öffnet sich unten unten hier, und Sie suchen nach Videoübergängen. Spring es runter, und es gibt ein paar von ihnen. Um ehrlich zu sein, wenn du Page Peel verwendest, werde ich dich finden , dich jagen und dir deine Premiere wegnehmen. Wow, es ist ein bisschen hart. Sie können hier sehen, es gibt eine Reihe von verschiedenen Übergängen. Um ehrlich zu sein, sie sind alle ein bisschen genug. Kreuz auflösen ist ein gutes oder ein Sprung zu schwarz ist ein guter. In Bezug auf die Auflösungen, dieses hier Cross Dissolve wird gut funktionieren. Ich werde klicken, halten und ziehen Sie es und sehen Sie sich das an. Siehst du zwischen diesen beiden Zeilen hier, diese kleine Lücke hier oben? Ich werde ein wenig hineinzoomen, erinnere mich an Plus, und das ist Cross Dissolve, es ist so ein kleines kleines Baby Ding dazwischen. Mach dir keine Sorgen, wenn deine auf der einen oder anderen Seite oder in der Mitte landet , ist es egal. Der Effekt, das Ende endet gleich. Ich werde hier „Leertaste“ drücken. Sie können sehen, wie sich schönes Kreuz auflösen. Sagen Sie, Sie wollen, dass es ein bisschen mehr [unhörbar], Sie können alle diese Übergänge erweitern, jeder von ihnen durch, Sie können sehen, ich halte mein Symbol darüber und ich ziehe es heraus. Das wird jetzt doppelt so lang sein, also wird es ein bisschen mehr Tage in unserem Leben sein. Es gibt noch ein paar andere hier drin. Page Peel, ich sagte, ich würde es nie tun. Los geht's. Bereit Seite abziehen. Ok zu Seite Peel. Andere Übergänge, Sie können durch sie alle gehen. Was ich tun werde, ist, dass ich tatsächlich ein wenig verkleinern werde, ich werde dieses löschen, weil eigentlich meine kleine Schleife nur dieser Teil hier sein wird, und ich werde für immer in diese Schleife kommen. Aber jetzt statt eines Sprungs, können Sie sehen, dass der Anfang mit diesem Notizblock hier beginnt? Ich wünschte, seine Hand wäre weg, weil dann was passieren würde, ist, es würde bis zum Ende gehen und würde auch weg sein. Nein, das wäre es nicht. Wie auch immer, was ich tun möchte, ist, dass ich es ein wenig schöner machen möchte , anstatt nur ins Ende zu kommen und zurück zu springen. Ich möchte am Anfang und am Ende ein bisschen eine Fade hinzufügen, und das wird den Übergang ein wenig maskieren. Um es zu tun, ist es unter Auflösen. Dieser hat ist Dip to Black, bedeutet nur, verblassen zu schwarz. Wenn ich über dieses Ende schwebe, schnappen Sie es auch an diesem Ende, Sie können hier nur eine Art von Schlössern an den Enden sehen. Sehen Sie sich das jetzt an, Leertaste , beginnt schwarz, verblasst, und es wird alles durchgehen. Ich überspringen, Leertaste, und es wird wieder verblassen. Weil ich dies zwingen werde, in meiner Website zu schleifen, wird es vielleicht etwas weniger offensichtlich. Vielleicht bevorzugen Sie den Jump Cut. Es ist in Ordnung. Genau wie die anderen Übergänge, wenn ich vergrößern, kann ich diese Dip zu Schwarzen erweitern, nur um sie ein wenig länger zu machen. Sie werden das wirklich schwer finden, es sei denn, Sie zoomen hinein. Ok, ein bisschen länger. Das letzte bisschen Bearbeitung, das wir für dieses spezielle tun werden , bevor wir gehen und anfangen, mehr dieser Stilpunkte für Premiere Pro zu tun, ist, ich möchte meine auf den Kopf stellen. Warum? Weil das oben hier mit meinem Menü interagiert, also möchte ich, dass das irgendwie unten steht. Ich werde das auf den Kopf stellen. Was Sie tun, ist, dass Sie darauf klicken. Also habe ich es in meiner Timeline ausgewählt und hier gibt es etwas namens Effects Controls. Wenn Sie das nicht finden können, sind diese kleinen Tabs wirklich schwer zu bedienen. Wenn Sie es nicht finden können, verlieren Sie es, es ist für immer weg, gehen Sie zu Fenster, gehen Sie hier hoch und gehen Sie zu Effects Controls, und es wird irgendwie wie springen Sie es wieder nach oben. Du wirst sehen, wenn ich das alles ausbessere, habe ich Motion, Opacity, ein paar Sachen hier drin, die wirklich nützlich für dich sein können. Was wir tun werden, ist unter Motion, ich werde es abbauen. Es gibt einen hier, der Rotation heißt, und ich werde meine 180 umdrehen. Es bedeutet nur, dass es am unteren Ende meines Dings läuft und es wird etwas kühler aussehen, und zumindest denke ich. Sie können einige der Grundlagen darin sehen, wie Skalierung, sagen wir, Sie möchten Bits abschneiden. Ich kann dies skalieren, indem Sie klicken, halten und nach rechts ziehen. Ich finde, es ist einfacher, diese zu verwenden, als es tatsächlich im Programmfenster ist die Bilder packt. Ich weiß nicht, warum. Es ist nur das Programm funktioniert, aber ungeschickt auf diese Weise beim Versuch, an dem Video zu arbeiten, ist es einfacher, es hier mit den Zahlen zu tun. Alles klar, lassen Sie uns das schließen. Öffnen wir das wieder und legen Sie die Waage auf 100 zurück. Klicken Sie auf „Speichern“. Lassen Sie uns nun einige coole Texturen und Hintergrund, Farben und Dinge hinzufügen. 6. 06 Hinzufügen von Farboptik in deinem Hintergrundvideo in Premiere: Hallo, da. In diesem Video werden wir auf das Hinzufügen einer texturierten Hintergründe, einige farbige Boxen, einige Unschärfe zu unseren Videos, und wir werden zwei Versionen erstellen. Einer mit einem Vollbild und der andere mehr von einer Briefkastenform, wo das in einem div platziert wird. Halten Sie Ihre Hüte, gehen wir und lassen Sie unsere Videos super toll aussehen. Warum fügen wir all diese Details hinzu? Warum gehen wir los und färben es und fügen ausgewaschene Hintergründe hinzu, verschwommen? Warum machen wir das Zeug? Aus ein paar Gründen. Einer ist, dass es einfach cool aussieht. Der andere Grund ist, dass wir es tun, damit wir einige der schlechten Qualität verstecken können und die Dateigröße niedrig hält. Sie senken die Menge der verwendeten Farben, wie diese hier, es wird gehen und die Dateigröße senken. Da gibt es eine direkte Verbindung, und es ist eigentlich ziemlich beträchtlich. Unschärfe ist ein nettes, wenn man durchgeht, es ist nur zu verstecken. Sehen Sie, wenn Sie ein Bild mit sehr niedriger Auflösung verwenden möchten und Sie es ziemlich viel wie dieses verwischen müssen, können Sie es verwischen. Es ist wirklich schwer, die Pixelisierung und diese Art von Dingen zu sehen. Jetzt wissen Sie vielleicht oder nicht, dass Sie viel davon mit CSS machen können, aber Sie sollten nicht mit CSS tun. Warum? Es gibt eine Unschärfe-Funktion, sie wird nicht wirklich gut unterstützt, aber das ist neben dem Punkt. Was passiert, ist, wenn ich benutzt habe, sagen Sie die Graustufen, aber ein CSS, und ich habe die Weichzeichnungsfunktion verwendet und ich mache es im Code. Was passieren wird, ist, dass ich diese wirklich große Dateigröße in Bezug auf Video einbringen muss, und dann werde ich das CSS über die Oberseite anwenden. Während, wenn ich es jetzt in Premiere oder After Effects mache, bedeutet dies, dass ich das vorher tun kann und das Entfernen aller Farben die Dateigröße verringert. Verwischt es, senkt die Dateigröße. Vielleicht verschwommen nicht so sehr. Aber es später zu tun, vor allem Dinge wie Muting und diese Dinge, es kann im Code gemacht werden, aber tun Sie es nicht, denn wenn wir es jetzt im Video tun, wird das Video kleiner und schneller geladen und jeder wird glücklich sein. Schauen wir uns diese in Premiere an. Bei Premiere werde ich meine Play-Hits in der Mitte ziehen , damit ich die Dinge sehen kann. Ich werde mein festes Panel öffnen, wenn Sie es nicht sehen können, es ist unter Fenster, springen Sie nach unten zu Effects. Diejenigen, die ich verwenden werde, werden unter Video Effects sein. Wir fangen mit der Unschärfe an. Unter Unschärfe hier gibt es ein paar verschiedene. Wir werden Gaußsche Unschärfe verwenden. Warum? Weil jeder das benutzt. Du wirst hier drüben sehen, es wurde hinzugefügt, Gaußsche Unschärfe. Was ich tun werde, nur um es ein wenig weniger verwirrend zu machen, da ich Bewegung wirbeln und nur Gaußsche Unschärfe sehen werde. Alles, was wir tun werden, ist, klicken Sie halten und ziehen Sie diese nach rechts. Was in Premiere passiert, ist, dass viele Dinge schrubbbar sind, also klicken Sie auf „Halten“ und ziehen Sie es nach rechts. Ihr werdet sehen, wie mein Video etwas Unschärfe bekommt. Super verschwommen, etwas verschwommen. Sie entscheiden, und dann gehen Sie los und exportieren Sie es. Du hast einen coolen Hintergrund. Jetzt wird Unschärfe verwendet, um fehlerhafte Pixel zu verstecken. Wenn Sie ein Bild mit sehr niedriger Auflösung haben, bei dem Sie die Komprimierung wirklich niedrig reduzieren, wird diese Artefakte weniger wahrscheinlich durch Unschärfe angezeigt. Der andere Grund ist, sagen Sie könnten Leute darin haben, sagen, es ist ein Café, das sagt, dass Sie Bob und Ginny und Norm nicht sehen wollen, ist Norm, aber wenn Sie diese Leute sehen, die tatsächlich erkennbare Menschen sind, wenn Sie es verwischen, werden sie wie in die Nachrichten, wenn sie über generische Menschen sprechen. Sie verwischen den Hintergrund oder filmen nur ihre Füße, nur um das persönliche Gefühl dafür loszuwerden. Es werden nur die Menschen. Es ist unscharf. Ich werde auf das Wort Gaußsche Unschärfe klicken und es löschen. Eine andere Sache im Hinblick auf das Ausblenden von Pixeln ist die Verwendung von etwas Filmkorn. Nur das Geräusch, das über die Spitze geht. Sie werden feststellen, dass es hier eine Option gibt, die Lärm und Getreide sagt. Ich werde nach unten scrollen und ich werde diejenige verwenden, die Rauschen sagt, und ich werde bearbeiten, indem Sie klicken , halten und ziehen Sie es hier in die Timeline. Sie können dort sehen, es gibt Lärm. Rauschmenge, kurbeln Sie es wie Unschärfe. Es liegt an dir, wie weit du gehst. Du verwendest Farbrauschen, ich habe das ausgeschaltet, ich mag es ein bisschen mehr Schwarz-Weiß. Ich werde hier drüben hineinzoomen. Im Moment ist es an der Passform, so dass Sie zoomen können. Verbringen Sie einfach einen Sinn dafür, das ist viel zu viel. Es wird abhängig von Ihrem Film sein, aber wenn Sie dieses Rauschen hinzufügen, gibt es Ihnen diese Filmkornqualität und auch, dass einige der schlechten Pixelisierung verbirgt , die passieren kann, wenn Sie ein wirklich low-res Video verwenden, wie wir kam hierher. Es fügt etwas Lärm hinzu, also werde ich Lärm loswerden, auf Wiedersehen. Das nächste, was wir uns ansehen werden, ist es schwarz und weiß zu machen und mit einigen von ihnen zu spielen, vielleicht die Kolorisierung, Instagram-Filter, die Sie tun können, um es cool aussehen zu lassen. Ich gehe zurück, um zu passen und ich werde etwas öffnen, das Lumetri Farbe genannt wird. Nun, Sie können es hier finden, aber es gibt eine schönere Art, dieses Ding namens Lumetri Farbe zu verwenden, und es ist unter Fenster. Es gibt diesen, der Lumetri Farbe genannt wird. Sie sind die gleichen, außer dass Sie dieses schöne große Panel hier drüben bekommen. Anstatt zu versuchen, mit ihm in diesem winzigen kleinen Effektfeld zu kämpfen, bekommen Sie dieses schöne große hier. Was wir tun werden, ist die grundlegende Korrektur ist, wenn Sie Ihr Video korrigieren müssen, wir werden nicht durch die Schule Kalibrierung gehen, wenn Sie Video reparieren. Wir werden das in diesem Fall nicht durchgehen, aber es ist ziemlich einfach, wenn Sie irgendein Design der Fotografie gemacht haben, das wird nicht zu schwer zu tun sein, aber was wir tun wollen, ist hier in Sättigung getan. Du siehst, ich kann es gleich nach unten kurbeln, ich kann schwarz und weiß werden. Oder ich kann es so behalten, dass es ein bisschen ist, wie es ausgewaschen ist. Nun, was ich tun möchte, ist, dass ich zwei Versionen rendern oder diese Version rendern möchte, die vollständig gesättigt ist. Das ist ab und zu übersättigt, ich mache ein schwarz-weißes. Ich werde zu diesem Bit überspringen und Ihnen nur das Endergebnis zeigen. Wir machen das Rendern in seinem eigenen Video. Ich will dieses Video nicht zu lange machen. Magie. Ich habe diese beiden gemacht und Sie können sehen, dass es eine graue Version und eine nicht-graue Version gibt. Sie können hier sehen, dies ist ein signifikanter Dateigrößenunterschied. Nun, Sie könnten sagen: „Das ist nur wie zwei Megabyte in ein bisschen.“ Wenn es um Hintergrundvideo geht, ist niedrige Zeit unsere Nemesis. Wenn Sie Graustufen gehen, gehen Sie offensichtlich nicht nur wegen der Dateigröße Graustufen, sondern wissen, dass es eine Verzweigung gibt. Wenn Sie die Farben senken, wird die Dateigröße niedriger. Großartig. Zurück zu Premiere, ich werde meine Sättigung wieder auf 100 setzen und ich werde die Grundkorrektur schließen. Dies ist ein kreativ genannt, und das könnte interessant sein. Kannst du kreativ sehen? Sehen Sie diesen kleinen Pfeil hier. Ich kann hier klicken und es wird durchgehen und mir eine kleine Vorstellung davon geben , was das tun wird. Was ich tun kann, ist, dass ich einfach darauf klicken kann. Sie werden sehen, dass es auf mein Video angewendet wird. Das gibt Ihnen den solarisierten Sommer-Look. Es sieht aus wie Instagram-Stil Dinge, oder tatsächlich nur erwähnte Kameraprofile. Es gibt ein paar coole Sachen hier drin. Ich gehe zurück und schalte mein Aussehen aus. Wir werden hier nicht alles durchmachen. Wenn Sie durch viel mehr Fixiervideo gehen wollen, Ich habe ein Video auf sowohl nach Effekten als auch Premiere für die Kalibrierung. Aber in diesem Fall ist das Letzte, was ich dir zeigen möchte, das ziemlich cool ist, jeder liebt, eine kleine Vignette. Vignette ist das frostige Zeug draußen, natürlich das. Wir müssen es absenken. Wenn du es hochmachst, bekommst du eine weiße Vignette und niemand will eine weiße Vignette. Ich werde das senken und du siehst diesen Zuckerguss draußen. Es lässt es hier nur wie eine spezielle Filmqualität aussehen. Sie können mit einem Haufen verschiedener Sachen herumspielen, um es mehr oder weniger offensichtlich zu machen, aber Vignetten sind ziemlich cool. Ja, das ist in Ordnung. Schalten Sie das Häkchen hier ein und aus, können Sie sehen, was es getan hat? Cool. Das ist eine Vignette. Das letzte interessante, was wir tun können ist, dass wir uns das ansehen wollen, denn wenn ich oben getippt habe, können Sie sich vorstellen, wie, schauen wir uns einige dieser anderen Videos an. Dieser hier, Barrel funktioniert genug. Sie können sehen, dass es ein wenig im Hintergrund verloren geht, aber nicht genug. Ich würde sagen, das ist in Ordnung, aber du fängst an, das hier anzuschauen. Dies sieht nur gut aus, weil das Hintergrundbild, bei dem das Hintergrundvideo in diesem Fall zurückgestumpft wurde, die Weißen entfernt wurden. gleiche mit diesem hier ist ein wenig anders. Es wird immer noch abgestumpft, aber keine große Menge, aber dieser Typ hier ist ein wenig unlesbar, könnte man argumentieren. Dieser hier wurde definitiv zurückgedumpt. Lasst uns in das hier gehen. Gleiche für diesen hier, aber sie haben es getan, anstatt schwarz, haben sie das mit Gelb gemacht. Gehen wir und machen das. Was ich tun werde, ist, dass ich schließen werde, ich werde mit der rechten Maustaste Lumetri und sagen Schließen Panel. Auf Wiedersehen. Was ich gerne tun würde, ist, dass ich das hier rüber ziehen werde. Eigentlich weiß ich nicht, warum das da drüben klemmt. Der einfachste Weg, dies zu tun, ist, etwas namens eine Datei zu erstellen, neu und wir werden dieses Ding verwenden, das eine Farbmatte genannt wird. Nun, eine Farbmatte ist nur eine große farbige Box. Es wird mit den Videoeinstellungen übereinstimmen. In unserem Fall sind es 1080 von 1920. Es wird genau Ihre Videogröße erraten, so dass Sie es nicht ändern müssen. Lasst uns in Ordnung klicken. Es spielt keine Rolle, ob deine anders sind. Wir werden die Dateigrößen später ändern. Klicken Sie auf OK. Wählen Sie eine Farbschriftart aus. In unserem Fall machen wir die schwarze Version. Klicken Sie auf OK. Ich werde ihm einen Namen geben. Farbe matt macht nicht viel Sinn. Wir werden das eine schwarze Abdeckung nennen. Einband Klicken Sie auf „OK“, und nichts passiert. Es endet in Ihrem Projekt. Im Moment sind wir auf Effekte. Sie können diese Dinge durchschalten. Es ist ein bisschen schwer zu bekommen, über dieses Projekt. Wenn Sie nicht leicht dorthin gelangen, überspringen Sie das Fenster. Es gibt dieses Projekt, das ein- und ausgeschaltet wird. Das sind meine Videos. Du siehst hier drin, da ist mein schwarzes Cover, und was du tust, ist, sie rauszuziehen. Ich werde sie gleich am Anfang stecken. Im Moment deckt es alles ab, und dann werde ich sie ausdehnen. Es deckt das Ganze ab und senkt dann einfach die Deckkraft, und so waschen wir den Hintergrund aus. Wählen wir es in Ihrer Timeline hier oben unter Deckkraft, unten nach unten. Dann musst du nur entscheiden, wie dunkel es sein muss. Es hängt von Ihrem Bild ab und was über die Spitze geht, ob Sie Schlagschatten auf dem Text und HTML verwenden. Vielleicht müssen Sie zurückkommen und ein wenig damit experimentieren, aber so bekommen Sie es, um Farbstich so zu machen. Wenn du willst, dass es gelb ist wie dieser hier, machen wir dasselbe. Aber anstatt ein Schwarzer zu sein, siehst du hier den Augapfel? Das schaltet es von der schwarzen Schicht aus. Ich könnte es löschen, aber ich werde das in einer Sekunde verwenden, also werde ich es dort lassen. Also, was wir tun wollen, ist eine andere zu machen, Datei, Neu, und wir gehen zu Kommentar, gleiche Größe. Jetzt können Sie sie offensichtlich erraten. Ich habe eine bestimmte Farbe, die ich für meine Website verwende. Lassen Sie mich Ihnen einen kleinen Trick zeigen. Was ich habe ist, dass ich mein Photoshop Mockup habe, das ich verwendet habe, um das Design dafür zu erstellen und dies zu sehen. Ich kann Premiere in die andere Richtung verschieben und mir das ansehen. Siehst du diese Pipette? Dies ist eines der Farbfelder, die ich benutzt habe, oder ich könnte es hinüberbewegen. Eigentlich kann ich die Pipette hier benutzen und durch gehen und sagen, wählen Sie das Rot und wählen Sie alle diese Farben. Das ist das Muster, das ich benutzen möchte. Klicken Sie auf „OK“, hinterhältiger Trick. Ich werde das hier die grüne Abdeckung nennen, und ich kann es wieder hochbringen. Möglicherweise haben Sie das Logo im Hintergrund oder so etwas, oder Sie kennen vielleicht die hexadezimale Zahl, Sie geben es einfach ein. Denk dran, es ist hier drüben, grüner Deckel. Ich werde sie über die Spitze stecken, und ich werde sie ausstrecken. Es wird es komplett vertuschen, dann werde ich die Deckkraft senken. Nun, was Sie bemerken werden, ist, dass es in Ordnung ist, und es sieht irgendwie so aus, wie ich es will, und es ist wahrscheinlich, was ich hier getan habe, einfach werfen Sie es über die Spitze. Aber um es etwas reicher und klanglicher zu machen, möchte ich zwei Dinge tun. Ich möchte das Schwarz und das Grün benutzen, und ich finde, es sieht schöner aus. Vielleicht sind Sie nicht einverstanden, aber ich werde das hier einschalten. Kannst du ein und aus sehen? Es ist immer noch so grün, aber es ist ein wenig mehr abgeflacht, also könnten Sie einfach einen von ihnen benutzen. Ich benutze gerne zwei von ihnen. Wie dunkel sollte es sein? Auch hier hängt es davon ab, was Sie tun möchten. Großartig. Beginnen Sie am Anfang, spielt durch und kommt dann schließlich zum Ende. Sie können sehen, anstatt zu schwarz zu tauchen, es taucht in das Grün. Wenn ich wollte, dass es schwarz wird, kann ich diese Kerle schnappen, kopieren und einfügen, und sie auf diese Oberseite legen, und dann tauchen wir in echtes Schwarz, aber ich bin froh, dass es auf das Grün taucht. Ich denke, das Schwarz könnte eine große offensichtliche Veränderung sein. Großartig. Das wird es also in Bezug auf das Färben und Texturieren sein. Was ich in diesem Tutorial tun werde, ist dass ich einen vollständigen Hintergrund wie diesen machen werde, aber ich werde auch mehr von einem Briefkasten-Stil tun, wo es nur ein Stück ist, das wird nur für eine Heldenbox oder nur eine der div sein. Ich zeig's dir schnell. Das ist es hier. Sie können sehen, dass ich diese Heldenbox aus einem vorherigen Tutorial benutze, und ich habe sie hier reingesteckt. Ich muss ein paar Dinge etwas anders machen. Einer von ihnen ist, dass ich das Schwarz anstelle des Grünen verwenden werde. Es wird bis an die Enden tauchen, und es wird auch ein bisschen verschwommen im Hintergrund sein , so dass ich Typ über die Spitze setzen könnte. Wenn Sie nur den vollständigen Hintergrund machen möchten, können Sie für den Rest dieses Tutorials überspringen. Für den Rest von uns, lasst uns wieder in Premiere springen. Um es zu tun, was wir tun werden ist, dass Sie sehen können, dass das meine Cover ist, das ist das Video, in dem wir sind. Dies ist das Beispielvideo, das ich für Sie gebracht habe, ich werde das löschen. Was ich tun werde, um es ein wenig klarer zu machen, ist, dass ich diesen umbenennen werde. Sie haben den gleichen Namen, also werde ich darauf doppelklicken, und ich werde das meine vollständige Sequenz nennen. Eigentlich, wenn Sie diese benennen, werden wir sie hier richtig benennen, denn wenn es exportiert, wird es diesen Namen der Sequenz verwenden, um ihm den Dateinamen zu geben. Weil wir Website-Zeug verwenden, müssen wir spezielle Sachen verwenden. Also werden wir diesen einen Designer-Voll-Hintergrund nennen. Schön. Was wir tun werden ist, dass es immer noch ein Video ist, das darin hineingeht. Also werde ich es duplizieren, Sie können mit der rechten Maustaste darauf klicken und zu Duplizieren gehen. Ich habe jetzt zwei davon. Der zweite hier, ich werde umbenennen. Dieser wird immer noch Designer genannt werden, und dieser wird Briefkasten sein. Nennen wir es Hero-Box. Briefkasten, nur weil es ein langes, dünnes Ding wird. Lass es durch, das hast du wahrscheinlich verstanden. In Bezug auf die Heldenbox, im Moment, sind sie genau die gleichen. Sieh dir das an, das ist mein Designer voll. Kurz bevor wir auf die Benennung gehen, habe ich hier Bindestriche gesetzt. Wenn Sie Leerzeichen einfügen, werden Sie Probleme verursachen , wenn Sie versuchen, auf Ihrer Website eine Verknüpfung zu ihm zu erstellen. Bleiben Sie also weg von Räumen. Verwenden Sie Unterstriche oder Bindestriche. Ich habe diesen vollen Hintergrund. Sie können sehen, dies ist meine Sequenz hier genannt voller Hintergrund. Wenn ich auf diese doppelklicke, könnte man sehen, dass ich eine Heldenbox habe. Da ist der Typ, da ist der Typ, und da ist der Typ, und da ist der Typ. Sie sind im Moment genau gleich, aber ich kann Änderungen an einem vornehmen. Ich werde jetzt an dieser Heldenbox arbeiten, und insbesondere werde ich die Größe verkleinern. Zuallererst werde ich diese grüne Abdeckung löschen. Jetzt wird es einfacher zu wissen, dass es das ist, und das ist es. Was in Premiere passiert, ist, wenn Sie an vielen Dateien arbeiten, sagen Sie, dass Sie drei oder vier verschiedene Versionen benötigen, ist, dass Sie die Sequenz weiterhin duplizieren können und am Ende können Sie sagen, dass Sie alle meine Sequenzen für mich exportieren und es wird sie alle zur gleichen Zeit. Aber jetzt sind sie wie separate kleine Jobs. Ich möchte, dass es schwarz ist, ich möchte, dass es verschwommen ist, also werde ich auf meinem Video auswählen. Ich werde Lumetri Color finden. Das reicht von Lumetri Color. Ich habe sie nicht benutzt. Ich gehe zu meinen Effekten. Wo sind die Effekte? Wir haben die Fenstereffekte. Ich werde Unschärfe finden, denken Sie daran, dass wir Gaußschen Fleck verwenden. viel, wie viel? Nicht sicher. Es gibt hier schwarze Abdeckung, ich werde es etwas dunkler machen. Cool. Jetzt möchte ich das aufschneiden, und du machst es hier drüben, zurück in deinem Projektfenster. Da ist es auf Fenster Projekt, und ich kann mit der rechten Maustaste auf diesen Kerl, Heldenbox. Gehen Sie hier und unten hier, Sequenzeinstellungen. Ignoriere das hier unten. Er sieht aus wie der Offensichtliche. Fass ihn nicht an. Es ist dieser hier drüben, die Rahmengröße. Machen Sie sich keine Sorgen um Ihre endgültige Ausgabe jetzt machen wir das später, es geht nur um das Verhältnis jetzt. Sie betrachten nur die Höhe versus Breite. Wir können beim Export nach oben und unten skalieren und mit Dateigrößen spielen. So halten Sie es im Moment so hoch wie möglich und wir werden es später physisch kleiner machen, mit Ausnahme des Zuschnitts. So horizontal ist hier 1080 über die Spitze. Wenn wir es mit Video zu tun haben, können Sie es aus irgendeinem Grund nicht 1.080 nennen, es muss 1080 sein, nur weil es cool ist. Wie hoch wird es sein, 500? Wir werden experimentieren. Ich habe ein Gefühl, wie es aussehen wird, denken Sie daran, in diesem Ding hier. Aber was Sie tun wollen, ist, machen Sie es nicht perfekt, Sie keinen Screenshot und versuchen Sie, das Verhältnis zu erarbeiten, denn, sehen Sie sich das an, es wird reagieren. Es wird sich ändern, abhängig von vielen Dingen, also wirst du nur so ungefähr nahe an das bekommen, was du willst. Ich klicke auf „OK“ auf 500. Es wird alle meine Vorschaudateien löschen, das ist okay. Sie können sehen, hier ist jetzt, dass ein bisschen wie ein Freak aus, aber es ist viel mehr meine Art von Stil. Du siehst, dass ich das ganze gute Material ausgeschnitten habe. Was ich also gerne tun würde, ist, dass ich hier unten möchte und es auswählen und in das Fenster ziehen würde, überraschend hart. Es ist einfacher, es hier drüben in Bewegungsposition bei diesem hier zu tun. Sie können sehen, dass ich es weiter nach oben ziehen kann, bis ich das Ende sehen kann. Eines der Dinge mit dem Gaußschen Fleck, die ich vorher nicht erwähnt habe, kann man sehen, dass er es an den Rändern tut und sie werden alle frostig, einfach wie ein Goop um die Ränder legt und Frost und verwischt ihn. Es gibt das hier unter Gaußschen Weichzeichner, es sagt Wiederholungskantenpixel, und es wird direkt auf den Rand kommen und das ist mehr, was ich will. Also werde ich sie absenken. Da hast du es, er ist kaputt. Jetzt, wenn ich spiele, können Sie sehen, dass ich durchschrubben kann. Warten Sie einen Moment. Kannst du das sehen? Sie werden bemerken, dass meins nach oben und unten geht, und Sie könnten dies vorher überprüft haben und es gesehen haben, ich habe es bis jetzt nicht bemerkt, dass unter meiner Deckkraft, wenn ich das runterwirbel, es tatsächlich dieses kleine Stoppuhr, wurde gestartet. Wenn ich jetzt meinen Abspielkopf mitbewege, bedeutet das, dass ich ihn aufheben kann. Sie können sehen, dass wir dort angefangen haben, kommen und es dann vielleicht komplett schwarz machen. Diese kleinen Keyframes, das ist nicht das, was ich tun möchte. Es bedeutet nur eine Zeit, obwohl jetzt, ist, dass Sie gerade die beschissenste Einführung in Keyframing hatten. Wir werden das in diesem Kurs nicht tun, weil es viel zu tun gibt. Ich werde diese Jungs löschen und das standardmäßig ausschalten. Nun, was es bedeutet, ist, wenn ich auf schwarzem Cover auswählen, Ich kann es einfach auswählen und sagen, dass Sie die Farbe dort sind. Keyframes sind verwirrend und nicht das, was wir im Moment brauchen. Großartig. Es spielt mit, verschwommen, schwarz, und es ist die richtige Form. Warum schneiden wir oben und unten ab? Ein paar Gründe sind, dass es einfacher wird, in diesem div-Tag zu positionieren. Der andere Grund ist, dass oft diese Spitze und dieser Boden gibt es nie im Video zu sehen. Es verschwendet nur viele gute Dateigröße, also möchten Sie diese abschneiden. Wir haben zwei Versionen, wir haben den Designer vollen Hintergrund, und wir haben diese hier. Lassen Sie uns zum nächsten Video gehen und wahrscheinlich der wichtigste Teil dieser Videobearbeitung, ist die Dateigröße so gute Qualität wie möglich für einige super kleine Dateigrößen zu bekommen. 7. 07 Wie du dein html super klein erstellst.: Hallo, da. In diesem Video geht es darum, das richtige Format für unser Video auszuwählen und die Dateigröße super-duper klein zu bekommen. Was wir in diesem Video tun werden, ist, dass wir eine Gruppe von Videos wie diese machen werden, viele verschiedene Versionen, damit wir die Unterschiede in der Dateigröße sehen können, und wir werden uns dieses anschauen. Das hier, 10 Megabyte, und dann fällt es von einer Klippe auf 1,7 und sieht immer noch gut aus, versprochen. Gehen wir und machen das jetzt. Wie groß ist groß? Ein Megabyte ist wirklich klein und gut, und 10 Megabyte werden ziemlich groß. Irgendwas darüber, müssten Sie eine ziemlich gute Erklärung haben , um mich davon zu überzeugen , dass Sie ein Hintergrundvideo brauchten, das so lang war. Es sei denn, es ist Ihr tatsächliches Produkt und es tut tatsächlich Sachen meist diese Hintergrundvideo sind unterstützende Grafiken und eine wirklich große Dateigröße wird diese Website wirklich langsam laden und dass in Bezug auf die Benutzererfahrung schlecht ist. Versuchen Sie, es so klein wie möglich zu bekommen. Ich versuche, es auf der Ebene von zwei Megabyte zu halten. Ich habe Dinge gesehen, wie wenn Sie auf die PayPal-Website springen, wie hier, können Sie sehen, ihren Hintergrund ist, sie verwenden eine ziemlich große Dateigröße und es ist wirklich lang und wenn Sie durch ihre Website wählen, können Sie sehen, es ist etwa 10 Megabyte. Sie haben entschieden, dass diese bestimmte Seite 10 Megabyte für sie wert ist. Zurück hier in Premiere werden wir jetzt anfangen, dieses Ding zu exportieren, und wir müssen ein paar verschiedene Dateiformate exportieren. Die wichtigsten sind oder der große ist ein MP4, es ist das nützlichste, leicht zu teilen. Die anderen, die Sie tun müssen, ist ein WebM genannt. Es ist W-E-B und ein M, also WebM. Google hat das gemacht, und im Moment ist es das gängigste Fallback-Videoformat. Es gibt noch andere, wie Ogg, O-G-G oder OGV. Das sollte der Standard sein, aber im Moment benutzt niemand ihn. Jeder benutzt stattdessen WebM. Mein Rat an Sie im Moment im Jahr 2017 ist, dass MP4s gefolgt von einem WebM, die beiden Formate, die wir brauchen werden. Was wir tun werden, ist, dass wir diese vollständige Hintergrundversion exportieren und wir werden diese auch tun, aber wir werden dieses Video auf die Hintergrundversion konzentrieren. Die gleichen Regeln gelten für beide. Wenn wir ein Video exportieren, müssen wir zu seiner ControlM oder CommandM auf einem Mac gehen. Es ist Akte, wo ist es? Export und seine Medien. Dadurch wird es aus diesem Dokument exportiert. Wenn es ausgegraut ist und Sie nicht sehen können, ist es wie diese ausgewaschen, bedeutet das, dass Sie eine ausgewählt haben , weil wir keine unterschiedlichen Sequenzen haben können. Wenn du hier oben etwas ausgewählt hast, weiß es nicht, welches du meinst. Sie gehen zu Datei, Export und Sie gehen, weil es nicht weiß, welche Sie meinen, also werden Sie hier klicken und Sie können sagen, dass Sie darauf geklickt haben, sehen Sie die blaue Linie um die Außenseite, die anzeigt, ich meine diesen Kerl oder Sie können sie auch im Projektfenster auswählen. Im CommandM wird dies geöffnet. Jetzt können Sie dieses Fenster hier benutzen, es ist in Ordnung. Was wir tun werden, ist, dass wir „Q“ drücken, und wir können auf den exakt gleichen Bildschirm in Adobe Media Encoder. Wenn ich auf „Exportieren“ klicke, die kleine Schaltfläche dort, geht es los und exportiert es und ich habe ein MP4, wenn ich fertig bin, aber was ich gerne tun, ist es in die Warteschlange zu übergeben und das stellt es einfach in etwas namens Adobe Media Encoder in die Warteschlange. Es wird das gleiche haben, was ist, wenn ich auf die WebM-Quelle klicke, bin ich zurück zum exakt gleichen Bildschirm. Es spielt keine Rolle, ob Sie es direkt aus Premiere anpassen oder Sie es hier in Media Encoder tun, aber Sie werden einige Bilder für dieses ein sehen, es wird abbrechen. Was passiert ist, ist Adobe Media Encoder sieht so aus und fügt es zu dieser Warteschlange hier hinzu und was passiert ist, ist, dass ich viele verschiedene Versionen in die Warteschlange stellen kann. Meine Katzentoiletten-Version, und ich habe 10 verschiedene Größen, die ich machen möchte, ist, dass sie sie hier oben in die Warteschlange stellen können und Sie weiter in Premiere arbeiten können. Das ist das Schöne an Media Encoder ist , dass, wenn Sie „Direkt aus Premiere exportieren“ drücken, Premiere erst dann verwendet werden kann, wenn es fertig ist. Dieser hier, das funktioniert im Hintergrund schön. Was wir tun werden, ist, die Dateigrößen im Vergleich zu Vergleichen zu betrachten. Was wir tun werden, ist, zuerst Formate zu betrachten. Sie wollen ein MP4, und natürlich möchten Sie zu diesem MPEG4 gehen. Wenn Sie darauf klicken, was Sie finden, besteht ein 3gp. Ich denke, wie ein altes Telefon und Dateiformate. Das ist nicht das, was wir wollen. Sie wollen das hier namens H.264. Kannst du das hier sehen? Es gibt Ihnen einen MP4 und das ist der Codec, den wir verwenden müssen, wenn wir Sachen online stellen. Nun, die großen Dinge, die wir ändern müssen, ist dass diese Match-Quelle genau so ist, wie Sie sie heruntergeladen haben, und es wird uns eine wirklich große Dateigröße geben, aber wir werden sie in Bezug auf den Vergleich verwenden. Wenn Sie etwas von Adobe Stock und seine 4K heruntergeladen haben, das ist nur das Vierfache der Standard-HD, gleich 4K ist, muss es riesig sein. Wir müssen ein paar Änderungen vornehmen. Wenn Sie nun dieses Video ansehen, weil Sie einen Job zu erledigen haben und in etwa 10 Minuten fällig ist, überspringen Sie dieses Video, klicken Sie auf „Match Source“, gehen Sie zu dem, wo es Presets steht, und gehen Sie zu diesem, das Importvoreinstellung sagt, und dann geh und finde die, die ich für dich gemacht habe. In Ihren Übungsdateien und es gibt eine hier genannte Kodierungsvoreinstellungen. Die erste, die Sie in bringen müssen, ist in diesem Fall, es wird MP4 sein, klicken Sie darauf, klicken Sie auf „Öffnen“, Ich habe bereits eine, so dass ich werde auf „Abbrechen“ klicken und es erscheint, können Sie sehen, dass dies voreingestellt ist? Es erscheint in dieser kleinen Liste hier, klicken Sie darauf, klicken Sie auf „Okay“, klicken Sie auf „Play“, und Sie bekommen etwas ziemlich kleines und es wird für Ihren Job funktionieren. Das ist meine Cheating-Voreinstellung, aber für den Rest von uns müssen wir ein wenig darüber lernen, nur damit wir unsere Dateigrößen pro Video anpassen können . Wir werden das hier als Haupt belassen. Hohe Bitrate Was wir tun werden, ist es auszuwählen und Sie sehen, dass dies eine Option ist, die Duplikate sagt, das ist ein guter Weg. Dies wird das gleiche Video exportieren, aber in verschiedenen Einstellungen. Was ich tun werde, ist zu klicken, wo es „Match Source“ steht und dieses große Fenster hier bekommen, und was ich Ihnen jetzt zeigen werde, ist, wie man die Dateigröße super klein bekommt. erste und einfachste ist Audio. Wenn ich das Audio ausschalten, wird es die Dateigröße senken und es wird uns aufhören, es später zu tun, wenn es um unsere Codierung geht, wir müssen die Stumm-Taste drücken, es gibt eine Stummschaltung im Code, um es stumm zu machen, aber das müssen wir nicht tun, weil es kein Exportaudio geben würde. Um ehrlich zu sein, Sie wollen nicht wirklich Audio-Wiedergabe im Hintergrund. Ich hasse es, wenn eine Website startet mit Audio automatisch im Hintergrund abgespielt. Ich suche den Pausenknopf. Wenn es keine Pause-Taste gibt, ist es auf Wiedersehen Website. Was wir tun werden, ist nur ein paar Beispiele zu machen. Wir werden das nennen, es ist der gleiche Name. Wo soll ich es hinstellen? Ich werde es auf meinem Desktop setzen, unter meinen Beispielvideos, und dieser wird Designer-Voll-Hintergrund sein und dieser wird aufgerufen werden, kein Audio. Nur als Vergleich, und ich werde auf „OK“ klicken, dann werde ich sie auswählen, duplizieren, und wir werden einige andere Bits tun. Klicken Sie auf „Benutzerdefiniert“. Wir haben kein Audio. Schauen wir uns das große an. Der größte, um die Dateigröße zu reduzieren, ist hier unten unter der Video-Registerkarte, scrollen Sie nach unten, scrollen Sie nach unten. Dieser kleine Kerl hier, Bitraten-Einstellungen wird die Dateigrößen verwüsten. Im Moment ist es alles, was man qualitativ hochwertig nennt. Es ist auf 10 und 12 eingestellt. Je niedriger Sie gehen, desto niedriger die Qualität, aber je niedriger die Dateigröße, und was Sie finden, ist, dass es wirklich schwer ist, den Unterschied zwischen sagen 10 und unten bei so etwas wie einem zu unterscheiden. Es ist nicht HD Full K, erstaunliche Qualität mehr aber ein bisschen Show. Auf Ihrem Laptop-Bildschirm werden Sie den Unterschied nicht bemerken. Die Dateigröße beträgt 15 Megabyte. Das ist eine Schätzung. Manchmal kann es wild weg sein, also benutze das nicht als dein absolutes Messgerät, aber schauen wir uns das an. Das erste, was wir tun müssen, ist auf eine variable Bitrate von 1 Durchgang eingestellt. Das bedeutet nur, dass konstante Bitrate bedeutet, dass alles auf 10 gesetzt wird. Schaut nicht, geht nicht hoch und runter. Sie klicken auf Benutzerdefinierte Bitrate und Sie setzen es einfach auf eins und es ist egal, es wird eine den ganzen Weg durch sein, aber wenn Sie zur variablen Bitrate gehen, wird es durchgehen und sagen, es ist standardmäßig auf diese bevor erinnern, es war bei 10 und 12. Es bedeutet, dass es nach oben und unten geht, je nachdem, was auf dem Bildschirm ist. Wirklich detaillierte Bits von Video. Ich werde die höhere Bitrate, die hohe Qualität verwenden, und das Zeug, das sich nicht bewegt, erhält nur die niedrigere Bitrate, weil es sie nicht benötigt und das Ihre Dateigröße drastisch reduzieren kann. In Bezug auf diese Codierung bedeutet 1 Durchgang nur, dass es einmal durchläuft und alles überprüft und lautet : „Ja, du bist high, du bist niedrig.“ Dieses Ding hier sagt es 2 Pass, macht es einmal, es kommt zurück, und tut es wieder, und was Sie am Ende haben, ist kleinere Dateigrößen und bessere Qualität. Ich weiß nicht, warum Sie standardmäßig 1 Pass haben. Es dauert länger, das ist die große Sache. Wenn Sie dieses Ding nur schnell ausbrennen, können Sie es auf 1 Pass setzen, aber es hat keinen Sinn wirklich. Jetzt Zielbitrate, was sollte es sein? Es ist so niedrig wie Sie gehen können und Sie können einige Tests mit Ihrem Video machen. Wenn Sie super awesome Video von einer Stock Library Website haben, wird es wahrscheinlich wirklich niedrig und sehen immer noch wirklich gut aus. Wenn du es selbst auf dein beschissenes Telefon geschossen hast, je niedriger du es machst, wird es ziemlich schlecht aussehen. In unserem Fall tippe ich ziemlich immer eins und 1.5 ein. Es wird ein Ziel sein, aber wenn es muss, geht es bis zu 1,5. Die schwindelerregenden Höhen. Es gibt ihm nur ein bisschen Wackelraum. Sie können hier unten unten ein Megabyte sehen, das sind magische Zahlen, und es hat alles mit dieser Bitrate zu tun. Lassen Sie uns klicken, geben Sie ihm tatsächlich einen Namen. Es gibt kein Audio und das wird kein Audio sein und was ist das? Niedrige Bitrate Großartig. Lassen Sie uns auf „OK“ klicken. Die meiste Arbeit erfolgt in der Bitrate. Was ich tun werde, ist ein paar andere kleine Dinge zu zeigen nur um es noch weiter runter zu bringen. Vielleicht hast du es mit diesem wirklich großen langen zweiminütigen Video zu tun und du wirst versuchen müssen, so viel wie möglich aus diesem herauszuholen, also werde ich es noch einmal duplizieren. Sie klicken auf „Custom“. In diesem Fall ist Audio aus, meine Bitrate ist bereits niedrig, ich werde ein paar Dinge tun. Eins ist die Bildrate. Was ist die Bildrate? Dein Video ist eigentlich nur ein Haufen statischer Bilder und wenn sie schnell genug vor dir blinken, glaubt das menschliche Auge und das menschliche Gehirn, dass sie eine Live-Aktion sind, aber das sind sie nicht. sind keine realen Sachen, es sind nur ein paar Bilder wie ein Flipbook. Fünfundzwanzig Frames zur zweiten, wir sind alle Hakenlinie und [unhörbar] davon überzeugt, dass es sich um bewegte Bilder handelt, aber es sind nur viele Blitze von separaten Frames. Je tiefer du gehst, desto mehr sprunghaft wird es. Je höher du gehst, desto glatter wird es. Sagen wir, meine GoPro schießt, denke ich, 50 oder 60 Bildern pro Sekunde, und Sie können 1.000 Bilder pro Sekunde Bullet-Time-Matrix bekommen , die Dinge aus dem Umfang dieser sehen, offensichtlich, aber 25 Frames pro Sekunde ist das, was Dies wurde auf eingestellt. Du kannst tiefer gehen. Wenn du jetzt auf 10 runtergehst, ist es vernünftigerweise bemerkbar. Ich finde einen netten Kompromiss um 15 Uhr. In meinem Fall ist unser Video ziemlich einfach. Wie groß und grün, schau dir das an. Ich hätte das vor langer Zeit haben sollen. Sie können sehen, dass ich das entlang geschoben habe, weil es mir tatsächlich eine kleine Vorschau davon gibt, wo ich in meinem Video bin. Was passiert, ist, wenn ich Dinge in, sagen wir, meine Bitrate-Einstellungen ändere , wird dies aktualisiert. Es ist eine ziemlich gute Erklärung dafür. Ich werde das auf Fit setzen, damit ich alles sehen kann. Fünfzehn Bilder pro Sekunde, ich bezweifle, dass Sie es so viel bemerken werden, besonders wenn es Hintergrund ist und es verschwommen ist, ist es in Ordnung. Du kannst runter auf 10 gehen, dem einen Scheck geben. Ich werde auf diese klicken. Dieser wird kein Audio sein, niedrige Bitrate, es wird ein wirklich langer Dateiname sein. Dieser wird Bildrate 15 sein. Großartig. Lassen Sie uns auf „OK“ klicken. Was können wir sonst noch tun? Lassen Sie uns auf diese klicken, so dupliziert sie, klicken Sie auf diesen Kerl. Der nächste, den wir machen werden, ist, dass wir mit unserer Höhe und Breite herumspielen werden. Wir werden vielleicht die Höhe des hier ändern. Wir werden 500 Pixel hoch machen. Was ich damit meine, ist unter der Registerkarte Video, oben hier, es exportiert tatsächlich HD-Qualität, und das ist nicht das, was wir in diesem Fall brauchen. Sie könnten, es ist nichts wirklich falsch daran, das einzige Problem damit ist, dass die Art und Weise, wie wir dies im Code tun werden, etwas gibt, das wir verwenden werden, genannt die minimale Höhe und die minimale Breite, und es ist nur bedeutet, dass es nicht so reaktionsschnell sein wird, es wird ein wenig seltsam aussehen. Es muss etwas kleiner sein. Mein Rat hier wäre nicht Full HD gehen. Warum? Da Sie werden Leute haben, die auf diese auf verschiedenen Geräten suchen und sie werden nicht in der Lage sein, diese HD zu sehen, so dass es verschwendet Dateigrößen, Seite wird eine lange Zeit dauern, um zu laden. Der höchste, zu dem Sie wahrscheinlich gehen möchten, ist 720, das ist die ursprüngliche High-Definition, eher wie Standarddefinition. Sieben zwanzig hoch und das ist die Breite. Was wir tun werden ist, dass wir noch tiefer runter gehen, und Sie können sehen, dass es passen wird. Lassen Sie uns zu 100 Prozent gehen, gibt Ihnen eine Vorstellung von der Größe. Sie können immer noch sehen, bei 720 hoch, es ist immer noch ein ziemlich großes Video. Also werde ich das hier kriegen und ich werde das auf 500 ändern. Jetzt ist es in einer kleinen Größe, aber es wird in der Lage sein, sich zu dehnen und zu erweitern, um den Hintergrund zu passen, und ich finde, dass für den vollen Hintergrund funktioniert für mich. Die Dateigrößen, es ist ziemlich vage hier unten, es ist immer noch ein Megabyte. Wie viel haben wir verloren? Wir werden sehen, wenn wir gehen und diese exportieren. Das Ändern der Größe hier bedeutet nicht nur, dass die Dateigröße kleiner wird, sondern nur die Technik, die wir im Moment im Code verwenden müssen. Minimale Höhen und Breiten bis 100 Prozent. Wir werden es später betrachten, aber Sie müssen es klein genug machen, um verwendet werden zu können. Nun, es gibt noch ein paar andere Dinge, die Sie hier anfangen können. Sie können anfangen zu spielen mit Schlüssel-Framing und es gibt ein paar andere Dinge, und sie werden ziemlich nerdy, und Sie können sie um Profile und Ebenen und Feldreihenfolge spielen. Nun, das wird in Bezug darauf, wie man die Dateigröße kleiner bekommt. unten gibt es noch ein paar andere Dinge wie Bildraten, progressives Laden. Das ist in diese super nerdy Minutia zu bekommen, und wir werden es in diesem Kurs nicht durchmachen , weil du nicht viel Unterschied sehen wirst. Da draußen gäbe es Videoleute, die mich verspotten und sagen, wie ich es wagen kann, aber für mich fand ich, dass das die Großen sind , das sind die Guten. Lassen Sie uns auf „OK“ klicken. Jetzt haben wir all diese verschiedenen Videos. Was du wahrscheinlich tun wirst, ist einfach zu diesem letzten zu springen. Dies ist, worauf meine Voreinstellung eingestellt ist. Also, wenn Sie meine Voreinstellung verwenden möchten, wird es in diese 500, 15 Frames, niedrige Bitrate springen . Job erledigt. Ich habe all diese in die Warteschlange gestellt, nur um uns den Dateigrößenvergleich und den Qualitätsvergleich zu zeigen . Deshalb liebe ich es, dass ich härterer Rückschlag bin. Drücken Sie die „Play“ -Taste und es wählen Sie einfach durch sie alle. Eigentlich versucht es, sie alle zur gleichen Zeit zu rendern. Wenn ich das in Premium tat und ich den „Export“ -Button betätige, muss ich sie alle einzeln machen, was keine große Sache ist, sie sind nicht super lang, aber Sie können diesen Vorteil sehen. Wenn Sie an einem wirklich langen Video arbeiten, ich liebe [unhörbar] Sie können losgehen, einen Kaffee trinken, zurückkommen. Wenn es super lang ist und du einen wirklich beschissenen Computer hast, musst du vielleicht zurückgehen, du musst vielleicht ins Bett gehen und morgens aufwachen und der Rater könnte noch funktionieren. Das ist mir Lasten passiert. Durch die Macht des Internets, lassen Sie uns das vergrößern. Bereit? Eins, zwei, drei, los, zoomen. Das dauerte wahrscheinlich ungefähr zwei Minuten meiner Seite. Jetzt schauen wir uns an, welche Dateien erstellt wurden. Lassen Sie uns die beiden unten vergessen, ich werde sie wirklich öffnen. Das sind die Dinge, die gemacht wurden. Lassen Sie uns sie in Dateigröße bestellen. Eigentlich werde ich die Jungs zurückbringen, weil das das Original war. Ich mache es grau. Das ist ein guter kleiner Test. Ja, das ist das Originalvideo. Achtzehn Megabyte, die es grau machen, entfernen wir etwas von der Farbe, 16. Dann haben wir es ohne Audio gemacht. Nun, das Audio macht keinen großen Sprung. Eines der anderen Dinge, die wir getan haben, ist, dass wir es ziemlich dunkelgrün gemacht haben. Das war eines der Dinge, die wir getan haben, so dass wir dort ein bisschen Dateigröße verloren haben. Das sind ein paar zusätzliche Dinge. Aber dann gingen wir mit niedriger Bitrate und das ist die große Veränderung. Kannst du hier sehen? Sie können mit Bildraten und so herumlaufen, aber wirklich geht es darum, dass diese Bitrate von 10 und 12 auf 1 und 1,5 geht. Sie können jetzt eine super überschaubare Dateigröße sehen. Nun, in Bezug auf die Qualität, lassen Sie uns ein wenig sehen. Eigentlich, was wir tun werden, ist, dass wir beide aufmachen, ich stecke sie nebeneinander. Es ist kein super wissenschaftliches Beispiel, aber Sie werden ein Gefühl für diese beiden bekommen. Hier drüben, lasst uns das hier ganz oben stellen. Dies ist die hochwertige ohne Audio. Schauen wir uns mal an. Ich weiß, dass wir etwas herausgezoomt haben und es ist kein gutes Beispiel, aber du musst mir vertrauen, sie sehen gut aus, besonders für ein Hintergrundbild und vor allem weil wir nicht nach Super-High-Def suchen, suchen wir für die Ladezeit der Seite. Hey, es muss gut aussehen, nicht schrecklich, aber es geht um Dateigröße und Sie können sehen, Bitrate ist gut. Bildrate, ich habe es ein bisschen weiter runter. So die Bildrate auf 15 Sekunden. Werfen wir einen Blick zwischen diesen beiden. Schauen Sie sich einfach an. Man kann sagen, dass es ein bisschen überwältigender ist, aber mein Fall , weil mein Video, es passiert nicht viel, das Mädchen schreibt nur ein wenig auf den Notizblock. Also ist es 15, es ist in Ordnung für mich. Auch manchmal kann dieser Blick ziemlich cool sein. Sie könnten bis zu 10 Frames, und es hat diese sprunghafte Film Korn verschwommen Sache gehen, so dass Sie Dateigrößeneinsparungen bekommen und es sieht cool aus. Sie können hier unten sehen, dass die tatsächlichen Pixel die Pixel viel kleiner machen, auch nicht viel für die Dateigröße getan hat. Warum gehen wir so klein? Es ist so, dass wir es später reaktionsschnell machen können. Später, in ein paar Jahren, gibt es ein neues Stück Tag, das herauskommt und ich werde später darüber sprechen, das es vollständig reaktionsschnell machen wird, aber im Moment stecken wir mit min-height, min-width, also brauchen wir um es ein wenig kleiner zu machen, dass wir es wirklich wollen. Cool. Wir sind fast fertig. Wir haben unsere MP4s gemacht, was wir tun werden, ist, dass wir dieses Video hier abschneiden und mit dem WebM-Format in das nächste springen. Nicht so lange, aber ich werde das hier abschneiden, damit dieses Video nicht episch lang ist. Alles klar, wir sehen uns in der nächsten. 8. 08 So erstellst du eine a in Adobe Media Encoder und Premiere Pro und After Effects: Hey, Jungs. In diesem Video werden wir Ihnen zeigen, wie Sie dieses WebM-Format installieren. Sie werden wahrscheinlich bemerken, dass es nicht tatsächlich standardmäßig installiert ist, also werden wir ein Plugin installieren und wir werden es schaffen, gehen Sie durch die Einstellungen, um es wirklich klein zu machen und es auszunutzen, und wir werden mit diesem schönen Kerl enden; .webm und schau, wie klein er ist. Gehen wir und machen das. Warum brauchen wir ein WebM-Format? MP4s decken so ziemlich alle Browser ab, außer ein paar Anwendungsfällen, und diese Anwendungsfälle können durch das WebM-Format gefüllt werden. Nun, wenn du mich vor ein paar Jahren gefragt hättest, welches Videoformat wir verwenden sollten? Es wäre OGG gewesen; das OGG-Format. Jetzt hat sich das geändert. Jetzt ist das WebM das zu verwendende Format Wenn Sie also dieses Video ansehen, ist es jetzt 2017. Wenn es 2024 ist, wird es offensichtlich ein anderes Videoformat geben, aber so gehen Sie einfach und überprüfen Sie, was üblich ist, aber im Moment ist das WebM-Format das gute für die Rückseite. Google macht es oder sponsert zumindest die Entwicklung davon. Es ist ein Open-Source-Format, also müssen wir es machen, aber Adobe hat es ein wenig schwer gemacht. Ich habe es dir hoffentlich etwas leichter gemacht, also lass uns das machen. Warum ist es schwer? Weil das eigentliche Format nicht in Adobe Media Encoder oder Dreamweaver oder After Effects integriert ist, haben wir es nicht installiert. Das coole Ding daran ist, dass es ein kostenloses Plugin gibt. Es wird einen Link auf dem Bildschirm hier sein. Hier ist es. Zu den Links zu gehen ist noch einfacher. Es ist dieser Ort hier in fnord und dann bekomme ich ein WebM. Sie laden die Mac- oder Windows-Version herunter. Jetzt habe ich das Plugin aufgenommen. Sie können es hier sehen, es ist in Ihren Übungsdateien, es ist das WebM-Plugin. Es könnte ein bisschen alt werden. Vielleicht möchten Sie auf die Website gehen und es herunterladen Fall gibt es eine neuere Version, aber ich habe es nur enthalten, um es hilfreich für Sie zu machen. Was Sie tun müssen, ist, dass Sie es herunterladen oder klicken Sie hier, und Sie führen es einfach aus. Sie können hier sehen, ist meine DMG-Version, und Sie laufen das, das ist mein Mac. Diese MSI-Version ist für Ihren PC. Doppelklicken Sie auf sie, und sie werden installiert. Was auf magische Weise passieren wird, ist, dass Sie Premiere neu starten müssen, oder After Effects oder Media Encoder oder was auch immer Sie verwenden, starten Sie es neu. Was passieren wird, ist, wenn ich jetzt zu Datei, Export gehe und ich zu Medien gehe, gibt es unter Format jetzt einen namens WebM, der vorher nicht da war. Klicken Sie auf „WebM“. Das coole daran ist, dass es nur ein anderes Dateiformat ist. Es verwendet viele der gleichen Dinge. Es hat Höhe und Breite, und es hat etwas andere Variable, aber rechts unten unten hier, aber im Wesentlichen die gleichen Dinge. Nun, wenn Sie Chip wollen, Ich habe eine Voreinstellung, Sie können installieren. Denken Sie daran, von hier aus, Sie gehen zu diesem eine sagen Import Preset und es gibt eine namens Dans Web Video WebM Preset, so bringen Sie diese in. Anstatt alles durchzugehen und alles noch einmal zu erklären, ist es im vorherigen Video genau das gleiche. Wenn Sie das vorherige Video noch nicht gemacht haben, ist es die MP4-Version dieses Videos. Es ist genau das Gleiche. Wir werden nicht alles wieder durchgehen, weil das episch längeres Video war. Was wir tun werden, ist, dass Ihre wahrscheinlich auf den Standardwert beginnen wird. Es wird Audio-diejenigen haben, schalten Sie das aus, Sie ändern die Höhe und Breite. Ändern Sie die Bildrate auf 15, und legen Sie die Codierung fest. Dies ist die eine Sache, die ein bisschen anders ist, ist der Codec. Das ist der neue, das ist der alte. Ich denke, das neue ist ziemlich gut in den meisten Browsern. Ich werde den älteren verwenden, weil es bei mehr Browsen funktioniert und die Dateigröße sehr ähnlich aussieht und die Qualität genauso gut aussieht. Jetzt in Bezug auf die Bitrate, setzen Sie dies auf tausend. Das ist es, was ich gefunden habe, gut zu sein. Sie können tiefer gehen, Sie können höher gehen, aber es erhöht oder verringert die Dateigrößen entsprechend. Hier unten, 2-Pass-Encoding sehr ähnlich wie die MP4, und das war's. Wir werden Warteschlange hinzufügen, wir werden den Dateinamen hier ändern. Ich werde das hier reinbringen. Es wird in meine Videos gehen. Es gibt mir genau das Gleiche, außer dass es die WebM-Erweiterung hat. Klicken Sie auf „Speichern“, drücken Sie „Play“. Sie können sehen, dass diese fertig sind, dann renne ich wieder. Dieser hier spielt jetzt, er geht durch und kodiert es. Jetzt braucht WebM ewig zu codieren. Es dauerte die gleiche Zeit, um wie fünf Versionen des MP4 als ein WebM zu kodieren, also werden wir das noch einmal beschleunigen. Bereit, setzen, los. Es ist erledigt. Lassen Sie uns die Akte überprüfen. Sie können es hier sehen. Es ist noch kleiner als unsere MP4-Version. Oft kann man mit den Einstellungen in MP4 und WebM herumspielen. Es ist nicht so, als ob es ein kleineres Dateiformat ist, es sind nur die Einstellungen, die ich aufgenommen habe, endete zu einem kleinen Video. Was ich gefunden habe, ist, dass ich mit dem MP4 herumwirren und es genauso klein wie ein WebM bekommen kann, und genauso gut eine Qualität. Diese Leute, die diesen Punkt jedoch argumentieren würden, aber wissen, dass es nicht nur die Hälfte der Größe mit WebM ist, sondern weil meine Einstellungen anders waren als vergleichbar waren. Jetzt die Installation des Plugins ist ein Schmerz im Hintern, weil es sich wie Adobe Media Encoder oder Premiere oder After Effects anfühlt, sollten sie alle diese Funktion haben. Was Sie tun können, ist, dass Sie zu diesem hier springen und mir helfen können. Gehen Sie zu diesem Produkt namens Adobe.com Produkte/Wunschform, gehen Sie hier und was Sie tun können, ist wählen Sie Ihr Produkt, wählen Sie Premiere und Sie schreiben eine kleine Liste und sagen, bitte setzen Sie in WebM. Was passiert, ist, dass die Entwickler diese Listen bekommen und wer am meisten schreit, die Spitze der Liste bekommt diese Funktionen und das ist eine Funktion, die ich will, also gehen wir zum Team. Das letzte, was wir tun werden, ist, dass ich Ihnen geben werde, denn das ist ein etwas kürzeres Video als die anderen in dieser Serie, ich werde es mit etwas Ehrfurcht füllen. In Adobe Media Encoder, nur eine kleine Sache, die ich sehr nützlich finde ist zu sagen, dass ich dieses WebM möchte und ich werde es auf meine Website hochladen. Was passiert, ist, dass ich es duplizieren werde. Wenn ich in Custom gehe, haben wir dies vor, wir spielten hier herum, aber sehen Sie diese Option hier drüben, die Veröffentlichen sagt. Das kann wirklich praktisch sein. Sie können es in Ihrem Creative Cloud-Konto veröffentlichen, wenn Sie das verwenden. Sie können es einfach auf Ihrem freigegebenen Laufwerk mit Leuten ablegen und es ist sofort da oben, sobald es ausgegeben wird. Das ist wirklich praktisch, wenn man sagt, dass man ins Bett geht, und man rendert all diese und dann durchquert und stundenlang rendert, aber wenn sie fertig sind, werden sie mit dem Hochladen in die Creative Cloud beginnen. Sie können sehen, es kann auf Ihr Behance Konto hochladen, es kann auf Facebook gehen. Es gibt so viele und das ist diejenige, die ich benutze. FTP geht zu meinem Webserver, wo ich meine Website hoste, und ich habe sie einfach in einen Video-Ordner dort abgelegt. Legen Sie sie in den entfernten Pfad, das Video. Glückliche Tage, Vimeo, YouTube, die ich auch gerne nutzen möchte. Wenn ich direkt auf YouTube hochlade, bringe das direkt auf YouTube, Happy Days. Alles klar, das war's. Jetzt werden wir gehen und anfangen, eine eigentliche Website zu bauen, und tatsächlich fügen wir dieses Video-Zeug hinzu. Gehen wir und machen das. 9. 09 Eingehende unser website Dreamweaver: Hallo an alle. In diesem Video werden wir unsere Dreamweaver-Einstellungen durchlaufen und einrichten , damit wir mit dem Erstellen unserer Website beginnen können. Also zuerst müssen wir uns unsere Arbeitsräume gleich machen lassen, damit Sie mitverfolgen können. Sie können in Standard arbeiten, das ist in Ordnung. Ich werde in diesem neuen namens Entwickler arbeiten. Ich werde nur darauf klicken. Es ist nur eine sauberere Version. Wir werden mehr im Code in diesem Video arbeiten, in früheren Tutorials arbeite ich viel mehr im Standard und das ist in Ordnung, aber dieses, lasst uns zum Entwickler wechseln und in diesem arbeiten. Bevor wir mit irgendeinem Projekt beginnen, mussten wir unsere Website finden. Also gehen Sie zur Website, gehen Sie zu einer neuen Website. All dies tut, ist Dreamweaver mitzuteilen, wo Sie die Dateien für dieses Projekt aufbewahren werden. Okay, also mein Website-Name, okay, ich werde ihm einen Namen geben. Dieser wird genannt werden Bring Your Laptop Design Agency. Wo soll ich sie aufbewahren? Hier befindet sich die lokale Site. Klicken Sie auf „Durchsuchen“. Ich werde meinen auf meinen Desktop stellen. Ich werde einen neuen Ordner erstellen und ich werde diesen einen BYOL nennen. Das hier wird eine Website sein. Klicken Sie auf Erstellen. Klicken Sie auf „Auswählen“. Eine Sache, die Sie tun können, wenn Sie eine Website definieren, es ist wirklich praktisch, Sie gehen zu erweiterten Einstellungen und dann, wo es sagt Standard-Bilder Ordner, klicken Sie auf Durchsuchen. Sie können sehen, dass es standardmäßig in diesem Ordner ist, den wir gerade erstellt haben, und im Inneren werden wir Bilder setzen. Es bedeutet nur, wenn ich auf wählen klicke, es bedeutet, wenn ich ein Bild schnappe, sagen aus den Übungsdateien in dieser Klasse, es wird es aus der Luft greifen und es in den richtigen Ordner legen und mich nicht jedes Mal fragen müssen. Es weiß nur, indem es das tut. Jetzt werden wir nicht durchlaufen, Server jetzt zu sitzen und uns mit dem Netz zu verbinden. wir werden das auf dem letzten Video tun, wenn wir gehen, um zu veröffentlichen. Aber im Moment ist das alles, was wir tun müssen, um eingerichtet zu werden. Lassen Sie uns auf Speichern klicken. Auf meinem Desktop hier, wenn ich einen kurzen Blick habe, gibt es meinen Desktop, da ist der Ordner, den ich erstellt habe. Im Inneren befindet sich nichts außer ein leerer Ordner für Bilder. - Großartig. 10. 10 Hinzufügen von Vollbildvideos einer Website mit Dreamweaver: Hallo an alle. In diesem Video werden wir in ein Video und machen es zu tun. Sieh es dir an. Das ist das Ziel dieses Videos. Lass uns in Dreamweaver springen und loslegen. Das erste, was zu tun ist, eine Seite zu erstellen. Gehen wir zu Datei, gehen wir zu Neu, und klicken Sie auf „HTML. Wir werden Bootstrap in diesem Fall nicht verwenden, wir werden es auf None setzen. Geben wir unserem Dokument einen Titel. Dies wird die Bring Your Own Laptop Design Agency sein. HTML5. Lassen Sie uns auf „Erstellen“ klicken. Als nächstes müssen Sie die Datei speichern, also gehen wir zur Datei und speichern. Standardmäßig ist der richtige Ordner. Dies ist mein BYOL Website-Ordner und dies wird Homepage sein, also muss es Index, Kleinbuchstaben i, keine Leerzeichen genannt werden . Denken Sie daran, unsere Homepage muss Index genannt werden und das ist die Seite, die zuerst auf jeder Website geladen wird oder nachfolgende Seiten aufgerufen werden können, so lange es keine Leerzeichen gibt, müssen Sie Bindestriche oder Unterstriche verwenden. Klicken Sie auf „Speichern“. Sie werden hier sehen, das ist meine Ordnerstruktur. Wenn du es nicht hast, musst du das vielleicht erledigen. Es gibt meine Bilder und da ist mein HTML-Dokument. Ein kurzer Blick auf den Desktop, da ist es da, meine Bilder Ordner mit nichts darin, und es gibt meine Indexseite. Großartig. Derzeit hat unsere Indexseite nicht eine ganze Menge. Lass uns gehen und unser Video hinzufügen. Um ein Video-Tag hinzuzufügen, müssen wir es dem Körper nicht dem Kopf tun. Alles, was die Nutzer nicht sehen, aber es ist, was Google verwendet und der Browser verwendet. Wie dieser Titel an der Spitze hier, wir sehen nicht, es wird nur in der oberen Registerkarte des Browsers verwendet und Google verwendet es auch, um Ihre Website aufzulisten. Dies sagt nur, was Tastatur und Zeichen, die Sie verwenden, wir verwenden lateinische Buchstaben. Körper ist alles, was der Benutzer sieht, im Moment gibt es nichts. Was wir tun werden, ist eine Rückkehr zwischen den beiden. Wir werden es mitreißen. Kein Grund für die Registerkarte außer es macht es schön aussehen und balanciert es aus und macht es ein wenig einfach zu arbeiten. Wir werden ein Video-Tag einfügen. Mein Video-Tag ist offene eckige Klammern, geben Sie Video ein. Sie können sehen, es hat eine Menge von Malerei. Sie können sehen, Dreamweaver geht, ich habe in vid getippt, und es ist los, meinst du das? Oft können Sie einfach Return auf Ihrer Tastatur drücken und es wird es ausfüllen. Hier schließen wir es mit eckigen Klammern ab. Dann benötigt jedes Tag eine Öffnung und ein Schließen. Der Körper hat einen offenen und dann hat er einen Schrägstrich in der Nähe. Der Kopf hat eine offene und eine enge. Der HTML hat eine offene und dann unten gibt es eine Schließung. Also Video ist das gleiche. Um es abzuschließen, brauchen wir einen Winkel Klammern und dann diesen Schrägstrich. Sie können es bei diesen Typen hier sehen. Willst du vorwärts Schrägstrich sprechen, Dreamweaver ist clever es sagt, du meinst wahrscheinlich, das Tag zu schließen und es endet nur dort für dich. So fügen Sie ein Video-Tag hinzu. Jetzt müssen Sie dem Video-Tag mitteilen, welches Video wiedergegeben werden soll. Sie tun es, indem Sie eine Quelle hinzufügen. Kurz nach dem Wort Video hier, setzen wir in src. Sie können sehen, wie es standardmäßig vorgegeben ist. Wenn Sie auf „Zurück“ klicken, füllt es den Rest der Gleichheitszeichen und die Anführungszeichen aus. Ehrfürchtig. Sie sehen auch, dass Sie diese Browse erhalten. Ich werde auf Durchsuchen klicken. Im Moment habe ich nur meinen Bilderordner und ich habe diesen Index. Ignoriere diese.DS, es ist eine Markierung Sache. Wir werden es aus den Übungsdateien finden. Es ist auf meinem Desktop. Es gibt die Video-Hintergrund-Übungsdateien. Es gibt eine hier namens Video, und das ist diejenige, die ich für den vollen Hintergrund verwende. Da ist dieser, voller Hintergrund, und dann gibt es die kleine Datenbox-Version. Ich werde das hier benutzen, das ist das Original. Lassen Sie uns auf „OK“ klicken. Es wird sagen, diese Datei ist nicht in meiner aktuellen lokalen Website. Es bedeutet nur, denken Sie daran, dass wir nur Bilder und Index haben und Dreamweaver weiß, dass alle Dateien im selben Ordner sein müssen, damit eine Website funktioniert . Ich gehe durch. Soll ich es jetzt dorthin kopieren? Du sagst ja, bitte. Ehrfürchtig. Sie könnten es einfach hier mit Ihrer Indexdatei ablegen, aber es wäre wirklich üblich, zu New Folder zu gehen, Videos einzugeben, auf „Create“ zu klicken, und ich werde es dort hineinlegen. Jetzt wird Ihr Dateiformat in den vorherigen Videos erstellt. Eine Sache, die wir nicht sehr gedeckt haben, ist nur dafür zu sorgen, dass Sie das nicht haben können. Sie konnten keinen Hintergrund für Designer haben. Sie werden mit Fehlern enden und der Browser kann es nicht finden. Sie müssen Bindestriche oder Unterstriche verwenden, es spielt keine Rolle, welche. Oberteile und Tiefen sind in Ordnung, aber nur einige grundlegende Syntax gibt. Großartig. Wir haben ein Video bearbeitet und schauen es uns an. Was wir tun werden, ist eine Vorschau im Browser. Wir werden die Echtzeit-Browservorschau im unteren Bereich hier verwenden. So erhalten Sie es, und Sie können eine Vorschau in allen verschiedenen Browsern anzeigen, Google Chrome ist bei weitem die häufigste. Wenn Sie es nicht auf Ihrem Computer installiert haben, installieren Sie es und es wird in dieser Liste angezeigt. Wenn Sie auf einem Mac sind, Safari, wenn Sie auf einem PC sind, haben Sie wahrscheinlich Edge oder Internet Explorer. Aber auf jeden Fall testen Chrome, die Ihre Grundlage sein wird, weil so viele Menschen Chrome im Vergleich zu allen anderen von ihnen haben. Speichern Sie das bitte. Was passiert, ist, auf meinem einen hat es sich auf meinem anderen Bildschirm geöffnet. Ich arbeite auf zwei Bildschirmen hier im Büro. Bevor wir uns das Video ansehen und was am Ende passiert, sehen Sie sich dieses Video hier an. Wir werden in dieser Klasse zwischen diesem wechseln, zurück zwischen dem Video, zurück zwischen diesem hin und her, nur weil wir an einem Bildschirm für dieses Video festsitzen. Aber wenn ich arbeite, was ich tue, ist, dass ich diese App auf einem anderen Bildschirm habe, und ich teste am Ende. Es wird live aktualisiert, so dass ich nicht zwischen den beiden Kanten wechseln muss. Ich aktualisiere gerade den Code und er wird auf diesem anderen Bildschirm aktualisiert. Aber es gibt Ihnen gute Ausrede, um zu gehen und einen neuen Monitor zu kaufen. Du siehst fantastisch aus mit zwei Bildschirmen. Das ist unser Video, es ist da, ich kann es sehen. Aber nichts passiert. Es gibt ein bisschen Syntax, die wir zu diesem Video hinzufügen müssen, um es Dinge zu tun. Es gibt eine Menge verschiedener Dinge, die du tun kannst, wir werden nicht jeden einzelnen von ihnen abdecken. Gehen Sie weiter und schauen Sie sich an und sehen Sie, welche anderen Dinge Sie mit Video tun können. Aber die grundlegende, die wir wollen, ist, können Sie sehen, ob ich kurz nach dem Video einen Platz in? Dreamweaver ist wirklich praktisch, es gibt Ihnen alle Dinge, die potenziell auf Video angewendet werden können. Einige von ihnen machen Sinn. Es gibt Dinge wie Autoplay, es ist diejenige, die ich als Nächstes will. Aber es gibt hier auch Dinge wie Kontrollen. Wenn ich das einschalte und dann speichere ich es und ich schecke in meinem Browser ein. Ich setze diese Steuerelemente, und das sind nur Standard-HTML5-Steuerelemente. Geh weg. Controls ist nicht das, was ich will, weil ich das für das Hintergrundvideo nicht möchte. Ich will Autoplay. Gehen Sie zurück zu, setzen Sie ein O, setzen Sie in einen Raum, und es gibt mir diese, Autoplay. Schön. Jetzt, wenn ich speichere, schauen Sie sich meinen Browser an, schauen Sie ihn an. Es ist Autoplays. Cool. HTML5-Video ist ziemlich einfach. Es gibt keine Plug-Ins, es funktioniert nur mit fast allen modernen Browsern. Sie können in diesem Fall sehen, dass es hier kommt und dann stoppt und wartet für immer. Das könnte das sein, was Sie wollen, dann müssen Sie keine andere Syntax hinzufügen. Vielleicht möchten Sie nur einmal abspielen und dort sitzen für den Rest des Videos. Dies ist nur der Endrahmen. Könnte ein Call-to-Action sein, oder Sie sind einfach glücklich, dass es zu tun. Es macht mir nichts aus, eine Schleife zu machen. Du wirst es wahrscheinlich erraten. Du sagst das Wort „Schleife“. Zu einfach. Nun, dieses Ding wird für immer weiterlaufen. Du musst mir nur vertrauen, wir werden es nicht nochmal sehen. Das Ding wird weiter schleifen. Irgendwas anderes Nützliches da drin? Da ist stumm. Wenn Sie Ton auf Ihrem stummgeschaltet haben, ist mein Rat, das Video erneut zu rendern, es erneut zu codieren, wenn das Audio ausgeschaltet ist, wird es Ihnen ein bisschen Dateigröße sparen. Wenn du faul bist oder das nicht tun willst oder du gerade in dieses Tutorial gesprungen bist, nur um Videos zu machen und du es stummschalten willst, drücke einfach Stumm, es ist in Ordnung. Wir brauchen es nicht, weil wir kein Audio in unserem Track oder in unserem Video haben, also brauchen wir es nicht. Sie einen Blick durch die andere Sache. Das sind die wichtigsten, die wir wollen. Es gibt ein paar andere Dinge, die wir später tun werden, aber das sind die Grundlagen, um es in den HTML zu bekommen. Jetzt müssen wir es im Vollbildmodus machen. Das geschieht nicht hier im HTML, sondern in einem CSS. Ich werde „Speichern“ drücken. Wir werden ein anderes CSS-Dokument erstellen. Jetzt werden wir in diesem Kurs keine große Menge an CSS abdecken. Wenn Sie brandneu sind und sagen: „Mann, ich weiß nicht einmal, was ein CSS ist“, gehen Sie zu einem meiner anderen Kurse, gibt es eine Menge Details in CSS. Aber wir werden schnell in diesem hier sein. Zunächst einmal erstellen Sie ein CSS-Dokument. Gehen wir zu Neu, und HTML, CSS. HTMLs Sie bekommen die Dinge, die Kernkonzepte auf der Seite, sie geben die Bilder, die Videos ein. Das CSS ist das, was Sie tun, um sie zu stylen, sagen Sie ihnen, was zu tun ist. Wir werden dem CSS sagen, dass er es dehnen soll. Nun, wir werden CSS verwenden, um einem Video zu sagen, was zu tun ist. Wir werden sagen, dass es im Vollbildmodus ist. Klicken Sie auf „CSS“, klicken Sie auf „Erstellen“. Mit einer Zipper-Datei hier werde ich sie speichern. Es wird in meine Akte gehen. Einige Leute setzen in einen Ordner namens CSS, das tue ich nicht. Kleben Sie es hier. Nennen Sie es so, wie Sie mögen, aber so ziemlich jeder nennt es styles.css. So sieht ein CSS-Dokument ganz neu aus. Ich werde es schließen, denn was wir tun werden ist, wenn wir es schließen, denken Sie daran, dass es sich um zwei getrennte Dateien handelt. Sie können sie dort sehen, dieser Kerl und dieser Kerl, sie wissen nicht, dass es einander gibt. Was wir tun müssen, ist die beiden zu verbinden und wir tun es durch in diesem HTML, in den Kopf. Denken Sie daran, Kopf ist, wo die Anweisungen für die Seite gehen und der Körper ist die Dinge, die tatsächlich auf der Seite erscheinen. Hier unten im Titel, sagen wir, wir werden den Link zum CSS hinzufügen. Das ist ein langer. Was wir tun werden, ist, einen kleinen Trick zu verwenden. Anstatt die ganze Syntax zu setzen, um ein CSS-Dokument zu verknüpfen, werden wir eine kleine Verknüpfung in Dreamweaver verwenden, und wenn Sie Return drücken, tut es nichts, aber wenn Sie stattdessen Tab drücken, sehen Sie dies, genial. Anstatt Winkel Klammern Link rel gleich Stylesheet eingeben zu müssen, href gleich, all das kann nur mit Tab gemacht werden, gleich mit diesem Video-Tag. Wir haben das früher gemacht, wo wir am Anfang und am Ende getippt haben. Ich werde ein anderes direkt darunter setzen, nur um Ihnen ein bisschen ein Beispiel zu geben, würde ich niemals Videoquelle gleich eingeben, ich tippe Video ein, klicke Tab und du siehst, dass alles für dich da ist. Ich werde das rückgängig machen. Lernen Sie einige Abkürzungen, genial. Wohin soll es sich verlinken? Es ist in dieser h-Referenz, das ist die Hyperlink-Referenz, und wohin wird sie gehen? Wir werden anfangen zu tippen. Wenn ich das lösche und ich es aus irgendwelchen Gründen wieder einlege, lädt es manchmal, wenn du diesen kleinen Trick verwendest, diese kleinen Preloader nicht. Manchmal lösche ich einfach das erste Zitat, lege es wieder ein, und dann erwacht das wieder zum Leben. Ich bin sicher, es ist ein Käfer, ich bin sicher, es wird verschwinden. Was ich tun werde, ist, ich werde styles.css eingeben. Das ist die Datei, auf die verlinkt wurde. Sie können hier oben sehen, das hat sich geändert. Dies ist die zugehörige Dokumentleiste. Statt zwei Tabs geöffnet zu haben, haben Sie hier wie zwei verschiedene Tabs und sind damit verknüpft. Jetzt sind HTML und CSS verheiratet, sie sind verbunden. Cool, das ist, was wir tun mussten, um sie zumindest zu verbinden, jetzt müssen wir gehen und einige CSS hinzufügen, um dieses Video zu stylen. Lassen Sie uns gehen und stylen Sie es in unserem CSS, klicken Sie oben auf styles.css. Jetzt werden wir unser erstes bisschen CSS einfügen. Was wir tun konnten, ist, dass wir hier reingehen und das Video-Tag stylen konnten, das war der Name, der ihm hier gegeben wurde, also ist es genau das gleiche Video und hier drüben könnte ich anfangen, es zu stylen und ich setze meine geschweiften Klammern, und dann fange ich an zu stylen es und das ist in Ordnung, solange Sie nur ein Video pro ganze Website haben, was unwahrscheinlich ist, na ja, es könnte nicht sein. Wie für meine Video-Tutorial-Websites, gibt es Millionen von Videos, so dass Styling dieses Tag wird alle von ihnen beeinflussen. Alle Videos auf jeder Seite müssen diese Vollbild-Sache sein und das ist nicht, was ich will, also was ich tun werde, ist, dass ich ein bisschen genauer sein werde. Was ich damit meine, ist, dass ich eine Klasse hinzufügen werde, und eine Klasse ist etwas, das ich erstellen kann, und ich bekomme um die Dinge zu bearbeiten, auf die ich sie anwenden möchte. Eine Klasse ist etwas, was ich schreiben kann, ich muss nur sicherstellen, dass es eine Periode am Anfang oder einen vollständigen Stopp hat. Ich werde meinen Fullscreen anrufen, du kannst es so nennen, wie du willst, nur keine Leerzeichen. Ich werde die Worte kopieren, weil meine Schreibweise schrecklich ist, und dann muss ich gehen und sie implizieren. Ich werde das hineinlegen und meine geschweiften Klammern einlegen. Nur um zu beginnen, müssen alle Eigenschaften für CSS in diese geschweiften Klammern gehen. Um diese beiden zu verbinden, muss ich zur Quelle gehen, denn im Moment ist es nur Call Video und es hat keine Verbindung zu dieser Vollbild-Sache, die ich gerade gemacht habe. Was Sie tun, direkt nach dem Wort Video, setzen Sie in den Raum, beginnen Sie mit der Eingabe cl für die Klasse, drücken Sie Return, setzt eine kleine Syntax für Sie ein. Denken Sie daran, dass Gleichheits- und Anführungszeichen da drin sein müssen und Sie sogar hilfreich von Dreamweaver sehen können , sagt: „Meinten Sie Vollbild?“ Ich sagte: „Ja, bitte.“ Sie werden bemerken, dass Sie die Zeit hier nicht eintragen. Obwohl ich meins kopiert habe, um es einzufügen, musste ich es nicht tun, weil Dreamweaver heute super hilfreich war. Das verbindet die beiden miteinander, also machen sie Sachen zusammen. Jetzt muss ich ihr sagen, was sie tun soll, und damit das Ding funktioniert, müssen wir ein paar Dinge tun. Die wichtigsten sind minimale Höhe und minimale Breite. Ich habe in min und dann Bindestrich getippt, Sie können sehen, es gibt mir alle Dinge in meinem Internet. Ich werde eine minimale Höhe tun und der Doppelpunkt geht dort automatisch rein und wir setzen 100%, nicht überraschend. Wir beenden unsere CSS-Eigenschaften immer mit einem Semikolon. Wir machen auch die Mindestbreite. Ich tippe nur und benutze meine Pfeiltasten, um nach unten zu gehen, drücke Return, 100%, Semikolon. Lass uns schauen, wohin das uns führt, es ist noch nicht fertig, aber schauen wir uns mal an. Cool. Es ist ein dehnbares Video. Eines der Dinge mit minimaler Breite ist, dass, können Sie sehen, es wird auf ein Minimum. Das sind die ursprünglichen 500 Pixel, die ich habe, und das ist nur eines der Dinge, mit denen wir im Moment mit dem dehnbaren Hintergrund leben müssen. Wenn dies die Zukunft ist, was Sie tun wollen, ist, sagen, es ist ein oder zwei Jahre von jetzt, Sie wollen gehen und überprüfen Sie etwas namens Objekt passen und das Ding heißt Abdeckung und es macht eine wirklich cool, einfache Sache, wo es sich in den Hintergrund erstreckt, müssen Sie diese minimale Breite Sache nicht tun. Das Problem ist, dass es im Moment nicht von vielen Browsern verwendet wird, also ist es nicht so praktisch. Es wird in ein paar Jahren sein, also gehen Sie und überprüfen Sie, dass Sie etwas wie Objektanpassung gegen minimale Breite finden und überprüfen Sie einfach, ob es funktioniert. Schön und dehnbar, genial. Aber es gibt ein paar Dinge wie diese Scrollbalken hier und es gibt einige weiße Lücken an den Rändern. Reparieren wir das in Dreamweaver. Eine Sache, die ich nicht erklärt habe, nur zu denken, ist, dass in der minimalen Breite ist, wenn ich das wie ein voller Pflegefilm mache, es tatsächlich riesig werden wird. Das Minimum wird 100% sein und wahrscheinlich über den Bildschirm hinaus , so dass es nie die Größe ändern wird, es wird nur dort im Vollbild sein und es ist in Ordnung, wenn Sie das wollen, könnten Sie nur mit der oberen linken Ecke enden, weil das Bild so groß ist, es nicht auf dem Bildschirm ist und es wird nicht kleiner als sein Minimum. In unserem Fall habe ich meine 500 Pixel gemacht, also ist es ein bisschen geben, und es hält eine Dateigröße kleiner. Hoffentlich erklärt das das besser. In Bezug auf die Mindestbreite gibt es noch ein paar andere Dinge, die ich tun muss. Die erste ist, ich werde die Breite und Höhe automatisch machen. Warum? Nur weil. Es gibt Fälle, in denen es keinen Unterschied machen wird. In unserem Fall wird das Video genau gleich aussehen, aber es gibt Fälle, in denen dies benötigt wird, also fügen Sie es einfach hinzu, es verursacht keinen Schaden und wird Ihnen unter bestimmten Umständen helfen. Andere Dinge, die wir tun können, ist, dass wir diese Bildlaufleisten loswerden wollen, sehen Sie diese Bildlaufleisten hier beiseite? Wir sind fertig. Schauen wir uns etwas an, das Position genannt wird. Hier können Sie die Optionen sehen. Wir werden uns zwei ansehen. Wir werden uns absolut und fixiert ansehen. Wir schauen uns zuerst an und was ich tun werde , ist, dass ich Ihnen ein paar Beispiele zeigen werde, die ich habe. Ich habe gerade gemacht. Dies ist die fertige Seite. Offensichtlich sind wir noch nicht hier, aber dieser hier ist auf behoben. Wir haben über fixiert gesprochen und der andere wird absolut sein. Behoben ermöglicht es uns, dies zu tun. Ich habe hier eine Menge Kopie hinzugefügt, nur eine leere Kopie. Sie können sehen, dass das Video im Hintergrund fixiert ist, es geht nirgendwo hin. Wo ist absolut? Ist da, aber schau dir das an, wenn ich nach unten scrolle, kannst du sehen, dass es dort bleibt, wo es ist und es gibt Verwendungen für beide Fälle, also ist es einfach zu wechseln. In diesem Fall bei uns, wenn ich zu fix gehe und ich Vorschau im Browser, und ich werde diese beiden schließen, die ich als Beispiele gemacht habe, ist es nicht wirklich wichtig, weil ich keinen Inhalt auf meiner Seite habe, also habe ich herausgefunden, Zeig dir das. Wir werden unsere verlassen, wie es behoben ist. Das nächste, was wir tun werden, ist, dass wir in eine obere Position von null Pixeln und eine linke Position von null Pixeln setzen . Es gibt einen Bezugspunkt für später wenn wir Typ und Bilder darüber legen müssen. Wenn Sie es nicht haben, wird es nicht funktionieren, es wird jetzt keine Änderung bemerken. Steck es einfach rein, weil ich es gesagt habe. Schauen wir uns das mal an. Sparen Sie, gehen wir und schauen Sie uns ein wenig an. Als ich sagte, es machte keinen Unterschied, es ist tatsächlich, Sie können hier oben sehen, es gibt ein bisschen Standard, der zusammen mit dem Body-Tag kommt, das es von oben nach unten schiebt und ein wenig weg von links, damit es die kleine weiße Grenze, die da war, aufgeklärt ist. Wir haben es vorher nicht gesagt, ich habe es wahrscheinlich getan, aber ich will es nur klarstellen. Siehst du einen weißen Rand? Sie haben es vielleicht nicht bemerkt. Aber er ist da. Dies zwingt es in die obere linke Ecke. Schön. Das, meine Freunde ist eine Rakel Video Hintergrund Sache, die wirklich klein und Geflügelgröße ist. Das bringt dich einen Teil des Weges. Wir lassen dieses Video hier, nächstes Video, wir werden auf das Hinzufügen von Typ über die Spitze schauen, denn das ist eine andere Sache. Es ist einfach genug, aber gehen wir und tun es zusammen im nächsten Video. 11. 11 Grundlegende Texte und Bilder über den Video-Hintergrund: In diesem Video werden wir mit so etwas enden, wo wir ein paar Sachen über die Spitze haben. Ich habe ein bisschen ein Navi und ein Logo auf der Oberseite. Es sieht nicht nach viel aus. Wenn Sie sich ansehen, wie lange dieses Video sein wird, aber keine Sorge, wenn Sie nur in das dicke Zeug über die Spitze schauen, dann sind das die ersten 10 Sekunden und der Rest der Zeit, die wir in einige grundlegende HTML bekommen, und wir sind gehen, um unsere Website zu bauen, die Sie überspringen könnten, wenn Sie möchten. Lasst uns anfangen. Um Text zu einem Dokument hinzuzufügen, das ist offensichtlich sehr einfach, direkt unter hier auf dem Video, lassen Sie uns tatsächlich unser Logo hinzufügen. Ich möchte das Logo über die Oberseite kleben. Hier ist mein fertiges Beispiel, das ich tun möchte. Das ist es, was ich will. Ich möchte, dass Sie Ihren Laptop über die Spitze und diese Navigation, und diesen Text und diese Schaltfläche. Lasst uns anfangen. Also, was ich tun möchte, ist es in ein Bild zu setzen. Jetzt kann das Einsetzen eines Bildes ewig dauern. Es ist img space src, dann musst du in Alt-Text einfügen, es gibt viel zu tun. Aber denken Sie daran, unseren Trick, img dann Tab drücken. Hey, füllt es aus und danke Dreamweaver. Die Quelle, von der ich mein Logo bekommen möchte, werde ich i eingeben, für Bilder. Können Sie sehen, es geht um Bilder, groß, klicken Sie darauf. Jetzt gibt es nichts in meinem Bilderordner. Wir kommen einfach mit Stöbern, also werde ich das benutzen. Ich werde gehen, um die Übungsdateien zu finden, die wir heruntergeladen haben. Wenn Sie die Übungsdateien nicht finden können, haben Sie wahrscheinlich schon jetzt, aber es wird irgendwo auf dieser Seite einen Link geben. Gehen wir zu Video-Hintergrund und lassen Sie uns unter Bilder gehen, und ich habe ein SVG hier drin, könnte png, jpeg sein. Verwenden Sie SVGs, wenn Sie wissen, wie sie machen, aus Photoshop und Illustrator machen sie. Sie sind skalierbare Vektorgrafiken und sie sind genial für die Größenänderung. Schön und knackig. Es ist momentan nicht in meiner Website. Es sagt Warnung. Möchtest du, dass ich dort kopiere? Du sagst: „Ja, bitte.“ Wo soll ich es hinstellen? Die Bilder, bitte. Dasselbe mit den Bilddateien. Sie müssen Bindestriche, keine Leerzeichen haben. Drücken Sie „Speichern“, da ist es. Der Alt-Text muss immer dann eingegeben werden, wenn Sie ein Bild einfügen. Dies wird von Screenreader für Sehbehinderte verwendet, und es wird auch verwendet, Google verwendet es. Sie haben jemals eine Google-Bildsuche gemacht, so weiß es, wovon Sie sprechen. Das bringt mich dorthin, wo ich unser Top-Logo hineinbringe. Großartig, lassen Sie uns im Browser nachsehen. Es ist nicht da. Wo ist sie? Es ist tatsächlich da, es ist tatsächlich hier unten. Was passiert, ist, wenn Sie Dinge setzen, wenn die Position fixiert ist, sie sind alle nicht synchron und sie wissen nicht, wer oben ist, und sie sind alle auftaucht, um es zu bekämpfen. Manchmal sind die Logos oben und manchmal die Videos oben. Es ist so ziemlich, wer auch immer der Erste in dieser kleinen Liste hier ist. Was wir tun müssen, ist zu unserem CSS zu gehen und tatsächlich unserem Vollbild, unserem Video sagen, etwas zu tun, der als Z-Index bezeichnet wird. Z-Index, und standardmäßig ist alles Null. Du weißt, dass das Bild Null sein wird also wird alles unter Null darunter rutschen. Manche Leute setzen 100 ein und einige Leute sind 999. Es spielt keine Rolle, was auch immer blitzt. Jetzt gehen wir und überprüfen Sie den Browser. Da ist es. Hallo, da ist es, mein Logo oben. Im Wesentlichen ist es das. Wenn Sie bereits wissen, wie Sie Dinge hineingehen und positionieren, tun Sie responsive Websites und setzen Sie eine Kopfzeile ein, und das Logo in. Du kannst jetzt zum nächsten Video springen, denn in diesem Video werden wir Dinge wie mobile und reaktionsschnelle Dinge abdecken. Aber in diesem Video werde ich pflügen, wir werden unsere Website bauen. Es ist ziemlich einfach. Wenn Sie neu sind oder einfach nur loslegen, folgen Sie, bauen wir es auf, bringen Sie Ihre Fähigkeiten auf. In Dreamweaver gehen wir also zum Quellcode und wir werden das jetzt ausbauen. Dieses Logo hier, eigentlich, ich möchte, dass das Video unten ist. Nur weil ich es wollte, spielt es keine Rolle, wohin es geht. Genug von diesem Vollbild, zumindest. Also werde ich es schneiden und unter diesen Kerl legen und vor allem, weil ich möchte, dass meine Website darüber geladen wird und das Video das letzte ist, was zu laden, nur damit dies zuerst auf dem Bildschirm tickt und dann kann dieses Ding am Ende geladen werden. Wenn Sie ein wirklich langes Video haben, kann eine lange Zeit dauern und dann wird es warten bis dies geladen wird, bevor die Dinge darunter. Großartig. Was wir also tun werden, ist eine grobe HTML5-Struktur aufzubauen. In unserem Körper, das erste, was wir brauchen, ist ein Header. Also setze ich in Header Überschrift Tab, und das ist alles, was oben auf meiner Seite geht. In diesem Fall wird es sein, nennen wir es mein Mock-up. Es wird nur sein, dass das Logo in es und meine Navigation geht. Wenn Sie es hier oben BYOL nennen möchten, würde das als Ihr Header betrachtet werden. Drinnen, Header Ich werde mein Logo setzen, wir haben ihn, da gehst du, und drinnen gehst. Sie können sehen, dass es Dinge schön einzieht, um zu sehen, wo Sie sich befinden. Ich werde ein paar Renditen einbringen. Returns tun nichts im Code. Überprüfen Sie weiter, habe ich es kaputt gemacht? Nein, sieht immer noch gut aus. Ich werde meine Navigation einbauen. So geht die Navigation in ein Tag namens nav, drücken Sie Tab. Jetzt werden wir diese drei Worte eintragen, die ich hier in meinem Beispiel hatte. Du kannst sie dort sehen, sie gehen rein. Bauen Sie ein Navi, bauen Sie es so. Sie setzen in die ul, die eine ungeordnete Liste ist. Das ist wie eine Aufzählungsliste und wir werden entfernen, dass die Aufzählungsliste in einer Sekunde installiert wurde. Legen Sie es nicht rein, drücken Sie die Lasche. Setzen Sie eine ul, und innerhalb dessen, weil die ul genau wie der Wrapper ist, darin gibt es li's. Das sind die verschiedenen Aufzählungspunkte hier drin, und ich brauche ein paar davon. Also könnte ich das tun, und deshalb brauche ich ein paar Listenelemente. Innerhalb dieses Listenelements benötigen wir einen anklickbaren Link. Das nennt man ein Tag. Wenn ein a enter to, ein href ist, was ihm einen Hyperlink gibt. Wohin soll es gehen? Ich habe einen Hash eingefügt, weil ich noch keinen Weg habe, um es zu gehen. Das wäre, wir könnten unseren Kontakt schreiben page.html, aber wir haben das nicht, also werden wir es als Hash belassen. Ich kann mich nicht erinnern, was unsere Phase 1 ist, was war das für Phase 1? Portfolio. Portfolio, sparen. Lassen Sie uns es einfach im Browser überprüfen. Sie können sehen, dass es mein erstes kleines Navi gibt. Es sieht ein bisschen hässlich aus, aber so werden Navigationen gebaut. Sie sind mit URLs erstellt. Aber wir haben die Aufzählungspunkte und das Blau und den darunter liegenden entfernt und macht sie anklickbar. Das macht ein gutes Navi. Zurück in Dreamweaver. Was Sie tun können, ist, dass Sie Ihre Schlüssel darin haben, ein Duplikat, das Befehls-D auf einem Mac oder Control D auf einem PC ist, oder Sie können es kopieren und einfügen, das liegt an Ihnen. Das kannst du weiter machen. Ich werde dir einen super coolen Weg zeigen, ich werde versuchen, dich mit meinen Super-Fähigkeiten zu beeindrucken. Sieh dir das an. Wir haben das benutzt und auf „Tab“ geklickt, und ich sage „Es ist ziemlich cool, spart dir ein bisschen Zeit“, besonders für ein Navi. Was ich will, ist eine ul. Innerhalb dieser ul, also werde ich das Größer-als-Symbol verwenden, und innerhalb dessen, ul, innerhalb dessen auf einem li. Wie viele Li's hätte ich gern? Ich hätte gern fünf von ihnen. Im Inneren des Li möchte ich ein, Tag. Ich weiß, es scheint etwas seltsam zu sein. Wenn du neu bist, mach es nicht so, du machst es einfach auf den langen Weg. Aber wenn Sie jetzt sicher sind, haben Sie ein paar der Tutorials gemacht, und Sie fangen an, ziemlich cool zu werden, können Sie dieses Ding tun. Es nennt sich Bild. Es ist also wie Code-Hinweis-Zeug und bedeutet nur vielleicht eine Hit-Tab. Es baut das ganze System für uns auf. Es baut ein Li mit einem Haufen von ihnen. Ich sagte fünf, ich wollte wirklich nur drei davon. Legt es einfach ab und sie sind ziemlich cool. Ich liebe es, wenn man so Zeit sparen kann. Die andere Sache ist, dass wir tun können, ist, und es ist eine coole Sache für Dreamweaver, ist mehrere Cursor. Ich möchte für all diese einen Hash einbinden. Denken Sie daran, wenn wir keinen Weg dafür haben, setzen wir das Hash- oder Pfundzeichen ein, aber es ist nicht so schwer. Ich könnte Hash hinuntersetzen. Okay, es ist in Ordnung. Aber was ich tun kann, ist, dass ich den Befehl auf meiner Tastatur gedrückt halten und ein paar Mal klicken kann , und Sie erhalten diesen mehrfachen Cursor. Sehen Sie einen riesigen Cursor. Es bedeutet nur, dass ich das tun kann, wenn ich abhöre. Es wird eins nach dem anderen gehen. Sie können diese Cursor überall haben, was Cursor sein kann, die ich haben kann. Bis du wegspült. Das ist nicht besonders nützlich, aber es ist großartig, wenn Sie Klassen für verschiedene Tags hinzufügen. Wie auch immer, Tipps und Tricks. Also dieser hier muss in das a -Tag gehen. Denken Sie daran, das ist PORTO. Was waren die anderen? Preise und Kontaktieren Sie uns. Also Preisgestaltung und KONTAKT UNS. Überprüfen des Browsers. Da sind sie, groß und hässlich. Jetzt wollen wir sie hier nach oben bringen. Nun, wir werden sie nebeneinander setzen und all diese hässliche Formatierung loswerden. Das ist immer CSS getan. Also werden wir diesen Kerl hier lassen. Wir werden in unsere styles.css springen. Das erste, was wir tun, ist, dass wir sie nach rechts oben schieben. Also werden wir das Navi stylen. Denken Sie daran, die Tags, die es nicht tun, erinnern Sie sich daran, diese sind diejenigen, die wir nennen, diese die vorgefertigten. Also kein Full Stop in der Front. Wir setzen in unsere geschweiften Klammern und um sie oben rechts zu gehen, ist etwas namens Float. Wir werden sagen: „Schwimmer nach rechts, mein Freund“, Semikolon. Speichern, im Browser einchecken. Boom, sieh ihn dir an. Den ganzen Weg hier rüber. Er ist nach rechts geschwommen. Schauen wir uns an, was wir tun müssen. Als Nächstes möchte ich meine ul stylen. Also, was wir tun, ist, dass wir sagen, nicht nur alle Uls auf der Seite. Ich möchte diejenigen tun, die zufällig in diesem Navi sind. Denn wenn ich alle Uls mache, habe ich vielleicht eine Liste auf einer anderen Seite und es wird ein paar seltsame Sachen machen, die ich nicht will. Also nur die Uls, die im Navi sind, bitte. Ich möchte, dass Sie, mein Freund, die Schusspunkte loswerden. Das ist das erste Hässlichste. Also habe ich in Liste eingegeben und es gibt eine hier drin, genannt List-Style-Typ. Wenn Sie sich nicht sicher sind, was einige von ihnen tun, können Sie hier unten sehen, Dreamweaver ist sehr hilfreich. Es sagt mir, was dieses Ding tut. Ich klicke auf dich. Dann gibt es mir einige Beispiele dafür, was es tun kann. In unserem Fall können Sie ein Dezimalzeichen setzen, Sie können eine Disc einfügen. Ich werde reinlegen, keine. Okay, und dann Semikolon, speichern Sie es. Also sieh mal, cool, Kugel Punkte weg. Wer wird weiter durchmachen, dass und weiter entfernen einige der Styling. Also, das nächste, was ich tun will, ist, dass ich es mit den Listenelementen tun möchte. Also möchte ich es diesen Verbündeten antun, aber ich wollte nur mit den Verbündeten tun, die sich zufällig innerhalb von URLs befinden, die sich innerhalb der n-av befinden. Ok? Also, Leute, ich will, dass ihr eine Schriftgröße habt? Schriftgröße von 0,8 em-es. Okay, wenn Sie noch nie em-es verwendet haben, können Sie pixels.Es ist nicht, es ist keine gute Praxis. EM-es reagiert und Bit-Fehler und viele Möglichkeiten, alles, was es bedeutet, ist, und standardmäßig ist eine Website auf 16 em-es eingestellt und der Benutzer kann gehen und ändern Sie diesen Standard, wenn sie müssen. Also, wenn Sie Code-Pixel zu verstecken , wird es ihnen ermöglichen, es zu tun.Also müssen wir sie wählen die Schriftart, niemand ändert es. Zumindest sind wir nicht viele Menschen, aber wir müssen uns an die Regeln für Leute halten , die ein wenig mehr Hilfe mit einem Browser benötigen. Also, wenn ich ein Em-e einfüge, okay, würde ich 16 Pixel bekommen. Also will ich 14 em-es, was etwa 14 Pixel ist, was etwa 0,8 em-es ist, okay, also benutze 16 Benutzerbasis und wir bekommen einige grobe Fälle von dort, oft musst du gehen und testen und überprüfen. Das wird also die Schriftgröße sein. Was sollen wir sonst noch tun? Ich habe mit einigen Buchstabenabständen herumgespielt, nur um sie zwischen den Buchstaben zu trennen. Also werde ich Nullpunkt em-es verwenden. Speichern Sie es. Schauen wir uns mal an. Sie können sehen, dass es die Buchstaben auseinander gesetzt hat. Und was habe ich sonst noch mit der Schriftgröße gemacht oder etwas kleiner als normal, aber ich möchte darauf unterstreichen, so kann ich eine Zeile machen und ich möchte gehen, um die Zeile zu ticks. Tickt die Linie und gehen Sie nach rechts. Semikolon, dann die Aufstellung auf diese Weise, vielleicht mögen Sie Ihr Styling so. Was ich tun möchte, ist, sie nebeneinander zu stellen, und es ist etwas, das „Display“ genannt wird. Und es gibt ein paar Möglichkeiten. Inline-Block. Im Moment sind sie wir mit inhärenten, speichern Job in der Hand. Sie können „Inline-Block“ sehen, das bedeutet, dass sie in einer Zeile sein werden. Und ich möchte etwas Abstand zwischen ihnen setzen. Also werde ich etwas Polsterung hineinlegen und ich habe etwas Polsterung auf der linken Seite gelegt. Wenn ich es rechts setze, wird es etwas seltsam aussehen. Ich zeige dir, was ich in der Mitte meine. Ich habe beschlossen, dass 50 Pixel gut aussehen. Ich habe es auf die linke Seite gelegt. Also, das hat, das ist so, kontaktieren Sie mich auf der linken Seite. Parsing auf der linken Seite. Dieser auf der linken Seite bemerkt man nicht. Wenn Sie es auf der rechten Seite setzen, wird es den Kontakt weg von der Kante schieben . Vielleicht wollen Sie das. Lass uns gehen. Lassen Sie uns gehen und bewegen die Farben und die Unterstreichungen. Jetzt können wir nicht gehen und entfernen Sie die Farbe und Unterstreichungen von dieser kleinen Gruppe hier, einfach nicht funktioniert. Das Listenelement ist die Art der Liste, aber nicht die eigentlichen Schriftarten selbst. Also müssen wir etwas tiefer runter gehen. Und in unserem Fall ist es das A-Tag. Und wenn Sie sich nicht sicher sind, welche Tags Sie oft stylen sollen, kann es wirklich praktisch sein, wenn ich hier klicke, können Sie sehen, dass es mein Tag gibt, das sich in einem Verbündeten befindet, der sich innerhalb einer URL befindet, die sich innerhalb Widgets in meinem Kopf, der in meinem Körper ist. Du könntest das alles ausschreiben. Also haben wir gerade den Verbündeten gemacht. Du könntest das alles ausschreiben, aber es gibt keinen wirklichen Sinn. Und das ist einzigartig genug als Navigation, also stoppt es dort. Und so möchte ich meinen Tag beginnen, der in diesem und in diesem ist. Also gehen wir und machen das. Also würde ich gerne Stil, mein Freund, Dinge, die ein Tags, die innerhalb der Verbündeten sind, dass innerhalb der URLs, die in einem n-av sind, und geschweifte Klammern. Ich möchte eine Textdekoration als erste machen, und Sie können sehen, dass Sie eine Überzeile, Unterstrich, Linie durchsetzen können. Ich möchte zu keiner gehen, weil standardmäßig eine Unterstreichung hat. Niemand mag es. Und als nächstes wird die Farbe sein, die nur von selbst gefärbt ist, ist die Schrift? Sie können Ihren Farbwähler verwenden. Wählen Sie eine beliebige Farbe aus, die Sie möchten. Wenn Sie die hexadezimale Zahl kennen. Ich benutze RGB hier, weil Sie Transparenz verwenden können und es ist neu und es ist fantastisch und es funktioniert auf kleinen browses.You könnte einfach Hicks verwenden, wenn Sie daran gewöhnt sind, diese kleinen Hashtags zu verwenden. ist nichts falsch. Es ist nicht zu alt. Sie können dies sogar tun, wenn wirklich, können Sie weiß schreiben.Das funktioniert auch. Okay, also, jetzt habe ich einige Links, die anklickbar sind, nirgendwohin gegangen sind, weil ich diese kleinen Hashes im Inneren habe . Es gibt keinen Fehler, als ob es sich um einen Abstand handelt, weil dies Zeilenabstand ist. Schauen wir uns die Schrift an. Jetzt könnten wir die Schrift hier aufhalten. Also könnte ich hier reingehen und Schriftfamilie sagen, und ich kann sagen, was ich sein soll. Nun, das einzige Problem damit ist, dass das nächste, was ich tue, was dieses Stück Blocktext hier sein wird, dieselbe Schriftart sein wird. Also müsste ich es nochmal sagen. Dann sagt dieser p-Tag „Schriftart-Schaltfläche, gleiche Schriftart“. Die ganze Website wird Aerial verwenden. Was wir also tun, ist, dass wir sagen, anstatt jedes einzelne Tag zu stylen, ist hier ganz oben. Und wir haben eine Leichenmarke. Wir sagen, du mein Körper, ich mag alles, was in diesem Body-Tag ist, was alles auf meiner Seite ist. Denken Sie daran, ich werde eine Schriftfamilie von haben, und was werden wir wählen, es gibt eine Reihe von Gruppen hier. Ich mag diese kleinen Gruppen nicht. Ich ziehe es vor, Aerial zu haben in ein Komma zu setzen und dann werde ich einen vollen Rücken von Sans Serif haben, Semikolon, nett. Nun, wenn Sie andere Schriftarten verwenden möchten, Mao Open Sans, Soil Sands, wie die New Aerial. Sie können entweder die Schriftarten von Doby verwenden oder Google-Schriftarten verwenden. Und wir werden es nicht in diesem Fall abdecken, weil es ohnehin ziemlich apisch lang sein muss. Aber schau dir einen meiner anderen Kurse an, vor allem den Bootstrap für Dream-Weaver , der Schriftarten und viel mehr Details abdecken wird. So wurden Schriftarten gemacht. Für alles, was auf dem Dokument erscheint. Das nächste, was wir tun werden, ist, dass ich an meinem Beispiel von Cs ihn aus dem Zentimeter versteckt hätte. Kids Art wie eine feste Breite und die Mitte und die dehnbare Außenseite.Das ist, was ich im Moment tun möchte. Mein Beispiel hier ist, dass er irgendwie verschleiert, der ganz nach rechts und ganz nach links abfeuert. Es ist nicht ganz das, was ich will. Also möchte ich hier ein paar wie gefälschte Grenzen einlegen. Also gehen wir und machen das. Es ist ganz einfach. Können wir es nur die Leiche machen? Der Körper ist die Mitte von allem. Wir sagen „Sie Körper, ich möchte eine maximale Breite von haben“, es liegt an Ihnen, was Sie in, und ich werde es in 1024 Pixel setzen. Entweder das oder 1200 davon, wie wirklich, gängige Größen. Und so ist 1024 die maximale Breite, die Box sein kann. Und schauen wir uns mal an. Es wird eine Art Arbeit sein. Also ist es auf diese Art von Größe fixiert, aber als Standard nach links, also wollen wir es so kleben, dass es streng in der Mitte ist. So ist es immer noch sehen kann maximale Breite ist wirklich schön für responsive Websites. Also setze es nicht in die Breite, weil das physikalisch für immer 1024 sein wird, während max-Breite sagt, was auch immer bis zu einer maximalen Breite 1024 erhalten wird. Reaktionsfähigkeit. Also, und um es zentriert zu werden, ist es etwas namens „Margin Order“. Also können Sie in den Rand links setzen und in Ordnung bringen, und Sie setzen in den Rand rechts, in Ordnung, und das bedeutet nur, dass ich zentriert sein werde. Okay, also was wir tun werden, ist, dass wir das hier lassen. Ich weiß, wir sind noch nicht fertig, aber was ich tun werde , ist, dass ich das in zwei Töpfe zerlegen werde, also ist es nicht so lang. Das werden wir für den Moment sein, den wir durchmachen und den Rest der Seite erledigen. Wenn Sie das Gefühl haben, „Ich weiß nicht, was ich jetzt mache“, springen Sie wieder zum nächsten und nachher, und Sie können sich die ansprechenden mobilen Sachen des Videos ansehen. Denn jetzt sind wir nur in grundlegende Web-Design, was cool ist, und bekommen unsere Waage. Aber du kannst mitspringen, wenn du willst. Na gut, wir sehen uns als Nächstes. 12. 12 Produktionsvideo Aufbau des übrigen Materials: Hallo an alle. In diesem Video werden wir fertig bauen unsere Website, fügen Sie nur einige Texte, einige horizontale Zeilen, machen Sie einen kleinen Knopf, und es wird alles reaktionsschnell und video-ey. Gehen wir und machen das jetzt. Das erste, was wir tun werden, ist, dass wir unsere Kopfzeile haben, wir haben unser Navi da drin, und da ist unser Image-Logo. Was wir jetzt tun werden, ist, den Hauptteil der Website hinzuzufügen. Glücklicherweise heißt das HTML-Tag main. Das ist, wo all deine wichtigsten Sachen hingehen. Nun, unser Hauptbereich, wenn Sie sich unser Mock-up hier in Photoshop ansehen, ist es ziemlich einfach. Diese Website ist wahrscheinlich ein wenig unrealistisch. Sie werden hier ein bisschen mehr Inhalt haben. Oft zerlegen Sie Ihr Haupt in verschiedene Abschnitte. Unser Hauptteil, hier geht's, wird dies sein. Dann können Sie zwei Abschnitte haben. Möglicherweise haben Sie den Abschnitt für das Heldenbild und darunter einige Thumbnails und sie könnten einige Zeugnisse sein. Sie können alle in verschiedenen Abschnitten sein. Sie können sie auch einfach div-Tags nennen. Wir verwenden hier nur mehr standardisierte HTML-Sprache, aber div ist auch in Ordnung. Im Inneren wird meine große Überschrift sein. Wo ist die große Überschrift? Dieses Ding hier: „Kreativität ist ein wilder Geist und ein diszipliniertes Auge.“ Was ich tun werde, ist h1 einzugeben. Hinzufügen von Registerkarten Unser h1 ist also unsere Überschrift 1, unsere wichtigste Überschrift auf der Seite. Du brauchst ein h1. Da ist es da. Lassen Sie uns es im Browser überprüfen. Da ist es. So sieht ein h1 unstylt aus. Normalerweise ist er Times New Roman. Aber er ist Arial, weil denken Sie daran, dass wir Arial auf den Körper gesetzt haben, also ist alles im Inneren Arial, aber es gibt ein gutes bisschen Styling, das wir tun müssen. Er muss Großbuchstaben und weiß sein. Er muss von oben geschoben werden. Lasst uns ihn zuerst von oben drängen. Schauen wir uns das an. In Dreamweaver möchten wir etwas Polsterung an die Spitze von h1 setzen, das einzige Problem dabei ist, dass jede Seite eine h1 benötigt und nicht alle brauchen diese Polsterung. Was wir tun können, ist eigentlich, dass wir den Abschnitt sagen können, wir können ihm eine kleine Klasse geben und diesem Abschnitt sagen, dass er etwas Polsterung hat, nur um die h1 nach unten zu drücken. Gehen wir und machen das. Ich könnte einen Abschnitt stylen, aber denken Sie daran, dass Seiten wahrscheinlich mehr als einen Abschnitt haben werden, also möchten wir ihm ein wenig Spezifität geben. Es spielt keine Rolle, ob Sie die Klasse hier erstellen und sie anschließend im CSS erstellen oder sie in diesem CSS erstellen und sie hier an zweiter Stelle anwenden. Ich werde dem eine Klasse geben, vielleicht können wir diese selbst nennen. Ich nenne das hier meine Heldenbox. Okay, ich werde nur Held setzen. Es hat hier einen Klassennamen, und ich habe meine Stile. Ich werde hier unten eine Klasse machen. Was geht nun vor einer Klasse? Das ist richtig, Full Stop oder eine Periode. Ich werde es Helden nennen, geschweifte Klammern. Drücken Sie behalten, trennt sie aus. Was ich gerne tun würde, ist etwas Polsterung oben zu machen. Wie viel? Ich habe es bereits herausgearbeitet, indem ich ein wenig herumspiele, und das wird eine Polsterung von 80 Pixeln haben. Speichern. Schauen wir uns mal an. Los geht's. Schieben Sie sie von oben nach unten. Gehen wir und stylen Sie jetzt h1. Dann mein CSS unten unten hier und lege mein h1 ein. Da ein h1 ein vorhandenes Tag ist, ist es keine Klasse, die wir erstellt haben, wir haben einfach keine Periode an der Front. Wir werden einige Sachen zum h1 hinzufügen. Was wir tun werden, ist auf Schriftgröße gehen, Schriftarten, da ist er da, Größe von 4.6em Semikolon. Großartig. Was sonst noch? Wir geben ihm eine Farbe von Weiß, es ist #FFF. Wir können den Farbwähler dort verwenden, wir tippen in weiß. Ich werde es Großbuchstaben machen. Also ist es Texttransformation derjenige, den ich will. Sie können dort sehen, ich kann es Kleinbuchstaben machen. Ich werde alles zwingen, Großbuchstaben zu machen. Schön. In meinem Fall will ich die Marge direkt darunter. Ein kleiner Rand darunter, um ein bisschen größer von 20 Pixeln zu sein. Das wird mir erlauben, was ich tun könnte. Es gibt eine kleine Lücke darunter, die ich nach unten drücken möchte wo dieses horizontale Lineal hineingeht. Holen Sie sich in den Browser. Cool. Wir sind irgendwie da. Es ist groß, es ist mutig, genau das wollte ich tun. Das Einzige ist, dass ich auf dieser linken Seite zerschlagen will. Schauen wir uns Photoshop an. Ich wollte mich damit auseinandersetzen. Ich werde der Box etwas Polsterung hinzufügen. Wir haben es getan, bevor wir es oben auf unserer Heldenbox hinzugefügt haben, um es nach unten zu drücken. Wir können dasselbe für die Polsterung auf der rechten Seite tun, um sie zu schieben. In Dreamweaver. Wir haben es hier in meiner Heldenbox gemacht. Ich werde nur etwas Polsterung auf der rechten Seite hinzufügen, und es wird 250 Pixel sein. Ich werde auch etwas Polsterung an der Unterseite hinzufügen, nur um es unten abzudrücken, weil sonst der ganze Text dort unten zerschmettert wurde. Ich will, dass es ein bisschen abheben wird. Schauen wir uns mal an. Ehrfürchtig. Eine Umdrehung von 50 Pixeln da drüben, und was war es? 80 entlang der Spitze, und es ist ein bisschen hier unten, nur um alles von unten zu halten. Zurück in Dreamweaver. Als nächstes ist das horizontale Lineal. Ich möchte eine Linie drunter setzen. Es gibt ein paar Möglichkeiten, es zu tun. Der einfache Weg ist gerade unter diesem h1. Setzen Sie etwas ein, das eine HR-Registerkarte genannt wird. Das Seltsame an einer Hr ist, dass alles andere eine Öffnung und eine Schließung hat, die HR nicht. Es ist nur von selbst. Lassen Sie uns es im Browser überprüfen. Da ist es. Da ist mein horizontales Lineal. Es erstreckt sich den ganzen Weg entlang. Was wir tun können, ist es ein bisschen zu stylen. Jetzt werden wir einen praktischen Dandy neuen kleinen Trick verwenden. Wir sind zwischen diesem und dem, und dem und dem und dem hier gesprungen . Dreamweaver 2017 hat zumindest diese neue Funktion. Wenn ich mit der rechten Maustaste auf ihn klicke und zu diesem Ding namens „Quick Edit“ gehe, ist es genial. Was es tut, ist es öffnet diese kleine Laune Halt für Ihr CSS. Was es tut, ist es sagt: „Im Moment gibt es kein Styling für diese hr. Möchten Sie einen machen?“ Sie sagen: „Ja, bitte Neue Regel.“ Sie können sehen, dass ich tatsächlich in meinem CSS-Blatt in Zeile 55. Es ist tatsächlich in die Syntax, die ich brauche, in die geschweiften Klammern, die bereit sind, zu gehen. Cool, huh? Ich werde eine Höhe davon setzen. Im Moment war es nur ein Pixel, ich werde in 10 Pixel setzen, das ist ein bisschen dicker. Lass uns das speichern und sehen, wie es aussieht. Sie sehen, wie unsere Horizontale mit einer Höhe aussieht. Es gibt ein paar Dinge, die wir tun müssen, damit es gut aussieht. Wir müssen eine Hintergrundfarbe eintragen. Hintergrundfarbe von Weiß oder FFF mit einem Hash, Semikolon. Das einzige Problem ist, dass Sie es möglicherweise nicht sehen können, selbst wenn wir hineinzoomen. Siehst du, da draußen ist eine seltsame Grenze. Es ist nur Standard auf einem horizontalen Lineal. Was wir tun werden, ist die Grenze auf Null Pixel zu setzen. Nun, es sieht vielleicht nicht ganz anders aus, aber es stört mich das Ding. Wie auch immer, das ist es. Sie können ihm auch eine Breite geben, wenn Sie möchten. Im Moment haben wir ihm eine Höhe gegeben, aber keine Breite, ich lasse es auf die Polsterung gehen, die hier auf der Seite gegangen ist, Sie können es in klein stecken, wenn Sie möchten, indem Sie ihm nur eine Breite geben, ich werde meine verlassen. Weiter oben ist der Text, der darunter geht. Gehen wir und fügen das hinzu. Bevor wir das tun, lassen Sie uns das schließen. Lassen Sie uns in den Stilen überprüfen und Sie können sehen, die Unterseite hier ist meine horizontale Regel. Es erspart dir nur, da reinzugehen, um es zu ändern. Wir werden es zumindest erstellen, gehen wir zurück zum Quellcode und lassen Sie uns unser bisschen Text einfügen. Nun, Text, Jimly, ist in einem p-Tag enthalten. Das ist der Text der Textkopie auf einer Seite. H1's Enthauptungen und so ziemlich alles andere, aber es ist kein H1, 2 oder 3, wichtige Überschriften, es ist ein p-Tag. Was wir tun werden, ist in diesem p-Tag, wir werden eine Reihe von Text einfügen. Sie könnten die Tastatur zerschlagen und gefälschten Text einfügen, das würde funktionieren. Aber es gibt einen netteren Weg, es mit Lorem ipsum zu tun. Wenn du ein Designer bist und wie, großartig bist, werde ich dorthin gehen, es ist bei lipsum.com und hol dir den Text von dort. Es ist keine gute Möglichkeit, dies zu tun, da das Kopieren und Einfügen von dieser Website Code durchlaufen kann , den wir auf unserer Website nicht wollen. Was wir tun werden ist, dass es in Dreamweaver integriert ist. Wenn ich Lorem tippe und Tab drücken, schau dir das an, es ist ein eingebautes Lorem ipsum. Cool. Ich weiß, wie viele Wörter, sagen wir, Sie arbeiten mit einem Copyrighter und der Copyrighter schreibt zu einem Schreibplan, also schreibt er 200 Wörter für die Homepage und diese vielen Wörter für diese Seite. Sie haben also eine grobe Idee, wenn Sie entwerfen, naja, wie viele Wörter es sein wird. Sagen wir mal, ich weiß, dass meine Worte tatsächlich 52 sind. Ich weiß es nicht. Es ist ziemlich präzise. präzise wirst du nie sein. Aber die coole Sache an dieser kleinen Abkürzung in Dreamweaver ist Lorem und Sie setzen 52, Hit Tab, das ist genau 52 Wörter, wirklich praktisch. Lass es uns speichern, im Browser überprüfen, da gehst du, da ist mein p-Tag. Standardmäßig ist es schwarz, 16 Pixel oder ein em. Lass uns das jetzt reparieren. Wir benutzen unseren hinterhältigen Trick. Klicken Sie mit der rechten Maustaste darauf, schnelle Bearbeitung, es gibt keine Regel, erstellen Sie es mit einem p-Tag, und ich werde Farbe machen. Farbe von selbst, denken Sie daran, ist das weiß, fff tut. Das einzige, was ich ändern möchte, ist wahrscheinlich die Zeilenhöhe und es wird 1,5 em sein, also eineinhalb Zeilenabstand. Der Standard ist ein em und ich bin glücklich damit mit der Körperkopie, es ist eine gute Größe, aber ich setze die Zeilenhöhe ein, den Abstand zwischen den Zeilen, all die [unhörbaren], lasst es uns überprüfen. Schön. Nun, eine Sache, die ich gerade an der Spitze hier bemerkt habe, ist, dass die Syntax von diesem ist, ich habe keine Ahnung, warum das hier ist. Lass uns nachsehen. Zunächst einmal werde ich diese Seite aktualisieren. Verschwunden. Das ist gut. Also hatte meine kleine Vorschau hier einen kleinen Fehler, denke ich. Keine Ahnung, wie das kam. Ich werde es schließen. Ehrfürchtig. Ich denke, es ist diese schnelle Editier-Sache, dass es vielleicht einen kleinen Fehler damit gibt, aber es ist jetzt alles gut gegangen. Schön, also lasst uns einen Eulenknopf darunter legen. Sieht so aus in meinem Mock-up. Es ist nur ein Text mit einigen Sachen um ihn herum, aber es ist anklickbar, und wie Sie eine Schaltfläche wie diese erstellen. Alles, was ist ein Tag, wie wir es für einen Hyperlink getan haben, was wir hier oben getan haben. Erinnern Sie sich an unseren Tag, also ein, und drücken Sie „Tab“. Wo soll es hin? Wir werden unser Platzhalter-Pfundzeichen einfügen. Was ist der Text? Hier steht, überprüfen Sie unser Portfolio. Das wird uns ein paar Sachen geben, schauen wir uns mal an. Groß und blau. Wir werden das Gleiche tun, was wir hier oben getan haben und einfach das Styling entfernen, und wir werden einige Grenzen um ihn herum hinzufügen. Um dies zu erreichen, muss ich eine Klasse hinzufügen, denn wenn ich alle a-Tags starte, wird jedes einzelne Tag auf jeder einzelnen Seite zum Stillstand gebracht und ich will das nicht. Denken Sie daran, dass wir eine Klasse hinzufügen. Großartig. Ich werde ihm einen Namen geben, ich nenne das meine Knopfklasse. Manchmal ist das Aufrufen einer Schaltfläche keine gute Idee, wenn Sie beispielsweise Bootstrap verwenden, weil sie diese Syntax verwenden. Du nennst es vielleicht etwas anderes, du nennst es meinen Aufruf zum Handeln. Das ist ein bisschen ein langer Name. Das ist meine Klasse. Ich werde hier in meinen Stilen gehen, unten unten, eine Klasse machen, und dann haben die Klassen einen vollen Halt davor. Danach legen Sie nun geschweifte Klammern ein. Was ich damit machen werde, ist vor allem Hintergrundfarbe, Hintergrundfarbe. Wir tun das mit einem Link, aber was es uns erlauben wird, ist, diesen roten Rand hinzuzufügen. Sie könnten eine Box erstellen und den Text darin einfügen, aber es ist einfach, den Text zu verwenden und einen Rahmen um ihn herum zu machen, wenn Sie wissen, was ich meine. Ich weiß, ich benutze f1474c, Semikolon dies, diese rote Farbe. Eine coole Sache in CSS jetzt in Dreamweaver, wenn Sie darüber schweben, sollte es Ihnen ein kleines Symbol geben. Praktisch. Andere Dinge, die ich tun möchte , tatsächlich, lassen Sie uns im Browser überprüfen, Sie können sehen, es gibt diese rote Farbe, aber um es mehr wie eine Schaltfläche zu machen, müssen wir etwas Polsterung hinzufügen. Sie können durch gehen und sagen Polsterung oben, Polsterung links, Polsterung rechts, Polsterung unten. Ich habe diese verwechselt, aber Sie können alle vier dieser Eigenschaften bearbeiten, aber jetzt in CSS können Sie nur Padding hinzufügen, und was passiert, ist, es geht davon aus, Sie können sie in Ordnung bringen, ich zeige Sie, also möchte ich, dass die Spitze 18 Pixel ist. Sie können das kleine Popup hier sehen. Sie können sehen, ob ich es so lasse, es wird für alle vier von ihnen gelten, also werde ich den ganzen Weg lang Polsterung haben. Ich setze mein Semikolon, speichere es, sieh mal an. Sie können diese 18 den ganzen Weg herum sehen, anstatt alle vier von ihnen definieren zu müssen. Sie können tatsächlich ein bisschen klüger werden, weil ich will , dass die Größe so ist die Spitze 18, aber ich will, dass das Recht 30, fast doppelt. Sie können hier sehen, jetzt sagt es oben rechts ist 30, unten ist 18 und 30 es dupliziert diese. Im Wesentlichen geht es im Uhrzeigersinn, beginnt oben, geht rechts, geht von links nach unten. Was ich jetzt tun könnte, ist 18 Pixel und 30 Pixel zu gehen, nur um es vielleicht klarer für Sie zu machen, anstatt oben, links, unten zu schreiben. Wie auch immer, lassen Sie uns es retten. Lass uns nachsehen. Ehrfürchtig. Ich möchte einige Abstände zwischen diesen Zeilen setzen, also was ich tun werde, ist, dass ich eine Zeilenhöhe einfüge, Manchmal kannst du eine Polsterung oben setzen, aber in diesem Fall wird die Zeilenhöhe besser für uns funktionieren. Vier Ems, retten Sie es. Schön. Schieben Sie es von da weg. Lassen Sie uns die Farbe ändern, zu fff, und loswerden der unterstrichenen, und wir haben früh, erinnern Sie sich. Textdekoration und wir werden keine gehen, bitte. Befreien Sie sich von dieser Unterstreichung. Schauen wir uns mal an. Sieht gut aus. Klicken Sie, es ist anklickbar. Es ist ein netter kleiner Knopf. Ganz einfach zu tun, ein wenig CSS auf Ihrem HTML, netter und sauberer Code. Du hast das gerade ein Tag mit der Klasse um sie herum bekommen. Schön. In Ordnung, meine Freunde. Wir haben eine coole kleine Seite gemacht. Das ist das Ende, denn so ziemlich alles andere, wenn Sie mehr hinzufügen möchten, können Sie einen anderen Abschnitt hinzufügen. Wir werden nicht in große Details zu dieser einen gehen, nur ein bisschen eine Übung, um diese Website zu bauen. Also haben wir das jetzt gemacht. Der nächste Schritt ist, einige ansprechende Sachen zu betrachten. Was haben wir getan? Wir haben diese Seite erstellt. Es ist eine langweilige alte Schrift, Arial, ich weiß, aber wir haben ein nettes, cooles Video im Hintergrund. Wenn ich die Größe ändere, geht es in den Hintergrund, bekam einen klickbaren Link. Es ist ziemlich cool. Eine Sache, bevor ich gehe, kann ich mir nicht helfen, du siehst Polsterung oben hier, es ist zu nah. Was wir tun können, ist etwas Padding zum Header hinzuzufügen. In hier, meine styles.css, gehe ich nach unten und ich werde Header erstellen, und im Inneren von hier werde ich Padding sagen. Ich werde nur das Top in diesem Fall tun und ich möchte bitte 30 Pixel hinzufügen. Es ist von oben. Schön. In Ordnung. Das werden wir sein. Ja, lasst uns ins nächste Video springen. 13. 13 Erstelle einen a für mobile & reaktionsfreudig: Hallo an alle. In diesem Video schauen wir uns an, unser Hintergrundvideo für Mobilgeräte bereit zu machen. Was wir tun werden, ist, Sie können sehen, dass das Video im Hintergrund abgespielt wird, aber wenn ich es auf mobile oder mobile Simulation schrumpfen, dann können Sie sehen, dass das eigentliche Video schaltet sich nur mit dem farbigen Hintergrund dort. Warum machen wir nur ein Video bereit für Mobilgeräte? Hauptsächlich, weil mobile Hersteller oder zumindest ihre Betriebssysteme keine Videos abspielen lassen. lassen sie nicht automatisch wiedergeben, Sie können immer noch Videos auf Ihrer Website haben, und mit Ihrem Host und sich selbst oder YouTube. Diese sind immer noch in Ordnung, weil diese Benutzer erlauben, drücken „Play“ und sagen: „Ja, ich werde dieses Video spielen.“ Während automatische Hintergrundvideos, beginnen sie ohne Steuerelemente abzuspielen. Sie wollen also nicht aus ein paar Gründen, einer ist Daten. Sie könnten unterwegs sein und einfach nicht erkennen, dass Sie kauen viele Videodaten, weil diese Website spielt dieses große lange Video im Hintergrund, also ist das einer der Gründe. Der andere Grund ist die CPU-Auslastung. Wenn Sie jemals gesehen haben eine Reihe von Videos im Durchschnitt suchen Laptop, es kann durch die Verarbeitungsleistung und die Batterie ziemlich schnell von einem Laptop brennen, und auf einem Telefon offensichtlich, es ist viel mehr ein Deal. Es ist eigentlich wirklich einfach, mobile Versionen oder reaktionsschnelle Versionen dieses Video-Hintergrunds zu machen , weil wir es einfach ausschalten wirklich, und ersetzen Sie es durch eine Hintergrundfarbe. Gehen wir und machen das jetzt. Lass uns in Dreamweaver springen. Was wir tun müssen, ist zu unserer styles.css zu springen und wir werden in unsere erste Medienabfrage für diesen Job setzen. Nun, wenn Sie nicht mit Medienanfragen vertraut sind, werden wir sie eigentlich nur hier abdecken. Wenn Sie direkt in eine responsive Website gelangen möchten, ist das die Aufgabe für ein anderes Tutorial. Um meine Programmierung für Designer mit Dreamweaver 2017 zu erhalten, decken wir vollständig [unhörbare] mobile Tablet-Desktop-Versionen ab, aber die dünne Version ist, wie Sie etwas namens @media einfügen, und das ist sofortige Abfrage. Wir setzen etwas ein, das eine maximale Breite genannt wird, und in unserem Fall werden wir 400 Pixel auswählen. Jetzt werden sie meine geschweiften Klammern setzen. Was eine Medienabfrage tut, ist, dass der Browser überprüft, um zu sehen, wie breit der Browser ist, und wenn dieser Browser 400 Pixel oder weniger ist, wird er den Code aktivieren, der hier ist. Für uns bedeutet das, dass wir ein Video sagen, das bei diesem Ding abschalten soll. Das ist alles Medienabfragen sind und das ist Re-Viertel Responsive Web-Design, ist, dass Sie eine sehr steife sofortige Abfragen, die Dinge sagen, ein- und ausschalten, abhängig von der Bildschirmgröße. Was ich also gerne tun würde, ist, dass ich dieses Video-Tag hinzufügen werde, also bin ich wieder hier im Quellcode. Es gibt da, das Video-Tag hier. Ich möchte, dass du es machst, ist auszuschalten, wenn es mobil ist. Wenn Sie es auf diese Weise tun, wenn wir das gesamte Video-Tag ausschalten, bedeutet dies nur, dass jedes Video auf unserer Website, es wird ein Handy ausschalten und das ist möglicherweise nicht notwendig, was wir wollen, also werden wir diese Klasse zu hemmen, die wir bearbeiten früher als Vollbild bezeichnet, werden wir ihn auch hinzufügen, um es ein wenig spezifischer zu machen. Video und dann in einem vollen Stopp und setzen Sie in einem Vollbild, mehr geschweifte Klammern, und was wir sagen werden, ist zeigen meine Freundin von? Keiner, Semikolon. Nun, was passieren sollte, ist, dass, wenn es auf eine Bildschirmbreite von 400 Pixeln oder weniger kommt, es wird dieses Bit Code nur zu diesem Zeitpunkt aktivieren und es wird das Display auf keinen für dieses spezifische kleine Ding hier, dieses video.fullscreen. Lass es uns nachsehen. Also hier ist der Desktop, geht runter, und wird ein mobiler Bildschirm pro Tag, es ist weg. Nun, es funktioniert. Mein Text ist weiß, obwohl auf weißem Hintergrund. Sie können den Text sehen, es ist ein wenig durcheinander hier oben, also sollten wir durch in eine voll responsive Website gehen, aber wir werden dies mehr über Video-Hintergründe fokussieren. Wenn Sie eine vollständige Website wollen, gibt es eine Reihe von Tutorials, die ich habe, um vollständige Websites zu erstellen, aber lassen Sie uns gehen und versuchen, das aus, um eine Farbe zu haben. So schön und leicht. Was wir tun werden, ist die Leiche hier, wir sagen, Sie haben eine Hintergrundfarbe. Von welcher Farbe? Ich habe eine hier in meinen CC-Bibliotheken. Wir verwenden keine CC-Bibliotheken. Du musst nicht, sie sind fantastisch, aber das ist die Farbe, die ich will. Wenn ich darüber schwebe, können Sie sehen, dass die Farbe ist, also lassen Sie es im Browser überprüfen. Also hier oben für Video, werden wir in mobile, eine schöne schnelle schnelle Laden Farbe Hintergrund bekommen . Ignoriere den Text, die alle, ich habe ein wenig vermasselt. So gehst du mit Videos um, die auf Mobilgeräten verfügbar sind. Es könnte eine Hintergrundfarbe sein, Sie könnten es zu einem Hintergrundbild suchen, wenn Sie möchten, bis zu Ihnen. Also, das sind wir schöne Web-Design-Leute, wir haben unser Video im Hintergrund, und es schaltet sich für einen farbigen Hintergrund, wenn es auf den mobilen Bildschirm kommt. 14. 14 Füge eine bestimmte div auf deiner Website hinzu.: Hallo da. In diesem Video werden wir einen Video-Hintergrund machen, aber innerhalb des enthaltenden div-Tags hier. Sie können dieses hier sehen, anstatt vollständig Hintergrund zu sein, es ist in dieser schönen kleinen leichten Katzentoilette Form hier. Was Sie hier sehen können, ist, wenn ich es neu Größe, können Sie sehen, das Video wird kleiner und ändert sich. Dieses vorhandene Video stammt aus einem vorherigen Tutorial, in dem wir eine Website in Dreamweaver mit Bootstrap erstellt haben. Wir werden nur in das Ende des einen springen und dieses Video in den Hintergrund stauen. Das coole daran ist, dass, wenn Sie die vorherigen Tutorials gemacht haben, es ziemlich genau das gleiche ist, aber ein paar kleine Änderungen. Es ist viel wichtiger, wohin das geht. Wir müssen herausfinden, in welches div-Tag es gehen wird, und wir sahen uns das an, sie sind wie Heldenbox. Diese Website, die ich hier schaue, sprang gerade in ein altes Tutorial, das ich getan habe, wenn Sie mein Dreamweaver Bootstrap Tutorial getan haben, das ist, wo wir landeten. Also, was wir tun wollen, ist, dass ich die Heldenbox finden will, und das ist, wo ich in diesem Video bleiben möchte. Wo geht es hin? Möglicherweise müssen Sie damit herumspielen, es hängt davon ab, wie Sie Ihre Website formatiert haben. Wenn du mir genau gefolgt bist, geht es zwischen Reihe und dieser Spalte groß hier 12. Aber wenn Sie etwas anderes mit Ihrem Design gemacht haben, was Sie wahrscheinlich haben, müssen Sie dies möglicherweise kopieren und einfügen. Es könnte sein, dass es in den Container geht, direkt unter dem Container oder nur unter der Zeile oder in die Spalte oder in einen anderen div-Abschnitt, den Sie haben, also spielen Sie einfach damit herum. Es ist so, als ob es vorher war. Wir werden in Video sogar und dann SRC für die Quelle. Wir werden dieses Video von hier zu bekommen und klicken Sie auf „Durchsuchen“. Ich habe keine auf der Website, aber ich habe meine Übungsdateien, meinen Desktop unter Video, und das ist derjenige, den ich früher in premiere pro erstellt habe. Entwerfen Sie eine Heldenbox, klicken Sie auf „Öffnen“. Es ist nicht auf meiner aktuellen Seite. Möchten Sie es kopieren? Ja, bitte, wo möchte ich es hinstellen? Ich mache einen Ordner namens Videos. Großartig. Save, cool fast erledigt. Wir wollen, wie vorher, wir wollen, dass dieses Auto spielt und wir möchten, dass es Schleife, bitte. Okay, und wir schließen das Video-Tag ab. Lassen Sie uns überprüfen, wie das in einem Browser aussieht. Hey, es funktioniert. Das ist nur ein Schnitt fügen Sie ein Video zu einer Seite. Nicht als Hintergrund, also lass uns das als nächstes tun, aber mit einem besseren Hintergrund. Nun, um dies zu erreichen, lasst uns in Dreamweaver springen, was wir tun müssen, ist es als Hintergrund zu setzen und wir müssen es geben, wir könnten das Video-Tag verwenden. Aber wieder, wenn wir das Video-Tag an anderen Orten meiner Website verwenden, könnten wir am Ende jedes einzelne Video auf dieser Website auf einen Hintergrund setzen und das wollen wir nicht tun. Also, was Sie tun werden, ist, geben Sie ihm eine Klasse, erinnern Sie sich an unsere Klassen, etwas, was wir hinzufügen und benennen, dass wir wählen können. Wir können das Ding so nennen, wie wir wollen. Dehnbares Hintergrund-Dingy. Nie eine Spalte so lange, es ist nichts falsch daran außer wie ich, ich habe einen Freund entwickelt, die am Ende meine Website öffnen und entweder lachen oder weinen, wie lange einige meiner Klassen sind. Ich bin in main.css. Was ich tun werde, ist, dass ich meine hier in meine Heldenbox stecke. Also direkt darunter haben wir eine Periode am Anfang und fügen sie dann für eine Klasse ein, Calibraces. Im Inneren von hier, hier werden wir einige der Dinge hinzufügen. Dies muss zunächst die Position eingestellt werden. Die Position wird also sein, wo wir bis jetzt fixiert und die anderen Übungen verwendet haben. Also schauen wir uns fixiert an. Es bedeutet, dass es immer da sein wird, was ein bisschen seltsam für das ist, was wir wollen. Wir wollen hier in diesem div sitzen, also werden wir das andere verwenden, das absolut genannt wird. Wenn wir nun scrollen, wird es mit der Seite nach oben und unten gehen. Man kann sehen, indem man absolut positioniert, es ist tatsächlich schon dahinter versteckt. Es ist noch nicht ganz oben in den Ecken und dehnbar, also lasst uns das machen. Das ist wie wir das vollständige Hintergrundvideo gemacht haben, wir setzen in eine min Breite von 100 Prozent Semikolon, und eine min Höhe von 100 Prozent Semikolon und dann setzen wir in die Breite und Höhe erinnern nur wegen Auto. Es wird uns keine Probleme in diesem hier verursachen, aber es gibt Zeiten, in denen es so ist, also stecken Sie es einfach ein. Also Höhe und Breite, sind auto, auto. Schauen wir uns ein wenig an und es funktioniert, wir kommen dorthin. Es dehnt sich die ganze Höhe aus. Es gibt ein paar Dinge, die wir tun müssen. Zuallererst müssen wir es in dieser Ecke verklemmen, denn es fehlt. Es verwendet diese etwas Polsterung in dieser Box hier, also brauchen wir eine vollständige Einrichtung in der Ecke. Du musst es vielleicht nicht für deine tun. Das ist also optional. Meiner braucht es definitiv. Also links möchte ich, dass du null Pixel bist, also wird es ganz links sein. Dann werden wir die oben, auf die gleichen, Null Pixel setzen. Es gibt Rand am Ende oben. Was wir jetzt tun müssen, ist ihn zu bekommen, er tut alles, was wir wollen, er ist in der Größenänderung , er reagiert, aber er muss blockiert werden und wissen, was das div-Tag, in dem er sich befindet, tut. Wir müssen dies durch das Container-div tun. Das Container-div ist diese Heldenband. Wenn ich hier reinsehe, könnte deine anders sein. Das ist derjenige, in dem ich ihn reinstecke. Also, was ich tun möchte, ist, dass ich das hier sagen will : „Du, mein Freund, musst eine Position als Verwandter haben.“ Er wird gesagt, er soll relativ sein, dieser Kerl benutzt das als seine Basis. Wir haben eine reaktionsschnelle Hintergrund-Sache. Das ist es, wenn Sie nur von anstelle eines vollständigen Hintergrunds zu nur einem innerhalb von hier gehen möchten. Nun, für uns, eine Sache, die wir nicht tun mussten, und viele Beispiele, die Sie werden, ist, dass Sie mit dem C-Index herumspielen müssen. Sie müssen dies möglicherweise festlegen, hängt wirklich davon ab, wie Sie es arbeiten möchten, aber sagen Sie, dass der dehnbare Hintergrund möglicherweise auf Z-Index von vielleicht minus eins oder minus 100 gesetzt werden muss, ist egal, solange er unter Null ist und Sie müssen das vielleicht tun. Was in meinem Fall passiert, ist, dass er hinter dem Kerl hier sitzt, der Bandheld ist jetzt auf Null, also ist dieser Typ dahinter. Die Band hier hat tatsächlich ein Bild drauf, so dass wir das Video nicht sehen können. Was wir in unserem Fall tun müssen, ist, ich wahrscheinlich einfach den Z-Index lösche, weil er nicht so aussieht, als ob ich ihn brauche. Aber ich könnte minus zwei machen. Dann dahinter, wenn das Video nicht auf mobilen Bildschirmen geladen wird, wird es das Hintergrundbild laden. Das ist ziemlich cool und ziemlich einfach. Du, mein Freund, bist jetzt Hintergrund-Video-Experte. Das ist, wo wir dieses Video verlassen, angefangen. 15. 15 Cheat: Tipp Nummer 1 für das Hinzufügen von Vollbild-Hintergrundvideos zur Website, Sie können es nicht von Handy aus tun. Es saugt, aber die mobilen Hersteller mögen Sie nicht mit Auto-Play-Videos wegen Daten, es wird verschwenden, dass, und es brennt durch die Akkulaufzeit. Die CPU wird verrückt, wenn es versucht, Videos abzuspielen. Grundsätzlich schalten wir das Video einfach aus, wenn wir auf das Handy kommen, es mit einem Bild ausschalten und damit leben. Das ist Spitze Nummer 1. Tipp Nummer 2 für die Herstellung von Vollbild-Hintergrundvideos ist Dateigröße, und wie man es super duper klein zu bekommen. Das einzige, was Sie wirklich tun müssen, ist, sich Ihr Video zu schnappen es in Adobe Media Encoder einzufügen. Gehen Sie zu Benutzerdefiniert, scrollen Sie nach unten und die Sache, mit der Sie spielen möchten, ist etwas namens Bitrate. Kleben Sie es auf variable Bitrate 2, und es gibt Optionen, es gibt zwei kleine Schieberegler, die 1 und 1.51 verbinden und exportieren. Sie wechseln von einer 20-Megabyte-Datei zu einer 1-Megabyte-Datei. Es ist verrückt gut, und die Qualität ist ziemlich gut. Das ist Tipp Nummer 2 für die Erstellung von Vollbild-Hintergrundvideos. Tipp Nummer 3, um Videos als Hintergrund auf einer Website zu erstellen. Dies ist speziell für die Verwendung der kleinen Briefkasten-Version, wo Sie kleine Box, und Sie setzen das Video in den Hintergrund. Wenn Sie Ihr Video in Premiere Pro oder Media Encoder bearbeiten, müssen Sie die Oberteile und Böden abschneiden. Es hat keinen Sinn, es zu dehnen, also deckt es nur ab. Sie werden all diese Bands haben, die eine verschwendet und das ist Dateigröße, und das ist unsere Nemesis, wenn es um Hintergrundvideos geht. Schneiden Sie sie mit der Zuschneide-Funktion ab, oder gehen Sie in Premier Pro zu Kompositionseinstellungen, Sequenzeinstellungen sogar, und ändern Sie einfach die Höhe auf etwas kleineres. Sie können es auch in Media Encoder am Ende tun, also ist das Tipp Nummer 3 von Ich denke, wir haben wahrscheinlich acht. Tipp Nummer 4 alle acht für die Erstellung von Video-Vollbildhintergründen auf einer Website. Dieses ist, welche Formate verwendet werden. So ziemlich, Sie brauchen MP4, das ist die am meisten teilbare verwendbare dort, und dann brauchen Sie einen Fallback. Vergessen Sie OGG Oggs jetzt. Es geht um WebM mit einem M, das ist der nächste Fallback. Du brauchst nur zwei Videodateien. Das sind die beiden, die du brauchst. Tipp Nummer 5 für das Hinzufügen von Vollbild-Hintergrundvideos zu einer Website ist das Hinzufügen all das coole Korn, oder Unschärfe, oder waschen Sie es ein wenig. Wir machen das wirklich aus zwei Gründen. Einer ist, es sieht ziemlich cool aus, und wir können Zecken an die Spitze drauf bekommen, wenn Sie es verdunkeln. Aber der andere Grund ist, dass wir ziemlich kleine Dateigrößen verwenden müssen, und es wird ein wenig pixelig. Was wir tun, ist, dass wir es verwischen oder die Punkte oder das Filmkorn über die Oberseite hinzufügen, um das zu verbergen. Es macht es weniger offensichtlich, dass wir absichtlich getäuscht haben, anstatt es ist nur ein bisschen schlecht, weil wir minderwertige Qualität verwenden mussten. Wir haben zwei Gründe: cool und die schlechten Pixel zu verstecken. Also, das ist Tipp Nummer 5 von 8, denke ich. Lasst uns das nächste machen. Tipp Nummer 6 für das Hinzufügen von Hintergrundvideos zu einer Website, die Vollbildmodus, ist, dass nicht alle Videos gleich sind. Wenn Sie ein Video mit vielen verschiedenen Dingen vor sich haben, seine Aktion, und es gibt Dinge, die herumfliegen, viele Farben, viele Motion-Grafiken, das wird größere Dateigrößen haben. Es sind nur mehr Farben, mehr los. Die Farben bewegen sich, mehr Daten, größere Dateien. Was ich in dieser Klassenübung hier gemacht hatte, ist , dass sich ein wenig von der Hand bewegt, und so wird es sehr, sehr klein. Nicht alle Videos werden gleich erstellt, wenn es um die Dateigröße geht. Wir sind bis zu 5, 6, 7. Ich habe meine Hände gezählt, bevor der Film beginnt zu laufen, weil ich nie sicher bin, welchen Tipp ich habe, und es sieht so aus, als hätte ich Tipp Nummer 6 übersprungen, also gehen wir einfach zu 7. Dieser Tipp ist ein einfacher. Du nimmst dein Video und machst den Hintergrund nur ein wenig dunkler. Es sieht ziemlich cool und launisch aus, es senkt auch die Dateigröße. Es bedeutet, dass Sie den Typ über die Oberseite legen können. Etwas Weiß übernimmt die Oberseite, wenn Sie es eine dunkle Farbe abgesenkt haben. Das ist Tipp Nummer 7, um Vollbild-Hintergrundvideos auf einer Website zu platzieren. Wir sind bis zu Tipp Nummer 8, ich habe es schon gezählt. Tipp Nummer 8, dies ist die letzte, wie man Video zu einem Website-Hintergrund hinzufügen. Das ist, dass Sie einige Dinge in CSS tun können, Dinge wie Unschärfen, Sie können das Video stumm schalten. Tun Sie nichts davon in CSS. Warum? Da einige davon nicht in allen Browsern unterstützt wird, ist das, wie [unhörbar] unseres Lebens. Aber auch der große Grund ist, dass, wenn Sie ein Video haben und es Audio hat, diese Dateigröße wird geladen. Die Tatsache, dass Sie es später stummschalten, ändert sich nicht die Dateigröße. Es macht es stumm und das wird funktionieren, nichts falsch daran. Aber die Dateigröße, all das Audio ist in Ihrer Dateigröße enthalten. Dasselbe mit Dingen wie Unschärfen. Sie verwischen es, das senkt tatsächlich die Dateigröße weil Sie weniger Details erhalten, es sei denn, Sie mischen sich mit Pixeln. Machen Sie alle diese Art von Sachen im Video zuerst und so etwas wie Premiere, After Effects oder Media Encoder, bevor Sie zu CSS gelangen.