Освоение правил и приемов вставки рисунков рисунков и видеороликов в веб-документы
2.1. Атрибуты оформления текста и графики в html-документах
В веб-документы (html-документы) можно вставлять графические файлы. Для веб-графики наиболее характерны стандарты jpg, jpeg, gif и png, хотя допустимы любые графические форматы, в том числе и bmp. Редакторы, в которых можно создавать графические файлы – это универсальные редакторы Adobe photoshop, Paint, а также специализированные редакторы Macromedia Fireworks, Macromedia Flesh, Ulead Gif Animator и другие.
Основное требования к веб-документу – минимальный объем файла при достаточно высоком качестве, которому отвечает формат png. Формат Gif вносит оживление в веб-страницу, так как допускает анимационные эффекты. При включении видеороликов в веб-страницу ее загрузка существенно замедляется, поэтому следует ограничивать их использование, особенно, на главной страницк сайта.
Простейший способ вставки графики (рисунков) в html-документ реализуется путем применения непарного тега <img>. Он может иметь атрибуты: alt “некоторый текст”; height=“длина изображения”; width = “ширина изображения”; align= “вид выравнивания” (top, middle, bottom, left, right). Атрибут src указывает место размещения файла рисунка. В общем случае это интернет-адрес url. Если файл находится на «родном» сайте, то достаточно указать каталог и имя файла.
Примеры: <img src = clouds.gif> ; <img src = Pictures/kartrige.png> ;
<img src = http://www.anteg.ru/New/kardio.jpg>
Имеются дополнительные атрибуты тега <img>: border –толщина рамки вокруг рисунка; vspace – размер пустого поля над и под рисунком в пикселах; hspace – размер пустого слева и справа от рисунка. Следует проверять размещение рисунков на экране, так как они искажаются, если им мало места на экране.
Для создания фона веб-страниц наряду с заданием кода определенного цвета можно использовать и файлы рисунков.
Примеры: <BODY bgcolor=”#003399”>; <BODY backgrownd =oboi.gif>
Видеоролики создаются в специальных редакторах, например, в редакторе Macromedia Fireworks с сохранением в формате gif. Такие ролики занимают небольшой объем памяти и обладают анимационным эффектом. Более функциональны видеоролики, создаваемые в редакторе Macromedia Flash Mx, полученные в нем файлы сохраняют в формате swf.
Код текста программы, воспроизводящей видеоролик, сложен и требует вставок фрагментов, написанных обычно на языке Java Script. В редакторе видеоролик создается автоматически, но для включения его непосредственно в веб-страницу используют гиперссылки на файл видеоролика. Сама гиперссылка может быть выражена тестовой фразой, выделяемой автоматическим подчеркиванием. Вызов видеоролика осуществляется щелчком мыши по этой гиперссылке. Более подробно о гиперссылках будет сказано в разделе «Тема 4».
2.2. Практические задания по теме: задания 2-1…2-9
Задание 2-1.
1). Открыть в папке Prakt2 файл bmt2.txt в блокноте и сохранить его с тем же именем в формате html.
2). Запустить полученный файл в браузере и убедиться, что текст документа не форматирован.
3). Добиться того, чтобы текст в браузере отображался так же, как текст исходного документа (bmt2.txt) в блокноте по аналогии с заданиями по теме 1 (вводом тега абзаца <p>… </p в строках), сохранив результат как файл bmt2-1.html.
4). Применить ко всему документу bmt2-1.html единый стиль, скопировав его из файла Prakt1/bmt1-10.html, и сохранить результат.
Задание 2-2.
1). В заголовке заменить фразы «Кафедра» и «Биомедицинские приборы и компьютерные технологии» соответственно фразами «Миостимуляторы» и «Технические данные и описание миостимуляторов», сохранить результат как файл bmt2-2.html и проверить в браузере.
2). Скопировать в заголовок документа стиль “ramka” из bmt1-10.html.
3). Добавить в заголовок документа стиль с именем “block1”и атри-бутами: font-style:bolder; font-size:14pt; color:Darkcyan; text-indent:2em; margin-left:350px.
(p#block1{font-style:bolder; font-size:14pt; color:Darkcyan; text-indent:2em; margin-left:350px;})
4). Применить стиль “block1” к первому абзацу документа, сохранить результат и просмотреть в браузере.
(<p id="block1">… </p>)
5). Внести изменения в стиль “ramka”, уменьшив размер шрифта до 16pt, убрав атрибуты width, heidth, margin-bottom, увеличив толщину рамки до 4px и установив свободное пространство слева 350 px.
6). Применить измененный стиль ко второму блоку документа, сохранить результат и просмотреть в браузере.
Задание 2-3.
1). Добавить в заголовок документа еще 5 стилей с именами block2, block3, block4, block5, block6, различающихся между собой цветом текста. Цвета задать соответственно: color:fuchsia; color:olive; color:orange; color:forestgreen; color:gold;
2). Применить эти стили соответственно к пяти последним абзацам документа. Сохранить результат как файл bmt2-3.html и просмотреть в браузере.
(<p id="block2"> … <p id="block6">)
3). Увеличить интервалы между блоками по вертикали путем трехкратного ввода тега /br, сохранить результат и просмотреть в браузере.
4). Вставить в тег <body> атрибут фона bgcolor=”oldlace”, сохранить результат и просмотреть в браузере.
5). Добавить к стилям блоков block1 … block6 левые границы для текста соответственно: 350px, 400px, 350px, 400px, 350px, 400px. Cохранить результат и просмотреть в браузере.
Задание 2-4.
1). Закомментировать в теге <body> атрибут фона, сохранить результат как файл bmt2-4.html и просмотреть в браузере.
(<!-- bgcolor=”oldlace” -->)
2). Удалить весь комментарий и ввести атрибут фона как атрибут стиля в заголовочную часть документа для тела документа. В качестве фона использовать файл Ris_mio/oboi.gif. Сохранить результат и просмотреть в браузере.
(background-image:url("Ris_mio/oboi.gif")
Задание 2-5.
1). Вставить в первый блок html-документа рисунок миостимулятора шестиканального ris2-1.jpg из папки Ris_mio после строки «Технические характеристики<br/>». В конце строки с тегом img следует обязательно ставить тег <br/>, чтобы следующая строка не оказалась закрыта рисунком. Сохранить результат как файл bmt2-5.html и просмотреть в браузере.
( <img src="Ris_mio/ris2-1.jpg" ><br/> )
2). Уменьшить размер рисунка и уточнить его положение на экране, используя атрибуты width, align, vspace тега img. Размер рисунка в файле-источнике можно скорректировать в редакторе Dreamweaver или Paint Net, причем при сохранении пропорций в рисунке достаточно только задать новую ширину.
Установить ширину рисунка width =”300”, выравнивание рисунка по верхней строке текста в блоке align =top, отступ по вертикали для рисунка vspace=20.
Сохранить результат и просмотреть в браузере.
Задание 2-6.
1). Вставить рисунки для каждого блока с описанием отдельного прибора, после соответствующих заголовков: в блок 2 – ris2-3.jpg, в блок 3 – ris2-6.jpg, в блок4 – ris2-7.jpg, в блок5 – ris2-9.jpg, в блок6 – ris2-4.jpg, задав им ширину соответственно 300, 350, 400, 450, 500.
Сохранить результат как файл bmt2-6.html и просмотреть в браузере.
2). Выровнять рисунки, соответственно: слева, справа, по центру, по верху, по низу (строки), по низу документа (left, right, middle, top, bottom, abs bottom). Сохранить результат и просмотреть в браузере.
При выравнивании рисунок рассматривается как отдельная строка.
Задание 2-7.
1). Установить размер свободного пространства между рисунками и текстом по горизонтали hspace и по вертикали gspace для блоков 2…6
соответственно: hspace =10 для блока 2, vspace =10 для блока 3, vspace =20 для блока 4, hspace =20 для блока 5, vspace =20 для блока 6.
Сохранить результат как файл bmt2-7.html и просмотреть в браузере.
Рис. 2.1. Веб-страница документа bmt2-10.html (начало).
Рис. 2.1. Веб-страница документа bmt2-10.html (продолжение).
Рис. 2.1. Веб-страница документа bmt2-10.html (продолжение).
Рис. 2.1. Веб-страница документа bmt2-10.htm (окончание).
Задание 2-8.
1). Вставить видеоролик в html-документ путем создания гиперссылки в строке заголовка «Миостимулятор шестиканальный». Адрес гиперссылки – внутренний и указывает на файл видеоролика Sputnik.swf в папке Ris_mio. Сохранить результат как файл bmt2-8.html и просмотреть в браузере. Обратить внимание на появление подчеркивания данной строки заголовка. При подведении к ней мыши должен появиться указатель в виде кисти руки, что указывает на гиперссылку.
( <a href=”Ris_mio/ Sputnik.swf “>)
2). После запуска документа в браузере щелкнуть мышью по гиперссылке и наблюдать запуск видеролика. Если подключены звуковые колонки, будет также слышно звуковое сопровождение.
Задание 2-9.
1). Вставить анимационный рисунок Ris_mio/dnk.gif в начало html-документа, сразу после заголовочной части. Сохранить результат как файл bmt2-9.html и просмотреть в браузере.
2). Сместить рисунок вправо, введя атрибут hspace тега img: установить hspace =500. Сохранить результат и просмотреть в браузере.
( <body> <img src="Ris_mio/dnk.gif" hspace=500> )