GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Принципы написания технического задания(42188)
Этапы проектирования сайта(30729)
Это сладкое слово — интерактивность...(15031)
Техническая концепция сайта(13840)
Техническое задание для дизайнера(12198)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » Концептуализация » Подавайте информацию правильно

Подавайте информацию правильно


Артемий Ломов
artemy@lomov.ru
http://www.lomov.ru/

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

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

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

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

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

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

В оформлении пространства страницы информационного сайта можно выделить, как минимум, 4 характерные области. Это <шапка>, панель навигации, область основного текста и <подвал>.

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

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

Навигационная панель, если количество разделов на сайте небольшое, может располагаться горизонтально, отделяя <шапку> страницы от области основного текста. В этом случае элементы навигации полезно продублировать и внизу страницы, между областью основного содержания и <подвалом>. Когда же разделов на сайте много, лучше делать навигационный блок вертикальным, располагая его слева от зоны с основным текстом страницы. Почему именно слева, а не справа? Нас, европейцев, чуть ли не с пеленок учили читать слева направо и сверху вниз, в результате чего <силовые линии> динамики нашего восприятия любой композиции волей-неволей принимают такие же направления. Навигационная же область, как правило, визуально <тяжелее> зоны основного содержания страницы, и будь навигационный блок справа, векторы развития нашего восприятия упирались бы в преграду, <тормозились>.

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

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

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

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

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

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

Рождение эскиза
Даже для дизайнера таких <нематериальных> произведений, как web-сайты, лучшими инструментами на начальном этапе работы являются карандаш и бумага. На бумаге можно с молниеносной быстротой реализовать десяток-другой набросков <каркаса> будущей композиции, с каждым шагом приближаясь к единственно верному варианту, исключая или добавляя те или иные элементы, скругляя углы, корректируя расстояния.

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

<Каркас> будущего сайта может иметь фиксированную ширину или верстаться по <резиновому> принципу, растягиваясь с увеличением разрешения экрана. Нужно сразу взвесить все <за> и <против>. <Резиновый> макет верстать сложнее, да и вряд ли какая бы то ни было композиция будет выглядеть сбалансированно при возможном изменении ее ширины в два с лишним раза от расчетной, ведь растровые графические элементы - компоненты интерфейса, реализованные в виде GIF-, JPEG- или PNG-файлов, не масштабируются с изменением ширины окна браузера. В то же время, вокруг содержимого страниц с фиксированной шириной при больших разрешениях экрана остаются огромные пустые поля, и выглядят эти страницы в такой ситуации весьма сиротливо. С другой стороны, большие мониторы созданы для того, чтобы на них умещалось много информации (в нескольких окнах или рабочих областях), и разворачивать при работе с ними окошко браузера на все 2048 пикселей - мягко говоря, не совсем правильно. Хотя осуждать пользователей за их предпочтения мы не имеем права.

Макет нужно рассчитывать так, чтобы страница отображалась без горизонтальной прокрутки при как можно меньшей ширине окна браузера. Для <каркасов> фиксированной ширины за базу сегодня нужно брать величину порядка 760 пикселей. Именно при такой ширине страница будет приемлемо отображаться во всех браузерах при ширине окна 800 пикселей, а экранный режим 800x600 пока еще применяют очень многие пользователи. В то же время, <резиновые> страницы могут себе позволить сжиматься и до меньших значений ширины окна - по большому счету, нельзя окончательно сбрасывать со счетов <несчастных> пользователей слабых компьютеров, до сих пор эксплуатирующих экранный режим 640x480, но полностью жертвовать интересами большинства в пользу единиц <обездоленных> - неразумно. Все сказанное выше касается макетов, рассчитанных на просмотр при помощи полноценных персональных компьютеров. Если же вы чувствуете, что не можете отказаться от аудитории, представленной пользователями сотовых телефонов с WAP, карманных компьютеров и таких экзотических вещей, как WebTV, то для нужд означенного контингента, скорее всего, придется создавать обособленную версию сайта.

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

Плавный переход к электронной форме
Когда идея будущего макета уже станет очевидной, можно приступать к экспериментам в графическом редакторе (читай: в Photoshop, ибо именно это бессмертное творение Adobe снискало славу главной и единственной программы подготовки графики для бесчисленного множества web-разработчиков по всему миру). Лучше всего реализовать всю композицию будущей web-страницы в виде монолитного многослойного графического изображения, после чего, убедившись, что все аспекты новоиспеченного творения радуют глаз и ни один элемент не вызывает отторжения, приступать к нарезке большого изображения на кусочки и верстке страниц.

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

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

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

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

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

Первый инструмент - таблицы в HTML. Это старый, проверенный и отточенный до мелочей многими поколениями web-разработчиков способ создания макетов. Основной его недостаток в том, что представление в виде таблиц нетабличных по природе своей данных сильно вредит логике документа. Масла в огонь подливает использование разнообразных <хитростей> вроде многоуровневой вложенности таблиц, невидимых (прозрачных) графических распорок, что, в сочетании со стандартными визуальными возможностями, встроенными в HTML, является непреодолимым заслоном для принципа разделения содержания и представления.

Второй путь состоит в использовании для создания <каркаса> web-страницы возможностей оформления контейнеров, заложенных в спецификацию CSS2 (CSS2 box model). Применяя CSS, можно полностью отказаться от средств визуального форматирования, встроенных в HTML, с тем, чтобы принцип разделения контента и оформления, а также строгая логичность данных восторжествовали. К сожалению, в бочке меда, как всегда, оказалась ложка дегтя, причем явно не чайная. Дело в том, что спецификации CSS2 соответствуют в полной мере только новейшие версии браузеров, а устаревшие на сегодняшний день их реализации склонны трактовать величины параметров CSS-кода весьма вольно.

Рис. 4. Вверху - заготовка <каркаса> страницы, реализованная при помощи вложенных таблиц без жестких графических распорок. В IE5 ширина левой колонки бесконтрольно <уплывает>. В середине - идеально выглядящий в IE5 макет, реализованный при помощи неправильной с точки зрения стандарта таблицы стилей. Внизу - тот же макет в Opera 5. Вследствие того, что броузер интерпретирует параметры контейнеров правильно, ширина правой колонки соответствует нормам спецификации CSS, а левая колонка кажется такой же, как в IE5, поскольку ее контейнер перекрывается позиционированным в абсолютных координатах контейнером правой колонки.

Предположим, нам необходимо создать простейший <каркас> страницы, состоящий из двух колонок. Общая ширина его должна составлять 600 пикселей, а левая колонка, отведенная для панели навигации, в ширину должна иметь 200 пикселей.

Если прибегнуть к табличной верстке, код страницы, по идее, должен выглядеть примерно так:

<html>
<head>
<title></title>
</head>

<body text="#000000" bgcolor="#ffffff" topmargin="0" bottommargin="0" leftmargin="0" bottommargin="0" marginheight="0" marginwidth="0">

<table bgcolor="#666666" width="600" cellspacing="0" cellpadding="0" border="0">
<tr><td>

<table width="100%" cellspacing="1" cellpadding="20" border="0">
<tr>
<td bgcolor="#cccccc" width="198">Панель навигации</td>
<td bgcolor="#f0f0f0" width="399">Область текста</td>
</tr>
</table></td>
</tr>
</table>

</body>
</html>

Только такая конструкция с вложенностью позволяет создать таблицу с плоской рамкой толщиной в 1 пиксель.

В случае же использования CSS код, описывающий идентичный макет, должен в идеале быть таким:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<style type="text/css">
<!--
body {background-color: #fff; color: #000; margin: 0px}

div {position: absolute; border-style: solid; border-width: 1px; border-color: #666; margin: 0px; padding: 20px}

.nav {top: 0px; left: 0px; width: 158px; background-color: #ccc}

.txt {top: 0px; left: 199px; width: 359px; background-color: #f0f0f0}
-->
</style>
</head>

<body>
<div class="nav">Панель навигации</div>
<div class="txt">Область текста</div>

</body>
</html>

Обратите внимание на элемент . Вообще говоря, он является обязательным для всех HTML-документов, но в данном случае такой тэг жизненно важен, ибо при отсутствии его некоторые новые браузеры, к примеру, IE6, будут пытаться интерпретировать фрагмент, подобный вышеприведенному, непредсказуемым образом в <благородном> стремлении обеспечить совместимость со старыми версиями.

К сожалению, вышеприведенные листинги не всегда работают так, как хотелось бы. И вот почему:

Не верь глазам своим
Несмотря на явное провозглашение width="198" для левой колонки (два пикселя отводится на границы), ширина гипотетической панели навигации во многих браузерах будет отличаться от намеченной величины, причем непредсказуемым образом. Поведение браузера зависит от многих факторов, основным из которых является объем текста в той или иной ячейке таблицы. Атрибут width является в данном контексте рекомендательным, и браузеры не обязаны ему строго следовать. Самый надежный способ сохранить заданную ширину ячейки таблицы - вставить в нее невидимую графическую распорку, растянув средствами HTML однопиксельный прозрачный GIF до требуемой величины. Главное не забыть вставить такие распорки в смежные ячейки таблицы, дабы выдержать и ширину последних на заданном уровне.

Рис. 5. Макет главной страницы сайта Modellmix.com построен на базе вложенных таблиц с графическими распорками. Текстовое содержание сверстано в две колонки. Обратите внимание на нюансы пространственных отношений: за основу были приняты размеры места под рекламный баннер; ширина блока навигации соответствует высоте <шапки>, поля и отступы во всей композиции одинаковы по величине.

О премудростях CSS
Согласно спецификации CSS2, параметр width задает ширину содержимого контейнера, в то время как значения padding (отступ от содержимого до границы) и border-width (толщина границы) дополнительно прибавляются к ширине содержимого. В нашем примере значение параметра width для левой колонки равно 158, padding - 20 и border-width - 1 (все значения в пикселях). Если дважды (слева и справа) прибавить padding и border-width к width, получится как раз 200.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<style type="text/css">
<!--
body {background-color: #fff; color: #000; margin: 0px}

div {position: absolute; border-style: solid; border-width: 1px; border-color: #666; margin: 0px; padding: 20px}

.nav {top: 0px; left: 0px; width: 200px; background-color: #ccc}

.txt {top: 0px; left: 199px; width: 401px; background-color: #f0f0f0} -->
</style>
</head>

<body>
<div class="nav">Панель навигации</div>
<div class="txt">Область текста</div>

</body>
</html>

Резюме
Пока четвертые и пятые версии популярных браузеров не отжили свой век, старая добрая табличная верстка будет занимать прочные позиции. Как ни парадоксально, у этого морально устаревшего приема может открыться <второе дыхание> под влиянием массового внедрения XML, ведь XSL- или XSLT-файл можно написать таким образом, чтобы соответствующие XML-данные представлялись с его помощью в виде HTML. При этом заветный принцип отделения содержания от представления будет, разумеется, с успехом выполняться.

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

Статья опубликована в журнале CHIP, № 3, 2003

 
05.04.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.