58
GIMP und k-tools Skriptum zum Workshop „Online präsent mit eigener Website“ 5., überarb. Aufl. © Büchereiverband Österreichs 2010

GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

GIMP und k-tools

Skriptum zum Workshop „Online präsent mit eigener Website“

5., überarb. Aufl.

© Büchereiverband Österreichs 2010

Page 2: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

Gefördert durch das

Page 3: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

Liebe Kolleginnen und Kollegen! Da das Internet immer mehr zu einer konstanten Größe im Alltagsleben wird ist eine Website für Bibliotheken beinahe schon ein Muss. Eine Website gehört mittlerweile zum Standardangebot von Bibliotheken und ist damit ein wichtiger Service für die Bibliotheksbenutzer. Diese können sich online über Ihre Dienste informieren und im Online-Katalog recherchieren. Rund um die Uhr sind auf der Website die Basisinformationen, wie etwa die Adresse der Bibliothek, Öffnungszeiten, Kontaktadressen von Ansprechpersonen, Hinweise zur Anfahrt, Neuerwerbungslisten usw., abrufbar. Immer öfter ist die Website der erste Kontakt der BenutzerInnen mit der Bibliothek. Daher ist es wichtig, dass die dort veröffentlichten Informationen aktuell und richtig sind. Änderungen der 4. Aufl.: Da in der letzten Zeit vor allem das online-stellen von Bildern sehr vereinfacht wurde, wollten wir diese Strömung aufgreifen und Ihnen die Möglichkeiten von Bilddatenbanken und Alben eröffnen. Das neue Kapitel 4 widmet sich diesem Thema. Weiters wurden einige Bilder im Gimp-Kapitel ersetzt, da sich auch Gimp stilistisch weiterentwickelt hat. Änderungen der 5. Aufl.: Auch Websites brauchen von Zeit zu Zeit eine Wartung. Im Rahmen einer technischen Umstellung wurden auch die Funktionen des Artikeleditors erweitert. Daher wurde das 5. Kapitel adaptiert, teils gekürzt und teils ausgeweitet. Wir wünschen Ihnen viel Spaß beim Arbeiten an Ihrer neuen Website! Das EDV-Team des BVÖ Kontakt: Martin Stieber Büchereiverband Österreichs Museumstraße 3/B/12 1070 Wien E-Mail: [email protected] Tel.: 01/406 97 22/30

Page 4: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

Der Büchereiverband unterstützt Mitgliedsbibliotheken bei der Gestaltung einer eigenen Website und hostet diese auch entgeltfrei. Es steht dafür ein Website-Prototyp in drei verschiedenen Farben zur Verfügung, der ganz ohne HTML-Kenntnisse gewartet werden kann. Die Menüpunkte, Inhalte und Fotos können somit sehr einfach auf die Website gestellt werden. Dieses Skriptum erläutert die Funktionsweisen des Bildbearbeitungsprogramms Gimp, des Albumprogramms Jalbum und des Content-Management-Systems k-tools! Dieses Skriptum wird als Unterlage für den Workshop „Online präsent mit eigener Website“ verwendet und ist dementsprechend aufgebaut.

Page 5: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

1

INHALT 1. Das Bildbearbeitungsprogramm GIMP ............................................. 3

1.1. GIMP HERUNTERLADEN UND INSTALLIEREN ......................................................... 3 2. Allgemeines zu Bildern ...................................................................... 5

2.1. BILDFORMATE FÜR DIE WEBSITE ............................................................................. 5 2.2. DIE WICHTIGSTEN BEGRIFFE .................................................................................... 5

3. Start von GIMP .................................................................................... 7 3.1. DAS WERKZEUGFENSTER ......................................................................................... 8 3.2. DATEI ÖFFNEN ............................................................................................................ 8 3.3. BILDGRÖSSE FESTSTELLEN UND ÄNDERN .......................................................... 10

3.3.1. Bildgröße ändern ................................................................................................... 11 3.4. BILD ZUSCHNEIDEN .................................................................................................. 12 3.5. BEARBEITUNGSAUSWAHL TREFFEN ..................................................................... 13 3.6. BILD EINFÄRBEN ....................................................................................................... 13 3.7. SCHRIFTZUG INS BILD SETZEN .............................................................................. 14 3.8. VERSCHIEBEN ........................................................................................................... 15 3.9. EBENEN ...................................................................................................................... 16

3.9.1. Neue Ebene anlegen ............................................................................................ 17 3.10. Von der THEORIE in die PRAXIS – Der Banner für die Website .............................. 18

4. Jalbum – Fotoalben im Internet ...................................................... 29 4.1. Herunterladen und Installieren ..................................................................................... 29 4.2. Album erstellen ............................................................................................................ 29 4.3. Album online stellen ..................................................................................................... 31

5. CMS – Das Content Management System „k-tools“ ..................... 32 5.1 EINSTELLUNGEN ........................................................................................................ 33 5.2. USER ........................................................................................................................... 35

5.2.1. Loginname und Passwörter ändern ...................................................................... 35 5.2.2. Neuen Benutzer anlegen ...................................................................................... 36

5.3. MEDIAFILES ............................................................................................................... 36 5.3.1. Ordnung in der Mediendatenbank: Die Kategorien ............................................... 37 5.3.2. Hochladen eines Fotos ......................................................................................... 38 5.3.3. Löschen eines Dokuments aus der Mediendatenbank ......................................... 39

5.4. MENU .......................................................................................................................... 39 5.4.1. Menüpunkt anlegen ............................................................................................... 39 5.4.2. Menüpunkte ordnen .............................................................................................. 41 5.4.3. Menüpunkte löschen oder umbenennen ............................................................... 41

5.5. ARTIKEL ...................................................................................................................... 42 5.5.1. Neuen Artikel anlegen ........................................................................................... 42 5.5.2. Formatierungsmöglichkeiten für Artikel ................................................................. 45 5.5.2.1. Link einfügen ...................................................................................................... 47 5.5.3. Bilder in Artikel einfügen ....................................................................................... 50

5.8. Zum Abschluss: Die„HOMEPAGE“ (Startseite) ........................................................... 52

Page 6: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

2

Page 7: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

3

1. Das Bildbearbeitungsprogramm GIMP 1.1. GIMP HERUNTERLADEN UND INSTALLIEREN Das Programm GIMP ist Freeware. Sie können sich das Programm also kostenlos aus dem Internet herunterladen. Dieses Skriptum erklärt die wichtigsten Möglichkeiten der Bildbearbeitung mit der Version 2.6. Wir laden das Programm von der Website http://gimp.softonic.de/ herunter. Schritt 1: Geben Sie die Adresse http://gimp.softonic.de/ im Browser ein und rufen Sie die Seite auf. Im unteren Bereich der Seite finden Sie die Möglichkeit zum Download.

Schritt 2: Klicken Sie auf „Download“. Es öffnet sich ein Fenster mit der Möglichkeit eines kostenlosen Downloads von der Herstellerseite. Klicken Sie hier noch mal auf „Download“. Im erschienenen Fenster klicken Sie auf „Speichern“ und speichern Sie die Datei auf Ihrem Desktop.

Page 8: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

4

Jetzt haben Sie die exe.Dateien heruntergeladen und können sie installieren. Doppelklicken Sie dazu auf die Datei gimp-2.X.X-i686-setup.exe auf Ihrem Desktop und folgen Sie den Installationsanweisungen des Programms. Wenn Sie GIMP nun installiert haben, können Sie damit arbeiten. Im Folgenden finden Sie die wichtigsten Möglichkeiten, die GIMP bietet. Davor aber noch ein paar allgemeine Anmerkungen zu Bildern und Bildformaten. Hilfe zur Installation von GIMP finden Sie z.B. auf http://docs.gimp.org/de/index.html Neue Programmversionen werden auf http://gimp.org/windows veröffentlicht. Sie können auch bei http://www.heise.de/software/ heruntergeladen werden. Das Handbuch zu Gimp (aktuell 27 MB) kann sowohl von gimp.org, als auch von heise und softonic heruntergeladen werden.

Page 9: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

5

2. Allgemeines zu Bildern Bilder können in verschiedenen Bildformaten gespeichert werden. Welches Format für welche Anwendung das Beste ist, kann man leider nicht so pauschal sagen. Ich nenne hier nur die drei für uns wichtigsten Bildformate: .JPG, .GIF und .XCF. 2.1. BILDFORMATE FÜR DIE WEBSITE Was ist .jpg (.jpeg)? Joint Photografic Experts Group Dies ist das bevorzugte Format für Fotos, bei dem viel Wert auf eine kleine Dateigröße gelegt wird. Das Format kann von praktisch allen Programmen geöffnet werden. Es eignet sich besonders für Bilder auf Webseiten, die viele verschiedene Farben benutzen (z.B. bei fließenden Übergängen). Was ist gif? Graphics Interchange Format Dieses Format ist besonders für Internetseiten geeignet, allerdings nur für Bilder mit überwiegend einheitlichen Farbflächen wie z.B. Buttons, Logos mit wenig Farbverläufen. Bilder für die Website als .jpg (Bilder) oder .gif (Logo) speichern Ein weiteres Bildformat, das uns im Zusammenhang mit Gimp noch beschäftigen wird, ist: .xcf – ein GIMP-spezifisches Format Format für GIMP-Bilder. Wenn wir unsere Arbeit in diesem Format speichern, werden unter anderem folgende Zusatzinformationen mitgespeichert:

Ebenen Bildkommentare Transparenz für Ebenen

Man sollte ein bearbeitetes Bild immer im xcf-Format archivieren. Nur so kann man sicher sein, dass man das originale Rohmaterial mit allen Zusatzinformationen archiviert hat und auch etwaige Änderungen vornehmen kann. Banner immer auch im xcf-Format speichert, damit die Ebenen erhalten bleiben! 2.2. DIE WICHTIGSTEN BEGRIFFE Auflösung: Unter Auflösung versteht man die Anzahl von Bildpunkten, die ein System darstellen (Monitor, Drucker), bzw. auslesen kann (Scanner, Digitalkamera...). Wenn man z.B. Bildschirmauflösung sagt, dann ist die Anzahl der Pixel gemeint, die in horizontaler und vertikaler Richtung auf der Fläche des Monitors dargestellt werden, z.B. 800x600 Bildpunkte, 1024x768, ... Beim Drucker bezeichnet die Auflösung die Zahl der Punkte, die pro Einheit dargestellt werden können. Als Maßeinheit wird die Einheit dpi verwendet. dpi dots per inch Anzahl von Punkten, die pro Zoll dargestellt oder gedruckt werden können. Mit dpi wird auch die Auflösung von Bildern gemessen. Fürs Internet ist Standard-Auflösung 72 dpi, fürs Drucken ab 150 dpi (Schnelldruck), und ab 300 dpi für normale Ausdrucke.

Page 10: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

6

Auflösung für Fotos, die im Internet verwendet werden: 72 dpi Beachten Sie, dass eine höhere Auflösung immer eine längere Ladezeit mit sich bringt, was gerade im Internet als besonders lästig empfunden wird. Allgemeine Tipps zu den Bildern für die Website (Die folgenden Größenangaben sind Richtwerte): Banner-Standardgröße: 720 x 95 Pixel Startseiten-Foto oder seitenfüllendes Foto: 650 Pixel breit x 490 Pixel hoch Teamfotos (Einzelpersonen): Breite: ca. 150 – 200 Pixel Buchvorstellungen: Breite ca. 100 – 120 Pixel Bildergalerie (mehrere Bilder nebeneinander): Breite ca. 200 – 250 Pixel Dateinamen dürfen keine SONDERZEICHEN, UMLAUTE oder LEERZEICHEN enthalten. Format: nur jpg/jpeg oder gif

Page 11: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

7

3. Start von GIMP Wenn Sie GIMP starten, öffnet sich der GIMP-Werkzeugkasten und das Hauptfenster, in dem die Bilder angezeigt werden. Der Werkzeugkasten fasst die wichtigsten Werkzeuge an einem gemeinsamen Ort zusammen. Zu dem jeweiligen ausgewählten Werkzeug werden im unteren Bereich des Werkzeugkastens Einstellungsmöglichkeiten angezeigt. Was die einzelnen Symbole bedeuten, erfahren Sie in folgender Liste:

Page 12: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

8

3.1. DAS WERKZEUGFENSTER

Quelle: http://www.pl-berichte.de/work/gimp/gimp2.html am 03.11.2008, 11:30. 3.2. DATEI ÖFFNEN Öffnen Sie einfach einmal ein Foto, das Sie mit GIMP bearbeiten möchten: 1. Foto öffnen: Klicken Sie im Hauptfenster auf Datei>Öffnen 2. Dann erscheint ein Fenster, in dem Sie die Datei innerhalb der Dateistruktur suchen und das gewünschte Bild doppelt anklicken, um es in GIMP zu öffnen.

Die 6 Werkzeuge zum Selektieren (markieren). Jedes von den Tools hat noch eine Reihe anderer Optionen. Die Optionen erreicht man durch einen Doppelklick auf das Icon.

Markierten Bereich verschieben. Bild (Ausschnitt) vergrößern, Hilfslinien verschieben.

Ausschneiden, zuschneiden, skalieren, verzerren, drehen, spiegeln (vertikal, horizontal)

Damit wird ein Text erzeugt.

"Pipette" - mit Hilfe dieses Tools wird die Farbe auf einem Bild abgefragt.

Bild/Bereich füllen, mit Farbe oder mit Farbverlauf

Stift mit scharfen Kanten, Pinsel mit weichen Kanten, mit Tinte zeichnen, besondere Art von Stift.

Radiergummi, es wird zur Hintergrundfarbe oder zur Transparenz radiert.

Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen (zeichnen mit einem vorhandenem Muster).

Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen, bzw. aufhellen oder abdunkeln.

Verschmieren

Werkzeug zum Messen von Abständen auf einem Bild.

Einen Bereich nach einer Farbe wählen. Es werden alle Bereiche auf dem Bild markiert, die dieselbe Farbe haben.

Page 13: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

9

3. Nun öffnet sich im Hauptfenster das ausgewählte Bild:

Page 14: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

10

3.3. BILDGRÖSSE FESTSTELLEN UND ÄNDERN Die Größe eines Bildes sehen Sie einerseits direkt in der blauen Titelleiste des Fensters, andererseits aber auch unter dem Menüpunkt Bild>Bild skalieren feststellen:

Dieses Foto hat z.B. 1536x1024 Pixel und eine Auflösung von 72dpi (also für das Web durchaus in Ordnung).

Page 15: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

11

Um sich ein Bild von der Größe in Pixel machen zu können, stellen Sie einfach einmal die Auflösung Ihres Bildschirms fest. Mein Bildschirm hat z.B. 1024x768 px. Das Foto ist also größer als mein Bildschirm. 3.3.1. Bildgröße ändern Wenn Sie die Breite des Bildes ändern wollen, klicken Sie einfach in die Box und geben Sie die Anzahl der Pixel ein, auf die Sie das Foto reduzieren wollen (in meinem Fall: 400px). Klicken Sie dann auf „Skalieren“ und GIMP ändert automatisch auch die Höhe (sodass die Proportionen erhalten bleiben - diese Funktion können Sie durch Klicken auf das Kettensymbol deaktivieren, was jedoch zu einer Verzerrung der Bilder führt).

Das Foto hat jetzt nur mehr 400x267px

Page 16: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

12

3.4. BILD ZUSCHNEIDEN Was machen wir aber, wenn wir z.B. ein Bild brauchen, das genau 400px breit und 250px hoch ist? Mit der Option „Bild>Bild skalieren“ kommen wir hier nicht weiter, da Bilder, die ohne konstantes Seitenverhältnis skaliert werden, verzerrt werden. Das richtige Werkzeug zum Schneiden ist das Messer aus der Toolbox! 1. Schritt: Um ein Werkzeug aus der Toolbox zu aktivieren, klicken Sie das Symbol einfach an!

2. Schritt: Sie gehen jetzt mit der Maus zu dem Punkt, von wo aus Sie zu schneiden beginnen wollen (im vorliegenden Fall ist der Ausgangspunkt die linke obere Ecke).

3. Schritt: Sie beginnen zu schneiden, indem Sie die linke Maustaste festhalten. Im unteren Bereich des Hauptfensters erscheint die aktuelle Größe des Ausschnitts. Fahren Sie mit der Maus so weit bis Sie bei Bildhöhe 250px angelangt sind. Wenn Sie die passende Größe haben, klicken Sie auf „Zuschneiden“. Ihr neues Bild hat nun die gewünschte Größe von 400x250px.

Page 17: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

13

Wenn Sie nicht gerne mit der Maus hantieren, oder eine ganz spezielle Größe brauchen können Sie im unteren Bereich des Werkzeugkastens die Werte direkt eintragen. Hier ist es möglich den gewünschten Ursprung, die Breite und die Höhe einzutippen und den Bildausschnitt mit Hilfe der Maus vor dem Zuschneiden zu verschieben! 3.5. BEARBEITUNGSAUSWAHL TREFFEN Für Mal-, Einfärb- und Kopierfunktionen ist das Treffen einer Auswahl sehr sinnvoll. Dadurch können Sie einen Bereich auf dem Bild markieren und nur diesen Ausschnitt bearbeiten. Die Auswahlwerkzeuge sind die ersten vier Symbole in der Toolbox! Mit den ersten 3 Symbolen können rechteckige, ovale und freie (gezeichnete) Auswahlen getroffen werden. Der Zauberstab markiert alle Flächen, die eine ähnliche Farbe haben. 3.6. BILD EINFÄRBEN Das richtige Werkzeug zum Einfärben ist der Farbkübel aus der Toolbox! 1. Schritt: Um ein Werkzeug aus der Toolbox zu aktivieren, klicken Sie das Symbol einfach an! 2.Schritt: Klicken Sie in der Toolbox auf Vordergrundfarbe und es öffnet sich das Fenster „Vordergrundfarbe ändern“. Wählen Sie hier die Vordergrundfarbe aus, mit der Sie das Foto einfärben wollen.

Page 18: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

14

3. Schritt: Nun beschütten Sie das Bild oder die getroffene Auswahl einfach mit dem Kübel – Sie klicken dazu einfach mit der Maus in das Bild (aufpassen, dass der Kübel aktiviert ist!) bzw. in den mit gestrichelter Linie umrandeten Auswahlbereich.

3.7. SCHRIFTZUG INS BILD SETZEN Das richtige Werkzeug zum Schreiben ist das A aus der Toolbox! 1. Schritt: Um das Schreibwerkzeug aus der Toolbox zu aktivieren, klicken Sie das A-Symbol einfach an! Im unteren Bereich der Toolbox erscheinen die Optionen für den Text.

Page 19: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

15

2. Schritt: Klicken Sie mit der Maus an den Punkt, wo Sie zu schreiben beginnen wollen. Es öffnet sich ein kleines Schriftfenster (Text Editor), in den Sie den Text schreiben. Bitte beachten Sie auch, dass für die Schrift die Vordergrundfarbe gewählt wird und Sie diese im Vorfeld wählen sollten.

3.8. VERSCHIEBEN Das richtige Werkzeug zum Verschieben sind die vier Pfeile aus der Toolbox!

Mit dem aktivierten Pfeil markieren Sie einfach den Schriftzug und ziehen ihn an die richtige Stelle. Es werden grundsätzlich Ebenen verschoben. Daher kann es Ihnen auch passieren, dass Sie das Hintergrundbild verschieben und eine gerasterte Fläche sichtbar wird. In diesem Fall empfiehlt sich die Zurückfunktion (Bearbeiten – Rückgängig)

Page 20: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

16

3.9. EBENEN Das Beste an Bildbearbeitungsprogrammen ist das Arbeiten mit den EBENEN! Was sind Ebenen? Um bei unserem Beispiel zu bleiben: Wir haben einen blauen Banner mit einer weißen Schrift. Der blaue Hintergrund ist die 1. Ebene und die Schrift die 2. Ebene. Wozu das gut ist? Sie können die einzelnen Ebenen immer wieder bearbeiten! Beim Banner werden Sie sehen, wie praktisch das ist. Wo finden Sie die Ebenen? Klicken Sie auf Fenster>Andockbare Dialoge. Hier finden Sie eine Liste an möglichen Fenstern – hier wählen Sie bitte Ebenen.

In unserem Beispiel sehen wir, dass die Schrift eine eigene Ebene ist, ohne dass wir etwas dazu beigetragen haben. Wenn wir einen Schriftzug über ein Foto legen, wird also automatisch eine neue Ebene angelegt!

Page 21: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

17

Mit Doppelklick auf den Text der Ebenen (z.B. auf „Schrift auf Bild“) können Sie den Namen der Ebene ändern! 3.9.1. Neue Ebene anlegen Klicken Sie im Ebenenfenster einfach auf das Symbol ganz links. WICHTIG! Vor jedem Arbeitsschritt eine neue Ebene anlegen und auf der neuen Ebene arbeiten!

Page 22: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

18

3.10. Von der THEORIE in die PRAXIS – Der Banner für die Website Maße für den Banner auf der Website: 720x95px Ziel für den Banner: 1. Ausschnitt aus dem Leitbild abgesoftet als Hintergrund des Banners 2. Schriftzug „Öffentliche Bibliothek Raab“ 3. BVÖ-Logo in linker oberer Ecke 1. Schritt: Wir legen in GIMP ein neues Dokument mit der Größe 720x95 Pixel an – dies wird unser Banner, den wir bearbeiten. In der Toolbox auf „Datei>Neu“ und im neuen Fenster die Maße bei Breite und Höhe eingeben.

Ihr Bildschirm sollte nun so aussehen:

Bevor wir den nächsten Arbeitsschritt machen, speichern wir das Dokument.

Page 23: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

19

SPEICHERN IN GIMP Das GIMP-eigene Format hat die Endung .xcf und speichert alle Ebenen des Dokumentes mit. Die .xcf-Datei ist sozusagen die Master-Datei, die Sie immer wieder bearbeiten können! WICHTIG! Speichern Sie jedes Dokument im GIMP-eigenen Format ab – nur so bleiben die Ebenen erhalten!

Page 24: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

20

Um den Speichervorgang abzuschließen, klicken Sie auf „Speichern“ 2. Schritt: Öffnen des Leitbildfotos und einen Ausschnitt mit den Maßen 720x95px ausschneiden.

Datei>Öffnen Ausschnitt ausschneiden

Dieser Ausschnitt soll nun der Hintergrund unseres Banners werden!

Page 25: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

21

3. Schritt: Wir ziehen die Ebene des Ausschnitts aus dem Leitbild in den Banner.

4. Schritt: Nun ist der Ausschnitt des Leitbilds als Hintergrund in unserem Banner:

Wir haben nun schon 2 Ebenen in unserem Banner: 1. den weißen Hintergrund 2. die Hintergrund-Kopie

Page 26: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

22

Umbenennen der Ebenen: Damit wir uns in den Ebenen zurechtfinden, benennen wir die Ebene „Hintergrund-Kopie“ in „Leitbild“ um (Doppelklick in die Schrift der Ebene, die wir umbenennen wollen). WICHTIG! Beim Arbeiten mit Ebenen immer beachten, auf welcher Ebene Sie sich befinden (blau hinterlegt) – denn diese ist es, welche Sie bearbeiten! 5. Schritt: Absoften des Leitbild-Ausschnitts Um das Leitbild ab zu soften, nehme ich einfach die Deckkraft zurück. Ich schiebe den Schieber im Ebenen-Fenster dazu einfach nach links.

Um die Farben eines Bildes zu ändern stehen Ihnen im Menü Werkzeuge>Farben (bei neueren Versionen auch direkt unter Farben) einige Tools zur Verfügung (z.B. Farbton-Sättigung, Helligkeit-Kontrast). Am besten Sie probieren selbst einmal aus, welche Effekte die Änderung dieser Einstellungen hat.

Page 27: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

23

Der Hintergrund ist heller geworden und wir können nun eine Schrift darüberlegen. 6. Schritt: Schriftzug „Öffentliche Bibliothek Raab“ 6.1. Textwerkzeug auswählen: In der Toolbox das Werkzeug „T“ auswählen und mit Klick in die Schriftfarbe die Farbe ändern. 6.2. Schriftfarbe auswählen: Die Farbwerte des Website-Prototypen sind: CMS – Farb-Hexwerte: rot: FF0000 | grün: 339933 | blau: 0000CD Ich wähle als Schriftfarbe dasselbe Rot wie es auf der Website verwendet wird: Dafür gebe ich im Textfarben-Fenster einfach den Hexwert „FF0000“ ein und auf „OK“ klicken

Page 28: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

24

6.3. Schrift setzen Klick in den Banner – es öffnet sich ein Textfenster, in das der Text geschrieben wird:

Schriftgröße, Schriftart können natürlich geändert werden – ebenso auch die Farbe, falls man sieht, dass sie nun doch nicht passt. Der Vorteil am Arbeiten mit den Ebenen ist, dass Sie immer wieder auf die Textebene klicken können und Schriftart, -größe, -farbe wieder ändern können! 6.4. Schrift verschieben Symbol mit vier Pfeilen auswählen, sich vergewissern, dass Sie auf der Ebene stehen, die Sie verschieben wollen (i.e. in unserem Fall die Textebene) und mit linker Maustaste verschieben.

Page 29: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

25

7. Logo auf den Banner platzieren 7.1. Logo öffnen 7.2. Logo in die passende Größe bringen: Höhe darf 95px nicht überschreiten. Menü Bild>Bild skalieren und die Höhe auf 95px skalieren 7.3. Ebene des Logos in den Banner ziehen 7.4. Logo mit Verschieben-Werkzeug an die richtige Position bringen

Page 30: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

26

Wenn das Logo verkleinert ist, ziehen wir die Ebene des Logos einfach in den Banner

Page 31: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

27

Mit dem Verschieben-Werkzeug bringen wir das Logo nun noch in die richtige Position:

8. Schritt: Konvertieren in ein webtaugliches Format XCF ist kein webtaugliches Format – im Web werden nur .JPEG und .GIF angezeigt. Das heißt wir müssen unseren Banner – damit wir in auf der Website auch sehen – als .JPEG abspeichern: .XCF ist kein webtaugliches Format. Deshalb am Ende das Bild für die Website immer als .JPEG abspeichern! 1. Datei>Speichern unter 2. Im Fenster bei Dateityp .JPEG auswählen 3. Auf Speichern klicken – es öffnet sich ein neues Fenster 4. und in diesem Fenster auf „Exportieren“ klicken und im nächsten Fenster 5. auf „OK“

Page 32: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

28

Damit ist der Banner nun auch als .JPEG gespeichert und fertig, um auf die Website zu kommen. Vergessen Sie nicht den Banner zum Schluss auch noch als .XCF-Datei zu speichern! Nur so bleiben die Ebenen erhalten und Sie können wieder bearbeiten. Weiterführende Informationen zu GIMP finden Sie auf: http://www.wingimp.de/ http://gimpforum.de

Page 33: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

29

4. Jalbum – Fotoalben im Internet Da ein Bild mehr als tausend Worte sagt und durch den Siegeszug der Digitalkameras mehr Bilder online gestellt werden können, soll dieser Abschnitt des Skriptums in ein Programm zum Erstellen von Web-Photoalben einführen. 4.1. Herunterladen und Installieren Die Freeware Jalbum ist kostenlos unter http://jalbum.net/software/ herunterladbar. Bitte speichern Sie die Datei Jalbum-install.exe auf Ihren Rechner und führen Sie sie aus. Eine Installationsroutine leitet Sie durch den Installationsvorgang. Auf dem Desktop erscheint dann der grüne Frosch als Symbol für das Programm Jalbum. 4.2. Album erstellen Wenn Sie das Programm öffnen, erscheint die Startseite, in die Sie aus dem Windows-Explorer direkt die Bilder mit Drag & Drop (Ziehen und Ablegen) hineinziehen können.

Um ihre Alben zu unterscheiden müssen Sie im nächsten Schritt einen Album-Namen vergeben. Am besten verwenden Sie keine Umlaute und Leerzeichen, da es im Browser sonst zu Problemen mit der Anzeige der Bilder kommen kann. Im Hauptbereich des Programms werden dann die Bilder angezeigt und Sie haben einige Einstellungsmöglichkeiten: 1) Sortierung der Bilder Wenn Sie mit der rechten Maustaste in den weißen Bereich zwischen den Bildern klicken, können Sie die Sortierung der Bilder festlegen, falls Jalbum diese nicht richtig gemacht hat. Auch bei den Bildern gibt es ein Kontextmenü, das über die rechte Maustaste aufgerufen werden kann. Dort ist es möglich Bilder zu drehen und aus der Auswahl im Nachhinein auszuschließen.

Page 34: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

30

2) Einstellungen treffen Über Album > Einstellungen kommen Sie in die Einstellungen des Albums. Wichtig sind für Sie vor allem die Reiter „Seiten“ und „Bilder“, da Sie hier festlegen wie viele Bilder auf einer Seite angezeigt werden sollen und wie groß die Anzeige sein soll.

In unserem Beispiel wählen wir 4 Spalten und 4 Zeilen und die Bildabmessungen 160x160 (für die Miniaturen) und 800x800 (für die Dia-Bilder). 3) Skin und Style – die Formatvorlagen Auf der linken Seite im mittleren Bereich können Sie wählen, wie Ihr Album aussehen soll. Wir wählen hier „Minimal“. Wenn Sie mit den Einstellungen durch sind, können Sie über den Button „Erstellen“ das Album lokal auf Ihrem Rechner erstellen. Standardmäßig wird es im Windows Explorer unter „Eigene Dateien/My Albums“ gelegt.

Page 35: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

31

4.3. Album online stellen Um das Album online zu stellen, können Sie gleich im Fenster „Generiere Album“ auf „Veröffentlichen“ klicken und im nächsten Fenster die erste Option auswählen.

Füllen Sie die Felder „FTP-Server (in folgender Form: www.name.bvoe.at – wobei bei „name“ Ihr Benutzername steht), Benutzername, Kennwort“ (Diese Daten erhalten Sie vom BVÖ!) aus und klicken Sie auf „Verbinden“ um sich mit dem BVÖ-Server zu verbinden. Wenn Sie die Ordnerstruktur am Server sehen, sind Sie verbunden. Klicken Sie dann auf das „+“ vor „public_html“, da nur Dateien in diesem Ordner im Internet angezeigt werden.

Markieren Sie bitte den Ordner „album“ und klicken Sie auf „Neuer Ordner“ (Ordner mit dem roten Stern). Jalbum schlägt automatisch einen Namen mit ihrem Projektnamen vor z. B. „wochedeswissens-feb2010“. Wenn Sie „Upload“ anklicken wird das Album übertragen. Klicken Sie auf den Link bei „Adresse“ (http://www.name.bvoe.at/album/wochedeswissens-feb2010/). Der Webbrowser öffnet sich und Sie sehen ihr Album. Sie können dann auch den Link kopieren, um ihn auf Ihrer Webseite einzufügen. Bitte beachten Sie, dass Sie bei diesen letzten Schritten direkt auf unserem Server arbeiten. Falls Sie einzelne Schritte überspringen kann es vorkommen, dass das album im Internet nicht angezeigt wird oder statt ihrer Website nur mehr das Album. Bitte kontaktieren Sie uns in solchen Fällen.

Wie sie diesen Link dann auf der Website in einem Artikel unterbringen, wird im nächsten Kapitel (v.a. 5.7.2.1. Link einfügen) beschrieben.

Page 36: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

32

5. CMS – Das Content Management System „k-tools“ Jedes CMS hat zwei Bereiche mit unterschiedlichen Adressen: BVOE Frontend (Ergebnis für alle zugänglich im Internet) www.bvoe.at/~ihrebibliothek bzw. www.ihrebibliothek.bvoe.at Das Frontend teilt sich in 4 Bereiche (Frames): Home- und Kontaktframe: hier wird die Kontakt-E-Mail-Adresse und ein Link zur Startseite hinterlegt. Bannerframe: Hier erscheint das von ihnen erstellte Banner. Menüframe: Das Menü ermöglicht das Navigieren auf der Seite. Artikelframe: Hier erscheinen ihre Texte und Bilder. BVOE Backend (kennwortgeschützter Administrationsbereich):

Um in das CMS Ihrer Website zu gelangen, geben Sie in das Adressfeld des Browsers folgende URL ein: (Unter „nameihrerbibliothek“ schreiben Sie bitte die Bezeichnung, die Ihnen vom BVÖ zugewiesen wurde) http://www.bvoe.at/~nameihrerbibliothek/secure/k-tools

Page 37: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

33

Nun müssen Sie Username und Passwort eingeben. Diese Daten werden Ihnen per E-Mail vom BVÖ mitgeteilt. Die Menüpunkte des CMS Im linken Rahmen befindet sich das Menü des CMS.

User Artikel Mediafiles Einstellungen

5.1 EINSTELLUNGEN Banner, Farbe, Kontakt-E-Mail Klicken Sie auf den Menüpunkt „Einstellungen“, damit folgende Seite erscheint. Hier können Sie nun die Grundeinstellungen Ihrer Website vornehmen.

1.) Dokument Titel: Diese Informationen erscheinen im Überschriftenfeld des Browsers. 2.) Kontaktadresse: Geben Sie ins Feld „Kontakt Email“ Ihre E-Mail-Adresse ein. 3.) Farbauswahl: Die Website steht in drei Farben zur Verfügung. Mit Klick in „Rot“, „Blau“ oder „Grün“ wählen Sie die Farbe Ihrer Website aus. Diese Farbe bezieht sich auf das vorgegebene Layout Ihrer Website, die Menüpunkte, die Links, E-Mail- und Webadressen und Aufzählungszeichen.

Page 38: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

34

4.) Banner hochladen: Wenn Sie auf „Durchsuchen“ klicken, öffnet sich der Explorer. Sie erhalten folgendes Fenster:

Hier wählen Sie nun Ihren Banner im .jpg-Format aus, markieren ihn und klicken auf „Öffnen“. Damit wird der Banner hochgeladen. Nun klicken Sie im CMS auf „Speichern“. Nun sollten Sie so ein Fenster im CMS sehen: Der „OK-Button“ zeigt an, dass die Einstellungen gespeichert wurden und die Änderungen im Frontend sichtbar sind.

Öffnen Sie nun ein mit STRG+N ein neues Browserfenster oder eineN zweiteN Tab/Registerkarte, geben Sie die URL Ihrer Website (Frontend) ein und schauen Sie, wie die Website nun online aussieht.

Page 39: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

35

5.2. USER Der Menüpunkt „User“ bietet die Möglichkeit, die Passwörter zu ändern und andere Benutzer anzulegen. Dies ist dann sinnvoll, wenn eine andere Person in Ihrer Bibliothek auch im CMS arbeitet. So kann sich jede Person mit Ihrem Usernamen und Ihrem Passwort einloggen. Klicken wir also auf den Menüpunkt „User“ und auf den Untermenüpunkt „Liste“. In der Liste erhalten wir eine Überblick, wer bereits als Administrator und als Systembetreuer angelegt ist. 5.2.1. Loginname und Passwörter ändern

Öffnen Sie mit einem Klick auf den Loginnamen die Detailansicht des Benutzers, dann erhalten Sie folgendes Fenster:

Page 40: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

36

Hier können Sie nun Ihren Loginnamen und Ihr Passwort ändern. Klicken Sie anschließend auf „Speichern“. Nun können Sie sich mit Ihrem neuen Namen und Passwort ins CMS einloggen. Klicken Sie dafür in der Menüleiste links auf „Logout“ und geben Sie im Backend die neuen Daten ein. 5.2.2. Neuen Benutzer anlegen Klick auf Untermenüpunkt „Neu“: Es erscheint das Fenster mit den Benutzerdaten. Hier sind loginname, Passwort und Nachname verpflichtend auszufüllen. Der Nachname wird bei den Versionen der Artikel angezeigt – so sieht man immer genau, wer zuletzt an dieser Seite gearbeitet hat. 5.3. MEDIAFILES Alle Fotos, Grafiken, PDF- oder Word-Dokumente (z. B. Formulare), die Sie auf Ihrer Website verwenden wollen, müssen Sie zuerst in die Mediendatenbank hochladen. Der Banner, den wir schon hochgeladen haben, befindet sich – da es sich hierbei um eine Grafik handelt – in der Mediendatenbank. WICHTIG: Nur Fotos, die sich in der Mediendatenbank befinden, können Sie auf Ihrer Website verwenden! In die Mediendatenbank gelangen Sie über den Menüpunkt „MediaFiles“. Klicken Sie auf „Liste“, um sich anzeigen zu lassen, welche Dokumente sich bereits in der Datenbank befinden.

Page 41: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

37

5.3.1. Ordnung in der Mediendatenbank: Die Kategorien Legen Sie sich in der Mediendatenbank mindestens zwei Kategorien an: Eine für Bilder und eine andere für Dokumente (PDF, WORD,...). Klicken Sie auf „Liste“ (MediaFiles>Kategorie>Liste), um zu sehen, welche Kategorien bereits vorhanden sind. Klicken Sie auf „Neu“ (MediaFiles>Kategorie>Neu), um eine neue Kategorie anzulegen.

5.3.1.1. Ändern der Kategorien Sie haben auch die Möglichkeit die Namen der Kategorien nachträglich zu ändern, Unterkategorien anzulegen (durch Auswahl einer Überkategorie im Feld „parent“) oder Kategorien einfach zu löschen. Um Kategorien zu ändern, klicken Sie einfach auf Kategorien>Liste und dann auf die Kategorie, die Sie bearbeiten wollen.

Page 42: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

38

5.3.2. Hochladen eines Fotos Klicken Sie auf „Neu“ (MediaFiles>Neu), um ein neues Bild in die Mediendatenbank zu laden.

Wenn Sie auf „Durchsuchen“ klicken, öffnet sich der Windows Explorer (Dateimanager). Dort wählen Sie das gewünschte Foto aus, markieren es und klicken auf Öffnen. Dann weisen Sie ihm die Kategorie zu, unter der das Foto in der Mediendatenbank gespeichert werden soll (in unserem Fall „Bilder“). Wenn Sie das Foto hochgeladen haben, erscheint wieder der grüne „OK-Button“ mit der Meldung „MediaFile wurde gespeichert“.

Page 43: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

39

5.3.3. Löschen eines Dokuments aus der Mediendatenbank Wenn ein Bild nicht mehr auf der Website verwendet wird kann es aus den Mediafiles gelöscht werden. Dies empfiehlt sich, damit die Liste nicht zu lang und unübersichtlich wird. Klicken Sie auf „Liste“ (MediaFiles>Liste), um sich die Dokumente anzeigen zu lassen, dann klicken Sie auf das zu löschende Dokument, um zur Detailansicht zu gelangen, danach einfach auf „löschen“. 5.4. MENU Im Bereich Menu werden die Menüpunkte auf der linken Seite des Frontends angepasst. Unter dem Menüpunkt „Artikel“ finden Sie den Untermenüpunkt „Menu“. Klicken Sie diesen bitte an und dann auf „Gesamt“. Sie erhalten mit „Gesamt“ wieder einen Überblick über die bereits angelegten Menüpunkte.

5.4.1. Menüpunkt anlegen Um einen neuen Menüpunkt anzulegen, klicken Sie auf „Neu“ (Artikel>Menu>Neu). Um den Menüpunkt „Über uns“ anzulegen, schreiben Sie bei „name“ einfach den Namen des Menüpunkts, der im Frontend erscheinen soll. Sie können natürlich auch Großbuchstaben verwenden!

Page 44: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

40

Klicken Sie auf Speichern, Sie erhalten wieder den grünen „OK-Button“ und die Information „Die Kategorie wurde angelegt“. Sie können sich unter Artikel>Menu>Gesamt die aktuelle Liste ansehen. 5.4.1.1. Untermenüpunkt anlegen Nehmen wir an, wir wollen jetzt einen Untermenüpunkt zu „ÜBER UNS“ anlegen und dieser soll „Das Team“ heißen. Wir klicken wieder auf „Neu“ („Artikel>Menu>Neu“) und wählen in der Auswahl „parent“ nun „ÜBER UNS“ aus. Unter „Parent“ wird also der Menüpunkt ausgewählt, unter dem der neue Menüpunkt erscheinen soll. Wenn Sie nur Hauptmenüpunkte auf Ihrer Website anlegen wollen, dann brauchen sie die Option „parent“ nie zu füllen.

Page 45: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

41

5.4.2. Menüpunkte ordnen Klicken Sie auf „Gesamt“, um sich die angelegten Menüpunkte anzeigen zu lassen. Mit den Pfeilchen neben den Menüpunkten können Sie die Menüpunkte in die richtige Reihenfolge bringen.

5.4.3. Menüpunkte löschen oder umbenennen Klicken Sie auf „Gesamt“ (Artikel>Menu>Gesamt), um die angelegten Menüpunkte zu sehen. Dann klicken Sie auf den Menüpunkt, den Sie bearbeiten wollen. Es öffnet sich die Detailansicht des Menüpunkts (in unserem Beispiel „Veranstaltungen“). Nun können Sie den Menüpunkt einfach löschen oder durch Klick ins Namenfeld das Wort einfach umbenennen.

Page 46: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

42

5.5. ARTIKEL Die Artikel sind das Herzstück des CMS. Unter „Artikel“ versteht man das, was im Frontend im Inhaltsbereich angezeigt wird. 5.5.1. Neuen Artikel anlegen Klicken Sie auf Artikel>Liste, um sich die Artikel anzeigen zu lassen. In schwarzer Schrift erscheinen dort die Menüpunkte zu denen Inhalte eingefügt werden können.

Nehmen wir an, wir wollen den Menüpunkt „Über uns“ befüllen. Wir klicken rechts vom Menüpunkt auf „Neu“. Es erscheint eine neue Seite. Bei der Kategorie sehen Sie den ausgewählten Menüpunkt. In den Feldern Titel und Untertitel tragen Sie den Text ein der auf der Seite ganz oben in hervorgehobener Schrift erscheinen soll. (Nicht jede Seite muss unbedingt einen Titel haben – probieren Sie aus, wann es sinnvoll ist und wann nicht). In das große weiße Fenster tragen

Page 47: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

43

Sie dann den Inhalt der Seite ein. Am Ende des Textfeldes erscheint die Funktion den Seitenanfang-Link ein- und auszublenden. Es ist sinnvoll, diesen bei kurzen Texten zu entfernen.

Artikel speichern: Klicken Sie abschließend auf Speichern. Es erscheint folgendes Fenster:

Artikel freigeben: Sie erhalten wieder den grünen „OK-Button“ und ganz oben rechts die Möglichkeit durch Klick auf „freigeben“ den Artikel freizugeben. Erst wenn Sie auf „freigeben“ klicken, erscheint der Artikel auch im Frontend. Wenn der Artikel freigeben wird, erscheint statt „freigeben“ ein Häkchen und ein rotes X:

Page 48: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

44

Nun können wir den Menüpunkt „Über uns“ auch schon im Frontend sehen:

Ansicht unter Artikel Gesamt: Wenn ein Artikel bereits angelegt ist, erscheint bei „Artikel>Gesamt“ ein eingerückter Artikel mit einem Häkchen (wenn er freigegeben ist). Wenn Sie diesen Artikel in Zukunft bearbeiten wollen, bitte immer den Artikeltitel anklicken und nie mehr auf „neu“!

Wenn der Artikel nicht freigegeben ist, dann erscheint im CMS statt des Häkchens ein rotes Kreuz:

Page 49: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

45

5.5.2. Formatierungsmöglichkeiten für Artikel Die Schriftart, die standardmäßig im CMS verwendet wird ist Verdana, Schriftgröße für den Inhalt 10 pt. Im Textfeld erscheinen einige Editorfunktionen, die es Ihnen ermöglichen den Text zu formatieren. In weiterer Folge werden einige Funktionen erläutert.

Formatiert den Text fett und kursiv erstellt und löst Verknüpfungen

erstellt Anker (wird in Teil 2 besprochen) fügt Bilder ein

richtet Texte und Bilder horizontal aus Farbwahl für den Text

Aufzählung und Nummerierung Absätze einrücken

Formatierung entfernen Einfügen (inkl. Formatierungen)

unformatierten Text einfügen Rückgängigmachen von aktuellen Änderungen

Die zweite Zeile der Formatierungsmöglichkeiten umfasst die Erstellung von Tabellen. Darauf wird im Skriptum „Tipps und Tricks“ eingegangen. 5.5.2.1. Übernahme aus einem Worddokument

Mit den Funktionen "Kopieren" und "Einfügen" können Texte aus Worddokumenten oder anderen Quellen kopiert werden. Damit die Formatierung (Textgröße, Farbe und Position) erhalten bleibt, muss so vorgegangen werden:

Page 50: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

46

- Text markieren - Text kopieren (rechter Mausklick: "Kopieren" aus dem Kontextmenü auswählen)

Abb. 1: Text, dessen Formatierung beibehalten werden soll, einfach markieren und kopieren…

- Im Artikel an die Stelle gehen, an der der Text eingefügt werden soll - Rechte Maustaste drücken, aus dem Kontextmenü "Einfügen" auswählen

WICHTIG: Der Text muss mit einem Klick auf die rechte Maustaste -> Einfügen eingefügt werden und nicht mit STRG+V oder dem "Einfügen" Symbol aus k-tools, sonst bleibt die Formatierung nicht erhalten.

Page 51: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

47

Abb. 2: …und anschließend mit rechtem Mausklick in den Artikel einfügen.

Abb. 3: Der Text wird unter Beibehaltung von Schriftfarbe, -größe und –positionierung in k-tools eingefügt.

WICHTIG: Bilder können so nicht in einen Artikel eingefügt werden. Sie müssen immer zuerst als .jpg- oder .gif-Datei gespeichert und in die Mediendatenbank geladen werden, bevor sie in einen Artikel eingefügt werden können.

5.5.2.1. Link einfügen Durch Links können Sie Verweise auf andere Seiten im Internet eintragen aber auch innerhalb Ihrer Website Informationen verknüpfen.

Page 52: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

48

Externer Link und Maillink: Ein typisches Beispiel ist das Verlinken von Fotoalben zu Veranstaltungen bzw. das Verlinken auf die Website des Trägers. 1) Öffnen Sie den Artikel und 2) markieren Sie den Text oder das Bild, das als Link fungieren soll. 3) Klicken Sie auf das Ketten-Symbol für „Document-Link einfügen“ 4) es öffnet sich ein neues Fenster, in dem Sie bei „externer Link“ die Webadresse der Zielseite eintragen können. 5) Wenn Sie auf eine andere Website verlinken, ist es sinnvoll, dass sich diese in einem neuen Fenster öffnet. Klicken Sie also bei „Link öffnen“ einfach auf „in einem neuen Fenster öffnen“. 6) Abschließend klicken Sie in diesem Fenster auf „Link setzen“ 7) und im Artikel auf „speichern“ und 8) freigeben. Wenn Sie eine Mailadresse verlinken möchten, damit sich beim Anklicken gleich ein Mailprogramm öffnet, schreiben Sie statt der Website-Adresse die Mailadresse in folgender Form: mailto:[email protected]. Interne Links setzen: Sie können natürlich auch interne Links setzen. Dies könnte dann relevant sein, wenn Sie Ihre Besucher auf einer bestimmten Seite auch auf Aktuelles hinweisen wollen. Im folgenden Beispiel soll auf der Seite „Über uns“ ein Link auf den Menüpunkt „Aktuelles“ gesetzt werden. 1) Markieren Sie also den Text, den Sie verlinken wollen, 2) klicken auf das Ketten-Symbol und es öffnet sich das „link setzen“-Fenster. 3) Hier wählen Sie „interner Link“ und klicken anschließend auf „Seite wählen“

Page 53: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

49

Nun öffnet sich ein neues Fenster, in dem Sie den Artikel auswählen, auf den hin Sie verlinken wollen.

Wenn Sie den Artikel per Mausklick ausgewählt haben, erscheint der Titel in der Zeile unter „Artikel“.

Page 54: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

50

Da es sich um einen internen Link handelt, ist es sinnvoll den Link im selben Fenster zu öffnen. Mit „link setzen“ wird der Link nun gesetzt. Speichern Sie den Artikel noch ab und geben Sie ihn frei. 5.5.3. Bilder in Artikel einfügen Wenn Sie ein Bild in einen Artikel einbauen wollen, dann müssen Sie das Foto zuvor in die Mediendatenbank laden. Wenn Sie z.B. bei der Rezension zu „Krieg der Sterne“ noch das Cover des Buches einfügen wollen, gehen Sie folgendermaßen vor (bitte beachten Sie das Urheberrecht!):

1) Öffnen Sie im CMS den Artikel „Neuerscheinungen“ und stellen Sie den Cursor der Maus dorthin, wo das Bild eingefügt werden soll 2) Sie klicken nun auf das Symbol „Bild einfügen“ 3) Es öffnet sich ein Fenster, in dem Sie auf „bearbeiten“ klicken.

Page 55: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

51

4) Mit dem Klick auf „bearbeiten“ werden Sie mit der Mediendatenbank verbunden, es öffnet sich also die Mediendatenbank in einem neuen Fenster:

5) Per Mausklick wählen Sie das Bild, das Sie einfügen wollen. Nun können Sie noch die Position des Bildes auswählen: „normal“ stellt das Bild auf eine Textzeile. Bei den Funktionen „links“ und „rechts“ läuft der Textfluss neben dem Bild weiter. Sobald Sie auf „bild einfügen klicken ist das Bild im Artikel:

Page 56: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

52

Mit „speichern“ und anschließender Freigabe erscheint der Artikel auch im Frontend:

5.8. Zum Abschluss: Die„HOMEPAGE“ (Startseite) Auf Ihrer Website erscheint „HOME“ neben den Banner in der linken Ecke als vorgegebener Menüpunkt. Klicken Sie auf dieses „Home“, erscheint automatisch der erste Menüpunkt an dem auch ein freigegebener Artikel hängt.

Page 57: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

53

Um hier eine Startseite anzeigen zu lassen, müssen Sie einen zusätzlichen Menüpunkt anlegen, den Sie auch Home nennen können. Jedoch sollte Home nicht auch als Punkt im Menü auf der linken Seite aufscheinen. Legen Sie einen Menüpunkt Home an und rücken Sie ihn an die erste Stelle:

Gehen Sie im Menü>Gesamt auf „Home“. Klicken Sie hier nun auf „in Seitennavigation verstecken“, damit der Menüpunkt „Home“ im Frontend nicht erscheint, aber trotzdem vorhanden ist. Sie können nun den Artikel „Home“ genau so befüllen wie alle anderen. „Home“ in der linken oberen Ecke greift so auf den ersten – in der Seitennavigation versteckten – Menüpunkt zu.

Page 58: GIMP und k-tools...Airbrush-Werkzeuge, variable Farbe (Intensität), mit Muster zeichnen, klonen Mit diesen Werkzeugen können Sie eine Kante auf einen Bild weich zeichnen oder schärfen,

54

Nun können Sie das Herzstück Ihrer Website gestalten: Die HOMEPAGE!