Es besteht die Möglichkeit mittels Typoscript das entsprechende Seitenlayout umzusetzen. Dies wäre jedoch sehr aufwendig und wäre mit einem hohen Lernaufwand verbunden. Die eleganteste und einfachste Lösung besteht darin, das HTML-Design weitgehend mittels Designvorlagen umzusetzen und die Marker für Inhalte und Menüs einzufügen. Die Stärken von Typo3 liegen in der Erzeugung von Menüs und in der Bildverarbeitung, nicht in dem Erstellen von ansprechenden Webdesigns. Um nun Designvorlagen in Templates einzubinden, ist folgender Typoscript-Code notwendig:

page = PAGE
page.typeNum = 0
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/index.html

• Es wird ein Seitenobjekt erzeugt und die typeNum-Eigenschaft gesetzt.
• An der Position 10 wird ein TEMPLATE-Objekt für dieDesignvorlage erzeugt.
• Der Wert des TEMLATE-Objekt wird mit einem FILE-Objekt belegt.
• Dem FILE-Objekt wird der Pfad zur Designvorlage zugewiesen.

Dem Template wurde durch diese Typoscript-Befehle eine Designvorlage zugewiesen. Besitzt die HTML-Designvorlage Header und Body-Tags, so sind bei der Darstellung durch einen Browser diese Tags doppelt vorhanden. Typo3 erzeugt wie in Designvorlagen bereits erwähnt die Header- und Body-Tags selbst. Nun könnte man diese Tags in der Designvorlage entfernen. Wenn diese jedoch in einem HTML-Editor bearbeitet werden soll, kann der Editor eventuell damit Probleme haben. Subparts leisten hier Abhilfe, wenn sie innerhalb des Body-Tags eingefügt werden. Mit Typoscript kann man erreichen, dass die Designvorlage auf den Bereich innerhalb der Subparts eingeschränkt wird, ohne dabei den HTML-Code zu verstümmeln.

page = PAGE
page.typeNum = 0
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/index.html
page.10.workOnSubpart = DOKUMENT

Die letzte Zeile bewirkt, dass nur der Bereich in der Designvorlage verwendet wird, der sich innerhalb des Subparts DOKUMENT befindet.
Es gibt nun auch die Möglichkeit sich Schreibarbeit zu sparen. Objekteigenschaften in Typoscript können, falls auf derselben Ebene, zusammengefasst werden. Dies wird wie im folgenden Beispiel gezeigt, mit geschwungenen Klammern erreicht.

page = PAGE
page.typeNum = 0
page.10 = TEMPLATE
page.10 {
  template = FILE
  template.file = fileadmin/index.html
  workOnSubpart = DOKUMENT
}

Um nun auf die Marker in der Designvorlage zugreifen zu können, gibt es in Typoscript folgende Möglichkeit.

page = PAGE
page.typeNum = 0
page.10 = TEMPLATE
page.10 {
 template = FILE
 template.file = fileadmin/index.html
 workOnSubpart = DOKUMENT
 marks.INHALT = TEXT
 marks.INHALT.value = Dies ist ein Text.
}

Mit der Eigenschaft marks des TEMPLATE-Objekts können die Marker in der Designvorlage angesprochen werden. Während die Großschreibung der Objekte PAGE, TEMPLATE und FILE verpflichtend ist, hat sich die Großschreibung der Marker lediglich eingebürgert und muss nicht beibehalten werden.