18 Termine ... Termine

Antworten
AnkeLange
Administrator
Beiträge: 165
Registriert: Mi 29. Jun 2011, 19:48
Skype: eleanora2066
Wohnort: Osnabrück
Kontaktdaten:

18 Termine ... Termine

Beitrag von AnkeLange »

Termine über Termine ...

Zu jedem Hobby gibt es Info-Veranstaltungen, Wettbewerbe, Veröffentlichungesdaten etc.

Natürlich ist es immer interessant für einen Leser über aktuelle Termine informiert zu werden. Für diese Aufgabe eignen sich am besten Tabellen. Mit einer Tabelle kannst du auf einfache Art einen Kalender erstellen. Egal ob jetzt 2spaltig oder einen Jahreskalender mit vielen Spalten. Einen Veranstaltungskalender mit Datum, Band und Ort. In einer Tabelle kannst du alles schön übersichtlich anordnen.

Dies ist eine der wenigen Daseinsberechtigungen für Tabellen, die in Anfängen des Internets zum Layouten verwendet wurden.

Tabellen bestehen aus mehreren Elementen:
  • <table>
    umschließt die gesamte Tabelle

    <tbody>
    ist der Tabellenkörper

    <tr>
    ist eine Zellenreihe.

    <td>
    sind Tabellenzellen

    <th>
    ist die Überschriftenzeile einer Tabelle

    <cation>
    fügt außerhalb der Tabelle eine Tabellenüberschrift ein.
Bild

Es gibt noch mehr Tabellenelemente, die jedoch nur über Quelltexteingabe erstellt werden können.

Um eine Tabelle zu erstellen, klickst du auf das Symbol Tabelle
Bild

oder wähle Menü Tabelle - Einfügen.

Es öffnet sich ein kleiner Assistent mit 3 Registern:

Über das Register "Schnell" kannst du für deine Tabelle die Anzahl der Spalten und Zeilen markieren und auf OK klicken. Fertig ist deine Tabelle... Aber sie ist voller Inlinestyles.
Bild

Besser ist die Tabelle über das Register "Präzise" zu gestalten:

Hier legst du die Zeilen und Spalten fest. Aus dem Feld Breite und Rand musst du alle Angaben entfernen.
Bild

Im Register "Zelle" löscht du ebenfalls die Angaben zu Außen- und Innenabstand.
Bild

Klicke anschließend auf "Erweitert...".

Diesen Assistenten kennst du bereits.

Das Element Tabelle hat eigene Formatierungen. Diese musst du noch ausschalten. Die Attribute Cellspacing und Cellpadding kannst du nur über die Html-Formatierung ändern.
Bild

Setze beide Elemente auf den Wert 0.

Bild
Deine Tabelle sieht noch nicht so nach Tabelle aus:
Bild

Es gibt auch immer noch Inlinestyles in deiner Tabelle. Du erkennst sie, wenn du in eine der Zellen klickst. In der Statusleiste wird ein Element mit Inlinestyles kursiv dargestellt. Hier sieht man, das die Tabelle und die Tabellenzellen noch Formatierungen im html - Code haben:
Bild

In der Tabelle ist die Textausrichtung links hinterlegt und in den Tabellenzellen die vertikale Textausrichtung oben eingetragen.

Am einfachsten löscht du dieses Inlinestyles über den Quellcode aus den Tabellenzellen. Öffne im KompoZer den eingebundenen Editor über die Symbolleiste. Jeder Texteditor besitzt eine "Suchen und Ersetzen-Funktion". Du findest sie im Menü Bearbeiten.

Suche im Quelltext einen td-Tag. Markiere ihn von <td style="vertical align="top">
Ersetze ihn durch <td>.


Tabelleneigenschaften

Über das Menü Tabelle - Tabelleneigenschaften kannst du der Tabelle eine Tabellenbeschreibung hinzufügen, die sich außerhalb der Tabelle befindet. Im Register Tabelle wählst du über das Drop-Down-Feld, wo die Tabellenbeschreibung angezeigt werden soll.
Bild

KompoZer fügt für die Beschriftung das Element caption ein.
Bild

Über das Register Zellen kannst du eine Zelle als Überschriftenzelle definieren.
KompoZer ändert das Element td in th.
Bild



Die Tabelle kannst du noch weiter über das Menü Tabelle bearbeiten. Das Menü funktioniert nur, wenn du dich innerhalb einer Tabelle befindest.

Über das Menü Tabelle - Einfügen lassen sich Spalten, Zeilen, ja sogar weitere Tabellen einfügen.

Über Menü Tabelle - Löschen kannst du Tabellen, Zeilen und Spalten wieder löschen.

Über Menü Tabelle - gewählte Zellen verbinden kannst du zwei zuvor markierte Zellen miteinander verbinden:
Bild


Übung

Ok, erstelle nun deinen Jahreskalender für dein Hobby. Gestalte deine Tabelle wie oben beschrieben mit 6 Spalten und 8 Zeilen.

Wir werden immer zwei Spalten und zwei Zeilen für einen Monat brauchen. Füge eine Tabellenbeschriftung ein: Jahreskalender. Erstelle zuerst eine Id für deine Tabelle. Ich habe sie #termine genannt. Stelle in dieser ID die Breite der gesamten Tabelle ein. Ich habe sie auf 80% eingestellt. Verbinde jeweils die zwei Zellen in der 1., 3., 5. und 7. Zeile miteinander:
Bild

Trage die Monatsnamen in die zusammengefügten Zellen ein:

In der Zeile darunter soll in der ersten Zelle das Datum und in der zweiten Zelle der Event eingetragen werden.
Bild


Probiere es einmal aus: Schreibe in die 1. Zelle unter Januar den 1.1., in der zweiten Zelle schreibst du Neujahrsfest.

Die Zellen verschieben sich, weil sie keine Breite besitzen. Um das ganze ein bisschen ordentlicher zu gestalten, brauchst du noch ein paar mehr Klassen.
Bild

Lege folgende Klassen fest:

.monat
  • Breite 32%,
    Text fett,
    zentriert,
    Hintergrund gelb
.datum
  • Breite 10%
.was
  • Breite 22%
caption
  • Außenabstand links und rechts auto
    Text zentriert
    Text fett und kursiv

Weise nun die Klassen entsprechend zu. caption ist ein Element und muss nicht zugewiesen werden.Am Ende sollte deine Tabelle so aussehen:

Bild

Deine Tabelle ist dynamisch aufgebaut. Je nachdem wie breit der Browserbildschirm ist, werden die Felder entsprechend größer bzw. kleiner.Füge um die Tabelle und Zellen noch einen Rahmen, um die Zellen von einander abzuheben.

Hier findest du meine Lösung: Lösung

Und für unsere Quellcode-Puristen:

Der Quellcode

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html><head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type"><title>Termine</title><meta content="Anke Lange" name="author"><link rel="stylesheet" href="styles.css" type="text/css"></head><body>
 
<div id="seite">
<div id="kopf">
<h1>Überschrift 1<br>
</h1>

</div>
<div id="navi">
<ul>
  <li><a href="index.html">Startseite</a></li>
  <li>
    <a href="hobby.html">Hobby</a></li>
  <li><a href="galerie.html">Galerie</a></li>
  <li><a href="glossar.html">Glossar</a></li>

  <li>
    <a href="termine.html">Termine</a></li>
  <li>
    <a href="gaestebuch.html">Gästebuch</a></li>
  <li>
    <a href="wegbeschreibung.html">Wegbeschreibung</a></li>
  <li>
    <a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div id="inhalt">
<h2>Termine über Termine ...</h2>


<table id="termine" cellpadding="0" cellspacing="0"><caption>Jahreskalender</caption>
  <tbody>
    <tr>
      <td class="monat" colspan="2" rowspan="1">Januar<br>
      </td>   
      <td class="monat" colspan="2" rowspan="1">Februar<br>
      </td>
      <td class="monat" colspan="2" rowspan="1">März<br>
      </td> 
    </tr>
    <tr>
      <td class="datum">1.1<br>
      </td>
      <td class="was">Neujahrsfeier<br>
      </td>
      <td class="datum"><br>
      </td>
      <td class="was"><br>
      </td><td class="datum"><br>
      </td>
      <td class="was"><br>
      </td>
    </tr>
    <tr>
      <td class="monat" colspan="2" rowspan="1">April<br>
      </td>    
      <td class="monat" colspan="2" rowspan="1">Mai<br>
      </td>
      <td class="monat" colspan="2" rowspan="1">Juni<br>
      </td>
    </tr>
    <tr>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td><td><br>
      </td>
      <td><br>
      </td>
    </tr><tr>
      <td class="monat" colspan="2" rowspan="1">Juli<br>
      </td>
      <td class="monat" colspan="2" rowspan="1">August<br>
      </td>
      <td class="monat" colspan="2" rowspan="1">September<br>
      </td>
    </tr>
    <tr>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
    </tr>
    <tr>
      <td class="monat" colspan="2" rowspan="1">Oktober<br>
      </td>
      <td class="monat" colspan="2" rowspan="1">November<br>
      </td>
      <td class="monat" colspan="2" rowspan="1">Dezember<br>
      </td>
    </tr>
    <tr>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
    </tr>

  </tbody>
</table>
<p><br>
</p>

</div>
<div id="footer"><a href="#kopf">nach oben </a><br>
</div>
</div>


</body></html>

Das Stylesheet:

Code: Alles auswählen

#termine {
  border: 3px groove #333300;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}
#termine td {
  border: 1px solid #333300;
}
.monat {
  width: 32%;
  text-align: center;
  font-weight: bold;
  background-color: #ffcc00;
}
.datum {
  width: 10%;
}
.was {
  width: 21%;
}
caption {
  text-align: center;
  font-size: 1.2em;
  padding-bottom: 10px;
  font-weight: bold;
  font-style: italic;
  margin-right: auto;
  margin-left: auto;
}
Jodokus667
Beiträge: 24
Registriert: Mi 11. Jan 2012, 05:01

Re: 18 Termine ... Termine

Beitrag von Jodokus667 »

Hallo Anke,

im Moment läuft es gut und ich bin gut dabei.

Bitte schicke mir auf jeden Fall das nächste Paßwort und ich denke, so müßte es auch in Ordnung sein.

Gruß

Stefan
Benutzeravatar
eleanora
Beiträge: 589
Registriert: Do 7. Jul 2011, 11:26
Wohnort: Osnabrück
Kontaktdaten:

Re: 18 Termine ... Termine

Beitrag von eleanora »

Hallo Steffan

Super, dann gehts jetzt gleich weiter mit Lektion 19
Antworten

Zurück zu „18 Termine“