Разработки уроков по теме "Основы веб-конструирования"

Размещено на http://www.allbest.ru/

План урока №1

Основные понятия HTML

Цели урока: обеспечить усвоение предметного содержания темы «Основные понятия HTML», что позволит учащимся иметь представление о назначении языка разметки гипертекстовых документов HTML, методах конструирования веб - сайтов, инструментах конструирования веб - сайтов и этапах конструирования веб - сайтов, а также содействовать осознанию учащимися важности изучаемой темы, практическую и личностную значимость учебного материала по теме.

Ход урока

I. Актуализация знаний. Мобилизация на успешность

В 2005 году количество пользователей Интернета достигло миллиарда (общая численность населения нашей планеты более 6 миллиардов). Вывод …

Совокупность сайтов в Интернете называют гипертекстовым пространством Интернета или WWW - пространством или Web- пространством. Web переводится «паутина». Сайты размещаются на серверах Интернета, и в силу ячеистой топологии действительно напоминают узелки паутины, которую сплел паук с сомнительным состоянием здоровья ( нормальные пауки плетут геометрически правильные сети, в Интернет - паутине царит хаос). Ниточки - паутинки в этой сети - это гипертекстовые переходы, по которым можно перебраться с сайта на сайт. Наряду с электронной почтой Web является самым востребованным сервисом Интернета. Сервис WWW работает по прикладному протоколу HTTP - протокола обмена гипертекстовой информацией. Для просмотра сайтов запускается специальная программа - браузер. Браузер копирует с Web - сервера файл с гипертекстовым кодом и строит по нему страницу на экране пользователя. Когда пользователь щелкает по гипертекстовой ссылке, все повторяется сначала. Сайт определяется в Интернете своим адресом и имеет своего владельца. В качестве адреса сайта указывают адрес его начальной страницы. Сайт - это совокупность гипертекстовых страниц, объединенных одним доменным адресом, темой, структурой, оформлением, авторством.

Целью изучения темы «Основы Web - конструирования » является последовательное изучение процесса создания веб - страниц с помощью языка разметки HTML и редактора визуального веб - конструирования Microsoft FrontPage и создание сайта учащегося по интересующей его теме (можно проекта сайта школы, или сайта - Портфолио учащегося).

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

Основные понятия и определения темы

1. Методы конструирования веб - сайтов: визуальный и программируемый.

2. Этапы проектирования сайта:

· Определите содержимое и структуру веб - страницы, включая всевозможные ссылки.

· Решите какой использовать фон.

· Определить иерархию стилей и размеров шрифтов для основного текста, заголовков, подзаголовков и т.д.

· Определите желаемые места и способы появления навигационных элементов.

· Выберите способ выравнивания страниц, выберите цвет для отображения основного текста и заголовков, цвета для представления ссылок.

· Продумайте графические украшения для разделителей, меток, определите их стиль, размер, цвет.

· Примите решение о представлении иллюстраций ( цветные, черно - белые, фотографии, рисованные, маленькие, большие, анимированные).

· Сохраните первую страницу в качестве шаблона, при помощи которого вы затем будете изготавливать остальные страницы.

3. Виды сайтов: динамический, статистический, интерактивный.

4. Браузер - программа, которая позволяет смотреть гипертекстовые документы.

5. Скрипты - дополнительные возможности для создания элементов веб - страницы (выпадающие списки, меню, календарь, часы …).

III. Формирование практических умений учащихся

1. В блокноте создайте HTML - документ выше предложенной структуры.

2. Сохраните его в своей папке под именем U1.HTML.

3. Просмотрите созданный HTML - документ в браузере.

IV. Закрепление

Фронтальная беседа с учащимися по следующим вопросам.

1. Для чего используется язык HTML?

2. Что называют веб - страницей?

3. Перечислите основные этапы создания сайта?

Рекомендации. Можно повести с учащимися виртуальную экскурсию по Web и познакомить учащихся с разными типами сайтов в Интернете.

V. Подведение итогов и рефлексия

Проведение дискуссии с учащимися по следующим вопросам.

1. Какую информацию поместили бы вы на своем сайте?

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

1. Конспект, вопросы из электронного методического материала по теме 3, п.3.1.

Для любознательных

Рей Томлинсон

Рей Томлинсон родился в 1937 году. Окончил Массачусетский технологический институт. С 1986 года он работает в компании «Bolt Beranek and Newman», которая в 70 - е годы участвовала в разработке компьютерной сети ARPANET - предшественницы Интернета. В 1971 году написал программу, с помощью которой отправил первое электронное сообщение -письмо с компьютера на компьютер. До этого сообщениями могли обмениваться только пользователи одного и того же компьютера. Собственно говоря, единственное, что осталось сделать Томлинсону, это добавить возможность пересылки сообщений на другие компьютеры. Для обозначения адресата в электронном письме Томлинсон впервые использовал символ «@», не встречающийся в англоязычных именах и фамилиях. Знакомый вид электронная почта приобрела только после серьезной доработки программы Лоуренсом Робертсом, который предусмотрел просмотр списка всех писем, выборочное чтение нужного сообщения, сохранение письма в отдельном файле, пересылку другому адресату и возможность автоматической подготовки ответа.

До создания WWW более чем на десять лет электронная почта стала первым и самым востребованным сетевым приложением. В 2000 году Американским музеем компьютеров Рей Томлинсон был удостоен премии имени пионера компьютерной эры Джорджа Стибеса - за вклад в развитие Интернета.

План урока №2

Представление о структуре HTML - документа

Цели урока: обеспечить усвоение предметного содержания темы «Представление о структуре HTML - документа», что позволит учащимся иметь представление о структуре HTML - документа; уметь подготавливать проекты сайтов.

Ход урока

I. Актуализация знаний

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

· Какие основные виды веб - конструирования вам известны?

· Перечислите этапы проектирования веб - сайтов?

· Какие языки программирования используются для создания веб - сайтов?

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

Основные понятия и определения темы

Тег - стартовый или конечный элемент разметки, который имеет вид <тег> - стартовый элемент разметки, </тег> - конечный элемент разметки.

Атрибут - параметры или свойства элементов разметки, связанные с определенным тегом.

Тег <body> - содержимое документа, содержит атрибуты: bgcolor, text, link, vlink.

Назначение атрибутов тега <body>:

bgcolor = цвет - цвет фона страницы;

text = цвет - цвет фона текста на странице;

link = цвет - цвет текста гиперссылок;

vlink = цвет - цвет использованных гиперссылок.

Тег <hn> - заголовки документа, где n принимает значения от 1 до 6 . Тег <hn> имеет одно из трех значений атрибута align:

Аlign = center - выравнивание по центру;

Аlign = left - выравнивание по левому краю;

Аlign = right - выравнивание по правому краю.

Тег <hr> используется для задания горизонтальной линии.

Тег <hr> имеет атрибуты align:

Align = выравнивание линии;

Size = толщина линии в пикселях;

Width = длина линии в пикселях или процентах;

Color = цвет линии.

Тег <Meta> содержит специальную служебную информацию и содержит следующие атрибуты:

Name = “Expires” content = ”Дата” - срок годности документа;

Name = “Author” content = ” имя автора ” - имя автора страницы;

http - equiv = ”Content - Type” - используется для указаний инструкций пользователю;

content =” text/html; charset = windows - 1251” - указание на то, что содержится текст в формате HTML и определена кодовая страница.

III. Формирование практических умений учащихся

1. Рассмотреть примеры из электронного методического материала по теме 3, п.3.2.

2. Практическое выполнение задания. Создание HTML - документа содержащего определение браузера. Цвет фона серый, текст красный. Используйте тег <body bqcolor = ”gray” text = ”red”>.

3. Измените цвет фона и цвет шрифта, подберите лучшее на ваш взгляд сочетание цвета фона и шрифта.

4. Создайте HTML - документ, содержащий маркированный список. Пример.

<HTML>

<HEAD> <TITLE> Методы </TITLE> </HEAD>

<BODY>

<H1 align=”center”> Методы конструирования сайтов </H1>

<UL type=”square”>

<LI> Визуальный

<LI> Программируемый

</UL >

</BODY> </HTML>

IV. Закрепление

Фронтально обсуждаются следующие вопросы.

· С помощью чего создается HTML-документ?

· Перечислите основные теги, необходимые для создания HTML-документа.

V. Подведение итогов и рефлексия

Учитель оценивает работу учащихся в классе, отмечая тех, кто работал хорошо и отлично в классе. По желанию учителя их можно оценить в журнале.

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

1. Конспект, вопросы и упражнение 1 из электронного методического материала по теме 3, п.3.2.

2. Напишите программу на языке HTML, содержащую нумерованный список атрибутов тега <BODY>.

Для любознательных

Когда мы вводим поисковое слово, поисковик тотчас же бросается бороздить просторы необъятной паутины, просматривая содержимое всех сайтов. Возникает вопрос: кто - же все - таки «заранее» собирает данные с сайта и каким образом эти данные попадают на поисковый сервер? Собирают эту информацию специальные роботы - так называемые «пауки». Периодически робот возвращается на свой сервер и отдает ему собранную информацию. Там она систематизируется и заносится в специальную базу данных, после чего может быть применена для поиска пользователями.

При поиске сайта поисковые машины активно используют информацию, хранящуюся в специальных метатегах. Три кита, на которых держится индексирование сайта - это:

теги <title> и </title>;

метатег <keywords>;

метатег <description>.

План урока № 3

Редактор визуального веб - конструирования

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

Ход урока

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

К редакторам визуального конструирования относится редактор Microsoft FrontPage. При работе с ним можно обойтись без знания языка разметки гипертекстовых документов HTML. FrontPageпозволят создавать страницы сайтов в режимах: Конструктор, с Разделением, Код, Просмотр.

Режим Конструктор создает веб - страницу. Работа аналогична работе в редакторе Word. Можно работать с текстом, рисунками, таблицами.

Режим Кода вводит теги вручную. Необходимо знание языка HTML.

Режим с разделением представляет собой сочетание визуального содержимого и HTML кодов.

Режим Просмотр позволяет отображать веб - страницу в браузере.

Тема - специально разработанный набор элементов оформления и цветовых схем документа.

Вместе с программой FrontPage поставляется набор шаблонов.

Создание веб - узла из шаблонов:

1. Файл Создать (например выбрать Одностраничный веб - узел)

2. Формат Тема (например в списке тем выбрать Весна, Вода, Горизонт, Ирис)

3. Просмотрите набор шаблонов.

II. Формирование практических умений учащихся

1. Запустите редактор FrontPage и изучите Панели Стандартная, Форматирование, Рисование.

2. Рассмотреть этапы и приемы работы создания веб - сайта в редакторе FrontPage на примере разработки веб - сайта «Беларускiя пiсьменнiкi».

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

Для закрепления материала учитель предлагает учащимся устно продолжить предложения:

· Режимы конструирования сайта можно выбрать с помощью меню … .

· Редактор FrontPage предназначении для … .

· Основными элементами интерфейса редактора FrontPage являются … .

IV. Подведение итогов и рефлексия

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

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

1. Конспект, вопросы и упражнения из электронного методического материала по теме 3, п.3.3.

Для любознательных

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

План урока №4

Разработка веб - страниц

Цели урока: обеспечить усвоение предметного содержания темы «Разработка веб - страниц», что позволит учащимся иметь представление о приемах работы с текстом и изображением, уметь форматировать текст и вставлять изображения в редакторе FrontPage.

Ход урока

I. Актуализация знаний

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

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

Основные понятия и определения

Форматирования текста в редакторе FrontPage осуществляется с помощью панели инструментов Форматирование, а также окон Формат и Абзац.

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

Размещение изображений на веб-странице производится с помощью команды меню ВставкаРисунок. Параметры изображения (размер изображения, выравнивание, толщину границы) на странице задаются с помощью меню Формат Свойства. Регулирование позиции изображения относительно других элементов веб - страницы (обтекание текстом) осуществляется с помощью меню Формат Положение. Обработка изображений (яркость, контрастность, поворот, обрезка) выполняется с помощью команды Вид Панели инструментов.

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

III. Формирование практических умений учащихся

1. Выполните упражнения 1 и 2 из электронного методического материала по теме 3, п.3.4.

2. В упражнении 1 п.3.4. “Давайте улыбнемся” примените произвольную тему из стандартных шаблонов.

IV. Закрепление

Устно. Закончить предложения:

1. Для оформления документов в редакторе FrontPage разработаны шаблоны - … .

2. Редактор FrontPage является редактором …

3. Шаблоны - это …

V. Подведение итогов и рефлексия

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

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

1. Конспект и вопросы из электронного методического материала по теме 3, п.3.4.

Для любознательных

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

План урока №5

Разработка веб - страниц

Цели урока: обеспечить усвоение предметного содержания темы «Разработка веб - страниц», что позволит учащимся иметь представление о приемах работы в редакторе FrontPage, знать элементы интерфейса редактора FrontPage, уметь форматировать текст, вставлять изображения, задавать параметры изображения, регулировать позиции изображения относительно других элементов веб - страницы.

Ход урока

I. Актуализация знаний

1. Освоение учащимися названий и расположений основных элементов страницы сайта. Задание для учащихся. Выберите из списка названий соответствующие объекты страницы.

Список названий: логотип, меню сайта, меню страницы, название сайта, название страницы, поиск по сайту, содержание страницы, ссылка. Покажите эти объекты.

Размещено на http://www.allbest.ru/

II. Формирование практических умений учащихся

Создайте веб - страницу. Заголовок, каждый абзац должны быть написаны разным шрифтом (цвет, размер, гарнитуру выберите самостоятельно). Примените оформление страницы (вставьте изображения, разделительную линию).

Для вставки разделительной линии выберите команду Вставка Горизонтальная линия. Измените свойства линии.

Содержание веб - страницы.

О важности правильного выбора работы

Человек зачастую сам не осознает, насколько важно выбрать профессию по душе. От работы зависит не только состояние наших карманов, но души и здоровья.

Чтобы жить со своими ценностями, чтобы делать выбор в соответствии со своим внутренним голосом, нужно мужество. Ведь часто очень сложно принять решение «в разрез» с мнением других людей, но в соответствии со своим предназначением.

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

1. Назовите виды сайтов?

2. Перечислите режимы работы сайта?

IV. Подведение итогов и рефлексия

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

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

1. Конспект, вопросы из электронного методического материала по теме 3, п.3.4.

2. Учащимся необходимо записать в тетрадь этапы проектирования собственного сайта учащегося.

Для любознательных

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

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

План урока № 6

Элементы оформления веб - страниц

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

Ход урока

I. Актуализация знаний

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

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

Основные понятия и определения

Назначение таблиц	Задание параметров таблицы
Используются для структурирования информации, для верстки текста в несколько колонок, для удерживания ширины текстовых абзацев.	Можно задавать количество строк, столбцов, выполнять выравнивание, определять цвет фона и ячеек, толщину границ, интервалы и др.

Бегущая строка создается с помощью цепочки действий: Вставка > Веб-компонент > Бегущая строка. Текст, направление и скорость движения, время задержки и другие параметры текущей строки задаются в окне Cвойства бегущей строки.

III. Формирование практических умений учащихся

Создайте сайт «Множество смыслов прекрасного».

1. Создайте главную страницу сайта.

2. Вставьте туда таблицу, в каждой ячейке которой поместите изображение из коллекции Microsoft office.

3. Удалите границу таблицы.

4. Вставьте Бегущую строку. Измените свойства ( цвет фона, цвет текста, скорость, направление) бегущей строки.

5. Сохраните документ.

Красота

Всё … прекрасно по отношению к тому,

для чего оно хорошо приспособлено.

Сократ

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

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

Закрепление

Фронтально обсуждаются с учащимися следующие вопросы.

1. Какие возможности по форматированию текста имеет FrontPage?

2. Как задается размер шрифта на веб-страницах?

3. Как создать бегущую строку?

4. Как выполняется размещение изображения на веб-странице?

V. Подведение итогов и рефлексия

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

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

Конспект и вопросы из электронного методического материала по теме 3, п.3.5.

Подберите содержание к разработке страниц «Красота искусства» либо «Красота природы» (это может быть текст, стихотворения, цитаты, изображения). Задание дается на две недели.

План урока №7

Элементы оформления веб - страниц

Цели и задачи урока: обеспечить усвоение предметного содержания темы «Элементы оформления веб - страниц», что позволит учащимся работать с форматированием текста, выполнять размещение изображений, настраивать изображения, вставлять и оформлять таблицы на веб - страницах, создавать бегущую строку.

Ход урока

I. Актуализация знаний

Учащиеся отвечают на следующие вопросы:

· Как вставить таблицу в редакторе FrontPage?

· Как вставить разделительную линию?

· Как вставить бегущую строку?

· Как применить Тему при оформлении страницы?

II. Формирование практических умений учащихся

Создайте веб - страницу. Заголовок, каждый абзац должны быть написаны разным шрифтом (цвет, размер, гарнитуру выберите самостоятельно). Примените оформление страницы (вставьте изображения, разделительную линию).

Содержание веб -страницы.

Согласование цветов

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

Список цветовых схем, наиболее подходящий для различных категорий людей:

· «Драгоценные» цвета ( бирюзовый, красный, пурпурный, золотой) а также флюоресцентные цвета (розовый, желтый, ярко - зеленый и т.д.) считаются привлекательными для подростков.

· Яркие оттенки «первичных» цветов - красного, желтого, синего - предназначены самым маленьким детям.

· Смесь черного с оттенками красных цветов, ассоциируются с сильными эмоциями (страсть, печаль…).

· Светлые оттенки желтого и зеленого в комбинации с голубым и белым ассоциируются с обновлением, ростом, оптимизмом.

· Желто - красно - коричневые комбинации ассоциируются со зрелостью, основательностью и устойчивостью ко времени.

Самостоятельно добавьте несколько строчек комбинация каких цветов для вас предпочтительнее. Выполните оформление страницы.

III. Закрепление знаний учащихся и проведение рефлексии

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

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

1. Конспект, вопросы и упражнения из электронного методического материала по теме 3, п.5. и п.6.1.

2. Обдумать учащимся тему, содержание, рисунки для разработки собственного сайта на тему, интересующую учащегося или проекта сайта школы, или сайта - Портфолио учащегося. Задание дается на две недели.

План урока № 8

Гиперссылки

Цели урока: обеспечить усвоение предметного содержания темы «Гиперссылки», что позволит учащимся иметь представление о создании гиперссылок в редакторе

FrontPage, уметь определять оптимальные элементы привязки и задавать адреса переходов по ссылке, создавать гиперссылки в сайтах.

Ход урока

I. Актуализация знаний

Исследования показали, что чтение текста с экрана монитора происходит приблизительно на 25 % медленнее, чем чтение печатного текста. Таким образом, необходимо свести к минимуму объем информации на странице. Текст должен быть кратким и лаконичным. Распределение информации между несколькими веб - страницами, связанными друг с другом посредством гиперссылок, может способствовать сокращению текста без ущерба глубине рассмотрения вопроса.

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

Основные понятия и определения

При рассмотрении понятия «ссылка» следует выделить две составляющие: место размещения ссылки в документе и направление перехода по данной ссылке (адрес ссылки). Привязкой могут выступать слова, группы слов или изображения. Текстовые элементы привязки обычно выделяются цветом и подчеркиваются, графические элементы обводятся рамкой. К графическим элементам привязки относятся маркеры, пиктограммы, реклама и др. Чем больше ссылок нужно разместить на странице, тем более вероятно, что их можно оформить в виде меню. Компактное меню, состоящее из текстовых ссылок, - простейший вариант реализации навигационной панели. Как правило, панель помещается либо в верхний, либо в нижний колонтитул, либо вдоль левого поля страниц.

Ссылки подразделяются на относительные и абсолютные.

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

Абсолютная ссылка - ссылка, в которой указан компьютер, каталог и файл.

Ссылки могут быть внутренние - расположены на данном сайте.

Ссылки могут быть внешние - расположены на других сайтах.

Переходы внутри документа выполняют внутри страничные гиперссылки.

Для создания внутри страничных ссылок используются закладки:

· Установить курсор на нужное место веб - страницы.

· Выполнить команду Вставка Закладка.

· Ввести имя закладки ( например Вниз).

Для организации гиперссылки необходимо:

· Выполнить Вставка Гиперссылка.

· Указать адрес перехода (например адрес веб - страницы; если ссылка внутренняя - имя закладки).

Гиперссылки создаются в режиме Конструктор, режим Просмотр осуществляет проверку работы гиперссылок.

III. Формирование практических умений учащихся

Выполните упражнение из электронного методического материала по теме 3, п.3.5.

Выполните упражнение из электронного методического материала по теме 3, п.3.6.

1. Создать фрагмент сайта «Беларускiя пiсьменнiкi» из четырех веб - страниц.

2. Создать гиперссылки между страницами сайта «Беларускiя пiсьменнiкi».

IV. Закрепление теоретических знаний учащихся

Фронтальная беседа с учащимися по следующим вопросам.

1. Какие элементы могут выступать в качестве гиперссылки?

2. На что может указывать гиперссылка?

3. В чем различие внутренней, внешней и внутри страничной гиперссылок?

V. Подведение итогов и рефлексия

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

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

Конспект и вопросы из электронного методического материала по теме 3, п.3.6.

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

Для любознательных

Как правило, содержательная информация должна занимать 80% пространства страницы. Элементы навигации не должны занимать больше 20 % пространства страницы.

План урока № 9

конструирование веб сайт

Разработка фрагмента сайта

Цели урока: содействовать развитию творческой и мыслительной деятельности учащихся, их интеллектуальных качеств: способности к «видению» проблемы,

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

Вкус - это эстетическая совесть Жан Поль, немецкий теоретик искусства.

Ход урока

I. Актуализация знаний

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

II. Закрепление практических умений учащихся

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

II. Закрепление

Проводится в виде игры «Как сделать красиВО в Интернете».

Учащиеся отвечают на вопросы как создать привлекательную веб - страницу. Если они согласны с утверждением - ответ 1, если нет - ответ 0. В конце учащиеся называют итоговое число.

1. Количество графической информации на веб - страницах необходимо максимально ограничивать.

2. Многие мультимедийные элементы занимают значительный объем и требуют значительного времени для загрузки.

3. Логотип расположен, как правило, в центре страницы.

4. Заголовок страницы располагается ниже горизонтального меню и совпадает с заголовком окна.

5. Количество, названия пунктов, их порядок в главном меню меняется при листании страниц.

6. Пункт, указывающий на текущую страницу, может быть ссылкой.

7. Недопустимо растягивать один пункт меню на 2 - 3 строки.

8. Главное меню полезно повторять на концах страниц.

Итоговое число: 11 010 011

IV. Подведение итогов и рефлексия

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

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

Учитель напоминает учащимся о проведении на следующем уроке практической работы по созданию страниц «Красота искусства» либо «Красота природы» сайта (это может быть текст, стихотворения, цитаты, изображения) сайта «Множество смыслов прекрасного». По желанию учащихся работу по созданию сайта учащегося можно усовершенствовать дома с учетом замечаний, сказанных на уроке.

План урока №10

Разработка фрагмента сайта

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

Ход урока

Хороший вкус состоит в умении чувствовать прекрасное

Люк Вовенанг

I. Актуализация знаний

Фронтальное повторение темы по следующим вопросам.

1. Как реализовать быстрый переход из конца станицы в начало?

2. Как проверить работу гиперссылки?

3. Как преобразовать картинку в ссылку на соответствующую страницу сайта?

4. Как вставить бегущую строку?

5. Как вставить горизонтальную строку?

II. Формирование практических умений учащихся

1. Откройте документ «Множество смыслов прекрасного».

2. Вставьте после таблицы две строчки КРАСОТА ИСКУССТВА и КРАСОТА ПРИРОДЫ.

3. Преобразуйте каждую строчку в гиперссылку на соответствующую страницу сайта (Команда ВставкаГиперссылка).

4. Заполните содержанием новые страницы и укажите на каждой странице с описанием ссылку, возвращающую на главную страницу «Красота».

5. Сохраните документ с новым именем.

III. Закрепление. Подведение итогов и рефлексия

Ученики анализируют свои практические работы, указывают на наиболее сложные вопросы при изучении темы «Основы веб - конструирования», фронтально все учащиеся обсуждают эти вопросы.

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

Конспект, повторить материалы из электронного методического материала по теме «Основы веб - конструирования». Самостоятельно изучить материалы из электронного методического материала по теме 3, п.3.8. ( Публикация Сайта).

План урока № 11

Навигация

Цели урока: создать условия для развития у учащихся умений структурировать информацию, организовать деятельность учащихся по обобщению и систематизации знаний в рамках темы «Основы веб - конструирования»

Красота позволяет нам видеть жизнь такою,

какова должна быть она по нашим понятиям.

Николай Чернышевский

Ход урока

I. Актуализация знаний

Размышляя о навигационной системе сайта, вспомните как обычно организована традиционная печатная газета. Передовая полоса включает в себя перечень основных тематических разделов и, возможно, краткие анонсы о том, что можно найти в этих разделах. Примерно так же должна работать и навигационная система сайта. Главная цель при проектировании навигационной системы - предоставить возможность находить нужную информации быстро и легко. Достаточно бросить один беглый взгляд на список тем или разделов, чтобы выбрать ссылку для следующего шага в глубь вашей паутины.

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

Публикация сайта - это размещение его на сервере или локальном компьютере с возможностью вызова из сети.

Для публикации сайта необходимо:

· Вызвать диалоговое окно Свойства удаленного веб - узла с помощью меню Файл Опубликовать узел.

· Указать адрес веб - -узла в строке Расположение удаленного веб - узла ( например ftp://ftp.narod.ru

· Ввести имя и пароль

II. Формирование практических умений учащихся

1. Изучите настройку Панели Ссылок. Настройте навигацию на веб - странице подходящим для вас способом.

2. Создайте сайт «Цветы».

· Создайте документ FrontPage.

· Вставьте в него таблицу, в каждой ячейке которой помещена картинка цветка и его название.

· Преобразовать каждую надпись цветка в гиперссылку на соответствующую страницу (Команда ВставкаГиперссылка).

· Заполните содержанием новые страницы и укажите на каждой странице с описанием ссылку, возвращающую на главную страницу «Цветы».

Рекомендации. Предложите учащимся выбрать главное в тексте «Цветы» и поместить на страницы сайта.

Главная страница

Цветы

Цветы, как люди на добро щедры,

И щедро нежность людям отдавая,

Они цветут, сердца отогревая,

Как маленькие, теплые костры.

Ландыш

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Нарцисс

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Ландыш. Германские язычники считали ландыш цветком Остары - богини восходящего солнца, зори и предвестницы весны. В её честь на Пасху устраивали празднества, на которых все молодые украшали се6я букетами ландышей. На рассвете цветы сжигались - приносились в жертву прекрасной богине зори. Принять в этот день в подарок букет ландышей означало дать согласие на брак, бросить под ноги - кровно обидеть.

По древней русской легенде, цветки ландыша - слёзы морской царицы Волхавы по Садко, который любил другую. В одних сказках ландыш- смех русалки, в других - бусинки Белоснежки, в третьих - фонарики гномов. Из настоя ландышей готовили « золотую воду» - эликсир против головных болей и сердцебиения.

Нарцисс. Существует греческий миф о происхождении этого изящного цветка. Однажды в лесу гулял сын речного бога Цефиза, прекрасный юноша по имени Нарцисс, которому было предсказано, что проживёт он долго и счастливо, если не увидит своего лица. Юноша повстречался с нимфой Эхо, которая безумно в него влюбилась. Нимфа обратилась к богам наказать бесчувственного Нарцисса, потому что он был холоден к ней. По велению богов он ощутил сильную жажду и наклонился над источником. Увидев своё отражение, он влюбился в себя. Но боги не дали ему погибнуть и превратили в цветок нарцисс, венчик которого наклонён, как будто Нарцисс желал ещё раз полюбоваться собою в воде.

На востоке нарцисс считался символом весны и счастья. Девушки выращивали его в горшочке и, выходя замуж, забирали цветок в дом мужа, ухаживали за ним и берегли как своё счастье.

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

Роза. Самые первые сказки о розе в древней Индии, где каждый принёсший розу в дар царю мог попросить всё, что пожелает.

В индейских мифах рассказывается, что самая красивая на свете женщина, Лакшми родилась из распускающегося бутона розы. Бог Вишну, охранитель Вселенной, сделал её своей супругой. С тех пор Ликшими стала богиней красоты, а укрывавшая её роза - символом божественной тайны и божественным цветком.

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

Мусульмане верят, что белые розы выросли из капель пота Магомета при восхождении его на небо, жёлтые - из капель пота бывшего при Магомете животного, красные - из капель пота сопровождающего его архангела Гаврила. Белой розе приписывают очистительную силу, как и розовой воде, получаемой из неё. В Турции лепестками роз, особенно розовыми, - осыпают новорождённых.

В Англии розы появились в XIV веке, незадолго до распри между двумя претендентами на английский престол - Ланкастерами и Йорками. Кровопролитная война между ними известна как война Алой и Белой розы, продолжавшаяся 30 лет. Белая и красная розы перешли на гербы замков, на щиты и знамёна. Английские цветоводы в память об этой длительной войне вывели особый сорт розы с белыми и красными лепестками, названный ланкастер-йоркским.

III. Закрепление. Подведение итогов и рефлексия

Дайте, комментарии к изучаемой теме «Основы веб - конструирования» (что понравилось, что удалось лучше всего, что осталось совсем непонятным). На какие моменты следует обратить учителю, чтобы внести ясность в понимание темы.

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

Конспект, повторить материалы из электронного методического материала по теме «Основы веб - конструирования». Подготовиться к итоговой практической работе.

План урока №12

Практическая работа

Цели урока: обеспечить проверку и оценку знаний и умений учащихся по теме «Основы веб - конструирования» и организовать деятельность учащихся по коррекции знаний и умений.

Чистая мысль, напитанная красотой, указывает путь к истине.

Елена Рерих

Ход урока

I. Актуализация знаний

Учитель определяет степень осуществления ожиданий учащегося от изучения темы «Основы веб - конструирования» и просит учащихся заполнить таблицу в баллах.

Ожидал большего, нежели действительно получил	Ожидал меньшего, нежели действительно получил	Ожидал столько, сколько получил
1 2 3 4 5 6 7 8 9 10	1 2 3 4 5 6 7 8 9 10	1 2 3 4 5 6 7 8 9 10

II. Выполнение практической работы ( Приложение к уроку)

III. Подведение итогов и рефлексия

Совместно с учителем ученики анализируют результаты выполнения практической работы по теме «Основы веб - конструирования».

Размещено на Allbest.ru