fachspezifische themenstellung fwt element - pictures
DESCRIPTION
Fachspezifische Themenstellung FWT element-pictures von Jurcizak und FaustmannTRANSCRIPT
Fachspezifische
Themenstellung 2011/2012
in Information &
Communication Solutions
FWT- element pictures Meidlinger
Pannoneum, Neusiedl am See
Julia Jurcizak
Moritz Faustmann
Inhaltsverzeichnis
1. Vorwort ................................................................................................... 6
2. Preface ..................................................................................................... 7
3. Projektmanagement................................................................................. 8
4. Ziele und Nichtziele .................................................................................. 9
4.1. Ziele .......................................................................................................... 9
4.2. Nichtziele ................................................................................................... 9
5. Jimdo ..................................................................................................... 10
6. Meilensteinplan ..................................................................................... 11
7. Projektstrukturplan ................................................................................ 12
8. Coporate Design Manual ........................................................................ 13
8.1. FWT Element Pictures .............................................................................. 14
8.2. Logo ........................................................................................................ 15
8.3. Farben ..................................................................................................... 16
8.4. Details ..................................................................................................... 17
8.4.1. Hintergrund: ............................................................................................................ 17
8.4.2. Text: ......................................................................................................................... 17
8.4.3. Überschrift 1: ........................................................................................................... 17
8.4.4. Überschrift 2: ........................................................................................................... 18
8.4.5. Trennstrich: ............................................................................................................. 18
8.4.6. Links: ........................................................................................................................ 18
8.5. Schriftart ................................................................................................. 19
9. Die einzelnen Seiten ............................................................................... 20
9.1. Aktuelles .................................................................................................. 20
9.2. Galerie ..................................................................................................... 21
9.2.1. Fotos ........................................................................................................................ 22
9.2.2. Videos ...................................................................................................................... 22
9.2.3. Referenzen .............................................................................................................. 23
9.3. Über mich ................................................................................................ 24
9.4. Gästebuch ................................................................................................ 25
9.5. Kontakt .................................................................................................... 26
9.6. Impressum ............................................................................................... 27
10. Das Jimdo- Handbuch ......................................................................... 28
10.1. Zugang zur Website - Login ....................................................................... 29
10.2. Elemente hinzufügen ............................................................................... 30
10.3. Textgestaltung ......................................................................................... 31
10.3.1. Texte ändern ....................................................................................................... 31
10.3.2. Überschrift einfügen ........................................................................................... 32
10.3.3. Textfeld einfügen ................................................................................................ 33
10.4. Gliederungsmöglichkeiten ........................................................................ 34
10.4.1. Spalten einfügen ................................................................................................. 34
10.4.2. Tabelle einfügen ................................................................................................. 35
10.4.3. Trennstrich einfügen .......................................................................................... 35
10.5. Funktionen für die Website ...................................................................... 36
10.5.1. Bilder hinzufügen & Bildergalerie hinzufügen .................................................... 36
10.5.1.1. Einzelnes Bild hinzufügen .............................................................................. 37
10.5.1.2. Einzelnes Bild mit Text hinzufügen ................................................................ 38
10.6. Kontaktmöglichkeiten/ Gästebuch erstellen ............................................. 39
10.6.1. Formular zur Kontaktaufnahme hinzufügen....................................................... 40
10.7. Dateien zum Download freigeben ............................................................. 41
10.8. HTML-Widget hinzufügen ......................................................................... 42
10.9. Webshop erstellenProduktübersicht ......................................................... 43
10.9.1. Shop-Produkt ...................................................................................................... 44
10.10. Funktionen von Drittanbietern ............................................................. 45
10.10.1. Bilder von Flickr darstellen ................................................................................. 45
10.10.2. Twitter-verknüpfung erstellen ............................................................................ 46
10.10.3. Share Button für Facebook und Twitter ............................................................. 47
10.10.4. YouTube Video einbinden .................................................................................. 47
10.10.5. RSS-Feed hinzufügen .......................................................................................... 48
10.10.6. Google Maps hinzufügen .................................................................................... 49
10.10.7. Facebook-verknüpfung erstellen ........................................................................ 50
10.11. YouTube .............................................................................................. 51
10.11.1. Video Upload ...................................................................................................... 51
10.12. Flickr .................................................................................................... 53
10.12.1. Bilder Upload ...................................................................................................... 53
10.12.1.1. Fotos auswählen. ...................................................................................... 54
10.13. Weitere mögliche Elemente ................................................................. 55
10.13.1. Titelbild ändern .................................................................................................. 55
10.13.2. Layout ändern ..................................................................................................... 56
10.13.3. Style ändern ........................................................................................................ 57
10.13.4. Einstellungen ändern .......................................................................................... 58
Abbildungsverzeichnis
ABBILDUNG 1: PROJEKTSTRUKTURPLAN .......................................................................... 12
ABBILDUNG 2: FWT- STARTSEITE .................................................................................. 14
ABBILDUNG 3: FWT- LOGO ......................................................................................... 15
ABBILDUNG 4: RGB FARBRAUM ................................................................................... 16
ABBILDUNG 5: CMYK- FARBMODEL .............................................................................. 17
ABBILDUNG 6: EINZELNE SEITEN- AKTUELLES ................................................................... 20
ABBILDUNG 7: EINZELNE SEITEN- GALERIE- FOTOS ........................................................... 22
ABBILDUNG 8: EINZELNE SEITEN- GALERIE- VIDEOS ......................................................... 22
ABBILDUNG 9: EINZELNE SEITEN- GALERIE- REFERENZEN ................................................... 23
ABBILDUNG 10: EINZELNE SEITEN- ÜBER MICH ................................................................ 24
ABBILDUNG 11: EINZELNE SEITEN- GÄSTEBUCH ............................................................... 25
ABBILDUNG 12: EINZELNE SEITEN- KONTAKT ................................................................... 26
ABBILDUNG 13: EINZELNE SEITE- IMPRESSUM ................................................................. 27
ABBILDUNG 14: HANDBUCH- LOGIN .............................................................................. 29
ABBILDUNG 15: HANDBUCH- ELEMENTE HINZUFÜGEN ...................................................... 30
ABBILDUNG 16: HANDBUCH- TEXTE ÄNDERN .................................................................. 31
ABBILDUNG 17: HANDBUCH- TEXTE BEARBEITEN .............................................................. 32
ABBILDUNG 18: HANDBUCH- ÜBERSCHRIFT EINFÜGEN ...................................................... 32
ABBILDUNG 19: HANDBUCH- TEXTFELD EINFÜGEN ........................................................... 33
ABBILDUNG 20: HANDBUCH- GLIEDERUNGSMÖGLICHKEITEN- SPALTEN EINFÜGEN .................. 34
ABBILDUNG 21: HANDBUCH- GLIEDERUNGSMÖGLICHKEITEN- SPALTEN MIT VERSCHIEDENEN
ELEMENTEN ...................................................................................................... 34
ABBILDUNG 22: HANDBUCH- GLIEDERUNGSMÖGLICHKEITEN- TABELLE EINFÜGEN................... 35
ABBILDUNG 23: HANDBUCH- GLIEDERUNGSMÖGLICHKEITEN- TRENNSTRICH EINFÜGEN ........... 35
ABBILDUNG 24: HANDBUCH- FUNKTIONEN- BILDER HINZUFÜGEN ....................................... 36
ABBILDUNG 25: HANDBUCH- FUNKTIONEN- EINZELNES BILD HINZUFÜGEN ............................ 37
ABBILDUNG 26: HANDBUCH- FUNKTIONEN- EINZELNES BILD MIT TEXT HINZUFÜGEN............... 38
ABBILDUNG 27: HANDBUCH- KONTAKTMÖGLICHKEITEN & GÄSTEBUCH ERSTELLEN ................. 39
ABBILDUNG 28: HANDBUCH- KONTAKTMÖGLICHKEITEN & GÄSTEBUCH ERSTELLEN- FORMULAR
ERSTELLEN ......................................................................................................... 40
ABBILDUNG 29: HANDBUCH- DATEIN ZUM DOWNLOAD FREIGEBEN ..................................... 41
ABBILDUNG 30: HANDBUCH- HTML WIDGET HINZUFÜGEN ............................................... 42
ABBILDUNG 31: HANDBUCH- WEBSHOP ERSTELLEN .......................................................... 43
ABBILDUNG 32: HANDBUCH- WEBSHOP ERSTELLEN- SHOP-PRODUKT .................................. 44
ABBILDUNG 33: HANDBUCH- FUNKTIONEN VON DRITTANBIETERN- FLICKR ............................ 45
ABBILDUNG 34: HANDBUCH- FUNKTIONEN VON DRITTANBIETERN- TWITTER ......................... 46
ABBILDUNG 35: HANDBUCH- FUNKTIONEN VON DRITTANBIETERN- SHARE BUTTON ................ 47
ABBILDUNG 36: HANDBUCH- FUNKTIONEN VON DRITTANBIETERN- YOUTUBE VIDEO EINBINDEN 47
ABBILDUNG 37: HANDBUCH- FUNKTIONEN VON DRITTANBIEDERN- RSS- FEED HINZUFÜGEN.... 48
ABBILDUNG 38: HANDBUCH- FUNKTIONEN VON DRITTANBIETERN- GOOGLE MAPS ................ 49
ABBILDUNG 39: HANDBUCH- FUNKTIONEN VON DRITTANBIETERN- FACEBOOKVERKNÜPFUNG
ERSTELLEN ......................................................................................................... 50
ABBILDUNG 40: HANDBUCH- YOUTUBE- ANMELDUNG ...................................................... 51
ABBILDUNG 41: HANDBUCH- YOUTUBE-VIDEO HINZUFÜGEN .............................................. 51
ABBILDUNG 42: HANDBUCH- YOUTUBE- VIDEO MIT WEBCAM AUFNEHMEN .......................... 52
ABBILDUNG 43: HANDBUCH- YOUTUBE-VIDEO BENENNEN, BESCHRIFEN, BEARBEITEN... .......... 52
ABBILDUNG 44: HANDBUCH- FLICKR- ANMELDUNG .......................................................... 53
ABBILDUNG 45: HANDBUCH- FLICKR- FOTOS AUSWÄHLEN ................................................. 54
ABBILDUNG 46: HANDBUCH- FLICKR- DATENSCHUTZEINSTELLUNGEN UND HOCHLADEN .......... 54
ABBILDUNG 47: HANDBUCH- WEITERE ELEMENTE- TITELBILD ÄNDERN ................................. 55
ABBILDUNG 48: HANDBUCH- WEITERE ELEMENTE- LAYOUT ÄNDERN ................................... 56
ABBILDUNG 49: HANDBUCH- WEITERE ELEMENTE- STYLE ÄNDERN ...................................... 57
ABBILDUNG 50: HANDBUCH- WEITERE ELEMENTE- EINSTELLUNGEN ÄNDERN ........................ 58
1. Vorwort
Im Rahmen unseres Ausbildungsschwerpunktes Information and
Comunication Solutions, im Pannoneum Neusiedl am See,
erhielten wir die Aufgabe eine Homepage zu gestalten.
Wir entschieden uns, mit Hilfe unseres Professors Heinz
Wurzinger, für die Homepage des Fotografen Ronald Meidlinger.
Der Fotograf sollte selbständig seine Homepage auf dem
neuesten Stand halten und eigene Fotos und Videos hochladen
können. Daher entschieden wir und für die benutzerfreundliche
Oberfläche von Jimdo.
Funktionen wie eine eigene Bildergalerie, ein Kontaktformular
sowie Informationen über den Fotografen sollten auf der
Homepage eingebaut werden. Außerdem sollte ein Handbuch für
die Benutzung der Homepage erstellt werden.
Unser Ziel war eine einfach zu bedienende, übersichtliche und
informative Homepage zu erstellen.
Auf den folgenden Seiten finden Sie eine genau Dokumentation
unserer Arbeit.
Wir hoffen dass die Internetpräsenz von FWT Element Pictures
mit unserer Homepage fortlaufend gewährleistet ist.
2. Preface
As part of our education main point Information and
Communication Solutions, at the Pannoneum Neusiedl am See,
we were given the task to make a homepage.
We decided us, with the help of our professors Heinz Wurzinger
and Adolf Selinger, for the homepage of the photographer
Ronald Meidlinger.
The photographer should be able to update his homepage by
himself and uploading photos and videos.
Therefore, we decided to use the user-friendly interface of Jimdo.
Features such as a picture gallery, a contact and information
about the photographer should be installed on the home page. In
addition a manual for the use of the website will be created.
Our goal was to create a simple-to-use, clear and informative
website.
On the following pages you will find an accurate documentation
of our work.
We hope that the continuous web presence of FWT Element
Pictures is guaranteed with our homepage.
Vorgaben der Organisation oder des Auftraggebers
Komplexität des Projekts
(Unterscheidung zwischen
technischer uns soziales
Komplexität)
Branche des Projekts
(branchen/produkt-spezifisches
Vorgehensmodell
3. Projektmanagement
Projektmanagement ist die Bezeichnung für die Gesamtheit aller
Methoden zur Durchführung von Projekten.
Es ist eine Sammlung von Werkzeugen, die es ermöglicht, eine
komplexe neuartige und zeitlich abgegrenzte Aufgabe
strukturiert zu bewältigen. Es gibt verschiedene Strukturen und
Methoden des Projektmanagements für die teilweise eigene
Vorgehensmodelle existieren.
Die Wahl der Vorgehensweise zur Durchführung eines Projekts
richtet sich meist nach:
Das Managen des Projektes beinhaltet die Festsetzung der Ziele
und Nicht-Ziele, und die Erstellung einer Meilensteinliste, die die
Arbeitspakte sowie die Zeiteinteilung enthält.
4. Ziele und Nichtziele
4.1. Ziele
Website für Ronald Meidlinger
Ideen und Vorschläge ausarbeiten
Vorstellungen mit dem Auftraggeber vereinheitlichen
Einheitliches Farbbild
Texte sollen klar formuliert und verständlich sein
Über mich
Interessenweckende Seite
Galerie
Fotos
Videos
Referenzen
Gästebuch
Kontakt
Gute Übersicht
Positiver Eindruck
4.2. Nichtziele
Unrealistische Ideen
Keine Einigung mit dem Auftraggeber
Fehlerhafte Texte, zu wenig Information
Unscharfe Bilder
Überladung der Seite
5. Jimdo
Jimdo ist ein Web-basierter Homepagebaukasten mit den
wichtigsten Funktionen für den privaten und gewerblichen
Verbrauch.
Es gibt drei Jimdo-Versionen:
Jimdo Free,
Jimdo Pro
Jimdo Business
Die Jimdo Free-Version ist völlig kostenlos und empfiehlt sich für
ein erstes Ausprobieren der Funktionen. Allerdings wird in dieser
Version eine Werbung eingeblendet, die sich nicht entfernen
lässt.
Wer von Jimdo überzeugt ist, kann auf eine werbefreie und mit
wesentlich mehr Funktionen und Designs gesegnete
kostenpflichtige höhere Version upgraden, welche sich auch viel
besser designen und bedienen lässt.
5.1. Meilensteinplan
PSP-
Code
Meilenstein Plantermine
1 Konzept erstellen/ Projektplanung 30.09.2012
2 Inhalt, Bilder, Texte und Funktionen
festlegen
27.10.2012
3 Layout aussuchen & anpassen 01.02.2012
4 Einzelne Seiten erstellen
Aktuelles
Über mich
Galerie
Gästebuch
Kontakt
10.02.2012
5 Komplexes Handbuch für Ronald
Meidlinger erstellen
16.03.202
6 Website online stellen 29.03.2012
Seite 12 von 59
6. Projektstrukturplan
Der PSP ist eine Gliederung eines Projektes in planbare und kontrollierbare Teilaufgaben. Er ist die Basis für die
Aufwandschätzung und die Planung der Abläufe, Termine und Kosten.
Die Projekte werden in Arbeitspakete und Teilaufgaben zerlegt und graphisch in einem Baum dargestellt.
Abbildung 1: Projektstrukturplan
Seite 13 von 59
7. Coporate Design Manual
Das Coporate-Design Handbuch definiert die Grundgestaltung
der Website.
Es fasst alle Merkmale des Corporate Designs zusammen und
gibt Auskunft über die entwickelten Details. Dies sind z. B.
Schriftarten, Schriftgrößen, Farbklimatafeln etc.
Diese Details werden immer wieder verwendet, dadurch bleibt
das Design der ganzen Website einheitlich.
Seite 14 von 59
7.1. FWT Element Pictures
Die Website soll ein übersichtliches und modernes Design
aufweisen.
Abbildung 2: FWT- Startseite
Seite 15 von 59
7.2. Logo
Das Logo setzt sich zusammen aus 2 Fotos, einer Überschrift und
dem Hintergrund.
Die 2 Kameras stehen für den Fotografen Ronald Meidlinger. Der
Hintergrund ist in Weiß gestaltet wie der Hintergrund der
Webseite. Die Überschrift wurde mit Form und Farbe an die
Überschrift 1 angeglichen.
Abbildung 3: FWT- Logo
Seite 16 von 59
7.3. Farben
Damit die auch die Farben einheitlich sind werden sie im
Corporate Design Manual definiert.
Dies geschieht über Farbcodes die in verschiedenen Formaten
angegeben werden.
Um die Farbe genau anzugeben gibt es verschiedene
Möglichkeiten:
Hexadezimale Angabe von Farben
o Jede hexadezimale Farbdefinition ist 6stellig und hat
das Schema: #RRGGBB.
o Zunächst notieren Sie also ein Gatter #. Dahinter
folgen 6 Stellen für die Farbdefinition. Die ersten
beiden Stellen, stellen den Rot-Wert der Farbe dar,
die zweiten beiden Stellen den Grünwert, und die
letzten beiden Stellen den Blau-Wert angegeben
werden.
o
Angabe im RGB Farbraum
o jede RGB Farbdefinition hat drei Zahlen die jeweils
einen der Werte angeben
Abbildung 4: RGB Farbraum
Seite 17 von 59
Angabe im CMYK-Farbmodel
o die Abkürzung CMYK steht für die drei
Farbbestandteile Cyan, Magenta, Yellow und den
Schwarzanteil Key als Farbtiefe
Abbildung 5: CMYK- Farbmodel
7.4. Details
Hintergrund: 7.4.1.
#ffffff color hex
RGB 255,255,255
CMYK 0.00, 0.00, 0.00, 0.00
Text: 7.4.2.
#000000 color hex
RGB 0,0,0
CMYK 0.00, 0.00, 0.00, 1.00
Überschrift 1: 7.4.3.
#be000e color hex
RGB 190,0,14
Seite 18 von 59
CMYK 0.00, 1.00, 0.93, 0.25
Überschrift 2: 7.4.4.
#8e000a color hex
RGB 142,0,10
CMYK 0.00, 1.00, 0.93, 0.44
Trennstrich: 7.4.5.
#5f0007 color hex
RGB 95,0,7
CMYK 0.00, 1.00, 0.93, 0.63
Links: 7.4.6.
#de1200 color hex
RGB 222,18,0
HSL0.01, 1.00, 0.44
HSV5°, 100°, 87°
CMYK 0.00, 0.92, 1.00, 0.13
Seite 19 von 59
7.5. Schriftart
Ein weiterer Teil des Corporate Design Manuals sind die
Schriftarten. Auch sie werden genau definiert um die
Einheitlichkeit zu gewährleisten.
Bei Veröffentlichungen im World Wide Web muss bei der
Schriftart beachtet werden dass sie gut lesbar ist und den
Textfluss beim Lesen fördert.
Um das zu gewährleisten werden im Internet serifenlose
Schriften verwendet, wie zum Bespiel:
Arial
Verdana
Für die FWT-Homepage wurden die verschiedenen Schriften wie
folgt definiert:
Text:
o Verdana
o 12pt
o 150% Zeilenabstand
Überschrift 1
o Verdana
o 25pt
o fett, linksbündig
Überschrift 2
o Verdana
o 20pt
o fett, linksbündig
Überschrift 3
o Verdana
o 17 pt
o fett, linksbündig
Seite 20 von 59
8. Die einzelnen Seiten
8.1. Aktuelles
Ist die offizielle Startseite des Fotografen und wird beim Abrufen
der URL automatisch geladen. Sie ist, wie alle anderen Seiten,
nach dem Corporate Design gestaltet. Sie enthält alle aktuellen
Inhalte die der Fotograf ins Netz stellen möchte. So können
aktuelle Arbeiten und Referenzen immer auf der Startseite
präsent sein. Durch das Menü auf der linken ist das Menü
positioniert mit dem man zu den einzelnen Bereichen der
Homepage kommt.
Abbildung 6: Einzelne Seiten- Aktuelles
Seite 21 von 59
8.2. Galerie
Die Galerie ist die Möglichkeit für den Fotografen seine Arbeit im
Internet darzustellen. Sie ist unterteilt in Fotos, Videos und
Referenzen.
In der Rubrik Fotos sind Bildergalerien von der externen
Webseite Flickr angezeigt. Die Fotos befinden sich in den
einzelnen Alben auf „Flickr“ und können somit strukturiert
gezeigt werden. Durch das Anklicken eines Fotos wird es
vergrößert und in einer „Slideshow“-Ansicht dargestellt.
Im Video-Bereich werden die Filme des Fotografen mit Titel und
Beschreibung dargestellt. Die Videos befinden sich auf der
externen Webseite „YouTube“. Sie werden per Link in die
Homepage eingebunden.
Unter Referenzen findet man die Empfehlungen von vergangenen
Projekten. Diese können als Text, Bild oder Video dargestellt
werden.
Seite 22 von 59
Fotos 8.2.1.
Videos 8.2.2.
Abbildung 7: Einzelne Seiten- Galerie- Fotos
Abbildung 8: Einzelne Seiten- Galerie- Videos
Seite 23 von 59
Referenzen 8.2.3.
Abbildung 9: Einzelne Seiten- Galerie- Referenzen
Seite 24 von 59
8.3. Über mich
Der Menüpunkt über mich zeigt einen kleinen Text über den
Fotografen. Hier findet man Informationen bezüglich seines
beruflichen Werdeganges. Es wird durch einen Text mit Bild
angezeigt werden und kann jederzeit aktualisiert oder editiert
werden.
Abbildung 10: Einzelne Seiten- Über mich
Seite 25 von 59
8.4. Gästebuch
Der Seite Gästebuch bietet den Besuchern der Webseite die
Möglichkeit Anregungen und Kommentare zu hinterlassen. Es
besteht aus einer Überschrift und dem Gästebuchelement.
Kommentare können vom Seitenbetreiber durch Mausklick
entfernt oder verborgen werden.
Abbildung 11: Einzelne Seiten- Gästebuch
Seite 26 von 59
8.5. Kontakt
Mit einem Trennstrich wird die Seite in zwei Teilen dargestellt.
Der erste Teil enthält ein Impressum das durch eine Überschrift
und zwei Spalten, in denen sich die Kontaktdaten befinden,
angezeigt wird.
Im zweiten Teil befindet sich nach einer weiteren Überschrift ein
Kontaktformular. Hier kann jeder Besucher der Homepage eine
Nachricht direkt zum Fotografen schicken. Der Missbrauch wird
durch die Pflicht seine Email-Adresse zu hinterlassen und einem
„Captcha“ (Akronym für Completely Automated Public Turing test
to tell Computers and Humans Apart. Das bedeutet) minimiert.
Die Nachrichten werden direkt auf die mit der Homepage
vernetzte Email-Adresse geleitet.
Abbildung 12: Einzelne Seiten- Kontakt
Seite 27 von 59
8.6. Impressum
Das Impressum ist eine gesetzlich vorgeschriebene
Herkunftsangabe, die Angaben über den Verlag, den Autor, und
Herausgeber enthält.
Es zeigt dem Besucher vor allem wer für den Inhalt und die
technische Umsetzung verantwortlich ist.
Abbildung 13: Einzelne Seite- Impressum
Seite 28 von 59
9. Das Jimdo- Handbuch
Das Jimdo- Handbuch ein für den Benutzer erstelltes
Nachschlagewerk, um sich schnell zurechtzufinden.
Es weist alle grundlegenden Elemente auf und beschreibt Schritt
für Schritt wie der Benutzer Sachen einfach und schnell ändern,
hinzufügen oder löschen kann.
Das Handbuch zeigt auch weiterführende und komplexere
Schritte auf, die sich auch auf die Drittanbieter dieser Seite
stützen.
So wird beispielweise auch erklärt wie man seinen Youtube- und
Flickraccount bedient und am einfachsten und schnellsten
vorankommt.
Jeder Schritt ist mit einem Screenshot, zur besseren
Nachvollziehung und Erkennung, dokumentiert.
Seite 29 von 59
9.1. Zugang zur Website - Login
Zum Log-In auf www.jimdo.com oben rechts auf Log-In klicken.
Zuerst die Adresse der Jimdo-Seite eingeben: fwt.jimdo.com
dann Passwort eingeben.
Abbildung 14: Handbuch- Login
Seite 30 von 59
9.2. Elemente hinzufügen
Neben Text und Bildern liefert Jimdo noch viele andere
Möglichkeiten Inhalt auf der Website darzustellen. Die Elemente
unterscheiden sich zwischen Möglichkeit den Text zu
strukturieren (Textfeld, Spalten,…), Funktionen für Websites
(Gästebuch, Formular,…) und Drittanbieter (Facebook,
YouTube,…).
Abbildung 15: Handbuch- Elemente hinzufügen
Seite 31 von 59
9.3. Textgestaltung
Texte ändern 9.3.1.
Um einen Text oder das dazugehörige Bild zu verändern einfach
auf das vorhandene Textfeld klicken.
Abbildung 16: Handbuch- Texte ändern
Seite 32 von 59
Es öffnet sich ein Bearbeitungsfeld mit allen zur Verfügung
stehenden Optionen.
Nach den gewünschten Änderungen einfach auf speichern klicken
um die Änderung festzuhalten.
Überschrift einfügen 9.3.2.
Abbildung 17: Handbuch- Texte bearbeiten
Abbildung 18: Handbuch- Überschrift einfügen
Seite 33 von 59
Textfeld einfügen 9.3.3.
…
Abbildung 19: Handbuch- Textfeld einfügen
Seite 34 von 59
9.4. Gliederungsmöglichkeiten
Spalten einfügen 9.4.1.
Zwei oder mehr Spalten mit verschiedenen Elementen.
Abbildung 21: Handbuch- Gliederungsmöglichkeiten- Spalten mit verschiedenen Elementen
Abbildung 20: Handbuch- Gliederungsmöglichkeiten- Spalten einfügen
Seite 35 von 59
Tabelle einfügen 9.4.2.
Trennstrich einfügen 9.4.3.
Für eine Gliederung auf der Website kann ein Trennstrich
eingefügt werden.
Abbildung 22: Handbuch- Gliederungsmöglichkeiten- Tabelle einfügen
Abbildung 23: Handbuch- Gliederungsmöglichkeiten- Trennstrich einfügen
Seite 36 von 59
9.5. Funktionen für die Website
Bilder hinzufügen & Bildergalerie 9.5.1.
hinzufügen
Bilder können direkt vom Computer oder von Dropbox
raufgeladen werden. Weiter können das Anzeigeformat (Tabelle,
Slideshow,…), die Proportionen, die Größe, der Style sowie die
Ansicht verändert werden.
Abbildung 24: Handbuch- Funktionen- Bilder hinzufügen
Seite 37 von 59
9.5.1.1. Einzelnes Bild hinzufügen
Ein Bild kann direkt vom Computer oder von Dropbox
raufgeladen werden. Man kann die Größe, die Ausrichtung und
Untertitel einstellen. Außerdem kann man das Bild drehen oder
vergrößern. Man kann auch noch einen Link zum Bild hinzufügen.
Abbildung 25: Handbuch- Funktionen- Einzelnes Bild hinzufügen
Seite 38 von 59
9.5.1.2. Einzelnes Bild mit Text hinzufügen
Hier kann man ein neues Bild hochladen und gleichzeitig einen
Text dazu erstellen.
Abbildung 26: Handbuch- Funktionen- Einzelnes Bild mit Text hinzufügen
Seite 39 von 59
9.6. Kontaktmöglichkeiten/ Gästebuch
erstellen
Hier kann ein einfaches Gästebuch für die Homepage erstellt
werden. Verschiedenen Einstellungen wie z.B. die
Benachrichtigung per Email können hinzugefügt werden.
Abbildung 27: Handbuch- Kontaktmöglichkeiten & Gästebuch erstellen
Seite 40 von 59
Formular zur Kontaktaufnahme 9.6.1.
hinzufügen
Hier kann ein Formular zur Kontaktaufnahme oder für eine
Bestellung erstellt werden.
Abbildung 28: Handbuch- Kontaktmöglichkeiten & Gästebuch erstellen- Formular erstellen
Seite 41 von 59
9.7. Dateien zum Download freigeben
Um Dateien zum Download zur Verfügung zu stellen kann man
den Dateiendownload benutzen. Man kann eine Datei vom
Computer raufladen oder von Dropbox auswählen. Titel und
Beschreibung können hinzugefügt werden.
Abbildung 29: Handbuch- Datein zum Download freigeben
Seite 42 von 59
9.8. HTML-Widget hinzufügen
Hier kann man ein Widget (Vorrichtung) einfügen das mit HTML
programmiert wurde (z.B.: ein Wetterwidget). Diese
Vorrichtungen können im Internet gesucht und dann auf der
eigenen Jimdo Seite eingebunden werden
Abbildung 30: Handbuch- HTML Widget hinzufügen
Seite 43 von 59
9.9. Webshop erstellen & Produktübersicht
Hier kann man eigene Produkte bewerben und sie mit Fotos und
Beschreibung online darstellen.
Abbildung 31: Handbuch- Webshop erstellen
Seite 44 von 59
Shop-Produkt 9.9.1.
Hier kann ein eigener Web-Shop erstellt werden.
Abbildung 32: Handbuch- Webshop erstellen- Shop-Produkt
Seite 45 von 59
9.10. Funktionen von Drittanbietern
Bilder von Flickr darstellen 9.10.1.
Um Bilder darzustellen kann neben der Jimdo-Galerie eine Flickr-
Galerie erstellt werden. Flickr ist eine externe Webseite auf der
Bilder und Videos dargestellt werden können.
Abbildung 33: Handbuch- Funktionen von Drittanbietern- Flickr
Seite 46 von 59
Twitter-verknüpfung erstellen 9.10.2.
Hier kann die externe Website Twitter eingebunden werden.
Abbildung 34: Handbuch- Funktionen von Drittanbietern- Twitter
Seite 47 von 59
Share Button für Facebook und Twitter 9.10.3.
Mit dem Share-Button kann eine Verbindung zu verschiedenen
Webseiten hergestellt werden. (z.B.: Share-Button für Facebook)
YouTube Video einbinden 9.10.4.
Mit der YouTube-Funktion können Videos direkt über die URL auf
Jimdo angezeigt werden.
Abbildung 35: Handbuch- Funktionen von Drittanbietern- Share Button
Abbildung 36: Handbuch- Funktionen von Drittanbietern- Youtube Video einbinden
Seite 48 von 59
RSS-Feed hinzufügen 9.10.5.
Mit RSS-Feed kann man die Funktion einbauen, der Website per
RSS-Feed (engl. Really Simple) zu folgen.
Abbildung 37: Handbuch- Funktionen von Drittanbiedern- RSS- Feed hinzufügen
Seite 49 von 59
Google Maps hinzufügen 9.10.6.
Hier kann man Google Maps auf der Jimdo-Seite einbinden um
Orte zu zeigen.
Abbildung 38: Handbuch- Funktionen von Drittanbietern- Google Maps
Seite 50 von 59
Facebook-verknüpfung erstellen 9.10.7.
Mit der Facebook-Funktion kann man einen „Gefällt-Mir“ Button
direkt auf der Homepage anzeigen.
Abbildung 39: Handbuch- Funktionen von Drittanbietern- Facebookverknüpfung erstellen
Seite 51 von 59
9.11. YouTube
Video Upload 9.11.1.
Um ein Video auf der Homepage anzuzeigen muss es erst auf
www.youtube.com raufgeladen werden. Die Anmeldung erfolgt
mit den Gmail Daten.
Oben rechts auf Video hochladen klicken um ein Video
hinzuzufügen.
Abbildung 40: Handbuch- Youtube- Anmeldung
Abbildung 41: Handbuch- Youtube-Video hinzufügen
Seite 52 von 59
Auswählen ob ein vorhandenes Video raufgeladen werden soll
oder ob man ein Video per Webcam aufnehmen möchte.
Weitere Angaben zum Video hinzufügen. z.B. Titel, Beschreibung
oder Datenschutzlinien.
Abbildung 42: Handbuch- Youtube- Video mit Webcam aufnehmen
Abbildung 43: Handbuch- Youtube-Video benennen, beschrifen, bearbeiten...
Seite 53 von 59
9.12. Flickr
Bilder Upload 9.12.1.
Auf der Flickr-Homepage anmelden und auf Hochladen klicken.
Abbildung 44: Handbuch- Flickr- Anmeldung
Seite 54 von 59
9.12.1.1. Fotos auswählen.
Privat oder Öffentlich auswählen und Fotos hochladen.
Abbildung 45: Handbuch- Flickr- Fotos auswählen
Abbildung 46: Handbuch- Flickr- Datenschutzeinstellungen und Hochladen
Seite 55 von 59
9.13. Weitere mögliche Elemente
Titelbild ändern 9.13.1.
Einloggen auf der Jimdo-Seite und mit dem Mauszeiger über das
Titelbild fahren, dann auf Titelbild bearbeiten klicken.
Abbildung 47: Handbuch- Weitere Elemente- Titelbild ändern
Seite 56 von 59
Layout ändern 9.13.2.
Rechts in der Einstellungsleiste auf Layout klicken und Layout
auswählen.
Normales Layout
Jimdopro-Layout
Jimdobusiness-Layout
Eigenes-Layout
Spezial-Layout
Einstellungen
Abbildung 48: Handbuch- Weitere Elemente- Layout ändern
Seite 57 von 59
Style ändern 9.13.3.
Rechts in der Einstellungsleiste auf Style klicken. Hier kann man
die Schriftart
die Farben
eigene Farben
das Hintergrundmuster
das Hintergrundbild
eigene Hintergrunde
Shop-Styles
einstellen
Abbildung 49: Handbuch- Weitere Elemente- Style ändern
Seite 58 von 59
Einstellungen ändern 9.13.4.
Rechts in der Einstellungsleiste auf Einstellungen klicken. Hier
kann man die Einstellungen der Jimdo-Seite ändern.
Abbildung 50: Handbuch- Weitere Elemente- Einstellungen ändern