Варианты верстки. Иллюстрирование. Преимущества устойчивой композиции

Понятие термина «верстка»

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

В эпоху докомпьютерного набора верстка производилась посредством ручного набора текста строками на линотипе или монотипе, и иллюстраций-клише. Текстовые строки и иллюстрации обкладывались пробельными материалами и линейками. Современная верстка осуществляется как в стандартных программах, таких как Microsoft Word, так и в Ventura Publisher, Adobe PageMaker, Adobe FrameMaker, CorelDraw, Microsoft Publisher и QuarkXPress, Adobe InDesign.

Виды верстки

Условно верстку можно классифицировать по следующим признакам:

1. По виду издания:

Книжно-журнальная верстка

Под книжно-журнальной продукцией принято понимать многополосные (многостраничные) печатные издания. В эту группу полиграфических изданий помимо книг и журналов входят:

• -- годовые отчёты;
• -- рекламные брошюры;
• -- каталоги;
• -- художественные альбомы.

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

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

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

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

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

Газетная верстка

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

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

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

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

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

Фонарь - статья (или изображение), заверстанные в центре или внизу полосы на две-три колонки. Высота такой статьи должна быть больше ее ширины; статью отделяют от другого материала жирными или фигурными линейками.

Подвал - статья, размещенная в нескольких, а чаще всего во всех колонках внизу полосы. Отделяют подвал от предыдущего текста линейкой; заголовок подвала располагают чаще всего над первыми двумя-тремя колонками. Высота подвала должна быть не больше 1/3 и не меньше 1/4 высоты полосы.

Стояк - статья, заверстанная на две-три колонки по всей высоте полосы.

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

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

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

Объявления заверстывают обычно на последней полосе.

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

Акцидентная верстка (акцидентный или мелочный набор)

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

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

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

1. открытая верстка,
2. закрытая,
3. глухая,
4. полосная,
5. с выходом на поля,
6. верстка на полях,
7. верстка в обрез.

Все эти типы верстки схематически показаны на рисунке.

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

При открытой верстке клише обирается или дается без оборки; при закрытой - также обирается или дается без оборки; при глухой верстке клише обязательно обирается.

Кроме перечисленных типов верстки встречается еще один вариант: текст помещается внутри рисунка.

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

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

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

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

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

Закрытая верстка - самая распространенная. При ней не приходится особо заботиться ни об определенном масштабе рисунка (как при открытой верстке), ни об его очертаниях: все выбоины в контуре скрадываются оборочными строками.

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

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

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

Выход на поля должен быть достаточно ощутим. Нельзя, например, выпустить клише на 10-12 п.

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

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

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

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

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

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

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

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

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

Кроссбраузерность, покажи свое лицо!

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

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

Почему же все такие проблемные?

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

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

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

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

И к третьей проблеме можно отнести в некотором роде халатность самих разработчиков. Что я подразумеваю под этим? Всего лишь несоблюдение стандартизированных правил, которые были установлены специальной организацией W3C (официальный сайт расположен по ссылке https://www.w3.org).

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

Рецепты для решения проблем с идентичностью отображения

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

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

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

С уважением, Роман Чуешов

Прочитано: 106 раз

Почему не один?

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

Таблица

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

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

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

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

Альтернатива. Не так давно в CSS появились специальные значения свойства display, которые позволяют имитировать таблицу, используя на самом деле блоки. Например, display: table, display: table-row, display: table-cell. Элементы, к которым применяться эти свойства, начнут вести себя как таблица, ряд таблицы и ячейка соответственно. Нужно скачать, что и этот метод несовершенен, потому что не совсем одинаково поддерживается во всех браузерах. Если вы используете эти свойства, нужно тщательно тестировать на кроссбраузерность.

Фреймы

Когда-то существовал еще один метод верстки, но сегодня о нем практически забыли. Суть верстки с помощью фреймов заключается в том, что окно браузера делится на определенное количество независимых блоков (фреймов), которые формируются тегом frameset. Там указывается путь к html-страничке, которая будет загружена в фрейм.

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

Рис. 1. Такой вот пример сайта на фреймах я нашел в сети. Как вы понимаете, никакой эстетики.

Блоки

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

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

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

Недостатки. Их практически нет. Блоки легко адаптировать, они легко скрываются и изменяются. Контейнеры div и span правильно отображаются даже в старых браузерах. Если же говорить о новых семантических блоках, то у них нет полной поддержки. Впрочем, наверняка уже скоро эта проблема будет решена. Уже сегодня существуют файлы, подключение которых решает проблему поддержки новых элементов в старых браузерах. Метод блочной верстки будет существовать еще долго из-за его исключительного удобства и простоты.

Флексбоксы (flex)

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

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

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

Рис. 2. Свойства flex-элементов делают их более гибкими, чем блоки.

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

Заключение

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

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

Наконец, сегодня мы имеем абсолютно новый способ верстки – элемент flex и его свойства, которые делают его более гибким и современным, чем привычный block. На этом на сегодня все. Не забывайте читать новые статьи на блоге, чтобы знать все о сайтостроении.