21. ЕН.В1.2 Программные средства Web
advertisement
2
Аннотация
Современное человечество вступило в информационную эпоху своего
исторического развития. На планете миллионы людей связаны единым
каналом общения и передачи информации. Человек получил практически неограниченный доступ к библиотекам, книгам – к знаниям всех эпох и
культур. Все большее число людей во всем мире и нашей стране начинает
понимать, что Интернет – это потребность жизни XXI века, такая же
необходимая, как телефон, телевизор, автомобиль.
Считается, что с переходом на новые сетевые технологии, обеспечивающие прохождение многих триллионов бит информации в секунду,
глобальные сети действительно опутают всю Землю, и вся мировая
информация, собранная всеми поколениями людей, станет мгновенно
доступной любому жителю нашей планеты. Уже сегодня, имея компьютеры с
выходом в Интернет дома, многие пользователи могут работать с этим
новым инструментом добывания знаний.
1 Цели и задачи дисциплины
Цель
технологии
дисциплины
Web-дизайна
–
дисциплины
и
Internet
является
научить
программирования,
студентов
особенности
правильного построения сайтов, проблемы, связанные с графикой, различные
мультимедийные варианты наполнения сайта.
Объем дисциплины и виды учебной работы
Всего
часов
Вид учебной работы
Общая трудоемкость дисциплины
Лекции
Лабораторные занятия
Всего самостоятельная работа
в том числе:
контрольная работа
Вид итогового контроля
72/72
18/6
18/2
36/64
-/1
зачет/зачет
3
Распределение
по курсам/
семестрам
4/2
Тематическое планирование изучения содержание дисциплины
Очная форма обучения
№
п/п
1
2
3
4
Разделы программы, темы
Основы презентаций
Назначение, структура, методы трансляции.
Введение в Интернет-технологии
История и услуги Интернет. Основные понятия и
принципы работы в сети Интернет.
История и услуги Интернет. Основные понятия и
принципы работы в сети Интернет.
Организация Web-сайтов.
Языки организации Web-документов
Основы языка HTML. Теги структуры. Теги
форматирования.
Основы языка HTML. Теги построения таблиц.
Гиперссылки. Размещения графических объектов,
форм, фреймов.
Создание Web-сайтов средствами офисных и
специальных приложений
Документ Web-сайтов средствами MS Word и MS
PowerPoint: фон, гиперссылки, графические объекты,
публикации документов и публикаций в сети Internet.
MS EditEx.
Всего
Кол-во часов
Лц Лр СРС
2
2
6
4
2
8
Контроль
комп.
тест
2
2
4
4
8
4
6
6
2
2
8
комп.
тест
контр.
работа
18
18
36
Заочная форма обучения
№
Разделы программы, темы
п/п
1
2
1 Понятие о презентациях.
Назначение, структура, методы трансляции.
2 Введение в Интернет технологии.
История и услуги Интернет. Основные понятия и принципы
работы в сети Интернет.
Организация Web-сайтов.
3 Языки организации Web-документов.
Основы
языка
HTML.
Теги
структуры.
Теги
форматирования.
Основы языка HTML. Теги построения таблиц.
Гиперссылки. Размещения графических объектов, форм,
фреймов.
4 Создание Web-сайтов средствами офисных и специальных
приложений.
Документ Web-сайтов средствами MS Word и MS PowerPoint: фон, гиперссылки, графические объекты,
публикации документов и публикаций в сети Internet.
MS Edit Ex.
Контрольная работа
4
Кол-во часов
Лц
Пз
СРС
3
4
5
1
1
9
2
10
2
1
1
10
10
25
Всего
6
2
64
Содержание лабораторных занятий
Очная форма обучения
№
п/п
1
2
№
раздела
1
3
4
5
6
7
8
3
4
9
Наименование лабораторной работы
Организация презентаций. Создание слайдов, гиперссылок. Оформление
слайдов.
Организация презентаций. Создание анимационных эффектов для
объектов и текстов слайдов.
Организация презентаций. Создание элементов управления. Трансляция
презентаций.
Создание HTML – файла с элементами форматирования.
Создание HTML – файла с таблицами и графическими объектами.
Создание HTML – файла с гиперссылками внутри документа.
Создание HTML – файла с фреймами.
Создание Web-страниц с использованием MS Word 2007.
Форматирование.
Создание нового Web-сайта на основе MS EditEx.
Заочная форма обучения
№ №
Наименование практических работ
п/п разд.
1
Организация презентаций. Создание слайдов, гиперссылок. Оформление
слайдов.
2
Организация презентаций. Создание анимационных эффектов для объектов и
1
текстов слайдов.
3
Организация презентаций. Создание элементов управления. Трансляция
презентаций.
4
Создание HTML-файла с элементами форматирования.
5
2 Создание HTML-файла с таблицами и графическими объектами.
6
Создание HTML-файла с гиперссылками внутри документа.
Учебно-методическое обеспечение дисциплины
Основная литература
1. Васильев В. В. Практикум по Web-технологиям / В. В. Васильев,
Н. В. Сороколетова. – М. : Форум, 2011.
2. Интернет-технологии в экономике знаний : учебник / под ред. Н. М.
Абдикеев. – М. : ИНФРА-М, 2010.
3. Пахомов И. В. Создание презентаций в PowerPoint 2010 / И. В.
Пахомов. – СПб. : Наука и техника, 2011.
5
4. Румянцева Е. Л. Информационные технологии : учебное пособие /
Е. Л. Румянцева, В. В. Слюсарь ; под ред. Л .Г. Гагариной. – М. : ИНФРА-М :
Форум, 2009.
Дополнительная и справочная
1. Будилов В. А. Практические занятия по HTML : краткий курс / В. А.
Будилов. – СПб. : Наука и техника, 2001.
2. Комолова Н. В. HTML : учебный курс / Н. В. Комолова. – СПб. :
Питер, 2006.
3. Лозовский Л. Ш. Интернет – это интересно / Л. Ш. Лозовский, Л. А.
Ратновский. – М. : ИНФРА-М, 2000.
4. Румянцев Д. Г. Сам себе Web-программист / Д. Г. Румянцев. – М. :
ИНФРА-М, 2001.
Информационные ресурсы
1. Беседина С. В. Информатика [Электронный ресурс] : учебнометодическое пособие / С. В. Беседина. – Воронеж : Изд-во ВГУ, 2009. –
Режим доступа : http://window.edu.ru/resource/625/65625
2. Зикратов И. А. Разработка и стандартизация программных средств и
информационных технологий [Электронный ресурс] : учебное пособие /
И. А. Зикратов, В. В. Косовцев, В. Ю. Петров. – СПб. : СПбГУ ИТМО, 2010. –
Режим доступа : http://window.edu.ru/resource/974/71974
3. Пестриков
В.
М.
Информатика.
Персональные
компьютеры
[Электронный ресурс] : учебное пособие / В. М. Пестриков, Г. А. Петров, Д.
Г. Подобед. – СПб. : СПбГТУРП, 2011. – Режим доступа :
http://window.edu.ru/resource/161/76161
Рейтинговая оценка по дисциплине
В течение изучения дисциплины «Программные средства разработки
Web-страниц и презентаций», согласно рабочему плану, проводится
аудиторных часа лекций и лабораторных работ завершается курс обучения –
зачетом.
6
Кроме аудиторных занятий, для качественного усвоения материала
студенту необходимо выполнять различные виды самостоятельных работ:
написание рефератов, решение задач и выполнение индивидуальных заданий.
Для объективной оценки знаний и умений студента по дисциплине,
используется рейтинговая система.
Принцип рейтинговой системы оценки заключается в том, что все виды
работ, выполняемые студентом по освоению материала дисциплины,
оцениваются многобальной оценкой с учетом значимости формы работы.
Сумма этих оценок определяет рейтинг знаний. Систематичность и
регулярность контроля позволяет формировать адекватную интегрированную
аттестационную оценку знаний по дисциплине.
Максимально возможная рейтинговая оценка по видам деятельности
Вид занятия
или деятельности
Посещаемость лекций
Лабораторные работы
Рубежные тесты
ИДЗ
Зачет
Кол-во
занятий,
работ
18
9
2
1
2 вопроса
Оценка
за один вид
работы (баллы)
2
10
10
30
Всего за семестр
5
Итого
Максимально
возможный
суммарный
балл
36
90
20
30
176
10
186
Студент, набравший более 123 балла (70% от 176) имеет возможность
получить зачет «автоматом».Сдача зачета происходит в виде устного
опроса.Надбавка может быть предусмотрена за выполнение дополнительной
работы в виде реферата на заданную тему. Правильное оформление
реферативной работы (5 баллов), полное раскрытие темы (5 баллов),
представление материала на соответствующем занятии перед аудиторией (5
баллов) позволит студенту добавить до 15 баллов к своему рейтингу.
В конце семестра, когда за каждым студентом будет числиться реальный
рейтинговый балл, отражающий интенсивность и успешность его личной
учебной деятельности, эта сумма сравнивается с максимальным рейтинговым
7
баллом и пересчитывается в оценки привычной пятибалльной шкалы.
Перевод суммарного рейтингового балла в оценку
(для выставления в зачетную книжку)
Минимальный балл
Максимальный
балл
97
110
186
Показатель в %
Результат
55 (от 176 баллов)
допуск к зачету
60 (от 186 баллов)
зачет
8
Министерство образования и науки Российской Федерации
ДАЛЬНЕГОРСКИЙ ИНДУСТРИАЛЬНОЭКОНОМИЧЕСКИЙ ИНСТИТУТ
(филиал) государственного образовательного
учреждения высшего профессионального
образования «Дальневосточный
государственный технический университет
(ДВПИ имени В.В.Куйбышева)»
КОНТРОЛЬНО-ИЗМЕРИТЕЛЬНЫЕ МАТЕРИАЛЫ
(оценочные средства )
Программные средства разработки Web-страниц и презентаций
080502. 65 Экономика и управление на предприятии (по отраслям)
г. Дальнегорск
2010
9
Текущий и итоговый контроль по дисциплине
Текущий контроль. Видами текущего контроля являются выполнение и
сдача практических работ, устные ответы на на лекциях, ведение конспектов
лекций, посещаемость занятий. Сроки сдачи всех видов текущего контроля
определяются календарным графиком учебного процесса по дисциплине.
Цель текущего контроля – стимулирование ритмичной, каждодневной
работы студентов.
Рубежный контроль проводится по материалам пройденных тем в
тестовой форме и предназначен для подведения итогов самостоятельной работы
студентов при изучении ими отдельных тем и разделов дисциплины.
Итоговый контроль – зачет Предназначен для систематизации знаний
студентов, целостного представления о дисциплине и взаимосвязях всех ее
тем и разделов. Вопросы итогового контроля могут периодически
пересматриваться.
Перечень типовых вопросов для итогового контроля
1. Назначение Web-узла, обозревателя и сервера.
2. Язык разметки гипертекста. Назначение, состав.
3. Принципы, лежащие в основе создания Web-сайта.
4. Теги, предназначенные для форматирования текста.
5. Теги, используемые для вставки объектов и гиперссылок.
6. MS Word, как редактор Web-страниц.
7. Понятие протокола, и виды протоколов в глобальных и локальных
сетях.
8. Основные принципы работы WWW сервера.
9. Этапы публикации Web-сайта в глобальной сети.
10. Редактор Web-страниц – MS Font Page. Его основные возможности.
Перечень тем рефератов
1. Терминология Интернет (основные понятия).
2. Протоколы Интернет.
10
3. История развития Интернет.
4. История Интернет в России.
5. Создание Web-сайтов средствам пакета MS Office.
6. Браузеры – обзор программ.
7. Интернет-коммерция.
8. Реклама в Интернет.
9. Интернет и образование.
10. Интернет и этикет.
11. Защита информации в Интернет.
12. Поисковые системы в Интернет.
13. Авторское право в Интернет.
14. «Пиратство» в среде Интернет.
15. Виртуальная реальность.
Тест № 1
Заголовок Web – страницы заключается в тег:
a) <HEAD></ HEAD >
b) <BODY></ BODY >
c) <HTML></HTML>
d) <TITLE></ TITLE >
1) Строка таблицы обозначается тегом
a) <p></p
b) <td></td>
c) <strong></ strong >
d) <tr></tr>
2) Как обозначается пробел в html (без пробела)
a) & nbsp
b) & gt
c) & lt
d) & space
11
3) Основное содержание Web-страницы помещается в тег
a) <p></p>
b) <table > < / table >
c) < title > < / title >
d) < body > < /body >
4) С помощью каких символов отделяют PHP скрипт от остальной
части html страницы
a) {}
b) [“ “]
c) <? ? >
d) < >
5) Выделенный элемент WEB-страницы, с которым связана
информация об адресах переходов как внутри данной WEBстраницы, так и к другим WEB-страницам, называется
a) тегом
b) значком
c) web-узлом
d) гиперссылкой
6) html –это
a. Протокол передачи гипертекста
b. Домен верхнего уровня в адресном пространстве интернета
c. Имя сервера, на котором хранится сайт
d. Стандарт сопоставления DNS имен с реальными ip
адресами
7) Функцией, используемой для вывода аргументов является:
a)
list;
b)
write;
c)
echo
d)
>>
8) Что такое CSS
12
a) технология описания внешнего вида документа;
b) метод установки PHP
c) Глобальный массив, хранящий переменные сессий
d) Директива в файле настройки php.ini
9) Какой тег делает заключенный в него текст жирным.
a. < b > < /b >
b. < u > < /u >
c. < p > < /p >
d. < h > < /h >
Тест 2.
1. Год появления DNS -1984 год . DNS - это
a) программа для отправки электронной почты
b) система доменных имён
c) протокол пакетной передачи данных
2.Как называлось агентство, предложившее в 1957 году разработать
первую компьютерную сеть?
a) DARPA
b) ARPANET
c) Стэндфордский исследовательский центр
3.Как называлась сеть, которая стала одной из первых российских
сетей, подключенных к Интернету?
a) Relcom (Релком)
b) Kurchatov (Курчатов)
c) Runet (Рунет)
4.В 1969 году прошел первый тест сети ARPANET. По сети была
отправлена часть слова LOGON (log). Какие учебные заведения
участвовали в этом эксперименте?
a) Калифорнийский университет и Университет штата Юты
b) Калифорнийский университет и Кембриджский университет
13
c) Калифорнийский университет и Стэнфордский университет
5.Всемирную паутину образуют миллионы веб-серверов сети
Интернет, расположенных по всему миру. Верно ли это
утверждение?
a) Верно
b) Неверно
6.Верно ли утверждение? Интернет - это всемирная система
объединённых компьютерных сетей, построенная на использовании
протокола IP и маршрутизации пакетов данных
a) Верно
b) Неверно
Тест 3. Язык гипертекстовой разметки страниц HTML
1. Название окна программы в HTML-документе задается
командой ...
а) <TITLE> ... </TITLE>
б) <HEAD> ... </HEAD>
в) <BODY> ... </B0DY>
г) <HTML> ... </HTML>
2. Нумерованный список на странице HTML-документа можно
задать с помощью команды ...
а) <В> ...... </В>
б) <Р> ...... </Р>
в) <0L> ...... </0L>
г) <UL> ...... </UL>
3. Цвет фона страницы в команде <BODY> устанавливается
параметром ...
а) TEXT
б) BGCOLOR
в) LINK
14
г) VLINK
4. Для задания шрифта используется команда ...
а) <FONT> .... </FONT>
б) <BODY>..... </BODY>
в) <Р> ...... </Р>
г) <UL> ...... </UL>
5. Ссылаться на другие документы можно командой ...
а) <Р> ...... </Р>
б) <В> ...... </В>
в) <А> ...... </А>
г) <1> ...... </1>
6. Выберите команду, которая включает графическое изображение
в текст HTML-документа.
а) <А HREF= "MAILTO:admin@2000.RU>
б) <А HREF="#CHAP34">
в) <А NAME="METR">
г) <IMG SRC="PICTURE.GIF">
7. Какая из приведенных ниже команд устанавливает размер
символов 5, их красный цвет и шрифт Arial Суг?
а) <FONT SIZE=6 COLOR=RED FACE="ARIAL CYR"> ... </ FONT>
б) <FONT SIZE=5 COLOR=BLACK FACE="ARIAL CYR"> ... </
FONT>
в) <FONT SIZE=5 COLOR=RED FACE="ARIAL CYR"> ... </ FONT>
r) <FONT SIZE=7 COLOR=RED FACE="ARIAL"> ... </FONT>
8. Заголовки на странице гипертекста устанавливаются командой
...
а) <Р> ...... </Р>
б) <0L> ...... </0L>
в) <Н2> ...... </Н2>
15
г) <BR>
9. Для ссылки на части документа нужно задать команду ...
а) <А HREF=
"MAILTO: admin@2000. RU">
б) <А HREF="#CHAP34">
в) <А NAME="METR">
г) <IMG SRC="PICTURE.GIF">
Контрольная работа
Создание WEB-узла средствами MS Word
Задача: Организовать WEB-узел, содержащий несколько WEBдокументов.
WEB-документы должны отображать материал в различном формате:
высота, цвет и стиль шрифта. Материал в этих документах должен
демонстрировать различные способы организации текста: по левому,
правому краю или по центру; с нумерованными или маркированными
списками, в виде бегущей строки.
Материал должен содержать таблицу, рисунки (не менее двух) и
представлять из себя набор документов связанных гиперссылками.
Конечный результатом WEB-узел должен представлять WEBстраницу с тремя фреймами:
В первом фрейме отображается титульное содержимое работы
(институт, группа, студент, дисциплина, преподаватель).
Во втором фрейме отображается тематическое содержание материала
(тема материала, оглавление материала представленное списком)
В третьем фрейме отображается содержание определенной части
материала. Смена материала производится ссылкой, указанной в списке
второго фрейма.
Цветовое
оформление
должно
согласованно.
16
быть
различно,
но
разумно
Схема организации фреймов.
Фрейм №1
Фрейм №2
Фрейм №3
Схема организации гиперссылок документов. (Количество документов №3
определяется объемом материала и количеством пунктов в документе №2)
Документ
№1
Документ
№3-а
Документ
№3-б
Документ
№3-в
Документ
№2
Документ
№3-г
17
Пример результата работы.
Стартовая страница WEB-узла
Дальневосточный федеральный университет в г.Дальнегорске
ПРОГРАММНЫЕ СРЕДСТВА РАЗРАБОТКИ WEB-СТРАНИЦ И ПРЕЗЕНТАЦИЙ
группа №
Студент С.С.
проверил ст.пр. Мошникова Л.О.
Агрегатные
состояния воды
ВОДА
Пар
Жидкость
Лед
Таблица
Страница WEB-узла при работе по ссылке «Жидкость»
Дальневосточный федеральный
университет в г.Дальнегорске
ПРОГРАММНЫЕ СРЕДСТВА РАЗРАБОТКИ WEB-СТРАНИЦ И ПРЕЗЕНТАЦИЙ
группа №
Студент С.С.
проверил ст.пр. Мошникова Л.О.
Агрегатные
состояния воды
Пар
Жидкость
Лед
Таблица
При температуре от 0 градусов Цельсия до
100 градусов Цельсия вода проявляет себя
как жидкость.
18
Страница WEB-узла при работе по ссылке «Таблица»
Дальневосточный федеральный университет в г.Дальнегорске
ПРОГРАММНЫЕ СРЕДСТВА РАЗРАБОТКИ WEB-СТРАНИЦ И ПРЕЗЕНТАЦИЙ
группа №
Студент С.С.
проверил ст.пр. Мошникова Л.О .
Агрегатные
состояния воды
Пар
Жидкость
Лед
Таблица
состояние температура
плотность
Более 1000
С
От 00 до
1000 С
Менее 00 С
0,6 кг/м3
Пар
Жидкость
Лед
19
1000 кг/м3
916 кг/м3
Министерство образования и науки Российской Федерации
ДАЛЬНЕГОРСКИЙ ИНДУСТРИАЛЬНОЭКОНОМИЧЕСКИЙ ИНСТИТУТ
(филиал) государственного образовательного
учреждения высшего профессионального
образования «Дальневосточный
государственный технический университет
(ДВПИ имени В.В.Куйбышева)»
МЕТОДИЧЕСКИЕ УКАЗАНИЯ
Программные средства разработки Web-страниц и презентаций
080502. 65 Экономика и управление на предприятии (по отраслям)
г. Дальнегорск
2010
20
Методические указания по выполнению лабораторных работ
Лабораторная работа №1
«Организации HTML-документа.»
Задание
Цель – формирования простого WEB-документа с форматированным
текстом.
1 Используя Блокнот подготовьте текстовый документ содержащий текст,
представленный ниже
Федеральное государственное автономное образовательное учреждение
высшего профессионального образования
«Дальневосточный федеральный университет»
(ДВФУ)
Лабораторная работа
Тема: Организация WEB документов.
Выполнил: ученик _____
класса
2
Выполните размещение обязательных тегов документа HTML.
3
Сохраните документ с именем 01.HTML в папку WEB. Вашего
каталога на диске С.
4
Откройте документ 01.HTML используя браузер Internet Explorer.
5
Выполните редактирование документа так, чтобы в браузере
просматривался примерно следующий вид:
Федеральное государственное автономное образовательное учреждение
высшего профессионального образования
«Дальневосточный федеральный университет»
(ДВФУ)
Лабораторная работа
Тема: Организация WEB документов.
Выполнил: студент группы
21
.
Лабораторная работа №2
Тема: Форматирование текста, списки в HTML-документе.
Цель: Освоение базовых принципов создания Web-сайтов.
и
создание
первой
простой
Web-страницы,
содержащей
отформатированный текст
Задание.
1. Наберите текст » Устройство ЭВМ" в текстовом документе Блокнот,
сохраните в Вашей папке с именем. 02.txt
2.
Дополните его обязательными тегами HTML-документа и сохраните
с именем 02.HTML
3. Выполните организацию просмотра документа 02.HTML через
программу браузер Internet Explorer.
4. Допишите в документ необходимые теги языка HTML, таким
образом чтобы:
a. Первое предложение текста являлось строкой заголовка браузера
b. Второе предложение было для документа заголовком 1-го уровня.
c. Перечисление устройств, входящих в состав любой ЭВМ, являлся
нумерованным списком, с использованием римской системы цифр,
полужирным форматом шрифта.
d. Перечисление
различных
устройств
ввода
был
представлен
маркированным списком, курсивным форматом шрифта.
e. Перечисление
различных
устройств
вывода
был
представлен
нумерованным списком, с использованием алфавита, курсивным
форматом шрифта.
f. Перечисление различных устройств хранения информации был
представлен маркированным списком, с отличной от предыдущего
формой маркировки, курсивным форматом шрифта.
g. Название устройства переработки информации размещалось в
бегущей строке с выделением цвета.
22
h. Остальные строки текста оформите в виде заголовков 3-го уровня с
размещением по центру документа.
Примерный результат работы
Устройство ЭВМ.
Основные элементы вычислительных машин
В состав любой вычислительной машины входят
следующие элементы:
I.
II.
Устройство ввода;
Устройство вывода;
III.
Устройство хранения;
IV.
Устройство переработки.
Современные
технологии
позволяют
использовать
в
качестве этих устройств различные технические решения.
Например:
Устройства ввода:
Клавиатура;
Манипулятор "мышь";
Джойстик;
Сканер;
Графический планшет;
Микрофон и т.д.
В качестве устройства вывода может использоваться:
A. Монитор или дисплей;
B. Принтер;
C. Звуковые колонки;
D. Механические манипуляторы.
Для хранения информации используются:
o Дискеты;
o Жесткие диски;
23
o Оптические диски;
o Магнитные ленты и др.
Устройством переработки для всех вычислительных
комплексов является
микропроцессор.
5.Сохраните документ с именем 02.HTML в папку WEB Вашего каталога на
диске С.
Лабораторная работа №3
Тема: Таблицы в WEB - документах
Цель: Освоение основных элементов страницы – таблицы. Понимание
роли таблиц как при форматировании (разбиение на рамки) экрана, так и
отдельных фрагментов текста.
Задание
1
Используя Блокнот Откройте файл 03.TXT. Выполните размещение
обязательных тегов документа HTML. Сохраните документ с именем
03.HTML на Вашу дискету и закройте Блокнот.
2
Откройте файл 03. HTML используя браузер Internet Explorer.
Организуйте представление документа 03.HTML в виде HTML –кода.
3
Выполните редактирование документа так чтобы в браузере
просматривался примерно следующий вид:
Таблица на WEB-странице
1-ячейка
4-ячейка
2-ячейка
3-ячейка
6-ячейка
5-ячейка
7-ячейка
8-ячейка
9-ячейка
11-ячейка
10-ячейка
12-ячейка
24
13-ячейка
4
Дополните документа так чтобы несколько ячеек имели различные
цвета.
Лабораторная работа №4
Тема: Организация ссылок. Размещение рисунков. Карта ссылок
Цель: Создание карты ссылок, размещение рисунков
Задание1.
1. Откройте файл 01. HTML и в режиме редактирования добавьте
внизу информационной части фразу «Перейти к работам» и выровняйте её
по правому краю.
2. Организуйте гиперссылку к файлу 02. HTML используя фразу
«Перейти к работам» как указатель ссылки
3. В файле 02. HTML в режиме редактирования добавьте первой
строкой информационной части фразу «Вернуться к титульному
Перейти к следующей»
4. Добавьте необходимые теги так, чтобы фраза «Вернуться к
титульному» являлась указателем ссылки на файл
01. HTML , а
фраза «Перейти к следующей» позволяла перейти к файлу 03. HTML .
5. В файле 03. HTML в режиме редактирования добавьте первой
строкой информационной части фразу «Перейти к предыдущей
Вернуться к титульному»
6. Добавьте необходимые теги так, чтобы фраза «Перейти к
предыдущей» позволяла перейти к файлу 02. HTML , а фраза «Вернуться
к титульному» являлась указателем ссылки на файл
01. HTML.
Задание 2.
1. Организуйте HTML – документ, который будет отображать рисунок
из файла KOMP.GIF и сохраните его с
именем MAP.HTML .
2. Добавьте к документу
необходимые теги, которые будут
25
описывать карту элементов изображения и выдавать пояснения:
o МОНИТОР,
o КЛАВИАТУРА,
o МЫШЬ,
o СИСТЕМНЫЙ БЛОК,
o ЗВУКОВЫЕ КОЛОНКИ.
Примечания:
Файл KOMP.GIF разместите в своей папке
Размеры рисунка 300х221.
При выполнении изменения размеров рисунка по средствам атрибута
WIDTH карта-ссылок не масштабируется, т.е. описанные области не
совпадают с изображением.
Лабораторная работа №5
Тема: Организация фреймов. Размещение навигации.
Задание.1
Цель: Создание WEB-узла с фреймовой основой, навигация по которому
будет отображать в отдельном фрейме все выполненные ваши лабораторные
работы.
При этом один фрейм будет отображать статическую информацию о
цели WEB-узла. Другой фрейм должен содержать навигационный материал.
А третий должен отображать результаты всех Ваших лабораторных работ по
этой дисциплине.
Замечание.
Для выполнения работы необходимо наличие файлов
01.HTML, 02.HTML, 03. HTML, MAP.HTML.
1) Организуйте HTML-документ,
описывающий размещение фреймов на экране
аналогично рисунка №1. Сохраните его с
именем INDEX.HTML
26
a. В этом HTML-документе задайте целевым последний (наибольший)
фрейм. При этом стартовым файлом для него задайте файл с именем
01.HTML.
b. Для верхнего фрейма определите стартовым файлом файл с именем
CAPTION.HTML, причем запретите изменение размеров этого фрейма.
c. Для второго (левого) фрейма определите стартовым файлом файл с
именем NAVIGAT.HTML.
2) Создайте файл CAPTION.HTML, в котором будет содержаться
следующая информация:
<HTML>
<BODY BGCOLOR="00FF7F">
<CENTER> <H1>РАБОТА ФРЕЙМОВ <H1><CENTER>
</BODY>
</HTML>
3) Создайте файл NAVIGAT.HTML, при помощи которого организуйте
представление следующей информации:
Список практических работ:
Форматирование текста
Организация таблиц
Организация списков
Применение карты ссылок
Формы в HTML-документе
Организация фото-галереи
a.
Дополните код этого документа ссылками на соответствующие
файлы ваших работ:
b.
01.HTML
02.HTML
03.HTML
MAP.HTML
организуйте вывод вызываемых файлов в целевом фрейме
Лабораторная работа № 6-7
27
Тема: Организация формы ввода данных в HTML документах
Задание №1
Разработайте HTML документ с именем 04.HTML, содержащий форму,
в которой будут использоваться следующие элементы:
Поле ввода с запросом фамилии человека, заполняющего эту форму.
Поле списка с несколькими элементами (номера групп, 4-ре
элемента)
Кнопки зависимой фиксации, для организации однозначного ответа
на вопрос
Кнопки с независимой фиксацией, для организации нескольких
вариантов ответов на вопрос
Поле ввода для записи ответа на вопрос в текстовой форме
Изображение кнопок с надписями «ПРОВЕРИТЬ» и «ОЧИСТИТЬ
ФОРМУ» для выполнения соответствующих действий.
Для удобства размещения элементов форм поместите их в таблицу
Для примера приводится внешний вид формы
В качестве имен элементов форм используйте следующие обозначения:
F1 – сохраняет значение при указании данного в поле ввода текста
GR[ ] – сохраняет сведения о номере группы
Comp- сохраняет сведения о наличии компьютера
Tech- сохраняет сведения о месте обучения
28
В качестве имен элементов форм используйте следующие обозначения:
F1 – сохраняет значение при указании данного в поле ввода текста
GR[ ] – сохраняет сведения о номере группы
Comp- сохраняет сведения о наличии компьютера
Tech- сохраняет сведения о месте обучения
F2- сохраняет ответ на последний вопрос.
Задание №2
Для организации проверки формы, размещенной в
разработайте
04.HTML,
модуль JavaScript, в котором выполняется проверка
правильности ответов и выводится сообщение об оценке (результат опроса).
Разместите этот модуль в самом HTML-документе 04.HTML
Ниже приведен пример модуля, который выполняет проверку формы
указанной на предыдущей странице.
<script type="text/JavaScript" >
29
<!-function test1(form)
{
if (form.F1.value= ="")
alert("Укажите фамилию!!!");
else {
if (form.GR[2].selected= =true)
alert("Этот тест не для вас!!!!");
else {
if ((form.Comp[0].checked= =false) &&(form.Comp[1].checked=
=false))
alert("Ответь на вопрос №3!!");
else {
if (form.F2.value!="JavaScript")
alert("Неверно отвечено на последний вопрос!!");
else
alert("Ok! "+form.F1.value+" ты - МОЛОДЕЦ ")}
} } }
// ->
</script>
Пояснение
Переменные F1, GR[], Comp[],Tech, F2 соответствуют определенным
элементам формы:
F1 – сохраняет значение при указании данного в поле ввода текста
GR[ ] – сохраняет сведения о номере группы
Comp[]- сохраняет сведения о наличии компьютера
Tech- сохраняет сведения о месте обучения
F2- сохраняет ответ на последний вопрос.
Для того чтобы JavaScript модуль начал выполняться, необходимо в тег
выполнения кнопки проверки формы файла 04.HTML поместить команду
onClick="test1(this.form)"
Лабораторная работа № 8-9
Тема: Работа со слоями и окнами. Организация фото-галереи
Задание №1
30
Для файла CAPTION.HTML организуйте дополнение, которое создаст
вокруг объектов, отображаемых на экран браузером (текста и изображения
кнопок), «переменное сияние».
Для этого в этот файл добавьте следующий фрагмент:
<style type="text/css">
<!-- .fil {background-color: #ee82ee;} -->
</style>
<script type="text/JavaScript">
<!-var tmr;
var count=0;
var step=1;
function start()
{
tmr=window.setInterval("glow()",100);
}
function destroy()
{
clearInterval(tmr);
}
function glow()
{
msgGlow.filters.Glow.strength=count;
count+=step;
if((count<=0)||(count>=10))
{step=-step;}
}
//-->
</script>
<body onload="start()" onbeforeunload="destroy()">
<div id="msgGlow"
style="Font: 40pt bold;
color:yellow;
position: absolute;
top:0; left:40;
filter: Glow(color=red, strength=3}">
В этой части оставьте описание отображаемых объектов (текста и
кнопок)
</div>
</BODY> </HTML>
Задание №2
31
Подготовительный этап.
1. Используя графический редактор подготовьте из файлов 1.JPEG
2.JPEG и 3.JPEG файлы 01.JPEG 02.JPEG и 03.JPEG, которые будут иметь в
ширину 75 пикселей и подходящий вид сжатия.
2. Для файлов 0.JPEG, 1.JPEG, 2.JPEG и 3.JPEG подготовьте HTML –
файлы, производящие отображения этих файлов через браузер (назвав их
RIS0.HTML, RIS1.HTML, RIS2.HTML и RIS3.HTML)
3. Подготовьте файл описание фреймов PHOTOFRAM.HTML, в котором
задайте два фрейма, делящих экран на вертикальные части. Причем левый
фрейм шириной не более 100 пикселей.
Основной этап
Подготовьте файлы PHOTO1.HTML и PHOTO2.HTML для каждого
фрейма.
В файле PHOTO2.HTML организуйте отображение содержимого файла
RIS0.HTML
В файле PHOTO1.HTML организуйте отображение файлов 01.JPEG
02.JPEG и 03.JPEG, разместив их вертикально. Под каждым изображением
разместите подпись-название (например «РИСУНОК1» и т.д.). Над всеми
рисунками разместите текст «ФОТОАЛЬБОМ»
Организуйте в файле PHOTO1.HTML гиперссылки таким образом
чтобы:
Пиктограммы изображений сами являлись ссылками на
соответствующие файлы, причем вызывая эти файлы в правый фрейм окна
браузера.
Подписи под рисунками тоже являлись ссылками, но вызываемое
изображение должно быть представлено в модальном окне
Текст «Фотоальбом» должен являться гиперссылкой на файл,
содержащий изображение 0.JPEG, и вызывать его в правый фрейм окна
браузера.
32
Фотоальбом
Рисунок1
Рисунок2
Рисунок3
КОНТРОЛЬНЫЕ ВОПРОСЫ ПО КУРСУ
Основы HTML и графические элементы Интернета
1. Что такое HTML? Какие программы используются для разработки
Web-страниц?
2. Перечислите все параметры (атрибуты) тега <a href ...>.
3. Укажите основные преимущества программы Adobe Dreamweaver.
4. Какие метатеги помогают подняться к верхним строчкам рейтинга
поисковых серверов?
5. Какие еще факты влияют на успешное индексирование ваших страниц
поисковыми машинами?
6. Перечислите основные функции таблицы в Web-технологии.
7. Что означает параметр width="75%" в теге <table>
8. Какие параметры таблицы определяются атрибутами cellspacing и
cellpadding?
9. Для чего используются формы? Можно ли с помощью форм
отправить письмо, если у вас не установлена программа-клиент?
10. Может ли страница содержать несколько форм?
33
11. Если в форме нет кнопки Submit, то каким образом отправляются
параметры формы на сервер и в каком случае кнопка Submit обязательна?
12. Приведите пример, когда вводимые данные обрабатываются на
машине клиента, а не на сервере.
13. Какие преимущества имеет выпадающее меню и в чем его
недостатки?
14. В каких случаях используются фреймы?
15. Почему поисковые машины плохо сканируют ключевые параметры
страницы, входящей в фрейм?
16. Какие вы знаете графические средства для создания рекламных
баннеров?
17. Приведите основные параметры тега <img src=""...>. Что нужно
сделать,
чтобы
браузер
пропорционально
отображал
уменьшенное
изображение, размеры которого заранее не известны?
18. Как создается ссылка на фрагмент рисунка?
19. Что такое слой в баннере? Для чего используется прозрачность
некоторых слоев?
20. Чем отличается разработка рекламных баннеров в Adobe FireWorks
от Adobe Photoshope с ImageReady?
21. В каком из вышеназванных редакторов имеется библиотека для
символов? Роль символов при разработке рекламных роликов.
34
Задания и указания по выполнению домашних самостоятельных работ
Самостоятельная работа № 1.
Основы языка HTML.
Цель работы: Изучить основы языка HTML. Создать домашнюю
страницу.
Задание
Создание домашней страницы содержащей информацию о студенте.
Обязательное содержание:
Информация о том, чей сайт и фото студента.
Электронный почтовый адрес.
Ссылка на рабочую страницу или сайт вуза студента.
Мой ВУЗ - о ТГПУ.
Моя группа.
Моя будущая профессия.
Мои увлечения или хобби.
Любая другая информация.
В
оформлении
страницы
следует
использовать
максимальное
количество тегов HTML.
Самостоятельная работа №2.
Форматирование текста на Web-странице по образцу
Цель: познакомиться с основами HTML, обязательными метками, &последовательностями, комментариями, способами форматирования текста
(шрифта и абзаца), физическими и логическими стилями, горизонтальными
линиями.
Задание 1.
1. Создайте новую Web-страницу в текстовом редакторе Блокнот.
2. В элементе <TITLE> укажите название странички «Задание 1.
Форматирование текста на Web-странице по образцу».
35
3. Отформатируйте следующий текст согласно указаниям таблицы 1.
Текст
Применить следующие форматирование
Домашние животные Заголовок H1
Собаки
Заголовок Н2
выравнивание слева, полужирный шрифт,
Сторожевые
цвет шрифта зеленый
выравнивания справа, полужирный шрифт,
Охотничьи
цвет шрифта оранжевый
Дрессировка
выравнивание по центру, полужирный курсив
Клубы Выставки
Выравнивание по центру, размер шрифта 3,
Площадки
цвет шрифта красный
Стихотворение
цвет шрифта синий, выравнивание по центру
По жизни я скромен,
Оваций не надо!
Выравнивание по левому краю, размер
Но как же я классно шрифта 4
Смотрюсь у снаряда!
Задание 2.
1. Создайте новую Web-страницу в текстовом редакторе Блокнот.
2. В элементе <TITLE> укажите название странички «Задание 2.
Форматирование текста на Web-странице по образцу».
3. Напишите HTML-файл, чтобы при его выполнении получился текст
следующего формата:
Элементы форматирования текста
Фрагменты текста можно выделять
Жирным или наклонным шрифтом. Кроме того, можно включать в
текст фрагменты с фиксированной шириной символа (имитация пишущей
машинки).Текст может быть зачеркнутым или подчеркнутым.
Можно также включать элементы, создающие эффект
верхнего индекса
. Использование увеличения шрифта – BIG
нижнего индекса
Использование
уменьшения шрифта – SMALL
Кроме физических существуют также логические стили
36
или
Использование акцента – EM
Использование сильного акцента – STRONG
Фрагмент исходного текста CODE
Использование образца – SAMP
Текст, вводимый с клавиатуры – KBD
Значение переменной – VAR
Использование элемента CITE
Так выглядит формат адреса (элемент ADDRESS)
Использование элемента CENTER
Использование элемента DIV
Элемент BR обеспечивает разрыв строки
Задание 3. Использование линий.
Создайте новую Web-страницу в редакторе Блокнот.
В элементе <TITLE> укажите название странички "Задание 3.
Использование линий".
Изобразите радугу, используя горизонтальные линии различного
цвета (толщина 10 пикселов, длина 50% от ширины экрана, и выровняйте ее
по центру).
Задание 4.
1. Создайте новую Web-страницу в текстовом редакторе Блокнот.
2. В элементе <TITLE> укажите название странички "Задание 4.
Домашняя страничка (ваше имя и фамилия)".
3. Напишите HTML-файл, чтобы при его выполнении получился текст
следующего содержания: укажите вашу фамилию, имя, отчество, год
рождения, название вашего учебного заведения, название специальности,
группу. Отразите в нем также следующие сведения: мой город и что мне
нравится в нем, мои друзья.
Для оформления используйте различные
шрифты, стили и способы выравнивания, а также горизонтальные линии.
37
Контрольные вопросы
1. Дайте характеристику форматированию абзаца.
2. Дайте характеристику форматированию шрифта.
3. Логические стили в HTML – документах.
4. Комментарии в HTML-документах.
5. Горизонтальные линии.
Самостоятельная работа №3.
Управление цветом
Цель: научиться создавать цветной фон Web-страницы, использовать
шрифт различного цвета.
Задание 1. Оформление цветом Web-страницы
Указания к выполнению
Создайте новую Web-страницу в редакторе Блокнот.
В элементе <TITLE> укажите название странички «Задание 1.
Оформление цветом Web-страницы.»
В начальном элементе <BODY> используйте соответствующий
атрибут, чтобы сделать цвет фона странички черным.
Сделайте надпись белым цветом «Спокойной ночи». Выровняйте ее
по середине страницы. Размер шрифта 4.
Вставьте горизонтальную линию красного цвета.
Сделайте
надпись
желтого
цвета
«Приятных
сновидений».
Выровняйте ее по середине страницы. Размер шрифта 7.
Вставьте горизонтальную линию синего цвета толщиной 10
пикселов, длиной 50% от ширины экрана, и выровняйте ее по центру.
Контрольные вопросы
1. Цветовая гамма HTML-документа.
2. Управление цветом на Web – странице.
Самостоятельная работа №4.
Гипертекстовые ссылки
38
Цель работы: познакомиться с основными принципами построения
гипертекстовых ссылок: научиться связывать несколько HTML-документов с
помощью гиперссылок, определять цвет гиперссылок, использовать рисунок
в качестве гиперссылки.
Задание 1. Создание простейшей гиперссылки
Указания к выполнению
Создайте две Web-страницы в редакторе Блокнот. Одну назовите
pagel.htm, вторую page2.htm. Обе странички сохраните в одной папке под
названием site. Обратите внимание, что названия папки и страничек должны
быть на английском языке и начинаться со строчной буквы
В элементе <TITLE> укажите название странички "Задание 1.
Создание простейшей гиперссылки”.
Пусть фон первой странички будет зеленого цвета, а второй синего.
На первой страничке создадим гиперссылку для перехода на вторую
страницу. Для этого создайте элемент:
<А href="page2.htm">Ha страницу 2 </а>
На второй страничке создадим гиперссылку для перехода на первую
страницу. Для этого создайте элемент:
<А href="page1.htm">На страницу 1 </а>
Откройте в браузере первую страничку и убедитесь, что обе
гиперссылки работают правильно.
Задание 2. Создание гиперссылок
Указания к выполнению
Выполнить второе задание вы можете, если успешно справились с
Заданием 1. Создайте третью страничку page3.htm. Пусть ее фон будет
черным.
На страничке page3.htm создайте гиперссылки для перехода на
странички pagel.htm и page2.htm.
39
На страничках pagel.htm и page2.htm добавьте гиперссылку для
переход на страничку page3.htm.
На страничке page3.htm создайте в конце документа гиперссылку
для перехода в начало этого же документа.
Откройте в браузере первую страничку и убедитесь, что теперь
можно перейти с любой странички на любую другую из трех созданных.
Задание 3. Цвет гиперссылок
Указания к выполнению
Выполнить задание вы можете, если успешно справились с
Заданием 2.
На страничках
pagel.htm, page2.htm и page3.htm в тэге <BODY>
определите цвет гиперссылок:
все гиперссылки на странице – белые;
активные гиперссылки – красные;
посещенные гиперссылки – серые.
Откройте в браузере первую страничку и, переходя по ссылкам со
странички на страничку, убедитесь, что цвет гиперссылок задан верно.
Контрольные вопросы
1. Понятие гипертекста
2. Понятие гиперссылки.
3. Структура гиперссылки
4. Относительный адрес.
5. Абсолютный адрес.
6. Внешние и внутренние гиперссылок.
Самостоятельная работа №5.
Работа со списками
Цель работы: познакомиться с разными видами списков в HTMLдокументах, научиться создавать списки на Web-странице.
40
Задание 1. Создание нумерованных списков.
1. Создайте новую Web-страницу в текстовом редакторе Блокнот.
2. В элементе <TITLE> укажите название странички "Задание 1.
Создание нумерованных и ненумерованных списков на Web-странице по
образцу ".
3. Отформатируйте текст согласно указаниям, данным в скобках
курсивом.
Солнце должно быть:
(Шрифт размером 4, красного цвета, выравнивание по центру)
1. Теплым.
2. Круглым.
3. Желтым.
Снег должен быть:
(Шрифт размером 10, синего цвета, выравнивание по левому краю)
A. Белым.
B. Холодным.
C. Пушистым.
(Шрифт обоих, списков черный, размер 3).
Задание 2. Создание нумерованных и маркированных списков, списков
определений.
1. Создайте новую Web-страницу в текстовом редакторе Блокнот.
2. В элементе <TITLE> укажите название странички "Задание 2.
Создание нумерованных и ненумерованных списков на Web-странице по
образцу ".
3. Создайте
Ваш
HTML-документ,
следующим образом:
СПИСКИ
41
который
будет
выглядеть
Ненумерованный список
Пункт 1 списка
Пункт 2 списка
Пункт 3 списка
Вложенные списки
Пункт 1
1. Пункт 1.1.
2. Пункт 1.2.
Пункт 2
1. Пункт 2.1.
2. Пункт 2.2.
Пункт 3
1. Пункт 3.1.
2. Пункт 3.2.
Нумерованный список
I. Пункт 1
II. Пункт 2
III. Пункт 3
IV.
Пункт 4
Список с определениями
Пункт 1
Определение пункта 1
Другое определение пункта 1
Пункт 2
Определение пункта 2
Пункт 3
42
Определение пункта 3
Задание 3. Создание маркированных списков.
1. Создайте новую Web-страницу в текстовом редакторе Блокнот.
2. В элементе <TITLE> укажите название странички "Задание 3.
Любимые актеры".
3. Создайте маркированный список, содержащий фамилии ваших
любимых актеров.
Задание 4. Создание маркированных списков.
1. Создайте новую Web-страницу в текстовом редакторе Блокнот.
2. В элементе <TITLE> укажите название странички "Задание 4. Цвета
радуги".
3. Создайте нумерованный список, перечисляющий цвета радуги.
Задание 5. Создание списка определений.
1. Создайте новую Web-страницу в текстовом редакторе Блокнот.
2. В элементе <TITLE> укажите название странички "Задание 5.
Породы собак".
3. Создайте список определений, содержащий название
и описание
породы собак.
Задание 6. Создание списка определений.
1. Создайте новую Web-страницу в текстовом редакторе Блокнот.
2. В элементе <TITLE> укажите название странички "Задание 6.
Автомобили".
3. Создать 3-уровневый список. 1 уровень (верхний) – маркированный
список стран; 2 уровень – нумерованный список автомобильных фирм; 3
уровень – маркированный список автомобилей (количество элементов на
каждом из уровней – не меньше 2). Создать список определений (любой,
количество элементов не меньше 3).
43
Задание 7. Создание списка определений.
1. Создайте новую Web-страницу в текстовом редакторе Блокнот.
2. В элементе <TITLE> укажите название странички "Задание 7.
Принтеры".
3. Создать 3-уровневый список. 1 уровень (верхний) – нумерованный
список стран; 2 уровень – маркированный список фирм, производящих
принтеры; 3 уровень – нумерованный список принтеров (количество
элементов на каждом из уровней – не меньше 2).
Задание 8. Создание списка определений.
1. Создайте новую Web-страницу в текстовом редакторе Блокнот.
2. В элементе <TITLE> укажите название странички "Задание 8.
Мониторы"
3. Создать 3-уровневый список. 1 уровень (верхний) – маркированный
список стран; 2 уровень – нумерованный список фирм, производящих
мониторы; 3 уровень – нумерованный список мониторов (количество
элементов на каждом из уровней – не меньше 2). Создать список
определений (любой, количество элементов не меньше 3).
Контрольные вопросы
1. Перечислите основные типы списков в HTML-документах.
2. Охарактеризуйте маркированный (ненумерованный) список.
3. Дайте характеристику нумерованных списков.
4. Дайте характеристику вложенныем спискам.
5. Списки определений в HTML-документах.
Самостоятельная работа №6.
Вставка графических изображений
Цель: научиться размещать графические изображения на Web-странице,
и изменять их размер и размещать горизонтальные линии на странице.
Использовать карты-изображения..
Задание 1. Размещение графики на Web-странице
44
Создайте новую Web-страницу в редакторе Блокнот.
В элементе <TITLE> укажите название странички «Задание 1.
Размещение графики на Web-странице».
Если в тэге <BODY> не указывать цвет странички, то по умолчанию
фон будет белым. Сделайте цвет фона странички оранжевым.
Разместите
на
страничке
любой
рисунок.
Для
размещения
изображения вам требуется указать путь к файлу в элементе <IMG>. Чтобы
упростить описание пути к этому графическому файлу, скопируйте этот файл
в ту же папку, в которой будет сохранена Web-страничка.
Если файл находится не в одной папке с Web-страничкой, то
необходимо указать относительный путь к этому файлу.
Сделайте подпись к рисунку с помощью атрибута alt.
Создайте рамку вокруг рисунка шириной 2 пиксела.
Над рисунком поместите заголовок самого большого размера и
выровняйте его по центру страницы.
Задание 2. Изменение размеров изображения на Web-странице.
Создайте новую Web-страницу в редакторе Блокнот.
В элементе <TITLE> укажите название странички «Задание 2.
Изменение размеров изображения на Web-странице».
Пусть фон странички будет зеленого цвета.
Определите размер выбранного вами изображения.
Вставьте это изображение на страничку, задав его размеры: ширина
100, высота 100 пикселов.
Просмотрите в браузере полученную страничку. Обратите внимание на
следующие вещи:
A. В связи с тем, что вы непропорционально изменили размеры
изображения, произошло искажение рисунка;
B. Так как вы увеличили размер изображения, произошла потеря
качества рисунка (обратите внимание на края изображения);
45
C. Для
размещения
изображений
на
Web-страничке,
лучше
использовать прозрачный фон рисунка.
Задание 3. Использование рисунка в качестве гиперссылки
• Выполнить задание вы можете, если успешно справились с Заданием
3.
• На страничках pagel.htm, page2.htm и page3.htm, вместо текстовых
гиперссылок используйте рисунки.
Для этого:
• Вставьте на первую страничку одно изображение и создайте
гиперссылку для перехода на вторую страницу:
<А href ="page2.htm"> <IMG src="*.gif"> </а>
• самостоятельно вставьте другое изображение для перехода с первой
странички на третью;
• задайте бордюр обоих изображений, равным 2;
• Откройте в браузере первую страничку и, переходя по ссылкам со
странички на страничку, убедитесь, что переходы работают верно.
• Самостоятельно вставьте изображения на страницы page2.htm и
page3.htm и задайте соответствующие гиперссылки.
• Откройте в браузере первую страничку и, переходя по ссылкам со
странички на страничку, убедитесь, что кнопки на всех страницах работают
верно.
Задание 4. Использование рисунка в качестве гиперссылки (карты)
Создайте страницу Map.htm, на которой разместите две карты. Карта,
имеющая имя kartal, содержит область в виде круга и область произвольной
формы. Изображение karta2 содержит область прямоугольной формы. Между
картами должен располагаться текст, объясняющий действие ссылок
(щелчков). Ваш HTML-документ должен выглядеть следующим образом:
Примеры карт
Изображения карт иллюстрируют способы задания координат областей
46
для переходов
Карта 1
На этой странице представлены две карты, которые позволяют
выполнять различные переходы. Для правильного функционирования
страницы необходимо проверить все ссылки на файлы, заданные с
помощью атрибутов src и href.
Щелчок по зеленому кругу должен обеспечить переход к вашей Webстранице. Желтый многоугольник вернет вас на страницу Color.htm
(название и коды цветов). Красный прямоугольник (см. ниже) обеспечивает
переход в начало этой страницы.
Карта 2
2. Измените вид карт, используя другие геометрические фигуры.
Контрольные вопросы
1. Роль графики. Характеристика графических стандартов
47
2. Вставка графических изображений в HTML-документ.
3. Использование карт изображений
Самостоятельная работа №7.
Таблицы HTML-документов
Цель работы: познакомиться с основными приемами создания таблиц
на языке гипертекстов, рассмотреть основные теги и атрибуты, научиться
создавать, форматировать, заполнять
таблицы, проектировать структуру
таблицы.
Задание 1. Создание таблицы по образцу.
В элементе <TITLE> укажите название странички "Задание 1.
Создание таблицы по образцу"
Создайте таблицу, как показано на рис.
Один
Два
Три
Четыре
Пять
Шесть
Текст в первой строке выровняйте по центру по горизонтали и по
вертикали.
Текст во второй строке выделите жирным шрифтом.
Задание 2. Создание таблицы по образцу.
В элементе <TITLE> укажите название странички "Задание 2.
Создание таблицы по образцу"
Создайте HTML-документ, соответствующий следующему образцу:
Примеры таблиц
Стандартная таблица
Заголовок таблицы
Заголовок 1
Заголовок 2
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
48
Объединение ячеек
Заголовок 1
Заголовок 2
Заголовок 3
Ячейка 2
Ячейка 1
Ячейка 3
Ячейка 4
Ячейка 5
Вложенная таблица
Ячейка Ячейка Ячейка Ячейка
1.1.1
1.1.2
1.1.3
1.1.4
Ячейка
Ячейка
Ячейка
3.1.1
3.1.2
3.3.1
Ячейка
Ячейка
Ячейка
3.2.1
3.2.2
3.2.3
Ячейка 2.1.1
Ячейка 2.1.2
Ячейка 4.1.1
Ячейка 4.1.2
Ячейка 2.2.1
Ячейка 2.2.2
Ячейка 4.2.1
Ячейка 4.2.2
Ячейка 4.3.1
Ячейка 4.3.2
Табличка
Петровым 2 звонка
Задание 3. Форматирование таблицы
Для
выполнения
этого
задания
воспользуйтесь
результатами
выполнения Задания 1.
В элементе <TITLE> укажите название странички "Задание 3.
Форматирование таблицы".
49
Сделайте фон первого столбца зеленого цвета, второго – красного,
третьего – синего.
Задайте ширину бордюра таблицы, равным 3 пикселям.
Ширину таблицы сделайте равной ширине экрана.
Шрифт, которым написан текст внутри таблицы, сделайте белым.
Задание 4. Заполнение таблицы
Для
выполнения
этого
задания
воспользуйтесь
результатами
выполнения Задания 1.
В элементе <TITLE> укажите название странички "Задание 4.
Заполнение таблицы".
В
первую
ячейку
первой
строки
вставьте
рисунок
из
файла *.jpg.
Во второй ячейке второй строки напишите ваше любимое
четверостишие.
Сделайте фон третьей ячейки второй строки красного цвета.
Задание 5. Самостоятельное проектирование и создание таблицы
Составьте таблицу для расписания ваших занятий. Пусть эта таблица
состоит из восьми столбцов и девяти строк. Ширина таблицы 100%.
В первом столбце укажите время начала и конца ваших занятий.
Выравнивание данных в ячейках должно быть по левому краю.
В остальных столбцах укажите дисциплины по дням недели.
Выравнивание дней недели по центру ячейки и жирным шрифтом.
Выравнивание названий дисциплин в ячейках должно быть по
левому краю.
У всех столбцов фон сделайте разным цветом.
Перед таблицей поместите заголовок "РАСПИСАНИЕ ЗАНЯТИЙ",
выделив его тэгами <H1> и </h1>. Цвет заголовка красный.
Между заголовком и таблицей поместите рисунок.
50
Задание 6.
Составьте справочную таблицу “Цветовая гамма HTML-документа”
размером 5*3. Заполните ячейки таблицы записями кодов различных
оттенков красного (строка 1), зеленого (строка 2) и синего (строка 3). Фон
ячеек закрасьте теми же цветами, коды которых записаны в них.
Задание 7.
Составьте радугу, закрасив ячейки таблицы нужным цветом.
Задание 8.
Составьте выписку из своей зачетной книжки, оформив ее в виде
таблицы.
Задание 9.
Изучите примеры и создайте WEB-страницу, на которой посередине
разместите таблицу следующего вида (ширина таблицы=90%)
51
Контрольные вопросы
1. Основные методы создания таблиц.
2. Параметры, которые используются при создании таблиц в HTMLдокументах.
3. Группировка данных
4. Колонтитулы таблицы
5. Прорисовка структуры таблицы
6. Вложенные таблицы
7. Создание цветных таблиц.
Самостоятельная работа № 8-9
Формы
№
Общие задания
Создайте HTML – форму "Личная", в которой пользователь будет задавать свое имя,
фамилию,
адрес,
интересы
(может
быть
несколько),
username,
password.
Предусмотреть текстовое поле для комментария из нескольких строк. Следует
1.
учитывать следующие моменты компоновки и дизайна HTML – форм выбор даты,
месяца
и
года
рождения
должен
производиться
различными
способами.
Предусмотрите в данной форме гиперссылку для перехода на другой Web –
документ.
2.
В новом HTML – документе разработайте HTML-форму, в которой на примере
своей зачетной книжке (дисциплина и оценка), покажите использование различных
52
видов списков для компоновки форм, использование флажков и переключателей.
№
Вариант задания
Создать опрос общественного мнения, ориентированный на исследование рынка
1.
сбыта автомобилей. Выполнить в виде формы, предусмотреть создание как
минимум 4 страниц, кнопок Clear и Submit. Сформировать HTML – форму, в
которой выбор информации осуществляется из различных видов списков.
Создать опрос общественного мнения, ориентированный на исследование рынка
2.
сбыта алкогольной продукции. Выполнить в виде формы, предусмотреть создание
как минимум 4 страниц, кнопок Clear и Submit. Сформировать HTML – форму, в
которой выбор информации осуществляется из различных видов списков.
Создать опрос общественного мнения, ориентированный на исследование рынка
3.
сбыта сигарет. Выполнить в виде формы, предусмотреть создание как минимум 4
страниц, кнопок Clear и Submit. Сформировать HTML – форму, в которой выбор
информации осуществляется из различных видов списков.
Создать опрос общественного мнения, ориентированный на исследование рынка
4.
сбыта компьютерной техники. Выполнить в виде формы, предусмотреть создание
как минимум 4 страниц, кнопок Clear и Submit
Контрольные вопросы
1. Перечислите основные теги для создания HTML–форм.
2. Тег (дескриптор) FORM.
3. Ввод информации в HTML–форму. Тег INPUT.
4. Создание паролей в HTML–формах.
5. Осуществление выбора информации с помощью флажков и
переключателей.
6.
Назначение кнопки RESET.
7.
Назначение кнопки SUBMIT.
8. Выбор
информации
в
HTML–форме.
Основные
теги
и
характеристика.
9. Характеристика дескриптора TEXTAREA.
10. Какой тег следует указывать при поиске из нескольких массивов
информации?
53
их
11. Если форма, проектируемая пользователем достаточно велика, то
какой способ используют для размещения информации?
12. Какой тег используется для формирования горизонтальной строки?
13. Какой тег используют для перевода строки?
14. Что улучшает совместное использование в Web документе таблиц и
форм?
15. Какие элементы управления позволяют передать данные с
компьютера клиента на сервер?
16. Напишите пример одновременного использования HTML-форм,
таблиц и кнопки передачи запроса.
11. ФРЕЙМЫ HTML-ДОКУМЕНТОВ
Фреймы в HTML позволяют авторам представлять документы в
нескольких разделах, которые могут быть независимыми или вложенными
окнами. Это обеспечивает дизайнерам способ оставлять некоторую
информацию видимой, в то время как другая информация прокручивается
или заменяется. Например, в одном окне в одном фрейме может
отображаться статический баннер, во втором навигационное меню, а в
третьем – сам документ, который можно прокручивать или переходить к
другому с помощью навигации во втором фрейме.
Используя фреймы, можно значительно улучшить внешний вид и
функциональность информационных систем и Web-приложений. Каждое
подокно, или фрейм, может иметь следующие свойства:
Каждый фрейм имеет свой URL, что позволяет загружать его
независимо от других фреймов
Каждый фрейм имеет собственное имя (параметр NAME),
позволяющее переходить к нему из другого фрейма
Размер фрейма может быть изменен пользователем прямо на экране
при помощи мыши (если это не запрещено указанием специального
параметра)
54
Данные свойства фреймов позволяют создавать продвинутые
интерфейсные решения, такие как:
Размещение статической информации, которую автор считает
необходимым постоянно показывать пользователю, в одном статическом
фрейме. Это может быть графический логотип фирмы, copyright, набор
управляющих кнопок
Помещение в статическом фрейме оглавления всех или части WEB-
документов, содержащихся на WEB-сервере, что позволяет пользователю
быстро находить интересующую его информацию
Создавать окна результатов запросов, когда в одном фрейме
находится собственно запрос, а в другом результаты запроса
11.1. Синтаксис фреймов
Формат документа, использующего фреймы, внешне очень напоминает
формат обычного документа. Вместо тэга BODY используется контейнер
FRAMESET, содержащий описание внутренних HTML-документов, в
которых находится собственно информация, размещаемая во фреймах.
<HTML>
<HEAD>...</head>
<FRAMESET>...</frameset>
</html>
Однако,
документа,
фрейм-документ
поскольку
не
является
содержит
специфичным
элемента
BODY
видом
и
HTML-
какой-либо
информационной нагрузки соответственно. Он описывает только фреймы,
которые будут содержать информацию (кроме случая двойного документа).
Атрибуты:
Border = толщина рамки (по умолчанию 1)
Bordercolor = цвет рамки
Framespasing = отступ от края
Rows = "высота строк"
55
Данный тэг содержит описания некоторого количества подокон,
разделенные запятыми. Каждое описание представляет собой числовое
значение размера подокна в пикселях, процентах от всего размера окна или
связанное
масштабное
значение.
Количество
подокон
определяется
количеством значений в списке. Общая сумма высот подокон должна
составлять высоту всего окна (в любых измеряемых величинах). Отсутствие
атрибута ROWS определяет один фрейм, величиной во все окно браузера.
Синтаксис используемых видов описания величин подокон:
высота строк в виде числа – (ROWS=10)
Простое числовое значение определяет фиксированную высоту подокна
в пикселях. Это далеко не самый лучший способ описания высоты подокна,
поскольку различные браузеры имеют различный размер рабочего поля, не
говоря уже о различных экранных разрешениях у пользователя. Если вы, все
же, используете данный способ описания размера, то настоятельно
рекомендуется сочетать его с каким-либо другим, чтобы в результате вы
точно получили 100%-ное заполнение окна браузера вашего пользователя.
высота строк в виде процентного отношения (%) – (ROWS=15%)
Значение величины подокна в процентах от 1 до 100. Если общая сумма
процентов описываемых подокон превышает 100, то размеры всех фреймов
пропорционально уменьшаются до суммы 100%. Если, соответственно,
сумма меньше 100, то размеры пропорционально увеличиваются.
высота строк*
Символ "*" указывает на то, что все оставшееся место будет
принадлежать данному фрейму. Если указывается два или более фрейма с
описанием "*" (например "*,*"), то оставшееся пространство делится
поровну между этими фреймами. Если перед звездочкой стоит цифра, то она
указывает пропорцию для данного фрейма (во сколько раз од будет больше
аналогично описанного чистой звездочкой). Например, описание "3*,*,*",
говорит, что будет создано три фрейма с размерами 3/5 свободного
56
пространства для первого фрейма и по 1/5 для двух других.
COLS="ширина колонок"
(ширина колонок может быть задана в виде числа (COLS=10 ) или в
виде процентного отношения (COLS=15%), знак умножения (*) –
означает, что фрейм занимает все оставшиеся колонки независимо от
изменения ширины окна браузера)
Примеры:
<FRAMESET COLS=“60,60,60,60”>
...продолжение определения...
</FRAMESET>
– описывает 4 вертикальных фрейма шириной по 60 пикселей. Задавать в
пикселях ширину всех рамок не рекомендуется, так как разрешение
мониторов различное, и рамки на разных мониторах будут выглядеть поразному. Размер одной из рамок рекомендуется указывать символом “*”.
<FRAMESET COLS="50,*,50">
...продолжение определения...
</FRAMESET>
– описывает три вертикальных фрейма, два по 50 точек справа и слева, и
один внутри этих полосок.
<FRAMESET ROWS="20%,3*,*">
...продолжение определения...
</FRAMESET>
– описывает три горизонтальных фрейма, первый из которых занимает 20%
площади сверху экрана, второй 3/4 оставшегося от первого фрейма места (т.е.
60% всей площади окна), а последний 1/4 (т.е. 20% всей площади окна.
<FRAMESET ROWS="*,60%,*">
...продолжение определения...
</FRAMESET>
– аналогично предыдущему примеру.
57
Пример.
<HTML>
<HEAD>
<TITLE>Пример</title>
<META name="Author" content="Denis">
</head>
<FRAMESET BORDER=1 FRAMESPASING=0 ROWS="100,*">
<FRAME NAME="Frame1" SRC="L7Frame1.htm" SCROLLING="Auto">
<FRAMESET BORDER=1 FRAMESPASING=0 COLS="25%,*">
<FRAME NAME="Frame2" SRC="L7Frame2.htm" SCROLLING="Auto">
<FRAME NAME="Frame3" SRC="L7Frame3.htm" SCROLLING="Auto">
</frameset>
</frameset>
</html>
Пример.
<HTML>
<HEAD>
<TITLE>фреймы </title>
</head>
<FRAMESET rows="30%,70%" COLS = "33%,34%,33%">
<FRAME SRC= "a.htm">
<FRAME SRC="b.htm">
<FRAME SRC= "a.htm">
58
<FRAME SRC="b.htm">
<FRAME SRC= "a.htm">
<FRAME SRC="b.htm">
</frameset>
</html>
– создается сетка 2x3.
<NOFRAME> позволяет строить двойные документы для браузеров,
поддерживающих фреймы и не поддерживающих фреймы. Выводит
альтернативный текст, если фреймы не поддерживаются браузером.
<NOFRAMES> текст HTML </NOFRAMES>
Представим общий синтаксис фреймов:
<FRAMESET COLS=" ширина колонок" | ROWS=" высота строк">
<FRAME src="url1">
<FRAME ...>
...
</frameset>
Тэг FRAME описывает каждый фрейм в отдельности. Между тегами
<FRAMESET> и </FRAMESET> не должно быть никаких других тегов или
атрибутов, кроме <FRAME>, <FRAMESET> и <NO FRAMES>.
FRAME
<FRAME src="ur1" [NAME="frame_name"] [MARGINWIDTH="nw"] [MARGINHEIGHT="nh"] [SCROLLING=yes|no|auto] [NORESIZE]>
Данный тэг определяет фрейм внутри контейнера FRAMESET.
src="url"
59
Описывает URL документа, который будет отображен внутри данного
фрейма. Если он отсутствует, то будет отображен пустой фрейм.
name="frame_name"
Данный параметр описывает имя фрейма. Атрибут NAME используется
для того, чтобы указать, в каком именно кадре нужно загружать страницу, на
которую сделана ссылка. Кадровая структура позволяет делать ссылки в
одном кадре, а загружать страницы в другой кадр. Имя обязательно должно
начинаться с символа.
Если для разработки информационной системы использовать два
вертикальных кадра, например, узкий слева для оглавления (индекса
ключевых слов), а правый большой кадр для того, чтобы в нем появлялись
выбранные страницы, то этот большой кадр можно назвать “MAIN”.
Пример:
<FRAME src=“a.htm” name=“main”>
Содержимое поименованных фреймов может быть задействовано из
других документов при помощи специального атрибута TARGET.
MARGINWIDTH="value"
Это атрибут может быть использован, если автор документа хочет
указать горизонтальный отступ между содержимым кадра и его границами.
(Этот атрибут аналогичен атрибуту таблиц CELLPADDING). Значение value
указывается в пикселях и не может быть меньше единицы. Нельзя указать 0.
Если ничего не присваивать, то по умолчанию атрибут=6. Пример:
<FRAME MARGINWIDTH=“30” src=“с.htm”>
MARGINHEIGHT="value"
Атрибут MARGINHEIGHT = используется для того, чтобы указать
вертикальный отступ между содержимым кадра и его границами.
SCROLLING="yes | no | auto"
Этот атрибут позволяет задавать наличие полос прокрутки у фрейма.
60
При задании SCROLLING = NO полос прокрутки не будет, даже если
они необходимы.
При задании SCROLLING = YES в кадре всегда будет полоса
прокрутки.
При задании SCROLLING = AUTO предоставляется возможность
браузеру самому решать, нужна ли полоса прокрутки (значение по
умолчанию).
Пример:
<HTML>
<HEAD>
<TITLE>Полосы прокрутки </title>
</head>
<FRAMESET COLS = “25%, 75%”>
<FRAME SCROLLING = YES SRC= “a.htm”>
<FRAME SCROLLING = NO SRC=“b.htm”>
</frameset>
</html>
NORESIZE
Данный атрибут позволяет создавать фреймы без возможности
изменения размеров. По умолчанию, размер фрейма можно изменить при
помощи мыши так же просто, как и размер окна Windows. NORESIZE
отменяет данную возможность. Если у одного фрейма установлен атрибут
NORESIZE, то у соседних фреймов тоже не может быть изменен размер со
стороны данного.
61
11.2 Планирование фреймов и взаимодействия между фреймами
С появлением фреймов сразу возникает вопрос: "А как сделать так,
чтобы нажимая на ссылку в одном фрейме инициировать появление
информации в другом?"
Ответом на данный вопрос является планирование взаимодействия
фреймов (далее – планирование). Каждый фрейм может иметь собственное
имя, определяемое параметром NAME при описании данного фрейма.
Существует, также, специальный атрибут – TARGET, позволяющий
определять, к какому фрейму относится та или иная операция. Формат
данного атрибута следующий:
TARGET="windows_name"
Данный атрибут может встречаться внутри различных тэгов:
TARGET в тэге A
Это самое прямое использование TARGET. Обычно, при активизации
пользователем ссылки соответствующий документ появляется в том же окне
(или фрейме), что и исходный, в котором была ссылка. Добавление атрибута
TARGET позволяет произвести вывод документа в другой фрейм. Например:
<A href="mydoc.php" TARGET="Frame1"> Переход в фрейм №1 </a>
TARGET в тэге BASE
Размещение TARGET в тэге BASE позволит вам не указывать при
описании каждой ссылки фрейм-приемник документов, вызываемых по
ссылкам. Это очень удобно, если в одном фрейме у вас находится меню, а в
другой – выводится информация. Например:
Документ № 1.
<FRAMESET ROWS="20,*">
<FRAME SRC="doc2.php" name="Frame1">
<FRAME SRC="doc3.php" name="Frame2">
</frameset>
Документ № 2 (doc2.php).
62
<HTML>
<HEAD>
<BASE TARGET="Frame2">
</head>
<BODY>
<A HREF="url1"> Первая часть</a>
<A HREF="url2"> Вторая часть</a>
</body>
</html>
TARGET в тэге AREA
Также можно включать тэг TARGET в описание ссылки при создании
карты изображения.
Пример:
<AREA SHAPE="circle" COORDS="100,100,50"
REF="http://www.softexpress.com" TARGET="Frame1">
TARGET в тэге FORM
То же относится и к определению формы. В данном случае, после
обработки переданных параметров формы результирующий документ
появится в указанном фрейме.
<FORM action="url" TARGET="window_name">
63
11.3. Зарезервированные имена фреймов
Зарезервированные имена фреймов служат для разрешения специальных
ситуаций. Все они начинаются со знака подчеркивания. Любые другие имена
фреймов, начинающиеся с подчеркивания, будут игнорироваться браузером.
TARGET="_blank"
Данное значение определяет, что документ, полученный по ссылке,
будет отображаться в новом окне браузера.
TARGET="_self"
Данное значение определяет, что документ, полученный по ссылке,
будет отображаться в том же фрейме, в котором находится ссылка. Это имя
удобно для переопределения окна назначения, указанного ранее в тэге BASE.
TARGET="_parent"
Данное значение определяет, что документ, полученный по ссылке,
будет отображаться в родительском окне, вне зависимости от параметров
FRAMESET. Если родительского окна нет, то данное имя аналогично
"_self".
TARGET="_top"
Данное значение определяет, что документ, полученный по ссылке,
будет отображаться на всей поверхности окна, вне зависимости от наличия
фреймов. Использование данного параметра удобно в случае вложенных
фреймов.
Атрибут TARGET = используем для составления оглавления:
Пример.
<HTML>
<HEAD>
<TITLE>Страничка с оглавлением</title>
</head>
<BODY>
<H3> Оглавление </h3>
64
<H4>Введение</h4>
<OL>
<li><A HREF=“a1.htm” TARGET=“main”>Глава 1 </a>
<li><A HREF=“a2.htm” TARGET=“main”>Глава 2 </a>
<li><A HREF=“a3.htm” TARGET=“main”>Глава 3 </a>
</ol>
<H4>Заключение</h4>
</body>
</html>
11.4. Бегущая строка (элемент MARQUEE)
<MARQUEE> </marquee>
Элемент, создающий бегущую строку. Сам по себе прием интересен,
наилучшего эффекта можно добиться, удачно подобрав атрибуты. Фоновый
цвет задается так:
bgcolor="Цвет"
Если фон задан, то броузер рисует на экране цветную полосу, вдоль
которой бежит текст. Высоту полосы можно регулировать двумя способами:
height=Высота в пикселах
height=Число %
Если используются пикселы, то можно порекомендовать диапазон
30...50. Высоту можно указывать и в процентах. Процент определяет долю от
высоты видимой части гипертекста внутри окна броузера. Эта величина,
разумеется, не является постоянной и зависит от размера окна. Если высота
полосы достаточно большая, имеет смысл использование атрибута align для
выравнивания текста по верхнему краю, по середине или по нижнему краю
полосы:
65
align=top
align=middle
align=bottom
Правда, не все браузеры поддерживают этот атрибут. Вот пример
полосы зеленого цвета, высотой 50 пикселов, с выравниванием бегущего
текста по середине:
<MARQUEE bgcolor="green" height=50 align="middle"> Бегущая строка
</MARQUEE>
Направление движения строки тоже можно менять:
direction="left"
direction="right"
Самым удачным атрибутом элемента marquee является behavior,
управляющий поведением (behavior) строки. По умолчанию создается
обычная бегущая строка, какие бывают на табло. Дойдя до края экрана
(окна), она уходит из поля зрения, а затем появляется с противоположной
стороны. Этому варианту поведения соответствует следующее значение
атрибута:
behavior="scroll"
Второй вариант движения заключается в следующем – строка
появляется из-за края окна, достигает противоположного и останавливается.
Значение атрибута таково:
behavior="slide"
По третьему сценарию строка не исчезает с экрана, но и не
останавливается. Она движется вправо или влево, "отражаясь" от краев окна
и меняя направление движения. Атрибут в этом случае должен быть задан
так:
behavior="alternate"
Всю полосу можно сдвинуть по горизонтали вправо:
hspace=Смещение в пикселах
66
Выше и ниже полосы можно создать пустое пространство:
vspace=Высота в пикселах
Количество проходов строки по экрану можно ограничить:
loop=Число
Выполнив необходимое число проходов, строка остановится. Отсчет
начнется только после того, как пользователь увидит ее на экране. Скорость
движения задает следующий атрибут:
scrollamount=Число
Если число = 1, то строка будет еле ползти по сравнению с режимом по
умолчанию. Если число > 10, то она будет двигаться очень быстро. Данный
атрибут задает скорость движения как число пикселов, которые проходит
строка за каждый шаг.
Существует второй атрибут скорости, определяющий временной
интервал (в миллисекундах) между шагами:
scrolldelay=Число
С помощью этого атрибута можно заставить строку двигаться рывками.
Пример.
<HEAD>
<TITLE>Бегущая строка</title>
</head>
<BODY bgcolor=#E0FFFF>
<BASEFONT size=3>
<MARQUEE
bgcolor="RED"
height=30
direction="right"
behav-
ior="scroll"> Бегущая строка 1 </marquee>
<MARQUEE BGCOLOR="GREEN" height=30 direction="right" behavior="slide" scrollamount=3> Бегущая строка 2 </marquee>
<MARQUEE BGCOLOR="YELLOW" height=30 direction="right" behavior="alternate" scrollamount=4> Бегущая строка 3 </marquee>
67
<MARQUEE BGCOLOR="BLUE" height=30 direction="right" behavior="alternate" scrolldelay=500 scrollamount=10> Бегущая строка 4 </marquee>
<MARQUEE> Бегущая строка 5 </marquee>
</body>
</html>
11.5. Фиксация информации на экране (элемент BANNER)
<BANNER> </banner>
Элемент, позволяющий зафиксировать некоторую информацию на экране
вне зависимости от того, какая часть документа просматривается. Такие
"постоянные" детали страницы, называемые баннерами, удобны для
размещения логотипов, подсказок, заголовков и т. д. Обсуждаемый элемент
поддерживается не всеми браузерами, и использовать его имеет смысл
только в том случае, когда заранее известно, что он будет функционировать
68
