Поделиться
Рамки HTML.doc
Министерство образования и науки ЛНР
Государственное бюджетное образовательное учреждение
среднего профессионального образования
Луганской Народной Республики
«Луганский колледж моды, парикмахерского искусства и компьютерных
технологий»
НА ТЕМУ:
«Работа с рамками. Деформация объекта при наведении курсора»
Подготовил:
Преподаватель спецдисциплин
Макеев Кирилл Олегович
По дисциплине:
Технологии создания и обработки
цифровой мультимедийной информации
Луганск 2020
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
План урока
Тема программы: WEB - разработка
Тема урока: Работа с рамками. Деформирование объекта при наведении курсора.
Цели урока:
Образовательная: Формирование знаний, умений и навыков по созданию и оформлению объектов с помощью рамок, а также изменение свойств объектов при наведении на них курсора на основе полученных знаний.
Развивающая: Развитие рационального, логического и аналитического мышления. Развитие внимательности и профессиональных навыков в web-разработке.
Воспитательная: Воспитание активности и самостоятельности учащихся, стремление к саморазвитию профессиональных навыков.
Тип урока: Комбинированный.
Вид урока: Лекция, практическая работа.
Метод обучения: Словесный, практический, поисковый, объяснительно-иллюстративный.
Форма работы: индивидуальная, фронтальная.
МТО: Персональные компьютеры, проектор, ноутбук.
Дидактическое обеспечение: Презентация, конспект учащихся, карточки для проверки знаний.
Межпредметные связи:
Методическая цель: Профессиональное использование языков HTML/CSS.
Литература:
ХОД УРОКА
1. Организационная часть – 1.
Добрый день. Присаживайтесь. Достаем конспекты и включаем компьютеры. Староста доложи кто отсутствует?
2. Мотивация учебной деятельности. – 2.
Данная тема, очень тесно связана с пройденным материалом, а также без нее не обойтись при изучении дальнейшего материала. Полученные знания будут необходимы для дальнейшего оформления сайта и придания ему визуальных эффектов. А также для оформления меню, без которого не обходится не один сайт.
3. Сообщение темы и целей урока. – 2.
Целью данного урока является изучение способов создания рамок и оформления с их помощью элементов сайта. Изучение структуры кода, а также способов его записи, а также возможности упрощения. Дополнительной целью является изучение псевдо класса :hover, с помощью которого можно изменять свойства родительского класса.
4. Актуализация опорных знаний (необходимых для изучения нового материала). – 10.
Прежде чем перейти к новой теме, необходимо повторить основные пройденные моменты, они помогут нам в освоении нового материала, так как он похож по форме записи с прошлым материалом. А сейчас необходимо ответить на несколько вопросов.
4.1. Назвать основные элементы синтаксиса?
Ответ: К основным элементам синтаксиса относятся знаки препинания( точка, запятая, двоеточие, точка с запятой), фигурные скобки, знаки больше меньше, теги, кавычки.
4.2. Структура языка HTML?
Ответ: Основная структура языка HTML
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
4.3. Основные причины ошибок?
Ответ: Основными причинами ошибок, являются незакрытые скобки, не закрытые кавычки, лишние скобки, ошибки в записи тегов, ошибки в обращении к тегам.
4.4. Поиск ошибок, по подготовленным заданиям
На данном этапе работы не обходимо в заданиях найти и исправить ошибки.
Задание 1
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
p{
font-size: 30px
color: red;
}
<style>
</head>
<body>
<p> Привет, Мир<p>
</body>
</html>
Задание 2
<html>
<head>
<title></title>
<style type="text/css>
li{
font-size: 35px;
color: green;
}
}
p{
font-size: 45px;
}
</style>
</head>
<body>
<ul type="circle">
<li>text</li>
<li>text</li>
<li>text</li>
<li>test<li>
</ul>
<p>Hello, Word!</p>
</body>
</html>
Задание 3
<html>
<head>
<title></title>
<style type="text/css">
#all{
background-color: grey;
width:600px;
height:600px;
margin: 0 auto
padding: 50px;
}
}
#one{
background-color: red;
width:150px;
height:150px;
margin 0 auto;
}
</style>
</head>
<body>
<div id=all">
<div id="one">
Text
</div>
</div>
</body>
</html>
4.5. Теги выравнивания
Ответ: Float, margin, padding, align
4.6. Основное отличие margin и padding.
4.7. Возможно ли совмещение нескольких языков в одном документе?
Ответ: Совмещение нескольких языков возможно, только в документе html. Возможно совмещать двумя способами: 1й это глобальное объявление таблицы стилей в шапке, 2й это добавление стилей к конкретным тегам.
5. Формирование новых знаний и умений. – 20.
5.1. Сообщение новой информации. Изучение нового материала, по средствам диалога с группой, анализирую пройденный материал.
5.2. Виды рамок border-style.
Border-style: solid, dotted, dashed, double, groove
border-top-style: dotted;
border-right-style: double;
border-bottom-style: solid;
border-left-style: dashed;
|
Число значений |
Результат |
|
1 |
Стиль границы будет задан для всех сторон элемента. |
|
2 |
Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой. |
|
3 |
Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы. |
|
4 |
Поочередно устанавливается стиль верхней, правой, нижней и левой границы. |
5.3. Размер рамок border-width.
Border-width: точное значение в px thin(2px) medium (4px) thick (6px)
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
|
Число значений |
Результат |
|
1 |
Стиль границы будет задан для всех сторон элемента. |
|
2 |
Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой. |
|
3 |
Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы. |
|
4 |
Поочередно устанавливается стиль верхней, правой, нижней и левой границы. |
5.4. Цвет рамок border-color.
Border-color: #номер цвета
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: black;
|
Число значений |
Результат |
|
1 |
Стиль границы будет задан для всех сторон элемента. |
|
2 |
Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой. |
|
3 |
Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы. |
|
4 |
Поочередно устанавливается стиль верхней, правой, нижней и левой границы. |
5.5. Способы оформления border-radius.
Скругление углов с помощью тега border-radius
• Для каждого угла можно назначить свое закругление:
• border-top-left-radius: 20px;
• border-top-right-radius: 0;
• border-bottom-right-radius: 30px;
• border-bottom-left-radius: 0;
• Упрощенная запись
• border-radius: 20px 0 30px 0;
5.6. Изменение параметров объекта с помощью тега Hover
Деформация осуществляется с помощью тега :hover
Данный тег необходимо продублировать с уже существующим классом, например:
.ramka:hover
С отличающимися параметрами
.ramka{
margin: 0 auto;
width: 400px;
height: 400px;
background: #F5F240;
border: 3px solid #F0D900;
border-radius: 20px 300px 60px 300px;
}
.ramka:hover{
margin: 0 auto;
width: 200px;
height: 200px;
background: #F5F240;
border: 1px solid #F0D900;
border-radius: 10px 150px 30px 150px;
}
6. Закрепление нового материала. – 8.
Для закрепления изученного материала учащимся необходимо сесть за компьютеры и самостоятельно создать рамку с использованием псевдокласса :hover для изменения его свойств. Если кто не успел справится с заданием, оно идет как дополнительное задание на дом.
7. Подведение итогов урока. – 1.
7.1. Анализ деятельности студентов в процессе урока
7.2. Анализ ошибок и методы устранения
7.3. Сообщение и обоснование оценок
8. Выдача домашнего задания. – 1.
8.1. Добавить комментарии в код программы
8.2. Написать код создания и оформления блока.
Перечень электронных образовательных ресурсов. необходимых для проведения урока
1. http://shpargalkablog.ru/2012/02/css-ramka.html
2. https://habrahabr.ru/post/141658/
3. http://htmlbook.ru/css/border-color
4. http://htmlbook.ru/css/border-style
5. http://htmlbook.ru/css/border-width
6. http://htmlbook.ru/css/border
7. http://htmlbook.ru/css/hover
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
