Smart-Chaos.net

Startseite

Bilder und Dateien in Texte einbinden

Verfasst von SmartChaos am 7. März 2008 - 12:32.

Diese Funktion steht nur angemeldeten Autoren zur Verfügung

Zulässig sind die üblichen Bildformate: ".jpg" (empfohlen), ".gif", "png".
Wir empfehlen, vor dem Verwenden von Bildern, diese vorab in einem Bildbearbeitungsprogramm zu bearbeiten:

  • auf maximal 500 Pixel Breite oder Höhe (die größere Seite zählt),
  • sichern als "progressiv" bzw. "mehrere Durchgänge"
  • jpg - Qualität 4 bis 6 (bzw. 40 - 60%) genügt in den meisten Fällen
  • ==> dies verbessert die Ladezeiten und Attraktivität dieser WebSeiten.
Um Fotos und Grafiken in Texten einzubinden geht ihr wie folgt vor:
  1. wählt die gewünschte Textart,
  2. geht so vor wie beim Verfassen von Texten,
  3. klickt unter dem Text-Eingabe-Feld auf "enable rich text"
  4. Screenshotsetze den Curser an die Stelle, an der das Bild erscheinen soll.
  5. klicke auf das kleine Symbol mit dem Baum
  6. ein neues Fenster öffnet sich: 
    1. um ein Bild einzubinden, das sich bereits irgendwo online befindet, trage die WebAdresse (inkl. http://) in die Zeile "Image URL"
    2. um ein Bild von deiner Festplatte hochzuladen:
      1. klicke auf das kleine Symbol rechts neben "Image URL"Screenshot Symbol Upload
      2. ein neues Fenster öffnet sich: darin unten auf "Durchsuchen" klicken,
      3. wähle das Bild auf deiner Festplatte --> OK --> Upload
        1. setze einen Haken an "Thumbnail", um beim Upload zusätzlich ein kleines Vorschaubild erzeugen zu lassen.
      4. Screenshot BildUploadim oberen Teil des Fensters siehst du eine Liste deiner hochgeladenen Bilder sowie ggf. der erstellten Thumbnails.
      5. Klicke auf den Datei-Namen des gewünschten Bild: im unteren Teil siehst du dein Bild,
        1. Bilder können maximal 500 Pixel hoch oder breit sein;
        2. mit "Resize Image" kannst du dein hochgeladenes Bild weiter verkleinern;
      6. klicke auf die Ansicht/Vorschau des Bildes im unteren Teil des Fensters, um es im Text einzufügen,
      7. das vorderste Fenster (mit der Liste deiner Bilder) wird nun automatisch geschlossen; im ersten Fenster "insert/edit image" siehst du jetzt den Dateinamen deines Bildes eingetragen hinter "Image URL"
    3. Trage in den 2 Zeilen unter Image URL eine kurze Beschreibung deines Bildes ein; diese erscheint, wenn Besucher die Mouse über das Bild halten und hilft den Screenreadern Sehbehinderter.
    4. Im Karteireiter "Appearance" kannst du einstellen:
      1. Alignment: "left", "right" setzt dein Bild links bzw. rechts deines Textes, so dass es vom Text umflossen wird
      2. Dimensions: hier wird die Größe deines Bildes angezeigt; du kannst die Pixelzahlen "von Hand" verändern, was aber nicht zu empfehlen ist.
      3. Vertical/Horizontal Space: gibt an, wie groß der Abstand zwischen Bild und umfließendem Text ist (in Pixel): "3" genügt, mehr als "8" ist nicht sinnvoll.
      4. Border: hier kann ein Rand um das Bild fstgelegt werden, was unnötig ist, da alle Bilder automatisch mit einem schmalen Rand umgeben werden.
    5. Im Karteireiter "Advanced" kann (muss nicht) eingestellt werden, dass ein anderes Motiv erscheint, wenn der Benutzer mit der Mouse über das Bild fährt:
      1. Haken an "alternative Image"
        (Achtung: auch das gleiche Bild in verschiedenen Größen, also jeder Dateiname gilt hier als eigenständiges Bild)
      2. hinter "for mouse over": wähle (s.o.) ein zweites Motiv (das kann z.B. eine größere Version deines Bildes sein): erscheint, so lange der Besucher den Maus-Zeiger über das Bild hält;
      3. hinter "for mouse out": trage noch einmal die Adresse deines eigentlichen Bildes ein, oder eines dritten Motives: dies erscheint, nachdem der Mauszeiger des Benutzers das Bild verlassen hat; also entweder ein drittes Bild oder wieder (zurück) das erste.
      4. Bei Bildern unterschiedlicher Größe, unbedingt nun noch einmal zurück zu Appearance und die Größen-Angaben aus "Dimensions" löschen.
      5. Achtung: diese Advanced-Einstellungen gehen jedesmal wieder verloren, wenn das Foto im Text verschoben oder der Text mit dem RichText-Editor nachbearbeitet wird, müssen also wiederholt eingegeben werden.
    6. Nun auf "Insert" klicken: ihr kehrt zurück zum Textfeld.
    7. um ein Bild nachträglich zu verändern: Bild anklicken:
      1. zum Größeändern an den Ecken ziehen,
      2. um Position, Infotext oder Motiv zu ändern: wieder auf das Baum-Ymbol klicken und ggf. die Angaben ändern.
  7. ggf. kann das Foto mit dem Mousezeiger an beliebige andere Stellen im Text verschoben werden
  8. ggf. Text fertig stellen. 
  9. vor dem Speichern des Textes nicht vergessen, auf "Eingabeformat" zu klicken und --> "Full HTML" zu wählen.

Um Dateien an Texte anzuhängen:

unter dem Eingabefeld für Texte klickt auf "Dateianhnge" klicken --> Durchsuchen --> wähle auf deiner Festplatte die hochzuladene Datei (das können nahezu alle üblichen Dateiarten sein; anstelle von Word.docs empfehlen wir, diese im Textprogramm zuerst als ".rtf" zu sichern, besser noch als PDF).

Kommentar hinzufügen

  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Zeilen und Absätze werden automatisch erzeugt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.

Weitere Informationen über Formatierungsoptionen

CAPTCHA
Bist du ein Mensch? Diese Mathe-Aufgabe dient dazu, SPAM zu verhindern.
Image CAPTCHA
Die Zeichen (unter Beachtung von Groß-/Kleinschreibung) aus dem Bild.