Tutorial: Rekrutierungstabelle Rollenorientiert
Autor | Nachricht | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() Steamnaut ![]() ![]() Angemeldet seit: 17.08.2010 Beiträge: 5 |
Tutorial Rekrutierungstabelle: Rollenorientiert Dies ist ein Beispiel für eine Rekrutierungstabelle, in der alle gesuchten Klassen samt Spezialisierung('specc') eingetragen werden können und wie sie bereits bei der Allianz-Gilde Excalibur im Einsatz ist. Die Struktur ist so allgemein gehalten, dass sie verlustfrei und gut leserlich in jedem verfügbaren Template angezeigt wird.
Inhalt: Aufbau der Tabelle Die Überschrift Die Klassensuche Feature: Iconbeschreibung Die Tabelle (mit kommentiertem Quellcode) Troubleshooting _____________________________________________________________________________ Der Aufbau der Tabelle World of Warcraft unterscheidet im Dungeonfinder die Aufgaben in die 3 Rollen: Schutz, Heilung und Schaden. Ich habe mich für 4 Rollen entschieden und die Schadensklasse in Nah- und Fernkampf unterteilt. Unter jeder der 4 Rollen befinden sich immer zwei Icons, die die gesuchte Klasse und deren Rollenspezialisierung ('specc') definieren. Links steht die Klasse, rechts davon die Spezialisierung, dahinter ist ein Leerfeld zur besseren Lesbarkeit. Bevor man sich mit dem Gestalten und Editieren von Tabellen beschäftigt, möchte ich auf Xelas sehr ausführliche Anleitung verweisen, in der einem die BBCode- Tags der verschiedenen Tabellenelemente vertraut gemacht werden. http://wowgilden.net/forum-topic_1123.html Die Überschrift Die Tabelle besteht damit aus 11 Spalten. Für die großen Rollenicons der Überschrift habe ich jeweils 2 Zellen miteinander verbunden Code:[td=join:2] [/td] Damit in der Überschrift zwischen den Rollenicons ausreichend Abstand besteht, habe ich neben den sichtbaren Icons in den leeren Spalten noch kleinere (32x32px) transparente Icons verborgen. (Sie werden deutlich, wenn man den Bereich mit der Maus markiert.) So konnte ich eine feste Spaltenbreite gewährleisten. Der transparente Platzhalter trägt die Galerie-ID: 28792 und wird wie alle Icons über den Bildergalerie-BBCode-Befehl eingebunden: Code:zB. [gallery]28792[/gallery] Damit besteht die Überschrift beispielsweise aus folgendem BBCode: Code: [table=center] [th] [td=join:2][center][gallery]28772[/gallery][/center] [center]SCHUTZ[/center][/td] [td][gallery]28792[/gallery][/td] [td=join:2][center][gallery]28773[/gallery][/center] [center]HEILUNG[/center][/td] [td][gallery]28792[/gallery][/td] [td=join:2][center][gallery]28774[/gallery][/center] [center]NAHKAMPF[/center][/td] [td][gallery]28792[/gallery][/td] [td=join:2][center][gallery]28775[/gallery][/center] [center]FERNKAMPF[/center][/td] [/th] [table=center] Die darauffolgende Gliederung der Klassen habe ich mit einer dünnen Leerzeile eingefasst, die jeweils am Anfang und am Ende steht. Es ist einfach eine Zeile, bei der ich die 11 Zellen zu einer einzigen verbunden habe. Da die Zelle keine Inhalt hat, wird sie lediglich als dünner Strich dargestellt. Der Befehl dafür lautet: Code: [tr][td=join:11][/td][/tr] Die Klassensuche Die Icons hier sind 32x32 Pixel groß Als Beispiel für eine Klasse, die tatsächlich in jede der 4 möglichen Rollen schlüpfen kann, wähle ich als Beispiel hier den Druiden. Er kann in Bärenform tanken, in Baumgestalt heilen, verursacht Nahkampfschaden in Katzenform und zaubert in Eulenform. Wir vergeben also unter jeder Rolle jeweils das Druidensymbol (insgesamt 4x in dieser Zeile). Nach dem Klassensymbol fügen wir dann jeweils die Spezialisierung hinzu, die durch die Talenticons dargestellt wird. Eine Besonderheit hier ist, dass Bären- und Katzenform aus dem gleichen Talentbaum stammen und sich somit ein Icon teilen. Der BBCode für diese Zeile lautet: Code: [tr] [td][gallery]28673[/gallery][/td] [td][gallery]28675[/gallery][/td] [td][/td] [td][gallery]28673[/gallery][/td] [td][gallery]28676[/gallery][/td] [td][/td] [td][gallery]28673[/gallery][/td] [td][gallery]28675[/gallery][/td] [td][/td] [td][gallery]28673[/gallery][/td] [td][gallery]28674[/gallery][/td] [/tr] Das Layout der Zeile zieht sich automatisch zurecht, wenn man die Überschrift und die beiden Leerzeilen am Anfang und Ende hinzufügt.
Feature: Icon-Beschriftung durch mouseover tooltips Wenn man mit der Maus über die unbeschrifteten Klassen- und Talentbaumicons fährt, erscheint die jeweilige Bezeichnung in Gestalt eines Tooltip. Möglich macht dies der neu implementierte BBCode-Befehl ... der jede zu beschreibenden Grafik umschliessen muss. Da dieser Befehl allerdings für jede einzelne Grafik erneut gesetzt werden muss und die Rekrutierungstabellen ohnehin sehr grafiklastig sind, bläst dies den Quellcode noch weiter auf, so dass ich im Weiteren in meinen Tutorials auf die Tooltip-Anzeige verzichte. Bereits oben aufgeführter BBCode würde inklusive der Tooltips dann zu diesem Quellcode werden: Code:* * * Quellcode mit Tooltip-Beschreibung * * * [tr] [td][tooltip="Druide"][gallery]28673[/gallery][/tooltip][/td] [td][tooltip="Wilder Kampf (Bärengestalt)"][gallery]28675[/gallery][/tooltip][/td] [td][/td] [td][tooltip="Druide"][gallery]28673[/gallery][/tooltip][/td] [td][tooltip="Wiederherstellung"][gallery]28676[/gallery][/tooltip][/td] [td][/td] [td][tooltip="Druide"][gallery]28673[/gallery][/tooltip][/td] [td][tooltip="Wilder Kampf (Katzengestalt)"][gallery]28675[/gallery][/tooltip][/td] [td][/td] [td][tooltip="Druide"][gallery]28673[/gallery][/tooltip][/td] [td][tooltip="Gleichgewicht"][gallery]28674[/gallery][/tooltip][/td] [/tr] Rekrutierungstabellen, die sehr kompakt gehalten sind und daher weitestgehend auf beschreibende Titel verzichten, sollten jedoch unbedingt mit Tooltips versehen werden, um dem Benutzer die Navigation zu erleichtern. Die Tabelle mit kommentiertem Quellcode Das Besondere am Tabellen-BBCode ist, dass die Farbe der Zeilen automatisch alterniert, sich also zwei Farben stets abwechseln, um die Tabelle noch leserlicher zu machen. Je nach gewähltem Template kommen automatisch zwei unterschiedliche Farben zum Einsatz.
Der komplette Quellcode für das zuletzt angezeigte Beispiel folgt unten. In drei Zeilen muss der Druide dafür herhalten. Für andere Klassen und deren Spezialisierungen muss lediglich die Bild-ID angepasst werden. Wird eine Klasse oder eine Spezialisierung nicht gesucht, kann die Zelle einfach leer bleiben, in dem der Gallery-BBCode entfernt wird. Das Layout bleibt davon unberührt und wird nicht verzerrt. Hier folgt der Quellcode für ein vollständiges Tabellengerüst. Die mit * * * Sternen versehenen Kommentare müssen vor dem Einsatz entfernt werden, da sie nicht interpretiert werden können. Anschließend kann man meinen Quellcode per copy & paste für den individuellen Bedarf und zur eigenen Anpassung auf seine Gildenseite ziehen. Code: [table=center] [th] * * * HIER BEGINNT DIE ÜBERSCHRIFT * * * [td=join:2][center][gallery]28772[/gallery][/center][center]SCHUTZ[/center][/td] [td][gallery]28792[/gallery][/td] [td=join:2][center][gallery]14388[/gallery][/center][center]HEILUNG[/center][/td] [td][gallery]28792[/gallery][/td] [td=join:2][center][gallery]14389[/gallery][/center] [center]NAHKAMPF[/center][/td] [td][gallery]28792[/gallery][/td] [td=join:2][center][gallery]14390[/gallery][/center][center]FERNKAMPF[/center][/td] [/th] * * * ÜBERSCHRIFT ENDE * * * [tr][td=join:11][/td][/tr] [tr] * * * ERSTE ZEILE * * * [td][gallery]28673[/gallery][/td] * TANK * * * [td][gallery]28675[/gallery][/td] * TANK-SPECC * [td][/td] [td][gallery]28673[/gallery][/td] * HEILER * * * * [td][gallery]28676[/gallery][/td] * HEILUNGS-SPECC * [td][/td] [td][gallery]28673[/gallery][/td] * NAHKAMPF * * [td][gallery]28675[/gallery][/td] * DD-SPEC * * [td][/td] [td][gallery]28673[/gallery][/td] * FERNKAMPF * * [td][gallery]28674[/gallery][/td] * RDD-SPECC * * [/tr] * * * ERSTE ZEILE * * * [tr] * * * ZWEITE ZEILE * * * [td][gallery]28673[/gallery][/td] [td][gallery]28675[/gallery][/td] [td][/td] [td][gallery]28673[/gallery][/td] [td][gallery]28676[/gallery][/td] [td][/td] [td][gallery]28673[/gallery][/td] [td][gallery]28675[/gallery][/td] [td][/td] [td][gallery]28673[/gallery][/td] [td][gallery]28674[/gallery][/td] [/tr] * * * ZWEITE ZEILE * * * [tr] [td][gallery]28673[/gallery][/td] [td][gallery]28675[/gallery][/td] [td][/td] [td][gallery]28673[/gallery][/td] [td][gallery]28676[/gallery][/td] [td][/td] [td][gallery]28673[/gallery][/td] [td][gallery]28675[/gallery][/td] [td][/td] [td][gallery]28673[/gallery][/td] [td][gallery]28674[/gallery][/td] [/tr] [tr][td=join:11][/td][/tr] [/table] Troubleshooting Aktualität Dieses Tutorial, wie alle Beiträge des "The Fat of the Land"-Freundeskreises werden laufend aktualisiert. Dies bedeutet im Besonderen, dass sich durch Patches und Addons seitens Blizzard die Icongrafiken verändern können. Ich werde unter der jeweiligen Gallery-ID stets die neuen Grafiken einspielen, so dass dann jene angezeigt werden, ohne den Quellcode aktualisieren zu müssen. Formatierung Aufgrund der unterschiedlichen in Verwendung befindlichen Templates rate ich ausdrücklich dazu, keine eigenen Schriftfarben oder Formatierungen mit absoluten Formatierungen einzusetzen. Allgemeingültige Formatierungen werden automatisch an das jeweilige Template angepasst und sind stets mit der angezeigten Webseite kompatibel, setzt man aber nun eigenständig beispielweise eine schwarze Schrift ein, führt das dazu, dass die Schrift nicht mehr lesbar ist, wenn ein neu gewähltes Template eventuell schwarz als Hintergrundfarbe einsetzt. Oder zwingt man beispielweise eine Tabelle auf eine bestimmte Größe, kann dies ebenfalls zu Darstellungsfehlern führen, wenn die Webseite später zwischen ein- und zweispaltigen Seitenleisten wechselt. Endlektorat Ich habe meinen Beiträge mit Sorgfalt erstellt. Da das Bearbeitungsfenster nur 9 Zeilen gleichzeitig anzeigt, ist es aber gut möglich, dass ich neben Tippfehlern auch fehlerhafte Umbrüche oder Darstellungsfehler eingebaut habe. Auch ist es möglich, dass nach einer Aktualisierung der angezeigte Quellcode von der gewünschten Darstellung abweicht, weil ich versäumte, beide Codes abzugleichen. In diesen Fällen freue ich mich natürlich über eine Benachrichtigung durch aufmerksame Leser an mein Postfach Generell stehen die Gildenautoren und Beitragsverfasser für technische Fragen, schulterklopfende Lobhudelei und tobsüchtige Verrisse zur Verfügung. Zuletzt bearbeitet am: 01.12.2010 21:55 Uhr. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||