WebDesign.Doc - электронная библиотека веб-мастера: Мастерская. Выпуск 220
WEbDESiGN.doc // №220
Приветствую, дорогие друзья и коллеги!
На связи Путченков Дмитрий, ведущий рассылки.
читайте в этом выпуске:
Мастерская
Рассуждения о модульной сетке в web-дизайне
Видеокурсы по веб-дизайну. Избранное
WebMasterZone рекомендует...
→ новости сайта:До окончания акции остался всего 1 день! На сайте WebMasterZone - магазине CD и DVD-дисков по веб-дизайну - проводится НЕДЕЛЯ СКИДОК! Только в течении 7-ми дней, с 09.03 по 16.03, Вы сможете приобрести любой наш диск с беспрецедентной скидкой 50%! Не упустите свой шанс! Посетить...
Статью написал скорее из желания сохранить свои идеи для дальнейшего развития. Речь идет о верстке по модульной сетке: теория, практика. Текст расчитан на подготовленного читателя.
Вообще стоит задуматься с чего это вдруг сыр-бор вокруг использования модульной сетки в веб-дизайне? Если так подумать, то как таковой «сетки» в HTML нет и вряд ли будет. Всё, что сейчас можно предложить, - это лишь имитация, слабая пародия на настоящую модульную сетку. Так стоит ли вообще об этом думать? Не проще ли делать каждый проект индивидуально, или как вариант, по отработанным шаблонам?
Когда делается только один сайт, то в принцие можно сделать его по старинке, но когда речь идет о массовом создании, то нужен какой-то механизм, который облегчит работу верстальщика и программиста.
Например уже есть сверстанный сайт. Если нужно что-то изменить, то это затрагивает сразу несколько частей: html-структуру и css-стили. Сложность еще заключается в том, что html-структура по сути и есть модульная сетка и привязка вложенных элементов со своими css-правилами может быть сделана к ячейкам модульной сетки. Меняя сетку, мы меняем и css-правила всех внутренних частей.
Задача, собственно и состоит в том, чтобы каким-то способом отделить модульную сетку от её внутренних блоков.
Тут еще важный момент. Модульная сетка, ту, о которой постоянно рассказывают на сайтах и в книжках; ту, которая позаимствована из издательских программ, ни к черту не годится для веб-дизайна. В веб-дизайне доступны только строки и колонки. Причем такие которые не имеют между собой отступов и границ. Грубо говоря - это просто ячейки.
Почему так? На веб-странице все элементы прямоугольные. Таков уж HTML. Глядя на отступ визуально никто не сможет сказать: внутрений ли это отступ внешнего элемента (padding) или внешний отступ внутреннего элемента (margin). В обычном дизайне такой проблемы просто не возникает - отступ это отступ, например расстояние между колонками. А в веб-дизайне, из-за особой блочной модели, внутренний отступ приплюсовывается к установленной ширине блока. Любой нормальный человек (и IE, кстати) будет считать
ширину блока по его границе (border), но стандарт HTML имеет на сей счет другое мнение.
Всё это вносит изрядную путаницу и когда мы задаем отступы, то вебмастер должен как-то определяться о каком именно отступе идет речь. Самым простым способом, конечно же будет отказ от padding, но все равно остается еще толщина границ, которую нужно приплюсовать к ширине блока.
То есть я думаю, что для веба самый лучший способ - это не пыхтеть и устраивать холивары по поводу стандартов HTML, а принять за основу простую, как три копейки, схему безо всяких отступов и границ. Тогда задавая ширину (width) мы всегда гарантированно будем получать то, чего и ожидаем.
Вот так:
Теперь, когда стала ясна основа модульной сетки, стоит подумать о том, как её задать средствами HTML.
Пожалуй главное правило - это то, что модульная сетка веб-страницы будет описывать только расположение своих ячеек/блоков. То есть, нам нельзя задавать в модульной сетке шрифты, цвета и прочее оформление. Модульная
сетка имеет ячейки у которых задаются только размеры и положение. Таким образом решается раз и навсегда вопросы с «переверсткой» вложенных блоков: они являются как-бы наполнителями ячеек и не зависят от других элементов.
Тут, я бы хотел кинуть камень в огород различных css-фреймворков, в которых вроде как есть некая сетка. Ну например, известная многим верстальщикам 960 Grid System. На самом деле это просто некий предопределенный размер колонок, который даже с натяжкой нельзя назвать модульной сеткой. В таких фреймворках невозможно решить нестандартные задачи с позиционированием. Обязательно придется придумывать какие-то свои стили, и тогда непонятно, зачем вообще использовать css-фреймворк.
Технически позиционирование выполняется элементарно. Для этого задаются ширины блоков (width), они делаются плавающими (float) и при необходимости - отступы (margin, например для центрирования по странице). Если же нужно визуально контролировать расположение блоков, то для этих целей можно использовать фоновую картинку для body. Например в вышеприведенной картинке используются квадраты 10x10px. Я её часто использую для своих проектов.
Расположив ячейки/блоки модульной сетки, можно приступать непосредственно к оформлению каждого вложенного блока. Поскольку у нас в модульной сетке нулевые отсупы и нет border, то для внутренних блоков снимается проблема как их разместить.
В данном примере div#header - ячейка модульной сетки. А div.header-wrap - внутрений блок в котором и осуществляется вывод. При создании сетки удобно сразу делать блок «wrap» и тем самым сразу снять вопросы «позиционирования» внутреннего блока при любых изменениях родительской ячейки.
Внутренний блок (его содержимое) может быть чем угодно. Это очень важно, потому что при использовании MaxSite CMS, часто возникают ситуации, когда на этапе разработки еще не известно что именно будет выводится. Классический пример - виджеты, ушки.
Для описания модульной сетки я использую свой скрипт grid.php. В предыдущих статьях я приводил одну из первых версий. Поскольку особого интереса она не вызвала, то не вижу смысла публиковать новую. В текущем варианте модульная сетка строится с помощью функций, в которых задаются нужные параметры. Например по какому алгоритму генерировать html-код: div'ы или table. Можно задать class, id, внутренний wrap и т.д. Тут же задается и содержимое блока: текст, файл, php-функция.
Впрочем, это не так и принципиально. HTML можно и вручную создать, главное это четко указать div-блоки, которые и будут являться ячейками.
После этого я задаю структуру в struct.css, в котором выполняется позиционирование блоков. Причем, поскольку html-структура (для меня - сделаная с помощью grid.php) во многих случаях может быть одной, то можно сделать несколько struct.css, которые будут по разному позиционировать html-блоки. Что-то вроде Zen Garden.
Вся дальнейшая кастомизация осуществляется в style.css и прочих css-файлах. Например у меня это меню, стили для печати и т.п.
Общая схема получается примерно такой.
Тут, собственно есть еще один важный момент - свободное именование блоков и стилей. Если я использую свои наработанные стили, то я их и дальше использую. Если кто-то использует css-фреймворк, то он использует его именование. Это очень удобно. А вот, что касается «внутренних» стилей (style.css), то для MaxSite CMS они практически все предопределены: единые type-файлы, плагины, виджеты предполагают использование сгенерированных системой html и css-классов.
"Профессиональное создание Интернет-магазина под ключ"
Полный и качественный видеокурс по созданию интернет-магазина под ключ для любого уровня подготовленности.
68 уроков полностью раскроют все тонкости и нюансы профессионального создания интернет-магазинов.
"PHP+MySQL для начинающих"
Более 110 видеоуроков общей продолжительностью в 22 часа и 30 минут, которые позволят Вам создавать неповторимые динамические сайты с использованием языка PHP и баз данных MySQL!…
"Как создать прибыльный блог"
Пошаговое руководство для новичков в Интернет-бизнесе 2.1. Видеокурс, представляющий собой бизнес-систему, которая научит зарабатывать от $1000 в месяц в Интернете на блогах. На сегодняшний день бизнес-система Как создать прибыльный блог является самым полным, пошаговым и понятным инструментом для создания бизнеса в Интернете.
"Весь Арсенал Флешера на DVD"
Курс "Арсенал Флешера" предназначен для серьезных людей, кто действительно хочет: получить качественную информацию; создавать флеш-ролики с нуля, с наименьшими временными и финансовыми затратами и применить полученные знания на практике.
Надеюсь, что вам понравился этот выпуск рассылки и вы узнали что-то новое и полезное для себя. Если у вас есть пожелания или предложения как сделать рассылку лучше, присылайте их на наш e-mail:
admin@wm-zone.info
