[Typo3] Template auf HTML-Basis erstellen

Keen · Jan 17, 2007

Moin,

seit Ende Dezember versuche ich mich in das CMS-System Typo3 einzuarbeiten und bin momentan dabei verschiedene Bücher zu dem Thema zu lesen. Was mir allerding noch immer schleierhaft ist, ist wie ich aufgrund von HTML-Seiten verwendbare Templates erstelle.
Ich habe von nem Kumpel eine Beispielseite bekommen, die ich in Typo3 zum üben nachbauen soll, komme aber momentan nicht weiter.

Die Seite soll folgendermaßen aussehen:
sysManagement - CMS auf Typo3 Basis

Der Quellcode der Seite ist wie folgt:

Code:

<html><head><title>sysManagement - CMS auf Typo3 Basis</title>




<link rel="stylesheet" type="text/css" href="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/css.css">


<style type="text/css">
<!--
.style2 {color: #00000}
-->
</style></head><body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">
<table id="Tabelle_01" border="0" cellpadding="0" cellspacing="0" height="100" width="100%">
	<tbody><tr>
		<td colspan="4" rowspan="5" bgcolor="#262c01" nowrap="nowrap">
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/01.jpg" height="210" width="527"></td>
		<td rowspan="5" bgcolor="#262c01" height="210" width="2%">&nbsp;</td>
		<td colspan="2" bgcolor="#262c01">
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/03.jpg" height="8" width="344"></td>
	</tr>
	<tr>
		<td colspan="2" align="left" bgcolor="#262c01" height="16" valign="middle"><a href="#">Mainmenü</a> | <a href="#">Mainmenü</a> | <a href="#">Mainmenü  </a></td>
	</tr>
	<tr>
		<td colspan="2" bgcolor="#262c01">
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/05.jpg" height="31" width="344">
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/06.jpg" height="88" width="344"></td>
	</tr>
	
	<tr>
		<td colspan="2" bgcolor="#262c01" height="50">&nbsp;</td>
	</tr>
	<tr>
		<td colspan="2" bgcolor="#262c01" height="17" valign="middle"><div align="right"><a href="#">Submenü</a> | <a href="#">Submenü</a> | <a href="#">Submenü</a> </div></td>
  </tr>
	<tr>
		<td colspan="7">
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/09.jpg" height="1" width="900"></td>
	</tr>
	<tr>
		<td colspan="7" bgcolor="#f0f0f0" height="25"><p>Pfadangabe der Seite </p></td>
  </tr>
	<tr>
		<td bgcolor="#f0f0f0" height="327" width="2%">&nbsp;</td>
		<td align="left" bgcolor="#f0f0f0" height="327" valign="top" width="20%"><p>Lorem ipsum dolor </p>
		  <p>sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse </p>
	    <p>molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. quod mazim
placerat facer possim assum.</p></td>
		<td bgcolor="#f0f0f0" height="327" width="5%">&nbsp;</td>
		<td colspan="3" align="left" bgcolor="#f0f0f0" height="327" valign="top"><p>Lorem ipsum dolor </p>
		  <p>sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse </p>
	    <p>molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p></td>
		<td bgcolor="#f0f0f0" height="327" width="5%">&nbsp;</td>
	</tr>
	<tr>
	  <td colspan="7" align="center" bgcolor="#f0f0f0" height="37" valign="bottom">©2007 by sysTel GbR Alle Rechte vorbehalten.</td>
	</tr>
	<tr>
		<td>
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/Abstandhalter.gif" height="1" width="20"></td>
		<td>
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/Abstandhalter.gif" height="1" width="221"></td>
		<td>
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/Abstandhalter.gif" height="1" width="38"></td>
		<td width="20%">
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/Abstandhalter.gif" height="1" width="248"></td>
		<td>
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/Abstandhalter.gif" height="1" width="29"></td>
		<td width="23%">
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/Abstandhalter.gif" height="1" width="273"></td>
		<td>
			<img src="sysManagement%20-%20CMS%20auf%20Typo3%20Basis-Dateien/Abstandhalter.gif" height="1" width="71"></td>
	</tr>
</tbody></table>
</body></html>

Es wäre echt verdammt nett wenn mir jemand den Code zum Beispiel etwas umbasteln und mir erklären könnte wie ich das dann in Typo3 einbinde bevor ich durchdrehe

Tausend Dank schonmal

Huschi · Jan 18, 2007

a) Auf der Seite steht eindeutig ein Copyright-Vermerk. Und Du willst Sie dennoch kopieren?
b) Viele Typo3-Bücher/-Anleitungen scheinst Du nicht gelesen zu haben. Sonst würdest Du nicht komplett ohne Ahnung da stehen.
c) Ein Typo3-Template ist nicht nur eine Datei sondern auch das ganze Setup inkl. aller TS-Anweisungen. Das ist nicht so schnell umgesetzt sondern kostet etwas Zeit die (zumindest bei mir) nicht kostenlos ist.

huschi.

Keen · Jan 18, 2007

Moin,

zum einen kann ich dir sagen, dass das mein Copyright ist, beim anderen magst du aber recht haben. Dennoch danke

Obi-Wan · Apr 8, 2007

Keen said:
Moin,

zum einen kann ich dir sagen, dass das mein Copyright ist, beim anderen magst du aber recht haben. Dennoch danke

das mit dem umbauen ist nicht ganz einfach und kostet viel zeit, auch wenn das HTML schon vorhanden ist.

Einige webdesigner macht das aber gegen kleine Kohle

BlackPixel · Jul 13, 2007

Ich würde nicht versuchen etwas bestehendes umzubasteln. Vielmehr macht es sinn, das Templatefile neu zu gestalten. Dabei ist es sicherlich sinnvoll, auf diese alten Tabellenkonstrukte gänzlich zu verzichten.

HTML:

<body class="twoColFixLtHdr">
<!-- ###DOKUMENT### begin -->
    <div id="container">
      <div id="header">        ###PAGETOP###<span class="Stil4">

      <!-- end #header -->
      </span></div>
      <div class="Stil4" id="sidebar1">        <span class="Stil5">###MENU###<br />
      <br />
      <br />
      ###LEFTCONTENT### </span>
        <!-- end #sidebar1 --></div>

      <div class="Stil4" id="mainContent"> <span class="Stil2">###MIDDLECONTENT###</span>
        <!-- end #mainContent -->
      </div>
      <span class="Stil4">
      <!-- Dieses clear-Element sollte direkt auf das #mainContent-div folgen, um das #container-div anzuweisen, alle untergeordneten Floats aufzunehmen. -->
      <br class="clearfloat" />
      </span>
      <div id="footer">

        <p class="Stil3">###PAGEBOTTOM###</p>
        <!-- end #footer --></div>
    <!-- end #container --></div>
    
</body>
  <!-- ###DOKUMENT### end -->

Code:

@charset "utf-8";
body  {
    	font: 100% Arial;
    	background: #666666;
    	margin: 0;
    	padding: 0;
    	text-align: center; 
    	color: #000000;
    }
    .twoColFixLtHdr #container {
	width: 780px;  
	background: #FFFFFF; 
	border: 1px solid #000000;
	text-align: left; 
	float: left;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
    } 
    .twoColFixLtHdr #header {
	background: #DDDDDD;  
	padding-top: 10;
	padding-right: 10px;
	padding-bottom: 10;
	padding-left: 20px;
    } 
    .twoColFixLtHdr #header h1 {
    	margin: 0; 
    	padding: 10px 0; 
    }
    .twoColFixLtHdr #sidebar1 {
    	float: left; 
    	width: 200px; 
    	background: #EBEBEB; 
    	padding: 15px 10px 15px 20px;
    }
    .twoColFixLtHdr #mainContent {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 250px;
	padding-top: 10;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
    } 
    .twoColFixLtHdr #footer { 
    	padding: 0 10px 0 20px; 
    	background:#DDDDDD; 
    } 
    .twoColFixLtHdr #footer p {
    	margin: 0; 
    	padding: 10px 0; 
    }
    .fltrt { 
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { 
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { 
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
	p{
	font-size: 80%;
	}

Im TS kannst Du die Files dann verknüpfen:

Code:

seite.stylesheet = fileadmin/templates/template-0.css

seite.10 = TEMPLATE
seite.10.template = FILE
seite.10.template.file = fileadmin/templates/template-0.html

seite.10.workOnSubpart = DOKUMENT

Achte darauf dass css Styled Content im Root Template eingefügt ist...

Den Marker für den Hauptcontent holst Du Dir über

Code:

seite.10.marks.MIDDLECONTENT < styles.content.get

Wie man Menüs einbindet ist ein kleiner Teil TS, ein wenig html und viel css

Dawn · Jul 14, 2007

Ein weiterer guter Ansatz ist Home: Yet Another Multicolumn Layout | An (X)HTML/CSS Framework

[Typo3] Template auf HTML-Basis erstellen

Keen

New Member

Huschi

Moderator

Keen

New Member

Obi-Wan

Guest

BlackPixel

New Member

Dawn

Registered User

We value your privacy