Der Mega-Webflow-Kurs für Anfänger:innen - Lerne, eine Portfolio-Website von Grund auf in Webflow zu erstellen.

1. Kursübersicht: Was ist, wenn ich Ihnen sage, dass Sie eine voll funktionsfähige Website von Grund auf neu erstellen können, ohne eine einzige Gerichtslinie zu verwenden und völlig kostenlos? Sie können es so gestalten, wie Sie es wollen. Sie können Animationen hinzufügen. Du könntest Interaktionen haben. Sie könnten eine ansprechende für andere Gerät machen, große Punkte und sogar gehostet kommen zu mir kostenlos. Hey, ich bin Champion und willkommen in meinem Magal. Aber natürlich, für die Großartigkeit in diesem Kurs werde ich Ihnen beibringen, wie Sie diese einseitige Portfolio-Website , die ich von Grund auf in Fig MMA entworfen und bauen uns innen. Nun, fließt wieder komplett von Grund auf neu. Fühlen Sie sich frei, sein Design für Ihre eigenen vier für Ihre Website zu verwenden. Gehen Sie weiter und nehmen Sie Änderungen vor. Wie Sie möchten, wenn Sie es brauchen. In Ordnung. Also lassen Sie uns darüber reden, was ich Ihnen in diesem Kurs beibringen werde, in der Partitur wird Ihnen die Grundlagen und Grundlagen der Entwicklung beibringen . Und was ist es, was Sie wissen müssen, bevor Sie anfangen, eine Website zu erstellen, und ich werde Ihnen Dinge über Box Moderne Reaktionsfähigkeit, Gitter, Layout, Elemente, Animationen, Interaktion, sticht Komponenten und so viel mehr und wollen verärgert ist bereit, Sie könnte sogar völlig kostenlos gehostet , aber sogar angebracht es. Benutzerdefinierte Domäne. Aber das Ende der Partituren. Sie wissen alles, was Sie wissen müssen, um voranzugehen und jede Art von Website von Grund auf neu zu bauen . Also hoffe, Sie sind aufgeregt und bereit, ihre Grippe zu lernen. Wenn du ein Anzug bist, Jungs im nächsten Video. 2. Assets und Preview herunterladen: Na gut, Jungs. Bevor wir also anfangen, teilen Sie nur einen Zeh ein paar Dinge vor der Hand und lassen Sie einige Informationen wissen. Nun, das ist die letzte Website, die ich im Inneren entworfen habe. Wo, Flo Und was ich tun werde, ist, dass ich einen Vorschau-Link in der Beschreibung teilen werde, wo Sie tatsächlich diese Website im Workflow überprüfen können. Jetzt können Sie keine Änderungen oder Änderungen vornehmen, weil, wie Sie hier sehen, es heißt, dass es nur so ist, wie Sie sehen können. Es besagt, dass nur lesen mehr Änderungen nicht gespeichert werden. Aber fühlen Sie sich frei zu gehen oder wie Gehen Sie herum und überprüfen Sie, wie ich das gebaut. Du kannst mir meine gesamte Struktur ansehen, die ich besser habe. Sie können unsere Informationen über Klassen überprüfen, jede einzelne Sache, die Sie wissen müssen. Wenn Sie jemals stecken bleiben, gehen Sie weiter und kommen Sie mit diesem und Art der Überprüfung zurück. Wenn du irgendwo stecken bleibst, ist das das vorherrschende. Also, wenn Sie selbst wenn Sie voran gehen und Änderungen vornehmen, wird dies nicht auswirken, weil dies nur die Vorschau ist. Und wenn Sie wirklich wollen, um die Website in ihrer ganzen Pracht voll funktionsfähig zu sehen. Sie können sich das ansehen. sind Sie wieder. Link wird in der Beschreibung sein, wo Sie scrollen und auschecken und spielen können. Wir haben eine Menge Interaktionen. Ich habe eine Menge Animationen, die wir super lustige Sachen machen werden. Sie können dies auch überprüfen. Und last but not least, Ich habe diese gesamte Website auf Fig MMA entworfen, so können Sie zum Lincoln gehen die Video-Beschreibung und überprüfen Sie heraus und Donna die Vermögenswerte die die Bilder haben wird, die die Symbole darauf haben wird gehen , um die Stigma-Datei zu haben, die entworfen hat und wir wirklich auf diese Figur-Datei verweisen. Und dann werden wir dieses Design innerhalb des Workflows erstellen. Also drei Dinge ist der Vorschau-Link, und dann haben Sie die eigentliche Website selbst, und dann haben Sie die Assets, die Sie herunterladen müssen, so stellen Sie sicher, dass Sie alle diese überprüfen, so dass Sie bereit sind. Und in der nächsten Woche werden wir anfangen. Also sehe ich euch im nächsten Video 3. Das Boxmodell verstehen: Alles klar, Kerl. Also ist es endlich Zeit, loszulegen. Nun, bevor wir in Web Float springen und anfangen, es zu bauen, gibt es viele Grundlagen und Grundlagen, die verstanden werden müssen. Also, was ich tun werde, ist, dass ich diese Grundlagen in verschiedene Teile zerteile und sie erklären werde , wenn es notwendig ist, wenn wir einen bestimmten Abschnitt von oben aufbauen . Zunächst einmal in diesem Video über etwas sprechen, werden wir in diesem Video über etwas sprechen,das Box-Modell genannt wird, das grundlegendste und grundlegendste Konzept ist, das Sie über Webdesign und Webentwicklung verstehen müssen . In Ordnung, wie werden Webseiten eigentlich aufgebaut? Okay, wie sind sie strukturiert? Gibt es das eine bestimmte Mode oder ist es nur ein Zufall oder wie funktioniert das alles? Und wir haben so viele verschiedene Arten von Gerätewits. Wir haben Mac-Buch-Profis. Wir haben Netzhaut-Displays. Wir haben oder Windows Laptops. Du hast Tabletten. Wir haben Mobilgeräte mit Foca Monitoren. Wie funktioniert die Website in all diesen drei verschiedenen Größen? Wir werden darüber reden. Also in der Figment, eingereicht als eine Seite genannt ist die Box Sterblichen. Und wenn du darauf klickst, wirst du etwas sehen, das so aussieht. In Ordnung, also lass mich erklären, was wir haben. Du jemand, der hier rüber zu diesem, ähm, Rahmen kommt ähm, , der für 14 40 Pixel breit ist. Und der allgemeine Industriestandard besteht darin, immer auf der kleinsten Bildschirmgröße zu entwerfen und zu verbinden. Alles klar, und wenn Sie eine Website entwerfen, wollen Sie immer mit der kleinsten Bildschirmgröße beginnen, die ziemlich viel vor allem das Mac-Buch-Profi hier ist. Also, wenn ich tatsächlich gehen und Sie wissen, klicken Sie auf das Rahmen-Symbol, können Sie tatsächlich sehen, dass wir 14 haben. 40. Wir haben ein Mac-Buch, das 11 50 Toe ist. Ich habe ein Mac-Buch Pro Bitches. 14 40. Wir müssen Facebook verkaufen, das ist 1500 mehr auf ich bin Durchschnitt 12 80 Nun, Obwohl das Mac-Buch und der Mac kleiner sind als 14 40 ist es immer ein guter Standard, um tatsächlich auf einem 14 40 Pixel mit Abmessungen zu entwerfen, weil Es ist nicht das große, es ist kein kleines, es ist die optimale Größe, Ordnung. Und das ist eine grundlegende, die Sie verstehen müssen. Die nächste Sache ist diese Struktur von einer Website. Also, wenn Sieh mal hier rüber, wir haben Baumfarben, wir haben diese Orange, und dann haben wir dieses hellere Orange. Und dann haben wir eine gelbe Farbe. Dasselbe hier drüben und etwas hier drüben. Aber die andere Note hier ist, dass diese Orange tatsächlich breiter auf einem Display ist, was bedeutet, dass sie den gesamten Brit einnimmt. Aber dieser Inhalt, der drin ist. Nehmen wir an, dieser ist 1311 Pixel breit. Dies ist 1311 Pixel während. Und das ist 131 auf Pixel während. Und das bedeutet so ziemlich, dass der Inhalt in der Mitte des Bildschirms bleiben wird, unabhängig von der Größe des Monitors. In Ordnung. Und um das zu tun, müssen wir eine bestimmte nasse definieren. Also hier definiere ich eigentlich bewusst, dass 1319 Pixel breit und entsprechend, außerhalb der Bildschirmgröße, wird der Bildschirm 1311 Fixes sein. Alles klar, klar, was ist mit den anderen Bildschirmgrößen? Dass wir die 1152 und 120 hatten, sind diese kleiner, weißt du. Dann 1311 Ja, das ist wahr. Also, wie sieht das gut aus, wird es komisch aussehen? Nun, nein. Wenn Sie Ihr Gebäude, Ihre Website, geführt haben, können Sie definieren, dass sagen. Hör zu, ich will ein Maximum. Wurden 1311 Aber wenn die Häute kleiner geworden ist, können Sie voran gehen und schrumpfen den Witz. In Ordnung, aber maximal. Ich wollte 1311 Ich will nicht, dass es über 1311 gehen Alles klar. Das ist eine Bedingung, die Sie definieren können, wenn Sie in Waffe bauen. Und das ist, wie ziemlich viel haben die Entwicklung von Büchern. Also lassen Sie mich tatsächlich auf die linke Seite kommen und wir können eine Art und Index sehen. Also die Aufträge Sache, die wir diesen Anruf sehen, ist ein Abschnitt, was bedeutet, dass es den gesamten Bildschirm in Ordnung nimmt . Es berührt die Ränder vom Bildschirm. Und dann haben wir etwas, das als Rapper bezeichnet wird, das diese endgültige Größe von unserem Inhalt definiert , das und letzte Wort aus unserem Inhalt. In Ordnung. Und der nächste ist die inneren Blöcke ist, wo wir Inhalte haben, die Text oder Bilder sein können, und sie können in jeder Weise strukturiert werden, die sie wollen, und diese werden in den Rapper passen , Alles klar. Und schließlich haben wir ein Bild, und das ist für das zweite Beispiel. Nehmen wir an, zum Beispiel, Sie haben ein Bild oder Sie haben eine Textur. Sie haben einige Informationen, die Sie anzeigen möchten, aber Sie wollen den gesamten Wert vom Bildschirm nehmen, oder? kannst du tun. kannst du definitiv tun. Du würdest es in einen Abschnitt geben wollen und nicht. Und Sie müssen es nicht in einen Rapper stecken, denn wenn Sie es in einen Rapper stecken, wird es sich am Ende beschränken. Die Arbeit, die Sie gegeben haben, so dass Sie tatsächlich nicht den Rapper verwenden können und der Inhalt wird die ganze Welt überspannen. In Ordnung. Nun, es gibt eine andere Sache, die Sie in diesem Fall tun können, wenn Sie Blick haben, ist 1035, die kleiner ist als 1311 Jetzt können Sie mehrere Wetten haben, oder? Nehmen wir an, dass Sie nicht wollen, dass dies 1311 Platz in Anspruch nehmen. Vielleicht verkleinern Sie das nicht ein bisschen. Nun, Sie können das definitiv tun, damit Sie tatsächlich mehrere Ritz zu mehreren Elementen haben können. Und egal, was der Bildschirm groß ist, das wird immer gleich sein. 1035 hier drüben, 1035 hier und 1035 hier drüben. So ist, wie Websites ein bisschen. Nur um zusammenzufassen, haben Sie immer einen Abschnitt, der der äußerste Container ist, haben Sie immer einen Abschnitt, der der äußerste Container ist, und das wird die ganze Welt des Bildschirms beanspruchen. Und dann haben Sie etwas namens Rapper, wo Sie einen bestimmten Brit definieren und das nächste, was Sie innere Blöcke haben, wo alles in diesem Rapper ist und der Schnitt und das mit allem in Ordnung definiert. Und wenn Sie die Welt für einen anderen Rapper verändern wollen, können Sie auf jeden Fall voran gehen und das tun. Das ist also ziemlich viel über das Box-Modell. In der nächsten Woche werden wir über die drei Haupttypen von Layout-Elementen sprechen, die wir verwenden werden, um all unsere Inhalte in Waffen zu bauen. Also sehe ich euch im nächsten Video 4. Arten von Layoutelementen: Hey, Leute, willkommen zurück. In diesem Video werden wir einen Blick auf die drei Haupttypen von Layout-Elementen werfen. Diese Waffe Oh, bietet. Jetzt gibt es noch einiges mehr. Ich werde sagen, dass sind 6 zu 7. Aber das sind diejenigen, auf die wir irgendwie genau achten müssen, denn das ist, was wir die meiste Zeit jetzt benutzen werden, da drei wichtige Dinge Abschnitt Container und eine Sackgasse. Wie ich im vorherigen Video erwähnt habe, dass der orangefarbene Teil vom Bildschirm, der die gesamte Breite einnimmt , als Abschnitt bezeichnet wird und genau dieser Abschnitt ist. Es nimmt das gesamte mit aus dem Bildschirm. Der nächste ist ein Container. Nun, der zweite Schritt war ah zu erstellen, Container oder ein Wrapper aus einigen Arten, die Art aus bietet eine definieren mit in wo, Flo, Sie haben ein Element Qualität Container. Aber das Problem ist, der Container beschränkt sich auf ein Maximum auslesen 9 40 Pixel auf dem Desktop und und für andere Bruchpunkte, dass s Tablet mobile Landschaft und mehr berichtet. Es nimmt die 100%. Es handelt sich also so ziemlich wie ein Abschnitt. Jetzt haben wir ein anderes Element, das als Todesblock bezeichnet wird. Jetzt ein div-Block, wenn Sie wissen, wissen Sie, in wirklich Begriffen betrachtet. Es ist irgendwie wie ein Ballon. Ordnung, wenn man sich einen Ballon anschaut , weißt du, wenn es keine Luft gibt, fühlt es sich einfach an wie InOrdnung, wenn man sich einen Ballon anschaut, weißt du, wenn es keine Luft gibt,fühlt es sich einfach an wie ein völlig flaches Objekt. Aber je mehr Menge an Luft Sie in den Ballon blasen, desto größer wird der Ballon sein. Und Sie können tatsächlich definieren, wie viel jemals Größe es sein will. Wenn du mehr sprengst, wird es größer werden. Wenn du weniger sprengst, wird es kleiner sein, oder? Also schauen Sie nicht, ist etwas, das wirklich, wirklich flexibel ist. Wenn du eine Website aufbaust,ist meine persönliche Vorliebe, niemals einen Container zu benutzen, weshalb ich es nicht tue. Wenn du eine Website aufbaust, ist meine persönliche Vorliebe, niemals einen Container zu benutzen, Ich habe ein Ausrufezeichen neben den Container gesetzt. Jetzt gibt es nichts falsch und mit einem Container, Aber ich denke, Container nimmt nur die vollständige Kontrolle von Ihnen als Designer und als eine Person, die auf, wo fließen brennt. Also ziehe ich es vor, an Abschnitten zu bleiben und zu entwickeln, weil Sie absolute Flexibilität haben. Sofort. Es gibt auch einen weiteren Elementaufruf ist der Link-Block. Nun, der Link-Block ist im Grunde der gleiche wie der Death Block. Aber der Unterschied ist, dass Sie nicht auf einen Diff-Block klicken können, aber Sie können auf einen Link-Block klicken, richtig? Diese Weltmarke weist also auch darauf hin. Nun, da wir das Box-Modell verstehen und wir wissen, was die drei Hauptelementtypen sind , können wir nun endlich anfangen, unsere Website zu bauen und wer schwimmt. So wie ihr Jungs im nächsten Video 5. Webflow und Host-Informationen: Unseren Jungs eine letzte Sache, bevor wir tatsächlich in diesen Fluss springen, möchte ich irgendwie erklären, wie die Preisgestaltung dort funktioniert, Flo. Also offensichtlich werden Sie eine Website bauen und Sie könnten später gehostet werden. Es wird ein Portfolio oder Ihre Firmenwebsite sein, unsere Zielseite, was auch immer ich dachte, wäre interessant zu erklären, wie die Preise funktionieren. Wenn Sie also anfangen und einen Kanada-Flow erstellen, erhalten Sie kostenlose Projekte, und das ist, was Sie hier sehen können. Da steht, du fängst mit zwei kostenlosen Projekten an, okay? Und Sie können mit diesen beiden Projekten alles tun, was Sie wollen. Jetzt gibt es drei Möglichkeiten. Erstens, Sie können es entweder auf Web-Flows Sub-Domain hosten, die mit der Florida Ohio endet, und das ist völlig kostenlos, Ordnung. Die zweite 1 ist, dass Sie es tatsächlich mit Ihrer eigenen benutzerdefinierten Domäne auf einem Web-Flow Host Silverware Flow verwendet Amazon Web Services, so dass Sie gehostet, vollständig entwirren und ist rein, und es und seine Freunde. Und es ist eine sehr sichere, so dass Sie Ihre benutzerdefinierte Domain verknüpfen können. Aber das erfordert einen bezahlten Plan. Und die dritte 1 ist, Sie tatsächlich das Web-Flow-Kabel exportieren können, das Sie haben und gehostet auf einer anderen Plattform oder zusammen. Also lassen Sie uns einen Blick darüber werfen. Werfen Sie einen Blick auf das im Detail. Es gibt also zwei Arten von Pflanzen. Einer ist der Lageplan, und einer ist der Kontoplan. Beginnen wir mit dem Kontoplan. Also, wie ich schon sagte, der Starterplan ist der freie Plan, wo man zu drei Projekten kommt und wenn man mehr als zwei Projekte will und wenn ich Projekt sage , meine ich individuelle Website und wenn man will, Wenn Sie mehr als zwei wollen, können Sie das auf 10 Projekte mit $16 USD pro Monat aktualisieren, wenn Sie jährlich oder $24 pro Monat bauen . Wenn Sie sich entscheiden. Wie eine monatliche Weise, können Sie auch gehen und exportieren Kabel, Ordnung, und wenn Sie es auf eine andere Hosting-Plattform exportieren möchten, können Sie tatsächlich schöne Cordoba exportieren. Flow bietet. Sie können Projektübertragungen und so ziemlich es tun. Und wenn Sie für mehr als 10 Projekte gehen möchten, können Sie sich für den Pro-Plan entscheiden. Alles klar, jetzt ziehen wir in die bezahlt werden, entscheiden Anlage. Und wenn ich sage Nebenpflanzen, bedeutet dies den Plan für jede einzelne Website oder jedes einzelne Projekt in Ihrem Konto . Okay, also lasst uns mal sehen, was der Unterschied ist. Nun, wenn Sie für den grundlegenden Plan gehen und wenn Sie zum grundlegenden Plan kommen, können Sie natürlich teuer Ihre benutzerdefinierte Domain verknüpfen, die Sie von einer anderen Hosting-Plattform kaufen , und Sie können diese Domain verbinden. Um dies zu tun, müssen Sie einen kostenpflichtigen Plan verwenden, den Sie 100 Seiten haben können. Sie können monatliche Besuche von 25.000 haben und Sie können keine CMS-Artikel haben. In Ordnung, scheint ein Sinn für Content-Management-System, das ziemlich eine fortgeschrittene oder eine Zwischenebene Sache ist, wo Sie eine Art von einem Zurück im Dashboard aus erstellen . All Ihre Inhalte und nassen Fluss automatisch nimmt diese Inhalte und setzt diese auf Ihre Website mit weniger Aufwand auf Ben, Sie haben eine Business-Ebene, wenn Sie Ihre Website wollen. Wenn Sie sind Wenn Sie verärgert, hat mehr als Sie wissen, eine Million Besuche oder Sie möchten 10.000 CMS-Artikel oder Sie möchten auf dem Madrid Formular, senden Sie, da Sie möglicherweise diese Pläne überprüfen müssen, abhängig von Hof Websites -Anforderungen. Ordnung, so ist die Unterscheidung zwischen Lageplan auf Rechnung Plan. Also hoffe, ihr habt eine Grundidee. Aber für diesen Kurs können Sie natürlich völlig kostenlos ohne Einschränkungen starten. Also, jetzt, wo wir das wissen, lasst uns weitermachen und ein Reptilien-Projekt einrichten, in dem Flo und loslegen. Also, ihr seid es im nächsten Video. 6. Einrichtung deines Webflow: Alles klar, Leute. In diesem Video werden wir unser Flow-Projekt einrichten. Stellen Sie sicher, dass wir alles haben, was wir brauchen, bevor wir anfangen, tatsächlich jedes Element innerhalb des Web-Flow zu bauen . Also offensichtlich können Sie ein neues Konto über welchen Fluss erstellen, und Sie werden zwei kostenlose Projekte, mit denen Sie arbeiten können. Und wenn Sie diese 23 Projekte haben, wo Sie tun können, können Sie mit dem neuen Projekt beginnen. Und ich werde dieses Leerzeichen wählen, wenn Sie auch viele kostenlose Vorlagen und Bezahlvorlagen haben , die Sie wählen können. Aber wir fangen an. Es ist eine große leere, weil wir es offensichtlich von Grund auf neu beginnen wollen. Also werde ich voran gehen und wählen Sie wählen, und Sie können jeden Namen wählen, den Sie wollen. Ein Büffel gibt dir einen sehr coolen und schrulligen Namen. Ich nenne das, äh, Schulanteil. Ich werde das Brett für dich anrufen. Natürlich. In Ordnung. Nur im zufälligen Namen. Ah, in Ordnung. Da gehen wir. Okay, jetzt sind wir drinnen. Wir sind jetzt voll. Sie Schnittstelle sieht ziemlich einschüchternd und beängstigend aus. Und das viele Optionen, aber wir werden freundlich. Schauen Sie sich das eins nach dem anderen an, während wir den Kurs durchlaufen, und hoffentlich werden Sie irgendwie jedes Element verstehen, das von ihm entfernt ist. Aber vorerst wollen wir nur weitermachen und unser Projekt aufbauen. Stellen Sie einfach sicher, dass wir alles haben, richtig. Das erste, was ich tun muss, ist, ich gehe hier oben, links. Du hast das Waffenlogo und ich werde die Projekteinstellungen auswählen. Ordnung, also werden wir das ein wenig später überdenken, gegen Ende des Kurses ist gut, aber es gibt nur ein paar Dinge, die wir einrichten wollen. Also das erste, was offensichtlich der Name des Kurses, das ist das Sub-Dominion, wo Sie es auf Web-Flows, freie Sub-Domain hosten können . Und, weißt du, es wird wie ein Inszenierungsbereich sein, in dem du einfach überprüfen kannst, wie das aufgeregt ist. Hör zu, ich werde diese zusätzliche Wette entfernen, weil es einfacher wird. In Ordnung. Ähm, und wir können sagen, Portfolio-Kurs, um, 01 oder so etwas. Ähm, der nächste ist. Sie haben diese Farrachan, mein Land, Israel. Setzen Sie später. Alles ist, was Sie Ihre Zeitzone wählen möchten. Stellen Sie sicher, dass das ist, ähm und ja, das ist so ziemlich es. Die nächste Sache ist, wir wollen in die, ähm, Fonds Abteilung gehen ähm, , weil wir eine Front benutzen werden. Jetzt werden wir jetzt benutzen, gibt es drei Möglichkeiten, wie Sie Telefone haben können. Sie haben ein Google-Fonds, Sie haben benutzerdefinierte Telefone und ich habe Adobe-Telefone. Wenn Sie ein Adobe-Abonnement haben, können Sie offensichtlich den FBI-Token-Schlüssel erhalten. Es wird in deinen Kontoeinstellungen sein. Alles, was Sie hier rüber kommen und herausfinden können, wie Sie das bekommen und einfach die A-P-I-Taste setzen und Sie sind in Starttelefone wird das in Buffalo sein. Als Nächstes können Sie benutzerdefinierte Schriftdateien hochladen. Du weißt welche. Wissen Sie, Speck Upload TTF ot f d r Profile, und sie sollten ziemlich gut funktionieren. Der nächste ist die Verwendung eines Google-Telefons. Jetzt für diesen Kurs werden wir ein Google-Telefon verwenden. Es ist ein sehr netter Anruf. Aufstieg und alles zu tun ist, gehen Sie einfach in die Drop-down-Liste. Sie haben alle Regeltelefone zur Verfügung. Alberto ist nur auf der Suche nach den 40 wollen wir etwas namens Duft wollen. Also s e n in Ordnung. Und das ist der Spaß. Das hat nur drei Milliarden. Also werden wir den ganzen Baum nur vorerst aussuchen. Ähm, und du kennst die Sprache auf dem Sprung. Wenn du das nicht einschließt oder nicht, werde ich es einfach lassen. Ich wähle nur das ohne lateinische Erweiterung aus. Was auch immer. Und Schuhe um vier. Okay, jetzt können Sie sehen, dass dies die Mittel sind, die hinzugefügt wurden, und das ist ziemlich gut. Die nächste Sache ist, wir wollen in Zollgericht gehen. Nun, Veteran gibt Ihnen auch die Möglichkeit, eine Art Zollgericht zu handeln. Wenn Sie wirklich einige Elemente anpassen möchten, welcher Bettboden erlaubt Ihnen nicht? Nun, das ist ganz für fortgeschrittene Benutzer, so dass wir überhaupt kein benutzerdefiniertes Gericht verwenden werden. Aber die eine Sache, die ich feststellen werde beheben hier ist, dass in den Vor-Einstellungen, Ich wäre, ich möchte das Sprachauto hinzufügen, also werde ich e en für Englisch sagen. Nun, das wird passieren, wenn jemand seine Website in der Region öffnet, die wie Deutschland oder in einem fremden Land. Ihr Browser wird feststellen, dass dies eine englische Website ist, und es wird fragen, ob Sie es aus dem Englischen in die jeweilige Sprache des Landes übersetzen möchten . Und Sie möchten, dass Google diese Sortierung bietet eine Funktionalität. Also wollen Sie das einfach überprüfen und wir wählen Änderungen speichern, Alles klar. Und das nächste, was tun wird, ist, dass wir wieder in unseren Designer und Designer gehen, ist unser Arbeitsbereich, wo wir die Website entwerfen und bauen werden, Ordnung. Und was ich tun werde, ist, dass ich zu diesem Navigationspanel gehe, das ist der Navigator, wo wir eine ganze Menge Schichten haben. Was ich tun werde, ist, dass ich dieses Element wählen wird der Körper und Körper ist das riesige Elternelement, das, was Art off, da alles ist, da alles in einer Box ist und alles in einem Containerkörper ist, ist ein bezahlter in das meiste Element, oder ich werde tun, ist, ich werde auf Körper klicken und ich werde in die Telefonabteilung kommen und ich werde die Schriftart wählen, die wir ausgesucht haben, und das wird alles in Ordnung geschickt, und das war's. Jedes Mal, wenn wir hochladen, jedes Mal, wenn wir einen Text innerhalb des Canvas-Bereichs eingeben, wird die Schriftart ausgewählt, um sie zu senden. Also müssen wir das Telefon nicht jedes Mal wechseln. In Ordnung, also das ist eine Sache, die du tun willst. So, jetzt ist es so ziemlich. In der nächsten Minute können wir endlich voran gehen und beginnen, unsere erste Komponente zu bauen und beginnen mit dem Bau der Navigationsleiste. Also sehe ich euch im nächsten Video. 7. Aufbau der Navigation: In Ordnung, also sind wir endlich bereit, die erste Komponente aufzubauen, und wir werden anfangen, mit der Knave-Leiste zu kreieren, die Navigationsleiste, die wir hier drüben in diesem Video haben. Alles klar, das ist eigentlich Springen zu FTL und sehen, wie das Ding funktioniert. Also, wie Sie sehen können, ist das erste, was wir haben, dieser große weiße Bildschirm, der die Leiche von der gesamten Website ist. Scrollt also nur nach unten, bis wir den Hintergrundbereich gefunden haben, und aus dem Hintergrundbereich , und aus dem Hintergrundbereich werde ich das von weiß zu schwarz ändern. Und klicken Sie nicht auf dieses Plus-Symbol, das ein globales Farbfeld hinzufügen wird, was bedeutet, dass ich jedes Mal, wenn ich den Gelehrten auf ein Element anwende, die Farbe von allen Elementen ändern kann, die die gleiche Farbe angewendet haben, rechts ? Ich gehe weiter und klicke auf Erstellen. Und jetzt wird jedes Element, das ich hinzugefügt habe, eine schwarze Farbe hat, zum Respekt der Farbe ändern . Wenn ich die Farbe aus dem globalen Farbfeld ändere. Ok. Großartig. Nun, wo Flo dir nur einige vordefinierte Elemente gibt, okay? Und Sie verurteilen endgültig, verwenden Sie sie so, wie sie sind, alles, was Sie können es nach Ihren Wünschen anpassen. Wenn ich also auf das Plus-Symbol klicke, können Sie sehen, dass dies alle Elemente sind. Dieser Inhaber. Und wie ich Ihnen sagte, wir haben diesen Abschnitt. Wir haben einen Container und wir haben den Block. Jetzt haben wir auch Dinge wie Link-Block und Buttons und Spalten und toll, die wahrscheinlich ein wenig später einen Blick werfen wird. Aber für jetzt, was wir wollen, ist ein Elementaufruf als Navigationsleiste. Alles klar, wir haben hier drüben die Knave-Bar. In Ordnung. Jetzt, im linken Abschnitt, haben Sie auch eine Art von vordefinierten Elementen wie Sticky Bar hier, über See Hauptinhalt Aufruf zum Action-Zeug. Leder Vogel Für diesen Kinderkurs werden wir nichts davon verwenden, weil wir alles von Grund auf neu bauen wollen. Aber wenn Sie möchten, können Sie auf jeden Fall voran gehen und diese benutzerdefinierten Layouts verwenden. Alles klar, wenn du runterkommst und ich gehe weiter und wähle dieses Nabbout-Element aus, und ich werde das aufspüren, und ich werde das drinnen fallen lassen, okay? Jetzt wollen Sie immer darauf achten. zu dieser Navigation, die wir auf der linken Seite haben. Na gut, , wenn ich das aufmache, sehen Sie, wir haben ein paar Dinge. In Ordnung? Wir haben eine große Liste von Artikeln, also lass es mich erklären. eine große Liste von Artikeln, Erklären Sie, wie das jetzt passiert. Nun, sehen Sie, hier drüben ist der Körper, und dann haben wir ein Element, das Farben nicht haben, aber und innerhalb des Knave. Aber wir haben etwas namens Container. Und in einem Container haben wir drei Elemente. Wir haben die Marke. Wir haben das Navigationsmenü, und Sie haben das Menü unten. Und im Knave-Menü haben wir drei Elemente, das ist der Knave-Link. Ich will, dass knave Ling Link drei knave. Und wir haben auch ein Menü-Symbol. Ordnung, also wo Flo diese Terminologie verwendet, verursachen die Eltern und das Kind, in diesem Fall ist der Körper der Elternteil, und der Knave-Bar ist das Kind. Der Behälter ist ein Kind vom Nab. Unser auf der Knave-Bar ist ein Elternteil aus dem Behälter. Jetzt hat der Container drei Kinder Marke Navigationsmenü und viele, aber richtig. Das Knave-Menü ist offensichtlich. Das hat drei Kinder. Ordnung jetzt gibt es eine andere Sache, die Sie auf Marke knave Menü und viele Schaltflächen sind alle Geschwister, weil sie Kinder aus dem Container und Geschwister sind tatsächlich ein Begriff, der verwendet wird, wenn Sie die Dinge gesamten Web-Flow bauen. Also, Elternkind und Sibley, diese drei Dinge, die Sie brauchen Zehe Aufmerksamkeit, Zeh. Also, wie ich bereits erwähnt habe, ist das erste, was wir tun wollen, den Abschnitt richtig zu erstellen, der das gesamte Recht vom Bildschirm einnimmt . Und was wir hier sehen, ist, dass dieser Knave-Bar die gesamte Arbeit vom Bildschirm nimmt. Alles klar, so das Jetzt. Aber wenn Sie sehen, ob ich darauf klicke, können Sie sehen, dass es den gesamten Wert vom Bildschirm nimmt. Also, was Sie tun möchten, ist, dass Sie mit dieser Zahl herumspielen können, die im Grunde definiert ist. Sie wissen, wie ein bestimmtes Design auf einem bestimmten Bildschirm aussehen wird. Wenn ich das also auf 14 40 ändere, könnte man sehen, dass alles in der Mitte ist , wie wir besprochen haben , , in Ordnung, aber alles außer der Knave-Bar, die sich wie unsere Sektion verhält, nimmt die ganze Welt. Wenn ich das auf 1920 ändere, kann man sehen, dass dies in der Mitte bleibt, aber der Abschnitt nimmt den ganzen Wert auf. Ändern wir es auf 38 40, das ist unsere Vier-K-Auflösung. So wird es aussehen und das ist in der Mitte. Also willst du das immer auf 14 kleben. 40 so dass wir eine gute visuelle Darstellung haben, wie es mit unserem Design und Fig MMA passt . Also, weil wir es auf 14 40 entworfen haben, ist es fair genug, um dies immer auch in 14 40 zu behalten . Die Sache ist, wir haben diesen Container wie eine Zelle, die einen Rapper hat, und das ist eine Woche frei. 940 Picks ist und wir wollen das nicht verwenden, denn wenn Sie sehen, haben wir eine maximale Arbeit von 1920 Pixel, Ordnung. Und wir haben einen Abschied von 40 und 72. Also, was ich tun werde, ist, dass ich tatsächlich voran gehen und ein Element erstellen werde, das den Todesblock verursacht hat , wenn Sie Elemente scherzen, stellen Sie sicher, dass Sie das scheinbare Element auswählen, so dass das untergeordnete Element, das Sie Erstellen fällt als Kind aus dem übergeordneten Element. Also schauen Sie, wie auf der NAFTA, und ich werde Steuerelement E drücken, die eine Verknüpfung oder Befehl e auf einem Mac ist, um die Suchleiste zu löschen , in der Sie Elemente suchen können. Oder Sie können tatsächlich einfach auf das Plus-Symbol klicken und nach der elementaren Arbeit suchen. Ich möchte diese scharfen Schnitte verwenden, also ist es viel einfacher und viel schneller. So beeindruckt. Kontrolle E. Und ich werde ihren Block wählen, Schatz. Und wir haben diese Sackgasse, und ich werde diesen Todesblock reinlegen, okay? Und ich nehme dieses Markenelement. Ich werde das in den Todesblock legen, den ich im Navigationsmenü nehmen will. Leg das in den Todesblock und die Menü-Taste und lege das in den Todesblock. , Also stellen Sie sicher,dass sie alle Chillin sind, damit Sie sie zusammenbrechen können, um zu sehen, ob alles im Elternteil ist. Ich nehme den Container nicht und lösche ihn. Okay, jetzt schauen wir uns mal an. Man sieht, dass sich alles nach links und rechts bewegt. Sie dehnen sich aus. In Ordnung. Also, wenn ich dies auf 1920 ändere, können Sie sehen, dass Sie irgendwie berühren die Ränder des Bildschirms, weil wir nicht definiert haben, dass maximale Körnung. Na gut, also gehen wir weiter und machen das. Also, was wir tun, ist, dass ich das auf 14 zurückschicken werde. 40 Fixes, in Ordnung? Und ich werde diese Sackgasse wählen, die wir erschaffen haben. Sie können auch hier in der unteren Navigation klicken und die erste Immunität wird eine Klasse geben . Was genau ist eine Klasse? In Ordnung. Ah. Klasse ist ein Name, der gegeben wird, und Sie können tatsächlich jedes Element aufrufen, was Sie wollen. Aber was passiert, ist, wenn Sie eine bestimmte Klasse zu etwas geben, können Sie ihm bestimmte Eigenschaften zuweisen, und diese Klasse wird auf dieser Klasse benannt wird, ist etwas Besonderes, weil sie eine bestimmte Menge an Eigenschaften hat . Und was bedeutet das alles? Nun, tatsächlich, schaffen Sie eins, und wir verstehen das irgendwie eins nach dem anderen. Okay, also was ich tun werde, ist, dass ich das als Rapper bezeichnen werde, okay? Du kannst das alles nennen, was du willst, aber ich werde es vorerst Rapper nennen. Ok? Und bei der Arbeit werde ich sagen, dass ich 100% sagen werde. Ok. Was bedeutet das? Ich sage Ihnen, und auch im maximalen Wert. Ich werde 1920 sagen. Großartig. Was hier passiert ist, ist, dass ich Workflow erzähle, dass Hey, schau dir diesen Rapper an. In Ordnung? Ich möchte, dass dieser Rapper 100% von der Breite abnimmt. In Ordnung? 100% aus dem nassen, abseits der Bildschirmgröße. Aber ich möchte, dass Sie es auf 1920 Plektren beschränken, was bedeutet, wenn ich zu 12 40 Pixel gehe , in Ordnung, es erfüllt beide Bedingungen. Die Arbeit ist 100%, weshalb die Elemente berühren die Ränder des Bildschirms und das Maximum mit seinem 9 20 Was bedeutet, wenn ich gehe zu 38. 40 Sie können sehen, dass dies eine Art eingeschränkt ist oder, wissen Sie, sagen wir, dass bis 2000, um es leichter zu verstehen. Ordnung, Sie können sehen, dass dies den linken Rand des Bildschirms berührt, aber hier ist das auf 1920 Pixel beschränkt. Wir haben diese zusätzliche Lücke von 80 Picks ist richtig, um die Frage aus Redesign in 14 zu beantworten. 40. Aber wie wird es auf kleineren Bruchpunkten aussehen? Wir benutzen diese Bedingung. Also werden wir sagen, nehmen Sie 100% der Nassen, aber beschränkt auf 1920. , Ich weiß,was du denkst. Wir haben diesen zusätzlichen Platz auf der linken und der rechten Seite, sogar auf der 14. 40 Pixel Wie kriegen wir das? Es ist ganz einfach. Also gehen wir zu 14. 40 Fixes. Ok. Und was ist mit dem Rapper-Selektor? Ich werde Abstände auf der linken und rechten Seite hinzufügen. Also, wenn ich dieses Element auswähle, können Sie sehen, dass Sie tatsächlich das Element auswählen können Sie die Kontrolle halten und auf ein Element klicken , wenn es innerhalb einer Gruppe ist und auch Option oder Kunst halten und nur den Mauszeiger über, um die Entfernung zu sehen . Also haben wir 72 Pixel auf der linken Seite, Ordnung, und 72 Picks sind auf der rechten Seite. Also, was wir tun, ist, dass ich die Knave Bar auswähle, die als Abschnitt fungiert, und ich werde ihr eine Klasse geben. Carlos de Navarra. In Ordnung. Und ich werde ihm eine innere Polsterung geben. Also was? Das auffüllen? Es schiebt Elemente nach innen. Sie möchten das übergeordnete Element immer auffüllen, so dass es Elemente nach innen schiebt. Die Planung wird also 72 Bilder sein. So können Sie sehen, dass, wenn ich den Mauszeiger über, Sie diesen grünen Abschnitt sehen können , der freundlich von der Polsterung ist, die der Abstand zwischen dem linken und dem rechten Element ist. Und auch, ich könnte dasselbe auf der rechten Seite tun und es 72. Das treibt auch das an. Sie können sehen, dass wir diesen inneren Abstand haben, den wir wollten. Wie wird es auf einem kleineren Bildschirm aussehen? Schauen wir uns 12 an. 46 ist in Ordnung. kannst du sehen. Das basiert auf 72 Plektren. Uns wird auf einer kleineren Bildschirmgröße als auch respektiert. Wenn du 1920 gehst, wie soll es aussehen? Es hat auch eine 1920 auf 1920. Wir haben die zusätzlichen 72 Picks eine Party. Okay, wenn du zu gehst, sagen wir 2500. Alles klar, wir haben die 72 Pixel Polsterung links und rechts. Aber hier wirklich egal, ist es wirklich egal,weil unser Witz auf 1920 Pixel beschränkt war. Jetzt sehen Sie, wir haben hier ein Problem, bei dem die Elemente freundlich nach links sind, aber Sie wissen, dass sie in der Mitte sein müssen. Wie machen wir das? Sehr einfach. Also wählen wir den Rapper. Alles klar, warum müssen wir den Rapper auswählen? Alles klar, denn wir können den Rapper nur auswählen, weil wir das als Zentrum definieren können. Wenn ich also auf diese Schaltfläche klicke, können Sie sagen, dass das Mittelelement horizontal eine feste Arbeit erfordert. Also haben wir tatsächlich einen festen Wert von 1920 Pixel definiert, das ist unser Maximum mit so allem nach tun ist, auf diesen Button zu klicken, und das wird dies auf den gesamten Bildschirm zentrieren. Also, wenn ich das auf 2000 Pixel sagte, können Sie sehen, dass es in der Mitte des Bildschirms ist, Ordnung, und das ist, was wir wollen. So kann dieser Knopf auf Lee angewendet werden, wenn wir eine bestimmte Breite definiert haben. Fantastisch. Also gehen wir zurück und sagten dies zu 14 40. Großartig. Gehen wir nun weiter und passen Sie diese Links an. Aber vorher, lassen Sie uns tatsächlich diese Navigation auswählen. Aber weil wir das transparent machen wollen, denn im Moment ist es Du kannst sehen, dass es transparent ist . Diese Navigationsleiste wird übertragen. Ich komme runter und hier in den Hintergrundeinstellungen hat es tatsächlich eine Art zufällige Farbe. Gehen Sie voran und klicken Sie auf diese Schaltfläche Machen Sie es transparent, damit wir nichts sehen. Ok? Und jetzt haben wir diese drei Elemente. Also, was ich tun will, ist mein Sohn in der 1. 1. Ich gebe ihm eine Klasse und nenne diesen Knave-Link. Das ist ein Name, den ich ihm gebe, okay? Und jetzt wirst du verstehen, wie wichtig eine Klasse ist. Okay, also lassen Sie uns voran und passen das mit unseren Einstellungen an. So kommen sie hierher, Sie können auf eines der Elemente klicken, die wir haben, und Sie können sehen, dass wir einen bestimmten Wert von hier haben. Jemand klickt auf diesen Knopf toe-Link, und ah, Ich habe irgendwie vergessen, die Telefone zu installieren, weil ich auf dem Mac Book Pro gearbeitet, Also werde ich sowieso tun, dass im nächsten Video. Also Aber für jetzt können Sie sehen, dass die Schriftgröße 16 ist und wir haben ah, Höhe off 1 50%. Alles klar, also werden wir tun, ist, dass ich die Schriftgröße auf 16 ändere. Okay, die Höhe wird 1 50% sein, um sicherzustellen, dass Sie den Prozentwert hinzufügen, und dann werden wir auch die Farbe dieses in Weiß ändern. Aber es hat eine Kapazität von 70%, wie Sie hier sagen können. Also werde ich auf diese Schaltfläche klicken und dann darauf klicken, um es weiß zu machen. Und ich werde auch auf Plus klicken, um es zu einem Farbfeld zu machen und dann auf Erstellen klicken. Und dann ändern wir den Alfa, acht ist, die auch Kapazität genannt wird, auf 70%. Jetzt haben wir etwas. Sieht so aus. Und offensichtlich ist dies Erfahrung. Wir müssen arbeiten, wir haben Fotografie und Sie haben Kontakt. Also werden wir es tun. Ist ich möchte doppelklicken Sie darauf und ändern Sie dies einfach zu erleben. Okay, großartig. Jetzt können Sie auch sehen, dass wir diese Sortierentfernung haben, die 24 Pixel auf der Oberseite ist, und Tito Pixel Studie 24 Pixel auf der linken und rechten und 32 Pixel auf der Oberseite. Also füge ich das Spotting hinzu, dass jemand hierher kommt. Und wie Sie sehen können, möchten wir dies auf 32 oben 32 unten, 24 auf der linken Seite und 24 auf der rechten Seite setzen . Okay, jetzt, wenn Sie sehen können, dass wir eine Art Struktur haben, so wie es wirklich so aussieht. Okay, großartig. Jetzt haben wir auch diese beiden Elemente. Was machen wir mit uns? Wir müssen sie natürlich auch so aussehen lassen. Also, was ich tun kann, ist, dass Sie sehen können, dass wir ihm unsere klassische ist knave Link geben. Ich werde es diesen knave Link verkaufen und ihm einfach eine Klasse namens Knave Link geben und Sie können die vorhandenen Klassen sehen. Wir haben auch die Klassen, die wir mit Ihrer Presse eingeben. Und das wird gelten. Es ist das Gleiche hier drüben. Knave Link und fantastisch. Lassen Sie uns voran und benennen Sie dies so arbeiten für Geographie, also Arbeit und Fotografie. Ok. Und dann werde ich das duplizieren, okay? Und das wird jetzt Kontakt Greater sein. Wie Sie sehen können, sieht der Kontakt anders aus, oder? Also, wenn ich voran und ändere die Farbe von diesem zu etwas anderem. Alles klar, wenn Sie also in den Hintergrund gehen, sind alle einige Hintergrundfarbe, die Sie betrachten, dass es auch diese andere Farbe anwendet. Aber das wollen wir nicht so hart. Wir tun das auf zwei Arten, wir können entweder eine brandneue Klasse erstellen. In Ordnung? Also kann ich diese Klasse entfernen, und ich kann eine brandneue Klasse erstellen, aber das wird viel Zeit brauchen, richtig? Es wird viele zusätzliche Schritte erfordern. Also, was ich tun kann, ist, dass ich es kann und Sie können Steuerelement Z drücken, übrigens,wissen Sie, um wissen Sie, die Kontrolle rückgängig zu machen und zu wiederholen. Warum ist Zehe Redo Control Z ist zwei unter? Was ich tun kann, ist, dass ich etwas namens Ist es Combo-Klasse hinzufügen kann? Wenn ich hier klicke, kann ich etwas hinzufügen, das eine neue Combo-Klasse hat. Und was? Ich werde es sagen. Ich werde diesen Knopf rufen, Ordnung? Jeder Name, was du willst. Du kannst es alles andere nennen. Also, wenn ich unten klicke, was passieren wird, ist, dass ich nach hinten um die Farben herumkomme und wir tatsächlich diese Farbe auswählen, die wir diese violette Farbe haben. Ich werde nur das Farbgericht kopieren, okay? Und, ähm, ein Paar hier, und das werde ich besetzen. Ok? Und auch, ich werde das einfach zu einem Musterfeld hinzufügen, und es heißt Blue hier, aber was auch immer, das sollte gut sein. Okay, jetzt, was hier passiert ist, ist, dass wegen dieser Combo-Klasse, Sie sehen können, dass diese drei die Narc, nur diesen Carter-Faktor beeinflusst haben. Und wenn du die Farbe hier siehst, ist das orange. Und das ist blau. Da diese Kombinationsklasse nur diese Eigenschaft von diesem zusätzlichen Farbwert hat, den wir hinzugefügt haben. Wenn ich also zur Zweckmäßigkeit gehe und wahrscheinlich sagen wir, ich ändere die Fremdgröße, können Sie sehen, dass sich die Schriftgröße auch dafür ändert, weil dies diese basierte Klasse namens knave Link hat. In Ordnung, ich werde voran gehen und einfach die Zehe 16 zurücklegen, richtig? Und weil es eine Basisverbindung hat, ändert es sich. Aber weil wir eine Kampfklasse hinzugefügt haben, die ein zusätzlicher Effekt ist, wirkt sich dies nur auf das Element aus, das diese Kombinationsklasse hat. Nun, die andere Sache, die wir hier beachten müssen, ist, dass dies tatsächlich in Boy rxf ein Blick hier rxf ist. Es ist in Boyd. Also, was ich tun kann, ist hier für den Knopf. Ich kann die Schriftart ändern. Warten Sie. Auch um sich zu langweilen, in Ordnung? Und das wird reinweiß sein. Ich werde das auch in reinweiß ändern. Okay, also das ist Element, tatsächlich, hat drei neue Eigenschaften sind unterschiedlich. Gewicht sind unterschiedliche Farben auf einem anderen Hintergrund Farben als auch. Das ist also die Bedeutung eines Combo Close. In Ordnung. Der nächste Schritt ist, dass wir weitermachen und ein anderes Logo hinzufügen, das wir hier drüben haben, und was Sie tun können, ist, dass Sie gedulden, oder die Assets, die sich in der Anlage in den Projektdateien befinden, und Sie können hierher kommen und auf die Assets, und Sie können tatsächlich das gesamte Asset importieren. Also werde ich das jetzt tun. Ok. Wie Sie sehen können, habe ich alle Bilder auf allen Assets importiert, die wir brauchen. Nun, was wir tun werden, ist, dass wir diesen Abschnitt beobachten, richtig? Also haben wir etwas als Marke genannt, und die Marke hat diesen Link wie auf, was bedeutet, es ist ein Link Block rechts. Wie Sie sehen können, ist es ein Block. Es ist ein Link-Block. Also wird es weitergehen und diese Marke nennen. Ok? Nun, was wir tun werden, ist, dass wir dieses Logo auswählen, das wir haben, welches ein SVG ist und das gezogen wurde, und ich möchte das innerhalb der Marke fallen lassen. In Ordnung? Es sollte im Braun sein. Ok? Ich weiß es nicht. Nennen Sie dieses Logo. Ok. Lasst uns nun der Höhe und der Breite trotzen. Das hier drüben ist 24 Pixel Stall. Und hier drüben, können Sie tatsächlich sehen, dass die Werte, die definieren, die 79 Pixel mit und 24 Picks von Stil, das ist genau das, was wir brauchen. Und das ist sowieso und svg, also müssen wir uns nicht zu viel um Skalierung kümmern, also lassen wir das so, wie es ist. Großartig. Nun, das Problem ist, er hier ist, dass alles hier irgendwie in der Mitte ist, aber das ist irgendwie nach oben ausgerichtet, also beeil dich, irgendwie Zentrum, Linus. Wir können also tun, wenn du siehst oder hörst, wir haben einen oberen Rand von 30 Zeh. Ich kann tatsächlich gehen und eine Marge von 30 Zeh hinzufügen. Tun Sie dieses bestimmte Element. Jetzt werden Sie vorsichtig sein, welches Element Sie hinzufügen und das Schreiben verschieben. Denn was wir tun wollen, ist, wissen Sie, fügen Sie es hinzu. Blockiert dieser Link richtig? Wir wollen dem Link-Block hinzugefügt, weil dieser selbst das gesamte Robin lokal enthält. Ich werde eine Marge oben hinzufügen und 32 nennen. So, jetzt die Marke, alles in Ordnung und am Logo sind innen auf dem Logo ist innerhalb der Marke und der Marke, Die Studie zwei Bilder weg von oben. Und das sieht so ziemlich aus, weißt du, in der Mitte. Und es sieht ziemlich gut aus. So ist es so ziemlich, wie wir diese Navigationsleiste erstellen. Wenn Sie gehen und ändern Sie es zu einem anderen Bruchpunkt, wie 1920, können Sie sehen, dass es sich irgendwie erweitert, aber behält diesen 72 Pixel-Rand, den wir behalten hatten. Und das sieht fantastisch aus. Großartig. Also im nächsten Video werden wir weitermachen und tatsächlich einige Hover-Interaktionen dazu hinzufügen und vielleicht sogar das für Tablet- und mobile Bremsteile reaktionsfähig machen . Also, ihr seid es im nächsten Video 8. Hover zum Navigationsbereich hinzufügen: Richtig. Also in diesem Video, was wir tun werden, ist, dass wir weitermachen und jedem dieser Elemente ein bisschen Spaß Hover-Interaktionen hinzufügen . Wir gehen nach draußen ein bisschen spielerischer und lebendiger. Also, wie machen wir das jetzt? Es sind zwei Arten von Interaktionen in Napa. Eins sind einfache Interaktionen, und eins sind komplexe Interaktionen. Wenn Sie komplexe Interaktionen und Animationen erstellen, Sie wahrscheinlich zur Interaktion gehen, stechen und es hier tun, was wir ein wenig später tun werden. Aber im Moment, was wir schaffen werden, ist eine sehr einfache Hover-Interaktion. Also müssen wir nicht auf die Stufe gehen. Wie machen wir dies durch die Verwendung von Klassen und lassen Sie uns sehen, wie das zu tun ist. Ich werde den ersten Knave Ling auswählen, den wir haben, und ich werde zu diesem Drop Down kommen, den ich habe, und ich werde ein State College wählen. Der Hover-Status. Jetzt haben Sie vier verschiedene Zustände schweben, gedrückt, fokussiert und besucht ST Jetzt, Manchmal würden Sie dies für Eingabefelder oder Tasten oder Zeug Leiter verwenden möchten. Aber in diesem Fall machen wir uns nur Sorgen, verwenden Sie Hover, klicken Sie auf Hover. Ich meine, wenn Sie haben können, was passieren wird, wird es ein Kampfplus schaffen, was bedeutet, dass jeder Effekt, den Sie unsere Anzeige erstellen, nur in dieser Combo-Klasse beeinflusst wird , richtig? Genau die Art, wie wir eine Combo-Klasse für diese Navigationslink-Schaltfläche erstellt haben, kommt jemand runter und wir werden tun, ist in den Farbeinstellungen. Ich werde tatsächlich eine neue Farbe löschen, sind in physische, wissen Sie, wie Harvard ein wenig und wahrscheinlich wählen Sie eine schöne Farbe und vielleicht sagte die Kapazität zu 100%. Im Moment sieht das aus wie eine sehr schöne helle Farbe. Und vielleicht könnten Sie etwas auf der blauen Seite gießen und ich werde voran und erstellen Sie ein Farbmuster, richtig und richtig erstellen können. Fantastisch. Und jetzt, was ich tun werde, ist, dass ich zurück in den Nicht-Staat kommen werde, so dass wir sicherstellen, dass es standardmäßig ist und unsere direkt überprüfen, ob diese Arbeit, was wir tun können, ist, dass Sie auf diese Vorschau-Flasche klicken können , die Art von Bewertungen, wie unsere Website tatsächlich aussehen . Und wenn ich schwebe, können Sie sehen, dass sich die Farbe richtig ändert und ich kann auch darauf schweben. Aber wie funktioniert es dafür? Es funktioniert, weil diese drei die gleiche Klasse haben. Richtig? Und wie wird er hier drüben sein? Es funktioniert wirklich nicht, weil es eine Komma-Klasse gibt. Das ersetzt sie irgendwie. Ok, so richtig. Und die Sache ist, Nein, das ist Arbeitskampf, aber wir können etwas Lockerung haben wollen. Wir wollen nicht, dass es sich sofort ändert. Wir werden etwas gesehen haben. Kleiner Übergang zwischen den Farben. Also, wie machen wir das? Also werde ich das aussuchen. Und im Nicht-Staat werde ich zu dem Abschnitt kommen, wo wir etwas namens Transitions haben. Und wo Sie das ist, wo Sie Lockerung hinzufügen können. Also das erste tun, ist, dass ich die Eigenschaft auswählen werde, die zwei ist, was die Schriftfarbe ist. Und das zweite ist die Dauer. Jetzt, einige. Normalerweise bevorzuge ich einen Bereich zwischen 304 100 Millisekunden. Also, jetzt werde ich nur 350 wählen. Sie können auch auf den Beschleunigungstyp. Und Sie haben viele verschiedene Arten von Lockerung. Ich gehe vorzugsweise für den, der sagt, dass er vor Gericht ist. Das ist ein Stil. Und ich mag, was Sie auf jeden Fall wählen können, was Sie wollen, und Sie können damit spielen, und das ist so ziemlich es. Wenn Sie also das überprüfen, können Sie sehen, dass Sie den leichten Übergang zwischen der alten Farbe und der neuen Farbe sehen können. Alles klar, und das ist viel besser. Okay, jetzt, was machst du für das hier? Also, was wir tun können, ist, dass wir ein paar Dinge tun können, die ich tun möchte, ist, dass ich einen Hover hinzufüge. Und dieses Mal gehe ich einfach in den Hintergrund, und ich werde das etwas dunkel machen, okay? Nur ein wenig dunkel, in Ordnung. Und dann werde ich es einfach so lassen. Wir werden wieder in den Nicht-Staat kommen und wir können einen neuen Übergang hinzufügen. Und hier im Übergang werde ich die Hintergrundfarbe auswählen und dies auf 350 Millisekunden einstellen. Und auch, die Lockerung wird leicht Gericht sein. In Ordnung, also schauen wir uns jetzt mal an. In Ordnung, du siehst, dass das ziemlich gut aussieht. fantastisch. Also, was wir eigentlich tun werden, ist, dass wir weitermachen und dies für andere Breakpoints wie etablierte mehr Byline Scape und mobiles Porträt reagieren . Also, ihr seid es im nächsten Video. 9. die Navigation reagieren zu lassen: Na gut, Leute. In diesem Video werden wir weitermachen und lernen, wie man diese Naff Bar reaktionsschnell macht. Es könnte ziemlich lustig sein, denn die Reaktionsfähigkeit ist ein sehr wichtiges Thema auf dem Konzept, das Sie wissen, wenn Sie lernen müssen, wenn Sie eine Website erstellen, so ist es wahrscheinlich, wie das zu tun. Jetzt haben wir drei verschiedene Breakpoints. Sie haben Tablet, Sie haben mehr von Landschaft und Sie haben mobile Portrait kleine Tablette zuerst. Nun, was wir hier sehen, ist, dass wir dieses neue Menü-Symbol haben, das da ist. Also, wo ist dieses Geld, aus dem ich eigentlich kommen kann? Wenn Sie sich die Navigation ansehen, haben wir die Marke. Alles klar, wir haben das Naff-Menü. Ich habe nie den Menüknopf bekommen. Nun, auf dem Desktop Breakpoint, hatten wir das Knave-Menü und die Menü-Taste war nicht da. Wenn Sie also tatsächlich sehen, was hier in der versetzten Einstellung, können Sie tatsächlich sehen, dass die Anzeige tatsächlich eingestellt ist oder nicht. Aber ich brauche noch einen Tabletten-Paketpunkt. Wir können sehen, dass die Menü-Taste, Ordnung, tatsächlich im Block ist. Anzeige auf dem Knave-Menü ist tatsächlich ausgeblendet. In Ordnung, das ist also froh, dass Büffel es automatisch gemacht hat. Nun, wenn Sie wirklich sicherstellen wollen, dass Sie auch die Navigationslinks auf dem Tablet haben wollen , wie machen wir das? Es ist ziemlich einfach. Wenn Sie die Knave-Leiste auswählen und wir kommen hier zum Elemente-Panel, das die zweite Spitze ist, können Sie sehen, dass wir die Möglichkeit haben, das Menü-Symbol für Tablet und darunter anzuzeigen. Was ich tun werde, ist, ich werde sagen, zeigen viele Symbole für Landschaft durch mobile Landschaft und unten. Okay, was bedeutet, dass, wenn ich in die mobile Landschaft gehe, wir das Menü-Symbol haben. Wenn ich hier rüber komme, leckt der Knave alles klar, toll. Jetzt können Sie sehen, dass es das gibt. Wir haben das Gefühl, dass es zu viel Platz gibt oder hier auf dem Desktop. Ich sah gut aus, aber auf einem Tablet fühlt es sich an, dass , dass es aus aussieht und Sie können auch sehen, dass wir hier mehrere Breakpoints haben, richtig? Und wenn ich sage Breakpoint, ich meine in diesem Zusammenhang Breakpoint für verschiedene Tablet-Geräte. Also haben wir iPad Pro, das ist 7 68 und dann haben wir 808 34 dann, weißt du, 912 und du weißt so weiter und so weiter. Also fangen wir mit dem Kleinsten an, weil es Sinn ergibt. Jetzt werde ich tun, ist ich komme hierher und wähle die NAB unsere und wir haben 72 hinzugefügt oder ich will es schon tun. Ist das auf 40? Okay, es sieht also viel besser aus. Wir haben uns verändert, die 40 waren hier. Aber wenn du hierher zurückkommst, kannst du es auch. Es bleibt noch 72. Wie funktioniert das? Denn das ist, was ein CSS Cascading Stylesheets. Was ist hier los? Sind das Änderungen, die Sie im Bruchpunkt nach unten kaskadieren? Also, was bedeutet, dass die 72 auf diese und das angewendet werden. Aber jetzt, sobald wir eine Änderung auf Tablette von 40 gemacht haben, wird diese 40 Transmitter in die Landschaft als auch, wo Sie sehen können, es ist 40 und nicht 72. Und für mobiles Porträt, das 40 ist, was vorher nicht 72 war. Also haben wir tatsächlich dieses Steuerelement, wo wir die Eigenschaften von einem Bruchpunkt ändern und nicht die anderen Bruchpunkte beeinflussen können. Und das ist fantastisch. Und das macht es viel einfacher, Dinge jetzt zu entwerfen und zu bauen. Gehen wir zum Landschaftsbruchpunkt. Aber es jetzt, wenn Sie tatsächlich sehen, dass wir das Design für das Handy als auch. Jetzt verhalten sich das mobile Portrait und die mobile Landschaft ziemlich ähnlich. So können wir tatsächlich die gleichen Einstellungen für mobiles Portrait verwenden. Richtig? Wenn du also siehst oder hörst, habe ich die Distanz abgeschaltet. Die Elemente sind 16 Picks auf der linken Seite und 16. Ich bin hübsch für okay. Das muss eigentlich 20 sein. Das muss auch 20 sein. Also werde ich sicherstellen, dass ich die richtigen Zahlen habe, okay? Und oben, Sie haben 24, die er auch in der Spitze von Auto 24 hatte. Wir können sehen, dass die Spitze hier 24 Picks ist unsere Marge. Also werde ich das einstellen. Sind das zwei von 24? Okay, sieht gut aus. Und unten. Auch unten. Sie können es so lassen, wie es ist. , Und dann,was wir hier tun können, ist für so viele, aber ich wollte das einen Menü-Button nennen. Okay, jetzt, da wir bereits dieses 2020-Pixel auf der linken Seite haben, ist was ich tun will, wundervoll genug, aber ich werde es auf der linken Seite entfernen, auf der rechten Seite. Die Art und Weise, wie wir 20 Pixelabstände erstellen, besteht darin, 20 Pixel-Polsterung zur Menüschaltfläche und auch 20 hier und 24 oben und 24 unten hinzuzufügen . Alles klar, jetzt sieht das so ziemlich weit aus. Nun, die nächste Sache ist hier, dass wir tatsächlich eine andere Ikone hier haben, Ordnung, und hier haben wir ein anderes Symbol. Nun, dies ist die Standardeinstellung. Ich führe Luftstrom-Geschenke und wir können dieses Menü-Symbol nennen, und Sie können tatsächlich voran gehen und mit diesem spielen, indem Sie Ihre eigenen benutzerdefinierten Einstellungen hinzufügen . Wenn ich gehe, kann ich die Farbe ändern, um weiß zu sein. Und was passieren wird, wird es ändern. Die Weißen. Nun, die nächste Sache ist, wie sehen Sie eigentlich den Menüpunkt? Wenn Sie zu einer Zielvorschau gehen, können Sie tatsächlich darauf klicken und das öffnet sich diese Sortierung aus A Sie wissen, viele, wo Sie tatsächlich durchgehen und tippen Sie auf jeden der Links. Hier befinden sich unsere Navigationslinks. Das ist das Naff-Menü, in Ordnung , aber vorerst werde ich dieses Symbol ersetzen, das wir haben. Also werde ich dieses Menü-Symbol importieren, das ich von den Assets habe, damit du tatsächlich sehen kannst, dass ich das Symbol hier drüben habe, also will ich eigentlich nicht zum Navigator gehen , und wir werden diesen Menü-Button jetzt öffnen . Dies ist die Menü-Taste, die wir haben. Ich werde weiterziehen und das in so viele stecken, aber ich kann die andere löschen, weil wir sie nicht brauchen. Okay? Und jetzt ist das in einem großen und das sieht ziemlich gut aus. In Ordnung. Wenn Sie mehr nach Landschaft betrachten, so sieht es im Design so ziemlich aus. Und wenn wir darauf klicken, öffnet es dieses Menü. Fantastisch. Offensichtlichbraucht dieses Menü auch etwas Arbeit, also werden wir das reparieren. Offensichtlich braucht dieses Menü auch etwas Arbeit, Also lasst uns auf die mobile Landschaft kommen. Können Sie tatsächlich umschalten, indem Sie diese Auswahl in Menü-Taste wählen, und Sie können naff Bar Einstellungen wählen und Sie können Menü öffnen. Und jetzt haben Sie das. Und jetzt alle Änderungen, die Sie daran vornehmen, wird es irgendwie den visuellen Stil beeinflussen. Also das erste, was zu tun ist, möchte ich diese Menü-Taste und den Hintergrund machen. Ich werde das ändern, um schwarz zu sein, oder? Das ist Nummer eins. Die nächste ist die nav Link sind tatsächlich transparent. Aber das Knave-Menü ist derjenige, der eine Art von Farben hat. Zuerst werde ich dem eine Klasse geben und dieses Naff-Menü nennen, okay? Und ich werde die Farbe ändern. Das ist , eine der Farben,die wir in der Figment-Datei haben, die hier ist. In Ordnung. Die Sortierung einer dunkelvioletten Farbe. Ich werde nur den Farbcode kopieren. Okay. Und ich werde hierher zurückkommen und das nur stützen, und dann werde ich das dem Farbmuster hinzufügen, und ich werde diese Stufe eins nennen. In Ordnung. Das ist das, weil wir so ziemlich diese Stufe eins nennen, Ordnung? Und vielleicht, was wir tun können, ist für das knave Menü für 30 für den knave Link. Was ich tun kann, ist eine Art unterer Rand hinzuzufügen. Also werde ich in den Randbereich klicken und auf diese Schaltfläche klicken, die einen unteren Rand hinzufügen wird. Und ich werde ein Wort aussprechen, okay? Und dass ich die Farbe von Schwarz zu einer Sorte ändern werde. Ah, weißt du, wie ein Licht. Oder lassen Sie uns Schauspielerin Redakteurin weiß. Und es ist die Deckkraft, etwa 12% oder so. Ja, das sieht viel besser aus. Und, ah , so wird es aussehen und der Kontakt. Aber es wird ein vollständiges Wort sein, also sieht das toll aus. Wenn Sie also das U-Boot öffnen, bekommen wir das. Sieht gut aus. Und wir können das schließen. Alles klar, mal sehen für Handy Sieht fantastisch aus. Großartig. Nun, da eine andere Sache, die Sie jetzt tun können, können Sie auch wählen, um das Menü als Dropdown-Menü zu öffnen oder überschreiben oder über links Wenn Sie über wählen . Ok, Onda, wir öffnen das. Sie können sehen, es kommt von rechts dort viele verschiedene Möglichkeiten, dass Sie dies behalten können wo ich es vorziehe, ein Drop-down zu wählen. Und wenn Sie sich einen anderen Link ansehen, können Sie mit der Lockerung herumspielen, oder? Ein paar Funktionen oder Funktionen. Also hier. Aber wir werden das einfach halten. Wenn Sie also unsere Landschaft sehen, sieht die Dinge ziemlich gut aus. Und ja, das sieht ziemlich gut aus. Alles klar, großartig. Also jetzt ist das einzige, was wir das Studio verlassen haben, irgendwie Links zu jedem von ihnen hinzuzufügen, denn sowieso sind dies Links. Wie können wir das machen? Denkt, wir werden diese Option für die Linkeinstellungen verstehen, die wir hier haben. So wie ihr Jungs im nächsten Video 10. Links zu Link-Elementen hinzufügen: Alles klar, also wird es ein sehr kurzes Video geben, weil sie einfach schnell verstehen, wie man Links hinzufügt. Nun, wenn Sie auf ein Link-Element klicken und wie wissen Sie, ob etwas Link ist oder nicht, ist durch den Blick auf dieses Link-Symbol. Wenn es so etwas hat, bedeutet das, dass es ein Link-Element ist. Sie können Eigenschaften darauf anwenden. So können Sie entweder klicken Sie auf dieses Zahnradsymbol wirklich haben, wie, sechs Eigenschaften. Alles, was Sie haben, ähm, wissen Sie, Sie können es in den Elementen überprüfen, die sich hier überspannt. Also ein paar Dinge, die man offensichtlich ist, kann jedes Element einen Link zu einer externen Website haben . Und Sie können auf das Kontrollkästchen klicken, wenn Sie es in einem neuen Tippen öffnen möchten. Na gut, dann hast du eine Seite. Also, wenn Ihre Website mehrere Seiten hat oder Sie tun können, ist, können Sie es Art von Link, tun, dass bezahlt. In diesem Fall haben wir also nicht mehrere Seiten. Also, was ich tun werde, ist, dass ich das so lasse, wie es ist. Wir werden den nächsten benutzen, der einen Abschnitt ist , aber zu der Rede kommen, wo wir es tatsächlich tun können. Wenn Sie dieses Logo auswählen und wir können das Markenelement auswählen, richtig, wenn Sie das Markenelement auswählen, können wir tatsächlich auf die Seite und auf der Seite gehen. Sie können die Homepage auswählen. Also jeder, der auf dieses Robin Logo klickt, wird auf der Homepage landen , und wir können sicherstellen, dass es nur oben steht. Öffnen wir es nicht in einem neuen Tab, der zurückkommt. Also hier haben wir etwas, das ein Seitenabschnitt ist. Dies ist etwas, das wir ein wenig später umsetzen werden. Aber im Grunde, was passieren wird, ist, wenn ich auf den Erlebnisabschnitt klicke, es ist Art von der Seite geht, um den Erlebnisabschnitt von der Website zu scrollen, so dass wir tatsächlich definieren können, dass. Es wird ziemlich cool. Der nächste ist, wenn du willst, dass jemand freundlich ist, um, Milieu. Wenn Sie also auf diese Schaltfläche klicken, wird es den E-Mail-Client von dieser bestimmten Person öffnen, und Sie können ah haben, können Sie. Sie können Ihre Immunität und auch, Sie wissen, am Präfix-Thema eingeben Sie wissen, , wenn Sie möchten. Als nächstes ist eine Telefonnummer, wie Sie Fremdverbindungen Telefonverbindungen sehen können, nur funktionierende Geräte, die Telefonanruf tätigen können. Dies ist also etwas, das Sie nur auf einem mobilen mobilen Breakpoint tun können. Und der letzte ist der Anhang, was bedeutet, dass Sie ein beliebiges Bild aus dem Asset-Panel anhängen können, und wenn Sie darauf klicken, wird es das Bild öffnen. Weißt du, entweder auf einem neuen Tab, wenn du auf den Button klickst, oder es wird ihre das öffnen, wo Amerika Recht hat. Also, das ist wirklich, was ist es an Navigationslinks? Das Ding muss es tun. Jedes Link-Element wird diese Optionen haben oder ob Sie einen Link-Block verwenden, es wird diese Optionen haben, also ist das ziemlich viel es. Und in der nächsten Woche werden wir in die Heizungsabteilung springen und den Heldenbereich aufbauen. Also werde ich euch im nächsten Video sehen 11. Aufbau des the: Na gut, Leute. In diesem Video werden wir fortfahren und den Heldenbereich aufbauen , der hier ist. Und bevor wir das tun, verstehen wir immer irgendwie, wie Elemente Struktur sind und wie sie gebaut werden. Also, was wir tun werden, ist zu sehen, wie viele Elemente wir haben. Du so kleines Bild auf der linken Seite. Wir müssen Textelemente und dann haben wir diese Hintergrundrahmendekorationen oder so. Richtig? Wie machen wir Bauherren? Also habe ich diese Sortierung aus einem einfachen Box-Modell Drahtrahmen erstellt, wo wir irgendwie verstehen können wie es funktioniert. Wir werden damit beginnen, einen Abschnitt zu erstellen, der die Orange Party ist, richtig? Ich werde einen großen Abschnitt erstellen, und dann werde ich einen Rapper erschaffen. Wie Sie hier sehen können, ist dies unsere Wrapper-Farbe auf der linken Seite, wir haben ein Bild, und auf der rechten Seite werden wir einen De Block erstellen, der halten wird, tun nächste Elemente. So können Sie die Zehenstruktur, alles und viele Komponenten nicht wollen . Jetzt können wir sehen, dass dieser Text das Bild überlappt, was in Ordnung ist. Aber das ist nur, um zu erklären, wie zu strukturieren und welche Komponenten zu verwenden sind. Und wie sieht es wirklich in den Rücken aus? Es stimmt. Und die andere Sache der Notiz hier oben geschrieben ist, dass die Bildhöhe Ah haben wird , Höhe von 45 v hetch auf den Bildern wird 55 www sein. In Ordnung, also sind wir ein bisschen gemein. Also lasst uns tatsächlich in den nassen Boden springen und dann sehen, wie das alles funktioniert. In Ordnung, also hier meine ich Rep Low und was es noch mal tun soll. Ich werde beginnen, indem ich einen Abschnitt erstellen und sicherstellen, dass Sie den Körper auswählen, weil der Abschnitt ein Kind des Körpers sein muss. Ich bin eine Presse kontrolliert essen und suchen nach Abschnitt. Und das ist das Element, das wir waren. Also haben wir ein Abschnittelement. Ich werde diese Einsicht fallen lassen. Und das erste, was du immer wolltest, ist eine Klasse. Also werde ich diese Hitze oder Sektion nennen. Okay, das ist ein Jetzt, was wir tun wollen, ist in einem Rapper hinzuzufügen, also werde ich einen weiteren Div-Block erstellen, okay? Und das wird unser Wrapper sein. Okay, du bist, wir haben bereits eine Klasse, in der Rapper steht, also können wir das hinzufügen, Ordnung. Und wenn du das siehst oder hörst, gibt es so ziemlich nichts auf der linken Seite und weißt du, die Steuer oder hier kostet 40 Pixel auf der rechten Seite. Also werden wir tun, ist ich werde zum Abschnitt gehen, denn wenn Sie sich den Knave ansehen, aber wir haben hinzugefügt, dass in einem Rand auf der Nabaa, die auf den Abschnitt zugreifen wir hinzugefügt 72, weil Pixel auf der linken Seite und 72 Pixel auf der rechten . Ich frage mich, das gleiche für diese Heizung Abschnitt ist, aber so lassen Sie mich gehen und greifen, dass hier Abschnitt und für den Helden Abschnitt, werde ich eine Polsterung von 40 Pixel auf der rechten Seite hinzufügen. Alles klar, das war's. Nur 40 Plektren sind auf der rechten Seite. Jetzt. Der Grund, warum wir momentan irgendetwas ist, weil der Moment, in dem wir Eigenschaften sind, die Art von Zusammenbruch, weil es keinen Inhalt gibt, oder? Also lassen Sie uns tatsächlich einige Inhalte hinzufügen. Also haben wir den Abschnitt hinzugefügt, den wir den Rapper hinzugefügt haben, und jetzt müssen wir diese beiden Elemente hinzufügen, richtig? Also, idealerweise möchten Sie dafür einen De-Block und einen Deadlock dafür hinzufügen, richtig? Aber bevor wir das tun, machen wir etwas Neues. Und etwas anderes, das man tun wird, ist, dass ich den Rapper auswähle, den wir haben, okay? Und ich werde eine Combo schließen. In Ordnung. Und warum höre ich diese Komma-Klasse? Erlauben Sie mir das zu erklären. Also tippe ich einfach in Raster, okay? Was jetzt bedeutet, dass alle Änderungen, die ich mache, nur diese Kombination plus und alles andere gleich bleiben. Was ich tun werde, ist jeder Blick, hierher zu den Anzeigeeigenschaften zu kommen, und wir haben sechs Anzeigeeigenschaften, okay? Und wir waren irgendwie gehen zu verstehen, was diese +21 nach dem anderen. Aber für jetzt werde ich tun, ist ich werde auf die 3. 1 klicken, die sagt Good können Sie Elemente davon in Zeilen und Spalten platzieren . Ich klicke auf das animierte. Sie können sehen, dass wir diese Gitterstruktur haben, die wir haben. Okay. Und wir werden tun, ist, dass ich die Raster von Harmoniespalten und -reihen wählen und anpassen werde. Ich will offensichtlich, dass ich nur einen Dro brauche, also werde ich hier drüben löschen, indem ich hier drüben schwebe und du kannst glauben. Und wir müssen Säulen, was in Ordnung ist. Das ist es, was wir brauchen. Alles klar, großartig. Jemand geht voran und klickt auf. Fertig. Also jetzt haben wir eine Art von dieser großartigen Ebene, und alles, was wir jetzt tun müssen, ist Eingabeelemente. In Ordnung, also beginnen wir, indem wir einen De-Block für das Bild und einen Deadlock für den Text erstellen. Okay, also werde ich Steuerelement E drücken, und ich werde ein Element einbringen, das den Block verursacht hat, in Ordnung? Und was passiert, wenn man sich die Navigation anschaut, wir haben die Hitze oder den Abschnitt, und dann haben wir den Rapper , der jetzt in Form eines Gitters ist, das vorher ein Taubenblock war. Und jetzt drin haben wir diesen einen Block. Okay, ich werde das duplizieren, indem ich die Kontrolle drücke, Say Country. Und was das tun wird, ist, dass es in eine zweite Zelle geht, weil dies das zweite Kind ist . Und die 1. 1 wird die erste besetzen, weil die erste Reise, ich werde die 1. 1 retten und ich werde eine Klasse hinzufügen, und ich werde diesen Helden Image-Rapper nennen Okay, Nun, Nun, wir könnten einfach diese Heldenbildbox nennen. Ich denke, das wäre ein besserer Name. Okay. Und für die 2. 1 werde ich es so lassen, wie es diese und eine Menge Unterricht später, und ich werde dir sagen, warum. Beginnen wir also mit dieser Heldenbildbox. Also, jetzt, wo wir diese Heizbildbox erstellt haben, werde ich gehen und mir das Heldenbild schnappen, das hier drüben ist, okay? Und ich wähle das aus, und ich werde das drinnen fallen lassen. Das Problem ist, es wird nicht genau in das Element fallen, das wir wollen. Das Problem ist, Der beste Weg ist also, hier in die Navigation zu gehen. Lass es da rüber fallen. Okay. Nun es immer noch nicht schnell ziemlich gut. Also stellen wir sicher, dass wir es richtig gemacht haben. Also, was ich tun werde, ist, dass ich dieses Bild auswähle und es in dieses Heldenbild stecken werde, um genau dort zu blockieren. Geh jetzt. Dieses Bild ist ziemlich groß und riesig, oder? Also, was wirst du tun? Ein seltsamer ist das erste, was ist, klicken Sie auf das Zahnradsymbol und ich werde voran gehen und nicht auf dieses Bild. Es sagt, Bild ist H I D p. Ich werde darauf treten. Okay, und nichts ändert sich. Und ich werde erklären, was diese h i v p ich im nächsten Video bedeutet. Dann haben Sie Kontext. Aber für jetzt, lasst uns einfach nicht auf h I D P I Ok, und das ist großartig. Und jetzt werden wir das tun, ist, dass wir diese Sackgasse haben, und ich werde noch keinen edel geben. Ich werde gehen. Und ich habe keine Textelemente gemacht. In Ordnung, also wird man diese Überschrift sein, und einer wird das sein. Also haben wir ein paar nächste Elemente. Wenn Sie sich das Elementfenster in der Typografie ansehen, haben wir Überschriftenabsatz, Textlink, Textblock, Anführungszeichen und Rich-Text. Also in diesem Fall werden wir verwenden und 11 Qualität Überschrift. In Ordnung, ich werde das ziehen und die Einsicht fallen lassen. Und warum müssen wir eine Überschrift benutzen? Also die Sache mit Websites ist, dass die Art und Weise, wie sie auf Google rangiert wird, durch die Tatsache , dass, wenn Ihre Website Wörter hat, die die Suche nach Beschreibung durch den Benutzer auf Google gemacht entsprechen , dann sind Sie verärgert wird zu bekommen rangiert. Wie definieren Sie diese Schlüsselwörter in einer Website? Und das ist durch die Verwendung dieses Elements Qualität Rubrik Steuer. Also klicke ich auf dieses Zahnradsymbol. Ich habe sechs verschiedene Hilfe-Überschriften-Tags, und diese werden basierend auf der Ebene außerhalb der Hierarchie platziert. In diesem Fall haben wir Robin Williams, einen Produktdesigner mit Sitz in Italien. Das ist ziemlich groß, und das ist die wichtigste Information auf der Website. In Ordnung, das ist das Wichtigste in Bezug auf die Hierarchie. Das wird also jeder sein. Okay, also was ich tun werde, ist, dass ich einfach voran gehe und dieses H eins nennen werde, okay? Ähm, oder wir können es einfach nennen Wissen Sie, Überschrift und Unterstrich. Ähm, und wir haben ein paar Werte gegeben, wie 76 Picks ist, also werde ich sagen, unter der Schule 76 Pixel. In Ordnung. Und lassen Sie uns voran gehen und tatsächlich diese Werte hinzufügen. Also haben wir Oh, ich habe vergessen, die Telefone zu installieren. Ich werde das noch mal tun. Also haben wir sen bowled 76 100% Linie Höhe. Okay, also lass uns das machen. Also haben wir auch diesen Rand an der Spitze. Ich werde das wirklich entfernen und sagte, dass 20 oben unten, weil wir das nicht brauchen. Um, 76. Alles klar, Höhe wird 100% Farbe wird weiß sein. Okay? Und, äh, ich denke, ich werde das 210% einstellen. Alles klar, das sollte okay sein. Und es sieht gut aus. Alle nach den Nachrichten werden das kopieren. Also werde ich sagen, ich bin Robin Williams, es Produktdesigner mit Sitz in Italien davon. Nun, das sieht fertig aus, anders als wir es haben. Das erste, was Sie tun, wird das auf 14 40 Pixel setzen. Also, jetzt können Sie das wirklich sehen, und dann werden wir tun, ist, ich werde,wissen Sie, das Gitterelement auswählen wissen Sie, , das in diesem Fall der Rapper ist. Und wenn ich auf dieses Symbol klicke, können wir das große bearbeiten. Was wir tun werden, ist zuerst, ich werde die Spalte zu entfernen und sagte, dass Null, weil wir wollen, dass sie abgeschnitten werden, berühren einander. Und das sieht ziemlich gut aus. Was hier nicht passiert ist, ist, dass dieses Bild eigentlich ziemlich lang ist. In Ordnung? Das ist , ziemlich groß,wenn man es sich anschaut, es ist es, dass es eine Menge kriecht. Richtig? Aber hier drüben wird es sie auf Ah beschränken, Höhe von 45 V Luke. Okay. Und das ist etwas, das wir definieren können, richtig, weil wir nicht wollen, dass es so riesig ist, und Sie könnten ein Bild haben, das länger ist als das, oder kurz davon ist. Und wie willst du es zum Laufen bringen? Richtig. Also, was wir tun, ist, dass ich zuerst auswähle, lasst uns das eine Klasse geben, und ich werde das Bild das Heldenbild nennen, okay? Und ich werde das übergeordnete Element auswählen, das die Heldenbildbox ist. Und ich werde sagen, ich möchte, dass du eine Höhe von 45 einnimmst. Wir schlüpfen. In Ordnung. Wir konnten immer noch sehen, dass so ziemlich nichts passiert ist, und es macht keinen Unterschied. Wir konnten immer noch sehen, dass so ziemlich nichts passiert ist, Also, wie, so das erste, was zu tun ist Pflegefall gegen diese zurück zu 14. 40. In Ordnung. Und dann werde ich tun, weil sich das überschneidet. Was ich tun kann, ist, dass ich den Dev-Block tatsächlich auswählen kann. Okay? Was hier drüben und im Todesblock ist. Ich werde jetzt tatsächlich eine Klasse geben und diesen Helden-Textblock nennen. Okay? Und ich werde eine negative Marge geben. Chirurgische Abschaltung überlappt diesen. Und wie viel müssen wir ihm geben? Ich glaube, ich werde es irgendwo um 64 Pixel geben. Richtig. Also sage ich Marge negativ. 64 Picks ist so, jetzt ist das eine Art Überlappung. Es überlappt das Bild noch nicht vollständig, denn das Bild nimmt eigentlich nicht die gesamte Breite ein. Alles klar, wenn man sich den Heldenbildblock in Ordnung anschaut, kann man sehen, dass es so viel braucht, aber das Bild nimmt nicht wirklich so viel in Anspruch. Richtig? Also werden wir tun, ist, dass ich das Heldenbild löschen werde. Lasst uns das glauben. Und ich höre die Heldenbildbox zu. Und anstatt ein Bildelement hinzuzufügen, was ich tun werde, ist, dass ich zu den Hintergründen und Bild-Zutat hier kommen werde, und ich werde auf das Plus klicken und ich werde wählen Bild und dann werde ich gehen und wähle meine Wärme oder Bild. Also, jetzt fungiert dies als Hintergrund. Nun, das nächste, was tun wird, ist, dass ich das abdecken werde, und ich werde es auf Thailand keines setzen. Und auch die Position von mehr zu zentrieren. Also, was das jetzt tun wird, ist, dass es weitergeht und das Bild in die Mitte bringt. Jetzt können Sie offensichtlich mit diesen Werten herumspielen, um zu sehen, was Sie wollen, aber das sieht im Moment ziemlich gut aus. Es sieht immer noch nicht perfekt aus. Es sieht ziemlich groß und groß aus hier drüben. Aber, weißt du, wir werden das langsam reparieren. Das nächste, was zu tun ist, lassen Sie uns in diesem Bild hinzufügen. Entschuldigung. Lassen Sie uns in diesem Textelement hinzufügen. Also, jetzt werde ich weitermachen und das kopieren, also werde ich diesen Absatz 18 Pixel erstellen, eine Kopie. Das Und jetzt, Jetzt ist dies wichtig, diese Informationen vielleicht nicht sehr wichtig sein, weil es in Bezug auf die Hierarchiegering ist Hierarchie , wissen Sie, wenn Sie auf die gesamte Seite schauen, so werde ich eine verwenden Element aufgerufen als Absätze und unterdrückte Kontrolle tief und Suche nach einem Absatz. Okay, und ich werde doppelklicken und das in Sicht einfügen. Und wir werden diesen PATA Graph Unterstrich 18 Pixel nennen. Denn dies ist unser Absatz 18 Pixel. Wenn Sie sich die Einstellung ansehen, haben wir 18 reguläre und 1 50%. Okay, also werde ich gehen und die Schriftart der Farbe auf Weiß setzen. Alles klar, ähm, Essen Picks ist und 1 50%. Okay, also wird es so aussehen. Und wir haben auch einige Abstände, wissen Sie, unter tief hito die Überschrift. Das ist also um Toledo Pixel. Also, was wir tun, wird diese Heldenüberschrift und am unteren Rand auswählen. Ich werde sagen, 32 Mixer und das sieht ziemlich gut aus. Nun, die Dinge sind immer noch nicht so perfekt, wie sie es sein sollten. Also, was wir jetzt tun werden, ist, dass ich tatsächlich gehen und auswählen werde, tatsächlich, lassen Sie mich das hier drüben richtig machen, und ich werde eine weitere Zeile hinzufügen, und ich werde sagen, dieser Abschnitt Versteck ist 100 Veatch. Okay, was bedeutet das noch einmal? Schauen wir uns mal an. Ich gehe zu diesem Abschnitt, okay? Und in der Heldenabteilung, werde ich sagen, nehmen Sie eine Höhe von 100. Wir koppeln. Okay, jetzt, wenn Sie sehen können, dass ich in der Lage bin zu scrollen, weil es 100 von der View-Port-Höhe einnimmt . Wo heißt das? Halten Sie fest. Lassen Sie mich das eins nach dem anderen erklären. , Das einzige,was passiert ist, ist, dass sich die Höhe geändert hat. Aber, weißt du, das ist immer noch oben, weißt du, es ist nicht in der Mitte. Also, was ich tun kann, ist, wenn ich den Rapper auswähle, Ordnung. Und was ich jetzt tun werde, ist, dass ich keine Änderungen an diesem Held Grid Rapper vornehmen will. Also werde ich gehen und klicken Sie auf das, was besagt, drei Selektoren erben, und ich werde die untere Ebene eins wählen, also werde ich nur auf den Rapper klicken. Also jetzt alle Änderungen Emmick wirkt sich nur auf den Rapper aus. Und hier in der Höhe, werde ich sehen, warum nimmst du nicht 100%, richtig? 100% Rabatt auf das Elternteil und 100% des Elternteils ist 100 v Luke. , Der Grund,warum ich hier nicht 100 V Hecken sage, ist, weil wir diesen Rapper mehrmals benutzen werden und ich will nicht, dass alles 100 ist. Die Hecke, in Ordnung. Nur in diesem Fall wollte ich 100 v Hedge sein, so dass ich es tatsächlich anwenden. Zehe Reparatur und Element, das ist dieser Abschnitt. Okay, also hier werde ich 100% sagen. Und das geht zu Ihnen sehen, dass der Rapper auch den ganzen Raum einnimmt . Aber wenn Sie sehen, dass die Dinge nicht wieder richtig ausgerichtet sind, müssen wir sie in der Mitte sein. Richtig? Warum sind sie nicht in der Mitte? Das liegt daran, dass wir vollautomatisiert sind, alles nach oben und links oben schiebt. Und zu denken, dass wir manuell einige Änderungen vornehmen müssten. Also das erste tun wird, ist hier in dieser Sackgasse, die wir die Hitze oder den zusätzlichen Block nennen. Wenn Sie eine große erstellen, wenn Sie eine große erstellen, können Sie tatsächlich definieren, wie die untergeordneten Elemente aussehen. Das ist also ein tolles Kind, richtig? Also werde ich ein Zeilenzentrum dafür sagen und wir machen das gleiche hier drüben, Held Image Block ist ein tolles Kind, Ordnung, denn es ist ein Kind aus dem Netz, okay? Und ich möchte sagen Allianzzentrum. Also, jetzt ist das so ziemlich, wie es aussieht. In Ordnung, aber wenn du es dir ansiehst, es wirklich nicht , weißt du, aus, weißt du,genau so aus. Also kann ich tun, ist hier für diese Heldenbildbox, anstatt eine Höhe von 45, die ich ändern kann, um etwas Größeres. So etwas wie 65 Jahre in Ordnung, auf das sieht viel besser aus. In Ordnung. Und jetzt kann dieser Wert geändert werden. Ab 45 können Sie es 65 Jahre machen, je nachdem, wie Sie es wollen. , Lassen Sie mich erklären,was eigentlich passiert. Wenn ich gehe und auf dieses veröffentlichte Projekt klicken und ich wählen kann veröffentlicht, um die Domains auszuwählen , kann ich auf die eigentliche Website klicken und sehen, wie das aussieht. , jetzt Also, jetztsieht es so aus, wie es irgendwie in Ordnung ist. Und wir haben diesen Abschnitt, der 100% Rabatt auf die Höhe des View-Ports nimmt. Und in meinem Fall ist meine View-Port-Höhe, da ich auf einem Windows-Display bin, es ist 10 IGP. Aber wie überprüfen Sie es auf andere Bruchpunkte, richtig? So können Sie Was Sie tun können, ist, dass Sie mit der rechten Maustaste klicken können. Und sie wurde inspiziert, okay? Und ich wollte so etwas kriegen. Und was hier zu verbergen ist, wie ich die Höhe vergrößere, können Sie sehen, dass sich die Höhe von diesem auch ändert, weil wir eine Eigenschaft definiert haben, die sagt 100 v Hedge, was bedeutet, dass es bleibt von 100% aus der Sicht Bord Höhe. In Ordnung? Und wir sehen, dass wir so viel Lücke und Platz oben haben. Also, warum passiert das? Das liegt daran, vor allem denke ich, dass die Höhe des Heldenbildes zu klein ist. Also vielleicht könnten wir diese sieben TV-Hecke und auch die Sektion machen, anstatt 100 zu sagen, die wir getroffen haben . Das ist wirklich wirklich verwenden, dass bis zu 90 v Hecke, richtig? Und das bringt es ein bisschen näher, wie es in unserem Design aussieht. Ich denke, wir müssen viel mehr tun, anstatt zu sagen, 70 wir Kopf, ich werde für 85 wir hitch gehen und das sieht etwas besser aus. Vielleicht denke ich, dass eine TV-Hecke ein guter Job wäre, also werde ich voran gehen und diese Bildhöhe auf eine T-V-Luke einstellen. Okay, das sieht gut aus. Und das sieht ziemlich näher aus. Tu, was wir haben. Wir können tatsächlich klicken Sie auf Veröffentlichen Sie die ausgewählten Domains wieder. Das wird es in unserer Sub-Domain veröffentlichen, die kostenlos ist. Und ich kann das einfach neu laden und du siehst, es sieht ein bisschen besser aus. Wie ich sagen würde, viel besser, wenn er dies zu 14 sagte. 40 Fixes. Ähm und, wissen Sie, lassen Sie uns das auf 25% zurücksetzen. So wird es aussehen. In Ordnung? 14 40 Bilder. Das sieht ziemlich gut aus. Alles klar, gut. Nun, das letzte, was wir tun wollen, ist, dieses Hintergrundelement hinzuzufügen das letzte, was wir tun wollen, ist, dieses Hintergrundelement hinzuzufügen. In Ordnung? Und ich werde auch hier ein paar Eigenschaften hinzufügen. Also, wissen Sie, erstellen Sie einfach eine Kopie, okay? Und ich nenne diesen Hito BG Oh, wir müssen einen Elite-1-Helden BG duplizieren und haben uns gefragt, wer für die Höhe ist. In Ordnung, ich werde sagen, 100 v Luke. Okay, vielleicht ändern wir das etwas später, aber wir sind uns nicht sicher. Und für das Bild, das es wert ist, bewaffnet für die Welt, werde ich 65% sagen. Okay, das ist 65 VW und wir werden diese Abschnitthöhe entfernen. Okay, das werden wir tun. Also lasst uns weitermachen und das tun. Also jetzt ist dies selbst ein Element. Es ist ein De-Block, weil es nur eine zufällige Form ist. Also, was wir tun werden, ist, dass ich fortfahren und sicherstellen werde, dass wir in der Heldenabteilung sind , okay? Und ich werde jeden auf die Kontrolle drücken. Adam hat den Block gegessen. Jetzt diese Sackgasse, ich werde es Keitel BG nennen. Und ich werde diese Farbe hinzufügen, die wir haben. In Ordnung? Diese Farbe haben wir bereits hinzugefügt. Also werde ich zum Heizgerät BG gehen und in der Grady in Einstellungen werde ich Gelehrten wählen. Und hier in den Farbeinstellungen würde diese wählen, die unsere Ebene eins ist. Und weil das ziemlich gut aussieht. Großartig. Nun, wie sind wir nett, dass es nach oben passt, richtig? Wie machen wir das jetzt? Hier definieren wir 19 900 von 900 die, was im Design ok aussieht. Aber es könnte, aber wir wollten tatsächlich diesen Eigenschaften folgen, die 100 v. Hatch und 65 VW sind. Also werde ich anfangen, Tito zu sehen. Warum nimmst du nicht 100% Rabatt auf die Höhe des Anschlusses und ich werde sagen, 100-V-Luke, Okay. Und jetzt wird das nehmen 100% der Ansicht Port Höhe und für die Aber ich werde sagen, 65 wir w richtig, Und das ist 65%. Nun, das muss tatsächlich an der Spitze wachsen. Nun, hier ist eine neue Funktionalität, die wir verstehen werden. Wir werden etwas über absolut und relativ verstehen. Nun, wenn wir Elemente haben, die sich überlappen, wie Sie sehen oder hören können, ist das ganz oben. Dies ist unten, aber dann haben wir den Text und das Bild oben. Aber weißt du, dieses Element ist unten. So haben wir Ebenen, kaum Ebenen in Websites gesetzt. Also werden wir tun, wird dieser Held mögen, B g, B g, und ich komme hier runter, um sich zu positionieren, okay? Und ich werde Position wählen. Absolute. Okay, jetzt ist nichts passiert, aber wenn ich wirklich darauf schwebe. Sie können sehen, dass es einen Text gibt, der absolute Positionen ein Element relativ zur nächstgelegenen Position übergeordnetes Element sagt , den Körper, wenn kein übergeordnetes Element ausgewählt ist, Also was bedeutet das alles? Also, wenn ich eine dieser Presets wähle und ich werde sagen, dieser Ort, das ist die Spitze, richtig, es wird gehen und hängen sich oben rechts von der gesamten Website, die der ganze Körper in in diesem Fall. Okay, aber das Problem ist, Sie können sehen, dass es alles überlappt. Also, was ich tun werde, ist hier haben wir etwas namens Z-Index, der eine Zahl definiert, und diese Zahl ist die Ebene außerhalb der Hierarchie überlappt oder Krankheitsraum. Und wir gehen weiter und haben das nur zu minus eins gesagt. Okay, jetzt, wo ich Senator minus eins habe, ist es hinter allem anderen, weil alles diese Stufe Null beginnt. Ich gehe eine Ebene zurück und setze sie auf minus eins. Okay, großartig. Nun, eine Sache, die ich noch erklären möchte, ist hier. Die Position ist auf absolut eingestellt und relativ zum Körper, was bedeutet, dass sie nach oben rechts vom Körper positioniert wird. Alles klar, jetzt sehen wir, was passiert, wenn ich es ändere. Tut etwas anderes. Was? Ich meine, das gleiche ist das hier. Wenn ich in den Heldenbereich kommen, die das Elternteil ist, und wenn ich voran und sagte, die Position aus diesem relativ, Sie können sehen, dass diese Box Alles in Ordnung, das ist dieser Held B g ist eine absolute Position, die ist oben rechts neben dem Heldenbereich positioniert. Okay, Okay, das ist der Unterschied zwischen relativ und absolut, und du willst weitermachen. Und wenn ich dies nach oben links ändere, wird es nach oben links neben dem Heldenbereich gehen, weil es im Moment relativ zum Heldenbereich ist . Also, wenn ich das entfernen und es Standard machen möchte, was ich tun kann, ist, dass ich zum Heldenbereich zurückkehren kann, der das Elternteil ist, und um es zu reparieren, werde ich diesen statischen Keeper Standard setzen. Also jetzt es. Also, jetzt ist dieses Element, das der BG-Held BG ist relativ zum Körper und wir wollen, dass es oben rechts sein . Also werde ich das oben rechts sagen. Und jetzt gehen wir weiter und geben diesem schnell eine Veröffentlichung und sehen, wie das aussieht. Alles klar, gehen wir weiter und schließen das und aktualisieren. In Ordnung. Ich habe gerade neu geladen. Und so sieht es aus. Das sieht ziemlich gut aus. Nun können Sie hier auch sehen, dass Sie den Raum hier kennen. Es ist ziemlich groß. Spielen Sie um mit diesen Werten ein wenig mehr so hier sagten wir, die Höhe der 100 v Hecke oder ich tun kann, ist wahrscheinlich gesagt, dies zu 100 10 v h. Alles klar, vielleicht sieht das gut aus. Lassen Sie uns eine Chance geben. Mal sehen, wie das aussieht. Wir können das Hintergrundbild auswählen, das wir haben. Ah, Held BGE. Und hier in der Heideman sagte, dass 110 v hitch und das gibt ein wenig mehr Platz. Ich finde, das sieht ziemlich gut aus. Es sieht fair genug aus. Lasst uns schnell einen Blick werfen. In Ordnung? Und lasst uns das neu laden. In Ordnung? Und wir gehen, ja, es sieht viel besser aus. Wir haben diesen zusätzlichen Platz unten, okay? Sie können auch sehen, dass dieser Text hier drüben freundlich ist, Sie wissen schon, weg zur rechten Seite. Eso, was wir tun können, kein guter Weg, das zu beheben, ist, dass wir tatsächlich nur, äh, Abschnitt 40 und 40. Und was wir tun können, ist, dass wir das in eine andere Zeile brechen können. , Also,wenn er jetzt sagt, dass es 1920 in Ordnung ist, können Sie sehen, dass es irgendwie in eine andere Zeile bricht, die wir tun könnten. Das gleiche sind auch hier, könnte man sagen, Sitz in Italien in einer anderen Linie. In Ordnung, also, weißt du, es sieht irgendwie besser aus. Großartig. Nun, eine letzte Sache, die wir tun wollen, ist, wenn Sie sehen oder hören, dass der Text, der sagt, basiert in Italien ist irgendwie in einer geringeren Deckkraft. Also, wie gehen wir weiter und machen das jetzt? Offensichtlich können Sie voran gehen und selbst ein anderes Textelement erstellen und ihm eine andere Klasse geben und die Farbe ändern, aber wir werden dies ein wenig einfacher machen. Also, was wir tun, ist, dass ich hierher bis 14 zurückkomme. 40 und ich werde voran gehen und wählen Sie diesen ganzen Abschnitt, der in Italien ansässig sagt. Und wenn wir das auswählen, erhalten wir diese fünf Optionen, die fett kursiv, Linkspanne und klare Formatierung sind. Was wir tun wollen, ist schnell mit Spanne zu wählen. Okay? Und sobald Sie die Schnellspanne ausgewählt haben, sehen wir, wie es in der Navigation aussieht. Also begannen wir mit der Hitze. Oh, Abschnitt. Und dann hatten wir einen Helden Rapper. In Ordnung, welches war unser Gitter? Und darin auf der linken Seite hatten wir die Heldenbildbox. Und auf der rechten Seite haben wir diesen De Block, der Wärme oder Textblock genannt wird. Ich bin mir nicht ganz sicher, warum es diesen Namen hier nicht aktualisiert. Ah, gut. Er Zehen-Textblock. In Ordnung, jedenfalls. Und in diesem Helden-Textblock haben wir eine Überschrift, die die wichtigste ist, und dann haben wir einen Absatz. Nun die Überschrift, die ein Textelement ist, hat die Überschrift, die ein Textelement ist,ein weiteres untergeordnetes Element, das Carlas Textspanne ist. Ordnung, InOrdnung, jetzt werde ich eine Klasse geben, und da das tatsächlich 50% Kapazität ist, nennen wir diesen weißen Fünften unterstrichen 50. Okay? Und dann werde ich gehen und die Schriftart von diesem auf die Schriftfarbe dieses auf 50% Kapazität übertragen, also ändert es nur die Schriftfarbe. Alles andere bleibt gleich. Wenn ich das erhöhen oder auf 24 sinkt, können Sie sehen, dass es auch auf 24 sinkt. Aber das einzige ist, dass, weil wir eine andere Klasse hinzugefügt haben, alle Eigenschaften außer der Schriftfarbe gleich bleiben. Alles klar, so machen wir es so ziemlich. Großartig. Also im nächsten Video werden wir weitermachen und dies zu einem reaktionsfähigen mobilen Breakpoint machen. Noch eine Pause, und es wird ziemlich lustig. Also sehe ich euch im nächsten Video. 12. Den Herden Abschnitt reaktionsweise machen: Na gut, Jungs. Es ist also jetzt an der Zeit, dies auf die Breakpoints reagieren zu lassen. Mal sehen, wie das geht. Wenn man sich das Design in Fig Mob anschaut, Ich habe Sie tatsächlich wissen gemacht, der Bruchpunkt nur von Mobile, richtig, denn so ziemlich mobile Landschaft auf mobilen Portrait sind ähnlich und Desktop und Tablet Ich habe Sie tatsächlich wissen gemacht, der Bruchpunkt nur von Mobile, richtig, denn so ziemlich mobile Landschaft auf mobilen Portrait sind ähnlich und Desktop und Tablet ganz ähnlich. Deshalb habe ich beschlossen, nur zwei und nicht mehr als zwei zu machen. Also gehen wir, um das zu tun. Also lassen Sie uns tatsächlich in die Tablette Breakpoint springen und wir sehen, dass wir etwas haben das so aussieht und wenn Sie mit ihm herumspielen, sieht es irgendwie so aus. Und ehrlich gesagt, ich denke, das sieht gut aus. Sieht nicht so schlimm aus, aber eine Sache, die wir tun könnten, was ich wahrscheinlich wissen würde, aber eine Sache, die wir tun könnten,was ich wahrscheinlich wissen würde,ist so eine Art Radios, die Telefon-Größe von diesem ein wenig. Alles klar, was wir tun können, ist wahrscheinlich nur die 76. Das ist es, was wir auf so etwas wie 56 reduzieren. In Ordnung? Und das sollte, weißt du, viel besser aussehen. Vielleicht könnten wir auch Funkgeräte im Abstand runter gehen. Also von 40 konnten wir das auf 32 auf der linken Seite und 32 auf der rechten Seite setzen, damit wir das Gleiche hier im Abschnitt auch tun können. Vorderseite der Radios. Diese 32 vielleicht wird es einen Unterschied machen. Vielleicht nicht, aber ich denke, das sieht ziemlich gut aus, um und ich meine, es sieht viel besser aus, weißt du, wenn wir es auf einem großen Display sehen, aber, weißt du, Die kurzen sehen meiner Meinung nach auch ziemlich gutaus. ziemlich gut Alles klar, jetzt gehen wir in die mobile Landschaft. In Ordnung? Also, unbewegliche Landschaft, das ist, was wir haben. Und was ich hier getan habe, ist tatsächlich das gesamte Layout geändert, um anders auszusehen, oder? Also haben wir das Bild und die Spitze, und wir haben ein paar Informationen hier unten. Die Fruchtbarkeit ändert also nicht die Schriftgröße von diesem auf 32 jemand, um die Überschrift auszuwählen . Und ich werde das auf 32. Ok. Und das sollte auch auf Entfernungen ziemlich gut sein. 16. Ich frage mich, ist das von 32 bis 60. Großartig. Nun, das nächste, was ich tun werde, ist, dass ich den Hintergrund BG auswählen werde, das Held BG Element, das wir haben, das ist das OK, und was ich tun werde, ist, dass ich das wirklich verbergen werde. In Ordnung? Ich will das nicht auf dem Landschaftsbruchpunkt sehen. Also, um das zu tun, was ich tun kann, kann auf dieses Symbol klicken, das die Elemente verbirgt, die auf keine eingestellt sind. In Ordnung. Und wenn ich das mache, ist das völlig verschwunden. Aber wenn ich zurück zu Tablette Bruchpunkt, es ist immer noch da, und wir kommen zum Desktop Bruchpunkt. Das ist immer noch da, oder? Damit stellen Sie sicher, dass Sie wissen, dass die Dinge gut funktionieren. Also hier, was ich tun werde, ist, dass ich jetzt den Helden oder Rapper auswähle, und jetzt werden wir die Struktur vom Gitter ändern. Okay, also was wir tun werden, ist, dass ich tatsächlich gehe und auf Bearbeiten klicke. In Ordnung? Und jetzt machen Sie diese zwei Spalten und einen Tropfen. Wir machen es zu einer Spalte und Lob, Ordnung. Und die zweite wird automatisch generiert, also ist das in Ordnung. Und wir klicken auf Fertig. Wir haben auch die Abstände auf der linken Seite, die wir nicht wirklich brauchen. Also werde ich den Zeh auf Null setzen, okay? Und das sieht so ziemlich aus, wie wir es wollen. Ok? Und das nächste ist dieses Element. Jetzt habe ich eine Höhe von 288 gegeben. Nun, was wir tun können, ist, dass wir es geben können, ich bin Höhe von 50 Picks, 50 Veatch oder für TV Hitch. Wir können das wirklich definieren. Also werde ich hier zum Heizungsbild gehen. Wir hatten 80 gegeben. Ich bin wahrscheinlich, dass das schon gehen wird. Ist das etwa 50? Ähm, oder vielleicht sogar 45. Ich weiß es nicht. Was auch immer funktioniert, in Ordnung. Sieht gut aus. Das nächste, was wir tun werden, ist für den Heldenbereich. Wir sagten neun TV Hitch. Ich werde tatsächlich das entfernen und sagte, dass zu Auto, weil ich nicht will, dass es 90 v Hedge nehmen . Ich werde die Zehe Auto setzen, und das sieht viel besser aus. Okay, dann. Die nächste Sache hier ist, dass wir ein wenig Abstand auf der linken und der rechten Seite haben, Ordnung? Und der Abstand ist 20 Picks ist, so werde ich gehen und wählen Sie den Todesblock, die die Hitze oder Textblock ist. Und hier hatten wir eine Marge off negativ gegeben. 64. Ich werde das sagen, ein Zito zu sein, okay? Wir wollten normal sein. Und als nächstes werde ich eine innere Polsterung von 20 Pixeln geben, also schiebt es die Dinge, weißt du , so . Alles klar, da gehen wir. Was kommt als Nächstes? So haben wir einen Abstand von 48 Pixeln oben und 48 Pixel unten. Also, was ich tun werde, ist, wenn du dir das Gitter ansiehst. In Ordnung, wir haben diesen Boden werfen 16 Fixes ab. Ich werde das auf Null setzen, weil ich will, dass sie sich berühren. Ich will keine Lücke. Und um diese 48 Pixel Lücke zu geben, werde ich gehen wählen. Das hat blockiert, und oben hämmert, werde ich sagen, 48 die untere Polsterung, ich werde sagen 48 in Ordnung? Und die nächste Sache ist, wir haben auch dieses Hintergrundbild, Hintergrundfarbe, also gehe ich in den Hintergrundbereich und nur Adam, die eine Farbe, die wir Rituale Ebene eins hatten, Ordnung. Und das ist so ziemlich, wie es aussehen wird, Lassen Sie uns zurück zu Tablet gehen, um zu sehen Alles ist in Ordnung und es sieht perfekt aus. Es ist nichts falsch mit der gleichen Sache hier drüben, aber für Landschaft sieht es viel anders aus, Ordnung. Und wenn ich will, kann ich voran gehen und dies zeigen, um zu sehen, wie es auf anderen Breakpoints aussieht, was gut aussieht. In Ordnung. Und jetzt gehen wir zum Handy. Und es sieht auch auf dem Handy ziemlich gut aus. Es passt sich perfekt an und sieht fantastisch aus. Also sind wir auf einem Bildschirm mit 3 60 Auflösung herabgestiegen. Das ist also so ziemlich, wie es aussehen wird. Und ich finde, es sieht ziemlich toll aus. Okay, lassen Sie uns überprüfen, ob alles in Ordnung ist. Wir klicken auf die Drop-down-Liste, wir bekommen diese Drop-down-Liste, nur Schule , und , ja, sie sehen ziemlich gut aus. In Ordnung, also geht es sehr darum, wie Sie den Heldenbereich reaktionsschnell machen. Wenn ihr euch verwirrt habt, empfehle ich euch das Video wieder anzuschauen und ich sehe euch im nächsten Video 13. Den Erfahrungsbereich erstellen: Na gut, Leute. In diesem Video werden wir den nächsten Abschnitt erstellen. Dies sollte sehr einfach und sehr unkompliziert sein. Es ist überhaupt nicht kompliziert. Und ich gehe voran und nur Schöpfer, wie ein Drahtrahmen, um irgendwie zu erklären, wie das funktioniert. Also offensichtlich beginnen wir mit dem Abschnitt reich, nimmt den gesamten Platz ein, und dann haben wir einen Container im Inneren, der die gleichen Eigenschaften wie diese folgen wird Wo wir entweder 40 oder 72 Picks haben, klopft auf beiden Seiten und sie sind will Rand 1920 Pixel, die gleiche Sache, die für den Naff aber und die Heizung Abschnitt als auch neu gemacht. Und dann haben wir zwei Sätze von Elementen. Einer ist der obere Abschnitt, und dann haben wir einen ist der untere Abschnitt. Also werde ich einen De-Block für die Spitze erstellen, um Elemente zu texten. Lassen Sie mich das jetzt einfach duplizieren, also wird es unser Textelement Nummer eins geben und wird unser Textelement Nummer zwei sein und ziemlich groß machen. So wird es so aussehen, und dann haben wir eins für den Boden und das wird sein , dass es drei halten wird, die sie blockieren. Also der Block einen Block drei zu blockieren. Das ist also im Grunde die Struktur, wie das funktionieren wird. Also lasst uns weitermachen und das tun. Also hier sind wir in Buffalo und Leicester, indem wir einen neuen Abschnitt erstellen. Also jedes Mal, wenn Sie einen neuen Abschnitt erstellen möchten, wählen Sie das Körperelement und drücken Sie dann Kontrolle e und in einem Abschnitt So jetzt, dass der Abschnitt ist ein Kind des Körpers, so dass Sie tatsächlich sehen können, jetzt haben wir die nab unsere wir haben den Helden Abschnitt und dann haben wir diesen Abschnitt. Also für diesen Abschnitt, Ramadan, gehen Sie weiter und rufen Sie diesen Arbeitsabschnitt Auto an. Sagen wir, zweckmäßiger Abschnitt, okay, das macht mehr Sinn. Zweckmäßiger Abschnitt äh, auf Gottes Ruf, dieser Abschnitt vor allem, die 14 tun wird in diesem Abstand auf der linken und rechten Seite hinzufügen , der etwa 72 Pixel auf der linken Seite und 72 Pixel auf der rechten Seite ist. Ich werde zum Abschnitt gehen und sagen, 72 Fixes auffüllen und 72 Bilder auffüllen. Alles klar, da gehen wir. Das nächste, was ich tun werde, ist, einen Rapper irgendwo in der neuen Entwicklung hinzuzufügen, und wir werden diesen Rapper nennen, okay. Und nur um sicherzustellen, dass ein Rapper Einstellungen haben wir 100% mit und ein Maximum mit off 1920 Pixel, Ich werde voran gehen und sagte dies zu 14. 40 Alles klar? Und jetzt wollen wir diesen Rand auch oben auf der Unterseite hinzufügen. Also 1 20 Pixel oben und etwa 1 20 Pixel auf der Unterseite, so dass ich gehen und wählen Sie den Abschnitt, Alles klar? Und in der Sektion werde ich sagen, Polsterung 1 20% oben und unten 1 20%. In Ordnung, also sieht es irgendwie so aus, richtig? Das sieht gut aus. Und jetzt haben wir das Innere. Wir haben den Rapper. Okay, wie Sie sehen können , der Apfel sitzt in der Mitte, wissen Sie, die 20 oben und 21 unten. In Ordnung. Und lassen Sie uns alles, indem wir unseren ersten tauben Block erstellen, richtig, und dieser Block wird unsere an Textelemente festhalten, also werde ich damit beginnen, einen Deadlock zu erstellen, richtig? Und ich werde es im Moment einfach nicht nennen, weil ich anfangen möchte, eine neue Art von Benennungsstruktur zu geben . Zwei Elemente. Also schauen wir uns an, wie das geht. Die 40 Minute war drinnen. Heute Block. Ich werde einen Textblock erstellen. Dies ist ein neues Element, das wir hinzufügen. Alles klar, jetzt, Textblock ist etwas, das ich verwende, wenn es kein Absatz ist, aber es ist nur eine einzige Textzeile. Und hier ist es Arbeitserfahrung. Ich werde das kopieren. Und ich werde hierher kommen und es stützen. Nun, gehen wir weiter und schließen das. Das ist also, das ist 16 Pixel überlagert, so dass wir die Eigenschaften sehen können. 16 Bilder, 1 50% Junge. In Ordnung, also werde ich weitermachen und diese Überstrich-Unterstriche 16 Fixes nennen. In Ordnung. Und lassen Sie uns in die Eigenschaften gehen, so dass die Größe 16 sein wird. Die Höhe wird 150% betragen. Der Fondssatz wird fett sein, und die Farbe ist hier drüben. Ist es? Die Farbe hier sagt Licht Griff auf dem hellgrün? Ist das neue Farbgerichte? Ich werde das kopieren. In Ordnung. Und, ähm, ich werde hier rüber kommen, um die Farbe zu bekommen, und das werde ich einpacken. In Ordnung. Und wir können dies auch als Farbmuster hinzufügen. Also haben wir dieses Licht Great. Sie wissen, wissen Sie, klicken Sie einfach auf Erstellen und war ziemlich gut. Okay, jetzt fühle ich mich zu sehen oder zu hören, dass diese 16 Pixel diese ganze große Rechte nehmen , aber das ist nicht das, was wir wollen. Was wir tun können, ist, wenn wir hier zu den Anzeigeeigenschaften gehen, wir haben etwas im Linienblock genannt, und wir haben etwas Farben in der Linie. Ich werde auf in Zeile klicken, blockiert, und alles, was wird, ist, das wird irgendwie einschränken, um nur den Platz aus dem Element einzunehmen Bereits der Raum, die Länge des Textes in diesem Fall. Okay. Und jetzt, Einführung, Wissen Sie, fügen Sie in diesem nächsten Abschnitt. Nun, dies wird eine Überschrift sein, weil dies die zweitwichtigste Information in Bezug auf die Hierarchie ist. Das war jeder. Das wäre auch hte. Also werde ich die Kontrolle drücken, essen und eine Überschrift bekommen, okay? Und ich werde hier rüber klicken, was es schaffen und absichern wird. Und das nochmal, ich werde voran und in einer Klasse gehen und diese Überschrift nennen. Ähm, Unterstrich. Es wird 55 Picks geben, also lasst uns diese Überschrift nennen. Unterstrich 55 Fixes. Okay, jetzt haben wir diese obere und untere Polsterung. Ich möchte nur die untere Polsterung, die 40. Ich will nicht die obere Polsterung. Okay, jetzt, da das bedeutet, dass das zusammenbleiben wird. Also, ich werde den unteren Padding Rand hinzufügen, der acht Pixel ist. Also kommen wir her und sagen Margin it. Okay, jetzt gibt das diesen Abstand. Und lassen Sie uns gehen und kopieren Sie diese Informationen, diesen Text und die Basis, dass wir hier sind, und lassen Sie uns gehen und sehen Sie die Einstellungen. Also haben wir 50. Wir haben 55 Pixel und Platine. Das stimmt sehr. Gehen wir also voran und setzen Sie die Schriftgröße auf 55. Die Höhe wird 100% sein und wir könnten voran gehen und die ausländische Zehenfarbe auf weiß setzen . Richtig? Das ist voll. Denk großartig. Nun, was wir tun wollen, ist, dass man hier sehen kann, dass dies irgendwie auf eine bestimmte Grenze beschränkt ist . Und ich werde diese Informationen schnappen und eine Kopie machen. Ich werde das mit allem klar enger nennen, und ich werde sagen, dass es 60% wert ist. Okay, was ich meine, ist das dieser Text. Okay, also jetzt werde ich voran gehen und sagte, das sei im Line-Block, was bedeutet, dass es den gesamten Raum und das Lesen von fixiert einnimmt. Das ist, wir werden Flex benutzen. Alles klar, was ist Flex? Also, wenn ich den Deadlock wähle, Ordnung. Und ich frage mich, dass ich auf diese zweite Anzeigeoption klicke, die flex sagt . Und wenn ich darauf klicke, passiert etwas. Ordnung, wir haben diesen neuen Satz von Eigenschaften und flex ermöglicht es Ihnen, Elemente in beliebiger Weise zu organisieren , die Sie sehr flexibel wollen. Also schauen wir uns eigentlich 33 Immobilien an, die wir mit Ihrer Richtung haben. Wir haben Ausrichtung und wir haben gerechtfertigt, sonst werde ich sagen, dass ich das Element will, Toby untereinander. Und eine Sache, die Sie hier bemerken müssen, ist, dass die Immobilie aus. Zuweisen von zwei Flaschen muss dem übergeordneten Element sein. In Ordnung. Und wie Sie sehen können, ist De Block hier das übergeordnete Element, und wir müssen Textelemente innen. Wenn Sie das Elternteil biegen, können Sie dann die Anordnung von den Kindern neu anordnen, Ordnung? Und das werde ich tun. Ich möchte, dass die Richtung der Ausrichtung , vertikal ist, weil ich möchte, dass Elemente untereinander liegen. Also werde ich die Vertikale übernehmen, okay? Und ich habe ein paar Einstellungen. Wir haben eine Zeile links. Ah, Linienmitte ausgerichtet, richtig. Wenn ich auf eine Linie Mitte klicke, so wird es aussehen für klicken Sie auf eine Linie Laufwerk. So wird es aussehen, wenn ich Raum dazwischen wähle, wie es aussehen wird. Alles klar, was ich tun werde, ist, dass ich zu dem gehe, der eine Linie links oder rechts sagt, weil wir wollen, dass Elemente nach links ausgerichtet werden. Und auch, wir können sagen,, nach oben gerechtfertigt, wie Sie wählen können, rechtfertigen in der Mitte, rechtfertigen den Boden. In diesem Fall ist es wirklich egal, weil es keinen Platz genug für mehr gibt. Also lassen wir es einfach, um oben zu rechtfertigen und zu hören. Was ich tun werde, ist, dass ich diesen Türblock geben werde, wenn eine neue Klasse und ich diesen Flex vertikal nennen werde , okay? Und ich werde Unterstrich links sehen und Top unterstreichen. Also, das ist die Klasse, die ich jetzt geben werde, wird passieren. Ist jedes Mal, wenn ich Elemente auf diese bestimmte Weise flexen möchte, kann ich einfach diese Klasse anwenden, die wir haben und das macht es einfach für die Organisation. Wenn du eine Website aufbaust, haben wir tatsächlich diesen Wert von 40, den ich Mexiko gebe, um das vorerst zu entfernen. Richtig, weil diese Überschrift möglicherweise nicht immer 40 Pixel Abstand zwischen anderen Elementen hat , auf denen diese Null für jetzt gesagt wird. In Ordnung. Und jetzt ist das Problem hier, dass Sie sehen können, dass hier die mit tatsächlich 60% Rabatt auf die gesamte Arbeit, die wir haben. Also, was wir tun wird, um diese Rubrik 55 Fixes und in der Arbeit, werde ich sagen 60%. Okay, jetzt wird es nicht passieren. Es wird voran gehen und beschränkt auf 60% Rabatt auf den View-Port mit Alles klar, Also, wenn ich das auf 12 40 sagte, wird es 60% davon sein. Und wenn er das zu einer kleineren Zahl sagte, sagen wir, 1100 wird es 60% davon sein. Sie sagten das zu 1920. werden es jetzt 60% sein. Offensichtlich sieht das ein wenig seltsam aus, weil es 1920 60% einnimmt, aber es sieht nicht gut . Also, was wir tun können, ist, wissen Sie, anstatt dies zu 61. Person zu haben, lasst uns tatsächlich darauf klicken und zurücksetzen. Was wir tun können, ist tatsächlich schwächen. Brechen Sie die Linie hier drüben und wir können das loswerden. Also lasst uns weitermachen. Und, äh, aber ich sage, weil ich schauen kann, kann ich die Linie entfernen und in eine separate Zeile setzen. Okay, das sieht jetzt viel besser aus, ich denke für die Überschrift, ich denke für die Überschrift, ich möchte ein wenig von Heizo Nets 110% hinzufügen. Manchmal funktioniert die Zeilenhöhe in der Webentwicklung frei als in Fig Marceau auf Abb. Mein Wenn es gut aussieht. Vielleicht wollen wir es hier etwas erhöhen. Großartig. Jetzt können Sie sehen, dass wir jetzt in diesem Erlebnisabschnitt ein Problem haben, obwohl wir einen Top-Abschied von 1 20 hinzugefügt haben. Alles klar, es beginnt tatsächlich am Ende dieser Zeile, weil hier drüben es tatsächlich beginnt. Dieser Abschnitt beginnt am Ende, aber hier ist es nicht. Und der Grund ist, weil dieser Körper BG, den wir Schöpfer ist eigentlich hinter allem anderen. Es wirkt sich nicht auf den Abstand zwischen dem zweckdienlichen Abschnitt auf der Hitze aus. Oh, Abschnitt der Heizungsabschnitt und die Erlebnisabschnitte sind, wissen Sie, nah beieinander. Sie berühren einander und dieser Körperhintergrund, den wir erschaffen, hat keine Wirkung. Also der einzige Weg, das zu beheben, ist, dass wir tatsächlich darauf klicken und halten oder die Entfernung zu sehen . Und das ist um 245 Picks ist, weil dieser Abschnitt ist irgendwie endet hier drüben. In Ordnung, also können wir das wirklich auswählen und statt 20 könnten wir vielleicht 240 sagen. Ich denke, das ist wahrscheinlich eine gute Zahl oder 200 wir wissen vielleicht nicht die genaue Größe wegen der Tatsache, dass dieser Abschnitt basiert auf 90% View-Port, richtig? Und Sie wissen, das unterscheidet sich von jedem Bruchpunkt tun das Design, weil wir es bei 14 entworfen haben. 40. Also, was ich tun kann, ist, lassen Sie uns, die Erfahrung Abschnitt und geben Sie ihm eine Reihe aus, Sagen wir, 265 und ich denke, das sieht ziemlich gut aus. Setzen wir das auf 14 zurück. 40 und ja, das sieht ziemlich gut aus. In Ordnung. Okay, der nächste Schritt ist, weiter zu gehen und Thies Zweit-Tag-Block zu erstellen, und darin werden wir drei Elemente haben. Also, was wir tun, ist, dass ich voran gehe und sicherstelle, dass wir den Rapper ausgewählt haben. Ich drücke kontrolliertes Essen, und ich sage den Block. Und dieses Mal werde ich tatsächlich ein Gitterelement bekommen. Also werde ich einfach direkt ein tolles okay bekommen und definieren, also wollen wir drei Spalten und Wunder. Oh, also entferne Andro und lass unsere drei Säulen. Wir haben drei Spalten. Fantastisch. Und wir können auch sehen, dass hier in dieser Woche hinzugefügt eine Rastersuche klicken Sie auf den Rahmen und, Sie wissen, Toggle sehen toll aus auf Sie sehen können, dass wir haben. Ah, großer Abstand von 24 Pixeln. Richtig. Wir wollen also sicherstellen, dass wir das hinzufügen. Also werde ich voran gehen und in die Säulenlücke. Ich werde sagen, 24 Picks ist und das sollte gut sein. Nun, dieser Typ berührt den oberen Abschnitt, also werde ich einen oberen Rand von 40 hinzufügen. Und hier in diesem großen. Nun, vielleicht verwenden wir die Angst nicht in meinen tieferen Zeiten wieder, also können wir ihm einfach eine Klasse geben, und wir können diese Erfahrung großartig nennen. Okay. Und gut. Also jetzt alles, was wir tun müssen, ist, dass wir Adam es für jede Box entwickelt haben und dann beginnen, die Elemente im Inneren hinzuzufügen . Also werde ich einen Block erstellen, okay. Und hier in diesem Block werde ich das nennen. Wir können ihm später einen anderen Namen geben. In Ordnung? Ich werde anfangen, indem ich dieses hinzufüge. Nun, das ist wieder nicht wichtig für die Hierarchie, aber das ist nur traurige Label, also werde ich einen Textblock hinzufügen, in Ordnung? Und ich werde diese Nummer in Ordnung nennen. Und lassen Sie uns die Eigenschaften sehen. Seine 117 und 1 20% Strichhöhe. Also werde ich einfach darauf doppelklicken. Ändern Sie diese 201 In Ordnung. Und hier in den Eigenschaften wird die Größe 117 sein Die Zeilenhöhe wird 1 20% betragen. In Ordnung, wissen Sie, wir könnten das zu 100% sagen. In diesem Fall sollte es in Ordnung sein. Und wir könnten das wahrscheinlich zu mutig sagen. In Ordnung, glaube ich, dass es regelmäßig ist. Also lassen Sie uns regelmäßig bleiben. Also werde ich weitermachen und das zu einem normalen machen, und die Farbe wird unser Lichtgrad sein. Richtig? Großartig. Die nächste Sache ist, wir haben das. Nun, das wird unsere drei sein, richtig? Weil wir jeweils ein h zwei haben und es wird in der Eighth Street sein. Ordnung, InOrdnung, also werde ich ein neues Überschriftenelement hinzufügen, okay? Und hier im Überschriftenelement werde ich sagen, dass ich das wirklich kopieren werde. In Ordnung? Und kleben. Und stellen wir sicher, dass das ein jeder drei ist, okay? Und ich werde Überschrift Unterstrich sehen, und das sind 24 Plektren von Rechten oder 24 mutig. Okay, also wird das Überschrift unterstrichen 24 Fixes, und das sollte gut sein. Also lassen Sie uns voran und ändern Sie die Größe auf 24, die bereits Linie verstecken ist. Schwächen sagte, dass tun. Vielleicht sollten 1 20% wirklich keine Rolle spielen, denn es ist nur eine Zeile und die Farbe wird weiß sein. Und doch sieht das ziemlich gut aus. Nun, wenn Sie fortfahren und wählen Sie die Zahl und Radios, die im Linienblock sein, es sieht gut aus. In Ordnung, könnten wir es in diesem Fall blockieren lassen? Wirklich spielt keine Rolle. Okay. Und jetzt, damit das blockiert wird, lasst uns voran gehen und ihm eine Klasse geben, und wir können diesen Erfahrungsblock nennen, okay? Und jetzt gehen wir weiter, und wir haben eine Menge Abstand hier oben unten. Das ist zunächst einmal, wir haben keinen Abstand. Und unten haben wir etwa 16 Pixel. Also hier drüben, was ich tun werde, ist, dass ich das von 22 b Null funken werde. In Ordnung? Und vielleicht könnten wir ein bisschen bekommen, obwohl es etwas anders aussieht. Und das Design, das wir wahrscheinlich in acht Pixeln oben hinzufügen könnten. Auf der Unterseite können Sie 16 Bilder sehen. Okay, ich denke, ich werde das tun, ist, dass ich diese Marge auf dem oberen Jahrhundert entfernen werde, sagte, dass und für die Nummer werde ich ihm einen unteren Rand geben. Ich denke, das sollte buchen. Und dafür wird es dem CEO zurückgeben. Okay, das sieht viel besser aus. Und jetzt werden wir einen Absatz hinzufügen, und das ist 16. Behebt einige glühende in neuen Absatz. Okay? Und kopiere das und füge ein. jetzt Haben wirjetztschon einen Absatz 16? Fixes? Nein, das haben wir nicht. Wir haben einen 18 Pixel Absatz. Also, was wir tun, ist, Ihren neuen Trick zu versichern. Ich werde diesen 18 Pixel-Absatz tatsächlich anwenden, okay? Und dann werde ich tatsächlich hierher kommen, um diese Drop-down-Liste zu machen. Ich werde eine doppelte Klasse wählen. Also, jetzt macht es eine Kopie von dieser Klasse, und es hat genau die gleichen Eigenschaften, aber einen anderen Namen, Ordnung. Und dann werde ich eigentlich voran gehen und umbenennen dies in 16 Picks ist und alle Eigenschaften sind bereits da. Also erspart es mir nur ein paar Klicks, und ich kann gehen und den unteren Rand auf Null setzen. Und auch kann ich die Schriftgröße auf 18 zu 16 ändern. Alles klar, das sieht ziemlich gut aus. Jetzt haben wir auch das Wort Google, das in Grün ist. Also, wie machen wir das? Wie ich schon erwähnt habe, dass wir die Farbe hier ändern, indem wir eine Rap-Spanne verwenden. Wir können das gleiche tun hier drüben, jemand oder Doppelklick auf Google. Wählen Sie die zu übergreifende Änderung aus. Und wir können das auswählen. Wenden Sie eine Klasse coalesce grün, und wir können eine einfache grüne Farbe anwenden, die wir haben. Also werde ich diese Farbschnur kopieren, Ordnung. Und ich werde hierher kommen und einfach die Farbe ändern, um grün zu sein. Und, weißt du, wir können das als Muster hinzufügen, wenn wir es nicht wären. Und es sieht ziemlich gut aus. Großartig. Nun, was wir tun können, ist, dass wir diesen Erlebnisblock auswählen können und ich werde Steuerung C Kontrolle V drücken und steuern, dass wir es zweimal einfügen. Und das werden wir haben. Und was ich das auswählen wollte und sagte dies zu und wählen Sie dies und ändern Sie dies zu drei. Und wir können schnell gehen. Gehen Sie weiter. Kopieren Sie diese Elemente. Alles klar, Bestie und ah, Kopiere Bestie und kopiere Bestie und kopiere und stückte. Warten Sie. Aber das Problem hier ist, dass Sie wissen, wir haben eine andere Klasse Tickets angewendet. Wenn Sie also die Navigation betrachten, sehen wir irgendwie, dass die Dinge ein wenig durcheinander sind. Also, was ich tun werde, ist, dass ich das hier löschen und das löschen werde. Und wir können diese Rubrik 24 auswählen, die wir kreieren und das Tempo hier wecken. Wir haben also keine Verwirrung, und dann können wir einfach voran gehen und dies in einen prod Luftkanaldesigner ändern. Und jetzt können wir hier anrufen und wir können Grafikdesigner sagen, okay. Und das können wir unsere zu dribbeln ändern. Und hier können wir das in B. Facebook ändern . Okay, jetzt, das nächste oder zwei Jahr ist hier. Wir sagten grün, oder? Anstatt grün zu sehen, können wir dieses neue Farbgericht anwenden. Also werde ich diese Farbschnur kopieren. In Ordnung? Und ich werde diesen grünen Tag entfernen. Ich werde das blau nennen, und ich werde hierher kommen, um die Farbe zu bekommen. Und an diesem blauen Kragen machen Tiere dasselbe hier drüben zum Dribbeln. Ich werde diese Klasse löschen, und ich möchte sagen, dass ich denke, okay, okay, und eine Kopie dieses rosa Farbkerns, den wir haben. Und ich komme hier zur Farbe und ändere das Pink und vielleicht auch auf einem Musterfeld. Aber ich glaube nicht, dass wir diese Farben gegen verwenden, damit wir sie so lassen können, wie sie ist. So sieht es jetzt so aus. Okay, das nächste, was ich tun möchte, ist, wenn du siehst oder hörst, obwohl die Entfernungen 24 ich ein wenig vom Abstand hier drüben hinzugefügt habe, was aus 48 Fixes ist, Ordnung? Und das habe ich absichtlich gemacht. Denn wenn ich es nach rechts schiebe, , sieht es etwas seltsam aus,weil es sehr weniger Entfernung gibt. Also habe ich absichtlich hinzugefügt, dass 48 Pixel. Also werde ich diese Erfahrung auswählen, blockieren, dass wir Schöpfer, und ich werde gehen, um die Beißen und sagte, ich fast 40 es. Also was? Das wird verlieren, das wird weiter gehen und unser 48 Pixel hämmern. Und das gilt für alle anderen t als auch für die anderen beiden, weil sie die gleiche Klasse haben, die Experience Block sagt. Also 48 0 hier auch und das sieht ziemlich gut aus. Das ist genau das, was wir im Sinn hatten. Ah, schwächen, wollen denken, wir können auf 1920 Pixel gehen und sehen, wie das aussieht und das sieht ziemlich gut aus. Jetzt im nächsten Video machen wir das reaktionsschnell, also seh ich euch im nächsten Video. 14. Den Erfahrungsbereich reaktionsverhalten: Alles klar. Es sollte also ein ziemlich einfaches Video und einen sehr schnellen Funkweg geben. Wir werden das nur reaktionsschnell machen, also lasst uns sehen, wie das geht. Lassen Sie uns gerne zum Tablet-Pakpunkt gehen und sehen, was passiert? Mini-Tablette, Brick Boynes. Dinge sehen in Ordnung aus. Sie scheinen in Ordnung zu sein. Aber das Problem ist, dass wir das sehen können. Weißt du, der Abstand ist oft es aussah. Sieht nicht perfekt aus. Also reparieren wir das jetzt. Was wir hier gemacht haben, war, dass wir diese Linie hier drüben gebrochen haben, richtig? Also haben wir das Wort weit in der Vergangenheit in einer zweiten Zeile verschoben. Und das ist der Grund, dass, wenn das schrumpft, wissen Sie, denn in der Vergangenheit ist bereits in einer zweiten Zeile, haben wir diesen unnötigen Raum. Wie gehen wir also daran, das zu reparieren, damit es gut aussieht? Nun, das erste, was Sie versucht haben, war, tatsächlich einen festen Wert von 60 v Luke hinzuzufügen oder etwas anderes würde lieber, was wir tun können, ist, dass wir tatsächlich voran gehen und, wissen Sie, stellen Sie sicher, dass dies in einer Zeile ist, und um das ein bisschen besser zu machen, können wir tatsächlich gehen. Und in der Figment-Datei. Sie können tatsächlich einen bestimmten Wert definieren. Also habe ich Wert von 778 Fixes definiert. Ich kann das abrunden 7 80 Alles klar? Und wir können tatsächlich einen Wert von 7 80 Pixel wie ein Maximum wert aus definieren. 7 80 Picks ist Also jetzt, was passieren wird, ist, dass, wenn ich Tablette Breakpoint gehen, es wird 7 80 Picks ist Das Problem ist, dass Sie sehen können, dass ich in der Lage, Art von Scroll nach links, weil aus diesem so was wir könnten, was wir tun sollten, ist es nicht auf 70 Fixes gesetzt . Wir werden einen Wert von 100% und einen Höchstwert aussetzen. 7 80 Plektren ist in Ordnung. Also, jetzt wird das Maximum 7 80 Pixel sein, Ordnung, aber es wird auf 100% des Platzes beschränkt sein. Und hier drüben sieht man, dass man der Raum ein bisschen zu viel ist. Also, von 70 nach Mexiko, bringen Sie das auf etwa 40 auf der linken Seite und 40 auf der rechten Seite. Und auch, der Platz oben ist auch ziemlich viel irgendwo. Funkgeräte, die auf ein bisschen kleiner sind. Sagen Sie so etwas wie 150. Das sieht ziemlich gut aus. Und das nächste, was hier ist, dass wir diese innere Polsterung von 40 Es, Ich würde sagen, einfach machen Sie es Null, weil es in Ordnung sein sollte. Und das sieht auch ziemlich gut aus. Sieht nicht so schlimm aus. Und jetzt ist dies die kleinste fällt mit der Skala davon zusammen, Sie sehen noch besser aus. Also ja, ich denke, was wir tun können, ist stattdessen komplett ausgestrahlt. Vielleicht könnten wir es geben, einen kleinen Wert von 16 Picks ist auf DA. Ja, ich denke, das sollte wirklich gut sein, oder? Sieht ziemlich gut aus. Gehen wir nun zur mobilen Landschaft in der mobilen Landschaft. Ich werde eine ganz andere Herangehensweise verfolgen. Zunächst einmal wird dieser Abstand, den wir oben unten haben, anders sein, und das sind eigentlich 64 Pixel. Also, das ist die Marge oder Abfahrt, die wir alle über eine verwenden werden, sagte die Spitze zu 64 die Unterseite auch zu 64. Und wie Sie an den Seiten sehen können, haben wir es auf 20 gesetzt. Also werde ich das auf 20 und den windigen. Und das nächste ist, dass diese Fremdgröße auch auf 32 Pixel reduziert werden soll. Also werde ich das auswählen. Das wird von 55 Radios werden. Das auf 32 Picks ist in Ordnung. Das sieht ziemlich gut aus. Und jetzt für dieses Gitter will ich nicht, dass das eine neben dem anderen ist. Ich will, dass sie untereinander sind, also werde ich eigentlich gehen, um die Spalten zu entfernen, okay? Und das schafft automatisch automatische Gitter für uns. Ordnung, InOrdnung, also sieht es irgendwie so aus, und dann werden wir das tun, ist, dass wir hierher kommen und diese Abstände werden wir das auf 40 erhöhen. Wir können sehen, dass der Abstand oder hören diese 40. So wird der Ro Ro Gap 40 Pixel sein, und das sieht viel besser aus. Gehen wir zur mobilen Portraitansicht, und lassen Sie uns dies auf 3 60 Alles klar? Und ich denke, das sieht ziemlich gut aus. Irgendwie gefällt es. Ja, es ist interessant. Schauen wir es uns an. Und doch sieht das aus, das sieht ziemlich gut aus. Und ich denke, eine andere Sache, die wir tun können, ist, dass wir diese Art von Polsterung links 16 Mixe hinzugefügt haben . Ich irgendwie schon ist, dass 20, weil ich den gesamten Raum übernehmen wollte. Alles klar, ich denke, das sieht ziemlich gut aus, und wir sind auch hier. Was wir tun können, ist, ähm ja, wir könnten damit das Foto von Null getragen wird, und ich denke, das sieht wirklich gut aus. In Ordnung. Ähm, ja, ich denke, das sieht wirklich interessant aus. Also, das ist so ziemlich es für dieses Video basiert. Und ich sehe euch in der nächsten. 15. Den mittleren Abschnitt erstellen: direkt in diesem Video. Wir werden weitermachen und diesen Abschnitt erstellen, und das wird sehr einfach und unkompliziert und ah, ein paar spat weggelassen, die definiert haben. Und diese sind entworfene Entscheidung, die ich getroffen habe. Aber ich sage, ich möchte, dass die Höhe davon 600 Pixel beträgt. Ich möchte, dass die mit jedem Element 50% aufnehmen, wissen Sie, sehr einfach. Also lasst uns gehen, um zu lesen, fließen und dies zu tun. Es wird beginnen, indem Sie auf den Körper klicken und einen neuen Abschnitt erstellen und diesen Abschnitt aufrufen und wir haben einen Abschnitt hier drüben, und was wir tun, wird diesen mittleren Abschnitt nennen. Und wie ich bereits erwähnt habe, möchte ich, dass die Höhe davon 600 Pixel beträgt, also werde ich ihm eine Höhe von 600 Fixes geben. In Ordnung, also haben wir eine große Höhe. Nächste Sache, Ich möchte nur die Rapper auf einer Presse gesteuert essen und Hinzufügen eines Hoops und offensichtlich die nächste Episode bei einem schnellen jemand drücken Kontrolle e und 1/2 Block und hinzugefügt, Die Rapper-Klasse, die wir erstellt haben, so maximal 1920 Höhe ist 100% Und mit denen 100 Person. Fantastisch. In Ordnung. Jetzt wollen wir auch eine große hier hinzufügen. Ok? Nun, die Sache ist, wenn Sie jetzt gehen, wenn Sie sich erinnern, haben wir einen Komma-Klassenaufruf hinzugefügt ist großartig. Und was wir tun können, ist dasselbe anzuwenden, Ordnung. Und auch die Anzahl der Spalten und die Regeln und alles, was wir wollen, ist ziemlich gleich. Das ist also perfekt, oder? Also werden wir jetzt tun, ist, dass ich eine Sackgasse hinzufügen werde. In Ordnung? Eins für diesen. Und der andere wird für diesen einen sein, der für die Bilder da sein wird. Also für die 1. 1 der erste Block, werde ich ihm ein wenig später eine Klasse geben, weil ich möchte, dass Zehe eine Flex-Eigenschaft darauf anwenden . Aber zuerst werden wir tun, ist, dass ich eine Hintergrundfarbe hinzufügen werde. Also werde ich voran gehen und eine Farbe hinzufügen, die diese Farbe ist, dass wir die Sprachfarbe mit einer Kopie haben. Ist das in Ordnung, auf meinem Gesicht, dass über dich? Fantastisch. Als nächstes werden wir drei Elemente hinzufügen. 12 und drei die 1. 1 wird unser H zwei sein, was in Bezug auf die Hierarchie gleich ist. Hat das während einer Presse kontrolliert essen, werden wir in der Überschrift hinzufügen. Wir werden das auf zwei Jahre ändern, okay? Und dann werden wir in der Überschrift hinzufügen, dass wir jeden Schöpfer klassiieren , der 55 Bilder überschreibt. Okay, jetzt, das Problem ist, dass, weil das hier benutzt wurde, ich meine, hier drüben, wo es auf einem schwarzen Hintergrund war und die Texturen richtig sind, dasselbe passiert. hier, weil sie die gleiche Klasse haben. Also, was wir tun können, ist, dass wir eine Combo-Klasse hinzufügen können, und wir können das einfach schwarz nennen, okay? Und nur das einzige, was zu tun ist, ist, dass wir die Farbe ändern können, und wir wählen die Ebene eins Farbe, die wir erstellen. Und jetzt haben beide die gleichen Eigenschaften. Aber das hat eine zusätzliche Komma-Klasse von Schwarz, weshalb es in Schwarz ist. Also gehen Sie einfach voran und kopieren Sie diese Philosophie und Werte Gehen Sie voran und basiert darauf. In Ordnung. Die nächste Sache ist, wir haben diesen Text, diesen Absatz, also werde ich voran gehen und tatsächlich den gleichen kopieren, weil es ziemlich dasselbe ist. Wird das kopieren. Und fügen Sie hier mit einem Problem hier ist, dass dies eine andere Farbe ist. Es ist eine dunkelgraue Farbe. Und wieder, was wir tun wollen, ist, es zu verkaufen und eine neue Kampfklasse hinzuzufügen. Nennen Sie es dunkel, großartig, oder es und wir kopieren das Skelett, das wir haben. Kopieren. Und wir kommen hier runter zu der Farbe und einer Paste. Alles klar, jetzt können wir auch diese Uhr hinzufügen. Ich glaube, ich habe das bereits hinzugefügt, also können wir das hinzufügen. Also haben wir das hier drüben, und das bleibt immer noch weiß. Fantastisch. Ich werde diesen Text auf Basis kopieren. Diese Einsicht. Nun, die Sache ist, wir haben diesen Abstand , der aus 24 Picks ist jetzt. Entweder können wir dazu einen unteren Rand hinzufügen, oder wir können eine obere Polsterung oder einen oberen Rand hinzufügen. Was ich tun möchte, ist, dass ich es der Überschrift selbst hinzufügen möchte. Also werde ich gehen und eine neue Kampfklasse hinzufügen. Wir können 1/3 Komma-Klasse hinzufügen und wir können diese 24 Fixer Dump nennen. Okay, tut mir leid. 24-Pixel-Rahmen Und unten werde ich einen neuen Wert von 24 hinzufügen. Also jetzt gilt dies neu von 24 für nur 24 Pixel unten. Dicle a black ist nur für dieses Comeback. Plus und alles andere ist auf die Überschrift 55 Fixes, richtig? Großartig. Jetzt gehe ich weiter und wähle das aus, und dann fügen wir eine Rede hinzu. Wir werden ein paar Spotting hinzufügen, weil, wie Sie sehen können, es sind 1 20 Pixel von oben und 72 Bilder von links und rechts, also gehen wir weiter und tun das. Ich werde voran gehen und in den Rand in der Polsterung für das tat Block. Ich werde voran gehen und sagen 1 20 oben, 1 20 unten, 72 Pixel links, und so sind Sie Pixel auf der rechten Seite. Richtig? Ich war ziemlich gut dran. Jetzt haben wir dieses Element, oder? Und das wird ein sehr cooles Element, denn wir werden das wird ein sehr schönes, schönes Animator-Element sein. Also, was wir tun werden, ist, dass wir einen Textlink erstellen, okay? Also drücken wir die Steuerung und erstellen einen Text, der verlinkt werden soll, weil wir wollen, dass dies Animator ist und weil wir wollen, dass dies ein Link ist, den Sie können, der angeklickt werden kann, um im Grunde nicht eingeben zu können. Und das wird diesen kleinen Textlink hinzufügen, OK, und ich werde diesen animierten Link unten nennen. Okay, jetzt gehen wir weiter und fügen Sie die Einstellungen hinzu. Wir haben 16 Plektren ist, ähm Sie wissen, und schwarze Farbe und Sie wissen, die regelmäßige Ästhetik. Also werde ich gehen und diesen Textlink auswählen. Ich möchte die Schriftgröße auf 60 setzen. Äh, ich werde die Höhe auf etwas Interessantes einstellen, aber lassen Sie mich erklären, was ich mit ihr machen werde. Wir wollen, dass die Farbe diese Ebene eine schwarze Farbe ist, die irgendwie wie eine richtige ist und da es ein Link ist, wo für automatische fügt diese Unterstreichung. Aber wir können das entfernen, indem wir hier in den Dekorationseinstellungen auf kommen. Wir können das auf keine setzen. In Ordnung. Sieht ziemlich gut aus. Gut. Und das nächste ist, dass wir diese Art von Unterlage hinzufügen wollen. Also, was ich tun werde, ist, dass sie die Höhe auf eine große Zahl setzen wollen. Na gut, also sagen wir so etwas wie, du weißt schon, 40 oder? Und auch, ich komme hierher oder hier nach oben und in den Anzeigeoptionen. Ich werde diesen wählen, der im Zeilenblock sagt, richtig, Blockwert. Und vielleicht könnte ich voran gehen und das sogar zu etwa 50 sagen. Ok. Und dann kann ich zum Bardos-Abschnitt kommen und sicherstellen, dass Sie zuerst die untere Grenze überprüfen. Ok? Und dann fügen Sie einen Farbwert von dem ein, den wir wollen. In Ordnung. Und es Reihenfolge sind automatisch Sätze davon zu einem. Das ist also so ziemlich das, was wir jetzt haben, vielleicht sind 50 zu viel, also kann ich das wahrscheinlich auf 40 reduzieren. Ich denke, 40 ist eine ziemlich anständige Zahl, Ordnung. Und wir können weitermachen und das anrufen. Was willst du? Wir können das noch mehr über Sie nennen . Und das Beste daran ist, dass sich die Zeile entsprechend der Höhe von der nach dem mit aus dem Text ändert . Nun, die nächste Sache ist, dass das eigentlich nicht schwarz ist. Es ist ein Dunkelgrau. Also möchte ich schnell die Farbe ändern, um eins zu nivellieren, Traube. Alles klar, das ist fantastisch. Nun ist dieser Knopf tatsächlich nach unten. Moment ist der ideale Weg, dieses Element tatsächlich auszuwählen und ImMomentist der ideale Weg, dieses Element tatsächlich auszuwählen undes zu verschieben. 133 Pixel unten an der Unterseite. Marge drauf kommt hier rein. Aber du willst etwas anderes machen, okay? Nun, der Grund ist, denn wenn ich vorgehe und das in wahrscheinlich zwei Zeilen ändere, will ich immer noch, dass das hier unten unten ist. In Ordnung? Ich möchte, dass das die untere Kante berührt. Nun, wenn ich über das Bild sage, sage ich, nachdem wir diese 1 20 Pixel außerhalb des Randes hinzugefügt haben. Wie Sie sehen können, haben wir unten 1 20 Pixel Rand hinzugefügt. Ich wollte auf diesem Grund bleiben. Also, wie machen wir das? Ganz einfach. Was wir tun werden, wird voran gehen und wählen Sie diesen Deadlock, und ich möchte eine Flex-Eigenschaft hinzufügen. Ok. Nun natürlich nicht, wollen wir natürlich nicht,dass die Dinge horizontal sind. Wir wollen, dass sie vertikal sind. Jemand wählt die Richtung, die vertikal sein soll. Heute ist die nächste Sache, dass wir wollen, dass alles nach links ausgerichtet ist. Ähnlich. Wählen Sie eine Zeile, die übrig bleibt. Der nächste ist, ich möchte diese eine Spule als Abstand zwischen wählen. Okay, jetzt, was passieren wird, ist, dass das in den Weltraum geht, diese drei Elemente gleichermaßen. Aber das ist nicht das, was ich will. Ich will, dass diese beiden zusammen sind, und ich wollte, dass das ein Weg ist. Also, was wir tun werden, ist, wählen wir diesen Tag Block, und geben Sie ihm zuerst eine Klasse und wir können diesen mittleren linken Block nennen. Ok. Und drinnen ist der Jemand im New Dev Block, richtig? Und diese Sackgasse wird diese Überschrift und diese Unterposition enthalten. Alles klar, lassen Sie uns im Navigator reparieren, okay? Und wir wollen, dass oben der Block oben ist und dieser unten steht. Also, wenn Sie sehen, was passiert ist, ist dieser mittlere Block, der das Elternteil ist Abstand. Die erste entwickelte sich nach oben aus dem Container auf dem animierten nach unten aus dem Container. Wir haben diese beiden tatsächlich gesetzt. Wir setzen diese beiden Elemente in einem entwickelten, weil wir wollen, dass dies diese beiden Elemente als separate diese beiden Elemente bewirken , weil wir wollen, dass diese beiden Elemente als, ah, ein einziger Block. Und wir wollen, dass dies als separater Block ist. Alles klar, so haben wir es geschafft. Und dafür der Block. Ich kann diesen normalen Rapper einfach nennen, weil er nur als Container oder als normaler Trapper hinzufügt . Und wir definieren keine Werte dafür, oder? Es wird einfach so sein. Und so ziemlich machst du das. Nun, der nächste ist dieser hier, wo wir dem Bild eine Anzeige in D-Block hinzufügen werden, okay? Und dass der Block hier drüben sitzen wird und ich dieses Mittelbild nennen werde, okay? Und wir werden tun, wird gehen und wählen Sie ein Hintergrundbild. Okay, also gehen wir zu Deckung und wählen dann Bild und wir werden tun, ist, dass wir das Bild hinzufügen, was ist das in Bild hinzufügen, Ordnung? Und gut gesagt, die Position zu zentrieren und das sieht ziemlich gut aus. Großartig. Also, wie sieht das aus, wenn wir zu 1920 Fixes gehen? In Ordnung. Das würde ich ziemlich gut aussehen. Mal sehen, wie es aussieht, wenn es zu 38 geht. 40. Alles klar, das sieht auch wirklich gut aus. Das ist die Art von Look, nach der wir suchen, oder? Das ist die Art von Look, nach der wir suchen, Und das sieht meiner Meinung nach ziemlich gut aus. Großartig. Also, jetzt ist das erledigt. Wir werden voran gehen und diesen Boden animieren, damit er super toll aussieht. Also sehe ich euch im nächsten Video. 16. Erstellen eines animierten Link: Na gut, Leute. Also in diesem, ich oder was wir tun werden, ist los, paaren Sie diesen Knopf, um es super lustig und interessant zu machen. Also mal sehen, wie man das macht. Nun, das wird wieder eine einfache Interaktion sein. Also werden wir alles festhalten. Wir werden diesen Abschnitt kleben und wir werden noch nicht zur Fußlasche gehen. Also, was ich tun werde, ist offensichtlich, dass das ausgelöst wird, und ich schwebe darauf, richtig. Also werde ich gehen, und in der Drop-down-Liste werde ich schweben wählen. Und jetzt sind wir im Hover-Zustand. Alle Änderungen, die wir vornehmen, wirken sich also nur auf den hohlen Zustand aus. Okay, also was wir zuerst tun wollen, begann, indem wir eine Hintergrundfarbe hinzufügen und diejenige auf der einen wählen Ist diese Art von öffentlicher Warnung, die wir haben? Ordnung, , du könntest das für jede Farbe wählen, die du willst, aber ich werde das jetzt auf lila setzen, weil du es verwendest, weil wir Lila für alle unsere anderen Tasten benutzen. Und das ist unsere Grundfarbe. Und das nächste, was zu tun ist, werde ich die Farbe des Textes ändern, um weiß zu sein. Okay, jetzt sieht es ziemlich aus, richtig? Und ah, wollen, ist es ein wenig Abstand auf der linken oder rechten zu geben. Ich komme hier zur Watte, und ich werde sagen, eine Trennung von 24 Pixeln auf der linken Seite und 24 Pixeln auf der rechten Seite. In Ordnung, und dann können wir tatsächlich wieder in unseren Keinesstaat kommen. Richtig? Stellen Sie sicher, dass Sie wieder in den Nicht-Zustand und lassen Sie uns sehen, wie das aussieht. Alles klar, so kann es gut aussehen, aber es sieht wirklich nicht gut aus. Ich meine, die Interaktion funktioniert, aber es sieht irgendwie nicht gut aus. Also, wie machen wir das? Das wir tun werden, ist offensichtlich, dass wir hier runter zum Übergangsteil kommen, und wir haben drei Eigenschaften hinzugefügt. Eins war die Textfarbe. Eine war die Hintergrundfarbe, und eine war die Polsterung auf beiden Seiten. Also werden wir Eigenschaften auf jeden anwenden, um über die Übergänge zu beginnen, und die 1. 1 wird die Hintergrundfarbe sein. Und ich werde das tun 3 15 Millisekunden, und dass wir wählen, ist unser Gericht. In Ordnung. Und wählen wir einen anderen aus. Lasst uns gehen. Und wählen Sie die Schriftfarbe dieses Mal 3 50 Millisekunden und Lockerung wird einfach aus Gericht sein . Lasst uns noch ein Wort gehen. Und dieses Mal wird es das Watting goto Polster sein, und wir werden wieder 3 50 Millisekunden wählen. Und Lockerung wird leichter Gericht sein. Richtig? Also jetzt haben wir alle drei Eigenschaften genommen und auch die gleichen Beschleunigungsanimationen hinzugefügt, so dass es ziemlich gut aussehen sollte. Alles klar, da gehst du. In Ordnung. Und das sieht super niedlich aus. Nun, ich denke, die Polsterung könnte zu viel sein. Also, was kann ich tun? Uh, zu sehr, wie ich das tun kann. Gehen wir zurück zum Hover-Zustand und reduzieren Sie ihn vielleicht von 24 auf 16 und Sie wissen 16, so dass es gut aussieht. Und jetzt gehen wir weiter. Kommen Sie zurück in den Nonnenstaat. Alles klar, schauen wir hier rechts nach, das sieht ziemlich gut aus. Alles klar, so dass es so ziemlich darum geht, wie du diesen schönen Knopf geklärt hast. Es ist sehr lustig und interaktiv, um mit zu spielen. Also in der nächsten Woche werden wir weitermachen und das ansprechen lassen. Also werde ich euch im nächsten Video sehen 17. Den Middle Abschnitt Making lassen: Alles klar, in diesem Video, werde ich weitermachen und das reaktionsschnell machen. Also, wenn Sie sich das Design für den mobilen Breakpoint ansehen könnten, wie es aussieht, ist ziemlich einfach so, und er hätte definiert, ist, dass ich definiert habe, Ah, Höhe von 450 Picks ist so das ist die Höhe, die wir gehen für. Und wir wollen, dass das alles für hübsche Bilder ist, und wir wollen, dass dies auch 4 50 Pixel ist. In Ordnung, das ist also der Wert, den wir entwerfen und tatsächlich voran gehen und das schnell bekommen können. Und, wissen Sie, stellen Sie das auch hier her, damit wir Kontext haben, Ordnung. Und ich werde sagen, die Höhe ist für jeweils 50 Xers. Alles klar, geh weiter und dass wir diesen Abschnitt beherrschen können. Also lassen Sie uns in eine Waffe springen und gehen wir zum Tablet-Prüfpunkt. Nun, der Taliban-Bruchpunkt ist, dass es in Ordnung ist, würde ich sagen, Ähm, nicht viel von einem Problem hier sieht aus. Ok. In Ordnung. Jetzt haben wir ein Problem, wo, weißt du, denn obwohl wir 50% gesagt haben, haben wir zu viel Abstand links und rechts, und das ist der Grund, warum das irgendwie geschrumpft wird. Was wir also tun können, ist für diese, der linke Block sind inter, eine Polsterung von 70 zu haben. Wir können das wahrscheinlich auf 40 auf der linken Seite und eine lustige auf der rechten Seite reduzieren. Und das sollte es jetzt schaffen. Sie sollten uns viel mehr Atemraum geben, und Sie sollten es viel besser aussehen lassen. Und vielleicht sogar beim Schlagen zum Thema wahrscheinlich ist das bis zu 80 und 80. 80 und Ich denke, das ist eine Nummer, die hübsch funktioniert, aber wir gehen landschaftlich. Also im Moment Landschaft, wollen wir es irgendwie ändern. Und es hat sich bereits geändert, in Ordnung. Es ist so seltsam, dass es sich bereits geändert hat, weil wir das gleiche große Element verwendet haben, richtig, richtig, denn wenn Sie hier rüber schauen,wissen Sie, wissen Sie, wir haben den Rapper hinzugefügt und er hat das Raster hinzugefügt und dass das Grid Orderly in diesem Format ist , und es sieht schon ziemlich gut aus. Nun wollen wir natürlich die Höhe dieser beiden auf 50 Pixel einstellen. Also sagte ich, die hohen zwei für 50 Bilder und das sieht ziemlich gut aus. Alles klar? Wie wenn ich in die mobile Landschaft gehen eine Dringlichkeit, es sieht irgendwie gut aus. Aber hier werden wir es nicht wissen. Freundlich aus. Stellen Sie sicher, dass dies auch für 50 ist. Aber bevor wir das machen, werde ich sicherstellen, dass die Abfahrt links und rechts 20 ist. In Ordnung. Und oben ist, ähm, es ist um 64. Es ist auf 46 Plektren. Ist ich denke, das muss sowieso 48 sein. Also, wenn ich die obere Polsterung auf 48 setze die untere Polsterung auf 48 alles in Ordnung. Und Sie auf der Höhe 450 Pixel waren die Höhe und sagte, dass tun 450 Picks ist und das sieht ziemlich gut aus 50. Ja, das sieht gut aus. Und lasst uns zum mobilen Porträt gehen. Und das sieht auch fantastisch aus. Sieht gut aus. Also, wenn Sie voran gehen und sagen, das tun 3 60 Ähm, in Ordnung, so wird es aussehen. Und ich finde, es sieht ziemlich toll aus, oder? Und weißt du, die gleichen Interaktionen funktionieren auch hier. Also nichts zu befürchten Also in der nächsten Woche gehen wir zum nächsten Abschnitt der Website und lernen etwas Neues. Also, wie ihr Jungs im nächsten Video, 18. Den Abschnitt aufbauen: Na gut, Leute. In diesem Video werden wir diesen Abschnitt erstellen. Wir werden ein neues Konzept in Bezug auf Gitter lernen. Es läuft ziemlich einfach. Nun, wie bauen wir das? Sehr einfach. Wir beginnen wie gewohnt mit einem Abschnitt und dann beginnen wir mit einem Rapper und Insider. Aber wir haben ein Gitter und wir werden ein bis drei Spalten haben und tun tun tun, eins und zwei, richtig, Wenn Sie es sehen, dass dieser Abschnitt, der das Schulhemd ist, die Fähigkeiten und die Beschreibung ist eine Art der Aufnahme dieser gesamten Spalte. Aber diese beiden nehmen, wissen Sie, sind vier mal vier Spalten. Wie organisieren wir das eigentlich in Buffalo? Es wird ziemlich interessant. Lass uns langsam ins Web springen. Also werde ich damit beginnen, dies auf 14 40 Pixel zu setzen. Also wollen wir damit anfangen. Lassen Sie uns erstellen wählen Sie den Körper und das ist ein neuer Abschnitt. Also lass uns in deinem Abschnitt auswählen und hier gehen wir weiter und wir werden diesen Skills Abschnitt aufrufen , und wir werden voran gehen und etwas Polsterung oben und unten hinzufügen. Also oben. Wir haben etwa 1 20 Pixel. Gleiches hier unten 1 20 Bilder und 72 links und rechts. Also mit dem Senat mit dem Abschnittswähler, werde ich voran gehen und sagen, 1 20 Pixel oben auf 20 Pixel unten und 70 Türpixel links und 72 Pixel auf der rechten Seite. Ok. Ich scheine eine Presse kontrolliert Ito zu tun. Fügen Sie einen Diff-Block hinzu. Und hier werden wir einen Rapper hinzufügen. Also werde ich einfach voran gehen und Rapper wählen. Okay, unsere Standard-Rapper-Einstellungen sind ihre 100% mit 1920 Pixeln, max mit und eine Höhe von 100%. Ziemlich einfaches Zeug. Alles klar, als Nächstes werden wir tun, ist, dass Sie ein großartiges erstellen. Jetzt haben wir bereits eine Komma-Klasse namens Grid. Nun, das ist in Ordnung, aber das Problem ist, das große ist nur zwei Spalten, aber wir wollen ein Drei-Säulen-Raster, also werde ich eine neue Klasse erstellen und dieses Gitter drei Spalten nennen. In Ordnung. Ich werde nur gut sagen. Drei C o l weich. Wissen Sie, drei Spalten, würde ich sagen, vielleicht unterstrichen. Lass es besser aussehen. Okay, das ist also meine neue Klasse. Und jetzt werde ich diesen Wrapper in ein Raster verwandeln, indem ich auf diesen Button klicke. In Ordnung? Und jetzt werden wir drei Säulen haben und ich muss mich aufsteigen, was wir haben. Alles klar, großartig. Jetzt können wir so ziemlich nichts sehen, weil es keinen Inhalt gibt, aber wir werden anfangen, Inhalte eins nach dem anderen hinzuzufügen. Nun, die andere Sache, die ich tun möchte, ist sicherzustellen, dass der Rand 24 Pixel beträgt, weil es irgendwie ausgerichtet ist. Haben die 24 Picks von Marge, die wir auf unserem großen Jemand sagte dies zu 24 wir können den Boden auch nach unten setzen ist eigentlich so die Zeilenlücke ist tatsächlich 40 es. Also können wir die unterste Zeile Lücke auf 48 Pixel setzen, und das sollte ziemlich gut von Anfang an sein, ein normaler taub, bisschen drücken Sie die Kontrolle e und erstellt den Block, und das wird dauern, Sie wissen, der erste Abschnitt. Und wir könnten einfach diesen nominativen normalen Rapper nennen, würde ich sagen, weil es keine Eigenschaften zuweisen hat. Was wir tun werden, wird voran gehen und Kontrolle drücken, Essen und fügte hinzu, sind in Ordnung. Und es wird die gleiche Überschrift wie diese Fertigkeiten sein. Also werde ich das auswählen. Sie war es, eine Geschichte zu sein, und wir werden sagen, Entschuldigung, jeder nicht alle drei. Und ich werde sagen, dass die Nummer 55 Picks in Ordnung ist, und wir werden voran gehen und diese Geschicklichkeitssekt nennen. Als nächstes werden wir diesen Absatz hinzufügen , der 18 Plektren ist jemand den normalen Rapper auswählt, weil wir die Text-Einblicke auf eine Pressesteuerung essen wollen , und wir werden ein Foto wählen, okay? Und wir werden voran gehen und wählen Absatz 18 Picks ist diejenige, die wir haben, Schöpfer. Na gut, sieht gut aus. werde das also kopieren und ich verkaufe so und Biest. Nun, die Farbe davon ist anders. Es ist eigentlich ein Licht zustimmen. Also werde ich gehen und eine hellgraue Komma-Klasse hinzufügen. Wir haben einen Doktortitel, Komma schließen. Wir haben keinen hellgrauen Komplex. Jemand erstellt ein neues Komma Plus und ruft dieses Licht. Großartig. So können wir nur diese hellgraue Farbe hinzufügen. Also werde ich weitermachen, den Wert kopieren und hierher kommen, und wir werden uns ändern. Oh, wirklich? Nimm das Hellgrau. Also bin ich es. Ersetzen Sie das einfach. Jetzt haben wir einen gewissen Rand des Bodens, das ist 24 Bild. Was ich also tun kann, ist für die Überschrift. Ich kann hinzufügen, eine neue Kampfklasse sind für den Absatz. Ich kann einen Neuling Close hinzufügen. Also denke ich, ich werde mit der Überschrift gehen. In Ordnung? Und ich sage 24 Pixel. Unterer Rand. Wirst du bleiben? 24 Plektren der Grenze Ok. Und alles, was Sie tun müssen, ist, diese 24 Pixel unten hinzuzufügen. Es wirkt sich also nur auf dieses bestimmte Element aus. Weil dies das einzige Element ist, das diese Klasse schnell ändert, um X gut aussehend gut zu sein , oder? Die nächste Sache wird diesen Block erschaffen, also beeindrucken Sie die Kontrolle, Eat. Wir werden einen Block hinzufügen, und wir nennen diesen wieder normalen Rapper. Ok. Und hier werden wir in Symbol hinzufügen, Sie werden einen Subtext hinzufügen. Jeder an einem Absatz, richtig. Also gehen wir zum Asset-Panel, und wir haben unsere Symbole, also beginne ich mit den ersten 100 Tagen. Das Produkt-Design-Symbol werde ich verfolgen, dass und fallen lassen, dass in. Ok? Nun, wenn man sich die Breite und die Höhe anschaut, sind sie ziemlich gleich. Das ist 70 do Pixel von 72. Und ich habe sie als SPG in diesem Format selbst exportiert, also sollte es völlig in Ordnung sein. Oh, die nächste Sache ist, wir werden das, ähm, Geschicklichkeitssymbol nennen ähm, , okay? Und wir werden einen unteren Rand von 24 Pixeln hinzufügen, also ist es wie das Symbol und wird 24 Pixel sagen. Ok. Und jetzt werden wir unser Element hinzufügen, das die jeweils drei kleine Pressesteuerung E ist und bei einer Überschrift wird es B e r h drei geben. Ok. Und das wird das sein, was wir haben, sind 24 Picks, ist ich denke, das ist ein neues. Also werden wir h drei wählen und sagen Überschrift oder wir haben nur ah, Überschrift 24 Pixel. Das ist also gut. In Ordnung. Und wir werden das kopieren und Feaster schwächen und hier hier die Entfernungen. 12. Aber hier haben wir bereits den unteren Rand von 16 und ich denke, es ist OK. Wir müssen es nicht auf 12 ändern. Sie können es so behalten, wie es ist. Also werde ich das kopieren, und wir werden einen neuen Absatz 16 erstellen. Richtig? Erstellen Sie also einen neuen Text. Oh, wir können einen Absatz selbst nennen, okay. Und ich werde diese Informationen beschleunigen, und das wird Paragraph 16 Korrekturen sein, und es wird Licht zustimmen. Also werde ich eine neue Kampfklasse hinzufügen, und ich werde dieses Licht nennen. Großartig. Nur für die Farbe. Ich möchte die Farbe ändern, um leicht zu sein. In Ordnung, auf. Das sieht ziemlich gut aus. Im Moment haben wir auch diesen inneren Rand von 48 Pixeln. Das können wir jetzt auch tun. Aber das Problem ist, wenn ich das mit dem normalen Rapper mache, wird es alles hinzufügen. Also, was ich tun werde, ist, dass ich diese Klasse entfernen werde, und ich werde eine neue Klasse erstellen, und ich werde diese Fähigkeiten einfach nennen. Ah, Kiste. In Ordnung. Und tun Sie das. Ich werde ein inneres hämmern hinzufügen 40 es Great. Nun, was ich tue, werde ich das kopieren und einfügen und wir können weitermachen und die Informationen ändern. Visuelles Design visuelles Design, und Sie können alle diese Informationen und Fälle hier kopieren und auch das Symbol ändern, so dass Sie tatsächlich auf das Symbol selbst klicken und auf das Zahnradsymbol klicken und wählen Bild ersetzen . Und Sie können darauf klicken, um das Bild zu ersetzen, Ordnung. Und großartig. Also, was wir jetzt tun können, ist, wenn er die zweite dupliziert, die zu dieser Kiste kommt, okay? Und wir können das nicht in eine andere Kiste verschieben, oder? Und das ist, weil Sie hier sehen können, dass die Position eine Art Satz, Zehe oder Zehe ist , und wir können das Handbuch einrichten. Aber was wir tun werden, wird das löschen. Was wir tun, ist, dass wir diesen normalen Rapper auswählen müssen, den wir haben, okay? Und ich werde das so skalieren, dass es zwei Kisten aufnimmt. Ordnung, also jetzt, wenn Sie sichein paar Werte hier ansehen, ist die Spaltenspanne eins, was bedeutet, dass sie sich über ein paar Werte hier ansehen, ist die Spaltenspanne eins, eine Spalte erstreckt, aber es nimmt zwei der Rose auf. In Ordnung, wenn ich also auf dieses Symbol klicke, kannst du das jetzt sehen. Du kannst es immer noch nicht sehen. Irgendwie sehen wir, was wir tun werden, ist, wählen Sie das aus, kopieren und einfügen es. Alles klar, jetzt sitzt das in der dritten Box. Aber hier drüben kann man sehen, dass dieser normale Rapper tatsächlich diesen ganzen Block einnimmt. Dies ist also eine sehr coole Flexibilität, die Ihnen Workflow bietet. Ok. Ich werde das kopieren und es wieder hier drüben aufbauen. Und alles, was wir tun müssen, ist, den Text hier drüben zu ändern. Alles klar, kopieren Sie das. Und fügen Sie den Pieced ein und kopieren Sie ihn. Kopieren Sie das und basiert. Richtig? Also Und natürlich natürlich wollen wir weitermachen und das Symbol ändern. Also werden wir weitermachen und das in Motion Design ändern. Wir werden das ändern, um Fotografie zu sein, und das hier hat sich nicht verändert. Aus irgendeinem Grund wird jemand kopieren, dass, Beast Copy und basiert. Und das werden wir weitermachen und das ändern, um dieses zu sein. Richtig? Also, jetzt sieht es irgendwie aus, und es sieht ziemlich gut aus. Jetzt haben wir auch einen inneren Abschied 48 Pixel. Also, was ich tun will, ist jetzt das normale Verdampfen. Also, was wir jetzt tatsächlich tun können, da wir das mehrmals verwenden werden, werde ich eine Combo-Klasse von 48 Pixeln hinzufügen. Okay, ähm, Party, es repariert, richtig? Und dann fügen wir eine , normale Polsterung von 48 Pixeln hinzu,damit wir das Gleiche hier machen können. Anstatt die Skills Box-Klasse zu verwenden, können wir tatsächlich den gleichen hinzufügen, der unser normaler Rapper ist und auch in der Kama Klasse 48 Pixeln. Richtig. Und wir könnten dasselbe tun. Wir sind hier, so können wir diesen normalen Rapper und 48 Pixel Combo-Klasse nennen, um das nach rechts zu bewegen, nennen Sie diesen normalen Rapper und 48 Pixel gemeinsame Klasse nach rechts. Das Gleiche. Hier drüben nennen wir diesen normalen Rapper und bei einem 48 Pixel Abschied zu leiten. Alles klar, das sieht also ziemlich gut aus. Ähm, ja, das ist es so ziemlich. Im nächsten Video werden wir weitermachen und dies auf andere Breakpoints reagieren lassen. Also sehe ich euch im nächsten Video 19. Den Bereich reaktionsweise machen: Na gut, Leute. Also in diesem Video werden wir weitermachen und diesen Teil von der Web-Seite machen, der Abschnitt reaktionsschnell. Also lasst uns anfangen. So sicher super einfach. Das ist aus der Tablet-Ansicht. Und in der Tablette siehst du alles gut aus. Und wir wollen nur sicherstellen, dass wir die gleichen Einstellungen verwenden. Also haben wir 80 Pixel an der Spitze. Ähm, und ah, Ordnung, also haben wir 1551 20 Ich denke, ich werde das auch auf 80 setzen, nur um sicherzustellen, dass alles konsistent ist und was das gleiche tun, was wir hier sind. Wir machen das 80 und 80 unten und links setzen das auf 40 und auf der rechten Seite, auch auf 40. Alles klar, das sieht ziemlich gut aus. Nun, eine Sache, die wir tun können, ist, dass wir mit dem Layout ein bisschen herumspielen können. Und was ich wirklich tun möchte, ist, das etwas zu ändern. Was ich will, ist, dass der obere Abschnitt aufgreift. Wissen Sie, dieser ganze Abschnitt für die Fähigkeiten und diesen Absatz und dann wollen wir auch einen, und wollen. Also, im Grunde versuche ich zu sagen, ist, wenn ich hier gehe, werde ich nur zwei Spalten haben, okay? Und wir werden drei Reihen haben, oder? Also 12 und drei und ich möchte diesen normalen Rapper auswählen , der jetzt zwei Reihen umfasst. Ich wollte zwei Spalten verbringen, aber überspannen eine dro. In Ordnung, also, Messer, Messer, sieh es dir an. Wir haben dies irgendwie ein schönes Layout und die Rolllücke ist 48 Pixel, was völlig in Ordnung ist und irgendwie den Stil hat, den wir für. Und ich denke, das sieht als Nächstes ziemlich gut aus. Gehen wir hinauf in die Landschaft und die Dinge hier. Sieh ein bisschen komisch aus, aber wir werden versuchen, es zu reparieren. Das erste wird tun, ist, dass ich alles in eine Reihe machen will. Ich möchte keine Spalten, also werde ich anfangen, indem ich die obere und untere Polsterung auf 40 reduziert, weil 64 ist, weil das die Zahl ist, die wir verwenden. Also 64 oben und Stadt von unten und 20 auf der linken und 20 auf der rechten Seite, rechts, um den normalen Rapper zu wählen, und hier werden wir tun, wird dies auf eine Spalte setzen , alles klar. Und wir wollen ins Netz gehen und sicherstellen, dass wir nur eine einzige Spalte haben. Jetzt sieht alles irgendwie so aus, die Probleme. Wir können sehen, dass etwas nicht stimmt. Wir sehen, dass sich etwas überschneidet. Also, wenn Sie überprüfen wollen, was ist das Problem? Was wir tun können, ist, lassen Sie uns tatsächlich damit beginnen, diese Abschnitte zu verstecken. Also, wenn ich den Mittelteil auswähle und ihn für jetzt irgendwie verbergen, können wir tatsächlich sehen, dass alles ziemlich gut funktioniert. Alles sieht toll aus. Ähm, aber alles sieht gut aus. Also stimmt etwas nicht mit dem Mittelteil. Und wenn er tatsächlich anfängt, diese Teile einzeln anzuschauen, können wir sehen, dass der Mittelteil tatsächlich eine Höhe von 600 Pixeln hat. Aber das ist hier drüben nicht der Fall. 600 Pixel Waas für den Tablet-Pakpunkt. Also sind wir hier für den Abschnitt, den wir diese Höhe entfernen werden, indem wir sie auf auto setzen. Ok. Und wenn wir das jetzt tun, wird es repariert, oder? Weil wir 600 Plektren definiert haben, ist aus dem Abschnitt, Toby das. Aber dieser Inhalt war eigentlich mehr als 600 Pixel. Das ist also eine kleine Änderung, die wir vornehmen mussten. In Ordnung. Und das sieht ein ziemlich guter Anfang aus, es zu mögen. Wir können zum, äh, äh, Bruchpunkt weit das Handy auf der einen Sache, die ich tun will, ist, dass ich mich ändern will. , Wissen Sie, dieser Abschnitt hier drüben, was diese zusätzliche ist,wissen Sie, wissen Sie, in dieser 48 Wochen des Kampfes, die ich nicht bereit sein kann. Ist das auf Null? In Ordnung. Und jetzt sieht alles ziemlich gut aus. Komm zurück und sieh nach. Und ah, das sieht aus, das sieht gut aus. Alles klar, das ist so ziemlich es für dieses Video. Und im nächsten Video werden wir voran gehen und entwerfen, dass diese Katze diese horizontale Bar off Logos ist, und wir werden auch eine supercoole Interaktion und Animation hinzufügen. Also werde ich euch im nächsten Video sehen 20. Aufbau des Logo: unsere Jungs. Also in diesem Video werden wir voran gehen und diesen Abschnitt von der Website erstellen, die diese Logo-Leiste ist und weg, um ein paar Werte hier zu finden. Also habe ich definiert, dass die Höhe von diesem wird 140 Pixel sein, und der Witz wird tatsächlich 24 VW sein. Jetzt. Ich hätte verwenden können, wissen Sie, das mit und sagte, dass Toby 3 40 Aber der Grund, warum ich mit 24 VW angefangen habe, wissen Sie, was von der View-Port-Arbeit abhängt, ist, weil die Interaktion, die wir schaffen werden nicht wirklich funktionieren. Nun, wenn wir Pixelwerte hinzufügen, Ordnung. Und Sie können nicht erklären, warum, wenn ich vorangehe und über die Interaktion. Aber im Moment, in diesem Video, lassen Sie uns einfach voran und bauen uns im Web-Flow auf. Also hier bin ich in Ruffalo, und ich werde anfangen, indem ich eine neue Abschnitte auf Wählen Sie den Körper und beeindrucken Control Eat und ich werde einen Abschnitt hinzufügen. In Ordnung. Und jetzt, wo wir einen Abschnitt haben, werde ich diesen Abschnitt als Logo-Leiste bezeichnen. Ok. Nun, in diesem Fall werde ich keinen Rapper benutzen, weil es so ist. Wir möchten nicht, dass irgendetwas auf das Gewicht außerhalb des View-Ports beschränkt wird. Was wir tun wollen, ist nur sicherzustellen, dass es entweder von den Rändern berührt. Also werde ich einfach voran gehen und anfangen, ein Gitterelement zu erstellen, weil wir wollen, dass alle diese in einem großen sind, und ich werde sechs Spalten haben. Also, weil wir sechs Einheimische haben, also wenn ich darauf klicke und ich werde sechs, äh, sechs Spalten wählen äh, und mich fragen. Alles klar, los geht's. Und ich nenne diese Lesung einen Traum. Gut. Ich werde das Logo nennen. Großartig. Ok. Und wir fangen an. Eine andere Sache, die ich tun möchte, ist, dass ich die Spalte reduzieren möchte. Gap sagte das auf Null, weil wir wollen, dass sie sich berühren. Ich werde anfangen, indem ich meine erste Klasse erstelle. Ordnung, ich werde einen Ad-Block hinzufügen, und, uh, in diesem, werde ich diese lokale Box anrufen. In Ordnung? Sie können es nennen, was Sie wollen und erst begonnen haben, indem Sie ihm eine Höhe von 140 Pixel geben. Das ist der Wert, den wir definieren können. Und das mit wird 24 v W sein, das ist 24 Ansicht Port Worth. Alles klar, Sir, sagte 24 b W. Was ist mit ihm gelangweilt. Alles klar, das sieht ziemlich gut aus. Jetzt hole ich mir das Logo von unserem Asset-Panel. Jemand wurde am ersten niedrigeren geschnappt. Ich werde das in den Logoblock stecken, okay? Und wir könnten einfach dieses Kunden-Logo nennen. Ok? Nun, um dies in der Mitte zu machen, können wir das übergeordnete Element auswählen, das die lokale Box ist, und ah, dort. Wir werden voran gehen und wählen Display als Flex, und dann werde ich sagen, ein Zeilenzentrum und rechtfertigen Mitte, so dass das Logo in die genaue Mitte kommt. Nun, was ich tun werde, ist, dass ich keine Kopie bin und es ist alles in Ordnung, und wir können weitermachen und das Kundenlogo auswählen. Oder eine Sache, die wir tun wollten, war, dass ich die lokale Box auswähle und Sie konnten sehen , dass wir diese Art von Grenze haben, richtig? Jemand kommt runter und hier im Grenzbereich, ich werde nur die Farbe ändern, um diejenige zu sein, die wir wollen, was Ebene eins ist, die die Farbe und der Arzt ist. Amerika. Wir stellen sicher, dass die Breite eins auf dem Stil ist,wissen Sie, wissen Sie, mit der durchgezogenen Linie. In Ordnung. Eine nominale Kopie dieser und Basis und ein Wählen Sie das Logo. Und hier kann ich auf dieses Zahnradsymbol klicken, wo ich voran gehen und ein Bild ersetzen kann, und ich werde die 2. 1 Kopie dieses erneut auswählen. Alles klar, wählen Sie das Logo aus und ändern Sie es zu diesem. Kopieren Sie Einfügen. Wählen Sie diese aus. Ändern Sie das Logo in ein anderes, und kopieren Sie es dann. In Ordnung. Und jetzt können Sie sehen, dass wir irgendwie in der Lage sind, weg zu scrollen und, wissen Sie, außerhalb der tatsächlichen Zone von unserem von uber. Und das ist eine schlechte Erfahrung. Aber wir werden das in Ordnung bringen. Ich werde diese wählen wählen Bild ersetzen, und wir werden dieses ein und ein letztes Logo wählen. Kopieren Sie Einfügen. Es muss dies das Platzbild auf diesem auswählen. Okay, wenn Sie also nicht sehen können, dass unsere Website Husten horizontal scrollt, was nie eine gute Erfahrung ist, sollten Sie das nie tun. Also, was wir tun werden, ist, wenn wir eine neue Eigenschaft hinzufügen, richtig, Also werden wir tun, ist ich werde den lokalen Barbereich auswählen, richtig? Der untere Balkenabschnitt nimmt das gesamte Nass vom Aussichtshafen auf. In Ordnung, also nimmt es an. Wenn er das zu 14 40 sagte, nimmt es tatsächlich auf. 14. 40 Plektren sind jetzt. Es gibt einen Überlauf der Eigenschaftsfarben, und gerade jetzt ist der Überlauf auf sichtbar festgelegt, was bedeutet, dass sichtbar den Inhalt zeigt, der seinen Container überläuft. Okay, jetzt ist das untergeordnete Element, das dieses Logo großartig ist, freundlich überfüllt den lokalen Balkenabschnitt, weil sie den Überlaufsektor sichtbar sind. Aber wenn Sie voran gehen und diesen zwei Hitter setzen, was bedeutet, dass versteckte überlaufende Inhalte verbirgt, ohne eine Bildlaufleiste hinzuzufügen, wird es darauf klicken. Und jetzt, wenn Sie versuchen, horizontal zu scrollen, können Sie es nicht tun, weil was übergelaufen ist, seine Art von versteckt und es muss und abgeschnitten werden direkt zum Tierarzt vom Bildschirm. Also, wenn ich das bis 1920 sagte, können Sie sehen, dass es abgeschnitten wird, und das es nimmt die Größe ab, und jedes Element nimmt die Größe vom View-Port auf. Es berechnet die Arbeit basierend auf der Größe des View-Ports. Also sagten wir 24 VW. Das ist also im Grunde 1920 zu 24%. In Ordnung, Kredit für Person des View-Hafens mit allem Recht. Und doch so ziemlich darüber, wie Sie das in Bezug und im nächsten Video bauen, werden wir voran und bei der Interaktion gehen, um es sehr lustig und unterhaltsam zu machen. Also sehe ich euch im nächsten Video. 21. Animieren: Na gut, Leute. In diesem Video werden wir diese schöne Bar animieren und es wird super Spaß machen. Und es fühlt sich sehr schön an, wenn man damit interagiert. So sind super aufgeregt. Also lasst uns jetzt anfangen. Die Sache zu beachten ist, dass dies eine komplexe Interaktion ist, die es braucht. Es ist nicht so einfach, wie Sie wissen, hier rüber zu gehen und eines davon zu tun, weil diese wirklich nicht helfen. Wir müssen die Registerkarte „Interaktionen“ verwenden. Okay, jetzt möchten Sie tun, ist, wenn Sie anfangen, müssen Sie identifizieren, mit welchem Auslöser Sie die Animation haben möchten. Wenn ich Trigger sage , meine ich, welche Art von Aktion wird beginnen oder die Animation beginnen? Und wenn Sie hier sehen, haben wir zwei Arten. Wir haben Elementauslöser. Und auf dieser Seite, Trigger jetzt im Element Trigger, wir haben ein paar Optionen wie die meisten stoppen, fast klicken, Die meisten Hover. Die meisten bewegen sich über Element Moskal Interview beim Scrollen in der Ansicht, wissen Sie, so weiter und so weiter. Und wir haben auch Dinge wie Seite Trigger und Seite Lord Seite bewegen Vieux Port bezahlt Scroll und Wild-Seiten Scrollen jetzt abhängig davon, welche Art von Animation oder Interaktion Sie erstellen möchten . Sie müssen den entsprechenden Trigger auswählen. In unserem Fall werden wir diesen wählen, der besagt, dass die meisten in Sicht Port bewegen. Wenn Sie sich die Informationen ansehen, die Sie wissen, dass es animieren sagt, während die Maus über den Ansichtsport entlang des X und weißen Zugriffs bewegt , so passieren beginnt. Klicken Sie darauf und wir werden mit der Erstellung einer neuen Animation beginnen. Okay, also werde ich auf Start klicken Eine neue Animation wird wählen, die Mausanimation spielen. In Ordnung. Und jetzt hatte ich schon erschaffen, wenn ich das glauben werde. Also werden wir einen von Grund auf erschaffen, okay? Und wir werden beginnen, indem wir den Kunststoff erstellen, indem Sie auf die Plus-Sekunde klicken, und ich werde Logo-Leiste Animation sagen. Okay, jetzt haben wir im Grunde vier Eigenschaften, die wir definieren können. Die X-Achse verfügt über zwei Eigenschaften. Das eine nach links und wollen ist auf der rechten Seite und warum Zugang ist eins auf der Oberseite und eine auf der Unterseite. In unserem Fall möchten wir nur die Animation entlang der X-Achse bewegen. Wir kümmern uns nicht wirklich um die Y-Achse in dieser speziellen Animation. Also, was ich tun werde, ist, dass ich auf Plus rechts klicke, und ich werde wählen, welche Eigenschaft ich will? Zwei Feinde möchte ich die Bewegung animieren, die Skala, die Rotation, die Kapazität, den Filter. Was will ich, Animal? In diesem Fall möchte ich die Verschiebungseigenschaft animieren. Klicken Sie also auf Verschieben. In Ordnung. Und jetzt sehen wir, dass wir diese beiden Schlüsselbilder gesucht haben. Die andere Sache Anmerkung ist, dass wir dieses Ausrufezeichen jetzt haben, das nicht das Ausrufezeichen bekommt , weil wir noch keine Werte dafür definiert haben. Wie viel sollte es sich bewegen? Richtig. Das ist die Sache, die wir wollen. Aber bevor wir das tun, wird das erste, was Sie tun wollen, sicherstellen, dass Sie das richtige Element bewegen . In diesem Fall möchten wir das Elementfeld nicht verschieben. Wir wollen dieses Logo-Raster nach rechts verschieben. Dieses gesamte Raster, wir wollen, dass wir uns bewegen, wissen Sie, von außen und innen des Bildschirms. Also, was ich tun werde, ist, dass wir in diesem Fall lokale Box gewählt haben. Das ist eigentlich falsch. Also, was wir tun können, ist, dass wir mit der rechten Maustaste klicken können, und wir können sagen, Ziel ändern und ich komme. Ich komme zum Navigator und wähle das Logo-Raster aus. Okay, jetzt können Sie sehen, dass der lokale große jetzt das Element ist, das verschoben wird, wenn ich einige Werte hinzufüge, wird das gleiche tun hier drüben, richtig? Klicken Sie auf Ändern, Tiger und Logo-Raster. Also manchmal, wenn es nicht funktioniert, was wir tun können, ist, dass wir das wirklich schließen können, und wir können es hier auswählen, jemand klickt darauf, und dann gilt das für das, Richtig? Also gibt es zwei Möglichkeiten, es zu tun. Und hier, lasst uns anfangen, die Werte zu definieren Jetzt, an einem Nullpunkt, wenn sie, wenn die Maus über der linken Seite des Bildschirms ist, wir hätten genau so aussehen wollen, wie es weiß. Also werde ich gehen und einen Wert vom X auf Null setzen. In Ordnung? Weil wir sein wollten, was auch immer wir keine Bewegung wollen. Wo sind Sie umgezogen? Wenn wir die 100 bewegen, wenn du über die Seite kommst, wollten wir uns ändern, also weiß ich nicht, dass ich voran gehen werde. Verschieben Sie diesen Schieberegler. Alles klar, jetzt können Sie sehen, dass sich das ganze Logo großartig bewegt. Aber wie viel bewegen wir es? Richtig? Denn wenn ich einen Pixelwert setze, was passiert dann? Ist der Inspektor außerhalb des Bildschirms wert? Es wird nur 500 Pixel bewegen, und das ist vielleicht nicht richtig. In Ordnung, lassen Sie mich Ihnen ein Beispiel geben. Also lasst uns weiter gehen und weiter wachsen. Also lassen Sie uns das zu minus 800 sagen. Okay, jetzt ist es am richtigen Rand vom Bildschirm, richtig? Also, wenn er tatsächlich zu 14 40 Picks geht, ist in Ordnung und du siehst es dir an, Ordnung, und lass uns das hier ausspielen. Sie betrachten es auf der linken Seite. Sieht gut aus, aber unter schreiben Sie es ganz nicht, wissen Sie, weil wir diesen zusätzlichen Platz haben, weil die ganze Sache bewegt 500 Pick 800 Pixel, unabhängig vom Bildschirm nass. Wie stellen wir sicher, dass es sich richtig ausrichtet, wissen Sie, nach Westen vom Bildschirm. Also hier ist ein cooler Trick. Was ich tun will, ist, anstatt 800 Bilder zu sehen. Ich werde einen Prozentsatz definieren. Alice, ich werde sagen, lass uns ein minus 30%. Okay, es ist die Wahl gescrollt. Ich werde uns ein wenig erhöhen, bis Eis, bis es irgendwie perfekt ausrichtet. Und ich denke, bei 44% sieht es ziemlich gut aus. Okay, das andere, was wir tun müssen, ist, dass Sie sehen können, dass das Ausrufezeichen immer noch da ist, obwohl wir Werte definieren. Und der Grund, warum Tippen ist, weil eine in Bezug auf den Prozentsatz auf der anderen ist in Bezug auf Pixel. Also, dieser hier, werde ich es auf Prozentsatz setzen. Ok, großartig. Also, jetzt schauen wir uns mal an. Alles klar, also lasst uns eine Art Rückzug 40. Die kleinste Bildschirmgröße und alles in Ordnung. Er sieht ziemlich gut aus, oder? Sieht toll aus. kannst du sehen. Es respektiert die Prozentwerte. In Ordnung, lassen Sie uns das auf 14 verschieben. 40. In Ordnung? Jep. Sieht gleich aus. Sieht aus. Sieht sehr gut aus. Versuchen wir es 1920. In Ordnung. Und doch sieht das auch ziemlich gut aus, und es funktioniert sehr gut. Ehrfürchtig. Das ist also so ziemlich es. Nun, wenn du willst, kannst du das in 38 44 2 Samen ändern, Ana, Focus. Entschließung zum Staatsanwalt. Ja, es wird ziemlich gut aussehen. So richtig. Ähm, ja, das sieht toll aus. Ehrfürchtig. Richtig. Also gehen wir zurück zu 1914 40 wie so Das ist sehr viel es auf, wie Sie voran gehen und schaffen diese schöne Interaktion für diese lokale Bar Und für diese lokale, aber und es ist super einfach. Wenn du es nicht verstanden hättest, würde ich vorschlagen, dass du dir das Video wieder langsam ansiehst, eins nach dem anderen. Und ah, es wird für euch funktionieren. Also, das ist so ziemlich es für dieses Video, und ich werde euch im nächsten Video sehen. 22. Das Logo Carousal Making: Na gut, Leute. In diesem Video werden wir fortfahren und diesen Logo-Leistenabschnitt riskieren für andere Break-Points . Nun, da wir darüber nachdenken, ist, wenn Sie es tatsächlich betrachten, die Interaktion, die wir im vorherigen Video erstellt haben, tatsächlich passiert, wissen Sie, weil wir eine Maus und einen Cursor benutzt haben, richtig? Und deshalb habe ich gearbeitet. Aber auf einem Tablet und auf einer Landschaft und einem Porträt mobiles Porträt, Breakpoint, wäre diese Art von Interaktion nicht möglich. Daher müssten wir diese Interaktion leider für die anderen Bruchpunkte entfernen. Aber Sie können es immer noch auf dem Desktop haben, weil es super Spaß macht zu haben, oder? Also lasst uns weitermachen und das tun. Was ich tun werde, ist hier in den Animationseinstellungen. Triggert es Optionen direkt dort aus? Ich kann wählen. Entscheiden Sie sich für die Stoppung über Tablette für Landschaft Wichtig Auslöser. Ich werde für die anderen drei deaktivieren, weil er nur für den Desktop und darüber wollte, richtig? Das ist es, was wir wollen. Wenn ich jetzt zum Tablet-Pack-Teil gehe, wird das, was wir tun, weitergehen und das ändern und wir machen es ähnlich, was wir hier haben. In Ordnung, also gehen wir dazu. Also nehmen wir das Logo an. Großartig. Und hier im unteren, im Grunde. Aber wir wollen, ist zu Säulen. Ordnung, ich werde alle zusätzlichen Spalten entfernen, also stelle sicher, dass ich sicher bin, dass wir nur Spalten haben, Ordnung. Und, ähm, wissen Sie, wir können einfach weitermachen und wir können auch Ah hinzufügen, damit die Lücke bei der Rose Null sein kann. Wir können das auf Null und Verhalten sagen. Nun, der Grund dafür ist, nicht den ganzen Raum zu nehmen, ist wegen der Tatsache, dass wir eine gesetzt hatten, äh, wenn es 24 wir w Was ich tun werde, ist, dass ich voran gehen werde und das einfach gesagt habe oder alles in Ordnung machen , Also das nimmt die ganz mit, dass es gegeben ist. Das ist also so ziemlich, wie es aussehen wird, und das ist so ziemlich der Stil, den wir jetzt machen. Wenn man sich den Landschaftsbruchpunkt anschaut, sollte er so ziemlich gleich aussehen. Und ich denke, das sieht hübsches Mädchen aus und für die Tablet-Pause und für den mobilen Breakpoint wird es ungefähr so aussehen. Und ich denke, das sieht auch ziemlich gut aus, oder? Sie gehen, also ist es so ziemlich. Aber wenn Sie zurück zu unseren Todesfällen Tropic Point, können wir immer noch den Animationseffekt haben, der passiert. Sieht fantastisch aus. Also, das ist so ziemlich es für dieses Video. Und im nächsten Video werden wir weitermachen und den nächsten Abschnitt aus sind verärgert, also sehen wir euch im nächsten Video. 23. Den Abschnitt Projekte erstellen: Alles klar, Leute. In diesem Videokrieg wird Granado diesen Abschnitt erstellen. Nun, das sieht etwas kompliziert zu bauen aus, und Sie können sehen, dass der Offizier eine Art Draht von hier bewacht, um zu erklären, wie es ist. Aber es ist ziemlich einfach, um ehrlich zu sein. Also lasst uns irgendwie verstehen, wie das funktioniert. Das erste, was ist, Sie wollen natürlich starten, indem Sie einen Abschnitt erstellen, der unser üblicher Schritt ist. Wir haben mit einem Abschnitt angefangen, und in diesem Abschnitt werde ich einen Rapper erschaffen, okay? Und in dieser Runde wird es mein Gitter sein, Ordnung, denn ich muss Säulengriff. Und wie Sie sehen können, habe ich einen Did-Block erstellt, diese gelbe Farbe ist, die der Block für die innere Linke will, und es wird für den inneren rechten sein. Also haben wir jetzt zwei Spalten in der ersten Spalte, ich werde Wonder Block für diesen Text hinzufügen, richtig? Und für dieses Bild und den Subtext werde ich eine weitere Entwicklung erstellen und das Bild hierher und die Textelemente setzen. Oder hier. Richtig. Also im Grunde haben wir 1232 Blöcke auf der linken Seite, und wir haben 123 auf der rechten Seite, und dieser wird für unseren Knopf sein. Und das wird für unseren Text sein, und Sie haben einen Bildtext, ein Bild, einen Text , ,ein Bild, einen Text, ein Bild und einen Text. Ich denke, vielleicht wäre es viel einfacher, wenn ich die Farbe von diesem in eine andere Farbe ändern würde. Geh. Ich denke, das macht viel mehr Sinn. So werden wir weitergehen und strukturieren. Also lasst uns anfangen. Also hier bin ich in Buffalo. Ich werde voran gehen und das schließen, und wir werden den Körper auswählen und beginnen, indem wir einen brandneuen Abschnitt drücken und einen Abschnitt eingeben. Und es wird einen neuen Abschnitt geben, in dem wir es unseren Projektbereich nennen werden. Alles klar, jetzt fangen wir an, offensichtlich, indem wir links und rechts einen Haufen erstellen, 72 Bilder und 72 Fixes, okay? Und ihre nukleare a div Block , der unser Rapper sein wird, wird eine Sackgasse schaffen, und wir nennen diesen Räuber rechten Rapper hat die gleichen Eigenschaften wie üblich mit der mit off 100 Höhe von 100 Maxwell aus 1926 ist Sofort. Wir wollen ein Gitter erstellen. Wir wollen diese schnelle Integration und Eingabe einschalten. Großartig. Jetzt haben wir bereits zwei Arten von großen diese eine Klasse. Alles klar, ist ein Zwei-Säulenbrot, aber ich denke, das könnte anders sein, wenn wir es reaktionsschnell machen. Also, vorzugsweise, was ich tun werde, ist, dass ich das tolle entfernen werde, und ich werde Projekte sagen. Großartig. Ich werde eine brandneue Klasse erstellen, und ich werde es zu einem brandneuen Gitterelement machen, damit wir keine Fehler machen. Und ich werde voran gehen und auf großartig klicken, und wir werden weitermachen und wir werden nur zwei Spalten haben und sich wundern. Okay, ich wähle jetzt nicht aus. Wir können immer noch nichts sehen, weil wir Werte definiert haben und zu allem, seine Art aus, Sie wissen schon, zusammenbrechen. Aber das ist okay. Wir werden anfangen, indem wir unser erstes Textelement erstellen, welches dieses entwickelt wurde. Also werde ich einen entwickelten ersten erstellen, und wir könnten diesen normalen Block einfach nennen. In Ordnung, denn wir haben keine Eigenschaften, die diesem zuweisen. Es ist nur, um als Container für alle anderen Gegenstände zu fungieren, die wir hier drin haben, oder? So normaler Rapper. Okay, jetzt, in diesem, werde ich einen neuen De Block erstellen, okay? Und das wird auch normal sein, Trapper. Okay? Und es wird für den Stopp nächstes Gebiet Geld geben und wir werden tun, ist, dass wir voran gehen und ah, suchen nach diesem Abschnitt, den wir erstellt haben, richtig? Also werden wir diesen überliegenden Text kopieren. Kopieren Sie das und stützen Sie sich hier drüben, und wir werden das kopieren und das hier drüben stützen. Alles klar, jetzt wird es so aussehen, und alles, was ich tun werde, ist, zu doppelklicken und das zu kopieren und einzufügen. In Ordnung. Ziemlich gut. Nun, das Große betrifft, ist das andere, was wir tun wollen, die Spaltenlücke auf 24 zu sagen. Entschuldigung. Nicht zu 40 24 Hund Afrikaner. Lassen Sie es so. Jetzt werden wir weitermachen und das zu 14 sagen. 40 Pixel. Eso jetzt, wo wir tatsächlich sehen können, wie es im Design aussieht, und es sieht so ziemlich aus. Ich habe voran gegangen und habe etwas Abstand auf 48 Pixel von links gegeben. Jetzt hier ist es eine 72. Aber diese 72 ist nach der Überlegung der 24 Pixel hier drüben. Also 70 bis 70 zu minus. Auszubildende vier ist 48. Also werde ich hinzufügen Nein, wir haben bereits diese ruhigere Klasse, aber wir haben 48 Pixel auf der rechten Seite. Ich werde das anwenden. Jetzt sieht es perfekt aus. Und auch, Sie können sehen, dass , wissen Sie, wir haben einige Entfernung auf der Spitze, die etwa 1 20 Picks ist und hier haben wir keine Entfernung. Also werde ich den Abschnitt Projekte auswählen,wissen Sie, wissen Sie, das geduldigste Element. Und für den Abschnitt werde ich unter allen Fixes auf der Oberseite und 1 20 Pixel auf der Unterseite sagen . Also geben wir das, wir bekommen diesen schönen Abstand. Perfekt. Nun, für den normalen Rapper einfach finden. Und werden wir eine untere Polsterung von 80 Pixeln haben? Über die Marge von 80 Picks ist, also werden wir tun, ist ich werde eine neue Ruhe schaffen, Ordnung, weil wir es nicht tun, weil wir mehrere neue Eigenschaften hinzufügen, die die gleiche vorhandene Klasse, also erstellen wir eine neue Eins. Call s 80 wählt einen Boden und ich werde sagen Unterstrich M für Ränder. Und ich werde hierher kommen, und ich werde das in die Tiefe bringen, okay? Und Sie können dies tatsächlich von 48 Pixel umbenennen, rechts auf 48 Picks ist der richtige Beat zum Klopfen. In Ordnung, also ist es viel verständlicher. Alles klar, und großartig. Also, was wir jetzt tun können, ist, dass wir einen weiteren De Block schaffen , der unsere Arbeit sein wird. Blockieren Sie eine unterdrückte Kontrolle. Essen Hinzufügen eines Blocks. Okay. Und nur um sicherzustellen, dass dies der Block ist, ist das Kind von diesem normalen Rapper Also dieser ist für den ganzen linken Block. Dies ist für den Text, und das ist für, wissen Sie, den Arbeitsbereich. Richtig? Großartig. Also, was wir tun, ist, dass ich uns wieder normal anrufe, Rapper. In Ordnung? Weil wir keine Eigenschaft haben, die wir diesem zugewiesen haben. Okay, jetzt werde ich das Bild einbringen, einige gehen voran und beginnen, indem wir in unser Bildelement einsteigen , also werde ich voran gehen und mir ein Bild schnappen. Also, bis jetzt was? Wir sahen, dass wir ein Hintergrundbild verwendet haben, um einen Duke-Block zu erstellen, und wir haben ein Bild hinzugefügt. Tun Sie das. Das ist definitiv eine Möglichkeit, es zu tun. Aber es gibt mehrere Möglichkeiten, dies zu tun. Dies wird jemals ein Bildelement verwenden. So eine Presse gesteuert E und Suche nach Bild. Sie können sehen, dass das Bild ein tatsächliches Element ist. Das ist, was ich tun werde, ist, dass ich das Bild hinzufügen werde, damit es als Projekt One genannt wird , wird das ziehen und diese Einsicht fallen lassen. Alles klar, ziemlich gut. Jetzt werde ich schalten, um diese Option A sagt h I D p I und was das tun wird, ist, dass es Picks zu verhindern. Die Freude auf einer Schrift werden verschoben. Also, wenn Sie eine Figment-Datei haben, was wir hier definiert haben, ist, dass wir weg sind, aber selbst, eine gewisse Höhe von 626 ist in Ordnung, ich werde gehen und sicherstellen, dass das es perfekt spricht. Aber später, Aber jetzt ist die Höhe auf 620 Pixel eingestellt. Also was? Es wollte dieses Bild verkaufen, und ich werde dieses Projekt ein Projekt-Bild nennen, und ich werde auf die Höhe gehen. 610 Fixes 620. Okay, wenn du siehst, hören wir das Problem ist, dass es irgendwie verpixelt ist, richtig? Es ist eine Art Dehnung, und es sieht seltsam aus. Also die wirkliche Lösung, die ist, dass wir eine Option von hier haben. Nennen Sie uns fit. Sofort. Das ist super hilfreich. Was wir tun können, ist richtig. Klicken Sie darauf. Ich habe fünf Möglichkeiten, Phil, ich habe Einhalt. Ich habe Deckung, die ich erledigt habe. Hab sich verkleinert. Ich werde voran gehen und Deckung wählen. Was Deckung tun wird, ist, dass es auf die Beine geht. Gehen Sie weiter und decken Sie den gesamten Raum aus dem Container in Anarchist. Es ist die Höhe von 6 20 Bildern, Ordnung. Und die Arbeit, die basierend auf unserem Wrapper definiert wird. Also, was auch immer es hat, wird voran gehen und ihn bedecken. Es wird also etwas aufsteigen, aber es wird es schön aussehen lassen. In Ordnung? Es wird es beschneiden, um sicherzustellen, dass die Proportionen gleich sind. Aber so wird es funktionieren. Großartig. Jetzt ist das erledigt. Also das nächste, was Sie tun, ist, dass Sie einen anderen De-Block für diesen erstellen möchten Okay, also lassen Sie uns voran und erstellen Sie einen neuen Block. Also werde ich Land drücken und sagen, dass sie blockiert haben. In Ordnung? Dafür werde ich ihm keinen normalen Kurs geben. Wir werden geben, es sind andere Klasse, weil wir einige Leute hinzufügen und wir gehen aktualisieren Interaktionen auf Animationen zu diesem eso Lassen Sie uns tatsächlich voran gehen. Und damit das blockiert wird , , werde ich ihm einen Kurs geben, und ich werde diese Projektbeschreibung nennen. Ordnung? Projektbeschreibung. Und lassen Sie uns voran und beginnen, indem Sie links und rechts etwas Polsterung hinzufügen. Also haben wir 40 Pixel oben. Wir haben 32 links und rechts, also werde ich gehen und anfangen, indem ich 32 Pixel auf der linken Seite hinzufüge. 32 Plektren sind auf der rechten Seite. 40 Plektren sind oben und 40 Picks auf der rechten Seite. Okay, das ist das, was wir jetzt haben. Die nächste Sache ist, Frauen ein Hintergrundbild für die Hintergrundfarbe hinzugefügt haben. Also wähle ich den Sculler und wähle die Stufe eins aus. Also haben wir diese Farbe. Die nächste Sache wird hinzufügen, was unser H drei Element sein wird. Also werde ich die Kontrolle drücken. E. Es tut mir leid, dass ich gerade unterwegs bin. Wir wollen Überschrift verwenden, weil dies unser Titel aus dem Website-Titel des Projekts ist. Und das könnte für Seo-Zwecke wichtig sein. Also geh voran und sagte dies zu jedem drei und hier. Ich werde Rubrik 24 wählen. Richtig. Sieht toll aus. Jemand kopiere das auf deinen Kopf und stelle dir das vor. In Ordnung. Jetzt sehen wir den Abstand zwischen diesen beiden haben wir rund 18 Picks ist ich denke, sie sollten 16 sein. In Ordnung, also wirst du dich wirklich um 14 16 verändert. Und ah, Moment haben wir 16 Picks, ist unten, was perfekt ist. Und Fantastik auf einer Presse kontrolliert essen. In Ordnung. Und ich werde einen Absatz hinzufügen, und dieser Absatz wird unsere Beschreibung sein, also wird es 18 Pixel Absätze geben. Ich werde das kopieren und es stützen. Also hier drüben. Aber wir können tun, ist die Paragraph 18 Fixes Das sieht gut aus. Und die Schriftart ist auch die Telefonfarbe ist hell. Großartig. Also lassen Sie uns das auch hinzufügen. Also haben wir bereits die vorhandene Combo-Klasse, die wir so in der Applique verwendet haben. Das war's. Und das sieht jetzt ziemlich gut aus. Alles, was wir tun müssen, ist, gehen wir voran und wählen Sie diesen normalen Trapper oder acht, die das Bild enthält. Also im Grunde wähle ich diejenige aus, die das Bild und die Projektbeschreibung enthält. Ich werde das auswählen, Ordnung? Und ich werde ein wenig Polsterung am unteren Rand hinzufügen, was etwa 24 Pixel ist. Also werde ich jetzt eine untere Polsterung von 24 hinzufügen, denn das ist der normale Rapper. Wir können damit nicht vorsichtig sein, weil wir bereits zu viele Combo-Klassen haben. Also werde ich ein neues Kampfplus hinzufügen und diesen 24 Fixer nennen, ihn M für Marge blockieren. Also haben wir eine neue Combo-Klasse dafür, und ich möchte 24 Pixel von unten sagen. Alles klar, jetzt werde ich den normalen Rapper auswählen. Ich mache eine Kopie der Kontrolle, siehe Contrave, und das wird es runterbringen. Jetzt ist das einzige, was wir tun müssen, wählen Sie dieses Bild. Wir können auf das Zahnradsymbol klicken. Wir können wählen. Ersetzen Sie Bild und wir können unser Projekt Nummer zwei wählen, die hier drüben ist. Alles klar, in Ordnung. Und wir könnten einfach schnell weitermachen und die Details ändern. Kopiere das und zerstückelt. Jetzt habe ich mich nicht verändert. Ich weiß, dass ich die Texte von diesen nicht geändert habe, aber wenn ich, wenn Sie die neue Datei haben, werden Sie die neuen Beschreibungen haben, so dass Sie das in meiner Version beziehen können. Ich weiß nicht, es ist das Gleiche, also habe ich keine Änderungen vorgenommen. Alles klar, das sieht ziemlich gut aus. Richtig? Okay, also das nächste wird nicht Oh, hier haben wir diese zusätzliche Polsterung von extra Rand von 24 jetzt, wir wollen es nicht für diesen Block. In Ordnung? Wir wollten es nur dafür. Also werde ich kommen und den normalen Rapper für diesen Abschnitt auswählen, okay? Und ich werde das glauben, richtig? Weil wir es nicht für dieses Element wollen. Wir wollten nur für dieses Element, oder? Wir wollten dafür nur. Wir brauchen diese Unterteile nicht. Ich werde die Kampfklasse entfernen, die A Z sehen kann, dass es nur einen normalen Rapper gibt, oder? Also werde ich das ganz nicht normal schnell auswählen, was als eine wirkt, die diejenige ist, die auf der linken Seite ist. Ich werde das kopieren, und ich werde es schmecken, damit es nach rechts kommt. Okay, jetzt, sehr einfach. Was ich tun werde, ist, ich werde den Stop-normalen Rapper auswählen und löschen, so dass dieser Stern an den Anfang und will es verkaufen. Ich bin das gleiche Ersetzen-Bild, und ich werde gehen und Projekt Nummer drei wählen, OK? Und ich werde den Thetacticsroom nicht ändern. Kopieren Sie das und gehen Sie weiter und sauer das und ah, wir wachsen, wählen, kopieren und Tempo. Ich werde das Bild auch ändern, so dass Sie Symbol bekommen können, wählen, wählen, Bild ersetzen und wir gehen und wählen Projekt Nummer vier, die hier drüben ist. Also schauen wir uns das schnell an. Wie das auf mobilen Geräten auf anderen Breakpoints aussieht. So sieht es auf 1920 Picks ist und ich denke, das sieht ziemlich gut aus. Sieht nicht wirklich so schlimm aus. Ich mag es irgendwie. Großartig. Also gehen wir zurück zu einer 14 40. Ehrfürchtig. Jetzt haben wir noch eine, die die Aussicht ist. Alle Projekte Butter. Also werden wir tun, ist, dass ich einen neuen De Block erstelle, okay? Und ich werde diesen Knopf-Rapper nennen. Okay, also haben wir einen Knopf, Trapper. Was ich tun werde, ist in dieser Flasche. Lassen Sie es fallen. Ich werde sagen, warum nimmst du nicht 100% auf die Höhe, okay, dass du, dass du, der übrig ist. Alles klar, jetzt dauert es 100%. Aber das Problem ist, dass es 100% Rabatt auf die gesamte Seite nimmt, was nicht das ist, was wir wollen. Anstatt also 100% zu sagen, werde ich voran gehen und tatsächlich das Handbuch berechnen, das ich drücken werde , sind auf meiner Tastatur, um, ähm, die Ärzttür zu greifen um, ähm, , und ich werde schnell voran gehen und einfach versuchen, Finde die Höhe heraus. Also kamen wir auf 244 Plektren ist Höhe, also werde ich sagen, dieser Button Rapper. Ich wollte 244 Fuß x für Bilder sein, und wir haben etwas. Sieht so aus. Vielleicht willst du das etwas verkleinern. Alles klar, also sieht es perfekt aus. Ähm ja. In Ordnung. Ich finde, das sieht ziemlich gut aus. Nun, offensichtlich wird das Pixel perfekt sein, wenn ihr das Design habt. Aber im Moment muss ich sicherstellen, dass es pixelgenau ist. Ich habe ein paar Fehler gemacht, äh, als ich es entwarf. Wie auch immer, das ist unser Button Rapper. Nun, hier werde ich diesen Knopf hinzufügen, damit er in der Mitte ist, vom Bildschirm, in der Mitte, dieser Box, egal an Bord. So befindet sich in der neuen Komponente auf einem neuen Element Kragen Tasten auf einem Drücken Land und geben Sie in Taste. So haben Sie drei Arten von Waffen in normal, aber ein Optionsfeld auf der Farm Boden wird die normale wählen. Aber in diesem Fall, Ordnung. Und ich werde diese CD nennen, richtig? Das wird unser Name von unserem Grund sein , der zum Handeln gerufen wird. In Ordnung. Und was ich tun werde, ist, dass ich den unteren Trapper auswähle. Und da wir wollen, dass das untergeordnete Element in der Mitte ist, bin ich wie der Elternteil, und ich werde den Elternteil biegen, und ich werde sagen, unser Zeilenzentrum und rechtfertigen Mitte. Also, jetzt ist es in der Mitte von diesem Bereich. Okay, gehen wir weiter und schauen uns die Eigenschaften an. Also die 1. 1 ist, dass Lassen Sie uns auf die Vorderseite schauen. Es ist Knopf 18 Pixel und sein Boot. In Ordnung, also werde ich die Größe der Bücken erhöhen. 18 Bilder begannen zu kochen. Ah, die Schriftfarbe wird weiß sein, schwarz auf weiß, und wir wollen keinen Hintergrund. Also werde ich das entfernen und sagen, dass 20 die Kapazität oder der Alfa Null sein wird. Vielmehr werden wir einen Wert haben, und die Farbe wird Stufe eins sein. In Ordnung, lassen Sie mich einfach die Farbe überprüfen. Oh, es ist Blase. Also wählen wir das aus und ändern die Farbe von diesem in die lila Farbe, die wir haben. In Ordnung. Und nun schauen wir uns den Abstand an. Wenn wir also das Box-Element auswählen, können wir sehen, dass es 2032 Pixel links und rechts und 24 oben und unten hat. So werden wir hinzufügen, dass Polsterung hier auf einem wählen Sie die Stadt und hier statt 15 Analysten in der Studie, auch. Und das tun Sie und 24 und 24. Und jetzt können wir gehen und Ihnen alle Projekte speichern. Also werde ich darauf doppelklicken und diese Ansicht aufrufen. Alle Projekte, richtig? In Ordnung. Also, wenn Sie gehen und sich dies in einem anderen Breakpoint ansehen, lassen Sie uns in 19 Training. Sie können immer noch sehen, dass es irgendwie in der Mitte ist, und es sieht wirklich schön aus. es irgendwie in der Mitte ist, Oh, vielleicht gehen wir zu 38. 40 Richtig? Die Dinge sehen ziemlich gut aus, und ich mag es wirklich. Alles klar, das ist so ziemlich es für dieses Video. Im nächsten Video werden wir weitermachen und einige Hover-Interaktionen zu den Elementen hinzufügen. So wie ihr Jungs im nächsten Video 24. Animieren: Alles klar, in diesem Videowerden wir weitermachen und ein paar nette und lustige Interaktionen hinzufügen, um diese Elemente jetzt zu machen, es gibt so werden wir weitermachen und ein paar nette und lustige Interaktionen hinzufügen, um diese Elemente jetzt zu machen, ziemlich alles, was du tun kannst, aber ich werde dir nur ein paar davon zeigen, damit ihr Jungs ein Idee aus. Was ist es, wonach wir suchen? Also fangen wir jetzt mit der Stadt an. Die Animation, die wir machen werden, wird auf dem Hover State sein und nicht auf schweben, was eine Combo in der Nähe sein wird. Nun, hier sind ein paar Dinge, die ich zuerst möchte. Ich möchte die Farbe ändern, damit es Blase wird. Der nächste ist, ich möchte voran gehen und fügen Sie ein bisschen aus Schlagschatten wurden auf diesem Feld Schatten Einstellung aktiviert . Und hier werde ich die Richtung auf 1 80 setzen, damit der Schatten nach unten ist. Ich würde die Farbe ändern. Das ist eine Blase. In Ordnung. Tiere sagten, die Entfernung sei etwa 50 und vielleicht ist das zu viel. Vielleicht haben wir in Betracht gezogen 20 und das Blut können wir sagen, dass zu 60. Nun, das sieht ziemlich stark aus. Was wir also tun können, ist, dass wir zur Farbe gehen und die Deckkraft reduzieren können, um einige zu sagen, etwa 50% vielleicht sogar noch mehr, etwa 30%. Ich denke, das ist eine gute Nummer. Die andere Sache, die ich tun möchte, ist, dass ich es ein wenig nach oben bewegen möchte, wenn ich es drauf habe . Also, was wir tun können, ist hier haben wir die transformierten Eigenschaften Effekt. Locanda. Wir haben vier Eigenschaften bewegen, Geschicklichkeit, Drehen und Geschicklichkeit. Ich werde mich für Weiß entscheiden, was die weiße Position ist, und ich werde ihr eine negative Zahl geben, Negativ zu sagen, Fife. In Ordnung. Und das wird das nach oben bringen. Fünf Fixes, und das ist so ziemlich es. Also, was wir tun müssen, ist sicherzustellen, dass wir die Übergänge anwenden, die Lockerung ist, tun Sie die Farbe Box Schatten und Transformation. Also gehen wir zurück in den Nicht-Staat. Richtig? Und hier gehen wir zum Übergang wird beginnen, indem wir die Transformation wählen. Ordnung, als ich das auf 3 50 Millisekunden sagte, werden wir sagen, er ist vor Gericht und sie werden die nächste auswählen, die Hintergrundfarbe ist, die Hintergrundfarbe setzt dies auf 3 50 und Lockerung ist werden Diese sind Gericht. Und das nächste wird, ähm, ähm, der Kastenschatten sein. In Ordnung, also werde ich das auch auf 3 50 setzen und die Zehe zu lockern ist unser Hof. Also, wenn Sie voran gehen und einen Blick auf die meisten schweben Oh, nein. Also, wenn Sie jetzt gehen und einen Blick auf die Interaktion werfen, können wir sehen, dass es ziemlich gut aussieht, oder? Sieht nett aus. Ja. Großartig. Jetzt werde ich weitermachen und ein paar Interaktionen hinzufügen. Führen Sie diesen Abschnitt auch durch. In Ordnung, machen Sie diese Abschnitte. Also machen wir das jetzt. Eine Sache, die ich vergessen habe, ist, dass ich jedes dieser Elemente verlinkt machen wollte, weil Moment sehen können, Sie im Moment sehen können,dass normaler Rapper wie dieser ein div-Block ist, was bedeutet, dass ich jetzt nicht wirklich darauf klicken kann. Das wird ein Problem für mich sein, weil ich auf jeden dieser Aktiven klicken möchte. Also, was ich tun werde, ist ein Mexikaner oder Rechtsklick, und ich werde, sagen wir, diese Umwandlung in Link-Block ändern sagen wir, . , jetzt Also, jetztist dieser normale Rapper jetzt eigentlich ein Linkblock, auf den ich klicken kann, richtig ist das Gleiche. Wir sind hier, wir wählen den normalen Rapper aus. Ich werde mit der rechten Maustaste klicken, und ich werde sagen, in Link Block konvertieren. Ok. Unter der gleichen Sache hier drüben. Ich will sagen, normaler Rapper. Ich werde gerne klicken und ich muss sagen, konvertierte Link-Block auf der gleichen Sache oder hier Verkauf der Rapper. Okay, richtig. Klicken Sie auf und sagen Sie in Link Block konvertieren. Großartig. Was ich jetzt tun möchte, ist, dass ich den Namen ändern möchte. Ich möchte es irgendwie entfernen und ihm eine andere Klasse geben, weil nur diese vier Elemente haben, die eine bestimmte Interaktion haben werden. Ich mache es basierend auf der Klasse. Also jede Klasse, jedes Element, das eine bestimmte Klasse hat, wird auf Animation. Und wir haben diesen Klasse normalen Rapper an so vielen verschiedenen Orten verwendet, also möchte ich nicht all diese verschiedenen Elemente beeinflussen. Jemand entfernt das und ich erstelle eine brandneue Klassennummer. Rufen Sie dieses Projekt Block unser Projekt Rapper. Ich denke, das ist ein guter Name. Es wird also Project-Rapper sein. In Ordnung? Dieser wird auch Projekt-Crapper sein. Okay, hier. Was wir getan haben, ist, dass wir eine Kampfklasse haben, also werde ich beide löschen. Ich möchte sehen, wie Project es fallen lässt und ich werde eine neue Kampfklasse erstellen, und ich werde diesen 24 Fixer unten unterstrichen M für Marge nennen. Und ich werde 24 Fixes sagen, oder hier, also haben wir diese 24 Plektren, und die andere Sache, die ich tun will, ist, diesen einen, den normalen Rapper auszuwählen . Holen Sie es von diesem Aufruf dieses Projekt Rapper und war 24 Pixel Teil des Marsches. Im Moment wollen sie tun, ist, dass Sie sehen können, dass wir diese Art von zugrunde liegenden Recht haben. Und wenn man sich den eigentlichen Text rechts anschaut, tun wir es nicht. Wir haben die Art von Dekoration, und wenn Sie darauf klicken, können Sie sagen, dass es sagt, dass Wert von allen Links geerbt wird. Wenn ich das Kontrollkästchen deaktiviere, wird es immer noch nicht entfernt. Wenn ich das Kontrollkästchen deaktiviere, Ordnung? Denn was passiert ist, ist, dass das eigentlich nicht davon kommt. Wenn ich den Link auswähle, blockiere unser religiöses Projekt Rapper, der diese Unterstreichung hat und das über die Chili-Element weitergeleitet wird , was der Text ist. Also werde ich zum Elternteil selbst gehen, das ist der Projekt-Rapper, und ich werde nicht abgecheckt. Und jetzt geht das weiter und entfernt, die auf der Leitung sind, jeden anderen Ort, der uns wieder auf 14 setzen wird . 40 Pixel. Ich denke, eine Sache, die ich wirklich tun möchte, ist, dass ich denke, ich würde schon die Größe davon. Ich fühle, dass 620 Pixel ziemlich lang sind. Also machen wir voran und ändern das. Tun Sie so etwas wie 400. Ich denke, das ist einfacher für das Eis zu scannen und anzuschauen. Ich denke, ja, das ist eine bessere Nummer. In Ordnung. Könnte So haben Sie keine, Lassen Sie uns voran und fügen Sie die Interaktion. Also werden wir anfangen, indem wir den Projekt-Rapper auswählen, denn wenn ich auf dem Projekt-Rapper schwebe , möchte ich, dass einige Interaktionsspitzen passieren. Ich gehe zu den Interaktions-Sachen und klicke auf das Element größer und ich werde die meisten Hover wählen. Also müssen wir definieren, was passiert, wenn wir auf Hover wählen. Und was passiert, wenn er kaut auf Hover out Umfrage wählen, was passiert auf Hover. Ich werde wirklich eine Animation in neuen Animationen starten, und ich werde dieses Projekt schweben nennen. Okay, eine Sache, die ich tue, ist, dass ich diesen ganzen Block skalieren möchte. Das wird Nummer eins sein. Und die Zyklusinteraktion ist, dass ich die Farbe ändern möchte. Das ist Nummer zwei. Und Nummer drei ist, dass ich das etwas nach rechts bewegen möchte. In Ordnung? Nur um, wie, einen schönen lustigen Effekt zu geben wie, . Na gut, also gehen wir weiter und machen das. Es wird beginnen, indem wir die Immobilie wählen, die wir umziehen wollen. Wir wollen also skalieren, weil wir das Projekt skalieren wollen. Rapper. Okay, jetzt, hier haben wir drei Eigenschaften Auswahl, Elementklasse oder Interaktion in diesem Fall ausgelöst. Die Klasse und der Interaktion-Trigger sind ziemlich dasselbe, weil der Interaktion-Trigger Project Rapper ist und die Klasse auch Projekt Rapper ist. Weil wir möchten, dass diese Animation auch auf alle anderen drei Klassen angewendet wird. Ok. Und wir werden Interaktionsauslöser wählen. Ok. Und was ich tun werde, ist, dass ich die Skala um 1,2 erhöhen werde. Okay, jetzt, jetzt, Skala ist offensichtlich in der Tat, dass wir von einem. Es fängt also nicht mit Null an. Es fängt nicht an. Es fixiert sich in Form von für Port positiv. Also ist eins unser Normales, und 1.2 ist, weißt du, 2% größer als das, was davon ist. Also lassen wir das so, wie es ist. Das nächste, was wir tun, ist, gehen Sie voran und wählen Sie Textfarbe. Und jetzt wollen wir nicht die Textfarbe aus dem Projekt von Rapper ändern, weil es keinen Text gibt . Wir wollen schreiben, wie Veränderung, Ziel jeden, um Rubrik 24 zu wählen. Dies ist das mobile Dashboard. Jetzt wollen wir weitermachen und Effektklasse sagen, okay? Und Sie wollen auch sagen, Effekt nur Kinder mit dieser Klasse. Was? Ich möchte sagen, dass, wenn das zum Auslöser wird , wir keine neue Animation erstellen müssen. Wir können die gleiche Animation darauf anwenden, und es wird weitergehen und diese Überschrift animieren, weil es ein Kind von diesem bestimmten Element ist , das auf schwebt. Richtig, also sagen wir nur Chillin mit dieser Klasse, okay? Und jetzt müssen wir Farbe definieren. Also werde ich diese Sorte von einer Cyanfarbe wählen, die wir haben. Okay, das kannst du hier drüben sehen. Der nächste Mörder geht voran und entscheidet sich für den Umzug. Ok. Und jetzt werde ich weitermachen, richtig? Klicken Sie auf, ändern Sie das Ziel und wählen Sie es zu diesem. Und hier in Bewegung, ich werde es einfach um ein paar Pixel über das X bewegen. Also lassen Sie uns sagen, einfach kaufen 10 Picks ist in Ordnung? Und jetzt, was passieren wird, ist, dass, wenn wir das spielen, du siehst, dass sie alle drei verschiedene Male passiert sind. Ok? Aber wir wollen, dass sie alle gleichzeitig passieren müssen. Also, was ich tun werde, wird dieses auswählen, das du gezogen haben hättest und es mit dem kombinieren können. Wählen Sie dieses aus und kombinieren Sie es, um es anzugehen. Jetzt können Sie auch sehen, dass Sie jedem der Elemente ein tödliches hinzufügen können. Und Sie haben auch eine Option, bei der Sie mit beginnen oder nach einer vorherigen Aktion beginnen können. In diesem Fall möchten wir, dass dies mit der vorherigen Aktion beginnt. Wir wollten auch, dass dies mit der vorherigen Aktion beginnt und wir wollen nicht zu spät geführt. Okay, Also, wenn ich nach vorheriger Aktion sage, können Sie sehen, dass es dies irgendwie nach draußen schiebt, weil dies nach der vorherigen Aktion beginnt und nicht mit der vorherigen Aktion. Also wollen wir das mit vorheriger Aktion schicken, Ordnung? Und Sie können alle diese drei auswählen, indem Sie die Schicht gedrückt halten, und dann können wir zur Lockerung kommen und Sie können sagen, er ist vor Gericht. Ich werde nicht wollen, dass Zehe diese Zedernspitze vierte Sekunden machen. Jetzt schauen wir uns mal an. Wenn ich also schwebe, können Sie sehen, dass es skaliert und die Farbe ändert. Aber wenn ein schweben, passiert nichts wirklich. Okay, also müssen wir das auch definieren. Also hier haben wir das Schweben definiert. Ich werde wählen, schwebte heraus, und ich werde sagen, es beginnt in der Animation und wir haben bereits dieses Projekt abgedeckt. Was ich tun werde, ist, dass ich hierher komme und das dupliziere, okay? Weil ich nicht voran gehen und neu erstellen und anfangen will. Ich bin in der Lage, das zu duplizieren. Ich werde die 2. 1 so bewohnen auswählen. Verkaufst du die 2. 1 und auf Schweben in. Sie sagten „Zustimmen“. 1. 1 Okay, ich möchte das auswählen. Und ich habe den Namen geändert, nur um sicherzustellen, dass wir nicht verwirrt werden. Ich möchte jedoch sagen, aus OK, aus OK, und jetzt lassen Sie uns die Werte zurücksenden. Zwei des Originals. Das wird also eins sein. Die Textfarbe wird weiß sein, und die Bewegung wird Null sein. Okay, also los gehst du. Wenn Sie also einen Blick richtig werfen, können Sie sehen, dass wir diese schöne Angewohnheits-Animation haben und, weißt du , deshalb funktioniert es jetzt nicht für die anderen. Alles klar, denn ich bin nicht wirklich definiert. Jetzt. Wir müssen nicht voran gehen und es für jeden von diesen schaffen. Alles, was wir tun müssen, ist, wenn Sie fortfahren und den übergeordneten Projekt-Rapper auswählen. Okay, wir können hier runter zu den Triggereinstellungen kommen und nur auf das ausgewählte Element auslösen , richtig? Das ist es, was passiert. Wir wollen sagen, die Klasse auslösen. Und was ist ein Klassenprojekt-Rapper? Okay, jetzt wird jedes Element, das die Klasse Project Rapper hat, die Animation starten . Also, wenn ich es darauf habe, funktioniert das hier. Das funktioniert dasselbe hier drüben, richtig? Ziemlich cool. Und das ist sehr viel darüber, wie Sie diese schöne Spaß-Interaktion kreieren. Ich hoffe, euch gefällt es. Und im nächsten Video würde nicht voran gehen und wirklich nächsten Abschnitt. Also sehe ich euch im nächsten Video. 25. Den Abschnitt Reaktionsweise Projekte machen: Na gut, Jungs. Also Industrie, wir werden voran gehen und machen dies ein reaktionsfähiges Es wäre super schnell, super einfach und super Fonds. Also lasst uns weitermachen und das tun. Ich werde zum Tablet-Pakpunkt gehen, und dann denkt die Tabletten-Pakenpunkte scheinen ein bisschen vollgestopft zu sein. Der Vater wird das tun, ist, dass ich das auf 80 oben und 80 unten setzen werde. Keine Änderungen auf 40 links und 40 auf der rechten Seite, oder? Und 40 und richtig, das ist es, was wir wollen. Nun, das sieht gut aus, aber ich denke, es wäre meiner Meinung nach viel besser, wenn er diese getrennt herausstellt. Also, was ich tun werde, ist, dass ich voran gehe und wir haben den Rapper, richtig? Und die schnelle ist kein großartiges Ich werde voran gehen und zwei Spalten entfernen, so dass es eine Spalte wird und jetzt sieht das viel besser aus. Also wissen Sie, wir haben eine gute Unterscheidungs- und Differenzierungstheorie, die wir tun können, ist, wenn Sie voran gehen und den Trapper auswählen, können wir voran gehen und die Wachstumslücke auf 48 oder 32 erhöhen. Was auch immer du denkst. Sieht gut aus. Okay, ähm, ich glaube nicht, dass wir das getan haben. Ja, 48. Das gilt nur für das. Aber wir würden es auch hier erhöhen wollen, denn jetzt, hier im Project Rapper, haben wir Redakteur 24. Wir können das nicht auf 40 erhöhen wollen. Es und, äh, das sieht ziemlich gut aus. Und ich denke, das ist ziemlich richtig. Und, ah, lasst uns zum Landschaftsbruchpunkt in der Landschaftspause gehen, wenn wir irgendwie diese 2 42 64 auf der Oberseite, 64 auf derUnterseite und 20 auf der linken und 20 auf der rechten Seite radios wollen diese 2 42 64 auf der Oberseite, 64 auf der . Richtig? Andi? Ja, das sieht ziemlich gut aus. In Ordnung, das ist also sehr viel, wie man das anspricht. Und wie ihr Jungs im nächsten Video 26. Grundlagen von Bildauflösungen: gerade jetzt in diesem Besitzer, erklären Sie ein einfaches Konzept in Bezug auf Bildauflösungen. In Ordnung, jetzt, achten Sie darauf, denn das ist ein sehr wichtiges Konzept, das zu verstehen ist. Sie haben also keinen Bildschirm, der 1920 mal 10 80 Pixel auf diesem ist so ziemlich das, was Sie auf einem Windows-Laptop bekommen. Und die meisten Bildschirme sind nicht Netzhaut. Sie erhalten Monitore und Windows-Laptops, die einen Retina-Bildschirm haben. Aber nehmen wir ah, Situation, wo die meisten der Laptop, die da draußen sind, keine Rückkehr sind verschoben oder ein nicht-Retina-Bildschirm. Nun, hier habe ich ein Bild. Und jetzt ist die Größe dieses Rahmens 1920 von Kennedy. Und ich habe hier drüben ein Bild, das 1002 100 mal 600 ist. Gerade jetzt, so wird dieses Bild auf diesem Display aussehen. Okay, was ist, wenn ich das gleiche Bild auf einem Mac-Buch-Bildschirm betrachte? Alles klar, wenn ich nach links hierher komme, sehen wir, dass wir einen Mac Book Pro haben. Lassen Sie mich einfach zur Seite gehen. In Ordnung? Der Mac-Buch-Bildschirm hat tatsächlich eine Seite von 14 40 von 909 100 ist die Höhe, aber die Anzahl der Bilder ist tatsächlich doppelt richtig. Das liegt daran, dass es unser Retina-Display genannt wird, was bedeutet, dass es die Anzahl der Bilder x hat. Nun, obwohl die Größe kleiner ist, wissen Sie, sogar die 14 40 ist kleiner als 1920. Die Anzahl der Pixel beträgt zweimal. Also, wenn wir dieses Bild tatsächlich nehmen und es auf diesem betrachten, wird das tatsächlich die Größe davon sein. Es wird sehr klein sein. Es wird nicht die gleiche Größe von 1200 x 600 sein, weil diese zwei Mal die Anzahl von Bildern haben . Dies wird tatsächlich die Hälfte der Größe sein, die 600 mal 300 ist das Original 1002 100 mal 600. Aber wenn du weitermachst und wir das auf diese Größe skalierst , dehnen wir die Bilder aus, okay? Denn in Wirklichkeit kann es nur diese vielen Picks nehmen, weil das ist, wie viel ist, dass. Die Anzahl der Pixel ist tatsächlich doppelt. Wenn ihr also den Punkt versteht, also wenn ich tatsächlich voran gehe und ein Kunstbrett mache, das so groß ist, wie ihr wisst, das 28 80 mal 1800 ist, das alle Bilder hat, dann wird dieses Bild die gleiche Größe, die 1200 mal 600 ist. Ordnung. Retina-Displays haben immer die zweifache Anzahl der Bilder. Und das ist der Grund, warum jedes Bild, das auf einem Windows-Display ist, wird die Hälfte der Größe auf einem MacBook. Andere Retina-Anzeige, richtig? Wenn Sie also immer Bilder hinzufügen, möchten Sie sicherstellen, dass Sie H I D P I aktivieren , so dass Rep Wurf weiß, dass dies die Hälfte der Größe auf Retina-Display sein soll. Am Ende ist die unterste Zeile jedes Mal, wenn Sie ein Bild hinzufügen, stellen Sie sicher, dass das Bild H I D P. I rechts ist D P. I . Und wenn es nicht gut funktioniert oder wenn es nicht gut aussieht, bedeutet das wahrscheinlich, dass Ihr Bild nicht groß genug ist. Ihr Bild ist nicht, hat nicht eine gute Auflösung genug, oder? Also H I V p. Ich habe es für jedes Bild eingeschaltet, so dass es so ziemlich über das, was ich über die Bildauflösung erklären musste. Und ich sehe euch im nächsten Video 27. Den the erstellen: Na gut, Leute. Also in dieser Stadt werden wir weitermachen und den Dribbelabschnitt neu erstellen. Aber wir haben auch diesen Instagram-Abschnitt, und das einzige, was wir tun müssen, ist nur eine Kopie zu erstellen, die darauf basiert und es sollte funktionieren. Also können wir das schnell beenden und dann zum Dribble-Sektion gehen, wird eine sehr lustige Interaktion sein. Und ich werde Ihnen zeigen, wie man das macht, weil wir irgendwie das, was wir dieses Bild scrollen wollten , eine sehr schöne Spaß-Interaktion haben wird, während wir die Seite scrollen. Also hier bin ich im Workflow. Und natürlich natürlich bin ich offensichtlich über Wasser. Und was wir tun, ist, dass ich anfangen werde, diesen Abschnitt zu duplizieren, also stellen Sie sicher, zuerst, fügen wir das zu 14 hinzu. 40 in Ordnung? Und stellen Sie sicher, dass wir den gesamten Mittelteil auswählen. Ich werde diesen Abschnitt kopieren, und ich werde hier rüber kommen, alles schließen und ah, dass ich weitermachen würde und es einfach aufbauen würde. Und dann werde ich diesen Mittelteil nehmen und ihn irgendwie nach unten bewegen. Also haben wir einen hier drüben, und wir werden einfach den Text und die Bilder ersetzen. Also werde ich sagen, ähm in Ordnung, ich werde sagen, kopieren Sie diesen Doppelklick auf dieses Instagram und ich möchte das kopieren und es beast . In Ordnung. Und hier sagen wir Folgt mir auf Instagram. Also werde ich sagen, Folgt mir auf I G okay. Und wir werden dieses Bild auch ändern. Nun, die Sache ist, was passieren wird, ist, dass ich dir zeige, was passieren wird, wenn du das Bild änderst, richtig? Also kommen sie hier rüber zur Fotografie Philosophie, und ich wähle Bild ändern auf ich gehe voran und ändere das Bild zu diesem, das ist das, was wir wollen. Sie können sehen, dass es sich auch hier ändert, weil sie technisch gesehen beide die gleiche Klasse haben. Und das Hintergrundbild ist eine Eigenschaft aus. Das Also eher werde ich Kontrolle Z drücken, um es zurückzusetzen. Ok? Und das werde ich eigentlich voran gehen und eine Combo-Klasse hinzufügen, und ich werde sagen, dieses Instagram in Ordnung? Oder Sie könnten voran gehen und selbst eine brandneue Klasse erstellen. In Ordnung? Aber ich werde einfach weitermachen und Atacama Kurs, denn es ist ein bisschen einfacher, okay? Und jetzt kann ich das ändern, und wir können das wählen, okay? Und ich werde mich entscheiden, stürzen, richtig, weil ich diesen Teil nicht sehen will. Wenn wir also wieder nach oben scrollen, können wir sehen, dass dies so bleibt, wie es ist. Die andere Sache ist, dass dies eine andere Farbe hat. Also werde ich das Farbgericht kopieren, das kopieren und hier und hier rüber kommen. Wir werden eine neue Klasse hinzufügen, und ich werde das Instagram nennen, weil wir die Werte wieder ändern. Also werde ich voran gehen und das Tempo machen. Okay, sie gehen. Nicht. Nun, lassen Sie uns voran und erstellen Sie die nächsten Mittagessen sind dribble Abschnitt. Also werde ich beginnen, indem ich den Körper und eine Presse gesteuert e. Ich möchte Abschnitt sagen. Okay, wir haben also, ich will keine Bilder oben, und wir haben ungefähr 30 Bilder unten. Okay, also werde ich diesen Dribble-Sektion nennen, Okay, also wird es 20 Fixes oben geben und sich irgendwelche Pixel auf der Unterseite fragen. Alles klar, großartig. Ich füge hinzu, dass ein Rapper ein De-Block sagt, was unser Schneller sein wird. Okay, also möchte ich einen Rapper sagen, und wir wissen, was zu tun ist. Nun ist das eigentlich, wenn man sich das anschaut, hat das tatsächlich einen anderen Witz. Alles klar, das ist ein kleiner Behälter, während das nicht in Ordnung ist. Nun, das ist die reguläre, die sich auf 1920 72 ausdehnt. Aber das ist ein Abschnitt, den ich sagen und definieren möchte, dass ich möchte, dass dieser Abschnitt die ganze Zeit in der Mitte sein soll. Ich muss nicht expandieren. Ich wollte diese Größe haben. Also, was ist die Größe? Schauen wir es uns mal an. Das sind eigentlich 1076 Sechs, und ich werde eigentlich voran gehen und schnappen, weißt du, das Colorado hier, und ich werde sagen, dribble. Ich werde mit Ok sehen, was war der Wert? Es war 1076 C ein Samen oder 76 Pixel. In Ordnung. Großartig. Was es bedeutet, ist, dass ich diesen Rapper duplizieren werde, okay? Okay. Ich werde diese Rapper-Version 2 anrufen, okay? Und das wird Maxwell ab 1076 sein. Nun, unabhängig von der Bildschirmgröße, wird dies 1076 Nun, das ist eine Design-Entscheidung, die ich getroffen habe, und ich habe jemanden gewählt, Gehen Sie voran und tun Sie dies. Also, jetzt werden wir diese drei Elemente haben, und ich glaube, wir haben das schon irgendwo hier drüben. Also denke ich, ich könnte weitermachen und einfach all diese Informationen kopieren. Also fangen wir an, indem wir einen Block hinzufügen, und das wird für unseren Container sein. Und ich werde das normal nennen. Und hier werden wir beginnen, indem wir unseren Text sind Überschrift Ah, Absatz. Und wissen Sie, der Animator-Link unten begann, indem Sie die Überschrift hinzufügen, die dies sein wird, gehen zu OK. Und ich möchte sagen, dass unsere 55 Picks in Ordnung ist, und wir kopieren das einfach und nennen das mein Dribble. Die nächste wird diese Absätze und Repress Kontrolle E Suche nach einem Absatz sein. In Ordnung. Und ich werde das und die Grundlage hier drüben kopieren. Und das ist 18 Picks ist, so können wir die 18 Pixel Absatzklasse hinzufügen. Also Absatz 18 wählt uns in Ordnung. Und die andere Sache, die wir tun wollen, ist, dass wir einen Abstand von 24 Pixel auf der Unterseite haben wollen . Also wählen Sie die Überschrift aus, und wir werden diese Combo-Klasse hinzufügen, die wir bereits haben. Schöpfer. Das wird also das runterziehen. Wir haben auch diese, die 18 Pixel und leicht ist. Also werde ich das Licht hinzufügen. Tolle Kombiklasse. Das sieht gut aus. Und wir haben auch, wie, 40 Picks reitet am Rand des Bodens. Also, um dies zu wählen und wir werden dieses Mal eine neue Klasse hinzufügen und wir nennen diese 40 fixer unteren Rand. Alles klar, ich bin okay, und wir werden das zu 40. Großartig. Und jetzt brauchen wir diese animierten Schaltflächen. Also werde ich einfach weitermachen und das kopieren und es auf, ich werde sagen, folgen Sie mir auf gefahren. Okay, jetzt können wir gar nichts sehen, weißt du, weil es auf einer schwarzen Oberfläche ist. Also werde ich weitermachen und eine neue Kampfklasse hinzufügen und das weiß nennen, Ordnung, denn wir wollen, dass das weiß ist, also gehen wir weiter und ändern einfach die Farbe, die weiß ist, okay? Und das sollte gut genug sein. Alles klar, diese Bücher. Nun, wenn Sie hier rüber schauen, dass das eigentlich irgendwie in zwei Zeilen aufgeteilt ist, damit ich vorwärts und hier rüber gehen kann , kann ich das einfach in eine zweite Zeile bringen, okay? Und das sieht ziemlich gut aus. Großartig. Wir sind erst jetzt hier. Die nächste Sache ist, diesen Abschnitt zu erstellen. Okay, jetzt lass mich erklären, was hier passieren wird. Wir haben ein Bild. In Ordnung. Sie können sehen, dass dies ein Bild ist. Und wir haben auch diese Art aus. Du weißt schon, wie diese Browser-Illustration. Im Moment bauen wir das von Grund auf in einer Waffe. Oh, okay. Also, wie sollen wir es jetzt machen? Keine Bedingung, die ich will. Ah, Erwähnung ist über die Höhe. Nun, das sind 6 40 Plektren, also werde ich voran gehen und hier in der mit. Jetzt können Sie tatsächlich hinzufügen Ah, Höhe basierend auf dem Zustand wie 77 TV, Hecke oder ein TV Köpfe sind 50. Wir schlüpfen. Aber in diesem Fall werde ich so etwas wählen und wissen Sie? Ah, fester Wert ein absoluter Wert. Und ich werde das kopieren, und ich werde sagen, 6 40 Plektren ist, dass ich das zur Höhe machen werde. Okay, das ist das, was wir jetzt dafür abschleppen werden. Wir werden voran gehen und schnell diesen internen Workflow erstellen. Wir können alle diese drei Knöpfe hinzufügen, all diese drei Darts. Es wird lustig. Also lasst uns weitermachen und das tun, okay? Wenn du also anfängst, haben wir schon ein normales Kaninchen. Ich werde einen neuen De-Block erstellen, okay? Und das wird auch unser Wrapper-Film sein. Okay, jetzt, wir wollen hier ein paar Abstände hinzufügen, das sind 120 Fixes. Also werde ich diese normale Schnelligkeit auswählen, die wir haben. Und in der ich werde in der neuen Klasse erstellen und ich werde diese 60 Pixel unteren Unterstrich M für Marge nennen sind Nun, es war 1 20 Okay, also lasst uns das 1 20 machen und dann gehen wir voran und geben einen unteren Rand von 120. Okay, also haben wir das und ich werde jetzt erschaffen und jetzt haben wir den zweiten normalen Rapper, den wir haben. Also haben wir einen Abschnitt, in dem wir Rapper haben, was dafür ist. Und dann haben wir einen anderen Rapper hier drüben bekommen , der eine Rapperspitze ist und diese Illustration halten wird, also fangen wir damit an, das zu schaffen. Nun, das ist ein sehr einfacher Block, und es hat eine Höhe von 37 Pixel. Also werde ich einen neuen De Block erstellen, und ich werde diese Browserleiste aufrufen, okay? Und ich werde die Höhe auf 37 Fixes am Tag setzen. Wir werden die Hintergrundfarbe in eins ändern, okay? Und wir fügen jetzt auch Radius mit den neuesten. Was ich tun kann, ist, dass ich auf diese Knopfspitze klicken kann einzeln Radius oben links und oben hinzufügen . Richtig. Okay. Also, Messerwählerschaft, wir haben diese schöne Umgebung, die wirklich schön aussieht. Und wir haben hinzugefügt, dass hier auch acht Pixel abgerundet werden. Das ist also ziemlich gut. Und jetzt fügen Sie diese drei Punkte hinzu, also werde ich einen neuen Tagesblock erstellen, richtig? Und diese Sackgasse, wir werden das Punkte nennen. Ok? Okay. Und hier ist die dunkle Größe 12 Pixel mal 12 Pixel. Also werde ich die Breite und die Höhe gehen und sagte, dass die 12 Pixel von 12 Pixel und ich werde in den Radius gehen und, wie, eine große Zahl von 100 gegeben wie, . So wird es komplett herum und wir werden das Farblicht benutzen. Großartig. Jemand gehen in den Hintergrund und gierig int und dass wir die Farbe wählen könnten. Oh. Oh, tut mir leid. Wir werden diese Farbe wählen, und das wird großartig sein. Okay, also gehen wir. Alles klar, jetzt dafür. Aber ich war darüber, was ich tun möchte, ist, dass ich dies zu einem Flex-Element machen möchte, und ich möchte sagen, Flex-Center in Ordnung. Und rechtfertigen Sie links, rechts, damit wir alles in der Mitte haben. Jetzt gibt es ein wenig Abstand auf der linken Seite, was etwa 16 Fixes ist. Also werde ich der Browserleiste eine innere Polsterung von 16 Pixeln geben, so dass die Ärzte hier drüben und auch der Punkt einen Abstand von sechs Bildern hat, also werde ich einen rechten Seitenrand von sechs Pixeln geben, und ich möchte das duplizieren Punkt zweimal. Jetzt wird es so aussehen und jetzt haben wir diesen Abschnitt perfekt gemacht. Als Nächstes. Wir wollen diesen Tag Block erstellen, und dieser Block wird unser Container für das Bild sein. Also, was wir tun werden, wird eine neue Blöcke erstellen. Ich nenne das den Block, okay? Und das wollten wir wieder im Rapper sein. Also melden wir es, stellen sicher, dass es im Rapper ist. In Ordnung, also werden wir das in Sichtweite drängen. Jetzt ist er in den Rapper getreten. Nun, das wird unser Dribbelbild sein. Ok? Und jetzt ist die Höhe 6 40 Picks ist also gehen wir weiter auf die Höhe und sagen, 6 40 Picks ist und das ist, was wir jetzt haben. Ich will weitermachen und das Bild von diesem Doppelschuss wichtig. Wenn Sie also zu unserem Asset-Panel gehen, haben wir unser Image, das unser Dribble-Image ist. Jetzt gibt es zwei Möglichkeiten. Entweder können wir diese als Bildelement importieren könnte es bereits als Hintergrundbild verwenden. Was ich tun werde, ist, ich werde voran gehen und darauf klicken, und ich werde sagen, ein Hintergrundbild wählen. Also, wenn Sie sagen, wählen Sie Bild, und ich werde Ah wählen, das Dribble-Bild, das wir haben. In Ordnung. Und ich werde voran gehen und sagen: Nicht stylen. Okay, weiter. Ich will doppelt sagen. Ok, großartig. Lassen Sie uns nun einen Blick werfen und sehen, wie das funktioniert. In Ordnung? Wenn Sie also scrollen, sieht es gut aus. Sieht perfekt aus. Es sieht ganz normal aus, in Ordnung. Es sieht überhaupt nicht anders aus. Eine Sache, die ich tun möchte, ist wählen Sie diese Unterseite des unteren Doppelbildes getan Block. Und was ich tun will, ist, dass ich voran gehe und eine untere Rundung am unteren Ende geben werde. Also machen Sie dies, wie, acht Pixel und acht Pixel auf der Unterseite. Also, weißt du, es sind irgendwie 400. Schön. Okay. Und jetzt ist hier ein cooler Trick. Was wir tun werden, ist hier. Wir haben eine Option, die fest sagt. Alles klar, ich klicke darauf, okay? Und wenn ich das mache, wird es passieren, dass du sehen kannst, dass es diesen Effekt gibt. Alles klar, Street, es wird repariert. In Ordnung. Und was wir tun wollen, ist sicherzustellen, dass wir das tatsächlich zu 40 40 sagen und wir können tatsächlich gehen und sagen, dass dies oben ist, so dass es sich an der Spitze ausrichtet. OK, aber das einzige Problem ist, dass es hier links und rechts beschnitten wird, weil es auf die gesamte Seite fixiert wird. Und das ändert sich auch, abhängig von der Bildschirmgröße. Also, weißt du, das wird auch ein Problem sein. Also, wenn ich das zu 1920 sagte, wird es ein bisschen anders aussehen. Es wird ein wenig anders aussehen, damit wir es reparieren können, ist das, was wir tun können, hier drüben . Anstatt Tarnung zu sagen, werde ich Sitte sagen, und ich gebe ihm einen festen Wert. In diesem Fall ist es 1076, was der Wert ist. Und ich werde sagen, ich will, dass du 1076 Picks ist weiß, okay? Und ich werde oben sagen, damit es irgendwie nach oben ausgerichtet ist, oder wir können Mitte oder Spitze wählen, was immer Sie wollen, ? In diesem Fall können wir es auf Mitte setzen, wenn Sie wollen. Das sollte okay sein. Und jetzt, wenn Sie einen Blick werfen, Ordnung. Sieht viel besser aus. Es sieht wirklich cool und interessant aus. Ok? Und die andere Sache ist, dass, wenn Sie voran gehen und die Größe ändern, sagen wir, 1920, es ist irgendwie gehen, sich an ein paar, 76 Pixel anzupassen . Ordnung, es wird sich auf 1076 ändern, wenn Sie wahrscheinlich 12 gehen. 40 Sie können sehen, dass es sich irgendwie anpasst, dass 1076 Pixel mit allem in Ordnung, und das ist fantastisch. Großartig. Also, das ist so ziemlich es, wie wir diese sehr lustige Animation erstellen, oder? Und im nächsten Video machen wir das zu einem Sponsor für andere Breakpoints. Also, ihr seid es im nächsten Video. 28. Den the Making: Also in diesem Video werden wir weitermachen und das reaktionsschnell machen. Also lassen Sie uns zum Tablet-Pakpunkt auf in der Tablet-Aufnahme gehen, können wir sehen, dass die Dinge aus. Also fangen wir an, indem wir den Dribble-Sektion auswählen. Ich werde die Höhe davon auf 80 Pixel auf den oberen 80 Pixeln unten reduzieren und auch Polsterung auf der linken Seite hinzufügen, was etwa 40 ist. Picks ist und 40 Picks ist jetzt richtig. Wir sehen ein kleines Problem ist, dass Sie wissen, wenn Sie das erhöhen, sind wir freundlich. Du weißt schon, das jetzt zu ändern. Wir haben tatsächlich einen Wert definiert, wissen Sie, 1076, aber wissen Sie, 1076, aber auf Tablet-Punktenscheinen sie ein wenig anders zu sein. auf Tablet-Punkten Also denke ich, eine Sache, die wir tun könnten, ist, dass es Andi enthält. Ich denke, was das tun wird, ist nett. Ich meine, enthalten funktioniert nicht wirklich wieder. Wir wollen Deckung wählen, und ich denke, Cover macht einen ziemlich anständigen Job. Ich würde nicht sagen, dass es die beste ist, aber ich denke, das ist die beste Alternative, die wir haben. Und vielleicht denke ich, für Tablet könnten wir die Höhe davon nutzen, weil dies zu viel sein könnte . Also von Auswahl, wenn Sie es auf 6 40 setzen, könnten Sie es auf 4 80 reduzieren und ich denke, das sieht Ah, ein bisschen besser aus. Alles klar, das sieht ziemlich gut aus. In Ordnung, gehen wir in die mobile Landschaft. Bruchpunkt. Und hier in der mobilen Landschaft, wollen Sie das irgendwie von unseren 80 auf 64 oben 64 unten ändern, Uh, Uh, 30 20 auf der linken und 20 auf der rechten Seite. Und ja, ich denke, sogar diese Distanz, denke ich, könnte zu viel sein. Also Internet 1 20, die wir bereit könnten, ist dies auf 64. Und ich denke, das sieht ziemlich gut aus. Kommen wir auch hierher zurück. Und ich denke , , dass es ihnen gut gehen sollte. Nun, das ist wirklich kein perfekter Weg, um das zu beheben. Also denke ich, das sollte anständig genug sein. Das sollte es sein. Es sollte in Ordnung sein. Nicht wirklich so schlimm. In Ordnung, auf. Aber das sollte sein, Das sollte fair genug sein. Das sollte ziemlich gut sein. Alles klar, das ist so ziemlich es für dieses Video und wir sehen uns im nächsten Video 29. Den Abschnitt zur Zeugnisse erstellen: Na gut, Leute. Also in diesem Video werden wir voran gehen und diesen Abschnitt von der Website erstellen und es wird ein ziemlich Spaß machen weil was? Denn was wir tun werden ist, dass wir diesen Teil am oberen Rand der Seite kleben lassen während dieser eine scrollen, so dass die linke Seite von der Seite nicht scrollt, während die rechte Seite der Seite scrollt. Es ist eine wirklich lustige Interaktion, die wir in vielen verschiedenen Arten von Websites nicht sehen können. Also lasst uns weitermachen und das tun. Jetzt. Ich habe eine kurze Demonstration und einen Drahtrahmen gemacht, wie es aussehen wird , also fangen wir wie üblich mit einem Abschnitt an, und dann werde ich einen Rapper im Inneren erschaffen, der hier die ganze Höhe einnimmt und darin werde ich es schaffen. Ich werde es in eine große wickeln, damit wir zwei Spalten haben. Also haben wir einen hier drüben und einen hier drüben und in der ersten Spalte. Ich werde nur dafür sorgen, dass es den ganzen Platz einnimmt, und ich werde hier einen Block hinzufügen . Dies ist für den Text und die Informationen auf den Links. Und wir sind hier. Wir werden drei Block drei D-Blöcke erstellen, einen für jeden. Kompositionen haben ein Bild. Wir haben einen Text und du weißt, dass er Subtext oder hier hat. So sehr, wie wir es machen werden. Also lasst uns in den Rep Flow springen, richtig? Möchten Sie beginnen, indem Sie den Körper auf, wir werden beginnen, indem Sie einen neuen Abschnitt erstellen, Drücken Sie Steuerelement e. Und wir sind in Abschnitt eingeben. Ok. Und ich werde das die Metro nennen. Was? Das ist eigentlich alles in Ordnung. Das ist also ein Surfer wie Zeugnisse. Mr. Rufen Sie diesen, ähm, Ammoniak Abschnitt drauf, und wir haben etwas Polsterung oben auf der Unterseite. So haben wir etwa 1 20 Pixel oben und ungefähr 1 30 unten. Also werde ich beginnen, indem ich 1 20 oben, 1 20 unten, 72 auf der linken Seite, auf 72 auf der rechten Seite. Ich schätze, wir haben diesen großen Abschnitt und ich werde anfangen, indem wir unseren ersten Div-Block erstellen , der ein Rapper, kreativer Block sein wird . Und ich sage Rapper, also hol dir noch einen Rapper. Ok? Und was jetzt? Combo-Klassen. Also haben wir großartig. Wir haben große drei Spalten und Sie haben Projekte erstellen. Ich denke, wir werden weitermachen und ein neues großartiges dafür schaffen, weil ich nicht sicher sein will, dass ich nichts durcheinander bringen will. Also gehen wir weiter und geben dem eine Klasse und nennen es, äh, klebrig. geben dem eine Klasse und nennen es, äh, äh, Gut. Ok. So klebrig. Großartig. Also werde ich das in ein Raster machen, indem ich auf diesen Button klicke. Und jetzt fangen wir an, indem wir eine Spalte von 24 auf Just Wonder haben. Alles klar, wir brauchen nur einen Tropfen. Jetzt werden wir anfangen, indem wir einen neuen De Block erstellen, der unser linker Rapper sein wird. Das wird also einfach diesen normalen Trapper nennen, weil er links sein wird, und hier können wir diese drei Elemente erschaffen, also haben wir ein paar zwei. Wir haben einen Absatz und das haben wir. Also denke ich, was ich tun werde, ist, dass ich einfach voran gehen und schnappen werde, weißt du, all das, was ich den ganzen Block schnappen werde, der sagt normaler Rapper. Ich werde das kopieren und hierher bringen und es stützen. Okay, ziemlich gut. Das sagte dies zu 14. 40. Ok. Und ich werde diese Informationen einfach kopieren. Kopieren Sie diese und basiert und kopieren und basiert. Und hier können wir es sehen. Sagt, Siehst du, alle Zeugnisse werden das kopieren und einfügen. Ordnung, also das so ziemlich nicht Ah, das ist fantastisch. Und was wir jetzt den nächsten auswählen werden, und ich werde einen Div-Block erstellen, und ich werde diesen normalen Rapper nochmal anrufen, weil es unsere rechte Seite aus dem Block sein wird . Und hier, was wir tun werden, ist, dass wir Wonder Block für jede von ihnen erstellen werden. OK, ich werde in New Delhi Block erstellen und ich möchte dies speziell für diesen Namen geben weil ich es nicht mit etwas anderem verwechseln möchte, und wir können unsere eigene Klasse dafür erstellen. Jemand nennt diesen Testi Mony weg Block. Ok. Und so lassen Sie uns sehen, wie man es baut. Also haben wir ein Bild, und dann haben wir noch einen Block. Also im Grunde, wir haben zwei Elemente Wann wird ein Bild sein, und wenn es ein tauber Block mit diesen Informationen sein wird und was ich tun kann, ist so hoch zu Satz von 3 60 Und das ist etwas, das ich nicht wollen, um den Sommer zu definieren. Nein, schnappen Sie sich das hier runter. Es müssen drei Buchstaben sein, oder? Richtig. Ah, ich rufe an. Ich werde nur Bild sagen, und ich werde sagen, Bildhöhe wird 3 60 Picks ist auf Aufklärung, weil es oben ist. Okay, so gehypt. Ah, Sie können sehen, es sind 3 60 Fixes. Also lasst uns voran gehen und zuerst unser Bild importieren. Also haben wir bereits einen staubigen Morgenblock auf einer Presse erstellt, die kontrolliert wird, oder sind wir können einfach voran gehen und ihn aus dem Asset-Panel holen, also wird es ein Zeugnis sein. Ich werde das schnappen, und ich werde das drinnen fallen lassen, und ich werde h I P anschalten . Und ich werde dieses geprüfte Monia-Bild nennen, okay? Und ich werde eine Höhe von 3 60 Pixeln hinzufügen. Nun, das geht voran und zerquetscht dies, was wir nicht voran gehen wollen und dies so einstellen , dass alles klar ist, es nimmt irgendwie 3 60 Pixel der Höhe auf, wie viel von einem Raum, der Sortierung hat . Das ist ziemlich gut. Nein, das nächste, was ich tun werde, ist, diesen unteren Rand zu entfernen, den wir haben. Also will ich das nicht, weil wir endgültig sind. Nicht bald. Gehen Sie vor und löschen Sie diese Klasse. Jemand geht zurück, und das sollte es sein. Okay, jetzt haben wir diesen Zeugenblock drin. Ich werde einen neuen De Block erstellen, und ich werde diese DST Monia als nächstes nennen. Ok? Nun, was wir hier haben, ist ein bisschen vom Text. Und wenn Sie auf dieser Seite schauen, haben wir 64 Pixel auf beiden Seiten. Also werde ich voran gehen und eine 64 Pixel Polsterung auf beiden Seiten hinzufügen. NYT 64 auf der Oberseite. Links rechts, unten drauf. Duh. Richtig. Ok, großartig. Also, jetzt werden wir in diesem Text hinzufügen. Nun, dies kann ein Textblock sein, weil es nicht muss, Sie wissen, dass es für Ausgabe keine Rolle spielt, also werde ich nur einen Textblock anstelle einer Überschrift verwenden. Und ich denke, wir haben bereits eine Überschrift zu diesem Also das ist die Überschrift 24 Picks ist, ähm, richtig. Da gehen wir. Ich kopiere das einfach und füge es ein. Okay, werden wir nicht. Wir gehen weiter und sorgen dafür, dass das 24 ist. Es gab eine Panne, schätze ich. Wie auch immer, Onda, wir wollen diese Schüssel machen. In Ordnung? So sieht es schön und mutig aus. Ok? Und jetzt, wenn Sie beobachten, was wir hier tun, ist, dass der Abstand zwischen diesem gerade ist , wenn 64 Picks ist und das ist die Art von Stil, den ich unabhängig folge. Also was es im Grunde bedeutet, ist, dass sich die Höhe basierend auf der Höhe des Behälters ändert . Es ist keine feste Höhe, wahr, denn wir sind so zu erklären, in diesem Fall, richtig? Das war Sie wissen, selbst wenn dies 56 Zeilen ist, wird die Höhe von 600 gleich sein, weil ich es als 600 Pixel hoch definiert hatte . Aber in diesem Fall möchte ich nicht, dass es eine definierte Höhe ist. Ich möchte die Änderung je nach Größe ausblenden. Du kennst diesen Text. Also, was wir tun, ist, da wir wie, 64 Picks ist Onda. Wir haben bereits 16. Ich werde eine neue Komma-Klasse erstellen und diesen 64 Fixer Bottom Underscore m nennen . Und ich werde sagen, das ist 64 Pixel. Also jetzt haben wir 64. Also, wenn du das nächste Mal dieses kleine Stück Leben bist, werde ich einen neuen Textblock hinzufügen, richtig? Und dieser Textblock wird 18 Pixel überschreiben. Ich werde nur sagen, Überschrift, ähm, wir haben keine Rubrik 18 Picks ist okay, also das ist eine neue Klasse. Also lasst uns voran gehen und diesen erstellen. Kaum 24 1 und dann werden wir Klasse duplizieren, so dass alle Eigenschaften gleich bleiben . Und ich werde das einfach in 18 Fixes umbenennen, und dann werde ich wirklich die Fremdgröße in Pixeln haben. Und sind wir brauchen auch eine Farbe. Und ich denke, diese Farbe, ich glaube iss leichte Traube. Also werde ich eine neue Klasse schaffen und diese leichte Traube nennen, und sie wollten das Licht anwenden. Großer Kurs sollte gut sein. Großartig. Jetzt wird das Paragraph 16 sein. Also wird es weitergehen und das kopieren. Und das wird Ah, Absatz 16 Plektren ist und wieder, das wird, wie, tolle Farbe sein wie, . Gehen Sie einfach vor und kopieren Sie die Informationen und Bestie auf und eine Kopie und Bestie. Nun, die Entfernung ist ziemlich viel weniger, das ist wie vier Picks ist. Aber hier hat das etwa 16 Pixel. Also werde ich gehen, um eine neue Komma-Klasse zu erstellen und diese vier Pixel unteren Rand nennen, okay? Und was schon geht, ist das, weißt du, für Reparaturen? Und hier haben wir auch nichts, was wir Null Pixelrand haben. Das ist also ziemlich gut. Sie können auch sehen, dass wir diese Grenze haben , wissen Sie, und das wollen wir auch anwenden. Diese Grenze ist also eigentlich dunkler grauer Farbe. Also, wenn es den Testimonial Textblock auswählt und ah, werde ich runter zu den Grenzen kommen und ich werde diese drei die linke, die untere oder links wählen . Und ich habe die Farbe geändert, um dunkelgrau zu sein, was ist das? Okay auf. Ich klicke auch darauf und ändere das in Dr. und ich werde den richtigen auswählen und das zu dunkel verkaufen. Also im Grunde tue ich, dass ich Grenzen nur auf Sie, diese drei Seiten anwende , Ordnung, und nicht auf der Spitze gerade jetzt. Du kannst voran gehen und ganz oben auf deine eigene hinzufügen, aber ich werde es einfach so lassen, wie es ist, oder? Und das ist es so ziemlich. Jetzt brauchen wir diesen Abstand von 1 20 Pixel. Also, was ich tun kann, ist, dass ich den Zeugenblock selbst auswähle, die ganze Sache. Ich werde eine neue Komma-Klasse hinzufügen und diesen 1-20-Pixel-Unterstrich aufrufen. Ich frage mich auch, ob Fixes unteren Unterstrich m für Marge, und ich werde hier runter kommen und ich werde dies auf 1 20 Picks setzen ist in Ordnung. Und jetzt haben wir diese 1 26 ist. Das einzige, was ich tun werde, ist, dass ich dieses Zeugnis von Rock auswähle und es dreimal aufbaute . Also 123 basic zweimal, eigentlich. Und ich werde hierher kommen und schnell diese Informationen ändern wird diese auswählen und einfügen und , wie Sie sehen können, weil wir nicht eine bestimmte Höhe definiert haben. Die Höhe nimmt ein, die Höhe wird durch den Inhalt definiert. Ok. Und ich werde anfangen, indem ich diese Emily Parker auswähle. Kopieren Sie das überhaupt hier. Und es wird Firma Nummer zwei sein. Ok. Und lasst uns runterkommen. Oder hier. Ah, lassen Sie uns diese Kopie kopieren und zusammenlegen. Und es wird Vin Cent Rod geben, und das wird Firma Nummer drei sein. Ok. Und jetzt werden wir weitermachen und einfach die Bilder ändern, um das Bild auszuwählen. Klicken Sie auf das Zahnradsymbol, wählen Sie Bild ersetzen, und ich komme runter und wähle, ähm, Testimonial 3, die hier drüben ist. Ok. Und das wird Zeugnis sein. Nur eine. Wählen Sie das Bild ersetzen und, ah, Zeugnis zu Alles in Ordnung, also ist das sehr viel. , Werfen wir einen Blick und sehen,wie sich das anfühlt, anfühlt, Ordnung, ich werde genau wie 40 und 40 Fixes setzen. Und jetzt, wenn ich es vermassele, Ordnung. Ähm, richtig. Und es funktioniert. Gut. Nun, die Idee ist, das irgendwie an die Spitze zu kleben. Bevor ich das mache,möchte ich nur sicherstellen, dass wir es haben. So wie Sie sehen können,habe ich ein paar Abstände auf der linken Seite hier drüben und wissen Sie, weil ich nicht will, dass es so nah ist. Bevor ich das mache, möchte ich nur sicherstellen, dass wir es haben. So wie Sie sehen können, habe ich ein paar Abstände auf der linken Seite hier drüben und wissen Sie, So und auch der Abstand von 64 tatsächlich. Also werde ich das schnell auf 64 ändern. Wählen Sie diese Option aus. Und in der Gapen sagte das zu 64. Okay, das ist so ziemlich, wo wir jetzt suchen. Was wir tun, ist nicht nur dieser normale Rapper ausgewählt, den wir haben, okay? Und eigentlich, was ich tun werde, ist, dass ich dem eine neue Klasse geben werde, denn das ist das einzige Element, das fest stecken bleibt. Es wird klebrig sein. Und da viele andere Elemente den Klassennormalen Rapper haben, möchten wir keine Eigenschaften anwenden. Wir werden nicht nur das anwenden. Also werde ich voran gehen und einfach diese Klasse entfernen und eine neue Klasse geben und diesen Test anrufen. Je mehr Nhial klebrigen Block, okay? Und was wir wissen, werde ich hierher kommen. Machen Sie jetzt keine Positionen. Hier in den Positionen haben wir statisch. Wir haben Verwandte. Wir haben absolut. Wir haben repariert und wir haben klebrig. Was ich tun werde, ist, dass ich klebrig sagen werde. Und wenn Sie tatsächlich schauen Es sagt Sticky behebt ein Element auf der Leinwand erst, nachdem der Benutzer einer bestimmten Stelle auf der Seite vorbei scrollt. Was passiert, ist, wenn ich das alles in Ordnung spiele, passiert nichts. Alles ist immer noch genau gleich, oder? Aber was ich tun möchte, ist, wenn ich voran gehe und klebrig sage und einen Wert von Null setze. Was ich sagen will, ist, dass, wenn der Abstand zwischen diesem Element auf der Oberseite des Bildschirms Null Stick ist. Okay, was ich tun werde, ist, dass du jetzt sehen kannst, dass es eine gewisse Distanz gibt. Richtig? Aber wenn diese Entfernung, die 20 verwendet, bleibt das an dem Schema hängen, richtig? Weil die Entfernung jetzt Null ist. Und jetzt kann ich weiter scrollen und weiter scrollen und weitermachen. Der von der Linken wird genau dort bleiben. Okay, jetzt will ich nicht den gesamten oberen Abschnitt berühren. Also, was ich tun werde, ist, dass ich es ein bisschen vom Abstand abgeben werde. Let's 100 und 20 Picks ist in Ordnung, also diese 120 Picks ist aus dieser Entfernung von dieser Entfernung, und jetzt ist das nein. Jetzt wird es anfangs so aussehen, wenn ich scrolle, wird es stecken bleiben. Und so wird es jetzt aussehen. Wir könnten das auf 64 oder 48 oder 18 reduzieren. Ich werde es auf 64 setzen. Ich denke, 64 ist eine gute Zahl auf. Ja, das war's so ziemlich. Richtig. Und so schaffen Sie einen schönen, klebrigen Effekt. Also, im nächsten Schritt werden wir weitermachen und das zu einem reaktionsfähigen machen. Also sehe ich euch im nächsten Video. 30. Den Abschnitt Reagieren, um reagieren zu wollen: In Ordnung. Also in diesem wirklich, werden wir weitermachen und das zu einem Sponsor für andere Breakpoints machen. Also lassen Sie uns tatsächlich beginnen, indem Sie in die Tablet-Ansicht jetzt auf dem Tablet springen, Sie wollen offensichtlich beginnen, indem Sie die Elemente auswählen , Sie wissen , und sie verwenden die Polsterung oben. Das war vorbei. 80 Pixel werden das Gleiche hier machen. 80 Pixel oben auf, wissen Sie, 80 Pixel unten und links. Und genau hier können Sie schon ist, dass zu 40 und 40. Und auch der Abstand hier drüben ist vielleicht ein bisschen zu viel. So können wir Radios, dass von 64 bis 24, das sollte in Ordnung sein. Selbst die Polsterung hier drüben ist ein bisschen zu viel, also sind wir wahrscheinlich nicht bereit. Selbst die Polsterung hier drüben ist ein bisschen zu viel, Ist das auf 32 32 32 32 und ah, 30. Führe dich. Das sieht schlimm genug aus. Sogar die Entfernung hier drüben, Mi will vielleicht Zeh, weißt du, das ändern. Wenn ich also wie der Testimonial Block sagte, haben wir schon 21 Jahre. Ist das auf 64? Und ich denke, das ist eine gute Zahl. Und ja, ich glaube, ich war ziemlich gut dran. Nun, das Problem ist, dass, wenn es um die Landschaft Bruchpunkt geht, es irgendwie nicht wirklich gut aussieht. Was wir also tun müssen, ist, dass wir das klebrige Element, die Funktionalität, loswerden müssen. Also, was Sie mit dem ersten von allen tun, ist Cynthias Rapper ist eine Zwei-Säule. Großartig. Okay, ich lösche das Löschen einer Spalte und mache es zu einem einzigen Spaltenraster. Also jetzt so, wie es aussieht, und ich werde auch gehen und die Lücke hier ändern. Die Straßenlücke von 16 bis 48. Okay, also haben wir etwas. Sieht so aus, und ah, wir können tun, ist, dass das keine klebrigen Blöcke mehr wird. Ich werde die Position dieses zu klebrig von klebrig bis statisch einstellen. Also ist es normal und unsere normalen Schriftrollen Und wir wollen auch, dass die Entfernung hier oben 64 auf der Unterseite und, weißt du, links und rechts ist. Wir können das nicht wollen, um 20 Fixes auf der linken Seite und 20 Picks sind auf der rechten Seite und es wird ein sehr einfacher, unkomplizierter Block sein, richtig? Dasselbe gilt für mehr von Landschaft, für mobilen Bruchpunkt. Und ja, ich denke, für mobile, schlechte Pflanzen, Ich denke für mobile Portrait oder wir tun können, ist wahrscheinlich Radios unten dies von 30 bis 24 auf der linken Hand. Auf der rechten Seite, dass wir halten 32 auf der Spitze sollte kein Problem sein. Und ich denke, das sieht ziemlich gut aus, oder? Das ist sehr viel. Nichts zu kompliziert. Sind ah kompliziert darüber? Also, es sei denn, ihr Jungs im nächsten Video 31. Den Tabellenbereich erstellen: Na gut, Leute. In diesem Video wir fortfahren und diesen Abschnitt erstellen und es wird sehr Spaß machen, weil wir eine neue Komponente namens Stich verwenden, weil wir wollen, dass dies eine Tab-Struktur sein und verstehen, wie tippt alte Arbeit. Bevor wir anfangen, lassen Sie uns schnell die Struktur verstehen. Also werden wir mit einem Abschnitt beginnen und dann haben wir einen Rapper drinnen, und dann haben wir einen Def-Block , der für den Titel und den Text sein wird, und der andere entwickelt wird für die Tabs selbst. Richtig? Das Ganze wird also die Tab-Struktur sein, und das ist es so ziemlich. Und ich habe auch definiert, die Höhe von 420 Picks ist für jeden von diesen Bildern. Also lasst uns in den Luftstrom springen. Also hier werde ich ich beginnen, indem ich den Körper auswähle, und ich werde anfangen, indem ich in neuen Abschnitt Tier Rufen Sie diesen Abschnitt Registerkarten Abschnitt , weil es Aziz wirklich abstapeln will 1 20 Pixel auf beiden Seiten zu starten mit Polsterung Putting mit ah Planung auf der linken Seite und Polsterung auf der rechten Seite. Richtig? Beginnen wir also, indem wir einen Deadlock erstellen. Und dieser Deadlock wird unser Wrapper sein, dass wir so dot-Ah haben, das nächste wird weitergehen und diesen Abschnitt erstellt. Also, was bedeutet impress control e in einem Block bekommen? Das wird mein normaler Rapper. Und was wir tun können, ist, dass wir diese Dinge genauso gut aufnehmen können. Kopieren Sie das. Basierend auf Kopie und das Beste. Alles klar, es sollte so ziemlich dasselbe sein. Und ich werde das in Fotografie umwandeln, und wir können Dexter hier haben. Ich werde das kopieren und einen Baseball hier und was ich tun kann, ist, dass ich irgendwie die Linie brechen und sagen kann, während ich unterwegs bin, damit ich das in zwei Zeilen brechen kann, und das sollte ziemlich gut sein. Jetzt haben wir diesen normalen Rapper drinnen hinzugefügt, aber ich glaube nicht wirklich, dass wir das normale Obermaterial brauchen. Also, was ich tun kann, ist eigentlich, lassen Sie uns das alles schließen und wir könnten tatsächlich die Überschrift allein haben und den Absatz für sich selbst und Sie wissen, schwächen den normalen Rapper löschen, weil alles in einer vertikalen Linie rechts sein wird da, denn so und dann haben wir hier und hier etwas Schlagmarge. Wir wollten irgendwie 64 sein. Also was? Es würde weitergehen und diese Klasse duplizieren, okay? Und anstatt es 40 Pixel unten zu nennen, nenne ich es 64 Picks von Baden und änderte das auf 64. Ok. Und jetzt werden wir ein neues Element verwenden. Ziemlich geordnet. Also, wenn Sie zum Element-Panel gehen, können Sie tatsächlich sehen, dass wir haben. Und Lemon rief Stiche würde das nicht einfach rausziehen und es in den Rapper stecken, richtig? Also, jetzt ist das, was wir bekommen, und ich werde es einfach erstichen nennen, okay. Nun, bevor wir etwas bearbeiten oder tun, das die Struktur von diesem verstanden hat Okay, also wenn Sie die Registerkarten öffnen, sehen wir, dass wir, wie, das Haupt-Elternteil, das Taps genannt wird. Und dann, damit wir zwei Kinder haben. Ein Escort Registerkarten Menü. Und wenn die Stiche in Kontakt treten, wo ist es? Eine vollständige grüne Registerkarten Menü und Traps Inhalt Registerkarten Menü. Sind das drei Knöpfe? Richtig? Und wenn Sie hier rüber schauen, wenn Sie sich öffnen, sehen wir, dass Sie Tab-Link-Block haben, und Sie haben eine Registerkarte. Text. Sie haben eine Registerkarte Verknüpfungsblock, und Sie haben einen Text, und dann haben Sie einen Link-Block, und dann haben Sie einen Text. Richtig? Also dieses Element oder dieses Elternteil, ist im Grunde der Container für drei Taps, richtig? Es dauerte nur mehr Top. Also in diesem Fall würden wir mehr Male wollen, weil wir vier Katzen haben, wenn eine Kopie Abstieg basiert es. Richtig. Und das fügt ein neues Top hinzu. Ordnung, also haben wir das jetzt. Tabs. Kontinent ist der Bereich, in dem wir vier Kinder haben. Okay, jetzt, diese definieren im Grunde, was Toby in einem bestimmten Tab geht. Gleich drauf. In unserem Fall haben wir diese vier Bilder. So sind vier Bilder, was hier in dieser Hütte sein wird. Richtig? So ist das, was das ist, wie seine Struktur. Lassen Sie uns also beginnen, indem Sie diese Messerstecher anpassen. Ok? Wenn ich auf den Stopp klicke, wird das, was ich tun werde, weitergehen und diesen Tab anrufen, okay? Wenn ich auf den Stopp klicke, wird das, was ich tun werde, weitergehen und diesen Tab anrufen, Sie können das in der Reihenfolge sehen. Es fügt automatisch eine Combo-Klassenaufruf s aktuelle. In Ordnung? Aber wenn ich hierher komme, und ich werde einfach den Stich rufen, okay? Nichts wird passieren. Es gibt keine Komma-Klasse, aber wenn ich hier drüben klicke, gibt es eine Komma-Klasse. Der Grund ist, weil, wenn Sie auf eine Seite schauen, die Stiche hat einige oben wird automatisch ausgewählt werden rechts, Das wird irgendwann, die ausgewählt werden wird. Es kann keinen Angriff geben, der nicht ausgewählt ist, richtig. Das ist also der Grund, warum wir fließen, fügt automatisch einen aktuellen Zustand hinzu. Nun, wenn Sie das jetzt bearbeiten möchten, wissen wir, dass wir natürlich voran gehen und den Stein bearbeiten wollen weil dies völlig anders aussieht als das, was wir als Standard haben. Also, wenn Sie voran gehen und dies anpassen möchten, beginnen Sie nicht mit der Registerkarte, die diesen aktuellen Zustand in Ordnung hat, tun Sie nicht, weil alle Änderungen, die Sie den aktuellen Zustand richtig auswirken, wollen wir beginnen mit dies, die nicht im aktuellen Zustand ist, und dann wollen wir voran und angepasst den aktuellen Zustand. Okay, jetzt, wenn Sie zu diesen Einstellungen gehen, wenn Sie auch viele Einstellungen sehen können, wo Sie entscheiden können , welches das aktive Tableau ist. Offensichtlich können Sie keines auch als aktive Registerkarte wählen. Aber das ergibt wirklich keinen Sinn. So können Sie voran gehen und wählen Sie erstochen ein oder tippen oder tippen Sie auf drei oder tippen Sie zur Auswahl zwischen . Du wirst nicht der Erste sein. In meinem Fall werde ich den ersten als vierten Stopp aufstellen, oder? Ganz einfach. In Ordnung, also lassen Sie uns das jetzt umbenennen, hat das Umbenennen nichts mit der Klasse zu tun. Also werde ich das Italien anrufen. Ich werde das Australien nennen. Ähm, das wird Indien und dann Gott Brasiliens sein, richtig? Richtig. Jetzt setze ich das Stichelement ein. Ich werde auch eine Klasse bekommen, die als „Stich“ bezeichnet , in Ordnung, denn das ist unser oberster Text, und ich werde mit dem letzten Element anfangen und sicherstellen, dass wir die gleichen Klassen auf alles anwenden . Also wird der Elternteil der Tab sein, und dann wird der Text der Tippen Text sein. Das wird Tab sein und dann wird das This als Nächstes getupft werden. Oh, Saudi, wenn es dieser Tab wäre. Als Nächstes wird das Dab sein, und ein weiterer wird als Nächstes dob sein, und es wird wieder als Nächstes getupft werden. wird das Dab sein, und ein weiterer wird als Nächstes dob sein, In Ordnung, jetzt, da wir das so halbieren, haben wir den Stich. Und was Sie tun, ist, dass wir hier eine Grenze haben, okay? Und es ist lila, und es ist nur was? Es ist sehr einfach. Also lasst uns weitermachen. Und mit dem oberen Selektor können Sie sehen, dass wir dieses Bild und Backer haben und es eine Hintergrundfarbe hat. Ich brauche nichts davon. Ich werde voran gehen und sagte, die AL weit auf Null, weil wir wollen, dass die Kapazität Null ist richtig? Und wie Sie sehen können, ändert sich es für alle Registerkarten außer dem Stich, da dies eine Combo geschlossen hat. Werden wir uns später damit befassen und auch die nächste drinnen hier drüben. Aber zuerst gehen wir weiter und fügen eine Grenze hinzu. Also gehen Sie vor und ändern Sie die Farbe dieser beiden lila. Also bekommen wir eine schöne Grenze. Das ist gut. Und jetzt haben wir die Struktur im Inneren, die 6 bis 18 Picks ist, also werde ich voran gehen und die Schriftgröße ändern, um 18 Fixes zu sein . Und ich sagte das zu mutig. Und auch die Farbe wird weiß sein. Okay, jetzt haben wir auch einen gewissen Abstand oben und unten, das ist Dr Pixels oben und 16 Picks auf der linken und rechten Seite. Selbst eine wählen Sie die Registerkarte auf hier in der Polsterung. Ich werde dies auf 12 und twas und ah, wissen Sie, auf der linken und rechten ist 16 und 16 einmal sagte dies zu 16 auf 60. In Ordnung. Ziemlich cool. Wir haben auch einen Abstand zwischen zwei Tabs, das ist, wie 24 Picks ist, also werde ich auch die Registerkarte auf der rechten Seite auswählen. Ich werde ihm eine Klasse geben. Ich werde ihm einen Abstand von 24 Pixeln geben, also schiebt diese Art Dinge aus. Alles klar, klar, das sieht ziemlich gut aus. Jetzt möchten wir dieses Zeug auswählen, das die Combo-Klasse namens aktuell hat, und jetzt möchten wir es anpassen, um zu sehen, wie es aussehen wird, wenn es ausgewählt wird. Wenn es im aktiven Zustand ist oder sie in Zustand geschnitten. Wir beginnen, indem wir voran gehen und die Hintergrundfarbe auf Papa ändern. Entschuldigung, nicht der Text. Urbane Veränderung, die Hintergrundfarbe ist violett, richtig, und das ist es so ziemlich. Also, jetzt, wenn wir gehen und Vorschau, können Sie tatsächlich darauf klicken, und Sie können sehen, dass Sie wissen, sie haben diesen Effekt und es sah Sie an. Sieht perfekt aus. Nun, wenn Sie wollen, können Sie auch voran gehen und dies auf eine nächste Ebene bringen. Sagen wir mal, wir haben einen Hahn. Lassen Sie uns voran und fügen Sie einen Hafenstaat rechts in der haben einen Staat. Ich gehe weiter und wir haben diese Farbe. Ich werde lila wählen, und ich bin schon die Kapazität, 20% zu mögen. Also bekommen wir nur einen leichten Schwebeeffekt. Ok? Darauf werde ich in den Nonnenstaat zurückkehren, und offensichtlich wollen wir einen Übergang. Also werde ich die Übergänge machen und wir werden uns wieder um die Farbe entscheiden, und wir werden die Dauer auf 3 50 Millisekunden einstellen und Lockerung wird Staffelei sein. In Ordnung, also schauen wir uns jetzt schnell an. So, jetzt können Sie sehen, dass, wenn Sie es auf den Registerkarten haben, Sie erhalten diesen schönen Effekt, und dann klicken Sie auf Ihre rechte, Sie können sehen, dass es Art von Änderungen, und es sieht ziemlich gut aus. Ja. Okay, äh, schnell wollen Änderungen. Schriftart Rechtschreibung dieses e l I Alle jetzt die Registerkarten Menü. Wir haben, wie, Abstand von 40 Pixel, gehen, um die Registerkarten Menü wählen. Richtig? Rufen wir dieses Tabs Menü auf, okay? Und wir gehen weiter und brechen am unteren Rand von 40 Pixeln ab, so dass das Personal schiebt. Alles klar, wir rufen diesen Tab-Inhalt an, denn das wird unser Steppland sein. Und was wir tun werden, wird voran gehen und einen neuen Block schaffen, richtig? Und diese Deadlock, wir werden dieses Tab-Gitter nennen. Okay, was wir wissen, ist, dass ich dem einen Hype geben werde, richtig? Wir wollen, dass dies eine Höhe von 4 20 Pixel hat. Willst du für 20 Pixel in die hohen zwei gehen? Sieht gut aus. Und ich werde nicht darauf klicken, um es in ein Raster zu schaffen. Ok. Und wir werden weitermachen und 232 Spalten hinzufügen und Wunder löschen. Oh, okay, also wird es so aussehen. Und auch, der Abstand wird 24 zwischen den beiden sein. Die Spaltenlücke wird also 24 Ausgänge sein, und das sieht ziemlich gut aus. , Alles,was wir tun müssen, ist zu den Bildern zu gehen, und du willst unsere Bilder schnappen, damit wir mit denen beginnen können, die eine Narbenreise haben. Es wird also eine gereist sein, das ziehen und die Einsicht fallen lassen. Und du hast es gesagt, ich bin okay , und werde den nächsten auswählen, der hier drüben sein wird , der bereist wird. Sagte dies tun h i d p i. Und dann wird der nächste gereist werden. Drei. Okay, bis auf H i v p i o. Also haben wir das falsche Bild bekommen. Ich werde das durch die richtige ersetzen, diedrei gereist ist ist, , drei gereist ist ist, die hier drüben ist. Sagte es H i d b I und der nächste wird Reisebild Nummer vier sein. Und Gott hat das zu H i d gesagt . Das Problem ist, dass Sie wissen, es nicht die gesamte Höhe einnimmt. Und auch, die Tatsache, die entscheidet, ist anders. Also, wie beheben wir das? Sehr einfach. Gehen Sie voran und wählen Sie das Bild. Ich gebe ihm eine Klasse und nenne dieses Stichbild. Okay, jetzt, was ich tun werde, ist, dass wir bereits die Höhe definiert haben, die 4 20 Pixel beträgt. Also, hier in der Passform, werde ich es von Phil ändern. Und ich sagte, das zu decken. Ok? Und es sagte auch, die Höhe zu 100%, so dass nimmt die gesamte Höhe. Wenn ich das steuere, können Sie sehen, dass es Skalierung ist, während das Seitenverhältnis beibehalten wird. Das ist also wirklich gut. Also wollten wir das Aspekt Problem beibehalten, und für das Bild wird Kerze sein, können wir das gleiche nennen. Also lassen Sie uns diese Registerkarte Bild nennen So dass Fähigkeiten und behält das Seitenverhältnis. Nennen Sie dieses Stichbild. Dort gehen wir und konstruieren auch und nennen dieses Tab Bild rechts. Sie haben eine ziemlich gute Jetzt gehen wir voran und werfen einen Blick und sehen, wie das und das sieht ziemlich gut aus. Und wenn ich auf Australien tippe. Sie können sehen, dass es zusammenbricht, weil es keine Inhalte in der australischen Spitze und indischen Präsidenten. Ding passiert. Also was? Wir haben Australien hier drüben und sehen uns das an. Wie es auf einem 1920 Display aussieht, sieht ziemlich gut aus. Sieht nett und interessant aus. OK, jetzt können Sie sehen, dass auf einem 1920 Display, können Sie sehen, dass die Höhe Art off, wissen Sie, es wird wie ein Quadratverhältnis fast. Und obwohl das gut ist, aber wenn wir davon ausgehen, sagen wir, dass wir immer so sein wollten , wie diese vertikale Höhe. Was wir tun können, ist, dass wir tatsächlich die Registerkarte auswählen können. Großartig. Und hier definieren wir die Höhe für 20 Pixel. Jetzt möchten wir, dass sich das Hoch basierend auf dem View-Port damit ändert. In Ordnung, Aussichtstafel. Wir sehen die Porthöhe nicht an. Okay, also werde ich 30 v w sehen. Okay, jetzt, was tun wird, ist es geht Zeh. Definieren Sie die Höhe basierend auf dem Ansichtsport mit, Wenn also die Ansichtsport Gewichtung zunimmt, erhöht sich auch die Höhe. Ich werde das wahrscheinlich zu 35 oder vielleicht 30 sagen. 30 zu, Ich denke, ich denke, dass es eine gute Zahl war. Und jetzt, wenn Sie tatsächlich voran gehen und sich das ansehen, gehen wir zu 14 40. Sie können sehen, dass es immer noch vertikal ist, wissen Sie, wie die Sportrate von Ihnen, denn die Höhe ist abhängig von der Ansicht Port Worth. Okay, wenn ich hier runterkomme, können wir das sehen. Und wenn ich gehe 1920 Sie können jetzt sehen, dass die Höhe Stick ist die Höhe basiert auf dem Wort aus dem Bildschirm, und das ist genau das, was Sie wollen. Und wenn Sie das zu 38 40 gesagt haben, können Sie sehen, dass wir das bekommen, was riesig ist. Also wollen wir das nicht richtig. Wir wollen nicht, dass die Sache, die Zehe passiert. Also, was wir tun können, ist die Zehenkappe zu sagen, OK, ich will nicht, dass du so groß gehst. Ich möchte, dass du Max bei einem bestimmten Pixelwert kennst. Also sagen wir, wir sagen, 500 Fixes sind Sagen wir, 600 Fixes sind Sagen wir, wir sagen, wir 6 40 Picks ist oder ich 600 ist eine gute Zahl, also werden wir sagen, Halten Sie die Höhe zu erhöhen, aber stoppen, wenn es 600 Pixel erreicht, vielleicht berücksichtigt 620 0 R. 630. Okay, also wollen wir das irgendwie mitmachen. Ich werde das zu 14 sagen. Wieder 40. Das ist also, was wir haben, und das sieht ziemlich gut aus. Nun, was wir gehandelt, was er tun kann, ist, wenn ich hierher zu den Bildern komme, begann zum Navigator, und lassen Sie uns zu den Registerkarten Inhalt gehen, damit Sie das in den Tabs Inhalt sehen können. Wir haben einen Tab. Gut. Und drinnen haben wir. Diese vier Bilder, die wir tun können, sind, dass wir das einfach kopieren und schwächen können, basierend auf all den anderen auch. Und wir können die Bilder später ändern. Und auch, ich werde voran gehen und schnell nennen diese und nennen diese Dab Inhalte, Job-Inhalte und Job-Verhalten. Richtig. Und es wird das überprüfen. Also, wenn er dies sieht, wenn Sie nur auf die verschiedenen Registerkarten klicken, können Sie sehen, dass die Bilder Art der Änderung. Und jetzt sind alle Bilder gleich. Es wird also dasselbe sein, also kannst du es ändern und es wird wirklich gut aussehen. Ordnung, es gibt also etwas, das wirklich cool und wirklich genial aussieht. Also, jetzt im nächsten Video, werden wir gehen weiter und machen dies reaktionsschnell und zeigen und sehen, wie das aussieht reaktionsschnell. So wie ihr Jungs im nächsten Video. 32. Den Abschnitt Making machen: Richtig, Leute. Also im vorherigen Video, wo ich ging voran und machte diesen Tab Abschnitt und in diesem wir gehen nicht voran und machen dies reaktionsschnell für am Breakpoint. Also lasst uns das machen. Lassen Sie uns über die Tablette Bruchpunkt auf def. Sie haben hier Einheimische. Es hängt irgendwie davon ab, wie Sie jetzt präsentieren möchten. Da dies Bilder sind, würden wir wollen Ah, gute Menge außerhalb des Platzes dafür haben . Also offensichtlich beginnen, indem Sie die Schriftgröße aus dieser Studie verwenden? Die in einem Abschied von diesem zu 80 80 wissen Sie, 40 und 40. Ähm, irgendetwas. Was ich tun möchte, ist, da dies ein Tablet ist, kann ich das Gitter ändern. Also, um dies in eine zwei-mal zwei-Säulen-Klasse zu machen, So kaufen turo Sorten so freundlich aus, richten Sie es so auf DA Sie wissen, wir könnten vielleicht sogar reduzieren erhöhen die Straße Geschenk-Lücke auf 24 getan. Und jetzt sieht diese Art seltsam aus. Aber denken ist, dass, da wir die Höhenstudie definiert hatten, schauen wir uns das Gitter an. Die Höhe aus diesem zu 32 VW auf einer Maxime es aus 6 30 Wir wollen diese Art ändern, richtig, denn jetzt wird das Tablet kleiner sein. Es wird nicht ganz groß sein, und so können wir einen festen Wert definieren. Also werde ich weitermachen und das Max nass entfernen. Ich werde nur keins sagen. Ok? Und für die Höhe werde ich es in Pixeln setzen. Also wahrscheinlich so etwas wie 3 60 Fixes. Vielleicht könnten wir das auf 6 40 Plektren stoßen. Selbst wenn du ein bisschen mehr sein wolltest,könnten wir weitergehen und das auf 808 100 etwas springen. Vielleicht könnten wir das auf 6 40 Plektren stoßen. Selbst wenn du ein bisschen mehr sein wolltest, könnten wir weitergehen und das auf 808 100 etwas springen könnten wir weitergehen und das auf 808 100 etwas springen. Das ist etwas, das ihr euch entscheiden müsst. 8 40 Rechts. Das sieht also ziemlich gut aus und anständig genug. Wir könnten den Landschaftsbruchpunkt erreichen, und das wird sein, Can tun ist, den oberen Rand von diesem auf 64 zu verwenden. Untere Polsterung bis 64. 20 links und 20 auf der rechten Seite. Und das sieht ziemlich gut aus. Nun, eine Sache, die wir hier machen können, ist, dass wir tatsächlich die Watte entfernen können , die wir für jedes dieser Elemente hatten, oder? So können wir die Watte auf Auto setzen. Und jetzt, was wir tun können, ist, da dies ein Tab-Menü ist, können wir dies in eine Flex-Box ändern, Ordnung? Und sobald ich es oder Flex-Box ändere, kann ich tatsächlich sagen, rechtfertigen Raum zwischen, so dass die Elemente Art aus Raum diese aus. Nun, der Grund, warum es nicht Brasilien ist, den Rand nicht berührt, liegt daran, dass wir ihn auf Auto eingestellt haben . Wir wollen die Zehe Null setzen, und so wird es aussehen. Also haben wir jetzt diese Registerkarten, die gleichen Platz einnehmen, und diese Bilder sehen auch aus, Aber ich denke, das sieht ein bisschen seltsam aus, weil es nicht meine, es passt zu auseinander. Also denke ich, wenn eine Drucksteuerung Z nur zu irgendwie, wissen Sie, bringen Sie es zurück in seinen ursprünglichen Zustand, Ordnung, ähnlich. So wie das. Ich denke, das war es, was das ziemlich gut aussah. Also werde ich es einfach so lassen. Wir haben ein kleines Problem, bei dem diese Art von in die nächste Zeile übergeht. Was wir also tun könnten, ist wahrscheinlich die mit zu reduzieren. Ich meine, die Polsterung von 24 bis 20 vielleicht sogar 16 sind. Probieren wir es aus. Ich schätze, wir haben Funkgeräte auf Null. Funktioniert das? Alles klar, also funktioniert es mit Nullen von vielleicht, sagen wir zu unserer vollen, denke ich, ähm oder sechs. Okay, wir haben es voll eingestellt. Ja, so ziemlich wie das. Und, ähm, ich denke, wäre eine gute Option ist, das Registerkartenmenü auszuwählen und tatsächlich gesagt, dass in ein Raster. Und dann müssen wir kaufen, um zusammenzuarbeiten, und das ist, was wir bekommen. Und ich denke, das ist ein viel besserer Weg, das darzustellen. Und was wir tun könnten, ist diese Registerkarte, die wir sagen, flex auf, wir sagen, eine Linie Mitte und Ausrichtung Mitte, so dass der Text in der Mitte ist. Ich denke, das ist eine viel bessere Darstellung. Und wenn du ins mobile Porträt gehst, bekommen wir das. Und ich denke, das sieht auch ziemlich gut aus, 40 ist zu klein. Also ich denke, wir können mit 3 60 bleiben, was die Standardeinstellung ist. Und wir sind wegen der Bestnote, weil das zu vollgestopft ist. Ich werde diese beiden Spalten entfernen und es zu einer einzigen Spalte machen, und sie sollten ziemlich gut aussehen. Und wir können die Höhe von jedem von den Elementen deutlich heben und anstatt ,wissen Sie, wissen Sie eine Höhe zum Tab-Raster hinzuzufügen. Und auch hier denke ich, dass wir der Tab-Klasse eine Höhe hinzugefügt haben. Was ich tun werde, ist, dass ich die Höhe für die Tablette auf die sagte, dass Auto und wir tun werden, ist, dass ich zu jedem der Elemente kommen werde. Das ist das Tab-Bild und geben Sie diesem eine Höhe. Nun hatten wir es 100%, aber 100% Rabatt gegeben. Was? Im Moment sind es 100% Zito, richtig? Weil wir keine ah-Höhe auf die Registerkarte gegeben haben. Großartig. Also können wir sagen, ob wir sagen können, dass 840 uns richtig auswählt? Und vielleicht ist das zu viel. Sagen wir, 6 40 Plektren haben Recht. Oder vielleicht stimmt das, aber sagen wir 6 30 Pixel, oder? Ich denke, das ist eine gute Zahl, und jetzt geben wir der einzelnen Registerkarte eine Höhe und nicht der große. Und kommen wir zurück zur mobilen Ansicht, und ich denke, das sieht auch ziemlich gut aus. Und ich finde, es sieht wirklich schön aus. Das ist also ziemlich viel darüber, wie man das anspricht. Ich denke, eine coole Sache, die wir tun könnten, ist vielleicht für die Landschaft. Wir könnten die Lücke entfernen, damit sie sich irgendwie berühren. In Ordnung. Und vielleicht ist das eine coole Richtung, die wir einschlagen können. bin mir nicht sicher, aber ich denke, ich werde sie wie gewohnt behalten. Und ja, das sieht ziemlich gut aus. Das war's also für dieses Video und eine PSA. Seid ihr im nächsten Video? 33. Den Formschnitt erstellen: Na gut, Leute. In diesem Video werden wir fortfahren und diesen Formularabschnitt erstellen. Grundsätzlich, was passiert, ist, dass Personen, die Ihre Website besuchen, tatsächlich den Namen, die E-Mail-Adresse und eine Nachricht eingeben können , und sie können Ihnen ein Formular senden. Und wenn das beendet ist, erhalten Sie eine E-Mail und Sie erhalten Informationen darüber. Es wird irgendwie wieder im Web Flow Silber gespeichert, und ich werde dir zeigen, wo es gespeichert wird und wie du es einrichten und aufhören kannst. Noch einmal, was hier zu beachten ist, ist, dass die Größe von diesem der Behälter tatsächlich kleiner ist als der, den wir verwendet haben ähnlich wie die, die wir auf Dribble verwenden, richtig, Also er andere mit ist 1076 Das ist die Container, mit dem sich von all den anderen unterscheidet, die wir bisher erstellt haben, weil alle diese ein bisschen von 1920 max haben, aber das ist begrenzt 21076 Also wird das Formular auch in diesem Format sein, richtig? Also lasst uns voran gehen und Blut im Blutfluss, richtig? Also zuerst, lasst uns voran und sagte dies zu 14 40. Und ich werde den Körper auswählen und Steuerelement E drücken und Abschnitt eingeben und wird die Formulare Abschnitt sein . Ok. Ich werde eine Polsterung von 20 oben, 1 20 unten. Jetzt das linke und rechte Klopfeln. OK, gehen wir weiter und fügen Sie das hinzu, Aber wirklich wäre egal. Sie in diesem Fall SagenSie in diesem Fall72. Ok. Und was wir tun können, ist, dass ich in einer Presse kontrollierten E. Wir werden eine Sackgasse bekommen, die ein Rapper sein wird. Und ich sage Rapper V zwei, weil die V zwei ein Maximum mit einem 1076 hat, weil das ist, was wir wollen. Okay, also jetzt, im Grunde, ist es sehr einfach. Alles, was Sie tun müssen, ist eine große Zwei-Spalte zu erstellen. Großartig. Es wird also Spalte 1 geben, und es wird Spalte zu sein, und wir haben Abstand von 24 Pixeln von der Spalte. Sogard Abstand von 24 Picks ist zwischen diesen beiden, so können wir voran gehen und verwenden, dass auch. Richtig? Lassen Sie uns also beginnen, indem wir erstellen. Also, was wir tun können, ist eigentlich gut und ich werde das Formular-Gitter nennen, okay? und ich werde sagen, du weißt schon, verwandle das in ein Raster und wir werden zwei Zeilen entfernen, weil wir nur Wunder brauchen und zwei Spalten haben werden. Alles klar, ziemlich gut. Und wir werden weitermachen und ich werde diesen normalen Block kopieren. Oder wir könnten diese Überschrift einfach kopieren. Kopieren Sie das und unsere schwächen lexikalische hier und wählen Sie den Rapper aus. Und fortlaufend, Zuallererst, mein kreativer Block. Richtig, weil wir das brauchen, um der erste linke Block zu sein und diesen normalen Crapper zu nennen und Kontrolle Veto-Paste zu beeindrucken. Also haben sie das, und ich werde diesen Absatztext kopieren, und wir gehen weiter und platzieren das auch. So sieht es aus. Alles klar, jetzt haben wir eine Menge Kampfklassen. Ich werde das alles löschen. Das brauchen wir nicht. Wir brauchen nur diejenige, die wie Traube sagt, weil die Schriftfarbe wahrscheinlich ist. Und kopieren Sie diesen Text, und ich werde weitermachen und ihn stützen, und ich werde diesen kopieren und einen Schritt weiter und das auch stützen. Richtig? Also die nächste Sache ist, um sicherzustellen, dass wir wissen, ist, dass das Gitter muss 24 Picks ist weiß. Jemand sagt Spalten 24 Spalte Gap Pecan getan. Und hier werden wir weitermachen und ein neues Element College hinzufügen, die Farmen, die Farmen Lesepresse, Land und Forschen für Formulare. Wir haben also einen Nicholas Reform-Block. Ich werde das einfach reinziehen, und jetzt wird es so aussehen. Okay, das erste, was ist, dass wir weitermachen und,weißt du, weißt du rufen wir einfach diesen Farmblock an, okay? Und wir können fortfahren und sofort mit der Anpassung beginnen. Also diese Art von mit dem Namen und, äh, wenn man sich die Einstellungen einen 16 Pixel Absatz anschaut, richtig. Also werde ich den Namen auswählen und 16 Plektren von Absatz sagen. Das ist, was wir benutzt haben. Wir werden dasselbe für die E-Mail und die Nachricht tun, also werde ich sagen, E-Mail-Adresse 16 Plektren von Absatz. Und die Sache hier ist, dass die Farbe helle Traube ist, aber wir wollen, dass das weiß ist. Ich gehe voran und füge eine Combo-Klasse hinzu und nannte uns weiß. , Also wollten wir,dass das weiß ist. Sag das, Dwight, und geh weiter. Und ich sagte, das soll warten. Richtig? Ausgezeichnet. Jetzt gibt es ein wenig Abstand, die etwa acht Pixel beträgt. Also werde ich gehen und das Textfeld auswählen. Ich rufe einfach jedes Textfeld an, und ich werde einen oberen Rand von acht Pixeln haben. Wir haben also einige Abstände, die das Gleiche tun. Wir nennen dieses Textfeld, okay? Und dieses Textfeld hat eine andere Farbe aus l eins. Also werde ich das auswählen und die Farbe hinzufügen, die wir wollen, die L eins ist. In Ordnung. Und das verändert dich letztendlich. Dies hat auch eine Grenze. Sie können das hier sehen. Nichts gibt es so manchmal als Käfer. Also alles, was Sie tun müssen, ist das Textfeld auszuwählen und ein hinzuzufügen und es dann einfach so zu löschen und, wissen Sie, wir können die Breite auf Null setzen, also entfernen Sie das einfach und es sieht ziemlich gut aus. Jetzt haben wir Tee, das ist Name E-Mail, und wir haben Nachricht und der Abstand zwischen E-Mail und Nachrichten sind 40 Pixel. Ich werde das Textfeld verkaufen, und ich werde einen unteren Rand von 40 Picks hinzufügen, ist richtig. So wird es sein und ich werde den Ah Absatz auswählen. Ich kopiere das und füge es ein. Und wenn ich das hier runterschiebe und das auch auswähle, kopiere das und füge es ein und wir schieben das nach oben, okay? Und es wird eine Nachricht geben, okay? Und wir sind hier unten Text mit Gordon. Passen Sie dies an und fügen Sie die Eigenschaften hinzu. Also haben wir hier ein Textfeld, und wenn ich in den Einstellungen hierher komme, haben wir einige Optionen. Also zuerst, wie lautet der Name, den wir hier verlassen würden? Wir nennen das den Namen einer Person, okay. Und wenn Sie einen Platzhaltersteaks hinzufügen möchten, können Sie das hinzufügen, damit Sie Dinge wie Ihren Namen sehen können, so dass ein Platzhaltertext sein kann . Und welche Art von Text Gefühl ist, es ist ein einfaches E-Mail-Passwort für Nummer Nummer. Wir könnten einfach sagen, es ist eine Milz und Sie sind Sie wollen über ihre entscheiden Dies ist ein erforderliches Textfeld und Sie können ja sagen. Wir wollen, dass dies ein geforderter Experte ist. Ziemlich einfach. Gehen wir zum nächsten. Ah, hier können wir sehen, geben Sie Yard E-Mail und wir können voran gehen und sichtbar wieder verlangen. Wir können den Texttyp sehen, um E-Mail zu sein. Es wird eine Nachricht geben, und das wird eine Nachricht sein. Und, äh, was wir tun werden, ist, dass wir das in einen einfachen Text ändern werden, denn das wird ein riesiger und einfacher Text sein, , in dem die Leute Sachen eingeben können, und wir können gehen Sie voran und machen Sie dies ziemlich groß, die auf 100 Pixel ist. Also werde ich eine Komma-Klasse hinzufügen und diese 100 Pixel sagen, nur für den Fall, und dann gehen wir in die Höhe dieser 200 Pixel, richtig? Ah, das ist es so ziemlich. Jetzt haben wir diesen Button , der ziemlich groß und groß ist, also haben wir den Submit-Button und ich werde die Button-Klasse hinzufügen. Ich denke, wir nennen es CD, und wenn ich das mache, bekommen wir das. Aber was ich tun werde, ist, dass ich eine neue Klasse erstelle und diesen Formular-Button aufrufen werde , denn das ist ganz anders als alle anderen Schaltflächen, die tot sind. Eso die 1. 1 Ich werde sagte die mit diesem zu 100%. Also nimmt es den ganzen Witz ein, dann haben wir den Text, der 18 Pixel ist. Also werde ich den Text auswählen und wir werden gehen und das auf 18 Plektren setzen, damit wir das vordere Gewicht kochen. Und wir werden auch sagen: Lasst uns loslegen, damit wir darauf klicken können. Und wenn Sie auf die Schaltfläche klicken, müssen Sie tatsächlich in der Bearbeitung Informationen hier. Also werden wir sagen, lasst uns anfangen und wenn du plus auf den Knopf hast, kannst du etwas lording Zustand haben und schwächen. Im Moment steht es: Bitte warten Sie, Bitte warten Sie, wir können dieses Ding wie alles in Ordnung einreichen. Und die drei Punkte, die funktionieren sollten. Und auch wir haben einige oben und unten Polsterung von 24, so dass wir die Farm auswählen können. Burton und Schwächen sagen, 24 oben und 24 unten. Richtig. Und auch, die Farbe, natürlich, muss geändert werden, um unsere Dieses jetzt sieht ziemlich gut für diesen Fall. Was ich tun werde, ist, dass ich einfach den Platzhaltertext entfernen werde, weil das Design keine hat , also möchte ich nur voran gehen und diesen vorerst entfernen. Und so sieht es so aus. Und wenn Sie voran gehen und tippen Sie auf die Vorschau-Schaltfläche und klicken Sie darauf, können Sie sehen, dass es sagt, füllen Sie bitte die Felder aus und es wird gehen Sie voran und geben Sie zufällig Text ein. Nun, Sie können das sehen, wenn ich zufällig, bis Sie sehen, dass es einen Text gibt, der hier drüben ist . Also wird es weitergehen und Chilton sagen, KBS und jetzt haben wir diese Technologie irgendwie bearbeitet. Also, was Sie tun möchten, ist, den Text einzugeben, dann möchten Sie zurück zum Web-Flow gehen. Also, was wir tun werden, ist, dass wir voran gehen und einfach die Farbe dieses weiß ändern. Und das ist die Typographie Farbe. Und jetzt sollte das funktionieren. Also gehen wir weiter und sagen einfach Kinder, KBS und Arbeit. Das ist, dass in der E-Mail, ich d richtig und nicht ganz sicher, was dieser Status und lassen Sie uns in einer Nachricht hinzufügen, Ich werde nur sagen hallo jetzt, wenn Sie hier sehen, das Problem hier ist, dass dieser Text seine Art von von hier aus fühlen und was wollen, ist, dass wir eine neue Komponente verwenden, die einen gewickelten Textbereich ist, richtig? Wir nehmen das und bringen das hier rein. Und ich denke, das ist eine viel bessere Darstellung. Und hier können wir an einem Platzhaltertext sehen und wir können sagen, dass es erforderlich ist. Und wir können dieses Textfeld löschen. Und dafür werde ich nur sagen, Ah, Ah, Textfeld und geben diesem eine Höhe von 100 Pixel rituelle Dicamba-Klasse, die wir hinzugefügt haben. Und das sollte gut sein. Und der Platzhaltertext gehen Sie voran und die Führungslinie, dass wir keinen Platzhaltertext so schnell brauchen . Gehen wir weiter und fügen Sie einige Informationen hinzu. Ich werde nur sagen, sogar ich werde abc bei gmail dot com sagen, richtig? Und ich möchte sagen, hallo ist die Botschaft. Und wenn ich voran gehe und tippe auf, dass loszulegen, denken Sie daran, dass es sagt, versuchen Sie das Formular auf Ihrer veröffentlichten Seite. Also habe ich es getan. Ich habe vergessen zu erwähnen, dass Lassen Sie uns voran gehen und veröffentlichen Sie dies in ausgewählten Domains und es geht voran und Vorschau dieses Recht. Lasst uns schnell für das Thema gehen. Willst du ein paar zufällige Sachen sagen ABC bei der Mahlzeit dot com auf und wir können hallo sagen, richtig? Also jetzt gehen wir voran und beginnen Sie mit dem Einreichen von sagt zu enthalten. Und da steht, danke. Ihre Einreichung hat Bean erhalten. Im Moment gibt es noch etwas. Ein paar Dinge, die wir tun können, ist, dass wir gehen wählen Sie den Formularblock und lassen Sie uns klicken. Wenn Sie also auf das Zahnradsymbol klicken, erhalten wir drei Zustände, wir sind normal geworden. Wir bekommen Erfolg und wir bekommen besser klicken Sie auf den Erfolg es und wir können Art anpassen, wie diese ganze Sache aussieht. So zum Beispiel können wir zum Beispieleine neue Klasse hinzufügen und diesen Erfolg nennen und was ich mit Augen machen möchte, die ich irgendwie eine grüne Farbe zum Hintergrund hinzufügen möchte. So sieht es so aus und sogar den Text, den ich sagen kann, Erfolgstext. Und wir könnten das machen,weißt du, weißt du, wie du weißt schon, 18 Fixes und du weißt schon, fett und dass du sagen kannst, was immer du willst und sogar die Farbe so ändern kannst, wie So etwas sollte jetzt funktionieren. Wir können auch weitergehen und zur Interstate gehen und die Interstate sieht so aus . Also hier können Sie wieder voran gehen und die Klasse so anpassen, wie Sie wollen. Vielleicht könnten wir weitermachen und das tun. Wählen wir die Editornachricht aus. Und sagen wir, wir sind wie eine Art dunkelrote Farbe. In Ordnung, so etwas. Und wir können den Text einstellen und die Farbe dieses auf Weiß ändern. So etwas wie dieses auf jetzt können Sie zurückgehen und wieder in den normalen Zustand kommen. Und so sieht es so aus. So dass es so ziemlich für dieses Video im nächsten Video, wir werden voran gehen und machen dies eine reaktionsschnelle. Also, ihr seid es im nächsten Video. 34. Den Form-Abschnitt Making machen: Richtig. Also in diesem Video, wir gehen voran und machen dieses Formular reaktionsschnell, sicherlich super einfach. Also lasst uns anfangen. Also geh zur Tablet-Ansicht, und das ist, was wir haben. Und, ja, also fangen Sie an. Offensichtlich, durch die Verringerung der Größe von hier. Also setze ich das auf 60 oder 80 oben 80 unten, 40 auf der linken Seite und 40 auf der rechten Seite. Ich denke, das sollte für die Tablet-Ansicht in Ordnung sein. Ich denke, das ist das kleinste, und wenn wir zunehmen, denke ich, dass sie meiner Meinung nach ziemlich gut sein sollten denke ich . Also lasst uns in die Landschaft gehen. Und das ist, wo wir können. Ich will Sachen ändern. Das erste von allen, wir sind bereit, ist dies auf 64 auf der oberen 64 auf der unteren 20 auf der linken Seite und drehen auf der rechten Seite. Nun, ich persönlich möchte dies zu einer einzigen Spalte machen. Größter. Ich werde die Säule entfernen, damit wir alles in einem Tropfen haben. Werden wir eine Lücke haben? 48 Picks ist für die Rose, so dass Sie wissen, wir haben einige gute Distanz und ich denke, das sieht ziemlich gut aus schon. Schauen Sie immer ein mobiles Porträt. Und, ähm, ich denke, das sieht toll aus. Nichts zu viel, worüber man sich Sorgen machen muss. Das ist so ziemlich es für dieses Video auf in der nächsten Zukunft. Wenn Sie voran gehen und entwerfen, bauen Sie den Fuß, so ist es ihr Jungs im nächsten Video. 35. Aufbau des Footer: Richtig, Leute. In diesem Video werden wir die Fußzeile aufbauen. Nun, das ist nicht das Ende des Kurses, denn Sie werden eine Menge Spaß Interaktionen schaffen und diese Website fühlen sich sehr lebendig. Das ist also der letzte Teil, in dem wir Sachen bauen werden, und wahrscheinlich wird in den nächsten paar wirklich weitergehen und Interaktionen und Animationen hinzufügen und die Website viel mehr Spaß machen . Wie strukturieren wir das? Fangen wir von den Grundlagen an. Offensichtlich haben wir einen Abschnitt, und in diesem Abschnitt werden wir eine Fußzeile haben und es wird einen Rapper geben, der wieder unser Standard-Rapper sein wird. Und die andere Sache nicht hier ist, dass, wenn Sie die Noten rechts einschalten, dies in einer bestimmten Weise strukturiert wurde. Richtig? Also haben wir 123456789 10 11 12 Wir haben jetzt 12 Spalten. Fünf dieser Spalten nehmen Platz für,wissen Sie, wissen Sie, die Navigationslinks und der Rest ist für den Namen und wissen Sie, die Symbole und einige Textilien hier jetzt, wir könnten voran gehen und diese 12 Spalte bauen. Großartig. Alles klar, was absolut möglich ist. Oder was wir tun können, ist, dass Sie zwei Spalten haben können, aber das Verhältnis ändern, wenn es richtig ist, so haben wir 12 und fünf durch 12 ist etwa 40% richtig? Es ist 41,6, aber es ist etwa 40%. So können wir sagen, dass dies bis 46 40% nehmen kann und dies kann Kit bis 60% nehmen. Es gibt also zwei Möglichkeiten, dies zu tun. Verwenden Sie entweder 12 Spalten oder verwenden Sie zwei Spalten und geben Sie ihm ein anderes Verhältnis, richtig? Lassen Sie uns also voran gehen und unseren Workflow aufbauen. Also werde ich zu einem Web-Float gehen und gehen wir zurück. Sagen wir das zu 14. 41. Alles in Ordnung? Und lassen Sie uns wählen, Osama Pressen zu fordern, einen neuen Abschnitt zu erstellen, der diesen Abschnitt nennt, und ich werde voran gehen und diese Fota nennen. Okay, jetzt, die andere Sache zu beachten ist, dass ich voran gegangen bin und angesichts dieser eine feste Höhe oder 422 Picks ist in Ordnung, also werde ich gehen und eine feste fest abnehmen 422 Picks ist in Ordnung. Und wir wollen auch etwas Polsterung oben und unten. Also sind es 80 oben. Das Gleiche. Es ist nicht 20, sondern 80 oben. Es sind wieder 80 auf der Unterseite. 72 links, 72 rechts. Auch die Farbe ist anders. Die Hintergrundfarbe ist, ähm, Sie wissen das von einer, äh, lilafarbenen Farbe, die wir benutzt haben. Und jetzt schaffen wir einen Rapper für die inneren Kondome. So erstellen Sie einen Block. Wenn jemand diesen Rapper anruft, wird es unseren regulären Annullierungs-Rapper geben, richtig? Sieht fantastisch aus. Und jetzt machen wir das in ein Gitter, richtig? Jemand erstellt eine neue Klasse und nennt dieses Foto. Ordnung, also in den Fuß, Einverstanden. Ich werde das zu einer Karotte machen, und wir wollen offensichtlich nur „Wonder off“ Zwei Säulen und Wunder, und der Spaltenabstand wird 24 sein. Hörst du das jetzt? Wir haben etwas namens fr, was im Grunde Bruchteil ist. Was ich tun kann, ist, dass ich dies tatsächlich von 0.1 fr ändern kann und dies auf 0,4 Aufwand sagte. Alles klar, und wenn ich sage Nullpunkt für das bedeutet, dass dies ein f r und 0,4 ist. Aber ich möchte irgendwie, dass dies 0,6 fr ist, so dass dies am Ende einen Punkt für eine weit, F r steht für Bruch, und am Ende wollen wir alles eins sein. Also 0,6 plus 0,4 ist eins. Im Grunde teilen wir es im Verhältnis 40 60 auf. In Ordnung? Könnte getan werden. Lasst uns jetzt einen Block erstellen, okay? Und wir werden diesen normalen Brock Normal Block Rapper nennen. Und hier fangen wir an, indem wir das Logo einbringen, das wir hatten. Also werde ich mir das Logo direkt über diese lokale SVG schnappen. Jetzt wollen wir, dass dieses Logo in einem Linkblock liegt, denn wenn ich darauf klicke, möchte ich irgendwie nach oben aus dem Spielfeld navigieren. Also werde ich die Kontrolle drücken, essen und einen Block schaffen. Entschuldigung. Link Block und ich werde dieses Bild in den Linkblock setzen. Ok? Und ich möchte den Linkblock auswählen, und ich werde dieses Fotologo nennen. Ok? Nun, lassen Sie uns die Größe dieses in Fig MMA sehen, es ist etwa 40 Pixel hoch. Also werde ich einstellen, ähm, die Bildhöhe machen 40 Picks ist okay. Das sieht ziemlich gut aus. Wir haben auch diese Symbole unten, also werde ich einen neuen De Block erstellen, okay? Und es wird für die wird normal, Rapid. Und das wird für die Ikonen sein. Also lasst uns voran und schnappen uns die Symbole. Also müssen wir nach Witter. Wir haben LinkedIn und wir haben einen Dribbel. Gehen wir weiter und lassen uns dribbeln. Da gehst du. Jetzt gehen wir weiter. Und nur schnell werde ich diese sozialen Symbole nennen. Nun, es gibt einen Abstand hier drüben, der um essen ist, was auf 16 Bildern ist. Also werde ich gehen und eine Marge von 16 Pixeln hinzufügen, und ich war in der gleichen Klasse zu den anderen beiden als auch, um diese sozialen Symbole zu nennen und voran zu gehen und wählen wird nicht soziale Symbole genannt. In Ordnung, jetzt, hier drüben, haben wir auch einen Abstand von unten , der auf 32 Pixel vom Logo ist. Also werde ich den Linkblock auswählen, das Foto-Logo ist und am unteren Rand von den Reto-Pixeln. Richtig? Und das sieht ziemlich gut aus. Ordnung, jetzt werden wir auch diesen Text hinzufügen, also werde ich von Anfang an erstellen, indem ich einen neuen Textblock erstelle. Also werde ich einen neuen Textblock erstellen, und hier werden wir diese Informationen einfach kopieren, und dann werden wir sie aufbauen und hören, was ich tun werde, sind 16 Pixel-Absätze . Ich werde Ziffer 16 Pixel sagen, und wir wollen, dass es Farbe ist, wie Traube ist, und das sieht so ziemlich aus. In Ordnung. Eine andere Sache ist, dass wir sehen können, dass diese beiden Abschnitte irgendwie nach oben gezwungen sind, und diese beiden sind, zum Glück unten. Also werden wir die Flex-Eigenschaft verwenden, um morgen gleichmäßig verteilt zu sein. Also wollen Sie offensichtlich das übergeordnete Element auswählen, das der normale Rapper ist. Und jetzt möchte ich ihm eine Flex-Klasse geben. Wenn ich also flex sage, könnten Sie sehen, dass wir flex vertikal links oben haben. Das ist das Einzige, was wir getan haben. Aber wir werden noch einen gebrauchen. Wir werden einen anderen benutzen. Jemand nannte diesen Flex vertikal groß. Und ich sage links, und ich sage Raum dazwischen, oder? Was bedeutet das alles? Also werde ich anfangen, indem ich das in eine Flex-Box umwandle, okay? Und wir wollen, dass die Richtung vertikal ist, okay? Und offensichtlich wollen wir, dass die Ausrichtung nach links auf der Rechtfertigung Raum zwischen sein wird , was bedeutet, dass es in den Weltraum geht. Jedes der Elemente, weißt du, zum Rand der Haut wird es an den Rand des Bildschirms schieben. Nun, die Sache ist, wir wollen nicht, dass diese Symbole auch geschoben werden. Also vereinen wir diese beiden irgendwie. Also ein weiterer Club, diese beiden, werde ich einen neuen Dev-Block erstellen, okay? Und es wird einen einfachen, normalen Rapper geben, und wir werden uns die Navigation ansehen, um das besser zu verstehen. Also hast du einen Fuß hoch, was ein Abschnitt ist, und dann haben wir einen Rapper normalen Rapper, und dann haben wir den linken Rapper, der der normale Rapper ist, und das hat den Raum zwischen Flex-Eigenschaft und nach unten gegen. Also haben wir das Fotologo. Nun, da dieses Nickerchen normale Rapper einen Flex zwischen Eigentum hat, wird es die unmittelbaren Kinder und unmittelbaren Kinder, die wir wollen, das Essen A Logo ? Ordnung, auf den Social-Media-Symbolen in einem und Absatz, um das zweite Kind zu sein. Also sind wir normal. Rapper. Das sofort zu Kindern ist die normale Schnelligkeit hier drüben. Was diese beiden hat. Sie können sehen, eine auf der anderen ist dies. Und jetzt, was passiert ist, dass seit diesen beiden anderen Medien Kinder, es diese beiden unmittelbaren Kinder in Richtung der Kante aus dem Container schiebt. Richtig? Das ist so ziemlich, äh, was wir wollen. Großartig. Also ein anderes ist dies getan. Wir möchten auch sicherstellen, dass diese Symbole anklickbar sind. Was wir also noch einmal tun müssen, ist, dass wir einen Linkblock hinzufügen müssen, okay? Und wir werden diese Symbole in den Linkblock stecken. Richtig? Ähm, und lassen Sie uns einen neuen Linkblock erstellen. Lassen Sie uns dieses Symbol in den Link-Block setzen und wir brauchen einen weiteren Link-Block. Und wir haben diese Linda Nikon reingesteckt , und wir können jeden dieser Link-Blöcke auswählen und eine Klasse geben, wir können sagen, Social Link Block. , und wir können jeden dieser Link-Blöcke auswählen und eine Klasse geben, Und dafür können wir sagen, soziale Link blockieren Bemühungen. Außerdem können wir sagen, Social Link Block, nur um sicherzustellen, dass wir einen Namen für alles haben. Okay, ziemlich gut. Also, jetzt müssen Sie nur tun, wenn Sie ihm keinen Link geben, Sie können einfach auf die Elementeinstellungen klicken, und Sie können den Link hinzufügen, nachdem Sie allein hier sind. Alles klar , für die nächste haben wir jetzt zwei Elemente. Die wertvolle Anweisung wird 50% Platz dazu und 50% Platz dafür geben. Okay, jetzt, wenn Sie es als Link betrachten, können Sie sehen, dass dieser Link den ganzen Raum einnimmt. Und was passiert ist, dass, wenn ich über diesen Bereich schwebte, ich möchte, dass der Link auch aktiv ist. Ich will nur nicht, dass es Zeh aktiv ist, wenn ich es auf dem Text habe. Ich kann nicht wollen, dass es aktiv ist. Und ich schwebte auf diesem ganzen Abschnitt. Richtig. Was wir also tun können, ist, dass wir mehrere Link-Blöcke erstellen und den Text hinein setzen können. Richtig? Also lasst uns weitermachen und das tun. Sie werden anfangen, indem sie einen neuen Block erstellen , der der richtige Abschnitt sein wird. Und ich sage einfach normal Rapid, denn das ist eine normale Klasse, die wir geben. Und drinnen werde ich einen Link-Block erstellen. In Ordnung? Und das wird Foto-Link-Block sein. Ok? Und was zu tun ist, dass ich anfangen werde, indem ich einen Textlink hinzufüge. Zuerst drückt jemand Steuerelement E und fügt einen Textlink hinzu. Oh, wir können in diesem Fall einfach einen Textblock sagen, weil, uh, okay, und hier, was ich tun werde, ist, dass uh, okay, ich diesen Fotolink nennen werde, okay? Dies ist ein Fuß ein Link, so können wir wählen, so dass wir sehen können, dass wir etwas Polsterung oben und unten haben, was etwa acht Pixel ist, so dass wir gehen und setzen Sie die Polsterung aus dies auf acht Pixel oben auf acht Pixel auf der Unterseite . Ich denke, wir machen das zu einer 12. Lass uns eine 16 auf der Oberseite und 16 auf der Unterseite 16 auf der Oberseite und 16 auf der Unterseite machen. Sieht ziemlich gut aus. Und auch für den Fotolink Block, was wir tun können, ist, wir können diese Erklärung entfernen oder hier, so dass es nicht so aussieht. Und auch für den Fuß ein Link. Sehen wir uns diese Einstellung an. Es ist also weiß. 16 Pixel, Absatz bereit, Einfach. So können wir voran gehen und die Schriftgröße ändern, um 16 zu sein, wir können voran gehen und machen dies weiß, rechts Sie gehen, gehen wir voran und machen nur vier Kopien, damit wir den Fuß einen Link auswählen können, damit wir sagen können Kopieren Einfügen basiert und basiert, Richtig? Also lasst uns weitermachen und diese ändern. Wir sehen uns nach Hause. Es wird sein, dass es Arbeit sein wird. Und als nächstes haben wir Prozess. Großartig. Also, wenn Sie sich die Struktur ansehen, was wir haben, ist, dass Sie einen normalen Rapper haben und innen, dass wir diese vier Links jetzt haben, das Problem hier ist, dass wir setzen wollen. Also, was ich tun werde, ist, dass ich diesen Linkblock auswähle und jetzt dupliziert . Das bekommen wir jetzt für mich. Ich möchte nicht zuletzt Link Block jemand sein Gehen Sie voran und löschen Sie das vorerst. Wir brauchen nur Block und Leseliste speichern. Ich werde sagen, Store, den ich in Blawg sehen werde. Ich werde die Leseliste sehen. Okay, jetzt sehen wir ein paar Probleme, richtig? Also lasst uns weitermachen und es reparieren. Das erste, was ist, dass wir diesen Fotolink Block haben, hat, die wir tun werden, ist, dass vier Linkshat, diewir tun werden, ist, dassich weitermachen und ihm eine nasse 50% geben werde, richtig? Was bedeutet, dass es 50% Rabatt auf den Platz nehmen wird. Und das Gleiche wird hier passieren, dass es 50% Rabatt auf den Raum einnimmt, was genau das ist, was wir wollen. Nun, die Sache ist, das ist irgendwie in der Mitte, Ordnung? Aber wir wollen, dass das ganz oben ist. Was ich tun kann, ist, dass ich eine Komma-Klasse hinzufügen kann und wir können Auswahlen sehen. Ordnung, jetzt haben wir diese gemeinsame Klausel, die flex vertikal links oben sagt, aber wir wollen eine neue Kampfklasse, weil flex vertikal sie untereinander setzen wird . Wir müssen sie nebeneinander stehen, oder? Ich beginne ein neues und nenne diesen Flex horizontal in Ordnung? Und unterstrichen. Wir wollen Toby links und wir wollten top sein, oder? Also gehen Sie voran und biegen Sie das. In Ordnung? Und dann werden wir sagen, flex horizontal wird online oben sagen und sagen, rechtfertigen links, rechts, Das ist, was wir wollen. Und jetzt ist das so ziemlich erledigt. Also, was ich versuche zu sagen ist, wenn ich zur Vorschau gehe und wenn ich auf einen dieser Bereiche schwebe, richtig, können Sie sehen, dass, obwohl ich nicht auf dem Text passe, weil dieser ganze Abschnitt ein Link-Bereich ist , Ich kann das aktivieren. Okay, jetzt, eine schnelle Sache, die wir tun können, ist, dass wir einen Hover-Zustand hinzufügen können. Also lassen Sie uns tatsächlich den Fuß einen Link wählen. Ok? Lets gehen in einem Hover-Zustand und in der Vorhersage. Was ich tun werde, ist, dass ich die Farbe mache und diese Cyanfarbe ändern werde , die wir haben, richtig? Und wir werden weitermachen und ich werde in den Nicht-Staat zurückkehren und schnell zu den Übergängen gehen, die das auf 3 50 setzen und in der Lockerung werde ich voran gehen und das so leicht oder vor Gericht stellen. Und wir gehen auch zur Deckkraft. Onda, ändere das Eigentum. Tun Sie die Schriftfarbe, richtig? Und jetzt sollte es aussehen, was wir perfekt waren. Wenn ich also schwebe, können Sie sehen, dass diese nicht hervorgehoben werden können. Richtig? Und, äh, das ist wirklich cool, oder? Also haben wir jetzt etwas, das so aussieht. Also im nächsten Video werden wir weitermachen und das reaktionsschnell machen. Also sehe ich euch im nächsten Video. 36. Den Footer reagieren lassen: Richtig. In diesem Video werden wir weitermachen und diesen Fuß auf andere Breakpoints reagieren lassen. Also lasst uns anfangen. Geht auf die Tablette Bruchpunkt zuerst, und das ist, was wir haben. Jetzt sieht das ziemlich gut aus, würde ich sagen, aber vielleicht könnten wir voran gehen und einfach sicherstellen, dass unsere regelmäßigen Muster auf beiden Seiten gleich sind. Ähm, achtziger Jahre. Fein dafür sollte gut genug sein. Ähm, ich denke, was ich tun möchte, ist in diesem Fall der Rapper, den wir hatten, wie ein 60 40 Raster. Kann ich das machen, fr und eins fr oder sorry, eine ferne und Europa oder in sechs fr so, dass wir einige Abstände wie diese bekommen. Thea, eine andere Sache, die wir tun könnten, ist wahrscheinlich wieder in der Ferne zu sagen. Also haben wir das irgendwie in 1/2 geschoben. Richtig? Wenn Sie voran gehen und das auf die anderen großen Kunden skalieren, sehen wir, dass wir so etwas bekommen, wir sind in Ordnung. Ich schätze, je nachdem, wie wir das wollen, könnten Sie voran gehen und strukturieren. Du könntest es gleich behalten. Ein 60 40 Verhältnis selbst berührende Arbeit. Gehen Sie hier zum mobilen Landschaftspunkt. Wir wollen etwas anderes machen. Wir werden etwas schaffen, das dem mobilen Breakpoint ähnlich aussieht, den wir erstellthaben , den wir erstellt Art von sieht so aus, weil der obere Abschnitt und dann wir Links haben, und dann haben wir diese Informationen. Also lassen Sie uns voran und sagen, dass so hier, oder was wir tun können, soll fallen. Lassen Sie uns voran und entfernen Sie den Rapper und machen es zu einem einzigen Säulenraster. In Ordnung. Und das ist es, was wir bekommen. Und jetzt das hier, wenn du es dir ansiehst. Aber auch, wir wollen sicherstellen, dass die keine feste Höhe ist, weil wir eine Höhe irgendwo Teoh die ich denke, wir geben es an den Fuß, glaube ich so. Ich werde diese Höhe entfernen und sagte, dass Do auto. In Ordnung, also wissen wir, dass wir jetzt gut im Weltraum sind. Das Problem hier ist die Tatsache, dass diese drei Clubs zusammen sind, was wahrscheinlich bedeutet , dass wir wollen, dass die Reihenfolge anders ist. Richtig? Also, wie sollen wir das reparieren? Damit wir es beheben müssen, ist es durch die Struktur aus den Elementen. Also, wenn man sich die Navigation hier anschaut, also haben wir den normalen Rapper, der die normale Schnelligkeit ist. Und dann haben wir das, was jetzt für alle Links sein wird,hier drüben, hier drüben, Diese drei sind zusammen, aber das muss eigentlich ein separater Gegenstand sein. Richtig? Was wir also tun können, ist, dass wir zum Arbeitsplatz-Punkt zurückkehren können, weil wir sicherstellen wollen, dass wir die Änderungen dort vornehmen. Hier haben wir diese normale Wrap jetzt. Vorfall von dieser Sache. Es ist aus, dieses Element in den normalen Rapper zu stecken. Wir können es draußen stellen, oder? Und wenn wir es draußen stellen, meine ich, lass mich das richtig machen, wenn ich den normalen Romero hier nehme. Hier haben wir also den fruchtbaren Boden. Wir haben einen Text. Ich werde das nach draußen kommen lassen, okay? Und ich werde das hier auch draußen stellen. In Ordnung? Und jetzt, was passiert ist, ist, dass wir irgendwie diese 22 durch zwei Säulengrade erstellt haben. Jetzt. Sieht perfekt aus, oder? Sieht gut aus. So gehen Sie zurück zu Tablette Bruchpunkt es können Sie sehen, dass es gut aussieht. Wir haben einen Landschaftsbruchpunkt, Ordnung. Und jetzt sehen wir, dass wir wirklich bekommen, was wir wollten, oder? Denn die Sache ist, das ist ein Element. Diese ganze Sache ist ein weiteres Element. Und das ist ein weiteres Element, richtig? Das mussten wir also tun. Und wenn Sie zur Reaktionsfähigkeit gehen, wenn Sie zu gehen, wenn Sie Änderungen vornehmen, diese Reaktionsfähigkeit, sie haben keinen Einfluss auf die Struktur außerhalb der Navigation. Die Navigationsstruktur bleibt unverändert. Und das etwas, das du mein Jetzt behältst, schauen wir uns die Abstände an. Wir haben also einiges Abstand zu den Themen, die 40 Pixel oben und 40 Pixel unten sind . Also werde ich das mit der Hilfe von der Säule tun, sind die Roberts. Ich setze das auf 40 und wir werden etwas haben, das so aussieht. In Ordnung, das sieht gut aus. Offensichtlich wollen wir das ändern. Mache 20 links, trainiere rechts, äh, 64. Oder wir können sagen 48 oben und alle 30 64 auf der Spitze. Ich habe irgendwie vergessen, was wir benutzt haben. Ja, wir haben 64 64 auf der Oberseite und 64 auf der Unterseite benutzt. Und das sieht so ziemlich ziemlich wird auf mobilen Breakpoint genauso aussehen wie. Eine andere Sache, die wir tun könnten, ist tatsächlich voran und fügen Sie alle diese Links in einer Zeile. Das ist eine persönliche Vorliebe in Kuss, wenn du hier siehst oder hörst, haben wir das nicht getan. Aber für den Fall, dass Sie alles untereinander haben wollen, alles, was Sie tun müssen, ist, da wir nur diese Extraklasse haben, kann ich voran gehen und sagte, der Stuhl vertikal auf. Weißt du, wir sollten etwas bekommen, das so aussieht, und es wird in all den anderen Breakpoints ziemlich gleich aussehen, weil wir die Änderungen vornehmen, nur um den großen Bruchpunkt des mobilen Porträts zu verdauen. Aber ich werde es einfach behalten. Was das Design und die Kontrolle Z angeht, werden wir etwas bekommen, das so aussieht, oder? Das ist also so ziemlich dafür, weißt du? Und ich sehe euch im nächsten Video 37. Erstellen einer Abschnitt Scroll: In Ordnung, also haben wir so ziemlich weitergemacht und die gesamte Website aufgebaut, und sie sieht phänomenal aus. Und es sieht toll aus. Wir haben ein paar coole Interaktionen hier und da, und wir werden das noch lustiger und interaktiver machen, und es wird wirklich fantastisch sein. So wie Sie sehen können, sieht es irgendwie fantastisch aus. Sie können dies tatsächlich in der ausgewählten Domäne veröffentlichen. Und du weißt, du könntest das sogar auf deinem mobilen Gerät ansehen. Oder wenn Sie ein iPad oder Tablet haben, können Sie das sehen und überprüfen, wie es aussieht, denn dies ist eine echte Website. Ordnung, das ist fantastisch Bereich Website. Jetzt. Was wir tun werden, ist, dass wir anfangen werden, ein paar Interaktionen und Animationen hinzuzufügen und es Spaß zu machen. Das erste, was zu tun ist, fügen Sie Links, tun Sie diese Links, so dass sie Art von Scrollen zu einem bestimmten Abschnitt von der Website. Was soll ich damit meine? Also werden wir tun, ist, dass wir drei Links haben oder hier, oder? Wir waren Erfahrung. Wir haben Arbeit, und dann haben wir Fotografie. Was wird passieren, wenn ich auf Erfahrung klicke, rechts wird die Seite durch diesen Abschnitt scrollen, Ordnung? Und ich werde diesen Abschnitt auswählen, den wir haben, in Ordnung, Ordnung, und ich werde hier und hier rüber kommen. Ich habe etwas namens „I. D. “. Dies ist als Konsens für die Seitenverlinkung. Ich gehe einfach voran und rufe dieses E X P für Erfahrung an, okay? Und ich möchte in den Erlebnis-Navigationslink kommen, und hier werden wir diesen wählen, der großen Abschnitt sagt, und ich werde einen bezahlten Abschnitt wählen und ich werde E XP wählen. Also, was passiert ist, wenn ich zur Vorschau mehr gehen und wenn ich auf Zweckmäßigkeit tippe, können Sie sehen, dass die Seite Schulen auf den zweckmäßigen Abschnitt. Richtig? Und das ist und das ist ziemlich cool. Lassen Sie uns das Gleiche für Arbeit und Fotografie machen. Also für die Arbeit werde ich hier gehen und den Bereich Projekte auswählen, und ich werde diese Arbeit anrufen, okay? Und ich komme hier runter zum Fotografiebereich und wähle diesen Abschnitt aus und rufe dieses Foto nur aus dem College-Foto an. Sofort. Lassen Sie uns wieder nach oben gehen und wir werden den Arbeitslink auswählen und zum Seitenabschnitt kommen, und hier im bezahlten Abschnitt werde ich Arbeit und für die Fotografie wählen. Ich werde jetzt die Fotografie wählen, um Kontakt aufzunehmen. Sie könnten entweder eine E-Mail-Idee haben, eine Telefonnummer, die sie nimmt, oder Sie könnten sie tatsächlich den ganzen Weg nach unten schrauben lassen. Führen Sie den Geschäftsbereich Let's Talk aus. Gehen wir also voran und machen Sie das im Formularabschnitt. Lassen Sie uns diesen Kontakt anrufen in Ordnung, und wir können wieder nach oben gehen und wir können zum Kontaktbereich gehen, und hier können wir auf Paige Abschnitt klicken und Sie können Paige Kontakt speichern und dann gehen wir rechts. Wenn Sie also voran gehen und eine Vorschau darauf sehen, können Sie sehen, dass, wenn ich auf Zweckmäßigkeit klicke, es zum zweckmäßigen Abschnitt gehen kann. Wenn ich auf Arbeit klicke, ist es in der Nähe des Arbeitsabschnitts auf. Wenn ich auf Fort of Photography klicke, ist es in der Nähe der Fotografie Abschnitt, es sei denn, und das ist ziemlich cool und genial. Sie können auch voran gehen und das gleiche tun für diese Bottom Links als auch. Also, wenn ich auf die Startseite klicke, wird es mich auf den Startbildschirm für die über den Abschnitt Arbeitsprozess zu bringen. Aber ich werde es so lassen, wie es ist, denn wenn du das baust, hast du vielleicht deine eigenen Seiten. Sie könnten Ihre eigenen verschiedenen Links und Abschnitte Ihrer Website haben, so möchte ich das als IHS jetzt verlassen, die andere Sache ist, dass wir dieses Logo auf diesem Offensichtlich, Ich will es toe Herr toe die Homepage. Also werde ich gehen und klicken Sie auf einen Link sind, so werde ich auf Seiten klicken und ich werde sagen, Seite wählen und ich werde nach Hause wählen. Jedes Mal, wenn ich darauf klicke, können Sie sehen, dass es Art von Neulädt es aktualisiert den Browser und bringt Sie zurück zur Startseite . Richtig? Das ist es, was wir wollen, oder? Das geht also sehr darum, diese Abschnittsseite wie Abschnitte, leichtgläubige Links hinzuzufügen . Im nächsten Video gehen wir aus, voran und machen einige Elemente. Animator. Also, ihr seid es im nächsten Video 38. Wie du Symbole erstellst und verwendest: Okay, Leute, Leute, bevor wir uns in die Interaktionen einmischen, möchte ich nur schnell ein neues Konzept erklären. Ich werde nur ein paar Minuten dauern, und das geht darum, Komponenten zu erstellen. Nehmen wir an,dass Sie mehrere Seiten auf einer Website haben und 10 verschiedene Seiten auf Ihrer Website haben. , Nehmen wir an,dass Sie mehrere Seiten auf einer Website haben und 10 verschiedene Seiten auf Ihrer Website haben. Und zunächst einmal, die Möglichkeit, eine Seite hinzuzufügen, besteht darin, auf die Seite zu gehen und Sie können auf die neue Seite erstellen klicken und das wird alle Seiten erstellen, die Sie haben. Nehmen wir an, Sie haben diese Navigationsleiste und sogar, wissen Sie, die Fußzeile oben rechts unten, wissen Sie, die auf der ganzen Website gleich sein wird. Aber falls Sie sich entscheiden, eine bestimmte Änderung vorzunehmen, besteht das Problem darin, dass Sie diese Änderung auf allen anderen 10 Seiten vornehmen müssen. Und das ist wirklich ein großer Ärger. Und das ist ein großer Ärger. Also wo Flo etwas als Komponenten genannt hat und wir voran gehen und etwas als Komponente erstellen können , werde ich jetzt in so geraten, aber oh, aber oh, hier und ich werde voran gehen und mit der rechten Maustaste klicken und ich werde sagen, erstellen -Symbol jetzt, einfach und Komponente sind ziemlich viel Begriffe, die austauschbar verwendet werden. Aber ich werde nur sagen, Symbol erstellen und das wird tun, ist es wird uns Neymar ähnlich sagen . Wir werden diese Na'vi Gatien Bar nennen, und ich werde voran gehen und auf Symbol erstellen klicken. So, jetzt können Sie sehen, dass wir innerhalb der Komponente mehr, wo wir gehen können voran und machen Sie alle Änderungen, die wir wollen. Also werde ich voran gehen und auf Fertig klicken, und das wird das in eine Art grüne Farbleiste schaffen, was bedeutet, dass es ein Symbol ist und ich das Gleiche hier unten auch tun werde. Ich gehe weiter und wähle den Fuß hoch und ich werde voran gehen und mit der rechten Maustaste klicken, und es wird sagen, Symbol erstellen und wir rufen diesen Fuß hoch und Sie wissen, dass wir ein Symbol haben. Jetzt können Sie auf alle Ihre Symbole im Anzeigenbereich zugreifen , in dem wir Elemente haben, wir haben Layouts, und dann haben wir Symbole. Das ist, wo alle Ihre Symbole aus. Und es zeigt Ihnen auch die Anzahl der Instanzen, die ein bestimmtes Symbol verwendet wurde, also ist das ziemlich gut. Ehrlich gesagt, kann das jetzt nicht getan werden. Das ist auch keine Art von dieser grünen Box. Wenn Sie also das nächste Mal eine neue Seite erstellen, ist all Ihr Foto einfach Drag & Drop dieses Symbol, das Sie haben, auf die Seite und Sie wissen, Sie gut zu gehen sind. Es geht also sehr um Symbole, und ich sehe euch im nächsten Video. 39. Erstellen einer Page: Na gut, Leute. Also in diesem in der Lage sein, voran zu gehen und animieren die Helden Abschnitt bei einigen wirklich coolen Spaß Animationen. Also lasst uns anfangen. Und die Sache ist, es ist super einfach zu tun. Alles, was sie tun müssen, ist die Logik zu verstehen, wie Interaktionen funktionieren. Ich werde damit beginnen, nur sicherzustellen, dass das 14 40 Pixel ist, weil ich es gerne bei 14 behalten möchte. 40 Fixes. Und was wir jetzt tun werden, ist, dass wir anfangen werden, indem wir entscheiden, wie die Animation passieren soll . Das erste, was ist diese Navigationsleiste, die wir haben, ich möchte voran gehen und gescheitert dies von 0% Kapazität zu 100% Kapazität. Und übrigens, wir tun dies, wenn der Page Lord. Also, was passiert, wenn die Page Lords, wenn die Page Lords, Ich will, dass die Navigationsleiste von 0% Kapazität bis 100% Kapazität verblasst. Ich möchte, dass diese Hero-Bildbox von der linken Seite des Bildschirms auf die rechte Seite des Bildschirms bewegt und ich möchte diesen Text, der besagt, dass ich Robin Williams bin und wir haben die spanischen Grafiken von der rechten Seite des Bildschirms in Richtung der linken Seite das hier. So wollen wir voran gehen und unsere Animation strukturieren. Also lasst uns jetzt anfangen. Wir könnten viel mit der Interaktionsspitze zu tun haben, und hoffentlich bekommt ihr Jungs das Gerechte und auf die Logik, wie alles funktioniert. Zuallererst müssen wir Selektor-Trigger wissen, was ein Trigger-Artikel ist im Grunde eine Aktion, die die Haupt-Animation auslöst, richtig. Und in diesem Fall wollen wir den Auslöser Toby Seite laden. Also, wenn die Seitenherren eine Art von einer Animation auslösen wollten, die wir bei uns haben, wenn bezahlt, beginnt zu uns haben, wenn bezahlt, laden. Und wenn die Seite mit dem Lernen fertig ist, werden wir jetzt wählen Event-Seite beendet geladen. Ich gehe weiter, wähle die Aktion aus und sage: „ Starten Sie eine Animation, okay. Und jetzt übertreffen wir bereits die vorhandene Animation, die wir haben. Ich werde voran gehen und klicken Sie auf das Plus-Symbol, das wird Zehe erstellen eine neue Animation. Ich werde dieses Alter nennen, Lord Animation. In Ordnung. Und hier werde ich anfangen, die Elemente zu definieren. 1. 1 wird das Element in diesem Fall auswählen. Wir wollen die Navigation nehmen, aber und klicken Sie auf das Plus. Aber bedauerlich ist, dass wir im Moment keine Animationen zu Symbolen hinzufügen können. Also, was Sie tun müssen, ist, dass wir doppelklicken müssen, um in das hineinzugehen und dann auf das Plus-Symbol klicken und dann werde ich die Kapazität für die NAFTA wählen, okay? Und wir können einfach voran gehen und klicken Sie auf fertig Bearbeitung Master-Symbol, damit wir wieder kommen können. Gehen wir zurück zu unserer Seite, unserer Animation. Also haben wir die Nab unsere Kapazität jetzt auf die anderen Interaktionen. Was wir getan haben, war, dass wir gerade einen Staat geschaffen haben, was der Moment ist, in dem wir in diesem Fall sind. Wir müssen zwei Staaten schaffen. Einer ist der Anfangszustand und einer ist die nächste Acht. Warum müssen wir das tun? Der Grund dafür ist, dass in diesem Fall, da mein erster Anfangszustand 0% Deckkraft sein wird, ist dieser Knave auf dem Bildschirm bereits 100%. Also habe ich diese Eigenschaft überschreiben, indem ich den Webfluss sehe. Hören Sie, als ich die Website gesenkt habe, möchte ich, dass dies 0% Deckkraft ist, wenn ich anfange. Richtig? Also, was ich tun werde, ist, dass ich diese neuartige Kapazität auswähle, und ich schaue auf den Schalter, der besagt, dass Set als Anfangszustand ist. Also, obwohl auf dem Designer das 100% Deckkraft ist, wenn die Seite die Waffen herstellt, die davon ausgehen, dass dies 0% Kapazität die ganze Zeit war, richtig? Stark. Gehen Sie weiter und stellen Sie diese Kapazität auf Null. Nun können Sie die Änderung nicht sehen, da sich die Änderung nicht auf Symbole auswirkt, aber wenn wir die Seite neu laden, können Sie sie sehen. Okay, also werden wir weitermachen und den Anfangszustand auf Null setzen. Jetzt gehen wir weiter und duplizieren das, okay? Und hier werden wir voran gehen und sagten, die Kapazität zu 100%, weil wir von 0% auf 100% bewegen wollten . Wir können voran gehen und die Dauer ändern, um so etwas wie drei Sekunden zu sagen und auch zu ändern Die Lockerung der Zeh ist unser Gericht, richtig? Das ist so ziemlich das, was wir wollen. Nun, wenn Sie voran gehen und spielen, können Sie sehen, dass es drei Sekunden dauert, bis verblasst. Richtig. Da gehen wir. Jetzt. Die nächste Sache ist, wir wollen die Heizung Bild Box animieren. Also lasst uns traurig, er beschädigte Box. Kommen wir hierher zu den Aktionen. Klicken Sie auf das Plus-Symbol und wir möchten Verschieben wählen. Okay, jetzt könnte ich eine Verbindung mit diesem Schritt haben, weil ich will, dass diese beiden gleichzeitig beginnen , richtig? Und das erste, was wir tun, ist für den Umzug. Ich werde den X-Wert jetzt den X-Wert im Grunde die linke und rechte Position hinzufügen weil er sich auf der linken Achse befindet. Nun, ich werde keinen Pixelwert verwenden, weil das Ding mit Pixelwert ist, es wird seltsam auf verschiedenen Bruchpunkten aussehen. Denn wenn ich sage, zum Beispiel, 100 Pixel werden 100 Bilder auf für 14 40 Picks Pause 400.1920 Pixel Bericht und die anderen großen Punkte, was nicht etwas, das wir wollen. Also, was ich tun will, wird voran gehen und den X-Wert auf negativ 100% setzen, richtig? Wenn ich also Pot sage, bewegt es sich 100% von seiner Ausgangsposition weg. Richtig? Es bewegt sich also im Grunde zwei Mal so was in Ordnung, und wir werden es 100% einstellen, so dass es exakt außerhalb des View-Ports vom Bildschirm ist. Und ich würde fortfahren und das einmal duplizieren. Und ich werde das mit dem zusammenführen. Alles klar, denn wir wollten, dass die NAB die und die Bildbox zur gleichen Zeit beginnen. Und Sie wollen es auch und gleichzeitig, was jeder zur gleichen Zeit animiert werden muss . Nun für die Heldenbildbox, was passieren wird, ist, dass ich zurückgehe und das auf null Person setzen werde, weil wir wollen, dass es der Standardzustand ist. Okay, also null Person und die Dauer, ich werde es wahrscheinlich auf 1,5 setzen. Okay. Und ändern Sie auch Lockerung, um Gericht zu erleichtern. Okay, jetzt lassen Sie uns schnell einen Blick werfen. Richtig. Das sieht ziemlich cool aus, oder? Sieht fantastisch aus. Lass uns weitermachen und das noch mal spielen. Fantastisch. Sieht gut aus. Nun, die andere Sache, die ich tun möchte, ist, dass ich vorangehen werde und auch mehr Kapazität. Ich hätte verblassen und mich gleichzeitig bewegen wollen. Also über Monitor wird beginnen, indem Sie die Nummer eins klicken Sie auf das Plus-Symbol und ich werde wählen Kapazität. Okay, jetzt werde ich das mit dem zusammenführen, weil wir wollen, dass die Bewegung und die Fähigkeit zur gleichen Zeit beginnen . Und offensichtlich wird es uns den Anfangszustand geben, und ich werde lesen, die Deckkraft auf 0% runter zu verwenden. Okay? Und ich werde das duplizieren. Das wird viel damit sein, und es wird der Endzustand sein, aber ich werde sagen, Opazität, Du bist zu 100% in Ordnung? Und auch die Dauer. Diesmal werde ich zu einem zurückkehren. Ich will nicht, dass es 11,5 ist, und die Lockerung wird wie immer leicht draußen . Also jetzt lasst uns das schnell spielen und werfen einen Blick. Richtig. Das sieht also super aus. Könnte es irgendwie verblasst und bewegt sich. Und am selben Tag werden wir das Gleiche auch für diese tun. Schnell. Kilometer, gehen Sie weiter und sagte dies zu 14. 40. Und jetzt werden wir die auch ändern. Also jetzt ist alles bereits definiert, oder? Aber das Einzige ist, dass wir die Bewegung ändern müssen. Anstatt Ihren Trumpfkratzer zu kreieren. Ich werde diese beiden Elemente auswählen, die die Heldenbildbox ist. Ich gehe weiter und dupliziere das, und ich werde es damit zusammenführen, okay? Und das Einzige, was wir tun müssen, ist, weiterzumachen und von 100% werde ich das zu 100% positiv machen , und ich werde weitermachen, richtig? Klicken Sie auf, und ändern Sie Ziel in die Überschrift. Okay. Nun, die Sache ist, dass es sich genau zu 100% bewegt, aber wir wollten etwas mehr bewegen, was 110 plus es ist. Okay, also ist es ein bisschen draußen, okay? Und auch, wir werden weitermachen und die Deckkraft ändern. Ziel hat sich richtig gebaut? Klicken Sie auf Ändern, Tiger. Nun, das ist außerhalb meiner Sicht Ports. Ich bin nicht in der Lage, es auszuwählen, also kann zum Navigator gehen und auf Überschrift klicken. Und das wird auch ändern. Großartig. Perfekt. Jetzt werde ich diese auswählen, um mit der rechten Maustaste zu duplizieren und es mit diesem zusammenzuführen. Und alle Eigenschaften sind gleich. Das einzige, was nach dem tun ist, gehen Sie voran und ändern Sie Ziele oder Rechtsklick ändern. Ziel-Überschrift Rechtsklick, ändern, Ziel und schwer. Okay, also jetzt, gehen wir weiter und glauben das, richtig? Das ist also, was wir bekommen, oder? Es sieht jetzt ziemlich cool aus. Wir wollen auch, dass dies Animator ist. Also das einzige, was wir verlieren, werde ich voran gehen und diese auswählen, um zu versuchen, klicken Sie auf Duplizieren kombiniert. Dies und die Eigenschaften sind wieder gleich. Die einzige Sache ist, die ist, das Element jemand mit der rechten Maustaste zu ändern, Ziel zu ändern und es in Paragraph 18 zu ändern. Klicken Sie mit der rechten Maustaste Ziel ändern. Jetzt ist Paragraph 18 weg, weil es außerhalb des Bildschirms ist. Also werde ich voran gehen und hier rüber klicken, okay? Es ist das Gleiche hier drüben. Überschrift. Sie mit der rechten Maustaste auf Duplizieren. Bringen Sie das und klicken Sie mit der rechten Maustaste auf Ziel ändern. Ziffer 18. Klicken Sie mit der rechten Maustaste auf Fußball-Absatz 80. Jetzt lasst uns das spielen. Gerade jetzt ist es ein wenig hinken, weil das liegt daran, dass der Untergang und das Internet. Aber wenn Sie voran gehen und das veröffentlichen und es hier sehen, können Sie den Unterschied sehen, und wir werden das tun. Jetzt. Eine Sache, die ich ändern möchte, , um es ein bisschen mehr Spaß zu machen, ist, dass all diese zur gleichen Zeit animieren , richtig. Aber lassen Sie uns ein wenig verzögert haben. Also, was ich tun will, ist, diese Überschrift zu bekämpfen. In Ordnung? Jetzt wir Es sagt, dass es mit der vorherigen Aktion beginnt, die dies ist. Aber auch wenn es mit der vorherigen Aktion beginnt, wollen wir ein wenig Verzögerung. Ich gebe ihm eine Verzögerung von 0,2. Okay. Und für den Absatz. In Ordnung, ich werde es eine Verzögerung von 0,4 geben. Richtig. Also beginnt es mit hier drüben. Also von hier nach hier gibt es eine Verzögerung von 0,4. Und dann passieren diese Animationen. Und für die Überschrift beginnen wir Null und es gibt eine 20,2 Sekunden Verzögerung. Und dann passierte die Animation. Also, wenn du das spielst, siehst du, dass die Elemente eins nach dem anderen reinkommen, und das ist wirklich cool. So können wir voran gehen und veröffentlichen dies zu unserem ausgewählten Omen und lassen Sie uns auf die Website gehen und drücken Sie die Kontrolle sind oder Befehl Kunst des Nachladens. Und schauen wir uns an, wie das richtig aussieht. Das sieht super glatt aus. Und Sivarasa, lasst uns das wieder laden. Und es sieht phänomenal aus, oder? Das sieht wirklich, wirklich toll aus. Nun, eine Sache, die ich erwähnen möchte, ist in diesem Fall, alle Elemente, die wir Animator wurden nur animiert, wenn der Page Lord gerade jetzt das sind die einzigen Elemente werden animiert. Nun werden Elemente wie Überschrift 76 Pixel und Absatz 18 Pixel an mehreren Orten außerhalb der Website verwendet . Wir wollen also nicht, dass diese auch wirksam sind. Also wollen wir tun, wird all dies auswählen und sicherstellen, dass Ihr Effekt das ausgewählte Element ist . Denn wenn wir voran gehen und zum Beispiel Änderungen an der Klasse, dass es sich auf alle Elemente auswirken wird, die auf der Seite waren, die die gleiche Klasse haben . Aber das wollen wir nicht. Wir wollen nur diese ausgewählten Elemente animieren. Also werde ich voran gehen und ausgewähltes Element wählen. Stellen Sie sicher, dass es das ist, Ordnung, und das ist es so ziemlich. Und im nächsten Video werden wir weitermachen. Und wenn Sie zurück zu dem Designer erzählt, alles wird normal und was wir tun werden, ist im nächsten Video, wir gehen voran und animieren diesen Abschnitt. Also, wenn ich durch diesen Abschnitt scrollte. Wir haben diese, weißt du, diese, die irgendwie animieren. Also, das seid ihr im nächsten Video. 40. Animieren: Richtig, Leute. Na gut, Leute. In diesem Video werden wir diesen Abschnitt der Website animieren. Also, offensichtlich werde ich mit einem Auslöser beginnen. Was ist der Auslöser für uns? Wir haben einen Trigger, dass, wenn ich hierher zum Triggerelement komme , , ich eine Option habe, die sagt, Scroll in View. Also, um das irgendwie zu erklären. Also, wenn ich scrollen und dieser Erlebnisabschnitt in Sicht kommt, möchte ich, dass Sie etwas animieren, oder? Das ist der Auslöser. Also, wenn Experience Abschnitt scrollt Interview, Sie möchten Elemente animieren, so gehen wir voran und wählen Scrollt in Ansicht. Nun, wir haben zwei Optionen, wenn Scroll-Interview und eine ging vermasselt von dir, richtig, Also sind wir durch die erste 1, die ist, wenn in die Ansicht gescrollt. Also werden wir auf Start eine Animation klicken, und wir haben alle unsere Animation. Lister wird eine brandneue Animation erstellen, und wir werden diese Zweckmäßigkeit Abschnitt Scroll nennen. Okay, also werden wir tun, ist, dass du diese drei Boxen animieren willst, was dieser Erlebnisblock ist. Wir wollen, dass sie animieren, wissen Sie, von links nach rechts. Ähnlich wie wir das gemacht haben, aber es wird aussehen. Es wird ziemlich lustig aussehen. Also, was ich tun werde, ist, dass ich eine Animation starten werde. Also werden wir anfangen mit der 1. 1 ist die Bewegung, offensichtlich. Und wir werden damit beginnen, das auf den Anfangszustand zu setzen, weil das nicht der Ausgangszustand ist , richtig? Dies ist der Endzustand. Also werde ich die 1. 1 auswählen und hier Samstags Nationen sagen. Und dafür, was ich tun werde, ist, dass wir tatsächlich Pixelwerte dafür verwenden, richtig? Denn für mich will ich das nicht, dass das vom Bildschirm weg kommt. Völlig. Weil ich möchte, dass dies basierend auf einem kleinen Pixelwert animiert wird, nicht etwas, das vom Bildschirm mit abhängen sollte. Aber bevor wir das tun, gehen wir weiter und sagten dies zu 14. 40 und nur tun, ist offensichtlich, dass wir das in Richtung Ausgang bewegen. Wir werden einen negativen Wert hinzufügen. Okay, Okay, was siehst du hier? Sind das alle Elemente in Bewegung und der Grund ist, dass hier die Klasse jetzt bewirkten , sollten wir das verwenden? Sollte es nicht sein. Lass uns das mal sehen. Aber für den Moment werde ich voran gehen und sagte, dass das Element ausgewählt werden soll. Und ich werde voran gehen und freundlich gehen, das zur Seite bringen. Also sagen Sie etwas wie negative 70 Pixel. In Ordnung? Okay. Und was wir tun werden, ist vielleicht könnten Sie voran gehen und sagen, vielleicht machen diese negative 100 Picks ist völlig in Ordnung. Lass uns das duplizieren. Und das wird unsere Interstate sein, wo wir die Dauer auf eine Sekunde einstellen werden . Und es wird wie gewohnt eine Leichtigkeit sein. Und der Wert wird Null sein, richtig, richtig, Weil wir zurück zur Aufmerksamkeit Zustand gegangen sind. Das sieht gut aus. Jetzt werden wir weitermachen und die Kapazität animieren. Gehen wir also weiter und fügen Sie die Deckkraft hinzu. Ich werde die Deckkraft mit der ersten hinzufügen. Ich werde das auf den Anfangszustand setzen und sie lassen die Kapazität auf Null und dann mit der rechten Maustaste IQ hat ein Duplikat geändert, und wir werden dieses mit dem zweiten Satz kombinieren. Es wird 100% geben, und die Dauer wird eine Sekunde dauern, und das Preset wird vor Gericht essen. Richtig. Also lassen Sie uns jetzt schnell einen Blick werfen. Also komme ich wieder an den Anfang und wir haben diese Animation an. Gehen wir weiter und scrollen. Richtig. Wenn ich scrolle, sehen wir nichts. Richtig? Denn was passiert ist, lassen Sie mich Ihnen zeigen, wenn ich das noch einmal spiele und wenn ich ein wenig schneller scrolle , könnten Sie sehen, dass Animationen entstanden sind, oder? Wo? Die Sache ist, dass der Abschnitt, der so hier ist, beginnt er gleich hier drüben. Wie ein bisschen Schriftrolle. Es fängt an, richtig, und die Animation ist bereits gestartet. Aber wir sehen es nicht, weil durch die Zeit ist scrollen Sie zurück nach unten die Animation über. Wie stellen wir sicher, dass wir die Animation sehen? Also, was wir tun werden, ist, dass wir auf Stopp gehen und wieder fertig sind. Und hier haben wir etwas Torres Offset. Richtig? Also werde ich voran gehen und sagte den Offset auf etwa 50%. Was bedeutet, ist, obwohl dieser Abschnitt sichtbar war, der in den Ansichtsport gescrollt wurde , möchte ich, dass die Animation beginnt, nachdem ich 50% gescrollt habe, nachdem das Element grausam ist. in der Ansicht, per Also, was ich sagen will, ist, dass jetzt, wenn wir voran gehen, und wenn wir langsam nach unten jetzt, können Sie sehen, die Animation tatsächlich passiert. Denn nach dem Scrollen von 50% konnten wir es sehen. Jetzt könnten wir weitermachen und das ziemlich hoch schlagen. Wir könnten weitermachen und das 75% machen. Alles klar, und mal sehen, wie das aussieht. In Ordnung, also haben wir das und ich werde es vermasseln. Und du gehst, Dave. Oh, das können wir sehen, oder? Wenn Sie es noch besser machen wollen, lassen Sie uns voran und machen dies zu 85%. Alles klar, gehen wir weiter und schauen uns sofort an. Da gehst du. Nun, vielleicht, wenn ich so sehr werde ich das wahrscheinlich auf 75% sagen. Das ist eine Nummer, die ich mag. Großartig. Nun, die andere Sache ist, dass wir wollen, dass diese auch animiert werden. Also, was er tun konnte, Wir können die erste auswählen, und wir können die 1. 1 auf schwächen sagen Effektklasse auswählen. Und das sollte funktionieren. Richtig? Also lassen Sie uns voran und werfen einen Blick jetzt. Aber das Problem hier ist, dass ich will, dass diese ihre eigene Verzögerung haben. Richtig. Ich möchte, dass das ein bisschen nach dem anderen beginnt. Als ob ich will, dass das kommt. Und dann will ich, dass wir kommen. Und dann wollte ich kommen. Das macht es ein bisschen mehr Spaß. Also, was wir tun werden, ist, dass wir tatsächlich die Klasse benutzen können, oder? Weil sie alle zur gleichen Zeit ausgelöst werden. Also werde ich voran gehen und sagen, ausgewähltes Element, und ich werde gehen und diese duplizieren, um zu sagen, Ziel ändern. Okay, ich werde diese beiden kombinieren und hier werde ich sagen, Ziel ändern, und ich werde dieses Set wählen, das ist die Erfahrung Block Nummer zwei. Richtig. Und wir müssen das Falsche wählen. Also werde ich schreiben, wie, wie, ändern Ziel auf DA wählen Experience Block. Im Augenblick wollen wir nicht, dass dies die Klasse bewirkt. Wir wollen nur das ausgewählte Element bewirken. Okay, cool. Lass uns die nochmal duplizieren, okay? Und diese beiden werden für die 3. 1 sein, die sein Erfahrungsblock ist, richtig? Und wieder, wir wollen nicht, dass es Klasse ist. Wir wollen, dass es Element gerade jetzt ausgewählt wird. Also haben wir im Grunde den Anfangszustand für all das definiert. Jetzt müssen wir den Endzustand für all das definieren. Jemand wählt Duplikat aus. Kombinieren Sie dies und gehen Sie voran und duplizieren und kombinieren Sie dies. Okay, also werde ich diese auswählen, um mit der rechten Maustaste auf Ziel ändern und diesen Erlebnisblock auswählen, diese auswählen, um mit der rechten Maustaste Ziele zu ändern und diesen Erlebnisblock auszuwählen. , All diese wollen wir nicht,dass sie Klasse sind. Ich werde voran gehen und sagen, ausgewähltes Element. Dieser wird auch sexuelles Element sein. Okay, jetzt gehen wir weiter und spielen das. Sie konnten sehen, dass sie alle zur gleichen Zeit passieren. Was wir also tun müssen, ist eine kleinere Verzögerung zu schaffen. Also, wenn ich diese bewegliche Deckkraft wähle und ich sage Delay Nullpunkt tun und den dritten Satz, das sind diese beiden, richtig? Ich werde das so einstellen, dass es einen Punkt für Okay gesehen wird, also jetzt, wenn du das spielst, ist das die Animation, die wir bekommen. Andere sieht super aus. Nun, lassen Sie uns das auf unserer Website veröffentlichen und lassen Sie uns das Leben sehen. Okay, also gehen wir in unser Portfolio. Natürlich. Und das ist neu laden Sie den Strand. Richtig? Das sieht fantastisch aus. Ich werde langsam scrollen. Alles klar, wir haben das. Und jetzt wird das beginnen. Nacht. Das sieht toll aus. Jetzt gehen wir wieder hoch, okay? Und komm nur wieder runter. Die Animation ist bereits passiert, oder? Es ist alles passiert. Aber sagen wir, Sie möchten es zurücksetzen, so dass jedes Mal, wenn Sie scrollen, wissen Sie, die Animation ersetzen. Wie machen wir das? Richtig. Also, das ist mit wir haben diese Sache, diese weitere Option mit einem Klick auf getan, Sie können sehen, es sagt, wenn Scroll out Sie. Was passiert, wenn ich dich rausscrolle? Okay, wir können weitermachen und die gesamte Animation zurücksetzen, also beginne ich mit einer Animation, okay? Und jetzt haben wir schon diese 1. 1 richtig? Ich werde das eigentlich nur duplizieren, Ordnung? Also müssen wir nicht wieder alles klären. Stellen Sie sicher, dass Sie die 2. 1 gewählt haben, denn für die 1. 1 haben wir das Top ausgewählt und für diesen der die 2. 1 verkauft und hier drüben, gehen wir voran und sagen, scrollen Sie aus. Okay? jetzt haben wir schon eine Menge von diesen. Jetzt werden wir tun, ist irgendwie alles jetzt zurückzusetzen, da all dies diejenigen sind, die wir nicht rechtfertigen können, um das Zurücksetzen. Wie, weil alle diese 0% Kapazität sind und, wissen Sie, 100 Fixes nach links verschieben. Wir hätten es wieder zur Disposition bringen wollen können. Also, was zu tun ist? Ich werde fortfahren und all diese repressiven Löschungen auswählen. Okay, jetzt haben wir immer einen Anfangszustand. Ich werde diese aus dem Ausgangszustand entfernen. Okay? Und für diesen, Mitte Dauer off. Null. Weil ich sofort 0% Deckkraft werden wollte und 100 Pixel nach links bewegen wollte, sobald ich aus dir scrolle. Okay, was meine ich damit? Lassen Sie uns das veröffentlichen und dann können wir verstehen. Also Sie wirklich Portfolio-Kurs. Lass uns gehen und die Rede neu laden. Okay, jetzt ist das passiert, richtig? Also, wenn du hierher zurückkommst und wir diese Animation haben, richtig, ist es perfekt. Es ist fantastisch. Jetzt in einem Scroll aus dir heraus. So, jetzt ist es ein Scroll aus dir. Was bedeutet, dass alle Elemente mittlerweile 0% Kapazität haben sollten und 100 Pixel mit links sein sollen, sind sie? Lasst uns nachsehen. Denn wenn ich wieder zurück in die Ansicht scrolle, sind sie sichtbar. Richtig? So scrollen Sie einen neuen Scroll heraus, in dem alles, was Sie aus dem Reset scrollen, kommen Sie zurück, sie scrollen es nach rechts. Gehen wir wieder zurück. Wer hier? Richtig. Das ist es, wovon wir reden, oder? Also gehen wir zurück und Sie können das sehen. Das sieht fantastisch aus. Richtig? So ziemlich wie Sie die Animation zurücksetzen. Also gehen Sie zu den nächsten Abschnitten aus dem Kurs, wir Das ist in Ordnung. Wir wollen keine Interaktion hinzufügen, weil wir bereits diese schöne Interaktion haben , die da ist. Wir könnten auch eine ähnliche Interaktion zum Skillset Abschnitt hinzufügen. Okay, aber für die Schule sagte, ich werde eine andere Art von Animation hinzufügen. Im nächsten Video werden wir das also animieren. Also, ihr seid es im nächsten Video 41. Animieren: Okay, also in diesem Video, werden wir weitermachen und einfach eine sehr einfache Interaktion zu diesem „Nicht zu schick“ hinzufügen. Also lasst uns anfangen. Also gehen wir zurück zu unserem Oh, hier ist ein wenig zurück zu dem, wo wir anfangs waren und wir kamen hierher. Was ich jetzt tun will, ist, wenn ich über dieses Element schwebe, Ordnung? Ich möchte eine einfache Skalenanimation für das Symbol auslösen, das wir hier drüben haben, richtig? Also werde ich voran gehen und anfangen, indem ich den Nominierten auswähle. Rapper. Eine andere Sache ist, dass diese normale schnelle wurde auf der gesamten Website verwendet, und wir wollen nicht auslösen, wissen Sie, irgendwelche anderen Elemente. Also nur um auf der sicheren Seite von dem zu sein, was ich tun werde, ist, dass ich geehrt bin, eigentlich, geh einfach schnell voran und dupliziere die Klasse, und es ist von Farbe normal, aber ich werde diesen knappen Rapper nennen, okay, Nur um auf dem Safe zu sein, eine Größe zwei, die wir sicherstellen, dass wir keine notwendigen Änderungen an den Animationen von anderen Komponenten vornehmen. Richtig? Wir werden also diese Kompetenzlücke auswählen, und ich werde hier in den Interaktionsschritt gehen und jetzt brauchen wir eine einfache Schwebeinteraktion . Also, wenn Sie das Plus-Symbol aufrufen und wählen und Maus Hallo, Also klicke ich auf Aktion auf Gehen, um eine neue Animation zu starten Und das sind alle vorhandenen Animation Klicken Sie nicht, erstellen Sie eine neue Und wir nennen diese Ausrede Symbol Skala in OK und klicken Sie auf Plus und wir sind nur auf die Fähigkeit Eigenschaft klicken Und natürlich wollen wir nicht die Waage Rapper wir wollen mit der rechten Maustaste auslösen , Ziel ändern und Sie sind Wirkung auf das Skill-Symbol. Okay, und jetzt wollen Sie sicherstellen, dass Sie die Klasse beeinflussen, okay? Und welches ist das Symbol für Klassenfähigkeiten, richtig? Und Sie möchten auch nur Kinder mit dieser Klasse beeinflussen. Also im Grunde, wenn dieses Kill-Symbol ein Kind von einem übergeordneten Element ist, dann gehen Sie voran und beeinflussen dies jetzt. Hier wollen wir nicht voran gehen und einen Anfangszustand hinzufügen, da der Anfangszustand auf dem ursprünglichen Zustand aus der Animation gleich sein wird. Also werde ich voran gehen und einfach darauf klicken und ich tippe eins ein. Also weißt du, einer ist ein normaler Zustand, und ich werde das von 1 auf 0,2 ändern. Okay, vielleicht sogar 0,1. Gehen wir weiter und sagen 0,2. Okay, also erschreckt es ein bisschen groß, und ich klicke rechts. Das ist so ziemlich es. Ok? Und ich weiß nicht, warum Sie den Namen nicht für jemanden genommen haben. Ok. Da gehst du. Und für den Schwebeweg, was ich tun will, werde ich voran gehen und eine Animation starten, und wir werden das duplizieren, weil wir den gleichen Schritt nicht noch einmal wiederholen wollen . Stellen Sie sicher, dass Sie die 2. 1 Dann gehen Sie weiter und setzen Sie diese auf Skalierung. Ok? Und er hatte die Fähigkeit, die ich kann, ich gehe zurück und benutze das wieder zu was? Ok. Jetzt, einmal zu wollen, ich vergaß geht, um die Dauer zu ändern. Also werde ich das auf 0,4 setzen und das gesagt, um Quart zu erleichtern. Gehen wir zurück und machen das Gleiche für die Skalierung auch. Also, wie das sagte die Dauer auf Nullpunkt voll. Und auch die Lockerung wird leicht oder gerichtlich sein. Okay, jetzt gehen wir weiter und schauen uns mal an. In Ordnung? Also, wenn Sie eine haben, bekommen wir eine einfache Spaß Howard Interaktion, Ordnung? Als verrückt funktioniert es. Nun, ich denke, die Lockerung braucht ein bisschen mehr fixiert. Jemand sagte, die Dauer auf Nullpunkt tun. Oh, das muss gelindert werden. Gericht. Da gehen wir. Das ist das Problem. Also das zum Bericht für wieder ist aus Gericht Onda für Scale-out. Wir wollen sicherstellen, dass es leichter Gericht ist. In Ordnung, also schauen wir uns mal an. Ja, sieht gut aus. Okay, Okay, die Sache ist, es wirkt sich nicht auf diese aus, Ordnung? Weil wir das getan haben. Also, wenn Sie es tatsächlich betrachten, die Animation Okay, diese Hover-Animation ist ein Faktor. Nur Zehe dieses besondere Element, wenn du vornimmst und diese Zehenklasse änderst, was bedeutet, dass es jedes Element bewirkt und wir werden Fähigkeiten Rapper wählen, richtig? Das ist die Basisklasse, richtig? Auch nicht der mit einer Combo-Klasse. Nun, es wird nur diejenigen betreffen, die die Combo-Klasse haben, aber wir wollen nicht, dass es das tut. Wir wollten Fähigkeiten bewirken. Der Rapper, richtig? Das ist die Basisklasse. Also, wenn ich voran gehe und auf einem der anderen Elemente schwebte, passiert immer noch nichts. Das liegt daran, dass dies insgesamt eine andere Klasse hat. Dies wird immer noch normale Rapper genannt. Also werde ich das loswerden und ich werde Skills sagen, Trapper. Und wir wollen auch die 48 Pixel hinzufügen. Richtig? Abschied. Das ist so. Lassen Sie uns voran und nennen Sie diese Fähigkeiten schnell und dann gehen Sie voran und sagen 48 Pixel, rechten Rand und wählen Sie auch diese und nennen Sie diese Fähigkeiten Rapper auf Go ahead und auf den 40 Pixel. Richtige Watte jetzt. Werfen wir einen Blick auf die Büros. Ja, es funktioniert jetzt bei allem anderen. Es ist sehr einfach, cool und Spaß Interaktion. Es gibt nichts Tolles zu tragen. Es macht es einfach lebendiger und lustiger weiterzumachen. Also, ja, das ist so ziemlich es für dieses Video. Und im nächsten Video werden wir weitermachen. Und wir haben das bereits getan, was in Ordnung ist. Ah, haben wir auch schon animiert. Okay, ähm, aber was ich tun werde, ist, dass ich irgendwie will, wenn ich hier drüben gedeckt habe, wenn ich hierrüber scrolle , wenn ich hier , möchte ich jeder von ihnen eine einfache Fade-Animation hinzufügen. Also machen wir das im nächsten Jahr. Also, ihr seid es im nächsten Video. 42. Animieren: Okay Jungs, damit wir eine coole Interaktion dafür schaffen können. Wo was passiert ist, wenn jede dieser Karten im View-Port sichtbar sind oder wenn sie Schulinterview sind, werden wir sie irgendwie von klein bis groß skalieren. Wir haben hier nur eine ähnliche Interaktion durchgeführt, oder? Wir haben hier nur eine ähnliche Interaktion durchgeführt, Wo? Wenn dieser Abschnitt das Interview scrollt, werden wir diese und das und das animieren, richtig? Aber was, wenn es einen besseren Weg gibt, es einen einfacheren Weg gibt, dies zu tun? Denn jedes Mal, wenn ich vorgehe und ich ein Element wähle, möchte ich nicht, dass es auf dem Abschnitt basiert. Was ist, wenn es ein Element gibt, das nur da ist und wenn es ein Interview scrollt, ich möchte Animator, ich kann das tatsächlich definieren, ohne den Trigger hinzuzufügen. Machen Sie den Abschnitt richtig. Also was? Ich meine, lass uns das rausfinden. Wir gehen weiter und sagten dies zu 14. 40. In Ordnung? Nur um zu verstehen und was ich tun werde, muss es Thebe Projekt eingewickelt wählen. Okay, also für den Project-Rapper , der dieser ganze Block ist, werde ich voran gehen und eine Interaktion erstellen und das wird ein Scroll-Interview sein. Wenn das Project Rapper Scrolls Interview ist, sind wir eine Animation erstellen. Ich werde voran gehen und sagen: „ Starten Sie eine Animation großartig. Jetzt überall und erstellen Sie eine neue Animation. Und ich werde diese Haut in Global nennen. Okay, jetzt werde ich tun, ist ein Muss die Scale-Eigenschaft auswählen, okay? Und wir wollen, dass die Skala von diesem einen Anfangszustand hat. Ok? Und ich werde so etwas wie 0,7 sagen. Okay, vielleicht gehen wir weiter und machen es zu einem 0,85 Okay, so etwas. Okay, wir gehen weiter und duplizieren das, und ich werde das auf eins zurücksetzen. Nun, das wird jeder Scheißstock sein, und dass das sein wird, dass wir diese kleine 0,5 machen und sagen, dass er draußen ist. Ok? Nun wollen wir auch die Deckkraft animieren, denn es wird seltsam aussehen, wenn es sehr klein ist, wenn es anfängt. Also werde ich das auswählen. Ich werde weitermachen und sagen „Kapazität“. Ok. Wir werden diese Tür hier anbringen. Nun, das wird offensichtlich ein Ausgabestatus sein, also werde ich wieder auf Null setzen. Ich werde das duplizieren, und ich bringe die Deckkraft mit. Und, äh, die Waage wird in einer Eins sein. Die Deckkraft wird 100% sein und die Voreinstellung wird sein. Er ist aus Quart und 0,5. Okay, jetzt schauen wir uns an und verstehen Sie irgendwie. Wenn Sie hier sehen, dass jedes dieser Elemente den Interaktionsauslöser in diesem Moment beeinflusst , ist es projektschnell. Aber was meinen Sie mit Interaktionsauslöser? Was bedeutet, wenn ich diese Skalierung und globale Eigenschaft dem Element selbst hinzufüge und das Element animiere, muss ich nicht mehrere Kopien löschen. Ich muss das nur einmal machen, nur einmal, und es wird sich auf jedes Element auswirken. Ich füge diese Interaktionsspitze hinzu, denn was vorher passiert ist, war hier Der Auslöser war der Abschnitt rechts, aber der elementare, wenn er infiziert wurde oder etwas anderes, aber hier, der Auslöser und die Element, das infiziert wird, sind genau die gleichen Dinge. Also lassen Sie uns tatsächlich schnell einen Blick werfen und sehen, wie das funktioniert. Ordnung, wenn ich ein Interview skaliere, InOrdnung,wenn ich ein Interview skaliere,können Sie sehen, dass diese Art von Fähigkeiten richtig ist, aber es funktioniert hier nicht, weil wir das nicht angewendet haben. Also, was wir tun können, ist alles, was ich tun muss, ist jetzt, da das alles die gleiche Klasse ist, richtig? Weil all das Project Rapper sind. Okay, ich werde gehen. Und im Scroll-Interview sage ich Effektklasse. Okay, also jetzt jedes Element, OK, das hat diese Klasse, Ordnung? Und wir können sagen, Project Rapper, denn das ist die Basisklasse wird effektiv mit dieser Skala und globalen Animation. Okay, also wird dieses ganze Element erschrecken, richtig? Da dies selbst der Auslöser auf diesem selbst ist, ist das Element, das betroffen ist. Alles klar, jetzt gehen wir weiter und schauen uns das an. Jetzt können Sie sehen, dass diese Angst und dieses Kind jetzt werde ich ein bisschen weiter vermasseln. Sie können das auch Angst sehen. Und das hat auch Angst gemacht, die angefangen hat. Nun, auch wenn Sie hier schauen, dass wir Project Rapper gesetzt haben, kann ich tatsächlich sogar dieses Element auswählen. Alles klar, der Skills Rapper Okay. Und ich kann hinzufügen Lassen Sie uns voran und wählen Sie das noch einmal. Fähigkeiten Rapper. Ich kann in die Ansicht gescrollt auswählen, okay? Und wenn ich sage Scroll-Interview, starten Sie eine Animation. Ich kann das wählen. Dieselbe, richtig? Und jetzt, wenn ich hineingehe, können Sie sehen, dass sich die Klasse geändert hat. Es hat es automatisch geändert, weil ich den Interaktionsauslöser beeinflusse. Richtig, Dies ändert es automatisch auf. Dies ist ein wirklich cooler Weg, Animationen auf Ihrer gesamten Website zu duplizieren. Also, wenn ich jetzt vorgehe und einen Blick schaue, okay. Und die andere Sache ist, dass ich auch die Klasse bewirken möchte. Okay, Also lassen Sie uns nach unten scrollen, und Sie können sehen, dass diese Art von animierten rechts, Werfen wir einen Blick nochmal. Ich werde wieder nach oben gehen und ich werde wieder eine Vorschau sehen, und Sie können sehen, dass es irgendwie skaliert wird. Aber wir wollten alle anderen als richtig bewirken. Das sind wir auch. Mach das ganz einfach. Wir haben die Howard Mouse. Jedoch, tut mir leid. Nicht das meiste von dem, was wir wollen, um das Schulinterview. Und ich bin nicht mal ein liberaler Offset. Alles klar, ich gehe mit einem Offset ab, Sag 20%, richtig? Und ich kann gehen und Effektklasse sagen. Also, jetzt und ich kann eine Klasse wählen, um Fähigkeiten Rapper jetzt jedes dieser Elemente wird sich selbst zu animieren. Dies selbst ist ein Trigger, und dies selbst ist die Animation, die betroffen sein wird. Also gehen Sie voran und sehen Sie dies rechts. Sie können sehen, dass das jetzt betroffen ist. Auch wenn wir die Animation eingerichtet haben, haben wir diese Klasse hinzugefügt, richtig? Aber jetzt wirkt es sich immer noch auf diese Klasse aus, weil der Interaktionsauslöser derselbe ist wie das Element, das animiert wird, oder? Richtig. , Was passiert,wenn wir von dir rausscrollen, richtig? Dafür wollen wir auch eine Animation haben. Also lasst uns weitermachen und das tun. Also, wenn wir rausscrollen, wenn du sagen willst, eine Animation starten und hier werde ich das duplizieren Okay auf, ich werde sagen Skala, und ich verkaufe die 2. 1 und ich werde sagen, Skala in globaler und es wird global skaliert werden, oder? Ok. Und jetzt wollten wir den ursprünglichen Zustand vorgeben , der dies sein wird, der 0,85 und Null ist. Okay, also werde ich die beiden löschen. Und für diese beiden werde ich den Anfangszustand entfernen, und ich werde die Dauer auf Null setzen. Denn sobald diese aus dir rausrollen, will ich sie Zeh haben. Ich will die Zehe sofort. Gehen Sie weiter und gehen Sie zurück zu 85% und zurück zu 0% Deckkraft. Richtig. Also schauen wir uns mal an. Okay, also los geht's. OK, Dies animiert in diesem animiert in Fantastic. In Ordnung. Ich meine, ich skala aus dir heraus. Nichts passiert. Ich bin mir nicht ganz sicher, welches Element. Ich habe es hinzugefügt, um es zu tun Waas für dieses Element, richtig? Also gehen wir weiter und hier sage ich Klasse, was in Ordnung ist. Ich werde auch hier runterkommen und das Projekt Rapid auswählen. Und hier ist Scroll aus dir heraus. Ich werde sagen, starten Sie eine Animation und wir wählen die Skala aus der globalen. Und jetzt sollte es perfekt funktionieren. Richtig. Also, jetzt diese Arbeit, Wenn ich zurückgehe und ich wieder in der animierten wieder, Ich gehe zurück und komme zurück und nie wieder zu treffen. Das Gleiche mit dem hier. Also jetzt fragen Sie uns diese kommen zum View-Port, den sie in Alles klar skalieren. Und wenn ich zurückgehe, gibt es wieder Tötung. Richtig. Also gehe ich da raus, setze zurück und sie kommen sofort wieder rein. Eine Sache, die ich hier tun möchte, ist, dass ich dafür gegen Satz 20 als Offset und wieder für hier will . Ich will wahrscheinlich 10 als Offizier für die Scale-Out setzen. Auch zum Ausskalieren. Ich wollte Null sein, richtig, weil ich mich sofort dafür auslösen wollte. Wir können es für 20 verkaufen. Also lassen Sie uns schnell wieder einen Blick werfen. Alles klar, los geht's. Fantastisch. Gehen wir wieder hoch. Jep. Los geht's. Genau hierbei. Aber in diesem Fund noch? In Ordnung. Das ist also so ziemlich erledigt. Als nächstes haben wir das auch, was so ziemlich getan war. Wir haben das wieder, was auch so ziemlich getan ist. Ich möchte dazu keine Animationen hinzufügen. Weißt du was? könnten wir tun. Gehen wir weiter und wählen das Zeugenbild aus, okay? Ich meine, der Zeugenblock und lass uns weitermachen und den Auslöser des Scroll-Interviews hinzufügen. Und wir werden die Skala global auswählen, und wir werden auf 20 setzen, und ich komme runter. Vielleicht werde ich das 1 bis 10 setzen. Ok. Und die Scrollen Sie für Sie in einer Auswahl, wählen Sie Animation und wählen Sie Skalierung global. Und wir werden auch die Klasse nicht beeinflussen. Damit alle anderen Elemente mit der Klassenaussage im Block einen Faktor bekommen. Mal sehen, wie das aussieht. Richtig. Also werde ich scrollen, und du könntest es irgendwie sichtbar sehen, direkt an. Dieser kommt auch in den Blick. Port und sein Gehäuse. Richtig. Fantastisch. Jetzt wollen wir Zeh. Stellen Sie sicher, dass es richtig funktioniert. Ich bin mir nicht sicher, warum das nicht betroffen ist. Oh, wir müssen den Grund dafür, dass es nicht funktioniert, weil wir die Basisklasse wählen müssen. Und jetzt wird es funktionieren, weil dies nicht die Combo Plus hat Also lassen Sie uns schnell einen Blick wieder werfen. Also werden wir scrollen und scrollen, und das ist sichtbar. Das wäre sichtbar. Und das wird jetzt auch für die Fotografie wieder sichtbar. Ich glaube, ich will nichts ändern. Das sieht ziemlich gut aus. Das sieht auch ziemlich toll aus. Und das sieht auch ziemlich toll aus. Jetzt, da wir diejenigen gemacht haben, die dort sind, werden ein wenig mehr Interaktionen und Animationen erzeugen , und wir werden mehr Elemente hinzufügen, um es viel besser zu machen. Also sehe ich euch im nächsten Video. 43. Erstellen einer Progress: Na gut, Leute. Also auf diese Weise werden Sie voran gehen und erstellen sind wirklich cool und Spaß Fortschritt. Aber was im Grunde passiert, ist, wie die bezahlten Schriftrollen, dass Sie einen Fortschrittsteil am oberen Rand des Bildschirms sehen können , der von links nach rechts bewegt. Richtig. Also lasst uns weitermachen und aufbauen. Also lassen Sie uns zuerst den Fortschrittsbalken und den Fortschritt geben, aber ist ein sehr einfacher tauber Block, richtig? Das war's. Es gibt nichts. Mörser wollen voran gehen und wählen Sie die Sie wissen, den Körper. Alles klar, ich werde alles zusammenbrechen und einen neuen Div-Block erstellen, richtig? Und ich werde diese Sackgasse einfach nach oben schieben, weil ich auf allem sein wollte , eigentlich, Wirklich, spielt keine Rolle. Sehr tous off American nur noch pro unter der Navigationsleiste, weil wir gehen, um es in ZIS Basis zu verschieben. Also zuerst werde ich voran gehen und diese Fortschrittsleiste anrufen, und ich werde es mit 100% ausgeben. Also nimmt es eine 100% Rabatt auf den Wert aus dem Bildschirm und sie gaben eine Höhe von fünf Picks ist nur ein sehr kleiner Pixelwert und ich werde voran gehen und eine Farbe hinzufügen. Und in diesem Fall werde ich diese CNN-Farbe hinzufügen. Wenn es ein $2 ist, könnten Sie einfach für das hellgrau oder die Ärztin gehen. Was immer du denkst, Werksman, das war's. Ein Fortschrittsbalken ist fertig. Nun, was ich tun werde, ist, dass ich gehen werde, und ich werde eine Position wählen. Und wir haben fünf Eigenschaften. Wir sahen uns Sticky an. Werfen wir einen Blick auf feste Positionen und Elemente relativ zum Browserfenster. So bleibt es an Ort und Stelle, wie die Seiten etwas gut vor geschraubt und nur sagen fixiert. Okay, also wollte ich es tun, ist, dass es das von bis zur Oberfläche entfernen wird und es auf ein Drei-D-Flugzeug setzen wird. Alles klar, was bedeutet, dass es auf den anderen Elementen ist. Aber bevor wir das tun, müssen wir definieren, wo es platziert werden soll. Der Luftstrom gibt uns acht Voreinstellungen. Ich werde diejenige wählen, die oben steht. Also, jetzt geht das dies oben auf dem Spielfeld rechts auf, wie eine gute Tat sagt, die Position ist relativ zum Körper fixiert. Okay. Und was bedeutet, diese Adresse, Grausam. Sie können sehen, dass ihre Fortschritte. Aber ist das oben, um es viel sichtbarer zu machen? Was ich tun werde, wird die Farbe Teoh diese öffentliche Farbe ändern, damit wir sie besser sehen können . Sie können auch Zutat hinzufügen, wenn Sie wollen, aber in diesem Fall werde ich es nur eine einfarbige Farbe machen, okay? Und ja, das scheint ziemlich gut zu sein. Nun, was Sie tun müssen, ist, dass wir einen Trigger hinzufügen müssen. In Ordnung? Wir müssen Feind. Also gehen wir zum Interaktionsteam. Und dann sage ich Page trigger, okay? Und ich werde diejenige wählen, die sagt, während die Seite scrollt. Während diese Seite scrollt, möchte ich, dass der Fortschrittsbalken animiert wird. OK, also, wenn ich auf Wild-Seiten scrollen klicken jetzt werden wir eine Aktion auf Ware sicher scrollen Animation auf. Wir haben keine Scroll-Animation. Also geh weiter und wähle eins, und ich sage Geschick. Okay, so offensichtlich wir, wie Sie sehen können, haben wir 0% auf der Seite und dann haben wir 100% auf der Seite. Sie können voran gehen, gehen Sie weiter und fügen Sie alle aus ihnen in der Mitte, wenn Sie wirklich wollen. Aber was ich tun werde, ist, ich werde voran gehen und einfach Null und 100 wählen, denn das ist ziemlich genau das, was wir jetzt für den Fortschritt brauchen. Aber 0%. Wie wird es so sein? Wie Sie sehen können Oh, hier haben wir die X und y und Z auf dem X und y sind oft verknüpft, richtig, richtig, Da wir diesen Link haben, die erste wiederverwendbare unlink. Okay. Und dann gehe ich zum X-Wert, okay? Und ich werde das auf Null setzen und für den Fortschritt. Aber ich werde es noch einmal überprüfen, und ich werde den X-Wert auf was setzen? Okay, jetzt sehen wir, wie das aussieht. Also, wenn ich anfange, ist nichts da. Und als Schule können Sie sehen, dass wir diesen Fortschritt haben, aber, weißt du, das ist irgendwie so. Aber die Sache ist, Sie können sehen, dass das Versprechen, aber es ist irgendwie versteckt zu werden, oder? Es ist es, es ist irgendwie von den Elementen verborgen zu sein, oder dass, wie Sie sehen können, es ist hinter diesem Bild. Das ist also ein Problem, das wir sofort beheben müssen. Die zweite Sache ist, dass es von der Mitte aus skaliert wird. Aber wie machen Sie eine Skala von links nach rechts? Richtig. Wie machen wir das? OK, wie Sie sehen können, geht es hier hinter all diesen Elementen. Okay, also wie reparierst du das? Gehen wir also voran und fixieren Sie zuerst den Z-Wert. Das erste, was Sie tun wollen, ist hier in den Unterkünften. Wir haben diese Option namens Z Value. Im Moment ist es Index gesetzt. Was wir tun wollen, ist wirklich eine sehr hohe Zahl zu geben. So ist es auf allen Elementen. Sagen wir mal, wir haben es auf 100 gesagt. Im Moment 100 ist eine Z-Wert-Zahl, die ziemlich hoch ist, und es ist ziemlich über allen anderen Elementen. Dieser Stock. Sieh mal. Ordnung, also hat er damit begonnen, und jetzt können Sie sehen, dass es das Bild überlappt, weil es oben ist, Ordnung. Und es überlappt alle anderen Elemente, weil es in der Z-Wert-Nacht ziemlich hoch . Also gehen wir hin. Es sieht perfekt aus. Jetzt. Wir wollten es von links skalieren, oder? Wir wollen nicht, dass es von der Mitte aus skaliert wird. Also, wie machen wir das? Wir werden gehen, wir hier runterkommen, die Optionen machen können , Corliss transformieren. Und ich kann auf dieses Symbol klicken und in der Transformationsurn-Ästhetik werde ich diejenige wählen, die links sagt: Alles klar, denn ich will den Ankerpunkt Toby links. Und jetzt, was passieren wird, ist, dass es vom linken Rand des Bildschirms beginnt , richtig? Da gehen wir, und es wird den ganzen Weg bis zum unteren Rand des Bildschirms vermasseln, okay? Und es wird sich weiter bewegen, okay? Und wir bekommen so etwas, richtig? Und so ziemlich darüber, wie wir diesen netten, ausgefallenen Fortschrittsteil geklärt haben, richtig? Im nächsten Jahr werden wir noch eine Interaktion hinzufügen. Also, ihr seid es im nächsten Video 44. Eine Überlagerung auf der Projektkomponente erstellen: Na gut, Leute. In diesem Video wird das, was wir tun werden, ein sehr wichtiges Konzept verstehen. Jetzt machen Sie diesen Entwurf. Ich habe voran gegangen und eine kleinere Änderung vorgenommen, wo ich gerade diese Interaktion finde, wo, wenn ich auf jeder dieser Karten schwebt, diese Box sortieren aus erscheint und es hat diesen Pfeil. Das habe ich richtig verstanden. Und wir wollen das für jedes Element haben. Wir könnten es auf all diesen Karten haben. Wir können es wahrscheinlich auch auf dieser Karte haben. Ich bin mir nicht sicher, wo du es benutzen willst, aber ich habe es nur für den Fall hierher gebracht. Richtig. Und wir werden ein sehr einfaches Konzept erklären. Jetzt. Eine Sache, die Sie angekündigt haben, was wir nicht hier sind, ist, dass , wie Sie sehen können , wie Sie sehen können, dieses Textelement, das sich darin befinden, einen richtigen Abstand von 40 Pixeln auf dem Laptop und 32 auf der Unterseite haben , . Aber dieses Element, oder tut es trotzt all dem. In Ordnung. Sie verstößt gegen all das gegen die Regeln, die auf die Box angewendet wurden. Alles klar, was ist das so schwer? Wir gehen tatsächlich voran und trotzen diesem und entscheiden auch, wo immer wir entscheiden, wo wir das platzieren wollen , oder? Also gehen wir weiter und finden es heraus, und wir werden ein ganz neues Konzept lernen, was super wichtig ist. Also lasst uns hier reingehen. Also ein römischer Büffel und was wir tun, ist, also werde ich dieses Projektbeschreibungsfeld auswählen, das wir haben, richtig? Und das ist, wo wir dieses Element einfügen wollen. So beeindruckt. Kontrolle, Ian. Der Schöpfer hat zuerst blockiert. Ok. Und das ist der Block 48 mal 48. Auswahlsystem wird sagen, du weißt schon, Adul Tod, Ordnung? Und ich mache diese Breite und Höhe von 48 mal 48 okay? Und ich werde voran gehen und die Hintergrundfarbe ändern, um dies zu sein. Okay, jetzt haben wir das, Adam. Nun, diese Box folgt eindeutig den Werten auf den Eigenschaften von diesem off, wissen Sie, mit dieser unteren und oberen Watte. Und jetzt werde ich das Pfeilsymbol schnappen, das heißt, ich habe einen Raum, der diese erwachsene Kunst SVG und dafür drinnen schnappen wird. Offensichtlich wollen wir das zentrieren, also werde ich voran gehen und die erwachsenen Tauben auswählen, und ich werde das so biegen, dass alles in der Mitte ist und das ziemlich gut aussieht. Jetzt werden wir tun, ist, dass ich den Pfeil auswähle, Dev. Ok? Und ich werde hier runterkommen, um zu positionieren, ich werde es zuerst auf Position schaffen, und dann werde ich voran gehen und erklären, was es bedeutet. Also werde ich voran gehen und wählen Absolute okay, Wenn ich sage, absolut kann etwas passiert sehen, dass dieser Erwachsene Block jetzt im Z-Raum ist , was bedeutet, dass es sich nicht zu einer der Eigenschaften von dieser Box begrenzt. , Okay, jetzt, was ich tun werde, ist, dass ich eine dieser Immobilien um 1/2 wählen werde. Nun, ich will, dass das unten liegt, oder? Signifikante Unterseite. Richtig. Okay, was ist jetzt passiert? Es ist völlig verschwunden. Eigentlich hat sie es nicht. Mal sehen, wo das ist, richtig? Also werden wir hier gehen und wir werden sehen, dass es irgendwo ist. Es ist es, es ist alles hier, wie Wort macht es hier drüben? Wenn ich oben links sage, geht es nach oben links. Wenn ich unten links sage, kommt es unten links. Was wir tun werden, ist, dass ich die Informationen sehen werde oder hier. Also, wie Sie sehen können, sagt es Position. Also der Pfeil taub okay, wird nach unten links vom Körper positioniert, weil er relativ zum Körper sagt. Okay, Okay, was wir tun wollen, ist, dass wir das ändern wollen. Ein relatives Objekt. Also, was wir tun werden, wird zu dem Periodenelement gehen, das diese Projektbeschreibung ist, und ich werde die Position davon von statisch zu relativ ändern. Nun wird dieser Pfeil def jetzt ganz links unten neben dem Projektbeschreibungsblock positioniert , weil er sagt, dass er relativ zu ist. Und wie haben wir das gemacht? Durch die Projektbeschreibung relativ Nacht. Das Elternteil sollte also immer relativ zum Kind sein. In diesem Fall muss das dieser Erzählblock absolut sein. Jetzt wollen wir, dass das oben unten steht, richtig? Klicken Sie unten, richtig? Richtig. Der Status, den ich tun werde, ist, ich werde einfach weitermachen, das kopieren und es auf jedem von ihnen basieren. Alles klar, mach es und basiere es. Sofort. Die Sache ist, dass wir diesen Erwachsenen nicht ständig taub sehen wollen. Wir wollten da sein, wenn wir darauf schweben. Wie erstellen wir die Animation? Wir können zum Interaktions-Zeug gehen, oder? Also wirklich schwebte Interaktion. Nun, wenn Sie einen Blick auf den normalen Rapper werfen Sorry, nicht den normalen Rapper, den Project Rapper. Wir haben hier einige Animationen hinzugefügt hier . Okay, jetzt lasst uns eine neue Animation machen. Das ist ein Hover-Maus-Hover. Okay, hier ist eine, dass, wenn wir wählen und sagen, starten Sie eine Animation, okay? Und ich werde einen neuen erschaffen. Ich werde diese Addle-Animation nennen. Okay, du musst plus Symbol. Und jetzt werde ich sagen, bewegen, weil ich das so bewegen möchte, wie sie sich bewegen. Und natürlich wollen wir den Projekt-Rapper nicht animieren. Wir wollen schreiben, wie, ändern Ziel, und wir wollen den Pfeil animieren, def. Okay, jetzt werden wir Zehe schaffen, um sie zu entfernen, weil einer aus dir raus sein wird und einer in diesem Recht sein wird, also wird der Ausgangszustand anders sein, also müssen wir voran gehen und sagen, gesetzt als initiale Zustand und wollen tun, ist ich werde das X um 48 Fixes in Ordnung bewegen, auf der Y auch durch 48 Picks ist jetzt richtig, und ich werde voran gehen und das duplizieren, okay? Und das wird jetzt normal sein, dass es Null sein wird, und es wird Null sein, okay? Und wir werden einen Übergang hinzufügen. Er ist aus Quart, okay? Und, wissen Sie, gerade wenn gerade ein normaler Radiusversatz auseinander gegeben wird. Lasst uns das spielen. In Ordnung? Sie können sehen, dass es 48 Picks ist in Ordnung, und es Art von Snaps im Inneren. Richtig. Werfen wir noch mal einen Blick. In Ordnung, also ist es draußen hier drüben. Es ist draußen hier drüben. Wie stellen Sie sicher, dass es nicht ist? Es ist nicht sichtbar. Wenn Sie sich erinnern, wir haben einen Überlauf des Colleges benutzt, den wir tun werden, ist, dass ich dieses Projekt auswählen werde. Rapper, komm rüber und hier. Wir wollen die Überlaufspitze sehen. Schlag ihn. Okay, Okay, die Sache ist, wir haben diese Combo-Klasse, richtig? Und wir wollen nur den Projekt-Rapper bewirken. Wir wollen nicht, dass Pixelboden getrennt ist. Verfügen Sie über diese Überlaufeigenschaft. Also, wenn ich auf diese Schaltfläche klicke, die besagt, vier Selektoren zu erben und ich werde Project Rapper wählen Und jetzt, welche Änderungen ich mache, wirken sich nur auf den Projekt-Rapper aus. Also gehen wir weiter und sagen Überlauf versteckt. Okay, und dann kommen wir zurück. Und jetzt hat dieser Projekt-Rapper nur den Ölfluss auf 24 Pixel Boden. Arjun hat nur das jetzt. Gehen wir und schauen uns mal an. Also, jetzt ist das wirklich Gott. Ich werde es dabei haben. Sie können sehen, dass dieser Knopf wunderschön reinkommt. Großartig. Jetzt werden wir weitermachen und das auch rückgängig machen. Also werde ich zu Mouse Hover gehen und ich werde wählen, schweben und ich werde sagen, dass es mit Animation begonnen hat . Und hier in Hubbard, ich mache keine Animation in Amman, um diese Gon-Say-Hover-Animation zu duplizieren. In Ordnung. Und jetzt werden wir das hier löschen, okay? Und wir werden das als Ausgangszustand entfernen. Jetzt wieder das. Wir wollten zurücksetzen 48 48 48 Ich möchte die Dauer davon auf Null setzen, weil ich möchte, dass Sie sofort animiert 48 40, die außerhalb der Box ist. Also, wenn Sie einen Blick in Ordnung werfen, wenn Sie es haben und Sie das sehen können, und wenn Sie gehen, geht es sofort raus, ich denke, was wir getan haben, war, äh, ich hätte diesen Nullpunkt nicht machen sollen. Ich sollte nochmal 0,5 machen und auch sagen, dass er unser Hof ist. Okay, jetzt schauen wir uns mal an. In Ordnung? In Ordnung. Sieht fantastisch aus. Nun, die Sache ist, dass es bei keinem der anderen funktioniert, weil wir das definieren müssen. Also, was wir tun werden, ist, dass ich weitermachen werde, seit wir das definiert haben. Wir wollen diese Zehenklasse ändern, okay? Und die Klasse sollte Project Rapper sein. Und jetzt, wenn Sie einen Blick werfen, sollte es auf alle von rechts funktionieren. Richtig? Und das ist wirklich cool Eine Emission. Nun, was wir tun könnten, ist, dass wir diesen Pfeil auswählen könnten, Dev Block, richtig. Und wir können das nach oben schieben, oder? Auch, wenn du willst. Richtig, also wird es ganz oben sein, richtig? Was immer du brauchst. Aber in diesem Fall wird unten rechts sagen, richtig, richtig, und diese Art von bewegt alles nach unten, richtig? Das ist also ziemlich viel über absolut und relativ. Und lassen Sie uns das schnell veröffentlichen. Und werfen wir einen Blick darauf, wie das auf Ihrer vollständig geladenen Website aussieht. Ich will für Ihren Kurs in den Hafen gehen und die Kontrolle sind, Herr richtig wieder und runter zu kommen. Und dann gehen wir. Also, wenn ich schwebe, können Sie es schön sehen, kommt rein und geht aus, und es sieht super cool aus, als ob Sie einfach die Animationen fühlen können und es ist super genial. Alles klar, das war's für dieses Video, und ich sehe euch im nächsten Video. 45. Auffüllen: Na gut, Leute. In diesem Video wir endlich das Projekt abschließen. Ich werde euch ein paar Dinge zeigen, die euch vielleicht verpasst haben, oder etwas , das ihr beim Aufbau eurer Website benutzen müsst. Also werde ich weitermachen und kann dieses Video nicht erklären und einfach einpacken. Das erste, was hier ist, dass wir vier Wasserhähne haben, richtig? Wir haben die Eigenschaften. Welche der Stilregisterkarte? Dann haben wir diese Einstellungen und dann haben wir diese, die ein Style-Manager genannt wird , der im Grunde eine Liste von all Ihren Klassen hat, richtig. Und einige Tage nach der Erstellung haben Sie möglicherweise nicht ein paar Klassen für ein paar Elemente verwendet. Deshalb haben wir diesen Knopf, wo Sie aufräumen können. Also, wie Sie sehen können, haben 12 Klassen, die ich nicht verwendet habe. Und was für eine Menge dieser verschiedenen, die ich nicht verwendet habe, damit Sie tun möchten, wird voran gehen und zuerst alle diese Klassen entfernen, weil Sie diese Schrift möglicherweise nicht verwenden, wird voran gehen und wählen, Klasse zu entfernen , Alles klar, und jetzt wird alles gut. weil Schiedsrichter letztlich gehen, um zu sehen, was nicht hinzugefügt. Und was ist die Extraklasse und es wird all das große awesome entfernen. Also, das ist Nummer eins. Die Nummer zwei ist hier. Wir können sagen, veröffentlichen. Und wenn Sie eine benutzerdefinierte Domäne hinzufügen möchten, kanalisieren Sie eine benutzerdefinierte Domäne und Sie haben auch erweiterte Einstellungen, und dies sind die Standardeinstellungen . Ich würde Ihnen vorschlagen, es so zu lassen, wie es ist und nicht, was Sie zu viel darüber. Aber stellen Sie sicher, dass, wenn Sie eine benutzerdefinierte Domain wollen, wir werden hier klicken. Lassen Sie uns tatsächlich zu, dass gehen und sehen, wie die, äh, Domain Abschnitt Box Alles klar. Die nächste ist, Sie können Ihr Projekt teilen, was bedeutet, wenn Sie dieses bestimmte Projekt jemandem zeigen wollen, Ordnung, und sie wollen sehen, wie es aussieht, können Sie ihnen tatsächlich einen Link senden, Richtig? Wenn Sie dies aktivieren, können Sie dieses Web flieding kopieren. Jetzt werden sie zu anderen Dingen fähig sein. Aber die Änderungen, die sie vornehmen, werden nicht gespeichert, oder? Welche Änderungen Sie an Ihrem Projekt vornehmen, werden freigegeben. Alles andere ist nicht so, wenn Sie Ihre Arbeit zeigen möchten, sind der Fortschritt, den Sie tatsächlich diesen Link mit ihnen teilen können . In Ordnung. Als nächstes, wenn Sie am Ende für den Köderplan gehen und ich habe einen tiefen Hilfeplan, können Sie voran gehen und die Ecke exportieren. Web Flow gibt Ihnen schöne HTML CSS, JavaScript und die Assets, die Assets, die, die, Sie wissen, ordentlich zusammengesetzt sind Sie wissen, und Sie tatsächlich vorbereiten können, ist es Kampf, den Sie ein bekommen Zip-Datei und Sie können es auf jeder anderen Plattform Ihrer Wahl hosten. Wenn Sie nicht auf Ebenen hosten möchten, dass dies sehr Sie exportieren das Gericht. In Ordnung. Zum nächsten kommt, haben wir jetzt mehrere Breakpoints. Wir betrachteten vier Breakpoint, das ist einfach Stop Landschaft Mob Tablet von Landschaft und mehr Viertel, wo auch gibt Ihnen drei zusätzliche Breakpoints für den Mopp für den Desktop Breakpoint selbst. Richtig. Also hast du für zehn. 80 musst du zu 12 haben. 80. Wir haben eine 14 40 Ende des Gartens 1920. Jetzt können Sie voran gehen und das Aussehen für jeden von diesen Breakpoints anpassen, obwohl sie alle die gleichen Desktop-Break-Teil sind, richtig? Denn alle Änderungen, die wir bisher nicht vorgenommen haben, wirken sich auf all diese drei Bruchpunkte aus. Richtig, denn das sind Laptopbruchpunkte. Aber wenn Sie voran gehen und sie für diese beiden Breakpoints ändern wollen, vielleicht 1920 14 40 werden einen bestimmten Stil haben, aber 1920 wird eine Differenzzeit haben. Vielleicht haben Sie fünf Spalten auf 1920 14 40, wo Sie sind. 10 Spalten auf 1920. kannst du tun, oder? Das ist also eine andere coole Sache. Großartig. Nun die andere Sache ist, dass hier im Asset-Panel, wenn Sie auf das Symbol klicken, unser Zahnradsymbol, wir werden sehen, wir haben etwas genannt oder Text Jetzt Aleka Lehrer beendet eine Beschreibung dieses Bildes für Bildschirmleser oder wenn das Bild nicht lockt. Also im Grunde, was passiert, ist manchmal gibt es Menschen, die blind sind und würde nicht in der Lage , Website zu lesen. Es gibt also eine Technologie namens Bildschirmlesegeräte, die diesen Text lesen wird, den Sie zuweisen, damit die Leute verstehen, was dieses Objekt oder was dieses Element oder was dieses Bild ist. So wollen Sie immer unsere Techniker hinzufügen, und das ist extrem gut für einen CEO hat auch voran gehen und fügen Sie in allen So, zum Beispiel, würde ich sagen, ich würde sagen, Projekt an einem Link. Da würde ich das nennen. In Ordnung. Und dafür würde ich sagen, episches Logo, richtig. Also, Sie wissen, gehen Sie vor und fügen Sie jedem Bild, das Sie haben, einen geölten Text hinzu und das wird Ihre Website viel besser in Bezug auf CEO und in Bezug auf die Benutzerfreundlichkeit als auch zu machen. Alles klar, Fantastisch. Jetzt haben Sie alle Ihre Seiten. Jetzt werden wir keine CMS oder E-Commerce-Seiten abdecken. Also werden wir das vorerst leben, und du kannst wählen. Und wenn Sie auf das Einstellungssymbol klicken, erhalten Sie viele Einstellungen. Und das ist es, was du tun willst, oder? Also hier in ASIO, Einstellung der Reihenfolge angegebenen Informationen, So Titel-Tags. Also werde ich diesen Robin Williams Robin Williams nennen und sagen, Produktdesigner, So wird es auf Ihrer Website auf Google und jemand so verzweifelt aussehen, und Sie können eine Meta-Beschreibung hinzufügen, die besagt, dass Robin Williams ein Produktdesigner aus Mailand, Italien, und Sie wissen, dass Sie sagen können, was Sie wollen, genau da gehen wir. Als nächstes haben wir offene Graphbild offene Graph-Titel sind wir könnten. Wenn Sie nicht wissen, was es ist, ist es völlig in Ordnung. Sie können es haben, Sie können das gleiche wie CEO Titel-Tag sagen, und Sie können Samos als Ihre Themenbeschreibung sagen. Also im Grunde, was offene Graph-Einstellungen bedeutet, ist, dass, wenn jemand dies auf WhatsApp oder Facebook oder Instagram oder irgendetwas teilt, dieses Formular, wie ein Link mit dem Image eines Unternehmens, Richtig? Und wir haben dieses offene Graphbild. Stellen Sie sicher, dass Ihre Bilder 1200 x 6 30 Pixel betragen und ein Seitenverhältnis von 19,1 ist zu einem . Jetzt habe ich vorangegangen und einen erstellt, aber du kannst weitermachen und alles schaffen, was du willst. Lassen Sie mich Ihnen zeigen, wie es rektal aussieht. Hier. Ich bin in Fig MMA, und das ist das offene Graphbild, das ich gemacht habe. Wir werden auch diese Fabric auf Symbolen und Web-Klick-Symbolen benötigen, aber ich werde später darüber sprechen, aber für Jetzt ist dies das offene Graphbild, das Sie wollen, offensichtlich, wie Sie sehen können, dass Größe 6200 von 630, so dass wir tun wollen, ist, wenn Sie es exportieren, können Sie setzen, was Sie wollen in diesem. Sie wollen zurück zum Web Flow gehen und Sie werden hier zum Bildbereich kommen und dann auf Hochladen klicken und wir gehen weiter und laden das geöffnete Graphbild hoch. Und wie Sie sehen können, wird es jetzt hochgeladen. Jetzt werden wir tun, ist auf das Zahnradsymbol klicken und hier neben dem Namen. Sie haben einen Link, oder? Genau dort wird das Bild gespeichert. Also, Sie wissen, kopieren Sie das und kommen Sie zurück zu den Seiteneinstellungen. Und hier in den geöffneten Grafik-Bildeinstellungen, die Sie wollen, gehen Sie einfach voran und stützen Sie das rechts. Und jetzt haben Sie auch die Website-Sucheinstellungen, die, und wenn Sie möchten, Sie den Spaten aus den Suchergebnissen ausschließen können. Google wird also diese besondere Tonhöhe ausschließen, wenn das etwas ist, das Sie brauchen. Aber ich glaube nicht, dass er das jemals tun würde. Und Sie haben auch benutzerdefinierten Code , über den wir nicht sprechen werden. Alles, was ich tun werde, ist schwanger zu werden, und das wird weiter gehen und es retten. Nein, lassen Sie uns schnell einen Blick abwerfen. Howard, sieh mal. So waren die offenen Diagrammvorschauen. Sieh mal, wo du Text oder Informationen hast und du hast drei. Du bist hier niedrig. Und du weißt schon, du hast auch das offene Graphbild bekommen, richtig? Das ist also ziemlich viel über die Home-Einstellungen. Sobald das erledigt ist,werden wir nicht in den Vorab-Abschnitt gehen, werden in die Projekteinstellungen gehen, oder? Sobald das erledigt ist, wir nicht in den Vorab-Abschnitt gehen, werden in die Projekteinstellungen gehen, Und hier machen wir noch ein paar andere Sachen. In Ordnung, also haben wir die 1. 1, die alles ist, General, ich bin vorangegangen und ändere das Thema mir einfach in Portfolio-Kurs R w für Robin Williams . Und Sie können es ändern, was Sie wollen. Und Sie können es auf dem Boden hosten und auch bekam Stoff auf und Replikanten Award. Was? Im Grunde sind das diese kleinen Symbole, die Sie hier sehen, oder? Und das sind der Icon-Stack. Du willst es haben. Also werde ich voran gehen und diese auch exportieren und hochgeladen, und ich habe gerade diese richtig hochgeladen und offensichtlich haben Sie Zeiten. Und jetzt haben Sie auch dieses Workflow-Branding. Und was besser Brennen ist im Grunde dieses Tag, das sagt gemacht in Buffalo. Jetzt, wenn Sie sich für einen bezahlten Plan entschieden haben, können Sie das abschalten, richtig? Und das wird nicht mehr da sein. Aber wenn Sie Web schließen Bauch als das wird da sein, richtig? Ausgezeichnet. Ok, jetzt gehen wir zum Hosting unten Jetzt, hier in der Hosting Registerkarte. Offensichtlich, wo Sie tun wollen, wird voran gehen und wählen Sie Ihren bestimmten Plan, dass Sie ein grundlegendes CMS-Geschäft oder Unternehmen wollen . Und sobald das erledigt ist, werden Sie hier eine Menge Einstellungen bekommen. Jetzt empfehle ich tatsächlich, jeden dieser Links auszuprobieren, die nicht da sind, weil jeder Dienst, jede Hosting-Plattform eine andere Angelegenheit hat, die mit dem Brunnenfluss verknüpft wird. Also möchten Sie die Dokumentation oder das überprüfen und die Dokumentation hier drüben überprüfen, wo Flo ein paar Tutorials hat und ich bin sicher, dass diese Links Ihnen definitiv helfen werden, sie Optronik zu bekommen oder dies auf jeden Fall überprüfen, wenn dies gilt und wenn Sie haben Fragen zum Hosting in Ordnung, dann haben Sie den Editor Editor ist ein Ort, wo Sie Mitarbeiter hinzufügen können, so dass zwei Personen Zugriff auf ein einziges Projekt haben können. Nichts viel zu ihm. Und dann musst du bauen. Sofort. Das ist etwas, das wir wirklich nicht sehen wollen, weil es nichts mit unserem Portfolio zu tun hat . Ja, du als dein ist jetzt wichtig. Jetzt haben wir ziemlich viele Dinge in Bezug auf den CEO gemacht, und ich will, dass Sie außer Sichtplan sind. Möglicherweise haben Sie ein paar Einstellungen und Sie können sie einfach auffüllen. Es wird sehr einfach hier drüben sein. Und wie Sie sehen können, können Sie Meta-Tags und Beschreibungen festlegen, die wir bereits gemacht haben und Diagrammbilder öffnen, was wir bereits gemacht haben. Das ist also so ziemlich erledigt. Die nächste Sache sind die Farmen. Im Moment gingen wir voran und gründeten tatsächlich eine Farm. Richtig? Und Sie können tatsächlich alle Einstellungen sind hier jetzt zugeben Sie sagt, wenn eine Farm zu einem Herausgeber Website eingereicht wird , wo Flow automatisch die Einreichung sammelt und zeigt es hier, E-Mail oder Defäkation kann optional sein aktivieren und wird von einem gebrandmarkt ihm eine Menge E-Mail kommen. Was bedeutet, wenn jemand eingereicht hat, wenn jemand etwas auf Ihrer Website einreicht, erhalten Sie eine E-Mail oder Defäkation, so dass Sie wählen können, alle diese Informationen hier zu definieren, richtig? Und du hast viele andere Dinge, die du jetzt tun kannst. Dies sind ziemlich fortgeschrittene Sachen, so dass Sie alle Videos überprüfen können, die mit Farmen verwandt sind. In Ordnung. Alle Links werden dort in der Beschreibung des Videos sein, so dass Sie diese auf überprüfen können . Sie haben auch, wie, wie, Formular-Einsendungen, in denen Sie Farm-Einsendungen verstecken können und alle Einsendungen, die bedeuten, werden hier rüber kommen. Also, wie Sie sehen können, haben wir etwas, wo wir einen Postnamen hinzugefügt, dass Demut und das besondere Gefühl, das hallo Licht sagt . Also all diese Informationen sind der Abt, den Sie und Sie gedulden, oder die C s wir machen das alles ab, wenn Sie es brauchen. Also werden all diese Formular-Einreichungen hier sein. Sie können auf Show more klicken, aber wir haben keine. Das ist also sehr viel. Nein, wir schauen uns schon den Fonds an, damit wir nicht dorthin gehen wollen. Gehen wir wieder zu Backups in Backups. Wir haben das Wort automatisch. Es ist eine Menge Verstärkung. Falls Sie also Fehler gemacht haben, können Sie diese Vorschau anzeigen oder wiederherstellen. Dann haben Sie Integrationen und Integrationen ist ziemlich komplex. Für den Fall, dass Sie irgendwelche von diesen Dingen verwenden, die Papst A greifen ich Zugang zu gehen Beträge und Zeug dieses ziemlich fortgeschrittene Zeug. Also werden wir uns auch nicht darum kümmern. Und wenn Gott, bist du daran gewöhnt. Einmal hast du so ziemlich alles erledigt, du hast im Grunde getan. Alles, was Sie tun müssen, ist nur gehen, um zu veröffentlichen und zu sagen, Veröffentlichen Sie in der Ref Low Domain auf einer benutzerdefinierten Domain und Sie sind ziemlich gut zu gehen. Das ist also sehr viel für dieses Video. Und ihr seid es im nächsten Video. 46. Was kommt als Nächstes?: Oh, hey, Hi. Das Studium hat dich nicht ganz gesehen, die von niemandem erwartet wurde, dass das Ende erreicht wird. Natürlich. Okay, hier bist du dran. Das ist großartig. Das ist fantastisch. Du hast den ganzen Kurs durchgemacht. Ich weiß, dass es eine lange Reise war. Es war eine lange Fahrt auf Endlich schaffte es bis zum Ende. Nicht viele Leute tun das. So gute Arbeit. Lass uns darüber reden, was als Nächstes kommt. Jetzt sind wir durch Angebote so viel mehr als nur Wasser kurz im Kurs. Es gibt so viele Dinge, die ich nicht über eine solche Lichtbox gesprochen habe, wie Videos zu YouTube-Video. So eine Menge. Die Animation, eine Menge Dinge, die Strömungschloride waren, die nicht in dieser Figur abgedeckt sind, weil ich nicht wollte, dass es sich wie eine Art von manuellen zu fließen fühlen . Vielmehr würde dies Ihnen ein gutes Verständnis der Grundlagen geben und, Sie wissen, Sie wissen, stellen Sie sicher, dass Ihre Stiftung stark. Jedes Mal, wenn Sie etwas bauen wollen, das anders ist, als Sie in der Lage sein sollten, voranzugehen und das zu tun, sollten Sie verstehen, wie es funktioniert. Jetzt. Ich empfehle dringend, über Florida University dunkel zu überprüfen. Ich Oh, tut mir leid, Universitätsarzt wegen Flora ich Link würde sowieso in der Beschreibung aus dem Kurs sein. Sie können es auschecken, und Web slow bietet Ihnen Tutorials für jeden Aspekt und jede Komponente aus. So ziemlich alles über Workflow ist vorbei, dass es sehr ähnlich wie ein massives Handbuch ist, und ich empfehle Ihnen, es zu überprüfen, wenn Sie jemals wollen. Weißt du, Design sind sehr etwas, das wirklich wusste, dass etwas, was ich nicht im Kurs behandelt habe. Im Moment sind wir Grippe hat auch die Sortierung aus. Viele Kurse, die sind wie 5 bis 6 Videos und sie Digital Rechnung, eine einzelne Seite Website sind sehr einfach, wissen Sie, die sehr komplex sind und so, so dass Sie diese auch überprüfen können. Und, natürlich, dass eine Tonne von YouTube-Tutorials online, wo ihre Grippe lehrt Sie, eine Menge Spaß Dinge zu tun . Ich habe ein paar regelmäßige Pretoria's von meinem eigenen, relativ schwer zu erstellen bestimmte Arten von Animationen und Interaktionen sehr gestresst, behoben, so dass Sie diese in meiner Website später überprüfen können. Also, das ist so ziemlich es für diese Videobasis. 10 Jahre. So viel, um zu kommen und meinen ganzen Kurs zu beobachten. Herzlichen Glückwunsch nochmals zum Ende des Kurses auf Seid ihr Jungs in meinem nächsten Video in der Kindertagesstätte sitzen und auf Wiedersehen?