Website projektpräsentation

Website Projekt
von Eduardo und Jonas

2.1 Programmierung der
Grundwebsite

2.2 CSS-Datei
#leiste {background-color: blue;
top: 75px;
left: 200px;
right: 0px;
height: 78px;
position: fixed;}

2.3 html-Datei
<body>
<div id="leiste">
Menüleiste</div>
<div id="bild"> Logo</div>
<div id="name">Name der Website</div>
<div id="inhalt"> Inhalt</div>
<div id="fusszeile">
Informationen</div>
</body>

2.4 Problem
• Der Footer bleibt nicht unten
• Lösung:
» genauen Abstand festlegen
» Inhalt und Fußzeile in einen „div“
Bereich bringen

#seite {position: relative;
min-height: 100%;
width: 800px;
margin: 0 auto;
background-color: white;
top: 200px;}
<div id="seite">
<div id="inhalt"> Inhalt</div>
<div id="fusszeile">
Informationen</div>
</div>
Footer bleibt unten

3.1 Thema finden + Website designen
• Bild von der ersten Version der Website
• Menüleiste erklären
• Als Beispiel für die Weiterentwicklung der
„Stationen“ Seite

<form
action="MAILTO:deinfeedback1@gmail.com"
method="post" enctype="text/plain"> Dein
Name:
<input type="name" required title="Gib
bitte deinen Namen ein" size="48"
name="name" value=""> </label>
Deine E-Mail Adresse:
<input type="email" required title= "Gib
bitte eine echte Adresse ein" size= "48"
name= "email" value=""> </label>
Dein Feedback zu unserer Website:
<textarea name= "comments" rows= "15" cols=
"50">
</textarea>

<button onclick= "myFunction()">
<input type= "submit"
value="Abschicken">
</form>
</button>
<script>
function myFunction() {
alert("Vielen Dank fuer dein
Feedback!");
}
</script>

5.1 Drop down Menü
Drop Down Menü
#menu { font-size:30px;
position: fixed;
background-color: white;
left: 210px;
top: 75px;
opacity: 0.95;
height: 75px;}

.topmenu a, .submenu a{padding: 1px 5px;
border: 0px;
border-collapse: collapse;
color: black;
text-decoration: none;
background-color: white;}
.submenu a {width:200px;
position: relative;
clear: both;}
#menu a:hover, .topmenu.on a {
color: white;
background-color: red
!important;}

<div id= "menu">
<ul> <li class="topmenu">
<a href="Seenotrettungsboote.html">
Seenotrettungsboote</a>
<ul>
<li class= "submenu">
<a href="Seenotrettungsboote.html">
Überblick</a></li>
<li class= "submenu"><a
href="">einzelne Klassen</a></li>
</ul>
</li>
</ul>
</div>

Website projektpräsentation

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (18)

Website projektpräsentation