Использование шаблонов и мастеров Microsoft FrontPage

Далее в окне Список папок (рис. 8.11), расположенном в левой части главного окна FrontPage, необходимо дважды щелкнуть на файле index.htm, чтобы открыть этот файл в режиме просмотра Страница (рис. 8.12). Файл index.htm является стартовой страницей узла – именно с нее будет начинаться просмотр.

Как видно из рис. 8.12, страница index.htm в режиме просмотра страницы является совершенно пустой. В окне необходимо набрать следующий текст:

Иванов Иван Иванович
Группа АСО-01-01
Мой первый одностраничный веб-узел

Результат должен совпадать с представленным на рис. 8.13.

Далее необходимо нажать на кнопку Код на панели выбора способа представления страницы слева от горизонтальной полосы прокрутки (рис. 8.14).

Как видно из появившегося окна (рис. 8.15), FrontPage параллельно с пользовательским вводом в режиме конструктора формирует соответствующий HTML-код.

Далее необходимо сохранить созданную веб-страницу. Для этого следует либо выбрать пункт главного меню Файл | Сохранить или нажать кнопку Сохранить на панели инструментов.

Далее следует просмотреть разработанный сайт в браузере. Для этого можно либо выбрать пункт главного меню Файл | Просмотреть в обозревателе и далее – желаемое разрешение экрана (рис. 8.16), либо нажать кнопку F12.

Вид разработанной страницы в браузере представлен на рис. 8.17.

Создание личного веб-узла на основе шаблона

При помощи шаблона Личный веб-узел в папке Мои веб-узлы создайте узел с названием Личный узел ASO-01-01 (рис. 8.18).

В панели Список папок дважды щелкните на файле index.htm, чтобы открыть стартовую страницу веб-узла в режиме просмотра страниц (рис. 8.19).

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

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

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

В абзаце "Избранные ссылки" измените шаблоны ссылок. Для этого щелкните правой кнопкой мыши по ссылке Посетите Example.com и в контекстном меню (рис. 8.20) выберите пункт Свойства гиперссылки.

Откроется диалоговое окно Изменение гиперссылки (рис. 8.21).

В поле Тест наберите текст гиперссылки "Поисковая система Yandex", а в строке Адрес – URL, по которому будет осуществлен переход при выборе этой гиперссылки – http://www.yandex.ru.

Аналогично вместо ссылок "См. Example.org" и "Загляните на Example.net" создайте ссылки на веб-сайта Волгоградского государственного университета (http://www.volsu.ru) и информационного агентства РосБизнесКонсалтинг (http://www.rbc.ru).

Абзац "Примечание: Это место для размещения …" замените информацией о сегодняшней погоде в Волгограде. Полученный измененный шаблон стартовой страницы представлен на рис. 8.22.

Аналогично заполните страницы шаблона "О себе" и "Увлечения". Для перехода к этим страницам в режиме конструктора используйте одноименные ссылки на панели навигации сайта, удерживая нажатой кнопку Ctrl.

Сохраните все измененные страницы. Просмотрите разработанный на основе шаблона сайт в браузере.

Создание корпоративного узла при помощи мастера

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

Предположим, что компания "Все для сада" имеет небольшой магазин в Сиэтле, шт. Вашингтон. Владельцем компании является Karen Berg (Карен Берг), которая хотела бы обмениваться информацией с покупателями и расширять покупательскую базу через Интернет. Если поддержка узла отвечает таким скромным целям, она, возможно, расширит в будущем средства этого узла, чтобы вести розничную продажу в режиме "он-лайн".

В этом упражнении будет использоваться мастер создания корпоративного веб-узла.

Откройте панель Создание и выберите ссылку Другие шаблоны веб-узлов.

В диалоговом окне Шаблоны веб-узлов (рис. 8.23) выберите значок Мастер корпоративного веб-узла, имя сайта – "Всё для сада" и расположение сайта – в папке Мои веб-узлы.

Появится первое из серии диалоговых окон мастера корпоративного веб-узла (рис. 8.24). Мастер использует эти диалоговые окна, чтобы пользователи могли сделать выбор в ответ на его запросы и ввести базовую информацию о компании.

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

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

На третьем этапе работы Мастера (рис. 8.26) следует выбрать, какие типовые разделы будут включены в стартовую (домашнюю) страницу. Следует установить флажки Предназначение и Контактные сведения.

На четвертом (рис. 8.27) и пятом (рис. 8.28) этапах следует соответственно выбрать, какие элементы будет включать в себя страница "Новости" и какое количество продуктов и услуг будет описано на странице "Продукты и услуги". Оставьте значения, предложенные по умолчанию.

Далее предлагается выбрать, какие сведения о продуктах и услугах, предлагаемых на сайте, следует поместить на страницы (рис. 8.29). Оставьте значения, предлагаемые по умолчанию. Затем необходимо выбрать, какие сведения смогут указать пользователи на форме обратной связи, предназначенной для сбора отзывов (рис. 8.30). Предлагаемые по умолчанию настройки изменять не надо.

Далее предлагается выбрать, в каком виде на сервере будут храниться отзывы пользователей о продукции и услугах, собранные при помощи формы обратной связи. Форма обратной связи помещает отзывы пользователей в специальный файл. Предлагается выбрать, в какой форме – в виде текстового файла, предназначенного для обработки посредством СУБД и редакторов электронных таблиц либо в виде HTML-файла – будут сохраняться эти сведения (рис. 8.31). Необходимо выбрать пункт "Да – формат с разделителями табуляцией".

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

На следующем этапе необходимо указать, какие элементы Мастер должен поместить на страницы сайта – в верхний и нижний колонтитулы страницы (рис. 8.33). Следует выбрать все возможные флажки для верхней части страницы и флажки "Адрес электронной почты веб-мастера" и "Дата последнего изменения страницы". Далее предлагается выбрать, помечать ли незавершенные страницы значком "В стадии разработки" (рис. 8.34). Выберите вариант по своему усмотрению.

Следующий этап работы Мастера предназначен для указания наименования организации (полного и кратного), а также ее почтового адреса (рис. 8.35). Укажите следующие сведения:

Далее Мастер предлагает указать номера телефона и факса организации, для которой разрабатывается сайт, адрес электронной почты веб-мастера и адрес общей электронной почты (рис. 8.36). Первые два поля оставьте без изменений, а в качестве адресов веб-мастера и общей почты укажите соответственно aso-01-01@fitt.volsu.ru и general@vds.com.

После того, как все необходимые данные введены, Мастер информирует о завершении своей работы (рис. 8.37).

После нажатия кнопки Finish FrontPage создаст веб-узел, используя заданную информацию, и затем выведет на экран список задач, которые нужно выполнить для завершения создания узла (рис. 8.38).

Откройте страницу index.htm в режиме конструктора. Установите курсор после примечания "Примечание. Разместите здесь вводный абзац Вашей страницы.." и наберите следующий текст (рис. 8.39):

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

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

Поместите курсор в конец комментария, под заголовком "Наша цель" и затем введите следующий текст (рис. 8.40):

В компании "Все для сада" мы предлагаем только высококачественные растения и садовый инвентарь для своих покупателей.

После комментария под заголовком "Контактные сведения" введите следующий текст (рис. 8.41):

Пожалуйста, связывайтесь с нами по факсу или e-mail 24 часа в сутки или звоните, а также приходите в наш магазин в следующее время: Понедельник - Пятница 9:00 - 21:00, Суббота и Воскресенье 10:00 - 17:00.

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

На панели инструментов Стандартная щелкните на кнопке Сохранить, чтобы сохранить веб-страницу.

Вставка существующего текста

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

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

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

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

Текст страницы Новости ( news.htm ) на данный момент содержит заголовок "Изменения на узле" и текст с обсуждением обновлений веб-узла. Поскольку обновления веб-узла не представляют интереса для постоянных покупателей компании "Все для сада", то следует изменить эту страницу и включить в нее пресс-релизы.

Также следует обновить страницу Услуги, используя текст из документа Microsoft Word. Затем обновить заголовок каждой страницы, чтобы отразить новое содержание.

Откройте страницу news.htm в режиме конструктора (рис. 8.43).

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

Замените заданный по умолчанию текст вводного абзаца следующим текстом:

Ознакомьтесь с новостями! Прочтите здесь то, что пишут о нас в газетах.

Выделите комментарий под абзацем, который вы только что ввели. В меню Вставка выберите пункт Файл, чтобы открыть диалоговое окно Выбор файла (рис. 8.45).

Перейдите в папку с методическими указаниями. В раскрывающемся списке Тип файлов выберите вариант Word 97-2002 ( *.doc ).

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

Текст документа будет преобразован в формат RTF и затем в HTML, после чего произойдет его вставка на странице "Новости", как если бы вы ввели его вручную. Исходное форматирование текста сохраняется (рис. 8.46).

Контактная информация вверху импортированного текста содержится в таблице. Таблица и ее ячейки указываются пунктирными линиями. Щелкните на таблице. Выберите пункт главного меню Таблица | Выделить | Таблица. Будет выделена таблица и ее содержимое.

Щелкните правой кнопкой на этой выделенной части и выберите в контекстном меню пункт Удалить ячейки, чтобы удалить эту таблицу.

Трижды щелкните на заголовке "Публикации в прессе", чтобы выделить весь абзац, и затем нажмите на клавишу Del, чтобы удалить его из веб-страницы.

Щелкните на кнопке Сохранить, чтобы сохранить веб-страницу.

Откройте страницу Услуги (services.htm ). Щелкните правой кнопкой на баннере страницы Услуги и выберите из контекстного меню пункт Свойства объявление на странице.

Появится диалоговое окно Свойства объявления на странице.

В поле Текст объявления выделите и удалите текущий текст и затем введите текст "Учебные курсы", как это показано на рис. 8.48.

Щелкните на кнопке ОК, чтобы закрыть это диалоговое окно и изменить заголовок страницы. Это изменение повлияет на заголовок страницы как в объявлении страницы, так и в режиме просмотра (рис. 8.49).

Откройте в программе Word файл classes.doc из папки с методическими указаниями.

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

Вернитесь в программу FrontPage. На странице services.htm щелкните на тексте примечания, чтобы выделить его, и затем чтобы скопируйте текст из буфера обмена. Скопированный текст заменит текст комментария.

Выделите и удалите лишний (пустой) абзац, вставленный вместе с этим текстом.

В панели списка папок откройте serv01.htm, serv02.htm и serv03.htm (три файла отдельных услуг) для редактирования.

В каждом файле повторите описанные выше шаги, чтобы заменить заголовки страниц (баннеры) на следующие краткие варианты, описанные в документе Учебные курсы:

По мере обновления баннеров страниц одновременно изменяются навигационные гиперссылки под баннерами страниц (рис. 8.50) и заголовки страниц в режиме просмотра.

Вернитесь к файлу services.htm и обратите внимание, что вертикальные гиперссылки навигации вдоль левого края также изменились, отражая новые заголовки страниц (рис. 8.51).

Для каждой из трех гиперссылок Название услуги (рис. 8.52) дважды щелкните на гиперссылке, чтобы выделить ее, и введите полное имя соответствующего курса из документа Classes.doc.

Замените Название услуги 1 на Планируем осенью весеннюю роскошь.

Замените Название услуги 2 на Насекомоядные растения: вредные или прекрасные?

Замените Название услуги 3 на Органические отходы: используйте их, чтобы от них избавиться! (рис. 8.53).

Скопируйте и вставьте первый описательный абзац для каждого курса из документа Classes.doc на страницу services.htm, заменяя описание соответствующей услуги. По окончании страницы сайта должны выглядеть, как показано на рис. 8.54.

На каждой из трех страниц описания отдельных курсов ( serv01.htm, serv02.htm и serv03.htm ) щелкните в любом месте тела страницы, нажмите клавиши Ctrl + А, чтобы выделить все содержимое, и затем нажмите на клавишу Del.

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

В меню Файл выберите пункт Сохранить все, чтобы сохранить все изменения.

Контрольные вопросы