Website mit Joomla und Artisteer - KW

Transcrição

Schulungsunterlagen
Seite 1 von 68
-Software AG, Feldstrasse 1, 5312 Döttingen
Inhalt
1
1.1
1.2
1.3
2
VORBEREITUNGEN ........................................................................................... 6
FTP-Programm Filezilla auf eigenen Computer downloaden und installieren und konfigurieren .. 6
Joomla!-Core downloaden ab Joomla!-Website www. , auspacken und vorbereiten für Upload via
FileZilla auf den Server ............................................................................................................................ 6
MySQL-Datenbank einrichten bei Provider ........................................................................................... 6
JOOMLA!-PROGRAMM ..................................................................................... 7
2.1
Installation aufrufen ................................................................................................................................. 7
2.1.1 Konfiguration ........................................................................................................................... 7
2.1.2 Datenbank .............................................................................................................................. 8
2.1.3 Überblick ................................................................................................................................. 9
2.1.4 Installationsverzeichnis löschen ............................................................................................. 9
2.2
Joomla!-Einstellungen ........................................................................................................................... 10
2.2.1 Website Einstellungen .......................................................................................................... 10
2.2.2 Server Einstellungen ............................................................................................................. 10
2.2.3 Benutzer einrichten ............................................................................................................... 11
3
3.1
3.2
4
4.1
4.2
4.3
5
5.1
5.2
5.3
6
6.1
6.2
6.3
6.4
7
EXPORT / IMPORT ........................................................................................... 12
Artisteer - Template exportieren ........................................................................................................... 12
Joomla! – Template hochladen ............................................................................................................. 12
HINTERGRUND MIT ARTISTEER 4 ................................................................. 13
Hintergrundfarbe Website mit oder ohne Farbverlauf ....................................................................... 13
Hintergrund mit Textur oder Bild (auch aus eigener Datei) ............................................................... 13
Lichteffekte des Hintergrunds .............................................................................................................. 13
FARBEN / FONTS DEFINIEREN MIT ARTISTEER 4 ...................................... 14
Farbdesigns ............................................................................................................................................ 14
Farben anpassen .................................................................................................................................... 14
Schriftstil, Schriftgrösse und Typografie definieren .......................................................................... 14
SEITENSTRUKTUR BESTIMMEN MIT ARTISTEER 4 .................................... 15
Form und Position der Website ............................................................................................................ 16
Breite der Website .................................................................................................................................. 16
Innenrand der Website........................................................................................................................... 16
Umrandung der Website ........................................................................................................................ 16
LAYOUT (AUFBAU/STRUKTUR) DER WEBSITE MIT ARTISTEER 4 ........... 17
7.1
Design-Layout ........................................................................................................................................ 17
7.1.1 Kopfbereich / Header ............................................................................................................ 17
7.1.2 Menü (horizontales Menü) .................................................................................................... 17
7.1.3 Fussbereich / Footer ............................................................................................................. 17
7.2
Seiten-Layout .......................................................................................................................................... 17
7.3
Spalten .................................................................................................................................................... 17
7.4
Blöcke und Widgets (Komponente in grafischem Fenstersystem) .................................................. 17
8
INHALTS-DESIGN MIT ARTISTEER 4 ............................................................. 18
8.1
Blockstil .................................................................................................................................................. 18
8.2
Stil und Font ........................................................................................................................................... 18
8.3
Absatz ...................................................................................................................................................... 18
8.4
Meta-Daten (Daten im Kopfbereich) ..................................................................................................... 18
8.4.1 Für Suchmaschinen im www ................................................................................................ 18
8.4.2 Für E-Mail-Verkehr im www .................................................................................................. 19
9
9.1
9.2
9.3
9.4
ZELLEN IM ARTISTEER 4 ............................................................................... 20
Inhalt-Layout ........................................................................................................................................... 20
.................................................................................................................................................................. 20
Blockstil .................................................................................................................................................. 20
Zeilen ....................................................................................................................................................... 20
10 KOPFBEREICH DER WEBSITE....................................................................... 21
10.1
Kopfbereich im Artisteer bestimmen ................................................................................................... 21
10.1.1 Layout-Einstellungen ............................................................................................................ 21
10.1.2 Hintergrund Kopfbereich ....................................................................................................... 21
10.1.3 Hintergrundbilder .................................................................................................................. 21
10.1.4 Einfügen ................................................................................................................................ 21
Seite 2 von 68
Version 11. April 2014
10.1.5 Steuerung ............................................................................................................................. 21
10.1.6 Diashow ................................................................................................................................ 22
10.1.7 Flash ..................................................................................................................................... 23
10.2
Texteingabe für Headline (Titel Website) im Joomla! ......................................................................... 23
11 MENÜS ............................................................................................................. 24
11.1
Horizontales Menü ................................................................................................................................. 25
11.1.1 Modul hinzufügen bei Joomla! .............................................................................................. 25
11.1.2 Menü-Layout im Artisteer bestimmen ................................................................................... 25
11.2
Vertikales Menü ...................................................................................................................................... 26
11.2.1 Bearbeitung im Joomla! ........................................................................................................ 26
11.2.2 Modulposition wählen ........................................................................................................... 26
11.2.3 Modulposition eintragen........................................................................................................ 26
11.2.4 Menü-Layout im Artisteer bestimmen ................................................................................... 26
12 FUSSBEREICH ................................................................................................. 27
13 STEUERUNG .................................................................................................... 29
14 BREADCRUMBS – MODUL VON JOOMLA! ................................................... 30
14.1
14.2
Breadcrumbs einfügen .......................................................................................................................... 30
Position von Breadcrumbs bestimmen ............................................................................................... 31
15 BEITRRÄGE ERFASSEN/ÄNDERN IM JOOMLA! .......................................... 33
15.1
15.2
15.3
15.4
Editor – Bearbeitungsprogramm .......................................................................................................... 33
Kategorie neu erstellen ......................................................................................................................... 33
Beitrag neu erstellen .............................................................................................................................. 34
Tabelle in Beitrag einfügen ................................................................................................................... 34
16 MENÜEINTRÄGE ERFASSEN/ÄNDRN IM JOOMLA! ..................................... 35
16.1
16.2
16.3
16.4
Menü-Gliederung .................................................................................................................................... 35
Main Menü – Hauptmenü ....................................................................................................................... 35
Änderung Menü-Reihenfolge ................................................................................................................ 36
Status Menüeintrag ändern ................................................................................................................... 36
17 VORLAGE ARTISTEER 4 EXPORTIEREN  BEI JOOMLA! ......................... 37
17.1
17.2
Artisteer-Vorlage exportieren ............................................................................................................... 37
Vorlage bei Joomla! importieren .......................................................................................................... 37
18 PHOCA DOWNLOAD ....................................................................................... 38
18.1
Komponente herunterladen und installieren ...................................................................................... 38
18.1.1 Phoca-Komponenten herunterladen ..................................................................................... 38
18.1.2 Phoca-Komponenten im Joomla! installieren ....................................................................... 38
18.1.3 Downloads strukturieren ....................................................................................................... 38
18.1.4 Kategorien erfassen.............................................................................................................. 39
18.1.5 Dateien erfassen................................................................................................................... 39
18.1.6 Menü-Eintrag ........................................................................................................................ 40
18.1.7 Darstellungen Downloads einstellen .................................................................................... 40
19 PHOCA GALERIE ............................................................................................. 41
19.1
Phoca Galerie im Internet herunterladen ............................................................................................. 41
19.1.1 Komponente Fotogalerie Zip-Datei: com_phocagallery_v4.0.2.zip Zip-Sprachdatei: deDE.com_phocagallery-j25-j3.zip ........................................................................................ 41
19.1.2 Modul Fotogalerie z.B. auf der Startseite oberhalb eines Beitrag Zip-Datei:
mod_phocagallery_image_v4.0.0.zip Zip-Sprachdatei: de-DE.mod_phocagallery_image.zip 41
19.1.3 Modul Foto-Slideshow z.B. auf der Startseite im Menü- oder Beitragsbereich Zip-Datei:
plg_content_phocagallery_slideshow_v4.0.2.zip Zip-Sprachdatei: deDE.plg_content_phocagalleryslideshow-j25-j3.zip ............................................................. 41
19.2
Phoca Galerie – Komponente/Module hochladen und installieren ................................................... 41
19.3
Kategorien erstellen ............................................................................................................................... 41
19.4
Bilder hochladen .................................................................................................................................... 43
19.4.1 Bilder verkleinern mit TinyPic ............................................................................................... 43
19.4.2 Bildergalerie auf eigenem Rechner bereitstellen .................................................................. 43
19.4.3 Bilderordner mit FileZilla verschieben auf FTP-Server ......................................................... 44
19.4.4 Vorbereitete Bilderordner mit Phoca Gallery hochladen ...................................................... 44
19.4.5 Neuen Menüeintrag im Joomla erstellen .............................................................................. 45
19.4.6 Konfiguration Phoca Gallery ................................................................................................. 45
19.4.7 Konfiguration Bildboxen wenn Name nicht vollständig erscheint ......................................... 45
19.4.8 Konfiguration Bildboxen mit Bildern anstatt Icon .................................................................. 45
20 FILEZILLA PROGRAMM .................................................................................. 49
Seite 3 von 68
20.1
20.2
20.3
FileZilla herunterladen ........................................................................................................................... 49
Servermanager ....................................................................................................................................... 49
Falsch hochgeladene Bilder ................................................................................................................. 49
21 GÄSTEBUCH .................................................................................................... 50
21.1
21.2
21.3
21.4
21.5
Phoca Guestbook im Internet herunterladen ...................................................................................... 50
Phoca Guestbook – Komponente hochladen und installieren .......................................................... 50
Gästebuch eröffnen ............................................................................................................................... 50
Gästebuch konfigurieren ....................................................................................................................... 52
Damit das Gästebuch funktioniert! ...................................................................................................... 54
22 ZUSATZKOMPONENTE FORMULARE ........................................................... 55
22.1
Komponente auf Website hochladen ................................................................................................... 55
22.2
Formular gestalten ................................................................................................................................. 55
22.2.1 Custom HTML ....................................................................................................................... 56
22.2.2 Textbox ................................................................................................................................. 56
22.2.3 Datum ................................................................................................................................... 57
22.2.4 Captcha – Sicherheitscode ................................................................................................... 57
22.2.5 Button Submit – Senden ....................................................................................................... 58
22.2.6 Formular-Optionen ................................................................................................................ 59
22.3
Formular auf Website integrieren ......................................................................................................... 59
22.4
Hinweise zu Formulargestaltung und Optionen ................................................................................. 60
22.4.1 Transparente Hintergrundfarbe bei Formular ....................................................................... 60
22.4.2 Mehrere E-Mail-Adressen als Formularempfänger .............................................................. 60
23 ZUSATZKOMPONENTE TERMINKALENDER GOOGLE................................ 61
23.1
23.2
23.3
23.4
23.5
23.6
23.7
23.8
23.9
23.10
23.11
Google-Konto eröffnen .......................................................................................................................... 61
Kalender öffnen ...................................................................................................................................... 62
Kalender-Einstellungen ......................................................................................................................... 62
Kalenderdetails....................................................................................................................................... 62
Wichtige Kalender-ID ............................................................................................................................. 63
Kalender freigeben ................................................................................................................................. 63
Termine eintragen .................................................................................................................................. 64
Zusatzmodul Google-Kalender bei Joomla! installieren .................................................................... 64
GCalender Details im Joomla erfassen ............................................................................................... 64
GCalender Zeitzone im Joomla! erfassen............................................................................................ 65
GCalender im Joomla!-Hauptmenü erfassen ...................................................................................... 65
24 ZUSATZKOMPONENTE KONTAKTFORMULAR ............................................ 66
25 BACKUP AKEEBA FÜR JOOMLA .................................................................. 67
25.1
25.2
25.3
Komponente herunterladen und installieren ...................................................................................... 67
Lizenzbestimmungen bestätigen .......................................................................................................... 67
Sicherung verwalten  auf eigenem Rechner speichern .................................................................. 67
Seite 4 von 68
Aufbau der Internetseite
Die verschiedenen Bereiche und Komponenten einer Website können individuell und
wunschgemäss dargestellt und positioniert werden. Das ist möglich durch zwei sehr umfangreiche Programme wie z.B. Artisteer 4 für das Layout und Joomla! Version 3 für die verschiedenen Komponenten und den Inhalt mit Menüstruktur.
11 Breadcrumb
Wie kommt man zum gewünschten Ergebnis
und wo muss/kann was bearbeitet/geändert werden?
7 Kopfbereich
Wie soll das Endprodukt aussehen?
> Layout (Gesamtansicht)
> Kopfbereich mit Farben, Bildern und Schriftzügen
> Menü vertikal und/oder horizontal mit Aussehen, Breite, Farbe, Text usw.
> Submenu-Bereich mit Aussehen, Breite, Farbe, Text usw.
> Inhalt mit Überschriften, Text: Stil, Grösse, Farbe usw.
> Bilder: Aussehen mit Rundungen, Rändern usw.
> Fussbereich mit Farben, Bildern, Text und Fussnote
2 Grundfarben
für harmonisches
Aussehen Website
4 Layout
8 Menüs
13 Menüeinträge
12 Inhalt (Beiträge)
1 Hintergrund
Seite 5 von 68
3 Seitenbreite etc.
13 Fussbereich
6 Zellen
1 Vorbereitungen
Je nach Provider sind verschiedene Vorbereitungen notwendig.
1.1 FTP-Programm Filezilla auf eigenen Computer downloaden und installieren und konfigurieren
Siehe unter Punkt 20
1.2 Joomla!-Core downloaden ab Joomla!-Website www. , auspacken und
vorbereiten für Upload via FileZilla auf den Server
1.3 MySQL-Datenbank einrichten bei Provider
Seite 6 von 68
2 Joomla!-Programm
2.1 Installation aufrufen
2.1.1 Konfiguration
 Eigene Internetseite öffnen, z.B. www.kw-software.ch
(Kurs z.B. http://cms.kw-software.ch/kurs01)
 Admin-Benutzername eintippen (oben)
(Kurs z.B. admin)
 Admin-Passwort eintippen
(Kurs z.B. kurs01&1)
 Admin-Passwort bestätigen
 Button «weiter» anklicken
Seite 7 von 68
2.1.2 Datenbank
Daten werden vom Provider vorgegeben oder können ev. selber eingerichtet werden.
 Benutzername eintippen
(Kurs z.B. kwcmssql25)
 Passwort eintippen
(Kurs z.B. kurs01&1)
 Datenbankname eintippen (ev. identisch mit Benutzername wie bei Provider Slynet AG)
(Kurs z.B. kwcmssql25)
 Tabellenpräfix kann, aber muss nicht geändert werden
Änderung sinnvoll, wenn auf dieser Datenbank verschiedenste Daten gespeichert sind,
damit sofort ersichtlich ist, welche für Joomla!-Website sind.
 Button «weiter» anklicken
Seite 8 von 68
2.1.3 Überblick
 Anklicken: keine Beispieldaten
 Bei Überblick:
Konfiguration senden  ja
Passwörter in E-Mail  ja (damit sie per E-Mail diese zugestellt bekommen)
 Button «installieren» anklicken
2.1.4 Installationsverzeichnis löschen
 Installationsverzeichnis (orange)
 löschen
 Button «Administrator»  anmelden
Seite 9 von 68
2.2 Joomla!-Einstellungen
2.2.1 Website Einstellungen
 Auf Konfiguration klicken
 Unter «Site»
> kann der Name
der Website geändert werden
kann
der
>
> kann die Website auf «offline» gestellt
werden, z.B. während Aufbau oder grossen
Änderungen (Bearbeitungen)
2.2.2 Server Einstellungen
An diesen Einstellungen NICHTS ändern!
Seite 10 von 68
2.2.3 Benutzer einrichten
 Auf Menü «Benutzer» klicken
 Kontextmenü geht auf
> auf «Neuer Benutzer» klicken
 alle Formular-Felder ausfüllen
 Ev. zugewiesene Gruppe
ändern z.B.
von Registriert zu
Administrator
Seite 11 von 68
3 Export / Import
3.1 Artisteer - Template exportieren
 Vorlage speichern
 Vorlage exportieren > Joomla-Template
 Kontextmenü «Exportieren» öffnet sich
 Datei-Name eintippen (ohne Sonderzeichen)
 Pfad bestimmen – Speicherort wählen (Ordner)
 Häkchen setzen bei ZIP Archiv
3.2 Joomla! – Template hochladen
 Menü Erweiterungen > Erweiterungen anklicken
 Paketdatei hochladen > auf Button «Durchsuchen» klicken > entsprechende ZIP-Datei
auswählen (nicht artx-Datei!)
 Auf Button «Hochladen & Installieren» klicken
Seite 12 von 68
4 Hintergrund mit Artisteer 4
Im Artisteer-Programm können Einstellungen vielfach über verschiedene Menüpunkte eingestellt werden. Z.B. die Seitenbreite kann unter Layout oder unter Seitenstruktur eingestellt
werden. So ist es auch noch mit anderen Komponenten.
Werden im Artisteer Einstellungen geändert, sind sie sofort sichtbar.
Vorschau Internetseite:
Ganz oben links im Artisteer-Fenster: Datei anklicken  Vorschau im Browser auswählen 
Internet Explorer auswählen  Internetseite mit Vorschau wird geöffnet.
4.1 Hintergrundfarbe Website mit oder ohne Farbverlauf
Menü Hintergrund anklicken
Feld Füllfarbe anklicken > Farbe bestimmen
Feld Farbverlauf anklicken > gewünschtes Feld anklicken
Farbverlaufoptionen anklicken > am rechten Rand werden die gewählten Effekte aufgelistet.
Beim Anklicken der anderen Elemente wie z. B. Füllfarbe öffnet sich das entsprechende Kontextmenü und so kann die Füllfarbe auch hier neu bestimmt werden.
4.2 Hintergrund mit Textur oder Bild (auch aus eigener Datei)
Feld Textur oder Bild anklicken > Textur/Bild wählen
Eventuell Bild aus eigener Datei einfügen
Gewünschte Effekte wählen (z.B. Farbe oder Graustufen)
Bei Optionen erscheint am rechten Rand immer die Auflistung der gesamten Hintergrundoptionen, bei den mittels Anklicken sämtliche Details im Kontextmenü geändert werden können.
4.3 Lichteffekte des Hintergrunds
Feld Lichteffekte anklicken > gewünschtes Design wählen
Auch hier können Daten aus der eigenen Datei geholt werden.
Seite 13 von 68
5 Farben / Fonts definieren mit Artisteer 4
Hier können Grundfarben definiert werden, damit die Website ein harmonisches Aussehen
bekommt.
Aber nicht nur die Farben, sondern auch die Schrift (Stil, Grösse und Typografie)
5.1 Farbdesigns
Menü Farben / Fonts anklicken
Eine Farbe auswählen, oder aber ab eigenem Bild, Logo die Grundfarben bestimmen.
5.2 Farben anpassen
Möchte man eine der Farben anders wählen, können diese hier einzeln angepasst werden.
> Farbe links ändert die Hintergrundfarbe
> Farbe mittig ändert die Menü-Hintergrundfarbe
> Farbe rechts ändert die Schriftfarbe
5.3 Schriftstil, Schriftgrösse und Typografie definieren
Hier wird der Schriftstil definiert (Voreinstellung) z.B. Arial, Tahoma etc.
Ebenso wir die Schriftgrösse der Website definiert (Voreinstellung) z.B. 100%, 120%
Aus wird hier die Typografie eingestellt: Standard, klassisch, einfach, modern etc. (Blocksatz
etc.)
Seite 14 von 68
6 Seitenstruktur bestimmen mit Artisteer 4
Unter dem Menüpunkt Seitenstruktur kann sehr vielen eingestellt/geändert werden:
 Form und Position der Seite
 Breite der ganzen Seite (fixe Pixel oder in %)
 Rand (oberer Rand) der Seite(n)
 Innenrand der ganzen Seite in Pixel (hier rot)
 Radius der Seite
 Füllfarbe von Innenrand / Blockumrandung
 Transparenz von Innenrand / Blockumrandung
 Umrandung (hier grün) der ganzen Seite (Pixelbreite bei weitere Umrandungsstile einstellbar )
 Schatten der ganzen Seite (Abstand, Winkel usw.
Seite 15 von 68
Menü Seitenstruktur anklicken und folgendes einstellen:
6.1 Form und Position der Website
 Die Seite klebt am oberen Bildschirmrand oder hat einen Abstand
 Die Seite ist eckig oder rund
6.2 Breite der Website
 Wie breit soll die Seite sein? Wenn zu breit eingestellt mit zu hoher Pixelzahl, bei kleineren Monitoren ev. nicht alles sichtbar
 Einstellung statt fix in %
6.3 Innenrand der Website
 Innenrand ja oder nein bei ganzer Seite und/oder bei Textblock?
 Füllfarbe der Innenränder (Seite und Blöcke)
 Transparenz der Füllfarbe
6.4 Umrandung der Website
 Mit oder ohne Umrandung
 Füllfarbe der Umrandung
 Effekt der Umrandung (Schatten, Glühen)
Seite 16 von 68
7 Layout (Aufbau/Struktur) der Website mit Artisteer 4
7.1 Design-Layout
7.1.1 Kopfbereich / Header




Mit oder ohne Kopfbereich / Header?
Position des Kopfbereichs
Breite des Kopfbereichs (Innerhalb oder ausserhalb des Blattes
Seitenbreite oder Bildschirmbreite
7.1.2 Menü (horizontales Menü)
 Mit oder ohne Rand und wenn ja wie breit
 Position des Menüs
 Breite des Menüs
7.1.3 Fussbereich / Footer
 Mit oder ohne Rand und wenn ja wie breit
 Position des Fussbereichs (innerhalb des Blattes, Arbeitsblattbreite/Bildschirmhöhe, Seitenbreite/Bildschirmhöe
7.2 Seiten-Layout
 Breite der Seite
 Rand und/oder Innenrand
7.3 Spalten




Anzahl der Spalten
Spaltenbreite
Style der Spalte
Mit oder ohne Rand (mit Abstand zum Kopfbereich oder überlappend mit Kopfbereich)
7.4 Blöcke und Widgets (Komponente in grafischem Fenstersystem)
 Hinzufügen von neuen Blöcken, z.B. Search/Suche, Login, VMenü (vertikales Menü), Archiv etc.
 Grafische Positionierung der einzelnen Blöcke auf der Website z.B. VMenü oben links,
Serch in der Mitte, Login unten
Seite 17 von 68
8 Inhalts-Design mit Artisteer 4
Damit die Website ein einheitliches Aussehen bekommt, soll die Grundeinstellung definiert
werden. Will man später eine Seite, ein Text etc. bewusst anders gestalten, kann man dies
mit dem Joomla!-Editor machen und fast wie bei MS Word das Aussehen bestimmen. Diese
«von Hand» geänderten Einstellungen, werden dann aber bei einer grundsätzlichen Änderung, z.B. Schrift der Website, nicht geändert.
8.1 Blockstil
 Formoptionen wie Form (eckig oder rund), Rand und Textinnenrand können hier eingestellt werden
 Zellen-Rand ja oder nein, wenn ja wie breit
 Zellen-Innenrand ja oder nein, wenn ja wie breit
 Mit oder ohne Zellen-Zwischenraum, wenn mit wie breit der Abstand
 Zellen-Radius
 Mit oder ohne Formumrandung, wenn ja wie breit (Pixel), farbe und Stil (Linie ganz oder
gestrichelt)
8.2 Stil und Font
Font ist die elektronische Form einer Schriftart (Darstellung Zeichensatz auf Monitoren und
Druckern). Es gibt zwei verschiedene Techniken: Pixelfonts (Rasterfonts) oder Vektorfonts.
 Voreinstellung der Überschriften (1,2,3 …..) mit Farbe, Schriftfamilie, Grösse, Stil, Ausrichten, Schatten)
 Voreinstellung Text mit Farbe, Schriftfamilie, Grösse, Stil, Schatten
 Hyperlinks (Link, besuchter Link, Mauscover-Link) mit Farbe, Schriftfamilie, Grösse, Stil,
Unterstreichung, Schatten
 Bilder umranden, ja oder nein, wenn ja Dicke, Stil, Farbe bestimmen
 Tabellen umranden, ja oder nein, wenn ja Dicke, Stil und Farbe bestimmen
 Zitate:
> Inhalt mit Rand, Innenrand bestimmen
> Stil mit Füllung, Umrandung, Aufzählungszeichen bestimmen
> Schrift mit Farbe, Familie, Grösse, Stil, Ausrichtung und Schatten bestimmen
8.3 Absatz





Seitenabstand links und rechts bestimmen
Zeilenabstand
Buchstabenabstand
Aufzählungszeichen Bild, Farbe, Schriftfamilie, Grösse, Stil, Schatten
Absatz linksbündig, mittig, rechtsbündig oder Blocksatz
8.4 Meta-Daten (Daten im Kopfbereich)
8.4.1 Für Suchmaschinen im www
Das Meta-Element wird als leeres Element innerhalb des Head-Elements (Kopfbereich) notiert.
Seite 18 von 68
Metadaten verbessern die Durchsuchbarkeit des Word Wide Web www, beziehungsweise
die Webpräsenz. Suchmaschinen greifen auf diese Daten zu.
Der Text im Textfeld muss aber mit Joomla! geschrieben werden!
 Definition Überschrift
> mit oder ohne Aufzählungszeichen, wenn ja welche Farbe, Sprechblase, Kugel, Quadrat, Stern, Anders, aus eigener Datei usw.
> Text: Farbe, Schriftfamilie, Grösse, Stil, Ausrichtung, Schatten
> Link: Farbe, Schriftfamilie etc.
> Besuchter Link: Farbe, Schriftfamilie etc.
> Mauscover-Link: Farbe, Schriftfamilie etc.
8.4.2 Für E-Mail-Verkehr im www
 Header des Posts
Definition von Aufzählungszeichen, Stil und Metadaten (Stil, Farbe, Breite etc.
 Footer des Posts
> Aufzählungszeichen (Kategorie, Kommentare, Tags)
Seite 19 von 68
9 Zellen im Artisteer 4
z.B. in Feld Fussbereich klicken > Menü Bearbeiten öffnen
9.1 Inhalt-Layout
 Einspaltig
 2,3 oder 4 Spalten
 Zeilen und Spalten > einzelne Zeilen in mehrere Spalten unterteilen
 Tabelle 2,3 oder 4-spaltig
Bei Standard Inhalts-Layout anklicken > Kontextmenü öffnet sich > mit grünem Plus neue
Optionen hinzufügen und dann auswählen > z.B. 2 Zellen im Fussbereich
9.2
9.3 Blockstil
 Blockstil wählen (eckig, rund, mit Trennlinien oder ohne,
mit Abstand oder ohne
 Aktuelle Zeile bearbeiten (Basis oder mit Füllung und Rahmen oder mit Alternierung
 Zellen für alle Seiten definieren mit Rand, Innenrand, Abstand, Radius, Umrandung und Farbe fürs Hervorheben
 Rasterlinien um Zellen ein- oder ausblenden
9.4 Zeilen
 Design bearbeiten mit Füllung, Textur, Umrandung und
Radius
 Leyout festlegen mit Rand, Abstand, und Trenner
 Bearbeiten: Zeilen vor oder danach einfügen mit entsprechendem Layout und Anzahl Zellen
 Spalten der zu bearbeitenden Zeile ändern (weniger oder mehr Zellen)
Seite 20 von 68
10 Kopfbereich der Website
Titel-Layout und Slogan-Layout werden im Artisteer mit Farbe, Grösse und Position bestimmt.
Titel-Text muss im Joomla! erfasst werden (siehe Punkt 10.2).
10.1 Kopfbereich im Artisteer bestimmen
Der eigentliche Text (hier Musterseite für Schulung) muss im Joomla!-Programm eingetippt
werden. Das Aussehen (Stil,Grösse, Typografie etc.) wird mit Artisteer definiert. Dieses Feld
darf hier nicht gelöscht werden.
10.1.1 Layout-Einstellungen
 Layout einstellen (ohne Kopfbereich, ausserhalb oder innerhalb des Blatts.
 Länge bestimmen (Blattbreite, Seitenbreite)
 Höhe Kopfbereich definieren in Pixel
10.1.2 Hintergrund Kopfbereich
 Füllfarbe aus Farbdesign (wie bei Farben Fonts bestimmt) oder zusätzliche Farbe wählen
 Tansparenz bestimmen von keine Transparenz bis 100 %
Effekte wählen wie Radius, Schatten, Textur, Farbverlauf, Effekt (Muster), Maske (Wellenförmig, Gezähnt, Linear, aus Datei etc.)
10.1.3 Hintergrundbilder
 Bild aus eigener Datei wählen (oder Logo etc.)
 Position und Ausrichtung Bild gewünscht positionieren
 Effekte hinzufügen
> Umfärben (Farbton, Umfärben, Grauskala)
> Trübung
10.1.4 Einfügen
 Bilder einfügen (ab Vorlage Artisteer, aus Internet, aus eigener Datei)
 Formen in Kopfbereich hinzufügen und Position bestimmen
10.1.5 Steuerung
 Slogan, Suchen, RSS, Facebook, Twitter
Seite 21 von 68
10.1.6 Diashow
Bei verschiedenen Diashows (z.B. pro Jahreszeit, pro Thema) verschiedene Artisteer-Vorlagen erstellen und abspeichern.
10.1.6.1
Diashow erfassen
Header mit fixen Bestandteilen wie z.B. Logo zuerst definieren.
 Bilder duplizieren:
 auf
klicken  Duplizieren anklicken oder
 rechte Maustaste auf Header  Kontextmenü öffnet sich
 Maus-Over auf Neues Dia  auf Duplizieren klicken
Diesen Vorgang beliebig viele Male wiederholen.
 Bilder aus Datei:
anklicken  Bild z.B. aus Datei einfügen oder
 Bilder ab Internet
 Einzelne Diabilder (Header) verändern, z.B. anderes Bild einfügen
 rechte Maustaste auf Header  Kontextmenü öffnet sich  Diashow-Panel anklicken
 rechts erscheinen die duplizierten Header-Diabilder
 auf ein Bild klicken  ev. bestehendes Bild löschen  neues Bild einfügen  Bild anpassen (verschieben, vergrössern etc.)
Seite 22 von 68
10.1.6.2
Abspielen der Diashow
Im Bereich Diashow auf Abspielen klicken  Vorschau ist ersichtlich im Artisteer.
Im Bereich Diashow auf dem Pfeil nach rechts unten klicken  auf der rechten Seite kann
nun die Geschwindigkeit, die Verzögerung und wiederholen ja/nein eingestellt werden.
10.1.6.3
Motion / Animation der Diashow
Im Bereich Diashow auf Motion klicken  auswählen ob überblenden, senkrecht von oben
oder unten oder horizontal von links oder rechts hineinfahren
10.1.6.4
Navigator
Im Bereich Diashow auf Navigator klicken  bei Bedarf Layout, Design, Effekte oder Aufzählungszeichen ändern.
10.1.7 Flash




Ohne Flash
Speziell > z.B. aufleuchtende Sternchen, wandernde Balken
Natur > z.B. Schneeflocken, fallende Blätter, ziehende Wolken
Flash aus eigener Datei
10.2 Texteingabe für Headline (Titel Website) im Joomla!
 Falls im Artisteer Titel und Slogan gelöscht wurden, erscheinen diese im Joomla-Template
nicht mehr
 Erweiterungen anklicken
 Templates anklicken
 Betreffenden Menüeintrag anklicken
 Optionen wählen
 Headline: Text ins Feld schreiben
 Speichern und Schliessen
Achtung: Wird ein Artisterr-Template unter einem neuen Namen gespeichert und dieses im
Joomla hochgeladen, muss die Headline (Titel der Website) neu eingetippt werden!
Seite 23 von 68
11 Templates verwalten
Alle Templates, die für die Website nicht gebraucht werden, sollten am besten gelöscht / deinstalliert werden.
Vorgegeben sind sicher zwei verschiedene Templates.
Achtung! Administrator-Vorlagen nicht löschen!
 Unter «Erweiterungen» «Verwaltung»  unter «Filter» Typ «Template» wählen
 bei allen zu deinstallierenden Templates ein Häkchen setzen
 auf Button «Deinstallieren» klicken
 unnötige Vorlagen werden gelöscht.
Seite 24 von 68
12 Menüs
12.1 Horizontales Menü
12.1.1 Modul hinzufügen bei Joomla!




Erweiterungen anklicken
Module anklicken
Grünen Button «Neu» anklicken
Modultyp «Menü» wählen
> Titel einfügen (z.B. Horizontales Menü) > ev. Titel anzeigen «verberben»
 Position wählen (z.B. 1 = unter Header)
 Bei Optionen (unter grünem Button) > Untermenüeinträge «Ja» wählen
 Speichern & Schliessen
12.1.2 Menü-Layout im Artisteer bestimmen





Layout-Einstellungen wählen: Länge, Breite (Seite, Blatt) und Rand
Menüstil auswählen
Menübereich in Farbe,Stil etc. bei Aktiv, Passiv und Mauscover definieren
Submenü definieren mit Ebenen, Menübereich, Unterelement Passiv und bei Mauscover
Daten speichern
Seite 25 von 68
12.2 Vertikales Menü
12.2.1 Bearbeitung im Joomla!
 Erweiterungen öffnen  Module anklicken.
 Menü mit dem Titel «Administrationsmenü» öffnen mit Anklicken
 «Erweitert» anklicken
 bei Modulklassensuffix eintippen:
art-vmenu
 Menü-Status mit grünem Häkchen auf
aktiv setzen.
12.2.2 Modulposition wählen
Das Modul art-vmenu kann auf der Website an gewünschter Position platzeiert werden.
Das art-vmenu links ist z.B. Position 7.
Die Website-Positionen werden auf der eigenen Seite ersichtlich, wenn folgender Zusatz
eingetippt wird: /?tp=1
z.B. www.kw-software.ch/?tp=1 (kw-software.ch  durch eigene Adresse ersetzen)
Siehe auch Punkt 14.2
12.2.3 Modulposition eintragen




Erweiterungen öffnen  Module anklicken
Menü mit dem Titel «Administrationsmenü» öffnen mit Anklicken.
Unter Position entsprechende wählen
Speichern und Schliessen
12.2.4 Menü-Layout im Artisteer bestimmen
 Vertikales Menü anklicken
 Layout wählen für den Menü-Bereich, die Hauptelemente und die Unterpositionen.
Seite 26 von 68
12.3 Zusätzliches / Zweites vertikales Menü einfügen
Seite 27 von 68
13 Fussbereich
Seite 28 von 68
14 Steuerung
Seite 29 von 68
15 Breadcrumbs – Modul von Joomla!
Breadcrumbs ist ein Navigationselement, das den Pfad zum aktuellen Element zeigt. Damit
wird die Orientierung innerhalb tief verzweigter Elementbäume verbessert, indem Links zu
vorher besuchten, übergeordneten oder themenverwandten Elementen angeboten werden.
15.1 Breadcrumbs einfügen
 Anmelden als Administrator auf der Website
 Unter Menü Erweiterungen > Module anklicken
 Button «Neu» anklicken
 Modultyp auswählen: Navigationspfad (Breadcrumbs)
Seite 30 von 68
15.2 Position von Breadcrumbs bestimmen
Es stellt sich nun die Frage, welche Position ist auf meiner Website wo?
 Im Joomla unter «System» «Konfigurationen»  Templates auswählen
 Vorschau von Modulpositionen aktivieren mit Klick auf Button «Aktiviert»
 Speichern und Schliessen
 Im Internet Seite öffnen mit ……………………………/?tp=1
z.B. www.kw-software.ch/?tp=1
Ganz oben auf der Seite wäre z.B. Position 30
> Style none outline:
> Style artstyle outline:
 Joomla! > Häkchen setzen
Seite 31 von 68
 Auf Breadcrumbs klicken
 Position ändern/auswählen
Seite 32 von 68
16 Beitrräge erfassen/ändern im Joomla!
16.1 Editor – Bearbeitungsprogramm
Es gibt verschiedene, webbasierende Editoren (auch Joomla!-Editoren) mit denen die
Beiträge für die Website erfasst werden können.
Die Editor-Ansicht im Joomla!-Programm entspricht nicht genau 1:1 der Ansicht auf der
Website. Der Zeilenumbruch wird logischerweise aufgrund der definierten Seitenbreite automatisch angepasst und muss im Beitragstext nicht beachtet werden.
Beiträge können kategorisiert werden, müssen aber nicht. Bei umfangreichen Webseiten
aber sehr zu empfehlen, damit das Filtern/Suchen einzelner Beiträge schneller geht.
16.2 Kategorie neu erstellen




Menü Inhalt anklicken (auf Pfeil rechts)
Kategorie anklicken
Auf grünen Button «Neu» klicken
Kategorie-Details ausfüllen (z.B. analog den Menüpunkten)
> Titel wählen: z.B. Kurse
> Alias ausfüllen: z.B. Kurse (Keine Leerschläge und keine Sonderzeichen) oder
vom Programm selber übernehmen lassen.
> ev. Details verändern
> ev. Beschreibung eintippen
> ev. Beiträge und Bilder zuordnen
> ev. Veröffentlichungsoptionen ändern
> ev. Optionen ändern
> ev. Metadatenoptionen hinzufügen
> ev. Kategorien-Berechtigungen neu einstellen
 Speichern und schliessen
Seite 33 von 68
16.3 Beitrag neu erstellen





Menü Inhalt anklicken
Mauscover auf Beiträge> rechts davon erscheint «Neuer Beitrag» > anklicken, oder
Beiträge anklicken
auf grünen Button «Neu» klicken
Beitragsdetails ausfüllen
> Beitragstitel erfassen
> ev. Kategorie auswählen
> Text erfassen, dann
> z.B. Überschrift markieren
> formatieren mit Überschrift
1,2,3 …
Wählt man Absatz, Überschrift
1,2,3 etc. wird die Formatierung
übernommen, wie im Artisteer
definiert und kann dort für die gesamte Website auch verändert
werden.
16.4 Tabelle in Beitrag einfügen
Achtung:
Der Editor kann nur machen, was HTML unterstützt (nicht MS Word!)
HTML erlaubt keine Tabulatoren.
Änderungen im HTML-Code bleiben drin (sofort geändert!) und können nicht automatisch
wieder rückgängig gemacht werden.
Tabellen-Darstellung im Backend ist nicht identisch mit dem Frontend (Ansicht Webseite)
und kann nur im HTML-Code geändert werden.
 Auf «Inhalt» «Neuer Beitrag» klicken  Text eintippen
 Auf Symbol
«Tabelle» klicken  Kontextmenü
öffnet sich  Spalten, Zeilen, Beschriftung bestimmen
 Einfügen
 Speichern
Seite 34 von 68
17 Menüeinträge erfassen/ändrn im Joomla!
Jeder Beitrag muss in einem Menüeintrag erfasst sein.
17.1 Menü-Gliederung
Die Einträge können als «Baum» gegliedert werden > Ordner > übergeordneter Ordner >
übergeordneter Ordner. Ideal sind 2 Ebebeb, wenn nötig auch mal 3, aber mehr sind nicht
mehr so übersichtlich.
Im Beispiel unten wird mit 2 Ebenen gearbeitet. Dem Beitrag «Verwendete Programme» sind
die beiden Beiträge «Artisteer 4» und «Joomla Version 3» untergeordnet, oder umgekehrt:
Der Beitrag «Verwendete Programme» ist dem Beitrag «Artisteer 4» übergeordnet.
17.2 Main Menü – Hauptmenü
Klickt man auf Main Menu werden sämtliche Menüeinträge und deren Positionen aufgezeigt.
Die Startseite kann definiert und jederzeit geändert werden. So kann jeder beliebige Menüeintrag zur Startseite bestimmt werden: Gewünschten Beitrag bei (Startseite) mit Stern
markieren.
Seite 35 von 68
17.3 Änderung Menü-Reihenfolge
 Wenn nicht alle Menüeinträge ersichtlich sind, von
«20» auf «alle» ändern.
 Den Beitrag, den man verschieben will (mit untergeordneten Beiträgen) bei den drei Punkten
anklicken
> es erscheint das Kreuz mit den vier
Pfeilen
> mittels «Drag & Drop» an die gewünschte Stelle ziehen.
17.4 Status Menüeintrag ändern
 Mit dem grünen Häkchen ist der Menüeintrag aktiv
 Mit Klick auf Häkchen kann er deaktiviert
werden
> Kreuz im roten Punkt
Seite 36 von 68
18 Vorlage Artisteer 4 exportieren  bei Joomla!
18.1 Artisteer-Vorlage exportieren
 Im Artisteer-Programm geöffnete Datei exportieren:
> auf Exportieren klicken
 Kontextmenü Exportieren öffnet sich
 Dateiname eintippen
 Pfad bestimmen / Ordner auswählen
 Wichtig: ZIP Archiv ankreuzen
 Unter Optionen > Fussnote ev. Häkchen entfernen, damit CMS Artisteer nicht erscheint auf
der Website.
 Falls Datei schon vorhanden,
> ev. überschreiben > mit OK bestätigen oder
> abbrechen > neuen Dateinamen wählen, damit die alte Version ev. noch weiter verwendet werden kann.
18.2 Vorlage bei Joomla! importieren
 Bei Joomla! auf Erweiterungen klicken
 Im weissen Feld auf Erweiterungen
klicken
 Paketdatei durchsuchen
 Zip-Datei suchen, auf Button «Öffnen» klicken
 Hochladen & Installieren
 Wenn erfolgreich hochgeladen, erschein ein grüner Balken mit entsprechender Nachricht.
Seite 37 von 68
19 Phoca Download
Download von:
 PDF-Dateien
 Musik-Dateien
 Video-Dateien
KEINE FOTOS!
Dateien
 An einen Beitrag heften
 Als Link
19.1 Komponente herunterladen und installieren
19.1.1 Phoca-Komponenten herunterladen
Unter www.phoca.cz/download
 Komponente (Phoca Download Component)
herunterladen (z.B. com_phocadownload_v3.0.4.zip für Joomla V3)  abspeichern
 Sprache (Phoca Download Languages)
herunterladen und abspeichern
19.1.2 Phoca-Komponenten im Joomla! installieren




Joomla als Administrator öffnen
Unter Erweiterungen  Erweiterungen
Durchsuchen anklicken  zuerst abgespeicherte Phoca-Komponente auswählen
Hochladen und Installieren
 Danach unter Erweiterungen  Erweiterungen
 Abgespeicherte Phoca-Sprache auswählen
 Hochladen und Installieren
19.1.3 Downloads strukturieren
Es ist zu empfehlen, verschiedene Hauptkategorien und Unterkategorien anzulegen. Z.B.
o Download
 Software
 Handbücher
Seite 38 von 68
19.1.4 Kategorien erfassen








Kategorien öffnen
Titel z.B. «Download» eintippen
Speichern und Schliessen oder Speichern und Neu
Titel z.B. «Software» eintippen und übergeordnete Kategorie «Download» auswählen
Speichern und Schliessen oder Speichern und Neu
Titel z.B. «Handbücher» eintippen und übergeordnete Kategorie «Download»
Speicrn und Schliessen
19.1.5 Dateien erfassen




Dateien öffnen
Titel z.B. «Joomla und Artisteer» eintippen und Kategorie «Handbücher auswählen
Dateiname auf Button «Dateiname auswählen» klicken  Kontextmenü öffnet sich
 Ev. Verzeichnis erstellen z.B. Handbuch (keine Umlaute ä ö ü)
Seite 39 von 68





Auf Verzeichnis klicken
Hochladen  mit Durchsuchen Datei ab Explorer auswählen
Hochladen starten
Auf hochgeladenen Dateinnamen klicken  Dateiname erscheint
Speichern und Schliessen
19.1.6 Menü-Eintrag
 Menü  MainMenu (Kopfmenü) auswählen
 Grünen Button «Neu» anklicken
 Menüeintrag auswählen  Kontextmenü öffnet sich  auswählen «PhocaDownload»
«Liste der Dateien»
 Kategorieauswahl auswählen: z.B. Download
 Menütitel eintippen, z.B. Download
19.1.7 Darstellungen Downloads einstellen
 System  Konfiguration öffnen
 Phoca Downloads auswählen
 Unter Anzeige eventuell gewisse Einstellungen ändern ein/-ausblenden.
Seite 40 von 68
20 Phoca Galerie
20.1 Phoca Galerie im Internet herunterladen
Unter www.phoca.cz/phocagallery folgende Dateien herunterladen und auf eigenem Rechner
speichern:
20.1.1 Komponente Fotogalerie
Zip-Datei: com_phocagallery_v4.0.2.zip
Zip-Sprachdatei: de-DE.com_phocagallery-j25-j3.zip
20.1.2 Modul Fotogalerie z.B. auf der Startseite oberhalb eines Beitrag
Zip-Datei: mod_phocagallery_image_v4.0.0.zip
Zip-Sprachdatei: de-DE.mod_phocagallery_image.zip
20.1.3 Modul Foto-Slideshow z.B. auf der Startseite im Menü- oder Beitragsbereich
Zip-Datei: plg_content_phocagallery_slideshow_v4.0.2.zip (Plugin)
Zip-Sprachdatei: de-DE.plg_content_phocagalleryslideshow-j25-j3.zip
20.2 Phoca Galerie – Komponente/Module hochladen und installieren
 Joomla-Website als Administrator öffnen
 Unter «Erweiterungen» «Erweiterungen» die unter Punkt 19.1 heruntergeladenen Paketdateien hochladen und installieren:
1. Komponente
2. Sprachdatei
 Durchsuchen: Auf eigenem Rechner Zip-Datei auswählen
 Hochladen und installieren
20.3 Kategorien erstellen
Es empfiehlt sich, verschiedene Kategorien/Ordner und übergeordnete Kategorien
zu erstellen.
z.B.
Übergeordnete Kategorie: Fotos 2013
Kategorie: Schneesporttag Januar
Kategorie: Velotour Mai
Kategorie: Herbstmarsch September
Etc.
Seite 41 von 68





Unter «Komponenten» auf «Phoca Gallery» klicken
«Kategorien» auswählen
Auf grünen Button «Neu» klicken
Titel eintippen und ev. übergeordnete Kategorie auswählen
Speichern
Seite 42 von 68
20.4 Bilder hochladen
Bilder fürs Web MÜSSEN verkleinert werden. Zu grosse Bilddateien benötigen viel Zeit zum
hochladen und im Frontend werden zu grosse Bilder sehr verzögert angezeigt.
20.4.1 Bilder verkleinern mit TinyPic
Programm im Internet gratis herunterladen
Unter Dateiauswahl den Bilderordner öffnen  alle Bilder auswählen
Bildergrösse empfohlen:
1024 x 768 bildschirmfüllend
Speichern empfhohlen:
In Unterordner K1024
20.4.2 Bildergalerie auf eigenem Rechner bereitstellen
 Ordner Bilder Website erstellen mit
Ordner Fotos 2013
Unterordner Schneesporttag 13
Unterordner Fasnacht 13
Unterordner Sommerschlusshöck
Ordner Fotos 2014
Unterordner Neujahrsapéro
Unterordner Schneesporttag 14
Unterordner Osterturnen
Seite 43 von 68
20.4.3 Bilderordner mit FileZilla verschieben auf FTP-Server

ZileZilla öffnen
 Server: images  phocagallery anklicken
 Ganzen Ordner «Fotos» auf den FTP-Server verschieben mit Drag & Drop
20.4.4 Vorbereitete Bilderordner mit Phoca Gallery hochladen
 Komponente «Phoca Gallery» öffnen
 Bilder auswählen
 Auf Button «Mehrfaches hinzufügen» klicken
 Titel «Fotos» eintippen
 Bei Dateiname «Fotos» das Häkchen
setzen
 Bei Fehlermeldung: Aktualisieren
Seite 44 von 68
20.4.5 Neuen Menüeintrag im Joomla erstellen
 Unter Mainmenü/Hauptmenü  neuer Menüeintrag erstellen
 Menütitel eintippen
 Menüeintragstyp auswählen  Phoca Gallery  Liste der Bilder
 Kategorie auswählen  Fotos
20.4.6 Konfiguration Phoca Gallery
Die Bildboxen können verschieden dargestellt werden.
Will man z.B. einen schwarzen Boxenhintergrund, wählt man z.B. Jak Lightbox
 Unter System Konfiguration  Phoca
Gallery auswählen
 Detail Ansicht anklicken
 Detail Fenster: Jak Lightbox auswählen
 Weiter unten unter Jak Lightbox einstellen
- mit oder ohne Titel
- mit oder ohne Bemerkungen
- Höhe verstellen bei langen Bemerkungen
20.4.7 Konfiguration Bildboxen wenn Name nicht vollständig erscheint
 Unter System Konfiguration  Phoca Gallery auswählen
 Kategorien Ansicht anklicken (ganz links)
 Runter scrollen bis Anzahl von Buchstaben im Namen (Kategoriename) z.B. auf 15 Zeichen erhöhen
20.4.8 Konfiguration Bildboxen mit Bildern anstatt Icon
 Unter System Konfiguration  Phoca Gallery auswählen
 Kategorie Ansicht anklicken (2. Von links)
 Runter scrollen bis Bild anstelle des Verzeichnis Icons anzeigen  auf «ja» wechseln
Seite 45 von 68
20.5 Modul Fotogalerie
z.B. auf Startseite oberhalb/unterhalb eines Beitrages
 Modul und Sprachmodul (siehe Punkt 19.1.2) hochladen und installieren
Unter «Erweiterungen»  «Erweiterungen» Erweiterungspaketdateien hochladen und installieren
20.5.1 Neues Phoca Gallery Image Module
 Unter «Erweiterungen» «Module» bei «Phoca Gallery Image Module» Häkchen setzten
 Status aktivieren
 Modul öffnen: Auf «Phoca Gallery Image Module» klicken
 Titel bestimmen z.B. Neuste Highlights in Bildern (PGIM)
 Wählen ob Titel Anzeigen oder Verbergen (wenn verbergen beschriften mit Phoca Gallery
Image Module = betreffendes Modul leicht erkennbar)
 Kategorien wählen / Select Category  mit Klick ins leere Feld  Phoca-Bilderordner
werden im Kontextmenü angezeigt  auswählen (ev. mehrmals wiederholen für 3 verschiedene Ordner)
 Limit Count ev. erhöhen z.B. auf 3, damit 3 Ordner angezeigt werden
 Detail Windos: z.B. JAK Lightbox wählen
 Kategorie-Titel der Bilderordner:
Seite 46 von 68
20.6 Modul Foto-Slideshow
Titelanzeige, aber keine Textzugabe möglich.
 Modul und Sprachmodul (siehe Punkt 19.1.3) hochladen und installieren
Unter «Erweiterungen»  «Erweiterungen» Erweiterungspaketdateien hochladen und installieren
20.6.1 Neue Phoca Gallery Slideshow erstellen
 Unter «Erweiterungen» «Module» bei «Phoca Gallery Slideshow» Häkchen setzten
 Status aktivieren
 Modul öffnen: Auf «Phoca Gallery Slideshow» klicken
 Titel bestimmen (z.B. Turnshow Slideshow)  Speichern & Schliessen
 Unter «Phoca Gallery» «Kategorien»  ID merken der Fotos, die für die Slideshow vorgesehen sind (z.B. 13 für Fotos 2012 Turnshow)
 Kategorie-ID im Modul Phoca Gallery Slideshow eintippen
 Position wählen (wie beschrieben unter Punkt 15.2) z.B. Position 26 = oberhalb Footer
 Slideshow Parameters: Es gibt verschiedene
z.B. Ticker-Modus (z.B. Breite 4 Bilder, die von rechts nach links über den Bildschirm
laufen mit verstellbarer Geschwindigkeit (speed 6000, speed 10000 = langsamer, speed
4000 = schneller)
 Code Ticker-Modus bei Slideshow Parameters einfügen:
minSlides: 4, maxSlides: 4, slideWidth: 170, slideMargin: 10, ticker: true, speed: 6000
Anzahl Bilder, Breite, Geschwindigkeit nach Wunsch ändern.
- Weitere Parameter-Beispiele unter:
http://translate.google.ch/translate?hl=de&sl=en&u=http://bxslider.com/&prev=/seSeite 47 von 68
arch%3Fq%3Dbxslider%2Bjoomla%2BV3%2Bparameters%26biw%3D1755%26bih%3D964
- JS-Code für bxSlideshow unter:
http://translate.googleusercontent.com/translate_c?depth=1&hl=de&prev=/search%3Fq%3Dslideshow%2Bparameters%2Bbx%2Bslider%26biw%3D1755%26bih%3D936&rurl=translate.google.ch&sl=en&u=http://bxslider.com/docs/jquery.bxslider.html&usg=ALkJrhjYyRrHL8Y2qsk41vXJdoS5D9Pl-Q
 Wählen ob Titel anzeigen oder verbergen
 Wählen Veröffentlichung starten, Veröffentlichung beenden
 Menüzuweisung anklicken  gewünschtes auswählen, z.B. auf allen Seiten
 Speichern / Speichern & Schliessen
Slide-Show im Ticker-Modus
Seite 48 von 68
21 FileZilla Programm
ZileZille ist ein Programm, um Daten auf einem FTP-Server herumzuschieben.
FTP heisst FileTransferProtokoll und ist ein Dienst wie das www.
FTP ist ein sehr altes Programm-Prinzip mit neuer Oberfläche, bei dem auch z.B. mit Drag &
Drop gearbeitet werden kann.
21.1 FileZilla herunterladen
Das Programm kann z.B. bei der Slynet AG heruntergeladen werden.
 Internetseite www.slynet.ch öffnen
 Downloads anklicken
 FTPSoftware FileZilla anklicken  ausfüheen  Installation oder Upgrade.
21.2 Servermanager





Neuer Server  Name eintippen
Allgemein: Server = cms (z.B. cms.kw-software.ch)
Verbindungsart  normal
Benutzer  vom Provider (Slynet) vorgegeben
Passwort  vom Provider (Slynet) vorgegeben
21.3 Falsch hochgeladene Bilder
Wichtig: Falsch hochgeladene Bilder müssen zuerst im Joomla! gelöscht werden!
Seite 49 von 68
22 Gästebuch
22.1 Phoca Guestbook im Internet herunterladen
 Im Internet unter www.phoca.cz/phocaguestbook folgende Dateien herunterladen:
 Komponente (com_phocaguestbook_v3.0.0.zip)
 Sprachdatei (de-DE.com_phocaquestbook-j25-j3.zip)
 Speichern auf eigenem Rechner
22.2 Phoca Guestbook – Komponente hochladen und installieren
 Joomla-Website als Administrator öffnen
 Unter «Erweiterungen» «Erweiterungen» die unter Punkt 21.1 heruntergeladenen Paketdateien hochladen und installieren:
1. Komponente
2. Sprachdatei
 Durchsuchen: Auf eigenem Rechner Zip-Datei auswählen
 Hochladen und installieren
22.3 Gästebuch eröffnen
 Unter «Komponenten» «Phoca Guestbook» anklicken
 «Gästebücher» anklicken
 Grünen Button «Neu» anklicken
Seite 50 von 68
 Titel eintippen und unter Einträge «neue Einstellung» auf «Erlaubt» setzten
 Unter «Menüs» «MainMenü/Hauptmenü» auf Menüeintrag «Gästebuch» klicken
 Unter Details den Menüeintragstyp auswählen: auf blauen Button «Auswählen» klicken 
Phoca Guestbook anklicken  Gästebuch anklicken
Seite 51 von 68
22.4 Gästebuch konfigurieren
 Unter «System» «Konfiguration» auswählen und auf «Phoca Guestbook» klicken
 Unter «Grundlegendes» unten stehende Einstellungen vornehmen
Seite 52 von 68
 Unter «Eintrag» unten stehende Einstellungen übernehmen
 Unter «Captcha» Sicherheitscode aktivieren (zur Vermeidung von Spam)
z.B. Mathematisches Captcha
Seite 53 von 68
22.5 Damit das Gästebuch funktioniert!
Es kann sein, dass man als Gast im Frontend noch keine Einträge machen kann. Dann ist
folgendes zu machen:

Unter «Erweiterungen» auf Module klicken

Anmeldung aktivieren

Auf der Website im Frontend auf «Eingabeformular» klicken

Einen Beitrag erfassen

Als Administrator im Backend «Anmeldung» wieder deaktivieren  jetzt müsste es
funktionieren!
Seite 54 von 68
23 Zusatzkomponente Formulare
Komponente zum Herunterladen (Backend in Englisch) im Internet unter: web-dorado.com.
speichern auf dem Computer
23.1 Komponente auf Website hochladen
 Website als Administrator öffnen
 unter «Erweiterungen» Paketdatei hochladen und installieren (mit «Durchsuchen» entsprechende Datei anklicken und mit Button «Hochladen & Installieren»
23.2 Formular gestalten
 unter «Komponenten» den «Form Maker» öffnen
 am besten alle vorgegebenen Formulare löschen
 unter «Forms» grünen Button «+Neu» anklicken
 Formulartitel eingeben und
 blauen Button
anklicken
Seite 55 von 68
 folgende Maske öffnet sich:
Links: Kacheln mit verschiedenen Möglichkeiten
Rechts: Optionen wie
Position, Speichern, Löschen
23.2.1 Custom HTML
Hier kann der Administrator einen beliebigen Text eintippen, z.B.
 Beim Anklicken von «Custom HTML» öffnet sich das Kontextmenü mit dem für die Website gewählten Editor. Damit kann gearbeitet werden wie bei den Inhaltsbeiträgen mit Überschriften, Absätzen etc.
.
 für eingegebenen Text ev. Position wählen und speichern mit

23.2.2 Textbox
Hier werden sämtliche möglichen
Formularfelder bestimmt, z.B.
- Einfacher Text
- Passwort
- Name
- Adresse
- E-Mail
- Nummer
- Telefon
- Verstecktes Feld (Hidden Field) z.B. für Zusatzinformationen (auf der Website nicht sichtbar, aber beim Formularversand per E-Mail)
Seite 56 von 68
23.2.2.1
Name
 Feldtyp wählen
 linke Seite herunter scrollen für weitere wichtige Angaben
 bestimmen, ob Titel «Name» links oder oberhalb des Formularfeldes stehen soll
 bestimmen, ob Pflichteingabefeld oder nicht, wenn ja, bei Required ein Häkchen setzen
 auf der rechten Seite den englischen Text mit deutschem überschreiben  z.B. «First»
anklicken  neuen Text «Vorname» eingeben
 Feld speichern mit
23.2.2.2
Adresse
 Vorgehen wie bei Name
 auf der linken Seite bei Field label ev. deutschen Text eintippen
 auf der rechten Seite die Felder deutsch beschriften
 auf der linken Seite bei Disable Field(s) nicht gewünschte mit Häkchen ausblenden
23.2.3 Datum
 Feldtyp «Time and Date» wählen
 weiteres Vorgen wie bei Name
23.2.4 Captcha – Sicherheitscode
Um Spams zu vermeiden, ist die Eingabe von einem Sicherheitscode
empfehlenswert.
Einfügen wie andere Felder.
Seite 57 von 68
23.2.5 Button Submit – Senden
Nicht vergessen! Ohne diesen Button können die Kunden das Formular
nicht verschicken.
Einfügen wie andere Felder.
So kann das z.B. aussehen. Mit diesen Knöpfen
kann das einzelne Feld gelöscht, verschoben, geändert, editiert usw. werden. Bei Mausover
erscheinen die verschiedenen Befehle.
Seite 58 von 68
23.2.6 Formular-Optionen

23.2.6.1
anklicken
General Options
Hier kann unter «Theme» aus Aussehen des Formulars bestimmt werden. Mit Preview öffnet
sich das Vorschau-Fenster.
23.2.6.2
Email Options
Achtung:
Beim Formular kreieren muss ein Feld Typ E-mail erfasst werden, damit danach die Optionen erfasst werden können.
Hier wird bestimmt, an welche E-Mail-Adressen das Formular übermittelt werden soll und mit
welchem Begleittext.
 E-Mail anklicken, Texte eingeben, bei «Send to» Häkchen setzen bei E-Mail
 Speichern oder Speichern und Schliessen
 Wenn Formular und Optionen definiert: Form Maker Speichern und Schliessen
23.3 Formular auf Website integrieren
 unter «Menüs» Hauptmenü (Main Menu) öffnen
 neuer Menüeintrag
 Menütitel eingeben (z.B. Computerkurs Anmeldung)
Seite 59 von 68
 Menüeintragstyp  auswählen: Form Maker / Form
 bei Select a Form im Kontextmenü das entsprechende Formular (z.B. Kursanmeldung)
auswählen
 Speichern
23.4 Hinweise zu Formulargestaltung und Optionen
23.4.1 Transparente Hintergrundfarbe bei Formular
Wenn der Beitragsbereich der Webseite farbig ist, wünscht der Administrator eventuell einen
transparenten Formularhintergrund.
Wenn das gewählte «Theme» das nicht vorsieht, kann die Farbe im cms-Code gelöscht werden.
 Komponente «Form Maker» öffnen
 «Themes» auswählen
 dem Formular zugewiesenes Theme z.B. «01 blue» anklicken
 zuoberst (neben Datei) «Bearbeiten» auswählen  auf dieser Seite suchen anklicken
 Im Suchfeld «wdform_page» eintippen  gesuchte Stelle wird gelb markiert
 nächste Zeile mit background (z.B. background #FFFFFF;) löschen mit DELETE
23.4.2 Mehrere E-Mail-Adressen als Formularempfänger
Mehrere Adressen können eingegeben werden, getrennt mit einem Komma (mit oder ohne
Leerschlag)
Seite 60 von 68
24 Zusatzkomponente Terminkalender Google
Um den Terminkalender zu führen, braucht es ein Google-Konto mit einer E-Mail-Adresse
 neue von Google z.B. [email protected] oder
 bestehende E-Mail-Adresse
24.1 Google-Konto eröffnen
Internet öffnen  www.google.ch
 auf das Punktequadrat klicken
 auf GMail klicken
 oben rechts bei Anmelden «Konto erstellen»
 alle Felder ausfüllen  weiter bis Konto eröffnet
Seite 61 von 68
24.2 Kalender öffnen
 oben rechts auf das Punktefeld klicken
 auf Kalender klicken  Willkommen bei ….
 auf «weiter» klicken
 bei «Pop-up» Häkchen entfernen
 Fenster schliessen
24.3 Kalender-Einstellungen
 oben rechts bei Zahnrädchen-Sympol Kalender-Einstellungen öffnen
 Unter «Allgemein» Ansichten definieren wie Datumsformat, Zeitformat, Wochenbeginn
etc.
 speichern
24.4 Kalenderdetails
 oben rechts bei Zahnrädchen-Sympol
Kalender-Einstellungen öffnen
 Unter «Kalender» den neuen Kalender
öffnen mit Anklicken
Seite 62 von 68
 Die Details werden im neuen Fenster angezeigt
 Kalendername ändern wenn gewünscht
24.5 Wichtige Kalender-ID
Die Kalenderadresse wird für das Einrichten auf der Joomla!-Website benötigt.
24.6 Kalender freigeben
Der Kalender MUSS freigegeben werden unter «Kalender freigeben»
 Häkchen setzen bei «Diesen Kalender öffentlich machen»
 speichern
Seite 63 von 68
24.7 Termine eintragen
Im Kalender können nun die verschiedenen
Termine eingetragen und bearbeitet werden.
Die Terminfarben werden im Joomla! eingestellt.
Anzeigen als und Vertraulichkeit belassen
wie vorgegeben.
24.8 Zusatzmodul Google-Kalender bei Joomla! installieren
 zip-Paketdatei im Internet herunterladen (Joomla GCalender)
 Website als Administrator öffnen
 Unter «Erweiterungen»  Installieren  Erweiterungspaketdatei hochladen & installieren
 Durchsuchen nach abgespeicherter Datei (z.B. GCalender_3_:1_5.zip)
 auf «Hochladen & Installieren» klicken
24.9 GCalender Details im Joomla erfassen
 Unter «Komponenten»« GCalender»
anklicken
 «Kalender» anklicken
 Button «Neu» anklicken
 Name eintippen
 Kalender ID eintippen (hineinkopieren)
wie unter Punkt 19.1.4.1
 Farbe wählen
Seite 64 von 68
24.10 GCalender Zeitzone im Joomla! erfassen
 oben rechts «Optionen» anklicken
 Zeitzone wählen (GMT +01.00 Zürich)
24.11 GCalender im Joomla!-Hauptmenü erfassen
 Unter «Menüs» Hauptmenü öffnen
 auf Button «Neu» klicken»
 Menütitel eintippen
 Menüeintragstyp wählen: GCalender/Google Ansicht
 Optionen anklicken
 Kalender auswählen (es können auch mehrere Google-Kalender geführt werden)
 Standard Ansicht (weiter unten) auf «Agenda» setzten.
Muss bei jeder Menüeintrags-Mutation wiederholt werden, da immer wieder auf Monat gesetzt wird.
 Hintergrund Farbe FFFFFF = weiss (RGB-Farbcode) bei Kalenderüberschrift
Seite 65 von 68
25 Zusatzkomponente Kontaktformular
Seite 66 von 68
26 Backup Akeeba für Joomla
Mit diesem Tool können Homepage und Datenbank abgespeichert werden auf dem Server
beim Provider und wenn gewünscht auch auf der eigenen Festplatte.
26.1 Komponente herunterladen und installieren
Die Freeversion kann unter http://akeeba-backup.de heruntergeladen (Download) werden.




Download der Komponente
Speichern der Komponenten auf der eigenen Festplatte
Joomla-Website als Administrator öffnen
Unter «Erweiterungen» «Erweiterungen» auf Button Durchsuchen klicken
 zuerst Datei: com.akeeba-3.10.2-core.zip «Hochladen und Installieren»
 danach Sprachdatei: akeebabackup-de-DE-j25.zip «Hochladen und Installieren»
26.2 Lizenzbestimmungen bestätigen
 Unter «Komponenten» auf Akkeeba Backup klicken
 Bei «Mandatory information» in alle 3 Felder Häkchen setzen
 Auf Button «Einstellungen übernehmen» klicken
 Systemtest wird gestartet  wenn Systemtest abgeschlossen
 Auf Button «Jetzt sichern» klicken  Start neue Sicherung  auf Button «Jetzt sichern»
klicken  warten, falls fehlgeschlagen  erneut sichern
 Wenn erfolgreich abgeschlossen  auf Button «Sicherung verwalten» klicken.
26.3 Sicherung verwalten  auf eigenem Rechner speichern
Hier ist ersichtlich, wann die letzte Sicherung erstellt wurde etc.
 Auf Feld «
klicken
 Datei herunterladen mit Klick auf «OK»
 Speichern mit «speichern unter» auf der gewünschten Festplatte
Seite 67 von 68
Seite 68 von 68

Website mit Joomla und Artisteer - KW

Transcrição

Documentos relacionados

Hauptuntersuchung

Der MSC Porz hat in diesem Jahr auf dem Plakat die Kölner

Mehrsprachigkeit – Allgemein –

HU/AU-Service

Installation von Joomla auf einem Server: Hochladen

Nachlese 14. TT Gerümpelturnier

Preise / Kosten Mauerwerksinjektion Kellerabdichtungen von innen

Starten Sie die Installation wie in der

Wichtige Infos zum lo-net² (https://www.lo

Versand DTAUS – Datei im Online-Banking