Diese Bedienungsanleitung zeigt schnell und einfach, wie Sie Bilder, Dokumente, Links oder Videos auf der Webseite integrieren.

Transkript

1 Diese Bedienungsanleitung zeigt schnell und einfach, wie Sie Bilder, Dokumente, Links oder Videos auf der Webseite integrieren. Inhalt Inhalt und Begriffe 1 Basisfunktionalität 2 Bilder einfügen 5 Youtube-Video einfügen 8 Link (Dokumente einfügen) 10 Slider-Bilder erstellen, arbeiten mit paint.net Bildbearbeitungssoftware 11 Begriffe Browser: Seitenbetrachtungsprogramm für eine Webseite. z.b. Internet Explorer, Mozilla Firefox, Google Chrome, Safari, etc. Content Management System: Mit dem CMS-System können die Inhalte des Webauftrittes bearbeitet werden. Download: Transfer von Daten auf den lokalen Rechner. Upload: Daten auf den Webserver hochladen. Login: Der gesicherte Eingang in das CMS-System. Benutzernamen und Passwort öffnen das System für die Bearbeitung durch die berechtigten Personen. Homepage: Als Homepage wird nur die Startseite einer Website (Webauftritt) bezeichnet. Hyperlink: Verknüpfung zu anderen Textstellen, anderen Internetseiten oder beliebigen Dokumenten im Web. Keywords: Keywords sind Suchbegriffe, mit der eine Suchmaschine Webseiten findet. Metatags: Die Meta-Tags sind ebenfalls Informationen für die Suchmaschinen und enthalten Angaben zum Inhalt und der Struktur einer Seite. Pixel: Grössenangabe für Fotoformate URL: Die URL (Uniform Resource Locator) ist die eindeutige Adresse von Dateien. Seite 1

2 Basisfunktionalität Das Content Management System (Abk. CMS) ist jeweils über diesen Link aufrufbar: (Dieser Link muss in die Adresszeile des Webrowsers, z.b. Internet Explorer, Mozilla, Google Chrome eingegeben werden: Anschliessend erscheint das Login wo Sie Ihre persönlichen Logindaten eingeben können Nach erfolgreichem Login erscheint diese Anzeige Die 1. Zeile zeigt 5 Menüpunkte: [Home] [Webseite bearbeiten] [Benutzerverwaltung] [Bedienungsanleitung] [Abmelden] = Startseite = Hier kann der Inhalt der Webseite bearbeitet werden = Hier kann ein weiteres Login erstellt oder mutiert werden = Hier kann die aktuellste Bedienungsanleitung angezeigt werden = Hier wird der Admin Bereich korrekt geschlossen Die 2. Zeile erscheint, wenn der Menüpunkt [Webseite bearbeiten] angeklickt wird. Nun erscheinen die Menüpunkte: Einstellungen, Navigation, Inhalt Seite 2

3 [Einstellungen] Hier können grundlegende Webseiten-Einstellungen vorgenommen werden. Es handelt sich vor allem um Einstellungen für die Suchmaschinenoptimierung. Diese Einstellungen wurden grösstenteils von der Firma naviti GmbH für Sie angelegt. [Navigation] Um Änderungen vorzunehmen, wählen Sie «Erweiterte Ansicht» Mit dem Befehl «Neue Seite einfügen» wird ein zusätzlicher Navigationspunkt erzeugt. Haben Sie einen Punkt der Hauptnavigation markiert und drücken Sie auf «Löschen», wird der Navigationspunkt und der Inhalt der Unterseite gelöscht! Im Feld «Sortierung» können Sie die Reihenfolge der Menüpunkte verändern. Soll eine Seite temporär nicht angezeigt werden, so kann die Auswahl im Feld «Status» getroffen werden. Seite 3

4 [Inhalt] Im Menüpunkt «Inhalt» können Sie die Inhalte Ihres Webauftritts bearbeiten. Hier können Sie Texte, Bilder, Videos und Links Ihrer Webseite aktualisieren. Das Freitext-Modul Wenn in der Navigation das Modul «Freitext» gewählt wurde, erscheint die Menüliste wie auf diesem Bild. Das Freitext-Modul funktioniert so einfach wie ein Word-Dokument. Sie können Texte und Bilder einfügen oder verändern wie in einem Word Dokument. Sie können Texte linksbündig setzen, Texte markieren oder die Textfarbe ändern. Ebenso kann die Textgrösse angepasst werden. Änderungen: Möchten Sie eine Änderung rückgängig machen, nutzen Sie diese Taste: Nicht vergessen: Speichern Sie Ihre Änderungen regelmässig! Seite 4

5 Bilder einfügen Bild einfügen 1. Maus dort positionieren, wo das Bild eingefügt werden soll. 2. Im Editor auf das Symbol zum Einfügen eines Bildes klicken. (siehe roter Kreis) Befehl «Bild einfügen» Anschliesend öffnet sich das Fenster «Bild-Eigenschaften» Nach dem Klick auf das Symbol wird der Dialog «Bild-Eigenschaften» angezeigt. Wählen Sie jetzt ein bestehendes Bild, welches sich bereits auf dem Internet- Server befindet, zum Einfügen aus. Klicken Sie auf den Knopf «Server durchsuchen». Es geht ein neues Fester auf. Sollte noch kein Bild auf dem Server vorhanden sein, gehen Sie bitte zuerst zum Punkt «Bild auf Server hochladen» Im neuen Fenster wird ein Datei-Explorer angezeigt, welcher alle Ordner und Dateien anzeigt, die sich auf dem Internet-Server befindenden. (Damit Sie die Übersicht behalten, können Sie mehrere Dateien in einen Ordner legen). Siehe z.b. Ordner «test» Seite 5

6 Bild auf den Server hochladen Falls das Bild, welches auf der Webseite eingefügt werden soll, noch nicht auf dem Internet- Server abgelegt ist, müssen Sie das Bild zuerst mit der Funktion [+] auswählen (von Ihrer lokalen Festplatte oder einem externen Datenspeicher) und anschliessend mit «Hochladen» auf den Server hochladen. Im linken Teil werden alle bestehenden Ordner aufgelistet. Um die Inhalte eines Ordners zu sehen, klicken Sie den entsprechenden Ordner an. Mit dem Button «Neuer Ornder» können Sie einen neuen Ordner anlegen. Es ist auch möglich neue Unterordner anzulegen. Positionieren Sie auf einem bestehenden Ordner den Cursor und drücken Sie die rechte Maustaste. 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 können Sie mit der rechten Maustaste ein Kontextmenü aufrufen um Aktionen wie Umbenennen, Löschen, etc. durchzuführen. Bild in die Webseite einfügen Um ein bestehendes Bild in die Webseite einzufügen, machen Sie einen Doppelklick auf das gewünschte Bild. Oder klicken Sie auf das Bild und wählen Sie mit der rechten Maustaste die Option 'Auswählen'. Dies hat dieselbe Wirkung wie ein Doppelklick. Grosse Bilder (grosse Datenmenge) Falls das Bild beim Hochladen sehr gross ist, wird das Bild automatisch auf eine Breite von 1100 Pixel verkleinert, um später lange Ladezeiten auf der Webseite zu verhindern. Bild auswählen Nachdem das einzufügende Bild dann mit der Option 'Auswählen' gewählt wurde, wird das Fenster mit dem Datei-Explorer geschlossen und der folgende Dialog wird wieder angezeigt: Nun können Sie Breite und Höhe des Bildes anpassen. Um das Bild dann endgültig auf der Webseite zu platzieren, muss nur noch der Button 'OK' angeklickt werden. Seite 6

7 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 ein grosses Bild definiert werden müssen. «Server durchsuchen» muss nun also für beide Bildvarianten gewählt werden: Variante 1: Sollen das Vorschaubild und das zu vergrössernde Bild identisch sein, dann wählen Sie bei «URL kleines Bild» und bei «URL grosses Bild» zwei Mal dasselbe Bild aus. Variante 2: Wollen Sie als Vorschaubild z.b. ein Piktogramm anzeigen und als Grossbild ein Foto, dann wählen Sie das Piktogramm unter: «URL kleines Bild» und das Grossbild unter: «URL grosses Bild» aus. Auf der Webseite wird dann zuerst das Piktogramm angezeigt und beim Klick darauf - dann das Bild. In Kürze: 1. Server durchsuchen für kleines Bild 2. Bild wählen und anklicken 3. Auswählen klicken 4. Punkte 1-3 für grosses Bild wiederholen 5. Alternativtext einfügen 6. Wenn gewünscht, Breite und Höhe des kleinen Bildes wählen 7. Mit ok bestätigen Seite 7

8 Videos einbetten: Mit dem Naviti CMS ist es ganz einfach, Youtube-Videos in den eigenen Webauftritt einzubetten. Aus Performance-(Leistung) Gründen ist es empfehlenswert, die Videos nicht auf dem eigenen Server zu speichern. Speichern Sie Ihre Videos bei einem Spezialisten wie Youtube.com und integrieren anschliessend das Video in Ihre eigene Webseite. Für die Webseitenbesucher macht das keinen Unterschied, aber das Video wird schneller geladen und wiedergegeben. 1. Schritt: Youtube Account erstellen (Der Videofilm zeigt wie es geht): 2. Schritt: Filme auf das Youtube Portal abspeichern (Der Videofilm zeigt wie es geht): Ein Video in Ihren Auftritt einbetten: Suchen Sie Ihr Video auf Youtube und kopieren Sie die URL, die Adresse in die Zwischenablage. So geht s: 1. Adresse (URL) markieren im Browser (Internet Explorer, Firefox, Chrome etc.) 2. Rechte Maustaste drücken und «kopieren» auswählen So sieht der Link des Videos der Insel Naviti aus: 3. Im CMS mit der Maus die Position des Videos in der vorgesehenen Seite wählen, und den Cursor dort platzieren. 4. Anschliessend Klick auf: Seite 8

9 5. Einfügen des Links in das Feld URL 6. Ok wählen, speichern und schon ist das Video in Ihrer Webseite eingebettet So präsentiert sich Ihr Video auf Ihrer Webseite 7. Um ein Video zu entfernen klicken Sie auf das Video und entfernen es mit der Taste «Delete» Seite 9

10 Link (Dokumente) einfügen Möchten Sie ein Dokument im pdf-format zum Download bereitstellen? Dies funktioniert ganz ähnlich wie das Einfügen eines Bildes. Zuerst muss definiert werden, wie der Link am Schluss heissen soll. Dazu schreibt man im Editor den gewünschten Namen des Links. In diesem Beispiel ist das «Download PDF»: Danach muss der Text, welcher in einen Link umgewandelt werden soll, markiert werden. Klicken Sie nach Markierung des Textes auf das Symbol «Link einfügen»: 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. 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» vorab auf den Server geladen werden. In Kürze: 1. Textstelle die verlinkt werden soll markieren 2. Auf «Link» klicken 3. «Server durchsuchen» klicken 4. Datei auswählen 5. Doppelklick auf gewählte Datei 6. Mit ok bestätigen Am Schluss wieder mit 'OK' bestätigen. Seite 10

11 Slider Bilder selbst erstellen (Bilder im Kopf Ihrer Webseite) Format: 900 x 280 Pixel Naviti empfiehlt das Programm paint.net. Dieses Programm ist gratis und sehr umfangreich. Den Download des Programmes finden Sie hier: Direktlink für den schnellen Download: 1. Installation und Start von paint.net Wählen Sie «Datei» und dann «Öffnen». Der Explorer öffnet sich und Sie können die gewünschte Bilddatei auswählen. 2. Bildgrösse ändern Wählen Sie «Bild» und dann «Grösse ändern». 3. Geben Sie beim Wert «Breite» 900 Pixel ein und drücken Sie OK Seite 11

12 4. Wählen Sie «Bild» und dann «Leinwandgrösse» 5. Geben Sie beim Wert «Höhe» 280 Pixel ein. Mit den untenstehenden Pfeiltasten können Sie den Bildausschnitt positionieren. Geben Sie anschliessend «OK» ein. Seite 12

13 Wichtig: (Bei «Seitenverhältnis beibehalten» darf kein Haken gesetzt sein) 6. Speichern Sie dieses Bild an einem Ort für den Upload auf Ihren Webserver. Anschliessend können Sie das Bild in Ihre Bibliothek auf dem Webserver hochladen. Sie können das Bild weiterbearbeiten, Farbkorrekturen anbringen oder Texte in das Bild einfügen. 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 13