Bilder einfügen: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
 
K
 
(4 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
Voraussetzung für diese Lektion ist, dass die Bilder in der richtigen Grösse bei der Dateiverwaltung in eine Gruppe hochgeladen wurde. Sollte das Bild bei der definitiven Ansicht im Browser etwas zu gross oder zu klein erscheinen, sollte dieses am idealsten in einem Bildbearbeitungsprogramm wie z.B. Photoshop Elements auf die richtige Grösse gebracht und noch einmal hochgeladen werden.
+
[[Kategorie:Bedienung des Backends]]
 +
DynPG bietet für das Einbinden von Bildern viele nützliche Optionen und Effekte, welche in diesem Artikele genauer beschrieben werden.
 +
== Bilder einfügen ==
 +
Um im [[Texteditor]] ein Bild in den Artikel einzufügen, klicken Sie auf das [[Image:Image.gif]] "Bild einfügen"-Icon in der Werkzeugleiste. Hierauf erscheint ein neues Fenster, in dem Sie das Bild auswählen und weitere Einstellungen vornehmen können.
  
−
Gehen Sie mit dem Cursor an die Stelle, wo Sie das Bild einfügen möchten. Klicken Sie danach in der zweiten Symbolleiste auf das Icon mit dem Bäumchen.  
+
Geben Sie zuerst die Informationen zum Bild an:
 +
* '''Adresse''': die Adresse des Bildes. Klicken Sie auf den "Durchsuchen"-Button rechts vom Eingabefeld, um eine hochgeladene Datei auszuwählen.
 +
* '''Beschreibung''': Beschreibungstext des Bildes.
 +
* '''Titel''': Titel des Bildes, welcher erscheint, sobald Sie mit der Maus über das Bild fahren.
  
−
[[Image:bildereinfügen_001.gif]]
+
=== Aussehen ===
 +
[[Image:Texteditor - Bild Aussehen.png|center]]
  
−
Hiermit öffnet sich ein neues Fenster in einem Popup (Achtung es muss unbedingt der Popupblocker deaktiviert sein!). Klicken Sie auf das Feld "Durchsuchen" und es öffnet sich noch einmal ein Fenster mit den hochgeladenen Bilder.
 
  
−
[[Image:bildereinfügen_002.gif]]
+
{| border=0
  
−
Wenn Sie nun gleich zuvor in der Dateiverwaltung das Bild hochgeladen haben, wird es ganz oben erscheinen und die Auswahl fällt Ihnen nicht schwer.
+
|-
 +
| '''Ausrichtung''':
 +
| Ausrichtung des Bildes relativ zum Text. Betrachten Sie die Vorschau um die verschiedenen Ausrichtungen zu sehen.
  
−
[[Image:bildereinfügen_003.gif]]
+
|-
 +
| '''Ausmaße''':
 +
| Breite und Höhe des Bildes. Die Option "''Seitenverhältnis beibehalten''" passt bei Veränderung einer Dimension automatisch die jeweils andere Dimension entsprechend des Seitenverhältnisses des Bildes an.
  
−
Wenn Sie bereits sehr viele Bilder hochgeladen haben und nicht ein Bild nehmen wollen, welches Sie eben hochgeladen haben, können Sie nun unter "Gruppe" diejenige Bildgruppe auswählen, in welcher sich das Bild befindet und auf das Icon mit der Lupe klicken. So werden nur diejenigen Bilder angezeigt, welche sich in der ausgewählten Gruppe befinden. Natürlich haben Sie auch die Möglichkeit, über "Suchwort" ein Wort anzugeben, welches Sie glauben dem Bild zugewiesen zu haben und dann ebenfalls auf das Icon mit der Lupe klicken.
+
|-
 +
| '''Vertikaler Abstand''':
 +
| Abstand vom oberen Rand / Element in der Seite.
  
−
[[Image:bildereinfügen_004.gif]]
+
|-
 +
| '''Horizontaler Abstand''':
 +
| Abstand vom linken Rand / Element in der Seite.
  
−
Wir klicken nun aber auf das erste Bild und gelangen wieder auf das vorgängige Fenster zurück.
+
|-
 +
| '''Rahmen''':
 +
| Breite des Rahmens in Pixel.
  
−
[[Image:bildereinfügen_005.gif]]
+
|-
 +
| '''CSS-Klasse''':
 +
| Auswahlfeld für die CSS-Klasse, die für das Bild verwendet werden soll. Sie können CSS-Klassen im [[Einstellungen#CSS-Vorgabenmanager|CSS-Vorgabenmanager]] bei den Einstellungen definieren.
  
−
Wenn wir nun "Einfügen" klicken, wird das Bild an der Stelle eingefügt, wo Sie zuvor den Cursor hatten.
+
|-
 +
| '''Format''':
 +
| CSS-Formatierungsoptionen des Bildes.
  
−
[[Image:bildereinfügen_006.gif]]
+
|}
  
−
Damit der Text "Hier eine Auswahl..." unten angezeigt wird, setzen wir den Cursor vor "Hier" und fügen eine Zeilenschaltung (einen "Enter") ein..
 
  
−
In diesem Beispiel wollen wir aber das Bild auf der rechten Seite haben. Wir markieren das Bild und klicken noch einmal auf das Icon mit dem Bäumchen. So öffnet sich wieder das Popup mit dem Bild. Wir wechseln nun auf das Register "Erscheinungsbild" und vergeben folgende Eigenschaften:
+
=== Erweitert ===
 +
==== Bildwechsel ====
 +
Sie können einen Bildwechsel bestimmen, der stattfindet, wenn der Mauszeiger über das Bild bzw. vom Bild wegbewegt wird. Aktivieren Sie dazu im Bereich "''Bild austauschen''" die Option "Alternatives Bild" und geben Sie das jeweilige Bild an.
 +
* ''bei Mauskontakt'': das Bild wird angezeigt, wenn der Mauszeiger den Bildbereich berührt.
 +
* ''bei keinem Mauskontakt'': das Bild wird angezeigt, wenn der Mauszeiger den Bildbereich verlässt.
  
−
* Ausrichtung: Rechts
+
==== Verschiedenes ====
−
* Vertikaler Raum 5
+
{| border=0
−
* Horizontaler Raum 5
+
−
* Rahmen 0
+
  
−
Im Moment wo wir diese Eigenscharten einfügen und auf das nächste Feld gehen, wird auch gleich links angezeigt, wie das Bild in den Text eingefügt wird. Einen "Raum" vergeben wir, damit der Text nicht gleich unmittelbar bei Bild beginnt, sondern noch etwas Zwischenraum zwischen Bild und Text besteht.
+
|-
 +
| ''ID'':
 +
| CSS-ID des Bildes.
  
−
[[Image:bildereinfügen_008.gif]]
+
|-
 +
| ''Schriftrichtung'':
 +
| die Ausrichtung der Schrift (von links nach rechts oder von rechts nach links).
  
−
Wenn Sie nun allenfalls einen Link auf ein Bild setzen möchten, müssen Sie unbedingt bei "Rahmen" noch eine "0" eintragen. Somit wird das verlinkte Bild ohne Rahmen angezeigt. Es ist deshalb vorteilhaft, gleich im selben Moment auch den Rahmen mit dem Wert "0" zu vergeben, womit Sie später einen Arbeitsgang weniger haben.
+
|-
 +
| ''Sprachcode'':
 +
| der Sprachcode für das Bild.
  
−
[[Image:bildereinfügen_009.jpg]]
+
|-
 +
| ''Image-Map'':
 +
| Beschreibung der HTML Image-Map.
  
−
Oben links ein verlinktes Bild ohne Rahmen und rechts eines mit Rahmen - also ohne den Wert "0" bei "Rahmen".
+
|-  
−
 
+
| ''Ausführliche Beschreibung'':
−
== Bildwechsel einfügen ==
+
| Eine ausführliche Beschreibung des Bildes.
−
Um etwas Überraschungseffekte zu erreichen, gibt es eine wunderbare Möglichkeit unter dem Register "Erweitert" einen Bildwechsel einzufügen.
+
|}
−
 
+
−
[[Image:bildereinfügen_010.gif]]
+
−
 
+
−
Aktivieren Sie das Feld "Alternatives Bild" und geben Sie nachfolgend ein weiteres Bild oder sogar zwei weitere Bilder an, indem Sie auf das Icon "Durchsuchen" gehen. Das erste Bild wird dann angezeigt, wenn Sie mit der Maus auf das Bild kommen, das zweite Bild wird angezeigt, sobald Sie mit der Maus wieder vom Bild weg gehen. '''Achtung:''' Voraussetzung für einen Bildwechsel ist dieselbe Grösse der jeweiligen Bilder!
+
−
 
+
−
== Diese Informationen als PDF ==
+
−
Dieser Artikel mit dem Stand vom 11:55, 23. Mär 2009 (CET) steht auch als PDF [[Media:Einfügen_von_Bildern.pdf|Einfügen_von_Bildern.pdf]] zur Verfügung.
+

Aktuelle Version vom 12. Oktober 2010, 17:47 Uhr

DynPG bietet für das Einbinden von Bildern viele nützliche Optionen und Effekte, welche in diesem Artikele genauer beschrieben werden.

Bilder einfügen

Um im Texteditor ein Bild in den Artikel einzufügen, klicken Sie auf das Image.gif "Bild einfügen"-Icon in der Werkzeugleiste. Hierauf erscheint ein neues Fenster, in dem Sie das Bild auswählen und weitere Einstellungen vornehmen können.

Geben Sie zuerst die Informationen zum Bild an:

  • Adresse: die Adresse des Bildes. Klicken Sie auf den "Durchsuchen"-Button rechts vom Eingabefeld, um eine hochgeladene Datei auszuwählen.
  • Beschreibung: Beschreibungstext des Bildes.
  • Titel: Titel des Bildes, welcher erscheint, sobald Sie mit der Maus über das Bild fahren.

Aussehen

Texteditor - Bild Aussehen.png


Ausrichtung: Ausrichtung des Bildes relativ zum Text. Betrachten Sie die Vorschau um die verschiedenen Ausrichtungen zu sehen.
Ausmaße: Breite und Höhe des Bildes. Die Option "Seitenverhältnis beibehalten" passt bei Veränderung einer Dimension automatisch die jeweils andere Dimension entsprechend des Seitenverhältnisses des Bildes an.
Vertikaler Abstand: Abstand vom oberen Rand / Element in der Seite.
Horizontaler Abstand: Abstand vom linken Rand / Element in der Seite.
Rahmen: Breite des Rahmens in Pixel.
CSS-Klasse: Auswahlfeld für die CSS-Klasse, die für das Bild verwendet werden soll. Sie können CSS-Klassen im CSS-Vorgabenmanager bei den Einstellungen definieren.
Format: CSS-Formatierungsoptionen des Bildes.


Erweitert

Bildwechsel

Sie können einen Bildwechsel bestimmen, der stattfindet, wenn der Mauszeiger über das Bild bzw. vom Bild wegbewegt wird. Aktivieren Sie dazu im Bereich "Bild austauschen" die Option "Alternatives Bild" und geben Sie das jeweilige Bild an.

  • bei Mauskontakt: das Bild wird angezeigt, wenn der Mauszeiger den Bildbereich berührt.
  • bei keinem Mauskontakt: das Bild wird angezeigt, wenn der Mauszeiger den Bildbereich verlässt.

Verschiedenes

ID: CSS-ID des Bildes.
Schriftrichtung: die Ausrichtung der Schrift (von links nach rechts oder von rechts nach links).
Sprachcode: der Sprachcode für das Bild.
Image-Map: Beschreibung der HTML Image-Map.
Ausführliche Beschreibung: Eine ausführliche Beschreibung des Bildes.
Von „http://wiki-de.dynpg.org/wiki_de/index.php?title=Bilder_einfügen&oldid=2644“