вмсс

ЛАБОРАТОРНАЯ РАБОТА №1

ПОИСК ИНФОРМАЦИИ В INTERNET
1. ЦЕЛЬ РАБОТЫ

Научиться искать информацию в сети INTERNET и получить знания о
внутреннем устройстве и принципах работы поисковых машин.

2. ПОДГОТОВКА К РАБОТЕ

1. Изучить принцип адресации ресурсов в сети INTERNET [1].
2. Ознакомиться с принципами построения и моделями работы
поисковых машин разных поколений [1,2].
3. Ознакомиться с современной моделью работы поисковой системы [2].
4. Ознакомиться со способами оценки степени релевантности запросу
пользователя информации, найденной поисковой машиной [2].
5. Ознакомиться с функциями оценки релевантности TF/IDF, PageRank,
LexRank.

3. ЛАБОРАТОРНОЕ ЗАДАНИЕ

 Изучить принципы и модель работы поисковой машины Yandex
(http://www.yandex.ru).
 Изучить принципы и модель работы поисковой машины Google
(http://www.google.ru).
 Изучить расширенный режим подачи запросов к поисковой системе.
 Проанализировать различные функции оценки релевантности. Указать
для каждой функции достоинства и недостатки (например, вероятность
выдачи нерелевантной информации).

4. ТРЕБОВАНИЯ

1. Наличие печатного отчета с титульным листом, содержащего
результаты работы.

5. МЕТОДИЧЕСКИЕ УКАЗАНИЯ

Лабораторная работа выполняется с помощью:
 любого браузера (например, Internet Explorer, Mozilla FireFox) в
аудитории, оснащенной доступом к сети интернет;
 любого текстового редактора (например, Open Office или Microsoft
Office).

3


РАБОТА С ЭЛЕКТРОННОЙ ПОЧТОЙ

Научиться работать с электронной почтой.


1. Ознакомиться с моделью работы с электронной почтой [3].
2. Изучить формат электронного письма, обязательные и необязательные
поля.
3. Ознакомиться с протоколами передачи писем [3].
4. Ознакомиться с типами и принципами построения почтовых серверов,
моделью их работы [3].
5. Ознакомиться с методами борьбы со спамом.


 Зарегистрировать почтовый ящик на бесплатном сервисе (например,
mail.ru или gmail.com).
 Отправить письмо с WEB‐интерфейса.
 Установить и настроить почтовый клиент Mozilla Thunderbird.
 Отправить письмо из почтового клиента.
 Настроить фильтрацию и сортировку писем.


1. Наличие печатного отчета с титульным листом, содержащего
2. Наличие зарегистрированного почтового ящика.


Лабораторная работа выполняется с помощью:
 любого браузера (например, Internet Explorer, Mozilla FireFox) в
аудитории, оснащенной доступом к сети интернет;
 почтового клиента Mozilla Thunderbird;
 любого текстового редактора (например, Open Office или Microsoft
Office).

4


РАЗРАБОТКА ПРОСТОЙ WEB‐
СТРАНИЦЫ

Изучить основы языка гипертекстовой разметки HTML и получить
практические навыки разработки простых Web‐страниц.


1. Ознакомиться с основами языка HTML [1,4,5,6]
a. форматом документа;
b. содержимым секции head;
c. тегами форматирования текста;
d. тегами, позволяющими внедрять на страницу графику и
изображения;
e. тегами, позволяющими связывать страницы между собой.


 Разработать 3 WEB‐страницы с применением тегов форматирования
текста HTML.
 Заполнить секции head каждой страницы, как минимум указать
кодировку страниц, заголовки и ключевые слова.
 Связать страницы друг с другом через гиперссылки (одна из страниц
должна быть главной страницей сайта.).
 Добавить на страницы рисунки.
 Добавить на страницы формулу из раздела 3.1, записанную с помощью
тегов форматирования. Вариант формулы определить по номеру в
журнале.

3.1. ВАРИАНТЫ ЗАДАНИЙ

1 E=mc2
2 y(x) = sin(x)·ex
3 f(x) = (e‐x +ex)/2
4 pi=P(x=xi), i=1,2,…n,
5

5

6
7
1 , ∞ ∞
1! 2! 3!
8 √ 4

2
9
cos sin

10 1
1 1
1! 2!
11 1 1

2 sin √
12 /

13
14 /
√
15
1
16

17 1
r a vo r0
2
18
19 1 1
cos cos 2 cos cos
2 2
20
21 1
lim 1
22
23 1

2 1 а
24 , 6.67 10
25
26


 Наличие печатного отчета с титульным листом, содержащего

6

 Наличие трех правильно оформленных WEB‐страниц, с заполненными
секциями head.
 Наличие в разметке страниц тегов форматирования , , <s>, ,
<hr>, <h1>, <h2>, .
 Наличие гиперссылок.
 Наличие формулы на одной из страниц.


Лабораторная работа выполняется с применением Microsoft Visual
Studio 2010 Team Suite. Для начала работы следует запустить среду Visual
Studio и создать новую HTML‐страницу (выбрав в меню пункты «Создать»,
«Файл» (рис. 1) или нажав Ctrl+N) (рис. 2).

Рис. 1. Создание новой HTML‐страницы в Visual Studio 2010

В результате среда перейдет в режим редактирования исходного кода
страницы (рис. 3). При этом автоматически была сгенерирована структура
документа. Visual Studio 2010 поддерживает автоматическую проверку
исходного кода страницы и обеспечивает подсветку ошибочных
конструкций. При этом поддерживается выбор стандарта, которому должна
соответствовать редактируемая страница (рис. 4). Редактирование может
осуществляться как на уровне исходного кода, так и в визуальном дизайнере.
Необходимый режим может быть выбран с помощью переключателя внизу
(рис. 5).

7

Рис. 2. Выбор типа создаваемого файла

Рис. 3. Visual Studio 2010 в режиме редактирования HTML страницы

8

Рис. 4. Выбор стандарта, которому должна соответствовать редактируемая
HTML страница

Рис. 5. Переключение между режимами редактирования HTML страницы
В режиме визуального конструктора (рис. 6) средой можно пользоваться
с той же легкостью, как и текстовым редактором (типа Microsoft Office Word),
при этом все необходимые теги в исходном коде генерируются
автоматически. Такой режим удобен на раннем этапе изучения языка HTML.

Рис. 6. Редактирование HTML страницы в режиме визуального конструктора

9

В визуальном режиме также отображаются вспомогательные элементы,
которые не будут показываться браузером. Например (рис. 6), при
редактировании текста рамкой с якорем «p» показан тег, в рамках которого
изменяется текст. Для упрощения перехода от выделения дочернего тега к
выделению родительского может использоваться динамический указатель
иерархии тегов, располагающийся внизу рядом с переключателем режимов
редактирования (рис. 6).
Также предусмотрен комбинированный режим (рис. 7), в котором
одновременно доступны и визуальный конструктор и редактор исходного
кода страницы. При этом при изменении в визуальном конструкторе
исходный код правится автоматически, а при ручном изменении исходного
кода автоматической синхронизации не производится, среда показывает
соответствующее сообщение (рис. 8), по щелчку на которое перечитывается
исходный код и обновляется конструктор.

Рис. 7. Комбинированный режим редактирования HTML страницы

10

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

Рис. 8. Сообщение среды о рассинхронизации страницы в конструкторе и
редакторе исходных текстов.

Редактор исходного кода поддерживает автопродолжение набираемых
тегов, что ускоряет процесс разработки страницы и помогает при изучении
тегов (рис. 9). При этом при наборе парного тега его закрывающий тег
вставляется в текст страницы автоматически, при этом курсор остается
внутри тега (рис. 8).
В режиме визуального конструктора доступны конструктор стилей,
инструментальная панель и панель элементов (рис. 10). Через
инструментальную панель можно добавить на страницу рисунки, линии,
таблицы и элементы управления.
С помощью инструментальной панели (рис. 11) можно управлять
настройками шрифта, его стиля, цвета и т.д. (рис. 11, 12). При этом при
изменении настроек стилей через конструктор будет автоматически
регенерирована или исправлена соответствующая часть разметки (рис. 13).
Также панель позволяет применять к фрагментам текста имеющиеся
стандартные или пользовательские стили (рис. 14). Текущий стиль того или
иного элемента можно изменять с помощью редактора свойств (рис. 15).
Для просмотра разрабатываемой страницы в браузере предусмотрена
команда контекстного меню (рис. 16) и комбинация клавиш Ctrl+Shiwt+W.

11

Рис. 9. Автоматическое продолжение тегов в режиме редактирования
исходного текста

Рис. 10. Вид панели элементов (toolbox) в режиме визуального конструктора

12

Рис. 11. Инструментальные панели для форматирования текста

Рис. 12. Окно выбора цвета

13

Рис. 13. Автоматическая генерация стилей при изменении настроек
отображения текста в конструкторе страницы

Рис. 14. Выбор стиля абзаца

14

Рис. 15. Отображение стилей в редакторе свойств

Рис. 16. Контекстное меню в режиме редактирования страницы

15

ПРИМЕНЕНИЕ КАСКАДНЫХ ТАБЛИЦ
СТИЛЕЙ (CSS)

Изучить каскадные таблицы стилей (CSS) и научиться применять их на
практике.


1. Ознакомиться с технологией CSS [4, 7‐12].
2. Изучить базовые принципы привязки стилей к элементам страницы [7].
3. Изучить стили форматирования текста [8].


 Модифицировать разработанные в рамках лабораторной работы №3
страницы, внедрив в них поддержку CSS.


 Настройки стилей должны размещаться в отдельном файле (например,
styles.css).
 В коде страниц не должно присутствовать тегов , , <s>, , <hr>,
. Соответствующие стили должны быть реализованы через CSS.


Studio 2010 Team Suite. Встроенный в это средство визуальный редактор
стилей существенно упрощает разработку CSS.
Для создания новых настроек стиля необходимо выбрать в панели
инструментов «Применить новый стиль» (рис. 17). В результате откроется
экран настроек стиля (рис. 18). При этом с помощью этого мастера можно как
создать новый стиль, так и подправить имеющийся (рис. 19). Так, на рис. 20
приведен пример изменения стиля для ссылки. При переопределении того
или иного значения с помощью доступных элементов управления в разделе
«описание» происходит формирование текстового представления стиля.

16

Например, на рис. 21 показано изменение при выборе настройки text‐
decoration : blink.

Рис. 17. Создание нового стиля

Рис. 18. Редактирование нового стиля

17

При этом среда поддерживает как генерацию стилей в отдельном файле
(рис. 22), так и прямое встраивание стиля на страницу как в секцию head (рис.
23), так и в inline‐режиме в соответствующие теги.
Конструктор стилей поддерживает настройку значительного числа
параметров, сгруппированных в группы шрифт (рис. 18), блок (рис. 24), фон
(рис. 26), граница (рис. 28), поле (рис. 29), положение (рис. 30), макет (рис.
31), список, таблица. При этом для ряда параметров (например, таких как
выравнивание, привязки и т.д.) показываются варианты значений,
предусмотренные стандартом (рис. 25).
Для переопределения цветов доступен специальный редактор (рис. 27),
обеспечивающий доступ к стандартной палитре и сохранение ряда недавно
использованных нестандартных цветов.

Рис. 19. Переопределение стиля

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

18

Конструктор стиля границ сделан очень гибким и позволяет задать тип
границы, ее толщину и цвет как для всей границы элемента, так и для
каждой его грани по отдельности (рис. 28).
Редактор отступов позволяет задать отступы как между границей
элемента и иными элементами (margin), так и отступ дочерних элементов
или текстов от границ элемента (padding). При этом также поддерживается
возможность раздельной установки этих значений по каждой из четырех
граней.

Рис. 20. Переопределение стиля для ссылки

19

Рис. 21. Переопределение стиля для ссылки

Рис. 22. Вид Visual Studio в режиме редактирования CSS

20

Рис. 23. Сгенерированный стиль, встроенный в саму страницу

21

Рис. 24. Настройки блока текста

Рис. 25. Варианты вертикальной привязки и выравнивания

22

Рис. 26. Настройка фона

Рис. 27. Выбор цвета

23

Рис. 28. Настройка границы

24

Рис. 29. Настройка отступов

Рис. 30. Настройка положения

25

Рис. 31. Настройка макета
Создать новый файл для хранения стилей можно через главное меню
(рис. 32). При этом изначально файл открывается в режиме редактирования
текста (рис. 33), однако есть несколько возможность вызова конструктора
стилей. Например, при помещении курсора в то или иное определение стиля
оно также выбирается в настройках свойств, откуда можно перейти в режим
конструктора (рис. 33). Также конструктор стилей можно вызвать путем
нажатия на кнопку «Построить стиль», рис. 34.

Рис. 32. Создание отдельного файла для таблицы стилей

26

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

Рис. 33. Окно VisualStudio в режиме редактирования файла каскадной
таблицы стилей (CSS)

Рис. 34. Вызов конструктора стилей

27

Рис. 35. Выбор стандарта CSS

Также доступна возможность визуального редактирования правил
стилей (рис. 36, 37).

Рис. 36. Создание правила стиля

28

Рис. 37. Редактирование правила стиля


РАЗРАБОТКА WEB‐СТРАНИЦ,
СОВМЕСТИМЫХ СО СТАНДАРТОМ
XHTML

Научиться разрабатывать WEB‐страницы, совместимые со стандартом
XHTML 1.1.


1. Ознакомиться с стандартом XHTML [13].
2. Ознакомиться с различиями HTML и XHTML [13].


1. Привести разработанные в рамках лабораторных работ №3‐4 страницы
в соответствие со стандартом XHTML 1.1.
2. Осуществить проверку страниц с помощью валидатора XHTML,
встроенного в Visual Studio.

29

3. Осуществить проверку страниц с помощью валидатора XHTML,
предоставляемого консорциумом W3C (http://validator.w3c.org).
4. Встроить на страницы значок XHTML‐совместимости.


 Соответствие страниц лабораторным работам №3 и №4.
 Соответствие страниц стандарту XHTML 1.1.
 Наличие отчета валидатора XHTML, содержащего результаты проверки
страниц на соответствие стандарту XHTML 1.1.


Studio 2010 Team Suite. Как отмечалось ранее, среда умеет осуществлять
проверку редактируемой HTML‐страницы на соответствие стандартам. Для
выполнения лабораторной работы следует во всех разработанных страницах
осуществить переключение на стандарт XHTML 1.1 (рис. 38).
Далее следует убедиться что:
 Все теги закрыты. Теги, которые не имеют закрывающего тега
(например, <img> или ) должны иметь на конце / (например,
 ).
 Все атрибуты записаны в развёрнутой форме.
 Имена тегов и атрибутов записаны строчными буквами (например, <a
href="" /> вместо <A HREF="" />).
 Симвроы < и & во всех строковых константах (в т.ч. в URL) должны
замещаться < и & соответственно.
 В качестве кодировки страниц установлена UTF‐8.
Проверить соответствие редактируемой страницы стандарту XHTML 1.1
можно нажав на панели кнопку «проверить страницу на соответствие
специальным возможностям». В результате будет показано окно настроек
валидатора (рис. 39). После нажатия на кнопку «Ok» будет осуществлена
проверка страницы и найденные ошибки будут показаны в традиционной
для Visual Studio форме – в виде списка (рис. 40). При выборе в этом списке
той или иной ошибки Visual Studio обеспечивает переход к месту в исходном
коде, которое ее обуславливает. Помимо ошибок Visual Studio также дает
список советов и рекомендаций (рис. 41), т.е. найденные проблемы не
являются нарушением стандарта XHTML, однако по той или иной причине
Visual Studio советует применить другое решение, раскрываемое в
рекомендации.

30

Рис. 38. Выбор используемого стандарта

Рис. 39. Настройка средства проверки

31

Рис. 40. Отображение ошибок, найденных в разметке страницы

Рис. 41. Рекомендации

32

Альтернативой рассмотренным возможностям Visual Studio в плане
проверки на соответствие XHTML 1.1 является широко применимый на
практике валидатор, предоставляемый бесплатно консорциумом W3C. Он
доступен по адресу http://validator.w3.org/ . В качестве исходных данных для
проверки валидатору требуется ссылка на страницу. Ее можно задать на
открывшейся странице, либо прямо в ссылке:
http://validator.w3.org/check?uri=http://www.my.ru/page1.html
В результате проверки генерируется отчет (рис. 42). Отчет содержит
список ошибок, места их обнаружения и рекомендации по их устранению
(рис. 43). В случае, если валидатор не найдет ошибок на странице он
предложит скачать код значка совместимости с XHTML для размещения на
странице.
Типовой ситуацией является дальнейшая проверка страниц сайта на
соответствие стандарту XHTML с помощью этого значка после каждого
изменения.

Рис. 42. Отчет валидатора XHTML

33

Рис. 43. Список проблем, найденных валидатором XHTML


РАЗРАБОТКА WEB‐СТРАНИЦ,
СОДЕРЖАЩИХ ТАБЛИЦЫ И СПИСКИ

Научиться оформлять таблицы на WEB‐страницах. Получить навыки
оформления маркированных и нумерованных списков на WEB‐страницах.

34


1. Ознакомиться с тегами HTML, отвечающими за разметку таблиц [1,4].
2. Ознакомиться со стилями таблиц в HTML [12].
3. Ознакомиться с способом разметки маркированных списков [1,4].
4. Ознакомиться с способом разметки нумерованных списков [1,4].


1. Добавить на одну из страниц разработанного ресурса таблицу из
списка в пункте 3.1 (вариант таблицы определить по номеру в
журнале).
2. Создать информационную таблицу с объединением ячеек,
выделением ячеек цветом, границей.
3. Разработать страницу, содержащую несколько маркированных списков
с различными типами маркеров:
4. Разработать страницу, содержащую несколько нумерованных списков
с различными типами нумерации:
5. Разработать страницу, содержащую маркированный список
нумерованных списков.


1 2

3 4

35

5 6

7 8

9 10

11 12

36

13 14

15 16

17 18

19 20

37


результаты работы:
o теоретическое введение;
o снимок экрана полученной страницы;
o исходный код полученной страницы.
 Наличие таблицы из п. 3.1.
 Совместимость со стандартом XHTML 1.1.


Studio Team Suite 2010. Среда поддерживает редактирование таблиц в
режиме конструктора (рис. 44). С помощью конструктора можно добавлять и
удалять столбцы и строки, менять содержимое ячеек.

Рис. 44. Конструирование таблицы

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

38

Рис. 45. Настройка стиля границ

Рис. 46. Настройка стилей таблиц

39

Рис. 47. Автоматическая генерация стилей
Простейшим способом разметки списков на странице является
использование кнопок инструментальной панели (маркированный список,
нумерованный список) по аналогии с тем, как это делается в текстовых
редакторах типа Microsoft Office Word (рис. 47). При этом соответствующие
теги генерируются автоматически (рис. 48). Среда также позволяет
настраивать в режиме конструктора сложные стили списков – например
заменять стандартные маркеры своими изображениями, или указывать
местоположение маркеров (рис. 49).

Рис. 47. Стили списков на инструментальной панели

40

Рис. 48. Редактирование маркированного списка

Рис. 49. Стили списков


ИСПОЛЬЗОВАНИЕ СЛОЕВ

Научиться использовать слои при форматировании текста.

41


1. Ознакомиться с способом организации и отображения слоев в HTML
[4].
2. Ознакомиться с стилями, применимыми к слоям [9].
3. Ознакомиться с моделью позиционирования слоев [10].


1. Разработать страницу, содержащую слои.
2. Реализовать наслоение изображений (по принципу колоды карт) с
помощью слоев и настройки Z‐индексов (см. задание в п. 3.1)


Вариант №1: Вариант №2: Вариант №3:


 Наличие на странице нескольких слоев.
 Наличие «колоды» изображений на одной из страниц.


Studio Team Suite 2010. Слои могут добавляться и позиционироваться в
режиме конструктора (рис. 50). При этом настройки положения и макета
слоя могут задаваться в конструкторе стилей (рис. 51, 52).

42

Рис. 50. Добавление на страницу слоя

43

Рис. 51. Настройка положения и размеров слоя

44

Рис. 52. Настройка макета слоя


РАЗРАБОТКА СТРАНИЦ С
СЕГМЕНТИРОВАННОЙ ГРАФИКОЙ,
АНИМИРОВАННОЙ ГРАФИКОЙ И
МУЛЬТИМЕДИА

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

45

1. Ознакомиться с способом организации карт изображений [14].
2. Ознакомиться с способом интеграции на html‐страницы мультимедиа‐
контента.
3. Ознакомиться с средствами разработки gif‐анимации.
4. Ознакомиться с стандартами разработки рекламных баннеров.


1. Добавить на одну из страниц карту изображений с несколькими
ссылками использую теги <map> и <area>.
2. Добавить на одну из страниц карту изображений, содержащую
области, показанные в задании в пункте 3.1 (номер варианта
определить по журналу).
3. Реализовать дубликат карты изображения (созданной в рамках п.1) с
применением CSS и без применения тегов map и area.
4. Разработать и включить на одну из созданных ранее страниц gif‐
анимацию.
5. Включить на страницу звуковой файл.
6. Включить на страницу видео‐ролик.


1 2 3

4 5 6

7 8 9

46

10 11 12

13 14 15

16 17 18


 Наличие трех карт изображений (по п.1, 2 и 3 задания).
 Наличие встроенной gif‐анимации.
 Наличие видео‐ролика.


Studio Team Suite 2010.  Для создания карты изображения можно
использовать либо графические редакторы (помогут с определением
координат), либо специализированные генераторы. К примеру, один из
таких генераторов доступен по адресу:
http://www.maschek.hu/imagemap/imgmap.
На этой странице можно осуществить загрузку изображения (из файла
или с сети), выделить на ней несколько областей и привязать к ним ссылки. В
результате генерируется код для копирования на HTML‐страницу.

47

Рис. 53. Редактор карт изображений

ЛАБОРАТОРНАЯ РАБОТА №9.1

ВЕРСТКА СТРАНИЦ С ПРИМЕНЕНИЕМ
ТАБЛИЦ

Получить навыки верстки каркасов сайтов на основе таблиц.


1. Ознакомиться с технологией использования таблиц для разметки
содержимого сайта [5].
2. Выделить общие элементы разметки в имеющихся страницах.


1. Сделать каркас сайта с применением таблиц на основе макета из

48

задания 3.1.
2. Организовать меню сайта (на основе ссылок).


Вариант №1 Вариант №2 Вариант №3




49


Вариант №16


 Наличие нескольких страниц, выполненных в едином стиле, с
применением таблиц, в соответствии с макетом по варианту из п. 3.1.


Studio 2010. Изначально рекомендуется изготовить и отладить макет. Далее
преобразовать в него имеющиеся страницы сайта.


ВЕРСТКА СТРАНИЦ С ПРИМЕНЕНИЕМ
СЛОЕВ

Получить навыки верстки сайтов на основе слоев.


50

1. Ознакомиться с технологией использования слоев для разметки
содержимого сайта [4, 8].


1. Сделать каркас сайта с применением слоев на основе макета из
задания 3.1 лабораторной работы №9.1.
2. Организовать меню сайта (на основе ссылок).


 Наличие нескольких страниц, выполненных в едином стиле, с
применением слоев, в соответствии с макетом по варианту из п. 3.1.


Studio 2010. Изначально рекомендуется изготовить и отладить макет,
выделить в отдельный файл css. Далее преобразовать на основе полученного
макета имеющиеся страницы сайта.


ПРИМЕНЕНИЕМ ФРЕЙМОВ

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


1. Ознакомиться с технологией фреймов [1].
2. Ознакомиться с технологией организации ссылок в странице,
содержащей фреймы [1].


1. Разработать с применением фреймов каркас сайта на основе макета из
задания 3.1.
2. Организовать ссылки таким образом, чтобы при нажатии ссылки во
фреме‐меню изменялось содержимое фрейма‐страницы.

51








52

 Наличие не менее 5 фреймов.


Studio 2010.


ДИНАМИЧЕСКИМ СОДЕРЖИМЫМ:
ИСПОЛЬЗОВАНИЕ ЯЗЫКА
ВЫПОЛНЯЕМЫХ СЦЕНАРИЕВ
JAVASCRIPT

Получить навыки использования языка выполняемых сценариев
JavaScript для организации динамического содержимого.


1. Ознакомиться с способами создания интерактивных Web‐сайтов и
DHTML [15].
2. Ознакомиться с объектной моделью документа (DOM) [16].
3. Ознакомиться с основами разработки скриптов на языке JavaScript [17].


1. Дополнить одну из разработанных ранее страниц Java‐скриптом,
перехватывающим событие onload и показывающим сообщение с
приветствием.
2. Добавить на одну из страниц часы (цифровые).
3. Добавить на одну из страниц статический календарь, отображающий
текущую дату.
4. Добавить страницу с клиентским скриптом, задающим пользователю
ряд вопросов и генерирующим на основе его ответов страницу в новом
окне.
5. Добавить на страницу «плавающий» (от границы к границе) рекламный
слой.

53


 Наличие работающих часов на странице сайта.
 Наличие календаря.
 Наличие формы с генератором страницы по ответам пользователя.
 Наличие «плавающего» слоя.


Studio Team Suite 2010. Скрипты могут встраиваться и редактироваться как в
составе страниц, так и во внешних файлах. При выполнении работы
рекомендуется максимально отделять элементы верстки от скриптов,
размещая последние во внешних файлах. Среда Visual Studio поддерживает
функцию code‐completion при редактировании скриптов (рис. 54). При этом
также показываются подсказки по свойствам и функциям стандартных
классов объектной модели документа (DOM), что очень удобно на этапе
обучения (рис. 55).

Рис. 54. Редактирование скрипта в Visual Studio

54

Рис. 55. Отображение методов класса document


ДИНАМИЧЕСКИМ СОДЕРЖИМЫМ:
ИСПОЛЬЗОВАНИЕ ЯЗЫКА
ВЫПОЛНЯЕМЫХ СЦЕНАРИЕВ
VBSCRIPT

Получить навыки использования языка выполняемых сценариев
VBScript для организации динамического содержимого.


55

1. Ознакомиться с способами создания интерактивных Web‐сайтов и
DHTML [17].
2. Ознакомиться с объектной моделью документа (DOM) [17].
3. Ознакомиться с основами разработки скриптов на языке VBScript [17].


1. Добавить на одну из страниц статический календарь, отображающий
текущую дату.
2. Добавить страницу с клиентским скриптом, задающим пользователю
ряд вопросов и генерирующим на основе его ответов страницу в новом
окне.
3. Добавить на страницу «мерцающий» (то исчезающий, то
появляющийся) рекламный слой.
4. Добавить на страницу скрипт обеспечивающий отображение полного
абзаца текста при наведении мыши на его сокращенную версию.


 Наличие календаря.
 Наличие формы с генератором страницы по ответам пользователя.
 Наличие «мерцающего» слоя.


Studio Team Suite 2010. Для выполнения работы необходимо
воспользоваться стандартными событиями объектной модели документа
(onload, onclick и т.д.).


НАСТРОЙКА WEB‐СЕРВЕРА

Получить опыт установки и настройки Web‐сервера Apache. Получить
опыт установки и настройки Web‐сервера Microsoft IIS.


1. Ознакомиться с возможностями web‐сервера Apache [18].

56

2. Ознакомиться с процессом установки web‐сервера Apache [18].
3. Ознакомиться с содержимым конфигурационных файлов Web‐сервера
Apache [18].
4. Ознакомиться с возможностями web‐сервера Microsoft IIS [19].
5. Ознакомиться с процессом установки и настройки web‐сервера
Microsoft IIS [19].


1. Установить web‐сервер Apache.
a. Сконфигурировать web‐сервер.
b. Подключить php и cgi.
c. Настроить виртуальный хост (virtualhost).
d. Настроить сервер таким образом, чтобы он отображал страницы,
разработанные в рамках предыдущих лабораторных работ.
2. Сконфигурировать web‐сервер Microsoft IIS.
a. Убедиться в работоспособности ASP.
b. Настроить сервер таким образом, чтобы он отображал страницы,
разработанные в рамках предыдущих лабораторных работ.




Для установки следует воспользоваться дистрибутивом с официального
сайта http://httpd.apache.org/.


РАЗРАБОТКА СОБСТВЕННОГО WEB‐
СЕРВЕРА С ПРИМЕНЕНИЕМ ЯЗЫКА C#

Получить навык реализации собственного web‐сервера на основе
стандартных классов, входящих в Microsoft .Net Framework 4.0.


57

1. Ознакомиться с классами Microsoft .Net Framework из пространства
имен System.Net [20].


1. Реализовать web‐сервер с применением языка C#.
2. Обеспечить программную генерацию web‐страницы на сервере при
получении запроса с клиента.




Studio Team Suite 2010.


ПРИМЕНЕНИЕМ ТЕХНОЛОГИИ SSI

Получить навыки организации динамической сборки web‐страниц на
серверной стороне из повторно используемых частей.


1. Ознакомиться с технологией Server Side Include (SSI) [1].
2. Определить какие элементы макета, разработанного в рамках
лабораторных работ № 9.1 или 9.2,  дублируются на каждой странице.


1. Реализовать с применением SSI сайт, макет которого разрабатывался в
рамках лабораторных работ № 9.1 или 9.2.


 Наличие компонента страниц, используемого повторно.

58


Studio 2010 Team Suite и веб сервера Apache.


ИСПОЛЬЗОВАНИЕ ПРОСТЫХ
СЕРВЕРНЫХ CGI СКРИПТОВ

Получить навыки разработки простейших серверных CGI скриптов с
применением одного из императивных языков программирования.


1. Ознакомиться с технологией CGI [1].
2. Ознакомиться с настройкой CGI в Web‐сервере.
3. Ознакомиться с способом анализа командной строки браузера.


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




Studio 2010 Team Suite и языков программирования Visual C++ или Visual C#.
Следует разработать консольное приложение, принимающее
параметры с клиентского приложения через командную строку браузера (в
приложении следует считать их с потока stdin), а для генерации результат а
следует воспользоваться прямым выводом HTML кода в выходной поток
std::out.

59


РАЗРАБОТКА СТРАНИЦ С ФОРМАМИ И
ЭЛЕМЕНТАМИ УПРАВЛЕНИЯ

Получить навыки организации интерактивных html‐страниц с
применением полей ввода, выбора и кнопок.


1. Ознакомиться с способом размещения на Web‐страницах стандартных
элементов управления [1,4].


1. Разработать страницу для тестирования знаний (страницы содержат
вопросы и варианты ответов, есть таймер для ограничения времени
ответа).



Studio 2010 Team Suite. Необходимое множество элементов управления
может быть размещено на странице в режиме конструктора (рис. 56). Среда
разработки позволяет размещать на страницах широкий набор элементов
управления – кнопки, поля ввода, выпадающие списки, элементы
множественного и единичного выбора (рис. 57).

60

Рис. 56. Размещение на странице элементов управления

Рис. 57. Доступные элементы управления

61


ДИНАМИЧЕСКИМИ МЕНЮ

Научиться реализовывать динамические меню.


1. Ознакомиться с технологиями организации динамических меню с
применением слоев, списков и CSS [13].


1. Реализовать на Web‐странице меню, выглядящее как меню в Windows‐
приложениях, и содержащее не менее двух уровней вложенности.




Studio 2010 Team Suite.


ПРИМЕНЕНИЕМ ЯЗЫКА PHP

Получить навыки разработки серверных скриптов с применением языка
PHP.


1. Ознакомиться с основными конструкциями языка PHP [21,22].

62


1. Реализовать счетчик скачиваний файла.
2. Реализовать голосование.


 Наличие страницы, на которой размещен счетчик скачиваний файла.
 Наличие страницы, содержащей голосование.


Studio 2010 Team Suite.


ПРИМЕНЕНИЕМ ЯЗЫКА ТЕХНОЛОГИИ
ASP

Получить навыки реализации серверных скриптов с применением
технологии Active Server Pages (ASP).


1. Ознакомиться с основными концепциями технологии ASP [23, 24].


1. Реализовать ограничение доступа к сайту (регистрацию пользователей,
аутентификацию пользователей и разграничить доступ к элементам
страниц).
2. Реализовать страницу, содержащую голосование.
3. Реализовать страницу, позволяющую скачать файл (пользователь
выбирает файл из предлагаемых сервером, нажимает кнопку
«скачать»  и сервер передает файл на клиентскую сторону).

63


 Возможность регистрации нового пользователя.
 Возможность аутентификации пользователя и учет его уровня доступа
на страницах (становятся доступными недоступные в анонимном
режиме разделы).
 Наличие страницы с голосованием.
 Возможность скачивать файл.


Studio 2010 Team Suite. Для создания нового решения следует выбрать пункт
меню «Файл» ‐ «Создать» ‐ «Веб‐узел» (рис. 58) а затем указать с помощью
какого языка будет реализовываться серверная часть (есть выбор между
Visual Basic и Visual C# ‐ рис. 59, 60). В результате будут сгенерирован каркас
сайта. Страницы сайта могут редактироваться как в режиме изменения
исходного кода, так и в режиме конструктора (рис. 61).

Рис. 58. Создание нового ASP‐решения

64

Рис. 59. Создание Web‐узла ASP.NET с применением Visual Basic

Рис. 60. Создание Web‐узла ASP.NET с применением Visual C#

65

Рис. 61. Содержимое Web‐узла ASP.NET, сгенерированное Visual Studio


РЕАЛИЗАЦЯ ВОЗМОЖНОСТИ ПОИСКА
ПО САЙТУ

Научиться встраивать поиск Google на своем сайте.


1. Ознакомиться с программой Google AdSense [25].
2. Ознакомиться с системой пользовательского поиска Google [25].


1. Зарегистрироваться в программе Google AdSense и добавить на
страницу сайта, разработанного в рамках лабораторных работ №3‐12,

66

форму поиска Google.


 Наличие работающей формы поиска.


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


ПРИМЕНЕНИЕ CMS НА ПРИМЕРЕ CMS
JOOMLA

Получить навыки работы с системой управления контентом (CMS) на
примере CMS Joomla.


1. Ознакомиться с задачами, решаемыми системами управления
контентом (CMS) [26].
2. Ознакомиться с возможностями CMS Joomla.


1. Установить и настроить CMS Joomla.




Лабораторная работа выполняется с применением Microsoft Office Visio
(рис. 24).

67

вмсс

Recommended

Recommended

More Related Content

Featured

Featured (20)

вмсс