Projekt: Schuldenfalle - Leasing fertige Seite

martin.ebenhofer.uni-linz, 30. Juni 2011, 15:56

Auf folgendem Link kommt man zur Webseite

 

  • Die Seite wurde mit dem W3C Validator auf bugs im hmtl5 Code bzw. im CSS geprüft. Ergebnis: keine Fehler gefunden.
  • Das Video ist auf der Unterseite "Praxis" zu finden. Das Video ist im Rahmen eines Projektes in meiner Schulzeit entstanden und wurde von mir persönlich geschnitten. Die Aufnahmen sind im Rahmen einer Gruppenarbeit entstanden.
  • Die Elemente der Navigation wurden mit dem Tag "<nav>" eingebaut und mit dem CSS-Befehl "display:hidden;" versteckt, da die funktionierende Navigation aus Grafiken besteht und mit "<div>" Tags aufgebaut ist.

 

 

Nachfolgend ist der HTML-Code der Datei praxis.html aufgeführt. In dieser Datei sind sämtliche Tags vorhanden die in dem Projekt vorkommen.

Verwendete HTML 5 Tags:

  • <header>
  • <footer>
  • <aside>
  • <article>
  • <video>
  • <nav>

Das Grundgerüst der Seite sieht wie folgt aus (praxis.html):

<!DOCTYPE HTML>
<html>
<head>
<title>Schuldenfalle - Leasing</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

    <header id="header_">
        <h1 id="headline">Schuldenfalle Leasing</h1>
    </header>
    <nav>
    <ul class="navigation">
        <li>Leasing</li>
        <li>Praxis</li>
        <li>Gefahren</li>
        <li>Home</li>
    </ul>
    <a href="leasing.html"><div id="leasing_"></div></a>
    <div id="index-03_"></div>
    <a href="gefahren.html"><div id="gefahren_"></div></a>
    <a href="praxis.html"><div id="praxis_"></div></a>
    <a href="index.html"><div id="index-06_"></div></a>
    </nav>
    <div class="content_bg">
    <article id="content_">
    <h2>Liebe auf Leasing</h2>
    <h3>So kanns dir gehen, wenn du alles auf Leasing setzt</h3>
   
    <video class="video" controls="controls">
        <source src="leasing.mp4" type="video/mp4" />
        <source src="leasing.ogg" type="video/ogg" />
    </video>
   
    <aside>
    <p>Damit du nie in die selbe Lage wie Schurl kommst, solltest du dir gut überlegen, ob du nicht  auf Leasing verzichten kannst. Wenn du bereits in der Klemme steckst, kannst du dich bei uns beraten lassen. Infos findest du auf unserer <a href="http://ooe.schuldnerberatung.at">Homepage</a>.  </p>
    </aside>
    </article>
    </div>  


    <footer id="footer_">
        &copy; by Martin Ebenhofer // <a href="#">Impressum</a>    
    </footer> 

</body>
</html>

 

Die angehängte CSS Datei enthält folgenden Code (style.css):

@charset "UTF-8";
/* CSS Document */

header, section, footer, aside, nav, article { 
    display: block;
}

* {
margin:0;
padding:0;
}

body {
    background-color:#c7c7c7;
    font-family:Arial, Helvetica, sans-serif;
    font-size:0.9em;
    width:800px;
    margin: 0 auto;   
    padding:0;
}

#header_ {
    position:relative;
    width:800px;
    height:149px;
    background-image: url(Bilder/header.gif);
}


/*NAVIGATION(Start)*/
nav {
    position:absolute;
    top:73px;
    width:800px;
    height:53px;
}

#headline {
    visibility: hidden;
}

#leasing_ {
    position:absolute;
    left:0px;
    width:249px;
    height:53px;
    background-image: url(Bilder/leasing.gif);

}

#index-03_ {
    position:absolute;
    left:249px;
    width:166px;
    height:53px;
    background-image: url(Bilder/index_03.gif);

}

#gefahren_ {
    position:absolute;
    left:415px;
    width:129px;
    height:53px;
    background-image: url(Bilder/gefahren.gif);
}

#praxis_ {
    position:absolute;
    left:544px;
    width:119px;
    height:53px;
    background-image: url(Bilder/praxis.gif);

}

#index-06_ {
    position:absolute;
    left:663px;
    width:137px;
    height:53px;
    background-image: url(Bilder/index_06.gif);

}

.navigation {
    visibility: hidden;
}
/*NAVIGATION(End)*/

/*CONTENT(Start)*/
#content_ {
    position:relative;
    display:block;
    overflow:auto;
    top:30px;
    left:100px;
    width: 600px;
    height: 430px;
   
}

.content_bg {
    position: relative;
    top:50px;
    width:800px;
    height:500px;
    background-image: url(Bilder/content.gif);
   
}

aside {
    float:right;
    width:200px;
    margin-left:0px;
    margin-top:0px;
}

.video {
  height: 288px;
  width: 352px;
  padding: 0 0;
  margin: 0 0 0 0;
  margin-left:15px;
}
/*CONTENT(End)*/

footer {
    position:relative;
    left:0px;
    top:0px;
    width:800px;
    height:98px;
    background-image: url(Bilder/footer.gif);
    font-size: 0.7em;
    line-height: 370%;
    color: #666;
    text-align: center;
}

p {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 0.9em;
    line-height: 170%;
    margin-left:15px;
    margin-bottom:8px;
}
h3 {
    color: #F1DB2A;
    font-size: 1.0em;
    text-decoration: none;
    margin-top:15px;
    margin-bottom:15px;
    margin-left:15px;
}
p .quelle {
    color: #999;
}

0 comments :: Kommentieren