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

  • Das ist alles nur geklaut...
  • 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.
  • 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.
  • Anwender-Tipps und kleine Kniffe zu Gimp
    Die hier aufgeführten Tipps und Tricks bringen Ihnen Gimp-Funktionen und -Arbeitstechniken näher. Wir zeigen, wie Sie mit Tastenkombinationen effektiver arbeiten, Leuchtsymbole malen und über Filter einen realitätsnahen Wassereffekt erzeugen.
  • Den Künstler wecken
    Unsere Tipps und Tricks bringen Ihnen Gimp-Funktionen und -Arbeitstechniken näher. Wir zeigen in dieser Ausgabe, wie Sie Haare freistellen, Schriften mit Chromeffekten verschönern, zu dunkel geratene Fotos aufhellen und Bildbereiche spiegeln.
Kommentare

Infos zur Publikation

LU 12/2016: Neue Desktops

Digitale Ausgabe: Preis € 5,99
(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

Drucker Epson XP-332 unter ubuntu 14.04 einrichten
Andrea Wagenblast, 30.11.2016 22:07, 2 Antworten
Hallo, habe vergeblich versucht mein Multifunktionsgerät Epson XP-332 als neuen Drucker unter...
Apricity Gnome unter Win 10 via VirtualBox
André Driesel, 30.11.2016 06:28, 2 Antworten
Halo Leute, ich versuche hier schon seit mehreren Tagen Apricity OS Gnome via VirtualBox zum l...
EYE of Gnome
FRank Schubert, 15.11.2016 20:06, 2 Antworten
Hallo, EOG öffnet Fotos nur in der Größenordnung 4000 × 3000 Pixel. Größere Fotos werden nic...
Kamera mit Notebook koppeln
Karl Spiegel, 12.11.2016 15:02, 2 Antworten
Hi, Fotografen ich werde eine SONY alpha 77ii bekommen, und möchte die LifeView-Möglichkeit nu...
Linux auf externe SSD installieren
Roland Seidl, 28.10.2016 20:44, 1 Antworten
Bin mit einem Mac unterwegs. Mac Mini 2012 i7. Würde gerne Linux parallel betreiben. Aber auf e...