Auf dieser Seite
- Über die Schulung
- Bevor Sie beginnen
- Schritt 1: Wenden Sie ein Design auf Ihr adaptives Formular an
- Schritt 2: Aktualisieren Sie Ihr adaptives Formular
- Schritt 3: Erstellen Sie ein benutzerdefiniertes Design für Ihr adaptives Formular
- Schritt 4: Gestalten Sie einzelne Komponenten
- Schritt 5: Bonusabschnitt: Verwenden von Webschriftarten in einem benutzerdefinierten Design
某些 Creative Cloud 应用程序、服务和功能在中国不可用。
Sie sehen sich Hilfeinhalte der folgenden Version an:
- 6.3
- Ältere Versionen
| Diese Schulung ist ein Schritt in der Reihe Erstellen Ihres ersten adaptives Formulars. Es wird empfohlen, der Serie in chronologischer Reihenfolge zu folgen, um den vollständigen Anwendungsfall zu verstehen, auszuführen und zu demonstrieren. |
Sie können Themen verwenden, um einem adaptiven Formular eine eindeutige Darstellung und einen einzigartigen Stil zu geben. Sie können Standarddesigns anwenden, die mit dem adaptiven Formulareditor bereitgestellt werden, oder eigene Designs erstellen. AEM Forms bietet einen Design-Editor zum Erstellen benutzerdefinierter Designs. Ein einzelnes Design kann das gleiche Aussehen auf Mobilgeräten, Tablets oder Desktops bieten. Vorkenntnisse von CSS oder LESS sind nicht erforderlich, um den Designeditor zu verwenden, aber sie sind erwünscht.
Am Ende der Schulung lernen Sie Folgendes:
- Wenden Sie ein Standarddesign auf ein adaptives Formular an
- Erstellen Sie mithilfe des Designeditors ein Design für das adaptive Formular
- Entwerfen Sie einzelne Komponenten
- Bonusabschnitt: Verwenden Sie Webfonts in einem benutzerdefinierten Design
Nach dem Abschließen des Lernprogramms sieht das Formular wie folgt aus:
Laden Sie die unten abgebildeten kopfzeilenartigen und Logo-Bilder auf Ihrem lokalen Computer herunter. Die Kopfzeile des adaptiven Formulars shipping-address-add-update-form verwendet die kopfzeilenartigen und Logo-Bilder. Das kopfzeilenartige Bild erscheint auf der rechten Seite der Kopfzeile.
Herunterladen
Der Adaptive Forms Editor bietet mehrere Standarddesigns. Wenn Sie beabsichtigen, keinen benutzerdefinierten Stil für Ihr adaptives Formular zu verwenden, können Sie Ihre adaptiven Formulare auch mit einem Standarddesign veröffentlichen. Designs sind unabhängig von adaptiven Formularen. Sie können dasselbe Design auf mehrere adaptive Formulare anwenden. So wenden Sie ein Design auf ein adaptives Formular an:
-
Öffnen Sie Ihr adaptives Formular zum Bearbeiten.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Das oben angezeigte Design erfordert Änderungen am Platzhaltertext und Logo des vorhandenen adaptiven Formulars. Führen Sie die folgenden Schritte aus, um die erforderlichen Änderungen vorzunehmen:
-
Ändern Sie das vorhandene Logo und den Text der Kopfzeile. Entfernen des Logos:
- Öffnen Sie das Formular im Formulareditor.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html - Tippen Sie auf das Logo-Bild in der Kopfzeilenkomponente und tippen Sie auf
Eigenschaften. Tippen Sie in der Bildeigenschaft auf X, um das vorhandene Logobild zu entfernen. - Tippen Sie auf „Hochladen“, wählen Sie logo.png und tippen Sie auf
, um die Änderungen zu speichern. Das Bild wurde im Abschnitt Bevor Sie beginnen heruntergeladen. - Tippen Sie auf den Kopfzeilentext We.Retail und dann auf
Bearbeiten . Ändern Sie den Kopfzeilentext in wir verkaufen. Wenden Sie Fettformatierung nur auf wir in wir verkaufen an.
- Öffnen Sie das Formular im Formulareditor.
-
Entfernen Sie Titel und fügen Sie Platzhaltertext hinzu:
- Tippen Sie auf das Feld „Kunden-ID“ und tippen Sie auf das Symbol Eigenschaften
. - Kopieren Sie den Inhalt des Felds Titel in das Feld Platzhaltertext.
- Löschen Sie den Inhalt des Felds Title und tippen Sie auf .
- Wiederholen Sie die vorherigen drei Schritte für alle Textfelder, das numerische Feld und das E-Mail-Feld im Formular.
- Tippen Sie auf das Feld „Kunden-ID“ und tippen Sie auf das Symbol
Sie können den Design-Editor verwenden, um benutzerdefinierte Designs zu erstellen. Der Design-Editoreditor ist ein leistungsstarker WYSIWYG-Editor. Es ist eine visuelle Methode, um CSS auf verschiedene Komponenten eines adaptiven Formulars anzuwenden. Es bietet bessere Steuerelemente, um Komponenten und Bereiche eines adaptiven Formulars zu gestalten.
Ein Design ist eine separate Entität wie adaptive Formulare. Es enthält Stile (CSS) für die Komponenten und Bereiche eines adaptiven Formulars. Die Stile umfassen Eigenschaften wie Hintergrundfarben, Statusfarben, Transparenz, Ausrichtung und Größe. Wenn Sie ein Design anwenden, wird der angegebene Stil auf die entsprechenden Komponenten eines adaptiven Formulars angewendet.
In diesem Lernprogramm werden Kopf- und Fußzeilen, Text- und numerische Komponenten, Anhangskomponenten und Schaltflächen formatiert. Beginnen wir mit dem Erstellen eines Designs:
-
Melden Sie sich bei Ihrer AEM-Autoreninstanz an und navigieren Sie zu Adobe Experience Manager > Formulare > Designs. Die Standard-URL lautet http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.
-
Tippen Sie auf Erstellen und wählen Sie Design. Die Seite „Design erstellen“ mit den Feldern zum Erstellen eines Designs wird angezeigt. Die Felder „Titel“ und „Name“ sind obligatorisch.
- Titel: Geben Sie einen Titel des Designs an. Zum Beispiel: Globales Design.Der Titel hilft Ihnen, das Design in der Liste der Designs zu identifizieren.
- Name: Geben Sie den Namen des Designs an. Zum Beispiel: Globales-Design.Im Repository wird ein Knoten mit dem angegebenen Namen erstellt. Wenn Sie mit der Eingabe des Titels beginnen, wird automatisch ein Wert für das Feld „Name“ vorgeschlagen. Sie können den vorgeschlagenen Wert gegebenenfalls ändern. Im Feld „Name“ dürfen nur alphanumerische Zeichen, Bindestriche und Unterstriche eingegeben werden. Ungültige Eingaben werden durch Bindestriche ersetzt.
-
Tippen Sie auf Erstellen. Ein Design wird erstellt und es wird ein Dialogfeld zum Öffnen des Formulars zur Bearbeitung angezeigt. Tippen Sie auf Öffnen, um das neu erstellte Formular in einer neuen Registerkarte zu öffnen. Design wird im Design-Editor geöffnet. Zum Formatieren verwendet der Design-Editor ein Standardformular, das mit AEM Forms geliefert wird.
Informationen zur Verwendung der Benutzeroberfläche des Design-Editors finden Sie unter Info zum Design-Editor.
-
Tippen Sie auf Designoptionen
> Konfigurieren. Wählen Sie im Feld Vorschauformular das adaptive Formular shipping-address-add-update-form und tippen Sie auf Speichern. Jetzt ist der Design-Editor konfiguriert, um Ihr eigenes adaptives Formular anstelle des adaptiven Standardformulars zu benutzen. Tippen Sie auf Abbrechen, um zum Design-Editor zurückzukehren.
Adaptives Formular mit dem Standardformular
Design-Editor mit dem adaptiven Formular „shipping-address-add-update-form“
Kopf- und Fußzeile bieten einem adaptiven Formular ein konsistentes und unverwechselbares Aussehen. Im Allgemeinen enthält die Kopfzeile das Logo und den Namen der Organisation. Die Fußzeile enthält Copyright-Informationen, die in allen Formularen einer Organisation identisch bleiben. So formatieren Sie Kopf- und Fußzeile des adaptiven Formulars „shipping-address-add-update-form adaptive form“:
-
Erweitern Sie das Akkordeon „Hintergrund“-des Kopfzeilen-Widgets und stellen Sie die Hintergrundfarbe auf F6921E ein.
Bewegen Sie den Mauszeiger über Bild & Farbverlauf > + Hinzufügen und tippen Sie auf Bild.Legen Sie die folgenden Eigenschaften fest und tippen Sie auf
.Eigenschaft Wert Bild Laden Sie header-style.png hoch. Das Bild wurde im Abschnitt Bevor Sie beginnen heruntergeladen. Position Rechts unten Anordnung Keine Wiederholung
Seitliches Bedienfeld ein/aus.
, um einen anderen Wert für jedes Feld zur Verfügung zu stellen.Formatieren Sie die Datenerfassungskomponente und wenden Sie einen Hintergrund auf das adaptive Formular an.
Sie können mehrere Komponenten in einem adaptiven Formular verwenden, um Daten zu erfassen. Zum Beispiel Textfeld und Zahlenfeld. Sie können für alle Datenerfassungskomponenten einen identischen Stil bereitstellen oder für jede Komponente einen eigenen Stil zuweisen. In diesem Lernprogramm wird ein identischer Stil auf numerische Felder (Kunden-ID, Postleitzahl) und Textfelder (Kunden-ID, Name, Lieferadresse, Status, E-Mail) angewendet. So gestalten Sie die Datenerfassungskomponenten:
Sie können ein benutzerdefiniertes Design verwenden, um allen Schaltflächen des adaptiven Formulars einen identischen Stil zuzuweisen und Inline-Styling , um einen Stil auf eine bestimmte Schaltfläche anzuwenden. So gestalten Sie die Schaltflächen:
-
Wenden Sie das benutzerdefinierte Design, Globales Design, auf Ihr adaptives Formular an. Wenn der Stil das adaptive Formular nicht widerspiegelt, bereinigen Sie den Browser-Cache und versuchen Sie es erneut.
Einige Stile gelten nur für eine bestimmte Komponente. Solche Komponenten werden im adaptiven Formulareditor gestaltet.
-
Öffnen Sie Ihr adaptives Formular zum Bearbeiten.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html -
Tippen Sie auf die Option Von Behörden anerkannter Adressnachweis und tippen Sie auf das Symbol
. Legen Sie die folgenden Eigenschaften fest:Akkordion Eigenschaft Wert Abmessungen und Position Gleitkomma Links Abmessungen und Position Breite 73% Abmessungen und Position Erweiterte Umrandung - Links: 10px
Abmessungen und Position Höhe 40px Abmessungen und Position Rand - Rechts: 2rem
- Links: 10rem
Hintergrund Hintergrundfarbe FFFFFF Rand Rahmenbreite 1px Rand Rahmenstil Durchgezogen Rand Rahmenfarbe A7A9AC Rand Rahmenradius 7px Text Schriftfamilie Arial Text Schriftfarbe BCBEC0 Text Schriftgrad 18px Text Zeilenhöhe 2
Sie können verschiedene Schriftarten verwenden, um ein adaptives Formular zu entwerfen. Alle Geräte, auf denen das adaptive Formular angezeigt wird, verfügen möglicherweise nicht über die zum Entwerfen des adaptiven Formulars verwendeten Schriftarten. Sie können einen Webfont-Dienst verwenden, um erforderliche Schriftarten auf dem Zielgerät bereitzustellen.
Adobe Typekit ist ein Webschriftartdienst. Sie können den Dienst mit adaptiven Formularen konfigurieren und verwenden. So verwenden Sie Adobe Typekit in einem adaptiven Formular:
-
Erstellen Sie ein Adobe Typekit-Konto, erstellen Sie ein Kit, fügen Sie dem Kit die Schriftart Myriad Pro hinzu, veröffentlichen Sie das Kit und erhalten Sie die Kit-ID. Es ist erforderlich, Adobe Typekit-Schriftarten (Webfonts) in einem adaptiven Formular zu verwenden.
-
Navigieren Sie auf dem AEM Forms-Server zu
Adobe Experience Manager > Tools 
> Bereitstellung > Cloud-Dienste. Navigieren Sie auf der Seite Cloud-Dienste zu Drittanbieterdienste > Typekit und klicken Sie auf Jetzt konfigurieren unter Typekit. Wenn eine Konfiguration bereits zur Verfügung steht, klicken Sie auf die Schaltfläche +, um eine neue Instanz zu erstellen.Geben Sie im Dialogfeld „Konfiguration erstellen“ einen Titel für die Konfiguration an und klicken Sie auf Ersellen. Daraufhin werden Sie zur Seite „Konfiguration“ geleitet. Geben Sie im Dialogfeld „Komponente bearbeiten“, Ihre Kit-ID ein und klicken Sie auf OK.
-
Konfigurieren Sie Ihr Design für die Verwendung der TypeKit-Konfiguration. Öffnen Sie in der Autorinstanz ein Design im Design-Editor Globales Design.Navigieren Sie im Design-Editor zu „Designoptionen“
> „Konfigurieren“. Wählen Sie im Feld Typekit-Konfiguration das Kit und klicken Sie auf Speichern.Die zum Typekit hinzugefügten Schriftarten sind zur Auswahl im Akkordeon Text aller Komponenten verfügbar.