План-конспект открытого урока. Специальность 09.02.05 Прикладная информатика (по отраслям) Тема урока: «Создание сайта с использованием HTML + CSS»
план-конспект занятия

Купцова Светлана Викторовна

Тема  программы: «Создание гипертекстовых документов». 

Вид занятия: Урок учебной практике.

Тип и вид урока: Комбинированный урок обучения умениям и навыка.

Методы обучения: наглядно-демонстрационный (демонстрация работы с  помощью мультимедийного оборудования); практический (выполнение упражнений по заданию преподавателя); словесный (повторение, рассуждение, беседа); метод контроля, самоконтроля (при выполнении практического задания). Форма проведения: Групповая.

Продолжительность занятия: 6 часов.

Место проведения: Кабинет учебной практики по специальности: « Прикладная информатика (по отраслям)».

 

Скачать:


Предварительный просмотр:

План-конспект открытого урока.

Специальность 09.02.05 Прикладная информатика (по отраслям)

Тема урока: «Создание сайта с использованием HTML + CSS»

Тема  программы: «Создание гипертекстовых документов».  

Тип урока: Урок изучения трудовых процессов и комплексов операций.

Вид урока: практическая работа.

Цели урока:

Обучающая: продолжить формирование умений применения теоретических знаний работы с web страницами на практике, отработка приемов работы с браузерами; закрепление студентами правил создания web  страниц, а также отработка умения их применять на практике.

Развивающая: способствовать развитию познавательного интереса, логического мышления, речи и внимания студентов; информационной культуры и потребности приобретения знаний; навыка самостоятельности в работе; умений рациональной организации рабочего места при работе с компьютером; соблюдение норм времени.

Воспитательная: способствовать воспитанию ответственности в работе, уверенности в своих знаниях при работе с web страницами; внимательности, культуры поведения на уроке; навыка самостоятельности в работе.

Когнитивные цели: уметь организовать рабочее место; знать правила техники безопасности при работе с ПК; осваивать технологию выполнения работ с помощью инструкционно – технологических карт.

Материальное и дидактическое обеспечение урока: компьютеры, презентации «Создание сайта с использованием HTML + CSS»,  мультимедийный проектор, программа Notepad++, индивидуальные задания.

Методы обучения: наглядно-демонстрационный (демонстрация работы с  помощью мультимедийного оборудования); практический (выполнение упражнений по заданию преподавателя); словесный (повторение, рассуждение, беседа); метод контроля, самоконтроля (при выполнении практического задания).

Межпредметные связи: английский язык.

Формирование компетенций:

ПК 1.1Обрабатывать статический информационный контент

ПК 1.9[1]Размещение информации на сайте

ОК 1.Понимать сущность и социальную значимость своей будущей профессии, проявлять к ней устойчивый интерес

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

ОК 3.Принимать решения в стандартных и нестандартных ситуациях и нести за них ответственность.

ОК 4.Осуществлять поиск и использование информации, необходимой для эффективного выполнения профессиональных задач, профессионального и личностного развития

ОК 5.Использовать информационно-коммуникационные технологии в профессиональной деятельности.

ОК 6.Работать в коллективе и команде, эффективно общаться с коллегами, руководством, потребителями

Ход урока:

  1. Организационный этап – 1мин.
  1. Рапорт дежурного о наличии обучающихся на уроке.
  2. Внешний вид, готовность обучающихся к уроку.
  3. Назначение дежурных и знакомство обучающихся со схемой распределения по рабочим местам.
  4. Раздача технической документации.

II. Вводный инструктаж (42 мин)

Сообщение преподавателем темы и цели урока.

Повторение охраны труда и техники безопасности. (5 мин)После повторения охраны труда и техники безопасности каждый обучающийся расписывается в "журнале инструктажей по охране труда и техники безопасности".

Повторение пройденного материала. (10 мин)

Вот и подошли мы к завершению изучения основ CSS.

Сегодня испробуем на практике все знания, которые вы получили, изучая основы CSS. Предлагаю вместе со всеми создать простой сайт-визитку с использованием HTML + 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 годах.

Тимом Бернерс-Ли (Tim Berners-Lee)

Попробую своими словами и максимально проще объяснить, что значит язык разметки гипертекста.

Гипертекст – это совокупность текстов, ссылок, картинок, таблиц, которые взаимосвязаны. Это вам ничего не напоминает? Да, это обыкновенная веб-страница.

Разметка в HTML – это  совокупность тегов, с помощью которых можно определить место на веб-странице для картинки, текста, таблицы и др.

Язык – набор тегов, с помощью которых осуществляется разметка в HTML.

Теперь рассмотрим, из чего состоит скелет HTML документа. Разберем скелет по косточкам.

Скелет HTML

Для лучшего понимания из чего состоит HTML документ, я подготовила  схему:

Скелет HTML

Разъяснение схемы:

1).  и  - это начало и конец HTML документа.

2).  и  - голова HTML документа. В голову документа вставляют различные служебные теги (мета теги).

3). </span><span class="c3 c4"> и </span><span class="c8 c4"> - заголовок документа. Это один из служебных тегов, который размещается в голове HTML документа между тегами  и .

4).  и  - тело документа. В теле документа находится все, что мы хотим видеть на веб-странице: текст, картинки, таблицы, аудио, видео и т. д.

Вот теперь пришло время выяснить, что такое ТЕГ

Тегом называется все то, что находится между скобками < >. Собственно, совокупность всех тегов и составляет язык разметки HTML.

Для примера я пропишу парочку тегов: , , ,

 и др.

Также хочу упомянуть, что есть теги, которые нужно закрывать. Например: - открываем тег. - закрываем тег.

Есть теги одиночки, которые не нуждаются в паре или в закрытии. Например:
- тег для переноса строки.

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

</span><span class="c3"> и </span><span class="c8"> - заголовок документа. Это один из служебных тегов, который размещается в голове HTML документа между тегами  и .Давайте посмотрим, где будет отображаться заголовок документа в браузере:

Создание файла «index.html» и «CSS».Итак, создайте себе отдельную папочку «Мой сайт». Теперь в этой папочке создайте два файла «index.html»и «style.css».

Чтобы создать «index.html»: на компьютере снизу в левом углу нажмите на кнопку «Пуск».Далее выберите «Все программы» => «Стандартные» => «Блокнот».

Далее нажмите «Файл» => «Сохранить как»:

Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мой сайт».В поле «Имя файла» напишите «index.html», а не просто «index» (это важно!). Таким способом мы создаем файл с расширением «*.html» для веб-страниц. Далее нажмите на кнопку «Сохранить»:

Чтобы создать «style.css»:кнопка «Пуск» =>  «Все программы» => «Стандартные» => «Блокнот»:

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…»:

Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.

В поле «Имя файла» напишите «style.css», а не просто style (это важно!). Таким способом мы создаем файл с расширением «*.css». Далее нажмите на кнопку «Сохранить»:

Вот, что должно получиться у вас в папке «Мой сайт»:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Вставка в файл «index.html» скелет html (стандартный код)

Откройте файл «index.html» через программу «Блокнот» и вставьте вот такой стандартный HTML код:

ФИО

Сохраните файл «index.html».

Подключение «index.html» к «style.css»

Напомню вам, чтобы подключить файл со стилями «style.css» к «index.html» перед тегом ,пропишите вот такой код:

Полный пример:

ФИО

Сохраните файл «index.html».Вот теперь можем создавать сайт.

Начнем с меню.

Создание меню Через списки HTML создадим меню и, естественно, сразу пропишем для каждого раздела меню ссылку на другую страницу:

Вот полный пример:

ФИО

В результате ничего особенного вы не увидите:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Теперь в 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;

}

Смотрим на результат:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Самостоятельная работа: 

УПР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». В этой папке будут храниться все изображения сайта-визитки.

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Залейте в эту папку «image» ваш логотип, размерами примерно 200 х 200 px. Дайте название логотипу «logo» и расширении файла «png».Вот так это будет выглядеть в HTML:

Выровняем лого по центру  и закруглить через 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»:

Сайт на StepkinBlog.ru

Заголовок

Очень много текста

У нас самая крутая фирма.

Опять много текста

Она же нам послужит  как шаблонная страница. После того, как вы сохранили «index.html», создайте файлы:

rabota.html – для страницы «Наши работы»

prais.html – для страницы «Прайс»

contakt.html – для страницы «Контакты»

И во все эти файлы вставьте такой же код, какой в файле «index.html», меняя только текст в и текст с заголовками в блоке «content».</span></p><p class="c1 c12" id="h.30j0zll"><span class="c2"></span></p><p class="c1"><span class="c5 c4">Целевые обходы рабочих мест:</span></p><ol class="c0 lst-kix_list_13-0 start" start="1"><li class="c6"><span class="c2">Проверить организацию рабочих мест, соблюдение правил техники безопасности.</span></li><li class="c6"><span class="c2">Проверить правильность выполнения трудовых приёмов.</span></li><li class="c6"><span class="c2">Коллективное и индивидуальное текущее инструктирование:</span></li></ol><p class="c1"><span class="c2">а) проверить правильность ведения самоконтроля;</span></p><p class="c1"><span class="c2">б) контроль за соблюдением технологического процесса, согласно инструкционно – технологической карте;</span></p><ol class="c0 lst-kix_list_13-0" start="4"><li class="c6"><span class="c2"> Проверить правильность соблюдения технических и технологических условий, предварительное оценивание работ.</span></li><li class="c6"><span class="c2"> Проверить правильность ведения промежуточного (межоперационного) контроля: оценка качества выполненной работы. Итоговый контроль качества выполненной работы.</span></li><li class="c6"><span class="c2">Сдача работы на оценку и уборка рабочих мест.</span></li></ol><p class="c1 c12"><span class="c5 c4"></span></p><p class="c1"><span class="c10">IV. Заключительный этап. 1 мин</span></p><ol class="c0 lst-kix_list_48-0 start" start="1"><li class="c16"><span class="c2">Подведение итогов практической части урока. Анализ работы каждого обучающегося. </span></li><li class="c6"><span class="c2">Взаимоконтроль обучающихся.</span></li><li class="c6"><span class="c2">Сообщить оценку качества каждого обучающегося. Отличить лучшие работы.</span></li></ol><p class="c29 c43"><span class="c2">Разбор типичных ошибок, характерных недостатков по всей технологической цепочке.</span></p><ol class="c0 lst-kix_list_48-0" start="4"><li class="c6"><span class="c2"> Сообщить тему следующего урока:</span></li></ol><p class="c1 c12"><span class="c2"></span></p><div><p class="c12 c28"><span class="c4 c13"></span></p><p class="c12 c25"><span class="c13 c4"></span></p></div><hr class="c27"><div><p class="c29"><a href="#ftnt_ref1" id="ftnt1">[1]</a><span class="c4 c26"> Проф. Стандарт Специалист по информационным ресурсам, рег. Номер148, утвержден приказом  РФ № 629 от 8.09.2014</span></p></div></div></div></div></div></div><br><h4>Предварительный просмотр:</h4><div align="center"><div id="presentation"><iframe src="https://docs.google.com/viewer?url=https://nsportal.ru/sites/default/files/2020/01/23/prezentatsiya1.pptx&embedded=true"></iframe></div></div><div align="center" style="font-size:0.75rem;">Чтобы пользоваться предварительным просмотром презентаций создайте себе аккаунт (учетную запись) Google и войдите в него: <a target=_blank href="https://accounts.google.com">https://accounts.google.com</a></div><br><div class="docpreview block marina-gradient-rounded-corners marina-title-rounded-green"><div class="inner clearfix"><div class="inner-wrapper"><div class="inner-inner"><h2 class="pane-title-center">Подписи к слайдам:</h2><div class="previewppt"><p class='slide-number'>Слайд 1</p>Тема занятия: Создание сайта с использованием HTML + CSS<p class='slide-number'>Слайд 2</p><p>Цель занятия: Применить на практике знания по HTML и CSS для создание простого сайта-визитки.</p><p class='slide-number'>Слайд 3</p><p>Экспресс-тест Вопрос № 1 Как нужно заходить в компьютерный класс? Как угодно, главное на двух ногах. Спокойно , не вбегая и не нарушая порядка. Как получается. Можно хоть на ушах, если на то моя воля. Спокойно, не вбегая и не нарушая порядка Вопрос № 2 Если компьютер не включается, необходимо : Самостоятельно проверить питание. Самостоятельно проверить все переключатели. Сообщить об этом учителю. Включить питание. Сообщить об этом преподавателю</p><p class='slide-number'>Слайд 4</p><p>Экспресс-тест Вопрос № 3 На каком расстоянии от монитора нужно работать ? 40 - 50 см. 50 - 70 см. 70 - 80 см. 80 - 90 см. 50 - 70 см Вопрос № 4 Что делать , если почувствовал запах гари, или увидел повреждение оборудования , или услышал странный звук от компьютера? Сообщить учителю. Самостоятельно исправить возникшую неисправность. Перезагрузить компьютер. Продолжить работу, не обращая внимания. Сообщить преподавателю</p><p class='slide-number'>Слайд 5</p><p>Схема сайта</p><p class='slide-number'>Слайд 6</p><p>План 1) . Создание файла «index.html» и «CSS». 2). Вставка в файл «index.html» скелет html (стандартный код). 3). Подключение «index.html » с «style.css». 4). Создание меню. 5). Вставка логотипа. 6). Создание блока для контента. 7). Создание подвала. 8). Создание остальных страниц</p><p class='slide-number'>Слайд 7</p><p>Создание файла «index.html» и «CSS » Папка «Мой сайт». В этой папке два файла «index.html » и «style.css» Программа «Блокнот » «Файл» => «Сохранить как»: В поле «Имя файла»-« index.html » Аналогично создаем файл style.css</p><p class='slide-number'>Слайд 8</p><p>Создание меню <html> <head> <title> ФИО</ title> <link rel =" stylesheet " type="text/ css"href ="style.css"> </head> <body> <div class=" blok -menu"> < ul class="menu"> <li><a href ="index.html"> О нас</ a></li> <li><a href ="rabota.html"> Наши работы</ a></li> <li><a href ="prais.html"> Прайс</ a></li> <li><a href ="contakt.html"> Контакты</ a></li> </ ul > </div> </body> </html></p><p class='slide-number'>Слайд 9</p><p>Теперь в CSS сделаем меню горизонтальным, уберем маркеры, сделаем отступы Выравнивание меню по центру</p><p class='slide-number'>Слайд 10</p><p>Закрасим меню и добавим тень: Осталось поменять размер и цвет в названиях меню:</p><p class='slide-number'>Слайд 11</p><p>Реализация переходов</p><p class='slide-number'>Слайд 12</p><p>Адаптация Цвет тени синий Заливка блока навигации зеленная Цвет шрифта желтый При наведении шрифт красный Подчеркивание при наведении красное, 10 рх</p><p class='slide-number'>Слайд 13</p><p>М одернизация Навигация вертикальная При наведении заливка розовая Ширина меню 250рх Поля внутри блоков 25 рх</p></div></div></div></div></div><br><br><div class="docpreview block marina-gradient-rounded-corners marina-title-rounded-green"><div class="inner clearfix"><div class="inner-wrapper"><div class="inner-inner"><h2 class="pane-title-center">Предварительный просмотр:</h2><div class="preview" id="doc19198244"><style type="text/css">#doc19198244 @import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLUXza5VhXqVC6o75Eld_V98');ol{margin:0;padding:0}#doc19198244 table td,table th{padding:0}#doc19198244 .c5{border-right-style:solid;padding:0pt 5.4pt 0pt 5.4pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:191.1pt;border-top-color:#000000;border-bottom-style:solid}#doc19198244 .c3{border-right-style:solid;padding:0pt 5.4pt 0pt 5.4pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:605pt;border-top-color:#000000;border-bottom-style:solid}#doc19198244 .c7{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}#doc19198244 .c2{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Calibri";font-style:normal}#doc19198244 .c1{padding-top:0pt;padding-bottom:0pt;line-height:1.0;orphans:2;widows:2;text-align:left;height:11pt}#doc19198244 .c4{padding-top:0pt;padding-bottom:0pt;line-height:1.0;orphans:2;widows:2;text-align:left}#doc19198244 .c9{padding-top:0pt;padding-bottom:0pt;line-height:1.15;text-align:left;height:11pt}#doc19198244 .c6{margin-left:-5.4pt;border-spacing:0;border-collapse:collapse;margin-right:auto}#doc19198244 .c8{background-color:#ffffff;max-width:785.2pt;padding:28.4pt 28.4pt 28.4pt 28.4pt}#doc19198244 .c0{height:0pt}#doc19198244 .title{padding-top:24pt;color:#000000;font-weight:700;font-size:36pt;padding-bottom:6pt;font-family:"Calibri";line-height:1.1500000000000001;page-break-after:avoid;orphans:2;widows:2;text-align:left}#doc19198244 .subtitle{padding-top:18pt;color:#666666;font-size:24pt;padding-bottom:4pt;font-family:"Georgia";line-height:1.1500000000000001;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}#doc19198244 li{color:#000000;font-size:11pt;font-family:"Calibri"}#doc19198244 p{margin:0;color:#000000;font-size:11pt;font-family:"Calibri"}#doc19198244 h1{padding-top:24pt;color:#000000;font-weight:700;font-size:24pt;padding-bottom:6pt;font-family:"Calibri";line-height:1.1500000000000001;page-break-after:avoid;orphans:2;widows:2;text-align:left}#doc19198244 h2{padding-top:18pt;color:#000000;font-weight:700;font-size:18pt;padding-bottom:4pt;font-family:"Calibri";line-height:1.1500000000000001;page-break-after:avoid;orphans:2;widows:2;text-align:left}#doc19198244 h3{padding-top:14pt;color:#000000;font-weight:700;font-size:14pt;padding-bottom:4pt;font-family:"Calibri";line-height:1.1500000000000001;page-break-after:avoid;orphans:2;widows:2;text-align:left}#doc19198244 h4{padding-top:12pt;color:#000000;font-weight:700;font-size:12pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.1500000000000001;page-break-after:avoid;orphans:2;widows:2;text-align:left}#doc19198244 h5{padding-top:11pt;color:#000000;font-weight:700;font-size:11pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.1500000000000001;page-break-after:avoid;orphans:2;widows:2;text-align:left}#doc19198244 h6{padding-top:10pt;color:#000000;font-weight:700;font-size:10pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.1500000000000001;page-break-after:avoid;orphans:2;widows:2;text-align:left}#doc19198244 </style><p class="c9"><span class="c7"></span></p><a id="t.21642f40ae5823b39d043914a4630478399558ec"></a><a id="t.0"></a><table class="c6"><tbody><tr class="c0"><td class="c5" colspan="1" rowspan="1"><p class="c4"><span class="c2"><html></span></p><p class="c1"><span class="c2"></span></p></td><td class="c3" colspan="1" rowspan="1"><p class="c1"><span class="c2"></span></p></td></tr><tr class="c0"><td class="c5" colspan="1" rowspan="1"><p class="c4"><span class="c2"><head></span></p><p class="c1"><span class="c2"></span></p></td><td class="c3" colspan="1" rowspan="1"><p class="c1"><span class="c2"></span></p></td></tr><tr class="c0"><td class="c5" colspan="1" rowspan="1"><p class="c4"><span class="c2"><title>ФИО



Предварительный просмотр:

Тема урока: «Создание сайта с использованием HTML + CSS»

Тема  программы: «Создание гипертекстовых документов».  

Вид занятия: Урок учебной практике.

Тип и вид урока: Комбинированный урок обучения умениям и навыка.

Методы обучения: наглядно-демонстрационный (демонстрация работы с  помощью мультимедийного оборудования); практический (выполнение упражнений по заданию преподавателя); словесный (повторение, рассуждение, беседа); метод контроля, самоконтроля (при выполнении практического задания). Форма проведения: Групповая.

Продолжительность занятия: 6 часов.

Место проведения: Кабинет учебной практики по специальности: « Прикладная информатика (по отраслям)».

Цели урока:

Обучающая: продолжить формирование умений применения теоретических знаний работы с web страницами на практике, отработка приемов работы с браузерами; закрепление студентами правил создания web  страниц, а также отработка умения их применять на практике.

Развивающая: способствовать развитию познавательного интереса, логического мышления, речи и внимания студентов; информационной культуры и потребности приобретения знаний; навыка самостоятельности в работе; умений рациональной организации рабочего места при работе с компьютером; соблюдение норм времени.

Воспитательная: способствовать воспитанию ответственности в работе, уверенности в своих знаниях при работе с web страницами; внимательности, культуры поведения на уроке; навыка самостоятельности в работе.

Когнитивные цели: уметь организовать рабочее место; знать правила техники безопасности при работе с ПК; осваивать технологию выполнения работ с помощью инструкционно – технологических карт.

Материальное и дидактическое обеспечение урока: компьютеры, презентации «Создание сайта с использованием HTML + CSS»,  мультимедийный проектор, программа Notepad++, индивидуальные задания.

Межпредметные связи: английский язык.

Формирование компетенций:

ПК 1.1Обрабатывать статический информационный контент

ПК 1.9[1]Размещение информации на сайте

ОК 1.Понимать сущность и социальную значимость своей будущей профессии, проявлять к ней устойчивый интерес

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

ОК 3.Принимать решения в стандартных и нестандартных ситуациях и нести за них ответственность.

ОК 4.Осуществлять поиск и использование информации, необходимой для эффективного выполнения профессиональных задач, профессионального и личностного развития

ОК 5.Использовать информационно-коммуникационные технологии в профессиональной деятельности.

ОК 6.Работать в коллективе и команде, эффективно общаться с коллегами, руководством, потребителями

На первом этапе занятия была проведена  готовность кабинета к деятельности, визуальный осмотр внешнего вида студентов и их готовность к занятиям. Практическое занятие проводила в соответствии с тематическим планированием, применяла инновационные  технологии ( критическое мышление) использовала  информационно- коммуникативные технологии.  Во время практической работы были учтены возрастные и психологические особенности студентов.

На всех этапах работы были вовлечены в активную мыслительную и практическую деятельность исследовательского характера, студентам надо было не только использовать уже имеющиеся знания. Но и  найти новый способ выполнения уже известного им действия. ,Этапы  работы были тесно взаимосвязаны между собой, чередовались различные виды деятельности. Умственные действия опирались и подкреплялись практическими. Для каждого студента была создана ситуация успеха, что также  способствовало повышению мотивации и поддержанию познавательного интереса к учению. При постановке вопросов и определении во время работы я учитывала индивидуальные особенности студентов, давала только положительную характеристику результатам их деятельности, что стимулировало студентов и повышало их активность во время работы. Время на занятии использовалось эффективно, запланированный объем работы выполнен. Интенсивность занятия была оптимальном с учетом физических и психологических особенностей студентов. Рефлексия прошла на должном уровне студенты самостоятельно  проанализировали свою работу и результата работы все видели. Своевременно было задано домашнее задание. Я  считаю занятие цели достиг, студенты усвоили полученные знания.


[1] Проф. Стандарт Специалист по информационным ресурсам, рег. Номер148, утвержден приказом  РФ № 629 от 8.09.2014


По теме: методические разработки, презентации и конспекты

Шаблон портфолио по учебной практике студентов специальности 09.02.05 Прикладная информатика (по отраслям) (отраслевая направленность - экономика)

В данном портфолио предложены различные задания по темам, изучаемым в рамках профессионального модуля ПМ 01Обработка отраслевой информации....

Методические указания к лабораторным работам по созданию сайта "Основы использования HTML"

Все материалы для работы и выполнения контрольной  находятся в папке HTML_met  в архиве HTML_met.zip.Основная методичка называется Html_posobie.pdf...

Методические рекомендации по выполнению самостоятельной работы под руководством преподавателя по дисциплине: «Компьютерные сети» по специальности 09.02.05 «Прикладная информатика (по отраслям)» для студентов 3 курса

Такие огромные потенциальные возможности, которые несет в себе вычислитель­ная сеть и тот новый потенциальный подъем, который при этом испытывает информацион­ный комплекс, а так же значительное ускоре...

МЕТОДИЧЕСКАЯ РАЗРАБОТКА УРОКА ПО ДИСЦИПЛИНЕ: ОП. 05 ПРАВОВОЕ ОБЕСПЕЧЕНИЕ ПРОФЕССИОНАЛЬНОЙ ДЕЯТЕЛЬНОСТИ НА ТЕМУ: Рассмотрение и разрешение дел в суде Специальность: 09.02.05 Прикладная информатика (по отраслям)

Данный урок предполагает изучение  и систематизацию знаний по теме «Рассмотрение и разрешение гражданских дел в суде» для студентов 3 курса специальности 09.02.05 Прикладная информатика (по...