2.2. Добавление страницы в макет сайта. Структура навигации и разделяемые границы

 

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

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

Создайте новую страницу сайта с помощью команды Пустая страница, вызываемой из меню Файл, подменю Создать, командой Страница или веб-узел…. Допустим, эта страница будет содержать общие сведения о нашем лицее.

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

Описанным выше образом создайте и сохраните в папке сайта еще три страницы - например, для описания учебного процесса в лицее – ucheba.htm, новостей –news.htm и для связи с лицеем – kontakts.htm.

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

Выберите команду меню Вид - Переходы. В рабочей области окна программы будет отображена схема переходов со страницы на страницу.

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

Для этого перетащите с помощью мыши файл svedeniya.htm из списка файлов сайта на схему переходов ниже домашней страницы. На схеме будет установлена связь между страницами.

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

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

Поместите на схему навигации другие страницы, так чтобы страница kontakts.htm (Контакты) находилась на одном уровне со страницей svedeniya.htm, а страница с описанием учебного процесса ucheba.htm (Учебный процесс) и страница новостей news.htm (Новости) были связана со страницей svedeniya.htm и располагались на втором уровне (рис. 16).

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

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

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

С помощью команды Развернуть все в этом же контекстном меню можно развернуть схему в горизонтальном направлении.

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

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

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