Download

v1.9 | Stand: 2016-12-17 | Dateigröße: 11kB

Laden Sie unsere Demo-Textdatei „Artkon Blueprint“ gratis herunter und verwenden Sie diesen Text zur Gestaltung des Schriftbildes Ihrer Website!

Anleitung

Schritt für Schritt

Das folgende HowTo gilt für WordPress. Die grundsätzliche Vorgangsweise (Quelltext in die Zwischenablage kopieren – im CMS eine neue Seite anlegen – Inhalt der Zwischenablage als Quelltext einfügen – speichern und ansehen) ist aber für alle Content Management Systeme gleich.

Um diese Vorlage für Sie nutzbar zu machen gehen Sie bitte wie folgt vor:

  1. Laden Sie die Datei auf Ihren Computer
    oder
    Markieren Sie den u. a. Quelltext (mit gedrückter linker Maustaste vom obersten „

  2. Melden Sie sich im Backend Ihrer Website an.
  3. Legen Sie dort eine neue Seite an.
  4. Klicken Sie zur Bearbeitung auf den Titel der neuen Seite. Der Editor wird geöffnet.
  5. Klicken Sie im rechten oberen Eck des Bearbeitungsmodus auf „Text“. Der Quelltexteditor wird geöffnet.
  6. Fügen Sie  den Inhalt der Zwischenablage mit STRG + V in das Textfeld ein.
  7. Klicken Sie in der rechten Spalte auf „Veröffentlichen“ bzw. „Aktualisieren“.
  8. Durch einen Klick auf „Vorschau“ (rechte Spalte) öffnet sich ein neuer Tab mit der Frontend-Vorschau des Artkon Blueprint-Mustertextes.

Wechseln Sie in den Einstellungsmodus für die Fonts Ihres Themes, gestalten Sie die entsprechenden Schriftstile und speichern Sie und wechslen Sie zum anderen Browser-Tab. Nach einem Refresh der Voransicht (F5) können Sie dort die Änderungen sofort beurteilen.

AKC Blueprint

Quellcode

<p><em><strong><a href="https://www.artkon.com/artkon/free-tips-tools/artkon-blueprint.html" title="Zur Homepage der Artkon Blueprint" alt="Mit einem Klick gelangen Sie zur Homepage der Artkon Blueprint-Textvorlage." target="_blank">Artkon Blueprint</a></strong> | v1.9, Stand: 2016-12-17</em></p> <div id="css_basic_elements"> <h1>CSS Basiselemente</h1> <p>Vielen Dank, dass Sie die Artkon Blueprint-Textvorlage verwenden. Artkon ist Ihre Webagentur, wenn einmal nicht alles nur kompliziert sein soll. Werfen Sie doch einmal einen Blick auf <a href="https://www.artkon.com" title="Zur Website von Artkon" alt="Informieren Sie sich über das Angebot von Artkon, Ihrer Webagentur, wenn es einfach bleiben soll!" target="_blank">unser Produktangebot (zur Website von Artkon)</a>! </p> <p>Dieser Beispieltext bildet die Entscheidungsgrundlage für die Formatierung von Texten mithilfe von Cascading Stylesheets (CSS). Dabei werden hier tunlichst alle möglichen HTML-Elemente eingebunden, die für die Gestaltung von Websites benötigt werden.</p> <p><strong>Achtung: zur farblichen Hervorhebung ist die Klasse <em><span class="coloredHTML">&#8218;coloredHTML&#8216;</span></em> zu definieren!</strong></p> </div> <hr /> <div id="email"> <h1>Email-Format</h1> <p>Sollte Ihnen in diesem Demo-Text ein HTML-Element fehlen, bitten wir Sie um eine Benachrichtigung:</p> <p><a href="javascript:DeCryptX('1j2p2h1p2B0a2t2v2m1p2p1/0c1p3p')">&#105;nf&#111;&#64;ar&#116;k&#111;n&#46;&#99;o&#109;</a></p> </p> <p>Wir kümmern uns um den ehebaldigen Nachtrag.</p> </div> <hr /> <div id="headings"> <h1>Überschriften</h1> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </div> <hr /> <div id="paragraph"> <h1>Absatz</h1> <p><img src="https://www.artkon.com/akc-content/uploads/logos_akc/ak_logo_350x350_96dpi.png" alt="Logo Artkon e.U." />Lorem ipsum dolor sit amet, <a title="test link" href="#">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p> <p>Lorem ipsum dolor sit amet, <span class="coloredHTML"><em>emphasis</em></span> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p> </div> <hr /> <div id="list_types"> <h1>Listen</h1> <h3>Definition List</h3> <dl> <dt>Definition List Title</dt> <dd>This is a definition list division.</dd> </dl> <h3>Ordered List</h3> <ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol> <h3>Unordered List</h3> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> </div> <hr /> <div id="form_elements"> <h1>Fieldsets, Legenden und Formularelemente</h1> <fieldset> <legend>Legend</legend> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p> <form action="#" method="post"> <h2>Formularelemente</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p> <p> <label for="text_field">Textfeld:</label><br /> <input id="text_field" name="text_field" type="text" /></p> <p> <label for="text_area">Textfenster:</label><br /> <textarea id="text_area" cols="20" name="textarea" rows="5"></textarea></p> <p> <label for="select_element">Auswahlelement:</label></p> <p> <select name="select_element"><optgroup label="Option Group 1"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option></optgroup><br /> </select></p> <p> <select name="select_element"><optgroup label="Option Group 2"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option></optgroup><br /> </select></p> <p> <label>Radio Buttons:</label><br /> <input class="radio" name="radio_button" type="radio" value="radio_1" /> Radio 1<br /> <input class="radio" name="radio_button" type="radio" value="radio_2" /> Radio 2<br /> <input class="radio" name="radio_button" type="radio" value="radio_3" /> Radio 3</p> <p> <label>Checkboxes:</label><br /> <input class="checkbox" name="checkboxes" type="checkbox" value="check_1" /> Radio 1<br /> <input class="checkbox" name="checkboxes" type="checkbox" value="check_2" /> Radio 2<br /> <input class="checkbox" name="checkboxes" type="checkbox" value="check_3" /> Radio 3</p> <p> <label for="password">Passwort:</label><br /> <input id="password" class="password" name="password" type="password" /></p> <p> <label for="file">File Input:</label><br /> <input id="file" class="file" name="file" type="file" /></p> <p> <button>Submit</button> <button type="reset">Clear</button><br /> </form> </fieldset> </div> <hr /> <div id="tables"> <h2>Tabellen</h2> <table> <caption>Tabellenüberschrift</caption> <thead> <tr> <th>Table Header 1</th> <th>Table Header 2</th> <th>Table Header 3</th> </tr> </thead> <tfoot> <tr> <th>Footer 1</th> <th>Footer 2</th> <th>Footer 3</th> </tr> </tfoot> <tbody> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr class="even"> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> </tbody> </table> </div> <hr /> <div id="misc"> <h2>Verschiedenes &#8211; abbr, acronym, pre, code, sub, sup etc.</h2> <p> Lorem <span class="coloredHTML"><sup>superscript</sup></span> dolor <span class="coloredHTML"><sub>subscript</sub></span> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <span class="coloredHTML"><cite>cite (Quellenangabe)</cite></span>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <span class="coloredHTML"><acronym title="National Buttars Association">NBA</acronym></span> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <span class="coloredHTML"><abbr title="Avenue">AVE</abbr></span></p> <pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <span class="coloredHTML"><acronym title="National Buttars Association">NBA</acronym></span> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <span class="coloredHTML"><abbr title="Avenue">AVE</abbr></span></pre> <h3>Zitat</h3> <blockquote><p> This stylesheet is going to help so freaking much.</p> <p> -Blockquote </p></blockquote> <h3>Adresse</h3> <address> &lt;address&gt;<br /> Donald Duck<br /> Box 555<br /> Disneyland<br /> </address> <h3>Code</h3> <p> <code><br /> &lt;code&gt;<br /> Not indented<br /> indent1<br /> indent1<br /> indent2<br /> indent3<br /> </code></p> <h3>KBD</h3> <p> <kbd><br /> &lt;kbd&gt;<br /> This kbd text should be monospaced<br /> and<br /> wrap as if<br /> one line of text<br /> even though the code has newlines, spaces, and tabs.<br /> It should be the same size as &lt;p&gt; text.<br /> </kbd> </div> <hr /> <div id="text_pattern"> <h2>Textmuster zur Unterscheidkeit ähnlicher Buchstaben</h2> <h3>Größe: 10px</h3> <p style="font-size: 10px !important;">aceo<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(klein A, C, E, O)</span></p> <p style="font-size: 10px !important;">Il1<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(groß I, klein l, Ziffer 1)</span></p> <p style="font-size: 10px !important;">O0<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(groß O, Ziffer 0)</span></p> <h3>Größe: 14px</h3> <p style="font-size: 14px !important;">aceo<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(klein A, C, E, O)</span></p> <p style="font-size: 14px !important;">Il1<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(groß I, klein l, Ziffer 1)</span></p> <p style="font-size: 14px !important;">O0<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(groß O, Ziffer 0)</span></p> <h3>Größe: 18px</h3> <p style="font-size: 18px !important;">aceo<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(klein A, C, E, O)</span></p> <p style="font-size: 18px !important;">Il1<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(groß I, klein l, Ziffer 1)</span></p> <p style="font-size: 18px !important;">O0<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(groß O, Ziffer 0)</span></p> <h3>Größe: 22px</h3> <p style="font-size: 22px !important;">aceo<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(klein A, C, E, O)</span></p> <p style="font-size: 22px !important;">Il1<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(groß I, klein l, Ziffer 1)</span></p> <p style="font-size: 22px !important;">O0<br /><span style="font-size: 12px !important; font-style: italic; color: #999999;">(groß O, Ziffer 0)</span></p> </div> <p>

History

v1.8 (2016-12-14): Neue Textmuster zur Unterscheidung ähnlicher Lettern in 10px, 14px, 18px und 22px ergänzt.
v1.7 (2016-12-02): Jedem DIV eine eigene ID zugewiesen: Tippfehler korrigiert.
v1.0 (2016-11-01): Initial release

Title
Caption
File name
Size
Alignment
Link to
  Open new windows
  Rel nofollow