• Topics
• FAQs
• API Dokumentation
• Training und Services
• Important Notice

3. Seiten bearbeiten

Zum Bearbeiten der "Home"-Seite öffnen Sie diese, indem Sie sie aus dem Dropdown-Menü der Breadcrumb Navigation auswählen.

Die Seitenansicht beinhaltet drei Hauptteile:

• Die Toolbar im oberen Bereich bietet allgemeine Bearbeitungsoptionen.
• Die Elemente Palette auf der linken Seite beinhaltet "Elemente" - die Bausteine für Ihre Projekte.
• Der Editierbereich in der Mitte Ihrer Arbeitsfläche stellt die Seite dar, welche Sie designen wollen.

Die "Home"-Seite in unserem Beispiel halten wir sehr simpel, da sie aus nur drei Elementen bestehen wird:

• eine großes Bild, das sich über die gesamte Seitenbreite aufspannt,
• eine Überschrift mit "Starten Sie heute ins Prototypen!", und
• eine Aufforderung in der Form eines "Registrieren Sie sich kostenlos"-Buttons.

Fügen Sie die Elemente (Bild, Überschrift und Button) zu Ihrer "Home"-Seite hinzu, indem Sie sie mit der Maus von der Elemente Palette in den Editierbereich ziehen.

Wenn Sie die Elemente nicht sofort finden können, geben Sie Ihren Namen direkt in das Suchfeld der Elemente Palette im oberen Bereich ein. Sie können die Auswahl der Suchergebnisse mit den Pfeiltasten steueren und sie mit "Enter" hinzufügen.

Ordnen Sie die Elemente einfach an, indem Sie sie auf die gewünschte Position ziehen und passen Sie ihre Größe an. Dafür wählen Sie das Element mit einem Klick aus und ziehen die Ankerpunkte, welche um das Element herum erscheinen, bis die gewünschte Größe erreicht ist. Wenn Sie wollen, können Sie auch ein Bild hochladen und es statt des "Bild"-Elements verwenden, welches sonst nur als generischer Platzhalter fungiert. Um ein Bild hochzuladen, ziehen Sie die Datei einfach aus Ihrem Datei-Ordner in den Editierbereich. Das Bild wird auch der Elemente Palette für eine spätere Verwendung hinzugefügt. Ein Doppelklick auf die Elemente ermöglicht das Editieren des Inhalts. Beim Bearbeiten des Text-Elements, erscheint ein Texteditor in der Toolbar über dem Element, sodass der Text formatiert werden kann, z. B. in Fettschrift wie hier:

Ihre Seite sollte nun so aussehen:

Super gemacht! Nun bearbeiten wir die anderen beiden Seiten. Zur "Sign Up"-Seite fügen wir drei Texteingabe-Elemente hinzu: eine "Combo Box", eine "Checkbox" und einen "Button". Platzieren Sie diese untereinander, ordnen sie diese zentriert an und benennen Sie die Texteingabefelder per Doppelklick in "Name", "E-Mail" und "Passwort" um. Benennen Sie die Checkbox mit "Ich akzeptiere die Nutzungsbedingungen" und den Button mit "Registrieren Sie sich jetzt kostenlos" auf die gleiche Weise. Die Seite sollte nun so aussehen:

Nun betrachten wir die Combobox. Die Combobox ist ein dynamisches Element, das sich öffnen und schließen kann und verschiedene Werte in der Vorschau enthalten kann. Um verschiedene Werte zu definieren, klicken Sie doppelt auf das Element. Sie werden dann drei Standardeinträge sehen, welche Sie mit den beiden Wörtern "Englisch" und "Deutsch" ersetzen können. Nutzen Sie hier für jeden Eintrag eine neue Zeile. In der Vorschau erlaubt dies dem Nutzer zwischen beiden Sprachen zu wählen. Sie finden übrigens eine ähnliche Syntax beim Bearbeiten des Inhalts der Elemente "Menü", "Tabelle" oder "Baumansicht".

Zum ersten Mal nutzen wir nun das Kontextmenü: Wählen Sie das dritte Texteingabe-Element (das Passwort-Feld) und öffnen die Eigenschaften-Sektion des Kontextmenüs. Wählen Sie die "Passwortfeld"-Checkbox. Voilà, die Texteingabe versteckt nun jegliche Eingabe.

Zum Schluss fügen wir noch ein Text-Element zur "Willkommen"-Seite hinzu und geben dafür "Willkommen" ein und ergänzen einen Button, um unser erstes Projekt zu erstellen. So wie hier:

Übrigens: Wenn Sie die Einstellungen einer Seite ändern möchten, wie z. B. das Seitenformat, die Größe oder den Hintergrund, nutzen Sie einfach die Seiteneinstellungen im oberen Seitenbereich:

<< zurück

weiter >>