ПРАКТИЧЕСКОЕ ЗАНЯТИЕ  № 23

 

ТЕМА:  Графика и мультимедиа на веб-страницах. Подготовка изображений для интернета.

 

ЦЕЛЬ РАБОТЫ: Сформировать знания о графике на веб-страницах. Сформировать умения выполнять подготовку изображений для интернета. 

 

ВРЕМЯ ВЫПОЛНЕНИЯ РАБОТЫ: 2 часа.

 

Место выполнения работы: кабинет Информатика.

 

Дидактическое и методическое обеспечение: ПЭВМ, методическая разработка, программное обеспечение, учебная литература:  

 

Литература: Г.А.Забаровский, А.Е. Пупцев. Информатика. Учебное пособие для 11 класса. Минск: Нарсвета, 2010

                   Г.А.Забаровский, А.Е. Пупцев. Информатика. Учебное пособие для 10 класса. Минскинск: БГУ, 2011

                  А.Е. Пупцев [и др.] Информатика. Учебное пособие для 11 класса. Минск: Нарсвета, 2008

 

 

 

Инструкция по охране труда прилагается отдельно

 

1. Последовательность выполнения практического занятия.

1.1. Внеаудиторная подготовка

а. повторить технику безопасности при работе на ПК.

б. повторить материал предыдущего занятия или изучить материал учебной  литературы: Информатика: учебное пособие для 11 класса, с. 24…30, 35..41.

1.2. Работа на учебном занятии

а. Выполнить практические задания.

б. Убрать рабочее место.

в. Оформить отчёт.

2. Методические указания

 

Теоретические сведения для выполнения Задания 1.

Фоновые изображения в HTML.

Если белый фон страницы вас не устраивает, то с помощью атрибута BACKGROUND тэга <BODY>, можно снабдить страницу любым графическим фоном.

 

Фоновый рисунок задается так: 

<body background=  * . * >, где  *.* - имя графического файла (в формате jpg,  gif, или png ).

 

Графический файл ОБЯЗАТЕЛЬНО должен располагаться в одной папке с документом, иначе нужно будет указывать к нему путь.

 Фрагмент текста программы использование графического файла snow.gif в качестве фонового рисунка:

 

  <titleтег BODYпараметр background</title>

             <body background=snow.gif>

                ...

             </body>

  

Задание 1. Создайте HTML-документ, результат которого показано на рисунке:

 Методика выполнения Задания 1.

 

- создайте на диске D: в каталоге Папка для сохранения папку - Номер группы (если она отсутствует);

 

- скопируйте в свою папку графический файл с диска D:\Файлы для работы\Файлы для HTML\backgrounds,  который вы будете использовать в качестве фона (руки - WB01741L.gif);

 

- создать HTML-документ, используя  фрагмент текста программы из теоретических сведений;

 

- в текстовом редакторе Patriot XP  перейдите на вкладку HTML для просмотра результата.

 

Теоретические сведения для выполнения Задания 2.

 

Изображения на веб-страницах.

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

 

Предназначенные для веб-страниц изображения можно создавать и редактировать в различных графических редакторах. Наиболее предпочтительные графические форматы gifjpg и png, т.е. файлы, которые имеют небольшие размеры, что позволяет ускорить процесс загрузки.

 

Важно подчеркнуть, что все изображения, которые мы видим на веб-страницаххраняться в отдельных файлах, а в НТМL-коде имеются лишь ссылки на них. 

 

Для  размещения изображений на веб-странице предназначен тег <img>. В простейшем случае он имеет вид  <img src=ИмяФайла>. В общем случае он может содержать атрибуты, которые задают способ отображения следующей конструкции:

<img src ="Имя Файла"

    borde ="Ширина рамки вокруг изображения"

        align ="Выравнивание текста относительно изображения"

            width ="Ширина изображения"  

            height ="Высота изображения" >

 Рассмотрим на примере выравнивание текста относительно рисунка с именем majak.jpg:

 

HTML-код:

Отображение в браузере:

<p> <img src="majak.jpgalign="top"> Выравнивание по верхней кромке </p>

Выравнивание по верхней кромке

<p><img src="majak.jpgalign="middle"> Выравнивание по середине</p>

Выравнивание посередине

<p> <img src="majak.jpgalign="bottom"> Выравнивание по нижней кромке</p>

Выравнивание по нижней кромке

 

Теперь пример HTML-кода для создание рамки вокруг рисунка с именем teacher.jpg с шириной рамки вокруг изображения, равной 3. 

 

HTML-код

Отображение в браузере

 

<p><img src=teacher.jpg border="3"></p>

 

и пример HTML–документа для создания рамки с шириной, равной 3, вокруг изображения:

 

<html>

<head>

<title>Графика </title>

</head>

<body>

<p><img src = teacher.jpg  border="3"></p>

</body>

</html>

 

И последний пример как изменить размера рисунка:

 

HTML-код

Отображение в браузере

<img src=tigr.jpg  width="50" height="41">

<img src=tigr.jpg  width="100"  height="82">

Задание 2. Разместите на веб-странице изображение трактора  обрамляя это изображение рамкой различной ширины как показано на рисунке ниже.

 

                      

 

 Методика выполнения Задания 2.

- перед началом создания странички просмотрите изображение трактора, которое находится на диске D:/ в каталоге Папка для сохранения в папке Для 1 курса/Веб-страницы  под именем traktor.jpeg;

- в текстовом редакторе Patriot  создайте веб-страничку и coхраните её в свою папку под именем  tractor.htm, пользуясь примером HTML –документа для создания рамки с шириной, равной 3, вокруг изображения.

 

Теоретические сведения для выполнения Задания 3.

Чтобы отображать текст на экране в том же виде, что и в текстовом редакторе, используется парный тег <pre>. Это позволяет упростить форматирование и не вставлять теги <br> в конце каждой строки.

 

Задание 3. Создать веб-страницу «Мой родны кут» как показано на рисунке.

 

 

 

 

 

 

 

 

 

 

 

 

Методика выполнения Задания 3.

- фотография музея Якуба Коласа – muzkolas.jpg находятся в папке Для 1 курса\Веб-страницы, фоновой рисунок имеет имя – WB0051L.gif и находится на диске D:/Файлы для работы/background;

HTML-документ этой веб-страницы может иметь вид:

 

<html>

  <head> <title> Мой родны кут </title>

   </head>

<body   background=”WB0051L.gif”>

<h2  align =”center”> Мой родны кут </h2

<iЯкуб КоласЗ паэмы ”Новая земля”</i>

<pre> Мой родны кут, як ты мне мiлы,

          Забыть цябе не маю сiлы!

          Не раз, утомлены дарогай,

          Жыццём вясны мае убогай,

          К табе я у думках залятаю,

          I там душой спачываю. </pre>

      <img src = ”muzkolas.jpg  width="480">

</body>

</html>

 

Теоретические сведения для выполнения Задания 4.

Подготовка изображений для интернета.

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

Например, нарисованные в графическом редакторе Paint картинки по умолчанию сохраняются в формате BMP (bit mappicture  ‑ битовая карта  изображения). В этом формате изображения хранятся в файлах в неупакованном виде. При этом размер файла (в байтах) равен произведению ширины W(width), высота H(height) изображения в пикселях, и глубины цвета С в битах  на 1 пиксель(W·H·С). Так, файл с небольшой картинкой размером 100 на 100 пикселей при глубине цвета 24 бит/пиксель  будет иметь размер около 29 Кбайт. Объем файла с изображением 800х600 превышает 1,4 Мбайт, а время его загрузки при скорости  модема 56 кбит/с более 200 с, что совершенно неприемлемо.

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

При большом разнообразии графических форматов для построения сайтов в основном используются форматы GIFJPEG(JPG) и PNG. Выбор формата хранения изображений во многом зависит от свойств самого изображения.

Например, формат GIF используют для изображений с четкими линиями, текстом и наличием больших одноцветных областей, например, чертежей, карт. Такие изображения называют штриховыми. Этот формат поддерживает ограниченную палитру оттенков, состоящую не более чем из 256 цветов, однако позволяет задавать прозрачный фон. Оптимизация заключается в уменьшении количества выбранных цветов. Важным достоинством формата GIF является возможность анимации. Поэтому этот формат широко используются для размещения на веб-страницах простых графических элементов: символов, формул, логотипов, рекламных роликов.

Формат JPEG позволяет передавать богатую палитру цветов и лучше всего подходит для изображений с плавным переходом тонов без четких линий и контуров, например, портретов, пейзажей. Такие изображения называют полутоновыми. Оптимизация заключается в замене областей с небольшим градиентом цвета на однотонные. Степень оптимизации характеризуют показателем качества от 0 до 100. Часто по умолчанию его принимают равным 65, что соответствует сжатию исходного неупакованного изображения в 6-10 раз. Сохранение изображений в формате JPEG предусмотрено практически во всех современных бытовых цифровых фотоаппаратах.

Для размещения изображений на веб-странице выработаны определенные правила ‑ рекомендации.

Размеры сохраняемых в файлах изображений должны соответствовать отображаемым на веб-страницах, несмотря на то, что их можно задавать в теге <img>. Ширина не должна превышать 600‑800 пикселей (пейзаж), а высота 400-600 (портрет). Если изображение обтекается текстом, то его размер должен находиться в пределах 200-300 пикселей.

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

o   приведение изображения к требуемому размеру;

o   сжатие изображения с оптимальным показателем качества.

 

Задание 4. Фотография 2048х1536 пиксель сохранена в файле розы.jpg  объемом 544 Кбайта. Оптимизировать изображение розы в графическом редакторе Adobe Photoshop.

 

Методика выполнения Задания 4.

- скопируйте в свою папку графический файл с диска D:\Папка для сохраненияля 1 курса\Веб-страницы\розы.jpg,  который вы будете использовать для оптимизации;

- откроем в редакторе Adobe Photoshop изображение, хранящееся в файле розы.jpg.

 

- уменьшим размер изображения до 800x600 пикселей: из меню Image (Изображение) вызовем окно Image Size (Размер изображения) и установим Width (Ширина) 800, в такой же пропорции изменится и высота и при этом объем файла на диске станет 244 Кбайт;

- продолжим оптимизацию путем сжатия изображения до приемлемого качества: из меню File (Файл) вы

зовем окно Save for Web (Сохранить для Веб) и с помощью вкладки 2‑UP установим два изображенияисходное (слева) и оптимизированное (справа).

 

будем уменьшать показатель качества (Quality), установив Preset - JPEG Medium. Это можно сделать грубо, выбирая в пункте Setting (Установка) один из показателей (Максимальное, Высокое, Среднее, Низкое) и точно, устанавливая значение движком или вводом числа,  уменьшимпоказатель качества до появления видимых изменений на оптимизированном изображении по сравнению с исходным;

- остановимся  на значении 30 и нажмем кнопку Save (Сохранить), качество изображения ухудшилось незначительно, нообъем оптимизированного файла не превышает 62 Кбайта, т.е. в 9 раз меньше исходного, а примерное время  его загрузки  при скорости  56,6 кб/с  около  11с.  

не забудьте, ввести новое имя для файла – розы2.jpg и сохранить в своей папке.

 

Теоретические сведения для выполнения Задания 5.

Изучив этапы разработки веб-сайтов и основные приёмы работы в редакторе FrontPage, возможно создавать сайты, посвященные различным предметным областям.

 Задание 5. Создать фрагмент сайта "Замковая архитектура Беларуси" с гиперссылками, состоящий из пяти веб-страниц по образцу, представленному на схеме ниже:

 

 

 

Методика выполнения Задания 2.

- все файлы, необходимые для работы находятся в папке в D:\Файлы для работы\Файлы для HTML\zamki;

- создайте в вашей папке папку под именем, например, zamki;

- в программе FrontPage  выполнить команду меню Файл → Создать и  окне Создание выбрать Одностраничный веб-узел, в появившемся окне Шаблоны веб-узлов выбрать Одностраничный веб-узел, указать расположение создаваемого узла ( папка - zamkiи нажать кнопку ОК

 

 

- появляется корневой каталог веб-узла с уже созданным, пустым файлом домашней страницы - index.htm.

 

- откройте файл - index.htm и  разместите информацию о замках Беларуси, например, вот так:

 

- сохраните файл и вернитесь в корневой каталог веб-узла;

- в корневом каталоге создайте папку – mir;

- сделайте ее текущей, создайте в ней пустую веб-страницу под именем - mir_zamok.htm;

измените  название страницы на Мирский замок;

разместите информацию о Мирском замке;

- создайте гиперссылку на домашнюю веб-страницу, примерно вот так:

 

 

- сохраним страницу;

- аналогично создадим веб-страницы с информацией об остальных замках Беларуси: ГольшанскомЛидскомесвижском.

- на домашней странице создадим гиперссылки на созданные веб-страницы с информацией о замках: МирскомольшанскомЛидскомНесвижском;

- просмотрите  web-сайт  в окне браузера.

 Самостоятельная работа

Создайте домашнюю страницу на тему «Города Беларуси» или на тему «Белорусская литература»на основе текстовой информации и фотографий, которые размещены на диске  D:\Папка для сохраненияля 1 курса\Города или Белорусская литература.

 

 

3. Содержание отчета

а. Титульный лист

б. Цель работы

в. Дидактическое и методическое обеспечение

г. Последовательность выполнения работы по заданиям с описанием основных этапов осуществляемых действий

д. Заключение в виде анализа полученных результатов и выводов

 

 Контрольные вопросы

1.  Для чего необходимо уменьшать объемы изображений на веб-страницах?

2.  В каких форматах рекомендуется хранить изображения для веб-страниц?

3. К каким основным операциям сводится процесс оптимизации?

4. Какие параметры веб-страниц можно настраивать?