Вёрстка в издательском деле и полиграфии — процесс формирования страниц (полос) издания путём компоновки текстовых и графических элементов, а также результат этого процесса, то есть, собственно, полосы.
Вёрстка в сфере создания сайтов является неотъемлеммой частью этого процесса. Этап верстки идет непосредственно после создания макета сайта и перед этапом привязки к CMS (система управления сайтом), а иногда служит конечным этапом работ, если в сайт не планируется интеграция системы управления.
Рассмотрим последовательность работы по верстке сайта:
* Нарезка дизайн-макета на отдельные графические элементы, отделение фона сайта от изображений.
* Написание кода на языке HTML и CSS (css-верстка).
* Тестирование сайта в основных броузерах (Internet Explorer, FireFox, Opera, Safari, Google Chrome) и при различных разрешениях (стандартно принятые разрешения по ширине — 1024px, 1280px, 1600px, разрешение по высоте не имеет принципиального значения).
Виды верстки
Верстка различается по видам изданий, в которых она используется.
Книжно-журнальная верстка соответствует обычным правилам книжной верстки, хотя имеются специфические приемы для некоторых видов иллюстрированных журналов.
Газетная верстка имеет существенное отличие от книжно-журнальной: для нее характерно иное расположение текста и иллюстраций, а также довольно свободные правила переносов.
Акцидентная верстка предназначена для верстки отдельных небольших полиграфических продуктов: объявлений, бланков, рекламных листовок, афиш. Такая верстка именуется также мелочным набором.
Что понимают под единообразием вёрстки
Единообразие вёрстки — это одинаковый характер вёрстки всех полос издания, имеющих одинаковые элементы, в частности: равенство всех спусков на начальных полосах, примерное равенство отбивок всех заголовков и подзаголовков различных рангов, примечаний в тексте, сносок, подписей под рисунками, одинаковый способ завёрстки однотипных иллюстраций (вразрез или в оборку), одинаковая отбивка колонтитулов и колонцифр, сигнатур и норм и т. п.
Обычное расположение отдельных элементов издания при вёрстке
Обычный порядок вёрстки всех элементов издания (если они имеются) может быть следующим:
* авантитул или издательская марка на первой полосе
* контртитул или фронтиспис — на второй полосе
* титул — на третьей полосе (если все ранее перечисленные элементы отсутствуют, то на первой)
* аннотация, а иногда и выпускные данные на обороте титула; посвящение или эпиграф ко всей книге — пятая (третья) полоса с пустым оборотом
* на следующей нечётной полосе может (по оригиналу) размещаться содержание или оглавление; за ним — снова с нечётной полосы — вступительная статья, далее (опять с нечётной полосы) — предисловия; после всех предисловий на нечётной полосе — введение или (при его отсутствии) начало текста.
* По окончании основного текста обычно следуют: послесловие, заключительная статья (желательно с нечётной полосы), затекстовые примечания и комментарии (обычно с нечётной полосы со спуском, а иногда и со шмуцтитулом), приложения (всегда с нечётной полосы со спуском, при наличии шмуцтитула — можно без спуска), списки литературы со спуском на отдельной полосе, указатели — также с новой полосы со спуском, оглавление или содержание (с новой полосы со спуска) и, наконец, выпускные данные на отдельной полосе (по оптической середине или снизу) или на последней полосе оглавления (внизу на полный формат).
* После выпускных данных иногда можно разместить книжные объявления или полосы «для заметок», но чаще их помещают после оглавления до выпускных данных.
Вёрстка веб-страниц
Вёрстка веб-страниц — процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе, а также результат этого процесса, то есть собственно веб-страницы.
Вёрсткой веб-страниц занимаются верстальщики веб-страниц.
Основные идеологии вёрстки веб-страниц
По принципам использования средств разметки HTML различают логическую разметку и презентационную разметку, когда элементы разметки используются не в соответствии с той семантикой, которую они несут, а ради внешних эффектов, которые они добавляют фрагментам текста.
Часто с первой манерой разметки отождествляют блочную вёрстку, а со второй — более традиционную, обкатанную, но и чаще критикуемую табличную вёрстку.
Вёрстка с помощью слоёв
Слои представляют собой структурные элементы, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Скрипты позволяют изменять параметры слоя динамически. Это дает возможность создавать на веб-странице разные эффекты, такие как выпадающие меню, игры, разворачивающиеся баннеры, плавающие окна и др.
До недавнего времени в качестве основных инструментов верстки выступали фреймы и таблицы. Фреймы, ввиду их некоторого несоответствия принципам веб-дизайна и навигации, были объявлены злом и подвергнуты остракизму. Любое использование фреймов, за редким исключением (например, в чатах), вызывало возгласы о том, что веб-мастер недостаточно профессионален и не понимает всех тонкостей создания сайтов. Что оставалось делать в этой ситуации верстальщикам? Только переходить к таблицам. Поэтому вёрстка с использованием таблиц на долгое время стала определенным стандартом.
И как только таблицы не применяются — и рамки с помощью них делают, и модульные сетки задают, и цветной фон создают, и элементы выравнивают по разным краям. Конечно, это противоречит идеологии разделения оформления и содержания, но о такой «мелочи» никто и не вспоминает.
Ситуация поменялась с выходом новых версий браузеров, которые стали придерживаться современных стандартов и содержать средства по работе со слоями. Вот тогда и заговорили о новой системе верстки сайтов, которая позволяет забыть о таблицах или использовать их только по прямому назначению.
Преимущества и недостатки слоёв
Свойства слоя удобно задавать и настраивать через стили. Возможности css гораздо шире, чем традиционного html и расширяют спектр оформительских изысков. Использование стилевых таблиц позволяет несложными методами получить компактный и эффективный код. Справедливости ради, отметим, что данное утверждение можно отнести и к любым другим элементам веб-страницы, а не только к стилям.
Слой можно перемещать, прятать и показывать без перезагрузки всей страницы. С помощью всего нескольких инструкций можно создавать разные эффекты, вроде выпадающих меню, всплывающих подсказок, движущихся элементов и другое. Добавление подобных трюков хотя и увеличивает объем кода, но не требует повторной загрузки и обновления документа и происходит без лишних задержек со стороны браузера. Кроме того, выразительность и привлекательность сайта во многом повышается благодаря использованию подобных приемов со слоями.
Слои можно накладывать друг на друга, что упрощает размещение элементов на веб-странице и предоставляет больше возможностей при верстке.
Слои можно размещать в окне браузера с точностью до пиксела. Положение слоя задается двумя координатами относительно любого угла окна браузера, родительского элемента или документа.
Слои по сравнению с таблицами отображаются быстрее. Более высокая скорость достигается за счет компактного кода и того, что отображение содержимого слоя происходит по мере его загрузки. Правда это может привести к «скачкам» элеменов страницы по мере их подгрузки.
Если сравнивать между собой скорость загрузки веб-страниц, созданных с применением таблиц и слоев, то у табличной вёрстки имеются определённые недостатки. Содержимое таблицы загружается медленнее, чем информация в слоях
Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на локальный компьютер. Это имеет смысл, если принять во внимание предназначение таблиц. Первоначально они были задуманы для хранения табличных данных, а их лучше всего показывать сразу целиком, а не беспорядочно по мере загрузки. При использовании таблицы в качестве каркаса для размещения элементов веб-страницы, её исходное преимущество обращается в недостаток, поскольку приводит к задержке вывода содержимого. Следует учитывать, также, и растущий объем веб-страниц при активном использовании таблиц, особенно в случае их вложенности друг в друга. Всё это приводит к тому, что табличная верстка вызывает ненужные задержки вывода информации в браузере.
Работа с таблицами менее гибкая, чем со стилями
При использовании таблиц широко известным приемом стало применение распорок — прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определённой ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности и помещали в ячейку маленький прозрачный рисунок в формате GIF.
Подобные техники не только усложняют разработку универсальных веб-страниц, но и ведут к снижению скорости загрузки документа. Браузеру в этом случае приходится загружать элементы, которые не видны пользователю и, по сути, ему не нужны, но они входят в общий трафик сайта.
Стили, на которых основана работа слоев, освобождают голову разработчика от подобных забот. Управлять любыми объектами веб-страницы с помощью стилей проще, легче и эффективней.
Усложненная верстка при большом количестве таблиц
Данная проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Macromedia Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.
Не следует считать, что использование слоев это панацея от всех бед. К сожалению, стандарты работы со слоями ещё не до конца устоялись и браузеры по-разному реализуют определённые возможности. Из-за этого основная сложность верстки слоями — создать универсальный код, который бы одинаково и без ошибок работал в разных браузерах. Приходится вникать в тонкости поведения браузеров при использовании различных элементов стилей, что возможно только при большом опыте работы или массе свободного времени.
