Вёрстка веб-страниц

Типовые веб-макеты
Одноколоночный	Двухколоночный	Трёхколоночный

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

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

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

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

История развития верстки веб-страниц

Тим Бернерс-Ли, работая в Европейском институте физики частиц придумал язык, который концентрировался не на средствах оформления, а на логике разметки текста. Некоторое время страницы оформлялись в так называемом «академическом дизайне», например, lib.ru.

С появлением браузера Netscape ситуация изменилась. Разработчики браузера внедряли нестандартные для html теги, призванные улучшить внешний вид документа. Браузер был настолько распространённым, что нестандартные теги не вызывали беспокойств: нет смысла беспокоиться о том, что другие браузеры не поддерживают эти теги, когда только 10 % посетителей пользуется другими браузерами. Сайты перестали разрабатываться в «академическом» стиле. Над дизайном стали задумываться, а значит, потребовалась более сложная верстка.

С середины 1990-х MS Internet Explorer захватывал всё большую часть потребителей. Подходы разработчиков браузеров различались, отличался и набор поддерживаемых технологий. Всё это лишь добавляло неудобств для разработчиков сайтов — увеличивая время разработки сайта.

Во время борьбы за рынок на смену устаревающим и плохо поддерживающим стандарты Netscape 4 и Internet Explorer 4 (IE 4) пришли пятые версии браузеров. IE 5 должна была не просто исправить ошибки предшественника, а улучшить поддержку стандартов CSS. На этот шаг Майкрософт была обречена хотя бы потому, что вошла в группу W3C. В процессе разработки разница в отображении сайтов стала настолько значительной (а часть сайтов вовсе не работали), что разработчикам пришлось создать специальный «режим совместимости». В таком режиме браузер работал «по старинке». Для того, чтобы использовать режим поддержки стандартов необходимо было в html-код добавить элемент <!DOCTYPE>. Идея с режимом совместимости позднее перешла в остальные браузеры (например, Mozilla, Safari, Opera и т. д.). С развитием технологий разновидностей doctype оказалось слишком много, только к пятой версии html W3C предложили использовать короткую запись унифицировав стандарт.

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

Рождается спецификация Cascading Style Sheets Level 2 (CSS2), а потом и CSS2.1, что позволило выносить код оформления блоков в отдельные файлы и использовать на всех страницах сайта и даже кешировать этот файл, а значит ускорять загрузку страниц. Развитие этой технологии и поддержка со стороны браузеров привела к использованию блочной верстки, вместо таблиц.

Этапы верстки

Почему прямоугольники?

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

Как правило верстальщик получает от дизайнера утверждённый дизайн-макет страницы. Далее, верстальщик анализирует полученный макет. Разбивает его на горизонтальные линии (полосы) — «этажи». Далее, каждый «этаж» анализируется отдельно и разбивается на прямоугольные блоки — колонки.

Далее происходит рекурсивный процесс верстки этих отдельных строк, а в них столбцов.

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

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

Критические исправления вносятся в документ и проверка повторяется с самого начала.

Верстка создаётся для шаблонов

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

Ограничения

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

Многообразие форматов

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

Верстка отличается различными подходами к этому вопросу:

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

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

Модульность и виды подходов к вёрстке

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

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

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

Основными инструментами для верстки являются фреймы, таблицы и div. В стандарте HTML5 фреймы больше не поддерживаются, а для работы стали доступны «семантические» блоки: aside, header, footer, nav. Однако, блоки не дают определённых преимуществ, а являются лишь «синтаксическим сахаром».

Табличный подход

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

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

Недостатком табличного подхода является отрисовка (от англ. rendering) таблицы. До тех пор, пока не будет загружен закрывающий тег таблицы она и всё её содержимое не будет показано. Что является критичным при обрыве связи и медленном соединении.

На момент 2011 года табличная верстка считается устаревшей.

Вёрстка слоями

Слой (от имени тега <layer>) — разработка компании Netscape, использованная в браузере Netscape Navigator. Тег позволял показывать или скрывать его содержимое, устанавливать положение относительно окна браузера, накладывать слои друг на друга и включать содержимое блока из файла. В спецификацию HTML не был включён.

Блочная вёрстка

Блочная вёрстка — верстка с помощью тега <div> и описывающего их множество таблицы стилей (CSS). Тег появился вследствие сознательного отказа консорциума «CSS Positioning (CSS-P)» от тега <layer>, чтобы создать аналогичный тег, но с поддержкой CSS в духе остальных тегов. С помощью блочной верстки реализуют концепцию семантической вёрстки.

Верстка фреймами

Верстка фреймами — верстка с помощью одноимённого тега <frame>, который имеет иной способ позиционирования, а внутри себя включает отдельные html-страницы.

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

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

Разметка страницы

По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую).

Например, курсивный текст можно получить как с помощью тега <i>, так и с помощью тега <em>.

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

Иными словами, при первом подходе ориентируются на внешний вид, а во втором — на логическое предназначение.

Преимуществом второго подхода является независимость вёрстки от используемого типа устройств и дизайна веб-страниц.

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

Типы макетов

Все сайты, по макету вёрстки, можно разделить на три принципиальные группы:

• жёстко фиксированные (Rigid fixed),
• адаптивные резиновые (Adaptable fluid),
• расширяемые эластичные (Expandable elastic) макеты.

Фиксированный

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

Фиксированный дизайн

Преимущества:

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

Недостатки:

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

Резиновый

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

Резиновый дизайн

Преимущества:

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

Недостатки:

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

Адаптивный

Адаптивная вёрстка/тип макета — дизайн, который подстраивается (адаптируется) под размер экрана, в том числе может происходить перестройка блоков с одного места на другое, или их замена блоками отображаемыми только при определённом разрешении. Адаптивная вёрстка пришла на смену идеи создания специальных мобильных версий сайта, "живущих" на отдельных поддоменах (например, m.wikipedia.org).

Адаптивная вёрстка

Преимущества:

• Сайт будет отображаться при разных размерах экрана так, как это наиболее удобно пользователю;

Недостатки:

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

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

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

Преимущества и недостатки

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

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

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

Кроме того, использование таблиц для целей оформления не соответствует концепции семантичной вёрстки, подразумевающей использование элементов (тегов) в соответствии с их смыслом, семантическим значением. Элемент <table> и сопутствующие (<tr>,<th>,<td> и др.) предназначены для разметки табличной информации (т. е. такой, в которой имеется смысловая связь между элементами, принадлежащими одному столбцу или одной строке). W3C, как разработчик языка HTML, призывает использовать HTML для логической разметки информации, а оформление (в т. ч. позиционирование различных блоков) описывать отдельно от (X)HTML-разметки (с помощью CSS, например).

Распорки

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

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

Блочная вёрстка

К:Википедия:Статьи без источников (тип: не указан)

Слои представляют собой структурные элементы, которые можно размещать на веб-странице путём наложения их друг на друга с точностью до пикселя. В HTML 4 и XHTML слой — это элемент веб-страницы, созданный с помощью тега <div>, к которому применяется стилевое оформление.

При этом придерживаются следующих принципов:

• Разделение содержимого и оформления;
• Активное применение тега <div>;
• Таблицы применяются только для представления табличных данных.

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

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

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

Более современные версии браузеров стали строже придерживаться стандартов и содержать средства по работе со слоями.

Преимущества и недостатки

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

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

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

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

См.также: Tableless web design

Верстальщик

Вёрсткой веб-страниц занимаются верстальщики. В общем случае в задачу верстальщика входят:

• создание кода веб-страницы с помощью соответствующего языка разметки. Таковыми могут быть, например, HTML, XHTML, XML.
• оформление ранее созданного кода страницы с помощью встроенных средств языка разметки, либо же с помощью каскадных таблиц стилей CSS

Инструменты верстальщика

Верстальщик использует следующее ПО:

• текстовый редактор или редактор HTML для написания и редактирования кода
• графическая программа для так называемой «нарезки» графического макета, полученного верстальщиком от веб-дизайнера

А также иногда прибегает к помощи:

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

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

Валидность HTML-верстки

Валидность HTML-верстки — это её соответствие стандартам организации The World Wide Web Consortium (W3C). Отсутствие ошибок в вёрстке документа — один из основных показателей качества вёрстки. Автоматическая проверка вёрстки на ошибки может быть проведена как с помощью [validator.w3.org/ онлайн сервиса W3C], так и различными программами «валидаторами». Разные версии спецификации HTML предполагают различный синтаксис, поэтому тест верстки на валидность должен обязательно учитывать её Document Type.

Кроссбраузерность

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

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

См. также

• HTML
• HTML5
• CSS
• JavaScript
• Сайт-визитка
• Микроформаты
• Микроданные
• Модульная система вёрстки
• Табличная вёрстка
• Семантическая вёрстка

Литература

• Влад Мержевич. Вёрстка веб-страниц.

Ссылки

• [htmlacademy.ru/demos/1 Прогрессивное улучшение на примере формы входа]

Отрывок, характеризующий Вёрстка веб-страниц

Основной, существенный смысл европейских событий начала нынешнего столетия есть воинственное движение масс европейских народов с запада на восток и потом с востока на запад. Первым зачинщиком этого движения было движение с запада на восток. Для того чтобы народы запада могли совершить то воинственное движение до Москвы, которое они совершили, необходимо было: 1) чтобы они сложились в воинственную группу такой величины, которая была бы в состоянии вынести столкновение с воинственной группой востока; 2) чтобы они отрешились от всех установившихся преданий и привычек и 3) чтобы, совершая свое воинственное движение, они имели во главе своей человека, который, и для себя и для них, мог бы оправдывать имеющие совершиться обманы, грабежи и убийства, которые сопутствовали этому движению.
И начиная с французской революции разрушается старая, недостаточно великая группа; уничтожаются старые привычки и предания; вырабатываются, шаг за шагом, группа новых размеров, новые привычки и предания, и приготовляется тот человек, который должен стоять во главе будущего движения и нести на себе всю ответственность имеющего совершиться.
Человек без убеждений, без привычек, без преданий, без имени, даже не француз, самыми, кажется, странными случайностями продвигается между всеми волнующими Францию партиями и, не приставая ни к одной из них, выносится на заметное место.
Невежество сотоварищей, слабость и ничтожество противников, искренность лжи и блестящая и самоуверенная ограниченность этого человека выдвигают его во главу армии. Блестящий состав солдат итальянской армии, нежелание драться противников, ребяческая дерзость и самоуверенность приобретают ему военную славу. Бесчисленное количество так называемых случайностей сопутствует ему везде. Немилость, в которую он впадает у правителей Франции, служит ему в пользу. Попытки его изменить предназначенный ему путь не удаются: его не принимают на службу в Россию, и не удается ему определение в Турцию. Во время войн в Италии он несколько раз находится на краю гибели и всякий раз спасается неожиданным образом. Русские войска, те самые, которые могут разрушить его славу, по разным дипломатическим соображениям, не вступают в Европу до тех пор, пока он там.
По возвращении из Италии он находит правительство в Париже в том процессе разложения, в котором люди, попадающие в это правительство, неизбежно стираются и уничтожаются. И сам собой для него является выход из этого опасного положения, состоящий в бессмысленной, беспричинной экспедиции в Африку. Опять те же так называемые случайности сопутствуют ему. Неприступная Мальта сдается без выстрела; самые неосторожные распоряжения увенчиваются успехом. Неприятельский флот, который не пропустит после ни одной лодки, пропускает целую армию. В Африке над безоружными почти жителями совершается целый ряд злодеяний. И люди, совершающие злодеяния эти, и в особенности их руководитель, уверяют себя, что это прекрасно, что это слава, что это похоже на Кесаря и Александра Македонского и что это хорошо.
Тот идеал славы и величия, состоящий в том, чтобы не только ничего не считать для себя дурным, но гордиться всяким своим преступлением, приписывая ему непонятное сверхъестественное значение, – этот идеал, долженствующий руководить этим человеком и связанными с ним людьми, на просторе вырабатывается в Африке. Все, что он ни делает, удается ему. Чума не пристает к нему. Жестокость убийства пленных не ставится ему в вину. Ребячески неосторожный, беспричинный и неблагородный отъезд его из Африки, от товарищей в беде, ставится ему в заслугу, и опять неприятельский флот два раза упускает его. В то время как он, уже совершенно одурманенный совершенными им счастливыми преступлениями, готовый для своей роли, без всякой цели приезжает в Париж, то разложение республиканского правительства, которое могло погубить его год тому назад, теперь дошло до крайней степени, и присутствие его, свежего от партий человека, теперь только может возвысить его.
Он не имеет никакого плана; он всего боится; но партии ухватываются за него и требуют его участия.
Он один, с своим выработанным в Италии и Египте идеалом славы и величия, с своим безумием самообожания, с своею дерзостью преступлений, с своею искренностью лжи, – он один может оправдать то, что имеет совершиться.
Он нужен для того места, которое ожидает его, и потому, почти независимо от его воли и несмотря на его нерешительность, на отсутствие плана, на все ошибки, которые он делает, он втягивается в заговор, имеющий целью овладение властью, и заговор увенчивается успехом.
Его вталкивают в заседание правителей. Испуганный, он хочет бежать, считая себя погибшим; притворяется, что падает в обморок; говорит бессмысленные вещи, которые должны бы погубить его. Но правители Франции, прежде сметливые и гордые, теперь, чувствуя, что роль их сыграна, смущены еще более, чем он, говорят не те слова, которые им нужно бы было говорить, для того чтоб удержать власть и погубить его.
Случайность, миллионы случайностей дают ему власть, и все люди, как бы сговорившись, содействуют утверждению этой власти. Случайности делают характеры тогдашних правителей Франции, подчиняющимися ему; случайности делают характер Павла I, признающего его власть; случайность делает против него заговор, не только не вредящий ему, но утверждающий его власть. Случайность посылает ему в руки Энгиенского и нечаянно заставляет его убить, тем самым, сильнее всех других средств, убеждая толпу, что он имеет право, так как он имеет силу. Случайность делает то, что он напрягает все силы на экспедицию в Англию, которая, очевидно, погубила бы его, и никогда не исполняет этого намерения, а нечаянно нападает на Мака с австрийцами, которые сдаются без сражения. Случайность и гениальность дают ему победу под Аустерлицем, и случайно все люди, не только французы, но и вся Европа, за исключением Англии, которая и не примет участия в имеющих совершиться событиях, все люди, несмотря на прежний ужас и отвращение к его преступлениям, теперь признают за ним его власть, название, которое он себе дал, и его идеал величия и славы, который кажется всем чем то прекрасным и разумным.
Как бы примериваясь и приготовляясь к предстоящему движению, силы запада несколько раз в 1805 м, 6 м, 7 м, 9 м году стремятся на восток, крепчая и нарастая. В 1811 м году группа людей, сложившаяся во Франции, сливается в одну огромную группу с серединными народами. Вместе с увеличивающейся группой людей дальше развивается сила оправдания человека, стоящего во главе движения. В десятилетний приготовительный период времени, предшествующий большому движению, человек этот сводится со всеми коронованными лицами Европы. Разоблаченные владыки мира не могут противопоставить наполеоновскому идеалу славы и величия, не имеющего смысла, никакого разумного идеала. Один перед другим, они стремятся показать ему свое ничтожество. Король прусский посылает свою жену заискивать милости великого человека; император Австрии считает за милость то, что человек этот принимает в свое ложе дочь кесарей; папа, блюститель святыни народов, служит своей религией возвышению великого человека. Не столько сам Наполеон приготовляет себя для исполнения своей роли, сколько все окружающее готовит его к принятию на себя всей ответственности того, что совершается и имеет совершиться. Нет поступка, нет злодеяния или мелочного обмана, который бы он совершил и который тотчас же в устах его окружающих не отразился бы в форме великого деяния. Лучший праздник, который могут придумать для него германцы, – это празднование Иены и Ауерштета. Не только он велик, но велики его предки, его братья, его пасынки, зятья. Все совершается для того, чтобы лишить его последней силы разума и приготовить к его страшной роли. И когда он готов, готовы и силы.
Нашествие стремится на восток, достигает конечной цели – Москвы. Столица взята; русское войско более уничтожено, чем когда нибудь были уничтожены неприятельские войска в прежних войнах от Аустерлица до Ваграма. Но вдруг вместо тех случайностей и гениальности, которые так последовательно вели его до сих пор непрерывным рядом успехов к предназначенной цели, является бесчисленное количество обратных случайностей, от насморка в Бородине до морозов и искры, зажегшей Москву; и вместо гениальности являются глупость и подлость, не имеющие примеров.
Нашествие бежит, возвращается назад, опять бежит, и все случайности постоянно теперь уже не за, а против него.
Совершается противодвижение с востока на запад с замечательным сходством с предшествовавшим движением с запада на восток. Те же попытки движения с востока на запад в 1805 – 1807 – 1809 годах предшествуют большому движению; то же сцепление и группу огромных размеров; то же приставание серединных народов к движению; то же колебание в середине пути и та же быстрота по мере приближения к цели.
Париж – крайняя цель достигнута. Наполеоновское правительство и войска разрушены. Сам Наполеон не имеет больше смысла; все действия его очевидно жалки и гадки; но опять совершается необъяснимая случайность: союзники ненавидят Наполеона, в котором они видят причину своих бедствий; лишенный силы и власти, изобличенный в злодействах и коварствах, он бы должен был представляться им таким, каким он представлялся им десять лет тому назад и год после, – разбойником вне закона. Но по какой то странной случайности никто не видит этого. Роль его еще не кончена. Человека, которого десять лет тому назад и год после считали разбойником вне закона, посылают в два дня переезда от Франции на остров, отдаваемый ему во владение с гвардией и миллионами, которые платят ему за что то.


Движение народов начинает укладываться в свои берега. Волны большого движения отхлынули, и на затихшем море образуются круги, по которым носятся дипломаты, воображая, что именно они производят затишье движения.
Но затихшее море вдруг поднимается. Дипломатам кажется, что они, их несогласия, причиной этого нового напора сил; они ждут войны между своими государями; положение им кажется неразрешимым. Но волна, подъем которой они чувствуют, несется не оттуда, откуда они ждут ее. Поднимается та же волна, с той же исходной точки движения – Парижа. Совершается последний отплеск движения с запада; отплеск, который должен разрешить кажущиеся неразрешимыми дипломатические затруднения и положить конец воинственному движению этого периода.
Человек, опустошивший Францию, один, без заговора, без солдат, приходит во Францию. Каждый сторож может взять его; но, по странной случайности, никто не только не берет, но все с восторгом встречают того человека, которого проклинали день тому назад и будут проклинать через месяц.
Человек этот нужен еще для оправдания последнего совокупного действия.
Действие совершено. Последняя роль сыграна. Актеру велено раздеться и смыть сурьму и румяны: он больше не понадобится.
И проходят несколько лет в том, что этот человек, в одиночестве на своем острове, играет сам перед собой жалкую комедию, мелочно интригует и лжет, оправдывая свои деяния, когда оправдание это уже не нужно, и показывает всему миру, что такое было то, что люди принимали за силу, когда невидимая рука водила им.
Распорядитель, окончив драму и раздев актера, показал его нам.
– Смотрите, чему вы верили! Вот он! Видите ли вы теперь, что не он, а Я двигал вас?
Но, ослепленные силой движения, люди долго не понимали этого.
Еще большую последовательность и необходимость представляет жизнь Александра I, того лица, которое стояло во главе противодвижения с востока на запад.
Что нужно для того человека, который бы, заслоняя других, стоял во главе этого движения с востока на запад?
Нужно чувство справедливости, участие к делам Европы, но отдаленное, не затемненное мелочными интересами; нужно преобладание высоты нравственной над сотоварищами – государями того времени; нужна кроткая и привлекательная личность; нужно личное оскорбление против Наполеона. И все это есть в Александре I; все это подготовлено бесчисленными так называемыми случайностями всей его прошедшей жизни: и воспитанием, и либеральными начинаниями, и окружающими советниками, и Аустерлицем, и Тильзитом, и Эрфуртом.
Во время народной войны лицо это бездействует, так как оно не нужно. Но как скоро является необходимость общей европейской войны, лицо это в данный момент является на свое место и, соединяя европейские народы, ведет их к цели.
Цель достигнута. После последней войны 1815 года Александр находится на вершине возможной человеческой власти. Как же он употребляет ее?
Александр I, умиротворитель Европы, человек, с молодых лет стремившийся только к благу своих народов, первый зачинщик либеральных нововведений в своем отечестве, теперь, когда, кажется, он владеет наибольшей властью и потому возможностью сделать благо своих народов, в то время как Наполеон в изгнании делает детские и лживые планы о том, как бы он осчастливил человечество, если бы имел власть, Александр I, исполнив свое призвание и почуяв на себе руку божию, вдруг признает ничтожность этой мнимой власти, отворачивается от нее, передает ее в руки презираемых им и презренных людей и говорит только:
– «Не нам, не нам, а имени твоему!» Я человек тоже, как и вы; оставьте меня жить, как человека, и думать о своей душе и о боге.

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


Свадьба Наташи, вышедшей в 13 м году за Безухова, было последнее радостное событие в старой семье Ростовых. В тот же год граф Илья Андреевич умер, и, как это всегда бывает, со смертью его распалась старая семья.
События последнего года: пожар Москвы и бегство из нее, смерть князя Андрея и отчаяние Наташи, смерть Пети, горе графини – все это, как удар за ударом, падало на голову старого графа. Он, казалось, не понимал и чувствовал себя не в силах понять значение всех этих событий и, нравственно согнув свою старую голову, как будто ожидал и просил новых ударов, которые бы его покончили. Он казался то испуганным и растерянным, то неестественно оживленным и предприимчивым.
Свадьба Наташи на время заняла его своей внешней стороной. Он заказывал обеды, ужины и, видимо, хотел казаться веселым; но веселье его не сообщалось, как прежде, а, напротив, возбуждало сострадание в людях, знавших и любивших его.
После отъезда Пьера с женой он затих и стал жаловаться на тоску. Через несколько дней он заболел и слег в постель. С первых дней его болезни, несмотря на утешения докторов, он понял, что ему не вставать. Графиня, не раздеваясь, две недели провела в кресле у его изголовья. Всякий раз, как она давала ему лекарство, он, всхлипывая, молча целовал ее руку. В последний день он, рыдая, просил прощения у жены и заочно у сына за разорение именья – главную вину, которую он за собой чувствовал. Причастившись и особоровавшись, он тихо умер, и на другой день толпа знакомых, приехавших отдать последний долг покойнику, наполняла наемную квартиру Ростовых. Все эти знакомые, столько раз обедавшие и танцевавшие у него, столько раз смеявшиеся над ним, теперь все с одинаковым чувством внутреннего упрека и умиления, как бы оправдываясь перед кем то, говорили: «Да, там как бы то ни было, а прекрасжейший был человек. Таких людей нынче уж не встретишь… А у кого ж нет своих слабостей?..»
Именно в то время, когда дела графа так запутались, что нельзя было себе представить, чем это все кончится, если продолжится еще год, он неожиданно умер.
Николай был с русскими войсками в Париже, когда к нему пришло известие о смерти отца. Он тотчас же подал в отставку и, не дожидаясь ее, взял отпуск и приехал в Москву. Положение денежных дел через месяц после смерти графа совершенно обозначилось, удивив всех громадностию суммы разных мелких долгов, существования которых никто и не подозревал. Долгов было вдвое больше, чем имения.
Родные и друзья советовали Николаю отказаться от наследства. Но Николай в отказе от наследства видел выражение укора священной для него памяти отца и потому не хотел слышать об отказе и принял наследство с обязательством уплаты долгов.
Кредиторы, так долго молчавшие, будучи связаны при жизни графа тем неопределенным, но могучим влиянием, которое имела на них его распущенная доброта, вдруг все подали ко взысканию. Явилось, как это всегда бывает, соревнование – кто прежде получит, – и те самые люди, которые, как Митенька и другие, имели безденежные векселя – подарки, явились теперь самыми требовательными кредиторами. Николаю не давали ни срока, ни отдыха, и те, которые, по видимому, жалели старика, бывшего виновником их потери (если были потери), теперь безжалостно накинулись на очевидно невинного перед ними молодого наследника, добровольно взявшего на себя уплату.
Ни один из предполагаемых Николаем оборотов не удался; имение с молотка было продано за полцены, а половина долгов оставалась все таки не уплаченною. Николай взял предложенные ему зятем Безуховым тридцать тысяч для уплаты той части долгов, которые он признавал за денежные, настоящие долги. А чтобы за оставшиеся долги не быть посаженным в яму, чем ему угрожали кредиторы, он снова поступил на службу.
Ехать в армию, где он был на первой вакансии полкового командира, нельзя было потому, что мать теперь держалась за сына, как за последнюю приманку жизни; и потому, несмотря на нежелание оставаться в Москве в кругу людей, знавших его прежде, несмотря на свое отвращение к статской службе, он взял в Москве место по статской части и, сняв любимый им мундир, поселился с матерью и Соней на маленькой квартире, на Сивцевом Вражке.
Наташа и Пьер жили в это время в Петербурге, не имея ясного понятия о положении Николая. Николай, заняв у зятя деньги, старался скрыть от него свое бедственное положение. Положение Николая было особенно дурно потому, что своими тысячью двумястами рублями жалованья он не только должен был содержать себя, Соню и мать, но он должен был содержать мать так, чтобы она не замечала, что они бедны. Графиня не могла понять возможности жизни без привычных ей с детства условий роскоши и беспрестанно, не понимая того, как это трудно было для сына, требовала то экипажа, которого у них не было, чтобы послать за знакомой, то дорогого кушанья для себя и вина для сына, то денег, чтобы сделать подарок сюрприз Наташе, Соне и тому же Николаю.
Соня вела домашнее хозяйство, ухаживала за теткой, читала ей вслух, переносила ее капризы и затаенное нерасположение и помогала Николаю скрывать от старой графини то положение нужды, в котором они находились. Николай чувствовал себя в неоплатном долгу благодарности перед Соней за все, что она делала для его матери, восхищался ее терпением и преданностью, но старался отдаляться от нее.
Он в душе своей как будто упрекал ее за то, что она была слишком совершенна, и за то, что не в чем было упрекать ее. В ней было все, за что ценят людей; но было мало того, что бы заставило его любить ее. И он чувствовал, что чем больше он ценит, тем меньше любит ее. Он поймал ее на слове, в ее письме, которым она давала ему свободу, и теперь держал себя с нею так, как будто все то, что было между ними, уже давным давно забыто и ни в каком случае не может повториться.
Положение Николая становилось хуже и хуже. Мысль о том, чтобы откладывать из своего жалованья, оказалась мечтою. Он не только не откладывал, но, удовлетворяя требования матери, должал по мелочам. Выхода из его положения ему не представлялось никакого. Мысль о женитьбе на богатой наследнице, которую ему предлагали его родственницы, была ему противна. Другой выход из его положения – смерть матери – никогда не приходила ему в голову. Он ничего не желал, ни на что не надеялся; и в самой глубине души испытывал мрачное и строгое наслаждение в безропотном перенесении своего положения. Он старался избегать прежних знакомых с их соболезнованием и предложениями оскорбительной помощи, избегал всякого рассеяния и развлечения, даже дома ничем не занимался, кроме раскладывания карт с своей матерью, молчаливыми прогулками по комнате и курением трубки за трубкой. Он как будто старательно соблюдал в себе то мрачное настроение духа, в котором одном он чувствовал себя в состоянии переносить свое положение.


В начале зимы княжна Марья приехала в Москву. Из городских слухов она узнала о положении Ростовых и о том, как «сын жертвовал собой для матери», – так говорили в городе.
«Я и не ожидала от него другого», – говорила себе княжна Марья, чувствуя радостное подтверждение своей любви к нему. Вспоминая свои дружеские и почти родственные отношения ко всему семейству, она считала своей обязанностью ехать к ним. Но, вспоминая свои отношения к Николаю в Воронеже, она боялась этого. Сделав над собой большое усилие, она, однако, через несколько недель после своего приезда в город приехала к Ростовым.
Николай первый встретил ее, так как к графине можно было проходить только через его комнату. При первом взгляде на нее лицо Николая вместо выражения радости, которую ожидала увидать на нем княжна Марья, приняло невиданное прежде княжной выражение холодности, сухости и гордости. Николай спросил о ее здоровье, проводил к матери и, посидев минут пять, вышел из комнаты.
Когда княжна выходила от графини, Николай опять встретил ее и особенно торжественно и сухо проводил до передней. Он ни слова не ответил на ее замечания о здоровье графини. «Вам какое дело? Оставьте меня в покое», – говорил его взгляд.