Атака через Internet
         

Схема навигации

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

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



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

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

Панели ссылок

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

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

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

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

Макетирование Web-страницы

Приступая к созданию макета Web-страницы, необходимо знать об ограничениях, с которыми сталкивается разработчик. Это ограничения используемого при создании Web-страницы HTML языка и браузера, а также аппаратные ограничения, связанные с типом монитора и модема. Рассмотрим данные ограничения.

HTML

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

Пользователю, использующему для разработки FrontPage, нет необходимости знать теги. Разработка Web-узла в данной программе происходит в режиме WYSIWYG, то есть что видите, то и получаете. Форматирование страницы во FrontPage осуществляется средствами текстового редактора, возможности которого ограничены из-за ограничений HTML. Преодолеть возникающие при создании Web-узла трудности можно с помощью языка, HTML благодаря тому, что FrontPage содержит средства для просмотра и редактирования HTML-кодов. Для того чтобы просмотреть текущую страницу в HTML-кодах (рис. 10.1), необходимо открыть ее в режиме редактирования и выбрать в нижней части рабочей области вкладку HTML-код.

Рис. 10.1. Просмотр Web-страницы в HTML-кодах

Браузеры

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

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

Замечание

Во избежание недоразумений обязательно протестируйте созданный Web-узел с помощью наиболее часто применяемых пользователями браузеров Netscape Navigator и Internet Explorer.

Ограничения, связанные с аппаратными средствами

Внешний вид просматриваемой в обозревателе Web-страницы зависит не только от типа браузера, но и от монитора, видеокарты, применяемой пользователем операционной системы и установленного на мониторе разрешения. Поэтому, разрабатывая собственный Web-узел, вы должны просмотреть, как будет выглядеть ваша страница в браузере при разрешении экрана 640x480, 800x600 и 1024x768, так как это наиболее часто используемые на компьютере разрешения. На рис. 10.2 и 10.3 показано, как выглядит одна и та же страница на мониторе с разрешением экрана 800x600 и 1024x768, соответственно.

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

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

Рис. 10.2. Web-страница при разрешении экрана 800x600

Рис. 10.3. Web-страница при разрешении экрана 1024x768


Элементы оформления Web-страниц

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

Текстовая информация

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

Программа FrontPage, как и все программные продукты Microsoft Office, содержит средства, призванные облегчить работу по размещению текста. Это команды проверки орфографии, поиска и замены, тезаурус.

Фон страницы

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

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

Горизонтальные линии

Для выделения заголовков, разделов текста, для разделения разной по тематике информации и просто для оформления Web-страниц используют горизонтальные линии. Размещение горизонтальной линии на Web-странице осуществляется командой Горизонтальная линия (Horizontal Line) ( ) из меню Вставка (Insert). Кроме того, страницы можно украсить графическими линиями. Образцы графических линий можете поискать в библиотеке графических изображений Clip Art.

Таблицы

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

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

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

 

Рис. 10.4. Использование для форматирования вложенных таблиц

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

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

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

Общие области

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

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

Предупреждение

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

Графические изображения

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

При создании Web-узлов чаще всего применяют графические форматы JPEG (Joint Photographic Experts Group) и GIF (Graphics Interchange Format), являющиеся форматами со сжатием. Выбор формата определяется стоящими при разработке задачами. Так, например, GIF формат применяется для изображений, содержащих меньше 256 цветов, и используется, как правило, для создания анимационных эффектов. Если изображение содержит более 256 цветов, то применяется формат JPEG. Кроме того, программа FrontPage позволяет импортировать файлы, имеющие другие форматы, преобразовывая их в форматы JPEG и GIF.

После того как графическое изображение размещено на странице, с помощью кнопок панели инструментов Рисунки (Pictures)
(рис. 10.5) можно изменить его яркость и контрастность, повернуть по горизонтали или по вертикали, преобразовать цветное изображение в полутоновое и т. д. Эта панель автоматически появляется в окне программы FrontPage при щелчке на изображении.

Рис. 10.5. Графическое изображение, размещенное на Web-странице

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

Совет

FrontPage позволяет узнать предполагаемое время загрузки Web-страницы на компьютер пользователя в зависимости от скорости соединения с Web-сервером. Оно отображается в строке состояния в режиме редактирования страницы справа от значка с изображением песочных часов. На рис. 10.5 показана страница, время зафузки которой составляет 94 секунды при скорости соединения 28,8 Кбит/с. Чтобы узнать время загрузки при другой скорости соединения, щелкните мышью в правой области строки состояния и выберите из появившегося меню значение предполагаемой скорости соединения с Web-сервером.

Темы оформления Web-страниц

Для оформления Web-страниц FrontPage предоставляет темы, называемые также декорациями. В соответствии с выбранной темой изменяются свойства элементов всех или отдельных страниц Web-узла:

Текст (цвет, размер и тип шрифта, стили абзацев) Маркеры списков Заголовки Панели ссылок

Рис. 10.6. Web-страница, оформленная с помощью темы

Горизонтальные линии Фоновое изображение Цвет гиперссылок

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

На рис. 10.6 показана страница, в оформлении которой использована тема Кубики (Blocks). Для задания темы оформления Web-узла служит диалоговое окно Темы, открываемое командой Темы (Themes) меню Формат (Format).

Гиперссылки

Гиперссылки предназначены для перемещения между страницами текущего Web-узла, а также на другие узлы в поисках нужной информации. Они могут указывать на текст, графические изображения, страницы других Web-узлов в сети Интернет, документы Microsoft Office, закладки, размещенные на этой же странице, на других страницах Web-узла или внутри документов, локальные файлы вашего компьютера, адреса электронной почты для доставки корреспонденции и т.д. При ссылке на файлы Microsoft Office автоматически запускается соответствующая программа и открывается файл, на который указывает ссылка. Если страница, на которой создается ссылка, является фреймом (т.е. разбита с помощью рамок на несколько областей), можно указать, в какую область фрейма загружать страницу, на которую указывает ссылка.

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

Эффекты динамического HTML

Разработчику Web-узла, работающему с программой FrontPage, предоставляются разнообразные средства, позволяющие сделать Web-страницы интересными. К таким средствам, прежде всего, относятся динамические эффекты (Dynamic HTML).

Для размещения на Web-странице динамических HTML-объектов служит диалоговое окно Вставка компонента веб-узла (Insert Web Component), предлагающее три компонента данного типа. Это Быстрая строка (Marquee), Меняющаяся кнопка (Hover Button) и Диспетчер объявлений (Banner Ad Manager).

Кроме того, FrontPage позволяет при оформлении Web-страниц использовать различные анимационные эффекты, заимствованные из программы PowerPoint. При создании эффектов анимации используется панель инструментов Эффекты DHTML (DHTML Effects). Комбинируя значения всех трех списков данной панели инструментов, можно формировать самые разнообразные эффекты. Например, при загрузке Web-страницы текст будет влетать по спирали или волнообразно, въезжать сверху, снизу, справа, слева или по диагонали из разных углов страницы. Размер размещаемого текста можно увеличивать или уменьшать. Отдельные слова текста могут падать в формируемую фразу сверху или вплывать, двигаясь волнообразно.

Замечание

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

Фреймы

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

 

Рис. 10.7. Использование на Web-странице фреймов

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

FrontPage-компоненты

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

Подстановка (Substitution) — размещает на Web-странице информацию, задаваемую с помощью переменной. При изменении значения переменной происходит автоматическое обновление данных во всех местах, где эта переменная используется Страница (include Page) — вставляет содержимое отдельной страницы с периодически обновляемой информацией в другие страницы Web-узла Страница с расписанием (Scheduled Include Page) — вставляет СОДСр-жимое отдельной страницы в другие страницы Web-узла на определенный интервал времени Рисунок с расписанием (Scheduled Picture) — вставляет графическое изображение на страницу Web-узла на определенный интервал времени Счетчик посещений (Hit Counte r) — размещает на Web-странице компонент, позволяющий получить сведения о том, сколько пользователей открывало Web-узел Форма поиска (Search Form) — позволяет посетителям Web-узла проводить поиск необходимой информации Оглавление (Table of Contents) — размещает на домашней странице оглавление со ссылками на все страницы Web-узла Электронная таблица Office (Office Spreadsheet) — добавляет на страницу электронную таблицу, являющуюся объектом Microsoft Office Диаграмма Office (Office Chart) — добавляет на страницу диаграмму, являющуюся объектом Microsoft Office Сводндя таблица Office (Office PilotTable) — Добавляет на страницу объект Microsoft Office, позволяющий подключиться к базе данных с помощью OLE DB, просмотреть заданный объект и изменить его содержимое

Для размещения на Web-странице компонентов используется диалоговое окно Вставка компонента веб-узла (Insert Web Component) (рис. 10.8), открываемое командой Веб-компонент (Web Component) из меню Вставка (Insert), а также кнопкой
Веб-компонент на стандартной панели инструментов.

Рис. 10.8. Диалоговое окно, используемое для размещения на странице Web-компонентов

Формы

Формы, размещаемые в Web-узле, содержат объекты, позволяющие посетителям вводить информацию (рис. Ю.9). Это поля, в которые информация вводится вручную, списки, содержащие варианты ответов, из которых посетителю необходимо выбрать вариант, группы переключателей, флажки, предполагающие два варианта ответа — согласен или не согласен. Формы содержат также кнопки, позволяющие выполнять определенные действия, например, переслать на сервер для дальнейшей их обработки введенную в поля информацию или очистить поля ввода формы.

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

 

  Рис. 10.9. Форма, созданная в программе FrontPage

Для создания форм, так же как и для создания Web-страниц, программа FrontPage предлагает шаблоны и мастера, облегчающие их разработку:

Форма подтверждения (Confirmation Form) — шаблон формы подтверждения о получении информации Форма обратной связи (Feedback Form) — шаблон формы для ввода замечаний Мастер страницы формы (Form Page Wizard) — мастер создания формы для опроса посетителей Web-узла Гостевая книга (Guest Book) — шаблон гостевой страницы Страница поиска (Search Page) — шаблон страницы в виде формы, используемой для поиска слов Регистрационная форма (User Registration) — шаблон формы регистрации пользователей

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

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

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

Настройка средств обработки данных, полученных с помощью формы, осуществляется в окне свойств формы Свойства формы (Form Properties), открываемом одноименной командой контекстного меню.