Classangaben für die in CMS Imperia gepflegten Webseiten der FernUniversität

Größe: px

Ab Seite anzeigen:

Download "Classangaben für die in CMS Imperia gepflegten Webseiten der FernUniversität"

Fanny Rosenberg
vor 7 Jahren
Abrufe

1 1 Classangaben für die in CMS Imperia gepflegten Webseiten der FernUniversität Class-Angaben können im Editorfenster von Imperia über den Icon ID/Class verwen- det werden, aber auch indem im Quelltext der gewünschte Bereich ergänzt wird. Beispiele: <p class="unterstrich"> oder <table class="tabelle100"> Im Folgenden werden zahlreiche CSS Angaben beschrieben: Flexible Bilder Die Classangabe positioniert Bilder in einer bestimmten Größe Code-Beispiel: <img class="bild100"> 1. bild100 das Bild wird ü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 Tabellengestaltung Tabelle Code-Beispiel:<table class="tabelle100"> 1. tabelle100 die Tabelle wird über den gesamten Inhaltbereich dargestellt 2. tabelle-weiss die Tabelle wird mit weißen Zellen mit hellgrauen Trennlinien dargestellt 3. tabelle-weiss die weisse Tabelle wird über den Inhaltsbereich dargestellt 5. tabelle-grau die Tabelle wird mit grauen Zellen mit weißen Trennlinien dargestellt 6. tabelle-grau100 die graue Tabelle wird über den Inhaltsbereich dargestellt 7. ohne-rahmen die Tabelle wird ohne sichtbare Trennlinien dargestellt

2 2 8. ohne-rahmen100 die Tabelle ohne Trennlinien wird über den Inhaltsbereich dargestellt 9. tabelle-zentriert bewirkt dass der Text in der Tabelle zentriert ist 10.tabelle-zentriert100 bewirkt dass die zentrierte Tabelle über den Inhaltsbereich dargestellt Tabellenzellen Code-Beispiele: <th class="zentriert"> oder <td class="rechtssbuendig"> 1. rechtsbuendig der Text wird rechtsbündig in der zelle positioniert 2. linkssbuendig der Text wird linksbündig in der zelle positioniert 3. zentriert der Text wird Text zentriert 4. grau die Zelle bekommt einen grauen Hintergrund 5. halb die Zellenbreite wird auf 50% gesetzt 6. drittel die Zellenbreite wird auf 32% gesetzt 7. viertel die Zellenbreite wird auf 25% gesetzt Hervorhebungen für Überschriften und einfachen Text Code-Beispiel: <h2 class="grau"> anwendbar auf: <h2><h3><<h4><h5> <p> 1. grau der Text wird hellgrau unterlegt 2. unterstrich bewirkt feine hellgraue Unterstreichung Trennlinien Code-Beispiel: <hr class="linie-grau"> 1. linie-grau 1px Zwischenlinie in hellgrau 2. linie-blau 1px Zwischenlinie in blau 3. linie-orange 1px Zwischenlinie in rot

3 3 4. linie-grau-breiter 2px Zwischenlinie in hellgrau 5. linie-blau-breiter 2px Zwischenlinie in blau 6. linie-orange-breiter 2px Zwischenlinie in rot Abstände zwischen den Bereichen Die Class wird auf den umliegenden Bereich des Objekts <div> angewandt Code-Beispiel: <div class"abstand-unten10"><h2>überschrift</h2><p>textbereich</p></div> Abstände sind auf verschiedene Bereiche anwendbar: z.b. Tabellen, Tabellenzellen, Textabschnitte, Bilder 1. abstand-unten5 Abstand nach unten von 5px 2. abstand-oben5 Abstand nach oben von 5px 3. abstand-unten10 Abstand nach unten von 10px 4. abstand-oben10 Abstand nach oben von 10px 5. abstand-unten20 Abstand nach unten von 20px 6. abstand-oben20 Abstand nach oben von 20px 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-oben40 Abstand nach oben von 40px 11.abstand-unten50 Abstand nach unten von 50px 12.abstand-oben50 Abstand nach oben von 50px

4 4 Breiten Die Class wird auf den umliegenden Bereich des Objekts <div> angewandt Code-Beispiel: <div class"breite20"><p>textbereich</p></div> Breiten sind auf verschiedene Bereiche anwendbar z.b. Tabellen, Tabellenzellen, Text- abschnitte, Bilder 1. breite10 Weite 10% 2. breite20 Weite 20% 3. breite30 Weite 30% 4. breite33 Weite 33% 5. breite40 Weite 40% 6. breite45 Weite 45% 7. breite50 Weite 50% 8. breite60 Weite 60% 9. breite70 Weite 70% 10.breite80 Weite 80% 11.breite100 Weite 100% Listen Code-Beispiel: <ul class"pfeil"> 1. pfeil Pfeil als Auflistungszeichen 2. liste-ohne-bullet Liste ohne Vorzeichen 3. buchstaben Buchstabenanordnung bei Aufzählung (ol) 4. stz hellgraue Unterlegung des Textes

5 5 Icons Icons für PDF, Word, Video Bildet kleine Icons vor dem jeweiligen Text ab Code-Beispiel: <p class"pdficon"> oder <a href class"pdficon"> 1. pdficon 2. wordicon 3. videoicon Icons für PDF, Word, Video als Liste Bildet kleine Icons vor den jeweiligen Listenpunkten ab Code-Beispiel: <ul class="videoliste"> 1. videoliste 2. pdfliste 3. wordliste Möglichkeiten der Textgestaltung Die Classangabe färbt den Text in der genannten Farbe ein oder verkleinert ihn Code-Beispiel: <p class"rot"> oder auch Überschriften <h2 class"rot"> 1. kleiner 2. rot 3. blau 4. gruen Rahmen Rahmen um Textpassagen Die Classangabe bildet entsprechend der Angabe umrahmte Textpassagen Code-Beispiel: <div class="border-gray-round"> 1. rahmen 2. rahmen-rot 3. box-grau 4. runde-ecken 5. rund 6. border-gray 7. border-gray-round

6 6 8. border-red 9. border-red-round Infobox zur Hervorhebung kleiner Textpassagen im Text Code-Beispiel: <div class="infobox30-rechts"> 1. infobox30-rechts roter runder Rahmen um Textpassage im rechten Inhaltsbereich mit einer Breite von 30% 2. infobox40-rechts roter runder Rahmen um Textpassage im rechten Inhaltsbereich mit einer Breite von 40% 3. infobox30-links roter runder Rahmen um Textpassage im linken Inhaltsbereich mit einer Breite von 30% 4. infobox40-links roter runder Rahmen um Textpassage im linken Inhaltsbereich mit einer Breite von 40%

Ähnliche Dokumente

<html> <head> <title> Die Welt der Bäume </title> </head> <body> Hier ensteht eine Seite über Bäume. </body> </html> Abb. 2

<html> <head> <title> Die Welt der Bäume </title> </head> <body> Hier ensteht eine Seite über Bäume. </body> </html> Abb. 2 Dieser html-kurs soll die Informatik-SchülerInnen meines Info-Kurses auf den Info-Quali vorbereiten. Das Werkzeug html soll einen in die Lage versetzten, die Programmierung von Web-Seiten zu verstehen