Настала пора сделать что-то более практичное. Основную теорию мы уже рассмотрели, на её основе попробуем сделать какой-нибудь простенький шаблончик. В предыдущих уроках мы уже обсудили структуру каталогов, но чтобы у нас не было разночтений, я предлагаю скачать мой вариант: les02-00 ¹⁴². Это что-то вроде «рыбы», которую вы можете взять за основу.

В шаблон я включил свой вариант helpers.less, поэтому делать верстку буду с его помощью. Некоторые миксы могут отличаться от default-шаблона.

Подключение LESS мы уже разобрали, поэтому кратко пройдемся по основным файлам.

• Главный файл var_style.less. В нём мы только выполняем подключение других файлов.
• Переменные («глобальные») хранятся в variables.less.
• Хелперы в каталоге mixins. Пока у нас там только helpers.less.
• Основные базовые настройки размещаем в base.less.
• Основная разметка в layouts/layout01.less. Сейчас там пустая «рыба» под «типовой» шаблон MaxSite CMS.
• Все меню подключаем в menu.less. Стили меню будут находиться в раздельных файлах каталога menus. Их может быть много. В menu.less и будем указывать какие именно файлы.
• Адаптивный дизайн определяется в responsive.less. У него такая же схема подключения как и меню.

Почти все файлы пустые и не содержат рабочих стилей. Это означает, что на выходе мы должны получить пустой var_style.css.

Читать дальше »

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

<div class="red">красный текст</div>
<div class="yellow">желтый цвет</div>

потому что в css-фреймворке уже определено, что

div.red {color: red;}
div.yellow {color: yellow;}

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

Читать дальше »

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

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

Причем, особо отмечу, этот шаблон должен быть 146 100% рабочим. В некоторых случаях вообще можно начинать работу над новым шаблоном в рамках базового. Чуть позже я покажу как это сделать.

Читать дальше »

После достаточно долгого перерыва, решил продолжить публикацию серии уроков по созданию шаблонов. За эти месяцы я немного переосмыслил некоторые моменты и, с текущей позиции считаю, что последние 12 и 13 уроки не совсем верные в стратегическом плане. (Я не стал их убирать, поскольку информация в них всё-таки полезная.)

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

Еще важный момент. Я всегда ориентируюсь на последнюю версию MaxSite CMS, которая отмечается как prelatest. Это самая последняя и свежая версия системы.

Впрочем, вернёмся к нашим баранам шаблонам.

Читать дальше »

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

Второй компонент у нас занимает всю ширину браузера, поэтому его структура по сути повторит структуру первого компонента.

Читать дальше »

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

Итак, у нас есть компоненты-заглушки и готовая модульная сетка сайта. Согласно чеклисту самое время задать основные стили оформления текстов и фона браузера (п.10). Но мы этот шаг пропустим потому что мы создаем шаблон по технологии Default и у нас уже определены все стандартные стили (defaul/css/style-all.css).

Сейчас же мы выставим лишь основные стили.

Читать дальше »