Nutzerseiten-Guide

#937058 von LukeSkywalker
24.12.2012, 10:27
Anleitung zum Erstellen einer Benutzerseite

Um eine Benutzerseite zu erstellen, folge diesem Link: http://user.pokefans.net/userpage
Die Voraussetzungen dafür, dass du eine Seite erstellen kannst, sind, dass du mindestens 10 Beiträge besitzt und einen Karmastand von -1 oder größer hast.

Dort findest du zunächst einen Editor für den Inhalt deiner Seite (ein WYSIWYG-Editor, d.h. du siehst sofort, wie der Text am Ende ausschauen wird, und benötigst keine Kenntnisse in HTML), sowie eine Nutzungsstatistik und einen Link zur Vorschau deiner Seite.

Die Verwendung des Editors ist im Prinzip sehr einfach, und ähnelt den bekannten Textverarbeitungsprogrammen. Wichtig für diese Einführung sind vor allem zwei Punkte (siehe Bild):
  • Die Quellcodeansicht im Menü des Editors. Hier kannst du direkt den HTML-Code deiner Seite bearbeiten.
  • Die "HTML-Navigationsleiste" am Ende des Editors. Sie gibt dir an, in welchem HTML-Element du dich gerade befindest.

Hinweis für Experten: Du kannst innerhalb deiner Benutzerseite kein Javascript verwenden! Beachte daher, dass alle Event-Attribute von HTML (onclick, onprogress, ...) nicht auf einer öffentlichen Seite verfügbar sind! Daher sind auch die <script> und <style>-Elemente gesperrt!


Unterhalb des Buttons "Änderungen speichern" findest du außerdem noch diverse Einstellmöglichkeiten. Da diese dort sehr gut beschrieben sind, werde ich hier nicht näher darauf eingehen, stattdessen gibt es ein paar Hinweise zum CSS-Editor.

Achtung: Den CSS-Editor kannst du erst dann verwenden, wenn du mindestens +1 Karma hast oder mehr als 100 Beiträge erstellt hast. Dein Karmastand darf aber nicht kleiner als Null sein! CSS, das du innerhalb von style-Attributen verwendest, ist von dieser Einschränkung nicht betroffen.

Im Textfeld "Individuelle Formatierungen" kannst du das Design deiner Benutzerseite bearbeiten - benutzen kannst du hierfür die Sprache CSS (Cascading Stylesheets), zu der es einen guten Guide hier im Forum gibt. Beachte aber, dass du nur das Design innerhalb vom Element #userpage anpassen darfst - Formatierungen, die darüber hinaus gehen (Navigationsleiste der Seite, das Suchfeld, ...) sind nicht erlaubt!


Design-Sammlung

Im folgenden findest du ein paar einfache Designs für deine Benutzerseite, die du beliebig verändern kannst. Beachte, dass du die meisten der Änderungen nur in der Quellcodeansicht vornehmen kannst!

Spaltendesigns


Um ein Design mit mehreren Spalten zu erzeugen, gibt es verschiedene Möglichkeiten. Einerseits kannst du auf 2 Spalten zurückgreifen, die entweder gleichmäßig breit, oder mit einer größeren und einer schmaleren Spalte sind - andererseits kannst du auch auf drei gleichmäßig große Spalten zurückgreifen.


Zwei gleichgroße Spalten
Wie der Name bereits vermuten lässt, kannst du mit folgendem HTML-Code zwei gleichgroße Spalten erzeugen. Der Inhalt der jeweiligen Spalte steht immer innerhalb der <div>-Elemente - du kannst sie aber auch in der ẂYSIWYG-Ansicht bearbeiten. Achte dabei auf die rote Linie, die dir angibt, in welchem der <div>s du gerade arbeitest, d.h. welche der Spalten von dir derzeit bearbeitet wird!

Code: Alles auswählen<div class="spalte2">
    Inhalt von Spalte 1
</div>

<div class="spalte2">
    Inhalt von Spalte 2
</div>



Zwei Spalten - links breit, rechts schmal
In diesem Design hast du zwei Spalten, von denen die rechte schmaler ist als die linke. Das lässt sich bspw. für eine Navigation oder Anmerkungen nutzen!

Code: Alles auswählen<div class="spalte-breit">
    Inhalt der breiten Spalte (links)
</div>

<div class="spalte-schmal">
    Inhalt der schmalen Spalte (rechts)
</div>



Zwei Spalten - links schmal, rechts breit
Um das umgekehrte Design zu erzeugen, vertausche einfach die Reihenfolge der <div>s:

Code: Alles auswählen<div class="spalte-schmal">
    Inhalt der schmalen Spalte (links)
</div>

<div class="spalte-breit">
    Inhalt der breiten Spalte (rechts)
</div>


Multiseiten-Layout mit Tabs


Eine Seite, auf der sehr viel unstrukturierter Text steht, wird schnell unübersichtlich. Daher gibt es die Möglichkeit, mehrere Seiten mithilfe von Tabs zu erstellen. Konkret bedeutet das, dass - ähnlich wie in einem Browser - auf jeder Unterseite ein eigener Inhalt steht. Beachte aber, dass du für diese Funktion einen Karmastand von +1 oder höher benötigst!

Um ein Tabdesign zu erstellen, musst du dir zunächst überlegen, wie viele Tabs du benötigst, und welchten Titel sie haben sollen. Anschließend füge am Anfang des Quelltextes folgenden HTML-Code ein:
Code: Alles auswählen<menu class="tabs">
    ...
</menu>


Damit auch für jede Seite ein eigener Menüpunkt erscheint, füge anstelle der drei Punkte im <menu>-Tag für jeden Menüpunkt folgenden Code ein:
Code: Alles auswählen<li><a href="#{UID}">Beschriftung des Tabs</a></li>


Dabei steht {UID} für eine einzigartige #ID für jeden Tab. Das kann beispielsweise tab1, tab2 sein - wichtig ist nur, dass dort für jeden Tab ein anderer Wert steht.

Wenn du jetzt die Seite speicherst, erscheint immerhin schon eine Navigation. Was noch fehlt, ist der eigentliche Inhalt für jeden Tab. Dazu erstellen wir für jeden Tab folgendes HTML-Gerüst:
Code: Alles auswählen<div id="{UID}">
    Inhalt des Tabs
</div>

Hier musst du in jedem Tab {UID} durch die #ID ersetzen, die du ihm in der Navigation zugewiesen hast. Das stellt sicher, dass beim Klick auf das jeweilige Navigationselement auch der Inhalt dieses Tabs angezeigt wird.

Abschließend ist hier noch ein kleines Beispiel für eine Seite mit zwei Tabs:
Code: Alles auswählen<menu class="tabs">
    <li><a href="#tab1">Titel von Tab 1</a></li>
    <li><a href="#tab2">Titel von Tab 2</a></li>
</menu>

<div id="tab1">
    Du befindest dich derzeit auf Tab #1. Füge hier deinen Text ein.
</div>

<div id="tab2">
    ... und jetzt befindest du dich auf Tab #2.
</div>


Hinweis: Du kannst den Inhalt der Tabs auch im WYSIWYG-Editor bearbeiten. Achte nur darauf, dass du dich im richtigen Element befindest. Am leichtesten kannst du das feststellen, indem du in der HTML-Ansicht in jedem Tab einen einzigartigen Inhalt erstellst (bspw. eine fortlaufende Nummerierung), und diesen Inhalt dann im WYSIWYG-Editor ersetzt.


Design mit Fußzeile (Footer)


Um bei einem Design mit beliebig vielen Spalten eine Fußzeile einzufügen, füge den folgenden HTML-Code an das Ende des bisherigen Quelltextes an:
Code: Alles auswählen<hr clear="all" />
<div class="bs-footer">
    Text im Footer
</div>


Wenn du nun in die WYSIWYG-Ansicht wechselst, sollte am Ende des Dokuments "Text im Footer" stehen. Ersetze das nun einfach mit deinem Wunschtext. Achte aber darauf, dass der Text immer unterhalb des letzten roten Rahmens steht!


Design mit Kopfzeile


Analog zur Fußzeile lässt sich in deiner Benutzerseite auch ein Header einbauen, der vor allen anderen Elementen steht. Verwende dazu den folgenden HTML-Code, den du an den Anfang des Quelltextes einfügst:
Code: Alles auswählen<div class="bs-header">
    Text im Header
</div>
<hr clear="all" />


Im WYSIWYG-Editor steht nun ganz am Anfang "Text im Header" - verändere diesen Text, wenn du willst. Achte aber darauf, dass der Header nur oberhalb der roten Linie gültig ist. Falls du außerdem ein Mehrseitendesign benutzt (siehe unten), willst du diesen Text eventuell erst nach </menu> einfügen, damit er unterhalb der Navigation steht.



Codeschnipsel

Hier findet sich eine Sammlung von diversen HTML-Codes, die du auf deiner Seite einsetzen kannst.

Hinweis für Experten: Wie du vielleicht schon gemerkt hast, kannst du auf deiner Benutzerseite relativ frei HTML benutzen. Das bedeutet auch, dass die neuen Funktionen von HTML-5 (Multimedia, ...) und CSS-3 verwendbar sind!


Einen Audioplayer erstellen


Dank HTML-5 ist es möglich, auch ohne Plugins wie Adobe Flash Audiodateien abzuspielen. Der Nachteil davon ist, dass es diese Funktion noch nicht in allen Browsern gibt - es ist daher vorteilhaft, einen aktuellen Browser wie bspw. Google Chrome zu benutzen.

Wichtiger Hinweis: Um eine Audiodatei in deine Seite einzubinden, benötigst du auch die Rechte an dieser!

Sobald du die Audiodatei ins Internet hochgeladen hast, benötigst du die URL zu dieser. Anschließend füge in deiner Benutzerseite folgenden Code ein; ersetze dabei {URL} durch die URL zu deiner Datei.

Code: Alles auswählen<audio src="{URL}" controls="true"></audio>
-0
+0

Werbung

Registriere dich kostenlos und beteilige dich aktiv in diesem Forum, um diese Werbung auszublenden.


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste