Создание Web-страниц с помощью MS FrontPage. Основные понятия

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

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

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

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

Окно приложения FrontPage

После запуска программы FrontPage (Пуск – программы – FrontPage) на экране появляется окно программы, в котором отображена новая страница (нов_стр_1.htm). В области задач отобразится панель Приступая к работе (рис.1).

Окно программы FrontPage содержит: строку заголовка, строку меню, панели инструментов редактирования и форматирования, кнопки быстрого выбора тега (для редактирования и ввода тегов), ярлычки вкладок выбора страниц (для перехода между страницами), рабочее окно, в котором отображена новая страница, панель рисования, кнопки режимов просмотра, индикатор ожидаемого времени загрузки страниц при скорости 56 кбит/с, индикатор размера страниц, область задач.

В программе FrontPage можно просматривать документ в одном из четырех режимов: Конструктор, Код, С разделением и Просмотр. В режиме Конструктор можно визуально создать, отредактировать и отформатировать страницу, т.е. ввести текст, добавить рисунки, таблицы аналогично работе в текстовом редакторе. При этом теги языка HTML автоматически добавятся в фоновом режиме, однако кодировка HTML на экране не отобразится.

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

Команды, используемые для работы с Web–страницами и Web–узлами, располагаются в меню Вид программы FrontPage (рис.3):

1. Страница – позволяет выбрать режим просмотра и разработки страниц.
2. Папки – отображает структуру папок текущего сайта
3. Удаленный веб-узел – показывает узел, находящийся на сервере сети Интернет.
4. Отчеты – предоставляют сводку об веб- узле.
5. Переходы – отображают структуру переходов между страницами сайта.
6. Гиперссылки – открывается список ссылок текущей страницы.
7. Задачи – открывается список задач для текущего сайта

Создание новой пустой Web-страницы

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

В окне программы появляется новая пустая страница. Сохраним ее, но прежде в окне Сохранить создадим папку с нужным именем (например, EN), в которой создадим вложенную папку images для рисунков, а потом сохраним страницу в папке EN. Имя странице назначим index, так обозначается домашняя или главная страница. Редактор сохранит страницу с расширением .htm. В результате, в папке EN будут находиться вложенная папка images и файл index.htm.

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

Разработка веб-страницы

Теперь приступим к разработке страницы, которая начнется с ее разметки. Для разметки страницы будем использовать таблицы, можно воспользоваться командой Макеты страницы, расположенной на панели Макеты таблицы и ячейки в области задач. Устанавливаем в области задач Макетные таблицы и ячейки (рис.4).

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

1. Установим ширину (в точках или процентах) страницы равную 800 точек (ширина первого столбца – 200 точек, ширина второго столбца – 650 точек). Для этого подведем указатель мыши к верхней границе и когда он примет вид наклоненной влево стрелки щелкнем левой кнопкой мыши, появятся раскрывающиеся списки, используя которые можно изменить ширину столбца.
2. Выравниваем страницу по центру. Установим размер границы, цвет. Для этого щелкнем на раскрывающийся тег таблицы (на панели быстрый вызов тега) и выберем команду Свойства тега, в открывшемся диалоговом окне Свойства таблицы устанавим: Выравнивание по центру, Границы: размер – 1 и цвет – темно-синий (код: 000080).
3. В ячейках таблицы установим цифры: 1, 2, 3, 4 (эти цифры заменятся содержанием ячеек), чтобы можно было легко ориентироваться. В первую ячейку установим рисунок командой Вставка - Рисунок - Из файла, выбирем рисунок из папки images. Вставим, к примеру, логотип компании, для которой будет разрабатываться сайт.
4. Установим фон ячеек 1 и 2 в соответствии с фоном логотипа с помощью специальных таблиц и приложений для подбора цвета с его кодом. Чтобы выполнить заливку ячейки цветом нужно щелкнуть на раскрывающийся тег ячейки (на панели быстрый вызов тега) и выбрать команду Свойства тега, затем в открывшемся диалоговом окне Свойства ячейки установить: цвет фона – (например, код: dee7ef).
5. Во вторую ячейку поместим заголовок сайта. В режиме конструктора введем текст. Выберем, к примеру, шрифт Verdana (самый распространенный для веб-страниц), размер 22пт, цвет темно-синий (код цвета: 000080), выравнивание по центру.
6. В ячейке 3 разместим навигацию для перехода на другие страницы. Введем текст НАВИГАЦИЯ шрифтом Verdana, размером 14пт, выравнивание по центру. Далее введем текст (шрифт Verdana, размер 10пт): Главная, О компании En, Бизнес-обзор проекта, Способы оплаты, выделим эти строки и щелкнем на кнопке маркеры на панели инструментов форматирования. В результате, получили маркированный список для навигации.
7. Установим гиперссылку для строки Главная. Выделим строку Главная, щелкнем по ней правой кнопкой мыши и из контекстного меню выберем команду Гиперссылка. В открывшемся диалоговом окне нужно в папке EN выделить файл index и нажать ОК.
8. Создадим ссылку на партнерские сайты. Установим курсор ниже списка и выберем команду Таблица - Вставить - Таблица, в открывшемся диалоговом окне установим: Строк – 1, Столбцов – 1; Выравнивание – по центру; Зададим ширину: 95%; Зададим высоту: 35 в точках; Границы: размер – 1, цвет–темно-синий (код: 000080); Фон: цвет-темно-синий (код: 000080). Затем щелкнем Применить и ОК. В созданную таблицу введем текст «ПАРТНЕРСКИЕ САЙТЫ», шрифтом Verdana, размером 11пт, выравнивание по центру, цвет белый. Ниже таблицы введем адреса необходимых сайтов и создадим гиперссылки.
9. Заполним оставшиеся ячейки таблицы аналогичным образом.

10. Можно воспользоваться написанием кодов для метатегов ( и ):

    Интернет" >