Виды верстки – Современные виды верстки сайтов HTML. Требования к верстке

Современные виды верстки сайтов HTML. Требования к верстке

Поговорим о правильной верстке сайтов. Фиксированная, блочная, адаптивная, мобильная, резиновая, гибкая, семантическая, валидная, кроссбраузерная верстка. Давайте посмотрим, что все это значит.

Верстка сайтов на HTML/HTML5 и CSS/CSS3

С начала года я занялся подтягиванием своих слабых мест в веб технологиях. Разобравшись, я описал план самостоятельного изучения HTML и CSS, а также  HTML5 и CSS3. Я придерживался этого плана и результат получился неплохим.

Недавно я начал разбираться в видах верстки, что значат все эти понятия и понял, что информации уже очень много, но вся она однотипная. А самое главное — уже устаревшая. Обычно говорят о фиксированной, табличной и блочной видах верстки.

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

В общем, я решил немного заполнить эту пустоту и написать статью, которая будет полезна сегодня всем тем, кто решил разобраться в видах верстки веб страниц.

Что такое верстка сайта, долго объяснять я думаю не стоит. Если коротко, то это создание HTML кода и CSS-таблиц стилей по задуманному ранее дизайну. Чаще всего страницы верстают на основе подготовленного заранее в фотошопе psd-макета.

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

Требования к современной верстке

Чем качественнее выполнена верстка сайта, тем лучше будет работать сайт или блог. Профессиональную верстку может выполнить только хороший специалист верстальщик. Какие же требования сегодня предъявляют к верстке? Вот они:

• кроссбраузерность
• адаптивность
• минимум кода
• высокая скорость загрузки страниц
• семантичность
• валидность

Давайте разберем какие бывают виды верстки сегодня и вам станет понятно что все это значит.

Виды верстки сайтов

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

• Фиксированная верстка или статическая. Вне зависимости от размеров окна браузера или устройства ширина страниц будет постоянной. Все элементы занимают строго определенную ширину в пикселях на странице. Если разрешение экрана большое и окно браузера развернуто на весь экран, то, как правило, по бокам остается свободное место. И наоборот, на мобильных устройствах при фиксированной верстке снизу на странице появляется полоса прокрутки.
• Резиновая верстка. Страница занимает всю ширину браузера, каких бы размеров она не была и на каком бы устройстве вы не открыли эту страницу. Ширина элементов страницы задается в процентах от ширины окна, и поэтому занимают всю доступную область. При этой верстке тяжело добиться хорошего удобного дизайна при всех возможных разрешениях экранов, ведь страницы будут выглядеть по-разному.
• Табличная верстка или верстка таблицами. В данном случае сетка страницы строится с помощью таблиц. Представьте, что на странице есть главная таблица, а в ее ячейках при необходимости располагают вложенные таблицы, а в их ячейках могут быть новые таблицы и так до бесконечности. Код получается громоздким, это очень неудобно, да и надобности в этом уже нем. Сегодня так страницы уже давно не верстают. Более того, поисковики не любят такие страницы и плохо их индексируют. Если вам нужно, вы можете разместить на странице таблицу или несколько, но только не делайте с их помощью структуру страницы.
• Блочная верстка, верстка блоками или div-верстка. Это, пожалуй, самая распространенная верстка сегодня. Сетка страниц конструируется из множества блоков <div>, которые вложены друг в друга. Для доступа к ним используются атрибуты id и class. Откройте исходный код (Ctrl + U) практически любой веб-страницы и вы увидите такую верстку.
• Адаптивная верстка или мобильная верстка. Ее еще иногда называют респонсивная верстка. Ключевая особенность в том, что страницы хорошо адаптируются под любое разрешение экрана пользователя. Не важно, отрыли вы страницу на стационарном ноутбуке, на здоровенном широкоформатном мониторе или на смартфоне — в любом случае страница должна хорошо смотреться и быть удобной для пользователя. Это достигается тем, что используют несколько таблиц стилей под разные разрешения.
• Гибкая верстка или flex верстка. Вначале применяется известная всем блочная верстка, а потом нужные блоки превращают во флекс-контейнеры (флексбоксы). В стилях элемента указывают display: flex; Элементу можно указать направление главной оси и выравнивание. Эти возможности стали доступны с приходом CSS3. Теперь страницы становятся очень гибкими. Этот механизм подробно разбирается на продвинутых курсах в HTML Academy. Рекомендую ознакомиться, за этим настоящее и будущее верстки.
• Семантическая верстка. Она явилась логичным продолжением блочной верстки и стала доступна в HTML5. Новые теги делают станицу более структурированной. Поисковики любят такие страницы. Что это за новые теги в HTML5, можете посмотреть в другой моей статье.
• Валидная верстка или по-другому верста без ошибок. Это верстка, выполненная в соответствии со стандартами W3C. Проверить свою HTML-страницу на корректность вы можете с помощью специального валидатора W3C.
• Кроссбраузерная верстка. Как понятно из названия, при такой верстке страницы выглядят одинаково в разных браузерах. Первое, с чего обычно начинают — подключают к странице специальный CSS файл — сброс стилей.

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

По собранной мной статистике около 40% людей посещают страницы моего блога с мобильных устройств. Причем со смартфонов более 30% и с планшетов около 7%. Да, у меня на блоге адаптивный шаблон и он неплохо смотрится со смартфонов. Пока что есть ошибки в валидации, но думаю, что руки скоро наконец дойдут до этого.

В ближайшее время я хочу переделать шаблон с учетом гибкой и семантической верстки по всем правилам, и тогда он станет еще лучше.

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

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

• Практика по основам адаптивной верстки в HTML5 и CSS3
• Практика верстки сайта под мобильные устройства
• Веб-дизайн: практический курс создания лендинга
• Веб-дизайнер — профессионал. Создание востребованных макетов
• Современные тенденции веб-разработки
• Научись создавать красивые, современные подписные и продающие страницы
• Все о создании сайтов
• Пошаговый план создания сайта
• Школа блоггинга

Надеюсь, что статья была интересной, и вы нашли для себя что-то полезное.

Не только знания о верстке помогают зарабатывать в интернете. Есть много интересной работы, где уже через несколько месяцев можно получать не меньше, чем в офлайне. Как перейти в удаленную работу и не делать ошибок? В этой книге очень много примеров как люди осваивают новое для себя направление и через несколько месяцев уезжают жить на Бали. Возьмите книгу здесь

Желаю профессиональной верстки вашим сайтам и блогам!

Вам может быть интересно:

HTML и CSS уроки для начинающих с нуля

Разработка сайтов на HTML5. Что нового в HTML5?

CSS практика — верстка сайта

Защитить сайт или блог на wordpress. Защита в несколько уровней

Как создать блог самому?

Как научиться быстро печатать на компьютере, 2 тренажера

Как научиться английскому языку самостоятельно с нуля

7 лучших способов заработка в интернете

С уважением, Дмитрий Ивлев.

Узнайте много интересного и сделайте свою жизнь ярче!

Подписывайтесь и получите сундук с сокровищами.

dmitriyivlev.ru

Какие бывают типы вёрстки сайта?

Приветствую Вас дорогой читатель!

Сегодня я хочу рассказать Вам о разных типах вёрстки для того чтобы Вы могли лучше ориентироваться в этом вопросе и не попали в неприятную ситуацию при заказе вёрстки либо её разработке.

Дело в том, что я не раз обращалась к верстальщикам с заданием по вёрстке и столкнулась с проблемой что либо они сами не очень разбираются в разных типах вёрстки либо разбираются, но так как заказчик чётко не указал какой тип вёрстки ему нужен, то делают самый простой вариант. В результате вы можете поучить некачественную вёрстку, которая будет некорректно отображаться в разных браузерах (или вообще не поддерживаться некоторыми из них) либо вы заплатите за адаптивную вёрстку а получите обычную (с фиксированной шириной и масштабируемую на мобильных устройствах), либо Ваш сайт будет вообще некорректно отображаться на мобильных устройствах и так далее.

На самом деле выбор типа вёрстки и согласование её с исполнителем – это один из важнейших этапов в разработке Вашего сайта.

Но прежде чем перейти к разбору типов вёрстки я хочу акцентировать Ваше внимание на одном очень важном требовании – кроссбраузерности.

Итак переходим к типам вёрстки:

Фиксированная.

Является одним из наиболее распространённых на сегодняшний день типов.

Вот скриншот отображения такой вёрстки на разных устройствах

Основная особенность: сайт имеет строго фиксированную ширину и высоту всех блоков и страницы в целом, и не зависит от диагонали монитора.

Достоинства:

• простота изготовления (а следовательно и меньшая цена)
• корректное и одинаковое отображение сайта на экранах с разной диагональю.

Недостатки:

• на маленьких экранах такой сайт будет просто масштабироваться. То есть вы получите уменьшенную точную копию вашей страницы для прочтения которой её нужно будет сначала увеличить. В эпоху мобильного интернета это не самый лучший вариант.
• на широкоформатных мониторах остаётся много пустого места по бокам (особенно если ширина страницы достаточно узкая (900 пикселей, к примеру.)
• при масштабировании страницы она просто становится больше и вылезает за пределы экрана как по высоте, так и по ширине.

Обычно данный тип вёрстки используют для создания Landing Page.

Резиновая (тянущаяся).

Пример отображения резиновой вёрстки на разных экранах

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

Достоинства:

• Хорошо смотрится на экранах разной величины.
• Изменяется при масштабировании страницы.

Недостатки:

• Более сложный в реализации (а следовательно и более дорогой)
• Так как блоки сайта растягиваются и сжимаются под ширину экрана – некоторые элементы выглядят не очень красиво на планшетах и телефонах.
• На мобильный устройствах некоторые элементы за счёт сжатия становятся очень неудобными в использовании. Особенно это касается меню и форм обратной связи.

Такая вёрстка подходит для макетов сайтов, элементы которых размещены в одну колонку. Или в сочетании с фиксированной вёрсткой.

Адаптивная.

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

Основная особенность:
Адаптивная вёрстка базируется на резиновой вёрстке + использует медиазапросы или специальные скрипты, которые позволяют определять размер экрана пользователя и в зависимости от этого приписывать конкретным элементам те или иные стили (ширина элементов и положение блоков, размер шрифтов и картинок и даже цвета).

Достоинства:

• Адаптируется по размеры экрана, за счёт чего ваш сайт хорошо отображается на всех видах устройств.
• Такой сайт удобно просматривать на мобильных устройствах, так как не нужно ничего увеличивать (всё само подстраивается).
• При масштабировании страницы в окне браузера элементы так же перестраиваются и страница не теряет свой вид.

Недостатки:

• Очень трудоёмкий вид вёрстки, что отражается на его цене.
• Контроль качества выполнения такой вёрстки тоже требует не мало времени (особенно в том случае если сайт большой) так как нужно протестировать вёрстку на разных размерах экранов через онлайн сервисы либо через масштабирование и изменение размеров окна в браузере.

Также можно выделить табличную и блочную вёрстку, но это тема отдельной статьи.

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

Желаю Вам удачной вёрстки, качественных сайтов и высокой посещаемости.

До встречи в моих новых статьях.

С уважением Юлия Гусарь.

impuls-web.ru

Способы верстки сайта

Здравствуйте уважаемый посетитель!

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

Содержание

---

• Какие существуют виды верстки
• Табличная или блочная
• Фиксированная или резиновая
• Зачем нужна адаптивная верстка
• Семантическая верстка
• Выводы

Какие существуют виды верстки

---

Верстки по способу построения и особенностям работы сайта можно разделит на следующие основные виды, такие как:

• Табличная
• Блочная
• Фиксированная
• Резиновая
• Адаптивная
• Семантическая

Первые два вида (1,2) определяют способы построения веб-страниц, где, при табличном способе страницы строятся с помощью контейнеров, определяющих содержимое в виде таблиц (парный элемент языка HTML <table>), а при блочном варианте, конструкцией страниц обычно являются блочные элементы, например, универсальный элемент<div>.

Следующие три вида (3÷5) определяют особенность отображения веб-страниц на экранах пользовательских устройств в зависимости от их разрешения, что сказывается на удобство пользования сайтами.

6-ой вид — семантическая, также можно отнести к одному из видов верстки, так как такой вид, используя смысловое значение элементов языка HTML, позволяет делать веб-страницы лучше структурированными и более удобными и понятными.

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

Здесь, для общего понимание основных видов верстки приведены лишь их общие характеристики. Далее, перейдем к более детальному их рассмотрению.

Табличная или блочная

---

Как было выше сказано, при табличной верстке веб-страницы строятся на основе таблиц, при блочной — блоков. В чем преимущества и недостатки этих способов построения веб-страниц?

Как известно тег <table>, представляющий контейнер для содержимого таблицы, состоит из трех элементов:

• парный тег <table>, обозначающий начало и конец контейнера;
• парный тег <tr>, обозначающий строку;
• парный тег <td>, обозначающий ячейку.

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

В блочном же варианте для этого понадобиться лишь 1 парный тег <div>, состоящий из 2 элементов, что в сравнении с таблицей, значительно проще.

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

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

1. <table>

2. <tr>

3. <td>1</td>

4. </tr>

5. <tr>

6. <td>2</td>

7. </tr>

8. <tr>

9. <td>3</td>

10. </tr>

11. <tr>

12. <td>4</td>

13. </tr>

14. </table>

Рис.1 Табличный вариант

1. <div>

2. <div>1</div>

3. <div>2</div>

4. <div>3</div>

5. <div>4</div>

6. </div>

Рис.2 Блочный вариант

Как видно из примеров, блочный вариант значительно компактнее, чем при использовании таблиц. Это приводит к существенному увеличению объема кода веб-страниц при использовании табличной верстки и, соответственно, к ухудшению такого параметра, как скорость загрузки.

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

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

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

Фиксированная или резиновая

---

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

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

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

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

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

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

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

rabota-vinete.ru

Композиция газетной полосы

3 — 2006

Николай Дубина [email protected]

Композиция номера газеты

Особенности композиции специальных номеров газеты

Верстка газеты

Виды верстки

Тип газеты и верстка

Основные недостатки разных видов верстки

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

Композиция номера газеты

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

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

Но устойчивость композиции газетного номера не означает принятия жесткого стандарта ее схемы. Один из признаков хорошей композиции — ее гибкость, допускающая при необходимости быструю переверстку той или иной полосы или даже замену какой­либо из них целиком, а также перемену мест разделов и рубрик, вынесение важнейших на данный момент материалов вперед, на самые выгодные места номера.

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

Разумеется, связь между полосами номера не исключает возможности резкого выделения какой­либо из них, если такая необходимость диктуется содержанием материалов. Это может быть выделение в форме тематической полосы или страницы­плаката (см. ниже) и т.п. В целях выделения может быть использовано и изменение формата какой­либо из полос номера. Так, в небольшой газете, выходящей в формате A3 на четырех полосах, возможна замена двух внутренних смежных полос одной большой полосой формата А2. Эта полоса будет верстаться как бы «повернутой на бок». Подобный прием укрупнения формата применяется в тех случаях, когда необходимо более подробно осветить какую­либо важную тему. Но возможно и уменьшение стандартного формата полосы, например с A3 до А4. Этим пользуются по большей части при оформлении «газеты в газете» (см. ниже) или спецвыпусков. Например, таким образом оформляют какой­либо из разделов, помещая на каждой странице вместо одной полосы стандартного формата A3 по две полосы формата А4, располагающиеся вместе со средником, который их разделяет, горизонтально, вдоль поперечной оси всего номера.

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

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

Компонуя номер, верстальщик должен иметь в своем распоряжении большой выбор различных по размерам материалов. Крупные статьи послужат основой, фундаментом для построения каждой полосы. Но строить номер, используя только объемные материалы, можно лишь в исключительных случаях, поскольку он будет трудночитаемым. Наряду с  большими статьями на страницах должны быть помещены и средние по размерам заметки, и разнообразные мелкие сообщения. Переход от крупных проблемных статей к мелким заметкам облегчает восприятие всего номера.

Важный элемент композиции газеты — ее разделы и рубрики. Рубрики подразделяются на служебные, определяющие жанр или источник публикуемого материала, и тематические, указывающие направление и характер публикации. Для композиции номера решающее значение имеют именно тематические рубрики, которые позволяют реализовать дифференцированный подход к читательской аудитории, систематизировать материал газеты и ориентировать его на конкретные группы читателей. В каждой газете существует несколько разделов, в которых помещают материалы определенного направления, характера или жанра. Раздел газеты может совпадать с рубрикой, но чаще статьи и заметки, входящие в какой­либо раздел, печатают под разными рубриками, которые выступают как его части. Чем больше таких рубрик, тем разнообразнее газета. В каждой газете должна быть разработана своя система рубрик, различающихся характером, продолжительностью своего существования, ориентацией на определенную аудиторию и т.д. Одни рубрики используются в издании постоянно или живут длительное время, иногда несколько лет, и обычно совпадают с главными тематическими разделами газеты, другие связаны с конъюнктурой или имеют сезонный характер. Применяются и эпизодические рубрики, которые помогают уточнить характер публикации в одном номере и более не повторяются. Они также помогают читателям, хотя и не играют большой роли в формировании лица газеты.

Рубрики различаются и периодичностью, частотой своего появления в газете. Одни применяются в каждом или почти в каждом номере, другие, рассчитанные на определенные читательские группы, используются реже, с большими или меньшими интервалами. Некоторые предназначены для всей читательской аудитории, иные — лишь для ее части.

У рубрик в газете своя жизнь: какие­то из них могут наскучить читателю, а другие потребовать обновления. Иногда  достаточно видоизменить рубрику над старым постоянным разделом газеты, чтобы его материалы стали восприниматься поновому. Лучший метод обеспечить оптимальное функционирование системы рубрик газеты — планирование, для чего составляются редакционные планы по рубрикам, определяется периодичность их появления в газете; рубрики закрепляются за определенными страницами номера и местом на полосе, связываются с конкретными днями недели или месяца.

Композиция газетного номера в значительной мере определяет характер его верстки.

Особенности композиции специальных номеров газеты

Особенности содержания специального номера газеты — целевого, выпускаемого к празднику, юбилею, знаменательной дате, или тематического, все материалы которого посвящены какой­либо одной теме, — определяют и особенности его композиции и оформления. Для того чтобы оформление спецвыпуска не было однообразным, необходимо разносторонне подать избранную тему с использованием различных газетных жанров и форм подачи материалов. Возможно более разнообразной, необычной должна быть и композиция такого номера, определяющая яркую верстку и оформление. Тематический номер нужно надлежащим образом иллюстрировать, в его оформлении очень часто используют дополнительный цвет.

Особый вид целевого номера представляет так называемый объединенный номер. Он выпускается редакциями нескольких газет и посвящается теме, представляющей общий интерес для читателей всех этих изданий. В номере, независимо от места его издания, помещают одни и те же материалы, подготовленные по единому плану журналистским коллективом из представителей всех газет. Редакции выпускают номер по заранее разработанному макету. На первой его странице обычно воспроизводят названия и логотипы всех газет, принимавших участие в подготовке номера. Здесь же помещается и вводная часть, сообщающая о целях выпуска объединенного номера и о его участниках.

Верстка газеты

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

Разрабатывая композицию номера, приходится иметь дело с множеством различных статей и заметок (со всем, что отобрано для публикации) и распределять их по полосам, компоновать в разделы, рубрики, определяя место каждого материала. При верстке полосы решаются в принципе те же задачи, но в ином масштабе. Характер материалов, которые должны быть здесь напечатаны, уже в основном определен; теперь необходимо организовать и разместить их на ограниченном пространстве полосы, а также выделить важнейшие. Причем речь идет не только о распределении материалов на полосе, но и о размещении каждой статьи и заметки в отдельности, о ее конфигурации, постановке ее текста на различное количество колонок и т.д. Эта задача связана с остальными элементами технического оформления — с выбором шрифтов для набора текста и заголовка, с определением формата набора и т.п.

В процессе верстки необходимо так расположить и оформить материалы газеты, чтобы читатель смог быстро разобраться в ее содержании, найти то, что его интересует; кроме того, верстка должна помочь обратить внимание читателя на главные материалы номера и побудить его прочитать их. Степень соответствия верстки этим требованиям — главный критерий оценки ее качества. Верстка хороша, если она помогает читателю, упорядочивает собранные и подготовленные для публикации материалы, организует их в единое целое — номер. Если же верстка не облегчает, а затрудняет восприятие материалов — значит, она выполнена некачественно.

Рассмотрим некоторые закономерности верстки, знание которых поможет в решении практических вопросов, связанных с оформлением газеты.

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

Выделение достигается с помощью различных средств верстки и технического оформления, прежде всего — выдвижением важнейших материалов номера вперед. Не случайно в газетной практике бытует термин «первополосный материал»: он означает, что содержание какой­либо статьи или заметки настолько важно, что она достойна помещения на первой полосе, с которой читатель начинает ознакомление с номером. Несмотря на оправданное желание «закрепить» материалы основных разделов и рубрик газеты на относительно постоянных, привычных для читателей местах, при необходимости следует менять их расположение в номере, выдвигая важнейшие на данный момент разделы вперед.

Кроме общих для всех газет основ верстки, существуют особенности, характерные для каждого из изданий. Это и понятно: ведь верстка как один из главных компонентов внешней формы газеты в значительной мере определяет ее лицо. Как и другие элементы газетной формы, верстка, конечно, зависит прежде всего от характера и направления материалов газеты, а также от ее типа, формата и объема. Ее особенности связаны и с запросами, и с требованиями читателей данного издания.

Качество верстки газеты в основном определяется квалификацией верстальщиков. Нередко именно мастерство верстальщиков определяет характерные черты верстки и оформления того или иного издания, особенно при выпуске однотипных газет, выходящих в примерно равных условиях, решающих одинаковые задачи и предназначенных для одного круга читателей. Особенности верстки газеты во многом зависят и от технической оснащенности типографии.

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

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

Особенности верстки газет зависят, наконец, и от традиций, сложившихся в процессе ее развития, а также от национальных предпочтений. Так, специфика верстки российских газет характеризуется относительно большими размерами публикуемых материалов по сравнению с материалами, помещаемыми в большинстве зарубежных изданий. Это различие в объемах газетных материалов объясняется прежде всего принципиально разными задачами, которые стоят перед российской и, например, американской прессой. Если большинство американских изданий стремятся лишь информировать читателей о происходящих событиях, то российская пресса, как правило, предлагает читателю материалы аналитического характера.

Большими объемами печатаемых материалов объясняется, например, распространение в отечественной печати многогарнитурного стиля оформления газетных заголовков. Поскольку в последнее время публикация крупных аналитических материалов все чаще сочетается с подачей большого количества разнообразной краткой информации, значительная часть номера как центральных, так и местных изданий стала конструироваться из заранее подготовленных информационных блоков или разделов. Одна из устойчивых форм организации таких разделов — газетная колонка. Иногда несколько колонок объединяют в тематический блок — подборку.

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

Стремление сочетать публикацию объемных материалов и множества мелких тематически организованных информационных сообщений накладывает заметный отпечаток не только на верстку, но и на композицию номера в целом. Это предполагает как размещение устоявшихся разделов­колонок в определенной части той или иной полосы, так и планирование их появления по определенным дням недели. Информационные разделы­колонки должны органично входить в систему информационных рубрик газеты.

Рис. 1. Простая верстка полосы. Газета «Метро»

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

При верстке газет следует учитывать ее особенности, связанные с историческими и национальными традициями, которые  нужно поддерживать и развивать. Разумеется, это не должно вести к отказу от заимствований лучших приемов оформления иностранных изданий: они возможны и допустимы, но при условии, что не будут противоречить характеру газеты, задачам, принципам и традициям ее оформления. Здесь в равной мере противопоказаны и вредны обе крайности: как своеобразный национальный нигилизм — пренебрежение национальными традициями оформления своей прессы, так и разновидность национального газетного шовинизма — отказ от всего «чужого». Известный английский газетный дизайнер А.Хатт писал, что знание различий в национальных стилях оформления газет способствует пониманию собственного стиля и может помочь верстальщику и дизайнеру критически отнестись к собственной работе. Немалое значение имеют и традиции верстки конкретного издания.

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

Виды верстки

В газетах применяют несколько типов (стилей) верстки. Для каждого из них характерны свои приемы размещения и технического оформления текстовых и иллюстративных материалов на полосах. Неоднократно делались попытки найти общую основу для классификации этих типов верстки и их разновидностей. Так, немецкий дизайнер Альберт Мейер выделял верстку, «не перекрещивающуюся по вертикали и жесткую по горизонтали», «перекрещивающуюся по вертикали и жесткую по горизонтали», «горизонтально­переменную» и «перекрещивающуюся по вертикали и переменную по горизонтали».

Подобная классификация, несмотря на ее простоту и удобство, недостаточна. Она не учитывает ряда важных признаков верстки — таких как направление размещения материалов на полосе, их симметрия или асимметрия. Поэтому целесообразно отказаться от попыток определения общей основы всех типов (стилей) и видов верстки и классифицировать их по трем группам признаков. Виды верстки, входящие в первую группу, определяются по конфигурации материалов. Главным признаком второй группы является направление разверстки материалов на полосе — вертикальное или горизонтальное. Виды верстки, относящиеся к третьей группе, определяются по степени симметрии размещения материалов на полосе. К первой группе относятся четыре вида верстки: два из них — верстка, постоянная по вертикали и по горизонтали, а также постоянная по вертикали и переменная по горизонтали, — обычно объединяются в практике под общим названием простой (иногда ее называют прямоугольной). Действительно, каждая статья и заметка на газетной полосе получает форму простого прямоугольника (рис. 1).

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

Рис. 2. Ломаная верстка полосы. Газета «Ракурс»

Рис. 3. Вертикальная асимметричная верстка полосы. Газета «Метро»

Верстка с размещением материалов в колонках разной высоты резко изменяет конфигурацию текстов на полосе. Она лежит в основе разновидностей так называемой ломаной верстки (рис. 2). Статья или заметка приобретает при этом различную, иногда сложную форму — «уступом», «сапожком» и т.п., представляя собой соединение нескольких прямоугольников­колонок разной высоты.

Вторая группа признаков классифицирует верстку в зависимости от направления разверстки материалов на полосе. Направление определяется отношением высоты текстового материала к его ширине (общему формату всех текстовых колонок, на которых он размещается). Если высота большинства статей и заметок на полосе превышает их ширину, она называется вертикальной (рис. 3). При этом все или почти все тексты представляют собой одноколонные или многоколонные прямоугольники, вытянутые по вертикали. Если текст размещают в нескольких колонках разной высоты, он может получить и иную, более сложную форму; однако главным для его разверстки остается вытянутость по вертикали.

Рис. 4. Горизонтальная верстка полосы. Газета «Глагол»

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

При вертикальной разверстке применяют приемы как простой, так и ломаной верстки. Горизонтальная же разверстка публикаций почти всегда придает им форму простых прямоугольников. Лишь изредка, когда, например, хотят избежать «перереза» полосы или нежелательного смыслового сочетания соседних заголовков, прибегают к приемам ломаной верстки: текст разверстывают горизонтально на неравные по высоте колонки, чуть увеличивая или укорачивая две­три последние.

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

При симметричной или асимметричной верстке в равной мере допустимо пользоваться приемами вертикального или горизонтального расположения материалов, которые могут принимать простую прямоугольную или сложную ломаную форму.

Таким образом, для определения особенностей верстки какой­либо газеты приходится давать развернутую характеристику, учитывающую все основные признаки, о которых шла речь выше. Например, верстальщики «Московского комсомольца» применяют брусковую (по конфигурации материалов), смешанную (вертикально­горизонтальную), асимметричную верстку.

Как определить тип верстки, который максимально отвечает задачам, стоящим перед газетой? В каждом отдельном случае нужно принимать во внимание конкретные особенности издания: соответствует ли верстка типу газеты? Обеспечит ли она ясность в размещении материалов и вместе с тем даст ли достаточные возможности для выделения важнейших статей и заметок? Позволит ли добиться разнообразия, живости и динамизма в оформлении? Чтобы ответить на эти и множество других вопросов, верстальщику приходится взвешивать преимущества и недостатки того или иного вида верстки.

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

Но при всей кажущейся простоте применение этого вида верстки требует от верстальщиков и дизайнеров достаточно высокого уровня профессионального мастерства. Неумелое ее использование может привести к однообразию оформления газеты.

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

Однако при такой верстке необходим весьма точный расчет в процессе макетирования номера. Верстка газетных полос усложняется и может потребовать дополнительного времени, не предусмотренного графиком. А самое главное, подобная верстка усложняет восприятие материалов номера. Излишний контраст между материалами может привести к пестроте оформления газеты. Поэтому сфера применения ломаной верстки в нашей прессе в последнее время сужается. Если в 50­е годы ее приемами охотно пользовались не только в молодежных, но и в целом ряде областных и центральных газет, то теперь многие газеты перешли к более простой верстке (рис. 5).

Рис. 5. Верстка газеты «Известия»

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

Кроме того, возможно комбинирование вертикального и горизонтального размещения материалов в номере. Вертикальная разверстка текстов — один из самых старых приемов размещения материалов в газете. Длительное время все статьи и заметки разверстывались в газетах последовательно в одну колонку за другой. Понятно, что в результате все тексты принимали форму вытянутых по вертикали узких прямоугольников. И в настоящее время статью или заметку чаще всего заверстывают на ограниченное число колонок — одну, две, три. Читатели привыкли к такому традиционному построению газетных текстов, оно удобно и для верстальщиков. Подобное расположение материалов номера позволяет с равным успехом применять как простую, так и ломаную верстку и не затрудняет выделение материалов.

Достоинствами вертикальной верстки объясняется широкое применение ее вариантов во многих газетах. А в некоторых из них возродили прием вертикального размещения материалов в одну колонку — он оказался удобен при разверстке многочисленных мелких информационных заметок и сообщений.

Горизонтальная разверстка также позволяет четко разграничить материалы различных разделов и рубрик газеты — обычно на каждом «этаже» полосы располагаются статьи и заметки, входящие в какой­либо один раздел. К тому же, полоса получает необычный вид. Но вместе с тем подобная верстка ограничивает возможности верстальщика, вынуждая его отказаться от изменения высоты текстовых колонок. Кроме того, она эффективна лишь при размещении крупных статей, если полоса компонуется всего из трех­четырех больших текстовых «кусков»; мелкие же заметки, оформленные таким образом, выглядят весьма странно.

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

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

Асимметричная верстка более динамична, позволяет оформить газету живо и разнообразно, использовать различные средства выделения важнейших заметок. Но асимметрия не означает беспорядка на газетных полосах — она должна быть продуманной, только при этом условии такая верстка поможет избежать однообразия в оформлении газеты. Разумное сочетание приемов симметричной и асимметричной верстки — наилучший из возможных вариантов компоновки номера. Верстая газету в основном асимметрично, можно при необходимости использовать отдельные элементы симметрии, например расположить на асимметрично сверстанной полосе симметричную подборку или же выделить в номере тематическую страницу с помощью симметричной верстки ее материалов.

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

Тип газеты и верстка

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

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

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

В большинстве районных газет применяют простую вертикально­горизонтальную асимметричную верстку.

Основные недостатки разных видов верстки

Недостатки верстки, как правило, весьма относительны: то, что ранее считалось недостатком, с течением времени может перестать быть таковым. Один из наиболее ярких тому примеров — изменение отношения к так называемому перерезу. Перерез газетной страницы горизонтальной линейкой или вследствие установки на одном уровне заголовков нескольких соседних материалов раньше считался недопустимым. Чтобы его избежать, применяли различные приемы: передвигали один из заголовков в середину заметки, отбивали линейками и т.д. Но когда в газетах стала активно использоваться горизонтальная верстка, отношение к перерезу изменилось.

Однако существуют недостатки, которые повторяются в сотнях самых разных по своему типу и характеру изданий. Несмотря на их различие, у большинства этих недостатков общая основа — невысокая квалификация некоторых верстальщиков и дизайнеров, непонимание ими особенностей, специфики верстки и оформления той или иной газеты, связанное с этим стремление применить приемы верстки, не соответствующие ее задачам и характеру, а также игнорирование
ограничений, связанных с возможностями полиграфической базы. Одна из причин возникновения многих недостатков в области газетной верстки — утрирование какой­либо из ее сторон, упорное и постоянное применение каких­либо ее приемов, даже когда в этом нет никакой необходимости.

Так, оправданное стремление к простоте и ясности верстки, доведенное до крайности (простота во что бы то ни стало!),  приводит к так называемой серой верстке. Она выражается в подаче материалов «сплошняком», в одну колонку, без попытки как­либо разрядить текст. Серая верстка однообразна, отталкивает читателя и способна погубить любой, даже самый интересный и содержательный материал. Часто этот эффект возникает при неумелой подаче крупных материалов, особенно в малоформатных местных газетах. Между тем с помощью ряда достаточно простых приемов этот недостаток легко устранить.

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

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

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

Продолжение в следующем номере.

КомпьюАрт 3’2006

compuart.ru

виды и наиболее оптимальные варианты

Вёрстка сайта – процесс творческий. Его главной задачей является создание такой гипертекстовой разметки, с помощью которой можно оптимально удобно размещать элементы Web-страницы, чтобы они корректно отображались в окнах браузеров в соответствии с задуманным макетом. Здесь также нужно принимать во внимание те ограничения, которые присущи как CSS, так и HTML, а также обращать внимание на индивидуальные особенности браузеров и владеть приёмами вёрстки, чтобы получить оптимальный результат.

Чётких алгоритмов в вёрстке сайта не существует. Единственное, все страницы следует создавать в едином стиле. Это значительно облегчает вёрстку и придаёт сайту единое смысловое направление.

Адаптированность размера полотна сайта под различное разрешение монитора

Посетители сайта используют самые разные мониторы и браузеры. Они не одинаково интерпретируют HTML код и стили. В связи с этим создатель Web-страниц использует всевозможные приёмы. Они позволяют довести до посетителей страницу без заметных искажений и не доставляют им неудобства при просмотре.
Немаловажное значение имеет окно браузера. Здесь подразумевается ширина, которая у каждого пользователя своя. Она зависит от длины диагонали монитора, разрешения и формы экрана. С учётом этой особенности вёрстка сайта осуществляется с фиксированным и «резиновым» макетами.

При фиксированном макете условно выбирается средний размер монитора. Например, 1000 на 800. Размеры, естественно, даются в пикселях. Данный макет имеет много преимуществ. Под фиксированную ширину легко подгоняется дизайн. При любом разрешении он остаётся незыблемым. Только при больших величинах на экране справа и слева будут пустые области.

Если при разрешении 1024 на 768 макет займёт весь экран монитора с диагональю 17 дюймов, то при смене разрешения на 1280 на 1024 справа и слева останутся свободные области по 150 пикселей. Иногда вебмастера ведут отчёт от левого края. Тогда страница окажется сдвинутой в левый угол экрана. Не очень удобно для просмотра, но в целом терпимо. Чтобы сгладить недостатки, можно сделать красивый фоновый рисунок. Он «зальёт» все пустоты. Большинство сайтов делается именно с фиксированным макетом.

«Резиновый» макет полностью заполняет весь экран независимо от разрешения монитора и его размеров. То есть в стилях вместо фиксированной ширины в 1000 px указывается ширина 100%. Единственным ограничением ширины может стать размер рисунка. Если картинка с размерами 800 на 600, то соответственно на маленьком экране макет может исказиться. Поэтому ставится минимальная ширина в 800 px.

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

Модульная сетка

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

При двухколонной сетке сайт разбивается на две вертикальные половины или части. В левой можно расположить меню сайта со ссылками, а в правой контент. Не нужно также забывать о «шапке» и «подвале». «Шапка» — это то, что находится в самой верхней части сайта. Многие вебмастера помещают туда рисунки или рекламу. «Подвал» — самая нижняя часть. В нём обычно находятся счётчики, контактная информация, другие данные, не имеющие непосредственной связи с контентом. Такая сетка очень удобная и пользуется большой популярностью.

Не менее популярна трёхколонная сетка. Здесь уже имеется три вертикальных колонки. В левой меню, в правой реклама, а в средней контент, ради которого сайт и создаётся. Имеются также «шапка» и «подвал». Это обязательные атрибуты при любом макете. Можно также сделать комбинированную сетку. Тут всё упирается во вкус и фантазию.

Табличная и блочная вёрстки

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

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

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

Сторонники блочной вёрстки утверждают, что хотя блок и обладает теми же самыми свойствами, что и ячейка в таблице, но имеет более широкие возможности. Каждому блоку можно задать индивидуальную ширину, высоту, величину отступа, а также произвольное размещение (float) и управление обтеканием (clear). Во многих случаях при вёрстке сайта это имеет очень большое значение.

При блочной вёрстке, как многие утверждают, страница загружается гораздо быстрее, чем при табличной вёрстке. С этим можно не согласиться, так как здесь нужно учитывать и другие факторы. Но недостатком блоков в любом случае является его «чувствительность» к стилям. Современные браузеры с ними работают корректно, но иногда отображают по-разному.
Браузеры иногда не однозначно интерпретируют высоту и ширину блока. Ведь она определяется не только height (высота) и width (ширина), но и величиной полей, отступов и границ. Одни браузеры спецификацию поддерживают, а другие игнорируют. Особенно это касается старых версий Internet Explorer. Всё это затрудняет создание универсальных страниц.

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

Верстка мобильной версии сайта

И ещё нужно сказать несколько слов о мобильных устройствах. Всё больше и больше людей заходят в Интернет именно с них. При этом многие сайты ориентированы только на настольные компьютеры или платформы desktop, а поэтому на платформах tablets и high-end mobile devices они отображаются некорректно.

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

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

Что касается рисунков, то они должны быть динамичными, то есть расширяться и сужаться вместе с макетом сайта. Для этого существуют специальные классы и теги, которые прописываются в файле CSS и на Web-странице.

Вот собственно и всё, что нужно знать, чтобы вёрстка сайта соответствовала вашим желаниям и стремлениям. Главное, чтобы было желание создать по-настоящему качественный макет. Он будет радовать глаз и поспособствует в какой-то мере притоку посетителей. А это в Интернете самое главное.

Похожее

owlweb.ru

Виды вёрстки HTML

Любому сайту, который выглядит сложнее листа формата А4 с текстом, необходим каркас. Разметка, только уже не гипертекста, а элементов страницы. Нечто вроде полок и стеллажей, на которых вы разложите всю свою информацию, текст, картинки и прочие объекты.

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

Вёрстка – процесс формирования страниц (макета) путём компоновки текстовых, графических и прочих элементов.

В сети можно встретить несколько прилагательных, употребляющихся со словом верстка:

1. Дивная.
2. Блочная.
3. Табличная.
4. Вёрстка фреймами.
5. Семантическая.

Стоит обратить внимание на блочную (она же дивная — от названия контейнера <div>) и табличную (<table>) верстку. Вёрстка фреймами — это атавизм. В ряде случаев его можно и стоит применять, но в современном сайтостроении этому способу отводят место в музее. Семантическая (по моему скромному разумению) — это извращенная философия, а никак не практическая реализация вёрстки. Поэтому расскажу я о табличной и блочной верстке исключительно.

У таблицы есть следующие основные конструктивные элементы (есть и второстепенные):

1. <THEAD> — группа рядов в шапке таблицы.
2. <TFOOT> — группа рядов в подвале таблицы.
3. <TBODY> — группы рядов, составляющих тело таблицы.
4. <CAPTION> — заголовок таблицы.
5. <COL> — столбец таблицы.
6. <COLGROUP> — группа столбцов.
7. <TR> — ряд ячеек таблицы.
8. <TH> — ячейка заголовка столбца.
9. <TD> — ячейка таблицы.

Каркас из таблицы можно построить, например, следующий:

t h e a d
t f o o t
t b o d y сайдбар	t b o d y контент

Код этого примера:

<table>
  <thead>
    <tr>
      <td colspan="2">
        <b>t h e a d</b>
      </td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2">
        <b>t f o o t</b>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td valign="top">
        t b o d y<br>сайдбар
      </td>
      <td valign="top">
        t b o d y<br>контент
      </td>
    </tr>
  </tbody>
</table>

<tfoot> должен следовать за <thead> и лишь потом идет <tbody>, потому что обозреватель сначала рассчитывает размер верхнего и нижнего блока сайта, а все оставшееся пространство идет под контейнер <tbody>. Шапка и подвал присутствуют в таблице в единственном экземпляре, тел может быть сколько угодно. Подробности по атрибутам и значениям смотрите в спецификации.

Блочная (div’ная) вёрстка

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

Блок запросто может наложиться на соседний, спихнуть соседа по странице вниз или за пределы экрана. Поэтому при блочной вёрстке следует быть куда более внимательным к любой мелочи, нежели при табличной. Один забытый пиксель (рамки, отступы, различная трактовка обозревателями и прочее) может обернуться катастрофой.

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

Элементы div и span в сочетании с атрибутами id и class предоставляют общий механизм для добавления структуры к документу. Эти элементы определяют содержимое как инлайн (span) или уровня блока (div), но не навязывают других идиом представления содержимого.

Спецификация HTML 4.01 в переводе Пирамидина A.

Ниже я приведу пример использования блочной верстки, повторив табличный пример:

h e a d e r

div
сайдбар

div
контент

f o o t e r

Код этого примера:

<div>
  <div>
    <b>h e a d e r</b>
  </div>
  <div>
    div<br>сайдбар
  </div>
  <div>
    div<br>контент
  </div>
  <div>
    <b>f o o t e r</b>
  </div>
</div>

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

div { display:table; }

Ознакомьтесь с этим разделом спецификации CSS:

В заключение отмечу, что собственных атрибутов в спецификации 4-ой версии (кроме id и class) блоки не имеют. Всё управление блоками осуществляется через css-свойства. Посмотреть их можно опять же в спецификации:

Если материалы сайта оказались для вас полезными, можете поддержать дальнейшее развитие ресурса, оказав ему (и мне ) моральную и материальную поддержку.

nevor.ru

Виды верстки. Значение пропорции в композиции.

⇐ ПредыдущаяСтр 3 из 4Следующая ⇒

Верстка может быть классифицирована по нескольким признакам.

1. Верстка по виду издания:

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

газетная верстка – от книжно-журнальной кардинально отличается другим расположением текста и иллюстраций, а также довольно свободными правилами переносов;

акцидентная верстка – применяется для верстки отдельных небольших заказов: афиш, объявлений, бланков, рекламных листовок. Такая верстка называется еще мелочным набором. Применяется и для создания отдельных частей книг, то есть суперобложек, титулов и шмуцтитулов, инициалов и т. д. Вообще акцидентная верстка бывает трех видов: издательская акциденция, афиши и плакаты, акцидентная продукция малых форм. Акцидентная верстка использует различные графические решения.

2. Конфигурация материалов:

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

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

3. Расположение материалов относительно центра полосы. Центром полосы называется линия, которая по вертикали или по горизонтали делит полосу на две одинаковые части.

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

Симметричная верстка:

Асимметричная:

4. Ширина колонок материала: по этому признаку различают постоянную(одинаковое количество равных по размеру колонок) и переменную верстку. См. примеры «Верстка. Ширина колонок».

Постоянная:

Переменная:

5. Способ размещения текста и иллюстраций:

открытая верстка – с иллюстрациями над или под текстом полосы;

закрытаяверстка – с иллюстрациями, помещенными внутри текста и граничащими с текстом по двум или трем сторонам;

глухая верстка – когда в макете много колонок, и расположенные внутри текста иллюстрации всеми четырьмя сторонами соприкасаются с текстом;

верстка вразрез – попеременно иллюстрации и текст, при этом текст делится иллюстрациями на фрагменты;

верстка в оборку – в углу размещена иллюстрация, а с двух сторон она окружена текстом;

верстка на полях – так можно поместить мелкие изображения.

Пропорции композиции (или типа того):

Верстка непосредственно связана с композицией номера, которая во многом определяет ее особенности.

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

В процессе верстки необходимо так расположить и оформить материалы газеты, чтобы читатель смог быстро разобраться в ее содержании, найти то, что его интересует; кроме того, верстка должна помочь обратить внимание читателя на главные материалы номера и побудить его прочитать их. Степень соответствия верстки этим требованиям — главный критерий оценки ее качества. Верстка хороша, если она помогает читателю, упорядочивает собранные и подготовленные для публикации материалы, организует их в единое целое — номер. Если же верстка не облегчает, а затрудняет восприятие материалов — значит, она выполнена некачественно.

 

Еще верстку классифицируют по трем группам признаков:

Виды верстки, входящие в первую группу, определяются по конфигурации материалов. Главным признаком второй группы является направление разверстки материалов на полосе — вертикальное или горизонтальное. Виды верстки, относящиеся к третьей группе, определяются по степени симметрии размещения материалов на полосе.

К первой группе относятся четыре вида верстки: два из них — верстка, постоянная по вертикали и по горизонтали, а также постоянная по вертикали и переменная по горизонтали, — обычно объединяются в практике под общим названием простой (иногда ее называют прямоугольной). Одной из разновидностей простой верстки является так называемая брусковая верстка, получившая широкое распространение в газетах разных типов. В ее основе лежит размещение материалов на колонках одинаковой высоты при возможном изменении их горизонтального формата. Благодаря этому при брусковой верстке тексты получают форму строгих, чаще широких, разверстанных горизонтально прямоугольников — «брусков» разного размера. Для этой разновидности верстки характерны также установка заголовка на полный формат статьи, то есть без «воздуха» с боков, и горизонтальная отбивка текста снизу от соседних материалов на полную ширину его разверстки.

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

Вторая группа признаков классифицирует верстку в зависимости от направления разверстки материалов на полосе. Направление определяется отношением высоты текстового материала к его ширине (общему формату всех текстовых колонок, на которых он размещается). Если высота большинства статей и заметок на полосе превышает их ширину, она называется вертикальной (рис. 3). При этом все или почти все тексты представляют собой одноколонные или многоколонные прямоугольники, вытянутые по вертикали. Если текст размещают в нескольких колонках разной высоты, он может получить и иную, более сложную форму; однако главным для его разверстки остается вытянутость по вертикали.

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

При вертикальной разверстке применяют приемы как простой, так и ломаной верстки. Горизонтальная же разверстка публикаций почти всегда придает им форму простых прямоугольников. Лишь изредка, когда, например, хотят избежать «перереза» полосы или нежелательного смыслового сочетания соседних заголовков, прибегают к приемам ломаной верстки: текст разверстывают горизонтально на неравные по высоте колонки, чуть увеличивая или укорачивая две­три последние.

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

При симметричной или асимметричной верстке в равной мере допустимо пользоваться приемами вертикального или горизонтального расположения материалов, которые могут принимать простую прямоугольную или сложную ломаную форму.

 

 

Средства композиции

Композицияв газетно-журнальном дизайне означает построение номера и каждой из его страниц. Под типом композиции подразумевают характерные для данного издания роль и значение каждой из полос, а также постоянство размещения в номере основных разделов и рубрик. Устойчивая композиция номера — один из основных компонентов долговременной модели. Индивидуальность «лица» конкретной газеты определенного типа, цело­стность газеты достигаются за счет взаимодействия композиции и графики.

Композиция — своеобразное «оживление» конструкции, представляющей собой цельное образование из графических элементов, их рядов, комплексов, подсистем и систем. Конструкция — графическая композиция, если имеется в виду размещение и объединение в одно целое графических элементов; композицией номера – если предполагается порядок размещения материалов на полосе в зависимости от их значения; композицией газеты – когда подразумевается порядок размещения разделов газеты по номерам и в зависимости от плана, а также их значимости и актуальности.

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

Равновесие Исходной точкой, определяющей равновесие композиции, является оптический центр. Он находится примерно на одну восьмую выше физического центра, или на расстоянии пяти восьмых от нижнего края композиции. Равновесие — это расположение элементов слева и справа от оптического центра, сверху и снизу от него. Существует два вида равновесия — формальное и неформальное. Формальное равновесие Ключ к формальному равновесию — абсолютная симметрия слева и справа от оптического центра. Такое равновесие используется, когда требуется подчеркнуть достоинство, стабильность и консерватизм образа (рис. 1).

Рис. 1. Формальное равновесие в фотографии

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

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

· Механические приспособления, такие, как указующий палец, прямоугольник, линия или стрелка (в телевидении — перемещение актеров или камеры, изменение мизансцены) переводит внимание с одного объекта на другой (рис. 2).

Рис. 2. Неформальное равновесие в рекламе и картинках

· Комиксы или картинки, расположенные в определенной последовательности, заставляют начинать чтение сначала и продолжать его в нужной последовательности.

· Использование пробелов и цвета выделяет текстовую часть или иллюстрацию. Взгляд будет переходить с темного объекта на светлый, с цветного на черно-белый.

· Также может быть использована естественная привычка читателя начинать чтение с верхнего левого угла страницы и продолжать зигзагообразно до низа страницы.

· В первую очередь внимание привлекают элементы большего размера, доминирующие на странице, и только потом — более мелкие.

Соразмерность Все элементы композиции страницы должны занимать площадь, соразмерную с их значением в композиции как едином целом. Одинаковость элементов по цвету, размеру или другим качествам вызывает монотонность. иногда подобный повтор целой композиции используется очень удачно в уличной рекламе, особенно политической. Многократный повтор одного плаката создает определенный эффект воздействия (рис. 3).

Рис. 3. Эффект повторения

Контрастность Эффективный способ привлечь внимание к одному определенному элементу — использовать контрастный цвет, размер или стиль. Например, использовать негативное изображение (белый цвет на черном фоне), черно-белое объявление в красной рамке или необычный стиль шрифта, контрастирующий с привычным. Последовательность Имеется в виду стилевая взаимосвязь данной композиции страницы с остальными документами сайта. Это достигается применением одного и того же формата, стиля, тональности, постоянного использования единых приемов: логотипа, рисованного персонажа, броского девиза.

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

· один шрифт;

· наложение одного изображения на другое или одного элемента на другой;

· продуманное использование пробелов;

· графические приемы: стрелки, рамочки, штриховка, тон.

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

Выделение пробелами (паузами) Пробелы — это часть страницы, не занятая другими элементами. Это название сохраняется, даже если эти части закрашены черным или другим цветом. Пробелы играют важную роль в создании образа, ибо пауза в музыке — тоже музыка.

Средства композиции

Линия Одним из основных средств композиции является линия. Там, где требуется ограничить пространство, намекнуть на форму, создать определение среды применяется линия. Прямая, кривая, ломаная, сложная — она присутствует практически во всем, хотя и не всегда явно.

Пятно Пятно в композиции часто помогает акцентировать важный объект и определить смысловой центр композиции. Пятно в зависимости от решаемых задач может быть как цветовым, так и тональным (рис. 4).

Рис. 4. Пятно в композиции

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

Ритм четкость восприятия композиции, ее запоминаемость напрямую зависят от ритма. Ритм может проявлять себя во многих ипостасях — от блоков на странице до пауз и стоек в шрифтовых композициях. Чем монотоннее ритм — тем скучнее композиция. Мозг не любит монотонности. В тексте страницы и композициях важен ритм изображений, элементов и пауз (рис. 5).

Рис. 5. Использование ритма в фотографии

Контраст позволяет выделить и гиперболизировать особенности двух и более изображений, предметов, цветов. Пример: толстый и тонкий — рядом с толстым тонкий и наоборот. Этот прием позволяет усилить свойства предмета по сравнению с его антиподом (рис. 6).

Рис. 6. Контраст в фотографии

Силуэт является комбинацией линии и пятна, но в основном он проявляет себя как темное пятно на светлом фоне. Красота и грациозность очертаний силуэта могут придать композиции неповторимость и некую очаровательную индивидуальность (рис. 7).

Рис. 7. Использование силуэта



infopedia.su