Benötige Hilfe um Internetseite zu erstellen

body
{margin-top: 0px;  margin-left: 0px; margin-right: 0px;margin-bottom: 0px;  padding:0px;
width:100%;}




#aussen
{padding:0px;margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px;




}







h2{  font-family: arial, helvetica, tahoma ,verdana, sans-serif;color:#FF8D02;
margin-bottom:20px;letter-spacing:0px;font-size: 19px;
border-bottom:dashed 1px #FF8D02;
padding-bottom:4px;font-style:italic;
}







blockquote {
        padding: 0 0 0 94px;
        background: url(http://www.oyla.de/userdaten/090/08089/bilder/quote.gif) no-repeat;
        font: italic small Times,Georgia,verdana, helvetiva,  "Times New Roman",  serif;
        font-size: 22px;
        height:80px
}




.logostyle {border:solid 1px #fff;}




.imgstyle {float:left;border:solid 1px #b6b6b6;margin-left:0px;margin-top:20px;margin-bottom:20px;margin-right:20px}




#main_top{height:463px;background-image:url(http://www.oyla.de/userdaten/090/08089/bilder/layo.jpg);background-repeat:no-repeat;
background-position:center top;width:100%;background-color:#FF6600}







#top1 {
height:0px;
vertical-align:middle;
text-align:center;
padding-right:0px;
color:#DEEDE4;
font-size:30px;
}




#top2 {
height:0px;
vertical-align:middle;
text-align:right;
padding-right:0px;
padding-top:0px;
color:#b6b6b6;
font-size:14px;
}




#top3{vertical-align:middle;
text-align:center;
padding-left:0px;




border-top:solid 0px #CFCFCF;
background-color:#;
padding-top:0px;
}







#hpname {letter-spacing:2px;font-size:20px;
font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif; font-style:italic; color:#F4FFE1;
font-style:italic;width:700px;padding-left:0px;padding-right:0px;
border-top:solid 0px #666666;padding:0px;}







.buleiste {vertical-align:middle;
height:35px;
border-bottom:solid 0px #fff;
background-color:#;
margin:0px;padding:0px;
background-image:url(http://www.oyla.de/userdaten/090/08089/bilder/button.jpg);
background-repeat:repeat-x;




}




.menutrenn {
border-bottom:solid 0px #fff;
color:#6ABC05;
margin:0px;padding:0px;
 background-image:url(http://www.oyla.de/userdaten/090/08089/bilder/trenn.jpg);background-repeat:repeat-x;
width:1px
}







#menu2 a, #menu2 a:visited , #menu2 a:active {display: block;
color:#AFAFAF;
text-decoration:none ;
font-size: 14px;
font-family:arial, helvetica, tahoma ,verdana, sans-serif;
padding-left: 2px; padding-right: 2px;padding-bottom: 0px; padding-top:0px;
border-left:solid 0px #fff;border-top:solid 0px #fff;
line-height:56px;
height:56px;
width:120px;
text-align:center;
background-color:#;
background-image:url(http://www.oyla.de/userdaten/090/08089/bilder/button.jpg);
background-repeat:repeat-x;
}




#menu2 a:hover {
color:#fff;
background:transparent;
text-decoration:overline ;
background-image:url(http://www.oyla.de/userdaten/090/08089/bilder/button2.jpg);
background-repeat:repeat-x;
}










#main{  height:900px;
 background-color:#f0f0f0;width:100%;
}




#main2{background:transparent;height:100%;text-align:center;
padding-left:0px;padding-right:0px;
text-align:center;width:770px
}




#inbox { text-align:justify;padding-top:60px;
padding-bottom:60px;
padding-left:20px;padding-right:20px;
font-size: 15px;line-height: 19px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
color:#000;
 background-color:#fff;
 vertical-align:top;
       }







#navbox {color:#fff;font: normal 11px/15px verdana, sans-serif; padding-left: 0px;padding-right:0px;padding-top: 0px;
background-color:#;
border-right:solid 1px #fff;
border-left:solid 0px #fff;
width:120px;
vertical-align:top;
text-align:center;}
















#fussb {
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
font-size:13px;
 color: #fff;
height:120px;
text-align:center;
vertical-align:middle;
padding-bottom:24px;
background-color:#FF6600;
background-image:url(images/xfuss.jpg);
background-repeat:repeat-x;
background-position:top center;
padding-bottom:10px;
letter-spacing:1px;
}




#fussb2 {font-family: verdana, sans-serif;
font-size:14px;
 color: #fff;
height:92px;
text-align:center;
vertical-align:middle;
font-style:italic;
background-color:#FF6600;
letter-spacing:1px;
background-image:url(images/xfuss2.jpg);
background-repeat:no-repeat;
background-position:top center;




}













/* allgemeine links im text */




a:link, a:visited, a:active{ font-size: 15px;line-height: 19px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;color:#c04000     ;text-decoration:underline;background-color:#
;}




a:hover{ background-color:#FF8D02;
color:#fff;text-decoration:none}




/* scrolleiste internet explorer ab vers.5.5 */




body
{scrollbar-arrow-color: #737b66; scrollbar-base-color: #F5F8F3;
scrollbar-highlight-color : #737b66; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #e6e6e6;}

/* menü aus der version index.html */




#menu1 a, #menu1 a:visited , #menu1 a:active {display: block;
color:#AFAFAF;
text-decoration:none ;
font-size: 14px;
font-family:arial, helvetica, tahoma ,verdana, sans-serif;
padding-left: 0px; padding-right: 0px;padding-bottom: 0px; padding-top:0px;
border-left:solid 0px #fff;border-top:solid 0px #fff;
line-height:56px;
height:56px;
width:120px;
text-align:center;
background-image:url(http://www.oyla.de/userdaten/090/08089/bilder/button.jpg);
background-repeat:repeat-x;
}




#menu1 a:hover {
color:#fff;
background:transparent;
text-decoration:overline ;
background-image:url(http://www.oyla.de/userdaten/090/08089/bilder/button2.jpg);
background-repeat:repeat-x;
}




/* variante: menü aus der version index2.html */




#menu2 a, #menu2 a:visited , #menu2 a:active {display: block;
color:#AFAFAF;
text-decoration:none ;
font-size: 14px;
font-family:arial, helvetica, tahoma ,verdana, sans-serif;
padding-left: 0px; padding-right: 0px;padding-bottom: 0px; padding-top:0px;
border-left:solid 0px #fff;border-top:solid 0px #fff;
line-height:56px;
height:56px;
width:94px;
text-align:center;
background-image:url(http://www.oyla.de/userdaten/090/08089/bilder/button.jpg);
background-repeat:repeat-x;
}




#menu2 a:hover {
color:#fff;
background:transparent;
text-decoration:none ;
background-image:url(http://www.oyla.de/userdaten/090/08089/bilder/button2.jpg);
background-repeat:repeat-x;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
<meta name="description"
content="homepage, dokument, webpage, page, web, netz" >
<title>homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz</title>
<!-- Der Copyright-Hinweis ist nicht zu löschen. Ein Entfernen des Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen -->
<!-- (c)Copyright by S.I.S.Papenburg / www.on-mouseover.de/templates/ -->




<!-- Hinweis:
Das Anbieten dieser Vorlage auf einer Webseite, CD, DVD oder anderen Bild/Tonträgern ist untersagt.
Nutzen dürfen Sie diese Vorlage aber auf einer Webseite wie folgt:
Die Vorlage kann privat (kostenlos) und kommerziell/gewerblich (gegen Bezahlung) für Sie selbst oder eine dritte Person (andere Person oder Firma) genutzt werden.
Je nach dem Inhalt, welcher eingefügt wird, kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen.
Lesen Sie auf der Webseite www.on-mouseover.de/templates/
bitte die Nutzungsbedingungen nach.
-->










<link rel="stylesheet" href="format.css" type="text/css">




<link rel="stylesheet" href="menue.css" type="text/css">




</head>
<body     >










<table align="center" width="100%"  cellspacing="0" cellpadding="0" border="0"  id="aussen" >
<tr>
<td align="center"  width="100%" >




<table   id="main_top"  cellspacing="0" cellpadding="0" border="0"   >
<tr>
<td valign="middle" id="top1"></td>
</tr>
<tr>
<td valign="middle" id="top2">&nbsp;</td>




</tr>
<tr>
<td id="top3" >




&nbsp;<span id="hpname" >Name der Homepage </span>







</td>
</tr>




<tr>
<td     class="buleiste" >
<!--menü-->
<table  align="center"    id="menu1"   border="0" cellpadding="0" cellspacing="0"    >
<tr>




<td ><a href="index.html"  >Wir</a></td><td class="menutrenn"><img src="images/trenn.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html"  >G&auml;stebuch</a></td><td class="menutrenn"><img src="images/trenn.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html"  >Shop</a></td><td class="menutrenn"><img src="images/trenn.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html"  >Impressum</a></td><td class="menutrenn"><img src="images/trenn.jpg" width="2" height="56" border="0" alt=""></td>
<td ><a href="index.html"  >Mail</a></td>
</tr>
</table>
<!--ende menü-->
</td>
</tr>
<table >







<!--ende oben-->




<table   id="main"  align="center"       border="0" cellpadding="0" cellspacing="0"  >
<tr>
<td  valign="top"    align="center" >
<table  align="center"  id="main2"    border="0" cellpadding="0" cellspacing="0">
<tr>




<td  id="inbox"  >
















<h2>Layout.</h2>




Dieses Design heisst: " <b style="letter-spacing:9px;color:#494949">Lilie</b> ". <br><br>




<i>Nat&uuml;rliche, kr&auml;ftige Farben </i>: Ein sehr frisches Layout. Das Men&uuml; ist ein Pixel-Men&uuml;, d.h. Sie bestimmen die Breite der Buttons selbst . Alle Buttons sind gleich gross. Je weniger Pixel an Breite Sie also den Buttons geben, desto mehr Buttons sind m&ouml;glich. Es gibt auch bereits eine <b>zweite Version</b> anbei mit <b>8 Buttons</b>. Lesen Sie dazu weiter unten mehr unter "<i style="color:#C04000">Navigation</i>". Donec lobortis, justo ut congue tempus, dui justo mattis nisl, et venenatis ligula urna at nisi. Praesent eget risus semper enim laoreet ultricies. Vivamus risus metus, lacinia et, semper ac, porta ac, lectus. Pellentesque placerat. Sed nec lorem vel neque bibendum accumsan. Fusce condimentum placerat orci. Fusce dictum. Nam sed pede at nisi varius pretium. Integer pharetra ultrices quam. Praesent gravida nulla at ipsum. Integer vel nisl eget nisi elementum feugiat. Curabitur justo massa, blandit quis, aliquet sit amet, fermentum sed, nibh. Sed faucibus. Nam ornare feugiat sapien. Nulla facilisi. Quisque commodo facilisis nibh. Fusce at sapien congue massa bibendum vehicula. Sed a leo ut nulla cursus scelerisque.




<blockquote>
Praesent. Gravida. Nulla<br>
Quisque commodo facilisis<i style="font-style:bold;color:#208117">!</i><br>




Curabitur <i style="font-style:bold;color:#208117">dictum</i> neque <i style="font-style:bold;color:#800000">eget </i>nam  <i style="font-style:bold;color:#C04000">?</i>




</blockquote>










Fusce vitae enim tempor magna luctus rhoncus. Nam neque leo, semper vitae, rhoncus non, aliquam vel, turpis. Curabitur dictum neque eget ipsum. Nulla ante. Morbi ut felis. Phasellus pellentesque egestas lorem. Vestibulum eget augue. Aenean ornare lectus at est. Suspendisse nunc. Maecenas tempor feugiat tellus. Cras nec nunc non justo eleifend euismod. Suspendisse adipiscing leo. Proin luctus ligula ut purus. Nam vitae nisl eget elit hendrerit ornare. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam in turpis eget turpis pharetra iaculis.




<br>
<br>
<br>
<br>










<h2>Technik.</h2>
Anmerkungen zum Thema "Zitate":<br>




Oberhalb sehen Sie das Beispiel-Zitat <i>"Praesent. Gravida. Null."</i> usw. im Text auftauchend an beliebiger Stelle. Sofort erkennt man es als willkommene Auflockerung des Textes und M&ouml;glichkeit mit dieser Zitat-&Uuml;berschrift die Aussage des kompletten Artikels bzw. des jeweiligen Absatzes zu erfassen. <br><br>



















Statt des normalen eher kleinen Anf&uuml;hrungszeichen (<b>"</b>) als Text wurde hier mit einem grafischem Zeichen gearbeitet. Das schaut layout-technisch schick aus und erinnert an Techiken wie sie uns t&auml;glich in den Print-Medien (Tageszeitung, Zeitschriften) entgegen treten.
<br>
<br>




Eine weiteres Beispiel f&uuml;r ein einger&uuml;cktes Zitat sehen Sie nachstehend:




<br><br><br>







<div style="padding-left:70px;padding-right:70px;color:#208117;font-size: 16px;font-family:italic small, arial, helvetica, sans-serif   "><i style="padding-left:40px;color:c04000;font-size: 21px;letter-spacing:5px;" >Zitate</i> bzw. Ihre <b style="color:black;font-family:monospace, sans-serif;font-size: 18px;">Werbe-Spr&uuml;che</b> eignen sich im allgemeinen also genauso gut zur <span style="color:#ff8d02;font-size: 18px;">Textauflockerung</span> wie Grafiken. <span  style="color:#000;">Hierzu z&auml;hlt beim Text insbesondere eine Einr&uuml;ckung und eine andere Schriftformatierung. Wie Sie sehen, wurde auch dieser Text  andersfarbig <span  style="color:#800000;font-style:italic">gestaltet <b style="color:black;font-style:normal">und</b> einger&uuml;ckt</span> <span  style="color:#3C4E62;font-size: 21px;">!</span>




</div>
<br>
<br>






















Seite ohne Frames.




Die Fusszeile unten sowie oben der Homepagename sind als einfacher Text einzutragen.
<i>Anlegen von Links bzw. HTML-Seiten</i> wie folgt: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.
<br>
<br>




Donec lobortis, justo ut congue tempus, dui justo mattis nisl, et venenatis ligula urna at nisi. Praesent eget risus semper enim laoreet ultricies. Vivamus risus metus, lacinia et, semper ac, porta ac, lectus. Pellentesque placerat. Sed nec lorem vel neque bibendum accumsan. Fusce condimentum placerat orci. Fusce dictum. Nam sed pede at nisi varius pretium. Integer pharetra ultrices quam. Praesent gravida nulla at ipsum. Integer vel nisl eget nisi elementum feugiat. Curabitur justo massa, blandit quis, aliquet sit amet, fermentum sed, nibh. Sed faucibus. Nam ornare feugiat sapien. Nulla facilisi. Quisque commodo facilisis nibh. Fusce at sapien congue massa bibendum vehicula. Sed a leo ut nulla cursus scelerisque.
<br>
<br>
<br>
<br>







<h2>Navigation.</h2>
Text-Links. Men&uuml; oben: Um einige Links erweiterbar. Das Men&uuml; ist ein Pixel-Men&uuml;, d.h. Sie bestimmen selbst die Breite der Buttons. F&uuml;r alle Buttons wird also ein bestimmter Pixelwert festgelegt. Alle Buttons sind gleich gross. Je weniger Pixel an Breite Sie also den Buttons geben, desto mehr Buttons sind m&ouml;glich. Beim Men&uuml; oben mit 5 Buttons hat jeder Button 120 Pixel in der Breite. Wir haben bereits ein Beispiel f&uuml;r Sie anbei mit 8 Buttons in der Datei "<a href="index2.html">index2.html</a>".  Dort hat jeder Button eine Breite von 94 Pixel.




<br>
<br>



















 Die allgemeinen Links (Links im Text) sehen &uuml;brigens zur Zeit aus wie nachstehend: Um den Mouseover-Effekt anzuschauen, fahren Sie mit der Maus &uuml;ber den Link:
<a href="#" >Beispiel-Link</a>
<br>
<br>
<br>




<br>










<h2>Dead Text.</h2>
Noch etwas Dummy-Text. Also Beispiel F&uuml;lltext. In ornare felis eget magna. Donec hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;  Curabitur sit amet est. Pellentesque tincidunt imperdiet risus. Nulla varius tincidunt felis. Cras in metus non odio elementum consequat. Ut quis tortor eget erat consequat porta. In mauris. Vestibulum eget ante. Curabitur hendrerit sagittis ante. In sem massa, iaculis quis, mollis vel, fermentum vel, nulla. Nam turpis orci, congue ultrices, vehicula sit amet, pretium sit amet, mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tincidunt tellus at nisi.
<br>
<br>
Duis rutrum mauris et risus viverra pharetra. Proin eu orci. Etiam et metus. In nec lectus. Ut faucibus magna a mauris sagittis laoreet. Maecenas dolor odio, hendrerit at, vestibulum vel, iaculis egestas, felis. Fusce fermentum, elit quis gravida mattis, massa neque mattis purus, sit amet interdum lorem nibh ut lorem. Aliquam leo nulla, gravida sed, tincidunt non, malesuada sed, lacus. Phasellus arcu sem, ultrices et, aliquet ac, malesuada aliquam, mauris. Praesent posuere diam eu diam. Proin aliquam suscipit enim. Curabitur ullamcorper nunc dictum dolor. Mauris dictum semper ipsum. Morbi ut sapien.




























<!-- ende inhalt--></td>




</tr>
</table>
</td>




</tr>




</table>
<!-- fuss-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td id="fussb">
Mike Muster GmbH & Co.KG<br>
Spezialstrasse Nr. 55  <br>
55234 Sampletown<br>
<img src="images/pixelspace.gif" width="300" height="1" border="0" alt="" style="background-color:#FFB380;margin-top:3px;margin-bottom:3px"><br>
<span style="color:#FFDAC1;background-color:;">Fax: 049 52 78 94 356</span>




</td>
</tr>
<tr>
</table>
<!-- ende fuss-->




</td>
</tr>
</table>










</body>
</html>