Сергеева Диана Лазаревна учитель информатики средней школы №10 г. Ярцево 2007 г. Содержание: пояснительная записка

Вид материала

Пояснительная записка

Содержание План занятия Деятельность учащихся Ход занятия. IV. Защита творческого проекта. V. Итог занятия. Учебный модуль «Изображения и таблицы на Web-странице». План занятия Деятельность учащихся I. Орг.момент. Атрибут изображения Атрибут избражения III. Закрепление материала. Цель работы Рабочего стола Памятник защитникам Ярцева в 1941 г. Памятник советскому солдату на мемориале в Яковлево, у вечного огня Файл – Сохранить). Дополнительное задание. Примечание для учителя. IV. Итог занятия. ... Полное содержание

Подобный материал:

• Пояснительная записка 4 Содержание программы 7 Требования к уровню подготовки выпускников, 97.02kb.
• Богданова Виктория Алексеевна bogdanov@belnet ru учитель информатики муниципальной, 62.51kb.
• Мусихин Александр Александрович, учитель физики высшей категории Воркута 2007 пояснительная, 249.87kb.
• Пояснительная записка Рабочая программа составлена на основе: авторского планирования, 143.68kb.
• Гусельникова Лидия Ивановна, учитель 1 категории Петуховской средней общеобразовательной, 909.18kb.
• Чеботарева Фаина Мэлсовна учитель математики высшей категории средней общеобразовательной, 155.8kb.
• Кустова Ольга Анатольевна, учитель истории и обществознания Уренгой, 2007 пояснительная, 173.36kb.
• Пояснительная записка Программа данного элективного курса рассчитана на 16 часов. Элективный, 74.11kb.
• Киселева Мария Геннадьевна учитель информатики моу сош №2 им. И. А. Сухана г. Кстово, 328.22kb.
• Киселева Мария Геннадьевна учитель информатики моу сош №2 им. И. А. Сухана г. Кстово, 428.62kb.

4. Итог занятия.
   

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

• Как осуществляется переход между файлами HTML-документа?
  
• Какой HTML-элемент используется для создания ссылки? Каковы атрибуты этого элемента?
  

5. Домашнее задание.
   

Найти материл о ярцевчанах, заслуживших звание Герой Советского Союза. Материал будет использован на следующем занятии для создания контрольного творческого проекта по модулю «Создание Web-страницы».


Занятие 5. Контрольный творческий проект

«Знаменитые ярцевчане».

Цели занятия:

• Закрепить умение создавать простейшие Web-страницы
  
• Проверить знания учащихся, полученные в ходе изучения модуля «Создание Web-страницы»
  

План занятия

Этапы занятия	Деятельность учителя	Деятельность учащихся
Орг.момент	Учитель приветствует учащихся, проверяет их готовность к занятию.	Ученики готовятся к занятию, приветствуют учителя.
Вступительное слово учителя.	Учитель знакомит учащихся с целями создания проекта. Формирует группы по выполнению проекта.	Учащиеся слушают разъяснения учителя. Объединяются в группы для создания проекта. Разрабатывают структуру Web-страницы.
Выполнение творческого проекта.	Учитель наблюдает за работой учащихся по созданию проекта.	Ученики самостоятельно работают над контрольным творческим проектом по выбранной теме.
Защита творческого проекта.	Учитель просматривает творческие проекты учащихся. Оценивает творческие проекты по критериям.	Ученики демонстрируют свои проекты, сопровождая демонстрацию рассказом. Просматривают проекты других учащихся. Учатся оценивать проекты по критериям.
Итог занятия	Учитель выделяет лучшие проекты.	Ученики выделяют лучшие, на их взгляд, проекты.

Ход занятия.

I. Орг.момент.

II. Вступительное слово учителя.

Ребята, мы закончили изучать модуль «Создание Web-страницы». Сегодня вы должны показать, чему научились на этом этапе. Для этого нужно закончить начатую на прошлом занятии работу по созданию проекта «Знаменитые ярцевчане».

На прошлом занятии вы создали три файла: index.php, curosh.php, geroi.php. Работа над файлами index.php, curosh.php уже закончена. Сегодня нужно в файле geroi.php разместить информацию о ярцевчанине, заслужившем звание Героя Советского Союза. Вы сами определили, о ком будете рассказывать и подготовили материал. Созданная вами страница должна обладать гиперссылками для перехода на титульную страницу и страницу с рассказом о А.Г.Куроше.

Теперь примемся за реализацию проекта «Знаменитые ярцевчане».

III. Выполнение творческого проекта.

Ученики самостоятельно заканчивают работу над проектом «Знаменитые ярцевчане».

IV. Защита творческого проекта.

Ученики демонстрируют свои творческие проекты. Демонстрация сопровождается рассказом о ярцевчанах, заслуживших звание Героя Советского Союза.

Учитель оценивает продемонстрированный проект по следующим критериям.

Критерии для оценки творческого проекта.

• Содержание Web-страницы соответствует заявленной теме
  
• Наличие заголовка на странице
  
• Информация структурирована в отдельные логические блоки
  
• Цветовая палитра не утомляет сочетанием цветов
  
• Единый стиль оформления страниц
  
• Гармоничное расположение элементов на странице
  
• Правильная работа системы навигации.
  

V. Итог занятия.

Ребята, подведем итоги нашей работы. Мы просмотрели разные проекты. Среди них хочется особо отметить работу…

Назовите лучшую, на ваш взгляд, работу.


Учебный модуль «Изображения и таблицы на Web-странице».

Общеобразовательные цели:

• освоить технологию вставки изображения на Web-страницу;
  
• освоить технологию создания таблицы на Web-странице;
  
• освоить технологию проектирования;
  
• закрепить навыки систематизации и структуризации информации.
  

Развивающие цели:

• развивать логико-алгоритмическое мышление;
  
• развивать творческую активность.
  

Воспитательные:

• формировать восприятие компьютера как инструмента обработки информации;
  
• формировать коммуникативные качества личности;
  
• формировать патриотические чувства.
  

Оборудование: компьютерный класс, лицензированное программное обеспечение, мультимедийный проектор, экран.


Занятие 6. Вставка изображения на Web-страницу. Управление размерами и положением изображения на Web-странице.


Цели занятия:

• познакомить с форматами графических файлов для WWW;
  

• научить вставлять изображение на Web-страницу с помощью тега ;
  
• научить управлять размерами и положением изображения на Web-странице с помощью атрибутов тега .
  

План занятия

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

Ход занятия.

I. Орг.момент.

II. Изучение нового материала.

Учащимся сообщается, что в ходе лекции они должны будут письменно выполнить задание.


Задание для учащихся.

• Перечислите форматы изображений, которые можно использовать на Web-странице.
  
• Запишите пример тега вставки изображения.
  
• Заполните таблицу «Атрибуты изображения».
  

Атрибут изображения

Описание

Пример

Ребята, мы закончили изучать модуль «Создание Web-страницы».

Теперь мы можем создавать простейшие Web-страницы, не содержащие графических изображений. Однако, использование изображений на Web-страницах, безусловно, улучшает восприятие документов.

Форматы графических файлов для WWW.

Данные об изображениях хранятся в файлах графических форматов. Существует достаточно много форматов, обеспечивающих организацию графических данных (BMP,GIF,TIFF, JPEG и т.п.). Но посетитель вашей страницы увидит графическое изображение лишь в том случае, если его браузер поддерживает данный графический формат. Поэтому изображения создаются в форматах, поддерживаемых большинством браузеров. К таким форматам относятся:

• GIF, имеющий расширение .gif
  
• JPEG, имеющий расширение .jpg или .jpeg
  
• PNG, имеющий расширение .png
  

Вставка изображения (элемент IMG).

Вставка изображения на Web-страницу из файла графического формата выполняется одиночным тегом (от английского image-изображение) с указанием адреса файла в качестве значения обязательного атрибута SRC (от слова source – источник):



Адрес графического файла – это либо URL-адрес, либо имя файла, возможно с указанием пути. Путь может быть абсолютным или относительным. Если в качестве адреса файла указано только имя файла, то браузер будет искать его в той же папке, в которой расположен вызывающий его HTML-документ.

Например,







Размеры изображения на экране (атрибуты width и height).

Для указания размеров изображения на экране предназначены атрибуты width (ширина) и height (высота).

Значения размеров изображения задаются обычно в пикселях.

Например,

Можно также задать ширину и высоту в процентах относительно размеров внешнего элемента.

Например,

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

Выравнивание изображения (атрибут align).

Положение (выравнивание) изображения относительно других элементов документа можно определить с помощью атрибута align.

Для выравнивания по вертикали предусмотрены следующие значения атрибута align:

• Bottom – нижняя граница рисунка выравнивается по нижнему краю строки (это значение устанавливается по умолчанию);
  
• Middle – середина рисунка выравнивается по нижнему краю текстовой строки;
  
• Top – верхняя граница изображения выравнивается по верхнему краю текста.
  

Для выравнивания изображения по горизонтали применяются следующие значения атрибута align:

• Left – выравнивание изображения по левому краю страницы; текст и другие элементы обтекают изображение справа;
  
• Right – выравнивание изображения по правому краю страницы и обтекание слева.
  

Поля и рамки вокруг изображений.

По умолчанию изображение встраивается почти вплотную с текстом или другими элементами документа, что может быть некрасиво. Чтобы этого избежать, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов vspace для верхнего и нижнего полей, hspace для левого и правого полей в теге . Значения этих атрибутов указываются в виде целых чисел, определяющих размеры полей в пикселях.

Например,

Для задания черной рамки вокруг изображения служит атрибут border, числовое значение которого определяет толщину рамки в пикселях. Если этот атрибут не указан, то рамка не отображается.

Альтернативный текст.

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

Для реализации этой возможности нужно в тег ввести атрибут alt. В качестве значения этого атрибута подставляется альтернативный текст, который заключается в кавычки. Обычно альтернативный текст указывает краткое название изображения и/или размеры графического файла.

Например,

Таблица «Атрибуты изображения».

Атрибут избражения	Описание	Пример
width	Задает горизонтальный размер изображения внутри окна браузера.
height	Задает вертикальный размер изображения внутри окна браузера.
align	Задает выравнивание изображения относительно текста: относительно текста выровнена верхняя часть изображения – top, нижняя – bottom, средняя –middle, левая – left, правая - right
vspace	Задает добавление верхнего и нижнего пустых полей.
hspace	Задает добавление левого и правого пустых полей.
border	Задает толщину рамки вокруг изображения. Измеряется в пикселях.
alt	Задает текст, заменяющий изображение в том случае, если браузер не воспринимает это изображение.

III. Закрепление материала.

Лабораторная работа «Вставляем изображение на Web-страницу. Памятники Ярцева». Цель работы: научиться вставлять графическое изображение на Web-страницу; научиться управлять размерами и положением графического изображения на Web-странице.
1	Создать папку Памятники Ярцева
2	Скопировать файлы picture1.jpg и picture2.jpg c Рабочего стола в папку Памятники Ярцева.
3	В папке Памятники Ярцева создать HTML-документ под именем index.php
4	Набрать содержимое HTML-документа под именем index.php. Большинство ярцевских памятников связано с Великой Отечественной войной. Памятник защитникам Ярцева в 1941 г. На правом берегу реки Вопь – мемориал защитникам города. Еще в 1967 году там был установлен памятный знак. В 1980 году памятник был реконструирован и дополнен. Ныне этот мемориал состоит из стелы, увенчанной изображением ордена Отечественной войны, фигуры бойца, увлекающего боевых друзей в атаку. На облицованной гранитной плите надпись: «Здесь, на берегах реки Вопь, с16 июля по 5 октября 1941 года советские воины и ярцевчане вели жестокие бои с немецко-фашистскими захватчиками. Массовый героизм и мужество советских людей в Смоленском сражении сорвали планы гитлеровцев. Вечная слава героям Смоленского сражения.» Авторы мемориального комплекса – А.И.Чибисов и П.В.Куликов. Памятник советскому солдату на мемориале в Яковлево, у вечного огня 25 сентября 1982 года был открыт мемориальный комплекс в поселке Яковлево. В центре мемориала – бронзовая фигура воина, склонившего знамя. За спиной солдата – огромное полукольцо, на котором начертано: «Здесь похоронили 3720 воинов Советской армии, погибших в боях с немецко-фашистскими захватчиками при обороне и освобождении города и района в 1941-1943 гг.». На мемориальных табличках написаны фамилии захороненных. У подножия монумента горит Вечный огонь, как символ вечной памяти о героях. Мемориал создан по проекту главного архитектора города П.В.Куликова.
5	Выполнить команду меню ( Файл – Сохранить).
6	Вернуться в папку «Памятники Ярцева»
7	Запустить файл index.php
Результат	Web-страница содержит рассказ о памятниках Ярцева, сопровождаемый соответствующими иллюстрациями.

Дополнительное задание.

Задание. На созданную ранее Web-страницу с рассказом о А.Г.Куроше вставить фотографию с его изображением. Ширина изображения - 230, высота изображения -300, выравнивание изображения по правому краю.

Примечание для учителя. Предварительно разместить в отдельной папке фотографию А.Г.Куроша и Web-страницу с рассказом о нем, путь к которой указать ученикам.

IV. Итог занятия.

- На Web-страницу можно вставить графическое изображение.

- Графическое изображение можно выровнять относительно текста на странице.

- Размерами графического изображения на Web-странице можно управлять.

- Вокруг графического изображения можно оставить пустые поля.


Занятие 7. Создание таблицы на Web-странице.

Цели занятия:

• научить создавать таблицы на Web-странице с помощью тега и его дочерних элементов;
  
  научить задавать общие параметры таблицы (ширину, выравнивание).
  
  План занятия
  

  Этапы занятия	Деятельность учителя	Деятельность учащихся
  Орг.момент	Приветствует учащихся, проверяет их готовность к занятию.	Ученики готовятся к занятию, приветствуют учителя.
  Изучение нового материала.	Учитель проводит лекцию для знакомства учащихся с новым материалом, задает задания. Оказывает помощь учащимся при записи тегов для вставки таблицы на Web-страницу.	Ученики слушают объяснения учителя, выполняют упражнения. Записывают в табличном виде теги для вставки таблицы на Web-страницу
  Закрепление материала.	Учитель знакомит с целями и планом выполнения лабораторной работы. Наблюдает за выполнением лабораторной работы. Консультирует учащихся.	Ученики выполняют лабораторную работу за компьютером. При необходимости обращаются за консультацией к учителю.
  Итог занятия	Учитель задает вопросы для повторения основных знаний, полученных на занятии.	Ученики отвечают на вопросы учителя.

  
  
  Ход занятия.
  
  I. Орг.момент.
  
  II. Изучение нового материала.
  
  В начале занятия учащимся сообщается о том, что в ходе лекции они должны будут выполнить ряд заданий.
  
  
  Задания для учащихся.
  
  Записать в табличном виде:
  
  • теги вставки таблицы на Web-страницу
    
  • тег задания ширины таблицы
    
  • тег выравнивания таблицы относительно окна браузера
    
  • тег выравнивания содержимого ячейки таблицы
    
  • теги объединения ячеек.
    

  Тег	Назначение тега

  
  
  Таблицы на Web-странице.
  
  В таблицах на Web-страницах могут размещаться текстовые и числовые данные, изображения и гиперссылки. С помощью таблиц можно компоновать Web-страницы. Для этого все пространство страницы разбивается на прямоугольные ячейки таблицы, в которых размещаются другие элементы (текст, графика, ссылки и т.п.).
  
  Теги таблицы.
  
  Таблица организуется в виде прямоугольной сетки из вертикальных колонок (столбцов) и горизонтальных рядов (строк). Таблица состоит из четырех основных частей: названия таблицы, заголовков столбцов, ячеек с данными и нижней части. Таблица заполняется слева направо, ячейка за ячейкой и строка за строкой, начиная с левого верхнего угла и заканчивая правым нижним углом. Впрочем, таблица может и не иметь названия, заголовков столбцов и нижней части.
  
  Таблицы HTML строятся по принципу вложения элементов, то есть задается родительский элемент TABLE, определяющий таблицу в целом, и в него вкладываются дочерние элементы.
  
  
  
  <здесь размещается описание таблицы>
  
  
  
  Состав таблицы по строкам и ячейкам задается с помощью следующих элементов:
  
  - элемент, формирующий отдельную строку;
  

  - элемент названия таблицы

  Для формирования таблицы тег является обязательным. Остальные теги используются по желанию разработчика. В большинстве случаев можно обойтись тегами для строк и

  для ячеек. По умолчанию таблица отображается в окне браузера без рамки. Чтобы отобразить рамку, в теге нужно использовать атрибут border. Для задания толщины рамки в пикселях можно указать целочисленное значение для этого атрибута. Пример HTML-кода для создания простой таблицы. Пример простой таблицы Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Внешний вид таблицы, создаваемый этим кодом представлен ниже. Пример простой таблицы. Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Задание общих параметров таблицы. Для управления структурой и внешним видом таблицы, а также выравниванием данных в ней используются атрибуты и специальные теги. Ширина таблицы (атрибут width). Ширина таблицы – это параметр, общий для всех ее строк, и поэтому задается он в теге атрибутом width. Значение ширины может быть установлено как в пикселях, так и в процентах (от полной ширины окна браузера). Например, Задание ширины в процентах имеет то преимущество, что строки таблицы будут, как правило, полностью отображаться в окне браузера (без прокрутки). Выравнивание таблицы в документе (атрибут align). Для выравнивания таблицы относительно боковых границ окна браузера применяется атрибут align тега . Это атрибут может принимать одно из трех значений: Left – размещение таблицы вдоль левого края в документе Center – размещение таблицы в центре документа Right – размещение таблицы по правому краю документа Например, тег разместит таблицу в центре страницы. Выравнивание содержимого. По умолчанию содержимое всех ячеек выравнивается по левому краю каждой ячейки (за исключением заголовков, для которых установлено выравнивание по центру). Для задания иного вида выравнивания в теги или определяет выравнивание содержимого всех ячеек строки по центру. Можно задавать выравнивание содержимого по вертикали с помощью атрибута valign. Этот атрибут может принимать одно из следующих значений: Top – выравнивание содержимого по верхнему краю ячеек Bottom – выравнивание содержимого по нижнему краю ячеек Middle – центрирование содержимого по вертикали Baseline – выравнивание всех элементов строки по общей базовой линии Например, тег вводятся атрибуты align, принимающие, как обычно, значения left, right, center, justify. Пример, устанавливает смещение содержимого ячейки к верхнему краю. Объединение ячеек таблицы. Иногда приходится создавать таблицы, в которых смежные ячейки должны быть объединены. Такое объединение можно достичь, используя в начальных тегах или следующие атрибуты: Rowspan – предназначен для объединения ячеек смежных строк. Значение атрибута задает количество объединяемых ячеек. Например, начальный тег ячейки заголовка задает объединение четырех ячеек; Colspan – задает объединение ячеек смежных столбцов. Значение этого атрибута задает количество объединяемых ячеек. Например, тег формирует одну ячейку данных из трех смежных. Упражнение для учащихся. Записать HTML-код для вставки таблицы следующего вида. Физика Механика Электричество Оптика Ответ. Физика Механика Электричество Оптика В ходе лекции в тетрадях учащихся должна быть записана таблица. Таблица на Web-странице. Тег Назначение тега Начало таблицы Название таблицы Начало строки Ячейка заголовка Ячейка таблицы Конец строки Конец таблицы Ширина таблицы относительно окна браузера Выравнивание таблицы по правому краю окна браузера Содержимое всех ячеек строки выровнено по центру Содержимое ячейки выровнено по центру. Задает объединение четырех ячеек в смежных строках. Задает объединение трех ячеек из смежных столбцов.

  - элемент, определяющий содержимое ячейки данных;	- элемент, задающий ячейку заголовка;