Bildobjekt

Schritt 3 - Erstellen der Seiten >

Bildobjekt

Previous pageReturn to chapter overviewNext page
Versteckten Text zeigen/verstecken

Bilder sind die Elemente, die bei der Erstellung von Websites am häufigsten verwendet werden. Mit Bildern können Sie Themen illustrieren, Produkte präsentieren, Botschaften übermitteln oder Ihre Inhalte einfach dekorativ bereichern. Bilder sind in jedem Fall wichtig, da sie zum Gesamtbild der Website beitragen und ihre ästhetisch ansprechende, professionelle Wirkung unterstreichen.

Im WebSite X5 können Sie alle gebräuchlichen Bildformate importieren und es steht Ihnen ein praktischer, interner Grafik-Editor zur Verfügung, mit dem Sie Ihre Bilder zusätzlich bearbeiten und korrigieren können. Die verfügbaren Funktionen umfassen das Ausschneiden, Drehen und Retuschieren von Bildern und Sie können Masken, Filter und Rahmen anwenden. Ferner können Sie beeindruckende Panoramadarstellungen erstellen und Details herauszoomen.

Auch der Schutz vor unbefugter Nutzung von Bildern aus dem Internet wurde bei WebSite X5 berücksichtigt. Das Programm ist mit einem Schutzsystem ausgestattet, das den Zugriff auf die Originaldatei verhindert und Schutzmethoden wie Wasserzeichen und Urheberrechtsinformationen bereitstellt.

Die Funktionen, die Sie für die Gestaltung eines Bild-Objekts benötigen, sind die folgenden Bereiche gegliedert: Allgemein, Anzeige und Sitemap.

Klicken Sie um zu erweitern/minimierenAnleitung: Funktionen im Bereich Allgemein

Mit den in diesem Bereich verfügbaren Funktionen können Bilddateien importiert und bearbeitet werden.

WebSite X5 Sie können alle gebräuchlichen Bildformate (.JPG, .GIF, .PNG, .BMP, .PSD, .TIF, .DIB, .PCX, .RLE, .TGA und .WMF) importieren. Wählen Sie hierzu die gewünschte Datei aus den lokal gespeicherten oder direkt online aus.

Im Bereich Vorschau wird das importierte Bild dargestellt. Mit Klick auf die Schaltfläche Bearbeiten... unter der Vorschau öffnet sich der programminterne Grafik-Editor, in dem Sie das importierte Bild bearbeiten können.

Für das importierte Bild können Sie folgende Eigenschaften festlegen:

Titel: Bildtitel, der in den HTML-Code der Seiten dem Attribut title des Tags <img> zugewiesen wird.
Alternativtext: Hier können Sie einen Text eingeben, der an Stelle des Bildes erscheint, wenn dieses nicht angezeigt werden kann. Im HTML-Code der Seiten entspricht dies dem Attribut alt des Tags <img>.

Der Titel und der Alternativtext sind zwei Parameter, die sorgfältig durchdacht und vergeben werden sollten, da sie sowohl für die Zugänglichkeit als auch für die Optimierung der Website von Bedeutung sind.

Link: Hier können Sie das Bild verlinken. Mit Klick auf die Schaltfläche öffnet sich das Dialogfenster Link, in dem Sie den Aktionstyp des Links und die jeweiligen Optionen definieren können.
Klicken Sie um zu erweitern/minimierenAnleitung: Funktionen im Bereich Anzeige

Mit den Funktionen in diesem Bereich legen Sie fest, wie das importierte Bild dargestellt werden soll: WebSite X5Sie können Panoramabilder erstellen und/oder Zoom- und Bewegungseffekte festlegen.

Für den Anzeigemodus können Sie folgende Einstellungen vornehmen:

Bildgröße automatisch anpassen: Mit dieser standardmäßig aktivierten Option wird das Bild den Abmessungen der Zelle im Layout-Schema angepasst.

Vergrößertes Bild zoomen und manuell verschieben: Bei Aktivierung dieser Option kann das Bild per Mausklick vergrößert werden, bis es den eingestellten Zoomfaktor erreicht. Anschließend kann das Bild verschoben werden, um das gewünschte Detail in den Vordergrund zu bringen. In diesem speziellen Fall muss das Bild manuell verschoben werden. Klicken Sie hierzu in das Bild und ziehen Sie es in die gewünschte Position.

Um diesen Effekt zu erzielen, werden zuerst die Abmessungen des Bildes denen der Zelle im Layout-Schema angepasst und anschließend neu berechnet, entweder auf der Grundlage des Maximalen Zooms (wenn Sie unter Art der Verschiebung Frei Verschieben gewählt haben) oder im Verhältnis zur festgelegten Höhe (wenn Sie unter Art der Verschiebung die Option Horizontale Rundumsicht oder Vertikale Rundumsicht gewählt wurde). Auf diese Weise wird das Bild größer als die Anzeigefläche und kann darin verschoben werden.

Vergrößertes Bild zoomen und automatisch verschieben: Die Option entspricht der zuvor beschriebenen, mit dem einzigen Unterschied, dass das Bild verschoben wird, indem Sie den Mauszeiger an seinen Rändern positionieren.

Wenn unter Anzeigemodus die Option Bildgröße automatisch anpassen gewählt wurde, können folgende Einstellungen festgelegt werden:

Qualität: Hier können Sie die Qualität festlegen, die beim Speichern des Bildes im Format JPG erhalten bleiben soll. Beim Import werden alle Bilder automatisch in das Format .JPG oder, sofern Transparenzen eingestellt sind, in das Format .PNG konvertiert. Je höher bei der Konvertierung in .JPG das Kompressions-Level ist, desto geringer wird die Qualität des Bildes.

Es wird empfohlen, Bilddateien in den Formaten .JPG, GIF oder JPG einzufügen. Alle Bilder, die in einem anderen Format als .JPG, .GIF oder .PNG importiert werden, werden automatisch mit dem eingestellten Kompressions-Level in das Format JPG konvertiert. Die Konvertierung in .JPG oder, sofern Transparenzen eingestellt sind, in .PNG, erfolgt auch dann, wenn das Originalbild größer ist als die zugewiesene Zelle im Layout-Schema und wenn es im Grafik-Editor bearbeitet wird.

In allen anderen Fällen wird das Bild unverändert kopiert. Das ist erforderlich, damit der auf das GIF-Format angewendete Transparenz-Effekt beibehalten werden kann.

Art der Verkleinerung: Wählen Sie hier die Methode zum Verkleinern (Breite und Höhe) der Bilder. Sie haben die Auswahl zwischen:
-Bilinear (schneller): Diese Methode ist die schnellste, führt aber im Vergleich zu den anderen auch zu den größten Qualitätsverlusten.
-Decimate (mittel): Diese Methode bietet mittlere Werte sowohl bei der Leistung als auch bei der Qualität.
-Bicubic (langsamer, aber genauer): Diese Methode ist die langsamste, bietet aber die höchste Bildqualität.
Das Bild nur laden, wenn es auf der Seite angezeigt wird: bestimmt, dass das Bild nicht sofort beim Öffnen der Seite geladen wird, sondern nur wenn es wirklich angezeigt werden soll. In diesem Fall wird das Bild schrittweise auf dem Bildschirm angezeigt, mit einem schönen Einblendeffekt.

Mit der Option Das Bild nur laden, wenn es auf der Seite angezeigt wird kann eingestellt werden, dass die Bilder einer Seite nicht alle gleichzeitig geladen werden, sondern nur. wenn diese angezeigt werden sollen: Auf diese Weise verringert sich die Zeit für die Öffnung der Seite, und das Navigieren wird beschleunigt..

Wenn unter Anzeigemodus die Option Vergrößertes Bild zoomen und manuell verschieben oder Vergrößertes Bild zoomen und automatisch verschieben gewählt wurde, können folgende Einstellungen eingestellt werden:

Art der Verschiebung: Legen Sie hier fest, in welche Richtung das Bild manuell oder automatisch verschoben werden soll. Folgende Optionen stehen zur Verfügung:
-Frei Verschieben: Das Bild kann sowohl in horizontaler als auch vertikaler Richtung verschoben werden. In diesem Fall muss ein Maximaler Zoom festgelegt werden: Bei einem Zoomfaktor von 200% wird die Originalgröße des Bildes verdoppelt.

Originalbild

Bild mit Effekt

 

-Horizontale Rundumsicht: Das Bild kann nur in horizontaler Richtung verschoben werden. Um diesen Effekt optimal zu nutzen, sollten Bilder im Querformat verwendet werden. In diesem Fall müssen Sie im entsprechenden Feld die Höhe des Bildes in Pixeln angeben.

Originalbild

Bild mit Effekt

 

-Vertikale Rundumsicht: Das Bild kann nur in vertikaler Richtung verschoben werden. Hierfür eignen sich am besten Bilder im Hochformat und Sie müssen im entsprechenden Feld Höhe die Höhe in Pixeln angeben, die die entsprechende Zelle im Layout-Schema haben darf.

Originalbild

Bild mit Effekt

 

Maximaler Zoom: Diese Einstellung steht nur für den Modus Frei Verschieben zur Verfügung und ermöglicht die Einstellung des Zoomfaktors, der auf das Bild angewendet werden soll, damit es größer ist als sein Anzeigebereich. Wenn das Bild nicht vergrößert wird, kann es auch nicht verschoben werden.
Höhe: Diese Einstellung ist nur für die Optionen Horizontale Rundumsicht und Vertikale Rundumsicht verfügbar. Sie definiert im ersten Fall die Höhe des Bildes und im zweiten die Höhe der Zelle im Layout-Schema, in der das Bild dargestellt wird.
Bild vergrößern: Diese standardmäßig aktivierte Option bewirkt, dass das Bild mit dem Mausrad vergrößert und verkleinert werden kann. Beim Öffnen der Seite wird das Bild in Originalgröße angezeigt und das Symbol in der unteren rechten Bildecke signalisiert, dass es gezoomt werden kann. Mit dem Mausrad wird das Bild basierend auf dem Maximaler Zoom vergrößert.
Zoomleiste anzeigen: Diese Option ist nur verfügbar, wenn Bild vergrößern aktiviert ist, und fügt in das Bildfenster eine Leiste ein, über die der Zoomfaktor eingestellt werden kann.
Navigator anzeigen: Dies ist ein kleines Fenster im Bild, das eine Miniatur enthält. Das heißt, das Bild wird komplett angezeigt und im Navigator ist der aktuell gewählte Ausschnitt zu sehen. Dieser Ausschnitt kann innerhalb des Navigators verschoben werden, was dem manuellen Verschieben des Bildes entspricht. Wenn Sie den Mauszeiger in den Bereich außerhalb des Bildes verschieben, wird der Navigator mit einer Bewegung zum oberen Bildrand ausgeblendet.
Bild automatisch bewegen: Bei Aktivierung dieser Option wird das Bild während der Anzeige automatisch verschoben. Dies ist nützlich, um dem Nutzer zu zeigen, dass das Bild vergrößert werden kann. Er kann die Bewegung mit der Maus steuern und das Bild über die Zoomleiste oder das Mausrad, sofern verfügbar, zoomen.

Wenn für das aktive Bild die Option Bildgröße automatisch anpassen als Anzeigemodus eingestellt wurde, kann ein Mouse Over-Effekte vorgesehen werden:

Mouse Over-Effekte: Wählen Sie aus den verfügbaren Optionen einen Effekt, der angezeigt werden soll, wenn der Mauszeiger über das Bild bewegt wird.
Einstellungen: Je nach gewähltem Mouse Over-Effekte können verschiedene Parameter des Effekts festgelegt werden (zum Beispiel die Farbe und Stärke des Randes beim Effekt "Farbiger Rand").

Und schließlich können die Funktionen für den Schutz von Bildern genutzt werden, um ein unbefugtes Kopieren zu verhindern:

Bilder urheberrechtlich schützen: Mit Aktivierung dieser Option verhindern Sie, dass Bilder mit Befehlen wie Bild speichern unter... in den Kontextmenüs des Browsers kopiert werden können.
Klicken Sie um zu erweitern/minimierenAnleitung: Funktionen im Bereich Sitemap

Mit den in diesem Bereich verfügbaren Funktionen können Sie einige Zusatzinformationen über die Bilder festlegen, die beispielsweise für die Sitemaps der Website von Nutzen sind.

Aktivieren Sie hierzu zunächst die Option Bild in die Sitemap einbinden: Auf diese Weise wird die von WebSite X5 automatisch erstellte Sitemap (siehe SiteMap automatisch erstellen in %S4_CUSTOMCODE_LBLWIZTITLE%> | Allgemein) mit den Bildinformationen vervollständigt. Anschließend müssen Sie folgende Einstellungen vornehmen:

Titel: (Optionaler Parameter) Titel des Bildes.
Kurzbeschreibung: (Optionaler Parameter) Beschreibung des Bildes oder Bildunterschrift.
Geografische Lage (z.B. Adresse, Stadt etc.): (Optionaler Parameter) Zusatzinformationen wie eine Adresse, ein Ort oder ein Land, die die geografische Zuordnung des Bildes ermöglichen.
Lizenz-URL: (Optionaler Parameter) URL der Lizenzdatei für das Bild.

Bilder, für die ein Kopierschutz aktiviert wurde, können nicht in die Sitemap aufgenommen werden (siehe hierzu Bilder urheberrechtlich schützen im vorstehenden Abschnitt Anzeige).

 

 


Praktische Anwendung:

-

Erstellen und Verlinken der Sitemap