Medienproduktion: Silvia's Blog

http://students.idv.edu/~0855316/index.html

Die Seite wurde für den Firefox-Browser ausgelegt.

Das Video funktioniert allerdings nur im Safari-Browser!

HTML-Auszug:

<header class="vierwolken">
    <div id="zurueck">
        <a class="betont" href="index.html">zurück zur Übersicht</a>
    </div>
    <div id="navi_kuscheln">
        <a class="weiss" href="kuscheln.html">Kuscheln</a>
    </div>
    <div id="navi_spielen"><a class="weiss" href="spielen.html">Spielen</a></div>
    <div id="navi_schlafen"><a class="weiss" href="schlafen.html">Schlafen</a></div>
    <div id="navi_schnurren"><a class="weiss" href="schnurren.html">Schnurren</a></div>
    <h1>Die Katze - ein Schmusetiger</h1>
</header>

<article>
     <h2>Spielen</h2>
    <p>Kleine Kätzchen spielen gerne, große Katzen auch. Sie balgen sich, toben durch die Wohnung, bäumen sich auf, um dann mit Enthusiasmus auf den tierischen Spielkameraden zu springen. Aber nicht nur Artgenossen sind als Spielpartner gefordert, sondern vor allem der Mensch als Bezugsperson der Katze. Spielen vermittelt nicht nur den so beliebten Funfaktor, sondern wurde von Mutter Natur mit einer wichtigen biologischen Funktion bedacht.</p>
       
    <video  width="640" height="360" controls autobuffer>
        <source src="Videos/katze_spielen.m4v" type="video/mp4" />
        <source src="Videos/katze_spielen.ogv" type="video/ogg" />
        This browser is not compatible with HTML 5
    </video>

    <p>Das Spielen hat eine enorme Bedeutung für die heranwachsende als auch die erwachsene Katze. Der direkte Zusammenhang zwischen dem Spiel, dem Wachstum und der Entwicklung wird vor allem dann sichtbar, wenn dieser Verknüpfung nicht Rechnung getragen wird. In der Folge können Fehlentwicklungen oder Probleme im Verhaltensbereich entstehen. In den vielen Spielen mit ihren Geschwisterchen werden aus tollpatschigen Kätzchen geschickte Jäger. Im Spieltrainingslager kleiner Katzen werden nicht nur körperliche Fertigkeiten geübt, auch das Wahrnehmungs- und Reaktionsvermögen wird geschult. Es werden spielerisch Erfahrungen gesammelt, soziale Beziehungen angebahnt und gefestigt. Unsere Katzen - wie auch unsere Hunde - erlernen im Spiel, ihre eigene Aggression zu kontrollieren. Begreift es sich doch einfach schneller, wie stark man zubeißen darf, wenn der Spielpartner sich abwendet oder mit einem Pfotenhieb oder gar einem Gegenbiss kontert.</p>
    <figure>
        <img src="Bilder/spielen.jpg">
        <figcaption>Katze beim Spielen</figcaption>
    </figure>
    <aside>Die schönsten Spiele sind diejenigen mit viel "action". Rollende Bälle, durch die Luft fliegende Mäuse, sich schlängelnde Bänder … alles, was sich bewegt, erweckt das Interesse der Katze, vor allem, wenn der Mensch die Bewegung des Spieles verursacht. Besonders beliebt unter unseren Samtpfoten sind Spielangeln, an deren Ende ein Mäuschen oder Federn befestigt sind, der Jagdtrieb kann damit optimal zufrieden gestellt werden.</aside>
   <p>Quelle: <a class="lesbar" href="http://www.webheimat.at/aktiv/Haustiere/Tierpsychologe/Katzen-Spielen.html">http://www.webheimat.at/aktiv/Haustiere/Tierpsychologe/Katzen-Spielen.html</a></p>
</article>

<footer>
  <p>© Copyright by <a class="unscheinbar" href="mailto:silvia.igmann@gmx.net">Silvia Igmann</a></p>
</footer>

CSS-Auszug:

h1 {
    display:none;
    }
   
h2 {
    padding-left:20px;
    font-family:Verdana;
    font-size:1.3em;
    color:#333333;
    }

nav {
    background-image:url(Layout/start.jpg);
    width:800px;
    height:594px;
    margin: 0 auto;
    }

header.ohnewolken {
    display: block;
    background-image:url(Layout/header.jpg);
    width:800px;
    height:121px;
    margin: 0 auto;
    }

header.zweiwolken {
    display: block;
    background-image:url(Layout/header_2w.jpg);
    width:800px;
    height:121px;
    margin: 0 auto;
    }

header.vierwolken {
    display: block;
    background-image:url(Layout/header_4w.jpg);
    width:800px;
    height:121px;
    margin: 0 auto;
    }

article {
    display: block;
    position:relative;
    background:url(Layout/textur.jpg) repeat-y center top;
    width:800px;
    margin: 0 auto;
    min-height:300px;
    padding-bottom:50px;
    padding-top:15px;
    }

footer {
    display: block;
    background-image:url(Layout/footer.jpg);
    background-repeat:no-repeat;
    width:800px;
    height:45px;
    margin: 0 auto;
    position:relative;
    padding-top:15px;
    }

aside {
    font-family:Verdana;
    font-size:0.9em;
    padding-left:20px;
    padding-right:20px;
    color:#ff6699;
    font-style: italic;
    text-align: center;
    }

figure {
    float: right;
    max-width: 300px;
    max-height: 300px;
    margin: 5px;
    padding: 0px 5px 15px 10px;
    text-align: center;
    }
   
figcaption {
    font-family:Verdana;
    font-style:italic;
    font-size:0.8em;
    }

video {
    margin: 0 auto;
    display:block;
    width: 640px;
    max-height: 360px;
    align: center;
    padding: 15px 0px 15px 0px;
    }