Inhalt Basisfunktionalität... 2 Bilder einfügen... 5 Link (Dokumente) einfügen... 9 Video einfügen Slider Bilder erstellen...

Transkript

1 Diese Bedienungsanleitung zeigt schnell und einfach, wie Sie Bilder, Dokumente, Links oder Videos auf der Webseite integrieren. Inhalt Basisfunktionalität... 2 Bilder einfügen... 5 Link (Dokumente) einfügen... 9 Video einfügen Slider Bilder erstellen Seite 1

2 Basisfunktionalität Das Content Management System (Abk. CMS) ist jeweils über diesen Link aufrufbar: Anschliessend erscheint das Login wo Sie Ihre persönlichen Logindaten eingeben können. Nach erfolgreichem Login erscheint dieser Dialog. Die 1. Zeile zeigt 4 Menüpunkte. [Home] = Startseite [Webseite bearbeiten] = Hier kann die Webseite von Ihnen administriert werden [Benutzerverwaltung] = Hier kann ein weiteres Login erstellt oder mutiert werden [Bedienungsanleitung] = Hier kann die aktuellste Bedienungsanleitung angezeigt werden [Abmelden] = Hier wird der Admin Bereich korrekt geschlossen. Die 2. Zeile erscheint wenn der Menüpunkt [Webseite bearbeiten] angeklickt wird. 3 weitere Menüpunkte erscheinen dann [Einstellungen] Hier können Grundlegende Webseiten Einstellungen vorgenommen werden. Diese Einstellungen wurden grösstenteils bereits von der Firma naviti GmbH für Sie angelegt. Seite 2

3 [Navigation] Hier kann ein neuer Navigationspunkt angelegt werden oder auch entfernt werden. Der Text des Navigationspunktes (Seitenname Deutsch) ist ebenfalls hier zu korrigieren oder falls ein Navigationspunkt eine andere Position erhalten sollte (Sortierung) oder temporär nicht angezeigt werden soll (Status), wird dies auch hier administriert. Seite 3

4 [Webseite bearbeiten] Dieser Menüpunkt wird am ehesten von Ihnen verwendet, hier können Sie Text, Bilder, Links etc. für die Webseite aktualisieren. Wenn die Webseite in der Navigation das Modul PlainContent definiert hat erscheint der Menüpunkt genau so wie in diesem Bild ersichtlich. Das PlainContent Modul funktioniert so einfach wie ein Word-Dokument. Man kann hier Text, Bilder korrigieren fast so wie Sie es in einem Worddokument gewohnt sind. Hier können Sie Texte Linksbündig, oder Rot markieren, die Grösse ist hier auswählbar etc Seite 4

5 Bilder einfügen Bild einfügen Im ersten Schritt ist die Maus dort zu positionieren, wo das Bild eingefügt werden soll. Danach kann im Editor auf das Symbol zum Einfügen eines Bildes geklickt werden: Nach dem Klick auf das obige Symbol wird der unten ersichtliche Dialog angezeigt. Im nächsten Schritt soll ein bestehendes Bild, welches sich bereits auf dem Internet-Server befindet, zum Einfügen gewählt werden. Dazu muss auf den Knopf 'Server durchsuchen' geklickt werden: geklickt werden: Nach dem Klick auf 'Server durchsuchen' geht ein neues Fester auf. Im neuen Fenster wird ein Datei-Explorer angezeigt, welcher alle sich auf dem Internet-Server befindenden Ordner und Dateien anzeigt. Im linken Teil werden alle bestehenden Ordner aufgelistet. Um die Inhalte eines Ordners zu sehen, kann der jeweilige Ordner angeklickt werden. Es ist auch möglich neue Unterordner anzulegen. Dazu kann auf einem bestehenden Ordner die rechte Maustaste geklickt werden. Im aufgehenden Kontextmenü stehen dann die Optionen 'Neuer Unterordner', 'Umbenennen' oder 'Löschen' zur Verfügung. Im rechten Teil sind alle Dateien eines Ordners aufgelistet. Auch bei den Bildern kann mit der rechten Maustaste ein Kontextmenü aufgerufen werden um verschiedene Aktionen wie Umbennen, Löschen, etc. durchzuführen. Um nun ein bestehendes Bild auf der Webseite einzufügen, kann ein Doppelkick auf das Seite 5

6 gewünschte Bild ausgeführt werden. Oder man kann mit der rechten Maustaste auf das Bild klicken und die Option 'Auswählen' anklicken. Dies hat den gleichen Effekt wie der Doppelklick auf das Bild. Es gibt noch die Option 'Wähle Miniaturansicht'. Wenn diese Option gewählt wird, wird automatisch eine kleinere Version des Bildes eingefügt. Beim Hochladen von einem neuen Bild, wird immer ein grosses Bild und ein Miniaturbild auf dem Server gespeichert. Falls das Bild beim Hochladen sehr gross ist, wird das Bild automatisch auf eine Breite von 1100 Pixeln verkleinert, um später lange Ladezeiten auf der Webseite zu verhindern. Gleichzeitig wird ein Miniaturbild von einer Breite von 180 Pixeln auf dem Internet-Server gespeichert, welches wie beschrieben über die Option 'Wähle Miniaturansicht' in der Webseite eingefügt werden kann. Falls das Bild, welches auf der Webseite eingefügt werden soll, noch nicht auf dem Internet- Server abgelegt ist, muss das Bild zuerst mit der Funktion [+] ausgewählt und anschliessend mit Hochladen auf den Server geladen werden. Nachdem das einzufügende Bild dann mit der Option 'Auswählen' oder 'Wähle Miniaturansicht' gewählt wurde, wird das Fenster mit dem Datei-Explorer geschlossen und der folgende Dialog wird wieder angezeigt: Seite 6

7 Nun kann noch die Breite und Höhe des Bildes angepasst werden. Um das Bild dann endgültig auf der Webseite zu platzieren muss nur noch der Button 'OK' angeklickt werden. Bild mit Klein/Gross-Effekt einfügen (auch Lightbox oder ColorBox genannt) Oft ist der Effekt gewünscht, dass ein Bild auf der Webseite in kleinem Format angezeigt wird. Durch einen Klick auf das kleine Bild soll dann aber eine grosse Variante des Bildes angezeigt werden. Um dies zu erreichen muss das Symbol 'Colorbox-Bild' im Editor angeklickt werden: Nachdem das Symbol angeklickt wurde, wird ein ähnlicher Dialog wie beim einfachen Bild angezeigt. Der Unterschied besteht darin, dass nun ein kleines Bild für die Vorschau und das grosse Bild definiert werden müssen. 'Server durchsuchen' muss nun also für beide Bildvarianten gewählt werden: Der Rest funktioniert genau gleich wie beim einfachen Bild. Für das kleine Bild muss dann Seite 7

8 einfach eine entsprechend verkleinerte Version des Bildes auf dem Internet-Server gewählt werden. Die einfachste Variante ist, dass man bei der Wahl des Bildes auf dem Server die Option 'Wähle Miniaturansicht' anklickt und beim grossen Bild das gleiche Bild wählt aber mit der Option 'Auswählen' anstelle von 'Wähle Miniaturansicht'. Am Schluss wieder mit 'OK' bestätigen. Seite 8

9 Link (Dokumente) einfügen Oft soll zum Beispiel ein PDF-Dokument als Link verknüpft werden. Dies funktioniert ganz ähnlich wie das Einfügen eines Bildes. Hier muss aber zuerst definiert werden wie der Link am Schluss heissen soll. Dazu schreibt man im Editor ganz normal den gewünschten Namen des Links. In diesem Beispiel wäre das 'Download PDF': Danach muss der Text, welcher in ein Link umgewandelt werden soll, markiert werden. Nach der Markierung des Textes ist auf das Symbol 'Link einfügen' zu klicken: Es wird wieder ein Dialog angezeigt, in welchem die zu verlinkende PDF-Datei gewählt werden kann. Dazu muss wie beim Bild auf 'Server durchsuchen' geklickt werden. Genau wie beim einzufügenden Bild kann nun das zu verlinkende Dokument auf dem Internet-Server gewählt werden. Falls sich das Dokument noch nicht auf dem Server befindet kann das Dokument genau wie ein Bild mit der Funktion 'Hochladen' zuerst auf den Server geladen werden. Am Schluss wieder mit 'OK' bestätigen. Seite 9

10 Video einfügen Aus Performance Gründen ist es zu empfehlen, die Videos nicht auf dem eigenen Server zu speichern. Wir empfehlen die eigenen Videos bei einem Spezialisten wie Bspw. YOUTUBE zu speichern und das Video auf der eigenen Webseite zu integrieren. Die Webseitenbesucher sehen keinen Unterschied aber es ist wesentlich schneller geladen und ohne Ruckeln an zu schauen. Youtube Account erstellen (Der Videofilm zeigt wie es geht): Filme auf das Youtube Portal abspeichern (Der Videofilm zeigt wie es geht): Anschliessend kann man ganz einfach diesen Film im CMS integrieren (Film einbinden) 1. Auf den Link [Teilen] klicken 2. Auf den Link [Einbetten] klicken 3. Ev. grösse des Videos anpassen 4. Den Code/Text in dieser Box kopieren 5. Im CMS den Knopf [Quellcode] anklicken und den Code am Schluss anhängen Seite 10

11 6. Im CMS den Knopf [Quellcode] nochmals anklicken und nun kann das Video (Hier im Bild als IFRAME dargestellt auch mit der Maus noch platziert werden. 7. [Speichern] klicken Achtung das Video wird erst auf der Webseite korrekt angezeigt. Das Bild zeigt, wie es anschliessend auf der Webseite angezeigt wird. Seite 11

12 Slider Bilder erstellen 900 x 280 Pixel Wir empfehlen das Programm paint.net. Dieses Programm ist gratis und zudem sehr umfangreich. Der Download dieses Programmes finden Sie hier: Hier der Direktlink, da es nicht ganz einfach ist den Download des Programmes auf dieser Webseite zu finden: 1. Datei suchen und mit der rechten Maustaste "Öffnen mit" "Paint.Net" 2. Bild Grösse ändern Seite 12

13 3. Bei der Breite 900 eingeben und OK 4. Bild / Zeichnungsbereichgrösse anklicken Seite 13

14 5. Bei der Höhe 280 eingeben und OK (Bei Seitenverhältnis beibehalten darf kein Haken gesetzt sein) Jetzt dieses Bild [Speichern unter] ablegen und auf die eigene Webseite laden......hier in diesem Beispielbild könnte man zudem auch Text in das Bild integrieren wie Bsp: "Besuchen Sie uns am " oder ein Logo in das Bild integrieren. Die Möglichkeiten sind gross. ALLGEMEIN: Das Programm ist weit auf der Welt verbreitet und im Einsatz, Hilfe finden Sie direkt beim Programmhersteller oder auch im Internet. Sie finden zudem viele youtube Filme, welche Schritt für Schritt aufzeigen wie man mit diesem Programm paint.net arbeiten kann. Seite 14