Schlagwort-Archive: Quelltext

Allgemeine Class-Angaben

Über Ergänzungen durch Class-Angaben kann das Layout optimiert werden, das Aussehen von Tabellen und Listen, Abstände oder Positionierung von Bildern.

Class-Angaben können im Editorfenster von Imperia u?ber den Icon ID/Class (Bild 1) verwendet werden, direkt im gewünschten Bereich in den Quelltext (Bild 2) geschrieben werden aber auch, indem in den Eigenschaften (Bild 3) (Bilder, Tabellen,etc.) im Quelltext der gewu?nschte Bereich ergänzt wird.
Beispiele: <p> oder <table>

Beispiele zur Bild-Formatierung: das Bild soll 100% der Inhaltsfläche einnehmen

Bildschirmfoto 2013-02-19 um 14.38.54
Bild 1 (Editor, ID/Class)

Bildschirmfoto 2013-02-19 um 13.45.44
Bild 2 (im Quelltext)

Bildschirmfoto 2013-02-19 um 13.47.06
Bild 3 (über Bildeigenschaften)

Auswahl der Bereiche:

  • Flexible Bilder
  • Tabellen
  • Tabellenzellen
  • Überschriften und Texte
  • Trennlinien
  • Abstände zwischen den Bereichen
  • Breiten auf verschiedene Bereiche anwendbar
  • Listen

Flexible Bilder

<img>

  1. bild100 ? das Bild wird u?ber den gesamten Inhaltsbereich dargestellt
  2. bild50-links ? das Bild wird linksseitig zu 50% im Inhaltsbereich dargestellt
  3. bild50-rechts ? das Bild wird rechtsseitig zu 50% im Inhaltsbereich dargestellt
  4. bild30-rechts ? das Bild wird rechtssseitig zu 30% im Inhaltsbereich dargestellt
  5. bild30-links ? das Bild wird linksseitig zu 30% im Inhaltsbereich dargestellt

Tabellen

<table>

  1. tabelle100 ? die Tabelle wird u?ber den gesamten Inhaltbereich dargestellt
  2. tabelle-weiss ? die Tabelle hat weiße Zellen mit hellgrauen Trennlinien
  3. tabelle-weiss100 ? die weiße Tabelle wird u?ber den Inhaltsbereich dargestellt
  4. tabelle-grau ? die Tabelle hat graue Zellen mit weißen Trennlinien
  5. tabelle-grau100 ? die graue Tabelle wird u?ber den Inhaltsbereich dargestellt
  6. ohne-rahmen ? die Tabelle hat keine sichtbaren Trennlinien
  7. ohne-rahmen100 ? die Tabelle wirdu?ber den Inhaltsbereich dargestellt
  8. tabelle-zentriert ? der Text ist in der Tabelle zentriert
  9. tabelle-zentriert100 ? die zentrierte wird Tabelle u?ber den Inhaltsbereich dargestellt

Tabellenzellen

<td><th>

  1. rechtsbuendig ? Text rechtsbu?ndig
  2. linkssbuendig ? Text linksbu?ndig
  3. zentriert ? Text zentriert
  4. grau ? grauer Hintergrund
  5. halb ? Zellenbreite auf 50%
  6. drittel ? Zellenbreite auf 32%
  7. viertel ? Zellenbreite auf 25%

Überschriften und Texte

<h1><h2><h3><h4><h5><p>

  1. grau ? grauer Hintergrund
  2. unterstrich ? feine hellgraue Unterstreichung

Trennlinien

<hr>

  1. linie-grau ? 1px Zwischenlinie in hellgrau
  2. linie-blau ? 1px Zwischenlinie in blau
  3. linie-orange ? 1px Zwischenlinie in rot
  4. linie-grau-breiter ? 2px Zwischenlinie in hellgrau
  5. linie-blau-breiter ? 2px Zwischenlinie in blau
  6. 6. linie-orange-breiter ? 2px Zwischenlinie in rot

Abstände zwischen den Bereichen

  1. abstand-unten ? Abstand nach unten von 20px
  2. abstand-oben ? Abstand nach oben von 20px
  3. abstand-unten5 ? Abstand nach unten von 5px
  4. abstand-oben5 ? Abstand nach oben von 5px
  5. abstand-unten10 ?  Abstand nach unten von 10px
  6. abstand-oben10 ? bewirkt Abstand nach oben von 10px
  7. abstand-unten30 ? Abstand nach unten von 30px
  8. abstand-oben30 ?  Abstand nach oben von 30px
  9. abstand-unten40 ? Abstand nach unten von 40px
  10. abstand-oben 40 ?  Abstand nach oben von 40px
  11. abstand-unten50 ? Abstand nach unten von 50px
  12. abstand-oben 50 ? Abstand nach oben von 50px

Breiten auf verschiedene Bereiche anwendbar

z.B. Tabellen, Tabellenzellen, Textabschnitte, Bilder <table><th><td><p><img>

  1. breite100 ? Weite 100%
  2. breite50 ?  Weite 50%
  3. breite33 ? Weite 33%

Listen

<ul>

  1. pfeil ? Pfeil als Auflistungszeichen
  2. liste-ohne-bullet ? Liste ohne Vorzeichen
  3. buchstaben ? Buchstabenanordnung bei Aufzählung (ol)
  4. stz ? grauer Hintergrund