Sie wollen eine einfache (css/html) Homepage zu einem Thema schreiben?

In der rechten Seite hab ich einen Rapidshare Link zu den Tools die ich verwende. PsPad ist Freeware und von Topstyle ist eine Trial Version verfügbar.

PsPad verwende ich zur Bearbeitung von Html-Dateien und Topstyle zur Bearbeitung der Css-Dateien.

Beginen sollte man immer damit die Gesamte Homepage in ein eigenes Fenster zu schieben, sodass bei unterschiedlichen Auflösungen die Homepage immer gleich aussieht:

Code:
.Inhalt {
width: 1002px;
vertical-align: top;
margin:0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
text-transform: none;
text-align:center;
color: #000000;
border: 1px solid #000000;
}

Der obere Teil muss in eine mit PsPad oder Topstyle erstellte css-Datei geschrieben werden.
So greift man dann auf die Klasse in Html zu:

Code:
<"div" class="Inhalt"> "Inhalt" <"/div">

Vorher muss aber die Css Datei in die Html Datei eingebettet werden (direkt unter das Body Tag):

Code:
<"link" rel="stylesheet" href="style.css" type="text/css">

Die Tags link und div müssen natürlich ohne "" geschrieben werden.

Als nächstes benötigen wir noch ein Navigationsmenü (oben Code für css-Datei):

Code:
#menue {
font-family: Verdana, Arial, Helvetica, sans-serif;
top: -20px;
float: left;
width: 185px;
font-size: 150%;
background-image: url(hintergrundleft.jpg);
background-repeat: repeat-y;
}
.menuekopf {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000000;
width: 185px;
padding: 5px;
border: 1px solid #000000;
margin-bottom: 2px;
background-image: url(hintergrundleft.jpg);
}
#menue ul {
list-style-type: none;
padding: 0px;
margin: 0px;
width: 185px;
}
#menue li {
display: block;
margin-bottom: 2px;
width: 185px;
}
#menue li a, #menue li a:link {
text-decoration: none;
display: block;
color: #000000;
width: 185px;
padding: 5px;
border: 1px solid #000000;
}
#menue li a:visited {
color: #000000;
}
#menue li a:hover, #menue li a:active, #menue li a:focus {
color: #FFFFFF;
border-top: 1px solid #66FF33;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #66FF33;
border-left: 1px solid #FFFFFF;
}

Jetzt der Teil der in die Html-Datei rein muss:

Code:
<"div" id="menue" style="position: relative; top:-19px; height:650px;">
<"div" class="menuekopf">HauptMenü<"/div">
<"ul">
<"li"><"a" href="Dateiname der Seite.html">Titel des Menü Punktes<"/a"><"/li">
<"li"><"a" href="Dateiname der Seite.html">Titel des Menü Punktes<"/a"><"/li">
<"/ul">
<"/div">

Auch hier müssen die Tags div, ul und li in der Html-Datei wieder ohne "" geschrieben werden.

Auf die genauen Funktionen jeder einzelnen Zeile gehe ich mit Absicht nicht ein, durch ausprobieren sollte es man jedoch anhand der vorhandenen Code-Schnipsel schaffen innerhalb kurzer Zeit eine einigermaßen brauchbare Homepage zu bauen.