Typografie

Ihre Seite auch in Sachen Typografie selber verwalten*

Bei Verwendung eines Content Management Systems (CMS) wie Joomla können Sie Ihre Texte per Internet selber in die Seite einfügen. Dabei können Sie einfach Texte verwenden oder Ihren Texten professionelle Gestaltung zukommen lassen. Dies geschieht mit einfach Eingabebefehlen, wie man sie in der folgenden Anleitung sehen kann. Aber keine Angst, falls Sie dazu keine Lust oder Zeit haben, übernehmen wir den Unterhalt und die Updates Iher Webseite gerne für Sie.
Diese Seite soll einen kleinen Einblick in die typografischen Möglichkeiten geben. Machbar ist fast alles, was Ihren Wünschen entspricht .

Schriften nach Wahl

Auf unseren neuen Seiten können mittels sIFR-Integration verschiedene Schriften verwendet werden. Normalerweise kann auf Webseiten nur eine kleine Auswahl an Schriften verwendet werden: Die Web-Standart-Schriften. Mit sIFR können jetzt auch Schriften verwendet werden, die nicht Web-Standart
sind. Dies gibt Ihrer Seite das bisschen Extra, das sie von anderen Seiten unterscheidet. Sie können diese Funktion
aktivieren, indem sie hier klicken, oder sIFR deaktivieren indem Sie hier klicken.
Mögliche Schriftfamilien sind:

Titelbeispiel für eine Kapitlel-Überschrift

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Beispiel für eine Artikelüberschrift

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

Beispiel eines H1 Titels

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices. Vivamus quis lectus. Praesent eu mi. Curabitur pharetra leo sed nisl. Nunc vel nisi. Aliquam nulla. Etiam at est. Pellentesque arcu diam, tempus nec, sodales eu, ullamcorper quis, risus.

Dies ist ein Beispiel einer Hervorhebung. Damit können Sie wichtige Texte besonders markieren. Es ist dabei Ihnen überlasse, welche Farbe zu welcher Art von Markierung gebraucht wird. Um eine Markierung zu setzten, schreibt man diesen Code vor und nach den Text: .... Dies ist ein Beispiel einer Hervorhebung. Damit können Sie wichtige Texte besonders markieren. Es ist dabei Ihnen überlasse, welche Farbe zu welcher Art von Markierung gebraucht wird. Um eine Markierung zu setzten, schreibt man diesen Code vor und nach den Text:.... Dies ist ein Beispiel einer Hervorhebung. Damit können Sie wichtige Texte besonders markieren. Es ist dabei Ihnen überlasse, welche Farbe zu welcher Art von Markierung gebraucht wird. Um eine Markierung zu setzten, schreibt man diesen Code vor und nach den Text: .... Dies ist ein Beispiel einer Hervorhebung. Damit können Sie wichtige Texte besonders markieren. Es ist dabei Ihnen überlasse, welche Farbe zu welcher Art von Markierung gebraucht wird. Um eine Markierung zu setzten, schreibt man diesen Code vor und nach den Text:....

Beispiel eines H2 Titels

Beispiel eines H3 Titels

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla. Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.

Beispiel eines H4 Titels

This is a sample <pre>...</pre> tag:

div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat; 
}

div.modulebox-black div.bx2 {
  background: url(../images/black/box_tr.png) 100% 0 no-repeat;
}

div.modulebox-black div.bx3 {
  background: url(../images/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}

Ein Beispiel für einen Zitat-Block:

Diesen Code vor und nach dem Text setzten: <blockquote>...Ihr Text...</blockquote>

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Below is a list with media#. To use this style create a list in the following format: <ul class="icon-1...icon-6"><li>....</li><li>....</li>...</ul>

Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla.

Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.

Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.

Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.

Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.

Wenn Sie zum Beispiel diese Icons verwenden wollen, müssen Sie eine Liste mit folgendem Code schreiben: <ul class="class name"><li>....</li><li>....</li>...</ul>

To use this style create a list in the following format: <ul class="bullet-1"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-2"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-3"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-4"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-5"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-6"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-7"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-8"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-9"><li>....</li><li>....</li>...</ul>.

Und dies sind die Codes für die Bullets 10-18, damit eine Liste wie unten aufgeführt erstelle werden kann: <ul class="class name"><li>....</li><li>....</li>...</ul>

To use this style create a list in the following format: <ul class="bullet-10"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-11"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-12"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-13"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-14"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-15"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-16"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-17"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="bullet-18"><li>....</li><li>....</li>...</ul>.

Beispiel mit Nummern: Unterhalb sieht man ein Liste mit Nummern. Um diese zu erstellen setzt man diesen Code vor die Reihen. (Natürlich kann auch die einfache Variante mit dem Code im Texteditor verwendet werden): <ul class="number"><li class="number-1">....</li><li class="number-9>....</li>...</ul>

Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.
Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla.
Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.
Aliquam laoreet elementum tellus. Aenean tincidunt. Quisque est. Pellentesque convallis felis id arcu rutrum feugiat. Aenean mauris urna, rutrum aliquam, iaculis vel, consectetuer ac, elit.
Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla.

* Dies sind Beispiele, die für ein typografisch erweitertes Template gelten. Solche Templates sind in der Regel für ca. 25 US Dollar erhältlich. Bei den meisten gratis Templates sind diese umfangreichen typografischen Möglichkeiten nur schwer realisierbar. Die hier verwendeten Farben können jederzeit den eigenen wünschen angepasst werden. Wobei dies auch auf umfangreichen Seiten nur im Stylsheet gemacht werden muss. Auch die Icons können individuell angepasst oder verändert werden. Farben, Schriften und Icons werden durch die Wahl des Templates bedingt und weichen daher von Template zu Template ab. Die Änderung wird hinterher auf allen Seiten sichtbar.

Quelle: RocketThemes Tutorial

Kommentar schreiben / Write your comment

Ihr Name: Your name:
Betreff: Subject:
Kommentar: Your Comment:

Sicherheitscode:

yvComment v.1.25.3

Phottix Triopo Pixel JYC
Funkauslöser, Stative, Kugelköpfe
Studioausrüstung, Trigger, Wireless
Batteriegriffe, Akkus, Ladegeräte
UV-Filter, Polfilter, Graufilter
Pawn, Knight, Atlas, Aster, Strato

Jetzt ab CH - hier klicken!

Kaffee hält uns bei der harten Arbeit am Leben. Unterstützen Sie uns mit einer Tasse...