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

⇐ ПредыдущаяСтр 4 из 5Следующая ⇒

При проектировании сайта важно хорошо продумать схему возможных переходов с одной страницы на другую с помощью внутренних ссылок. Такая схема называется структурой навигации (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). Выберите вкладку Переходы и укажите названия ссылок для перехода на главную, верхнюю, предыдущую и следующую страницы в соответствующих полях ввода. Нажмите кнопку ОК, чтобы закрыть диалог Настройка веб-узла и сохранить настройки.

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

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

2.3. Применение темы для оформления страниц

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

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

Выберите команду меню Формат – Тема…. На экране появится диалог Темы (рис. 18).

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

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

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

Установите флажки по вашему желанию и нажмите кнопку ОК, чтобы применить выбранную тему к страницам сайта.

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

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

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

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

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

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

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

Нажмите кнопку Графика…. На экране появится диалог Изменение темы. В правой части диалога расположена область просмотра. В ней отображается пример оформления различных графических элементов страницы в зависимости от выбранных настроек темы. Слева расположен открывающийся список Элемент, в котором выбирается графический элемент, и две вкладки, на которых устанавливается рисунок и шрифт для выбранного элемента. Группа переключателей Рисунки темы: определяет использование обычной, более строгой ( Обычная графика ) или активной, более сложной ( Активные рисунки ) графики в текущей теме. На вкладке Шрифт можно выбрать название, начертание и размер шрифта, а также установить горизонтальное и вертикальное выравнивание текста для текущего графического элемента. В название шрифта может входить несколько имен шрифтов, разделенных запятой. Если первый шрифт отсутствует на компьютере пользователя, просматривающего страницу, то выбирается второй и т.д. Некоторые элементы, такие, как фоновый рисунок, маркеры и горизонтальная линия, не имеют настроек шрифта.

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

Нажмите кнопку Текст…. На экране появится диалог Изменение темы. В правой части диалога расположена область просмотра, в которой отображается пример оформления различных текстовых элементов страницы в зависимости от выбранных настроек. Слева расположен открывающийся список Элемент:, в котором выбирается текстовый элемент и поле ввода Шрифт:, в котором устанавливается шрифт для выбранного элемента, а также список доступных шрифтов. Как и для графических элементов, в название шрифта может входить несколько имен шрифтов, разделенных запятой.

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

Вы можете сохранить все сделанные изменения в текущей схеме, нажав кнопку Сохранить, или сохранить текущую схему и сделанные изменения под новым именем, нажав кнопку Сохранить как… в диалоге Темы.

⇐ Предыдущая 1 2 345 Следующая ⇒