Wie setzt man ein vorh. Layout in eine ConPresso-Webseite um?
Ich benutze jetzt mal ein template von
http://www.on-mouseover.de/templates/
und zwar dieses
http://www.on-mouseover.de/templates/hp13/index.html
von dieser Seite
http://www.on-mouseover.de/templates/te ... 09_16.html
Der Quellcode sieht so aus:
Code: Alles auswählen
<!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">
</head>
<body >
<table width="88%" align="center" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td align="right" class="li" ><img src="images/pixelspace.gif" width="18" height="1" border="0" alt=""></td><td ><!--ende aussentab-->
<table align="center" width="100%" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td valign="top" id="hpname">~ Just Natural ~</td>
</tr>
<tr>
<td class="buleiste" ><!--menü oben-->
<table id="menu2" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td ><a href="index.html" onfocus="this.blur()">Kontakt</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td>
<td ><a href="index.html" onfocus="this.blur()">Home</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td>
<td ><a href="index.html" onfocus="this.blur()">Preise</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td>
<td ><a href="index.html" onfocus="this.blur()">Impressum</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td>
<td ><a href="index.html" onfocus="this.blur()">Gaestebuch</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td>
</tr>
</table>
<!-- ende menü oben-->
</td>
</tr>
</table>
<!--ende oben-->
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td rowspan="2" id="nav" >
<div id="menu01">
<ul >
<li><a href="index.html" onfocus="this.blur()">Anfahrt</a></li>
<li><a href="index.html" onfocus="this.blur()">Kontakt</a></li>
<li><a href="index.html" onfocus="this.blur()">Email</a></li>
<li><a href="index.html" onfocus="this.blur()">Gästebuch</a></li>
<li><a href="index.html" onfocus="this.blur()">Preise</a></li>
<li><a href="index.html" onfocus="this.blur()">Angebote</a></li>
<li><a href="index.html" onfocus="this.blur()">Impressum</a></li>
<li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li>
<li><a href="index.html" onfocus="this.blur()">So finden Sie uns</a></li>
<li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li>
<li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li>
<li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li>
</ul>
</div>
<!--MENU 01 ENDE-->
<!--diese box ist im moment leer--><div class="trenn2"> </div><!-- ende diese box ist im moment leer-->
<div class="box1">Ich bin eine Inhaltsbox.<br>
Hier Platz für weiteren Inhalt z.b. Text oder Grafiken.<br>
Diese Boxen erweitern sich nach unten bei mehr Inhalt automatisch.<br> <br>
<br>
<br>
<br>
<br>
</div>
<div class="box2">Ich bin eine zweite Inhaltsbox.<br>
Das Layout der Boxen für zb. Schriftart, Schriftgrösse, Schriftstil, Schriftfarbe oder Zeilenabstand sowie Rahmenfarbe, Hintergrundfarbe, Randabstand o.ä. kann in der Datei format.css (dort bei ".box") angepasst werden.</div>
<!-- weiterer Inhalt evt.-->
</td><!-- HIER ENDE LINKE SPALTE.-->
<td width="100%" id="top" > </td>
</tr>
<tr>
<td valign="top" id="sp2">
<h2>das layout.</h2>
Dieses Layout heisst: <span style="letter-spacing:2px;font-family:tahoma;">"Just Natural"
</span>. Die Boxen 1 und 2 unterhalb des Menüs auf der linken Seite könnten Sie für kleineren Inhalt wie Bilder, Text, Links o.ä. nutzen, sie verlängern sich nach unten automatisch. Wenn nicht benötigt, so lassen sich diese Boxen auch leicht entfernen. Dazu brauchen Sie einfach nur die <i>"div-Bereiche"</i> im Quelltext zu löschen. Fortgeschrittene könnten auch weitere Boxen hinzufügen, also darunter kopieren.
<br>
<br>
<br>
<h2>die technik.</h2>
Seite ohne Frames.<br>
<br>
Wie üblich mit ausgelagerter CSS-Datei. Platz für <a href="#">Fusszeile</a> unten sowie oben der <a href="#">Homepagename</a> (oben bei "Just Natural") 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>
<br>
<h2>die navigation.</h2>
Textlinks. Erweiterbar.
<br>
Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen.
<br>
<br>
<ol start="1" type="1">
<li><i>Menü links</i>:
Beliebig viele Links.</li>
<li><i>Menü oben</i>:
Erweiterbar um einige Links. Die Buttons verbreitern sich automatisch bei längeren Linkwörtern bzw. verkleinern sich bei kürzeren Linkwörtern.</li>
<li><i>Allgemeine Links</i>:
So sehen die allgemeinen Links (Links im Text) zur Zeit aus:
<a href="#" >Beispiel-Link</a></li>
</ol>
<br>
<br>
<h2>die boxen:</h2>
<p>Die Inhalts-Boxen in der linken Spalte sind durch Kopieren auch leicht erweiterbar - bzw. auch leicht zu löschen ohne das sich das Grundlayout ändert.<br>
Eine Box erkennen Sie im HTML-Code immer daran:
<br>
<br>
<div class="box">...Inhalt...</div>
<!-- ende inhalt--></td>
</tr>
<tr>
<td colspan="2" id="fussb" width="100%">
Mike Muster GmbH
<br>
<i>Greatest Product Line In Design</i><br>
~ www.ihre-webseiten-url.de ~</td>
</tr>
</table>
<td class="re"><img src="images/pixelspace.gif" width="18" height="1" border="0" alt=""</td><!-- aussentab-->
</tr>
</table>
</body>
</html>