Informationen zur Webseite: Einen Artikel online erstellen

Transkript

1 10 Bei ❺ wird sodann der Text eingegeben oder aus einem Texteditor importiert. Internet-Dienstleistungen Informationen zur Webseite: Einen Artikel online erstellen 1 Inhaltsverzeichnis 2 Der Frontend-Editor Text importieren Bild einfügen Ordner erstellen Bild hochladen Bild einfügen Artikel veröffentlichen Artikel bearbeiten Weiterlesen-Button Klickvergrößerung Bilder für das Internet vorbereiten Dateien hochladen und einbinden Datei in einem Popupfenster öffnen Marion Krimm Am Landgraben Oberhausen Tel.: Fax: web@pyronet.de Ihr Zeichen: Ihre Nachricht vom: Mein Zeichen: 2 DER FRONTEND-EDITOR Direkt nach dem Einloggen wird in der Hauptnavigationsleiste der Button <Beitrag erstellen> ❶ angezeigt. Nach einem Klick darauf erscheint das Eingabeformular und man befindet sich direkt auf dem Tab <Inhalt> ❷. Bei ❹ sollte nichts eingegeben werden, denn das macht Joomla automatisch. Bei ❸ muss nun ein Titel vergeben werden. Bankverbindung: Volksbank Rhein Ruhr BLZ: Konto: Steuernummer:

2 2.2 Text importieren Zum Importieren von Text wird der Cursor an die Position ❶ gesetzt und das kleine Icon ❷ angeklickt. Mit der Tastenkombination + kann dann der Text aus jedem beliebigen Texteditor kopiert und in dem sich öffnenden Fenster mit der Tastenkombination + eingefügt werden ❶. Mit einem Klick bei ❷ wird dann der Text in den Editor übernommen. 2.3 Bild einfügen Wenn dann noch ein Bild eingefügt werden soll setzt man den Cursor an die gewünschte Stelle ❶ und klickt auf das kleine Icon mit dem Bildsymbol ❷. 2

3 In dem sich nun öffnenden Fenster ist bei Position <Bild> ❶ bei ❷, ❸ und ❹ zu erkennen, dass ich zur Zeit noch keine Bilder im Ordner <Förderverein> befinden. Demnach muss zunächst einmal ein Bild hochgeladen werden Ordner erstellen Um Ordnung in seinem System zu behalten, empfiehlt es sich zunächst einmal einen Ordner anzulegen. Dies geschieht mit einem Klick auf das Icon mit dem Ordnersymbol ❶. ❶, ❷ 3

4 2.3.2 Bild hochladen Dann wird der neue Ordner ❶ und das Icon bei ❷ angeklickt. Die einfachste Methode ist es nun ein oder mehrere Bilder direkt von seiner Festplatte in der sich neu geöffnete Fenster zu ziehen. Das ist wohl die einfachste Methode. Man kann allerdings auch den Button bei ❶ verwenden, um seine Festplatte zu durchsuchen. Abschließend wird bei ❷ der Hochladevorgang gestartet Bild einfügen Anschließend steht das Bild im mittleren Bereich zur Verfügung. Allerdings ist bei <URL> ❷ und bei <Vorschau> ❸ noch nichts eingetragen bzw. nichts zu sehen. Um das Bild nun in den Editor einzufügen muss das gewünschte Bild, in diesem Fall also ❶ angeklickt werden. 4

5 Jetzt ist auch die URL ❶ und die Vorschau ❷ entsprechend befüllt. Bei den Positionen ❸, ❹ und ❺ können nun die entsprechenden Anpassungen, was die Größe und die Ausrichtung und der Randabstand des Bildes zum Text betrifft, vorgenommen werden. Abschließend wird bei ❻ das Bild eingefügt. Und so sieht das nun aus. 2.4 Artikel veröffentlichen Um den Artikel nun zu veröffentlichen können bei ❶ verschiedene Einstellungen vorgenommen werden. Bei ❷ können Sie wählen, welcher Kategorie der Artikel zugeordnet werden soll. Jede Kategorie steht auch für einen Navigationspunkt. D.h., wenn sie hier beispielsweise die Kategorie <Über uns> wählen, erscheint er auch unter diesem Menüpunkt (Menüpunkt und Navigationspunkt werden synonym verwendet). Bei ❸ können Sie entweder vorhandene Schlagwörter zuweisen oder direkt in das Feld klicken um ein neues zu erzeugen. Schlagwörter können dann später in einer Schlagwortliste angezeigt werden. ❹ wird wieder automatisch von Joomla erledigt. Bei ❺ können Sie entscheiden ob ihr Artikel direkt veröffentlicht oder zunächst einmal verborgen bleiben soll. ❻ hat für sie keine Relevanz, weil es auf der Startseite keine Beiträge gibt. Hier also nicht auf <Ja> stellen. Bei Herrn 5

6 Wenn Sie möchten, dass ihr Artikel erst zu einem bestimmten Zeitpunkt erscheint, können Sie bei ❼ ein Startdatum auswählen. Soll er nur eine bestimmte Zeit lang online stehen, können Sie bei ❽ ein Datum einstellen zu dem der Artikel wieder verschwindet. Bei ❾ können Sie entscheiden, wer diesen Artikel sehen darf. Bei dem Voreingestellter <Public> kann jeder Besucher diesen Artikel sehen. Wählen Sie hier beispielsweise <Förderverein> können nur ein gelockte Mitglieder, die sich zuvor mit Benutzernamen und Passwort angemeldet haben, diesen Beitrag sehen. 2.5 Artikel bearbeiten Und so sieht der Artikel nun im Frontend aus. Wenn sie nachträglich feststellen, dass Sie noch etwas ändern möchten, klicken Sie bitte direkt den Artikeltitel bei ❶ und dann auf den Link <Bearbeiten> ❷. Ich habe diese Methode nun benutzt, um den Zugriff auf <Förderverein> umzustellen. Somit können Sie diesen Artikel nur sehen, wenn Sie eingeloggt sind. 3 WEITERLESEN-BUTTON Die SSG-Webseite ist so ausgelegt, dass sie dem Prinzip Mobile First gehorcht. D.h., das gesamte Design ist darauf ausgerichtet auf mobilen Endgeräten wie zum Beispiel Smartphones gut auszusehen und gut navigierbar zu sein. Deshalb sind längere Artikel immer von Nachteil. Um diesem Problem zu begegnen, ist es ratsam, einen <Weiterlesen-Button> einzufügen. Dazu fügt man zunächst einmal einen Umbruch ein ❶ und klickt dann auf den Button <Weiterlesen> unterhalb des Editorfensters ❷. 6

7 Und so sieht das dann im Frontend aus. 4 KLICKVERGRÖßERUNG Bei ❶ ist jetzt ein grauer Balken zu sehen, der den <Weiterlesen-Button> symbolisiert. Ein besonderes Schmankerl ist es sicherlich, das Bild anzuklicken und zu erleben wie sich ein Popup-Fenster öffnet, um es in ganzer Größe darzustellen. Um das zu realisieren klickt man das Bild an ❷ und dann das kleine Icon mit dem Kettensymbol ❸. In dem sich dann öffnenden Fenster geht es im Grunde genommen darum, Links zu setzen. Diese Links ❶ können natürlich auf alles mögliche gesetzt werden. Wenn ich zum Beispiel auf <Inhalte> ❷ klicke, kann ich einen Link direkt auf einen Beitrag setzen ❸. Das würde bedeuten, dass bei einem Klick auf das Bild der entsprechende Beitrag geöffnet würde. Das möchte ich an dieser Stelle allerdings nicht erreichen und klicke daher auf <URL> ❹. 7

8 In dem sich öffnenden Fenster muss nun das entsprechende Bild angeklickt werden ❶, bevor man auf <Einfügen> ❷ klickt. Wie nun zu sehen ist, wurde bei ❶ der Link zu dem Bild eingefügt. Jetzt geht es mit ❷ weiter. Unter dem Tab <Popups> ❶ ist unter <Typ> die Option <JCE Mediabox-Popups> ❷ zu wählen. Bei ❸ und ❹ können entsprechende Einträge gemacht werden. Und wenn das Bild insgesamt zu groß ist kann bei ❺ ein Wert (z.b. 800) eingetragen werden, der die Pixelbreite angibt. Solange das Häkchen bei <Proportional> gesetzt ist, muss der 2. Wert nicht eingegeben werden. Bleiben beide Felder leer wird halt eben das Bild in Originalgröße angezeigt. Bei ❻ muss noch der Media-Typ auf <Bild> gesetzt werden. Da ich dies nun nachträglich gemacht habe steht bei ❼ <Updaten> worauf ich natürlich klicke. 8

9 Und so sieht das nun aus, wenn im Frontend das Bild angeklickt wird. 5 BILDER FÜR DAS INTERNET VORBEREITEN Damit Bilder auf der Webseite optimal dargestellt werden, ist es erforderlich, dass sie dafür vorbereitet werden. Da nicht jeder über teure Fotobearbeitungsprogramme verfügt haben wir ein kostenloses Bildbearbeitungsprogramm gesucht, mit dessen Hilfe sich die Bilder sehr einfach für das Internet gestalten lassen. Dieses Programm heißt <Irfan- View>. Wie damit gearbeitet wird zeigen wir in einem kleinen Video. Dieses Video haben wir für Sie auf der <Supportseite>, die wir für dieses Tutorial erstellt haben, eingebunden. 6 DATEIEN HOCHLADEN UND EINBINDEN Natürlich können Sie auch beispielsweise PDF Dateien hochladen und verlinken. Erstellen Sie im Editor den Text, wie der Download- Link heißen soll ❶. 9

10 Danach markieren sie diesen Text ❶ und klicken auf das Icon mit dem Kettensymbol ❷. In dem sich öffnenden Fenster sehen sie nun bei ❶ ihren Text und können bei ❷ eine bereits vorhandene Datei auswählen, o- der eine neue hochladen. Die nun folgende Prozedur ist identisch mit dem unter Punkt beschriebenen Verfahren ❶ ❷. Ich wähle an dieser Stelle nun allerdings ein bereits hochgelades Dokument aus ❸. Anschließend klicke ich auf ❹. 10

11 Im folgenden Fenster sollten Sie unbedingt bei ❶ die Option <In neuem Fenster öffnen> anklicken, damit das Dokument in einem neuen Browserfenster geöffnet wird. Dann wird bei❷ gespeichert. Zum Schluss müssen Sie natürlich auch noch das Dokument speichern ❶. Wenn Sie nun den Link auf Ihrer Seite betätigen, wird ein neuer Browsertab geöffnet ❶, in dem das Formular erscheint. Bei ❷ ist aber immer noch die Original Webseite verfügbar. 11

12 6.2 Datei in einem Popupfenster öffnen Natürlich können Sie auch erreichen, dass ihre Datei nicht in einem neuen Browsertab geöffnet wird sondern in einem Popup-Fenster. Soll ihr Link nicht nur ein einfacher Textlink sein wie hier ❶, sondern ein schicker Button wie hier ❷? Das ist ein klein wenig Tricky, denn dazu müssen sie ein wenig den Quelltext bearbeiten. Aber auch das ist kein Problem. Gehen Sie dazu wieder in den Bearbeitungsmodus ihrer Seite und klicken Sie direkt oberhalb des Editorfensters auf ❶. 12

13 Die markierten Bereiche im Quelltext ❶ und ❷ Gehören zu diesen Button. Markieren Sie einfach den hier blau markierten Quelltext und kopieren Sie ihn mit Steuerung+C und fügen ihn beispielsweise unterhalb Steuerung+V wieder ein. Jetzt tauschen Sie den Pfade ❶ gegen den bei ❷ aus. Den Titel und die Beschreibung des Popupfensters ändern Sie bei ❶ und die Beschriftung des Buttons bei ❷. Abschließend natürlich wie immer alles speichern. 13