Wie geht was mit Jimdo und wie werde ich zum Jimdo-profi?

Diese Frage werden sich vor allem Neulinge stellen. Aber auch Vortgeschrittene. Jimdo's Einfachkeit ist manchmal kompliziert, oder man kommt gar nicht auf Gedanken, dass es noch komplizierter und atemberaubender werden kann.

Hier möchte ich erläutern wie man vom "Nichts-Wisser" zum "Überflieger" wird.

Das wichtigste ist, diese Anleitung genau zu lesen und versuchen den Inhalt zu begreifen. Sinnvoll ist auch das eben gelesene einfach auszuprobieren.

Erste Schritte

Zuerst machen wir uns einmal mit der Navigation vertraut. Wenn man sich einloggt steht darunter "Navigation bearbeiten". Doch was will man da bearbeiten, ist doch eh alles da.

Das stimmt soweit, nur man kann Unterseiten anlegen (Eine Homepage besteht ja auch nicht aus nur einer Seite), diesen Ebenen zuweisen oder sie einfach löschen oder umbennenen.

Klingt einfach, doch das kanns ja nicht sein. Man klickt auf ein Knöpfchen, gibt einen Namen ein und schon hat man eine weitere Seite die in der Navigation eingetragen ist?!

Doch genau so simpel ist es.

Versuche es doch selbst und löeche einfach die "Über mich" Seite und erstelle eine komplett neue.

Gut. Unterseiten anlegen klappt soweit. Doch was können diese Pfeile, der Papierkorb und das Auge?

Mit den Pfeilen kann man eine Seite um eine "Ebene" verschieben. Das heißt, der Besucher sieht zuerst nur die erste Ebene. Wählt er eine Unterseite aus, so sieht er auch alle Unterseiten der 2ten Ebene.

Wozu ist das gut?

Ganz einfach um Ordnung zu halten.

Zu dem Auge. Das ist am genialsten. Einmal draufgedrückt und gespeichert wird die Seite "durchgestrichen". Wozu ist das wieder gut fragst du dich.

Ganz einfach das heißt, dass nur du diese Seite siehst. Für deine Besucher erscheint sie einfach nicht in der Navigation. Das ist für den weiteren Verlauf sehr wichtig.

Sobald du nun in der Navigation eine frisch erstellte Seite auswählst, siehst du dort ein Auswahl-Fenster. Hier siehst du alle, zur Zeit verfügbaren Module. Wählst du eines aus, kannst du dementsprechend Sachen machen.

Ein kleines Beispiel: mit Überschrift kannst du Überschriften erstellen. Mit Youtube, kann man Youtube-Videos einbinden. Ist doch logisch.

Rechts im Admin-Bereich siehst du das "Menü". Hier können die wesentlichsten Dinge eingestellt werden, wie Schriftfarbe, Passwort geschützte-Bereiche und Ähnliches. Im weiteren Verlauf der Anleitung wirst du auch öffters "im rechten Menü" oder "rechts im Menü" lesen. Dann ist genau dieses Menü gemeint.

Wenn du jetzt über ein bestehendes Modul mit der Maus fährst, wird dieses Modul hervorhgehoben (durch einen Rahmen).

Wenn du jetzt mit der Maus an die linke Seite des Modules fährst klappt eine Leiste aus.

In dieser Leiste befinden sich verschiedene Symbole.

Mit dem + klappt die Modul-Auswahl auf - Wählst du ein Modul aus so wird es unter das Modul gesetzt bei dem du geklickt hast.

Mit den Pfeilen kannst du, wenn möglich, ein Modul vor oder hinter ein benachbartes Modul setzen (also innerhalb einer Seit verschieben).

Der Papierkorb ist eindeitig - er löscht das Modul.

Erste Übungen

1) erstelle eine neue Unterseite

2) Benenne diese "Übung 1"

3) Erstelle dort eine Überschift (1) "Pokemon"

4) Füge darunter einen Text zum Thema Pokemon ein

5) Unter dieses Modul eine Überschrift (2) "Videos"

6) Jetzt einen Trennstrich

7) Füge ein Youtube-Modul ein; Die Adresse: http://www.youtube.com/watch?v=DKEHQgcK2V8&feature=fvst

8) Verschiebe den vorher erstellten Trennstirch unter das Video

9) Schreibe in einem Textfeld "Das selbe Video als Widget"

10) Füge nun ein "Widget/ HTML-Modul" ein. Verwende folgenden Code:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/DKEHQgcK2V8&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/DKEHQgcK2V8&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

11) Lösche die gesamte Seite wieder.

Alles gut geganegen?

Übe noch ein wenig (einfach ein wenig herum-basteln) und dann gehts schon zu den Fortgeschritten!

Jimdo für Fortgeschritte

...zuerst würde ich dir raten einfach einmal die Anleitungen aus dem Index aller Anleitungen (die bisher im Forum gepostet wurden) von "Leicht" bis "Fortgeschritten" zu probieren.

Um wirklch weiter zu kommen als jetzt sind Grundkenntnisse über Webdesign erforderlich.

Das wichtigeste, was du beachten solltest, ist dass der Besucher verwöhnt werden möchte also keine Anstrengungen zu hoch sind.

Wie du vielleicht weist ist HTML für jede Homepage unumgänglich.

Doch was heißt HTML eigentlich?

Hyper Text Markup Language.

Wichtig: keine Homepage (außer sehr alte Homepages) setzten sich nur aus HTML zusammen. Der zweite Bestandteil ist CSS. Denn in HTML ist legetlich der Inhalt geschriben. Doch dieser Inhalt, sieht meistens nicht besonders toll aus. Daher formatiert man ihn mit CSS.

die wichtigesten HTML-Befehle:

Alles klar soweit?

Um dieses Wissen zu festigen, setzten wir jetzt zwei Youtube-Yideos mit Hilfe einer Tabelle nebeneinander.

Darunter fügen wir einen Link ein.

Los gehts.

Schritt1:

Überlegen wie wir das angehen:

Also die beiden Videos sollen in einer Zeile sein, das heißt wir benötigen eine Tabelle mit zwei Zeilen.

In jeder Zeile müssen zwei Zellen sein.

Den Link fügen wirin die untere Zeile ein

<table>
<tr>
<td>
ZELLE1
</td>
<td>
ZELLE2
</td>
</tr>

<tr>

<td>

Link ZELLE1

</td>

<td>

Link ZELLE2

</td>

</tr>
</table>


Für die bessere Lesbarkeit sind zusammengehörende Tags gleich gefärbt.

Jetzt suchen wir uns einfach 2 Youtube-Videos.

Rechst in der "Info-Box2 steht auch immer so ein Code. Diesen benötigen wir jetzt für unser Video, da wir unseren Code via widget/HTML einbauen. Darum hilft uns auch das Youtube-Modul von Jimdo nichts.

Für meinen Code verwende ich Gigi d' Agostino - The Riddle und FloRida - Right Round.

Also fügen wir die Video-Codes in die Zellen ein.

Das sieht dann so aus:

...und so baut man einen Link auf:

wir fangen klein an:

LINKTEXT

das ist der Teil der der Besucher sieht. Zuerst müssen wir einen HTML-Tag "drüber-legen" um dem Brwoser zu zeigen, dass es sich um einen Link handelt.

<a>LINKTEXT</a>

Super. Jetzt siehts schon aus wie ein Link, kann aber noch nichts.

Dazu müssen wir dem Link Parameter verpassen. Der wichtigste: href

Das ist der Parameter der das Ziel beinhaltet.

<a href="ZIEL">LINKTEXT</a>

Fertig. Der "einfach" Link ist bereit für die Nutzung.

Wir wollen jetzt, dass er sich in einem neuen Fenster öffnet. Daher verwenden wir jetzt einen Zusatz-Parameter: target.

<a href="ZIEL" target="_blank">LINKTEXT</a>

Jetzt fügen wir in unsere Tabelle die Links ein...

Das sieht dann so aus:

Sieht doch ganz gut aus. Zeit für weitere Befehle zum verschönern solcher Tabellen:

Also schreiben wir jetzt mit einer Überschrift (2) den Titel des jeweiligen Videos dazu. Danach Zentrieren wir die Tabelle und die Überschriften.

Los gehts!

Fangen wir mit den Überschriften an. das geht am leichtesten.

Also h- und eine Nummer drann ergibt eine Überschrift.

demnach ist <h2> eine Überschrift 2.

Also fangen wir mit unserem Überschrifts-Code an:

<h2>TITEL DES VIDEOS</h2>

Fertig. Wir haben eine Überschrift2. Jetzt fügen wir sie in unseren Code ein, wo wir vorher noch eine Zeile hinzufügen müssen (ab jetzt nicht mehr gefärbt!).

...schauen wir einmal wie das jetzt aussieht:

Perfekt! Jetzt müssen wir es nur noch zentrieren.

<center> ist einer der simpelsten Befehle. Er zentriert alles was in ihm steht.

Beispiel:

<center> zentrierter Text </center>

Noch einfacher geht's nicht mehr!

Also jetzt setzten wir das folgender Masen um:

wir lassen den Tag am Anfang des Codes beginnen und am Ende enden.

Und schon ist die Tabelle zentriert.

Auf gehts!

Um die Wirkung des <center> besser zu sehen habe ich einen schwarzen Rahmen über die maximale-Breite gelegt.

Zweite Übung

Ersetelle an Hand dieses Beispiels eine ähnliche Tabelle (bitte nicht den Code kopieren. Du schadest dir selbst!).

Die zu verwendenden Videos:

Bracode Brothers - Flute

DJ Dado - Dreamscape

Du bist übereifrig und möchtest weitere Videos einbauen?!

Hier sind noch welche:

DJ Dado - X Files

Scooter - Rhapsody in E

Zur Kontrolle kannst du den Code einfach via Widget / HTML- Modul einbinden.

Gratulation, du hast die Grundlage von HTML absolviert. Widmen wir uns jetzt CSS.

Hier eine Auflistung der wichtigsten Befehle:

du fragst dich was ein Pixel ist... ganz einfach ein Bildpunkt.

Und so verwendet man das:

oben bei den HTML-befehlen wird immer "style" angeführt, doch ich bin bis jetzt nicht darauf eingegangen, denn dieser bereich ist für css-Befehle.

Ein kleines Beispiel (ich erkläre es nachher):

<div style="border-color: #990000; border-width:1px; border-style:solid; background-color: red; color:yellow;">

WICHTIG

</div>

Das sieht dann so aus:

Für die Erklärung zerlegen wir den Code in seine Bestandteile.

Also wir haben den Text WICHTIG der in einem <div> </div> steckt. Wenn du Oben nachschaust, steht bei div als Parameter nur style dabei. Und tatsächlich wir haben auch nur style benötigt.

Als erstes definieren wir eine Rahemnfarbe (border-color). Hierbei können wir zwischen englischen oder Hexa-Dezimal Angaben wählen. Um dem Computer klar zu machen, dass es sich um einen Hexa-Wert handelt schreibt man eine Raute (#) voraus.

Hexa: grichisch 6. Daher auch 6 Stellen. die ersten 2 geben die Rot-Leuchtkraft an. Die nächsten Zwei Grün. Die Letzten Blau. Der Wert liegt zwischen 00 (Farbe leuchtet gar nicht) oder FF (leuchtet so intensiv wie möglich. #FF0000 entspricht dem "Feuerwehr-Rot".).

Gleich nach der Rahmen-Farbe steht schon die Dicke in Pixel. Ein Pixel ist ein Bildpunkt. Demnach haben wir den dünnsest möglichen Ramen (auch wenn er so dünn ist ist es sinvoll einen dünkleren rahmen herum zu ziehen, um dieses Element besser abzugrenzen).

Jetzt fehlt nur noch die Rahmen-Art. Oben steht, dass man die in "englisch" angibt. Ist auch so. man kann zwischen solid, double oder dottet wählen.

Bei background-color (Hintergurnd-Farbe) haben wir den englischen Farb-Wert: rot (#FF0000). In diesem fall war es kürzer zum tippen.

color ist, wie wir schon gelesen haben die textfarbe. Wie du siehst habe ich mich für den englischen Wert entschieden (ist bei Grundfarben ratsahm, da diese immer super aussehen!).