Рецепты HTML

Особенности верстки веб-страниц

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

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

Все многообразие дизайна можно свести к двум типам: "фиксированный" и "резиновый" дизайн.
При "фиксированном дизайне" макет страницы создается на основе таблиц (слоев) назначенной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 640х480 пикселей размер таблицы следует брать не более 619 пикселей. Для всех пользователей сайт, построенный на таком макете, будет отображаться корректно, но при больших разрешениях оказывается слишком много пустого места (www.lenta.ru). Поскольку наиболее популярным среди пользователей Интернета является разрешение 800х600, создатели сайтов ориентируются именно на него и делают таблицы шириной 700-770 пикселей.

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

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

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

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

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

Количество используемых для текста шрифтов ограничено
Разумеется, можно указать любой шрифт, установленный у вас в операционной системе и он будет корректно показываться на данном компьютере. Но никто при этом не гарантирует, что точно такой же шрифт будет находиться на удаленном компьютере пользователя. Поэтому для совместимости используется всего несколько шрифтов, которые встречаются повсеместно: Arial, Times, Verdana, Courier, Comic Sans MS. В случае если хочется воспользоваться понравившимся шрифтом, следует создать картинку в графическом редакторе, содержащую надпись.

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