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 Pu