Weniger ist oft mehr. Das Design einer Website sollte zum Thema passen. Beachtet Ihr diesen Punkt nicht, kann Eure Seite schnell unprofessionell wirken. Verzichtet auf zu bunte Designs, wenn Ihr nicht gerade eine Seite gestaltet die Kinder ansprechen soll. Seriöse Firmenseiten solltet Ihr schlicht und auf das Thema bezogen aufbauen.
Ebenfalls wichtig ist, dass verwendete Bilder nicht zu groß sind, denn warten will im Internet heutzutage keiner mehr. Ruft Ihr Euch eine Website auf, soll diese auch sofort geladen sein. Dauert das Ganze zu Lange verlassen Besucher Eure Website, bevor diese überhaupt fertig geladen wurde.
In diesem Artikel möchte ich Euch erklären, wie Ihr Bilder in Eure Website einbindet, verlinkt und das komplette Design der Seite ändern könnt. Beginnen werde ich mit dem einbinden von Bildern.
Habt Ihr bisher Website Baker noch nicht installiert oder braucht Hilfe zum Erstellen von neuen Seiten könnt Ihr dies in den vorherigen Artikeln zum Workshop nachlesen.
Inhaltsverzeichnis:
Wohin mit den Bildern?
Falls Ihr noch keine Bilder für Eure Website auf Eurem PC gespeichert habt, könnt Ihr Euch beim Weiterlesen des Artikels Gedanken darüber machen, was für Bilder Ihr verwenden wollt. Befinden sich bereits Bilder auf Eurem PC, könnt Ihr diese so noch nicht für Eure Website nutzen, also müssen wir diese in Website Baker auf Euer Webhosting-Paket laden.
Meldet Euch dazu im Administrationsbereich von Website Baker an. Wählt im Hauptmenü „Medien“ aus. Ihr gelangt dadurch zu der Verwaltung der Medienordner. Unten links findet Ihr die Möglichkeit neue Ordner für Bilddateien anzulegen. Vergebt dazu einfach einen Namen und klickt auf „Ordner anlegen“. Das macht Ihr für alle Ordner, die Ihr anlegen wollt.
Tipp: Achtet darauf, dass Eure Bildateien möglichst klein sind, damit diese schnell auf Eurer Website geladen werden. Für größere Bilder gilt diese im .JPG Format zu speichern, für kleine Bildateien z.B. Logos am besten das Format .PNG nutzen.
Im mittleren Bereich werden Euch die neu angelegten Ordner jetzt angezeigt. Links davon seht Ihr den Punkt „Datei(en) übertragen“. Unter Zielordner könnt Ihr auswählen in, welchen der von Euch angelegten Ordner die Bilddateien hochgeladen werden sollen.
Nachdem Ihr den Zielordner ausgesucht habt, könnt Ihr über „Durchsuchen…“ die Bilddateien von Eurem PC auswählen und mit „Datei(en) übertragen“ hochladen. Alternativ könnt Ihr den Haken bei „Zip-Archiv hochladen und entpacken“ setzen, um mehrere gepackte Bilder hochzuladen. Diese werden dann automatisch von Website Baker entpackt. Nach dem Hochladen aller benötigten Bilder erscheinen diese in der Medienübersicht im mittleren Bereich (unteres Bild).
Urheberrechte von Bildern beachten
Bei der Nutzung von Bildern auf der eigenen Website solltet Ihr unbedingt darauf achten, dass keine Rechte von Dritten verletzt werden. Einen Blogartikel zu diesem Thema ist hier zu finden.
Bilder einbinden
Die Bilder sind hochgeladen, aber wie geht es jetzt weiter? Wechselt über das Hauptmenü oder das Menü im oberen Bereich zu „Seiten“. Dort angekommen klickt Ihr auf die Seite, in die Ihr Bilder einbinden wollt (oberes Bild). In der Bearbeitungsansicht der Seite klickt Ihr die Stelle an, in der Ihr das Bild einfügen wollt und klickt im oberen Bearbeitungsmenü auf das Bildsymbol (unteres Bild).
Welches Bild soll es sein?
Es öffnet sich ein kleines Fenster, in welchem Ihr zuerst das gewünschte Bild über „Server durchsuchen“ auswählen müsst. Diesen Punkt ausgewählt kommt Ihr zu der Übersicht Eurer Medienordner. Wählt den Ordner, in den Ihr das benötigte Bild hochgeladen habt, aus und klickt danach das Bild an, dass Ihr einfügen wollt.
Größe, Rahmen, Ausrichtung
Nun seht Ihr wieder das kleine Fenster von vorhin. Wie Ihr sicher bemerkt habt, wird jetzt unten rechts eine Vorschau des Bildes angezeigt. Ihr habt jetzt noch die Möglichkeit die Bildeigenschaften zu bearbeiten.
Tipp: Mit den Einstellungen könnt Ihr ruhig herumexperimentieren. Ihr könnt die Werte jederzeit wieder ändern, in dem Ihr das Bild markiert und auf das Bildsymbol im Bearbeitungsmenü klickt.
Alternativer Text: Falls beim Besucher Eurer Website keine Bilder angezeigt werden, wird diese Beschreibung anstelle des Bildes angezeigt. Außerdem lesen Suchmaschinen den alternativen Text, da sie die Inhalte der Bilder im Moment noch nicht erkennen können.
Breite/Höhe: Hier könnt Ihr die maximale Bildgröße in Pixel angeben. (1 cm = 119 Pixel)
Rahmen/ Abstand: Hier könnt Ihr ein Wert eintragen, wenn das Bild einen Rahmen bekommen sollen oder einen bestimmten Abstand vom Rand haben soll. Der Wert wird wieder in Pixeln angegeben.
Ausrichtung: Über dieses Pulldown-Menü könnt Ihr das Bild, wie auch bei Texten möglich ist z.B. linksbündig ausrichten.
Über das Bild verlinken
Wählt Ihr den Reiter „Link“ in den Bild-Eigenschaften aus, könnt Ihr eine URL angeben, die geöffnet werden soll, wenn der Besucher das Bild anklickt. Über „Server durchsuchen“ könnt Ihr auch auf Inhalte Eurer eigenen Seite verweisen. Habt Ihr alle Bilder nach Euren Wünschen eingefügt, speichert Ihr die Seite. Wie es fertig aussehen könnte, seht Ihr im unteren Bild.
Die Qual der Wahl
Die ersten Texte sind geschrieben und die ersten Bilder erscheinen auf Eurer Website. Jetzt soll das Grunddesign auch zum Thema Eurer Seite passen. Für Website Baker gibt mehrere 100 Designvorlagen, die Ihr verwenden könnt. Als Erstes könnt Ihr auf websitebaker.at ein passendes Design für Eure Seite aussuchen und dieses auf Euren PC speichern.
Habt Ihr die Zip-Datei des Templates gespeichert, wählt Ihr im Hauptmenü von Website Baker „Erweiterungen -> Designvorlagen“ aus.
In der Übersicht, die Ihr jetzt vor Euch seht, wählt Ihr mit „Durchsuchen…“ bei Designvorlage installieren, die auf Eurem PC gespeicherte Template-Datei aus und klickt anschließend auf „Installieren“ auf der rechten Seite (unteres Bild).
Design auswählen und fertig…
Nach der Installation des Templates müsst Ihr das neue Design nur noch aktivieren. Klickt dazu im oberen Menü auf „Optionen“. Ihr gelangt zu einer Übersicht der Einstellungen für Eure Website. Unter Standardeinstellungen findet Ihr eine Auswahl für das Template, in der Ihr das neue Design wählen könnt. Jetzt nur noch „Speichern“. Ruft Ihr danach Eure Website auf erstrahlt diese bereits im neuen Design (unteres Bild).
Falls Ihr noch weitere gute Seiten mit Templates für Website Baker kennt, könnt Ihr diese gerne in den Kommentaren posten. Falls Ihr Fragen habt nur heraus damit. Im letzten Teil erkläre ich Euch, wie Ihr neue Module einbindet und werde die besten Module kurz vorstellen.
