Lektion 18 - Terminkalender

Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Lektion 18 - Terminkalender

Beitrag von Admin » Di 19. Aug 2014, 11:16

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:

[col]
  • <table>
    umschließt die gesamte Tabelle

    <tbody>
    ist der Tabellenkörper

    <tr>
    ist eine Zellenreihe.

    <td>
    sind Tabellenzellen

    <th>
    ist die Überschriftenzeile einer Tabelle

    <caption>
    fügt außerhalb der Tabelle eine Tabellenüberschrift ein.
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

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.

[col]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.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]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.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]
Im Register "Zelle" löscht du ebenfalls die Angaben zu Außen- und Innenabstand.[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion17-3-1.png[/popup]
[col]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.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Setze beide Elemente auf den Wert 0.

#
Klicke auf das Bild für die Darstellung in Originalgröße
|Deine Tabelle sieht noch nicht so nach Tabelle aus:
#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]
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:[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion17-7.png[/popup]
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ü [b]Tabelle - Tabelleneigenschaften[/b] 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.[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion17-12.png[/popup]
KompoZer fügt für die Beschriftung das Element caption ein.[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion17-14.png[/popup]
[col]Über das Register Zellen kannst du eine Zelle als Überschriftenzelle definieren.
KompoZer ändert das Element td in th.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]



[col]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:|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


Ü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: [b]Jahreskalender[/b]. Erstelle zuerst eine Id für deine Tabelle. Ich habe sie [b]#termine[/b] 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:[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion17-16.png[/popup]
[col]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.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


[col]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.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]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:

#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

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" "http://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;
}

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 18 - Terminkalender

Beitrag von kp2709 » Mo 1. Sep 2014, 08:13

guten morgen,
wenn ich in kompozer, die begrenzungslinien/umrandung für die tabele eingebe, werden sie nicht angezeit, öffne ich aber die vorschau, dann sind sie aber vorhanden :?: .
habe ich in kompozer einstellungen was vergessen?

in dem link http://reikuma27.reikuma.bplaced.de/web/termine.html werden die linien angezeigt.

gruß
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 18 - Terminkalender

Beitrag von anke » Mo 1. Sep 2014, 08:39

Hallo Kurt

ich wüsste nicht, wo man da etwas anderes einstellen könnte. Welches Betriebssystem verwendest du denn?

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 18 - Terminkalender

Beitrag von kp2709 » Mo 1. Sep 2014, 14:13

hi,anke,
system win 8.1
wie beschrieben es zeigt in kompozer fenster keine änderung bei eingabe des tabelenrahmen an, denn text, hintergrund und jede andere änderung zeigt es an, nur dies nicht :x .
mal beobachten, ob es bei einer nächsten tabelen eingabe (zum test) wieder vor kommt. was noch war, bei der classen vergabe an <tp>, sind dann aufeinmal styles.css einträge nicht mehr vorhanden.

ist schon komisch, sollte es wieder auftreten, installiere ich es neu ;) .

lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 18 - Terminkalender

Beitrag von anke » Mo 1. Sep 2014, 20:22

kp2709 hat geschrieben:...bei der classen vergabe an <tp>, sind dann aufeinmal styles.css einträge nicht mehr vorhanden. ...
Du meinst doch bestimmt <td> schau mal, ob du die Klasse richtig geschrieben hast.

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 18 - Terminkalender

Beitrag von eibauoma » Di 23. Sep 2014, 21:33

Weil mein eigener Terminkalender nicht gut für die Webseite geeignet wäre ;) :lol: und ich trotzdem die Tabellengestaltung üben wollte, habe ich die Festtage fürs nächste Jahr darin festgehalten.
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 18 - Terminkalender

Beitrag von anke » Mi 24. Sep 2014, 06:53

Wow, so viele Feiertage :shock: Da braucht man ja fast gar keinen Urlaub mehr :mrgreen:

Super umgesetzt eibauoma ;)

Gruß Anke

yourmy
Beiträge: 18
Registriert: Fr 6. Feb 2015, 12:07

Re: Lektion 18 - Terminkalender

Beitrag von yourmy » Do 12. Feb 2015, 21:17

hallo zusammen.
das problem von kurt hatte ich auch. ich hab auf jeden fall <td> eingefügt.
was noch war, bei der classen vergabe an <tp>, sind dann aufeinmal styles.css einträge nicht mehr vorhanden.

nun kann ich in dem fall ja einfach wieder den quelltext aus der übung bei mir einfügen und weiter machen. aber wenn das nun mein eigener seitenaufbau wäre, würde ich nun ganz schön auf dem schlauch stehen.
auffangen kann man das wohl, indem man die stylesheets exportiert?
aber da hat sich bei mir in der übung kein assistent geöffnet und ich glaube es wurde nicht korrekt gespeichert. aber da frag ich wohl noch mal besser in der lektion 11 an.

danke übrigens für diesen gut nachvollziehbaren kurs. macht echt spaß!

lieben gruß
yourmy

yourmy
Beiträge: 18
Registriert: Fr 6. Feb 2015, 12:07

Re: Lektion 18 - Terminkalender

Beitrag von yourmy » Do 12. Feb 2015, 22:46

auch hierbei hab ich das selbe problem wie kurt:

wenn ich in kompozer, die begrenzungslinien/umrandung für die tabele eingebe, werden sie nicht angezeit, öffne ich aber die vorschau, dann sind sie aber vorhanden :?: .
habe ich in kompozer einstellungen was vergessen?

seid ihr zu dem punkt schon schlauer geworden? ist ja keine dramatische sache, aber praktischer wäre es schon wenn man es gleich sehen würde.
lieben gruß

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 18 - Terminkalender

Beitrag von Hellriders » Mo 31. Aug 2015, 13:37

mein Kalender ist fertig, er muss dann nur noch mit Daten gefüllt werden. :)

termine.html

das Problem wie oben beschrieben mit der Umrandung hab ich auch.

gruß micha

Antworten