Тэги делятся на строчные и блочные. Мы это уже знаем. Блочные тэги выводятся браузером с новой строки, например 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, но и в верстке, и в программировании. Именно по этой причине уроки будут детально расписаны и будет куча объяснялок.

Итак, поехали!

На вики я добавляю основную информацию о Default-шаблоне. Надеюсь, кому-нибудь это пригодится. Вместе с тем, я понимаю, что нужен какой-то «глобальный» обучающий пример-урок, где я расскажу о создании шаблона с нуля. Должны быть все подробности и освещены нюансы. Примерно как я это делал с Twenty Ten. Отсюда пара предложений.

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

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

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

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