Помочь проекту Отзывы Обратная связь Заказать шаблон/сайт Супер-шаблон MF
Войти / Регистрация
Закрыть

или зарегистрироваться

MaxSite CMS

  • Возможности
  • Основы
  • Документация
  • Скачать

Создание шаблонов (версии 0.8x)

Шаблоны для новичков. Урок 17. Базовый шаблон MaxSite CMS. Адаптивный дизайн

26 октября 2012 г.5152MaxSite CMS, Создание шаблонов (версии 0.8x)

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

В шаблон я включил свой вариант 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.

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

Шаблоны для новичков. Урок 16. Основы вёрстки с помощью LESS

25 октября 2012 г.5562MaxSite CMS, Создание шаблонов (версии 0.8x)

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

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

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

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

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

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

Шаблоны для новичков. Урок 15. Организация файлов и каталогов

22 октября 2012 г.5592MaxSite CMS, Создание шаблонов (версии 0.8x)

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

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

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

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

Шаблоны для новичков. Урок 14. Поблочная вёрстка

19 октября 2012 г.5897MaxSite CMS, Создание шаблонов (версии 0.8x)

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

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

Мы предполагаем, что вы уже можете разбираться в основах HTML, PHP, CSS и LESS. Всё это было в прошлых уроках или отдельных статьях на моём сайте.

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

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

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

Шаблоны для новичков. Урок 13. Лого и меню с поиском

16 марта 2012 г.6427MaxSite CMS, Создание шаблонов (версии 0.8x)

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

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

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

Шаблоны для новичков. Урок 12. Верхнее меню и иконки

11 марта 2012 г.5432MaxSite CMS, Создание шаблонов (версии 0.8x)

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

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

Естественно, будь у нас уже готовый дизайн, можно было бы сразу задавать стили.

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

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

1 2 3 4 5 6
Рубрики
  • Видео 1
  • MaxSite CMS 218
    • Версии (релизы) 92
    • Статьи и подсказки 14
    • Шаблоны (всё что касается шаблонов) 14
    • Создание шаблонов (версии 0.8x) 31
    • Создание шаблонов 9
    • Плагины 5
    • Общие вопросы 52
  • Новости проекта 30
  • CodeIgniter 6
  • Старый архив 42
Последние записи
  • MaxSite CMS 102
  • MaxSite CMS 101
  • Установка и начальная настройка MaxSite CMS (видео)
  • Landing Page на MaxSite CMS
  • Нужно ли возрождать форум поддержки?
  • MaxSite CMS 100
  • MaxSite CMS 10 лет!
  • MaxSite CMS 99
  • Подвал
  • Встраиваемые компоненты
Ссылки
  • Обсуждения на GitHub'е
    Примите участие в развитии системы. Здесь же можно задать свой вопрос
  • ЧАВО по MaxSite CMS для новичков
    Наиболее частые вопросы
Поиск по сайту

О проекте

MaxSite CMS предназначена для создания сайтов любой сложности. Система отлично подходит обычным пользователям, вебмастерам, фрилансерам и вебстудиям.

Другие проекты
  • Сайт автора — MaxSite.org
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные HTML-курсы
  • Лучший кэш для WP
Соцсети
  • Twitter
  • Github
  • YouTube
© MaxSite CMS, 2008-2019 | Время: 0.2564 | SQL: 7 | Память: 7.4MB | Вход