Урок 29 Технологии создания сайта [Корнякова Н.В.]

Текст урока

• Конспект урока Технологии создания сайта

   Название предмета «Информатика»
  Класс 9 
  УМК: Информатика ФГОС, Л.Л.Босова, А.Ю.Босова, 2013г.
  Уровень обучения базовый
  Тема урока «Технологии создания сайта»
  Общее количество часов, отведенное на изучение темы – 2  часа
  Место урока в системе уроков по теме: Данный урок  является первым в данном разделе
  Цель урока 
  Обучающая: Осмысление и усвоение алгоритмического подхода к построению собственной деятельности по созданию Web-сайта. Иметь представление об особенностях оформления информационных блоков страницы. Освоить требования к созданию веб-страниц. Познакомиться с инструментальными средствами создания сайтов. Научиться создавать HTML – файлы. 
  Развивающая: формирование умений применять алгоритмы создания сайтов в конкретных ситуациях, развитие мыслительной деятельности  при проектировании, анализе, синтезе и структурировании материала.
  Воспитательная: формирование информационной грамотности ученика, способствовать  расширению информационного кругозора, трудолюбия и навык самостоятельности при выполнении практической  работы, воспитывать ответственность за результат  своего труда.
  Задачи урока 
  развитие познавательного интереса и творческой активности учащихся;
  формирование коммуникативных умений учащихся посредством нестандартной формы проведения урока - деловой игры.
  Планируемые результаты
  Личностные способность  и  готовность  к  принятию  ценностей здорового  образа  жизни  за  счет  знания  основных  гигиенических, эргономических  и  технических  условий  безопасной  эксплуатации средств ИКТ 
  Метапредметные представления  о  компьютерных  сетях распространения  и  обмена  информацией,  об  использовании информационных ресурсов общества с соблюдением соответствующих правовых  и  этических  норм,  требований  информационной безопасности
  Предметные наличие  основных  представлений  об  организации  и функционирования  компьютерной  сети  Интернет;  общие представления о технологии создания сайтов
  Техническое обеспечение урока компьютерный класс, мультимедийный проектор, ОС Windows XP, пакет прикладных программ MS Office.
  Дополнительное методическое и дидактическое обеспечение урока мультимедийная презентация;  сайт: https://sites.google.com/site/drofa3320121/
  Содержание урока 
  №
  Этап урока
  Название используемых ЭОР
  Деятельность учителя 
  (с указанием действий с ЭОР, например, демонстрация)
  Деятельность ученика
  Время
  (в мин.)
  1
  2
  3
  5
  6
  7
  1
  Организационный момент
  
  
  Здравствуйте, ребята. Сегодня мы с вами переходим к изучению новой темы «Web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице». Открываем тетради, записываем  дату и тему урока. 
  Внимательно слушают учителя, записывают дату и тему урока в тетрадь
  2
  2
  Актуализация знаний
  
  Тема «Разработка Web-сайтов» – одна из наиболее практически значимых, востребованных, так как умение создавать web-сайты становится все более актуальным навыком пользователя интернета. 
  Давайте с Вами подумаем какое назначение может быть у сайта, для чего он может быть создан?
  Реклама  Коммерция Образование
  Размещение личной информации, статей, материалов
  2
  3
  Объяснение нового материала
  Технология WWW
  
  
  
  
  
  
  
  
  
  
  Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере. Основными достоинствами Web-страниц являются:
  - малый информационный объем;
  - возможность просмотра в различных операционных системах.
  Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот. Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").
  Web-сайты. Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам. Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).
  Внимательно слушают учителя, отвечают  на его вопросы, делают записи в тетради
  18
  
  
  
  
  
  Презентация «Структура Web-страницы»
  Структура Web-страницы.
  HTML-код страницы помещается внутрь контейнера <HTML></HTML>. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.
  Заголовок Web-страницы заключается в контейнер <HEAD></HEAD> и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения. Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером).
  Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.
  Название страницы помещается в контейнер <TITLE></TITLE> и при просмотре отображается в верхней строке окна браузера.
  Отображаемое в браузере содержание страницы помещается в контейнер <BODY></BODY> (рис. 6.26):
  <HTML>
  <HEAD>
  <ТITLE>Компьютер</ТITLE>
  </HEAD>
  <BODY>
  Компьютер и ПО
  </BODY>
  </HTML>
  
  Заготовка Web-страницы "Компьютер"
  Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке. Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.
  
  
  
  
  
  
  
  
  
  
  
  
  Технология  создания Web-сайта
  
  
  
  
  Форматирование текста на Web-странице
  Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста.
  Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <Н1></Н1> (самый крупный) до <Н6></Н6> (самый мелкий).
  Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE - размер шрифта (например, SIZE=4).
  Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением.
  
  
  4
  Физкультминутка
  
  Физкультминутка 
  Выполняют упражнения для глаз
  1
  5
  Практическая работа
  Создание     простейшей Web-страницы
  Проведение практической работы «Создание начальной страницы сайта».  
  Выполняют практическую работу
  15
  6
  Закрепление пройденного материала
  
  Создание     простейшей Web-страницы
  А теперь закрепим знания, полученные на уроке (используется ЭОР Создание     простейшей Web-страницы)
  Учащиеся работают с модулем
  5
  7
  Рефлексия
  
  Ребята, сегодня мы с вами познакомились с созданием простейших web-страниц. Возникали ли у Вас трудности при работе? Определите и выберите листочки, на каком уровне вы находитесь:
  -  знаю и объясню другому
  -  знаю
  -  сомневаюсь, что знаю
  -  не знаю
  Говорят, что нового узнали на уроке; высказываются о трудностях, возникших по ходу работы.
  1
  8
  Подведение итогов и домашнее задание
  
  Выставление оценок, задание на дом п. 4.4.1, контрольные вопросы в конце каждого пункта.
  Слушают учителя, записывают домашнее задание
  1
  Разработка сайта с использованием языка разметки текста HTML
  Аппаратное и программное обеспечение. Компьютер с установленной операционной системой Windows или Linux, подключенный к Интернету.
  Цель работы. Научиться создавать Web-сайты с исполь­зованием языка разметки текста HTML в простейшем тек­стовом редакторе Блокнот.
  Задание. В операционной системе Windows или Linux создать сайт с использованием языка разметки текста HTML в простейшем текстовом редакторе Блокнот. Сайт «Компьютер» должен содержать начальную страницу и страницы «Программы», «Словарь» и «Анкета». Сохранить их в файлах с именами index.htm, software.htm, glossary.htm и anketa.htm в папке сайта.
  Начальная страница сайта. Создадим начальную стра­ницу Web-сайта «Компьютер».
  В операционной системе Windows или Linuх запустить простейший текстовый редактор Блокнот.
  Ввести тэги, определяющие структуру Web-страницы. Ввести заголовок Web-страницы: «Компьютер». Ввести заголовок текста, отображаемый в браузере: «Всё о компьютере».
  <HTML> 
  <HEAD>
  <ТIТLЕ> Компьютер </ТIТLЕ>
  </HEAD>
  <BODY>
  Всё о компьютере
  </BODY>
  </HTML
  Просмотреть получившуюся Web-страницу в браузере.
  На начальной странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на началь­ную страницу текст, разбитый на абзацы с различным выравниванием.
  <Р ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р>
  <Р ALIGN="right" Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</Р>
  Пусть начальная страница сайта «Компьютер» будет со­держать центрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному вы­ровненных абзацев.
  <FONT COLOR«"blue"> 
  <Н1 ALIGN="center"> Все о компьютере </Н1>
  </FONT> 
  <HR> 
  <Р ALIGN=" left">На этом сайте...</Р>
  <Р ALIGN="right">Терминологический словарь _.</Р>
  На начальной странице сайта «Компьютер» логично разместить изображение компьютера.
  Создадим папку сайта «Компьютер» и добавим в сайт пустые страницы «Программы», «Словарь» и «Анкета». Сохраним их в файлах с именами SOftware.htm, glossary.htm и anketa.htm в папке сайта. Такие пустые страницы должны иметь заголовки, но могут пока не иметь содержания.
  <HTML> 
  <HEAD>
  <ТIТLЕ>Заголовок страницы</ТIТLЕ> 
  </HEAD> 
  <BODY> </BODY> 
  </HTML>
  Создадим панель навигации по сайту «Компьютер». На начальной странице сайта разместим указатели гиперссы­лок на страницы сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуще­ствляется переход.
  Разместим указатели гиперссылок внизу страницы в но­вом абзаце в одну строку, разделив их пробелами. Такое размещение гиперссылок часто называют панелью навигации.
  Созданная начальная страница Web-сайта «Компью­тер» содержит заголовок, изображение компьютера, два аб­заца текста, панель навигации и ссылку на адрес электронной почты.
  
   

   Read more ...

  Автор(ы):

  Скачать: Информатика 9кл - Конспект урока Технологии создания сайта.docx