Seitenaufbau mit Selteco Flashdesigner

Laden Sie fertige Seitenvorlage: Vorlage10 (173 KB)

Sehen Sie auch:

Bevor Sie mit dem Aufbau Ihrer Internetseite anfangen, sollten Sie sich Gedanken machen, wie wird das Layout aussehen. Als Layout wird die Unterteilung der Seite in wenigstens zwei Teile verstanden - Navigation und Inhalt (Abb.1).

Durch die Navigation erfolgt das Umschalten von Seiten, die in dem Inhaltteil gezeigt werden.
Jede Internetseite entsteht aus mehreren Unterseiten. Meistens sind das eine Heimseite und einige Seiten, die im Sinne der Inhalt separat sind. Natürlich kann solche Subseite in mehrere Seiten untergeteilt werden. Sie sollten erst überlegen, welche Kategorien möchten Sie als separate Subseiten einfügen. Auf diesem Grund wird die Navigation aufgebaut.

Den Aufbau einer Seite mit Flash Designer wird mithilfe einer Vorlage, die Sie HIER von unserer Webseite herunterladen können, Schritt für Schritt beschrieben. Auf unserer Seite finden Sie viel mehr wunderbaren Seitenvorlagen, die frei zu herunterladen sind. Sie können dann selbst den Aufbau der Vorlage folgen und sie so umbauen, damit sie Ihren Bedarf deckt.

Wir nehmen an, dass Sie schon ein neues Projekt im Flash Designer angefangen haben. Zunächst müssen wir die Größe der Seite bestimmen, also die Framegröße. Es muss Rücksicht darauf genommen werden, wie hoch die Bildschirmauflösung von den Benutzern ist. Heutzutage ist es meistens 1024x786 Pixel. Unsere Seite muss kleiner werden. Es sieht besser aus, wenn Einbisschen Raum an beiden Seiten bleibt. Wir haben uns für die Größe von 900x600 Pixel entschieden.

Wie Sie sehen, es gibt einige Elemente, die alle Subseiten gemeinsam haben. Es sind (Abb.2): der Hintergrund, die Navigation, das Firmenlogo.

Diese Elemente sind immer sichtbar egal, welche Subseite gerade angesehen wird. Am besten werden solche Komponente in den Masterframe platziert. Deswegen wird der erste Frame in einen Masterframe umgewandelt, indem das „Masterframe“ Ankreuzfeld in der „Frames“ Palette markiert wird (Abb.3).

Jetzt können wir alle Bauelemente in Masterframe einfügen. Sie sollten in folgender Reihenfolge eingesetzt werden: der Hintergrund und dann die Navigation und Firmenlogo. Die Reihenfolge ist deswegen wichtig, dass jedes Element über dem Vorigen hingelegt und es damit bedecken wird. Die Abfolge kann jedoch geändert werden, indem die Tasten Strg+BildAuf oder Strg+BildAb bzw. Strg+Umschalt+BildAuf oder Strg+ Umschalt+BildAb gedrückt werden.

Importieren Sie ein Bild („Datei“ > „Bild hinzufügen“), das als Hintergrund dienen wird, und richten es beliebig aus („Bearbeiten“ > „Ausrichten“). Am besten wäre es, wenn das Bild dieselbe Größe hätte wie die Framegröße. Wenn das Bild größer ist, kann die Größe durch „Objekt“ > „Größe“ geändert werden. Sie können auch das Bild mit dem „Zuschneidewekrzeug“ anpassen. Falls das Bild kleiner ist, wie in dieser Vorlage, können Sie versuchen, weiße Teile mit anderen Elementen zu bedecken (Abb.4).

Wenn wir schon einen Hintergrund haben, fügen wir einen orangen, horizontallen Balken hinzu. Er wird mit dem „Rundes Rechteck“ Werkzeug gezeichnet. Dessen Breite wurde auf denselben Wert wie die Framebreite eingestellt und die Höhe z.B. auf 50 Pixel. Den Umriss haben wir entfernt, indem „Objekt“ > „Kontur und Fläche“ > „Linienstärke“ > „Kein“ gewählt wurde. Setzen Sie den Balken in die Seite so, dass es nur die Hälfte sichtbar ist.
Erstellen Sie einen neuen Balken, der ein Hintergrund für das Firmenlogo sein wird.

Die Navigation.

Wir haben uns entschieden unsere Seite in 5 Subseiten zu unterteilen. Wir brauchen genauso viele Buttons mit den das Umschalten der Subseiten erfolgt. In dieser Vorlage besteht die Navigation noch aus einem Hintergrund, denn die Buttons sind teilweise durchsichtig.

Ein Button

Jeder Button in dieser Vorlage ist ein Sprite-Objekt. Die Vorgehensweise des Aufbaus eines solchen Buttons ist folgend:

Zeichnen Sie ein Rechteck mit abgerundeten Ecken.
Wählen Sie das „Knotenwerkzeug“ und doppelklicken auf das Rechteck.
Entfernen Sie alle Kontrollpunkte, die auf der Abbildung nr. 5 mit den roten Richtungspfeilen markiert sind.
Klicken Sie mit der rechten Maustaste auf die Kontrollpunkte, die mit den blauen Richtungspfeilen markiert sind, und wählen „Begradigen“. Falls nötig, verschieben Sie diese Kontrollpunkte, damit ein 90-Grad Winkel entsteht.
Stellen Sie die Größe des Rechtecks auf 180x30 Pixel ein.
Wandeln Sie das Rechteck in ein Sprite-Objekt um, indem Sie „Bearbeiten“ > „In Sprite umwandeln“ wählen.
Doppelklicken Sie auf das Sprite-Objekt. Jetzt wird der Inhalt des Sprites bearbeitet.
Stellen Sie die Framegröße auf 179x277 Pixel.
Wählen Sie das „Text“ Werkzeug und tragen den Titel des Buttons, z.B. „HOTELS“.
Markieren Sie das Rechteck und wählen „Bearbeiten“ „Ausrichten“ > „Oben“. Dann platzieren Sie den Text in der Mitte des Rechtecks.
Stellen Sie die Framedauer in der „Frames“ Palette auf „Stop“.
Duplizieren Sie den Frame 1.
Neuer Rahmen enthält Elemente, die auf dem Bild nr.6 zu sehen sind:
Reihenfolge, in der die Bauelemente eingesetzt sind, ist wie in den Punkten oben, d.h. a) liegt unter b), b) liegt unter c) usw.
Wenn Sie schon diese Elemente zu Verfügung haben, ordnen Sie sie an ihre Plätze (Abb.7) Schauen Sie sich alle Buttons in der Vorlage genau an, um zu sehen, wie das durchsichtige Rechteck aus punkt a) in jedem Button platzier ist.
Elemente „b“, „d“ und „e“ sind gruppiert worden, damit sie als ein Objekt dienen. Bei Gruppierung wird das neue Objekt in Vordergrund eingesetzt und der Text wird bedeck. Drücken Sie Strg+BildAb, um die Gruppe unter den Text zu bringen.
Markieren Sie diese Gruppe und wählen „Objekt“ > „Aktionen“ > „Bei Ende Mausberührung“. Im neu geöffneten Fenster markieren Sie „Gehe zum Frame“ und wählen Frame 1 als Ziel.
Fügen Sie der Gruppe noch eine „Bei Mausklick“ Aktion. Nun jetzt tragen Sie folgenden Code in das ActionScript Eingabefeld ein:
```
_root.gotoAndPlay("Frame 1");
```
Das kursiv gesetzte Wort wird in jedem Button anders sein und wird dem Frame in der Hauptanimation entsprechen, der die dazugehörige Subseite enthält. Beispielsweise Frame 1 enthält die Subseite über Hotels, Frame 2 enthält Kontaktinfo usw.
Gehen Sie zum Frame 1, markieren den Hintergrund des Textes und wählen „Aktionen“ > „Bei Mausberührung“. Markieren Sie „Gehe zum Frame“ und wählen Frame 2.
Drücken Sie Esc-Taste, um wieder zum Bearbeiten der Hauptanimation zu gehen.

Alle anderen Buttons werden auf dieselbe Weise erstellt. Achten Sie darauf, dass der Code im Punkt 17 jedes Mal anders sein muss.

Wenn Sie schon 5 Buttons haben, platzieren sie wie es auf dem Bild nr. 2 zu sehen ist. Nach dieser Operation ist unser Masterframe fertig.

Jetzt müssen alle Subseiten erstellt werden. Jede Subseite befindet sich im anderen Frame. Deswegen brauchen wir 5 neuen Frames. Wählen Sie „Frame“ > „Neu“ fünfmal - Frames von 1 bis 5 werden erstellt. Jeder Frame entspricht einer Subseite und jede Subseite hat den Masterframe im Hintergrund. In der „Frames“ Palette markieren Sie jeden Frame und wählen „Masterframe (1)“ für den Hintergrund.

In dieser Vorlage besteht jede Subseite aus einem Text und einem Titel (Abb.8). Auf dem Bild nr. 8 wurde der Masterframe entfernt, damit Sie sehen können, wie eine Subseite aussieht.

Hier gibt sehr wenig Platz für den Text. Falls Sie einen längeren Text eintragen möchten, können Sie entweder die Seite anders Aufbauen (mit anderem Layout) oder die Möglichkeit den Text zu scrollen benutzen (lesen Sie hier).

Seitenaufbau mit Selteco Flashdesigner

Möchten Sie diese Anleitung kommentieren?