Hallo zusammen und willkommen zu diesem Video über das Erstellen und Prototypisieren von Seiten, das in 3 Teile unterteilt wird. Heute konzentrieren wir uns auf die erste Phase.
Dieser Teil besteht im Prototyping. Das heißt, wir identifizieren und erstellen die Elemente, die wir benötigen, um die Hauptstruktur oder das Skelett der Webseite zu gestalten.
Hier auf dem Bildschirm sehen wir das endgültige Ziel, das wir erreichen wollen.
Wenn wir zu Aptugo wechseln, sehen wir die bereits definierte Datenbank, die wir benötigen. Außerdem finden wir eine einzelne Seite, die standardmäßig automatisch von Aptugo erstellt wurde, um Daten zu verwalten, in diesem Fall Autos. Hier haben wir bereits ein Auto geladen, und es ist dasselbe, das wir im Figma-Design haben, was bedeutet, dass wir das Backend bereit haben, um eine Seite genau so zu erstellen, wie Sie sie auf dem Bildschirm sehen.
Lassen Sie uns damit beginnen, zu Seiten zu gehen und eine neue Seite zu erstellen, die wir "Autodetails" nennen werden. Der Pad wird "details" sein und der Name wird ebenfalls "details.tsx" sein.
Nachdem wir dies getan haben, ziehen wir es in das "Dashboard", damit es auf derselben Höhe wie "Autos" platziert wird. Und wir fahren fort mit Speichern und Erstellen.
Wie Sie sehen können, wenn wir zu diesem Teil zurückkehren und es aktualisieren, sehen wir, dass "Autodetails" erscheint, was eine leere Seite ist, da wir in Aptugo noch nichts definiert haben.
Nachdem wir dies gesehen haben, wird unser nächster Schritt folgender sein: Wenn wir in Aptugo auf die "Autodetails"-Seite gehen, die leer ist, können wir sehen, dass alle Standardseiten in 5 Phasen unterteilt sind. Vor dem Seitenrendering, das besteht aus dem, was gesehen wird, bevor die Seite geladen wird, der Seitenkopf, der Body, der Seitenfuß und nach dem Seitenrendering.
Grundsätzlich werden die ersten beiden Phasen sowie die letzte im Allgemeinen verwendet, um logischen Code und Funktionalität zu generieren, die visuell nicht auf der Webseite gesehen werden. Alle Elemente, die wir verwenden werden, um Dinge zu schreiben, zu rendern oder anzuzeigen, werden im Body oder im Seitenfuß sein. Also gehen wir zuerst zurück zu Figma und teilen dies in 2, den Body und den Seitenfuß.
Da diese Aufteilung bereits vorgenommen wurde, werde ich es Ihnen direkt zeigen. Wir haben ein Quadrat, das den gesamten Body enthält, und ein Rechteck, das den Footer enthält. Diese Phasen sind bereits in Aptugo unterteilt, wir haben bereits einen Body und einen Footer erstellt.
Was wir jetzt tun können, ist, einen Container für jeden zu erstellen, um zu verhindern, dass sie größer als nötig sind. Wir wählen die lg-Option, damit die Breite eine Standardbildschirmgröße hat.
Sobald dies erledigt ist, gehen wir zurück zum Design oder Figma und unterteilen die roten Kästchen in andere kleinere Kästchen, um zu sehen, wie viele Abschnitte wir innerhalb jedes roten Kästchens hätten. Wir haben den Body in zwei und den Footer in drei Abschnitte unterteilt.
Jetzt gehen wir zurück zu Aptugo und wiederholen den Prozess, nur dieses Mal fügen wir für die orangefarbenen Kästchen im Body zwei divs hinzu und drei im Footer. Wir gehen erneut zurück zum Design, wir haben die roten Kästchen fertig unterteilt und die orangefarbenen erstellt.
Unser nächster Schritt wird sein, diese orangefarbenen Kästchen in noch kleinere Kästchen oder divs zu unterteilen. Wir werden dies im zweiten Teil dieses Tutorials angehen. Ich hoffe, es hat Ihnen gefallen, und wie immer, danke fürs Zuschauen!
. . .
Für weitere Details besuchen Sie bitte: www.aptugo.com