Berni's Blog

Den Link zu meiner zweiten Seite finden Sie hier. Der unten angeführte Code ist als Auszug anzusehen. Der komplette Code wird zu unübersichtlich im Collabor-Blog dargestellt.

Header

Die hier zu findende Luftbettseite wurde im Kopfbereich um ein subnav erweitert. Der rest vom header bleibt (bis auf die Überschrift und das Startbild) ident mit Teil1.

 <nav role="navigation">
      <ul>
           <li>...</li>
      </ul>
 </nav>
           
<div class="clear"></div>
           
<img class="subnav-arrow" src="images/arrow-subnav.png" alt="pfeil" />
<p class="act-menu">Luftbett</p>
<ul id="sub-nav">
    <li> ... </li>
<ul>
           
 <div class="clear"></div>
                       
 <div id="heading" class="luftbett border-radius5">
 </div>

Die Subnavigation <ul id="sub-nav"> befindet sich in keinem <nav> Element, da es sich nicht um die Hauptnavigation handelt, sondern um Links zu weiterführenden und vertiefenden Informationen. Würde man Navigatinselemente einfügen um auf der aktuellen Seite zu navigieren (ohne diese zu verlassen; z.B Ankerlinks) wäre ein <nav> angebracht. Die Links dienen aber als Navigationshilfen um an vertiefende Informationen zu gelangen. Die clear <div> werden benötigt um das float richtig zu beenden.

Inhaltsbereich

Der <main> Bereich umfasst bei dieser Seite einen einführenden <article>, eine <section> mit dem Video und einen zweiten <article> zum Thema Luftbettaufbau.

Einführender <article>

Der Einführende Artikel ist wie auf der Startseite aufgebaut und daher wird nicht mehr näher darauf eingegangen. Dieser wurde nur Inhaltlich angepasst und es wurde ebenfalls auf die Thematik "Der Weg zum neuen Bett" bezug genommen, weil es auf der Webseite 4 Landingpages geben wird die als Einstiegsseiten beworben werden: Startseite, Wasserbett, Luftbett und Matratze.

Video <section>

        <div class="wrap light-blue bg-video-luftbett">
            <section>
                <h1 class="emboss">Luftbett in bewegten Bildern</h1>
                <div class="box460">
                    <p>...</p>
                </div>
                <div class="box460">
                    <video id=0 controls width=420 height=240>
                        <source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
                        <source src="video/video.webm" type='video/webm' >
                        <source src="video/video.mp4" type='video/mp4'>
                        <p>Video is not visible, most likely your browser does not support HTML5 video</p>
                    </video>
                </div>
            </section>
            <div class="clear"></div>   
        </div><!-- wrap light-blue end -->

Die section ist von einem Style-div ummantelt und enthält die verschiedenen Videoformate für die unterschiedlichen Browser. Man hätte auch ein <article> nehmen können, da das Video für sich selbst stehen kann. In diesem Kontext ist das Video jedoch als Unterstützung für den Text gedacht und somit mit diesem verbunden. Das Video als Einstieg und der Text als ausführliche Informationsquelle.

Luftbett Aufbau <article>

Der Aufbau des Luftbettes ist defenitiv ein <article>, da er für sich alleinstehend den technischen Aufbau des Produktes erklärt. Es wären keine weiteren Informationen von nöten.

Der Artikel ist in 3 <section> gegliedert: "Einzelteile vom Basismodul", "Einzelteile des Topper" und "Luftdruckregelung". Diese sollen die Hauptkomponenten des Produktes wiederspiegeln. Jeder dieser Bereiche ist wiederum in einzelne <section> Elemente unterteilt. Dies dient dazu um jeden Bauteil der 3 Hauptkategorien als solchen zu kennzeichnen und von den anderen abzugrenzen.

Fat Footer

Siehe Teil1

CSS-Sprites

Um die Serveranfragen zu verringern und damit die Seitenladezeit, wurden die einzelnen Aufbauschritte des Luftbettes in eine Datei gepackt und mit der sogenannte Sprites Technik als Hintergrundbild abgefragt. Da diese Bilder nur auf dieser einen Seite vorkommen, eignen sich diese hervorragend um in einem Sprite abgearbeitet zu werden.