Handbuch ALGO CMS Responsive Website Ihre Daten

Handbuch ALGO CMS
Responsive Website
Ihre Daten:
Website:
Benutzer:
Passwort:
Lieber Kunde!
Das vorliegende CMS-Handbuch erklärt die Grundfunktionen des Bearbeitungssystems Ihrer Website.
Wir wünschen Ihnen viel Spaß und Erfolg beim Aktualisieren der Inhalte. Bei Problemen und Fragen
stehen wir Ihnen natürlich gerne unter [email protected] oder 06458-20242 zur Verfügung.
Ihr Algo Team
ALGO CMS Handbuch für Responsive Websites
2
Inhaltsverzeichnis
1.
Einloggen in das CMS-System ........................................................................................ 4
2.
Der Administrationsbereich ............................................................................................ 4
2.1.
Reiter „Website“ ........................................................................................................... 5
2.2.
Dokumente / Seiten bearbeiten .................................................................................... 6
2.2.1.
Inhalte Reiter „Allgemein“ ........................................................................................ 8
2.2.2.
Reiter „Seiteneinstellungen“ ....................................................................................10
2.2.3.
Reiter „Template-Variablen“ ....................................................................................11
2.2.4.
Reiter „Inhalt“ ........................................................................................................11
2.2.4.1.
Element „Textfeld“ ..........................................................................................15
2.2.4.2.
Element „Text mit Bild“ ...................................................................................16
2.2.4.3.
Element „Tabelle“ ...........................................................................................18
2.2.4.4.
Element „Bilder in einer Reihe“ ........................................................................19
2.2.4.5.
Element „Bildergalerie“ ....................................................................................20
2.2.4.6.
Element „Button“ ............................................................................................21
2.2.4.7.
Element „Spalten“ ...........................................................................................22
2.2.4.8.
Element „Video“ ..............................................................................................23
2.2.4.9.
Element „Pauschale“ .......................................................................................23
2.2.4.10.
Element “HTML / Widget” ................................................................................23
2.2.4.11.
Element “Container” ........................................................................................24
2.3.
Dokumente / Seiten erstellen ......................................................................................24
2.5.
Dokumente / Seiten verschieben ................................................................................26
2.6.
Dokumente duplizieren ...............................................................................................27
2.7.
Dokument Voransicht .................................................................................................28
3.
Bilder einfügen ............................................................................................................28
3.1.
Bilder in der Galerie hochladen .....................................................................................29
3.2.
Bildgrößen im Nachhinein bearbeiten ............................................................................31
4.
Links setzen ................................................................................................................34
5.
Ankerlinks einfügen/erstellen .......................................................................................35
6.
PDF verlinken ..............................................................................................................35
7.
Doc Manager ...............................................................................................................37
8.
FAQs ...........................................................................................................................39
9.
Glossar ........................................................................................................................40
ALGO CMS Handbuch für Responsive Websites
3
1.
Einloggen in das CMS-System
Abbildung 1: Einloggen ins CMS-System
In den Administrationsbereich Ihrer Website gelangen Sie, indem Sie an Ihre Domain die Endung
„/manager“ anhängen (z.B. www.meineseite.at/manager). Hier geben Sie Ihre Zugangsdaten ein
und klicken auf „Anmelden“.
Wir bitten Sie, alle Arbeiten im CMS mit dem Internetbrowser „Firefox“ vorzunehmen, da das System
auf diesen Browser optimiert ist. Die Website selbst läuft natürlich auf allen Browsern einwandfrei.
2.
Der Administrationsbereich
Im Administrationsbereich Ihrer Website können Sie verschiedene Einstellungen vornehmen und die
Inhalte Ihrer Website pflegen und verwalten. Im unteren Bild (Abbildung 2) sehen Sie aktuell die
Startseite des Administrationsbereichs.
Abbildung 2: Der Administrationsbereich
ALGO CMS Handbuch für Responsive Websites
4
2.1. Reiter „Website“
Unter diesem Reiter können Sie alle wichtigen Änderungen im Contentbereich Ihrer Website
vornehmen.
Abbildung 3: Administrationsbereich – Reiter „Website“
Start:
Dies ist die Startseite Ihres Administrationsbereichs.
Vorschau:
Durch einen Klick auf „Vorschau“ öffnet sich ein neues Fenster und
Ihre Website wird angezeigt.
Cache leeren:
Manchmal werden die Änderungen, die Sie an der Website
vorgenommen haben, erst dann angezeigt, wenn Sie den Cache des
CMS-Systems leeren, was Sie durch einen Klick auf diesen Button
vornehmen können.
Suchen:
Hier können Sie die Website nach dem gewünschten Text/Inhalt
durchsuchen.
Ressource hinzufügen:
Durch den Klick auf „Ressource hinzufügen“ wird eine neue Seite
hinzugefügt. Diese können Sie danach inhaltlich befüllen und
veröffentlichen.
Web-Link hinzufügen:
Hier können Sie eine Seite auf Ihrer Website hinzufügen, die direkt auf
eine andere URL (externe Seite) oder ein pdf verlinkt. Die Seite kann
dann über die Navigation (Menü) Ihrer Website aufgerufen werden.
Im Menübaum (Abbildung 4) werden die einzelnen Ordner und Seiten angezeigt. Die Ordner sind
ALGO CMS Handbuch für Responsive Websites
5
meist die Hauptmenüpunkte Ihrer Website, in denen sich dann die weiteren Unterseiten befinden.
Durch Klick auf das grüne Pfeilsymbol öffnet
Mit dem Symbol
hinzugefügt.
bzw. schließt
sich die gesamte Ordnerstruktur.
wird eine neue Seite (Ressource) hinzugefügt, mit
aktualisiert den Menübaum (die Seite), mit
Seite) sortieren.
wird ein neuer Weblink
kann man die Darstellung des Menübaums (der
Abbildung 4: Menübaum der Website
2.2. Dokumente / Seiten bearbeiten
Um ein Dokument bearbeiten zu können, klicken Sie im Menübaum auf die entsprechende Seite.
Dadurch öffnet sich auf der rechten Seite ein Infofeld, das Ihnen einige Vorabinformationen über die
entsprechende Seite gibt. Durch Klick oben rechts auf den Button „bearbeiten“ gelangen Sie in den
Bearbeitungsmodus der Seite.
ALGO CMS Handbuch für Responsive Websites
6
Abbildung 5: Überblick/Vorinformation einer Ressource/Seite
Der Bearbeitungsmodus besteht aus mehreren Reitern, welche im Folgenden erklärt werden.
ALGO CMS Handbuch für Responsive Websites
7
2.2.1. Inhalte Reiter „Allgemein“
Abbildung 6: Bearbeitungsmodus einer Seite – Reiter „Allgemein“
Titel:
Hier können Sie den Titel der Seite bearbeiten, der im CMS-Menübaum im CMS
angezeigt wird.
Langer Titel:
Der lange Titel wird in Ihrem Browser in der Titelleiste sowie meist in den
Suchsnippets der Suchmaschinen angezeigt. Bitte beachten Sie, dass dieser
Titel nicht zu lang sein sollte (mit Seitentitel gesamt max. 70 Zeichen).
Beschreibung:
Wird meist in den Suchsnippets der Suchmaschinen angezeigt und als Text in
der Sitemap verwendet. Bitte nicht mehr als 156 Zeichen verwenden.
Ressource-Alias:
Der Alias wird als direkter .html-Name verwendet und immer der Domain hinten
angefügt. D.h. wenn die Domain „www.meineseite.at“ heißt, dann wird diese
hier
angegebene
alias
(z.B.
„seite1“)
hinten
hinzugefügt
(z.B.
www.meineseite.at/seite1.html). Achtung: Hier dürfen keine Sonderzeichen,
Umlaute, Großbuchstaben und Leerzeichen verwendet werden! Wörter können
mit Bindestrich getrennt werden.
Template:
Ein Template definiert die Vorlage einer Seite (das Aussehen). Das heißt, ein
Template ist der Rahmen, der den Inhaltsbereich umschließt. Meist gibt es ein
Template für die Startseite und ein weiteres für alle Contentseiten.
Menütitel:
Der hier eingegebene Text wird in der Navigation Ihrer Website angezeigt.
Im Menü anzeigen: Wenn das Häkchen hier gesetzt ist, wird die Seite in der Navigation angezeigt.
Wenn die Seite nicht in der Navigation angezeigt werden sollte, sondern z.B.
nur über einen Link erreichbar ist, dann muss das Häkchen hier entfernt
werden. (z.B. wird die Seite „Impressum“ meist nicht in der Navigation
angezeigt)
ALGO CMS Handbuch für Responsive Websites
8
Sprache der Seite: Hier wird die Sprache der Seite eingegeben, bei deutschen Seiten z.B. „de“
Sprache alias:
Dieses Feld wird nur für Websites benötigt, die einen dynamischen
Sprachwechsel haben. Hier ist dann auf der deutschen und zugehörigen
englischen Seite jeweils 1:1 derselbe Begriff einzugeben, was die beiden Seiten
als zusammengehörend definiert. Ist kein dynamischer Sprachwechsel
beauftragt, wird dieses Feld leer gelassen.
Saisonzeit:
Stellt die Saisonzeit der jeweiligen Seite ein. Seiten zum Thema Winter sollten
hier z.B. mit „Winter“ versehen werden. Der Saisonmodus der gesamten Seite
wird
meist
im
Ordner
„de“
unter
der
Saisonzeit
eingestellt.
Achtung: Es muss nicht jede einzelne Seite eingestellt werden. Es genügt, wenn
z.B. der übergeordnete Ordner und / oder der „de“-Hauptordner (oder eine
entsprechende andere Sprache) der jeweiligen Saison zugeteilt ist. Nur bei
„Ausnahmen“ von der Einstellung der Ordner können einzelne Seite individuell
definiert werden.
Kategorie:
Ist nur bei speziellen Programmierungen der Seite notwendig, sollte also in 99
% der Fälle nicht beachtet werden.
ALGO CMS Handbuch für Responsive Websites
9
2.2.2. Reiter „Seiteneinstellungen“
Abbildung 7: Reiter „Seiteneinstellungen“
Wenn bei „Veröffentlicht“ ein Haken gesetzt wird, ist das Dokument veröffentlich und wird im Menü
angezeigt.
Unter „Ressourcentyp“ ist der Typ der Seite zu wählen, entweder „Website“ oder „Weblink“
(Erklärung Weblink siehe Punkt 2.1.)
Wenn das Häkchen bei „Container“ gesetzt ist, heißt das, dass diese Seite eine oder mehrere
Unterseiten beinhalten darf. Dieses Häkchen wird auch automatisch beim Anlegen einer Hierarchie
erstellt.
„Inhaltstyp“: Hier ist der Inhalt der Seite zu definieren, die Vorsteinstellung „text/html“ ist hier die
richtige. Im 2. Inhaltstyp-Fenster können Sie einstellen, ob es ein Browser-Fenster oder ein pdfAnhang ist. Auch hier stimmt die Voreinstellung „Browser-Fenster“ in 99,99 % der Fälle.
Wenn das Häkchen bei „Richtext“ aktiviert ist, wird dieses Dokument als benutzerfreundliche
Voransicht des Textes angezeigt. Wird das Kästchen deaktiviert, erhält man die Seite mit dem HTMLCode zur Bearbeitung.
Die „Besucherprotokollierung“ regelt, ob das System die Zugriffe auf die jeweilige CMS-Seite
protokollieren darf. Das Feld „Durchsuchbar“ regelt, ob die CMS-Seite mit der Suchfunktion
durchsuchbar sein darf (auch wichtig für die XML-Sitemap).
ALGO CMS Handbuch für Responsive Websites
10
„Cache aktiv“ regelt, ob auf der Seite spezielle Programmierungen verwendet werden dürfen,
„Cache leeren“ regelt die entsprechende CMS-Funktion. Die Voreinstellungen (bis auf
„Veröffentlicht“) dürfen hier nicht geändert werden.
2.2.3. Reiter „Template-Variablen“
Manche Websites haben spezielle Programmierungen, die Template-Variablen benötigen. Dieser
Bereich ist also immer individuell und kann nicht im Allgemeinen erklärt werden.
Sie müssen/sollten hier also auch keine Änderungen vornehmen.
Abbildung 8: Reiter „Template-Variablen“
2.2.4. Reiter „Inhalt“
Dies ist der wichtigste Bereich für Sie, denn hier können Sie den Text und die Bilder der Website
bearbeiten. Die Seiten setzen sich aus unterschiedlichen Elementen zusammen. Das Responsive Web
ordnet dann die unterschiedlichen Elemente alle nacheinander und stellt sie auf der Website dar. Je
nachdem, welches Element hier im CMS an oberer Stelle steht, wird auch als erstes auf der Seite
eingelesen. Wir raten Ihnen, immer alle Elemente zu schließen, um eine bessere Übersicht der Seite
zu bekommen.
ALGO CMS Handbuch für Responsive Websites
11
Abbildung 9: Inhaltsbereich einer Seite
Wenn Sie ein bestehendes Element an eine andere Stelle verschieben möchten, können Sie dieses in
der orangen Überschrift anklicken und mit gedrückter linker Maustaste an die gewünschte Stelle
ziehen bzw. können Sie dieses Element durch Drücken der Pfeile auf der linken Seite (siehe
Abbildung 11. (6) und (7)) um eine Position weiter nach oben oder unten verschieben.
Ein neues Element kann man durch Klick auf das
Symbol hinzufügen.
Folgende Elemente stehen zur Auswahl:
ALGO CMS Handbuch für Responsive Websites
12
Abbildung 10: Neues Element anlegen
Erläuterung des grundlegenden Aufbaus der einzelnen Elemente-Felder:
4.
2.
1.
5.
3.
6.
7.
8.
9.
10.
13.
12.
Abbildung 11: Grundlegender Aufbau der Elemente-Felder
11.
1.
Responsive-Seiten sind intern in mehrere Spalten (meist 12 Spalten) aufgeteilt, die sich wie ein
unsichtbares Raster über die Seiten legen. Standardmäßig gehen alle Elemente über die gesamte
Seitenbreite. Wenn man jedoch 2 unterschiedliche Elemente nebeneinander stellen möchte, dann
benötigt man dazu z.B. 2 Elemente mit jeweils 6 Spalten.
2.
Jedes Element (außer Überschriften-Elemente) kann eine eigene Überschrift haben, die hier
eingetragen wird.
ALGO CMS Handbuch für Responsive Websites
13
3.
In diesem Feld werden spezielle Designmerkmale angegeben, die im Design definiert worden
sind. Hervorgehobene Boxen z.B. gibt man hier mit „highlight“ an.
4.
Hier ist einzustellen, welcher Überschriftstyp die jeweilige Überschrift aufweisen soll. Das
Aussehen der jeweiligen Überschriftstypen wird im Design festgelegt. Titel 1 ist für die
Hauptüberschriften vergeben, also ist hier z.B. zwischen Titel 2 und Titel 3 auszuwählen.
5.
Mit dem Pfeilsymbol kann man die Detailinfos der Elemente ausblenden bzw. wieder einblenden
lassen.
6.
Mit dem Pfeil nach oben reiht man das jeweilige Element um ein Element nach oben.
7.
Mit dem Pfeil nach unten wird das Element um ein Element nach unten verschoben.
8.
Mit dem Papierkorb wird das jeweilige Element gelöscht (und kann auch nicht wieder hergestellt
werden).
9.
Mit dem Plus-Symbol wird ein weiteres Element hinzugefügt.
10. Mit dem Kopie-Symbol wird ein weiteres, gleiches Element hinzugefügt.
11. In diesem Feld wird der jeweilige Inhalt (Text) des Elements eingegeben.
12. Die Klappmenüs betreffen die Darstellung der Elemente auf dem Smartphone oder Ihrem mobilen
Endgerät. „Klappmenü zulassen“ bedeutet, dass man dem jeweiligen Inhalt des Elements erlaubt,
sich als Klappmenü darzustellen, das man öffnen/schließen kann. „Klappmenü geschlossen“
bedeutet, dass das jeweilige Element als geschlossenes Klappmenü darstellt, wenn man es auf
der Seite aufruft. Vorraussetzung für die Darstellung eines Klappmenüs ist jedoch, dass eine
Überschrift (Titel) vergeben worden ist.
Abbildung 12: Darstellung von geschlossenen Klappmenüs auf der Website
ALGO CMS Handbuch für Responsive Websites
14
Abbildung 13: 1. Element ist ein geschlossenes Klappmenü, 2. Element ist ein offenes Klappmenü
In den nachfolgenden Abschnitten werden die einzelnen Elemente erklärt.
2.2.4.1.
Element „Textfeld“
Soll ein Absatz nur aus Text bestehen, ist dieses Element zu wählen. Das Bearbeitungsfeld weist
Möglichkeiten auf, die größtenteils aus Word bekannt sind. Die anderen Symbole werden hier kurz
erklärt:
ALGO CMS Handbuch für Responsive Websites
15
1.
2.
3.
4.
5.
Abbildung 14: Element „Textfeld“
1.
Wenn Sie einen Text aus einem Textverarbeitungsprogramm (z.B. Word) übernehmen, fügen Sie
diesen bitte über diesen Button ein, und nicht direkt in das Bearbeitungsfeld (Wichtig, da
ansonsten der Quellcode der Seite verändert wird und möglicherweise Fehler auftreten!)
2.
Mit dem Omega-Symbol können Sie Sonderzeichen einfügen.
3.
Mit dem Kettensymbol können Links eingefügt werden. Eine Beschreibung zu Links finden Sie in
Punkt 4)
4.
Das Anker-Symbol fügt einen Anker auf der Seite ein (eine Beschreibung zu Ankern finden Sie in
Punkt 5)
5.
Mit dem HTML-Button gelangen Sie in die Quellcodeansicht. Wir empfehlen Ihnen jedoch, diese
Funktion nicht zu verwenden, um die Darstellung der Seite nicht versehentlich zu ändern.
2.2.4.2.
Element „Text mit Bild“
Wenn ein Absatz aus einem Text und einem Bild bestehen sollte, dann ist dieses Element zu wählen.
Zusätzlich zu den oben schon beschriebenen Textfunktionen weist das Element folgende Inhalte auf:
ALGO CMS Handbuch für Responsive Websites
16
1.
2.
3.
5.
4.
Abbildung 15: Element „Text mit Bild“
6.
1.
Mit Aktivierung dieses Buttons wird das Bild links neben dem Text angeordnet.
2.
Mit Aktivierung dieses Buttons wird das Bild rechts neben dem Text angeordnet.
3.
Hier ist der Speicherort des Bildes auf dem Server eingegeben (meist „assets/images/bildnameklein.jpg). Wenn es zwei Bildgrößen gibt („bildname-gross.jpg“ und „bildname–klein.jpg“), ist hier
der „bildname-klein.jpg“ zu wählen.
4.
Hier ist der Alternativ-Text des Bildes einzugeben. Dies ist wichtig, sollte das Bild aus
irgendeinem Grund nicht geladen werden können, zudem liest Google diesen Alternativ-Text aus.
Der Text soll das Bildmotiv gut beschreiben und wenn möglich sogar Keywords enthalten (z.B.
Skifahren in Eben).
5.
Wenn Sie auf den Button „Browse“ klicken, gelangen Sie in die Übersicht der Bildern, die auf
Ihrer Webseite bereits eingebunden sind bzw. am Server gespeichert sind.
6.
Wenn der HS-Button (Highslide) aktiviert ist, kann das entsprechende Bild auf der Website
großgeklickt werden. Hierfür müssen beide Bildgrößen auf dem Server vorhanden sein „bildnamegross.jpg“ und „bildname-klein.jpg“ (wenn Sie ein neues Bild hochladen, werden diese beiden
benötigten Variaten automatisch angelegt). Das System verknüpft die beiden Bilder anhand des
identischen Bildnamens automatisch miteinander.
ALGO CMS Handbuch für Responsive Websites
17
2.2.4.3.
Element „Tabelle“
Abbildung 16: Element „Tabelle“
Tabellen werden über das aus Word bekannte
Symbol eingefügt. Eine Tabelle im Responsive CMS
bedeutet, dass die Spalten in der mobilen Version (Smartphone) automatisch untereinander
angeordnet werden (siehe Abbildung 18), und nicht nebeneinander wie auf der Desktop Version
(siehe Abbildung 17).
Abbildung 17: Beispiel einer Tabellenansicht in der Desktop-Version
ALGO CMS Handbuch für Responsive Websites
18
Abbildung 18: Beispiel einer Tabellenansicht auf dem Smartphone
2.2.4.4.
Element „Bilder in einer Reihe“
Dieses Element fügt mehrere Bilder nebeneinander in einer Reihe (also eine Art „Bilderzeile“) ein.
Hier sind die jeweiligen Bilder in den unterschiedlichen „Image“-Reitern einzugeben, jeweils wieder
mit Speicherort, Alternativ-Text und Highslide-Funktion (Großklick-Funktion). Optional ist auch noch
eine Überschrift („Titel“) für diesen Artikel und die Formatierung („Element extra class“) anzugeben.
ALGO CMS Handbuch für Responsive Websites
19
Abbildung 19: Element „Bilder in einer Reihe“
2.2.4.5.
Element „Bildergalerie“
Abbildung 20: Element „Bildergalerie“
Dieses Element ist nur verwendbar, wenn es extra designed/programmiert worden ist. Die Bilder für
die Bildergalerie werden in Modul „Gallery“ (siehe Punkt 3.1.) hochgeladen und dann hier eingefügt.
ALGO CMS Handbuch für Responsive Websites
20
Element “Überschrift”
Abbildung 21: Element „Überschrift“
Normalerweise besteht eine Seite aus einer Hauptüberschrift (Titel 1), manchmal noch aus einer 2.
Unterüberschrift (Titel 2) und aus dem restlichen Inhalt (Texte oder Bilder). Dieses Element ist
demzufolge für die beiden Seitenüberschriften (Titel 1 und Titel 2) zu wählen. Wie die jeweiligen
Überschriften (Titel 1, Titel 2, Titel 3…) aussehen, ist für jede Website einmalig im Design festgelegt.
2.2.4.6.
Element „Button“
Mit dem Element „Button“ kann man einen Button mit Textinhalt einfügen. Dies eignet sich
beispielsweise gut für „Jetzt anfragen“-Buttons. Das Aussehen muss jedoch im Design vordefiniert
sein.
1.
2.
6.
3.
4.
7.
5.
Abbildung 22: Element „Button“
1.
Hier kann man, wie oben schon erwähnt, speziell im Design definierte Stile (z.B. „highlight“ für
hervorgehobene Elemente) angeben.
2.
Der Button-Text erscheint im Button selbst (z.B. „Jetzt anfragen“).
3.
Hier kann man eine spezielle URL angeben (externe URL mit http://www.externeurl.at oder
interne URL mit der entsprechenden Seiten-ID [~1~].
ALGO CMS Handbuch für Responsive Websites
21
4.
In der Linkliste kann man die entsprechende interne Seite auswählen, wenn man die Seiten-ID
nicht weiß.
5.
Dieser Punkt definiert die Position des Buttons auf der Seite.
6.
Unter dem Titel gibt man den Link-Titel an, der von den Suchmaschinen ausgelesen wird. Verlinkt
man z.B. auf die Anfrageseite, könnte man hier „Unverbindliche Anfrage senden“ angeben.
7.
Wenn auf einen speziellen Anker verlinkt werden sollte, ist dieser hier einzugeben (mehr zu
Ankerlinks in Punkt 5).
2.2.4.7.
Element „Spalten“
Sind im Design Spalten-Elemente definiert worden, so können hier die Inhalte entsprechend eingefügt
werden. Spalten ordnen die Inhalte nebeneinander an (Spalte 1 links, Spalte 2 mittig, Spalte 3 rechts).
Dieses Element ist wie das Text-Element zu befüllen.
1.
2.
3.
Abbildung 23: Element „Spalten“
ALGO CMS Handbuch für Responsive Websites
22
2.2.4.8.
Element „Video“
Abbildung 24: Element „Video“
Mit dem Element „Video“ können Videos ganz einfach eingefügt werden, indem man unter „VideoLink“ die entsprechende URL des Videos einbindet und dann noch die Größe des Videos eingibt.
2.2.4.9.
Element „Pauschale“
Dieses Element ist derzeit noch nicht in Verwendung (kann nur bei speziellen Programmierungen für
Pauschalen verwendet werden).
2.2.4.10. Element “HTML / Widget”
Das Element “HTML / Widget” ist zu verwenden, wenn direkt ein HTML Code einzufügen ist. Dies ist
bei Anwendungen der Fall, die nur in dieser Ansicht funktionieren (z.B. Google Maps, Iframes etc.).
Auch hier sind wieder die Überschrift, Titeltyp, spezielle Formatierung und die Darstellung des
Klappmenüs auszuwählen. Der HTML-Code ist in das Feld 1. einzufügen.
Des Weiteren ist hier zu beachten, dass man definieren kann, ob das jeweilige Element (z.B. der
jeweilige iFrame) auf allen Geräten oder nur auf bestimmten Geräten angezeigt werden soll (2.)
Manche Elemente funktionieren z.B. auf dem Smartphone nicht, dann wären diese hier
auszuschließen.
ALGO CMS Handbuch für Responsive Websites
23
1.
2.
Abbildung 25: Element „HTML / Widget“
2.2.4.11. Element “Container”
Ein Container ist ein Element, das zur Gruppierung von Elementen verwendet werden kann. Ein
Container kann demzufolge ein oder mehrere Elemente beinhalten, und sagt der Seite somit, dass
diese Elemente zusammengehören. Ein Container ist z.B. sinnvoll, wenn eine „hervorgehoben“
Formatierung (Element extra class) über mehrere Elemente hinweg (ohne Unterbrechnung nach dem
jeweiligen Element) gemacht werden soll. Ein weiteres Beispiel wäre, wenn man mehrere Elemente
auf einem mobilen Endgerät unter einem Klappmenü darstellen möchte. Dann kann man die
„Klappmenü“-Funktion bei den einzelnen Elementen vernachlässigen – jedoch beim übergeordneten
Container anhacken.
Abbildung 26: Element „Container“
2.3. Dokumente / Seiten erstellen
ALGO CMS Handbuch für Responsive Websites
24
Um eine neue Seite zu erstellen, wählen Sie den entsprechenden Ordner aus, in dem Sie die Seite
hinzufügen wollen, und klicken Sie dort mit der rechten Maustaste drauf. Es öffnet sich eine kleine
Legende. Hier wählen Sie bitte „Ressource hier erstellen“ aus.
Die Seite ist dann wie in den vorhergegangenen Punkten erläutert zu befüllen.
Abbildung 27: Legende
2.4. Dokumente / Seiten löschen
Das Löschen erfolgt entweder durch einen Klick auf das Dokument, wodurch auf der rechten Seite
das bereits bekannte Infofenster erscheint. Hier gibt es einen Button „Löschen“, welcher dann nach
erneuter Bestätigung des gewünschten Vorgangs die Seite löscht. Die Seite erscheint dann immer
noch im Menübaum und kann auch wiederhergestellt werden. Einzig der Administrator kann
Dokumente endgültig löschen. (Bitte aber dennoch Dokumente nicht zwischenzeitlich löschen, nur um
sie nicht anzuzeigen. Wenn eine Seite im Web nicht angezeigt werden sollte, dann bitte die Funktion
„Veröffentlicht“ im Reiter „Seiteneinstellungen“ benutzen.)
ALGO CMS Handbuch für Responsive Websites
25
Abbildung 28: „Dokument löschen“-Button
2.5. Dokumente / Seiten verschieben
Dokumente können einfach in einen anderen Ordner verschoben werden, indem der Button
„Verschieben“ bei der entsprechenden Seite gewählt wird. Danach fragt das System, an welchen Ort
die Ressource verschoben werden sollte, hier auf den entsprechenden Container klicken. Auf der
rechten Seite wird die ID der von Ihnen ausgewählten Seite angezeigt und der Button „Speichern“
kann gedrückt werden.
Abbildung 29: „Dokument verschieben“-Button
ALGO CMS Handbuch für Responsive Websites
26
Abbildung 30: Ressource verschieben
2.6. Dokumente duplizieren
Über die Funktion „Dokumente duplizieren“ können Seiten einfach kopiert werden.
Abbildung 31: „Dokumente duplizieren“-Button
Es wird eine Seite angelegt, die ident mit dem Original ist, jedoch ist die Seitenkopie erst auf „nicht
veröffentlicht“ gesetzt.
ALGO CMS Handbuch für Responsive Websites
27
2.7. Dokument Voransicht
Abbildung 32: „Dokument-Vorschau“-Button
Man kann eine Seite über den Button „Vorschau“ öffnen. Die Vorschaufunktion zeigt nur gespeicherte
Seitenversionen an.
3.
Bilder einfügen
Das Einfügen von Bildern erfolgt in 2 - 3 Schritten:
1.
2.
3.
Hochladen der Bilder in der Galerie
Eventuelles Nachbearbeiten der Bilder
Einfügen der Bilder in der Contentseite
ALGO CMS Handbuch für Responsive Websites
28
3.1. Bilder in der Galerie hochladen
1. Module
2. Gallery
3. DateiManager
Abbildung 33: Modul Bildergalerie „Gallery“
Die Content-Bilder für die Seite werden alle über das Modul Bildergalerie eingefügt, welches über den
Reiter „Module“ (1) und „Galerien“ (2) erreichbar ist. Unter „Dateimanager“ (3) wird das
Bilderverzeichnis angezeigt.
In der Symbolleiste gibt es viele Funktionen, so kann man z.B. ein Bild verschieben, kopieren etc.
Fährt man mit der Maus über ein Symbol, wird der entsprechende Befehl als Infofeld jeweils
vorangezeigt. Nachstehend werden die wichtigsten Funktionen dargestellt:
Neue Bilder
hochladen
neues Verzeichnis
erstellen
Abbildung 34: Symbolleiste in der Bildergalerie
ALGO CMS Handbuch für Responsive Websites
Die ausgewählte
Datei umbenennen
Das ausgewählte Bild in die
Zwischenablage kopieren,
ausschneiden, einfügen bzw.
löschen
Das ausgewählt Bild
duplizieren
29
Will man nun ein Bild hochladen, wählt man zuerst das Verzeichnis aus, in welches das Bild
reingeladen werden soll, und dann kann das Hochladen mit Klick auf das
Diskettensymbol
beginnen. Das Hochladen funktioniert via Drag and Drop, oder man klickt auf den Button „Dateien
zum Upload auswählen“, der es ermöglicht, Bilder vom PC hochzuladen.
Abbildung 35: Bilder hochladen
Es können auch mehrere Bilder auf einmal hochgeladen werden, jedoch dürfen 20 MB nicht
überschritten werden. Bitte achten Sie darauf, dass Sie Bilder vor dem Hochladen schon auf eine
vernünftige Größe reduzieren (72 dpi, max. 1 – 2 MB). Die Bilder werden dann im eingestellten
Format hochgeladen, und zwar 1 x in Originalgröße mit der normalen Dateibezeichnung
„bildname.jpg“ (falls gewünscht – siehe Punkt „Einstellungen) und jeweils in den beiden
vorgegebenen Größen mit der Dateiendung „bildname–gross.jpg“ und „bildname-klein.jpg“. Dies dient
dazu, dass die Bilder dann in weiterer Folge zum Großklicken funktionieren, diese Großklickfunktion
wird automatisch erstellt. Bei den Dateibezeichnungen ist darauf zu achten, dass nur Kleinschreibung
und KEINE Sonderzeichen, Umlaute oder Leerzeichen verwendet werden!
Hinweis: Ist eine Bildergalerie designed/programmiert worden, die über das Element „Bildergalerie“
(siehe Punkt 2.2.4.5.) eingefügt wird, dann sind die Bilder im Unterordner „gallery“ hochzuladen, nicht
im Überordner „images“.
Unter dem Reiter „Einstellungen“ können die Größen eingestellt werden, hier sind die richtigen
Standardgrößen für die Contentbilder schon voreingestellt. Wenn hier eine Höhe und eine Breite des
Bildes eingestellt ist, und das Seitenverhältnis des hochzuladenden Bildes nicht mit diesem
Seitenverhältnis übereinstimmt, wird das Bild abgeschnitten. Wenn man in der Höhe „0“ eingibt, wird
das hochzuladende Bild in der Breite komprimiert und in der Höhe proportional dargestellt.
ALGO CMS Handbuch für Responsive Websites
30
Abbildung 36: Bildeinstellungen beim Hochladen
3.2.
Bildgrößen im Nachhinein bearbeiten
Die Größe des Bildes kann im Nachhinein auch noch bearbeitet werden, indem man das zu
bearbeitende Bild auswählt und auf die rechte Maustaste klickt. Es öffnet sich ein Menü.
Bilder, die schon auf der Webseite eingesetzt sind, bitte NICHT mehr im Nachhinein bearbeiten.
Abbildung 37: Legende in der Bildergalerie
Mit dem Befehl „Resize & Rotate“ gelangt man in einen Bildbearbeitungsmodus.
ALGO CMS Handbuch für Responsive Websites
31
Abbildung 38: Bildbearbeitungsmodus
Mit „Resize“ kann man die Größe des Bildes als Ganzes verändern, mit „Crop“ einen Ausschnitt des
Bildes auswählen und mit „Rotate“ das Bild drehen. Bilder, die schon auf der Webseite eingesetzt
sind, bitte NICHT mehr im Nachhinein bearbeiten.
ALGO CMS Handbuch für Responsive Websites
32
3.3. Einfügen der Bilder in der Contentseite
Um ein Bild im jeweiligen Element („Text mit Bild“ oder „Bilder in einer Reihe“) einzufügen, öffnet man
die Bildergalerie durch Klick auf den Button „Browse“ (1.), wo man das entsprechende Bild mit der
Endung „-klein.jpg“ auswählt. Mit Aktivieren des HS-Kästchens (2.) wird es ermöglicht das Bild groß zu
klicken.
1.
2.
Abbildung 39: Bilder in Contentseite einfügen
Achtung: In dieser Ansicht kann man keine neuen Bilder hochladen, dies muss über das Modul
„Gallery“ erfolgen!
Abbildung 40: Bilder am Server
ALGO CMS Handbuch für Responsive Websites
33
4.
Links setzen
Ein wichtiger Bestandteil einer Website sind Verlinkungen. Hier wird Ihnen erklärt wie Sie diese in Ihr
Dokument einsetzen können.
Markieren Sie im Textfeld des jeweiligen Elements einen Text, der verlinkt werden soll. Danach klicken
Sie oben in der Toolbar auf den Button
Fenster.
„Link einfügen“. Nach dem Klick öffnet sich ein neues
Abbildung 41: Link setzen
Hier ist nur der Reiter „General“ relevant. Unter dem Punkt „Link URL“ wird der Link eingetragen.
Das heißt, Sie legen fest, wohin der Link zeigt. Wenn Sie auf eine Seite verweisen wollen, die
irgendwo im Web liegt, beispielsweise Google, tragen Sie die komplette URL hier ein. Bsp.:
http://www.google.de.
Wenn Sie allerdings innerhalb Ihrer Website verweisen wollen, lassen Sie dieses Feld leer und gehen
zum nächsten Punkt „Link List“. Hier können Sie eine Seite Ihrer Website auswählen. Alternativ
können Sie auch die entsprechende Seiten-ID mit eckigen Klammern und Welle einfügen, z.B. [~11~]
Ein weiterer wichtiger Punkt ist das „Target“. Meist bleibt hier „Open in This Window/Frame“
stehen, da dann der Link im selben Fenster aufgeht. Wenn Sie aber auf eine externe Seite verweisen,
möchten Sie in der Regel nicht, dass Ihre Seite geschlossen sondern ein neues Fenster geöffnet wird.
Das erreichen Sie, indem Sie das Ziel auf „Open in New Window _blank“ stellen.
Unter „Title“ wird der Link mit einem Titel versehen, dieser wird im Browser angezeigt, wenn man mit
der Maus über den Link fährt. Dann noch ein Klick auf „Update“ und Ihr Link ist erstellt. Danach die
Seite noch speichern.
ALGO CMS Handbuch für Responsive Websites
34
5.
Ankerlinks einfügen/erstellen
Ein Anker (Sprungmarke) besteht aus einem Link und einem Ankerpunkt. Der Link für einen Anker
wird gleich erstellt wie ein normaler Link (siehe Punkt 4), jedoch wird unter dem Feld „Link URL“
hinten ein Rautezeichen # und der Name des Ankers hinzugefügt, z.B. #ostern. Die vollständige
Adresszeile lautet dann beispielsweise [~18~]#ostern
Abbildung 42: Ankerlinks setzen
Um dann den Anker auf der Zielseite einzufügen, den Cursor einfach auf der gewünschten Stelle
platzieren und dann auf das Symbol
„Insert/Edit Anchor“ in der Toolbar klicken. Nach dem Klick
geht ein neues Fenster auf. Hier ist der Name des zuvor erstellten Links anzugeben z.B. ostern (ohne
Rautezeichen!). Danach noch ein Klick auf „Insert“ und Ihr Anker ist erstellt.
Der Anker muss bei der Quell– und bei der Zielseite ident benannt werden! Hier ist auch eine
internettaugliche Bezeichnung zu wählen, d.h. Kleinschreibung, keine Leerzeichen, keine Umlaute etc.
6.
PDF verlinken
Um ein pdf verlinken zu können, muss es zuerst auf den Server hochgeladen werden. Dies erfolgt
über den „Datei-Manager“. Der Datei-Manager ist im Reiter „Elemente“ zu finden. Klickt man dort hin,
öffnet sich eine Ansicht, die die Ordnerstruktur am Server widerspiegelt. Bitte hier in keinem Ordner
etwas ändern und auch nichts löschen, diese Daten können nicht wiederhergestellt werden!
Hier ist einzig der Ordner „pdf“ auszuwählen, indem man 1 x darauf klickt.
ALGO CMS Handbuch für Responsive Websites
35
1.
2.
3.
Abbildung 43: Datei-Manager
Es öffnet sich der Ordner „pdf“, je nachdem, welche Dateien sich hier schon befinden, sieht die
Ansicht dann ähnlich wie folgt aus:
Abbildung 44: Datei-Manager Dateiupload
Durch Klick auf den Button „Durchsuchen“ können Sie dann die jeweilige pdf-Datei von Ihrem PC aus
hochladen. Bitte achten Sie auch hier darauf, eine „internettaugliche“ Dateibezeichnung zu
verwenden, d.h. nur Kleinbuchstaben, keine Umlaute, keine Sonderzeichen, keine Leerzeichen.
Nun gehen Sie in der jeweiligen Contentseite auf die Stelle, wo Sie das pdf einfügen möchten.
Markieren Sie den Text, und klicken Sie auf das Kettensymbol. Es öffnet sich die bereits bekannte
Ansicht. Danach geben Sie bei „Link URL“ den Speicherort am Server und den Dateinamen ein, in den
meisten Fällen wird dies wie folgt lauten „pdf/dateiname.pdf“. Anschließend definieren Sie noch, dass
sich das pdf als eigenes Fenster öffnen sollte, indem Sie bei „Target“ „Open in New Window (_blank)“
ALGO CMS Handbuch für Responsive Websites
36
eingeben. Dann noch einen Titel eingeben (z.B. „Hotelprospekt als pdf ansehen“, auf „Insert“ klicken
- und fertig!
Abbildung 45: pdf-Link einfügen
7.
Doc Manager
Der Doc Manager ist ein Modul zum einfachen Sortieren der Website. Er ist unter „Module“ (1), „Doc
Manager“ (2) zu finden. Klicken Sie hier auf den Reiter „Menüeinträge sortieren“ (3).
2.
1.
3.
Abbildung 46: Doc-Manager
ALGO CMS Handbuch für Responsive Websites
37
Danach klicken Sie links in der Baumansicht auf den jeweiligen Ordner, den Sie sortieren möchten und
auf die Schaltfläche „Los“.
Es öffnet sich rechts im Doc-Manager-Bereich eine Ansicht mit allen Seiten des jeweiligen Ordners.
Diese Seiten können nun einfach verschoben und somit deren Reihenfolge geändert werden, indem
Sie auf die linke Maustaste klicken, diese gedrückt halten und an der gewünschten Stelle wieder
auslassen. Mit Klick auf „Speichern“ ist die neue Anordnung im jeweiligen Ordner gespeichert.
Abbildung 47: Doc-Manager
ALGO CMS Handbuch für Responsive Websites
38
8.
a)
FAQs
Ich habe die Änderungen auf der Website vorgenommen, jedoch werden sie mir nicht
angezeigt.
Bitte aktualisieren Sie die Browseransicht mit der Taste F5. Wenn die Änderungen im CMS-System
gespeichert wurden, aber auf der Website immer noch nicht angezeigt werden, löschen Sie bitte den
Cache Ihres Browsers und des CMS-Systems und aktualisieren Sie die Browseransicht erneut. Sollten
die Änderungen immer noch nicht übernommen worden sein, kontaktieren Sie uns bitte.
b)
Das Hochladen der Bilder funktioniert nicht.
Bitte prüfen Sie, ob die Bilder alle internettaugliche Dateibezeichnungen haben (alles Kleinbuchstaben,
keine Leerzeichen, keine Umlaute, keine Sonderzeichen).
c)
Es werden nicht alle Funktionen im CMS-System angezeigt bzw. kann ich bestimmte Felder
nicht ausfüllen.
Das CMS-System ist auf den Internetbrowser Firefox optimiert. Bei Arbeiten mit dem Internet Explorer
werden manchmal Buttons oder dgl. nicht angezeigt, Felder lassen sich nicht ausfüllen etc. Bitte
benutzen Sie also den Firefox zum Bearbeiten der Website, die Website selbst wird natürlich auf allen
Browsern richtig angezeigt.
d)
Der Text, den ich auf der Seite eingefügt habe, ist verschoben bzw. wird er mir nicht angezeigt.
Haben Sie den Text aus Word übernommen, aber nicht mit dem entsprechenden Button „aus Word
einfügen“ eingefügt? Dann kann es nämlich sein, dass der Text zwar im CMS-System gespeichert ist,
aber auf der Website falsch bzw. überhaupt nicht dargestellt wird.
e)
Wenn ich das CMS meiner Website auf Google suche, finde ich es nicht.
Zum Einstieg ins CMS müssen Sie bitte immer Ihre URL inklusive „www.“ In die Browserleiste
eingeben und „/manager“ hinzufügen (also z.B. www.meineseite.at/manager). Der Einstieg ins CMS
ist nicht in Google gelistet!
f)
Die Website sieht auf meinem PC anders aus als auf einem anderen PC.
Meist liegt dies daran, dass mit unterschiedlichen Browsern (Internet Explorer, Firefox, Google
Chrome…) auf die Seite zugegriffen wird. Zudem hat jeder Browser unterschiedliche Versionen. Die
Darstellung der Website kann in jeder Browserversion geringfügig abweichen. Wir optimieren die
Darstellung Ihrer Website bei der Erstellung jeweils auf die letzten 2 Versionen der gängigsten
Browser.
ALGO CMS Handbuch für Responsive Websites
39
9.
Glossar
Alias
Unter Alias werden im CMS-System die Namen der Unterseiten eingetragen.
Lautet die Domain z.B. www.meineseite.at, kann bei der Preise-Seite unter
der alias z.B. „preise“ eingetragen werden, bei der Anfrage-Seite „anfrage“
usw. Das CMS-System liest dann den Inhalt aus und setzt die Namen der
Seiten
zusammen
(www.meineseite.at/preise.html
bzw.
www.meineseite.at/anfrage.html)
Alt-Text
Der Alt-Text (Alternativ-Text) eines Bildes ist jener Text, der beim Bild
hinterlegt wird, um für Browser und Suchmaschinen ausgelesen zu werden.
Der Alt-Text sollte immer das Bild beschreiben und zudem Keywords
beinhalten.
Browser
Ein Browser ist ein Programm, mit dem Sie auf das Internet zugreifen können.
Die bekanntesten Browser sind Internet Explorer, Firefox, Google Chrome,
Opera. Jeder Browser stellt Websites geringfügig unterschiedlich dar. Zudem
hat jeder Browser unterschiedliche Versionen (z.B. Internet Explorer 8 oder
9), welche die Websites auch unterschiedlich darstellen.
Browser-Cache
Jeder Browser speichert bestimmte Inhalte einer Seite (meist z.B.
Headerbilder), damit er sie bei einem neuerlichen Aufruf nicht wieder neu
laden muss. Wenn Sie Änderungen auf der Website vornehmen, und diese
trotz Leeren des Caches im CMS-System und Aktualisieren der Browseransicht
nicht angezeigt werden, empfehlen wir, den Browser-Cache zu leeren.
Cache
Im Cache des CMS-Systems werden bestimmte Inhalte gespeichert. Wenn
Änderungen im CMS-System vorgenommen werden, diese auf der Website
aber nicht angezeigt werden, ist das Leeren des Caches im CMS-Systems
sinnvoll.
Container
Ein Container ist ein Element auf einer Inhaltsseite der Website, der ein oder
mehrere andere Elemente (Text, Text mit Bild, Bilder in einer Reihe…)
beinhalten kann.
Contentbild
Ein Contentbild einer Seite ist ein Bild im Inhaltsbereich der Seite, das im
Element „Text mit Bild“ oder „Bilder in einer Reihe“ eingegeben wird.
ALGO CMS Handbuch für Responsive Websites
40
Contentseite
Eine Contentseite ist jede beliebigte Seite Ihrer Website, außer der Startseite.
Domain / URL
Die Domain einer Website ist der Name der Website, z.B. www.meineseite.at.
Dynamischer
Sprachwechsel
Ein dynamischer Sprachwechsel ist gegeben, wenn man von einer
bestimmten Contentseite mit Klick auf das Flaggensymbol direkt auf die
Contentseite der jeweiligen Sprache landet, und nicht wie im Normalfall
auf der Startseite der gewählten Sprache. Ein dynamischer Sprachwechsel
ist separat zu beauftragen.
Headerbild
Das Headerbild einer Seite ist das Bild, das sich ganz oben auf der Website im
Template befindet.
Highslide
Die Highslide-Funktion im CMS erlaubt den Contentbildern auf der Website
großgeklickt zu werden, d.h. bei Klick auf das jeweilige Bild wird das Bild
vergrößert.
Link
Ein Link ist ein Verweis auf eine andere Seite. Wenn ein Wort verlinkt ist, wird
man bei Klick auf dieses Wort auf eine andere Seite weitergeleitet. Ein
interner Link verweist auf eine andere Seite innerhalb Ihrer Website, ein
externer Link verweist auf eine fremde Seite (fremde Domain).
Keywords
Keywords sind jene Suchbegriffe, die Sie in einer Suchmaschine eingeben
(z.B. „Urlaub Österreich“). Der Einbau von Keywords an verschiedenen Stellen
der Seite ist vor allem für die Suchmaschinenoptimierung wichtig.
Navigation
Die Navigation einer Website ist das Menü einer Website, wo die
unterschiedlichen Seiten aufzurufen sind.
Ressource
Eine Ressource im CMS-System ist eine Seite Ihrer Website.
Startseite
Die Startseite Ihrer Website ist jene Seite, die als erster erscheint, wenn Sie
Ihre Domain aufrufen.
Sitemap
Eine Sitemap ist eine Seitenübersicht über die Website. Sitemaps sind vor
allem für Suchmaschinen wichtig. Ihre Website hat 2 Sitemaps, eine normale,
die Sie auch auf der Seite aufrufen können, und eine xml-Sitemap, die am
Server für die Suchmaschinen hinterlegt ist.
ALGO CMS Handbuch für Responsive Websites
41
Template
Ein Template ist ein Rahmen der Website, der das Aussehen definiert. Meist
gibt es ein Start-Template und ein Content-Template. Das Start-Template
definiert das Aussehen der Startseite, das Content-Template definiert das
Aussehen der Content-Seiten.
Template-Variablen
Template-Variablen sind Inhalte, die bei speziellen Programmierungen der
Website eingesetzt werden (z.B. um Texte/Bilder an unterschiedlichen Stellen
auf der Website anzeigen zu lassen).
Weblink
Eine Seite Ihrer Website kann entweder aus einem Dokument bestehen, oder
aus einem Weblink. Ein Weblink im CMS-System ist ein Link auf eine andere
interne oder externe Seite. Der Weblink wird direkt als Menüpunkt in der
Navigation angezeigt.
ALGO CMS Handbuch für Responsive Websites
42