Навигация

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

Блоки текста

Блоки текста необходимо оформлять так, чтобы это не мешало чтению, восприятию текста. Для этого удобными средствами являются контейнеры p, div, span. В том случае, если текста много, лучше применить многоколоночный текст (например на основе таблиц с невидимыми границами). Таблицы выигрывают в том случае, если используется следующий оформительский прием – чередуются строки с закрашенным светлым и чуть темнее фоном. Для чтения более удобны шрифты с засечками (serif, пример Times New Roman, Garamond, Bodoni, Serifa), роль которых состоит в том, чтобы вести взгляд по строке. Для заголовков более удобны шрифты без засечек или рубленые (sans-serif, пример Arial, Verdana, Tahoma, Zurich), с их лаконичным геометрическим рисунком. Сильного разнообразия шрифтов в оформлении не должно быть, также как и разнообразия по параметрам (начертаниям и размерам). В том случае, если все же применяются 2 шрифта с засечками или 2 рубленых, то нельзя их выбирать слишком похожими по начертанию. Что касается выравнивания, то при большом количестве текста лучше не выполнять подгонку по ширине, а применить выравнивание по левому краю.

Средства позиционирования

Когда в процессе разработки web-страницы выполнено распределение ее элементов, возникает вопрос какими техническими средствами следует воспользоваться для размещения элементов на плоскости. Простейшие механизмы – таблицы и распорки. В ячейках таблицы можно размещать графику и текст, выравнивая их друг относительно друга подходящим образом. Если требуется, - ячейки можно объединять. Распорки были изобретены дизайнером Дэвидом Сигелем. Он учел тот факт, что броузер масштабирует графические файлы до необходимых размеров. В тэге img используется ссылка на прозрачный gif-файл размером 1х1 пиксел и указываются требуемые размеры вставки (атрибуты height, width). Такие вставки используются для сдвигов текста и изображений как по горизонтали, так и по вертикали. Их можно размещать как в пустых ячейках таблиц, обеспечивая требуемые параметры столбцов и строк, так и в ячейках, заполненных текстом и графикой.

Наилучшие результаты дает применение средств позиционирования языка CSS. В HTML различают блочные и in-line-элементы. Блочные элементы размещаются по вертикали - один под другим, а элементы in-line последовательно один за другим по горизонтали, пока помещаются в окне, а затем переносятся в следующую строку. В блочные элементы могут вкладываться другие блочные и in-line- элементы. Т.о., координаты элемента определяются 2 факторами: положением элемента-родителя и наличием предшествующих элементов в порядке отображения. В CSS для каждого элемента можно указать режим позиционирования: - относительное (relative), плавающее (float), абсолютное (absolute) и фиксированное (fixed). Относительное позиционирование позволяет смещать объект от той точки, которую он занимал бы по умолчанию с учетом обоих упомянутых только что факторов. Относительное позиционирование отдельных букв в абзаце позволяет, например, воспроизвести логотип системы ТЕХ, в котором буква Е смещена вниз не относительно какой-то точки на странице, а относительно своих соседей. Разновидностью относительного является плавающее позиционирование, при котором объект смещается относительно исходного положения до упора вправо или влево, отодвигая в этом месте текст (а не накладываясь на него). В HTML того же эффекта для изображений можно достичь с помощью атрибута align тэга img. При абсолютном позиционировании элемента снимается один из двух указанных факторов: положение объекта вычисляется относительно его «родителя», но без учета «братьев». Т.е., имеется одна и та же точка отсчета для всех «детей» данного элемента-родителя (левый верхний угол блока). При фиксированном позиционировании (разновидности абсолютного) элементом-«родителем» считается окно броузера.

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