Anleitung zur Pflege Ihres Webauftrittes

Transkript

1 Anleitung zur Pflege Ihres Webauftrittes Hinweis: Bitte lassen Sie diese Anleitung niemals für jedermann offen liegen und geben Sie Ihr Passwort nicht an dritte Personen weiter. Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 1

2 Wichtige Informationen Zugangsdaten: Die Pflege Ihrer Webseite erfolgt über einen besonderen Zugang, den Sie unter erreichen. Ihre Zugangsdaten für diesen Bereich lauten: Login: Passwort: admin (Bitte beachten Sie, dass Sie die Zugangsdaten von uns ausschließlich telefonisch oder per Post erhalten. Passwörter werden wir niemals per verschicken. Sollten Sie eine entsprechende erhalten, benachrichtigen Sie uns bitte.) Zugangsdaten zum Kundenbereich Login: Passwort: web Einloggen unter: Ihre FTP-Zugangsdaten: Login Passwort: Sie erreichen die Einloggseite für Web-FTP hier: Alternativ können Sie das Programm SpeedCommander benutzen. Eine kurze Beschreibung finden Sie in der zweiten Anleitung Kleine Helfer für den Alltag, eine kurze bebilderte Anleitung senden wir Ihnen mit. S. 2 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

3 Inhaltsübersicht Grundsätzliches S Begriffserklärungen S Erste Schritte Einloggen ins Backend S Erste Schritte Arbeiten im Frontend S Zweite Schritte und los geht s S Neue Seite erstellen S Text einfügen S Bilder in den Text einbinden S Link erstellen S Tabellen einfügen S Zeileneigenschaften bearbeiten S Zelleigenschaften bearbeiten S Aufbau einer Seite an einem Beispiel S Seiten löschen S Seite (Datensatz) im Backend bearbeiten S Kästen einrichten S. 52 Bitte beachten Sie: Diese Anleitung geht nur auf die ersten Schritte ein und dient dazu, Sie mit der Bearbeitung der Webseite vertraut zu machen. Wir werden diese Anleitung jedoch im Laufe der Zeit erweitern. Dann wird auch auf Details eingegangen werden. Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 3

4 Grundsätzliches Die Betrachtung der Webseite ist prinzipiell mit jedem Browser möglich und soweit ich das beurteilen kann, sieht die Webseite auch mit jedem Browser gleich aus. Für die Bearbeitung empfehle ich jedoch den Browser Mozilla Firefox. Dieser ist wesentlich komfortabler bei der Arbeit mit Bildern. Sie können sich Firefox hier herunterladen: Bitte beachten Sie, dass Sie für die Arbeit an der Webseite Cookies aktivieren müssen. Außerdem müssen Sie JavaScript zulassen, da einige Programm- Bestandteile dieses benötigen. Wenn Sie JavaScript nicht generell zulassen möchten, können Sie in Ihrem Browser Ausnahmen für verschiedene Funktionen einrichten. Dies funktioniert beim Firefox so: Klicken Sie auf den Menüpunkt Extras und dann auf Einstellungen. Es öffnet sich folgendes Fenster: Abb. 1 Einstellungsfenster im Firefox mit erweiterten JavaScript-Einstellungen S. 4 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

5 Gehen Sie in den Bereich Inhalt und klicken Sie dort auf den Button Erweitert hinter JavaScript aktivieren. Es öffnet sich ein weiteres Fenster (siehe Abb. 1, rechts). Hier können Sie JavaScript die verschiedenen Möglichkeiten erlauben oder verbieten. Ein gesetzter Haken erlaubt die Funktion. Für die Arbeit an der Webseite sollten Sie auch den Pop-up-Blocker deaktivieren oder zumindest anpassen. Dies geschieht im gleichen Fenster, indem Sie auch JavaScript aktivieren. Wenn Sie hinter Pop-up-Fenster blockieren auf den Button Ausnahmen klicken, öffnet sich dieses Fenster: Abb. 2 -Einstellungsfenster im Firefox mit Pop-up-Berechtigungsfenster Geben Sie unter Adresse der Webseite die Ihre Internetadresse ein und klicken Sie anschließend auf Erlauben. Sollten Sie noch einen zusätzlichen Pop-up-Blocker wie z.b. NoScript installiert haben, müssen Sie diesen auch anpassen, da die Fenster bei der Bearbeitung der Webseite benötigt werden. Ohne diese Fenster ist eine Bearbeitung absolut unmöglich, es sei denn, sie möchten im Quelltext arbeiten. Bitte richten Sie den Browser so ein, dass sich ein neuer Tab (quasi ein neuer Dateireiter) öffnet, wenn Sie einen Link anklicken. Das erleichtert die Arbeit nachher ungemein. Dafür gehen Sie wie folgt vor: Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 5

6 Klicken Sie in dem Fenster, in dem Sie vorher auch die Einstellungen für JavaScript und Pop-ups vorgenommen haben, nun auf die Rubrik Tabs und aktivieren Sie die Eigenschaft Seite öffnen in neuem Tab. Wenn Sie möchten, können Sie jetzt noch weitere Einstellungen vornehmen. Probieren Sie aus, was Ihnen am besten gefällt. Ein weiterer Vorteil dieser Einstellung ist übrigens, dass Sie nicht zig offene Fenster in der Taskleiste haben. Bitte beachten Sie, dass die allgemeinen Formatierungen von uns vorgegeben sind. Diese können Abb. 3 Details des Moduls TinyMCE Sie nicht ändern. Dies ist wegen des von uns gewünschten, einheitlichen Aussehens auch nicht vorgesehen. Außerdem benötigten Sie dafür weitergehende Programmierkenntnisse in HTML, PHP und CSS. Wie Sie Ihre Texte gestalten, ist jedoch Ihnen überlassen. Wir bitten Sie jedoch zu beachten, dass bestimmte Farben/Textformatierungen im Internet eine festgelegte Bedeutung haben, z.b. Blau = Link Rot = besuchter Link Unterstrichener Text = Link Ganz wichtig: Bitte bedenken Sie immer, dass Textgestaltung im Internet nicht so funktioniert wie Textgestaltung mit Word auf Ihrem lokalen Rechner. Das sind zwei ganz unterschiedliche Dinge, die man nicht durcheinander werfen darf! Deswegen wird ein Text, den Sie für einen Ausdruck auf Papier entworfen haben und der dort richtig klasse aussieht, im Internet unter Umständen ganz furchtbar aussehen. Auch sind Grafiken im Internet nicht so einfach zu platzieren wie mit Word für den Ausdruck auf einem Blatt Papier. Das Internet benötigt zur Ausrichtung von Bildern (und auch Texten) immer Bezugspunkte, z.b. linke obere Ecke oder links mittig horizontal. Es ist nicht möglich, ein Bild zu nehmen und irgendwo zu platzieren, so nach dem Motto: Ich zieh das jetzt mal hier und lass das mitten drin. S. 6 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

7 1. Begriffs-Erklärungen Um die Übersichtlichkeit der Webseite zu erhalten, wird die Webseite in zwei Bereiche geteilt, und zwar in: a) Frontend b) Backend Das Frontend ist der Bereich, in dem Sie als Benutzer die Daten so sehen, wie sie später dargestellt werden. Das bedeutet, Sie ändern sofort in der Webseite selbst. Dafür ist ein Word-ähnliches Modul in die Webseite integriert, um Ihnen die Arbeit zu erleichtern. Sie können hier vorhandene Seiten ändern, aber auch neue Seiten erstellen. Programmierkenntnisse sind nicht erforderlich. Das Backend dient vor allem der Verwaltung von Datensätzen, Bildern und Dokumenten. Je nachdem, welche Rechte Sie von der Geschäftsstelle erhalten haben, haben Sie mehr oder weniger Möglichkeiten im Backend. Dieser Bereich ist für die meisten Benutzer ohnehin weniger interessant, soll der Vollständigkeit halber und zur Erklärung des Begriffes aber dennoch erwähnt werden. Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 7

8 2. Erste Schritte Einloggen ins Backend Um überhaupt Zugriff auf die Webseite zu bekommen, müssen Sie sich ins Backend einloggen. Geben Sie dafür die auf der ersten Seite Internet-adresse an und ergänzen Sie sie um folgendes (ohne Anführungsstriche): /backend (siehe auch Abb. 4) und drücken Sie dann die Enter-Taste. Abb. 4 - Login-Seite Bitte beachten Sie, dass die hier angegebenen Nummern nur ein Beispiel sind und benutzen Sie bitte den Ihnen gegebenen Benutzernamen und das mitgeteilte Passwort. Sollten Sie noch kein Passwort erhalten haben, wenden Sie sich bitte an die Geschäftsstelle. Dort wird Ihnen ein Passwort erstellt und dann telefonisch mitgeteilt. Wir bitten Sie um Verständnis, dass wir Passwörter grundsätzlich nicht per verschicken, sondern nur telefonisch mitteilen oder auf dem Postweg versenden. Dies gilt übrigens nicht nur für Ihre Webseite, sondern auch für die OBE. Wenn Sie sich dann eingeloggt haben, sehen Sie diesen Bildschirm: S. 8 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

9 Abb. 5 - Startbildschirm Backend-Bereich Hier bekommen Sie einen Überblick, was Sie alles hinter den Kulissen machen können. Am oberen Rand des Backends finden Sie acht Reiter (wenn Sie Administrationsrechte haben). Diese haben folgende Bedeutung: Home Frontend Content Kästen Mailpad Bilder Wenn Sie hier klicken, gelangen Sie immer wieder auf die Startseite des Backends zurück. Hier gelangen Sie ins Frontend, wo Sie sich die Änderungen sofort anschauen können. Unter diesem Punkt können können Sie neuen Seiten anlegen. Dies geht jedoch einfacher im Frontend. Für den Content-Bereich sollten Sie über Grundlagen im Bereich der HTML-Programmierung verfügen. Hier können Sie Kästen am rechten Rand der Webseite einrichten (siehe Webseite CV RLP im Bereich Terminkalender ). Ist ein zusätzlicher Service für den Administrator. Damit können schnell aus dem Programm heraus s verschickt werden. Hier können Sie Bilder für die Webseite gleich von Ihrem PC auf den Server laden und diese auch verwalten (z.b. wieder löschen). Der Punkt Bilder ist unterteilt in - images1 - images2 - images3 Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 9

10 Dateien Skripte Hier können Sie wie bei den Bildern ganze Dateien von Ihrem PC auf den Server laden und verwalten. Der Punkt Dateien wird unterteilt in - files (z.b. für Word-Dokumente) - audio (für Lieder) - video (für Filme) Natürlich können Sie in diesem Bereich auch vorhandene Dokumente wieder löschen, genau wie bei den Bildern. Hier liegt die Zugriffsstatistik versteckt, mit der Sie sehen können, wie oft auf die Seite zugegriffen wurde. Hier können Sie aber auch, wenn Sie fit in Web- Programmierung sind, eigene Skripte ablegen. Ansonsten können Sie im Backend noch ein Backup Ihrer Dateien erstellen. Dies dient Ihrer eigenen Sicherheit. Sie können diese Datei auch auf Ihrem PC öffnen, wenn Sie ein Programm wie z.b. XAMPP auf Ihrem PC installiert haben, dass einen Server zu Testzwecken auf Ihrem Rechner simuliert. An dieser Stelle weisen wir Sie darauf hin, dass Sie für Datensicherungen selbst verantwortlich sind. Selbstverständlich werden die Daten auf dem Server regelmäßig gesichert, jedoch ist es mit großem Aufwand verbunden, die Daten zurückzuspielen und nicht immer sind die letzten Änderungen vorhanden. Darum nehmen Sie sich bitte die Zeit, Ihre Daten, die Sie auf den Server speichern, auch lokal auf Ihrem Rechner zu sichern. Um große Datenmengen auf Ihren Server aufzuspielen (z.b. viele Bilder oder auch eine Datensicherung), empfehlen wir Ihnen das Programm SpeedCommander, dass Sie als Testversion kostenlos im Internet erhalten. Eine kurze Anleitung für den SpeedComannder legen wir dieser Anleitung ebenfalls bei. 3. Erste Schritte Arbeiten im Frontend Sie möchten Ihre Webseite mit Leben füllen? Dann klicken Sie im Backend nun bitte auf den Reiter Frontend oder besser noch auf den Link Frontend in einem neuen Fenster öffnen. Bitte beachten Sie, dass sich das Frontend im gleichen Fenster öffnet, wenn Sie die Schaltfläche Frontend nutzen. Es öffnet sich nur dann ein neues Fenster, wenn Sie den Link Frontend in einem neuen Fenster öffnen benutzen. Je nach Einstellung Ihres Browsers öffnet sich übrigens ein Fenster (das das bisherige Bild mit dem Backend überlagert) oder ein neuer Tab (ein Reiter in der Leiste). Auf dieser Seite finden Sie die aktuellste Version des Browsers in deutscher Sprache. Wenn Sie nun das neue Fenster geöffnet haben, sehen Sie dies auf Ihrem Bildschirm: S. 10 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

11 Abb. 6 - Ansicht des Frontends im Firefox mit Tabs und Bearbeitungsszeile Hier können Sie jetzt schon sehen, dass Sie diese Seite bearbeiten können. Sie bekommen eine Zeile angezeigt mit folgenden Begriffen / Auswahlmöglichkeiten: Hallo admin Bearbeiten Neu HTML Bilder Backend Hier bekommen Sie angezeigt, dass Sie eingeloggt sind. Wenn Sie auf diese Schaltfläche klicken, öffnet sich TinyMCE, das Modul, welches für das Bearbeiten und Formatieren der Texte im Front-end sorgt. Hier können Sie eine neue Seite einfügen Wenn Sie hier einen Haken setzen und anschließend auf bearbeiten klicken, können Sie die Seite im HTML-Modus bearbeiten. Achtung: Dafür sollten Sie über fortgeschrittene HTML- Kenntnisse verfügen! Klicken Sie auf diesen Link, gelangen Sie ohne Umwege in die Bildverwaltung. Diese öffnet sich in einem neuen Fenster oder Tab (je nach Einstellung Ihres Browsers) Sie gelangen wieder ins Backend. Dies ist notwendig, wenn Sie beim Wechsel ins Frontend über die Schaltfläche Frontend gegangen sind. Haben Sie den Link Frontend in einem neuen Fenster öffnen benutzt, haben Sie das Backend ohnehin offen. Check Hier können Sie überprüfen, ob die Webseite den Anforderungen des W3C-Konsortiums im Hinblick auf XHTML entspricht Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 11

12 4. Zweite Schritte und los geht s Nachdem Sie ins Frontend gelangt sind, möchten Sie nun sicher loslegen und sich an die eigentliche Gestaltung machen. Klicken Sie bitte auf Bearbeiten und Sie gelangen ins Modul zur Bearbeitung von Texten. Bitte beachten Sie, dass Sie JavaScript in Ihrem Browser aktiviert haben müssen, da TinyMCE sonst nicht funktioniert. Sie können diesem Modul jedoch vertrauen. Abb. 7 - Das Modul TinyMCE Unterhalb der im vorigen Abschnitt beschriebenen Bearbeitungszeile öffnet sich nun das Modul TinyMCE zum Erstellen, Bearbeiten und Formatieren von Seiten und Texten. Der Teil 1 wird benötigt, um neue Seiten zu erstellen, der Teil 2, um Text einzugeben und zu formatieren. Am besten probieren Sie es einfach aus. Wenn Sie mit dem Mauszeiger über die Symbole fahren, wird Ihnen in unter den Icons jeweils die Beschreibung und Funktion angezeigt, ähnlich wie in den Office-Programmen. Wir haben Ihnen die Funktionen hier aber schon einmal aufgelistet: S. 12 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

13 Abb. 8 Details des Moduls TinyMCE 1 Speichern, ohne das Dokument zu schließen 2 Neues Dokument, hier: eine neue Unterseite anlegen 3 Text einfügen (ohne Formatierung) 4 Text mit Formatierungen einfügen (z.b. aus Microsoft Word) 5 Text fett setzen 6 Text kursiv setzen 7 Text unterstreichen (sollte man jedoch im Internet nicht tun Links) 8 Text durchstreichen 9 Text linksbündig ausrichten 10 Text zentriert ausrichten 11 Text rechtsbündig ausrichten 12 Blocksatz (der Text wird sowohl rechts als auch links ausgerichtet) 13 Hier können vorgegebene Formate ausgewählt werden - diese betreffen Farbe, Schriftart, Größe - diese Formate können Sie nicht ändern! 14 Hier können vorgegebene Vorlagen ausgewählt werden - Überschriften, Adressformatierungen - diese Formate können Sie nicht ändern! 15 Erstellt eine Liste, die als Aufzählungszeichen einen Notenschlüssel enthält 16 Erstellt eine durchnummerierte Liste 17 Text ausrücken 18 Text einrücken 19 Rückgängig machen der letzten Änderungen 20 Wiederholt eine rückgängig gemachte Änderung 21 Einen Link einfügen / Link-Attribute eines vorhandenen Linkes ändern 22 Einen vorhandenen Link entfernen 23 Einen Ankerpunkt setzen / Ankerpunkte-Attribute ändern 24 Ein Bild einfügen / Bild-Attribute eines eingefügten Bildes verändern 25 Quellcode aufräumen 26 Info über TinyMCE 27 HTML-Quellcode bearbeiten 28 Vollbildschirm-Ansicht 29 Vorschau 30 Textfarbe ändern 31 Text mit Farbe hinterlegen 32 Tabelle erstellen und einfügen 33 Zeileneigenschaften bearbeiten 34 Zelleigenschaften bearbeiten 35 Zeile oberhalb der aktuellen Zeile einfügen 36 Zeile unterhalb der aktuellen Zeile einfügen 37 Aktuelle Zeile entfernen 38 Spalte links von der aktuellen Spalte einfügen 39 Spalte rechts von der aktuellen Spalte einfügen 40 Aktuelle Spalte entfernen 41 Vereinte Zellen trennen 42 Mehrere Zellen vereinen, um eine große Zelle zu erhalten Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 13

14 43 Horizontale Trennlinie einfügen 44 Formatierungen zurücksetzen 45 Hilfslinien und unsichtbare Elemente ein- bzw. ausblenden 46 Text tiefstellen 47 Text hochstellen 48 Sonderzeichen einfügen (Achtung, kann nicht jeder Browser interpretieren) 49 Aktuelles Datum einfügen 50 Aktuelle Uhrzeit einfügen 4.1 Neue Seite erstellen Sie möchten eine neue Seite erstellen? Klicken Sie bitte auf die Schaltfläche Neu in der Bearbeitungszeile. Es öffnet sich ein Fenster, in dem Sie verschiedene Angaben machen müssen. Bitte gehen Sie dabei in folgender Reihenfolge vor: 1. Geben Sie den Seitentitel an: hier steht, was ganz oben im Browser blau hinterlegt steht (leider oftmals nur Index oder so etwas) 2. Die Ebene 1: diese gibt an, an welcher Stelle im Menü diese Seite aufgelistet wird 3. Die Ebene 2 und die Kastenzahl ist nicht zwingend notwendig. 4. Der Menüname: damit legen Sie fest, unter welchem Namen die Seite im Menü aufgelistet wird. 5. Den URL-Anhang legen Sie bitte erst am Ende fest, denn nach einer Eingabe in dieses Feld wird eine Speicherung erzwungen, sprich: TinyMCE speichert dann automatisch zwischen. Um Ihnen den Arbeitsschritt des Wieder-Aufrufens und Verändern der Daten zu ersparen, gehen Sie bitte in dieser Reihenfolge vor. Bitte beachten Sie: Schreiben Sie den URL-Anhang bitte immer klein und nehmen Sie schlüssige Namen. Eine doppelte Vergabe von URL-Anhängen ist nicht möglich. Sie bekommen dann eine Fehlermeldung. Sollten Sie doch einmal erst den URL-Anhang ausfüllen, wird ein Menüpunkt MeinMenüpunkt angelegt, den Sie anschließend ändern müssen. Dafür klicken Sie in der Navigationsleiste den Eintrag MeinMenüpunkt an und ändern ihn mit dem TinyMCE (Teil 1 siehe Abb. 7) gemäß der Beschreibung auf der vorherigen Seite. Hinweis: Manchmal lässt sich der URL-Anhang im TinyMCE nicht ändern. Wechseln Sie dann bitte ins Backend und dort in den Bereich Content. Wählen Sie die Seite, deren URL-Anhang Sie ändern möchte aus, klicken Sie auf Editieren und überschreiben Sie den falschen URL-Anhang. Anschließend klicken Sie bitte auf OK. Übrigens können Sie hier auch eine neue erstellen. Die Vorgehensweise ist dort ähnlich. Abb. 9 - MeinMenüpunkt S. 14 Anleitung Webseiten-Bearbeitung Version 1.2 / GS Abb. 5

15 4.2 Text einfügen Dieses Modul ist an die gängigen Textverarbeitungsprogramme angepasst, sodass Sie damit gut klar kommen sollten. Sie benötigen also keine Programmierkenntnisse. Probieren Sie einfach aus... Wenn Sie eine Überschrift mit einer Note im Kreis haben möchten, wählen Sie bitte im Teil 2 von TinyMCE (siehe Abb. 7) im Feld, wo Absatz oder Überschrift steht, mit dem Auswahlmenü die Formatierung Überschrift 2. Für den allgemeinen Text in den Webseiten wählen Sie bitte die Formatierung Absatz. 4.3 Bilder in den Text einbinden Um Bilder in den Text einzubinden, haben Sie zwei Möglichkeiten: Die erste Möglichkeit ist es, das Icon zu benutzen, das von TinyMCE dafür vorgesehen ist. Es öffnet sich dann ein Fenster (siehe Abb. 10), in das Sie ganz genau die Adresse eingeben müssen, unter der das Bild gespeichert ist. Tippfehler rächen sich hier sofort das Bild wird nicht gefunden! Die Schreibweise für den Pfad ist vom Aufbau her Abb Bild einfügen durch Eingabe immer gleich, es variieren die Speicherorte und der Dokumenten-Name. Der Aufbau des Pfades sieht immer wie folgt aus: speicherort/dateiname.doc (Beispiel: images1/logo_chorverband-farbig.jpg) So werden übrigens auch Dokumente, die zum Öffnen zur Verfügung gestellt werden sollen, eingebunden. Meistens dann als Link (siehe Punkt 4.4) Es gibt jedoch noch eine einfachere, schnellere Möglichkeit, Bilder einzubinden. Diese funktioniert jedoch bisher leider nur mit dem Firefox. Klicken Sie in der Bearbeitungszeile auf Bilder. Es öffnet sich die Bilderverwaltung in einem neuen Tab. Klicken Sie nun das Bild, das Sie einbinden möchten, mit der linken Maustaste an, halten Sie die Maustaste gedrückt, und ziehen Sie das Bild in den anderen Tab an die Stelle, wo Sie das Bild eingefügt haben möchten. Lassen Sie nun die Maustaste los. Voilà, das Bild ist genau an der Stelle, an der Sie es haben wollten. Ohne Eingabe von irgendwelchen Pfaden, ohne mögliche Fehlerquellen. Ganz einfach, oder? Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 15

16 Klicken Sie nun auf Speichern, wenn Sie weiterhin an der Seite arbeiten möchten. TinyMCE bleibt geöffnet, speichert die aktuellen Änderung ab. Dies bekommen Sie unterhalb des TinyMCE angezeigt. So wie dort dargestellt, wird die Seite anschließend aussehen. Klicken Sie wieder in TinyMCE und Sie können einfach weiterarbeiten. Bitte denken Sie daran, regelmäßig zu speichern, denn nichts ist schlimmer, als wenn man alles neu machen muss, was man gerade so schön erstellt hatte. Deshalb: wenn Sie meinen, etwas ist Ihnen gut gelungen, drücken Sie die Speichern -Schaltfläche. Sind Sie mit der Bearbeitung der Seite fertig, klicken Sie bitte auf Speichern und Schließen. TinyMCE wird dann geschlossen und Sie können sich einer anderen Seite widmen. Gehen Sie dazu wie folgt vor: Abb Bild einfügen durch Ziehen in den Bereich Klicken Sie einfach auf den Eintrag im Navigationsmenü, den Sie ändern möchten. Dieser öffnet sich, solange Sie im Backend eingeloggt sind, automatisch mit dem Bearbeitungs-Modul TinyMCE. Hinweis zu Bildern: Allgemein gilt, dass Bilder im Internet nicht zu groß sein sollten, da eine lange Ladezeit den Besucher eher abschreckt. Insofern sollten Sie darauf achten, dass Bilder eine Größe von 70KB nicht überschreiten. Außerdem hat das Backend eine Beschränkung auf eine maximale Bildbreite von 700 Pixeln, das heißt, breitere Bilder können über das Backend nicht hochgeladen werden. Da Ihre Webseite im Content aber ohnehin maximal 750 Pixel breit ist, würden Bilder, die breiter als 750 Pixel sind, über die Webseite hinausragen, bzw. gar nicht angezeigt werden. Bilder, die direkt aus der Digitalkamera kommen, haben oftmals eine Breite von 3200 und mehr Pixeln und eine Größe von 3 und mehr MegaByte. Diese Bilder sind so für das Internet unmöglich verarbeitbar. Bitte bearbeiten Sie die Bilder daher, bevor Sie sie auf die Webseite hochladen. Geeignete Programme für die Bildbearbeitung: GIMP (kostenlos im Internet herunterzuladen) IrfanView (kostenlos im Internet herunterzuladen) AdobePhotoshop (z.b. Version 7 gibt es inzwischen schon ab 80, ein sehr gutes und umfangreiches Programm!) PhotoImpact (gibt s immer mal wieder bei ALDI für 12 oder 15 ) 4.4 Links erstellen Sie möchten auf eine andere Seite verweisen, eine -Adresse einfügen, oder ein Dokument zum Öffnen/Download zur Verfügung stellen? Dann müssen Sie einen Link erstellen. Dies geht so ähnlich wie bei den Bilder beschrieben. S. 16 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

17 Zunächst einmal müssen Sie den Text, der zu einem Link werden soll, markieren, sodass er hinterlegt ist. Dann klicken Sie auf das Zeichen mit den beiden Kettengliedern. Es öffnet sich ein Fenster Link einfügen / bearbeiten. Nun haben Sie wieder zwei Möglichkeiten: 1.Sie machen es so, wie bei den Bildern beschrieben und geben den ganzen Pfad ein: Files/dokument.doc Dann müssen Sie auch wieder ganz genau schauen, dass Sie alles richtig schreiben, denn sonst läuft der Link ins Leere. 2. Sie ziehen das Dokument in dieses Fenster. Dabei müssen Sie jedoch beachten, dass der Name des Dokumentes keine Um-laute (ä, ö, ü) und kein ß enthält. Das mag das Programm gar nicht und wandelt diese um. Dann stimmt jedoch der Name nicht mehr überein und der Link läuft ins Leere. Für die zweite Möglichkeit gehen Sie wie folgt vor: Gehen Sie ins Backend und klicken Sie auf die Schaltfläche Dateien. Wählen Sie den Ordner, in dem Ihre Datei liegt. Klicken Sie die Datei mit der linken Maustaste an und halten Sie diese weiterhin gedrückt (siehe Abb. 12). Bitte beachten Sie, dass dieses kleine Fenster beim Wechsel in den Backend-Bereich in die Taskleiste verschwindet (siehe Abb. 13). Ziehen Sie nun die angeklickte Datei (bzw. den Datei-Namen) mit gedrückt gehaltener Maustaste über das minimierte Fenster Link einfügen/ bearbeiten in der Taskleiste. Das Fenster geht automatisch wie-der auf, sobald Sie mit dem Mauszeiger auf den entsprechenden Eintrag in der Taskleiste zeigen (siehe Abb. 14). Ziehen Sie dann die Datei in das Feld Adresse (siehe Abb. 15). Legen Sie fest, ob Sie möchten, dass sich die verlinkte Datei / die verlinkte Webseite im gleichen Fenster öffnet, in dem der Link sich befindet oder ob sich der Link in einem neuen Fenster öffnen soll. Wenn Sie auf eine Webseite verlinken, geben Sie die Adresse bitte so an: Wenn Sie eine Mailadresse eingeben möchten, tragen Sie diese bitte so ein: mailto: adresse@webseite.de. Abb Link erstellen Abb Fenster Link einfügen minimiert in der Taskleiste Geben Sie noch eine Beschreibung für den Link ein (z.b. hier geht es weiter zur Webseite von... oder an Herrn Mustermann schicken). Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 17

18 Abb. 15 Pfad der Datei im Adressfeld des Fensters Link einfügen Abb. 14 Link erstellen Diese Beschreibung wird dem Betrachter angezeigt, wenn er mit der Maus über den Link fährt. So weiß er, wohin der Link führt, denn nicht alle Links werden immer aussagefähig bezeichnet. Außerdem führen diese Beschreibungen angeblich (laut Google) zu einem besseren Ranking in den Suchmaschinen. 4.5 Tabellen einfügen Manche Daten lassen sich im Internet am einfachsten in Tabellen darstellen, z.b. Mitgliederverzeichnisse. Erstellt sind die Tabellen relativ schnell, jedoch lässt sich der Inhalt der Tabellenspalten leider nur ziemlich umständlich anpassen. Dafür sind dann schon ein paar Eingriffe ins TinyMCE nötig. Fangen wir am Anfang an: Klicken Sie auf das Symbol für das Einfügen von Tabellen. Es öffnet sich ein Fenster mit zwei Reitern: Allgemein und Erweitert. Standardmäßig bekommen Sie beim Öffnen dieses Fensters immer die Daten des Reiters Allgemein angezeigt. Hier können Sie die Anzahl der Spalten und Zeilen eingeben, außerdem die Breite der Tabelle festlegen (und das sollten Sie unbedingt tun, damit die Tabelle nicht über den Rand hinausläuft) und bestimmen, ob der Inhalt linksbündig, mittig oder rechtsbündig ausgerichtet werden soll. Bitte legen Sie die Tabelle mit einer Breite von max. 700 fest, da sie sonst zu breit werden (siehe Abb. 16). S. 18 Abb Link erstellen Anleitung Webseiten-Bearbeitung Version 1.2 / GS

19 Abb. 16 Tabelle einfügen Außerdem können Sie auch die Höhe bestimmen, wenn Sie nur eine bestimmte Platzhöhe zur Verfügung haben. Dies ist jedoch meistens nicht der Fall. Die Anzahl der Spalten und Zeilen verteilt sich automatisch auf die von Ihnen vorgegebene Höhe und Breite (z.b. Breite Tabelle=700px und 5 Spalten jede Spalte ist automatisch 140px breit) (siehe Abb. 17). Abb. 17 Eingefügte Tabelle mit gleichmäßig großen Spalten Das Problem dabei ist jedoch, dass diese Breite der Spalten (und die Höhe der Zeilen) nicht fixiert ist, also nicht automatisch spezifisch für jede Spalte festgelegt ist (siehe Abb. 18.). Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 19

20 Abb. 18- Eingefügte Tabelle mit durch Schrift unterschiedlich großen Spalten Deshalb ist es unbedingt notwendig, dass Sie die Breite der Spalten exakt festlegen, denn sonst verrutscht Ihnen die Tabelle immer wieder und Sie bekommen kein gleichmäßiges Aussehen. Wie Sie bei der Erklärung des Moduls TinyMCE gesehen haben, gibt es zwei Schaltflächen, mit denen man Zeilen oder einzelne Zellen bearbeiten kann (siehe Punkt 4, Erläuterung der Schaltflächen hier Nr. 33 und 34 / Seite 12) Zeileneigenschaften bearbeiten Klicken Sie auf die Schaltfläche Zeileneigenschaften bearbeiten. Es öffnet sich ein Fenster mit den schon bekannten zwei Reitern Allgemein und Erweitert. Unter Allgemein haben Sie folgende Möglichkeiten: 1. Row in table part (ist sinngemäß die Stellung der Zeile in der Tabelle): Tabellenüberschrift / (normaler) Tabelleninhalt / Tabellenfuß 2. Ausrichtung: Mittig / Links / Rechts 3. Vertikale Ausrichtung: Oben / Mittig / Unten 4. Klasse: hier können Sie eine der von uns vorgegebenen Klassen wählen 5. Höhe: hier können Sie die Höhe der Zeile angeben (siehe Abb. 19) Abb. 19- Allgemeine Einstellungsmöglichkeiten einer Tabellenzeile S. 20 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

21 Unten haben Sie die Möglichkeit zu bestimmen, ob Sie diese Zeile verändern / Ungerade Zeilen verändern / Gerade Zeilen verändern oder Alle Zeilen verändern möchten. Im Bereich Erweitert können Sie Folgende Veränderungen vornehmen: Abb. 20- Erweiterte Einstellungsmöglichkeiten einer Tabellenzeile 1. ID: Sie können der Tabelle eine eindeutige Identität geben 2. Format: hier können Sie von Hand Formate wie Rahmen (border) eingeben 3. Schriftrichtung: hier können Sie festlegen, ob die Schrift von links nach rechts oder von rechts nach links geschrieben werden soll 4. Sprachcode: hier können Sie den Sprachcode der Tabelle festlegen (Deutsch: de, Englisch: en) 5. Hintergrundbild: hier können Sie ein Hintergrundbild für die Tabelle auswählen 6. Hintergrundfarbe: wenn Sie auf den kleinen Rahmen mit dem Pfeil klicken, öffnet sich ein Fenster, in dem Sie die Hintergrundfarbe auswählen können. Zugegeben, die Punkte 1 4 sind für Sie wahrscheinlich uninteressant, sollen jedoch der Vollständigkeit halber erwähnt werden. Auch hier haben Sie unten wieder die Möglichkeit zu bestimmen, ob Sie diese Zeile verändern / Ungerade Zeilen verändern / Gerade Zeilen verändern oder Alle Zeilen verändern möchten Zelleigenschaften bearbeiten Klicken Sie auf den Butten für Zelleigenschaften bearbeiten. Es öffnet sich wieder ein Ihnen schon bekanntes Fenster mit den zwei Auswahlmöglichkeiten Allgemein und Erweitert. Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 21

22 Im Bereich Allgemein können Sie folgende Einstellungen vornehmen: Abb. 21- Allgemeine Einstellungsmöglichkeiten einer Tabellezelle 1. Ausrichtung: Mittig / Links / Rechts 2. Textzelle oder Überschrift auswählen 3. Vertikale Ausrichtung: Oben / Mittig / Unten 4. Zusammenhang: diese Funktion stellt einen Zusammenhang zu anderen Zellen her (in Bezug auf die Eigenschaften) 5. Breite: hier können Sie die Höhe der Zeile angeben 6. Höhe: hier können Sie die Höhe der Zeile angeben Unten haben Sie die Möglichkeit zu sagen, ob Sie Ihre Änderungen nur auf diese Zelle, auf alle Zellen in der gleichen Zeile oder auf die alle Zellen in der ganzen Tabelle auswirken sollen. Der Bereich Erweitert sieht im Prinzip fast genauso aus wie bei den Zeileneigenschaften, nur dass Sie hier die Möglichkeit haben, statt einem Hintergrundbild eine Rahmenfarbe festzulegen (siehe Abb. 22). Diese Änderungen wirken sich dann auf den Bereich Format aus, wie Sie sehen können. S. 22 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

23 Abb. 22- Erweiterte Einstellungsmöglichkeiten einer Tabellezelle Natürlich können Sie die Vorgaben im Bereich Format auch von Hand eingeben, dies geht umso leichter, je mehr HTML/CSS-Kenntnisse Sie haben. Ein paar allgemeine Angaben finden Sie hier: Hintergrundfarbe festlegen: background-color: #36e519; Geschlossenen Rahmen (1px breit) um die Zelle setzen: border: 1px solid; Kein Rahmen um eine bestimmte Zelle, wenn andere Zellen aber einen Rahmen haben sollen: border: 0px; Geschlossenen, farbigen Rahmen (5px breit) um eine Zelle setzen: border: 5px solid #705fa0; Gepunkteter Rahmen um eine Zelle setzen: border: 5px dotted #705fa0; Ganz wichtig: Wenn Sie tatsächlich etwas von Hand eingeben, beenden Sie die Eingabe immer mit einem Semikolon, sonst wird die Formatierung nicht anerkannt. Zwischen zwei Formatierungen lassen Sie bitte ein Leerzeichen. Alle Änderungen, die Sie machen, können Sie im Bereich Format anschauen. Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 23

24 Und natürlich gibt es auch für die ganze Tabelle einen Reiter Erweitert. Den haben wir bis zum Schluss aufgehoben, da wir gerne erst einmal anhand der erstellten Tabelle durcharbeiten wollten, was möglich ist. Abb. 22- Erweiterte Einstellungsmöglichkeiten einer Tabellezelle Im Prinzip finden Sie auf diesem Reiter die gleichen Angaben wie auf den Reitern für Zeile und Zelle. Es gibt hier jedoch zwei Besonderheiten: die Auswahlmöglichkeiten Gitter und Rules. Mit diesen beiden Auswahlmöglichkeiten können Sie die Linien in der Tabelle steuern. Diese beiden funktionieren aber nur im Wechsel miteinander Dabei gibt es bei Gitter folgende Auswahlmöglichkeiten: Abb. 23- Erweiterte Einstellungsmöglichkeiten für die gesamte Tabelle - Gitter S. 24 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

25 Und bei Rules gibt es diese Auswahlmöglichkeiten: Abb. 24- Erweiterte Einstellungsmöglichkeiten für die gesamte Tabelle Rules Diese beiden Auswahlmöglichkeiten beziehen sich jeweils aufeinander. Die Gitter geben an, wo die Linien sind (ohne, oben, unten, links, rechts) und die Rules (Regeln) bestimmen, ob diese Gitter auf Gruppen, Zeilen, Spalten oder Alle angewandt werden. Wenn Sie Gitterlinien möchten, verwenden Sie am besten diese Einstellung: Gitter = Border und Rules = Alle 5. Aufbau einer Seite an einem Beispiel Hier möchten wir Ihnen an einem Beispiel zeigen, wie Sie eine Seite Schritt für Schritt aufbauen können. Dabei werden die meisten der im ersten Teil vorgestellten Elemente genutzt (hier am Beispiel der KCV Altenkirchen) Mit dieser Schritt-für-Schritt-Anleitung können Sie Ihre Seiten leicht selbst erstellen. Also fangen wir an: Sie haben sich, wie zu Beginn dieser Anleitung beschrieben, in Ihre Seite eingeloggt und befinden sich nun im Frontend. Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 25

26 Abb. 25 Startseite des Kreises Altenkirchen in der Frontend-Ansicht Klicken Sie nun bitte auf das Feld Neu und es öffnet sich ein neues Fenster mit Ihrer zukünftigen Seite. Hier können Sie nun die gewünschten Datei- Eigenschaften ändern (siehe Abb. 26): Abb. 26 Bearbeitung der Datei-Eigenschaften Bitte gehen Sie bei der Bearbeitung der Datei-Eigenschaften in der angegebenen Reihenfolge vor. S. 26 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

27 1. Geben Sie hier den gewünschten Seitentitel an. Dass ist die Bezeichnung der Seite, die oben im Browser im blau hinterlegten Feld stehen wird. 2. Geben Sie nun die Ebene an. Die Ebene zeigt an, an welcher Stelle im Navigationsmenü Ihre neue Seite eingetragen wird. Dabei ist 1 die erste Position. 3. Geben Sie bei MenueName einen aussagekräftigen Namen für das Dokument ein, aus dem man schnell erkennen kann, welche Inhalte die Seite enthalten wird. 4. Ändern Sie erst jetzt den URLAnhang und geben Sie hier einen kurzen, prägnanten Namen für Ihre neue Seite an. Standardmäßig steht hier ein Name mit vielen Zahlen, den Sie problemlos überschreiben können und sollten. 5. Klicken Sie nun zum Speichern der Seite auf den Speichern -Button. Ihre neue Seite wurde angelegt und kann nun bearbeitet werden. Sie finden Sie unter dem von Ihnen vergebenen Namen in der Navigation (siehe Abb. 27) Hier sehen Sie nun Ihre neu erstellte Seite in der Navigation. Es hat nun den von Ihnen vergebenen Namen (siehe auch Abb. 26) Neues Dokument, ist auf der Ebene 2 (also an zweiter Stelle in der Hierarchie) und wenn Sie mit der Maus über den Menü-Eintrag fahren, bekommen Sie angezeigt, wie der Seitentitel der Seite lautet, der im Browser immer ganz oben angezeigt wird (hier: Das wird ein neues Dokument ) Nun müssen Sie das Dokument mit Leben füllen und damit machen wir nun weiter. Abb. 27 Die neue Seite wird nun in der Navigation gezeigt. Klicken Sie auf Ihr neues Dokument und es öffnet sich in dem Editor TinyMCE. Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 27

28 Abb. 28 Die neue Seite kann bearbeitet werden. Klicken Sie nun auf Bearbeiten und es kann losgehen (siehe Abb. 29). Abb. 29 Die neue Seite in der Bearbeitungsansicht. Sollten Sie der Meinung sein, dass der Menü-Name (Navigation) oder der Seitentitel doch nicht so treffend ist, können Sie diesen nun im oberen Bereich S. 28 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

29 des Editors ändern. Die Ansicht dieses Bereiches ist dieselbe wie bei der Neuerstellung eines Dokumentes. Bitte beachten Sie, dass Sie den URL-Anhang hier nicht ändern können! Entfernen Sie den Text Content notieren und dann bauen wir eine Seite für den Kreis-Vorstand. Geben Sie den Text Der Kreisvorstand ein. Um aus diesem Text nun eine Überschrift zu machen, markieren Sie den Text bitte mit der Maus und klicken Sie anschließend in den Symbolleisten des Editors auf den Pfeil hinter dem Wort Absatz. Es öffnet sich ein Pull-Down-Menü mit Auswahlmöglichkeiten (siehe Abb. 30). Abb. 30 Pull-Down-Menü mit Auswahlmöglichkeiten für Überschriften und Absätze Abb. 30 Editor TinyMCE mit ausgeklapptem Pull-Down-Menü zur Auswahl von Schriftarten Klicken Sie bitte auf den Eintrag Überschrift2 und Ihr Text wird zur Überschrift mit einer Note davor. Diese Note ist der Überschrift 2 zugeordnet und kann nicht Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 29

30 entfernt werden. Hinweis: In der Voransicht wird die Note als kleines, rotes Quadrat dargestellt. Manche Daten lassen sich im Internet am besten in Tabellenform präsentieren, wie z.b. die Daten eines Vorstandes. Daher legen wir nun erst einmal eine Tabelle an (siehe Abb. 31). Abb. 31 Einfügen einer Tabelle für die Vorstands-Daten Klicken Sie auf das Symbol für das Einfügen von Tabellen. Es öffnet sich ein Fenster. Hier können Sie die Anzahl der Spalten und Zeilen eingeben, außerdem die Breite der Tabelle festlegen (und das sollten Sie unbedingt tun, damit die Tabelle nicht über den Rand hinausläuft) und bestimmen, ob der Inhalt linksbündig, mittig oder rechtsbündig ausgerichtet werden soll. Bitte legen Sie die Tabelle mit einer Breite von max. 700 fest, da sie sonst zu breit werden. Und schon ist Ihre Tabelle fertig! (siehe Abb. 32) S. 30 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

31 Abb. 32 Eingefügte Tabelle mit drei Spalten Klicken Sie nun auf die erste Zelle in der ersten Zeile, damit der Cursor sich in diesem Feld befindet. Klicken Sie anschließend in der Symbolleiste auf das Icon für Eigenschaften der Zeile (siehe die Erläuterungen zu den Symbolleisten auf Seite 14 hier Nr. 33) und es öffnet sich ein Fenster, in dem Sie die Eigenschaften der Zeile bearbeiten können (siehe Abb. 33) Abb. 33 Bearbeitungsmöglichkeiten der Tabellenzeilen 32 Eingefügte Tabelle mit drei Spalten Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 31

32 Mit diesem Icon können Sie die Eigenschaften für alle Zeilen in der Tabelle gemeinsam oder auch für jede Zeile extra festlegen. Bitte klicken Sie in diesem Fall auf Tabellenkopf, da dies so etwas ist wie die Hauptzeile einer Tabelle. Standardmäßig ist hier übrigens Tabelleninhalt hinterlegt, was ja nicht verkehrt ist. Durch Tabellenkopf erhält die Zeile beim Auslesen durch den Browser jedoch besondere Aufmerksamkeit. Ändern Sie nun noch die Farbe für diese Zeile, damit man sie auch optisch als den Tabellenkopf erkennt. Klicken Sie dafür auf den Reiter Erweitert und dort auf das kleine Feld hinter der Angabe für die Hintergrundfarbe. Wenn Sie mit der Maus über das Feld fahren, bekommen Sie das Wort Durchsuchen angezeigt (siehe Abb. 24) Abb. 34 Ein Klick auf dieses Feld öffnet die Farbauswahl-Palette 32 Eingefügte Tabelle mit drei Spalten Klicken Sie auf dieses Feld und es öffnet sich die Farbauswahl-Palette (siehe Abb. 35) Abb. 35 Farbauswahl-Palette für die Hintergrundfarbe der Zeile 32 Eingefügte Tabelle mit drei Spalten Suchen Sie sich hier die gewünschte Farbe aus und klicken Sie darauf. Die Farbe wird automatisch in das Feld übernommen und mit dem korrekten Hexadezimalcode eingetragen. S. 32 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

33 Sichern Sie nun Ihre Einstellung durch Klicken auf den Button Aktualisieren, nachdem Sie sich überzeugt haben, dass in dem Feld über dem Button steht Diese Zeile verändern. Es wäre nicht wirklich sinnvoll, diese Änderung auf alle anderen Zeilen auszuweiten. Die Einstellungen für die anderen Zeilen können Sie so lassen, wie sie sind, also auf Tabelleninhalt mit der Hintergrundfarbe weiß. Und so sieht Ihr Zwischenergebnis aus (siehe Abb. 36): Abb. 36 Tabelle mit geändertem Tabellenkopf 32 Eingefügte Tabelle mit drei Spalten Wenn Sie auf Nummer Sicher gehen möchten, klicken Sie jetzt einmal auf den Button Speichern. Bitte nehmen Sie nicht den Button Speichern und Schließen, denn sonst müssen Sie das Dokument zum Weiterarbeiten erst wieder öffnen. Setzen Sie nun die Tabellenüberschriften ein. Klicken Sie dazu bitte wieder in die erste Zelle in der ersten Reihe und geben Sie dort das Wort Name ein. Wie Sie sehen werden, verändert sich beim Schreiben die Breite der Spalte automatisch. Dies müssen Sie nun ändern. Klicken Sie dafür auf das Icon für Eigenschaften der Zelle (siehe die Erläuterungen zu den Symbolleisten auf Seite 14 hier Nr. 34). Es öffnet sich wieder ein Fenster mit Einstellungsmöglichkeiten (siehe Abb. 37) Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 33

34 Abb. 36 Tabelle mit geändertem Tabellenkopf 32 Eingefügte Tabelle mit drei Spalten Hier können Sie die horizontale und vertikale Ausrichtung Ihres Inhaltes festlegen sowie die Breite der Spalten. Außerdem können Sie wählen, ob Sie nur diese eine Zelle verändern, alle Zellen in dieser Zeile oder alle Zellen in der Tabelle ändern möchten. Wenn Sie alle Einstellungen wunschgemäß vorgenommen haben, klicken Sie zum Sichern der Einstellungen bitte auf Aktualisieren. Geben Sie nun in der zweiten Zelle der Zeile das Wort Adresse und in der dritten Zellen das Wort Funktion ein. Je nachdem, ob Sie die Einstellung Diese Zelle verändern oder Alle Zellen in dieser Zeile verändern gewählt haben, müssen Sie die oben erklärten Einstellungen ggf. noch einmal vornehmen. Und damit ist die Struktur der Tabelle fertig (siehe Abb. 37) und Sie können mit der Eingabe der Daten beginnen. Übrigens können Sie mit den Pfeiltasten Ihrer Tastatur zwischen den Zellen hin- und her-springen. Das ist schneller, als wenn Sie jedes Mal mit der Maus in eine neue Zelle klicken müssen. S. 34 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

35 Abb. 37 Die Struktur der Tabelle ist fertig! 32 Eingefügte Tabelle mit drei Spalten Um Text in einem Dokument zu gestalten, stehen Ihnen verschiedene Formate zur Verfügung, die Sie in der Übersicht in Abb. 38 sehen können. Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 35

36 Abb. 38 Verschiedene Formatierungsmöglichkeiten zur Textgestaltung 32 Eingefügte Tabelle mit drei Spalten S. 36 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

37 5.1 Bilder einfügen Webseiten leben von Ihrem Inhalt und dazu gehören auch Bilder. Um Bilder in Ihre Seite zu bekommen, haben Sie zwei Möglichkeiten. Zum einen können Sie jedes Bild mühsam mit dem Pfad angeben, wo es gespeichert ist. Das birgt jedoch oftmals Fehlerquellen. In Teil A, den allgemeinen Beschreibungen, ist jedoch auch diese Art des Bilder Einfügens erklärt (siehe Punkt 4.3 Bilder einfügen, Seite 15 ff.) Wir möchten es Ihnen jedoch so einfach machen wie möglich. Eine wichtige Voraussetzung dafür ist, dass neue Fenster in Tabs geöffnet werden. Bitte schauen Sie sich auf S. 6 an, wie diese Einstellungen vorzunehmen sind und dann kann s schon losgehen: Öffnen Sie Ihr Dokument, in dem Sie Ihre Bilder zeigen möchten mit dem Editor TinyMCE, sodass Sie darin arbeiten können. Abb. 39 Bilder leicht und schnell in ein Dokument einbauen 32 Eingefügte Tabelle mit drei Spalten Klicken Sie nun auf den Link Bilder im oberen Teil des Editors (siehe Abb. 39, roter Pfeil). Es öffnet sich nun ein neuer Tab (siehe Abb. 40) mit der Bildverwaltung. Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 37

38 Abb. 40 Bilderverwaltung in der Übersicht schnell und komfortabel 32 Eingefügte Tabelle mit drei Spalten Hier können Sie sehen, welche Bilder von Ihnen auf dem Server liegen und wie groß die Bilder sind. Hier können Sie jedoch auch direkt Bilder von Ihrem PC auf den Server hochladen. Und das geht so: Abb. 41 Bilder hochlanden 32 Eingefügte Tabelle mit drei Spalten S. 38 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

39 Klicken Sie bitte auf Durchsuchen (siehe Abb. 41, roter Pfeil). Es öffnet sich ein Fenster, mit dem Sie auf Ihrem PC nach den Bildern suchen können. Klicken Sie das gewünschte Bild an und anschließend auf Öffnen. Das Fenster schließt sich wieder. Klicken Sie anschließend auf Datei hochladen und haben Sie dann bitte ein bisschen Geduld. Abb. 42 Bilder hochlanden Eingefügte Tabelle mit drei Spalten Je nachdem, wie groß das Bild ist und wie schnell Ihr PC und Ihre Internetverbindung sind, kann der Upload ein bisschen dauern. Dass der Upload läuft, können Sie daran erkennen, dass sich im Tab mit der Bildverwaltung ein Kreis dreht und in der Statuszeile des Browsers steht: Senden der Anfrage an (siehe Abb. 43, rote Pfeile) 32 Eingefügte Tabelle mit drei Spalten Abb. 43 Bilder hochlanden - 3 Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 39

40 Wenn der Upload erfolgreich beendet oder aus irgendwelchen Gründen abgebrochen wurde, bekommen Sie eine entsprechende Meldung von dem Programm (siehe Abb. 44): Abb. 44 Statusmeldung für den Bild-Upload hier erfolgte ein erfolgreicher Upload. 32 Eingefügte Tabelle mit drei Spalten Das Bild steht Ihnen nun zur Verfügung. Klicken Sie einmal auf den Ordner, in den Sie die Bilder hochgeladen haben (hier: images1) und Sie bekommen alle Bilder, die in diesem Ordner liegen, angezeigt Es war übrigens dieses Bild, das wir hochgeladen haben (siehe auch Dateiname in der Statusmeldung bei Abb. 44): 32 Eingefügte Tabelle mit drei Spalten Abb. 45 Das hochgeladene Bild steht nun zur Verfügung! S. 40 Anleitung Webseiten-Bearbeitung Version 1.2 / GS

41 So, das Bilder-hochladen funktioniert. Doch wie kriegen Sie jetzt die Bilder so einfach, wie wir Ihnen das versprochen haben, in Ihr Dokument? Keine Sorge, es geht wirklich ganz einfach! Und zwar so: Klicken Sie in Ihrem Dokument an die Stelle, an der Sie das Bild eingefügt haben möchten und wechseln Sie anschließend in den Tab mit der Bildverwaltung. Schatten des dorthin gezogenen Bildes Abb. 46 Ziehen Sie das Bild in ihre gewünschte Seite! 65 Das hochgeladene Bild steht nun zur Verfügung! Klicken Sie das gewünschte Bild mit der linken Maustaste an und halten Sie die 32 Maustaste Eingefügte Tabelle gedrückt! mit drei Spalten Ziehen Sie nun mit gedrückter Maustaste das Bild in den Tab, in dem sich die Seite befindet, auf der das Bild angezeigt werden soll (siehe Abb. 46). Sobald Sie mit dem Bild über dem entsprechenden Tab sind, wechselt die Anzeige und Sie sehen Ihr Webdokument und können das Bild an der entsprechenden Stelle platzieren. (siehe Abb. 47 und 48) Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 41

42 Abb. 47 Ziehen Sie das Bild in ihre gewünschte Seite! 65 Das hochgeladene Bild steht nun zur Verfügung! 32 Eingefügte Tabelle mit drei Spalten Abb. 48 Ziehen Sie das Bild in ihre gewünschte Seite! 65 Das hochgeladene Bild steht nun zur Verfügung! S Eingefügte Tabelle mit drei Spalten Anleitung Webseiten-Bearbeitung Version 1.2 / GS

43 6. Seiten löschen Natürlich kann es auch mal vorkommen, dass Sie eine Seite löschen müssen, weil Sie vielleicht eine Seite zu viel angelegt haben. Damit nicht aus Versehen eine Seite gelöscht wird, kann dies nur im Backend geschehen, nicht im Frontend. Wenn Sie also eine Seite löschen möchten, wechseln Sie bitte ins Backend und dann in den Bereich Content (siehe Abb. 49). Abb. 49 Backend: Im Bereich Content erhalten Sie einen Überblick über alle vorhandenen Seiten 65 Das hochgeladene Bild steht nun zur Verfügung! Hier sehen Sie auf einen Blick alle Seiten, die man im Internet unter Ihrer Internetadresse 32 Eingefügte Tabelle mit drei Spalten abrufen kann. Zusätzlich bekommen Sie folgende Informationen: Ebene 1 Ebene 2 Seitentitel gibt an, an welchem Platz in der Navigationsleiste die Seite angezeigt wird gibt an, an welchem Platz in der Navigationsleiste und in welcher Unterposition die Seite angezeigt wird Zeigt, wie der Seitentitel der jeweiligen Seite (nicht des Internetauftrittes, der ja auch manchmal als Internetseite betitelt wird), z. B. Vorstand, Impressum, etc. lautet. Hinweis: Bitte lassen Sie den Seitentitel niemals unbenannt, das ist einer der schlimmsten Fehler, die man machen kann. Geben Sie mal bei Google die beiden Wörter untitled document ein und schauen Sie, was dabei heraus kommt. Wie wollen und können Sie so gefunden werden? Anleitung Webseiten-Bearbeitung Version 2.0 / GS S. 43

44 Content KastenNr steht für Inhalt und zeigt den Anfang des Inhaltes der jeweiligen Seite an (allerdings in HTML) Sie können Ihren Seiten jeweils einen Kasten mit zusätzlichen Informationen zuordnen, der rechts neben dem eigentlichen Inhalt platziert wird. Wenn Sie sich das einmal anschauen möchten, schauen Sie sich die Webseite des CV RLP an, dort werden die Kästen verwendet. Wenn Sie nun eine Seite löschen möchten, markieren Sie bitte die entsprechende Seite, indem Sie vorne einen Haken setzen und klicken Sie anschließend auf Löschen (siehe Abb. 50). Abb. 50 Backend: Seite zum Löschen markieren 65 Das hochgeladene Bild steht nun zur Verfügung! Die anschließend erscheinende Kontrollfrage bestätigen Sie bitte mit OK (siehe Abb. 51). 32 Eingefügte Tabelle mit drei Spalten Abb. 51 Backend: Seite löschen bestätigen 65 Das hochgeladene Bild steht nun zur Verfügung! Der Eintrag in der Übersicht wird gelöscht und damit auch die Seite mit allen Inhalten. 32 Eingefügte Tabelle mit drei Spalten S. 44 Anleitung Webseiten-Bearbeitung Version 1.2 / GS