2.3.Разработка web-сайта в среде редактора ms FrontPage
Выделяют следующие этапы разработки web-сайта:
Планирование. На этом этапе должны быть получены ответы на следующие вопросы: цель создания web-сайта, аудитория, на которую он рассчитан, какая информация будет размещена. Целесообразно познакомиться с сайтами, тематика которых близка к тематике создаваемого web-сайта, с тем, чтобы избежать ошибок или поучиться на положительных примерах. Определяются категории, подразделы сайта, количество страниц в каждом разделе, подразделе. Разрабатывается структурная (навигационная) схема сайта.
Реализация. На этом этапе проводится подготовка текстового и графического материала (печать, сканирование, оптимизация). Материал разбивается по файлам в соответствии со структурой. Организовываются ссылки между web-страницами сайта. Разрабатывается дизайн. На этом этапе определяются: фон, на котором будет расположена информация, цвет текста, цвет гипертекстовых ссылок, знаки навигации, выделение разделов графикой или текстовыми ссылками, представление фотографического материала.
Тестирование. После того как web-сайт создан, необходимо проверить правильность переходов со страницы на страницу. В связи с тем, что браузеры разных фирм иногда по-разному интерпретируют встречающиеся в HTML-документе команды разметки, а браузеры устаревших версий "не понимают" описаний, соответствующих новым стандартам, желательно просмотреть web-сайт в браузерах разных производителей и разных версий, при разных разрешениях экрана, добиваясь приемлемого результата.
Публикация. Размещение сайта в Internet. Для этого необходимо разместить все файлы web-сайта на web-сервере, предоставляющем такие услуги.
Рекламирование. На этом этапе предполагается взаимный обмен ссылками с другими сайтами, схожими по тематике, включение адреса сайта в письма, визитные карточки, брошюры, буклеты и т.д., регистрация сайта в популярных поисковых серверах;
Сопровождение. После создания web-сайта нужно не забывать обновлять информацию, расширять материал, улучшать дизайн, в противном случае велика вероятность того, что потенциальные посетители web-сайта не будут к нему возвращаться
Разработка web-сайта в среде редактора MS FrontPage включает несколько этапов:
1. создание структуры сайта в соответствии с макетом сайта,
2. создание взаимосвязи страниц,
3. задание разметки страниц в соответствии с общим макетом страниц,
4. заполнение страниц в соответствии с макетами страниц,
5. оформление страниц.
Создание структуры сайта
В соответствии с проектом сайта, можно приступить к его реализации в среде MS FrontPage.
1. Создать одностраничный сайт, состоящий из одной домашней страницы: меню Файл – Создать. На появившейся в правой части окна панели Создание выбрать Одностраничный узел.
2. Создать многостраничную структуру сайта в соответствии с проектом:
После выполнения функции создания одностраничного сайта открыто окно структуры web- узла. Внизу окна выбрать вкладку режима Переходы. Откроется окно структуры сайта, включающей единственную страницу index.htm:
Чтобы подключить новую, дочернюю страницу к выбранной странице, щелчком правой кнопки мыши вызвать контекстное меню этой страницы и выбрать в меню функцию Создать – Страница:
В результате в структуре сайта создается новая страница, присоединенная к выбранной щелчком странице. Если к странице нужно присоединить еще одну дочернюю страницу, то необходимо снова повторить описанные выше действия, щелкнув по ней правой кнопкой мыши:
Аналогично можно присоединить новые страницы и к дочерним страницам, постепенно выстраиваю структуру будущего многостраничного сайта:
После создания структуры сайта необходимо задать названия страницам. Для этого в окне Переходы для каждой страницы щелчком правой кнопки мыши по странице вызвать контекстное меню и выполнить функцию Переименовать:
После переименования страниц перейдите в режим Папки в окне структуры web – узла.
Вы увидите, что в структуре web – узла для каждой страницы создан отдельный файл «нов_стр_№.htm» и задано название. Но, имена файлов заданы на русском языке, что неприемлемо для большинства браузеров, используемых для сети Интернет. Поэтому необходимо задать имена файлов для страниц на английском языке. Для этого используем контекстную функцию Переименовать, выбираемую по правому щелчку мыши на имени файла:
Создание взаимосвязи страниц
В соответствии с общим макетом страниц, выбранным в проекте сайта, необходимо выделить на всех страницах сайта общие зоны. Обычно общая зона создается вверху каждой страницы для размещения наименования страницы и панели со ссылками на другие страницы сайта. Рекомендуется также размещать панель ссылок и внизу страницы для перехода на другие страницы после просмотра текущей.
Создание общих зон страниц
1. Открыть любую страницу сайта, щелкнув по вкладке страницы, расположенной в левом верхнем углу окна.
2. Выполнить функцию из меню Формат – Общие границы (если функция заблокирована, то предварительно выполнить функцию Сервис – Параметры страницы - Разработка – в окне установить флажок Общие границы).
3. В окне функции с помощью флажков задать нужный шаблон общих границ для страниц сайта:
После создания общих зон на пустой станице появятся обозначения зон страницы:
В верхней, нижней и боковой общих зонах помещены указания заменить текст общим текстом или общими элементами. Обычно в верхнюю зону вместо текста вставляется название страницы, заданное при формировании структуры сайта, и гиперссылки или кнопки перехода на соседние в структуре сайта страницы. В нижнюю зону также вставляются гиперссылки или кнопки перехода на соседние другие страницы. В боковую общую зону вставляются гиперссылки перехода на дочерние в структуре сайта страницы.
Между общими зонами, отделенными пунктирной линией, находится личная зона страницы, которая пока состоит из пустой строки. Эта личная зона должна быть заполнена текстом, рисунками, списками и т.д.
Вставка названий страниц
На любой странице сайта установить курсор в верхнюю общую зону (над пунктирной линией).
Удалить текст примечания.
3. Выполнить функцию меню Вставка – Объявление на странице. В соответствии с названиями страниц, заданными при создании структуры сайта, Front Page вставит названия на каждую страницу сайта:
Связывание соседних страниц сайта гиперссылками
Вести пустую строку после названия страницы в верхней зоне.
Выполнить вставку панели с гиперссылками в пустую строку:
меню Вставка – Панель ссылок,
в открывшемся окне выбрать тип панели – Панель, основанная на структуре переходов и нажать кнопку Готово,
в следующем окне с помощью переключателя установить тип гиперссылок – Назад и далее, а также с помощью флажков задать гиперссылки на родительскую страницу и домашнюю страницу – нажать кнопку OK.
3. Скопировать эту же панель ссылок в нижнюю общую зону:
удалить текст примечания из нижней общей зоны,
вызвать щелчком правой кнопки мыши контекстную функцию Копировать для вставленной в верхнюю зону панели ссылок,
установить курсор в нижнюю зону и вставить копию панели ссылок с помощью контекстной функцииВставить.
Связывание родительских и дочерних страниц сайта гиперссылками
Удалить текст примечания из боковой общей зоны. Установить курсор в боковую общую зону.
Выполнить вставку панели с гиперссылками в боковую зону:
меню Вставка – Панель ссылок,
в открывшемся окне выбрать тип панели – Панель, основанная на структуре переходов и нажать кнопку Готово,
в следующем окне с помощью переключателя установить тип гиперссылок – Дочерний уровень и нажать кнопку OK.
В итоге создания структуры сайта страницы приобретут вид:
