Юзабилити: как сделать сайт удобным

Основные способы верстки и их особенности

Верстка — это размещение в поле страницы, предоставляемом браузером, подготовленной информации либо создание заготовки для последующего заполнения. Верстка Web-сайта является не­отъемлемым этапом его создания и осуществляется с помощью языка HTML.

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

5.2.1. Текстовая верстка

Текстовая верстка — верстка без какого бы то ни было размеще­ния Содержимого, это лишь само содержимое (рис. 5.1).

Address

Раздел 1 :: Раздел 2 :: Раздел 3 :: Раздел 4 ::

Текстовая верстка

ВНИМАНИЕ! Данный сайт находится в разработке

Текстовая верстка

Текстовая верстка - это верстка без использования каких бы то ни было элементов поддержки размещения содержимого, это лишь само содержимое. Этот способ верстки в качестве главного ; ] способа верстки именно самой страницы используется достаточно редко. Если быть точным, это вообще не способ верста. Все получается "само по себе", т. е. стандартными средствами HTML. Вы почти "не управляете" поведением содержимого. Попробуйте переименовать простой текстовый в файл с расширением HTML и поймете, что я имею в виду под текстовой версткой. При таком варианте возможно использование большинства тегое - гиперссылок, изображений, заголовке» и т. п.

Copyright (С) anjcalmovski

ijwyCoirputar ___________ ^

Рис. 5.1. Текстовая верстка. Аскетично, просто, никакого «дизайна ради дизайна»

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

5.2.2. Табличная верстка

Табличная верстка основана на использовании таблицы, в ячей­ках которой располагаются элементы страницы (рис. 5.2).

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

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

Рис. 5.2. Табличная верстка. Содержимое страницы выглядит более структурированным, доступны многие варианты оформления

5.2.3. Верстка при помощи фреймов

Фрейм (англ. frame рамка) — это HTML-тег. Основной смысл верстки при помощи фреймов — разделение страницы на ойре - деленное количество рамок, в которые загружаются отдельные страницы. Таким образом, главная страница содержит всего 10—20 строчек описания рамок, их размеров и того, какая стра­ница в какую из рамок должна загрузиться (рис. 5.3).

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

Фрэйм (англ. frame - рамка) - это HTNL-тег. Основной смысл верстки при помощи фреймов - это разделение страницы на определенное количество рамок, в которые загружаются отдельные страницы. Сама главная страница содержит в себе всего 10-20 строчек описания рамок, их размеров и того, какая страница должна загрузиться в какую из рамок. При —1 использовании фрэймов можно загружать новую страницу в любую рамку, причем остальные при этом ^

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

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

5.2.4. Флэш

Флэш — верстка при помощи технологии, разработанной компа­нией Macromedia. В основном эта технология используется для создания шикарных мультимедийных презентаций, хотя иногда таким образом строят едва ли не весь сайт (рис. 5.4). Все мигает, прыгает, дребезжит и вращается. Выглядит флэш, по меткому выражению одного из отечественных специалистов, «стрелоч­ки — трррррр, буквочки — фррррррр, кнопочки — пшшшш».

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

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