Министерство образования Нижегородской области
Государственное бюджетное профессиональное образовательное учреждение
«Арзамасский коммерческо-технический техникум»
УТВЕРЖДАЮ
Зам. директора по УиНМР
_____________ М.А. Ледянкина
«____»________________2017 г.
ПРОГРАММА ТЕКУЩЕЙ АТТЕСТАЦИИ
учебной дисциплины
Основы сайтостроения
по специальности среднего профессионального образования
09.02.07 Информационные системы и программирование
2017
| Одобрена методическим объединением преподавателей естественнонаучных дисциплин Протокол №___ от «___»_____________20 г Председатель МО: _________________М.С. Шевелева | |
Автор:
Н.Г. Саблукова, к.п.н., зав. отделением СПО, преподаватель информационных дисциплин высшей квалификационной категории ГБПОУ «Арзамасский коммерческо-технический техникум»
Эксперт:
В.П. Дианов, преподаватель информационных дисциплин высшей квалификационной категории ГБПОУ «Арзамасский коммерческо-технический техникум»
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
Цели проведения текущей аттестации
При проведении текущей аттестации преподавателями должны быть достигнуты следующие цели:
определение степени усвоения учебной дисциплины;
стимулирование формирования практических умений и навыков, необходимых для разработки web-сайтов;
формирование готовности студентов самостоятельно применять накопленные знания при выполнении лабораторных работ;
оценка уровня знаний и умений студентов, необходимых им для развития познавательных интересов, интеллектуальных и творческих способностей, используемых в будущей учебной и профессиональной деятельности;
проверка степени достижения целей учебной программы дисциплины «Основы сайтостроения».
Формы контроля, которые необходимо выполнить обучающимся по специальности 09.02.07 Информационные системы и программирование, для которых читается дисциплина «Основы сайтостроения».
Накопление знаний в виде информации, базовых умений и навыков, основ профессиональной культуры у студентов специальности 09.02.07 Информационные системы и программирование, контролируется преподавателем следующих видов контроля:
Ожидаемые результаты обучения
В результате изучения учебной дисциплины «Основы сайтостроения» к студентам предъявляются следующие предметные требования:
Сформированность целостного представления об информационной картине мира, принципов и структуре устройства сети Интернет.
Владение навыками разработки сайтов на языках HTML, CSS.
Владение типовыми приемами проектирования, конструирования и размещения веб-сайта.
Использование прикладных компьютерных программ (редакторы сайтов, браузеры, графические редакторы)
ТЕМАТИЧЕСКИЙ ПЛАН УЧЕБНОЙ ДИСЦИПЛИНЫ
| Наименование темы дисциплины | Кол-во часов | В том числе лабораторные и практические |
| Тема 1. Основы языка HTML и CSS | 18 | 10 |
| Тема 2. Табличная и блочная верстка сайтов | 19 | 10 |
| Дифференцированный зачет | 2 | |
| Итого: | 39 | 20 |
ВИДЫ КОНТРОЛЯ
Приобретенные обучающимися в ходе изучения дисциплины «Основы сайтостроения» умения и знания, включающие в себя
систему базовых знаний, отражающих принципы и структуру устройства сети Интернет, этапы и задачи проектирования web-сайта, основные способы создания web-страниц, основные конструкции языка гипертекстовой разметки документов HTML, применение каскадных таблиц стилей (CSS);
умения проектировать, конструировать и размещать web-сайты;
применение на практике личного опыта использования основ сайтостроения в индивидуальной, коллективной учебной и познавательной, в том числе проектной деятельности,
контролируются преподавателем в рамках текущего контроля.
Текущий контроль
Текущий контроль предназначен для проверки качества усвоения материала по изученной теме, стимулирования своевременной учебной работы обучающихся и получения обратной связи для планирования и осуществления корректирующих и предупреждающих действий, а также, при необходимости, и коррекции методики проведения занятий.
Текущий контроль проводится в форме:
Критерии оценки
Результаты текущего контроля оцениваются по пятибалльной шкале и регистрируются в учебном журнале.
Для оценки результатов текущего контроля выбраны следующие критерии:
Устный опрос
Оценка «5» (отлично) предполагает грамотное, полное и логическое изложение ответа, умение иллюстрировать теоретические положения конкретными примерами;
Оценка «4» (хорошо) выставляется, если обучающийся владеет понятийным аппаратом, ориентируется в изученном материале, грамотно излагает ответ, но содержание и форма ответа имеют отдельные неточности.
Оценка «3» (удовлетворительно) выставляется, если обучающийся обнаружил знание и понимание основных положений учебного материала, но излагает его не полно, непоследовательно, допускает неточности в определении понятий, не умеет иллюстрировать теорию конкретными примерами.
Оценка «2» (плохо) выставляется, если у обучающегося разрозненные, бессистемные знания. Не умеет выделить главное и второстепенное, допускает ошибки в определении понятий, искажает их смысл, беспорядочно и неуверенно излагает материал.
Оценка «1» (очень плохо) выставляется, если обучающийся совсем ничего не ответил.
Выполнение тестовых заданий
Оценка «5» (отлично) - 100-90%
Оценка «4» (хорошо) - 89-80%
Оценка «3» (удовлетворительно) - 79-60%
Оценка «2» (плохо) - 59-50%
Оценка «1» (очень плохо) – менее 50%
Выполнение самостоятельных заданий на ПК
Оценка «5» (отлично) ставится, если задание выполнено самостоятельно и полностью в соответствии с заданным образцом или требованием задания;
Оценка «4» (хорошо) ставится, если работа выполнена полностью, но имеются отдельные неточности или правильно выполнена большая часть работы (85%);
Оценка «3» (удовлетворительно) ставится, если допущено 2-3 ошибки при выполнении работы или работа выполнена на половину;
Оценка «2» (плохо) ставится, если допущены существенные ошибки, показавшие, что обучающийся не владеет обязательные умениями по данной теме;
Оценка «1» (очень плохо) ставится, если обучающийся вообще не выполнил задание.
ИНФОРМАЦИОННОЕ ОБЕСПЕЧЕНИЕ
Основные источники учебной литературы:
Евсеев Д.А. Web-дизайн в примерах и задачах: учебное пособие. - М.:КНОРУС, 2016. - 264 с. (электронно-библиотечная система book.ru)
Дополнительные источники учебной литературы:
Учебники по HTML и CSS [Электронный ресурс]. Форма доступа: http://htmlbook.name.
Русаков М. Учебник по HTML 5 [Электронный ресурс]. Форма доступа: http://MyRusakov.ru.
Ruseller.com. Частная коллекция качественных материалов для тех, кто делает сайты [Электронный ресурс]. Форма доступа: http://ruseller.com/
| Министерство образования Нижегородской области Государственное бюджетное профессиональное образовательное учреждение «Арзамасский коммерческо-технический техникум» |
| УТВЕРЖДАЮ Зам. директора по УиНМР _____________ М.А. Ледянкина «___» _________________2017 г |
Комплект
контрольно-измерительных материалов
для текущего контроля знаний
Специальность:09.02.07 Информационные системы и программирование
Дисциплина: Основы сайтостростроения
Курс: 1
Преподаватель: (и) ______________ Н.Г. Саблукова
Рассмотрено на заседании МО
Протокол от «___» ___ 20__г №___
Председатель МО ______________ М.С. Шевелева
Тема «Основы языка HTML»
Тест
I вариант
Что определяет тег DOCTYPE?
кодировку сайта
описание ключевых слов
версию языка html
оформление сайта
Какой тег определяет шапку сайта:
body
head
html
strong
Какая строка написано правильно и в соответствии с правилом вложенности тегов? Запишите назначение указанных тегов.
Текст
Текст
Текст
Текст
На странице сайта необходимо сделать гиперссылку на документ file.html, который расположен в папке files. Какой тег для гиперссылки написан правильно?
Ссылка на файл
Ссылка на файл
Ссылка на файл
Ссылка на файл
Для чего служат якорях в гиперссылках?
позволяют перемещаться в пределах одной страницы в нужное место
позволяют перемещаться на главную страницу сайта
позволяют перемещаться на другие страницы сайта
позволяют перемещаться на уже созданный сайт
Какая строка позволяет добавить изображение на сайт?
src
form
title
img
На сайт нужно добавить изображение foto.jpg, которое хранится в главной папке сайта, с всплывающей подсказкой «фотография». Какая строка написана правильно?
img src = “foto.jpg” alt= “фотография”
img src = “img/foto.jpg” title = “фотография” /
img src = “foto.jpg” title = “фотография” /
img src = “foto.jpg” title = “фотография”
Какой тег служит для создания самых больших заголовков?
Что означает тег input type = "password" /?
однострочное поле для ввода текста
многострочное поле ввода для большого количества информации
однострочное поле для ввода пароля
поле для добавления файла
Запишите html-код web-страницы, на которой нужно вывести нумерованный список группы.
II вариант
Что задается с помощью тега meta charset = “utf-8”?
кодировка сайта
описание ключевых слов
версия языка html
оформление сайта
Какой тег определяет тело сайта?
strong
head
html
body
Какая строка написано правильно и в соответствии с правилом вложенности тегов? Запишите назначение указанных тегов.
Текст
Текст
Текст
Текст
На странице сайта необходимо сделать гиперссылку на документ file.html, который расположен в главной папке сайта. Какой тег для гиперссылки написан правильно?
Ссылка на файл
Ссылка на файл
Ссылка на файл
Ссылка на файл
Что такое спецсимволы?
скрипты
знаки, которых нет на клавиатуре
редкие символы
товарные знаки
Какая строка позволяет добавить форму для регистрации на сайт?
src
form
title
img
На сайт нужно добавить изображение ric.jpg, которое хранится в папке img сайта, с всплывающей подсказкой «рисунок». Какая строка написана правильно?
img src = “ric.jpg” alt= “фотография”
img src = “img/ric.jpg” title = “фотография” /
img src = “ric.pg” title = “фотография” /
img src = “img/ric.jpg” title = “фотография”
Какой тег служит для создания абзаца?
Что означает тег input type = "text" /?
однострочное поле для ввода текста
многострочное поле ввода для большого количества информации
однострочное поле для ввода пароля
поле для добавления файла
Запишите html-код web-страницы, на которой нужно вывести маркированный список изучаемых дисциплин.
Тема «Основы CSS»
Тест
I вариант
Что означает аббревиатура CSS?
Компьютерные таблицы стилей
Каскадные таблицы стилей
Красочные таблицы стилей
Креативные таблицы стилей
Как правильно подключить внешний файл с CSS стилями:
mystyle.css
-
-
-
В какой части HTML документа следует подключать CSS стили
В секции
В начале документа
В конце документа
В секции
Какой тег HTML используется для создания локальных стилей в разделе head?
-
-
-
Укажите верно написанный стиль:
body {color: black;}
{body:color=black;}
body:color=black;
{body;color:black;}
Какое из CSS свойств используется для задания размеров текста?
Font-size
Font-style
Text-size
Text-style
Каким CSS свойством убрать подчеркивание у ссылок?
a {decoration:no-underline;}
a {text-decoration:none;}
a {text-decoration:no-underline;}
a {underline:none;}
Для чего используются селекторы class?
Для создания стиля у уникального идентификатора
Для создания стиля у группы подобных элементов
Для создания вложенных стилей
Для создания стилей у ссылок
Какой псевдокласс означает состояние непосещенной ссылки?
active
link
focus
hover
Найдите ошибки в написании стилей и запишите правильно.
font-size: 24px;
color: red
border: black dotted;}
font-size=12px}
color: fga;}
II вариант
Для чего используется CSS?
Для создания разметки сайта
Для описания внешнего вида сайта
Для подключения сайта к базе данных
Для загрузки сайта на хостинг
Какая строка подключения внешнего файла с CSS стилями написана правильно:
href="style.css"
-
-
style.css
В какой части HTML документа следует подключать CSS стили
В секции
В начале документа
В конце документа
В секции
Какой HTML атрибут используется для создания внутренних inline-стилей?
Styles
Class
Style
Font
Укажите верно написанный стиль:
{body: background-color=#000;}
body {background-color: #000;}
{body; background-color: #000;}
body: background-color=#000;
Какое из CSS свойств используется для задания жирного текста?
Font-size
Font-weight
Text-style
Text- weight
Каким CSS свойство позволяет сделать все буквы строчными?
a { text-transform: capitalize;}
a { text-transform: lowercase;}
a { text-transform: uppercase;}
a { text-transform: underline;}
Для чего используются селекторы id?
Для создания стиля у уникального идентификатора
Для создания стиля у группы подобных элементов
Для создания вложенных стилей
Для создания стилей у ссылок
Какой псевдокласс означает состояние, когда навели мышку на объект?
active
link
focus
hover
Найдите ошибки в написании стилей и запишите правильно.
font-size: 12px
color: 123
border: solid black;}
width=1024px}
color: red;}
Самостоятельная работа на ПК
Создайте файл index.html документ по образцу:

Создайте файл style.css и подключите его к файлу index.html
В файле style.css задайте следующие стили:
Для тега body:
задайте фоновую заливку (самостоятельно подберите цветовую гамму, используя сайты https://colorscheme.ru)
задайте цвет шрифта
задайте размер и тип шрифта
Для тега div:
задайте ширину (в процентах);
задайте рамку;
задайте внутренние отступы;
задайте выравнивание по центру с помощью свойства: margin: 0 auto.
-
Для тега h1:
задайте цвет шрифта, немного отличающийся от цвета основного текста
задайте выравнивание текста по центру
Для ссылки a:
задайте цвет шрифта
уберите подчеркивание.
Для ссылки a при наведении:
добавьте подчеркивание
-
В файле index.html добавьте для первого абзаца id="first". В файле style.css задайте для этого id выравнивание по центру.
В файле index.html добавьте для второго и третьего абзацев class="second". В файле style.css задайте для этого класса выравнивание по ширине.

-
Тема «Блочная верстка сайта»
Самостоятельная работа на ПК
Задание 1. Записать html-код для формирования следующей верстки сайта с помощью блоков (внутри блоков ничего не писать):
id=”main”

id=”menu” id=”header”  |
class=”left” | id=”center” class=”content” -
|
id=”footer” -
|
Указать у блоков заданные классы и идентификаторы.
Задание 2. Добавить в html-код в каждый блок теги со следующим содержимым:
Главная Контакты Изображения Сайт-портфолио -
|
Разделы портфолио |     -
|
©port |
Для создания текста используйте теги абзаца
Для создания меню используйте теги маркированного списка
При выводе изображений, учтите, что они расположены в папке img.
Самостоятельная работа на ПК
Задание. Обтекание элементов
Наберите предложенный код, откройте редактор кода в браузере, по очереди отключите свойства стилей у всех элементов и просмотрите результат.
DOCTYPE html
title Практический пример применения обтекания title
#left, #right {
width: 200px;
height: 200px;
}
#left {
float: left;
background: #ccc;
margin-right:15px;
}
#right {
float: right;
background: #5c3;
margin-left: 15px;
}
#center {
border: 2px solid #f00;
padding: 10px;
overflow: hidden;
}
h1 Практический пример применения обтеканияh1
div id = "left" Это левый блок div
div id = "right" Это правый блок div
div id = "center"
h2 Это центральный блокh2
p Термин информатика возник в 60-х гг. во Франции для названия области, занимающейся автоматизированной обработкой информации с помощью электронных вычислительных машин. Французский термин образован путем слияния слов "информация" и "автоматика" и означает "информационная автоматика или автоматизированная переработка информации". В англоязычных странах этому термину соответствует синоним computer science (наука о компьютерной технике). p
pСуществует множество определений информатики, что связано с многогранностью ее функций, возможностей, форм, методов. Одно из наиболее общих определений такое.p
pИнформатика – это область человеческой деятельности, связанная с процессами преобразования информации с помощью компьютеров и их взаимодействием со средой применения..p
p Часто возникает путаница понятий "информатика" и "кибернетика". Попытаемся разъяснить их сходство и различие. p
pКибернетика – это наука об общих принципах управления в различных системах: технических, биологических, социальных и др.p
div
body
html