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

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РФ
РУБЦОВСКИЙ ИНСТИТУТ (ФИЛИАЛ)
АЛТАЙСКОГО ГОСУДАРСТВЕННОГО УНИВЕРСИТЕТА
«Утверждаю»
Директор РИ (филиала) АлтГУ
____________ К.Г. Анисимов
«_____» ___________2016 г.
Рабочая программа
«ТЕХНО Master–Web-программист (Разработка сайтов. Webтехнологии)»
(школьники, учащиеся лицеев и гимназий, слушатели
специализированных колледжей и училищ, абитуриенты)
Рубцовск 2016
Центр
Кафедра
Категория слушателей
Срок обучения
Режим занятий
——Центр
информационных
технологий
——Математики
и
прикладной
информатики
——школьники, учащиеся лицеев и
гимназий,
слушатели
специализированных колледжей и
училищ, абитуриенты
——31 неделя
——4часа в неделю
Зав. кафедрой математики и прикладной
информатики
Зам. директора по учебной работе
__________________ Жданова Е.А.
Автор: Ибрагимова А.С., к.ф.-м.н., доцент кафедры математики и
прикладной информатики
Рецензенты:
2
СОДЕРЖАНИЕ РАБОЧЕЙ ПРОГРАММЫ
1.
ПРОГРАММА
КУРСА
«TEXNO
MASTER–WEBПРОГРАММИСТ
(РАЗРАБОТКА
САЙТОВ.
WEBТЕХНОЛОГИИ)»................................................................................... 4
1.1. Тематический план курса «ТЕХНО Master–Web-программист
(Разработка сайтов. Web-технологии)»........................................... 4
1.2. Содержание курса «ТЕХНО Master–Web-программист
(Разработка сайтов. Web-технологии)» (дидактические единицы)
............................................................................................................. 5
1.3. Содержание практических занятий ....................................... 11
2. МАТЕРИАЛЫ К ПРОМЕЖУТОЧНОМУ И ИТОГОВОМУ
КОНТРОЛЮ ........................................................................................ 12
3. ЛИТЕРАТУРА ................................................................................. 18
3
1. ПРОГРАММА КУРСА «TEXNO MASTER–WEBПРОГРАММИСТ (РАЗРАБОТКА САЙТОВ. WEBТЕХНОЛОГИИ)»
1.1. Тематический план курса «ТЕХНО Master–Webпрограммист (Разработка сайтов. Web-технологии)»
№
Наименование тем
п/п
Всего,
В том числе
час
Теорет
ических
1. Основные понятия
4
4
в
HTML
(язык
2. Введение
гипертекстовой разметки). Основы
создания сайта.
3. Обзор тэгов HTML для работы с
текстом.
4. Понятие карты сайта, её назначение и
использование
5. Создание интерактивных элементов
6
2
4
6
2
4
6
2
4
6
2
4
6. Работа с графическими объектами и их
размещение на web -сайтах
7. Технология CSS, её версии и
поддержка браузерами
8. Создание web-сайта по шаблону.
8
2
6
8
4
4
6
2
4
9 Размещение web-сайта на сервере
6
2
4
Промежуточный контроль
4
4
Установка и настройка программного
обеспечения. Знакомство с PHP
Основы языка программирования PHP
6
2
4
22
10
12
Работа с базами данных на PHP. Язык
SQL. СУБД MySQL
Web-приложения
16
6
10
16
6
10
Промежуточный контроль
4
4
ИТОГО
124
54
10
11
12
13
4
Практи
-ческих
70
1.2. Содержание курса «ТЕХНО Master–Web-программист
(Разработка
сайтов.
Web-технологии)»
(дидактические
единицы)
Web-дизайн
Тема 1. Основные понятия.
Аудиторное изучение:
Понятие WWW (World Wide Web).
Понятие гипертекстовых документов и web-сайтов.
Классификации web-сайтов. Различные типы web-сайтов, их
назначение и использование. Типы гипертекстовых документов
(web-страниц), их различия и сходства.
Размещение и хранение web-страницы и сайты. Понятие webсервера и принципы его работы с пользователем.
Обзор программ (браузеров) для просмотра веб-сайтов.
Подбор программного обеспечения для работы над вебсайтом. Необходимый минимум для начала работы.
Способы создания веб-сайтов: визуальный, работа с кодом,
комбинированный.
Разработка структуры и этапы построения web-сайта.
Информационное наполнение и взаимосвязи основных разделов и
подразделов, а также дополнительных страниц веб-сайта.
Тема 2. Введение в HTML (язык гипертекстовой разметки).
Основы создания сайта.
Аудиторное изучение:
Язык HTML. Основы, версии и стандарты языка HTML.
Структура HTML документа. Основные разделы кода вебстраницы. Понятие тэгов HTML, их типы и оформление.
Объявление типа документа. Варианты и стандарты.
Открытие блока HTML и начало блока заголовков.
Обзор заголовков гипертекстовых документов, их синтаксис
и назначение.
Обзор других тэгов, входящих в блок заголовков.
Закрытие блока заголовков и открытие основного блока (тэг
BODY). Обзор основных параметров тэга BODY и их
использование (установка фонового цвета и изображения вебстраницы, задание цветов текста и ссылок и т.д.).
Закрывающие тэги блоков HTML.
5
Создание шаблонного кода веб-страницы в простом
текстовом редакторе и проверка его работы в браузере. Способы
редактирования кода веб-страниц).
Тема 3. Обзор тэгов HTML для работы с текстом.
Аудиторное изучение
Создание текстовых заголовков различных уровней и их
позиционирование на веб-странице.
Обзор тэгов оформления и выделения текста, а также
изменения его размеров и цвета.
Обзор тэгов разрыва строк и выделения блоков, их области
применения.
Обзор тэгов создания списков различных типов.
Принципы вставки спецсимволов и тэги псевдографики.
Понятие Unicode, его создание и применение.
Тэги вставки изображений на web-страницы и их параметры.
Обзор поддерживаемых графических форматов, их различия,
ограничения и использование.
Понятие, использование и принципы построения таблиц.
Обзор тэгов создания таблиц и их параметры.
Понятие гиперссылки. Типы и области применения
гиперссылок. Тэги создания гиперссылок и их параметры.
Создание кода и разработка шаблона новостной ленты сайта.
Тема 4. Понятие карты сайта, её назначение и
использование
Аудиторное изучение:
Обзор тэгов создания карты сайта и их параметров. Пример
создания карты сайта.
Понятие, типы и использование фреймов. Тэги создания
фреймов и их параметры. Пример создания фреймовой структуры
сайта. Установка плавающих фреймов на веб-страницу и их
использование.
Использование мультимедиа на веб-сайте. Обзор тэгов для
размещения аудио - и видеофайлов, а также Flash-анимации на вебстраницах и их параметры. Ограничения использования
мультимедиа.
Понятие и применение комментариев HTML. Обзор тэгов для
вставки комментариев и ограничения их использования
Тема 5. Создание интерактивных элементов.
Аудиторное изучение:
6
Понятие, типы и назначение скриптов. Понятие и
использование форм на веб-страницах. Принципы взаимодействия
формы со скриптами. Обзор тэгов для создания элементов формы
(текстовых полей, выпадающих списков и т.д.).
Введение в JavaScript, его назначение и области применения.
Объектная модель веб-страницы и браузера. Примеры объектов.
Понятие, типы и использование событий на веб-страницах.
Примеры
использования
некоторых
событий.
Создание
интерактивных объектов на веб-странице.
Создание всплывающих окон и их использование
Тема 6. Работа с графическими объектами и их
размещение на вебсайтах
Аудиторное изучение
Требования и условия размещения графических объектов на
веб-страницах. Обзор поддерживаемых форматов, их различия и
использование.
Принципы адаптации графики. Адаптация графических
изображений для размещения на веб-страницах. Обзор
программного обеспечения для адаптации графики, его различия и
возможности. Примеры адаптации изображений в различных
форматах с помощью программы Adobe Photoshop и подобных
графических редакторов.
Понятие и использование нарезки изображений. Примеры
нарезки изображений в программе Adobe Photoshop или подобных
графических редакторах. Сборка нарезанных изображений в
браузере с помощью таблиц.
Понятие, области применения и принципы создания
анимации. Обзор программного обеспечения для создания
анимации. Пример создания и редактирования анимированных
изображений в программе Adobe ImageReady или подобных
редакторах.
Понятие, типы, назначение и использование баннеров.
Требования к параметрам баннеров и условия их размещения на
сайте. Примеры создания баннеров.
Установка баннеров и анимированных изображений на вебстраницы.
Тема 7. Технология CSS, её версии и поддержка
браузерами.
Аудиторное изучение:
7
Понятие, область применения и принципы построения
каскадных таблиц стилей (CSS).
Использование CSS на веб-страницах, способы задания
стилей и оформления отдельных элементов.
Обзор инструкций CSS для оформления, изменения размеров
и цвета текста. Обзор инструкций CSS для установки фоновых
изображений и их параметры.
Понятие и использование обрамления. Обзор инструкций CSS
для создания обрамлений и их параметры (установка формы, цвета,
ширины и позиционирования бордюров, а также отступов от них и
т.д.).
Понятие, инструкции и использование трёхмерного
позиционирования объектов веб-страницы с помощью CSS.
Примеры позиционирования отдельных элементов веб-страницы.
Управление отображением элементов страницы с помощью
CSS. Обзор инструкций управления отображением и их
взаимодействие со скриптами. Примеры управления отображение
объектов (создание исчезающих и меняющихся объектов).
Понятие и использование фильтров CSS. Инструкции и
примеры создания фильтров
Тема 8. Создание web-сайта по шаблону.
Аудиторное изучение:
Типы шаблонов и способы работы с ними. Разработка и
изготовление собственных шаблонов веб-страниц и целых сайтов.
Автоматизация создания и редактирования веб-сайтов. Работа
с визуальными редакторами типа WYSIWYG. Обзор популярных
визуальных веб-редакторов: Microsoft FrontPage, Macromedia
Dreamweaver и Macromedia HomeSite, их преимущества и
недостатки
Создание веб-страницы с помощью шаблонов в визуальных
редакторах. Редактирование выбранного шаблона веб-страницы и
его адаптация под свои нужды в среде визуальных редакторов.
Создание или изменение текстового наполнения шаблона,
дополнения и уточнения. Инструменты для оформления текста.
Изменение гарнитуры, размера и цвета текста. Выравнивание
текста внутри блока.
Создание и редактирование гиперссылок в среде визуального
редактора. Создание и редактирование гипертекстовых меню в
шаблоне веб-страницы.
Позиционирование и удаление отдельных элементов шаблона
веб-страницы в среде визуального редактора. Создание
8
собственных элементов и вставка их в шаблон. Разработка
остальных страниц веб-сайта на базе данного шаблона.
Создание сложных эффектов (меняющихся изображений и
выпадающих меню) в среде визуального редактора.
Унификация общего визуального оформления сайта.
Проверка работы гиперссылок и логических связей между
страницами сайта.
Тема 9. Размещение web-сайта на сервере.
Аудиторное изучение:
Способы доступа к сайту (по имени или IP-адресу).
Понятие, принципы построения и работа DNS (BIND).
Организация InterNIC и её представительства. Выбор и регистрация
доменного имени сайта. Понятие и типы хостинга. Выбор хостинга
для размещения своего сайта. Требования и ограничения серверов
для размещения веб-ресурсов. Способы закачки сайта на сервер по
протоколам HTTP и FTP. Обзор программного обеспечения для
закачки файлов сайта на сервер и работа с ним. Размещение сайта
на сервере.
Понятие, назначение и использование систем управления
контентом (CMS).Тестирование работы вебсайта на сервере.
Возможные ошибки и недочёты
Web-программирование
Тема 10. Установка и настройка программного
обеспечения. Знакомство с PHP.
Аудиторное изучение: Установка и настройка PHP.
Настройка PHP и сервера Apache для совместной работы.
Установка PHP как модуля сервера Apache. Проверка работы PHP
языка программирования для Web. Написание первой программы.
Тема 11. Основы языка программирования PHP.
.Аудиторное
изучение:
Переменные,
константы,
выражения. Типы данных, массивы, ассоциативные массивы.
Управляющие конструкции. Функции и области видимости. HTML
формы. Взаимодействие с формами. Стандартные функции языка
программирования PHP. Работа с файлами. Функции даты и
времени. Cookie. Переменные окружения сервера. Регулярные
выражения. Контроль входных данных с помощью регулярных
выражений, понятие безопасности скрипта.
9
Тема 12. Работа с базами данных на PHP. Язык SQL.
СУБД MySQL.
Аудиторное изучение: Теория реляционных баз данных,
язык запросов SQL. Установка и настройка MySQL. Сервер MySQL
и работа с ним на PHP. Подключение к серверу, выполнение
запросов. Построение эффективных запросов и повышение
быстродействия работы с БД. Создание Web интерфейсов БД на
PHP. Пример написания интерфейса к БД.
Тема 13. Web-приложения
Аудиторное изучение: Способы реализация сессии
пользователя. Сессии в PHP. Создание эффективных Webприложений.
10
1.3. Содержание практических занятий
Лабораторная работа №1. Создание простейшего HTMLдокумента. Форматирование текста.
Лабораторная работа №2. Создание форм в html-документе.
Лабораторная работа №3. Оформление html-документа.
Фреймы. Таблицы. Списки.
Лабораторная работа №4. Вставка изображений в htmlдокумент.
Лабораторная работа №5. Размещение аудио - и видеофайлов,
а также Flash-анимации на веб-страницах.
Лабораторная работа №6. Создание интерактивных объектов
на веб-странице.
Лабораторная работа №7. Работа с графическими объектами
и их размещение на веб-страницах.
Лабораторная работа №8. Работа в веб-редакторах: Microsoft
FrontPage, Macromedia Dreamweaver и Macromedia HomeSite.
Лабораторная работа №9. Размещение и поддержка сайта в
сети.
Лабораторная работа №10. Установка и настройка
программного обеспечения. Знакомство с PHP.
Лабораторная работа №11. Создание формы на web-странице
с функциями предварительной обработки полей при помощи языка
серверных скриптов PHP.
Лабораторная работа №12. Проектирование структуры базы
данных. Создание БД. Написание программ на PHP для
организации Web-интерфейса к базе данных.
Лабораторная работа №13. Пример написания простого
электронного магазина.
11
2. МАТЕРИАЛЫ К ПРОМЕЖУТОЧНОМУ И ИТОГОВОМУ
КОНТРОЛЮ
Вопросы:
1. Введение в Web- технологии, основные понятия и
определения (URL, Inter- net, WWW, HTTP, FTP, …)
2. Доменные имена, IP – адрес, DNS, Web- сайты.
3. Понятие технологии клиент- сервер, Web-сервер, сервер
БД, почтовый сервер, файловый сервер.
4. Характеристика
программного
обеспечения,
используемого при создании Web –страниц.
5. Рабочее место Web –мастера.
6. Введение в язык HTML, элементы языка HTML.
7. HTML, простейшее форматирование текста, управление
выравниванием текста.
8. HTML, оформление абзацев, заголовков, горизонтальная
линейка.
9. HTML, управление шрифтом.
10. HTML, управление цветом, дополнительные варианты
оформления.
11. Локальные гиперссылки в рамках Web-страницы,
формирование гиперссылок в пределах сайта, якоря.
12. HTML, маркированные списки, смешанные списки.
13. HTML, нумерованные списки, смешанные списки.
14. Гиперссылки в пределах сайта, организация переходов
средствами гиперссылок.
15. Работа с таблицами в языке HTML.
16. Управление шириной столбцов, высотой строк,
объединение ячеек в табли- цах средствами тегов языка HTML.
17. Формирование фоновых изображений на Web-страницах.
18. Графика на Web-страницах, вставка изображений.
19. Изображение – карта (карта графических ссылок),
формирование, работа с областями, виды областей.
20. Графические форматы Интернета (JPEG, GIF – форматы)
21. Оформление Web-страниц с использованием стилей.
22. Графические элементы оформления (линейки, буквицы,
кнопки)
23. Фреймы, работа сними в языке HTML.
24. Ввод данных в формы HTML, элементы форм, их
внедрение на Web- страницах.
25. Использование звука на Web-странице.
26. Динамические Web - страницы на базе JavaScript
27. Использование сценариев для оживления Web-страниц
12
28. Создание собственных функций средствами языка
JavaScript (на примере функции factorial)
29. Создание нескольких окон на языке JavaScript в рамках
Web-страниц.
30. Профессиональная работа с программами – браузерами,
графическими редакторами.
Задания промежуточного контроля:
1. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте умение работать с различными шрифтами с
применением языка HTML.
2. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте умение работать с различными абзацами,
цитатами, цветовой гаммой шрифтов с приме- нением языка HTML.
3. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте умение работать с различными таблицами с
применением языка HTML.
4. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте умение работать с формами с применением
языка HTML.
5. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте умение работать с фреймами с применением
языка HTML.
6. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте умение работать с картой графических ссылок
с применением языка HTML.
7. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте умение работать с элементами диалоговых
форм с применением языка HTML.
8. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте
умение
работать
с
графическими
изображениями с применением языка HTML.
9. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте умение работать с видео-файлами с
применением языка HTML.
10. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте уме- ние работать со звуковыми файлами с
применением языка HTML.
11. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте умение работать с бегущей строкой и
локальными гиперссылками с применением языка HTML.
13
12. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте уме- ние работать с глобальными текстовыми и
графическими гиперссылками с приме- нением языка HTML.
13. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте умение
составлять сценарии на языке
JavaScript в рамках HTML - документов.
14. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте умение работать с применением Flashтехнологий с применением языка HTML.
15. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте уме- ние создавать динамические изменяемые
HTML – документы.
16. Составьте
Web-страницу,
в
рамках
которой
продемонстрируйте уме- ние вводить данные в формы HTML –
документов.
17.
Создать страницу ссылок на ресурсы сети,
обязательно с использованием фреймов. Имена файлов должны
иметь маленькие латинские буквы!
В левом фрейме создать рубрики, оформить созданные
ссылки в виде нумерованного списка; в правом фрейме
соответственно создать ссылки с названием и кратким описанием
ресурсов.
Для поисковых систем, ссылки оформить в виде таблицы
из двух колонок и нескольких строк. В левой колонке поместить
рисунки-логотипы поисковых систем, в правой - гиперссылки на
эти системы. (ссылки www.yandex.ru,
www.rambler.ru,
www.aport.ru, www.google.com, www.filesearch.ru).
Для каталогов, оформить созданные ссылки в виде
нумерованного списка, (ссылки www.list.ru, www.rambler.ru.).
Для литературы, оформить созданные ссылки в виде
нумерованного списка, ссылки разложить по рубрикам, например:
библиотеки, техническая литература, стандарты. (ссылки
www.citforum.ru,
www.lib.ru,
www.w3.org,
http://pyramidin.narod.ru/html401/index.htm.)
14
18.
Создайте таблицы следующих видов:
15
19. Создать форму анкетирования, как показано на рисунке.
16
Вместо стандартной кнопки Послать формы использовать
рисунок в формате GIF изображающий кнопку с эффектом RollOver
(при наведении мышкой на кнопку она меняет цвет). Для создания
кнопок использовать графический редактор Paint.
При помощи языка PHP осуществить проверку содержимого
основных полей формы при нажатии кнопки “Послать”. При
отсутствии данных хотя бы в одном из обязательных полей вывести
соответствующее сообщение и прекратить обработку формы.
При правильном заполнении формы вывести в окне браузера
сообщение, используя значение поля “Имя”.
20.
В соответствии с вариантом задания спроектировать
структуру базы данных. Создать базу данных. Написать программу
на PHP для организации Web-интерфейса к базе данных.
Предусмотреть функции просмотра базы данных, добавления,
редактирования, удаления записей.
17
3. ЛИТЕРАТУРА
1. Белов В. Ключи к успеху // Мир ПК. – 2006. – №8. – с. 6870.;
2. Гончаров А. HTML в примерах. С.-Пб.: Питер, 2003.
3. Дригалкин В. В. HTML в примерах. Как создать свой Webсайт: Самоучитель / В. В. Дригалкин. – М.: Изд-во
«Вильямс», 2003. – 192 с.: ил.
4. Информатика. Базовый курс. Учебник для ВУЗов / под ред.
С.В. Симоновича. - СПб.: Питер. - 2000.
5. Кришнамурти, Web-протоколы. Теория и практика / Б.
Кришнамурти, Дж. Рексфорд. – М.: ЗАО «Издательство
БИНОМ», 2002. – 592 с.: ил.
6. Кузнецов М.В. Практика разработки Web-сайта / М.В.
Кузнецов, И.В. Симдянов, С.В. Голышев. – СПБ.: БХВПетербург, 2005. – 960 с.: ил
7. Лебедев С.В. Web-дизайн: учебное пособие по созданию
публикаций для Интернет / С.В. Лебедев. – 3-е изд.,
перераб. и доп. – М.: Альянс-пресс, 2004.- 736 с
8. Мержевич В. В. Ускорение работы сайта: для вебразработчиков / В.В. Мержевич. – СПб.: БХВ-Петербург,
2005. – 384с.: ил
9. Миронов Д.Ф. Создание Web-страниц в MS Office 2000 /
Д.Ф. Миронов. – СПб.: БХВ-Петербург, 2000. – 320 с.: ил.
10. Шапошников И. В. Справочник Web-мастера. XML. – СПб.:
БХВ-Петербург, 2001. – 304 с.: ил.
11. Штайнер Г. HTML/XML/CSS / Г. Штайнер. – 2-е изд.,
перераб. – М.: Лаборатория Базовых Знаний, 2005. – 510 с.:
ил.
12. Борисенко А.А. Web-дизайн. Просто как дважды два / А. А.
Борисенко. – М.: Эксмо, 2008. – 320 с.;
18