Веб-технологии и веб-дизайн
.pdfМинистерство образования и науки Украины Государственное высшее учебное заведение «Приазовский государственный технический университет» Кафедра компьютерных наук
Алешин С. В.
ВЕБ-ТЕХНОЛОГИИ И ВЕБ-ДИЗАЙН
Методические указания по выполнению лабораторных работ
по курсу «Веб-технологии и веб-дизайн» для студентов направления подготовки 6.050101 «Компьютерные науки» дневной формы обучения
Часть 1
Мариуполь
2013
УДК 004.738.5 (083)
Веб-технологии и веб-дизайн [Электронный ресурс] : методические указания по выполнению лабораторных работ по курсу «Веб-технологии и веб-дизайн» для студентов направления подготовки 6.050101 «Компьютерные науки» дневной формы обучения. Ч. 1 / сост. С. В. Алешин. – Мариуполь : ГВУЗ «ПГТУ», 2013. – 94 с. – Режим доступа : http://umm.pstu.edu
Содержит основные положения и задание на выполнение лабораторных работ по дисциплине «Веб-технологии и веб-дизайн», содержание работ, теоретические сведения, разрабатываемые вопросы, порядок выполнения задания, контрольные вопросы.
Составитель |
С. В. Алёшин, старший преподаватель |
Рецензенты: |
Д. В. Гранкин, доцент; |
|
С. И. Володин, старший преподаватель. |
Утверждено на заседании кафедры компьютерных наук,
протокол № 4 от 08.11.2013 г.
Утверждено методической советом
факультета информационных технологий, протокол № 3 от 04.12.2013 г.
©ГВУЗ «ПГТУ», 2013
СОДЕРЖАНИЕ |
|
ВВЕДЕНИЕ ...................................................................................................................... |
6 |
Лабораторная работа № 1. РАБОТА С WEB-ДОКУМЕНТАМИ СЕТИ ИНТЕРНЕТ |
|
........................................................................................................................................... |
7 |
1.1 Основные теоретические положения и методика выполнения работы ........... |
7 |
1.1.1 Браузер и его особенности.............................................................................. |
7 |
1.1.2 Запуск браузера................................................................................................ |
7 |
1.1.3 Открытие и просмотр Web-страниц .............................................................. |
8 |
1.1.4 Работа с гиперссылками ................................................................................. |
9 |
1.1.5 Контекстное меню гиперссылок и картинок ................................................ |
9 |
1.1.6 Приемы управления браузером.................................................................... |
10 |
1.1.7 Работа с несколькими окнами ...................................................................... |
11 |
1.1.8 Настройка свойств браузера......................................................................... |
12 |
1.2 Задание и порядок выполнения работы............................................................. |
14 |
1.3 Структура отчета и требования к оформлению................................................ |
14 |
1.4 Контрольные вопросы ......................................................................................... |
14 |
Лабораторная работа № 2. ПОИСК ИНФОРМАЦИИ В КАТАЛОГЕ И ИНДЕКСЕ
......................................................................................................................................... |
|
15 |
2.1 |
Основные теоретические положения и методика выполнения работы ......... |
15 |
2.2 Задание и порядок выполнения работы............................................................. |
26 |
|
2.2.1 Задание на поиск в каталоге ......................................................................... |
26 |
|
2.2.2 Задание на поиск в индексе .......................................................................... |
27 |
|
2.3 |
Структура отчета и требования к оформлению................................................ |
27 |
2.4 |
Контрольные вопросы ......................................................................................... |
27 |
Лабораторная работа № 3. ОБЗОР И АНАЛИЗ ИНФОРМАЦИОННО- |
|
|
ПОИСКОВОЙ СИСТЕМЫ .......................................................................................... |
28 |
|
3.1 |
Основные теоретические положения и методика выполнения работы ......... |
28 |
3.1.1 Логические функции ИПС «Яндекс» .......................................................... |
28 |
|
3.1.2 Пример выполнения работы......................................................................... |
29 |
|
3.2 Задание и порядок выполнения работы............................................................. |
39 |
|
3.3 |
Структура отчета и требования к оформлению................................................ |
43 |
3.4 |
Контрольные вопросы ......................................................................................... |
43 |
Лабораторная работа № 4. РАБОТА С ЭЛЕКТРОННОЙ ПОЧТОЙ В |
|
|
ПРОГРАММЕ OUTLOOK EXPRESS ......................................................................... |
44 |
|
4.1 |
Основные теоретические положения и методика выполнения работы ......... |
44 |
4.1.1 Общие сведения............................................................................................. |
44 |
|
4.1.2 Создание учетной записи.............................................................................. |
44 |
|
4.1.3 Создание сообщения электронной почты................................................... |
46 |
|
4.1.4 Подготовка ответов на сообщения .............................................................. |
47 |
|
4.2 Задание и порядок выполнения работы............................................................. |
48 |
|
4.3 |
Структура отчета и требования к оформлению................................................ |
49 |
4.4 |
Контрольные вопросы ......................................................................................... |
49 |
|
3 |
|
Лабораторная работа № 5. РАБОТА С ТЕЛЕКОНФЕРЕНЦИЯМИ В |
|
|
ПРОГРАММЕ OUTLOOK EXPRESS ......................................................................... |
50 |
|
5.1 |
Основные теоретические положения и методика выполнения работы ......... |
50 |
5.1.1 Общие сведения............................................................................................. |
50 |
|
5.1.2 Создание учетной записи.............................................................................. |
51 |
|
5.1.3 Чтение сообщений телеконференций......................................................... |
51 |
|
5.2 Задание и порядок выполнения работы............................................................. |
54 |
|
5.3 |
Структура отчета и требования к оформлению................................................ |
55 |
5.4 |
Контрольные вопросы ......................................................................................... |
55 |
Лабораторная работа № 6. МЕТОДЫ СОЗДАНИЯ АБЗАЦНОГО ОТСТУПА В |
|
|
ДОКУМЕНТАХ HTML ................................................................................................ |
56 |
|
6.1 |
Основные теоретические положения и методика выполнения работы ......... |
56 |
6.1.1 HTML – это язык тэгов ................................................................................. |
56 |
|
6.1.2 Границы документа ...................................................................................... |
56 |
|
6.1.3 Заголовок документа ..................................................................................... |
57 |
|
6.1.4 Название документа ...................................................................................... |
57 |
|
6.1.5 Тело документа .............................................................................................. |
57 |
|
6.1.6 Атрибуты элемента BODY ........................................................................... |
58 |
|
6.2 Задание и порядок выполнения работы............................................................. |
60 |
|
6.3 |
Структура отчета и требования к оформлению................................................ |
61 |
6.4 |
Контрольные вопросы ......................................................................................... |
61 |
Лабораторная работа № 7. РАЗМЕТКА ТЕКСТОВОГО ДОКУМЕНТА ТЕГАМИ
ЯЗЫКА HTML ............................................................................................................... |
62 |
|
7.1 |
Основные теоретические положения и методика выполнения работы ......... |
62 |
7.1.1 Заголовки........................................................................................................ |
62 |
|
7.1.2 Создание списков в документе HTML ........................................................ |
62 |
|
7.1.3 Гиперссылки и закладки ............................................................................... |
65 |
|
7.2 Задание и порядок выполнения работы............................................................. |
66 |
|
7.3 |
Структура отчета и требования к оформлению................................................ |
68 |
7.4 |
Контрольные вопросы ......................................................................................... |
68 |
Лабораторная работа № 8. ИСПОЛЬЗОВАНИЕ ТАБЛИЦ ДЛЯ ОФОРМЛЕНИЯ |
|
|
WEB-СТРАНИЦЫ ........................................................................................................ |
69 |
|
8.1 |
Основные теоретические положения и методика выполнения работы ......... |
69 |
8.1.1 Создание таблиц в HTML ............................................................................. |
69 |
|
8.1.2 Использование таблиц в дизайне страницы ............................................... |
73 |
|
8.2 Задание и порядок выполнения работы............................................................. |
74 |
|
8.3 |
Структура отчета и требования к оформлению................................................ |
79 |
8.4 |
Контрольные вопросы ......................................................................................... |
79 |
Лабораторная работа № 9. ФРЕЙМОВОЕ ОФОРМЛЕНИЕ САЙТА НА ПРИМЕРЕ
ФОТОАЛЬБОМА .......................................................................................................... |
80 |
9.1 Основные теоретические положения и методика выполнения работы ......... |
80 |
9.1.1 Как работают фреймы ................................................................................... |
80 |
9.1.2 Создание простой страницы с фреймами ................................................... |
80 |
4 |
|
9.1.3 Макетирование фреймов – тег <FRAMESET>........................................... |
82 |
|
9.1.4 Атрибуты ROWS и СОLS ............................................................................. |
82 |
|
9.1.5 Задание содержимого фрейма – элемент FRАМЕ ..................................... |
83 |
|
9.1.6 Вложенные и множественные кадровые структуры.................................. |
85 |
|
9.2 Задание и порядок выполнения работы............................................................. |
85 |
|
9.3 Структура отчета и требования к оформлению................................................ |
85 |
|
9.4 Контрольные вопросы ......................................................................................... |
86 |
|
Лабораторная работа № 10. СОЗДАНИЕ ИНТЕРАКТИВНЫХ ФОРМ В |
|
|
ДОКУМЕНТЕ HTML.................................................................................................... |
87 |
|
10.1 |
Основные теоретические положения и методика выполнения работы ....... |
87 |
10.2 |
Задание и порядок выполнения работы........................................................... |
93 |
10.3 |
Структура отчета и требования к оформлению.............................................. |
93 |
10.4 |
Контрольные вопросы ....................................................................................... |
93 |
СПИСОК РЕКОМЕНДОВАННЫХ ИСТОЧНИКОВ ................................................ |
94 |
|
5
ВВЕДЕНИЕ
Данное методическое пособие предназначено для поддержки лабораторных занятий по дисциплине «Веб-технологии и веб-дизайн» на протяжении одного учебного семестра. Материал дисциплины предусматривает изучение вопросов и решение задач, связанных с особенностями построения сети Интернет, использования сервисов и служб глобальной сети, принципы взаимодействия со службой WWW, специализированный язык разметки гипертекста, современные технологии построения WEB-пространства. Дисциплина ориентирована на подготовленного пользователя, знающего основы компьютерных сетевых технологий. Цель дисциплины: привить практические навыки по взаимодействию с сервисами глобальной сети Интернет, использованию современных технологий сети Интернет, которые ориентированы на обслуживание потребностей учебного процесса и на автоматизацию управления образовательным учреждением.
Впособие включены занятия по следующим вопросам:
–работа с WEB-документами сети Интернет;
–поиск информации в каталоге и индексе;
–обзор и анализ информационно-поисковой системы;
–работа с электронной почтой в программе Outlook Express;
–работа с телеконференциями в программе Outlook Express;
–методы создания абзацного отступа в документах HTML;
–разметка текстового документа тегами языка HTML;
–использование таблиц для оформления WEB-страниц;
–фреймовое оформление сайта на примере фотоальбома;
–создание интерактивных форм в документе HTML.
Список программного обеспечения, изучение которого включено в программу курсов, составляет:
–Windows XP Professional;
–Microsoft Internet Explorer;
–Microsoft Outlook Express;
–Блокнот;
–Microsoft FrontPage.
Врамках данного курса лабораторные занятия студентами выполняются индивидуально. В процессе лабораторных занятий студенты настраивают подключение к сети Интернет по согласованию с преподавателем, выполняют общие или индивидуальные задания, проходят On-Line тестирование для контроля усвоения полученных знаний.
6
Лабораторная работа № 1.
РАБОТА С WEB-ДОКУМЕНТАМИ СЕТИ ИНТЕРНЕТ
Цель: изучить методы доступа к документам сети Интернет с помощью службы World Wide Web; получить навыки работы с браузером, предназначенным для просмотра Web-документов; изучить основные приемы работы с Webдокументами.
1.1 Основные теоретические положения и методика выполнения работы
1.1.1 Браузер и его особенности
Примером браузера, предназначенного для просмотра Web-документов, может служить Internet Explorer. Программа предоставляет единый метод доступа к локальным документам компьютера, ресурсам корпоративной сети Intranet и к информации, доступной в Интернете. Внешний вид программы представлен на рис. 1.1. Она обеспечивает работу с World Wide Web, предоставляет идентичные средства работы с локальными папками компьютера и файловыми архивами FTP, дает доступ к средствам связи через Интернет.
Рисунок 1.1 – Программа Internet Explorer
1.1.2 Запуск браузера
Для запуска браузера Internet Explorer можно использовать:
– значок Internet Explorer на Рабочем столе (рис. 1.2а);
7
–значок на Панели быстрого запуска (рис. 1.2б);
–а также Главное меню (рис. 1.2в):
(Пуск Программы Internet Explorer).
а) |
б) |
в) |
Рисунок 1.2 – Запуск браузера Internet Explorer
Кроме того, программа запускается автоматически при попытке открыть документ Интернета или локальный документ в формате HTML. Для этой цели можно использовать:
–ярлыки Web-страниц;
–папку Избранное (Пуск Избранное или пункт меню Избранное в строке меню окна папки или программы Проводник);
–панель инструментов Рабочего стола;
– адрес или поле ввода в диалоговом окне Запуск программы (Пуск Выполнить).
Если соединение с Интернетом отсутствует, то после запуска программы на экране появится диалоговое окно для управления установкой соединения. При невозможности установить соединение сохраняется возможность просмотра в автономном режиме ранее загруженных Web-документов. При наличии соединения после запуска программы на экране появится так называемая «домашняя», или основная, страница, выбранная при настройке программы.
1.1.3 Открытие и просмотр Web-страниц
Просматриваемая Web-страница отображается в рабочей области окна. По умолчанию воспроизводится все ее содержимое, включая графические иллюстрации и встроенные мультимедийные объекты. Управление просмотром осуществляется при помощи строки меню, панелей инструментов, а также активных элементов, имеющихся в открытом документе, например гиперссылок.
Если URL-адрес Web-страницы известен, его можно ввести в поле панели Адрес и щелкнуть на кнопке Переход. Страница с указанным адресом открывается вместо текущей.
Наличие средства автозаполнения адресной строки упрощает повторный ввод адресов. Вводимый адрес автоматически сравнивается с адресами ранее просматривавшихся Web-страниц. Все подходящие адреса отображаются в
8
раскрывающемся списке панели Адрес. Если нужный адрес есть в списке, его можно выбрать клавишами ВВЕРХ и ВНИЗ, после чего щелкнуть на кнопке Переход. При отсутствии нужного адреса ввод продолжают как обычно.
1.1.4 Работа с гиперссылками
Навигация по Интернету чаще выполняется не путем ввода адреса URL, а посредством использования гиперссылок. При отображении Web-страницы на экране гиперссылки выделяются цветом (обычно синим) и подчеркиванием.
Обычно подчеркивание применяют только для выделения гиперссылок. Более надежным признаком является форма указателя мыши. При наведении на гиперссылку он принимает форму кисти руки с вытянутым указательным пальцем, а сама гиперссылка при соответствующей настройке браузера изменяет цвет.
Адрес URL, на который указывает ссылка, отображается в строке состояния. При щелчке на гиперссылке соответствующая Web-страница загружается вместо текущей. Если гиперссылка указывает на произвольный файл, его загрузка происходит по протоколу FTP.
На Web-страницах могут также встречаться графические ссылки (то есть, гиперссылки, представленные рисунком) и изображения-карты, объединяющие несколько ссылок в рамках одного изображения. Для просмотра ссылок на открытой Web-странице удобно использовать клавишу TAB. При нажатии этой клавиши фокус ввода (пунктирная рамка) перемещается к следующей ссылке. Перейти по ссылке можно, нажав клавишу ENTER. При таком подходе последовательно перебираются текстовые и графические ссылки, а также отдельные области изображений-карт.
1.1.5 Контекстное меню гиперссылок и картинок
Дополнительные возможности использования гиперссылок предоставляет их контекстное меню (рис. 1.3).
Рисунок 1.3 – Контекстное меню текстовой гиперссылки и рисунка
9
Чтобы открыть новую страницу, не закрывая текущей, применяют команду
«Открыть в новом окне».
В результате открывается новое окно браузера. Адрес URL, заданный ссылкой, можно поместить в буфер обмена при помощи команды Копировать ярлык. Его можно вставить в поле панели Адрес или в любой другой документ для последующего использования.
Другие операции, относящиеся к текущей странице и ее элементам, также удобно осуществлять через контекстное меню (рис. 1.3). Так, например, рисунок, имеющийся на странице, можно:
–сохранить как файл (Сохранить рисунок как);
–использовать как фоновый рисунок (Сделать фоновым рисунком);
–как активный элемент (Сохранить как элемент рабочего стола).
Если рисунок выполняет функции графической ссылки, к нему можно применять как команды, относящие к изображению, так и команды, относящиеся к ссылке.
1.1.6 Приемы управления браузером
Необходимость определенных действий в ходе просмотра документов World Wide Web часто диктуется самим ходом работы. В таких случаях удобно использовать кнопки панели инструментов «Обычные кнопки» (рис. 1.4).
Рисунок 1.4 – Обычные кнопки панели инструментов
Для того чтобы вернуться к странице, которая просматривалась некоторое время назад, используют кнопку Назад.
Чтобы возвратиться на несколько страниц назад, можно использовать
присоединенную к ней кнопку раскрывающегося списка.
Отменить действия, выполненные при помощи кнопки Назад, позволяет кнопка Вперед.
Если процесс загрузки страницы затянулся или необходимость в ней отпала, используют кнопку Остановить.
Заново загрузить Web-страницу, если ее загрузка была прервана или содержание документа изменилось, позволяет кнопка Обновить.
Чтобы немедленно загрузить «домашнюю» (основную) страницу, пользуются кнопкой Домой.
Создать новое окно, сохранить открытый документ на своем компьютере, распечатать его, включить или выключить режим автономной работы, а также завершить работу с программой позволяют команды меню Файл (рис. 1.5).
Копирование фрагментов документа в буфер обмена, поиск текста на Webстранице, осуществляются при помощи команд меню Правка (рис. 1.5).
10