News, Stories & Inspiration zu unserer Multimedia-Software

Sport-Webseiten für alle – Teil 2

Sport-Webseiten für alle – Teil 2

Olympics website Sport Webseiten für alle – Teil 2

Die Olympiade 2012 in London ist endlich da! Hattet ihr Glück und konntet ein Ticket ergattern? Ob Olympische Spiele oder irgendeine andere Sport-Veranstaltung: wir zeigen euch, wie einfach es ist, eine Website zu erstellen, die eurem Enthusiasmus für eure Lieblingssportarten gewidmet ist.

Wenn ihr noch keinen Web Designer besitzt, dann ladet einfach die kostenlose Trial-Version runter, um diesen Workshop selbst umzusetzen. Web Designer enthält viele Elemente, Cliparts und Fotos. Wir haben aber ein paar neue Elemente mit olympischem Motto bereitgestellt, die speziell zum Bau einer Olympia-Webseite geeignet sind. Ladet diese runter und entpackt sie in einen Ordner auf eurem Computer.

Öffnet den Web Designer und zunächst müssen wir die neue Designs in die Design-Galerie bekommen. Auf der rechten Seite seht ihr eine vertikale Arbeitsleiste – die Design-Galerie. Wählt sie aus und mehrere Ordner werden sichtbar. Wählt hier bitte „Disc Designs“ aus und dann geht zu dem Ordner, in dem die entpackten Dateien sind (diese werden nur als Xarainfo Datei zu sehen sein). Wählt sie aus und nehmt sie dann auf dem Index auf. Klickt auf das Ordner-Symbol und ihr werdet sehen, dass der Ordner eine leere Webseiten-Vorlage, Seiten-Elemente, Bilder und die fertige Webseite enthält.

Um eine Wiederholung des Setups der Sport-Webseite aus dem letzten Monat zu vermeiden (siehe Tutorial zu Sport-Webseiten, Teil 1), beginnen wir mit einer dreiseitigen, leeren Webseite, auf der eine verlinkte Navigationsleiste bereits vorhanden ist, damit wir uns vor allem auf die Inhalte konzentrieren können. Wir haben eine Startseite, einen News-Teil und Blog-Seiten.

Um die Webseite zu öffnen, geht zur Design-Galerie in den Ordner, der gerade hinzugefügt wurde und klickt doppelt auf “Blank Website“. Die Seite wird dann in der Multiplen-Seite-Ansicht geöffnet und zur leichteren Positionierung der Inhalte haben wir Hilfslinien hinzugefügt, die so eingestellt sind, dass die Inhalte an den Richtlinien „eingerastet“ werden. Um die Hilfslinien aus-oder einzuschalten, geht einfach in die „Ebenen“-Galerie und klickt auf das rote Augen-Symbol der verschiedenen Ebenen,um sie sichtbar oder nicht-sichtbar zu machen.

Olympics1 300x251 Sport Webseiten für alle – Teil 2

SCHRITT 1: Social-Media Inhalte der Webseite hinzufügen
Auf dieser Seite wollen wir ein Twitter- und YouTube-Widget einbetten sowie eine Facebook-Grafik verwenden. Wir werden mit Grafiken für jedes dieser Widgets beginnen – geht zur Design-Galerie und zu den Dateien, die wir euch zur Verfügung gestellt haben. Hier findet ihr Grafiken zu Twitter und zu YouTube. Zieht diese auf die Seite und positioniert sie zwischen den Hilfslinien am oberen Ende der einzelnen Spalten. Zur genaueren Positionierung könnt ihr die Cursortasten der Tastatur nutzen.

Um das Twitter-Widget hinzuzufügen, geht in die Design-Galerie > Seite Elemente > Soziale Netzwerke (Widgets) > „Zeigt eure Tweets“, und zieht dann das Symbol auf die Webseite, unterhalb der Twitter-Grafik.

Um das Widget individuell zu verändern, klickt es an und dann wählt den „Bearbeiten“-Link, der unten rechts erscheint (oder klickt doppelt direkt auf das Widget). Wählt das Textwerkzeug aus der Werkzeugleiste auf der linken Seite, und schreibt im Dialog-Fenster den Namen des Accounts auf, dessen Tweets ihr anzeigen wollt – in diesem Fall, London2012 (ohne Leerzeichen). Jetzt wieder zurück zum Auswahl-Werkzeug (ganz oben in der linken Leiste) und folgt den Anweisungen im Widget-Dialog, um eine „Vorschau“ der Seite auszuwählen. Klickt dann auf „Speichern“.

Olympics2 300x251 Sport Webseiten für alle – Teil 2

Als nächstes fügen wir das YouTube-Widget ein. Geht zur Design Galerie > Seiten-Elemente > Audio / Video (Widgets) > YouTube. Zieht das YouTube-Widget-Symbol aus der Galerie auf die Webseite. Dies öffnet ein Browser-Fenster und bringt euch zur YouTube-Webseite. Sucht nach dem Video, das verwendet werden soll. Unterhalb des Videos seht ihr den Teilen-Button („share“). Klickt ihn an und die Einbetten-Schaltfläche erscheint („embed“). Klickt auch diese an und der „embed code“ erscheint. Unten könnt ihr sehen, dass die Breite auf 560px gesetzt ist. Benutzt jetzt STRG-C, um den Code in die Zwischenablage zu kopieren, um anschließend mit STRG-V den Code in den Widget-Editor einzufügen.

Olympics3 300x191 Sport Webseiten für alle – Teil 2

Die Facebook-Widgets, die wir bereitstellen, sind auf die London2012 Facebook Seite verlinkt. Zieht sie aus der Design-Galerie und positionieren sie unterhalb des Twitter-Feeds. (wenn der Link der Grafik geändert werden soll, dann einfach auf das Facebook-Logo klicken und “Ändern” wählen, um eigene Link Web-Adresse anzugeben).

Wir wollen die Neuigkeiten der letzten Medaillengewinner ebenfalls auf unsere Webseite einbetten. Dazu wollen wir Medaillen-Grafiken anwenden, die wir aus der Design-Galerie ziehen. Unterhalb der Grafiken wollen wir einen kuren Text-Absatz hinzufügen. Wählt das Textwerkzeug in der linken Werkzeugleiste aus und zieht die dünne Linie auf die gewünschte Spaltenbreite. Dann den Text hinzufügen.

Im Textwerkzeug habt ihr Möglichkeiten wie in einem Textverarbeitungsprogramm. Einfach den zu bearbeitenden Textteil markieren und die entsprechenden Änderungen vornehmen. Wir wollen den Teil, wo es darum geht, wer die Medaillen gewonnen hat, hervorheben und verwenden das „Links-“Symbol über der oberen Werkzeugleiste. Wir wählen „Auf Web oder Email verlinken“ und nehmen beispielsweise diese URL: http://www.olympics30.com/30goldmedalists.asp (dies ist eine Liste auf Englisch, der 30 hoffnungsvollsten Medaillen-Sportler) und klicken dann auf ‘OK’, um zu sichern.

Schließlich fügen wir einen Textabsatz in die rechte Spalte unter dem Video mit der gleichen Methode ein. In der Abbildung unten seht ihr, dass ich die Text-Überschrift größer gemacht und ihm eine Farbe zugeteilt habe. Die Absatzüberschrift habe ich fett markiert.

Jeder Text kann so eingestellt werden, dass man weitere Inhalte hinzufügen kann und die bestehenden Inhalte auf der Seite automatisch weiter nach unten rücken. Um dies einzustellen, auf das Auswahl-Werkzeug gehen, mit rechter Maus auf den Text klicken, „Position auf der Seite“ wählen. Einen unteren Rand von von 50 Pixel (Abstand zwischen Text und dem folgenden Inhalt) und „Anwenden“ wählen.

Olympics4 300x295 Sport Webseiten für alle – Teil 2

SCHRITT 2: News-Elemente auf der Seite hinzufügen
Zunächst wollen wir das News-Widget der Nachrichtenagentur Reuters einbinden. Zur Design-Galerie gehen und auf > Seitenelemente > Andere Widgets > Widgets Reuters klicken und die Art von Nachrichten auswählen, die wir benötigen (leider gibt es derzeit noch keine Sport-Neuigkeiten). Den “Embed Code” mit STRG C kopieren und auf „Einfügen“ am unteren Rand des Widget-Editor drücken. Jetzt positionieren das Widget in der rechten Spalte positionieren.

Von den Dateien, die wir in der Design-Galerie zur Verfügung stellten, jetzt die „Sidebar“ (Seitenleiste) und diese unterhalb des Reuters-Tickers platzieren (wie eine Sidebar von Grund auf selber gemacht werden kann, findet ihr im ersten Tutorial zu Sport-Webseiten).

Zieht auch die Absatz-Überschrift und das „Foto-Popup“ in das Dokument und positioniert diese in der rechten Spalte (das Foto-Popup wurde so gestaltet, dass wenn die Besucher der Seite auf diese klicken, dann werden sie zu größeren „Popups“). Um Fotos zu ersetzen, einfach ein eigenes Foto aus einem Ordner auf dem Computer auf das Bild im Dokument ziehen. Das Vorschau-Bild und das „Popup“-Bild werden dann automatisch durch das eigene Motiv ersetzt.

Die Bildunterschrift für das erste Bild kann direkt auf der Seite bearbeitet werden. Um den Text, der zu den anderen drei Fotos gehört, zu editieren, einfach die News-Seite erweitern in der „Seiten und Ebenen Galerie“ bearbeiten. Auf das rote Augen klicken auf den relevanten Dateinamen, um den Text sichtbar zu machen.

Olympics5 300x254 Sport Webseiten für alle – Teil 2

Um die Balance zu behalten, brauch die Seite einen Text-Absatz unter dem Foto-Popup. Ihr könnt einen eigenen Absatz Text einfügen oder den „Paragraph Text“ aus unserem Ordner in der Design-Galerie verwenden.

Olympics6 297x300 Sport Webseiten für alle – Teil 2

SCHRITT 3 Inhalte der Blog-Seite hinzufügen

Schlussendlich werden wir eine schnelle Blog-Seite erstellen, um unsere Sport-Webseite abzurunden. Wir nehmen aus der Design-Galerie die vorbereitete Blog-Spalte und richten diese mittig auf der Seite über der zentralen Hilfslinie aus. Die Blog-Spalte ist ein Text-Element mit einer verankerten Grafik.

Benutzt das Textwerkzeug, markiert den gesamten Text, angefangen mit der Überschrift. Drückt dann STRG-C um den Text in die Zwischenablage zu kopieren. Positioniert dann den Maus-Cursor am Anfang und drückt STRG-V, um das Element aus der Zwischenablage wieder einzufügen. Wiederholt das so häufig, wie ihr wollt. Je mehr Text, ihr im Blog einfügt, desto weiter werden die anderen Inhalte automatisch nach unten verschoben. Die Grafiken bleiben in Relation in der richtigen Position und der Footer der Seite wird nach unten verschoben.

Olympics7 291x300 Sport Webseiten für alle – Teil 2

SCHRITT 4 Speichern und veröffentlichen
Die Webseite ist nun fertig, also wollen wir sie uns auch anschauen. Einfach auf das Vorschau-Symbol in der oberen Symbolleiste drücken. Bemerkt, dass ihr die Möglichkeit habt, eine Vorschau der Seite euch in verschiedenen Web-Browsern anzeigen zu lassen.

Speichert jetzt die Webseite – Datei wählen > Speichern. Eure Webseite wird nun als .web Datei gespeichert, welche das Arbeitsformat des Web Designers ist. Um im HTML-Format zu speichern und so die Anzeige im Browser zu ermöglichen, müsst ihr auf Datei > Exportieren gehen. Hier werden die nötigen HTML-Datei erzeugt und alle benötigen Dateien werden von hier in einem Ordner dann gespeichert.

Um die Webseite im Internet für alle sichtbar zu veröffentlichen, muss die Seite in eurem „Webspace“ hochgeladen werden. MAGIX bietet 500 Megabyte Webspace und eine persönliche Web-Adresse kostenlos an. Der Prozess des Übertragen der Webseite von der Festplatte auf den Webserver heißt FTP (File Transfer Protocol). Dafür braucht ihr drei Informationen: eure FTP-Host-Adresse, euren Benutzernamen und eurer Passwort. Dann Datei -> Webseite veröffentlichen wählen. Hier werdet ihr aufgefordert, diese drei FTP-Informationen anzugeben.

Wir haben die fertige Website in den Dateien der Design-Galerie zur Verfügung gestellt. Doppel-klickt einfach auf “Website”, um sie zu öffnen und wählt dann das Vorschau-Symbol in der oberen Symbolleiste, um alle Seiten zu sehen. Ihr könnt sie euch natürlich auch im Internet anschauen – auf unserer Olympia-Seite.

One comment

  • Hi there, I found your site by way of Google while searching for a comparable matter, your web site got here up, it looks good. I have bookmarked it in my google bookmarks. ccadgbadakka

    Reply

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>