Занятие элективного курса "Web-дизайнер" для учащихся 11-го класса: "Создание титульной страницы сайта"

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

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

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

·                 иметь представление о создании и просмотре web-страниц;

·                 знать понятие тега. Теги управления разметкой документа, теги управления внешним видом документа;

·                 уметь создавать web-сайты небольшой сложности.

Изучение нового материала ведется через проектную деятельность. После рассмотрения базовых понятий (World Wide Web, web-сайт, структура сайта и др.) учащимся предлагается выполнить коллективный проект “Разработка web-сайта “Компьютер”. В ходе обсуждения определяется, сколько web-страниц будет содержать сайт, какова будет их тематика и как они будут связаны. Далее учащиеся под руководством учителя поэтапно осваивают технологию создания сайта.

Команды HTML, с которыми они знакомятся, это лишь “вершина айсберга” богатейших возможностей языка HTML. Неотъемлемой частью дизайна web-страницы являются иллюстрации. При изучении и закреплении темы “Размещение графики на web-странице” учащимся предлагается использовать библиотеку готовых рисунков и фотографий. Вопрос о создании графики для web-страниц остаётся открытым. Так же в данном курсе не рассматриваются, а лишь упоминаются другие средства создания сайтов (разнообразные HTML-редакторы, позволяющие достаточно легко проектировать web-страницы). Таким образом, основная задача учителя: заинтересовать учащихся и раскрыть перспективу дальнейшего изучения перечисленных вопросов на профиле по информационным технологиям.

Изучение курса завершается выполнением учащимися индивидуального или группового (2-3 чел.) проекта – разработка web-сайта. Тематику индивидуальных итоговых проектов учащиеся выбирают в зависимости от собственных интересов и возможностей.

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

Школьники активно и с большим интересом посещают данный элективный курс, отмечая необходимость полученных знаний. За последние годы в школьном кабинете информатики собрано большое количество проектных работ: web-сайтов по различным темам. Например, “Компьютер и здоровье”, “География России”, “Страны Европы”, “Психология подросткового возраста”, “Тригонометрические тождества”, “Как жить?” (исследование по экономике) и др. Учителя-предметники используют web-сайты, выполненные учащимися, в учебном и воспитательном процессе: на уроках, конференциях и классных часах.

Представляю вашему вниманию конспект занятия по теме: “Создание титульной страницы сайта”.

Цель урока: разработать эскиз и приступить к созданию титульной страницы сайта.

·                 Научиться:

o         создавать HTML-файлы;

o         оформлять заголовки;

o         управлять размером, гарнитурой и цветом шрифта;

o         выделять и выравнивать абзацы;

o         размещать графику на web-странице.

ХОД УРОКА

I. Актуализация знаний. Постановка целей урока

Учитель: На прошлом уроке мы приступили к знакомству с языком разметки гипертекстовых документов HTML, ввели понятия: “тег”, “атрибуты тега”, рассмотрели структуру HTML-файла и главные теги: “HTML”, “HEAD”, “TITLE”, “BODY” (учитель обращает внимание учащихся на таблицу “Структура HTML-документа”). Мы разработали проект нашего учебного сайта “Компьютер”. Решили, что наш сайт будет содержать 4 страницы.

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

Учитель: Сегодня на уроке мы приступим к созданию первой страницы учебного сайта “Компьютер”.

II. Разработка эскиза титульной страницы

Учитель: Создадим эскиз титульной страницы сайта “Компьютер” (обсуждение с учащимися). В результате обсуждения решили, что титульная страница обязательно должна содержать “заголовок”, “поясняющий текст”, “иллюстрацию”. (Учитель показывает на демонстрационном компьютере предполагаемый внешний вид титульной страницы.)

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

Учитель: Внешний вид страницы задается с помощью управляющих символов языка HTML – тегов. Рассмотрим теги, которые позволят нам реализовать задуманный проект титульной страницы.

Учитель объясняет материал, учащиеся конспектируют.

Заголовки:

HTML поддерживает 6 уровней внутренних заголовков.

<H1>…</H1> самый крупный
<H2>…</H2>
<H3>…</H3>
<H4>…</H4>
<H5>…</H5>
<H6>…</H6> самый мелкий

Атрибуты: align="значение" (определяет способ выравнивания заголовка по горизонтали).

Значения: center (по центру), right (по правому краю), left (по левому краю).

Например, <H1 align="center"> Давайте знакомиться - Компьютер</H1> (заголовок первого уровня, выравнивание по центру).

Форматирование текста

1) Выделение текста:

<B>…</B> - выделение полужирным 
<I>…</I> - выделение курсивом
<U>…</U> - выделение подчёркиванием
Например: <B>Привет</B>

2) Стиль шрифта (гарнитура, размер, цвет):

<FONT>…</FONT>

Тег <FONT> должен иметь хотя бы один из трёх возможных атрибутов:

Размер шрифта size="значение" (значения целые числа от 1 до 7)
Цвет шрифта color="значение"
Значение – название цвета или его 16-й код, например 
<FONT color="red"> привет</FONT>
<FONT color=#cc0000> привет</FONT>
Гарнитура (вид шрифта) FACE="значение", например
<FONT FACE="Arial"> привет</FONT>

Пример <FONT size="7" color="red" face="Arial"> привет</FONT> (слово привет имеет размер 7, красного цвета, вид шрифта Arial).

Тег абзаца: <P>…</P>

Атрибут:

·                 align="значение"

·                 left (по левому краю), right (по правому краю), center (по центру), justify (по ширине).

Перевод строки: <BR>

Вставка графического изображения

В web-страницах могут использоваться три графических формата - GIF, JPG, RNG.
Ваш рисунок должен быть размещён в папке сайта, лучше все рисунки размещать в отдельной папке, например, images.

Тег вставки изображения: <IMG src="имя графического файла">

Например: <IMG src="images\comp.gif" alt="Компьютер" align="right">

Изображение переносится с сохранением размера.

Атрибуты:

·                 alt="текст" выводит поясняющий текст в случае, если рисунок не может быть отображен браузером.

·                 align="значение" расположение рисунка относительно текста.

Значения: top (вверх), middle (середина), bottom (низ), left (слева), right (справа).

height и width – определяют высоту и ширину изображения соответственно. Если указанные размеры не совпадают с реальным размером изображения, то изображение масштабируется (порой с заметной потерей качества).

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

Обсуждение и выполнение практической работы (учащимся раздаётся распечатка c ходом практической работы). Во время практической работы учитель консультирует учащихся.

V. Итог урока

Фронтальная беседа: что сегодня узнали на уроке, чему научились?

VI. Постановка задач на следующий урок

Учитель: На следующем уроке мы продолжим работу по оформлению титульной страницы: "Компьютер". Мы научимся задавать цвет фона, вставлять фоновое изображение, создавать простые таблицы.

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

Разработайте эскиз титульной страницы собственного сайта (начинается работа по выполнению индивидуального итогового проекта).

Практическая работа "Создание титульной страницы – “Компьютер”"

Цель работы:

·                 Научиться

o         создавать, просматривать и редактировать HTML-документы;

o         оформлять заголовки;

o         управлять размером, гарнитурой и цветом шрифта;

o         выделять и выравнивать абзацы;

o         размещать графику на web-странице.

ХОД РАБОТЫ

1. Создайте папку site (Файл-Создать-Папку).

2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код:

4. Сохраните под именем index.html в папке site. Для этого выполните Файл – Сохранить как… В окне Сохранение документа в списке Тип файла выберите Все файлы (*.*). В поле Имя файла введите index.html и нажмите кнопку Сохранить.

Рис. 1

5. Закройте текстовый редактор Блокнот.

6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

Рис. 2

7. Откройте двойным щелчком файл index.html для просмотра в браузере. Проанализируйте полученный результат.

Рис. 3

8. Оформим фразу “Давайте знакомиться – компьютер” как заголовок. Для этого откроем HTML-код нашей страницы:

·                 вызовите контекстное меню и выберите пункт Просмотр HTML-кода;

Рис. 4

·                 внесите изменения:

·                 сохраните файл (Файл – Сохранить);

Замечание. Обратите внимание на панель задач. На ней располагаются папка site, Блокнот с файлом index.html (HTML-код страницы) и браузер с нашей страничкой “Компьютер”.

Рис. 5

·                 воспользуйтесь Панелью задач и перейдите к просмотру страницы в браузере. Нажмите кнопку Обновить или клавишу F5.

9. Зададим выравнивание заголовка “по центру”:

·                 вернитесь к HTML-коду нашей страницы (index-Блокнот) и внесите изменения:

·                 gросмотрите страницу в браузере (нажмите кнопку Обновить).

10. Изменим цвет заголовка на голубой и гарнитуру шрифта на Arial:

·                 просмотрите страницу в браузере (нажмите кнопку Обновить).

11. Добавим на страницу основной текст. Оформим его как абзац, зададим выравнивание текста “по ширине”:

·                 просмотрите страницу в браузере (нажмите кнопку Обновить).

12. Добавим на нашу страницу картинку. Для этого в папке site создайте вложенную папку images. В папку images скопируйте файл comp.gif. Добавьте в HTML-код нашей страницы тег вставки изображения (зададим поясняющий текст к картинке, выравнивание по правому краю):

·                 просмотрите страницу в браузере (нажмите кнопку Обновить).

Итак, мы реализовали проект сегодняшнего урока. Наша страница: