Peppubuild-Anwendungsfall: Erstellen Sie Ihre erste Website (1)

Peppubuild ist eine No-Code-Plattform, mit der Sie Ihre Website erstellen können, ohne Code schreiben zu müssen. Das Erstellen einer Website kann entmutigend sein, insbesondere wenn Sie neu im Programmieren oder Website-Design sind. Peppubuild vereinfacht diesen Weg und bietet eine benutzerfreundliche Plattform, mit der Sie Websites entwickeln und gleichzeitig grundlegende Webentwicklungskonzepte beherrschen können. Betrachten Sie es als eine Mischung aus Kreativität und Technologie, bei der Bildung auf Innovation trifft.

Warum eine Website mit Peppubuild erstellen?

Peppubuild bietet einen barrierearmen Einstieg in die Webentwicklung. Zu seinen Funktionen gehören:

• Vorgefertigte Vorlagen: Beginnen Sie schnell mit anpassbaren Website-Layouts.
• Visuelle Bearbeitung: Sehen Sie Ihre Änderungen in Echtzeit, ohne tief in den Code einzutauchen.
• Codeansicht: Für diejenigen, die HTML, CSS und JavaScript lernen möchten, ist ein Code-Editor integriert, um das praktische Lernen zu erleichtern.
• Interaktive Tutorials: Schritt-für-Schritt-Anleitungen stellen sicher, dass Sie nie stecken bleiben.

Erste Schritte mit Ihrer ersten Website

Um ein Projekt zu starten, müssen Sie sich zunächst authentifizieren. Folgen Sie dem Link oben, wenn Sie noch nicht authentifiziert sind. Klicken Sie anschließend wie unten gezeigt auf die Schaltfläche „Neues Projekt“.

Klicken Sie auf „Projekt leeren“ und befolgen Sie die Anweisungen, um Ihrem Projekt einen Namen zu geben. Als Nächstes werden Sie zum Arbeitsbereich des Projekts weitergeleitet.

Peppubuilds Symbolleiste

Zuerst werden wir die Benutzeroberfläche von Peppubuild erkunden. So sollte Ihr Editor aussehen. Ich habe die Symbole der Symbolleiste von links nach rechts nummeriert.

Symbol 1: Dies ist das Blocksymbol. Blöcke sind vorgefertigte Komponenten, die Sie in den Editor ziehen können, um Teile Ihrer Website zu bilden. Es gibt beispielsweise Text- und Linkblöcke, die Sie in den Editor ziehen können. Wenn Sie auf die Schaltfläche klicken, werden die verschiedenen verfügbaren Blöcke im rechten Seitenbereich geöffnet.

Symbol 2: Dieses Symbol ist bereits aktiv, es ist der Style Manager. Da der Editor leer ist, steht Ihnen nur ein Text zur Verfügung, der Sie dazu auffordert, zunächst ein Element auszuwählen. Über den Stil-Manager können Sie Farbe hinzufügen, Texte vergrößern und andere Aktionen ausführen.

Symbol 3: Das Lineal-Symbol ist nützlich für Experten, denen die Web-Reaktionsfähigkeit egal ist, da sie Blöcke an jede beliebige Position im Editor ziehen können. Dies wirkt sich auf die Elemente und die Seitenausrichtung aus. Daher sollten Sie dies nur verwenden, wenn Sie technischer Entwickler sind und die Seite neu ausrichten können.

Symbol 4: Mit dem Symbol Löschen können Sie alles auf der Seite löschen. Wenn Sie nur einzelne Komponenten auf der Seite löschen möchten, klicken Sie darauf und verwenden Sie die Schaltfläche „Löschen“, die um die Komponente angezeigt wird.

Symbol 5: Dies ist das Rückgängig-Symbol. Während Sie Änderungen mit STRG Z rückgängig machen können, können Sie auch die Schaltfläche „Rückgängig“ verwenden. Da wir keine Schaltfläche zum Wiederherstellen haben, können Sie STRG Y verwenden.

Symbol 6: Dies ist das Symbol Codeblock, mit dem Sie den Code Ihrer Seite im HTML- und CSS-Format anzeigen können. Wenn Sie zu einer neuen Seite navigieren, ändert sich der Code für jede Seite, um dem Inhalt der Seite zu entsprechen.

Symbol 7: Dies ist das Symbol Vollbild, mit dem Sie den Editor auf die gesamte Seite erweitern können.

Symbol 8: Mit dem Symbol Vorschau können Sie den Inhalt des Editors ohne die Seitenbereiche anzeigen.

Symbol 9: Dies ist das Symbol Komponente anzeigen. Wenn es aktiv ist, wird die gepunktete Hilfslinie um jede Komponente herum angezeigt.

Symbol 10: Das Symbol Seiten wird in der rechten Seitenleiste geöffnet. Es enthält verschiedene Schaltflächen zum Verwalten von Seiten und zum Veröffentlichen des Projekts. Von „Seiten hinzufügen“ über „Webtitel hinzufügen“ bis „Projekt veröffentlichen“.

Jedes Projekt hat eine Indexseite, die die Startseite ist. Bitte löschen oder bearbeiten Sie den Namen dieser Seite nicht. Mit der Schaltfläche „Seite hinzufügen“ können Sie neue Seiten hinzufügen.

Symbol 11: Das Symbol Gerät ist nützlich, um Ihr Projekt auf verschiedenen Geräten zu überprüfen, vom Desktop bis zu mobilen Geräten.

Symbol 12: Das Symbol Ebenen zeigt einen Baum aller Komponenten im Editor und der darin enthaltenen Elemente.

Symbol 13: Das Logo navigiert zum Dashboard, anstatt die Zurück-Schaltfläche im Browser zu verwenden.

Symbol 14: Auf der Registerkarte „Eigenschaften“ werden die Eigenschaften jedes Elements angezeigt. Wenn Sie einen Block in den Editor ziehen, können Sie Eigenschaften auf der Registerkarte „Eigenschaften“ überprüfen und festlegen. Links verfügen beispielsweise über eine Href-Eigenschaft, die die URL des Links akzeptiert und festlegt.

Symbol 15: Die Schaltfläche „Daten hinzufügen“ ist für Webanwendungen. Dadurch können Sie externe Daten hinzufügen.

Peppubuilds Block

Peppubuild verfügt über viele nützliche Blöcke zum Erstellen Ihrer Seite, die in verschiedene Kategorien unterteilt sind.

• Navigationsleiste: Diese enthält die obere und untere Navigation sowie eine Seitenleiste.

• Seiten: Dies enthält Blöcke für eine vorgefertigte Seitenvorlage. Sie sollten mit diesem Block beginnen, wenn Sie Hilfe beim Einrichten Ihrer Website benötigen.

• Ausrichtung: Blöcke, die die Ausrichtung und das Layout der Seite ändern, wie das Flex Center zum Anordnen von Inhalten in der Mitte der Seite.

• Abschnitt: Enthält Blöcke wie den Heldenabschnitt, der einen ganzen Abschnitt der Seite einnimmt.

• Elemente: Die Elemente, aus denen die Website besteht, finden Sie im Abschnitt „Elemente“.

• Formulare: Die Blöcke zum Erstellen eines vollständigen Formulars finden Sie hier. Das Bootstrap-Formular ist die beste Wahl, wenn Sie neu in der Webentwicklung sind.

• Animationen: Karussells und andere Animationen für Ihre Website finden Sie im Bereich Animationen.

• Basic: Der Basic-Block enthält grundlegende Elemente für Ihre Website wie Bilder, Links und Texte.

Fazit: Wie geht es weiter?

Im nächsten Teil dieser Serie befassen wir uns eingehender mit der Gestaltung Ihrer Website, der Integration grundlegender Interaktivität mit JavaScript und der Veröffentlichung Ihrer Website für die ganze Welt!

Mit Peppubuild ist die Erstellung Ihrer ersten Website keine Herausforderung mehr – es ist eine aufregende Reise in die digitale Welt. Beginnen Sie noch heute mit dem Bau!

Geben Sie uns einen Stern auf Github, wenn Ihnen unsere Arbeit gefällt. Senden Sie außerdem eine Nachricht an contact@peppubuild.com, wenn Sie Peppubuild für Ihre Agentur einrichten möchten. Wir freuen uns, von Ihnen zu hören.

Das obige ist der detaillierte Inhalt vonPeppubuild-Anwendungsfall: Erstellen Sie Ihre erste Website (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!