Tag 8

Imagemaps erstellen
(ein beliebiges Bild nehmen und dann entsprechende Links darauf setzten)

1. Ein Bild einfügen
2. Eine Map erzeugen (Einfügen / Image Map / neue Map erstellen) und benennen
3. Das Bild mit dem Attribut usemap ausstatten (#Mapname)
4. Innerhalb des Map-Tags Bereiche (Areas) erzeugen

•  <img src="landkarte.gif"> Image laden
•  <map name="schland"></map>
  Image Map einfügen (im Programm über Einfügen)
•   <img usemap="#schland">
  Beziehung zur Image-Map erstellen (rechte Maus und dann usmap mit # einfügen)
• Es gibt 3 Shapes <area shape="RECT"  "CIRCLE" "POLYGON"> 
• <area shape="CIRCLE" coords="35, 135, 40" href="http://de.wikipedia.org/Wiki/Niderlande">
  Coords = die Koordinaten, wenn man mit der Maus über das Bild geht und dann ist der entsprechende Bereich verlinkt
•  im Programm Phase 5 gibt es die Möglichkeit über  Bildbetrachtung mit der rechten Maustaste die Koordinaten (Coords) festzulegen

Tabellen in HTML

• table = Die gesamte Tabelle
• tr = Zeile (table row)
• td = Zelle (table data)
• th = Kopfzelle (table header) fett, zentriert

Attribute der Tabellen: z. B. <table border="1" >
(Mit rechter Maus ins table, dann erscheinen die Attribute)

border = Rahmenlinie (in Pixel)
cellpadding = Innenabstand in allen Zellen (in Pixel)
cellspacing = Abstand zwischen den Zellen (in Pixel) bei "0" feine Linien zwischen den Zellen
bgcolor = Hintergrundfarben der Tabellen (möglich bei table, tr und td bzw. th)
background = Hintergrundbilder für die Tabelle (table) oder für die Zelle (td) Bild in den Hintergrund laden
bordercolorlight = Rahmenfarben  Rahmenfarbe hell | bordercolordark = Rahmenfarbe dunkel
width = Breite in Prozent oder Pixel  für genaue Tabellen immer Werte angeben, beim table eine Bezugsgröße eingeben, die Werte in den th richten sich dann dannach
hight = Höhe in Pixel
align = möglich bei td und tr (Ausrichten der Inhalte) und bei table (Textfluss)

valign = möglich bei td und tr (Ausrichten der Inhalte), mögliche Werte: bottom, middle, top

 

<td colspan="2"> Menschen</td> (die übrigen Spalten dann löschen)

<td rowspan="2"> Menschen</td> (die übrigen Zeilen dann löschen)

Übungsaufgabe:

• neues Dokument mit 1x1 Tabelle (align="center" border="1" height="600" width="800")
• eine Art "Leinwand" anlegen, früher immer so üblich, Übergeordnete Zelle!!
• bei width immer mit Prozent arbeiten!
• in der Tabelle noch eine anlegen (Verschachtelung!)