Последовательность создания веб-проекта

Лабораторное занятие № 33.

Тема: Средства создания и сопровождения сайта. (Создание web-сайта с помощью Word).

1. Цель работы: овладение технологией создания гипертекстовых документов: создания и оформления гипертекстовых документов в HTML-формате средствами Word, создания внешних и внутренних гиперссылок, просмотра HTML-документов средствами браузера, программирования фреймов с элементами языка HTML.

2. Оборудование, приборы, аппаратура, материалы: персональный компьютер, программа MS Word, интернет-браузер.

3. Краткие теоретические сведения.

Веб-узел - это специальная папка, в которой размещены файлы, содержащие текстовую информацию по какой-либо теме, а также информацию в виде рисунков, графиков, фотографий, анимационных изображений и звуковых эффектов. В этих файлах содержатся описания веб-страниц на одном из языков разметки гипертекста - HTML (HyperText Markup Language) или XML (Extensible Markup Language). Они имеют одно из следующих расширений: html, htm, xml. Все, что содержит веб-узел, далее будем называть веб-проектом. Существуют три типа веб-узлов: создаваемые на веб-сервере поставщика услуг Интернета; создаваемые в интрасети как веб-узлы группы; виртуальный веб-узел, создаваемый на жестком диске автономного компьютера, не подключенного к какой-либо сети.

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

Рис.1 Связь информационных страниц в веб-узле

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

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

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

http://www.fa.ru, то на самом деле будет сформирован URL-адрес

HTTP://www.fa.ru/index.htm

и будет выполнена попытка найти и загрузить веб-страницу именно с таким URL-адресом.

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

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

Последовательность создания веб-проекта.

Процесс создания проекта состоит из нескольких этапов.

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

2. На втором этапе обычно проводится декомпозиция общей темы на тематические подразделы и отдельные статьи с определением связей между ними. Результатом такой декомпозиции является создание структуры проекта.

4. Задание

1. Создайте HTML документы средствами Word.

2. Оформите каждый документ в соответствии с его содержанием и целью работы.

3.Создайте ссылки между главной страницей и остальными страницами.

4. Запустите созданные документы с помощью Internet Explorer.

1. Запустите WORD и введите следующий текст:

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

2. После этого абзаца добавьте картинку, выбрав ее, например, из Клип-галереи (команды Вставка - Рисунок – Картинки) или из автофигур (Автофигуры на панели Рисование).

Далее с помощью команды Таблица - Добавить таблицу вставьте следующую таблицу:

№ п/п	Наименование	Определение
1	Технологическая цепочка	Определяет технологические процессы проектирования и обработки данных ЭИС.
2	Информационные ресурсы	Совокупность данных, представляющих ценность для предприятия и выступающих в качестве материальных ресурсов.

Для определения границ таблицы используются команды Таблица - Границы или Формат - Границы и заливк а.

3. Отступите несколько абзацев и введите следующий текст:

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

3. Отступите еще один абзац и введите слова:

К началу страницы.

4. Задайте фон страницы – по своему усмотрению. Для этого воспользуйтесь командами Формат - Фон.

5. В начале документа добавьте бегущую строку с текстом " Информационные технологии ". Для этого включите панель инструментов Web-компоненты (меню Вид - Панели инструментов - Web-компоненты). На панели Web-компоненты включите кнопку Бегущая строка. В открывшемся окне введите текст бегущей строки, выберите способ и направление движения, цвет фона бегущей строки (рис.2).

Рис. 2 Вид окна Бегущая строка

6. Отформатируйте документ и сохраните его в формате HTML с помощью команды Файл - Сохранить как Web-страницу с именем ИТ, Тип файла Веб-страница (*.htm) в своей индивидуальной папке. Этот документ будем считать главной страницей (рис.). Закройте документ ИТ.

Рис. Окно документа ИТ

7. Создайте новый документ WORD (Файл - Создать) и ведите следующий текст:

Технические средства включают:

· компьютер;

· устройства ввода/вывода;

· оргтехнику;

· линии связи;

· оборудование сетей.

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

8. Отступите один абзац и введите следующий текст:

На главную страницу

9. Задайте фон страницы с помощью команд Формат - Фон. Отформатируйте документ. Сохраните документ в формате HTML с помощью команды Файл - Сохранить как Web-страницу с именем ПТС, Тип файла Веб-страница, в своей индивидуальной папке. Закройте документ ПТС. Этот документ будем считать Страницей 1.

Рис. Окно документа ПТС

10. Создайте новый документ WORD и введите следующий текст:

Технологическая цепочка определяет технологические процессы проектирования и обработки данных ЭИС.

11. Отступите один абзац и введите следующий текст:

На главную страницу

12. Задайте фон страницы. Отформатируйте и сохраните документ в формате HTML с помощью команды Файл - Сохранить как Web-страницу, Тип файла Веб-страница, с именем ТЦ в своей индивидуальной папке. Закройте документ ТЦ. Этот документ будем считать Страницей 2.

Рис. Окно документа ТЦ

13. Создайте новый документ WORD и введите следующий текст:

Информационные ресурсы – совокупность данных, представляющих ценность для предприятия и выступающих в качестве материальных ресурсов.

14. Отступите один абзац и введите следующий текст:

На главную страницу

15. Задайте фон страницы. Отформатируйте и сохраните документ в формате HTML с помощью команды Файл - Сохранить как Web-страницу с именем ИР, Тип файла Веб-страница, в своей индивидуальной папке. Закройте документ ИР. Этот документ будем считать Страницей 3.