Информатика в 11 классе (стр. 4 )

<a href="multy/karlson. htm">Карлсон</a>.

Ссылка со страницы drama2.htm (папка dramy) на страницу karlson. htm
(папка multy) будет иметь вид: <a href="../multy/karlson. htm">Карлсон</a>.

Символы ../ (две точки и слеш) обозначают возврат в папку kino из вложенной папки dramy. Обсудите преимущество относительной адресации: при переносе папки kino со всеми вложениями в другое место, в том числе на другой диск или компьютер, относительные адреса не изменяются!

Подчеркните, что гиперссылкой может служить не только текст, но и рисунок. Для этого между парой тегов <a href >...</a > нужно вставить тэг, указывающий на файл изображения, например:

<a href="graf. htm"> <img src="ris. gif"> </a>.

Возможно совместное использование текста и графики в одной ссылке, например: <a href="graf. htm"> <img src="ris. jpg"> Графика </a>.

По умолчанию вызванная гиперссылкой страница открывается в том же окне, замещая исходную. Назад можно вернуться с помощью соответствующей кнопки на панели инструментов браузера. Для просмотра вызванной страницы в новом окне необходимо указать атрибут target=_blank, например: <a href="graf. htm" target=_blank> Графика </a>. С открытой таким способом страницы вернуться назад с помощью кнопки браузера нельзя.

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

Пусть, например, реферат по экологии атмосфера. doc размещен на сайте www. в папке bio. Гиперссылка для его просмотра или скачивания:

<a href = "www. /bio/ атмосфера. doc">Загрязнение атмосферы</а >.

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

4. Закрепление нового материала (частично-поисковый метод обучения, индивидуальная форма работы).

Предложите учащимся занять места за компьютерами и выполнить задания примера 1 из §3 (п.3.3) учебного пособия [1] (ЭСУ Web11‑7 [2]). Контролируйте самостоятельную работу учащихся, просматривая результаты на каждом этапе с помощью браузера. При затруднениях оказывайте необходимую помощь.

При наличии времени подготовленным учащимся дополнительно предложите создать гиперссылки на закладки в том же документе, а также вставить метатеги для задания кодировки и ключевых слов (с.33 учебного пособия [1], ЭСУ Web11‑7 [2]).

5. Подведение итогов урока

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

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

Изучить материал § 3 (п. 3.3) учебного пособия [1], ответить на вопросы 1‑2, подготовиться к практическому выполнению одного из заданий упражнения
(на выбор учащегося).

Урок 8. Подготовка изображений для Интернета

Цели урока:

·  расширение и углубление представлений о графических форматах и сжатии изображений;

·  формирование умений оптимизации изображений;

·  развитие логического мышления, умений анализировать, сравнивать, систематизировать, обобщать;

·  воспитание самостоятельности, усидчивости и аккуратности.

Тип урока: урок усвоения новых знаний и умений.

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

Программное и методическое обеспечение урока: редактор ; учебное пособие «Информатика 11», § 4 [1]; приложения к уроку 8; ЭСУ Web11‑7 [2].

Методические рекомендации к уроку

1. Проверка знаний предыдущего урока (репродуктивный метод обучения, индивидуальная и фронтальная форма работы).

Выполнение индивидуальных заданий на компьютере: оформить гиперссылки на предложенной учителем веб-странице в соответствии с одним из вариантов задания (приложение 1 к уроку 8 или ЭСУ Web11-7).

Предложите учащимся ответить на вопросы: В чем заключается гипертекстовая разметка документов? С помощью какого тега создается гиперссылка? Как в качестве гиперссылки использовать изображение? В чем суть относительной адресации? Каким атрибутом задают открытие страницы в новом окне? Возможно использование теста (приложение 2 к уроку 8).

2. Актуализация знаний и мотивация учащихся на изучение нового материала (фронтальная форма работы).

Перед началом объяснения нового материала напомните учащимся о форматах сохранения графики: BMP, JPG, GIF. Приведите пример оценки размера несжатого графического файла BMP: произведение ширины W (width) и высоты H (height) изображения в пикселях и глубины цвета С (количества бит на 1 пиксель) W H С. Например, объем несжатого файла с изображением 800х600 пикселей глубиной цвета 24 бит/пиксель составляет около 1,4 Мбайт, а время его загрузки при скорости модема 56 кбит/с более 200 с, что совершенно неприемлемо.

3. Объяснение нового материала (объяснительно-иллюстративный метод обучения в сочетании с частично-поисковым, фронтальная форма работы).

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

Покажите пример оптимизации изображений в свободно распространяемом графическом редакторе Paint.Net (http://paintnet. ru).

4. Закрепление нового материала (частично-поисковый метод обучения, индивидуальная форма работы).

Предложите учащимся занять места за компьютерами и выполнить задания примеров 1 и 2 из § 4 учебного пособия [1].

По завершению работы просмотрите результаты работы. Сравните размеры полученных файлов.

При налиии времни любознательным учащимся предложите дополнительно выполнить пример 3 из § 4 учебного пособия [1] (оптимизировать изображение в графическом редакторе Adobe Photoshop), а также самостоятельно просмотреть материал по обработке растровых изображений в этом графическом редакторе (приложение 3 к уроку 8; ЭСУ Web11‑7 [2]).

5. Подведение итогов урока

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

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

Изучить материал § 4 учебного пособия [1], ответить на вопросы 1-3, составить план выполнения одного из заданий упражнения к § 4.

Урок 9. Веб-конструирование в редакторе FrontPage

Цели урока:

·  расширение и углубление представлений об инструментах и методах веб-конструирования;

·  формирование умений создавать веб-страницы в редакторе FrontPage;

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

Тип урока: урок усвоения новых знаний и умений.

Учащиеся должны уметь: создавать веб-страницы в редакторе FrontPage.

Программное и методическое обеспечение урока: редактор FrontPage;
учебное пособие «Информатика 11», § 5.1, 5.2 [1]; приложения к уроку 9; ЭСУ Web11‑8 [2].

Методические рекомендации к уроку

1. Проверка знаний предыдущего урока (репродуктивный метод обучения, индивидуальная и фронтальная форма работы).

Выполнение индивидуальных заданий на компьютере: оптимизировать предложенное учителем изображение (ЭСУ Web11-8).

Предложите учащимся ответить на вопросы: Зачем нужно оптимизировать изображения для размещения в Интернете? В чем заключается оптимизация изображений? Фотография 900х600 пикселей глубиной цвета 24 бит/пиксель сохранена в файле объемом 1,8 Мб. Каким станет объем файла и размеры изображения, если его ширину и высоту уменьшить в 3 раза.

Возможно использование теста и задания (приложения 1, 2 к уроку 9).

2. Актуализация знаний и мотивация учащихся на изучение нового материала (фронтальная форма работы).

Перед началом объяснения нового материала в ходе беседы напомните, что для веб-конструирования применяются две основные группы методов и соответствующих инструментов: визуальные и ручные (программные). Подчеркните, что хотя одним из простейших способов создания веб-сайтов является сохранение документов MS Office в виде веб-страниц, в профессиональном сайтостроении он не используется из-за неоптимальности HTML-кода. Лучших результатов можно достичь, используя специальные – веб-редакторы, например, Microsoft FrontPage.

3. Объяснение нового материала (объяснительно-иллюстративный метод обучения в сочетании с частично-поисковым, фронтальная форма работы).

Объяснение начните с рассмотрения возможностей специального веб-редактора Microsoft FrontPage, который предназначен для разработки веб-сайтов и относится к программным средствам визуального веб-конструирования. Подчеркните, что при работе с веб-редактором FrontPage можно обойтись без знания языка разметки гипертекстовых документов HTML. Веб-страница конструируется на экране и сохраняется в формате. html. Выполняемые при этом действия по оформлению веб-документа напоминают работу в текстовом редакторе MS Word.

Интерфейс редактора FrontPage достаточно прост, чтобы пользователь смог быстро освоить приемы работы. Элементы интерфейса редактора FrontPage следует рассматривать в сравнении с редактором Word.