BSI: Imagemaps, CSS

Kölsch of the Week!

Inhaltsangabe:

  1. Imagemaps
  2. CSS: Verschachtelte Elemente, Klassen und individuelle Formate
  3. CSS: Allgemeine Formatierung

Imagemaps

Verweis-sensitive Grafiken

Bei diesem Bild ist ein Teil des Bildes anklickbar, andere Teile sind es nicht:

Eine erste Imagemap

Die sogenannte Image map oder verweis-sensitive Grafik wurde durch folgenden Markup generiert :

<img alt="Eine erste Imagemap" src="/site/assets/files/1213/einbild.jpg" usemap="#bildstruktur" />

<map id="bildstruktur" name="bildstruktur">
    <area shape="rect"
          coords="116, 92, 211, 125"
          target="_blank"
          href="http://www.stiftmelk.at/"
          alt="">
    <area shape="poly"
          coords="142, 225, 181, 165, 204, 200, 182, 234, 155, 234"
          title="Fahne"
          target="_blank"
          href ="http://www.wikiwand.com/de/Babenberger-Stammbaum"
          alt="">
    <area shape="circle"
          coords="153, 210, 150"
          title="Stadt Aachen"
          target="_self"
          href="http://www.aeiou.at/aeiou.history.gtour.babenb/000329.htm"
          alt="">
</map>

Dabei ist zu beachten:

  1. Image maps werden durch das <map> ... </map> Tag gekennzeichnet. Das obligatorische Attribut name bestimmt einen Ankernamen für die Map, id ist ein Universalattribut und ordnet einem Element einen individuellen Namen zu. (in beiden Fällen bei uns: "bildstruktur".)
  2. Die Image map selbst ist aus <area> Tags aufgebaut, die jeweils eine Beziehung zwischen einer Zone auf dem Bildschirm und einem dazugehörigen Objekt, essentiell einer URL, herstellen.
  3. areas dürfen einander überlappen; wird ein kleineres von einem größeren überdeckt, muß das kleinere jedoch stets zuerst spezifiziert werden.
  4. areas können auch nicht-rechteckig sein.
    Varianten zu "rect": "circle", "poly"
  5. Alle Koordinatenangaben sind in Pixeln anzugeben, mit dem Koordinatenursprung in der linken oberen Ecke des Bildes.
  6. Wichtiger Hinweis: in HTML benötigen die Area-Tags obligatorisch das alt="" Attribut.

Erläuterung

Um verschiedene Formen in einer Imagemap zu erfassen, kann es wie im vorliegenden Fall sinnvoll sein, eine Kreisform als <area>-Shape zu verwenden. Kreise werden durch den Wert "circle" festgelegt und bestehen regelmäßig aus 3 durch Komma getrennten Zahlenwerten: x,y (Koordinate des Kreis-Mittelpunkts), r (Radius).

Um beispielsweise eine der Fahnen zu erfassen, ist weder ein reines Rechteck noch ein Kreis wirklich geeignet. Für einen solchen Fall gibt es die Polygonform. Polygone (Vielecke) werden durch den Wert "poly" festgelegt und bestehen regelmäßig aus X*2 durch Komma getrennten Zahlenwerten: x1,y1 (1. Koordinate), x2,y2 (2. Koordinate), x3,y3 (3. Koordinate).....xn, yn (n-te Koordinate).

Durch das Attribut title="" kann man einer <area> einen Titel zuweisen, der dann zum Beispiel als Tool-Tip beim Mouse-Over angezeigt wird.

Weitere Informationen auf w3schools:

Zum Seitenanfang

CSS: Verschachtelte Elemente, Klassen und individuelle Formate

Verschachtelte Elemente

Oft ist es sinnvoll, <tags> unterschiedlich zu formatieren, je nachdem in welchem Kontext sich diese befinden.
Möglicherweise möchte man Überschriften in einer Tabellenzelle anders formatieren als außerhalb. Das realisiert mit CSS, indem man den Selektor folgendermaßen beschreibt:

HTML:

<h2>Erste Überschrift</h2>
<table border="1">
<tr>
<td></td>
<td><h2>Zweite Überschrift</h2></td>
</tr>
</table>

CSS:

h2 {
color: red;
}

td h2 {
color: green;
}

ergibt:

Erste Überschrift

Zweite Überschrift

Weitere Informationen dazu auf w3schools!

Klassen

In HTML gibt es das Universalattribut class, das Sie im Start-Tag eines jeden Elements notieren können, um verschiedene Elemente zu einer Klasse zusammen zu fassen. Diese Elemente gehören dann logisch zusammen. Möchte man beispielsweise in einem Text Absätze <p> verschieden formatieren, einige mit blauer, einige mit roter Schrift, könnte man das mit Klassen folgendermaßen realisieren:

p.klasse1 {color: red;}

p.klasse2 {color: blue;}

Mit der Syntax dieses Beispiels werden alle Elemente <p>, die der Klasse "klasse1" angehören mit roter Schrift ausgezeichnet, alle Elemente <p> der Klasse "klasse2" mit blauer. Im Grunde könnte man das "p" vor dem Selektor auch weg lassen: Dann würden alle <elemente>, die mit der jeweiligen Klasse ausgezeichnet sind (also auch z.B. <h1 class="klasse1">) entsprechend formatiert.

HTML:

<p class="roteschrift">Erster Absatz</p>
<p class="blaueschrift">Zweiter Absatz</p>

CSS:

p.roteschrift {color: red;}
p.blaueschrift {color: blue;}

oder

.roteschrift {color: red;}
.blaueschrift {color: blue;}

ergibt:

Erster Absatz

Zweiter Absatz

Weitere Informationen zum class-Selektor auf w3schools!

Individuelle Formate

HTML-<elemente>, die durch das Universalattribut id="" eindeutig bestimmt sind, können in CSS gesondert formatiert werden. Dies wird mit der id und einem vorgestellten Präfix # realisiert:
#beliebige_id {color: red;}

HTML:

...
    <h1 id="ueberschrift_header">blaue kursive &Uuml;berschrift</h1>
...

CSS:

#ueberschrift_header {
     color: blue;
     font-style: italic;
}

ergibt:

blaue kursive Überschrift

Achtung: ID's dürfen pro Seite nur einmal vorkommen!

Weitere Informationen zum ID-Selektor auf w3schools!

Zum Seitenanfang

CSS: Allgemeine Formatierung

<div> und <span>

Die beiden Elemente div(von engl. "division", Bereich) und span besitzen in HTML keine festgelegte Funktion. Die einzige Festlegung ist die, dass <div> ein Blockelement ist, also einen Zeilenumbruch nach sich zieht, während <span> zu den Inline-Elementen zählt und sich einfach in den Textfluss integriert. Das Fehlen einer Primärfunktion macht die beiden Elemente sehr interessant für die Gestaltung mit CSS.

Außen- und Innenabstand

Man könnte sich einen <div> als eine Art Block vorstellen, der zunächst keine Größe hat.

Füllt man einen div-Block mit Text, zum Beispiel so:

<div>Dies ist ein Text</div>

passiert zunächst nichts, außer, dass der Text dargestellt wird.
Möchte man den Text z.B. mit einem gewissen Abstand von dem umgebenden Element positionieren, verwendet man das Schlüsselwort margin.

Beispiel - CSS:
div.eingerueckt { margin-left: 8px;}

In diesem Beispiel wird ein div der Klasse "eingerueckt"
(<div class="eingerueckt"></div>) um genau 8 Pixel vom linken Rand des umgebenden Elementes (z.B. body, dem Seitenrand) weg gerückt.

Die Schlüsselwörter, um diesen so genannten Außenabstand zu realisieren, sind selbst erklärend:

  • margin-left
  • margin-right
  • margin-top
  • margin-bottom
  • Alternativ kann auch einfach nur das Schlüsselwort margin verwendet werden. Dessen Verwendung entnehmen sie hier

Möchte man hingegen den Text, wie im ersten Beispiel, vom Rand des ihn umschließenden div entfernen, verwendet man das Schlüsselwort padding, dem Innenabstand. Dieses wird völlig analog zu dem Schlüsselwort margin verwendet (vertiefende Informationen).

Beispiel - CSS:

div.eingerueckt { padding-left: 12px; padding-top: 40px; }

In diesem Beispiel wird ein Element <div class="eingerueckt">Dies ist ein Text</div> so formatiert, das der Text innerhalb des div 12 Pixel vom linken Rand und 40 Pixel vom oberen Rand (des div) weg gerückt wird.

Positionierung

Mit <div>-Tags gibt es verschiedene Möglichkeiten, ein präzises Seitenlayout zu erstellen. Mit der Eigenschaft "position" kann die Standard-Anordnung von HTML-Tags durchbrochen werden. Werte, die position=" " annehmen kann:

  • absolute
    absolute Positionierung, gemessen am vorherigen Element.
  • relative
    relative Positionierung, gemessen an der eigentlichen Position des Elements.
  • static
    keine Positionierung, folgt dem normalen Element- bzw. Textfluss.

Zur Bestimmung der genauen Position dienen:

  • top
    legt den Abstand von oben zum vorherigen Element fest.
  • bottom
    legt den Abstand von unten zum vorherigen Element fest.
  • left
    legt den Abstand von links zum vorherigen Element fest.
  • right
    legt den Abstand von rechts zum vorherigen Element fest.

Weitere Informationen zur Formatierung auf w3schools:

Hinweis

Das Positionieren mit div-Blöcken fällt Anfängern im Bereich von Webdesign meistens äußerst schwer, und die Möglichkeiten dieser Techniken sind weit vielfältiger, als dass sie in diesem Proseminar abgedeckt werden könnten. Gerade aber weil sie so flexibel sind, sind sie im Bereich des professionellen Webdesigns unverzichtbar. Daher ist eine weitere Beschäftigung (siehe Literatur und Links) mit diesem Thema sehr zu empfehlen.

Zum Seitenanfang

Sitzungsaufgabe

Bitte bearbeiten Sie nun die 4. Sitzungsaufgabe!

Hausaufgabe

Hier finden Sie die 4. Hausaufgabe.