Ein kompletter Leitfaden für moderne Websites mit Drupal 8 und Bootstrap 4

1. Eine Einführung in den Kurs: Willkommen zu diesem Kurs über den Aufbau moderner Websites mit Drew Pilate und Bootstrap für Auf dem Weg, werden wir in Drew Pols, Inhaltstyp, System, Ansicht, System, Block System, und so viel mehr wird in den Code gehen und beginnen, Zweig Fläschchen Thema. Wir schauen uns CSS an und binden alles zusammen mit dem Google Chrome Web Inspector. Aber zuerst möchte ich mich vorstellen und Ihnen ein wenig über meinen Hintergrund erzählen. Mein Name ist eine Neun, und ich werde Ihr Lehrer während dieses Kurses sein. Wenn du es nicht an dem Foto erkennen kannst. Ich bin Entwickler und Designer. Ich betrachte mich auch als lebenslanges Lernen und fühle, dass lebenslanges Lernen eine Fähigkeit ist, die jeder in den Bereich Design und Entwicklung einsteigen sollte. Ich habe einen Bachelor of Science in Web und interaktiven Medien, was im Grunde bedeutet, dass ich meinen Bachelor-Abschluss in Design, Entwicklung und Marketing für das Web absolvierte. Bevor ich anfing, online zu unterrichten hatte ich eine fünfjährige Karriere in Droop, Allow und Hochschulbildung. Während meiner Zeit in der Hochschulbildung war ich in über 50 High-Impact-Web-Design- und Entwicklungsprojekten beteiligt und hatte einen kurzen in der Graduiertenschule, wo ich studierte, um einen Master of Education zu verdienen. Glücklicherweise konnte ich das nicht beenden. Allerdings habe ich immer noch die Fähigkeiten, und ich fühle, dass mein Bachelor-Abschluss als auch. Aziz, meine Erfahrung in der Forschung und Arbeit und Hochschulbildung macht mich einzigartig qualifiziert, um Web-Entwicklung online zu unterrichten. Ohne weitere Umschweife, Lasst uns direkt eintauchen und loslegen. 2. Projektressourcen: bevor wir anfangen, über Drew Pool und Bootstrap zu lernen, denn ich wollte Ihnen zeigen, wo Sie die Kursdateien herunterladen können, um dieses Video zu vervollständigen. Siri Also, wenn Sie auf dieser Lernseite sind hier und Sie nach unten gehen, stellen Sie sicher, dass Sie auf Projekte und Ressourcen sind, und Sie werden eine Website ZIP-Datei namens Elaine sehen. Innerhalb dieser Zip-Datei wird buchstäblich der gesamte Inhalt und alles, was Sie brauchen. Teoh füllen Sie diesen Kurs einen optionalen Schritt, und eine andere Sache, die Sie benötigen, die nicht Inhalt ist ein Web-Host. Also habe ich tatsächlich ein Skill Share-Video, wie man Hosting und eine Entwicklerumgebung mit Site-Boden einrichtet. Wenn Sie also zum Skill Share gehen und eintippen, warum Sie Rupel eine Einführung verwenden sollten, finden Sie dieses Video hier. Und so wollte ich Ihnen das nur aufmerksam machen. Falls Sie keinen Webhost haben, beginnen Sie komplett von Grund auf neu. Dies geht im Detail darüber, wie ich die Entwicklerumgebung aufgebaut habe, die ich benutze, um diese Website auszubauen , die wir in diesem Kurs durchlaufen werden, und es gibt so ziemlich überall Links, um Boden zu zitieren. Alles klar, vielen Dank. Und ich werde dich im nächsten Video sehen. 3. So schaffst du unsere development: Hallo. Willkommen zurück in diesem Video. Wir werden die Schritte, die Sie ergreifen müssen, um Ihre Entwicklungsumgebung einzurichten . Es gibt viele Möglichkeiten, eine Entwicklungsumgebung einzurichten, und ich werde einige von ihnen betrachten, die ich in diesem Video empfehle. Ich zeige Ihnen auch meine Entwicklungsumgebung für diesen Kurs. Sie sind herzlich eingeladen, ihm zu folgen, aber das müssen Sie sicherlich nicht. Das ist nur irgendwie, um sicherzustellen, dass da etwas ist. Dies ist kein Kurs zur lokalen Entwicklung oder Einrichtung in einer Entwicklungsumgebung. Es ist ein Kurs auf Drew Pool. Aber ich wollte sicherstellen, dass ich dir etwas gegeben habe. Zuerst benötigen Sie einen Texteditor oder eine I. D E-unabhängige Entwicklungsumgebung. Mein empfohlenes I D E. Und der, den ich diesen Kurs verwenden werde, ist Visual Studio Code oder V s Code. Das nächste, was Sie brauchen, ist ein Terminal oder eine Befehlszeile. Es gibt eine Befehlszeile. Es heißt Terminal auf Mac. Das kommt Standard, Und wenn Sie Ihre eigenen Fenster haben Sie auch Befehlszeile, Dies ist jedoch eine bessere Option. Meiner Meinung nach ist das hyper, und, ähm, es kommt mit vielen Möglichkeiten, dieses Terminal zu machen, was immer Sie wollen. Dasselbe gilt für Visual Studio-Code, so dass Sie sich entscheiden können, hyper zu erhalten. Es gibt andere Optionen, wie ich Terme, die großartig sind, aber das ist diejenige, die ich benutze. Und das nächste Werkzeug, das Sie benötigen, ist der Teil dieses Videos, der am meisten variiert. Und das ist etwas, um Ihre lokale oder Ihre Entwicklung zu tun. Also offensichtlich wirst du Code darauf schreiben. Wie viel von dem, was Eliza droop, viel von dem, was wir tun werden, ist durch eine Web-Schnittstelle. Also für mich, was ich benutze, ist Standort Boden und Standort. Ground verfügt über einen Ein-Klick-Installer, der mit einer Staging-Domain oder einem Staging-Euro geliefert wird. Ich habe einen ganzen Kurs, wie man das einrichtet. Hier drüben ist das Geschicklichkeitsanteil. Ah, es ist Nummer drei. Das wird rüber gehen. Ähm, Was wir nicht wollen, dass dies über die Installation mit Skill Share gehen wird. Entschuldigen Sie mich? Wie wird dies über, wie dio installiert Rupel mit Standortgelände gehen und es gibt auch ein Video in hier Einrichten Sie sich für den Erfolg. Das geht über mehr dieser Optionen, also ja, überlegen Sie definitiv, das auszuchecken. Wenn Sie nicht mit dem Gelände gehen wollen, ist das völlig okay. Sie haben eine Menge von Optionen, die alle schnell berühren hier, wenn Sie eine andere Route gehen wollen . Ähm, hier, ich werde sicher sein. Teoh, füge das in der Beschreibung hinzu. Dies ist ein Artikel von Low Baht, wenig über die ist eine wirklich eine Klasse A Drew Pool Shop. Sie leisten eine Menge gute Arbeit, und dies ist eine ziemlich umfassende Runde all der verschiedenen Möglichkeiten, die Sie verwenden können zog Menschen lokal kostenlos auf Ihrem Computer. Also empfehle ich dringend, dies zu überprüfen. Ich habe eine Menge der Optionen hier verwendet. Viele dieser Luft, fortgeschrittenere Optionen. Dies ist ein Kurs darüber, jemanden bereit zu machen, Rupel zu verwenden. Aber das ist hier. Also haben Sie es für den Fall, dass Sie nicht zahlen wollen. Ich glaube, es ist wie mit meinem Link. Ich denke, es sind $3 im Monat. Ähm, es lohnt sich, denn irgendwann werden Sie Teoh Ihre Website hosten lassen, und Zyklon macht es wirklich einfach, aber wenn Sie wirklich kein Geld ausgeben wollen, verstehe ich das völlig. Und es gibt unzählige Möglichkeiten, oder? Schauen Sie sich diesen Lobato Artikel an und schauen Sie sich dann auch Acquia Dev Desktop an , der eine unglaublich beliebte Lösung innerhalb der Dribble-Community für lokale Entwicklung ist . Ich benutze das nicht. Es ist nur in meiner vorherigen Organisation, wo ich gelernt habe, Drew Leute zu benutzen. Ich musste irgendwie den harten Weg damit lernen. Ich definitiv eine Menge virtueller Maschinen benutzt, aber ich hatte auch einen internen Dienst, der die Seite machte, wo ich hatte, wie ein, ähm, ähm, Staging-Mädchen auf einem Server, den ich besaß und verwaltete. Also ich einfach Es ist nicht, weil ich Acquia Dev Desktop nicht mag. Ich hatte nur nie benutzt, ich musste es einfach nicht benutzen. Das ist also sehr beliebt zum Download, und ich bin sicher, es gibt hier viele wirklich gute Dokumentation, um loszulegen. Wenn Sie diese Route gehen möchten, sobald Sie den s Code installiert haben, müssen Sie Teoh eine Erweiterung einrichten. Also, wenn du runtergehst, bist du vielleicht hier. Wenn Sie zum Erweiterungssymbol gehen und Sftp eingeben. Du kannst sie sehen. Ich habe es schon. Willst du weitermachen und installieren, dass du das getan hast? Sie werden wollen, Teoh do Befehl shift P und geben Sie sftp config ein und Sie werden Ihre efs setzen Entschuldigen Sie mich und Sie werden Ihre FTP-Informationen in diese Konfigurationsdatei setzen. Ich werde es nicht öffnen, weil es Ihre Informationen im Klartext zeigt. Und das wäre einfach nicht sicher für mich, das zu tun. Also, ja, also wirst du auf jeden Fall Teoh wollen. Stellen Sie sicher, dass Sie den Befehl shift P-Typ in der sftp config drücken. Richten Sie Ihre sftp Anmeldeinformationen ein und was Sie dann tun können, ist tatsächlich auch sftp zu verwenden. Zeigen Sie den von Ihnen verwendeten Entwicklungsserver an. Da ich Site Ground verwende, habe ich mein sftp so eingerichtet, dass es so ist, dass es das Droop-Will-Verzeichnis auf meinem Website-Bodenserver trifft und was uns das erlaubt, ist jede Theme-Datei herunterzuladen, die wir benötigen könnten. Bearbeiten Sie es und dann, wenn wir drücken, speichern Sie es tatsächlich hochlädt. Okay, Sobald Sie die gesamte benötigte Software herunterladen und diese Einrichtung erhalten, fühlen Sie sich frei, auf das nächste Video zu bewegen und ich werde sehen, ihre 4. Installation der Bootstrap 4: alle Rechte. Willkommen zurück in diesem Video werden wir das Bootstrap vier Thema installieren wird auch die Add-minimal-Admin-Theme installieren, und ich werde über, was das bedeutet. Aber zuerst, lassen Sie uns einfach voran und legen Sie die grundlegende Website-Konfiguration einige der grundlegenden Informationen. Also im Moment, wenn Sie von meinem vorherigen Kurs über Skill-Anteil folgen, ähm, habe ich das nur auf ähm, einige Test-Info gesetzt. Also lasst uns das ändern. Wir bauen eine vegane Bäckerei namens Elaine. Wenn wir also einfach auf Konfiguration klicken und zu den grundlegenden Seiten gehen, ist Einstellungen unter System, lassen Sie uns den Namen der Website ändern, auch Elaine und wird den Slogan zum besten veganen Essen machen. Offensichtlich setzen Sie Ihre E-Mail und lassen Sie uns fortfahren und speichern Sie die Konfiguration. Okay, dann, wenn wir zurück zur Seite gehen, können Sie sehen, dass wir den Namen und den Slogan gesetzt haben. Großartig. Als nächstes wir einen Blick auf das Admin-Thema. In Drew Pull haben Sie also zwei Themen. Sie haben ein Website-Thema, das ist, was Sie hier sehen. Das ist Bartek. Bartek ist das Standard-Thema, das Schiffe zurückgezogen Menschen, und Sie haben auch ein Admin-Thema. Also, wenn wir fortfahren und klicken Sie auf Inhalte. Sie können dieses Fenster hier sehen. Dieses Backend ist das Administrationsthema. Dies ist das Standard-Admin-Thema, das Schiffe zurückgezogen, pally. Also, wenn wir zu navigieren, um Konfiguration alle diese Fenster oder einen Teil des Admin-Thema erweitern Nun, ich denke, das ist schön, aber ich bevorzuge etwas ein bisschen moderner. Also werden wir in meinem installieren, was ist,meiner Meinung nach, meiner Meinung nach, das beste Admin-Thema verfügbar in Triple. Und das ist minimal hinzufügen. Also werde ich es hier unten bringen, so dass Sie es sehen können, die bei Project Slash gefunden wird minimales Thema hinzufügen . Sie können auf der Projektseite sehen, dass dies als modernes Thema vermarktet wird, und das kann ich definitiv bezeugen. Ich habe dieses Thema viel in diesem Video verwendet. Wir gehen Teoh, verwenden Sie die einfache Methode für die Installation eines Themas. jedoch Im nächsten Video werde ichjedochModule installieren, die mehr als eine Option für die Installation bieten. Da wir gerade hier anfangen, macht das Sinn, dass wir diese Art der grundlegenden Art und Weise installieren, also lasst uns einfach voran gehen und das tun. Also auf der Anzeige Minimal Theme-Seite. Wenn Sie bis zum Ende der Seite gehen, auf der Downloads steht, sehen Sie eine Release-Nummer. Dies ändert sich basierend auf Sicherheitsupdates Andrew People. Aber im Grunde, für jetzt, was wir brauchen, ist nur das aktuellste, und Sie haben zwei Möglichkeiten, die Theme-Datei herunterzuladen. Du könntest einen Teer gebrauchen, oder du könntest den Reißverschluss rausziehen. Wir werden eigentlich nichts davon physisch auf unsere Maschine herunterladen. Stattdessen ist das, was wir tun werden, richtig. Klicken Sie auf Gitarre und gehen Sie nach unten Teoh Copy Link Adresse. Und dann, nachdem Sie das getan haben, werden wir rüber springen, um alle im Menü „Aussehen“ zu hängen. Sie können alle installierten Designs sehen, die wir jetzt haben. Das Administrationsdesign ist sieben, was das Standardthema ist. Lass uns voran gehen und ändern, dass Teoh minimal hatte. Also lassen Sie uns auf diese neue Theme-Schaltfläche installieren klicken, und statt zu laden, lassen Sie uns von Ihrer URL installieren. Denken Sie daran, dass wir diese Link-Adresse kopieren und dies in Tempo und lassen Sie uns auf installieren klicken. Leicht gemacht. In Ordnung, also gehen wir auf die Administrationsseiten, und unsere Arbeit hier ist noch nicht erledigt. Sie können sehen, wir sind immer noch auf dem Standard-Thema. Also lassen Sie uns auf Aussehen klicken, und was wir jetzt tun werden, ist minimal unter der deinstallierten Themes Option zu finden und klicken Sie auf Installieren. Cool. Sie können sehen, dass das hier mit diesem Call-Out-Fenster getan wurde. Also, wenn es installiert ist, sind wir immer noch nicht fertig. Wir haben noch eine Sache zu Dio. Wir werden es nicht als Standard festlegen, da dies das Website-Design, die Homepage und alle anderen Seiten auf der Website minimale hinzufügen würde . Was stattdessen wollen wir nur sicherstellen, dass dies auf den Admin-Fenstern ist. Also lassen Sie uns nach unten gehen Teoh Verwaltung Thema hier unten und lassen Sie uns klicken. Minimal hinzufügen. Stellen Sie außerdem sicher, dass Sie das Administrationsdesign beim Bearbeiten, Kontaktieren oder Erstellen von Inhaltsprüfungen verwendet haben . Lassen Sie uns diese Konfiguration speichern, und wenn alles gut läuft, sollten Sie ein viel verbessertes Admin-Fenster sehen. Also lasst uns hier ein bisschen klicken. Ausgezeichnet. Ich denke, das sieht schöner aus als der Standard, also lassen Sie uns voran und klicken Sie auf die minimalen Einstellungen hinzufügen. Und nur um dies auf Sie aufmerksam zu machen, werden wir nichts davon ändern, aber es gibt definitiv Ah, hier gibt es definitiv viele Möglichkeiten. Also mit dem Admin-Admin-Theme Set, lassen Sie uns voran und installieren Bootstrapped vier, damit wir diesen Look ein wenig moderner machen können . Also lassen Sie uns gehen, um Tochter zu dribbeln Arbeit und ich werde dies wieder nach unten bringen, so dass Sie das URL-Projekt Slash bootstrapped vier dieses Projektthema verwenden sehen können . Ich habe in diesem Kurs Erfolg damit gehabt, daher freue ich mich, es zu empfehlen. Es gibt eine Reihe von Bootstrap vier Optionen und Bootstrap drei Optionen innerhalb des Droop ALS-Ökosystems eine, die ich zuvor verwendet habe und definitiv empfehlen kann, ist Barrio. Das ist sehr gut, wenn Sie daran interessiert sind, in , SAS zu gelangen, was eine Front-End-Kompilierungssprache für CSS ist. Leider ist das ein bisschen zu fortgeschritten für diesen Kurs. Allerdings könnte dieser Kurs ein schönes Sprungbrett in etwas wie Barrio sein. Und tatsächlich, wenn Sie nach der Verwendung in SAS einsteigen wollten, nachdem Sie diesen Kurs durchlaufen haben, hat dieses bootstrapped vier Theme eine Option, SAS direkt von der Benutzeroberfläche zu kompilieren, was wirklich schön ist, weil Sie keine Terminal dafür, ja. Wenn ich dich dabei verloren habe, ist es okay. Wenn du es nicht bist, wenn du neu auf der technischen Seite des Internets bist,ist das okay. Wenn du es nicht bist, wenn du neu auf der technischen Seite des Internets bist, Ähm, aber nur damit du es weißt, das ist hier eine Option. Ordnung, also gehen wir Teoh, verwenden Sie die gleiche Methode, die wir verwendet haben, um das Add Minimal Theme zu installieren. Und ich möchte Sie darauf aufmerksam machen. , Das ist ein Projekt,das nicht unter die Dribble-Sicherheitspolitik fällt. jedoch, Meine Faustregel mit diesem istjedoch,wie Maney Downloads hat es in diesem Fall, es gibt über 5000 Downloads und wie viele Websites verwenden es? Fast 750. Also für mich reicht das. Ich habe Module verwendet, die weit weniger, ähm, Websites haben ähm, und ohne Probleme verwenden. Eine andere Sache, die man sich ansehen muss, sind die Probleme hier, ähm, und wie das läuft. Wenn das Thema oder das Modul eine aktive Community hier im Abschnitt Probleme hat, bin ich im Allgemeinen bequem mit ihm. Dies ist auch ein sehr hilfreiches Fenster. Sollten Sie sich in einer klebrigen Situation befinden, in der Sie sich nicht sicher sind, was auf der Website passiert , können Sie immer auf die Problemtafel für jedes Thema oder jedes Modul gehen und eine Frage stellen. Okay, also mit all dem, gehen wir runter. Teoh die Downloads und klicken Sie mit der rechten Maustaste auf die Tar-Datei, klicken Sie auf Copy Link Adresse und hot back over Drew Pool. Sie können sehen, dass wir immer noch dieses bardische Thema haben, und in einer Minute werden wir das ändern. Droop zu Bootstrap für Entschuldigung. Also lassen Sie uns auf Aussehen und jetzt, was wir tun werden, klicken Sie auf neues Thema installieren und wählen Sie installieren von Ural wieder. Wir werden einfügen und drücken Installieren. Alles klar, sehr nett. Dies wurde getan, um zurück zu den Administrationsseiten und zur Homepage zu gehen. Und wieder einmal ist unsere Arbeit nicht erledigt. Wir sind immer noch auf das Hauptthema hier, so lassen Sie uns zurück zum Aussehen und dieses Mal, was wir dio. Im Gegensatz zu der Anzeige minimalen Theme, können wir auf installieren und als Standard festlegen, so dass dies nicht nur das Thema installieren, sondern es wird auch Bartek als Standard entfernen und Bootstrapped den Standard machen. Alles klar, wenn alles gut gelaufen ist, können wir auf die Homepage gehen und wir werden bereits eine deutlich verbesserte Website haben und wir werden noch eine Sache machen , bevor wir dieses Video abschließen, bevorzuge ich eine leichtere Knickleiste. Also mit diesem Thema, gibt es eine wirklich einfache Möglichkeit, das zu tun. Was ist auf Aussehen klicken und gehen Sie in die Einstellungsoption, Ähnlich wie die ed minimalen Admin-Theme? Es gibt eine Menge verschiedener Optionen in diesem Bootstrap vier Thema. Denn jetzt werden wir einfach runter gehen, um unsere Optionen zu nab. Und lasst uns unter nab unser Thema ändern. Lasst uns das Zehenlicht ändern. Und lassen Sie uns die nab unseren Hintergrund auch auf Licht ändern und speichern Konfiguration. Und wenn wir zurück zur Startseite gehen, können Sie sehen, dass diese Änderung vorgenommen wurde. Und ich ziehe es vor, dass ich denke, das sieht gut aus. Ich hoffe, Sie fanden das klar und prägnant und nützlich. Wenn ja, werde ich Sie auf jeden Fall im nächsten Video sehen, wo wir ein paar Methoden zur Installation von Modulen lernen werden . Wir sehen uns dann 5. Modellen installieren: Hallo, alle. Willkommen zurück in diesem Video, wir werden das Modulsystem in Drew abdecken. Ziehen Sie für unsere Website. Wir brauchen nur ein paar Module. jedoch Ich werdejedochdie beiden Standardmethoden für die Installation von Modulen in Drew Pilate abdecken. Also, wenn wir zu Google gehen und Drew Leute acht Module eingeben, werden Sie ah bekommen, Anzahl der Links, die auf Drew zeigen, zog Orig. Ich empfehle auf jeden Fall, wenn Sie neugierig sind, tiefer zu gehen, wie Module funktionieren, indem Sie diese Links hier überprüfen , können Sie sehen, dass es eine Installationshandbuch gibt. Ich werde das Modulsystem für Sie vereinfachen, damit wir sofort loslegen können. Module sind wirklich, für mich, eng mit Apples IOS APS-Store verbunden. Sie haben also den Satz gehört. Dafür gibt es eine App. Nun, Andrew Pool, es gibt einen Satz in der Gemeinschaft. Dafür gibt es ein Modul, und es stimmt dort. Ich weiß es nicht. Ich denke, 400.000 Module, wir können hier nachsehen. Das Modul projiziert aus. Entschuldigen Sie, 44.000 Modelle. Ähm, das sind immer noch einige, aber wirklich, im Kern des Droop-ALS-Modulsystems, gibt es zwei Teile. Eins. Es gibt Kernmodule So Drew Paul Core. Wir können Drew Paul Core betrachten ist der Code, den Sie herunterladen, wenn Sie sich entscheiden, ein Droop zu bauen , ein Projekt, so dass Sie genau hier sehen können, sind wir auf 8.8 Punkt zwei. Und wenn Sie darüber lesen, gibt es Community-Mitglieder innerhalb der droop alot Organisation, die Drew Paul Core aktiv gepflegt haben . Ordnung, es gibt also einige Kernstücke, die Aled herunterfallen müssen, die Sie haben müssen, um das System laufen zu lassen , und das ist einfach das, was ein Kernmodul ist. Also, das ist Nummer eins. Nummer zwei. Das andere Stück Droop ALS-Modulsystem ist Contribute Module oder beigesteuerte Module, und einfach, was das ist ein Community-Mitglied, das, wer nicht ein Teil der droop ALS-Organisation ist , zog Pull-Dot-Org's schreibt ein Stück Code, der zog Pool erweitert. Das ist eine einfache a zit ISS so viel wie mit Apples IOS App Store, sie sind Entwickler. Utkan entwickeln eine IOS-App. Es gibt hängende Entwickler, und jeder kann dies tun, weil eine Open-Source-Plattform wackelt, und es kostet nicht mehr als $100, um dem Programm beizutreten. Jeder mit Codierungsfähigkeiten kann lernen, wie es ein Coda-hängendes Modul ist. Viele der eingebrachten Module sind zu festen Stützen im Droop-Willen-Ökosystem geworden. Eine, zum Beispiel, hier sind C Werkzeuge von Merlin of Chaos. Er ist eine Art Legende. Dieses C Tools-Modul ist eine Abhängigkeit für wahrscheinlich Tausende von Modulen, so dass das eine Art von Überblick über die beiden verschiedenen Arten von Modulen ist. Eine andere Sache, falls Sie völlig neu sind, ist, dass Sie keine Kernmodule herunterladen müssen. Das möchte ich nur klarstellen, wenn ich nicht im ersten Teil wäre. Wenn Sie also Rupel herunterladen, laden Sie die Kernmodule herunter. Was Sie herunterladen müssen, sind die Contribute-Module, jedes Modul, das Sie benötigen, um die typische Funktionalität von Dribble zu erweitern. Also, wenn wir zurück zu unserer Website hier springen, werden wir einen Blick auf dieses Modul-Panel nehmen und beginnen, Ihre Website in einem höheren Grad anzupassen . Jetzt unter der Menüoption „Erweitern“ können Sie unter der Menüoption „Erweitern“alle Kernmodule sehen, die sowohl installiert als auch aktiviert sind. Wenn es aktiviert ist, hat es ein blaues Häkchen. Wenn es installiert, aber nicht aktiviert ist, wird es angezeigt, aber es wird keine angezeigt, es wird nicht überprüft. Dies ist also wirklich die Engine, die Ihre Drew Puls-Site so ähnlich läuft wie wir die Admin- und Bootstrap-Themen installiert haben . Wir können Module in ähnlicher Weise installieren, also schauen wir uns diese Administrationsleiste hier an, richtig? Wir haben uns im letzten Video etwas vertraut gemacht, aber ich habe bemerkt, dass, wenn ich auf Struktur klicke, es eine Menge Optionen unter Struktur gibt. Im Laufe der Zeit, wenn ich in den Entwicklermodus komme, klicke ich durch diese Menüs ständig auf Struktur klicken und dann auf Inhaltstypen klicken und dann auf Inhaltstyp hinzufügen, der irgendwie mühsam wird Irgendwann. Glücklicherweise gibt es dafür ein Modul. Es gibt ein Modell, das diesen Prozess einfacher macht. Also hier drüben, Drew Bill. Wir haben Dribble Dot Orgs Schrägstrich Projekt Slash Admin-Symbolleiste genau hier, und wir werden mit der grundlegenden Installationsmethode beginnen, die ich fühle, dass die meisten Leute verwenden wenn sie zum ersten Mal dribbeln beginnen. Aber es tut mir leid, dass nicht erklärt wurde, dass die Admin-Symbolleiste alle diese Optionen verfügbar macht , über die wir gerade in einem Hover-Menü gesprochen haben. Also, anstatt klicken Sie auf klicken zu müssen. Ich kann den Mauszeiger über die Struktur bewegen, Maus über Inhaltstypen bewegen und dann auf Hinzufügen klicken, anstatt Struktur gehen zu müssen. Inhaltstypen fügen Inhaltstyp mit der Admin-Symbolleiste stirbt ist es, dass Sie nur einmal klicken müssen, so dass es eine riesige Zeitersparnis ist. Also für auf dieser Seite können Sie sehen, gibt es eine Reihe von Möglichkeiten, das Modul wie jedes andere Modul installiert zu installieren . Und wir werden diese Methode durchlaufen, nachdem ich dir die grundlegende gezeigt habe, denn ich denke, es ist wichtig, beide Seiten zu sehen. So, genau wie wir die Admin- und Bootstrap-Themen installiert haben, werden wir hier einen tar verwenden, um dieses Modul zu installieren. Das ist richtig. Klicken Sie auf und kopieren Sie Link-Adresse, oben zurück über Drew-Pool und klicken Sie, erweitern und dann auf Neues Modul installieren und einfügen. In diesem Link haben wir gerade kopiert. Alles läuft gut. Es wird wieder auf Administrationsseiten installiert, und es gibt noch eine Sache, die wir hier tun müssen, und das ist, wir könnten es eingeben, oder wir könnten einfach danach suchen. Wir müssen überprüfen, um zu installieren, so dass Sie auch diese zusätzlichen Tools wollen. Und sobald Sie diese alle überprüft haben, um nach unten zu gehen und klicken Sie auf Installieren. Okay, perfekt. Und wie wir hier sehen können, wurden zwei Module aktiviert. Und wenn wir den Mauszeiger über Struktur bewegen, können wir sehen, dass wir nur drei Klicks auf eins reduziert haben. Das ist also ziemlich mächtig. Das war also cool. Das ist eine einfache Möglichkeit, ein Modul zu installieren. jedoch Es gibtjedochein Problem. Es gibt ein Problem damit, und das ist diese Idee von Abhängigkeiten. Vielleicht haben Sie mich gerade vor einer Sekunde darüber gesprochen, also ist die Abhängigkeit einfach ein Stück Code, der benötigt wird, um einen anderen Code auszuführen . Ein weiteres Contribute-Modul, das hier benötigt wird, ist das PATH-Auto-Modul. Was Path Auto also tut, ist es in diesem Fall ein Token, den Titel und den Parameter, den Sie einrichten, und ersetzt diese Art von kryptischer Zeichenfolge, diesen kryptischen Alias. Also Path Auto ist einfach Aliase für Ihre Welt, in Ordnung, es ist eines der Dinge, für die wir nicht wirklich viel Zeit verbringen müssen. Sobald Sie es eingerichtet haben, ist es fertig. Aber Sie können hier Drew Pilatus Anforderungen sehen. Also, um für Path Auto Zehenarbeit. Sie müssen Token und Tools installiert haben. Was passiert, wenn wir nach unten gehen und unsere Methode anwenden? Lassen Sie uns die Link-Adresse kopieren. Gehen Sie zurück zu droop klicken Sie auf installieren neues Modul Tempo in, aber wir kopieren es einfach. Drücken Sie Install Sehr cool zurück. Teoh Administrationsseiten erweitern und lassen Sie uns feststellen, dass es nicht unter Kern steht. Lassen Sie uns den Pfad Auto Cool finden. Nun, wir können es nicht benutzen. Wir können es nicht überprüfen, richtig? Es liegt daran, dass, als wir das Modul mit dieser grundlegenden Methode installiert haben, es buchstäblich nur Path auto installiert hat. Es hat die anderen Abhängigkeiten nicht installiert. Denken Sie daran, C Tools und Token, wie wir auf dieser Seite entdeckt haben, sind ihre Abhängigkeiten erforderlich. Der Weg um dies ist also, Module mit Composer Composer zu installieren, ist ein PHP-Paketmanager . Sie müssen nicht wissen, wirklich, wirklich, die Theorie hinter Composer, außer es ist eine Software, die auf Ihrem Server läuft, die es Ihnen ermöglicht, zu gehen und andere Pakete oder Module zu installieren. Um also Composer zu verwenden und Module von der Befehlszeile zu installieren, benötigen Sie entweder Ihre lokale Entwicklungsumgebung eingerichtet oder Sie benötigen einen Server, in den Sie ssh verwenden können. Dies ist kein Kurs in der Befehlszeile. Es ist auch kein Kurs über Entwicklungsumgebungen, aber ich möchte Ihnen Away bieten. Teoh, gehen Sie über die Befehlszeile auf Ihren Server, wenn Sie Site Ground oder einen anderen Shared Hosting Service verwenden . Mit Standortgrund gibt es also einen Entwicklerabschnitt im Abschnitt Tools der Website. Um auf den Server zu gelangen, auf dem Sie Drew pulsate gehostet hat. Sie müssen SSH-Schlüssel einrichten. Und um das zu tun, müssen Sie zu Ihrem Terminal-Fenster springen. In einem vorherigen Video habe ich Hyper-Terminal empfohlen, was Sie hier sehen. Um Ihren SSH-Schlüssel zu generieren, müssen Sie eingeben. Sie müssen einen Befehl ausführen, und das ist nur etwas, das Sie einmal tun müssen. Also, wenn wir Katze ssh tun, ich d unterstrich R s a dot pub. Sie können das Video pausieren und kopieren, dass, wenn Sie hier folgen, ich werde nicht eingeben, weil dies eine Sicherheitssache ist. Aber im Grunde, wenn Sie Enter drücken, erhalten Sie diese große Zeichenfolge, die ein Schlüssel ist, und Sie werden den Schlüssel nennen. Also beim Import arbeite ich an einem I, Mac. Also würde ich diesen Mac nennen, und was wird dann hier erzeugt? Sie werden das kopieren, die ganze Sache und Tempo hier und klicken Sie auf Import. So ist das Schritt eins. Sie müssen also zuerst SSH-Schlüssel einrichten. Wenn Sie diese Methode verwenden, nachdem Sie Ihre SSH-Schlüssel importiert haben, gibt Ihnen Site Ground Ihre SSH-Anmeldeinformationen und Sie können diese hier nicht sehen. Aber das sind die Informationen, die Sie benötigen, um in Ihren Server zu gelangen. Also weiß ich, dass es eine Menge war, einige von euch, die ich vielleicht verloren habe. Fühlen Sie sich frei, diesen Teil des Videos zu überspringen, wenn Sie bereits Ihre Befehlszeile eingerichtet haben oder wenn Sie einfach nicht an dieser Methode interessiert sind. Also mit Ihren SSH-Schlüsseln hinzugefügt und Ihre SSH-Anmeldeinformationen in der Reihenfolge eingerichtet, Teoh, gehen Sie in Ihren Server oder Ihre Box. Was Sie tun müssen, ist diesen Befehl Ssh! Benutzername bei Hostname Dash P, der für Port steht und dann sind Sie eine Portnummer. Cool. Jetzt, da wir dabei sind, können wir die Dateien und alles, was auf dem Server ist, auschecken. Ein Befehl, den Sie nur lernen müssen, ist LS Dash L. A, der alles auf Ihrem Server auflistet. Die andere ist CD, was bedeutet, Verzeichnis ändern. Also werde ich in zu bekommen, wo die Website tatsächlich auf dem Server gehostet wird und lassen Sie uns weiter gehen hier öffentliche HTML perfekt. Und hier ist die Droop Wille Seite, sobald wir im Dribble-Verzeichnis sind. Ich weiß, das war ein langer Prozess, um hierher zu kommen, wir können Teoh starten, diese Module installieren. Was Composer bietet, dass die andere Methode nicht getan hat, ist, dass es nicht nur das Modul installiert, das Sie installieren möchten, sondern es wird auch gehen und jede einzelne Abhängigkeit finden, die erforderlich ist, und das ebenfalls installieren . Also, um zu veranschaulichen, wie nützlich das ist. Wenn wir zurück zu diesem Pfad Auto Beispiel gehen würden, was wir tun müssen, ist daran zu erinnern, dass wir mit der rechten Maustaste auf tar copy link Adresse geklickt und installiert es so. Richtig? Also, was wir tun müssen, ist dann gehen Sie zu Token, klicken Sie mit der rechten Maustaste auf die große Gitarre, kopieren Sie die Link-Adresse und installieren, und wir müssten zurück, dann müssten wir C-Tools mit Rechtsklick tar Kopie finden, Link Adresse und installieren. Aber mit Komponisten, was wir nur buchstäblich dio ist, geben Sie diesen Befehl. So, ähm, Abschnitt des Euro ist, wie Sie auf das Modul zugreifen. Also wird jedes Contribut-Modul am Schrägstrich Projekt Schrägstrich befinden, was auch immer der Name ist. In Ordnung. Also werde ich Path auto hier kopieren und wieder zum Terminaltyp in Composer zurückkehren, erfordern gezeichnet Leute Schrägstrich was auch immer dieser Name ist und drücken Sie Enter. Es dauert eine Sekunde, besonders wenn Sie auf Shared Hosting sind. Und Sie können sehen, was Komponisten tun, ist es zu dribbeln Dot Orgs Es bekommt die Abhängigkeiten. Es stellt sicher, dass alles auf den Servern. Richtig. Und dann wird es schließlich gehen und den Mantel herunterladen, so dass Sie sehen können, erscheinen heruntergeladen, Token und sehen Werkzeuge. Perfekt. Und wenn das aufgehört hat, sollten wir in der Lage sein, zurück zu springen, um zu hängen. Alle gehen zu unserem Modulbereich, erweitern Ah, neu laden. Und wenn wir gehen Teoh Pfad Auto, Da ist es. Siehst du, jetzt können wir es überprüfen. Also, wenn wir nur überprüfen, dass und klicken Sie auf installieren, was ich glaube, passiert ist Droop Will sagt, Hey, Sie müssen in Stalk C-Tools und Token. Möchten Sie, dass wir das für Sie tun? Natürlich. Danke. Und dort können Sie sehen, dass drei Module aktiviert wurden. Es herrscht also Chaos. Installierte und aktivierte Tools. Alles klar, so installieren wir Module. Was wir als nächstes tun müssen, ist nur für dieses Tutorial. Stellen Sie sicher, dass wir die anderen beiden Module installiert haben, die wir benötigen. Wir brauchen keine Stadt mit Modulen, was großartig ist. Also werde ich Ihnen einen anderen Trick des Handels zeigen, und das ist eine Möglichkeit, Module zu verketten. Also, wenn wir Composer benötigen wahrheitsgemäß den Namen dieses nächsten Moduls, das wir brauchen, das ist einfach so zufällig Bootstraps, einfache Pflegezelle. Und dann können wir das so verketten, dass wir so viele Module installieren, die wir auf einmal benötigen. Also im Wesentlichen, was wir hier tun, ist, OK zu sagen, wir wissen, welche Module wir für dieses Projekt benötigen. Installieren wir ihn sofort. Geh aus dem Weg, und dann müssen wir das nicht mehr tun. Richtig? Also werden wir dieses einfache Karussell installieren, das in einem anderen Video sein wird, und wir werden auch einen Modulfilter installieren , der es uns ermöglicht, einen Überblick über unsere Module ein wenig besser zu bekommen. Also lasst uns das richtig machen. Und was passiert ist, dass Sie hier sehen können, dass es nach beiden Modulen suchen und genau den gleichen Prozess durchführen wird, den wir gerade durchgemacht haben. Es wird alle Abhängigkeiten beleidigen, die für diesen Bootstrap, einfaches Karussell sowie diesen Modulfilter erforderlich sind. Und wenn wir hierher zurückgehen, erfrischen wir uns. Lassen Sie uns den Modulfilter überprüfen. Und lassen Sie uns auch überprüfen. Uh, lassen Sie uns Bootstrap einfache Pflege eingeben, also stellen Sie sicher, dass überprüft wird und installieren Sie die Schule. Sie hatten keine Abhängigkeiten. Und jetzt können Sie hier sehen. Wir haben dieses Modul-Fenster mit dem Modul-Filtermodul aufgeräumt, und das hilft uns einfach besser zu organisieren. Wenn wir also nach einem Modul suchen, das wir haben, aber sagen wir, wir wollen nicht mehr, können wir einfach anfangen, das nach unten zu filtern. Alles klar, vielen Dank, dass Sie bei mir in diesem Video bleiben. Es ist nur eines dieser Dinger in Droop. Alles, was wir einmal einrichten müssen, und dann sind wir gut, also hoffe ich, Sie haben ein besseres Verständnis dafür, wie das Modulsystem funktioniert und hoffen, dass Sie die beiden Methoden verstehen, die ich für die Installation bereitgestellt habe. Danke. Und wir sehen uns im nächsten Video. 6. Die Inhaltsseiten erstellen: mit dem kompliziertesten Teil dieses Kurses aus dem Weg, können wir nun endlich anfangen, Elaine Vegan Coffee Shop aufzubauen. In diesem Video werden wir kurz übergehen, was das Content-Typ-System im Drew-Pool ist, und wir werden den Seiten-Inhaltstyp verwenden, um die vier grundlegenden Seiten zu erstellen. Gehen wir also zur Admin-Leiste und lassen Sie uns den Mauszeiger über den Inhalt bewegen. Sie können sehen, dass in Droop erlauben. Sie haben hier die Möglichkeit, zwei verschiedene Inhaltstypen hinzuzufügen. Ein Artikel und eine grundlegende Seite. Beide Optionen sind Inhaltstypen. Konstante Typen können unter Strukturinhaltstypen gut gefunden werden. Lasst uns darauf klicken. Hier finden Sie eine Beschreibung für beide Inhaltstypen, die ausgeliefert wurden. Leute, die Sie hier sehen können, es sagt, dass Basic-Seiten für Sadiq-Inhalte verwendet werden, wie etwa eine US-Seite, wie etwa eine US-Seite, und ein Artikel würde für so etwas wie eine News-Seite oder eine Pressemitteilung verwendet werden. Denn gerade jetzt, wir gehen nur Teoh machen Inhalte aus der grundlegenden Seite Inhaltstyp. jedoch Es wirdjedochein weiteres Video in diesem Kurs geben, in dem wir tatsächlich einen benutzerdefinierten Inhaltstyp erstellen. Wenn wir also einfach auf den Inhalts-Button klicken, erhalten Sie einen Überblick über alle Inhalte, die auf der Website sind. Da wir keinen Inhalt haben, ist dies offensichtlich kein Inhalt verfügbar, also lassen Sie uns voran und erstellen Sie unsere erste grundlegende Seite. Wir können das auf ein paar Arten tun, aber eine davon ist, indem Sie auf die eigentliche Inhaltsseite gehen, auf der wir sind, indem Sie auf diese Schaltfläche Inhalt hinzufügen klicken. Eine andere Möglichkeit besteht darin, die Verwaltungsleiste zu verwenden, die mit vertraut waren An dieser Stelle bevorzuge ich es auf diese Weise zu tun, um Inhalte zu übergehen, schweben, Inhalte und grundlegende Seite hinzuzufügen. Von hier aus werden wir mit zwei Bereichen vorgestellt, die wir verwenden können, um grundlegende Webseiten zu erstellen. Dies sind statische Seiten, was bedeutet, dass das einzige, was in der Seite enthalten ist, ist Text oder Bilder, sogar Video, alles, was in eine grundlegende Webseite eingebettet werden könnte. Also lasst uns die erste Seite dazu bringen, uns zu kontaktieren, und wir werden eigentlich nur den Text der Seite leer lassen für jetzt. Perfekt. Also eine Sache, die, wenn Sie entlang folgen, können Sie bemerkt haben, ist, dass diese Kontakt-US-Seite befindet sich am Schrägstrich Knoten eins. Nun, was wir Dio für Suchmaschinen für S CEO wollen, ist, dass dies sein, kontaktieren Sie uns so. Also im Moment sagt es, eine Seite nicht gefunden, weil wir Pfad Auto nicht eingerichtet haben, Wir haben jetzt keine Aliase eingerichtet. Path Auto, wenn Sie sich aus dem letzten Video erinnern, ist ein Modul, das wir installiert. Also lassen Sie uns voran und konfigurieren, dass, bevor wir anfangen, den Rest dieser grundlegenden Seiten zu erstellen. Also unter Konfiguration, gehen wir nach unten zu suchen und Metadaten und wählen Sie dann u R L Aliase von hier. Lassen Sie uns zum Mustermenü-Link gehen, und lassen Sie uns ein Muster definieren, dem alle unsere grundlegenden Seiten folgen sollen. Also werden wir es tun. Add Path Auto Muster und für Mustertyp wählen Inhalt. Und für dieses Feld, lassen Sie uns durchsuchen. Die verfügbaren Token waren dabei, das Droop ALS Tokensystem zu verwenden, was uns erlaubt, unsere Website ein wenig dynamischer zu machen. Also, unter verfügbaren Token, gehen wir zu Knoten, dann unten hier, wir müssen dies nur einmal einrichten, , so dass es möglicherweise nicht so kompliziert ist, wie es unter hier scheint. Wählen wir Knotentitel und was das ist, wenn Sie sich erinnern, als wir diese Kontaktseite gemacht haben , gab es einen Seitentitel. Nun, wenn Sie Inhalte mit einem beliebigen Inhaltstyp hinzufügen, wird dieser gerade erstellte Teil des Inhalts als Notiz bezeichnet. Was das heißt, ist für den aktuellen Knoten , der, wenn wir das gleiche Beispiel verwenden, die Kontaktseite wäre. Das wäre der Zettel. Der Titel für diesen Knoten wäre, kontaktieren Sie uns. Ich hoffe, das macht Sinn. Und das ist wirklich alles, was wir brauchen. Also, was wir hier sagen, ist, anstatt den Pfad zum Euro-b-Schrägstrich Knoten Schrägstrich Nummer zu machen , lassen Sie uns die mündliche B zum Titel machen. , Okay, also wählen wir die Grundseite aus und lassen Sie uns einfach die Seite benennen. Perfekt. Okay, jetzt, wenn du wieder zum Inhalt gehst und diesen Kontakt mit uns schaut, wirst du hier sehen, dass dieser Alias noch nicht geändert wurde. Was also tun muss, ist zum Inhalt zurückzukehren, wählen Sie dies aus der Tabelle und unter Aktionen aus. Lassen Sie uns Ihren URL-Alias aktualisieren und auf ausgewählte Elemente angewendet. Ok. Und Sie können hier sehen, dass ein Alias angewendet wurde. Gehen Sie runter, um uns zu kontaktieren, und es ist nicht da. Also, was wir brauchen, um dio ist das Geld zu spülen. Also, jetzt, wenn wir zurück zum Inhalt und dann wählen Sie Kontakt uns, Sie können sehen, dass dieser Alias der Euro jetzt auf den Titel der Seite gesetzt wird. Perfekt. Also lasst uns weitermachen und die über uns Seite ausbauen. Also lasst uns zum Inhalt gehen. Fügen Sie Inhalte hinzu. Grundlegende Seite, und wir werden den Titel dieser Seite über machen. Und wenn Sie sich die Shownotizen ansehen, habe ich einen ZIP-Ordner, der alle Testwebsite-Inhalte enthält. Wenn Sie möchten entlang Stück für Stück folgen, so werde ich einfach voran gehen und einfügen und den Inhalt k groß. Lassen Sie uns das speichern und hier gehen wir über Seiten dort. Was ist, wenn wir ein Bild zu dieser Seite hinzufügen wollten? Gehen wir voran und an ihm und wir werden nur einen Zeilenumbruch dort machen. Und in diesem Wiz e Perücken-Editor haben wir die Möglichkeit, ein Bild hinzuzufügen. Also lassen Sie uns darauf klicken, und von hier aus können wir eine Datei von unserer lokalen Maschine wählen und lassen Sie uns den ganzen Text Menschen am Esstisch essen und speichern, dass perfekt. Also jetzt, was wir hier tun können, ist ein Doppelklick auf diese noch einmal und passen Sie es so war es eine Linie nach rechts. Perfekt. Und lassen Sie uns das speichern und sehen, wie das in Ordnung aussieht. Und lassen Sie mich es noch ein Mal hinzufügen. Ich muss damit herumspielen. Es tut mir leid. Nun, lassen Sie mich es nebenan stellen. Und da gehen wir. Okay, jetzt sehen wir mal, ob das ein bisschen besser aussieht. Das wird funktionieren. Keine Arbeit für gerade jetzt. Okay, also gibt es die „Über“ -Seite. Also haben wir die Kontaktseite gemacht. Wir haben die Übersichtsseite gemacht. Lassen Sie uns nun das Menü erstellen. Also noch einmal, Inhalt Grundseite und lassen Sie uns dieses Menü aufrufen. Und wirklich, was ich einmal hier ist, eine Tabelle mit Menüpunkten zu erstellen, aber es gibt wirklich keine Option für uns. Teoh erstellen Sie hier eine Tabelle, so was wir tun können, ist gehen Sie zu diesem Textformat, wählen Sie Option, und lassen Sie uns klicken, dass und wählen Sie vollständige HTML. Was das tun wird, ist ein paar zusätzliche Optionen für uns zu öffnen, und eine von denen einfach so zufällig diese Tabelle ist. Bevor wir also die Tabelle erstellen, lassen Sie uns einige Überschriften hinzufügen. Was ist Art Lebensmittel für die erste Überschrift. Und lassen Sie uns das hervorheben und es zu einem H zwei machen. Sie können Formate aus dieser Option innerhalb der Wheezy Perücke auswählen. Okay, und lassen Sie uns noch eine Pause machen und trinken. Wählen Sie das aus und machen Sie es zu einem Alter, das perfekt ist. Nun, zwischen Essen und Drinks. Lassen Sie uns die Tabelle erstellen, also stellen Sie sicher, dass sich der Cursor zwischen den einzelnen Überschriften befindet, und wählen Sie die Tabellenoption aus. Wir werden eine fünf Zeilen Tabelle mit drei Spalten Header in der ersten Zeile machen. Wir werden die Grenzgröße ausschalten, und wir werden die Breite entfernen und das zusammenfassende Essen machen und OK drücken, jetzt lass es uns runterfallen. Noch eine unter Drinks und lasst uns genau dasselbe tun. Lassen Sie uns fünf Zeilen, drei Spalten, Kopfzeilen in der ersten Zeile machen und die Rahmengröße niederschlagen, nicht die Peitsche nach unten. Und lassen Sie uns diese Zusammenfassung Getränke machen. Und so habe ich alle Inhalte, die Sie benötigen, um diese Tabellen in den Shownotizen auszufüllen . Lassen Sie uns tatsächlich nur durch die Kopfzeilen gehen Erste wird Element, Beschreibung und Kosten für die Kopfzeilen tun . Und dann wiederholen wir das hier unten, Artikelbeschreibung und Kosten. Und lasst uns weitermachen und gemeinsam eins machen. Lass uns über Nacht Chai Haferflocken Stuhl machen. Wer will etwas teilen Haferflocken und lassen Sie uns tun, lassen Sie uns die Beschreibung einfach tun, dass in Tempo . Und die Kosten sind $5 aus Essen Oh, Essen. Ah, lassen Sie uns das für Stylingzwecke fett und lassen Sie uns das kursiv und wir sind fertig. Okay, also werde ich den Rest mit den bereitgestellten Inhalten ausfüllen, und dann werde ich mit dir zurückkommen, und ich werde dasselbe für Getränke tun. Alles klar, ich habe alle Inhalte hinzugefügt, und nur für ein Beispiel haben wir den Tisch unter Getränke kopiert, nur für stilistische Zwecke. Also lasst uns das retten und was passiert? Unser Tisch sieht nicht wirklich wie ein Tisch aus. Es gibt hier kein Styling, und wir würden definitiv nicht wollen, dass dies unsere Speisekarte darstellt, wenn wir eine moderne Website für jemanden bauen würden . Nun, der Grund, warum dies so ist, weil wir Bootstrapped vier als unser Thema installiert haben, aber wir haben keine Bootstrap-Klassen CSS-Klassen hinzugefügt, um dies wie Bootstrap aussehen zu lassen, um es besser aussehen zu lassen. Also gehen wir weiter und gehen durch, wie wir das tun können. Also gehen wir einfach zu Google hier und geben Sie Bootstrap für ein und Sie werden mit dieser Einführungsseite präsentiert . So ist Bootstrap einer meiner Favoriten, wenn nicht meine Lieblingsfront und Frameworks. Es macht diese Aufgabe, eine moderne Website zu erstellen, viel einfacher. Und die gute Nachricht ist, dass wir nichts von diesem einleitenden Zeug machen müssen, weil es bereits installiert ist , seit wir unser Bootstrap vier-Theme installiert haben. Was wir also tun können, ist, sich zu begnügen. Lassen Sie uns die Tabellen Optionen überprüfen, und Sie können hier sofort sehen. Um, es gibt einige Beispiele dafür, wie Tabellen in Bootstrap für unser Styled Nun, es sieht so aus, als ob wir nur die Klassentabelle hinzufügen müssen. Wenn wir wollen, dass Teoh unseren Tisch aufräumt. Lassen Sie uns also buchstäblich kopieren, dass dies das erste Beispiel ist. Und sie zeigen Ihnen nicht nur, wie das Beispiel aussieht, sondern stellen Ihnen den darunter liegenden Rohcode zur Verfügung. Also, wenn wir die Tischklasse kopieren und zurück zu Elaine gehen. Lasst uns darauf klicken. Und was wir hier tun werden, ist, ihre Hände ein wenig schmutzig zu machen. Schauen Sie unter die Haube und klicken Sie auf Quelle. Dies ist der HTML-Code, der in Ihrem Inhalt dargestellt wird, während Sie ihn in erstellen. Das war der Perückenblock. Was wir hier tun können, ist nur dieses Tabellen-HTML-Tag zu sehen und buchstäblich vor dem, was wir tun können ist direkt vor dem Größer-als-Zeichen. Wir können einfach in diese Klasse einfügen, die wir kopiert haben, und lassen Sie uns durch diesen Code scrollen bis wir die andere Option finden. Und lassen Sie uns auch Tisch dort einfügen, während wir hier sind. Lassen Sie uns die Zusammenfassung Getränke und lassen Sie uns einfach deaktivieren Quelle Perfekt. Nun, was wir tun können, ist zu gehen und zu speichern, und da gehen wir. Sie können sehen, dass wir jetzt eine tatsächliche Tabelle haben, aber es gibt noch eine Sache, die ich gerne tun würde. Ich möchte hier einen Rahmen hinzufügen, um das Menü visuell zu trennen. Also gehen wir zurück über Teoh Bootstrap, und lassen Sie uns einfach nach unten scrollen. Du könntest es schaffen. Ah, das dunkle Thema, wenn du willst, und lass uns einfach nach unten scrollen, bis wir Tische finden. Tabellenzeile, Entschuldigung, ihre Grenze. In Ordnung. Und hier ist die Option für Tabelle umrandet. Wählen wir das aus und gehen zurück zu Elaines Andrew. Leute treffen, bearbeiten und unter Quelle. Nehmen wir Tabelle Border, die wir gerade kopiert haben, und fügen Sie es in die Klasse ein. Also werden wir hier nur eine Extraklasse in dieser Deklaration anpacken. Und dann lassen Sie es uns retten. Und da gehen wir, Ordnung, und es gibt noch eine Seite, die wir für dieses Video erstellen werden. Lassen Sie uns einfach voran und erstellen Sie die Rezepte-Seite, so dass wir noch ein Mal unter Inhalt gehen , fügen Sie Inhalte und grundlegende Seite. Du wirst ein Experte sein, wenn wir fertig sind. Lassen Sie uns einfach den Titel dieser Rezepte machen, und wir werden das leer lassen für jetzt, und wir werden diese Rezeptseite ausfüllen und es dynamisch in einem anderen Video machen. Das schließt also dieses Video über die Erstellung der grundlegenden Inhaltsseiten. Im nächsten Video werden wir über die Menüstruktur gehen und Leute zeichnen. Wir werden alle diese Seiten, die wir gerade gemacht haben, zum Menü hinzufügen, und wir werden diese Suchoption ausschalten, weil wir sie für dieses Projekt nicht brauchen. 7. Das Navigation und die Bedeutung von Blocks: Hallo, alle. Willkommen zurück in diesem Video, wir werden auf die Arbeit aufbauen, die wir im vorherigen Video gemacht haben, als wir unsere statischen Seiten kompiliert haben. Wir werden nun diese Seiten hinzufügen ALS Menüsystem Droop und beginnen, die eigentliche Navigation hier aufzubauen . Also, Andrew Pool, wir haben ein paar Möglichkeiten, unsere Menüs einzustellen. Wir können, tatsächlich, nur von überall auf der Website, wo es das Menü gibt, können wir tatsächlich einfach auf es Menü klicken. Sie benutzen diese kleine Bleistift-Werkzeug-Spitze. Aber für die Zwecke dieses Videos, denke ich, Nun, Nun, eigentlich, gehen Sie einfach auf die Menü-Option. Wenn Sie also den Mauszeiger über Struktur bewegen und hier auf Menüs klicken, sehen Sie eine Liste aller Menüs auf der Website, und das umfasst auch die administrativen Menüs. Also hier oben und hier. Also nicht nur und das Benutzerkonto-Menü. So in Droop wird, können Sie nicht nur das vordere Menü anpassen, das Menü, mit dem Ihre Benutzer interagieren , sondern Sie können auch eine benutzerdefinierte Administrationserfahrung hier erstellen, indem Sie die Admin-Menüs bearbeiten . Aber für dieses Video, wir werden auf die Haupt-Navigation bleiben und Wie Sie hier in dieser Beschreibung sehen können, ist dies die Website Abschnitt Links. Also lassen Sie uns voran und klicken Sie auf das Menü. Und das ist genau das, was wir erwarten sollten. Es gibt nur einen Menü-Link, und wenn wir einfach einen neuen Tab hier öffnen und diese Homepage überprüfen, können Sie sehen, dass wir diesen HomeLink haben. Also jetzt gehen wir weiter und fügen Sie alle Links hinzu, die wir bisher gemacht haben. Der erste Link, der hinzugefügt wird, ist dieser Menü-Link und für das Verknüpfungsfeld. Da wir bereits die Seiten erstellt haben, schwächen buchstäblich, suchen Sie einfach nach Menü und wählen Sie es aus. Und lassen Sie uns das aussagen. Gehen wir wieder zur Hauptnavigation und es befindet sich an einem anderen Link. Dieses Mal werden wir Rezepte hinzufügen und es in der Liste finden. Sparen Sie es aus. Wiederholen Sie den Vorgang. Und, wie bei einem anderen Link, Zeit wird es tun, um es zu speichern und dann auf ihm Menü und einen weiteren Link. Es ist kontakt und sicher. Alles klar, und stellen wir sicher, dass das alles korrekt ist. Ich möchte das Menü nach Hause kommen zuerst, gefolgt von den Menü-Rezepten über und Kontakt, die wir gehen, damit Sie sehen können, wie ich es getan habe . Es ist nur ein einfacher Drachentropfen. Dann speichern wir die Linkreihenfolge. Schauen Sie sich die Startseite an und sehen Sie, was wir hier getan haben. Alles klar, cool. So sieht das schon besser aus, und Sie können sehen, dass Sie durch die Seiten klicken können und es sieht so weit ziemlich gut aus. Das waren also die einzigen Links, die die Hauptnavigation für dieses Projekt halten wird. jedoch Was wirjedochals nächstes übergehen werden, ist Drew Pols Block-System. Für diese Seite ist es also nicht notwendig, diese Suche und meine Kontooptionen hier zu haben. Also schauen wir uns an, wie wir das in Schwierigkeiten loswerden können. Der Hauptanwendungsfall für Blöcke wären wiederverwendbare Websiteelemente. Also, zum Beispiel, dieser Suchblock hier könnten wir das nehmen und duplizieren und es in die Fußzeile legen. Und das ist wirklich der Zweck von Blöcken. Werfen wir einen Blick auf die tatsächlichen Blockoptionen unter Struktur, so unter Struktur, bewegen Sie einfach auf Layout blockieren und klicken Sie, dass hier können wir zum ersten Mal in diesem Kurs, sehen Sie die Funktion der Region. Andrew Menschen werden über, dass mehr gehen, wenn wir beginnen, die Website Thema, aber im Grunde ist dieses Thema in verschiedene Regionen, wo wir setzen Blöcke gebrochen. Wir sehen hier im zusätzlichen Navigationsbereich, dass das Benutzerkontenmenü sowie das Suchformular in dieser Region platziert werden. Da wir also diese nicht in der Navigation wollen, werden wir es einfach deaktivieren. Also, wenn wir hier neben zu konfigurieren gehen, klicken Sie auf den Pfeil und wählen Sie diese Lage, Sie können sehen, die Blockeinstellungen wurden aktualisiert und die lassen Sie uns gehen Teoh Benutzerkonto-Menü sowie deaktivieren Sie, dass Perfect. Jetzt lass es uns sparen und nach Hause gehen. Und jetzt ist es weg. Nun, in einem anderen Video, werden wir dieses Menü nach rechts ausrichten, so dass wir hier nicht so viel Leerraum haben. Aber im Augenblick denke ich, das ist genau das, was wir brauchen. Es gibt einen weiteren Block, den wir deaktivieren werden, obwohl für diesen Kurs wir für diesen Kursdie Brotkrumen nicht wollen, also lassen Sie uns weitermachen und das auch deaktivieren. unter Blocklayout Gehen wirunter Blocklayoutzu Breadcrumbs hier herunter und deaktivieren Sie Perfect. Okay, das schließt dieses einleitende Video auf dem Menü und Blocksystem und Rupel. Wir sehen uns im nächsten Video, wo wir anfangen werden, einige CSS-Code zu schreiben und den Elaine Logo-Typ aufzubauen. 8. CSS, Logo, Typografie: Hallo, alle. Willkommen zu diesem Video. Ich bin sehr aufgeregt, in dieses zu kommen. Wir werden meinen Lieblingsteil bei der Gestaltung für das Web tun, und das ist Typografie. In diesem Video werden wir also unsere beiden Schriften von Google hinzufügen. Schriftarten werden in die CSS-Datei gelangen und die Baseline-Typografie für die Website festlegen, und ich werde Ihnen zeigen, wie Sie das Logo hinzufügen, das in den Kursdateien angegeben wurde. Also lasst uns hineingehen. In Ordnung. Also lassen Sie uns hier zu Google springen und geben Sie Google-Schriften ein. Google hat also einen unglaublichen Job gemacht, Typografie ins Web zu bringen. Dieser Service ist völlig kostenlos und bietet eine Reihe von Optionen, um moderne Schriftarten in eine Website einzubinden . Die beiden Schriftarten, die für diesen Kurs verwendet werden, sind best no s und Monta Sarit. Also lassen Sie uns Monat zu Sarah wird dies als unsere Haupt unsere Baseline Typografie für die Website, und Sie können sehen, es ist eine wirklich schöne sans serif Schriftart. Also, um dies zu tun, gehen wir oben rechts auf dieser Seite und wählen Sie einfach Wählen Sie diese Schriftart und Sie können hier unten sehen, es wurde hinzugefügt. Und gehen wir zurück zu Google-Schriften und fügen Sie unsere Bevis hinzu. Nein, wie wieder, eine wirklich schöne San Serif-Schriftart wird diese für den Logo-Typ verwenden. Also lasst uns dieses auswählen. Und jetzt können Sie hier sehen, wir haben beide Schriftarten ausgewählt und Google gibt Ihnen zwei Optionen zum Importieren der Schriftarten. Ziemlich cool. Wir haben jedoch jedoch noch eine Sache zu Dio. Lassen Sie uns anpassen auswählen. Und für Monta Sarah machen wir es halbmutig und mutig. Dies wirkt sich auf die Ladezeit Ihrer Website aus, da wir hier nur ein paar Optionen hinzufügen. Und weil unsere Website relativ klein ist, wird es. Es sollte nicht in den Weg kommen, dass wir diese beiden Schriftarten Perfect hinzufügen. Also gehen wir zurück zu und schlecht hier. Und lassen Sie uns das hier für jetzt behalten und gehen wir zu V s Code. Also in einem vorherigen Video, Ordnung zeigte Ihnen, wie Sie V s Code herunterladen. Wenn Sie also folgen, gehen Sie voran und springen Sie zu V s Code und verwenden Sie die sftp Erweiterung für Bs Code, werden wir in den Server zu sperren. Ich habe meine Anmeldeinformationen bereits eingerichtet und lass uns zu Themen gehen. Sie können dies entweder eingeben oder in ausgewählten Designs nach unten gehen. Und gehen wir zu Bootstrap. Ok? Und wir sind jetzt im Bootstrap-Thema. Und für diesen Kurs werden wir einfach innerhalb der Stil-Punkt-CSS-Datei arbeiten, die gefunden wird, wenn wir zurück in das Themes-Verzeichnis gehen, es ist im CSS-Verzeichnis unter Styled at CSS gefunden. Nun wäre Best Practice, die Arbeit, die wir hier tun, auf seine separate CSS-Datei auszubrechen . Aber wir werden nur ein paar Änderungen an den C S s machen. Also für die Zwecke dieses Kurses, es ist völlig fein Zehe Arbeit in diesem Standardstil, dass CSS-Datei. Also lasst uns zurück zu Google springen. Und der erste Schritt, der getan werden muss, um diese neuen Schriftfamilien zu importieren, besteht darin, beim Import tatsächlich auszuwählen. Und Sie können die Style-Tags hier ignorieren und einfach alles unter den Style-Tags oder innerhalb der Style-Tags kopieren . Also lassen Sie uns das kopieren und gehen Sie zurück zu Visual Studio-Code, machen Sie ein paar Zeilenumbrüche hier und oben vor der Route. Stellen wir sicher, dass wir unsere neuen Schriftarten aus Ghul importieren, die Sie auf Speichern klicken. Und wenn Sie V s Code mit der sftp Erweiterung eingerichtet haben, haben Sie den Upload beim Speichern. Wenn Sie also in der unteren linken Ecke bemerken, wenn ich auf Speichern klicke, lädt das tatsächlich Dateien auf den Server hoch. Es ist also ziemlich mächtig, Ordnung, und wir können testen, dass unser Import funktioniert. Wenn wir nach unten scrollen und die Überschriften auf ihre neuen Stile setzen, werden wir alle Überschriften Monta Sterett machen. Aber wir werden sie fett machen, und wir werden alle Absatzformatvorlagen auch auf Montazeri setzen. Aber wir werden sie nicht mutig halten. Und so werde ich Ihnen zeigen, wie wir das machen werden. Also gehen wir zurück zu Google und lassen Sie uns unsere Schriftfamilie Erklärung hier finden. Und lassen Sie uns die Monta Sarah kopieren. Es ist eins. Es tut mir leid, wenn ich nicht das Recht sage, zu einer neuen Zeile zu gehen und das jetzt einfach einzufügen. Da wir auch Überschriften machen, fügen wir das Frontgewicht hinzu und machen es 600 und lassen Sie uns das sparen. Es sollte hochgeladen werden. Es ist heiß zurück hier und aktualisieren Nun, nichts hat sich geändert, und der Grund dafür ist, dass in Drew Pool, wenn wir Änderungen an dem Stil vornehmen, dass CSS oder an einer Template-Datei, müssen wir das Geld leeren. Der einfachste Weg, dies zu tun, wenn Sie nicht von der Befehlszeile aus arbeiten, ist es, einfach über den Droop zu bewegen. Wird Symbol und klicken Sie auf Flush alle Fänge. Also, wenn alles gut läuft, sollte unsere Überschrift zwei Monate gesetzt werden. Sarah. Da gehen wir. Sehr gut. Also hat unser Import funktioniert. Und wenn wir ein wenig zur Seite herumspringen, können Sie sehen, dass sich diese auch geändert haben. Und was wir als nächstes tun werden, ist auch die gesamte Website Schriftart Stil. Zwei. Monta Sarah. Es ist also, lasst uns rauf gehen. Aber scrollen Sie ein wenig nach oben. Wir haben mit H eins angefangen. Scrollen wir nach oben und gehen zum Körper der Körperdeklaration hier. Und lasst uns eigentlich nur eine neue Linie machen. Und fügen wir die Monsterluft ein. Seine Behauptung noch einmal. Drücken Sie „Speichern“, und dann gehen wir zurück und spülen Sie das Geld. Perfekt. So jetzt können Sie sehen, dass diese Menüs aktualisiert wurden und ich denke, die Typografie sieht schon besser aus, und ich bemerkte auf dieser Seite, dass Essen und Getränke nicht auf einem 600 Fuß gefaltet sind. Warten Sie. Ich könnte hier nur sagen, dass das nicht das ist, was wir hier und Google-Schriften von uns ausgewählt haben, weißt du? Schau dir die Seite nach Monta an. Sara, Wir können sehen, dass A ein 600. Entschuldigen Sie mich. Ein 600 ist eigentlich eine Menge Grenze als das, was das ist. Okay, also wenn wir zurück zu Vs Code gehen und wenn du dich daran erinnerst, setze ich die Überschriften ein. Wo sind wir? Hören Sie die Überschriften auf Schriftart Warten 600. Aber wenn ich dieses Element hier inspiziere, können Sie sehen, dass unsere 600 Schriftgewichtdeklaration tatsächlich durch eine Deklaration überschrieben wird , die später in der CSS-Datei gemacht wurde. Also, zum Beispiel, wenn wir nur diese Schriftart deaktivieren Warten, können wir sehen, dass. Jetzt sind wir bei 600. Also lasst uns weitermachen und das aufräumen. Es ist heiß zurück auf V s Code. Und was ich eigentlich werde dio habe ich bereits kopiert, das ist die Suche nach Schriftgewichten. 500. Und lasst uns das kommentieren. Sie können das auf einem Mac mit V s Code tun. Stellen Sie sicher, dass Sie sich am Ende der Zeile befinden und den Befehl Schrägstrich ausführen und das wird es auskommentieren. Lasst uns das retten. Gehen Sie zurück zur Seite. Und wenn alles funktioniert, sollte das immer noch fett sein. Id perfekt. Also lassen Sie uns einfach tun, ah, Website-Aktualisierung. Und jetzt sind unsere Überschriften Bolden. Das ist also großartig. Okay, also haben wir den ersten Schritt zur Säuberung unserer Website-Typografie gemacht. Wir haben die Baseline-Stile mit unserem CSS-Stylesheet festgelegt. Jetzt fangen wir an, diesen Logo-Typ auszubauen. , Also zuerst, entfernen wir das Bootstrap-Symbol. Um dies zu tun, werden wir unter Aussehen gehen und klicken Aussehen. Gehen wir zur Bootstrap-Creme und wählen Sie Einstellungen unter den Einstellungen. Lassen Sie uns das Häkchen verwenden Logo nach Thema, und laden Sie uns das Logo-Bild hoch, das in den Website-Dateien mit diesem Kurs enthalten war. Und lasst uns. Sobald wir hinzugefügt haben, Lassen Sie uns nach unten gehen und klicken Sie auf Speichern Konfiguration und lassen Sie uns das Geld für gute Maßnahmen spülen. Perfekt. Jetzt gehen wir zurück nach Hause und wir können sehen, dass unser Logo geändert wurde. Aber es ist viel zu groß. Alles klar , wie können wir das beheben? Nun, eine Sache, die ich Dio ist eine Menge von Design innerhalb des Browsers. Ich schreibe seit langem CSS, also kommt mir das natürlich. Aber es ist eine Fähigkeit, die jeder lernen kann, und es ist eine Fähigkeit, die unglaublich mächtig ist Wenn Sie in ein Web-Design, vor allem Drew Peled basiertes Web-Design, weil die Front-End-Markierung in Drew Pool ist so gruppiert ehrlich gesagt, so oft müssen Sie tatsächlich aus dem Inspect-Fenster graben. Also lasst uns einfach herausfinden, wie wir das beheben können. rechts Klicken Sierechtsauf Inspect, und wir haben unsere Dev-Tools hier. Wir haben uns das vor einer Minute vertraut gemacht, und wir können hier sehen, dass es tatsächlich abgelegt wird und normalerweise nicht. Aber lassen Sie es uns hier unten stellen, damit wir sehen können, dass die Bildgröße auf 100% eingestellt ist, aber wir möchten , dass das kleiner ist. Also lasst uns die Breite 35 Pixel machen und das sieht ziemlich gut aus, oder? Das ist es, was wir haben wollen. Also werde ich Ihnen zeigen, wie wir das schnell zu unserem Stil hinzufügen können, dass CSS Lassen Sie uns diese Deklaration innerhalb der Dev-Tools kopieren, und es ist kopieren Sie das und springen Sie zu V S Code. Nun, was wir hier tun werden, ist Scrollen bis nach unten, und wir werden beginnen, unsere benutzerdefinierten Site-Styles aufzubauen. Lassen Sie uns dies einfach als benutzerdefinierte Stile und nur für das Styling innerhalb des tatsächlichen Dokuments. Lasst uns das so machen. Wenn jemand anderes die Website übernimmt, weiß er, wohin er gehen soll. Dies sind also benutzerdefinierte Stile. Und lassen Sie uns das in geöffneter geschweifter Klammer Tempo und schließen geschweifte Klammer. Und was wir tun werden, ist, die Breite auf 35 Pixel zu setzen, genau wie wir es innerhalb der Entwickler-Tools getan haben. Und was ich auch gerne tun möchte, ist hier einen Abschnitt in unserem Dokument hinzuzufügen, der Logo heißt, da wir einige zusätzliche Änderungen vornehmen werden. Also, jetzt wissen wir, wo Logo ist, und lassen Sie uns einfach ein paar Pausen machen, speichern Sie das aus und springen Sie zurück zu Chrom, spülen Sie das Geld. Perfekt. Also jetzt können Sie sehen, ob wir frisches Logo wurde aktualisiert, und das sieht jetzt viel besser aus, wenn wir in den Dev-Tools bleiben hier, wir wollen Teoh diese Typografie hier beheben, und wir wollen machen, dass wir dies in einen Logo-Typ verwandeln wollen, Also lassen Sie uns das tun, indem Sie zuerst in den Entwicklertools beginnen. Und lassen Sie uns einfach bleiben, wo wir sind. Klicken Sie auf span class site name. Hier wird alles so eingestellt, dass wir hier den Stil der Elemente machen können. Oder wir könnten einfach die Plus-Option drücken, um eine neue Regel hinzuzufügen. Und Sie können sehen, dass Chrom hinzugefügt wird. Unsere Erklärung für uns. Dies ist also das HTML Span-Tag und die CSS-Klasse, die Site-Name angewendet wurde. Das können Sie hier sehen. Lassen Sie uns dies ändern, um tatsächlich gehen wir zurück zu Google-Schriften und Checkouts. Wie fügen wir diese Bevis Nu EZ Font-Familie hinzu? Lasst uns kopieren. Das war heiß zurück hier drüben und fügen Sie das in So können Sie sehen, dass sieht wirklich toll aus. Bevis New s ist eine großartige Typografie für Logo-Typen, aber es ist eigentlich ein bisschen zu klein. Trotzdem, Ich fühle, ich würde gerne Teoh bis, dass ein bisschen, Also lasst uns einfach anfangen, einige Styling hier im Browser zu starten. Also werde ich diese Schriftgröße zu Ram machen. Es ist am besten, Ram zu verwenden, und dann denke ich, dass ich diese Größe mag, aber es ist eigentlich nicht vertikal zentriert. Also lasst uns eigentlich nur Rand oben machen. Lassen Sie uns zwei Pixel machen, nur um zu sehen, wie das ist. Und ich werde die beiden dort hervorheben, wenn Sie das unten in den Tiefenwerkzeugen sehen und den Aufwärtspfeil verwenden, um sich anzupassen. Und das gefällt mir eigentlich besser, ich denke, fünf, vielleicht vier Margin Top vier. Mal sehen, hier ist dies die Nuance dessen, was Entwicklung Wir machen es tatsächlich und lassen Sie uns die Farbe setzen , um ihre Null zu bewahren glauben, dass es bereits ist, aber okay, wir können das tatsächlich einfach herausnehmen. Ja, das sieht gut aus. Ich fühle mich besonders, wenn wir das nehmen und nach rechts bewegen. Okay, das wird funktionieren. Lass uns das machen. Also werde ich das kopieren. Eigentlich, was wir tun können, ist, diese ganze Erklärung zu kopieren. Es ist heiß zurück auf V s Code und unter unserem Logo-Abschnitt, lassen Sie uns Tempo, dass in Condole Essen, dass es speichern. Und das hat hochgeladen. Lass uns wieder rüber gehen, um das Bargeld zu verchromen. Alles läuft gut. Das sollte gut sein. Ok, großartig. Das schließt also dieses Video ab. Wir haben hier hervorragende Arbeit geleistet, um unser Logo zu erstellen, und wir haben auch einige Baseline-Styles festgelegt, die viel besser aussehen. Meiner Meinung nach. Im nächsten Video werden wir anfangen, diese Seiten zu thematisieren. Diese Inhaltsseiten werden also anfangen, sich das anzuschauen und ein wenig tiefer unter der Haube unserer Website zu gehen . Das werde ich sehen. 9. Den Page: Willkommen zurück in diesem Video, werden wir beginnen, die Seite dot html Zweig Template-Datei zu bauen. Wir werden auch diese Navigation bereinigen, so dass die Links auf der rechten Seite der Navigation ausgerichtet sind . Lasst uns anfangen. So beginnend so weit, ich denke, dass diese Seiten Luft kommen ziemlich schön. Aber wenn wir es hier beenden würden, wahrscheinlich nicht genug, um Teoh Elaines fiktive Kunden hier anzusprechen. Also, was ich dagegen tun möchte, ist eine Option für den Website-Editor hinzufügen, um ein Banner ein Bild Banner auf dieser Seite hinzuzufügen, ohne in den Code gehen zu müssen. Richtig? Also lassen Sie uns hypothetisch sagen, dass Elaine, die die Bäckerei besitzt, Michael bezahlt, um den Inhalt der Website zu aktualisieren. Nun, wir würden wollen, dass Michael die Möglichkeit hat, einfach das Foto Teoh jede Seite hochzuladen, ohne Code, also werde ich Ihnen zeigen, wie man das macht. Dies geschieht durch Bearbeiten des Seitentyps. Wir haben ein wenig über Inhaltstypen in einem vorherigen Video gelernt, und wir haben ein wenig über den Seiten-Inhaltstyp gelernt, aber lassen Sie uns einfach nach unten gehen, Teoh Inhaltstypen, grundlegende Seite, und lassen Sie uns auf das. In diesem Fenster haben wir Optionen, die wir für jede Seite festlegen können. Und es gibt auch eine Option für Felder hier. Im Moment können Sie auf unserer Seite Inhaltstyp sehen. Wir haben nur ein Körperfeld, das ist, was wir verwendet haben, um in den Inhalt für jede Seite einfügen. Nun, lassen Sie uns weitermachen und ein zusätzliches Feld zu dieser Seite hinzufügen. Inhaltstypen So werden wir auswählen, Feld hinzufügen und unter ein neues Feld hinzufügen. Wir gehen nach unten Teoh Image und lassen Sie uns einfach dieses Banner-Bild nennen und drücken, speichern und weiter von hier. Lassen Sie uns einfach sicherstellen, dass dies auf eine Speicherfeldeinstellungen eingestellt ist und lassen Sie uns nach unten gehen. Das ist richtig. Wir wollen sicherstellen, dass auf allen Feld aktivieren und alle Felder erforderlich ist Prüfungen für Zugänglichkeit. Also lasst uns klicken. Speichern Sie Einstellungen perfekt und lassen Sie uns gehen, um Formularanzeige zu verwalten. Sie können sehen, dass wir eine Reihe von Dingen hier haben. Wir haben den Titel an der Spitze und die beste Art, wie ich Teoh Show mag. Dies ist, indem Sie tatsächlich nur ein Stück Inhalt hier hinzufügen, Also lasst uns dies in einem neuen Tab öffnen und schauen wir uns an, was passiert, wenn wir ah grundlegende Seite machen so dass Sie sehen können, wir haben einen Titel des Körpers. Sie können sehen, unser neues Bannerbild Field ist hier unten, aber eigentlich würden wir wollen, dass dieses Bannerbild über dem Körper für eine bessere Benutzererfahrung auf der rechten Seite platziert wird. Wir haben auch einige Optionen, einige Site-Optionen. Wir könnten einen benutzerdefinierten URL-Alias erstellen, wenn wir nicht den generierten verwenden möchten. Und wenn Sie mehrere Autoren hatten, könnten Sie überprüfen, welcher Autor Sie sind. Also gehen wir zurück zu der Seite, die wir waren auf, bevor in diesem Manage Formular Anzeige und Sie können sehen, der Titel hier oben rechts Titel hier oben und wir haben den Körper. Hier ist der Körper und unser Bannerbild. Diese anderen Optionen sehen Sie auf der rechten Seite. Und so was ich Dio mag, ist Körper unter Titel zu setzen. Aber in diesem Fall lassen Sie uns Bannerbild zwischen Titel auf Körper setzen, und ich möchte sicherstellen, dass dies die letzte Option ausgewählt ist, Ursache normalerweise, Sie werden diese nicht immer ändern, aber da ist es. Also, sobald wir unsere Optionen arrangieren, lassen Sie es uns speichern. Und jetzt, wenn wir gehen zurück und tun Inhalt, fügen Sie Inhalt, grundlegende Seite, Sie können sehen, dass dies zwischen Titel auf Körper platziert Perfect. In Ordnung, also gehen wir zurück nach Hause und wählen uns das Menü aus, und ich werde weitermachen. Sie können hier sehen, dass Bannerbild nun auch auf unseren vorherigen Seiten eine Option ist. Ich werde das Bannerbild hinzufügen, das in den Site-Dateien enthalten ist, und stellen Sie sicher , dass Sie den gesamten Text für die Barrierefreiheit einfügen. Perfekt, weißt du, und spart es aus. Und Sie können hier sehen, dass, obwohl wir das Feld innerhalb des gesetzt haben, um über dem Körper unter dem Titel zu sein , die Anzeige ist immer noch unter dem Körper. Gehen wir zurück zu unseren Content-Typ-Optionen und wählen Sie grundlegende Seite um, unter Display. Lassen Sie uns wählen Anzeige verwalten, und was wir tun können, ist tatsächlich platzieren, dass über dem Körper und lassen Sie uns die LaBella gut , perfekt verstecken , . Jetzt gehen wir zurück, öffnen Sie eine neue Registerkarte und schauen Sie sich das Menü an, dass wir es einfach cool. Das ist schön. Aber was ich wirklich gerne dio möchte, ist das vorher mit Also gerade jetzt arbeiten wir innerhalb der Grenzen des Bootstrap-Containers. Wie Sie sehen können, ist alles innerhalb dieses Containerfensters hier und eine Zeile bis zur Mitte der Seite aufgereiht . Und das wollen wir. Aber um es wirklich modern aussehen zu lassen, wollen wir, dass ein Element voll ist. Sie haben das auf anderen Websites gesehen und Sie können es hier sehen, richtig? Dies ist ein voller Teil der Website, aber der gesamte Inhalt ist innerhalb des Containers. Nun, was wir tun können, ist auf die Seite dots html dot Zweig Template-Datei gehen und das aktualisieren. Also lasst uns zu V s Code gehen. Also sind wir im Droop-Will-Verzeichnis, um zu den Template-Dateien zu gelangen. Lassen Sie uns zu Themen gehen und gehen Sie zu Bootstrap und dann unter, wenn Sie im Bootstrap-Theme sind, was Sie tun möchten, ist auf Vorlagen gehen und die Seite sowie die HTML-Vorlagen sind unter Layout zu finden, und wir gehen Sie voran und wählen Sie Seite html. Und was jetzt? Sie werden mit begrüßt werden, sofort ist ein Haufen von gemeinsamen es aus. Helfen Sie ihr, Text. Das ist sehr nützlich. Wenn Sie Teoh suchen, tauchen Sie tiefer in die Dreifach-Themenentwicklung ein und lassen Sie uns weiter hier ein wenig scrollen. Also gleich neben der Fledermaus werde ich nicht alles Zeile für Zeile erklären. Aber das ist gut zu wissen, was Sie hier sehen, sind Zweigvariablen. Der Entwickler dieses Bootstrapped vier Thema hat beschlossen, ziemlich schwere Nutzung von Zweigen variable System zu machen , aber an diesem Punkt fragen Sie sich wahrscheinlich, was Zweig ist. Also schauen wir uns Google an und lassen Sie uns einfach Zweig HTML eingeben. Twig ist also eine Template-ing-Engine für die PHP-Programmiersprache. Was dies tut, ist, dass es ähnlich wie Bootstrap vereinfacht, ähnlich wie s CSS oder Sass. Es vereinfacht die Art und Weise, wie Sie dynamische Vorlagen in PHP erstellen können, so dass Sie viel mehr Dinge mit viel weniger Code tun können . Zweig ist ein umfangreiches Thema, und ich empfehle, einige Videos entweder auf Skill Share oder YouTube. Wenn Sie in diesem Thema tiefer gehen möchten, aber für jetzt, gehen wir zurück zu V s Code. Nun, da wir ein wenig Verständnis dafür haben, was Zweig ist. Wir können sehen, dass es hier eine Variable gibt. Aber wenn wir weiter unten gehen, werden Sie mit einer Vorlage oder einem Framework von dem, was jeder einzelne Seiten-Inhaltstyp ist präsentiert . Wenn Sie auf Inhalt klicken, fügen Sie Inhaltsseite hinzu. Jedes Mal, wenn Sie das tun, ist dies repräsentativ für den Code auf einer einzigen Seite und nur um ein wenig weiter zu gehen, können wir hier sehen. Lassen Sie uns anfangen, das zu betrachten. Also gibt es Header, richtig? Wir haben dieses Header-Tag. Und hier ist unsere erste Region, die innerhalb Zweig definiert wurde. Dies ist eine Region Andrew Menschen Seite Punkt Header. Aber Sie können hier sehen, wir haben diese Naff Bar. Also lassen Sie uns zurück zu Google und Chrome springen und Sie können sehen, genau hier ist diese Navigation. Und wenn wir voran gehen und dieses Element zu inspizieren, können Sie sehen, dass wir einen Header-Tag mit der Klasse von nab unsere erweitern Große haben. Richtig. Also dann gehen wir zurück zu V s Code Header-Tag mit der Klasse jetzt Bar erweitern groß. Also hoffe, das macht Sinn, verschachtelt unter der Kopfzeile ist dieses knave Tag mit einer Reihe von Klassen und Sie können hier sehen, dass wir dieses knave Tag gerade verschachtelt haben. Ich habe in einem vorherigen Video, und zu Beginn dieses Videos, Ich habe Ihnen gesagt, dass wir diesen Teil der Navigation nach rechts ausrichten würden. Also schauen wir uns an, wie wir das hier in V s Code tun können. Lassen Sie uns ein wenig nach unten gehen und finden wir jetzt, Bar nav, lassen Sie uns diese M R Auto auf B M L auto ändern. Das ist nur eine Bootstrap-Klasse, die dies auf magische Weise richtig macht. So sehe ich es wenigstens an. Also gehen wir zurück zu Google Chrome und spült das Geld und alles lief gut, dass nach rechts ausgerichtet werden sollte. Perfekt. In Ordnung. Ich denke, das sieht schon besser aus, aber lassen Sie uns unsere Arbeit hier fortsetzen, das Seitenbanner zu setzen. Okay, was wir hier tun müssen, ist, dass wir zuerst einen Blick auf die tatsächliche Struktur der Seite werfen . Lassen Sie uns mit der rechten Maustaste auf Inspect Noch einmal unser alter Freund hier Dev Window. So können Sie sehen, dass wir diesen Header haben. Und in diesem Header haben wir. Wenn Sie sich ansehen, was oben auf dem Bildschirm hervorgehoben ist, haben wir offensichtlich alle Navigationskomponenten und innerhalb des eigentlichen Knave-Tags haben wir das Navigationsrecht, damit wir weiter unten gehen können. Und so ist das strukturiert. Und wenn wir weiter nach unten scrollen, können wir sehen, dass das Haupt-Tag alles auf der Seite abzüglich der Fußzeile enthält, die sich in seinem eigenen Fußangriff befindet. Also unser Ziel ist es, dieses Bild aus dem Hauptabschnitt zu bekommen und es zwischen Header und gemacht zu setzen . Nun, was wir tun könnten, ist eine Region zu definieren. Aber wir werden das später tun, wenn wir zum S-Code zurückkehren. Also gehen wir eigentlich einfach. Teoh, überprüfe diesen Header hier. Aber Ihr Cursor dazwischen stellen Sie sicher, dass Sie sich am Ende der Header-Deklaration und lassen Sie uns Abschnitt eingeben. Wir werden dafür ein Abschnitt-Tag verwenden. Lassen Sie uns eine Klasse von Seitenbanner geben. Und bevor wir das Hintergrundbild rendern, was ich tun möchte, ist, dass der Titel der Seite vor dem Bild für einen schönen visuellen Effekt platziert wird. Also werden wir hier in H eins machen. Und lassen Sie uns einfach eine Registerkarte geben, die wir diesem eine Klasse von Seitenkopf geben und lassen Sie uns den Seitentitel rendern . Also, was wir tun müssen, ist nehmen. Was wir tun möchten, ist dies der Seitentitel zu nehmen. In diesem Fall ist es Menü, und wir wollen, dass das platziert wird. Mal sehen, ob ich das schaffe. Ja, direkt in der Mitte dieses Bildes platziert, und wir möchten, dass dieses Bild ein Hintergrundbild ist. Also lassen Sie uns zuerst beginnen, indem Sie den Titel in Drew Pilate einfügen, um den Titel zu rendern , wir werden Knoten sagen, weil wir Thema ing eine Knotenseite hier Seite Punkt h t nicht ein Zweig, und wir werden es kein Punktlabel machen, Das ist einfach so passiert in Drew Pilatus mit zweigen. So bekommt man den Titel. Und wenn wir sagen, dass aus und dann springen zu Chrom und spült das Geld, na ja, Sie sollten sehen, ist ja. Das ist genau das, was ich erwarten würde. Sie sehen zwei Titel, da nicht nur der Originaltitel ist, den wir in ihre Rendering einfügen, sondern wir haben auch dieses Knotenlabel hinzugefügt. Also, wie werden wir das loswerden? Nun, gehen wir wieder rüber. Und während ich hier scrolle, sehe ich nichts. Nun, das liegt daran, dass dieser Seitentitel tatsächlich Teil des Standardblocksystems ist. Andrew Teller Es ist ein Block, so dass wir sehen können, dass nach Europa und Seite Titel sehen. Was wir also tun werden, ist eigentlich einfach voran zu gehen und dies zu deaktivieren. Lassen Sie uns also unter Struktur und Blocklayout gehen. Wir sind ein wenig vertraut mit diesem an dieser Stelle und hier unter Seitentitel, lassen Sie uns einfach auf deaktivieren große Hit speichern Blöcke und Flush für eine gute Maßnahme. Und dann gehen wir zurück nach Hause und schauen uns die Speisekarte an. Perfekt. Das ist jetzt genau das, was wir erwarten. Ein Titel und dieser Standardtitel werden jetzt entfernt. In Ordnung, lassen Sie uns diese Seite weiter ausbauen. Also, was wir wollen dio ist, den Pfad zum Bild direkt in diesem Abschnitt Tag zu rendern. Dies ist definitiv der komplexeste, der einzige komplizierteste Teil des Videos, und es ist nur, weil wir nett aussehen wollten und wir dynamisch sein wollten, also lassen Sie mich Ihnen einfach den Denkprozess dahinter zeigen, und ich denke, das wird einige Dinge klären. Beginnen wir zuerst nur für den Bildpfad in ein P getaggt so zu rendern, wir wissen, dass wir es haben. So zog das Zurückspringen über die Zehe Menschen. Was wir tun wollen, ist, wenn ich dieses Element inspiziere. Was wir nach Dio suchen, ist, wie ich gesagt habe, diesen tatsächlichen Pfad hier in die Template-Datei zu bekommen. Also zuerst gehen wir unter Struktur, Inhaltstypen, grundlegende Seite und lassen Sie uns Felder verwalten. Sie können sehen, dass es hier einen Maschinennamen gibt. Feld Unterstrich Banner Unterstrich Bild. So sieht es beispielsweise in der Datenbank aus. Wahrscheinlich so für Thema ing. Dies ist praktisch, wenn Sie Elemente referenzieren müssen. Okay, also kopieren wir das und lassen Sie uns hier rüber gehen und es einfügen, nur damit wir es haben, dann lassen Sie uns gehen, um die Anzeige zu verwalten und wir werden tatsächlich dieses Bild deaktivieren und drücken. Sicher Grund ist, dass wir nicht das gleiche Szenario haben wollen, in dem wir doppelte Bandtitel hatten , die wir keine doppelten Bilder haben wollen, also werden wir das tatsächlich deaktivieren, und dann gehen wir zurück zu V. S-Code. Wir haben hier unseren Maschinennamen, und was wir tun sollten, ist doppelte Klammern. Nehmen wir dieses Feld Banner-Bild, schneiden Sie es und fügen Sie es direkt dazwischen. Ok? Und dann werden wir hier ein Leerzeichen machen und Aktenunterstrichen machen. Sie sind alles, was eine Hilfsfunktion von Dribble zur Verfügung gestellt wird. Und dann schließen wir das einfach ab, okay? Und dann gerade jetzt, wir sind einfach nicht spezifizieren, dass dies ein Knoten ist. Also müssen wir nur kein Punktfeld Unterstrich Banner Unterstrich Bild tun, und dann müssen wir es mit Entity Punktdatei schließen. Du bist ich. Und wenn das funktioniert, sind wir Weg zu unserem Bild. Sollte hier drin sein. Ja, da ist es. Perfekt. Wenn ich also das kopieren und dann dorthin gehen würde, können Sie sehen, dass dort die tatsächlichen Bilder auf dem Server abkühlen. Nun, hier wird es ein bisschen kompliziert. Hier werden wir einen CSS-Stil im Linienstil machen, und wir werden tatsächlich nur das Bild in der Zeile für jede Seite rendern. Wir können dies in CSS nicht tun, weil Twig sich nicht auf diese Sprache erstreckt, also gäbe es für uns keine Möglichkeit, diese Dynamik zu machen. Und ich werde eigentlich nur einen CSS-Code einfügen, von dem ich weiß, dass er funktioniert. Wenn Sie also das Video pausieren und in Ihre Vorlagendatei kopieren möchten, garantiere ich Ihnen, dass es funktioniert. Aber im Grunde, was wir hier tun, ist die Verwendung von CSS drei Jahre lineare Zutaten-Funktion , um einen wirklich schönen, transparenten visuellen Effekt zu machen . Aber es gibt noch ein Stück. Sobald Sie dies in Ihre Vorlagendatei hinzugefügt haben, werden Sie feststellen. In diesem Jahr Earl Erklärung hier in CSS würden wir setzen würden wir beginnen zu tun, wie Website-Bilder, Pfad zum Bild, rechts. Aber wieder, da wir wollen, dass dies dynamisch ist, werden wir tatsächlich diese Zeichenfolge nehmen, die wir setzen und hey, trat direkt in. Okay, sparen wir das raus und dann lasst uns das Geld ausspülen. Awesome, damit Sie sehen können, dass das Bild da ist, also haben wir unser Ziel in dieser Hinsicht erreicht, aber wir wollen dieses Menü ein wenig aufräumen, also gehen wir zurück zu unserem alten Kumpel hier, dem Dove Inspector. Und sagen wir einfach, dass ich will, dass dies Tex Align Center ist und lass uns die Farbe weiß machen. Und dann wollen wir etwas Polsterung, um das hier rauszubringen. Lassen Sie uns das runterbringen und wir brauchen keine Polsterung, wirklich auf dem Schriftsteller links. Lass uns einfach ein Zimmer dafür machen. Dies ist Kurzschrift CSS. Also diese vier sind oben und unten, und dann ist dieser rechts und links. Also lasst uns so gehen. Ich habe das Gefühl, sechs könnten besser sein. Das ist, was wir wollen, dass unser Code für den Titel ist. Dafür haben wir bereits eine CSS-Klasse definiert. Also, was ist eigentlich nur kopieren Sie diesen Code, den wir im Browser erstellt haben? Und lassen Sie uns zurück zu unserem Stil gehen, dass CSS-Datei smika New Line hier brechen und diese Seite Stile Konsistenz nennen . Also muss ich Leute und lass uns das Cool machen. Und dann ist das, was doppelt überprüft wird. Wir haben diesen Klassenseitenkopf gemacht, also rufen wir H einen Punkt Seitenkopf an. Nennen wir es, dass geschweifte Klammern im Code vorkamen. Repariere das und lass es uns retten. Spülen Sie das Geld und wir sind hier. Das ist ziemlich genial, oder? Also jetzt, was wir tun können, wenn wir uns etwas Zeit hier nehmen, Teoh, klicken Sie durch. Wir können sehen, dass dies schon viel moderner und ehrlicher aussieht, insgesamt besser. Was wir tun können, ist eigentlich beginnen Teoh, fügen Sie das Rezept Banner-Bilder und die Banner-Bilder für die anderen Seiten. Also werde ich voran gehen und das tun und dann mit dir zurückkommen. Großartig. Und ich habe mir die Zeit genommen, um die Bilder hinzuzufügen. So sieht das bis jetzt wirklich gut aus. Okay, das schließt dieses Video ab. Ich werde Sie in der nächsten sehen, wo wir beginnen, die Rezepte Inhalt Typ C dann aufzubauen . 10. Den Inhalt des Stückes aufbauen: Hallo, alle. Willkommen zurück in diesem Video werden wir einen benutzerdefinierten Inhalt erstellen. Ich habe Rezepte. Bisher haben wir mit nur einem Inhaltstyp gearbeitet, und das ist der grundlegende Seiten-Inhaltstyp, den Sie hier sehen können. Und wie Sie wissen, haben wir benutzt, dass Teoh diese Seiten erstellt. Also werden wir nun auf unser Wissen über den grundlegenden Seiten-Inhaltstyp aufbauen und schließlich unseren eigenen bauen. Hier wird es meiner Meinung nach wirklich Spaß . Also, wenn wir gehen über Google und Sie wissen, bis zu diesem Punkt, dass ich dies tun mag, bieten Sie einige Informationen und geben Sie in Drew pally Inhaltstypen, klicken Sie auf diese 1. 1 es wird einige Informationen, die Sie nützlich finden, wenn Sie möchten , um tiefer in das Thema einzugehen. Fast jedes Thema in Drew Pool ist umfangreich, also konnte ich nur so viel abdecken, aber es ist irgendwie lang. Und die kurze davon ist, dass Inhaltstypen aus zwei Elementen einer Basiskonfiguration bestehen , mit der Sie auf der ersten Seite und dann auf den Feldern begrüßt werden. Also werden wir beide durchgehen. Okay, also um unseren ersten Inhaltstyp zu erstellen. Lassen Sie uns den Mauszeiger über die Struktur bewegen. Inhaltstypen hatten Inhaltstyp und diese erste Seite wurde mit begrüßt. Ist die Basiskonfiguration, wie wir gerade im Artikel gelesen haben? Hier legen Sie einige Standardverhalten fest. Also für diesen, lassen Sie uns es Rezepte nennen. Dies wird, worauf es verwiesen wird, wenn Sie auf Inhalt gehen, fügen Sie Inhalte, so dass wir in der Lage, eine Art von Rezept hinzufügen, und wir werden diese leer für jetzt zu halten. Unter Veröffentlichungsoptionen, lassen Sie uns deaktivieren, um die Titelseite heraufgestuft und halten Revision erstellen war deaktivieren Anzeige Autor und Datum Info, und wir brauchen nichts hier in den Menüeinstellungen zu tun. Lass es uns retten. Großartig. So jetzt werden wir mit der Option Felder vorgestellt. Daher hat jeder neue Inhaltstyp, den Sie erstellen, standardmäßig ein Textfeld. Wenn Sie sich aus unserem vorherigen Video erinnern, haben wir der Grundseite hier ein Feld hinzugefügt, das dieses Bannerbild war, und Sie können sehen, dass das Körperfeld ist dies der Perückenblocktitel aus der Grundlinie war. Konfiguration ist auch ein Feld, aber es ist standardmäßig. Das einzige Feld, das sich in einem Inhaltstyp befinden muss, weshalb es in dieser Anzeige von Verwaltungsfeldern nicht angezeigt wird. Was wir also tun werden, ist etwas Ähnliches wie alle Rezepte zu schaffen. Rezeptseite befindet sich innerhalb unserer Drew Pull-Seite, und alle Testinhalte wurden von dieser alle Rezepte Website entnommen. So können Sie sehen, es gibt einen Titel, der in Droop wäre ein Feld und gehen nach unten. Wir haben eine Zutatenoption, die ich denke, ist wirklich schön, eine Richtung , Abschnitt, etwas Ernährung, Fax und, natürlich, ein paar andere Felder hier. Schauen wir uns an, wie wir etwas Ähnliches in Drew Pool bauen können. Gehen wir zurück zu unserer Seite und wir lassen das Körperfeld in ihrer großen. Das erste Feld, das wir machen, ist das Richtungsfeld, das wirklich nur ein formatierter Textblock sein wird. Es wird in Richtung gerufen, und lassen Sie uns das hier zu einem behalten und alles gleich behalten. Das sieht richtig aus. Lassen Sie uns eigentlich ja, lassen Sie uns diese sicheren Einstellungen behalten und perfekt. Okay, unser Feld ist jetzt erstellt. Als nächstes lassen Sie uns ein Inhaltsstofffeld machen, und die Idee hier ist, lassen Sie uns zurück zu diesem alle Rezepte Website ist Zehe eine Liste von Zutaten haben , also würde ich gerne haben, wie, die Möglichkeit, mehrere einzelne Zeilen hinzuzufügen. Mal sehen, wie wir das in Drew Pool machen können. Also hier drüben, lassen Sie uns neues Feld hinzufügen und tun Textebene, und wir werden diese Zutaten nennen. Und der Schlüssel zu diesem ist sicherzustellen, dass die zulässige Anzahl von Werten auf unbegrenzt gesetzt ist. Es wurden Feldeinstellungen gespeichert. Alles andere sieht genau hier aus, damit wir die's tatsächlich per Drag & Drop ablegen können. Genau das wollen wir. Und lassen Sie uns das retten. Perfekt. Okay, und wir müssen hier noch ein Textfeld hinzufügen. Machen wir ein Ernährungs-Fax-Textfeld. Also lassen Sie uns dies einen Text lang formatiert und nennen Sie es Nährwertangaben, und wir werden begrenzen, dass toe ein K groß, die aussieht, schreibt Speichern Sie die Einstellungen genial. Und was ich gerne dio möchte, ist ein Foto sowie einen Link zum Originalrezept zur Verfügung zu stellen. Da ich diesen Inhalt nehme, würde ich gerne in der Lage sein, dem Schöpfer hier allRezepte zuzuteilen. Mal sehen, wie wir das tun können. Also ist es Feld hinzufügen und Sie werden unter Allgemein sehen, gibt es eine Link-Feld-Option. Es nennt sich dieses Originalrezept, und wir werden diese Zehe einschränken. Und dafür, lassen Sie uns tatsächlich externe Links auswählen, nur es speichert Einstellungen. Jetzt gibt es ein letztes Feld, das wir einhalten werden, und das ist, ich möchte eines dieser Fotos zu unseren Inhalten bringen. Also lassen Sie uns hinzufügen Feld waren tatsächlich bereits mit dem Bildfeldtyp vertraut. Also lasst uns das nochmal machen. Geben Sie es in Foto, das richtig aussieht. Und solange diese Luft aktiviert ist, lassen Sie uns sichere Einstellungen treffen. Okay, großartig. Also lasst uns Inhalte machen. Fügen Sie Inhaltsrezepte hinzu und lassen Sie uns einfach einen Blick darauf werfen, wie sich das herausstellte, damit Sie sehen können, dass wir unseren Titel, unsere Körperanweisungen, Zutaten und so viele Zutaten haben unsere Körperanweisungen, , wie wir brauchen. Nährwertangaben, das Originalrezept und das Foto. Also lassen Sie uns eine dieser beiden zusammen machen und nur eine Erinnerung, dass dieser Inhalt in den Kursdateien verfügbar ist . Also lassen Sie uns Erdbeer-Frühstück Raub, Haferflocken, Frühstücks-Smoothie. Wir werden diese gesunde und leckere Erdbeere Haferflocken Frühstück Smoothie innerhalb der Option Teoh Protein hinzufügen, so dass dies wie die Beschreibung betrachtet werden könnte. Und dann lasst uns g o Teoh Richtungen. Und ich werde das hier kopieren, weil niemand mich tippt sehen will. Und in Ordnung, lasst uns das reinnehmen. Und dann lass uns die Zutaten hier machen. Also ist die Option bei mehreren Feldern wirklich nett und hat Leute gezeichnet, denke ich so. Wir können diese einfach weiter hinzufügen und schließlich werden wir in der Lage sein, Teoh, wissen Sie, die Reihenfolge neu zu ordnen, die super nützlich ist, und lassen Sie mich diese ausfüllen und dann bin ich in einer Sekunde zurück. OK, ich habe alle Zutaten hier hinzugefügt, und ich werde auch einfach weitergehen und das Ernährungs-Fax ausfüllen. Perfekte das Originalrezept. Also werden wir tatsächlich in den Ural setzen, um diese alle Rezepte hier und dann Tempo, dass in und wir werden den Link Text Originalrezept machen, das ist, was der Benutzer sehen wird. So wird der Text aussehen und das wird verlinkt. Teoh dieser Euro Und schließlich, lassen Sie uns das Foto Great hinzufügen. Und vergessen Sie nicht, dass Sie alle Text perfekt sind. Und sobald Sie all diese Inhalte hinzugefügt haben, lassen Sie uns fortfahren und veröffentlichen. Cool. Okay, das sieht nicht schlecht aus. Es gibt einige Bereinigungsarbeiten, die hier zu tun haben, aber ich denke, es wird die Arbeit jetzt erledigt. Eine Sache, die Sie bemerken werden, ist, dass, wenn Sie ein neues Rezept erstellen, dieses alte Knotenmuster immer noch verwendet wird. Gehen wir also zu Path Auto und lassen Sie uns unter und lassen Sie uns das beheben. So Konfigurationssuche und Metadaten, Ural Aliase Lassen Sie uns zu Mustern gehen und fügen Sie Path Auto Pattern hinzu. Also werden wir diesen Inhalt nennen und lassen Sie uns dies so für jedes Rezept machen, dass wir möchten, dass es am Schrägstrich Rezept Schrägstrich den Titel sein. Also, wenn schwächen durchsuchen diese verfügbaren keine Token wieder, lassen Sie uns dies überprüfen und lassen Sie uns dieses keinen Titel finden. Das sagt also. Und wir müssen das überprüfen. Natürlich ist dies Rezepte Etikett, dass Rezepte und lassen Sie uns die Maschine namens Rezepte Muster perfekt machen . Und so, was dies sagt, ist jedes einzelne Rezept Inhaltstyp cont Rezept Knoten, die wir hinzufügen wird auf Schrägstrich Rezept Schrägstrich den Titel des Rezepts befindet. Also, wenn wir sagen, dass aus und dann gehen wir zum Inhalt, lassen Sie uns Erdbeere Haferflocken Frühstück Film und in Aktion, werden wir die URL aktualisieren Alias wird das Geld spült. Und wenn alles gut gelaufen ist, sollte dies jetzt bei Rezept Strawberry liegen. Es wird Frühstück Film Nizza. Sie wissen, dass das geschehen ist. Ich mag, dass die Wegbeschreibungsbezeichnung da ist. Ich mag auch, dass Zutaten ihre Ernährung Fax ist. Ich mag nicht, dass das Originalrezept ein Etikett und das Foto hat, also lasst uns das loswerden. Wir können das unter Struktur tun, Inhalt, Typen, Rezepte und dann verwalten Anzeige. Also unter Foto, lassen Sie uns unter der Labelspalte. Lass uns das verstecken. Es ist auch verstecken Originalrezepte, und ich denke, ich will die Anweisungen unten Zutaten. Also lasst uns das nach oben bewegen und das wird funktionieren. Ich glaube, das wird funktionieren. Ja. Okay, lassen Sie uns das retten. Und dann gehen wir zum Inhalt. Schauen wir uns unseren Erdbeer-Haute-Meals-Film an. Okay, das funktioniert. Ich mag es. Also, was Sie jetzt tun könnten Wenn Sie wie ich in ein wenig obsessiv über Abstände sind, könnten Sie die Rezepte-Notiz thematisieren, indem Sie dies überprüfen, und dann können Sie dies nur mit CSS thematisieren. Wenn Sie möchten, indem Sie zum Körper gehen und dann, wenn Sie hier sehen, haben wir Seitenknoten-Typ Rezepte, können Sie eine CSS-Deklaration erstellen, die Körper Punkte ist, Seitenknoten-Typ. Und dann könnte man sagen, in Ordnung, Ordnung, jede einzelne Feldbeschriftung hat ein Outfield-Etikett. Wir wollen eigentlich, dass das eine Marge hat. Unten in drei Zimmern vielleicht. Ah, richtig, weil es Unterstrich ist. Unterstrich. Richtig. Und so kannst du dann Teoh beginnen, das CSS hier aufräumen. Also lasst uns das einfach machen, während wir hier sind. Ähm, wir werden eine Marge machen. Oben auf einem Widder, richtig? Null unten. Machen wir es zwei und dann links. Null. Und es ist ein bisschen geräumig, würde ich sagen, aber was eigentlich ist, könntest du das den ganzen Tag tun. Ehrlich gesagt, und was macht man? 0.5 Zimmer. Okay, damit ich denke, dass es schon besser aussieht und was wir tun könnten, anstatt diesen Pad-Rand zu machen , könnten wir Padding machen und dann einen Pick solide umranden und dann weißt du, was ich meine? Dann könntest du so etwas wie Polsterung oben machen. Lasst uns den Boden behalten. Machen wir es 0,5 und dann machen wir den Rand unten einen Raum und wir könnten das tun. Ich fühle mich, als würde das gut aussehen. Ja, machen wir das. Nichts Besseres im Browser zu entwerfen. Also lassen Sie uns diese ganze Erklärung hier kopieren. Also nur für den Fall, dass ich dich verloren habe, was wir sagen, ist auf dem body-Tag, das auf jeder einzelnen HTML-Seite dargestellt wird, gibt es immer ein body-Tag. Wenn das body-Tag eine Klasse von Seite keine Art Rezepte hat, die nur da sein wird, wenn Sie auf der Rezepte-Knotenseite sind, dann lassen Sie uns das Feld Label finden und geben uns etwas Styling. Das ist es, was wir tun. Also lasst uns das kopieren. Gehen wir zurück zu V S Code und unterbezahlten Stilen. Lass uns Rezepte, Stile, Männer machen. Dann gehen wir mit. Und lassen Sie uns das schließen. Perfekt. Speichern wir Uploaded auf dem Server. Geh zurück zu hängenden ALS und Mann, das sieht schon besser aus, ich fühle mich und lasst uns das Geld spülen. Na gut, großartig in großartig. Okay, das schließt dieses Video ab. Wir haben erfolgreich einen Rezept-Inhaltstyp erstellt. Was ich tun werde, ist gehen Sie weiter und fügen Sie den Rest der Rezepte, die in den Website-Dateien enthalten sind , und dann werde ich Sie wieder für das nächste Video, wo wir in Drew Pal Ansichten System eintauchen , was großartig ist. Also werde ich sehen, dass 11. Drupal zur Erstellung einer Recipes: Willkommen zurück mit unseren Rezepten Inhaltstyp gemacht. Wir werden nun schauen, wie wir eine Liste mit Drew Pal Views System jedes Rezepts machen können , das wir bisher erstellt haben, haben wir vier Rezepte, die wir aus dem Rezept-Inhaltstyp gemacht haben. Lassen Sie uns einen Blick auf die Ansichten werfen. Also, wie immer, lassen Sie uns zu Google springen. Da wir ein neues Thema einführen, lassen Sie uns in gezeichnet Menschen acht Ansichten eingeben und klicken Sie auf den ersten Link. Wenn Sie mehr über Ansichten erfahren möchten, können Sie sich diesen Link hier und im Kern ansehen. Welche Ansichten können Sie dio können, ist dynamisch Inhalte aus der Datenbank abzurufen. Also, was passiert, wenn wir Rezepte aus den Rezepten Inhaltstyp erstellen, ist in unserer Datenbank. Es gibt einen Platz für jedes dieser Felder. Okay, also gibt es einen Platz für Ernährung, Fax für Fotos für Wegbeschreibungen, und diese Flecken sind alle gebunden. Teoh eine übergeordnete Rezeptkategorie oder ein Tisch. Also für jeden Eintrag. Jedes Mal, wenn wir ein Rezept hinzufügen, geht es in die Rezepte-Tabelle, und es gibt einen Platz in der Datenbank für jedes dieser Felder. Gut mit Aussicht. Was wir tun können, ist, dass wir sagen können, ich möchte alle Titel holen Lassen Sie uns von Rezepten sagen. Also möchte ich über Nacht Hafer, vegane Waffeln, veganeCrepes, Erdbeer-Haferflocken, Frühstücks-Smoothie holen vegane Waffeln, vegane Crepes, Erdbeer-Haferflocken, und ich möchte nur den Titel nehmen und vielleicht ein paar andere dieser Felder , die wir gerade gesehen haben. Weißt du, vielleicht nehmen wir den Titel, das Bild und die Beschreibung, was wir am Ende tun werden, und machen wir einfach eine Liste aus ihnen, richtig? So können Sie mit Ansichten auskommen, ohne programmieren zu müssen. Und das ist die Art der Schlüsselteil ist Drew Polis bietet ein unglaublich leistungsfähiges Werkzeug innerhalb einer Schnittstelle, eine Benutzeroberfläche, so dass Sie überspringen können, zu wissen, wie man programmiert? Wirklich. Und so für Sie, wirklich, alles, was Sie lernen müssen, ist, wie Ansichten zu verwenden. Also hoffe ich, dass diese Art von Sinn macht. Es ist ein großes, großes Thema. Werfen wir einen Blick auf die Rezepte-Seite, und was wir tun werden, ist, einen Ansichtsblock zu erstellen und ihn auf dieser Seite zu platzieren. Also fangen wir an, das zu tun. unter Struktur Lassen Sie unsunter Strukturden Mauszeiger nach unten zu Ansichten bewegen und eine neue Ansicht hinzufügen. Lassen Sie uns diese Ansicht Rezepte Liste nennen, und unter den Ansichtseinstellungen, werden wir sicherstellen, dass der Inhalt überprüft wird. Und lassen Sie uns sicherstellen, dass wir alle Rezepte Inhalt bekommen. Wir werden nicht nach Seiten oder Artikeln suchen. So perfekt. Dies wird also die Ansicht sagen, nach welchem Inhaltstyp sie suchen und Sie werden bemerken. Hier. Sie können dies für viele Dinge für Benutzer, Blöcke, Dateien, Dateien, Taxonomie und noch mehr verwenden, wenn Sie beginnen, zusätzliche Module herunterzuladen. Und das Letzte ist, wir werden überspringen, eine Seite zu erstellen, weil wir bereits eine Seite für Rezepte gemacht haben. Also lassen Sie uns einen Block hinzufügen, und wir werden dies zu einer ungeformten, mattierten Liste von Feldern machen , und das ist wirklich wichtig. Stellen Sie also sicher, dass Sie Felder aktiviert haben, und lassen Sie uns dann diese Null machen. Oder lassen Sie uns einfach machen, dass Decke die gleiche sein sollte, wenn Sie Null gehen oder blinzeln. Aber wenn du das alles hast, lass uns sparen und dabei, okay? Und wenn Sie es hier folgen, werden Sie jetzt unten auf der Seite eine Liste aller unserer Rezepte sehen. Das ist echt cool. Alles klar, was wir hier zu tun versuchen, ist eine Art Anzeigevorschauliste zu erstellen, damit der Benutzer auf ein Rezept klicken kann. Sie sind interessiert und suchen und erhalten mehr Details. Also, um das zu tun, lassen Sie mich eigentlich einfach zurück zu dem Rezept, das wir bereits erstellt haben. Also schauen wir uns über Nacht schüchtern Haferflocken, und ich denke, was wir Dio ist, dass wir den Titel nehmen. Die Leiche. Wir überspringen die Anweisungen wird die Zutaten Ernährung überspringen, Fax und das Foto. Okay, wir nehmen diese Felder und stecken sie alle zusammen, damit sie auf eine schöne Liste kommen . In Ordnung, also, wie ich schon sagte, hier haben wir Felder richtig, und dann haben wir innerhalb dieses Ansichtsverwaltungsfensters eine Option, Felder hinzuzufügen. Kurs. Wir haben bereits unseren Titel hier, also beginnen wir mit dem Hinzufügen unseres ersten Feldes. Also schauen wir uns das Foto an. Schauen wir uns das Foto an und lassen Sie uns auch den Körper bekommen ,der wie die Beschreibung in Stunden ist. , Und dann lassen Sie uns auch nach dem Ernährungs-Fax suchen. Cool und wir werden Felder hinzufügen und konfigurieren, so dass Sie sehen können, es wird durch jede gehen, die wir hier überprüft haben. Also schauen wir uns das Körperfeld an und wir werden einfach alles Standard für jetzt behalten. Nährwertangaben, das gleiche Angebot und für das Bild. Lassen Sie uns diese Medien machen und klicken Sie auf „anwenden“. Das sollte gut funktionieren, also dass, wenn wir hier nach unten scrollen, so aussieht, als gäbe es ein Problem mit meinen Bildern. Aus irgendeinem Grund werde ich darauf achten, das zu überprüfen. Aber man kann sehen, dass vegane Waffeln dort richtig ist. Also haben wir unseren Titel. Wir haben eine Beschreibung und eine Nährwertangaben, und es sieht ziemlich gut aus. Also der letzte Schritt hier ist, um sicherzustellen, dass wir es retten und okay, gut. Das war nur ein Fehler gewesen. Alle Fotos waren hier zurück und cool. Das sieht schon besser aus. Wir haben eine Liste unserer Rezepte, die wir dann auf der gesamten Website verwenden könnten. Das letzte, was wir in diesem Video tun werden, ist, dass wir es der Rezeptseite hinzufügen. Also hier, was wir tun werden, ist, die Ansicht zu nehmen, dass wir es gerade geschafft haben, und sie direkt in den Körper legen . Um dies zu tun, gehen wir zurück zu unserem Blocklayout-Fenster, und das ist vertraut. Ich denke, so unten hier in Maine Inhalt, weil das ist, wo wir unsere platzieren wollen. Wenn Sie auf der Seite Rezepte blockieren, klicken wir auf Platzieren, Blockieren und weil, wenn wir unsere Ansicht einrichten, haben wir beschlossen, einen Block im Gegensatz zu einer Seite zu tun. Wenn wir in Rezepte Liste eingeben, die hier in diesem Motel-Fenster als Option angezeigt wird. Also lassen Sie uns einen Platzblock auswählen und wir werden den Anzeigentitel deaktivieren und dann speichern wir das aus. Und lassen Sie uns sicherstellen, dass Sie unten auf Blöcke speichern klicken. Also, wenn wir jetzt zu Rezepten gehen, können Sie sehen, dass wir eine dynamische Liste von Rezepten aus unserer Datenbank haben. Und nur um Ihnen zu zeigen, ob wir ein Testrezept hinzugefügt haben, das auftauchen würde. Also werden wir das Ernährungs-Fax überspringen, und ich habe kein Foto dafür, sondern nur um dir hier zu zeigen, und dann gehen wir zu Rezepten, richtig? Perfekt. Sie können sehen, dass das jetzt zu unserer Liste hinzugefügt wurde. Das ist also dynamisch. Jetzt gehen wir zurück und löschen Sie einfach den Testinhalt zuvor. Und doch großartig. Okay, jetzt gibt es ein Problem, wenn wir über gehen wir haben unsere Rezeptliste. Wenn wir Kontakt aufnehmen, haben wir eine Rezeptliste. Alle Seiten haben jetzt diese Liste Recht, was wir in diesem Fall nicht wollen. Also, wie beheben wir das? Nun, wenn wir Teoh gehen, könnten wir zum Block-Layout gehen oder wir könnten zu diesem Bleistift-Symbol gehen und Block konfigurieren auswählen. Ich denke, das wird es tun. Und nun unter diesem Sichtbarkeitsbereich, gehen wir zu Seiten und lassen Sie uns sagen, dass wir diesen Block für eine aufgelistete Seite anzeigen so dass wir nur sicherstellen, dass Rezepte auf dem aufgelisteten Seitenfenster sind. Und was Sie tun können, ist, um, trennen Sie sie durch einen Zeilenumbruch. Also, wenn ich sicherstellen wollte, dass dies auf Rezepte und Kontakt war, könnte ich das tun. Aber wir werden dies nur auf der Rezeptseite behalten. Also mit diesem aktualisierten lassen Sie uns speichern und jetzt können Sie sehen, dass auf der Rezeptseite geblieben ist und mal sehen, ob es auch auf den Menüs ist. Es ist weg, also ist das ziemlich einfach, aber mächtig. Und das ist nur eine Art von geben Ihnen eine Vorstellung davon, wie Sie nutzen können, haben verwendet, um eine dynamische moderne Website zu machen . Alles klar, das wird dieses Video im nächsten Video abschließen. Was wir tun werden, ist daran zu arbeiten, das aufzuräumen, so dass es moderner aussieht und wie Bootstrap aussieht. Wir sehen uns im nächsten Video. 12. Die Bildliste: Willkommen zurück in diesem Video, wir werden diese Ansichtsliste, die wir gemacht haben, so dass es in eine von Bootstrapped Vieren Komponenten passt zu transformieren . In Ordnung, also werden wir aufräumen, wie das aussieht. Also, um zu beginnen, gehen wir zu Bootstrap. Hier sind wir auf der Bootstrap-Website bei der Einführung. Und lassen Sie uns auf Komponenten gehen und was Feinmedien-Objekt ist. Also, was wir tun werden, ist unsere Ansichtsliste in eine von Bootstraps Medienobjekt-Komponenten zu machen . Also werden wir diesen Code direkt hier zu dieser Ausrichtung verwenden. Eins. Ich finde, das sieht gut aus, oder? Also werden wir das Bild nach links bewegen und die Beschreibung ein wenig aufräumen . Wie immer, mit Bootstrap, haben wir Beispielcode unter dem Beispiel. Alles klar, also lassen Sie uns das jetzt kopieren und gehen Sie zurück zu Rezepten und lassen Sie uns die Ansicht von diesem Bleistift-Symbol direkt hier bearbeiten . Jetzt sind wir wieder im U-Views Administrationsfenster. Um dies zu tun, wir das benutzerdefinierte Textfeld verwenden, also sollten wir in der Lage sein, benutzerdefinierten Text einzugeben und Felder hinzuzufügen und zu konfigurieren, und was dies uns erlaubt, ist die Verwendung von droop ALS Tokensystem. Wir haben uns ein wenig mit Token vertraut gemacht, als wir unsere Pfad-Auto-Pfade eingerichtet haben. Aber wieder, was dies tun wird, ist zu suchen, ist, diese Liste wirklich dynamisch zu machen und nach diesen Feldern zu suchen , die durch Token aus der Datenbank dargestellt werden. Richtig. Also lassen Sie uns in unseren HTML einfügen, den wir von Bootstrap kopiert haben, und ich werde das größer machen. Und lassen Sie uns das einfach anwenden, um zu sehen, was passiert. Alles klar, so wie du für jeden sehen kannst und lass es uns noch besser sparen, damit wir sehen können, wie das aussieht . So können Sie für jeden sehen, den wir diesen HTML-Code haben, den wir durch das benutzerdefinierte Textfeld eingefügt haben. Nun, der Trick hier besteht darin, alle unsere Felder zu verbergen und diese Felder mit gezeichneten Pol-Token im benutzerdefinierten Text darzustellen . Also lassen Sie uns das jetzt tun, so werden wir bearbeiten, anzeigen und beginnen, indem wir jedes Feld ausblenden. Also lassen Sie uns dies von der Anzeige ausschließen und klicken Sie auf Anwenden. Gehen wir runter und machen es auch für das Körperfeld. Ernährung Fax wird das und das Foto ausschließen. Was uns übrig bleibt, ist nur das HTML, in das wir es von Bootstrap einfügen. Nun gehen wir in dieses benutzerdefinierte Textfeld und lassen Sie uns Teoh beginnen, ersetzen Sie den statischen Text durch Token. Wir werden das Bild-Tag für jetzt überspringen, weil das etwas Extra erfordert. Aber das einfachste zu Dio ist, hier zu beginnen, ist unter Medienkörper zu gehen und lassen Sie uns, wo es oben ausgerichtete Medien sagt, Lassen Sie uns unter Ersatzmuster finden. Lassen Sie uns kopieren, Titel und fügen Sie es ein. Okay. Und nur um Ihnen diese Zeile für Zeile zu zeigen, können Sie anstelle dieses statischen Titels sehen, haben wir den tatsächlichen Titel des Rezepts. Machen wir das weiter, und ich mache dieses Fenster wieder größer. Okay, für dieses Absatz-Tag löschen wir den gesamten Text und lassen Sie uns nur, während wir hier unten sind. auch Löschen Sieauchall diese Texas Well, wir sind mit zwei Absatz-Tags für diesen unten in Ersatzmustern links, lasst uns den Körper greifen. Und für den letzten, nehmen wir das Ernährungs-Fax Cool und lassen Sie uns treffen. Bewerben Sie sich, um zu sehen, wie das aussieht. Alles klar, Großartig. Lasst uns nun dieses Bild angreifen. Wenn wir uns das Fotofeld ansehen, wird dies tatsächlich als Bild-Tag gerendert. Ordnung, also wollen wir nicht, dass das, was wir von Bootstrapped kopiert haben, ein Bild ist. Stattdessen werden wir dieses Bild tatsächlich zu einem div machen, und wir werden die Klasse die gleiche Align Self starten M R drei beibehalten. Okay, wir können den gesamten Text entfernen, da dieser wieder im Feld dargestellt wird. Und lassen Sie uns einfach sicherstellen, dass wir dieses div schließen, bevor wir weiter gehen und was wir hier einfügen werden, ist das eigentliche Fotofeld. So konnten wir ein Bild nicht in ein Bild einwickeln. Es würde einfach nicht funktionieren. Deshalb mussten wir das zu einem div machen. Okay, also lassen Sie uns das anwenden. Und wie Sie hier sehen können, sieht das gut aus. Jetzt lassen Sie uns das speichern und sehen, was wir auf der Seite bekommen. Ehrfürchtig. So haben wir das erfolgreich gemacht und das sieht wirklich gut aus. Bisher gibt es einige CSS-Bereinigungsarbeit, die wir hier tun werden. Aber nur um zu demonstrieren, können Sie sehen, dass dies eine voll funktionsfähige mobile Website ist, dank Bootstrap. Also gehen wir wieder Teoh Style dies im Browser und bringen es dann zu unseren CSS Stylesheets. Also lassen Sie uns mit der rechten Maustaste auf Inspect klicken und ich werde das wieder nach unten bringen. Teoh das Tablett dort und lassen Sie uns einen Blick auf unsere Marke werfen. Was wir also am Ende tun werden, ist eine Erklärung aus den Ansichten zu schaffen. Wenn Sie also gerade gesehen haben, dass ich ein Pluszeichen dort im Inspektor getroffen habe und wir haben und wir haben diese riesige Klassenliste, die nicht das ist, was wir wollen, wir anfangen, das zu beschneiden, so dass die Stile, die wir machen, dies nur beeinflussen besondere Ansicht. In Ordnung, also jetzt sind wir mit Klassen der Ansicht Ansicht Rezepte Listenansicht I D Rezepte Listen und der Block I d. Ok, aber wir können das sogar noch mehr runterbringen. Wir können diese Brille entfernen, und wir können einfach sagen, div dot Ansicht Rezepte Liste. Und dann können wir anfangen, Klassen auf diese Deklaration zu setzen. Nehmen wir also an, dass innerhalb der div dot Rezepte alle div unmittelbaren ibs auflisten. Wir wollen den Zeh. Haben Sie einen Rand, Boden eines Raumes und eine sagen wir Polsterung Boden eines Raumes als auch zu beginnen, um es aus und wir werden unseren Trick hier wieder tun. Also mit all dem, können wir eine Grenze machen einen Pick Solid. Aber eigentlich, lassen Sie uns Grenze unten ein Pixel solide von E. Das sieht wirklich schön aus, meiner Meinung nach. Das sieht also gut aus. Wenn wir das einfach runterbringen, fängt das schon an. Sie sehen auseinander und besser aus. Und ich denke, was auch hier tun wird, ist einfach den Titel zu machen. Ähm, diese unsere Seite grün das Grün, das wir für die Website verwendet haben. Also, wenn wir diesen Titel auswählen und dann machen wir wieder unsere, ähm, div Dot View Rezepte Liste und sagen wir, jeder fünf a. Weil es einen Link in diesem Überschrift-Tag eingebettet ist. Okay, also lasst uns diese Farbe machen. Nicht Alice Blue, aber was ist nur verwenden, dass und dann diese Farbe umschalten. Ähm, und wählen wir hier eine dieser Farben aus. Das war's nicht. Ähm, Nun, eigentlich, wählen Sie es aus diesem. Ich kann nicht. Ich glaube, das sieht viel besser aus, denke ich, aber wir können es etwas dunkler machen. Wahrscheinlich. Ja. Da gehen wir. So können Sie das auch für Ihr Projekt zu E acht c 60 k kopieren Und mit diesen Stilen, lassen Sie uns einfach diese 1. 1 hier kopieren, die wir gerade gemacht haben oder die 2. 1, die wir gerade gemacht haben. Und lasst uns zum V-S-Code springen. Und es heißt dieses hier, ähm, ähm, Rezepte anzeigen Listenstile. Und fangen wir einfach an, das einzuspielen. Gehen wir zurück und suchen unsere Medienklasse. Und lassen Sie uns die Erklärung kopieren, die wir hier im Browser gemacht haben, sagte er. In „Speichern“ wird es erneut hochgeladen. Ich schließe das ab und spüle das Geld. Und wenn alles richtig läuft, sollten unsere Updates perfekt gemacht werden. In Ordnung. So haben wir erfolgreich einen Droop Alvaro umgewandelt, Sie listen in ein Bootstrap-Media-Objekt mit nur der Schnittstelle, und das beginnt gut aussehen. Alles klar, ich werde im nächsten Video sehen 13. Die Homepage erstellen: In Ordnung. Willkommen zurück in diesem Video, wir werden endlich auf diese Homepage zu bekommen. Wir werden dieses zusätzliche Zeug aufräumen, das sich derzeit auf der Homepage befindet. Und der Plan hier ist, eine Diashow mit Bootstraps Karussell zu erstellen, und wird auch einen Block am unteren Rand mit einigen zusätzlichen Informationen hinzufügen. Also lasst uns direkt hineingehen. So haben Sie vielleicht bemerkt, dass dieses grüne Banner auf der gesamten Website wiederholt wird. Wenn Sie sich erinnern, ist dies etwas, das wir in der Seitenvorlage hinzugefügt. Sie können diese Titelseite mit einer bestimmten TPL-Seite gestalten. Also, wenn Sie uns erinnern, wenn wir zurück zu Visual Studio Code hier gehen würden, haben wir diese Seite dot html dot Zweig verwendet. Nun, wenn Sie wollte Teoh Thema aus dieser Homepage, Sie könnten dio gehen zu Google und Typ Mann dribble. Ich esse von Seitenvorlagen. Tweet. Lassen Sie uns Zweigvorlagen machen. Und lassen Sie mich hier auf diesem dreifachen Austausch sehen. So würden Sie die Homepage auswerfen, damit Sie das kopieren können. Bringen Sie es hier zum Zweigen und fügen Sie das zu Ihren Vorlagendateien hinzu. jedoch Für uns ist unsere Heimatbrückejedochnicht wirklich komplex. Und außerhalb davon gibt es wirklich keine strukturellen Unterschiede. Also werde ich Ihnen einen kurzen Trick zeigen, um diese Onley für die Homepage entfernen zu können. Auf diese Weise könnten wir einfach innerhalb unserer Seite dot html Zweig Vorlage bleiben. Also in Ordnung, also um das loszuwerden, lassen Sie uns das Element untersuchen und Sie können sehen, dass wir diesem Abschnitt eine Klasse von Seitenbanner gegeben haben . Also, was wir hier tun werden, wie wir in einem vorherigen Video getan haben, werden wir das Körperelement auswählen und wir gehen Teoh. Sehen Sie, dass dieser Pfad Titelseite ist eine verfügbare Klasse auf dem Körper Angriff. Wir werden das kopieren und eine neue Körperdeklaration mit dieser Pfadseite erstellen. Das heißt also nur die Titelseite. Wir machen das nur auf die Titelseite. Und lassen Sie uns dann Abschnitt die Punkte Seite Banner. Und mit dem gemacht, lassen Sie uns keine anzeigen. Alles klar, so dass das Seitenbanner nur für die Homepage entfernt wird. Perfekt. Gehen wir also zurück und lassen Sie uns sicherstellen, dass wir das in die Deklaration kopieren, die wir gemacht haben gehen wir zu V. S-Code auf unseren Style dot CSS. Und machen wir hier einen neuen Abschnitt für die Titelseite Silas. Und lassen Sie uns das in Save it out. Geh zurück zum Drew Pool und stelle sicher, dass wir den Kassierer spülen. Awesome! Das ist also weg. Und jetzt können Sie sehen, dass die anderen Seiten noch ihre Banner haben. Cool. Also lassen Sie uns zu Bootstrap gehen und schauen wir uns die Pflegezellenkomponente an, Geben Sie hier ein Beispiel mit Steuerelementen, und das ist wirklich, was wir für unsere Website wollen. Wir wollen in der Lage sein, einen Content-Editor in ein Bild hinzuzufügen und haben, dass es sich um ein Bootstrap-Karussell handelt. Nun, als wir alle unsere Module weit zurück in einem der ersten Videos in diesem Kurs installiert war eines der Module ,die wir installiert haben, dieses Bootstrap, , einfaches Karussell, und ich fand das. Es macht eine wirklich einfache Aufgabe, dieses Bootstrap Schloss zu aktivieren, das wir gerade in der Drew Pull Schnittstelle gesehen haben, also stellen Sie sicher, dass Sie es tun, in der Tat haben, dass installiert. Wenn Sie dies tun, wird es unter Struktur und an der Unterseite, einfache Karussell Elemente sein. Gehen wir also runter und wählen Sie das und was an einem Element ist. Ich werde eine der Dateien aus unseren Kurs-Site-Dateien auswählen. Und mit dem hochgeladenen, machen wir das „Amazing Drinks“, und ich kopiere das und füge das in das Bild Alz. Lassen Sie uns auch den Bildlink und den Titel „Amazing Drinks“ machen. Lassen Sie uns den reet, Atis toe aktiv und das Gewicht auf drei setzen, weil wir an der Spitze sein wollten. Lasst uns diese hier weiter hinzufügen. Wir machen das einfach zusammen. Wir finden das nächste Foto und lassen Sie uns dieses Premium-Kaffee und Espresso machen. Wir werden das auch einfach in jede kopieren, und wir werden diese vier machen. Die schwereren Gegenstände sinken auf den Boden, und ich eigentlich nur Oops, wir müssen auch diesen Status aktiv machen. Und ich habe auch gerade bemerkt, dass ich hier das falsche Foto hinzugefügt habe. Also lassen Sie mich sagen, Sie müssen dies tatsächlich mit diesem Modul löschen. Also lösche ich das. Alles klar, und fügen wir das letzte Bild hinzu. Wir werden dieses Top bewertete vegane Café cool nennen und einfach diesen Prozess wiederholen, es aktiv machen, und wir werden das fünf tun. So sinkt es den ganzen Weg nach unten. Es ist also der letzte. Großartig. Okay, jetzt gibt es noch eine andere Sache, die wir tun müssen, bevor wir es zur Startseite hinzufügen. Wir müssen hier reingehen und die Einstellungen anpassen. Also, wenn wir zu Bootstrap gehen und dann diese Pflegezelle überprüfen, peitschen Sie es noch einmal. Lassen Sie uns den ganzen Weg bis zum unteren Rand des Bildschirms scrollen und werfen Sie einen Blick auf die Optionen. Alles klar, was der Entwickler dieses Moduls getan hat, ist, diese Intervalloptionen sowie einige dieser anderen Optionen hier zu nehmen . Und er brachte das in dieses Modul, damit Sie sehen können, dass wir diese 500 haben. Wir machen hier eigentlich das Intervall. 500 oder entschuldigen Sie mich, 5000. Mein, wir wollen es. Teoh kontinuierlich Zyklus, und wir werden Pauls auf Hover zeigen die Indikatoren, die auf steuert. wir einfach sicher, dass die Assets unter Bootstrap-Image-Typ enthalten sind. Lassen Sie uns Bildflüssigkeit machen, und der Bildstil wird das Originalbild sein. Also lasst uns das perfekt retten. Und um es auf der Startseite zu platzieren, gehen wir zum Blocklayout und legen Sie es in der Haupt. Ah, nicht da. Legen wir es in den Hauptinhaltsbereich und Sie werden die 1. 1 hier sehen, tatsächlich. Ist das Bootstraps? Einfacher Pflege-Zellenblock Es ist Platz, dass drin. In Ordnung, unter den Seiten. Wir werden Front machen. Wir werden diese Anzeige nur auf der Titelseite Land machen. Speichern wir diesen Block und speichern wir die Blöcke noch einmal. Geh nach Hause und lass uns sehen, was hier passiert ist. Okay, ein paar Dinge. Erstens, wir haben immer noch diesen Inhalt, und ich werde Ihnen zeigen, wie Sie das loswerden können. Aber zuerst wollen wir das eigentlich. Das sieht schön aus. Okay, also haben wir einen tollen Job gemacht, unseren Schieberegler hier hinzuzufügen, aber wir wollen eigentlich, dass das voll ist. Wir wollen, dass dies die volle Breite des Bildschirms überspannt, genau wie unsere Bannerbilder . Um dies zu tun, werden wir eine Region im Ziehpool aufbauen. Also lasst uns zu V s Code gehen. Und lasst uns unsere auflisten und das Site-Verzeichnis vom Server auflisten. Also lassen Sie mich sofort darauf eingehen. Wir sind auf der obersten Ebene, also gehen wir zu Themen. Dies ist, wo wir Bootstrap gearbeitet haben und innerhalb der Hauptboote für das Themenverzeichnis zurückgekehrt sind. Lass uns nach unten gehen und Bootstrap für info dot de amel finden. Und wenn Sie nur einen Platz dort und dann mit sftp Erweiterung machen, können Sie dann zur Liste aktiven Ordner gehen und dann sind Sie genau wieder da, wo wir dort angefangen haben. Also in dieser Datei waren in der Lage, einige der Grundlinieneinstellungen für das Thema, an dem mit Injury Bull arbeiteten, zu setzen . Also lassen Sie uns zurück über Teoh the Drew Pull-Schnittstelle und schauen wir uns das Block-Layout an und Sie können hier sehen, dass wir eine Reihe von Regionen haben, die uns zur Verfügung stehen, um Inhalte zu platzieren . Okay, also was wir tun werden, ist eine von ihnen zu machen und es zu diesem Thema hinzuzufügen, so dass wir die Diashow in der Region direkt über dem Inhalt platzieren können. Lassen Sie uns dies hervorgehoben nennen und die nächste Zeile hier ist das, was wir auf diese Region beziehen , wie in der Vorlage hervorgehoben. Aber in der Benutzeroberfläche ist diese nächste Zeile, was der Benutzer sieht. Also werden wir diesen Anruf rufen, denn das ist wirklich, was wir machen, ist ein Anruf und lasst uns das retten. Und dann gehen wir rüber zu der Seite dot html dot Zweig Und was wir hier tun werden, ist das Abschnittsbanner zu finden, das wir dieses gemacht haben, und wir werden einige bedingte Logik hier tun , um zu beginnen. Also gehen wir Teoh, öffnen hier einen Zweigblock und stellen sicher, dass wir das schließen. So öffnen wir das. Nehmen wir an, wenn es Unterstrich Fronten ist, was eine Hilfsfunktion im Drew-Pool ist. Schließen wir einfach den Zweig Block hier. Nun, wir haben es und sagen wir, und wenn ja, beenden wir unsere if-Aussage, okay? Und was ist Taibe da? Und nennen wir diese Seite Punkt hervorgehoben. Alles klar, so deklarieren wir eine Region in einer Template-Datei innerhalb Dribble. Also lasst uns das retten. Gehen wir zurück zu Drew Paul und spült. Das Geld ist in Ordnung, und wenn alles richtig geklappt hat, sollten wir diese Rufregion jetzt zur Verfügung haben, und lassen Sie uns unsere Stiefelgurte Einfache Pflegezelle direkt in diesen Anruf setzen. Und nennen wir diese Front noch einmal. Speichern Sie den Block und ich habe gerade erkannt, dass das bedeutet, dass wir jetzt zwei haben. Also nehmen wir diese, dann haben wir zuvor hinzugefügt, und lassen Sie uns einfach entfernen, dass perfekt und lassen Sie uns das speichern. Lassen Sie uns die Homepage überprüfen, und das sieht schon besser aus. Wir müssen hier etwas aufräumen. Lassen Sie uns den Block konfigurieren. Wir wollen das nicht, also werden wir einfach wirklich. Nein, lassen Sie uns das behalten. Wir werden den Anzeigentitel deaktivieren und den Block speichern. Großartig! In Ordnung. Und jetzt lasst uns die C s ein bisschen hier aufräumen, wie wir es getan haben. Wir wollen also, dass diese Beschriftung vertikal in der Mitte des Karussell ausgerichtet wird. Also lasst uns mit der rechten Maustaste auf Premiumkaffee und Espresso inspizieren und dann gehen wir eins zu diesem Div Karussell Untertitel und ich gehe zurück. Also, das waren auf diesem und Sie können hier sehen, dass Karussellbeschriftung bereits einige Stile damit verbunden hat , und es ist irgendwie hier mit, um absolute Positionierung mit dieser CSS-Deklaration positioniert zu werden . Also, was wir tun werden, ist nur anpassen, so dass es erste Hintergründe von schwarz. Auf diese Weise können wir es sehen, und ich denke auch, dass es dort wirklich schön aussieht und hier auch eine Top-Deklaration hinzufügen wird. Und nennen wir das wie 50%. Und wie Sie sehen können, ist das jetzt ein wackeliger. Wie beheben wir das? Nun, wir müssen eine bestimmte Höhe einstellen, um das zu beheben. Lassen Sie uns also die Höhe 75 Pixel machen und gehen Sie zurück zu unserem CSS-Stylesheet und fügen Sie diese Stile hinzu, die wir gerade für die Karussellbeschriftung gemacht haben. Und lassen Sie uns das aussagen. Geh zurück, spüle das Geld und erfrischen. Alles klar, ich finde, das sieht ziemlich gut aus, okay? Und das letzte, was in diesem Video tun wird, ist ein Bootstrap Jumbotron am Ende der Homepage über auf der Bootstrap-Website unter Komponenten hinzuzufügen . Lassen Sie uns Jumbotron finden, und das sieht wirklich schön aus, also denke ich, dass wir diesen Code kopieren werden. Lassen Sie uns zurückgehen, um alle zu hängen, und die Art und Weise, wie wir dies geschehen werden, ist, indem Sie einen Block hinzufügen. Also gehen wir zum Strukturblock-Layout, fügen Sie benutzerdefinierten Block hinzu und lassen Sie uns einfach diesen Kontakt Jumbotron aufrufen, und dann, was wir tun werden, ist das Textformat voll zu machen. HTML. Klicken Sie auf die Quellschaltfläche und fügen Sie diese in ein. Na gut, also nennen wir es die Lanes. Begin Cafe Cage Cafe, und wir werden einfach in einige der gefälschten Adresse Info hier setzen. Lassen Sie uns die Personalabteilung dort behalten. Diese horizontale Regel, die schön aussieht. Und dann werden wir das Datum und die Uhrzeit eintragen, dass sie offen sind. Also lasst uns das machen. Und dann denke ich, was wir hier tun werden, ist es Teoh-Menü zu verknüpfen. Okay, lassen Sie uns hier sehen, dass funktioniert und gehen wir in die eigentliche Quelle, um diese Informationen zu ändern. Also, anstatt mehr zu erfahren, rufen wir es an, schauen wir uns das Menü an, okay, und, ähm, sagen wir das aus. Ehrfürchtig. Wir werden den Titel nicht anzeigen. Wählen wir Seiten aus und lassen Sie uns dann einfach vorne gehen für jetzt und dann können wir das direkt in die Rufregion direkt von hier aus setzen, also speichern wir das. Stellen Sie sicher, dass es unter dem Bootstrap einfache Pflege Cellblock ist und gehen Sie dann auf den unteren Hit speichern Blöcke und gehen Sie zurück auf die Website. Das sieht gut aus, aber ich denke, wir können das etwas stylen. Finden wir den tatsächlichen Block I d. Also blockieren Sie Kontakt Jumbotron ist das, wonach wir dort suchen. Lassen Sie uns ein Plus hinzufügen. Und zum Glück haben sie div mit einer Idee von Blockkontakt. Jumbotron bereits ausgewählt. Damit lassen Sie uns Textillinien zentrieren. Okay, also werden wir es zentrieren. Ich finde, das sieht wirklich schön aus. Und dann lassen Sie uns etwas Polsterung hinzufügen. Um, machen wir eine Polsterung von Lasst uns eine Polsterung machen, um zu rammen. Das sieht viel besser aus. Ehrfürchtig. In Ordnung, also nehmen wir die Stildeklaration hier und lassen Sie uns das kopieren. Werfen Sie es in unsere CSS-Datei, speichern Sie es aus. Löschen Sie den Cache. Perfekt. In Ordnung. Und es gibt tatsächlich eine andere Sache, die wir dio-, ähm, unsere Kontaktseiten die einzige Seite, die leer ist. Also lassen Sie uns hier unten auch einen Jumbotron hinzufügen, damit wir wieder nach Hause gehen. Wir werden an ihm von diesem Jumbotron auswählen, den wir gemacht haben. Lassen Sie uns unter Quelle gehen hier in wählen Sie alle Kopie, gehen Sie zurück und dann auf der Kontaktseite, lassen Sie uns bearbeiten. Und bevor wir Quelle auswählen, gehen wir zu vollständigem HTML und fügen wir das ein. Wir werden tatsächlich 1 800 ehrfürchtige Straße nehmen und machen, dass der Titel diesen Link ausschlagen wird und dann machen wir einen neuen Zeilenumbruch und sagen: Rufen Sie uns an 111222333 an und lassen Sie uns das speichern. Ehrfürchtig. Ich mag es, ehrfürchtig zu sagen, viel, wie Sie alle sagen können. Also dann lassen Sie uns lieber, dass dies Text ausrichten, zentrieren ist. Aber anstatt eine Stildeklaration zu machen, wird dies tatsächlich nur innerhalb der Wiz E Perücke bearbeiten. Also gehen wir zur Quelle Von dann an die Jumbotron Div, lassen Sie uns Stil gleich Text ausrichten. Ähm, Mitte. Perfekt. Das sollte also beheben. Und das sieht schon besser aus. Okay, vielen Dank, dass Sie dieses Video gesehen haben, und ich werde Sie im nächsten sehen. 14. Vielen Dank!: Hallo, alle. Herzlichen Glückwunsch zum Abschluss dieses Videos. Siri und ich möchten uns persönlich bedanken, dass Sie sich die Zeit genommen haben, mit mir zu lernen. Ich hoffe wirklich, du warst in der Lage, Teoh, die Informationen dieses Kurses nützlich zu finden. Ich hatte sicherlich eine Menge Spaß, es zu machen. Und bitte, wenn es etwas gibt, das für Sie keinen Sinn ergibt, zögern Sie nicht, hier ein Gespräch zu beginnen, und ich werde mein Bestes tun, um so schnell wie möglich bei Ihnen zu kommen. Nachdem Sie diesen Kurs abgeschlossen haben, haben Sie eine fertige moderne Website-Vorlage, die Sie verwenden können, um an Ihre Bedürfnisse anzupassen. Es gibt viele Funktionen, die zu dieser Website hinzugefügt werden können, die wir erstellt haben, um sie noch moderner und dynamischer zu machen . Wenn Sie dieses Video den ganzen Weg durch gesehen haben und Sie daran interessiert sind, dass ich ein Video über fortgeschrittenes Thema erstellen, wo wir tatsächlich eine benutzerdefinierte Knotenvorlagenseite erstellen und ein wenig tiefer in die Art und Weise, wie wir diese Website erstellen können, Bitte lassen Sie mich wissen, wenn es genug Interesse gibt, dass ich wieder daran arbeiten werde, diesen Kurs zu bauen. Vielen Dank, dass Sie mit mir gelernt haben. Und ich hoffe, Sie in einer anderen meiner Trainingsreihe zu sehen. Achten Sie darauf,