Zitat von "Sarkkan"
Oder du meinst irgendeinen Editor, wenn du selber schreiben willst
Dann empfehle ich Scriptly.
den hab ich mir jetzt mal heruntergeladen 
Aber wie funktioniert er? Finde keine möglichkeit um zu schauen, wie das werk aussieht.
lg
gibts denn irgendwo ein kostenloses programm, womit ich internetseiten
gestallten kann?
Ich benutze das ganz neue Windows. Bin auch sehr zufrieden damit obwohl
es doch schon ein riesen unterschied von den vorigen windowssystemen ist.
Das es nicht mal eben gelernt ist, ist mir bewusst. Und ich suche hilfe, beim erstellen
aber auch gleichzeitig so, dasss ich es verstehen kann.
Mal ein Beispiel:
Ich habe ein template (kostenlos) heruntergelden und will dieses als internetseite nutzen.
Jetzt kommt dass, was ich nicht verstehe. Das Template besteht aus mehreren dateien.
Bilddateien, die durch "image.jpg" ersetzt werden.
Dann gibt es noch folgende datei:
Kaskadierendes Stylesheet-Dokument
Sieht als code so aus
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;}Dann noch eine menu- Datei.
Diese sieht so aus
/* 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;
}Und eine index datei
die sieht so aus
<!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"> </td>
</tr>
<tr>
<td id="top3" >
<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ä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ürliche, kräftige Farben </i>: Ein sehr frisches Layout. Das Menü ist ein Pixel-Menü, 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ö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öglichkeit mit dieser Zitat-Überschrift die Aussage des kompletten Artikels bzw. des jeweiligen Absatzes zu erfassen. <br><br>
Statt des normalen eher kleinen Anfü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äglich in den Print-Medien (Tageszeitung, Zeitschriften) entgegen treten.
<br>
<br>
Eine weiteres Beispiel für ein eingerü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ü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ählt beim Text insbesondere eine Einrü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ü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ü oben: Um einige Links erweiterbar. Das Menü ist ein Pixel-Menü, d.h. Sie bestimmen selbst die Breite der Buttons. Fü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öglich. Beim Menü oben mit 5 Buttons hat jeder Button 120 Pixel in der Breite. Wir haben bereits ein Beispiel fü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 übrigens zur Zeit aus wie nachstehend: Um den Mouseover-Effekt anzuschauen, fahren Sie mit der Maus über den Link:
<a href="#" >Beispiel-Link</a>
<br>
<br>
<br>
<br>
<h2>Dead Text.</h2>
Noch etwas Dummy-Text. Also Beispiel Fü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>Und diese müssen doch irgenwie zusammengesetzt werden. Woher aber, weiß ich was wo rein kommt?
Was wo eingefügt werden muss?
Hallo zusammen,
ich hoffe ich schreibe meinen Hilferuf hier in dem richtigen bereich.
Wie der Titel schon sagt, benötige ich hilfe (Am besten von A-Z und jeden kleinsten schritt) um eine
eigene Internetseite aufzubauen. ich habe mich bereits bei oyla.de angemeldet und versuche nun seit
Tagen ein eigenes Design zu erstellen. Den grundcode habe ich bereits herausgefunden :-).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
</head>
<body>
</body>
</html>Nun habe ich diesen code angegeben und sehe eine weiße seite. Jetzt will ich natürlich auch
Texte, navigation mit Buttons, und einen anderen HG haben. Das ist für mich echt ein problem.
Wenn ich alles lesen müsste, wird das auch irgend wie nichts :-(.
Wer kann mir dabei helfen, eine schöne Internetseite aufzubauen?
Vielen Dank schon mal im voraus.
LG
Lakritze