Расчет полей

Расчет полей

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

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

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

Определение областей усложняется при разной высоте страниц

Как подобрать правильную высоту этих полей? Нам поможет золотое отношение. Учтем разрешение экрана компьютера и используем золотое отношение, считая, что коэффициент приближенно равен 1,618. Разделив ширину страницы (960 пикселов) на 1,618, после округления получим 593.

Прямоугольник шириной 960 и высотой 593 пиксела почти идеально соответствует золотому отношению. Если разместить этот прямоугольник в верхней части страницы, его нижний край задаст границу поля. В нашей базовой сетке ближайшая линия находится на уровне 594 пикселов – 33-я строка сверху. И снова наши расчеты будут приближенными, так что полученное число можно использовать и считать, что горизонтальные поля будут разбивать страницу на фрагменты высотой 594 пиксела, начиная с верха страницы.

Высота полей рассчитывается с помощью золотого отношения

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

Если поля будут идти друг за другом каждые 594 пиксела, это создаст множество проблем при расположении элементов. Многие веб-страницы заполнены блоками разных размеров, и не все из них поместятся в 594-пиксельную область. От базовой сетки требуется помощь в визуальном выравнивании и упорядочении любых элементов на всем сайте.

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

Попробуем использовать правило третей, чтобы усовершенствовать подход к выбору размера поля. Если разделить 594 пиксела на 3, получим 198-пиксельную область, привязанную к сетке базовых линий. Используя базовую линию для задания промежутка между третями, мы получим 180-пиксельные поля по 10 базовых строк в каждом.

Вся страница разделена на поля

Важно отметить, что базовая сетка, в отличие от колоночной, является лишь рекомендацией и не должна строго соблюдаться. Опять же, на веб-страницах могут находиться слишком много элементов, поэтому выравнивание по сетке базовых строк не всегда возможно. Математические расчеты могут обеспечить абсолютную точность при размещении элементов, но внешний вид при этом может пострадать. Получившийся дизайн оказался бы идеальным с математической точки зрения, но несовершенен с эстетической. Такое точное соблюдение базовой сетки помешает как дизайнеру, так и пользователю. Важно найти эффективную основу сетки, которую можно использовать при необходимости, а в некоторых случаях игнорировать. Любая сетка – это набор предложений, и дизайнер может принять либо отвергнуть их.

Данный текст является ознакомительным фрагментом.



Поделитесь на страничке

Следующая глава >

Похожие главы из других книг:

Расчет конверсии целевого действия

Из книги автора

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


Расчет смещения для германиевого транзистора

Из книги автора

Расчет смещения для германиевого транзистора В качестве другого примера на рис. 3.3 показана схема смещения для германиевого pnp-транзистора с hFE=60 и VBE=-0,2 В. Значения параметров элементов схемы: RF=50 кОм; RE=50 Ом; RC=1 кОм и VCC=-12 В. Заменив транзистор моделью PSpice, мы получим схему


Глава 34 Начисление заработной платы и расчет налогов

Из книги автора

Глава 34 Начисление заработной платы и расчет налогов В этой главе вы прочтете о том, как организовать расчет заработной платы и ЕСН, формировать отчетность по зарплате.• Группы поддерживаемых документов• Начисления и удержания• Начисление заработной платы• Расчет


10. Не прячьте ваши денежки, или Расчет дохода от вложенного капитала

Из книги автора

10. Не прячьте ваши денежки, или Расчет дохода от вложенного капитала Самым разным людям — финансистам, биржевым дельцам, банкирам и даже обыкновенным труженикам, вроде казначея пенсионного фонда Тимстеров[13], — хотелось бы знать, какой доход принесут им вложенные


Урок № 90. Расчет сумм ЕСН и страховых взносов в ПФР

Из книги автора

Урок № 90. Расчет сумм ЕСН и страховых взносов в ПФР Для расчета и регистрации сумм единого социального налога и страховых взносов в Пенсионный фонд России в программе предназначен документ "Расчет ЕСН", для доступа к которому предназначена команда главного меню Зарплата


Глава 4 Расчет и составление смет

Из книги автора

Глава 4 Расчет и составление смет Важным этапом при планировании и проведении ремонта или строительства является составление смет на материалы и текущие расходы. В данной главе описаны программные продукты, предназначенные для автоматизации таких учетных


Расчет сметы в режиме on-line

Из книги автора

Расчет сметы в режиме on-line В конце данной главы следует упомянуть о возможности составления сметы в интерактивном режиме в Интернете (on-line). В этом нередко возникает необходимость при отсутствии полноценных программ для расчета и составления смет, а также в случае


Глава 5 Расчет и визуализация укладки облицовочных материалов

Из книги автора

Глава 5 Расчет и визуализация укладки облицовочных материалов Нередко при ремонте частных домов или коттеджей при внутренней и наружной отделке приходится заниматься облицовочными работами – укладкой плитки на окружающей коттедж площадке, укладкой облицовочных


Расчет и проектирование шкафов

Из книги автора

Расчет и проектирование шкафов Еще одна небольшая программа для расчета и проектирования отдельных предметов интерьера – eXponent Furniture Designer. Главными ее преимуществами являются следующие.• Позволяет создавать проект как простого шкафа, так и интерьера целой квартиры.• В


3.5. Настройка параметров и расчет характеристик моделей

Из книги автора

3.5. Настройка параметров и расчет характеристик моделей 3.5.1. Определение и задание свойств детали Щелкните правой кнопкой мыши в любом пустом месте окна модели. Из контекстного меню вызовите команду Свойства (рис. 3.10). На Панели свойств в поле Обозначение введите


3.5.4. Расчет массо-центровочных характеристик модели

Из книги автора

3.5.4. Расчет массо-центровочных характеристик модели Поддерживаются расчеты массы, площади поверхности, объема, координат центра масс, плоскостных, осевых и центробежных моментов инерции. Для осуществления расчета на Инструментальной панели Измерения (3D) необходимо


Расчет биоритмов

Из книги автора

Расчет биоритмов Существует несколько программ, предназначенных для определения биоритмов.Теория биоритмов рассматривает изменения физического, эмоционального и интеллектуального состояния человека, которые происходят с постоянным периодом. Такие изменения


«Расчет биоритмов»

Из книги автора

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