WebSite X5Help Center

 
Incomedia
Incomedia

Wie kann ich eine mit WebAnimator erstellte HTML5-Animation in den Bereich Header / Fußzeile einer mit WebSite X5 erstellten Website einfügen?  de

Autor: Incomedia
Besucht 5587, Followers 2, Geteilt 0  

Grundsätzlich sollte man es mit Animationen nicht übertreiben, aber wenn sie professionell entwickelt und gut implementiert werden, können sie die Seiten einer Internetpräsenz erheblich aufwerten.

Dank WebAnimator können Sie auf einfache, schnelle Weise Animationen für Ihre Websites und Onlineshops erstellen. Die Anwendung verzichtet auf Flash und verwendet hingegen HTML5, CSS und JavaScript. Dadurch laufen die Animationen korrekt auf allen Browsern und Mobilgeräten, einschließlich iPhone und iPad.

Mit WebAnimator erstellte HTML5-Animationen lassen sich auf einfache Weise in die mit WebSite X5 erstellten Websites integrieren. Sollen diese als Seiteninhalte eingefügt werden, können Sie das Objekt HTML (siehe FAQ „Wie kann ich eine HTML5-Animation, die mit WebAnimator erstellt wurde, in WebSite X5 einfügen?“ [https://helpcenter.websitex5.com/post/102556 ]) oder das Objekt WebAnimator Animation (siehe FAQ „Wie kann ich eine mit WebAnimator erstellte HTML5-Animation mit Hilfe des Objekts WebAnimator Animation in WebSite X5 einfügen?“ [https://helpcenter.websitex5.com/post/108805 ]) nutzen.

Alternativ können Sie die mit WebAnimator erstellten Animationen nutzen, um Header oder Fußzeilen im Grafikmodell der Website zu personalisieren. Gehen Sie hierzu wie folgt vor:

1. Erstellen Sie eine Animation mit WebAnimator und speichern Sie sie mit einem Namen (z. B. WA_Animation).

2. Exportieren Sie die Animation aus WebAnimator in ein leeres Verzeichnis (z. B. C:\WA_Project).

3. Starten Sie WebSite X5, öffnen Sie das Projekt, das Sie bearbeiten möchten und dort das Fenster Individuelle Gestaltung des Templates in Schritt 1.

4. Klicken Sie auf die Schaltfläche HTML-Code einfügenHTML-Codeeinfügen und geben Sie folgenden HTML-Code ein:

<div id="WA_AnimationStage" class="wascript"> <script type="text/javascript" charset="utf-8" src="WA_Animation_resources/WA_SCRIPT.js"></script></div>

Wurde die Animation anders benannt, muss der Name WA_Animation durch den selbst gewählten ersetzt werden.

Für das HTML-Objekt muss außerdem die gleiche Höhe eingestellt werden, die für die Animation in WebAnimator verwendet wurde. In WebAnimator können diese Einstellungen in den Projekteigenschaften geändert werden.

5. Gehen Sie nun zu Schritt 4 – Erweiterte Einstellungen und klicken Sie auf Statistiken, SEO und Code. Öffnen Sie den Tab Erweitert und klicken Sie auf Hinzufügen, um alle Dateien aus dem Verzeichnis „C:\WA_Project\WA_Animation_resources“ zu importieren und zu verknüpfen. Vergewissern Sie sich, dass Sie als Serverpfad „WA_Animation_resources“ eingestellt haben. Nur für die Datei „jquery-1.7.min.js“ wählen Sie bitte die Option „Datei verknüpfen (.js- und .css-Dateien)“. Auf diese Weise werden alle Dateien verknüpft, die für die korrekte Funktion der Animation erforderlich sind.  

Bestätigen Sie nun und klicken Sie auf die Schaltfläche Vorschau, um zu prüfen, ob alles korrekt funktioniert.

Wir wünschen Ihnen viel Erfolg bei der Arbeit!

-------------------------------------------------------

Weitere Beiträge zu diesem Thema:

Gepostet am