Иногда нужно сделать несколько шаблонов с небольшой разницей. Скажем разные css-стили, изображения и прочие мелочи. Всё остальное: html-структура, настройки, функционал - идентичен.

Часто такие заказы встречаются, когда нужно создать сетку сайтов.

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

Далее...

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

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

Далее...

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

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

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

Далее...

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

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

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

Далее...

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

• «Что вижу, то и пою». Верстка происходит без каких-либо идеологических принципов. Главное добиться правильного отображения элементов. Используются style, html-код произвольный, без учета семантики, все блоки в html-коде связаны друг с другом. В такой вёрстке разберется только создатель шаблона. Данный вариант преобладал несколько лет назад.
• Использование grid-фреймворка. CSS-фреймворк содержит уже готовые классы, поэтому html-код создается уже с учетом рекомендованных правил. И хотя верстка строится уже с учетом модульной сетки (что уже хорошо), но мало приспособлена к особенностям CMS и несемантична по сути.
• Современный подход базируется на том, что каждый блок сайта имеет некое функциональное наполнение, но при этом модульная сетка простая и может быть полностью произвольной. Верстка осуществляется аля-строками, которые могут содержать ячейки (блоки).

Далее...

Когда я придумывал схему комментирования, то столкнулся с некоторым непониманием и даже неприятием этого варианта. В основном аргументы сводились к тому, что это не привычно по сравнению с WordPress.

Действительно, форма комментатора WordPress несколько проще и состоит из произвольного имени, обязательного (как правило) email и необязательного поля «сайт».

В MaxSite CMS более сложная форма, подразумевающая либо отсутствие регистрации (анонимно, указывается произвольное имя), либо регистрация по обязательным email и паролю (остальное произвольно).

Зачем же такое усложнение? А все дело в том, что схема комментирования WordPress ущербна по функционалности, а также не защищена от мошеничества спамеров.

Далее...

LESS расширяет возможности создания обычного CSS, по сути превращая его в динамический язык стилевой разметки.

Один простой пример: где-то в css-файле прописаны три основных цвета. Причем во множестве css-свойств. Если нужно сменить цвет, то придется их все найти и вручную поменять. В LESS для этой цели просто задаются переменные, которым присваиваются нужные значения. В css-коде вместо цвета указываем только переменные. Сменили значения переменных - автоматом поменялись цвета и в результирующем css-коде.

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

Далее...

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

Для наших задач вполне хватит самых базовых основ. Главное научиться разбираться в синтаксисе PHP и где и как искать подсказки по нужным функциям.

Далее...

До сегодняшнего урока, все эксперименты мы проводили в редакторе 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.

Далее...