Heute möchte ich euch einmal den Google Webdesigner vorstellen.  Der google Webdesigner ist ein HTML 5 Editor von Google.  Ok los geht.

Ist der Google Webdesginer  installiert und Geöffnet. Erstellt Ihr eine neue Datei. Alternativ könnt Ihr auch eine Vorlage Verwenden.

Dateiauswahl (Kopie)

Leere Datei erstellen

Hier wählt ihr die Anzeigenart banner aus. Zuerst wählt ihr einen namen in unseren Fall wähle ich  BannerHTML5. In der Umgebung könnt Ihr die Art des  Banners aussuchen. Bei der Abmessung die Größe ich wähle  468*60 px.

dasprogramm (Kopie)

Die Programmoberfläche.

Ein bisschen  erinnert der GWD an Dreamweaver von Adobe.  In der Linken Seite habt Ihr die Werkzeug leiste . In der Mitte das Storyboard.  Rechts  sind weitere Funktionen aufgeführt.  In der Unteren Zeile seht ihr die Zeitachse. Diese hat zwei  Ansicht Möglichkeiten. Erweitert und Schnellbildschirmmodus.

 

Derbanner (Kopie)

Der Banner

Zu erst   könnt Ihr mit dem Shifttool eurer Wahl in das Storyboard ziehen. Ich habe ein Rechteck gewählt. Dies erhält die Farbe blau.  Als Nächstes  ein Text  in die rechte Seite später soll der Text von rechts nach links einfliegen.

 

banner mit text (Kopie)

 

Die Animation

Nun  wechsle von  dem Erweitertenmodus  in  den Schnellbildschirmmodus. Da unser Text jetzt von  rechts nach links fliegen soll schiebe ich den Text im ersten Frame in den  rechten Leerraum  des Editors. Einen zweiten Frame erstellt Ihr, In dem  Ihr auf das  + Symbol des  ersten Frames drückt.  Im Frame 2 ist der Text wieder an der  Ursprünglichen Stelle.  Jetzt spielt Ihr die Anmation ab als Test. Das Endergebnis  ist hier im  unteren Teil eingebettet.