Освоение правил и приемов вставки рисунков рисунков и видеороликов в веб-документы

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 и просмотреть в браузере.

Освоение правил и приемов вставки рисунков рисунков и видеороликов в веб-документы - student2.ru

Рис. 2.1. Веб-страница документа bmt2-10.html (начало).

Освоение правил и приемов вставки рисунков рисунков и видеороликов в веб-документы - student2.ru

Рис. 2.1. Веб-страница документа bmt2-10.html (продолжение).

Освоение правил и приемов вставки рисунков рисунков и видеороликов в веб-документы - student2.ru

Рис. 2.1. Веб-страница документа bmt2-10.html (продолжение).

Освоение правил и приемов вставки рисунков рисунков и видеороликов в веб-документы - student2.ru

Рис. 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> )

Наши рекомендации