We are using the more well-known method: developing HTML templates (HTML documents) with TypoScript configuration.
Starting work with this method, you need to create a new folder for the HTML template file, for the CSS (Cascading Style Sheets) file, and for images that will be used in the developing design. We recommend creating a new folder in: [your-typo3-installation]/fileadmin/templates/
You need to create a new folder in the fileadmin folder:
For our new online shop, we'll create one more folder (child folder) named berriesshop. If you are planning to create several templates or you feel that data arrangement and sorting will help with looking through the web page structure, you can split templates—for example, "berriesshop", "berriesshop-intranet", or "berriesshop-new-template".
As mentioned, you can set up templates in the same way as for statistical HTML web pages that you probably developed before starting to use the advantages of the content management systems.
Setting up the template, you need to include:
- Header section (will be removed and replaced with the TypoScript configuration): This section you can leave incomplete until you are creating an HTML template for the header settings local test.
- Main body content section (<
div> tags or table-based design).
For example, you can create a template with the following structure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document title</title> </head> <body> <div class="main-container"> <div class="header"> <div class="logo">###LOGO###</div> <div class="lang-switch">###LANGUAGES###</div> </div> <div class="menu">###MENU###</div> <div class="left-col">###LEFTCOL###</div> <div class="main-cont">###MAINCONT###</div> <div class="footer">###FOOTER###</div> </div> </body> </html>
There is a main<div> nest with child<div> and prepared markers for our TypoScript configuration:
"logo": This will be a marker for image.
"lang-switch": If you need translated content, this will be a marker for languages.
"menu": This will be a marker for a top menu. Also, you can add additional markers for side menus, among others.
"left-col": This will be a marker for left column content.
"main-cont": This will be a marker for main content (right column).
"footer": This will be a marker for some extra information that you would like to show to your website visitors. Extra information can be copyright information, date, owner, contacts, and so on.
Also, you can add any markers that you need. These markers can be extra titles, breadcrumbs-menu, date/time, and so on.
Upload the index.html (HTML template) file, CSS, and graphics to your web space, and change permissions on the file to 0555 to have read and write access if you're using a Unix system.