DIE EIGENE WEBSITE MIT

Transkript

1 DIE EIGENE WEBSITE MIT Version 4.2 PFLEGEN TEIL 1

2 Skript von Jens-U. Kriebeler Stand:

3 inhaltsverzeichnis 01. Was ist TYPO3? 4 Nicht Homepage, sondern Webseite! Was sind die Voraussetzungen für TYPO3? 5 Internet-Browser 5 Wo bekommt man Mozilla oder Firefox? Wie kann ich TYPO3 aufrufen? Wie kann ich TYPO3 wieder verlassen? Welche von den vielen Funktionen brauche ich? Der Seitenbaum Schnell eine kleine Korrektur ausführen Was bedeuten die Symbole in TYPO3? (Teil 1) Wie tauscht man ein Bild aus? Wie lädt man ein neues Bild in die Datenbank? Wie tauscht man schnell ein Bild aus? Wie kann man den Inhalt einer Tabelle schnell verändern? 38 Den senkrechten Strich auf der Tastatur finden 40 3

4

5 01. Was ist typo3? TYPO3 ist ein Content Management System (CMS), d.h. mit diesem System werden die Inhalte (Texte, Bilder, Dokumente) einer Website verwaltet. Inhalt und Gestaltung sind strikt getrennt. TYPO3 ist eine Open Source-Lösung, d.h. es fallen keine Lizenzgebühren an. Genau wie bei dem Betriebssystem LINUX wird TYPO3 von einer Gruppe Interessierter weltweit ständig weiterentwickelt und verbessert. TYPO3 ist offen für Erweiterungen, so dass die Funktionalität den Bedürfnissen entsprechend angepasst werden kann. Je nach ihren Wünschen baut die Web-Agentur Erweiterungen in die Website ein. Nicht Homepage, sondern Website! Das englische Wort «Homepage» wird in der deutschen Umgangssprache gleich verwendet wie «Internet-Präsenz», «Internet-Auftritt» oder «Website». Dabei bedeutet «Homepage» übersetzt nur «Startseite» und damit ist nur die Einstiegsseite einer Website gemeint. Das Wort «Website» bezeichnet das ganze Internet-Projekt mit seinen Seiten und Inhalt. In der Umgangssprache hat sich die weibliche Form, also «die Website», durchgesetzt. Dabei kommt «site» vom lateinischen «Situs» und dies bedeutet der «Platz». Aber durch die Klangähnlichkeit zwischen dem englischen «site» und der deutschen «Seite» wurde «Website» im Deutschen weiblich. 5

6 02. Was sind die Voraussetzungen für TYPO3? Das Content Management System TYPO3 benötigt auf dem Server die Datenbank MySQL und die Programmiersprache PHP 4. In der Regel kümmert sich die Web-Agentur darum, dass diese Voraussetzungen gegeben sind. Um eine auf TYPO3 basierende Website zu besuchen benötigen Sie nur einen Internet-Browser. Einige Funktionen innerhalb von TYPO3 verlangen, dass JavaScript im Internet-Browser aktiviert ist. Internet-Browser Ein Internet-Browser ist ein Programm, mit dem man Internet-Seite besuchen, lesen und ausdrucken kann. Das Wort «Browser» stammt vom englischen Wort «to browse», was blättern oder sich umsehen bedeutet. Folgende Internet-Browser werden am häufigsten verwendet: Microsoft Internet Explorer, Firefox, Safari und Opera. Die Darstellung einer Web-Seite kann auf verschiedenen Internet-Browsern unterschiedlich ausfallen, da die Anweisungen für die Gestaltung einer Web-Site von den Internet-Browsern (unterschiedlich) interpretiert werden. Ausgerechnet der am häufigsten genutzte Internet-Browser, der Internet Explorer (Version 6 und 7), weicht von den anderen stark ab. Daher ist es für eine Web-Agentur eine Herausforderung, die Gestaltung einer Website so aufzubauen, dass die Webseite ohne Probleme mit möglichst vielen Internet-Browsern genutzt werden kann und möglichst gleich aussieht. 6

7 Um eine auf TYPO3-basierenden Website zu bearbeiten wird auch nur ein Internet- Browser benötigt. Unter Windows kann man dafür den Internet Explorer ab Version 6, Firefox ab Version 2 benutzen. Unter MacOS X können Sie Safari 3 oder Firefox ab Version 2 benutzen. Die Bearbeitung der auf TYPO3-basierende Website erfordert eine offene Internet-Verbindung, d.h. Sie arbeiten online innerhalb von TYPO3. Wenn Sie viel mit Ihrer Website arbeiten wollen, dann sollten Sie keine Wahlverbindung per Modem verwenden, bei der jede Minute wie beim Telefon Geld kostet. Besser, schneller und kostengünstiger sind Verbindungen, die per Monatspauschale («flatrate») gegenüber Ihrem Internet-Anbieter abgerechnet werden. Wo bekommt man SeaMonkey oder Firefox? Die Internet-Browser SeaMonkey und Firefox sind die Nachfolger der bekannten Programms Netscape, ist Mozilla. Technisch unterscheiden sich die beiden Programme grob dadurch, das Firefox nur zum Surfen im Internet dient, während das Programm SeaMonkey auch noch s abrufen und verwalten kann. Beide Programme sind gratis. Sie sind eine gute Alternative zum Internet Explorer. Das Programm SeaMonkey finden Sie im Internet unter: Das Programm Firefox finden Sie im Internet unter: 7

8 03. Wie kann ich TYPO3 aufrufen? 1. Stellen Sie eine Verbindung mit dem Internet her. Falls Sie über ADSL oder eine Standleitung verfügen ist das nicht notwendig. 2. Starten Sie Ihren Internet-Browser. Unter Windows liegt der Internet Explorer im Start-Menü und/oder auf dem Schreibtisch. SeaMonkey oder Firefox können dort nach erfolgreicher Installation genauso liegen. 3. Geben Sie im Internet-Browser den Namen Ihrer Website ein und hängen an den Namen «/typo3» an, zum Beispiel « und bestätigen Sie die Eingabe mit der Taste <ENTER>. Hinweis: Tasten der Tastatur werden hier im Skript mit spitzen Klammern dargestellt. <A> ist die Taste «A» auf der Tastatur. Ein Pluszeichen bedeutet, dass beide Tasten gleichzeitig gedrückt werden müssen, zum Beispiel <Alt> + <A> bedeutet, dass die Taste «Alt» und die Taste «A» zeitgleich gedrückt werden müssen. Tipp: Wenn Sie häufig auf TYPO3 zugreifen wollen, dann sollten Sie die obige Adresse zu Ihren Favoriten (Bookmarks) hinzufügen. 8

9 Nach der Eingabe des richtigen Pfades (siehe Seite 3) erscheint der Login-Dialog von Typo3. Hier können Sie sich nun bei Ihrer Website als autorisierter Bearbeiter anmelden. 4. Geben Sie Ihren Benutzernamen und Ihr Kennwort so ein, wie Sie es vom Administrator der Website erhalten haben. Achten Sie dabei auf Gross- und Kleinschreibung. Bestätigen Sie die Eingabe mit <ENTER> oder klicken Sie mit der Maus auf das Feld «Login». 9

10 War die Anmeldung erfolgreich, dann erscheint die Oberfläche von Typo3. 10

11 04. Wie kann ich TYPO3 wieder verlassen? Aus Sicherheitsgründen und damit, wenn Sie im Team an der Website arbeiten, auch andere die Möglichkeit haben alle Seiten der Website zu bearbeiten, sollten Sie sich immer wieder vom TYPO3 abmelden (Logout). 1. Am oberen Rand der Oberfläche von TYPO3 finden Sie das Feld «Logout». Klicken Sie einfach auf dieses Feld. Um das Feld zu sehen, kann es eventuell nötig sein, dass Sie im Fenster scrollen müssen. Dies ist abhängig von der Monitorauflösung und der Fenstergrösse Ihres Internet- Browsers. 11

12 Nach dem Klicken auf das Feld «Logout» erscheint wieder der Anmeldedialog. Sollten Sie vergessen sich abzumelden, kann dies zu zwei Problemen führen: 1. Haben auch noch andere Zugang zu Ihrem Computer, so können diese ohne das Passwort zu kennen, auch ins TYPO3 und dort Unheil anrichten. 2. Die zuletzt von Ihnen bearbeitete Seite ist für andere innerhalb von TYPO3 gesperrt. Diese Seite wird im Seitenbaum (s.u.) mit einem roten Ausrufezeichen gekennzeichnet. 12

13 05. Welche von den vielen Funktionen brauche ich? Es gibt viele Funktionen in TYPO3, die am linken Rand als Navigation darstellt werden. Von diesen brauchen Sie zum Bearbeiten der Website aber nur drei! Die anderen können Sie einfach ignorieren. «Seite» erlaubt Ihnen das Arbeiten mit den Seiten und deren Inhalt (siehe Teil 2). «Anzeigen» stellt eine gewählte Seite wie im Internet dar. Mit dem kleinen Bleistift können Sie direkt einzelne Teile bearbeiten. Dies ist der schnellste Weg eine Korrektur auszuführen (siehe Kapitel 07). Mit der «Dateiliste» können Sie alle Dokumente Ihrer Website verwalten, dazu zählen Bilder, PDF-Dateien und andere (siehe Kapitel 10). Hinweis: Sollten Sie eine dieser drei Funktionen nicht in der linken Navigation sehen, dann klicken Sie auf das Plus-Zeichen hinter dem Wort «Web» beziehungsweise «Datei» und die zugehörigen Untermenüs werden wieder aufgeklappt. 13

14 06. Der Seitenbaum Der Seitenbaum eine hierarchische Darstellung aller Seiten ihrer Website wird rechts neben den Funktionen sichtbar, sobald Sie auf die Funktion «Seite» oder «Anzeige» klicken. Genau wie unter Windows können Teile des Seitenbaums zusammen oder aufgeklappt werden. 1. Klicken Sie auf das kleine Plus-Zeichen vor der Weltkugel in der obersten Zeile. 14

15 Im Seitenbaum wird nun die nächste Ebene sichtbar. Aus dem Plus vor der Weltkugel wurde ein Minus-Symbol. 2. Klicken Sie nun auf das Plus-Zeichen vor dem Seiten-Symbol der Startseite. So sehen Sie immer mehr Unterseiten. 3.Klicken Sie auf ein Minus-Zeichen vor einem Symbol, so wird dieser Teil des Seitenbaums wieder zusammengeklappt. Hinweis: TYPO3 «merkt» sich für jeden Benutzer die aktuelle Gestalt des Seitenbaums und zeigt diese auch nach einem Abmelden und wieder Anmelden so an. 15

16 07. Schnell eine kleine Korrektur ausführen Ist Ihnen ein Tippfehler aufgefallen oder muss ein Name, Datum oder Telefonnummer geändert werden, dann ist der Weg über die «Anzeige» der schnellste und einfachste. 1. Klicken Sie links in den Funktionen auf «Anzeigen». 16

17 Es erscheint der Seitenbaum rechts neben den Funktionen und rechts davon erscheint eine Seite der Website (meist die Startseite). 2. Klicken Sie nun im Seitenbaum auf den Namen einer der Seiten, hier im Beispiel auf «Willkommen», so wird diese Seite rechts angezeigt. Hinweis: TYPO3 unterscheidet zwischen dem Klick auf einen Namen und dem Klick auf ein Symbol. Letzteres erzeugt ein Hilfsmenü ähnlich dem Rechten-Mausklick im Betriebssystem mit Zusatzfunktionen. 17

18 Neben der normalen Darstellung der Seite, wie Sie es aus dem Internet schon kennen, sehen Sie nun aber noch Symbole in Form von kleinen Bleistiften. Je nach Bildschirm- und Fenstergrösse müssen Sie vielleicht noch scrollen um zu dem Eintrag zu kommen, den Sie gerne verändern möchten. 18

19 3. Klicken Sie nun auf einen Bleistift, den Sie hinter (oder auch unter) dem Bereich finden, den Sie bearbeiten möchten. 19

20 Die Darstellung wechselt zu einer Eingabemaske. Die Anzahl der Eingabefelder hängt vom Typ des Datensatzes ab, der bearbeitet werden soll. Dazu später mehr. Die Struktur in TYPO3 Eine Website besteht aus mehreren Seiten, so wie ein Buch auch mehreren Seiten besteht. Analog zum Textabsatz oder einer Abbildung im Buch gibt es in TYPO3 auch eine kleinere Informationseinheit neben der Seite, die als Datensatz bezeichnet wird. Ein Datensatz oder kann verschiedene Informationen zum Beispiel Überschrift, Text und Bild beinhalten können. TYPO3 unterscheidet verschiedene Arten von Datensätzen. Auch dazu später mehr. 20

21 4. Sie können nun im weissen Feld den Text verändern, so wie Sie es aus WORD oder anderen Textverarbeitungsprogrammen gewohnt sind. 5. Um die Änderung zu speichern klicken Sie nun auf das Symbol der Diskette mit dem kleinen X. Dies speichert die Änderung in der Datenbank ab und schliesst die Eingabemaske. 21

22 Sie kommen so automatisch wieder zur Anzeige der Seite zurück und können gleich kontrollieren, ob die Änderung ihren Wünschen entspricht. Beginnen Sie wieder bei Schritt 2 um eine Textkorrektur auf einer anderen Seite oder Stelle auszuführen. 22

23 08. Was bedeuten die Symbole in TYPO3? (Teil 1) Die Symbole in TYPO3 sind recht ähnlich den Symbolen aus dem Betriebssystem Windows. Im Seitenbaum gibt es drei Grundsymbole: die Weltkugel (1) als Symbol für Ihre gesamte Website. Dieses Symbol kann nicht gelöscht werden. die Seite (2) als Symbol für eine Seite innerhalb der Website. Das Symbol kann noch kleine Zusatzsymbole zeigen. die Seite mit dem Pfeil rechts (3) unten in der Ecke als Symbol für eine Abkürzung (Shortcut). Unter Windows wird dies Symbol als «Verknüpfung» und unter MacOS als Alias bezeichnet. In allen drei Fällen verweisst dieses Symbol auf ein anderes Objekt oder eine andere Seite. Der Shortcut wird meist zur Gliederung der Navigation verwendet. 23

24 Die Symbole oben und unten in einer Eingabemaske: Am Anfang und Ende einer Eingabemaske finden Sie Symbole, die mit Funktionen verknüpft sind. Die Diskette speichert einfach nur die Änderung. Der Anwender bleibt in der Eingabemaske. Die Diskette mit dem X speichert die Änderung, aber bringt den Anwender zurück zur letzten Übersicht, d.h. die Eingabemaske verschwindet. Das X alleine schliesst nur die Eingabemaske und bringt den Anwender zur letzten Übersicht zurück. Die Änderungen wurden nicht gespeichert! Der Pfeil nach links oder zurück widerruft die letzte gespeicherte Änderung. Im Beispiel wurde das Wort «Die» als erstes Wort des Satzes eingefügt und gespeichert. Wird der Pfeil nach links angeklickt, so verschwindet das Wort «Die» wieder und der ursprüngliche Text steht wieder im Textfeld. 24

25 09. Wie tauscht man ein Bild aus? Ein bestehendes Bild soll durch ein neues Bild ausgetauscht werden. Dazu müssen zwei grundsätzliche Schritte ausgeführt werden: 1. Das neue Bild in die Datenbank laden. 2. Die Verknüpfung zum alten Bild löschen und durch eine Verknüpfung zum neuen Bild ersetzen. 10. Wie lädt man ein neues Bild in die Datenbank? 1. Klicken Sie ganz links in den Funktionen auf «Dateiliste». Statt des Seitenbaum erscheint nun eine neue hierarchische Liste, die mit dem Wort «fileadmin» beginnt. Dies ist der oberste Ordner, der alle Dokumente der Website enthält, die wiederum in Ordnern liegen. Dies kennen Sie ja bereits von Ihrem Betriebssystem. Der Ordner «fileadmin» entspricht der Festplatte in Ihrem Computer. 25

26 2. Klicken Sie auf das Plus, um die Hierarchie der Dateiliste zu öffnen. Je nach Website gibt es nun verschiedene Ordner. Die wichtigsten Ordner sind: «TEMP» (für temporär = vorübergehend) wird vom System TYPO3 benutzt. In diesen Ordner sollten Sie nichts hineinlegen. «bilder» kann weitere Ordner enthalten. Dies ist der beste Platz um Bilder abzulegen. «download» ist für PDF- und andere Dateien gedacht, die von Besuchern der Website per Mausklick gespeichert werden können. «layout» enthält alle Informationen für die Darstellung und das ordnungsmässe Funktionieren der Website. Dieser Ordner sollte für Sie tabu sein. Änderungen am Inhalt des Ordners können zur Zerstörung der Website führen! «user_upload» ist ein vom System TYPO3 benutzter Ordner. In diesen Ordner sollten Sie nichts hineinlegen. 26

27 3. Klicken Sie nun auf das Symbol nicht auf den Namen! um das Hilfsmenü eines der Ordner zu sehen. Im Beispiel auf das Symbol von «bilder». 27

28 4. Der zweite Befehl heisst «Datei upload», wählen Sie diesen aus. Im rechten Teil des Fensters können Sie nun eine oder bis zu zehn Dateien auf einmal auf Ihrer Festplatte auswählen und in die Datenbank laden. 28

29 5. Klicken Sie am Ende der Zeile auf das Wort «Durchsuchen» und wählen Sie im folgenden Dialog mit «Öffnen» die gewünschte Datei aus. 29

30 Anschliessend erscheint der Pfad der gewünschten Datei im Feld. Haben Sie alle gewünschten Dateien gefunden, 6. dann klicken Sie auf das Wort «upload». Jetzt werden die gewünschten Bilder in die Datenbank geladen. 30

31 Wichtige Hinweise zu Bilddateien: 1. TYPO3 ist so eingestellt, dass Bilder die grösser als 800 x 800 Pixel sind, nicht dargestellt werden. 2. Der Bildname sollte sprechend sein, damit Sie oder andere Mitarbeiter wissen, um was es sich bei dem Bild handelt. Also benennen Sie eine Bilddatei mit dem Namen «DSC jpg» um, zum Beispiel in «rolf-mueller.jpg», wenn Rolf Müller auf dem Bild zu sehen ist. 3. Achten Sie bei den Dateinamen auf konsequente Kleinschreibung und dass der Dateiname keine Sonderzeichen wie, %, $ oder Umlaute wie ä, ö, ü enthält. Statt das Leerzeichen verwenden Sie bitte - (Minus-Zeichen) oder _ (Unterstrich). 4. Bilder können Sie mit einem Bildbearbeitungsprogramm wie Adobe Photoshop oder GIMP verkleinern, zuschneiden, optimieren und im Format «jpg» abspeichern. Siehe dazu auch Anhang B. 5. Zeichnungen, Symbole, Diagramme mit Schrift und so weiter sollten Sie im Format «gif» abspeichern. Der Unterschied zum «jpg» liegt darin, dass «gif» nur maximal 256 Farben kennt, aber in der Kompression verlustfrei ist. Zu stark komprimierte «jpg» werden unscharf, das macht sich besonders bei Schriften im Bild bemerkbar. Siehe dazu auch Anhang B. 31

32 11. Wie tauscht man schnell ein Bild aus? 1. Klicken Sie in der linken Navigation auf «Anzeigen». 2. Klicken Sie im Seitenbaum auf den Namen der gewünschten Seite. 3. Klicken Sie auf den unteren Bleistift unter dem Bild. Es erscheint die Eingabemaske für das Bild. 32

33 4. Klicken Sie auf den Bildnamen. 5. Klicken Sie dann auf das Kreuz um die Verknüpfung zu dem Bild zu löschen. Dadurch wird nun die Verknüpfung gelöscht. Das Bild selbst liegt nach wie vor in der Datenbank und kann später wieder mit anderen Datensätzen verknüpft werden. 33

34 6. Klicken Sie nun auf den kleinen Ordner um ein anderes Bild aus der Datenbank zu wählen. Im folgenden Dialog können Sie nun aus der schon bekannten Dateiliste das gewünschte Bild wählen: 7. Klicken Sie auf den Namen des Ordners, der das gewünschte Bild enthält, im Beispiel auf den Ordner «bilder». Sie sehen nun die Liste aller Dokumente im Ordner «bilder». 34

35 8. Aktivieren Sie die Option «Thumbnails anzeigen». 35

36 So sehen Sie die Bilder mit einem kleinen Vorschaubild. 36

37 9. Klicken Sie nun auf den Namen oder das Vorschaubild des gewünschten Bildes. Der Dialog verschwindet wieder und Sie sehen nun den Namen des Bildes in der Verknüpfung eingetragen. Hinweis: Das Vorschaubild wird erst aktualisiert, wenn Sie die Änderung gespeichert haben. 37

38 10. Klicken Sie zum Speichern nun auf die Diskette mit dem X. Sie kommen zurück in die Ansicht und sehen dort das neue Bild. 38

39 12. Wie kann man den Inhalt einer Tabelle schnell verändern? Hinweis: Der Datensatztyp Tabelle wird nur noch selten im TYPO 3 benutzt, da in jedem normale Textfeld Tabellen ähnlich wie in WORD verwendet werden können. Tabellen enthalten, wie Sie es aus WORD oder EXCEL kennen, Informationen in Zellen, Reihen und Spalten. TYPO3 kennt solche Tabellen auch, diese können bis zu acht Spalten haben. Auf den ersten Blick sind manche Tabellen kaum von einem formatierten Text zu unterscheiden. Erst wenn der Mauszeiger auf dem Bleistift steht, zeigt die kleine gelbe Hilfe «Tabelle bearbeiten». 1. Klicken Sie auf den Bleistift einer Tabelle um diese zu bearbeiten. Es erscheint die Eingabemaske für Tabellen. 39

40 Sie sehen, dass die Tabelle ein (fast) ganz normaler Text ist. Einzig die senkrechten Striche fallen auf. Diese sind die Trenner, die die Zellen der Tabelle voneinander trennen. 40

41 Den senkrechten Strich auf der Tastatur finden Unter Windows ist der senkrechte Strich mit einer der folgende Tastenkombinationen zu finden: <Alt Gr> + <1>, <Alt Gr> + <7> oder <Alt Gr> + <kleiner gleich «<»> Welche der drei Möglichkeiten für Sie die richtige ist, hängt von Ihrer Tastatur (deutsch oder schweizerdeutsch) und von den Einstellungen für die Tastatur ab. Unter MacOS findet man den senkrechten Strich mit <alt> + <7>. Hinweis 1: Wir haben die Tabellen so angelegt, dass alle Spalten linksbündig erscheinen. Die Ausnahme ist die letzte (rechte) Spalte, diese wird immer rechtsbündig dargestellt. Das ist ideal, wenn Sie mal eine Preistabelle benötigen. Falls Sie diese Option nicht benötigen, so reicht es aus, wenn die erste Zeile der Tabelle mit einem senkrechten Strich endet. Das führt dann dazu, dass die Tabelle eigentlich eine Spalte mehr hat, aber diese wird nicht gesehen, denn die letzte (rechtsbündige) Spalte ist leer, und somit erscheinen alle sichtbaren Spalten linksbündig. Hinweis 2: Für TYPO3 ist die erste Zeile einer Tabelle die bestimmende. Hat diese Zeile drei senkrechte Striche, so wird die ganze Tabelle drei Spalten haben. Egal ob folgende Zeilen nur zwei oder fünf senkrechte Striche enthalten. 2. Sie können nun den Text in der Tabelle verändern, eine Zeile löschen oder eine Zeile hinzufügen. Achten Sie dabei auf die senkrechten Striche als Spaltentrenner. 3. Klicken Sie wieder zum Speichern auf die Diskette mit dem X. So erscheint nun die geänderte Tabelle in der Anzeige. 41