Von Gimp nach HTML

Die Umwandlung der Bitmap-Grafik in HTML-Code erfolgt auf der Basis einer Tabelle. Die einzelnen Menü-Buttons entsprechen dann Tabellenfeldern und lassen sich mit eigenen Links verknüpfen, die den Hauptbereich in der Mitte jeweils unterschiedlich füllen. Gimp nimmt diese Unterteilung an Hand von Hilfslinien vor. Setzen Sie diese wie in Abbildung 8, indem Sie auf eines der Lineale klicken und die Maus bei gedrückter Taste nach unten oder links ziehen.

Außerdem funktioniert der Export nur für eine Ebene. Da beim Vereinigen sämtliche Ebeneninformationen verloren gehen, speichern Sie das Bild zunächst unter einem neuen Namen. Dann wählen Sie in der Ebenenpalette im Kontextmenü nach einem Rechtsklick die Option Bild zusammenfügen.

Abbildung 8: Das Gimp-Plugin Py-Slice erstellt aus einem Bild eine HTML-Tabelle. Als Spalten- und Zeilengrenzen dienen Hilfslinien.

Nun steht der Konvertierung nichts mehr im Wege: FilterWebPy-Slice ruft das dafür zuständig Werkzeug auf. In den Einstellungen wählen Sie unter The format of the images den Eintrag png. Dieses Format eignet sich besser als beiden Alternativen: JPEG verwendet ein so genannte verlustbehaftetes Kompressionsverfahren, dadurch können beispielsweise Linien verschwimmen. GIF-Grafiken teilen diesen Nachteil zwar nicht, sie beschränken sich jedoch auf 256 Farben. Darunter würden in unserem Beispiel die Farbverläufe leiden. Das PNG-Format stellt bis zu 16,7 Millionen Farben bei verlustfreier Kompression dar und alle gängigen Browser zeigen es problemlos an.

Die Option Use separate directory for images? (eingebettete Bilder in einem Unterverzeichnis speichern) aktivieren Sie, wenn Sie alle aus dem Gesamtbild geschnittenen Einzelbilder in einem eigenen Verzeichnis vorfinden möchten. Bestätigen Sie dann mit OK; anschließend lässt sich die bei den Py-Slice-Einstellungen unter Dateiname und Pfad konfigurierte Datei im Web-Browser anzeigen.

Ab in den Quellcode

Wenn Sie die HTML-Datei in einem Texteditor öffnen, erkennen Sie am HTML-Code, dass Gimp eine Tabelle erstellt hat, in deren Zellen die Teile der an den Hilfslinien zerschnittenen Grafik liegen. Abbildung 9 zeigt die Verbindung zwischen dem HTML-Code und dem Gesamtbild; die drei Zellen einer Spalte stehen jeweils untereinander.

Das Beispiel sieht jedoch vor, dass die zentrale weiße Fläche einen einheitlichen Block bildet, die von Gimp vorgegebene Zeilenaufteilung soll deshalb nur für die Menüpunkte gelten. Dazu ändern Sie im Quelltext die mittlere Zelle der zweiten Zeile, also Zelle 1-1, in der neunten Zeile des HTML-Codes ab zu <td rowspan="7" valign="top">. Löschen Sie außerdem den Text <img alt=" " src="images/pyslice-1-1.png" width="582" height="48">. Damit ist dieser Bereich frei für Ihren eigenen Inhalt. Texte, Bilder oder andere HTML-Elemente, die Sie an dieser Stelle in den Quellcode schreiben, landen im weißen Bereich.

Abbildung 9: So stehen das Originalbild in Gimp und der von Py-Slice erzeugte HTML-Code im Zusammenhang.

Die folgenden sechs mittleren Zellen (also von 2-1 bis 6-1, entsprechend den Zeilen 14, 19, 24, 29, 34 und 39 im HTML-Quellcode) löschen Sie, denn sie stellen lediglich die einzelnen Abschnitte des weißen Bereichs im Zentrum der Seite dar. Das Schema des Ergebnisses zeigt Abbildung 10; den angepassten Quelltext finden Sie außerdem auf unserer Heft-CD.

Abbildung 10: Nach diesem Schema funktioniert die aus dem Bild generierte und manuell angepasste HTML-Tabelle.

Damit die Menüleiste auch wirklich als Menü funktioniert, müssen Sie noch passende Links manuell einarbeiten: In den Zeilen im Code, die den Zellen 1-0 bis 6-0 entsprechen (Abbildung 9) fügen Sie dazu unmittelbar nach <td> den HTML-Code für den Link ein, also etwa <a href="Pfad/Dateiname"> ein, und am Ende der Zeile vor </td> schließt </a> das Link-Tag.

Zum vollständigen HTML-Dokument fehlt außerdem der HTML-Rumpf. Auch wenn die meisten Browser die von Py-Slice erzeugten HTML-Codes auch alleinstehend korrekt anzeigen, müssen gemäß dem Standard am Anfang der Datei Zeilen dieser Art stehen:

<HTML>
<HEAD>
<TITLE>[Mein Seitentitel]</TITLE>
<META HTTP-EQUIV="Content-Type" ↩
CONTENT="text/html; charset=↩
iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<div align="center">

Ihre Gegenstücke bilden am Ende der HTML-Datei diese Zeilen:

</div>
</BODY>
</HTML>

Der <div>-Tag zentriert die gesamte Seite, damit sie auch bei höheren Auflösungen ansprechend platziert wird. Beim Rest handelt es sich um HTML-Kopf und -Fuß, nach dem HTML-Standard bei jeder Seite unverzichtbar. Zur weiteren Gestaltung lesen Sie den Artikel über Cascading Style Sheets ab Seite 42 im Heft, HTML-Grundlagen schlagen Sie beispielsweise unter [2] nach.

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Effizienter arbeiten mit Gimp
    Unsere Tipps bringen Ihnen Gimp-Funktionen und -Arbeitstechniken näher. Diesmal zeigen wir, wie Sie ein Puzzle gestalten, Farbränder verwischen und Wellen erzeugen. Außerdem lernen Sie praktische Shortcuts und den Plug-in-Browser kennen.
  • Dra(h)matik
    Out-of-Bound-Effekte sorgen bei Präsentationen und Diashows für die ungeteilte Aufmerksamkeit des Publikums. Entsprechende Bilder erzeugen Sie in Gimp mit einfachsten Mitteln.
  • Bildbearbeitung mit Gimp, Teil 3
    Heute möchte ich mich mit Ebenen beschäftigen. Wenn man komplexere Arbeiten macht, sind Ebenen der Weg der Wahl, um Bilddaten einfach zu organisieren und anzuordnen.
  • Flott unterwegs
    Lange kann es nicht mehr dauern, bis das nächste Gimp-Major-Release 2.10 erscheint. Wir beleuchten die neuesten Entwicklungen aus den Entwicklerversionen 2.9.4 und 2.9.5.
  • Effizienter arbeiten mit Gimp
    Unsere Tipps bringen Ihnen Gimp-Funktionen und -Arbeitstechniken näher. Diesmal zeigen wir, wie Sie das Verschmieren-Werkzeug einsetzen, Schlagschatten und einen pfiffigen Color-Key-Effekt erzeugen. Außerdem stellen wir die Vordergrundauswahl und die Kontrastspreizung vor.
Kommentare

Infos zur Publikation

LU 04/2017: SPEZIAL-DISTRIBUTIONEN

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Aktuelle Fragen

WLAN lässt sich nicht einrichten
Werner Hahn, 21.03.2017 14:16, 0 Antworten
Dell Latitude E6510, Ubuntu 16.4, Kabelbox von Telecolumbus. Nach Anklicken des Doppelpfeiles (o...
"Mit Gwenview importieren" funktioniert seit openSuse 42.2 nicht mehr
Wimpy *, 20.03.2017 13:34, 2 Antworten
Bisher konnte ich von Digitalkamera oder SD-Karte oder USB-Stick Fotos mit Gwenview importieren....
Ich habe eine awk Aufgabe und bekomme es nicht so Recht hin
Dennis Hamacher, 10.03.2017 18:27, 1 Antworten
Ich hoffe Ihr könnt mir dabei helfen oder mir zeigen wie der Befehl richtig geschrieben wird. Ich...
Unter Linux Open Suse Leap 42.1 einen Windows Boot/ ISO USB Stick erstellen...
Tim Koetsier, 07.03.2017 15:26, 1 Antworten
Hallo, weiß jemand wie ich oben genanntes Vorhaben in die Tat umsetzen kann ? Wäre echt dankba...
Druckertreiber installieren OpenSuse42.1
Tim Koetsier, 07.03.2017 15:22, 1 Antworten
hallo, kann mir BITTE jemand helfen ich verzweifel so langsam. Habe einen Super Toner von Canon...