Что такое верстка? Верстка страниц с использованием CSS фреймворков. Рецепты для решения проблем с идентичностью отображения
Понятие термина «верстка»
Вёрстка -- монтаж полос оригинал-макета из составных элементов: набранного текста, заголовков, таблиц, иллюстраций, украшений и пр. Также результат этого процесса, то есть готовые полосы.
В эпоху докомпьютерного набора верстка производилась посредством ручного набора текста строками на линотипе или монотипе, и иллюстраций-клише. Текстовые строки и иллюстрации обкладывались пробельными материалами и линейками. Современная верстка осуществляется как в стандартных программах, таких как Microsoft Word, так и в Ventura Publisher, Adobe PageMaker, Adobe FrameMaker, CorelDraw, Microsoft Publisher и QuarkXPress, Adobe InDesign.
Виды верстки
Условно верстку можно классифицировать по следующим признакам:
1. По виду издания:
Книжно-журнальная верстка
Под книжно-журнальной продукцией принято понимать многополосные (многостраничные) печатные издания. В эту группу полиграфических изданий помимо книг и журналов входят:
- -- годовые отчёты;
- -- рекламные брошюры;
- -- каталоги;
- -- художественные альбомы.
Профессиональная вёрстка книжно-журнальной продукции является одним из залогов успеха и популярности издания. Кроме того, это достаточно трудоёмкий, кропотливый, творческий процесс, который по праву считается уделом специалистов самого высокого уровня.
Вёрстка книжно-журнальной продукции осуществляется в соответствии с правилами книжной вёрстки. Однако при допечатной подготовке богато иллюстрированных журналов рекомендуется применять особые приёмы и методы вёрстки.
Правильно свёрстанные полосы должны иметь абсолютно точные размеры, как по ширине (формату строки), так и по высоте; не должны содержать каких-либо перекосов или «распоров»; сохранять единообразие (одинаковый вид полос, содержащих одинаковые элементы) и пригодность (совпадение чётных и нечётных полос по общим размерам) вёрстки по всему изданию. текст газетный верстка конфигурация
Вёрстка книжно-журнальной продукции ещё на допечатном этапе позволяет увидеть логическую структуру и визуальную композицию страниц издания, разделить компоненты текста на главные и второстепенные. Помимо этого, она способствует компактному расположению материалов и рациональному использованию полезной площади бумаги.
Грамотно выполненная вёрстка газет и журналов позволяет получить печатное издание, которое привлечёт внимание и вызовет неподдельный интерес у большого количества людей. К отличительным чертам такой продукции можно отнести: хорошую удобочитаемость; чёткие и красочные иллюстрации; продуманность и единство стилевого решения; привязанность всех графических элементов к концепции издания. В конечном итоге вёрстка книжно-журнальной продукции способствует приданию ей привлекательного, выразительного и запоминающегося внешнего вида. Верстка журналов, особенно содержащих большое число иллюстраций, имеет отдельные характерные особенности, но в целом выполняется по тем же правилам, что и книжная.
Газетная верстка
Верстка газет значительно отличается от книжно-журнальной. Основной отличительной чертой верстки газет является необходимость выполнения ее в сжатые сроки, связанная с периодичностью выхода изданий. Это обуславливает отличие газетной верстки от книжно-журнальной в сторону смягчения некоторых требований. Газетной верстке присущи более свободные правила переносов и расположения текстового и иллюстративного материала.
Газета начинается с заголовочной части, которая может занимать всю ширину полосы или ее часть. Основные ее элементы: название газеты; постоянный призыв; название организации (органа), помещаемое под названием газеты; календарные сведения и номер выпуска. Название газеты постоянно и располагается в верхнем левом углу первой полосы или в верхней строке первой полосы. Название отделено от текста чаще всего жирной линейкой. Календарные сведения и номер выпуска размещают под названием газеты или в рамке справа.
Передовую статью помещают в левой верхней части первой полосы. Ее набирают на наибольший формат и заверстывают на одну или несколько колонок. Передовую статью отбивают линейкой от другого материала или заключают в рамку.
Подборка - материал однородный по теме; его размещают на нескольких колонках и объединяют одним общим заголовком - шапкой. Подборки могут быть тематическими и разнотемными. В подборку чаще всего объединяют небольшие статьи информационного характера (заметки, интервью, репортажи). Подборку заверстывают вверху или внизу полосы и четко отделяют от другого материала. Несколько подборок заключают в рамку. Если в подборке много материала, ее заверстывают на развороте под общей шапкой.
Окно - статья или изображение, прямоугольно заверстанные в верхнем правом углу полосы. Окно отбивают от текста снизу и сбоку жирными линейками.
Фонарь - статья (или изображение), заверстанные в центре или внизу полосы на две-три колонки. Высота такой статьи должна быть больше ее ширины; статью отделяют от другого материала жирными или фигурными линейками.
Подвал - статья, размещенная в нескольких, а чаще всего во всех колонках внизу полосы. Отделяют подвал от предыдущего текста линейкой; заголовок подвала располагают чаще всего над первыми двумя-тремя колонками. Высота подвала должна быть не больше 1/3 и не меньше 1/4 высоты полосы.
Стояк - статья, заверстанная на две-три колонки по всей высоте полосы.
Уголок - статья или иллюстрация, заверстанные в одном из углов полосы, за исключением правого верхнего. Уголок отделяют от другого материала линейками.
Чердак - крупный материал, подобный подвалу, но размещенный вверху полосы и заверстанный на всю ширину полосы или на несколько колонок. Его отбивают от последующего текста жирными линейками или заключают в рамку.
Подверстка - материал, которым заполняют пустое место под статьей, тематически с ним не связанной.
Объявления заверстывают обычно на последней полосе.
Колонтитулы располагают либо на весь формат полосы, либо внизу с заверсткой в углу на формат одной колонки: на четных страницах - в первой колонке, на нечетных - в последней. Колонтитул содержит название газеты, ее номер, дату и колонцифру.
Акцидентная верстка (акцидентный или мелочный набор)
Акцидентной версткой называют верстку мелких самостоятельных заказов, например, пригласительных билетов, бланков, афиш, рекламных модулей. Также к акцидентной верстке относится верстка отдельных элементов книг и журналов: наборные обложки и суперобложки, титульные листы (титулы), шмуцтитулы, шапки, инициалы, наборные рамки и колонлинейки, книжные объявления, в журнальных изданиях титульный, газетно-журнальные объявления, реклама. При такой верстке в одной форме сочетаются различные шрифты и графические материалы.
Все виды акцидентных работ обычно делят на три группы: издательская акцидентная продукция, в том числе книжно-журнальная акциденция и особые виды изданий - проспекты, буклеты, каталоги и другие; афишно-плакатная продукция и акцидентная продукция малых форм - пригласительные билеты, бланки, товаросопроводительная документация, визитные карточки и многие другие виды "мелочей".
Для профессионального оформления сайтов необходимо знать не только основы CSS, но и понимать, как работает браузер, знать правила, которым он следует. Именно они определяют основные способы и приёмы вёрстки.
Только имея такое понимание, можно выбрать наиболее подходящий способ решения задачи из нескольких возможных, с учётом их достоинств и ограничений. Только так можно наиболее полно задействовать возможности браузера и предупредить потенциальные ошибки.
Существует немало описаний различных приёмов. В этой статье предпринята попытка собрать вместе самые важные приёмы и систематизировать их, чтобы дать представление как об основных возможностях, так и об ограничениях CSS, актуальных в настоящее время.
Статья рассчитана на людей, которые знакомы с основами HTML и CSS и имеют представление об основных свойствах и базовых принципах работы каскадных таблиц стилей.
Таблица
Исторически, первым и единственным способом раскладки страницы были таблицы. Описанию поведения таблиц посвящена целая глава в спецификации CSS 2.1. Несмотря на такой объем, некоторые моменты описаны скудно или вообще не определены и отданы на усмотрение браузеров.
Достоинства и недостатки
Таблица служит для отображения упорядоченных данных в строках и столбцах, имеющих смысловую связь по горизонтали или вертикали. Отсюда следует главное достоинство: ячейки таблиц выравниваются по сетке, что позволяет простым и очевидным образом создать модульную сетку .
Это неотъемлемое свойство таблиц позволяет заполнить плоскость окна браузера и создавать «резиновые сайты». Но, как при малых, так и больших размерах окна просмотра браузера структура таблицы не меняется, она не может гибко адаптироваться под доступное пространство.
При использовании таблицы для раскладки, то есть размещения в сетке данных, не имеющих смысловой связи, нарушается семантичность. Применение таких таблиц ухудшает доступность для людей, использующих специальные программы, и снижает положение в поисковой выдаче, поскольку поисковому движку, предположительно, сложнее разобраться в структуре страницы. Как следствие, сайт работает менее эффективно.
Особенности
Ячейки таблиц идут в коде строго друг за другом, слева направо или справа налево в зависимости от направления языка, заданного CSS-свойством direction или его аналогом в HTML, атрибутом dir .
Если, к примеру, требуется, чтобы основное содержимое в центральной колонке шло в начале, перед содержимым других колонок в исходном HTML-коде, таблица - неподходящее решение.
Структура таблицы довольно сложна, она описывается большим количеством тегов, что приводит к усложнению исходного кода. Негативный эффект проявляется ещё больше, когда несколько таблиц вложены друг в друга.
Имитация
Появившаяся в CSS 2.1 группа свойств display: table-* позволяет создать таблицу из произвольных элементов, имеющих соответствующую структуру.
Согласно спецификации, достаточно только одного объявления вроде display: table или display: table-cell - недостающие элементы должны автоматически достраиваться браузером.
Однако будет надёжнее создать минимальную структуру таблица > ряд > ячейка, аналогично обязательным тегам
, с соответствующими значениями свойства display: table , table-row и table-cell .
В противном случае может возникнуть нерегулярно проявляющаяся ошибка, замеченная в Firefox и браузерах на основе Webkit, когда ряд таблицы без элемента с display: table-cell случайным образом разбивается на несколько ячеек. Возможное объяснение может состоять в попадании границы сетевых пакетов среди ячеек при передаче HTML-кода. Таким образом, блочная разметка с display: table-* почти не отличается от обычной HTML-таблицы ни в чем, кроме имён тегов, однако обычная таблица лучше поддерживается браузерами (а именно в Internet Explorer 7 и ниже) и имеет больше возможностей, таких как объединение ячеек. Стоит отметить, что, несмотря на необязательность тега |
Шапка | |
Контент | Меню |
Подвал |
Код блочной верстки
Шапка
Контент
Результат получается одинаковый:
Даже для самого простого макета уже видна разница в коде, а с увеличением элементов разница будет расти в геометрической прогрессии.
Программы для верстки
Чтобы сверстать простую веб-страницу можно обойтись и обычным блокнотом. Для более сложных проектов не обойтись без специальных html-редакторов. Они подсвечивают код, что значительно упрощает процесс верстки. В профессиональной среде используют следующие программы:
- Notepad++
- Macromedia Dreamweaver
- Microsoft FrontPage
- CoffeeCup HTML Editor
- NetBeans
Редакторы html-страниц разделяют на обычные и визуальные. Используя визуальный редактор, сверстать страницу сможет даже неопытный пользователь. Но стоит понимать, что визуальный редактор дописывает много лишнего кода (мусора) и лишает верстальщика возможности использовать гибкость языка html на 100%.
Какие проблемы возникают при верстке?
Основная проблема при верстке сайтов - не одинаковое отображение одного и того же документа в разных браузерах. Сверстав качественно страницу для Firefox, она может отображаться немного по-другому в Opera, и полностью разъехаться в Internet Explorer.
Причина в том, что каждый браузер разрабатывают разные компании и используют различные технологии и правила. Попытки прийти к единому стандарту уже делаются, но до конечного результата еще далеко.
Часто верстке не уделяют должного внимания. С таким подходом можно загубить даже самый креативный дизайн и сложный функционал сайта. Если посетители вашего личного блога это вам простят, то разваливающаяся верстка корпоративного сайта или магазина серьезно отразится на имидже компании. Самое верное решение - доверить работу профессионалам.