Prepare and purge the template
Preparatory work on the basic structure of the template and renaming of the files
After the zipped template from CSSLayoutGenerator.com (in this example layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1.zip) has been moved to the newly created directory "template01" on the PC and the zip file has been unpacked, the following files and directories are located there:
template01/
- layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1/
- - index.html
- - style.css
- layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1.zip
The two files "index.html" and "style.css" are moved to the "template01/" directory and the "layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1" directory is deleted.
The zipped file "layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1.zip" is no longer required and can be deleted or archived.
The "index.html" file is renamed to "template.htm" and the "style.css" file is renamed to "stylesheet.css".
The new directory structure with the associated files now looks like this:
template01/ (name of future template directory)
- template.htm (formerly index.html, structure and layout of the new template)
- stylesheet.css (formerly style.css, formatting for the new template)
( - layout_html5_liq_lcr_s2_800_m1020_l220_r200_fh80_1.zip)
Clean up the template (remove filler texts and unnecessary code)
For example, the "template.htm" file is now opened with Notepad++.
The line ...
<link href="style.css" rel="stylesheet">
adjust it so that the name of the renamed file "stylesheet.css" is there now:
<link href="stylesheet.css" rel="stylesheet">
All other lines between <head> and </head> can be deleted and the result should look like this:
<head>
<link href="stylesheet.css" rel="stylesheet">
</head>
Delete the long filler text in the "Header" area and only enter "Header" there for better clarity. The result should look like this:
<header class="header">
Header
</header><!-- .header-->
Delete the long filler text in the "Content" area and only enter "Content" there for better clarity. The result should look like this:
<div class="container">
<main class="content">
Content
</main><!-- .content -->
</div><!-- .container-->
Delete the long filler text in the "left-sidebar" area (left column) and only enter "Left Sidebar" there for better clarity. The result should look like this:
<aside class="left-sidebar">
Left Sidebar
</aside><!-- .left-sidebar -->
Delete the long filler text in the "right-sidebar" area (right column) and only enter "Right Sidebar" there for better clarity. The result should look like this:
<aside class="right-sidebar">
Right Sidebar
</aside><!-- .right-sidebar -->
Delete the long filler text in the "footer" area and only enter "Footer" there for better clarity. The result should look like this:
<footer class="footer">
Footer
</footer><!-- .footer -->
The "template.htm" file now contains the "really necessary content" with the basic structure of the header (header area), the three adjacent columns (menu, content, news) and the underlying footer area (footer), which is described in the following steps used as a template for use under CMSimple_XH.
Please save the "template.htm" file.
If the "template.htm" is now called with the web browser, it looks like this:
