logo web nächste Seite

[Start]    [Anleitung]    [Inhalt]    [Didaktik]


Erstellen von Internetseiten mit NVU

Einfügen von Bildern

Damit eine Webseite nicht langweilig wird, ist es oft sinnvoll, zur Veranschaulichung Bilder einzufügen .

Ziele

  • Einfügen von Bildern in eine Webseite.
  • Sinnvolle Organisation der Bild- und HTML-Dateien.

Vorbereitungen - Bilder

Auch wenn das Internet sehr viele Möglichkeiten bietet, ist noch lange nicht alles erlaubt! Lädt man sich Bilddateien aus dem Internet herunter, muss der Eigentümer gefragt werden, ob man diese verwenden darf! Professionelle Fotografen, Zeichner und Designer arbeiten hart an den Bildern, die sie erstellen und verdienen ihren Lebensunterhalt damit. Ihre Bilddaten ohne Nachfrage und ohne Quellenangabe zu verwenden ist Diebstahl.
In der Regel sind viele Personen, die Fotos und Grafiken ins Internet stellen, sehr kooperativ. Fragt man bei ihnen per E-Mail an, ob man die Daten für die Schule, d.h. für nicht kommerzielle Zwecke nutzen darf, erhält man meist die Erlaubnis.

  • Erstelle in deinem Ordner "bergwanderung" einen Unterordner "pics" (Abkürzung für engl. pictures).
  • Speichere die drei Bilder rechts dort ab, indem du mit der rechten Maustaste darauf klickst und dann "Speichern unter" auswählst. Öffne dort den neu erstellten Ordner und bestätige mit dem Button "Speichern".

Quelle: Fotograf H. Hoffmeister http://de.wikipedia.org/wiki/Bild:Fragaria_vesca-walderdbeere.jpg

Quelle: Fotograf Anton (rp) http://de.wikipedia.org/wiki/Bild:Blaubeere.jpg

Quelle: Fotograf Hella http://de.wikipedia.org/wiki/Bild:Erdbeere.jpg

Vorbereitungen - HTML Dokument

    • Erzeuge ein neues HTML Dokument.
    • Notiere dort die Überschriften Beeren, Erdbeere und Blaubeere.
    • Kopiere den Text rechts in den Zwischenspeicher (z.B. Markieren --> rechte Maustaste --> kopieren)
    • Füge den Text unterhalb der Überschrift Erdbeere ein (z.B. Cursor unterhalb der Überschrift setzen --> rechte Maustaste --> einfügen)
    • Speichere dein Dokument unter dem Namen "beerenmischung.html"
      .
Die Erdbeeren (Fragaria) sind eine Gattung aus der Familie der Rosengewächse (Unterfamilie Rosoideae). Es sind meist weich- oder seidenhaarige Stauden mit dickem, holzigem, fadenförmige Ausläufer treibendem Wurzelstock und grundständigen, langgestielten, meist dreizähligen Blättern. Sie tragen weiße Blüten, meist in Trugdolden an der Spitze des aufrechten, armblätterigen Schaftes, und bei der Reife saftig fleischige, eine Scheinbeere bildende Fruchtböden, die auf ihrer Oberfläche die Nüsschen als kleine Körnchen tragen. Es gibt 12 Arten in den gemäßigte Zonen der Nordhalbkugel und eine Art in Chile (F. chiloensis) und mittlerweile über 1000 verschiedene Sorten.
Quelle: http://de.wikipedia.org/wiki/Erdbeeren´

Bild einfügen


WICHTIG: Bevor man ein Bild einfügen kann muss das Dokument gespeichert werden.
  1. Stelle die Schreibmarke an die Stelle, an der du das Bild einfügen willst.
  2. Um ein Bild einzusetzen, klicke auf in der Bearbeitungs-Symbolleiste. Im Fenster, das sich jetzt öffnet, klickst du auf Durchsuchen... und navigierst zu dem Ordner mit der gewünschten Datei und öffnest diese.
  3. Lass  das Kontrollkästchen "URL relativ zur Seitenadresse" aktiviert, dadurch kannst du später die Seite und das Bild auf eine andere Position verschieben, was ja auch erforderlich ist, wenn du die Dateien zu einem Server hochlädst. (Wenn du diese Option abwählst und die Seite verschiebst, wird versucht, das Bild an der ursprünglichen Position zu finden.)
  4. Du musst jetzt den Alternativtext hinzufügen, der das Bild beschreibt. Das ist für jene gedacht, die die Bildanzeige des Browsers ausgeschaltet haben, weil sie vielleicht Sehschwächen haben und sich die Seite von einem Zusatzprogramm vorlesen lassen. Betrachtungen dieser Art können für einige Seiten verbindlich vorgeschrieben sein (Barrierefreiheit).

  • Füge das Bild Erdbeere direkt nach der Überschrift "Erdbeere" ein.
  • Füge das Bild Walderdbeere direkt vor der Überschrift "Blaubeere" ein.
  • Füge das Bild Blaubeere direkt nach der Überschrift "Blaubeere" ein.

 

Bildgröße verändern

Du solltest jetzt das Bild sehen, das in der Mitte des Absatzes eingesetzt wurde. Möglicherweise hat es keine sinnvolle Größe. Klicke das Bild an. Ein Kasten umgibt das Bild. Der Kasten hat 8 Handles (kleine Quadrate) eines an jeder Ecke des Bildes und eines in der Mitte jeder Seite).


Ziehe an einem Anfasser, um die Größe des Bildes zu ändern. Wähle eine sinnvolle Größe. Das Ziehen an einem Ziehpunkt in der Mitte einer Seite ändert die Proportion des Bildes, was normalerweise nicht wünschenswert ist.

Hinweis: Mit der hier beschriebenen Vorgehensweise änderst du nur die Darstellung des Bildes, nicht die physikalische Größe. Mit anderen Worten. Stellst du das Bild deutlich größer als das Original dar, wird es "pixlig". Stellst du das Bild kleiner als das Original dar, verringert sich die Dateigröße und damit der benötigte Speicherplatz oder Downloadzeit nicht.

Eine präzisere Einstellung der Größe kann über das Grafik-Eigenschaften Fenster erzielt werden (-->Mausklick rechts-->Grafik-Eigenschaften). Wähle dort das Registerblatt "Größe". Nun ist eine genaue Angabe der Größe in Pixel möglich.


  • Verkleinere das Bild der Erdbeere auf 240 Pixel x 180 Pixel


Textfluss verändern

Bilder mitten in Absätzen sind normalerweise nicht üblich. Wieder unter "Grafik- Eigenschaften", jedoch beim Reiter "Erscheinungsbild"  kannst du Bilder entweder an den rechten oder linken Rand setzen und den Text herumfließen lassen.



  • Ändere den Textfluss um das Bild der Erdbeere so, dass der Text links um das Bild fließt.


Tipps:

  • Bilder in einem Unterordner pics abspeichern:
    Ordnung ist das halbe Leben! Bei deiner Miniwebsite ist es sicherlich kein Problem, alle Dateien in einem Ordner zu speichern und trotzdem nicht den Überblick zu verlieren. Wie sieht dies jedoch bei Websites mit mehreren hundert bzw. tausend Dateien aus? Eine Grundregel bei Webdesignern ist es, alle Bilder in einem Unterordner getrennt von den HTML-Dateien abzuspeichern. Dieser Ordner heißt oft pics für pictures oder Bilder. Wenn du ein guter Webdesigner werden willst, gewöhne dir dies gleich an!
  • Bilder als Verweisbeschreibungen:
    Bilder können auch Verweisbeschreibungen sein, d.h. wenn man sie anklickt, wird ein Verweisziel angefordert. Dieses Verweisziel kannst du im Reiter "Link" angeben. Die Vorgehensweise ist genauso wie im nächsten Kapitel mit dem Thema Einfügen und Verändern von Verweisen und Verweiszielen beschrieben.

Im nächsten Kapitel lernst du, wie man Verweise und Verweisziele erstellen kannst.


nächste Seite [Seitenanfang]
© Laptopklasse GO Oktober 03
Letzte Änderung 03.03.06