====== Webdesign mit WebsiteBaker ======
{{:design.png?nolink&128 |Webdesign}} FIXME

Webdesign mit WebsiteBaker… Wer hier jetzt einen Grundlehrgang in HTML/CSS/Javascript erwartet oder ein Fortgeschrittenen-Seminar, der ist völlig auf dem Holzweg und hat eindeutig die falsche Seite geöffnet.\\
Wer seinen Kenntnissen in HTML/CSS/Javascript noch nicht so ganz vertraut, für den folgt hier eine Liste mit Links zu einigen sehr guten Seiten zu diesen Themen.

[[http://selfhtml.org/|{{:design:common:selfhtml.png?direct&200|das Web-Projekt SELFHTML (deutsch)}}]]  [[http://www.w3schools.com/|{{:design:common:w3schools.png?direct&200|THE WORLD'S LARGEST WEB DEVELOPER SITE (english only)}}]]

In diesem Bereich dieses Wiki geht es ausschließlich um das Zusammenspiel der Designkomponenten mit WebsiteBaker und seinen Möglichkeiten.
Es werden einige Grundregeln beschrieben, die dringendst beachtet werden sollten, damit der Aufbau des Designs über das gesamte System **WebsiteBaker** einschließlich seiner Addons weitgehend homogen {//gleichmäßig/gleichartig//} erfolgen kann. Auch finden sich hier Tips und Anleitungen zum Aufbau von eigenen Templates.

===== Menügeneratoren =====

[[design:sm2:manual|ShowMenu 2 - Manual]]

[[design:sm2:examples|ShowMenu 2 - Beispiele]]

===== Template-Engines =====

Schon seit vielen Jahren wird im sogenannten '//Backend//', dem heutigen **A**dmin**C**ontrol**P**anel die Formatierung und Ausgabe der Seiten mit Unterstützung der, doch rudimentären und sehr umständlich zu bedienenden Templateengine **phplib** vorgenommen. Erst seit WebsiteBaker-2.8.4 steht hier die mächtige Templateengine **[[http://twig.sensiolabs.org/|TWIG]]** zur Verfügung, die auch bereits bei einzelnen Komponenten im Einsatz ist. Ab der Nachfolgeversion von WebsiteBaker-2.8.4 wird durch den konsequenten Einsatz von **TWIG** für das ACP erstmals eine vollständige Trennung von PHP-Code und Darstellung (//HTML//) möglich sein.\\
In diesem Bereich des WIKI werden nun die Details zum Einsatz von Twig beschrieben und erklärt, soweit sie für die Web-Designer relevant sind. Auch ist hier im deutschen Teil des Wiki eine Übersetzung der wichtigsten Teile von **[[http://twig.sensiolabs.org/doc/templates.html|Twig for Template Designers]]** auf deutsch verfügbar.

[[design:twig:design-manual|TWIG für Template-Designer(de)]]

===== Hilfreiche Codeschnipsel =====
[[design:snippets|Hilfreiche Codeschnipsel ]]