Использование графики в Web-страницах.

Сегодня все Web- страницы содержат графические изображения. Графические изображения в Web имеют формат GIF или JPEG. Для создания URL изображения используется одиночный дескриптор <IMG>, имеющий следующий синтаксис:

<IMG SCR=URL_изображения>.

Для определения фонового рисунка используется дескриптор <BODY BACKGROUND =URL_изображения>.

<HTML>

<TITLE>Графические изображения</TITLE>

<BODY>

</BODY>

</HTML>

Ширину и высоту изображения можно определить с помощью атрибутов HEIGTH и WIDTH.

Например, <IMG SRC=”ris1.gif” HEIGTH=400 WIDTH=450 ALIGN =LEFT> устанавливает высоту 400 пикселей , ширину в 450 пикселей и выравнивание рисунка влево

В Web-страницах можно использовать изображение-ссылки. Изображение-ссылки - это изображения на Web-странице, щелкнув на котором, можно открыть новую страницу или службу internet. Типичный HTML-код изображения-ссылки выглядит примерно так:

< A HREF=”URL”><IMG SRC=”имя_файла_изображения”></A>

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

1. Создайте раздел объявлений в графическом редакторе. Сохраните изображение в виде графического файла формата .GIF и вставьте рисунок в Web –страницу.

2. Наберите газетный текст с рисунками в графическом редакторе. Сохраните изображение в соответсвующем формате и добавьте в Web-страницу.

3. Создайте 3-4 кадра графических объектов. Создайте анимацию этих кадров.

4. Создайте Web - cтраницу “Треугольники и признаки их равенства”

5. Создайте Web - cтраницу “Мой дом”

6. Создайте электронную мини-газету.

7. Создайте каталог фото ваших родственников.

8. Создайте Web-страницу о ваших одноклассниках с использованием их фотографий.

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

Таблицы

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

Чтобы описать таблицу, нужно указать количество строк и столбцов. Дескрипторы <TR> и </TR> определяет одну строку таблицы. Дескриптор <TD>(данные таблицы) определяет данные ячейки, <TH>заголовок колонки.

Приведем пример создания таблицы:

<HTML>

<HEAD>

<TITLE>Таблицы</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=2 WIDTH="90%"

<TR><TH>Фамилия<TH>Имя<TH>Дата рождения</TR>

<TR><TD>Иванов<TD>Сергей<TD>15.04.1989</TR>

<TR><TD>Петров<TD>Николай<TD>25.03.1991</TR>

</BODY>

</HTML>

В результате просмотра страницы мы увидим следующее. Строка <TABLE BORDER=2 WIDTH="90%" определяет стиль бордюра таблицы и ширину в 90% от ширины Web –страницы. При изменении ширины окна броузера будет меняться и ширина таблицы. Обратите внимание на шрифт заголовков. С помощью атрибута COLS , помещенного в дескриптор <TABLE>, можно определить количество столбцов таблицы: < TABLE COLS=”10” Увеличить размер ячеек можно выполнить с помощью атрибутов COLSPAN и ROWSPAN.

<HTML>

<HEAD>

<TITLE>Таблицы</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=2 WIDTH="90%"

<TR><TH COLSPAN =2>ЖИВОТНЫЕ</TR>

<TR><TH>Лошади</TH>

<TH> Собаки</TH>

<TR><TD ALIGN=CENTER> двадцать</TD>

</BODY>

</HTML>

Обратите внимание на синтаксис выравнивания текста в каждой ячейке таблицы. Аналогично можно объединить строки колонки с помощью директивы ROWSPAN.

<HTML>

<HEAD>

<TITLE>Таблицы</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=2

<TABLE COLS="3"

<TR>

Студенты математического факультета

Нижневартовского пединститута</TH></TR>

<TR> <TD>1.Иванов Николай Петрович</TD><TD> группа 11</TD></TR>

<TR><TD>2.Петров Николай Иванович</TD><TD> группа 11</TD></TR>

<TR><TD>3.Александров Алексей Николаевич </TD><TD> группа 12</TD></TR>

</BODY>

</HTML>

С помощью контейнера <CAPTION> к таблицам можно добавить подписи. Например, если в предыдущий файл добавить строку <CAPTION ALIGN=BUTTOM> Моя таблица</CAPTION>, то сверху таблицы добавиться строка с заголовком таблицы. Помимо BOTTOM в контейнере CAPTION можно использовать TOP, LEFT, RIGHT. Для учащихся можно предложить готовый НTML документ для просмотра, предварительно указав вопросы: 1. Как создать 2-3 таблицы? 2. Как вывести заголовки таблиц? 3. Как определить заголовки колонок и строк?

<BODY>

<TABLE>

<CAPTION ALIGN=TOP> ПЕРВАЯ ТАБЛИЦА</CAPTION>

<TABLE BORDER=2

<TABLE COLS="3"

<TR>

Студенты математического факультета

Нижневартовского пединститута</TH></TR>

<TR> <TD>1.Иванов Николай Петрович</TD><TD> группа 11</TD></TR>

<TR><TD>3.Александров Алексей Николаевич </TD><TD> группа 12</TD></TR>

</TABLE>

<TABLE>

<TABLE BORDER=1

<CAPTION ALIGN=LEFT> ВТОРАЯ ТАБЛИЦА</CAPTION>

<TR> <TD>1.Николаев Николай Петрович</TD><TD> группа 21</TD></TR>

<TR><TD>2.Алексеев Александр Николаевич </TD><TD> группа 22</TD></TR>

</TABLE>

</BODY>

</HTML>

Для закрепления пройденного материала учащимся предлагаются создание следующих Web-страниц.

1. Электронный книжный магазин.

2. Электронный словарь (без программирования поиска).

3. Классный журнал.

4. Сведения о моих друзьях.

Использование фреймов.

С помощью фреймов можно создать профессионально оформленные Web –страницы. Разделив страницу на части, каждая из которых обновляется отдельно, можно создать для них различные элементы интерфейса. Фреймы позволяют идеально оформить страницы. При изучении этой темы необходимо придерживаться следующей последовательности рассмотрения вопросов:

- назначение фреймов;

- создание фреймов;

- загрузка в фреймы целых страниц;

- настройка фреймов;

- структура фреймов;

- присвоение имен фреймам и загрузка страниц в именованные окна фреймов;

- перемещение по фреймам.

Приведем основные дескрипторы, используемые в фреймах.

№	Дескриптор	Значения параметров	Назначение
	FRAMESET ROWS="25%,*"	% или число	Делит страницу на горизонтальные рамки в установленном соотношении
	<FRAMESET COLS="25%,*"	% или число	Делит страницу (оставшуюся часть) на вертикальные рамки в установленном соотношении
	FRAMEBORDER="параметр"	yes, no	Делает бордюр (окантовку рамки) видимым или не видимым.
4.	<FRAME SRC="Имя html файла” >		Загружает в фрейм (рамку) страницу
5.	BORDER	0,1,2	Устанавливает стиль бордюра
6.	SCROLLING	yes, no, auto	Определяет присутствие полос прокрутки в окне фрейма. Применяется в дескрипторе <FRAME>
7.	NORESIZE		Границы фрейма закрепляет жестко. Применяется в дескрипторе <FRAME>
8.	NAME		Присваивает фреймам имена. Применяется в дескрипторе <FRAME>

Рассмотрим пример. Страница разделяется на 3 фрейма. В каждый фрейм загружается страница.

<HTML>

<HEAD>

<TITLE>Фреймы</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Содержание файла 8_web.htm.

<HTML>

<HEAD>

<TITLE>Глава 8</TITLE>

</HEAD>

<BODY>

<p>Фреймы используются </p>

<p>для оформления страниц</p>

</BODY>

</HTML>

Содержание файла 666.htm"

<HTML>

<HEAD>

<TITLE>Таблицы</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=2

<TABLE COLS="3"

<TR>

Второй фрейм

</TH></TR>

<TR> <TD>1.Иванов Николай Петрович</TD><TD></TR>

<TR><TD>2.Петров Николай Иванович</TD><TD></TR>

<TR><TD>3.Александров Алексей Николаевич </TD></TR>

</BODY>

</HTML>

Содержание файла прим 1.htm"

<HTML>

<HEAD>

<TITLE> Буквица </TITLE>

</HEAD>

<BODY>

<Font size=7>П<Font size=5>ервый <Font size=7>Ф<Font size=5>рейм!

</BODY>

</HTML>

В результате имеем следующую Web-страницу. Конечно в школьном курсе трудно рассматривать создание форм, сценариев и т.д. Как было сказано выше, для создания Web-страниц можно использовать HTML редакторы, в том числе и Microsoft Word. Но главное, чтобы учащиеся могли рассматривать эти страницы в режиме НTML и внести соответсвующие изменения, дополнения, понять технологию Web броузера.

После прохождения темы “Фреймы” учащимся можно предложить долгосрочные творческие задания по оформлению Web страниц следующего содержания:

· Мой класс.

· Моя школа

· Мой город

· Моя семья

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

Конкурс Web страниц может быть внутришкольный, городской, районный.

Вопросы и задания.

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

2. Опишите матрицу связей при изучении темы “Web-страницы”.

3. Разработайте библиотеку проектов для реализации проектного метода обучения.

4. Создайте электронный справочник по данной главе.

5. Разработайте программу и учебный план для факультативного обучения темы в школе.

6. Разработайте цикл уроков для изучения данной темы через среду HTML редакторов.