Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного...

Особенности труда и отдыха в условиях низких температур: К работам при низких температурах на открытом воздухе и в не отапливаемых помещениях допускаются лица не моложе 18 лет, прошедшие...

Интересное:

Национальное богатство страны и его составляющие: для оценки элементов национального богатства используются...

Берегоукрепление оползневых склонов: На прибрежных склонах основной причиной развития оползневых процессов является подмыв водами рек естественных склонов...

Как мы говорим и как мы слушаем: общение можно сравнить с огромным зонтиком, под которым скрыто все...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

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

2017-05-23

648

0.00 из 5.00 0 оценок

Заказать работу

⇐ ПредыдущаяСтр 3 из 3

Сегодня все 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 редакторов.

⇐ Предыдущая 1 23

Поделиться с друзьями:

Индивидуальные и групповые автопоилки: для животных. Схемы и конструкции...

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

Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...

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