Шаблоны для новичков. Урок 8. Создание своего шаблона. Настройка дизайна

До сегодняшнего урока, все эксперименты мы проводили в редакторе MaxSite CMS. Настала пора попробовать сделать свой шаблон.

В MaxSite CMS существует только одно требование к шаблону: обязательное наличие файла index.php. Всё остальное отдаётся на откуп вебмастера. Но, традиционно сложилось так, что шаблоны MaxSite CMS используют часть функционала из default-шаблона. Прежде всего это касается использования т.н. type-файлов (файлы типов данных). То есть в своем шаблоне нет необходимости использовать эти файлы - система автоматически их подключит из default.

Главное отличие default-шаблона от других разработок, это то, что львинную долю программирования, настройку функционала и базового оформления, default-шаблон берет на себя. То есть вебмастеру предлагается уже готовый и полнофункциональный каркас для своих разработок.

Каркас для новых шаблонов

Default-шаблон может являться каркасом для любого нового шаблона.

Первым делом сделаем новый каталог для своего шаблона. Пусть это будет «mytemplate». Скопируем в него содержимое «default». Все дальнейшие работы будем делать в «mytemplate».

Начальные данные шаблона

Откроем info.php и укажем данные шаблона. Файл является информационным, поэтому нет разницы, что именно вы в нем указываете.

Переходим в админ-панель в Основные настройки на вкладку Шаблон сайта. Активируем свой шаблон.

Теперь, при переходе на сайт, будет виден наш новый шаблон.

Компоненты шаблона

Модульная сетка сайта предполагает, что её основные блоки будут иметь различное функциональное наполнение. Например блок ШАПКА может состоять из логотипа сайта, его названия, различных иконок, а ниже горизонтального меню.

На другом сайте ШАПКА может содержать эти же элементы, только в другой последовательности. На третьем - только меню и название сайта.

Вот всех этих случаях модульная сетка единая, меняются только наполняющие компоненты конкретного блока. Причем нетрудно заметить, что, скажем, меню не меняется от сайта к сайту по функционалу, меняется лишь его оформление.

Таким образом, компоненты шаблона - это готовые функциональные блоки, которые используются от шаблона к шаблону с минимальными изменениями.

Компоненты находятся в каталоге шаблона components. В комплекте MaxSite CMS вы найдете следующие компоненты:

• меню (menu.php)
• лого+иконки (logo-links.php)
• слайдер изображений (image-slider.php)
• случайная картинка (image-rand.php)
• одиночная картинка (image-select.php)
• текст + картинка (text-and-image.php)
• копирайты сайта в подвале (footer-copyright.php)
• статистика (инфострочка) в подвале (footer-statistic.php)

Считается, что компоненты предназначены только для двух блоков: шапки и подвала сайта. Выбор компонентов осуществляется в Настройке шаблона в произвольном порядке. В шапке и подвале предусмотрено размещение до пяти компонентов в каждом.

В каталоге «_create_a_new_template» присутствуют только компоненты: logo-links.php, menu.php, footer-copyright.php и footer-statistic.php. Если для шаблона нужны другие компоненты, то их следует скопировать из default/components. Обратите внимание, что некоторые компоненты используют дополнительные файлы в каталогах components/css и components/options.

Полностью изучать компоненты мы будем чуть позже, пока только усвоим, что блоки ШАПКА и ПОДВАЛ настраиваются с помощью компонентов.

CSS-стили шаблона

Обратите внимание, что мы еще не написали ни единой строчки кода или css-стилей, но наш шаблон отображается корректно. Это происходит потому что наш шаблон заимствует из default два стилевых файла:

• style-all-mini.css - основные стили
• var_style.css - дополнительные стили

Файл style-all-mini.css представляет собой css-фреймворк, в котором уже заложены все основные стили, которые как правило используются от шаблона к шаблону с минимальными изменениями. Этот файл не требуется изменять или копировать в свой шаблон. Он подключается автоматически и сразу готов к использованию. Например все css-хелперы находятся именно в этом файле. Здесь же находятся стили от плагинов MaxSite CMS, а также вывод type-файлов.

Файл var_style.css, наоборот содержит стили, которые как правило требуют изменений. Например здесь находится описание структуры, цвета ссылок и т.п.

Существует еще третий файл add_style.css, который предназначен для шаблонов, которые полностью используют стили default-шаблона. Например, если требуется изменить буквально несколько элементов, без переделки структуры, то есть смысл использовать именно add_style.css.

Какой css-файл будет основным?

Схема подключения css-стилей очень простая:

• style-all-mini.css всегда подключается из default-шаблона. Его не нужно копировать.
• Если предполагается изменение структуры модульной сетки, то используем файл var_style.css, который необходимо скопировать из default-шаблона. Файл add_style.css можно не использовать (удалить).
• Если структура шаблона не меняется, а будут только какие-то мелкие правки, то используется add_style.css своего шаблона. Файл var_style.css будет автоматически использован из default-шаблона.

Кроме того, доступен и более сложный вариант - одновременное использование в своем шаблоне var_style.css и add_style.css.

Обратите внимание, что технология default-шаблона такова, что верстальщику нет надобности где-то указывать подключения файлов: если необходимо использовать файл, то он просто размещается в шаблоне - подключение и формирование корректного кода полностью ложится на плечи MaxSite CMS.

Профили оформления

Профили представляют собой обычные css-файлы, которые располагаются в каталоге css/profiles своего шаблона. В css-файле определяются какие-то небольшие стили для смены или уточнения дизайна. Например профиль font-verdana.css делает шрифт Verdana основным на сайте. А профиль paragraph-justify.css задает основной текст выровненным по формату.

Существуют и более сложные профили theme-... .css, которые серьезно меняют дизайн шаблона.

Профили выборочно подключаются в Настройке шаблона. Особенно они удобны в случаях шаблонов, когда необходимо «поиграться» какими-то элементами или клиент еще не определился с выбором конечного варианта.

Файлы для работы с шаблоном

Если шаблон будет по функциональности повторять default, то все изменения будут происходить только в var_style.css (или add_style.css).

Технология default-шаблона очень гибкая. Существует возможность изменить практически каждый элемент, причем как через замену, так и через расширение default-возможностей. Всё это мы рассмотрим на будущих уроках.

HTML-структура шаблона

Заметьте, что до сегодняшнего дня, я ни разу не упоминал о структуре HTML-документа. Если вы пытались изучать HTML, то наверняка знаете, что любой HTML состоит из секций HEAD и BODY. В большинстве CMS секция HEAD формируется вебмастером вручную. В MaxSite CMS в default-шаблоне (следовательно и у нас) секция формируется автоматически. Это гарантирует полностью корректный html-код, где реализуется довольно сложный програмный код по подключению стилей, скриптов, файлов, опций и т.п. Раньше вебмастерам часто приходилось обновлять файлы HEAD из default-шаблона. Теперь можно об этом не заботиться.

Поэтому вся HTML-структура шаблона находится в файле main.php. Это программный PHP-код с HTML-вставками. PHP-код нас (пока) не интересует, а вот разобраться с HTML-тэгами не составит труда. С небольшими упрощениями, я привожу полный HTML-код:

секция HEAD

<body>
<div class="all">
	<div class="all-wrap">
		<div class="section header-main">
 		
			<div class="header">
				<div class="header-wrap">
				КОМПОНЕНТЫ ШАПКИ
				</div>
			</div>
 
			<div class="section article main">
				<div class="main-wrap">
 				
					<div class="content">
						<div class="content-wrap">
							КОНТЕНТ
						</div>
					</div>
 					
					<div class="aside sidebar sidebar1">
						<div class="sidebar1-wrap">
							САЙДБАР
						</div>
					</div>
 					
					<div class="clearfix"></div>
 					
				</div><!-- div class="main-wrap" -->
			</div><!-- div class="section article main" -->
			
		</div><!-- div class="section header-main" -->
 
		<div class="footer-do-separation"></div>
 
		<div class="footer">
			<div class="footer-wrap">
				КОМПОНЕНТЫ ПОДВАЛА
			</div><!-- div class="footer-wrap" -->
		</div><!-- div class="footer" -->
		
	</div><!-- div class="all-wrap" -->
</div><!-- div class="all" -->
 
</body>
</html>

Данная структура очень сильно напоминает все те примеры, что мы рассматривали на предыдущих уроках. Указанные css-классы являются предопределенными для MaxSite CMS (точнее для default-шаблона), что гарантирует полную совместимость между разными компонентами, профилями и прочими css-стилями.

Менять main.php не нужно!

Это важно! Многие вебмастера делают ошибку, начиная править этот файл. Вместе с тем, совершенно однозначно можно сказать, что данной структуры с головой хватит для 99% существующих сайтов. Обратите внимание на три момента:

• Шапка и подвал определяется компонентами. Компоненты находятся в отдельных каталогах и файлах. Поэтому все изменения производятся именно там.
• Формирование контента осуществляется в type-файле. Как правило это предопределенные стили, классы и в main.php происходит только вывод уже подготовленного html-кода. Изменения в выводе осуществляются на уровне настроек или type-файлов (или type_foreach-файлов).
• Вывод сайдбара осуществляется отдельной функцией и формируется полностью автоматом.

Таким образом, нет никаких причин для изменения main.php. За счет wrap и родительских блоков у вебмастера есть возможность произвольно менять дизайн сайта с помощью css-стилей.

Рассмотрим несколько практических примеров.

Меняем сайдбар

Давайте для примера поменяем в нашем шаблоне контент и сайдбар местами. Поскольку мы меняем структуру сайта, то есть смысл воспользоваться var_style.css. Скопируем его из default-шаблона. Файл add_style.css можно удалить.

Откроем этот файл и найдем строчки отвечающие за вывод контента и сайдбара:

div.main {width: 960px; margin: 0 auto; background: white;}
 
div.content {width: 710px; margin: 0 250px 0 0; float: left;}
div.content-wrap {margin: 20px 30px 10px 20px;}
 
div.sidebar {width: 250px; float: right; margin: 20px 0 0 -250px;}
div.sidebar1-wrap {margin-right: 10px;}

Блок div.main является родителем для div.content и div.sidebar. Теперь самое время освежить знания предыдущих уроков. Для смены положения воспользуемся простыми float:left и float:right.

div.content {width: 710px; float: right;}
div.sidebar {width: 250px; float: left;}

Сайдбар и контент поменялись местами. Правда сайдбар «прилип» к краю контейнера. Это не удивительно, ведь мы не указали отступы для его wrap-блока. Исправляем и получается такой код:

div.content {width: 710px; float: right;}
div.content-wrap {margin: 20px 20px 10px 30px;}
 
div.sidebar {width: 250px; float: left;}
div.sidebar1-wrap {margin: 20px 0 0 20px;}

Сменим фон браузера

Немного поменяем цвет фона браузера. За это отвечает тэг BODY.

body {background: #F1F1F1;}

Уберём тень контейнера и увеличим поля

Тень задается у div.all-wrap с помощью свойства box-shadow. Некоторые браузеры его поддерживают на экспериментальном уровне, поэтому оно присутствует с несколькими префиксами. Также добавим чуть больше поля от каждого края.

div.all-wrap {width: 960px; margin: 0 auto; background: white; padding: 20px;}

Сделаем меню черным фоном

В файле есть подсказки по меню. В нашем случае требуется поменять только общий фон. Он задан в div.MainMenu. Также поменяем цвет выделенного пункта и пункта при наведении (это один стиль). В результате получаем:

/* МЕНЮ ВЫПАДАЮЩЕЕ */
div.MainMenu {font-size: 10pt; padding-left: 10px; background: black;}
 
/* верхние пункты меню */
ul.menu li a {margin-right: 8px; color: white;}
ul.menu li a:hover {background: gray; color: white;}
ul.menu li.selected a {background: gray;}

Картинку в шапку

Скопируем из default-шаблона компонент image-rand.php. Выстроим блоки следующим образом:

В каталог шаблона images/headers скопируйте несколько картинок из default-шаблона. Или загрузите свои.

После этого можно переключиться на сайт.

Добавим рамку к картинке шапки

Компонент image-rand.php выводит изображение в виде тэга IMG внутри блока div.component_header_image. Рамку укажем для IMG, но чтобы изображение не вылезло за пределы блока (мы помним про блочную модель!), уменьшим width на ширину границы.

div.component_header_image img {border: 3px solid black; border-bottom: none; width: 954px;}

Кроме того мы убираем нижнюю границу с помощью «border-bottom: none».

Изменим подвал

Уберем фон и добавим верхнюю границу.

div.footer {font-size: 0.9em; margin-top: 15px;}
div.footer-wrap {border-top: 3px solid black; padding-top: 15px;}

Добавим верхний и нижний отступ от браузера

У нашего div.all-wrap сейчас задано margin: 0 auto - это центрирование по горизонтали и нулевые отступы сверху и снизу. Сделаем их по 20px:

div.all-wrap {width: 960px; margin: 20px auto; background: white; padding: 20px;}

Поменяем цвет ссылок

Тут в общем-то проще некуда:

/* ССЫЛКИ */
a {color: #0066CC; text-decoration: underline;}
a:hover {color: red;}

Код a:hover - это стиль ссылки при наведении.

Поменяем основной шрифт

Пусть это будет Georgia размером 12pt. Поскольку это основной шрифт, то задаем его для BODY.

body {background: #F1F1F1; font-family: Georgia, serif; font-size: 12pt;}

Поправим поле сайдбара

Мне не нравится левое поле сайдбара.

Раньше мы его специально сделали, но теперь оно явно лишнее. Исправляем:

div.sidebar1-wrap {margin: 20px 0 0 0;}

Заголовки записей

И последний штрих - изменим заголовок записей. Пусть это будет шрифт Arial. Заголовки записей - это H1.

h1 {color: #101010; font-family: Arial, sans-serif;}

Итого

Теперь сравните полученный результат с шаблоном «Twenty Ten», который я раньше портировал на MaxSite CMS. Стопроцентного совпадения, конечно же нет, да и задачи такой не стояло, просто сравните трудозатраты предыдущего варианта и этого.

Поскольку все изменения у нас произошли в файле var_style.css, то я не буду выкладывать полностью шаблон, а ограничусь только этим файлом ⁸⁴⁵.

««« Урок 9 | Урок 7 »»»