Anleitung zum Editieren der Website (Frontend-Editing) Präsentation zur Schulung

Transkript

1 Anleitung zum Editieren der Website (Frontend-Editing) Präsentation zur Schulung Seite 1 von 36 Letzte Änderung: 17. Januar 2014, 10:32 vorm.

2 Agenda 1. Styleguide 2. Inhaltliches und strukturelles Konzept 3. Vorbereitung 4. Login 5. Mein Bereich 6. Frontend-Editing 7. Bearbeitungsmaske allgemein 8. Seiteneigenschaften / Theme 9. Do it yourself Fragen & Antworten Seite 2 von 36

3 Styleguide WAS MUSS ICH BEACHTEN? Für die das neue Corporate Design der Hochschule Harz wurde ein Styleguide entwickelt: Bitte benutzen Sie aktuelle Browser Versionen von Firefox. Andere Browser können Abweichungen in der Funktionalität aufweisen. Seite 3 von 36

4 Veröffentlichungsrichtlinien WICHTIG Dokumente für Lehrveranstaltungen dürfen auf keinen Fall auf der persönlichen Homepage veröffentlicht werden. Diese müssen in studip abgelegt werden. Sie dürfen auf Ihrer persönlichen Homepage nur Bilder, Texte etc. hochladen oder veröffentlichen, deren Rechte Sie besitzen! Seite 4 von 36

5 Inhaltliches Konzept für die Seiten der Hochschule Text ist Informationsträger Nummer 1 Achten Sie auf ausreichend Inhalt je Seite Vermeiden Sie Unterseiten mit wenig Inhalt Kacheln sollen keinen (Text-)Information enthalten, sondern Hinweise / Verweise Links Zitate Titel Bilder etc. Seite 5 von 36

6 Struktur-Konzept innerhalb einer Seite JEDE SEITE KANN FOLGENDE STRUKTUR HABEN 1. Kacheln oben = Wichtige Informationen 2. Text-Information mitte = Seiteninhalt 3. Kacheln unten = Vertiefendes, Weiterführendes, Verlinkungen, Seite 6 von 36

7 Vorbereitung TEXTE Sie können die Texte vorbereiten und dann per copy & paste auf die Website übertragen Die Formatierung der Texte muss im Editor der Website geschehen. BILDER ZUR VERWENDUNG AUF DEN HOCHSCHULSEITEN Es gibt einen»bilderpool«mit freigegebenen Bildern Hier können Sie keine Bilder hochladen Die Bilder sind für die einzelnen Formate vorbereitet Nur diese dürfen auf den Hochschulseiten verwendet werden Seite 7 von 36

8 Vorbereitung BILDER FÜR DIE EIGENE HOMEPAGE Ihnen steht ein eigener Bilder-Ordner zur Verfügung Dieser trägt ihre Benutzerkennung Hier können Sie Bilder hochladen Diese dürfen nur auf Ihrer Homepage verwendet werden Achten Sie außerdem auf den alternativen Titel Seite 8 von 36

9 Vorbereitung BILDGRÖSSEN Bitte achten Sie generell auf eine sehr gute Bildqualität in Form von Motiv, Farbe, Schärfe, etc... PIXEL MINDESTMASSE 1x1 Kachel: 464 x 464px 2x1 Kachel: 938 x 464px bzw. 1x2: 464px 938px Sie können auch größere Auflösungen im Seitenverhältnis hochladen. Seite 9 von 36

10 Vorbereitung BENENNUNG DER BILDER Schlecht: bild05.jpg Gut: eiffelturm.jpg ALTERNATIV-TEXT (TITEL) Falsch: eiffelturm.jpg Richtig: Eiffelturm Clever: Eiffelturm Paris SPAM: Paris Urlaub Hotel Zimmer Unterkunft Seite 10 von 36

11 Login LOGIN LOGOUT Um sich auszuloggen, müssen Sie den Browser schliessen! Seite 11 von 36

12 Mein Bereich LINKS sind Dienste, die Ihnen zur Verfügung stehen BEARBEITEN enthalten Seiten, die Sie bearbeiten dürfen Seite 12 von 36

13 Das Frontend-Editing 3. Seite 13 von 36

14 Das Frontend-Editing WARUM KANN ICH MANCHE ELEMENTE NICHT EDITIEREN? Sie brauchen nur das für Sie Relevante editieren Einiges ist mit Ihren Logindaten verknüpft Andere Inhalte sind in Abstimmung mit der Hochschule festgelegt worden und sollten nicht verändert werden. Seite 14 von 36

15 Die Bearbeitungsmaske allgemein 1. Aktionen (schließen, speichern, etc.) 2. Überschrift 3. Text (schreiben und formatieren) 4. Bild(er) 5. Layout-Einstellungen (für Fortgeschrittene) 4. Seite 15 von 36

16 Die Bearbeitungsmaske allgemein 1. AKTIONEN Die Bearbeitungsmaske kann auch durch das Klicken in den schwarzen Layer geschlossen werden. Seite 16 von 36

17 Die Bearbeitungsmaske allgemein 2. ÜBERSCHRIFT 6. Seite 17 von 36

18 Die Bearbeitungsmaske allgemein GRÖSSEN UND ABSTÄNDE DER ÜBERSCHRIFTFORMATE Mit der Auswahl der Überschrift sind bestimmte Schriftgrößen und auch Abstände zum Textblock verbunden. Bitte benutzen Sie die Überschriften in der logisch richtigen Reihenfolge. Seite 18 von 36

19 Die Bearbeitungsmaske allgemein 3. Text Seite 19 von 36

20 Die Bearbeitungsmaske allgemein 3. TEXT-EDITOR BEDIENEN Neuer Absatz: RETURN Neue Zeile: SHIFT+ RETURN TAB Einrücken: mehrmals SHIFT + Leertaste (Die Tab-Taste wird im HTML leider nicht unterstützt.) SHIFT ist die Umschalttaste für Großbuchstaben RETURN ist die Eingabetaste Seite 20 von 36

21 Die Bearbeitungsmaske allgemein TEXTLINK SETZEN 1. Textfragment markieren 2. Linkhandler öffnen 3. Link-Typ auswählen 4. Link eingeben + Optionen wählen 5. Link setzen 6. Speichern Seite 21 von 36

22 Die Bearbeitungsmaske allgemein 4. BILDER IN DEN EIGENEN ORDNER HOCHLADEN Ihren Ordner anwählen und das Bild suchen. Bild wählen und dann hochladen. Seite 22 von 36

23 Die Bearbeitungsmaske allgemein 4. BILDER IN DEN EIGENEN ORDNER HOCHLADEN Bild auswählen und Fenster schließen. Speichern und schließen Seite 23 von 36

24 Die Bearbeitungsmaske allgemein 4. BILDER ANFÜGEN Falls Sie keine Vorschaubilder sehen, müssen Sie die Ansicht aktivieren. Das Bild wird durch das "+" oder durch das Klicken auf das Bild hinzugefügt. Seite 24 von 36

25 Die Bearbeitungsmaske allgemein 4. BILDER ANFÜGEN Durch drag 'n' drop können die Bilder verschoben werden. Es wird aber immer nur das erste angezeigt. Wichtig: Nun muss noch ein alternativer Titel eingegeben werden. (ggf. müssen Sie scrollen um diesen zu sehen.) Seite 25 von 36

26 Die Bearbeitungsmaske allgemein 4. PDF'S ANFÜGEN (Dies ist von jedem Textfeld aus möglich, nicht nur in einer Kachel) Seite 26 von 36

27 Die Bearbeitungsmaske allgemein 4. PDF'S ANFÜGEN Seite 27 von 36 Wählen Sie die hochzuladende Datei von ihrem Computer.

28 Die Bearbeitungsmaske allgemein 4. PDF'S ANFÜGEN Jetzt die Datei noch hochladen, auswählen und speichern. Seite 28 von 36

29 Die Bearbeitungsmaske allgemein 4. PDF'S SCHÜTZEN Wenn Sie schützenswerte Inhalte auf der Website veröffentlichen müssen, können Sie das Dokument mit einem Passwortschutz versehen. Der Passwortschutz für ein PDF wird am Besten beim Erzeugen erstellt. Zum Beispiel über die Druckfunktion. S. Screenshots Ein Word-Dokument lässt sich in Microsoft Word schützen. Seite 29 von 36

30 Die Bearbeitungsmaske allgemein 4. PDF'S SCHÜTZEN Seite 30 von 36

31 Seiteneigenschaften / Theme auswählen THEME AUSWÄHLEN 1. Sie können aus einer Reihe vorgefertigter Themes auswählen. 2. Die Grafik im Hintergrund kann durch eine eigene Grafik ersetzt werden Seite 31 von 36

32 Seiteneigenschaften / Theme auswählen BEISPIEL Seite 32 von 36

33 Seiteneigenschaften / Theme auswählen Übersicht Seite 33 von 36

34 Seiteneigenschaften / Theme auswählen Übersicht Seite 34 von 36

35 Danke! SCHLUSSBEMERKUNG Falls irgendetwas nicht ist, wie Sie es erwarten oder Ihrer Meinung nach nicht funktioniert, fragen Sie uns. Ebenfalls freuen wir uns über Anregungen und Feedback. Ansprechpartner CDLX/Codeluxe Christel / Göldner GbR Martin Christel hs-harz@cdlx.de Seite 35 von 36

36 Do it yourself! Hinweise Schulungsseiten Kein Workflow Seite 36 von 36