Node JS: Baue deine E-Commerce-Website

1. EINFÜHRUNG: Hallo und willkommen zu einer neuen Klasse. Dies ist der Aufbau einer E-Commerce-Website mit Kopfhörern. Also vor allem, was werden wir für diese Klasse verwenden? Wir werden Node.js und JavaScript verwenden. Und für das Frontend werden wir Bootstrap, EJS, HTML und CSS verwenden . Also in dieser Klasse werden wir alles schaffen, was Front-End ist. Und lassen Sie uns es jetzt visualisieren. Das ist also das Projekt, das wir erstellen werden. Wir haben unsere Home-Markenintegrität über und kontaktieren Sie uns. Wir haben auch die Anmelde- und Anmeldemethode. Und natürlich ist dies die Homepage. Wir haben einige Eigenschaften der Website, einige Marken, einige Bestseller. Und natürlich die Kategorien. Dann gefolgt von einer Fußzeile, dass wir es hier haben werden. Das ist es also im Grunde für die Website als Homepage. Und natürlich werden wir viel mehr als das schaffen. Wir werden die Marken Kategorien über uns erstellen und uns gemeinsam kontaktieren , während wir jeden Schritt auf dem Weg lernen. Und natürlich werden wir unsere Website mit einem kleinen Projekt beenden , das Sie erstellen werden , und natürlich lassen Sie es im Projektabschnitt. Das ist also die Einführung dieses Glases. Wir sehen uns im ersten Video. 2. Einrichte: Alles klar, jetzt sind wir auf unserer E-Commerce-Website. Dies ist ein Ordner auf unserem Desktop. Und wir werden das Projekt in zwei Hauptteile teilen teilen. Die erste besteht darin, das Frontend unseres Projekts zu entwerfen und dann mit dem Backend zu arbeiten. Aber im Moment werden wir mit unserer JavaScript-Datei beginnen. Wir werden Node.JS verwenden und einige der wenigen Dinge wie Express, BodyParser, EJS und Mungo benötigen . Und natürlich, mach dir keine Sorgen, wenn du nichts über sie weißt. Sie können mit uns mithalten, da wir einige von ihnen in unserem Projekt erklären werden. Lassen Sie uns zunächst unsere app.js erstellen. Also rufen wir es auf, und das ist die JavaScript-Ordnerdatei. Und dann gehen wir zu NodeJS, laden Sie die Version herunter, die für uns ist. Also verwende ich Windows, also kenne ich die Dispersion einfach nicht. Und danach passieren Sie den Zauberer der Isolierung. Und dann sind wir gut zu gehen. So ist es auf und Eingabeaufforderung, CMD. Und I. Sagen wir mal, wir werden NodeJS bekommen. Es ist Kaufmann 14.15.5. Und das bedeutet, dass wir NodeJS erfolgreich heruntergeladen haben. Also, jetzt gehen wir auf unseren Desktop. Und es tut mir leid, gehen wir zurück cd Desktop und dann unsere E-Commerce-Website. Wie gesagt, es ist E-Commerce-Website und E-Commerce-Website. Und lasst uns weitermachen und installieren. Einige erfordern einige der Dinge, die wir brauchen, um unser Projekt zu vervollständigen. Also das erste, was wir tun müssen, ist npm install express zu schreiben. Und wie Sie sehen können, wird es Express und ein paar Sekunden herunterladen. Und das ist der Download-Prozess. Und wir müssen einige Dinge herunterladen, wie BodyParser, EJS und Mungo. Die Datenbank, die wir verwenden werden, ist also eine MongoDB. Und das ist das erste, was. Dies wird ausgedrückt heruntergeladen. Und wir können tatsächlich sagen, ich sagte von installiert. Und wir können BodyParser, EJS, Mungo und Express-Sitzung alle gleichzeitig herunterladen . Wenn wir also voran gehen und Enter drücken, können Sie sehen, dass sie heruntergeladen werden. Also für jetzt, warum sie heruntergeladen werden, können wir zurück zu unserem Code und beginnen, indem erfordern heruntergeladen wird. Eine Akte. Das erste, was wir tun müssen, ist, unsere erste Konstante zu schaffen. Und das wird die Express-Konstante sein. Und wir werden es benutzen, um Express zu benötigen. Und wie Sie sehen können, hatten wir dieses Paket nicht. Glück, dass JSON vorher. Sobald wir ein paar Dinge benötigt haben, stellen wir fest, dass wir etwas wie, mal sehen. Wir haben hier BodyParser. Wir haben auch zum Beispiel den Farbnamen und alle diese Dateien oder Anforderungen, die wir in unserem Projekt verwenden müssen. Sie werden automatisch heruntergeladen, indem Sie diese vier oder fünf Anforderungen herunterladen. Also für jetzt wird dies ausgedrückt und dann brauchen wir BodyParser. Also müssen wir es auch verlangen. Also Body Parser, und wie üblich, ist dies nur ein Name. Wir können es nennen, was wir wollen, aber es ist einfacher, wenn wir es so nennen. Und natürlich müssen wir den gleichen Download-Namen von hier schreiben. Wie Sie sehen können, verwenden wir BodyParser mit einem Bindestrich in der Mitte. Und das wird ausgedrückt und BodyParser für jetzt, lassen Sie uns EJS fortsetzen, um EJS zu benötigen, dann Mongoose. Also das ist Mungo erfordern. Und natürlich müssen wir die Sitzung nutzen. Das ist also eine Sitzung von Express-Sitzung, die wir heruntergeladen haben. Und ich denke, jetzt sind wir gut. Das letzte, was wir tun müssen, ist unsere eigentliche App zu erstellen. Das wird also so ausgedrückt werden. So können wir vorerst mit unserem Projekt beginnen. Also lassen Sie uns überprüfen, ob alles funktioniert. Und eine Möglichkeit, dies zu tun, besteht darin, einfach den Port zu erstellen, den wir verwenden werden. Also benutze ich Port 3000 und wir werden das in einer Minute sehen. Und natürlich müssen wir uns diese Tafel anhören, indem wir diese Lektion aufbrauchen. Also werden wir die Leute benutzen, die wir gerade erschaffen haben. Und natürlich können wir eine Funktion erstellen. Und lasst uns console.log. Und wir werden Server gestartet oder 3000 eingeben. Und das ist für die Bereitstellung. Und jetzt können wir etwas schicken. Nehmen wir zum Beispiel an, wenn wir unseren Browser betreten, müssen wir Hallo Welt schreiben. Also müssen wir bekommen, wir werden die Methode verwenden get. Und die Standardseite ist diese, der Schrägstrich. Und natürlich müssen wir eine Funktion erstellen. Wir haben die Anfrage und die Antwort. Und dann werden wir uns von der Antwort schleifen, den Sand ausruhen. Und wir werden Hallo Welt schicken. Also das ist es im Grunde, das ist unser Setup. Jetzt können wir voran gehen und geben Sie unsere CMD Node JS. Und so können wir instanziieren. Also, wenn wir hier haben wir einen Fehler, kann nicht auf die App vor der Visualisierung zugreifen. Und wie wir sehen können, haben wir Eignungslänge verwendet. Entschuldigung, hier müssen wir App verwenden, die Sie bekommen. Und natürlich ist dies die Initialisierung der App, sollte vor der Verwendung davon sein. Und natürlich jetzt, wenn Sie zurückgehen und app.js schreiben. Und wie wir sehen können, haben wir dies, damit NodeJS laufen kann. Also erlaube ich einfach den Zugriff. Und wir können die Nachricht sehen, die wir geschrieben haben. Esl begann mit 0,3 Tausend. Dies deutet darauf hin, dass alles gut funktioniert. Wenn wir voran gehen und zu localhost 3000 gehen, können wir sehen Hallo Welt zeigt, dass wir erfolgreich unseren Knoten-Browser oder Node-App zu bauen. Das ist es also für dieses Video und das nächste Video, das wir mit dem Frontend unseres Projekts beginnen werden. So sehen wir uns dann. 3. Überschrift: In Ordnung, jetzt, wo wir gerade fertig sind, unsere app.js einzurichten, können wir tatsächlich mit unserem Frontend beginnen. Aber eine Sache davor ist, etwas zu verwenden, das für uns im Knoten verfügbar ist. Und das heißt Norman. Und wie Sie bemerken können, wenn ich zu unserem cmd gehe und geben Sie uns Knoten app.js ein. Und natürlich gehen Sie zu localhost 3000. Wir können sehen, dass wir hallo Welt haben. Allerdings, wenn wir hier etwas ändern, Nehmen wir an, ich ändere HelloWorld, HelloWorld als schwer. Und dieser Fall, wenn ich zurückgehe und zu frisch musste, wird nichts passieren. Eine Möglichkeit, damit umzugehen, besteht darin, Knoten 1 tatsächlich zu installieren. Und was nicht Männer, wie für verwendet wird, ist eigentlich etwas zu schaffen, dass, wenn wir etwas ändern, unser Code wird automatisch geändert und unser Browser. Also lasst uns voran und solide gehen. Und eine Möglichkeit, dies zu tun, ist einfach MPI und BMI dash g in global zu schreiben und wir müssen es installieren. Haldeman. Nun, ein alter Mann wird installiert. Und dann nach Abschluss der Installation können wir es einfach verwenden, indem wir Knoten app.js anstelle von Knoten app.js sagen. Das ist also im Grunde für Rodman. Und dann, nachdem das Scannen damit fertig ist, können wir mit unserem Frontend beginnen. Also lasst uns warten, warten wir ein bisschen. Vielleicht. Schließen Sie dieses Fenster vorerst. Und innerhalb unserer E-Commerce-Website müssen wir die Ansichten erstellen. Und in dieser USE werden sie alle unsere EJS-Dateien erstellen. Insider-Ansichten werden also die Ordnerpartials erstellt. Innerhalb von Partials haben wir die Kopfzeile und die Fußzeile. Also lassen Sie uns zurückgehen und überprüfen, ob Norman immer noch auf etwas feststeckt. Also lasst uns gehen und mit unserem Header beginnen. Also in der Kopfzeile ging einfach zu Bootstrap. Und in diesem Projekt werden wir Bootstrap verwenden. Also beginnen Sie, gehen Sie zu Start-Vorlage, kopieren Sie es einfach und fügen Sie es hier ein. Dann ging ich zu Font Awesome, um die Symbole zu verwenden. Also geh zu Font Awesome. Und natürlich, holen Sie sich Ihr eigenes Kit. Wenn Sie keine E-Mail-Anmeldung haben. Und dann werde ich so etwas bekommen. Kommt rein und holt ihn, um das hier zu holen. Kann jedes Kit erstellen, das Sie wollen. Mein Telefon jetzt, ich werde dieses verwenden, so dass ich Enter drücken und dann zurück und einfach hier. Also habe ich bereits in den Körper eingefügt. Und jetzt werden wir den Header erstellen. Und dann, nachdem wir von dem anderen fertig sind, können wir diesen Teil einfach verschieben, vielleicht all dies bis hierher, und fügen Sie ihn in unsere Fußzeile ein. Also, das ist im Grunde gehen wir zurück. Und wie Sie sehen können, wenn Tuckman verkauft und dann schrieben wir Norman app.js, um die App, den JavaScript-Ordner oder die Datei zu instanziieren . Und in diesem Fall läuft der Server auf Port 3000. Wenn ich hier zurück gehe und gehen wir zurück zu localhost, wir haben hallo Welt, es ist auf dem Weg. Wenn ich hier etwas ändere. Also nehmen wir an, ich ging und fügte das hinzu, gehe zurück, aktualisiere. Und wie Sie sehen können, mal sehen. Alles klar, also fängt es an, und jetzt haben wir das hier. Das ist also im Grunde für Nochmal. Und wie gesagt, wir haben hier unsere Kopfzeile. Und in diesem Header werden wir die Navbar erstellen, die wir verwenden werden. Also haben wir Header. Im Header haben wir die Nerven und wir haben hier einige Klassen. Wir haben navbar, navbar erweitern große, nav Menü und BJ dunkel. Und Sie können tatsächlich Ihre eigene Navbar von Bootstrap kopieren, aber ich ziehe es vor, sie selbst zu erstellen. Das ist also für die Navbar und natürlich müssen wir die Schaltfläche hinzufügen. Also wäre der erste Knopf der Klasse navbar, Kleinkind. Und dann haben wir die Nav-Taste. Und dann müssen wir natürlich ein D-Typ dieser Taste sein, um die eigentliche Taste zu sein. Und dann Daten VS umgeschaltet, um zwischen den Elementen zu wechseln , wann immer wir einen Verfall haben und natürlich das Ziel. Also Daten BAS Ziel, und das sind einfache Additionsmethoden, nur um die navbar zu verwenden. Also meine, jetzt für ich mein Netzwerk für jetzt zu begrenzen. Gehen Sie weiter und erstellen Sie die Unterteilungen hier. Also in unseren Knopf und gehen Sie hier und öffnen Sie es. Aber für jetzt, gehen wir zurück zu unserer app.js und versuchen tatsächlich , diesen Header, der EJS in unseren Browser zu senden. Also, wenn ich denke, ist es einfach zu Hause zu schaffen. Und innerhalb der Summe können wir die Kopf- und Fußzeile verwenden. Also lasst uns lernen, wie man das macht. Wir können einfach eine neue Datei in Ansichten erstellen, und dies wird home.html sein. In diesem Haus müssen wir die Kopf- und Fußzeile einschließen. Um das zu tun, können wir einfach diese Codezeile schreiben, so Kommandant, Bindestrich, und dann einschließen, was wir als Partials einschließen und dann attr. Also jetzt schließen wir einfach das Tag wie zuvor, und das ist unser Header. Und natürlich können wir hier alles eingeben, was wir wollen. Also, lassen Sie uns zum Beispiel Hallo von zu Hause schreiben, und es wird gut funktionieren. Aber für jetzt müssen wir es mit der App dot JS rendern. Hier. Also gehen wir zurück nach oben und innen. Wir müssen es als app.get verwenden. In der Lücke müssen wir wie gewohnt nach Hause rendern. Jetzt gehen wir zurück, erfrischen wir uns. Und wie wir sehen können, haben wir unsere Navbar. Es ist vorerst sehr klein, aber wir haben es aus dem Header bekommen. Und wir verwenden es tatsächlich in unserem Haus, indem es einfach in unser Haus einschließen, dass DJ S. Also jetzt haben wir das Home für die js-Datei und auch den Header genannt , indem wir einfach darauf verwiesen haben. Dies ist also im Grunde für die Übertragung des Headers von einer Datei in eine andere. Dies ist die einfache Codezeile, die wir verwenden müssen. Also lasst uns jetzt voran gehen und diesen Header hier fortsetzen. Und natürlich müssen wir damit beginnen, ein paar Elemente zu erstellen. Und einige von ihnen sind die Heimat, zum Beispiel, wir brauchen eine Homepage. Und das erste, was ich zu tun denke, ist, ein paar, ein Symbol hier zu erstellen. Also lasst es uns später herausfinden. Aber vorerst schreibe ich einfach die Referenz. Und diese Referenz wird vorerst auf nichts hinweisen. Aber wir haben einige Klassen wie navbar Marke, diese Folie. Und dann Text in Großbuchstaben. Wenn wir hier schreiben müssen, sollte es Großbuchstaben und x g2 sein. Und dann Amex Auto, um es einfach in der Mitte eines Mangels zu machen. Aber für jetzt ist es, dass wir hier unser Element hinzufügen müssen. Ich füge es einfach innerhalb der Spanne hinzu. Die Klasse wird H2 sein, und wir können unser Symbol hinzufügen. Also gehen wir weiter und wählen Sie das Symbol, das wir von Font wollen. Ehrfürchtig. Gehen wir also zurück zu den Symbolen. Und scrollen wir nach unten. Wie wir sehen können, haben wir so viele Gegenstände, die Sie verwenden können. Lassen Sie uns das wählen, dieses zum Beispiel. Für jetzt. Drücken Sie also die Eingabetaste und warten Sie ein wenig, bis die Seite geladen ist. Und Sie können dieses Symbol tatsächlich mit dieser einfachen Codezeile verwenden. Also, wenn Sie hier gehen, gehen Sie nach unten Seite mit diesem Symbol und kopieren Sie dies. Jetzt gehen wir zurück zu unserem Code. Und anstelle von mir füge ich das ein. Nun, wenn wir auf unsere E-Commerce-Website zurückgehen, oh, es ist hier. Also das ist es im Grunde, das ist unser Eigen, das wir jetzt verwenden werden. Also jetzt, nachdem wir das Element erstellt haben, können wir tatsächlich damit beginnen, unsere Elemente in dieser Navigationsleiste zu erstellen. Um das zu tun, müssen wir die neue Abteilung schaffen. Und diese Division wird wie üblich mehrere Klassen haben. Die Klasse wird zusammengebrochen, die First-Class, und das ist die wichtigste Klasse und wir werden sehen, warum in ein bisschen. Aber für jetzt, navbar für Labore. Und danach, rechtfertigen Inhalte zentriert. Und natürlich, Text, Großbuchstaben und dann SW, fett. Und natürlich, da wir die Daten als Ziel verwenden, um auf meiner Navigationsleiste zu zeigen, müssen wir es wie zuvor benennen. Also meine Navigationsleiste, und das ist eigentlich für die Division, das ist Nachfrageabteilung. Innerhalb dieser Abteilung müssen wir die erste Spalte erstellen und es wird eine Spalte Dan sein, und natürlich auch eine Gruppe. Das ist also eine Spalte 10-Gruppe. Und natürlich müssen wir die ungeordnete Liste erstellen. Und innerhalb unserer ungeordneten Liste wird navbar, nav und einige Polsterung oder Rand auf allen Seiten haben . Das ist also, wir können unseren ersten Listeneintrag erstellen. Und wie üblich, wird die Klasse nav Element sein. Da wir mit dem Netzwerk arbeiten, wird der Link vorerst auf nichts zeigen. Und natürlich die ID. Wir werden es später herausfinden. Aber jetzt, um die aktive Klasse zu sein. Und die Klassen werden nav Link sein, eine Box vielleicht für später und m2. Dann denke ich, dass wir jetzt gut sind. Also lasst uns voran gehen und es überprüfen. Wenn ich mich erfrischen würde, haben wir nichts gesehen, weil wir es nicht probiert haben. Die Homepage. Das hier ist also zu Hause. Und wie Sie sehen können, haben wir vorerst unser Zuhause. Dies ist also das erste Listenelement. Lasst uns weitermachen und die anderen erschaffen. Also hier drinnen, lassen Sie mich das ein paar Mal kopieren. 1, 2, 3, 4 und 5. Denken Sie nun daran, dies als Marke und dann dieses Produkt zu machen. Und natürlich brauchen wir eine Seite für die, über uns. Und so geht es darum, und das ist Kontaktieren Sie uns. Also, das ist es im Grunde vier. Und der Roman, der erste Teil der Navbar, wenn ich zurückgehe, lass es mich einfach in Kategorie-Sache ändern, es ist besser. Und wenn ich zurückgehe, aktualisieren, wie wir sehen können, haben wir Hausmarke Kategorie über Kontakt und wir können alle zustimmen, dass wir sie anpassen müssen, vielleicht ändern Sie die Farben. Und natürlich müssen wir am Ende dieses Nabla ein paar Dinge hinzufügen. Vielleicht eine einfache Anmelde- und Anmelde-Button wird sie später auschecken, aber für jetzt ist dies es. Also im nächsten Video werden wir unsere CSS-Datei für unseren Header erstellen. Und nur ein paar Dinge hier. Und natürlich weiter, aber ich denke, unsere Header, die Anmeldung, Anmelde-Buttons. Und wir werden dieses Anmelden als Modell erstellen. Und wir werden sehen, wie es gebaut wird. Und das nächste Video. Das ist es also für dieses Video. Hier. Der nächste. 4. Navbar 1: In Ordnung, also jetzt, wo wir mit unserem ersten Teil der Mathe-Bar fertig sind, können wir mit einem Start der Tiere beginnen. Und eine Möglichkeit, dies zu tun, besteht darin, einen Stil oder eine CSS-Datei zu erstellen. Und in dieser CSS-Datei werden wir es mit unserem Header verknüpfen. Und natürlich können wir die Elemente nach ID oder Klassennamen oder sogar nach dem Tag aufrufen . Und wir können alles ändern oder ändern, was wir nicht waren, wie Farbe, Größe und so weiter. Zunächst müssen wir einen Öffentlichen Ordner erstellen. Und in diesem Ordner werden wir einen CSS-Ordner erstellen. Und dann erstellen Sie die CSS-Datei. Und ich nannte es style.css. Du kannst es benennen, was immer du willst. Aber Sie sollten darauf achten, dass es mit dot css enden sollte, was anzeigt, dass dies eine SCSS-Datei ist. Also, das ist meine Akte für jetzt. Und natürlich müssen wir es mit unserem Header verknüpfen. Also geh zurück. Und wie Sie sehen können, habe ich diese Codezeile hinzugefügt. Und es sagt einfach, dass wir dieses Erbe EJS mit einer Datei namens style.css verknüpfen wollen , ist ein CSS-Ordner. Und natürlich, um zurück zu gehen, vergessen Sie nicht, dass wir jetzt auf Partials sind. Also müssen Sie hier zurück gehen und dann in den CSS-Ordner style.css gehen, und es sollte gut funktionieren. Also jetzt, um sicherzustellen, dass wir einfach gehen können, und sagen wir, ich brauche den Körper mit der Hintergrundfarbe von Rot. Also, wenn ich jetzt zurückgehe und mich auffrischen, können wir sehen, dass wir den roten Hintergrund haben, wie wir wollten. Dies deutet also darauf hin, dass unsere CSS-Datei gut funktioniert. Also das erste, was wir werden, um die Schriftfamilie des ganzen Körpers zu ändern. So Schriftfamilie. Und natürlich machen wir es serif und das sollte wichtig sein, also fügen wir einfach S als wichtig hinzu. Jetzt gehen Sie frisch zurück und jetzt sind wir gut. Also lasst uns gehen und mit Styling p Elemente unserer nav bar beginnen. Und diese Elemente befinden sich in der Kopfzeile. Also erstelle ich diese Kommentare, um anzuzeigen, dass dies ein Header ist. So und erwachsen. Und natürlich, wenn wir die Elemente nach ID oder nach Klassennamen aufrufen müssen. Und gehen wir zurück zum Header. Blättern Sie nach unten. Und wie wir sehen können, haben wir diese Klasse navbar, nav und nav Element. Also werden wir diese beiden verwenden, um das Banner dieser Elemente zu ändern und zu ändern. Und natürlich, gehen wir zurück und beginnen mit dem ersten. Also Navbar, Nav. Und das wird ein Schauspieler sein. Also, wenn diese Klasse aktiv ist, sollte die a innerhalb der Navbar von Farbe 31 sein. 31, 8, f fünf sein. Aber das ist ein, im Grunde ist dies die Strömung, die wir für jetzt verwenden wollen. Und sagen wir mal, wenn wir über etwas schweben, brauchen wir die Farbe, um auch diese zu sein. Also müssen wir das Navigationselement ändern, wenn wir das Element mit dem Mauszeiger über haben. Und die Farbe sollte der gleiche Hashtag sein, 31, 8, f, v5. Und jetzt lasst uns wieder auffrischen. Und wenn ich über dieses Element schwebe, können Sie sehen, dass es sich in das ändert, was wir wollen. Nun, wenn wir die Größe reduzieren, wie wir sehen können, kollabiert es. Aber lassen Sie mich es größer machen. So haben wir Hausmarke Kategorie über und Kontakt. Wenn wir es jedoch kleiner machen, kollabiert es und es gibt nichts, was wir drücken können, um diese Elemente zu visualisieren. Also lasst uns es bauen und natürlich den Stil dieser Gegenstände ändern, um sie schöner aussehen zu lassen. Das erste, was wir tun müssen, ist, unsere Divisionen hier zu schaffen. Also habe ich einen leeren Raum gelassen, um sie zu erschaffen. Und jetzt, also das erste, was wir brauchen, um eine neue Aufteilung der Klasse, Hintergrundlicht und anämische Linie eins zu schaffen. Kopieren Sie es zwei weitere Male. Und das ist Zeile 2, Zeile 3. Nun gehen wir zurück zu unserer style.css und lassen Sie uns einige Styling-Elemente hier hinzufügen. Zum Beispiel können wir die hinzufügen, die drei Zeilen auf der gleichen. Also Zeile eins und diese Zeile zwei. Und natürlich, dass Zeile 3. Lassen Sie uns die geschweiften Klammern öffnen, also gebe ich ihm eine Breite von 23 Pixeln. Du kannst es ändern und es vielleicht selbst ausprobieren. Aber vorerst gebe ich ihm das Gleiche. Die Breite von 23 Pixel, die Höhe zu sein vielleicht, machen wir es drei. Ich denke, es soll gut sein. Und dann der Rand von fünf Pixeln. Und natürlich müssen wir einen Übergang hinzufügen. So sollte der Übergang alt sein, ein 0,4 Sekunden. Und wir werden in einem Moment sehen, warum. Aber im Moment können wir die Änderung nennen. Und dies wird, wie gesagt, das Transformieren Rotation minus 45 Grad sein. Also schreibe ich es einfach und erkläre es dann. Das ist also spät. Von minus fünf Pixel und sechs Pixel. Und natürlich zu Zeile 2. Das wird unsere Kapazität sein, 0. Und dann wird die letzte Änderung sein. Diese Linie 3 und transformieren. Drehen Sie 45 Grad und übersetzen Sie. Minus fünf Pixel, minus sechs Pixel. Also, das ist es im Grunde. Und wenn Sie Schwierigkeiten haben, diese Codezeile, das CSS, zu schreiben, können Sie immer den alten Wertkurs zurücksehen und in dem ich HTML und CSS erklärt habe. Und wir haben eine sehr detaillierte Erklärung zu einigen sehr wichtigen Themen. Und vorerst sind das die Linien. Gehen wir weiter und fahren dann weiter. Geh zurück zu ihnen. Also, nachdem wir die Linien geändert haben, brauchen wir die nav Taste. Und wenn wir uns darauf konzentrieren, ändern wir den Radius, den Grenzradius in keiner. Und das ist wichtig. Natürlich, und geben wir ihm hier ein Semikolon. Nun, für den Menüpunkt, ich benenne einfach, benannte sie nach. Also dieser Menüpunkt, Lassen Sie uns die Größe ändern. Größe wird also 16 Pixel betragen. Und dann der Buchstabenabstand und geben Sie ihm ein Pixel und die Farbe und machen es vielleicht nur zwischen den weißen und grauen, so Schriftgewicht wird leichter sein. Und schließlich wird der Übergang alle n sein, oder vielleicht die Farbe und 0,5 Sekunden. Das ist es also für das Styling der Navbar. Also lasst uns weitermachen und sie umbenennen. Also in der Kopfzeile haben wir hier das navbar Kleinkind, das Hintergrundlicht 123. Und natürlich müssen wir den Menüpunkt zu all diesen hinzufügen. So Menüpunkt. Und wann immer Sie das gleiche für mehr als ein Element hinzufügen möchten, können Sie einfach auf und drücken, und wählen Sie dann alle Orte, die Sie schreiben möchten, und schreiben Sie dann Menüpunkt. Und jetzt sind wir gut. Also haben wir unsere Menüpunkte, nav Elemente, navbar, alles sollte gut funktionieren. Gehen wir weiter und rennen. Wie wir sehen können, haben wir unsere Home-Marken-Kategorie über und Kontakt. Und wenn wir den Mauszeiger über sie bewegen, können Sie sehen, dass es die Farbe ändert. Nun, was wir in der Tat Übergänge getan haben, ist, dies zu schaffen. Das erste, was ist, dieses zu schaffen. Und wann immer wir drauf drücken, haben wir die hier. Also, was haben wir getan? Abbrechen, gehen Sie zurück zum Stil. Und wie wir sehen können, sind wir in 4,4 Sekunden für die Löwen umgestiegen. Und natürlich haben wir minus 5 minus 45 Grad und minus fünf Pixel auf sechs Pixel für Zeile 1, minus fünf Pixel und minus sechs Pixel zu Zeile 3 und Zeile 2 übersetzt 45 Grad und minus fünf Pixel auf sechs Pixel für Zeile 1, , wir haben ein Bassett ist 0. Und natürlich haben alle Menüelemente die gleiche Schriftgröße, Buchstabenabstand, Farbe, Schriftgewicht und Übergang. Das ist also im Grunde für die Stile. Wenn wir jetzt zurückgehen, sehen Sie es noch einmal. Wenn wir hier drücken, haben wir alle unsere Elemente hier. Machen Sie es größer. Wir haben sie hier. Vielleicht können wir im nächsten Video diese Anmelde- und Anmelde-Buttons hinzufügen. Und natürlich können wir hier vielleicht die Größe reduzieren. Ich glaube, es sieht aus. Vielleicht kann ich das etwas nach rechts schieben und es größer machen. Und ja, wir sind vorerst gut. Das ist es also für dieses Video. Das nächste Video werden wir unsere navbar abschließen, dann beginnen Sie mit unserer Fußzeile und sehen Sie dann. 5. Navbar 2: Hallo und willkommen zurück. In diesem Video werden wir weiter bauen unsere navbar und dann auf das Foto zu bewegen. Also zuerst müssen wir zwei Schaltflächen erstellen. Die erste werden wir sagen, melden Sie sich an, und die zweite wäre, sich anzumelden, wenn Sie bereits ein Konto haben. Also, wenn das gesagt wird, lasst uns fortfahren. Wir haben unsere ungeordnete Liste erstellt. Wir haben diese Teilung, und innerhalb dieses Zusammenbruchs können wir unsere neue Division hinzufügen. Und diese Teilung wird nur erscheinen, wenn der Bildschirm Schlamm ist. So melden Sie sich nur dann an, wenn wir einen großen Bildschirm haben. Also, um das zu tun, werden wir die Spalte große zwei verwenden. Und die ungeordnete Liste wird von Klassen navbar sein. Und um anzuzeigen, dass wir das hinzufügen wollen, tut mir leid, navbar-nav at float. Und so schweben. Und, und wir sind gut. Wir können mit der Erstellung des Navigationselements beginnen. Und natürlich müssen wir den HRF schaffen. Die Klassen werden nav Link sein. Dann haben wir das Textlicht und natürlich fügen Sie vielleicht die Klasse Anmelden für später hinzu. Das ist also Anmelden. Wenn ich zurückgehe und aktualisiere, erhalten wir diesen Anmelde-Button, der hier erscheint. Nun, wie gesagt, wir wollen, dass diese Anmeldung nur dann erscheint, wenn wir einen großen Bildschirm verwenden. Also, wenn ich es vielleicht kleiner mache, können wir sehen, dass die Anmeldung hier erscheint. Also sind wir vorerst gut. Und natürlich müssen wir die Anmeldung hinzufügen, aber ich denke, die Anmeldung einfach verschwinden zu lassen. Wenn wir jedoch einen kleinen Bildschirm wie diesen haben, werden wir diesen und das Logo haben. Und dann hier haben wir Sinus. das zu tun, können wir einfach unseren Code unter unserer Abteilung schreiben. Also diese Abteilung, wo ist sie? Das ist es, das ist der Zusammenbruch. Und diese Division, und erstellen Sie dann eine neue Division. Und diese Division wird mehrere Klassen haben. Wir haben hier schon zehn von Reichtum genutzt. Also werden wir das die restlichen zwei benutzen. Und natürlich gebe ich es zeigt px 1, Spalte 2. Und wenn der Bildschirm groß ist, ist vielleicht einer genug. Also jetzt werden wir unsere Liste erstellen. Wie üblich, wird die Klasse Navigationsleiste und dann das Listenelement der Klasse nav Element sein. Und natürlich müssen wir unser Element schaffen. Zeigen Sie auf nichts hin. Für jetzt. Dies ist wie üblich in der Länge. Und in diesem Nav-Link. Wir können unsere Spannweite schaffen. Und in diesem Fall denke ich, ein Modell zu erstellen, und das wird herauskommen. Also zum Beispiel, nehme ich an, ich habe diesen Knopf hier. Immer wenn ich drücke, drücke auf Sinus n, etwas wird hier erscheinen, um den Benutzernamen und das Passwort einzugeben. Also lassen Sie uns voran und bauen es jetzt innerhalb des Links hier. Also haben wir genug weiße Balken, nav Artikel und nav Link. Also lassen Sie uns das vorerst überspringen. Wir werden unser Symbol später erstellen. Aber jetzt lasst uns das eigentliche Modell bekommen. So wird es vorerst ein Link zu nichts sein. Und es wird navbar Marke sein. Wie üblich Daten Kampf sein. Und das wäre, Saga nur zu modellieren, um das Modell Daten BAS Ziel zu tunneln. Ich werde es Sinus n. Also schreibe ich einfach Hashtag-Anmeldung. Innerhalb dieser Ebene werde ich eine Schaltfläche erstellen, a, Klasse B, das Ende, der Typ wird Schaltfläche sein. Und der Stil, den ich denke, wie üblich die Hintergrundfarbe zu haben. Schritt 3 eins, 8, f, v5. Also, jetzt sind wir gut. Wenn ich nur sein Zeichen eingeben und gehen wir zurück, aktualisieren, gehen, um diese Schaltfläche als Anmelden hier zu bekommen. Nun, was wir tun wollen, ist dieses Modell zu erstellen. Also, wenn wir drauf drücken, wird das hier draußen herauskommen. Und davor, lassen Sie uns einfach dieses kleine Ding hier hinzufügen. Also denken wir immer daran, einen Warenkorb hinzuzufügen. Und in diesem Navigationslink, also vielleicht fügen Sie einfach das I-Symbol von Font Awesome hinzu. Und die Klassen werden FAS als Warenkorb sein und es zweimal größer machen. Also habe ich ein zwei X. Und natürlich brauchen wir einige Stile, also denke ich, es weiß zu machen, so Farbe weiß. Also, jetzt sind wir gut Refresh, gehen, um diesen Warenkorb hier raus zu bekommen. Und wir wollen den Warenkorb und das Anmelden gleichzeitig zeigen. Wenn sich der Benutzer nicht anmeldet, zeigen wir Sinus n an und melden Sie sich an. Vielleicht haben wir diesen Warenkorb hier gezeigt. Aber wir werden es später herausfinden. Moment müssen wir uns anmelden. Und natürlich, die Schaltfläche der Abmeldung. Also lassen Sie uns voran und erstellt als, wie diese tatsächlich. Also haben wir hier den Button der Abmeldung. Also lasst uns einfach das Abzeichen hier ändern. Und natürlich, lassen Sie uns überprüfen jede Welle navbar Marke, modal, Sinus n Typ Klasse. Alles sieht gut aus. Allerdings müssen wir tatsächlich die Elemente entfernen, dieses und dieses. Also denke ich, dass wir jetzt gut sind. Wir haben die Klasse Navbar. Und wir müssen eine Aktion hinzufügen. Also entklicke, gehe etwas zu tun, aber jetzt werde ich es leer lassen. Und wir werden es tatsächlich sehen, während wir auf dem Backend fahren. Für den Moment ist das alles. Also, wenn ich zurückgehe und aktualisiere, gehe, um die Anmeldung, Abmeldung, Anmeldung und Wache zu bekommen. Also, bevor wir weitermachen, lasst uns das einfach aussagen. Also diese beiden und wir werden mit anmelden und unterzeichnen n Home-Marken-Kategorie. Und alles sieht vorerst gut aus. Dies ist also im Grunde für die Anmeldung und Anmeldung. Und jetzt lassen Sie uns das eigentliche Modell hier erstellen. Um das zu tun, gehen wir weiter und gehen zurück zu unserem Header. In diesem Header, Lassen Sie uns aus diesem navbar Header gehen, erstellen Sie eine neue Division. Und diese Division wird ein Klassenmodell sein, und es wird auch die ID verblassen, wie wir gesagt haben, jeder Punkt darauf hin, also lasst es uns kopieren. Also id gleich sinus n innerhalb dieser Division, werden wir das Formular erstellen. Die Aktion wird später entschieden. Für jetzt lasse ich es leer. Und natürlich müssen wir Methode hinzufügen, aber im Moment können wir darauf verzichten. Die Aufteilung dieser Klasse wird also modaler Dialog sein. Und wir werden mehrere Divisionen innerhalb dieses modalen Dialogs erstellen. Also wird der erste mehr als Inhalt sein. In diesem Inhalt werden wir den Header und Titel haben, dann Körper. Also das erste, was wir werden, um ein Modell zu erstellen, dass Inhalt. Und darin werden wir den modalen Header haben. Dann haben wir die h Bar. Dies wird modaler Titel sein. Und dann hier werden wir es unterschrieben haben. Für jetzt. Wenn ich zurückgehe und anwesend aktualisiere , so würde der Sinus n genau hier herauskommen. Was wir also tun werden, ist ein Label hinzuzufügen, dann eine Eingabe, dann ein Label für die Passworteingabe und die Anmelde-Taste. Geh zurück. Und natürlich, nachdem Sie dieses H4 erstellt haben, erstellen Sie vielleicht die Schaltfläche zum Verwerfen. Zum Beispiel. Hier werden wir den modalen Körper haben und ich denke, eine Formulargruppe zu erstellen. Und natürlich werden wir ein paar Verbote haben. Das erste Etikett wird für eine E-Mail. Die Klasse wird beschriftet. Und dann haben wir Email-Adresse. Und natürlich, nachdem ich das Label bekommen habe, habe ich eine Eingabe vom Typ E-Mail. Und die Klassen werden Kontrolle gebildet werden. Dann haben wir MEIN zwei zu sein und das ist eine Eingabe. Und der Name, wir werden diesen Namen später verwenden, aber jetzt nennen wir es Benutzername. Das ist also der erste. Ich gehe weiter und aktualisiere die Presse. Wir haben eine E-Mail-Adresse und die Eingabe. Also gehen wir zurück und lassen Sie uns das tatsächlich kopieren, um es nicht viele Male zu wiederholen. Also haben wir die E-Mail-Adresse, dann haben wir das Passwort. Also lasst uns dies einfach für Passwort ändern. Und natürlich müssen wir diese auch ändern. So Passwort-Typ, auch Passwort. Und schließlich wird der Name auch Passwort sein. Also das ist es für die E-Mail-Adresse und das Passwort. Sieh sie dir an. Wir haben das E-Mail-Passwort, und natürlich müssen wir die Anmelde-Button hinzufügen. Also gehen wir zurück zu hier. Und in unserer Abteilung. Das hier ist für die Leiche. Wir, wir beendeten mit dem Körper, um die Fußzeile zu erstellen. Das wird also modelliert. Und wir werden Content-Center rechtfertigen. In diesem Foto werde ich die Schaltfläche erstellen und dies wird vom Typ senden und die Klasse wird btn sein. Und ich denke an die gleiche Hintergrundfarbe wie zuvor. Tut mir Leid, Hintergrundfarbe. Und es wäre 318, F, B5. Also 31. Es Das ist b5. Lass uns wieder auffrischen. Wir werden diesen kleinen Button bekommen, aber wir haben vergessen, hier Sinus n. Gehen Sie zurück, aktualisieren Sinus n. Und wie Sie sehen können, haben wir diesen Anmelde-Button genau hier. So können wir jetzt unsere E-Mail-Adresse und Passwort eingeben, dann klicken Sie auf Anmelden. Und wenn wir eingeloggt sind, wenn wir ein Konto auf dieser Website haben, wird das uns entsprechend nehmen. Wenn wir jedoch nicht haben, vielleicht werden wir etwas wie eine Warnung oder so etwas hinzufügen , um einfach zu verherrlichen, dass diese E-Mail-Adresse oder Passwort oder nicht, korrigieren. Dies ist es im Grunde für das Frontend des Headers. Ich denke, das ist vielleicht klar genug Anmelde-E-Mail, Adresse und Passwort. Vielleicht später können wir eine Anmeldung mit Google hinzufügen, wo der Benutzer wählen kann, um sich mit einem bereits erstellen Sie das Konto von Google anmelden. Und das kannst du auch mit Facebook machen. Aber um es jetzt einfach zu halten, werden wir die Anmelde-Button verwenden. Und dann können wir später vielleicht eine weitere Schaltfläche hier hinzufügen und vielleicht sagen, melden Sie sich bei Google an. Also das ist es für den Header. Und das nächste Video werden wir unsere Fußzeile erstellen. So sehen wir uns dann. 6. Footer: Hallo und willkommen zurück. In diesem Video werden wir unsere Fußzeile erstellen. Beginnen wir also mit dem Erstellen des eingefrorenen. Wir haben das Photosynthat EJS. Jedoch, bevor spannend, Lassen Sie uns alle diese kopieren und dann fügen Sie sie zu unserer Fußzeile. Das wäre also das Ende unserer vier dort. Also haben wir die Skripte und den Körper als das HTML. Also für jetzt, lassen Sie uns die Fußzeile erstellen. Die Klassen werden dunkel als Header, die X5 und leer fünf. So können wir jetzt unsere Containerflüssigkeit erstellen und dann die Zeile erstellen. Und der Text wird leicht sein. Und natürlich brauchen wir etwas Polsterung auf der Y-Achse, also vielleicht vier. Und jetzt, nachdem wir die Zeile erstellt haben, müssen wir die Farbe erstellen. Also Kanonenalgen für und für kleine, ich mache es sechs. Nun, vielleicht im Alter von fünf Jahren. Das ist also die „Über uns“. Und der Absatz wird ein Klassenvorsprung sein. Und lassen Sie uns etwas Lauren hinzufügen, Lauren, ich finde es gut. Also jetzt, wenn Sie zurückgehen und aktualisieren, wird nichts passieren, da wir das Foto nicht auf unserer Homepage hinzugefügt haben. Also hier, lassen Sie uns das kopieren und es hier hinzufügen. Aber davor, Lassen Sie uns ein paar Zeilen hinzufügen. Also vielleicht 20 ist gut. Und jetzt müssen wir anstelle der Kopfzeile die Fußzeile hinzufügen. Also, jetzt gehen wir zurück und aktualisieren. Und wie wir sehen können, haben wir diese Über uns hier und einen Lorem Ipsum Absatz. Aber wenn wir zurückgehen, schauen wir mal, was passiert. Also hier haben wir die, jeweils fünf Bilder über uns. Und dann haben wir die Klasse vielleicht geändert diese Führung zu klein, da sie in Größe 10 gleich sind. Gehen wir weiter und überprüfen sie jetzt. Wenn ich zurückgehe und es sieht besser aus. Also haben wir die „Über uns“. Jetzt lassen Sie uns ein paar mehr erstellen. Danke. Also dachte ich, die Seite in vier Kategorien zu unterteilen. Der erste ist über uns, als wir fragen werden, vielleicht fügen Sie einfach alle hier hinzu. Und dann werden wir uns die E-Mail oder brauchen Hilfe oder so etwas, dann haben sie sich verbunden. Das ist also der Plan. Lasst uns hier voran gehen. Also haben wir die Spalte, dann lassen Sie uns eine andere erstellen. Also, nachdem ich mit der ersten Spalte fertig war, um es jetzt für zwei zu verwenden, und natürlich für kleine, dachte ich das gleiche wie zuvor. Also Spalte kleine sechs. In dieser Spalte werden wir den Besuch uns erstellen. Und dann haben wir die ungeordnete Liste. Lass ihn unstylt machen, um die Kugelpunkte zu bekommen. Und natürlich können wir unsere Listenelemente erstellen. Das Element wird Klasse, Fußzeile, Link sein. Und natürlich, müssen nach Hause hinzufügen. Und tatsächlich lassen Sie uns das ein paar Mal kopieren. Diese Liste Artikel 123. Also haben wir Zuhause vielleicht Marken und Produkte. Also, wenn ich zurückgehe und nichts aktualisieren, um Besucher nach Hause Marken und Produkte zu bekommen. Und wann immer wir gehen, uh, vielleicht, vielleicht, der Benutzer auf Marken drücken, wird er automatisch die Markenkategorie hier machen. Das ist es also. Und eigentlich lassen Sie uns diese Produkte in Kategorien ändern , da wir sie bereits zuvor genannt haben. Also das ist es im Grunde für die zweite Division. Fangen wir mit dem dritten an. Und hier werden wir den Benutzer fragen, ob er Hilfe braucht. Also Spalte 2 und Spalte kleine sechs. Und dann ein H5 erstellen und Klasse wird Pb drei sein. Und hier werden wir fragen, ob du Hilfe brauchst. Das ist der Fall. Wir haben eine ungeordnete Liste sagt, bevor die Klasse Liste sein wird und das Listenelement ein H ref sein wird und vielleicht den Kontakt hier hinzufügen. Also Klasse wäre Fußzeile, Link, Kontaktieren Sie uns. Und natürlich können wir diesen Listeneintrag kopieren, um vielleicht unsere E-Mail-Adresse hinzuzufügen. Also hier werden wir unsere E-Mail-Adresse haben, vielleicht dies in E-Commerce auf example.com. Und natürlich können wir das jetzt tatsächlich hinzufügen. Wenn wir also eine E-Mail senden oder den Benutzer dazu bringen wollen, eine E-Mail zu senden, können wir das Postfach öffnen, indem wir die Mail an E-Commerce und example.com senden. Also jetzt, wenn Sie zurückgehen und aktualisieren, wir werden die Kontaktieren Sie uns und E-Commerce und Beispiel vor. Und diese kontaktieren Sie uns, die den Benutzer auf eine ganz neue Seite nehmen , wo wir eine Nachricht haben, die der Benutzer senden kann. Und dieser E-Commerce wird tatsächlich in der Mailbox des Benutzers und machen ihn tatsächlich eine E-Mail an uns senden. Das ist also im Grunde die Idee, Hilfe zu brauchen. Wir haben zwei Möglichkeiten. Entweder kontaktieren Sie uns über die Website oder gehen Sie per E-Mail. Schließlich haben wir den Aufenthalt in Verbindung, und dies wird verwendet, um den Benutzer geben Sie seine E-Mail, wenn er will um exklusive Angebote oder neue Updates zu erhalten. Also gehen wir zurück zu unserem Code. Und in diesem hier, schaffen Sie eine neue Abteilung. Klassen werden Spalte groß oder Spalte klein sein, 685, vielleicht. Ja. Und die Klasse wird V3 sein. Dann haben wir den Aufenthalt in Verbindung. Und dann haben wir einen Absatz. Der Absatz wird klein sein. Und vielleicht etwas wie geben Sie Ihre E-Mail-Adresse , um exklusive Angebote und neue Updates zu erhalten. Das ist es also. Lassen Sie uns das Formular erstellen, das der Benutzer absenden soll. Die Aktion wird vorerst leer sein. Und natürlich müssen wir eine Klasse hinzufügen, vielleicht nur die Randunterseite drei für den Moment. Und dann müssen wir eine Unterteilung schaffen. Eingabegruppe. Innerhalb dieser Eingabe wird die männliche Eingabe haben und die Klasse wird Steuerung gebildet werden. Und natürlich wäre der Name E-Mail. Dies ist für späteren Platzhalter, wäre e-Mail-Adresse. Also denke ich, das ist gut. Vielleicht fügen Sie einfach die Schaltfläche zum Senden hinzu. Dies wäre also Eingabe, Gruppe anhängen, an die Eingabe darüber anhängen. Und wir haben die Schaltfläche und der Typ wird eingereicht. Dann haben wir den Unterricht. Wir haben mehrere Klassen. Ich dachte, einen Gefahrenhintergrund hinzuzufügen. Also gaben wir Gefahr. Und dann haben wir den Text, weißen Text, Großbuchstaben. Und natürlich, vielleicht machen Sie das Schriftgewicht fett. Ja, das ist es im Grunde, wenn ich voran und aktualisieren, werden wir erhalten, geben Sie Ihre E-Mail-Adresse, um exklusive Angebote und neue Updates zu erhalten. Wir haben die E-Mail-Adresse und diesen Button. Allerdings haben wir vergessen, etwas hinzuzufügen, vielleicht auf sehen Sie hier. Also, wenn ich zurückgehe und aktualisiere, gehe, um diese E-Mail-Adresse zu erhalten und die CU daran angehängt. Wenn wir jetzt sehen, haben wir einen kleinen Unterschied. Vielleicht. Lasst uns das anpassen. Also statt, lasst uns sie zählen. Also haben wir hier 4268. Und wir haben auch hier für ja, ich denke, wir sind jetzt gut. Diese E-Mail-Adresse Punkt b2 lang. Und in der gleichen Linie zu sein, vielleicht hohe Dividendenraum. Lasst uns nachsehen. Ja, es ist wegen dieser E-Mail-Adresse ist zu lang. Wir können es anders machen als das, also lass es uns auf example.com eco machen, aktualisieren. Und jetzt sind wir gut. Sie haben die Kontakt-E-Mail. Und wenn er sein eigenes Ihn und Atlas eingeben will, um exklusive Alphas und neue Updates zu erhalten , kann er von hier aus. Und klicken Sie auf Senden, sehen Sie. Und dann wird dies später in unserer Datenbank verwendet, wo wir diese E-Mails aufbewahren und dann exklusive Angebote an diese Nutzer senden können. Also das ist es für die Fußzeile. Wir haben gerade unsere Kopf- und Fußzeile erstellt. Und eigentlich glaube ich, dass sie schön aussehen und wir haben unsere hier drüben schwebt. Und natürlich können wir diese beiden Tasten anpassen, aber vorerst lassen wir es so, wie es ist. Und die nächsten Videos werden wir mit der Erstellung der über uns beginnen und kontaktieren Sie uns Seite. Und dann gehen wir zu unseren letzten drei Seiten, die die Hausmarke und Kategorie sind. Das ist also das Ende dieses Videos. Wir sehen uns im nächsten. 7. Über und Kontakt: Hallo und willkommen zurück. In diesem Video werden wir unsere Über uns Seite erstellen. Und wir werden anfangen, diese Seite innerhalb der Homepage zu erstellen. Dann, nachdem wir es beendet haben, können wir unsere eigene EJS-Datei erstellen und den gesamten Code dorthin verschieben. Aber im Moment werden wir damit beginnen, es genau hier zu erstellen. Das erste, was wir tun müssen, ist, den Abschnitt mit einigen Klassen zu erstellen. Die erste Klasse wäre B5 und ich würde ihm vielleicht eine M vier geben. Ja. Und wir müssen unsere Behälterflüssigkeit schaffen. Dann können wir unsere Abteilung schaffen. Und diese Division wird die Kopfzeile sein, die Über uns, der Titel. Und wir werden erstellt, vielleicht Textcenter. Und dann jeder. Ich denke darüber nach, eine Farbe zu haben. Also benutze ich diese Kachel. Es wird Farbverzögerung sein. Und dann können wir „Über uns“ erschaffen. Dann haben wir einen Absatz. Ich werde etwas Polsterung auf der Y-Achse hinzufügen und dann einige lernen. Gott sei Dank. Und wenn wir zurückgehen und uns erfrischen, werden wir das über uns besorgen, als wir ein paar Zeilen haben. Danach können wir vielleicht etwas Visuelles schaffen. Und ich dachte daran, uns vielleicht zu schreiben und dann einige unserer Eigenschaften aufzulisten oder was sind wir besonders? Und so können wir vielleicht, nachdem wir diese Division erstellt haben, eine neue Division erstellen. Und das wird Rho Text weiß und Steuerzentrum sein. Dann werden wir die Spalte auf der alten Seite haben und ich bin weiß fallen in das. Ich werde fragen, warum. Und natürlich müssen wir hier einige Klassen hinzufügen, also zeigen Sie sie vorher an. Und die Farbe wird auch schwarz sein. Also das ist es im Grunde für die Drähte und jetzt können wir vielleicht einige unterstrichen hier hinzufügen. Also der Perser. Und dies wird eine Klasse von Unterstreichung und vielleicht März und Knopf der Folie nach der Unterstreichung nehmen . Also, wenn ich zurückgehe und wie Sie sehen können, haben wir das, wie gesagt. Und hier können wir die Eigenschaften oder unsere Spezialitäten hinzufügen. Also dachte ich, schneller, sehr beste Preise und Top-Qualität hinzuzufügen , und dann auch einige Symbole hinzufügen, um anzuzeigen, was wir sagen. Nachdem wir diese Division beendet haben, die hier ist, können wir weitermachen und eine neue Reihe mit MEINEN Leben schaffen. Und jede Spalte wäre MD4. Und natürlich das Steuerzentrum. So können wir jetzt unser erstes Icon erstellen. Und dieses Symbol wird FASFA sein, Versand schnell, um die schnelle Lieferung anzuzeigen und machen es fünf Taschen. Und der Text wird Gefahr sein. Also, jetzt bin ich vorher, und jetzt sind wir gut. Lassen Sie uns eine schnelle Lieferung direkt hier hinzufügen. Und wenn ich zurückgehe, aktualisieren Sie jetzt, um dieses Symbol und dann schnelle Lieferung zu bekommen. Wenn wir hier etwas hinzufügen möchten, können wir einen Absatz hinzufügen. Also vielleicht in der Regel etwa fünf bis sieben Tage. Gehen wir zurück und erfrischen wir uns. Und wie wir sehen können, haben wir schnelle Lieferung, in der Regel etwa fünf bis sieben Tage. Wir haben noch zwei übrig. Das ist also eine schnelle Lieferung. Wir haben keine besten Preise. Lassen Sie uns voran gehen und umgesetzt. Wir können einfach diese Spalte kopieren, zwei weitere Typen, 1 und 2. Anstelle einer schnellen Lieferung können wir beste Preise schreiben. Und hier können wir die Top-Qualität hinzufügen. Nun, ich habe bereits nach den Symbolen gesucht, also weiß ich, anstelle von FAS, haben eine Lieferung, Lassen Sie uns diese entfernen. Und ich dachte über die besten Preise verwenden Sie die Hand halten USD. So wie Hilfe und halten USD und erkennt, wird die inter sein, auch der Scherz, dass es rot ist. Und hier ein Pfeil und dann umkreisen. Das ist es also. Aber anstelle von FAS werden wir FHIR verwenden. Das sind also einfache Klassen und vier Fuß Font, Awesome, und wir müssen uns keine Sorgen um sie machen. Wir können sie einfach nicht von dort kopieren und in implementieren. Jetzt gehen wir weiter und erfrischen uns. Wir haben beste Preise, Top-Qualität und schnelle Lieferung. Also lasst uns diese Absätze ändern. Statt in der Regel etwa fünf bis sieben Tage. Vielleicht. Ich weiß nicht, vielleicht Lauren, acht. Und dann haben wir hier Top-Qualität. Und es ist auch gelernt. Also gehen Sie voran und aktualisieren, betrachten unsere Y AS schnell in einem sehr besten Preis und Qualität. Und wir haben hier eine kleine Definition. Oh, Einführung in unsere Produkte oder Firma. Also das ist es im Grunde für die Über uns Seite. Ich denke, es sieht nett und einfach aus. Und natürlich können wir weitermachen und unsere Kontakt-Us-Seite erstellen. Nein. Also davor, können wir einfach entfernen alle diese und fügen Sie sie in der Wissenschaft, unsere über uns. Gut. Also lassen Sie uns voran und erstellen Sie hier eine neue Datei namens über EJS. Und das wird all diesen Abschnitt enthalten. Also lassen Sie es uns kopieren und hier einfügen, aber stellen Sie sicher, dass Sie die Kopf- und Fußzeile einschließen. Also werde ich das hier enthaltene kopieren. Und dann werden wir auch die Fußzeile haben. Also bitte hier. Und jetzt sind wir gut. Wir gingen zurück zu unserer ersten Position. Wir haben Hallo von zu Hause. Und diese Zeilen hier. Das ist also im Grunde für die Über uns. Und wann immer wir implementieren wollen oder Sie mit dem Back-End arbeiten, können wir dies anpassen. Soever wir drücken auf diese über, bringen Sie uns zu der, über die js. Also lassen wir das für später. Aber jetzt lassen Sie uns voran und erstellen Sie eine Kontaktseite. Also gehen wir zurück. Und natürlich brauchen wir, oder wir müssen auch den Kontakt zum EJS erstellen. Aber wie vorher arbeite ich zuerst mit dem Zuhause des EJS und verschiebe es dann zurück in eine andere Datei. Also für jetzt, lassen Sie uns hier eine neue Abteilung erstellen, und das wird der Container sein. Und ich werde einige Klassen hinzufügen auch sah Kontaktformular und BJ dunkel sein. Und ich dachte, die Kontaktbildklasse hinzuzufügen. Und diese Klassen werden wir Diskussionsrunden in der Ionic CSS-Datei verwenden, aber jetzt werde ich sie hier hinzufügen. Also wird die Klasse ein Baby sein, ein Rocket Chat Steuerrutsche. Und dann haben wir eine 5 x Pd D3. Also das ist es im Grunde, wenn ich zurückgehe und mich auffrischen, das bekomme und wir diese Nachricht haben, könnte ich es. Und wir werden es in die Mitte legen. Dann werden wir hier eine Box haben, die besagt, dass Sie Ihre E-Mail-Adresse und Ihre Nachricht eingeben. Und wenn Sie zugewiesen sind, dann können wir es ändern, um die Nachricht nur einzugeben , weil wir die E-Mail-Adresse bereits kennen. Das ist also die allgemeine Idee. Also lassen Sie uns voran und implementieren es jetzt. Jetzt drinnen. Dann erstellen Sie vielleicht ein Formular. Und wir haben die Methode und Aktion. Wir lassen das für später. In dieser Form haben wir das Alter von drei Jahren, in dem wir retten werden. Sie würden gerne Ihr Feedback bekommen. Und alkylieren Sie die Klasse Textfolie. Geh zurück und aktualisiere dich. Und wie wir sehen können, schneiden wir das. Wir würden uns freuen, Ihr Feedback zu hören. Jetzt starten wir sie und fügen sie ein wenig in der Mitte ein. Aber jetzt werden wir sie einfach hier hinzufügen. Das ist also das h3, das wir hinzufügen können. Unsere Division sollte eine Reihe sein. In dieser Reihe werden wir das Glas Medium Sex haben, die Spalte, sorry, und dann haben wir die Formgruppe wie gewohnt. Und Sie möchten die Eingabe vom Typ Text haben. Und vielleicht wird der Name X Name sein. Und dann haben wir die Klassenformularsteuerung und dann den Platzhalter und vielleicht Ihren Namen. Und jetzt fügen wir den Wert hinzu, aber für jetzt und lassen Sie es bis. Das ist also im Grunde für die Eingabe. Also lasst uns das noch zwei Mal kopieren. Für das E-Mail-Telefon und dann die Nachricht, die eigentliche Nachricht. Also mal sehen. Wir haben hier unsere E-Mail und dann haben wir Text. E-Mail. Der Typ sollte E-Mail sein. Dann haben wir das Telefon. Der Typtext ist also in Ordnung. Wir müssen dies nur auf Telefon und dann auf Ihr Telefon ändern. Und mal sehen, was wir gebaut haben und jetzt aktualisieren, wir haben diese vier Eingänge und sie sind alle untereinander. Also werden wir sie in unserer CSS-Datei reparieren. Für jetzt. Lasst uns sie einfach erschaffen. Lassen Sie uns das löschen. Und jetzt, da wir unseren Namen, unsere E-Mail, unsere Telefonnummer haben. Fügen Sie erneut die Sendenachricht hinzu. Also lassen Sie es uns hier erstellen. Und es wäre tatsächlich der gleiche Eingabetyp Text. Vielleicht ist hier einreichen. Und anstelle von Tags. Und dann haben wir hier, statt des Namens, ich bin Textname, Geschäftsmann, einreichen. Und dann werden wir etwas über Clegg hinzufügen. Platzhalter. Vielleicht löschen Sie einfach den Platzhalter und die Klasse wird btn Kontaktsatz des Formularsteuerelements sein. Also BTN Kontakt, würde der Wert Nachricht senden. Also haben wir eine Nachricht gesendet. Und jetzt sind wir gut. Wenn ich zurückgehe und aktualisieren, haben wir diese Schaltfläche hier, die Nachricht senden sagt. Und wenn wir es anpassen wollen, können wir einfach das btn hier hinzufügen, aktualisieren. Und es verschwand, da wir die Textfolie nicht benutzt haben. Also, wenn ich Text verwende, vielleicht Gefahr. Mal sehen, Aktualisieren. Wir haben diesen Knopf hier, aber jetzt werde ich ihn wie zuvor belassen, die ursprüngliche Art und Weise, und dann werde ich es mit CSS-Stil anpassen. Dies ist also ein grundsätzlich für die Sendenachricht und diese befinden sich in der gleichen Spalte. Und jetzt lassen Sie uns eine weitere Spalte erstellen, in der wir unsere eigentliche Nachricht hinzufügen werden. Also Spalte md 6. Und in dieser Spalte werden wir eine Formulargruppe wie gewohnt erstellen. Und dann werden wir den Textbereich erstellen. Der Name sollte Text sein. Nachricht. Klasse wird für die Kontrolle sein. Und ich denke, wir sind gut. Wir haben alles, was wir brauchen. Vielleicht ist Stil, die Breite zu 100 Prozent, und die Höhe, um auch vielleicht 150 Pixel zu sein, in Ordnung. Und jetzt sind wir gut. Wir haben unseren Textbereich. Schließlich müssen wir in diesem Fall die Schaltfläche „Nachricht senden“ hinzufügen. Also lasst uns weitermachen und es direkt hier erstellen. Oder vielleicht sind wir vorerst gut. Wir eigentlich, ich habe gedacht, das hierher zu bringen oder mal sehen. Aber gehen Sie zurück und erfrischen Sie sich. Wir haben unseren Textbereich und wir haben unsere Nachricht. Ich denke, es sieht so besser aus. Das ist also die allgemeine Idee. Und im nächsten Video werden wir diese Form stylen und es besser aussehen lassen, indem wir sie einfach in der Mitte platzieren, mit etwas Polsterung und Rand über hier und da. Und das Ändern des Stils dieser Schaltfläche zum Senden von Nachrichten. Damit ist dies das Ende dieses Videos. Wir sehen uns im nächsten. 8. Marke: In Ordnung, Also jetzt sind wir fertig mit unserem Haus für über und kontaktieren Sie uns und Betas, wir können mit der Markenseite fortfahren. Also gehen wir zurück zu localhost 3000, und das ist die Seite, die wir haben. Verschieben wir diese einfach auf die Feedback-Seite oder die Kontaktseite. Also hier werde ich eine neue Datei erstellen und sie benennen, kontaktieren Sie diese EJS und gehen Sie dann zu Home, kopieren Sie all dies und fügen Sie einfach in den Kontakt ein. Vergessen Sie nicht, die Kopf- und Fußzeile zu jeder von Ihnen erstellten EJS-Datei hinzuzufügen. Also hier haben wir Header, kopieren Sie dies und fügen Sie eine Träne und Fußzeile hinzu. Also, jetzt bin ich hier aufgestellt, wir waren da und jetzt sind wir gut. Wenn ich zurückgehe, speichern wir, gehen wir zurück und erfrischen uns. Dies ist die Homepage bis jetzt. Und wir haben bereits die über erstellt und kontaktieren unsere Reden und wir können sie verwenden, wann immer wir wollen. Wenn der Benutzer zum Beispiel auf über klickt, sollte er ihn automatisch auf die „Über“ -Seite anstelle dieses Hashtags bringen. Nun, lasst uns auf die Markenseite springen. Und in diesem Fall werde ich es wie gewohnt und die Homepage bauen. Dann, wann immer wir es getan haben, können wir es einfach entfernen und es in der Marke platzieren, die EJS-Datei. Beginnen wir mit der Erstellung der Division. Und es wird ein Text zentriert und der Hintergrund, Ich gebe ihm den Namen Hintergrundmarken verkauft, verwenden Sie es später im CSS. Aber vorerst ist das alles. Das H1 wird vielleicht Marken sein. Und ich denke, etwas Polsterung zu haben. Die Klassenjahre werden BT fünf sein. Und natürlich, gehen, um einen Absatz mit der Klasse Lead Pb zu schreiben. Ich habe auch, und ich denke, wählen Sie Ihr Produkt aus der Marke, die Sie mögen. Das ist also eine kleine Einführung. Wenn ich zurückgehe und erfrischen, haben wir Marken und wählen Sie Ihr Produkt aus der Marke, die Sie mögen. Und natürlich möchten wir vielleicht einen Hintergrund hinzufügen, hier kann ein Bild oder eine Hintergrundfarbe sein, und wir werden es später herausfinden. Aber vorerst ist dies die Grundidee. Und in diesem und denken, eine Sucheingabe hinzuzufügen , damit der Benutzer nach der Sonde oder der Marke suchen kann, die er will. Und dann, äh, vielleicht der Knopf hier. Also lasst uns weitermachen und es tun. So wird es innerhalb der Form und das Formular wirklich leer für jetzt sein. Und die Division wird ein Eingabegruppen-Rand sein, unten drei. Und dann ein Max Auto. Ich denke, das ist gut. Und dann haben wir die Eingabe. So Eingabe des Typs Text, wird die Klasse wie üblich gesteuert gebildet werden. Und natürlich brauchen wir einen Platzhalter. Suchen Sie also nach Ihrer Marke. Und dann haben wir den Namen, den wir später benutzen werden. Ich denke an einen Markennamen. Und dann haben wir vielleicht die Schaltfläche hinzufügen und es wird auf der gleichen Zeile der Eingabe sein. Also werde ich die Eingabe-Gruppe Append-Klasse verwenden. Und dann fügen Sie die Schaltfläche der Klasse, btn, btn, BTN Umriss, sekundär hinzu. Und nur um es grau zu machen und dann E5. Natürlich wird der Typ eingereicht. Und dann haben wir die eigentliche Schaltfläche, die Suche ist. Also, jetzt, wenn wir zurück und drücken Refresh, bekannt, um die Suche Taste haben, aber es sieht sehr groß. Es dauert die ganze Seite, also können wir sie vielleicht anpassen. Wir haben die Schaltfläche Suchen hier. Stattdessen, wenn wir diese Eingabe erstellen, stattdessen diese und diese Division, können wir tatsächlich den Stil erstellen, den wir wollen und wir wollen, dass die maximale Breite vielleicht 35 REM ist. Lasst uns nachsehen. Jetzt, wenn wir zurückgehen, aktualisieren. Ja, ich denke, es ist gut. Aber wir können vielleicht auch die Höhe machen. Also in diesem Fall, vielleicht hier hinzufügen. Ja, also löschen wir diesen Rand, unten fünf und unsere sie wird zurückgehen, wie wir sehen können, wir haben unsere Suchleiste mit dem Such-Button hier. Das ist es also für die Marke. Wählen Sie Ihr Produkt von der Marke, die Sie mögen, und die Suchleiste. Nun gehen wir zu den tatsächlichen Karten, wo wir die Karten haben werden. Der Benutzer hat also zwei Optionen. Entweder wählen Sie die Marke, indem Sie danach suchen, oder wir haben hier einige Marken aufgelistet und Sie können eine von ihnen auswählen. Also gehen wir zurück und hören. Nachdem wir mit dem Formular und der Teilung fertig sind, können wir mit unserer neuen Abteilung beginnen, die Reihe sein wird. Und ich bin Acts Auto. Und natürlich, in dieser Zeile müssen wir die Spalte erstellen, also Spalte Sex und eine max Auto. Auch in dieser Zeile werde ich eine weitere Zeile erstellen. Und wir werden in einer Minute sehen, warum. Aber jetzt lasst es uns zur Pflanze bringen. Also Spalte sechs, oder vielleicht bei mittlerer sexier. Also vielleicht mittlerer Sex und Art von Pull groß bei wird vier sein. Und MY, um etwas Polsterung auf allen Seiten hinzuzufügen. Also P1. Jetzt haben wir unsere Struktur und wir teilen sie tatsächlich Stunde, vielleicht unsere Seite und 2. Zwei Spalten, wenn wir ein Medium für kleinere Bildschirme und in drei Spalten haben. Und wann immer wir große Bildschirme haben und woher wissen wir, dass es zwei oder drei sind. So ist der Bildschirm in 12 unterteilt. Und hier verwenden wir sechs und mittlere und kleine. Also 6 mal 2. Also haben wir zwei Spalten für mittlere oder kleinere Bildschirme. Und er wird vier Mal drei haben, das ist 12. Wir haben also drei Spalten, wenn wir große Bildschirme haben. Und das werden wir in einer Minute sehen. Aber jetzt lassen Sie uns unsere Karte erstellen. Also haben wir gehört und ich werde ihm die Marke Gott geben. Das ist, wir werden NCSS verwenden. Und natürlich, lassen Sie uns unser Formular erstellen und werden später eine Aktion haben. Aber jetzt lassen Sie uns das für MD einhalten. Und wir werden ein Bild haben, das in einer Minute ein Bild auswählt. Aber für jetzt, lasst uns das Kartenbild haben. Und natürlich gehe ich zum Stil, weil ich möchte, dass das Bild eine maximale Höhe von fünf REM hat. Und jetzt sind wir fertig mit dem Bild. Wir können den Header der Karte erstellen. Also werde ich eine neue Abteilung schaffen, in der ich vielleicht die Klasse gehen werde, die der Markenname ist. Also werde ich einen Absatz mit einer Klasse von Lead haben. Und hier werden wir den Markennamen haben. Und dann gehen wir zurück. Und lassen Sie uns die andere Division erstellen, die den Submit-Button nimmt. Und lassen Sie uns es mit Textmitte und etwas Polsterung auf der Oberseite erstellen. Und diese Schaltfläche wird vom Typ senden sein. Also Arten von Mathematik. Und dann haben wir Klasse btn, btn primär. Und dann haben wir vielleicht erforscht. Und jetzt sind wir gut. Wenn ich zurückgehe und auf „Aktualisieren“ klicke, bekommst du die erste Karte. Also haben wir das Bild hier, aber wir haben die Quelle des Bildes noch nicht hinzugefügt. Tun Sie es nicht. Später. Wir haben den Markennamen und erkunden. Also dachte ich, es vielleicht einfach zu machen. Und wenn der Benutzer interessant ist, interessiert sich für die Marke. Er kann immer am nächsten Dienstag auf die eigentliche Marke mit den gelisteten Produkten drücken. Eine andere Seite. Vielleicht erstellen Sie eine Produktseite, auf der der Benutzer alle Produkte dieser bestimmten Marke sehen kann . Und dann können wir auch eine Produktseite für das spezifische Produkt erstellen , das der Benutzer wählt. Also das ist es im Grunde lassen Sie uns das ein paar Mal kopieren. Also vielleicht haben wir diese Zeile und nehmen diese Spalte und wir haben eine andere Zeile. Vielleicht können Sie das kopieren. Also mal sehen, es endet hier. Kopieren Sie das ein paar Mal. Und gehen Sie zurück, drücken Sie Aktualisieren, und jetzt sind wir gut. Wir haben unseren Markennamen, Bilder und den Explorer-Button. Und jetzt gehen wir weiter und fügen einige Bilder hier hinzu. Also, wann immer Sie Bilder wollen, können Sie auf pixels.com gehen. Und diese Bilder sind völlig kostenlos, so dass Sie jedes Bild wählen können, das Sie wollen. Vielleicht nehme ich das vorerst. Und Sie können auf diesen Knopf drücken, um ihn herunterzuladen. Und natürlich können Sie spenden oder Panzer auf Twitter oder Instagram, dem Hersteller dieses Bildes. Ich werde es vorerst überspringen. Gehen Sie zu Choke Show in Ordner und dann nehmen Sie es vielleicht von hier. Erschienen, schneiden Sie es aus und fügen Sie es dann in einen neuen Ordner, den wir in Erstellen gehen, Ich denke, um es Bilder zu nennen und vielleicht in die Ansicht oder öffentlichen Ordner hinzugefügt. Also mal sehen. Ich denke, das hier zu bekommen, vielleicht auch Temperaturen genannt. Und in diesem Bilderordner, werden wir das eigentliche erstellen oder vielleicht fügen Sie es zuerst ein. Und dann gehen wir zurück. Und natürlich können wir immer diesen Ordner und einen Satz und den öffentlichen hier nehmen. In Ordnung, also jetzt in der Öffentlichkeit haben wir CSS und Bilder im Ordner der Öffentlichkeit. Also das ist es im Grunde, wir haben ein Bild gewählt. Wenn wir wollen, können wir auch dieses wählen. Und jetzt haben wir unsere beiden Bilder. Lassen Sie uns sie umbenennen. Und ich denke an Bild eins und Bild zwei und suche immer nach der Punktdatei. Und natürlich, wir werden das in einer Minute sehen, aber Sie müssen sicherstellen, dass, wenn Sie in der Quelldatei schreiben hier, Dies ist unser Bild. Und wann immer wir hier schreiben, dass wir das Bild wollen, zum Beispiel, diese oben und öffentliche Bilder. Wir wollen das hier. Wir müssen sicherstellen, dass wir die Punktdatei schreiben, korrigieren, sonst wird das Bild nicht angezeigt. Das ist es also. Wir können jetzt vielleicht die Bilder hier hinzufügen. Lassen Sie uns diese beiden Bilder hinzufügen. Während dieser, werde ich es wie Punkt-Punkt-Bilder und dann das eigentliche Bild hinzufügen, Bild eins, dass PPG. Und jetzt, wenn ich auf die E-Commerce-Website zurückgehe, werden wir sehen, dass wir das Bild hier bekommen haben. Und natürlich, lassen Sie uns alle löschen, weil wir sie vorerst nicht brauchen. Ich werde die anderen kopieren. Also ändern wir das Bild des ersten, was das ist. Also werde ich das alles löschen. Und lassen Sie uns diese paar Male kopieren und das zweite Bild ändern. Also, jetzt sind wir gut. Wir können dieses Bild 21 mehr Zeit ändern. Dies ist auch Bild 2. Gehen wir zurück und drücken Sie „Aktualisieren“. Und wie wir sehen können, haben wir unsere Bilder. Vielleicht kannst du sie anpassen, aber im Moment sind wir gut damit. Wir haben Marke namens das Bild und erkunden. Und das ist die Markenseite. Vielleicht können Sie hier die Hintergrundfarbe hinzufügen. Also lassen Sie uns überprüfen, ob wir Hintergrund haben. Und wenn wir warten, nehmen wir vielleicht diesen. Jetzt haben wir es hier. Benennen wir es einfach um. Dies ist die Marke des Hintergrundbildes. Ich weiß nicht, ob es schön aussehen wird, aber versuchen wir es. Also haben wir es hier nicht hinzugefügt. Wir müssen es in der CSS-Datei hinzufügen. Also im nächsten Video gehen wir zum CSS der Marken-Ordnerdatei. Und natürlich werden wir mit der Kategorie und dann mit den Produkten, den tatsächlichen Produkten fortfahren . Und wir müssen auch die Admin-Seite erstellen, auf der der Administrator der Website ändern, hinzufügen oder tun kann , was er will innerhalb dieser Website. Das ist also das Ende dieses Videos. Wir sehen uns im nächsten. 9. Produkte: In Ordnung, jetzt, da wir unsere Markenseite erstellt haben, lassen Sie uns fortfahren und alle in die eigentliche EJS-Datei kopieren. Also lassen Sie uns hier voran und erstellen Sie eine neue Datei. Ich werde es als Zuschuss nennen, dass EJS. Und natürlich, gehen wir zurück, kopieren Sie all das und fügen Sie es in diese Marke ein. Und wir müssen die Kopf- und Fußzeile absolut hinzufügen. Das ist also der Header. Und natürlich müssen wir die Fußzeile hinzufügen. Und jetzt sind wir gut. So haben wir unsere Marke Pitch bereit. Und jetzt lass uns gehen und die Kategorieseite erstellen. Also, was ich denke, ist, hier eine Marke und Kategorien zu schaffen. Also, wenn der Benutzer auf Marke klickt, wird es Sie zu dieser Seite, wo wir die Marken haben und natürlich haben wir das Bild genau hier. Und dasselbe für die Kategorie. Immer wenn der Benutzer auf Kategorie klickt, wird er zu den Kategorien gebracht und er suchte nach der gewünschten Kategorie. Und ich denke, das ist es, aber wir müssen auch den Hintergrund hier hinzufügen. Und wir sagten, dass wir es in CSS tun werden. Aber jetzt werde ich alle diese nochmals kopieren und sie und die Homepage oder die Kategorie einfügen. So wird es das gleiche sein, aber mit ein wenig Änderung der Kategorien anstelle von Marken. Also gehen wir zurück. Und im Haus. Ich werde sie wieder einfügen. Und hier anstelle von Marken, werde ich Kategorien schreiben und wählen Sie Ihr Produkt aus der Kategorie, die Sie mögen. Und dann haben wir Suche, Suche und Markennamen, Kategoriename. Und natürlich, lassen Sie uns alle diese zur gleichen Zeit ändern, eine Marke, Marke. Und wir haben auch hier. Ja, das ist es also. Gehen wir von hier. Wir haben auch Marke und Marke. Also lassen Sie uns alle diese löschen und geben Sie Kategorie, den Namen. Wenn Sie also zurückgehen und auf Aktualisieren drücken, haben wir den Kategorienamen, Kategorienamen, und wir haben einen hier verpasst. Also das ist es, dass der Bibliotheksname. Und jetzt sind wir gut. Wir haben unsere Kategorien. Wir haben die Kategorien Entsafter Produkt aus der Kategorie, wie wir die Suche haben. Und wir haben auch diese Führer für die. Und all diese werden geändert, sobald wir mit dem Back-End und den Datenbanken arbeiten. Also für jetzt werde ich sie so lassen, aber natürlich müssen wir sie auf den tatsächlichen Namen der Kategorie ändern. Und ich dachte, vielleicht füge hier etwas Polsterung hinzu. Gehen wir zurück zur Scheibe Division. Und in diesem haben wir die Form und vielleicht fügen wir vielleicht etwas Polsterung unten fünf hinzu. Gehen wir zurück und drücken „Aktualisieren“. Und wir haben jetzt unsere Polsterung von fünf Pixeln. Und jetzt vergessen, lassen Sie uns den eigentlichen Hintergrund hier hinzufügen. Wie Sie in diesem sehen können, haben wir hier einen Klassennamen hinzugefügt. Also haben wir die Hintergrundmarke und lassen sie als Marke für Kategorien und Marken, da es sich nicht ändern wird, werde ich den gleichen Hintergrund für beide wählen. Und natürlich, machen wir es zu ihrer Amtszeit, wenn Sie mit ihnen fertig sind. Und jetzt in der style.css können wir unser tatsächliches Hintergrundbild hinzufügen. Also werde ich Hintergrund eine Marke nennen und dann das Hintergrundbild als, es tut mir leid, Hintergrundbild-URL verwenden . Und natürlich, dass die Bilder, dann haben wir ein Hintergrundbild, Marke der GPG. Und jetzt sind wir gut. Wenn ich zurückgehe und auf Aktualisieren klicke, um diesen Hintergrund zu haben, können wir ihn ändern, wenn es uns nicht gefällt, aber vorerst lasse ich es so, wie es ist. Und natürlich, dieses Hallo von zu Hause ein b und unsere eigentliche Website. Also lassen Sie uns voran und löschen Sie es von hier. Und jetzt sind wir gut. Aktualisieren. Jetzt können Sie sehen, dass wir unsere Kategorien haben. Wählen Sie Ihr Produkt aus der Kategorie, die Sie mögen, und die Suche und auch die Kategorien, die wir in unserem Shop haben. Also das ist es im Grunde für die Kategorien und das ist das gleiche wie für die Marke auch. Gehen wir jetzt weiter und nehmen Sie alle diese und legen Sie sie in die Kategorien-Datei. Also werde ich eine neue Datei erstellen. Ich werde es Kategorie nennen. Die EJS. Gehen Sie dann zurück zu Startseite, kopieren Sie das alles und fügen Sie es in diese Kategorie ein. Und wie immer wollen wir die Fußzeile und die Kopfzeile von hier nicht vergessen. Also das ist, dass im Grunde haben wir unsere Kategorie, Marke und über und kontaktieren Sie uns. Alle diese sind jetzt bereit, wenn ich auf Refresh drücken, wir haben sie nicht auf der Homepage. Also das ist es im Grunde für die Kategorie und Marke. Alles, was wir tun müssen, ist eine neue Produktseite zu erstellen , auf der wir alle Produkte anbieten, die wir haben, entweder in der Marke oder in der Kategorie. Und das hängt vom Benutzer ab. Also, was wir tun werden, ist in der Rückseite und S2-Filter. Alle Artikel entsprechend der Marke oder der Kategorie. Und ob der Benutzer will. Vielleicht, wenn wir auf Marke klicken und es bringt ihn zur Marke, Marke Thrive. Und dann wählt er natürlich die Marke, die er will. Daher müssen wir alle Artikel, die wir haben, nach der Marke filtern , die der Benutzer wählt. Das ist also die Idee. Also lassen Sie uns voran und erstellen Sie die Produktseite. Erstellen Sie dann eine Produktseite für die tatsächlichen Produkte selbst. Und ich denke, es klingt ein bisschen kompliziert, aber glauben Sie mir, es ist nicht, es ist so, als eine Kategorie- oder Markendatei zu erstellen. Also lassen Sie uns jetzt voran und erstellen Sie einen neuen Ordner für die Produkte, die das JS und einen anderen Ordner für das eigentliche Produkt. Ich werde es Produkt nennen. So Produkte hier werden wir alle Produkte haben, die wir nach dem vielleicht, was der Benutzer wählt, entweder Markenkategorie und wann immer Sie wollen. Und dann, wenn wir auf der Produktseite sind und der Benutzer ein bestimmtes Produkt mag, dann wird es ihn auf die Produktseite weiterleiten , wo wir die erklärenden Details des Produkts haben. Also lassen Sie uns mit der Produktseite wie gewohnt auf unserer Homepage beginnen, und dann Tapetum in das Produkt. Also die js. So jetzt wie immer, wie wir in den Produkten, allen Kategorien und Marken haben , werden wir diese erste Division kopieren, weil ich denke, es sieht gut aus. Also lassen Sie es uns hier einfügen. Und jetzt haben wir nur diesen. Also lassen Sie uns wählen, vielleicht ändern Sie Kategorien zu Produkten und wählen Sie dann Ihre, ein Produkt aus vielleicht einer Kategorie, die Sie mögen. Ich denke, das sieht auch gut aus. Wenn Sie es erneut entfernen möchten, fahren Sie fort. Aber jetzt behalten wir es so, wie es ist. Aber hier haben wir die Produkte und dann haben wir auch die Suchleiste wie gewohnt. Und jetzt fangen wir mit dem tatsächlichen Produkt an. Also werde ich einen neuen Abschnitt mit dem Hintergrund erstellen, der leicht sein kann. Und dann beginnen wir mit der Reihe, dann haben wir Irland. Und in diesen werde ich unsere ungeordnete Liste erstellen. Und das wird Glasprodukte nehmen. Benutze es nicht. In der Tat, CSS-Datei. Und dann haben wir die eigentlichen Listenelemente. So wird der erste Listeneintrag die Produktabteilung haben. Und dann innerhalb dieser Produktabteilung gehen, um den Link zu haben. Und natürlich wird es in diesem Link vorerst auf nichts hinweisen. Dann haben wir den Stil. Ich werde die Textdekoration zu None machen. Und jetzt in diesem Link werden wir zwei Dinge platzieren. Der erste ist das Bild und dann haben wir. Der Titel, der Preis, die Marke und die Kategorie des Produkts. Also lassen Sie uns voran und erstellen Sie zuerst das Bild. Und in diesem Bild werden wir Bilder hinzufügen, vielleicht Bild ein Team. Und dann, nachdem wir dieses Bild hinzugefügt haben, können wir den Titel hinzufügen. Aber vorher lassen Sie uns eine Klasse von Produktbild erstellen, die wir später nicht verwenden. Und dann haben wir die neue Division, die Reihe sein wird, vielleicht Rand oben zwei. Und dann haben wir den Mittelblock und dann Spalte. Und jetzt sind wir gut. Wir können unsere Spannweite erstellen und nennen wir sie. Vielleicht für Eingabe und Tanz Stil wie gewohnt, Textdekoration zu keiner. Und danach können wir die Produktnamen-Klasse mit H6 als Überschrift erstellen. Und innerhalb der Spanne können wir das Element lebenswichtig haben, um jetzt zurück zu gehen und drücken Sie Refresh, gehen, um Artikel Titel mit einem Hintergrundlicht haben. Und natürlich haben wir diese ungeordnete Liste und wir werden sie in ein bisschen anpassen, NCSS. Also jetzt, wenn ich hier zurückgehe und einige Dinge hinzufüge, also wenn ich denke, ist es, die Bilder zu haben und dann haben wir den Titel. Und das sind das Einzige, was man hinzufügen kann. Oder vielleicht kann der Benutzer auf klicken, um zum speziellen Produkt weitergeleitet zu werden. Und wir haben auch den Markennamen, Kategorie, den Namen und die Größe. Ich werde sie nicht in den Link aufnehmen. Ich schreibe sie, ihnen einfach hinzu. Wenn ich nun zurückgehe und aktualisiere, haben wir unser Bild und dann haben wir auch den vielleicht Artikeltitel. Also jetzt müssen wir den Titel des Bildelements anpassen und einige Dinge hinzufügen. Lassen Sie uns zunächst eine neue Division erstellen, die von Klassenspaltentext sein wird. Und dann bin ich Acts fünf, H5 Center Block und Produktpreis für später. Und dabei werde ich den Produktpreis hinzufügen. Also Artikelpreis, vielleicht füge ich ein Beispiel wie $10 hinzu. Dies ist also für den Produktpreis, und ich werde das Produkt, die Marke und die Kategorie hinzufügen. So eine neue Division mit Produktmarke als Klassenname. Und in diesem werde ich Marke schreiben und dann von einer Spanne mit einigen Klassen gefolgt. Vielleicht machen Sie es einfach mutig. So Schriftgewicht, fett. Und dann kann die Marke sein. Versuchen wir Google vorerst. Und dann haben wir noch einen für die Kategorien. So Produktkategorie. Oder vielleicht können Sie mit Marken arbeiten, da es gleich ist. Also, und hier werden wir eine Bäckerei hinzufügen. Und dann gefolgt von der Spanne wäre auch Spaß Art und Weise beides. Dann haben wir die Kategorie. Ich füge einfach einen Abschluss hinzu, weil ich keinen Kopf in meinem Kopf habe. Und wir sind gut, jetzt haben wir die Marke und Kategorie. Wir haben immer noch eine Sache, die die Größe ist. Und ich denke, es in dieser Abteilung hinzuzufügen. So haben wir hier Produkt, Marke auch. Dann haben wir Größe gefolgt von einer Spanne mit der Klasse Schriftart, Gewicht, fett. Und wir haben auch die Größe, vielleicht zu einem 100 Milliliter, und hier vielleicht verändert die Pflanze und machen es Johnson. Also, jetzt sind wir gut, wenn ich Refresh anklicke. So werden wir scheinen Marke Google-Kategorie Johnson Größe zu einem 100 Milliliter. Und das ist es für dieses Video. Im nächsten Video werden wir es mit CSS anpassen. So sehen wir uns. 10. Produkt: In Ordnung, jetzt, da wir mit dem ersten Produkt fertig sind, gehen wir voran und passen mit CSS. Also in unserem CSS, style.css, werden wir hier ein neues, aber für die Produkte erstellen. Und natürlich fangen wir mit den Produkten an. Wie Sie sehen können, wenn ich zurück zu Home, wir haben hier die Produktklasse. Also werde ich in CSS kommentieren. Also werde ich Flags anzeigen und dann den Inhaltsstart rechtfertigen. Und natürlich, die ausrichten Elemente gehen, um es zu biegen, dass. Dann haben wir die Flex Wrap Wrap. Also jetzt, wenn wir zurückgehen und aktualisieren, können wir sehen, dass wir aus den Gegenständen auf der linken Seite gekommen sind. Sie waren schon auf der linken Seite. Aber jetzt für alle Änderungen, die auftreten können, werden sie immer noch auf der linken Seite des Bildes hier. Also lassen Sie uns jetzt die Elemente anpassen, die tatsächlichen Elemente. Also in den Produkten haben wir den Verbündeten Listeneintrag. Also alle Listenelemente innerhalb des Produkts, müssen wir List-Style-Typ zu keiner. Wir wollen nicht, dass der Stialtyp und die Polsterung 0 sein wird. Dann haben wir Float. Vielleicht mache ich 0, 1, 34, ja. Und dann haben wir die Höhe. Die maximale Höhe beträgt also 25. Und dann haben wir auch den Randknopf, unten. Und natürlich solide 0,1 REM. Die Farbe wird wie üblich sein, 31, acht, V5. Und schließlich werde ich einige Ränder auf allen Seiten hinzufügen. Also 15 Pixel, zehn Pixel als 15 Pixel und schließlich zehn Pixel. Also jetzt, wenn wir zurückgehen und auf „Aktualisieren“ drücken, werden Sie dies als unseren Hintergrund haben. Und natürlich müssen wir einige der Eigenschaften anpassen. Gehen wir zurück und lassen Sie uns in den Produkten sehen , die wir jetzt die Abteilung haben, die Produkt ist. Jetzt haben wir das Listenelement angepasst. Lassen Sie uns voran gehen und, und machen es ein wenig kleiner, aber eigentlich viel kleiner. Wir wollten wirklich so. Gehen wir zurück zu Stein und arbeiten mit der Produktklasse. So Produkt arpanet dann angezeigt fehlt. Dann haben wir Flex-Richtung, die in der Spalte sein soll. Und schließlich wird die Breite vielleicht 15 RAM sein. Und natürlich müssen wir den Produktnamen anpassen. So Schriftgewicht, fett. Dann haben wir die Farbe. Wie immer. 31, ATF mir 5. Also, jetzt gehen wir zurück und drücken Sie Refresh. Und wie wir sehen können, ist dies unser Bild und wir können zustimmen, dass es sehr groß aussieht, also müssen wir das Bild anpassen. Gehen wir also zurück und passen wir das Produktbild an, das wir früher erstellt haben, anstatt Arpanet. Und wir müssen es anpassen, indem wir das Max verwenden würde, na ja, beeilen Sie maximale Höhe, um auch gut zu sein, bin ich. Nun, wenn Sie zurück und drücken Sie aktualisieren, werden Sie sehen, dass wir unser erstes Bild gefolgt von dem Artikel mit dem Titel Marke, Kategorie Größe und auch den Preis hier. Nun lassen Sie uns einige davon auch anpassen. Wenn wir auf unsere Homepage zurückkehren, haben wir hier den Produktnamen, Produktpreis und die Produktmarke für all diese. Und natürlich das Produktbild für das Bild, das wir gerade geändert haben. Und lassen Sie uns sie anpassen, indem Sie die Produktmarke anrufen. Vielleicht machen Sie die Farbe ein wenig. Wie 880, 880. Denke, es wird schön aussehen. 88 atm Sache entdeckt ist gut für die Marke und Größe und natürlich den Produktpreis. Nun, lassen Sie uns damit arbeiten. Vielleicht machen Sie es einfach mutig. Mal sehen. Und dann haben wir vielleicht auch die Produktkategorie. Und wir sagten, dass es das gleiche wie die Marke ist, also sind wir jetzt gut. Gehen wir zurück und drücken Sie „Aktualisieren“. Und wie wir sehen können, haben wir jetzt unser Boot. Das ist mutig und diese sind ein bisschen wie, großartig. Und wir haben auch den Artikeltitel und die gleiche Farbe wie der Mauszeiger über diese Artikel. Das ist also der erste Gegenstand, den wir haben. Wir haben das Bild, wir haben die Qualität Info für jetzt. Und natürlich, was wir jetzt tun müssen, ist eine andere Produktseite zu erstellen, wo der Benutzer, wenn er zusätzliche Details über dieses Produkt wissen will oder es tatsächlich kaufen, Er kann entweder auf das Bild oder den Titel klicken. Und es wird Sie automatisch auf die Produktseite bringen , wo er es auf den Ablagestapel hinzufügen kann, sehen Sie einige Details zu diesem Produkt. Und vielleicht können Sie am Ende eine Bewertung hinzufügen. Sehen Sie, was wir später machen werden. Aber für jetzt ist dies die allgemeine Idee über das Produkt, ihre Produktseite. Lassen Sie uns hier ein paar Produkte hinzufügen. Also geh zurück nach Hause. Wir haben in dieser Reihe, wir haben diese Spalte. Also lasst uns weitermachen und es ein paar Mal kopieren. Und mal sehen, was passieren wird. Ja. Also hier, 12345. Wenn ich zurückgehe und auf „Aktualisieren“ klicke, bekommen wir diese Produkte. Wir haben sechs Produkte vorerst. Und natürlich können wir diese Erkenntnisse später entfernen. Aber jetzt ist es gut. Und selbst wenn wir die Größe ändern. Bei mittlerer Größe müssen wir das tun, und bei Sponsoren werden wir einen haben. Und natürlich können Sie dies anpassen, um in der Mitte zu sein, wenn wir einen kleinen Bildschirm wie diesen haben, vielleicht ist es eine gute Idee, die Bilder und die folgenden Informationen in der Mitte des Bildschirms zu platzieren . Und natürlich, wenn wir Medium von etwas Größerem haben, werden wir sie auf der linken Seite haben. Also die zusätzliche Brunnenkonstruktion oder Modifikationen, die Sie tun können , ist es tatsächlich in der Mitte des Bildschirms zu machen. Und natürlich, wenn wir großen Bildschirm haben, machen Sie sie vielleicht vier auf der gleichen statt drei. Ja, es sieht besser aus. Zum Beispiel ist dies das erste 1, zweites, drittes, viertes Jahr. Vielleicht wird es besser aussehen, aber im Moment bleiben wir dabei. Dies ist die Produktseite. Lassen Sie uns voran und kopieren Sie all dies und fügen Sie es und die Produkte, die EJS Klasse oder Datei. Das ist es also. Ja, lassen Sie uns diesen ganzen Abschnitt in Produkte kopieren, damit die JS, und natürlich vergessen Sie nicht, Ihre Fußzeile hier hinzuzufügen. Und dann der Header am Anfang der Datei. Also das ist die Produkte sind die Stühle. Und jetzt, wenn wir unsere Homepage aktualisieren, gehen, um diese Zeilen Fußzeile und Header zu bekommen, wie wir wollen. Nun ist der nächste Schritt, um tatsächlich die eigentliche Produktseite zu drucken. Also haben wir gesagt, dass wir mehrere Uploader-Produkte haben. Und wann immer der Benutzer ein 11 Produkt oder einen bestimmten Artikel überprüfen möchte, den er mag. Er will zum Beispiel mehr Details sehen. So klickt er auf das Elektron, das Produktbild oder einen Titel, und dann sollte es ihn automatisch auf die Produktseite mit zusätzlicher Erklärung leiten . Und vielleicht können Sie etwas am Ende der Seite hinzufügen, das besagt, vielleicht mögen Sie auch und dann einige zusätzliche Produkte aus der gleichen Kategorie oder der gleichen Marke, die er überprüft. Das ist also die allgemeine Idee. Lassen Sie uns fortfahren und wie gewohnt mit ihm auf unserer Homepage beginnen und kopieren Sie es dann in das Produkt. Um dies zu tun, beginnen wir mit der Erstellung der. Das ist also der Abschnitt. Und in diesem Abschnitt werden wir unseren Container erstellen. Flüssigkeit sollte sein und das Ende des Behälters abgesenkt werden. Und dann innerhalb dieser gehen, um die erste Zeile zu erstellen. Vielleicht fügen Sie eine Zeile von 0 für einen kleinen Bildschirm oder irgendetwas anderes als den großen Bildschirm und einen hinzu. Und das werden wir in einem Moment sehen. Und das wird leer sein. Dann werden wir einen Kolumnensex haben. Und für große Bildschirme von vier. Und richten Sie Elemente aus, zentrieren Sie sich. Und hier werden wir das Bild hinzufügen. Also lassen Sie uns Bild hinzufügen. Die Quelle wird wie üblich Musterbilder sein, image1, aber GBG. Und natürlich müssen wir keinen Stil hinzufügen, der die maximale Breite dieses Bildes auf 300 Pixel beträgt. Und ich denke, wir sind gut für das Bild. Jetzt. Wir werden eine weitere Spalte für große Bildschirme erstellen. Und das wird auch leer sein. Und dann gefolgt von einer weiteren Spalte 6, wo wir die Informationen hinzufügen werden, Ich bin Sex und für große Bildschirme, wie es vier sein wird. Und natürlich innerhalb dieses Panels, nach unten, um das Formular zu erstellen, um zu senden oder in den Warenkorb zu legen. Und darin werde ich den Titel haben. Dies wird also von Klassentext sein, um es blau zu machen. Und dann haben wir den Artikeltitel, und dann gefolgt von einem Absatz mit der Klasse H5 als Überschrift 5. Dann in dieser Rubrik werden wir den Preis hinzufügen. So Preis. Und dann innerhalb der Spanne, gehen, um den Preis mit Text sekundäre Daten zu haben. Sie können sehen, ob ich Preis hinzufügen, zum Beispiel, $34, Lassen Sie uns zurück und drücken Sie aktualisieren. Und wie wir sehen können, haben wir das Bild gefolgt von Artikeltitel und dann den Preis, der 34 ist. Das ist also eine allgemeine Idee. Dies ist das eigentliche Bild. Jetzt können wir hier zusätzliche Informationen hinzufügen. Gehen wir weiter und machen es genau hier. Wir haben den Preis, den wir vorher haben, und dann müssen wir Marke hinzufügen. Also lassen Sie uns hier zurück und fügen Sie eine neue Klasse hinzu oder ein neuer Absatz sein. Und dann haben wir die Spanne, die die Klasse Schriftart, Gewicht, fett haben wird. Dann haben wir die Marke. Und natürlich werden wir die eigentliche Marke wie Johnson in diesem Fall hinzufügen. Und diese Marke, tut mir leid, Johnson sollte zwischen diesem übergeordneten Absatz stehen. Jetzt sind wir fertig mit der Marke. Lassen Sie uns Linie springen und dann eine neue Zeile für die Größen erstellen. Also, was ich dachte, ist, eine neue Zeile in dieser Zeile zu bekommen, die die Spalte von zwei und der Rand von oben zwei auch innerhalb der SRO wird diese Größe zu schaffen. Und natürlich sollte die Klasse sekundär besteuert werden. Und natürlich, vielleicht schaffe ich es, Sex zu haben. Und dann gefolgt von einer anderen Spalte. Und diese Spalte wäre die gleiche wie zuvor, also Spalte 2. Und hier werden wir die tatsächliche Größe innerhalb eines Absatzes der Klassenliga haben. Vielleicht ist die Größe 200 Milliliter. Und natürlich, wenn ich zurückgehe und auf Refresh klicke, wirst du Artikeltitel Preis bekommen, Marke Johnson Größe auf 100 Milliliter. Und jetzt lassen Sie uns mit wie vielen Teilen der Benutzer einmal fortfahren. Oder lassen Sie uns das noch einmal für die Kategorie kopieren. Heute werden wir Kategorie haben. Und dann gefolgt von vielleicht, sagen wir Shampoo. Und jetzt als Abschluss aus dieser Reihe ist eine andere mit Spalte des Geschlechts erstellen. Und in dieser Spalte werde ich die Eingabegruppe erstellen. Und hier wird der Benutzer die tatsächliche Menge hinzufügen, wie viele Stücke er will. So MP3. Und darin werde ich die tatsächliche Eingabe des Typs Textname erstellen. Ich werde es Box für eine spätere Klasse nennen. Ich zeichne. Und dann wird der Platzhalter Menge sein. Und dann haben wir die Teilung der Stücke, um Klasseneingabegruppe zu überspannen. Also jetzt, wenn wir Refresh drücken, werden wir diese Größe auf eine 100 Milliliter Menge und Stücke zu bekommen. Das ist es also für dieses Video. Und der nächste wird, um den in den Warenkorb und vielleicht die Beschreibung dieses Artikels hinzuzufügen. So sehen wir uns dann. 11. Zuhause 1: Hallo und willkommen zurück. In diesem Video werden wir unsere Produktseite fortsetzen. So haben wir immer noch die Schaltfläche In den Warenkorb. Gehen wir weiter und bearbeiten Sie hier. Das ist unsere Reihe zu einer anderen Reihe hier. Und ich dachte, ihm eine Klasse des Moire drei nur für je nach Y-Achse zu geben. Dann werde ich unsere Karte hinzufügen, die der Button ist. Und der Typ wäre, wie üblich, einreichen. Und ich denke an Daten, den Umschalter für später. Ich baue es für jetzt, so. Und der Stil wird Inline-Block angezeigt. Schließlich haben wir die tatsächlichen Klassen und wir werden Bootstrap-Klassen und btn und btn dark verwenden , dann in den Warenkorb. Also das ist es im Grunde für unsere Schaltfläche, indem Sie voran gehen und es aktualisieren. Wir werden diesen Knopf bekommen und es ist dunkel. Und es wird angenommen, uns auf die vielleicht auf die Produktseite weiterzuleiten , wo wir alle Produkte haben, die der Benutzer für jetzt gewählt hat. Und natürlich, wenn der Benutzer noch nicht signiert und angemeldet ist, sollte er ihn tatsächlich zum Anmeldemodell bringen, wo er seine E-Mail-Adresse und sein Passwort eingeben sollte. Und natürlich, wenn er noch kein Konto hat, kann er sich auch registrieren, um sich mit einem neuen Konto anzumelden. Dann gehen Sie zurück hierher und fügen Sie diesen Artikel als Schnitt hinzu. Wie gesagt, das ist unser Garten. Gehen wir zurück. Und ich dachte darüber nach, hier hinter dem Artikel Titan eine Beschreibung hinzuzufügen. Vielleicht machen wir es in. Wir haben einen Titel. Lassen Sie uns einen Balkendiagramm hinzufügen, wo wir Lauren haben. Und natürlich können wir immer einige Klassen für unseren Biografen wählen. Wählen Sie nicht den Klassenmodus, um den Absatz klein zu machen. Und wie wir sehen können, ist dies unser Absatz. Und dann haben wir den Preis, Marke, Kategorie, Größe, Menge, und dann Gott hinzufügen, und natürlich unser Image. Also, wenn ich nur die Größe davon verkleinere, mal sehen, was passiert. Lasst uns es von beiden Seiten vergrößern. So wie wir sehen können, haben wir unser Bild und die Informationen in der gleichen Zeile. Also das ist es für die Produkte, die Produktseite. Lassen Sie uns voran und verschieben Sie alle diese auf das Produkt, das EJS-Datei. Also hier, mal sehen. Dies ist der Anfang dieses Abschnitts des Weges bis zum Ende hier. Bringen wir sie hier an. Gehen Sie dann zurück und nehmen Sie diese Kopf- und Fußzeile. Das ist also der Header. Lasst uns nehmen. Und legen Sie es auf die Produktseite. Und dann lassen Sie uns den ganzen Weg nach unten gehen und unsere Fußzeile hinzufügen. Es ist schon da gewesen. Ich denke, jetzt sind wir gut für die Produkt- und Produktseite. Also bis jetzt, wenn wir nachsehen, was haben wir getan? Wir haben die Homepage gemacht. Es tut mir leid. Wir haben die Markenkategorie über Kontakt mit uns gemacht. Und wir haben zwei Seiten gemacht, die für den Betrachter in der Navigationsleiste nicht sichtbar sind. Und sie sind die Produkte und die Produktseite. Also für jetzt sind wir gut. Lass uns hier voran gehen und sparen. Und geh zurück. Wenn wir uns erfrischen, ist das unser Zuhause. So beginnen wir jetzt mit dem Aufbau unserer Homepage. Dann werden wir natürlich die Seite Bestellungen erstellen, auf der der Benutzer alle diese Bestellungen, frühere Bestellungen und aktuelle Artikel auf seiner Karte sehen kann . Und wir müssen auch die Admin-Seiten erstellen. Fangen wir mit der Homepage an. Und ich dachte, hier ein Karussell hinzuzufügen um vielleicht verschiedene Marken zu visualisieren und dann einen Bestseller hinzuzufügen. Wir haben die Bestsellerprodukte. Dann fügen Sie auch ein weiteres Kerosin hinzu, wo wir die verschiedenen Kategorien visualisieren können. Und natürlich könnten wir am Ende ein paar Produkte hinzufügen. Also mal sehen. Gehen wir zurück und hören Danke zu beginnen. Richtig. Also hier obwohl, um erste Abteilung zu schaffen. Und ich werde eine Hintergrundbildstrategie in irgendeinem schlechten Stil haben. Hintergrundbild wird gleich der URL unseres Bildes sein. Überprüfen Sie es später. Aber für jetzt, die Hintergrundgröße, die ich denke, um es zu decken. Und natürlich wäre die Hintergrundposition zentriert. Und dann endlich haben wir auch die Höhe. Ich denke, 35, vielleicht 38 H. Und dann haben wir Hintergründe, wiederhole, keine Wiederholung. Und schließlich wird die Marge 0 sein. Das ist also für das Bild und wir werden es später überprüfen. Aber lassen Sie es uns schaffen. Und wenn ich hier baue, ist eigentlich ein Bild, ein Hintergrundbild. Und dann haben wir so etwas wie willkommen auf der E-Commerce-Website und einen Absatz an der Unterseite für, so zum Beispiel, lassen Sie uns Glas mit p oder oberen Seiten und vielleicht Willkommen auf der E-Commerce-Website. Und dann endlich, lass uns vielleicht Sex und Kasse haben. Alte, vielleicht hochwertige Artikel und exklusive Angebote. Ja, ich denke, das wird es sein. Und natürlich wissen wir, dass wir jetzt das eigentliche Bild hinzufügen müssen. Also lasst uns zu Pixeln gehen. Und mal sehen, was haben wir ein paar Hintergründe. Das ist eine einfache, vielleicht fügen Sie ein Bodensymbol und diese Suche. Und wie wir sehen können, haben wir so viele Möglichkeiten, aber jetzt werde ich die einfachste wählen. Also vielleicht kann ich mit diesem heruntergeladenen gehen. Und jetzt haben wir es hier als Hintergrundhaus. Und ich habe es hier beendet. Also, wenn wir zurückgehen, haben wir das Bild und vielleicht müssen wir diese Information zentrieren. Also werde ich eine Spalte hinzufügen. Und ich dachte an Spalte für Medium und darüber, um sechs zu sein. Und dann müssen Sie Text zentrieren. Also Textmitte. Und natürlich gehen, um das max Foto zu haben. Also das ist es, der diese Überschriften hier platziert hat und zurück gehen und aktualisieren. Und wie wir sehen können, erhielten wir eine Website willkommen auf der E-Commerce-Website, Kasse, Top-Qualität Artikel und exklusive Puffer. Vielleicht können wir jetzt etwas hier als Hintergrund von, lasst uns sehen. Das ist also unsere erste Abteilung. Lassen Sie uns eine weitere mit Zeilenmitte erstellen. Dann haben wir etwas Marge, wissen vielleicht 0 und einige Polsterungen und auch Hintergrundlicht. Und dann lassen Sie uns die Spalte mit vier erstellen. In dieser Spalte werden wir einen Absatz Glas haben, Blei, vielleicht Top-Qualität. Und dann kopieren Sie das noch zwei Mal. So Top-Qualität, schnelle Lieferung und beste Preise. Also jetzt, wenn wir zurückgehen und Refresh drücken, gehen, um so etwas zu bekommen. So haben wir die Willkommensseite, Kasse, hochwertige Artikel und exklusive Angebote. Dann haben wir einige unserer Eigenschaften. Zum Beispiel Top-Qualität, schnelle Lieferung und beste Preise. Dies ist also im Grunde für die Willkommensseite, und fangen wir mit den Bestsellern an. Also, wenn wir zurück gehen und lassen Sie uns unseren Abschnitt hier erstellen. Dieser Abschnitt wird also mehrere Klassen haben, vielleicht leicht als Text. Und etwas Polsterung. Öffnen wir es und schaffen dann unsere Behälterflüssigkeit. Und natürlich müssen wir den Titel erstellen, wo wir die Bestseller haben. Und dann der Absatz, der besagt, schauen Sie sich einige unserer Bestseller an. Also gehen, um die erste Zeile und einige Klassen wie Text zu haben. Dann haben wir das Textcenter. Und das ist es für das Wachstum und Phantom mit einer Marge von vier. Und in dieser Spalte, denken, hier Bestseller hinzuzufügen. Und natürlich fügen Sie einige Klassen wie Anzeige für und dann MB oder. So. Wenn wir jetzt zurückgehen und auf „Aktualisieren“ klicken, bekommen wir so etwas. Wir haben unsere Bestseller. Lasst uns hier absetzen. Nach unserer Überschrift können Sie vielleicht den eigentlichen Absatz hier hinzufügen. Also Klasse wird geführt werden. Und dann haben wir zum Beispiel einige der Bestseller-Artikel für 2020 überprüft . Gehen wir zurück und erfrischen wir uns. Und das ist es im Grunde. Und jetzt können wir drei der Bestseller-Artikel hinzufügen. Und wir können sie mit vielleicht Karten hinzufügen. Also gehen wir zurück zu unserem Code. Und das ist das Ende der Schriftrolle war der Behälterflüssigkeit. Und jetzt lassen Sie uns eine weitere Zeile erstellen. Natürlich müssen wir ausrichten Elemente hinzufügen, zentrieren, text, center, und dann haben wir eine max oder zwei. Und dann öffnen wir es. Lassen Sie uns nun die Spalte erstellen. So Spalte für große Bildschirme ist vier, und für kleine Bildschirme ist 10. Dann haben wir ein Max Auto. Und das ist im Grunde für die Kolumne. Und jetzt können wir unsere eigentliche Karte erstellen. Also werde ich die Karte mit Karte eins für CSS erstellen. Verwenden Sie diese Klasse für CSS. Und dann haben wir Text dunkel MY für endemics Foto. Öffnen wir es und beginnen mit der Erstellung des Bildes. Die Bildquelle wird also Punktbilder sein. Dann haben wir das eigentliche Bild. Nehmen wir an, wir werden ein Vieles benutzen. Und lassen Sie uns hier einige Klassen hinzufügen. Die erste Klasse wird also ein max Herbst sein. Und natürlich vergessen wir das Modul auf der Y-Achse nicht. Was den Stil betrifft, werde ich die maximale Höhe mit 100 Pixeln haben. Und das gleiche für maximale Breite von 100 Pixel. Nun, wenn Sie zurückgehen und aktualisieren, wie wir sehen können, haben wir unser Bild mit nichts bis jetzt können wir einige Informationen am Ende hinzufügen. Mal sehen. Gehen wir zurück. Und natürlich können wir den Namen hinzufügen und dann vielleicht eine Schaltfläche hinzufügen, auf der Details sehen steht. Und wenn der Benutzer auf diese Schaltfläche klickt, leitet er ihn automatisch auf die Produktseite dieses bestimmten Artikels um. Das ist es also. Gehen wir zurück. Das ist das Ende des Gottes. Wir haben das Bild. Und natürlich, in der Karte können wir den Wächter Buddy erschaffen, Buddy. Und dann haben wir die erste Überschrift, die der Titel ist. Und wir haben immer noch den Titel und den Knopf. Und lassen Sie uns zwei andere hinzufügen. Natürlich werden wir sie im nächsten Video machen. So sehen wir uns dann. 12. Zuhause 2: Hallo und willkommen zurück. Wir haben immer noch den Titel und natürlich den Button, um Details zu diesem Bestsellerprodukt zu sehen. Also gehen wir voran und beginnen mit der Überschrift, die vielleicht den Titel sagt. Also füge ich eine Rubrik fünf hinzu. Und dann Unterklassen wie Text, Großbuchstaben. Dann haben wir auch Spaß, Gewicht, fett, und natürlich MB, drei. Listenelement. Dies ist für das CSS und ich werde den tatsächlichen Titel hinzufügen, Nehmen wir an, Johnson. Und danach werde ich ein Formular hinzufügen, das ich einreichen möchte. So wird die Kanzlei vorerst keine Aktion haben. Und natürlich, die Schaltfläche, die eigentliche Schaltfläche mit Typ senden. Und dann einige Klassen wie PTEN, einige Polsterungen und alle Seiten. Vielleicht Text, Großbuchstaben oder vielleicht nicht. Lassen Sie uns die Preisschaltfläche und die CS4 oder höher hinzufügen. Und ich mache es gelb. Also füge ich den BDI hinzu und will Klassen- und Steuerflug. Also lasst uns die Details sehen. Und natürlich, wenn wir zurückgehen und Refresh drücken, dann holen wir Johnson und sehen Details. Und das ist im Grunde für diese Karte, können wir vielleicht auch die Breite auf Standard-Karte haben. Also gehen wir zurück. Mal sehen. Anstatt also die maximale Breite auf 100 Pixel anzugeben, werde ich sagen, Breite gleich 100 Prozent der Karte zu sein. Und anstatt etwas Marge zu haben, mal sehen, anstatt einen Rand oben wie diesen und Knopf zu haben, werde ich angeben, dass der Rand nur auf der Schaltfläche sein sollte. Also anstelle von MY app.use MB. So können wir sehen, dass wir unser Bild bekommen. Und natürlich ist dieser Titel nicht nur ein Wort. Es ist im Grunde zum Beispiel Johnson Shampoo, 400 Milliliter. Und ich denke, es sieht vorerst gut aus. Und natürlich sollten alle Details innerhalb der Produktseite liegen, die wir zuvor erstellt haben. Dies ist also nur die Definition des Produkts und ein Bild, der Titel. Und wenn der Benutzer an diesem bestimmten Artikel interessiert ist, kann er immer auf die Produktseite gehen, indem er auf Details sehen klickt. Das ist es also für das erste Produkt. Lassen Sie uns noch zwei hinzufügen. Gehen wir zurück, kopieren Sie das alles und fügen Sie es noch zwei Mal ein. Vielleicht ändern Sie das Bild. Vielleicht ist das Bild zwei und das letzte, und es als Bild eins behalten. Und mal sehen. Und wie Sie sehen können, haben wir unser Bestseller-Produkt. Wir haben drei Produkte und wir können sie jederzeit ändern, wann immer wir wollen. Am Ende unseres Projektswerden wir vielleicht einen bestimmten Teil bauen, werden wir vielleicht einen bestimmten Teil bauen in dem wir diese Produkte direkt hier ändern können. Das ist also im Grunde für die Bestseller. Mal sehen, was wir mit der tun werden, vielleicht die Marken und Kategorien. Also, was ich denke, denken ist, die Marken hier zuerst zu haben, bevor es, die Bestseller, dann fügen Sie die Kategorien hier. Und natürlich machen wir es mit Karussell. Also, wenn wir zurück zu Bootstrap gehen Ihre beiden Komponenten und dann Karussell, gehen, um mehrere Karussell-Typen zu sehen. Und wir werden das hier benutzen. Also dieser mit Indikatoren, wir haben sowohl die Agenten als auch diese können zwischen ihnen wählen. Und das ist der Code dafür. Und natürlich möchten Sie vielleicht den Titel und einige definitive Informationen über dieses Produkt oder diese Marke hinzufügen . Wir können das leicht tun, indem wir hier die Breite Beschriftung hinzufügen. Also lasst uns fortfahren und alles kopieren und zu unserem Code zurückkehren. Gehen Sie zu Top-Qualität vor dem Bestseller Abschnitt, ich werde es einfügen. Sehen wir uns jetzt unsere Website an. Und wie wir sehen können, haben Sie die erste Folie. Und wenn wir zurück gehen, so habe ich hier einige Überschriften für die erste hinzugefügt. Und natürlich habe ich die Bilder hinzugefügt, wie wir hier sehen können. Und jetzt, wenn wir nach Frankreich zurückkehren, bekommst du das. Und ich weiß, es ist eine sehr große für den Bildschirm und Sie können es reparieren. Aber das ist die Idee. Wenn wir auf die Indikatoren drücken, sollten sie uns automatisch zu bringen. Diese dritte ist nicht verfügbar, und dies ist die erste. Also gehen wir zurück und passen das an. Wir haben Bilder. Ich habe vergessen, den Schrägstrich hinzuzufügen. Und das ist es im Grunde, wir können es immer kleiner machen. Also, wenn ich es zum Beispiel in der Mitte des Bildschirms machen möchte, kann ich eine neue Zeile hinzufügen, dann Spalte 3, 4 hinzufügen, richtig? Kolumne Sex, um unser Karussell hinzuzufügen. Und Spalte 3 für die linke. Und jetzt öffnen Sie das hier, und kopieren Sie dann all das von hier bis zum Abschnitt, und fügen Sie es dann direkt hier ein. Und dann können wir vielleicht sehen, dass wir unsere Markenrate hier bekommen haben. Und wie Sie sehen können, ändert es sich. Die vielleicht die Höhe des Bildes ändert sich je nach Bild selbst. Also dachte ich, den Bildern eine maximale Höhe hinzuzufügen. Also hier. Einstein max. Höhe Und ich dachte, vielleicht 400 Pixel. Und jetzt werde ich das noch zwei Mal hier und dann hier kopieren. Und wenn wir wieder frisch gehen, gehen, um das zu bekommen. Wie wir sehen können, sieht es jetzt besser aus. Und wir haben auch hier den Titel und einige Untertitel. Ja, wegen dem Produkt. Der Benutzer kann alle Produkte von hier aus überprüfen. Und natürlich müssen wir vielleicht den ersten vielleicht den Titel der Marken hinzufügen. Also dachte ich, Containerflüssigkeit hinzuzufügen und dann hier die erste Zeile und dann die Überschrift zu Marken hinzuzufügen. Und dann werde ich auch Text zentriert hinzufügen. Und natürlich werde ich den Absatz mit dem Klassenleiter hinzufügen, der besagt: „ Verschließen, vielleicht unsere Kasse, unsere Marken. Jetzt, wenn Sie zurückgehen, um zu aktualisieren, gehen, um Marken zu bekommen, überprüfen Sie unsere Marken. Und natürlich können wir dies vielleicht in einer anderen Farbe machen wie ein Gewicht oder vielleicht Texte sekundär. Also lasst uns hier zurück gehen und zu dieser Klassensteuer sekundär hinzufügen. Nun, wenn Sie zurückgehen und Aktualisieren drücken, gehen Sie zu diesem zu bekommen. Also haben wir Marken, kasse unsere Marken. Und hier haben wir alle Marken. Und natürlich, wenn es uns so nicht gefällt, können wir uns jederzeit anpassen. Zum Beispiel kann ich das hierher bringen, es wird ein Helfer sein. Und endlich hier werde ich auch tune setzen. Wenn wir jetzt zurückgehen, wird es ein bisschen schöner aussehen. Ja. Das ist es also für die Marken. Wird dasselbe für das Produkt tun. Also werde ich das alles kopieren und direkt nach den Bestsellern einfügen. Und natürlich können wir hier etwas Marge hinzufügen. Und ich habe vergessen, vielleicht all das, all diese Reihe der eigentlichen Behälterflüssigkeit hinzuzufügen . Also diese Reihe ließ mich es einfach schließen. Nimm alles. Mal sehen. Ja. Also das wird es dauern, dass sie hier sitzen. Und wenn ich zurückgehe und mich erfrischen, werde ich dasselbe bekommen. Also sind wir gut und vielleicht etwas Marge auf beiden Seiten hinzufügen. Also meine fünf, und ich denke, jetzt sind wir gut. Ich erfrischen mich. Dies ist die Kasse der Marke, unsere Marken und einige Marge auf der Unterseite, und natürlich auf der ersten hier. Das ist also für die Marken. Lass uns weitermachen und es kopieren. Also werde ich diese Behälterflüssigkeit schließen. Sei nicht alles davon. Dann öffne es dann nach diesem. Das sind also die besten Zentren, die so nah wie ich hier erschaffen kann. Öffnen wir es noch einmal und schauen Sie sich unsere Kategorien an. Und dann innerhalb dieser Kategorien können wir auch hier anstelle von Marken Kategorien hinzufügen, so dass die zustimmt. Und ich denke, nein, wir sind gut. Dies ist unsere Homepage. Wenn wir den ganzen Weg nach unten scrollen, können wir die Kategorien sehen. haben wir. Die Fußzeile, wir haben unsere Kopfzeile. Wir haben einige, vielleicht einige Infos über unsere scharfen und natürlich die Bestseller hier. Und das hintere Ende. Natürlich werden wir hier das Richtige hinzufügen. Wir werden ein hinzufügen, zum Beispiel, wenn der Benutzer auf diese bestimmte Marke klicken möchte, können Sie immer darauf klicken und es wird ihn zu den Marken hier, und natürlich zu den spezifischen Marken, die Sie auch wollen. Das ist es also. Und ab diesem Bestseller, wenn der Benutzer dieses Produkt wählt, wird es ihn direkt zum Produkt selbst bringen. Und das ist die Idee der Homepage. Lassen Sie uns diese einfach hier löschen. Und ich glaube, wir sind dafür fertig. Lassen Sie uns auffrischen. Und das ist es. Dies ist unsere Homepage. Im nächsten Video werden wir die Platzbestellungen und den Standort erstellen , vielleicht die Zahlung. Und natürlich werden wir danach unsere Front und ein Design mit der Admin-Seite enden , wo wir den Admin alles ändern lassen, von dem er will. Vielleicht Marken, Kategorien, fügen Sie neue Artikel, neues Produkt, und modifizierte sie. Die Preise, die Beschreibung, wie er will. Aber das ist es für dieses Video. Wir sehen uns im nächsten. 13. Platzierung: Hallo und willkommen zurück. In diesem Video werden wir die Seite „Bestellung platzieren“ erstellen. Und ich dachte, wir gehen zuerst zurück. Also, wann immer wir hier sind und dies und nehmen wir an, ich schaue auf einen bestimmten Punkt. Also bin ich auf der Produktseite, wo ich auch den in den Warenkorb direkt hier. So wie wir sehen können, wenn der Benutzer auf diesen In den Warenkorb klickt, sollte er ihn direkt auf die Seite „Bestellung aufgeben“ bringen , wo er alle vorherigen Bestellungen sehen kann. Und Sie können auch die Karte selbst sehen. Und es kann Elemente entfernen, Elemente hinzufügen, und überprüfen Sie die Summe, dann platzieren Sie die tatsächliche Bestellung. Und ich dachte, dass vorher, wenn der Benutzer seine Lieferadresse oder Anti-Zahlungsmethode nicht eingegeben hat, sollte er sie tatsächlich hinzufügen und sie werden auch auf der Bestellseite erscheinen. Also gehen wir zurück. Und lassen Sie uns hier ein neues erstellen. So neue Akte. Und ich werde es die Schifffahrt nennen, Gott. Aber EJS. Das ist also die erste. Und in dieser Datei müssen wir wie immer die Kopf- und Fußzeile einfügen. Also gehen wir zurück, holen Sie das grundlegende hier, und ändern Sie es dann vielleicht in Fußzeile. Und jetzt können wir anfangen. Also das erste, was ich zu tun dachte, ist vielleicht die Containerflüssigkeit zu schaffen. Und lasst es uns jetzt machen. So Containerflüssigkeit, und dann auch die Reihe. Und natürlich werden wir ein paar P13 erstellen. Und ich dachte, dass die erste auf großen Bildschirmen, die erste Division mit vier, es leer sein wird. Dann werde ich eine weitere Division mit großen vorwärts auch innerhalb dieser Division hinzufügen. Lassen Sie uns eine andere direkt dort erstellen, und dann etwas Polsterung auf der Y-Achse. Und natürlich müssen wir hier die Fortschrittsbalken hinzufügen, die wir verwenden werden. Also, was ich dachte, ist, hier einen Fortschrittsbalken hinzuzufügen , der jedes Mal aktualisiert wird, wenn wir eine Aufgabe beenden. Es besteht also aus zwei oder drei Aufgaben. Die erste wird sein, die Lieferadresse hinzuzufügen und dann auf abgeschlossen. Und nach Abschluss dieser Aufgabe haben wir die Zahlungsmethode. So wird dieser Fortschrittsbalken jedes Mal aktualisiert, wenn wir mit einer Aufgabe fertig waren. Also lassen Sie es uns jetzt erstellen. Und um einen Profi zu beschaffen, erstellen Sie einen Fortschrittsbalken, können Sie ihn entweder aus Bootstrap nehmen oder selbst erstellen. So wird es von Klassenfortschritt und vielleicht bg sekundär sein. Und was ich dachte, um eine Marge hinzuzufügen, unten drei. Und natürlich muss ich den Fortschritt schaffen. Hintern. Und dann lassen Sie mich einfach nach rechts verschieben. Dies ist also der Fortschrittsbalken, vielleicht Hintergrundwarnung. Und dann der Stil. Wir werden die Breite gleich 25 Prozent haben. Also, wenn wir zurück gehen oh, tut mir leid, wir haben es in der Schifffahrt gebaut. Gott. Und es ist ein Fall. Lassen Sie mich es einfach entfernen und es nach einigen Zeilen der Erde mal 20 ins Haus legen. Und lasst es uns hier versuchen, aktualisieren. Und wie wir sehen können, haben wir unseren Fortschrittsbalken hier. Das ist also der erste. Und wenn wir jetzt zurückgehen und das auf 50 Prozent ändern, können wir gehen und bemerken, dass es jetzt 50% statt 25. Also diese Breite, um den Fortschrittsbalken von sekundär zu Warnung zu ändern. Und es sieht so aus, als würdest du etwas erreichen. Also das ist es für den Fortschrittsbalken. Lasst uns weitermachen. Das ist also die Spaltung und das ist Wirtschaft. Und natürlich werde ich das nehmen und von hier anfangen. So wird die zweite Division der Sinus n ist Versand der Zahlung und diese Bestellung. Und diese werden genau hier nach dem Fortschrittsbalken sein. Lassen Sie uns also eine zweite Zeile mit PDE5 erstellen und dann auch einige Spalten erstellen. Also der erste wäre Sinus n und die Division ist zweiter Mangel wäre der Klasse vielleicht Spalte 3. Auch. Wir haben gesehen und in diesem Fall werden wir Versand haben. Dann Spalte drei ihn mit Zahlung. Und natürlich endlich, der Ort. Wie wir sehen können, sind wir jetzt zur Verfügung, vielleicht lasst uns dies wieder auf 25 ändern. Und wie wir sehen können, haben wir Sinus n Versand basierte Zahlung und Bestellung aufgeben. Und jetzt sind wir an dieser Position, wo wir Ende unterzeichnet haben und wir sind in der Schifffahrt Dämmerung. Also in diesem Fall, unser Rücken und wir kümmern uns um die Überprüfung, ob der Benutzer angemeldet ist. Wenn dies der Fall ist, wird es ihn automatisch zu diesem bringen. Und natürlich, wenn es ihm nicht unterschrieben ist, kann er sich auch anmelden und dann zurück zu diesem Versand kommen, indem er die Versandinformationen hinzufügt. Also das ist Sinus n Versandzahlung und wir sind gut für jetzt. Lassen Sie uns voran und erstellen Sie unsere tatsächliche Box, wo wir die Versandinformationen haben werden. Also das erste, was wir tun werden, ist, den Code und Tax Center zu erstellen, dann auch PY-Datei und vielleicht Texte Licht. Und wir werden Spalte 1 hinzufügen, nur um etwas Platz auf der linken Seite zu haben. Und natürlich gehen, um die Spalte tan mit Hintergrund dunkel und Text zu haben . Fangen Sie an Und lassen Sie uns etwas Stil hinzufügen. So Stil wird die Höhe sein. Und in diesem Fall wird die Höhe 28 REM sein, wie öffnen Sie es und erstellen Sie Standardformular wird für jetzt leer sein. Und natürlich werden wir die Eingaben erstellen. Also denke ich, mehrere Eingabefelder hinzuzufügen und lassen Sie uns sie mit der Formulargruppe erstellen. Also für die Gruppe, und dann haben wir das Label. Und dieses Label wird von Klasse B sein. Warum R0? Und dann vielleicht die vollständige Adresse. Dann haben wir die tatsächliche Eingabe des Typs Text. Dann haben wir einige Klassen wie Formularsteuerung. Und vielleicht ist es das, das ist der Name und die Adresse. Und natürlich, Platzhalter, vielleicht im Dorf. Und so denke ich, das ist es. Lassen Sie uns diese Fehde öfter kopieren. Wir werden uns ansprechen. Dann ändern wir das in die Stadt. Und vielleicht hier. Und du sitzt und natürlich die Telefonnummer. Also hier Nummer. Und dann endlich haben wir vielleicht die nächste Schaltfläche hinzufügen, wo der Benutzer mit der nächsten Aufgabe fortfahren kann, wann immer er mit diesen Informationen fertig ist. Also lassen Sie uns das mit vielleicht einer Eingabegruppe tun. Oder nehmen wir an, wir werden die einfachen Schaltflächen verwenden. Also Tax Center, dann B13. Und das ist im Grunde Button Typ senden. Und dann haben wir Klassen wie btn, btn-primary. Und dann haben wir Textcenter, und das ist die Schaltfläche Weiter. Und jetzt, wenn wir zurückgehen, lassen Sie uns erfrischen. Und wie Sie sehen können, haben wir unsere Sinus n Versand Zahlung Ort Bestellung. Das ist der Balken, Fortschrittsbalken, und wir sind jetzt bei 25 Prozent. Wir müssen das ausfüllen. Und dann, nachdem wir diese gedruckt haben, können wir zum nächsten gehen. Und natürlich, nach dem nächsten werden wir die Zahlungsmethode haben. Also werden wir diese navbar aktualisieren und eine Zahlungsmethode wie diese erstellen. Also lasst uns zurückgehen und ein tolles Down erschaffen. Also, jetzt haben wir die Navbar, wir haben die Fortschrittsleiste, und wir haben alles für die Adresse. Lassen Sie uns das kopieren. Und natürlich, lassen Sie es uns hier unten einfügen, aber lassen Sie uns ein paar Zeilen haben. Und los geht's. Jetzt wird der Fortschrittsbalken bei 50 Prozent liegen. Und natürlich, lassen Sie uns diese entfernen. Und jetzt sind wir gut. Das ist also unser Der zweite, wo wir die tatsächliche Zahlungsmethode haben und alles unterschreiben müssen, was wir brauchen. Löschen wir das einfach und starten Sie eine neue Division direkt hier. Also, nachdem wir Bestellungen aufgeben und diese Divisionen haben, lassen Sie uns vielleicht hier einen neuen Zeilentext hinzufügen, der das Wi-Fi zentriert. Okay, also sind wir vorerst gut. Lasst uns die Spalte 10 haben. Und natürlich müssen wir diese Formulargruppe ändern. Also, hier geht's. Lasst uns das alles füttern. Und das beginnt mit der Erstellung einer Spalte 2 und Spalte 1. Und dann werden wir das Textcenter haben. Und natürlich lasst uns deformiert haben, dass wir uns unterwerfen werden. Und dann haben wir die Division und lassen Sie uns einige Klassen wie die Karte haben. Dann hätten wir Text weiß, dann haben wir Textcenter. Also diese Zahlungsmethode, da wir nicht nur eine Zahlungsmethode haben, die die Nachnahme für jetzt ist, werden wir es als Karte erstellen. Also das ist es, Rand unten. Und natürlich werden wir etwas Stil wie Marge 0 hinzufügen. Dann haben wir vielleicht auch keine. Und dann sind die maximale Breite von 18 in m. Und schließlich die Rand-Taste, zehn Pixel. Und das ist es für diese Teilung. Lassen Sie uns es öffnen und beginnen, einige Inhalte hier zu erstellen. Also der erste wäre der Cut-Header , der Zahlung 2 sein wird. Ich werde einfach erstellen oder Zeit Zahlung direkt hier. Und dann werden wir den Kartenkörper erstellen. Und hier werden wir die verschiedenen Optionen haben, aber für jetzt bleiben wir bei nur einer Option bleiben. Es wird also ein Telefon sein. Wir werden es als Checkbox verwenden. So beginnen Texte und p53. Und jetzt sind wir gut. Wir können mit der Eingabe des Typs Kontrollkästchen beginnen. Und dann lassen Sie uns einige Klassen für die Check-Steuerung hinzufügen. Und dann schließlich, fügen Sie vielleicht die ID hinzu. Also werden wir es für später verwenden, was vielleicht mache ich es Beispiel. Und lasst uns das löschen. Jetzt sind wir gut für die Eingabe. Lassen Sie uns das Etikett erstellen. Und dieses Etikett wird zum Beispiel überprüft. Und dann haben wir auch das Formular Checklabel. Und schließlich haben wir die tatsächliche Arbeit, die Nachnahme ist. Und natürlich brauchen wir nach all dem die Schaltfläche „Senden“ oder „Nächste“. Also lassen Sie es uns hier erstellen. Wir werden die Schaltfläche und den Typ erstellen, oder es wird eingereicht werden. Und natürlich werden die Klassen btn und btn Warnung sein. Und das ist es. Gehen wir zurück und erfrischen wir uns. Wie wir sehen können, haben wir unsere Zahlungsmethode. Wir haben es als Nachnahme, aber wir haben vergessen, den nächsten Streik hier zu tippen. Jetzt, frisch, wie wir sehen können, haben wir es. Nun, was ich dachte, das als nächstes als deaktiviert zu haben, wann immer wir keine Zahlungsmethode gewählt haben und wann immer wir es wählen, wird es sein und deaktiviert. Und natürlich kann der Benutzer zur nächsten Aufgabe gehen, die die tatsächliche Platzierung der Bestellung ist. Damit wird das Ende dieses Videos und des nächsten Videos sein, wir werden sie in den spezifischen Dateien ablegen. Und natürlich werden wir dies tun, werden eine deaktiviert haben, die keine Kontrollkästchen genau hier. Und wir werden auch Definer Ort Order Seite erstellen. Und damit das gesagt wird, ist dies das Ende dieses Videos. Wir sehen uns im nächsten. 14. Platzierung 2: Alles klar, also hallo und willkommen zurück. In diesem Video werden wir die Zahlungsmethode fortsetzen. Wir haben gesagt, dass wir diese Schaltfläche deaktivieren möchten. Und wenn wir auf eine Zahlungsmethode klicken, zum Beispiel, wenn wir diese Chatbox, und dann sollte diese nächste für uns verfügbar sein, damit wir drauf drücken können. Lass uns weitermachen und es tun. Sofort. Wir haben die Nachnahme. Und natürlich, das nächste aber, was wir tun werden, ist, einen On-Klick ein rechts hier hinzuzufügen. Also innerhalb der Eingabe ist dies die Chatbox. Und entklicke gehen, um eine Methode zurückzugeben, die wir in JavaScript erstellen werden. Vielleicht nenne ich es geänderte Begriffe und gebe ihm das. Und natürlich werden wir tun, was Sie tun werden, ist, diese Schaltfläche zu deaktivieren. Wenn wir jetzt zurückgehen und auf Aktualisieren klicken, können wir sehen, dass es deaktiviert ist. Und was wir jetzt tun müssen, ist, es vielleicht zu ändern, wenn wir drauf drauf drücken. Gehen wir zurück und erstellen Sie hier ein Skript. Und in diesem Skript werden wir unsere Funktion erstellen. Lassen Sie uns voran und erstellen Sie das Skript. Innerhalb des Skripts haben wir die Funktion, die wir gerade genannt haben, Terme geändert. Und es wird die Chatbox nehmen, lassen Sie uns die Chatbox beschränken. Und es wird überprüfen, ob das Kontrollkästchen der Chat. Also, wenn es überprüft wird, werden wir das Element nach ID aufgerufen. So Dokument Punkt erhalten Element nach ID. Und lassen Sie uns die ID dieses Elements überprüfen. Und wie wir sehen können, haben wir keine Idee. Also unbenannt, werde ich ihm eine ID von next geben und dann gehen, um das Element nach ID als nächstes zu erhalten und dann deaktiviert zu ändern, um gleich falsch zu sein. Also, wenn das Kontrollkästchen aktiviert ist, werden wir dies in der Lage zu false machen. Dies ist jedoch nicht der Fall. Wir werden das Element nach ID erhalten und es dann einfach wahr machen. Das ist es also. Jetzt eine Feige, gehen Sie zurück und drücken Sie Aktualisieren, gehen, um diese Schaltfläche deaktiviert. Sobald wir jedoch darauf klicken, werden wir es haben. Wir können es verwenden und wenn wir es entfernen, das gleiche wie zuvor. Nun, da wir den Versand und die Zahlungsmethode erstellt haben, gehen wir voran und beginnen mit der tatsächlichen Bestellung. Pfirsich. Also lassen Sie uns jetzt gehen und alle diese auf ihre spezifischen Seiten verschieben. Also hier, lassen Sie uns voran und erstellen Sie eine neue Seite und dass wir es vielleicht eine Zahlungskarte und Node.js nennen werden. Und natürlich werden wir alle diese hier entfernen. Also lassen Sie uns sie entfernen, fügen Sie sie hier hinzu. Und natürlich werden wir Fußzeile und Kopfzeile hinzufügen. Das ist also die Fußzeile. Ich werde das Gleiche für hier tun. Also hier haben wir den Header und wir sind gut für jetzt. Natürlich haben wir noch dieses, welches die Versandmethode ist. Also lassen Sie uns voran und entfernen Sie es auch und legen Sie es in seine entsprechende Position. In diesem Fall ist es im Versandschnitt. Wenn wir nun zurück zu unserer Homepage gehen und auf Aktualisieren klicken, werden wir einige Leerzeichen bekommen, da wir diese Zeilen haben. Jetzt lasst uns erfrischen und wir sind gut. Das ist es also für die ersten beiden Seiten. Jetzt werden wir die tatsächliche Bestellseite erstellen. Also lasst uns weitermachen und einige Zeilen hinzufügen, vielleicht dn. Und jetzt beginnen wir mit der Herstellung der Behälterflüssigkeit. Dann werde ich die Zeile mit etwas Polsterung auf der Y-Achse erstellen. Dann dachte ich, wie üblich, etwas Platz auf der linken Seite zu verlassen und dann mit der eigentlichen Box zu beginnen. Und in diesem Fall, aber ich denke, eine Zeile hinzuzufügen. Also hätten wir unser DOM. Und in dieser Reihe werde ich wie gewohnt erstellen. Vielleicht habe ich sie einfach kopiert. Ja, da es das gleiche ist, werden wir all dies aus dem vorherigen Thema kopieren, gehen Sie zur Zahlung. Gott, wie wir sehen können, ist das unzulänglich und wir brauchen nicht all das wirklich, wir brauchen nur diese beiden. Also lasst uns sie kopieren. Richtig? Und gehen wir zurück auf unsere Homepage an ihnen hier. Und natürlich müssen wir den Globus mit etwas Polsterung hinzufügen, wie gesagt. Und lasst uns das entfernen. Und wir haben, so ist es das. Lassen Sie es uns hier platzieren. Und vielleicht die Division, die fehlt. Und jetzt sind wir gut. Und das ist der Versand oder der Fortschrittsbalken, wie wir hier sehen können, haben wir es. Nun lassen Sie uns die Platzbestellung erstellen, aber vorher, Lassen Sie uns dies anpassen. Also haben wir jetzt 75 Prozent statt 50. Und wenn wir zurückgehen, sind wir jetzt bei 75 Prozent. Wir haben immer noch nur die Platzierung der Bestellung. Also beginnen wir jetzt mit der Erstellung der tatsächlichen Seite. Also, was ich tun werde, ist, ein neues zu schaffen. Zeile in diesem Fall hier. Und ich werde die erste Spalte mit vielleicht sieben bei mittlerer Größe haben. Und dann haben wir mit etwas Polsterung und natürlich die eigentliche Spalte gehen. Und was ich dachte, ist, den Standort hinzuzufügen. Das erste, was wir zeigen werden, ist der tatsächliche Standort der Person mit den Informationen, die er von der Lieferung eingegeben hat. Und natürlich, vielleicht eine Schaltfläche zum Bearbeiten, damit er zurück zum Versand- und Redaktions-Standort gehen kann. Um das zu tun, werden wir wie gewohnt einen Wagen benutzen. Also Karte mit etwas Hintergrund, Licht, Rand Taste drei. Und wir können mit dem Kartenkopf beginnen. Und dann gehen, um vielleicht Adresse hinzufügen, und dann von der tatsächlichen Adresse gefolgt. Also vielleicht, nehmen wir an, Dorf, vielleicht Straße, Gebäude. Und danach werden wir den Kartenkörper haben. Wir werden die Stadt zeigen. Also in H5 und ich werde es als ket namens Titel tun. Und dann werden wir die Stadt haben. Und danach können wir das Telefon oder die Telefonnummer erstellen. Und in diesem Fall dachte ich, die Telefonnummer auf der linken Seite und den Bearbeitungs-Button auf der rechten Seite hinzuzufügen . Lassen Sie uns also eine neue Zeile erstellen. Wissenschaftler haben gestohlen, um Sex für den ersten zu haben. Und der Absatz wird von Text sein. Und vielleicht Telefonnummer. Nehmen wir an, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4. Und danach werden wir eine neue Kolumne erstellen, auch Sex. Und in diesem Fall werden wir die Schaltfläche haben, die mehrere Klassen wie BTN haben wird , float to end. Und natürlich BTN Umriss, primär. Und natürlich die eigentliche Bearbeitung. Nun, wenn wir zurückgehen und Refresh drücken, gehen, um so etwas zu bekommen. Wir haben die Adresse, wir haben die Stadt, die Telefonnummer und die Schaltfläche Bearbeiten, um alle diese zu bearbeiten. Also im Backend wollen wir diesen Button nicht machen. Wir leiten uns auf die Versandseite, wo der Benutzer alle diese bearbeiten und dann zurück gehen kann, kommen Sie zurück zur Platzhalter Seite. Das ist also der erste. Und lassen Sie uns mit der Erstellung der Zahlungsmethode fortfahren. Also denke ich, es ist das Gleiche. Und lassen Sie uns eine neue Zeile direkt hier erstellen. Und in diesem Fall werde ich nur eine Spalte haben. Und dann die Karte mit den Hintergrundmustern des Lichts. Und natürlich die Randunterseite drei. Öffnen wir es und fangen wir hier an. Also das ist es in dieser Abteilung, wir werden den Kartenkopf wie gewohnt haben. Und in diesem Fall wird es nur Zahlung sagen. Und da wir nur eine Zahlung haben, werde ich sie einfach hinzufügen, indem ich Rubrik 5 verwende. In diesem Fall wird es wie üblich Titel und dann Nachnahme genannt. Das ist es also. Nun, wenn wir zurück zu dem Absatz und eingehalten Klasse namens Text, gehen vielleicht kostenlose Lieferung auf alte Bestellungen über vielleicht $15 haben. Das ist es also. Und jetzt sind wir fertig mit der zweiten Münze. Wenn wir zurückgehen und aktualisieren, um so etwas zu haben, aber ich dachte, es unter der Spalte hinzuzufügen, die bei Medium sieben ist. Also gehen wir zurück. Mal sehen, was wir falsch gemacht haben? Wenn ich hier zurückgehe, haben wir die Kolumne und hier hätten wir diese Rolle hinzufügen sollen. Also lasst es uns entfernen und es hier platzieren. Wenn wir nun zurückgehen und auf Aktualisieren drücken, werden wir die Adresse dann die Zahlungsmethode erhalten. Und wir haben noch ein paar Plätze hier. Und in diesem leeren Bereich denke ich eigentlich daran, die Schaltfläche „Bestellung aufgeben“ hinzuzufügen und wo der Benutzer auch seine tatsächlichen Bestellungen sehen kann. Also, aber davor werde ich hier einen neuen Charakter hinzufügen. Und diese Karte zeigt alle Artikel an, die im Kunden Scott sind. Also lasst uns weitermachen und damit beginnen. Gehen wir zurück. Und wie immer werden wir es in dieser Division haben. Und machen wir es hier für uns. Wir werden unsere Kolumne erstellen, dann, es tut mir leid, entwachsen und dann unsere Kolumne. Und natürlich, die Summe Hintergrund mit Licht und viel und unten drei wie üblich. Und wir haben den Kartenkopf. In diesem Fall wird der Absatz mit einigen Stilen wie Anzeige, vielleicht Inline-Block haben . Und natürlich müssen wir Ihre Befehle haben oder heilen. Ja, das sind deine Sachen. Klingt besser. Dann haben wir einen anderen Absatz mit der Klasse float. Und in diesem Fall werden wir Stil haben. Und wir werden auch Inline-Block anzeigen. Und in diesem Fall werden wir Preise haben. So sind die Artikel auf der linken Seite, die Preise auf der rechten Seite. Das ist also für den Header. Und in diesem Fall fangen wir mit dem kalten Kumpel an. Lassen Sie uns voran und erstellen Sie eine neue Abteilung mit Körper und Rechtfertigung Content-Center. Und wie wir wissen, beginnen wir mit der Erstellung von E4 zum Einreichen. Und dann haben wir eine Reihe. Und in diesem Fall werden wir die Spalte drei haben. Und das Ende in dieser Spalte, Ich denke, um das Bild hinzuzufügen, die Elemente, so dass angenommen, er wählt das Element Buffet image1 und vielleicht fügen Sie einige Stile. Mal sehen. Zuerst werden wir Inline-Block anzeigen und dann die Höhe von fünf Barry haben. Und schließlich Breite auch sehr Ende. Also das ist es für das Bild. Lassen Sie uns nun eine weitere Spalte erstellen. Und in diesem Fall werden wir Spalte 9 haben. Und in dieser Spalte werde ich den Absatz für den Titel haben. Also wie üblich Stil Inline-Block, es tut mir leid. Das ist es. Wir haben innerhalb dieser Kachel-Anzeige Inline-Block. Und dann haben wir den eigentlichen Titel, vorausgesetzt wir wählen Chanson, und dann werden wir einen weiteren Absatz für den Preis haben. Und dieses Mal wird es angezeigt werden und auch Inline-Block. Und natürlich werden wir jetzt die Klassenladung haben und, und nehmen wir an, wir haben 25 Dollar. Also, jetzt, wenn Sie zurück zu aktualisieren, gehen, um so etwas zu sehen, haben wir noch einige Modifikationen dafür und wir werden sie im nächsten Video zu tun. So sehen wir uns dann. 15. Place 3: In Ordnung, Also jetzt, dass zu schade, Lassen Sie uns den Rest der Informationen hinzufügen, so dass wir noch haben, haben wir bereits den Titel und den Preis hinzugefügt. Vielleicht werden wir das hinzufügen, fügen Sie die Menge tatsächlich hinzu. Also lassen Sie uns einen Absatz hinzufügen, der Menge sagt. Und dann folgt die tatsächliche Menge. Ich werde es in einer Spanne haben. Nehmen wir in diesem Fall an, dass der Benutzer drei gekauft hat. Und danach werden wir eine neue Zeile nach dieser Division erstellen. Und in diesem Fall haben wir es für die Demo. Also vielleicht Spalte 6 und das würde geleert werden, und wir haben Spalte und das Geschlecht. Und in diesem Fall haben wir den Entfernen-Button. Also lassen Sie uns die Schaltfläche hinzufügen. Und die eigentliche Taste wird einige Klassen wie PTEN, Videospiel-Wechsler haben und dann schweben, oder? Und natürlich, der Typ einreichen. Also ja, ich denke, das ist es. Gehen wir zurück und drücken Sie „Aktualisieren“. Und wie Sie sehen können, haben wir die Menge genau hier. Vielleicht lassen Sie uns die Menge tatsächlich zu diesem hinzufügen. Also lasst uns das machen. Wir werden hier die Farbe haben, und lassen Sie es tatsächlich in dieser Spalte hinzufügen. Aber da wir Display-Inline-Block verwenden, werde ich hier eine neue Division haben. Innerhalb dieser Abteilung werden wir diese beiden Absätze haben und dann von dieser Menge gefolgt. Und natürlich, Wissenschaftler Knopf, wir werden Remote hinzufügen. Also ich denke, das ist es im Grunde, wenn wir es aktualisieren, werden wir die Menge 3 und die Schaltfläche entfernen, um diesen Artikel tatsächlich zu entfernen. Also jetzt zu all dem, werden wir eine Zeile hinzufügen. Und in diesem Fall, nach d4 hier, werde ich jeden Teil hinzufügen. Und wenn ich auf Aktualisieren klicke, möchte diese Zeile haben. Und natürlich, wenn wir mehrere, vielleicht mehrere Gegenstände haben , werden sie so aussehen. Also gehen wir voran und wir haben diesen Kartenkörper. Und in diesem Körper werden wir mehrere Formulare für mehrere Elemente erstellen. Also werde ich all das ein paar Mal kopieren. Und jetzt, wenn wir zurückgehen und auf „Aktualisieren“ drücken, werden Sie mehrere Artikel bekommen. Und natürlich besteht jeder Artikel aus einem bestimmten Bild, pazifischen Titel, der Menge, die der Benutzer gekauft hat , und natürlich dem Preis des Artikels. Und wir haben auch die Schaltfläche Entfernen, um alle Elemente zu entfernen, die der Benutzer nicht möchte. Also das ist es für die Artikel. Und in diesem Fall haben wir hier noch den tatsächlichen Auftragsvertrag. Also, wenn Sie sich erinnern, haben wir hier tatsächlich eine Spalte erstellt, die diese ist. Also, wenn du vielleicht hier sein willst, ja, das ist es. Wir haben Säulenmitte. Sieben. Also nach sieben, denke ich, ab 7012 werden wir den Platzbefehl haben. Scrollen wir nach unten. Wir haben diese Division ist eine neue Division genau hier zu schaffen. Und in diesem Fall werden wir eine neue Spalte in der Mitte von fünf haben. Und in diesem Fall haben wir, wie üblich, eine neue Zeile mit etwas Polsterung auf der Y-Achse und dann eine weitere Spalte, dann der eigentliche Gott. Und in diesem Fall werden wir, wie üblich schlechte Dürre, Licht und beobachten Taste drei. Und dann haben wir auch das Formular, das wir für die Bestellung einreichen werden. Das ist es also. Wir werden den Kartenkopf wie gewohnt haben. Innerhalb dieser Karte Header, um ein Azteken-Zentrum zu haben. Und wir werden den Knopf mit einigen Stilen haben. Also denke ich, die Breite dieses Knopfes sollte 65 Prozent unserer Karte sein. Und dann haben wir noch die Klassen von btn, VT und vielleicht gelb, so Warnung. Und dann haben wir vielleicht, fügen wir die onclick hinzu und kehren First Order zurück und diese Methode verwenden wir es später, aber jetzt habe ich noch hinzugefügt. Und natürlich sollte der Typ ein Knopf sein, und dann haben wir immer noch den Namen, vielleicht Aktion. Und natürlich die Platzierung hier. Also Bestellung aufgeben. Und jetzt, wenn wir wieder aktualisieren, wir werden diese Karte mit nur einem Header, der sagt Platz alle haben. Also das ist es für den Header. Lassen Sie uns fortfahren, indem Sie den Körper erstellen. Also gehen wir zurück. Wir haben immer noch den Kartenkörper, und in diesem Fall werde ich ihn hier erstellen. So guter Körper. Und dann haben wir noch den Kartentitel. In diesem Fall. Ich werde Kartenzusammenfassung ausgeben. Und fangen wir mit einer neuen Reihe an. Und diese Zeile wird die Elemente haben, also Spalte 6. Und dann in diesem und gehen Sie, um Gegenstände zu platzieren. Dann nehmen wir die, vielleicht die Summe. Also bei der Kolumne Sex, der zweite, Lassen Sie uns vielleicht fürs jetzt 70. Und natürlich, wenn wir fertig sind und wir entwarfen und Gleichheit unterstützen den Akt. Eigentlich sollte das Programm vielleicht alle Artikel zu den Preisen aller Artikel hinzufügen und dann unter der Bestellübersicht anzeigen. Aber im Moment werden wir $70 hinzufügen. Und dann, nachdem man tonnenweise mit dem Streben ging, um eine neue Reihe zu schaffen. In diesem Fall haben wir eine neue Kolumne Sex. Das ist für die Lieferung. Und dann fügen wir noch eine Spalte hinzu, Sex. Was vielleicht 3 ist. Und danach werden wir eine neue Zeile mit etwas B13 erstellen. Und in diesem Fall werden wir die Bestellung insgesamt oder vielleicht den Gesamtpreis haben. Das ist also Kolumnen-Sex geschaffen. Und in diesem Fall, oder die Summe, und dann durch den tatsächlichen Betrag gefolgt. Also lasst uns hier eine Eigenschaft machen, ausgewogene sechs. Und sagen wir, es ist auch jemand in Dollar, da die Lieferung kostenlos ist. Also denke ich, das ist es. Vielleicht können Sie auch tatsächlich einen Absatz hinzufügen , der besagt, dass Sie keine Gegenstände in Ihrer Karte haben. Wenn wir keine Artikel in unserem Code haben. Aber im Moment bleiben wir bei diesem und wo immer wir das Back-End machen, können wir es auch hinzufügen. Also lassen Sie uns aktualisieren und wie Sie sehen können, haben wir die anderen zusammenfassenden Elemente, Lieferung haben einige Auffüllungen und auch die andere Summe mit der tatsächlichen Summe. Nun, ich denke, das ist es für die, dieses hier. Und natürlich können wir hier auch eine neue Karte hinzufügen, um alle seine alten Einkäufe zu sehen. Und in diesem Fall werde ich es direkt hier nach diesem erstellen. Also in dieser Spalte, gehen, um eine neue Zeile zu haben. Und in diesem Fall werden wir wie gewohnt haben, die Säule mit Licht. Und natürlich der Rand unten grün. So Kartenkopf wie gewohnt. Und dann haben wir natürlich den Absatz. Und in diesem Fall machen wir es zu einer neuen Linie und einem neuen Stil. Vielleicht zeigen Sie Inline-Block an. Und dann haben wir natürlich die Käufe Klasse laden, und dann hatten wir den Stil Anzeige Inline-Block wie gewohnt. Und in diesem Fall haben wir das erhaltene. Was wir hier zeigen, sind die tatsächlichen Bestellungen des Benutzers und ob es empfangen wird oder nicht. Also denke ich, das ist es für den Kartenkopf. Gehen wir zurück und sehen, wie es zu aktualisieren. Ja, ich finde, es sieht gut aus. Wir haben Ihre Einkäufe und wenn es auf Nein empfangen wird. Und nach Daniel geht, um den Kartenkörper mit begründen Content-Center zu erstellen. Und danach werden wir die Reihe haben. Und dann, nachdem es losgeht, können wir mit der Erstellung des Absatzes beginnen, vielleicht vier. Vielleicht entfernen Sie diese Klasse für jetzt, ich werde einige Stile hinzufügen. Also zu diesem Zeitpunkt wäre Anzeige Inline-Block. Und dann habe ich das Bestelldatum. Also Datum und vielleicht nehmen wir an, 26 bis 2021. Und dann vielleicht der Preis gefolgt. Aber bevor wir voran gehen und erfrischen. Und wie wir sehen können, haben wir das Bestelldatum. Und ich dachte, den tatsächlichen Knopf des empfangenen oder Biegens hier hinzuzufügen. Und natürlich die Summe oder der Preis hier. Also, anstatt den Preis hier hinzuzufügen, werde ich den Button haben, der ausstehend oder empfangen sagt. Also werden wir beide machen. Und die verschiedenen Andrew gehen, um einen von ihnen anzuzeigen , je nachdem, ob der Artikel empfangen wird oder nicht. Also Taste Flut und BD und BD und BD und erfolgreich, wenn es empfangen wird. Und vielleicht Erfolg, es tut mir leid. Und natürlich der Stil, der Inline-Block angezeigt wird. Also das ist es für den ersten Knopf und ich werde schreiben empfangen. Und danach, nach dieser Division, werden wir eine neue Division haben. Und in diesem Fall werde ich die Gesamtsumme haben und vielleicht $120. Nun, wenn wir zurückgehen und aktualisieren, wie wir sehen können, dass insgesamt als und dieser Knopf sollte genau hier sein. Also lasst uns weitermachen und es reparieren. Innerhalb dieser Schaltfläche haben wir die Stil-Anzeige Inline-Block. Aber ich denke, wir haben das wahrscheinlich einfach löschen lassen. Hab ich schon wieder. Also haben wir hier den Inline-Block und wir haben vergessen, eine neue Division zu erstellen. Wir werden all das speichern, also machen wir es hier. Dann lasst uns auffrischen. Und wie Sie sehen können, haben wir den empfangenen Button hier. Und vielleicht können wir das auch als eine für kleine haben. Und lasst uns erfrischen. Und wie wir sehen können, haben wir das als Gesamt hinter oder nach dem Bestelldatum bekommen. Also das ist es für den ersten. Lassen Sie uns vielleicht hinzufügen, gehen wir weiter und fügen Sie eine weitere Zeile hinzu. Also HR und dann kopieren Sie all dies, dann noch ein paar Male eingefügt. Also, das ist Atlas. Gehen Sie weiter und aktualisieren Sie sich. Und wie wir sehen können, haben wir verschiedene Befehle. Aber das ist nicht das, was ich dachte. Ich dachte, sie alle in der Karte zu haben. Also gehen wir zurück und lassen Sie uns das Problem sehen. Also hier, eine Reihe von diesen hier zu haben. Ich werde es gleich nach dem hier haben. Und all diese sollten im Kartenkörper sein. Also werde ich all das kopieren und noch ein paar Male einfügen. Gehen wir zurück und drücken Sie „Aktualisieren“. Und wie wir sehen können, erhielten wir unsere Bestellungen mit dem Euler-Datum, dem Gesamtbetrag davon, und ob es empfangen wird oder nicht. Und um dieses Beispiel willen, werde ich das in „Pending“ ändern, nur um euch wissen zu lassen wie ihr es haben werdet, wenn die Bestellung noch nicht geliefert wird. Also werde ich hier, statt BTN-Erfolg, BTN Gefahr haben. Und statt empfangen, werde ich mich biegen. Also, das ist Atlas. Gehen Sie weiter und aktualisieren Sie es. Und wie wir sehen können, haben wir den Knopf, der ansteht, genau hier. Und alle anderen Elemente werden empfangen. Also das ist es für dieses Video, das wir erstellt haben. Um es einzupacken, haben wir diese kleinen Karten erstellt, bei denen wir die Adresse bezahlen. Dann haben wir alle Gegenstände, die auf der Karte des Benutzers sind und natürlich seine alten Einkäufe. Und wir haben auch die Summe oder die Zusammenfassungen. Also haben wir die Gesamtheit genau hier. Und dies sollte die Summe aller Elemente multipliziert mit der Menge, die der Benutzer bestellt hat. Das ist also im Grunde für dieses Video. Das nächste Video beginnen wir mit dem Erstellen der Admin-Seite. Und wir haben auch noch die Anmeldeseite, wo der Benutzer weg ist. Melden Sie sich jetzt für diese Website an. Damit gesagt, ist dies das Ende dieses Videos. Wir sehen uns im nächsten. 16. Admin: Hallo und willkommen zurück. In diesem Video werden wir die Admin-Seite erstellen. Und tatsächlich besteht die Admin-Seite aus zwei Seiten. Das erste, das wir zusammen bauen werden, und das zweite wird Ihr Projekt sein, das Sie erstellen werden. Beginnen wir also mit dem ersten, wo wir mehrere Kategorien, Marken und Elemente haben , die wir hinzufügen können. Also gehen wir zurück zu Gott. Und vor allem, da wir noch alle diese hier haben, lassen Sie uns sie einfach zur Platzbestellung hinzufügen. Also hier, wann immer wir dieses haben, das ist die Behälterflüssigkeit, wird alles davon nehmen. Und sie sagten, und die Platzierung, ich glaube, wir haben keine neue Datei erstellt, Bestellung aufgeben, EJS. Und in diesem Fall werde ich all diese hier hinzufügen. Und wie immer, vergessen Sie nicht die Kopf- und Fußzeile. Also das ist es für die Fußzeile. Und scrollen wir in der Kopfzeile rechts hier nach oben. Und wir sind fertig für den Platzierungsauftrag. Jetzt sind wir zu Hause, dass EJS und wir werden die erste Admin-Seite erstellen. Wie gesagt, wir brauchen vielleicht eine Box, in der wir unsere Kategorien hinzufügen können. Gehen wir also voran und beginnen mit der Erstellung der Behälterflüssigkeit. Und dann in diesem ein und gehen Sie zu Erstellen sie wachsen mit vor. Und natürlich, Spalte, großer Sex, Hintergrund, Licht und drei sein. Also das ist es für den ersten. Lassen Sie uns das Formular erstellen. Und natürlich, in diesem Formular werde ich die Kategorie hinzufügen. Also lassen Sie es uns hier hinzufügen, und dann von einem Label gefolgt. Und das wird der Kategoriename sein. Und natürlich, eine Division, die Input-Gruppe ist. Und innerhalb dieser Eingabegruppe wird das eigentliche Hinzufügen der Kategorie haben. Also werden wir eine Eingabe vom Typ Text haben und die Klasse wird Steuerelement gebildet werden. Und dann der Platzhalter, vielleicht Kategoriename oder Name, einfach ein Name. Und ich denke, das ist es. Wenn wir zurückgehen und auf „Aktualisieren“ klicken, werden wir etwas haben, das so aussieht. Also haben wir die Akademie, Sie haben den Kategorienamen, und wir haben auch den tatsächlichen Namen. Nun, wenn das Denken ist, das Bild dieser Kategorie hinzuzufügen. Gehen wir zurück und kopieren Sie das alles und fügen Sie es hier ein. Also Kategorie Bild, und wir werden nicht einen Link auf das Bild hinzufügen. Wir werden tatsächlich den Bass hinzufügen, also werde ich ihn als Text belassen. Und was wir tun werden, ist, alle Bilder zu unserem Bilderordner hinzuzufügen. Und dann können wir daraus wählen. Da werden wir den Pfad betreten. Also das ist es für das Bild. Lass uns vielleicht schlecht. Und wenn wir zurückgehen und aktualisieren und dann habe ich den Namen und das Kategoriebild. Also das ist es für die Kategorie hinzufügen. Lasst uns genau dasselbe für die Marke machen und sie hier platzieren. Also jetzt gehen wir zurück und nehmen all das, was Kolumnensex ist. Kopieren Sie es und platzieren Sie es hier und hier haben wir die Marke, Markennamen. Und dann haben wir das Markenimage. Und wie Sie sehen können, wenn wir zurückgehen und Refresh drücken, werden wir etwas haben, das so aussieht. Allerdings müssen wir noch hinzufügen vielleicht, vielleicht machen es dunkel. So Set von Hintergrundlicht, das nackt dunkel ist und CO2 passieren. Lassen Sie uns auffrischen. Und natürlich müssen wir nicht vergessen, die Steuer wie hinzuzufügen. Also, das ist Atlas. Geh zurück und aktualisiere dich. Und wie wir sehen können, haben wir die Kategorie hinzufügen und die Marken-Boxen, wo wir haben, können wir die Kategorie und das Bild eingeben. Und natürlich wollen wir den eigentlichen Submit-Button nicht vergessen. Also lassen Sie uns eine andere Division erstellen. Wir werden die Schaltfläche hinzufügen. Und das wird der Klasse BTN sein, BTN, vielleicht hier, dunkel. Und dann haben wir uns unterwerfen. Und wir werden das Gleiche hier haben. Also Knopf. Und dann einige Klassen wie btn, btn Licht diesmal, da wir den Hintergrund von dunkel und senden, aktualisieren. Und wie wir sehen können, haben wir die Einreichung und Einreichung für unsere Marke und Kategorie. Jetzt, da wir mit unserer Marke und Kategorie fertig sind, der nächste Schritt darin, das Hinzufügen eines Artikels tatsächlich zu erstellen. Also gehen wir zurück. Und hier haben wir die Form, wir haben immer noch Teilung, und das ist für die Reihe. Lassen Sie uns eine neue Zeile erstellen. Und in diesem Fall haben wir die Kolumne Medaille von sechs und der Hintergrund dunkel. Und auch Steuerrutsche mit einigen Polsterung alle Seiten. Und jetzt können wir unser Formular erstellen. Und dann in diesem Formular beginnen wir mit der Erstellung des H3, das Element hinzufügen ist. Und natürlich müssen wir ihm mit dem ersten Etikett für den Artikelnamen folgen. Also Etikett für Namen. Und dies wird ItemName sein, dann gefolgt von einer Division der Eingabegruppe wie gewohnt. Also Eingabegruppe. Und dann haben wir noch Marge unten drei. Und natürlich müssen wir die tatsächliche Eingabe hinzufügen. Also dann füge ich einen Eingabetext hinzu und dann haben wir Klassenformularsteuerung. Und wir haben auch den Namen, der eigentliche Name ist, und vielleicht Platzhalterelement, Name oder nichts. Ich denke, du wirst es vielleicht als Name tun. Und das ist im Grunde für die erste Division. Jetzt haben wir es immer noch. Ein paar Dinge. Also lassen Sie uns das kopieren und noch ein paar Mal einfügen. So haben wir den Artikelnamen kann die Artikelbeschreibung sein, und dann haben wir auch den Artikel. Fügen wir hier die Kategorie hinzu, gefolgt von der Artikelmarke. Und natürlich haben wir immer noch den Preis, Menge und das Bild und auch die Größe. Also Artikel, Marke, Artikel, Bild, sagen wir. Und danach werden wir die Artikelmenge haben. Dies ist also die Menge, die in unserem Lager verfügbar ist. Und danach werden wir mit dem Artikelbild enden, Öl. Okay, also haben wir hier das Bild hinzugefügt, damit wir immer noch den Preis haben. Ja, also haben wir im Grunde alles, was wir brauchen, wir haben immer noch die Größe. Also lassen Sie es uns wirklich schnell hier hinzufügen. Also das ist es, das ist die Seite. Und schließlich werden wir den Submit-Button haben. Und ich dachte, vielleicht eine Schaltfläche hinzuzufügen, um alle Elemente anzuzeigen, die wir haben. Also lasst es uns großartig machen. Hier. Wir haben diese Artikelgröße. Lassen Sie uns eine neue Zeile direkt hier erstellen, die Spalte Geschlecht für den Submit-Button. So sollte Typ Submit sein. Und dann nach dieser Klasse, btn, VT und Licht wie gewohnt, und die eigentliche Submit-Button. Und danach werden wir die Spalten x erstellen , und in diesem Fall werden wir sie haben. Richtig? Also schweben, rechts, oder schweben und das Metall. Und dieses Formular wird das Formular sein, dass wir gehen, um die Schaltfläche wird btn, btn leichte Last, und dann alle Elemente anzeigen. Also im Grunde, wenn ich voran gehen und aktualisieren, können wir sehen, dass wir alle Artikel in Folk haben. Wir haben also den Namen, die Beschreibung, Kategorie, die Marke, das Bild, die Menge, den Preis und die Größe. Also das ist es im Grunde für den Artikel. Und jetzt müssen wir tatsächlich eine andere vielleicht Division schaffen. Und diese Abteilung besteht aus allen Bestellungen, die die Benutzer jetzt bestellt haben. Und natürlich müssen wir eine neue, vielleicht eine neue Seite erstellen , um alle Elemente anzuzeigen und vielleicht einen von ihnen zu ändern, wenn wir wollen. Also das ist es für diesen hier. Lassen Sie uns voran und erstellen Sie die nächste Division. Also gehen wir zurück zu unserem Code. Und in diesem Fall werde ich hier den ganzen Weg nach unten scrollen und mit den tatsächlichen Bestellungen beginnen. Nachdem Sie mit diesem Formular fertig sind, ist dies für die Spalte und immer noch in der gleichen Zeile. Also hier, lassen Sie uns eine neue Spalte erstellen, mittleren Sex und unser Denken, um es scrollen zu lassen. Und wir werden sehen, was Partitur-Scroll in einer Minute bedeutet. Also das ist für die Befehle und. Natürlich werden wir eine Teilung haben, die so kalt ist, wie unsere Form zu schaffen. Und dann in diesem Formular werde ich den Kartenkopf wie gewohnt mit einer Hintergrundwarnung haben und der Text sollte dunkel sein. Also lasst uns weitermachen und es aufmachen. In diesem Fall haben wir die Bestellnummer. Ich werde es vielleicht als eins schreiben. Und natürlich gefolgt von einem weiteren Absatz mit den Klassen Karte, Text und Float. Und in diesem Fall ist dies für den Gesamtpreis und gefolgt von vielleicht, sagen wir $75. Das ist es also. Wenn du zurückgehst und auf „Aktualisieren“ klickst, werden wir etwas haben, das so aussieht. Dies sind die Bestellungen und innerhalb der Bestellungen haben wir die erste Bestellung mit einem Gesamtpreis von einem. Jetzt können wir vielleicht einige Informationen darüber hinzufügen. Und natürlich werden wir nicht alle Artikel hinzufügen, die der Benutzer gekauft hat. Wir werden nur hinzufügen vielleicht seine Lage, den Gesamtpreis, den wir bereits hinzugefügt, und vielleicht ein paar Knopf. Und wann immer der Benutzer, der Administrator auf diese Schaltfläche drückt, wird er zur tatsächlichen Bestellung mit allen Details dieser Bestellung bringen. Das ist es also. Lassen Sie uns voran und erstellen Sie weiter den Kartenkörper, so genannte Hase. Und in diesem Fall in der Karosserie haben wir den Autotitel wie üblich, der vielleicht der Benutzer sein wird, dessen Bestellung das ist? Also, vielleicht werde ich es nennen. Und in diesem Fall werde ich den Ort und den Kartentext haben, so genannt x und in diesem Fall vielleicht den Libanon haben. Und danach werden wir das Date haben. So kann auch ein weiterer Kontext mit dem Datum 26 bis 2021 sein und dann von der Telefonnummer und einem anderen Kontext gefolgt. Also das ist es, vielleicht über 4, 4, 4. Und wenn du also zurückgehst und auf „Aktualisieren“ klickst, wirst du das haben. Wir haben den Namen, den Libanon, das Datum und die Telefonnummer. Und natürlich werde ich vielleicht die Ansicht-Schaltfläche hier hinzufügen. Also lassen Sie uns voran und erstellen Sie die Schaltfläche, um die vollständige Reihenfolge zu sehen. Und ich dachte, es hier hinzuzufügen. Und natürlich habe ich hier vergessen, sie als Absatz statt Text statt Teilung zu haben . Also lasst uns führen und reparieren. In Ordnung, also jetzt, da wir sie repariert haben, Lassen Sie uns die Schaltfläche mit der Art der Übermittlung erstellen. Und dann haben wir die Klassen, die die BTN, BTN-primär sind. Und ich glaube, wir sind fertig, müssen uns noch sehen. Jetzt gehen wir zurück und erfrischen uns. Und wie wir sehen können, haben wir die eigentliche Ordnung. Und vielleicht, weil das nicht die ganze Seite für die ganze Abteilung nimmt, lassen Sie uns die Meeresfrüchte bestellen. Also werde ich tun, ist, diese Titel-Tags und all diese neuen Zeile und Spalte 6 zu haben . Wir werden all das in dieser Spalte haben. Und dann werde ich eine weitere Spalte erstellen, die auch Sex ist. Und in diesem Fall werde ich den Knopf der Einreichung haben. Also jetzt, wenn wir zurückgehen und Refresh drücken, werden Sie etwas haben, das so aussieht. Und natürlich können wir die Klassen wie Last hinzufügen. Und wie Sie sehen können, ist es am Ende genau hier. Das ist es also. Wir können immer hinzufügen, vielleicht nehmen Sie all dies und kopieren Sie es noch ein paar Mal, und lassen Sie es uns aktualisieren. Und wie wir sehen können, haben wir unsere Befehle, mehrere Befehle. Und natürlich, das ist es für diese Seite. Wir haben alle genannten Admin-Seiten oder Admin-Funktionen erstellt, und dies ist es für die erste Admin-Seite. Wir sehen uns im nächsten Video. 17. Gegenstände: In Ordnung, also willkommen zurück. In diesem Video werden wir das Element Sprache erstellen, wo, wenn der Administrator auf diese Ansicht alle Elemente klickt , sollte es ihn zu allen Elementen mit allen Informationen, die er bearbeiten kann, direkt sein . Also lasst uns weitermachen und damit beginnen. Aber zuerst, bevor Sie etwas tun, das nur die Farbe davon ist und es platziert, platzieren Sie es auf der tatsächlichen Admin-Seite. Also werde ich eine neue Datei erstellen. Und das wird die Admin-Seite sein oder die, ja, also denke ich, es macht Sinn Admin für die EJS. Und in diesem Fall werden wir die haben. Und natürlich fangen wir an, die Gegenstände genau hier zu bauen. Das erste, was wir erstellen werden, ist ein Formular. Und danach müssen wir die Containerflüssigkeit erzeugen. Und dann gefolgt von vielleicht der Reihe. Und dann natürlich der Kanon. Aber vorher fügen wir etwas Polsterung hinzu, also vielleicht B5. Und jetzt sind wir gut. Wir können mit der Erstellung der Karte beginnen. Und ich dachte, einfach einen kalten Körper zu schaffen. Und im Skype, Kumpel, werde ich den Hintergrund haben, Licht und rechtfertigen Content-Center. Und jetzt beginnen wir mit dem Bau der ersten Reihe, dann die Säule große drei. Und das erste, was wir hinzufügen werden, ist das Bild. Also vielleicht Bilder oder Schrägstriche Bilder. Und erwähnen Sie eine, dass Sie Vg, dpi JPEG. Und natürlich gehen, um den Stil hinzuzufügen. Die Anzeige sollte also inline-Block sein. Die Höhe. Vielleicht könnten 15 Pixel gut sein. Es tut mir leid, 15 Uhr. Und die Breite wird auch 15 RT m betragen, und das ist im Grunde für das Bild. Lassen Sie uns eine weitere Unterteilung für den Text erstellen. Und in diesem Fall werde ich einige Planung haben, bevor und erkennt Zentrum. Und dann beginnen wir mit der Erstellung der Zeile. Dann haben wir die Kolumne Sex. Und natürlich werden wir die Eingabe zu bearbeiten haben. Dieser Typ sollte also Button sein. Und natürlich die Idee, die dazu benötigt wird und die Klasse btn, btn Warnung. Und dann PY zwei. Und schließlich, nachdem Sie mit dieser Eingabe fertig sind , müssen Sie eine weitere Codespalte von sechs erstellen, die die tatsächliche Schaltfläche vom Typ submit enthält. Und in diesem Fall machen wir es vorerst deaktiviert. Vielleicht werde ich nächsten Sommer begrenzen. Nur für die Skripte, werden wir erstellen. Also sei die n, sei zwei btn Warnung und dann natürlich auch viel. Also das ist es für den ersten. Wenn wir fortfahren und aktualisieren, werden wir etwas haben, das so aussieht, aber wir haben vergessen, die Schaltflächen hinzuzufügen. Also genau hier müssen wir hinzufügen, zuerst haben wir den ersten Knopf, der dies ist. Und in diesem Fall werde ich die Schaltfläche Senden haben. Wenn wir zurückgehen und Refresh drücken, werde ich etwas haben, das so aussieht. Aber wir haben immer noch diesen Knopf. Und in diesem Fall, es tut mir leid, wir müssen es als Knopf hier machen. Also sollte die Pfeife eingereicht werden. Und wie üblich, vielleicht id. Wir machen es hinzugefügt und deklariert dann das Ende BD und Warnung. Wie üblich und PGY2. Lassen Sie uns dies löschen und innerhalb dieser Schaltfläche werden wir bearbeiten. Das ist also ein im Grunde haben wir das Bearbeiten und Einreichen. Und natürlich ist die Bearbeitung nicht deaktiviert, aber die Schaltfläche „Senden“ ist deaktiviert, weil wir nichts geändert haben, um zu senden. Und das ist, wie es aussieht, dass das Bild, und jetzt müssen wir die Informationen hier hinzufügen. Also lasst uns weitermachen und mit ihnen anfangen. Wir haben noch, wir haben bereits die Säule große drei erstellt. Also, was wir tun werden, ist die Spalte große 9 zu verkaufen haben neun zu schaffen. Und in diesem Fall ein Salz mit der Strömung. Dann haben wir Kolumnensex. Und natürlich werden wir das Etikett für den Namen haben, vielleicht Produktnamen. Und dann gefolgt von der Division, die Eingabegruppe und MV3 ist. Und dann natürlich die tatsächliche Eingabe des Typs Text. Natürlich sollte der Name benannt werden und der sollte zunächst deaktiviert werden. Und natürlich sollte die Klasse gebildet, kontrolliert werden. Und dann folgt die ID des nächsten Semesters. Und das ist die Idee, dass wir JavaScript verwenden können. Und das ist, es ist im Grunde gehen Sie voran und viel Glück. Wie Sie sehen können, haben wir den Produktnamen und es ist für jetzt deaktiviert. Also das ist es für den Produktnamen. Lassen Sie uns fortfahren und kopieren Sie es mehrmals. Oder die anderen Informationen. So Produkt, vielleicht das Bild. Und dann haben wir die Produktkategorie. Und dann haben wir natürlich die Produktmarke. Und lassen Sie es uns noch einmal kopieren. Also hier haben wir das Produkt, vielleicht Menge. Und jetzt, wenn du zurückgehst und auf „Aktualisieren“ klickst, wirst du so etwas sehen. Lassen Sie uns diese Produktmenge von hier entfernen und direkt hier platzieren. Also werden wir das entfernen. Und wir wissen, in einer neuen Straße ist eine neue Farbe zu schaffen. Und in diesem werden wir die Produktmenge haben. Und vielleicht haben wir den Bildnamen hinzugefügt. Vielleicht lassen Sie uns den Preis und die Größe hinzufügen. Also lassen Sie uns Basisprodukt Preis und Produktgröße. Und ich denke, das sind alle Informationen, die wir brauchen. Wir haben vier mal vier. Oh, okay, also haben wir die Beschreibung vergessen. Es denkt also, diese Basis hier zu entfernen. Und dann natürlich, fügen Sie die Produktbeschreibung direkt hier hinzu. Das ist es also. Wenn ich zurückgehe und auf Refresh klicke, können wir etwas haben, das so aussieht. Und das ist es im Grunde für die Artikel, wir werden mehrere Elemente haben, die aussehen, dass, sieht so aus. Und was wir tun werden, ist ein paar Werte hinzuzufügen. Zum Beispiel haben wir den Produktnamen in diesem, gibt es den Wert, vielleicht Johnson ist, vielleicht die Produktbeschreibung, die tiefen Wert von Lorem, ipsum haben , und dann kann die Produktkategorie Shampoo sein. Also Wert Shampoo, Produkt, Marke, Wert, Johnson. Und natürlich, Produkt pro Menge, die wir haben vielleicht lassen Sie uns 20. Produktpreis wird vielleicht $15 sein, und Produktgröße wird 200 Milliliter das Bild sein. Der Wert sollte also Schäden Dimension 1 bis GBG sein. Und jetzt, wenn ich zurückgehe und aktualisiere, werde ich alle Werte hier haben. Allerdings müssen wir noch die Schaltfläche Bearbeiten erstellen. Also, wo immer wir auf hinzugefügt drücken, alle diese, einer der Eingänge sollte sich drehen, nicht deaktiviert zu werden und dann können wir sie ändern. Und wann immer wir auf „Submit“ drücken, sollten sich alle diese in unserer Datenbank ändern. Diese Aufgabe sollte jedoch ein Abfluss zurück und, und Datenbankaufgaben sein. Und im Moment müssen wir sie immer noch einfach nicht deaktivieren, wenn wir diesen Editier-Button übergeben. Lassen Sie uns also voran gehen und einen Deskriptor erstellen, den wir verwenden werden. Also gehen wir den ganzen Weg runter bis hierher. Und nach dem Formular werden wir das Skript haben, das vielleicht der Typ sein wird. Also hier, lassen Sie uns den Typ hinzufügen, der Text JavaScript ist. Und beginnen wir mit der Erstellung des Dokuments und bereit, bereit, in dieser Funktion, was der andere Fall ist. Also haben wir die Bearbeitung, die die ID unseres Edit-Button ist. Und natürlich auf Clink , muss diese neue Funktion öffnen. ändert oder entfernt das Attribut dieses Zeichens aller Informationen, die wir haben. Aber wir haben vergessen, diese Klasse hier hinzuzufügen. Also dachte ich, es hier hinzuzufügen. Lassen Sie uns für alle Informationen auf einmal hinzufügen. Also lassen Sie uns die fremde Kontrolle voran und öffnen sie und fügen den Buchstaben F hinzu. Und das ist die Klasse, die wir benutzen werden. Also hier werden wir die Klasse F haben, und wir werden dieses Attribut von deaktiviert aus dieser Klasse entfernen. Das ist es im Grunde für diesen und natürlich für die Klasse oder die ID einreichen. Wenn wir auf Senden klicken, sollte es sie deaktiviert und tatsächlich das deaktivierte Attribut hinzufügen. Also machen wir es jetzt, und ich erkläre es, sobald ich es getan habe. So einreichen und natürlich DoubleClick. Wir haben die Funktion und dann müssen wir auch Punkt, oder das ist die ID. Also nächsten Gipfel und dieses Attribut, werden wir deaktiviert hinzufügen. Dieser Abel. Und das sollte deaktiviert werden. Das ist also nicht im Grunde für diesen hier. Und natürlich, wenn wir zurückgehen und aktualisieren, wenn ich auf diese Bearbeitung drücke und diese sind jetzt offen. Immer dann, wenn wir auf die Einreichung drücken, sollten wir in der Lage sein, auf die Einreichung zu drücken. Zurück hier bemerken wir, dass wir die Klasse F nicht hinzugefügt haben. Jetzt gehen wir zurück und aktualisieren. Und wie wir sehen können, wenn ich auf Bearbeiten klicke, habe ich alle Informationen, die ich bearbeiten kann. Und sobald ich es ändern, sagen wir Johnson Baby-Shampoo und klicken Sie auf einreichen. Wir können sehen, dass wir es geändert haben. Aber im Moment, da wir verwenden, verwenden wir kein Back-End. Es wird nicht geändert, sobald die Seite aktualisiert wurde. Also das ist es im Grunde für diesen. Und wir werden diesen Artikel von Gott für mehrere Gegenstände verwenden, tatsächlich für alle unsere Artikel, sobald wir unsere Website fertig sind. Also jetzt gehen wir weiter und legen Sie sie in das Element, das EJS-Elemente, aber EJS. Jetzt gehen wir zurück nach Hause. Gehen Sie zurück zu unserem Formular. Lass es uns holen. Und natürlich werden wir dieses Drehbuch haben. Also lassen Sie uns all diese grundlegenden hier kopieren und dann von hier gelöscht. Und natürlich müssen wir den Header hier hinzufügen. Also hier haben wir unseren Header und jetzt sind unsere Artikel DJ als Datei fertig ist. Das ist also, es ist eigentlich für das Element, also EJS. Im nächsten Video müssen wir die Anmeldemethode erstellen. Und das ist eigentlich das Letzte, was wir erschaffen werden. Und natürlich wissen wir nicht, ich muss unser Projekt vergessen, das nach dem Anmeldewert präsentiert wird. Das ist also das Ende dieses Videos. Wir sehen uns den nächsten. 18. Anmeldung: Hallo und willkommen zurück. In diesem Video werden wir die Anmeldeseite erstellen. Also lasst uns voran gehen und damit beginnen, genau hier zu beginnen. Das erste, was wir erstellen werden, ist der Abschnitt. Und in diesem Fall muss ich einige Klassen hinzufügen. Also, wenn der erste Kontakt nur für später und etwas Polsterung ist. Und dann natürlich die Containerflüssigkeit, gefolgt von der ersten Überschrift, die der eigentliche Name unserer Website ist. Also werde ich einige Klassen wie Text dunkel, vielleicht Text, Großbuchstaben und Rand, untere vier und Textmitte hinzufügen . Also, das sind unsere Klassen und vielleicht fügen Sie E-Commerce-Website. Also das ist es für die Überschrift. Jetzt fangen wir mit unserer ersten Reihe an. Und ich werde das Justify-Content-Center wie gewohnt hinzufügen und vielleicht mit der Erstellung der ersten Spalte beginnen. Und in diesem Fall wird es die Spalte groß nach vorne und Spalte mittel 54 klein nehmen. Ich werde es sechs Summen machen müssen. Vielleicht. Etwas Polsterung auf der Unterseite für die Route, Boden ist dunkel. Und ich werde die Box hinzufügen und das ist für das CSS später. Das ist es also für unsere Kolumne. Ich muss ein Formular hinzufügen. Und dann in dieser Form werde ich eine Zeile mit einem Rand oben von drei erstellen. Also jetzt gehen wir zurück und sehen, was Sie für jetzt erstellt haben, wenn wir unsere Seite aktualisieren, werden wir eine kleine Box mit dem E-Commerce-Website-Titel haben und entscheiden diese Box. Wir müssen ein, B, den Vornamen, Nachname, E-Mail-Adresse,Passwort und natürlich den Anmelde-Button hinzufügen B, den Vornamen, Nachname, E-Mail-Adresse, . Also das ist es im Grunde, Lassen Sie uns voran und beginnen Sie mit der E-Mail-Adresse. Also für Spaltenmedium Sex und einige Polsterung auf der Y-Achse müssen wir das Label für den Vornamen erstellen. Und dann wird die Klasse Vorname beschriftet werden. Und dann müssen wir die Eingabe des Typs Text erstellen, gefolgt von einigen Klassen wie Fremdsteuerung. Wir haben auch MY zwei sein und das ist die Eingabe für CSS und vielleicht Name, FirstName. Gehen wir zurück und erfrischen wir uns. Und wie wir sehen können, haben wir diesen Vornamen mit diesem auf dieser Seite, oder kurz nach dem Vornamen. Allerdings benötigen wir unseren Vorname, um die Textfolie zu haben. Was wir also tun werden, ist, all dies innerhalb des CSS zu verwenden. Also, jetzt gehen wir voran und kopieren das und vielleicht noch ein paar Male. Vorname, vielleicht noch ein anderes vielleicht für den Nachnamen. Ja, ich denke, das würde Sinn ergeben. Und Nachname. Und hier müssen wir den L-Namen anstelle von Pfadname hinzufügen. Und wie Sie sehen können, haben wir Vorname, Nachname. Lassen Sie uns diesen Namen einfach hier löschen. Und ich denke, wir sind jetzt gut. Lassen Sie uns eine weitere Zeile erstellen. Und in diesem Fall wird diese Zeile eine Division mit einer Formulargruppe und etwas Polsterung wie üblich unterstützen. In diesem Fall muss ich ein Etikett für die E-Mail hinzufügen. Dies ist also für E-Mail und Klasse wird beschriftet. Und das wird das Etikett als E-Mail-Adresse haben. Und wir haben die E-Mail vom Typ, die Eingabe des Typs E-Mail, die Klasse, wäre es für die Kontrolle wie üblich? Und dann haben wir einige Marge auf y2, b2, und Eingabe und Name, vielleicht Benutzername. Und das ist es im Grunde für die eigentliche E-Mail-Adresse. Und lassen Sie uns das kopieren, fügen Sie es noch einmal für das Passwort ein. Also hier, anstelle der E-Mail-Adresse, werde ich ein Passwort hinzufügen müssen. Und natürlich sollte der Typ hier sein, Passwort. Und schließlich der Name. Das wäre das Gleiche. Also das ist im Grunde gehen wir voran und aktualisieren Sie es. Und wie wir sehen können, haben wir unseren Vornamen, Nachnamen, E-Mail-Adresse, Adresse und Passwort. Lassen Sie uns sie jedoch einfach mit dem Textlicht hier anpassen. So leicht, Lasst uns zurückgehen und erfrischen. Und wie wir sehen können, haben wir unsere vielleicht Anmeldeseite bekommen. Und das letzte, was wir erstellen werden, ist die eigentliche Schaltfläche, um sich anzumelden. Also gehen wir zurück. Nachdem ich diese Division erstellt habe, muss ich eine andere Division mit einigen Klassen wie dem Raster erstellen. Und dann sollte die Lücke sein, Y2 zu sein. Und jetzt sind wir gut. Wir können unsere tatsächliche Schaltfläche vom Typ senden erstellen. Dann haben wir die Brille, wir haben DBT, und vielleicht werden wir B2 erschaffen. Machen wir es fett Text, Großbuchstaben. Und dann haben wir den Submit-Button, und das ist für das CSS. Dann haben wir Textlicht. Und natürlich werden wir hinzufügen müssen. Also das ist es im Grunde, wenn ich vorgehe und es aktualisiere, dann habe ich etwas, das so aussieht. Also dachte ich vorerst, dass wir CSS nicht verwenden werden. Lass uns das vielleicht als gelb machen. Also, BTN, BTN Warnung. Und ich denke, wir sind gut. Gehen wir zurück und schauen es uns an. Wenn wir es aktualisieren, haben wir diese Schaltfläche, um sich anzumelden. Oder vielleicht schaffst du es auch Gefahr. Und gehen wir zurück, erfrischen wir uns. Und ja, ich denke, es sieht besser aus. Also das ist es für die Anmeldeseite. Das ist alles besteht. Wir haben nur das hier und die Fußzeile. Also gehen wir zurück und fügen Sie alle diese in unsere Anmeldung, die EJS-Datei. Das ist also der Abschnitt. Dann muss ich das hinzufügen. Und lassen Sie uns eine neue Datei erstellen. Und das wird unterzeichnet werden, dass die JS und eine Hälfte all dies. Und jetzt sind wir fertig mit diesem Projekt. Wir haben immer noch einen Schritt. Und das wird das eigentliche Projekt sein, das Sie auf Erstellen gehen. Und wir schauen uns das im nächsten Video an. So sehen wir uns dann. 19. PROJEKT: Hallo und herzlichen Glückwunsch, wenn du es so weit geschafft hast. In diesem Video werden wir unser Projekt besprechen. Das Projekt geht also darum, die Bestellseite zu erstellen. Als wir den Euler oder den Admin-Strand kreierten, hatten wir etwas, das so aussieht. Wir haben die Bestellungen Gesamtpreis, Titel. Dies ist der Name des Benutzers. Dann haben wir den Ort, das Datum oder eine Nummer. Und Sie haben auch etwas, wo wir darauf klicken können, um den vollständigen Euler zu sehen. In diesem Fall, wenn wir auf diesen Hippel-Befehl drücken, sollte es uns zu diesem führen. Und wie Sie auf dieser Seite sehen können, haben wir die vollständige Bestellung eines bestimmten Benutzers. In diesem Fall ist der Name des Benutzers, wie ist dies das Standortdatum für eine Nummer? Und hier haben wir die Gegenstände. Und es war zufällig, dass ich dir nur Artikel von Baby Johnson bestellt habe und deren Preise sind 12. Und wie wir sehen können, 3 mal 12 haben wir 36 genau hier. Das ist also die Idee. Die Idee dieses Projekts ist es, einfach zu erstellen. Dies kann ein Leitfaden sein, um die Benutzerinformationen und die Reihenfolge des Benutzers auch anzuzeigen. Und Sie können auch dieses Zitat hinzufügen, das wir in der Admin-Seite direkt hier erstellt haben , nur um es auch zu visualisieren. Und natürlich, wenn ich darauf drücke, sollte es mich automatisch zum nächsten Benutzer bringen, der Bestellnummer 2 ist. Aber all dies, wir werden sie in der nächsten Klasse zu tun, wann immer, wo wir mit dem Backend dieser Website arbeiten werden. Damit das gesagt wird, ist dies das Ende unseres Projekts für den Moment. Ich hoffe, Sie genießen es und viel Glück, diesen Teil davon zu schaffen. Wenn Sie Fragen haben, zögern Sie nicht, mich im Diskussionsteil zu fragen und vergessen Sie bitte nicht , Ihre Projekte im Projektbereich hinzuzufügen, um Ihnen mein Feedback zu geben. Ich hoffe, Sie haben dieses Projekt genossen und viel Glück.