Guide: Externe Allianzseite

  • Spiel

  • Guide: Externe Allianzseite

    Da ich die Menge an Informationen über die Gestaltung der externen Allianzseite im Allianz-Guide sehr gering finde, wollte ich hier mal kurz alles Wissenswerte zusammenfassen

    Allgemein über die Externe:
    Wer den Allianzenguide gelesen hat, sollte bereits wissen, dass hier mit HTML und BBcode gearbeitet werden kann.
    Beide "sprachen" müssen folgendes Schema einhalten:

    HTML Source Code

    1. <Anfang mit Funktion> Text/Bild </Ende>


    1. Der Hintergrund:
    Es gibt zwei Möglichkeiten:
    • Farbe als Hintergrund
    • Bild als Hintergrund
    Die Farbe stellt ihr wie folgt ein:

    HTML Source Code

    1. <div style="background-color:#000000;"> Text/Bilder </div>

    Text/Bilder steht hier für die Objekte oder den Text, der sich auf eurer externen Seite befinden soll.
    Die sechs Nullen stellen in diesem Beispiel die Farbe Schwarz dar.
    Weite Farbcodes findet ihr HIER
    ______________________________________________________________________________
    Das Bild als Hintergrund wird nun etwas komplizierter:

    HTML Source Code

    1. <div style="background-image:url(Link zum Bild);"> Text/Bilder </div>

    Folgendes muss jetzt beachtet werden:
    Wollt ihr ein Muster als Hintergrundbild, so reicht es, die URL des gewünschten Bildes in den Code einzufügen.
    Wollt ihr jedoch ein ganz bestimmtes (vielleicht selbst gemachtes Bild) als Hintergrund, so müsst ihr dieses
    erst zuschneiden.
    Wenn ihr das nicht könnt, bittet doch einfach jemanden aus der Grafik-Abteilung.
    Für die aber, die sich damit auskennen: Das Bild muss 650px breit sein.
    Achtung: Falls euer Hintergrundbild keinen Text enthält & nur als Muster gedacht ist solltet ihr den folgenden Schritt NICHT ausführen:
    Falls ihr nun das Problem habt, dass euer Hintergrundbild sich nicht über die ganze Seite erstreckt, so müsst ihr
    nach dem Code den Tag <p> einfügen.
    Dieser macht nichts weiter als euer Hintergrundbild um eine Zeile länger.
    Fügt diesen Tag nun einfach so oft ein, wie ihr ihn braucht.

    2. Ein Bild einfügen

    HTML Source Code

    1. <img src="Bild-URL">

    Das wäre nun über Bilder beinahe alles. :P
    Für diejenigen unter euch, die es genauer machen wollen:
    Display Spoiler
    Im IMG-Tag können weitere Eigenschaften des Bildes eingestellt werden.
    Die für uns interessanten sind:
    • width (Breite)
    • height (Höhe)
    • border (Rahmen)
    Sie sind wie folgt einzufügen:

    HTML Source Code

    1. <img src="Bild-URL" width="650" height="1000" border="0" >

    Die Werte werden hier in pixeln angegeben.
    Die Eigenschaft border beschreibt die Breite des Rahmens um das Bild.
    Hier gilt:
    0 = Kein Rahmen
    1 = dünner Rahmen
    5 = sehr dicker Rahmen

    3. Die Schrift
    Die Schrift ist bei den meisten Externen mitunter das Wichtigste.
    Sie kann auf drei Arten bearbeitet werden:
    • Größe
    • Schriftfarbe (Codes HIER)
    • Schriftart
    Größe Code:

    HTML Source Code

    1. <font size="7">Ziemlich riesiger Text</font>
    2. <font size="1">Ziemlich winziger Text</font>

    Schriftfarbe Code:

    HTML Source Code

    1. <font color="#FF0000">Knallroter Text</font>

    Schriftart Code:

    HTML Source Code

    1. <font face="Avalon,Wide Latin">Das ist Text in Schriftart Avalon, oder, falls Avalon nicht darstellbar, in Wide Latin</font>

    4. Einen Button einfügen
    Um einen Button im Ikariam-Stil einzufügen müsst ihr folgenden Code verwenden:

    HTML Source Code

    1. <a class="button" href="Ziel-URL">Das steht auf dem Button</a>


    Stand:29.09.2015 - Version 0.6.10
    History:

    Autoren: Montor, Shenandoah
  • In Bearbeitung


    Hier sind ein paar Beispiele für die Gestaltung der externen Allianzseite:

    Text & Formatierung

    Zentrierter Text:

    HTML Source Code

    1. <center>TEXT</center>

    Rechtsbündiger Text:

    HTML Source Code

    1. <div align="right">TEXT</div>

    Fettgeschriebener Text:

    HTML Source Code

    1. <b>TEXT</b>

    Kursiver Text:

    HTML Source Code

    1. <i>TEXT</i>

    Manueller Zeilenumbruch:

    HTML Source Code

    1. Text in 1. Zeile <br/> Text in 2. Zeile <br/> Text in 3. Zeile

    Text in Zeile mit automatischen Absätzen:

    HTML Source Code

    1. <p>Text im 1. Absatz</p>
    2. <p>Text im 2. Absatz</p>
    3. <p>Text im 3. Absatz</p>

    Der Text bekommt links und rechts einen Abstand zum Rand:

    HTML Source Code

    1. <div style="padding-left:15px;padding-right:15px;">TEXT</div>

    Beispiel für rechtsbündiges Bild das neben dem linksstehenden Text angezeigt wird (Text wird vor dem Bild umgebrochen):

    HTML Source Code

    1. <div style="float:right"><img src="http://meineseite.de/bild.jpg"></div>TEXT...

    Schriftgröße:

    HTML Source Code

    1. <span style="font-size:12px">TEXT</span>

    Schriftfarbe:

    HTML Source Code

    1. <font color="#FF0000">Knallroter Text</font>

    Schriftart:

    HTML Source Code

    1. <span style="font-family:Times">TEXT</span>

    Überschrift:

    HTML Source Code

    1. <h1>Überschrift</h1>

    Hyperlink:

    HTML Source Code

    1. <a href="http://meineseite.de">Link zur Seite</a>

    Hyperlink-Email:

    HTML Source Code

    1. <a href="mailto:meinemail@mail.de">Link zur Email</a>


    Tabelle
    Grundstruktur:

    HTML Source Code

    1. <table border="0" width="100%">
    2. <tr>
    3. <td>
    4. 1. Zeile, 1. Spalte
    5. <td>
    6. <td>
    7. 1. Zeile, 2. Spalte
    8. <td>
    9. <td>
    10. 1. Zeile, 3. Spalte
    11. <td>
    12. </tr>
    13. <tr>
    14. <td>
    15. 2. Zeile, 1. Spalte
    16. <td>
    17. <td>
    18. 2. Zeile, 2. Spalte
    19. <td>
    20. <td>
    21. 2. Zeile, 3. Spalte
    22. <td>
    23. </tr>
    24. </table>
    Display All
    Natürlich lassen sich der Tabelle beliebig viele Zeilen und Spalten ergänzen. In dem obrigen Beispiel wird der Tabellenrahmen nicht angezeigt, will man das nicht kann die Angabe border="0" einfach weggelassen werden bzw. ändert den Wert von 0 auf eine beliebige Rahmenpixelbreite wie z.B. 1 oder 2. Die Breite der Tabelle lässt sich verändern, dabei können Werte in Prozent (verhältnismäßig, dynamisch) angegeben werden oder in Pixel (absolut, statisch).

    Tabelle zentrieren:

    HTML Source Code

    1. <div align="center">
    2. <table border="1" width="150px">
    3. ...
    4. </table>
    5. </div>
    Will man eine schmale Tabelle in der Mitte der Beschreibungsfläsche angezeigt bekommen, so packt man diese in einen DIV-Container der zentriert wird.

    Tricks

    HTML Source Code

    1. ...TEXT<br/><img src="http://meineseite.de/blank.png" height="25"><br/>TEXT...
    Möglich ist auch eine transparente (durchsichtig) Grafik zu erstellen die 1 Pixel groß ist (also ein Punkt). Diese kann als Pseudo-Abstandshalter benutzt werden wenn die Abstände pixelgenau sein sollen. Zeilenumbrüche dann aber nur noch mit einem einfachen <br/>.

    Anmerkungen
    HTML-Tags können beliebig miteinander verschachtelt werden. Wichtig ist nur, dass immer das zuletzt geöffnete Element (HTML-Tag) auch zuerst geschlossen wird.

    HTML Source Code

    1. <center><i><b>Text</b></i></center>

    Hier wird der Text kursiv, fett und gleichzeitig zentriert dargestellt.

    Button (verfeinert)

    Source Code

    1. <a style="background:#eccf8e url(Buttonbild) repeat-x scroll 0 0;border-color:#C9A584 #5D4C2F #5D4C2F #C9A584;border-style:double;border-width:3px;color:#542C0F;font-size:12px;font-weight:bold;margin:0px auto;padding:2px 10px;text-align:center;white-space:nowrap;width:auto;" href="buttonlink</a>