extracted_text:
Департамент образования, науки и молодежной политики Воронежской области
Государственное бюджетное профессиональное
образовательное учреждение Воронежской области
«Лискинский промышленнотранспортный техникум имени А.К. Лысенко»
(ГБПОУ  ВО «ЛПТТ имени А.К. Лысенко»)
Комплект контрольнооценочных средств
по программе дисциплины
ОП 00.11
 Web

 дизайн
название дисциплины
программы подготовки специалистов среднего звена (ППССЗ)
по специальности СПО
09.02.03 Программирование в компьютерных системах
Лиски Комплект   контрольнооценочных   средств   по   дисциплине  разработан   на   основе
Федерального   государственного   образовательного   стандарта   (ФГОС)   среднего
профессионального   образования   (далее   –   СПО)   по   специальности   СПО  09.02.03
Программирование в компьютерных системах
Организацияразработчик:
ГБПОУ ВО «Лискинский промышленнотранспортный техникум имени А.К. Лысенко»
Разработчики:
Плотникова С.С., преподаватель
Ф.И.О., ученая степень, звание, должность. СОДЕРЖАНИЕ
1. Результаты освоения дисциплины ……………………………….………4
2. Формы промежуточной аттестации по дисциплине………….…....……..5
3. Результаты освоения дисциплины …………………………….…5
4. Типовые задания для оценки освоения дисциплины………………..….7
5. Перечень рекомендуемых учебных изданий, Интернетресурсов,
дополнительной литературы……………………………………..…………..12 1. Общие положения
Результатом освоения дисциплины является овладение обучающимися знаниями в
создании  и оформлении Webсайтов; в создании форм и элементов управления сайтами и
гиперссылками,   а   также   в   использовании   технологий   построения   и   эксплуатации
распределенных информационных систем, в том числе общими (ОК) компетенциями:
Код
ОК 1.
ОК 2.
ОК 3.
ОК 4.
ОК 5.
ОК 6.
ОК 7.
ОК 8.
ОК 9.
Наименование результата обучения
Понимать сущность и социальную значимость своей будущей профессии, проявлять к
ней устойчивый интерес.
Организовывать собственную деятельность, определять методы и способы выполнения
профессиональных задач, оценивать их эффективность и качество.
Решать проблемы, оценивать риски и принимать решения в нестандартных ситуациях.
Осуществлять поиск, анализ и оценку информации, необходимой для постановки и
решения профессиональных задач, профессионального и личностного развития.
Использовать информационнокоммуникационные технологии для совершенствования
профессиональной деятельности.
Работать в коллективе и команде, обеспечивать ее сплочение, эффективно общаться с
коллегами, руководством, потребителями.
Ставить цели, мотивировать деятельность подчиненных, организовывать и
контролировать их работу с принятием на себя ответственности за результат
выполнения заданий.
Самостоятельно определять задачи профессионального и личностного развития,
заниматься самообразованием, осознанно планировать повышение квалификации.
Быть готовым к смене технологий в профессиональной деятельности. 2. Формы промежуточной аттестации по дисциплине
Таблица № 1
Наименование
дисциплины
Webдизайн
Форма контроля и оценивания
Промежуточная аттестация
7 семестр –  дифференцированный зачет
8 семестр – дифференцированный зачет
3. Результаты освоения дисциплины, подлежащие проверке
Требования к результатам
Функциональная принадлежность оценочного
Таблица №2
освоения
(должен уметь, знать)
средства
 создавать Webсайты.

 создавать формы и элементы управления.
 создавать гиперссылки.
 оформлять Webсайты.
 оформлять шрифты, стили, списки, линии,
таблицы, изображения,  спецэффекты.
  «Условные   операторы.
Уметь
Практическая   работа:   «Язык   ядра   JavaScript.
Переменные   и   литералы,
  типы   данных»,
«Операторы   управления.   Операторы   выбора   –
условные»,   «Операторы   выбора   –   условные.
Операторы   цикла»,   «Массивы.   Инициализация
элементов   массива   и   элементов   процедур»,
«Основы   языка   php.   Синтаксис.   Ввод/вывод
данных»,
  Циклы»,
«Числовые и символьные массивы. Статические и
динамические массивы», «Функции для работы со
строковой информацией и для работы с числами»,
Функции   для   работы   с   датой   и   временем   и
определяемые пользователем».
Практические работы: «Проектирование баз
данных. Структурирование данных в таблицах.
Нормализация
структурированного языка запросов SQL».
Практические   работы:   «Визуальные   эффекты
форматирования   текста.   Псевдоклассы   ссылок»,
«Статические  фильтры  в  CSS.  Свойства  блочных
объектов».
  «Структура   HTML
Практические   работы:
документа,
  создание   простейшего   HTML
документа»,   «Графика,   размещение   графических
изображений.
списков»,
«Визуальные   эффекты   форматирования   текста.
Псевдоклассы ссылок».
Практические работы:
«Основные   тэги   управления   стилем   текста»,
Ссылка на другие документы и файлы, внутренние
ссылки», «Таблицы,  оформление таблиц. Фреймы.
Разбиение   страницы   на   части»,
  «Карты
изображения.   Теги   и   параметры   для   карт
Операторы
  Формирование

таблиц.    использовать   технологии   построения   и
эксплуатации
распределенных
информационных систем.

   принципы   построения   распределенных
систем обработки информации.
 язык гипертекстовой разметки HTML.
 принципы построения и методы работы в
распределенных   системах   обработки
информации.
Требования к результатам
освоения
(общие компетенции)
изображений»,    «Формы   –   средство   для   связи   с
базами   данных.
  Теги   и   параметры   для
воспроизведения   звуковых   файлов»,   «Каскадные
таблицы   стилей:   назначение   и   возможности»,
«Шрифты, цвет, фон страницы сайта на CSS»,.
Практические работы: «Подключение к базе данных
из   PHP   файла.   Вывод   данных   на   PHPстраницу,
попавших в выборку по SQL запросу»,
Создание таблиц в MySQL. Серверная база данных
MySQL, сохранение данных в БД».
Знать
Контрольная работа № 3: «Язык создания сценариев
JavaScript. Интерактивные WEB документы».
Дифференцированный зачет
Контрольная   работа   №1:   «Структура   и   основные
принципы   Интернета»,  Контрольная   работа   №   2:
«Язык гипертекстовой разметки HTML»,
Контрольная   работа   №4:   «Динамический   HTML.
Каскадные таблицы стилей CSS».
Дифференцированный зачет
Контрольная   работа   №4:   «Динамический   HTML.
Каскадные таблицы стилей CSS».
Дифференцированный зачет

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

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

Наблюдение   за   поведением   в   нестандартных   и
нештатных ситуациях.
Наблюдение,   оценка   преподавателем
профессиональных задач,  практического задания.
  решения
Оценка   преподавателем   выполнения   заданий
самостоятельной работы в поиске и использовании
информации.
ОК 6. Работать в коллективе и в команде,
обеспечивать   ее   сплочение,   эффективно
Определение   преподавателем   лидерских   качеств,
наблюдение   за   отношениями   внутри   группы. общаться   с   коллегами,
потребителями.
  руководством,
ОК   7.   Брать   на   себя   ответственность   за
работу   членов   команды   (подчиненных),   за
результат выполнения заданий.
ОК   8.   Самостоятельно   определять   задачи
профессионального и личностного развития,
заниматься   самообразованием,   осознанно
планировать повышение квалификации.
ОК 9.  Ориентироваться   в  условиях  частой
смены   технологий   в   профессиональной
деятельности.
Наблюдение   за   организацией   коллективной
деятельности,   общением   с   преподавателем   и
руководителями.
Наблюдение за проявлением лидерских качеств, за
самостоятельной организацией работы и качеством
его выполнения.
Наблюдение   преподавателем   за   процессом
самообразования   (использование   дополнительных
информационных   источников),   за  планированием
студентом   повышения   квалификации   (выполнение
работы повышенной сложности).
Наблюдение   за   соблюдением   действующего
законодательства   и   обязательных   требований
нормативных   документов,   а   также   требований
стандартов,   технических   условий,   обновлением
программного обеспечения. 4. Типовые задания для оценки освоения дисциплины
7 семестр
Практическое занятие
форма текущего контроля
по теме: «Структура HTMLдокумента, создание простейшего HTMLдокумента»
Цель: научиться создавать простейший HTMLдокумент.
По завершению практического занятия студент должен уметь: создавать  HTMLдокумент и указывать
его заголовок.
  Продолжительность: 2 аудиторных часа (90 минут)
 Компьютер, интернет.
Необходимые принадлежности
Задание
1. Создайте на диске отдельную директорию (папку) для своей будущей страницы. Вы можете назвать ее
своим именем (фамилией). Например, D:\IVANOVA.
2. Запустите Блокнот.
3. Наберите текст HTML, в который включите все теги, что мы разобрали. Между тегами  и
 напишите несколько слов о себе.
4. В меню Файл (File) выполните команду Сохранить как. В диалоговом окне Сохранения
файла найдите созданную папку, укажите тип файла Все файлы и сохраните файл, назвав его своим
именем (фамилией), и указав расширение HTM. Например, D:\IVANOVA\Ivanova.HTM
5.Загрузите браузер Microsoft Internet Explorer или Netscape Navigator.
6. В меню Файл (File) выполните команду Открыть. Используя кнопку Обзор, найдите свой
документ D:\IVANOVA\Ivanova.HTM и загрузите его.
7. В меню Вид откройте команду Источник (или В виде HTML). На экране появится Блокнот с Вашей HTML
программой.
8. Внесите изменения в программу: с помощью команды BGCOLOR задайте цвет фона Вашей странички.
a) сделайте его зеленым;
b) теперь залейте цветом purple;
c) выберите свой цвет.
9. В меню Файл выберите команду Сохранить и закройте Блокнот.
10. В меню Вид укажите команду Обновить. Можно также использовать клавишу F5.
11. Сделайте картинку фоном с помощью командного слова BACKGROUND. (Фоновой картинкой может
служить любой файл с расширением GIF или JPG.)
Пример:

Страничка Микки

 Прежд
е всего, позвольте представиться. Я – веселый мышонок по
имени Микки.

12. Определите фон Вашей странички, используя свою картинку:
13. Сохраните картинку, которую вы хотите использовать в качестве фона, в созданной папке.
Например, D:\IVANOVA\fon.jpg 14. В теге BODY пропишите атрибут
BACKGROUND="fon.jpg"
15. Допишите текст.
16. Сделайте так, чтобы  фоновая картинка не прокручивалась вместе с текстом (вставьте
команду BGPROPERTIES=FIXED). Запишите получившийся пример в тетрадь для практически и
лабораторных работ.
Пример:

Страничка Микки

 Прежде всего, позвольте представиться. Я – веселый мышонок
по имени Микки. Живу я в огромной сказочной стране
Диснейленде. Вместе со мной живут мои друзья: братья Билли,
Вилли, Дилли с их дядюшкой Дональдом, забавный медвежонок
Винни, славный олененок Бэмби, озорной щенок Плуто и многие
многие другие. Так вот, к чему это я. Дело в том, что в прошлом
году исполнилось 100 лет человеку, без которого сегодня трудно
представить нашу (а значит, и вашу) жизнь. Этот человек – наш
создатель Уолт Элиас Дисней. Без лишней скромности могу
сказать, что я, Микки Маус – пожалуй, самый знаменитый
персонаж Диснея. И я на своей домашней страничке решил
поделиться с вами тем, что знаю о жизни своего "родителя".
Читайте дальше…

Оформление отчета
1. Переписать в тетрадь для практических и лабораторных работ ход создания HTMLдокумета, не нарушая
последовательности.
2. Записать в тетрадь для практических и лабораторных работ следующие пояснения и примеры:
Значение цвета в атрибутах HTMLязыка может задаваться несколькими способами:
названием, например "red";
кодом RGB, например "#FFFFFF" ;
в десятичном виде, например "255, 0, 0" ;
в процентах, например "30%, 40%, 30%";
Код RGB  это три шестнадцатеричных числа в диапазоне 00  FF. 1ое, 2ое и 3е число, соответственно,
представляют собой количество красного, зеленого и синего тонов в цвете. Например, #000000  это черный
цвет (отсутствие цвета), #FF0000  яркокрасный, #00FF00  яркозеленый, #0000FF  яркосиний, а #FFFFFF
 белый (все цвета присутствуют полностью).
 Таблица 16и стандартных цветов
Название
черный
темнобордовый
зеленый
оливковый
Код RGB
#000000
#800000
#008000
#808000
Имя
black
maroon
green
olive
Цвет Название

серебряный
красный
известь
желтый
Код RGB
#C0C0C0
#FF0000
#00FF00
#FFFF00
Имя
silver
red
lime
yellow
Цвет темносиний
фиолетовый
чирок
серый
#000080
#800080
#008080
#808080
navy
purple
teal
gray

синий
фуксия
аква
белый
#0000FF
#FF00FF
#00FFFF
#FFFFFF
blue
fuchsia
aqva
white

Цвет фона задает слово BGCOLOR.
Пример:

Страничка Микки

 Прежде   всего,   позвольте
представиться. Я – веселый мышонок по имени Микки.

Контрольные вопросы
1. Что такое интернет?
2. Что такое HTML?
3. Как называются программы просмотра файлов в Интернет?
4. Какие программы просмотра файлов в Интернет вы знаете?
5. Как реализуется создание Webдокумента с использованием HTML?
Литература
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012.
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный. 13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Основные тэги управления стилем текста»
Цель: научиться использовать основные тэги управления стилем текста.
По завершению практического занятия студент должен уметь: использовать основные тэги управления
стилем текста.
Продолжительность: 1 аудиторный час (45 минут)
 Компьютер, интернет.
Необходимые принадлежности
Задание
1.  Перейдите по ссылке http://html.findinfo.ru/html/004/text.htm
2.  Откройте обычный блокнот.
3. Выделите код на сайте http://html.findinfo.ru/html/004/text.htm и вставьте его в свой блокнот.
4. Сохраните скопированный код в файле с произвольным именем но с расширением HTML, например как
template.html и кликните на нем мышкой. Запустится браузер, в окне которого на белом фоне, разными
шрифтами будет отражаться контент страницы. Поэксперементируйте сначала с заменой текста, размерами,
вставке линий, изменению заголовков.
Оформление отчета
В   тетрадь   для   практических   и   лабораторных   работ   перепишите   код   с   сайта  http://html.find
info.ru/html/004/text.htm  и  сделайте   анализ   проделанной   вами  работы  (вы   должны   указать   как   именно
экспериментировали с заменой текста, размерами, вставке линий, изменению заголовков)
Контрольные вопросы
1. Какие теги должны присутствовать в HTMLфайле обязательно?
2. Какова логическая структура Webдокумента?
3. С помощью каких тэгов выводится курсивный шрифт?
4. С помощью каких тэгов выводится жирный шрифт?
5. С помощью каких тэгов выводится подчеркнутый  шрифт?
Литература
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012. 7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Ссылки на другие документы и файлы, внутренние ссылки»
Цель: научиться использовать ссылки на другие документы, файлы и внутренние ссылки.
По завершению практического занятия студент должен уметь: использовать ссылки на другие документы
и файлы, внутренние ссылки.
Продолжительность: 1 аудиторный час (45 минут)
 Компьютер, интернет.
Необходимые принадлежности
Задание
1. Перейдя по ссылке http://htmlbook.ru/samhtml/ssylki/absolyutnyeiotnositelnyessylki записать в тетрадь для
практических и лабораторных работ примеры создания абсолютных и относительных ссылок.
2. Записать в тетрадь разновидности ссылок, а именно: непосещенная ссылка, активная ссылка, посещенная
ссылка.
3. Перейдя  по ссылке  http://htmlbook.ru/samhtml/ssylki/atributyssylok  ознакомиться с примерами создания
ссылок. Записать их в тетрадь для практических и лабораторных работ.
4.   Перейдя   по   ссылке    http://htmlbook.ru/samhtml/ssylki/ssylkanaadreselektronnoypochty  ознакомиться   с
примерами создания ссылок для электронной почты. Записать их в тетрадь для практических и лабораторных
работ.
Записать примеры создания ссылок  в тетрадь для практических и лабораторных работ.
Оформление отчета
Контрольные вопросы
1. Какие типы ссылок вы знаете?
2. Что такое абсолютная ссылка?
3. Что такое относительная ссылка?
4. Каким образом работает ссылка для электронной почты?
Литература
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012.
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный. 9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Создание графических элементов с помощью различных программ»
Цель: научиться внедрять графическую информацию на  Webстраницу, освоить теги для работы с графикой.
По завершению практического занятия студент должен уметь: внедрять графическую информацию на
Webстраницу.
Продолжительность: 2 аудиторных часа (90минут)
Необходимые принадлежности
Персональный компьютер и интернет.
Задание
1. Создать документ по образцу. Задать фоновый рисунок, представить различные способы выравнивания
графических изображений.
Сохранить полученный документ (Файлсохранить). Просмотреть содержимое файла в браузере MS Internet
Explorer. Найти ошибки (если есть), исправить их. Используя команду ВидПросмотр Htmlкода, открыть
исходный текст файла.
3.Выполнить работу с текстом. Сохранять полученные изображения для Web.
4. Выполните преобразование изображения в режим Indexed Color.
Практически для того, чтобы перевести ваше графическое изображение в программе Adobe Photoshop в
палитру безопасных цветов (в режим Indexed Color), нужно выполнить следующую последовательность
действий:
Откройте любое изображение в программе Adobe Photoshop и командой Image (Изображение) | Mode
(Режим) убедитесь, что изображение находится в режиме RGB.
Выполните команду Image (Изображение) | Mode (Режим) | Indexed Color (Индексированные
цвета)  рис. 1.
При преобразовании многослойного изображения в режим Indexed Color все слои будут объединены
командой Flatten Image. Рис. 1. Окно Indexed Color
Далее выберите один из следующих пунктов в списке Palette (Палитра):
Exact (Точная)
System Mac OS
(Системная Mac OS)
System Windows
(Системная Windows)
Web (Сетевая)
Uniform
(Равномерная)
Local (Локальная)
если изображение содержит 256 или меньше цветов. При этом ни один цвет оригинала
не будет удален;
если собираетесь экспортировать файл в приложение, которое воспринимает только
палитру Макинтош, установленную по умолчанию;
если собираетесь экспортировать изображение в приложения на платформе Windows;
если намереваетесь загружать файл в Сеть. Эта опция ограничивает набор цветов
изображения тем множеством, которое доступно в большинстве Webбраузеров;
чтобы создать таблицу цветов, равномерно распределенных по спектру. При этом не
учитываются преобладающие цвета изображения;
выбирается так, чтобы создать таблицу цветов на основе только тех цветов, которые
входят в изображение или в зависимости от того, какие цвета желательно сохранить
при преобразовании изображения в режим Indexed Color;
Master (Специальная) использует специальную таблицу цветов, созданную заранее на основе группы
изображений;
чтобы создать собственную палитру. При желании отредактируйте таблицу цветов и
щелкните на кнопке ОК;
чтобы использовать палитру, применявшуюся в предыдущем преобразовании, если
оно выполнялось.
Custom (По выбору
пользователя)
Previous
(Предыдущая)
Из этих вариантов выберите палитру Web (Сетевая).
Качество исходного изображения при его индексировании заметно ухудшилось.
Рис. 2. Исходное изображение (слева) и изображение, после преобразования его цветов в Web Palette (справа) Несколько   улучшить   изображение   в   безопасной   палитре   цветов   можно,   если   в   списке Dither
(Дизеринг) выбрать   подходящий   вариант   дизеринга,   то   есть   попробовать   все   способы   размытия
изображения: Diffusion (Диффузия), Pattern (Текстура), Noise (Шум) и выбрать наилучший.
Новый термин
Дизеринг (Размытие) это перемешивание двух цветов из палитры для имитации третьего. Данный метод
используется, когда необходимо, чтобы изображение с ограниченным количеством цветов (256 или менее)
содержало большее количество оттенков. Обычно он применяется к изображениям с плавным переходом
цветов, чтобы увеличить диапазон используемых оттенков, но в жизни ничего не дается даром, и поэтому
после применения данного метода изображение может покрыться точками.
5. Выполнить оптимизацию в GIF и PNG:
1. Открыть изображение (Файл/Открыть)
2.
Задать изображению режим "Индексированные цвета" (Изображение/Режим/Индексированные цвета)
См. рис. 1.
3.
Рис.1
Задать цветовую карту "Создать оптимальную палитру" или "Использовать оптимизированную для
веб палитры", если изображение содержит малое количество цветов (рис.2).
Рис.2 4. Сохранить изображение в нужном формате (GIF или PNG) прописав его вручную в поле "Имя" или
выбрав из списка "Выберите тип файла (по расширению)"
6.  Выполнить оптимизацию в JPEG.
1. Открыть нужное изображение в GIMP (Файл/Открыть).
2. Для его оптимизации из верхнего меню выбрать команду Файл/Сохранить как.
3. В появившемся окне выбрать для файла расширение, прописав его вручную в поле "Имя", либо
выбрав его из списка "Выберите тип файла (по расширению)". Нажмите "Сохранить"
4. В появившемся окне можно, перемещая бегунок для параметра "Качество" найти оптимальное с
соотношение Качество изображения/размер файла. Также задав параметр "Сглаживание" в разделе
"Дополнительные параметры"  сгладить появившиеся в результате снижения качества нежелательные
резкие границы между разными цветовыми областями.(рис.3)
В тетрадь  для практических и лабораторных работ записать ход выполнения работы.
Оформление отчета
Контрольные вопросы
1. Что такое теги?
2. Какие теги для работы с графикой вы знаете?
3. Что такое дизеринг?
4. Что такое диффузия?
5. Какую палитру для создания сайта вы бы выбрали?
6. Какие виды палитры вы знаете?
7. Какие виды и способы оптимизации графики вы знаете?
8. С помощью какой программы осуществляется оптимизация графики в GIMP?
Литература
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012.
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер, 1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Таблицы, оформление таблиц. Фреймы»
Цель: научиться создавать, оформлять таблицы и фреймы и разбивать страницы на части.
По завершению практического занятия студент должен уметь: создавать, оформлять таблицы и фреймы,
а также разбивать страницы на части .
Продолжительность: 1 аудиторный час (45 минут)
Необходимые принадлежности
Персональный компьютер и интернет.
Задание
1. Перейдите по ссылке https://htmlweb.ru/html/table.php
2. Выполните все разобранные примеры на указанном сайте, результат своей работы сохраните в документе
под своей фамилией, в папке своей группы.
3. Перейдите по ссылке https://htmlweb.ru/html/table.php
4.  Выполните примеры, указанные на данном сайте, результат своей работы сохраните в документе под своей
фамилией, в папке своей группы.
5. Создать простую таблицу.
6. Форматировать таблицу (задать цвета фона, границы, объединить ячейки).
7. Создать документ по образцу.
8. Сохранить полученный документ (Файлсохранить). Просмотреть содержимое файла в браузере MS
Internet Explorer. Найти ошибки (если есть), исправить их. Используя команду ВидПросмотр Htmlкода,
открыть исходный текст файла.
В тетрадь  для практических и лабораторных работ записать примеры фреймов.
Оформление отчета
Контрольные вопросы
1. Что такое фреймы?
2. Какие плюсы и минусы фреймов вы знаете?
3. Приведите примеры фреймовых структур.
4. Какие основные html тэги таблиц вы знаете? 5. Какие теги группирования строк вы знаете? Литература
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012.
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Картыизображения. Теги и параметры для картизображений»
Цель: научиться создавать картыизображения, освоить теги и параметры для картизображений.
По завершению практического занятия студент должен уметь: создавать картыизображения.
Продолжительность: 1 аудиторный час (45 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1. Ответить на вопрос: Что такое картаизображение и как она работает?
2. Ответить на вопрос: какие преимущества и недостатки имеют картыизображений?
3. Перейдите по ссылке http://htmlbook.ru/content/kartyizobrazheniya и, используя пример кода, создайте свои
закладки.
Оформление отчета
1. В тетради для практических и лабораторных работ ответить на вопросы (не нарушая нумерации).
Например: Картаизображение – это….
2. Ответить на поставленный вопрос, описав  подробно преимущества и недостатки картизображений.
3. Выполнить задание и сохранить результат в документе под своей фамилией в папке группы.
Контрольные вопросы
1. Что такое картаизображение и как она работает?
2. Какие преимущества и недостатки имеют картыизображений
3. Как создать файл конфигурации картыизображения?
4. Как создать ссылки в HTMLдокументе, используя картуизображение?
Литература
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012. 7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Формы. Теги и параметры для воспроизведения звуковых файлов»
Цель: научиться воспроизводить звуковые файлы, ознакомиться с формами и параметрами воспроизведения
звука.
По завершению практического занятия студент должен уметь: воспроизводить звуковые файлы.
Продолжительность: 2 аудиторных часа (90 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.Перейдите по ссылке  http://htmlbook.ru/html/audio и запишите теги для воспроизведения звуков.
2. Перепишите в тетрадь для практических и лабораторных работ пример, указанный на сайте
http://htmlbook.ru/html/audio
3. С помощью браузера (на выбор) покажите свой результат воспроизведения звукового файла.
4. Перейдите по ссылке http://www.webnav.ru/books/html4/sound/
5. Запишите в тетрадь для практических и лабораторных работ пример 7.1. Пример документа,
использующего звуковые фрагменты.
6. Перечертите таблицу параметров тега   в тетрадь для практических и лабораторных работ.
7. Запишите программы, с помощью которых возможно воспроизводить звуковые файлы в Webсайтах.
В тетради для практических и лабораторных работ выполнить все задания, не нарушая нумерации.
Оформление отчета
Контрольные вопросы
1. Что такое звуковой файл?
2. Какие атрибуты для звуковых файлов вы знаете?
3. Как воспроизвести звуковой файл на webсайте?
4. Какие параметры тега  вы знвете?
Литература
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012. 6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Язык ядра JavaScript. Переменные и литералы, типы данных»
Цель: ознакомиться с языком ядра JavaScript, научиться правильно объявлять переменные и определять типы
данных.
По   завершению   практического   занятия   студент   должен   уметь:  научиться   правильно   объявлять
переменные и определять типы данных.
Продолжительность: 2 аудиторных часа (90 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.Перейдите по ссылке http://learn.javascript.ru/variables   и запишите переменные для JavaScript.
2. Объявите две переменные: admin и name. Запишите в name строку "Василий". Скопируйте значение из
name в admin. Выведите admin (должно вывести «Василий»).
2. Перепишите в тетрадь для практических и лабораторных работ 6 типов данных, указанных на сайте
http://learn.javascript.ru/typesintro
3. Перейдите по ссылке http://learn.javascript.ru/externalscript
5. Запишите в тетрадь для практических и лабораторных внешние скрипты и порядок их выполнения.
6. Выполните задания, указанные на сайте http://learn.javascript.ru/externalscript .
В тетради для практических и лабораторных работ выполнить все задания, не нарушая нумерации.
Оформление отчета
Контрольные вопросы
1. Что такое JavaScript?
2. Какие переменные JavaScript вы знаете?
3. Как объявляются переменные в JavaScript? Приведите пример.
4. Какие типы данных в JavaScript  вы знаете?
Литература
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012. 6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Операторы управления. Операторы выбора – условные»
Цель: ознакомиться с операторами языка JavaScript, научиться правильно вызывать операторы управления  и
выбора.
По завершению практического занятия студент должен уметь: научиться правильно вызывать операторы
управления  и выбора.
Продолжительность: 2 аудиторных часа (90 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.Перейдите по ссылке http://learn.javascript.ru/operators   и запишите основные операторы  для JavaScript.
2. Выполните задания, указанные на сайте http://learn.javascript.ru/operators .
3. Перепишите в тетрадь для практических и лабораторных работ виды условных операторов, указанных на
сайте http://learn.javascript.ru/ifelse
4. Выполните задания, указанные на сайте http://learn.javascript.ru/ifelse, результат записать в тетрадь для
практических и лабораторных работ.
В тетради для практических и лабораторных работ выполнить все задания, не нарушая нумерации.
Оформление отчета
Контрольные вопросы
1. Что такое операторы и операнды в  JavaScript?
2. Какие операторы JavaScript вы знаете?
3. Что такое унарные и бинарные операторы?
4. Какие виды условных операторов в JavaScript  вы знаете?
Литература
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012. 7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Логические операторы. Операторы цикла»
Цель: ознакомиться с операторами языка JavaScript, научиться правильно вызывать логические операторы и
операторы цикла.
По завершению практического занятия студент должен уметь: правильно вызывать логические операторы
и операторы цикла.
Продолжительность: 2 аудиторных часа (90 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.Перейдите по ссылке http://learn.javascript.ru/logicalops и запишите логические операторы  для JavaScript.
2. Выполните задания, указанные на сайте http://learn.javascript.ru/logicalops.
3. Перепишите в тетрадь для практических и лабораторных работ операторы цикла, указанных на сайте
http://learn.javascript.ru/whilefor.
4. Выполните задания, указанные на сайте http://learn.javascript.ru/whilefor, результат записать в тетрадь для
практических и лабораторных работ.
В тетради для практических и лабораторных работ выполнить все задания, не нарушая нумерации.
Оформление отчета
Контрольные вопросы
1. Какие логические операторы JavaScript вы знаете?
2. Какие операторы цикла JavaScript вы знаете?
3. Что такое итерация?
4. Как происходит прерывание цикла в JavaScript?
Литература
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012. 7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Массивы. Инициализация элементов массива и элементов процедур»
Цель:  ознакомиться   с   массивами   языка   JavaScript,   научиться   правильно   осуществлять   инициализацию
элементов массива и элементов процедур.
По завершению практического занятия студент должен уметь: правильно осуществлять инициализацию
элементов массива и элементов процедур.
Продолжительность: 2 аудиторных часа (90 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.Перейдите по ссылке http://learn.javascript.ru/array  и запишите массивы и внутренне устройство их в
JavaScript.
2. Выполните задания, указанные на сайте http://learn.javascript.ru/array
3. Перепишите в тетрадь для практических и лабораторных работ встроенные методы массивов JavaScript,
указанных на сайте http://learn.javascript.ru/arraymethods.
4. Выполните задания, указанные на сайте http://learn.javascript.ru/arraymethods,  результат записать в тетрадь
для практических и лабораторных работ.
В тетради для практических и лабораторных работ выполнить все задания, не нарушая нумерации.
Оформление отчета
Контрольные вопросы
1. Какие массивы в JavaScript вы знаете?
2. Какие встроенные методы массивов в JavaScript вы знаете?
3. Как выглядит алгоритм  сортировки массива?
4. Как происходит фильтрация массива в JavaScript?
Литература
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012. 7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Каскадные таблицы стилей: назначение и возможности»
Цель: ознакомиться с каскадными таблицами стилей, научиться создавать каскадные таблицы стилей.
По завершению практического занятия студент должен уметь: создавать каскадные таблицы стилей.
Продолжительность: 2 аудиторных часа (90 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.Перейдите по ссылке http://htmlexp.narod.ru/css.htm  и запишите методы и синтаксис таблиц стилей в
тетрадь для практических и лабораторных работ.
2. Перепишите в тетрадь для практических и лабораторных работ правила CSS, указанных на сайте http://iit
weblectures.readthedocs.io/ru/latest/www/css.html
4. Перепишите таблицу свойств CSS и их назначение, указанную на сайте http://iitweb
lectures.readthedocs.io/ru/latest/www/css.html .
5.На сайте  http://www.codenet.ru/webmast/html/css_newbee.php выполнить показанные примеры, результаты
сохранить в файле под своей фамилией в папке группы.
В тетради для практических и лабораторных работ выполнить все задания, не нарушая нумерации.
Оформление отчета
Контрольные вопросы
1. Какие стили каскадных таблиц  вы знаете?
2. Каким образом  браузер расставляет приоритеты таблиц стилей?
3. В чем назначение свойства  background?
4. В чем назначение свойства  clear?
Литература
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012.
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный. 8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Шрифты, цвет, фон страницы сайта на CSS»
Цель: научиться изменять шрифты, цвет, фон страницы сайта на CSS.
По завершению практического занятия студент должен уметь:  изменять шрифты, цвет, фон страницы
сайта на CSS.
Продолжительность: 2 аудиторных часа (90 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.  Перейти по ссылке http://htmlbook.ru/faq/kakizmenittsvettekstaifonavtekstovompole
Установить свой цвет фона и текста для однострочного текстового поля формы. Результат сохранить в
документе под своей фамилией в папке группы.
2. С помощью backgroundcolor  поменяйте цвет фона.
4. Перепишите в тетрадь для практических и лабораторных работ, какие существуют плюсы в загрузке файла
шрифта с последующим применением через CSS, указанные на сайте http://htmlbook.ru/blog/svoishriftna
stranitse
5.На сайте  http://htmlbook.ru/blog/svoishriftnastranitse  выполнить примеры, результаты сохранить в файле
под своей фамилией в папке группы.
В тетради для практических и лабораторных работ выполнить все задания, не нарушая нумерации.
Оформление отчета
Контрольные вопросы
1. Какие стили шрифта CSS вы знаете?
2. Каким образом  можно поменять цвет фона на сайте?
Литература
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012. 7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Визуальные эффекты форматирования текста. Псевдоклассы ссылок»
Цель: ознакомить с псевдоклассами ссылок, научиться использовать визуальные эффекты форматирования
текста на CSS.
По   завершению   практического   занятия   студент   должен   уметь:  использовать   визуальные   эффекты
форматирования текста на CSS.
Продолжительность: 1 аудиторный час (45 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.  Начертить таблицу тегов для форматирования текста в тетрадь для практических и лабораторных работ.
Код HTML
Описание
Пример
Текст
Текст
Текст
Текст
Текст
Текст
Жирное начертание текста
Курсивное начертание текста
Верхний индекс
Нижний индекс
Текст пишется как есть, включая все пробелы
Курсивный текст
Текст
Жирное начертание текста
Текст
Текст
e=mc2
H2O
Текст
Текст
Текст
2. Используя данный код, сделайте текст одновременно жирным и курсивным шрифтом, результат  сохраните
в файле под своей фамилией в папке группы.

  Текст

   Он словно вырезан из камня, стоек и неподвижен в отличие от его противников.
   Дух и жизненная сила в нём достигла совершенства.
   Но вот беда — никто не смеет принять его вызов.

3. Используя теги  и , осуществите создание нижнего индекса. Результат выполнения сохраните в
файле под своей фамилией в папке группы.
4. Перепишите в тетрадь для практических и лабораторных работ, какие существуют псевдоклассы,  с сайта
http://webremeslo.ru/css/glava15.html
5.На сайте  http://webremeslo.ru/css/glava15.html выполнить примеры, результаты сохранить в файле под своей
фамилией в папке группы.
Оформление отчета В тетрадь для практических и лабораторных работ перечертить таблицу  тегов для форматирования текста.
Записать в тетрадь код форматирования текста.
Контрольные вопросы
1. Что такое форматирование текста?
2. Какие теги форматирования текста CSS вы знаете?
3. Что такое псевдоклассы?
4. Какие псевдоклассы ссылок  вы знаете?
Литература
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012.
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.
13. Htmlbook.ru: для тех, кто делает сайты [Электронный ресурс]/авторруководитель проекта Влад
Мержевич.  Режим доступа: http://htmlbook.ru/, свободный.
14. Wcode.ru: учебник по HTML, CSS, PHP, JavaScript, Photoshop, FreeHand [Электронный ресурс]. Режим
доступа: http://wcode.ru/, свободный.
15. WebClub: Всероссийский клуб Вебразработчиков [Электронный ресурс]. Режим доступа:
http://www.webclub.ru, свободный. Практическое занятие
форма текущего контроля
по теме: «Статические фильтры в CSS. Свойства блочных элементов»
Цель:  ознакомить   со   статическими   фильтрами   в   CSS   и   свойствами   блочных   элементов,   научиться
использовать статические фильтры в CSS.
По завершению практического занятия студент должен уметь: использовать статические фильтры в CSS.
Продолжительность: 1 аудиторный час (45 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.  Перейти по ссылке http://www.spravkaweb.ru/css/filter/static и записать статические фильтры в тетрадь для
практических  и лабораторных работ.
2. Перейти по ссылке http://htmlbook.ru/content/blochnyeelementy и записать в тетрадь для практических  и
лабораторных работ свойства блочных элементов.
3. Перепишите в тетрадь для практических и лабораторных работ, какие существуют фильтры,  с сайта
https://habrahabr.ru/post/144852/
4. Наберите код, представленный ниже

  filter

   img {
    /* Размытие */
    filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=5);
   }
   img:hover {
    filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=0);
   }

Результат сравните, пройдя по ссылке  http://htmlbook.ru/css/filter/blur
В   тетрадь   для   практических   и   лабораторных   работ   записать   статические   фильтры   и   свойства   блочных
элементов. Записать в тетрадь код с использованием фильтра Размытие.
Контрольные вопросы
Оформление отчета
1. Что такое фильтра?
2. Какие фильтра в CSS вы знаете?
3. Что такое блочные элементы?
4. Какие блочные элементы вы знаете?
Литература
Основные источники:
1.
стр.
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64

file_name: КОС по веб дизайну_2016.doc

description:
4. Типовые задания для оценки освоения дисциплины
7 семестр
Практическое занятие
форма текущего контроля
по теме: «Структура HTMLдокумента, создание простейшего HTMLдокумента»
Цель: научиться создавать простейший HTMLдокумент.
По завершению практического занятия студент должен уметь: создавать  HTMLдокумент и указывать
его заголовок.
  Продолжительность: 2 аудиторных часа (90 минут)
 Компьютер, интернет.
Необходимые принадлежности
Задание
1. Создайте на диске отдельную директорию (папку) для своей будущей страницы. Вы можете назвать ее
своим именем (фамилией). Например, D:\IVANOVA.
2. Запустите Блокнот.
3. Наберите текст HTML, в который включите все теги, что мы разобрали. Между тегами <BODY> и
</BODY> напишите несколько слов о себе.
4. В меню Файл (File) выполните команду Сохранить как. В диалоговом окне Сохранения
файла найдите созданную папку, укажите тип файла Все файлы и сохраните файл, назвав его своим
именем (фамилией), и указав расширение HTM. Например, D:\IVANOVA\Ivanova.HTM
5.Загрузите браузер Microsoft Internet Explorer или Netscape Navigator.
6. В меню Файл (File) выполните команду Открыть. Используя кнопку Обзор, найдите свой
документ D:\IVANOVA\Ivanova.HTM и загрузите его.
7. В меню Вид откройте команду Источник (или В виде HTML). На экране появится Блокнот с Вашей HTML
программой.
8. Внесите изменения в программу: с помощью команды BGCOLOR задайте цвет фона Вашей странички.
a) сделайте его зеленым;
b) теперь залейте цветом purple;
c) выберите свой цвет.
9. В меню Файл выберите команду Сохранить и закройте Блокнот.
10. В меню Вид укажите команду Обновить. Можно также использовать клавишу F5.
11. Сделайте картинку фоном с помощью командного слова BACKGROUND. (Фоновой картинкой может
служить любой файл с расширением GIF или JPG.)
Пример:
<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="Приложение1\15.jpg"> Прежд
е всего, позвольте представиться. Я – веселый мышонок по
имени Микки.
</BODY>
</HTML>

12. Определите фон Вашей странички, используя свою картинку:
13. Сохраните картинку, которую вы хотите использовать в качестве фона, в созданной папке.
Например, D:\IVANOVA\fon.jpg

description:
14. В теге BODY пропишите атрибут
BACKGROUND="fon.jpg"
15. Допишите текст.
16. Сделайте так, чтобы  фоновая картинка не прокручивалась вместе с текстом (вставьте
команду BGPROPERTIES=FIXED). Запишите получившийся пример в тетрадь для практически и
лабораторных работ.
Пример:
<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY
BACKGROUND="Приложение1\15.jpg" BGPROPERTIES=FIXE
D> Прежде всего, позвольте представиться. Я – веселый мышонок
по имени Микки. Живу я в огромной сказочной стране
Диснейленде. Вместе со мной живут мои друзья: братья Билли,
Вилли, Дилли с их дядюшкой Дональдом, забавный медвежонок
Винни, славный олененок Бэмби, озорной щенок Плуто и многие
многие другие. Так вот, к чему это я. Дело в том, что в прошлом
году исполнилось 100 лет человеку, без которого сегодня трудно
представить нашу (а значит, и вашу) жизнь. Этот человек – наш
создатель Уолт Элиас Дисней. Без лишней скромности могу
сказать, что я, Микки Маус – пожалуй, самый знаменитый
персонаж Диснея. И я на своей домашней страничке решил
поделиться с вами тем, что знаю о жизни своего "родителя".
Читайте дальше…
</BODY>
</HTML>
Оформление отчета
1. Переписать в тетрадь для практических и лабораторных работ ход создания HTMLдокумета, не нарушая
последовательности.
2. Записать в тетрадь для практических и лабораторных работ следующие пояснения и примеры:
Значение цвета в атрибутах HTMLязыка может задаваться несколькими способами:
названием, например "red";
кодом RGB, например "#FFFFFF" ;
в десятичном виде, например "255, 0, 0" ;
в процентах, например "30%, 40%, 30%";
Код RGB  это три шестнадцатеричных числа в диапазоне 00  FF. 1ое, 2ое и 3е число, соответственно,
представляют собой количество красного, зеленого и синего тонов в цвете. Например, #000000  это черный
цвет (отсутствие цвета), #FF0000  яркокрасный, #00FF00  яркозеленый, #0000FF  яркосиний, а #FFFFFF
 белый (все цвета присутствуют полностью).
 Таблица 16и стандартных цветов
Название
черный
темнобордовый
зеленый
оливковый
Код RGB
#000000
#800000
#008000
#808000
Имя
black
maroon
green
olive
Цвет Название

серебряный
красный
известь
желтый
Код RGB
#C0C0C0
#FF0000
#00FF00
#FFFF00
Имя
silver
red
lime
yellow
Цвет

description:
темносиний
фиолетовый
чирок
серый
#000080
#800080
#008080
#808080
navy
purple
teal
gray

синий
фуксия
аква
белый
#0000FF
#FF00FF
#00FFFF
#FFFFFF
blue
fuchsia
aqva
white

Цвет фона задает слово BGCOLOR.
Пример:
<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY   BGCOLOR=   #FFFF00> Прежде   всего,   позвольте
представиться. Я – веселый мышонок по имени Микки.
</BODY>
</HTML>

Контрольные вопросы
1. Что такое интернет?
2. Что такое HTML?
3. Как называются программы просмотра файлов в Интернет?
4. Какие программы просмотра файлов в Интернет вы знаете?
5. Как реализуется создание Webдокумента с использованием HTML?
Литература
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012.
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
6. http://profwebsit.ru/uchebnikipowebdizajnu.html    коллекция учебников  по webдизайну и Интернет
программированию.
7. CodeNet  все для программиста [Электронный ресурс].  Режим доступа: http://www.codenet.ru/,
свободный.
8. Coding Lessons.ru [Электронный ресурс].  Режим доступа: http://codinglessons.ru/, свободный.
9. DWEB.ru: материалы для webдизайнера [Электронный ресурс]. Режим доступа: http://dweb.ru/,
свободный.
10. HTMLсправочник [Электронный ресурс]. Режим доступа: http://html.manual.ru/, свободный.
11. HTML: Курс молодого бойца [Электронный ресурс]: учебное пособие для чайников" [Электронный
ресурс] http://www.ostu.ru/personal/sim/Uhtml/index.html, свободный.
12. HTML.net: информационнообразовательный сайт [Электронный ресурс]. Режим доступа:
http://ru.html.net, свободный. (Учебники HTML, CSS), свободный.

description:
Практическое занятие
форма текущего контроля
по теме: «Формы. Теги и параметры для воспроизведения звуковых файлов»
Цель: научиться воспроизводить звуковые файлы, ознакомиться с формами и параметрами воспроизведения
звука.
По завершению практического занятия студент должен уметь: воспроизводить звуковые файлы.
Продолжительность: 2 аудиторных часа (90 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.Перейдите по ссылке  http://htmlbook.ru/html/audio и запишите теги для воспроизведения звуков.
2. Перепишите в тетрадь для практических и лабораторных работ пример, указанный на сайте
http://htmlbook.ru/html/audio
3. С помощью браузера (на выбор) покажите свой результат воспроизведения звукового файла.
4. Перейдите по ссылке http://www.webnav.ru/books/html4/sound/
5. Запишите в тетрадь для практических и лабораторных работ пример 7.1. Пример документа,
использующего звуковые фрагменты.
6. Перечертите таблицу параметров тега <EMBED>  в тетрадь для практических и лабораторных работ.
7. Запишите программы, с помощью которых возможно воспроизводить звуковые файлы в Webсайтах.
В тетради для практических и лабораторных работ выполнить все задания, не нарушая нумерации.
Оформление отчета
Контрольные вопросы
1. Что такое звуковой файл?
2. Какие атрибуты для звуковых файлов вы знаете?
3. Как воспроизвести звуковой файл на webсайте?
4. Какие параметры тега <EMBED> вы знвете?
Литература
[2] Киселев С. В., Алексахин С. В., Остроух А. В. Вебдизайн М.: Академия, 2012. – 344с.
[3] Кроудер Дэвид, Создание вебсайта для чайников, Издательство: Диалектика/Вильямс, 2016, 336 стр.
[4] Немцова Т. И., Назарова Ю. В. И др. Практикум по информатике: учеб. пособ. Ч. 2: Компьютерная
[5] Дунаев, В. В. HTML, скрипты и стили. — 3е изд., перераб. и доп.  СПб.: БХВ Петербург, 2011
[6] Никсон, Р. Создаем динамические вебсайты с помощью PHP, MySQL, JavaScript и CSS. СПб.: Питер,
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64
Основные источники:
1.
стр.
Дополнительные источники:
1.
2.
3.
графика и Webдизайн. Практикум. – М.: Форум, – 288 с.
4.
5.
2014.
6.
7.
Интернетресурсы:
1. http://www.myshared.ru/slide/162084/
2. http://900igr.net/prezentatsii/informatika/vebstranitsy.html
3. http://videourokionline.ru/load/video_uroki_web_dizajn/5
4. http://compteacher.ru/webdesign
5. http://des4web.ru/  коллекция учебников  по webдизайну и Интернет программированию.
[7] Чекко, Р. Графика на JavaScript.  СПб. : Питер, 2013.
[8] Шмитт К. HTML5. Рецепты программирования /К.Шмитт, К.Симпсон.  СПб. : Питер, 2012.

description:
Практическое занятие
форма текущего контроля
по теме: «Визуальные эффекты форматирования текста. Псевдоклассы ссылок»
Цель: ознакомить с псевдоклассами ссылок, научиться использовать визуальные эффекты форматирования
текста на CSS.
По   завершению   практического   занятия   студент   должен   уметь:  использовать   визуальные   эффекты
форматирования текста на CSS.
Продолжительность: 1 аудиторный час (45 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.  Начертить таблицу тегов для форматирования текста в тетрадь для практических и лабораторных работ.
Код HTML
Описание
Пример
Текст
Текст
Текст
Текст

Текст

Текст
Жирное начертание текста
Курсивное начертание текста
Верхний индекс
Нижний индекс
Текст пишется как есть, включая все пробелы
Курсивный текст
Текст
Жирное начертание текста
Текст
Текст
e=mc2
H2O
Текст
Текст
Текст
2. Используя данный код, сделайте текст одновременно жирным и курсивным шрифтом, результат  сохраните
в файле под своей фамилией в папке группы.
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  <meta httpequiv="ContentType" content="text/html; charset=utf8">
  <title>Текст</title>

Он словно вырезан из камня, стоек и неподвижен в отличие от его противников.
   Дух и жизненная сила в нём достигла совершенства.
   Но вот беда — никто не смеет принять его вызов.

3. Используя теги  и , осуществите создание нижнего индекса. Результат выполнения сохраните в
файле под своей фамилией в папке группы.
4. Перепишите в тетрадь для практических и лабораторных работ, какие существуют псевдоклассы,  с сайта
http://webremeslo.ru/css/glava15.html
5.На сайте  http://webremeslo.ru/css/glava15.html выполнить примеры, результаты сохранить в файле под своей
фамилией в папке группы.
Оформление отчета

description:
Практическое занятие
форма текущего контроля
по теме: «Статические фильтры в CSS. Свойства блочных элементов»
Цель:  ознакомить   со   статическими   фильтрами   в   CSS   и   свойствами   блочных   элементов,   научиться
использовать статические фильтры в CSS.
По завершению практического занятия студент должен уметь: использовать статические фильтры в CSS.
Продолжительность: 1 аудиторный час (45 минут)
Персональный компьютер и интернет.
Необходимые принадлежности
Задание
1.  Перейти по ссылке http://www.spravkaweb.ru/css/filter/static и записать статические фильтры в тетрадь для
практических  и лабораторных работ.
2. Перейти по ссылке http://htmlbook.ru/content/blochnyeelementy и записать в тетрадь для практических  и
лабораторных работ свойства блочных элементов.
3. Перепишите в тетрадь для практических и лабораторных работ, какие существуют фильтры,  с сайта
https://habrahabr.ru/post/144852/
4. Наберите код, представленный ниже
 <!DOCTYPE html>

  <meta charset="utf8">
  <title>filter</title>

Результат сравните, пройдя по ссылке  http://htmlbook.ru/css/filter/blur
В   тетрадь   для   практических   и   лабораторных   работ   записать   статические   фильтры   и   свойства   блочных
элементов. Записать в тетрадь код с использованием фильтра Размытие.
Контрольные вопросы
Оформление отчета
1. Что такое фильтра?
2. Какие фильтра в CSS вы знаете?
3. Что такое блочные элементы?
4. Какие блочные элементы вы знаете?
Литература
Основные источники:
1.
стр.
[1] Киселев С. В., Алексахин С. В., Остроух А. В., Вебдизайн, 6е изд., стер. учебное пособие, 2015 г., 64

intro:
Комплект контрольно-оценочных средств по дисциплине ОП 00.11 Web-дизайн разработан на основе Федерального государственного образовательного стандарта (ФГОС) среднего профессионального образования (далее – СПО) по специальности СПО 09.02.03 "Программирование в компьютерных системах" Организация-разработчик:
ГБПОУ ВО «Лискинский промышленно-транспортный техникум имени А.К. Лысенко»
Разработчик: Плотникова С.С., преподаватель
Ф.И.О., ученая степень, звание, должность.
Результатом освоения дисциплины является овладение обучающимися знаниями в создании  и оформлении Web-сайтов; в создании форм и элементов управления сайтами и гиперссылками, а также в использовании технологий построения и эксплуатации распределенных информационных системКомплект контрольно-оценочных средств по дисциплине разработан на основе Федерального государственного образовательного стандарта (ФГОС) среднего профессионального образования (далее – СПО) по специальности СПО 09.02.03 Программирование в компьютерных системах

информатика

group: Дисциплины

title: Комплект контрольно-оценочных средств  по программе дисциплины     ОП 00.11 Web-дизайн