План-конспект открытого урока. Специальность 09.02.05 Прикладная информатика (по отраслям) Тема урока: «Создание сайта с использованием HTML + CSS»
план-конспект занятия
Тема программы: «Создание гипертекстовых документов».
Вид занятия: Урок учебной практике.
Тип и вид урока: Комбинированный урок обучения умениям и навыка.
Методы обучения: наглядно-демонстрационный (демонстрация работы с помощью мультимедийного оборудования); практический (выполнение упражнений по заданию преподавателя); словесный (повторение, рассуждение, беседа); метод контроля, самоконтроля (при выполнении практического задания). Форма проведения: Групповая.
Продолжительность занятия: 6 часов.
Место проведения: Кабинет учебной практики по специальности: « Прикладная информатика (по отраслям)».
Скачать:
| Вложение | Размер |
|---|---|
 план занятия | 410.64 КБ |
 презентация к занятию | 2.91 МБ |
| раздатка | 13.67 КБ |
| самоанализ проведения занятия | 21.43 КБ |
Предварительный просмотр:
План-конспект открытого урока.
Специальность 09.02.05 Прикладная информатика (по отраслям)
Тема урока: «Создание сайта с использованием HTML + CSS»
Тема программы: «Создание гипертекстовых документов».
Тип урока: Урок изучения трудовых процессов и комплексов операций.
Вид урока: практическая работа.
Цели урока:
Обучающая: продолжить формирование умений применения теоретических знаний работы с web страницами на практике, отработка приемов работы с браузерами; закрепление студентами правил создания web страниц, а также отработка умения их применять на практике.
Развивающая: способствовать развитию познавательного интереса, логического мышления, речи и внимания студентов; информационной культуры и потребности приобретения знаний; навыка самостоятельности в работе; умений рациональной организации рабочего места при работе с компьютером; соблюдение норм времени.
Воспитательная: способствовать воспитанию ответственности в работе, уверенности в своих знаниях при работе с web страницами; внимательности, культуры поведения на уроке; навыка самостоятельности в работе.
Когнитивные цели: уметь организовать рабочее место; знать правила техники безопасности при работе с ПК; осваивать технологию выполнения работ с помощью инструкционно – технологических карт.
Материальное и дидактическое обеспечение урока: компьютеры, презентации «Создание сайта с использованием HTML + CSS», мультимедийный проектор, программа Notepad++, индивидуальные задания.
Методы обучения: наглядно-демонстрационный (демонстрация работы с помощью мультимедийного оборудования); практический (выполнение упражнений по заданию преподавателя); словесный (повторение, рассуждение, беседа); метод контроля, самоконтроля (при выполнении практического задания).
Межпредметные связи: английский язык.
Формирование компетенций:
ПК 1.1Обрабатывать статический информационный контент
ПК 1.9[1]Размещение информации на сайте
ОК 1.Понимать сущность и социальную значимость своей будущей профессии, проявлять к ней устойчивый интерес
ОК 2.Организовывать собственную деятельность, выбирать типовые методы и способы выполнения профессиональных задач, оценивать их эффективность и качество
ОК 3.Принимать решения в стандартных и нестандартных ситуациях и нести за них ответственность.
ОК 4.Осуществлять поиск и использование информации, необходимой для эффективного выполнения профессиональных задач, профессионального и личностного развития
ОК 5.Использовать информационно-коммуникационные технологии в профессиональной деятельности.
ОК 6.Работать в коллективе и команде, эффективно общаться с коллегами, руководством, потребителями
Ход урока:
- Организационный этап – 1мин.
- Рапорт дежурного о наличии обучающихся на уроке.
- Внешний вид, готовность обучающихся к уроку.
- Назначение дежурных и знакомство обучающихся со схемой распределения по рабочим местам.
- Раздача технической документации.
II. Вводный инструктаж (42 мин)
Сообщение преподавателем темы и цели урока.
Повторение охраны труда и техники безопасности. (5 мин)После повторения охраны труда и техники безопасности каждый обучающийся расписывается в "журнале инструктажей по охране труда и техники безопасности".
Повторение пройденного материала. (10 мин)
Вот и подошли мы к завершению изучения основ CSS.
Сегодня испробуем на практике все знания, которые вы получили, изучая основы CSS. Предлагаю вместе со всеми создать простой сайт-визитку с использованием HTML + CSS.
Вот сама схема и план действий:
План:
1). Создание файла «index.html» и «CSS».
2). Вставка в файл «index.html» скелет html (стандартный код).
3). Подключение «index.html»с «style.css»
.4). Создание меню.
5). Вставка логотипа.
6). Создание блока для контента.
7). Создание подвала.
8). Создание остальных страниц
Что такое HTML?
HTML – (от англ. Hypertext Markup Language ) это язык разметки гипертекста, разработанным британским ученным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах.
Попробую своими словами и максимально проще объяснить, что значит язык разметки гипертекста.
Гипертекст – это совокупность текстов, ссылок, картинок, таблиц, которые взаимосвязаны. Это вам ничего не напоминает? Да, это обыкновенная веб-страница.
Разметка в HTML – это совокупность тегов, с помощью которых можно определить место на веб-странице для картинки, текста, таблицы и др.
Язык – набор тегов, с помощью которых осуществляется разметка в HTML.
Теперь рассмотрим, из чего состоит скелет HTML документа. Разберем скелет по косточкам.
Скелет HTML
Для лучшего понимания из чего состоит HTML документ, я подготовила схему:
Разъяснение схемы:
1). и - это начало и конец HTML документа.
2). и - голова HTML документа. В голову документа вставляют различные служебные теги (мета теги).
3).
4). и - тело документа. В теле документа находится все, что мы хотим видеть на веб-странице: текст, картинки, таблицы, аудио, видео и т. д.
Вот теперь пришло время выяснить, что такое ТЕГ
Тегом называется все то, что находится между скобками < >. Собственно, совокупность всех тегов и составляет язык разметки HTML.
Для примера я пропишу парочку тегов: , ,
, и др.
Также хочу упомянуть, что есть теги, которые нужно закрывать. Например: - открываем тег. - закрываем тег.
Есть теги одиночки, которые не нуждаются в паре или в закрытии. Например:
- тег для переноса строки.
Я думаю, теории вам хватит. Не расстраивайтесь, если вы ничего из сказанного не поняли. В следующем уроке мы будем практиковаться и создадим с вами простую веб-страницу, используя вот эту теорию. Вы увидите, как это работает.
Создание файла «index.html» и «CSS».Итак, создайте себе отдельную папочку «Мой сайт». Теперь в этой папочке создайте два файла «index.html»и «style.css».
Чтобы создать «index.html»: на компьютере снизу в левом углу нажмите на кнопку «Пуск».Далее выберите «Все программы» => «Стандартные» => «Блокнот».
Далее нажмите «Файл» => «Сохранить как»:
Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мой сайт».В поле «Имя файла» напишите «index.html», а не просто «index» (это важно!). Таким способом мы создаем файл с расширением «*.html» для веб-страниц. Далее нажмите на кнопку «Сохранить»:
Чтобы создать «style.css»:кнопка «Пуск» => «Все программы» => «Стандартные» => «Блокнот»:
В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…»:
Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.
В поле «Имя файла» напишите «style.css», а не просто style (это важно!). Таким способом мы создаем файл с расширением «*.css». Далее нажмите на кнопку «Сохранить»:
Вот, что должно получиться у вас в папке «Мой сайт»:
Вставка в файл «index.html» скелет html (стандартный код)
Откройте файл «index.html» через программу «Блокнот» и вставьте вот такой стандартный HTML код:
Сохраните файл «index.html».
Подключение «index.html» к «style.css»
Напомню вам, чтобы подключить файл со стилями «style.css» к «index.html» перед тегом ,пропишите вот такой код:
Полный пример:
Сохраните файл «index.html».Вот теперь можем создавать сайт.
Начнем с меню.
Создание меню Через списки HTML создадим меню и, естественно, сразу пропишем для каждого раздела меню ссылку на другую страницу:
Вот полный пример:
В результате ничего особенного вы не увидите:
Теперь в CSS сделаем меню горизонтальным, уберем маркеры, сделаем отступы. Для этого в CSS пропишите:
*
{
margin:0px ;
padding:0px;
}
.menu li
{
float:left;
list-style: none;
margin:10px 25px ;
}
Теперь выровняем меню посредине
.menu
{
margin:0 auto;
display:table;
}
Закрасим меню и добавим тень:
.blok-menu
{
overflow: hidden;
background: #444;
box-shadow: 0px 13px 17px -6px #000000;
}
Осталось поменять размер и цвет в названиях меню:
.menu li a
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration: none;
}
.menu li a:hover
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#ccc;
border-bottom:1px dotted #ccc;
}
Итак, вот весь CSS стиль для меню:
*
{
margin:0px ;
padding:0px;
}
.menu li
{
float:left;
list-style: none;
margin:10px 25px ;
}
.blok-menu
{
overflow: hidden;
background: #444;
box-shadow: 0px 13px 17px -6px #000000;
}
.menu
{
margin:0 auto;
display:table;
}
.menu li a
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration: none;
}
.menu li a:hover
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#ccc;
border-bottom:1px dotted #ccc;
}
Смотрим на результат:
Самостоятельная работа:
УПР1.Заполнить таблицу с расшифровкой содержимого файла HTML(Приложение1) (5 мин)
УПР2.Заполнить таблицу с расшифровкой содержимого файла CSS(Приложение2) (5 мин)
УПР3. Адаптировать Панель навигации в соответствии с рисунком (10 мин)
- Цвет тени синий
- Заливка блока навигации зеленная
- Цвет шрифта желтый
- При наведении шрифт красный
- Подчеркивание при наведении красное, 10 рх
Адаптированный код CSS
.menu li
{
float:left;
list-style: none;
margin:10px 25px ;
}
.menu
{
margin:0 auto;
display:inline-block;
}
.blok-menu
{
text-align: center;
background: green;
box-shadow: 0px 13px 17px -6px blue;
}
.menu li a
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:yellow;
text-decoration: none;
}
.menu li a:hover
{
color:red;
border-bottom:10px solid red;
УПР4. Модернизировать Панель навигации в соответствии с рисунком. (8 мин)
- Навигация вертикальная
- При наведении заливка розовая
- Ширина меню 250рх
- Поля внутри блоков 25 рх
Выдача задания обучающимся на урок.
III. Основной этап. Продолжим работу над основным сайтом.
Практическая работа:
Вставка логотипа
Для логотипа создайте папку «image». В этой папке будут храниться все изображения сайта-визитки.
Залейте в эту папку «image» ваш логотип, размерами примерно 200 х 200 px. Дайте название логотипу «logo» и расширении файла «png».Вот так это будет выглядеть в HTML:
![]("image/logo.png"){kind=logo}
Выровняем лого по центру и закруглить через CSS:
.logo
{
margin:0 auto;
width:200px;
margin-top:30px;
margin-bottom:30px;
}
.logo img
{
-moz-border-radius: 200px; /* Firefox */
-webkit-border-radius: 200px; /* Safari, Google Chrome */
-khtml-border-radius: 200px; /* KHTML */
-o-border-radius: 200px; /* Opera */
-ms-border-radius: 200px; /* IE8 */
-icab-border-radius: 200px; /* Icab */
border-radius: 200px; /* CSS3 */
}
Создание блока для контента
Теперь создадим блок для контента. Добавьте в HTML вот такой код:
Очень много текста У нас самая крутая фирма. Опять много текстаЗаголовок
В CSS выровняем блок «content» по центру. Укажем ему ширину, сделаем внутри отступы, выделим блок тенью:
.content
{
width:700px;
margin:0 auto;
padding:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
}
Выровняем заголовок по центру, увеличим размер и поменяем цвет:
.content h2
{
font: 30px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-align:center;
}
Теперь изменим размер и цвет текста. Добавим отступ для красной строки:
.content p
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-indent:20px;
}
Вот весь CSS код для блока «content»:
.content
{
width:700px;
margin:0 auto;
padding:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
}
.content h2
{
font: 30px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-align:center;
}
.content p
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-indent:20px;
}
Создание подвала
Теперь внизу сайта создадим подвал и разместим там копирайт.
В HTML добавьте вот такой код:
В CSS выровняем подвал по центру, изменим цвет текста и ссылки, поменяем размер:
.footer
{
width:100%;
text-align:center;
margin-top:20px;
}
.footer p, .footer a
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
}
.footer a
{
text-decoration: none;
border-bottom:1px dotted #444;
}
.footer a:hover
{
text-decoration: none;
border:0px;
}
Вот так выглядит мой абсолютно весь CSS код файла «style.css»:
*
{
margin:0px ;
padding:0px;
}
.menu li
{
float:left;
list-style: none;
margin:10px 25px ;
}
.blok-menu
{
overflow: hidden;
background: #444;
box-shadow: 0px 13px 17px -6px #000000;
}
.menu
{
margin:0 auto;
display:table;
}
.menu li a
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration: none;
}
.menu li a:hover
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#ccc;
border-bottom:1px dotted #ccc;
}
.logo
{
margin:0 auto;
width:200px;
margin-top:30px;
margin-bottom:30px;
}
.logo img
{
-moz-border-radius: 200px; /* Firefox */
-webkit-border-radius: 200px; /* Safari, Google Chrome */
-khtml-border-radius: 200px; /* KHTML */
-o-border-radius: 200px; /* Opera */
-ms-border-radius: 200px; /* IE8 */
-icab-border-radius: 200px; /* Icab */
border-radius: 200px; /* CSS3 */
}
.content
{
width:700px;
margin:0 auto;
padding:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
}
.content h2
{
font: 30px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-align:center;
}
.content p
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-indent:20px;
}
.footer
{
width:100%;
text-align:center;
margin-top:20px;
}
.footer p, .footer a
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
}
.footer a
{
text-decoration: none;
border-bottom:1px dotted #444;
}
.footer a:hover
{
text-decoration: none;
border:0px;
}
Создание остальных страниц
Вот и готова первая страница. Весь HTML код файла «index.html»:
Очень много текста У нас самая крутая фирма. Опять много текстаЗаголовок
Она же нам послужит как шаблонная страница. После того, как вы сохранили «index.html», создайте файлы:
rabota.html – для страницы «Наши работы»
prais.html – для страницы «Прайс»
contakt.html – для страницы «Контакты»
И во все эти файлы вставьте такой же код, какой в файле «index.html», меняя только текст в