MaxSite CMS
Подписаться на эту рубрику по RSS
30 января 2012 г.
До сегодняшнего урока, все эксперименты мы проводили в редакторе MaxSite CMS. Настала пора попробовать сделать свой шаблон.
В MaxSite CMS существует только одно требование к шаблону: обязательное наличие файла index.php. Всё остальное отдаётся на откуп вебмастера. Но, традиционно сложилось так, что шаблоны MaxSite CMS используют часть функционала из default-шаблона. Прежде всего это касается использования т.н. type-файлов (файлы типов данных). То есть в своем шаблоне нет необходимости использовать эти файлы - система автоматически их подключит из default.
Главное отличие default-шаблона от других разработок, это то, что львинную долю программирования, настройку функционала и базового оформления, default-шаблон берет на себя. То есть вебмастеру предлагается уже готовый и полнофункциональный каркас для своих разработок.
Пока мы не приступили к практике создания шаблона MaxSite CMS, следует уточнить еще несколько важных моментов вёрстки. Одной из проблем, с которой сталкивается практически каждый верстальщик - это оформление блока контента и сайдбара. Такие элементарные действия, как задание отступа или фона, могут оказаться не такими уж и тривиальными, как может показаться изначально.
Рассмотрим вариант верстки блоков, при котором нивелируются «странности» блочной модели.
В целом у нас уже есть все теоретические знания, чтобы приступить к созданию шаблона. Первым этапом должна стать подготовка модульной сетки. Делается это на основе дизайна будущего сайта. Очень часто новичкам советуют изучать код готовых шаблонов и учиться по ним. Я, на основе своей многолетней практики, могу со всей ответственностью заявить, что это крайне порочный совет. Можно иногда подсмотреть html-код дизайна, но только в том разрезе, чтобы уточнить точные размеры каких-то элементов, и не «лазить» по экрану с рулеткой.
Самый лучший код - это код, написанный собственноручно. Во первых - это единственный способ чему-то научиться. Во-вторых вы не будете слепо копировать то количество «быдлокода», которое часто кочует от шаблона к шаблону.
Для простоты попробуем сделать макет моего сайта в виде блоков. Такой пример я уже приводил в прошлом уроке. Сейчас рассмотрим как это делается со всеми деталями.
При всех своих особенностях, блочная модель HTML имеет одно неоспоримое преимущество: она отлично подходит для вывода текста. В процессе создания HTML мало кто задумывался, что настанет день, когда язык будет использован для таких сложных макетов, которые сейчас встречаются почти на каждом сайте. Предполагалось, что текст, ссылки и картинки - основа на века. 
На сегодняшний день львиная доля работы верстальщика занимает именно верстка блоков. С текстами как-то попроще получается, а вот блоки нужно расставить и оформить согласно дизайна. Сделать это только отступами и размерами будет затруднительно. Нужно научиться позиционировать блоки.
Тэги делятся на строчные и блочные. Мы это уже знаем. Блочные тэги выводятся браузером с новой строки, например P, DIV, H1-H6.
Если мы задаём стиль текста для блока, то этот стиль будет применен ко вложенному тексту. Но есть некоторые css-свойства, которые, как правило, применяют только к блокам. Например отступы (внешние), поля (внутренний отступ), фон, граница (бордюр) и т.п.
Прежде, чем мы приступим к рассмотрению блочных свойств, необходимо разобраться с т.н. блочной моделью. Тут нюанс в том, что эта модель построена нелогично для нашего повседневного восприятия. Поэтому для верстальщика необходимо просто её изучить и использовать как данность. Многие вебмастера спотыкаются именно на этом вопросе.
К этому уроку мы уже имеем представление что такое HTML-тэги и CSS-стили. Современная верстка сайтов по сути сводится к шаманству с CSS: для сайта задаётся несложная HTML-структура, прописываются для блоков классы и после в css-файлах определяют их стили: положения, размеры, цвета и т.п.
Причем есть одна интересная особенность: стили можно применить практически к любым тэгам. Скажем текст можно оформить в DIV, P или H1. Если указать одинаковые css-стили, то браузер их и отобразит однинаково. Возникает резонный вопрос: если стилями мы можем добиться произвольного оформления, то зачем тогда такое разнообразие тэгов?
Ответ кроется в семантике (смысловом значении) документа. Если бы дело ограничивалось только визуальным отображением в браузере, то, действительно, можно было бы обойтись буквально десятком тэгов. Но, для того, чтобы сайт могли найти в Интернете, пользуются поисковиками. А поисковики должны уметь разбирать HTML-код страниц с тем, чтобы вычленить из него полезный текст и отсеять служебную информацию.
Вот для таких случаев, как раз и применяется семантическая верстка: HTML-тэги указывают на смысловое значение каждого участка кода.
Все сайты держатся как минимум на двух китах: HTML и CSS. Основы HTML мы уже рассмотрели, теперь очередь за CSS. Что это за «зверь» и с чем его едят?
Вы знаете, что для HTML-тэгов существуют различные атрибуты, с помощью которых можно управлять отображением в браузере. На заре Интернета этого было достаточно, но со временем стало понятно, что HTML-код становился слишком сложным и запутанным из-за обилия атрибутов. Если бы дело было только в оформлении текстов, то всё было бы не так страшно. Однако сайты становились более сложными по дизайну и это требовало очень сложного HTML-кода.
Тогда и придумали использовать HTML только для описания структуры, а как именно оформлять - вынести в отдельный блок - CSS.
Так уж получается, что шаблонов для MaxSite CMS мало. Поэтому, любой, кто решит завести себе сайт, неизбежно столкнется с проблемой создания нового или изменения существующего шаблона. Мои статьи в основном были обращены на верстальщиков и программистов, которым не нужно объяснять элементарные вещи вебмастеринга.
Благодаря небольшому обсуждению (особенно Владимиру Точилину с его дельными советами), я понял (или мне разжевали ) что нет смысла больше зазывать (приглашать, просить) спецов, а есть смысл просто научить тех, кто хочет учиться; кто принимает MaxSite CMS и готов на её базе научиться делать шаблоны.
В любом случае новый курс расчитан на полных чайников новичков не только в MaxSite CMS, но и в верстке, и в программировании. Именно по этой причине уроки будут детально расписаны и будет куча объяснялок.
С приходом зимы можно немного подредактировать дизайн своего блога под это время года. Тем более, что трудозатраты мизерные, зато результат порадует и вас, и ваших посетителей.
Для работы нам понадобится прежде всего хороший онлайн-сервис подбора зимней текстуры, поиск по гугл-картинкам, а также какой-нибудь графический редактор чтобы оптимизировать изображения для сайта.
За три года существования MaxSite CMS накопилось довольно много материала, рассчитанных на разные категории пользователей. На этом сайте я больше ориентируюсь на подготовленных пользователей, имеющих какое-то представление о вебмастеринге. Другие авторы рассказывают более простые вещи, рассчитанные на полных «чайников».
Если вы решили научиться работать с MaxSite CMS, то ниже приведены советы и ссылки, которые вам могут пригодиться. Для удобства я разбил советы по категориям «подготовленности» пользователей.
Часто в т.н. премиум-темах (Premium Themes) используется дополнительный вывод на главной странице нескольких колонок записей. В MaxSite CMS главная страница может выводиться несколькими способами, просто отмечая и указывая соответствующие опции в админ-панели.
Вывод колонками - задача довольно простая, но требующая небольшого программирования. В рамках Default-шаблона задача решается буквально за 10 минут. Рассмотрим этот вопрос подробно.
Рассмотрим несложный пример создания компонента для шаблона Default (или основанного на нём). Вся теоретическая часть нами уже рассмотрена, поэтому я буду показывать конкретные шаги реализации.
Иногда на сайтах в шапке бывает расположен блок в котором слева/справа выводится какой-то текст, а с противоположной стороны - картинка/лого. Вот примерно так:
В основной практике возможностей работы с CSS-стилями и подключаемыми компонентами, как правило хватает для создания сайта. Вместе с тем, описание Default будет неполным без рассказа о еще одном механизме, с помощью которого можно настроить свой шаблон прозвольным образом.
Прежде всего следует упомянуть о том, что существуют т.н. custom-файлы, которые могут подключаться в разных частях шаблона или расширять уже существующую функциональность. Ну и кроме того, для блогера будет доступно управление блоками с помощью плагина ушек: в шаблоне они также предусмотрительно прописаны.
Компоненты представляют собой обычные php-файлы, в которых заключен вывод какого-то одного функционального блока. Стандартно в комплект Default-шаблона входят:
- Шапка (лого, название сайта, описание и иконки)
- Выпадающее меню
- Слайдер изображений
- Статичное изображение для шапки
- Указанное изображение для шапки
- Строчка с копирайтами сайта
- Строчка со статистикой потребления ресурсов
Поскольку компоненты являются отдельными блоками, то они могут быть размещены в произвольном порядке на сайте. Например нет никаких проблем указать размещение строчки статистики в шапке сайта, а меню или слайдер в подвале. Технически все компоненты равнозначны.
В Default-шаблоне с CSS-стилями можно работать сразу несколькими способами. Для каких-то мелких правок вообще нет надобности менять основные css-файлы - все операции доступны из админ-панели. Это очень удобно, поскольку всегда можно подобрать нужный параметр, например цвет шрифта, фона и т.п.
Для измнения элементов дизайна следует использовать переопределение стилей существующих css-классов. В MaxSite CMS практически все создаваемые блоки вывода сопровождаются уникальными классами и этот факт здорово облегчает жизнь вебмастеру: не нужно думать о html-верстке, достаточно указать свой вариант стилей.
