News, Stories & Inspiration zu unserer Multimedia-Software

Sport-Webseiten für alle – Teil 1

Europameisterschaft, Olympische Spiele, Formel 1, Tennis … die meisten von uns begeistern sich für eine Sportart. Also los – erstellt eine Website, um eurer Interesse mit anderen zu teilen! Wir zeigen, wie einfach das ist.

Wenn du noch keinen  MAGIX Web Designer hast, kannst du auch die kostenlose Trial-Version nutzen, um diesem Tutorial zu folgen. Der Web Designer enthält sehr viele Elemente, Cliparts und Fotos, aber für diesen Workshop haben wir einige neu erstellt.

Euro2012 tutorial finished website Sport Webseiten für alle – Teil 1

Öffnet den Web Designer. Zunächst müssen wir unsere neuen Designs in das Programm importieren. Auf der rechten Seiten seht ihr die vertikale Leiste – die Design Galerien. Drückt drauf und sie wird aufklappen und mehrere Ordner anzeigen. Wählt hier bitte “Disc Designs” aus und browst zu eurem Ordner mit den entpackten Dateien. Klickt sie an und wählt dann aus, sie in den Index aufzunehmen. Klickt auf den Ordner und ihr werdet sehen, dass er eine Reihe von Elementen, Fotos, etc. enthält.

Schritt 1) Die Seite und ihre Navigation erstellen

Doppel-klickt in der Design-Gallerie auf die leere Seite, die wir vorbereitet haben. Diese vorbereitete Seite enthält in der Kopf- und Fußzeile Elemente, die auf der Hintergrund-Ebene liegen, so dass dieser Hintergrund auf jeder neu gemachten Seite immer präsent sein wird.

Euro2012 tutorial 1 1024x901 Sport Webseiten für alle – Teil 1

Fügt die Website-Navigation einfach ein, indem die horizontale Navigationsleiste aus der Design-Galerie genommen und auf der schwarzen Leiste unterhalb der Header-Grafik abgelegt wird. Die Navigationsleiste erweitert sich nach links, sobald neue Buttons hinzugefügt werden. Positioniert sie also auf der rechten Seite des Dokuments.

Jetzt bauen wir die anderen beiden Seiten: In der Seiten- und Ebenen-Galerie einfach auf die „Neue Seite“ zweimal klicken, um die zweite und dritte Seite zu erstellen. Ihr seht jetzt alle drei Seiten in der Seiten- und Ebenen-Galerie. Standardmäßig werden die Seiten nur durch-nummeriert. Es ist also jetzt ein guter Zeitpunkt, die Seiten mit aussagekräftigen Namen zu versehen. Die Seitennamen werden nämlich zu HTML-Namen, sobald die Seite exportiert und veröffentlicht ist. Daher sollte die Namensgebung den HTML-Namenskonventionen folgen. Die Startseite sollte also „Index“ genannt werden und alle weiteren Seiten dürfen keine Leerzeichen im Namen haben. Wenn mehr als ein Wort im Namen enthalten ist, einfach den Unterstrich verwenden. Klickt auf die Nummer, um den Editor zu öffnen – ich habe jetzt meine Seiten-Übersicht, meinen Nachrichten- und Video-Bereich benannt.

Euro2012 tutorial 2 1024x520 Sport Webseiten für alle – Teil 1

Schritt 2 ) Die Seiten verlinken

Klickt mit der rechten Maustaste auf die Navigationsleiste und wählt “Auf allen Seiten wiederholen“. Ein kleines Blumen-Symbol erscheint jetzt oberhalb der Navigationsleiste, welches dem Anwender signalisiert, dass die Navigationsleiste jetzt ein sich wiederholendes Objekt ist, das auf allen Seiten der Website erscheint. Änderungen und Ergänzungen werden somit sofort auf allen Seiten erscheinen.

Tipp: Ihr könnt zwischen den Seiten wechseln, indem ihr die Thumbnails der Seiten in der Seiten-& Ebenen-Galerie anklickt oder einfach irgendwo auf der Seite den Hintergrund mit rechter Maus anklicken und „Multi-Seiten-Ansicht“ wählen, um zwischen den Seiten zu blättern.

Jetzt die Links setzen. Die Navigationsleiste doppelt anklicken, um den Navigationsleisten-Eigenschaften-Dialog zu öffnen. Bearbeitet und benennt die Schaltfläche Etiketten: beispielsweise Home, News und Video-Center. Jetzt das URL-Feld einer Schaltfläche doppelt anklicken, um den Web-Eigenschaften-Dialog zu öffnen. Erweitert das Dropdown in das „Link an“-Feld, wählt die gewünschte Seite und klickt auf OK. Das gleiche auf die anderen Schaltflächen machen und drückt OK am Ende, um das Fenster zu schließen.

Euro2012 tutorial 3 1024x901 Sport Webseiten für alle – Teil 1

preview icon Sport Webseiten für alle – Teil 1Die Seitennavigation ist jetzt abgeschlossen. Ob die Seiten alle korrekt verlinkt sind, könnt ihr mit der Vorschau-Taste oben auf der Haupt-Werkzeug-Leiste überprüfen.

 

Schritt 3) Inhalte zur Start-Seite hinzufügen

Jetzt können wir einige Inhalte hinzufügen. Der Header-Bereich benötigt einen Text oder ein Logo. Zieht das EM 2012-Logo aus der Design-Galerie und platziert es im Header-Bereich. Wieder einmal ist es sinnvoll, dies auf allen Seiten zu wiederholen, also klickt mit der rechten Maustaste auf den Text und wählt “Auf alle Seiten anwenden”.

Unterhalb der Kopfzeile möchte ich ein Banner hinzufügen. Zieht also den Banner aus der Design-Galerie und positioniert es auf der Seite. Seht ihr, wie sie es sich eng an die Header-Grafik hängt, als ob es von einem Magnet angezogen wird?

Als nächstes werde ich ein Slideshow-Widget hinzufügen. Viele Add-On-Widgets können in der Design-Galerie gefunden werden und ich werde „Nivo Slider“ hinzuzufügen. Doppelklickt auf „Seiten Elemente“ > „Fotos“ > „Foto-Diashows (Widgets)“ und zieht den Nivo Slider aus der Galerie auf die Index-Seite und positioniert es dort. Die Eckpunkte können verwendet werden, um das Element zu vergrößern oder zu verkleinern.

Euro2012 tutorial 4 1024x686 Sport Webseiten für alle – Teil 1

Um die Bildunterschrift zu bearbeiten und die Bilder zu ändern, einfacher Doppelklick auf das Widget, um die Anleitung zur Bearbeitung zu sehen, womit ein neuer Tab geöffnet wird. Nehmt Fotos von eurer Festplatte (wir haben Bilder von Fotolia benutzt).

Euro2012 tutorial 6 1024x908 Sport Webseiten für alle – Teil 1

Die Web-Seite würde noch besser aussehen, wenn wir eine Spalte links von der Diashow platzieren. Dafür haben wir auch wieder ein Element vorbereitet. Zieht es aus dem EM-Ordner in der Design-Galerie auf die Seite und positioniert es – wie ihr seht, gibt es Gitterlinien, die euch bei der Ausrichtung helfen.

Jetzt werden wir einen kompletten Text unter dem Element und der Diashow platzieren. Wählt das Textwerkzeug in der linken Menü-Leiste aus, klickt auf die Seite und zieht die dünne Linie auf die gewünschte Spaltenbreite und fügt dann den Text hinzu.

Tipp: häufig ist es während des Arbeitsprozesses nützlich, „pseudo-lateinische“ Textbausteine hinzuzufügen, um sie später mit dem wirklichen Inhalt auszutauschen. Um einen Textkörper hinzuzufügen, den Text-Cursur an den Anfang positionieren und die Tastenkombination Strg + Shift + L benutzen. Einfach wiederholen, bis die benötigte Menge Text vorhanden ist.

Damit die Seite zusammen mit der Menge des Texts wächst, wählt einfach das „Auswahl-Werkzeug“ aus, rechter Mausklick auf den Text und wählt dann „Auf Seite positionieren“ und dann „Push“. Im Push-Dialog dann die Ränder angeben – ich habe einen oberen Rand von fünf Pixel und einen unteren Rand von 30 Pixel gewählt. Eine Marge von 30 Pixel zwischen Text und Fußzeile wird nun immer beibehalten.

Euro2012 tutorial 7 1024x946 Sport Webseiten für alle – Teil 1

Am Ende möchte ich schließlich den Ball und die Fußballschuhe unten auf der Seite hinzuzufügen. Zieht die Grafik aus der Design-Galerie und positioniert sie knapp über der Fußzeile, auf der rechten Seite des Dokuments. Um die Position in Relation zur Fußzeile beizubehalten, einfach auf die Grafik klicken und “Position auf der Seite” auswählen. Um den Effekt auf allen Seiten zu wiederholen, rechts klicken und „Auf allen Seiten anwenden“ auswählen.

Die Index- / Start-Seite ist nun abgeschlossen. Lasst uns also die Vorschau ansehen, indem wir das Vorschau-Symbol anklicken.

Speichert jetzt die Webseite – wählt „Datei“ > „Speichern“, und eure Website wird als .web Datei gespeichert, welches das Arbeitsformat des MAGIX Web Designers ist. Um die HTML-Dateien für Anzeigen im Browser zu speichern, wählt „Datei“ > „Exportieren“. So wird eine HTML-Datei für jede Seite produziert und alle zugehörigen Dateien werden in einem Ordner neben dieser zur Verfügung gestellt.

Um die Website im Internet für alle ersichtlich zu veröffentlichen, muss sie auf einen Webspace hochgeladen werden. MAGIX bietet 500 Megabyte Webspace und eine persönliche Web-Adresse kostenlos. Der Prozess der Übertragung der Website von der Festplatte auf den Webserver heißt FTP (File Transfer Protocol). Du brauchst drei Informationen: die FTP-Host-Adresse, den Benutzernamen und das Passwort. Dann wählst du „Datei“ > „Website veröffentlichen“ und du wirst aufgefordert, diese drei Informationen einzugeben.

Und das wars dann. Hier könnt ihr die fertige Seiten anschauen.

Im zweiten Teil werde ich euch zeigen, wie Live-Nachrichten, Videos und Social-Media-Funktionen integriert werden. Ich wünsche euch viel Spaß mit dem Web Designer.