Инструментарий по созданию программного продукта

 

Основным инструментом создания продукта стал MS FrontPage.

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

Редактор FrontPage «ориентирован» на применение обозревателя Internet Explorer, так что создаваемый им код HTML наиболее адекватно отображается именно в этом браузере. В частности, FrontPage позволяет использовать «бегущую строку», средство, которое не входит в стандарт HTML, но поддерживается Internet Explorer.

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

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

Чтобы открыть программу в меню Пуск выберите Все программы - Microsoft Office – Microsoft Office FrontPage 2003.

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

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

При использовании мастера программа задает ряд вопросов и на основании ответов формирует заготовку.

Создание веб-узла (сайта) без использования шаблонов

1. Создайте папку для Вашего веб-узла;

2. Запустите программу и в меню Открыть … выберите команду Открыть узел (Рис. 2).Укажитев диалоговом окне расположение папки веб-узла;

3. Программа предложит добавить данные FrontPage – нажмите ОК;

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

Существует одно правило: размер странички должен укладываться в размер одного экрана. Т.е. если сайт рассчитан на пользователей 15 дюймового экрана то разрешение должно быть 600х800, а для 17 дюймового – 1024х786. В строке состояния отображается размер страницы и время ее загрузки. Чтобы изменить размер страницы щелкните левой кнопкой в поле размера в строке состояния и выберите в выпадающем списке нужный размер.

5. Создайте структуру сайта. Перейдите на закладку Переходы или выберите команду Переходы в меню Вид.

6. Выберите команду Создать – Верхняя страница в контекстном меню в области переходов (Рис. 3). Назовите страницы (при создании структуры указываются имена страниц (не файлов)).

7. В окне список папок это будет выглядеть так (Рис. 4).

8. Файлы можно переименовать (не ставьте пробелы в именах файлов)

9. Затем страницы заполняется нужными картинками и текстом. Для корректного расположения на странице текста, панелей навигации, рисунков их помещают в таблицы с прозрачными рамками. Чтобы создать таблицу, используют команду Таблица - Вставить таблицу. В открывшемся диалоговом окне указывают размер таблицы (в ячейках), а также дополнительные параметры, реализуемые как атрибуты соответствующих тегов. Чтобы занести информацию в таблицу, следует установить курсор в нужную ячейку и начать ввод. При работе с ячейками таблицы можно применять любые команды форматирования.

В качестве основного средства форматирования используется Панель инструментов форматирования. Она содержит:

· раскрывающийся список Изменение стиля  позволяющий выбрать стиль оформления абзаца (соответствующий стандартным функциональным элементам HTML;

· раскрывающийся список Изменение шрифта  позволяющий выбрать гарнитуру шрифта (наличие такого же шрифта в ходе просмотра документа через Интернет не гарантируется);

· кнопки увеличения и уменьшения размера текста

(в относительных единицах HTML);

· кнопки выбора начертания;

· кнопки выбора выравнивания текста;

· кнопки создания маркированных (неупорядоченных) и нумерованных (упорядоченных) списков;

· кнопки задания отступа текста (на основе некорректного использования элементов HTML).

Дополнительные элементы форматирования, не вынесенные на панель инструментов, задаются в отдельных диалоговых окнах. Их можно открыть, например, с помощью команд Формат - Шрифт и Формат - Список.

Для создания гиперссылки надо выделить фрагмент текста, который будет использоваться как ссылка, и дать команду Вставка - Гиперссылка. В открывшемся диалоговом окне «Добавление гиперссылки» выбирают вкладку Связать с. Для создания внешней ссылки введите интернет-адрес на нужную страницу в поле Адрес, для создания ссылки на другую страницу своего узла (используется относительный адрес) выберите папку, в которой находится файл и укажите его мышью. Для создания ссылки внутри страницы выберите команду и укажите на какую закладку ссылается объект, предварительно поставив закладку в это место с помощью команды Вставка – Закладка и указав имя закладки. Выбрав вкладку одновременно с созданием ссылки будет создан соответствующий документа, который немедленно открывается для редактирования.

Кнопка служит для указания места открытия ссылки (в этом же окне, в новом окне и др.)

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

10. Созданные страницы объединяют с помощью ссылок. При связке в общий документ ссылки можно спрятать под любой видимый объект (картинки, меню, кнопки и т.д.). Можно воспользоваться меню Вставка - Панель ссылок или меню Вставка – Меняющаяся кнопка

11. В конце, когда страница создана, ее нужно сохранить в нужной папке. Сохраните файл под именем index в папку веб-узла и дайте название странице, нажав на кнопку Изменить в разделе Название (например, Главная или Домашняя)

Содержимое веб-страницы

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

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

Дополнительные объекты вставляются в редактируемый документ при помощи меню Вставка. Например, для вставки изображения используется команда Вставка – Рисунок, а затем выбрать меню Картинки (эта команда позволяет вставить рисунок из коллекции MS Office) или меню Из файла (открывает диалоговое окно, в котором нужно указать место расположения картинки или фото на диске). В ходе создания документа различные графические форматы автоматически преобразуются в форматы GIF и JPEG. Сохранение преобразованного файла осуществляется при сохранении документа, при этом Вам будет предложено указать папку, в которую будет сохранен рисунок.

Другие элементы, которые можно разместить на странице, — это:

· горизонтальная линейка ( Вставка - Горизонтальная линия );

· видеозапись ( Вставка - Рисунок - Видеозапись );

· фоновое звуковое сопровождение ( Формат – Фон - Фоновый звук и и нажав на кнопку Обзор указать место расположения звука);

· «бегущая строка» ( Вставка - Веб-компонент -Бегущая строка, этот элемент воспроизводится только обозревателем Internet Explorer).

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

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

 

⇐ Предыдущая123456Следующая ⇒

Поделиться: