Сайт о путешествиях и туризмеСоздание шаблона
Опубликовано: 11.04.2018
Для начала необходима обычная XHTML страничка. Можно воспользоваться каким-нибудь сервисом для генератора HTML шаблонов. Или создать шаблон самостоятельно. Рассмотрим, в качестве примера, часто используемый шаблон с шапкой, футером и двумя колонками по бокам.
Разметка HTML будет выглядеть так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <meta name="title" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="/style.css" type="text/css" media="screen, projection" /> <!--[if lte IE 6]><link rel="stylesheet" href="/style_ie.css" type="text/css" media="screen, projection" /><![endif]--> </head> <body> <div id="wrapper"> <!-- #header--> <div id="header"> </div> <div id="middle"> <div id="container"> <div id="content"> </div><!-- #content--> </div><!-- #container--> <div class="sidebar" id="sideLeft"> </div><!-- .sidebar#sideLeft --> <div class="sidebar" id="sideRight"> </div><!-- .sidebar#sideRight --> </div><!-- #middle--> <div id="footer"> </div><!-- #footer --> </div><!-- #wrapper --> </body> </html>И файл стилей style. css , для данной разметки:
Создание шаблона на примере трудового договора
* { margin: 0; padding: 0; } body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; } a { color: blue; outline: none; text-decoration: underline; } a:hover { text-decoration: none; } /* Begin of styles for the demonstration (you can remove them) */ a.expand { width: 150px; display: block; margin: 10px 0 0; } a.expand:hover { height: 500px; } /* End of of styles for the demonstration */ p { margin: 0 0 18px } img { border: none; } input { vertical-align: middle; } #wrapper { width: 100%; min-width: 1000px; } /* Header ---------------------------------------*/ #header { height: 150px; background: #FFE680; } /* Middle ---------------------------------------*/ #middle { border-left: 250px solid #B5E3FF; border-right: 250px solid #FFACAA; height: 1%; position: relative; } #middle:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; } #container { width: 100%; float: left; overflow: hidden; margin-right: -100%; } #content { padding: 0 20px; } /* Sidebar Left ---------------------------------------*/ #sideLeft { float: left; width: 250px; position: relative; background: #B5E3FF; left: -250px; } /* Sidebar Right ---------------------------------------*/ #sideRight { float: right; margin-right: -250px; width: 250px; position: relative; background: #FFACAA; } /* Footer ---------------------------------------*/ #footer { height: 100px; background: #BFF08E; }
Обзор макета для Joomla
С точки зрения Joomla этот макет разбивается на области, где будет выводиться основное содержимое ( компонент ) и дополнительное ( модули ).
Создание шаблона проекта